*{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%,#2a2a2e 0%,#161618 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(#2e2f31,#1c1d1f 60%,#141517);border-radius:12px;align-items:stretch;max-width:100%;padding:7px 0;display:flex;box-shadow:0 18px 50px #000c,0 4px 10px #0000008c,inset 0 1px 1px #ffffff1f}.chassis-cap{background:repeating-linear-gradient(0deg,#ffffff08 0 2px,#0000001f 2px 4px),linear-gradient(90deg,#303134,#202124);border-radius:10px;flex-shrink:0;width:16px}.chassis .panel{border-radius:4px;box-shadow:inset 0 1px #ffffffe6,inset 0 -2px 4px #00000040,0 0 0 1px #6f7174}.panel{background:repeating-linear-gradient(90deg,#ffffff09 0,#00000005 1px,#ffffff08 2px),linear-gradient(175deg,#e9eaec 0%,#cfd1d4 30%,#c3c5c9 55%,#d6d8db 80%,#b8babe 100%);border:1px solid #8e9093;border-radius:10px;width:1060px;max-width:100%;padding:20px 26px 24px;position:relative;box-shadow:inset 0 1px #ffffffe6,inset 0 -2px 4px #00000040,inset 2px 0 3px #fff6,inset -2px 0 4px #00000026,0 12px 40px #000000bf,0 3px 8px #00000080}.screw{background:radial-gradient(circle at 35% 30%,#f2f3f4,#9a9c9f 55%,#6f7174);border-radius:50%;width:13px;height:13px;position:absolute;box-shadow:inset 0 -1px 2px #00000080,0 1px 1px #fff9}.screw:after{content:"";background:linear-gradient(#5a5c5f,#3c3e40);border-radius:1px;width:1.5px;position:absolute;top:15%;bottom:15%;left:50%;transform:translate(-50%)rotate(38deg)}.screw.tl{top:8px;left:8px}.screw.tr{top:8px;right:8px}.screw.bl{bottom:8px;left:8px}.screw.br{bottom:8px;right:8px}.header{justify-content:space-between;align-items:flex-end;margin-bottom:10px;padding:0 2px;display:flex}.brand{flex-direction:column;gap:1px;display:flex}.behringer{letter-spacing:3.5px;color:#232426;font-size:15px;font-style:italic;font-weight:800}.model{letter-spacing:1px;color:#1c1d1f;font-size:30px;font-weight:900;line-height:1}.model span{color:#4a4c4f;font-size:16px;font-weight:300}.subtitle{letter-spacing:1.6px;color:#4a4c4f;text-transform:uppercase;font-size:8.5px;font-weight:600}.section{border:1.5px solid #2b2c2e;border-radius:6px;padding:16px 10px 8px;position:relative}.section-label{letter-spacing:1.4px;color:#232426;background:#cfd1d4;padding:0 6px;font-size:9px;font-weight:700;position:absolute;top:-7px;left:10px}.knob-strip{border-bottom:1.5px solid #23242640;justify-content:space-around;align-items:flex-end;gap:4px;margin-bottom:10px;padding:6px 4px 14px;display:flex}.knob-strip-gap{background:#23242633;align-self:stretch;width:1px;margin:0 4px}.jack-row{align-items:flex-end;gap:10px;margin:0 4px;padding-bottom:8px;display:flex}.jack{flex-direction:column;align-items:center;gap:2px;display:flex}.jack-arrow{color:#6c6e71;font-size:7px;line-height:1}.jack-hole{background:radial-gradient(circle at 40% 35%,#3a3b3e,#101113 70%);border-radius:50%;width:16px;height:16px;box-shadow:inset 0 2px 3px #000000b3,0 1px #ffffff4d}.jack-label{color:#4a4c4f;letter-spacing:.3px;flex-direction:column;align-items:center;font-size:6px;font-weight:700;line-height:1.1;display:flex}.row-mid{flex-wrap:wrap;align-items:stretch;gap:10px;margin-bottom:14px;display:flex}.sec-tempo,.sec-swing,.sec-vco,.sec-volume{flex-direction:column;align-items:center;gap:4px;display:flex}.sec-vco{min-width:96px}.sec-swing{opacity:.92;border-style:dashed}.tempo-range{letter-spacing:1px;color:#4a4c4f;font-size:6.5px;font-weight:700}.sec-mode{flex-direction:column;align-items:center;display:flex}.sec-pattern{flex-direction:column;flex:1;align-items:center;gap:6px;min-width:200px;display:flex}.pattern-dial-area{align-items:center;gap:10px;display:flex}.group-btns{flex-direction:column;gap:3px;display:flex}.group-btn{color:#cfd1d3;cursor:pointer;background:linear-gradient(#3e3f42,#232427 60%,#1a1b1d);border:none;border-radius:4px;width:24px;height:18px;font-family:inherit;font-size:8px;font-weight:700;box-shadow:0 2px 4px #00000080,inset 0 1px 1px #ffffff26}.group-btn.active{color:#ffcdb8;text-shadow:0 0 7px #ff5a28;box-shadow:0 0 8px #ff501e66,0 2px 4px #00000080,inset 0 1px 1px #ffffff26}.chain-display{color:#3a3c3e;text-align:center;font-size:9px;font-weight:700}.logo-block{flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:0 6px;display:flex}.behringer-mini{letter-spacing:1px;color:#6c6e71;font-size:9px;font-style:italic;font-weight:800}.sec-dist-switch{flex-direction:column;justify-content:center;align-items:center;display:flex}.hswitch{cursor:pointer;background:linear-gradient(#6f7174,#8f9194);border-radius:5px;align-items:center;width:74px;height:24px;display:flex;position:relative;box-shadow:inset 0 2px 5px #00000080}.hswitch span{text-align:center;color:#2b2c2e;z-index:1;flex:1;font-size:7px;font-weight:700}.hswitch span.on{color:#fff2ee}.hswitch-thumb{background:linear-gradient(#3a3b3e,#1d1e20);border-radius:4px;width:calc(50% - 4px);transition:left 80ms;position:absolute;top:2px;bottom:2px;box-shadow:0 2px 3px #0000008c,inset 0 1px 1px #fff3}.sec-volume{min-width:68px}.knob-unit{flex-direction:column;align-items:center;gap:3px;width:74px;display:flex}.knob-scale{width:66px;height:66px;position:relative}.knob-ticks{position:absolute;inset:0}.knob-body{cursor:ns-resize;touch-action:none;background:radial-gradient(circle at 38% 30%,#4a4b4e 0%,#232427 45%,#101113 100%);border-radius:50%;position:absolute;inset:8px;box-shadow:0 4px 8px #0000008c,0 1px 2px #0009,inset 0 1px 1px #ffffff40,inset 0 -2px 3px #0009}.knob-body:before{content:"";background:repeating-conic-gradient(#ffffff14 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%,#3d3e41,#1a1b1d 70%);border-radius:50%;position:absolute;inset:18%;box-shadow:inset 0 1px 1px #ffffff26,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:#f4f5f6;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:1px;color:#232426;text-align:center;white-space:nowrap;font-size:8.5px;font-weight:700}.knob-unit.small{width:62px}.knob-unit.small .knob-scale{width:54px;height:54px}.wave-unit{flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;padding-bottom:4px;display:flex}.wave-icons{color:#232426;flex-direction:column;align-items:center;gap:7px;font-size:11px;display:flex}.slide-switch{cursor:pointer;background:linear-gradient(#8f9194,#6f7174);border-radius:5px;width:26px;height:48px;position:relative;box-shadow:inset 0 2px 5px #0009}.slide-thumb{background:linear-gradient(#3a3b3e,#1d1e20);border-radius:4px;height:20px;transition:top 80ms;position:absolute;left:2px;right:2px;box-shadow:0 2px 3px #0000008c,inset 0 1px 1px #fff3}.slide-thumb:after{content:"";background:#ffffff40;border-radius:1px;height:2px;position:absolute;top:50%;left:4px;right:4px;transform:translateY(-50%)}.push-btn{color:#d8d9db;letter-spacing:.6px;cursor:pointer;background:linear-gradient(#3e3f42,#232427 60%,#1a1b1d);border:none;border-radius:5px;min-width:52px;height:34px;padding:0 10px;font-family:inherit;font-size:8.5px;font-weight:700;transition:transform 50ms,box-shadow 50ms;box-shadow:0 3px 5px #00000080,inset 0 1px 1px #ffffff2e,inset 0 -2px 3px #00000080}.push-btn:active,.push-btn.pressed{transform:translateY(1.5px);box-shadow:0 1px 2px #00000080,inset 0 2px 4px #0000008c}.push-btn.lit{color:#ffe9e0;text-shadow:0 0 6px #ff5a28e6}.run-btn{background:linear-gradient(#4a4b4e,#28292c 60%,#1d1e20);min-width:86px;height:44px;font-size:10px}.led{background:radial-gradient(circle at 40% 35%,#7a2a20,#45140e);border-radius:50%;width:8px;height:8px;box-shadow:inset 0 1px 1px #0009,0 1px 1px #fff6}.led.on{background:radial-gradient(circle at 40% 35%,#ff9d84,#ff3b1a 60%,#c21f07);box-shadow:0 0 8px #ff461ef2,0 0 16px #ff461e80,inset 0 1px 1px #ffffff59}.mode-dial{justify-content:center;align-items:center;gap:8px;padding:2px 4px;display:flex}.mode-dial-labels{letter-spacing:.5px;color:#232426;flex-direction:column;gap:14px;font-size:7px;font-weight:700;line-height:1.35;display:flex}.mode-dial-label{cursor:pointer;opacity:.65}.mode-dial-label.left{text-align:right}.mode-dial-label.right{text-align:left}.mode-dial-label.active{opacity:1;text-shadow:0 0 1px #0006}.mode-dial-knob{cursor:pointer;background:radial-gradient(circle at 38% 30%,#4a4b4e 0%,#232427 45%,#101113 100%);border-radius:50%;flex-shrink:0;width:58px;height:58px;position:relative;box-shadow:0 4px 8px #0000008c,inset 0 1px 1px #ffffff40,inset 0 -2px 3px #0009}.mode-dial-knob:before{content:"";background:repeating-conic-gradient(#ffffff14 0deg 5deg,#00000040 5deg 10deg);border-radius:50%;position:absolute;inset:0;-webkit-mask:radial-gradient(circle,#0000 55%,#000 60%);mask:radial-gradient(circle,#0000 55%,#000 60%)}.mode-dial-pointer{transition:transform .12s cubic-bezier(.3,1.4,.6,1);position:absolute;inset:0}.mode-dial-pointer:after{content:"";background:#f4f5f6;border-radius:2px;width:4px;height:40%;position:absolute;top:5px;left:50%;transform:translate(-50%);box-shadow:0 0 2px #000c}.pattern-dial{padding:4px}.pattern-dial-ring{width:76px;height:76px;position:relative}.pattern-dial-num{color:#4a4c4f;cursor:pointer;background:0 0;border:none;border-radius:50%;width:17px;height:17px;font-family:inherit;font-size:8px;font-weight:700;position:absolute;transform:translate(-50%,-50%)}.pattern-dial-num.active{color:#ffcdb8;text-shadow:0 0 6px #ff5a28}.pattern-dial-group{color:#6c6e71;pointer-events:none;font-size:7px;font-weight:800;position:absolute;transform:translate(-50%,-50%)}.pattern-dial-knob{cursor:pointer;background:radial-gradient(circle at 38% 30%,#4a4b4e 0%,#232427 45%,#101113 100%);border-radius:50%;position:absolute;inset:14px;box-shadow:0 4px 8px #0000008c,inset 0 1px 1px #ffffff40,inset 0 -2px 3px #0009}.pattern-dial-knob:before{content:"";background:repeating-conic-gradient(#ffffff14 0deg 5deg,#00000040 5deg 10deg);border-radius:50%;position:absolute;inset:0;-webkit-mask:radial-gradient(circle,#0000 55%,#000 60%);mask:radial-gradient(circle,#0000 55%,#000 60%)}.pattern-dial-pointer{transition:transform .12s cubic-bezier(.3,1.4,.6,1);position:absolute;inset:0}.pattern-dial-pointer:after{content:"";background:#f4f5f6;border-radius:2px;width:3px;height:42%;position:absolute;top:4px;left:50%;transform:translate(-50%);box-shadow:0 0 2px #000c}.step-strip{grid-template-columns:repeat(16,1fr);gap:5px;margin-bottom:14px;display:grid}.step-cell{cursor:pointer;border-radius:4px;flex-direction:column;align-items:center;gap:3px;padding:4px 0 2px;display:flex}.step-cell:hover{background:#0000000d}.step-cell.selected{background:#ff642824;outline:1px solid #c83c1466}.step-cell.beyond{opacity:.32}.step-num{color:#3a3c3e;font-size:7px;font-weight:700}.step-flags{gap:2px;height:5px;display:flex}.step-flag{border-radius:50%;width:4px;height:4px}.step-flag.accent{background:#c2401a}.step-flag.slide{background:#1a5ac2}.step-flag.tie{background:#b8860b;border-radius:2px;width:8px}.kb-row{gap:10px;margin-top:16px;margin-bottom:14px;display:flex}.note-switches{flex:1;gap:4px;display:flex}.switch-col{flex-direction:column;flex:1;align-items:center;gap:6px;display:flex}.switch-col .led{flex-shrink:0}.rocker-switch{cursor:pointer;touch-action:none;background:linear-gradient(#3c3d40,#232427 55%,#161719);border:none;border-radius:4px;width:100%;height:46px;box-shadow:0 3px 5px #00000080,inset 0 1px 1px #ffffff26,inset 0 -3px 4px #0000004d}.rocker-switch:before{content:"";background:#ffffff26;border-radius:1px;width:40%;height:2px;margin:6px auto 0;display:block}.rocker-switch:active,.rocker-switch.down{background:linear-gradient(#2a2b2e,#1a1b1d);transform:translateY(1px);box-shadow:0 1px 2px #00000080,inset 0 2px 4px #0000008c}.rocker-label{color:#3a3c3e;font-size:7px;font-weight:700}.fn-keys{gap:3px;width:210px;display:flex}.fn-key{color:#cfd1d3;letter-spacing:.4px;cursor:pointer;writing-mode:vertical-rl;text-orientation:mixed;background:linear-gradient(#3c3d40,#202124 60%,#161719);border:none;border-radius:0 0 5px 5px;flex:1;justify-content:center;align-items:flex-end;padding-bottom:8px;font-family:inherit;font-size:7px;font-weight:700;display:flex;box-shadow:0 3px 5px #00000080,inset 0 1px 1px #ffffff1f}.fn-key:active,.fn-key.pressed{transform:translateY(1px);box-shadow:0 1px 2px #00000080,inset 0 2px 4px #00000080}.fn-key.lit{color:#ffb59e;text-shadow:0 0 6px #ff5a28e6}.bottom-row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.bottom-row .spacer{flex:1}.transport-cluster{border-right:1.5px solid #23242633;align-items:center;gap:6px;margin-right:4px;padding-right:6px;display:flex}.rand-btn{color:#ffcdb8}.hint{text-align:center;color:#55575a;letter-spacing:.4px;margin-top:12px;font-size:9.5px}@media (max-width:900px){.panel{padding:14px 12px 16px}.knob-unit{width:58px}.knob-scale{width:52px;height:52px}.row-mid{flex-wrap:wrap}.fn-keys{width:150px}.note-switches,.rocker-switch{height:100px}}@media (max-width:600px){.stage{align-items:flex-start;padding:8px 3px}.panel{padding:12px 8px 14px}.knob-strip{flex-wrap:wrap;row-gap:8px}.knob-unit{width:30%}.knob-label{letter-spacing:.3px;white-space:normal;text-align:center;font-size:7.5px}.kb-row{flex-direction:column}.rocker-switch{height:46px}.fn-keys{width:100%;height:42px}.fn-key{writing-mode:horizontal-tb;justify-content:center;align-items:center;padding-bottom:0}.model{font-size:22px}.model span{font-size:12px}.step-strip{gap:2px}.row-mid .section{width:100%}.sec-vco{justify-content:center;align-items:center;padding:12px 10px 8px}.sec-vco .wave-unit{flex-direction:row;align-items:center;gap:14px;padding:0}.sec-vco .wave-icons{flex-direction:column}.sec-tempo{justify-content:space-between}.pattern-dial-area{gap:6px}.group-btn{width:22px;height:20px;font-size:7px}.transport-cluster{border-right:none;flex-wrap:wrap}}