:root{color-scheme:dark;--bg:#10131f;--ink:#f5ede5;--muted:#ccc0d6;--line:#d9bcff30;--accent:#e2b9ee;font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;background:var(--bg);color:var(--ink)}
*{box-sizing:border-box}body{margin:0;min-height:100svh;background:radial-gradient(ellipse at 75% 15%,#352c3b 0,transparent 58%),linear-gradient(150deg,#151b2c,#10131f 65%);display:flex;flex-direction:column}a{color:inherit;text-decoration:none}button,a{touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer}header,footer{display:flex;justify-content:space-between;align-items:center;padding:26px clamp(22px,6vw,90px);gap:20px}header{border-bottom:1px solid var(--line);font-size:.85rem}header a{padding:10px 0}.brand{letter-spacing:.22em}footer{font-size:.75rem;color:var(--muted);margin-top:auto}small{font-size:.65rem}main{width:min(100% - 44px,1040px);margin:0 auto;flex:1;outline:none}.serif,h1,h2,.letter{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-weight:400}h1{font-size:clamp(3.3rem,9vw,7rem);letter-spacing:.12em;margin:22px 0 32px;line-height:1.4}h2{font-size:clamp(1.6rem,4vw,2.6rem);line-height:1.8;overflow-wrap:anywhere}.eyebrow{font-size:.72rem;letter-spacing:.2em;color:var(--accent)}.hero{min-height:70svh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:50px 0;position:relative}.hero.with-cover{padding:clamp(24px,5vw,64px);isolation:isolate}.cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;border-radius:4px}.with-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#10131fe6,#10131f55);z-index:-1}.dedication{color:var(--muted);font-size:1rem;letter-spacing:.15em;margin-bottom:40px}.button{display:inline-flex;align-items:center;justify-content:center;gap:28px;min-height:48px;padding:13px 24px;border:1px solid var(--line);border-radius:3px;background:transparent;line-height:1.5}.primary{background:var(--accent);color:#211a23;border-color:var(--accent)}.button:hover{border-color:var(--accent);background:#ffffff0c}.primary:hover{background:#f5d3c7}.note{font-size:.8rem;color:var(--muted);line-height:1.9;max-width:40rem;margin:24px 0}.menu{padding:50px 0}.chapter-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 44px;padding:0;margin-top:35px}.chapter-list a{display:flex;align-items:center;gap:24px;padding:30px 8px;border-bottom:1px solid var(--line);min-height:110px}.chapter-list a:hover{background:#ffffff05}.number{font-family:Georgia,serif;color:var(--accent);font-size:1.1rem}.chapter-name{flex:1;line-height:1.8}.arrow{color:var(--muted)}.reader{max-width:740px;margin:0 auto;padding:48px 0}.reader-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.reader h2{margin:32px 0}.letter{font-size:clamp(1.2rem,2.7vw,1.65rem);line-height:2.3;letter-spacing:.04em;min-height:220px;overflow-wrap:anywhere;white-space:pre-line}.pending{color:var(--muted);font-size:.95rem;font-family:inherit;line-height:2}.navigation{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:24px;margin-top:36px}.navigation .button{padding:12px 18px}.progress{color:var(--muted);font-size:.78rem}.audio{font-size:.78rem;min-height:44px}.status{font-size:.8rem;color:var(--muted);min-height:1.5em}.skip{position:fixed;left:12px;top:-80px;padding:15px;background:var(--ink);color:var(--bg);z-index:10}.skip:focus{top:12px}:focus-visible{outline:2px solid var(--accent);outline-offset:6px}button:disabled{opacity:.4;cursor:default}.enter{animation:arrive .55s ease-out both}@keyframes arrive{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}@media(max-width:600px){header,footer{padding:18px 22px}.chapter-list{grid-template-columns:1fr}.chapter-list a{min-height:90px;padding:22px 4px}.hero{min-height:72svh}.reader{padding:30px 0}.letter{min-height:240px}.navigation .button{padding:12px;font-size:.85rem}.menu{padding:30px 0}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important}}
/* Cinematic layout; original cover is never cropped. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.scene-backdrop{display:none;position:fixed;inset:0;width:100%;height:100%;object-fit:cover;opacity:.16;pointer-events:none;z-index:-1}
body{isolation:isolate}.reading .scene-backdrop{display:block}
.hero.with-cover{padding:28px 0 40px;min-height:auto;align-items:center;gap:28px}.with-cover:after{display:none}.hero .cover{position:static;width:100%;height:auto;object-fit:contain;z-index:auto;border-radius:8px;box-shadow:0 16px 65px #0005}.hero .primary{min-width:210px}
.chapter-list{gap:18px;margin-bottom:30px}.chapter-list a{border:1px solid var(--line);border-radius:12px;padding:28px 24px;background:#231d36d9;transition:background .35s,border-color .35s,box-shadow .35s}.chapter-list a:hover{background:#342747;border-color:#d5a9e76b;box-shadow:0 0 26px #c098ff13}.chapter-title,.chapter-description{display:block}.chapter-title{font-family:"Yu Mincho",serif;font-size:1.2rem}.chapter-description{font-size:.78rem;color:var(--muted);margin-top:8px;line-height:1.8}
.reader{background:#151322ed;padding:36px clamp(22px,4vw,48px);margin:32px auto;border:1px solid var(--line);border-radius:12px;box-shadow:0 20px 70px #0003}.reader h2{margin:22px 0}.narrator{color:var(--accent);letter-spacing:.22em;font-size:.68rem;margin:30px 0 12px}.letter{font-size:clamp(1.1rem,2.4vw,1.4rem);line-height:2.1;min-height:200px}.ending{min-height:70svh;max-width:720px;margin:auto;padding:80px 22px;text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center}.ending h2{line-height:2;letter-spacing:.08em}.signature{font-family:Georgia,serif;font-size:1.6rem;margin:25px 0 50px}.end-nav{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}.character{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0 30px}.character div{border:1px solid var(--line);background:#2a2139;border-radius:6px;padding:12px}.character dt{font-size:.7rem;color:var(--muted)}.character dd{margin:7px 0 0;font-size:.92rem}.character div:last-child{grid-column:1/-1}
@media(max-width:600px){.hero.with-cover{padding:28px 0 50px;gap:32px;min-height:68svh;justify-content:center}.hero .cover{width:calc(100% + 44px);max-width:none;border-radius:0}.reader{padding:24px 18px;margin:22px auto}.chapter-list a{padding:24px 20px}.navigation .button{font-size:.8rem;padding:10px 9px;gap:0}.reader h2{font-size:1.5rem}.letter{line-height:2}.character{gap:8px}.scene-backdrop{object-position:70% center}}
/* v0.2: per-scene framing, preserving the existing layout and contrast. */
.scene-backdrop{object-position:var(--bg-position,50% 50%)}
@media(max-width:600px){.scene-backdrop{object-position:var(--bg-mobile-position,70% 50%)}}

/* The reading region receives focus on navigation, without a page-sized outline. */
main:focus-visible{outline:none}

/* A persistent two-layer surface keeps the original dimming constant. */
.scene-backdrops{display:none;position:fixed;inset:0;opacity:.16;pointer-events:none;z-index:-1}
.reading .scene-backdrops{display:block}
.scene-backdrops .backdrop-layer{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--bg-position,50% 50%);opacity:0;pointer-events:none}
@media(max-width:600px){.scene-backdrops .backdrop-layer{object-position:var(--bg-mobile-position,70% 50%)}}