:root{--bg-dark:#090b14;--bg-gradient:linear-gradient(135deg, #0f1322 0%, #1a1a2e 100%);--glass-bg:#ffffff08;--glass-bg-strong:#0000004d;--glass-bg-hover:#ffffff0d;--glass-bg-hover-strong:#ffffff1a;--glass-border:#ffffff0d;--glass-border-hover:#fff3;--glass-border-light:#ffffff1a;--modal-bg:#0f1322f2;--key-white-bg:#ffffff14;--key-white-hover:#ffffff1f;--key-black-bg:#000;--key-black-hover:#0a0c10;--key-black-active:#000;--active-glow:#3b82f6cc;--active-glow-subtle:#3b82f64d;--active-glow-medium:#3b82f666;--active-bg:#3b82f680;--active-bg-subtle:#3b82f61a;--active-border:#3b82f680;--active-bg-radial:radial-gradient(circle at 50% 80%, #3b82f699 0%, #3b82f61a 50%, transparent 80%);--active-bg-black-radial:radial-gradient(circle at 50% 80%, #3b82f6b3 0%, #000c 60%);--text-primary:#fff;--text-secondary:#e2e8f0;--text-white:#fff;--accent:#3b82f6;--danger:#ef4444;--danger-light:#f87171;--danger-bg:#f8717133;--shadow-sm:0 8px 20px #0000004d;--shadow-lg:0 20px 40px #0000004d;--shadow-text:0 2px 4px #00000080;--select-arrow:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");--text-active:var(--text-white)}[data-theme=arctic-light]{--bg-dark:#f1f5f9;--bg-gradient:linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);--glass-bg:#fff9;--glass-bg-strong:#0000000d;--glass-bg-hover:#00000014;--glass-bg-hover-strong:#0000001f;--glass-border:#0000000d;--glass-border-hover:#00000026;--glass-border-light:#0000001a;--modal-bg:#f8fafcf2;--key-white-bg:#fff;--key-white-hover:#f1f5f9;--key-black-bg:#1e293b;--key-black-hover:#334155;--key-black-active:#0f172a;--active-glow:#0ea5e999;--active-glow-subtle:#0ea5e933;--active-glow-medium:#0ea5e94d;--active-bg:#0ea5e94d;--active-bg-subtle:#0ea5e91a;--active-border:#0ea5e980;--active-bg-radial:radial-gradient(circle at 50% 80%, #0ea5e966 0%, #0ea5e90d 50%, transparent 80%);--active-bg-black-radial:radial-gradient(circle at 50% 80%, #0ea5e980 0%, #1e293be6 60%);--text-primary:#0f172a;--text-secondary:#475569;--text-white:#0f172a;--shadow-text:none;--text-active-shadow:none;--accent:#0ea5e9;--select-arrow:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e")}[data-theme=neon-synthwave]{--bg-dark:#120424;--bg-gradient:linear-gradient(135deg, #1f0545 0%, #0d011f 100%);--glass-bg:#ffffff0a;--glass-bg-strong:#0000004d;--glass-bg-hover:#ffffff14;--glass-bg-hover-strong:#ffffff1f;--glass-border:#ff00ff1a;--glass-border-hover:#ff00ff4d;--glass-border-light:#f0f3;--modal-bg:#140228f2;--key-white-bg:#ffffff0d;--key-white-hover:#ffffff26;--key-black-bg:#050010;--key-black-hover:#1a0033;--key-black-active:#050010;--active-glow:#ff00ffe6;--active-glow-subtle:#f0f6;--active-glow-medium:#ff00ff80;--active-bg:#f0f6;--active-bg-subtle:#ff00ff26;--active-border:#ff00ffb3;--active-bg-radial:radial-gradient(circle at 50% 80%, #ff00ffb3 0%, #f0f3 50%, transparent 80%);--active-bg-black-radial:radial-gradient(circle at 50% 80%, #f0fc 0%, #000000e6 60%);--text-primary:#fff;--text-secondary:#fdf4ff;--text-white:#fff;--accent:#d946ef}[data-theme=analog-studio]{--bg-dark:#262626;--bg-gradient:linear-gradient(135deg, #333 0%, #1a1a1a 100%);--glass-bg:#ffffff0a;--glass-bg-strong:#0000004d;--glass-bg-hover:#ffffff14;--glass-bg-hover-strong:#ffffff1f;--glass-border:#f973161a;--glass-border-hover:#f973164d;--glass-border-light:#f9731633;--modal-bg:#262626fa;--key-white-bg:#d4d4d8;--key-white-hover:#e4e4e7;--key-black-bg:#09090b;--key-black-hover:#18181b;--key-black-active:#09090b;--active-glow:#f97316b3;--active-glow-subtle:#f9731633;--active-glow-medium:#f9731666;--active-bg:#f973164d;--active-bg-subtle:#f973161a;--active-border:#f9731699;--active-bg-radial:radial-gradient(circle at 50% 80%, #f9731699 0%, #f973161a 50%, transparent 80%);--active-bg-black-radial:radial-gradient(circle at 50% 80%, #f97316b3 0%, #000c 60%);--text-primary:#fff;--text-secondary:#f4f4f5;--text-white:#fff;--key-white-text:#000;--key-black-text:#fff;--text-active:#fff;--accent:#f97316}[data-theme=deep-ocean]{--bg-dark:#022c22;--bg-gradient:linear-gradient(135deg, #064e3b 0%, #020617 100%);--glass-bg:#ffffff0a;--glass-bg-strong:#0000004d;--glass-bg-hover:#ffffff14;--glass-bg-hover-strong:#ffffff1f;--glass-border:#10b9811a;--glass-border-hover:#10b9814d;--glass-border-light:#10b98133;--modal-bg:#022c22f2;--key-white-bg:#ffffff0f;--key-white-hover:#ffffff1a;--key-black-bg:#020617;--key-black-hover:#0f172a;--key-black-active:#020617;--active-glow:#14b8a6cc;--active-glow-subtle:#14b8a64d;--active-glow-medium:#14b8a666;--active-bg:#14b8a666;--active-bg-subtle:#14b8a626;--active-border:#14b8a680;--active-bg-radial:radial-gradient(circle at 50% 80%, #14b8a699 0%, #14b8a61a 50%, transparent 80%);--active-bg-black-radial:radial-gradient(circle at 50% 80%, #14b8a6b3 0%, #000c 60%);--text-primary:#fff;--text-secondary:#ccfbf1;--text-white:#fff;--accent:#14b8a6}[data-theme=crimson-eclipse]{--bg-dark:#1a0505;--bg-gradient:linear-gradient(135deg, #3a0808 0%, #0a0000 100%);--glass-bg:#ffffff0a;--glass-bg-strong:#0000004d;--glass-bg-hover:#ffffff14;--glass-bg-hover-strong:#ffffff1f;--glass-border:#dc26261a;--glass-border-hover:#dc26264d;--glass-border-light:#dc262633;--modal-bg:#1a0505f2;--key-white-bg:#ffffff0d;--key-white-hover:#ffffff1a;--key-black-bg:#000;--key-black-hover:#100;--key-black-active:#000;--active-glow:#dc2626e6;--active-glow-subtle:#dc26264d;--active-glow-medium:#dc262680;--active-bg:#dc262666;--active-bg-subtle:#dc262626;--active-border:#dc262699;--active-bg-radial:radial-gradient(circle at 50% 80%, #dc2626b3 0%, #dc26261a 50%, transparent 80%);--active-bg-black-radial:radial-gradient(circle at 50% 80%, #dc2626cc 0%, #000000e6 60%);--text-primary:#fff;--text-secondary:#fee2e2;--text-white:#fff;--accent:#dc2626}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-gradient);color:var(--text-primary);flex-direction:column;min-height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;display:flex;overflow:hidden}.glass-panel{background:var(--glass-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:12px}.app-container{flex-direction:column;gap:1.5rem;width:100%;max-width:1200px;height:100vh;margin:0 auto;padding:1.5rem;display:flex}.app-header{flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.5rem;display:flex}.preset-selector{align-items:center;gap:.8rem;display:flex}.preset-selector select{background:var(--glass-bg-strong) var(--select-arrow) no-repeat right .8rem center/1em;color:var(--text-primary);border:1px solid var(--glass-border);cursor:pointer;appearance:none;border-radius:6px;outline:none;padding:.5rem 2.5rem .5rem 1rem;font-size:1rem}.title{letter-spacing:2px;color:var(--text-primary);text-transform:uppercase;font-size:1.5rem;font-weight:600}.btn{background:var(--glass-bg-hover);border:1px solid var(--glass-border);color:var(--text-primary);cursor:pointer;border-radius:6px;padding:.5rem 1rem;font-family:inherit;font-size:.9rem;transition:all .2s}.btn:hover{background:var(--glass-bg-hover-strong)}.btn.active{background:var(--accent);color:var(--text-white);border-color:var(--accent)}.keyboard-container{flex-grow:1;justify-content:center;align-items:center;min-height:0;padding:0;display:flex;position:relative}.piano{width:100%;max-width:900px;height:100%;max-height:400px;box-shadow:var(--shadow-lg);border-radius:8px;display:flex;position:relative;overflow:hidden}.grid-keyboard{grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(4,1fr);gap:1.5rem;width:100%;max-width:800px;height:100%;max-height:450px;display:grid}.grid-pad{background:var(--glass-bg);border:1px solid var(--glass-border);cursor:pointer;-webkit-user-select:none;user-select:none;box-shadow:var(--shadow-sm);border-radius:16px;justify-content:center;align-items:center;transition:all .2s;display:flex;position:relative;overflow:hidden}.grid-pad:hover{background:var(--glass-bg-hover);border-color:var(--glass-border-hover);transform:translateY(-2px)}.grid-pad.active{background:var(--active-bg-subtle);box-shadow:0 0 40px var(--active-glow) inset, 0 0 15px var(--active-glow);border-color:var(--active-border);transform:translateY(2px)}.grid-pad.active:after{content:"";background:var(--accent);height:4px;box-shadow:0 0 15px var(--accent);border-bottom-right-radius:16px;border-bottom-left-radius:16px;animation:2s infinite alternate glow-pulse;position:absolute;bottom:0;left:0;right:0}.grid-pad.disabled{opacity:.5;pointer-events:none}.pad-label{z-index:10;color:var(--text-white);pointer-events:none;font-size:1.8rem;font-weight:700;transition:color .2s;position:relative}.grid-pad.active .pad-label{color:var(--text-white)}.key{cursor:pointer;-webkit-user-select:none;user-select:none;justify-content:center;align-items:flex-end;padding-bottom:2rem;font-weight:500;transition:background .2s,box-shadow .2s;display:flex;position:relative;overflow:hidden}.key-label{z-index:10;color:var(--text-white);pointer-events:none;font-size:1.2rem;font-weight:600;transition:color .2s;position:relative}.key-white .key-label{color:var(--key-white-text,var(--text-white))}.key-white{background:var(--key-white-bg);z-index:1;flex:1}.key-white:before{content:"";background:var(--glass-bg-strong);z-index:5;width:1px;position:absolute;top:60%;bottom:0;right:0}.key-white.key-id-e:before,.key-white.key-id-b:before{top:0}.key-white:last-child:before{display:none}.key-white:hover{background-color:var(--key-white-hover);background-image:radial-gradient(circle at 50% 90%, var(--active-glow-subtle) 0%, transparent 70%);box-shadow:inset 0 -20px 20px -10px var(--active-glow-medium)}.key-black{background:var(--key-black-bg);z-index:2;border-bottom-left-radius:4px;width:10%;height:60%;margin-left:-5%;position:absolute}.key-black .key-label{color:#fffc}.key-black:hover{background:var(--key-black-hover);box-shadow:0 0 15px var(--active-glow-subtle)}.key-black.cs{left:14.2857%}.key-black.ds{left:28.5714%}.key-black.fs{left:57.1429%}.key-black.gs{left:71.4286%}.key-black.as{left:85.7143%}.key.active{background:var(--active-bg-radial);box-shadow:0 0 20px var(--active-glow);border-color:var(--active-border)}.key-black.active{background:var(--active-bg-black-radial)}.key.active .key-label{color:var(--text-active,var(--text-white))}.key.active:after{content:"";background:var(--accent);height:4px;box-shadow:0 0 15px var(--accent);border-bottom-right-radius:4px;border-bottom-left-radius:4px;animation:2s infinite alternate glow-pulse;position:absolute;bottom:0;left:0;right:0}@keyframes glow-pulse{0%{opacity:.6;box-shadow:0 0 10px var(--accent)}to{opacity:1;box-shadow:0 0 25px var(--accent)}}.ripple-container{border-radius:inherit;pointer-events:none;z-index:1;width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden}.ripple{border:1px solid var(--accent);opacity:0;background-color:#0000;border-radius:50%;width:20px;height:20px;margin-top:-10px;margin-left:-10px;animation:3s cubic-bezier(.25,.46,.45,.94) infinite water-drop;position:absolute;top:50%;left:50%;transform:scale(0)}.ripple-1{animation-delay:0s}.ripple-2{animation-delay:1.5s}.ripple-3{display:none}@keyframes water-drop{0%{opacity:.5;border-width:2px;transform:scale(.5)}to{opacity:0;border-width:1px;transform:scale(15)}}.key.disabled{cursor:not-allowed;box-shadow:none;filter:grayscale()}.key.disabled:hover{box-shadow:none}.key-white.disabled{background:var(--glass-bg-hover);opacity:.3}.key-white.disabled:hover{background:#ffffff0d}.key-black.disabled{opacity:1;background:#1a1e2e}.key-black.disabled:hover{background:#1a1e2e}.control-bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.5rem;padding:1rem;display:flex}.control-group{flex-direction:column;gap:.5rem;display:flex}.control-group.volume-group{flex-grow:1;min-width:250px;max-width:600px}.control-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px;font-size:.85rem;font-weight:600}.octave-controls{background:var(--glass-bg-strong);border-radius:6px;display:flex;overflow:hidden}.octave-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;padding:.5rem 1rem;transition:all .2s}.octave-btn:hover{background:var(--glass-bg-hover);color:var(--text-primary)}.octave-btn.active{background:var(--glass-bg-hover-strong);color:var(--text-white)}.volume-control{align-items:center;gap:1rem;width:100%;display:flex}.volume-slider{appearance:none;background:var(--glass-bg-hover-strong);border-radius:6px;outline:none;flex-grow:1;height:12px}.volume-slider::-webkit-slider-thumb{appearance:none;background:var(--text-primary);cursor:pointer;border-radius:4px;width:32px;height:20px;transition:transform .1s;box-shadow:0 0 10px #0006}.volume-slider::-moz-range-thumb{appearance:none;background:var(--text-primary);cursor:pointer;border:none;border-radius:4px;width:32px;height:20px;transition:transform .1s;box-shadow:0 0 10px #0006}.volume-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.volume-slider::-moz-range-thumb:hover{transform:scale(1.2)}.volume-value{text-align:right;font-variant-numeric:tabular-nums;width:40px;color:var(--text-primary)}.presets-overlay{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:100;background:#090b14b3;flex-direction:column;padding:2rem;display:flex;position:absolute;inset:0;overflow-y:auto}.overlay-header{justify-content:space-between;align-items:center;margin-bottom:2rem;display:flex}.dropzone-grid{flex-grow:1;grid-template-columns:repeat(6,1fr);grid-auto-rows:1fr;gap:1rem;display:grid}.dropzone{text-align:center;cursor:pointer;background:#0003;border:2px dashed #ffffff1a;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;padding:1.5rem;transition:all .2s;display:flex;position:relative}.dropzone-clear{color:#ffffff80;cursor:pointer;opacity:0;background:#ffffff1a;border:none;border-radius:12px;justify-content:center;align-items:center;width:24px;height:24px;font-size:12px;line-height:1;transition:all .2s;display:flex;position:absolute;top:8px;right:8px}.dropzone:hover .dropzone-clear{opacity:1}.dropzone-clear:hover{color:#ef4444;background:#ef444433}.dropzone:hover,.dropzone.active{border-color:var(--accent);background:#3b82f60d}.dropzone-key{color:var(--text-primary);pointer-events:none;margin-bottom:.5rem;font-size:1.5rem;font-weight:600}.dropzone-status{color:var(--text-secondary);pointer-events:none;font-size:.8rem}.dropzone.filled .dropzone-status{color:var(--accent)}@media (width<=768px){body{overflow:hidden auto}.app-container{height:auto;min-height:100vh}.keyboard-container{align-items:flex-start}.grid-keyboard{gap:1rem;max-height:none;padding-bottom:2rem;grid-template-rows:repeat(4,auto)!important;grid-template-columns:repeat(3,1fr)!important;height:auto!important}.grid-pad{aspect-ratio:1!important}.app-header{flex-wrap:wrap;justify-content:center;gap:1rem}.header-left,.header-center,.header-right{width:100%;justify-content:center!important}.volume-group{display:none!important}.dropzone-grid{grid-auto-rows:minmax(100px,auto);grid-template-columns:repeat(2,1fr)!important}.app-container{padding:.5rem}.control-bar{justify-content:center}}@media (width<=480px){.grid-keyboard{grid-template-rows:repeat(4,auto)!important;grid-template-columns:repeat(3,1fr)!important;gap:.65rem!important}.pad-label{font-size:1.4rem}}