:root{--color-bg: #f9f9f9;--color-card: #ffffff;--color-surface: #fafafa;--color-border: rgba(0, 0, 0, .07);--color-border-hover: #c9c9c9;--color-text: #1a1a1a;--color-text-2: #5c5c5c;--color-text-dim: #999999;--color-primary: #1a1a1a;--color-primary-hover: #000000;--color-accent: #1d4ed8;--color-correct: #16a34a;--color-correct-light: #22c55e;--color-wrong: #dc2626;--radius-card: 14px;--radius-ctl: 9px;--radius-pill: 999px;--shadow-card: 0 1px 3px rgba(0, 0, 0, .03), 0 4px 16px rgba(0, 0, 0, .04)}*{box-sizing:border-box}html,body,#root{margin:0;padding:0;min-height:100%;background:var(--color-bg);color:var(--color-text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;-webkit-font-smoothing:antialiased}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}button:disabled{opacity:.35;cursor:not-allowed}.app{max-width:720px;margin:0;min-height:calc(100vh - 96px);display:flex;flex-direction:column}.appHeader{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:0}.appTitle{font-size:27px;font-weight:700;letter-spacing:-.02em;margin:0}.stopBtn{padding:7px 14px;border-radius:var(--radius-ctl);border:1px solid var(--color-border);color:var(--color-text-2);font-size:13px;font-weight:600;transition:all .12s}.stopBtn:hover{border-color:var(--color-border-hover);color:var(--color-text)}.headerRight{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.midiBtn{padding:7px 14px;border-radius:var(--radius-ctl);border:1px solid var(--color-border);color:var(--color-text-2);font-size:13px;font-weight:600;transition:all .12s}.midiBtn:hover:not(:disabled){border-color:var(--color-accent);color:var(--color-accent)}.midiBtn:disabled{opacity:.55;cursor:default}.midiHint{font-size:13px;color:var(--color-text-dim)}.midiSelect{max-width:200px;padding:7px 10px;border-radius:var(--radius-ctl);border:1px solid var(--color-border);font-size:13px;color:var(--color-text);background:var(--color-surface);outline:none}.midiSelect:focus{border-color:var(--color-accent);background:var(--color-card)}.appMain{flex:1;margin-top:12px}.appFooter{padding:0 0 8px}.progressBar{padding:0 0 10px;text-align:left;font-size:12px;color:var(--color-text-dim);font-variant-numeric:tabular-nums}.progressBar .practiceFrom{display:block;margin-bottom:2px;color:var(--color-text);font-weight:600}.selector{margin:0;padding:20px;max-width:560px;text-align:left;background:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius-card);box-shadow:var(--shadow-card)}.title{font-size:17px;font-weight:700;letter-spacing:-.01em;margin:0 0 16px}.optRow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.optRow+.optRow{margin-top:20px}.optLabel{flex:none;min-width:56px;font-size:12.5px;font-weight:600;color:var(--color-text-2)}.optRow>.modeToggles{margin-left:auto;display:inline-flex;gap:8px}.modeButtons{display:inline-flex;gap:4px;padding:3px;background:#eef1f6;border-radius:10px}.modeBtn{min-width:72px;padding:7px 18px;border:none;border-radius:8px;background:transparent;color:var(--color-text-2);font-size:13px;font-weight:600;transition:all .12s}.modeBtn:hover:not(.active){color:var(--color-text)}.modeBtn.active{background:var(--color-card);color:var(--color-text);box-shadow:0 1px 2px #0000000f}.customToggle{padding:7px 16px;border-radius:var(--radius-ctl);border:1px solid var(--color-border);background:var(--color-card);color:var(--color-text-2);font-size:13px;font-weight:600;transition:all .12s}.customToggle:hover{border-color:var(--color-border-hover);color:var(--color-text)}.customToggle.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.modeDesc{color:var(--color-text-dim);font-size:12px;line-height:1.7;margin:4px 0 0 68px}.customBlock{margin-top:18px;padding-top:18px;border-top:1px solid var(--color-border)}.optionBlock+.optionBlock{margin-top:16px}.optionHeader{display:flex;align-items:center;gap:12px;margin-bottom:10px}.selectAllBtn{font-size:13px;color:var(--color-text-2);border-bottom:1px solid transparent;transition:color .12s}.selectAllBtn:hover{color:var(--color-accent)}.chips{display:flex;flex-wrap:wrap;gap:7px}.chip{min-width:40px;padding:5px 12px;border-radius:var(--radius-pill);border:1px solid var(--color-border);background:var(--color-card);color:var(--color-text-2);font-size:13px;font-variant-numeric:tabular-nums;transition:all .12s}.chip:hover:not(.active){border-color:var(--color-border-hover);color:var(--color-text)}.chip.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff;font-weight:600}.startBtn{width:100%;margin-top:22px;padding:11px 24px;border-radius:var(--radius-ctl);background:var(--color-primary);color:#fff;font-size:14px;font-weight:600;transition:background .12s}.startBtn:hover:not(:disabled){background:var(--color-primary-hover)}.questionCard{position:relative;text-align:center;padding:24px 16px 16px}.chordName{font-size:48px;font-weight:700;letter-spacing:.01em}.chordName .accidental{font-size:.5em;font-weight:600;vertical-align:.55em;margin-left:.05em}.chordName .suffix{margin-left:.08em}.hint{color:var(--color-text-dim);font-size:13px;margin-top:8px}.keyContext{margin-top:4px;font-size:12.5px;color:var(--color-text-dim);letter-spacing:.02em}.timer{position:absolute;top:20px;right:0;font-size:13px;color:var(--color-text-dim);font-variant-numeric:tabular-nums}.feedbackRow{display:flex;align-items:center;gap:8px;flex:1;min-width:0;font-size:13px;line-height:1}.feedbackRow .mark{font-size:15px;font-weight:700;flex-shrink:0}.feedbackRow.correct .mark{color:var(--color-correct)}.feedbackRow.wrong .mark{color:var(--color-wrong)}.feedbackRow .text{color:var(--color-text);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.note-tag{white-space:nowrap}.note-tag.miss{color:var(--color-correct)}.note-tag.extra{color:var(--color-wrong)}.feedbackRow .meta{color:var(--color-text-dim);font-variant-numeric:tabular-nums;font-size:12px;white-space:nowrap;flex-shrink:0}.continueBtn{padding:7px 14px;border-radius:var(--radius-ctl);background:var(--color-primary);color:#fff;font-size:13px;font-weight:600;flex-shrink:0;transition:background .12s}.continueBtn:hover{background:var(--color-primary-hover)}.continueHint{color:var(--color-text-dim);font-size:12px;white-space:nowrap;flex-shrink:0}.keyboard{margin:0;width:100%;padding:8px 0 12px}.keysArea{position:relative;height:160px;border:1px solid #c4c4c4;border-radius:4px;overflow:hidden;background:#fff}.whiteRow{display:flex;gap:0;height:100%}.key{display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;transition:background .12s;-webkit-tap-highlight-color:transparent;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.key:disabled{opacity:1;cursor:default}.keyLabel{font-size:11px;font-weight:600;pointer-events:none;-webkit-user-select:none;user-select:none}.whiteKey{flex:1;height:100%;background:#fff;color:var(--color-text);border:none;border-right:1px solid #c4c4c4}.whiteKey:last-child{border-right:none}.whiteKey:hover:not(:disabled):not(.on){background:#f3f4f6}.whiteKey.on:hover:not(:disabled){background:#1d4ed8}.blackKey{position:absolute;top:0;height:60%;background:#1f1f1f;color:#fff;border:none;border-radius:0 0 3px 3px;z-index:2}.blackKey:hover:not(:disabled):not(.on){background:#2b2b2b}.blackKey.on:hover:not(:disabled){background:#2d6fe0}.whiteKey.on{background:#2563eb;color:#fff}.blackKey.on{background:#3b82f6}.whiteKey.correct{background:var(--color-correct);color:#fff}.blackKey.correct{background:var(--color-correct-light)}.whiteKey.missing{background:var(--color-correct);color:#fff}.blackKey.missing{background:var(--color-correct-light)}.key.missing{outline:1px dashed rgba(255,255,255,.9);outline-offset:-4px}.blackKey.missing{outline-offset:-3px}.whiteKey.extra{background:#fbeaea;color:var(--color-wrong)}.blackKey.extra{background:#4a2020;color:#eba0a0}.key.extra{outline:1px dashed var(--color-wrong);outline-offset:-4px}.blackKey.extra{outline-offset:-3px}.keyboardBar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0 0}.midiBar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:1;min-width:0}.selectedNotes{font-size:13px;color:var(--color-text-dim);font-variant-numeric:tabular-nums;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.selectedNotes.hasNotes{color:var(--color-text);font-weight:600}.keyboardActions{display:flex;gap:8px;flex-shrink:0}.clearBtn{padding:7px 16px;border-radius:var(--radius-ctl);border:1px solid var(--color-border);background:var(--color-card);color:var(--color-text-2);font-size:13px;font-weight:600;transition:all .12s}.clearBtn:hover:not(:disabled){border-color:var(--color-border-hover);color:var(--color-text)}.confirmBtn{padding:7px 18px;border-radius:var(--radius-ctl);background:var(--color-primary);color:#fff;font-size:13px;font-weight:600;transition:background .12s}.confirmBtn:hover:not(:disabled){background:var(--color-primary-hover)}.reviewDone{display:flex;flex-direction:column;align-items:flex-start;flex:1;padding:32px 0;text-align:left}.reviewDone h2{font-size:17px;font-weight:700;color:var(--color-text);margin-bottom:8px}.reviewDoneText{color:var(--color-text-2);font-size:13.5px;margin-bottom:20px}.reviewDoneText strong{color:var(--color-text)}.reviewDone .actions{width:100%;max-width:320px}.setComplete{display:flex;flex:1;padding:8px 0 32px}.setComplete .card{text-align:left;width:100%;max-width:420px;padding:20px;background:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius-card);box-shadow:var(--shadow-card)}.setComplete .title{color:var(--color-text-2);font-size:13px;font-weight:600;margin-bottom:10px}.grade{font-size:34px;font-weight:700;margin-bottom:24px;letter-spacing:-.02em}.great,.good{color:var(--color-correct)}.ok{color:var(--color-text)}.poor{color:var(--color-wrong)}.stats{display:flex;gap:28px;margin-bottom:24px}.statItem{display:flex;flex-direction:column;align-items:flex-start;gap:2px}.statValue{font-size:27px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--color-text);line-height:1.2}.statUnit{font-size:15px;font-weight:400;color:var(--color-text-dim)}.statLabel{font-size:12px;color:var(--color-text-dim)}.actions{display:flex;flex-direction:column;gap:8px}.nextBtn{padding:10px 0;border-radius:var(--radius-ctl);background:var(--color-primary);color:#fff;font-size:14px;font-weight:600;transition:background .12s}.nextBtn:hover{background:var(--color-primary-hover)}.homeBtn{padding:9px 0;border-radius:var(--radius-ctl);background:var(--color-card);color:var(--color-text-2);font-size:13px;font-weight:600;border:1px solid var(--color-border);transition:all .12s}.homeBtn:hover{border-color:var(--color-border-hover);color:var(--color-text)}.reviewBtn{padding:10px 0;border-radius:var(--radius-ctl);border:1px solid var(--color-border);background:var(--color-card);color:var(--color-text);font-size:14px;font-weight:600;transition:all .12s}.reviewBtn:hover{border-color:var(--color-accent);color:var(--color-accent)}.statsPanel{margin:0;max-width:560px}.empty{color:var(--color-text-dim);padding:12px 0;font-size:13px}.toggleBtn{width:100%;padding:9px 12px;background:var(--color-card);color:var(--color-text-2);border:1px solid var(--color-border);border-radius:var(--radius-ctl);font-size:13px;font-weight:600;text-align:center;transition:all .12s}.toggleBtn:hover{border-color:var(--color-border-hover);color:var(--color-text)}.content{margin-top:10px;border:1px solid var(--color-border);border-radius:var(--radius-card);padding:20px;background:var(--color-card);box-shadow:var(--shadow-card);animation:fadeInContent .15s ease}@keyframes fadeInContent{0%{opacity:0}to{opacity:1}}.overview{display:flex;gap:28px;margin-bottom:20px}.weakness{border-top:1px solid var(--color-border);padding-top:14px;margin-bottom:14px}.weaknessTitle{font-size:12.5px;color:var(--color-text-2);margin:0 0 6px;font-weight:600}.weakness p{font-size:13.5px;color:var(--color-text);line-height:1.7;margin:0}.resetBtn{padding:7px 16px;border-radius:var(--radius-ctl);color:var(--color-wrong);border:1px solid var(--color-border);background:var(--color-card);font-size:13px;transition:all .12s}.resetBtn:hover{border-color:var(--color-wrong)}@media (max-width: 900px){.app{min-height:calc(100vh - 130px)}.appTitle{display:none}.appHeader{justify-content:flex-end}}@media (max-width: 640px){.chordName{font-size:38px}.keysArea{height:128px}.selector{padding:16px}.optRow .modeButtons{flex:1 1 100%}.optRow .modeBtn{flex:1;min-width:0}.optRow .modeToggles{flex:1 1 100%}.optRow .modeToggles .customToggle{flex:1}.modeDesc{margin-left:0}.stats,.overview{gap:18px}.setComplete .card{max-width:none}}