:root{color-scheme:dark;--bg-0: #020307;--bg-1: #05070d;--bg-2: #0a0d14;--panel: rgba(9, 12, 18, .92);--panel-strong: rgba(14, 18, 27, .96);--panel-soft: rgba(255, 255, 255, .045);--border: rgba(228, 239, 255, .12);--border-bright: rgba(255, 255, 255, .24);--text: #eef6ff;--muted: #778192;--dim: #4e596a;--pink: #ff3d9d;--pink-hot: #ff68b7;--cyan: #12e3dc;--cyan-soft: #73fff6;--amber: #ffb22b;--yellow: #ffe04f;--violet: #8b5cff;--green: #7dff6a;--red: #ff2b45;--shadow-deep: 0 30px 80px rgba(0, 0, 0, .68);--shadow-inset: inset 0 1px 1px rgba(255, 255, 255, .08), inset 0 -1px 0 rgba(0, 0, 0, .85);--radius-panel: 8px;--radius-control: 7px;--font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{background:radial-gradient(circle at 14% 20%,rgba(18,227,220,.15),transparent 22rem),radial-gradient(circle at 88% 13%,rgba(255,61,157,.18),transparent 20rem),linear-gradient(145deg,#010205,#070911 46%,#12070e);color:var(--text);font-family:var(--font-ui);overflow-x:hidden}button,input,select{font:inherit}button{color:inherit}.machine-shell{position:relative;min-height:100vh;padding:clamp(14px,2.8vw,38px);display:grid;place-items:center;overflow:hidden}.machine-shell:before{content:"";position:absolute;inset:auto 7vw 1vh;height:14vh;background:radial-gradient(ellipse,rgba(0,0,0,.7),transparent 68%);filter:blur(12px)}.studio-light{position:absolute;width:9rem;height:40rem;border-radius:999px;filter:blur(28px);opacity:.34;transform:rotate(14deg)}.studio-light--cyan{left:-3rem;top:6rem;background:var(--cyan)}.studio-light--pink{right:1rem;top:-6rem;background:var(--pink)}.machine{position:relative;z-index:1;width:min(1500px,100%);min-height:min(900px,calc(100vh - 32px));padding:clamp(10px,1.4vw,18px);border:1px solid rgba(255,255,255,.22);border-radius:26px;background:linear-gradient(145deg,rgba(255,255,255,.1),transparent 11%),linear-gradient(180deg,#191d27fa,#05070cfa);box-shadow:var(--shadow-deep),0 0 0 2px #000000bf,inset 0 0 0 1px #ffffff0f,inset 0 -26px 40px #00000080}.machine:before{content:"";position:absolute;inset:8px;border-radius:20px;pointer-events:none;border:1px solid rgba(255,255,255,.08)}.topbar{position:relative;z-index:1;display:grid;grid-template-columns:38px minmax(120px,170px) 70px minmax(82px,112px) 1fr auto auto;gap:8px;align-items:center;height:58px;padding:7px;border:1px solid var(--border);border-radius:13px;background:linear-gradient(180deg,#ffffff0e,#0000001a),#04060ad1;box-shadow:var(--shadow-inset)}.icon-button,.text-button,.pattern-picker__trigger,.mode-tabs button,.sequencer-modes button,.track-label button,.pad-tabs button,.limiter,.fx-toggle,.fx-macros button{border:1px solid var(--border);border-radius:var(--radius-control);background:linear-gradient(180deg,#ffffff14,#ffffff04);box-shadow:var(--shadow-inset),0 5px 13px #00000042;cursor:pointer;transition:transform 90ms ease,border-color .12s ease,box-shadow .12s ease,background .12s ease,color .12s ease}.icon-button:hover,.text-button:hover,.pattern-picker__trigger:hover,.mode-tabs button:hover,.sequencer-modes button:hover,.track-label button:hover,.pad-tabs button:hover,.limiter:hover,.fx-toggle:hover,.fx-macros button:hover{border-color:var(--border-bright);box-shadow:var(--shadow-inset),0 0 18px #ff3d9d1f}.icon-button:active,.text-button:active,.pattern-picker__trigger:active,.mode-tabs button:active,.sequencer-modes button:active,.track-label button:active,.pad-tabs button:active,.limiter:active,.fx-toggle:active,.fx-macros button:active,.drum-pad:active,.step-cell:active{transform:translateY(1px) scale(.985);box-shadow:inset 0 2px 8px #000000c2}.icon-button{display:grid;place-items:center;width:100%;height:100%;min-width:36px}.text-button{height:100%;text-transform:uppercase;font-size:.78rem;font-weight:800;letter-spacing:0}.tempo-field,.swing-field{position:relative;display:grid;align-items:center;height:100%;padding:0 12px;border:1px solid var(--border);border-radius:var(--radius-control);background:#ffffff09;overflow:hidden}.tempo-field span{font-size:1.3rem;font-variant-numeric:tabular-nums;font-weight:800}.tempo-field small{position:absolute;right:12px;color:var(--muted);text-transform:uppercase;font-size:.65rem;font-weight:800}.tempo-field input,.swing-field input,.knob input{position:absolute;inset:0;opacity:0;cursor:ew-resize}.swing-field{justify-items:center;color:var(--cyan);text-transform:uppercase}.swing-field small,.pattern-picker small{color:var(--muted);font-size:.58rem;font-weight:800}.swing-field span{font-size:.82rem;font-weight:900}.pattern-picker{position:relative;justify-self:center;display:grid;grid-template-columns:46px minmax(90px,140px) 46px;align-items:center;height:100%;border:1px solid var(--border);border-radius:var(--radius-control);background:#ffffff09}.pattern-picker__trigger{display:grid;justify-items:center;align-content:center;height:100%;min-width:0;padding:0 10px;border-top:0;border-bottom:0;border-radius:0;text-transform:uppercase;background:#05070c94}.pattern-picker strong{max-width:100%;overflow:hidden;color:var(--pink-hot);text-overflow:ellipsis;white-space:nowrap;font-size:.98rem}.pattern-menu{position:absolute;top:calc(100% + 8px);left:46px;right:46px;z-index:30;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;padding:6px;border:1px solid var(--border-bright);border-radius:var(--radius-control);background:#070a10fa;box-shadow:var(--shadow-inset),0 16px 34px #00000075,0 0 24px #12e3dc24}.pattern-menu button{min-height:34px;border:1px solid var(--border);border-radius:5px;background:#ffffff0a;color:var(--text);cursor:pointer;font-size:.72rem;font-weight:850;text-transform:uppercase}.pattern-menu button:hover{border-color:var(--border-bright);color:var(--cyan-soft)}.pattern-menu button.is-active{border-color:#ff68b7ad;background:#ff3d9d24;color:var(--pink-hot)}.mode-tabs,.transport{display:flex;height:100%;gap:6px}.mode-tabs button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:72px;padding:0 14px;overflow:hidden;text-transform:uppercase;font-size:.72rem;font-weight:850}.mode-tabs button svg,.mode-tabs button span{position:relative;z-index:1}.mode-tabs button.is-active{color:var(--cyan);border-color:#12e3dc8f;background:radial-gradient(circle at 50% 12%,rgba(115,255,246,.22),transparent 32%),linear-gradient(180deg,#12e3dc21,#12e3dc0a);box-shadow:var(--shadow-inset),0 0 16px #12e3dc33}.mode-tabs .song-button{--song-scan: 0%;color:var(--text);border-color:#ffe04f8a;background:linear-gradient(110deg,#fff0,#ffffff47,#fff0 46%) -130% 0 / 90% 100% no-repeat,conic-gradient(from 210deg at 50% 50%,#ffe04f57,#12e3dc24,#ff3d9d47,#ffe04f57),linear-gradient(180deg,#ffe04f38,#ff3d9d1a 58%,#12e3dc1a);box-shadow:var(--shadow-inset),0 0 14px #ffe04f2e,0 0 22px #ff3d9d1c;isolation:isolate;min-width:96px;animation:song-shine 3.8s ease-in-out infinite,song-core 5.2s linear infinite}.mode-tabs .song-button svg,.mode-tabs .song-button span,.mode-tabs .song-button i{position:relative;z-index:1}.mode-tabs .song-button__atom{color:var(--yellow);filter:drop-shadow(0 0 7px rgba(255,224,79,.72))}.song-button__halo{position:absolute;inset:5px;z-index:0;border-radius:inherit;background:radial-gradient(circle at 25% 24%,rgba(255,255,255,.28),transparent 22%),radial-gradient(circle at 78% 68%,rgba(18,227,220,.22),transparent 28%),linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);opacity:.74;transform:translate(calc(var(--song-scan) - 50%));mix-blend-mode:screen}.song-button__meter{display:inline-grid;grid-template-columns:repeat(3,3px);align-items:end;gap:2px;height:13px;margin-left:1px}.song-button__meter i{display:block;width:3px;height:45%;border-radius:999px;background:var(--cyan-soft);box-shadow:0 0 7px #73fff6a6;transform-origin:bottom;animation:song-meter .72s steps(4,end) infinite}.song-button__meter i:nth-child(2){height:72%;animation-delay:-.18s}.song-button__meter i:nth-child(3){height:56%;background:var(--pink-hot);box-shadow:0 0 7px #ff68b7a6;animation-delay:-.36s}.mode-tabs .song-button:after{content:"";position:absolute;inset:6px 10px auto auto;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:-35px 10px #fffc,-15px 24px #ffe04fc7,8px 23px #12e3dc99;opacity:.85}.mode-tabs .song-button:hover{border-color:#ffee86b8;box-shadow:var(--shadow-inset),0 0 16px #ffe04f47,0 0 28px #ff3d9d29}.mode-tabs .song-button.is-firing{color:#fff;border-color:#73fff6c7;box-shadow:var(--shadow-inset),0 0 20px #ffe04f61,0 0 42px #12e3dc42,0 0 64px #ff3d9d38;animation:song-shine .76s ease-out,song-burst .76s cubic-bezier(.18,.95,.24,1)}.transport{justify-self:end}.transport .icon-button{width:60px}.transport__record{color:var(--pink)}.transport__play{color:var(--cyan);border-color:#12e3dc99;box-shadow:inset 0 1px 1px #ffffff17,inset 0 -1px #000000d9,0 0 18px #12e3dc38}@keyframes song-shine{0%,52%{background-position:-130% 0,0 0,0 0}78%,to{background-position:180% 0,0 0,0 0}}@keyframes song-core{0%{filter:hue-rotate(0deg)}to{filter:hue-rotate(360deg)}}@keyframes song-meter{0%,to{transform:scaleY(.54)}42%{transform:scaleY(1)}72%{transform:scaleY(.72)}}@keyframes song-burst{0%{--song-scan: -25%;transform:translateY(1px) scale(.98)}46%{--song-scan: 80%;transform:translateY(-1px) scale(1.045)}to{--song-scan: 125%;transform:translateY(0) scale(1)}}.machine-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(520px,1.45fr) minmax(260px,.6fr) minmax(180px,.38fr);grid-template-rows:minmax(230px,.88fr) minmax(315px,1.08fr) minmax(228px,.72fr);gap:8px;margin-top:8px}.panel{position:relative;min-width:0;min-height:0;padding:12px;border:1px solid var(--border);border-radius:var(--radius-panel);background:linear-gradient(180deg,#ffffff0b,#ffffff03),var(--panel);box-shadow:var(--shadow-inset),0 12px 30px #00000052;overflow:hidden}.panel:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(125deg,rgba(255,255,255,.055),transparent 18%,transparent 84%,rgba(255,255,255,.03))}.panel__header{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:8px;height:26px;margin-bottom:8px}.panel__header h2{margin:0;color:var(--text);text-transform:uppercase;font-size:.78rem;font-weight:900}.panel__actions{display:flex;align-items:center;gap:6px}select{min-height:26px;border:1px solid var(--border);border-radius:5px;background:#06090f;color:var(--text);text-transform:uppercase;font-size:.66rem;font-weight:800}.scope-panel{grid-column:1;grid-row:1;border-color:#ff3d9d47;box-shadow:var(--shadow-inset),0 12px 30px #00000052,0 0 24px #ff3d9d14}.wave-scope{position:relative;z-index:1;display:block;width:100%;height:clamp(180px,22vw,245px);min-height:166px;border:1px solid rgba(115,255,246,.16);border-radius:5px;background:#05070b;box-shadow:inset 0 0 0 1px #ffffff0b,inset 0 0 34px #12e3dc12,0 0 22px #ff3d9d14}.scope-ruler{position:relative;z-index:1;display:grid;grid-template-columns:repeat(10,1fr);color:var(--muted);font-size:.68rem;font-variant-numeric:tabular-nums;padding:5px 9px 0}.scope-ruler span{position:relative}.scope-ruler span:before{content:"";position:absolute;left:0;top:-5px;width:1px;height:4px;background:#73fff647}.spectrum-panel{grid-column:2;grid-row:1}.spectrum{position:relative;z-index:1;display:grid;grid-template-columns:34px 1fr;gap:8px;height:calc(100% - 68px);min-height:150px}.spectrum__scale{display:flex;flex-direction:column;justify-content:space-between;color:var(--muted);font-size:.66rem;text-align:right;font-variant-numeric:tabular-nums}.spectrum__bars{display:grid;grid-template-columns:repeat(8,1fr);gap:7px;align-items:end;padding:4px 8px 0;border-bottom:1px solid rgba(255,255,255,.12);background:repeating-linear-gradient(to top,transparent,transparent 8px,rgba(255,255,255,.045) 9px),linear-gradient(180deg,#ffffff08,#00000029)}.spectrum__bar{position:relative;height:100%;border-radius:2px 2px 0 0;background:#ffffff09;overflow:hidden}.spectrum__bar i,.vertical-meter span,.output-meter span{position:absolute;inset:auto 0 0;display:block;background:linear-gradient(0deg,var(--cyan) 0%,var(--green) 35%,var(--yellow) 62%,var(--amber) 80%,var(--pink) 100%);box-shadow:0 0 16px #ffb22b59}.spectrum__footer{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;margin-top:9px;color:var(--muted);text-transform:uppercase;font-size:.67rem;font-weight:800}.spectrum__footer strong{color:var(--text);font-size:1.2rem}.clip{display:inline-flex;align-items:center;gap:6px}.clip:before{content:"";width:10px;height:10px;border:2px solid var(--red);border-radius:50%}.clip--hot:before{background:var(--red);box-shadow:0 0 14px var(--red)}.master-strip{grid-column:3;grid-row:1}.master-strip__body{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 34px;height:calc(100% - 34px);gap:10px;min-height:0}.master-strip__knobs{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:5px;min-height:0}.master-strip .knob{grid-template-columns:minmax(0,1fr) clamp(38px,3.8vw,52px);grid-template-rows:1fr 1fr;align-items:center;justify-items:start;column-gap:7px;row-gap:1px;min-height:0}.master-strip .knob__label,.master-strip .knob__value{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.master-strip .knob__label{align-self:end}.master-strip .knob__dial{grid-column:2;grid-row:1 / 3;justify-self:center;width:clamp(38px,3.8vw,52px)}.master-strip .knob__value{align-self:start}.vertical-meter{position:relative;border:1px solid rgba(255,255,255,.12);border-radius:4px;background:repeating-linear-gradient(to top,rgba(255,255,255,.05),rgba(255,255,255,.05) 4px,transparent 5px,transparent 10px),#06080d;overflow:hidden}.sequencer-panel{grid-column:1 / span 2;grid-row:2}.sequencer-modes{display:flex;flex-wrap:wrap;gap:5px}.sequencer-modes button{min-height:26px;padding:0 10px;color:var(--muted);text-transform:uppercase;font-size:.62rem;font-weight:850}.sequencer-modes button.is-active{color:var(--cyan);border-color:#12e3dc70;background:#12e3dc1a}.step-numbers{position:relative;z-index:1;display:grid;grid-template-columns:230px repeat(16,minmax(24px,1fr));gap:5px;padding-right:2px;margin-bottom:6px;color:var(--muted);font-size:.72rem;font-variant-numeric:tabular-nums}.step-numbers b{display:grid;place-items:center;min-height:23px;border:1px solid transparent;border-radius:5px}.step-numbers b.is-current{color:var(--text);border-color:#ff3d9dcc;box-shadow:0 0 16px #ff3d9d3d}.sequencer-track-tools{position:relative;z-index:1;display:grid;grid-template-columns:230px repeat(16,minmax(24px,1fr));gap:5px;margin-bottom:6px}.sequencer-track-tools .mute-all{display:inline-flex;align-items:center;justify-content:center;grid-column:1;justify-self:end;width:26px;height:22px;margin-right:34px;padding:0;color:var(--text);border-color:#ff2b456b;background:linear-gradient(180deg,#ff2b4521,#ff2b450f),#0003;font-size:.66rem;font-weight:900;letter-spacing:0}.sequencer-track-tools .mute-all.is-active{color:var(--red);border-color:#ff2b45bd;background:linear-gradient(180deg,#ff2b4536,#ff2b4514),#00000040;box-shadow:0 0 14px #ff2b451f}.sequencer-grid{position:relative;z-index:1;display:grid;gap:5px}.track-row{display:grid;grid-template-columns:230px repeat(16,minmax(24px,1fr));gap:5px;min-height:30px}.track-label{display:grid;grid-template-columns:18px minmax(52px,1fr) 58px 28px 28px;align-items:center;gap:6px;min-width:0;padding:4px 6px;border:1px solid rgba(255,255,255,.07);border-radius:5px;background:#00000038}.track-color{width:13px;height:13px;border-radius:3px;box-shadow:0 0 12px currentColor}.track-label strong{min-width:0;overflow:hidden;color:var(--track-color, var(--text));text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap;font-size:.7rem;font-weight:900}.track-volume{min-width:0;height:18px;accent-color:var(--track-color);cursor:ew-resize}.track-label button{width:26px;height:22px;color:var(--muted);font-size:.66rem;font-weight:900}.track-label button.is-active{color:var(--pink);border-color:#ff3d9d80}.step-cell{position:relative;min-height:30px;border:1px solid rgba(255,255,255,.065);border-radius:4px;background:color-mix(in srgb,var(--track-color) calc(var(--velocity) * 14%),#070b10);box-shadow:inset 0 1px #ffffff0f,inset 0 -2px 4px #0000008c;cursor:pointer;opacity:calc(.5 + var(--probability) * .5);transition:transform 80ms ease,border-color .12s ease,box-shadow .12s ease,background .12s ease}.step-cell.is-on{border-color:color-mix(in srgb,var(--track-color) 72%,white 10%);background:linear-gradient(180deg,color-mix(in srgb,var(--track-color) 70%,white 8%),color-mix(in srgb,var(--track-color) 38%,black 40%));box-shadow:inset 0 1px #ffffff38,inset 0 -8px 16px #00000061,0 0 16px color-mix(in srgb,var(--track-color) 54%,transparent)}.step-cell.is-current{outline:2px solid rgba(255,255,255,.26);outline-offset:1px}.step-cell.has-accent:after{content:"";position:absolute;inset:4px 4px auto auto;width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 9px #fff}.step-cell.has-slide:before{content:"";position:absolute;inset:5px;background:repeating-linear-gradient(135deg,transparent,transparent 4px,rgba(255,255,255,.5) 5px,transparent 7px)}.step-cell__nudge{position:absolute;left:calc(50% + var(--nudge-x, 0px));bottom:3px;width:2px;height:7px;border-radius:999px;background:#fff;box-shadow:0 0 6px #ffffffbd,0 0 10px color-mix(in srgb,var(--track-color) 60%,transparent);opacity:0;transform:translate(-50%)}.step-cell.has-nudge .step-cell__nudge{opacity:.9}.pads-panel{grid-column:3;grid-row:2;container-type:inline-size;display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:8px;--bank-accent: var(--pink);border-color:color-mix(in srgb,var(--bank-accent) 28%,rgba(255,255,255,.08))}.pads-panel .panel__header{height:auto;min-height:28px;margin-bottom:0}.pads-panel .panel__actions{flex:1;min-width:0}.pads-panel--drums{--bank-accent: var(--pink)}.pads-panel--bass{--bank-accent: var(--cyan)}.pads-panel--samples{--bank-accent: var(--violet)}.pad-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:6px}.pad-tabs button{min-width:0;min-height:28px;padding:0 8px;overflow:hidden;color:var(--muted);text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap;font-size:.66rem;font-weight:900}.pad-tabs button.is-active{color:var(--text);border-color:color-mix(in srgb,var(--bank-accent) 60%,white 8%);background:radial-gradient(circle at 50% 0,color-mix(in srgb,var(--bank-accent) 28%,transparent),transparent 60%),color-mix(in srgb,var(--bank-accent) 16%,transparent);box-shadow:var(--shadow-inset),0 0 14px color-mix(in srgb,var(--bank-accent) 24%,transparent)}.pad-console{position:relative;z-index:1;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:8px;min-width:0;min-height:44px;padding:7px 8px;border:1px solid color-mix(in srgb,var(--bank-accent) 38%,rgba(255,255,255,.1));border-radius:7px;background:linear-gradient(180deg,#ffffff13,#ffffff05),radial-gradient(circle at var(--pad-volume) 0%,color-mix(in srgb,var(--bank-accent) 22%,transparent),transparent 38%),#030509d1;box-shadow:inset 0 1px #ffffff1f,inset 0 -14px 20px #00000052,0 0 22px color-mix(in srgb,var(--bank-accent) 12%,transparent)}.pad-console:before{content:"";position:absolute;inset:1px;pointer-events:none;border-radius:6px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent) calc(var(--pad-volume) - 18%) 0 / 34% 100% no-repeat,repeating-linear-gradient(90deg,rgba(255,255,255,.055) 0 1px,transparent 1px 10px);opacity:.46}.pad-console__identity,.pad-console__value,.pad-console__meter,.pad-volume-control{position:relative;z-index:1}.pad-console__identity{display:inline-flex;align-items:center;gap:5px;min-width:0;color:var(--muted);text-transform:uppercase;white-space:nowrap;font-size:.56rem;font-weight:900}.pad-console__identity svg{flex:0 0 auto;color:var(--bank-accent);filter:drop-shadow(0 0 7px color-mix(in srgb,var(--bank-accent) 64%,transparent))}.pad-console__value{color:var(--text);text-align:right;text-shadow:0 0 10px color-mix(in srgb,var(--bank-accent) 46%,transparent);font-size:.72rem;font-variant-numeric:tabular-nums;font-weight:950;line-height:1}.pad-volume-control{display:block;height:28px;min-width:0;cursor:ew-resize}.pad-volume-control input{position:absolute;inset:0;opacity:0;cursor:ew-resize}.pad-volume-control__rail{position:absolute;top:50%;right:0;left:0;height:10px;overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.11) 0 1px,transparent 1px 12px),#ffffff0b;box-shadow:inset 0 1px 3px #000000c7,0 0 12px color-mix(in srgb,var(--bank-accent) 10%,transparent);transform:translateY(-50%)}.pad-volume-control__fill{display:block;width:var(--pad-volume);height:100%;border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--bank-accent) 30%,transparent),var(--bank-accent)),var(--bank-accent);box-shadow:0 0 16px color-mix(in srgb,var(--bank-accent) 50%,transparent)}.pad-volume-control__thumb{position:absolute;top:50%;left:clamp(10px,var(--pad-volume),calc(100% - 10px));width:18px;height:18px;border:1px solid color-mix(in srgb,var(--bank-accent) 68%,white 12%);border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.95),transparent 18%),radial-gradient(circle,#1b2028 0 45%,#07090d 48% 100%);box-shadow:inset 0 1px 2px #ffffff3d,inset 0 -5px 8px #000000b8,0 0 14px color-mix(in srgb,var(--bank-accent) 42%,transparent);transform:translate(-50%,-50%)}.pad-volume-control:focus-within .pad-volume-control__thumb{box-shadow:inset 0 1px 2px #ffffff3d,inset 0 -5px 8px #000000b8,0 0 0 3px color-mix(in srgb,var(--bank-accent) 20%,transparent),0 0 18px color-mix(in srgb,var(--bank-accent) 56%,transparent)}.pad-console__meter{display:grid;grid-template-columns:repeat(4,3px);align-items:end;gap:3px;height:22px}.pad-console__meter span{display:block;height:6px;border-radius:999px;background:#ffffff26}.pad-console__meter span:nth-child(2){height:10px}.pad-console__meter span:nth-child(3){height:15px}.pad-console__meter span:nth-child(4){height:20px}.pad-console__meter span.is-lit{background:var(--bank-accent);box-shadow:0 0 9px color-mix(in srgb,var(--bank-accent) 72%,transparent)}.pad-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:7px;height:auto;min-height:0}.drum-pad{display:grid;grid-template-rows:auto minmax(0,1fr) auto;align-content:space-between;min-width:0;min-height:56px;padding:clamp(5px,2cqw,9px);overflow:hidden;border:1px solid color-mix(in srgb,var(--pad-color) 60%,white 4%);border-radius:7px;background:linear-gradient(145deg,color-mix(in srgb,var(--pad-color) 31%,transparent),#ffffff0a),#05070bf0;box-shadow:inset 0 1px #fff3,inset 0 -10px 18px #00000073,0 0 16px color-mix(in srgb,var(--pad-color) 18%,transparent);color:var(--text);cursor:pointer;text-align:left;transition:transform 90ms ease,box-shadow .12s ease,filter .12s ease}.drum-pad.is-active{filter:brightness(1.38);transform:translateY(1px) scale(.98);box-shadow:inset 0 3px 12px #0009,0 0 24px color-mix(in srgb,var(--pad-color) 68%,transparent)}.drum-pad span{color:var(--pad-color);font-weight:900}.drum-pad strong{align-self:end;min-width:0;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap;font-size:clamp(.5rem,3.4cqw,.68rem);font-weight:900}.drum-pad small{min-width:0;overflow:hidden;color:color-mix(in srgb,var(--pad-color) 70%,var(--muted));text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap;font-size:clamp(.44rem,2.7cqw,.52rem);font-weight:850;line-height:1}@container (max-width: 260px){.pad-tabs{gap:5px}.pad-tabs button{padding:0 4px;font-size:.58rem}.pad-console{grid-template-columns:auto minmax(0,1fr) auto;gap:6px;min-height:40px;padding:6px}.pad-console__identity span{font-size:.5rem}.pad-console__value{font-size:.64rem}.pad-console__meter{display:none}.pad-volume-control{height:24px}.pad-grid{gap:5px}.drum-pad{grid-template-rows:auto 1fr;min-height:42px;padding:5px 4px}.drum-pad span{font-size:.82rem;line-height:1}.drum-pad strong{align-self:center;font-size:.52rem}.drum-pad small{display:none}}.drum-pad--pink{--pad-color: var(--pink)}.drum-pad--amber{--pad-color: var(--amber)}.drum-pad--violet{--pad-color: var(--violet)}.drum-pad--cyan{--pad-color: var(--cyan)}.control-panels{display:grid;grid-column:1 / -1;grid-row:3;grid-template-columns:1.2fr 1.08fr 1.08fr .82fr;gap:8px}.electric-panels{--electric-x: 50%;--electric-y: 50%;--electric-energy: 0;position:relative;z-index:1;display:grid;grid-column:1 / -1;grid-row:3;grid-template-columns:1.2fr .95fr 1.12fr .82fr;grid-template-rows:34px minmax(0,1fr);gap:8px;min-height:226px}.electric-performance-readout{position:relative;display:grid;grid-column:1 / -1;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;min-width:0;padding:6px 12px;border:1px solid rgba(115,255,246,.2);border-radius:var(--radius-panel);background:linear-gradient(90deg,#12e3dc1a,#ff3d9d17,#ffe04f14),#030509d1;box-shadow:var(--shadow-inset),0 0 calc(12px + var(--electric-energy) * 28px) #12e3dc24;overflow:hidden}.electric-performance-readout:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--electric-x) var(--electric-y),rgba(255,255,255,.28),transparent 18%),repeating-linear-gradient(90deg,rgba(255,255,255,.055) 0 1px,transparent 1px 14px);opacity:calc(.18 + var(--electric-energy) * .24)}.electric-performance-readout span,.electric-performance-readout strong,.electric-performance-readout small{position:relative;z-index:1;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap;font-weight:900}.electric-performance-readout span,.electric-performance-readout small{color:var(--muted);font-size:.62rem}.electric-performance-readout strong{color:var(--cyan-soft);text-shadow:0 0 12px rgba(115,255,246,.36);font-size:.78rem}.electric-instrument{--electric-accent: var(--cyan);--electric-hot: var(--cyan-soft);position:relative;display:grid;grid-template-rows:30px minmax(0,1fr);min-width:0;min-height:0;padding:10px;border:1px solid color-mix(in srgb,var(--electric-accent) 34%,rgba(255,255,255,.08));border-radius:var(--radius-panel);background:radial-gradient(circle at var(--electric-x) var(--electric-y),color-mix(in srgb,var(--electric-accent) 18%,transparent),transparent 35%),linear-gradient(180deg,#ffffff0f,#ffffff04),#05070bf0;box-shadow:var(--shadow-inset),0 12px 30px #00000052,0 0 calc(12px + var(--electric-energy) * 24px) color-mix(in srgb,var(--electric-accent) 18%,transparent);overflow:hidden}.electric-instrument:before{content:"";position:absolute;inset:1px;pointer-events:none;border-radius:7px;background:linear-gradient(115deg,rgba(255,255,255,.11),transparent 14%,transparent 76%,rgba(255,255,255,.05)),repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,transparent 1px 17px);opacity:.7}.electric-instrument--strings{--electric-accent: var(--pink);--electric-hot: var(--pink-hot)}.electric-instrument--keys{--electric-accent: var(--amber);--electric-hot: var(--yellow)}.electric-instrument--ribbon{--electric-accent: var(--cyan);--electric-hot: var(--cyan-soft)}.electric-instrument--sparks{--electric-accent: var(--violet);--electric-hot: #c5adff}.electric-instrument__chrome{position:relative;z-index:2;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;min-width:0;color:var(--muted);text-transform:uppercase}.electric-instrument__chrome span{display:grid;place-items:center;width:22px;height:22px;border:1px solid color-mix(in srgb,var(--electric-accent) 46%,rgba(255,255,255,.08));border-radius:5px;color:var(--electric-hot);background:color-mix(in srgb,var(--electric-accent) 14%,transparent);filter:drop-shadow(0 0 8px color-mix(in srgb,var(--electric-accent) 48%,transparent))}.electric-instrument__chrome strong,.electric-instrument__chrome small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:900}.electric-instrument__chrome strong{color:var(--text);font-size:.7rem}.electric-instrument__chrome small{color:var(--electric-hot);font-size:.58rem}.electric-surface{position:relative;z-index:1;display:block;width:100%;height:100%;min-width:0;min-height:122px;padding:0;border:1px solid color-mix(in srgb,var(--electric-accent) 38%,rgba(255,255,255,.1));border-radius:7px;background:radial-gradient(circle at var(--electric-x) var(--electric-y),color-mix(in srgb,var(--electric-accent) calc(18% + var(--electric-energy) * 30%),transparent),transparent 28%),linear-gradient(180deg,#ffffff0d,#0000002e),#020408d1;box-shadow:inset 0 1px #ffffff1a,inset 0 -18px 28px #0000006b;color:var(--text);cursor:crosshair;overflow:hidden;touch-action:none}.electric-surface:focus-visible{outline:2px solid color-mix(in srgb,var(--electric-hot) 72%,white 8%);outline-offset:2px}.electric-surface:hover{border-color:color-mix(in srgb,var(--electric-hot) 70%,white 6%);box-shadow:inset 0 1px #ffffff24,inset 0 -18px 28px #0000006b,0 0 18px color-mix(in srgb,var(--electric-accent) 22%,transparent)}.electric-panels.is-dragging .electric-surface{cursor:none}.electric-touch{position:absolute;left:var(--electric-x);top:var(--electric-y);z-index:5;width:calc(22px + var(--electric-energy) * 28px);aspect-ratio:1;border:1px solid rgba(255,255,255,.72);border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.95) 0 11%,var(--electric-hot) 14% 22%,transparent 56%),color-mix(in srgb,var(--electric-accent) 18%,transparent);box-shadow:0 0 18px color-mix(in srgb,var(--electric-accent) 74%,transparent),0 0 34px #ffffff2e;opacity:0;pointer-events:none;transform:translate(-50%,-50%)}.electric-panels--voltStrings .electric-instrument--strings .electric-touch,.electric-panels--phaseKeys .electric-instrument--keys .electric-touch,.electric-panels--arcRibbon .electric-instrument--ribbon .electric-touch,.electric-panels--sparkPads .electric-instrument--sparks .electric-touch{opacity:calc(.28 + var(--electric-energy) * .72)}.string-deck__frets{position:absolute;inset:0 9px;display:grid;grid-template-columns:repeat(13,1fr);opacity:.66}.string-deck__frets i{border-left:1px solid rgba(255,255,255,.15);box-shadow:-1px 0 #ff3d9d0f}.string-deck__frets i:nth-child(4n+1){border-left-color:#ff68b757}.string-deck__strings{position:absolute;inset:15px 12px 13px;display:grid;grid-template-rows:repeat(6,minmax(0,1fr));gap:6px}.string-deck__strings i{position:relative;display:block;border-radius:999px}.string-deck__strings i:before{content:"";position:absolute;left:0;right:0;top:50%;height:calc(1px + var(--string-size, 0) * 1px);border-radius:999px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.84),color-mix(in srgb,var(--electric-accent) 72%,white),rgba(255,255,255,.58),transparent);box-shadow:0 0 8px color-mix(in srgb,var(--electric-accent) 30%,transparent),0 2px #ffffff09;transform:translateY(-50%)}.string-deck__strings i:nth-child(1){--string-size: 0}.string-deck__strings i:nth-child(3){--string-size: 1}.string-deck__strings i:nth-child(5),.string-deck__strings i:nth-child(6){--string-size: 2}.string-deck__strings i.is-lit:before{height:4px;background:linear-gradient(90deg,transparent,#fff,var(--pink-hot),#fff,transparent);box-shadow:0 0 12px #ff68b7e6,0 0 24px #ff3d9d6b}.string-deck__strings b{position:absolute;left:2px;top:50%;color:#eef6ffad;font-size:.58rem;font-style:normal;transform:translateY(-50%)}.key-bed{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:4px;padding:8px}.key-bed__key{position:relative;display:grid;place-items:end center;min-width:0;padding-bottom:7px;border:1px solid rgba(255,255,255,.18);border-radius:5px;background:linear-gradient(180deg,#ffffffc2,#ffffff30 9%,#ffb22b17),#dce8ef;color:#1b1f25;box-shadow:inset 0 -10px 16px #0000002e,0 0 9px #ffb22b1f;overflow:hidden}.key-bed__key--black{align-self:start;height:68%;border-color:#ffe04f33;background:radial-gradient(circle at 50% 8%,rgba(255,224,79,.24),transparent 30%),linear-gradient(180deg,#22242a,#030406);color:var(--yellow);z-index:1}.key-bed__key.is-lit{border-color:#ffe04fc2;filter:brightness(1.18);transform:translateY(1px);box-shadow:inset 0 0 18px #ffe04f57,0 0 22px #ffb22b70}.key-bed__key b,.spark-matrix b{min-width:0;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap;font-size:.58rem;font-weight:950}.ribbon-field{background:radial-gradient(circle at var(--electric-x) var(--electric-y),rgba(115,255,246,.32),transparent 24%),linear-gradient(90deg,#ff3d9d21,#12e3dc29,#ffe04f1f),#03060a}.ribbon-field__beam{position:absolute;inset:14px 10px;border-radius:999px;background:linear-gradient(90deg,var(--pink),var(--cyan),var(--yellow),var(--violet),var(--cyan)),var(--cyan);box-shadow:0 0 18px #12e3dc59,0 0 40px #ff3d9d33;opacity:.8;transform:scaleY(calc(.18 + var(--electric-energy) * .28))}.ribbon-field__beam:after{content:"";position:absolute;inset:-20px 0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.76),transparent);opacity:calc(.16 + var(--electric-energy) * .26);transform:translate(calc(var(--electric-x) - 50%))}.ribbon-field__grid{position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 18px),repeating-linear-gradient(0deg,rgba(255,255,255,.055) 0 1px,transparent 1px 18px);-webkit-mask-image:radial-gradient(circle at center,#000,transparent 85%);mask-image:radial-gradient(circle at center,#000,transparent 85%)}.ribbon-field__readout{position:absolute;right:11px;bottom:9px;padding:4px 7px;border:1px solid rgba(115,255,246,.28);border-radius:4px;color:var(--cyan-soft);background:#0000005c;text-shadow:0 0 9px rgba(115,255,246,.5);font-size:.62rem;font-weight:900}.spark-matrix{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:6px;padding:7px}.spark-matrix span{position:relative;display:grid;place-items:center;min-width:0;border:1px solid rgba(197,173,255,.22);border-radius:6px;background:radial-gradient(circle at 35% 22%,rgba(255,255,255,.18),transparent 21%),linear-gradient(150deg,#8b5cff3d,#ffffff08),#05050ce6;box-shadow:inset 0 1px #ffffff24,inset 0 -12px 18px #00000061}.spark-matrix span:before{content:"";position:absolute;inset:5px;border-radius:4px;border:1px solid rgba(255,255,255,.06)}.spark-matrix span.is-lit{border-color:#c5adffc7;background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.55),transparent 18%),linear-gradient(150deg,#8b5cff8f,#ff3d9d2e),#05050cf5;box-shadow:inset 0 2px 12px #fff3,0 0 24px #8b5cff9e}.knob-row,.mini-knobs{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(58px,1fr));gap:10px;height:calc(100% - 34px);align-items:center}.control-panels .panel:nth-child(2) .knob-row{grid-template-columns:repeat(3,minmax(68px,1fr))}.fx-panels .panel{border-color:#8b5cff38}.fx-toggle{min-height:26px;padding:0 10px;color:var(--muted);text-transform:uppercase;font-size:.62rem;font-weight:900}.fx-toggle.is-active{color:var(--cyan-soft);border-color:#12e3dc85;background:#12e3dc1f;box-shadow:var(--shadow-inset),0 0 14px #12e3dc29}.fx-knob-row{grid-template-columns:repeat(4,minmax(58px,1fr))}.fx-chain-panel{display:grid}.fx-chain{position:relative;z-index:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;height:calc(100% - 34px);min-height:92px}.fx-chain__stage{--stage-color: var(--cyan);display:grid;grid-template-rows:auto 1fr;gap:7px;min-width:0;padding:8px 4px;border:1px solid color-mix(in srgb,var(--stage-color) 34%,rgba(255,255,255,.05));border-radius:6px;background:linear-gradient(180deg,color-mix(in srgb,var(--stage-color) 12%,transparent),#0000002e),#05070bb8}.fx-chain__stage b{overflow:hidden;color:var(--stage-color);text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap;font-size:.52rem;font-weight:900}.fx-chain__stage i{position:relative;display:block;min-height:48px;border-radius:4px;background:repeating-linear-gradient(to top,transparent,transparent 7px,rgba(255,255,255,.055) 8px),#ffffff09;overflow:hidden}.fx-chain__stage i:after{content:"";position:absolute;inset:auto 0 0;height:var(--level);background:linear-gradient(0deg,color-mix(in srgb,var(--stage-color) 74%,black),color-mix(in srgb,var(--stage-color) 78%,white));box-shadow:0 0 16px color-mix(in srgb,var(--stage-color) 42%,transparent)}.fx-chain__stage--cyan{--stage-color: var(--cyan)}.fx-chain__stage--pink{--stage-color: var(--pink)}.fx-chain__stage--violet{--stage-color: var(--violet)}.fx-chain__stage--amber{--stage-color: var(--amber)}.fx-macros{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.fx-macros button{min-width:0;min-height:36px;padding:0 6px;overflow:hidden;color:var(--text);text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap;font-size:.66rem;font-weight:900}.knob{position:relative;display:grid;justify-items:center;gap:5px;min-width:0;color:var(--text);text-transform:uppercase}.knob__label,.knob__value{color:var(--muted);font-size:.64rem;font-weight:850;line-height:1}.knob__value{color:var(--text);font-variant-numeric:tabular-nums}.knob__dial{position:relative;display:grid;place-items:center;width:clamp(42px,5.6vw,72px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 38% 28%,rgba(255,255,255,.24),transparent 14%),radial-gradient(circle at center,#1b2029 0 43%,#090b10 45% 62%,#171c24 64% 100%);box-shadow:inset 0 2px 3px #ffffff1f,inset 0 -10px 16px #000000b8,0 9px 18px #0000006b,0 0 18px color-mix(in srgb,var(--knob-accent) 28%,transparent)}.knob__dial:before{content:"";position:absolute;inset:5px;border-radius:50%;border:2px solid rgba(255,255,255,.08);border-top-color:var(--knob-accent);border-left-color:color-mix(in srgb,var(--knob-accent) 50%,transparent);transform:rotate(var(--rotation))}.knob__cap{position:absolute;width:4px;height:34%;top:11%;border-radius:999px;background:var(--text);box-shadow:0 0 10px var(--knob-accent);transform:rotate(var(--rotation));transform-origin:50% 115%}.knob__zero{position:absolute;width:2px;height:8px;bottom:5px;background:#ffffff59}.knob--pink{--knob-accent: var(--pink)}.knob--cyan{--knob-accent: var(--cyan)}.knob--amber{--knob-accent: var(--amber)}.knob--violet{--knob-accent: var(--violet)}.envelope-panel{display:grid}.envelope-graph{position:relative;z-index:1;min-height:72px}.envelope-graph svg{width:100%;height:100%}.envelope-graph__area{fill:#ff3d9d21}.envelope-graph__line{fill:none;stroke:var(--pink-hot);stroke-width:2;filter:drop-shadow(0 0 7px rgba(255,61,157,.48))}.envelope-graph circle{fill:var(--pink-hot)}.mini-knobs{grid-template-columns:repeat(4,1fr);height:auto}.mini-knobs .knob__dial{width:42px}.output-meter{position:relative;z-index:1;height:34px;margin-top:8px;border:1px solid var(--border);border-radius:5px;background:repeating-linear-gradient(to right,transparent,transparent 10px,rgba(255,255,255,.06) 11px,transparent 12px),#070a0f;overflow:hidden}.output-meter span{inset:0 auto 0 0;background:linear-gradient(90deg,var(--yellow),var(--green),var(--cyan),var(--pink))}.output-row{position:relative;z-index:1;display:grid;grid-template-columns:1fr 70px;align-items:center;gap:10px;margin-top:14px}.limiter{min-height:36px;color:var(--muted);text-transform:uppercase;font-weight:900}.limiter.is-active{color:var(--text);border-color:#ffe04f85;background:#ffe04f1f}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@media(max-width:1150px){.machine{min-height:auto}.topbar{grid-template-columns:38px 1fr 70px 90px;height:auto}.pattern-picker,.mode-tabs,.transport{grid-column:span 2}.machine-grid{grid-template-columns:1fr;grid-template-rows:auto}.scope-panel,.spectrum-panel,.master-strip,.sequencer-panel,.pads-panel,.electric-panels,.control-panels{grid-column:1;grid-row:auto}.control-panels{grid-template-columns:repeat(2,1fr)}.electric-panels{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:34px repeat(2,minmax(156px,1fr));min-height:392px}.electric-performance-readout{grid-column:1 / -1}.electric-instrument{grid-row:auto}}@media(max-width:760px){.machine-shell{padding:8px}.machine{border-radius:18px;padding:8px}.topbar{grid-template-columns:38px 1fr}.tempo-field,.swing-field,.text-button,.pattern-picker,.mode-tabs,.transport{grid-column:span 2}.mode-tabs button,.transport .icon-button{flex:1;min-width:0}.step-numbers,.sequencer-track-tools,.track-row{grid-template-columns:160px repeat(16,minmax(22px,1fr));gap:4px}.track-label{grid-template-columns:14px minmax(40px,1fr) 44px 24px 24px}.track-label strong{font-size:.62rem}.step-cell{min-height:28px}.pad-grid{grid-template-columns:repeat(2,1fr)}.control-panels{grid-template-columns:1fr}.knob-row{grid-template-columns:repeat(2,1fr)}.electric-panels{grid-template-columns:1fr;grid-template-rows:auto;min-height:auto}.electric-performance-readout{grid-template-columns:minmax(0,1fr) auto}.electric-performance-readout span{display:none}.electric-instrument{min-height:176px}.key-bed{gap:3px;padding:6px}.key-bed__key b,.spark-matrix b{font-size:.5rem}}