:root{color-scheme:dark;--bg:#090c10;--panel:#12171d;--line:#293139;--text:#eaf0f4;--muted:#929ba7;--a:#59e6c5;--b:#a491ff}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif;font-size:16px}button,input,select{font:inherit}button{color:inherit;cursor:pointer;border:1px solid var(--line);background:#1a2027;border-radius:7px;min-height:36px;padding:8px 13px;transition:background .18s,border-color .18s}button:hover{background:#29323b;border-color:#596570}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--a);outline-offset:4px}button.active{border-color:var(--a);background:#16342f;color:var(--a)}header{height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #20262d;gap:15px}.identity{display:flex;gap:14px;align-items:center}.logo{width:35px;height:35px;border:2px solid var(--a);border-radius:50%;display:grid;place-items:center}.logo:after{content:'';width:9px;height:9px;border:2px solid var(--a);border-radius:50%}h1{font-size:19px;letter-spacing:.08em;margin:0;font-weight:600}.caption{font-size:12px;color:var(--muted);letter-spacing:.16em;margin-top:5px}.header-actions{display:flex;gap:10px;align-items:center}.sound-state{font-size:13px;color:var(--muted);margin-right:8px}.stage{position:relative;height:min(55vw,550px);min-height:350px;overflow:hidden;background:radial-gradient(ellipse at 50% 85%,#1b2832 0, #10151c 38%,#090c10 75%)}#scene{width:100%;height:100%;display:block;touch-action:none;cursor:grab}.stage-top{position:absolute;top:22px;left:36px;right:36px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.stage-top>*{pointer-events:auto}.live-label{font-size:12px;letter-spacing:.14em;color:#8996a4}.view-controls{display:flex;gap:4px;background:#11171de6;border:1px solid #2a343d;padding:4px;border-radius:8px}.view-controls button{font-size:13px;border:0;background:transparent;min-height:30px;padding:6px 10px}.view-controls button.selected{background:#2a343e;color:white}.stage-bottom{position:absolute;bottom:17px;width:100%;display:flex;justify-content:center;gap:22px;color:#82909e;font-size:12px;pointer-events:none;letter-spacing:.03em}.stage-bottom span{background:#0a1017aa;padding:6px 10px;border-radius:4px}.session{padding:0 30px 24px;max-width:1600px;margin:auto}.session-title{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:18px 2px 15px}.session-title h2{font-size:15px;font-weight:500;margin:0}.session-title span{font-size:12px;color:var(--muted)}.console{display:grid;grid-template-columns:minmax(0,1fr) 230px minmax(0,1fr);gap:15px}.deck-panel,.mixer{background:linear-gradient(140deg,#171d24,#10151b);border:1px solid var(--line);border-radius:11px;padding:19px;min-width:0}.deck-panel[data-deck="1"]{--accent:var(--b)}.deck-panel[data-deck="0"]{--accent:var(--a)}.track-top{display:flex;align-items:center;gap:12px}.deck-letter{font-size:17px;font-weight:600;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);width:36px;height:36px;display:grid;place-items:center;border-radius:6px;background:color-mix(in srgb,var(--accent) 9%,transparent)}.track-info{flex:1;min-width:0}.track-name{font-size:16px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-sub{font-size:12px;color:var(--muted);margin-top:5px}.load-btn{font-size:13px;padding:6px 10px;min-height:34px}.readout{display:flex;align-items:baseline;justify-content:space-between;margin-top:19px;font-variant-numeric:tabular-nums}.bpm{font-size:28px;font-weight:500;letter-spacing:-.06em}.bpm small{font-size:11px;color:var(--muted);letter-spacing:.06em;margin-left:8px}.time{font:15px ui-monospace,monospace;color:#a8b5c1}.wave{width:100%;height:55px;display:block;cursor:crosshair;margin:10px 0 15px;background:#0c1116;border-radius:4px;touch-action:none}.transport{display:flex;gap:7px;align-items:center}.transport button{font-size:12px;font-weight:600}.transport .play{background:var(--accent);color:#11171c;min-width:72px;border:0;font-size:15px}.transport .play.on{box-shadow:0 0 18px color-mix(in srgb,var(--accent) 20%,transparent)}.transport .loop.on,.transport .sync.on{border-color:var(--accent);color:var(--accent)}.transport select{background:#1a2027;border:1px solid var(--line);border-radius:6px;padding:7px 4px;font-size:12px;height:36px;max-width:70px}.hotcues{display:flex;gap:7px;margin-top:13px}.hotcues button{flex:1;font-size:12px;min-height:31px;padding:6px;color:var(--accent);border-color:color-mix(in srgb,var(--accent) 20%,#202830);background:color-mix(in srgb,var(--accent) 6%,#131a20)}.slider-row{display:flex;align-items:center;gap:12px;font-size:12px;margin-top:17px;color:#aeb8c2}.slider-row label{min-width:48px}.slider-row output{min-width:47px;text-align:right;font:12px ui-monospace,monospace;color:var(--text)}input[type=range]{width:100%;min-width:0;accent-color:var(--accent,var(--a));cursor:pointer;height:18px;margin:0;touch-action:pan-y}.eq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:19px;padding-top:15px;border-top:1px solid #29313a}.eq-item label{font-size:11px;letter-spacing:.08em;color:var(--muted);display:flex;justify-content:space-between;margin-bottom:7px}.eq-item output{color:#bdc6cf;letter-spacing:0}.mixer{padding:20px 17px;--accent:#9aa8b8}.mixer h3{font-size:12px;letter-spacing:.15em;color:#c3ced8;text-align:center;margin:0 0 16px;font-weight:500}.meters{display:flex;align-items:center;justify-content:center;gap:7px;height:65px;margin:10px auto 17px}.meter{width:9px;height:65px;background:repeating-linear-gradient(to top,#172d26 0 4px,transparent 4px 6px);position:relative}.meter-fill{position:absolute;bottom:0;left:0;width:100%;height:0;background:repeating-linear-gradient(to top,#71d6ac 0 4px,transparent 4px 6px);transition:height .07s}.meter-scale{font:10px ui-monospace,monospace;color:#73808c;line-height:20px}.mixer .slider-row{display:block;margin:15px 0}.mixer .slider-row label{display:flex;justify-content:space-between;margin-bottom:9px;font-size:12px}.cross-labels{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;margin-bottom:8px}.cross-labels span:first-child{color:var(--a)}.cross-labels span:last-child{color:var(--b)}.cross-section{padding-top:17px;border-top:1px solid var(--line);margin-top:17px}.cross-title{text-align:center;font-size:11px;letter-spacing:.12em;color:var(--muted);margin:10px 0}.reset{width:100%;font-size:12px;margin-top:15px}.volume-pair{display:grid;grid-template-columns:1fr 1fr;gap:15px}.footer{display:flex;justify-content:space-between;gap:20px;color:#717e8a;font-size:12px;margin:18px 3px 0}.footer button{background:none;border:0;padding:0;min-height:20px;font-size:12px;color:#a1adb9}.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);padding:13px 20px;max-width:90vw;background:#23333a;border:1px solid #46605d;border-radius:8px;box-shadow:0 12px 40px #0008;font-size:14px;z-index:20;opacity:0;pointer-events:none;transition:opacity .2s}.toast.show{opacity:1}dialog{background:#151c24;color:#eaf0f4;border:1px solid #3b4855;border-radius:14px;padding:28px;max-width:520px;width:calc(100vw - 40px);line-height:1.65}dialog::backdrop{background:#000b}dialog h2{margin-top:0;font-size:22px}dialog p,dialog li{font-size:14px;color:#b9c4ce}dialog li{margin-bottom:10px}dialog .close{float:right}kbd{background:#2c3743;border-radius:4px;padding:3px 6px;font:12px monospace}#fallback{position:absolute;inset:110px 30px;text-align:center;color:#adbac6;display:none}.bpm-edit{width:55px;border:1px solid #394551;background:#111a22;color:#d7e5eb;border-radius:4px;font-size:12px;padding:3px}.sr-only{position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden}
@media(min-width:1600px){.stage{height:600px}}@media(max-width:1000px){.console{grid-template-columns:minmax(0,1fr) 180px minmax(0,1fr);gap:10px}.session{padding:0 16px 20px}.deck-panel{padding:14px}.transport{flex-wrap:wrap;gap:5px}.transport button{flex:1}.track-top{gap:8px}.load-btn{font-size:0}.load-btn::after{content:'＋';font-size:19px}.eq-grid{gap:7px}.mixer{padding:16px 12px}}@media(max-width:700px), (pointer:coarse) and (max-width:1100px){header{padding:0 18px;height:74px}h1{font-size:16px}.caption{font-size:10px}.sound-state{display:none}.header-actions{gap:6px}.header-actions button{font-size:12px;padding:7px 10px}.stage{height:370px;min-height:0}.stage-top{left:17px;right:17px;top:17px}.live-label{font-size:10px}.view-controls button{font-size:11px;padding:6px 8px}.stage-bottom{font-size:10px;gap:5px;bottom:12px}.console{grid-template-columns:1fr 1fr;gap:10px}.mixer{grid-row:2;grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:10px 25px}.mixer h3{grid-column:1/-1;margin:0}.meters{display:none}.mixer .slider-row{margin:4px 0}.cross-section{margin:0;padding:0;border:0}.reset{margin:0}.volume-pair{grid-column:1/-1}.deck-panel{padding:12px}.deck-letter{width:28px;height:28px;font-size:14px}.track-name{font-size:13px}.track-sub{font-size:10px}.track-top{flex-wrap:wrap}.load-btn{margin-left:auto}.bpm{font-size:25px}.bpm small{font-size:9px;margin-left:3px}.time{font-size:11px}.transport .play{min-width:50px}.transport button{padding:7px 8px;font-size:10px}.hotcues{gap:4px}.hotcues button{font-size:10px;padding:4px}.slider-row{gap:6px;font-size:11px}.slider-row label{min-width:34px}.slider-row output{min-width:35px;font-size:10px}.eq-grid{grid-template-columns:1fr;gap:9px}.eq-item{display:flex;align-items:center;gap:8px}.eq-item label{min-width:68px;margin:0;font-size:10px}.session-title span{font-size:10px}.footer{font-size:10px;line-height:1.5}.footer button{font-size:11px}.session-title{padding-top:14px}}
/* Performance workspace: stable views and generous touch targets. */
#scene{cursor:default;touch-action:none}.focus-bar{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-bottom:1px solid var(--line);background:#10161c;position:sticky;top:0;z-index:5}.focus-bar button{min-height:44px;font-size:14px;padding:10px 18px}.focus-bar button[aria-pressed=true]{border-color:var(--a);background:#16332e;color:var(--a)}.focus-bar span{font-size:12px;color:var(--muted);margin-left:20px}.stage{height:580px;min-height:460px;padding-bottom:104px}.stage-top{top:18px;align-items:start}.stage-top button{font-size:12px;min-height:36px;background:#141d25d9}.stage-top .live-label{padding-top:10px}#control-hint{position:absolute;bottom:34px;left:20px;right:20px;text-align:center;font-size:14px;color:#a8b7c3;pointer-events:none}#control-dock{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);width:min(620px,calc(100% - 30px));padding:12px 16px;background:#17232bf5;border:1px solid #43615e;border-radius:10px;box-shadow:0 12px 30px #0006}#control-dock[hidden]{display:none}.dock-head{display:flex;align-items:center;gap:12px;margin-bottom:8px;font-size:14px}.dock-head label{flex:1}.dock-head output{color:var(--a);font:16px monospace;font-variant-numeric:tabular-nums}.dock-head button{min-height:30px;padding:2px 9px;font-size:20px;border:0;background:transparent}.dock-range{display:flex;gap:12px;align-items:center}.dock-range button{min-width:44px;min-height:44px;font-size:18px}.dock-range #fine-zero{font-size:12px}.dock-range input{height:32px;accent-color:var(--a)}.deck-panel{padding:20px}.console{grid-template-columns:minmax(0,1fr) 230px minmax(0,1fr)}.transport{flex-wrap:wrap}.transport button,.transport select{min-height:46px;font-size:13px}.transport .play{font-size:20px;min-width:70px}.pad-heading{display:flex;align-items:center;justify-content:space-between;margin:18px 0 9px;font-size:12px;color:#abb8c5;letter-spacing:.05em}.pad-heading select,.jump-tools select,.tempo-tools select{background:#1a252e;border:1px solid #35434d;color:#d4dfe7;border-radius:5px;padding:8px;font-size:14px;min-height:40px}.hotcues{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:0}.hotcues button{min-height:46px;font-size:14px;border-bottom:3px solid color-mix(in srgb,var(--accent) 40%,transparent)}.hotcues button.held{background:var(--accent);color:#10191d;transform:translateY(2px);box-shadow:0 0 20px color-mix(in srgb,var(--accent) 25%,transparent)}.mode-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:15px}.mode-row button{min-height:44px;font-size:11px;padding:8px 5px}.mode-row button.on,.loop-tools button.on,.transport button.held{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 15%,#101920)}.loop-tools,.jump-tools{display:flex;align-items:center;gap:6px;margin-top:13px;flex-wrap:wrap}.loop-tools>span,.jump-tools>span{font-size:11px;letter-spacing:.03em;color:var(--muted);min-width:65px}.loop-tools button,.jump-tools button{min-height:44px;min-width:40px;font-size:12px;padding:8px}.jump-tools button{font-size:20px}.tempo-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px}.tempo-tools label{font-size:12px;color:var(--muted)}.tempo-tools button{font-size:11px;min-height:44px;padding:8px}.tempo-tools button.held{background:#305045;color:var(--a)}.slider-row{font-size:14px;margin-top:18px;gap:10px;flex-wrap:wrap}.slider-row label{font-size:13px;min-width:55px}.slider-row output{font-size:13px;min-width:60px}.slider-row input{flex:1;min-width:65px;height:28px}.eq-grid{gap:8px}.eq-grid .slider-row{display:block;margin:0}.eq-grid .slider-row label{display:block;font-size:12px;margin-bottom:4px}.eq-grid .slider-row input{width:100%}.eq-grid .slider-row output{display:block;font-size:12px;text-align:center}.mixer .slider-row label{font-size:13px}.mixer .slider-row output{display:block;margin-top:4px}.mixer .slider-row input{width:100%}.mixer-note{font-size:13px;color:#91a3b1;line-height:1.6;margin-top:20px}.track-sub button{font-size:11px;min-height:34px;padding:5px}.bpm-edit{font-size:16px;width:65px;min-height:34px}.footer{font-size:12px}.footer button{min-height:44px}.load-btn{min-height:44px}button:active{filter:brightness(1.25)}input[type=range]{min-height:32px}
@media(max-width:1100px){.console{grid-template-columns:minmax(0,1fr) 180px minmax(0,1fr)}.deck-panel{padding:14px}.loop-tools>span,.jump-tools>span{width:100%}.loop-tools button{flex:1}.stage{height:540px}.mode-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px), (pointer:coarse) and (max-width:1100px){header{height:72px;padding:0 14px}.focus-bar{gap:5px;padding:8px 10px;justify-content:space-between;flex-wrap:wrap}.focus-bar button{flex:1;min-width:65px;padding:8px 6px;font-size:12px;min-height:44px}.focus-bar span{display:none}.focus-bar #view-top{flex:0 0 100%;min-height:32px;font-size:11px;background:none;border:0;padding:2px}.stage{height:540px;min-height:0;padding-bottom:120px}.stage-top{left:13px;right:13px;top:10px}.stage-top .live-label{font-size:10px;max-width:180px;line-height:1.6}.stage-top button{font-size:10px;padding:5px;min-height:32px}#control-hint{font-size:12px;bottom:30px;line-height:1.6}#control-dock{padding:10px 12px;bottom:10px}.dock-head{font-size:13px}.dock-range{gap:8px}.dock-range button{min-width:42px}.session{padding:0 12px 20px}.session-title{gap:10px;align-items:baseline}.session-title h2{font-size:14px}.session-title span{font-size:11px;text-align:right}.console{display:flex;flex-direction:column;gap:14px}.deck-panel{padding:18px}.track-name{font-size:17px}.track-sub{font-size:12px}.load-btn{font-size:12px}.load-btn::after{content:none}.deck-letter{width:36px;height:36px;font-size:18px}.readout{margin-top:16px}.bpm{font-size:29px}.bpm small{font-size:11px;margin-left:7px}.time{font-size:14px}.wave{height:68px}.transport{gap:7px}.transport button{font-size:13px;flex:1}.transport select{max-width:96px;font-size:12px}.hotcues button{min-height:52px;font-size:16px}.mode-row{grid-template-columns:repeat(3,1fr);gap:7px}.mode-row button{font-size:12px;min-height:46px}.loop-tools>span,.jump-tools>span{width:auto}.loop-tools button{font-size:12px}.eq-grid{grid-template-columns:repeat(3,1fr);gap:12px}.slider-row label{min-width:62px;font-size:14px}.slider-row input{height:34px}.slider-row output{font-size:13px}.slider-row:has(input[data-control=jogFeel]) label{flex-basis:100%}.eq-grid .slider-row label{font-size:12px}.eq-grid .slider-row output{font-size:13px}.mixer{display:block;padding:20px}.mixer h3{margin-bottom:16px}.mixer .meters{display:flex}.mixer .slider-row{margin:17px 0}.mixer .slider-row label{font-size:15px}.mixer .slider-row output{font-size:14px}.cross-section{padding-top:16px;border-top:1px solid var(--line)}.reset{margin-top:18px;min-height:44px}.footer{font-size:11px;align-items:center}.footer button{font-size:12px}body[data-focus=a] .deck-panel[data-deck="1"],body[data-focus=a] .mixer,body[data-focus=b] .deck-panel[data-deck="0"],body[data-focus=b] .mixer,body[data-focus=mixer] .deck-panel{display:none}.mixer-note{font-size:14px}}
@media(max-width:380px){.deck-panel{padding:12px}.transport select{max-width:78px}.transport button{padding:7px}.mode-row button{font-size:10px}.loop-tools>span{width:100%}.stage{height:510px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* Hardware view: reserve space for legends and precision controls. */
.stage{height:710px;padding-top:50px;padding-bottom:100px;background:radial-gradient(ellipse at 50% 70%,#252a30 0,#12161b 48%,#0b0e12 85%)}
.stage-top{top:14px}.live-label{color:#c1c7ce}#control-hint{color:#d7dfe5;font-size:14px;bottom:33px;line-height:1.6}
@media(min-width:1500px){.stage{height:790px}}
@media(max-width:700px), (pointer:coarse) and (max-width:1100px){.stage{height:650px;padding-top:52px;padding-bottom:110px}.stage-top .live-label{max-width:185px}#control-hint{font-size:12px;bottom:28px}}
/* Mobile chrome scrolls away; an optional compact view gives the deck the screen. */
.mobile-toolbar{display:none}
@media(max-width:700px), (pointer:coarse) and (max-width:1100px){
 .focus-bar{position:static}
 .mobile-toolbar{display:flex;position:sticky;top:0;z-index:6;justify-content:flex-end;background:#10161cf5;border-bottom:1px solid var(--line);padding:0 12px}
 #toggle-chrome{min-height:44px;border:0;background:transparent;color:var(--a);font-size:13px;padding:8px 4px}
 .stage{height:max(280px,min(650px,calc(100svh - var(--mobile-chrome,210px))));min-height:0;padding-top:48px;padding-bottom:96px}
 #control-hint{bottom:22px;font-size:12px;line-height:1.45}
 body.compact-player #dj-header,body.compact-player #dj-navigation,body.compact-player .stage-top{display:none}
 body.compact-player .stage{height:max(240px,calc(100svh - var(--mobile-chrome,44px)));padding-top:10px;padding-bottom:104px}
 .stage{scroll-margin-top:44px}
}
/* Mobile: let the hardware use the viewport, with no empty dock reservation. */
@media(max-width:700px), (pointer:coarse) and (max-width:1100px){
 body.compact-player .stage{height:calc(100dvh - var(--mobile-chrome,44px));min-height:160px;padding:4px 3px 32px}
 body.compact-player #control-hint{bottom:5px;left:10px;right:10px;font-size:10px;line-height:1.2}
 body.compact-player .stage:has(#control-dock:not([hidden])){padding-bottom:120px}
 .mobile-toolbar{justify-content:space-between}
 .mobile-deck-switch{display:flex;align-items:center;gap:5px}
 .mobile-deck-switch button{min-width:40px;min-height:40px;padding:4px 9px;font-size:12px}
 .mobile-deck-switch button[aria-pressed=true]{border-color:var(--a);color:var(--a)}
 #toggle-chrome{font-size:12px}
}
.record-mix{border-color:#9c4c51;color:#ffb4b9;white-space:nowrap;font-variant-numeric:tabular-nums}
.record-mix.recording-active{background:#981f32;color:white;border-color:#f0808f}
#recording-dialog{max-width:580px;max-height:90dvh;overflow:auto}
#recording-dialog h2{font-size:21px;margin-right:80px}
#start-recording{background:#922a3a;border-color:#e17181;min-height:46px}
.recording-take{border-top:1px solid var(--line);padding-top:14px;margin-top:18px}
.recording-take h3{font-size:15px}.recording-take audio{width:100%;display:block;margin:12px 0}
.recording-download{display:block;padding:12px;border:1px solid #4d8b7d;border-radius:7px;color:var(--a);text-decoration:none}
@media(max-width:700px), (pointer:coarse) and (max-width:1100px){
 .mobile-toolbar{gap:4px;align-items:center;padding:0 8px}
 .mobile-deck-switch{gap:3px}.mobile-deck-switch button{min-width:32px;padding:4px 7px}
 #toggle-chrome{font-size:0;min-width:38px;margin-left:auto}
 #toggle-chrome::before{content:'☰';font-size:19px}
 .mobile-toolbar .record-mix{min-width:68px;min-height:40px;padding:6px;font-size:12px}
 #recording-dialog{padding:18px}
}