:root{color-scheme:dark;font-family:Segoe UI,system-ui,-apple-system,sans-serif;line-height:1.5;--bg: #0d0d1a;--surface: #151528;--surface2: #1a1a35;--border: rgba(255, 255, 255, .08);--text: #e8e8f0;--text-dim: rgba(255, 255, 255, .5);--accent: #7c3aed;--accent2: #06b6d4;--accent3: #f43f5e;--glow-purple: rgba(124, 58, 237, .4);--glow-cyan: rgba(6, 182, 212, .4)}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:var(--bg);color:var(--text)}.app{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:1.5rem 1rem;gap:1.5rem;max-width:960px;margin:0 auto}.header{text-align:center;width:100%}.header h1{font-size:2rem;font-weight:700;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.03em}.header p{color:var(--text-dim);font-size:.85rem;margin-top:.25rem}.visualizer-wrap{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:1rem;overflow:hidden;position:relative}.visualizer-wrap canvas{display:block;width:100%;height:160px}.visualizer-label{position:absolute;top:.75rem;left:1rem;font-size:.65rem;text-transform:uppercase;letter-spacing:.15em;color:var(--text-dim);pointer-events:none}.piano-section{width:100%}.piano-section h2{font-size:.75rem;text-transform:uppercase;letter-spacing:.15em;color:var(--text-dim);margin-bottom:.75rem}.piano-wrap{display:flex;justify-content:center;position:relative;height:160px;user-select:none;-webkit-user-select:none}.piano-key{position:relative;cursor:pointer;border:1px solid rgba(255,255,255,.1);transition:all .08s ease;display:flex;align-items:flex-end;justify-content:center;padding-bottom:.5rem}.piano-key.white{width:52px;height:160px;background:linear-gradient(180deg,#e8e8f0,#d0d0e0);border-radius:0 0 6px 6px;z-index:1;color:#333;font-size:.65rem;font-weight:600}.piano-key.white:hover{background:linear-gradient(180deg,#f0f0ff,#d8d8f0)}.piano-key.white.active{background:linear-gradient(180deg,var(--accent),#6d28d9);box-shadow:0 0 20px var(--glow-purple),0 4px 12px #0000004d;color:#fff;transform:scaleY(.98);transform-origin:top}.piano-key.black{width:34px;height:105px;background:linear-gradient(180deg,#2a2a3a,#1a1a28);border-radius:0 0 4px 4px;z-index:2;margin-left:-17px;margin-right:-17px;color:#ffffff80;font-size:.55rem;font-weight:600}.piano-key.black:hover{background:linear-gradient(180deg,#35354a,#252538)}.piano-key.black.active{background:linear-gradient(180deg,var(--accent2),#0891b2);box-shadow:0 0 20px var(--glow-cyan),0 4px 12px #0000004d;color:#fff;transform:scaleY(.96);transform-origin:top}.piano-key .key-label{pointer-events:none}.controls-section{width:100%;display:flex;flex-wrap:wrap;gap:1rem}.control-group{flex:1;min-width:140px;background:var(--surface);border:1px solid var(--border);border-radius:.75rem;padding:1rem}.control-group label{display:block;font-size:.65rem;text-transform:uppercase;letter-spacing:.12em;color:var(--text-dim);margin-bottom:.5rem}.control-group select,.control-group input[type=range]{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:.4rem;color:var(--text);padding:.4rem .5rem;font-size:.85rem;outline:none;cursor:pointer}.control-group select:focus{border-color:var(--accent)}input[type=range]{-webkit-appearance:none;height:6px;border-radius:3px;background:var(--surface2);border:none;padding:0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer;box-shadow:0 0 8px var(--glow-purple)}.range-val{text-align:right;font-size:.75rem;color:var(--accent2);margin-top:.25rem;font-family:ui-monospace,monospace}.wave-btns{display:flex;gap:.4rem}.wave-btn{flex:1;padding:.4rem .2rem;border:1px solid var(--border);border-radius:.4rem;background:var(--surface2);color:var(--text-dim);font-size:.7rem;cursor:pointer;text-transform:uppercase;letter-spacing:.05em;transition:all .15s}.wave-btn:hover{border-color:var(--accent);color:var(--text)}.wave-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 12px var(--glow-purple)}.sequencer-section{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:1rem;padding:1.25rem}.seq-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.seq-header h2{font-size:.75rem;text-transform:uppercase;letter-spacing:.15em;color:var(--text-dim)}.seq-controls{display:flex;gap:.5rem;align-items:center}.seq-btn{padding:.35rem .75rem;border:1px solid var(--border);border-radius:.4rem;background:var(--surface2);color:var(--text);font-size:.8rem;cursor:pointer;transition:all .15s}.seq-btn:hover{border-color:var(--accent)}.seq-btn.playing{background:var(--accent3);border-color:var(--accent3);box-shadow:0 0 12px #f43f5e4d}.seq-bpm{display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--text-dim)}.seq-bpm input{width:48px;text-align:center;background:var(--surface2);border:1px solid var(--border);border-radius:.3rem;color:var(--text);padding:.25rem;font-size:.8rem;outline:none}.seq-grid{display:grid;gap:3px;overflow-x:auto}.seq-row{display:flex;gap:3px;align-items:center}.seq-row-label{width:36px;font-size:.6rem;color:var(--text-dim);text-align:right;padding-right:.4rem;font-family:ui-monospace,monospace;flex-shrink:0}.seq-cell{flex:1;min-width:20px;height:28px;border-radius:3px;border:1px solid rgba(255,255,255,.04);background:var(--surface2);cursor:pointer;transition:all .1s}.seq-cell:hover{border-color:#ffffff26}.seq-cell.active{background:var(--accent);border-color:var(--accent);box-shadow:0 0 8px var(--glow-purple)}.seq-cell.current{border-color:var(--accent2);box-shadow:0 0 6px var(--glow-cyan)}.seq-cell.active.current{background:var(--accent2);box-shadow:0 0 12px var(--glow-cyan)}@media(max-width:600px){.app{padding:1rem .5rem}.header h1{font-size:1.5rem}.piano-key.white{width:36px;height:130px}.piano-key.black{width:24px;height:85px;margin-left:-12px;margin-right:-12px}.piano-wrap{height:130px}.controls-section{flex-direction:column}}