@import"https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap";:root{--bg-color: #0d0e15;--panel-bg: #1a1b26;--panel-bg-alt: #222222;--modal-bg: var(--panel-bg);--text-primary: #e0e2f4;--text-secondary: #cccccc;--text-muted: #666666;--modal-overlay: rgba(13, 14, 21, .95);--border-color: #333333;--accent-blue: #00f0ff;--accent-pink: #ff0055;--accent-green: #39ff14;--accent-purple: #a855f7;--accent-orange: #ff9500;--key-white: #ffffff;--key-black: #111111;--shadow-color: rgba(0, 0, 0, .5)}[data-theme=light]{--bg-color: #DCE1DE;--panel-bg: #DCE1DE;--panel-bg-alt: rgba(0, 0, 0, .05);--modal-bg: #DCE1DE;--text-primary: #1e293b;--text-secondary: #475569;--text-muted: #94a3b8;--modal-overlay: rgba(255, 255, 255, .85);--border-color: #e2e8f0;--accent-blue: #0284c7;--accent-pink: #ec4899;--accent-green: #10b981;--accent-purple: #8b5cf6;--accent-orange: #f59e0b;--key-white: #ffffff;--key-black: #334155;--shadow-color: rgba(0, 0, 0, .08)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:var(--bg-color);color:var(--text-primary);min-height:100vh;margin:0;padding:0;overflow-y:scroll;overflow-x:hidden}#root{width:100%;display:flex;flex-direction:column;align-items:center;min-height:100vh;padding:calc(env(safe-area-inset-top,0px) + 2rem) 0 2rem}header{text-align:center;margin-bottom:.5rem}h1{font-size:3rem;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}[data-theme=light] h1{color:var(--text-primary);text-shadow:none}.stats-container{display:flex;justify-content:center;gap:2rem;margin-bottom:1rem}.stat-box{background:var(--panel-bg);padding:1rem 2rem;border-radius:12px;border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 15px var(--shadow-color);text-align:center}.stat-label{font-size:.9rem;color:#888;text-transform:uppercase;letter-spacing:1px}.stat-value{font-size:2rem;font-weight:700;color:red;text-shadow:none}.streak-value{color:#22c55e}.quest-display{font-size:1.5rem;margin-bottom:2rem;height:2.5rem;display:flex;align-items:center;justify-content:center}.quest-note{font-weight:700;font-size:2rem;color:var(--accent-blue);margin:0 .5rem}.scale-quest-layout{display:flex;flex-direction:column;gap:2rem;justify-content:center;align-items:center;width:100%;max-width:100%;padding:0 1rem}.piano-container{position:relative;display:flex;justify-content:center;padding:2rem 1rem;background:var(--panel-bg);border-radius:20px;box-shadow:0 20px 50px #000c,inset 0 2px 5px #ffffff1a;margin:0 auto;max-width:100%;box-sizing:border-box;overflow:hidden}.keyboard{display:flex;position:relative;justify-content:center;width:100%}.key{position:relative;display:flex;justify-content:center;align-items:flex-end;padding-bottom:1rem;font-weight:700;-webkit-user-select:none;user-select:none;transition:all .1s;cursor:pointer}.key.white{width:28px;height:130px;background:var(--key-white);border:1px solid #ccc;border-radius:4px 4px 8px 8px;color:#555;z-index:1;box-shadow:0 5px 10px #0000004d}.key.black{width:18px;height:85px;background:var(--key-black);border-radius:4px 4px 8px 8px;color:#ccc;z-index:2;margin-left:-9px;margin-right:-9px;box-shadow:0 3px 5px #00000080}.finger-on-key{position:absolute;bottom:8px;font-size:12px;font-weight:700;color:#111;background:#fff9;border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;line-height:1;pointer-events:none;z-index:10}[data-theme=light] .finger-on-key{background:#0000001a;color:#222}.key.black .finger-on-key{bottom:6px;color:#eee;background:#fff3}.key.white:active,.key.white.active{background:#f0f0f0;height:98%;box-shadow:0 2px 5px #0000004d;z-index:1}.key.black:active,.key.black.active{box-shadow:0 1px 3px #00000080}.key.correct{background:#e6ffe6!important;box-shadow:0 0 30px var(--accent-green),inset 0 0 20px var(--accent-green)!important}.key.white.correct{height:98%}.key.black.correct{background:#030!important}@media(max-width:1600px){.key.white{width:24px;height:110px}.key.black{width:16px;height:75px;margin-left:-8px;margin-right:-8px}.piano-container{padding:1.5rem;max-width:100%}}@media(max-width:1300px){.key.white{width:20px;height:90px}.key.black{width:14px;height:60px;margin-left:-7px;margin-right:-7px}.piano-container{padding:1rem;max-width:100%}}@media(max-width:1100px){.key.white{width:16px;height:75px}.key.black{width:10px;height:50px;margin-left:-5px;margin-right:-5px}}@media(max-width:900px){.key.white{width:12px;height:65px}.key.black{width:8px;height:44px;margin-left:-4px;margin-right:-4px}.piano-container{padding:.5rem;overflow-x:auto}}.piano-wrapper{display:flex;flex-direction:column;align-items:center;width:100%}.fingering-hand-toggle-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem;font-size:.82rem}.fingering-hand-label{color:var(--text-secondary, #aaa)}.fingering-hand-toggle{display:flex;border-radius:4px;overflow:hidden;border:1px solid #444}.fingering-hand-toggle button{padding:.2rem .7rem;background:#333;color:#aaa;border:none;cursor:pointer;font-size:.8rem;font-weight:700;transition:background .15s,color .15s}.fingering-hand-toggle button.active{background:var(--accent-blue);color:#fff}.fingering-hand-toggle button.active-lh{background:var(--accent-orange);color:#fff}[data-theme=light] .fingering-hand-toggle{border-color:#ccc}[data-theme=light] .fingering-hand-toggle button{background:#eee;color:#555}[data-theme=light] .fingering-hand-toggle button.active{background:var(--accent-blue);color:#fff}[data-theme=light] .fingering-hand-toggle button.active-lh{background:var(--accent-orange);color:#fff}.fingering-strip{display:flex;justify-content:center;padding:.3rem 0;overflow:hidden}.fingering-cell{display:flex;justify-content:center;align-items:center;flex-shrink:0;height:22px}.fingering-cell.white{width:28px}.fingering-cell.black{width:18px;margin-left:-9px;margin-right:-9px;z-index:2}.fingering-cell span{font-size:11px;font-weight:700;color:#fff;background:#ffffff26;border-radius:50%;width:17px;height:17px;display:flex;align-items:center;justify-content:center;line-height:1}@media(max-width:1600px){.fingering-cell.white{width:24px}.fingering-cell.black{width:16px;margin-left:-8px;margin-right:-8px}}@media(max-width:1300px){.fingering-cell.white{width:20px}.fingering-cell.black{width:14px;margin-left:-7px;margin-right:-7px}}@media(max-width:1100px){.fingering-cell.white{width:16px}.fingering-cell.black{width:10px;margin-left:-5px;margin-right:-5px}.fingering-cell span{width:13px;height:13px;font-size:9px}}@media(max-width:900px){.fingering-cell.white{width:12px}.fingering-cell.black{width:8px;margin-left:-4px;margin-right:-4px}.fingering-cell span{width:10px;height:10px;font-size:7px}}.key.white.active.glow-blue{background:#e6ffff;box-shadow:0 0 20px var(--accent-blue),inset 0 0 15px var(--accent-blue)}.key.black.active.glow-blue{background:#033;box-shadow:0 0 20px var(--accent-blue),inset 0 0 15px var(--accent-blue)}.key.white.active.glow-orange{background:#fff5e6;box-shadow:0 0 20px var(--accent-orange),inset 0 0 15px var(--accent-orange)}.key.black.active.glow-orange{background:#320;box-shadow:0 0 20px var(--accent-orange),inset 0 0 15px var(--accent-orange)}.key.correct{background:#e6ffe6!important;box-shadow:0 0 30px var(--accent-green),inset 0 0 20px var(--accent-green)!important;transform:translateY(5px)}.key.black.correct{background:#030!important;transform:translateY(3px)}.key.target-chord-key{background:#00f!important;box-shadow:0 0 35px #05f,inset 0 0 20px #05f!important;color:#fff!important}.key.black.target-chord-key{background:#005!important;box-shadow:0 0 35px #05f,inset 0 0 20px #05f!important;color:#fff!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{animation:pulse-glow 1s infinite alternate;border-color:var(--accent-blue)}@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{animation:pulse-glow-bass 1s infinite alternate;border-color:var(--accent-green)}.key.pulse-hint-rh{animation:pulse-glow 1s infinite alternate;border-color:var(--accent-blue)}@keyframes pulse-glow-lh{0%{box-shadow:0 0 5px var(--accent-orange),inset 0 0 5px var(--accent-orange)}50%{box-shadow:0 0 25px var(--accent-orange),inset 0 0 15px var(--accent-orange)}to{box-shadow:0 0 5px var(--accent-orange),inset 0 0 5px var(--accent-orange)}}.key.pulse-hint-lh{animation:pulse-glow-lh 1s infinite alternate;border-color:var(--accent-orange)}.finger-on-key.rh{background:#00f0ff40;color:#034}.finger-on-key.lh{background:#ff95004d;color:#3d2200}[data-theme=light] .finger-on-key.rh{background:#0284c733;color:#034}[data-theme=light] .finger-on-key.lh{background:#f59e0b40;color:#3d2200}.timing-feedback{font-size:1.5rem;font-weight:700;text-transform:uppercase;letter-spacing:2px;animation:pop-in .3s cubic-bezier(.175,.885,.32,1.275) forwards}.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%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}@keyframes shake{0%{transform:translate(0)}25%{transform:translate(-5px) rotate(-2deg);background:#fee;box-shadow:0 0 20px var(--accent-pink)}50%{transform:translate(5px) rotate(2deg);background:#fdd;box-shadow:0 0 25px var(--accent-pink)}75%{transform:translate(-5px) rotate(-2deg);background:#fee;box-shadow:0 0 20px var(--accent-pink)}to{transform:translate(0)}}@keyframes shake-black{0%{transform:translate(0)}25%{transform:translate(-3px) rotate(-1deg);background:#300;box-shadow:0 0 20px var(--accent-pink)}50%{transform:translate(3px) rotate(1deg);background:#200;box-shadow:0 0 25px var(--accent-pink)}75%{transform:translate(-3px) rotate(-1deg);background:#300;box-shadow:0 0 20px var(--accent-pink)}to{transform:translate(0)}}.key.shake{animation:shake .4s cubic-bezier(.36,.07,.19,.97) both}.key.black.shake{animation:shake-black .4s cubic-bezier(.36,.07,.19,.97) both}.midi-status{padding:.5rem 1rem;border-radius:20px;font-size:.8rem;font-weight:700;display:flex;align-items:center;gap:.5rem}.status-dot{width:10px;height:10px;border-radius:50%;background:var(--accent-pink);box-shadow:0 0 5px var(--accent-pink)}.midi-status.connected .status-dot{background:var(--accent-green);box-shadow:0 0 5px var(--accent-green)}.fireworks-container{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:999}.firework-center{position:absolute;top:50%;left:50%}.particle{position:absolute;width:6px;height:6px;border-radius:50%;transform:translate(0) scale(1);opacity:1;animation:blast 1s ease-out forwards}@keyframes blast{0%{transform:translate(0) scale(1);opacity:1}80%{opacity:.8}to{transform:translate(var(--tx),var(--ty)) scale(.1);opacity:0}}.grand-staff-container{width:100%;max-width:800px;margin:1rem auto;background:#fdfdf0;border-radius:10px;padding:1rem;box-sizing:border-box;display:flex;justify-content:center;border:1px solid #333}.hero-title{font-family:Orbitron,sans-serif;font-size:4rem;font-weight:700;color:#fff;text-transform:uppercase;transition:all .2s ease}[data-theme=light] .hero-title{text-shadow:none;color:var(--text-primary)}[data-tooltip]{position:relative}[data-tooltip]:before{content:attr(data-tooltip);position:absolute;top:-45px;left:50%;transform:translate(-50%) translateY(10px);background:var(--panel-bg);border:1px solid var(--accent-blue);color:#fff;padding:8px 12px;border-radius:8px;font-size:.85rem;font-weight:400;white-space:nowrap;opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s;pointer-events:none;box-shadow:0 5px 15px #00f0ff33;z-index:9999}[data-tooltip]:hover:before{opacity:1;visibility:visible;transform:translate(-50%) translateY(0)}select[data-tooltip]:before{top:-45px}[data-theme=light] .stat-box{border:1px solid rgba(0,0,0,.1)!important;box-shadow:0 4px 15px #0000000d!important}[data-theme=light] .piano-container{box-shadow:0 20px 50px #00000026,inset 0 2px 5px #0000000d!important;border:1px solid rgba(0,0,0,.05)!important;background:var(--panel-bg)!important}[data-theme=light] .key.white:not(.active):not(:active):not(.pulse-hint):not(.pulse-hint-rh):not(.pulse-hint-lh):not(.pulse-hint-bass):not(.glow-blue):not(.target-chord-key):not(.correct){box-shadow:0 5px 10px #0000001a!important;border-color:#ddd!important}[data-theme=light] .run-results,[data-theme=light] .action-box,[data-theme=light] .inversion-panel select{box-shadow:0 10px 30px #0000000d!important}[data-theme=light] .run-results h2,[data-theme=light] .action-box h2{text-shadow:none!important}[data-theme=light] [data-tooltip]:before{color:var(--text-primary)!important;box-shadow:0 5px 15px #0000001a!important}[data-theme=light] .midi-output-label,[data-theme=light] .virtual-piano-toggle,[data-theme=light] .virtual-piano-toggle.muted{color:#111!important}[data-theme=light] .fingering-cell span{color:#222;background:#00000014}.top-right-nav{position:absolute;top:calc(env(safe-area-inset-top,0px) + 1rem);right:1rem;display:flex;flex-direction:column;align-items:flex-end;gap:.4rem;z-index:100}.top-left-nav{position:absolute;top:calc(env(safe-area-inset-top,0px) + 20px);left:20px;z-index:100;display:flex;flex-direction:column;gap:.5rem;align-items:flex-start}@media(max-width:900px){.hero-title{margin-top:100px;font-size:2.8rem}}@media(max-width:600px){.hero-title{margin-top:160px;font-size:2.2rem}.top-left-nav{top:calc(env(safe-area-inset-top,0px) + 10px);left:10px}.top-right-nav{top:calc(env(safe-area-inset-top,0px) + 10px);right:10px}}.shepherd-element{z-index:20000!important}.shepherd-modal-overlay-container{z-index:19998!important}.shepherd-button{background:#3288e6;border:0;border-radius:3px;color:#ffffffbf;cursor:pointer;margin-right:.5rem;padding:.5rem 1.5rem;transition:all .5s ease}.shepherd-button:not(:disabled):hover{background:#196fcc;color:#ffffffbf}.shepherd-button.shepherd-button-secondary{background:#f1f2f3;color:#000000bf}.shepherd-button.shepherd-button-secondary:not(:disabled):hover{background:#d6d9db;color:#000000bf}.shepherd-button:disabled{cursor:not-allowed}.shepherd-footer{border-bottom-left-radius:5px;border-bottom-right-radius:5px;display:flex;justify-content:flex-end;padding:0 .75rem .75rem}.shepherd-footer .shepherd-button:last-child{margin-right:0}.shepherd-cancel-icon{background:transparent;border:none;color:#808080bf;cursor:pointer;font-size:2em;font-weight:400;margin:0;padding:0;transition:color .5s ease}.shepherd-cancel-icon:hover{color:#000000bf}.shepherd-has-title .shepherd-content .shepherd-cancel-icon{color:#808080bf}.shepherd-has-title .shepherd-content .shepherd-cancel-icon:hover{color:#000000bf}.shepherd-title{color:#000000bf;display:flex;flex:1 0 auto;font-size:1rem;font-weight:400;margin:0;padding:0}.shepherd-header{align-items:center;border-top-left-radius:5px;border-top-right-radius:5px;display:flex;justify-content:flex-end;line-height:2em;padding:.75rem .75rem 0}.shepherd-has-title .shepherd-content .shepherd-header{background:#e6e6e6;padding:1em}.shepherd-text{color:#000000bf;font-size:1rem;line-height:1.3em;padding:.75em}.shepherd-text p{margin-top:0}.shepherd-text p:last-child{margin-bottom:0}.shepherd-content{border-radius:5px;outline:none;padding:0}.shepherd-element{background:#fff;border:none;border-radius:5px;box-shadow:0 1px 4px #0003;margin:0;max-width:400px;opacity:0;outline:none;padding:0;transition:opacity .3s,visibility .3s;visibility:hidden;width:100%;z-index:9999}.shepherd-enabled.shepherd-element{opacity:1;visibility:visible}.shepherd-element[data-popper-reference-hidden]:not(.shepherd-centered){opacity:0;pointer-events:none;visibility:hidden}.shepherd-element,.shepherd-element *,.shepherd-element :after,.shepherd-element :before{box-sizing:border-box}.shepherd-arrow,.shepherd-arrow:before{height:16px;position:absolute;width:16px;z-index:-1}.shepherd-arrow:before{background:#fff;content:"";transform:rotate(45deg)}.shepherd-element[data-popper-placement^=top]>.shepherd-arrow{bottom:-8px}.shepherd-element[data-popper-placement^=bottom]>.shepherd-arrow{top:-8px}.shepherd-element[data-popper-placement^=left]>.shepherd-arrow{right:-8px}.shepherd-element[data-popper-placement^=right]>.shepherd-arrow{left:-8px}.shepherd-element.shepherd-centered>.shepherd-arrow{opacity:0}.shepherd-element.shepherd-has-title[data-popper-placement^=bottom]>.shepherd-arrow:before{background-color:#e6e6e6}.shepherd-target-click-disabled.shepherd-enabled.shepherd-target,.shepherd-target-click-disabled.shepherd-enabled.shepherd-target *{pointer-events:none}.shepherd-modal-overlay-container{height:0;left:0;opacity:0;overflow:hidden;pointer-events:none;position:fixed;top:0;transition:all .3s ease-out,height 0s .3s,opacity .3s 0s;width:100vw;z-index:9997}.shepherd-modal-overlay-container.shepherd-modal-is-visible{height:100vh;opacity:.5;transform:translateZ(0);transition:all .3s ease-out,height 0s 0s,opacity .3s 0s}.shepherd-modal-overlay-container.shepherd-modal-is-visible path{pointer-events:all}