:root{--blue-300:#93c5fd;--blue-400:#60a5fa;--blue-500:#3b82f6;--blue-600:#2563eb;--blue-700:#1d4ed8;--blue-800:#1e40af;--blue-900:#1e3a8a;--azure-500:#0080ff;--gray-200:#e5e7eb;--gray-300:#d1d5db;--gray-400:#9ca3af;--gray-500:#6b7280;--gray-700:#374151;--gray-800:#1f2937;--gray-900:#111827;--slate-100:#f1f5f9;--slate-200:#e2e8f0;--slate-300:#cbd5e1;--slate-400:#94a3b8;--slate-500:#64748b;--slate-600:#475569;--slate-700:#334155;--slate-800:#1e293b;--slate-950:#0f172a;--ink-1000:#000;--ink-950:#111;--ink-900:#1a1a1a;--ink-850:#222;--ink-700:#333;--ink-600:#444;--ink-500:#555;--ink-450:#595959;--ink-400:#666;--ink-350:#888;--ink-330:#909090;--ink-320:#949494;--ink-300:#aaa;--ink-200:#ccc;--ink-150:#e0e0e0;--ink-100:#ebebeb;--ink-075:#f0f0f0;--ink-000:#fff;--hairline:#eee;--green-100:#dcfce7;--green-200:#bbf7d0;--green-300:#86efac;--green-400:#4ade80;--green-500:#22c55e;--green-600:#16a34a;--green-700:#15803d;--green-800:#166534;--red-050:#fef2f2;--red-100:#fee2e2;--red-200:#fecaca;--red-400:#f87171;--red-500:#ef4444;--red-600:#dc2626;--red-700:#b91c1c;--red-800:#991b1b;--red-900:#7f1d1d;--amber-100:#fef3c7;--amber-200:#fde68a;--amber-300:#facc15;--amber-400:#fbbf24;--amber-500:#f59e0b;--amber-600:#d97706;--amber-800:#92400e;--orange-500:#f80;--orange-900:#7c2d12;--indigo-500:#6366f1;--indigo-550:#5558e3;--indigo-600:#4f46e5;--indigo-650:#4749d4;--indigo-700:#4338ca;--violet-500:#8b5cf6;--purple-400:#c084fc;--purple-500:#a855f7;--periwinkle-400:#8b8bd0;--steel-400:#6b88b5;--cyan-100:#cff4fc;--cyan-900:#055160;--gold-100:#fdf5e6;--gold-800:#94690a;--ivory-050:#fffff7;--ivory-100:#efefe4;--stone-200:#d2d7dc;--stone-300:#c4c9cf;--linen-100:#f3eee7;--sky-100:#e8f4fc;--sky-200:#d0e8f8;--parchment-050:#f8f0e0;--parchment-100:#f0dcb0;--parchment-300:#d6c194;--parchment-500:#c08a2e;--parchment-950:#3a2e1c;--tool-200:#d0d0e0;--tool-400:#a0a0c0;--tool-600:#4a4a6a;--tool-650:#3a3a5a;--tool-700:#303048;--tool-800:#2a2a3e;--tool-850:#252538;--tool-900:#1e1e2e;--tool-950:#1a1a2e;--text-primary:var(--ink-900);--text-body:var(--ink-700);--text-control:var(--ink-600);--text-subtle:var(--ink-500);--text-muted:var(--ink-400);--surface:var(--ink-000);--surface-sunken:#f5f5f5;--border:var(--hairline);--border-strong:#e5e5e5;--border-control:var(--ink-200);--text-faint:var(--ink-450);--text-on-accent:var(--ink-000);--text-on-accent-inverse:var(--ink-1000);--accent:var(--blue-500);--accent-hover:var(--blue-600);--accent-muted:var(--blue-400);--link:var(--blue-700);--link-hover:var(--blue-800);--focus-ring:var(--blue-600);--status-success:var(--green-500);--status-success-hover:var(--green-600);--status-success-bg:var(--green-100);--status-success-border:var(--green-200);--status-success-text:var(--green-800);--status-danger:var(--red-600);--status-danger-hover:var(--red-700);--status-danger-bg:var(--red-100);--status-danger-border:var(--red-200);--status-danger-text:var(--red-800);--status-danger-surface:var(--red-050);--status-danger-text-deep:var(--red-900);--status-warning:var(--amber-500);--status-warning-bg:var(--amber-100);--status-warning-border:var(--amber-200);--status-warning-text:var(--amber-800);--badge-lesson-bg:var(--gold-100);--badge-lesson-text:var(--gold-800);--badge-exercise-bg:var(--cyan-100);--badge-exercise-text:var(--cyan-900);--badge-neutral-bg:var(--ink-100);--tonic-row:var(--parchment-100);--tonic-row-black:var(--parchment-300);--tonic-accent:var(--parchment-500);--tonic-label-bg:var(--parchment-950);--tonic-label-text:var(--parchment-050);--roll-row-white:var(--ivory-050);--roll-row-black:var(--stone-200);--roll-row-white-dim:var(--ivory-100);--roll-row-black-dim:var(--stone-300);--pitch-label-black-text:var(--ink-330);--voice-0-fill:var(--blue-600);--voice-0-border:var(--blue-700);--voice-0-playing:var(--blue-300);--voice-1-fill:var(--green-600);--voice-1-border:var(--green-700);--voice-1-playing:var(--green-300);--selection-ring:var(--amber-300);--gesture-preview:var(--violet-500);--ring-guard-warning:var(--orange-900);--ring-guard-focus:var(--blue-900);--ring-focus-bright:var(--ink-000);--ring-guard-focus-on-dark:var(--blue-500);--accidental-sharp:var(--orange-500);--accidental-flat:var(--azure-500);--key-origin:var(--blue-400);--key-target:var(--purple-400);--scale-degree-optional:var(--steel-400);--contour-glyph:var(--periwinkle-400);--staff-paper:var(--linen-100);--tool-bg:var(--tool-950);--tool-surface:var(--tool-800);--tool-surface-raised:var(--tool-700);--tool-surface-hover:var(--tool-650);--tool-border:var(--slate-700);--tool-border-subtle:var(--tool-650);--tool-rule-strong:var(--tool-600);--tool-text:var(--tool-200);--tool-text-muted:var(--tool-400);--tool-text-neutral:var(--ink-150);--tool-control-mark:var(--tool-400);--tool-label:var(--ink-300);--tool-control-border:var(--ink-600);--tool-control-disabled-bg:var(--ink-600);--tool-control-disabled-text:var(--ink-350);--tool-focus-halo:color-mix(in srgb, var(--accent) 20%, transparent);--panel-shadow:0 4px 6px -1px color-mix(in srgb, var(--ink-1000) 30%, transparent), 0 2px 4px -2px color-mix(in srgb, var(--ink-1000) 30%, transparent), inset 0 1px 0 color-mix(in srgb, var(--ink-000) 5%, transparent);--overlay-scrim:color-mix(in srgb, var(--ink-1000) 55%, transparent);--color-dark-putty:#3f4856;--color-warning:#e87b26;--progress-done:var(--green-700);--progress-done-bg:#d4edda;--progress-current:var(--blue-800);--progress-current-bg:#dbe4fb;--progress-track:var(--ink-320);--layout-max-width:1152px;--white-key-width:2.375rem;--white-key-gap:.125rem;--octave-width:calc(7 * var(--white-key-width) + 7 * var(--white-key-gap));--black-key-width:calc(var(--octave-width) / 12);--white-key-overlap:calc(var(--octave-width) * 5 / 84)}