:root{--ink:#383831;--paper:#f5f2e9;--muted:#77756c;--amber:#b68a49;color-scheme:light;font-family:Baskerville,"Palatino Linotype","Songti SC",Georgia,serif;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{overscroll-behavior:none}button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:12px 2px;touch-action:manipulation}button:focus-visible{outline:1px solid var(--amber);outline-offset:7px}button:hover{color:#aa7030}button[hidden],[hidden]{display:none!important}
#experience{position:relative;isolation:isolate;width:100%;height:100dvh;overflow:hidden;user-select:none}#world{position:absolute;width:100%;height:100%;inset:0;touch-action:none}#memories{position:absolute;inset:0;pointer-events:none;overflow:hidden}.memory{position:absolute;left:0;top:0;width:48px;height:48px;display:grid;place-items:center;font-family:"Songti SC","Noto Serif CJK SC",serif;font-size:25px;color:#736347;text-shadow:0 0 17px #d6a45b70;will-change:transform;line-height:1}.memory:before{content:"";position:absolute;inset:2px;border-radius:50%;background:radial-gradient(circle,#f4d29542,transparent 70%);z-index:-1}
.texture{position:absolute;inset:0;pointer-events:none;opacity:.065;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.87' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.45' d='M0 0h180v180H0z'/%3E%3C/svg%3E");mix-blend-mode:multiply}
.hud{position:absolute;inset:28px 36px auto;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;z-index:5}.chapter{display:flex;gap:15px;align-items:center;font-size:10px;letter-spacing:.22em;text-transform:uppercase}.roman{font-size:23px;letter-spacing:0;font-weight:normal}.chapter-zh{font-size:11px;letter-spacing:.38em;color:var(--muted)}.tools{display:flex;align-items:center;gap:22px;pointer-events:auto}.tools button{font-size:9px;letter-spacing:.17em;text-transform:uppercase;min-height:40px;color:#68675e}
.opening{position:absolute;left:0;right:0;top:20%;text-align:center;transition:opacity 1.8s,transform 1.8s;z-index:3;pointer-events:none}.opening button{pointer-events:auto}.opening.departed{opacity:0;transform:translateY(-14px);pointer-events:none}.opening.departed button{pointer-events:none}.eyebrow{font-size:9px;letter-spacing:.38em;text-transform:uppercase;line-height:1.7;margin:0 0 21px;color:#6f6a5f}h1{font-weight:normal;font-size:clamp(36px,5.5vw,76px);letter-spacing:.1em;text-transform:uppercase;margin:0 0 14px;line-height:1.15}.chinese-title{font-size:12px;letter-spacing:.26em;color:#858071;margin:0}.hairline{width:38px;height:1px;background:currentColor;opacity:.3;margin:25px auto}.instructions{font-style:italic;font-size:17px;margin:0 0 12px;color:#615f55}.keys{font-size:9px;letter-spacing:.16em;color:#7d786b}.begin{font-size:10px;letter-spacing:.27em;text-transform:uppercase;margin-top:16px;min-height:44px;position:relative}.begin:after{content:"";position:absolute;height:1px;background:currentColor;opacity:.35;left:2px;right:4px;bottom:7px;transform:scaleX(.4);transition:transform .3s}.begin:hover:after{transform:scaleX(1)}.begin span{display:inline-block;margin-left:14px;font-size:17px}
#progress{position:absolute;bottom:27px;left:50%;transform:translateX(-50%);width:210px;text-align:center;transition:opacity 1s;pointer-events:none}#collected{min-height:30px;letter-spacing:.55em;font-size:14px;color:#8f6e3d;opacity:.75;white-space:nowrap}.meter{height:1px;background:#53534530;width:100%}#meter-fill{height:2px;position:relative;top:-.5px;background:linear-gradient(90deg,#b6884b,#d8b476);width:0%;transition:width .65s;box-shadow:0 0 8px #c7a66750}.meter-meta{display:flex;justify-content:space-between;font-size:8px;text-transform:uppercase;letter-spacing:.14em;margin-top:11px;color:#747063}#count{font-variant-numeric:tabular-nums;letter-spacing:.12em}#movement-hint{font-size:10px;color:#888174;letter-spacing:.15em;margin:15px 0 0;transition:opacity 2s}
.whisper{position:absolute;top:73%;width:100%;padding:0 30px;text-align:center;font-style:italic;font-size:clamp(16px,2vw,22px);opacity:0;transition:opacity 2s;pointer-events:none;color:#6d685b}.whisper.visible{opacity:.9}.saying{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;text-align:center;align-items:center;background:radial-gradient(ellipse,#f6f0e5e8 0%,#f6f0e5c7 35%,#f6f0e500 75%);opacity:0;transition:opacity 2s;z-index:4}.saying.visible{opacity:1}.saying .eyebrow{margin-bottom:26px}.saying h2{font-family:"Songti SC","Noto Serif CJK SC",serif;font-size:clamp(29px,4vw,47px);font-weight:normal;letter-spacing:.32em;text-indent:.32em;margin:0 16px 22px;line-height:1.6}.translation{font-size:clamp(17px,2.4vw,25px);font-style:italic;line-height:1.5;margin:0 25px}.saying .hairline{margin:27px auto 8px}.ending{position:absolute;inset:0;text-align:center;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:0 25px 13vh;opacity:0;transition:opacity 3s;color:#eee2c9}.ending.visible{opacity:1}.ending p{font-size:clamp(18px,2.4vw,26px);font-style:italic;line-height:1.5;margin:0 0 12px}.prototype-note{font-size:8px;letter-spacing:.2em;text-transform:uppercase;opacity:.45;margin-top:28px}.paused{position:absolute;inset:0;background:#f5f2e9db;backdrop-filter:blur(5px);z-index:10;display:flex;align-items:center;justify-content:center;flex-direction:column}.paused p{font-style:italic;font-size:25px}.night .hud{color:#e6dac5}.night .tools button{color:#c7bda9}.night .chapter-zh{color:#a9a494}
@media(max-width:600px){.hud{inset:16px 19px auto}.chapter{gap:9px;font-size:8px;letter-spacing:.15em}.chapter-zh{display:none}.tools{gap:13px}.tools button{font-size:8px}.opening{top:22%}h1{font-size:clamp(31px,8.6vw,48px);letter-spacing:.055em}.eyebrow{font-size:8px;letter-spacing:.25em}.instructions{font-size:15px}.keys{font-size:8px}.hairline{margin:21px auto}#progress{bottom:22px;width:184px}.whisper{top:76%;font-size:17px}.saying h2{letter-spacing:.19em}.translation{max-width:290px}.memory{font-size:24px}.ending{padding-bottom:16vh}}
@media(prefers-reduced-motion:reduce){.texture{opacity:.035}*,*:before,*:after{transition-duration:.15s!important}.opening.departed{transform:none}}

/* Opening text sits on a soft paper wash; the start invitation sits below the lantern. */
.opening{top:0;bottom:0;padding-top:clamp(92px,18vh,195px);transform:none}
.opening-copy{position:relative;isolation:isolate;width:fit-content;max-width:96%;margin:0 auto;padding:0 18px 18px}
.opening-copy:before{content:"";position:absolute;inset:-35px -45px -20px;z-index:-1;background:radial-gradient(ellipse,#f5f3eced 0%,#f5f3ecd9 40%,#f5f3ec00 73%);pointer-events:none}
.opening .instructions{color:#49483f}.opening .keys{color:#615e53;font-size:10px}
#begin{position:absolute;bottom:5.5vh;left:50%;transform:translateX(-50%);width:min(620px,94vw);margin:0;padding:30px 16px;color:#383831;font-size:12px;letter-spacing:.32em;white-space:nowrap;isolation:isolate}
#begin:before{content:"";position:absolute;inset:-15px -25px;z-index:-1;background:radial-gradient(ellipse,#f5f3ecfa 0%,#f5f3eceb 38%,#f5f3ec00 73%);pointer-events:none}
#begin:after{display:none}#begin:hover{color:#936a2b}
@media(max-width:600px){.opening{padding-top:19vh}.opening-copy{padding:0 6px 14px}.opening-copy:before{inset:-25px -10px -20px}.opening .keys{font-size:9px}#begin{font-size:10px;letter-spacing:.23em;bottom:7vh;padding:26px 8px}}
@media(max-height:540px){.opening{padding-top:70px}.opening .eyebrow{margin-bottom:10px}.opening h1{font-size:36px}.opening .hairline{margin:12px auto}.opening .instructions{font-size:15px}.opening .keys{margin:8px 0}#begin{bottom:2vh;padding:20px 8px}}

/* Pulse only the lettering, leaving the quiet paper behind it steady. */
#begin .prompt-label{display:inline;margin:0;font-size:inherit;animation:start-breathe 3.2s ease-in-out infinite}
@keyframes start-breathe{0%,100%{opacity:.35}50%{opacity:.9}}
#opening:focus,#saying:focus,#world:focus{outline:none}
.begin:focus-visible{outline:none;text-decoration:underline;text-underline-offset:8px;text-decoration-thickness:1px}
#begin:focus-visible .prompt-label,#begin:hover .prompt-label{animation:none;opacity:1}
@media(prefers-reduced-motion:reduce){#begin .prompt-label{animation:none;opacity:.9}}

/* A consistent reading area above the meter, protected from passing rooflines. */
.whisper{top:auto;bottom:133px;left:50%;transform:translateX(-50%);width:min(720px,96vw);padding:22px 30px;line-height:1.5;font-size:clamp(20px,2.1vw,26px);color:#434238;z-index:3;isolation:isolate;text-wrap:balance}
.whisper:before{content:"";position:absolute;inset:-18px -30px;z-index:-1;background:radial-gradient(ellipse,#f5f1e7fa 0%,#f5f1e7ee 40%,#f5f1e700 73%);pointer-events:none}
.whisper.visible{opacity:1}
@media(max-width:600px){.whisper{top:auto;bottom:133px;width:96vw;padding:18px 23px;font-size:21px}.whisper:before{inset:-16px -8px}}
@media(max-height:540px){.whisper{bottom:108px;padding:14px 22px;font-size:19px}}

/* Keep collection progress in the upper HUD, separate from the reading area. */
#progress{top:24px;bottom:auto;width:240px;padding:10px 14px 0;isolation:isolate;z-index:4}
#progress:before{content:"";position:absolute;inset:-22px -52px -16px;z-index:-1;background:radial-gradient(ellipse,#f5f1e7f5 0%,#f5f1e7db 40%,#f5f1e700 74%);pointer-events:none}
#collected{color:#7a5b31;opacity:1}
.meter-meta{font-size:9px;color:#535044}
#movement-hint{font-size:9px;color:#625e52}
@media(max-width:600px){#progress{top:62px;bottom:auto;width:220px;padding:6px 12px 0}#collected{min-height:24px}#progress:before{inset:-14px -36px -14px}}
@media(max-height:540px){#progress{top:12px}#movement-hint{display:none}}

/* A quiet page turn between places; it covers the scene reset completely. */
.passage{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f5f2e9;opacity:0;transition:opacity 1.2s;pointer-events:none}
.passage.visible{opacity:1;pointer-events:auto}.passage .eyebrow{font-size:22px;letter-spacing:0}.passage h2{font-weight:normal;text-transform:uppercase;letter-spacing:.24em;font-size:clamp(23px,4vw,40px);margin:0}

/* The Mist keeps the fine-line language, with light ink on dark paper. */
.dark-scene{--ink:#e0dfd3;--muted:#a9b5bc;color:var(--ink)}
.dark-scene .tools button,.dark-scene .eyebrow,.dark-scene .chinese-title,.dark-scene .opening .instructions,.dark-scene .opening .keys,.dark-scene .meter-meta,.dark-scene #movement-hint{color:#bfc9cc}
.dark-scene #begin,.dark-scene .whisper{color:#e0dfd3}
.dark-scene .opening-copy:before,.dark-scene #begin:before,.dark-scene .whisper:before,.dark-scene #progress:before{background:radial-gradient(ellipse,#1c2a37e8 0%,#1c2a37ac 38%,#1c2a3700 74%)}
.dark-scene .saying{background:radial-gradient(ellipse,#1c2a37f2 0%,#1c2a37cf 35%,#1c2a3700 75%)}
.dark-scene .paused{background:#1c2a37ed}
.dark-scene #collected,.dark-scene .memory{color:#e1d3a9}
.dark-scene .meter{background:#c4cdd340}
.dark-scene .texture{mix-blend-mode:screen;opacity:.045}
/* The page-turn remains neutral while covering a chapter change. */
.dark-scene .passage{color:#383831}.dark-scene .passage .eyebrow{color:#77756c}

/* Polish: the wish is the progress, and the flame owns the centre of the stage. */
.journey{display:flex;gap:5px;margin-left:2px;align-items:center}
.journey span{display:block;width:3px;height:10px;background:currentColor;opacity:.15;transition:opacity 1.5s,height 1.5s}
.journey .visited{opacity:.5}.journey [aria-current]{height:17px;opacity:.85}
#collected{display:flex;justify-content:center;gap:13px;min-height:34px;letter-spacing:0;font-size:19px}
.wish-letter{display:inline-block;min-width:18px;opacity:.3;transform:translateY(2px);transition:color .8s,opacity .8s,transform .8s}
.wish-letter.found{opacity:1;transform:translateY(0);text-shadow:0 0 16px #d7a84b40}
.meter{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.meter-meta{justify-content:center;margin-top:3px;font-size:9px;letter-spacing:.16em}
#count{display:none}#movement-hint{font-size:11px;letter-spacing:.04em;line-height:1.6;margin-top:12px}
.memory{font-size:28px;text-shadow:0 0 22px #d6a45b70}.dark-scene .memory{text-shadow:0 0 20px #e6b74770}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.saying{justify-content:flex-start;padding-top:48vh;background:linear-gradient(transparent 34%,#f6f0e5b8 51%,#f6f0e585 72%,transparent);transition:opacity 1.6s}
.dark-scene .saying{background:linear-gradient(transparent 34%,#17233270 51%,#17233245 74%,transparent)}
.saying .eyebrow{margin-bottom:17px}.saying h2{margin-bottom:12px}.saying .hairline{margin:20px auto 0}
.saying .translation,.saying .begin{opacity:0;transform:translateY(6px);transition:opacity 1.4s,transform 1.4s}
.saying.visible .translation,.saying.visible .begin{opacity:1;transform:none}
.saying.visible .translation{transition-delay:.45s}.saying.visible .begin{transition-delay:1s}
.reading .chapter,.releasing .chapter{opacity:.5}.hud .chapter{transition:opacity 2s}
.passage h2{font-size:clamp(22px,3.4vw,38px);letter-spacing:.2em}
.passage .eyebrow,.dark-scene .passage .eyebrow{color:inherit;opacity:.65}
#passage-caption{font-size:clamp(16px,2vw,21px);font-style:italic;opacity:.8;line-height:1.6;margin:22px 28px 0;text-align:center;text-wrap:balance}
.ending{padding-bottom:16vh}.ending p{max-width:440px;text-wrap:balance}
.releasing .chapter{opacity:0}.releasing #progress{display:none}
.tools button{font-size:10px;min-width:44px}.dark-scene button:hover{color:#ffdfa0}
.whisper{font-size:clamp(19px,2vw,24px)}
@media(max-width:760px){#progress{top:77px}.hud{inset:20px 24px auto}.chapter{gap:9px}.chapter-zh{display:none}.journey{gap:4px}.tools{gap:14px}}
@media(max-width:420px){.hud{inset:16px 16px auto}.chapter{font-size:8px;gap:7px}.journey{margin-left:0;gap:3px}.journey span{width:2px}.tools{gap:9px}.tools button{font-size:9px;letter-spacing:.08em}#progress{top:68px}.saying{padding-top:46vh}.saying h2{font-size:29px}.saying .eyebrow{font-size:8px}.saying .translation{font-size:19px}.saying .begin{font-size:9px;letter-spacing:.18em}}
@media(max-height:540px){#progress{top:65px;padding:0}.saying{padding-top:43vh}.saying .eyebrow{margin-bottom:7px}.saying h2{font-size:27px;margin-bottom:5px}.saying .translation{font-size:17px}.saying .hairline{margin:8px auto 0}.saying .begin{margin-top:5px}.ending{padding-bottom:9vh}}
@media(prefers-reduced-motion:reduce){.wish-letter,.saying .translation,.saying .begin{transform:none}.saying.visible .translation,.saying.visible .begin{transition-delay:0s}}

/* The destination is a moment of rest: star above, sentence at the centre. */
.ending{display:block;padding:0;pointer-events:none;transition:opacity 3s}
.ending #end-title{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(680px,86vw);max-width:none;margin:0;font-size:clamp(25px,3.2vw,38px);line-height:1.6;letter-spacing:.015em;text-wrap:balance;text-shadow:0 0 36px #ffdc8514}
.ending #again{position:absolute;top:calc(50% + 88px);left:50%;transform:translateX(-50%);margin:0;pointer-events:auto;white-space:nowrap;color:#c5c8c9;animation:ending-in 2s ease both}
@keyframes ending-in{from{opacity:0}to{opacity:.8}}
.ending #again:hover,.ending #again:focus-visible{color:#ffe3a5;animation:none;opacity:1}
#ending:focus{outline:none}.releasing .tools{opacity:.45;transition:opacity 3s}.releasing .tools:hover,.releasing .tools:focus-within{opacity:1}
@media(max-width:600px){.ending #end-title{width:84vw;font-size:27px;line-height:1.65}.ending #again{top:calc(50% + 104px);font-size:9px}}
@media(max-height:540px){.ending #end-title{font-size:26px;max-width:640px}.ending #again{top:calc(50% + 65px)}}
@media(prefers-reduced-motion:reduce){.ending #again{animation:none}}
/* Optional continuation, offered only after the closing sentence has settled. */
.ending #explore-sky{position:absolute;top:calc(50% + 82px);left:50%;transform:translateX(-50%);margin:0;color:#e4d6b6;white-space:nowrap;pointer-events:auto;text-decoration:none;animation:ending-in 2s ease both}
.ending #again{top:calc(50% + 140px);font-size:9px;letter-spacing:.2em}
@media(max-width:600px){.ending #explore-sky{top:calc(50% + 100px);font-size:9px;letter-spacing:.18em}.ending #again{top:calc(50% + 154px)}}
@media(max-height:540px){.ending #explore-sky{top:calc(50% + 55px)}.ending #again{top:calc(50% + 106px)}}
@media(prefers-reduced-motion:reduce){.ending #explore-sky{animation:none}}

.credits-link{display:block;width:fit-content;margin:12px auto;color:inherit;font-size:10px;letter-spacing:.12em;text-decoration:none;opacity:.6;pointer-events:auto;padding:8px}
.credits-link:hover,.credits-link:focus-visible{opacity:1;text-decoration:underline}
.opening.departed .credits-link{pointer-events:none}
.opening .credits-link{position:absolute;right:20px;bottom:12px;margin:0}

/* Release readability and touch guidance. */
.touch-instructions{display:none}
.tools button{font-size:11px;min-height:44px}
.credits-link{font-size:12px}
@media(pointer:coarse){.keyboard-instructions{display:none}.touch-instructions{display:inline}}
@media(max-width:420px){.tools button{font-size:11px;letter-spacing:.06em}}
@supports(padding:max(0px)){.hud{top:max(20px,env(safe-area-inset-top))}.opening .credits-link{bottom:max(12px,env(safe-area-inset-bottom))}}