/* Gel — generated from tokens.json by eos_utils.web.gel. Do not edit. */

:root {
  --font-display: "Big Shoulders Display", "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-sans: "Instrument Sans", "Hanken Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --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-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 14px;
  --radius-pill: 999px;
  --dur-instant: 80ms;
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
  --dur-crossfade: 600ms;
  --dur-reveal: 1400ms;
  --ease-fade: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --control-compact: 28px;
  --control-default: 36px;
  --control-roomy: 44px;
  --control-booth: 56px;
  --row-compact: 28px;
  --row-default: 40px;
  --row-roomy: 52px;
  --row-booth: 64px;
  --touch-min: 44px;
  --measure: 68ch;
  --container-reading: 720px;
  --container-wide: 1180px;
  --z-nav: 100;
  --z-popover: 200;
  --z-modal: 300;
  --z-toast: 400;
  --surface-0: #0e0e10;
  --surface-1: #121215;
  --surface-2: #1a1a1f;
  --surface-3: #24242b;
  --scrim: #000000b8;
  --line: #2b2b33;
  --line-strong: #74747f;
  --ink: #e6e1d7;
  --ink-muted: #a8a398;
  --ink-subtle: #8d8982;
  --ink-disabled: #5a5953;
  --ink-inverse: #0e0e10;
  --on-fill: #0d0a04;
  --gel-amber: #e7b46b;
  --gel-amber-fill: #e7b46b;
  --gel-steel: #92b2d2;
  --gel-steel-fill: #92b2d2;
  --gel-congo: #a6a0e0;
  --gel-congo-fill: #a6a0e0;
  --gel-magenta: #e286b8;
  --gel-magenta-fill: #e286b8;
  --gel-go: #77ce96;
  --gel-go-fill: #77ce96;
  --gel-ember: #e3996b;
  --gel-ember-fill: #e3996b;
  --gel-ghost: #b8e8cd;
  --gel-ghost-fill: #b8e8cd;
  --gel-cyan: #7ed9e4;
  --gel-cyan-fill: #7ed9e4;
  --gel-lemon: #edd176;
  --gel-lemon-fill: #edd176;
  --accent: var(--gel-amber);
  --accent-fill: var(--gel-amber-fill);
  --accent-2: var(--gel-steel);
  --accent-2-fill: var(--gel-steel-fill);
  --go: var(--gel-go);
  --go-fill: var(--gel-go-fill);
  --focus: var(--gel-amber);
  --danger: #ed7b72;
  --danger-fill: #ed7b72;
  --on-danger: #1a0605;
  --info: var(--gel-steel);
  --success: var(--go);
  --warn: var(--gel-amber);
  --status-draft: var(--ink-muted);
  --status-live: var(--go);
  --status-done: var(--gel-steel);
  --status-blocked: var(--danger);
  --status-cancelled: var(--ink-subtle);
  --rate-lame: var(--ink-subtle);
  --rate-meh: var(--gel-steel);
  --rate-smh: var(--gel-amber);
  --rate-legend: var(--gel-magenta);
  --dept-lx: var(--gel-amber);
  --dept-snd: var(--gel-steel);
  --dept-vid: var(--gel-congo);
  --dept-str: var(--gel-magenta);
  --shadow-1: 0 1px 2px #000000a6;
  --shadow-2: 0 8px 24px #000000b3;
  --shadow-3: 0 24px 64px #000000cc;
  --shadow-spot: 0 0 48px #e7b46b26;
  --shadow-inset: inset 0 1px 2px #00000080;
  --shadow-focus: 0 0 0 2px #0e0e10, 0 0 0 4px #e7b46b;
}

[data-theme="house"] {
  --surface-0: #f1eadc;
  --surface-1: #fffbf3;
  --surface-2: #ece4d3;
  --surface-3: #ffffff;
  --scrim: #1e1a14a8;
  --line: #d9cfbb;
  --line-strong: #857c6a;
  --ink: #1e1a14;
  --ink-muted: #5a5347;
  --ink-subtle: #6c6558;
  --ink-disabled: #aaa190;
  --ink-inverse: #fffbf3;
  --on-fill: #17120a;
  --gel-amber: #734e22;
  --gel-amber-fill: #e7b46b;
  --gel-steel: #305a87;
  --gel-steel-fill: #92b2d2;
  --gel-congo: #4e46aa;
  --gel-congo-fill: #a6a0e0;
  --gel-magenta: #9a2c5e;
  --gel-magenta-fill: #e286b8;
  --gel-go: #2b6842;
  --gel-go-fill: #77ce96;
  --gel-ember: #964826;
  --gel-ember-fill: #e3996b;
  --gel-ghost: #2b6749;
  --gel-ghost-fill: #b8e8cd;
  --gel-cyan: #286473;
  --gel-cyan-fill: #7ed9e4;
  --gel-lemon: #665321;
  --gel-lemon-fill: #edd176;
  --accent: var(--gel-amber);
  --accent-fill: var(--gel-amber-fill);
  --accent-2: var(--gel-steel);
  --accent-2-fill: var(--gel-steel-fill);
  --go: var(--gel-go);
  --go-fill: var(--gel-go-fill);
  --focus: var(--gel-steel);
  --danger: #a43d32;
  --danger-fill: #b64337;
  --on-danger: #ffffff;
  --info: var(--gel-steel);
  --success: var(--go);
  --warn: var(--gel-amber);
  --status-draft: var(--ink-muted);
  --status-live: var(--go);
  --status-done: var(--gel-steel);
  --status-blocked: var(--danger);
  --status-cancelled: var(--ink-subtle);
  --rate-lame: var(--ink-subtle);
  --rate-meh: var(--gel-steel);
  --rate-smh: var(--gel-amber);
  --rate-legend: var(--gel-magenta);
  --dept-lx: var(--gel-amber);
  --dept-snd: var(--gel-steel);
  --dept-vid: var(--gel-congo);
  --dept-str: var(--gel-magenta);
  --shadow-1: 0 1px 2px #3a2e1a29;
  --shadow-2: 0 8px 24px #3a2e1a33;
  --shadow-3: 0 24px 64px #3a2e1a47;
  --shadow-spot: 0 0 32px #f2a10033;
  --shadow-inset: inset 0 1px 2px #3a2e1a26;
  --shadow-focus: 0 0 0 2px #f1eadc, 0 0 0 4px #305a87;
}

[data-theme="seance"] {
  --surface-0: #0c0a0a;
  --surface-1: #151110;
  --surface-2: #1e1816;
  --surface-3: #281f1c;
  --scrim: #000000c2;
  --line: #33282a;
  --line-strong: #85746b;
  --ink: #e8dcd1;
  --ink-muted: #b4a59b;
  --ink-subtle: #9b8a7e;
  --ink-disabled: #62564f;
  --ink-inverse: #0c0a0a;
  --on-fill: #120b05;
  --gel-amber: #e7b46b;
  --gel-amber-fill: #e7b46b;
  --gel-steel: #92b2d2;
  --gel-steel-fill: #92b2d2;
  --gel-congo: #a6a0e0;
  --gel-congo-fill: #a6a0e0;
  --gel-magenta: #e286b8;
  --gel-magenta-fill: #e286b8;
  --gel-go: #77ce96;
  --gel-go-fill: #77ce96;
  --gel-ember: #e3996b;
  --gel-ember-fill: #e3996b;
  --gel-ghost: #b8e8cd;
  --gel-ghost-fill: #b8e8cd;
  --gel-cyan: #7ed9e4;
  --gel-cyan-fill: #7ed9e4;
  --gel-lemon: #edd176;
  --gel-lemon-fill: #edd176;
  --accent: var(--gel-ember);
  --accent-fill: var(--gel-ember-fill);
  --accent-2: var(--gel-ghost);
  --accent-2-fill: var(--gel-ghost-fill);
  --go: var(--gel-ghost);
  --go-fill: var(--gel-ghost-fill);
  --focus: var(--gel-ember);
  --danger: #ed7082;
  --danger-fill: #ed7082;
  --on-danger: #1a0509;
  --info: var(--gel-steel);
  --success: var(--go);
  --warn: var(--gel-amber);
  --status-draft: var(--ink-muted);
  --status-live: var(--go);
  --status-done: var(--gel-steel);
  --status-blocked: var(--danger);
  --status-cancelled: var(--ink-subtle);
  --rate-lame: var(--ink-subtle);
  --rate-meh: var(--gel-steel);
  --rate-smh: var(--gel-amber);
  --rate-legend: var(--gel-magenta);
  --dept-lx: var(--gel-amber);
  --dept-snd: var(--gel-steel);
  --dept-vid: var(--gel-congo);
  --dept-str: var(--gel-magenta);
  --shadow-1: 0 1px 2px #000000a6;
  --shadow-2: 0 8px 24px #000000b3;
  --shadow-3: 0 24px 64px #000000cc;
  --shadow-spot: 0 0 48px #e3996b26;
  --shadow-inset: inset 0 1px 2px #00000080;
  --shadow-focus: 0 0 0 2px #0c0a0a, 0 0 0 4px #e3996b;
}

[data-theme="signal"] {
  --surface-0: #060b16;
  --surface-1: #0b1424;
  --surface-2: #111d33;
  --surface-3: #182741;
  --scrim: #02060ec4;
  --line: #1f2f4d;
  --line-strong: #6580a3;
  --ink: #dce6f5;
  --ink-muted: #9fb3d1;
  --ink-subtle: #8499bb;
  --ink-disabled: #4f607c;
  --ink-inverse: #060b16;
  --on-fill: #04101a;
  --gel-amber: #e7b46b;
  --gel-amber-fill: #e7b46b;
  --gel-steel: #92b2d2;
  --gel-steel-fill: #92b2d2;
  --gel-congo: #a6a0e0;
  --gel-congo-fill: #a6a0e0;
  --gel-magenta: #e286b8;
  --gel-magenta-fill: #e286b8;
  --gel-go: #77ce96;
  --gel-go-fill: #77ce96;
  --gel-ember: #e3996b;
  --gel-ember-fill: #e3996b;
  --gel-ghost: #b8e8cd;
  --gel-ghost-fill: #b8e8cd;
  --gel-cyan: #7ed9e4;
  --gel-cyan-fill: #7ed9e4;
  --gel-lemon: #edd176;
  --gel-lemon-fill: #edd176;
  --accent: var(--gel-cyan);
  --accent-fill: var(--gel-cyan-fill);
  --accent-2: var(--gel-amber);
  --accent-2-fill: var(--gel-amber-fill);
  --go: var(--gel-go);
  --go-fill: var(--gel-go-fill);
  --focus: var(--gel-cyan);
  --danger: #ed7b83;
  --danger-fill: #ed7b83;
  --on-danger: #1a0509;
  --info: var(--gel-steel);
  --success: var(--go);
  --warn: var(--gel-amber);
  --status-draft: var(--ink-muted);
  --status-live: var(--go);
  --status-done: var(--gel-steel);
  --status-blocked: var(--danger);
  --status-cancelled: var(--ink-subtle);
  --rate-lame: var(--ink-subtle);
  --rate-meh: var(--gel-steel);
  --rate-smh: var(--gel-amber);
  --rate-legend: var(--gel-magenta);
  --dept-lx: var(--gel-amber);
  --dept-snd: var(--gel-steel);
  --dept-vid: var(--gel-congo);
  --dept-str: var(--gel-magenta);
  --shadow-1: 0 1px 2px #000000a6;
  --shadow-2: 0 8px 24px #000000b3;
  --shadow-3: 0 24px 64px #000000cc;
  --shadow-spot: 0 0 48px #7ed9e426;
  --shadow-inset: inset 0 1px 2px #00000080;
  --shadow-focus: 0 0 0 2px #060b16, 0 0 0 4px #7ed9e4;
}

[data-theme="marquee"] {
  --surface-0: #fbf5e8;
  --surface-1: #ffffff;
  --surface-2: #fff0c7;
  --surface-3: #ffffff;
  --scrim: #14100cb8;
  --line: #14100c;
  --line-strong: #14100c;
  --ink: #14100c;
  --ink-muted: #4a4036;
  --ink-subtle: #5d5246;
  --ink-disabled: #a89c8a;
  --ink-inverse: #fbf5e8;
  --on-fill: #14100c;
  --gel-amber: #734e22;
  --gel-amber-fill: #e7b46b;
  --gel-steel: #305a87;
  --gel-steel-fill: #92b2d2;
  --gel-congo: #4e46aa;
  --gel-congo-fill: #a6a0e0;
  --gel-magenta: #9a2c5e;
  --gel-magenta-fill: #e286b8;
  --gel-go: #2b6842;
  --gel-go-fill: #77ce96;
  --gel-ember: #964826;
  --gel-ember-fill: #e3996b;
  --gel-ghost: #2b6749;
  --gel-ghost-fill: #b8e8cd;
  --gel-cyan: #286473;
  --gel-cyan-fill: #7ed9e4;
  --gel-lemon: #665321;
  --gel-lemon-fill: #edd176;
  --accent: var(--gel-lemon);
  --accent-fill: var(--gel-lemon-fill);
  --accent-2: var(--gel-congo);
  --accent-2-fill: var(--gel-congo-fill);
  --go: var(--gel-go);
  --go-fill: var(--gel-go-fill);
  --focus: var(--gel-congo);
  --danger: #b1372d;
  --danger-fill: #eb6456;
  --on-danger: #14100c;
  --info: var(--gel-steel);
  --success: var(--go);
  --warn: var(--gel-amber);
  --status-draft: var(--ink-muted);
  --status-live: var(--go);
  --status-done: var(--gel-steel);
  --status-blocked: var(--danger);
  --status-cancelled: var(--ink-subtle);
  --rate-lame: var(--ink-subtle);
  --rate-meh: var(--gel-steel);
  --rate-smh: var(--gel-amber);
  --rate-legend: var(--gel-magenta);
  --dept-lx: var(--gel-amber);
  --dept-snd: var(--gel-steel);
  --dept-vid: var(--gel-congo);
  --dept-str: var(--gel-magenta);
  --shadow-1: 3px 3px 0 0 #14100c;
  --shadow-2: 5px 5px 0 0 #14100c;
  --shadow-3: 8px 8px 0 0 #14100c;
  --shadow-spot: none;
  --shadow-inset: none;
  --shadow-focus: 0 0 0 2px #fbf5e8, 0 0 0 4px #4e46aa;
}

.display-xl { font-family: var(--font-display); font-size: 96px; line-height: 88px; font-weight: 800; letter-spacing: 0.01em; }
.display-lg { font-family: var(--font-display); font-size: 64px; line-height: 60px; font-weight: 800; letter-spacing: 0.01em; }
.display-md { font-family: var(--font-display); font-size: 44px; line-height: 44px; font-weight: 800; letter-spacing: 0.015em; }
.display-sm { font-family: var(--font-display); font-size: 30px; line-height: 32px; font-weight: 700; letter-spacing: 0.02em; }
.display-xs { font-family: var(--font-display); font-size: 22px; line-height: 24px; font-weight: 700; letter-spacing: 0.03em; }
.lede { font-family: var(--font-sans); font-size: 22px; line-height: 32px; font-weight: 400; }
.body-lg { font-family: var(--font-sans); font-size: 18px; line-height: 28px; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 400; }
.body-sm { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 400; }
.ui { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 600; }
.ui-sm { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 500; }
.label { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; }
.caption { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 400; }
.quote-lg { font-family: var(--font-serif); font-size: 32px; line-height: 40px; font-weight: 500; font-style: italic; }
.quote { font-family: var(--font-serif); font-size: 22px; line-height: 32px; font-weight: 400; font-style: italic; }
.cue-xl { font-family: var(--font-mono); font-size: 56px; line-height: 56px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cue { font-family: var(--font-mono); font-size: 20px; line-height: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.timecode { font-family: var(--font-mono); font-size: 16px; line-height: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }
.data { font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-weight: 400; font-variant-numeric: tabular-nums; }
.data-sm { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 400; font-variant-numeric: tabular-nums; }
.code { font-family: var(--font-mono); font-size: 14px; line-height: 22px; font-weight: 400; font-variant-numeric: tabular-nums; }