:root{--blue:#1565c0;--green:#4caf50;--red:#f44336;--ink:#2c3e50;--bg:#f2f4f8}*{box-sizing:border-box}body{margin:0;padding:20px 10px;background:var(--bg);color:#333;font-family:'Segoe UI',Roboto,Arial,sans-serif;text-align:center}main{max-width:760px;margin:auto}h1{color:var(--blue);font-size:2.2rem}h1:before{content:'♫ ';color:var(--green)}h2,h3{color:var(--ink)}.section{background:white;border-radius:12px;padding:18px;box-shadow:0 2px 8px #0002}.screen{display:none}.screen.show{display:block;animation:fade .3s}@keyframes fade{from{opacity:0}to{opacity:1}}button{border:0;border-radius:7px;background:var(--green);color:white;padding:12px 22px;margin:6px;font-size:17px;font-weight:650;cursor:pointer}button:hover{filter:brightness(.94)}button.red{background:var(--red)}button.blue,.selected{background:#2196f3!important}button.gray{background:#607d8b}.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:16px 0}.card{border:2px solid var(--green);background:#e8f5e9;border-radius:10px;padding:14px;cursor:pointer}.card.selected{border-color:#2196f3;background:#e3f2fd}.card strong{display:block;font-size:18px}.topbar,.hud{display:flex;justify-content:space-between;align-items:center;gap:10px}.pill{padding:7px 11px;background:#eef2f6;border-radius:999px;font-weight:700}.progress{height:11px;background:#e5e7eb;flex:1;border-radius:99px;overflow:hidden}.progress span{display:block;height:100%;background:var(--green);width:0}.measure{display:grid;grid-template-columns:repeat(8,1fr);min-height:94px;border:3px solid var(--ink);border-left-width:7px;margin:18px auto;background:#fff;max-width:660px}.slot{border-right:1px dashed #c4cad1;display:flex;align-items:center;justify-content:center;font-size:29px;min-width:0}.slot.filled{background:#f2f9f3}.palette{display:flex;flex-wrap:wrap;justify-content:center;gap:7px}.palette button{background:white;color:var(--ink);border:2px solid var(--green);min-width:92px}.feedback{min-height:52px;font-size:20px;font-weight:700;padding:12px}.ok{color:#25823a}.no{color:#d32f2f}.hidden{display:none!important}.result{font-size:54px;font-weight:800;color:var(--blue)}.mini{color:#667085}.metronome{width:18px;height:18px;background:#ddd;border-radius:50%;display:inline-block;margin-left:8px}.metronome.on{background:var(--red);box-shadow:0 0 0 7px #f4433633}@media(max-width:560px){body{padding:8px}.grid{grid-template-columns:1fr}h1{font-size:1.75rem}.section{padding:12px}.measure{grid-template-columns:repeat(4,1fr);min-height:150px}.slot{min-height:72px}.hud{flex-wrap:wrap}.progress{flex-basis:100%;order:3}}