:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#18080f;--bg-deep:#0e0509;--panel:#240e168c;--panel-2:#2d101ab3;--panel-border:#ff64821f;--panel-border-strong:#ff5b8559;--pink:#ff5b85;--pink-bright:#ff7ba0;--pink-glow:#ff5b8559;--cyan:#5eead4;--cyan-soft:#5eead499;--yellow:#f1b357;--cream:#ecd9c0;--text:#f0e3d3;--text-muted:#a08884;--text-dim:#6a575a;--error:#ff6b85;--green-spotify:#1ed760;--font-script:"Pacifico", cursive;--font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif}*{box-sizing:border-box}html,body{background:var(--bg-deep);color:var(--text);font-family:var(--font-sans);min-height:100vh;margin:0;padding:0;font-size:15px;line-height:1.5;overflow-x:hidden}body{background:radial-gradient(ellipse at 50% 0%, #ff5b8514, transparent 50%), radial-gradient(ellipse at 50% 100%, #5eead40a, transparent 50%), var(--bg-deep);position:relative}#app{flex-direction:column;width:100%;min-height:100vh;padding:clamp(18px,3vw,36px) clamp(16px,4vw,64px) clamp(40px,5vw,80px);display:flex;position:relative}.bg-grain{pointer-events:none;opacity:.06;z-index:0;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");position:fixed;inset:0}#app>*{z-index:1;position:relative}.top{grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;margin-bottom:28px;display:grid}.back-slot{justify-self:start}.header-right{justify-self:end}.logo{text-align:center}.logo-script{font-family:var(--font-script);color:var(--pink);text-shadow:0 0 12px #ff5b8580,0 0 28px #ff5b8540;letter-spacing:.5px;font-size:44px;line-height:1.1}.logo-tag{letter-spacing:.18em;color:var(--cyan);text-transform:uppercase;justify-content:center;align-items:center;gap:10px;margin-top:2px;font-size:11px;font-weight:600;display:flex}.logo-tag .dash{background:linear-gradient(to right, transparent, var(--cyan), transparent);flex:0 0 30px;height:1px;position:relative}.logo-tag .dash:before,.logo-tag .dash:after{content:"";background:var(--cyan);width:6px;height:3px;position:absolute;top:-1px}.logo-tag .dash:before{left:4px}.logo-tag .dash:after{right:4px}.back-btn{font-family:var(--font-sans);letter-spacing:.16em;color:var(--pink);border:1px solid var(--panel-border-strong);cursor:pointer;background:0 0;border-radius:6px;align-items:center;gap:8px;padding:10px 18px;font-size:12px;font-weight:600;transition:all .15s;display:inline-flex}.back-btn:hover{border-color:var(--pink);background:#ff5b851a}.back-arrow{font-size:16px;line-height:1}.ghost-btn{font-family:var(--font-sans);letter-spacing:.1em;color:var(--text-muted);border:1px solid var(--panel-border);cursor:pointer;text-transform:uppercase;background:0 0;border-radius:6px;padding:8px 14px;font-size:12px;font-weight:600;transition:all .15s}.ghost-btn:hover{color:var(--text);border-color:var(--text-muted)}.login{justify-content:center;margin-top:80px;display:flex}.login-card{text-align:center;background:var(--panel);border:1px solid var(--panel-border);border-radius:12px;max-width:480px;padding:40px}button.primary{font-family:var(--font-sans);background:var(--pink);color:#1a0610;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;box-shadow:0 0 24px var(--pink-glow);border:none;border-radius:6px;margin-top:20px;padding:14px 32px;font-size:14px;font-weight:700;transition:all .15s}button.primary:hover{background:var(--pink-bright);box-shadow:0 0 36px var(--pink-glow)}.muted{color:var(--text-muted)}.small{font-size:13px}.center{text-align:center}#view{flex-direction:column;flex:1;display:flex}.panel{background:var(--panel);border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:14px;flex:1;padding:clamp(20px,3vw,36px)}.player-panel{width:100%}.playlist-header{text-align:center;margin-bottom:28px}.kicker{letter-spacing:.22em;color:var(--yellow);margin-bottom:8px;font-size:11px;font-weight:700}.title{font-family:var(--font-sans);letter-spacing:-.015em;color:var(--cream);align-items:center;gap:clamp(10px,1vw,18px);margin:0 0 8px;font-size:clamp(28px,3.4vw,56px);font-weight:600;line-height:1.1;display:inline-flex}.spotify-badge{background:var(--green-spotify);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'><path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.59 14.42c-.18.3-.57.39-.87.21-2.39-1.46-5.4-1.79-8.94-.98-.34.08-.69-.13-.77-.47-.08-.34.13-.69.47-.77 3.87-.88 7.2-.5 9.88 1.14.3.18.39.57.21.87zm1.23-2.74c-.23.37-.71.49-1.08.26-2.74-1.68-6.91-2.17-10.16-1.18-.42.13-.86-.11-.99-.53-.13-.42.11-.86.53-.99 3.71-1.13 8.31-.58 11.45 1.36.37.23.49.71.25 1.08zm.11-2.85c-3.28-1.95-8.7-2.13-11.83-1.18-.5.15-1.02-.13-1.18-.63-.15-.5.13-1.02.63-1.18 3.6-1.09 9.59-.88 13.36 1.36.45.27.6.85.34 1.3-.27.45-.86.6-1.32.33z'/></svg>");background-size:100% 100%;border-radius:50%;width:26px;height:26px;display:inline-block}.playlist-stats{color:var(--text-muted);letter-spacing:.04em;font-size:14px}.section-label{letter-spacing:.2em;color:var(--pink);align-items:center;gap:12px;margin:28px 0 16px;font-size:12px;font-weight:700;display:flex}.section-label:first-child{margin-top:0}.section-label.muted-label{color:var(--text-muted)}.section-label .hint{letter-spacing:.04em;text-transform:none;color:var(--text-dim);font-size:11px;font-weight:400}.pl-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:clamp(16px,2vw,28px);display:grid}.pl-card{--card-bg:#1a1216;background:var(--card-bg);cursor:pointer;text-align:center;font:inherit;color:#fff;border:none;border-radius:30px;flex-direction:column;padding:16px 16px 22px;transition:transform .2s,box-shadow .2s;display:flex;box-shadow:0 10px 30px #00000073}.pl-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px #0000008c,inset 0 0 0 1px #ffffff0f}.pl-art{aspect-ratio:1;background:#00000040;border-radius:18px;width:100%;overflow:hidden}.pl-art img{object-fit:cover;width:100%;height:100%;display:block}.pl-art-fallback{background:linear-gradient(135deg,#ff5b8540,#5eead42e);width:100%;height:100%}.pl-meta{min-width:0;padding:14px 8px 0}.pl-name{color:#fff;letter-spacing:-.005em;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:17px;font-weight:600;line-height:1.25;display:-webkit-box;overflow:hidden}.pl-sub{color:#ffffffb3;white-space:nowrap;text-overflow:ellipsis;letter-spacing:.01em;margin-top:4px;font-size:13px;overflow:hidden}.badge{color:var(--pink);text-transform:uppercase;letter-spacing:.06em;vertical-align:middle;background:#ff6b8526;border-radius:4px;margin-left:6px;padding:1px 6px;font-size:9px;font-weight:700;display:inline-block}.player-panel{padding:32px 36px 28px}.now-card{border:1px solid var(--panel-border-strong);background:linear-gradient(#3c122080,#240e1666);border-radius:12px;gap:clamp(16px,2vw,32px);margin-bottom:16px;padding:clamp(16px,1.6vw,28px) clamp(20px,2vw,36px);display:flex;box-shadow:0 0 28px #ff5b8514,inset 0 0 24px #ff5b850a}.now-art{background:#2a1118;border-radius:10px;flex-shrink:0;width:clamp(120px,12vw,200px);height:clamp(120px,12vw,200px);overflow:hidden}.now-art img{object-fit:cover;width:100%;height:100%;display:block}.now-body{flex-direction:column;flex:1;justify-content:center;min-width:0;display:flex}.now-label{letter-spacing:.18em;color:var(--pink);align-items:center;gap:8px;margin-bottom:8px;font-size:11px;font-weight:700;display:inline-flex}.bars{align-items:end;gap:2px;height:12px;display:inline-flex}.bars span{background:var(--pink);border-radius:1px;width:2px;animation:1.1s ease-in-out infinite bars}.bars span:first-child{height:30%;animation-delay:0s}.bars span:nth-child(2){height:80%;animation-delay:.2s}.bars span:nth-child(3){height:50%;animation-delay:.4s}.bars span:nth-child(4){height:70%;animation-delay:.1s}@keyframes bars{0%,to{transform:scaleY(.5)}50%{transform:scaleY(1)}}.now-title{color:var(--cream);letter-spacing:-.01em;white-space:nowrap;text-overflow:ellipsis;margin-bottom:6px;font-size:clamp(22px,2.4vw,40px);font-weight:600;line-height:1.15;overflow:hidden}.now-artist{color:var(--pink);white-space:nowrap;text-overflow:ellipsis;margin-bottom:clamp(10px,1.2vw,18px);font-size:clamp(14px,1.3vw,22px);overflow:hidden}.progress-row{align-items:center;gap:12px;margin-top:auto;display:flex}.time-l,.time-r{font-variant-numeric:tabular-nums;color:var(--pink);min-width:38px;font-size:13px;font-weight:500}.time-r{color:var(--text-dim);text-align:right}.progress{background:#ff5b852e;border-radius:2px;flex:1;height:4px;overflow:hidden}.progress-fill{background:var(--pink);border-radius:2px;width:0%;height:100%;transition:width .4s linear;box-shadow:0 0 8px #ff5b8599}.next-card{background:var(--panel-2);border:1px solid var(--panel-border);border-radius:12px;align-items:center;gap:18px;margin-bottom:24px;padding:14px 20px 14px 14px;display:flex}.next-art{background:#2a1118;border-radius:6px;flex-shrink:0;width:clamp(54px,5vw,84px);height:clamp(54px,5vw,84px);overflow:hidden}.next-art img{object-fit:cover;width:100%;height:100%;display:block}.next-body{flex:1;min-width:0}.next-label{letter-spacing:.18em;color:var(--cyan);margin-bottom:4px;font-size:11px;font-weight:700}.next-title{color:var(--cream);letter-spacing:-.01em;white-space:nowrap;text-overflow:ellipsis;font-size:clamp(16px,1.5vw,24px);font-weight:600;overflow:hidden}.next-artist{color:var(--cyan);white-space:nowrap;text-overflow:ellipsis;font-size:clamp(13px,1vw,16px);overflow:hidden}.next-controls{flex-shrink:0;gap:6px;display:flex}.icon-btn{border:1px solid var(--panel-border-strong);width:38px;height:38px;color:var(--pink);cursor:pointer;background:0 0;border-radius:50%;justify-content:center;align-items:center;transition:all .15s;display:inline-flex}.icon-btn:hover{border-color:var(--pink);color:var(--pink-bright);background:#ff5b851f}.icon-btn.toggle-btn{border-color:var(--panel-border);color:var(--text-dim)}.icon-btn.toggle-btn:hover{color:var(--text-muted);border-color:var(--text-muted);background:0 0}.icon-btn.toggle-btn.on{color:var(--pink);border-color:var(--pink);background:#ff5b851f;box-shadow:0 0 12px #ff5b8559}.settings-card{background:var(--panel-2);border:1px solid var(--panel-border);border-radius:12px;padding:20px 28px 24px}.settings-header{border-bottom:1px solid var(--panel-border);align-items:baseline;gap:10px;margin-bottom:18px;padding-bottom:12px;display:flex}.settings-title{letter-spacing:.18em;color:var(--yellow);font-size:12px;font-weight:700}.settings-sub{letter-spacing:.04em;color:var(--text-dim);text-transform:uppercase;font-size:11px}.settings-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));align-items:start;gap:clamp(20px,2vw,40px);display:grid}.slider-block+.slider-block{position:relative}.slider-block+.slider-block:before{content:"";background:var(--panel-border);width:1px;position:absolute;top:0;bottom:0;left:calc(0px - clamp(10px,1vw,20px))}@media (width<=720px){.slider-block+.slider-block:before{display:none}}.slider-block{align-items:flex-start;gap:16px;display:flex}.slider-icon{flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;display:flex}.slider-block.pink .slider-icon{color:var(--pink)}.slider-block.cyan .slider-icon{color:var(--cyan)}.slider-block.yellow .slider-icon{color:var(--yellow)}.slider-content{flex:1;min-width:0}.slider-label{letter-spacing:.18em;font-size:11px;font-weight:700}.slider-block.pink .slider-label{color:var(--pink)}.slider-block.cyan .slider-label{color:var(--cyan)}.slider-block.yellow .slider-label{color:var(--yellow)}.slider-value{font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--cream);margin:4px 0 12px;font-size:clamp(18px,1.6vw,26px);font-weight:600}input[type=range]{appearance:none;border-radius:20px;outline:none;width:100%;height:40px}.slider-block.pink input[type=range]{background:linear-gradient(to right, var(--pink) var(--val,50%), #ff5b852e var(--val,50%))}.slider-block.cyan input[type=range]{background:linear-gradient(to right, var(--cyan) var(--val,50%), #5eead42e var(--val,50%))}.slider-block.yellow input[type=range]{background:linear-gradient(to right, var(--yellow) var(--val,50%), #f1b3572e var(--val,50%))}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;cursor:grab;border:none;border-radius:50%;width:18px;height:18px}.slider-block.pink input[type=range]::-webkit-slider-thumb{background:var(--pink);box-shadow:0 0 0 3px #ff5b8533,0 0 12px #ff5b8580}.slider-block.cyan input[type=range]::-webkit-slider-thumb{background:var(--cyan);box-shadow:0 0 0 3px #5eead433,0 0 12px #5eead480}.slider-block.yellow input[type=range]::-webkit-slider-thumb{background:var(--yellow);box-shadow:0 0 0 3px #f1b35733,0 0 12px #f1b35780}input[type=range]::-moz-range-thumb{cursor:grab;border:none;border-radius:50%;width:18px;height:18px}.slider-block.pink input[type=range]::-moz-range-thumb{background:var(--pink)}.slider-block.cyan input[type=range]::-moz-range-thumb{background:var(--cyan)}.slider-block.yellow input[type=range]::-moz-range-thumb{background:var(--yellow)}.slider-scale{color:var(--text-dim);font-variant-numeric:tabular-nums;letter-spacing:.04em;justify-content:space-between;margin-top:6px;font-size:11px;display:flex}.error[hidden]{display:none}.error:not([hidden]){color:var(--text);background:#ff6b8514;border:1px solid #ff6b854d;border-radius:10px;margin-bottom:16px;padding:14px 18px;font-size:14px}.error pre{color:var(--text-muted)}.error code,code{background:var(--panel-2);border-radius:4px;padding:1px 6px;font-family:ui-monospace,monospace;font-size:13px}::view-transition-group(promoted-track){animation-duration:.65s;animation-timing-function:cubic-bezier(.22,1,.36,1)}::view-transition-old(leaving-track){animation:.38s ease-out forwards dj-fade-out}::view-transition-new(fresh-next){animation:.48s ease-out .12s backwards dj-fade-in}::view-transition-old(fresh-next){display:none}@keyframes dj-fade-out{to{opacity:0;transform:translateY(-6px)}}@keyframes dj-fade-in{0%{opacity:0;transform:translateY(8px)}}@media (width<=760px){.top{grid-template-columns:1fr;gap:10px}.back-slot,.header-right{justify-self:center}.logo-script{font-size:36px}.now-card{flex-direction:column;padding:18px}.now-art{aspect-ratio:1;width:100%;max-width:220px;height:auto;margin:0 auto}.now-title{white-space:normal;font-size:24px}.title{font-size:30px}.settings-grid{grid-template-columns:1fr;gap:22px}.settings-grid:before{display:none}.pl-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}.pl-name{font-size:15px}.pl-sub{font-size:12px}}@media (width<=460px){.pl-grid{grid-template-columns:repeat(2,1fr)}.now-title{font-size:20px}.title{font-size:24px}.next-controls{flex-direction:column}}