:root{color-scheme:dark;--ink:#030a10;--paper:#eef2ee;--quiet:#b5c6cb;--sea:#a0d9df;--warm:#ebc09a;--prose:25px;--ui:"Segoe UI",system-ui,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:70px}body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--ui);overflow-x:hidden}button,input{font:inherit}button{cursor:pointer;color:inherit}a{color:inherit;text-decoration:none}button,a,input{touch-action:manipulation}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible{outline:2px solid var(--sea);outline-offset:6px}::selection{background:#507b86;color:#fff}.skip{position:fixed;left:20px;top:-80px;z-index:40;background:#0b1921;padding:15px}.skip:focus{top:12px}
/* The entire viewport is the scene. Text and atmosphere live on separate layers. */
.world{position:fixed;inset:0;z-index:0;overflow:hidden;background:#030a10;pointer-events:none}.camera{position:absolute;inset:-3%;animation:camera-drift 36s ease-in-out infinite alternate;will-change:transform}.backdrop{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.8s ease}.backdrop.is-visible{opacity:1}.shade{position:absolute;inset:0;background:linear-gradient(#020a126b,transparent 30%,transparent 65%,#020a1275),radial-gradient(ellipse at 50% 45%,transparent 35%,#020a1250)}.reading-shade{display:none}.grain{position:absolute;inset:0;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' opacity='.55' d='M0 0h170v170H0z'/%3E%3C/svg%3E")}@keyframes camera-drift{from{transform:scale(1.01) translate3d(-.4%,0,0)}to{transform:scale(1.07) translate3d(.5%,-.8%,0)}}
#rain{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;opacity:.72;transition:opacity 1s}.fog{position:absolute;width:155%;height:70%;left:-25%;bottom:-22%;background:radial-gradient(ellipse at 30% 50%,#bdd8df36,transparent 57%),radial-gradient(ellipse at 75% 45%,#a7c7d52b,transparent 53%);animation:fog-drift 30s ease-in-out infinite alternate;will-change:transform;z-index:1}.fog.second{bottom:20%;opacity:.38;animation-duration:43s;animation-direction:alternate-reverse}@keyframes fog-drift{from{transform:translate3d(-7%,4%,0)}to{transform:translate3d(9%,-5%,0)}}
.headlights{position:fixed;inset:0;pointer-events:none;opacity:0;z-index:2;transform-origin:90% 65%;background:radial-gradient(ellipse at 80% 67%,#e6f6ff99,transparent 14%),linear-gradient(160deg,transparent 43%,#cceaf83b 49%,transparent 57%),linear-gradient(164deg,transparent 44%,#d9eff842 50%,transparent 58%)}.headlights.play{animation:headlights 4s ease-out}@keyframes headlights{0%{opacity:0;transform:translate3d(18%,0,0) scaleX(.75)}30%{opacity:.7}100%{opacity:0;transform:translate3d(-30%,0,0) scaleX(1.5)}}
.ember{position:fixed;left:33%;top:52%;width:220px;height:220px;background:radial-gradient(circle,#ff9f537d,transparent 65%);opacity:0;pointer-events:none;z-index:2}.ember.play{animation:ember 2.1s ease-out}@keyframes ember{0%,100%{opacity:0;transform:scale(.5)}16%{opacity:.9;transform:scale(1)}42%{opacity:.5;transform:scale(.85)}}
.scan{position:fixed;inset:0;opacity:0;pointer-events:none;z-index:1;background:linear-gradient(0deg,transparent 49.8%,#a0d9df0d 50%,transparent 50.2%),linear-gradient(90deg,transparent 49.8%,#a0d9df0d 50%,transparent 50.2%);background-size:90px 90px;transition:opacity 1s}.system-active .scan{opacity:1}.scan:after{content:"";position:absolute;left:0;right:0;top:0;height:2px;opacity:0;background:linear-gradient(90deg,transparent,#a0d9dfaa,transparent)}.system-active .scan:after{animation:scan 2.8s ease-out}@keyframes scan{0%{opacity:0;transform:translateY(7vh)}20%{opacity:.65}100%{opacity:0;transform:translateY(95vh)}}
.topbar{position:fixed;left:0;right:0;top:0;z-index:12;display:flex;align-items:center;gap:24px;padding:22px 32px;background:linear-gradient(#020a12b3,transparent)}.logo{font-size:21px;font-weight:650;letter-spacing:.18em;text-shadow:0 2px 15px #000}.edition{font-size:12px;color:#dae4e5;text-shadow:0 2px 10px #000}.tools{margin-left:auto;display:flex;align-items:center;gap:8px}.tool{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:8px 12px;background:#07131b55;color:#e4eeee;border:1px solid #c3dde02e;border-radius:5px;font-size:12px}.tool:hover{background:#30434b88;border-color:#c3dde066}.tool svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5}.sound-waves{display:none}#sound[aria-pressed="true"] .sound-waves{display:block}#sound[aria-pressed="true"]{border-color:#a0d9df88}.settings,.toc{position:relative}.settings summary,.toc summary{list-style:none;cursor:pointer}.settings summary::-webkit-details-marker,.toc summary::-webkit-details-marker{display:none}.settings-panel,.toc-panel{position:absolute;right:0;top:50px;width:265px;background:#081923f5;border:1px solid #adc8d140;border-radius:6px;padding:24px;box-shadow:0 20px 60px #0007}.settings-panel label{display:block;font-size:14px;margin-bottom:22px}.settings-panel label:last-child{margin:0}.settings-panel output{float:right;color:#b5c6cb}.settings-panel input[type="range"]{display:block;width:100%;margin:14px 0 0;accent-color:var(--sea)}.settings-panel .check{display:flex;gap:10px;align-items:center}.check input{accent-color:var(--sea);width:17px;height:17px}.scene-rail{display:flex;flex-direction:column;gap:18px}.scene-rail a{display:flex;align-items:center;gap:12px;font-size:14px;color:#c1d1d8}.rail-mark{height:1px;width:16px;background:#a0d9df55}.scene-rail a[aria-current="location"]{color:#fff}.scene-rail a[aria-current="location"] .rail-mark{background:#a0d9df}.progress{position:fixed;left:0;right:0;top:0;height:2px;background:#b9e3e8;transform:scaleX(0);transform-origin:left;z-index:15}
.hero{position:relative;z-index:3;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;padding:120px 25px 110px}.hero-enter{position:relative;animation:arrive 1.8s ease-out both}.hero-enter:before{content:"";position:absolute;inset:-80px -150px;background:radial-gradient(ellipse,#020a126b,transparent 70%);z-index:-1}.hero-overline{font-size:13px;color:#d3e1e1;letter-spacing:.08em;margin:0 0 32px;text-shadow:0 2px 12px #000}.hero h1{font:400 clamp(110px,17vw,240px)/.95 Georgia,serif;letter-spacing:-.055em;margin:0 0 28px;color:#f1f4f0;text-shadow:0 4px 45px #0008}.hero-desc{font:italic 22px/1.5 Georgia,serif;letter-spacing:.01em;color:#d9e4df;margin:0 0 45px;text-shadow:0 2px 15px #000}.start{display:inline-flex;align-items:center;gap:18px;padding:15px 20px;border:1px solid #d4e7e74d;background:#06121b55;border-radius:3px;font-size:13px}.start:hover{background:#25465399;border-color:#d4e7e7aa}.start svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.2}.hero-note{position:absolute;left:0;right:0;bottom:30px;font-size:11px;letter-spacing:.04em;color:#d1e0df;text-shadow:0 2px 10px #000}.intro-line{display:none}@keyframes arrive{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
.story{position:relative;z-index:3}.scene{position:relative;margin:0;padding:0;scroll-margin-top:0}.section-head{min-height:65svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;text-align:center;padding:110px 25px 50px;text-shadow:0 3px 30px #000;position:relative}.section-head:before{content:"";position:absolute;inset:10%;background:radial-gradient(ellipse,#030a1066,transparent 65%);z-index:-1}.scene:first-child .section-head{display:none}.section-head span{font-size:12px;letter-spacing:.12em;color:#c6e3e8}.section-head h2{font:400 clamp(45px,6.5vw,94px)/1.1 Georgia,serif;letter-spacing:-.045em;margin:0}.prose{font:400 var(--prose)/1.85 Georgia,"Times New Roman",serif;color:#edf0e9;text-shadow:0 2px 8px #000,0 4px 25px #0009}.passage{width:min(100% - 64px,700px);margin:0 auto;min-height:90svh;display:flex;flex-direction:column;justify-content:center;padding:16vh 0;position:relative}.passage:before{content:"";position:absolute;inset:5% -160px;background:radial-gradient(ellipse,#020910d9 5%,#0209109c 40%,transparent 72%);z-index:-1;pointer-events:none}.prose p{margin:0 0 1.25em;overflow-wrap:break-word}.prose p:last-child{margin-bottom:0}.prose p.dialogue{color:#f4e7d5}.prose p.beat{font-size:1.15em;color:#f2d5b4;font-style:italic}.passage.opening{text-align:center;min-height:75svh}.passage.opening p{font-size:clamp(37px,5vw,67px);line-height:1.35;letter-spacing:-.025em;color:#f1f6f2}.prose p[data-cue="lighter"]{color:#f1c7a4}.prose p[data-cue="headlights"]{color:#e4f4ff}.system-line{font:15px/1.8 "Cascadia Code",Consolas,monospace;color:#b6f2f0;border-left:1px solid #9ce6eb9c;padding:8px 0 8px 20px;text-shadow:0 0 22px #71c0d044,0 2px 12px #000}.word{white-space:nowrap}.has-reveals .word{display:inline-block;opacity:0;transform:translate3d(0,9px,0);transition:opacity .7s ease var(--delay,0ms),transform 1s cubic-bezier(.2,.65,.3,1) var(--delay,0ms)}.has-reveals .is-visible .word{opacity:1;transform:translate3d(0,0,0)}
.scene-caption{position:fixed;left:30px;bottom:23px;z-index:6;display:flex;gap:13px;align-items:baseline;opacity:0;visibility:hidden;text-shadow:0 2px 15px #000}.is-reading .scene-caption{opacity:1;visibility:visible}.caption-counter{font-size:11px;color:#b9d5dc;letter-spacing:.04em}.scene-caption h2{font:400 13px var(--ui);margin:0;color:#e3eded}.caption-rule,.caption-detail{display:none}.ending{position:relative;z-index:3;min-height:75svh;padding:140px 25px 100px;display:flex;flex-direction:column;justify-content:center;text-align:center;background:linear-gradient(transparent,#030a10 90%);text-shadow:0 2px 20px #000}.ending .end-mark{font:400 48px/1.2 Georgia,serif;margin:0 0 22px}.ending p{font-size:13px;color:#c7d6d8;margin:0 0 35px}.end-links{display:flex;justify-content:center;gap:25px;flex-wrap:wrap}.end-links a{font-size:13px;border-bottom:1px solid #b7d1d966;padding-bottom:9px}.toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);z-index:30;padding:14px 22px;max-width:90vw;background:#102a36f2;color:#e4eeee;border:1px solid #a0d9df66;border-radius:5px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .3s}.toast.show{opacity:1}
.effects-off .fog,.effects-off #rain,.effects-off .headlights,.effects-off .ember,.effects-off .scan{display:none}.effects-off .camera,.effects-off .fog{animation:none;will-change:auto}.effects-off .backdrop{transition:none}.effects-off .word,.focus-mode .word{opacity:1!important;transform:none!important;transition:none!important}.focus-mode .world{opacity:.2}.focus-mode #rain,.focus-mode .fog,.focus-mode .headlights,.focus-mode .ember,.focus-mode .scan{display:none}.focus-mode .camera{animation:none}.focus-mode .passage{min-height:0;padding:30px 0}.focus-mode .passage:before{display:none}.focus-mode .section-head{min-height:35svh}.page-hidden .camera,.page-hidden .fog{animation-play-state:paused}
@media(max-width:800px){:root{--prose:23px}.topbar{padding:19px 22px;gap:15px}.edition{display:none}.passage{width:min(100% - 64px,650px)}.passage:before{inset:2% -80px}.section-head{min-height:55svh}.hero h1{font-size:clamp(110px,24vw,190px)}.scene-caption{left:23px;bottom:18px}}
@media(max-width:550px){:root{--prose:21px}.topbar{padding:16px 18px}.logo{font-size:18px}.tools{gap:5px}.tool{padding:8px 10px;font-size:11px;min-height:38px}.tool .optional,#sound-label{display:none}.hero{padding:120px 25px 100px}.hero-overline{font-size:12px;margin-bottom:28px}.hero h1{font-size:140px}.hero-desc{font-size:20px}.hero-note{bottom:28px;font-size:10px}.passage{width:calc(100% - 52px);min-height:85svh;padding:14vh 0}.passage:before{inset:-3% -50px;background:radial-gradient(ellipse,#020910e0 10%,#020910ae 50%,transparent 76%)}.prose{line-height:1.85}.prose p{margin-bottom:1.1em}.passage.opening{min-height:70svh}.passage.opening p{font-size:39px}.section-head{min-height:55svh;padding-top:90px}.section-head h2{font-size:48px}.system-line{font-size:13px;padding-left:14px}.settings-panel,.toc-panel{width:245px;padding:22px}.toc-panel{right:-43px}.scene-caption{left:19px;bottom:15px}.scene-caption h2{font-size:11px}.caption-counter{font-size:10px}.ending .end-mark{font-size:37px}#rain{opacity:.5}.ember{left:15%;top:45%}.headlights{background:radial-gradient(ellipse at 80% 67%,#e6f6ff80,transparent 25%),linear-gradient(160deg,transparent 43%,#cceaf838 49%,transparent 57%)}.hero-enter:before{inset:-50px -40px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.camera{will-change:auto}.fog,#rain,.headlights,.ember,.scan{display:none!important}.has-reveals .word{opacity:1!important;transform:none!important}}


/* Warm glass and cold rain are the two visual anchors of these chapters. */
:root{--amber:#e7c297;--night:#07121b;--signal:#a8e5ec;--danger:#ad3e28}
.hero h1{font-size:clamp(76px,16vw,205px);letter-spacing:-.065em}
.hero-desc{max-width:560px;margin-left:auto;margin-right:auto}
.hero-note{padding:0 24px;line-height:1.7}
.passage{min-height:78svh;padding:13vh 0}
.prose .message-line{font:600 clamp(22px,3.5vw,38px)/1.7 "Cascadia Code",Consolas,monospace;letter-spacing:.04em;color:#f2dab4;border-block:1px solid #e7c29755;padding:32px 0}
.prose p[data-cue="fall"]{font-size:1.35em;color:#d2edf0}
.prose p[data-cue="sparks"]{color:#c7edff}
.prose p[data-cue="gas"]{color:#f1c497}
.chapter-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:25px;padding-top:20px;border-top:1px solid #abc8d133;font-size:12px;color:#b9c9cc}
.chapter-links [aria-current]{color:white;border-bottom:1px solid #b6d9dd}
.next-scene{color:#e8d2b2}.next-scene span{padding-left:16px}
.sound-credits{margin-top:55px;font-size:11px;color:#9aafb7}
.atmosphere{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.atmosphere>div{position:absolute;inset:0;pointer-events:none}
.chandelier-glow{opacity:0;background:radial-gradient(ellipse at 50% -20%,#ffda983b,transparent 65%);transition:opacity 2s}
[data-mood="ballroom"] .chandelier-glow,[data-mood="target"] .chandelier-glow,[data-mood="conflict"] .chandelier-glow{opacity:.8}
[data-book-scene="2"] .fog{opacity:.06}
[data-mood="window"] .fog,[data-mood="trap"] .fog,[data-mood="gas"] .fog{opacity:.3}
.window-frame{opacity:0;background:linear-gradient(90deg,#040a11e6 0%,#070f16cc 4%,transparent 4.4%,transparent 95%,#050c14d9 95.6%),linear-gradient(0deg,#040a11 0%,transparent 7%);transition:opacity 1.5s}
[data-mood="window"] .window-frame,[data-mood="trap"] .window-frame,[data-mood="gas"] .window-frame{opacity:1}
.atmosphere .target-ring{inset:24% 14% 25% 65%;border:1px solid #a1dbe44f;opacity:0;transition:opacity 1s;clip-path:polygon(0 0,20% 0,20% 1%,80% 1%,80% 0,100% 0,100% 20%,99% 20%,99% 80%,100% 80%,100% 100%,80% 100%,80% 99%,20% 99%,20% 100%,0 100%,0 80%,1% 80%,1% 20%,0 20%)}
[data-mood="target"] .target-ring{opacity:.75}
.wine-wash{opacity:0;background:radial-gradient(ellipse at 90% 70%,#6f122a7d,transparent 65%)}
.cue-wine .wine-wash{animation:wine-spread 3s ease-out both}
@keyframes wine-spread{0%{opacity:0;transform:scale(.8)}30%{opacity:.65}100%{opacity:0;transform:scale(1.2)}}
.pepper-cloud{opacity:0;transition:opacity 2.5s}
.pepper-cloud i{position:absolute;inset:15% -20% -35%;background:radial-gradient(ellipse at 80% 75%,#c979285e,transparent 55%),radial-gradient(ellipse at 12% 50%,#c5672933,transparent 60%);animation:pepper-drift 16s ease-in-out infinite alternate;will-change:transform}
.pepper-cloud i+i{inset:-25% -15% 10%;opacity:.65;animation-duration:23s;animation-direction:alternate-reverse}
.gas-active .pepper-cloud{opacity:1}
@keyframes pepper-drift{from{transform:translate3d(-6%,10%,0) scale(.94)}to{transform:translate3d(7%,-8%,0) scale(1.2)}}
.alarm-glow{opacity:0;background:radial-gradient(ellipse at 0% 45%,#c5352638,transparent 55%),radial-gradient(ellipse at 100% 0%,#af251c42,transparent 50%);transition:opacity 1s}
.alarm-active .alarm-glow{animation:alarm-breathe 4s ease-in-out infinite}
@keyframes alarm-breathe{0%,100%{opacity:.15}50%{opacity:.85}}
.searchlights{opacity:0;transition:opacity 2s}
.searchlights i{position:absolute;top:-18vh;left:3vw;width:110vw;height:145vh;transform-origin:15% 0;background:linear-gradient(100deg,transparent 38%,#d2eaff06 42%,#d2eaff24 49%,#d2eaff08 54%,transparent 57%);animation:search-sweep 13s ease-in-out infinite alternate}
.searchlights i+i{left:30vw;animation-delay:-7s;animation-duration:19s;opacity:.55}
.alarm-active .searchlights{opacity:1}
@keyframes search-sweep{from{transform:rotate(-42deg) translateX(-15%)}to{transform:rotate(37deg) translateX(12%)}}
.atmosphere .sparks{inset:auto 8% 8vh auto;width:min(480px,75vw);height:35vh;opacity:0;background:radial-gradient(ellipse,#62c1f333,transparent 52%)}
.sparks svg{width:100%;height:100%;fill:none;stroke:#b7efff;stroke-width:2;stroke-linecap:round;stroke-dasharray:8 13 2 25}
.cue-sparks .sparks{animation:spark-glow 1.1s ease-out both}
.cue-sparks .sparks svg{animation:spark-travel 1s ease-out both}
@keyframes spark-glow{0%{opacity:0}14%{opacity:.85}100%{opacity:0}}
@keyframes spark-travel{from{stroke-dashoffset:80;transform:scale(.6)}to{stroke-dashoffset:-35;transform:scale(1.15)}}
.cable-dust{opacity:0;background:radial-gradient(circle at 22% 17%,#c1d6d9 0 1px,transparent 2px),radial-gradient(circle at 34% 42%,#c1d6d9 0 1px,transparent 2px),radial-gradient(circle at 19% 62%,#c1d6d9 0 1px,transparent 2px);background-size:91px 113px;mask-image:linear-gradient(90deg,transparent 15%,#000 23%,transparent 35%)}
.cue-dust .cable-dust{animation:dust-fall 3s ease-out both}
@keyframes dust-fall{0%{opacity:0;transform:translateY(-4%)}15%{opacity:.5}100%{opacity:0;transform:translateY(12%)}}
.cue-fall .camera,.cue-descent .camera{animation:window-drop 2.4s cubic-bezier(.2,.5,.3,1) both}
@keyframes window-drop{from{transform:scale(1.06) translateY(-2%)}to{transform:scale(1.09) translateY(1.5%)}}
[data-mood="forest"] .shade{background:linear-gradient(#020a1270,transparent 40%,#020a1290)}
.effects-off .atmosphere,.focus-mode .atmosphere{display:none}
.effects-off .camera,.focus-mode .camera{animation:none!important}
.page-hidden .atmosphere *{animation-play-state:paused!important}
.focus-mode .hero{min-height:65svh}
@media(max-width:550px){.hero h1{font-size:clamp(70px,19vw,108px)}.passage{padding:12vh 0}.hero-desc{font-size:19px}.prose .message-line{font-size:22px}.target-ring{display:none}.section-head h2{font-size:clamp(36px,10vw,48px)}.toc-panel{max-height:70svh;overflow:auto}.end-links{gap:22px}}
@media(prefers-reduced-motion:reduce){.atmosphere{display:none!important}}