:root { color-scheme: dark; --ink:#07101d; --night:#101a2b; --text:#f8fafc; --muted:#aebbd0; --coral:#ff9274; --mint:#67ddd4; }
html, body { width:100%; height:100%; margin:0; overflow:hidden; background:var(--ink); color:var(--text); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { background:radial-gradient(ellipse 58% 46% at 50% 44%, rgba(37,55,87,.75), transparent 72%), linear-gradient(180deg,#0b1626 0%,#111d30 55%,#070e18 100%); }
body::before, body::after { content:""; position:fixed; inset:auto -6vw -2vh; height:47vh; pointer-events:none; }
body::before { background:#07101c; clip-path:polygon(0 80%,7% 57%,13% 69%,21% 34%,30% 62%,38% 49%,47% 74%,57% 45%,66% 64%,76% 31%,84% 55%,92% 27%,100% 62%,100% 100%,0 100%); opacity:.91; }
body::after { height:28vh; background:linear-gradient(180deg,rgba(75,97,128,.15),rgba(4,10,18,.85)); clip-path:polygon(0 30%,12% 16%,25% 37%,39% 15%,53% 36%,67% 10%,80% 33%,92% 8%,100% 24%,100% 100%,0 100%); opacity:.52; filter:blur(1px); }
cast-media-player { position:fixed; inset:0; width:100%; height:100%; z-index:0; }
main { position:fixed; inset:0; z-index:1; pointer-events:none; display:flex; flex-direction:column; align-items:center; justify-content:center; box-sizing:border-box; padding:7vh 9vw 12vh; text-align:center; opacity:1; transition:opacity .48s ease, visibility .48s ease; }
main[hidden] { display:flex; visibility:hidden; opacity:0; }
.atmosphere { position:absolute; inset:0; overflow:hidden; }
.atmosphere::before { content:""; position:absolute; width:min(58vw,880px); height:min(58vw,880px); top:-41vw; left:50%; transform:translateX(-50%); border-radius:50%; background:radial-gradient(circle, rgba(154,183,220,.13), rgba(154,183,220,.035) 35%, transparent 69%); filter:blur(4px); }
.identity, .message { position:relative; z-index:1; }
.identity { display:flex; flex-direction:column; align-items:center; margin-bottom:clamp(30px,5vh,62px); }
.brand-mark { display:block; width:clamp(96px,10.3vw,158px); height:auto; margin-bottom:clamp(7px,1.1vh,14px); filter:drop-shadow(0 12px 32px rgba(0,0,0,.28)); }
.wordmark { font-weight:760; font-size:clamp(38px,4.3vw,66px); line-height:.96; letter-spacing:-.055em; text-shadow:0 4px 18px rgba(0,0,0,.28); }
.wordmark span { color:var(--coral); }
.message { display:flex; flex-direction:column; align-items:center; }
h1 { max-width:min(82vw,1050px); margin:0; font-size:clamp(34px,4vw,62px); font-weight:680; line-height:1.1; letter-spacing:-.042em; text-wrap:balance; text-shadow:0 3px 18px rgba(0,0,0,.32); }
p { margin:clamp(11px,1.5vh,19px) 0 0; color:var(--muted); font-size:clamp(19px,2vw,31px); font-weight:440; line-height:1.35; letter-spacing:-.018em; text-shadow:0 2px 12px rgba(0,0,0,.42); }
.track { width:min(30vw,480px); min-width:230px; height:5px; margin-top:clamp(28px,4vh,48px); background:rgba(173,192,219,.22); border-radius:999px; overflow:hidden; box-shadow:0 1px 0 rgba(255,255,255,.08); }
#progress { width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--coral),#ffd1ad 46%,var(--mint)); box-shadow:0 0 16px rgba(105,226,215,.5); transition:width .25s linear; }
@media (max-width:700px) { main { padding:8vh 7vw 12vh; } .identity { margin-bottom:34px; } .track { width:52vw; min-width:180px; } }
@media (prefers-reduced-motion:reduce) { main, #progress { transition:none; } }