:root{--bg-primary: #ffffff;--bg-secondary: #f5f7fa;--bg-card: #ffffff;--text-primary: #1a1a2e;--text-secondary: #555;--text-muted: #888;--border-color: #ddd;--staff-color: #333;--note-color: #333;--accent: #4361ee;--accent-hover: #3a56d4;--success: #00c853;--success-hover: #00b248;--key-white: #ffffff;--key-white-hover: #f0f0f0;--key-black: #222;--key-black-hover: #444;--key-border: #333;--shadow: 0 2px 8px rgba(0, 0, 0, .08);font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--text-primary);background-color:var(--bg-primary)}:root[data-theme=dark]{--bg-primary: #1a1a2e;--bg-secondary: #16213e;--bg-card: #0f3460;--text-primary: #e8e8e8;--text-secondary: #b0b0b0;--text-muted: #777;--border-color: #3a3a5c;--staff-color: #d0d0d0;--note-color: #e0e0e0;--accent: #6c83f7;--accent-hover: #5a70e0;--success: #2ecc71;--success-hover: #27ae60;--key-white: #e8e8e8;--key-white-hover: #d4d4d4;--key-black: #2c2c2c;--key-black-hover: #3c3c3c;--key-border: #555;--shadow: 0 2px 8px rgba(0, 0, 0, .3);color:var(--text-primary);background-color:var(--bg-primary)}*,*:before,*:after{box-sizing:border-box}html,body{overflow:hidden;height:100%}body{margin:0;min-width:320px;height:100dvh;display:flex;justify-content:center;background-color:var(--bg-primary);color:var(--text-primary);transition:background-color .3s,color .3s;padding-top:env(safe-area-inset-top);padding-bottom:max(env(safe-area-inset-bottom),16px);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}#root{width:100%;height:100%;overflow:hidden}h1,h2,h3{margin:0}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;cursor:pointer;transition:background-color .2s,border-color .2s}button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}._staffContainer_1os82_1{display:flex;flex-direction:column;align-items:center;padding:.5rem 1rem;width:100%;color:var(--staff-color);position:relative}._staffSvg_1os82_11{width:100%;max-width:600px;height:auto}._staffLine_1os82_17{stroke:var(--staff-color);stroke-width:2}._ledgerLine_1os82_22{stroke:var(--staff-color);stroke-width:1.8}._clefSymbol_1os82_27{font-size:72px;-webkit-user-select:none;user-select:none;fill:var(--staff-color)}._notehead_1os82_33{stroke-width:1.5}._noteheadFilled_1os82_37{fill:var(--note-color);stroke:var(--note-color)}._noteheadOpen_1os82_42{fill:none;stroke:var(--note-color);stroke-width:2.5}._stem_1os82_48{stroke:var(--note-color);stroke-width:2}._flag_1os82_53{fill:var(--note-color);stroke:none}._accidentalText_1os82_58{font-size:22px;font-weight:700;-webkit-user-select:none;user-select:none;fill:var(--note-color)}._keySignatureText_1os82_65{font-size:20px;font-weight:700;-webkit-user-select:none;user-select:none;fill:var(--staff-color)}._feedbackCorrect_1os82_73{fill:#00c853;stroke:#00c853}._feedbackIncorrect_1os82_78{fill:#ff1744;stroke:#ff1744}._feedbackMissed_1os82_83{fill:#ff9100;stroke:#ff9100}._feedbackTextLabel_1os82_89{width:100%;display:flex;align-items:center;justify-content:center;gap:3rem;padding:.5rem 1rem;pointer-events:none;flex:1}._feedbackColumn_1os82_100{display:flex;flex-direction:column;align-items:center;gap:.25rem}._feedbackHeader_1os82_107{font-size:clamp(.8rem,1.5vw,1rem);font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}._feedbackNote_1os82_115{font-size:clamp(2rem,5vw,3.5rem);font-weight:700;color:var(--text-primary)}._feedbackNoteCorrect_1os82_121{color:#00c853}._feedbackNoteIncorrect_1os82_125{color:#ff1744}._feedbackNoteMissed_1os82_129{color:#ff9100}._keyboardContainer_40dv1_1{display:flex;flex-direction:column;align-items:center;padding:0;-webkit-user-select:none;user-select:none;width:100%}._keyboard_40dv1_1{position:relative;display:flex;height:160px}._whiteKey_40dv1_16{position:relative;background:var(--key-white);border:1px solid var(--key-border);border-radius:0 0 4px 4px;cursor:pointer;z-index:1;transition:background-color .05s ease;padding:0}._whiteKey_40dv1_16:hover{background:var(--key-white-hover)}._whiteKey_40dv1_16:active{background:#d0d0d0}._blackKey_40dv1_35{position:absolute;background:var(--key-black);border:1px solid #000;border-radius:0 0 3px 3px;cursor:pointer;z-index:2;transition:background-color .05s ease;padding:0}._blackKey_40dv1_35:hover{background:var(--key-black-hover)}._blackKey_40dv1_35:active{background:#555}._pressed_40dv1_55{background:#b3e0ff!important}._blackKey_40dv1_35._pressed_40dv1_55{background:#69c!important}._highlightGreen_40dv1_64{background:#00c853!important}._blackKey_40dv1_35._highlightGreen_40dv1_64{background:#00a844!important}._highlightRed_40dv1_73{background:#ff1744!important}._blackKey_40dv1_35._highlightRed_40dv1_73{background:#d50032!important}._disabled_40dv1_82{opacity:.6;cursor:not-allowed}._disabled_40dv1_82 ._whiteKey_40dv1_16,._disabled_40dv1_82 ._blackKey_40dv1_35{cursor:not-allowed}._disabled_40dv1_82 ._whiteKey_40dv1_16:hover{background:var(--key-white)}._disabled_40dv1_82 ._blackKey_40dv1_35:hover{background:var(--key-black)}._keyLabel_40dv1_101{position:absolute;bottom:8px;left:50%;transform:translate(-50%);font-size:10px;color:var(--text-muted);pointer-events:none}._blackKey_40dv1_35 ._keyLabel_40dv1_101{color:#ccc}._srOnly_40dv1_116{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}._timerContainer_1uovg_1{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 16px;min-width:80px}._timerLabel_1uovg_10{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}._timerValue_1uovg_17{font-size:2rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-primary);line-height:1}._timerValue_1uovg_17._warning_1uovg_25{color:#e65100}._timerValue_1uovg_17._critical_1uovg_29{color:#d32f2f}._progressBar_1uovg_33{width:100%;height:4px;background-color:var(--border-color);border-radius:2px;overflow:hidden}._progressFill_1uovg_41{height:100%;background-color:#4caf50;border-radius:2px;transition:width .1s linear}._progressFill_1uovg_41._warning_1uovg_25{background-color:#ff9800}._progressFill_1uovg_41._critical_1uovg_29{background-color:#f44336}._scoreContainer_i20d9_1{display:flex;flex-direction:column;align-items:center;position:relative;padding:.5rem 1rem}._totalScore_i20d9_9{font-size:2rem;font-weight:700;color:var(--text-primary);line-height:1.2}._scoreLabel_i20d9_16{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}._challengePopup_i20d9_23{position:absolute;right:100%;top:50%;transform:translateY(-50%);margin-right:.5rem;font-size:1.25rem;font-weight:700;color:#00c853;opacity:1;animation:_popUp_i20d9_1 2s ease-out forwards;pointer-events:none;white-space:nowrap}@keyframes _popUp_i20d9_1{0%{opacity:1;transform:translateY(-50%)}70%{opacity:1;transform:translateY(-50%)}to{opacity:0;transform:translateY(-50%)}}._container_c9l4d_1{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;gap:1.5rem}._title_c9l4d_10{font-size:1.5rem;font-weight:600;color:var(--text-primary);margin:0}._totalScore_c9l4d_17{font-size:3rem;font-weight:700;color:var(--accent);margin:.5rem 0}._statsGrid_c9l4d_24{display:grid;grid-template-columns:auto auto;gap:.5rem 1.5rem;font-size:1.1rem;color:var(--text-secondary)}._statLabel_c9l4d_32{text-align:right;font-weight:500}._statValue_c9l4d_37{text-align:left;font-weight:600}._statCorrect_c9l4d_42{color:#00c853}._statIncorrect_c9l4d_46{color:#ff1744}._statMissed_c9l4d_50{color:#ff9100}._challengeCount_c9l4d_54{font-size:.95rem;color:var(--text-muted);margin-top:.25rem}._playAgainButton_c9l4d_60{margin-top:1rem;padding:.75rem 2rem;font-size:1.1rem;font-weight:600;color:#fff;background-color:var(--accent);border:none;border-radius:6px;cursor:pointer;transition:background-color .2s ease}._playAgainButton_c9l4d_60:hover{background-color:var(--accent-hover)}._container_uwqa5_1{display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:2rem;width:100%}._heading_uwqa5_10{font-size:1.5rem;font-weight:600;margin:0;color:var(--text-primary)}._options_uwqa5_17{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}._option_uwqa5_17{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1.5rem 2rem;border:2px solid var(--border-color);border-radius:12px;background:var(--bg-card);cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .1s;min-width:140px;color:var(--text-primary)}._option_uwqa5_17:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-2px)}._option_uwqa5_17:active{transform:translateY(0)}._selected_uwqa5_49{border-color:var(--accent);background:var(--accent);color:#fff;box-shadow:var(--shadow)}._selected_uwqa5_49:hover{background:var(--accent-hover);border-color:var(--accent-hover)}._selected_uwqa5_49 ._label_uwqa5_61{color:#fff}._selected_uwqa5_49 ._range_uwqa5_65{color:#fffc}._clefSymbol_uwqa5_69{font-size:2.5rem;line-height:1}._label_uwqa5_61{font-size:1.1rem;font-weight:500;color:var(--text-primary)}._range_uwqa5_65{font-size:.85rem;color:var(--text-secondary)}._container_dtj6o_1{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1.5rem;width:100%}._title_dtj6o_10{font-size:1.2rem;font-weight:600;color:var(--text-primary);margin:0}._options_dtj6o_17{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;max-width:400px;width:100%}._option_dtj6o_17{padding:.6rem .8rem;font-size:.9rem;font-weight:500;color:var(--text-primary);background-color:var(--bg-secondary);border:2px solid var(--border-color);border-radius:6px;cursor:pointer;transition:background-color .15s ease,border-color .15s ease;text-align:center}._option_dtj6o_17:hover{border-color:var(--accent);background-color:var(--bg-card)}._selected_dtj6o_43{background-color:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}._selected_dtj6o_43:hover{background-color:var(--accent-hover);border-color:var(--accent-hover)}._container_f4m1k_1{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.5rem}._label_f4m1k_9{font-size:1rem;font-weight:600;color:var(--text-primary, #1a1a2e)}._options_f4m1k_15{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}._option_f4m1k_15{width:2.5rem;height:2.5rem;border-radius:50%;border:2px solid var(--border-color, #ccc);background:var(--bg-secondary, #f5f5f5);color:var(--text-primary, #1a1a2e);font-size:1rem;font-weight:600;cursor:pointer;transition:all .15s ease;display:flex;align-items:center;justify-content:center}._option_f4m1k_15:hover:not(._selected_f4m1k_38){border-color:var(--accent-color, #6366f1);background:var(--bg-hover, #eef)}._option_f4m1k_15._selected_f4m1k_38{background:var(--accent-color, #6366f1);border-color:var(--accent-color, #6366f1);color:#fff;transform:scale(1.1)}._logoContainer_1q5k0_1{display:flex;justify-content:center;align-items:center;max-height:100%;overflow:hidden}._logoSvg_1q5k0_9{width:clamp(120px,30vmin,250px);max-height:100%;height:auto;filter:drop-shadow(0 4px 12px rgba(67,97,238,.15));animation:_introScale_1q5k0_1 .8s ease-out forwards;opacity:0;transform:scale(.3)}@keyframes _introScale_1q5k0_1{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}@keyframes _float_1q5k0_1{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}._bgCircle_1q5k0_35{fill:var(--bg-secondary);stroke:var(--accent);stroke-width:2;opacity:0;animation:_fadeIn_1q5k0_1 .6s ease-out .2s forwards}._staffLine_1q5k0_43{fill:none;stroke:var(--staff-color);stroke-width:1.2;opacity:0;animation:_fadeIn_1q5k0_1 .4s ease-out .5s forwards}._clef_1q5k0_51{fill:var(--accent);opacity:0;animation:_fadeIn_1q5k0_1 .8s ease-out .4s forwards}._clefStem_1q5k0_57,._clefDot_1q5k0_61{display:none}@keyframes _drawIn_1q5k0_1{to{stroke-dashoffset:0}}._note_1q5k0_69{fill:var(--accent);stroke:none;opacity:0;transform:scale(0);transform-origin:center;animation:_popIn_1q5k0_1 .4s cubic-bezier(.34,1.56,.64,1) forwards}._note_1q5k0_69:nth-child(1){animation-delay:.9s}._note_1q5k0_69:nth-child(2){animation-delay:1.1s}._note_1q5k0_69:nth-child(3){animation-delay:1.3s}@keyframes _popIn_1q5k0_1{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}._noteStem_1q5k0_87{stroke:var(--accent);stroke-width:2;stroke-linecap:round;opacity:0;animation:_fadeIn_1q5k0_1 .3s ease-out 1s forwards}._noteFlag_1q5k0_95{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;opacity:0;animation:_fadeIn_1q5k0_1 .3s ease-out 1.1s forwards}._sparkle_1q5k0_104{fill:var(--success);opacity:0;animation:_sparkleIn_1q5k0_1 .5s ease-out 1.4s forwards,_twinkle_1q5k0_1 2s ease-in-out 1.9s infinite alternate}._sparkle_1q5k0_104:nth-child(n+2){animation-delay:1.6s,2.1s}@keyframes _sparkleIn_1q5k0_1{0%{opacity:0;transform:scale(0)}to{opacity:.8;transform:scale(1)}}@keyframes _twinkle_1q5k0_1{0%{opacity:.4;transform:scale(.8)}to{opacity:1;transform:scale(1.2)}}._flowLine_1q5k0_125{fill:none;stroke:var(--success);stroke-width:1.5;stroke-linecap:round;opacity:0;stroke-dasharray:4 3;animation:_fadeIn_1q5k0_1 .4s ease-out 1.5s forwards,_dash_1q5k0_1 3s linear 1.5s infinite}@keyframes _fadeIn_1q5k0_1{0%{opacity:0}to{opacity:.6}}@keyframes _dash_1q5k0_1{to{stroke-dashoffset:-20}}._titleContainer_dink3_1{display:flex;justify-content:center;align-items:center;margin:0;width:100%}._titleSvg_dink3_9{width:clamp(280px,60vw,500px);height:auto;overflow:visible}._titleText_dink3_15{font-family:Dancing Script,Brush Script MT,Segoe Script,cursive;font-size:48px;font-weight:700;fill:var(--accent);stroke:none;opacity:0;animation:_fadeIn_dink3_1 .5s ease-out 2.2s forwards}._titleTextStroke_dink3_25{font-family:Dancing Script,Brush Script MT,Segoe Script,cursive;font-size:48px;font-weight:700;fill:none;stroke:url(#titleGradient);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1500;stroke-dashoffset:1500;animation:_writeIn_dink3_1 2.5s ease-out forwards}@keyframes _writeIn_dink3_1{0%{stroke-dashoffset:1500;opacity:1}to{stroke-dashoffset:0;opacity:1}}@keyframes _fadeIn_dink3_1{0%{opacity:0}to{opacity:1}}._appContainer_1kran_1{width:100%;max-width:960px;margin:0 auto;padding:1rem 1.5rem;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}._title_1kran_14{font-size:clamp(1.4rem,4vw,2.2rem);font-weight:700;margin-bottom:.25rem;color:var(--text-primary);text-align:center}._subtitle_1kran_22{font-size:clamp(.9rem,2vw,1.1rem);color:var(--text-secondary);margin:0 0 1.5rem;text-align:center;font-weight:400}._homeScreen_1kran_31{justify-content:space-between;height:100%;max-height:100%;min-height:0;padding-top:.5rem;padding-bottom:.5rem}._titleScreen_1kran_41{justify-content:center;gap:1.5rem;height:100%}._homeTop_1kran_47{display:flex;flex-direction:column;align-items:center;gap:.25rem;flex-shrink:0}._homeMiddle_1kran_55{display:flex;justify-content:center;align-items:flex-start;min-height:0;flex:1;padding:.5rem 0;overflow-y:auto;width:100%}._homeBottom_1kran_66{display:flex;justify-content:center;align-items:center;flex-shrink:0;padding:.5rem 0}._startSection_1kran_74{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;margin-top:4rem;flex:1}._startButton_1kran_84{font-size:clamp(1.2rem,3vw,1.6rem);padding:1rem 3rem;border:none;border-radius:12px;background:var(--accent);color:#fff;cursor:pointer;font-weight:600;transition:background .2s,transform .1s;box-shadow:var(--shadow)}._startButton_1kran_84:hover{background:var(--accent-hover);transform:translateY(-1px)}._startButton_1kran_84:active{transform:translateY(0)}._modeButtons_1kran_106{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}._comingSoonText_1kran_113{font-size:clamp(2rem,5vw,3rem);font-weight:700;color:var(--text-primary);margin:0}._setupSection_1kran_121{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%}._optionsGrid_1kran_130{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;width:100%;max-width:700px}._beginButton_1kran_138{font-size:clamp(1.2rem,3vw,1.6rem);padding:1rem 3rem;border:none;border-radius:12px;background:var(--accent);color:#fff;cursor:pointer;font-weight:600;transition:background .2s,transform .1s;margin-top:.5rem;box-shadow:var(--shadow)}._beginButton_1kran_138:hover{background:var(--accent-hover);transform:translateY(-1px)}._beginButton_1kran_138:active{transform:translateY(0)}._playingSection_1kran_162{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;width:100%;flex:1;min-height:0;overflow:hidden;padding-bottom:calc(160px + env(safe-area-inset-bottom) + 2.5rem)}._topBar_1kran_175{display:flex;justify-content:space-between;align-items:center;width:100%;padding:.5rem 0}._staffArea_1kran_183{width:100%;display:flex;justify-content:center;flex:1;min-height:0}._keyboardArea_1kran_191{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:center;padding-bottom:env(safe-area-inset-bottom);background:var(--bg-primary);z-index:10}._challengeCounter_1kran_204{font-size:.9rem;color:var(--text-secondary);font-weight:500}._srOnly_1kran_211{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}._topControls_1kran_224{position:fixed;top:calc(env(safe-area-inset-top) + .5rem);right:calc(env(safe-area-inset-right) + 1rem);z-index:100;display:flex;gap:.5rem}._themeToggle_1kran_234{width:40px;height:40px;border-radius:50%;border:2px solid var(--border-color);background:var(--bg-secondary);font-size:1.2rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .2s,transform .1s;padding:0;line-height:1}._themeToggle_1kran_234:hover{background:var(--bg-card, var(--bg-secondary));transform:scale(1.1)}._themeToggle_1kran_234:active{transform:scale(.95)}._giveUpButton_1kran_260{position:fixed;bottom:calc(160px + env(safe-area-inset-bottom) + .5rem);left:1rem;padding:.4rem 1.5rem;font-size:.85rem;font-weight:500;color:var(--text-muted);background:var(--bg-primary);border:1px solid var(--border-color);border-radius:6px;cursor:pointer;transition:color .2s,border-color .2s;z-index:100}._backButton_1kran_277{position:fixed;top:calc(env(safe-area-inset-top) + .5rem);left:calc(env(safe-area-inset-left) + 1rem);padding:.4rem 1rem;font-size:.85rem;font-weight:500;color:var(--text-muted);background:var(--bg-primary);border:1px solid var(--border-color);border-radius:6px;cursor:pointer;transition:color .2s,border-color .2s;z-index:100}._backButton_1kran_277:hover,._giveUpButton_1kran_260:hover{color:var(--text-primary);border-color:var(--text-secondary)}._toggleLabel_1kran_304{display:flex;align-items:center;gap:.75rem;font-size:.95rem;color:var(--text-primary);cursor:pointer;-webkit-user-select:none;user-select:none;padding:.6rem 1rem;border-radius:8px;background:var(--bg-secondary);border:1px solid var(--border-color);width:100%;transition:border-color .15s}._toggleLabel_1kran_304:active{border-color:var(--accent)}._toggleCheckbox_1kran_324{position:relative;width:2.6rem;height:1.5rem;-moz-appearance:none;appearance:none;-webkit-appearance:none;background:var(--border-color);border-radius:.75rem;cursor:pointer;transition:background .2s;flex-shrink:0}._toggleCheckbox_1kran_324:after{content:"";position:absolute;top:3px;left:3px;width:1.1rem;height:1.1rem;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px #0003}._toggleCheckbox_1kran_324:checked{background:var(--accent)}._toggleCheckbox_1kran_324:checked:after{transform:translate(1.1rem)}._audioModeButton_1kran_359{display:flex;align-items:center;gap:.75rem;padding:.6rem 1rem;border-radius:8px;background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-primary);font-size:.95rem;cursor:pointer;width:100%;transition:border-color .15s,background .15s;-webkit-user-select:none;user-select:none}._audioModeButton_1kran_359:active{border-color:var(--accent);background:var(--bg-card, var(--bg-secondary))}._audioModeIcon_1kran_380{font-size:1.3rem;flex-shrink:0}._audioModeText_1kran_385{font-weight:500}._midiStatus_1kran_390{font-size:.8rem;color:var(--text-muted);font-weight:400}