:root{color-scheme:light;font-family:'Yu Gothic','Hiragino Kaku Gothic ProN',sans-serif;color:#292b28;background:#eaece7;font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button{font:inherit;cursor:pointer}main{width:min(860px,100%);margin:auto;padding:38px 24px 30px}header{text-align:center;margin-bottom:30px}h1{font-size:30px;font-weight:500;letter-spacing:.35em;padding-left:.35em;margin:0 0 16px}header p{font-size:19.5px;letter-spacing:.12em;margin:0}.station{height:450px;position:relative;overflow:hidden;background:#d7d9d2;border:1px solid #c4c7bf;isolation:isolate}.ceiling{height:70px;display:flex;justify-content:space-around;align-items:center;background:linear-gradient(#c5c8c0,#dadcd6);border-bottom:1px solid #b8bcb3}.ceiling i{width:22%;height:5px;background:#fafbf1;box-shadow:0 0 13px #fffff1}.exit-sign{position:absolute;z-index:2;top:46px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:24px;padding:10px 22px;background:#e1ce63;color:#25281e;box-shadow:0 3px 5px #0002;border-top:5px solid #343a30}.exit-arrow{font-size:39px}.exit-sign small{display:block;font-size:16px;font-weight:700;letter-spacing:.12em}.exit-english{font-size:10px;letter-spacing:.1em}.exit-sign strong{font-size:51px;line-height:1;font-weight:600;font-variant-numeric:tabular-nums;min-width:1ch}.wall{height:283px;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 1px),#bfc3ba 25%),linear-gradient(#e2e4dd,#d2d5cc);position:relative;padding:99px 32px 32px}.notice{position:relative;z-index:1;max-width:490px;min-height:130px;margin:auto;border:1px solid #b3b8ad;border-top:4px solid #546451;background:#f4f4ec;box-shadow:0 3px 6px #0000000a}.notice-heading{display:block;border-bottom:1px solid #cdd1c5;text-align:center;padding:8px;font-size:12px;letter-spacing:.18em;color:#58634f}.notice p{margin:0;padding:19px 24px;font-size:clamp(16px,2.4vw,20px);line-height:1.85;font-weight:500;overflow-wrap:break-word;word-break:normal;line-break:strict;white-space:pre-wrap;text-align:center}.wall-stripe{position:absolute;bottom:18px;left:0;right:0;height:12px;background:#6c795e;border-block:2px solid #e4e6dc}.floor{height:100px;border-top:6px solid #9bA291;background:repeating-linear-gradient(100deg,transparent 0,transparent 118px,#aeb5a8 120px),#bcc2b5;perspective:160px}.tactile{height:19px;margin-top:34px;background:radial-gradient(circle,#b2a651 2px,transparent 2.5px) 0 0/9px 8px,#d8c967;transform:rotate(-3deg) scaleX(1.1);box-shadow:0 1px 2px #0002}.transition{position:absolute;z-index:5;inset:0;background:#242921;opacity:0;pointer-events:none;transition:opacity .25s}.is-moving .transition{opacity:1}.status{height:22px;margin:15px 0 10px;font-size:12px;text-align:center;color:#666e60}.choices{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:490px;margin:auto}.choices button{min-height:58px;border:1px solid #929b88;border-bottom:3px solid #818b77;border-radius:3px;background:#f9faf4;color:#30382b;font-size:17px;letter-spacing:.08em;transition:background .15s,transform .1s}.choices button span{margin-inline:10px}.choices button:active:not(:disabled){transform:translateY(2px);border-bottom-width:1px}.choices button:hover:not(:disabled){background:#fff}.choices button:disabled{opacity:.4;cursor:default}.restart{display:block;margin:28px auto 0;border:0;border-bottom:1px solid #a3aa9b;padding:4px 0;background:transparent;color:#747d6c;font-size:12px}button:focus-visible{outline:2px solid #527344;outline-offset:4px}dialog{border:1px solid #929b88;padding:40px;text-align:center;background:#f4f4ec;color:#292b28}dialog::backdrop{background:#1b231bb3}dialog h2{font-weight:500}dialog button{padding:9px 26px;border:1px solid #929b88;background:transparent}@media(max-width:520px){main{padding:26px 16px}header{margin-bottom:24px}.station{height:420px}.wall{padding-inline:16px;height:263px}.notice p{padding:16px}.choices{gap:12px}.choices button{font-size:15px}.choices button span{margin-inline:4px}.status{font-size:11px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

[hidden]{display:none!important}
.character-target{display:inline;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:inherit;font:inherit;letter-spacing:inherit;line-height:inherit;vertical-align:baseline;cursor:default;appearance:none}
.character-target:disabled{color:inherit;opacity:1}
.notice #finalInstruction{padding:16px 24px 0;font-weight:500}
.character-final{height:auto;min-height:450px}
.character-final .wall{height:auto;min-height:283px;padding-bottom:48px}

/* Text layout: preserve authored newlines, avoid narrow signs and clipped prose. */
.station{height:auto;min-height:450px}
.wall{height:auto;min-height:283px;padding-bottom:48px}
.notice{max-width:660px}
.notice p{font-size:clamp(16px,2.1vw,19px);text-wrap:wrap}
#passage{cursor:default}
/* Shared station backdrop; dim the original materials rather than replacing them. */
.station-scenery{display:none}
.narrative-view{background:#171918;color:#e2e4df;min-height:100svh}
.narrative-view header p{color:#aeb6b0}
.narrative-view .station{background:#252d28;border-color:#343b33}
.is-narrative > .ceiling,.is-narrative > .floor{display:none}
.is-narrative .station-scenery{position:absolute;inset:0;z-index:0;display:grid;grid-template-rows:70px 1fr 100px;pointer-events:none}
.scenery-ceiling{display:flex;justify-content:space-around;align-items:center;background:linear-gradient(#c5c8c0,#dadcd6);border-bottom:1px solid #b8bcb3}
.scenery-ceiling i{width:22%;height:5px;background:#fafbf1;box-shadow:0 0 13px #fffff1}
.scenery-wall{position:relative;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 1px),#bfc3ba 25%),linear-gradient(#e2e4dd,#d2d5cc)}
.scenery-wall::after{content:"";position:absolute;bottom:18px;left:0;right:0;height:12px;background:#6c795e;border-block:2px solid #e4e6dc}
.scenery-floor{border-top:6px solid #9ba291;background:repeating-linear-gradient(100deg,transparent 0,transparent 118px,#aeb5a8 120px),#bcc2b5;perspective:160px}
.station-scenery::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 250px 190px at 50% 84px,rgba(0,0,0,.62),rgba(0,0,0,.80) 65%,rgba(0,0,0,.87) 100%)}
.is-prologue .station-scenery::after{background:rgba(0,0,0,.85)}
.is-narrative .exit-sign{z-index:2;opacity:1;top:46px;right:auto;left:50%;transform:translateX(-50%);gap:24px;padding:10px 22px;border-top:5px solid #807d58;background:#e4d68a;color:#292b20;box-shadow:0 0 10px #ecdf9e30,0 0 38px 10px #dfd19714,0 0 95px 28px #dfd1970b}
.is-narrative .wall{z-index:1;background:none;min-height:540px;padding:166px 40px 78px}
.is-prologue .wall{padding-top:28px}
.is-narrative .notice{max-width:none;min-height:0;margin:0;background:none;border:0;border-radius:0;box-shadow:none;color:#e2e4df}
.is-narrative .notice-heading{text-align:left;border:0;padding:0 0 16px;color:#a7b2aa;font-size:12px;letter-spacing:.12em}
.is-narrative .notice #passage{text-align:left;padding:0;line-height:2;letter-spacing:.025em;font-weight:400}
.is-narrative .wall-stripe{display:none}
/* White diffuser with backlighting and a shallow, bevelled frame. */
.final-puzzle{display:grid;place-items:center;position:relative;isolation:isolate;width:min(100%,420px);min-height:118px;margin:40px auto 0;padding:28px 24px;background:radial-gradient(ellipse at 50% 46%,#d5d6d0 0%,#c8cac3 48%,#aeb2a8 100%);color:#282d27;border:7px solid;border-color:#737a70 #363d36 #292f29 #555e52;border-radius:2px;box-shadow:0 1px 0 1px #90978960,2px 5px 0 #222822,5px 10px 12px #0008,0 0 26px 6px #d7dfc529,0 0 68px 20px #cbd7b815,inset 0 2px 7px #29302655,inset 0 0 22px #f2f4e729}
.final-puzzle::before{content:"";position:absolute;inset:-38px -48px;z-index:-1;background:radial-gradient(ellipse,#d8e0c923,transparent 72%);filter:blur(8px);pointer-events:none}
.notice .final-puzzle #finalInstruction{padding:0;margin:0;text-align:center;font-size:clamp(23px,3.6vw,30px);font-weight:500;line-height:1.5;letter-spacing:.12em;white-space:pre-wrap;color:#282d27;text-shadow:0 1px 0 #e4e7dc38}
.narrative-view .choices button{background:#282f2c;border-color:#59665c;color:#e2e4df}
.narrative-view .choices button:hover:not(:disabled){background:#343f38}
.narrative-view .restart,.narrative-view .status{color:#a4afa6}
@media(max-width:520px){
 .station{min-height:420px}
 .wall{padding-inline:12px}
 .notice p{padding:18px 16px}
 .is-narrative .wall{min-height:420px;padding:160px 18px 44px}
 .is-prologue .wall{padding-top:22px}
 .is-narrative .notice #passage{line-height:1.9;letter-spacing:0}
 .final-puzzle{min-height:110px;margin-top:30px;padding:24px 16px}
}

.story-advance{display:flex;justify-content:flex-end;margin:24px 0 0}
.story-advance button{min-height:44px;min-width:100px;padding:10px 24px;background:transparent;color:inherit;border:1px solid #647267;border-radius:3px;font-size:15px}
.story-advance button:hover{background:#ffffff0a}

/* Shared stage dimensions, with the original vertical spacing restored. */
.station,.station.character-final{height:540px;min-height:0}
.station > .ceiling,.station > .floor{display:none}
.station .station-scenery{position:absolute;inset:0;z-index:0;display:grid;grid-template-rows:70px 1fr 100px;pointer-events:none}
.station-scenery::after{display:none}
.is-narrative .station-scenery::after{display:block}
.station .wall,.station.character-final .wall{position:absolute;inset:0;z-index:1;height:auto;min-height:0;padding:166px 32px 78px;background:none;overflow-y:auto;scrollbar-width:thin}
.station .wall-stripe{display:none}
.station.is-prologue .wall{padding-top:28px}
.notice{min-height:0}
@media(max-width:520px){
 .station,.station.character-final{height:420px}
 .station .wall,.station.character-final .wall{padding:160px 18px 44px}
 .station.is-prologue .wall{padding-top:22px}
}

.status{height:auto;min-height:22px;line-height:1.6}

/* Shared completion layout, using this work's restrained green palette. */
#clearDialog{width:min(440px,92vw);max-height:90dvh;overflow:auto;padding:38px 28px;border:1px solid #677568;border-radius:12px;background:#edf0e8;color:#292f28;text-align:center}
#clearTitle{font-size:23px;font-weight:500;line-height:1.6;margin:0 0 18px}
#clearMessage{font-size:14px;line-height:1.8;margin:0 0 26px;white-space:pre-wrap}
#share{display:block;padding:13px 20px;background:#3e5042;color:#fff;text-decoration:none;border-radius:7px;margin-bottom:14px;font-size:15px}
#clearDialog #closeClear{width:100%;min-height:46px;border:1px solid #8d9a89;border-radius:7px;color:inherit;background:transparent}
.clear-links{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 20px;margin-top:25px;font-size:12px}
.clear-links a{color:#53634f;text-underline-offset:4px}

/* Level corridor; the final exit is a landing beside an ascending stairwell. */
.tactile{transform:none}
.exit-arrow{display:block;width:1em;text-align:center;flex:none}
.stairwell{display:none;position:absolute;top:70px;right:-18%;bottom:100px;width:22%;border-left:2px solid #929b8a;background:#bbc1b3}
.stairwell svg{display:block;width:100%;height:100%}
.character-final .stairwell{display:block}
.character-final .scenery-wall{margin-right:4%}
.character-final .scenery-floor{background:repeating-linear-gradient(90deg,transparent 0,transparent 118px,#aeb5a8 120px),#bcc2b5}
.character-final .scenery-floor .tactile{width:100%}
.character-final .station-scenery::after{background:radial-gradient(ellipse 250px 190px at 50% 84px,#0009,#000c 65%,#000d 100%)}

/* A little daylight from above the stairs, without changing the flat wall. */
.character-final .stairwell::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,#fff4ce99 0%,#fff4ce38 12%,#fff4ce0d 35%,transparent 58%)}
.character-final .station-scenery::after{mask-image:radial-gradient(ellipse 65px 130px at 100% 72px,#0005 0%,#000b 50%,#000 100%)}
.character-final .station-scenery::before{content:"";position:absolute;z-index:1;top:70px;right:0;width:7%;height:120px;pointer-events:none;background:radial-gradient(ellipse at right top,#fff0bd24,transparent 72%)}

/* Body ending: prose in complete darkness, without the station backdrop. */
.blackout-ending{background:#000}
.blackout-ending .station{background:#000;border-color:transparent}
.blackout-ending .station-scenery{visibility:hidden}

.is-epilogue .notice-heading{font-size:24px;line-height:1.4;font-weight:500;letter-spacing:.06em;color:#e2e4df;padding:0 0 20px;text-align:left;border:0}

/* True End uses the original bright station, keeping the epilogue layout. */
.bright-ending{background:#eaece7;color:#292b28;color-scheme:light}
.bright-ending header p{color:#58634f}
.bright-ending .station{background:#d7d9d2;border-color:#c4c7bf}
.bright-ending .station-scenery::after{display:none}
.bright-ending .notice,.bright-ending .is-epilogue .notice-heading{color:#292b28}
.bright-ending .restart,.bright-ending .status{color:#626d59}
.bright-ending .story-advance button:hover{background:#ffffff80}

.volume-toolbar{position:sticky;top:0;z-index:10;display:flex;justify-content:flex-end;padding:8px 16px;background:#eaece7}
.volume-control{display:flex;align-items:center;justify-content:flex-end;gap:10px;font-size:12px;color:inherit}
.volume-control input{width:110px;accent-color:#7b8c72;cursor:pointer}
.volume-control output{width:4ch;text-align:right;font-variant-numeric:tabular-nums}
.narrative-view .volume-toolbar{background:#171918}
.blackout-ending .volume-toolbar{background:#000}
.bright-ending .volume-toolbar{background:#eaece7}
#clearDialog .volume-control{margin:0 0 24px}

/* Keep the page surround steady; only True / Normal End brighten it. */
html,body{background:#171918;color:#e2e4df}
header p{color:#aeb6b0}
.volume-toolbar{background:#171918}
.restart,.status{color:#a4afa6}
html.light-surround,body.light-surround{background:#eaece7;color:#292b28}
.light-surround header p{color:#58634f}
.light-surround .volume-toolbar{background:#eaece7}
.light-surround .restart,.light-surround .status{color:#626d59}
#introNotice{width:min(440px,92vw);padding:32px 26px;border:1px solid #59665c;border-radius:10px;background:#202623;color:#e2e4df}
#introNoticeText{font-size:15px;line-height:1.9;margin:0 0 24px;text-align:left}
#introNotice .volume-control{justify-content:center;margin-bottom:26px}
#introContinue{color:inherit;border-radius:3px;min-height:44px}

.station:not(.is-narrative) .notice{color:#292b28}
html.blackout-ending,body.blackout-ending{background:#000}

.walk-dark .transition{opacity:1}

/* Lower the persistent volume control; match fades to the dark page backdrop. */
.volume-toolbar{padding-top:18px;padding-bottom:8px}
.transition{background:#171918}
.blackout-ending .transition{background:#000}
.light-surround .transition{background:#eaece7}

/* Offset the toolbar’s extra 10px without increasing total page height. */
.volume-toolbar{margin-bottom:-10px}

/* Fit the whole game to the viewport instead of stacking a fixed-height board. */
html{min-height:100%;min-height:100dvh}
body{height:100dvh;min-height:0;display:flex;flex-direction:column}
.volume-toolbar{flex:none}
main{flex:1;min-height:0;display:flex;flex-direction:column;margin:0 auto}
main>header,main>.status,main>.choices,main>.story-advance,main>.restart{flex-shrink:0}
.station,.station.character-final{flex:1 1 540px;height:auto;min-height:120px;max-height:540px}
.choices{width:min(490px,100%);margin:0 auto}
.story-advance{flex-shrink:0}
@media(max-width:520px){.station,.station.character-final{flex-basis:420px;max-height:420px}}
@media(max-height:760px){
 main{padding-top:18px;padding-bottom:14px}
 header{margin-bottom:18px}
 h1{margin-bottom:10px}
 .restart{margin-top:16px}
 .story-advance{margin-top:16px}
}
@media(max-height:560px){
 main{padding-top:8px;padding-bottom:8px}
 header{margin-bottom:10px}
 h1{font-size:23px;margin-bottom:6px}
 .choices button{min-height:44px}
 .restart{margin-top:8px}
 .status{margin:6px 0}
 .story-advance{margin-top:8px}
 .station .wall,.station.character-final .wall{padding-top:135px;padding-bottom:20px}
 .station.is-prologue .wall{padding-top:20px}
}

/* Give the ending reveal more breathing room than ordinary movement. */
.ending-transition .transition{transition-duration:.65s}

.intro-transition .transition{transition-duration:.5s}

/* Keep the exit label horizontal on narrow screens, including narrative scenes. */
.exit-sign{width:max-content;white-space:nowrap}
.exit-sign>span,.exit-sign>strong{flex-shrink:0}
.exit-sign small{white-space:nowrap}
@media(max-width:520px){
 .exit-sign,.is-narrative .exit-sign{gap:18px;padding-inline:18px}
}

/* Compact final sign on phones; retain internal scrolling only when necessary. */
@media(max-width:520px){
 .station.character-final .wall{padding:138px 18px 16px}
 .character-final .final-puzzle{width:min(100%,260px);min-height:60px;margin-top:12px;padding:10px 14px;border-width:5px}
 .character-final .final-puzzle::before{inset:-14px -12px}
 .character-final .notice #finalInstruction{font-size:22px;line-height:1.35}
 .character-final .notice #passage{line-height:1.65}
}

/* Final scene: wall-mounted instruction first, narration below. */
.character-final .final-puzzle{margin:0 auto 26px}
@media(max-width:520px){.character-final .final-puzzle{margin:0 auto 18px}}

/* Mobile: a readable vertical composition, not a compressed desktop viewport. */
@media(max-width:520px){
 body{height:auto;min-height:100dvh}
 main{flex:none;min-height:0;padding:20px 18px 24px}
 .volume-toolbar{padding:14px 18px 6px;margin-bottom:0}
 header{margin-bottom:24px}
 h1{font-size:23px;line-height:1.5;letter-spacing:.12em;padding-left:.12em;margin-bottom:12px}
 header p{font-size:17px;line-height:1.6;letter-spacing:.06em}
 .station,.station.character-final{flex:none;height:auto;min-height:400px;max-height:none}
 .exit-sign,.is-narrative .exit-sign{top:34px;gap:16px;padding:8px 16px;border-top-width:4px}
 .exit-arrow{font-size:30px}
 .exit-sign strong{font-size:40px}
 .exit-sign small{font-size:14px}
 .exit-english{font-size:9px}
 .station .wall,.station.character-final .wall{position:relative;inset:auto;height:auto;min-height:400px;padding:126px 20px 42px;overflow:visible}
 .station.is-prologue .wall{padding:28px 22px 38px}
 .character-final .final-puzzle{width:min(100%,230px);min-height:66px;padding:12px 14px;margin:0 auto 28px}
 .character-final .notice #finalInstruction{font-size:22px;line-height:1.4}
 .is-narrative .notice #passage{font-size:16px;line-height:1.9;letter-spacing:.015em}
 .status{margin:14px 0 10px}
 .choices{gap:14px}
 .choices button{min-height:50px}
 .restart{margin-top:22px}
 .story-advance{margin-top:22px}
}

/* Remove the wall stripe so it cannot cross ending narration. */
.scenery-wall::after,.wall-stripe{display:none}