:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;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: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}html,body,#root{height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:auto;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#fff;color:#333;display:flex;flex-direction:column}.app{width:100%;height:100vh;display:flex;flex-direction:column;box-sizing:border-box;overflow:hidden;min-height:0;max-width:1200px;margin:0 auto;padding:1rem}header{text-align:center;margin-bottom:1rem}h1{margin:.5rem 0;color:#222;font-size:2rem;font-weight:600}.controls{margin:.5rem 0;display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}.control-button{background-color:#4cc9f0;color:#1a1a2e;border:none;padding:.5rem 1.5rem;border-radius:4px;font-size:1rem;cursor:pointer;transition:background-color .2s}.control-button:hover{background-color:#3aa8d4}.tabs-container{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e0e0e0;margin-bottom:1.5rem;padding-bottom:.5rem;width:100%}.tabs{display:flex;margin:0;padding:0;list-style:none}.tab-button{background:none;border:none;padding:.5rem 1.25rem;margin:0;cursor:pointer;font-size:.95rem;color:#666;border-bottom:2px solid transparent;transition:all .2s}.tab-button:hover{color:#333}.tab-button.active{color:#007aff;border-bottom-color:#007aff;font-weight:500}.tab-content-container{flex:1;position:relative;width:100%;min-height:400px;min-width:1200px;overflow:auto;padding:1rem;box-sizing:border-box}.tab-content-wrapper{position:absolute;inset:0;background-color:#fff;border:1px solid #eee;border-radius:8px;padding:1.5rem;box-shadow:0 2px 8px #0000001a;opacity:0;pointer-events:none;transition:opacity .2s ease;overflow:auto;display:flex;flex-direction:column;min-width:1100px}.tab-content-wrapper.active{opacity:1;pointer-events:auto}.tab-content{height:100%;width:100%;box-sizing:border-box}.stats-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem;margin-top:1.5rem}.stat-item{display:flex;flex-direction:column;align-items:center;padding:1rem;background-color:#00000008;border-radius:8px}.stat-value{font-size:2rem;font-weight:600;color:#007aff;margin-bottom:.25rem}.stat-label{font-size:.9rem;color:#555;text-transform:uppercase;letter-spacing:.05em}.settings-option{margin-bottom:1rem;padding:.75rem;background-color:#00000008;border-radius:6px}.settings-option label{display:flex;align-items:center;gap:.5rem;cursor:pointer}.settings-option input[type=checkbox]{width:18px;height:18px;cursor:pointer}.settings-option select{margin-left:.5rem;padding:.25rem .5rem;border-radius:4px;border:1px solid #ddd;background-color:#fff}.score-display{display:flex;justify-content:center;gap:2rem;margin:1rem 0}.score-item{text-align:center}.score-value{font-size:1.5rem;font-weight:700;color:#007aff}.score-label{font-size:.85rem;color:#666;text-transform:uppercase;letter-spacing:.5px}@media (max-width: 768px){.app{padding:.5rem}.tabs-container{flex-direction:column;align-items:flex-start}.tab-button{padding:.5rem 1rem;font-size:.9rem}.tab-content-container{min-width:100%;padding:.5rem}.tab-content-wrapper{padding:1rem}}@keyframes flash{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.correct-feedback{animation:flash .5s ease-in-out;color:#28a745}.incorrect-feedback{animation:flash .5s ease-in-out;color:#dc3545}.loading{display:flex;justify-content:center;align-items:center;height:100%;font-size:1.2rem;color:#666}.error-message{color:#dc3545;background-color:#f8d7da;border:1px solid #f5c6cb;padding:.75rem 1.25rem;border-radius:.25rem;margin:1rem 0}.success-message{color:#28a745;background-color:#d4edda;border:1px solid #c3e6cb;padding:.75rem 1.25rem;border-radius:.25rem;margin:1rem 0}._page_byuo5_1{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at top,rgba(37,99,235,.22),transparent 60%),linear-gradient(160deg,#0f172ad9,#1e40afa6);padding:clamp(1.5rem,4vw,4rem);color:#0f172a;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}._card_byuo5_13{width:min(520px,100%);background:#ffffffeb;border-radius:24px;padding:clamp(2rem,5vw,3rem);box-shadow:0 28px 54px #0f172a59;display:grid;gap:2.25rem;border:1px solid rgba(148,163,184,.25)}._header_byuo5_24{display:grid;gap:.85rem;text-align:left}._pill_byuo5_30{display:inline-flex;align-items:center;gap:.45rem;background:linear-gradient(120deg,#2563eb,#7c3aed);color:#f8fafc;font-weight:600;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;padding:.35rem .75rem;border-radius:999px;width:fit-content}._header_byuo5_24 h1{margin:0;font-size:clamp(2rem,4vw,2.5rem);color:#0f172a}._lead_byuo5_51{margin:0;color:#1e293b;line-height:1.65}._form_byuo5_57{display:grid;gap:1.5rem}._fieldGrid_byuo5_62{display:grid;gap:1rem}._field_byuo5_62{display:grid;gap:.4rem;font-weight:600;color:#0f172a}._field_byuo5_62 input{padding:.85rem 1rem;border-radius:12px;border:1px solid rgba(148,163,184,.5);font-size:1rem;transition:border-color .2s ease,box-shadow .2s ease}._field_byuo5_62 input:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px #2563eb40}._errorBanner_byuo5_88{background:#f871712e;color:#991b1b;border-radius:12px;padding:.85rem 1rem;font-weight:600;border:1px solid rgba(239,68,68,.35)}._submit_byuo5_97{background:linear-gradient(120deg,#2563eb,#22d3ee);color:#fff;border:none;border-radius:999px;padding:.9rem 1.2rem;font-size:1.05rem;font-weight:700;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}._submit_byuo5_97:disabled{cursor:progress;opacity:.7}._submit_byuo5_97:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 18px 32px #2563eb59}._hint_byuo5_119{font-size:.9rem;color:#1e293b;background:#1e40af14;padding:.75rem 1rem;border-radius:12px;border:1px dashed rgba(37,99,235,.35)}._footer_byuo5_128{font-size:.9rem;color:#334155;background:#94a3b826;padding:.75rem 1rem;border-radius:16px;border:1px solid rgba(148,163,184,.2)}@media (min-width: 600px){._fieldGrid_byuo5_62{grid-template-columns:repeat(2,minmax(0,1fr))}}._page_zqaqr_1{min-height:100vh;padding:clamp(2.5rem,6vw,4.5rem);background:linear-gradient(145deg,#2563eb1f,#7dd3fc3d);display:grid;gap:clamp(2rem,5vw,3.5rem);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}._heroHeader_zqaqr_10{display:flex;justify-content:space-between;align-items:flex-start;gap:1.5rem}._heroCopy_zqaqr_17{display:grid;gap:.5rem}._eyebrow_zqaqr_22{margin:0;text-transform:uppercase;color:#1e3a8a;font-weight:600;letter-spacing:.25em;font-size:.8rem}._heroCopy_zqaqr_17 h1{margin:0;font-size:clamp(2.25rem,5vw,3rem);color:#0f172a}._logoutButton_zqaqr_37{background:none;border:1px solid rgba(15,23,42,.15);color:#1e293b;padding:.65rem 1rem;border-radius:12px;font-weight:600;cursor:pointer;transition:background .2s ease,transform .2s ease}._logoutButton_zqaqr_37:hover{background:#1e40af14;transform:translateY(-1px)}._heroSection_zqaqr_53{background:#f8fafcd9;border-radius:24px;padding:clamp(2rem,5vw,3rem);display:grid;gap:1rem;border:1px solid rgba(148,163,184,.25);box-shadow:0 20px 48px #0f172a2e}._heroBadge_zqaqr_63{display:inline-flex;align-items:center;gap:.3rem;background:linear-gradient(130deg,#2563eb,#7c3aed);color:#f8fafc;font-weight:600;letter-spacing:.15em;text-transform:uppercase;padding:.35rem .75rem;border-radius:999px;font-size:.7rem;width:fit-content}._heroHeading_zqaqr_78{margin:0;font-size:clamp(2rem,4.5vw,2.75rem);color:#0f172a}._heroDescription_zqaqr_84{margin:0;color:#1f2937;line-height:1.6}._contentRegion_zqaqr_90{display:grid;gap:1.5rem}._status_zqaqr_95{background:#2563eb1f;color:#1d4ed8;padding:.75rem 1rem;border-radius:12px;font-weight:600;width:fit-content}._error_zqaqr_104{background:#ef44441f;color:#b91c1c;padding:.75rem 1rem;border-radius:12px;font-weight:600;width:fit-content}._emptyState_zqaqr_113{background:#1e40af14;color:#1e293b;padding:1rem 1.25rem;border-radius:16px;border:1px dashed rgba(30,64,175,.25)}._grid_zqaqr_121{display:grid;gap:1.25rem}@media (min-width: 900px){._grid_zqaqr_121{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}}._actionsCard_zqaqr_132,._highlightsCard_zqaqr_133{background:#ffffffe6;border-radius:24px;padding:clamp(1.75rem,4vw,2.5rem);border:1px solid rgba(148,163,184,.25);box-shadow:0 16px 32px #0f172a26;display:grid;gap:1.25rem}._actionsCard_zqaqr_132 h3,._highlightsCard_zqaqr_133 h3{margin:0;font-size:1.4rem;color:#0f172a}._actionsCard_zqaqr_132 p,._highlightsCard_zqaqr_133 p{margin:0;color:#475569;line-height:1.6}._actionsButtons_zqaqr_157{display:flex;flex-wrap:wrap;gap:.75rem}._primaryCta_zqaqr_163{background:linear-gradient(130deg,#22c55e,#10b981);color:#fff;border:none;border-radius:999px;padding:.75rem 1.4rem;font-weight:700;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}._primaryCta_zqaqr_163:hover{transform:translateY(-1px);box-shadow:0 16px 30px #10b98159}._secondaryCta_zqaqr_179{background:#0f172a0f;color:#0f172a;border:none;border-radius:999px;padding:.75rem 1.3rem;font-weight:600;cursor:pointer;transition:background .2s ease;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}._secondaryCta_zqaqr_179:hover{background:#0f172a1a}._highlightsList_zqaqr_198{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}._highlightsList_zqaqr_198 li{background:#1e40af14;padding:.75rem 1rem;border-radius:12px;color:#1e293b;font-weight:600}._footerNote_zqaqr_214{background:#94a3b833;border-radius:16px;padding:.85rem 1.25rem;color:#334155;border:1px solid rgba(148,163,184,.25);font-size:.95rem}._tabBar_r1cn7_1{display:flex;margin:0;padding:0;list-style:none}._tabButton_r1cn7_8{background:none;border:none;padding:.5rem 1.25rem;margin:0;cursor:pointer;font-size:.95rem;color:#666;border-bottom:2px solid transparent;transition:color .2s ease,border-bottom-color .2s ease}._tabButton_r1cn7_8:hover,._tabButton_r1cn7_8:focus-visible{color:#333;outline:none}._active_r1cn7_26{color:#007aff;border-bottom-color:#007aff;font-weight:500}._container_7ercs_1{flex:1;position:relative;width:100%;min-height:400px;min-width:1200px;overflow:auto;padding:1rem;box-sizing:border-box}._panel_7ercs_12{position:absolute;inset:0;background-color:#fff;border:1px solid #eee;border-radius:8px;padding:1.5rem;box-shadow:0 2px 8px #0000001a;opacity:0;pointer-events:none;transition:opacity .2s ease;overflow:auto;display:flex;flex-direction:column;min-width:1100px}._active_7ercs_32{opacity:1;pointer-events:auto}@media (max-width: 768px){._container_7ercs_1{min-width:100%;padding:.5rem}._panel_7ercs_12{padding:1rem;position:relative;min-width:auto}}._app_byrn4_1{width:100%;height:100vh;margin:0 auto;padding:1rem;display:flex;flex-direction:column;box-sizing:border-box;overflow:hidden;min-height:0;max-width:1200px}._header_byrn4_14{text-align:center;margin-bottom:1rem}._title_byrn4_19{margin:.5rem 0;color:#222;font-size:2rem;font-weight:600}._tabsContainer_byrn4_26{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e0e0e0;margin-bottom:1.5rem;padding-bottom:.5rem;width:100%}._userInfo_byrn4_36{display:flex;flex-direction:column;align-items:flex-end;gap:.25rem;font-size:.85rem;color:#555}._username_byrn4_45{font-weight:600;color:#222}._userLevel_byrn4_50{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:#888}@media (max-width: 768px){._app_byrn4_1{padding:.5rem}._tabsContainer_byrn4_26{flex-direction:column;align-items:flex-start;gap:.75rem}._userInfo_byrn4_36{align-items:flex-start}}._pianoContainer_6fbn3_1{margin:20px 0;width:100%;overflow:hidden}._piano_6fbn3_1{position:relative;height:200px;background-color:#f5f5f5;border-radius:5px;overflow:visible;box-shadow:0 2px 5px #0003;display:flex;padding:0 15px}._pianoOctave_6fbn3_18{position:relative;display:flex;flex:1;min-width:0}._whiteKey_6fbn3_25{position:relative;flex:1;min-width:0;background-color:#fff;border:1px solid #ccc;border-radius:0 0 5px 5px;cursor:pointer;display:flex;justify-content:center;align-items:flex-end;padding-bottom:10px;-webkit-user-select:none;user-select:none;transition:background-color .1s;z-index:0}._whiteKey_6fbn3_25:hover{background-color:#f0f0f0}._whiteKey_6fbn3_25._active_6fbn3_46,._whiteKey_6fbn3_25._correct_6fbn3_47{background-color:#4caf50;color:#fff}._whiteKey_6fbn3_25._incorrect_6fbn3_52{background-color:#f44336;color:#fff}._blackKey_6fbn3_57{position:absolute;width:40px;height:60%;background-color:#333;z-index:1;border-radius:0 0 5px 5px;cursor:pointer;display:flex;justify-content:center;align-items:flex-end;padding-bottom:10px;color:#fff;font-size:.8em;-webkit-user-select:none;user-select:none;transition:background-color .1s;margin-left:-5px;box-shadow:0 2px 3px #0000004d}._blackKey_6fbn3_57:hover{background-color:#555}._blackKey_6fbn3_57._active_6fbn3_46,._blackKey_6fbn3_57._correct_6fbn3_47{background-color:#388e3c}._blackKey_6fbn3_57._incorrect_6fbn3_52{background-color:#d32f2f}._noteName_6fbn3_90{font-size:10px;font-weight:700;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;padding:0 2px;text-align:center}._lastKey_6fbn3_102{border-right:2px solid #999}._trainingView_1d718_1{padding:1.5rem 0;min-height:calc(100vh - 200px);display:flex;flex-direction:column;gap:1.5rem}._staffContainer_1d718_9{margin:15px auto;max-width:800px;padding:10px 0 20px}._columns_1d718_15{display:flex;gap:20px;align-items:flex-start}._statsColumn_1d718_21{width:180px;flex-shrink:0;display:flex;flex-direction:column;gap:10px;font-size:14px;color:#333}._controlsColumn_1d718_31{width:140px;display:flex;flex-direction:column;gap:12px;margin:0 15px;min-height:250px;justify-content:center}._timer_1d718_41{padding:8px;text-align:center;background-color:#f5f5f5;border-radius:4px;border:1px solid #ddd;font-size:14px;font-weight:700;font-family:monospace;color:#333}._noteDisplay_1d718_53{padding:10px;text-align:center;background-color:#fff;border-radius:4px;border:1px solid #ddd;font-size:24px;font-weight:700;font-family:Arial,sans-serif;min-height:60px;display:flex;align-items:center;justify-content:center;color:#333}._lastAnswerContent_1d718_69{display:flex;flex-direction:column;align-items:center;gap:4px}._lastAnswerNote_1d718_76{font-size:28px}._correctAnswerContent_1d718_80{display:flex;flex-direction:column;align-items:center;gap:4px}._correctAnswerNote_1d718_87{font-size:28px}._correctNoteLabel_1d718_91{font-size:12px;color:#555}._noteMasked_1d718_96{color:#888;font-style:italic}._controlsArea_1d718_101{min-height:200px;display:flex;flex-direction:column;justify-content:center;gap:4px}._controlsStack_1d718_109{position:relative;width:100%;min-height:200px}._inSessionControls_1d718_115{display:flex;flex-direction:column;gap:12px;height:100%;transition:opacity .2s ease}._controlsHidden_1d718_123{opacity:0;pointer-events:none;visibility:hidden}._startOverlay_1d718_129{position:absolute;inset:0;display:flex;align-items:stretch;justify-content:stretch}._startButtonDisabled_1d718_137{cursor:not-allowed;opacity:.7}._controlsButtons_1d718_142{display:flex;flex-direction:column;gap:8px;width:100%;flex:1}._controlsButtons_1d718_142 ._control-button_1d718_150{flex:1;width:100%}._primaryButton_1d718_155{width:100%;padding:10px;font-size:16px;font-weight:700;border-radius:4px}._startButton_1d718_137{display:flex;align-items:center;justify-content:center;width:100%}._octaveButtonsRow_1d718_170{display:flex;justify-content:space-between;gap:8px}._octaveButton_1d718_170{width:30px;height:30px;padding:0;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;border-radius:4px}._replayButton_1d718_188,._nextButton_1d718_195{width:100%;padding:10px;font-size:13px;text-align:center}._showAnswerButton_1d718_202{width:100%;padding:10px;font-size:13px}._divider_1d718_208{width:1px;background-color:#e0e0e0;height:180px;margin:0 10px}._grandStaffOuter_1d718_215{flex:1}._staffWrapper_1d718_219{position:relative;width:300px;height:180px;display:flex;align-items:center;justify-content:center;background-color:#f5f5f5;border-radius:4px;transition:background-color .2s ease}._staffWrapperActive_1d718_231{background-color:transparent}._staffPlaceholder_1d718_235{font-size:48px;color:#999;font-weight:700;font-style:italic}._layoutSpacer_1d718_242{height:20px}._pianoSection_1d718_246{display:flex;flex-direction:column;align-items:center;position:relative;min-height:250px}._feedback_1d718_254{position:absolute;bottom:-20px;left:0;right:0;text-align:center;padding:10px 0;font-size:1.2rem;font-weight:700}._correct_1d718_80{color:#28a745}._incorrect_1d718_269{color:#dc3545}@media (max-width: 768px){._columns_1d718_15{flex-direction:column;gap:1rem}._controlsColumn_1d718_31{margin:0;width:100%}._divider_1d718_208{display:none}._grandStaffOuter_1d718_215{width:100%}}._page_4wazf_1{min-height:100vh;padding:clamp(2rem,5vw,4rem);display:flex;justify-content:center;background:linear-gradient(180deg,#2563eb14,#94a3b81f)}._content_4wazf_9{width:min(90vw,1200px);display:grid;gap:clamp(1.5rem,4vw,2.5rem)}._header_4wazf_15{display:grid;gap:.5rem}._header_4wazf_15 h1{margin:0;font-size:clamp(2rem,4vw,3rem);color:#0f172a}._subtitle_4wazf_26{margin:0;color:#1f2937;font-size:1.05rem;line-height:1.6}._pianoWrapper_4wazf_33{background:#f8fafce6;border-radius:20px;padding:clamp(1.5rem,4vw,2.5rem);box-shadow:0 20px 48px #0f172a1f;display:flex;justify-content:center;overflow-x:auto}._controls_4wazf_43{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}._patchGroup_4wazf_50{display:inline-flex;flex-wrap:wrap;gap:.75rem;border:1px solid rgba(15,23,42,.12);border-radius:12px;padding:.75rem 1rem;min-width:240px;background:#ffffffe6}._legend_4wazf_61{font-weight:600;color:#0f172a;margin-right:1rem}._radioOption_4wazf_67{display:inline-flex;align-items:center;gap:.4rem;font-size:.95rem;color:#1f2937}._muteToggle_4wazf_75{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;color:#1f2937}._status_4wazf_83{min-height:1.5rem;display:flex;gap:1rem;align-items:center}._statusInfo_4wazf_90{color:#1d4ed8;font-weight:600}._statusError_4wazf_95{color:#b91c1c;font-weight:600}@media (max-width: 700px){._controls_4wazf_43{align-items:stretch}._patchGroup_4wazf_50{width:100%;justify-content:space-between}._radioOption_4wazf_67{flex:1 1 45%}}