:root{--bg:#08080b;--bg-elev:#101015;--surface:#ffffff0b;--surface-hi:#ffffff16;--line:#ffffff14;--text:#f2f2f5;--text-dim:#9a9aa6;--text-faint:#6a6a76;--accent:#ffb020;--accent-soft:#ffb02029;--radius:12px;--shadow:0 18px 50px #0000008c;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;margin:0;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;font-size:14px;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0}img{max-width:100%;display:block}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-thumb{background:#ffffff1f padding-box content-box;border:3px solid #0000;border-radius:99px}::-webkit-scrollbar-thumb:hover{background:#ffffff38 padding-box content-box}.boot{height:100%;color:var(--text-dim);place-content:center;justify-items:center;gap:18px;display:grid}.boot-pulse{background:var(--accent);border-radius:50%;width:42px;height:42px;animation:1.1s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:.45;transform:scale(.75)}50%{opacity:1;transform:scale(1)}}.app{isolation:isolate;grid-template-rows:auto minmax(0,1fr) auto;height:100dvh;display:grid;position:relative}.backdrop{z-index:-1;filter:blur(90px)saturate(180%);opacity:.28;background-position:50%;background-size:cover;transition:background-image .6s;position:fixed;inset:-20%}.backdrop:after{content:"";background:linear-gradient(#08080b8c 0%,#08080bf0 70%);position:absolute;inset:0}.topbar{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;padding:22px 26px 16px;display:flex}.brand h1{letter-spacing:-.02em;margin:0;font-size:26px;font-weight:700}.brand-sub{color:var(--text-dim);align-items:center;gap:9px;margin:5px 0 0;font-size:12.5px;display:flex}.badge{border:1px solid var(--line);letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);border-radius:99px;padding:2px 8px;font-size:10.5px}.badge.is-live{color:#6ee7a8;background:#6ee7a81a;border-color:#6ee7a84d}.topbar-actions{align-items:center;gap:10px;display:flex}.searchbox{background:var(--surface);border:1px solid var(--line);height:38px;color:var(--text-faint);border-radius:99px;align-items:center;gap:9px;padding:0 14px;transition:border-color .15s,background .15s;display:flex}.searchbox:focus-within{background:var(--surface-hi);border-color:#ffb0208c}.searchbox input{color:var(--text);background:0 0;border:0;outline:none;width:236px;font-size:13.5px}.searchbox input::placeholder{color:var(--text-faint)}.searchbox input::-webkit-search-cancel-button{filter:invert(.6)}.shuffle-cta{background:var(--accent);color:#1a1200;border-radius:99px;align-items:center;gap:8px;height:38px;padding:0 18px;font-size:13.5px;font-weight:650;transition:transform .12s,filter .15s;display:inline-flex}.shuffle-cta:hover{filter:brightness(1.08)}.shuffle-cta:active{transform:scale(.97)}.main{grid-template-columns:minmax(0,1fr) 372px;gap:18px;min-height:0;padding:0 26px 18px;display:grid}.listpane{overscroll-behavior:contain;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);min-height:0;padding:6px;overflow-y:auto}.tracklist{margin:0;padding:0;list-style:none}.track{cursor:default;border-radius:9px;grid-template-columns:34px 40px minmax(0,1fr) 34px 48px;align-items:center;gap:12px;padding:7px 10px;transition:background .12s;display:grid}.track:hover{background:var(--surface-hi)}.track.is-active .track-title{color:var(--accent)}.track-num{height:28px;color:var(--text-faint);font-variant-numeric:tabular-nums;place-items:center;font-size:12.5px;display:grid}.track-num .num-play,.track:hover .track-num .num{display:none}.track:hover .track-num .num-play{color:var(--text);display:block}.track-art{object-fit:cover;background:var(--bg-elev);border-radius:6px;width:40px;height:40px}.track-meta{flex-direction:column;gap:2px;min-width:0;display:flex}.track-title,.track-artist{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.track-title{font-size:13.5px;font-weight:550}.track-artist{color:var(--text-dim);font-size:12px}.track-queue{opacity:0;height:28px;color:var(--text-dim);border-radius:6px;place-items:center;transition:opacity .12s,color .12s,background .12s;display:grid}.track:hover .track-queue{opacity:1}.track-queue:hover{color:var(--accent);background:var(--accent-soft)}.track-time{color:var(--text-faint);font-variant-numeric:tabular-nums;text-align:right;font-size:12.5px}.empty{height:100%;color:var(--text-dim);place-content:center;display:grid}.eq{align-items:flex-end;gap:2px;height:14px;display:flex}.eq i{background:var(--accent);border-radius:2px;width:3px;animation:.9s ease-in-out infinite bounce}.eq i:first-child{height:60%;animation-delay:-.5s}.eq i:nth-child(2){height:100%;animation-delay:-.25s}.eq i:nth-child(3){height:45%}@keyframes bounce{0%,to{transform:scaleY(.35)}50%{transform:scaleY(1)}}.now{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);grid-template-rows:auto auto minmax(0,1fr);gap:14px;min-height:0;padding:14px;display:grid}.now-stage{aspect-ratio:16/9;box-shadow:var(--shadow);background:#000;border-radius:10px;position:relative;overflow:hidden}.now-video,.now-video iframe{border:0;width:100%;height:100%;display:block}.now-placeholder{color:var(--text-faint);background:var(--bg-elev);place-content:center;font-size:13px;display:grid;position:absolute;inset:0}.now-meta{min-width:0}.now-title{letter-spacing:-.01em;text-overflow:ellipsis;white-space:nowrap;margin:0;font-size:17px;font-weight:650;overflow:hidden}.now-artist{color:var(--text-dim);text-overflow:ellipsis;white-space:nowrap;margin:3px 0 0;font-size:13px;overflow:hidden}.queue{grid-template-rows:auto minmax(0,1fr);gap:8px;min-height:0;display:grid}.queue-head{letter-spacing:.09em;text-transform:uppercase;color:var(--text-faint);align-items:center;gap:7px;margin:0;font-size:11px;display:flex}.queue-empty{color:var(--text-faint);margin:0;font-size:12.5px}.queue-list{overscroll-behavior:contain;min-height:0;margin:0;padding:0 4px 0 0;list-style:none;overflow-y:auto}.queue-item{border-radius:8px;align-items:center;transition:background .12s;display:flex}.queue-item:hover{background:var(--surface-hi)}.queue-item.is-played .queue-play{opacity:.42}.queue-item.is-played:hover .queue-play{opacity:.72}.queue-item.is-current{background:var(--accent-soft);box-shadow:inset 2px 0 0 var(--accent)}.queue-item.is-current .queue-title{color:var(--accent);font-weight:620}.queue-item.is-queued{box-shadow:inset 2px 0 0 var(--text-dim)}.queue-art{width:32px;height:32px;display:block;position:relative}.queue-art img{object-fit:cover;background:var(--bg-elev);border-radius:5px;width:100%;height:100%}.queue-eq{background:#0000009e;border-radius:5px;justify-content:center;align-items:center;gap:2px;height:100%;display:flex;position:absolute;inset:0}.queue-eq i:first-child{height:7px}.queue-eq i:nth-child(2){height:12px}.queue-eq i:nth-child(3){height:5px}.queue-play{text-align:left;flex:1;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:10px;min-width:0;padding:6px 8px;display:grid}.queue-text{flex-direction:column;gap:1px;min-width:0;display:flex}.queue-title,.queue-artist{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.queue-title{font-size:12.5px;font-weight:520}.queue-artist{color:var(--text-dim);font-size:11.5px}.queue-time{color:var(--text-faint);font-variant-numeric:tabular-nums;font-size:11.5px}.queue-remove{color:var(--text-faint);border-radius:6px;padding:6px 8px}.queue-remove:hover{color:#ff7a7a}.transport{border-top:1px solid var(--line);-webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px);background:#0a0a0db8;grid-template-columns:minmax(0,1fr) minmax(320px,2fr) minmax(0,1fr);align-items:center;gap:20px;padding:12px 26px 16px;display:grid}.transport-track{align-items:center;gap:12px;min-width:0;display:flex}.transport-art{object-fit:cover;background:var(--bg-elev);border-radius:7px;width:48px;height:48px}.transport-meta{flex-direction:column;gap:2px;min-width:0;display:flex}.transport-title,.transport-artist{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.transport-title{font-size:13.5px;font-weight:580}.transport-title.dim{color:var(--text-dim)}.transport-artist{color:var(--text-dim);font-size:12px}.transport-center{flex-direction:column;align-items:center;gap:7px;width:100%;min-width:0;display:flex}.transport-buttons{align-items:center;gap:6px;display:flex}.ctl{width:34px;height:34px;color:var(--text-dim);border-radius:50%;place-items:center;transition:color .12s,background .12s,transform .12s;display:grid;position:relative}.ctl:hover{color:var(--text);background:var(--surface-hi)}.ctl:active{transform:scale(.92)}.ctl.is-on{color:var(--accent)}.ctl.is-on:after{content:"";background:var(--accent);border-radius:50%;width:4px;height:4px;position:absolute;transform:translateY(13px)}.ctl-primary{background:var(--text);color:#0a0a0c;width:42px;height:42px;margin:0 4px}.ctl-primary:hover{color:#0a0a0c;background:#fff;transform:scale(1.05)}.transport-seek{align-items:center;gap:11px;width:100%;display:flex}.time{color:var(--text-faint);font-variant-numeric:tabular-nums;text-align:center;min-width:38px;font-size:11.5px}.transport-volume{justify-content:flex-end;align-items:center;gap:8px;display:flex}.transport-volume .seek{max-width:110px}.seek{cursor:pointer;touch-action:none;outline:none;flex:1;padding:7px 0}.seek-rail{background:#ffffff29;border-radius:99px;height:4px;position:relative}.seek-fill{background:var(--text);border-radius:99px;height:100%;transition:background .15s}.seek-handle{background:#fff;border-radius:50%;width:12px;height:12px;margin-left:-6px;transition:transform .14s;position:absolute;top:50%;transform:translateY(-50%)scale(0);box-shadow:0 1px 5px #00000080}.seek:hover .seek-fill,.seek:focus-visible .seek-fill{background:var(--accent)}.seek:hover .seek-handle,.seek:focus-visible .seek-handle{transform:translateY(-50%)scale(1)}@media (width<=1080px){.main{grid-template-columns:minmax(0,1fr) 320px}.searchbox input{width:160px}}@media (width<=880px){.main{grid-template-columns:minmax(0,1fr)}.now{pointer-events:none;width:320px;height:200px;position:fixed;top:0;left:-10000px}.transport{grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:10px 16px 14px}.transport-center{order:3;grid-column:1/-1}.transport-volume{display:none}.topbar{padding:16px 16px 12px}.main{padding:0 16px 14px}.track{grid-template-columns:28px 40px minmax(0,1fr) 48px}.track-queue{display:none}}@media (prefers-reduced-motion:reduce){*{transition-duration:.001ms!important;animation-duration:.001ms!important}}.source{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.source-switch{background:var(--surface);border:1px solid var(--line);border-radius:99px;height:38px;padding:3px;display:flex}.source-opt{color:var(--text-dim);border-radius:99px;padding:0 14px;font-size:12.5px;font-weight:550;transition:background .14s,color .14s}.source-opt:hover:not(:disabled){color:var(--text)}.source-opt.is-on{background:var(--surface-hi);color:var(--text)}.source-opt:disabled{opacity:.6;cursor:default}.source-note{color:var(--text-faint);align-items:center;gap:7px;font-size:11.5px;display:inline-flex}.source-link{color:var(--text-dim);text-underline-offset:2px;font-size:11.5px;text-decoration:underline}.source-link:hover{color:var(--accent)}.source-error{color:#ff8a8a;max-width:220px;font-size:11.5px}.now-art-cover{background:#000;position:absolute;inset:0}.now-art-cover img{object-fit:contain;width:100%;height:100%}.source-badge{border:1px solid var(--line);letter-spacing:.05em;text-transform:uppercase;color:var(--text-faint);vertical-align:middle;border-radius:99px;margin-left:8px;padding:1px 7px;font-size:10px}.source-badge.is-local{color:#6ee7a8;border-color:#6ee7a84d}@media (width<=1080px){.source-note,.source-error{display:none}}