*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{color:#ddd;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#12121a;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}#app{width:100%}::-webkit-scrollbar{height:6px}::-webkit-scrollbar-track{background:#1a1a2e;border-radius:3px}::-webkit-scrollbar-thumb{background:#444;border-radius:3px}.app-header[data-v-b9f59c06]{border-bottom:1px solid #333;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;padding:12px 0;display:flex}.title[data-v-b9f59c06]{color:#fff;cursor:pointer;-webkit-user-select:none;user-select:none;margin:0;font-size:20px;font-weight:700}.mode-switch[data-v-b9f59c06]{background:#1e1e2e;border-radius:8px;padding:3px;display:flex}.mode-btn[data-v-b9f59c06]{color:#888;cursor:pointer;background:0 0;border:none;border-radius:6px;padding:8px 14px;font-size:14px;font-weight:600;text-decoration:none;transition:all .2s}.mode-btn.router-link-active[data-v-b9f59c06]{color:#fff;background:#c084f5}.mode-btn[data-v-b9f59c06]:hover:not(.router-link-active){color:#ccc}.app[data-v-4febc90c]{max-width:1000px;min-height:100vh;margin:0 auto;padding:0 16px 40px}.piano-keyboard[data-v-92187ff1]{-webkit-user-select:none;user-select:none;padding:10px 0;overflow-x:auto}.keys-container[data-v-92187ff1]{background:#1a1a2e;border-radius:8px;min-width:420px;height:180px;display:flex;position:relative}.piano-key[data-v-92187ff1]{cursor:pointer;border-radius:0 0 4px 4px;transition:background-color .1s}.piano-key.disabled[data-v-92187ff1]{cursor:not-allowed;opacity:.6}.white[data-v-92187ff1]{width:calc(100% / var(--white-count));z-index:1;background:linear-gradient(#f8f8f8,#e0e0e0);border:1px solid #aaa;border-top:none;border-left:none;height:100%;position:relative}.white[data-v-92187ff1]:first-child{border-left:1px solid #aaa}.white[data-v-92187ff1]:hover:not(.disabled){background:linear-gradient(#e4c8ff,#e0b4ff)}.white.highlighted[data-v-92187ff1]{background:linear-gradient(#d0b0f5,#c090e5)}.white.selected[data-v-92187ff1]{background:linear-gradient(#d0b0f0,#d4a8ff)}.white.correct[data-v-92187ff1]{background:linear-gradient(#80e080,#50c050)}.white.incorrect[data-v-92187ff1]{background:linear-gradient(#ff8080,#ff5050)}.white.missed[data-v-92187ff1]{background:linear-gradient(#ffd060,#ffb020)}.black[data-v-92187ff1]{width:calc(100% / var(--white-count) * .6);height:62%;left:calc(var(--n) * 1% / var(--white-count));z-index:2;background:linear-gradient(#333,#111);border:2px solid #000;border-top:none;border-radius:0 0 4px 4px;position:absolute;top:0}.black[data-v-92187ff1]:hover:not(.disabled){background:linear-gradient(#a578e0,#7d55b0)}.black.highlighted[data-v-92187ff1]{background:linear-gradient(#7b55bb,#5b3388)}.black.selected[data-v-92187ff1]{background:linear-gradient(#8b66cc,#6b4499)}.black.correct[data-v-92187ff1]{background:linear-gradient(#2d8a2d,#1a661a)}.black.incorrect[data-v-92187ff1]{background:linear-gradient(#a33,#811)}.black.missed[data-v-92187ff1]{background:linear-gradient(#c90,#a70)}.key-label[data-v-92187ff1]{color:#888;pointer-events:none;font-size:11px;position:absolute;bottom:6px;left:50%;transform:translate(-50%)}.challenge-mode[data-v-5c4359b1]{max-width:900px;margin:0 auto}.start-screen[data-v-5c4359b1]{text-align:center;padding:40px 20px}.start-screen h2[data-v-5c4359b1]{color:#fff;margin-bottom:8px;font-size:28px}.start-desc[data-v-5c4359b1]{color:#888;margin-bottom:32px;font-size:14px}.start-btn[data-v-5c4359b1]{color:#fff;cursor:pointer;background:linear-gradient(135deg,#c084f5,#7b3fb0);border:none;border-radius:12px;padding:14px 48px;font-size:18px;font-weight:700;transition:all .2s}.start-btn[data-v-5c4359b1]:hover{transform:scale(1.05);box-shadow:0 4px 20px #c084f566}.game-area[data-v-5c4359b1]{flex-direction:column;gap:8px;display:flex}.loading-banner[data-v-5c4359b1]{text-align:center;color:#fc0;padding:10px;font-size:14px;font-weight:600}.status-bar[data-v-5c4359b1]{flex-wrap:wrap;gap:12px;padding:8px 0;display:flex}.status-item[data-v-5c4359b1]{background:#1e1e2e;border-radius:8px;flex-direction:column;align-items:center;min-width:70px;padding:8px 14px;display:flex}.status-label[data-v-5c4359b1]{color:#888;font-size:11px}.status-value[data-v-5c4359b1]{color:#ddd;font-size:20px;font-weight:700}.status-value.correct[data-v-5c4359b1]{color:#4caf50}.status-value.wrong[data-v-5c4359b1]{color:#ff4c4c}.play-row[data-v-5c4359b1]{align-items:center;gap:16px;padding:8px 0;display:flex}.reset-btn[data-v-5c4359b1]{color:#888;cursor:pointer;background:0 0;border:2px solid #666;border-radius:6px;padding:6px 16px;font-size:13px;font-weight:600;transition:all .15s}.reset-btn[data-v-5c4359b1]:hover{color:#ccc;border-color:#999}.play-btn[data-v-5c4359b1]{color:#fff;cursor:pointer;background:linear-gradient(135deg,#c084f5,#7b3fb0);border:none;border-radius:10px;margin-left:auto;padding:12px 32px;font-size:16px;font-weight:700;transition:all .2s}.play-btn[data-v-5c4359b1]:hover{transform:scale(1.05);box-shadow:0 4px 16px #c084f566}.feedback[data-v-5c4359b1]{font-size:20px;font-weight:700}.feedback.correct[data-v-5c4359b1]{color:#4cff4c}.feedback.incorrect[data-v-5c4359b1]{color:#ff4c4c}.submit-row[data-v-5c4359b1]{justify-content:center;padding:12px 0;display:flex}.submit-btn[data-v-5c4359b1]{color:#fff;cursor:pointer;background:linear-gradient(135deg,#4caf50,#2e7d32);border:none;border-radius:10px;padding:12px 40px;font-size:16px;font-weight:700;transition:all .2s}.submit-btn[data-v-5c4359b1]:hover:not(:disabled){transform:scale(1.05);box-shadow:0 4px 16px #4caf5066}.submit-btn[data-v-5c4359b1]:disabled{opacity:.4;cursor:not-allowed}.next-btn[data-v-5c4359b1]{background:linear-gradient(135deg,#c084f5,#7b3fb0)}.next-btn[data-v-5c4359b1]:hover{transform:scale(1.05);box-shadow:0 4px 16px #c084f566}.game-over[data-v-5c4359b1]{text-align:center;padding:40px 20px}.rating[data-v-5c4359b1]{margin-bottom:20px}.rating-emoji[data-v-5c4359b1]{margin-bottom:4px;font-size:36px}.rating-title[data-v-5c4359b1]{color:#c084f5;margin-bottom:6px;font-size:24px;font-weight:700}.rating-desc[data-v-5c4359b1]{color:#888;margin:0;font-size:13px}.final-stats[data-v-5c4359b1]{flex-wrap:wrap;justify-content:center;gap:16px;margin-bottom:24px;display:flex}.final-stat[data-v-5c4359b1]{background:#1e1e2e;border-radius:10px;flex-direction:column;align-items:center;padding:12px 24px;display:flex}.final-label[data-v-5c4359b1]{color:#888;font-size:12px}.final-value[data-v-5c4359b1]{color:#ddd;margin-top:4px;font-size:24px;font-weight:700}.roadmap[data-v-5c4359b1]{justify-content:center;gap:0;margin:0 auto 16px;display:flex}.roadmap-step[data-v-5c4359b1]{flex-direction:column;flex:1;align-items:center;gap:6px;max-width:80px;display:flex;position:relative}.rm-dot[data-v-5c4359b1]{z-index:2;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;font-size:13px;display:flex;position:relative}.rm-line[data-v-5c4359b1]{z-index:0;background:#444;width:100%;height:2px;position:absolute;top:13px;left:50%}.rm-line.done[data-v-5c4359b1]{background:#4caf50}.roadmap-step.done .rm-dot[data-v-5c4359b1]{color:#fff;background:#4caf50}.roadmap-step.current .rm-dot[data-v-5c4359b1]{color:#fff;background:#c084f5}.roadmap-step.locked .rm-dot[data-v-5c4359b1]{color:#666;background:#333}.rm-info[data-v-5c4359b1]{text-align:center;flex-direction:column;align-items:center;display:flex}.rm-name[data-v-5c4359b1]{color:#ddd;font-size:12px;font-weight:600}.roadmap-step.locked .rm-name[data-v-5c4359b1]{color:#555}.rm-sub[data-v-5c4359b1]{color:#888;font-size:10px}.roadmap-step.locked .rm-sub[data-v-5c4359b1]{color:#444}.rm-check[data-v-5c4359b1]{font-size:14px;font-weight:700}.rm-lock[data-v-5c4359b1]{font-size:11px}.game-over-actions[data-v-5c4359b1]{flex-wrap:wrap;justify-content:center;gap:12px;padding-top:8px;display:flex}.btn[data-v-5c4359b1]{cursor:pointer;white-space:nowrap;border:none;border-radius:8px;padding:12px 28px;font-size:16px;font-weight:600;transition:all .2s}.btn-primary[data-v-5c4359b1]{color:#fff;background:#c084f5}.btn-primary[data-v-5c4359b1]:hover{background:#3a8eef}.btn-secondary[data-v-5c4359b1]{color:#ccc;background:#444}.btn-secondary[data-v-5c4359b1]:hover{background:#555}.btn-share[data-v-5c4359b1]{color:#fff;background:#4caf50}.btn-share[data-v-5c4359b1]:hover{background:#388e3c}.btn-share[data-v-5c4359b1]:disabled{opacity:.5;cursor:not-allowed}.stats-panel[data-v-5c4359b1]{text-align:center;background:#16162a;border-radius:12px;padding:28px 36px;display:inline-block}.difficulty-selector[data-v-ddd30c01]{margin:12px 0}.diff-label[data-v-ddd30c01]{color:#ccc;margin-bottom:8px;font-size:14px;font-weight:600;display:block}.diff-buttons[data-v-ddd30c01]{flex-wrap:wrap;gap:6px;display:flex}.diff-btn[data-v-ddd30c01]{color:#aaa;cursor:pointer;background:#1e1e2e;border:2px solid #444;border-radius:8px;flex-direction:column;align-items:center;padding:8px 14px;font-size:13px;transition:all .2s;display:flex}.diff-btn[data-v-ddd30c01]:hover{color:#ddd;border-color:#d4a8ff}.diff-btn.active[data-v-ddd30c01]{color:#fff;background:#2e1a4a;border-color:#c084f5}.diff-name[data-v-ddd30c01]{font-size:14px;font-weight:700}.diff-desc[data-v-ddd30c01]{opacity:.7;margin-top:2px;font-size:11px}.question-panel[data-v-237c4590]{flex-wrap:wrap;align-items:center;gap:20px;padding:12px 0;display:flex}.question-info[data-v-237c4590]{flex-direction:column;gap:2px;display:flex}.round-indicator[data-v-237c4590]{color:#ddd;font-size:16px;font-weight:600}.play-btn[data-v-237c4590]{color:#fff;cursor:pointer;background:linear-gradient(135deg,#c084f5,#7b3fb0);border:none;border-radius:10px;margin-left:auto;padding:12px 32px;font-size:16px;font-weight:700;transition:all .2s}.feedback[data-v-237c4590]{font-size:18px;font-weight:700}.feedback-correct[data-v-237c4590]{color:#4cff4c}.feedback-incorrect[data-v-237c4590]{color:#ff4c4c}.play-btn[data-v-237c4590]:hover{transform:scale(1.05);box-shadow:0 4px 16px #c084f566}.score-board[data-v-ad5fa257]{gap:24px;padding:8px 0;display:flex}.score-item[data-v-ad5fa257]{background:#1e1e2e;border-radius:8px;flex-direction:column;align-items:center;padding:8px 20px;display:flex}.score-label[data-v-ad5fa257]{color:#888;font-size:12px}.score-value[data-v-ad5fa257]{color:#c084f5;font-size:24px;font-weight:700}.switch[data-v-6b1ef8fb]{cursor:pointer;background:#2a2a3e;border:2px solid #555;border-radius:11px;outline:none;flex-shrink:0;width:36px;height:22px;padding:0;transition:all .2s;position:relative}.switch[data-v-6b1ef8fb]:hover:not(.disabled){border-color:#777}.switch.active[data-v-6b1ef8fb]{background:#c084f5;border-color:#c084f5}.switch.disabled[data-v-6b1ef8fb]{opacity:.35;cursor:not-allowed}.switch-thumb[data-v-6b1ef8fb]{background:#aaa;border-radius:50%;width:14px;height:14px;transition:all .2s;position:absolute;top:2px;left:2px}.switch.active .switch-thumb[data-v-6b1ef8fb]{background:#fff;left:16px}.test-mode[data-v-91fc964a]{max-width:900px;margin:0 auto}.loading-banner[data-v-91fc964a]{text-align:center;color:#fc0;padding:10px;font-size:14px;font-weight:600}.start-section[data-v-91fc964a]{flex-direction:column;gap:16px;margin-top:24px;display:flex}.rounds-input[data-v-91fc964a]{margin:0}.rounds-label[data-v-91fc964a]{color:#ccc;margin-bottom:8px;font-size:14px;font-weight:600;display:block}.rounds-buttons[data-v-91fc964a]{flex-wrap:wrap;gap:6px;display:flex}.rounds-btn[data-v-91fc964a]{color:#aaa;cursor:pointer;background:#1e1e2e;border:2px solid #444;border-radius:8px;flex-direction:column;align-items:center;padding:8px 14px;font-size:14px;font-weight:700;transition:all .2s;display:flex}.rounds-btn[data-v-91fc964a]:hover{color:#ddd;border-color:#d4a8ff}.rounds-btn.active[data-v-91fc964a]{color:#fff;background:#2e1a4a;border-color:#c084f5}.inversion-toggle[data-v-91fc964a]{color:#aaa;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:10px;font-size:14px;display:flex}.inversion-toggle.disabled[data-v-91fc964a]{color:#555;cursor:not-allowed}.start-btn[data-v-91fc964a]{color:#fff;cursor:pointer;background:linear-gradient(135deg,#c084f5,#7b3fb0);border:none;border-radius:12px;align-self:center;padding:14px 48px;font-size:18px;font-weight:700;transition:all .2s}.start-btn[data-v-91fc964a]:hover{transform:scale(1.05);box-shadow:0 4px 20px #c084f566}.top-bar[data-v-91fc964a]{align-items:center;gap:16px;display:flex}.reset-btn[data-v-91fc964a]{color:#888;cursor:pointer;background:0 0;border:2px solid #666;border-radius:6px;padding:6px 16px;font-size:13px;font-weight:600;transition:all .15s}.reset-btn[data-v-91fc964a]:hover{color:#ccc;border-color:#999}.game-area[data-v-91fc964a]{flex-direction:column;gap:8px;display:flex}.submit-row[data-v-91fc964a]{justify-content:center;padding:12px 0;display:flex}.submit-btn[data-v-91fc964a]{color:#fff;cursor:pointer;background:linear-gradient(135deg,#4caf50,#2e7d32);border:none;border-radius:10px;padding:12px 40px;font-size:16px;font-weight:700;transition:all .2s}.submit-btn[data-v-91fc964a]:hover:not(:disabled){transform:scale(1.05);box-shadow:0 4px 16px #4caf5066}.submit-btn[data-v-91fc964a]:disabled{opacity:.4;cursor:not-allowed}.next-btn[data-v-91fc964a]{background:linear-gradient(135deg,#c084f5,#7b3fb0)}.next-btn[data-v-91fc964a]:hover{transform:scale(1.05);box-shadow:0 4px 16px #c084f566}.game-over[data-v-91fc964a]{text-align:center;padding:40px 20px}.game-over h2[data-v-91fc964a]{color:#fff;margin-bottom:24px;font-size:28px}.final-score[data-v-91fc964a]{justify-content:center;gap:32px;margin-bottom:32px;display:flex}.final-stat[data-v-91fc964a]{background:#1e1e2e;border-radius:12px;flex-direction:column;align-items:center;padding:16px 32px;display:flex}.final-label[data-v-91fc964a]{color:#888;font-size:14px}.final-value[data-v-91fc964a]{color:#c084f5;margin-top:4px;font-size:32px;font-weight:700}.game-over-actions[data-v-91fc964a]{justify-content:center;gap:12px;display:flex}.btn[data-v-91fc964a]{cursor:pointer;border:none;border-radius:8px;padding:12px 28px;font-size:16px;font-weight:600;transition:all .2s}.btn-primary[data-v-91fc964a]{color:#fff;background:#c084f5}.btn-primary[data-v-91fc964a]:hover{background:#8b5fcf}.btn-secondary[data-v-91fc964a]{color:#ccc;background:#444}.btn-secondary[data-v-91fc964a]:hover{background:#555}.control-group[data-v-1269934b]{flex-direction:column;gap:4px;display:flex}.control-group label[data-v-1269934b]{color:#888;text-transform:uppercase;letter-spacing:.5px;font-size:11px;font-weight:600}.toggle-group[data-v-1269934b]{flex-wrap:wrap;gap:3px;display:flex}.toggle-btn[data-v-1269934b]{color:#888;cursor:pointer;white-space:nowrap;background:#1e1e2e;border:2px solid #444;border-radius:5px;padding:4px 10px;font-size:12px;font-weight:600;transition:all .15s}.toggle-btn[data-v-1269934b]:hover{color:#ccc;background:#2a2a3e;border-color:#666}.toggle-btn.active[data-v-1269934b]{color:#c084f5;background:#2e1a4e;border-color:#c084f5;box-shadow:0 0 8px #c084f54d}.control-group[data-v-438796c3]{flex-direction:column;gap:4px;display:flex}.control-group label[data-v-438796c3]{color:#888;text-transform:uppercase;letter-spacing:.5px;font-size:11px;font-weight:600}.toggle-group[data-v-438796c3]{flex-wrap:wrap;gap:3px;display:flex}.toggle-btn[data-v-438796c3]{color:#888;cursor:pointer;white-space:nowrap;background:#1e1e2e;border:2px solid #444;border-radius:5px;padding:4px 10px;font-size:12px;font-weight:600;transition:all .15s}.toggle-btn[data-v-438796c3]:hover{color:#ccc;background:#2a2a3e;border-color:#666}.toggle-btn.active[data-v-438796c3]{color:#ff9800;background:#2e1a0a;border-color:#ff9800;box-shadow:0 0 8px #ff98004d}.inv-btn[data-v-438796c3]{font-size:12px}.practice-mode[data-v-b86d0544]{max-width:900px;margin:0 auto}.loading-banner[data-v-b86d0544]{text-align:center;color:#fc0;padding:10px;font-size:14px;font-weight:600}.mode-tabs[data-v-b86d0544]{gap:4px;padding:12px 0 0;display:flex}.mode-tab[data-v-b86d0544]{color:#888;cursor:pointer;background:#1a1a2e;border:2px solid #444;border-bottom:none;border-radius:8px 8px 0 0;padding:8px 20px;font-size:14px;font-weight:600;transition:all .15s}.mode-tab[data-v-b86d0544]:hover{color:#ccc;border-color:#666}.mode-tab.active[data-v-b86d0544]{color:#c084f5;background:#2e1a4e;border-color:#c084f5}.controls[data-v-b86d0544]{background:#16162a;border:2px solid #c084f5;border-radius:0 8px 8px;flex-direction:column;gap:8px;padding:12px 12px 16px;display:flex}.control-group[data-v-b86d0544]{flex-direction:column;gap:4px;display:flex}.control-group label[data-v-b86d0544]{color:#888;text-transform:uppercase;letter-spacing:.5px;font-size:11px;font-weight:600}.toggle-group[data-v-b86d0544]{flex-wrap:wrap;gap:3px;display:flex}.toggle-btn[data-v-b86d0544]{color:#888;cursor:pointer;white-space:nowrap;background:#1e1e2e;border:2px solid #444;border-radius:5px;padding:4px 10px;font-size:12px;font-weight:600;transition:all .15s}.toggle-btn[data-v-b86d0544]:hover{color:#ccc;background:#2a2a3e;border-color:#666}.toggle-btn.active[data-v-b86d0544]{color:#c084f5;background:#2e1a4e;border-color:#c084f5;box-shadow:0 0 8px #c084f54d}.root-btn[data-v-b86d0544],.key-btn[data-v-b86d0544]{text-align:center;min-width:32px;padding:4px 7px}.key-btn[data-v-b86d0544]{min-width:40px}.mode-btn[data-v-b86d0544]{padding:4px 14px}.degree-btn[data-v-b86d0544]{text-align:center;min-width:36px;padding:4px 12px;font-weight:700}.play-btn[data-v-b86d0544]{color:#fff;cursor:pointer;background:linear-gradient(135deg,#c084f5,#7b3fb0);border:none;border-radius:8px;align-self:flex-end;padding:10px 28px;font-size:15px;font-weight:700;transition:all .2s}.play-btn[data-v-b86d0544]:hover{transform:scale(1.05);box-shadow:0 4px 16px #c084f566}.note-display[data-v-b86d0544]{text-align:center;background:#1e1e2e;border-radius:8px;margin-top:12px;padding:10px 12px}.nd-line[data-v-b86d0544]{line-height:1.6}.nd-zh[data-v-b86d0544]{color:#ccc;font-size:15px}.nd-en[data-v-b86d0544]{color:#777;font-size:13px}