*{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%,920px);min-width:320px;height:clamp(180px,34vw,280px);margin:0 auto;position:relative}.piano-key{cursor:pointer;border:none;transition:transform .18s,box-shadow .22s,border-color .22s,background .22s;position:relative}.piano-key:focus-visible{outline-offset:2px;outline:2px solid #e8894a}.piano-key:active{transform:translateY(1px)scale(.99)}.piano-key--white{z-index:1;background:linear-gradient(#f8fafc 0%,#e2e8f0 100%);border:1px solid #cbd5e1;border-radius:0 0 12px 12px;width:14.2857%;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;width:7.14286%;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{z-index:5;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{z-index:5;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-label{pointer-events:none;font-weight:700;position:absolute;left:50%;transform:translate(-50%)}.piano-key--white .piano-key-label{color:#0f172a;font-size:clamp(14px,2.2vw,22px);bottom:16px}.piano-key--black .piano-key-label{color:#e2e8f0;text-align:center;font-size:clamp(10px,1.6vw,13px);line-height:1.15;bottom:10px}.piano-key-badge{letter-spacing:.08em;text-transform:uppercase;pointer-events:none;border-radius:999px;padding:3px 7px;font-size:9px;font-weight:700;position:absolute;top:10px;left:50%;transform:translate(-50%)}.piano-key-badge--root{color:#e8894a;background:#e8894a26;border:1px solid #e8894a59}.piano-key-badge--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}@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}.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:280px;height:clamp(160px,48vw,220px)}.piano-key--white .piano-key-label{bottom:12px}.piano-key-badge{padding:2px 6px;font-size:8px;top:8px}}