:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#09090b;--panel:#17171b;--panel-raised:#1e1e23;--panel-recessed:#101013;--groove:#0a0a0c;--hairline:#ffffff12;--hairline-strong:#ffffff24;--screw:#2a2a30;--text:#e9e8ec;--text-dim:#8b8a94;--text-faint:#57565f;--deck-a:#35b8ff;--deck-a-dim:#35b8ff29;--deck-a-glow:#35b8ff8c;--deck-b:#ff4d5e;--deck-b-dim:#ff4d5e29;--deck-b-glow:#ff4d5e8c;--led-amber:#ffb020;--ok:#35e08a;--warn:#ffcc40;--danger:#ff4d5e;--font-display:"Oxanium", ui-sans-serif, sans-serif;--font-label:"Barlow Semi Condensed", ui-sans-serif, sans-serif;--font-body:"Barlow", ui-sans-serif, sans-serif;--font-mono:"Share Tech Mono", ui-monospace, monospace;--radius-sm:4px;--radius-md:8px;--radius-lg:14px;--shadow-panel:0 1px 0 #ffffff0a inset, 0 20px 40px -20px #000000b3, 0 1px 3px #0009;--shadow-recessed:inset 0 2px 6px #000000bf, inset 0 -1px 0 #ffffff08}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);margin:0;padding:0}body{font-family:var(--font-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-image:radial-gradient(120% 80% at 50% -10%,#35b8ff0d,#0000 60%),radial-gradient(120% 80% at 50% 110%,#ff4d5e0a,#0000 60%);background-attachment:fixed;overflow-x:hidden}button{color:inherit;font-family:inherit}.brushed{background-image:linear-gradient(180deg, var(--panel), var(--panel) 100%), repeating-linear-gradient(180deg, #ffffff04 0px, #ffffff04 1px, transparent 1px, transparent 3px);background-blend-mode:normal}.screw{background:radial-gradient(circle at 35% 30%, #4a4a52, var(--screw) 60%, #0f0f11 100%);border-radius:50%;width:7px;height:7px;position:relative;box-shadow:0 1px 1px #0009,0 0 0 1px #0006}.screw:after{content:"";background:#0000008c;height:1px;position:absolute;top:50%;left:15%;right:15%;transform:translateY(-50%)rotate(35deg)}::selection{background:var(--deck-a-dim)}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--panel-recessed)}::-webkit-scrollbar-thumb{border:2px solid var(--panel-recessed);background:#333338;border-radius:6px}.play-button{width:52px;height:52px;color:var(--text-dim);cursor:pointer;background:radial-gradient(circle at 35% 30%,#2c2c31,#1a1a1d 70%);border:none;border-radius:50%;justify-content:center;align-items:center;transition:color .15s,box-shadow .15s;display:flex;box-shadow:0 2px 4px #0009,inset 0 1px #ffffff0f,inset 0 -4px 8px #0006}.play-button:hover:not(:disabled){color:var(--text)}.play-button:disabled{cursor:not-allowed;opacity:.4}.play-button[data-playing=true][data-deck=A]{color:var(--deck-a);box-shadow:0 0 12px var(--deck-a-glow), 0 1px 0 #ffffff14 inset, 0 -4px 8px #0006 inset}.play-button[data-playing=true][data-deck=B]{color:var(--deck-b);box-shadow:0 0 12px var(--deck-b-glow), 0 1px 0 #ffffff14 inset, 0 -4px 8px #0006 inset}@media (width<=640px){.play-button{width:64px;height:64px}.play-button svg{width:26px;height:26px}}.cue-button{border-radius:var(--radius-sm);width:52px;color:var(--text-dim);cursor:pointer;background:linear-gradient(#2c2c31,#1a1a1d 70%);border:none;justify-content:center;align-items:center;gap:4px;padding:6px 0;transition:transform 60ms,color .15s,box-shadow .15s;display:flex;box-shadow:0 2px 4px #0009,inset 0 1px #ffffff0f,inset 0 -3px 6px #00000059}.cue-button span{font-family:var(--font-label);letter-spacing:1px;font-size:9px;font-weight:600}.cue-button:hover:not(:disabled){color:var(--text)}.cue-button:active:not(:disabled){transform:scale(.94)}.cue-button:disabled{cursor:not-allowed;opacity:.4}.cue-button[data-deck=A]:active:not(:disabled){color:var(--deck-a);box-shadow:0 0 8px var(--deck-a-glow), 0 1px 0 #ffffff0f inset}.cue-button[data-deck=B]:active:not(:disabled){color:var(--deck-b);box-shadow:0 0 8px var(--deck-b-glow), 0 1px 0 #ffffff0f inset}@media (width<=640px){.cue-button{gap:6px;width:64px;padding:9px 0}.cue-button svg{width:20px;height:20px}.cue-button span{font-size:11px}}.platter{flex-direction:column;align-items:center;gap:12px;display:flex}.platter__disc{background:repeating-radial-gradient(circle,#1c1c1f 0 2px,#131315 3px 4px);border-radius:50%;width:148px;height:148px;animation:2.4s linear infinite paused spin;position:relative;box-shadow:0 10px 24px #0009,0 0 0 1px #00000080,inset 0 0 20px #00000080}.platter__disc[data-spinning=true]{animation-play-state:running}.platter__grooves{background:radial-gradient(circle at 32% 28%,#ffffff0f,#0000 45%);border-radius:50%;position:absolute;inset:6px}.platter__label{background:radial-gradient(circle at 35% 30%, var(--panel-raised), var(--panel-recessed) 75%);border-radius:50%;justify-content:center;align-items:center;width:52px;height:52px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #0009,inset 0 1px 2px #0009}.platter__label-deck{font-family:var(--font-display);font-size:18px;font-weight:700}[data-deck=A] .platter__label-deck{color:var(--deck-a)}[data-deck=B] .platter__label-deck{color:var(--deck-b)}.platter__track-name{font-family:var(--font-label);letter-spacing:.4px;color:var(--text-dim);text-transform:uppercase;white-space:nowrap;text-overflow:ellipsis;text-align:center;max-width:180px;font-size:12px;overflow:hidden}.platter__time{align-items:center;gap:8px;width:100%;max-width:200px;display:flex}.platter__time-current,.platter__time-total{font-family:var(--font-mono);color:var(--text-faint);min-width:30px;font-size:11px}.platter__time-current{color:var(--led-amber);text-align:right}.platter__time-total{text-align:left}.platter__time-bar{background:var(--groove);border-radius:2px;flex:1;height:3px;overflow:hidden}.platter__time-bar-fill{background:var(--text-faint);height:100%;transition:width .15s linear}[data-deck=A] .platter__time-bar-fill{background:var(--deck-a)}[data-deck=B] .platter__time-bar-fill{background:var(--deck-b)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (width<=640px){.platter{gap:6px}.platter__disc{width:76px;height:76px}.platter__label{width:28px;height:28px}.platter__label-deck{font-size:10px}.platter__track-name{max-width:140px;font-size:9.5px}.platter__time{gap:5px;max-width:140px}.platter__time-current,.platter__time-total{min-width:22px;font-size:9px}}.pitch-fader{-webkit-user-select:none;user-select:none;touch-action:none;align-items:center;gap:10px;display:flex}.pitch-fader__ticks{pointer-events:none;flex-direction:column;justify-content:space-between;height:236px;padding:4px 0;display:flex}.pitch-fader__tick{align-items:center;gap:6px;height:1px;display:flex}.pitch-fader__tick-mark{background:var(--hairline-strong);width:8px;height:1px}.pitch-fader__tick[data-zero=true] .pitch-fader__tick-mark{background:var(--text-dim);width:12px}.pitch-fader__tick-label{font-family:var(--font-mono);color:var(--text-faint);min-width:20px;font-size:10px}.pitch-fader__tick[data-zero=true] .pitch-fader__tick-label{color:var(--text-dim)}.pitch-fader__track{border-radius:var(--radius-md);background:linear-gradient(180deg, var(--panel-recessed), #0c0c0e);width:58px;height:244px;box-shadow:var(--shadow-recessed);cursor:grab;padding:4px 0;position:relative}.pitch-fader__groove{background:var(--groove);border-radius:3px;width:6px;position:absolute;top:8px;bottom:8px;left:50%;transform:translate(-50%);box-shadow:inset 0 1px 3px #000000e6,0 1px #ffffff08}.pitch-fader__center-line{background:var(--hairline-strong);height:1px;position:absolute;top:50%;left:10px;right:10px;transform:translateY(-50%)}.pitch-fader__cap{border-radius:var(--radius-sm);cursor:grab;background:linear-gradient(#3a3a41 0%,#232327 45%,#1a1a1d 100%);outline:none;width:52px;height:26px;position:absolute;left:50%;transform:translate(-50%,-50%);box-shadow:0 3px 6px #0009,inset 0 1px #ffffff14,inset 0 -6px 10px #00000059}.pitch-fader__cap:active{cursor:grabbing}.pitch-fader__cap:focus-visible{box-shadow:0 0 0 2px var(--deck-a-glow), 0 3px 6px #0009}[data-deck=B] .pitch-fader__cap:focus-visible{box-shadow:0 0 0 2px var(--deck-b-glow), 0 3px 6px #0009}.pitch-fader__cap-grip{background:repeating-linear-gradient(#ffffff59 0 1px,#0000 1px 4px);width:30px;height:2px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}[data-deck=A] .pitch-fader__cap:before{content:"";border-radius:var(--radius-sm);box-shadow:0 0 0 1px var(--deck-a-dim);pointer-events:none;position:absolute;inset:0}[data-deck=B] .pitch-fader__cap:before{content:"";border-radius:var(--radius-sm);box-shadow:0 0 0 1px var(--deck-b-dim);pointer-events:none;position:absolute;inset:0}.pitch-fader__readout{font-family:var(--font-mono);color:var(--led-amber);text-shadow:0 0 8px #ffb02073;text-align:center;writing-mode:vertical-rl;letter-spacing:1px;pointer-events:none;min-width:56px;font-size:15px}@media (width<=640px){.pitch-fader{flex:1;align-items:stretch;gap:6px;min-height:0}.pitch-fader__ticks{height:100%;padding:8px 0}.pitch-fader__tick{gap:5px}.pitch-fader__tick-mark{width:8px}.pitch-fader__tick[data-zero=true] .pitch-fader__tick-mark{width:13px}.pitch-fader__tick-label{min-width:18px;font-size:10.5px}.pitch-fader__track{width:58px;height:100%}.pitch-fader__cap{width:52px;height:30px}.pitch-fader__cap-grip{width:30px}.pitch-fader__readout{letter-spacing:.5px;min-width:34px;font-size:15px}}.range-toggle{border-radius:var(--radius-sm);background:var(--panel-recessed);box-shadow:var(--shadow-recessed);gap:2px;padding:2px;display:inline-flex}.range-toggle__option{color:var(--text-faint);font-family:var(--font-mono);letter-spacing:.5px;cursor:pointer;background:0 0;border:none;border-radius:3px;padding:4px 9px;font-size:11px;transition:background .15s,color .15s}.range-toggle__option:hover{color:var(--text-dim)}.range-toggle__option[data-active=true]{background:var(--panel-raised);color:var(--led-amber);box-shadow:inset 0 1px #ffffff0f,0 1px 2px #00000080}@media (width<=640px){.range-toggle__option{padding:3px 6px;font-size:9px}}.bpm-control{border-radius:var(--radius-md);background:var(--panel-recessed);box-shadow:var(--shadow-recessed);flex-direction:column;align-items:center;gap:6px;width:128px;padding:10px 12px;display:flex}.bpm-control__row{align-items:baseline;gap:5px;display:flex}.bpm-control__input{width:72px;font-family:var(--font-mono);text-align:right;color:var(--led-amber);text-shadow:0 0 8px #ffb02073;-moz-appearance:textfield;background:0 0;border:none;outline:none;font-size:26px}.bpm-control__input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.bpm-control__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.bpm-control__input::placeholder{color:#ffb02040}.bpm-control__unit{font-family:var(--font-label);color:var(--text-faint);letter-spacing:.5px;font-size:11px}.bpm-control__tap{border-radius:var(--radius-sm);border:1px solid var(--hairline-strong);background:var(--panel-raised);width:100%;color:var(--text-dim);font-family:var(--font-label);letter-spacing:1.5px;cursor:pointer;padding:6px 0;font-size:11px;transition:transform 60ms,color .15s,border-color .15s}[data-deck=A] .bpm-control__tap:active{color:var(--deck-a);border-color:var(--deck-a);transform:scale(.96)}[data-deck=B] .bpm-control__tap:active{color:var(--deck-b);border-color:var(--deck-b);transform:scale(.96)}.bpm-control__effective{font-family:var(--font-mono);color:var(--text-faint);font-size:11px}@media (width<=640px){.bpm-control{gap:4px;width:92px;padding:6px 8px}.bpm-control__input{width:48px;font-size:16px}.bpm-control__unit{font-size:9px}.bpm-control__tap{letter-spacing:1px;padding:4px 0;font-size:9px}.bpm-control__effective{font-size:9px}}.deck{border-radius:var(--radius-lg);background:var(--panel);box-shadow:var(--shadow-panel);flex-direction:column;flex:1;align-items:center;gap:20px;min-width:260px;padding:20px 22px 26px;display:flex;position:relative}.deck:before{content:"";border-radius:var(--radius-lg);box-shadow:0 0 0 1px var(--hairline);pointer-events:none;position:absolute;inset:0}.deck__header{justify-content:space-between;align-items:center;width:100%;display:flex}.deck__id{font-family:var(--font-display);letter-spacing:2px;color:var(--text-faint);font-size:13px;font-weight:700}[data-deck=A] .deck__id{color:var(--deck-a)}[data-deck=B] .deck__id{color:var(--deck-b)}.deck__screws{gap:8px;display:flex}.deck__transport{align-items:center;gap:16px;display:flex}.deck__buttons{flex-direction:column;align-items:center;gap:8px;display:flex}.deck__pitch-section{flex-direction:column;align-items:center;gap:12px;padding-top:4px;display:flex}@media (width<=640px){.deck{gap:10px;width:100%;min-width:0;height:100%;min-height:0;padding:10px 8px 12px}.deck__transport{gap:10px}.deck__buttons{gap:6px}.deck__pitch-section{flex:1;gap:8px;min-height:0}}.upload-dropzone{border-radius:var(--radius-md);border:1.5px dashed var(--hairline-strong);color:var(--text-faint);cursor:pointer;justify-content:center;align-items:center;gap:10px;padding:16px;transition:border-color .15s,color .15s,background .15s;display:flex}.upload-dropzone:hover,.upload-dropzone:focus-visible{border-color:var(--deck-a);color:var(--text-dim);background:var(--deck-a-dim);outline:none}.upload-dropzone[data-dragging=true]{border-color:var(--deck-a);color:var(--text);background:var(--deck-a-dim)}.upload-dropzone__icon{font-family:var(--font-display);font-size:18px;line-height:1}.upload-dropzone__text{font-family:var(--font-label);letter-spacing:.3px;font-size:13px}.search-bar{border-radius:var(--radius-md);background:var(--panel-recessed);box-shadow:var(--shadow-recessed);align-items:center;gap:8px;padding:8px 12px;display:flex}.search-bar__icon{color:var(--text-faint);font-size:13px}.search-bar__input{color:var(--text);font-size:13px;font-family:var(--font-body);background:0 0;border:none;outline:none;flex:1}.search-bar__input::placeholder{color:var(--text-faint)}.track-row{border-radius:var(--radius-sm);align-items:center;gap:12px;padding:9px 10px;transition:background .12s;display:flex}.track-row:hover{background:var(--panel-raised)}.track-row__favorite{color:var(--text-faint);cursor:pointer;background:0 0;border:none;padding:2px;font-size:15px;line-height:1}.track-row__favorite[data-active=true]{color:var(--led-amber)}.track-row__info{flex-direction:column;flex:1;min-width:0;display:flex}.track-row__name{color:var(--text);white-space:nowrap;text-overflow:ellipsis;font-size:13.5px;overflow:hidden}.track-row__meta{font-family:var(--font-mono);color:var(--text-faint);font-size:10.5px}.track-row__actions{align-items:center;gap:6px;display:flex}.track-row__deck-btn{font-family:var(--font-mono);border:1px solid var(--hairline-strong);color:var(--text-faint);cursor:pointer;background:0 0;border-radius:3px;padding:4px 7px;font-size:10.5px;transition:color .12s,border-color .12s}.track-row__deck-btn[data-deck=A]:hover{color:var(--deck-a);border-color:var(--deck-a)}.track-row__deck-btn[data-deck=B]:hover{color:var(--deck-b);border-color:var(--deck-b)}.track-row__delete{color:var(--text-faint);cursor:pointer;background:0 0;border:none;padding:2px 4px;font-size:11px}.track-row__delete:hover{color:var(--danger)}.library-panel{flex-direction:column;gap:10px;height:100%;min-height:0;display:flex}.library-panel__list{flex-direction:column;flex:1;gap:2px;padding-right:2px;display:flex;overflow-y:auto}.library-panel__empty{text-align:center;color:var(--text-faint);font-size:12.5px;font-family:var(--font-label);padding:24px 8px}.new-playlist-trigger{border-radius:var(--radius-md);border:1.5px dashed var(--hairline-strong);width:100%;color:var(--text-faint);font-family:var(--font-label);cursor:pointer;background:0 0;padding:9px;font-size:12.5px;transition:border-color .15s,color .15s}.new-playlist-trigger:hover{border-color:var(--deck-a);color:var(--text-dim)}.new-playlist-form{gap:6px;display:flex}.new-playlist-form__input{border-radius:var(--radius-sm);border:1px solid var(--hairline-strong);background:var(--panel-recessed);color:var(--text);outline:none;flex:1;padding:8px 10px;font-size:12.5px}.new-playlist-form__input:focus{border-color:var(--deck-a)}.new-playlist-form__confirm{border-radius:var(--radius-sm);background:var(--panel-raised);color:var(--led-amber);font-family:var(--font-label);cursor:pointer;border:none;padding:8px 12px;font-size:12px}.playlist-list{flex-direction:column;gap:6px;display:flex}.playlist-list__empty{color:var(--text-faint);font-size:12px;font-family:var(--font-label);padding:12px 4px}.playlist-list__item{border-radius:var(--radius-sm);cursor:pointer;align-items:center;gap:8px;padding:9px 10px;transition:background .12s;display:flex}.playlist-list__item:hover{background:var(--panel-raised)}.playlist-list__item[data-active=true]{background:var(--deck-a-dim)}.playlist-list__favorite{color:var(--text-faint);cursor:pointer;background:0 0;border:none;padding:0;font-size:13px}.playlist-list__favorite[data-active=true]{color:var(--led-amber)}.playlist-list__name{color:var(--text);white-space:nowrap;text-overflow:ellipsis;flex:1;font-size:13px;overflow:hidden}.playlist-list__count{font-family:var(--font-mono);color:var(--text-faint);font-size:11px}.playlist-list__delete{color:var(--text-faint);cursor:pointer;opacity:0;background:0 0;border:none;font-size:11px;transition:opacity .12s}.playlist-list__item:hover .playlist-list__delete{opacity:1}.playlist-list__delete:hover{color:var(--danger)}.playlist-detail{flex-direction:column;flex:1;gap:10px;min-height:0;display:flex}.playlist-detail__header{justify-content:space-between;align-items:center;display:flex}.playlist-detail__name{font-family:var(--font-display);color:var(--text);font-size:14px;font-weight:700}.playlist-detail__add-toggle{border:1px solid var(--hairline-strong);border-radius:var(--radius-sm);color:var(--text-dim);cursor:pointer;font-size:11.5px;font-family:var(--font-label);background:0 0;padding:5px 9px}.playlist-detail__add-toggle:hover{border-color:var(--deck-a);color:var(--deck-a)}.playlist-detail__add-list{border-radius:var(--radius-md);background:var(--panel-recessed);flex-direction:column;gap:2px;max-height:160px;padding:6px;display:flex;overflow-y:auto}.playlist-detail__add-item{color:var(--text-dim);cursor:pointer;text-align:left;background:0 0;border:none;border-radius:4px;justify-content:space-between;align-items:center;padding:7px 8px;font-size:12.5px;display:flex}.playlist-detail__add-item:hover{background:var(--panel-raised);color:var(--text)}.playlist-detail__add-plus{color:var(--deck-a);font-family:var(--font-mono)}.playlist-detail__list{flex-direction:column;flex:1;gap:2px;display:flex;overflow-y:auto}.playlist-detail__empty{color:var(--text-faint);font-size:12.5px;font-family:var(--font-label);text-align:center;padding:16px 8px}.playlist-detail__remove{color:var(--text-faint);cursor:pointer;background:0 0;border:none;font-size:15px;line-height:1}.playlist-detail__remove:hover{color:var(--danger)}.app{flex-direction:column;min-height:100svh;display:flex}.app__header{border-bottom:1px solid var(--hairline);align-items:baseline;gap:12px;padding:18px 28px;display:flex}.app__logo{font-family:var(--font-display);letter-spacing:3px;background:linear-gradient(90deg, var(--deck-a), var(--deck-b));color:#0000;-webkit-background-clip:text;background-clip:text;font-size:17px;font-weight:800}.app__tagline{font-family:var(--font-label);letter-spacing:1.5px;text-transform:uppercase;color:var(--text-faint);font-size:11px}.app__main{flex:1;gap:20px;min-height:0;padding:24px 28px 32px;display:flex}.app__mixer{flex:1;grid-template-columns:minmax(0,1fr) minmax(0,1fr);justify-content:center;align-items:start;gap:24px;display:grid}.app__mixer>.deck[data-deck=A]{justify-self:end}.app__mixer>.deck[data-deck=B]{justify-self:start}.app__sidebar{border-radius:var(--radius-lg);background:var(--panel);width:340px;box-shadow:var(--shadow-panel);flex-direction:column;flex-shrink:0;gap:14px;min-height:0;max-height:calc(100svh - 130px);padding:18px;display:flex}.app__tabs{border-radius:var(--radius-md);background:var(--panel-recessed);box-shadow:var(--shadow-recessed);gap:4px;padding:3px;display:flex}.app__tabs button{color:var(--text-faint);font-family:var(--font-label);letter-spacing:.4px;cursor:pointer;background:0 0;border:none;border-radius:5px;flex:1;padding:7px 0;font-size:12px;transition:background .15s,color .15s}.app__tabs button[data-active=true]{background:var(--panel-raised);color:var(--text)}.app__sidebar-body{flex-direction:column;flex:1;min-height:0;display:flex}.app__playlists{flex-direction:column;flex:1;gap:14px;min-height:0;display:flex}@media (width<=900px){.app__main{flex-direction:column}.app__sidebar{width:auto;max-height:420px}}@media (width<=640px){.app__header{min-height:50px;padding:10px 14px}.app__main{gap:14px;padding:8px 8px 14px}.app__mixer{grid-template-rows:minmax(0,1fr);align-items:stretch;gap:6px;min-height:calc(100svh - 90px)}.app__mixer>.deck[data-deck=A],.app__mixer>.deck[data-deck=B]{justify-self:stretch}.app__sidebar{max-height:65svh;padding:12px}}