:root{--blue:#1565c0;--green:#4caf50;--red:#f44336;--ink:#2c3e50;--muted:#667085;--bg:#f2f4f8}*{box-sizing:border-box}html,body{margin:0;min-height:100%;overflow-x:hidden}body{font-family:'Segoe UI',Roboto,Arial,sans-serif;text-align:center;background:var(--bg);color:#333;padding:20px 10px}main{max-width:860px;margin:auto}h1{font-size:2.2rem;color:var(--blue);margin:8px 0 16px}h1:before{content:'♫ ';color:var(--green)}h2,h3{color:var(--ink)}.section{background:#fff;border-radius:12px;box-shadow:0 2px 8px #0002;padding:18px}.screen{display:none}.screen.show{display:block}.hidden{display:none!important}button{padding:12px 24px;margin:6px;font-size:17px;font-weight:650;background:var(--green);color:#fff;border:0;border-radius:7px;cursor:pointer}button:hover{filter:brightness(.94)}button.red{background:var(--red)}button.blue{background:#2196f3}button.secondary{background:#607d8b}button:disabled{opacity:.45;cursor:not-allowed}.direct-choice{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:18px 0}.cadence-option{display:flex;align-items:center;gap:12px;text-align:left;border:2px solid #cfd8dc;border-radius:11px;padding:15px;background:#fff;cursor:pointer}.cadence-option:has(input:checked){border-color:var(--green);background:#e8f5e9}.cadence-option input{width:20px;height:20px;accent-color:var(--green);flex:none}.cadence-option span{display:flex;flex-direction:column}.cadence-option strong{font-size:19px;color:var(--ink)}.cadence-option small{color:var(--muted);margin-top:3px}.selection-status{min-height:24px;font-weight:750;color:#25823a}.selection-status.warning{color:#d32f2f}.topbar,.hud{display:flex;align-items:center;justify-content:space-between;gap:12px}.topbar button{font-size:14px;padding:8px 12px;margin:0}.progress{height:11px;background:#e5e7eb;border-radius:999px;overflow:hidden;flex:1}.progress span{display:block;height:100%;width:0;background:var(--green)}.pill{background:#eef2f6;border-radius:999px;padding:7px 11px;font-weight:700}.play{font-size:20px}.answers{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:18px 0}.answers button{width:100%;margin:0}.feedback{min-height:54px;font-size:20px;font-weight:700;padding:12px}.feedback.ok{color:#25823a}.feedback.no{color:#d32f2f}.result{font-size:54px;font-weight:800;color:var(--blue)}.mini{color:var(--muted);line-height:1.55}.option-row{margin:12px}.tuto-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:16px 0}.tuto-nav button{margin:0;padding:10px 6px;background:#e8f5e9;color:var(--ink);border:2px solid var(--green)}.tuto-nav button.selected{background:#2196f3;color:#fff}.tuto-detail{border:2px solid var(--green);border-radius:13px;padding:16px;background:#f8fcf8}.tuto-detail h3{font-size:25px;margin:0}.explanation{max-width:680px;margin:10px auto;line-height:1.5}.listening{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.listening .arpeggio{background:#2196f3}.tip{margin-top:16px;background:#fff8e1;border-left:5px solid #ffc107;padding:13px;text-align:left;border-radius:7px}.visual-answer{background:#f7f9fb;border-radius:12px;padding:10px;margin:8px auto}.cadence-name{font-size:22px;font-weight:800;color:var(--blue)}.notation{width:min(100%,700px);height:200px;margin:8px auto;background:#fff;border:1px solid #dfe4ea;border-radius:9px;overflow:hidden}.notation svg{width:100%;height:100%}.degrees{display:flex;justify-content:center;align-items:center;gap:28px;font-size:23px;font-weight:850;color:var(--blue);margin:6px}.degrees span{min-width:110px}.tonality{font-weight:750;margin:5px}.arrow{color:var(--muted)}@media(max-width:560px){body{padding:10px 7px}h1{font-size:1.75rem}.section{padding:13px}.direct-choice,.answers{grid-template-columns:1fr}.hud{flex-wrap:wrap}.progress{order:3;flex-basis:100%}.tuto-nav{grid-template-columns:repeat(2,1fr)}.notation{height:160px}.degrees{gap:8px;font-size:20px}}

.harmonic-path{display:flex;justify-content:center;align-items:center;gap:10px;margin:7px auto;font-size:21px;font-weight:850}.harmonic-path span{min-width:58px;padding:7px 12px;border-radius:8px}.harmonic-path .preparation{color:#657588;background:#eef2f6}.harmonic-path .cadential{color:#fff;background:var(--blue);box-shadow:0 0 0 3px #d8eaff}.path-arrow{color:#8a96a5}.cadence-focus{display:inline-block;margin:6px auto;padding:7px 18px;border:2px solid var(--blue);border-radius:999px;background:#e7f1ff;color:var(--blue);font-size:18px;font-weight:850;letter-spacing:.02em}
@media(max-width:560px){.harmonic-path{gap:4px;font-size:17px}.harmonic-path span{min-width:42px;padding:6px}.path-arrow{font-size:15px}.cadence-focus{font-size:16px}}