*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background:#0a0a0a;justify-content:center;align-items:flex-start;min-height:100vh;display:flex;overflow:auto}.sp1200{user-select:none;width:min(98vw,140vh);max-width:2400px;position:relative}.panel-img{pointer-events:none;width:100%;display:block}.sp1200.dragover:after{content:"DROP SAMPLE";letter-spacing:.3em;color:orange;z-index:100;background:#ffa00026;border:3px dashed orange;justify-content:center;align-items:center;font:800 28px/1 sans-serif;display:flex;position:absolute;inset:0}.hit{cursor:pointer;z-index:10;color:#0000;background:url(/assets/btn-white-DnJlnYvX.png) 50%/100% 100% no-repeat;border:none;outline:none;padding:0;font-size:0;transition:transform 50ms;position:absolute;overflow:visible}.hit:active{transform:translateY(1px)scale(.98)}.hit.active{filter:brightness(1.6)contrast(.9);box-shadow:0 0 8px 2px #fff6}.hit.rec{background:url(/assets/btn-red-CFzz6SvC.png) 50%/100% 100% no-repeat}.hit.rec.active{filter:brightness(1.5)contrast(1.1);box-shadow:0 0 10px 3px #ff323280}.hit.rec:active{transform:translateY(1px)scale(.98)}.lcd-overlay{z-index:15;pointer-events:none;background:#6a9a38;border:2px solid #5a5a30;border-radius:4px;flex-direction:column;justify-content:center;gap:0;width:13.52%;height:4.5%;padding:2px 4px;display:flex;position:absolute;top:17.6%;left:75.6%;overflow:hidden;box-shadow:inset 0 0 12px #64aa324d,inset 0 0 30px #78be3c26}.lcd-line{color:#1a2a08;text-shadow:0 0 1px #1a2a0880,0 0 3px #283c0f4d;letter-spacing:.5px;white-space:pre;flex:1;align-items:center;font-family:Courier New,monospace;font-size:.82vw;font-weight:700;line-height:1.4;display:flex;overflow:hidden}.fader-hit{z-index:10;border:none;position:absolute}.fader-track{cursor:pointer;background:0 0;width:100%;height:100%;position:relative}.fader-thumb{cursor:ns-resize;z-index:12;pointer-events:auto;width:40%;height:auto;position:absolute;top:25%;left:50%;transform:translate(-50%,-50%)rotate(90deg)}.pad{cursor:pointer;z-index:10;background:url(/assets/pad-fCndFkKw.png) 50%/100% 100% no-repeat;border:none;outline:none;margin-top:-1px;transition:transform 50ms,filter 50ms;position:absolute}.pad:active,.pad.triggered{filter:brightness(1.3);transform:translateY(1px)scale(.99)}#btn-record.active{animation:1s ease-in-out infinite rec-glow}@keyframes rec-glow{0%,to{filter:brightness(1.3);box-shadow:0 0 8px #ff323266}50%{filter:brightness(1.8);box-shadow:0 0 16px #ff3232b3}}.knob-wrap{z-index:10;pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute}.knob-wrap:after{content:"";pointer-events:none;z-index:2;background:radial-gradient(at 38% 30%,#b4c3d240 0%,#0000 50%);border-radius:50%;position:absolute;inset:8%}.knob{aspect-ratio:1;cursor:pointer;pointer-events:auto;width:75%;box-shadow:none;background:url(/assets/knob-BXPqsCL-.png) 50%/contain no-repeat;border:none;border-radius:50%;position:relative}.knob-cap,.knob-indicator{display:none}.led{z-index:12;pointer-events:none;background:#5a2010;border:1px solid #5a281480;border-radius:50%;width:.9%;height:.9%;transition:background .15s,box-shadow .15s;position:absolute}.led-yellow,.led-orange,.led-red{background:#5a2010}.led.on,.led-yellow.on,.led-orange.on,.led-red.on{background:#ff2800;border-color:#f40;box-shadow:0 0 5px 2px #ff2800b3,0 0 12px #ff280059}.lcd-bars{z-index:2;background:#6a9a38;flex-direction:column;padding:1px 3px;display:flex;position:absolute;inset:0}.lcd-bars-row{flex:1;justify-content:space-between;align-items:flex-end;gap:2px;display:flex}.lcd-bar{background:#1a2a08;border-radius:1px;flex:1;height:75%;transition:height 80ms}.lcd-bars-labels{color:#1a2a08;z-index:3;text-shadow:-2px -2px #6a9a38,2px -2px #6a9a38,-2px 2px #6a9a38,2px 2px #6a9a38,0 -2px #6a9a38,0 2px #6a9a38,-2px 0 #6a9a38,2px 0 #6a9a38;justify-content:space-between;gap:2px;font-family:Courier New,monospace;font-weight:700;line-height:1.2;display:flex;position:absolute;bottom:0;left:3px;right:3px;font-size:11px!important}.lcd-bars-labels span{text-align:center;flex:1}#kb-help-btn{color:#ccc;cursor:pointer;z-index:200;background:#333;border:none;border-radius:50%;width:36px;height:36px;font-size:18px;font-weight:700;position:fixed;bottom:16px;right:16px;box-shadow:0 2px 8px #00000080}#kb-help-btn:hover{color:#fff;background:#555}#kb-help{z-index:200;color:#ccc;background:#1a1a1a;border:1px solid #444;border-radius:8px;width:300px;max-height:90vh;font-family:-apple-system,sans-serif;font-size:13px;position:fixed;top:50%;right:20px;overflow-y:auto;transform:translateY(-50%);box-shadow:0 4px 24px #000000b3}.kb-header{color:#fff;border-bottom:1px solid #333;justify-content:space-between;align-items:center;padding:10px 14px;font-weight:700;display:flex}#kb-close{color:#888;cursor:pointer;background:0 0;border:none;padding:0 4px;font-size:20px}#kb-close:hover{color:#fff}.kb-body{padding:8px 14px 14px}.kb-section{margin-bottom:12px}.kb-title{text-transform:uppercase;letter-spacing:.05em;color:#888;margin-bottom:5px;font-size:11px}.kb-row{gap:4px;display:flex}.kb-row kbd,.kb-grid kbd{color:#e0e0e0;background:#2a2a2a;border:1px solid #444;border-radius:4px;justify-content:center;align-items:center;min-width:28px;height:26px;padding:0 6px;font-family:Courier New,monospace;font-size:12px;font-weight:700;display:inline-flex}.kb-hint{color:#666;margin-top:3px;font-size:11px}.kb-grid{grid-template-columns:auto 1fr;align-items:center;gap:4px 10px;display:grid}.kb-grid span{color:#aaa;font-size:12px}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:#111}::-webkit-scrollbar-thumb{background:#444;border-radius:3px}