:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #000; color: #d5b18b; }
* { box-sizing: border-box; }
body { margin: 0; }
main { position: relative; height: 100vh; height: 100dvh; overflow: hidden; }
video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; pointer-events: none; }
video.active { opacity: 1; }
#coming-soon { object-fit: cover; object-position: center; }
.coming-soon-copy { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; padding: 32px 24px 100px; text-align: center; pointer-events: none; background: radial-gradient(ellipse at center, #21150ed9, #100b0666 45%, transparent 78%); }
.announcement { width: min(100%, 960px); animation: reveal 1.2s ease-out both; }
.announcement-label { margin: 0 0 28px; font-size: clamp(10px, 1.2vw, 13px); font-weight: 500; letter-spacing: .38em; color: #bd936d; text-shadow: 0 2px 16px #160d08; }
h1 { margin: 0; font-size: clamp(44px, 8vw, 116px); font-weight: 600; line-height: 1.08; letter-spacing: -.055em; text-shadow: 0 4px 40px #0009; }
h1 span { display: block; }
h1 span:first-child { color: #c69563; background: linear-gradient(135deg, #e2c09a 10%, #c69563 48%, #a97448 90%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; filter: drop-shadow(0 4px 20px #160c08aa); }
.announcement-subtitle { margin-top: 12px; font-size: .58em; font-weight: 300; letter-spacing: -.025em; color: #c5a387; }
.announcement-line { display: block; width: 64px; height: 1px; margin: 36px auto 0; background: linear-gradient(90deg, transparent, #b78352, transparent); }
@keyframes reveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .announcement { animation: none; } }
.controls { position: absolute; z-index: 2; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); display: flex; gap: 10px; }
button { border: 1px solid #b7835266; border-radius: 999px; padding: 10px 18px; background: #21160ed9; color: #d5b18b; font: inherit; cursor: pointer; }
button:hover { background: #3b291c; }
button:focus-visible { outline: 2px solid #d5b18b; outline-offset: 4px; }
[hidden] { display: none !important; }
#status { position: absolute; z-index: 2; top: 16px; left: 20px; right: 20px; text-align: center; }
noscript { position: absolute; inset: 40% 20px auto; text-align: center; }