:root{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.5;font-weight:400;color:#e2e8f0;background-color:#0b1120;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at top,#1e293b,#0b1120)}#root{min-height:100vh}a{color:inherit;text-decoration:none}button{border-radius:12px;border:1px solid rgba(148,163,184,.3);padding:.6em 1.2em;font-size:1rem;font-weight:600;font-family:inherit;color:#e2e8f0;background:#0f172ae6;cursor:pointer;transition:transform .2s ease,border-color .2s ease}button:disabled{opacity:.5;cursor:not-allowed}button:hover:not(:disabled){border-color:#38bdf8cc;transform:translateY(-1px)}input[type=range]{accent-color:#38bdf8}.ReactPiano__Keyboard{position:relative;display:flex}.ReactPiano__Key{display:flex}.ReactPiano__Key--accidental{background:#555;border:1px solid #fff;border-top:1px solid transparent;border-radius:0 0 4px 4px;cursor:pointer;height:66%;z-index:1;position:absolute;top:0}.ReactPiano__Key--natural{background:#f6f5f3;border:1px solid #888;border-radius:0 0 6px 6px;cursor:pointer;z-index:0;flex:1;margin-right:1px}.ReactPiano__Key--natural:last-child{margin-right:0}.ReactPiano__Key--active{background:#3ac8da}.ReactPiano__Key--active.ReactPiano__Key--accidental{border:1px solid #fff;border-top:1px solid #3ac8da;height:65%}.ReactPiano__Key--active.ReactPiano__Key--natural{border:1px solid #3ac8da;height:98%}.ReactPiano__Key--disabled.ReactPiano__Key--accidental{background:#ddd;border:1px solid #999}.ReactPiano__Key--disabled.ReactPiano__Key--natural{background:#eee;border:1px solid #aaa}.ReactPiano__NoteLabelContainer{flex:1;align-self:flex-end}.ReactPiano__NoteLabel{font-size:12px;text-align:center;text-transform:capitalize;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ReactPiano__NoteLabel--accidental{color:#f8e8d5;margin-bottom:3px}.ReactPiano__NoteLabel--natural{color:#888;margin-bottom:3px}.ReactPiano__NoteLabel--natural.ReactPiano__NoteLabel--active{color:#f8e8d5}:root{--bg-dark: #0f1014;--bg-panel: #18191f;--accent-primary: #3b82f6;--accent-glow: rgba(59, 130, 246, .4);--glass-border: rgba(255, 255, 255, .08);--note-width-white: 2.5%;--note-width-black: 1.5%}.player-container{width:100vw;height:100vh;background-color:var(--bg-dark);background-image:radial-gradient(circle at 50% 120%,#1e2538,#0f1014 60%),linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:100% 100%,40px 40px,40px 40px;color:#fff;overflow:hidden;position:relative;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;display:flex;flex-direction:column}.hud-header{position:absolute;top:0;left:0;right:0;height:64px;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:linear-gradient(to bottom,rgba(15,16,20,.9),transparent);pointer-events:none}.hud-group{display:flex;align-items:center;gap:12px;pointer-events:auto}.btn-icon{background:#ffffff0d;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid var(--glass-border);color:#94a3b8;height:36px;padding:0 16px;border-radius:99px;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:8px;text-decoration:none}.btn-icon:hover{background:#ffffff1a;color:#fff}.song-title{text-align:center;pointer-events:auto}.song-title h1{font-size:1.1rem;font-weight:700;margin:0;letter-spacing:-.01em;text-shadow:0 2px 10px rgba(0,0,0,.5)}.song-meta{font-size:.75rem;color:#64748b;margin-top:2px;font-weight:500}.stage{flex:1;position:relative;display:flex;flex-direction:column;perspective:1000px}.waterfall-area{flex:1;position:relative;mask-image:linear-gradient(to bottom,transparent,black 10%,black 100%);-webkit-mask-image:linear-gradient(to bottom,transparent,black 10%,black 100%)}.lane-marker{position:absolute;top:0;bottom:0;width:1px;background:#ffffff08}.note-capsule{position:absolute;top:0;left:0;will-change:transform;border-radius:4px;box-shadow:0 0 10px #0000004d;overflow:hidden;z-index:10;background-image:linear-gradient(90deg,rgba(255,255,255,.2) 0%,transparent 20%,transparent 80%,rgba(0,0,0,.2) 100%)}.note-capsule.left{background-color:#38bdf8;box-shadow:0 0 15px #38bdf866}.note-capsule.right{background-color:#a78bfa;box-shadow:0 0 15px #a78bfa66}.note-capsule .label{position:absolute;bottom:4px;width:100%;text-align:center;font-size:10px;font-weight:800;color:#0009}.keyboard-deck{height:200px;position:relative;background:linear-gradient(to bottom,#111,#050505);box-shadow:0 -10px 40px #00000080;z-index:20;border-top:2px solid #333}.key-strip{height:100%;position:relative;width:100%;margin:0 auto}.key{position:absolute;top:0;bottom:0;border-radius:0 0 4px 4px;transition:transform .05s ease,background .05s;will-change:transform,background;cursor:pointer}.key.white{background:#fff;background:linear-gradient(to bottom,#f8f8f8,#fff 90%,#e0e0e0);z-index:1;box-shadow:inset 0 -3px 5px #0000001a;border:1px solid #111;border-top:none}.key.white:active,.key.white.active{background:#ccc;transform:translateY(2px) scale(.98)}.key.black{height:65%;background:#111;border:1px solid #333;z-index:2;box-shadow:2px 2px 4px #00000080;border-radius:0 0 3px 3px}.key.black:active,.key.black.active{background:#333;transform:translateY(2px) scale(.98)}.key.active.left{background:#38bdf8!important;box-shadow:0 0 25px #38bdf8}.key.active.right{background:#a78bfa!important;box-shadow:0 0 25px #a78bfa}.key-label{position:absolute;bottom:15px;left:0;right:0;text-align:center;font-size:10px;font-weight:600;color:#666;pointer-events:none}.key.black .key-label{color:#888;bottom:8px}.key.active .key-label{color:#000}.middle-c-marker{position:absolute;bottom:4px;left:50%;transform:translate(-50%);width:4px;height:4px;background:#fbbf24;border-radius:50%}.controls-group{display:flex;align-items:center;gap:8px;background:#0000004d;padding:4px 12px 4px 4px;border-radius:99px;border:1px solid var(--glass-border)}.control-btn.mini{width:32px;height:32px;font-size:.9rem;background:transparent}.control-btn.mini:hover{background:#ffffff1a}.control-btn.primary.mini{background:var(--accent-primary)}.scrubber-compact{display:flex;align-items:center;gap:8px;margin-left:8px}.scrubber-compact span{font-size:10px;color:#94a3b8;font-variant-numeric:tabular-nums;width:35px;text-align:center}.bottom-controls{display:none}.bottom-controls.hidden{transform:translateY(-20px);opacity:0}.control-btn{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:none;background:#ffffff1a;color:#fff;cursor:pointer;transition:all .2s;font-size:1.2rem}.control-btn:hover{background:#fff3;transform:scale(1.05)}.control-btn.primary{background:var(--accent-primary);box-shadow:0 0 15px var(--accent-glow)}.control-btn.primary:hover{background:#2563eb}.scrubber-container{display:flex;flex-direction:column;min-width:200px;gap:4px}.time-display{display:flex;justify-content:space-between;font-size:11px;color:#94a3b8;font-variant-numeric:tabular-nums}.progress-track{height:6px;background:#ffffff1a;border-radius:4px;overflow:hidden;cursor:pointer}.progress-fill{height:100%;background:var(--accent-primary);border-radius:4px}@keyframes fall-smooth{0%{transform:translateY(-100%)}to{transform:translateY(0)}}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center}.empty-state h1{font-size:3rem;margin-bottom:1rem}.empty-state p{margin-bottom:2rem;color:#94a3b8;font-size:1.2rem}.app{display:flex;flex-direction:column;gap:2rem;padding:2.5rem 3rem 3.5rem}.player-app{gap:1rem;padding:1rem 2rem 2rem;max-width:100vw;overflow-x:hidden}.learning-banner{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.25rem;background:linear-gradient(135deg,#38bdf826,#8b5cf626);border:1px solid rgba(56,189,248,.3);border-radius:12px;font-size:.9rem;color:#e2e8f0}.tip-icon{font-size:1.2rem}.player-header{display:grid;grid-template-columns:1fr auto 1fr;gap:2rem;align-items:center;padding:.5rem 0}.header-left{display:flex;align-items:center;gap:1.5rem}.song-info{display:flex;flex-direction:column;gap:.25rem}.song-info h1{font-size:1.5rem;margin:0;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-center{display:flex;justify-content:center}.header-right{display:flex;justify-content:flex-end}.upcoming-notes{display:flex;align-items:center;gap:1rem;padding:.75rem 1.5rem;background:#0f172acc;border:1px solid rgba(148,163,184,.2);border-radius:16px}.upcoming-label{font-size:.8rem;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em}.upcoming-list{display:flex;gap:.5rem}.upcoming-note{display:flex;align-items:baseline;gap:2px;padding:.4rem .75rem;border-radius:8px;font-weight:700;font-size:1.1rem}.upcoming-note.left{background:#38bdf840;color:#7dd3fc}.upcoming-note.right{background:#8b5cf640;color:#a78bfa}.upcoming-note small{font-size:.7rem;opacity:.7}.upcoming-empty{color:#64748b;padding:.4rem .75rem}.score-display{display:flex;align-items:center;gap:1.25rem;padding:.75rem 1.5rem;background:#0f172acc;border:1px solid rgba(148,163,184,.2);border-radius:16px}.score-item{display:flex;flex-direction:column;align-items:center;gap:.15rem}.score-value{font-size:1.5rem;font-weight:700;color:#f8fafc}.score-label{font-size:.7rem;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em}.score-divider{width:1px;height:2.5rem;background:#94a3b84d}.learning-area{display:flex;flex-direction:column;gap:1rem;background:#0f172a99;border-radius:24px;border:1px solid rgba(148,163,184,.2);padding:1.5rem}.practice-controls{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem;padding-bottom:1rem;border-bottom:1px solid rgba(148,163,184,.15)}.control-group{display:flex;align-items:center;gap:.75rem}.control-label{font-size:.85rem;color:#94a3b8;white-space:nowrap}.speed-buttons{display:flex;gap:.25rem}.speed-btn{padding:.5rem 1rem;border-radius:8px;background:#94a3b826;border:1px solid transparent;color:#94a3b8;font-weight:600;cursor:pointer;transition:all .15s ease}.speed-btn:hover{background:#94a3b840;color:#e2e8f0}.speed-btn.active{background:linear-gradient(135deg,#38bdf84d,#8b5cf64d);border-color:#38bdf880;color:#f8fafc}.tempo-slider{width:120px;accent-color:#38bdf8}.toggles{gap:1rem}.toggle-label{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:#cbd5e1;cursor:pointer}.toggle-label input{accent-color:#38bdf8}.transport-buttons{display:flex;gap:.5rem;margin-left:auto}.play-btn,.stop-btn,.file-btn{display:flex;align-items:center;gap:.5rem;padding:.6rem 1.25rem;border-radius:12px;font-weight:600;cursor:pointer;transition:all .15s ease}.play-btn{background:linear-gradient(135deg,#22c55e,#16a34a);border:none;color:#fff}.play-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #22c55e66}.play-btn:disabled{opacity:.5;cursor:not-allowed}.stop-btn{background:#ef444433;border:1px solid rgba(239,68,68,.4);color:#fca5a5}.stop-btn:hover:not(:disabled){background:#ef44444d}.stop-btn:disabled{opacity:.4;cursor:not-allowed}.file-btn{background:#94a3b826;border:1px solid rgba(148,163,184,.3);color:#cbd5e1}.file-btn:hover{background:#94a3b840}.file-btn input{display:none}.learning-progress{display:flex;flex-direction:column;gap:.5rem}.progress-track{width:100%;height:8px;background:#94a3b833;border-radius:999px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#38bdf8,#8b5cf6);border-radius:999px;transition:width .1s linear}.progress-time{display:flex;justify-content:space-between;font-size:.8rem;color:#64748b}.hand-indicators{display:flex;margin:0 auto;height:32px}.hand-zone{flex:1;display:flex;align-items:center;padding:0 1rem;border-radius:8px}.hand-zone.left-hand{background:#38bdf81a;border:1px solid rgba(56,189,248,.3);justify-content:flex-start;border-right:none;border-radius:8px 0 0 8px}.hand-zone.right-hand{background:#8b5cf61a;border:1px solid rgba(139,92,246,.3);justify-content:flex-end;border-left:none;border-radius:0 8px 8px 0}.hand-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.left-hand .hand-label{color:#7dd3fc}.right-hand .hand-label{color:#a78bfa}.hand-divider{display:flex;align-items:center;justify-content:center;padding:0 .5rem;background:#fbbf2433;border:1px solid rgba(251,191,36,.5);font-size:.7rem;font-weight:700;color:#fbbf24}.piano-container{display:flex;flex-direction:column;align-items:center;overflow-x:auto;padding:.5rem 0}.hero{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:2rem;align-items:center}.eyebrow{font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:.75rem;color:#7dd3fc}.hero h1{font-size:clamp(2rem,4vw,3rem);margin:.35rem 0 .75rem}.subtitle{color:#cbd5f5;margin:0}.controls{background:#0f172acc;border:1px solid rgba(148,163,184,.2);border-radius:16px;padding:1.5rem;display:grid;gap:1.25rem}.file-input{display:flex;flex-direction:column;gap:.5rem;font-weight:600;color:#e2e8f0}.file-input input{display:block;width:100%}.file-input span{font-size:.9rem;color:#94a3b8}.transport{display:flex;gap:.75rem}.transport button{flex:1}.transport .primary{background:linear-gradient(135deg,#38bdf8,#6366f1);color:#0f172a;font-weight:700}.primary{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;background:linear-gradient(135deg,#38bdf8,#6366f1);color:#0f172a;font-weight:700;text-decoration:none;border-radius:12px;border:1px solid transparent;padding:.6em 1.2em}.slider{display:grid;gap:.5rem}.slider input{width:100%}.status{display:grid;gap:.75rem}.progress{width:100%;height:8px;background:#94a3b833;border-radius:999px;overflow:hidden}.progress-bar{height:100%;background:linear-gradient(90deg,#38bdf8,#6366f1);transition:width .1s linear}.meta{display:flex;flex-wrap:wrap;gap:1.5rem;color:#94a3b8;font-size:.9rem}.piano-roll{display:grid;gap:.5rem;background:#0f172a99;border-radius:20px;border:1px solid rgba(148,163,184,.2);padding:1.5rem .5rem .75rem;overflow-x:auto}.roll-canvas{position:relative;height:var(--roll-height, 350px);margin:0 auto;background:linear-gradient(180deg,#0f172a66,#0f172af2);border-radius:16px;overflow:hidden;border:1px solid rgba(148,163,184,.15)}.octave-line{position:absolute;top:0;bottom:0;width:1px;background:#fbbf2433;pointer-events:none}.keyboard{display:flex;justify-content:center;align-items:flex-end;position:relative;height:200px;margin:0 auto}.key{flex:0 0 auto;border-radius:0 0 8px 8px;transition:transform .05s ease,box-shadow .05s ease,background .08s ease;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:8px}.key.white{width:32px;height:180px;background:linear-gradient(180deg,#f1f5f9,#e2e8f0);border:1px solid #cbd5f5;margin:0 1px;z-index:1}.key.black{width:22px;height:110px;background:linear-gradient(180deg,#1e293b,#0f172a);margin:0 -11px;z-index:2;border:1px solid #334155;transform:translateY(-50px)}.key.middle-c{background:linear-gradient(180deg,#fef3c7,#fde68a);border-color:#fbbf24}.key-label{font-size:.7rem;font-weight:600;color:#64748b;pointer-events:none}.c4-marker{position:absolute;bottom:-24px;font-size:.65rem;font-weight:700;color:#fbbf24;background:#fbbf2433;padding:2px 6px;border-radius:4px}.key.active.white{background:linear-gradient(180deg,#bae6fd,#7dd3fc);box-shadow:inset 0 -12px 20px #38bdf880,0 0 20px #38bdf866;transform:translateY(2px)}.key.active.black{background:linear-gradient(180deg,#8b5cf6,#7c3aed);box-shadow:0 0 20px #8b5cf6b3}.roll-note{position:absolute;border-radius:6px;opacity:.95;top:-60px;animation-name:fall;animation-timing-function:linear;animation-fill-mode:forwards;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.75rem;text-shadow:0 1px 2px rgba(0,0,0,.5)}.roll-note.left{background:linear-gradient(180deg,#38bdf8,#0284c7);box-shadow:0 0 16px #38bdf880,inset 0 1px #ffffff4d;color:#fff}.roll-note.right{background:linear-gradient(180deg,#a78bfa,#7c3aed);box-shadow:0 0 16px #8b5cf680,inset 0 1px #ffffff4d;color:#fff}.note-label{pointer-events:none}.quick-help{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem;padding:1rem;background:#0f172a66;border-radius:12px}.help-item{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:#94a3b8}.help-icon{font-size:1rem}.left-hand-color{color:#38bdf8}.right-hand-color{color:#8b5cf6}.back-link{display:inline-flex;padding:.5rem 1rem;color:#94a3b8;text-decoration:none;font-weight:600;background:#94a3b81a;border-radius:8px;transition:all .15s ease}.back-link:hover{color:#e2e8f0;background:#94a3b833}@keyframes fall{0%{transform:translateY(0);opacity:0}10%{opacity:1}90%{opacity:1}to{transform:translateY(var(--roll-height, 350px));opacity:.3}}.tutorial{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}.tutorial-step{display:flex;gap:.75rem;align-items:flex-start;padding:1rem 1.25rem;border-radius:16px;background:#0f172a99;border:1px solid rgba(148,163,184,.2);animation:float 4s ease-in-out infinite}.tutorial-step:nth-child(2){animation-delay:.4s}.tutorial-step:nth-child(3){animation-delay:.8s}.step-number{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#38bdf833;color:#7dd3fc;font-weight:700}.tutorial-step h3{margin:0;font-size:1rem}.tutorial-step p{margin:.35rem 0 0;color:#94a3b8;font-size:.9rem}.pulse{position:relative;overflow:hidden}.pulse:after{content:"";position:absolute;inset:-30%;background:radial-gradient(circle,rgba(56,189,248,.25),transparent 60%);animation:pulse 2.4s ease-in-out infinite;pointer-events:none}@keyframes pulse{0%,to{opacity:.2;transform:scale(.7)}50%{opacity:.6;transform:scale(1)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@media(max-width:900px){.hero{grid-template-columns:1fr}.player-header{grid-template-columns:1fr;gap:1rem}.header-left,.header-center,.header-right,.practice-controls{justify-content:center}.transport-buttons{margin-left:0;width:100%;justify-content:center}.learning-banner{text-align:center;flex-direction:column}.quick-help{gap:1rem}}@media(max-width:600px){.player-app{padding:.75rem 1rem 1.5rem}.upcoming-notes{flex-direction:column;gap:.5rem;padding:.5rem 1rem}.score-display{gap:.75rem;padding:.5rem 1rem}.speed-buttons{flex-wrap:wrap}.control-group.toggles{flex-direction:column;align-items:flex-start}}