*{box-sizing:border-box;margin:0;padding:0}body{background:#0c0b10;color:#f0ece6;font-family:"Instrument Serif",Georgia,serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}button{font-family:inherit;outline:none}button:focus-visible{outline:2px solid #a78bfa;outline-offset:2px}.screen-enter{animation:screenIn .4s cubic-bezier(.16,1,.3,1) forwards}@keyframes screenIn{0%{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInFast{0%{opacity:0}to{opacity:1}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes ringPulse{0%{transform:scale(1);opacity:.4}to{transform:scale(1.6);opacity:0}}@keyframes scoreFloat{0%{opacity:1;transform:translateY(0) scale(1)}50%{opacity:1;transform:translateY(-30px) scale(1.1)}to{opacity:0;transform:translateY(-60px) scale(.9)}}@keyframes correctBounce{0%{transform:scale(1)}30%{transform:scale(1.08)}60%{transform:scale(.97)}to{transform:scale(1.03)}}@keyframes wrongShake{0%,to{transform:translate(0)}15%{transform:translate(-6px)}30%{transform:translate(6px)}45%{transform:translate(-4px)}60%{transform:translate(4px)}75%{transform:translate(-2px)}90%{transform:translate(2px)}}@keyframes streakGlow{0%,to{text-shadow:0 0 8px rgba(250,204,21,.3)}50%{text-shadow:0 0 20px rgba(250,204,21,.6),0 0 40px rgba(250,204,21,.2)}}@keyframes fireFlicker{0%,to{transform:scale(1) rotate(-2deg)}25%{transform:scale(1.1) rotate(1deg)}50%{transform:scale(.95) rotate(-1deg)}75%{transform:scale(1.05) rotate(2deg)}}@keyframes multiplierPop{0%{transform:scale(0);opacity:0}50%{transform:scale(1.3)}to{transform:scale(1);opacity:1}}@keyframes confettiFall{0%{transform:translateY(-10px) rotate(0);opacity:1}to{transform:translateY(100vh) rotate(720deg);opacity:0}}@keyframes gradeReveal{0%{opacity:0;transform:scale(.3)}50%{transform:scale(1.15)}to{opacity:1;transform:scale(1)}}@keyframes statCount{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes dotAppear{0%{transform:scale(0)}to{transform:scale(1)}}.hover-lift{transition:transform .2s ease,box-shadow .2s ease}.hover-lift:hover{transform:translateY(-3px);box-shadow:0 8px 24px #0003}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#a78bfa33;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#a78bfa66}input,select,textarea{font-size:16px}.screen-enter{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);padding-bottom:env(safe-area-inset-bottom,0px)}@media(hover:none)and (pointer:coarse){button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}}@media(max-width:480px){.game-topbar{gap:8px!important;padding:0 4px!important}.game-topbar .score-panel{padding:6px 10px!important;gap:12px!important}.game-topbar .score-value{font-size:16px!important}.game-topbar .score-label{font-size:8px!important}.game-topbar .topbar-btn{padding:6px 8px!important;font-size:10px!important}.piano-container{transform:scale(.72);transform-origin:top center;margin-bottom:-40px}.answer-grid{gap:8px!important;max-width:100%!important;grid-template-columns:repeat(2,1fr)!important}.answer-btn{padding:12px 4px!important;min-height:52px}.warmup-grid{grid-template-columns:repeat(2,1fr)!important;max-width:100%!important}.mode-cards{grid-template-columns:1fr!important;padding:0 8px}.progress-dots{max-width:280px!important}.play-btn{width:84px!important;height:84px!important}}@media(max-width:375px){.piano-container{transform:scale(.6);margin-bottom:-60px}.game-topbar .score-panel{padding:4px 8px!important;gap:8px!important}.play-btn{width:72px!important;height:72px!important}}@media(min-width:481px)and (max-width:768px){.answer-grid{grid-template-columns:repeat(3,1fr)!important}}@media(hover:none)and (pointer:coarse){.keyboard-hint,.key-number{display:none!important}}