/* The cross-section remains the main visual; the answer prompt is secondary. */
:root{font-family:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;color:#edece2;background:#172633;font-synthesis:none;--sky-top:#172633;--sky-bottom:#4e5264;--ink:#edece2;--muted:#b6bac0;--room:#18232d;--shell:#91a0a1;--ground:#15222c}*{box-sizing:border-box}body{margin:0;min-height:100svh;color:var(--ink);transition:color 8s}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--ink);outline-offset:5px}.atmosphere{position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse at 73% 33%,#ffffff09,transparent 46%),linear-gradient(var(--sky-top),var(--sky-bottom));transition:background 12s}header,footer{display:flex;align-items:center;justify-content:space-between;padding:30px 4.5vw}header{height:94px}.wordmark{color:inherit;text-decoration:none;font-size:17px;letter-spacing:.2em}.wordmark span{display:block;font-size:8px;letter-spacing:.25em;margin-top:8px;opacity:.55}.timebox{display:flex;align-items:center;gap:10px;font-size:13px;font-variant-numeric:tabular-nums;letter-spacing:.12em}.timezone{font-size:9px;opacity:.5}.live-dot{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.6}main{max-width:1260px;margin:auto;display:grid;grid-template-columns:1.35fr 1fr;align-items:center;min-height:calc(100svh - 180px);padding:15px 7vw 40px;gap:9vw}.scene{height:535px;position:relative;display:flex;align-items:center;justify-content:center}.scene-caption{position:absolute;left:0;top:5px;font-size:9px;letter-spacing:.2em;opacity:.4}.building-wrap{width:300px;position:relative;margin-left:28px;filter:none}.roof{height:18px;border-bottom:4px solid var(--shell);border-left:2px solid var(--shell);border-right:2px solid var(--shell);margin:0 -5px;position:relative}.roof span{position:absolute;width:52px;height:12px;background:var(--room);border:1px solid var(--shell);bottom:0;right:32px}.building{border-left:5px solid var(--shell);border-right:5px solid var(--shell);background:var(--room)}.floor{height:64px;position:relative;border-bottom:5px solid var(--shell);display:flex;transition:background 3s;background:var(--room)}.floor-label{position:absolute;right:calc(100% + 20px);top:24px;font-size:10px;font-weight:400;letter-spacing:.1em;opacity:.65;white-space:nowrap}.floor::after{content:"";position:absolute;right:25px;top:0;bottom:0;width:21px;border-left:1px solid #93989055;border-right:1px solid #93989055;background:repeating-linear-gradient(0deg,transparent 0 8px,#93989033 8px 9px)}.floor.lit{background:#d1b77d;box-shadow:inset 0 0 28px #ffdb9f66}.venue{position:relative;height:100%;flex:1;border-right:1px solid #92958c40;overflow:hidden;margin-right:1px}.venue:last-child{margin-right:49px}.person{position:absolute;bottom:8px;width:5px;height:10px;border-radius:3px 3px 1px 1px;background:#39392f;opacity:0;transition:opacity 3s;animation:amble var(--speed) ease-in-out infinite alternate;animation-delay:var(--delay)}.person::before{content:"";position:absolute;width:4px;height:4px;background:inherit;border-radius:50%;top:-5px;left:.5px}.person.visible{opacity:.85}.signal{position:absolute;top:10px;font:10px Georgia,serif;color:#51472f;opacity:0;transition:opacity 2s;animation:murmur 3s infinite alternate}.entrance{position:absolute;bottom:0;left:12px;width:35px;height:30px;border:1px solid #817b66;background:#474a4022}.foundation{height:8px;background:var(--shell);margin:0 -10px}.ground-line{position:absolute;top:calc(50% + 135px);left:-50px;right:-40px;height:1px;background:var(--shell);opacity:.45;z-index:-1}.ground-line::after{content:"";position:absolute;top:0;left:0;right:0;height:105px;background:linear-gradient(var(--ground),transparent);opacity:.4}.section-caption{position:absolute;bottom:16px;right:0;font-size:8px;letter-spacing:.22em;opacity:.35}.question{padding-bottom:8px;min-width:0}.eyebrow{font-size:10px;letter-spacing:.15em;opacity:.6}h1{font-size:clamp(40px,4.8vw,66px);font-weight:400;letter-spacing:.13em;margin:25px 0 40px;line-height:1.1}.answer-line{display:flex;border-bottom:1px solid color-mix(in srgb,var(--ink) 45%,transparent);padding-bottom:11px}.answer-line input{width:100%;min-width:0;border:0;border-radius:0;background:transparent;color:inherit;font-size:13px;letter-spacing:.07em;outline:none}.answer-line input::placeholder{color:var(--ink);opacity:.4}.answer-line button{border:0;background:transparent;color:inherit;font-size:25px;padding:0 8px;transition:transform .2s}.answer-line button:hover{transform:translateX(4px)}#feedback{font-size:11px;line-height:1.8;min-height:22px;opacity:.8;margin-top:18px}#solved p{font-size:13px;line-height:2}#solved small{display:block;font-size:10px;line-height:1.8;opacity:.6}footer{height:86px;font-size:10px;letter-spacing:.09em;color:var(--ink);opacity:.6}footer button{background:none;border:0;color:inherit;font-size:10px;padding:10px 0}dialog{border:1px solid #c6c1b5;background:#f5f1e7;color:#383f3e;width:min(480px,90vw);padding:40px;box-shadow:0 20px 90px #0005}dialog::backdrop{background:#101a25aa;backdrop-filter:blur(6px)}dialog h2{font-size:21px;font-weight:400;margin:22px 0}dialog p{font-size:12px;line-height:2}dialog .note{opacity:.65;font-size:10px}#close-about{position:absolute;right:15px;top:10px;background:none;border:0;font-size:26px;color:inherit}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@keyframes amble{from{transform:translateX(-5px) translateY(0)}50%{transform:translateX(3px) translateY(-1px)}to{transform:translateX(8px) translateY(0)}}@keyframes murmur{from{transform:translateY(2px)}to{transform:translateY(-3px)}}@media(max-width:700px){header{height:78px;padding:20px 24px}.wordmark{font-size:14px}.wordmark span{font-size:7px}.timebox{font-size:11px;gap:6px}main{display:flex;flex-direction:column;gap:6px;padding:0 30px 16px;min-height:calc(100svh - 145px)}.scene{height:430px;width:100%;max-width:350px;flex-shrink:0}.scene-caption{top:8px;font-size:8px}.building-wrap{width:242px}.floor{height:54px}.floor-label{top:19px;right:calc(100% + 15px)}.ground-line{top:calc(50% + 115px);left:-20px;right:-20px}.section-caption{bottom:10px;font-size:7px}.question{width:100%;max-width:300px;padding-top:4px}.eyebrow{font-size:9px}h1{font-size:37px;margin:16px 0 25px}.question .eyebrow{margin:0}#feedback{margin:12px 0 0;min-height:20px}footer{height:65px;padding:18px 24px;font-size:8px}footer button{font-size:9px}dialog{padding:32px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

h1{font-size:30px;margin:0 0 26px;letter-spacing:.08em}footer{justify-content:flex-end}@media(max-width:700px){h1{font-size:26px;margin:0 0 22px}}

#data-status{font-size:12px;line-height:1.7;opacity:.7;margin:0 0 20px}#data-status:empty{display:none}.building.unavailable{opacity:.45}

/* Weather remains outside the opaque rooms, with no flashing lightning. */
.atmosphere::after{content:"";position:absolute;inset:0;background:#626d76;opacity:var(--cloud-opacity,0);transition:opacity 4s}
#weather-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.building-wrap{z-index:1}.scene-caption,.section-caption{z-index:2}
#weather-layer i{display:none;position:absolute;top:-15%;width:1px;height:13px;background:var(--ink);opacity:.2;animation:weather-fall var(--fall-speed) linear infinite;animation-delay:var(--fall-delay)}
body[data-weather="rain"] #weather-layer i{display:block}
body[data-weather="snow"] #weather-layer i{display:block;width:3px;height:3px;border-radius:50%;opacity:.5;animation-duration:8s}
body[data-weather="fog"] #weather-layer{background:linear-gradient(transparent,#b4c0c326,transparent)}
@keyframes weather-fall{to{transform:translate(-30px,650px)}}
@media(prefers-reduced-motion:reduce){#weather-layer i{top:calc(10% + var(--static-top,20%));animation:none!important}#weather-layer i:nth-child(3n){top:65%}#weather-layer i:nth-child(3n + 1){top:15%}}
dialog a{color:inherit}

/* Keep the sky inside the body stacking context on mobile browsers. */
body{isolation:isolate}.atmosphere{pointer-events:none}

/* Stable venue areas; only confirmed 4F areas receive a schematic divider. */
.venue{position:absolute;top:0;bottom:0;height:auto;flex:none;border:0;margin:0;transition:none}.venue:last-child{margin:0}
.floor::after{display:none}
.floor[data-floor="4"] .audience::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--shell);opacity:.55}
.venue[data-phase="playing"] .person{animation-name:occupied;animation-duration:calc(var(--speed) * 2.5)}
.venue[data-phase="continuous"] .person{animation-name:occupied;animation-duration:calc(var(--speed) * 1.7)}
@keyframes occupied{from{transform:translate(0,0)}50%{transform:translate(1px,-1px)}to{transform:translate(-1px,0)}}

/* Stairwell is independent of room dividers; reserve space on every floor. */
.audience{position:absolute;inset:0 42px 0 0}
.stairs{position:absolute;right:10px;top:0;bottom:0;width:21px;border-left:1px solid #93989088;border-right:1px solid #93989088;background:repeating-linear-gradient(0deg,transparent 0 8px,#93989077 8px 9px);pointer-events:none}

h1{font-size:22px;margin-bottom:22px}@media(max-width:700px){h1{font-size:20px}}
.share-clear{display:inline-block;margin-top:14px;padding:9px 14px;border:1px solid currentColor;color:inherit;text-decoration:none;font-size:13px}
.floor[data-floor="2"] .audience{background:repeating-linear-gradient(90deg,transparent 0 calc(20% - 1px),#93989088 calc(20% - 1px) 20%)}
.floor[data-floor="5"] .audience{background:repeating-linear-gradient(90deg,transparent 0 calc(33.333% - 1px),#93989088 calc(33.333% - 1px) 33.333%)}

.exit-layer{position:absolute;inset:0;pointer-events:none;z-index:6;overflow:visible}.exit-person{position:absolute;top:0;left:0;width:5px;height:10px;border-radius:3px 3px 1px 1px;background:#39392f;opacity:.85}.exit-person::before{content:"";position:absolute;left:.5px;top:-5px;width:4px;height:4px;border-radius:50%;background:inherit}
.venue[data-phase="leaving"] .person{animation-name:occupied;animation-duration:calc(var(--speed)*2)}
@media(prefers-reduced-motion:reduce){.exit-layer{display:none}}

/* The entrance is a real element shared with the departure path geometry. */
.entrance{pointer-events:none}
.share-clear{display:inline-flex;align-items:center;justify-content:center;min-height:46px;background:#000;color:#fff;border:1px solid #777;border-radius:6px;padding:12px 22px;font-weight:600}
.share-clear:hover{background:#262626}.share-clear:focus-visible{outline:3px solid var(--ink)}
.share-label{display:block;font-size:11px;margin:18px 0 8px;line-height:1.6}
#share-impression{display:block;box-sizing:border-box;width:100%;resize:vertical;border:1px solid color-mix(in srgb,var(--ink) 45%,transparent);border-radius:4px;background:transparent;color:inherit;font:inherit;font-size:12px;line-height:1.7;padding:10px}
#share-impression::placeholder{color:var(--ink);opacity:.55}
.signal{top:3px;height:23px;width:60%;animation:none;opacity:0;pointer-events:none}
.venue[data-performing="true"] .signal{opacity:.8}
/* Short, staggered conversation gestures, with no musical symbols. */
.signal{z-index:50;overflow:visible;top:0}
.chat-bubble{position:absolute;left:calc(var(--bubble-index)*30%);top:1px;width:17px;height:14px;opacity:0;animation:chat-pop 6.7s ease-out infinite;animation-delay:calc(var(--bubble-index)*-2.1s)}
.chat-bubble svg{display:block;width:100%;height:100%;overflow:visible}
.chat-bubble path{fill:#f0dba8;stroke:#51472f;stroke-width:1.25;stroke-linejoin:round}
@keyframes chat-pop{0%,12%,48%,100%{opacity:0;transform:translateY(3px) scale(.8)}18%,38%{opacity:.75;transform:translateY(0) scale(1)}}
.venue[data-phase="playing"] .person:nth-child(4n),.venue[data-phase="continuous"] .person:nth-child(4n){animation-name:react;animation-duration:calc(var(--speed)*2)}
@keyframes react{0%,35%,65%,100%{transform:translate(0,0)}43%{transform:translate(1px,-2px) rotate(5deg)}53%{transform:translate(-1px,-1px) rotate(-4deg)}}
.floor[data-floor="1"] .signal{display:none}
.venue[data-phase="lobby"] .person{animation-name:occupied;animation-duration:calc(var(--speed)*1.7)}
dialog .credits{display:grid;grid-template-columns:max-content 1fr;gap:6px 12px;font-size:12px;line-height:1.9;margin:22px 0}dialog .credits dt,dialog .credits dd{margin:0}dialog .credits dt{opacity:.7}
@media(prefers-reduced-motion:reduce){.chat-bubble{opacity:.55}}

/* Hide immediately at the end boundary, including already-running bubble animations. */
.venue:not([data-performing="true"]) .signal{visibility:hidden;opacity:0;transition:none}
.venue[data-performing="true"] .person:nth-child(4n){animation-name:study;animation-duration:calc(var(--speed)*2)}
@keyframes study{0%,30%,85%,100%{transform:translate(0,0)}45%,65%{transform:translate(2px,1px) rotate(7deg)}}
.puzzle-paper{display:none;position:absolute;left:3px;top:3px;width:5px;height:4px;background:#eadbb5;border:1px solid #655e45;transform:rotate(-12deg)}
.venue[data-performing="true"] .person.visible:nth-child(4n) .puzzle-paper{display:block}
.venue:not([data-performing="true"]) .person{animation-name:occupied}
.text-link{background:none;border:0;color:inherit;text-decoration:underline;text-underline-offset:4px;padding:8px 0;font:inherit;font-size:12px;cursor:pointer}
footer{justify-content:space-between;gap:20px}
#credit-lexer{font:inherit;color:inherit;background:none;border:0;padding:0;touch-action:manipulation}
.dialog-close{position:absolute;right:15px;top:10px;background:none;border:0;font-size:26px;color:inherit}
dialog{max-height:85svh;overflow:auto}dialog .explanation-note{margin-top:2em}
.dialog-actions{display:flex;gap:16px;justify-content:flex-end}.dialog-actions button{padding:10px 20px;border:1px solid #8a8982;border-radius:4px;background:transparent;color:inherit}
#statistics-content{white-space:pre-line}

/* Approved cropped upper-floor layout. The lower floors retain their event logic. */
:root{--floor-height:64px}
.scene{height:calc(6.5 * var(--floor-height) + 16px);overflow:hidden;isolation:isolate;width:100%}
.building-wrap{position:absolute;bottom:8px;margin-left:30px;width:min(300px,calc(100% - 65px))}
.floor{height:var(--floor-height)}
.upper-floors{border-left:5px solid var(--shell);border-right:5px solid var(--shell);background:var(--room)}
.floor-label{top:calc(var(--floor-height) / 2 - 6px)}
.upper-floors .floor[data-floor="6"] .stairs{display:none}
.ground-line{top:auto;bottom:calc(var(--floor-height) + 16px);left:0;right:0;z-index:0}
.ground-line::after{height:calc(var(--floor-height) + 16px)}
main{min-height:0;padding-top:0;gap:7vw}.question{padding-top:28px}header{height:90px;position:relative;z-index:2}
@media(max-width:700px){:root{--floor-height:clamp(46px,7.3svh,60px)}header{height:78px}main{gap:0;padding:0 24px 12px}.scene{max-width:360px}.building-wrap{width:min(265px,calc(100% - 54px));margin-left:28px}.question{max-width:310px;padding-top:26px}.floor-label{right:calc(100% + 12px)}}

/* Keep the sixth-floor label readable within the narrower visible strip. */
.upper-floors .floor[data-floor="6"] .floor-label{top:auto;bottom:9px}

/* Optional hints retain the quiet dialog style; the divider is not interactive. */
#hint{width:min(580px,92vw);padding:32px clamp(20px,5vw,40px);overscroll-behavior:contain}
#hint h2{margin:8px 36px 24px 0;font-size:20px;letter-spacing:.12em}
#hint .hint-item{border-bottom:1px solid #383f3e30}
#hint summary{cursor:pointer;min-height:48px;padding:14px 2px;font-size:16px;line-height:1.65;overflow-wrap:anywhere}
#hint summary:focus-visible{outline:2px solid #383f3e;outline-offset:3px}
#hint .hint-body{padding:0 4px 16px}
#hint p,#hint li{font-size:16px;line-height:1.9;overflow-wrap:anywhere}
#hint p{margin:0 0 1em}#hint p:last-child{margin-bottom:0}
#hint ul{padding-left:1.4em;margin:0 0 1em}
#hint .hint-section-label{margin:26px 0 6px;font-size:14px;color:#5c6260}
#hint .hint-divider{display:flex;align-items:center;gap:12px;margin:30px 0 12px;font-size:14px;line-height:1.7;color:#5c6260}
#hint .hint-divider::before,#hint .hint-divider::after{content:"";flex:1;border-top:1px solid #383f3e50}
#hint .hint-divider span{flex-shrink:0}
#hint .hint-more{margin-top:18px;padding:0 12px;border-left:2px solid #383f3e40}
#hint .hint-more summary{font-size:14px;text-decoration:underline;text-underline-offset:4px}