@font-face {
  font-family: Unbounded;
  src: url('/assets/unbounded-700.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: block;
}

/* Tints. The WebGL renderer reads these same tokens, so the fallback and the glass always agree. */
:root {
  color-scheme: dark;
  --ground: #07080b;
  --glass: #e6edf7;
  --glass-deep: #3e4a5c;
  --light-a: #8eb0ff;
  --light-b: #ffc4e8;
  --ink: #eef2f7;
}

:root[data-tint='aqua'] {
  --ground: #03090c;
  --glass: #8ff0e6;
  --glass-deep: #0b4b55;
  --light-a: #2fd3dc;
  --light-b: #5f9dff;
  --ink: #e4fbf8;
}

:root[data-tint='amethyst'] {
  --ground: #07040d;
  --glass: #c7a2ff;
  --glass-deep: #36126a;
  --light-a: #9a4dff;
  --light-b: #ff5cc4;
  --ink: #f4ecff;
}

:root[data-tint='amber'] {
  --ground: #0a0705;
  --glass: #ffc977;
  --glass-deep: #5e330b;
  --light-a: #ff9440;
  --light-b: #ffdb8f;
  --ink: #fff4e3;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-width: 240px; height: 100%; }

body {
  min-height: 100svh;
  overflow: hidden;
  font-family: Unbounded, system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(60% 40% at 30% 42%, color-mix(in srgb, var(--light-a) 16%, transparent), transparent 70%),
    radial-gradient(50% 36% at 72% 52%, color-mix(in srgb, var(--light-b) 12%, transparent), transparent 70%),
    linear-gradient(to bottom, color-mix(in srgb, var(--ground) 70%, #fff 4%), var(--ground) 55%, #000);
  background-color: var(--ground);
}

::selection { background: color-mix(in srgb, var(--glass) 35%, transparent); color: #fff; }

main {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  isolation: isolate;
}

.stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 500ms cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}

/* Fallback wordmark when WebGL is unavailable: translucent glass face over a stepped extrusion. */
.word {
  margin: 0 0 4vh;
  font-size: clamp(2.5rem, 12.5vw, 9.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: color-mix(in srgb, var(--glass) 26%, transparent);
  -webkit-text-stroke: 1px color-mix(in srgb, var(--glass) 70%, transparent);
  text-shadow:
    0 1px 0 color-mix(in srgb, var(--glass-deep) 90%, #000),
    0 2px 0 color-mix(in srgb, var(--glass-deep) 80%, #000),
    0 3px 0 color-mix(in srgb, var(--glass-deep) 70%, #000),
    0 4px 0 color-mix(in srgb, var(--glass-deep) 60%, #000),
    0 6px 2px #0008,
    0 18px 40px #000c;
}

.gl-pending .word { opacity: 0; }

/* Once the glass renders, the heading stays as the accessible name only. */
.gl .stage { opacity: 1; }
.gl .word {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (forced-colors: active) {
  .stage { display: none; }
  .word { color: CanvasText; -webkit-text-stroke: 0; text-shadow: none; }
}