/* Separatrix — generated from tokens.json */
:root, [data-theme="dark"] {
  --ground: #0e1315;
  --panel: #141b1e;
  --raised: #1b2427;
  --sunken: #0a0e10;
  --hover: #212c30;
  --active: #29363b;
  --scrim: rgba(5, 8, 9, 0.72);
  --line: #263236;
  --line-strong: #3a4a50;
  --edge: #66787e;
  --ink: #e4ecee;
  --ink-2: #a9b6ba;
  --ink-3: #87959a;
  --accent: #7eb0ff;
  --accent-ink: #a9c9ff;
  --accent-soft: rgba(126, 176, 255, 0.14);
  --on-accent: #0a0e10;
  --focus: #7eb0ff;
  --ok: #4fd1a0;
  --ok-soft: rgba(79, 209, 160, 0.13);
  --warn: #f0c060;
  --warn-soft: rgba(240, 192, 96, 0.12);
  --danger: #ff8f85;
  --danger-soft: rgba(255, 143, 133, 0.12);
  --plot-bg: #0a0e10;
  --plot-grid: #151c1f;
  --plot-axis: #5f7076;
  --plot-tick: #87959a;
  --plot-field: #5b6b71;
  --plot-fp: #f2f6f7;
  --plot-halo: #0a0e10;
  --traj-1: #56b4e9;
  --traj-2: #e69f00;
  --traj-3: #22b98d;
  --traj-4: #f0e442;
  --traj-5: #d58bb6;
  --traj-6: #ef5f3c;
  --traj-7: #a78bfa;
  --null-1: #c4b5fd;
  --null-2: #fda4af;
  --null-3: #e5e7eb;
  --null-4: #bef264;
  --curve-fold: #e69f00;
  --curve-hopf: #56b4e9;
  --curve-flip: #22b98d;
  --curve-ns: #d58bb6;
  --curve-bp: #f0e442;
  --curve-hom: #b9a3ff;
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-modal: 0 24px 72px rgba(0, 0, 0, 0.55);
}
[data-theme="light"] {
  --ground: #f2f4f4;
  --panel: #ffffff;
  --raised: #f4f6f6;
  --sunken: #ffffff;
  --hover: #e9eded;
  --active: #dde3e4;
  --scrim: rgba(14, 22, 25, 0.38);
  --line: #d6dcdd;
  --line-strong: #b7c0c2;
  --edge: #7a8588;
  --ink: #0b1214;
  --ink-2: #3a4649;
  --ink-3: #5c686c;
  --accent: #1d55d0;
  --accent-ink: #1747b0;
  --accent-soft: rgba(29, 85, 208, 0.09);
  --on-accent: #ffffff;
  --focus: #1d55d0;
  --ok: #08734d;
  --ok-soft: rgba(8, 115, 77, 0.09);
  --warn: #865400;
  --warn-soft: rgba(176, 116, 0, 0.11);
  --danger: #b3261e;
  --danger-soft: rgba(179, 38, 30, 0.08);
  --plot-bg: #ffffff;
  --plot-grid: #edf0f0;
  --plot-axis: #7d888b;
  --plot-tick: #3a4649;
  --plot-field: #8a9497;
  --plot-fp: #0b1214;
  --plot-halo: #ffffff;
  --traj-1: #0072b2;
  --traj-2: #d55e00;
  --traj-3: #009e73;
  --traj-4: #1a1a1a;
  --traj-5: #b84f8f;
  --traj-6: #b07800;
  --traj-7: #8c510a;
  --null-1: #6d28d9;
  --null-2: #be123c;
  --null-3: #374151;
  --null-4: #4d7c0f;
  --curve-fold: #b35900;
  --curve-hopf: #0072b2;
  --curve-flip: #00845f;
  --curve-ns: #a3367a;
  --curve-bp: #7a6a00;
  --curve-hom: #6a3fc8;
  --shadow-pop: 0 8px 24px rgba(14, 22, 25, 0.14);
  --shadow-modal: 0 24px 72px rgba(14, 22, 25, 0.22);
}
: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;
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --control-h: 1.75rem;
  --control-h-sm: 1.375rem;
  --topbar-h: 2.75rem;
  --statusbar-h: 1.625rem;
  --panel-left-w: 21.25rem;
  --panel-right-w: 18.75rem;
  --icon: 1rem;
  --font-ui: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Atkinson Hyperlegible Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;
  --font-math: "KaTeX_Main", "Latin Modern Math", "STIX Two Math", "Cambria Math", "Times New Roman", serif;
}
.display { font-family: var(--font-ui); font-size: 1.75rem; line-height: 2.25rem; font-weight: 600; letter-spacing: -0.01em; }
.title { font-family: var(--font-ui); font-size: 1.125rem; line-height: 1.5rem; font-weight: 600; }
.heading { font-family: var(--font-ui); font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; }
.body { font-family: var(--font-ui); font-size: 0.8125rem; line-height: 1.25rem; font-weight: 400; }
.body-strong { font-family: var(--font-ui); font-size: 0.8125rem; line-height: 1.25rem; font-weight: 600; }
.label { font-family: var(--font-ui); font-size: 0.75rem; line-height: 1rem; font-weight: 500; }
.caption { font-family: var(--font-ui); font-size: 0.6875rem; line-height: 1rem; font-weight: 400; letter-spacing: 0.01em; }
.numeric { font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.25rem; font-weight: 400; }
.numeric-sm { font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1rem; font-weight: 400; }
.code { font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.125rem; font-weight: 400; }
.math { font-family: var(--font-math); font-size: 1rem; line-height: 1.5rem; font-weight: 400; }
.math-display { font-family: var(--font-math); font-size: 1.25rem; line-height: 1.75rem; font-weight: 400; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("fonts/AtkinsonHyperlegibleNext-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("fonts/AtkinsonHyperlegibleNext-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("fonts/AtkinsonHyperlegibleNext-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("fonts/AtkinsonHyperlegibleNext-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Mono"; src: url("fonts/AtkinsonHyperlegibleMono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Mono"; src: url("fonts/AtkinsonHyperlegibleMono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }