:root{color:#f4f5f7;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#0f1012;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:16px;line-height:1.45}*{box-sizing:border-box}html{background:#0f1012}body{background:#0f1012;min-width:320px;min-height:100svh;margin:0}button,input{letter-spacing:0}button{-webkit-tap-highlight-color:transparent}#root{min-height:100svh}.dj-app{color:#f4f5f7;background:#0f1012;min-height:100svh}.dj-app button,.dj-app input{font:inherit}.dj-app button{color:inherit}.media-deck{opacity:0;pointer-events:none;width:1px;height:1px;position:fixed;top:0;left:-10px}.mix-stage{z-index:5;background:linear-gradient(#ffffff09,#0000 54%),#111214;border-bottom:1px solid #26282d;min-height:344px;padding:8px 0 64px;position:sticky;top:0;overflow:hidden}.stage-backdrop{pointer-events:none;opacity:.52;position:absolute;inset:0}.cover-left,.cover-right{aspect-ratio:1;background:linear-gradient(135deg, color-mix(in srgb, var(--track-accent) 56%, #111 44%), var(--track-secondary)), #17191d;border-radius:4px;width:120px;position:absolute;top:18px;overflow:hidden;box-shadow:0 18px 34px #00000047}.cover-left{left:max(24px,50% - 360px);transform:rotate(-1deg)}.cover-right{right:max(42px,50% - 410px);transform:rotate(1.5deg)}.cover-left video,.cover-right video,.deck-art video,.release-cover video,.row-art video{object-fit:cover;opacity:.7;width:100%;height:100%;position:absolute;inset:0}.cover-left span,.cover-right span{color:#ffffffb3;text-transform:uppercase;font-size:13px;font-weight:800;position:absolute;inset:auto 10px 8px}.close-button{z-index:2;color:#9da2ad;cursor:pointer;background:0 0;border:0;place-items:center;width:34px;height:34px;display:inline-grid;position:absolute;top:14px;right:18px}.close-button svg{width:20px;height:20px;transform:rotate(45deg)}.now-playing-panel{z-index:1;background:#232428eb;border-radius:6px;grid-template-columns:124px minmax(0,1fr);gap:14px;width:min(760px,100% - 42px);min-height:132px;margin:0 auto;padding:8px;display:grid;position:relative;box-shadow:0 20px 44px #00000040}.deck-art{aspect-ratio:1;background:linear-gradient(135deg, color-mix(in srgb, var(--track-accent) 48%, #0e0f12 52%), var(--track-secondary)), #17191d;border-radius:3px;place-items:center;min-width:0;display:grid;position:relative;overflow:hidden}.deck-art:after,.release-cover:after,.row-art:after{content:"";background:linear-gradient(#0000,#0000006b);position:absolute;inset:0}.deck-art strong{z-index:1;color:#fff;text-transform:uppercase;max-width:88%;font-size:clamp(.9rem,1.7vw,1.4rem);line-height:1;position:relative}.track-readout{flex-direction:column;justify-content:space-between;min-width:0;padding:8px 4px 8px 0;display:flex}.track-meta-line{grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:16px;display:grid}.track-meta-line h1{color:#fff;text-align:left;text-overflow:ellipsis;white-space:nowrap;margin:0;font-size:clamp(.9rem,1.8vw,1rem);font-weight:800;line-height:1.25;overflow:hidden}.track-meta-line p{color:#a8adb7;text-align:left;text-overflow:ellipsis;white-space:nowrap;margin:4px 0 0;font-size:.72rem;line-height:1.35;overflow:hidden}.time-stack{color:#f7f8fb;white-space:nowrap;justify-items:end;gap:3px;font-size:.86rem;line-height:1.2;display:grid}.time-stack span{color:#8c919c;font-size:.72rem}.main-waveform{grid-auto-columns:1fr;grid-auto-flow:column;align-items:center;gap:2px;height:58px;display:grid;position:relative;overflow:hidden}.main-waveform span{height:var(--bar-height);background:#ffffff29;border-radius:1px;min-height:5px;transition:background .16s;display:block}.main-waveform span.is-played{background:var(--track-accent)}.mix-window{z-index:1;background:#b667ff;width:2px;position:absolute;top:0;bottom:0;box-shadow:0 0 0 1px #b667ff38}.mix-radar{z-index:1;background:#121418e6;border:1px solid #2c3038;border-radius:6px;gap:9px;width:min(920px,100% - 42px);margin:8px auto 0;padding:10px 12px;display:grid;position:relative;box-shadow:0 16px 34px #00000038}.radar-head,.radar-metrics,.radar-title,.radar-clock,.radar-recommendation,.radar-fx-chain,.radar-fx{align-items:center;display:flex}.radar-head{justify-content:space-between;gap:14px}.radar-title{gap:9px;min-width:0}.radar-title svg,.radar-clock svg{width:17px;height:17px;color:var(--track-accent);flex:none}.radar-title span,.radar-meter span,.radar-recommendation span,.radar-clock span{color:#9ea5b2;font-size:.66rem;line-height:1.1}.radar-title strong,.radar-recommendation strong{color:#fff;text-overflow:ellipsis;white-space:nowrap;font-size:.78rem;line-height:1.25;display:block;overflow:hidden}.radar-clock{background:#1d2026;border:1px solid #333842;border-radius:16px;flex:none;gap:7px;padding:6px 9px}.radar-clock strong{color:#fff;font-size:.78rem;line-height:1}.radar-wave{background:#171a1f;border-radius:4px;grid-auto-columns:1fr;grid-auto-flow:column;align-items:center;gap:2px;height:32px;display:grid;position:relative;overflow:hidden}.radar-wave span{height:var(--bar-height);background:#ffffff21;border-radius:1px;min-height:4px;display:block}.radar-wave span.is-played{background:color-mix(in srgb, var(--track-accent) 72%, #fff 28%)}.radar-mix-zone{inset:0 0 0 var(--left);z-index:1;background:linear-gradient(90deg,#b667ff2e,#47e88314);border-left:2px solid #b667ff;position:absolute}.radar-playhead{top:0;bottom:0;left:var(--left);z-index:2;background:#f7f8fb;width:2px;position:absolute;box-shadow:0 0 10px #ffffff38}.radar-metrics{grid-template-columns:minmax(120px,.8fr) minmax(120px,.8fr) minmax(180px,1.2fr);align-items:stretch;gap:10px;display:grid}.radar-meter,.radar-recommendation{background:#20232a;border-radius:4px;min-width:0}.radar-meter{gap:5px;padding:8px;display:grid}.radar-meter strong{color:#fff;justify-content:space-between;align-items:baseline;gap:8px;font-size:.86rem;line-height:1;display:flex}.radar-meter small,.radar-recommendation small{color:#aab1bd;flex:none;font-size:.64rem;line-height:1.1}.radar-meter-bar{background:#343944;border-radius:6px;height:5px;overflow:hidden}.radar-meter-bar i{width:var(--meter-value);border-radius:inherit;background:linear-gradient(90deg, #2f7cff, var(--track-accent));height:100%;display:block}.radar-recommendation{gap:9px;padding:8px}.radar-recommendation svg{width:17px;height:17px;color:var(--track-accent);flex:none}.radar-recommendation div{flex:auto;min-width:0}.radar-fx-chain{gap:7px;overflow-x:auto}.radar-fx{color:#aab1bd;background:#1c1f25;border:1px solid #343944;border-radius:14px;flex:none;gap:6px;min-height:24px;padding:0 8px;font-size:.66rem}.radar-fx svg{width:13px;height:13px}.radar-fx.is-on{border-color:color-mix(in srgb, var(--track-accent) 56%, #fff 8%);background:color-mix(in srgb, var(--track-accent) 15%, #1c1f25 85%);color:#fff}.stage-progress{background:#282a2f;border-radius:3px;height:3px;position:absolute;bottom:57px;left:18px;right:76px;overflow:visible}.stage-progress-fill{border-radius:inherit;background:linear-gradient(90deg, #b667ff, var(--track-accent));height:100%}.automix-marker{background:#5d6370;border-radius:2px;width:2px;height:11px;position:absolute;top:-4px}.automix-marker.is-on{background:#b667ff}.transport-bar{background:#121316f0;border-top:1px solid #25272d;grid-template-columns:minmax(180px,1fr) auto minmax(180px,1fr);align-items:center;gap:16px;min-height:54px;padding:0 18px;display:grid;position:absolute;bottom:0;left:0;right:0}.playlist-title,.transport-controls,.tempo-pill,.nav-left,.artist-line,.tabs,.section-heading,.engine-state,.control-slider span,.setting-button,.next-card{align-items:center;display:flex}.playlist-title{color:#fff;gap:8px;min-width:0;font-size:.92rem}.playlist-title svg{color:#b667ff;width:17px;height:17px}.playlist-title strong{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.transport-controls{justify-content:center;gap:9px}.icon-button,.nav-icon,.play-button{cursor:pointer;background:0 0;border:0;flex:none;place-items:center;display:inline-grid}.icon-button{color:#aeb3be;width:28px;height:28px}.icon-button svg,.nav-icon svg{width:17px;height:17px}.play-button{background:var(--track-accent);color:#101214;border-radius:50%;width:38px;height:38px;box-shadow:0 0 0 5px #47e8830f}.play-button svg{fill:currentColor;width:21px;height:21px}.tempo-pill{color:#c7ccd6;border:1px solid #2b2e34;border-radius:18px;justify-content:center;justify-self:end;gap:8px;min-width:156px;padding:8px 12px;font-size:.72rem}.tempo-pill strong{color:#fff}.library-shell{background:#222326}.top-nav{background:#17181b;border-bottom:1px solid #303239;grid-template-columns:minmax(0,1fr) minmax(220px,310px);align-items:center;gap:18px;min-height:36px;padding:0 10px;display:grid}.nav-left{gap:20px;min-width:0}.nav-icon{color:#a4a9b3;width:24px;height:24px}.nav-left a{color:#a6acb8;font-size:.76rem;text-decoration:none}.nav-left a:hover,.icon-button:hover,.nav-icon:hover{color:#fff}.search-box{color:#9298a3;background:#2b2d31;border-radius:6px;grid-template-columns:18px minmax(0,1fr);align-items:center;gap:8px;height:28px;padding:0 10px;display:grid}.search-box svg{width:15px;height:15px}.search-box input{color:#f8f9fb;background:0 0;border:0;outline:0;width:100%;min-width:0;font-size:.78rem}.artist-header{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:16px 10px 18px;display:grid}.artist-avatar{background:linear-gradient(135deg, color-mix(in srgb, var(--track-accent) 42%, #222 58%), var(--track-secondary)), #2d3036;color:#fff;border-radius:50%;place-items:center;width:58px;height:58px;display:grid}.artist-avatar svg{width:28px;height:28px}.artist-line{gap:8px;min-width:0}.artist-line h2{color:#fff;margin:0;font-size:clamp(1.2rem,3vw,1.55rem);line-height:1}.follow-button{color:#d9dde5;cursor:pointer;background:0 0;border:1px solid #3b3e46;border-radius:18px;align-items:center;gap:4px;padding:5px 8px;font-size:.7rem;display:inline-flex}.follow-button svg{width:13px;height:13px}.tabs{flex-wrap:wrap;gap:3px;margin-top:10px}.tabs button{color:#f0f2f5;cursor:pointer;background:#1a1b1f;border:0;border-radius:16px;min-height:29px;padding:0 13px;font-size:.7rem}.tabs button.is-active{color:#121315;background:#e8ecef}.automix-pill{color:#f4ebff;cursor:pointer;background:0 0;border:1px solid #8f54ff;border-radius:18px;justify-self:end;align-items:center;gap:7px;min-height:32px;padding:0 13px;font-size:.76rem;font-weight:800;display:inline-flex}.automix-pill.is-on{background:#8f54ff29;box-shadow:inset 0 0 0 1px #ffffff14}.automix-pill svg{width:15px;height:15px}.content-grid{grid-template-columns:104px minmax(380px,1fr) 292px;gap:20px;padding:0 10px 28px;display:grid}.release-panel,.mix-panel{min-width:0}.release-panel h3,.section-heading h3{color:#fff;margin:0;font-size:.88rem;line-height:1.2}.release-cover{aspect-ratio:1;background:linear-gradient(135deg, color-mix(in srgb, var(--track-accent) 46%, #111 54%), var(--track-secondary)), #2a2d33;border-radius:4px;place-items:center;width:92px;margin:18px 0 8px;display:grid;position:relative;overflow:hidden}.release-cover span{z-index:1;color:#ffffffd1;text-transform:uppercase;font-size:.72rem;font-weight:800;position:relative}.release-panel strong{overflow-wrap:anywhere;color:#fff;font-size:.76rem;line-height:1.22;display:block}.release-panel p{color:#9fa5af;margin:4px 0 0;font-size:.68rem;line-height:1.25}.section-heading{justify-content:space-between;min-height:24px}.section-heading span{color:#9fa5af;font-size:.72rem}.track-table{gap:2px;margin-top:10px;display:grid}.track-row{color:#dfe3ea;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:4px;grid-template-columns:22px 28px 30px minmax(160px,1.35fr) minmax(84px,.5fr) 58px 22px;align-items:center;gap:8px;min-height:38px;padding:0 8px;display:grid;position:relative;overflow:hidden}.track-row:hover{background:#2a2c31}.track-row.is-current{color:#fff;background:#047745}.track-number,.label-text,.bpm-text,.track-info small{color:#9fa5af;font-size:.66rem}.track-row.is-current .track-number,.track-row.is-current .label-text,.track-row.is-current .bpm-text,.track-row.is-current .track-info small{color:#ffffffbd}.row-play{background:#ffffff1a;border-radius:2px;place-items:center;width:28px;height:22px;display:grid}.row-play svg{fill:currentColor;width:14px;height:14px}.row-art{background:linear-gradient(135deg, color-mix(in srgb, var(--track-accent) 54%, #111 46%), var(--track-secondary)), #2f3239;border-radius:2px;place-items:center;width:30px;height:30px;display:grid;position:relative;overflow:hidden}.row-art span{z-index:1;color:#ffffffd1;text-transform:uppercase;font-size:.58rem;font-weight:900;position:relative}.track-info{gap:2px;min-width:0;display:grid;position:relative}.track-info strong{color:inherit;text-overflow:ellipsis;white-space:nowrap;font-size:.72rem;line-height:1.2;overflow:hidden}.row-progress{background:#ffffffc2;max-width:100%;height:2px;position:absolute;bottom:-7px;left:0;right:0}.label-text,.bpm-text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.more-icon{color:#9fa5af;width:16px;height:16px}.mix-panel{background:#1b1c20;border:1px solid #343740;border-radius:8px;align-content:start;gap:12px;padding:12px;display:grid}.engine-state{background:#24262b;border-radius:6px;gap:10px;min-width:0;padding:10px}.engine-state strong{color:#fff;text-overflow:ellipsis;white-space:nowrap;font-size:.78rem;display:block;overflow:hidden}.engine-state p{color:#9ea4af;margin:3px 0 0;font-size:.7rem}.pulse-meter{width:38px;height:38px;color:var(--track-accent);background:#47e8831f;border-radius:50%;flex:none;place-items:center;display:grid}.pulse-meter.is-mixing{animation:.9s ease-in-out infinite alternate pulse}.pulse-meter svg{width:19px;height:19px}.mix-now-button,.setting-button{color:#fff;cursor:pointer;background:#2a2c32;border:1px solid #3d414b;border-radius:6px;width:100%;min-height:38px}.mix-now-button{background:var(--track-accent);color:#101214;justify-content:center;align-items:center;gap:8px;font-weight:900;display:inline-flex}.mix-now-button svg,.setting-button svg,.next-card svg{width:17px;height:17px}.control-slider{color:#d5dae3;grid-template-columns:minmax(0,1fr) 52px;align-items:center;gap:8px;font-size:.72rem;display:grid}.control-slider span{grid-column:1/-1;gap:6px}.control-slider input{width:100%;accent-color:var(--track-accent)}.control-slider strong{color:#fff;justify-self:end}.setting-button{color:#ccd2dc;justify-content:space-between;gap:8px;padding:0 10px}.setting-button.is-on{color:#fff;background:#47e8831a;border-color:#47e88375}.setting-button strong{color:var(--track-accent);font-size:.7rem}.next-card{background:linear-gradient(135deg, color-mix(in srgb, var(--track-accent) 16%, transparent), transparent), #24262b;border-radius:6px;grid-template-columns:18px minmax(0,1fr);align-items:center;gap:4px 8px;padding:10px;display:grid}.next-card span,.next-card small{color:#a4abb6;font-size:.68rem}.next-card strong{color:#fff;text-overflow:ellipsis;white-space:nowrap;font-size:.78rem;overflow:hidden}.empty-library{color:#f5f7fa;text-align:center;background:#111214;align-content:center;place-items:center;gap:12px;min-height:100svh;padding:24px;display:grid}.empty-library svg{color:#47e883;width:42px;height:42px}.empty-library h1,.empty-library p{margin:0}@keyframes pulse{0%{box-shadow:0 0 #47e88333}to{box-shadow:0 0 0 7px #47e88300}}@media (width<=960px){.mix-stage{min-height:426px}.now-playing-panel{grid-template-columns:92px minmax(0,1fr);margin-top:8px}.transport-bar{grid-template-columns:1fr;justify-items:center;gap:6px;padding:8px 12px}.tempo-pill{justify-self:center}.stage-progress{bottom:96px;right:18px}.mix-radar{width:calc(100% - 24px)}.radar-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.radar-recommendation{grid-column:1/-1}.top-nav,.artist-header,.content-grid{grid-template-columns:1fr}.artist-header{align-items:start}.automix-pill{justify-self:start}.release-panel{display:none}.content-grid{gap:14px}}@media (width<=640px){.mix-stage{min-height:0;padding-bottom:0}.stage-backdrop{display:none}.now-playing-panel{grid-template-columns:1fr;width:calc(100% - 20px);padding:8px}.deck-art{justify-self:center;width:min(100%,168px)}.track-meta-line{grid-template-columns:1fr}.time-stack{justify-items:start}.main-waveform{height:42px}.transport-bar{min-height:96px;margin-top:8px;position:relative}.stage-progress{margin:8px 18px 0;position:relative;bottom:auto;left:auto;right:auto}.mix-radar{gap:8px;padding:9px}.radar-head{grid-template-columns:1fr;display:grid}.radar-clock{justify-self:start}.radar-metrics{display:grid}.radar-fx-chain{padding-bottom:2px}.playlist-title{max-width:100%}.top-nav{padding:8px 10px}.nav-left{gap:12px;overflow-x:auto}.artist-header{padding-top:12px}.track-row{grid-template-columns:22px 30px minmax(0,1fr) 58px;min-height:46px}.row-play,.label-text,.more-icon{display:none}.bpm-text{text-align:right}}