:root{--blue-300:#93c5fd;--blue-400:#60a5fa;--blue-500:#3b82f6;--blue-600:#2563eb;--blue-700:#1d4ed8;--blue-800:#1e40af;--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-900:#1a1a1a;--ink-700:#333;--ink-500:#555;--ink-400:#666;--hairline:#eee;--green-400:#4ade80;--green-500:#22c55e;--green-700:#218838;--red-400:#f87171;--red-500:#ef4444;--red-600:#dc2626;--amber-400:#fbbf24;--amber-500:#f59e0b;--amber-600:#d97706;--indigo-500:#6366f1;--indigo-600:#4f46e5;--tool-950:#1a1a2e;--tool-900:#1e1e2e;--tool-850:#252538;--tool-800:#2a2a3e;--tool-700:#303048;--text-primary:var(--ink-900);--text-body:var(--ink-700);--text-subtle:var(--ink-500);--text-muted:var(--ink-400);--surface:#fff;--surface-sunken:#f5f5f5;--border:var(--hairline);--border-strong:#e5e5e5;--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-danger:var(--red-600);--status-warning:var(--amber-500);--tool-bg:var(--tool-950);--tool-surface:var(--tool-800);--tool-surface-raised:var(--tool-700);--tool-border:var(--slate-700);--tool-text:var(--slate-100);--tool-text-muted:var(--slate-400);--color-dark-putty:#3f4856;--color-warning:#e87b26;--color-warning-rgb:232, 123, 38;--progress-done:#218838;--progress-done-bg:#d4edda;--progress-current:#1e40af;--progress-current-bg:#dbe4fb;--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)}