:root{--bg: #05070d;--panel: rgba(12, 18, 32, .62);--panel-line: rgba(80, 130, 180, .22);--cyan: #22d3ee;--magenta: #e879f9;--text: #d6ecfb;--dim: #6f8aa6;--glow-cyan: 0 0 14px rgba(34, 211, 238, .55);--glow-mag: 0 0 14px rgba(232, 121, 249, .5);font-family:JetBrains Mono,ui-monospace,SF Mono,Menlo,Consolas,monospace;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}html{overscroll-behavior:none}body{background:var(--bg);color:var(--text);-webkit-tap-highlight-color:transparent;touch-action:manipulation;overflow-x:hidden}body:before{content:"";position:fixed;inset:0;z-index:-2;background:radial-gradient(60% 50% at 12% 0%,rgba(34,211,238,.16),transparent 60%),radial-gradient(55% 55% at 100% 100%,rgba(232,121,249,.14),transparent 60%),linear-gradient(180deg,#05070d,#04060b)}body:after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(rgba(90,150,200,.05) 1px,transparent 1px) 0 0 / 100% 34px,linear-gradient(90deg,rgba(90,150,200,.05) 1px,transparent 1px) 0 0 / 34px 100%;mask-image:radial-gradient(120% 100% at 50% 0%,#000 55%,transparent 100%)}#root:before{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0 2px,rgba(0,0,0,.16) 3px);mix-blend-mode:overlay}.app{min-height:100dvh;display:flex;flex-direction:column;gap:12px;width:100%;max-width:1180px;min-width:0;margin:0 auto;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}.stage,.stage>*,.panel{min-width:0;max-width:100%}.topbar{display:flex;align-items:baseline;gap:12px}.brand{font-weight:800;letter-spacing:.34em;font-size:20px;color:var(--cyan);text-shadow:var(--glow-cyan)}.brand-sub{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--dim)}.spacer{flex:1}.panel{background:var(--panel);border:1px solid var(--panel-line);border-radius:12px;padding:12px;backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);box-shadow:inset 0 1px #ffffff0a,0 10px 30px -18px #000}.panel-title{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--cyan);margin-bottom:10px}.panel-title .dim,.dim{color:var(--dim)}.stage{display:grid;grid-template-columns:1fr;gap:12px;flex:1;min-height:0}@media(min-width:860px){.stage{grid-template-columns:1fr 320px;grid-template-rows:auto auto auto 1fr auto auto;grid-template-areas:"viz viz" "lib lib" "trx xy" "seq xy" "mpk mpk" "song song";align-items:stretch}.song-panel{grid-area:song}.viz-panel{grid-area:viz}.lib-panel{grid-area:lib}.transport{grid-area:trx}.seq{grid-area:seq}.xy-panel{grid-area:xy}.mpk-panel{grid-area:mpk}}.viz-panel{padding:8px}.viz{display:block;width:100%;height:110px;border-radius:8px;background:#03050b}@media(min-width:860px){.viz{height:150px}}.transport{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.play-btn{width:58px;height:58px;border-radius:50%;border:1px solid rgba(34,211,238,.6);background:radial-gradient(circle at 50% 35%,#22d3ee40,#060c16e6);color:var(--cyan);font-size:22px;cursor:pointer;box-shadow:var(--glow-cyan);transition:transform .08s,box-shadow .15s;flex:0 0 auto}.play-btn:active{transform:scale(.94)}.play-btn.on{border-color:var(--magenta);color:var(--magenta);box-shadow:var(--glow-mag);background:radial-gradient(circle at 50% 35%,#e879f947,#060c16e6)}.knob-col{display:flex;flex-direction:column;gap:5px;min-width:120px;flex:1 1 120px}.knob-col label{font-size:10px;letter-spacing:.18em;color:var(--dim);text-transform:uppercase}.knob-col b{color:var(--text)}.t-actions{display:flex;gap:8px}input[type=range]{-webkit-appearance:none;appearance:none;height:4px;border-radius:3px;background:linear-gradient(90deg,var(--cyan),rgba(80,130,180,.25));outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#06101c;border:2px solid var(--cyan);box-shadow:var(--glow-cyan);cursor:pointer}input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#06101c;border:2px solid var(--cyan);box-shadow:var(--glow-cyan);cursor:pointer}button.mini{background:transparent;border:1px solid var(--panel-line);color:var(--text);border-radius:7px;padding:8px 10px;font:inherit;font-size:11px;letter-spacing:.1em;cursor:pointer;transition:border-color .15s,color .15s,box-shadow .15s}button.mini:hover{border-color:var(--cyan);color:var(--cyan);box-shadow:var(--glow-cyan)}button.install{border-color:var(--magenta);color:var(--magenta)}button.mini.rec.armed{border-color:#ff3b6b;color:#ff6b8a;box-shadow:0 0 12px #ff3b6b8c;animation:recpulse 1s ease-in-out infinite}@keyframes recpulse{0%,to{box-shadow:0 0 8px #ff3b6b66}50%{box-shadow:0 0 18px #ff3b6bcc}}.seq{overflow:hidden}.seq-grid{display:flex;flex-direction:column;gap:6px;touch-action:none;user-select:none}.seq-row{display:grid;grid-template-columns:58px 1fr;align-items:center;gap:8px}.seq-label{display:flex;align-items:center;gap:6px;background:transparent;border:none;color:var(--text);font:inherit;font-size:10px;letter-spacing:.08em;cursor:pointer;padding:0;text-align:left}.seq-label.muted{color:var(--dim);opacity:.5;text-decoration:line-through}.seq-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 8px currentColor}.seq-cells{display:grid;grid-template-columns:repeat(16,1fr);gap:4px}.cell{aspect-ratio:1;min-height:20px;border-radius:5px;background:#ffffff09;border:1px solid rgba(120,160,200,.14);transition:background .08s,box-shadow .12s,transform .05s}.cell.beat{border-left:1px solid rgba(34,211,238,.4)}.cell.on{background:color-mix(in srgb,var(--c) 80%,transparent);border-color:var(--c);box-shadow:0 0 10px -1px var(--c),inset 0 0 6px -2px #ffffffe6}.cell.play{box-shadow:inset 0 0 0 1px #ffffff80}.cell.on.play{box-shadow:0 0 16px 0 var(--c),inset 0 0 0 1px #fff;transform:scale(1.06)}.xy-panel{display:flex;flex-direction:column}.xy{position:relative;flex:1;width:100%;aspect-ratio:1;min-height:150px;border-radius:10px;background:radial-gradient(120% 120% at 0% 100%,rgba(34,211,238,.14),transparent 55%),radial-gradient(120% 120% at 100% 0%,rgba(232,121,249,.14),transparent 55%),#03050b;border:1px solid var(--panel-line);overflow:hidden;touch-action:none;cursor:crosshair;background-image:linear-gradient(rgba(90,150,200,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(90,150,200,.08) 1px,transparent 1px);background-size:10% 10%,10% 10%}.xy-scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0 6px,rgba(34,211,238,.04) 7px)}.xy-cross{position:absolute;width:22px;height:22px;border-radius:50%;transform:translate(-50%,50%);border:2px solid #fff;background:radial-gradient(circle,#22d3eed9,#e879f966);box-shadow:0 0 18px 3px #22d3eeb3;pointer-events:none}.hint{text-align:center;font-size:10px;letter-spacing:.12em;color:var(--dim);text-transform:uppercase}.lib-panel{display:flex;align-items:center;gap:10px;padding:9px 12px;flex-wrap:wrap;transition:border-color .15s,box-shadow .15s}.lib-panel.drag{border-color:var(--cyan);box-shadow:var(--glow-cyan)}.lib-title{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);flex:0 0 auto}.lib-list{display:flex;gap:8px;overflow-x:auto;flex:1 1 140px;min-width:0;padding:2px;scrollbar-width:thin}.lib-empty{font-size:10px;letter-spacing:.08em;color:var(--dim)}.lib-chip{display:inline-flex;align-items:stretch;flex:0 0 auto;border:1px solid var(--panel-line);border-radius:8px;overflow:hidden;background:#ffffff08}.lib-chip-load{display:inline-flex;align-items:center;gap:7px;background:transparent;border:none;color:var(--text);font:inherit;font-size:11px;letter-spacing:.04em;padding:6px 9px;cursor:pointer;white-space:nowrap}.lib-chip-load:hover{color:var(--cyan)}.lib-chip-bpm{font-size:9px;color:var(--dim)}.lib-chip-x{background:transparent;border:none;border-left:1px solid var(--panel-line);color:var(--dim);font-size:10px;padding:0 7px;cursor:pointer}.lib-chip-x:hover{color:var(--magenta)}.song-panel{border-color:#e879f947}.song-title{font-size:11px;font-weight:800;letter-spacing:.2em;color:var(--magenta);text-shadow:0 0 12px rgba(232,121,249,.4)}.song-sum{font-size:10px;letter-spacing:.08em}.song-body{display:flex;flex-direction:column;gap:12px;margin-top:10px}.song-track{display:flex;align-items:stretch;gap:8px;overflow-x:auto;padding:4px 2px;min-height:62px;scrollbar-width:thin}.song-sec{flex:0 0 auto;min-width:128px;display:flex;flex-direction:column;gap:6px;padding:8px;border:1px solid var(--panel-line);border-radius:9px;background:linear-gradient(180deg,#e879f914,#00000040)}.song-sec.playing{border-color:var(--magenta);box-shadow:0 0 16px -2px #e879f9b3}.song-sec-name{font-size:11px;color:var(--text);letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}.song-sec-ctl{display:flex;align-items:center;gap:4px}.song-sec-ctl button{background:transparent;border:1px solid var(--panel-line);color:var(--dim);border-radius:5px;font:inherit;font-size:11px;padding:2px 5px;cursor:pointer;line-height:1}.song-sec-ctl button:hover{color:var(--cyan);border-color:var(--cyan)}.song-reps{display:inline-flex;align-items:center;gap:3px}.song-reps b{color:var(--text);font-size:11px;min-width:26px;text-align:center}.song-sec-ctl .song-x:hover{color:var(--magenta);border-color:var(--magenta)}.song-add{flex:0 0 auto;align-self:center;background:transparent;border:1px dashed var(--panel-line);color:var(--dim);border-radius:9px;font:inherit;font-size:11px;letter-spacing:.08em;padding:10px 12px;cursor:pointer;white-space:nowrap}.song-add:hover{color:var(--cyan);border-color:var(--cyan)}.song-picker{display:flex;flex-wrap:wrap;gap:8px;padding:8px;border:1px solid var(--panel-line);border-radius:9px;background:#0003}.song-picker .lib-chip-load{border:1px solid var(--panel-line);border-radius:7px}.song-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.song-controls .mini:disabled{opacity:.4;cursor:not-allowed}.song-export-bar{height:6px;border-radius:3px;background:#ffffff1a;overflow:hidden}.song-export-fill{height:100%;background:linear-gradient(90deg,var(--cyan),var(--magenta));transition:width .2s}.song-saved{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.mpk-panel{position:relative;overflow:hidden;background:linear-gradient(180deg,#0a0e18cc,#060910db);border-color:#e03c5c47}.mpk-panel:before,.mpk-panel:after{content:"";position:absolute;top:0;bottom:0;width:5px;background:linear-gradient(180deg,#ff3b6b,#b21038);box-shadow:0 0 14px #ff3b6b80}.mpk-panel:before{left:0}.mpk-panel:after{right:0}.mpk-head{display:flex;align-items:center;gap:12px;margin:0 6px 12px}.mpk-title{font-size:12px;font-weight:800;letter-spacing:.24em;color:#ff6b8a;text-shadow:0 0 12px rgba(255,59,107,.45)}.mpk-status{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--panel-line);color:var(--dim);border-radius:999px;padding:4px 10px;font:inherit;font-size:9px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}.mpk-status-dot{width:7px;height:7px;border-radius:50%;background:#556}.mpk-status-dot.live{background:#34d399;box-shadow:0 0 8px #34d399}.mpk-body{display:flex;flex-direction:column;gap:14px;padding:0 6px 4px;user-select:none}.mpk-top{display:flex;align-items:stretch;gap:16px;flex-wrap:wrap}.mpk-joy{flex:0 0 auto;width:64px;height:64px;align-self:center;border-radius:50%;background:radial-gradient(circle at 50% 40%,#10151f,#05070d 70%);border:1px solid rgba(120,160,200,.18);box-shadow:inset 0 3px 10px #000000b3;display:grid;place-items:center}.mpk-joy-puck{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 50% 35%,#2a3346,#0a0e16);border:1px solid rgba(120,160,200,.28)}.mpk-pads{flex:1 1 240px;min-width:0;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:8px;touch-action:none}.mpk-pad{position:relative;min-height:46px;border-radius:8px;border:1px solid rgba(120,160,200,.16);background:linear-gradient(180deg,#ffffff0a,#0000004d);color:var(--dim);font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:6px 8px;transition:box-shadow .08s,transform .05s,border-color .1s,background .1s}.mpk-pad-n{font-size:8px;letter-spacing:.14em;opacity:.7}.mpk-pad-name{font-size:11px;letter-spacing:.08em;color:var(--text)}.mpk-pad.on{border-color:var(--pad);background:color-mix(in srgb,var(--pad) 30%,rgba(0,0,0,.4));box-shadow:0 0 18px -2px var(--pad),inset 0 0 10px -4px #fff;transform:scale(.97)}.mpk-knobs{flex:1 1 auto;min-width:0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px 14px}.mpk-knob-cell{display:flex;flex-direction:column;align-items:center;gap:4px}.mpk-knob{width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 50% 35%,#1a2130,#070a11 72%);border:1px solid rgba(120,160,200,.22);box-shadow:inset 0 2px 6px #0009;position:relative;cursor:ns-resize;touch-action:none}.mpk-knob-ind{position:absolute;left:50%;top:6px;width:2px;height:15px;margin-left:-1px;border-radius:2px;background:var(--cyan);box-shadow:0 0 6px var(--cyan);transform-origin:50% 14px}.mpk-knob-label{font-size:8px;letter-spacing:.08em;color:var(--text);white-space:nowrap}.mpk-keys{position:relative;height:92px;min-width:0;width:100%;touch-action:none}.mpk-keys-white{display:flex;height:100%;gap:2px}.mpk-wkey{flex:1;height:100%;border:1px solid rgba(120,160,200,.2);border-top:none;border-radius:0 0 5px 5px;background:linear-gradient(180deg,#dfe8f2,#aab6c6);cursor:pointer;padding:0}.mpk-wkey.on{background:linear-gradient(180deg,#bff2ff,var(--cyan));box-shadow:0 0 16px -1px var(--cyan)}.mpk-bkey{position:absolute;top:0;height:58%;border-radius:0 0 4px 4px;background:linear-gradient(180deg,#1a2130,#05070d);border:1px solid #000;cursor:pointer;padding:0;z-index:2}.mpk-bkey.on{background:linear-gradient(180deg,#7be0f5,var(--cyan));box-shadow:0 0 16px 0 var(--cyan)}.rec-pill{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--panel-line);color:var(--dim);border-radius:999px;padding:5px 12px;font:inherit;font-size:10px;letter-spacing:.14em;cursor:pointer;transition:border-color .15s,color .15s,box-shadow .15s}.rec-pill .rec-dot{width:8px;height:8px;border-radius:50%;background:#ff3b6b}.rec-pill:hover{border-color:#ff3b6b80;color:#ff6b8a}.rec-pill.on{border-color:#ff3b6b;color:#ff6b8a;box-shadow:0 0 12px #ff3b6b80}.rec-pill.on .rec-dot{animation:recpulse 1s ease-in-out infinite}.audio-pill{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--panel-line);color:var(--dim);border-radius:999px;padding:5px 10px;font:inherit;font-size:10px;letter-spacing:.14em;cursor:pointer;transition:border-color .15s,color .15s,box-shadow .15s}.audio-pill .audio-dot{width:8px;height:8px;border-radius:50%;background:#fbbf24;box-shadow:0 0 6px #fbbf24}.audio-pill:not(.on){border-color:#fbbf2480;color:#fbbf24}.audio-pill.on{border-color:var(--panel-line);color:#34d399}.audio-pill.on .audio-dot{background:#34d399;box-shadow:0 0 8px #34d399}@media(max-width:560px){.topbar{flex-wrap:wrap;row-gap:6px}.brand{font-size:17px;letter-spacing:.22em}.xy{aspect-ratio:auto;height:150px;min-height:150px}.seq-row{grid-template-columns:38px 1fr;gap:5px}.seq-cells{gap:3px}.cell{min-height:13px;border-radius:4px}.seq-label{font-size:9px}.seq-dot{width:7px;height:7px}.mpk-joy{display:none}.mpk-pads,.mpk-knobs{flex-basis:100%}.mpk-keys{height:84px}.knob-col{min-width:90px}}