:root{--bg: #070818;--bg-panel: rgba(14, 16, 40, .82);--border: rgba(0, 255, 255, .22);--cyan: #00ffff;--magenta: #ff00c8;--text: #e8f6ff;--muted: #8aa0b8;--danger: #ff4d6d;--glow-cyan: 0 0 18px rgba(0, 255, 255, .35);--glow-magenta: 0 0 18px rgba(255, 0, 200, .35);--font-display: "Orbitron", sans-serif;--font-ui: "Rajdhani", sans-serif}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:var(--font-ui)}body{overflow-x:hidden}.logo{font-family:var(--font-display);letter-spacing:.18em;margin:0;color:var(--cyan);text-shadow:var(--glow-cyan)}.tagline{margin:.25rem 0 0;color:var(--muted)}.bg-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}.layout{position:relative;z-index:1;max-width:1400px;margin:0 auto;padding:1rem;display:grid;gap:1rem}.app-header{position:relative;z-index:1;padding:1.25rem 1rem 0;max-width:1400px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:1rem}.header-left{flex:1}.header-nav{display:flex;align-items:center;gap:.75rem}.nav-btn{appearance:none;border:1px solid var(--border);background:#00ffff14;color:var(--cyan);border-radius:999px;padding:.5rem 1rem;font-family:var(--font-display);font-size:.72rem;letter-spacing:.08em;cursor:pointer;transition:.2s ease;white-space:nowrap}.nav-btn:hover{border-color:var(--cyan);box-shadow:var(--glow-cyan)}.btn-small{padding:.3rem .7rem;font-size:.65rem}.panel{background:var(--bg-panel);border:1px solid var(--border);border-radius:14px;padding:.65rem;backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px #ffffff08}.panel h2,.panel h3{font-family:var(--font-display);font-size:.95rem;letter-spacing:.08em;margin:0 0 .75rem;color:var(--cyan)}.panel-header{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.5rem}.panel-header h2{margin:0}.panel-header-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}.grid-header-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}.chord-cell{min-width:4.5rem}.transport-panel{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem}.transport-left,.transport-right{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}.btn{appearance:none;border:1px solid var(--border);background:#00ffff14;color:var(--text);border-radius:999px;padding:.45rem .9rem;font-family:var(--font-display);font-size:.72rem;letter-spacing:.06em;cursor:pointer;transition:.2s ease}.btn:hover{border-color:var(--cyan);box-shadow:var(--glow-cyan)}.btn-primary{background:linear-gradient(135deg,#00ffff40,#ff00c833);border-color:var(--cyan)}.btn-danger{border-color:#ff4d6d80;color:#ffd6de}.btn-large{padding:.8rem 1.4rem;font-size:.85rem}.file-btn{display:inline-flex;align-items:center}.field,.field-inline,.toggle{display:grid;gap:.35rem;font-size:.9rem;color:var(--muted)}.field-inline{grid-template-columns:auto 1fr auto;align-items:center;gap:.5rem}.control-grid,.drum-grid,.preset-row,.panels-row,.visual-row,.instrument-rack{display:grid;gap:.5rem}.instrument-rack-grid{display:grid;grid-template-columns:1fr 1fr 1.35fr;gap:.5rem;align-items:start}.bass-chain,.chord-chain{display:flex;flex-direction:column;gap:.25rem}.chord-chain,.drum-chain{min-width:0}.signal-arrow{text-align:center;color:var(--cyan);font-size:.85rem;line-height:1;opacity:.65;padding:0}.bass-voice-select,.chord-voice-select,.voice-select{margin-bottom:.35rem}.panel--compact{padding:.5rem}.panel-header--compact{margin-bottom:.35rem}.panel-header--compact h2{font-size:.85rem}.route-badge{font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border:1px solid rgba(0,255,255,.2);border-radius:999px;padding:.2rem .5rem;white-space:nowrap}.route-badge--insert{color:var(--magenta);border-color:#ff00c859}.lane-chips{display:flex;gap:.3rem;flex-wrap:wrap}.lane-chip{font-size:.55rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan);background:#00ffff14;border:1px solid rgba(0,255,255,.15);border-radius:999px;padding:.15rem .4rem}.control-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.drum-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}.panels-row{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.performance-row{display:grid;grid-template-columns:minmax(280px,360px) 1fr;gap:1rem;align-items:start}.visual-row{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.viz-card{background:#080a1cbf;border:1px solid var(--border);border-radius:12px;padding:.75rem}.viz-card h3{margin:0 0 .5rem;font-size:.8rem;color:var(--magenta);letter-spacing:.08em}.viz-card canvas,#scope-canvas,#spectrum-canvas,#lfo-canvas{width:100%;height:120px;display:block;border-radius:8px;background:#00000059}input[type=range]{width:100%;accent-color:var(--cyan)}input[type=text],input[type=number],select{width:100%;background:#00000059;border:1px solid var(--border);color:var(--text);border-radius:8px;padding:.45rem .6rem}.grid-wrap{overflow-x:auto}.step-grid{width:100%;border-collapse:separate;border-spacing:4px}.step-grid th,.step-grid td{text-align:center;font-size:.75rem}.row-label{color:var(--magenta);min-width:56px}.row-label-head,.row-label-cell{min-width:5.5rem;vertical-align:middle}.row-label-controls{display:flex;justify-content:center;gap:.2rem;margin-bottom:.2rem}.row-label-controls .hw-toggle-pad{width:1.45rem;height:1.45rem;min-width:1.45rem;padding:0;font-size:.62rem}.row-label-text{display:block;color:var(--magenta);font-size:.72rem;letter-spacing:.04em}.row-label-cell.row-muted .row-label-text{color:var(--muted);opacity:.65}.row-label-cell.row-solo .row-label-text{color:var(--cyan)}.step-head.selected{color:var(--cyan);text-shadow:var(--glow-cyan)}.step-cell{min-width:72px;padding:.35rem;border-radius:10px;background:#ffffff08;border:1px solid transparent}.step-cell.active{border-color:#00ffff73;box-shadow:inset 0 0 12px #00ffff1f}.step-cell.playing{border-color:var(--magenta);box-shadow:var(--glow-magenta)}.pad{width:100%;height:28px;border:none;border-radius:8px;background:linear-gradient(180deg,#ffffff14,#ffffff05);cursor:pointer}.step-cell.active .pad{background:linear-gradient(180deg,#00ffff8c,#0078ff40)}.bass-cell .note-select,.bass-cell .oct-input,.chord-cell .note-select,.chord-cell .oct-input,.vel-input{width:100%;margin-top:.25rem}.randomize-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem}.randomize-label{font-size:.75rem;color:var(--muted);letter-spacing:.06em;margin-right:.15rem}.piano-panel .hint{color:var(--muted);font-size:.75rem;letter-spacing:normal}.piano-bed{position:relative;max-width:720px;margin:0 auto;padding:.75rem;background:linear-gradient(180deg,#14162de6,#080a19f2);border:1px solid var(--border);border-radius:12px;box-shadow:inset 0 2px 12px #00000080}.piano-white-row{display:flex;position:relative;height:150px}.piano-key{border:1px solid rgba(0,0,0,.2);border-radius:0 0 6px 6px;cursor:default;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:.5rem;transition:transform .05s ease,box-shadow .05s ease}.piano-key.white{flex:1;height:100%;background:linear-gradient(180deg,#fafcff,#e8edf5 70%,#c5d0e0);color:#1d2a3a;box-shadow:0 2px 4px #0000004d}.piano-key.black{position:absolute;top:0;width:7.8%;height:58%;z-index:2;background:linear-gradient(180deg,#3a3f55,#1a1d2a);color:#e8f0ff;box-shadow:0 3px 6px #00000080}.piano-key.white.active{transform:translateY(2px);box-shadow:inset 0 -4px 12px #ff00c859;background:linear-gradient(180deg,#e8f4ff,#b8d0e8)}.piano-key.black.active{box-shadow:0 0 16px #ff00c899,inset 0 -2px 8px #00ffff4d}.piano-key .key-label{font-family:var(--font-display);font-size:.7rem;font-weight:600;letter-spacing:.05em}.effects-pad-panel{max-width:none;height:100%}.effects-pad-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.25rem}.effects-pad-header h2{margin:0}.pad-hint{color:var(--muted);font-size:.8rem;margin:0 0 .75rem}.effects-pad{position:relative;width:100%;aspect-ratio:1;max-width:320px;background:linear-gradient(90deg,#00ffff0f,#00ffff1f),linear-gradient(0deg,#ff00c80a,#ff00c824),#00000073;border:1px solid var(--border);border-radius:12px;cursor:crosshair;touch-action:none;overflow:hidden}.pad-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:25% 25%;pointer-events:none}.pad-axis{position:absolute;font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);pointer-events:none}.pad-axis-x{bottom:6px;left:50%;transform:translate(-50%);color:var(--cyan)}.pad-axis-y{top:50%;left:6px;transform:rotate(-90deg) translate(-50%);transform-origin:left center;color:var(--magenta)}.pad-dot{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:radial-gradient(circle,#fff 0%,var(--cyan) 40%,var(--magenta) 100%);box-shadow:0 0 12px var(--cyan),0 0 20px var(--magenta);pointer-events:none;transition:left .03s linear,top .03s linear}.preset-overlay{position:fixed;inset:0;z-index:15;display:none;place-items:center}.preset-overlay.is-open{display:grid}.preset-overlay-backdrop{position:absolute;inset:0;background:#040510bf;backdrop-filter:blur(6px)}.preset-overlay-panel{position:relative;z-index:1;width:min(720px,92vw);max-height:85vh;overflow-y:auto;background:#0a0c20f2;border:1px solid var(--border);border-radius:16px;padding:1.25rem;box-shadow:var(--glow-cyan),var(--glow-magenta)}.preset-overlay-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.preset-overlay-header h2{margin:0;font-family:var(--font-display);color:var(--cyan);letter-spacing:.08em}.preset-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:.75rem}.preset-row .field{flex:1;min-width:140px}.preset-row input[type=text],.preset-row select{min-width:120px}.audio-overlay{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:#040510eb;backdrop-filter:blur(8px)}.audio-overlay.hidden{display:none}.overlay-card{text-align:center;padding:2rem;border:1px solid var(--border);border-radius:18px;background:#0a0c20e6;box-shadow:var(--glow-cyan)}.overlay-card p{color:var(--muted)}.overlay-intro{max-width:32rem;margin:0 auto 1rem;line-height:1.5;font-size:.95rem}.overlay-credit,.footer-credit{margin:1rem 0 0;font-size:.85rem;color:var(--muted)}.overlay-credit a,.footer-credit a{color:var(--cyan);text-decoration:none}.overlay-credit a:hover,.footer-credit a:hover{text-decoration:underline}.app-logo{font-size:inherit}.app-footer{position:relative;z-index:1;max-width:1400px;margin:0 auto;padding:0 1rem 2rem;display:flex;flex-direction:column;align-items:center;gap:.75rem;text-align:center}.share-buttons{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.5rem;margin:.75rem 0}.share-buttons--compact{margin:0}.share-label{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-right:.15rem}.share-btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:50%;border:1px solid var(--border);background:#00000059;color:var(--text);text-decoration:none;cursor:pointer;transition:.15s ease;position:relative;appearance:none;padding:0;font:inherit}.share-btn svg{width:1rem;height:1rem}.share-btn:hover{border-color:var(--cyan);box-shadow:var(--glow-cyan);color:var(--cyan)}.share-btn--facebook:hover{color:#1877f2;border-color:#1877f2;box-shadow:0 0 14px #1877f259}.share-btn--twitter:hover{color:#e7e9ea;border-color:#e7e9ea;box-shadow:0 0 14px #e7e9ea40}.share-btn--reddit:hover{color:#ff4500;border-color:#ff4500;box-shadow:0 0 14px #ff450059}.share-btn--instagram:hover{color:#e1306c;border-color:#e1306c;box-shadow:0 0 14px #e1306c59}.share-btn-toast{position:absolute;bottom:calc(100% + .35rem);left:50%;transform:translate(-50%);padding:.2rem .45rem;border-radius:4px;background:#0a0c20f2;border:1px solid var(--border);font-size:.65rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s ease}.share-btn[data-copied=true] .share-btn-toast{opacity:1}noscript{display:block;max-width:40rem;margin:1rem auto;padding:1rem;color:var(--muted);text-align:center}.top-toggle{margin-bottom:.75rem}.hw-label{display:block;font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:center;margin-bottom:.35rem}.hw-value{display:block;font-family:var(--font-display);font-size:.7rem;color:var(--cyan);text-align:center;margin-top:.25rem}.hw-knob-wrap{display:flex;flex-direction:column;align-items:center;gap:.15rem}.hw-knob{position:relative;width:52px;height:52px;border-radius:50%;cursor:ns-resize;touch-action:none;user-select:none}.hw-knob-sm .hw-knob{width:40px;height:40px}.hw-knob-ring{width:100%;height:100%;border-radius:50%;background:linear-gradient(145deg,#1a1e3a,#0c0e22,#151830);border:2px solid rgba(0,255,255,.25);box-shadow:inset 0 2px 6px #0009,0 2px 8px #0006;position:relative}.hw-knob.is-dragging .hw-knob-ring{border-color:var(--cyan);box-shadow:var(--glow-cyan),inset 0 2px 6px #0009}.hw-knob-indicator{position:absolute;inset:4px;border-radius:50%;pointer-events:none}.hw-knob-indicator:after{content:"";position:absolute;top:2px;left:50%;width:3px;height:10px;margin-left:-1.5px;background:var(--cyan);border-radius:2px;box-shadow:0 0 6px var(--cyan)}.hw-fader-wrap{display:flex;flex-direction:column;align-items:center;height:100%;min-height:96px}.hw-fader{flex:1;width:36px;cursor:ns-resize;touch-action:none;user-select:none;display:flex;align-items:stretch}.hw-fader-track{position:relative;width:100%;flex:1;min-height:72px;background:linear-gradient(180deg,#0a0c1e,#141830);border:1px solid rgba(0,255,255,.2);border-radius:6px;box-shadow:inset 0 2px 8px #00000080}.hw-fader-fill{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(180deg,#00ffff26,#00ffff73);border-radius:0 0 5px 5px;pointer-events:none}.hw-fader-thumb{position:absolute;left:50%;width:28px;height:14px;margin-left:-14px;margin-bottom:-7px;background:linear-gradient(180deg,#3a4058,#1e2238);border:1px solid rgba(0,255,255,.5);border-radius:3px;box-shadow:0 2px 6px #00000080;pointer-events:none}.hw-fader.is-dragging .hw-fader-thumb{border-color:var(--cyan);box-shadow:var(--glow-cyan)}.hw-toggle-pad{appearance:none;border:1px solid rgba(0,255,255,.2);background:linear-gradient(180deg,#1e223ce6,#0c0e20f2);color:var(--muted);border-radius:6px;padding:.4rem .5rem;min-width:42px;cursor:pointer;transition:.15s ease;font-family:var(--font-display);font-size:.6rem;letter-spacing:.08em}.hw-toggle-pad:hover{border-color:#0ff6}.hw-toggle-pad.active{color:var(--cyan);border-color:var(--cyan);background:linear-gradient(180deg,#0ff3,#00788c26);box-shadow:var(--glow-cyan)}.hw-toggle-solo.active{color:#ffe066;border-color:#ffe066;box-shadow:0 0 14px #ffe06666}.hw-toggle-label{display:block}.hw-btn-group-wrap{display:flex;flex-direction:column;gap:.35rem}.hw-btn-group{display:flex;flex-wrap:wrap;gap:3px}.hw-btn-group-item{appearance:none;border:1px solid rgba(0,255,255,.18);background:#00000059;color:var(--muted);border-radius:4px;padding:.3rem .45rem;font-family:var(--font-ui);font-size:.7rem;cursor:pointer;transition:.12s ease;text-transform:capitalize}.hw-btn-group-item:hover{border-color:#00ffff59;color:var(--text)}.hw-btn-group-item.active{color:var(--cyan);border-color:var(--cyan);background:#00ffff1f;box-shadow:inset 0 0 8px #00ffff26}.hw-btn-group-compact .hw-btn-group-item{padding:.25rem .35rem;font-size:.62rem}.hw-section{margin-bottom:.45rem}.hw-section-title{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--magenta);margin:0 0 .5rem}.hw-knob-row{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:flex-start;align-items:flex-end}.hw-rack-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:.65rem}.drum-strip-row{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}.channel-strip{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.5rem .35rem;background:#0003;border:1px solid rgba(0,255,255,.1);border-radius:10px}.channel-strip h3{margin:0;font-size:.75rem;text-transform:uppercase;letter-spacing:.1em}.channel-strip-knobs{display:flex;gap:.35rem}.channel-strip-pads{display:flex;flex-direction:column;gap:.3rem;width:100%}.distortion-header{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem}.effects-rack{display:grid;gap:.45rem}.effects-rack--compact{grid-template-columns:repeat(3,1fr);gap:.35rem}.effects-section{padding:.5rem;background:#00000026;border-radius:8px;border:1px solid rgba(255,255,255,.04)}.effects-section--compact{padding:.35rem .4rem}.effects-section--compact .hw-section-title{margin-bottom:.3rem}.effects-knob-row{gap:.3rem}.drum-machine-select{margin-bottom:.5rem}.drum-load-status{margin:.35rem 0 0;font-size:.72rem;color:var(--magenta);letter-spacing:.06em}.channel-strip-knobs{display:flex;flex-wrap:wrap;gap:.25rem;justify-content:center}@media(max-width:900px){.instrument-rack-grid,.effects-rack--compact{grid-template-columns:1fr}}@media(max-width:720px){.app-header{flex-direction:column;align-items:flex-start}.header-nav{flex-wrap:wrap}.performance-row{grid-template-columns:1fr}.transport-left,.transport-right,.panel-header{flex-direction:column;align-items:stretch}.step-cell{min-width:64px}}