:root{color-scheme:dark;font-family:system-ui,-apple-system,sans-serif;background:#10131c;color:#edf3fa}*{box-sizing:border-box}body{margin:0}main{max-width:1160px;margin:auto;padding:24px 22px 40px}button,select{font:inherit;color:inherit;border:1px solid #ffffff26;border-radius:12px;background:#242b3b;padding:12px 16px}button{cursor:pointer;touch-action:manipulation}button:focus-visible,[tabindex]:focus-visible{outline:3px solid #d2b4ff;outline-offset:3px}button[aria-pressed=true]{background:#76efcd;color:#103b30}button:disabled{opacity:.4;cursor:default}a{color:#76efcd;text-decoration:none}header,.title,.panel-head,.toolbar,.recorder,footer{display:flex;align-items:center;justify-content:space-between;gap:16px}header>a{font-size:12px;font-weight:800;letter-spacing:2px}header button{font-size:12px;color:#76efcd;background:transparent}h1{margin:0;font-size:clamp(28px,5vw,52px);letter-spacing:-1.5px}h1 span{color:#76efcd}.eyebrow{font-size:10px;color:#9db0c3;letter-spacing:3px;margin:24px 0 8px}.intro{color:#a8b6c9;margin:12px 0 24px}.help{color:#9ba9bd;font-size:12px;line-height:1.7}.stop{color:#ffbdc4;border-color:#ff9da654;background:#ff80900b;white-space:nowrap}.toolbar{background:#181e2a;padding:14px 18px;border:1px solid #ffffff12;border-radius:16px}.toolbar label{display:flex;align-items:center;gap:12px;font-size:12px}.toolbar select{max-width:280px}.volume{flex:1;justify-content:flex-end}input{accent-color:#76efcd}input[type=range]{max-width:210px;min-width:80px;width:100%}.panels{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:20px}.panel{background:#181e2a;border:1px solid #ffffff16;border-radius:22px;padding:20px}.panel h2{font-size:14px;letter-spacing:1px;margin:0}.panel-head{margin-bottom:16px}.panel-head button{font-size:12px;padding:10px 12px}.pad{position:relative;isolation:isolate;aspect-ratio:1.13;min-height:250px;border:1px solid #76efcd55;border-radius:18px;background:radial-gradient(ellipse at 65% 25%,#2b68504d,transparent 60%),linear-gradient(135deg,#14262d,#101824);touch-action:none;user-select:none;overflow:hidden}.arp-pad{border-color:#c2a1f355;background:radial-gradient(ellipse at 65% 25%,#684d9b55,transparent 60%),linear-gradient(135deg,#211a32,#131927)}.pad-lines{position:absolute;inset:0;background-image:linear-gradient(#ffffff06 1px,transparent 1px),linear-gradient(90deg,#ffffff06 1px,transparent 1px);background-size:25% 25%;pointer-events:none}.corner{position:absolute;z-index:3;font-size:10px;letter-spacing:1.5px;font-weight:700;padding:13px 10px;background:transparent;border:0;color:#9cdacb}.arp-pad .corner{color:#cbb4ec;pointer-events:none}.tl{left:6px;top:6px}.tr{right:6px;top:6px}.bl{left:6px;bottom:6px}.br{right:6px;bottom:6px}.crosshair{position:absolute;inset:0;background:linear-gradient(transparent calc(50% - .5px),#ffffff12 50%,transparent calc(50% + .5px)),linear-gradient(90deg,transparent calc(50% - .5px),#ffffff12 50%,transparent calc(50% + .5px));pointer-events:none}.pad-caption{position:absolute;inset:30% 12%;display:flex;flex-direction:column;justify-content:center;text-align:center;gap:16px;pointer-events:none}.pad-caption strong{color:#dcfff4;font-size:clamp(13px,2vw,21px);letter-spacing:2px}.pad-caption span{font-size:11px;line-height:2;color:#9ba9bd}.dot{position:absolute;left:50%;top:50%;width:16px;height:16px;background:#76efcd;border:4px solid #c5ffec;border-radius:50%;box-shadow:0 0 32px #76efcd99;transform:translate(-50%,-50%);pointer-events:none;opacity:.35}.arp-pad .dot{background:#bda0f1;border-color:#e0d0ff;box-shadow:0 0 32px #bda0f199}.pad.playing .dot{opacity:1}.ghost{background:transparent;color:#9ba9bd;font-size:11px;padding:8px 12px}.drums{margin-top:18px}.drum-pads{display:grid;grid-template-columns:repeat(8,1fr);gap:10px}.drum-pads button{min-height:76px;padding:8px 3px;font-size:11px;background:#252b3b}.drum-pads button:active,.drum-pads button.hit{background:#c5aff1;color:#211634}.recorder{margin-top:18px}.recorder button{background:#76efcd;color:#103b30;font-weight:700;white-space:nowrap}footer{margin-top:28px;color:#8190a5;font-size:11px}footer span{letter-spacing:2px}@media(max-width:700px){main{padding:16px 14px 28px}.toolbar{flex-direction:column;align-items:stretch;gap:14px}.toolbar label{justify-content:space-between}.toolbar select{max-width:75%;min-width:0}.volume input{max-width:70%}.panels{grid-template-columns:1fr;gap:14px}.panel{padding:15px;border-radius:18px}.pad{aspect-ratio:1.12;min-height:260px}.drum-pads{grid-template-columns:repeat(4,1fr);gap:8px}.drum-pads button{min-height:66px}.recorder{align-items:flex-start;flex-direction:column;gap:6px}.recorder button{width:100%}footer{align-items:flex-start;flex-direction:column;gap:14px}header{gap:8px}header>a{font-size:9px;letter-spacing:1px}header button{padding:10px;font-size:10px}.title .stop{font-size:12px;padding:12px}.pad-caption strong{font-size:18px}}

@media(orientation:landscape) and (max-height:650px){main{max-width:none;padding:8px 14px 16px}header{height:28px}header button{padding:6px 10px}#updateStatus,.eyebrow,.intro,footer,.panels .help{display:none}.title{float:left;gap:12px;margin:7px 14px 4px 0}.title h1{font-size:22px;letter-spacing:-.6px}.title .stop{padding:7px 10px;font-size:11px}.toolbar{border:0;padding:6px 0;background:transparent;flex-direction:row;gap:12px}.toolbar label{gap:8px;font-size:10px}.toolbar select{max-width:230px;padding:6px 8px;font-size:11px}.toolbar .volume{max-width:190px}.toolbar input{max-width:110px}#notice{clear:both;margin:0;line-height:1.4;font-size:10px;min-height:14px}.panels{grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}.panels .panel{padding:10px;border-radius:14px}.panel-head{margin-bottom:8px}.panel h2{font-size:11px}.panel-head button{padding:5px 10px;font-size:10px}.pad{aspect-ratio:auto;min-height:150px;height:calc(100dvh - 164px);border-radius:12px}.pad-caption{inset:25% 15%;gap:7px}.pad-caption strong{font-size:14px}.pad-caption span{font-size:10px;line-height:1.5}.corner{padding:9px;font-size:9px}.ghost{padding:5px 8px;font-size:10px;margin-top:5px}.drums{margin-top:8px;padding:10px}.drums .panel-head{display:none}.drum-pads{grid-template-columns:repeat(8,1fr);gap:7px}.drum-pads button{min-height:34px;font-size:10px;padding:6px}.recorder{flex-direction:row;align-items:center;padding:10px;margin-top:8px}.recorder button{width:auto;padding:8px 12px;font-size:11px}.recorder .help{margin:5px 0 0}}

@media(orientation:landscape) and (max-height:650px){main{position:relative}.title{display:contents;float:none}.title>div{display:none}.title .stop{position:absolute;right:14px;top:8px}header button{margin-right:88px}.toolbar{width:100%;justify-content:space-between}.toolbar .volume{max-width:220px}.toolbar select{max-width:260px}}@media(orientation:landscape) and (min-height:651px){.eyebrow,.intro{display:none}.title{margin:20px 0 14px}h1{font-size:34px}.panels{margin-top:12px}.panels .pad{aspect-ratio:auto;height:min(48dvh,410px);min-height:260px}.panels .panel{padding:16px}.panel-head{margin-bottom:12px}.panels .help{margin:10px 0}.drums{padding:16px}.drum-pads button{min-height:60px}}

[hidden]{display:none!important}.media-strip{margin-top:12px;padding:10px 14px;background:#181e2a;border:1px solid #ffffff16;border-radius:14px;display:flex;align-items:center;flex-wrap:wrap;gap:8px}.media-strip button{font-size:11px;padding:8px 10px}.media-strip>span{font-size:12px;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.media-strip .help{margin:0;flex-basis:100%;font-size:10px}#sourceControls{display:flex;align-items:center;flex-wrap:wrap;gap:10px;width:100%;font-size:11px}#sourceControls label{display:flex;align-items:center;gap:4px;white-space:nowrap}#sourceTempo{width:60px;background:#242b3b;color:inherit;border:1px solid #ffffff26;border-radius:6px;padding:5px}#sourceSeek{flex:1;max-width:none}#sourceVolume{width:80px}#sourceTime{font-variant-numeric:tabular-nums}@media(orientation:landscape) and (max-height:650px){.media-strip{padding:5px 8px;margin-top:4px;gap:5px}.media-strip button{padding:4px 8px}.media-strip .help{display:none}#sourceControls{gap:7px;flex-wrap:nowrap}#sourceVolume{width:60px;min-width:45px}#sourceSeek{min-width:60px}.pad{height:calc(100dvh - 220px)}body.has-source .pad{height:calc(100dvh - 250px)}}

.app-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.app-actions #installApp{color:#10131c;background:#76efcd;white-space:nowrap}.install-help{background:#181e2a;border:1px solid #76efcd44;padding:10px 14px;border-radius:12px}.app-actions button{margin-right:0}@media(orientation:landscape) and (max-height:650px){header .app-actions{margin-right:88px;gap:6px}header .app-actions button{margin-right:0;font-size:10px;padding:5px 8px}.install-help{margin:6px 0;font-size:11px}}@media(max-width:450px){header .app-actions{gap:5px}header .app-actions button{font-size:9px;padding:8px 6px}header>a{max-width:100px;line-height:1.5}}

.edge-spectrum{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}.arp-pad .pad-caption{z-index:2}.arp-pad .dot{z-index:2}

.pad .pad-caption,.pad .dot{z-index:2}

main{max-width:1420px}.panels{grid-template-columns:minmax(0,1fr) minmax(190px,.76fr) minmax(0,1fr)}.panels>.panel{min-width:0}.video-panel{display:flex;flex-direction:column}.video-stage{position:relative;isolation:isolate;background:#070b11;border:1px solid #ffffff18;border-radius:16px;overflow:hidden;height:min(48dvh,410px);min-height:250px}.video-stage video{display:block;width:100%;height:100%;object-fit:contain}.video-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:22px;text-align:center;padding:20px;background:radial-gradient(ellipse at center,#254e5140,transparent 75%)}.video-empty strong{font-size:clamp(16px,2vw,26px);letter-spacing:2px;line-height:1.6;color:#c8f9ed}.video-empty span{font-size:11px;line-height:2;color:#9ba9bd}.video-name{font-size:11px;color:#9ba9bd;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:10px 0}.video-controls{display:flex;gap:8px}.video-controls button{padding:8px 12px;font-size:11px}.video-controls #videoPlay{flex:1;color:#76efcd}.video-panel .panel-head button{white-space:nowrap}.video-panel .help{font-size:10px}.panels .pad-caption{inset:27% 8%;}.panels .pad-caption strong{font-size:clamp(12px,1.5vw,19px)}
@media(orientation:landscape) and (max-height:650px){.panels{grid-template-columns:minmax(0,1fr) minmax(150px,.75fr) minmax(0,1fr);gap:8px}.panels .panel{padding:8px}.video-stage{height:calc(100dvh - 220px);min-height:150px;border-radius:12px}body.has-source .video-stage{height:calc(100dvh - 250px)}.video-name{margin:4px 0;font-size:9px}.video-controls{gap:5px}.video-controls button{font-size:10px;padding:5px 8px}.video-empty{gap:10px;padding:8px}.video-empty strong{font-size:14px}.video-empty span{font-size:9px}.panel h2{font-size:10px}.corner{font-size:8px;letter-spacing:.7px;padding:7px}.pad-caption span{font-size:9px}.pad-caption strong{letter-spacing:1px}}
@media(orientation:portrait){.panels{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}.video-panel{grid-column:1/-1;grid-row:1}.video-stage{height:280px;min-height:0}.panels>.panel{padding:12px}.panels .pad{min-height:250px;aspect-ratio:auto}.panels .corner{font-size:8px;padding:7px;letter-spacing:0}.panels .pad-caption strong{font-size:12px;letter-spacing:1px}.panels .pad-caption span{font-size:9px}.panels .panel-head{gap:5px}.panels .panel-head h2{font-size:10px}.panels .panel-head button{font-size:9px;padding:7px}.video-empty strong{font-size:22px}}

.panels{position:relative;isolation:isolate}.center-spectrum{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none;border-radius:22px}@media(prefers-reduced-motion:reduce){.center-spectrum{opacity:.3}}

.video-actions{display:flex;align-items:center;gap:7px}.video-actions button{font-size:11px;padding:8px 10px}.video-actions #liveView{border-color:#76efcd66;color:#76efcd}.video-actions #liveView[aria-pressed=true]{color:#103b30}
@media(orientation:landscape){.panels{grid-template-columns:minmax(140px,.62fr) minmax(0,1.8fr) minmax(140px,.62fr);gap:12px}.video-stage,.panels .pad{height:min(62dvh,640px);min-height:250px}.panels .panel{padding:12px}.panels .panel-head{gap:6px}.panels .panel-head h2{font-size:11px}.panels .panel-head>button{font-size:10px;padding:8px}.panels .pad-caption strong{font-size:13px;letter-spacing:1px}.panels .pad-caption span{font-size:10px}.panels .corner{font-size:8px;letter-spacing:.5px;padding:8px}.video-empty strong{font-size:clamp(22px,3vw,40px)}}
@media(orientation:landscape) and (max-height:650px){.panels{grid-template-columns:minmax(115px,.56fr) minmax(0,1.8fr) minmax(115px,.56fr);gap:7px}.panels .panel{padding:7px}.video-stage,.panels .pad{height:calc(100dvh - 196px);min-height:140px}body.has-source .video-stage,body.has-source .panels .pad{height:calc(100dvh - 226px)}.video-actions{gap:5px}.video-actions button{font-size:9px;padding:5px 7px}.panels .panel-head h2{font-size:9px}.panels .panel-head>button{font-size:9px;padding:5px}.panels .pad-caption strong{font-size:11px}.panels .pad-caption span{font-size:8px}.video-empty strong{font-size:22px}}
body.live-view main{position:relative;max-width:none;padding:8px 12px 12px}body.live-view header{height:32px;gap:10px}body.live-view header .app-actions{margin-right:88px;gap:6px}body.live-view header button{font-size:10px;padding:6px 8px;margin-right:0}body.live-view .title{display:contents;float:none}body.live-view .title .stop{position:absolute;right:12px;top:8px;padding:7px 10px;font-size:11px}body.live-view .title>div,body.live-view #updateStatus,body.live-view #installStatus,body.live-view .intro,body.live-view .toolbar,body.live-view .media-strip,body.live-view #notice,body.live-view .drums,body.live-view .recorder,body.live-view footer{display:none}body.live-view .panels{margin-top:8px;grid-template-columns:minmax(115px,.55fr) minmax(0,1.9fr) minmax(115px,.55fr);gap:9px}body.live-view .panels>.panel{padding:9px;border-radius:16px}body.live-view .panels .panel-head{margin-bottom:8px;min-height:27px}body.live-view .panels .help,body.live-view .video-name{display:none}body.live-view .video-stage,body.live-view .panels .pad{height:calc(100dvh - 174px);min-height:120px;aspect-ratio:auto}body.live-view .video-controls{margin-top:7px}body.live-view .ghost{margin-top:7px}
@media(orientation:portrait){.video-stage{height:min(60dvh,650px)}body.live-view .panels{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}body.live-view .video-panel{grid-column:1/-1;grid-row:1}body.live-view .video-stage{height:49dvh;min-height:180px}body.live-view .panels .pad{height:25dvh;min-height:155px}body.live-view .panels>.panel{padding:8px}body.live-view .video-actions button{padding:6px 8px;font-size:10px}body.live-view header>a{font-size:9px}body.live-view header .app-actions{margin-right:75px}body.live-view header button{font-size:8px;padding:5px}body.live-view .title .stop{font-size:9px;padding:6px}}

/* Square playing surfaces, landscape center stage, portrait Full HD picture. */
.panels,body.live-view .panels{grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);align-items:start;gap:12px}
.panels .pad,body.has-source .panels .pad,body.live-view .panels .pad{width:100%;height:auto;min-height:0;aspect-ratio:1}
.panels .video-stage,body.has-source .panels .video-stage,body.live-view .panels .video-stage{width:100%;height:auto;min-height:0;aspect-ratio:16/9}
.portrait-frame{position:absolute;inset-block:0;left:50%;height:100%;aspect-ratio:9/16;max-width:100%;transform:translateX(-50%);background:#05070b}
.video-stage .portrait-frame video{width:100%;height:100%;object-fit:contain}
.video-stage{background:radial-gradient(ellipse at center,#203b45,#080d16 75%)}
.panels .video-empty{gap:12px}.panels .video-empty strong{font-size:clamp(14px,2vw,27px)}
.panels .panel-head{flex-wrap:wrap}.video-actions{flex-wrap:wrap}.video-controls{flex-wrap:wrap}.video-controls #syncStart{flex-basis:100%;color:#10131c;background:#76efcd}
.sync-tools{display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap;margin-top:8px;font-size:10px}.sync-tools input{width:65px;min-width:0;background:#242b3b;border:1px solid #ffffff26;border-radius:6px;color:inherit;padding:6px}.sync-tools button{font-size:10px;padding:6px}.side-drums{margin-top:12px}.side-drums>span{font-size:9px;color:#9ba9bd;letter-spacing:1.5px}.side-drums .drum-pads{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:6px}.side-drums .drum-pads button{min-height:44px;font-size:10px}
body.live-view .panels{max-width:1600px;margin-inline:auto}body.live-view .side-drums{display:block}body.live-view .panels .pad{max-width:none}
@media(orientation:landscape) and (max-height:650px){.panels,body.live-view .panels{grid-template-columns:minmax(0,1fr) minmax(0,2.15fr) minmax(0,1fr);gap:7px;max-width:min(100%,calc((100dvh - 135px)*3.6));margin-inline:auto}.panels .panel-head h2{font-size:9px}.panels>.panel{padding:7px}.side-drums{margin-top:5px}.side-drums .drum-pads{grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;margin-top:4px}.side-drums .drum-pads button{min-height:30px;font-size:8px;padding:3px 1px}.side-drums>span{display:none}.video-controls{gap:4px}.video-controls button{padding:4px 6px;font-size:9px}.sync-tools{margin-top:4px;font-size:9px}.sync-tools input{padding:3px}.sync-tools button{padding:3px;font-size:9px}.panels .video-empty span{font-size:9px}.panels .video-empty strong{font-size:15px}body.live-view .panels{max-width:min(100%,calc((100dvh - 92px)*3.25))}body.live-view .panels>.panel{padding:7px}body.live-view .panels .panel-head{min-height:20px;margin-bottom:5px}.panels .corner{padding:5px;font-size:7px;letter-spacing:0}.panels .pad-caption{inset:24% 5%;gap:5px}.panels .pad-caption strong{font-size:10px}.panels .pad-caption span{font-size:8px}body.live-view .ghost{padding:4px;font-size:9px}}
@media(orientation:portrait){.panels,body.live-view .panels{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.video-panel{grid-column:1/-1;grid-row:1}.panels .video-stage,body.live-view .panels .video-stage{aspect-ratio:16/9;min-height:0}.panels .panel-head h2{font-size:9px}.side-drums .drum-pads button{min-height:42px}body.live-view .panels{gap:8px}.video-controls #syncStart{flex-basis:auto;flex:1}.panels .pad-caption span{font-size:8px}}

.video-width-control{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:8px;font-size:11px;color:#b7c6d9}.video-width-control input{flex:1;max-width:180px;min-width:60px}.video-width-control output{min-width:4ch;font-variant-numeric:tabular-nums}@media(orientation:landscape) and (max-height:650px){.video-width-control{margin-top:4px;font-size:9px;gap:5px}.video-width-control input{height:16px}}

.panels .video-stage,body.has-source .panels .video-stage,body.live-view .panels .video-stage{aspect-ratio:16 / calc(9 * var(--video-scale,2))}

.right-mode{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:8px;font-size:10px}.right-mode label{display:flex;align-items:center;gap:5px}.right-mode select{min-width:0;max-width:140px;font-size:11px;padding:6px}.right-mode>span{font-size:9px;font-variant-numeric:tabular-nums;color:#cbb4ec;white-space:nowrap}.beat-meter{display:flex;gap:5px;margin-top:7px}.beat-meter i{height:3px;flex:1;background:#c2a1f322;border-radius:3px}.beat-meter i.lit{background:#d2b4ff;box-shadow:0 0 8px #c2a1f388}.rhythm-choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-top:7px}.rhythm-choices button{font-size:9px;padding:8px 1px;color:#dfcff9;border-color:#c2a1f344}.rhythm-choices button:active{background:#624c85}.arp-pad .pad-caption span{line-height:1.6}@media(orientation:landscape) and (max-height:650px){.right-mode{margin-bottom:5px;flex-wrap:wrap}.right-mode select{padding:3px;font-size:9px;max-width:120px}.rhythm-choices{gap:3px;margin-top:4px}.rhythm-choices button{font-size:8px;padding:5px 0}.beat-meter{margin-top:4px}.right-mode>span{font-size:8px}.panels .arp-pad .pad-caption span{font-size:8px}}

/* Equal top controls and footer rows keep both square PADs aligned. */
.panels .pad-panel>.panel-head,body.live-view .panels .pad-panel>.panel-head{height:36px;min-height:36px;flex-wrap:nowrap;margin-bottom:8px}.pad-panel>.right-mode{height:32px;min-height:32px;flex-wrap:nowrap;margin-bottom:8px}.right-mode label{min-width:0}.right-mode select{max-width:100%;width:100%;padding-inline:4px}.left-mode{color:#9ba9bd;letter-spacing:1px}.pad-controls{min-height:166px}.pad-controls .ghost{margin-top:7px}.pad-panel>.side-drums{margin-top:12px}body.live-view .pad-controls{height:56px;min-height:56px}body.live-view .pad-panel>.side-drums{margin-top:10px}.video-speed-tools{margin-top:9px;padding:8px;border:1px solid #76efcd26;border-radius:10px;font-size:10px}.video-speed-tools>label,.video-tempo,.video-tempo label{display:flex;align-items:center;gap:7px}.video-speed-tools>label{justify-content:center}.video-speed-tools input[type=range]{flex:1;max-width:180px}.video-speed-tools output{min-width:5ch;font-variant-numeric:tabular-nums;color:#76efcd}.video-tempo{justify-content:center;flex-wrap:wrap;margin-top:7px}.video-tempo input[type=number]{width:58px;background:#242b3b;border:1px solid #ffffff26;color:inherit;border-radius:6px;padding:4px}.speed-status{font-size:9px;color:#9ba9bd;line-height:1.5;text-align:center;margin:5px 0 0}#videoTempoTarget{color:#b7c6d9;white-space:nowrap}
@media(orientation:landscape) and (max-height:650px){.panels .pad-panel>.panel-head,body.live-view .panels .pad-panel>.panel-head{height:28px;min-height:28px;margin-bottom:5px}.pad-panel>.right-mode{height:25px;min-height:25px;margin-bottom:5px}.right-mode label{flex:1;font-size:0}.right-mode label select{font-size:9px}.pad-controls,body.live-view .pad-controls{height:45px;min-height:45px}.pad-controls .ghost{margin-top:7px}.pad-panel>.side-drums,body.live-view .pad-panel>.side-drums{margin-top:5px}.video-speed-tools{padding:5px;margin-top:5px;font-size:9px}.video-tempo{gap:5px;margin-top:4px}.video-tempo label{gap:4px}.video-tempo input[type=number]{padding:2px;width:48px}.speed-status{font-size:8px;margin-top:4px}}
/* Keep control margins inside their equal-height rows. */
.pad-controls{display:flow-root}

/* Size controls stay above the resizing stage. */
.video-width-control{display:block;flex:none;margin:0 0 8px;color:#b7c6d9}.video-size-row{display:flex;align-items:center;gap:6px}.video-size-row label{white-space:nowrap}.video-size-row input[type=range]{flex:1;min-width:40px;max-width:none;height:44px;touch-action:pan-y;cursor:pointer}.video-size-row button{width:44px;min-width:44px;height:44px;padding:0;font-size:20px;touch-action:manipulation}.video-size-row output{min-width:5ch;text-align:right}.video-size-presets{display:flex;justify-content:flex-end;gap:6px}.video-size-presets button{min-height:36px;min-width:58px;padding:4px 10px;font-size:11px}.video-panel>.video-stage{flex-shrink:0}@media(orientation:landscape) and (max-height:650px){.video-width-control{margin:0 0 5px;font-size:9px}.video-size-row{gap:4px}.video-size-presets{gap:4px}.video-size-presets button{min-height:30px;min-width:48px;padding:3px 8px;font-size:9px}}

.video-size-presets{flex-wrap:wrap}.video-stage .portrait-frame{max-width:none}