:root {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f8fafc;
  background: #050608;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
.stage { position: relative; width: 100vw; height: 100vh; background: #000; }
.player, .player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.standby-mode .player { visibility: hidden; }
.standby {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 7vh 6vw;
  background: radial-gradient(ellipse 65% 70% at 50% 38%, #202112 0%, #0c0d0c 58%, #050608 100%);
}
.stage:not(.standby-mode) .standby { display: none; }
.brand { display: flex; align-items: center; gap: min(1.3vw, 16px); color: #f5f6f7; font-size: clamp(2rem, 6vw, 5.8rem); font-weight: 900; letter-spacing: -.06em; line-height: 1; }
.brand strong { color: #ffd21f; }
.bolt { width: clamp(32px, 4.5vw, 70px); height: auto; color: #ffd21f; filter: drop-shadow(0 0 15px #ffc10755); }
.line { width: min(230px, 34vw); height: 3px; margin-top: 30px; background: linear-gradient(90deg, transparent, #ffce19, transparent); }
.eyebrow { margin: 20px 0 6px; font-size: clamp(.7rem, 1.15vw, 1rem); letter-spacing: .32em; font-weight: 750; color: #ffd21f; }
h1 { font-weight: 650; margin: 12px 0 6px; font-size: clamp(1rem, 2.4vw, 2.2rem); }
.detail { max-width: 640px; color: #9ba0a9; font-size: clamp(.8rem, 1.4vw, 1.1rem); line-height: 1.5; margin: 8px 0; }
#start-button {
  margin-top: 24px; padding: 14px 25px; cursor: pointer; border: 0;
  border-radius: 10px; background: #ffd21f; color: #141414;
  font-size: 1rem; font-weight: 800;
}
#start-button:hover { background: #ffe063; }
#start-button:focus-visible { outline: 3px solid white; outline-offset: 4px; }
#start-button[hidden] { display: none; }
.foot { position: absolute; bottom: 4vh; font-size: clamp(.6rem, .85vw, .9rem); font-weight: 750; letter-spacing: .19em; color: #717680; }
@media (prefers-reduced-motion: no-preference) {
  .bolt { animation: breathe 3.5s ease-in-out infinite; }
  @keyframes breathe { 50% { filter: drop-shadow(0 0 25px #ffc10788); } }
}
