/* Octopus — generated from tokens.json */
:root, [data-theme="light"] {
  --brand-coral: #f2542d;
  --brand-eye: #fff7ed;
  --brand-pupil: #080e15;
  --brand-sky: #38bdf8;
  --brand-wordmark: #1b2733;
  --icon-bg-start: #fff3e6;
  --icon-bg-end: #ffe0c2;
  --surface-ground: #fbf3e8;
  --surface-board: #fffaf3;
  --surface-panel: #f3e6d3;
  --surface-panel-accent: #f0dfc8;
  --surface-control: #fffaf3;
  --surface-control-hover: #fff1df;
  --surface-control-feature: #f7ead6;
  --line: #e4d4bd;
  --line-strong: #d9c7b0;
  --control-border: #8f7d68;
  --feature-ink-shell: #7a5800;
  --feature-ink-arpeggio: var(--action);
  --control-border-feature: #c9b293;
  --ink: #1b2733;
  --ink-soft: #3d4b5a;
  --ink-muted: #566474;
  --control-ink: #3d4b5a;
  --group-label: #566474;
  --action: #0a6a9c;
  --on-action: #ffffff;
  --focus-ring: #0a6a9c;
  --selected: #1b2733;
  --on-selected: #fffaf3;
  --deg-root: #d63d17;
  --on-deg-root: #ffffff;
  --deg-third: #0a7480;
  --on-deg-third: #ffffff;
  --deg-fifth: #24618a;
  --deg-fifth-ring: #7fb9dc;
  --on-deg-fifth: #ffffff;
  --deg-seventh: #f5c02e;
  --deg-seventh-ring: #9c7100;
  --on-deg-seventh: #1b2733;
  --deg-tension: #f1ecff;
  --deg-tension-ring: #6d4fc2;
  --on-deg-tension: #4a3399;
  --fret: #9c8a74;
  --nut: #1b2733;
  --fret-marker: #e3d3bd;
  --fret-number: #0a7480;
  --string-high: #6b7684;
  --string-low: #0e7fb8;
  --playing-outline: #1b2733;
  --trail: #0a6a9c;
  --quiz-dot: #a8b4c0;
  --quiz-dot-ring: #7a8a9c;
  --success: #15803d;
  --danger: #b91c1c;
  --destructive: #c62f3b;
  --destructive-bg: #fbe9e6;
  --shadow-panel: 0 2px 8px rgba(27, 39, 51, 0.08);
  --shadow-board: 0 8px 22px rgba(92, 74, 51, 0.16);
  --shadow-note: 0 1px 3px rgba(27, 39, 51, 0.25);
  --shadow-playing: 0 0 12px rgba(10, 106, 156, 0.55);
  --shadow-active: none;
  --shadow-icon: 0 4px 14px rgba(92, 74, 51, 0.25);
}
[data-theme="dark"] {
  --brand-coral: #f2542d;
  --brand-eye: #fff7ed;
  --brand-pupil: #080e15;
  --brand-sky: #38bdf8;
  --brand-wordmark: #f4f1ec;
  --icon-bg-start: #0b1622;
  --icon-bg-end: #1c3550;
  --surface-ground: #080e15;
  --surface-board: #0d1520;
  --surface-panel: #0f1923;
  --surface-panel-accent: #151e28;
  --surface-control: #142230;
  --surface-control-hover: #1e3247;
  --surface-control-feature: #182838;
  --line: #1a2938;
  --line-strong: #203348;
  --control-border: #203348;
  --feature-ink-shell: #facc15;
  --feature-ink-arpeggio: var(--action);
  --control-border-feature: #2a4158;
  --ink: #e2e8f0;
  --ink-soft: #b6c4d4;
  --ink-muted: #8098b2;
  --control-ink: #8da4be;
  --group-label: #5b8fa8;
  --action: #38bdf8;
  --on-action: #080e15;
  --focus-ring: #38bdf8;
  --selected: #e2e8f0;
  --on-selected: #080e15;
  --deg-root: #f2542d;
  --on-deg-root: #080e15;
  --deg-third: #0e95a4;
  --on-deg-third: #080e15;
  --deg-fifth: #2a6f9a;
  --deg-fifth-ring: #7dd3fc;
  --on-deg-fifth: #ffffff;
  --deg-seventh: #facc15;
  --deg-seventh-ring: #facc15;
  --on-deg-seventh: #080e15;
  --deg-tension: #1b1830;
  --deg-tension-ring: #c4b5fd;
  --on-deg-tension: #ddd6fe;
  --fret: #4d6a88;
  --nut: #e2e8f0;
  --fret-marker: #2a8f9c;
  --fret-number: #0e95a4;
  --string-high: #64748b;
  --string-low: #38bdf8;
  --playing-outline: #ffffff;
  --trail: #38bdf8;
  --quiz-dot: #475569;
  --quiz-dot-ring: #64748b;
  --success: #4ade80;
  --danger: #f87171;
  --destructive: #e63946;
  --destructive-bg: #1c1117;
  --shadow-panel: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-board: 0 10px 25px rgba(0, 0, 0, 0.6);
  --shadow-note: 0 2px 6px rgba(0, 0, 0, 0.5);
  --shadow-playing: 0 0 14px #38bdf8, 0 0 28px rgba(56, 189, 248, 0.7);
  --shadow-active: 0 0 10px rgba(14, 149, 164, 0.4);
  --shadow-icon: 0 4px 14px rgba(0, 0, 0, 0.45);
}
:root {
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-15: 15px;
  --space-20: 20px;
  --space-22: 22px;
  --space-36: 36px;
  --space-56: 56px;
  --space-84: 84px;
  --radius-0: 0;
  --radius-2: 2px;
  --radius-3: 3px;
  --radius-8: 8px;
  --radius-23: 23px;
  --radius-round: 50%;
  --radius-icon: 22.37%;
  --nut-bar: 6px;
  --fret-wire: 2px;
  --note: 27px;
  --note-phone: 32px;
  --fret-marker-size: 12px;
  --board-min: 850px;
  --sidebar: 340px;
  --layout-max: 1350px;
  --phone-action-h: 46px;
  --phone-nav-btn: 52px;
  --panel-accent: 4px;
  --breakpoint-wide: 1250px;
  --out-of-focus: 0.18;
  --paused-panel: 0.35;
  --preset-sub: 0.75;
  --ground-wash: 0.08;
  --dur-instant: 0.08s;
  --dur-fast: 0.15s;
  --dur-note: 0.25s;
  --dur-focus: 0.3s;
  --ease-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-standard: ease-in-out;
  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-text: "Montserrat", system-ui, sans-serif;
}