:root {
  color-scheme: dark;
  --deck: #0A0D0B;
  --panel: #111614;
  --well: #050706;
  --legend: #D7E6D9;
  --legend-dim: #93A897;
  --legend-faint: #7E9686;
  --lamp: #35D97B;
  --armed: #9FE8B6;
  --clip: #FF5A47;
  --value: #6EE7A4;
  --lamp-hot: #5CF0A0;
  --on-fill: var(--well);
  --on-fill-dim: color-mix(in srgb, var(--on-fill) 72%, transparent);
  --on-fill-quiet: color-mix(in srgb, var(--on-fill) 28%, transparent);
  --scrim: color-mix(in srgb, var(--well) 70%, transparent);
  --stage: #000000;
  --stage-saver: #0C0A1A;
  --grey1: #101614;
  --grey2: #1B2520;
  --grey3: #33463C;
  --grey4: #526E5D;
  --hand: var(--lamp);
  --clock: var(--clip);
  --meter: var(--value);
  --flag: var(--armed);
  --hand-tint: color-mix(in srgb, var(--lamp) 22%, var(--panel));
  --clock-tint: color-mix(in srgb, var(--clip) 22%, var(--panel));
  --meter-tint: color-mix(in srgb, var(--value) 20%, var(--panel));
  --flag-tint: color-mix(in srgb, var(--armed) 22%, var(--panel));
  --ground: var(--deck);
  --paper: var(--deck);
  --ink: var(--legend);
  --dim: var(--legend-dim);
  --faint: var(--legend-faint);
  --v0: #8FE9C0;
  --v1: #57C98A;
  --v2: #39A96B;
  --v3: #7FD8A6;
  --vb: #6E9C81;
  --drum: #7C9B88;
  --q1: #1E4A34;
  --q2: #23895A;
  --q3: #2BB56B;
  --q4: var(--lamp);
  --row-hi: rgba(230, 225, 212, .055);
  --row-lit: rgba(255, 90, 71, .14);
  --lz-h0: #5B9BF0;
  --lz-h1: #4FC188;
  --lz-h2: #B489F5;
  --lz-h3: #F07AA8;
  --lz-h4: #E0A245;
  --lz-h5: #46BFC9;
  --lz-h6: #C99168;
  --lz-h7: #98A2AE;
  --bw: 1px;
  --bw-hard: 2px;
  --rule: var(--grey4);
  --rule-strong: var(--legend-dim);
  --zebra: color-mix(in srgb, var(--legend) 5%, var(--panel));
  --shadow: 2px 2px 0 var(--well);
  --press: 2px;
  --wash: 4%;
  --wash-turn: 137.5deg;
  --wash-sat: 70%;
  --wash-lit: 42%;
  --sans:
    "IBM Plex Sans",
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
  --mono:
    "IBM Plex Mono",
    ui-monospace,
    "SF Mono",
    "Cascadia Code",
    Menlo,
    Consolas,
    monospace;
  --sym:
    system-ui,
    "Segoe UI Symbol",
    "Noto Sans Symbols 2",
    sans-serif;
  --t0: .6rem;
  --t1: .72rem;
  --t2: .82rem;
  --t3: 1rem;
  --t4: 1.15rem;
  --t5: 1.5rem;
  --fw-body: 500;
  --fw-label: 700;
  --fw-block: 800;
  --fw-display: 900;
  --num-fw: 600;
  --btn-fw: var(--fw-body);
  --btn-fs: .875rem;
  --r0: 0;
  --r1: 6px;
  --r2: 3px;
  --r-pill: 999px;
  --s1: .2em;
  --s2: .35em;
  --s3: .55em;
  --s4: .8em;
  --s5: 1.4em;
  --tap: 44px;
  --box: 26px;
  --cell: 36px;
  --ctl: 48px;
  --head-h: 38px;
  --sl-trough: 20px;
  --sl-cap: 38px;
  --sl-grab: 22px;
  --sl-line: 40px;
  --env-h: 132px;
  --env-dot: 11px;
  --gl: 0px;
  --gr: env(safe-area-inset-right, 0px);
  --bar-h: calc(var(--tap) + var(--s1) + var(--s1) + env(safe-area-inset-bottom, 0px));
  --top-h: calc(var(--tap) + env(safe-area-inset-top, 0px));
}
:root[data-theme=light] {
  color-scheme: light;
  --deck: #F4F8FB;
  --panel: #FFFFFF;
  --well: #E8F0F7;
  --legend: #0D1A24;
  --legend-dim: #3C4E5B;
  --legend-faint: #465868;
  --lamp: #0B5FA5;
  --armed: #0D6A9B;
  --clip: #A31912;
  --value: #0A5590;
  --lamp-hot: #094E88;
  --on-fill: #FFFFFF;
  --grey1: #E4EDF4;
  --grey2: #D3E0EB;
  --grey3: #A9BECE;
  --grey4: #6D8BA2;
  --v0: #12599C;
  --v1: #0B6470;
  --v2: #2C4E8C;
  --v3: #155E86;
  --vb: #37505F;
  --drum: #405464;
  --q1: #C3D8C9;
  --q2: #7FB89B;
  --q3: #3C8C60;
  --q4: var(--lamp);
  --lz-h0: #1F5FBF;
  --lz-h1: #1B7A4B;
  --lz-h2: #7A3FBF;
  --lz-h3: #A62B62;
  --lz-h4: #8A5300;
  --lz-h5: #0F6C76;
  --lz-h6: #7A4E24;
  --lz-h7: #4B5563;
  --row-hi: rgba(25, 28, 24, .05);
  --row-lit: rgba(154, 20, 8, .12);
  --shadow: 2px 2px 0 var(--legend);
}
@media (prefers-contrast: more) {
  :root {
    --wash: 0%;
    --v0: var(--ink);
    --v1: var(--ink);
    --v2: var(--ink);
    --v3: var(--ink);
    --vb: var(--ink);
    --drum: var(--ink);
    --q1: var(--hand);
    --q2: var(--hand);
    --q3: var(--hand);
    --q4: var(--hand);
    --row-hi: transparent;
    --row-lit: transparent;
  }
}
@media (forced-colors: active) {
  :root {
    --wash: 0%;
    --v0: CanvasText;
    --v1: CanvasText;
    --v2: CanvasText;
    --v3: CanvasText;
    --vb: CanvasText;
    --drum: CanvasText;
    --q1: Highlight;
    --q2: Highlight;
    --q3: Highlight;
    --q4: Highlight;
    --row-hi: transparent;
    --row-lit: transparent;
  }
}
