*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #14061f;
  color: #fff;
  font-family: "Arial Black", "Helvetica Neue", Helvetica, system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
body {
  background:
    radial-gradient(ellipse 80% 60% at 50% 42%, #4a1680 0%, #22093a 55%, #0d0415 100%);
}
.rays {
  position: fixed; inset: -50vmax; pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(255,255,255,0.045) 0deg 9deg, rgba(255,255,255,0) 9deg 18deg);
  animation: spin 80s linear infinite;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 55%);
          mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 55%);
}
@keyframes spin { to { transform: rotate(360deg); } }
#stage {
  position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh;
  display: block; touch-action: none; cursor: pointer;
}
.wordmark {
  position: fixed; left: 0; right: 0;
  bottom: max(4vh, env(safe-area-inset-bottom));
  margin: 0; text-align: center; pointer-events: none;
  font-weight: 900; letter-spacing: -0.04em; line-height: 0.9;
  font-size: clamp(64px, 15vw, 210px);
  color: #ffe14d;
  text-shadow: 0 0.06em 0 #ff3d7f, 0 0.12em 0 #2a0b45, 0 0.2em 0.35em rgba(0,0,0,0.5);
  user-select: none;
}
.wordmark span { color: #fff; }
.noscript { position: fixed; inset: 0; display: grid; place-items: center; font-size: 15vw; margin: 0; }
@media (max-aspect-ratio: 3/4) {
  .wordmark { font-size: clamp(56px, 21vw, 160px); bottom: max(7vh, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .rays { animation-duration: 400s; }
}