:root{--bg: #0b0e13;--bg-2: #10151d;--panel: #151a23;--panel-2: #1c2330;--panel-3: #252f3d;--line: #2b3543;--line-soft: rgba(255, 255, 255, .07);--hi: rgba(255, 255, 255, .05);--text: #e9eff6;--muted: #8a97a8;--accent: #00bfff;--accent-2: #b388ff;--warm: #ff7e6b;--radius: 14px;--radius-sm: 9px;--shadow-1: 0 1px 0 var(--hi) inset, 0 6px 20px rgba(0, 0, 0, .35);--shadow-2: 0 1px 0 var(--hi) inset, 0 16px 40px rgba(0, 0, 0, .5);--glow: 0 0 0 1px rgba(126, 232, 250, .5), 0 0 16px rgba(126, 232, 250, .35)}*{box-sizing:border-box}body{margin:0;padding:0 116px 0 16px;background:radial-gradient(1100px 520px at 50% -8%,#182636 0%,transparent 60%),radial-gradient(900px 600px at 100% 110%,#1a1330 0%,transparent 55%),var(--bg);color:var(--text);font:14px/1.45 system-ui,-apple-system,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased}.appbar{position:relative;height:96px;z-index:70;margin:0 -120px 0 -20px;background:radial-gradient(600px 200px at 12% 50%,rgba(126,232,250,.08),transparent 70%),radial-gradient(600px 200px at 88% 50%,rgba(179,136,255,.08),transparent 70%),#090c11;box-shadow:0 10px 26px #00000073;overflow:hidden}.viz-top{width:100%;height:96px;display:block;transform:translateY(9px)}.appbar:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(9,12,17,.35),transparent 30%,transparent 70%,rgba(9,12,17,.55))}.appbar-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 22px;pointer-events:none;z-index:2}.brand{font-size:30px;font-weight:800;letter-spacing:.4px;line-height:1;background:linear-gradient(110deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 14px rgba(126,232,250,.35))}.brand:after{content:"sound design · loops";display:block;margin-top:4px;font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase;background:none;color:var(--muted);-webkit-text-fill-color:var(--muted)}.appbar-transport{pointer-events:auto;margin:0}.appbar-transport .play{min-width:52px;padding:9px 18px;font-size:17px}.master{pointer-events:auto;display:flex;align-items:center;gap:9px;padding:6px 12px;border-radius:10px;background:#0000004d;border:1px solid var(--line)}.master-ico{font-size:9px;font-weight:700;letter-spacing:1.5px;color:var(--accent)}.master input[type=range]{width:130px;accent-color:var(--accent);height:16px;cursor:pointer}.master-val{color:var(--text);font-variant-numeric:tabular-nums;font-weight:600;font-size:12px;min-width:30px}#app{max-width:1280px;margin:0 auto;padding:0 4px 48px}.studio{display:flex;flex-direction:column;gap:14px}.sound-row{display:flex;align-items:stretch;justify-content:space-between;gap:16px}.patch-tools{display:flex;flex-direction:column;gap:8px;flex:0 0 auto;margin:0}.patch-tools button,.patch-tools label.file{width:148px;text-align:center}.patch-tools .play{font-size:18px;font-weight:800;padding:12px 0;color:#04222e;border:none;background:linear-gradient(180deg,var(--accent),#0090c8);box-shadow:0 4px 16px #00bfff66,inset 0 1px #ffffff59}.patch-tools .play.playing{background:linear-gradient(180deg,var(--accent-2),#8a5fe0);color:#160a2c}.patch-tools .play:hover{box-shadow:0 6px 22px #00bfff8c,inset 0 1px #ffffff59}.loops-panel .loops-bar{margin:0 0 10px}.add-meters{display:flex;gap:6px;margin-left:auto}.add-meter{font-weight:700}.toolbar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}.toolbar button,.toolbar label.file{background:linear-gradient(180deg,var(--panel-2),var(--panel));color:var(--text);border:1px solid var(--line);border-radius:var(--radius-sm);padding:9px 15px;font-size:13px;font-weight:500;cursor:pointer;transition:border-color .15s,transform .05s,box-shadow .15s}.toolbar button:hover,.toolbar label.file:hover{border-color:var(--accent);box-shadow:0 0 0 1px #7ee8fa40}.toolbar button:active{transform:translateY(1px)}.toolbar input[type=file]{display:none}.controls{display:flex;align-items:stretch;flex-wrap:wrap;gap:10px}.stage{background:linear-gradient(180deg,var(--panel-2) 0%,var(--panel) 100%);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px 14px;box-shadow:var(--shadow-1);display:flex;flex-direction:column;gap:10px}.stage h3{margin:0;font-size:11px;text-transform:uppercase;letter-spacing:2px;color:var(--accent);font-weight:700}.stage.is-mod{border-style:dashed;border-color:#b388ff99}.stage.is-mod h3{color:var(--accent-2)}.radio{display:flex;flex-direction:column;gap:4px}.radio-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}.radio-row{display:flex;gap:4px}.radio-btn{flex:1;min-width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:var(--panel-3);border:1px solid var(--line);border-radius:7px;color:var(--muted);font-size:11px;font-weight:700;cursor:pointer;transition:border-color .12s,color .12s,background .12s,box-shadow .12s}.radio-btn:hover{border-color:var(--accent);color:var(--text)}.radio-btn.on{background:linear-gradient(180deg,var(--accent),#5ec7da);border-color:var(--accent);color:#06222a;box-shadow:0 0 10px #7ee8fa66}.is-mod .radio-btn.on{background:linear-gradient(180deg,var(--accent-2),#8a5fe0);border-color:var(--accent-2);color:#160a2c;box-shadow:0 0 10px #b388ff66}.faders{display:flex;gap:12px;margin-top:auto}.fader{display:flex;flex-direction:column;align-items:center;gap:6px}.fader-val{font-size:11px;color:var(--accent);font-variant-numeric:tabular-nums;font-weight:600;min-height:14px;cursor:pointer}.fader-track{position:relative;width:22px;height:104px;background:var(--panel-3);border:1px solid var(--line);border-radius:11px;cursor:ns-resize;touch-action:none;box-shadow:inset 0 2px 6px #00000073}.fader-fill{position:absolute;left:0;right:0;bottom:0;height:0%;background:linear-gradient(to top,var(--accent-2),var(--accent));border-radius:0 0 10px 10px}.fader-thumb{position:absolute;left:-2px;right:-2px;height:12px;top:100%;background:linear-gradient(180deg,#fff,#cfd7e2);border:1px solid rgba(0,0,0,.3);border-radius:5px;box-shadow:0 2px 6px #00000080;transform:translateY(-50%);pointer-events:none}.fader-name{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;cursor:pointer}.fader.selected .fader-track{box-shadow:var(--glow),inset 0 2px 6px #00000073}.fader.selected .fader-name{color:var(--accent)}.keyboard{position:relative;height:150px;margin-top:8px;user-select:none;touch-action:none}.key{position:absolute;top:0;border-radius:0 0 7px 7px;cursor:pointer;transition:background .04s,box-shadow .04s}.key.white{height:100%;background:linear-gradient(#fbfdff,#cdd7e2);border:1px solid #2c3540;box-shadow:inset 0 -6px 10px #0000001f,0 2px 4px #0000004d;z-index:1}.key.black{height:62%;background:linear-gradient(#323b46,#0c1015);border:1px solid #000;box-shadow:inset 0 -3px 6px #ffffff14,0 3px 5px #00000080;z-index:2}.key.white.active{background:linear-gradient(var(--accent),#4fb6c9);box-shadow:0 0 18px #7ee8fa99,inset 0 -4px 8px #00000026}.key.black.active{background:linear-gradient(var(--accent-2),#6a48b5);box-shadow:0 0 18px #b388ff99}.key.white.ghost{background:linear-gradient(#a7e6f2,#6fc3d4);box-shadow:inset 0 0 0 3px #7ee8fae6,0 0 14px #7ee8fa73}.key.black.ghost{background:linear-gradient(#2f5f73,#123642);box-shadow:inset 0 0 0 3px #7ee8fad9,0 0 14px #7ee8fa73}.hint{color:var(--muted);margin:16px 2px 0;font-size:12.5px;line-height:1.5}.hint b{color:var(--text);font-weight:600}.input-dock{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 16px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,#0d1117d1,#090c11f5);border-top:1px solid var(--line);box-shadow:0 -10px 30px #00000073;backdrop-filter:blur(10px)}.input-dock .keyboard{margin-top:8px}.input-dock .ribbon{margin:0 0 8px}.palette{position:sticky;top:0;z-index:220;height:58px;margin:0 -120px 0 -20px;display:flex;align-items:center;padding:0 14px;background:linear-gradient(180deg,#0d1117f5,#090c11f5);border-bottom:1px solid var(--line);box-shadow:0 8px 22px #0006;backdrop-filter:blur(8px)}body[data-editor=open] .palette{position:fixed;top:0;left:0;right:0;margin:0}.palette-grid{display:flex;align-items:center;gap:5px;width:100%;overflow:hidden}.pal-tile{position:relative;height:40px;flex:1 1 0;min-width:0;border-radius:8px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:9px;color:#0a0d12;cursor:pointer;overflow:hidden;text-align:center;line-height:1.05;user-select:none;transition:transform .06s,box-shadow .12s}.pal-tile.filled{font-weight:700;box-shadow:0 2px 6px #00000059,inset 0 1px #ffffff40}.pal-tile.filled:hover{transform:translateY(-1px);box-shadow:0 5px 14px #00000073}.pal-tile.empty{background:transparent;border-style:dashed;color:var(--muted);font-size:16px}.pal-tile.empty:hover{border-color:var(--accent);color:var(--text)}.pal-tile.selected{outline:2px solid #fff;outline-offset:1px;box-shadow:0 0 14px #fff6}.pal-tile.dragover{outline:2px dashed var(--accent)}.pal-del{position:absolute;top:0;right:0;background:#0000008c;color:#fff;border:none;font-size:9px;line-height:1;padding:2px 4px;cursor:pointer;display:none;border-radius:0 0 0 5px}.pal-tile.filled:hover .pal-del{display:block}.pal-tile.kind-phrase:after{content:"♪";position:absolute;bottom:1px;left:4px;font-size:10px;color:#0a0d12;opacity:.75}.palette-hint{font-size:9px;color:var(--muted);margin:8px 0 0;line-height:1.35}.ctx-slider{position:fixed;right:12px;top:154px;bottom:150px;width:92px;z-index:50;display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px 10px;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-2);opacity:.55;transition:opacity .18s,box-shadow .18s}.ctx-slider.active{opacity:1;box-shadow:var(--shadow-2),var(--glow)}.ctx-label{font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--accent);font-weight:700;text-align:center;min-height:28px;line-height:1.2}.ctx-track{position:relative;width:30px;flex:1 1 auto;min-height:120px;background:var(--panel-3);border:1px solid var(--line);border-radius:15px;cursor:ns-resize;touch-action:none;box-shadow:inset 0 2px 8px #00000080}.ctx-fill{position:absolute;left:0;right:0;bottom:0;height:0%;background:linear-gradient(to top,var(--accent-2),var(--accent));border-radius:0 0 14px 14px;box-shadow:0 0 18px #7ee8fa80}.ctx-thumb{position:absolute;left:-3px;right:-3px;height:18px;top:100%;background:linear-gradient(180deg,#fff,#cfd7e2);border:1px solid rgba(0,0,0,.35);border-radius:8px;box-shadow:0 2px 10px #0009;transform:translateY(-50%);pointer-events:none}.ctx-value{font-size:13px;color:var(--text);font-variant-numeric:tabular-nums;font-weight:700;min-height:18px}.toolbar .rec-notes{border-color:#ff7e6b80}.toolbar .rec-notes.recording{background:linear-gradient(180deg,#ff6b5b,#d83a2a);border-color:#ff8a7a;color:#fff;animation:recpulse 1s infinite}.transport{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0}.transport .play{font-size:14px;padding:9px 22px;background:linear-gradient(180deg,var(--accent),#5ec7da);color:#06222a;border:none;border-radius:10px;cursor:pointer;font-weight:800;min-width:96px;box-shadow:0 4px 14px #7ee8fa59,inset 0 1px #fff6;transition:transform .05s,box-shadow .15s}.transport .play:hover{box-shadow:0 6px 20px #7ee8fa80,inset 0 1px #fff6}.transport .play:active{transform:translateY(1px)}.transport .play.playing{background:linear-gradient(180deg,var(--accent-2),#8a5fe0);color:#160a2c;box-shadow:0 4px 14px #b388ff73,inset 0 1px #fff6}.transport label{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13px}.transport input[type=number]{width:60px;background:var(--panel-3);color:var(--text);border:1px solid var(--line);border-radius:7px;padding:6px;font-variant-numeric:tabular-nums}.transport select,.transport .io,.transport label.file{background:linear-gradient(180deg,var(--panel-2),var(--panel));color:var(--text);border:1px solid var(--line);border-radius:9px;padding:8px 14px;cursor:pointer;font-size:13px;font-weight:500;transition:border-color .15s,box-shadow .15s}.transport .io:hover,.transport label.file:hover{border-color:var(--accent);box-shadow:0 0 0 1px #7ee8fa40}.transport input[type=file]{display:none}.boxes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:8px}@media(max-width:780px){.boxes{grid-template-columns:repeat(2,1fr)}}.box{background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);border-left:4px solid var(--box-color, var(--accent));border-radius:var(--radius);padding:12px 14px;box-shadow:var(--shadow-1);transition:box-shadow .15s,transform .06s}.box:hover{box-shadow:var(--shadow-1),0 0 0 1px #ffffff0d}.box.focused{border-color:var(--box-color, var(--accent));box-shadow:var(--shadow-1),0 0 0 1px var(--box-color, var(--accent)),0 0 20px -2px var(--box-color, var(--accent))}.box.drop{outline:2px dashed var(--accent);outline-offset:2px}.box-head{display:flex;justify-content:space-between;align-items:center;gap:8px}.box-name{background:transparent;border:none;color:var(--text);font-weight:600;font-size:14px;width:65%}.box-name:focus{outline:1px solid var(--line);border-radius:4px}.box-meter{color:var(--muted);font-size:10px;letter-spacing:1px;text-transform:uppercase;background:var(--panel-3);border-radius:5px;padding:2px 7px}.box-timeline{width:100%;height:72px;background:#080b10;border:1px solid var(--line);border-radius:8px;display:block;margin:10px 0;cursor:pointer;box-shadow:inset 0 2px 8px #00000080;transition:border-color .12s}.box-timeline:hover{border-color:var(--accent)}.box-buttons{display:flex;gap:6px;flex-wrap:wrap}.box-buttons button{background:var(--panel-3);border:1px solid var(--line);color:var(--text);border-radius:7px;padding:5px 10px;font-size:12px;cursor:pointer;transition:border-color .12s,background .12s}.box-buttons button:hover{border-color:var(--accent)}.box-buttons .rec{border-color:#ff7e6b73}.box-buttons .rec.armed{background:#7a3b1e;border-color:#d77a3a;color:#fff}.box-buttons .rec.recording{background:linear-gradient(180deg,#ff6b5b,#d83a2a);border-color:#ff8a7a;color:#fff;animation:recpulse 1s infinite}@keyframes recpulse{0%,to{opacity:1}50%{opacity:.55}}.box-buttons button.on{background:linear-gradient(180deg,var(--accent-2),#8a5fe0);color:#160a2c;border-color:var(--accent-2)}.box-knobs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:12px}.knob{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--muted)}.knob-head{display:flex;justify-content:space-between}.knob-val{color:var(--text);font-variant-numeric:tabular-nums}.knob input{width:100%;accent-color:var(--box-color, var(--accent));cursor:pointer}.add-box{background:transparent;border:1px dashed var(--line);color:var(--muted);border-radius:var(--radius);cursor:pointer;min-height:96px;font-size:14px;transition:border-color .15s,color .15s,background .15s}.add-box:hover{border-color:var(--accent);color:var(--text);background:#7ee8fa0a}.ribbon{position:relative;height:74px;margin:10px 0 6px;background:radial-gradient(400px 120px at 20% 50%,rgba(126,232,250,.12),transparent 70%),radial-gradient(400px 120px at 80% 50%,rgba(179,136,255,.12),transparent 70%),linear-gradient(90deg,#11202c,#1a1430);border:1px solid var(--line);border-radius:12px;cursor:pointer;touch-action:none;overflow:hidden;box-shadow:inset 0 2px 10px #00000073}.ribbon-guide{position:absolute;top:0;bottom:0;border-left:1px solid rgba(255,255,255,.12);padding-left:4px;color:var(--muted);font-size:10px;display:flex;align-items:flex-end;padding-bottom:4px;pointer-events:none}.ribbon-cursor{position:absolute;top:0;bottom:0;width:2px;background:var(--accent);box-shadow:0 0 16px 2px var(--accent);pointer-events:none}.ribbon-cursor.ghost{width:2px;background:#7ee8fa8c;box-shadow:0 0 10px 1px #7ee8fa73;color:#e6edf3d9;font-size:10px;font-weight:700;padding-left:5px;padding-top:5px;white-space:nowrap}.ribbon-readout{position:absolute;top:8px;left:50%;transform:translate(-50%);z-index:4;pointer-events:none;padding:4px 16px;border-radius:8px;background:#0000008c;border:1px solid rgba(126,232,250,.4);color:var(--text);font-size:18px;font-variant-numeric:tabular-nums;letter-spacing:.3px;text-shadow:0 0 12px rgba(126,232,250,.5);white-space:nowrap}.ribbon-readout b{color:var(--accent);font-weight:800;margin-right:6px}.ribbon-mode{position:absolute;top:7px;right:8px;z-index:3;background:#00000080;color:var(--text);border:1px solid var(--line);border-radius:7px;padding:4px 13px;font-size:11px;font-weight:600;cursor:pointer}.ribbon-mode:hover{border-color:var(--accent)}.section-label{color:var(--muted);font-size:12px;margin:12px 0 2px}.editor-backdrop{position:fixed;inset:0;z-index:200;background:#000000a8;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}.editor-panel{width:min(92vw,900px);background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:0 30px 80px #0009,0 0 0 1px #ffffff0a inset}.editor-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.editor-head span{font-weight:700;letter-spacing:.3px}.editor-head-right{display:flex;align-items:center;gap:12px}.editor-snap{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}.editor-snap select{background:var(--panel-3);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:4px 8px;font-size:12px;cursor:pointer}.editor-snap select:focus{outline:none;border-color:var(--accent)}.editor-close{background:var(--panel-3);border:1px solid var(--line);color:var(--text);border-radius:7px;padding:5px 14px;cursor:pointer}.editor-close:hover{border-color:var(--accent)}.editor-canvas{width:100%;height:360px;background:#080b10;border:1px solid var(--line);border-radius:10px;display:block;touch-action:none;cursor:crosshair;box-shadow:inset 0 2px 12px #00000080}.editor-hint{color:var(--muted);font-size:12px;margin:12px 0 0}