:root { color-scheme: dark; --preview-width: 390px; --scene-height: 100svh; --scroll-screens: 5.4; }
* { box-sizing: border-box; }
html { margin: 0; background: #090e17; scroll-behavior: auto; }
body { margin: 0; color: #dce1e7; font-family: Arial, sans-serif; }
#journey { width: 100%; margin: auto; }
#stage { position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 100svh; overflow: hidden; isolation: isolate; background: #142238; }
#scene, #fallback, .fallback-sky { position: absolute; inset: 0; width: 100%; height: 100%; }
#scene { display: block; opacity: 0; }
.scene-ready #scene { opacity: 1; }
.scene-ready #fallback { visibility: hidden; }
.fallback-sky { background: radial-gradient(ellipse at 30% 110%,#44516a,transparent 80%),linear-gradient(#101a2b,#273a55); }
.fallback-portrait { position: absolute; top: 13.5%; left: 50%; transform: translateX(-50%); width: min(79%, 37.6svh); aspect-ratio: 4/5; object-fit: cover; border: 1px solid #758092; box-shadow: 0 8px 30px #0003; }
.fallback-copy { position: absolute; top: 67%; width: 100%; text-align: center; }
h1 { margin: 0; font: 400 clamp(46px, 14vw, 62px)/.98 Georgia,'Times New Roman',serif; letter-spacing: -.04em; }
h1 em { font-weight: 400; }
.fallback-copy p { margin-top: 22px; color: #9daabd; font-size: 9px; letter-spacing: .19em; text-transform: uppercase; }
.scroll-cue { position: absolute; bottom: max(24px,env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; color: #a3b0c2; }
.scroll-cue span { font-size: 8px; letter-spacing: .28em; white-space: nowrap; }
.scroll-cue i { width: 1px; height: 22px; background: linear-gradient(#9cabbf,transparent); }
#scroll-track { height: calc(var(--scene-height) * var(--scroll-screens)); }
#notice { position: absolute; bottom: 15px; left: 20px; right: 20px; z-index: 4; padding: 12px; background: #111c2aee; color: #dce1e7; font-size: 12px; line-height: 1.5; text-align: center; border-radius: 4px; }
.static-mode #scroll-track { height: 100svh; }
.static-mode .scroll-cue { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width:600px) {
 #stage { width: var(--preview-width); top: 16px; height: min(780px,calc(100dvh - 32px)); border-radius: 16px; box-shadow: 0 22px 90px #0005; }
 #journey { width: var(--preview-width); }
 h1 { font-size: 52px; }
}
@media (prefers-reduced-motion:reduce) {
 #scene,.scroll-cue { display:none; }
 #scroll-track { height:100svh; }
}