:root{--ink:#18211d;--muted:#6d7973;--line:#dfe6e2;--surface:#fff;--bg:#f4f7f5;--mint:#1bc982;--mint-dark:#0ca769;--yellow:#ffd84c;--red:#f05d5e;--blue:#3186d8;--shadow:0 12px 36px rgba(28,48,39,.09)}
[hidden]{display:none!important}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;letter-spacing:0}.app-shell{width:min(1080px,100%);min-height:100vh;margin:auto;background:#fafcfb}.topbar{height:72px;padding:0 clamp(16px,4vw,40px);display:flex;align-items:center;border-bottom:1px solid var(--line);background:rgba(255,255,255,.92);position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;gap:10px;min-width:190px}.brand-mark{width:38px;height:38px;display:grid;place-items:center;background:var(--ink);color:#fff;border-radius:8px;font-size:21px}.brand strong,.brand span{display:block}.brand span{font-size:11px;color:var(--muted);margin-top:2px}.view-tabs{display:flex;gap:8px;margin:auto}.tab{border:0;background:transparent;padding:10px 22px;color:var(--muted);font-size:15px;cursor:pointer}.tab.active{color:var(--ink);font-weight:700;border-bottom:2px solid var(--mint)}button{font:inherit;letter-spacing:0}.icon-button{width:40px;height:40px;border:1px solid var(--line);background:#fff;border-radius:8px;cursor:pointer;font-size:19px}.view{display:none;padding:34px clamp(16px,4vw,48px) 24px}.view.active{display:block}.practice-head{display:flex;justify-content:space-between;align-items:flex-end}.eyebrow{margin:0 0 7px;color:var(--mint-dark);font-weight:700;font-size:12px}.practice-head h1,.records-header h1{margin:0;font-size:clamp(22px,4vw,30px);line-height:1.2}.progress-copy strong{font-size:30px}.progress-copy span{color:var(--muted)}.controls-row{display:flex;gap:10px;align-items:center;margin:22px 0 16px;flex-wrap:wrap}.chip{border:1px solid #b9ddd0;background:#fff;color:#25785a;border-radius:999px;padding:8px 13px;cursor:pointer}.voice-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--blue);margin-right:5px}.switch-control,.switch-line{display:flex;align-items:center;gap:9px;margin-left:auto;color:var(--muted);font-size:13px}.switch-control input,.switch-line input{position:absolute;opacity:0}.switch{width:42px;height:24px;background:#c9d1cd;border-radius:20px;position:relative;transition:.2s}.switch:after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;left:3px;top:3px;box-shadow:0 1px 4px #777;transition:.2s}input:checked+.switch{background:var(--yellow)}input:checked+.switch:after{left:21px}.score-panel{background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);overflow:hidden}.score-toolbar{padding:11px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;color:var(--muted);font-size:12px}.score-scroll{overflow-x:auto;padding:16px}#scoreSvg{display:block;width:100%;min-width:690px;height:260px}.staff-line{stroke:#68726d;stroke-width:1}.bar-line{stroke:#8a948f}.note-head{fill:var(--ink);transition:.15s}.note-stem{stroke:var(--ink);stroke-width:2}.note-group.active .note-head{fill:var(--mint);filter:drop-shadow(0 0 5px rgba(27,201,130,.55))}.note-group.correct .note-head{fill:var(--mint-dark)}.note-group.wrong .note-head{fill:var(--red)}.note-label{font-size:11px;fill:var(--muted);text-anchor:middle}.feedback-strip{padding:10px 16px;background:#f7faf8;font-size:13px;color:var(--muted);border-top:1px solid var(--line)}.pitch-panel{margin-top:16px;background:#edf3f0;border-radius:8px;padding:12px 15px}.pitch-head{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}.pitch-head strong{color:var(--ink)}#pitchCanvas{width:100%;height:94px;display:block}.pitch-axis{display:flex;justify-content:space-between;color:#9aa59f;font-size:10px}.status-line{text-align:center;height:42px;padding-top:15px;color:var(--muted);font-size:13px}.actions{display:flex;justify-content:center;gap:26px;min-height:92px;align-items:center}.actions button{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer;color:var(--muted);min-width:86px}.action-icon,.mic-icon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center}.action-icon{background:#e2f2ec;color:var(--mint-dark)}.mic-icon{background:var(--mint);color:#fff;box-shadow:0 6px 16px rgba(27,201,130,.3)}.record-action.recording .mic-icon{background:var(--red);animation:pulse 1.3s infinite}.hidden{display:none!important}.exercise-nav{display:grid;grid-template-columns:120px 1fr 120px;align-items:center;border-top:1px solid var(--line);margin-top:8px;padding-top:16px}.exercise-nav button,.text-button{border:0;background:transparent;color:var(--ink);cursor:pointer}.mini-progress{height:4px;background:#e2e8e5;border-radius:5px}.mini-progress span{display:block;height:100%;background:var(--mint);border-radius:5px;transition:.3s}.records-header{display:flex;justify-content:space-between;align-items:end}.text-button{color:var(--red)}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:24px 0}.stats-grid div{background:#fff;border:1px solid var(--line);border-radius:8px;padding:18px}.stats-grid span{display:block;color:var(--muted);font-size:12px}.stats-grid strong{display:block;font-size:28px;margin-top:7px}.record-list{display:grid;gap:9px}.record-item{display:grid;grid-template-columns:1fr auto;align-items:center;background:#fff;border-bottom:1px solid var(--line);padding:16px}.record-item p{margin:0 0 5px;font-weight:700}.record-item small{color:var(--muted)}.record-score{font-size:26px;font-weight:800;color:var(--mint-dark)}.empty{padding:70px 10px;text-align:center;color:var(--muted)}dialog{border:0;background:transparent;padding:0;width:min(440px,calc(100% - 28px))}dialog::backdrop{background:rgba(16,25,21,.45)}.dialog-card{background:#fff;border-radius:8px;padding:24px;box-shadow:var(--shadow)}.dialog-head{display:flex;justify-content:space-between}.dialog-head h2{margin:0}.field{display:block;border:0;padding:0;margin:26px 0}.field output{float:right;color:var(--mint-dark);font-weight:700}.field input[type=range]{width:100%;accent-color:var(--mint);margin-top:15px}.field legend{margin-bottom:10px}.segmented{display:grid;grid-template-columns:repeat(3,1fr);background:#edf1ef;border-radius:8px;padding:3px}.segmented button{border:0;background:transparent;padding:10px;border-radius:6px;cursor:pointer}.segmented button.active{background:#fff;box-shadow:0 2px 7px rgba(0,0,0,.09)}.switch-line{margin:0;justify-content:space-between}.switch-line span:first-child{margin-right:auto}.switch-line strong,.switch-line small{display:block}.switch-line small{margin-top:3px}.save-button{width:100%;margin-top:28px;padding:12px;border:0;border-radius:8px;color:#fff;background:var(--ink);cursor:pointer}.countdown{position:fixed;inset:0;background:rgba(16,25,21,.48);z-index:50;display:grid;place-content:center;text-align:center;color:#fff}.countdown strong{font-size:88px;line-height:1}.countdown span{margin-top:10px}.countdown[hidden]{display:none}@keyframes pulse{50%{transform:scale(1.09)}}
@media(max-width:650px){.topbar{height:60px}.brand{min-width:0}.brand span{display:none}.brand-mark{width:34px;height:34px}.view-tabs{gap:0}.tab{padding:9px 14px}.view{padding:22px 10px 20px}.controls-row{gap:7px}.switch-control{order:3;width:100%;justify-content:flex-end}.score-scroll{padding:8px 4px;overflow-x:hidden}#scoreSvg{width:100%;min-width:0;height:auto}.score-toolbar{padding-inline:10px}.pitch-panel{margin-inline:0}.exercise-nav{grid-template-columns:90px 1fr 90px}.stats-grid{gap:7px}.stats-grid div{padding:13px 10px}.stats-grid strong{font-size:22px}.actions{gap:8px}}
.login-screen{position:fixed;inset:0;z-index:100;background:#eef3f0;display:grid;place-items:center;padding:18px}.login-screen[hidden]{display:none}.login-panel{width:min(380px,100%);background:#fff;border:1px solid var(--line);padding:30px;border-radius:8px;box-shadow:var(--shadow)}.login-panel .brand-mark{margin-bottom:18px}.login-panel h1{margin:0;font-size:25px}.login-panel p{color:var(--muted);margin:7px 0 24px}.login-panel label{display:grid;gap:7px;margin:14px 0;font-size:13px}.login-panel input{height:43px;border:1px solid var(--line);border-radius:6px;padding:0 11px;font-size:16px}.login-panel button{width:100%;height:44px;border:0;border-radius:7px;background:var(--ink);color:#fff;margin-top:10px}.login-error{min-height:20px;color:var(--red);font-size:13px}.user-menu{display:flex;align-items:center;gap:8px;font-size:12px}.user-menu button{border:0;background:transparent;color:var(--muted);cursor:pointer}.library-header,.book-detail-head,.student-tool-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.library-header h1{margin:0}.book-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-top:24px}.book-item{border:1px solid var(--line);background:#fff;border-radius:8px;padding:20px;text-align:left;cursor:pointer}.book-item strong,.book-item small{display:block}.book-item small{color:var(--muted);margin-top:6px}.book-cover{display:grid;place-items:center;width:46px;height:58px;background:#20352c;color:#fff;border-radius:3px;margin-bottom:20px;font-size:22px}.book-detail{margin-top:12px}.book-detail h2{margin-right:auto}.import-status{min-height:24px;color:var(--mint-dark)}.score-library{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}.score-item{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);background:#fff;padding:13px;border-radius:6px;cursor:pointer}.score-item span{font-size:11px;color:var(--mint-dark)}.student-tools{border-block:1px solid var(--line);padding:12px 0;margin-bottom:16px}.student-tool-head span{font-size:12px;color:var(--muted)}.mini-piano{height:128px;position:relative;overflow-x:auto;overflow-y:hidden;margin-top:10px;background:#171a18;border:1px solid #171a18;touch-action:pan-x;min-width:560px}.piano-whites{position:absolute;inset:0;display:flex;gap:1px}.piano-blacks{position:absolute;inset:0;pointer-events:none}.piano-key{border:0;cursor:pointer;padding:0;touch-action:manipulation}.piano-key.white{height:126px;flex:1 1 0;background:linear-gradient(#fff 0%,#fff 82%,#edf0ee 100%);color:#4c5550;border-radius:0 0 3px 3px;box-shadow:inset 0 -2px 2px rgba(0,0,0,.08)}.piano-key.black{position:absolute;top:0;width:4.4%;height:78px;transform:translateX(-50%);z-index:2;background:linear-gradient(90deg,#171a18,#303633 55%,#111);color:#fff;border-radius:0 0 3px 3px;box-shadow:0 4px 5px rgba(0,0,0,.42);pointer-events:auto}.piano-key span{position:absolute;bottom:7px;left:0;right:0;font-size:9px}.piano-key.black span{bottom:5px;font-size:8px;color:#d8ddda}.piano-key.pressed{background:#42b987}.batchImportLabel{cursor:pointer}@media(max-width:760px){.topbar{overflow-x:auto}.brand{display:none}.user-menu strong{display:none}.view-tabs{margin:0}.tab{white-space:nowrap}.book-detail-head{flex-wrap:wrap}.score-library{grid-template-columns:repeat(2,1fr)}.student-tools{overflow-x:auto}.mini-piano{width:620px}}
.piano-hint{margin:10px 0;padding:10px 12px;border:1px solid #c9d9eb;border-radius:6px;background:#f2f7fd;color:#245386;font-size:12px;line-height:1.55}.piano-scroll{width:100%;overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;border-radius:7px}.mini-piano{width:100%;min-width:700px;margin-top:0;background:#fff;border-color:#c5d5e5}.piano-key.white{border-right:1px solid #b9cadc;background:#fff}.piano-key.white:first-child{border-left:1px solid #b9cadc}.piano-key.black{width:4.2%;height:80px;background:#2c3540;box-shadow:none}.piano-key.white span{color:#58718c}.piano-current{padding-top:9px;font-size:13px;color:#58665f}.piano-current strong{margin-left:16px;color:#185a92;font-size:16px}.piano-key:focus-visible{outline:3px solid #35a87b;outline-offset:-3px}.piano-key.pressed{background:#51c79a}.student-tools{overflow:hidden}@media(max-width:760px){.piano-hint{font-size:11px}.mini-piano{width:620px;min-width:620px;height:118px}.piano-key.white{height:116px}.piano-key.black{height:72px}.piano-scroll{touch-action:pan-x}.piano-current{position:sticky;left:0}}
.play-rhythm-coach{margin:10px 12px 12px;padding:12px 14px;border:1px solid #bfd6cc;border-radius:7px;background:#f4faf7}.play-rhythm-coach[hidden]{display:none}.rhythm-readout{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:16px}.rhythm-readout strong{font-size:16px;color:#182e25}.rhythm-readout span{font-size:14px;color:#4d6259}.rhythm-readout b{justify-self:end;min-width:74px;text-align:center;padding:5px 10px;border-radius:5px;background:#173d30;color:#fff;font-size:17px}.rhythm-dots{display:flex;justify-content:center;gap:10px;margin:10px 0 8px}.rhythm-dots i{width:30px;height:30px;display:grid;place-items:center;border:1px solid #a8bbb2;border-radius:50%;background:#fff;color:#65766e;font-style:normal;font-size:12px;transition:background .08s,color .08s,transform .08s}.rhythm-dots i.active{background:#f1b82d;border-color:#d99c08;color:#172119;transform:scale(1.18);font-weight:800}.rhythm-pulse-track{height:5px;background:#dce7e2;border-radius:4px;overflow:hidden}.rhythm-pulse-track span{display:block;width:0;height:100%;background:#159563}.note-group.active .scan-note-zone{fill:rgba(241,184,45,.28)!important;stroke:#e09e00!important;stroke-width:3!important}.note-group.active .note-head{fill:#e4a900!important;filter:drop-shadow(0 0 4px rgba(228,169,0,.65))}#playbackCursor{display:none!important}@media(max-width:650px){.play-rhythm-coach{position:sticky;bottom:6px;z-index:12;margin:8px 0;padding:10px;background:rgba(244,250,247,.97);box-shadow:0 3px 14px rgba(15,45,33,.16)}.rhythm-readout{gap:8px}.rhythm-readout strong{font-size:14px}.rhythm-readout span{font-size:13px}.rhythm-readout b{font-size:15px;min-width:62px}.rhythm-dots{gap:7px}.rhythm-dots i{width:27px;height:27px}}
.measure-guide-barline,.measure-beat-dot{display:none}.measure-beat-frame{display:none;fill:rgba(15,157,106,.14);stroke:#07915f;stroke-width:2.5;pointer-events:none;vector-effect:non-scaling-stroke}.measure-beat-frame.active{display:block}.note-group.active .scan-note-zone{fill:transparent!important;stroke:none!important}.note-group.active .note-head{fill:var(--ink)!important;filter:none!important}#playbackCursor{display:none!important}
.scan-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:22px}.scan-heading h1{margin:0;font-size:clamp(22px,4vw,30px)}.format-badge{padding:7px 10px;border:1px solid #b9ddd0;color:var(--mint-dark);border-radius:999px;font-size:12px;font-weight:700}.scan-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:18px}.capture-panel,.recognition-panel{background:#fff;border:1px solid var(--line);border-radius:8px;min-height:500px;overflow:hidden}.capture-panel{padding:16px;display:flex;flex-direction:column}.capture-area{min-height:430px;border:1.5px dashed #a8b8b0;background:#f7faf8;display:grid;place-content:center;text-align:center;border-radius:8px}.capture-area strong,.capture-area small{display:block}.capture-area small{color:var(--muted);margin-top:7px}.capture-choice{display:flex;justify-content:center;gap:10px;margin-top:18px;flex-wrap:wrap}.camera-symbol{width:58px;height:58px;display:grid;place-items:center;border-radius:50%;background:#e1f4ec;color:var(--mint-dark);font-size:26px;margin:0 auto 15px}.photo-stage{position:relative;min-height:410px;background:#1d2521;border-radius:6px;overflow:auto;display:grid;place-items:center}.photo-stage[hidden],.capture-actions[hidden]{display:none}.photo-stage canvas{display:block;max-width:100%;max-height:520px}.scan-beam{position:absolute;left:5%;right:5%;height:2px;top:10%;background:var(--mint);box-shadow:0 0 12px var(--mint);opacity:0}.scan-beam.running{opacity:1;animation:scan 1.5s ease-in-out infinite}.capture-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:12px}.outline-button,.primary-button{padding:10px 16px;border-radius:7px;cursor:pointer}.outline-button{border:1px solid var(--line);background:#fff}.primary-button{border:1px solid var(--ink);background:var(--ink);color:#fff}.recognition-panel{padding:20px}.recognition-empty{height:100%;min-height:450px;display:grid;place-content:center;text-align:center;color:var(--muted)}.recognition-empty span{font-size:45px;color:#c5d2cc}.recognition-empty strong,.recognition-empty small{display:block}.recognition-empty small{margin-top:7px}.result-head{display:flex;justify-content:space-between;align-items:start}.result-head h2{margin:4px 0;font-size:20px}.confidence{color:var(--mint-dark);font-size:12px}.detected-notes{display:flex;gap:7px;flex-wrap:wrap;margin:22px 0;padding:16px 0;border-block:1px solid var(--line)}.detected-note{display:grid;grid-template-columns:repeat(3,24px);gap:2px;text-align:center;background:#f4f7f5;border-radius:6px;padding:5px}.detected-note strong{grid-column:1/-1;font-size:14px}.detected-note button{border:0;background:#fff;border-radius:4px;cursor:pointer;color:var(--muted)}.xml-preview{height:160px;overflow:auto;margin:0;background:#15211b;color:#bdebd8;padding:12px;border-radius:6px;font:11px/1.45 Consolas,monospace;white-space:pre-wrap}.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.result-actions button{padding:11px;border-radius:7px;cursor:pointer}.download-button{border:1px solid var(--line);background:#fff}.practice-button{border:0;background:var(--mint);color:#fff;font-weight:700}.result-warning{padding:10px;background:#fff8dd;color:#7a6221;border-radius:6px;font-size:12px;margin-top:12px}@keyframes scan{50%{top:88%}}@media(max-width:760px){.scan-layout{grid-template-columns:1fr}.capture-panel,.recognition-panel{min-height:0}.capture-area{min-height:340px}.recognition-empty{min-height:240px}}@media(max-width:650px){.topbar{padding-inline:12px}.tab{padding-inline:9px}.capture-choice{display:grid}.result-actions{grid-template-columns:1fr}}