:root{--bg:#050508;--panel:#080a10bd;--line:#3dfff32e;--cyan:#3dfff3;--magenta:#ff2bd6;--amber:#ffb020;--text:#d8f6f3;--dim:#d8f6f36b;--font:"IBM Plex Mono", ui-monospace, monospace;--display:"Syne", "IBM Plex Mono", sans-serif}*{box-sizing:border-box}html,body,#root{background:var(--bg);width:100%;min-height:100%;color:var(--text);font-family:var(--font);margin:0}button,input{font-family:inherit}.app{width:100%;min-height:100dvh;position:relative}.viz-canvas{z-index:0;width:100%;height:100%;position:fixed;inset:0}.scanlines,.vignette{pointer-events:none;z-index:1;position:fixed;inset:0}.scanlines{mix-blend-mode:overlay;opacity:.35;background:repeating-linear-gradient(#ffffff09 0 1px,#0000 2px 4px)}.vignette{box-shadow:inset 0 0 180px 40px #000000b8}.shell{z-index:2;flex-direction:column;gap:8px;width:100%;min-height:100dvh;padding:8px 8px 24px;transition:opacity .5s,filter .5s;display:flex;position:relative;overflow:visible}.shell.off{opacity:0;filter:blur(8px);pointer-events:none}.shell.on{opacity:1}.panel{background:var(--panel);border:1px solid var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:4px;min-height:0;padding:8px 10px;position:relative;box-shadow:inset 0 0 0 1px #0006,0 10px 40px #00000047}.panel:before,.panel:after{content:"";border:1px solid #3dfff373;width:8px;height:8px;position:absolute}.panel:before{border-bottom:0;border-right:0;top:4px;left:4px}.panel:after{border-top:0;border-left:0;bottom:4px;right:4px}.panel-head{letter-spacing:.18em;color:var(--cyan);justify-content:space-between;margin-bottom:8px;font-size:10px;display:flex}.dim{color:var(--dim);letter-spacing:.12em;font-size:10px}.header{grid-template-columns:200px auto 1fr auto auto;align-items:center;gap:10px 16px;display:grid}.brand{align-items:center;gap:10px;display:flex}.brand-mark,.boot-mark{border:1px solid var(--cyan);width:34px;height:34px;color:var(--cyan);font-family:var(--display);place-items:center;font-weight:800;display:grid;box-shadow:0 0 18px #3dfff340}.brand-name,.boot-name{font-family:var(--display);letter-spacing:.28em;font-size:18px;font-weight:800}.brand-sub,.boot-sub{letter-spacing:.18em;color:var(--dim);font-size:10px}.header-cluster,.transport,.mode-row,.io-row,.wave-tools,.ai-row,.voice-row,.slot-row{align-items:center;gap:10px;display:flex}.hw-btn{border:1px solid var(--cyan);min-width:80px;height:36px;color:var(--cyan);letter-spacing:.16em;cursor:pointer;background:#3dfff30f;transition:all .15s}.hw-btn:hover,.chip:hover{background:#3dfff329;box-shadow:0 0 16px #3dfff333}.hw-btn.on,.hw-btn.play.on{background:var(--cyan);color:#041010;box-shadow:0 0 22px #3dfff373}.hw-btn.magenta{border-color:var(--magenta);color:var(--magenta);background:#ff2bd60f}.hw-btn.magenta:hover{background:#ff2bd629}.hw-btn.amber{border-color:var(--amber);color:var(--amber);background:#ffb0200f}.hw-btn.hum{min-width:160px}.hw-btn.hum.on{background:var(--magenta);border-color:var(--magenta);color:#14010f;animation:.8s ease-in-out infinite pulse}.chip{border:1px solid var(--line);color:var(--text);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;background:0 0;padding:7px 10px;font-size:10px}.chip.on{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 12px #3dfff340}.led{background:#2a2e33;border-radius:50%;width:10px;height:10px;box-shadow:inset 0 0 4px #000}.led.live{background:var(--cyan);box-shadow:0 0 12px var(--cyan)}.row-top,.row-bottom{gap:10px;min-height:0;display:grid;overflow:hidden}.row-top{flex:0 0 280px;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:stretch;height:280px}.row-bottom{flex:none;grid-template-columns:.8fr 1.2fr}.seq-panel{flex:none}.row-top>.panel{height:100%;min-height:0;overflow:hidden}.chop-bar{border-top:1px solid var(--line);flex-wrap:nowrap;grid-column:1/-1;align-items:center;gap:10px;min-height:0;padding-top:8px;display:flex}.chop-bar-label{letter-spacing:.18em;color:var(--cyan);font-size:10px}.chop-bar-hint{margin-left:auto}.chop-bar .knob{width:52px}.chop-bar .knob-dial{width:36px;height:36px}.wave-panel{flex-direction:column;height:100%;min-height:0;display:flex}.wave-stage{flex-direction:column;flex:auto;min-height:0;display:flex;position:relative}.wave-panel .wave-canvas{cursor:grab;background:#00000040;border:1px solid #3dfff31f;flex:auto;width:100%;min-height:96px;display:block;position:relative}.wave-mini{cursor:pointer;background:#0000004d;border:1px solid #3dfff31f;border-top:0;flex:0 0 18px;width:100%;height:18px;min-height:0;display:block}.wave-nav{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.pads-panel{flex-direction:column;min-height:0;display:flex;overflow:hidden}.pad-grid{flex:auto;grid-template-rows:repeat(4,minmax(0,1fr));grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;min-height:0;display:grid}.pad{min-width:0;min-height:0;color:var(--text);cursor:pointer;text-align:left;background:linear-gradient(#ffffff0a,#00000040);border:1px solid #3dfff329;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:5px 6px;display:flex;overflow:hidden}.pad.loaded{border-color:#3dfff366}.pad.selected{box-shadow:0 0 0 1px var(--cyan), 0 0 18px #3dfff340}.pad.flash{background:var(--cyan);color:#041010}.pad.assigned .pad-name{color:var(--cyan)}.pad-key{color:var(--dim);text-transform:uppercase;font-size:9px}.pad-name{letter-spacing:.12em;text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:11px;overflow:hidden}.pad-meta{color:var(--dim);font-size:9px}.seq-wrap{grid-template-columns:92px 1fr;gap:8px;display:grid}.seq-labels,.seq-grid{grid-template-rows:16px repeat(16,16px);gap:3px;display:grid}.seq-beats,.seq-row{grid-template-columns:repeat(16,1fr);gap:4px;display:grid}.seq-beats span{color:var(--dim);text-align:center;font-size:9px}.seq-beats .beat{color:var(--amber)}.trk-label{color:var(--text);letter-spacing:.12em;cursor:pointer;background:0 0;border:1px solid #0000;justify-content:space-between;align-items:center;padding:0 4px;font-size:11px;display:flex}.trk-label.on{color:var(--cyan);border-color:var(--line)}.trk-label.mute{opacity:.35}.trk-btns{gap:4px;display:flex}.trk-btns i{color:var(--dim);border:1px solid #0000;padding:1px 3px;font-size:9px;font-style:normal}.trk-btns i.on{color:var(--amber);border-color:var(--amber)}.cell{cursor:pointer;background:#ffffff08;border:1px solid #3dfff31a;height:16px;padding:0}.cell.down{background:#ffb0200d}.cell.active{background:var(--cyan);box-shadow:0 0 12px #3dfff373}.cell.playhead{outline:1px solid var(--amber)}.cell.hit{background:#fff;box-shadow:0 0 18px #ffffffb3}.ai-grid{grid-template-columns:1fr 1fr;gap:16px;display:grid}.ai-title{letter-spacing:.2em;color:var(--magenta);margin-bottom:8px;font-size:10px}.hum-strip{background:#00000040;align-items:flex-end;gap:1px;height:28px;margin:10px 0;display:flex;position:relative}.hum-strip i{background:#3dfff373;flex:1;display:block}.hum-hits b{width:3px;height:100%;position:absolute;top:0}.status-bar{letter-spacing:.16em;color:var(--dim);justify-content:space-between;padding:0 4px 4px;font-size:10px;display:flex}.knob{text-align:center;width:50px}.knob-dial{border:1px solid var(--cyan);cursor:ns-resize;background:radial-gradient(circle at 35% 30%,#ffffff29,#0000 40%),#0b0d12;border-radius:50%;width:34px;height:34px;margin:0 auto;position:relative}.knob-mark{border-radius:50%;position:absolute;inset:5px}.knob-mark:after{content:"";background:var(--cyan);width:2px;height:10px;position:absolute;top:0;left:50%;transform:translate(-50%)}.accent-magenta .knob-dial{border-color:var(--magenta)}.accent-magenta .knob-mark:after{background:var(--magenta)}.accent-amber .knob-dial{border-color:var(--amber)}.accent-amber .knob-mark:after{background:var(--amber)}.knob-readout{color:var(--cyan);margin-top:4px;font-size:10px}.knob-label{letter-spacing:.14em;color:var(--dim);font-size:9px}.boot{z-index:5;color:var(--text);cursor:pointer;background:#05050847;border:0;place-content:center;justify-items:center;gap:10px;display:grid;position:absolute;inset:0}.boot-cta{letter-spacing:.28em;border:1px solid var(--cyan);color:var(--cyan);margin-top:16px;padding:10px 18px;box-shadow:0 0 24px #3dfff333}.file-chip{cursor:pointer}@keyframes pulse{50%{box-shadow:0 0 24px #ff2bd6b3}}@media (width<=1100px){.header{grid-template-columns:1fr 1fr}.row-top,.row-bottom,.ai-grid{grid-template-columns:1fr}}