:root{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color-scheme:dark;--bg:#10151d;--side:#0c1118;--panel:#19212c;--panel2:#202b38;--line:#2d3a49;--text:#edf4f5;--muted:#93a5b4;--accent:#65d8b5;--accent2:#41b99a;--blue:#79a9ef;--orange:#f2ae68;--red:#ef787c;--shadow:0 20px 50px #0003}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}a{color:var(--accent)}.shell{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh}.sidebar{background:var(--side);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;padding:28px 14px}.brand{display:flex;align-items:center;gap:12px;margin:0 10px 30px}.brand-mark{width:39px;height:39px;display:grid;place-items:center;border-radius:12px;background:var(--accent);color:#062017;font-size:30px;font-weight:900}.brand strong{display:block;font-size:17px;letter-spacing:.02em}.brand small{display:block;color:var(--muted);font-size:9px;letter-spacing:.12em;margin-top:3px}.sidebar nav{display:grid;gap:5px}.sidebar nav button{border:0;background:none;color:var(--muted);text-align:left;border-radius:10px;padding:11px 15px;display:flex;align-items:center;gap:15px;font-weight:600}.sidebar nav button span{font-size:19px;width:22px;text-align:center}.sidebar nav button:hover,.sidebar nav button.active{background:#20332f;color:var(--accent)}.sidebar-foot{margin-top:auto;color:var(--muted);font-size:11px;padding:14px}.status-dot{display:inline-block;width:7px;height:7px;background:var(--accent);border-radius:50%;margin-right:5px}.workspace{min-width:0;display:flex;flex-direction:column}.topbar{height:70px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:flex-end;padding:0 34px;background:var(--bg)}.mobile-brand{display:none}.topbar-right{display:flex;gap:16px;align-items:center;color:var(--muted);font-size:12px}.topbar-right button{background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:9px;width:34px;height:34px;font-size:20px}main{width:min(1180px,100%);margin:0 auto;padding:35px 36px 140px;flex:1}.eyebrow{color:var(--accent);font-size:11px;letter-spacing:.18em;font-weight:800;text-transform:uppercase;margin:0 0 7px}.page-title{font-size:clamp(26px,3vw,38px);letter-spacing:-.035em;margin:0 0 8px}.page-subtitle{color:var(--muted);margin:0 0 27px;line-height:1.6}.grid{display:grid;gap:18px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}.card{background:var(--panel);border:1px solid var(--line);border-radius:17px;padding:24px;box-shadow:var(--shadow)}.card h2,.card h3{margin:0 0 15px;font-size:18px}.card p{color:var(--muted);line-height:1.6;margin:5px 0}.card .section-kicker{font-size:11px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;font-weight:800;margin-bottom:9px}.hero{background:linear-gradient(120deg,#193b37,#182433 74%);border:1px solid #335c53;border-radius:22px;padding:32px;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:end;margin-bottom:19px;overflow:hidden;position:relative}.hero:after{content:'♪';position:absolute;right:60px;top:-63px;color:#ffffff0b;font-size:230px;pointer-events:none}.hero h2{font-size:29px;margin:0 0 10px}.hero p{max-width:530px;color:#b7cbc9;line-height:1.6;margin:0}.hero-actions,.actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.btn{border:1px solid var(--line);background:var(--panel2);color:var(--text);padding:11px 16px;border-radius:10px;font-weight:750;min-height:43px}.btn:hover{border-color:var(--accent)}.btn.primary{background:var(--accent);border-color:var(--accent);color:#08271d}.btn.primary:hover{background:#8be9cc}.btn.ghost{background:transparent}.btn.danger{color:var(--red);border-color:#704850}.btn.small{padding:7px 11px;min-height:34px;font-size:12px}.metric{font-size:34px;font-weight:850;line-height:1.1;letter-spacing:-.04em}.metric-label{color:var(--muted);font-size:12px;margin-top:8px}.metric small{font-size:16px;color:var(--muted)}.progress-track{height:8px;background:var(--side);border-radius:30px;overflow:hidden}.progress-fill{height:100%;background:var(--accent);border-radius:30px}.pill{display:inline-flex;align-items:center;gap:5px;border-radius:30px;background:#294139;color:var(--accent);padding:5px 10px;font-size:11px;font-weight:800}.pill.orange{background:#47362b;color:var(--orange)}.pill.blue{background:#263851;color:var(--blue)}.form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.field{display:flex;flex-direction:column;gap:7px;min-width:0}.field label{font-size:12px;color:var(--muted);font-weight:700}.field input,.field select{width:100%;background:var(--side);border:1px solid var(--line);color:var(--text);border-radius:9px;padding:10px 11px;min-height:42px}.field input[type=range]{padding:0;accent-color:var(--accent)}.field input[type=checkbox]{width:auto;min-height:auto;accent-color:var(--accent)}.check-row{display:flex;gap:13px;flex-wrap:wrap;align-items:center}.check-row label{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:13px}.status-line{display:flex;flex-wrap:wrap;gap:13px;align-items:center;color:var(--muted);font-size:13px;padding:13px 0}.status-line strong{color:var(--text)}.score-scroll{overflow-x:auto;padding:6px 0 12px}.score-svg{display:block;max-width:none}.measure-bg{fill:#ffffff04;stroke:#ffffff10}.score-measure.current .measure-bg{fill:#65d8b51b;stroke:#65d8b570}.staff,.barline{stroke:#7e94a4;stroke-width:1.5}.barline{stroke-width:2}.meter{fill:var(--text);font-size:20px;font-weight:800}.beat-label,.measure-number{fill:var(--muted);font-size:12px;text-anchor:middle}.score-note{color:var(--text);outline:none;cursor:pointer}.score-note.current{color:var(--blue)}.score-note.accurate{color:var(--accent)}.score-note.early{color:var(--orange)}.score-note.late{color:var(--red)}.score-note.miss{color:#697987}.fill{fill:currentColor}.stem,.glyph,.flag,.beam,.tie{stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}.beam{stroke-width:5}.tie{stroke-width:2}.tie-label{fill:var(--accent);font-size:11px}.beat-circles{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;padding:15px}.beat-circle{width:60px;height:60px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font-size:25px;font-weight:800;color:var(--muted);transition:background .06s,color .06s}.beat-circle.first{border-color:#7c9a87}.beat-circle.active{background:var(--accent);color:#09271e;box-shadow:0 0 0 8px #65d8b524}.beat-circle.first.active{background:var(--orange)}.bpm-display{font-size:75px;font-weight:850;letter-spacing:-.08em;text-align:center;line-height:1}.bpm-display small{font-size:18px;color:var(--muted);letter-spacing:0}.bpm-buttons{display:flex;justify-content:center;gap:7px;margin:15px 0}.count-display{font-size:26px;font-weight:800;text-align:center;min-height:39px;color:var(--accent)}.training-status{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:14px 18px;background:var(--panel2);border-radius:12px;margin:15px 0}.result-score{font-size:72px;font-weight:900;color:var(--accent);line-height:1}.result-score small{font-size:20px}.result-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.result-box{background:var(--panel2);border-radius:11px;padding:15px}.result-box b{font-size:22px;display:block}.result-box span{font-size:11px;color:var(--muted)}.legend{display:flex;gap:13px;flex-wrap:wrap;color:var(--muted);font-size:12px}.legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:4px}.course-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.course-day{border:1px solid var(--line);background:var(--panel2);border-radius:11px;padding:11px;text-align:left;color:var(--muted);min-height:73px}.course-day b{display:block;color:var(--text);font-size:15px}.course-day span{font-size:11px;display:block;margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.course-day.done{border-color:#39866e}.course-day.selected{background:#244139;border-color:var(--accent)}.day-detail{margin-top:18px}.callout{border-left:3px solid var(--accent);background:#65d8b510;padding:13px 16px;border-radius:0 9px 9px 0;color:var(--text);line-height:1.6}.record-row{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:10px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line);font-size:13px}.record-row:last-child{border-bottom:0}.record-row span{color:var(--muted)}.chart{width:100%;height:160px;display:block}.chart-grid{stroke:var(--line);stroke-width:1}.chart-line{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.chart-area{fill:#65d8b522}.chart-text{fill:var(--muted);font-size:10px}.bar{fill:var(--blue)}.bar.secondary{fill:var(--accent)}.weak-row{display:grid;grid-template-columns:1fr 1fr auto;gap:15px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}.weak-row:last-child{border:0}.weak-row small{color:var(--muted)}.pluck-dock{position:fixed;bottom:0;left:240px;right:0;background:var(--side);border-top:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:22px;padding:11px 20px;z-index:5;box-shadow:0 -12px 30px #0004}.pluck-hint{display:flex;flex-direction:column;gap:3px}.pluck-hint span{font-size:11px;color:var(--muted)}#pluck-button{border:0;background:var(--accent);color:#08251b;border-radius:11px;font-size:17px;font-weight:850;padding:13px 42px;min-width:155px;touch-action:manipulation}#pluck-button.hit{transform:scale(.96);background:#e9b87c}#pluck-button span{font-size:22px}#pluck-feedback{min-width:95px;color:var(--muted);font-size:12px}#toast{position:fixed;bottom:85px;right:25px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:12px 15px;box-shadow:var(--shadow);display:none;z-index:20;max-width:350px}#toast.show{display:block}.detail-pop{position:fixed;z-index:30;right:22px;bottom:100px;max-width:320px;background:var(--panel2);border:1px solid var(--accent);padding:17px;border-radius:12px;box-shadow:var(--shadow);font-size:13px;line-height:1.7}.detail-pop button{float:right;background:none;border:0;color:var(--text);font-size:18px}.warning{border-color:#88613d;background:#3b3026;color:#f8d6aa}.divider{height:1px;background:var(--line);margin:20px 0}.empty{padding:25px;text-align:center;color:var(--muted)}.mono{font-variant-numeric:tabular-nums}.spacer{height:18px}
html[data-theme=light]{color-scheme:light;--bg:#f4f7f6;--side:#e9f0ef;--panel:#ffffff;--panel2:#eef3f2;--line:#d8e4e2;--text:#172d2b;--muted:#607876;--accent:#158e70;--accent2:#11785e;--blue:#396dac;--orange:#bb7435;--red:#bf4c54;--shadow:0 12px 32px #234b4112}html[data-theme=light] .hero{background:linear-gradient(120deg,#d2ebe3,#e9f0f3)}html[data-theme=light] .hero p{color:#40645c}html[data-theme=light] .sidebar nav button:hover,html[data-theme=light] .sidebar nav button.active{background:#d5e9e2}html[data-theme=light] .pill{background:#dcefe7}html[data-theme=light] .pill.orange{background:#f8eadb}html[data-theme=light] .pill.blue{background:#e0eaf8}html[data-theme=light] .callout{background:#158e7012}html[data-theme=light] .measure-bg{fill:#102b2805;stroke:#102b2810}html[data-theme=light] .score-measure.current .measure-bg{fill:#158e7015}html[data-theme=light] .course-day.selected{background:#dcefe7}
@media(max-width:1050px){.shell{grid-template-columns:190px minmax(0,1fr)}.pluck-dock{left:190px}.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.course-list{grid-template-columns:repeat(4,minmax(0,1fr))}.grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.shell{display:block}.sidebar{position:sticky;top:0;height:auto;padding:0;z-index:10}.brand,.sidebar-foot{display:none}.sidebar nav{display:flex;overflow-x:auto;gap:0;padding:7px;scrollbar-width:none}.sidebar nav::-webkit-scrollbar{display:none}.sidebar nav button{white-space:nowrap;flex:0 0 auto;padding:10px 12px;font-size:12px;gap:6px}.sidebar nav button span{font-size:15px;width:auto}.topbar{height:50px;padding:0 16px;justify-content:space-between}.mobile-brand{display:block;font-weight:850;font-size:13px}.topbar-right{font-size:10px;gap:8px}main{padding:22px 16px 135px}.grid.two,.grid.three{grid-template-columns:1fr}.hero{grid-template-columns:1fr;padding:24px}.hero h2{font-size:25px}.card{padding:18px}.result-grid{grid-template-columns:repeat(2,1fr)}.pluck-dock{left:0;gap:10px;justify-content:space-between;padding:8px 13px}.pluck-hint span{display:none}#pluck-button{min-width:126px;padding:12px 22px}#pluck-feedback{min-width:75px;font-size:11px}.course-list{grid-template-columns:repeat(3,minmax(0,1fr))}.record-row{grid-template-columns:1.5fr repeat(2,1fr)}.record-row span:nth-child(n+4){display:none}.weak-row{grid-template-columns:1fr auto}.weak-row .weak-metric{display:none}}
@media(max-width:430px){.form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.beat-circle{width:49px;height:49px;font-size:20px}.course-list{grid-template-columns:repeat(2,minmax(0,1fr))}.pluck-hint{display:none}.pluck-dock{justify-content:center}#pluck-feedback{min-width:75px}.result-grid{gap:7px}.result-box{padding:11px}}