@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 1rem; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 var(--text-base)/1.6 var(--font-ui); }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, select { cursor: pointer; }
button { color: inherit; }
a { color: var(--teal); text-underline-offset: .25em; }
a:hover { color: var(--teal-bright); }
:focus-visible { outline: 2px solid var(--teal-bright); outline-offset: 5px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-weight: 700; line-height: 1.12; }
h1 { font-size: clamp(2.5rem, 5vw, 4.75rem); letter-spacing: -.05em; }
h2 { font-size: clamp(1.5rem, 2.5vw, 2.25rem); letter-spacing: -.035em; }
h3 { font-size: 1.125rem; letter-spacing: -.02em; }
p { margin-bottom: var(--space-4); }
::selection { color: var(--black); background: var(--teal); }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: absolute; top: .5rem; left: 1rem; transform: translateY(-160%); z-index: 100; padding: .75rem 1rem; background: var(--teal); color: var(--black); }
.skip-link:focus { transform: translateY(0); }
.eyebrow { color: var(--teal); font: 500 var(--text-xs)/1.5 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.muted { color: var(--text-secondary); }
.micro { color: var(--text-muted); font: 400 var(--text-xs)/1.6 var(--font-mono); }
.accent { color: var(--teal); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}