:root{--bg:#141920;--frame:#262e37;--frame2:#303943;--line:#65717c;--line2:#3e4b59;--text:#e4e8eb;--muted:#9da9b6;--soft:#717e8e;--silver:#cdd2d4;--accent:#8ab3d1;--gold:#e9bb83;--ok:#97c9b6;--hot:#efad8b}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% -20%,#394551,#14191f 55%,#101419 100%);color:var(--text);font-family:Inter,'Segoe UI',Arial,sans-serif;font-size:13px}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #d4c3a5;outline-offset:2px}button:disabled{opacity:.4;cursor:not-allowed}.app{margin:14px auto;max-width:1710px;padding:0 14px}.frame{border:1px solid #7e8993;border-top-color:#b0b9c1;border-left-color:#a8b1b9;outline:1px solid #1b222a;box-shadow:inset 0 1px 0 #e6edf51c,0 4px 14px #0004;background:linear-gradient(150deg,#313b47,#242c37 44%,#202832);border-radius:4px}.top{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 17px}.brand{display:flex;align-items:center;gap:12px;min-width:240px}.brand-icon{background:linear-gradient(145deg,#b1bdc5,#48576a);height:43px;width:43px;border:2px solid #bec8ce;border-radius:9px;color:#171f2b;font-size:29px;font-weight:900;display:grid;place-items:center;box-shadow:0 2px 10px #0005}.brand-icon span{font-size:13px;vertical-align:baseline;margin-left:-5px}.brand-title{font-family:'Arial Narrow','Segoe UI',sans-serif;font-weight:900;font-size:22px;letter-spacing:2px;color:#fafafa;line-height:1.1}.brand-title span{font-weight:350;color:#a4b4c4}.brand-sub{font-size:9px;letter-spacing:1.65px;color:#acb6bf;margin-top:4px}.small-star{color:#e6c9a7}.device-switch{display:flex;padding:3px;background:#151b22;border:1px solid #566573;gap:3px;border-radius:4px}.device{border:1px solid transparent;color:#aab4c2;background:transparent;padding:12px 17px;letter-spacing:1px;font-weight:750;font-size:10px;white-space:nowrap}.device.on{border-color:#bac1c7;background:linear-gradient(#a7afb7,#5e6975 10%,#55606b 88%,#3c4654);color:#f9fdff;box-shadow:inset 0 1px #f1f2f260}.transport{display:flex;align-items:center;gap:8px}.bpm{display:flex;align-items:center;gap:6px;background:#1b232d;border:1px solid #52606d;border-radius:3px;padding:4px 8px}.bpm span,.bpm small{font-size:9px;color:#94a2b2;letter-spacing:1px}.bpm input{width:48px;border:0;background:transparent;color:white;font-weight:bold;font-size:17px;text-align:right;outline:none}.power{border:1px solid #82aaa3;background:linear-gradient(#476b67,#2a504d);color:#e2fff7;padding:11px 12px;white-space:nowrap;font-size:10px;font-weight:bold;letter-spacing:1px;border-radius:3px}.power.running{background:linear-gradient(#6d777b,#40474d);color:#fff}.power-dot,.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#76c8b5;box-shadow:0 0 9px #79d4c1;margin-right:5px}.transport #panic{border:1px solid #586675;background:#25303b;color:#cdd6e0;font-size:14px;min-height:37px;width:37px}.info-strip{display:flex;justify-content:space-between;gap:10px;margin:9px 1px 11px;color:#aeb9c6;font-size:9px;letter-spacing:.65px}.info-strip span:nth-child(2){color:#c0ccda;letter-spacing:0}.workgrid{display:grid;grid-template-columns:minmax(220px,250px) minmax(580px,1fr) minmax(220px,250px);align-items:start;gap:10px}.sidebar,.right-panel,.presetbar,.hero,.macro,.editor-panel{min-width:0}.sidebar{min-height:855px;padding:16px 12px;display:flex;flex-direction:column;gap:10px}.eyebrow{color:#94a9c3;letter-spacing:1.6px;font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:space-between}.eyebrow span{color:#b5bbc4}.section-heading{color:#f0f3f4;font-size:17px;font-weight:750;letter-spacing:.12px;margin-top:4px}.section-head-row{display:flex;align-items:center;justify-content:space-between}.faint{font-weight:400;color:#a0acb9;font-size:11px}.sidebar .section-heading button{background:#34414e;border:1px solid #667785;color:#dce6ed;width:19px;height:19px;border-radius:50%;font-weight:bold;float:right}.search-shell{display:flex;gap:8px;align-items:center;background:#151d25;border:1px solid #576675;border-radius:3px;padding:8px}.search-shell span{font-size:20px;color:#a9bfd0}.search-shell input{min-width:0;flex:1;border:0;background:none;outline:0;color:white}.categories{display:flex;flex-direction:column;gap:4px}.cat{width:100%;display:flex;align-items:center;gap:10px;text-align:left;padding:9px;border:1px solid #485664;background:linear-gradient(115deg,#313c48,#26313c);color:#bbc8d4;border-radius:2px;font-size:10px;letter-spacing:.3px;font-weight:650}.cat .cat-icon{font-size:18px;opacity:.8;min-width:19px}.cat span:last-child{margin-left:auto;color:#8b9aa9}.cat.active{color:#eef6fc;border-color:#9fb7c8;background:linear-gradient(120deg,#4b6072,#2d3c4b);box-shadow:inset 2px 0 #d1e6f4}.divider-line{height:1px;background:#536171;margin:7px 0}.sample-list{display:flex;flex-direction:column;gap:4px;max-height:285px;overflow:auto;scrollbar-color:#526473 #222b35}.sound{padding:7px 6px;border:1px solid #435365;border-radius:2px;background:#222d39;display:grid;grid-template-columns:1fr auto;gap:2px 8px;cursor:pointer}.sound:hover,.sound.active{background:#3b4d5f;border-color:#b3ccd9}.sound b{font-size:10px;font-weight:650}.sound small{font-size:9px;color:#a3aeb9}.sound .sound-actions{grid-row:span 2;display:flex;align-items:center}.sound button{background:#4a6071;color:white;border:1px solid #8196a6;border-radius:3px;padding:5px 7px}.upload-btn{margin-top:auto;background:linear-gradient(#828d98,#586673);border:1px solid #b0bcc5;padding:11px 8px;display:block;text-align:center;color:white;font-weight:750;letter-spacing:1.15px;cursor:pointer;font-size:10px}.sidebar-foot{font-size:10px;line-height:1.5;color:#aab5c1}.sidebar-foot b{color:#e5b781}.maincol{display:flex;flex-direction:column;gap:10px}.presetbar{padding:12px 16px;display:flex;justify-content:space-between;align-items:center;gap:16px}.presetname{font-weight:780;font-size:20px;letter-spacing:1.2px;margin-top:6px;color:#fff;text-shadow:0 1px 0 #0009}.preset-controls{display:flex;gap:7px;align-items:center;flex-wrap:wrap}select,input:not([type=range]){background:#19222d;border:1px solid #647585;color:#e1e9f0;border-radius:3px;padding:8px;font-size:11px}.preset-controls select{max-width:180px}.silver-btn{background:linear-gradient(#748493,#435262);border:1px solid #9aa9b6;color:#e7e9ea;padding:9px;font-weight:740;letter-spacing:.5px;white-space:nowrap;font-size:9px;cursor:pointer}.hero{overflow:hidden}.hero-top{padding:13px 15px 10px;display:flex;align-items:center;justify-content:space-between;gap:12px}.view-toggle,.tri-switch{display:flex;background:#17202b;padding:3px;border:1px solid #4a5868;border-radius:3px}.view-toggle button,.tri-switch button{background:none;color:#aab7c2;border:0;border-radius:2px;font-weight:750;font-size:9px;letter-spacing:.3px;padding:8px 10px}.view-toggle button.chosen,.tri-switch button.chosen{background:linear-gradient(#687c8b,#40566a);color:#f4f9fa;box-shadow:inset 0 1px 0 #b6c4d148}.visual-body{height:265px;background:radial-gradient(ellipse at 50% 60%,#29384a 0%,#101927 55%,#0b111b 95%);position:relative;overflow:hidden;border-top:1px solid #586777;border-bottom:1px solid #586777}.visual-body canvas{position:absolute;inset:0;width:100%;height:100%}.visual-body #spectrumCanvas{opacity:.65}.vgrid-overlay{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to right,transparent 49.8%,#8596b319 50%,transparent 50.2%),linear-gradient(to bottom,transparent 49.8%,#8596b319 50%,transparent 50.2%)}.visual-caption{position:absolute;left:14px;right:14px;bottom:14px;display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:1.4px;color:#c2ced9;pointer-events:none}.column-caption{border-left:2px solid #b4c6d7;padding-left:7px}.column-caption span{color:#f0d1ad}.timbre-pill{border:1px solid #7b95ad;background:#121923ad;padding:6px 10px;display:flex;gap:6px;align-items:center}.timbre-indicator{width:8px;height:8px;border-radius:50%;background:#789be7;box-shadow:0 0 12px #6880e8}.axis-label{position:absolute;font-size:8px;color:#718ba8;letter-spacing:1px;pointer-events:none}.axis-label.left{left:16px;top:14px}.axis-label.right{right:14px;top:14px}.meters{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));padding:8px 4px 11px;gap:0}.meter{min-width:0;padding:4px 9px;border-right:1px solid #4a5868;display:flex;flex-direction:column;gap:3px}.meter:last-child{border-right:0}.meter label{font-size:8px;color:#9ba8b6;letter-spacing:1px;font-weight:800}.meter b{font-family:'Consolas',monospace;font-size:19px;color:#e5edf5;white-space:nowrap;letter-spacing:-.4px}.meter small{color:#98a7b9;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.meter em{font-size:10px;font-style:normal}.levelbar{background:#131c24;border-radius:3px;height:5px;overflow:hidden}.levelbar span{display:block;height:100%;width:0;background:linear-gradient(90deg,#74c8a9,#e2cf8d,#ec987c)}.macro{padding:13px 13px 12px}.knobs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-top:10px}.knob-unit{text-align:center;min-width:0;padding:3px;border:1px solid transparent;border-radius:3px}.knob-unit:hover{background:#ffffff08;border-color:#73899b55}.knob{touch-action:none;position:relative;border-radius:50%;height:76px;width:76px;max-width:100%;margin:0 auto 7px;background:radial-gradient(circle at 30% 25%,#6b7882,#293039 58%,#14191f 77%);border:3px solid #88939c;box-shadow:inset 0 0 0 3px #1b252d,inset 2px 2px 8px #cdd0d120,2px 4px 9px #0a0c11aa;cursor:ns-resize;display:grid;place-items:center}.knob:before{content:'';position:absolute;inset:7px;border:1px solid #85909a;border-radius:50%;opacity:.6}.knob:after{content:'';position:absolute;width:11px;height:11px;border:1px solid #181b20;border-radius:50%;background:#28333c;box-shadow:inset 0 1px 1px #6a757d}.knob-notch{position:absolute;top:11px;left:calc(50% - 2px);width:4px;height:22px;border-radius:4px;background:linear-gradient(#ebf5f4,#b1d0da);box-shadow:0 0 8px #8fcede;transform-origin:50% 28px;transform:rotate(var(--rot));pointer-events:none}.knob-val{font-family:Consolas,monospace;font-size:12px;color:#d7e4ed}.knob-name{font-size:9px;letter-spacing:.45px;font-weight:850;color:#eef3f8;white-space:normal;line-height:1.3;min-height:24px}.knob-hint{font-size:9px;color:#9eabb9;margin-top:3px}.tiny-btn{border:1px solid #667989;background:linear-gradient(#435468,#303c4a);color:#cbd4de;font-size:9px;letter-spacing:.6px;font-weight:800;padding:7px 9px}.advanced{display:none;margin-top:10px;padding:12px;border:1px solid #4d6474;background:#141c25}.advanced.show{display:block}.advanced-title{font-size:10px;font-weight:bold;letter-spacing:1px;color:#b4cbdc;margin-bottom:10px}.advanced-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1.2fr;gap:10px;align-items:end}.advanced-grid label{font-size:9px;color:#a6b6c7;display:flex;flex-direction:column;gap:6px}.advanced-grid select{width:100%}.advanced-grid input{width:100%}.editor-panel{min-height:241px}.subtabs{padding:4px 6px 0;display:flex;gap:2px;border-bottom:1px solid #6e7b88;flex-wrap:wrap}.subtab{border:1px solid transparent;background:#293541;color:#b2c0cc;padding:9px 13px;letter-spacing:.6px;font-weight:800;font-size:10px}.subtab.active{border:1px solid #9caab8;border-bottom-color:#334150;color:white;background:linear-gradient(#4d6174,#344455)}.inner-panel{padding:12px 13px}.hidden{display:none!important}.panels-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}.panels-title>div:first-child{display:flex;flex-direction:column;gap:3px}.panels-title b{font-size:13px}.panels-title small{font-size:10px;color:#a4b4c2}.small-action{border:1px solid #748da1;padding:8px 10px;background:#35495b;color:#e0ebef;font-size:9px;font-weight:750;letter-spacing:.4px}.layer-list{display:flex;flex-direction:column;gap:5px}.layer{display:grid;grid-template-columns:34px 1.25fr 1fr minmax(80px,1fr) 36px;gap:8px;align-items:center;background:linear-gradient(110deg,#354350,#27343f);border:1px solid #627280;padding:8px}.layer-num{background:#171f2a;border:1px solid #5f7182;width:28px;height:28px;display:grid;place-items:center;color:#b5c5d2;font-size:11px}.layer strong{font-size:11px}.layer small{color:#a6b4c2;font-size:9px}.layer .layer-type{font-size:9px;color:#bfd0dc}.layer input{width:100%}.layer button{background:#202936;border:1px solid #536677;color:#d7e2ec;height:25px}.keyboard{display:flex;gap:3px;justify-content:center;margin-top:12px}.key{width:29px;height:45px;background:linear-gradient(#edf0ed,#9cabb7);border:1px solid #b9c4cc;border-bottom:4px solid #677988;color:#273947;border-radius:2px 2px 4px 4px;cursor:pointer;position:relative}.key.black{height:29px;background:linear-gradient(#303843,#111822);border-color:#6b7a89;color:#fff}.key:active,.key.held{background:linear-gradient(#d8c38c,#9e865b)}.key span{position:absolute;bottom:4px;left:0;right:0;text-align:center;font-size:8px}.rightcol{display:flex;flex-direction:column;gap:10px}.right-panel{padding:14px 12px}.engine-plate{margin:11px 0;padding:10px;background:linear-gradient(120deg,#43515e,#243240);border:1px solid #788594;display:flex;gap:10px;align-items:center}.engine-plate .plate-icon{font-size:23px;color:#bad6e3}.engine-plate b{font-size:10px;display:block}.engine-plate small{font-size:9px;color:#aebdc7;display:block;margin-top:4px}.setting{margin:15px 0}.setting-header{display:flex;justify-content:space-between;gap:4px;margin-bottom:8px}.setting-header label{color:#e3eaf0;font-weight:700;font-size:11px}.setting-header span{color:#a6b7c8;font-size:9px}.setting select{width:100%}.setting .tri-switch button{font-size:8px;padding:8px 6px;flex:1}.submono{display:flex;align-items:center;gap:7px}.submono label{font-size:9px;white-space:nowrap}.submono input[type=range]{flex:1;min-width:20px}.submono span{font-size:10px}.explain{font-size:9px;line-height:1.4;margin-top:7px;color:#99aab9}.right-controls{margin-top:14px;display:flex;flex-direction:column;gap:14px}.right-controls label{display:grid;grid-template-columns:1fr;gap:3px}.right-controls label span{font-size:10px;font-weight:800;letter-spacing:.5px}.right-controls label b{font-family:Consolas,monospace;color:#b6d3e5;font-size:10px}.right-controls input[type=range],.advanced input[type=range]{width:100%}.mono-line{margin-top:15px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}.mini-status{font-size:9px;color:#95a9b7}.stat-row{display:flex;justify-content:space-between;gap:7px;font-size:10px;border-bottom:1px solid #4a5968;padding:9px 0}.stat-row b{font-size:9px;white-space:nowrap}.stat-row .ok{color:#a5d7be}.stat-row .pending{color:#ecbc8a}.help-panel p{color:#9cabb9;font-size:10px;line-height:1.55}.help-panel strong{color:#e6eef2}.tag{font-size:10px;padding:5px 9px;border:1px solid #708394;background:#2d3e4e;color:#c8dbe6}.wave-wrap{border:1px solid #607486;background:#121b26;padding:5px 6px}.wave-wrap canvas{width:100%;height:130px;display:block;cursor:crosshair;touch-action:none}.wave-times{display:flex;justify-content:space-between;gap:5px;color:#a8bdca;font-size:10px;padding:3px 5px}.editor-toolbar{margin-top:10px;display:flex;gap:4px;flex-wrap:wrap}.editor-toolbar button{font-size:9px;border:1px solid #8295a4;background:#2d4053;color:#e0e9ed;padding:8px 9px;font-weight:700}.editor-toolbar button:hover,.small-action:hover{background:#536a7d}.sample-notes,.sequence-footer,.chain-footer{font-size:10px;color:#acb9c7;margin-top:9px;line-height:1.6}.sample-notes kbd{background:#182633;border:1px solid #526579;padding:2px 4px;border-radius:2px}.step-grid{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:4px;padding:8px;background:#17202b;border:1px solid #5c6c7d}.step{min-width:0;border:1px solid #5b6d7d;border-bottom:4px solid #304150;background:#2c3a49;color:#9cadbf;height:48px;display:flex;align-items:center;justify-content:center;font-size:10px}.step.active{background:linear-gradient(#7a9bb4,#4a6983);color:white;border-color:#b2cfdf}.step.playing{box-shadow:0 0 0 2px #f3d6a2,inset 0 0 10px #f5d1a288}.sequence-footer,.chain-footer{display:flex;justify-content:space-between;gap:9px;align-items:center}.toggle-line{display:flex;align-items:center;gap:7px}.toggle-line label{font-size:9px;font-weight:700}.toggle-line select{padding:5px}.effects-list{display:flex;flex-direction:column;gap:5px}.effect{background:linear-gradient(105deg,#3c4b59,#283541);border:1px solid #627889;padding:8px;display:grid;grid-template-columns:22px 1fr 48px 20px 20px 20px;gap:6px;align-items:center;cursor:grab}.effect:active{cursor:grabbing}.effect .num{font-size:10px;color:#a7b8c6}.effect b{font-size:11px}.effect button{background:#263746;border:1px solid #6c8295;color:#e3e8e9;min-height:25px}.effect .off{color:#b88a8a;text-decoration:line-through}.effect .effect-enabled{font-size:9px;white-space:nowrap}.effect[draggable=true].dragging{opacity:.35}.footer{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:12px;color:#8ea0b4;font-size:9px;letter-spacing:.8px}.footer button{background:transparent;color:#d8c8a8;border:1px solid #867b6a;padding:9px;font-size:9px;font-weight:750}.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(40px);background:#273b49;color:#eaf2f6;border:1px solid #9fb7c8;box-shadow:0 8px 30px #0008;max-width:min(90vw,650px);padding:12px 20px;font-size:12px;opacity:0;pointer-events:none;transition:all .25s;z-index:40;text-align:center}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}input[type=range]{appearance:none;-webkit-appearance:none;height:5px;background:linear-gradient(90deg,#4d7b91,#b5c9d6);border-radius:7px;cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border-radius:50%;background:linear-gradient(#e0e4e6,#788a9b);border:2px solid #283745;box-shadow:0 1px 2px #0008}body.fx-mode #panelLayers .keyboard{opacity:.4;pointer-events:none}body.fx-mode .device-switch .device[data-mode=fx]{border-color:#bdcad1}body.fx-mode .presetname{color:#d9edff}body.tech-view #visualCanvas{opacity:.16}body.tech-view #spectrumCanvas{opacity:1}body.show-view #visualCanvas{opacity:1}body.show-view #spectrumCanvas{opacity:.15}
@media(max-width:1300px){.workgrid{grid-template-columns:205px minmax(480px,1fr);}.rightcol{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.sidebar{min-height:0}.knob{width:68px;height:68px}.knobs{gap:1px}.transport{gap:3px}.device{padding:10px}}
@media(max-width:900px){.workgrid{grid-template-columns:1fr}.sidebar{min-height:0}.sidebar .categories{display:grid;grid-template-columns:repeat(3,1fr)}.sample-list{display:grid;grid-template-columns:repeat(3,1fr);max-height:none}.rightcol{display:grid;grid-template-columns:1fr 1fr}.help-panel{grid-column:1/-1}.brand{min-width:0}.top{flex-wrap:wrap}.info-strip span:nth-child(2){display:none}.knob{width:72px;height:72px}}
@media(max-width:610px){.app{margin:6px auto;padding:0 6px}.top{padding:10px;gap:8px}.brand-title{font-size:16px}.brand-sub{font-size:7px}.brand-icon{height:35px;width:35px;font-size:23px}.device-switch{width:100%;order:3}.device{flex:1;padding:8px 5px;font-size:9px}.transport{margin-left:auto}.bpm input{width:35px}.power{padding:9px 7px;font-size:8px}.info-strip{font-size:8px}.sidebar .categories{grid-template-columns:repeat(2,1fr)}.sample-list{grid-template-columns:repeat(2,1fr)}.presetbar{flex-wrap:wrap;padding:12px}.presetname{font-size:16px}.preset-controls select{max-width:130px}.hero-top{flex-wrap:wrap}.visual-body{height:215px}.meters{grid-template-columns:repeat(3,1fr)}.meter:nth-child(3){border-right:0}.meter:nth-child(-n+3){border-bottom:1px solid #495b68}.knobs{grid-template-columns:repeat(3,1fr);gap:12px}.advanced-grid{grid-template-columns:1fr 1fr}.advanced-grid .mini-status{grid-column:1/-1}.rightcol{grid-template-columns:1fr}.help-panel{grid-column:auto}.layer{grid-template-columns:27px 1fr 75px;}.layer .layer-type{display:none}.layer input{grid-column:2}.layer button{grid-column:3;grid-row:1}.step-grid{gap:1px;padding:3px}.step{height:37px;font-size:8px}.effect{grid-template-columns:15px 1fr 31px 20px 20px 20px;gap:3px}.footer span:nth-child(2){display:none}}

.section-head-row{gap:6px;flex-wrap:wrap}.section-head-row .tiny-btn{flex-shrink:0;max-width:185px;text-align:center;line-height:1.35}
@media(max-width:610px){.macro .section-head-row{display:flex;flex-direction:column;align-items:stretch}.macro .section-head-row .tiny-btn{max-width:none;width:100%}}