@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;600&display=swap');
:root{color-scheme:dark;--ink:#020506;--white:#f7fbff;--muted:rgba(235,244,248,.56);--line:rgba(255,255,255,.14);--cyan:#58e7f2;--pink:#ff4fd8;--lime:#c9ff3d;--panel:#090d10}
[hidden]{display:none!important}.dj-world~.global-theme-toggle{position:fixed;top:max(18px,env(safe-area-inset-top));right:max(20px,env(safe-area-inset-right))}
*{box-sizing:border-box}html,body{min-width:320px;min-height:100%;margin:0;background:var(--ink)}body{color:var(--white);font-family:"Space Grotesk",sans-serif;overflow-x:hidden}button,input{font:inherit}button,a,label{-webkit-tap-highlight-color:transparent}button{cursor:pointer}.dj-world{position:relative;min-height:100svh;padding:max(18px,env(safe-area-inset-top)) clamp(16px,3.2vw,52px) max(100px,env(safe-area-inset-bottom));isolation:isolate;overflow:hidden;background:radial-gradient(circle at 12% 22%,rgba(88,231,242,.13),transparent 24%),radial-gradient(circle at 88% 28%,rgba(255,79,216,.13),transparent 25%),linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px),#020506;background-size:auto,auto,48px 48px,48px 48px,auto}.dj-world::before{content:"";position:fixed;inset:-50%;z-index:-2;opacity:.34;background:repeating-conic-gradient(from 0deg at 50% 44%,transparent 0 11deg,rgba(88,231,242,.045) 11deg 12deg);animation:world-spin 80s linear infinite}.dj-world__field{position:fixed;inset:0;z-index:-1;pointer-events:none}.dj-world__field span{position:absolute;color:var(--cyan);opacity:.24;text-shadow:0 0 18px currentColor;animation:symbol-float 8s ease-in-out infinite}.dj-world__field span:nth-child(1){left:4%;top:28%}.dj-world__field span:nth-child(2){right:5%;top:18%;color:var(--pink);animation-delay:-2s}.dj-world__field span:nth-child(3){left:45%;bottom:7%;color:var(--lime);animation-delay:-4s}.dj-world__field span:nth-child(4){right:3%;bottom:26%;animation-delay:-6s}.dj-head{position:relative;z-index:3;display:flex;align-items:center;gap:14px;min-height:64px;border-bottom:1px solid rgba(88,231,242,.22)}.dj-head__back{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);color:var(--white);text-decoration:none}.dj-head__brand{display:flex;align-items:center;gap:10px;color:var(--white);font-family:"Archivo Black",sans-serif;text-decoration:none}.dj-head__brand img{width:38px;height:38px;object-fit:contain;filter:drop-shadow(0 0 12px rgba(88,231,242,.4))}.dj-head__brand span{display:grid;line-height:.86}.dj-head__brand small{margin-top:6px;color:var(--muted);font:500 .4rem "Space Grotesk",sans-serif;letter-spacing:.16em}.dj-head>p{display:flex;align-items:center;gap:8px;margin-left:auto;color:var(--muted);font-size:.5rem;letter-spacing:.16em}.dj-head>p i{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px var(--lime);animation:blink 1.2s steps(2,end) infinite}.dj-intro{display:flex;align-items:end;justify-content:space-between;gap:28px;padding:clamp(46px,7vw,90px) 0 30px}.dj-intro p,.dj-library header p{margin:0 0 13px;color:var(--lime);font-size:.55rem;font-weight:600;letter-spacing:.17em}.dj-intro h1{margin:0;color:transparent;background:linear-gradient(100deg,#fff,var(--cyan),var(--lime),var(--pink));background-size:220%;background-clip:text;-webkit-background-clip:text;font-family:"Archivo Black",sans-serif;font-size:clamp(3.1rem,7vw,7.2rem);line-height:.78;animation:title-flow 7s linear infinite}.dj-intro h1 span{color:transparent}.dj-intro__actions{display:flex;gap:8px}.dj-intro__actions>button,.dj-upload{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 15px;border:1px solid var(--cyan);background:rgba(88,231,242,.07);color:var(--white);font-size:.56rem;letter-spacing:.12em;cursor:pointer}.dj-upload{border-color:var(--lime);background:rgba(201,255,61,.07)}.dj-upload input,.deck__transport input{position:absolute;width:1px;height:1px;opacity:0}.dj-intro__actions span{color:var(--cyan);font-size:1rem}.dj-upload span{color:var(--lime)}
.dj-console{display:grid;grid-template-columns:minmax(280px,1fr) minmax(250px,.58fr) minmax(280px,1fr);gap:8px;max-width:1560px;margin:auto;padding:8px;border:1px solid rgba(255,255,255,.15);background:rgba(0,0,0,.42);box-shadow:0 35px 110px rgba(0,0,0,.6),0 0 60px rgba(88,231,242,.06);backdrop-filter:blur(18px)}.deck,.mixer{position:relative;border:1px solid var(--line);background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(2,5,7,.92));overflow:hidden}.deck{--deck-color:var(--cyan);padding:14px}.deck--b{--deck-color:var(--pink)}.deck::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,transparent,var(--deck-color),transparent);box-shadow:0 0 14px var(--deck-color)}.deck__head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;min-height:38px}.deck__head span,.deck__head p{font-size:.48rem;letter-spacing:.13em}.deck__head span{color:var(--deck-color);font-weight:600}.deck__head p{margin:0;overflow:hidden;color:var(--muted);text-align:center;text-overflow:ellipsis;white-space:nowrap}.deck__head b{display:grid;place-items:center;width:24px;height:24px;border:1px solid var(--deck-color);color:var(--deck-color);font-size:.55rem}.deck__wave{display:block;width:100%;height:74px;border:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.38)}.deck__time{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;min-height:42px;border-bottom:1px solid var(--line)}.deck__time strong,.deck__time em{color:var(--deck-color);font-family:"Archivo Black",sans-serif;font-size:.7rem;font-style:normal}.deck__time span{overflow:hidden;color:var(--muted);font-size:.48rem;text-align:center;text-overflow:ellipsis;white-space:nowrap}.deck__body{display:grid;grid-template-columns:1fr 42px;align-items:center;gap:12px;padding:16px 0}.jog{position:relative;display:grid;place-items:center;width:min(100%,280px);aspect-ratio:1;margin:auto;border:1px solid color-mix(in srgb,var(--deck-color) 42%,transparent);border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.2) 0 1deg,transparent 1deg 7deg),radial-gradient(circle at 38% 34%,#30383c,#080b0d 45%,#171c1f 58%,#030506 72%);box-shadow:inset 0 0 0 8px #05080a,inset 0 0 0 10px rgba(255,255,255,.12),0 18px 45px rgba(0,0,0,.55),0 0 26px color-mix(in srgb,var(--deck-color) 12%,transparent)}.jog::before,.jog::after,.jog__rings{content:"";position:absolute;border-radius:50%;pointer-events:none}.jog::before{inset:8%;border:1px dashed color-mix(in srgb,var(--deck-color) 46%,transparent)}.jog::after{inset:21%;border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 0 24px rgba(0,0,0,.8)}.jog__rings{inset:4%;border:2px dotted rgba(255,255,255,.18)}.deck.is-playing .jog__rings{animation:jog-spin 4s linear infinite}.deck.is-playing .jog{box-shadow:inset 0 0 0 8px #05080a,inset 0 0 0 10px rgba(255,255,255,.12),0 18px 45px rgba(0,0,0,.55),0 0 38px color-mix(in srgb,var(--deck-color) 28%,transparent)}.jog__label{position:relative;z-index:2;display:grid;place-items:center;width:42%;aspect-ratio:1;border:1px solid var(--deck-color);border-radius:50%;background:#05080a;box-shadow:0 0 24px color-mix(in srgb,var(--deck-color) 22%,transparent)}.deck.is-playing .jog__label{animation:jog-spin 8s linear infinite}.jog__label img{width:44%;height:44%;object-fit:contain}.jog__label span{color:var(--deck-color);font-size:.39rem;letter-spacing:.13em}.deck__pitch{display:grid;grid-template-rows:auto 1fr auto auto;justify-items:center;align-self:stretch}.deck__pitch>span{color:var(--muted);font-size:.4rem}.deck__pitch input{width:160px;accent-color:var(--deck-color);transform:rotate(-90deg)}.deck__pitch output{color:var(--deck-color);font-size:.48rem}.deck__transport{display:grid;grid-template-columns:1fr 1.2fr 1fr 1fr;gap:6px}.deck__transport button,.deck__transport label{display:grid;place-items:center;min-height:42px;border:1px solid var(--line);background:rgba(255,255,255,.035);color:var(--white);font-size:.5rem;font-weight:600;letter-spacing:.1em;cursor:pointer}.deck__transport .deck__play{border-color:var(--deck-color);background:var(--deck-color);color:#05080a;font-size:1rem}.deck__transport button:hover,.deck__transport label:hover{border-color:var(--deck-color)}
.mixer{padding:14px;background:linear-gradient(160deg,#101519,#050708 70%)}.mixer>header{display:flex;justify-content:space-between;min-height:38px;color:var(--lime);font-family:"Archivo Black",sans-serif;font-size:.55rem}.mixer>header b{color:var(--muted);font:500 .43rem "Space Grotesk",sans-serif;letter-spacing:.14em}.mixer__channels{display:grid;grid-template-columns:1fr .72fr 1fr;gap:8px}.channel{display:grid;grid-template-columns:1fr 1fr;align-items:center;justify-items:center;gap:5px;padding:9px 5px;border:1px solid var(--line);background:rgba(255,255,255,.025)}.channel>span{color:var(--muted);font-size:.38rem;letter-spacing:.1em}.knob{width:44px;height:44px;accent-color:var(--channel-color,var(--cyan));transform:rotate(-90deg)}.channel[data-channel="a"]{--channel-color:var(--cyan)}.channel[data-channel="b"]{--channel-color:var(--pink)}.channel__meter{grid-column:1/-1;display:flex;align-items:end;gap:2px;width:100%;height:38px;padding:4px;border:1px solid rgba(255,255,255,.08)}.channel__meter i{flex:1;height:20%;background:var(--lime);opacity:.18;box-shadow:0 0 5px currentColor;transition:height 80ms linear,opacity 80ms linear}.channel__meter i:nth-last-child(-n+2){background:#ff4f62}.channel__fader{grid-column:1/-1;width:100%;accent-color:var(--channel-color)}.mixer__master{display:grid;justify-items:center;align-content:start;gap:10px}.mixer__master>p{margin:0;color:var(--lime);font-size:.42rem;letter-spacing:.12em}.master-orbit{position:relative;display:grid;place-items:center;width:74px;aspect-ratio:1;border:1px dashed rgba(201,255,61,.4);border-radius:50%;animation:jog-spin 14s linear infinite}.master-orbit img{width:82%;height:82%;object-fit:contain;filter:drop-shadow(0 0 10px rgba(29,255,100,.48));animation:jog-spin 14s linear infinite reverse}.mixer__master label{display:grid;gap:5px;color:var(--muted);font-size:.38rem;text-align:center}.mixer__master input{width:70px;accent-color:var(--lime)}.mixer__master button{display:flex;align-items:center;gap:6px;padding:7px;border:1px solid var(--line);background:transparent;color:var(--muted);font-size:.42rem}.mixer__master button i{width:6px;height:6px;border-radius:50%;background:#ff4f62}.mixer__master button[aria-pressed="true"]{border-color:#ff4f62;color:#fff;box-shadow:0 0 18px rgba(255,79,98,.18)}.mixer__master button[aria-pressed="true"] i{animation:blink .8s steps(2,end) infinite}.crossfader{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;margin-top:14px;color:var(--muted);font-size:.45rem}.crossfader input{width:100%;accent-color:var(--lime)}
.dj-library{max-width:1560px;margin:clamp(60px,8vw,110px) auto 0}.dj-library>header{display:flex;align-items:end;justify-content:space-between;padding-bottom:18px;border-bottom:1px solid var(--line)}.dj-library h2{margin:0;font-family:"Archivo Black",sans-serif;font-size:clamp(1.8rem,4vw,4rem)}.dj-library>header>span{color:var(--muted);font-size:.5rem;letter-spacing:.14em}.dj-library__empty{display:grid;place-items:center;align-content:center;min-height:190px;border-bottom:1px solid var(--line);color:var(--muted)}.dj-library__empty b{color:var(--cyan);font-size:2rem}.dj-library__empty strong{margin-top:12px;font-size:.6rem;letter-spacing:.15em}.dj-library__empty span{margin-top:8px;font-size:.45rem;letter-spacing:.12em}.dj-library__list{display:grid}.library-track{display:grid;grid-template-columns:30px minmax(0,1fr) auto auto;align-items:center;gap:12px;min-height:64px;padding:7px 9px;border-bottom:1px solid var(--line);color:var(--white)}.library-track>span:first-child{color:var(--cyan);font-size:.5rem}.library-track strong,.library-track small{display:block}.library-track strong{overflow:hidden;font-size:.72rem;text-overflow:ellipsis;white-space:nowrap}.library-track small{margin-top:4px;color:var(--muted);font-size:.48rem}.library-track button{min-width:40px;height:34px;border:1px solid var(--line);background:transparent;color:var(--white);font-size:.48rem}.library-track button:first-of-type:hover{border-color:var(--cyan);color:var(--cyan)}.library-track button:last-child:hover{border-color:var(--pink);color:var(--pink)}
.cloud-loader{position:fixed;inset:0;z-index:180;color:var(--white);font-family:"Space Grotesk",sans-serif}.cloud-loader[hidden]{display:none}.cloud-loader__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.82);backdrop-filter:blur(18px)}.cloud-loader__panel{position:absolute;inset:clamp(18px,6vw,80px);display:grid;grid-template-columns:minmax(230px,.5fr) minmax(420px,1fr);grid-template-rows:64px auto auto 1fr;column-gap:clamp(30px,6vw,90px);max-width:1200px;margin:auto;padding:0 clamp(20px,4vw,54px) clamp(20px,4vw,54px);border:1px solid rgba(88,231,242,.3);background:radial-gradient(circle at 20% 70%,rgba(255,79,216,.16),transparent 28%),radial-gradient(circle at 88% 18%,rgba(88,231,242,.18),transparent 28%),#030608;overflow-y:auto}.cloud-loader__panel>header{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);color:var(--cyan);font-size:.52rem;letter-spacing:.15em}.cloud-loader__panel>header button{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:transparent;color:#fff;font-size:1.3rem}.cloud-loader__copy{grid-row:2/5;padding-top:50px}.cloud-loader__copy p{color:var(--lime);font-size:.5rem;letter-spacing:.17em}.cloud-loader__copy h2{margin:16px 0;color:transparent;background:linear-gradient(100deg,#fff,var(--cyan),var(--pink));background-clip:text;-webkit-background-clip:text;font-family:"Archivo Black",sans-serif;font-size:clamp(2.7rem,6vw,6rem);line-height:.8}.cloud-loader form{padding-top:50px}.cloud-loader form label{display:grid;grid-template-columns:1fr auto;border:1px solid rgba(88,231,242,.34)}.cloud-loader form input{min-width:0;height:58px;padding:0 15px;border:0;outline:0;background:rgba(255,255,255,.035);color:#fff}.cloud-loader form button{border:0;background:var(--cyan);color:#05080a;font-size:.52rem;font-weight:600}.cloud-loader__status{display:flex;align-items:start;gap:10px;padding:16px 2px;color:var(--muted);font-size:.55rem;line-height:1.5}.cloud-loader__status i{flex:0 0 auto;width:7px;height:7px;margin-top:4px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime)}.cloud-loader__status p{margin:0}.cloud-loader__embed{min-height:0;overflow:auto}.cloud-loader__embed iframe{display:block;width:100%;min-height:152px;border:0}.cloud-loader__embed iframe.spotify{height:352px}.cloud-loader__embed a{display:flex;justify-content:space-between;padding:18px;border:1px solid var(--line);color:#fff;text-decoration:none}.cloud-loader__embed a b{color:var(--cyan)}
@keyframes world-spin{to{transform:rotate(360deg)}}@keyframes symbol-float{50%{opacity:.62;transform:translateY(-18px) rotate(90deg)}}@keyframes title-flow{to{background-position:-130% 50%}}@keyframes jog-spin{to{transform:rotate(360deg)}}@keyframes blink{50%{opacity:.2}}
@media(max-width:1100px){.dj-console{grid-template-columns:1fr 240px}.deck--b{grid-column:1}.mixer{grid-column:2;grid-row:1/3}.deck__body{grid-template-columns:1fr 38px}.jog{max-width:240px}}
@media(max-width:700px){.dj-world{padding-inline:10px}.dj-head>p{display:none}.dj-intro{align-items:stretch;flex-direction:column;padding-top:42px}.dj-intro__actions{display:grid;grid-template-columns:1fr 1fr}.dj-intro__actions>button,.dj-upload{justify-content:center;padding:0 8px}.dj-console{display:flex;flex-direction:column;padding:5px}.deck{padding:10px}.deck__wave{height:60px}.deck__body{grid-template-columns:1fr 36px}.jog{width:min(74vw,270px)}.mixer{order:2}.deck--a{order:1}.deck--b{order:3}.mixer__channels{grid-template-columns:1fr .64fr 1fr}.knob{width:38px}.master-orbit{width:58px}.deck__transport{grid-template-columns:repeat(4,1fr)}.dj-library{margin-top:70px}.library-track{grid-template-columns:24px minmax(0,1fr) auto auto}.cloud-loader__panel{inset:0;grid-template-columns:1fr;grid-template-rows:60px auto auto auto 1fr;padding:0 14px 20px;border:0}.cloud-loader__copy{grid-row:auto;padding-top:24px}.cloud-loader form{padding-top:20px}.cloud-loader form label{grid-template-columns:1fr}.cloud-loader form button{height:44px}.cloud-loader__copy h2{font-size:3rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}}
@media(max-width:700px){.dj-intro__actions{grid-template-columns:1fr}}
.deck__performance{display:grid;gap:10px;padding-top:12px;border-top:1px solid var(--line)}
.deck__performance-head{display:flex;align-items:center;justify-content:space-between;color:var(--deck-color);font-size:.42rem;font-weight:600;letter-spacing:.13em}
.deck__performance-head label{display:flex;align-items:center;gap:6px;color:var(--muted)}
.deck__performance-head input{width:52px;height:24px;padding:0 5px;border:1px solid var(--line);background:#05080a;color:var(--white);font-size:.5rem;text-align:center}
.deck__pads{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.deck__pads button{position:relative;height:34px;border:1px solid color-mix(in srgb,var(--deck-color) 34%,var(--line));background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(0,0,0,.38));color:var(--muted);font-family:"Archivo Black",sans-serif;font-size:.52rem;transition:border-color 140ms ease,background 140ms ease,color 140ms ease,box-shadow 140ms ease,transform 100ms ease}
.deck__pads button::after{content:"";position:absolute;right:4px;bottom:4px;width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.45}
.deck__pads button:hover,.deck__pads button:focus-visible{border-color:var(--deck-color);color:var(--deck-color)}
.deck__pads button:active{transform:translateY(1px)}
.deck__pads button.is-set{border-color:var(--deck-color);background:var(--deck-color);box-shadow:0 0 16px color-mix(in srgb,var(--deck-color) 42%,transparent);color:#030607}
.deck__tools{display:grid;grid-template-columns:.8fr 1.2fr;gap:8px}
.deck__loops{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:7px;border:1px solid var(--line)}
.deck__loops>span{grid-column:1/-1;color:var(--muted);font-size:.38rem;letter-spacing:.11em}
.deck__loops button{height:28px;border:1px solid var(--line);background:transparent;color:var(--white);font-size:.46rem}
.deck__loops button:hover,.deck__loops button:focus-visible,.deck__loops button.is-active{border-color:var(--lime);background:rgba(201,255,61,.12);color:var(--lime);box-shadow:inset 0 -2px 0 var(--lime)}
.deck__fx{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:7px;border:1px solid var(--line)}
.deck__fx label{display:grid;align-content:space-between;gap:7px;min-width:0;color:var(--muted);font-size:.34rem;letter-spacing:.08em;text-align:center}
.deck__fx input{width:100%;margin:0;accent-color:var(--deck-color)}
@media(max-width:700px){.deck__performance{gap:8px}.deck__pads button{height:38px}.deck__tools{grid-template-columns:1fr}.deck__loops,.deck__fx{min-height:62px}}
:root[data-theme="light"]{--ink:#454a47;--panel:#505652;--muted:rgba(247,251,255,.64);--line:rgba(255,255,255,.2)}:root[data-theme="light"] html,:root[data-theme="light"] body{background:#454a47}:root[data-theme="light"] .dj-world{background:radial-gradient(circle at 12% 22%,rgba(88,231,242,.17),transparent 24%),radial-gradient(circle at 88% 28%,rgba(255,79,216,.15),transparent 25%),linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px),#454a47;background-size:auto,auto,48px 48px,48px 48px,auto}:root[data-theme="light"] .deck,:root[data-theme="light"] .mixer{background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(50,55,52,.88))}