/* Syntavie — generated from tokens.json */
:root, [data-theme="dark"] {
  --ink-950: #0c0d10;
  --ink-900: #111216;
  --ink-850: #14161a;
  --ink-800: #1a1c21;
  --ink-750: #1d1f24;
  --ink-700: #23262d;
  --ink-600: #2c2f36;
  --ink-500: #3a3e46;
  --ink-400: #5a5f69;
  --ink-300: #8a8f98;
  --paper-200: #b9b5ac;
  --paper-100: #ece7dc;
  --vermilion-600: #df5236;
  --vermilion-500: #e85a3e;
  --vermilion-400: #f06b4f;
  --vermilion-900: #2a1410;
  --vermilion-800: #5c2618;
  --sabiasagi-500: #8db0ae;
  --sabiasagi-900: #12201f;
  --sabiasagi-800: #2d4442;
  --status-danger: #f2917f;
  --status-success: #a9c9a0;
  --odo-300: #c8a96a;
  --fuji-300: #aaa4c8;
  --kinari-200: #ddd6c8;
  --bg: var(--ink-950);
  --bg-band: var(--ink-900);
  --surface: var(--ink-850);
  --surface-hover: var(--ink-800);
  --border-grid: var(--ink-700);
  --border-card: var(--ink-750);
  --border-control: var(--ink-400);
  --border-quiet: var(--ink-600);
  --border-hover: var(--ink-300);
  --text: var(--paper-100);
  --text-secondary: var(--paper-200);
  --text-muted: var(--ink-300);
  --human: var(--vermilion-500);
  --human-hover: var(--vermilion-400);
  --human-pressed: var(--vermilion-600);
  --on-human: var(--ink-950);
  --human-tint: var(--vermilion-900);
  --human-border: var(--vermilion-800);
  --machine: var(--sabiasagi-500);
  --machine-tint: var(--sabiasagi-900);
  --machine-border: var(--sabiasagi-800);
  --danger: var(--status-danger);
  --success: var(--status-success);
  --tone-sabi: var(--sabiasagi-500);
  --tone-odo: var(--odo-300);
  --tone-fuji: var(--fuji-300);
  --tone-kinari: var(--kinari-200);
  --on-tone: var(--ink-950);
  --on-tone-muted: rgb(12 13 16 / 0.78);
  --tone-line: rgb(12 13 16 / 0.2);
  --machine-glow-border: rgb(141 176 174 / 0.5);
  --focus: var(--paper-100);
  --focus-ring: 0 0 0 2px #0c0d10, 0 0 0 4px #ece7dc;
  --glow-number: 0 0 20px rgb(141 176 174 / 0.5);
  --glow-node: 0 0 10px rgb(141 176 174 / 0.55);
  --glow-chip: 0 0 14px -3px rgb(141 176 174 / 0.6);
  --glow-bar: 0 0 10px rgb(141 176 174 / 0.8);
  --glow-card: inset 0 0 0 999px rgb(141 176 174 / 0.04), 0 0 0 4px rgb(141 176 174 / 0.05), 0 0 48px -12px rgb(141 176 174 / 0.35);
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-20: 80px;
  --space-24: 96px;
  --space-30: 120px;
  --radius-0: 0px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-full: 999px;
  --container: 1280px;
  --columns: 12;
  --measure: 64ch;
  --nav-height: 64px;
  --hairline: 1px;
  --breakpoint: 960px;
  --font-sans: "Geist", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
  --font-serif: "Instrument Serif", Georgia, serif;
}
.display { font-family: var(--font-mono); font-size: 64px; line-height: 1.05; font-weight: 400; letter-spacing: -0.04em; }
.display-sm { font-family: var(--font-mono); font-size: 44px; line-height: 1.1; font-weight: 400; letter-spacing: -0.035em; }
.accent { font-family: var(--font-serif); font-size: 1.08em; line-height: 1; font-weight: 400; letter-spacing: -0.01em; font-style: italic; }
.heading-1 { font-family: var(--font-mono); font-size: 40px; line-height: 1.15; font-weight: 400; letter-spacing: -0.035em; }
.heading-2 { font-family: var(--font-mono); font-size: 28px; line-height: 1.25; font-weight: 400; letter-spacing: -0.03em; }
.heading-3 { font-family: var(--font-mono); font-size: 20px; line-height: 1.35; font-weight: 500; letter-spacing: -0.02em; }
.lead { font-family: var(--font-sans); font-size: 20px; line-height: 1.5; font-weight: 400; letter-spacing: -0.005em; }
.body { font-family: var(--font-sans); font-size: 17px; line-height: 1.6; font-weight: 400; }
.body-sm { font-family: var(--font-sans); font-size: 15px; line-height: 1.6; font-weight: 400; }
.caption { font-family: var(--font-sans); font-size: 13px; line-height: 1.5; font-weight: 400; }
.label { font-family: var(--font-mono); font-size: 12px; line-height: 1.4; font-weight: 400; letter-spacing: 0.06em; }
.code { font-family: var(--font-mono); font-size: 14px; line-height: 1.6; font-weight: 400; }
.metric-lg { font-family: var(--font-mono); font-size: 56px; line-height: 1; font-weight: 400; letter-spacing: -0.04em; }
.metric { font-family: var(--font-mono); font-size: 32px; line-height: 1.1; font-weight: 400; letter-spacing: -0.03em; }