:root{color-scheme:dark;--ink:#f3f3f0;--muted:#b8bec7;--accent:#e24a1a;--pad:clamp(24px,5vw,80px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px;background:#10151e}
body{margin:0;color:var(--ink);font-family:Inter,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}button{font:inherit}a:hover{color:#fff}a:focus-visible,button:focus-visible{outline:2px solid #f19a7f;outline-offset:7px}
.skip-link{position:fixed;z-index:20;top:12px;left:var(--pad);padding:12px;background:#111a25;transform:translateY(-200%)}.skip-link:focus{transform:none}
.mansion-world{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:#10151e}
#mansionScene{position:absolute;width:100%;height:100%;object-fit:cover;object-position:50% 0%;filter:brightness(.78) saturate(.75)}
.scene-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,10,17,.58),rgba(6,10,17,.16) 35%,transparent 58%,rgba(6,10,17,.48)),radial-gradient(ellipse at 50% 52%,transparent 30%,rgba(5,9,16,.32) 100%)}
#atmosphere{position:absolute;inset:0;width:100%;height:100%;opacity:.7}
.mist{position:absolute;left:-35%;width:170%;height:38%;opacity:.15;filter:blur(30px);background:radial-gradient(ellipse at 27% 50%,#c2d0e244,transparent 45%),radial-gradient(ellipse at 74% 65%,#c0d2e555,transparent 40%);animation:mist-drift 32s ease-in-out infinite alternate}
.mist-back{bottom:20%;height:25%;animation-duration:43s;opacity:.2}.mist-front{bottom:-5%;animation-delay:-12s}
@keyframes mist-drift{from{transform:translateX(-8%) scaleY(.85)}to{transform:translateX(9%) scaleY(1.1)}}
.site-nav{position:absolute;top:0;left:0;right:0;height:90px;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;z-index:5}
.home-link{display:flex;gap:9px;align-items:center}.home-link img{height:27px;width:auto;transform:scaleX(-1);filter:grayscale(1) brightness(0) invert(1);opacity:.9}
.home-link span,.site-nav nav{font-size:11px;letter-spacing:.18em}.site-nav nav{display:flex;gap:28px}.site-nav a{opacity:.8;transition:opacity .2s}.site-nav a:hover{opacity:1}
.mansion-hero{height:100svh;min-height:640px;position:relative;isolation:isolate}
.hero-title{position:absolute;top:clamp(96px,11svh,140px);left:0;right:0;text-align:center;padding:0 20px}
.eyebrow{font:400 9px/1.7 'IBM Plex Mono',monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 25px}
.hero-subtitle{margin:clamp(15px,2.2svh,26px) 0 0;color:#f4f5f7;font:600 clamp(8px,1.15svh,12px)/1.8 Montserrat,Inter,sans-serif;letter-spacing:.24em;text-transform:uppercase;text-shadow:0 0 12px #fff4}.hero-subtitle span{display:block}
h1{font-family:Montserrat,Inter,sans-serif;font-size:clamp(30px,min(5.8vw,5.8svh),82px);line-height:1.14;font-weight:300;letter-spacing:.22em;margin:0;text-indent:.22em;color:#fff;text-shadow:0 0 9px #fff5,0 0 30px #dbe8ff44,0 2px 30px #0a1019;animation:title-arrive 1.8s ease-out both}
h1 span{display:block}
.hero-title{animation:cover-title-reveal 1.8s ease-out 2.9s both}
html[data-point-intro="marshini"].point-intro-boot .hero-title{opacity:0}
@keyframes cover-title-reveal{from{opacity:0;filter:blur(3px)}to{opacity:1;filter:blur(0)}}
@keyframes title-arrive{from{opacity:0;filter:blur(6px);transform:translateY(6px)}to{opacity:1;filter:blur(0);transform:none}}
.hero-bottom{position:absolute;bottom:30px;left:var(--pad);right:var(--pad);display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:20px}
#motionToggle{justify-self:start;border:0;background:none;color:#e1e5ea;cursor:pointer;display:flex;align-items:center;gap:10px;padding:12px 0;font-size:10px;letter-spacing:.04em}#motionToggle[hidden]{display:none}.motion-mark{font-size:12px;min-width:12px}.enter-link{display:grid;justify-items:center;gap:14px;font-size:10px;letter-spacing:.14em;padding:12px}.enter-link span{font-size:23px;line-height:1;font-weight:200}.hero-credit{justify-self:end;text-align:right;font-size:9px;line-height:1.8;color:#d3d7df;margin:0 0 12px}.hero-credit span{display:block;color:#adb5c2}
.project-story{position:relative;padding:75px var(--pad) 0;background:linear-gradient(180deg,#0c121de8,#0c121df2);border-top:1px solid #ffffff18;max-width:100%;min-height:100svh}
.project-story>*{max-width:1200px;margin-left:auto;margin-right:auto}.back-link{display:block;color:#c5cbd4;font-size:11px;margin-bottom:85px}.story-intro{margin-bottom:65px}.story-intro h2{font-size:clamp(40px,6vw,80px);font-weight:300;line-height:1.08;letter-spacing:-.04em;margin:0 0 32px}.lead{font-size:clamp(18px,2vw,25px);max-width:650px;line-height:1.5;color:#d7dce3;margin:0}
.story-grid{display:grid;grid-template-columns:1.3fr .8fr;gap:clamp(40px,8vw,120px);padding:45px 0 80px;border-top:1px solid #ffffff26}.project-copy p{font-size:14px;line-height:1.9;color:#bec5d0;margin:0 0 22px}.project-copy h3{font-size:12px;font-weight:500;margin:35px 0 15px}.project-facts{margin:0;display:grid;align-content:start;gap:24px}.project-facts dt{font-size:9px;letter-spacing:.08em;color:#97a3b4;margin-bottom:8px}.project-facts dd{margin:0;font-size:12px;line-height:1.8;color:#e1e5eb}.project-facts a{border-bottom:1px solid #ffffff55;padding-bottom:4px}
.demo{margin-top:0;margin-bottom:90px}.demo video{width:100%;aspect-ratio:16/9;display:block;background:#000;object-fit:contain}.demo figcaption{font-size:10px;line-height:1.8;color:#b3bdca;display:flex;justify-content:space-between;gap:20px;margin-top:15px}.site-footer{display:flex;justify-content:space-between;gap:20px;padding:25px 0;border-top:1px solid #ffffff26;color:#b3bdca;font-size:10px;letter-spacing:.05em}
body.motion-paused .mist,body.motion-paused .hero-title{animation-play-state:paused}

@media(max-width:700px){.site-nav{height:76px}.home-link img{height:24px}.home-link span{font-size:9px;letter-spacing:.1em}.site-nav nav{font-size:9px;gap:16px;letter-spacing:.1em}.mansion-hero{min-height:600px}.hero-title{top:clamp(96px,13svh,130px)}h1{font-size:clamp(30px,min(8.5vw,5.8svh),54px);letter-spacing:.18em;text-indent:.18em}.hero-subtitle{font-size:clamp(7px,1.05svh,9px);letter-spacing:.18em}.hero-bottom{bottom:22px;grid-template-columns:1fr auto;gap:12px}.enter-link{grid-column:2;grid-row:1/3;align-self:center}.hero-credit{grid-column:1;grid-row:1;text-align:left;justify-self:start;margin:0}#motionToggle{grid-column:1;grid-row:2;padding:8px 0;font-size:9px}.story-grid{grid-template-columns:1fr;gap:35px;padding-bottom:55px}.story-intro{margin-bottom:40px}.back-link{margin-bottom:60px}.demo{margin-bottom:60px}.demo figcaption{display:block}.demo figcaption span{display:block;margin-top:6px}.project-story{padding-top:45px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.mist,h1,.hero-title{animation:none}}
.atmosphere-controls{display:flex;flex-direction:column;align-items:flex-start;gap:0;justify-self:start}
#windToggle{display:flex;align-items:center;gap:10px;padding:10px 0;border:0;background:none;color:#e1e5ea;cursor:pointer;font-size:10px;letter-spacing:.04em}
#windToggle[hidden]{display:none}#windToggle>span:first-child{width:12px;text-align:center;font-size:12px}#windToggle:hover{color:#fff}
@media(max-width:700px){.atmosphere-controls{grid-column:1;grid-row:2}#windToggle{font-size:9px;padding:7px 0}.atmosphere-controls #motionToggle{padding:7px 0}}
/* Cross the threshold into an unlit room; the game audio supplies the scene. */
.mansion-world::after{content:"";position:absolute;inset:0;background:#000;opacity:var(--entry-darkness,0)}
#inside{scroll-margin-top:-100px}
.mansion-interior{position:relative;min-height:170svh;background:#000}
.interior-stage{position:sticky;top:0;height:100svh;background:#000}
.interior-controls{position:absolute;inset:auto var(--pad) 30px;display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:10px;letter-spacing:.04em;color:#a3a3a3}
.interior-controls button{border:0;background:none;padding:12px 0;color:inherit;cursor:pointer;font-size:inherit;letter-spacing:inherit}
.interior-controls a{padding:12px 0}.interior-controls a span{margin-left:10px}.interior-controls button:hover{color:white}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:600px){.interior-controls{font-size:9px;gap:14px;bottom:22px}}
/* Case study: editorial chapters following the unlit entrance. */
.case-study{background:#0b0c0e;padding-top:70px}
.case-study .back-link{margin-bottom:80px;color:#c5c3bc}
.case-opening{padding-bottom:75px}
.case-opening h2{font-size:clamp(38px,5.3vw,76px);font-weight:400;letter-spacing:-.055em;line-height:1.1;margin:0 0 32px}
.case-opening h2 em{font-weight:300;font-style:normal;color:#b7bdc7}
.case-lead{font-size:clamp(18px,1.8vw,23px);line-height:1.65;color:#c3c6cc;max-width:760px;margin:0 0 55px}
.case-credits{display:grid;grid-template-columns:1.2fr 1.2fr 1.2fr 1fr;gap:25px;border-top:1px solid #ffffff24;padding-top:24px;margin:0}
.case-credits dt,.case-label{font:400 9px/1.6 'IBM Plex Mono',monospace;letter-spacing:.08em;color:#9a9fa8;text-transform:uppercase}
.case-credits dd{font-size:12px;line-height:1.8;margin:10px 0 0;color:#e1e2e5}
.award-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:9px;vertical-align:middle}
.case-contents{display:flex;flex-wrap:wrap;gap:16px 30px;margin-top:42px;font-size:10px;color:#c7cad0}
.case-contents a:hover,.case-source-link:hover{color:#f19679}
.case-chapter{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:36px clamp(35px,6vw,90px);padding:80px 0;border-top:1px solid #ffffff22;scroll-margin-top:0}
.chapter-heading .eyebrow{color:#e58b70;font-size:9px;letter-spacing:.12em;margin-bottom:25px}
.chapter-heading h2{font-size:clamp(29px,3.2vw,45px);font-weight:400;line-height:1.18;letter-spacing:-.04em;margin:0}
.chapter-body p{font-size:15px;line-height:1.9;color:#bfc2c9;margin:0 0 22px}.chapter-body p:last-child{margin-bottom:0}
.research-stages{margin:35px 0;display:grid;gap:26px;padding-left:22px;border-left:1px solid #e24a1a88}
.research-stages h3{font-size:18px;font-weight:450;letter-spacing:-.025em;margin:8px 0 12px}.research-stages p{font-size:13px;margin:0}
.decision-list{grid-column:1/-1;margin-top:5px}.decision-list>div{display:grid;grid-template-columns:1fr 1.15fr;gap:35px clamp(35px,6vw,90px);padding:18px 0;border-bottom:1px solid #ffffff20}
.decision-list h3{font-size:15px;font-weight:400;line-height:1.6;letter-spacing:-.015em;margin:0}.decision-list p{font-size:13px;line-height:1.8;color:#bfc2c9;margin:0}
.ideation-figure{grid-column:2;max-width:440px;width:100%;margin:15px 0 0;justify-self:end}.ideation-figure img{display:block;width:100%;height:auto;filter:saturate(.65)}
.case-chapter figcaption{font-size:10px;line-height:1.8;color:#9a9fa8;margin-top:13px}
.map-figure{grid-column:1/-1;margin:10px 0 0;min-width:0}.map-figure img{display:block;width:100%;height:auto;background:#fff;max-height:790px;object-fit:contain}
.mechanics-list{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;padding-top:15px}
.input-key{display:inline-block;border:1px solid #ffffff40;border-bottom-width:3px;border-radius:4px;padding:8px 13px;font:400 10px/1.5 'IBM Plex Mono',monospace;color:#e1e3e7;min-width:60px;text-align:center}
.mechanics-list h3{font-size:23px;font-weight:400;letter-spacing:-.03em;margin:22px 0 12px}.mechanics-list p{font-size:13px;line-height:1.8;color:#bfc2c9;margin:0;max-width:300px}
.sound-samples{grid-column:1/-1;margin-top:20px;min-width:0}.sound-samples>header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:18px;border-bottom:1px solid #ffffff28}.sound-samples>header p{font-size:10px;color:#9a9fa8;margin:0}
.sample-pair{display:grid;grid-template-columns:.9fr 1fr 1fr;gap:30px;padding:35px 0;border-bottom:1px solid #ffffff28;align-items:center;min-width:0}
.sample-number{font:400 10px/1.5 'IBM Plex Mono',monospace;color:#e58b70}.sample-explanation h3{font-size:23px;font-weight:400;letter-spacing:-.03em;line-height:1.2;margin:12px 0}.sample-explanation p{font-size:12px;line-height:1.8;color:#bfc2c9;max-width:250px;margin:0}
.sample-pair figure{margin:0;min-width:0}.sample-pair figcaption{margin:0 0 20px;font-size:13px;color:#e1e3e7}.sample-pair small{display:block;margin-top:6px;font-size:10px;color:#9a9fa8}.sample-pair audio{display:block;width:100%;max-width:100%;height:40px}
.sound-connection{grid-column:1/-1;margin:30px 0 0;font-size:clamp(24px,3vw,40px);line-height:1.4;font-weight:300;letter-spacing:-.035em;max-width:1000px}.sound-connection span{color:#9a9fa8}
.study-scope{margin-top:32px;border-top:1px solid #ffffff25;padding-top:15px;color:#9a9fa8;font-size:11px}.study-scope summary{cursor:pointer;padding:5px 0}.study-scope p{font-size:12px;margin-top:15px;line-height:1.8}
.case-outcome{grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:28px 0;margin-top:10px;border-top:1px solid #ffffff25;border-bottom:1px solid #ffffff25}.case-outcome .award-dot{margin:0}.case-outcome p{font-size:clamp(20px,2.5vw,30px);font-weight:300;letter-spacing:-.025em;margin:0}.case-outcome>span:last-child{margin-left:auto;font-size:10px;color:#9a9fa8}
.case-source-link{display:inline-block;font-size:12px;color:#e58b70;border-bottom:1px solid #e58b7055;padding:6px 0}
.demo-chapter .demo{grid-column:1/-1;width:100%;margin:15px 0 0}
.case-study .site-footer{margin-top:10px}
.case-study .site-footer a:nth-child(2){margin-left:auto}
@media(max-width:900px){.case-credits{grid-template-columns:1fr 1fr;gap:30px}.case-chapter{column-gap:35px}.sample-pair{grid-template-columns:1fr 1fr;gap:24px}.sample-explanation{grid-column:1/-1}.sample-explanation p{max-width:520px}.sample-explanation h3 br{display:none}.case-outcome>span:last-child{margin-left:0;flex-basis:100%}}
@media(max-width:650px){.case-study{padding-top:45px}.case-study .back-link{margin-bottom:50px}.case-opening{padding-bottom:50px}.case-opening h2{font-size:38px}.case-lead{font-size:17px;margin-bottom:35px}.case-credits{gap:24px 18px}.case-credits dd{font-size:11px}.case-contents{gap:16px 22px}.case-chapter{grid-template-columns:1fr;gap:28px;padding:55px 0}.chapter-heading h2{font-size:32px}.chapter-heading .eyebrow{margin-bottom:18px}.chapter-body p{font-size:14px;line-height:1.85}.decision-list,.map-figure,.mechanics-list,.sound-samples,.sound-connection,.case-outcome,.demo-chapter .demo{grid-column:1}.decision-list>div{grid-template-columns:1fr 1fr;gap:20px}.decision-list h3,.decision-list p{font-size:12px}.ideation-figure{grid-column:1;max-width:none;margin:0}.mechanics-list{grid-template-columns:1fr;gap:30px}.mechanics-list>div{display:grid;grid-template-columns:100px 1fr;column-gap:20px}.input-key{align-self:start;grid-row:1/3}.mechanics-list h3{font-size:20px;margin:0 0 10px}.mechanics-list p{grid-column:2;max-width:none}.sound-samples>header{display:block}.sound-samples>header p{margin-top:10px}.sample-pair{grid-template-columns:1fr;gap:25px}.sample-explanation{grid-column:1}.sample-pair figcaption{margin-bottom:12px}.sample-explanation p{max-width:none}.sound-connection{font-size:27px}.case-outcome{margin-top:0}.case-study .site-footer{gap:20px;flex-wrap:wrap}.case-study .site-footer a:nth-child(2){margin-left:0}.case-study .site-footer>span{flex-basis:100%}}
/* The case study has no fixed header to reserve space for at its entrance. */
#project{scroll-margin-top:-100px}
/* The case study is the room: it lights up when the door has finished opening. */
.mansion-interior{min-height:100svh}
.mansion-interior .case-study{background:#000;border-top:0;transition:opacity .8s ease-out}
.mansion-interior[data-entry-state="waiting"] .interior-stage{position:absolute;inset:0 0 auto;height:100svh;z-index:3}
.mansion-interior[data-entry-state="waiting"] .case-study{visibility:hidden;opacity:0;pointer-events:none}
.mansion-interior[data-entry-state="ready"] .interior-stage{position:relative;height:auto;background:#000}
.mansion-interior[data-entry-state="ready"] .interior-controls{position:relative;inset:auto;padding:20px var(--pad);font-size:10px}
.mansion-interior[data-entry-state="ready"] .case-study{visibility:visible;opacity:1}
.case-study h2,.case-opening h2 em{color:#c0e9ff;text-shadow:0 0 5px #57b8ff55,0 0 24px #218bff33}
.case-opening h2{font-size:clamp(35px,4.7vw,67px);max-width:1050px;line-height:1.14}
.case-opening h2 em{color:#9bd5ff}
.case-study .case-lead{color:#bfceda}
.case-study .chapter-body p{color:#b5c5d3}
@media(max-width:650px){.case-opening h2{font-size:36px}.mansion-interior[data-entry-state="ready"] .interior-controls{font-size:9px;gap:14px}}
@media(prefers-reduced-motion:reduce){.mansion-interior .case-study{transition:none}}
/* A path of light in darkness, inspired by the restraint of Dark Echo. */
:root{--path-light:#e5f5f5;--path-glow:rgba(171,221,225,.3)}
#footstepTrail{position:fixed;inset:0;width:100%;height:100%;z-index:6;pointer-events:none}
.mansion-interior[data-entry-state="approach"] .interior-stage{position:relative;inset:auto;height:100svh;min-height:0;z-index:2;background:#000}
.mansion-interior[data-entry-state="approach"] .case-study{display:none}
.explore-case{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:1px solid #e4ffffcc;background:rgba(210,246,246,.025);padding:19px 28px;box-shadow:0 0 5px #e5ffffaa,0 0 18px #c5eeee66,0 0 44px #c5eeee33,inset 0 0 16px #c5eeee22;transition:box-shadow .22s ease,text-shadow .22s ease,background-color .22s ease,border-color .22s ease;color:var(--path-light);white-space:nowrap;font:300 clamp(11px,1.2vw,15px)/1.6 Montserrat,Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;text-shadow:0 0 5px #efffffff,0 0 15px #d4ffff99,0 0 28px #c5eeee55;cursor:pointer;animation:doorway-light 4.8s linear infinite}
.explore-case:hover,.explore-case:focus-visible{border-color:#fff;color:#fff;background-color:rgba(210,255,255,.12);box-shadow:0 0 5px #fff,0 0 16px #e5ffffee,0 0 42px #c5ffffaa,0 0 85px #b5f7ff66,inset 0 0 26px #d5ffff55;text-shadow:0 0 4px #fff,0 0 13px #efffff,0 0 30px #c5ffffcc;animation:none;opacity:1;filter:brightness(1.12)}
@keyframes doorway-light{0%,12%,23%,37%,49%,61%,78%,90%,100%{opacity:1;filter:brightness(1)}14%,27%,42%,64%,83%,94%{opacity:.9;filter:brightness(.96)}18%,31%,46%,69%,87%,97%{opacity:1;filter:brightness(1.1)}}
.interior-hint{font-size:9px;letter-spacing:.08em;color:#768183}
.mansion-interior[data-entry-state="ready"] .explore-case,.mansion-interior[data-entry-state="ready"] .interior-hint{display:none}
.mansion-interior[data-entry-state="ready"] .interior-controls{justify-content:flex-start;padding-top:15px;padding-bottom:0}
.case-study h2,.case-opening h2 em{color:var(--path-light);text-shadow:0 0 5px #c2e5e533,0 0 20px #b5dfe51f}
.case-opening h2{font-size:clamp(38px,5.3vw,76px);line-height:1.1}
.case-opening h2 em{color:#d1e8e9}
body.motion-paused .explore-case{animation-play-state:paused}
@media(max-width:650px){.case-opening h2{font-size:36px}.explore-case{font-size:10px;letter-spacing:.13em}.interior-hint{font-size:8px}}
@media(prefers-reduced-motion:reduce){.explore-case{animation:none}}

/* Snap only between the exterior and its doorway; reading remains free scrolling. */
html.entry-snapping{scroll-snap-type:y mandatory;scroll-padding-top:0}
html.entry-snapping .mansion-hero,html.entry-snapping .interior-stage{scroll-snap-align:start;scroll-snap-stop:always}
html.entry-snapping #inside{scroll-margin-top:0}

/* Shared portfolio cursor and cool, sound-wave-like click feedback. */
.custom-cursor {position:fixed;left:0;top:0;width:22px;height:22px;border-radius:50%;background:white;mix-blend-mode:difference;pointer-events:none;z-index:10000;opacity:0;transition:width .25s ease,height .25s ease,border-radius .25s ease,opacity .2s ease}
.custom-cursor.visible {opacity:1}
.custom-cursor.hover {width:42px;height:42px;border-radius:6px}
@media (pointer:fine) and (prefers-reduced-motion:no-preference) {
  html.cursor-ready,.cursor-ready * {cursor:none!important}
}
.interaction-ripple {position:fixed;z-index:9999;pointer-events:none;width:16px;height:16px;margin:-8px 0 0 -8px;border:1px solid #e9fafa;border-radius:50%;box-shadow:0 0 8px #d9ffff,0 0 18px #c8eeee88,inset 0 0 6px #c8eeee88;animation:mansion-ripple .75s ease-out forwards}
@keyframes mansion-ripple {from{opacity:.95;transform:scale(.4)}to{opacity:0;transform:scale(5)}}
@media (prefers-reduced-motion:reduce) {
  .custom-cursor {display:none}
  .interaction-ripple {animation:mansion-ripple-still .25s ease-out forwards}
}
@keyframes mansion-ripple-still {to{opacity:0}}

/* Navigation returns when the entrance has settled into place. */
.site-nav {position:fixed;z-index:30;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px);transition:opacity .45s ease,transform .45s ease,visibility .45s}
.site-nav.nav-home,.site-nav.nav-inside {opacity:1;visibility:visible;pointer-events:auto;transform:none}
.site-nav.nav-inside {background:linear-gradient(#000e,#0009,transparent);text-shadow:0 0 12px #d4f3f355;animation:nav-illuminate .65s ease-out}
@keyframes nav-illuminate {0%,20%{opacity:0}14%,30%{opacity:.7}23%{opacity:.25}100%{opacity:1}}
.hero-bottom {display:flex;justify-content:center}
.atmosphere-controls {position:fixed;z-index:40;right:var(--pad);bottom:max(22px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.atmosphere-controls #motionToggle,.atmosphere-controls #windToggle {display:flex;flex-direction:row-reverse;align-items:center;justify-content:flex-start;gap:0;min-height:44px;padding:10px;border:1px solid transparent;border-radius:4px;background:#03090970;color:#dceaea;font:400 10px/1.5 Inter,sans-serif;letter-spacing:.04em;backdrop-filter:blur(8px)}
.atmosphere-controls button[hidden] {display:none!important}
.atmosphere-controls svg,.motion-mark {display:block;width:18px;height:18px;min-width:18px;flex-shrink:0}
.atmosphere-controls button>span:first-child {width:auto}
.atmosphere-controls .motion-label,.atmosphere-controls .sound-label {display:block;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;transition:max-width .6s cubic-bezier(.2,.7,.2,1),opacity .35s,margin-right .6s;margin-right:0}
.atmosphere-controls .show-label .motion-label,.atmosphere-controls .show-label .sound-label {max-width:160px;opacity:1;margin-right:12px}
.atmosphere-controls button:hover,.atmosphere-controls button:focus-visible {color:#f2ffff;border-color:#d9fafa33;filter:drop-shadow(0 0 5px #c8eeee88)}
.motion-mark .play-shape {display:none}
#motionToggle[aria-pressed="true"] .play-shape {display:block}
#motionToggle[aria-pressed="true"] .pause-shape {display:none}
#windToggle[aria-pressed="false"] svg {opacity:.65}
.sound-notice {position:fixed;z-index:45;bottom:32px;left:var(--pad);max-width:min(420px,calc(100vw - 120px));display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px;padding:17px 40px 17px 20px;border:1px solid #d3eeee30;background:#030909ed;box-shadow:0 0 24px #c8eeee0d;color:#deeeee;font:400 11px/1.6 Inter,sans-serif;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.sound-notice[hidden] {display:none}
.sound-notice.is-visible {opacity:1;transform:none}
.sound-notice button {padding:0;border:0;background:none;color:inherit;cursor:pointer;font:inherit}
.sound-notice .notice-enable {text-decoration:underline;text-underline-offset:4px;white-space:nowrap;color:#f4ffff}
.sound-notice .notice-close {position:absolute;right:12px;top:9px;font-size:20px;padding:0 4px;color:#9bafaf}
.case-study .mansion-footer {display:flex;align-items:center;max-width:none;min-height:180px;margin-top:30px;padding:28px 0 120px;border-top:1px solid #c8eeee30;color:#b6c5c5;font:400 10px/1.5 Inter,sans-serif;letter-spacing:.05em}
.mansion-footer .footer-links {display:flex;margin-left:auto;gap:28px}
.mansion-footer .footer-links a:hover {color:#ecffff;text-shadow:0 0 12px #c8eeee}
@media(max-width:650px) {
  .atmosphere-controls {right:14px;bottom:max(14px,env(safe-area-inset-bottom))}
  .hero-bottom .enter-link {margin:0 auto}
  .sound-notice {left:20px;bottom:24px;max-width:calc(100vw - 100px);font-size:10px;padding:15px 32px 15px 16px}
  .case-study .mansion-footer {gap:20px;align-items:flex-start}
  .mansion-footer .footer-links {margin-left:0;flex-wrap:wrap;gap:20px}
}
@media(prefers-reduced-motion:reduce) {
  .site-nav.nav-inside {animation:none}
  .site-nav,.atmosphere-controls .motion-label,.atmosphere-controls .sound-label,.sound-notice {transition:none}
}
.site-nav.nav-inside {background:#000000ef;backdrop-filter:blur(12px);border-bottom:1px solid #c8eeee0b}

/* The doorway is the end of the page until the visitor opens the study. */
.mansion-interior>.mansion-footer {position:relative;max-width:1200px;min-height:160px;margin:30px var(--pad) 0;padding:24px 0 120px;border-top:1px solid #c8eeee20;color:#a9bcbc;z-index:3}
.mansion-interior[data-entry-state="approach"]>.mansion-footer {position:absolute;bottom:0;left:var(--pad);right:calc(var(--pad) + 72px);max-width:none;min-height:90px;margin:0;padding:20px 0 34px;background:transparent}
html.entry-snapping .site-nav.nav-inside {background:transparent;backdrop-filter:none;border-bottom-color:transparent}
.atmosphere-controls #motionToggle,.atmosphere-controls #windToggle {background:transparent;border-color:transparent;backdrop-filter:none;color:#c9ddddb3;border-radius:0}
.atmosphere-controls button:hover,.atmosphere-controls button:focus-visible {border-color:transparent;color:#f0ffff;filter:drop-shadow(0 0 6px #c8eeee66)}
.atmosphere-controls .motion-label,.atmosphere-controls .sound-label {text-shadow:0 0 10px #c8eeee40}
.sound-notice {bottom:132px;border:0;border-radius:2px;background:#0b151533;backdrop-filter:blur(16px);box-shadow:none;color:#c9ddddc9;padding:15px 40px 15px 16px}
.sound-notice .notice-enable {color:#e2f4f4c9;text-decoration-color:#c8eeee55}
.sound-notice .notice-enable:hover,.sound-notice .notice-close:hover {color:#f4ffff;text-shadow:0 0 9px #c8eeee88}
.sound-notice .notice-close {color:#c9dddd99}
@media(min-width:1360px) {
  .mansion-interior[data-entry-state="ready"]>.mansion-footer {margin-left:auto;margin-right:auto}
}
@media(max-width:650px) {
  .mansion-interior>.mansion-footer {gap:16px;flex-wrap:wrap}
  .mansion-interior[data-entry-state="approach"]>.mansion-footer {min-height:104px;right:80px;padding:18px 0 26px;align-content:center;gap:12px}
  .mansion-interior[data-entry-state="approach"]>.mansion-footer .footer-name {flex-basis:100%}
  .mansion-interior>.mansion-footer .footer-links {margin-left:0;gap:18px}
  .sound-notice {bottom:132px;max-width:calc(100vw - 52px);left:20px}
}

/* Restore readable glass controls against the exterior image. */
.atmosphere-controls #motionToggle,.atmosphere-controls #windToggle {background:#03090970;border:1px solid transparent;border-radius:4px;backdrop-filter:blur(8px);color:#dceaea}
.atmosphere-controls button:hover,.atmosphere-controls button:focus-visible {border-color:#d9fafa33;color:#f2ffff;filter:drop-shadow(0 0 5px #c8eeee88)}
#windToggle[aria-pressed="false"] svg {opacity:.85}
.atmosphere-controls {bottom:max(22px,env(safe-area-inset-bottom),var(--footer-clearance,0px))}
.sound-notice {bottom:max(22px,env(safe-area-inset-bottom),var(--footer-clearance,0px));background:#030909b8;border:1px solid #d3eeee25;border-radius:4px;backdrop-filter:blur(8px);color:#dceaea;box-shadow:0 0 18px #c8eeee09}
.sound-notice .notice-enable {color:#f0ffff}
.sound-notice .notice-close {color:#c6d9d9}
.mansion-interior>.mansion-footer,
.mansion-interior[data-entry-state="approach"]>.mansion-footer,
.mansion-interior[data-entry-state="ready"]>.mansion-footer {left:0;right:0;width:100%;max-width:none;min-height:68px;margin:30px 0 0;padding:22px var(--pad) max(22px,env(safe-area-inset-bottom));display:flex;align-items:center;flex-wrap:nowrap;gap:20px;border-top:1px solid #c8eeee20}
.mansion-interior[data-entry-state="approach"]>.mansion-footer {margin:0}
.mansion-interior>.mansion-footer .footer-name {flex-basis:auto;white-space:nowrap}
.mansion-interior>.mansion-footer .footer-links {margin-left:auto;flex-wrap:nowrap;white-space:nowrap;gap:28px}
@media(max-width:650px) {
  .mansion-interior>.mansion-footer .footer-links a:first-child {display:none}
  .mansion-interior>.mansion-footer .footer-links {gap:0}
  .atmosphere-controls {bottom:max(14px,env(safe-area-inset-bottom),var(--footer-clearance,0px))}
  .sound-notice {max-width:calc(100vw - 110px);bottom:max(24px,env(safe-area-inset-bottom),var(--footer-clearance,0px))}
}

/* Give the recommendation readable type and a deliberate two-row layout. */
.sound-notice {display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:8px;width:330px;max-width:calc(100vw - 120px);padding:17px 46px 17px 18px;font:400 12px/1.5 Inter,sans-serif;letter-spacing:0;color:#e0ecec;text-shadow:none}
.sound-notice>span {display:block;white-space:normal;text-wrap:pretty}
.sound-notice .notice-enable {justify-self:start;font-size:12px;font-weight:500;line-height:1.5;text-decoration-thickness:1px;text-underline-offset:4px;text-shadow:none}
.sound-notice .notice-close {top:9px;right:8px;display:grid;place-items:center;width:32px;height:32px;padding:7px;line-height:1;color:#c6d9d9}
.sound-notice .notice-close svg {display:block;width:18px;height:18px}
.sound-notice .notice-enable:hover,.sound-notice .notice-close:hover {text-shadow:none;color:white}
@media(max-width:650px) {
  .sound-notice {width:280px;max-width:calc(100vw - 110px);font-size:12px;padding:16px 40px 16px 16px}
}

/* The doorway light travels across the screen before the study emerges. */
.case-entry-pulse {position:fixed;inset:0;z-index:60;pointer-events:none;background:radial-gradient(ellipse at var(--pulse-x) var(--pulse-y),#edffffd9 0%,#d5f5f58c 28%,#bddfe533 62%,transparent 90%)}
.case-entry-ring {position:absolute;border:2px solid #f0ffff;background:#e9ffff12;box-shadow:0 0 14px #f0ffff,0 0 42px #d2ffffaa,inset 0 0 22px #d2ffff66;transform-origin:center;will-change:transform,opacity}
.case-study.case-arriving {animation:case-emerge 1.5s .12s ease-out both}
@keyframes case-emerge {from{opacity:0}to{opacity:1}}
.case-study {--muted:#9aafaf;color:#e5f5f5}
.case-study .case-opening h2 {font-family:Montserrat,Inter,sans-serif;font-weight:300;text-shadow:0 0 6px #d4ffff66,0 0 24px #c5eeee33}
.case-study .eyebrow,.case-study .chapter-heading .eyebrow,.case-study .sample-number {color:#b8d7d7}
.case-study .case-source-link {color:#dceeee;border-color:#c8eeee55}
.case-study .research-stages {border-left-color:#c8eeee55}
.case-study .case-lead,.case-study .chapter-body p,.case-study .decision-list p,.case-study .mechanics-list p,.case-study .sample-explanation p {color:#b8c7c7}
.case-study .input-key {border-color:#d4eeee66;color:#e5f5f5;box-shadow:0 0 12px #c8eeee0c}
.case-study a:hover {color:#efffff;text-shadow:0 0 9px #c8eeee66}
.case-study a:focus-visible,.case-study button:focus-visible {outline-color:#d4eeee}
.case-study .award-dot {background:#d9fafa;box-shadow:0 0 10px #c8eeee66}
@media(prefers-reduced-motion:reduce) {.case-study.case-arriving {animation:none}.case-entry-pulse {display:none}}

/* A playable keyboard map, lit with the doorway's same cool white. */
.keyboard-demo {max-width:980px;margin:42px 0 44px;color:#dbeeee}
.keyboard-caption {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px;font:400 10px/1.5 'IBM Plex Mono',monospace;color:#99b3b3;letter-spacing:.04em}
.keyboard-caption label {white-space:nowrap}
.keyboard-caption select {font:inherit;color:#dbeeee;background:#060c0c;border:1px solid #c8eeee33;border-radius:3px;padding:5px 7px;margin-left:5px}
.game-keyboard {position:relative;width:100%;aspect-ratio:720/270;outline-offset:6px;touch-action:pan-y}
.game-keyboard:focus-visible {outline:1px solid #c8eeee66}
.keyboard-keys {position:absolute;inset:0}
.game-key {position:absolute;display:grid;place-items:center;padding:0;border:1px solid #c8eeee38;border-bottom:3px solid #c8eeee35;border-radius:5px;background:#d5ffff03;color:#b9d4d4;transition:background .2s,border-color .2s,box-shadow .2s;touch-action:manipulation}
.game-key svg {width:42%;height:48%;max-width:30px;opacity:.8}
.game-key[data-type="floor"] svg {opacity:.25}
.game-key[data-type="wall"] {background:#d5ffff09;border-style:solid;color:#6e8888}
.game-key[data-type="key"],.game-key[data-type="ladder_down"],.game-key[data-type="goal"] {color:#edffff}
.game-key[data-type="monster"],.game-key[data-type="trap"] {color:#c2dada}
.game-key:disabled {opacity:1;cursor:default}
.game-key.is-current {border-color:#e7ffffbb;background:#d5ffff0c;box-shadow:0 0 8px #c8eeee44,inset 0 0 14px #c8eeee15}
.game-key.is-current svg {opacity:.12}
.game-key.is-inspected,.game-key:not(:disabled):hover {border-color:#edffff;box-shadow:0 0 15px #c8eeee55;background:#d5ffff12}
.keyboard-trail {position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.keyboard-walker {fill:#efffff;filter:drop-shadow(0 0 3px #c8eeee)}
.keyboard-print {fill:#e5ffff;filter:drop-shadow(0 0 2px #c8eeee);animation:keyboard-print-fade 4s linear forwards}
@keyframes keyboard-print-fade {0%,40%{opacity:.7}100%{opacity:0}}
.keyboard-legend {display:flex;flex-wrap:wrap;gap:12px 22px;margin:16px 0 25px;font:400 10px/1.5 Inter,sans-serif;color:#9eb8b8}
.keyboard-legend>span {display:flex;align-items:center;gap:7px}
.keyboard-legend svg {width:17px;height:17px;flex-shrink:0}
.keyboard-actions {display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px}
.keyboard-actions button,.keyboard-modes button {font:400 11px/1.5 Inter,sans-serif;letter-spacing:.02em;color:#dceeee;background:none;border:0;padding:10px 0;cursor:pointer}
.keyboard-actions #keyboardWatch {padding:12px 17px;border:1px solid #d4eeee88;border-radius:2px;box-shadow:0 0 12px #c8eeee22;background:#c8eeee06;text-shadow:0 0 8px #c8eeee44}
.keyboard-actions #keyboardWatch:hover {box-shadow:0 0 20px #c8eeee55;border-color:#efffff}
.keyboard-actions button:disabled {opacity:.45;cursor:default}
.keyboard-actions button[hidden],.keyboard-modes[hidden] {display:none}
.keyboard-modes {display:flex;gap:10px;margin-top:14px}
.keyboard-modes button {padding:6px 12px;border:1px solid #c8eeee33;border-radius:2px}
.keyboard-modes button[aria-pressed="true"] {background:#c8eeee15;border-color:#c8eeeeaa}
.keyboard-demo .keyboard-status {margin:15px 0 0;min-height:3em;max-width:650px;font:400 12px/1.7 Inter,sans-serif;color:#a5bcbc}
.case-opening>.case-lead {margin-top:28px}
@media(max-width:650px) {
  .keyboard-demo {margin:28px 0 30px}
  .keyboard-caption {font-size:8px;gap:8px;margin-bottom:14px}
  .keyboard-caption select {padding:4px}
  .game-key {border-radius:3px;border-bottom-width:2px}
  .game-key svg {width:50%;height:56%}
  .keyboard-legend {gap:10px 16px;font-size:9px;margin:14px 0 20px}
  .keyboard-legend svg {width:14px;height:14px}
  .keyboard-actions {gap:8px 18px}
  .keyboard-actions button {font-size:10px}
  .keyboard-demo .keyboard-status {font-size:11px}
}
@media(prefers-reduced-motion:reduce) {.keyboard-print {animation:none;opacity:.35}.game-key {transition:none}}
/* Keep the opening above the map clear of the fixed navigation. */
.mansion-interior .case-study {padding-top:110px}
@media(max-width:650px) {.mansion-interior .case-study {padding-top:100px}}

/* The game is a centered, self-contained sound stage. */
.case-study .keyboard-demo {width:100%;max-width:900px;margin:42px auto 44px}
.game-keyboard {isolation:isolate;overflow:hidden}
.game-key[data-type="key"],.keyboard-legend>[data-type="key"] svg {color:#e5c579}
.game-key[data-type="door"],.keyboard-legend>[data-type="door"] svg {color:#cda878}
.game-key[data-type="open_door"] {color:#9bc9a7}
.game-key[data-type="ladder_down"],.game-key[data-type="goal"],.keyboard-legend>[data-type="ladder_down"] svg {color:#95cfc2}
.game-key[data-type="trap"],.keyboard-legend>[data-type="trap"] svg {color:#d78c86}
.game-key[data-type="monster"],.keyboard-legend>[data-type="monster"] svg {color:#b09acb}
.game-key[data-type="wall"],.keyboard-legend>[data-type="wall"] svg {color:#8298a3}
.keyboard-probe {fill:#dffafa;opacity:.48;filter:drop-shadow(0 0 3px #c8eeee);animation:keyboard-probe-fade 1.2s ease-out forwards}
@keyframes keyboard-probe-fade {0%,45%{opacity:.48}100%{opacity:0}}
.keyboard-floor-ghost {position:absolute;inset:0;z-index:4;pointer-events:none;background:#000}
.keyboard-visual-options {display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;margin:0 0 18px;font:400 10px/1.6 Inter,sans-serif;color:#99b3b3}
.keyboard-visual-options button,.keyboard-unlock button {font:inherit;color:#dceeee;padding:8px 12px;background:#c8eeee08;border:1px solid #c8eeee44;border-radius:3px;cursor:pointer}
.keyboard-visual-options button[aria-pressed="true"] {border-color:#dceeee88}
.keyboard-unlock {display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0 0 20px;padding:15px;border:1px solid #c8eeee33;border-radius:3px;background:#061010;font:400 11px/1.5 Inter,sans-serif}
.keyboard-unlock[hidden] {display:none}
.keyboard-unlock input {min-width:0;max-width:160px;padding:8px;background:#000;border:1px solid #c8eeee66;border-radius:2px;color:#e5f5f5;font:inherit}
.keyboard-unlock .unlock-message {flex-basis:100%;color:#e6b3a4}
.keyboard-unlock .unlock-message:empty {display:none}
.keyboard-demo.sound-only .game-key {opacity:0;pointer-events:auto}
.keyboard-demo.sound-only .keyboard-trail,.keyboard-demo.sound-only .keyboard-legend,.keyboard-demo.sound-only .keyboard-floor-ghost {visibility:hidden}
.keyboard-demo.sound-only .game-keyboard:focus-visible {outline:none}
.keyboard-demo.sound-only .keyboard-status {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.keyboard-actions {gap:8px 20px}
.keyboard-actions #keyboardSkip {color:#a8c5c5;text-decoration:underline;text-underline-offset:4px}
@media(max-width:650px) {
  .case-study .keyboard-demo {margin:28px auto 30px}
  .keyboard-visual-options {font-size:10px;gap:10px 14px}
  .keyboard-visual-options>span {max-width:220px}
  .keyboard-actions {gap:8px 16px}
  .keyboard-unlock {padding:12px;font-size:10px}
  .keyboard-unlock input {max-width:135px}
}
@media(prefers-reduced-motion:reduce) {.keyboard-probe {animation:none}}

/* One viewport layer softens the page while the game remains above it. */
.keyboard-focus-veil {position:fixed;inset:0;z-index:50;background:#00000048;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);pointer-events:none}
.keyboard-focus-veil[hidden] {display:none}
.keyboard-demo.is-focused {position:relative;z-index:60;background:#000;box-shadow:0 0 45px 24px #000b;outline:1px solid #c8eeee1c;outline-offset:14px}
.keyboard-session-status {margin:12px 0 0;min-height:1.6em;color:#91abab;font:400 10px/1.6 Inter,sans-serif;letter-spacing:.02em}
.keyboard-demo.is-focused .keyboard-session-status {color:#d4eeee;text-shadow:0 0 8px #c8eeee33}
body.game-focus-active .mist,body.mansion-inside .mist {animation-play-state:paused}
@media(max-width:650px) {
  .keyboard-demo.is-focused {outline-offset:8px;box-shadow:0 0 25px 12px #000b}
  .keyboard-session-status {font-size:9px;min-height:1.6em}
  .keyboard-focus-veil {backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
}

/* Floor ruler: vertical ticks, with a longer illuminated mark for this floor. */
.floor-navigation {display:flex;align-items:center;gap:12px}
.floor-ruler {display:flex;align-items:flex-start}
.floor-tick {display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:27px;min-height:44px;padding:0;border:0;background:none;color:#819b9b;cursor:pointer;font:400 9px/1.5 'IBM Plex Mono',monospace}
.floor-tick-line {height:11px;width:1px;margin-bottom:6px;background:#c8eeee55;transition:height .2s,background .2s,box-shadow .2s}
.floor-tick[aria-pressed="true"] {color:#efffff}
.floor-tick[aria-pressed="true"] .floor-tick-line {height:22px;width:2px;background:#efffff;box-shadow:0 0 8px #c8eeeeaa}
.floor-tick:hover .floor-tick-line {background:#efffff}
.floor-tick:focus-visible {outline:1px solid #dffafa;outline-offset:2px;border-radius:2px}
.floor-tick:disabled {opacity:.4;cursor:default}
.keyboard-caption {align-items:flex-start}
.keyboard-visual-options {margin-bottom:12px}
.keyboard-actions,.keyboard-modes {gap:8px;align-items:center}
.keyboard-actions button,.keyboard-actions #keyboardWatch,.keyboard-modes button {
  display:inline-flex;align-items:center;justify-content:center;gap:0;min-height:42px;min-width:42px;padding:11px;
  border:1px solid #c8eeee24;border-radius:5px;background:#c8eeee04;box-shadow:none;
  color:#c7dddd;text-decoration:none;text-shadow:none;font:400 11px/1.4 Inter,sans-serif;
  transition:background .2s,border-color .2s,box-shadow .2s;
}
.keyboard-actions #keyboardWatch {border-color:#c8eeee66;background:#c8eeee0b}
.keyboard-actions button svg,.keyboard-modes button svg {width:18px;height:18px;flex:0 0 18px}
.control-label {display:inline-block;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;transition:max-width .28s ease,opacity .2s,margin .28s;margin-left:0}
.keyboard-actions button:hover,.keyboard-actions button:focus-visible,.keyboard-modes button:hover,.keyboard-modes button:focus-visible {border-color:#c8eeee99;background:#c8eeee10;box-shadow:0 0 14px #c8eeee1a;outline:none}
.keyboard-actions button:is(:hover,:focus-visible) .control-label,.keyboard-modes button:is(:hover,:focus-visible) .control-label {max-width:175px;opacity:1;margin-left:9px}
.keyboard-actions #keyboardSkip {color:#a8c5c5;text-decoration:none}
.keyboard-modes {margin-top:12px}
.keyboard-demo.sound-only .game-key {opacity:1;pointer-events:auto;background:#b8dedf06;border-color:#c8eeee26;box-shadow:none;color:transparent;filter:blur(.55px)}
.keyboard-demo.sound-only .game-key svg {visibility:hidden}
.keyboard-demo.sound-only .game-key:not(:disabled):hover {background:#b8dedf0b;border-color:#c8eeee42;box-shadow:none}
.keyboard-demo.sound-only .game-keyboard::after {content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,#b7dede0c,transparent 80%);box-shadow:inset 0 0 35px 12px #0005}
.keyboard-demo.sound-only .game-keyboard:focus-visible {outline:1px solid #c8eeee33;outline-offset:3px}
@media(max-width:650px) {
  .keyboard-caption {flex-direction:column;gap:12px;font-size:9px}
  .floor-navigation {width:100%;justify-content:space-between}
  .floor-ruler {flex:1;max-width:330px;justify-content:space-between}
  .floor-tick {width:25px;min-height:44px}
  .keyboard-visual-options>span {max-width:none}
  .keyboard-actions,.keyboard-modes {gap:6px}
  .keyboard-actions button,.keyboard-actions #keyboardWatch,.keyboard-modes button {min-height:44px;min-width:44px;padding:12px}
}
@media(hover:none) {
  .keyboard-actions button:focus .control-label,.keyboard-modes button:focus .control-label {max-width:175px;opacity:1;margin-left:9px}
}
@media(prefers-reduced-motion:reduce) {.floor-tick-line,.control-label {transition:none}}

/* Introduce the game at the threshold, before the design story. */
.mansion-interior .interior-stage,
.mansion-interior[data-entry-state="approach"] .interior-stage,
.mansion-interior[data-entry-state="ready"] .interior-stage {
  position:relative;inset:auto;z-index:auto;height:auto;min-height:100svh;
  padding:110px var(--pad) 65px;background:#000;
}
.game-introduction,.interior-stage .keyboard-demo,.case-invitation {width:100%;max-width:900px;margin-left:auto;margin-right:auto}
.game-introduction .eyebrow {color:#91abab;margin:0 0 22px}
.game-introduction h2 {margin:0 0 22px;font-size:clamp(32px,4.4vw,58px);line-height:1.12;font-weight:300;letter-spacing:-.045em;color:var(--path-light);text-shadow:0 0 18px #c8eeee30}
.game-introduction>p:not(.eyebrow) {max-width:660px;color:#bdd0d0;font:400 clamp(14px,1.5vw,17px)/1.75 Inter,sans-serif;margin:0}
.game-introduction>p.game-invitation {margin-top:12px;font-size:12px;color:#8fa9a9}
.interior-stage .keyboard-demo {margin-top:32px;margin-bottom:32px}
.case-invitation {text-align:center;border-top:1px solid #c8eeee1c;padding-top:30px}
.case-invitation>p {font:400 11px/1.6 Inter,sans-serif;color:#8fa9a9;margin:0 0 16px}
.case-invitation .explore-case {position:relative;inset:auto;transform:none;max-width:100%;white-space:normal}
.mansion-interior[data-entry-state="ready"] .case-invitation {display:none}
.mansion-interior[data-entry-state="approach"]>.mansion-footer {position:relative;inset:auto;margin-top:0}
html.entry-snapping {scroll-snap-type:y proximity}
@media(max-width:650px) {
  .mansion-interior .interior-stage,
  .mansion-interior[data-entry-state="approach"] .interior-stage,
  .mansion-interior[data-entry-state="ready"] .interior-stage {padding-top:100px;padding-bottom:48px}
  .game-introduction h2 {font-size:34px}
  .game-introduction>p.game-invitation {font-size:11px}
  .interior-stage .keyboard-demo {margin-top:28px;margin-bottom:28px}
}

/* Locked ruler marks remain visible so the route through the mansion is clear. */
.floor-tick[data-locked="true"] {color:#506060;cursor:not-allowed;opacity:.65}
.floor-tick[data-locked="true"] .floor-tick-line {background:#66777755}
.floor-tick[data-locked="true"] .floor-number::after {content:"";display:block;width:3px;height:3px;margin:3px auto 0;border:1px solid #79909077;border-radius:1px}