*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; font-family: var(--font); font-size: 16px; line-height: 1.5;
  color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(60vw 40vw at 85% -10%, var(--glow-b), transparent 70%),
    radial-gradient(50vw 40vw at 0% 5%, var(--glow-a), transparent 70%),
    radial-gradient(40vw 30vw at 60% 110%, var(--glow-c), transparent 70%);
  background-repeat: no-repeat; background-attachment: fixed;
}
h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(30px, 5vw, 44px); font-weight: 560; letter-spacing: -0.04em; line-height: 1.05; }
h2 { font-size: 22px; font-weight: 560; letter-spacing: -0.02em; }
h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
a { color: inherit; }
code { font-size: 0.9em; padding: 0.1em 0.4em; border-radius: 6px; background: var(--glass-strong); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(100% - 32px, var(--maxw)); margin-inline: auto; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--pill-bg); color: var(--pill-text); padding: 8px 14px; border-radius: var(--r-pill); z-index: 99; }
.skip:focus { left: 8px; }
.display { font-size: clamp(44px, 9vw, 104px); font-weight: 500; letter-spacing: -0.05em; line-height: 0.94; text-wrap: balance; }
.display.md { font-size: clamp(34px, 6vw, 64px); }
.lede { color: var(--muted); font-size: clamp(17px, 2vw, 20px); max-width: 56ch; text-wrap: pretty; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}