html,body{margin:0;padding:0;background:#e9ebee}html{-webkit-text-size-adjust:100%;text-size-adjust:100%}:root{color-scheme:light;--bg: #e9ebee;--surface: #ffffff;--surface-2: #f1f2f5;--border: #e2e4e9;--text: #17191d;--muted: #6d7280;--danger: #e5484d;--pitch: #14161b;--on-pitch: #f5f6f8;--on-pitch-muted: #a7adb8;--font: -apple-system, BlinkMacSystemFont, "Inter", "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--r-sm: 10px;--r-md: 16px;--r-lg: 24px;--r-full: 999px;--shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);--shadow-md: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .08);--shadow-lg: 0 2px 4px rgba(16, 24, 40, .06), 0 16px 40px rgba(16, 24, 40, .14)}html[data-theme=dark],html[data-theme=dark] body{background:#000}html[data-theme=dark]{color-scheme:dark;--bg: #000000;--surface: #101013;--surface-2: #1b1b20;--border: #26262c;--text: #f1f3f6;--muted: #9aa1ad;--danger: #ff8a80;--pitch: #f5f6f8;--on-pitch: #14161b;--on-pitch-muted: #5b626e;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);--shadow-md: 0 1px 2px rgba(0, 0, 0, .45), 0 8px 24px rgba(0, 0, 0, .5);--shadow-lg: 0 2px 4px rgba(0, 0, 0, .45), 0 16px 40px rgba(0, 0, 0, .55)}html[data-theme=dark] ::-webkit-scrollbar-thumb{background:#3a3f48;border-color:var(--bg)}@media(hover:hover){html[data-theme=dark] .search-row button:hover:not(:disabled),html[data-theme=dark] .np-play:hover:not(:disabled){background:#fff}}@media(hover:hover){html[data-theme=dark] .chip:hover,html[data-theme=dark] .backbtn:hover,html[data-theme=dark] .iconbtn:hover,html[data-theme=dark] .np .play-btn.np-side:hover:not(:disabled){border-color:#434a56}}html[data-theme=dark] .np-grip span{background:#3a3f48}html[data-theme=dark] .error{color:#ffa9a3}html[data-theme=dark] .player{background:#000;border-color:#1c1c21}html[data-theme=dark] .player .progress{background:#101013}html[data-theme=dark] .player .progress-fill{background:#fff}@media(min-width:900px){html[data-theme=dark] .player .play-btn.step,html[data-theme=dark] .player .play-btn.like{background:#000;border:1px solid #1c1c21}}@media(min-width:900px)and (hover:hover){html[data-theme=dark] .player .play-btn.step:hover:not(:disabled),html[data-theme=dark] .player .play-btn.like:hover:not(:disabled){background:#101013}}::selection{background:var(--text);color:var(--bg)}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#c9ccd3;border:3px solid var(--bg);border-radius:var(--r-full)}@media(hover:hover){::-webkit-scrollbar-thumb:hover{background:#a8adb7}}*{box-sizing:border-box}.brand,.search-row button,.chip,.track,.card,.qtile,.minibtn,.backbtn,.iconbtn,.play-btn,.bottomnav button,.rail-nav button,.rail-row,.player{transition-property:background-color,border-color,color,box-shadow;transition-duration:.25s;transition-timing-function:ease}@media(prefers-reduced-motion:reduce){.brand,.search-row button,.chip,.track,.card,.qtile,.minibtn,.backbtn,.iconbtn,.play-btn,.bottomnav button,.rail-nav button,.rail-row,.player,.np{transition-duration:.01ms}.player-meta strong.marquee>span{animation:none}}.app{min-height:100vh;min-height:100dvh;background:var(--bg);color:var(--text);font-family:var(--font);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column}.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;border-radius:var(--r-full);border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;touch-action:manipulation;box-shadow:var(--shadow-sm)}@media(hover:hover){.iconbtn:hover{border-color:#d3d6dd;box-shadow:var(--shadow-md)}}.iconbtn svg{width:20px;height:20px}.iconbtn:disabled{opacity:.35;cursor:default;box-shadow:none}.play-btn:active,.iconbtn:active,.chip:active,.backbtn:active,.minibtn:active,.np-close:active,.np-artistlink:active,.track:active,.card:active,.qtile:active,.spot-card:active,.rail-nav button:active,.rail-row:active,.bottomnav button:active,.search-row button:active{opacity:.6}.iconbtn.dark{background:var(--pitch);border-color:var(--pitch);color:var(--on-pitch)}.iconbtn.loved{color:var(--text);border-color:color-mix(in srgb,var(--text) 30%,var(--border))}.iconbtn.loved svg .fill{fill:currentColor}.topbar{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--border);padding:12px clamp(14px,4vw,28px);display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}.brand{margin:0;font-size:24px;font-weight:800;letter-spacing:-.5px;color:var(--text)}.brand .comma{color:inherit}.search{flex:1;min-width:min(100%,300px);margin:0}.panel{border:1px solid var(--border);border-radius:var(--r-md);padding:20px 16px 16px;background:var(--surface);margin:14px 0 0;min-width:0;box-shadow:var(--shadow-sm);position:relative}.panel>legend{position:absolute;top:-13px;left:12px;padding:2px 10px;margin:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-full);color:var(--text);font-size:12.5px;font-weight:700;letter-spacing:0;white-space:nowrap;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis}.search-row{display:flex;gap:8px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-full);padding:6px 6px 6px 16px;box-shadow:var(--shadow-sm)}.search-row:focus-within{border-color:color-mix(in srgb,var(--text) 30%,var(--border));box-shadow:0 0 0 3px color-mix(in srgb,var(--text) 12%,transparent)}.search-row input{flex:1;min-width:0;background:transparent;border:none;color:var(--text);font:inherit;font-size:16px;padding:8px 2px;outline:none;caret-color:var(--text)}.search-row input::placeholder{color:var(--muted)}.search-row button{font:inherit;font-size:14px;font-weight:600;background:var(--pitch);color:var(--on-pitch);border:none;border-radius:var(--r-full);padding:10px 20px;cursor:pointer;white-space:nowrap;touch-action:manipulation}@media(hover:hover){.search-row button:hover:not(:disabled){background:#23262d}}.search-row button:disabled{opacity:.4;cursor:default}.statusline{padding:10px clamp(14px,4vw,28px) 0;color:var(--muted);font-size:13px;max-width:1280px;width:100%;margin:0 auto}.error{margin:10px auto 0;max-width:1280px;width:calc(100% - clamp(28px,8vw,56px));padding:12px 16px;background:color-mix(in srgb,var(--danger) 8%,var(--surface));border:1px solid color-mix(in srgb,var(--danger) 35%,var(--border));border-radius:var(--r-md);color:#b3261e;font-size:13px}.content{flex:1;width:100%;max-width:860px;margin:0 auto;padding:10px clamp(14px,4vw,28px) 190px;display:grid;gap:16px;align-content:start}.empty{text-align:center;border:1px dashed var(--border);border-radius:var(--r-md);background:var(--surface);padding:48px 24px;color:var(--muted)}.empty-title{font-size:18px;font-weight:700;color:var(--text);margin:0 0 8px;letter-spacing:-.2px}.empty-sub{margin:0;font-size:14px}.queue{box-shadow:var(--shadow-sm)}.cards{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 10px}.card{flex:0 0 128px;width:128px;background:transparent;border:none;padding:0;cursor:pointer;touch-action:manipulation;display:grid;gap:8px;align-content:start;text-align:left;font:inherit;color:inherit}.card .art{box-shadow:var(--shadow-md)}@media(hover:hover){.card:hover .art{box-shadow:var(--shadow-lg)}}.card strong{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card small{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-art{width:100%;height:auto;aspect-ratio:1 / 1}.topcard-body{display:flex;gap:14px;align-items:center;cursor:pointer;background:var(--surface-2);border-radius:var(--r-md);padding:12px}.topcard-art{width:88px;height:88px;flex-shrink:0}.kind{display:inline-block;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.8px;text-transform:uppercase}.chips{display:flex;gap:8px;flex-wrap:wrap}.chip{font:inherit;font-size:13px;font-weight:600;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--r-full);padding:8px 16px;cursor:pointer;touch-action:manipulation;white-space:nowrap}@media(hover:hover){.chip:hover{border-color:#cfd3da;box-shadow:var(--shadow-sm)}}.chip.on{background:var(--pitch);color:var(--on-pitch);border-color:var(--pitch)}.account{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.account-who{display:flex;flex-direction:column;gap:2px;min-width:0;max-width:62ch}.account-who strong{font-size:14.5px;font-weight:700}.account-who small,.account-help{color:var(--muted);font-size:12.5px;line-height:1.5}.account-form{display:flex;flex-direction:column;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}.account-form label{font-size:12.5px;font-weight:700}.account-form textarea{font:inherit;font-size:12.5px;line-height:1.5;color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 12px;min-height:68px;resize:vertical;outline:none}.account-form textarea:focus-visible{border-color:var(--text)}.account-form textarea:disabled{opacity:.55}.account-actions{display:flex;gap:8px;flex-wrap:wrap}.chip.primary{background:var(--pitch);color:var(--on-pitch);border-color:var(--pitch)}.account .chip:disabled,.account-actions .chip:disabled{opacity:.35;cursor:default;box-shadow:none}.account-msg{margin:12px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted)}.account-msg.bad{color:var(--danger)}.backbtn{font:inherit;font-size:14px;font-weight:600;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--r-full);padding:9px 18px;cursor:pointer;touch-action:manipulation;box-shadow:var(--shadow-sm);display:inline-flex;align-items:center;gap:6px}@media(hover:hover){.backbtn:hover{border-color:#cfd3da;box-shadow:var(--shadow-md)}}.backbtn svg{width:16px;height:16px}.pagehead{display:flex;gap:16px;align-items:center;box-shadow:var(--shadow-sm)}.pagehead-art{width:104px;height:104px;flex-shrink:0}.pagehead .title{font-size:22px;font-weight:800;letter-spacing:-.4px}.tracks{list-style:none;margin:0;padding:0;display:grid;gap:2px}.track{display:flex;align-items:center;gap:12px;padding:9px 12px;background:transparent;border:none;border-radius:var(--r-sm);cursor:pointer;transition:background .15s ease;touch-action:manipulation}@media(hover:hover){.track:hover{background:var(--surface-2)}}.track.active{background:var(--surface-2);color:var(--text)}.track.active .sub,.track.active .dur,.track.active .idx{color:var(--muted)}.track.loading{opacity:.55;pointer-events:none}.idx{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums;flex-shrink:0;min-width:28px}.art{position:relative;width:48px;height:48px;flex-shrink:0;border-radius:var(--r-sm);background:var(--surface-2);display:flex;align-items:center;justify-content:center;color:var(--muted);overflow:hidden}.track.active .art{box-shadow:0 0 0 2px color-mix(in srgb,var(--text) 30%,transparent)}.art img{width:100%;height:100%;object-fit:cover;display:block}.art-fallback{-webkit-user-select:none;user-select:none;display:inline-flex}.art-fallback svg{width:22px;height:22px}.art-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#0a0c1073;color:#fff;opacity:0}.art-overlay svg{width:20px;height:20px}.eq{display:none;align-items:flex-end;gap:2.5px;height:16px}@media(hover:hover){.track:hover .art-overlay{opacity:1}}.track.playing .art-overlay{opacity:1;background:#0a0c1059}.track.playing .art-overlay .glyph{display:none}.track.playing .art-overlay .eq{display:inline-flex}.eq i{width:3px;border-radius:2px;background:#fff;animation:eqb .9s ease-in-out infinite}.eq i:nth-child(1){height:60%;animation-delay:0s}.eq i:nth-child(2){height:100%;animation-delay:-.3s}.eq i:nth-child(3){height:45%;animation-delay:-.6s}@keyframes eqb{0%,to{transform:scaleY(.4)}50%{transform:scaleY(1)}}@media(prefers-reduced-motion:reduce){.eq i{animation:none}}.meta{flex:1;min-width:0;display:grid;gap:2px}.title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sub{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dur{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;flex-shrink:0}.videotag{width:fit-content;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;line-height:1.5;white-space:nowrap;color:var(--muted);border:1px solid color-mix(in srgb,var(--muted) 55%,transparent);border-radius:var(--r-full);padding:1px 7px}.track .videotag,.nowpanel .videotag{justify-self:start}.np-meta .videotag{justify-self:center}.player{position:fixed;left:50%;transform:translate(-50%);width:min(860px,calc(100% - 24px));bottom:calc(68px + env(safe-area-inset-bottom));z-index:10;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow-lg);padding:12px 16px;display:grid;gap:10px;cursor:pointer}.player-body{display:flex;gap:12px;align-items:center;min-width:0}.player-art{width:52px;height:52px;object-fit:cover;flex-shrink:0;border-radius:12px;background:color-mix(in srgb,var(--text) 8%,transparent)}.player-art.placeholder{display:flex;align-items:center;justify-content:center;color:var(--muted)}.player-art.placeholder svg{width:24px;height:24px}.player-main{flex:1;min-width:0;display:grid;gap:8px}.player-meta,.player-row,.player .progress{min-width:0}.player-meta{display:grid;gap:1px;min-width:0}.player-meta strong,.player-meta small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-meta strong{font-size:14px;font-weight:600;color:var(--text)}.player-meta small{color:var(--muted);font-size:12px}.progress{position:relative;height:6px;background:var(--surface-2);border:none;border-radius:var(--r-full);cursor:pointer;outline:none;overflow:hidden;touch-action:manipulation}.progress:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--text) 20%,transparent)}.progress-buf,.progress-fill{position:absolute;top:0;bottom:0;left:0;display:block;border-radius:var(--r-full)}.progress-buf{background:color-mix(in srgb,var(--text) 14%,transparent)}.progress-fill{background:var(--text);transition:width .2s linear}.player-row{display:flex;align-items:center;gap:8px}.play-btn{font:inherit;font-weight:600;font-size:13px;line-height:1;background:color-mix(in srgb,var(--text) 9%,transparent);color:var(--text);border:none;border-radius:var(--r-full);padding:0;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;text-align:center;cursor:pointer;flex-shrink:0;touch-action:manipulation;white-space:nowrap}@media(hover:hover){.play-btn:hover:not(:disabled){background:color-mix(in srgb,var(--text) 16%,transparent)}}.play-btn:disabled{opacity:.35;cursor:default}.play-btn svg{width:20px;height:20px}.play-btn.main{background:var(--pitch);color:var(--on-pitch);width:52px;height:52px}@media(hover:hover){.play-btn.main:hover:not(:disabled){filter:brightness(1.15)}}.play-btn.main svg{width:24px;height:24px}.play-btn.step,.play-btn.like{width:44px;height:44px}.play-btn.like.loved{color:var(--text)}.play-btn.like.loved svg .fill{fill:currentColor}.time{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap;flex-shrink:0;margin-left:auto}.player audio{display:none}body.locked{overflow:hidden}.np{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;background:var(--bg);border:none;border-radius:0;display:flex;flex-direction:column;align-items:center;gap:12px;padding:calc(10px + env(safe-area-inset-top)) clamp(18px,6vw,32px) calc(18px + env(safe-area-inset-bottom));transform:translateY(103%);transition:transform .38s cubic-bezier(.32,.72,.28,1);touch-action:none;overflow-y:auto;overflow-x:clip;overscroll-behavior-x:none}html[data-theme=dark] .np{background:#0b0d11}.np-bg-layer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;display:none;overflow:hidden;filter:blur(8px) saturate(.9) brightness(.8)}html[data-theme=dark] .np-bg-layer{display:block}.np-bg-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;transform:scale(1.03)}.np-scrim{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;display:none;background:radial-gradient(circle at 50% 50%,rgb(255 255 255 / .035),transparent 58%),linear-gradient(180deg,#06080c1f,#06080c57)}html[data-theme=dark] .np-scrim{display:block}.np-inner{position:relative;z-index:1;flex:1 1 auto;min-height:0;width:100%;display:flex;flex-direction:column;align-items:center;gap:12px;overflow-y:auto;overflow-x:clip;overscroll-behavior-x:none}.np-stage,.np-media,.np-visual,.np-transport{width:100%;display:flex;flex-direction:column;align-items:center;gap:12px}.np-head-actions{display:flex;align-items:center;gap:2px}.np-sync{display:flex;align-items:center;gap:0;margin-right:2px}.np-sync-step{font:inherit;background:transparent;color:var(--text);border:none;padding:6px;cursor:pointer;touch-action:manipulation;display:inline-flex;border-radius:var(--r-full);opacity:.45;transition:opacity .2s ease,background-color .2s ease}.np-sync-step svg{width:17px;height:17px}.np-sync-readout{font:inherit;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;background:transparent;color:var(--muted);border:none;padding:5px 6px;min-width:42px;cursor:pointer;touch-action:manipulation;border-radius:var(--r-full);transition:color .2s ease,background-color .2s ease}@media(hover:hover){.np-sync-step:hover,.np-sync-readout:hover{opacity:1;color:var(--text);background:var(--surface-2)}}.np-sync-step:focus-visible,.np-sync-readout:focus-visible{outline:2px solid color-mix(in srgb,var(--text) 40%,transparent);outline-offset:1px}.np-lyrics-toggle{font:inherit;background:transparent;color:var(--text);border:none;padding:8px;cursor:pointer;touch-action:manipulation;display:inline-flex;border-radius:var(--r-full);opacity:.5;transition:opacity .2s ease,background-color .2s ease}.np-lyrics-toggle svg{width:21px;height:21px}.np-lyrics-toggle.active{opacity:1;background:var(--surface-2)}@media(hover:hover){.np-lyrics-toggle:hover{opacity:1;background:var(--surface-2)}}.np-lyrics{width:100%;height:clamp(260px,62vh,680px);overflow:hidden;color:var(--text)}.np-lyrics am-lyrics{--am-lyrics-highlight-color: #17191d;--lyrics-scroll-padding-top: 18%;--lyplus-blur-amount: .16em;--lyplus-blur-amount-near: .085em;height:100%;width:100%;font-family:var(--font);--lyplus-font-size-base: clamp(34px, 3vw, 52px);--lyplus-padding-line: 8px;--lyplus-text-color: rgb(246, 244, 239, .08);--lyplus-active-color: #f6f4ef;line-height:1.32;letter-spacing:-.04em;isolation:isolate}html[data-theme=dark] .np-lyrics am-lyrics{--am-lyrics-highlight-color: #f6f4ef}@media(min-width:900px){.np-inner.lyrics-on .np-head{width:min(1280px,100%);max-width:min(1280px,100%);margin:0 auto}.np-inner.lyrics-on .np-stage{display:grid;grid-template-columns:minmax(300px,430px) minmax(420px,760px);gap:clamp(2rem,4vw,4rem);align-items:start;justify-content:center;width:min(1280px,100%);margin:0 auto}}@media(max-width:899px){.np-stage,.np-media{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;width:100%}.np-visual{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%}.np-transport{flex:0 0 auto;width:100%;margin-top:auto}.np-inner.lyrics-on{overflow:hidden}.np-inner.lyrics-on .np-visual{display:none}.np-inner.lyrics-on .np-lyrics{order:0;flex:1 1 auto;min-height:0;height:auto}.np-inner.lyrics-on .np-media{order:1;flex:0 0 auto}}.np.open{transform:translateY(0)}.np.dragging,.np.scrubbing .vdisc,.np.scrubbing .progress-fill{transition:none}.np-grip{width:100%;display:flex;justify-content:center;padding:4px 0 2px;cursor:grab;touch-action:none}.np-grip span{width:48px;height:5px;border-radius:var(--r-full);background:#d4d7dd}.np-head{width:100%;max-width:460px;display:flex;justify-content:space-between;align-items:center;color:var(--text);font-size:15px;font-weight:700}.np-close{font:inherit;background:transparent;color:var(--text);border:none;padding:8px;cursor:pointer;touch-action:manipulation;display:inline-flex;border-radius:var(--r-full)}@media(hover:hover){.np-close:hover{background:var(--surface-2)}}.np-close svg{width:22px;height:22px}.np-meta{text-align:center;display:grid;gap:4px;max-width:460px;flex-shrink:0}.np-meta small{color:var(--muted);font-size:15px;font-weight:600;letter-spacing:.4px;text-transform:uppercase}.np-artistlink{font:inherit;background:none;border:none;padding:4px 10px;margin:0 auto;cursor:pointer;touch-action:manipulation;color:var(--muted);font-size:15px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;border-radius:var(--r-full)}@media(hover:hover){.np-artistlink:hover{color:var(--text);text-decoration:underline;text-underline-offset:4px}}.np-times{width:100%;max-width:460px;display:flex;justify-content:space-between;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}.np-row{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:4px}.np-play{width:68px;height:68px;font-size:15px;border-radius:var(--r-full);background:var(--pitch);color:var(--on-pitch);box-shadow:var(--shadow-md)}@media(hover:hover){.np-play:hover:not(:disabled){background:#23262d}}.np .play-btn.np-side{background:var(--surface);border:1px solid var(--border);color:var(--text);box-shadow:var(--shadow-sm)}@media(hover:hover){.np .play-btn.np-side:hover:not(:disabled){border-color:#cfd3da;box-shadow:var(--shadow-md)}}.np .play-btn:disabled{opacity:.3}.np-play svg{width:28px;height:28px}.np-side{width:52px;height:52px}.np-side svg{width:24px;height:24px}.vdisc{position:relative;width:100%;height:100%;border-radius:50%;background:repeating-radial-gradient(circle at 50% 50%,#0b0c0e 0,#0b0c0e 1px,#1b1d22 1px,#1b1d22 2px,#0b0c0e 2px,#0b0c0e 3px),radial-gradient(circle at 50% 50%,#26282e,#060708 72%);box-shadow:inset 0 0 0 1px #ffffff0f;transform:rotate(var(--disc-angle, 0deg));transition:transform .3s linear}.disc-shadow{position:absolute;left:5%;right:5%;bottom:-6%;height:24%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(10,10,15,.5),transparent 70%);filter:blur(14px);pointer-events:none}.vinyl-tilt{position:relative;width:100%;height:100%;transition:transform .18s ease-out}.vdisc-sheen{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:conic-gradient(from 200deg,transparent 0deg,rgba(255,255,255,.1) 20deg,transparent 42deg,transparent 180deg,rgba(255,255,255,.07) 202deg,transparent 224deg);pointer-events:none}.vdisc-label{position:absolute;top:50%;left:50%;width:34%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;overflow:hidden;background:var(--surface-2);box-shadow:0 0 0 4px #0006,inset 0 0 0 1px #ffffff40;display:flex;align-items:center;justify-content:center;color:#ffffffe6}.vdisc-label>svg{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto}.vdisc-label>img{position:relative;z-index:1}.vdisc-label img{width:100%;height:100%;object-fit:cover;display:block}.vdisc-label svg{width:40%;height:40%}.vdisc-label .spindle{position:absolute;top:50%;left:50%;width:13%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:var(--bg);box-shadow:inset 0 1px 3px #0009,0 0 0 2px #ffffff2e}.vinyl-wrap{position:relative;width:min(72vw,42vh,330px);aspect-ratio:1;touch-action:none;cursor:grab;border-radius:50%;perspective:650px;user-select:none;-webkit-user-select:none;flex-shrink:0}.vinyl-wrap:active{cursor:grabbing}.vinyl-wrap img,.casewrap img{-webkit-user-drag:none;user-select:none;-webkit-user-select:none;pointer-events:none}.tonearm{position:absolute;top:-3%;right:-11.5%;width:34%;height:92%;pointer-events:none;z-index:4}.tonearm-pivot{position:absolute;top:0;right:5%;width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#54585f,#17181c 72%);box-shadow:0 8px 18px #00000073,inset 0 1px 2px #ffffff4d}.tonearm-arm{position:absolute;top:19px;right:calc(5% + 11px);width:16px;height:calc(100% - 26px);transform-origin:50% 0;transition:transform 1s cubic-bezier(.3,.7,.3,1)}.tonearm-tube{position:absolute;top:0;left:50%;transform:translate(-50%);width:7px;height:84%;border-radius:4px;background:linear-gradient(90deg,#0b0c0f,#43474f 45%,#101114 62%,#2b2e35);box-shadow:2px 4px 8px #00000073}.tonearm-shell{position:absolute;bottom:5%;left:50%;transform:translate(-50%);width:26px;height:46px;border-radius:7px;background:linear-gradient(135deg,#202227,#090a0c);box-shadow:3px 5px 10px #00000080,inset 0 1px 1px #ffffff2e;display:flex;align-items:flex-start;justify-content:center}.tonearm-dot{width:5px;height:5px;margin-top:7px;border-radius:50%;background:color-mix(in srgb,var(--text) 25%,transparent);box-shadow:none;transition:background .5s ease,box-shadow .5s ease}.tonearm-dot.lit{background:var(--text);box-shadow:0 0 6px color-mix(in srgb,var(--text) 40%,transparent)}.paused-sleeve{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:12px;overflow:hidden;background:var(--surface-2);box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center;color:var(--muted);opacity:0;transform:translateY(-70%) rotate(-14deg) scale(.9);transition:transform .45s cubic-bezier(.2,.9,.25,1.15),opacity .3s ease;pointer-events:none;z-index:6}.paused-sleeve.dropped{opacity:1;transform:translateY(0) rotate(-4deg) scale(1)}.paused-sleeve img{width:100%;height:100%;object-fit:cover;display:block}.paused-sleeve svg{width:40%;height:40%}.seek-bubble{position:absolute;bottom:calc(100% + 14px);left:50%;transform:translate(-50%);background:#14161b;color:#fff;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;padding:8px 14px;border-radius:var(--r-full);box-shadow:var(--shadow-md);pointer-events:none;white-space:nowrap;z-index:5}.np-title{width:100%;max-width:560px;margin:0 auto;font-size:clamp(22px,6.5vw,34px);font-weight:800;letter-spacing:-.02em;line-height:1.15;text-align:center;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex-shrink:0}.np .progress{width:100%;max-width:460px;height:8px;min-height:28px;background:transparent;align-content:center;touch-action:none}.np .progress-buf,.np .progress-fill{height:8px;top:50%;bottom:auto;transform:translateY(-50%)}.np .progress-buf{background:var(--surface-2)}html[data-theme=dark] .np .progress-buf{background:#26262c}.np .progress-fill{background:var(--text)}.np .progress-fill:after{content:"";position:absolute;right:-7px;top:50%;transform:translateY(-50%);width:14px;height:14px;border-radius:50%;background:var(--text);box-shadow:var(--shadow-sm)}.casewrap{position:relative;width:156px;height:132px;flex-shrink:0}.casewrap .disc-slide{position:absolute;top:11px;right:0;width:110px;height:110px;animation:disc-out .9s cubic-bezier(.2,.7,.25,1) both}.casewrap .vdisc{width:100%;height:100%}.casewrap .case{position:absolute;left:0;top:4px;width:120px;height:124px;border-radius:10px;overflow:hidden;background:var(--surface-2);box-shadow:var(--shadow-md);z-index:2;display:flex;align-items:center;justify-content:center;color:var(--muted)}.casewrap .case img{width:100%;height:100%;object-fit:cover;display:block}.casewrap .case svg{width:40px;height:40px}@keyframes disc-out{0%{transform:translate(-48px)}to{transform:translate(0)}}.vinyl-tilt.swap-out-left{animation:disc-exit-left .65s ease-in both}.vinyl-tilt.swap-out-right{animation:disc-exit-right .65s ease-in both}@keyframes disc-exit-left{0%{transform:translate(0) scale(1);animation-timing-function:ease-out}35%{transform:translate(0) scale(1.14);animation-timing-function:ease-in}to{transform:translate(-120vw) scale(1.14)}}@keyframes disc-exit-right{0%{transform:translate(0) scale(1);animation-timing-function:ease-out}35%{transform:translate(0) scale(1.14);animation-timing-function:ease-in}to{transform:translate(120vw) scale(1.14)}}.vinyl-incoming{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.vinyl-incoming.from-right{animation:disc-enter-right .7s cubic-bezier(.2,.7,.25,1) both}.vinyl-incoming.from-left{animation:disc-enter-left .7s cubic-bezier(.2,.7,.25,1) both}@keyframes disc-enter-right{0%{transform:translate(120vw) scale(1.14);animation-timing-function:cubic-bezier(.2,.7,.25,1)}70%{transform:translate(0) scale(1.14);animation-timing-function:ease-out}to{transform:translate(0) scale(1)}}@keyframes disc-enter-left{0%{transform:translate(-120vw) scale(1.14);animation-timing-function:cubic-bezier(.2,.7,.25,1)}70%{transform:translate(0) scale(1.14);animation-timing-function:ease-out}to{transform:translate(0) scale(1)}}.np.swapping .tonearm-arm{transition-duration:.35s}@media(prefers-reduced-motion:reduce){.vdisc,.tonearm-arm,.paused-sleeve{transition:none}.vinyl-tilt.swap-out-left,.vinyl-tilt.swap-out-right,.vinyl-incoming.from-right,.vinyl-incoming.from-left,.casewrap .disc-slide{animation:none}}.shell{flex:1;width:100%;max-width:1280px;margin:0 auto;padding:10px clamp(14px,4vw,28px) 0;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start;align-content:start}.shell>.content{max-width:none;margin:0;padding:0 0 240px}.shell>*,.content>*{min-width:0}.panel{min-width:0}.rail,.nowpanel{display:none}.spotlight{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 12px;margin:0 -2px}.spot-card{flex:0 0 min(64vw,230px);scroll-snap-align:center;background:transparent;border:none;padding:0;cursor:pointer;touch-action:manipulation;display:grid;gap:10px;align-content:start;text-align:left;font:inherit;color:inherit}.spot-card .art{width:100%;height:auto;aspect-ratio:1 / 1;border-radius:20px;box-shadow:var(--shadow-md);transition:transform .25s ease,box-shadow .25s ease}@media(hover:hover){.spot-card:hover .art{transform:translateY(-4px);box-shadow:var(--shadow-lg)}}.spot-card strong{font-size:15px;font-weight:700;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.spot-card small{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.quickgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.qtile{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-sm);cursor:pointer;touch-action:manipulation;overflow:hidden;min-width:0;padding:6px}@media(hover:hover){.qtile:hover{box-shadow:var(--shadow-md)}}.qtile-art{width:52px;height:52px;flex-shrink:0;border-radius:12px}.qtile strong{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:8px;min-width:0;flex:1}.minibtn{font:inherit;background:transparent;color:var(--muted);border:none;padding:8px;cursor:pointer;touch-action:manipulation;white-space:nowrap;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-full)}@media(hover:hover){.minibtn:hover{color:var(--text);background:var(--surface-2)}}.minibtn svg{width:20px;height:20px}.minibtn.loved{color:var(--text)}.minibtn.loved svg .fill{fill:currentColor}.track.active .minibtn{color:var(--muted)}.bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;background:var(--surface);border-top:1px solid var(--border);box-shadow:0 -8px 24px #10182814;padding-bottom:env(safe-area-inset-bottom)}.bottomnav button{flex:1;font:inherit;background:transparent;color:var(--muted);border:none;min-height:60px;cursor:pointer;touch-action:manipulation;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;font-weight:600}.bottomnav button svg{width:23px;height:23px}.bottomnav button.on{color:var(--text)}.bottomnav button.on .dot{width:4px;height:4px;border-radius:var(--r-full);background:var(--text)}@media(min-width:900px){.bottomnav{display:none}.shell{grid-template-columns:232px minmax(0,1fr)}.shell>.content{padding-bottom:170px}.rail{display:grid;gap:16px;align-content:start;position:sticky;top:88px;padding-bottom:170px}.rail .panel{padding:12px}.rail-nav{display:grid;gap:4px}.rail-nav button{font:inherit;font-size:14px;font-weight:600;background:transparent;color:var(--muted);border:none;border-radius:12px;padding:10px 12px;cursor:pointer;touch-action:manipulation;text-align:left;display:flex;align-items:center;gap:12px}.rail-nav button svg{width:21px;height:21px}@media(hover:hover){.rail-nav button:hover{background:var(--surface-2);color:var(--text)}}.rail-nav button.on{background:var(--surface-2);color:var(--text)}.rail-saved{display:grid;gap:4px}.rail-row{display:flex;align-items:center;gap:10px;background:transparent;border:none;border-radius:12px;padding:6px;cursor:pointer;touch-action:manipulation;font:inherit;color:var(--text);text-align:left;min-width:0}@media(hover:hover){.rail-row:hover{background:var(--surface-2)}}.rail-art{width:40px;height:40px}.rail-art svg{width:20px;height:20px}.rail-nav button svg{width:21px;height:21px;flex-shrink:0}.rail-row-meta{flex:1;min-width:0;display:grid;gap:2px}.rail-row-meta strong{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rail-row-meta small{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.6px}.rail-hint{margin:0;color:var(--muted);font-size:12px}.quickgrid{grid-template-columns:repeat(4,minmax(0,1fr))}.player{width:min(1280px,calc(100% - 24px));bottom:calc(12px + env(safe-area-inset-bottom))}}@media(min-width:1200px){.shell{grid-template-columns:232px minmax(0,1fr) 300px}.nowpanel{display:grid;gap:16px;align-content:start;position:sticky;top:88px;min-width:0;padding-bottom:170px}.nowpanel .panel{padding:16px}.nowpanel-now{display:grid;gap:10px}.nowpanel-art{width:100%;height:auto;aspect-ratio:1 / 1}.nowpanel-idle{margin:0;color:var(--muted);font-size:13px}}@media(max-width:899px){.player-main{display:flex;align-items:center;gap:2px}.player-meta{flex:1;order:0}.player-row{display:contents}.player-row .play-btn.like{order:1}.player-row .play-btn.prev{order:2}.player-row .play-btn.main{order:3}.player-row .play-btn.next{order:4}.play-btn.step,.play-btn.like{background:transparent;box-shadow:none;width:auto;height:auto;padding:12px 8px;color:var(--text)}@media(hover:hover){.play-btn.step:hover:not(:disabled),.play-btn.like:hover:not(:disabled){background:transparent;opacity:.65}}.play-btn.main{width:48px;height:48px}.player .progress{position:absolute;top:0;left:0;right:0;height:3px;min-height:0}.player{overflow:hidden}.player-meta strong.marquee{display:flex;gap:48px}.player-meta strong.marquee>span{flex-shrink:0;animation:marquee-scroll 9s linear infinite}@keyframes marquee-scroll{to{transform:translate(calc(-100% - 48px))}}.player .time{display:none}}@media(max-width:560px){.brand{font-size:22px}.player-row{gap:4px}.dur{display:none}.topbar{padding:10px 14px}.search{order:3;flex-basis:100%}.content{padding:8px 14px 190px}.track{padding:10px 8px}.search-row button,.play-btn{min-height:44px}.progress{min-height:22px}.player{touch-action:none}}
