/* Public character archive. The production guide remains a separate page. */
.world-page{--oxide:#a6342b;overflow-x:hidden}.world-page header{position:relative;border-bottom:1px solid #efefe64a}.world-grid{display:grid;grid-template-columns:1.05fr 1fr 1.05fr;max-width:2200px;margin:auto;border-left:1px solid #efefe64a}.world-grid>section{position:relative;overflow:hidden;border-right:1px solid #efefe64a;border-bottom:1px solid #efefe64a}.archive-label{display:block;font:10px/1.4 'IBM Plex Mono',monospace;letter-spacing:.18em;color:#aaa99f}.world-title{grid-column:span 2;min-height:650px;padding:28px 3vw;display:flex;flex-direction:column;justify-content:space-between}.world-title h1{position:relative;inset:auto;width:auto;margin:65px 0;font:italic 800 clamp(68px,10vw,180px)/.86 'Barlow Condensed',Impact,sans-serif;letter-spacing:-.045em;mix-blend-mode:normal}.register-type{position:relative;color:var(--paper);text-shadow:-3px 0 #a6342b,3px 0 var(--green)}.register-type:before,.register-type:after{content:attr(data-ink);text-shadow:none;white-space:pre-line;position:absolute;inset:0;color:transparent;-webkit-text-stroke:1px var(--green);pointer-events:none;transform:translateX(var(--register,4px));opacity:.85}.register-type:before{-webkit-text-stroke-color:var(--oxide);transform:translateX(calc(-1*var(--register,4px)))}.quiet-link{font-size:24px;width:50px}.mask-panel{min-height:650px;background:#060907}.mask-panel>.archive-label{position:absolute;top:28px;left:24px;z-index:1}.mask-panel>img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}.mask-secret{position:absolute;bottom:24px;left:24px;right:24px}.mask-secret summary{list-style:none;cursor:pointer;width:40px}.mask-secret summary::-webkit-details-marker{display:none}.mask-secret summary img{width:30px}.mask-secret p{font-size:12px;color:var(--green);background:#090b09d9;padding:12px;width:max-content}.note-panel{padding:26px 24px;min-height:350px;display:flex;flex-direction:column;justify-content:space-between}.note-panel .steel-statement{position:relative;padding:25px 0 25px 20px;margin:auto 0}.note-panel .bio-lead{font:400 clamp(16px,1.5vw,24px)/1.9 'Courier New',monospace;letter-spacing:-.04em;white-space:nowrap}.note-panel .bio-lead span:last-child{margin-left:9%;color:var(--paper)}.material-panel{grid-column:span 2;min-height:350px}.material-panel .archive-label{position:absolute;top:26px;left:24px;z-index:1}.material-panel img{width:100%;height:100%;object-fit:cover;display:block}.object-panel{grid-column:1/-1;background:#070a08}.object-heading{display:flex;justify-content:space-between;position:absolute;top:28px;left:3vw;right:3vw;z-index:1}.object-panel img{display:block;width:100%;max-height:1000px;object-fit:contain}.object-panel h2{position:absolute;bottom:0;left:3vw;font:italic 800 clamp(56px,12vw,190px)/.9 'Barlow Condensed',Impact,sans-serif;letter-spacing:-.03em;margin:0 0 3vw}.world-footer{display:flex;justify-content:space-between;padding:35px 3vw;font-size:10px;letter-spacing:.1em}.world-page summary:focus-visible{outline:2px solid var(--green);outline-offset:8px}
@media(max-width:800px){.world-grid{grid-template-columns:1fr 1fr}.world-title{grid-column:1/-1;min-height:410px;padding:24px}.world-title h1{font-size:19vw;margin:50px 0}.mask-panel{grid-column:1/-1;min-height:0;aspect-ratio:1}.note-panel{grid-column:1/-1;min-height:270px}.note-panel .bio-lead{font-size:clamp(18px,4.4vw,26px)}.material-panel{grid-column:1/-1;min-height:0;aspect-ratio:16/9}.object-heading{top:18px}.object-panel{padding:65px 0 75px}.world-footer{padding:28px 20px;font-size:9px}}
@media(prefers-reduced-motion:reduce){.register-type:before,.register-type:after{transform:translateX(0)}}

/* Genuine GLB turntable, with visitor-initiated music. */
.turntable-stage{position:relative;height:85svh;min-height:520px;max-height:1000px;background:radial-gradient(ellipse at 50% 85%,rgba(168,191,104,calc(.06 + var(--beat,0)*.09)),transparent 48%)}
model-viewer{display:block;width:100%;height:100%;--poster-color:#070a08;--progress-bar-color:var(--green);--progress-bar-height:2px;outline-offset:-8px}
.object-panel .turntable-stage img{height:100%;width:100%;object-fit:contain}
.object-panel h2{z-index:1;pointer-events:none;bottom:85px;font-size:clamp(50px,8vw,120px)}
.turntable-controls{position:relative;z-index:2;display:flex;align-items:center;flex-wrap:wrap;gap:24px;border-top:1px solid #efefe633;padding:24px 3vw;min-height:85px}
.turntable-controls button{background:none;border:0;border-bottom:1px solid var(--green);padding:8px 0;font:11px 'IBM Plex Mono',monospace;cursor:pointer;letter-spacing:.04em}
.turntable-controls button:disabled{color:var(--muted);cursor:default;border-color:var(--muted)}
#figure-status{font-size:9px;color:var(--muted);margin-left:auto;letter-spacing:.12em}
@media(max-width:800px){.object-panel{padding:60px 0 0}.turntable-stage{height:65svh;min-height:430px}.object-panel h2{bottom:100px;left:20px;font-size:14vw}.turntable-controls{padding:18px 20px;gap:16px}.turntable-controls button{font-size:10px}#figure-status{flex-basis:100%;margin:0}}

/* Street atmosphere: layered steam and pushed-film texture, not a video download. */
.turntable-stage{isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 76% 48%,#26342180,transparent 49%),radial-gradient(ellipse at 15% 75%,#50201855,transparent 43%),linear-gradient(100deg,#040705,#111b15 50%,#040604)}
.turntable-stage:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 14.8%,#01040388 15% 15.4%,transparent 15.8% 30%),linear-gradient(180deg,#010201aa,transparent 25%,transparent 75%,#020403);opacity:.7}
.turntable-stage:after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;box-shadow:inset 0 0 130px 35px #010302a0;background:linear-gradient(180deg,#02040355,transparent 25%,transparent 65%,#02040366)}
.turntable-stage model-viewer{position:relative;z-index:2;filter:contrast(1.18) saturate(.72) brightness(.9)}
.street-fog{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:.85}
.street-steam{position:absolute;inset:42% -25% -30%;z-index:3;pointer-events:none;opacity:.38;background:radial-gradient(ellipse at 25% 65%,#bac8b43d,transparent 38%),radial-gradient(ellipse at 78% 45%,#72856c66,transparent 37%);filter:blur(28px);transform:translateX(-4%);animation:street-drift 19s ease-in-out infinite alternate;mask-image:linear-gradient(transparent,#000 55%)}
.street-grain{position:absolute;inset:0;z-index:4;pointer-events:none;background-image:url('assets/street-grain.svg');opacity:.16;mix-blend-mode:soft-light}
.object-panel h2,.object-heading{z-index:6}.turntable-controls{z-index:7}
@keyframes street-drift{to{transform:translate(5%,-7%) scale(1.12);opacity:.55}}
.atmosphere-paused .street-steam{animation-play-state:paused}
@media(max-width:800px){.turntable-stage:after{box-shadow:inset 0 0 70px 15px #01030299}.street-steam{filter:blur(19px)}.turntable-controls{min-height:125px}.object-panel h2{bottom:140px}}
@media(prefers-reduced-motion:reduce){.street-steam{animation:none}}

/* A typed fragment in the otherwise silent file. */
.note-panel{background:radial-gradient(ellipse at 78% 82%,#1c2a1c42,transparent 55%),#090c09}
.note-panel .steel-statement{padding-left:0;margin:auto 0}
.note-panel .bio-lead{font-size:clamp(31px,4.5vw,72px);line-height:1.05;letter-spacing:-.075em;white-space:normal;color:var(--paper)}
.note-panel .bio-lead span{position:relative;display:inline-block}
.note-panel .bio-lead span:last-child{margin-left:0}
.note-panel.motion-ready .bio-lead span{clip-path:inset(0 100% 0 0)}
.note-panel.motion-ready.is-visible .bio-lead span{animation:uncover-statement .85s steps(14,end) forwards,statement-register 1.15s ease-out forwards}
.missing-seconds{align-self:flex-end;font:10px/1.5 'IBM Plex Mono',monospace;letter-spacing:.16em;color:var(--muted)}
.missing-seconds summary{list-style:none;cursor:pointer;padding:10px 0 8px 14px;border-bottom:1px solid #e8e8d842}
.missing-seconds summary::-webkit-details-marker{display:none}
.missing-seconds summary span{color:var(--green);margin-left:7px}
.missing-seconds[open] summary span{display:inline-block;transform:rotate(45deg)}
.missing-seconds p{margin:12px 0 0;text-align:right;color:var(--paper);letter-spacing:.02em}
@keyframes uncover-statement{to{clip-path:inset(0 0 0 0)}}
@keyframes statement-register{0%,55%{text-shadow:-3px 0 #a6342b,3px 0 #82a65a}100%{text-shadow:none}}

/* Steam rises at different depths while the face stays clear. */
.turntable-stage{background:radial-gradient(ellipse at 52% 85%,rgba(133,163,111,calc(.06 + var(--beat,0)*.16)),transparent 44%),radial-gradient(ellipse at 76% 48%,#26342180,transparent 49%),radial-gradient(ellipse at 15% 75%,#50201855,transparent 43%),linear-gradient(100deg,#040705,#111b15 50%,#040604)}
.street-fog{opacity:1}
.street-steam{inset:33% -25% -24%;opacity:.62;background:radial-gradient(ellipse at 20% 69%,#b6c7ad8c,transparent 35%),radial-gradient(ellipse at 77% 62%,#899f8d8a,transparent 32%),radial-gradient(ellipse at 52% 91%,#a7baa47d,transparent 40%);filter:blur(23px);animation-duration:24s}
.street-steam-near{position:absolute;inset:58% -18% -15%;z-index:3;pointer-events:none;opacity:.78;filter:blur(15px);background:radial-gradient(ellipse at 23% 66%,#b0c2ac9c,transparent 31%),radial-gradient(ellipse at 65% 71%,#c0c8b28c,transparent 39%),radial-gradient(ellipse at 88% 65%,#748f7899,transparent 29%);mask-image:linear-gradient(transparent 0%,#000 39%);animation:near-steam 14s ease-in-out infinite alternate}
.street-steam-near:before,.street-steam-near:after{content:"";position:absolute;width:22%;height:95%;bottom:-15%;border-radius:50%;background:radial-gradient(ellipse at 50% 65%,#adbdad88,transparent 64%);filter:blur(24px);transform:rotate(-12deg);animation:steam-wisp 11s ease-in-out infinite alternate}
.street-steam-near:before{left:19%}
.street-steam-near:after{right:20%;animation-delay:-6s;animation-duration:15s;transform:rotate(14deg)}
@keyframes near-steam{to{transform:translate(-3%,-8%) scale(1.1);opacity:.75}}
@keyframes steam-wisp{to{transform:translate(24%,-25%) rotate(6deg);opacity:.35}}
.atmosphere-paused .street-steam-near,.atmosphere-paused .street-steam-near:before,.atmosphere-paused .street-steam-near:after{animation-play-state:paused}
@media(max-width:800px){.note-panel .bio-lead{font-size:clamp(38px,8vw,62px)}.street-steam-near{filter:blur(14px)}}
@media(prefers-reduced-motion:reduce){.note-panel.motion-ready .bio-lead span{clip-path:none}.note-panel.motion-ready.is-visible .bio-lead span{animation:none}.street-steam-near,.street-steam-near:before,.street-steam-near:after{animation:none}}

/* Launch review: legible archive notes and comfortable touch controls. */
.archive-label{font-size:11px;letter-spacing:.15em}
.mask-panel>.archive-label,.material-panel .archive-label{background:#050805bd;padding:5px 7px}
.quiet-link{display:inline-flex;align-items:center;min-height:44px}
.mask-secret summary{display:grid;place-items:center;width:44px;height:44px}
.missing-seconds{font-size:11px}
.missing-seconds summary{display:flex;align-items:center;min-height:44px}
.turntable-controls button{min-height:44px}
#figure-status{font-size:11px}
.world-footer a{display:inline-flex;align-items:center;min-height:44px}
@media(max-width:800px){.turntable-controls button{font-size:11px}.world-footer{font-size:11px}}

/* Optional written lyrics for the figure's audio. */
.lyrics-dialog{width:min(720px,calc(100vw - 30px));max-height:min(86svh,900px);padding:clamp(24px,4vw,44px);background:#090c09;color:var(--paper);border:1px solid #a8bf6866;box-shadow:0 30px 100px #000b}
.lyrics-dialog::backdrop{background:#000d;backdrop-filter:blur(8px)}
.lyrics-dialog #lyrics-close{display:block;margin:0 0 25px auto;min-height:44px;background:none;border:0;cursor:pointer;font:11px 'IBM Plex Mono',monospace;letter-spacing:.12em}
.lyrics-dialog h2{position:static;margin:0;font:italic 800 clamp(44px,8vw,80px)/.9 'Barlow Condensed',Impact,sans-serif;letter-spacing:-.025em}
.lyrics-intro{margin:18px 0 35px;color:var(--muted);font:11px 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase}
.lyrics-body{font:13px/1.8 'IBM Plex Mono',monospace}
.lyrics-body h3{margin:30px 0 8px;color:var(--green);font-size:11px;font-weight:400;letter-spacing:.17em}
.lyrics-body p{margin:0 0 16px}
.lyrics-dialog #lyrics-close:focus-visible{outline:2px solid var(--green);outline-offset:4px}
@media(max-width:700px){.lyrics-dialog{max-height:90svh}.lyrics-body{font-size:13px;line-height:1.7}}