:root {
  color-scheme: dark;
  --black: #000;
  --graphite: #161c22;
  --ice-gray: #636d76;
  --ice-white: #dadada;
  background: var(--black);
  color: var(--ice-white);
  font-family: "Segoe UI", system-ui, sans-serif;
}

body { margin: 0; }

.hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background: radial-gradient(ellipse at center, #090c10, var(--black) 70%);
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  inset: -20%;
  pointer-events: none;
  will-change: transform;
}

.hero::before {
  background:
    radial-gradient(ellipse 39% 8% at 29% 50%, #636d7663, transparent 100%),
    radial-gradient(ellipse 46% 11% at 63% 58%, #636d7655, transparent 100%),
    radial-gradient(ellipse 38% 8% at 70% 46%, #dadada29, transparent 100%);
  transform: rotate(-12deg);
  opacity: .21;
  animation: drift 42s ease-in-out infinite alternate;
}

.hero::after {
  z-index: -1;
  background:
    radial-gradient(ellipse 38% 14% at 65% 48%, #636d7670, transparent 100%),
    radial-gradient(ellipse 43% 7% at 37% 60%, #dadada34, transparent 100%),
    radial-gradient(ellipse 40% 12% at 39% 71%, #636d764a, transparent 100%);
  transform: rotate(8deg);
  opacity: .17;
  animation: drift 56s ease-in-out -28s infinite alternate-reverse;
}

@keyframes drift {
  to { transform: translate(9%, -6%) rotate(4deg) scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero::after { animation: none; will-change: auto; }
}

.frost-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

h1 {
  position: absolute;
  top: max(clamp(1.25rem, 3.3vw, 3rem), env(safe-area-inset-top));
  left: max(clamp(1.25rem, 4vw, 4rem), env(safe-area-inset-left));
  margin: 0;
  font-size: clamp(1.4rem, 3.2vw, 3.15rem);
  line-height: 1;
  letter-spacing: .09em;
  font-weight: 850;
  text-shadow: 0 0 .45em var(--black);
}

.sound-toggle {
  position: absolute;
  right: max(clamp(1.25rem, 4vw, 4rem), env(safe-area-inset-right));
  bottom: max(clamp(1.25rem, 3.3vw, 3rem), env(safe-area-inset-bottom));
  min-height: 44px;
  padding: .45rem .8rem;
  border: 1px solid #636d76;
  background: #000c;
  color: var(--ice-white);
  font: inherit;
  font-size: .8rem;
  cursor: pointer;
}

.sound-toggle[aria-pressed="true"] {
  background: var(--ice-white);
  color: var(--black);
}

.sound-toggle:focus-visible { outline: 2px solid var(--ice-white); outline-offset: 4px; }