/* Nine short scenes: the premise, the rules, then a choice. */
html.entry-snapping {scroll-snap-type:y mandatory}
html.entry-snapping .interior-stage {scroll-snap-align:none;scroll-snap-stop:normal}
.mansion-interior .interior-stage,.mansion-interior[data-entry-state="approach"] .interior-stage,.mansion-interior[data-entry-state="ready"] .interior-stage {padding:0;min-height:0}
.story-slide {position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;padding:115px var(--pad) 90px;scroll-snap-align:start;scroll-snap-stop:always;background:#000;scroll-margin-top:0}
.story-slide>h2 {position:relative;z-index:4;margin:0;max-width:1000px;font:300 clamp(38px,5.5vw,80px)/1.12 Inter,sans-serif;letter-spacing:-.05em;text-align:center;color:#e5f5f5;text-shadow:0 0 7px #c8eeee36,0 0 28px #c8eeee20}
.story-purpose>h2 {font-size:clamp(34px,4.8vw,70px);max-width:1000px}
.story-kicker {position:relative;z-index:4;margin:0;color:#8da7a7;font:400 9px/1.6 'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;text-align:center}
.story-next {position:absolute;z-index:4;bottom:40px;display:flex;align-items:center;gap:20px;font:400 10px/1.6 Inter,sans-serif;color:#9cb8b8}
.story-next span {font-size:20px}
.story-count {position:absolute;bottom:35px;left:50%;transform:translateX(-50%);color:#5c7474;font:400 9px/1.5 'IBM Plex Mono',monospace;letter-spacing:.1em}
.story-minimal>h2 {font-size:clamp(60px,10vw,144px)}
.story-caption {position:relative;z-index:4;max-width:550px;margin:0;font:400 12px/1.7 Inter,sans-serif;color:#8fa9a9;text-align:center}
#storyParticles {position:fixed;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
html.entry-snapping .site-nav.nav-inside,.site-nav.nav-inside {background:linear-gradient(to bottom,#000 0%,#000e 48%,#0008 77%,transparent 100%);border:0;backdrop-filter:none;-webkit-backdrop-filter:none;padding-bottom:35px}
.keyboard-accordion {position:relative;z-index:4;display:flex;align-items:center;gap:22px;width:min(820px,100%);height:clamp(250px,42svh,430px)}
.keyboard-stack {position:relative;flex:1;height:100%;perspective:1100px}
.floor-layer {position:absolute;width:100%;height:auto;top:13%;left:0;transform:translateY(calc((var(--floor) - 4.5) * 25px)) rotateX(54deg) rotateZ(-7deg) scale(.86);opacity:.13;transition:opacity .16s,filter .16s;overflow:visible}
.floor-layer.lit {opacity:1;filter:drop-shadow(0 0 6px #c8eeee88)}
.stack-floor-ruler {display:flex;flex-direction:column;gap:0;width:48px;flex:none}
.stack-tick {height:27px;display:flex;align-items:center;gap:10px;font:400 9px/1 'IBM Plex Mono',monospace;color:#657c7c}
.stack-tick::before {content:"";height:1px;width:12px;background:#c8eeee44;transition:width .12s,box-shadow .12s}
.stack-tick.lit {color:#efffff}
.stack-tick.lit::before {width:26px;background:#efffff;box-shadow:0 0 8px #c8eeee}
.mechanic-examples {position:relative;z-index:4;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,5vw,70px);width:min(950px,100%);margin:30px 0}
.mechanic-card {border:0;padding:0;background:none;color:#d6eeee;cursor:pointer;position:relative;min-width:0;text-align:center}
.mechanic-card svg {display:block;width:100%;height:auto;overflow:visible}
.lesson-key {fill:#b5dddd04;stroke:#bddddd55;stroke-width:1}
.lesson-element {fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.mechanic-card[data-element="wall"] {color:#8298a3}
.mechanic-card[data-element="trap"] {color:#d78c86}
.mechanic-card[data-element="door"] {color:#cda878}
.lesson-feet {fill:#efffff;filter:drop-shadow(0 0 3px #c8eeeeaa)}
.lesson-probe,.lesson-arrive,.lesson-open {opacity:0}
.mechanic-label {display:block;margin-top:20px;font:400 11px/1.5 Inter,sans-serif;color:#8fa9a9}
.mechanic-card:focus-visible,.monster-listen:focus-visible {outline:1px solid #dffafa;outline-offset:12px;border-radius:3px}
.mechanic-card.is-playing .lesson-key {stroke:#dffafa;filter:drop-shadow(0 0 4px #c8eeee55)}
[data-lesson="inspect"] .is-playing .lesson-probe {animation:lesson-inspect 1.3s ease-out both}
[data-lesson="move"] .is-playing[data-element="trap"] .lesson-origin {animation:lesson-leave .8s steps(1,end) both}
[data-lesson="move"] .is-playing[data-element="trap"] .lesson-arrive {animation:lesson-arrive .8s steps(1,end) both;fill:#e4ad9f}
[data-lesson="move"] .is-playing:not([data-element="trap"]) .lesson-origin {animation:lesson-block .9s ease-out both}
[data-lesson="unlock"] .is-playing .lesson-closed {animation:lesson-leave .8s steps(1,end) both}
[data-lesson="unlock"] .is-playing .lesson-open {animation:lesson-arrive .8s steps(1,end) both}
[data-lesson="unlock"] .mechanic-card:not([data-element="door"]) {opacity:calc(1 - var(--unlock-progress,1));pointer-events:none}
[data-lesson="unlock"] .mechanic-card[data-element="door"] {transform:translateX(calc(-1 * var(--unlock-progress,1) * (100% + clamp(20px,5vw,70px))))}
@keyframes lesson-inspect {0%{opacity:0}25%,70%{opacity:.6}100%{opacity:0}}
@keyframes lesson-leave {0%{opacity:1}65%,100%{opacity:0}}
@keyframes lesson-arrive {0%{opacity:0}65%,100%{opacity:1}}
@keyframes lesson-block {0%,100%{opacity:1}28%,58%{opacity:.35}42%,72%{opacity:1;filter:drop-shadow(0 0 6px #e8b6a5)}}
.monster-listen {position:relative;z-index:4;width:min(620px,80vw);border:0;background:none;padding:0;cursor:pointer}
.monster-eye-crop {position:relative;display:block;width:100%;aspect-ratio:2.65;overflow:hidden}
.monster-eye-crop img {position:absolute;width:100%;height:auto;left:0;top:-146%;opacity:.6;filter:brightness(.8);transition:filter .3s,opacity .3s}
.monster-listen.is-playing img {opacity:1;filter:brightness(1.8) drop-shadow(0 0 15px #ff1818aa)}
.story-choice-buttons {position:relative;z-index:7;display:flex;gap:28px;align-items:center;justify-content:center;flex-wrap:wrap}
.story-choice-buttons .explore-case {position:relative;inset:auto;transform:none;white-space:nowrap}
.mansion-interior[data-entry-state="ready"] .story-choice-buttons .explore-case {display:block}
.story-play-room {min-height:100svh;padding:110px var(--pad) 70px;scroll-snap-align:start;scroll-margin-top:0}
.story-play-room[hidden] {display:none}
.game-back-choice {display:block;width:max-content;max-width:100%;margin:35px auto 0;color:#8fa9a9;font:400 11px/1.6 Inter,sans-serif}
@media(max-width:650px) {
 .story-slide {padding:100px 24px 75px;gap:26px}
 .story-slide>h2 {font-size:38px;letter-spacing:-.045em}
 .story-purpose>h2 {font-size:35px}
 .story-minimal>h2 {font-size:66px}
 .story-kicker {font-size:8px}
 .keyboard-accordion {height:310px;gap:0}
 .floor-layer {top:24%;transform:translateY(calc((var(--floor) - 4.5) * 21px)) rotateX(50deg) rotateZ(-7deg) scale(.96)}
 .stack-floor-ruler {width:35px}.stack-tick {height:24px;gap:5px;font-size:8px}
 .mechanic-examples {gap:18px;margin:18px 0;width:100%;grid-template-columns:repeat(3,minmax(0,1fr))}
 .mechanic-label {font-size:10px;margin-top:14px}
 [data-lesson="unlock"] .mechanic-card[data-element="door"] {transform:translateX(calc(-1 * var(--unlock-progress,1) * (100% + 18px)))}
 .story-caption {font-size:11px;max-width:290px}
 .story-choice-buttons {flex-direction:column;gap:24px}
 .story-choice-buttons .explore-case {min-width:235px}
 .story-play-room {padding:100px 24px 60px}
}
@media(prefers-reduced-motion:reduce) {
 html.entry-snapping {scroll-snap-type:y proximity}
 .floor-layer,.stack-tick::before,.monster-eye-crop img {transition:none}
 .mechanic-card.is-playing * {animation-duration:.01ms!important}
}

/* The maps open out into an accordion only while this scene is in view. */
.floor-layer {transition:transform .95s cubic-bezier(.2,.7,.2,1),opacity .16s,filter .16s}
.story-keyboard:not(.is-current) .floor-layer {transform:rotateX(54deg) rotateZ(-7deg) scale(.86)}
@media(max-width:650px) {.story-keyboard:not(.is-current) .floor-layer {transform:rotateX(50deg) rotateZ(-7deg) scale(.96)}}
@media(prefers-reduced-motion:reduce) {.floor-layer {transition:none}}

.story-choice>h2.sr-only {position:absolute}
@media(max-width:650px) {
 .story-choice-buttons {flex-direction:row;flex-wrap:nowrap;gap:12px;width:100%;max-width:580px}
 .story-choice-buttons .explore-case {flex:1;min-width:0;padding:17px 11px;font-size:9px;letter-spacing:.1em;white-space:normal}
}
@media(max-width:650px) {
 .story-choice-buttons {align-items:stretch}
 .story-choice-buttons .explore-case {display:flex;align-items:center;justify-content:center;min-height:64px}
}

/* The opening leaves room underneath for two communities reaching inward. */
.story-purpose>h2 {transform:translateY(-90px)}
/* Overlapping fades let the light flow through the stack instead of flashing. */
.floor-layer {transition:transform 1.35s cubic-bezier(.2,.7,.2,1),opacity 1.15s ease-in-out,filter 1.15s ease-in-out}
.stack-tick,.stack-tick::before {transition:color .8s ease,width .8s ease,background .8s ease,box-shadow .8s ease}
.story-choice-buttons {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:min(640px,100%);align-items:stretch}
.story-choice-buttons .explore-case {width:100%;min-width:0;min-height:68px;display:flex;align-items:center;justify-content:center;white-space:normal}
@media(max-width:650px) {
 .story-purpose>h2 {transform:translateY(-75px)}
 .story-choice-buttons {width:100%;gap:12px}
 .story-choice-buttons .explore-case {min-height:68px}
}
@media(prefers-reduced-motion:reduce) {.floor-layer,.stack-tick,.stack-tick::before {transition:none}}

/* Once the final choice settles, let the visitor scroll freely to the footer. */
html.entry-snapping.story-ending {scroll-snap-type:none}
html.story-ending .story-choice {scroll-snap-stop:normal}

/* Hold both opening titles in the same clear space as their words crossfade. */
.story-purpose>h2,.story-slide[data-scene="dark"]>h2 {
 position:absolute;top:50%;left:50%;width:calc(100% - var(--pad) * 2);
 transform:translate(-50%,calc(-50% + var(--title-shift,0px)));margin:0;
}
.story-purpose.is-current>h2 {animation:none}
@keyframes bridge-title-glow {0%,22%,27%,70%,76%,100%{filter:brightness(1)}24%,73%{filter:brightness(.87)}25%,74%{filter:brightness(1.1)}}
.floor-layer {transition:transform 1.35s cubic-bezier(.2,.7,.2,1),opacity .95s ease-in-out,filter .95s ease-in-out}
@media(max-width:650px) {.story-purpose>h2,.story-slide[data-scene="dark"]>h2 {width:calc(100% - 48px)}}
@media(prefers-reduced-motion:reduce) {.story-purpose.is-current>h2 {animation:none}.floor-layer {transition:none}}

body.motion-paused .story-purpose.is-current>h2 {animation-play-state:paused}

/* A single stationary title layer avoids scroll/compositor corrections. */
.story-title-stage {position:fixed;inset:0;z-index:4;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .65s ease}
.story-title-stage.is-active {opacity:1}
.story-title-stage>h2 {grid-area:1/1;margin:0;width:calc(100% - var(--pad) * 2);max-width:1000px;text-align:center;font-family:Inter,sans-serif;font-weight:300;line-height:1.12;letter-spacing:-.05em;color:#e5f5f5;text-shadow:0 0 7px #c8eeee36,0 0 28px #c8eeee20;transition:opacity .85s ease-in-out;animation:none;transform:none}
.story-title-stage .purpose-heading {font-size:clamp(34px,4.8vw,70px);opacity:1}
.story-title-stage .dark-heading {font-size:clamp(60px,10vw,144px);opacity:0}
.story-title-stage.show-dark .purpose-heading {opacity:0}
.story-title-stage.show-dark .dark-heading {opacity:1}
/* Center the spread itself with its ruler, leaving a deliberate gap to the heading. */
.story-keyboard {gap:clamp(30px,4svh,46px)}
.story-keyboard>h2 {font-size:clamp(34px,4.8vw,66px);max-width:850px}
.keyboard-accordion {width:min(760px,100%);height:clamp(290px,42svh,390px);gap:32px}
.stack-floor-ruler {width:42px}
.floor-layer {top:50%;transform:translateY(calc(-50% + (var(--floor) - 4.5) * 22px)) rotateX(54deg) rotateZ(-5deg) scale(.92);transition:transform 1.15s cubic-bezier(.2,.7,.2,1),opacity .8s ease-in-out,filter .8s ease-in-out}
.story-keyboard:not(.is-current) .floor-layer {transform:translateY(-50%) rotateX(54deg) rotateZ(-5deg) scale(.92)}
.story-choice-buttons {width:min(680px,100%);gap:44px}
@media(max-width:650px) {
 .story-title-stage>h2 {width:calc(100% - 48px)}
 .story-title-stage .purpose-heading {font-size:35px}
 .story-title-stage .dark-heading {font-size:66px}
 .story-keyboard>h2 {font-size:34px}
 .keyboard-accordion {height:290px;gap:18px}
 .stack-floor-ruler {width:30px}
 .floor-layer {transform:translateY(calc(-50% + (var(--floor) - 4.5) * 18px)) rotateX(50deg) rotateZ(-5deg) scale(.96)}
 .story-keyboard:not(.is-current) .floor-layer {transform:translateY(-50%) rotateX(50deg) rotateZ(-5deg) scale(.96)}
 .story-choice-buttons {gap:24px}
}
@media(prefers-reduced-motion:reduce) {.story-title-stage,.story-title-stage>h2,.floor-layer {transition:none}}
.story-title-stage>h2 {will-change:opacity}

/* All titles now belong to their slides, including the opening pair. */
.story-purpose>h2,.story-slide[data-scene="dark"]>h2 {
 position:relative;top:auto;left:auto;width:100%;transform:none;animation:none;margin:0;opacity:1;
}
/* The shared footer control fades between numbers instead of scrolling upward. */
.story-progress {position:fixed;z-index:8;left:50%;bottom:24px;transform:translateX(-50%);width:76px;min-height:58px;padding:8px;border:0;background:none;color:#8aa4a4;opacity:0;pointer-events:none;transition:opacity .18s ease;cursor:pointer}
.story-progress.is-visible {opacity:1;pointer-events:auto;transition:opacity .35s ease}
.story-progress-content {display:flex;flex-direction:column;align-items:center;gap:5px;animation:story-progress-bounce 2.4s ease-in-out infinite}
.story-progress-number {font:400 9px/1.5 'IBM Plex Mono',monospace;letter-spacing:.1em;white-space:nowrap}
.story-progress svg {width:17px;height:17px}
.story-progress:hover {color:#e5f5f5;text-shadow:0 0 10px #c8eeee66}
.story-progress:focus-visible {outline:1px solid #c8eeee77;outline-offset:2px;border-radius:3px}
@keyframes story-progress-bounce {0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
body.motion-paused .story-progress-content {animation-play-state:paused}
@media(prefers-reduced-motion:reduce) {.story-progress {transition:none}.story-progress-content {animation:none}}
.story-progress:not(.is-visible) .story-progress-content {animation-play-state:paused}

.story-instruction {position:relative;z-index:4;max-width:660px;margin:0;text-align:center;color:#b5cdcd;font:400 15px/1.8 Inter,sans-serif}
.story-instruction strong {font-weight:500;color:#e5f5f5}
.story-instruction kbd {padding:2px 6px;border:1px solid #c8eeee55;border-radius:3px;font:inherit;color:#e5f5f5}
.story-mechanics .mechanic-examples {margin:14px 0}
.game-controls-guide {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:900px;margin:24px 0 0}
.game-controls-guide dt {font:400 11px/1.5 'IBM Plex Mono',monospace;color:#e5f5f5;margin-bottom:8px}
.game-controls-guide dd {margin:0;font:400 12px/1.8 Inter,sans-serif;color:#9ebaba}
@media(max-width:650px) {
 .story-instruction {font-size:13px;line-height:1.75;max-width:340px}
 .story-mechanics {gap:22px}
 .game-controls-guide {grid-template-columns:1fr;gap:15px}
 .game-controls-guide>div {display:grid;grid-template-columns:65px 1fr;gap:12px}
 .game-controls-guide dt {margin:2px 0 0}
}

.lesson-key-pair {position:relative;display:block}
.lesson-letter {position:absolute;top:14%;font:400 clamp(9px,1.2vw,12px)/1 'IBM Plex Mono',monospace;color:#b8d0d0;pointer-events:none;transform:translateX(-100%)}
.lesson-letter-origin {left:41%}
.lesson-letter-target {left:93%}
.story-caption kbd {font:inherit;color:#d9eeee;padding:1px 4px;border:1px solid #c8eeee44;border-radius:2px;white-space:nowrap}