/* Spectre Design System — generated by tokens.py. Do not edit by hand. */
:root {
  --ground: #f7f6f3; /* oklch(0.972 0.004 85) */
  --ground-2: #efeeeb; /* oklch(0.948 0.004 85) */
  --panel: #fdfcfb; /* oklch(0.992 0.002 85) */
  --line: #dad9d6; /* oklch(0.885 0.004 85) */
  --line-control: #7d7c79; /* oklch(0.585 0.004 85) */
  --ink: #1d1c19; /* oklch(0.225 0.005 85) */
  --ink-hover: #363532; /* oklch(0.33 0.005 85) */
  --on-ink: #f7f6f3; /* oklch(0.972 0.004 85) */
  --text-2: #605f5c; /* oklch(0.485 0.004 85) */
  --text-3: #898785; /* oklch(0.625 0.004 85) */
  --red: #bd3e37; /* oklch(0.545 0.164 27) */
  --ok: #436449; /* oklch(0.47 0.058 150) */
  --ok-wash: #e7f4e9; /* oklch(0.955 0.02 150) */
  --warn: #755f41; /* oklch(0.5 0.053 75) */
  --warn-wash: #faeede; /* oklch(0.955 0.025 75) */
  --danger: #9f413a; /* oklch(0.5 0.126 27) */
  --danger-wash: #fcecea; /* oklch(0.955 0.018 27) */
  --tint: #ddb68a; /* oklch(0.8 0.073 70) */
  --tint-2: #c8997a; /* oklch(0.72 0.071 55) */
  --shade: #171614; /* oklch(0.2 0.004 85) */
  --font-ui: Inter, "IBM Plex Sans", "Helvetica Neue", system-ui, sans-serif;
  --fs-1: 12px; --fs-2: 14px; --fs-3: 16px; --fs-4: 20px; --fs-5: 24px; --fs-6: 30px; --fs-7: 36px; --fs-8: 48px;
  --lh-body: 1.6; --lh-head: 1.25; --lh-data: 1.1;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --gutter: clamp(16px, 4vw, 64px);
  --frame-text: 720px; --frame-picture: 1120px; --frame-instrument: 1440px;
  --bp-1: 600px; --bp-2: 900px; --bp-3: 1280px;
  --r-control: 2px; --r-panel: 4px;
  --hit: 44px; --hit-handle: 48px;
  --t-state: 100ms; --t-move: 180ms; --t-screen: 260ms; --ease: cubic-bezier(.2, 0, 0, 1);
  --hairline: 1px solid var(--line); --control-line: 1px solid var(--line-control);
  --focus: 2px solid var(--red);
  --shadow-float: 0 1px 2px oklch(from var(--shade) l c h / .10), 0 8px 24px oklch(from var(--shade) l c h / .08);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --ground: #131311; /* oklch(0.185 0.004 85) */
  --ground-2: #0d0c0a; /* oklch(0.155 0.004 85) */
  --panel: #1d1c1a; /* oklch(0.225 0.004 85) */
  --line: #32312f; /* oklch(0.315 0.004 85) */
  --line-control: #757472; /* oklch(0.56 0.004 85) */
  --ink: #ebe9e6; /* oklch(0.935 0.004 85) */
  --ink-hover: #c8c7c4; /* oklch(0.83 0.004 85) */
  --on-ink: #131311; /* oklch(0.185 0.004 85) */
  --text-2: #a9a7a5; /* oklch(0.73 0.004 85) */
  --text-3: #777673; /* oklch(0.565 0.004 85) */
  --red: #da675d; /* oklch(0.65 0.146 27) */
  --ok: #8bc195; /* oklch(0.76 0.084 150) */
  --ok-wash: #19251b; /* oklch(0.25 0.025 150) */
  --warn: #dbb787; /* oklch(0.8 0.076 75) */
  --warn-wash: #292014; /* oklch(0.25 0.025 75) */
  --danger: #d1928a; /* oklch(0.72 0.078 27) */
  --danger-wash: #2d1d1b; /* oklch(0.25 0.025 27) */
  --tint: #b79875; /* oklch(0.7 0.061 70) */
  --tint-2: #a27d65; /* oklch(0.62 0.058 55) */
  --shade: #010000; /* oklch(0.05 0.004 85) */
} }
:root[data-theme="dark"] {
  --ground: #131311; /* oklch(0.185 0.004 85) */
  --ground-2: #0d0c0a; /* oklch(0.155 0.004 85) */
  --panel: #1d1c1a; /* oklch(0.225 0.004 85) */
  --line: #32312f; /* oklch(0.315 0.004 85) */
  --line-control: #757472; /* oklch(0.56 0.004 85) */
  --ink: #ebe9e6; /* oklch(0.935 0.004 85) */
  --ink-hover: #c8c7c4; /* oklch(0.83 0.004 85) */
  --on-ink: #131311; /* oklch(0.185 0.004 85) */
  --text-2: #a9a7a5; /* oklch(0.73 0.004 85) */
  --text-3: #777673; /* oklch(0.565 0.004 85) */
  --red: #da675d; /* oklch(0.65 0.146 27) */
  --ok: #8bc195; /* oklch(0.76 0.084 150) */
  --ok-wash: #19251b; /* oklch(0.25 0.025 150) */
  --warn: #dbb787; /* oklch(0.8 0.076 75) */
  --warn-wash: #292014; /* oklch(0.25 0.025 75) */
  --danger: #d1928a; /* oklch(0.72 0.078 27) */
  --danger-wash: #2d1d1b; /* oklch(0.25 0.025 27) */
  --tint: #b79875; /* oklch(0.7 0.061 70) */
  --tint-2: #a27d65; /* oklch(0.62 0.058 55) */
  --shade: #010000; /* oklch(0.05 0.004 85) */
}

html { color-scheme: light dark; font-family: var(--font-ui); font-variant-numeric: lining-nums tabular-nums; -webkit-font-smoothing: antialiased; }
body { margin: 0; background: var(--ground); color: var(--ink); font-size: var(--fs-3); line-height: var(--lh-body); }
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-control); text-underline-offset: 4px; }
a:hover { text-decoration-color: var(--ink); }
:focus-visible { outline: var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { :root { --t-state: 0ms; --t-move: 0ms; --t-screen: 0ms; } }