* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--canvas); color: var(--text); font-family: var(--font); font-size: 14px; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 12% -10%, rgba(22,211,198,.13), transparent 28rem), radial-gradient(circle at 85% 20%, rgba(77,142,255,.08), transparent 34rem); z-index: -1; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid rgba(22,211,198,.62); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.container { width: min(calc(100% - 36px), var(--max)); margin: 0 auto; }
.muted { color: var(--text-2); }
.subtle { color: var(--text-3); }
.num { font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }
@media (max-width: 640px) { .container { width: min(calc(100% - 20px), var(--max)); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }