*{box-sizing:border-box}body{background:#111;margin:0}#root{min-height:100vh}.glass-card{-webkit-backdrop-filter:blur(16px);background:#121820b8;border:1px solid #2a3544d9;border-radius:16px;box-shadow:0 8px 32px #00000059,inset 0 1px #ffffff0d}.interval-fade{animation:.28s intervalFade}@keyframes intervalFade{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.piano-shell{-webkit-overflow-scrolling:touch;padding:8px 4px 4px;overflow-x:auto}.piano-keyboard{width:min(100%,960px);min-width:480px;height:clamp(180px,34vw,280px);margin:0 auto;transition:box-shadow .22s;position:relative}.piano-keyboard--setting-root{border-radius:12px;box-shadow:0 0 0 2px #e8894a99,0 0 28px #e8894a40}.piano-key{border:none;transition:box-shadow .22s,border-color .22s,background .22s;position:relative}.piano-key--out-of-range{cursor:not-allowed;opacity:.38}.piano-key--white.piano-key--out-of-range:hover,.piano-key--black.piano-key--out-of-range:hover{box-shadow:none}.piano-key--white{z-index:1;background:linear-gradient(#f8fafc 0%,#e2e8f0 100%);border:1px solid #cbd5e1;border-radius:0 0 12px 12px;height:100%;position:absolute;bottom:0;box-shadow:inset 0 -10px 18px #0f172a14}.piano-key--white:hover{box-shadow:0 0 18px #e8894a38,inset 0 -10px 18px #0f172a14}.piano-key--black{z-index:2;background:linear-gradient(#334155 0%,#0f172a 100%);border:1px solid #1e293b;border-radius:0 0 8px 8px;height:62%;position:absolute;top:0;box-shadow:0 10px 18px #00000073,inset 0 -4px 8px #ffffff0f}.piano-key--black:hover{box-shadow:0 0 20px #e8894a47,0 10px 18px #00000073,inset 0 -4px 8px #ffffff0f}.piano-key--root.piano-key--white,.piano-key--root.piano-key--black{border-color:#e8894a;box-shadow:0 0 24px #e8894a73,inset 0 -10px 18px #0f172a1a}.piano-key--target.piano-key--white,.piano-key--target.piano-key--black{border-color:#34d399;box-shadow:0 0 24px #34d39973,inset 0 -10px 18px #0f172a1a}.piano-key--root.piano-key--target{border-color:#e8894a;box-shadow:0 0 24px #e8894a73,inset 0 -10px 18px #0f172a1a}.piano-key-sublabels{pointer-events:none;flex-direction:column;align-items:center;display:flex;position:absolute;left:0;right:0}.piano-key--white .piano-key-sublabels{gap:1px;bottom:10px}.piano-key--black .piano-key-sublabels{gap:0;bottom:8px}.piano-key-sublabel{pointer-events:auto;appearance:none;cursor:pointer;background:0 0;border:none;border-radius:6px;padding:2px 6px;font-weight:700;line-height:1.15;transition:color .18s,background .18s,transform .12s}.piano-key--white .piano-key-sublabel{color:#0f172a;font-size:clamp(13px,2vw,20px)}.piano-key--black .piano-key-sublabel{color:#e2e8f0;text-align:center;font-size:clamp(9px,1.4vw,12px)}.piano-key-sublabel--secondary{opacity:.68;font-size:.82em}.piano-key-sublabel:hover:not(:disabled){color:#e8894a;opacity:1;background:#e8894a24}.piano-key-sublabel:focus-visible{outline-offset:1px;outline:2px solid #e8894a}.piano-key-sublabel:active:not(:disabled){transform:scale(.94)}.piano-key-sublabel:disabled{cursor:not-allowed}.piano-key-sublabel--root{color:#e8894a;opacity:1;background:#e8894a33}.piano-key-sublabel--target{color:#34d399;opacity:1;background:#34d39933}.piano-key-sublabel--root.piano-key-sublabel--target{color:#e8894a;background:linear-gradient(90deg,#e8894a3d,#34d3993d)}.piano-key-callouts{width:min(100%,960px);height:20px;margin:0 auto;transition:height .15s;position:relative}.piano-key-callouts--stacked{height:46px}.piano-key-callout{letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;pointer-events:none;border-radius:999px;padding:3px 9px;font-size:10px;font-weight:700;position:absolute;top:0;transform:translate(-50%)}.piano-key-callout--second-row{top:24px}.piano-key-callout--root{color:#e8894a;background:#e8894a26;border:1px solid #e8894a59}.piano-key-callout--target{color:#34d399;background:#34d39926;border:1px solid #34d39959}.piano-key--playing.piano-key--white,.piano-key--playing.piano-key--black{animation:.55s ease-in-out infinite keyPulse}@keyframes keyPulse{0%,to{filter:brightness()}50%{filter:brightness(1.18)}}.transport-bar{flex-wrap:wrap;align-items:center;gap:12px;margin-top:20px;display:flex}.transport-button{color:#e8edf4;letter-spacing:.04em;cursor:pointer;background:#e8894a1f;border:1px solid #e8894a73;border-radius:999px;padding:10px 18px;font-size:14px;font-weight:700;transition:transform .18s,box-shadow .22s,background .22s,border-color .22s}.transport-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 0 20px #e8894a47}.transport-button:disabled{opacity:.45;cursor:not-allowed}.transport-button--secondary{background:#34d3991f;border-color:#34d39973}.transport-button--secondary:hover:not(:disabled){box-shadow:0 0 20px #34d39947}.transport-button--emphasis{box-shadow:0 0 18px #e8894a2e}.transport-button--emphasis.transport-button--secondary{box-shadow:0 0 18px #34d3992e}.revealed-answer-card{background:#34d39914;border:1px solid #34d39959;border-radius:12px;margin-top:14px;padding:14px 16px}.transport-button--active{animation:.8s ease-in-out infinite transportPulse}.transport-button--root-arm.transport-button--armed{color:#111;background:#e8894a;border-color:#e8894a;box-shadow:0 0 20px #e8894a73}@keyframes transportPulse{0%,to{box-shadow:0 0 #e8894a00}50%{box-shadow:0 0 18px #e8894a59}}.transport-status{letter-spacing:.08em;text-transform:uppercase;color:#8b9aad;margin-left:auto;font-size:12px;font-weight:600}.transport-status--ready{color:#e8894a}.mode-toggle{flex-wrap:wrap;gap:8px;display:inline-flex}.mode-toggle-button{color:#8b9aad;letter-spacing:.02em;cursor:pointer;background:#1a222db8;border:1px solid #2a3544d9;border-radius:999px;padding:12px 24px;font-size:15px;font-weight:700;transition:transform .18s,box-shadow .22s,background .22s,border-color .22s,color .22s}.mode-toggle-button:hover{color:#e8edf4;border-color:#e8894a73}.mode-toggle-button--active{color:#e8894a;background:#e8894a26;border-color:#e8894a;box-shadow:0 0 20px #e8894a40}.compact-select{appearance:none;color:#e8edf4;cursor:pointer;background:#1a222de6;border:1px solid #2a3544d9;border-radius:8px;outline:none;padding:8px 12px;font-size:13px;font-weight:600}.ear-training-panel{gap:20px;display:grid}.ear-training-stats{flex-wrap:wrap;gap:16px;display:flex}.ear-training-stat{background:#1a222db8;border:1px solid #2a3544d9;border-radius:12px;min-width:88px;padding:10px 14px}.ear-training-stat strong{color:#e8edf4;font-size:1.35rem}.quiz-feedback{background:#1a222db8;border:1px solid #2a3544d9;border-radius:14px;padding:16px 18px;transition:border-color .22s,box-shadow .22s,background .22s}.quiz-feedback--correct{background:#34d39914;border-color:#34d3998c;animation:.45s feedbackCorrect;box-shadow:0 0 24px #34d3992e}.quiz-feedback--incorrect{background:#f8717114;border-color:#f871718c;animation:.45s feedbackIncorrect;box-shadow:0 0 24px #f871712e}.quiz-feedback-message{letter-spacing:.04em;margin:10px 0 0;font-weight:700}.quiz-feedback-message--correct{color:#34d399}.quiz-feedback-message--incorrect{color:#f87171}.guess-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;display:grid}.guess-button{color:#e8edf4;cursor:pointer;background:#1a222de6;border:1px solid #2a3544d9;border-radius:12px;padding:12px 14px;font-size:14px;font-weight:600;transition:transform .18s,box-shadow .22s,border-color .22s,background .22s}.guess-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 0 16px #e8894a2e}.guess-button:disabled{cursor:not-allowed;opacity:.72}.guess-button--correct{background:#34d39924;border-color:#34d399a6;animation:.45s feedbackCorrect;box-shadow:0 0 18px #34d39938}.guess-button--incorrect{background:#f8717124;border-color:#f87171a6;animation:.45s feedbackIncorrect;box-shadow:0 0 18px #f8717138}.guess-button--flash-incorrect{background:#f8717124;border-color:#f87171a6;animation:.45s guessIncorrectFlash;box-shadow:0 0 18px #f8717138}.guess-button--flash-correct{background:#34d39924;border-color:#34d399a6;animation:.45s guessCorrectFlash;box-shadow:0 0 18px #34d39938}@keyframes guessIncorrectFlash{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}@keyframes guessCorrectFlash{0%{transform:scale(.98)}to{transform:scale(1)}}@keyframes feedbackCorrect{0%{transform:scale(.98)}to{transform:scale(1)}}@keyframes feedbackIncorrect{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}@media (width<=720px){.transport-bar{margin-top:16px}.transport-status{width:100%;margin-left:0}.piano-keyboard{min-width:480px;height:clamp(160px,48vw,220px)}.piano-key--white .piano-key-sublabels{bottom:6px}.piano-key-callouts{min-width:480px;height:16px}.piano-key-callouts--stacked{height:36px}.piano-key-callout{padding:2px 6px;font-size:8px}.piano-key-callout--second-row{top:20px}}.intro-unit-nav{flex-wrap:wrap;gap:8px;display:flex}.intro-unit-nav-button{color:#8b9aad;cursor:pointer;text-align:left;background:#1a222db8;border:1px solid #2a3544d9;border-radius:10px;padding:10px 14px;font-size:13px;font-weight:700;transition:border-color .18s,color .18s,background .18s}.intro-unit-nav-button:hover{color:#e8edf4;border-color:#e8894a73}.intro-unit-nav-button--active{color:#e8894a;background:#e8894a26;border-color:#e8894a}.intro-unit-goal{color:#cc2929;font-weight:700}.intro-unit-goal-text{color:#e8edf4;font-style:italic}.intro-h2{color:#e8edf4;margin:28px 0 10px;font-size:19px;font-weight:700}.intro-p{color:#c3ccd8;margin:0 0 14px;font-size:15px;line-height:1.65}.intro-p strong{color:#e8edf4}.intro-bullet-list{gap:8px;margin:0 0 14px;padding-left:22px;display:grid}.intro-bullet-list li{color:#c3ccd8;font-size:15px;line-height:1.55}.intro-bullet-list--sub{margin-top:-2px;padding-left:20px}.intro-callout{color:#f5d9b8;background:#fdebd014;border-left:4px solid #e8894a;border-radius:0 10px 10px 0;margin:10px 0 18px;padding:12px 16px;font-size:14px;font-weight:700}.intro-qa{background:#3b6fa01a;border-left:4px solid #3b6fa0;border-radius:0 10px 10px 0;margin:10px 0 18px;padding:12px 16px}.intro-qa-question{color:#6fa8dc;margin-right:6px;font-weight:700}.intro-qa-answer{color:#c3ccd8;font-style:italic}.intro-numbered-list{gap:8px;margin:0 0 14px;padding-left:24px;display:grid}.intro-numbered-list li{color:#c3ccd8;font-size:15px;line-height:1.55}.intro-table-wrap{margin:10px 0 20px;overflow-x:auto}.intro-table{border-collapse:collapse;width:100%;min-width:480px}.intro-table th{color:#111;text-align:center;background:#e8894a;border:1px solid #2a3544d9;padding:10px 12px;font-size:13px}.intro-table td{text-align:center;color:#e8edf4;border:1px solid #2a3544d9;padding:10px 12px;font-size:13px}.intro-table td span{display:block}.intro-keyboard-card{flex-direction:column;align-items:center;gap:10px;margin:14px 0 22px;display:flex}.intro-keyboard-title{letter-spacing:.04em;color:#8b9aad;text-transform:uppercase;font-size:13px;font-weight:700}.intro-keyboard-card .piano-shell{width:100%}.intro-key--highlighted{cursor:pointer}.intro-key--has-top.piano-key--white{z-index:3}.intro-key-label{pointer-events:none;flex-direction:column;align-items:center;gap:1px;font-size:clamp(11px,1.6vw,15px);font-weight:700;display:flex;position:absolute;bottom:10px;left:0;right:0}.intro-key-label--black{font-size:clamp(9px,1.2vw,12px);bottom:8px}.intro-key-label--dual{white-space:nowrap;font-size:clamp(10px,1.3vw,13px);left:50%;right:auto;transform:translate(-50%)}.intro-key-label-top{opacity:.8;white-space:nowrap;margin-bottom:2px;font-size:10px;position:absolute;bottom:100%;left:50%;transform:translate(-50%)}.intro-keyboard-overlay{width:min(100%,960px);min-width:480px;height:26px;margin:0 auto;position:relative}.intro-keyboard-circle{white-space:nowrap;border:2px solid;border-radius:999px;justify-content:center;align-items:center;height:22px;font-size:11px;font-weight:700;display:flex;position:absolute;top:0}.intro-keyboard-brackets{width:min(100%,960px);min-width:480px;height:24px;margin:4px auto 0;position:relative}.intro-keyboard-bracket{border-bottom:2px solid;justify-content:center;align-items:flex-end;height:10px;display:flex;position:absolute;top:0}.intro-keyboard-bracket span{white-space:nowrap;font-size:11px;font-weight:700;transform:translateY(14px)}.intro-staff-card{margin:14px 0 22px}.intro-staff-title{letter-spacing:.04em;color:#8b9aad;text-transform:uppercase;margin-bottom:8px;font-size:13px;font-weight:700}.intro-staff-rows{flex-direction:column;gap:10px;display:flex}.intro-staff-row{flex-wrap:wrap;gap:14px;display:flex}.intro-staff-stack{flex-direction:column;gap:10px;display:flex}.intro-staff-example{background:#1a222d99;border:1px solid #2a3544d9;border-radius:10px;padding:4px}.intro-staff-svg{cursor:pointer;border-radius:8px;transition:background .18s}.intro-staff-svg:hover{background:#e8894a14}.intro-staff-svg .abcjs-notehead{transition:fill .15s}.intro-staff-svg svg text,.intro-staff-svg svg path{fill:#e8edf4}.intro-staff-svg .abcjs-annotation{fill:#e8edf4!important}.intro-staff-caption{text-align:center;color:#8b9aad;padding-bottom:4px;font-size:12px}.intro-caption{text-align:center;color:#8b9aad;margin:4px 0 0;font-size:13px}.intro-caption--hint{opacity:.7;font-size:11px;font-style:italic}.intro-spectrum{flex-direction:column;align-items:center;gap:10px;margin:14px 0 22px;display:flex}.intro-spectrum-title{letter-spacing:.04em;color:#8b9aad;text-transform:uppercase;font-size:13px;font-weight:700}.intro-spectrum-row{align-items:center;gap:4px;display:flex}.intro-spectrum-point{border:2px solid;border-radius:10px;flex-direction:column;align-items:center;gap:4px;min-width:86px;padding:10px 6px;display:flex;position:relative}.intro-spectrum-point-label{text-align:center;font-size:12px;font-weight:700}.intro-spectrum-point-sub{opacity:.75;font-size:11px}.intro-spectrum-arrow{color:#f87171;font-size:16px}.intro-spectrum-line{background:#8b9aad80;width:20px;height:2px}.intro-seesaw{flex-direction:column;align-items:center;gap:18px;margin:14px 0 22px;display:flex}.intro-seesaw-row{align-items:flex-end;gap:6px;display:flex}.intro-seesaw-box{background:#e8894a14;border:2px solid #e8894a80;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:2px;min-width:64px;padding:10px 6px;display:flex}.intro-seesaw-box--anchor{background:#34d3991a;border-color:#34d399}.intro-seesaw-box-label{color:#e8edf4;font-size:16px;font-weight:700}.intro-seesaw-box-sub{color:#8b9aad;font-size:10px}.intro-seesaw-fulcrum{flex-direction:column;align-items:center;gap:4px;margin:0 4px;display:flex}.intro-seesaw-fulcrum-triangle{border-bottom:22px solid #e8894a;border-left:14px solid #0000;border-right:14px solid #0000;width:0;height:0}.intro-seesaw-fulcrum-label{color:#e8894a;white-space:nowrap;font-size:11px;font-weight:700}