/* Generated by scripts/generate-design-tokens.mjs. Do not edit.
 * Input: design-system/tokens.json
 * Source: Hopscotch Design System (from-scratch redesign, final round) 2, artifact https://claude.ai/artifact/WUG5KN7F5ZxjXx1R5aTCRJ version 1793302938-92ed
 * SHA256: f7d85dbd94c0aae73399578e925201975cae2f0075f9392fd16558c1282bfa33


 */

:root {
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  --r-sheet: 20px;
  --r-piece: 12px;
  --r-item: 10px;
  --r-dock: 999px;
  --r-keydock: 22px;
  --r-stone: 3px;
  --r-chip: 7px;
  --r-gtile: 8px;
  --r-key: 12px;
  --r-control: 12px;
  --r-tile: 14px;
  --r-check: 16px;
  --r-surface: 18px;
  --r-pill: 999px;
  --r-glass: 28px;
  --r-pane: 24px;
  --r-bubble: 26px;
  --r-bubble-tuck: 8px;
  --r-block: 0;
  --r-tac: 16px;
  --r-caret: 2px;
  --t-press: 90ms;
  --t-key: 60ms;
  --t-instant: 1ms;
  --t-quick: 180ms;
  --t-spring: 520ms;
  --t-arrive: 620ms;
  --t-wash: 1100ms;
  --t-seal: 560ms;
  --t-stamp: 700ms;
  --t-confetti: 1300ms;
  --t-draw: 900ms;
  --t-glide: 620ms;
  --t-stagger: 42ms;
  --t-pour: 520ms;
  --t-glass: 360ms;
  --t-sweep: 1100ms;
  --t-blink: 1100ms;
  --t-shimmer: 2600ms;
  --t-hush: 1500ms;
  --t-light: 900ms;
  --t-ignite: 760ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(.22,1.4,.36,1);
  --ease-glide: cubic-bezier(.2,.8,.2,1);
  --ease-pour: cubic-bezier(0.3, 1.5, 0.5, 1);
  --rail: 212px;
  --sheet-wide: 1088px;
  --hop-size-rest: 72px;
  --hop-size-talk: 96px;
  --hop-size-hero: 168px;
  --hop-size-corner: 64px;
  --tile-u: 26px;
  --tile-x: 66px;
  --nav-dock: 64px;
  --key-height: 48px;
  --check-height: 56px;
  --target-min: 44px;
  --piece-edge-size: 6px;
  --icon: 20px;
  --breakpoint-rail: 960px;
  --breakpoint-wide: 1000px;
  --column-steps: 720px;
  --column-lens: 860px;
  --column-wide: 1080px;
  --topbar: 52px;
  --line-row: 52px;
  --lip: 5px;
  --glass-blur: 10px;
  --dock-blur: 14px;
  --glass-saturate: 1.15;
  --press-blur: 0px;
  --press-saturate: 1;
  --hop-frost-blur: 0px;
  --font-ui: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-math: "Hopscotch Figures", "Lexend", system-ui, -apple-system, sans-serif;
  --font-voice: "Bricolage Grotesque", "Lexend", system-ui, sans-serif;
  --font-var: "Figtree", "Lexend", system-ui, sans-serif;
  --var-style: italic;
  --var-weight: 500;
  --var-size-adjust: ex-height from-font;
  --var-air: .03em;
  --math-draft: 32px;
  --math-draft-line-height: 1.2;
  --math-draft-weight: 500;
  --math-line: 30px;
  --math-line-line-height: 1.2;
  --math-line-weight: 500;
  --math-given: 28px;
  --math-given-line-height: 1.15;
  --math-given-weight: 500;
  --math-problem: 34px;
  --math-problem-line-height: 1.15;
  --math-problem-weight: 500;
  --math-derive: 21px;
  --math-derive-line-height: 1.3;
  --math-derive-weight: 500;
  --math-tile: 22px;
  --math-tile-line-height: 1;
  --math-tile-weight: 600;
  --math-small: 15px;
  --math-small-line-height: 1.2;
  --math-small-weight: 500;
  --tile-numeral: 14px;
  --tile-numeral-line-height: 1;
  --tile-numeral-weight: 700;
  --math-kid: 46px;
  --math-kid-line-height: 1.15;
  --math-kid-weight: 400;
  --math-teen: 34px;
  --math-teen-line-height: 1.15;
  --math-teen-weight: 400;
  --check-label: 17px;
  --check-label-line-height: 1;
  --check-label-weight: 600;
  --sheet-title: 17px;
  --sheet-title-line-height: 1.2;
  --sheet-title-weight: 600;
  --body: 15px;
  --body-line-height: 1.45;
  --body-weight: 400;
  --control: 14px;
  --control-line-height: 1;
  --control-weight: 500;
  --hint: 13px;
  --hint-line-height: 1.4;
  --hint-weight: 400;
  --tag: 12px;
  --tag-line-height: 1;
  --tag-weight: 600;
  --eyebrow: 11px;
  --eyebrow-line-height: 1;
  --eyebrow-weight: 600;
  --eyebrow-tracking: 0.08em;
  --label: 14px;
  --label-line-height: 1.3;
  --label-weight: 500;
  --figure: 15px;
  --figure-line-height: 1.2;
  --figure-weight: 500;
  --rail-label: 14px;
  --rail-label-line-height: 1;
  --rail-label-weight: 600;
  --key-label: 20px;
  --key-label-line-height: 1;
  --key-label-weight: 600;
  --board-name: 15px;
  --board-name-line-height: 1.2;
  --board-name-weight: 600;
  --hop-voice: 18px;
  --hop-voice-line-height: 1.45;
  --hop-voice-weight: 500;
  --display: 40px;
  --display-line-height: 1.05;
  --display-weight: 700;
  --title: 24px;
  --title-line-height: 1.2;
  --title-weight: 650;
  --hop-words: 22px;
  --hop-words-line-height: 1.25;
  --hop-words-weight: 700;
  --hop-words-tracking: -0.005em;
}

:root,
.light:not([data-theme="dark"]),
[data-theme="light"] {
  --desk: #f2f3f6;
  --desk-2: #e8eaf0;
  --sheet-solid: #ffffff;
  --glass: rgba(255, 255, 255, 0.52);
  --glass-strong: rgba(255, 255, 255, 0.78);
  --glass-edge: rgba(255, 255, 255, 0.95);
  --glass-edge-low: rgba(20, 25, 50, 0.10);
  --glass-under-rim: rgba(120, 135, 170, 0.40);
  --glass-shadow: rgba(30, 40, 80, 0.30);
  --ink: #15172b;
  --ink-2: #565b78;
  --ink-3: #5f6484;
  --rule: rgba(21, 23, 43, 0.12);
  --rule-strong: rgba(21, 23, 43, 0.28);
  --learner: #2e46e0;
  --act: var(--learner);
  --act-ink: #2b40c8;
  --piece: #3d5afe;
  --piece-edge: #2536b8;
  --on-piece: #ffffff;
  --key: #ffffff;
  --key-edge: #c6cbdc;
  --on-key: var(--ink);
  --act-soft: rgba(61, 90, 254, 0.12);
  --e1: #f0513a;
  --e1-ink: #b8432c;
  --e1-soft: rgba(240, 81, 58, 0.14);
  --e2: #0a8fdc;
  --e2-ink: #0a6aa6;
  --e2-soft: rgba(10, 143, 220, 0.14);
  --on-e: #15172b;
  --e1-edge: #c2553a;
  --e2-edge: #1a73a6;
  --look: #8a5600;
  --look-mark: #b87300;
  --look-soft: rgba(242, 158, 0, 0.14);
  --on-look: #120b00;
  --go: #136f47;
  --go-mark: #0f8a4f;
  --go-soft: rgba(19, 181, 102, 0.14);
  --on-go: #ffffff;
  --hop-ultra: #3d5afe;
  --hop-sky: #0a8fdc;
  --hop-lsky: #7fd0ff;
  --hop-buffer: #ffffff;
  --hop-coral: #f0513a;
  --hop-ember: #ff8a3d;
  --hop-eye: #ffffff;
  --hop-glow: rgba(61, 90, 254, 0.18);
  --words-1: #2b40c8;
  --words-2: #0a6aa6;
  --words-3: #0a8fdc;
  --words-4: #d9452c;
  --caret-core: #15172b;
  --term-var: #0b6aa0;
  --term-var-edge: #064970;
  --term-const: var(--ink);
  --tile-1: #218a38;
  --tile-1-edge: #145a24;
  --tile-1-on: #ffffff;
  --tile-neg-1: #c8102e;
  --tile-neg-1-edge: #8c0b20;
  --tile-neg-x: #a3174f;
  --tile-neg-x-edge: #6b0f33;
  --tile-neg-sq: #6d1038;
  --tile-neg-sq-edge: #430a22;
  --tile-neg-on: #ffffff;
  --tile-sq: #063e69;
  --tile-sq-edge: #02223b;
  --v-model: #0a7f8a;
  --v-model-ink: #086a73;
  --v-model-soft: rgba(10, 127, 138, 0.14);
  --v-graph: var(--e2);
  --v-graph-ink: var(--e2-ink);
  --v-graph-soft: var(--e2-soft);
  --v-table: #4b5a9a;
  --v-table-ink: #3a4780;
  --v-table-soft: rgba(75, 90, 154, 0.14);
  --grid-line: rgba(21, 23, 43, 0.08);
  --axis: var(--ink-3);
  --shade: rgba(21, 23, 43, 0.28);
  --mark-ultra: var(--piece);
  --mark-ultra-cut: #ffffff;
  --mark-lagoon: var(--v-model);
  --mark-lagoon-cut: #ffffff;
  --mark-coral: var(--e1);
  --mark-coral-cut: #2a0a03;
  --mark-sky: var(--e2);
  --mark-sky-cut: #ffffff;
  --mark-amber: var(--look-mark);
  --mark-amber-cut: #2a1a00;
  --mark-slate: var(--v-table);
  --mark-slate-cut: #ffffff;
  --paper: var(--sheet-solid);
  --ground: var(--desk);
  --ground-2: var(--desk-2);
  --wash: var(--desk-2);
  --b-ultra: var(--piece);
  --on-ultra: var(--on-piece);
  --b-coral: var(--e1);
  --b-jade: var(--go);
  --b-saffron: var(--look-mark);
  --b-lagoon: var(--v-model);
  --b-iris: var(--v-model);
  --ok: var(--go);
  --ok-ink: var(--go);
  --ok-mark: var(--go);
  --on-ok-mark: var(--on-go);
  --ok-soft: var(--go-soft);
  --ok-glass: var(--go);
  --ask: var(--look-mark);
  --ask-ink: var(--look);
  --ask-mark: var(--look-mark);
  --ask-soft: var(--look-soft);
  --on-ask: var(--on-look);
  --act-face: #3d5afe;
  --act-lip: var(--piece-edge);
  --on-act: #ffffff;
  --act-edge: var(--piece-edge);
  --act-glass: #3d5afe;
  --neutral-face: var(--key);
  --neutral-lip: var(--key-edge);
  --key-fn: var(--key);
  --glass-regular: var(--glass);
  --glass-rim: var(--glass-edge);
  --glass-rim-low: var(--glass-edge-low);
  --glass-underrim: var(--glass-under-rim);
  --glass-tint: var(--glass-strong);
  --glass-solid: var(--sheet-solid);
  --hop-lit: var(--glass-edge);
  --hop-lit-side: var(--glass-edge-low);
  --tab-on: var(--act-soft);
  --hop-1: var(--hop-ultra);
  --hop-2: var(--hop-sky);
  --hop-3: var(--hop-lsky);
  --hop-4: var(--hop-coral);
  --hop-5: var(--hop-ember);
  --ai-1: var(--words-1);
  --ai-2: var(--words-2);
  --ai-3: var(--words-3);
  --ai-4: var(--words-4);
  --v-model-wash: var(--desk);
  --v-model-edge: var(--v-model-ink);
  --v-graph-wash: #c9e2f7;
  --v-table-wash: #d3d9f0;
  --mark-iris: var(--mark-sky);
  --mark-iris-cut: var(--mark-sky-cut);
  --mark-plum: var(--mark-amber);
  --mark-plum-cut: var(--mark-amber-cut);
  --cerulean: var(--e2);
  --ultramarine: var(--piece);
  --coral: var(--e1);
  --press-shadow: var(--glass-shadow);
  --act-shadow: var(--glass-shadow);
  --on-coral: #2a0a03;
  --on-jade: #ffffff;
  --on-saffron: #120b00;
  --on-lagoon: #ffffff;
  --on-iris: #ffffff;
  --wash-2: #e9ebf1;
  --on-ok: #ffffff;
  --ok-edge: rgba(6, 110, 62, 0.55);
  --glass-clear: rgba(255, 255, 255, 0.30);
  --contact: rgba(21, 23, 43, 0.35);
  --pool-act: var(--desk);
  --pool-e1: var(--desk);
  --pool-graph: var(--desk);
  --pool-model: var(--desk);
  --lens: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(20, 25, 50, 0.10), 0 4px 0 -1px rgba(120, 135, 170, 0.40), 0 24px 40px -24px rgba(30, 40, 80, 0.30);
  --lens-dock: inset 0 1.5px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(20, 25, 50, 0.10), 0 5px 0 -2px rgba(120, 135, 170, 0.40), 0 22px 34px -22px rgba(30, 40, 80, 0.30);
  --lens-flat: inset 0 1.5px 0 rgba(255, 255, 255, 0.95);
  --piece-shadow: 0 6px 0 #2536b8;
  --piece-pressed: 0 1px 0 #2536b8;
  --piece-small: 0 4px 0 #2536b8;
  --key-shadow: 0 4px 0 #c6cbdc;
  --key-pressed: 0 1px 0 #c6cbdc;
  --key-small: 0 3px 0 #c6cbdc;
  --e1-shadow: 0 4px 0 #c2553a;
  --e2-shadow: 0 4px 0 #1a73a6;
  --go-shadow: 0 6px 0 #0f6a40;
  --lift-check: inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 3px 0 rgba(37, 54, 184, 0.55), 0 10px 24px rgba(61, 90, 254, 0.3);
  --lift-button: inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 3px 0 rgba(37, 54, 184, 0.55), 0 10px 24px rgba(61, 90, 254, 0.3);
  --lift-key: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 2px 0 rgba(120, 135, 170, 0.2);
  --lift-gtile: 0 2.5px 0 #c2553a;
  --pop: 0 22px 48px -20px rgba(21, 23, 43, 0.38), 0 2px 10px rgba(21, 23, 43, 0.08);
  --glass-lift: 0 18px 40px rgba(30, 40, 80, 0.16);
  --glass-rims: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(255, 255, 255, 0.3), 0 0 0 0.5px rgba(21, 23, 43, 0.08);
  --glass-rims-contrast: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 0 0 1px #4C4775;
  --glass-rims-e1: inset 0 1px 0 #E85A3A, inset 0 -1px 0 rgba(255, 255, 255, 0.3), 0 0 0 0.5px rgba(21, 23, 43, 0.08);
  --glass-rims-model: inset 0 1px 0 #0a7f8a, inset 0 -1px 0 rgba(255, 255, 255, 0.3), 0 0 0 0.5px rgba(21, 23, 43, 0.08);
  --glass-rims-graph: inset 0 1px 0 #1e9e95, inset 0 -1px 0 rgba(255, 255, 255, 0.3), 0 0 0 0.5px rgba(21, 23, 43, 0.08);
  --glass-rims-table: inset 0 1px 0 #4b5a9a, inset 0 -1px 0 rgba(255, 255, 255, 0.3), 0 0 0 0.5px rgba(21, 23, 43, 0.08);
  --glass-rims-ask: inset 0 1px 0 #f29e00, inset 0 -1px 0 rgba(255, 255, 255, 0.3), 0 0 0 0.5px rgba(21, 23, 43, 0.08);
  --glass-rims-ok: inset 0 1px 0 #13b566, inset 0 -1px 0 rgba(255, 255, 255, 0.3), 0 0 0 0.5px rgba(21, 23, 43, 0.08);
  --hop-lit-left: inset 0 1.5px 0 rgba(255, 255, 255, 0.95), inset 1px 0 0 rgba(255, 255, 255, 0.5);
  --hop-lit-right: inset 0 1.5px 0 rgba(255, 255, 255, 0.95), inset -1px 0 0 rgba(255, 255, 255, 0.5);
  --hop-lit-top: inset 0 1.5px 0 rgba(255, 255, 255, 0.95);
  --raised-rims: inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -1px 0 rgba(0, 0, 0, 0.12);
  --bubble-lift: 0 12px 28px rgba(61, 90, 254, 0.3);
  --lift-pressed: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 0 rgba(37, 54, 184, 0.55), 0 4px 10px rgba(61, 90, 254, 0.3);
  --lift-chip: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 0 0 0.5px rgba(21, 23, 43, 0.08), 0 2px 0 rgba(120, 135, 170, 0.2), 0 8px 18px rgba(30, 40, 80, 0.14);
  --lift-chip-act: inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 2px 0 rgba(37, 54, 184, 0.55), 0 8px 20px rgba(61, 90, 254, 0.3);
  --lift-chip-pressed: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 0 0 0.5px rgba(21, 23, 43, 0.08);
  --lift-key-pressed: inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --lift-ok: inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 3px 0 rgba(6, 110, 62, 0.55), 0 10px 24px rgba(30, 40, 80, 0.14);
  --lift-ok-pressed: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 0 rgba(6, 110, 62, 0.55), 0 4px 10px rgba(30, 40, 80, 0.14);
  --tac: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 6px 0 #2536b8, 0 9px 12px rgba(21, 23, 43, 0.35);
  --tac-pressed: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 0 0 #2536b8, 0 1px 3px rgba(21, 23, 43, 0.35);
  --tac-ok: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 6px 0 #0f6a40, 0 9px 12px rgba(21, 23, 43, 0.35);
  --tac-key: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 3px 0 #c6cbdc, 0 6px 8px rgba(21, 23, 43, 0.35);
  --tac-key-act: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 3px 0 #2536b8, 0 6px 8px rgba(21, 23, 43, 0.35);
  --tac-key-pressed: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 0 0 #c6cbdc, 0 1px 2px rgba(21, 23, 43, 0.35);
  --glass-under: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(20, 25, 50, 0.10);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]):not(.light):not(.dark) {
    --desk: #1b1e26;
    --desk-2: #232732;
    --sheet-solid: #2a2f3b;
    --glass: rgba(44, 49, 61, 0.62);
    --glass-strong: rgba(44, 49, 61, 0.84);
    --glass-edge: rgba(255, 255, 255, 0.16);
    --glass-edge-low: rgba(255, 255, 255, 0.05);
    --glass-under-rim: rgba(0, 0, 0, 0.55);
    --glass-shadow: rgba(0, 0, 0, 0.60);
    --ink: #eef1f7;
    --ink-2: #b4b9cc;
    --ink-3: #9aa0b4;
    --rule: rgba(255, 255, 255, 0.12);
    --rule-strong: rgba(255, 255, 255, 0.30);
    --learner: #9fb0ff;
    --act: var(--learner);
    --act-ink: #aab9ff;
    --piece: #4660f0;
    --piece-edge: #1f2f9c;
    --on-piece: #ffffff;
    --key: #3a3f4d;
    --key-edge: #07080c;
    --on-key: var(--ink);
    --act-soft: rgba(127, 149, 255, 0.18);
    --e1: #ff7a63;
    --e1-ink: #ffb3a3;
    --e1-soft: rgba(255, 122, 99, 0.20);
    --e2: #3db4f5;
    --e2-ink: #9fd8ff;
    --e2-soft: rgba(61, 180, 245, 0.20);
    --on-e: #0d1020;
    --e1-edge: #c75a43;
    --e2-edge: #2f7fae;
    --look: #ffb84d;
    --look-mark: #ffb84d;
    --look-soft: rgba(255, 184, 77, 0.18);
    --on-look: #2a1a00;
    --go: #4fd29a;
    --go-mark: #3ddc84;
    --go-soft: rgba(61, 220, 132, 0.18);
    --on-go: #02170e;
    --hop-ultra: #3d5afe;
    --hop-sky: #0a8fdc;
    --hop-lsky: #7fd0ff;
    --hop-buffer: #ffffff;
    --hop-coral: #f0513a;
    --hop-ember: #ffa060;
    --hop-eye: #ffffff;
    --hop-glow: rgba(127, 149, 255, 0.28);
    --words-1: #8fa3ff;
    --words-2: #3db4f5;
    --words-3: #bfe6ff;
    --words-4: #ff7a63;
    --caret-core: #ffffff;
    --term-var: #3b8fc6;
    --term-var-edge: #1f5d8a;
    --term-const: var(--ink);
    --tile-1: #5ccf6b;
    --tile-1-edge: #2f8f40;
    --tile-1-on: #0a1f0f;
    --tile-neg-1: #ff6b7a;
    --tile-neg-1-edge: #b5404f;
    --tile-neg-x: #e0568f;
    --tile-neg-x-edge: #a13a69;
    --tile-neg-sq: #b0407a;
    --tile-neg-sq-edge: #6e2650;
    --tile-neg-on: #2a0a10;
    --tile-sq: #1e5a8e;
    --tile-sq-edge: #0f3556;
    --v-model: #5fd0dc;
    --v-model-ink: #9fe4ec;
    --v-model-soft: rgba(95, 208, 220, 0.18);
    --v-graph: var(--e2);
    --v-graph-ink: var(--e2-ink);
    --v-graph-soft: var(--e2-soft);
    --v-table: #aab6e8;
    --v-table-ink: #c5cdf2;
    --v-table-soft: rgba(170, 182, 232, 0.18);
    --grid-line: rgba(255, 255, 255, 0.08);
    --axis: var(--ink-3);
    --shade: rgba(0, 0, 0, 0.60);
    --mark-ultra: var(--piece);
    --mark-ultra-cut: #0c0b1d;
    --mark-lagoon: var(--v-model);
    --mark-lagoon-cut: #0c0b1d;
    --mark-coral: var(--e1);
    --mark-coral-cut: #0c0b1d;
    --mark-sky: var(--e2);
    --mark-sky-cut: #0c0b1d;
    --mark-amber: var(--look-mark);
    --mark-amber-cut: #0c0b1d;
    --mark-slate: var(--v-table);
    --mark-slate-cut: #0c0b1d;
    --paper: var(--sheet-solid);
    --ground: var(--desk);
    --ground-2: var(--desk-2);
    --wash: var(--desk-2);
    --b-ultra: var(--piece);
    --on-ultra: var(--on-piece);
    --b-coral: var(--e1);
    --b-jade: var(--go);
    --b-saffron: var(--look-mark);
    --b-lagoon: var(--v-model);
    --b-iris: var(--v-model);
    --ok: var(--go);
    --ok-ink: var(--go);
    --ok-mark: var(--go);
    --on-ok-mark: var(--on-go);
    --ok-soft: var(--go-soft);
    --ok-glass: var(--go);
    --ask: var(--look-mark);
    --ask-ink: var(--look);
    --ask-mark: var(--look-mark);
    --ask-soft: var(--look-soft);
    --on-ask: var(--on-look);
    --act-face: #9fb0ff;
    --act-lip: var(--piece-edge);
    --on-act: #15172b;
    --act-edge: var(--piece-edge);
    --act-glass: #9fb0ff;
    --neutral-face: var(--key);
    --neutral-lip: var(--key-edge);
    --key-fn: var(--key);
    --glass-regular: var(--glass);
    --glass-rim: var(--glass-edge);
    --glass-rim-low: var(--glass-edge-low);
    --glass-underrim: var(--glass-under-rim);
    --glass-tint: var(--glass-strong);
    --glass-solid: var(--sheet-solid);
    --hop-lit: var(--glass-edge);
    --hop-lit-side: var(--glass-edge-low);
    --tab-on: var(--act-soft);
    --hop-1: var(--hop-ultra);
    --hop-2: var(--hop-sky);
    --hop-3: var(--hop-lsky);
    --hop-4: var(--hop-coral);
    --hop-5: var(--hop-ember);
    --ai-1: var(--words-1);
    --ai-2: var(--words-2);
    --ai-3: var(--words-3);
    --ai-4: var(--words-4);
    --v-model-wash: var(--desk);
    --v-model-edge: var(--v-model-ink);
    --v-graph-wash: #11334f;
    --v-table-wash: #232a52;
    --mark-iris: var(--mark-sky);
    --mark-iris-cut: var(--mark-sky-cut);
    --mark-plum: var(--mark-amber);
    --mark-plum-cut: var(--mark-amber-cut);
    --cerulean: var(--e2);
    --ultramarine: var(--piece);
    --coral: var(--e1);
    --press-shadow: var(--glass-shadow);
    --act-shadow: var(--glass-shadow);
    --on-coral: #1a0a06;
    --on-jade: #02170e;
    --on-saffron: #2a1a00;
    --on-lagoon: #06262a;
    --on-iris: #06262a;
    --wash-2: #2b303d;
    --on-ok: #02170e;
    --ok-edge: rgba(4, 40, 22, 0.6);
    --glass-clear: rgba(44, 49, 61, 0.40);
    --contact: rgba(0, 0, 0, 0.60);
    --pool-act: var(--desk);
    --pool-e1: var(--desk);
    --pool-graph: var(--desk);
    --pool-model: var(--desk);
    --lens: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(255, 255, 255, 0.05), 0 4px 0 -1px rgba(0, 0, 0, 0.55), 0 24px 40px -24px rgba(0, 0, 0, 0.60);
    --lens-dock: inset 0 1.5px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(255, 255, 255, 0.05), 0 5px 0 -2px rgba(0, 0, 0, 0.55), 0 22px 34px -22px rgba(0, 0, 0, 0.60);
    --lens-flat: inset 0 1.5px 0 rgba(255, 255, 255, 0.16);
    --piece-shadow: 0 6px 0 #1f2f9c;
    --piece-pressed: 0 1px 0 #1f2f9c;
    --piece-small: 0 4px 0 #1f2f9c;
    --key-shadow: 0 4px 0 #07080c;
    --key-pressed: 0 1px 0 #07080c;
    --key-small: 0 3px 0 #07080c;
    --e1-shadow: 0 4px 0 #c75a43;
    --e2-shadow: 0 4px 0 #2f7fae;
    --go-shadow: 0 6px 0 #0d4a30;
    --lift-check: inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 3px 0 rgba(10, 12, 50, 0.6), 0 10px 24px rgba(79, 106, 255, 0.28);
    --lift-button: inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 3px 0 rgba(10, 12, 50, 0.6), 0 10px 24px rgba(79, 106, 255, 0.28);
    --lift-key: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 2px 0 rgba(0, 0, 0, 0.5);
    --lift-gtile: 0 2.5px 0 #a8553d;
    --pop: 0 24px 50px -18px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.06);
    --glass-lift: 0 0 0 0 rgba(0, 0, 0, 0);
    --glass-rims: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(255, 255, 255, 0.06), 0 0 0 0.5px rgba(0, 0, 0, 0.5);
    --glass-rims-contrast: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 0 1px #B4AFDB;
    --glass-rims-e1: inset 0 1px 0 #f99c7c, inset 0 -1px 0 rgba(255, 255, 255, 0.06), 0 0 0 0.5px rgba(0, 0, 0, 0.5);
    --glass-rims-model: inset 0 1px 0 #5fd0dc, inset 0 -1px 0 rgba(255, 255, 255, 0.06), 0 0 0 0.5px rgba(0, 0, 0, 0.5);
    --glass-rims-graph: inset 0 1px 0 #4fd0c4, inset 0 -1px 0 rgba(255, 255, 255, 0.06), 0 0 0 0.5px rgba(0, 0, 0, 0.5);
    --glass-rims-table: inset 0 1px 0 #aab6e8, inset 0 -1px 0 rgba(255, 255, 255, 0.06), 0 0 0 0.5px rgba(0, 0, 0, 0.5);
    --glass-rims-ask: inset 0 1px 0 #ffb84d, inset 0 -1px 0 rgba(255, 255, 255, 0.06), 0 0 0 0.5px rgba(0, 0, 0, 0.5);
    --glass-rims-ok: inset 0 1px 0 #3ddc84, inset 0 -1px 0 rgba(255, 255, 255, 0.06), 0 0 0 0.5px rgba(0, 0, 0, 0.5);
    --hop-lit-left: inset 0 1.5px 0 rgba(255, 255, 255, 0.5), inset 1px 0 0 rgba(255, 255, 255, 0.22);
    --hop-lit-right: inset 0 1.5px 0 rgba(255, 255, 255, 0.5), inset -1px 0 0 rgba(255, 255, 255, 0.22);
    --hop-lit-top: inset 0 1.5px 0 rgba(255, 255, 255, 0.5);
    --raised-rims: inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -1px 0 rgba(0, 0, 0, 0.12);
    --bubble-lift: 0 12px 28px rgba(79, 106, 255, 0.28);
    --lift-pressed: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 0 rgba(10, 12, 50, 0.6), 0 4px 10px rgba(79, 106, 255, 0.28);
    --lift-chip: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 0 0.5px rgba(0, 0, 0, 0.5), 0 2px 0 rgba(0, 0, 0, 0.5), 0 8px 18px rgba(0, 0, 0, 0.3);
    --lift-chip-act: inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 2px 0 rgba(10, 12, 50, 0.6), 0 8px 20px rgba(79, 106, 255, 0.28);
    --lift-chip-pressed: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 0 0.5px rgba(0, 0, 0, 0.5);
    --lift-key-pressed: inset 0 1px 0 rgba(255, 255, 255, 0.16);
    --lift-ok: inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 3px 0 rgba(4, 40, 22, 0.6), 0 10px 24px rgba(0, 0, 0, 0.3);
    --lift-ok-pressed: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 0 rgba(4, 40, 22, 0.6), 0 4px 10px rgba(0, 0, 0, 0.3);
    --tac: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 6px 0 #2536b8, 0 9px 12px rgba(21, 23, 43, 0.35);
    --tac-pressed: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 0 #1f2f9c, 0 1px 3px #00000099;
    --tac-ok: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 6px 0 #0f6a40, 0 9px 12px rgba(21, 23, 43, 0.35);
    --tac-key: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 3px 0 #07080c, 0 6px 8px #00000099;
    --tac-key-act: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 3px 0 #1f2f9c, 0 6px 8px #00000099;
    --tac-key-pressed: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 0 #07080c, 0 1px 2px #00000099;
    --glass-under: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(255, 255, 255, 0.05);
    color-scheme: dark;
  }
}

.dark:not([data-theme="light"]),
[data-theme="dark"] {
  --desk: #1b1e26;
  --desk-2: #232732;
  --sheet-solid: #2a2f3b;
  --glass: rgba(44, 49, 61, 0.62);
  --glass-strong: rgba(44, 49, 61, 0.84);
  --glass-edge: rgba(255, 255, 255, 0.16);
  --glass-edge-low: rgba(255, 255, 255, 0.05);
  --glass-under-rim: rgba(0, 0, 0, 0.55);
  --glass-shadow: rgba(0, 0, 0, 0.60);
  --ink: #eef1f7;
  --ink-2: #b4b9cc;
  --ink-3: #9aa0b4;
  --rule: rgba(255, 255, 255, 0.12);
  --rule-strong: rgba(255, 255, 255, 0.30);
  --learner: #9fb0ff;
  --act: var(--learner);
  --act-ink: #aab9ff;
  --piece: #4660f0;
  --piece-edge: #1f2f9c;
  --on-piece: #ffffff;
  --key: #3a3f4d;
  --key-edge: #07080c;
  --on-key: var(--ink);
  --act-soft: rgba(127, 149, 255, 0.18);
  --e1: #ff7a63;
  --e1-ink: #ffb3a3;
  --e1-soft: rgba(255, 122, 99, 0.20);
  --e2: #3db4f5;
  --e2-ink: #9fd8ff;
  --e2-soft: rgba(61, 180, 245, 0.20);
  --on-e: #0d1020;
  --e1-edge: #c75a43;
  --e2-edge: #2f7fae;
  --look: #ffb84d;
  --look-mark: #ffb84d;
  --look-soft: rgba(255, 184, 77, 0.18);
  --on-look: #2a1a00;
  --go: #4fd29a;
  --go-mark: #3ddc84;
  --go-soft: rgba(61, 220, 132, 0.18);
  --on-go: #02170e;
  --hop-ultra: #3d5afe;
  --hop-sky: #0a8fdc;
  --hop-lsky: #7fd0ff;
  --hop-buffer: #ffffff;
  --hop-coral: #f0513a;
  --hop-ember: #ffa060;
  --hop-eye: #ffffff;
  --hop-glow: rgba(127, 149, 255, 0.28);
  --words-1: #8fa3ff;
  --words-2: #3db4f5;
  --words-3: #bfe6ff;
  --words-4: #ff7a63;
  --caret-core: #ffffff;
  --term-var: #3b8fc6;
  --term-var-edge: #1f5d8a;
  --term-const: var(--ink);
  --tile-1: #5ccf6b;
  --tile-1-edge: #2f8f40;
  --tile-1-on: #0a1f0f;
  --tile-neg-1: #ff6b7a;
  --tile-neg-1-edge: #b5404f;
  --tile-neg-x: #e0568f;
  --tile-neg-x-edge: #a13a69;
  --tile-neg-sq: #b0407a;
  --tile-neg-sq-edge: #6e2650;
  --tile-neg-on: #2a0a10;
  --tile-sq: #1e5a8e;
  --tile-sq-edge: #0f3556;
  --v-model: #5fd0dc;
  --v-model-ink: #9fe4ec;
  --v-model-soft: rgba(95, 208, 220, 0.18);
  --v-graph: var(--e2);
  --v-graph-ink: var(--e2-ink);
  --v-graph-soft: var(--e2-soft);
  --v-table: #aab6e8;
  --v-table-ink: #c5cdf2;
  --v-table-soft: rgba(170, 182, 232, 0.18);
  --grid-line: rgba(255, 255, 255, 0.08);
  --axis: var(--ink-3);
  --shade: rgba(0, 0, 0, 0.60);
  --mark-ultra: var(--piece);
  --mark-ultra-cut: #0c0b1d;
  --mark-lagoon: var(--v-model);
  --mark-lagoon-cut: #0c0b1d;
  --mark-coral: var(--e1);
  --mark-coral-cut: #0c0b1d;
  --mark-sky: var(--e2);
  --mark-sky-cut: #0c0b1d;
  --mark-amber: var(--look-mark);
  --mark-amber-cut: #0c0b1d;
  --mark-slate: var(--v-table);
  --mark-slate-cut: #0c0b1d;
  --paper: var(--sheet-solid);
  --ground: var(--desk);
  --ground-2: var(--desk-2);
  --wash: var(--desk-2);
  --b-ultra: var(--piece);
  --on-ultra: var(--on-piece);
  --b-coral: var(--e1);
  --b-jade: var(--go);
  --b-saffron: var(--look-mark);
  --b-lagoon: var(--v-model);
  --b-iris: var(--v-model);
  --ok: var(--go);
  --ok-ink: var(--go);
  --ok-mark: var(--go);
  --on-ok-mark: var(--on-go);
  --ok-soft: var(--go-soft);
  --ok-glass: var(--go);
  --ask: var(--look-mark);
  --ask-ink: var(--look);
  --ask-mark: var(--look-mark);
  --ask-soft: var(--look-soft);
  --on-ask: var(--on-look);
  --act-face: #9fb0ff;
  --act-lip: var(--piece-edge);
  --on-act: #15172b;
  --act-edge: var(--piece-edge);
  --act-glass: #9fb0ff;
  --neutral-face: var(--key);
  --neutral-lip: var(--key-edge);
  --key-fn: var(--key);
  --glass-regular: var(--glass);
  --glass-rim: var(--glass-edge);
  --glass-rim-low: var(--glass-edge-low);
  --glass-underrim: var(--glass-under-rim);
  --glass-tint: var(--glass-strong);
  --glass-solid: var(--sheet-solid);
  --hop-lit: var(--glass-edge);
  --hop-lit-side: var(--glass-edge-low);
  --tab-on: var(--act-soft);
  --hop-1: var(--hop-ultra);
  --hop-2: var(--hop-sky);
  --hop-3: var(--hop-lsky);
  --hop-4: var(--hop-coral);
  --hop-5: var(--hop-ember);
  --ai-1: var(--words-1);
  --ai-2: var(--words-2);
  --ai-3: var(--words-3);
  --ai-4: var(--words-4);
  --v-model-wash: var(--desk);
  --v-model-edge: var(--v-model-ink);
  --v-graph-wash: #11334f;
  --v-table-wash: #232a52;
  --mark-iris: var(--mark-sky);
  --mark-iris-cut: var(--mark-sky-cut);
  --mark-plum: var(--mark-amber);
  --mark-plum-cut: var(--mark-amber-cut);
  --cerulean: var(--e2);
  --ultramarine: var(--piece);
  --coral: var(--e1);
  --press-shadow: var(--glass-shadow);
  --act-shadow: var(--glass-shadow);
  --on-coral: #1a0a06;
  --on-jade: #02170e;
  --on-saffron: #2a1a00;
  --on-lagoon: #06262a;
  --on-iris: #06262a;
  --wash-2: #2b303d;
  --on-ok: #02170e;
  --ok-edge: rgba(4, 40, 22, 0.6);
  --glass-clear: rgba(44, 49, 61, 0.40);
  --contact: rgba(0, 0, 0, 0.60);
  --pool-act: var(--desk);
  --pool-e1: var(--desk);
  --pool-graph: var(--desk);
  --pool-model: var(--desk);
  --lens: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(255, 255, 255, 0.05), 0 4px 0 -1px rgba(0, 0, 0, 0.55), 0 24px 40px -24px rgba(0, 0, 0, 0.60);
  --lens-dock: inset 0 1.5px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(255, 255, 255, 0.05), 0 5px 0 -2px rgba(0, 0, 0, 0.55), 0 22px 34px -22px rgba(0, 0, 0, 0.60);
  --lens-flat: inset 0 1.5px 0 rgba(255, 255, 255, 0.16);
  --piece-shadow: 0 6px 0 #1f2f9c;
  --piece-pressed: 0 1px 0 #1f2f9c;
  --piece-small: 0 4px 0 #1f2f9c;
  --key-shadow: 0 4px 0 #07080c;
  --key-pressed: 0 1px 0 #07080c;
  --key-small: 0 3px 0 #07080c;
  --e1-shadow: 0 4px 0 #c75a43;
  --e2-shadow: 0 4px 0 #2f7fae;
  --go-shadow: 0 6px 0 #0d4a30;
  --lift-check: inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 3px 0 rgba(10, 12, 50, 0.6), 0 10px 24px rgba(79, 106, 255, 0.28);
  --lift-button: inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 3px 0 rgba(10, 12, 50, 0.6), 0 10px 24px rgba(79, 106, 255, 0.28);
  --lift-key: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 2px 0 rgba(0, 0, 0, 0.5);
  --lift-gtile: 0 2.5px 0 #a8553d;
  --pop: 0 24px 50px -18px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --glass-lift: 0 0 0 0 rgba(0, 0, 0, 0);
  --glass-rims: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(255, 255, 255, 0.06), 0 0 0 0.5px rgba(0, 0, 0, 0.5);
  --glass-rims-contrast: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 0 1px #B4AFDB;
  --glass-rims-e1: inset 0 1px 0 #f99c7c, inset 0 -1px 0 rgba(255, 255, 255, 0.06), 0 0 0 0.5px rgba(0, 0, 0, 0.5);
  --glass-rims-model: inset 0 1px 0 #5fd0dc, inset 0 -1px 0 rgba(255, 255, 255, 0.06), 0 0 0 0.5px rgba(0, 0, 0, 0.5);
  --glass-rims-graph: inset 0 1px 0 #4fd0c4, inset 0 -1px 0 rgba(255, 255, 255, 0.06), 0 0 0 0.5px rgba(0, 0, 0, 0.5);
  --glass-rims-table: inset 0 1px 0 #aab6e8, inset 0 -1px 0 rgba(255, 255, 255, 0.06), 0 0 0 0.5px rgba(0, 0, 0, 0.5);
  --glass-rims-ask: inset 0 1px 0 #ffb84d, inset 0 -1px 0 rgba(255, 255, 255, 0.06), 0 0 0 0.5px rgba(0, 0, 0, 0.5);
  --glass-rims-ok: inset 0 1px 0 #3ddc84, inset 0 -1px 0 rgba(255, 255, 255, 0.06), 0 0 0 0.5px rgba(0, 0, 0, 0.5);
  --hop-lit-left: inset 0 1.5px 0 rgba(255, 255, 255, 0.5), inset 1px 0 0 rgba(255, 255, 255, 0.22);
  --hop-lit-right: inset 0 1.5px 0 rgba(255, 255, 255, 0.5), inset -1px 0 0 rgba(255, 255, 255, 0.22);
  --hop-lit-top: inset 0 1.5px 0 rgba(255, 255, 255, 0.5);
  --raised-rims: inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -1px 0 rgba(0, 0, 0, 0.12);
  --bubble-lift: 0 12px 28px rgba(79, 106, 255, 0.28);
  --lift-pressed: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 0 rgba(10, 12, 50, 0.6), 0 4px 10px rgba(79, 106, 255, 0.28);
  --lift-chip: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 0 0.5px rgba(0, 0, 0, 0.5), 0 2px 0 rgba(0, 0, 0, 0.5), 0 8px 18px rgba(0, 0, 0, 0.3);
  --lift-chip-act: inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 2px 0 rgba(10, 12, 50, 0.6), 0 8px 20px rgba(79, 106, 255, 0.28);
  --lift-chip-pressed: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 0 0.5px rgba(0, 0, 0, 0.5);
  --lift-key-pressed: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  --lift-ok: inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 3px 0 rgba(4, 40, 22, 0.6), 0 10px 24px rgba(0, 0, 0, 0.3);
  --lift-ok-pressed: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 0 rgba(4, 40, 22, 0.6), 0 4px 10px rgba(0, 0, 0, 0.3);
  --tac: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 6px 0 #2536b8, 0 9px 12px rgba(21, 23, 43, 0.35);
  --tac-pressed: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 0 #1f2f9c, 0 1px 3px #00000099;
  --tac-ok: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 6px 0 #0f6a40, 0 9px 12px rgba(21, 23, 43, 0.35);
  --tac-key: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 3px 0 #07080c, 0 6px 8px #00000099;
  --tac-key-act: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 3px 0 #1f2f9c, 0 6px 8px #00000099;
  --tac-key-pressed: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 0 #07080c, 0 1px 2px #00000099;
  --glass-under: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(255, 255, 255, 0.05);
  color-scheme: dark;
}

@media (prefers-reduced-transparency: reduce) {
  :root:root:root:not([data-solid="off"]) {
    --glass: var(--glass-solid);
    --glass-clear: var(--glass-solid);
    --glass-regular: var(--glass-solid);
    --glass-strong: var(--glass-solid);
    --glass-tint: var(--glass-solid);
    --key: var(--glass-solid);
    --glass-blur: 0px;
    --hop-frost-blur: 0px;
    --press-blur: 0px;
    --glass-saturate: 1;
  }
}

:root:root:root[data-solid="on"] {
  --glass: var(--glass-solid);
  --glass-clear: var(--glass-solid);
  --glass-regular: var(--glass-solid);
  --glass-strong: var(--glass-solid);
  --glass-tint: var(--glass-solid);
  --key: var(--glass-solid);
  --glass-blur: 0px;
  --hop-frost-blur: 0px;
  --press-blur: 0px;
  --glass-saturate: 1;
}




@theme inline {
  --color-desk: var(--desk);
  --color-desk-2: var(--desk-2);
  --color-sheet-solid: var(--sheet-solid);
  --color-glass: var(--glass);
  --color-glass-strong: var(--glass-strong);
  --color-glass-edge: var(--glass-edge);
  --color-glass-edge-low: var(--glass-edge-low);
  --color-glass-under-rim: var(--glass-under-rim);
  --color-glass-shadow: var(--glass-shadow);
  --color-ink: var(--ink);
  --color-ink-2: var(--ink-2);
  --color-ink-3: var(--ink-3);
  --color-rule: var(--rule);
  --color-rule-strong: var(--rule-strong);
  --color-learner: var(--learner);
  --color-act: var(--act);
  --color-act-ink: var(--act-ink);
  --color-piece: var(--piece);
  --color-piece-edge: var(--piece-edge);
  --color-on-piece: var(--on-piece);
  --color-key: var(--key);
  --color-key-edge: var(--key-edge);
  --color-on-key: var(--on-key);
  --color-act-soft: var(--act-soft);
  --color-e1: var(--e1);
  --color-e1-ink: var(--e1-ink);
  --color-e1-soft: var(--e1-soft);
  --color-e2: var(--e2);
  --color-e2-ink: var(--e2-ink);
  --color-e2-soft: var(--e2-soft);
  --color-on-e: var(--on-e);
  --color-e1-edge: var(--e1-edge);
  --color-e2-edge: var(--e2-edge);
  --color-look: var(--look);
  --color-look-mark: var(--look-mark);
  --color-look-soft: var(--look-soft);
  --color-on-look: var(--on-look);
  --color-go: var(--go);
  --color-go-mark: var(--go-mark);
  --color-go-soft: var(--go-soft);
  --color-on-go: var(--on-go);
  --color-hop-ultra: var(--hop-ultra);
  --color-hop-sky: var(--hop-sky);
  --color-hop-lsky: var(--hop-lsky);
  --color-hop-buffer: var(--hop-buffer);
  --color-hop-coral: var(--hop-coral);
  --color-hop-ember: var(--hop-ember);
  --color-hop-eye: var(--hop-eye);
  --color-hop-glow: var(--hop-glow);
  --color-words-1: var(--words-1);
  --color-words-2: var(--words-2);
  --color-words-3: var(--words-3);
  --color-words-4: var(--words-4);
  --color-caret-core: var(--caret-core);
  --color-term-var: var(--term-var);
  --color-term-var-edge: var(--term-var-edge);
  --color-term-const: var(--term-const);
  --color-tile-1: var(--tile-1);
  --color-tile-1-edge: var(--tile-1-edge);
  --color-tile-1-on: var(--tile-1-on);
  --color-tile-neg-1: var(--tile-neg-1);
  --color-tile-neg-1-edge: var(--tile-neg-1-edge);
  --color-tile-neg-x: var(--tile-neg-x);
  --color-tile-neg-x-edge: var(--tile-neg-x-edge);
  --color-tile-neg-sq: var(--tile-neg-sq);
  --color-tile-neg-sq-edge: var(--tile-neg-sq-edge);
  --color-tile-neg-on: var(--tile-neg-on);
  --color-tile-sq: var(--tile-sq);
  --color-tile-sq-edge: var(--tile-sq-edge);
  --color-v-model: var(--v-model);
  --color-v-model-ink: var(--v-model-ink);
  --color-v-model-soft: var(--v-model-soft);
  --color-v-graph: var(--v-graph);
  --color-v-graph-ink: var(--v-graph-ink);
  --color-v-graph-soft: var(--v-graph-soft);
  --color-v-table: var(--v-table);
  --color-v-table-ink: var(--v-table-ink);
  --color-v-table-soft: var(--v-table-soft);
  --color-grid-line: var(--grid-line);
  --color-axis: var(--axis);
  --color-shade: var(--shade);
  --color-mark-ultra: var(--mark-ultra);
  --color-mark-ultra-cut: var(--mark-ultra-cut);
  --color-mark-lagoon: var(--mark-lagoon);
  --color-mark-lagoon-cut: var(--mark-lagoon-cut);
  --color-mark-coral: var(--mark-coral);
  --color-mark-coral-cut: var(--mark-coral-cut);
  --color-mark-sky: var(--mark-sky);
  --color-mark-sky-cut: var(--mark-sky-cut);
  --color-mark-amber: var(--mark-amber);
  --color-mark-amber-cut: var(--mark-amber-cut);
  --color-mark-slate: var(--mark-slate);
  --color-mark-slate-cut: var(--mark-slate-cut);
  --color-paper: var(--paper);
  --color-ground: var(--ground);
  --color-ground-2: var(--ground-2);
  --color-wash: var(--wash);
  --color-b-ultra: var(--b-ultra);
  --color-on-ultra: var(--on-ultra);
  --color-b-coral: var(--b-coral);
  --color-b-jade: var(--b-jade);
  --color-b-saffron: var(--b-saffron);
  --color-b-lagoon: var(--b-lagoon);
  --color-b-iris: var(--b-iris);
  --color-ok: var(--ok);
  --color-ok-ink: var(--ok-ink);
  --color-ok-mark: var(--ok-mark);
  --color-on-ok-mark: var(--on-ok-mark);
  --color-ok-soft: var(--ok-soft);
  --color-ok-glass: var(--ok-glass);
  --color-ask: var(--ask);
  --color-ask-ink: var(--ask-ink);
  --color-ask-mark: var(--ask-mark);
  --color-ask-soft: var(--ask-soft);
  --color-on-ask: var(--on-ask);
  --color-act-face: var(--act-face);
  --color-act-lip: var(--act-lip);
  --color-on-act: var(--on-act);
  --color-act-edge: var(--act-edge);
  --color-act-glass: var(--act-glass);
  --color-neutral-face: var(--neutral-face);
  --color-neutral-lip: var(--neutral-lip);
  --color-key-fn: var(--key-fn);
  --color-glass-regular: var(--glass-regular);
  --color-glass-rim: var(--glass-rim);
  --color-glass-rim-low: var(--glass-rim-low);
  --color-glass-underrim: var(--glass-underrim);
  --color-glass-tint: var(--glass-tint);
  --color-glass-solid: var(--glass-solid);
  --color-hop-lit: var(--hop-lit);
  --color-hop-lit-side: var(--hop-lit-side);
  --color-tab-on: var(--tab-on);
  --color-hop-1: var(--hop-1);
  --color-hop-2: var(--hop-2);
  --color-hop-3: var(--hop-3);
  --color-hop-4: var(--hop-4);
  --color-hop-5: var(--hop-5);
  --color-ai-1: var(--ai-1);
  --color-ai-2: var(--ai-2);
  --color-ai-3: var(--ai-3);
  --color-ai-4: var(--ai-4);
  --color-v-model-wash: var(--v-model-wash);
  --color-v-model-edge: var(--v-model-edge);
  --color-v-graph-wash: var(--v-graph-wash);
  --color-v-table-wash: var(--v-table-wash);
  --color-mark-iris: var(--mark-iris);
  --color-mark-iris-cut: var(--mark-iris-cut);
  --color-mark-plum: var(--mark-plum);
  --color-mark-plum-cut: var(--mark-plum-cut);
  --color-cerulean: var(--cerulean);
  --color-ultramarine: var(--ultramarine);
  --color-coral: var(--coral);
  --color-press-shadow: var(--press-shadow);
  --color-act-shadow: var(--act-shadow);
  --color-on-coral: var(--on-coral);
  --color-on-jade: var(--on-jade);
  --color-on-saffron: var(--on-saffron);
  --color-on-lagoon: var(--on-lagoon);
  --color-on-iris: var(--on-iris);
  --color-wash-2: var(--wash-2);
  --color-on-ok: var(--on-ok);
  --color-ok-edge: var(--ok-edge);
  --color-glass-clear: var(--glass-clear);
  --color-contact: var(--contact);
  --color-pool-act: var(--pool-act);
  --color-pool-e1: var(--pool-e1);
  --color-pool-graph: var(--pool-graph);
  --color-pool-model: var(--pool-model);
  --spacing-1: var(--space-1);
  --spacing-1-5: var(--space-1-5);
  --spacing-2: var(--space-2);
  --spacing-2-5: var(--space-2-5);
  --spacing-3: var(--space-3);
  --spacing-4: var(--space-4);
  --spacing-5: var(--space-5);
  --spacing-6: var(--space-6);
  --spacing-7: var(--space-7);
  --spacing-8: var(--space-8);
  --radius-sheet: var(--r-sheet);
  --radius-piece: var(--r-piece);
  --radius-item: var(--r-item);
  --radius-dock: var(--r-dock);
  --radius-keydock: var(--r-keydock);
  --radius-stone: var(--r-stone);
  --radius-chip: var(--r-chip);
  --radius-gtile: var(--r-gtile);
  --radius-key: var(--r-key);
  --radius-control: var(--r-control);
  --radius-tile: var(--r-tile);
  --radius-check: var(--r-check);
  --radius-surface: var(--r-surface);
  --radius-pill: var(--r-pill);
  --radius-glass: var(--r-glass);
  --radius-pane: var(--r-pane);
  --radius-bubble: var(--r-bubble);
  --radius-bubble-tuck: var(--r-bubble-tuck);
  --radius-block: var(--r-block);
  --radius-tac: var(--r-tac);
  --radius-caret: var(--r-caret);
  --shadow-lens: var(--lens);
  --shadow-lens-dock: var(--lens-dock);
  --shadow-lens-flat: var(--lens-flat);
  --shadow-piece-shadow: var(--piece-shadow);
  --shadow-piece-pressed: var(--piece-pressed);
  --shadow-piece-small: var(--piece-small);
  --shadow-key-shadow: var(--key-shadow);
  --shadow-key-pressed: var(--key-pressed);
  --shadow-key-small: var(--key-small);
  --shadow-e1-shadow: var(--e1-shadow);
  --shadow-e2-shadow: var(--e2-shadow);
  --shadow-go-shadow: var(--go-shadow);
  --shadow-lift-check: var(--lift-check);
  --shadow-lift-button: var(--lift-button);
  --shadow-lift-key: var(--lift-key);
  --shadow-lift-gtile: var(--lift-gtile);
  --shadow-pop: var(--pop);
  --shadow-glass-lift: var(--glass-lift);
  --shadow-glass-rims: var(--glass-rims);
  --shadow-glass-rims-contrast: var(--glass-rims-contrast);
  --shadow-glass-rims-e1: var(--glass-rims-e1);
  --shadow-glass-rims-model: var(--glass-rims-model);
  --shadow-glass-rims-graph: var(--glass-rims-graph);
  --shadow-glass-rims-table: var(--glass-rims-table);
  --shadow-glass-rims-ask: var(--glass-rims-ask);
  --shadow-glass-rims-ok: var(--glass-rims-ok);
  --shadow-hop-lit-left: var(--hop-lit-left);
  --shadow-hop-lit-right: var(--hop-lit-right);
  --shadow-hop-lit-top: var(--hop-lit-top);
  --shadow-raised-rims: var(--raised-rims);
  --shadow-bubble-lift: var(--bubble-lift);
  --shadow-lift-pressed: var(--lift-pressed);
  --shadow-lift-chip: var(--lift-chip);
  --shadow-lift-chip-act: var(--lift-chip-act);
  --shadow-lift-chip-pressed: var(--lift-chip-pressed);
  --shadow-lift-key-pressed: var(--lift-key-pressed);
  --shadow-lift-ok: var(--lift-ok);
  --shadow-lift-ok-pressed: var(--lift-ok-pressed);
  --shadow-tac: var(--tac);
  --shadow-tac-pressed: var(--tac-pressed);
  --shadow-tac-ok: var(--tac-ok);
  --shadow-tac-key: var(--tac-key);
  --shadow-tac-key-act: var(--tac-key-act);
  --shadow-tac-key-pressed: var(--tac-key-pressed);
  --shadow-glass-under: var(--glass-under);
  --transition-duration-press: var(--t-press);
  --transition-duration-key: var(--t-key);
  --transition-duration-instant: var(--t-instant);
  --transition-duration-quick: var(--t-quick);
  --transition-duration-spring: var(--t-spring);
  --transition-duration-arrive: var(--t-arrive);
  --transition-duration-wash: var(--t-wash);
  --transition-duration-seal: var(--t-seal);
  --transition-duration-stamp: var(--t-stamp);
  --transition-duration-confetti: var(--t-confetti);
  --transition-duration-draw: var(--t-draw);
  --transition-duration-glide: var(--t-glide);
  --transition-duration-stagger: var(--t-stagger);
  --transition-duration-pour: var(--t-pour);
  --transition-duration-glass: var(--t-glass);
  --transition-duration-sweep: var(--t-sweep);
  --transition-duration-blink: var(--t-blink);
  --transition-duration-shimmer: var(--t-shimmer);
  --transition-duration-hush: var(--t-hush);
  --transition-duration-light: var(--t-light);
  --transition-duration-ignite: var(--t-ignite);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(.22,1.4,.36,1);
  --ease-glide: cubic-bezier(.2,.8,.2,1);
  --ease-pour: cubic-bezier(0.3, 1.5, 0.5, 1);
  --spacing-rail: var(--rail);
  --spacing-sheet-wide: var(--sheet-wide);
  --spacing-hop-size-rest: var(--hop-size-rest);
  --spacing-hop-size-talk: var(--hop-size-talk);
  --spacing-hop-size-hero: var(--hop-size-hero);
  --spacing-hop-size-corner: var(--hop-size-corner);
  --spacing-tile-u: var(--tile-u);
  --spacing-tile-x: var(--tile-x);
  --spacing-nav-dock: var(--nav-dock);
  --spacing-key-height: var(--key-height);
  --spacing-check-height: var(--check-height);
  --spacing-target-min: var(--target-min);
  --spacing-piece-edge-size: var(--piece-edge-size);
  --spacing-icon: var(--icon);
  --breakpoint-rail: 960px;
  --breakpoint-wide: 1000px;
  --container-column-steps: 720px;
  --container-column-lens: 860px;
  --container-column-wide: 1080px;
  --spacing-topbar: var(--topbar);
  --spacing-line-row: var(--line-row);
  --spacing-lip: var(--lip);
  --blur-glass: var(--glass-blur);
  --blur-dock: var(--dock-blur);
  --blur-press: var(--press-blur);
  --blur-hop-frost: var(--hop-frost-blur);
  --font-ui: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-math: "Hopscotch Figures", "Lexend", system-ui, -apple-system, sans-serif;
  --font-voice: "Bricolage Grotesque", "Lexend", system-ui, sans-serif;
  --font-var: "Figtree", "Lexend", system-ui, sans-serif;
  --text-math-draft: var(--math-draft);
  --text-math-draft--line-height: var(--math-draft-line-height);
  --text-math-draft--font-weight: var(--math-draft-weight);
  --text-math-line: var(--math-line);
  --text-math-line--line-height: var(--math-line-line-height);
  --text-math-line--font-weight: var(--math-line-weight);
  --text-math-given: var(--math-given);
  --text-math-given--line-height: var(--math-given-line-height);
  --text-math-given--font-weight: var(--math-given-weight);
  --text-math-problem: var(--math-problem);
  --text-math-problem--line-height: var(--math-problem-line-height);
  --text-math-problem--font-weight: var(--math-problem-weight);
  --text-math-derive: var(--math-derive);
  --text-math-derive--line-height: var(--math-derive-line-height);
  --text-math-derive--font-weight: var(--math-derive-weight);
  --text-math-tile: var(--math-tile);
  --text-math-tile--line-height: var(--math-tile-line-height);
  --text-math-tile--font-weight: var(--math-tile-weight);
  --text-math-small: var(--math-small);
  --text-math-small--line-height: var(--math-small-line-height);
  --text-math-small--font-weight: var(--math-small-weight);
  --text-tile-numeral: var(--tile-numeral);
  --text-tile-numeral--line-height: var(--tile-numeral-line-height);
  --text-tile-numeral--font-weight: var(--tile-numeral-weight);
  --text-math-kid: var(--math-kid);
  --text-math-kid--line-height: var(--math-kid-line-height);
  --text-math-kid--font-weight: var(--math-kid-weight);
  --text-math-teen: var(--math-teen);
  --text-math-teen--line-height: var(--math-teen-line-height);
  --text-math-teen--font-weight: var(--math-teen-weight);
  --text-check-label: var(--check-label);
  --text-check-label--line-height: var(--check-label-line-height);
  --text-check-label--font-weight: var(--check-label-weight);
  --text-sheet-title: var(--sheet-title);
  --text-sheet-title--line-height: var(--sheet-title-line-height);
  --text-sheet-title--font-weight: var(--sheet-title-weight);
  --text-body: var(--body);
  --text-body--line-height: var(--body-line-height);
  --text-body--font-weight: var(--body-weight);
  --text-control: var(--control);
  --text-control--line-height: var(--control-line-height);
  --text-control--font-weight: var(--control-weight);
  --text-hint: var(--hint);
  --text-hint--line-height: var(--hint-line-height);
  --text-hint--font-weight: var(--hint-weight);
  --text-tag: var(--tag);
  --text-tag--line-height: var(--tag-line-height);
  --text-tag--font-weight: var(--tag-weight);
  --text-eyebrow: var(--eyebrow);
  --text-eyebrow--line-height: var(--eyebrow-line-height);
  --text-eyebrow--font-weight: var(--eyebrow-weight);
  --text-eyebrow--letter-spacing: var(--eyebrow-tracking);
  --text-label: var(--label);
  --text-label--line-height: var(--label-line-height);
  --text-label--font-weight: var(--label-weight);
  --text-figure: var(--figure);
  --text-figure--line-height: var(--figure-line-height);
  --text-figure--font-weight: var(--figure-weight);
  --text-rail-label: var(--rail-label);
  --text-rail-label--line-height: var(--rail-label-line-height);
  --text-rail-label--font-weight: var(--rail-label-weight);
  --text-key-label: var(--key-label);
  --text-key-label--line-height: var(--key-label-line-height);
  --text-key-label--font-weight: var(--key-label-weight);
  --text-board-name: var(--board-name);
  --text-board-name--line-height: var(--board-name-line-height);
  --text-board-name--font-weight: var(--board-name-weight);
  --text-hop-voice: var(--hop-voice);
  --text-hop-voice--line-height: var(--hop-voice-line-height);
  --text-hop-voice--font-weight: var(--hop-voice-weight);
  --text-display: var(--display);
  --text-display--line-height: var(--display-line-height);
  --text-display--font-weight: var(--display-weight);
  --text-title: var(--title);
  --text-title--line-height: var(--title-line-height);
  --text-title--font-weight: var(--title-weight);
  --text-hop-words: var(--hop-words);
  --text-hop-words--line-height: var(--hop-words-line-height);
  --text-hop-words--font-weight: var(--hop-words-weight);
  --text-hop-words--letter-spacing: var(--hop-words-tracking);
}