/* Shared by every page: self-hosted fonts, tokens, reset, focus, motion preferences. */
@font-face { font-family: 'Geist'; src: url(/assets/fonts/geist-latin-wght-normal.woff2) format('woff2-variations'), url(/assets/fonts/geist-latin-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url(/assets/fonts/geist-mono-latin-wght-normal.woff2) format('woff2-variations'), url(/assets/fonts/geist-mono-latin-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; src: url(/assets/fonts/bricolage-grotesque-latin-standard-normal.woff2) format('woff2-variations'), url(/assets/fonts/bricolage-grotesque-latin-standard-normal.woff2) format('woff2'); font-weight: 200 800; font-stretch: 75% 100%; font-style: normal; font-display: swap; }

:root {
  --ink: #0b0b0c;
  --ink-2: #2e2e33;
  --muted: #64646c;
  --faint: #9b9ba3;
  --line: #ececee;
  --line-2: #e0e0e4;
  --bg: #ffffff;
  --soft: #f7f7f8;
  --soft-2: #f0f0f2;
  --sun: #ffc43d; /* logo yellow: a tiny spark only (logo, a dot), never the accent */
  --accent: #1e1638; /* deep indigo-violet from the logo's eyes: buttons, links, active states */
  --accent-hover: #2e2357;
  --accent-mid: #5b4bb7; /* highlights and indicators where the deep ink is too heavy */
  --accent-tint: #f1effa; /* soft lavender fills */
  --accent-line: #e1dcf4;
  --ok: #138a43;
  --ok-tint: #e9f7ee;
  --bad: #d92d20;
  --bad-tint: #fdecea;
  --warn: #b54708;
  --warn-tint: #fff4e5;
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --spring: cubic-bezier(0.34, 1.36, 0.64, 1);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --display: 'Bricolage Grotesque', 'Geist', ui-sans-serif, system-ui, sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; }
@supports (overflow: clip) { html { overflow-x: clip; } }
html, body { margin: 0; background: var(--bg); color: var(--ink); max-width: 100%; }
/* clip (not hidden) on body: hidden would make body a scroll container and break position: sticky */
@supports (overflow: clip) { body { overflow-x: clip; } }
body { font: 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'ss01' on; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
code, kbd, pre, .mono { font-family: var(--mono); font-size: 0.92em; }
code { background: var(--soft-2); padding: 1px 5px; border-radius: 5px; }
.num { font-variant-numeric: tabular-nums; }
.mono, code { overflow-wrap: anywhere; }
a, button, summary, [role='button'] { -webkit-tap-highlight-color: rgba(91, 75, 183, 0.12); }
::selection { background: var(--accent-line); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent-mid); outline-offset: 2px; border-radius: 6px; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -48px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 10px; text-decoration: none; transition: top 0.15s; }
.skip:focus { top: 12px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}