@import "https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap";:root{--bg-color:#0d0e15;--panel-bg:#1a1b26;--text-primary:#e0e2f4;--accent-blue:#00f0ff;--accent-pink:#f05;--accent-green:#39ff14;--accent-purple:#a855f7;--key-white:#fff;--key-black:#111;--shadow-color:#00000080}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-primary);min-height:100vh;margin:0;padding:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;overflow:hidden auto}#root{flex-direction:column;align-items:center;width:100%;min-height:100vh;padding:2rem 0;display:flex}header{text-align:center;margin-bottom:.5rem}h1{letter-spacing:2px;text-transform:uppercase;color:#fff;text-shadow:0 0 10px var(--accent-blue), 0 0 20px var(--accent-blue);margin-bottom:.5rem;font-size:3rem}.stats-container{justify-content:center;gap:2rem;margin-bottom:1rem;display:flex}.stat-box{background:var(--panel-bg);box-shadow:0 4px 15px var(--shadow-color);text-align:center;border:1px solid #ffffff1a;border-radius:12px;padding:1rem 2rem}.stat-label{color:#888;text-transform:uppercase;letter-spacing:1px;font-size:.9rem}.stat-value{color:var(--accent-pink);text-shadow:0 0 10px var(--accent-pink);font-size:2rem;font-weight:700}.streak-value{color:var(--accent-green);text-shadow:0 0 10px var(--accent-green)}.quest-display{justify-content:center;align-items:center;height:2.5rem;margin-bottom:2rem;font-size:1.5rem;display:flex}.quest-note{color:var(--accent-blue);text-shadow:0 0 10px var(--accent-blue);margin:0 .5rem;font-size:2rem;font-weight:700}.scale-quest-layout{flex-direction:column;justify-content:center;align-items:center;gap:2rem;width:100%;max-width:100%;padding:0 1rem;display:flex}.piano-container{background:var(--panel-bg);border-radius:20px;justify-content:center;margin:0 auto;padding:2rem;display:flex;position:relative;box-shadow:0 20px 50px #000c,inset 0 2px 5px #ffffff1a}.keyboard{justify-content:center;display:flex;position:relative}.key{-webkit-user-select:none;user-select:none;cursor:pointer;justify-content:center;align-items:flex-end;padding-bottom:1rem;font-weight:700;transition:all .1s;display:flex;position:relative}.key.white{background:var(--key-white);color:#555;z-index:1;border:1px solid #ccc;border-radius:4px 4px 8px 8px;width:55px;height:250px;box-shadow:0 5px 10px #0000004d}.key.black{background:var(--key-black);color:#ccc;z-index:2;border-radius:4px 4px 8px 8px;width:36px;height:160px;margin-left:-18px;margin-right:-18px;box-shadow:0 3px 5px #00000080}.key.white:active,.key.white.active{z-index:1;background:#f0f0f0;height:98%;box-shadow:0 2px 5px #0000004d}.key.black:active,.key.black.active{box-shadow:0 1px 3px #00000080}.key.correct{height:98%;box-shadow:0 0 30px var(--accent-green), inset 0 0 20px var(--accent-green)!important;background:#e6ffe6!important}.key.black.correct{height:100%;background:#030!important}@media (width<=1300px){.key.white{width:44px;height:200px}.key.black{width:28px;height:128px;margin-left:-14px;margin-right:-14px}.piano-container{max-width:100%;padding:1.5rem}}@media (width<=1100px){.key.white{width:38px;height:175px}.key.black{width:24px;height:110px;margin-left:-12px;margin-right:-12px}.piano-container{max-width:100%;padding:1rem}}@media (width<=950px){.key.white{width:32px;height:145px}.key.black{width:20px;height:95px;margin-left:-10px;margin-right:-10px}}@media (width<=768px){.key.white{width:24px;height:110px}.key.black{width:14px;height:75px;margin-left:-7px;margin-right:-7px}.piano-container{max-width:100%;padding:.5rem}}.key.white.active.glow-blue{box-shadow:0 0 20px var(--accent-blue), inset 0 0 15px var(--accent-blue);background:#e6ffff}.key.black.active.glow-blue{box-shadow:0 0 20px var(--accent-blue), inset 0 0 15px var(--accent-blue);background:#033}.key.correct{height:245px;transform:translateY(5px);box-shadow:0 0 30px var(--accent-green), inset 0 0 20px var(--accent-green)!important;background:#e6ffe6!important}.key.black.correct{height:160px;transform:translateY(3px);background:#030!important}.key.target-chord-key{color:#fff!important;background:#00f!important;box-shadow:0 0 35px #05f,inset 0 0 20px #05f!important}.key.black.target-chord-key{color:#fff!important;background:#005!important;box-shadow:0 0 35px #05f,inset 0 0 20px #05f!important}@keyframes pulse-glow{0%{box-shadow:0 0 5px var(--accent-blue), inset 0 0 5px var(--accent-blue)}50%{box-shadow:0 0 25px var(--accent-blue), inset 0 0 15px var(--accent-blue)}to{box-shadow:0 0 5px var(--accent-blue), inset 0 0 5px var(--accent-blue)}}.key.pulse-hint{border-color:var(--accent-blue);animation:1s infinite alternate pulse-glow}@keyframes pulse-glow-bass{0%{box-shadow:0 0 5px var(--accent-green), inset 0 0 5px var(--accent-green)}50%{box-shadow:0 0 35px var(--accent-green), inset 0 0 25px var(--accent-green)}to{box-shadow:0 0 5px var(--accent-green), inset 0 0 5px var(--accent-green)}}.key.pulse-hint-bass{border-color:var(--accent-green);animation:1s infinite alternate pulse-glow-bass}.timing-feedback{text-transform:uppercase;letter-spacing:2px;font-size:1.5rem;font-weight:700;animation:.3s cubic-bezier(.175,.885,.32,1.275) forwards pop-in}.timing-perfect{color:var(--accent-green);text-shadow:0 0 10px var(--accent-green)}.timing-bad{color:var(--accent-pink);text-shadow:0 0 10px var(--accent-pink)}@keyframes pop-in{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes shake{0%{transform:translate(0)}25%{box-shadow:0 0 20px var(--accent-pink);background:#fee;transform:translate(-5px)rotate(-2deg)}50%{box-shadow:0 0 25px var(--accent-pink);background:#fdd;transform:translate(5px)rotate(2deg)}75%{box-shadow:0 0 20px var(--accent-pink);background:#fee;transform:translate(-5px)rotate(-2deg)}to{transform:translate(0)}}@keyframes shake-black{0%{transform:translate(0)}25%{box-shadow:0 0 20px var(--accent-pink);background:#300;transform:translate(-3px)rotate(-1deg)}50%{box-shadow:0 0 25px var(--accent-pink);background:#200;transform:translate(3px)rotate(1deg)}75%{box-shadow:0 0 20px var(--accent-pink);background:#300;transform:translate(-3px)rotate(-1deg)}to{transform:translate(0)}}.key.shake{animation:.4s cubic-bezier(.36,.07,.19,.97) both shake}.key.black.shake{animation:.4s cubic-bezier(.36,.07,.19,.97) both shake-black}.midi-status{z-index:100;border-radius:20px;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.8rem;font-weight:700;display:flex;position:absolute;top:1rem;right:1rem}.status-dot{background:var(--accent-pink);width:10px;height:10px;box-shadow:0 0 5px var(--accent-pink);border-radius:50%}.midi-status.connected .status-dot{background:var(--accent-green);box-shadow:0 0 5px var(--accent-green)}.fireworks-container{pointer-events:none;z-index:999;width:100vw;height:100vh;position:fixed;top:0;left:0}.firework-center{position:absolute;top:50%;left:50%}.particle{opacity:1;border-radius:50%;width:6px;height:6px;animation:1s ease-out forwards blast;position:absolute;transform:translate(0)scale(1)}@keyframes blast{0%{opacity:1;transform:translate(0)scale(1)}80%{opacity:.8}to{transform:translate(var(--tx), var(--ty)) scale(.1);opacity:0}}.grand-staff-container{box-sizing:border-box;background:#fdfdf0;border:1px solid #333;border-radius:10px;justify-content:center;width:100%;max-width:800px;margin:1rem auto;padding:1rem;display:flex}.hero-title{color:#fff;text-transform:uppercase;cursor:pointer;text-shadow:0 0 7px #fff,0 0 10px #fff,0 0 21px #fff,0 0 42px #00f2ff,0 0 82px #00f2ff,0 0 92px #00f2ff;font-family:Orbitron,sans-serif;font-size:4rem;font-weight:700;transition:all .2s}.hero-title:hover{color:#f0f;text-shadow:2px 0 #00f2ff,-2px 0 #f0f;animation:.3s cubic-bezier(.25,.46,.45,.94) infinite both glitch}@keyframes glitch{0%{transform:translate(0)}20%{transform:translate(-3px,3px)}40%{transform:translate(-3px,-3px)}60%{transform:translate(3px,3px)}80%{transform:translate(3px,-3px)}to{transform:translate(0)}}