*{box-sizing:border-box;margin:0;padding:0}html,body{-webkit-font-smoothing:antialiased;touch-action:manipulation;-webkit-user-select:none;user-select:none;background:radial-gradient(at 50% 30%,#2a2723 0%,#16140f 70%);min-height:100vh;font-family:Helvetica Neue,Helvetica,Arial,sans-serif}.stage{justify-content:center;align-items:center;min-height:100vh;padding:18px 8px;display:flex}.chassis{background:linear-gradient(#2e2b26,#1c1a16 60%,#131210);border-radius:12px;max-width:100%;padding:8px;box-shadow:0 18px 50px #000c,0 4px 10px #0000008c,inset 0 1px 1px #ffffff1a}.panel{color:#3a3226;background:linear-gradient(175deg,#ded4bd 0%,#cfc2a4 35%,#c4b795 60%,#d3c6a8 85%,#b8ab8a 100%);border:1px solid #8a7d5f;border-radius:8px;width:1240px;max-width:100%;padding:14px 18px 16px;position:relative;box-shadow:inset 0 1px #ffffff80,inset 0 -2px 4px #0003,0 12px 40px #000000b3}.top-header{align-items:stretch;gap:10px;margin-bottom:10px;display:flex}.preset-box{background:linear-gradient(#2a2621,#1c1a16);border-radius:6px;flex:1;max-width:340px;padding:8px 10px;box-shadow:inset 0 2px 5px #00000080,0 1px #ffffff26}.preset-label{letter-spacing:1.5px;color:#b0a488;text-align:center;margin-bottom:4px;font-size:8px;font-weight:700}.preset-label .gear{color:#c99a3e}.preset-input{color:#2a2621;background:#d9cfb4;border:1px solid #6b5f45;border-radius:3px;width:100%;margin-bottom:6px;padding:4px 6px;font-family:inherit;font-size:11px;font-weight:600}.preset-footer{align-items:center;gap:6px;display:flex}.preset-dropdown{color:#d9cfb4;background:#3a352c;border:1px solid #5a5140;border-radius:3px;flex:1;padding:3px 4px;font-family:inherit;font-size:8px;font-weight:700}.save-btn{color:#2a1e08;letter-spacing:.5px;cursor:pointer;background:linear-gradient(#e8a935,#c98a1e);border:1px solid #8a5f0f;border-radius:3px;padding:4px 10px;font-family:inherit;font-size:8px;font-weight:800}.save-btn.tiny{padding:3px 7px;font-size:7px}.brand-block{align-items:center;gap:8px;margin-left:auto;padding-right:8px;display:flex}.brand-icon{color:#d9a53e;background:radial-gradient(circle at 35% 30%,#4a4038,#201c16);border-radius:50%;justify-content:center;align-items:center;width:34px;height:34px;font-size:18px;display:flex;box-shadow:0 2px 4px #00000080}.brand-name{letter-spacing:-.5px;color:#2a2621;font-size:22px;font-weight:900;line-height:1}.brand-sub{letter-spacing:3px;color:#7a6f57;font-size:10px;font-weight:700}.knob-strip{border-bottom:1.5px solid #3a322640;justify-content:space-around;align-items:flex-end;gap:4px;margin-bottom:8px;padding:8px 4px 12px;display:flex}.knob-strip-gap{background:#3a322633;align-self:stretch;width:1px;margin:0 2px}.wave-col{flex-direction:column;align-items:center;gap:4px;display:flex}.ext-mode-row{color:#5a5140;letter-spacing:.5px;align-items:center;gap:4px;font-size:7px;font-weight:700;display:flex}.wave-switch{color:#d9cfb4;cursor:pointer;background:linear-gradient(#3a352c,#201c16);border:none;border-radius:5px;width:64px;height:40px;font-family:inherit;font-size:10px;font-weight:700;box-shadow:0 2px 4px #00000080,inset 0 1px 1px #ffffff1a}.knob-unit{flex-direction:column;align-items:center;gap:3px;width:72px;display:flex;position:relative}.knob-unit.small{width:60px}.knob-unit.small .knob-scale{width:50px;height:50px}.knob-dot{border-radius:50%;width:6px;height:6px;position:absolute;top:-9px;box-shadow:0 0 4px}.knob-dot.red{color:#c94a2e;background:#c94a2e}.knob-dot.blue{color:#2e8fc9;background:#2e8fc9}.knob-scale{width:64px;height:64px;position:relative}.knob-ticks{position:absolute;inset:0}.knob-body{cursor:ns-resize;touch-action:none;background:radial-gradient(circle at 38% 30%,#4a4038 0%,#241f18 45%,#100e0b 100%);border-radius:50%;position:absolute;inset:8px;box-shadow:0 4px 8px #0000008c,0 1px 2px #0009,inset 0 1px 1px #fff3,inset 0 -2px 3px #0009}.knob-body:before{content:"";background:repeating-conic-gradient(#ffffff12 0deg 4deg,#00000040 4deg 8deg);border-radius:50%;position:absolute;inset:0;-webkit-mask:radial-gradient(circle,#0000 58%,#000 62%);mask:radial-gradient(circle,#0000 58%,#000 62%)}.knob-body:after{content:"";background:radial-gradient(circle at 40% 32%,#3d362c,#1a1712 70%);border-radius:50%;position:absolute;inset:18%;box-shadow:inset 0 1px 1px #ffffff1f,0 1px 2px #00000080}.knob-pointer{transform-origin:50% 0;z-index:2;pointer-events:none;width:3px;height:50%;position:absolute;top:50%;left:50%}.knob-pointer:after{content:"";background:#e8a935;border-radius:2px;width:3px;height:42%;position:absolute;bottom:4px;left:50%;transform:translate(-50%);box-shadow:0 0 2px #000c}.knob-label{letter-spacing:.6px;color:#3a3226;text-align:center;white-space:nowrap;font-size:8px;font-weight:700}.rack-row{flex-wrap:wrap;align-items:stretch;gap:8px;margin-bottom:10px;display:flex}.playmode-block{background:#3a32260f;border:1.5px solid #3a322640;border-radius:6px;flex-direction:column;align-items:center;gap:2px;padding:8px 14px 6px;display:flex}.playmode-labels-top{color:#5a5140;gap:18px;font-size:7px;font-weight:700;display:flex}.playmode-name{letter-spacing:1px;margin-top:2px;font-size:8px;font-weight:800}.play-mode-dial{width:60px;height:46px;margin:2px 0;position:relative}.play-mode-label{cursor:pointer;width:0;height:0;font-size:0;position:absolute}.play-mode-label.pos-ext{top:-2px;left:-8px}.play-mode-label.pos-seq{top:-2px;left:50%}.play-mode-label.pos-arp{top:-2px;right:-8px}.play-mode-knob{cursor:pointer;background:radial-gradient(circle at 38% 30%,#4a4038 0%,#241f18 45%,#100e0b 100%);border-radius:50%;width:44px;height:44px;position:absolute;bottom:0;left:50%;transform:translate(-50%);box-shadow:0 4px 8px #00000080,inset 0 1px 1px #fff3}.play-mode-pointer{transition:transform .12s cubic-bezier(.3,1.4,.6,1);position:absolute;inset:0}.play-mode-pointer:after{content:"";background:#e8a935;border-radius:2px;width:3px;height:40%;position:absolute;top:4px;left:50%;transform:translate(-50%)}.rack-box{background:#3a32260f;border:1.5px solid #3a322640;border-radius:6px;padding:6px 10px 8px}.rack-box-header{letter-spacing:1.2px;align-items:center;gap:5px;margin-bottom:4px;font-size:8px;font-weight:800;display:flex}.dist-box{min-width:320px}.dist-model-row{align-items:center;gap:6px;margin-bottom:6px;display:flex;position:relative}.model-select{color:#2a2621;cursor:pointer;background:#d9cfb4;border:1px solid #6b5f45;border-radius:3px;flex:1;justify-content:space-between;padding:4px 8px;font-family:inherit;font-size:10px;font-weight:700;display:flex}.model-menu{z-index:10;background:#2a2621;border:1px solid #5a5140;border-radius:4px;position:absolute;top:100%;left:0;right:60px;box-shadow:0 6px 16px #00000080}.model-menu-item{color:#d9cfb4;cursor:pointer;padding:5px 8px;font-size:9px}.model-menu-item:hover{background:#3a352c}.toggle-chip{color:#8a7f68;cursor:pointer;background:linear-gradient(#4a4038,#241f18);border:none;border-radius:3px;padding:5px 9px;font-family:inherit;font-size:8px;font-weight:800}.toggle-chip.on{color:#e8a935;text-shadow:0 0 5px #e8a935b3}.dist-knob-row{justify-content:space-around;gap:10px;display:flex}.order-switch-col{flex-direction:column;align-items:center;gap:3px;display:flex}.order-switch{cursor:pointer;background:#241f18;border:none;border-radius:4px;flex-direction:column;font-family:inherit;display:flex;overflow:hidden}.order-switch span{color:#6b5f45;padding:4px 10px;font-size:7.5px;font-weight:700}.order-switch span.on{color:#e8a935;background:#3a352c}.fx-box{flex:1;min-width:380px}.fx-tabs-row{flex-wrap:wrap;align-items:center;gap:3px;margin-bottom:6px;display:flex}.fx-tab{color:#8a7f68;cursor:pointer;background:linear-gradient(#4a4038,#241f18);border:none;border-radius:3px;align-items:center;gap:4px;padding:5px 8px;font-family:inherit;font-size:7.5px;font-weight:800;display:flex}.fx-tab.active{color:#e8a935;background:linear-gradient(#5a5040,#2e2922)}.fx-tab.on .led-dot{background:#6dc48a;box-shadow:0 0 4px #6dc48a}.reverb-tab{color:#d9cfb4}.fx-preset-name{color:#5a5140;text-align:center;flex:1;font-size:8px;font-weight:700}.fx-knob-row{justify-content:space-around;gap:10px;padding-top:2px;display:flex}.out-box{flex-direction:column;align-items:center;gap:6px;min-width:180px;display:flex}.out-cols{align-items:flex-end;gap:14px;display:flex}.vol-col,.meter-col{flex-direction:column;align-items:center;gap:3px;display:flex}.meter-bars{background:#201c16;border-radius:3px;flex-direction:column-reverse;gap:1.5px;width:26px;height:64px;padding:3px;display:flex}.meter-bar{background:#3a352c;border-radius:1px;flex:1}.meter-bar.on{background:#6dc48a}.meter-bar.on.warm{background:#d9a53e}.meter-bar.on.hot{background:#c94a2e}.led-dot{background:#4a4038;border-radius:50%;width:7px;height:7px;display:inline-block;box-shadow:inset 0 1px 1px #00000080}.led-dot.on{background:#e8a935;box-shadow:0 0 6px #e8a935e6}.pattern-topbar{align-items:center;gap:6px;margin-bottom:6px;display:flex}.chip-btn{color:#d9cfb4;cursor:pointer;background:linear-gradient(#4a4038,#241f18);border:none;border-radius:3px;padding:5px 10px;font-family:inherit;font-size:8px;font-weight:800}.chip-btn.tiny{padding:2px 6px;font-size:8px}.chip-btn.arrow{padding:5px 8px}.pattern-name-input{color:#2a2621;background:#d9cfb4;border:1px solid #6b5f45;border-radius:3px;flex:1;padding:5px 8px;font-family:inherit;font-size:11px;font-weight:700}.sequencer-body{align-items:flex-start;gap:8px;display:flex}.grid-wrap{background:#cabd9c;border:1px solid #8a7d5f;border-radius:4px;flex:1;padding:4px;overflow-x:auto}.seq-grid{gap:1px;display:grid}.grid-row{grid-template-columns:subgrid;grid-column:1/-1;display:grid}.row-group-label{writing-mode:vertical-rl;letter-spacing:1.5px;color:#5a5140;background:#bdb08e;grid-column:1;justify-content:center;align-items:center;font-size:8px;font-weight:800;display:flex;transform:rotate(180deg)}.row-num-label{color:#5a5140;background:#c4b795;justify-content:center;align-items:center;min-height:14px;font-size:7px;font-weight:700;display:flex}.flag-label{font-size:6.5px}.grid-cell{cursor:pointer;background:#e2d8bd;min-height:14px}.grid-cell:hover{background:#ecdfc0}.grid-cell.beyond{opacity:.4}.grid-cell.playhead{outline-offset:-1.5px;outline:1.5px solid #c94a2e}.oct-cell.active{background:#3d7a6b}.pitch-cell.active{background:#2f6b8a}.flag-cell.slide-cell.active{background:#b06a1e}.flag-cell.accent-cell.active{background:#c94a2e}.flag-cell.vibrato-cell.active{background:#7a4ea3}.edit-panel{background:#3a32260f;border:1.5px solid #3a322640;border-radius:6px;flex-direction:column;gap:6px;width:230px;padding:8px 10px;display:flex}.edit-tabs{gap:4px;margin-bottom:4px;display:flex}.edit-tab{color:#8a7f68;cursor:pointer;background:linear-gradient(#4a4038,#241f18);border:none;border-radius:3px;flex:1;padding:5px 0;font-family:inherit;font-size:8px;font-weight:800}.edit-tab.active{color:#e8a935;background:linear-gradient(#5a5040,#2e2922)}.edit-row-label{letter-spacing:.5px;color:#5a5140;flex:1;font-size:8px;font-weight:700}.edit-row-label.small{text-align:center;font-size:7px}.stepper-row{align-items:center;gap:6px;display:flex}.stepper-value{text-align:center;background:#d9cfb4;border:1px solid #6b5f45;border-radius:3px;min-width:46px;padding:3px 0;font-size:9px;font-weight:800}.scale-row{align-items:center;gap:4px;display:flex}.scale-select{color:#2a2621;background:#d9cfb4;border:1px solid #6b5f45;border-radius:3px;padding:3px 4px;font-family:inherit;font-size:8px;font-weight:700}.scale-sep{color:#5a5140;font-weight:700}.inversion-select{text-align:center;flex:1}.transform-row{align-items:center;gap:4px;display:flex}.live-override-box{border-top:1px solid #3a322640;margin-top:4px;padding-top:6px}.live-override-title{letter-spacing:1px;text-align:center;margin-bottom:4px;font-size:8px;font-weight:800}.live-override-grid{justify-content:space-between;gap:4px;display:flex}.live-override-col{flex-direction:column;align-items:center;gap:2px;display:flex}.mini-btn{color:#d9cfb4;cursor:pointer;background:linear-gradient(#4a4038,#241f18);border:none;border-radius:3px;width:36px;padding:3px 0;font-family:inherit;font-size:7px;font-weight:800}.mini-btn.on{color:#c94a2e;background:linear-gradient(#5a3830,#2e1a16)}.pads-panel{flex-direction:column;gap:6px;width:190px;display:flex}.pads-buttons-row{gap:4px;display:flex}.pad-action{cursor:pointer;color:#2a1e08;border:none;border-radius:4px;flex:1;padding:6px 0;font-family:inherit;font-size:8px;font-weight:800}.pad-action.copy{background:linear-gradient(#e8c93e,#c9a81e)}.pad-action.paste{background:linear-gradient(#e8a935,#c9821e)}.pad-action.clear{color:#fff2ea;background:linear-gradient(#e05a35,#c9381e)}.live-host-tabs{gap:3px;display:flex}.lh-tab{color:#8a7f68;cursor:pointer;background:linear-gradient(#4a4038,#241f18);border:none;border-radius:3px;flex:1;padding:4px 0;font-family:inherit;font-size:7.5px;font-weight:800}.lh-tab.active{color:#e8a935}.pad-grid{grid-template-columns:repeat(4,1fr);gap:4px;display:grid}.pad-btn{aspect-ratio:1;color:#d9cfb4;cursor:pointer;background:linear-gradient(#4a4038,#241f18);border:none;border-radius:4px;font-family:inherit;font-size:10px;font-weight:700}.pad-btn.active{color:#fff2ea;background:linear-gradient(#c94a2e,#8a2e18);box-shadow:0 0 8px #c94a2e99}.bank-row{gap:4px;display:flex}.bank-btn{cursor:pointer;color:#2a2621;opacity:.55;border:none;border-radius:4px;flex:1;padding:6px 0;font-family:inherit;font-size:9px;font-weight:800}.bank-btn.bank-a{background:#e8c93e}.bank-btn.bank-b{background:#e8a935}.bank-btn.bank-c{color:#fff2ea;background:#c94a2e}.bank-btn.bank-d{color:#fff2ea;background:#7a4ea3}.bank-btn.active{opacity:1;box-shadow:0 0 8px #0006}.bottom-transport{align-items:center;gap:12px;margin-top:10px;display:flex}.run-btn{color:#d9cfb4;cursor:pointer;background:linear-gradient(#4a4038,#201c16);border:none;border-radius:5px;padding:10px 22px;font-family:inherit;font-size:12px;font-weight:800;box-shadow:0 3px 6px #00000080}.run-btn.on{color:#6dc48a;text-shadow:0 0 6px #6dc48ab3}.hint{color:#6b5f45;letter-spacing:.3px;font-size:9px}@media (max-width:1100px){.sequencer-body{flex-wrap:wrap}.edit-panel,.pads-panel{width:100%}}@media (max-width:700px){.knob-strip{flex-wrap:wrap;row-gap:8px}.rack-row,.top-header{flex-direction:column}.preset-box{max-width:none}.brand-block{margin-left:0}}