/* The geometry owns the picture; the interface stays along its edges. */
#voyageWorld{position:fixed;inset:0;z-index:2;width:100vw;height:100dvh;pointer-events:none}
body.voyage-3d #debris,body.voyage-3d #cabin{display:none!important}
body.voyage-3d .film{opacity:.025}
body.voyage-3d .vignette{opacity:.3;background:radial-gradient(ellipse at 50% 48%,transparent 45%,#0009)}
.header{padding:18px 24px;min-height:90px}
.brand h1{font-size:36px;margin-top:7px}.brand .eyebrow{font-size:9px;letter-spacing:.17em}.brand p{font-size:11px;opacity:.8}
.header-actions{padding-top:2px;gap:6px}.header-actions button{min-height:36px;padding:8px 12px;font-size:11px}
.frame-controls{top:auto!important;bottom:102px;left:24px;transform:none;padding:5px;z-index:24;max-width:calc(100vw - 48px);border-radius:10px;background:#080a10c9}
.frame-controls button{padding:9px 12px;border-radius:6px;min-height:34px;font-size:10px}
.camera-actions{bottom:102px;right:24px;background:#080a10cf;max-width:calc(100vw - 48px);padding:5px}
.camera-actions button{min-height:34px;padding:7px 10px;font-size:10px}.camera-actions output{font-size:9px}
.status{bottom:173px;left:24px;max-width:355px;padding:10px 13px;background:linear-gradient(110deg,#05060bc9,#05060b55);border-left:1px solid #ffc17e77;backdrop-filter:blur(9px)}
.status h2{font-size:27px}.status p{font-size:11px;line-height:1.6}.status .fraction{font-size:9px}
.transport{width:calc(100vw - 48px);max-width:1200px;padding:8px 12px;bottom:20px;background:#07090de8;border-color:#e9ae7e45}
.transport button{min-height:36px;padding:8px 14px}.transport .pace{padding:8px}.transport .clock{font-size:11px}
.footnote{bottom:80px;right:auto;left:26px;max-width:none;font-size:9px;opacity:.65}
.panel{top:108px;bottom:165px;width:320px;background:#080b12eb;border-color:#afc5ce38}
.audio-volume{display:flex;align-items:center;gap:10px;font-size:11px;color:#c0c8ce;margin:14px 0 4px}.audio-volume input{min-width:60px;flex:1;accent-color:var(--gold)}
.wheel-tip{background:#080c13e8;border-radius:12px}.wheel-tip strong{font-size:27px}
.welcome{width:min(510px,calc(100vw - 32px));padding:30px;background:#080c13e8;border-color:#deb78d59;box-shadow:0 35px 100px #0009}
.welcome h2{font-size:clamp(45px,5vw,66px);line-height:.97}.welcome p{font-size:13px;line-height:1.8}.welcome button{min-height:48px}
body.ui-hidden .frame-controls,body.ui-hidden .camera-actions,body.ui-hidden .transport,body.ui-hidden .wheel-tip{display:none!important}
#space:focus-visible{outline:1px solid #ffbf7e80;outline-offset:-4px}
@media(min-width:701px) and (max-width:1100px){
 .header{padding:12px 16px}.brand h1{font-size:31px}.header-actions button{font-size:10px;padding:7px 9px}
 .frame-controls{left:16px;bottom:102px}.frame-controls button{padding:7px 9px;font-size:9px}
 .camera-actions{right:16px;bottom:149px}.status{left:16px;bottom:167px;max-width:310px}.status h2{font-size:25px}
}
@media(max-width:700px){
 .header{height:68px;min-height:68px;padding:10px 12px}.brand h1{font-size:25px!important;margin-top:7px}.brand a{font-size:8px!important;letter-spacing:.035em!important}
 .header-actions{gap:4px;padding-top:0}.header-actions button{min-height:36px;padding:6px 8px;font-size:10px}
 #musicBtn{font-size:0;max-width:36px;width:36px}#musicBtn::after{content:'♫';font-size:18px}
 #fullBtn{display:block!important;font-size:0;max-width:36px;width:36px}#fullBtn::after{content:'⛶';font-size:19px}
 #settingsBtn{font-size:10px;max-width:76px!important}#hideBtn,#guideBtn{display:none}
 .frame-controls{top:auto!important;bottom:144px;left:8px;right:8px;padding:4px;max-width:none;justify-content:space-between}
 .frame-controls button{font-size:9px;padding:7px 6px;min-height:32px;flex:1}
 .camera-actions{left:8px;right:8px;bottom:92px;max-width:none;padding:4px;gap:4px}
 .camera-actions button{min-height:36px;flex:0 0 auto;padding:6px 10px;font-size:10px}
 .camera-actions output{font-size:8px;max-width:94px;white-space:normal;padding:0 4px;margin-left:auto}
 .transport{bottom:8px;left:8px;right:8px;width:auto;max-width:none;padding:8px;gap:5px}
 .transport button{min-height:36px!important;padding:6px 9px}.transport #play{min-width:58px}.transport .pace{font-size:9px;max-width:85px;padding:7px 4px}
 .transport .clock{font-size:9px;min-width:34px}.transport #timeline{min-width:30px}
 .status{left:12px;bottom:200px;max-width:min(300px,calc(100vw - 24px));padding:8px 11px}.status h2{font-size:23px}.status p{font-size:10px;line-height:1.5}.status .fraction{display:none}
 .panel{top:auto!important;bottom:143px!important;max-height:calc(100dvh - 220px)!important;left:8px;right:8px;width:auto;z-index:30}
 .welcome{padding:25px 22px}.welcome h2{font-size:49px}.welcome .eyebrow{font-size:9px}.welcome p{font-size:12px}
 .wheel-tip{top:43%;max-width:290px}.wheel-tip strong{font-size:25px}.wheel-tip span:last-child{font-size:11px}
}
@media(max-height:520px) and (min-width:620px){
 .brand .eyebrow,.brand p{display:none}.brand h1{font-size:25px}.header{padding:9px 14px}
 .status{left:14px;top:80px;bottom:auto;max-width:250px;padding:7px 10px}.status h2{font-size:22px}.status p{font-size:9px}.status .fraction{display:none}
 .transport{bottom:8px;padding:5px 9px;width:calc(100vw - 28px)}.transport button{min-height:30px;padding:5px 10px}.transport .pace{padding:5px}
 .frame-controls{left:14px;bottom:65px}.frame-controls button{padding:6px 8px;min-height:28px;font-size:9px}
 .camera-actions{right:14px;bottom:65px;left:auto}.camera-actions button{min-height:28px;padding:5px 8px}.camera-actions output{font-size:8px}
 .footnote{display:none}.panel{top:65px!important;bottom:110px!important;max-height:calc(100dvh - 180px)!important}
 .welcome{padding:18px 25px;width:460px}.welcome h2{font-size:40px;margin:10px 0}.welcome p{font-size:11px;line-height:1.5;margin-bottom:12px}.welcome button{min-height:38px;padding:10px 20px}
}