:root{color-scheme:dark;--mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;--sans:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--bg:#101214;--panel:#191c1f;--line:#303438;--text:#f2f3f4;--muted:#92989d;--a:#6ad4ff;--b:#ffad58}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:13px var(--sans);overflow:hidden}button,a,input{ -webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;border:1px solid var(--line);background:#24282b;border-radius:6px;padding:8px 13px;cursor:pointer}button:hover{background:#363b40}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--a);outline-offset:4px}button:disabled{opacity:.5;cursor:wait}a{color:inherit;text-decoration:none}header{height:58px;display:flex;align-items:center;padding:0 25px;gap:34px;border-bottom:1px solid #303234;background:linear-gradient(#25292c,#171a1d)}.logo{font-size:22px;letter-spacing:3px;white-space:nowrap;font-weight:800}.logo span{font-weight:400}.logo i{font-style:normal;font-size:9px;letter-spacing:1px;margin-left:7px;border:1px solid #676c70;border-radius:3px;padding:3px;vertical-align:top}.nav-active{background:#30353a;padding:9px 14px;border:1px solid #3b4044;border-radius:7px;font-weight:600}.header-right{margin-left:auto;display:flex;align-items:center;gap:15px}.local{font:9px var(--mono);letter-spacing:1.5px;color:#a9b3b7;display:flex;gap:8px;align-items:center}.local b{height:5px;width:5px;border-radius:50%;background:#79ad86}.icon-btn{border:0;background:transparent;font-size:18px;padding:6px 9px;color:#bfc4c7}.displays{height:142px;display:grid;grid-template-columns:1fr 1.9fr 1fr;gap:12px;padding:10px 12px;background:#15181a;border-bottom:1px solid #303234}.track{min-width:0}.track-title{display:flex;align-items:center;gap:9px}.deck-badge{font:700 11px var(--mono);border:1px solid #44525b;padding:5px 7px;border-radius:4px}.a{color:var(--a)}.b{color:var(--b);border-color:#5e4731}.load-title{padding:3px 0;border:0;background:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;color:#d9dddf;font-size:13px}.load-title:hover{color:white;background:none}.track-meta{display:flex;gap:16px;align-items:center;font:11px var(--mono);color:var(--muted);margin:8px 0}.track-meta strong{margin-left:auto;font-weight:500;color:#e0e3e5}.track-meta .bpm{color:var(--a)}.track[data-deck="1"] .bpm{color:var(--b)}.overview{display:block;width:100%;height:24px;background:#080b0c;border-radius:3px;cursor:crosshair}.transport{display:flex;gap:5px;align-items:center;margin-top:6px}.transport button{font:9px var(--mono);padding:4px 9px;border-radius:3px;background:#202528}.transport span{font:10px var(--mono);color:var(--muted);margin-left:auto}.transport .playing{color:#9cf0ab;border-color:#589768}.transport .loop-active{color:#ffb85a;border-color:#8f6632}.waveforms{position:relative;border:1px solid #23282c;border-radius:5px;background:#080b0d;overflow:hidden;display:grid;grid-template-rows:1fr 1fr}.waveforms canvas{width:100%;height:100%;min-height:0}.waveforms canvas+canvas{border-top:1px solid #20272b}.playhead{position:absolute;left:50%;top:0;bottom:0;width:1px;background:#e9f4fa44;pointer-events:none}.wave-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:11px;font:10px var(--mono);letter-spacing:2px;color:#a2adb3}.wave-empty small{font:10px var(--sans);letter-spacing:0;color:#727c82}.wave-empty.hidden{display:none}main{position:relative;height:calc(100dvh - 264px);min-height:200px;background:radial-gradient(ellipse at 50% 110%,#8c3e1c 0,#442012 33%,#170f0d 63%,#090b0d 95%);overflow:hidden}#stage{position:absolute;inset:0;z-index:2;touch-action:none}#stage canvas{display:block;width:100%;height:100%}#loading{position:absolute;inset:40% 0;text-align:center;color:var(--muted);font:12px var(--mono)}.stage-top{position:absolute;top:22px;left:26px;right:26px;z-index:3;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.stage-top button{pointer-events:auto}h1{font-size:13px;letter-spacing:2px;margin:0 0 6px;font-weight:500}.stage-top span{font:8px var(--mono);color:#777e83;letter-spacing:1.5px}.quiet-btn{background:#181c1da6;border:1px solid #394044;color:#b9c1c7;font-size:11px}.stage-hint{position:absolute;z-index:3;bottom:15px;width:100%;text-align:center;color:#b59b8c;font-size:10px;pointer-events:none}.desk-glow{position:absolute;bottom:2%;left:20%;width:60%;height:15%;background:#ff782b;filter:blur(85px);opacity:.12}footer{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:#101214;position:relative;border-top:1px solid #272b2e}.footer-label,.audio-status{font:8px var(--mono);letter-spacing:1px;color:#80898f}.footer-label em{padding:0 7px}.audio-status{color:#9bb4a3}.dock{display:flex;align-items:center;gap:5px;padding:5px;border:1px solid #3a4146;border-radius:12px;background:linear-gradient(#282e32,#191d20);box-shadow:0 5px 20px #0005}.dock button{border:0;background:transparent;padding:8px 10px;display:flex;gap:9px;align-items:center;font-weight:600;font-size:12px}.dock>div{height:20px;width:1px;background:#41484c}kbd{font:10px var(--mono);border:1px solid #52595e;border-radius:3px;padding:2px 4px;color:#b6bec3}.dock kbd{font-size:8px}dialog{padding:26px;border:1px solid #42494e;border-radius:13px;background:#181c1f;color:var(--text);width:min(700px,94vw);max-height:85dvh;box-shadow:0 30px 120px #000b}dialog::backdrop{background:#0009;backdrop-filter:blur(5px)}.dialog-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.eyebrow{font:9px var(--mono);letter-spacing:2px;color:var(--muted);margin:0 0 8px}h2{font-size:23px;font-weight:500;margin:0;letter-spacing:-.6px}.library-tools{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;gap:12px}.library-tools p{font-size:10px;color:var(--muted)}.primary{background:#dce7ed;color:#11181c;border:0;font-weight:bold;padding:11px 17px}.primary:hover{background:white}.library-columns,.song-row{display:grid;grid-template-columns:1fr 55px 120px;gap:12px;align-items:center}.library-columns{font:9px var(--mono);letter-spacing:1px;color:#909ba2;border-bottom:1px solid var(--line);padding:0 0 12px}.song-row{padding:17px 0;border-bottom:1px solid #2b3135}.song-info{display:flex;gap:13px;align-items:center;min-width:0}.art{height:38px;width:38px;border-radius:5px;display:grid;place-items:center;font-size:20px;flex-shrink:0;background:linear-gradient(135deg,#926047,#34211b);color:#ffd9ab}.song-row:nth-child(2n) .art{background:linear-gradient(135deg,#35687a,#172d38);color:#b1e7ff}.song-info strong{display:block;font-size:12px;font-weight:500;max-width:310px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song-info small{display:block;margin-top:6px;font-size:10px;color:var(--muted)}.song-bpm{color:#a7b0b7;font:11px var(--mono)}.song-actions{display:flex;gap:6px}.song-actions button{font-size:10px;padding:7px 9px}.song-actions button:first-child{color:var(--a)}.song-actions button+button{color:var(--b)}.library-note{color:#879198;font-size:11px;line-height:1.7;margin-top:22px}#toast{position:fixed;z-index:10;left:50%;bottom:84px;transform:translateX(-50%) translateY(10px);background:#e0e9ef;color:#132028;padding:12px 19px;border-radius:7px;opacity:0;pointer-events:none;transition:.2s;max-width:90vw;font-size:12px;box-shadow:0 10px 25px #0004}#toast.show{opacity:1;transform:translateX(-50%)}#mixer-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}.mixer-channel{background:#20262a;padding:18px;border-radius:8px;border:1px solid #343c41}.mixer-channel h3{margin:0 0 20px;font-size:13px;letter-spacing:1px}.control-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:15px 0;font-size:11px;color:#c6cdd2}.control-row input[type=range]{width:58%}input[type=range]{accent-color:var(--a);cursor:pointer;height:16px}input[type=number]{width:70px;padding:6px;background:#141a1e;color:white;border:1px solid #4b565d;border-radius:4px}.cross-control{margin:22px auto 5px;text-align:center}.cross-control label{display:flex;justify-content:space-between;align-items:center;color:var(--a);font:11px var(--mono)}.cross-control label span{color:#a5afb7;font-size:9px;letter-spacing:2px}.cross-control>input{width:100%;margin:14px 0}.master-label{display:flex;justify-content:center;gap:20px;align-items:center;margin:20px 0 0;font-size:11px;color:#bbc4cb}#help-dialog p,#help-dialog li{font-size:13px;line-height:1.8;color:#aeb8bf}#help-dialog li{padding:5px 0}.shortcuts{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:25px 0;color:#cbd3d8;font-size:12px}.shortcuts kbd{margin-right:10px}@media(max-width:900px){.footer-label{display:none}.audio-status{font-size:8px}footer{justify-content:center;gap:25px}.stage-top{top:14px}.displays{grid-template-columns:1fr 1.3fr 1fr;gap:8px}.track-meta{gap:8px}.wave-empty{letter-spacing:1px;font-size:8px}.wave-empty small{padding:0 15px;text-align:center;line-height:1.6}.logo{font-size:18px}header{gap:20px;padding:0 15px}}@media(max-width:600px){header{height:52px}.logo{font-size:15px;letter-spacing:2px}.local,nav{display:none}.header-right{gap:8px}.displays{height:142px;grid-template-columns:1fr 1fr;padding:9px;gap:14px}.waveforms{display:none}.track-meta{font-size:10px}.transport button{padding:4px 7px}.transport span{font-size:9px}main{height:calc(100dvh - 260px)}.stage-top{left:15px;right:15px}.stage-top h1{font-size:11px}.stage-top span{font-size:7px}.stage-hint{font-size:9px;padding:0 20px;line-height:1.6}.audio-status{display:none}.dock button{font-size:11px}.dock kbd{display:none}dialog{padding:20px}h2{font-size:21px}.library-tools{align-items:flex-start;flex-direction:column;gap:4px}.library-columns,.song-row{grid-template-columns:1fr 36px 103px;gap:5px}.song-info{gap:8px}.art{width:28px;height:33px}.song-info strong{max-width:130px;font-size:11px}.song-actions button{padding:6px;font-size:9px}.song-bpm{font-size:9px}#mixer-grid{gap:10px}.mixer-channel{padding:11px}.control-row{gap:6px;font-size:10px}.control-row input[type=range]{width:55%}.shortcuts{gap:12px;font-size:10px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto;transition:none!important}}
/* Performance controls */
.displays{height:191px}.transport{gap:4px}.sync-row{display:flex;gap:5px;margin-top:7px}.sync-row button{font:8px var(--mono);padding:5px 7px}.sync-row button[aria-pressed=true]{border-color:#5fb9e7;background:#214154;color:#b3e5ff}.beat-row{display:flex;align-items:center;gap:10px;margin-top:9px;font:9px var(--mono);color:#9daab4}.beat-row strong{font-size:12px;color:#e3ebf0}.beat-lights{display:flex;gap:4px}.beat-lights i{width:7px;height:7px;border:1px solid #57636b;background:#242e34;border-radius:2px}.beat-lights i.on{background:#9cddf4;border-color:#c8eeff;box-shadow:0 0 5px #64c0ff}.beat-lights i:first-child.on{background:#ffba66;border-color:#ffce92}.beat-row>span:last-child{margin-left:auto;font-size:8px}main{height:calc(100dvh - 313px)}.live-cross{display:flex;align-items:center;gap:12px;font:10px var(--mono);color:#a6b9c6}.live-cross input{width:180px}.grid-anchor{font-size:10px;padding:7px 10px;width:100%;margin-top:5px}.headphone-settings{margin-top:20px;padding:15px;background:#20262a;border:1px solid #384149;border-radius:8px}.headphone-settings h3{font-size:13px;margin:0 0 10px}.headphone-settings p{font-size:11px;line-height:1.6;color:#a8b6c0}.headphone-settings label{display:flex;align-items:center;gap:10px;font-size:11px;line-height:1.6;margin-top:14px}.headphone-settings button{font-size:11px}.source-link{position:fixed;left:10px;bottom:3px;font:7px var(--mono);color:#71818b;z-index:2}#help-dialog ol{padding-left:18px}@media(max-width:900px){.live-cross input{width:110px}.audio-status{display:none}footer{gap:15px}}@media(max-width:600px){.displays{height:190px}.sync-row{gap:3px}.sync-row button{font-size:7px;padding:5px}.beat-row{gap:6px}.beat-row>span:last-child{font-size:7px}main{height:calc(100dvh - 306px)}footer{padding:0 10px;gap:10px}.live-cross{gap:6px}.live-cross input{width:75px}.dock button{font-size:10px;padding:8px 6px}.dock{gap:2px}.source-link{font-size:6px}.headphone-settings label{font-size:10px}}

.playhead{background:#ffffffb3}.playhead::before{content:"";position:absolute;top:0;left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:8px solid #f3f3f3}

main{background:#080d15}#music-visual{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}.view-tools{display:flex;gap:8px;pointer-events:auto}.stage-top .view-tools button{pointer-events:auto}

/* ===== Texture pass: grano, metal cepillado, scanlines y paneles ===== */
:root{--noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");--brushed:repeating-linear-gradient(90deg,#ffffff05 0 1px,#0000 1px 3px,#00000012 3px 4px,#0000 4px 7px);--glass:linear-gradient(180deg,#ffffff0d,#ffffff00 40%)}
body::after{content:"";position:fixed;inset:0;z-index:9;pointer-events:none;background:var(--noise);opacity:.06;mix-blend-mode:overlay}
header{position:relative;background:var(--brushed),linear-gradient(#272b2f,#15181b);box-shadow:inset 0 1px 0 #ffffff14,0 6px 18px #0007;z-index:4}
header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,#0000,var(--a) 22%,#ffffff40 50%,var(--b) 78%,#0000);opacity:.55}
.logo{text-shadow:0 1px 0 #000,0 0 18px #6ad4ff22}.logo i{border-color:#6ad4ff66;color:var(--a);background:#6ad4ff12}
nav{display:flex;gap:8px;align-items:center}.nav-back{font-size:12px;color:#aab3b9;padding:9px 12px;border:1px solid transparent;border-radius:7px}.nav-back:hover{color:#fff;border-color:#3b4044;background:#ffffff08}
.nav-active{background:var(--glass),#2a2f34;box-shadow:inset 0 1px 0 #ffffff14,0 2px 6px #0006}
.local{font-size:10px}.local b{box-shadow:0 0 6px #79ad86;animation:pulse 2.4s ease-in-out infinite}@keyframes pulse{50%{opacity:.35}}
button{background:var(--glass),linear-gradient(#2a2f33,#1f2326);box-shadow:inset 0 1px 0 #ffffff12,0 1px 2px #0009;transition:background-color .15s,border-color .15s,color .15s}
button:hover{background:var(--glass),linear-gradient(#353b40,#262b2f);border-color:#4a5258}button:active{box-shadow:inset 0 2px 4px #000a;transform:translateY(.5px)}
.icon-btn,.load-title,.dock button{box-shadow:none;background:transparent}.icon-btn:hover{color:#fff;background:#ffffff0d}
.displays{height:202px;background:radial-gradient(#ffffff09 1px,#0000 1.2px) 0 0/14px 14px,linear-gradient(#171a1d,#0e1012);box-shadow:inset 0 8px 18px #0008}
.track{position:relative;padding:8px 11px;border:1px solid #ffffff0f;border-radius:9px;background:var(--glass),linear-gradient(160deg,#1d2125,#121518);box-shadow:inset 0 1px 0 #ffffff0d,0 8px 20px #0007;overflow:hidden}
.track::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(var(--a),#0000);opacity:.8}.track[data-deck="1"]::before{left:auto;right:0;background:linear-gradient(var(--b),#0000)}
.track-meta{margin:6px 0}.track-title .deck-badge{box-shadow:0 0 10px #6ad4ff33,inset 0 0 8px #6ad4ff1a;background:#0b1114}.deck-badge.b{box-shadow:0 0 10px #ffad5833,inset 0 0 8px #ffad581a}
.overview{background:repeating-linear-gradient(0deg,#ffffff04 0 1px,#0000 1px 3px),#06090a;box-shadow:inset 0 1px 4px #000,0 0 0 1px #ffffff0d}
.transport button{background:var(--glass),#1d2225}.transport .playing{box-shadow:0 0 10px #57ff8133,inset 0 0 8px #57ff811f}.transport .loop-active{box-shadow:0 0 10px #ffb85a33,inset 0 0 8px #ffb85a1f}
.sync-row button{font-size:9px}.sync-row button[aria-pressed=true]{box-shadow:0 0 12px #5fb9e744,inset 0 0 10px #5fb9e722}
.beat-row>span:last-child{font-size:9px}
.waveforms{border-color:#ffffff12;box-shadow:inset 0 0 30px #000,0 8px 20px #0007;background:radial-gradient(ellipse at 50% 50%,#0d151b,#05080a)}
.waveforms::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#0000 0 2px,#ffffff06 2px 3px),radial-gradient(ellipse at 50% 50%,#0000 60%,#000a);z-index:1}
.playhead{z-index:2;box-shadow:0 0 8px #ffffff80}.wave-empty{z-index:2;text-shadow:0 0 14px #6ad4ff55}
main{background:radial-gradient(ellipse 70% 55% at 50% 100%,#1b2a3d 0,#0b1220 45%,#06090f 100%)}
main::before{content:"";position:absolute;left:-25%;right:-25%;bottom:-8%;height:62%;z-index:0;pointer-events:none;background:linear-gradient(#6ad4ff12 1px,#0000 1px) 0 0/100% 34px,linear-gradient(90deg,#6ad4ff12 1px,#0000 1px) 0 0/48px 100%;transform:perspective(420px) rotateX(62deg);transform-origin:50% 100%;-webkit-mask-image:linear-gradient(#0000,#000 70%);mask-image:linear-gradient(#0000,#000 70%)}
main::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 50% 55%,#0000 45%,#000b 100%)}
.stage-top span{font-size:9px;color:#8a949b}h1{text-shadow:0 0 16px #6ad4ff33}
.quiet-btn{backdrop-filter:blur(6px);background:var(--glass),#13171aa8}
.stage-hint{color:#9fb0bb;transition:color .15s;letter-spacing:.3px}.stage-hint.active{color:#e8f6ff;font:600 11px var(--mono);letter-spacing:1.5px;text-shadow:0 0 12px #6ad4ff88}
footer{background:var(--brushed),linear-gradient(#15181b,#0d0f11);box-shadow:inset 0 1px 0 #ffffff0d;z-index:4}
footer::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,#0000,#6ad4ff55,#ffffff22,#ffad5855,#0000)}
.dock{background:var(--glass),linear-gradient(#262c30,#16191c);border-color:#ffffff1a;box-shadow:inset 0 1px 0 #ffffff17,0 10px 28px #000a,0 0 0 1px #000}
.audio-status{font-size:10px}.source-link{font-size:9px;color:#7c8a93}
dialog{background:var(--glass),linear-gradient(170deg,#1c2125,#121518);border-color:#ffffff1c;box-shadow:0 30px 120px #000c,inset 0 1px 0 #ffffff12}
dialog::before{content:"";position:absolute;left:24px;right:24px;top:0;height:1px;background:linear-gradient(90deg,#0000,var(--a),var(--b),#0000);opacity:.6}
.mixer-channel,.headphone-settings{background:var(--glass),linear-gradient(#20262a,#191d20);box-shadow:inset 0 1px 0 #ffffff0d}
.art{background:repeating-linear-gradient(45deg,#ffffff0d 0 2px,#0000 2px 6px),linear-gradient(135deg,#926047,#34211b)!important;box-shadow:inset 0 0 0 1px #ffffff1a}
.song-row:nth-child(2n) .art{background:repeating-linear-gradient(45deg,#ffffff0d 0 2px,#0000 2px 6px),linear-gradient(135deg,#35687a,#172d38)!important}
.song-row:hover{background:#ffffff05}
#toast{box-shadow:0 10px 25px #0006,0 0 0 1px #ffffff40}
main{height:calc(100dvh - 324px)}
@media(max-width:900px){.nav-back{padding:8px}}
.quiet-btn{white-space:nowrap}@media(max-width:600px){nav{display:none}.stage-top span{display:none}.displays{height:204px;gap:8px;padding:8px}.track{padding:6px 7px}.sync-row button{font-size:8px;padding:5px 4px}.beat-row>span:last-child{font-size:8px}main{height:calc(100dvh - 320px)}.local{display:none}.source-link{font-size:8px}}
@media(prefers-reduced-motion:reduce){.local b{animation:none}}

/* Selector de controladora */
.desk-switch{display:inline-flex;gap:2px;margin-top:10px;padding:3px;border:1px solid #ffffff1a;border-radius:9px;background:#0b0e12b3;backdrop-filter:blur(6px);pointer-events:auto}
.desk-switch button{white-space:nowrap;border:0;background:transparent;box-shadow:none;padding:6px 12px;font:600 10px var(--mono);letter-spacing:1px;color:#9aa6ad;border-radius:6px}
.desk-switch button:hover{color:#fff;background:#ffffff0d}
.desk-switch button[aria-pressed=true]{color:#06131a;background:linear-gradient(90deg,var(--a),#a9e8ff);box-shadow:0 0 14px #6ad4ff55}
.stage-top>div:first-child{display:flex;flex-direction:column;align-items:flex-start}
@media(max-width:600px){.desk-switch{margin-top:6px}.desk-switch button{padding:6px 9px;font-size:9px}.stage-top{align-items:flex-start}}