:root { --shell:#111214; --panel:#1d1f22; --raised:#292b2f; --line:#46494e; --text:#dedede; --muted:#93969a; --orange:#f58a22; --amber:#ffb12a; --red:#ef4c36; --screen:#081718; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--text); background:#08090a radial-gradient(circle at 50% 0,#2c2e31 0,transparent 44%) fixed; font-family:"DM Mono",monospace; }
button,input { font:inherit; } button { cursor:pointer; color:inherit; }
.console { min-height:100vh; max-width:1540px; margin:auto; padding:16px; display:grid; grid-template-columns:minmax(300px,1fr) minmax(280px,.76fr) minmax(300px,1fr); grid-template-rows:auto 1fr auto; gap:7px; background:linear-gradient(135deg,#2f3134,#111214 14%,#1a1c1f 86%,#303236); box-shadow:0 0 0 1px #505257,0 25px 70px #000; }
.topbar { grid-column:1/-1; min-height:47px; display:flex; align-items:center; justify-content:space-between; border:1px solid #393b3f; padding:8px 14px; background:linear-gradient(#282a2d,#151618); box-shadow:inset 0 1px #45474a; }
.brand { color:#f0f0f0; text-decoration:none; font:600 18px "Space Grotesk",sans-serif; letter-spacing:1px; }.brand span{color:var(--orange)}
.status { color:var(--muted); font-size:10px; letter-spacing:1px; }.status i { display:inline-block;width:7px;height:7px;border-radius:50%;background:#53565a;margin-right:7px; }.status.running i{background:var(--orange);box-shadow:0 0 9px var(--orange);animation:led-pulse 1.4s ease-in-out infinite}.status b{color:#ddd;margin-left:5px}.record-controls{display:flex;align-items:center;gap:5px}.record-status{color:#898c8f;font-size:8px;letter-spacing:.7px}.record-btn,.save-btn{border:1px solid #050505;border-radius:2px;min-width:34px;height:25px;background:linear-gradient(#3a3c3f,#161719);box-shadow:inset 0 1px #5c5e61;color:#d5d6d6;font-size:8px}.record-btn.recording{color:#fff;background:linear-gradient(#f55f50,#a52b22);box-shadow:inset 0 1px #ff9c91,0 0 8px #b72e27;animation:record-pulse .9s ease-in-out infinite}.save-btn:disabled{color:#65686b}.save-btn:not(:disabled){color:#151515;background:linear-gradient(#ffd177,#d77c19)}.icon-button{border:1px solid #050505;border-radius:50%;background:radial-gradient(circle at 35% 28%,#585b60,#151618 58%);width:29px;height:29px;font-size:10px;box-shadow:inset 0 1px #6b6d70,0 1px 2px #000}.icon-button.muted{color:var(--red)}
.deck,.mixer { min-width:0; background:linear-gradient(135deg,#222427,#17181a 54%,#202225); border:1px solid #3e4043; box-shadow:inset 0 1px #35373a,inset 0 -1px #0a0a0b; }.deck{position:relative;padding:14px;display:flex;flex-direction:column;gap:13px}.deck:after{content:"DIGITAL PERFORMANCE DECK";position:absolute;bottom:10px;right:12px;color:#55585c;font-size:7px;letter-spacing:1px}.deck-header{color:var(--orange);display:flex;justify-content:space-between;font-size:10px;letter-spacing:1px;font-weight:bold}.deck-header output{color:#d9dcde;background:#0b0c0d;padding:2px 5px;border:1px solid #33363a}.track-loader{border:1px solid #383b3f;background:#121315;box-shadow:inset 0 1px #050505;min-height:38px;display:flex;align-items:center;gap:10px;padding:7px 10px;cursor:pointer;overflow:hidden}.track-loader input{display:none}.load-icon{font:22px "Space Grotesk";color:var(--orange)}.track-title{color:#b8babd;font-size:9px;letter-spacing:.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.waveform{width:100%;height:95px;background:var(--screen);border:1px solid #3a3c3d;box-shadow:inset 0 0 18px #000}.playing .waveform{animation:wave-glow 1.3s ease-in-out infinite}.transport{display:flex;align-items:center;justify-content:center;gap:6px}.transport button{border:1px solid #060607;border-radius:2px;height:34px;background:linear-gradient(#3e4043,#1b1c1e);box-shadow:inset 0 1px #65676a,0 1px 2px #000;font-weight:bold}.cue-btn,.loop-btn{color:#c8c8c8;font-size:9px;padding:0 11px}.play-btn{width:48px;background:linear-gradient(#f5a033,#b95514)!important;color:#151515;font-size:15px}.playing .play-btn{background:linear-gradient(#fa6148,#a32c20)!important;color:#fff}.loop-btn.active{color:#111;background:linear-gradient(#ffd06a,#dd8718)!important}
.pitch-row{display:grid;grid-template-columns:40px 1fr 50px;align-items:center;gap:8px;color:var(--muted);font-size:9px}.pitch-row output{text-align:right;color:#d7d7d7}.deck-bottom{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding:0 7px}.jog{width:156px;aspect-ratio:1;border:4px solid #0b0c0d;border-radius:50%;display:grid;place-items:center;background:repeating-radial-gradient(circle,#27292c 0 4px,#1b1c1e 5px 6px);box-shadow:0 0 0 1px #56595d,inset 0 0 0 9px #333538,inset 0 0 28px #000,0 4px 5px #000}.playing .jog{animation:jog-spin 2.5s linear infinite}.jog:before{content:"";position:absolute;width:125px;aspect-ratio:1;border:2px solid #46494d;border-radius:50%;box-shadow:inset 0 0 0 2px #141517}.jog-ring{z-index:1;width:48%;aspect-ratio:1;border:2px solid #55585c;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 25%,#44464a,#101113 65%);color:var(--orange);font:600 25px "Space Grotesk";box-shadow:0 0 0 4px #222427,0 0 0 5px #4b4e52}.level{color:var(--muted);font-size:8px;text-align:center}.meter{display:flex;align-items:end;gap:3px;height:60px;margin-top:6px}.meter i{display:block;width:6px;height:18%;background:#4e5357}.meter i:nth-child(2){height:36%}.meter i:nth-child(3){height:55%}.meter i:nth-child(4){height:72%;background:var(--amber)}.meter i:nth-child(5){height:90%;background:var(--red)}.meter.active i{background:#75a59f;animation:meter-bounce .7s ease-in-out infinite alternate}.meter.active i:nth-child(2){animation-delay:.15s}.meter.active i:nth-child(3){animation-delay:.3s}.meter.active i:nth-child(4){background:var(--amber);animation-delay:.1s}.meter.active i:nth-child(5){background:var(--red);animation-delay:.22s}
.scratching .jog{animation:none!important;transform:rotate(var(--jog-angle,0deg));cursor:grabbing}.jog{touch-action:none;cursor:grab}
.performance-strip{display:flex;justify-content:space-between;align-items:stretch;gap:10px;padding-top:3px;border-top:1px solid #34363a}.pad-bank{display:grid;grid-template-columns:repeat(4,27px);gap:5px}.hotcue,.sync-btn,.beatjump-btn{border:1px solid #070808;border-radius:2px;background:linear-gradient(#3a3c3f,#17181a);box-shadow:inset 0 1px #5b5e61,0 1px 2px #000;color:#c9cbcd;font-size:10px}.hotcue{height:27px}.hotcue.active{color:#131313;background:linear-gradient(#ffb042,#c26516);box-shadow:inset 0 1px #ffe2aa,0 0 8px #be6517}.deck-tools{display:grid;grid-template-columns:27px 27px auto;align-items:center;gap:4px;color:#72767a;font-size:7px;letter-spacing:.5px}.deck-tools span{grid-column:1/-1;text-align:center}.sync-btn,.beatjump-btn{height:27px;padding:0 6px;font-size:8px}.sync-btn.active{color:#151515;background:linear-gradient(#ffd177,#df8821)}
.mixer{padding:14px 12px;display:flex;flex-direction:column;justify-content:space-between;gap:20px;background:linear-gradient(90deg,#1b1d20,#282a2d 48%,#1b1d20)}.mixer-label{color:#d2d3d4;text-align:center;font:bold 10px "Space Grotesk";letter-spacing:2px;border-bottom:1px solid #414348;padding-bottom:9px}.eq-row{display:grid;grid-template-columns:1fr .86fr 1fr;gap:10px;align-items:start}.channel-controls,.fx-controls{display:flex;flex-direction:column;gap:10px;align-items:center;color:var(--muted);font-size:8px}.channel-controls>span,.fx-controls>span{color:#e4e4e4;font-size:9px;font-weight:bold}.channel-controls label,.fx-controls label{display:flex;flex-direction:column;align-items:center;gap:5px}.channel-volume{margin-top:10px}.fx-btn{width:100%;border:1px solid #090909;border-radius:2px;background:linear-gradient(#35373a,#191a1c);box-shadow:inset 0 1px #5a5c5e;padding:7px 1px;color:#ccc;font-size:8px}.fx-btn.active{color:#191919;background:linear-gradient(#ffb048,#c66b17);box-shadow:inset 0 1px #ffdd9b}.master-meter{display:flex;align-items:end;height:64px;gap:3px;margin-top:5px}.master-meter i{width:5px;height:25%;background:#4b5054}.master-meter i:nth-child(3),.master-meter i:nth-child(4){height:45%;background:#76a49d}.master-meter i:nth-child(5),.master-meter i:nth-child(6){height:66%;background:var(--amber)}.master-meter i:nth-child(7),.master-meter i:nth-child(8){height:90%;background:var(--red)}.crossfader{display:flex;align-items:center;gap:10px;color:#d7d8d8;font:bold 12px "Space Grotesk"}.crossfader span:first-child{color:var(--orange)}.crossfader span:last-child{color:var(--red)}
input[type="range"]{appearance:none;width:100%;height:3px;background:#090a0b;box-shadow:inset 0 1px #484b4e;accent-color:var(--orange);cursor:pointer}input[type="range"]::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,#f1f2f2,#777b7f);border:2px solid #111214;box-shadow:0 0 0 1px #55585b}#crossfader::-webkit-slider-thumb{border-radius:2px;width:11px;height:16px;background:linear-gradient(90deg,#b7b9bc,#f3f3f3,#898c90)}
footer{grid-column:1/-1;color:#777a7e;display:flex;justify-content:space-between;font-size:8px;letter-spacing:.7px;border-top:1px solid #36383c;padding:8px 1px 0}@media(max-width:800px){.console{padding:8px;grid-template-columns:1fr;grid-template-rows:auto auto auto auto auto}.topbar,.mixer,footer{grid-column:auto}.mixer{order:4}.deck-b{order:3}.jog{width:124px}.eq-row{gap:5px}.status,.record-status{display:none}footer span:nth-child(2){display:none}}@media(max-width:420px){.console{gap:6px}.deck{padding:11px}.jog{width:102px}.deck:after{display:none}.mixer{padding:11px}.topbar{padding:8px 10px}}
@keyframes jog-spin{to{transform:rotate(360deg)}}@keyframes meter-bounce{to{filter:brightness(1.4);transform:scaleY(.45);transform-origin:bottom}}@keyframes wave-glow{50%{box-shadow:inset 0 0 23px #000,0 0 11px #326b68}}@keyframes led-pulse{50%{opacity:.35}}@keyframes record-pulse{50%{box-shadow:inset 0 1px #ff9c91,0 0 2px #b72e27}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}

/* Professional controller layout */
:root{--shell:#0a0b0c;--panel:#121416;--raised:#202326;--line:#363a3d;--text:#e7e8e8;--muted:#8e9398;--orange:#f45d35;--amber:#f4a325;--red:#fb525a;--screen:#071619}
body{background:#030405 radial-gradient(ellipse at 50% 0,#272a2d 0,transparent 58%) fixed}
.console{max-width:1720px;min-height:100vh;padding:7px;gap:4px;background:repeating-linear-gradient(90deg,#17191b 0 1px,#101113 1px 4px),linear-gradient(90deg,#151719,#090a0b 48%,#17191b);box-shadow:0 0 0 1px #676b6d,0 25px 80px #000;grid-template-columns:minmax(360px,1fr) minmax(260px,.52fr) minmax(360px,1fr)}
.topbar{min-height:34px;padding:5px 10px;border-color:#44484b;background:linear-gradient(#2c2f31,#111214)}.brand{font-size:13px;letter-spacing:1.4px}.status{font-size:8px}.record-btn,.save-btn{height:21px;min-width:31px;font-size:7px}.icon-button{width:24px;height:24px;font-size:8px}
.deck,.mixer{border-color:#414548;background:repeating-linear-gradient(90deg,#1b1d1f 0 1px,#121416 1px 4px);box-shadow:inset 0 1px #4f5356,inset 0 -1px #050505}.deck{padding:10px;gap:9px;display:grid;grid-template-columns:minmax(160px,1fr) 118px;grid-template-rows:auto 38px 65px auto auto 1fr}.deck-header,.track-loader,.waveform,.transport,.pitch-row,.performance-strip{grid-column:1/-1}.deck-header{font-size:9px;padding:2px 1px}.track-loader{min-height:31px;padding:5px 8px}.waveform{height:65px}.transport{justify-content:flex-start}.transport button{height:28px}.cue-btn,.loop-btn{font-size:8px;padding:0 9px}.play-btn{width:44px;font-size:12px}.pitch-row{grid-column:2;grid-row:6;align-self:center;display:flex;flex-direction:column;gap:6px;padding-left:10px;border-left:1px solid #383c3f}.pitch-row span,.pitch-row output{font-size:7px}.pitch-row input{height:90px;width:3px;writing-mode:vertical-lr;direction:rtl}.pitch-row input::-webkit-slider-thumb{width:17px;height:10px;border-radius:1px}.performance-strip{grid-column:1;grid-row:6;align-self:center;border:0;padding:0}.pad-bank{grid-template-columns:repeat(4,minmax(27px,1fr));grid-template-rows:repeat(2,30px);gap:5px;max-width:230px}.hotcue{height:30px;border-radius:2px;color:#142025!important;border-color:#050505!important;box-shadow:inset 0 1px #ffffff70,0 2px 2px #000}.pad-cyan{background:linear-gradient(135deg,#13d1f4,#167cc6)!important}.pad-blue{background:linear-gradient(135deg,#25a5ff,#3857d7)!important}.pad-green{background:linear-gradient(135deg,#24eec1,#0e9d77)!important}.pad-lime{background:linear-gradient(135deg,#9cf049,#49b33d)!important}.pad-red{background:linear-gradient(135deg,#ff727b,#d63758)!important}.pad-pink{background:linear-gradient(135deg,#fa92f1,#b348d1)!important}.pad-amber{background:linear-gradient(135deg,#ffc77a,#ed7d44)!important}.pad-yellow{background:linear-gradient(135deg,#fff491,#edbc39)!important}.hotcue.active{filter:brightness(1.45);transform:translateY(1px);box-shadow:inset 0 0 0 2px #fff,0 0 11px currentColor}.deck-tools{display:none}.deck-bottom{grid-column:1/-1;grid-row:7;margin:0;padding:0;align-items:center}.jog{width:min(100%,300px);justify-self:center;border-width:8px;background:repeating-radial-gradient(circle,#131518 0 4px,#08090a 5px 7px);box-shadow:0 0 0 1px #777b7f,inset 0 0 0 12px #1e2124,inset 0 0 0 14px #55595c,inset 0 0 34px #000,0 7px 7px #000}.jog:before{width:84%;border-style:dotted;border-width:3px}.jog-ring{width:42%;font-size:22px;color:#ddd;background:radial-gradient(circle at 35% 30%,#4b4f52,#17191a 58%,#080909);box-shadow:0 0 0 7px #161819,0 0 0 9px #676b6e}.deck-a .jog-ring{border-color:#f35756}.deck-b .jog-ring{border-color:#49e4bb}.level{align-self:end;padding-bottom:8px}.deck:after{display:none}
.mixer{padding:10px 9px;background:linear-gradient(90deg,#151719,#272a2c 50%,#151719)}.mixer-label{font-size:9px;padding-bottom:6px}.eq-row{grid-template-columns:1fr .76fr 1fr;gap:7px}.channel-controls,.fx-controls{gap:7px}.channel-controls label,.fx-controls label{gap:3px}.channel-controls input{height:58px;width:3px;writing-mode:vertical-lr;direction:rtl}.channel-controls input::-webkit-slider-thumb{width:14px;height:9px;border-radius:1px}.channel-volume{margin-top:6px}.fx-btn{font-size:7px;padding:5px 1px}.master-meter{height:83px}.crossfader{font-size:9px;padding:4px 2px;border-top:1px solid #44484a}.crossfader input{height:4px}
footer{font-size:7px;padding:5px 2px 0}.playing .jog{animation-duration:1.45s}.playing .waveform{box-shadow:inset 0 0 23px #000,0 0 9px #36c4bc}@media(max-width:900px){.console{grid-template-columns:1fr}.deck{display:flex;padding:11px}.deck-bottom{min-height:150px}.pitch-row{display:grid;grid-template-columns:40px 1fr 50px;border:0;padding:0}.pitch-row input{height:3px;width:100%;writing-mode:horizontal-tb;direction:ltr}.performance-strip{display:flex}.deck-tools{display:grid}.pad-bank{max-width:none}.jog{width:130px}.mixer{order:4}}

/* Compact deck mechanics: every control stays in its operating zone. */
@media(min-width:901px){
	.console{min-height:100vh;grid-template-rows:34px minmax(640px,1fr) 20px}
	.deck{display:grid;grid-template-columns:minmax(0,1fr) 68px;grid-template-rows:18px 31px 52px minmax(255px,1fr) 30px 70px;align-content:start;gap:8px}
	.deck-header{grid-row:1}.track-loader{grid-row:2}.waveform{grid-row:3}.transport{grid-row:4}.performance-strip{grid-column:1/-1;grid-row:5;display:grid;grid-template-columns:minmax(0,1fr) 68px;gap:9px;align-items:center}.pad-bank{grid-column:1;grid-row:auto;max-width:none;height:66px;grid-template-columns:repeat(4,minmax(28px,1fr));grid-template-rows:repeat(2,30px)}
	.deck-bottom{grid-column:1;grid-row:4;align-self:center;min-height:0;justify-content:center;padding:0}.jog{width:min(100%,300px);background:repeating-radial-gradient(circle,#151719 0 5px,#050607 6px 8px);box-shadow:0 0 0 2px #767b7d,inset 0 0 0 10px #050606,inset 0 0 0 12px #555a5d,inset 0 0 38px #000,0 8px 8px #000}.jog:before{width:87%;border:4px dotted #a3a6a7;opacity:.8}.jog-ring{width:42%;background:radial-gradient(circle at 35% 30%,#565b5e,#1a1c1e 55%,#080909);box-shadow:0 0 0 9px #121416,0 0 0 11px #6b7072}.level{display:none}
	.pitch-row{grid-column:2;grid-row:4;align-self:center;justify-self:stretch;height:205px;display:flex;border-left:1px solid #35393c;padding-left:10px}.pitch-row input{height:152px}.pitch-row:after{content:"TEMPO";color:#6e7377;font-size:7px;letter-spacing:1px;writing-mode:vertical-rl}
	.transport{grid-column:1;grid-row:5;align-self:center;justify-content:flex-start}.performance-strip{grid-row:6}.deck-tools{grid-column:2;grid-row:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:3px;color:#7d8286}.deck-tools .sync-btn{grid-column:1/-1}.deck-tools span{display:none}.beatjump-btn,.sync-btn{height:20px;padding:0;font-size:7px}
}

/* Rotary EQ and master hardware details. */
@media(min-width:901px){
	.mixer{position:relative;padding:12px 10px 9px;background:repeating-linear-gradient(90deg,#17191b 0 1px,#232629 1px 3px);box-shadow:inset 0 1px #65696c,inset 0 -2px #050505,0 0 0 1px #080909}
	.mixer:before,.mixer:after{content:"";position:absolute;width:6px;height:6px;border-radius:50%;background:#090a0b;box-shadow:inset 0 1px #777b7e;top:7px}.mixer:before{left:7px}.mixer:after{right:7px}
	.mixer-label{padding:3px 0 9px;color:#d6d8d9;font-size:8px;border-bottom-color:#575b5e}.eq-row{gap:5px}.channel-controls{gap:8px}.channel-controls>span{font-size:8px;color:#bfc2c4;letter-spacing:.8px}
	.channel-controls label{position:relative;display:grid;place-items:center;width:38px;height:38px;padding:0;border-radius:50%;background:radial-gradient(circle at 34% 28%,#74797b 0 3%,#303438 15%,#141618 63%,#050506 66%);box-shadow:0 0 0 1px #5b6063,inset 0 0 0 3px #090a0b,0 2px 3px #000;color:#c8cacc;font-size:6px;line-height:1}
	.channel-controls label:before{content:"";position:absolute;width:2px;height:11px;top:4px;background:#e0e1df;box-shadow:0 0 2px #fff;transform:rotate(20deg);transform-origin:50% 15px}.channel-controls label input{position:absolute;inset:0;width:38px;height:38px;margin:0;opacity:0;writing-mode:horizontal-tb;direction:ltr;cursor:ns-resize}.channel-volume{margin-top:8px!important;border-radius:2px!important;width:26px!important;height:72px!important;background:linear-gradient(90deg,#17191b,#303438,#151719)!important}.channel-volume:before{display:none}.channel-volume input{width:4px!important;height:57px!important;inset:8px 11px!important;opacity:1!important;writing-mode:vertical-lr!important;direction:rtl!important;background:#080909!important}.channel-volume input::-webkit-slider-thumb{width:15px!important;height:9px!important;border-radius:1px!important;background:linear-gradient(#e0e2e1,#74797c)!important}
	.fx-controls{gap:9px;padding-top:1px;border-left:1px solid #424649;border-right:1px solid #424649}.fx-controls>span{font-size:8px}.master-meter{gap:2px;height:118px;padding:4px 5px;background:#0a0b0c;border:1px solid #3c4043}.master-meter i{width:4px;box-shadow:0 0 4px currentColor}.crossfader{margin-top:7px;padding:10px 3px 3px;border-top:1px solid #52565a}.crossfader:before{content:"CROSSFADER";position:absolute;align-self:start;margin-top:-8px;color:#7e8386;font-size:6px;letter-spacing:1px}
}