: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}body{margin:0;min-width:320px;min-height:100vh;display:flex;justify-content:center;background-color:var(--bg-primary);color:var(--text-primary);transition:background-color .3s,color .3s}#root{width:100%}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_obw5j_1{display:flex;flex-direction:column;align-items:center;padding:1rem 1rem 2.5rem;width:100%;color:var(--staff-color);position:relative}._staffSvg_obw5j_12{width:100%;max-width:600px;height:auto}._staffLine_obw5j_18{stroke:var(--staff-color);stroke-width:2}._ledgerLine_obw5j_23{stroke:var(--staff-color);stroke-width:1.8}._clefSymbol_obw5j_28{font-size:72px;-webkit-user-select:none;user-select:none;fill:var(--staff-color)}._notehead_obw5j_34{stroke-width:1.5}._noteheadFilled_obw5j_38{fill:var(--note-color);stroke:var(--note-color)}._noteheadOpen_obw5j_43{fill:none;stroke:var(--note-color);stroke-width:2.5}._stem_obw5j_49{stroke:var(--note-color);stroke-width:2}._flag_obw5j_54{fill:var(--note-color);stroke:none}._accidentalText_obw5j_59{font-size:22px;font-weight:700;-webkit-user-select:none;user-select:none;fill:var(--note-color)}._keySignatureText_obw5j_66{font-size:20px;font-weight:700;-webkit-user-select:none;user-select:none;fill:var(--staff-color)}._durationLabel_obw5j_73{position:absolute;bottom:0;left:50%;transform:translate(-50%);font-size:1rem;color:var(--text-secondary);font-style:italic;text-align:center;pointer-events:none}._feedbackCorrect_obw5j_86{fill:#00c853;stroke:#00c853}._feedbackIncorrect_obw5j_91{fill:#ff1744;stroke:#ff1744}._feedbackMissed_obw5j_96{fill:#ff9100;stroke:#ff9100}._feedbackTextLabel_obw5j_102{position:absolute;bottom:-2rem;left:50%;transform:translate(-50%);font-size:.9rem;font-weight:600;text-align:center;padding:.25rem .75rem;border-radius:4px;color:var(--text-primary);background:var(--bg-secondary);white-space:nowrap;pointer-events:none}._keyboardContainer_fnu5n_1{display:flex;flex-direction:column;align-items:center;padding:1rem;-webkit-user-select:none;user-select:none;width:100%}._keyboard_fnu5n_1{position:relative;display:flex;height:160px}._whiteKey_fnu5n_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_fnu5n_16:hover{background:var(--key-white-hover)}._whiteKey_fnu5n_16:active{background:#d0d0d0}._blackKey_fnu5n_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_fnu5n_35:hover{background:var(--key-black-hover)}._blackKey_fnu5n_35:active{background:#555}._pressed_fnu5n_55{background:#b3e0ff!important}._blackKey_fnu5n_35._pressed_fnu5n_55{background:#69c!important}._highlightGreen_fnu5n_64{background:#00c853!important}._blackKey_fnu5n_35._highlightGreen_fnu5n_64{background:#00a844!important}._highlightRed_fnu5n_73{background:#ff1744!important}._blackKey_fnu5n_35._highlightRed_fnu5n_73{background:#d50032!important}._disabled_fnu5n_82{opacity:.6;cursor:not-allowed}._disabled_fnu5n_82 ._whiteKey_fnu5n_16,._disabled_fnu5n_82 ._blackKey_fnu5n_35{cursor:not-allowed}._disabled_fnu5n_82 ._whiteKey_fnu5n_16:hover{background:var(--key-white)}._disabled_fnu5n_82 ._blackKey_fnu5n_35:hover{background:var(--key-black)}._keyLabel_fnu5n_101{position:absolute;bottom:8px;left:50%;transform:translate(-50%);font-size:10px;color:var(--text-muted);pointer-events:none}._blackKey_fnu5n_35 ._keyLabel_fnu5n_101{color:#ccc}._srOnly_fnu5n_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_11okw_1{display:flex;flex-direction:column;align-items:center;position:relative;padding:.5rem 1rem}._totalScore_11okw_9{font-size:2rem;font-weight:700;color:var(--text-primary);line-height:1.2}._scoreLabel_11okw_16{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}._challengePopup_11okw_23{position:absolute;top:-.5rem;right:-1rem;font-size:1.25rem;font-weight:700;color:#00c853;opacity:1;animation:_fadeOut_11okw_1 2s ease-out forwards;pointer-events:none}@keyframes _fadeOut_11okw_1{0%{opacity:1;transform:translateY(0)}70%{opacity:1;transform:translateY(-8px)}to{opacity:0;transform:translateY(-16px)}}._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_y2c8e_1{width:100%;max-width:960px;margin:0 auto;padding:2rem 1.5rem;min-height:100vh;display:flex;flex-direction:column;align-items:center}._title_y2c8e_12{font-size:clamp(1.4rem,4vw,2.2rem);font-weight:700;margin-bottom:.25rem;color:var(--text-primary);text-align:center}._subtitle_y2c8e_20{font-size:clamp(.9rem,2vw,1.1rem);color:var(--text-secondary);margin:0 0 1.5rem;text-align:center;font-weight:400}._homeScreen_y2c8e_29{justify-content:space-between;height:100dvh;max-height:100dvh;min-height:0;padding-top:2rem;padding-bottom:2rem}._homeTop_y2c8e_38{display:flex;flex-direction:column;align-items:center;gap:.5rem;flex-shrink:0}._homeMiddle_y2c8e_46{display:flex;justify-content:center;align-items:flex-start;flex:1;min-height:0;padding:1rem 0;overflow-y:auto;width:100%}._homeBottom_y2c8e_57{display:flex;justify-content:center;align-items:center;flex-shrink:0}._startSection_y2c8e_64{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;margin-top:4rem;flex:1}._startButton_y2c8e_74{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_y2c8e_74:hover{background:var(--accent-hover);transform:translateY(-1px)}._startButton_y2c8e_74:active{transform:translateY(0)}._setupSection_y2c8e_97{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%}._beginButton_y2c8e_105{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_y2c8e_105:hover{background:var(--accent-hover);transform:translateY(-1px)}._beginButton_y2c8e_105:active{transform:translateY(0)}._playingSection_y2c8e_129{display:flex;flex-direction:column;align-items:center;gap:1.5rem;width:100%}._topBar_y2c8e_137{display:flex;justify-content:space-between;align-items:center;width:100%;padding:.5rem 0}._staffArea_y2c8e_145{width:100%;display:flex;justify-content:center}._keyboardArea_y2c8e_151{width:100%;display:flex;justify-content:center;overflow-x:auto}._challengeCounter_y2c8e_159{font-size:.9rem;color:var(--text-secondary);font-weight:500}._srOnly_y2c8e_166{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_y2c8e_179{position:fixed;top:1rem;right:1rem;z-index:100;display:flex;gap:.5rem}._themeToggle_y2c8e_189{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_y2c8e_189:hover{background:var(--bg-card, var(--bg-secondary));transform:scale(1.1)}._themeToggle_y2c8e_189:active{transform:scale(.95)}._giveUpButton_y2c8e_215{margin-top:1rem;padding:.5rem 1.5rem;font-size:.85rem;font-weight:500;color:var(--text-muted);background:transparent;border:1px solid var(--border-color);border-radius:6px;cursor:pointer;transition:color .2s,border-color .2s}._giveUpButton_y2c8e_215:hover{color:var(--text-primary);border-color:var(--text-secondary)}._toggleLabel_y2c8e_234{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%;max-width:300px;transition:border-color .15s}._toggleLabel_y2c8e_234:active{border-color:var(--accent)}._toggleCheckbox_y2c8e_255{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_y2c8e_255: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_y2c8e_255:checked{background:var(--accent)}._toggleCheckbox_y2c8e_255:checked:after{transform:translate(1.1rem)}._audioModeButton_y2c8e_290{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%;max-width:300px;transition:border-color .15s,background .15s;-webkit-user-select:none;user-select:none}._audioModeButton_y2c8e_290:active{border-color:var(--accent);background:var(--bg-card, var(--bg-secondary))}._audioModeIcon_y2c8e_312{font-size:1.3rem;flex-shrink:0}._audioModeText_y2c8e_317{font-weight:500}