.now-playing-glass{--npg-label: var(--label, #1c1c1e);--npg-label-2: var(--label-2, rgba(60, 60, 67, .6));--npg-label-3: var(--label-3, rgba(60, 60, 67, .45));--npg-fill: var(--fill, rgba(118, 118, 128, .12));--npg-accent: var(--np-accent, #34c759);--npg-frost: var(--lg-frost, rgba(255, 255, 255, .5));--npg-frost-strong: var(--lg-frost-strong, rgba(255, 255, 255, .62));--npg-edge: var(--lg-edge, rgba(0, 0, 0, .12));--npg-glow: var(--lg-glow, rgba(0, 0, 0, .05));--npg-shadow: var(--lg-shadow, rgba(17, 17, 26, .08));--npg-ambient-opacity: .34;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}@media(prefers-color-scheme:dark){.now-playing-glass{--npg-label: var(--label, #fff);--npg-label-2: var(--label-2, rgba(235, 235, 245, .6));--npg-label-3: var(--label-3, rgba(235, 235, 245, .45));--npg-fill: var(--fill, rgba(118, 118, 128, .24));--npg-frost: var(--lg-frost, rgba(18, 24, 36, .42));--npg-frost-strong: var(--lg-frost-strong, rgba(18, 24, 36, .6));--npg-edge: var(--lg-edge, rgba(255, 255, 255, .12));--npg-glow: var(--lg-glow, rgba(255, 255, 255, .05));--npg-shadow: var(--lg-shadow, rgba(0, 0, 0, .25));--npg-ambient-opacity: .42}}[data-theme=light] .now-playing-glass{--npg-label: var(--label, #1c1c1e);--npg-label-2: var(--label-2, rgba(60, 60, 67, .6));--npg-label-3: var(--label-3, rgba(60, 60, 67, .45));--npg-fill: var(--fill, rgba(118, 118, 128, .12));--npg-frost: var(--lg-frost, rgba(255, 255, 255, .5));--npg-frost-strong: var(--lg-frost-strong, rgba(255, 255, 255, .62));--npg-edge: var(--lg-edge, rgba(0, 0, 0, .12));--npg-glow: var(--lg-glow, rgba(0, 0, 0, .05));--npg-shadow: var(--lg-shadow, rgba(17, 17, 26, .08));--npg-ambient-opacity: .34}[data-theme=dark] .now-playing-glass{--npg-label: var(--label, #fff);--npg-label-2: var(--label-2, rgba(235, 235, 245, .6));--npg-label-3: var(--label-3, rgba(235, 235, 245, .45));--npg-fill: var(--fill, rgba(118, 118, 128, .24));--npg-frost: var(--lg-frost, rgba(18, 24, 36, .42));--npg-frost-strong: var(--lg-frost-strong, rgba(18, 24, 36, .6));--npg-edge: var(--lg-edge, rgba(255, 255, 255, .12));--npg-glow: var(--lg-glow, rgba(255, 255, 255, .05));--npg-shadow: var(--lg-shadow, rgba(0, 0, 0, .25));--npg-ambient-opacity: .42}.npg-glass{background:var(--npg-frost);-webkit-backdrop-filter:blur(12px) saturate(1.7);backdrop-filter:blur(12px) saturate(1.7);box-shadow:inset 0 0 2px 1px var(--npg-edge),inset 0 0 10px 4px var(--npg-glow),0 4px 16px var(--npg-shadow),0 8px 24px var(--npg-shadow)}.npg-panel{background:var(--npg-frost-strong);-webkit-backdrop-filter:blur(16px) saturate(1.8);backdrop-filter:blur(16px) saturate(1.8);box-shadow:inset 0 0 2px 1px var(--npg-edge),inset 0 0 10px 4px var(--npg-glow),0 4px 16px var(--npg-shadow),0 8px 24px var(--npg-shadow),0 16px 56px var(--npg-shadow)}.npg-chip{background:var(--npg-frost);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);box-shadow:inset 0 0 2px 1px var(--npg-edge),inset 0 0 8px 3px var(--npg-glow),0 2px 8px var(--npg-shadow)}.npg-mini{position:relative;width:44px;height:44px}.npg-disc-btn{position:absolute;top:0;right:0;bottom:0;left:0;border:0;padding:0;margin:0;border-radius:22px;cursor:pointer;-webkit-tap-highlight-color:transparent}.npg-card{position:absolute;left:0;top:0;z-index:10;display:flex;align-items:center;min-height:60px;width:max-content;overflow:hidden;padding:8px 16px 8px 60px;color:var(--npg-label);text-decoration:none}.npg-card--right{left:auto;right:0;padding:8px 60px 8px 16px;justify-content:flex-end}.npg-card--right .npg-detail{text-align:right}.npg-card--right .npg-label{justify-content:flex-end}.npg-cover{position:absolute;z-index:20;overflow:hidden;pointer-events:none}.npg-cover-inner{display:block;width:100%;height:100%}.npg-cover-img{width:100%;height:100%;object-fit:cover;display:block}.npg-cover-fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:var(--npg-fill);color:var(--npg-label-2)}.npg-detail{position:relative;z-index:1;min-width:0;text-align:left}.npg-label{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--npg-label-3)}.npg-title{display:inline-block;white-space:nowrap;font-size:13.5px;font-weight:600;color:var(--npg-label)}.npg-truncate{max-width:100%;overflow:hidden;text-overflow:ellipsis}.npg-artist{font-weight:400;color:var(--npg-label-2)}.npg-title-clip{display:block;max-width:min(184px,46vw);overflow:hidden}.npg-card-pill{display:inline-flex;align-items:center;gap:10px;max-width:100%;border-radius:9999px;padding:6px 16px 6px 6px;color:var(--npg-label);text-decoration:none}.npg-card-cover{width:40px;height:40px;flex-shrink:0;border-radius:9999px;object-fit:cover}.npg-progress{position:absolute;left:0;right:0;bottom:0;height:2.5px;z-index:2;background:color-mix(in srgb,var(--npg-label) 12%,transparent)}.npg-progress-fill{display:block;height:100%;background:var(--npg-accent);transition:width .4s ease}.npg-progress--chip{position:static;margin-top:5px;height:2.5px;border-radius:2px;overflow:hidden}.npg-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}.npg-live-dot{width:6px;height:6px;border-radius:50%;background:var(--npg-accent);box-shadow:0 0 color-mix(in srgb,var(--npg-accent) 60%,transparent);animation:npg-pulse 2s ease-out infinite}@keyframes npg-pulse{0%{box-shadow:0 0 color-mix(in srgb,var(--npg-accent) 55%,transparent)}70%{box-shadow:0 0 0 5px transparent}to{box-shadow:0 0 0 0 transparent}}.npg-halo{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;border-radius:9999px;pointer-events:none;animation:npg-halo 2.4s ease-out infinite}@keyframes npg-halo{0%{box-shadow:0 0 7px 1px color-mix(in srgb,var(--npg-accent) 70%,transparent),0 0 color-mix(in srgb,var(--npg-accent) 50%,transparent)}70%{box-shadow:0 0 7px 1px color-mix(in srgb,var(--npg-accent) 30%,transparent),0 0 0 7px transparent}to{box-shadow:0 0 7px 1px color-mix(in srgb,var(--npg-accent) 70%,transparent),0 0 0 0 transparent}}.npg-disc{animation:npg-spin 9s linear infinite}@keyframes npg-spin{to{transform:rotate(360deg)}}.npg-eq{display:inline-flex;align-items:flex-end;gap:2px;height:11px;line-height:0;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}.npg-eq>span{width:2.5px;height:28%;border-radius:1px;background:var(--npg-accent)}.npg-eq-live>span{animation:npg-eq-bounce .9s ease-in-out infinite}.npg-eq-live>span:nth-child(1){animation-delay:-.2s;animation-duration:.95s}.npg-eq-live>span:nth-child(2){animation-delay:-.5s;animation-duration:1.15s}.npg-eq-live>span:nth-child(3){animation-delay:-.35s;animation-duration:.8s}.npg-eq-live>span:nth-child(4){animation-delay:-.65s;animation-duration:1.05s}@keyframes npg-eq-bounce{0%,to{height:22%}50%{height:100%}}.npg-ambient{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none}.npg-ambient:before{content:"";position:absolute;top:-45%;right:-45%;bottom:-45%;left:-45%;background-image:var(--np-art);background-size:cover;background-position:center;filter:blur(30px) saturate(1.6);opacity:var(--npg-ambient-opacity)}.npg-title-marquee{animation:npg-marquee 8s ease-in-out infinite alternate;will-change:transform}@keyframes npg-marquee{0%,18%{transform:translate(0)}82%,to{transform:translate(calc(-1 * var(--np-scroll, 0px)))}}@media(prefers-reduced-motion:reduce){.npg-live-dot,.npg-halo,.npg-disc,.npg-title-marquee{animation:none}.npg-eq-live>span{animation:none;height:55%}.npg-halo{box-shadow:0 0 6px 1px color-mix(in srgb,var(--npg-accent) 55%,transparent)}}:root{--label: #1c1c1e;--label-2: rgba(60, 60, 67, .6);--fill: rgba(118, 118, 128, .12);--bg: #f2f2f7;--bg-2: #fff;--line: rgba(0, 0, 0, .08);color-scheme:light}:root[data-theme=dark]{--label: #fff;--label-2: rgba(235, 235, 245, .6);--fill: rgba(118, 118, 128, .24);--bg: #07080c;--bg-2: #11131a;--line: rgba(255, 255, 255, .1);color-scheme:dark}*{box-sizing:border-box}html,body{margin:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,system-ui,sans-serif;color:var(--label);background:radial-gradient(900px 600px at 75% -10%,color-mix(in srgb,#7c5cff 22%,transparent),transparent 60%),radial-gradient(800px 600px at 10% 110%,color-mix(in srgb,#2fd6c4 18%,transparent),transparent 55%),var(--bg);background-attachment:fixed;min-height:100dvh;-webkit-font-smoothing:antialiased}.page{max-width:560px;margin:0 auto;padding:56px 20px 64px}.hero h1{font-size:30px;font-weight:800;letter-spacing:-.02em;margin:0 0 10px}.hero .tag{font-size:15px;line-height:1.5;color:var(--label-2);margin:0 0 14px}.hero .tag b{color:var(--label);font-weight:600}.links{display:flex;gap:10px}.links a{font-size:13px;font-weight:600;text-decoration:none;color:var(--label);padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:var(--bg-2)}.links a:hover{border-color:color-mix(in srgb,var(--label) 30%,transparent)}.install{display:inline-flex;align-items:center;gap:10px;margin-top:12px;max-width:100%;padding:7px 7px 7px 14px;border-radius:12px;cursor:pointer;font:inherit;background:var(--bg-2);border:1px solid var(--line);color:var(--label)}.install:hover{border-color:color-mix(in srgb,var(--label) 30%,transparent)}.install code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.install code:before{content:"$ ";color:var(--label-2)}.install .install-copy{flex:none;font-size:12px;font-weight:600;padding:5px 11px;border-radius:8px;background:var(--fill);color:var(--label-2)}.stage{position:relative;margin:28px 0;height:200px;border-radius:22px;border:1px solid var(--line);background:color-mix(in srgb,var(--bg-2) 60%,transparent);overflow:hidden}.stage-anchor{position:absolute;top:14px}.stage-anchor.left{left:14px}.stage-anchor.right{right:14px}.stage-center{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center}.hint{position:absolute;left:50%;bottom:14px;transform:translate(-50%);font-size:12px;color:var(--label-2)}.controls{display:flex;flex-direction:column;gap:10px}.seg{display:flex;align-items:center;gap:12px}.seg-label{flex:0 0 76px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--label-2)}.seg-track{display:inline-flex;gap:2px;padding:3px;border-radius:12px;background:var(--fill);flex-wrap:wrap}.seg-btn{border:0;cursor:pointer;font:inherit;font-size:13px;font-weight:600;padding:6px 12px;border-radius:9px;background:transparent;color:var(--label-2)}.seg-btn.on{background:var(--bg-2);color:var(--label);box-shadow:0 1px 3px #0000001f}.usage{margin-top:32px}.usage h2{font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--label-2)}.usage pre{overflow:auto;font-size:12.5px;line-height:1.55;padding:16px;border-radius:14px;background:var(--bg-2);border:1px solid var(--line);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.foot{margin-top:40px;font-size:12px;color:var(--label-2)}.foot a{color:var(--label)}