:root{--bg:#f6f5f1;--surface:#fff;--surface-muted:#ebe9e3;--text:#1d2127;--text-muted:#5d636d;--border:#dcd9d1;--guide:#cbc7bd;--ground:#8f8a80;--climb:#e24b4a;--release:#378add;--none:#8a8f98;--climb-text:#c03332;--release-text:#1f68b5;--dominant-fill:#fdeaea;--dominant-stroke:#c2403f;--dominant-ink:#8c2222;--predominant-fill:#fdf1d8;--predominant-stroke:#b57a1c;--predominant-ink:#74490a;--tonic-fill:#def3ef;--tonic-stroke:#22907f;--tonic-ink:#0d5a4e;--radius:12px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg:#131518;--surface:#1c1f23;--surface-muted:#2a2e35;--text:#e9e7e2;--text-muted:#a2a8b2;--border:#343941;--guide:#3d424a;--ground:#6c727c;--none:#7d838d;--climb-text:#f58a89;--release-text:#6aaef0;--dominant-fill:#4a1d1e;--dominant-stroke:#f08584;--dominant-ink:#ffd6d5;--predominant-fill:#44330f;--predominant-stroke:#e3ad4a;--predominant-ink:#ffe5b0;--tonic-fill:#113a35;--tonic-stroke:#4cc4b0;--tonic-ink:#c8f1e9}}*,:before,:after{box-sizing:border-box}body{background:var(--bg);min-height:100vh;margin:0}h1,h2,p{margin:0}h1{font-size:1.6rem;line-height:1.2}h2,.speed-label{letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px;font-size:.8rem;font-weight:600;display:block}button{min-height:36px;font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--border);cursor:pointer;border-radius:999px;padding:6px 12px;font-size:.9rem}button:hover:not(:disabled){border-color:var(--text-muted)}button[aria-pressed=true]{color:var(--bg);background:var(--text);border-color:var(--text)}button:disabled{opacity:.45;cursor:default}button:focus-visible,input:focus-visible{outline:2px solid var(--release);outline-offset:2px}.app{flex-direction:column;gap:20px;max-width:420px;margin:0 auto;padding:24px 16px 48px;display:flex}.app-header{flex-direction:column;gap:4px;display:flex}.app-header p{color:var(--text-muted)}.hint{color:var(--text-muted);font-size:.85rem}.error{color:var(--climb-text);margin-top:6px;font-size:.85rem}.error:empty{margin:0}.controls{flex-direction:column;gap:16px;display:flex}.button-row{flex-wrap:wrap;gap:8px;display:flex}.chord--dominant{--fill:var(--dominant-fill);--stroke:var(--dominant-stroke);--ink:var(--dominant-ink)}.chord--predominant{--fill:var(--predominant-fill);--stroke:var(--predominant-stroke);--ink:var(--predominant-ink)}.chord--tonic{--fill:var(--tonic-fill);--stroke:var(--tonic-stroke);--ink:var(--tonic-ink)}.chord-buttons{grid-template-columns:repeat(7,1fr);gap:6px;display:grid}.chord-button{color:var(--ink);background:var(--fill);border-color:var(--stroke);border-radius:10px;padding:6px 0;font-weight:600}.chord-button:hover:not(:disabled){border-color:var(--ink)}.progression{margin-bottom:10px;font-size:1.1rem;font-weight:600}.control-group>.hint{margin-top:8px}.speed-field{align-items:center;gap:8px;display:flex}.speed-field input{width:6rem;font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:6px 10px}.speed-field input[aria-invalid=true]{border-color:var(--climb)}.speed-field span{color:var(--text-muted)}.stat-cards{grid-template-columns:1fr 1fr;gap:10px;display:grid}.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:2px;padding:10px 12px;display:flex}.stat-label{color:var(--text-muted);font-size:.8rem;line-height:1.3}.stat-value{font-variant-numeric:tabular-nums;font-size:1.8rem;font-weight:700;line-height:1.1}.stat--climb .stat-value{color:var(--climb-text)}.stat--release .stat-value{color:var(--release-text)}.tension{margin-top:14px}.tension-head{color:var(--text-muted);justify-content:space-between;margin-bottom:6px;font-size:.85rem;display:flex}.tension-value{color:var(--text);font-variant-numeric:tabular-nums;font-weight:600}.tension-track{background:var(--surface-muted);border-radius:999px;height:10px;overflow:hidden}.tension-fill{background:linear-gradient(to right, var(--tonic-stroke) 0%, var(--tonic-stroke) 28%, var(--predominant-stroke) 43%, var(--predominant-stroke) 57%, var(--dominant-stroke) 86%);clip-path:inset(0 100% 0 0);height:100%}.tension-scale{color:var(--text-muted);justify-content:space-between;margin-top:2px;font-size:.75rem;display:flex}.graph{background:var(--surface);border:1px solid var(--border);border-radius:14px;margin:0;padding:8px}.graph>svg{display:block}.level line{stroke:var(--guide);stroke-dasharray:2 4}.level text{fill:var(--text-muted);font-size:11px}.ground{stroke:var(--ground);stroke-width:1.5px}.ramp{fill:none}.ramp--climb{stroke:var(--climb);stroke-dasharray:8 6}.ramp--release{stroke:var(--release)}.ramp--none{stroke:var(--none);stroke-linecap:round;stroke-dasharray:.01 6}.ramp--option{stroke-width:.9px;opacity:.3}.ramp--option.ramp--climb{stroke-dasharray:4 3}.ramp--next{stroke-width:2.6px}.chord{transition:opacity .2s}.chord.is-dim{opacity:.35}.chord circle{fill:var(--fill);stroke:var(--stroke);stroke-width:1.5px}.chord.is-current circle{stroke-width:3.5px}.chord text{text-anchor:middle;fill:var(--ink);font-size:13px;font-weight:700}.ball{fill:var(--text)}.landing{font-size:15px;font-weight:700;animation:1.1s ease-out forwards rise}.landing--climb{fill:var(--climb-text)}.landing--release{fill:var(--release-text)}@keyframes rise{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-22px)}}@media (prefers-reduced-motion:reduce){.chord{transition:none}}.legend{color:var(--text-muted);flex-wrap:wrap;gap:4px 16px;padding:8px 4px 2px;font-size:.8rem;display:flex}.legend span{align-items:center;gap:6px;display:inline-flex}.legend svg{width:32px;height:8px}.legend .ramp{stroke-width:2.6px}.moves{flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;display:flex}.moves li{border:1px solid #0000;border-radius:8px;flex-wrap:wrap;justify-content:space-between;gap:2px 10px;padding:6px 10px;display:flex}.moves li[aria-current=step]{background:var(--surface);border-color:var(--border)}.move-chords{font-weight:600}.move-names,.wrap{color:var(--text-muted);font-weight:400}.move-effect{font-size:.9rem}.move-effect--climb{color:var(--climb-text)}.move-effect--release{color:var(--release-text)}.move-effect--none{color:var(--text-muted)}.summary{margin-top:10px;font-weight:600}