:root{--js-yellow:#ffd12f;--js-yellow-hover:#f0ba00;--js-yellow-light:#fff8de;--js-yellow-soft:#fff1b8;--js-bg:#fcfaf3;--js-card:#fff;--js-dark:#151515;--js-text-muted:#64748b;--js-border:#00000014;--js-border-strong:#00000026;--js-shadow:0 10px 30px #1515150f;--js-shadow-hover:0 14px 34px #1515151a;--color-success:#10b981;--color-success-bg:#ecfdf5;--color-danger:#ef4444;--color-danger-bg:#fef2f2;--radius-sm:10px;--radius-md:16px;--radius-lg:22px;--radius-pill:9999px;--font-main:"Plus Jakarta Sans", system-ui, -apple-system, sans-serif;--font-mono:"JetBrains Mono", monospace}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html,body,#root{width:100%;min-width:0;max-width:100%}body{font-family:var(--font-main);color:var(--js-dark);background-color:#f1ede2;justify-content:center;min-height:100vh;line-height:1.5;display:flex;overflow-x:hidden}button{cursor:pointer;color:inherit;background:0 0;border:none;font-family:inherit}.js-desktop-viewport-canvas{background:radial-gradient(circle at 80% 20%,#ffd12f40,#0000 35%),radial-gradient(circle at 15% 85%,#ffe68559,#0000 30%),#f1ede2;justify-content:center;align-items:flex-start;width:100%;min-height:100vh;padding:16px 8px;display:flex}@media (width<=500px){.js-desktop-viewport-canvas{padding:0}}.js-mobile-device-shell{background:var(--js-bg);border:1px solid #0000001a;border-radius:36px;flex-direction:column;width:100%;min-width:0;max-width:440px;min-height:calc(100vh - 32px);display:flex;position:relative;overflow:hidden;box-shadow:0 20px 60px #0000001f}@media (width<=500px){.js-mobile-device-shell{max-width:100%;min-height:100vh;box-shadow:none;border:none;border-radius:0}}.js-header{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--js-border);z-index:40;background:#fffffff0;justify-content:space-between;align-items:center;padding:14px 18px;display:flex;position:sticky;top:0}.js-header-left,.js-logo-wrap{align-items:center;gap:10px;display:flex}.js-logo-mark{background:var(--js-yellow);width:38px;height:38px;color:var(--js-dark);letter-spacing:-.05em;border-radius:12px;justify-content:center;align-items:center;font-size:1.05rem;font-weight:800;display:flex;box-shadow:0 4px 12px #ffd12f66}.js-logo-text{flex-direction:column;line-height:1.15;display:flex}.js-brand-name{color:var(--js-dark);letter-spacing:-.02em;font-size:1.05rem;font-weight:800}.js-app-badge{color:#92400e;background:var(--js-yellow-light);border-radius:var(--radius-pill);letter-spacing:.05em;border:1px solid #ffd12f66;width:fit-content;padding:1px 6px;font-size:.65rem;font-weight:800}.js-header-right{align-items:center;gap:8px;display:flex}.js-btn-audio-activate{background:var(--js-yellow);color:var(--js-dark);border-radius:var(--radius-pill);align-items:center;gap:6px;padding:6px 12px;font-size:.78rem;font-weight:700;display:flex;box-shadow:0 4px 12px #ffd12f66}.pulse{animation:2s ease-in-out infinite pulse-glow}@keyframes pulse-glow{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.js-select-wrapper{position:relative}.js-instrument-select{border:1px solid var(--js-border-strong);border-radius:var(--radius-pill);color:var(--js-dark);cursor:pointer;background:#fff;outline:none;padding:6px 12px;font-size:.8rem;font-weight:600;box-shadow:0 2px 6px #0000000a}.js-mobile-body{flex-direction:column;flex:1;gap:14px;min-width:0;padding:14px 16px;display:flex}.js-stats-bar{border:1px solid var(--js-border);border-radius:var(--radius-pill);background:#fff;justify-content:space-between;align-items:center;padding:8px 16px;display:flex;box-shadow:0 4px 14px #1515150a}.js-stat-item{align-items:center;gap:6px;display:flex}.js-stat-icon.flame{color:#f59e0b}.js-stat-icon.flame.burning{animation:1.2s infinite alternate flame-flicker}@keyframes flame-flicker{0%{transform:scale(1)rotate(-4deg)}to{transform:scale(1.2)rotate(4deg)}}.js-stat-icon.accuracy{color:#0284c7}.js-stat-icon.score{color:#16a34a}.js-stat-num{color:var(--js-dark);font-size:.95rem;font-weight:800;font-family:var(--font-mono)}.js-stat-text{color:var(--js-text-muted);font-size:.7rem;font-weight:600}.js-stat-divider{background:#00000014;width:1px;height:18px}.js-btn-stat-reset{color:var(--js-text-muted);border-radius:var(--radius-pill);padding:4px;transition:all .2s}.js-btn-stat-reset:hover{color:var(--js-dark)}.js-nav-scroll-container{scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px;overflow-x:auto}.js-nav-scroll-container::-webkit-scrollbar{display:none}.js-nav-pills{gap:8px;min-width:max-content;display:flex}.js-nav-pill{border:1px solid var(--js-border);border-radius:var(--radius-pill);color:var(--js-dark);background:#fff;align-items:center;gap:6px;padding:8px 16px;font-size:.85rem;font-weight:600;transition:all .15s;display:flex;box-shadow:0 2px 6px #00000008}.js-nav-pill:hover{background:var(--js-yellow-light);transform:translateY(-1px)}.js-nav-pill.active{background:var(--js-yellow);border-color:var(--js-yellow);color:var(--js-dark);box-shadow:0 4px 14px #ffd12f66}.js-pill-emoji{font-size:.95rem}.js-exercise-card{background:var(--js-card);border:1px solid var(--js-border);border-radius:var(--radius-lg);box-shadow:var(--js-shadow);flex-direction:column;gap:16px;padding:18px;display:flex}.js-question-status{color:var(--js-text-muted);text-align:center;align-items:center;font-size:.9rem;font-weight:600}.js-btn-question-retry{border-radius:var(--radius-pill);background:var(--js-yellow);min-height:40px;color:var(--js-dark);padding:8px 14px;font-size:.82rem;font-weight:800}.js-question-retry-inline{color:#991b1b;background:#fef2f2;border-top:1px solid #fecaca;border-bottom:1px solid #fecaca;justify-content:space-between;align-items:center;gap:10px;margin:-4px -18px 0;padding:9px 18px;font-size:.78rem;font-weight:700;display:flex}.js-question-retry-inline button{color:#fff;border-radius:var(--radius-pill);background:#b91c1c;flex:none;min-height:32px;padding:6px 10px;font-size:.72rem;font-weight:800}.js-question-retry-inline button:disabled{cursor:wait;opacity:.65}.js-level-switcher{border-bottom:1px solid var(--js-border);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding-bottom:12px;display:flex}.js-level-label{color:var(--js-text-muted);text-transform:uppercase;letter-spacing:.04em;font-size:.74rem;font-weight:700}.js-level-buttons{border-radius:var(--radius-pill);background:#f4f1e8;gap:4px;padding:3px;display:flex}.js-btn-level{border-radius:var(--radius-pill);color:var(--js-text-muted);white-space:nowrap;justify-content:center;align-items:center;gap:3px;padding:4px 8px;font-size:.72rem;font-weight:700;transition:background-color .15s,color .15s,box-shadow .15s;display:inline-flex}.js-btn-level.active{color:var(--js-dark);background:#fff;box-shadow:0 2px 6px #00000014}.js-btn-level.locked{color:#8a6a16;background:#fff9e5;box-shadow:inset 0 0 0 1px #e7c459}.js-level-lock{color:#4c3400;background:#f4cf58;border:1px solid #c99c1d;border-radius:50%;flex:0 0 18px;justify-content:center;align-items:center;width:18px;height:18px;display:inline-flex}.js-pro-access{background:#fff7d5;border-top:1px solid #f5dd7a;border-bottom:1px solid #f5dd7a;justify-content:space-between;align-items:center;gap:12px;margin:-4px -18px 0;padding:10px 18px;display:flex}.js-pro-access-copy{color:#7a5b10;align-items:center;gap:6px;font-size:.78rem;font-weight:600;display:flex}.js-btn-pro-access{border-radius:var(--radius-pill);background:var(--js-dark);color:#fff;flex:none;min-height:34px;padding:7px 10px;font-size:.72rem;font-weight:800;transition:background-color .15s,transform .15s}.js-btn-pro-access:hover{background:#2a2a2a;transform:translateY(-1px)}.js-sublevel-switcher{border-bottom:none;padding-top:2px}.js-card-header{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.js-card-titles{flex-direction:column;gap:2px;display:flex}.js-exercise-title{color:var(--js-dark);letter-spacing:-.02em;font-size:1.25rem;font-weight:800}.js-exercise-subtitle{color:var(--js-text-muted);font-size:.8rem;font-weight:500}.js-btn-help-circle{color:var(--js-text-muted);border-radius:var(--radius-pill);padding:4px;transition:all .15s}.js-btn-help-circle:hover{color:var(--js-dark);background:var(--js-yellow-light)}.js-audio-row{align-items:center;gap:10px;display:flex}.js-btn-listen-primary{background:var(--js-yellow);color:var(--js-dark);border-radius:var(--radius-pill);flex:1;justify-content:center;align-items:center;gap:8px;padding:12px 20px;font-size:.95rem;font-weight:800;transition:all .15s;display:flex;box-shadow:0 6px 18px #ffd12f73}.js-btn-listen-primary:hover:not(:disabled){background:var(--js-yellow-hover);transform:translateY(-1px)}.js-btn-listen-primary.playing{background:#fed7aa}.js-btn-cadence-secondary{color:var(--js-dark);border-radius:var(--radius-pill);background:#f4f1e8;align-items:center;gap:6px;padding:12px 16px;font-size:.82rem;font-weight:700;transition:all .15s;display:flex}.js-btn-cadence-secondary:hover:not(:disabled){background:var(--js-yellow-light)}.js-options-grid{grid-template-columns:repeat(2,1fr);align-items:stretch;gap:10px;display:grid}.js-option-button{text-align:center;border-radius:var(--radius-md);cursor:pointer;background:#fff;border:1.5px solid #00000014;outline:none;flex-direction:column;justify-content:center;align-items:center;gap:3px;height:100%;min-height:64px;padding:12px 10px;transition:all .16s cubic-bezier(.16,1,.3,1);display:flex;position:relative;box-shadow:0 2px 5px #15151508}.js-option-button:hover:not(:disabled){border-color:var(--js-yellow-hover);background:#fffdf5;transform:translateY(-1.5px);box-shadow:0 4px 14px #f0ba0026}.js-option-button:active:not(:disabled){transform:scale(.98)}.js-option-title{font-family:var(--font-main);color:var(--js-dark);letter-spacing:-.01em;font-size:.95rem;font-weight:700;line-height:1.25;transition:color .15s}.js-options-grid[data-category=degrees] .js-option-title{letter-spacing:.02em;font-size:1.2rem;font-weight:800}.js-option-sublabel,.js-option-badge{font-family:var(--font-main);color:#78716c;white-space:normal;word-break:break-word;max-width:100%;font-size:.72rem;font-weight:500;line-height:1.2;transition:color .15s;box-shadow:none!important;background:0 0!important;border:none!important;border-radius:0!important;padding:0!important}.js-option-button:hover:not(:disabled) .js-option-sublabel,.js-option-button:hover:not(:disabled) .js-option-badge{color:#151515}.js-option-button.correct{background:var(--color-success-bg)!important;border-color:var(--color-success)!important;box-shadow:0 0 0 1px var(--color-success), 0 4px 16px #10b98133!important}.js-option-button.correct .js-option-title{color:var(--color-success)!important}.js-option-button.correct .js-option-sublabel,.js-option-button.correct .js-option-badge{font-weight:600;color:#047857!important}.js-option-button.wrong{background:var(--color-danger-bg)!important;border-color:var(--color-danger)!important;box-shadow:0 0 0 1px var(--color-danger), 0 4px 16px #ef44442e!important}.js-option-button.wrong .js-option-title{color:var(--color-danger)!important}.js-option-button.wrong .js-option-sublabel,.js-option-button.wrong .js-option-badge{font-weight:600;color:#b91c1c!important}.js-option-button.dimmed{opacity:.35;filter:grayscale(.5);transform:none!important}.js-result-container{flex-direction:column;gap:10px;width:100%;display:flex}.js-victory-card{border-radius:var(--radius-md);background:linear-gradient(135deg,#fffbeb 0%,#fef3c7 100%);border:1.5px solid #f59e0b;flex-direction:column;gap:6px;width:100%;padding:14px 16px;animation:.35s cubic-bezier(.175,.885,.32,1.275) victory-pop;display:flex;box-shadow:0 6px 20px #f59e0b33}@keyframes victory-pop{0%{opacity:0;transform:scale(.96)translateY(4px)}to{opacity:1;transform:scale(1)translateY(0)}}.js-victory-badge{font-family:var(--font-main);color:#92400e;align-items:center;gap:6px;font-size:.92rem;font-weight:800;display:flex}.js-victory-text{color:#78350f;margin:0;font-size:.8rem;line-height:1.35}.js-btn-victory-upgrade{color:#ffca1c;font-family:var(--font-main);cursor:pointer;background:#151515;border:none;border-radius:9999px;align-self:flex-start;align-items:center;gap:6px;margin-top:4px;padding:8px 16px;font-size:.8rem;font-weight:800;transition:all .15s;display:inline-flex;box-shadow:0 2px 8px #0000002e}.js-btn-victory-upgrade:hover{background:#000;transform:translateY(-1px);box-shadow:0 4px 14px #00000047}.js-result-card{border:1px solid var(--js-border);border-radius:var(--radius-md);background:#fbf9f1;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;animation:.2s ease-out slide-up;display:flex}@keyframes slide-up{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.js-result-info{flex-direction:column;flex:1;gap:2px;display:flex}.js-result-status{align-items:center;gap:6px;font-size:.9rem;font-weight:800;display:flex}.js-result-status.correct{color:var(--color-success)}.js-result-status.wrong{color:var(--color-danger)}.js-result-explanation{color:var(--js-text-muted);font-size:.78rem}.js-answer-error{color:var(--color-danger);text-align:center;font-size:.78rem;font-weight:600}.js-btn-next{background:var(--js-dark);color:#fff;border-radius:var(--radius-pill);align-items:center;gap:6px;padding:10px 18px;font-size:.88rem;font-weight:700;transition:all .15s;display:flex;box-shadow:0 4px 12px #00000026}.js-btn-next:hover{background:#2a2a2a}@media (width<=420px){.js-pro-access{flex-direction:column;align-items:flex-start}.js-btn-pro-access{width:100%}}.js-piano-wrap{border:1px solid var(--js-border);border-radius:var(--radius-lg);box-shadow:var(--js-shadow);background:#fff;flex-direction:column;gap:8px;min-width:0;padding:12px 14px 16px;display:flex;overflow:hidden}.js-piano-header{text-transform:uppercase;color:var(--js-text-muted);letter-spacing:.05em;justify-content:space-between;align-items:center;font-size:.7rem;font-weight:700;display:flex}.js-piano-revealed-hint{color:var(--color-success);text-transform:none;letter-spacing:0;background:var(--color-success-bg);border-radius:var(--radius-pill);padding:2px 8px;font-size:.68rem;font-weight:700}.js-piano-keyboard{-webkit-user-select:none;user-select:none;background:#fff;border:1px solid #cbd5e1;border-radius:0 0 6px 6px;width:100%;height:115px;display:flex;position:relative;overflow:hidden}.js-white-key-slot{flex:1;min-width:0;height:100%;display:flex;position:relative}.js-key.white{color:#475569;z-index:1;background:#fff;border:none;border-right:1px solid #cbd5e1;border-radius:0 0 5px 5px;justify-content:center;align-items:flex-end;width:100%;height:100%;padding-bottom:6px;transition:background-color 80ms,transform 80ms;display:flex;box-shadow:inset 0 -3px #e2e8f0}.js-white-key-slot:last-child .js-key.white{border-right:none}.js-key.white:hover{background:#f8fafc}.js-key.white:active,.js-key.white.active{color:var(--js-dark);box-shadow:inset 0 -1px 0 var(--js-yellow-hover), 0 0 10px #ffd12f99;transform:translateY(2px);background:var(--js-yellow)!important}.js-key.white.revealed{border-color:#86efac;font-weight:800;box-shadow:inset 0 -3px #86efac,0 0 10px #22c55e73;color:#15803d!important;background:#dcfce7!important}.js-key.black{color:#94a3b8;z-index:5;background:#1e293b;border-radius:0 0 4px 4px;width:18px;height:62%;transition:background-color 80ms,transform 80ms;position:absolute;top:0;right:-9px;box-shadow:inset 0 -2px #334155,0 3px 6px #00000073}.js-key.black:hover{background:#334155}.js-key.black:active,.js-key.black.active{transform:translateY(2px);box-shadow:0 0 12px #f59e0bd9;background:#f59e0b!important}.js-key.black.revealed{box-shadow:0 0 14px #16a34ad9;background:#16a34a!important}.js-key-label{pointer-events:none;font-size:.6rem;font-weight:700;font-family:var(--font-mono)}.js-piano-footer{justify-content:flex-end;align-items:center;padding-top:6px;display:flex}.js-status-pill{border-radius:var(--radius-pill);align-items:center;gap:5px;padding:3px 9px;font-size:.68rem;font-weight:600;transition:all .2s;display:inline-flex}.js-status-pill.loading{background:var(--js-yellow-light);color:#92400e;border:1px solid #f59e0b4d}.js-status-pill.ready{background:var(--color-success-bg);color:#15803d;border:1px solid #22c55e40}.js-mobile-footer{text-align:center;color:var(--js-text-muted);border-top:1px solid var(--js-border);padding:12px;font-size:.72rem}.js-modal-backdrop{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:100;background:#00000080;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.js-modal-container{border:1px solid var(--js-border);background:#fff;border-radius:28px;flex-direction:column;width:100%;max-width:440px;max-height:82vh;display:flex;overflow:hidden;box-shadow:0 24px 60px #00000026}.js-modal-header{border-bottom:1px solid var(--js-border);justify-content:space-between;align-items:center;padding:16px 18px;display:flex}.js-modal-title-row{align-items:center;gap:10px;display:flex}.js-modal-icon-badge{background:var(--js-yellow);color:var(--js-dark);border-radius:10px;justify-content:center;align-items:center;padding:6px;display:flex}.js-modal-title{color:var(--js-dark);font-size:1.05rem;font-weight:800}.js-modal-subtitle{color:var(--js-text-muted);font-size:.72rem}.js-btn-modal-close{color:var(--js-text-muted);border-radius:var(--radius-pill);padding:6px;transition:all .15s}.js-btn-modal-close:hover{color:var(--js-dark);background:#f1ede2}.js-modal-body{flex-direction:column;gap:14px;padding:16px 18px;display:flex;overflow-y:auto}.js-guide-box{border-radius:var(--radius-md);background:#fff8de;border:1px solid #ffd12f66;flex-direction:column;gap:4px;padding:12px 14px;display:flex}.js-guide-box-header{color:#92400e;align-items:center;gap:6px;font-size:.8rem;font-weight:800;display:flex}.js-guide-box-text{color:#78350f;font-size:.82rem;line-height:1.45}.js-guide-tips-box{flex-direction:column;gap:6px;display:flex}.js-tips-heading{color:var(--js-dark);font-size:.82rem;font-weight:700}.js-tips-list{flex-direction:column;gap:4px;padding-left:18px;display:flex}.js-tips-list li{color:#475569;font-size:.78rem;list-style:outside}.js-guide-table-box{flex-direction:column;gap:6px;display:flex}.js-table-heading-row{color:var(--js-dark);align-items:center;gap:6px;font-size:.82rem;font-weight:700;display:flex}.js-table-scroll{border:1px solid var(--js-border);border-radius:var(--radius-sm);overflow-x:auto}.js-theory-table{border-collapse:collapse;width:100%;font-size:.76rem}.js-theory-table th,.js-theory-table td{border-bottom:1px solid var(--js-border);text-align:left;padding:8px 10px}.js-theory-table th{color:var(--js-text-muted);background:#f8fafc;font-weight:700}.js-col-primary{color:#0284c7;font-weight:700}