/* design_version 1. Generated by bun Design/gen.ts from Design/tokens.json: edit there, never this copy. */
:root {
  color-scheme: light;
  --design-version: 1;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-label: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  --good-fill: var(--good);
  --watch-fill: var(--watch);
  --act-fill: var(--act);
  --working-fill: var(--working);
  --degraded-fill: var(--degraded);
  --broken-fill: var(--broken);
  --not-scored-fill: #00000000;
  --study: var(--not-scored);
  --chart-grid: var(--line);
  --chart-axis: var(--line-strong);
  --band-alpha: 0.09;
  --brand-cardinal: #990000;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-22: 22px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-56: 56px;
  --radius-marker: 1px;
  --radius-code: 4px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 16px;
  --radius-pill: 99px;
  --radius-pop: 12px;
  --radius-card: var(--radius-md);
  --radius-sheet: var(--radius-pop);
  --fs-debug: 11px;
  --fs-meta: 12px;
  --fs-label: 13px;
  --fs-body: 14px;
  --fs-read: 16px;
  --fs-lede: 18px;
  --fs-control: 14px;
  --fs-heading: 20px;
  --fs-title: 20px;
  --fs-figure: 34px;
  --fs-figure-lg: 44px;
  --fs-section: 30px;
  --fs-display: clamp(36px, 7vw, 64px);
  --track-tight: -0.01em;
  --track-label: 0.01em;
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;
  --lh-body: 1.5;
  --lh-lead: 1.4;
  --lh-figure: 1;
  --lh-chip: 18px;
  --lh-tile-label: 24px;
  --track-figure: -0.03em;
  --control: 38px;
  --control-sm: 36px;
  --hairline: 1px;
  --marker: 8px;
  --marker-stroke: 1.5px;
  --chip-pad-y: 3px;
  --chip-pad-start: 9px;
  --chip-pad-end: 10px;
  --chip-gap: 7px;
  --tag-pad-y: 2px;
  --tag-pad-x: 9px;
  --code-pad-y: 1px;
  --code-pad-x: 5px;
  --page-max: none;
  --pane-max: 1040px;
  --rail-width: 3px;
  --rail-inset: 6px;
  --info-max: 380px;
  --bp-sm: 640px;
  --bp-lg: 1024px;
  --surface-page: #eef1f5;
  --surface: #ffffff;
  --surface-sunk: #f6f8fb;
  --surface-raised: #f0f3f7;
  --surface-context: #f9fafc;
  --ink: #12161d;
  --ink-soft: #12161d;
  --ink-rest: #2c3442;
  --ink-2: #535d6d;
  --ink-dim: #5c6577;
  --on-ink: #ffffff;
  --line: rgba(30,45,75,0.10);
  --line-soft: rgba(30,45,75,0.06);
  --line-strong: #7a8394;
  --line-pop: rgba(16,36,80,0.10);
  --line-accent: #2961c6;
  --accent: #2961c6;
  --accent-hover: #2353a9;
  --control-2: #ffffff;
  --control-2-hover: #f6f8fb;
  --control-3: #f6f8fb;
  --control-3-hover: #edf1f6;
  --good: #40d27f;
  --good-text: #237346;
  --watch: #f9d34a;
  --watch-text: #776423;
  --act: #f23c79;
  --act-text: #b92e5c;
  --working: #6fdbf7;
  --working-text: #376d7a;
  --degraded: #fd7738;
  --degraded-text: #a24c24;
  --broken: #eb384d;
  --broken-text: #bc2d3d;
  --on-status: #0b0c0e;
  --on-us: #1d5fbf;
  --on-us-fill: #eef3fa;
  --not-scored: #5b5d66;
  --flag-fill: #f5f0e7;
  --surface-glass: rgba(255,255,255,0.80);
  --accent-soft: rgba(42,98,201,0.10);
  --accent-softer: rgba(42,98,201,0.05);
  --hover-tint: rgba(42,98,201,0.08);
  --chart-line: #1f2633;
  --chart-area: rgba(47,107,216,0.16);
  --chart-1: #1F5FA8;
  --chart-2: #D2691E;
  --chart-3: #0F9A94;
  --chart-4: #C9A100;
  --shadow-pop: 0 1px 2px rgba(16,36,80,0.05), 0 3px 6px -1px rgba(16,36,80,0.05), 0 10px 20px -4px rgba(16,36,80,0.07), 0 24px 48px -8px rgba(16,36,80,0.10), 0 48px 96px -16px rgba(16,36,80,0.12);
  --focus-ring: 0 0 0 1px #2961c6, 0 0 0 4px rgba(41,97,198,0.25);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-page: #0c0f14;
  --surface: #151920;
  --surface-sunk: #11151b;
  --surface-raised: #1f242d;
  --surface-context: #101318;
  --ink: #eceff4;
  --ink-soft: #eceff4;
  --ink-rest: #c7cdd8;
  --ink-2: #a3abb9;
  --ink-dim: #959dab;
  --on-ink: #0b0c0e;
  --line: rgba(160,180,215,0.11);
  --line-soft: rgba(160,180,215,0.06);
  --line-strong: #778092;
  --line-pop: rgba(200,220,255,0.12);
  --line-accent: #80b1ff;
  --accent: #80b1ff;
  --accent-hover: #9cc2ff;
  --control-2: #1b2029;
  --control-2-hover: #232935;
  --control-3: #11151b;
  --control-3-hover: #1a1f27;
  --good: #40d27f;
  --good-text: #40d27f;
  --watch: #f9d34a;
  --watch-text: #f9d34a;
  --act: #f23c79;
  --act-text: #f56d9a;
  --working: #6fdbf7;
  --working-text: #6fdbf7;
  --degraded: #fd7738;
  --degraded-text: #fd7738;
  --broken: #eb384d;
  --broken-text: #f17684;
  --on-status: #0b0c0e;
  --on-us: #8fc3ff;
  --on-us-fill: #1a2230;
  --not-scored: #a2a5af;
  --flag-fill: #403923;
  --surface-glass: rgba(31,36,45,0.90);
  --accent-soft: rgba(128,177,255,0.13);
  --accent-softer: rgba(128,177,255,0.06);
  --hover-tint: rgba(128,177,255,0.10);
  --chart-line: #e6eaf1;
  --chart-area: rgba(128,177,255,0.20);
  --chart-1: #4C8BD6;
  --chart-2: #D97835;
  --chart-3: #1FA096;
  --chart-4: #E6C33A;
  --shadow-pop: 0 1px 2px rgba(2,6,16,0.30), 0 3px 6px -1px rgba(2,6,16,0.28), 0 10px 20px -4px rgba(2,6,16,0.32), 0 24px 48px -8px rgba(2,6,16,0.40), 0 48px 96px -16px rgba(2,6,16,0.50);
  --focus-ring: 0 0 0 1px #80b1ff, 0 0 0 4px rgba(128,177,255,0.28);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface-page: #0c0f14;
    --surface: #151920;
    --surface-sunk: #11151b;
    --surface-raised: #1f242d;
    --surface-context: #101318;
    --ink: #eceff4;
    --ink-soft: #eceff4;
    --ink-rest: #c7cdd8;
    --ink-2: #a3abb9;
    --ink-dim: #959dab;
    --on-ink: #0b0c0e;
    --line: rgba(160,180,215,0.11);
    --line-soft: rgba(160,180,215,0.06);
    --line-strong: #778092;
    --line-pop: rgba(200,220,255,0.12);
    --line-accent: #80b1ff;
    --accent: #80b1ff;
    --accent-hover: #9cc2ff;
    --control-2: #1b2029;
    --control-2-hover: #232935;
    --control-3: #11151b;
    --control-3-hover: #1a1f27;
    --good: #40d27f;
    --good-text: #40d27f;
    --watch: #f9d34a;
    --watch-text: #f9d34a;
    --act: #f23c79;
    --act-text: #f56d9a;
    --working: #6fdbf7;
    --working-text: #6fdbf7;
    --degraded: #fd7738;
    --degraded-text: #fd7738;
    --broken: #eb384d;
    --broken-text: #f17684;
    --on-status: #0b0c0e;
    --on-us: #8fc3ff;
    --on-us-fill: #1a2230;
    --not-scored: #a2a5af;
    --flag-fill: #403923;
    --surface-glass: rgba(31,36,45,0.90);
    --accent-soft: rgba(128,177,255,0.13);
    --accent-softer: rgba(128,177,255,0.06);
    --hover-tint: rgba(128,177,255,0.10);
    --chart-line: #e6eaf1;
    --chart-area: rgba(128,177,255,0.20);
    --chart-1: #4C8BD6;
    --chart-2: #D97835;
    --chart-3: #1FA096;
    --chart-4: #E6C33A;
    --shadow-pop: 0 1px 2px rgba(2,6,16,0.30), 0 3px 6px -1px rgba(2,6,16,0.28), 0 10px 20px -4px rgba(2,6,16,0.32), 0 24px 48px -8px rgba(2,6,16,0.40), 0 48px 96px -16px rgba(2,6,16,0.50);
    --focus-ring: 0 0 0 1px #80b1ff, 0 0 0 4px rgba(128,177,255,0.28);
  }
}
/* Touch layer: forced by data-density="touch" (external pages), or under 640px with data-density="auto" (the shell). */
:root[data-density="touch"] {
  --fs-title: 34px;
  --fs-body: 17px;
  --fs-control: 17px;
  --fs-label: 15px;
  --fs-meta: 13px;
  --control: 44px;
  --control-sm: 44px;
  --radius-card: 16px;
  --radius-sheet: 32px;
  --pane-max: 1040px;
}
@media (max-width: 639.98px) {
  :root[data-density="auto"] {
    --fs-title: 34px;
    --fs-body: 17px;
    --fs-control: 17px;
    --fs-label: 15px;
    --fs-meta: 13px;
    --control: 44px;
    --control-sm: 44px;
    --radius-card: 16px;
    --radius-sheet: 32px;
    --pane-max: 1040px;
  }
}