*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--bg); color: var(--fg);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
body { height: 100dvh; touch-action: none; }
canvas#scene { position: fixed; inset: 0; width: 100vw; height: 100dvh; display: block; }

.brand {
  position: fixed; inset: 0; display: grid; place-items: center;
  pointer-events: none; text-align: center;
}
.wordmark {
  font-weight: 700; letter-spacing: 0.32em; margin-right: -0.32em;
  font-size: clamp(2.6rem, 11vw, 7.5rem); line-height: 1;
}
.tagline {
  margin-top: 1.1em; font-size: clamp(0.62rem, 1.6vw, 0.8rem);
  letter-spacing: 0.42em; margin-right: -0.42em; text-transform: uppercase; opacity: 0.6;
}
.foot {
  position: fixed; left: 0; right: 0; bottom: max(1.4rem, env(safe-area-inset-bottom));
  display: flex; justify-content: center; gap: 1.6rem;
  font-size: 0.72rem; letter-spacing: 0.18em; opacity: 0.55;
}
.foot a { color: inherit; text-decoration: none; pointer-events: auto; }
.foot a:hover, .foot a:focus-visible { opacity: 1; text-decoration: underline; }

/* No WebGL: the static gradient replaces the scene, the brand stays. */
.no-webgl canvas#scene { display: none; }
.no-webgl body { background: var(--fallback); }