:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;--bg-color: #ffffff;--text-main: #2c3e50;--text-sub: #6c757d;--text-dim: #666666;--bg-panel: #f8f9fa;--bg-card: #ffffff;--border-color: #dee2e6;--primary-color: #42b883;--primary-text: #ffffff;--secondary-bg: #6c757d;--secondary-text: #ffffff;--hover-bg: #f0fdf4;--hover-border: #42b883;--key-white-bg: #ffffff;--key-white-text: #000000;--key-black-bg: #333333;--key-black-text: #ffffff;--replay-btn-bg: #ffffff;--replay-btn-hover: #eeeeee;--replay-btn-border: #cccccc;--shadow-color: rgba(0,0,0,.1);--btn-default-bg: #1a1a1a;--btn-default-text: #ffffff;color:var(--text-main);background-color:var(--bg-color);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}#app{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:var(--btn-default-bg);color:var(--btn-default-text);cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: dark){:root{--bg-color: #242424;--text-main: rgba(255, 255, 255, .87);--text-sub: rgba(255, 255, 255, .6);--text-dim: rgba(255, 255, 255, .5);--bg-panel: #2f2f2f;--bg-card: #3a3a3a;--border-color: #444444;--primary-color: #42b883;--primary-text: #ffffff;--secondary-bg: #4a4a4a;--secondary-text: #ffffff;--hover-bg: #2f3e35;--hover-border: #42b883;--key-white-bg: #e0e0e0;--key-white-text: #000000;--key-black-bg: #111111;--key-black-text: #eeeeee;--replay-btn-bg: #3a3a3a;--replay-btn-hover: #4a4a4a;--replay-btn-border: #555555;--shadow-color: rgba(0,0,0,.5);--btn-default-bg: #1a1a1a;--btn-default-text: #ffffff}}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff;--btn-default-bg: #f9f9f9;--btn-default-text: #213547}}.game-container[data-v-25bad064]{max-width:800px;margin:0 auto;padding:20px;text-align:center;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;color:var(--text-main)}.menu[data-v-25bad064]{margin-top:40px}.level-buttons[data-v-25bad064]{display:flex;flex-direction:column;align-items:center;gap:20px;justify-content:center;margin-top:30px}.level-btn[data-v-25bad064]{padding:20px;width:100%;max-width:300px;display:flex;flex-direction:column;align-items:center;background-color:var(--bg-panel);border:2px solid var(--border-color);border-radius:8px;cursor:pointer;transition:all .2s;color:var(--text-main)}.level-btn[data-v-25bad064]:hover{border-color:var(--hover-border);background-color:var(--hover-bg);transform:translateY(-2px)}.level-btn strong[data-v-25bad064]{font-size:1.5rem;margin-bottom:8px;color:var(--text-main)}.level-btn span[data-v-25bad064]{font-size:.9rem;color:var(--text-sub)}.primary-btn[data-v-25bad064],.secondary-btn[data-v-25bad064]{padding:10px 25px;font-size:1.1rem;border-radius:5px;cursor:pointer;border:none;margin:0 10px}.primary-btn[data-v-25bad064]{background-color:var(--primary-color);color:var(--primary-text)}.secondary-btn[data-v-25bad064]{background-color:var(--secondary-bg);color:var(--secondary-text)}.intro[data-v-25bad064]{margin-top:50px}.game-over[data-v-25bad064]{margin:20px 0}.sub-text[data-v-25bad064]{color:var(--text-sub);font-size:.9rem}.final-score[data-v-25bad064]{font-size:2rem;font-weight:700;color:var(--primary-color);margin:20px 0}.action-buttons[data-v-25bad064],.play-area[data-v-25bad064]{margin-top:20px}.header[data-v-25bad064]{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;border-bottom:1px solid var(--border-color);padding-bottom:15px}.back-link[data-v-25bad064]{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:1rem}.stats[data-v-25bad064]{display:flex;gap:20px;font-weight:700;color:var(--text-main)}.status-box[data-v-25bad064]{background:var(--bg-panel);border-radius:8px;padding:20px;margin-bottom:30px;display:flex;flex-direction:column;align-items:center;gap:15px}.status-text[data-v-25bad064]{font-size:1.4rem;font-weight:600;min-height:1.6em;margin:0;color:var(--text-main)}.replay-btn[data-v-25bad064]{background:var(--replay-btn-bg);border:1px solid var(--replay-btn-border);padding:8px 16px;border-radius:20px;cursor:pointer;font-size:.9rem;color:var(--text-main)}.replay-btn[data-v-25bad064]:hover:not(:disabled){background:var(--replay-btn-hover)}.options-container[data-v-25bad064]{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:700px;margin:0 auto}.note-btn[data-v-25bad064]{width:70px;height:100px;border:1px solid var(--border-color);border-radius:0 0 5px 5px;background:var(--key-white-bg);color:var(--key-white-text);cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:10px;font-weight:700;box-shadow:0 2px 5px var(--shadow-color);transition:all .1s;position:relative;-webkit-user-select:none;user-select:none}.note-btn.black[data-v-25bad064]{background:var(--key-black-bg);color:var(--key-black-text);height:65px;border:none}.note-btn[data-v-25bad064]:hover:not(:disabled){transform:translateY(2px)}.note-btn[data-v-25bad064]:active:not(:disabled){transform:translateY(4px)}.note-btn.correct[data-v-25bad064]{background-color:#4ed07d!important;color:#fff!important;border-color:#4ed07d}.note-btn.wrong[data-v-25bad064]{background-color:#ff6b6b!important;color:#fff!important;border-color:#ff6b6b}.note-btn.dimmed[data-v-25bad064]{opacity:.5}.note-val[data-v-25bad064]{font-size:.8rem;margin-top:5px;opacity:.7}.chromatic-mode[data-v-25bad064]{gap:8px}.chromatic-mode .note-btn[data-v-25bad064]{font-size:.9rem;width:60px}