*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary: #0a0a0f;--bg-surface: rgba(255, 255, 255, .03);--text-primary: rgba(255, 255, 255, .9);--text-secondary: rgba(255, 255, 255, .5);--text-muted: rgba(255, 255, 255, .25);--accent-blue: rgba(100, 140, 255, .8);--glass-bg: rgba(255, 255, 255, .04);--glass-border: rgba(255, 255, 255, .08)}[data-theme=light]{--bg-primary: #f0f0f5;--bg-surface: rgba(0, 0, 0, .03);--text-primary: rgba(0, 0, 0, .85);--text-secondary: rgba(0, 0, 0, .5);--text-muted: rgba(0, 0, 0, .25);--accent-blue: rgba(60, 100, 220, .8);--glass-bg: rgba(0, 0, 0, .04);--glass-border: rgba(0, 0, 0, .08)}[data-theme=light] body{background:var(--bg-primary);color:var(--text-primary)}[data-theme=light] .controls-bar{background:#0000000a;border-color:#00000014}[data-theme=light] .control-btn{background:#0000000d;border-color:#0000001a;color:#0009}[data-theme=light] .control-btn:hover:not(:disabled){background:#0000001a;color:#000000e6}[data-theme=light] .control-label{color:#0006}[data-theme=light] .control-value{color:#0009}[data-theme=light] .controls-divider{background:#0000001a}html{height:100%}body{height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:var(--bg-primary);color:var(--text-primary);overflow:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{height:100%}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}button{font-family:inherit}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff1f;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#fff3}.piano-key{position:relative;cursor:pointer;user-select:none;-webkit-user-select:none;transition:transform .06s ease,box-shadow .06s ease;flex-shrink:0}.piano-key.white{width:var(--white-key-width, 28px);height:var(--white-key-height, 160px);background:linear-gradient(to bottom,#f8f8f8,#fff 10%,#f5f5f5 85%,#e8e8e8);border:1px solid #bbb;border-radius:0 0 5px 5px;box-shadow:0 2px 3px #00000026,inset 0 -2px 4px #0000000d,inset 0 1px #fffc;z-index:1}.piano-key.white:hover{background:linear-gradient(to bottom,#fff 0% 10%,#fafafa 85%,#f0f0f0)}.piano-key.white.active{transform:translateY(2px);background:linear-gradient(to bottom,#e8e8e8,#f0f0f0,#e0e0e0);box-shadow:0 1px 1px #0003,inset 0 1px 3px #0000001a,0 0 15px var(--glow-color, transparent),0 0 30px var(--glow-color, transparent)}.piano-key.black{position:absolute;left:calc((var(--key-position) + 1) * var(--white-key-width) - var(--black-key-width) / 2);width:var(--black-key-width, 18px);height:var(--black-key-height, 104px);background:linear-gradient(to bottom,#3a3a3a,#2a2a2a 40%,#1a1a1a);border:1px solid #111;border-radius:0 0 4px 4px;box-shadow:0 3px 5px #0006,inset 0 -1px 2px #ffffff0d,inset 0 1px #5050504d;z-index:2;top:0}.piano-key.black:hover{background:linear-gradient(to bottom,#444,#333 40%,#222)}.piano-key.black.active{transform:translateY(2px);background:linear-gradient(to bottom,#2a2a2a,#1a1a1a,#111);box-shadow:0 1px 2px #0006,inset 0 1px 2px #0000004d,0 0 12px var(--glow-color, transparent),0 0 25px var(--glow-color, transparent)}.key-label{position:absolute;bottom:8px;left:50%;transform:translate(-50%);font-size:10px;font-weight:600;color:#999;pointer-events:none;opacity:.7}.piano-key.black .key-label{color:#777;bottom:6px;font-size:9px}.piano-key.active .key-label{opacity:1}.piano-key.highlighted{outline:2px solid rgba(0,220,255,.8);outline-offset:-2px;animation:highlightPulse 1s ease-in-out infinite}.piano-key.highlighted.white{background:linear-gradient(to bottom,#00dcff26,#fff 30%,#f5f5f5 85%,#e8e8e8)}.piano-key.highlighted.black{background:linear-gradient(to bottom,#00dcff40,#2a2a2a 40%,#1a1a1a)}@keyframes highlightPulse{0%,to{outline-color:#00dcffcc;box-shadow:0 0 8px #00dcff4d}50%{outline-color:#00dcff66;box-shadow:0 0 16px #00dcff80}}.remote-indicators{position:absolute;bottom:2px;left:50%;transform:translate(-50%);display:flex;gap:2px;pointer-events:none}.remote-dot{width:5px;height:5px;border-radius:50%;opacity:.8}.piano-container{--white-key-width: 28px;--white-key-height: 160px;--black-key-width: 18px;--black-key-height: 104px;position:relative;overflow-x:auto;overflow-y:hidden;padding:0 10px 12px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}.piano-container::-webkit-scrollbar{height:6px}.piano-container::-webkit-scrollbar-track{background:transparent}.piano-container::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:3px}.piano-keys{display:flex;position:relative;width:fit-content;height:var(--white-key-height)}@media(max-width:768px){.piano-container{--white-key-width: 32px;--white-key-height: 140px;--black-key-width: 20px;--black-key-height: 91px}}@media(max-width:480px){.piano-container{--white-key-width: 36px;--white-key-height: 120px;--black-key-width: 22px;--black-key-height: 78px}}.controls-bar{display:flex;align-items:center;gap:14px;padding:10px 14px;background:#ffffff0a;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.08);border-radius:8px;flex-wrap:wrap;justify-content:center;width:100%}.controls-divider{width:1px;height:32px;background:#ffffff1a;flex-shrink:0}.control-group{display:flex;flex-direction:column;gap:4px}.control-label{font-size:10px;text-transform:uppercase;letter-spacing:1.2px;color:#fff6;font-weight:600}.control-value{font-size:12px;color:#fff9;min-width:32px;text-align:center}.slider-row{display:flex;align-items:center;gap:8px}.control-slider{-webkit-appearance:none;appearance:none;width:80px;height:4px;background:#ffffff1a;border-radius:2px;outline:none;cursor:pointer}.control-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#fffc;cursor:pointer;transition:background .15s}.control-slider::-webkit-slider-thumb:hover{background:#fff}.control-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fffc;border:none;cursor:pointer}.octave-buttons,.effects-buttons{display:flex;align-items:center;gap:6px}.instrument-select-wrap{display:flex;align-items:center;gap:7px}.instrument-select{min-width:148px;height:26px;color:var(--text-primary)}.instrument-load-dot{width:5px;height:5px;border-radius:50%;background:#66d79a;opacity:.8}.instrument-load-dot.loading{background:var(--accent-blue);animation:instrument-pulse .9s ease-in-out infinite}@keyframes instrument-pulse{0%,to{opacity:.2}50%{opacity:1}}.octave-value{font-family:SF Mono,Fira Code,monospace;font-weight:600}.control-btn{background:#ffffff0f;border:1px solid rgba(255,255,255,.1);color:#ffffffb3;padding:4px 10px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:500;transition:all .15s ease;white-space:nowrap}.control-btn:hover:not(:disabled){background:#ffffff1a;color:#fff}.control-btn:disabled{opacity:.3;cursor:default}.control-btn.active{background:#ffffff26;border-color:#ffffff40;color:#fff}.instrument-btn.active{background:#648cff33;border-color:#648cff66;color:#8cb4ff}.effect-btn.active{background:#64dc8c26;border-color:#64dc8c4d;color:#64dc8c}.sustain-indicator{display:flex;align-items:center;gap:5px;font-size:12px;color:#fff6;padding:4px 8px;transition:color .15s}.sustain-indicator.active{color:#ffc83c}.sustain-dot{width:6px;height:6px;border-radius:50%;background:#fff3;transition:background .15s,box-shadow .15s}.sustain-indicator.active .sustain-dot{background:#ffc83c;box-shadow:0 0 8px #ffc83c80}.reverb-slider{width:60px}.midi-indicator{display:flex;align-items:center;gap:5px;font-size:11px;color:#fff6;padding:4px 8px}.midi-dot{width:6px;height:6px;border-radius:50%;background:#fff3;transition:background .15s,box-shadow .15s}.midi-dot.connected{background:#64dc8c;box-shadow:0 0 8px #64dc8c80}.midi-label{white-space:nowrap;max-width:120px;overflow:hidden;text-overflow:ellipsis}.utility-buttons{display:flex;align-items:center;gap:4px}.control-checkbox{display:flex;align-items:center;gap:4px;font-size:11px;color:#fff9;cursor:pointer;-webkit-user-select:none;user-select:none}.control-checkbox input[type=checkbox]{accent-color:rgba(100,140,255,.8);width:14px;height:14px;cursor:pointer}.metronome-row{display:flex;align-items:center;gap:6px}.metronome-beats{display:flex;align-items:center;gap:3px}.metronome-dot{width:8px;height:8px;border-radius:50%;background:#ffffff26;transition:all .1s}.metronome-dot.active{background:#64dc8ce6;box-shadow:0 0 6px #64dc8c80}.metronome-dot.downbeat{background:#ffc83c;box-shadow:0 0 8px #ffc83c80;transform:scale(1.2)}.control-select{background:#ffffff0f;border:1px solid rgba(255,255,255,.1);color:#ffffffb3;padding:3px 6px;border-radius:4px;font-size:11px;font-family:inherit;cursor:pointer;outline:none}.control-select option,.control-select optgroup{color:#17171c;background:#f4f4f6}@media(prefers-reduced-motion:reduce){.instrument-load-dot.loading{animation:none}}@media(max-width:760px){.controls-bar{justify-content:flex-start;flex-wrap:nowrap;gap:10px;padding:8px 10px;overflow-x:auto}.controls-divider{height:26px}.control-slider{width:62px}}.control-select:focus{border-color:#648cff66}.chord-display{display:flex;align-items:center;padding:4px 10px}.chord-name{font-family:SF Mono,Fira Code,monospace;font-size:18px;font-weight:700;color:#ffc83ce6;text-shadow:0 0 10px rgba(255,200,60,.3);min-width:50px;text-align:center}@media(max-width:768px){.controls-bar{padding:10px 12px;gap:10px}.controls-divider{display:none}.control-slider{width:60px}.instrument-buttons{flex-wrap:wrap}}.visualizer-container{position:relative;width:100%;height:280px;overflow:hidden}.visualizer-canvas{width:100%;height:100%;display:block}.visualizer-ambient-overlay{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 100%,rgba(100,140,255,.1) 0%,transparent 70%);opacity:var(--ambient-intensity, 0);transition:opacity .3s ease;z-index:0}.visualizer-canvas{position:relative;z-index:1}@media(max-width:768px){.visualizer-container{height:200px}}@media(max-width:480px){.visualizer-container{height:150px}}.recorder-bar{display:flex;align-items:center;gap:10px;padding:8px 16px;min-height:36px}.recorder-btn{display:flex;align-items:center;gap:6px;background:#ffffff0f;border:1px solid rgba(255,255,255,.1);color:#ffffffb3;padding:5px 12px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:500;transition:all .15s ease}.recorder-btn:hover{background:#ffffff1a;color:#fff}.record-dot{width:8px;height:8px;border-radius:50%;background:#e44}.record-btn:hover .record-dot{background:#f55;box-shadow:0 0 6px #ff3c3c80}.stop-square{width:8px;height:8px;border-radius:1px;background:#ffffffb3}.play-triangle{width:0;height:0;border-left:8px solid rgba(255,255,255,.7);border-top:5px solid transparent;border-bottom:5px solid transparent}.recorder-btn.recording{border-color:#ff3c3c66}.recorder-btn.recording .stop-square{background:#e44}.recording-indicator{font-size:12px;color:#e44;animation:pulse-recording 1.5s ease-in-out infinite}@keyframes pulse-recording{0%,to{opacity:1}50%{opacity:.4}}.export-btn{font-size:10px;padding:3px 8px;color:#ffffff80}.export-btn:hover{color:#ffffffe6}.export-btn:disabled{opacity:.5;cursor:default}.playback-progress{flex:1;max-width:120px;height:4px;background:#ffffff1a;border-radius:2px;overflow:hidden}.playback-fill{height:100%;background:#64b4ffb3;border-radius:2px;transition:width .05s linear}.midi-player{display:flex;align-items:center;gap:8px;min-height:32px}.midi-load-btn{background:#ffffff0f;border:1px dashed rgba(255,255,255,.15);color:#ffffff80;padding:5px 12px;border-radius:6px;cursor:pointer;font-size:12px;transition:all .15s}.midi-load-btn:hover{background:#ffffff1a;border-color:#ffffff4d;color:#fffc}.midi-load-btn.small{padding:3px 8px;font-size:11px}.midi-transport{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.midi-track-name{font-size:11px;color:#ffffff80;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.midi-buttons{display:flex;align-items:center;gap:4px}.pause-bars{font-size:8px;letter-spacing:1px;color:#ffffffb3}.midi-progress-bar{width:100px;height:4px;background:#ffffff1a;border-radius:2px;overflow:hidden}.midi-progress-fill{height:100%;background:#64dc8cb3;border-radius:2px;transition:width .05s linear}.midi-tempo{display:flex;align-items:center;gap:4px}.tempo-slider{width:50px}.midi-tempo-label{font-size:10px;color:#fff6;white-space:nowrap;min-width:55px}.learning-panel{display:flex;align-items:center;gap:12px;padding:6px 12px;background:#00dcff0d;border:1px solid rgba(0,220,255,.15);border-radius:8px}.learning-header{display:flex;align-items:center;gap:8px}.learning-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:#00dcffcc}.learning-mode-toggle{display:flex;gap:4px}.learning-controls{display:flex;align-items:center;gap:4px}.learning-score{display:flex;align-items:center;gap:8px}.score-accuracy{font-size:16px;font-weight:700;color:#00dcffe6;font-family:SF Mono,Fira Code,monospace}.score-detail{font-size:11px;color:#fff6}.timing-feedback{font-size:11px;font-weight:600;padding:2px 6px;border-radius:4px;animation:feedbackPop .3s ease}.timing-feedback.perfect{color:#64dc8c;background:#64dc8c26}.timing-feedback.early{color:#ffc83c;background:#ffc83c26}.timing-feedback.late{color:#ff6464;background:#ff646426}@keyframes feedbackPop{0%{transform:scale(1.2);opacity:.5}to{transform:scale(1);opacity:1}}.help-overlay{position:fixed;inset:0;z-index:200;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;animation:helpFadeIn .2s ease}@keyframes helpFadeIn{0%{opacity:0}to{opacity:1}}.help-modal{background:#14141ef2;border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:24px 32px;max-width:560px;width:90%;max-height:80vh;overflow-y:auto}.help-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.help-header h2{font-size:18px;font-weight:500;color:#ffffffe6;margin:0}.help-close{background:none;border:none;color:#ffffff80;font-size:24px;cursor:pointer;padding:4px 8px;line-height:1}.help-close:hover{color:#fff}.help-sections{display:flex;flex-direction:column;gap:20px}.help-section h3{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#fff6;margin:0 0 10px;font-weight:600}.shortcut-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.shortcut-grid.wide{grid-template-columns:repeat(2,1fr)}.shortcut{display:flex;align-items:center;gap:6px;font-size:12px;color:#fff9}kbd{display:inline-block;padding:2px 6px;font-size:11px;font-family:SF Mono,Fira Code,monospace;background:#ffffff14;border:1px solid rgba(255,255,255,.15);border-radius:4px;color:#fffc;min-width:22px;text-align:center}.mp-toggle-btn{position:fixed;bottom:1.5rem;right:1.5rem;z-index:50;background:#ffffff0f;border:1px solid rgba(255,255,255,.1);color:#fff9;padding:8px 16px;border-radius:8px;cursor:pointer;font-size:13px;font-family:inherit;transition:all .15s}.mp-toggle-btn:hover{background:#ffffff1a;color:#fff}.mp-panel{position:fixed;bottom:1.5rem;right:1.5rem;width:300px;max-height:400px;background:#0f0f0fd9;border:1px solid rgba(255,255,255,.1);border-radius:12px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:50;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 40px #00000080;animation:mpSlideIn .2s ease}@keyframes mpSlideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.mp-header{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.1);font-size:13px;font-weight:500;color:#ffffffe6;display:flex;justify-content:space-between;align-items:center;background:#0000004d;flex-shrink:0}.mp-header-status{font-size:12px;color:#ffffff80;display:flex;align-items:center;gap:5px}.mp-close-btn{background:none;border:none;color:#fff6;font-size:18px;cursor:pointer;padding:0 4px;line-height:1}.mp-close-btn:hover{color:#fff}.mp-body{padding:14px}.mp-connect-form{display:flex;flex-direction:column;gap:8px;padding:14px}.mp-field{background:#ffffff0f;border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:8px 10px;color:#ffffffd9;font-size:13px;font-family:inherit;outline:none;transition:border-color .15s}.mp-field:focus{border-color:#648cff80}.mp-field::placeholder{color:#ffffff4d}.mp-action-btn{background:#648cff33;border:1px solid rgba(100,140,255,.3);color:#8cb4ff;padding:8px 16px;border-radius:6px;cursor:pointer;font-size:13px;font-family:inherit;font-weight:500;transition:all .15s;align-self:flex-end}.mp-action-btn:hover{background:#648cff4d}.mp-messages{flex:1;padding:12px 14px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;min-height:100px;max-height:220px}.mp-message{font-size:13px;line-height:1.4;word-wrap:break-word;color:#ffffffd9}.mp-system-msg{color:#ffffff59;font-size:12px}.mp-group-info{border-bottom:1px solid rgba(255,255,255,.05);padding-bottom:6px;margin-bottom:6px}.mp-msg-user{font-weight:600;margin-right:6px}.mp-chat-form{display:flex;padding:8px 10px;border-top:1px solid rgba(255,255,255,.1);background:#0003;flex-shrink:0}.mp-chat-field{flex:1;background:transparent;border:none;color:#fff;padding:6px 8px;font-family:inherit;font-size:13px;outline:none}.mp-chat-field::placeholder{color:#ffffff4d}.mp-footer{display:flex;gap:6px;padding:8px 10px;border-top:1px solid rgba(255,255,255,.06);background:#00000026;flex-shrink:0}.mp-footer-btn{flex:1;background:#ffffff0f;border:1px solid rgba(255,255,255,.08);color:#ffffff80;padding:5px 10px;border-radius:5px;cursor:pointer;font-size:11px;font-family:inherit;transition:all .15s}.mp-footer-btn:hover{background:#ffffff1a;color:#fffc}.mp-leave-btn{color:#ff646499;border-color:#ff646426}.mp-leave-btn:hover{background:#ff64641a;color:#ff6464e6}@media(max-width:768px){.mp-panel{width:calc(100vw - 2rem);right:1rem;bottom:1rem;max-height:320px}}.app{display:flex;flex-direction:column;height:100%;position:relative;overflow:hidden;animation:app-fade-in .42s ease-out}.app-ambient{position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse at 50% 100%,rgba(72,104,210,.08),transparent 48%),linear-gradient(180deg,rgba(255,255,255,.015),transparent 35%)}.app-header{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:18px 0 8px;position:relative;z-index:10;flex-shrink:0}.studio-topline{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:12px}.studio-identity{display:flex;align-items:baseline;gap:12px}.studio-identity strong{font-size:clamp(24px,3vw,36px);line-height:.9;letter-spacing:-1.8px;font-weight:620}.studio-index{color:var(--accent-blue);font-size:10px;font-weight:700;letter-spacing:1.4px}.studio-actions,.audio-status{display:flex;align-items:center}.studio-actions{gap:10px}.audio-status{min-height:30px;gap:7px;color:var(--text-secondary);font-size:11px}.audio-status-dot{width:6px;height:6px;border-radius:50%;background:var(--text-muted)}.audio-status--loading .audio-status-dot{background:var(--accent-blue);animation:status-pulse 1.1s ease-in-out infinite}.audio-status--samples .audio-status-dot{background:#66d79a;box-shadow:0 0 8px #66d79a59}.audio-status--fallback .audio-status-dot{background:#e1b668}.status-retry{border:0;background:transparent;color:var(--accent-blue);cursor:pointer;font-size:inherit;text-decoration:underline;text-underline-offset:3px}.tools-toggle{min-height:32px;padding:0 12px;border:1px solid var(--glass-border);border-radius:6px;background:var(--glass-bg);color:var(--text-secondary);cursor:pointer;font-size:11px;font-weight:650;letter-spacing:.2px}.tools-toggle:hover,.tools-toggle.active{border-color:#648cff73;color:var(--text-primary)}.studio-tools{max-height:0;overflow:hidden;opacity:0;pointer-events:none;transition:max-height .22s ease,opacity .15s ease}.studio-tools.open{max-height:190px;opacity:1;pointer-events:auto;margin-top:8px}.studio-tools-primary,.studio-tools-secondary{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}.studio-tools-secondary{padding-top:8px}.studio-utility-buttons{display:flex;gap:5px;padding-left:10px;border-left:1px solid var(--glass-border)}.app-main{flex:1;display:flex;flex-direction:column;justify-content:flex-end;position:relative;z-index:1;min-height:0}@keyframes app-fade-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes status-pulse{0%,to{opacity:.35}50%{opacity:1}}@media(prefers-reduced-motion:reduce){.app{animation:none}.studio-tools{transition:none}.audio-status--loading .audio-status-dot{animation:none}}@media(max-width:760px){.app-header{width:calc(100% - 16px);padding-top:10px}.studio-topline{align-items:center;margin-bottom:8px}.studio-index,.audio-status>span:not(.audio-status-dot){display:none}.studio-tools.open{max-height:36vh;overflow-y:auto;padding-bottom:5px}}