.deck{position:absolute;top:40px;right:64px;width:326px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:#c4c4c4;z-index:5}.ob4-panel{position:relative;height:108px;background:linear-gradient(170deg,#292a2a,#171818 65%);border:1px solid #353636;border-radius:2px;box-shadow:inset 0 1px 0 #ffffff12,0 5px 11px #0005}.ob4-panel:after{content:'';position:absolute;bottom:0;left:0;right:0;height:5px;background:#090a0a;opacity:.5;pointer-events:none}.line-socket{position:absolute;left:23px;top:17px;width:6px;height:6px;border-radius:50%;background:#050505;border:1px solid #373737;box-shadow:0 0 0 2px #212121}.line-socket:after{content:'│';position:absolute;top:8px;color:#777;font:9px var(--mono);left:0}.panel-readout{position:absolute;top:16px;left:55px;right:42px;display:flex;gap:8px;align-items:baseline;color:#d5dbd9;text-shadow:0 0 4px #dbe6e94a;font:10px var(--mono);letter-spacing:1px}.panel-readout #signal-label{font-size:9px;min-width:36px;color:#89908d}.panel-readout #rate-label{font-size:9px;margin-left:auto}.panel-modes{position:absolute;left:55px;top:35px;display:flex;gap:13px;font:6px Arial,sans-serif;letter-spacing:.3px;color:#909391}.panel-modes #loop-range{font:6px var(--mono);color:#cbd2cd}.panel-buttons,.panel-knobs{position:absolute;bottom:10px;display:flex;gap:8px}.panel-buttons{left:17px}.panel-knobs{right:17px;gap:10px}.panel-buttons>div,.panel-knobs>div{text-align:center}.panel-buttons>div>span,.panel-knobs>div>span{display:block;font:6px Arial,sans-serif;margin-top:5px;letter-spacing:.3px;color:#737675}.panel-buttons button,#volume-knob,#dial{display:block;width:33px;height:33px;border:1px solid #0b0c0c;border-radius:50%;background:linear-gradient(160deg,#2c2d2d,#1a1b1b);box-shadow:inset 0 1px 1px #ffffff09,0 2px 3px #0007;position:relative;padding:0;touch-action:none}.panel-buttons button:active,.panel-buttons button.held{transform:translateY(1px);box-shadow:inset 0 1px 4px #0008}.panel-buttons button[aria-pressed=true]#input-modifier{border-color:#bbb;background:#292929}.panel-buttons #play svg{display:block;width:11px;height:11px;fill:#9c9f9e;position:absolute;top:10px;left:10px}.panel-buttons #input-modifier:before{content:'';position:absolute;width:4px;height:4px;left:14px;top:14px;border-radius:50%;background:#5d6260}.panel-buttons #input-modifier.held:before{background:#d7ded9}.panel-knobs #volume-knob{transform:none;cursor:grab}.panel-knobs #volume-knob span{position:absolute;inset:0;transform:rotate(var(--knob-angle,-20deg));pointer-events:none}.panel-knobs #volume-knob span:before{content:'';position:absolute;left:13px;top:-2px;width:7px;height:35px;border-radius:1px;background:linear-gradient(90deg,#050505,#333 45%,#141515);box-shadow:1px 2px 3px #0008;transform:rotate(40deg)}.panel-knobs #dial{cursor:grab;background:#1b1c1c;box-shadow:inset 0 1px 2px #ffffff08}.panel-knobs #dial-pointer{position:absolute;inset:0;border-radius:50%;pointer-events:none}.panel-knobs #dial-pointer:before,.panel-knobs #dial-pointer:after{content:'';position:absolute;width:3px;height:3px;background:#aaa;left:14px;border-radius:0}.panel-knobs #dial-pointer:before{top:4px}.panel-knobs #dial-pointer:after{bottom:4px}.player-caption{display:flex;justify-content:space-between;align-items:center;padding:12px 1px;gap:10px}.player-caption #track-name{font:9px var(--mono);line-height:1.5;color:#aaa;max-width:232px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-caption #track-credit{font:6px var(--mono);color:#5e625f;letter-spacing:1px;margin-top:3px}.player-caption>div:last-child{display:flex;align-items:center;gap:8px}.player-caption button{font:8px var(--mono);background:none;border:0;color:#8c928f;padding:6px 2px;min-height:24px;letter-spacing:.3px}.player-caption #options-toggle{width:20px;letter-spacing:1px}.visual-window{display:block;width:100%;height:171px;position:relative;background:#fff;padding:0;border:0;border-radius:2px;overflow:hidden;cursor:pointer}.visual-window #visualizer{display:block;width:100%;height:100%;max-height:none}.visual-note{position:absolute;left:0;right:0;bottom:12px;text-align:center;color:#a4a4a4;font:6px var(--mono);letter-spacing:1.5px}.deck.playing .visual-note{opacity:0}.deck #visual-fallback{font:8px var(--mono);line-height:1.5;color:#b1aca1}.deck #deck-options{background:#1b1c1c;padding:15px;margin-top:12px;border:1px solid #363837;border-radius:3px}.deck .timeline-wrap{display:flex;align-items:center;gap:12px;margin-bottom:15px}.deck #duration{font:8px var(--mono);color:#9a9e9c;min-width:32px}.advanced-volume{display:flex;align-items:center;gap:12px;font:8px var(--mono);color:#999;margin-bottom:13px}.advanced-volume input{flex:1}.deck .loop-controls{display:flex;gap:5px;align-items:center}.deck .hardware-button{border:1px solid #424443;background:#242625;border-radius:2px;color:#a9adab;font:8px var(--mono);padding:7px;min-height:28px}.deck .hardware-button[aria-pressed=true]{border-color:#b1b6b3;color:#e3e8e5;background:#363a38}.deck .hardware-button:hover{border-color:#8c918e}.deck .loop-controls .hardware-button{flex:1;text-align:center}.deck .loop-controls span{float:none;margin-left:5px;color:#a9adab}.deck .rate-row{margin-top:14px;color:#aaa}.deck .bpm-row{display:flex;gap:8px;align-items:center;font:8px var(--mono);margin-top:12px;color:#a3a7a5}.deck .bpm-row input{width:45px;border:1px solid #4e514f;background:#161817;color:#ddd;padding:5px;font:9px var(--mono)}.deck #saved-loops{width:100%;margin-top:12px;background:#202322;color:#aeb4b0;border:1px solid #444944;font:9px var(--mono);padding:7px}.deck .file-button{border-color:#575d59;color:#c0c7c2}.deck .deck-help{font:8px var(--mono);line-height:1.8;color:#979c98;margin:12px 0 0}.deck #player-status{font:8px var(--mono);line-height:1.7;color:#bbc7bf;margin:10px 0 0;display:block}.deck #player-status:empty{display:none}.deck.capturing .panel-readout #signal-label{color:#a3c596}.deck.capturing .ob4-panel{border-color:#678f4f}.deck.scrubbing #dial{border-color:#a0a8a2}.deck .visual-window:focus-visible{outline-offset:5px}.deck .export-button{margin-top:8px}.deck input[type=range]{background:#484e4a}.deck input[type=range]::-webkit-slider-thumb{background:#ced4d0}
@media(max-width:1200px){.deck{right:40px;width:300px}}@media(max-width:950px){.deck{right:32px;top:30px;width:290px}}@media(max-width:650px){.deck{position:absolute;top:20px;left:auto;right:22px;width:130px;padding:0;max-width:none;align-self:auto;order:2}.deck .ob4-panel{height:60px}.deck .panel-readout{top:9px;left:13px;right:10px;font-size:7px;gap:3px}.deck .panel-readout #signal-label{font-size:6px;min-width:0}.deck .panel-readout #rate-label{font-size:6px}.deck .line-socket,.deck .panel-modes{display:none}.deck .panel-buttons{left:10px;bottom:7px;gap:5px}.deck .panel-knobs{right:10px;bottom:7px;gap:5px}.deck .panel-buttons button,.deck .panel-knobs #volume-knob,.deck .panel-knobs #dial{width:20px;height:20px}.deck .panel-buttons #input-modifier:before{width:3px;height:3px;left:8px;top:8px}.deck .panel-buttons #play svg{width:7px;height:7px;left:6px;top:6px}.deck .panel-buttons>div>span,.deck .panel-knobs>div>span{display:none}.deck .panel-knobs #volume-knob span:before{left:8px;width:4px;height:21px}.deck .panel-knobs #dial-pointer:before,.deck .panel-knobs #dial-pointer:after{left:8px;width:2px;height:2px}.deck .panel-knobs #dial-pointer:before{top:3px}.deck .panel-knobs #dial-pointer:after{bottom:3px}.deck .player-caption{padding:4px 0;justify-content:flex-end}.deck .player-caption>div:first-child{display:none}.deck .visual-window{height:75px;display:none}.deck .player-caption #loop-capture{font-size:7px}.deck #player-status{display:none}.deck:has(#options-toggle[aria-expanded=true]){top:90px;left:22px;right:22px;width:auto;max-width:360px;padding:0;border:0;border-radius:0;background:none}.deck:has(#options-toggle[aria-expanded=true]) .ob4-panel{height:108px}.deck:has(#options-toggle[aria-expanded=true]) .panel-readout{top:16px;left:55px;right:40px;font-size:10px;gap:8px}.deck:has(#options-toggle[aria-expanded=true]) .panel-readout #signal-label,.deck:has(#options-toggle[aria-expanded=true]) .panel-readout #rate-label{font-size:9px}.deck:has(#options-toggle[aria-expanded=true]) .line-socket,.deck:has(#options-toggle[aria-expanded=true]) .panel-modes{display:flex}.deck:has(#options-toggle[aria-expanded=true]) .panel-buttons{left:17px;bottom:10px;gap:8px}.deck:has(#options-toggle[aria-expanded=true]) .panel-knobs{right:17px;bottom:10px;gap:10px}.deck:has(#options-toggle[aria-expanded=true]) .panel-buttons button,.deck:has(#options-toggle[aria-expanded=true]) .panel-knobs #dial,.deck:has(#options-toggle[aria-expanded=true]) .panel-knobs #volume-knob{width:33px;height:33px}.deck:has(#options-toggle[aria-expanded=true]) .panel-buttons>div>span,.deck:has(#options-toggle[aria-expanded=true]) .panel-knobs>div>span{display:block}.deck:has(#options-toggle[aria-expanded=true]) .panel-buttons #input-modifier:before{left:14px;top:14px;width:4px;height:4px}.deck:has(#options-toggle[aria-expanded=true]) .panel-buttons #play svg{left:10px;top:10px;width:11px;height:11px}.deck:has(#options-toggle[aria-expanded=true]) .panel-knobs #volume-knob span:before{left:13px;width:7px;height:35px}.deck:has(#options-toggle[aria-expanded=true]) .panel-knobs #dial-pointer:before,.deck:has(#options-toggle[aria-expanded=true]) .panel-knobs #dial-pointer:after{left:14px;width:3px;height:3px}.deck:has(#options-toggle[aria-expanded=true]) .panel-knobs #dial-pointer:before{top:4px}.deck:has(#options-toggle[aria-expanded=true]) .panel-knobs #dial-pointer:after{bottom:4px}.deck:has(#options-toggle[aria-expanded=true]) .player-caption{padding:12px 1px;justify-content:space-between}.deck:has(#options-toggle[aria-expanded=true]) .player-caption>div:first-child{display:block}.deck:has(#options-toggle[aria-expanded=true]) .visual-window{display:block;height:171px}.deck:has(#options-toggle[aria-expanded=true]) #player-status:not(:empty){display:block}.deck:has(#options-toggle[aria-expanded=true]) .timeline-wrap{display:flex}}

/* Touch gets one clear play target, then full-sized controls in the drawer. */
@media(max-width:650px){
 .deck .ob4-panel{height:64px}.deck .panel-buttons{left:10px;bottom:8px}.deck .panel-buttons>div:first-child,.deck .panel-knobs{display:none}.deck .panel-buttons>div:last-child button{width:36px;height:36px}.deck .panel-buttons #play svg{width:12px;height:12px;left:11px;top:11px}.deck .panel-readout{left:56px;right:10px;top:26px;flex-wrap:wrap;gap:4px}.deck .panel-readout #rate-label{display:none}.deck .player-caption button{min-height:32px;min-width:32px}.deck .player-caption #options-toggle{width:32px}
 .deck:has(#options-toggle[aria-expanded=true]){background:#101010;box-shadow:0 16px 32px #000b;padding-bottom:12px;max-height:calc(100dvh - 110px);overflow-y:auto}
 .deck:has(#options-toggle[aria-expanded=true]) .panel-buttons>div:first-child{display:block}.deck:has(#options-toggle[aria-expanded=true]) .panel-knobs{display:flex}.deck:has(#options-toggle[aria-expanded=true]) .panel-readout{top:16px;left:55px;right:35px;flex-wrap:nowrap}.deck:has(#options-toggle[aria-expanded=true]) .panel-readout #rate-label{display:inline}.deck:has(#options-toggle[aria-expanded=true]) .panel-buttons button,.deck:has(#options-toggle[aria-expanded=true]) .panel-knobs #dial,.deck:has(#options-toggle[aria-expanded=true]) .panel-knobs #volume-knob{width:44px;height:44px}.deck:has(#options-toggle[aria-expanded=true]) .panel-buttons #play svg{left:15px;top:15px;width:12px;height:12px}.deck:has(#options-toggle[aria-expanded=true]) .panel-buttons #input-modifier:before{left:19px;top:19px}.deck:has(#options-toggle[aria-expanded=true]) .panel-knobs #volume-knob span:before{left:18px;height:46px}.deck:has(#options-toggle[aria-expanded=true]) .panel-knobs #dial-pointer:before,.deck:has(#options-toggle[aria-expanded=true]) .panel-knobs #dial-pointer:after{left:19px}.deck:has(#options-toggle[aria-expanded=true]) .hardware-button{min-height:38px}.deck:has(#options-toggle[aria-expanded=true]) #player-status{padding:0 12px}
}