:root{
  --bg:#08090c; --p1:#1a1d23; --p2:#111318; --edge:#2a2e36; --edge2:#0a0b0d;
  --txt:#d6dae1; --lab:#838b99; --dim:#4d535e;
  --A:#2fd4ff; --B:#ffa22e; --red:#ff3b4e; --grn:#38e07b;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,"Liberation Mono",monospace;
  --sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#000;color:var(--txt);font-family:var(--sans);user-select:none;-webkit-user-select:none;overscroll-behavior:none;touch-action:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0;touch-action:none}
.hide{display:none!important}
#vp{position:fixed;inset:0;overflow:hidden;background:radial-gradient(1200px 700px at 50% 30%,#14161b,#050607)}
#stage{position:absolute;left:0;top:0;width:1600px;height:1000px;transform-origin:0 0;
  background:linear-gradient(180deg,#0f1115,#0a0b0e 60%,#08090b);border-radius:14px;box-shadow:0 0 0 1px #20232a,0 30px 90px #000}

/* header */
#top{position:absolute;left:20px;top:8px;width:1560px;height:44px;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#ffd84a,#ff9d1c);color:#1a1200;font-weight:900;display:grid;place-items:center;font-size:20px;box-shadow:0 0 18px #ffb52f55}
.logo.big{width:64px;height:64px;font-size:38px;border-radius:16px;margin:0 auto 10px}
.bname{font-size:20px;font-weight:700;letter-spacing:.3px;direction:rtl}
.bname b{color:#ffb52f;font-family:var(--mono);letter-spacing:2px}
.stat{font:600 11px var(--mono);color:var(--dim);letter-spacing:1.5px;padding:5px 10px;border:1px solid #20232a;border-radius:6px}
.stat.on{color:var(--grn);border-color:#1d4a2c;text-shadow:0 0 8px #38e07b88}
.topbtns{margin-inline-start:auto;display:flex;gap:10px}
.tb{height:34px;padding:0 14px;border-radius:8px;background:linear-gradient(#22252c,#16181d);border:1px solid #31353e;font:700 11px var(--mono);letter-spacing:1.2px;color:#b7bdc8;display:flex;align-items:center;gap:7px}
.tb:active{transform:translateY(1px);background:#15171c}
.tb .dot{width:10px;height:10px;border-radius:50%;background:#5a2027}
.tb.rec{border-color:#7a1f2b;color:#fff}.tb.rec .dot{background:var(--red);box-shadow:0 0 10px var(--red);animation:blink 1s infinite}
.tb.lit{border-color:#3d6a55;color:#9ff0c4}
@keyframes blink{50%{opacity:.35}}

/* waveforms */
#waves{position:absolute;left:20px;top:60px;width:1560px;height:172px}
.wrow{position:absolute;left:0;width:1560px;height:66px;background:#050607;border:1px solid #1f2229;border-radius:6px;overflow:hidden}
.wrow[data-d=A]{top:0}.wrow[data-d=B]{top:88px}
.wtag{position:absolute;left:0;top:0;z-index:2;width:22px;height:100%;display:grid;place-items:center;font:800 13px var(--mono);color:#000}
.wrow[data-d=A] .wtag{background:var(--A)}.wrow[data-d=B] .wtag{background:var(--B)}
.wv{position:absolute;left:22px;top:0;width:1536px;height:64px;display:block}
.ov{position:absolute;left:22px;width:1536px;height:14px;background:#050607;border:1px solid #1f2229;border-radius:3px;cursor:pointer}
#ovA{top:68px}#ovB{top:156px}

/* deck row */
#deckrow{position:absolute;left:20px;top:244px;width:1560px;height:562px;display:flex;gap:20px}
.deck{position:relative;width:590px;height:562px;border-radius:14px;padding:12px;background:linear-gradient(180deg,var(--p1),var(--p2));border:1px solid var(--edge);box-shadow:inset 0 1px 0 #ffffff0d,0 8px 24px #0009;--c:var(--A)}
#deckB{--c:var(--B)}
.dinfo{display:flex;gap:10px;height:66px}
.lcd{background:#030507;border:1px solid #1b1f26;border-radius:8px;box-shadow:inset 0 0 14px #000;font-family:var(--mono);color:var(--c);padding:6px 10px;display:flex;flex-direction:column;justify-content:center}
.lcd.title{flex:1;min-width:0}
.tname{font:700 15px var(--sans);color:#e8ecf2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:auto;text-align:left}
.tsub{font:11px var(--mono);color:var(--lab);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lcd.bpm{width:96px;align-items:flex-end;text-align:right}
.lcd.bpm .v{font-size:25px;font-weight:700;text-shadow:0 0 10px color-mix(in srgb,var(--c) 55%,transparent)}
.lcd.bpm .u{font-size:10px;color:var(--lab);letter-spacing:2px}
.lcd.time{width:128px;text-align:right}
.lcd.time .el{font-size:19px;font-weight:700}.lcd.time .rem{font-size:12px;color:var(--lab)}
.btn{display:flex;align-items:center;justify-content:center;border-radius:9px;background:linear-gradient(#262a32,#181b21);border:1px solid #343944;box-shadow:0 2px 0 #060708,inset 0 1px 0 #ffffff12;font:800 12px var(--mono);letter-spacing:1.2px;color:#b9bfca;touch-action:none}
.btn:active,.btn.down{transform:translateY(1px);box-shadow:0 1px 0 #060708;background:linear-gradient(#1c1f26,#14161b)}
.btn.lit{color:#04141a;background:linear-gradient(color-mix(in srgb,var(--c) 90%,#fff),var(--c));border-color:var(--c);box-shadow:0 0 16px color-mix(in srgb,var(--c) 60%,transparent),inset 0 1px 0 #fff8}
.btn.load{width:84px;height:100%;flex:none;font-size:13px}
.btn.sm{height:30px;padding:0 14px;font-size:11px}
.btn.go{background:linear-gradient(#ffd24a,#ff9d1c);color:#1b1200;border-color:#ffc247;padding:14px 38px;font:800 18px var(--sans);letter-spacing:0;box-shadow:0 0 30px #ffb52f55}

/* pads */
.dpads{display:flex;gap:12px;margin-top:10px;height:152px}
.pads{display:grid;grid-template-columns:repeat(4,78px);grid-template-rows:repeat(2,70px);gap:8px;width:336px}
.pad{position:relative;border-radius:10px;background:linear-gradient(#20232a,#14161b);border:1px solid #2e323b;box-shadow:inset 0 1px 0 #ffffff10,0 2px 0 #050607;font:800 12px var(--mono);color:#7d8491;display:flex;align-items:flex-end;justify-content:flex-start;padding:7px 8px;text-align:left;touch-action:none}
.pad b{position:absolute;top:6px;left:8px;font-size:13px;color:#aab0bc}
.pad small{font-size:10px;font-weight:600;color:inherit;opacity:.9}
.pad.set{background:linear-gradient(color-mix(in srgb,var(--pc,var(--c)) 62%,#101216),color-mix(in srgb,var(--pc,var(--c)) 34%,#0c0d10));border-color:var(--pc,var(--c));color:#fff;box-shadow:0 0 14px color-mix(in srgb,var(--pc,var(--c)) 45%,transparent),inset 0 1px 0 #ffffff30}
.pad.set b{color:#fff}
.pad.on{background:var(--pc,var(--c));color:#001015;box-shadow:0 0 20px var(--pc,var(--c))}
.pad.on b{color:#001015}
.pad.down{transform:translateY(1px)}
.pmodes{display:flex;flex-direction:column;gap:8px;width:96px}
.pmodes .btn{flex:1;font-size:11px}
.loopc{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,1fr);gap:8px;width:130px}
.loopc .btn{font-size:11px}
.loopc .wide{grid-column:span 2}

/* platter row */
.dplat{position:absolute;left:12px;right:12px;top:240px;height:310px;display:flex;gap:10px;align-items:stretch}
.mirror .dplat{flex-direction:row-reverse}
.tempo{width:72px;display:flex;flex-direction:column;align-items:center;gap:8px}
.tempo .val{font:700 12px var(--mono);color:var(--c);background:#030507;border:1px solid #1b1f26;border-radius:6px;width:100%;text-align:center;padding:4px 0}
.fader.v{position:relative;width:46px;flex:1;touch-action:none}
.fader.v::before{content:"";position:absolute;left:50%;top:6px;bottom:6px;width:6px;margin-left:-3px;border-radius:3px;background:#030405;box-shadow:inset 0 0 4px #000,0 0 0 1px #262a31}
.fader .cap{position:absolute;left:50%;width:42px;height:62px;margin-left:-21px;border-radius:7px;background:linear-gradient(90deg,#2a2d34,#40444e 45%,#23262c);border:1px solid #4a4f5a;box-shadow:0 5px 10px #000b,inset 0 1px 0 #ffffff25;touch-action:none}
.fader .cap::after{content:"";position:absolute;left:5px;right:5px;top:50%;height:3px;margin-top:-1px;background:var(--c,#e8ecf2);border-radius:2px;box-shadow:0 0 8px var(--c,#fff)}
.tempo .ticks{position:absolute;left:0;right:0;top:6px;bottom:6px;pointer-events:none;background:repeating-linear-gradient(#0000 0 14px,#2b2f37 14px 15px)}
.trange{display:flex;gap:4px;width:100%}.trange .btn{flex:1;height:26px;font-size:10px;letter-spacing:0}
.trans{width:160px;display:flex;flex-direction:column;gap:10px}
.trans .btn{flex:1;font-size:16px;letter-spacing:2px}
.trans .play{flex:1.5;font-size:30px}
.trans .cue{flex:1.3}
.trans .row2{display:flex;gap:8px;flex:.9}.trans .row2 .btn{flex:1;font-size:12px;letter-spacing:.5px}

/* jog */
.jogw{flex:1;display:grid;place-items:center}
.jog{position:relative;width:306px;height:306px;border-radius:50%;touch-action:none;cursor:grab}
.jog .ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 20deg,#555a65,#2a2d34,#7a808c,#2a2d34,#555a65,#2a2d34,#7a808c,#2a2d34,#555a65);box-shadow:0 8px 26px #000c,inset 0 0 0 2px #0008}
.jog .led{position:absolute;inset:6px;border-radius:50%;pointer-events:none}
.jog .plat{position:absolute;inset:26px;border-radius:50%;overflow:hidden;background:repeating-radial-gradient(circle,#15171b 0 2px,#0d0e11 2px 4px);box-shadow:inset 0 0 0 2px #000,0 0 0 2px #3a3e48}
.jog .spin{position:absolute;inset:0;border-radius:50%;will-change:transform}
.jog .mark{position:absolute;left:50%;top:6px;width:6px;height:34px;margin-left:-3px;border-radius:3px;background:linear-gradient(#fff,#bbb);box-shadow:0 0 10px #fff9}
.jog .spoke{position:absolute;left:50%;top:50%;width:230px;height:2px;margin:-1px 0 0 -115px;background:linear-gradient(90deg,#0000,#ffffff0e,#0000)}
.jog .cap{position:absolute;left:50%;top:50%;width:112px;height:112px;margin:-56px 0 0 -56px;border-radius:50%;background:radial-gradient(circle at 40% 30%,#2b2f37,#0b0c0f);border:2px solid #3b404a;box-shadow:inset 0 0 18px #000,0 0 18px #000a;display:grid;place-items:center;pointer-events:none}
.jog .cap canvas{width:96px;height:96px}
.jog.touch .ring{filter:brightness(1.25)}

/* mixer */
#mixer{position:relative;width:340px;height:562px;border-radius:14px;padding:12px;background:linear-gradient(180deg,#1b1e24,#101216);border:1px solid var(--edge);box-shadow:inset 0 1px 0 #ffffff0d,0 8px 24px #0009}
.mtop{display:flex;align-items:center;justify-content:space-between;height:70px}
.mstrips{display:flex;gap:10px;height:388px;margin-top:4px}
.strip{flex:1;border-radius:10px;background:#0e1014;border:1px solid #1e2127;padding:6px 0;display:flex;flex-direction:column;align-items:center;gap:0;position:relative;--c:var(--A)}
.strip[data-ch=B]{--c:var(--B)}
.strip .nm{font:800 11px var(--mono);color:var(--c);letter-spacing:2px;margin-bottom:2px}
.krow{display:flex;width:100%;justify-content:center}
.kn{display:flex;flex-direction:column;align-items:center;gap:3px;height:52px;flex:none;width:50%;justify-content:flex-start}
.kn label{font:700 9px var(--mono);color:var(--lab);letter-spacing:1px;order:2;line-height:10px}
.knob{position:relative;width:36px;height:36px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#4a4f5a,#1d2026 70%);border:1px solid #05060a;box-shadow:0 4px 8px #000b,0 0 0 3px #15171c,0 0 0 4px #2a2e36;touch-action:none;cursor:ns-resize;order:1}
.knob .ptr{position:absolute;left:50%;top:3px;width:3px;height:12px;margin-left:-1.5px;border-radius:2px;background:var(--c,#fff);box-shadow:0 0 6px var(--c,#fff);transform-origin:50% 15px}
.knob.big{width:50px;height:50px}.knob.big .ptr{height:16px;transform-origin:50% 22px}
.sfade{display:flex;gap:6px;align-items:stretch;flex:1;min-height:0;width:100%;padding:4px 6px 0}
.sfade .fader.v{width:auto;flex:1}
.meter{width:12px;border-radius:3px;background:#030405;border:1px solid #1d2026}
.meter{position:relative}
.meter canvas{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.cuebtn{height:24px;width:70%;font-size:10px;margin-top:5px}
.asg{display:flex;gap:3px;width:78%;margin-top:4px}.asg .btn{flex:1;height:20px;font-size:10px;letter-spacing:0}
.cfzone{margin-top:8px;height:62px;border-radius:10px;background:#0e1014;border:1px solid #1e2127;position:relative;padding:6px 14px}
.cfzone .lab{position:absolute;left:12px;top:4px;font:700 9px var(--mono);color:var(--lab);letter-spacing:1px}
.cfzone .btn{position:absolute;right:10px;top:4px;height:18px;padding:0 8px;font-size:9px;letter-spacing:.5px}
.fader.h{position:relative;height:34px;margin-top:20px;touch-action:none}
.fader.h::before{content:"";position:absolute;top:50%;left:6px;right:6px;height:6px;margin-top:-3px;border-radius:3px;background:#030405;box-shadow:inset 0 0 4px #000,0 0 0 1px #262a31}
.fader.h .cap{top:0;width:60px;height:32px;margin:0;left:0}
.fader.h .cap::after{left:50%;right:auto;top:5px;bottom:5px;width:3px;height:auto;margin:0 0 0 -1px;background:#fff}
.mtitle{font:700 10px var(--mono);color:var(--lab);letter-spacing:2px}
.vu{display:flex;gap:4px;height:52px}.vu .meter{width:10px;height:52px}

/* footer: library + fx */
#foot{position:absolute;left:20px;top:816px;width:1560px;height:172px;display:flex;gap:20px}
#lib{width:940px;height:100%;border-radius:14px;background:linear-gradient(180deg,var(--p1),var(--p2));border:1px solid var(--edge);padding:10px;display:flex;flex-direction:column;gap:8px;overflow:hidden}
.libbar{display:flex;gap:12px;align-items:center}
#libq{flex:1;height:30px;border-radius:8px;border:1px solid #2b2f37;background:#07080a;color:var(--txt);padding:0 12px;font-size:14px;outline:none;touch-action:auto;user-select:text;-webkit-user-select:text}
#libcount{font:600 11px var(--mono);color:var(--lab)}
#liblist{flex:1;overflow-y:auto;border-radius:8px;background:#07080a;border:1px solid #1b1e24;touch-action:pan-y}
.trk{display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;border-bottom:1px solid #14161a;font-size:14px}
.trk:hover{background:#0f1116}
.trk .n{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:auto;text-align:left}
.trk .m{font:11px var(--mono);color:var(--lab);width:64px;text-align:right}
.trk .bt{width:30px;height:24px;font-size:12px;letter-spacing:0;border-radius:6px}
.trk .bt.A{--c:var(--A)}.trk .bt.B{--c:var(--B)}
.trk .bt.A:hover{border-color:var(--A);color:var(--A)}.trk .bt.B:hover{border-color:var(--B);color:var(--B)}
.trk .rm{width:24px;height:24px;color:#7d8491;font-size:16px}
.trk.cur{background:#10131a}
.empty{padding:24px;color:var(--dim);font-size:14px;text-align:center;direction:rtl}
#fxp{width:600px;height:100%;border-radius:14px;background:linear-gradient(180deg,var(--p1),var(--p2));border:1px solid var(--edge);padding:12px;display:flex;gap:18px;align-items:center;--c:#b98cff}
.fxsel{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:210px}
.fxsel .btn{height:40px;font-size:12px}
.fxk{display:flex;gap:22px}
.fxon{width:92px;height:92px;border-radius:50%;font-size:15px;margin-inline-start:auto;--c:#b98cff}

/* overlays */
#splash,#help,#rotate{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:radial-gradient(900px 600px at 50% 40%,#171a21e8,#050607f5);backdrop-filter:blur(6px)}
#help{z-index:40}#rotate{z-index:60;text-align:center;font-size:22px;background:#050607}
.card{max-width:560px;padding:28px 34px;border-radius:18px;background:linear-gradient(180deg,#1b1e25,#101216);border:1px solid #2c3039;box-shadow:0 30px 80px #000;text-align:center;direction:rtl}
.card h1{margin:4px 0 10px;font-size:34px}.card h1 b{color:#ffb52f;font-family:var(--mono);letter-spacing:3px}
.card h2{margin:0 0 12px}
.card p{color:#b4bac6;line-height:1.7;font-size:15px}.card small{display:block;margin-top:14px;color:var(--dim)}
.card ol{text-align:right;line-height:1.8;font-size:14.5px;color:#c9ced8;padding-inline-start:20px;margin:0 0 10px}
.card .small{font-size:12.5px;color:var(--lab)}
#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:70;background:#e8ecf2;color:#0b0c0f;padding:10px 18px;border-radius:10px;font:600 14px var(--sans);opacity:0;pointer-events:none;transition:opacity .25s;max-width:80vw;direction:rtl}
#toast.show{opacity:1}
#drop{position:fixed;inset:0;z-index:45;display:none;place-items:center;background:#000a;font:700 28px var(--sans);color:#fff;border:3px dashed #ffb52f;direction:rtl}
#drop.on{display:grid}