:root{--bg: #eeeeea;--panel: #ffffff;--panel2: #e6e6e1;--line: #d4d4cd;--ink: #26262b;--muted: #75757f;--dim: #a9a9b0;--accent: #2f6fe0;--good: #1f9d55;--bad: #d93a3a;--warn: #b7791f;--card: var(--panel);color-scheme:light}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 Inter,system-ui,sans-serif}button{font:inherit;color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:4px;padding:6px 12px;cursor:pointer}button:hover:not(:disabled){border-color:var(--muted)}button:disabled{opacity:.4;cursor:default}h2{margin:0 0 10px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.muted{color:var(--muted)}b{font-weight:600}.row{display:flex;align-items:center}.gap{gap:8px}.wrap{flex-wrap:wrap}.app{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:24px;max-width:1180px;margin:0 auto;padding:20px 16px 60px;align-items:start}main{display:grid;gap:14px;min-width:0}.panel{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:14px 16px}.banner{padding:9px 14px;border-radius:4px;font-weight:500}.banner.err{background:#d93a3a1f;color:var(--bad)}.banner.ok{background:#1f9d551f;color:var(--good)}.side{position:sticky;top:20px;display:grid;gap:14px;text-align:center}.logo{font-size:20px;font-weight:700;line-height:1.1;letter-spacing:-.01em}.logo span{color:var(--accent)}.go{display:flex;align-items:center;justify-content:center;gap:8px;padding:9px;font-weight:600;background:var(--panel2)}.go .dot{width:9px;height:9px;border-radius:50%;background:var(--good)}.go.stop .dot{background:var(--bad);animation:pulse 1.2s infinite}@keyframes pulse{50%{opacity:.35}}.side nav{border-top:1px solid var(--line)}.side nav button{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:9px 10px;color:var(--muted)}.side nav button.active{background:var(--panel);color:var(--ink)}.side nav button:hover{color:var(--ink)}.foot{color:var(--dim);font-size:11px;line-height:1.5}.statbar{display:flex;flex-wrap:wrap;gap:8px 34px;align-items:flex-end;padding:10px 18px}.stat small{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}.stat b{font-size:26px;font-weight:500;font-variant-numeric:tabular-nums}.stat b i{font-style:normal;font-size:13px;color:var(--muted);margin-left:2px}.live-note{margin-left:auto;min-width:150px}.live-note b{color:var(--dim)}.live-note.on b{color:var(--ink)}.tuner{position:relative;height:4px;background:var(--line);border-radius:2px;margin-top:4px}.tuner .tick{position:absolute;left:50%;top:-3px;width:2px;height:10px;background:var(--good)}.tuner .needle{position:absolute;top:-3px;width:4px;height:10px;background:var(--accent);border-radius:2px;transform:translate(-2px);transition:left .08s}.keys-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:baseline;margin-bottom:4px}.keys-head h2{margin:0}.keys-head .muted{font-size:12px}.keyrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.key{width:54px;height:54px;padding:0;display:grid;grid-template-rows:1fr 6px;align-items:center;justify-items:center;background:var(--panel2);border:1px solid transparent;border-radius:5px;overflow:hidden;position:relative}.key .nm{font:600 16px Inter,sans-serif}.key.acc .nm{font-size:14px}.key .pbar{width:100%;height:6px;background:var(--panel)}.key .pbar i{display:block;height:100%;background:var(--good);transition:width .3s}.key.locked{background:transparent;border:1px dashed var(--line);color:var(--dim)}.key.locked.next{border-color:var(--accent);color:var(--accent)}.key.focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.key.mastered .nm{color:var(--good)}.sheet{padding:18px 14px 10px}.staff{width:100%;height:auto;display:block;color:var(--muted)}.staff .line{stroke:var(--dim);stroke-width:1.1}.staff .line.thick{stroke-width:3.5;stroke:var(--muted)}.staff .clef{font-family:Noto Music,Apple Symbols,serif;fill:var(--muted)}.staff .time text{font:700 24px Inter,sans-serif;fill:var(--muted)}.staff .note{color:var(--ink)}.staff .note.correct{color:var(--good)}.staff .note.wrong{color:var(--bad)}.staff .head{fill:currentColor;stroke:currentColor;stroke-width:1.4}.staff .head.open{fill:var(--panel);stroke-width:2.2}.staff .stem,.staff .ledger{stroke:currentColor;stroke-width:1.5}.staff .flag{stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round}.staff .acc{fill:currentColor;font-family:Noto Music,Apple Symbols,serif}.staff .name{fill:currentColor;font:500 12px Inter,sans-serif;opacity:.7}.staff .hl{fill:#2f6fe014}.staff .note.active .head:not(.open){fill:var(--accent);stroke:var(--accent)}.staff .note.active{color:var(--accent)}.staff .note.active .head.open{stroke:var(--accent)}.staff .bar-bg{fill:var(--line)}.staff .bar{fill:var(--bad)}.staff .bar.ok{fill:var(--good)}.sheet-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:4px;font-weight:500}.level{width:70px;height:4px;background:var(--line);border-radius:2px;overflow:hidden;flex:none}.level div{height:100%;background:var(--accent)}.chart{width:100%;height:180px;display:block}.chart .grid{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}.chart .trace{fill:none;stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke}.chart .dot{fill:var(--accent)}.tbl{width:100%;border-collapse:collapse}.tbl th{text-align:left;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:500}.tbl th,.tbl td{padding:6px 10px 6px 0;border-bottom:1px solid var(--line)}.tbl td:last-child{width:25%}.pbar.wide{display:block;height:6px;background:var(--panel2);border-radius:3px;overflow:hidden}.pbar.wide i{display:block;height:100%;background:var(--good)}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px 28px;margin:6px 0 18px}.grid label{display:grid;gap:4px;font-size:13px;color:var(--muted)}.grid label.check{display:flex;gap:8px;align-items:center;color:var(--ink);font-size:14px}.grid input[type=number],.grid select{font:inherit;padding:6px 8px;border-radius:4px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}.rng{display:flex;gap:10px;align-items:center}.rng input{flex:1}.rng em{font-style:normal;color:var(--ink);min-width:42px;text-align:right}.lengths{display:grid;gap:6px;font-size:13px;color:var(--muted)}.pill.on{background:var(--accent);border-color:var(--accent);color:#fff}button.danger{color:var(--bad)}@media(max-width:760px){.app{grid-template-columns:1fr}.side{position:static;order:-1;grid-template-columns:1fr 1fr;align-items:center;text-align:left}.side nav{grid-column:1 / -1;display:flex}.side nav button{text-align:center}.foot{display:none}}.stat b.time{font-size:22px}.daybars{display:grid;grid-template-columns:repeat(14,1fr);gap:6px;align-items:end;margin:6px 0 16px}.daybar{display:grid;grid-template-rows:14px 110px 16px;text-align:center;font-size:10px;color:var(--muted)}.daybar .col{display:flex;align-items:flex-end;background:var(--panel2);border-radius:3px;overflow:hidden}.daybar .col i{display:block;width:100%;background:var(--accent);min-height:0}.daybar .col i.goal{background:var(--good)}.daybar .v{align-self:end;white-space:nowrap;overflow:hidden}.stat.goal{min-width:110px}.stat b.time.done{color:var(--good)}.gbar{height:4px;background:var(--line);border-radius:2px;margin-top:4px;overflow:hidden}.gbar i{display:block;height:100%;background:var(--accent)}.stat.goal b.done~.gbar i{background:var(--good)}.daybar .col{position:relative}.goalline{position:absolute;left:0;right:0;border-top:1px dashed var(--muted);pointer-events:none}.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:0 4px 10px;border-bottom:1px solid var(--line);margin-bottom:8px}.metro-btn{display:flex;align-items:center;gap:8px;padding:4px 12px 4px 8px}.metro-btn.on{border-color:var(--accent);color:var(--accent)}.metro-btn svg{overflow:visible}.m-body{fill:var(--panel2);stroke:var(--muted);stroke-width:1.5;stroke-linejoin:round}.m-rod{stroke:var(--ink);stroke-width:2;stroke-linecap:round}.m-weight{fill:var(--accent)}.metro-btn:not(.on) .m-weight{fill:var(--dim)}.bpm{display:flex;align-items:center;gap:4px}.bpm button{width:28px;padding:3px 0}.bpm input{width:56px;font:inherit;padding:4px 6px;text-align:center;border-radius:4px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}.bpm small{color:var(--muted);margin:0 4px 0 2px}.beats{display:flex;gap:6px}.beats.off{opacity:.35}.beats i{width:12px;height:12px;border-radius:50%;background:var(--panel2);border:1px solid var(--line)}.beats i.first{border-color:var(--muted)}.beats i.on{background:var(--accent);border-color:var(--accent);opacity:.55}.beats i.flash{opacity:1;transform:scale(1.35);box-shadow:0 0 8px var(--accent)}.tgl{margin-left:auto;display:flex;gap:6px;align-items:center;font-size:13px;color:var(--muted);cursor:pointer}