.np-tinted,.now-playing{--np-surface:color-mix(in srgb, var(--art-tint,#1b1e24) 50%, var(--color-bg))}.now-playing .waveform .fill-accent{fill:var(--art-accent,var(--color-accent))}.player-dock-bar{background-color:var(--np-surface);transition:background-color .4s}.np-mini{inset-inline:0;bottom:calc(57px + env(safe-area-inset-bottom));z-index:20;isolation:isolate;border-top:1px solid var(--color-line);background-color:var(--np-surface);touch-action:none;transition:background-color .4s;position:fixed;overflow:clip}.np-mini-row{align-items:center;gap:.25rem;padding:.375rem .5rem .375rem 1rem;display:flex}.np-mini-open{text-align:left;border-radius:.5rem;flex:1;align-items:center;gap:.75rem;min-width:0;min-height:2.75rem;padding-right:.25rem;display:flex}.np-mini-open:focus-visible{outline-offset:2px}.np-mini-progress{background:#ffffff26;height:2px;position:absolute;inset:auto 0 0;overflow:hidden}.np-mini-progress span{background:var(--art-accent,var(--color-accent));transform-origin:0;height:100%;display:block}@media (forced-colors:active){.np-mini-progress span{background:highlight}}html:has(.player-dock){scroll-padding-bottom:calc(57px + 4rem + 1rem + env(safe-area-inset-bottom))}@media (min-width:768px){html:has(.player-dock){scroll-padding-bottom:calc(var(--dock-height) + 1rem)}}.now-playing{isolation:isolate;width:100%;max-width:none;height:100%;max-height:none;color:var(--color-fg);background-color:var(--np-surface);border:0;margin:0;padding:0;position:fixed;inset:0;overflow:hidden}.now-playing[open]{flex-direction:column;display:flex}.now-playing::backdrop{background:var(--color-bg)}.np-wash{z-index:-1;pointer-events:none;background:radial-gradient(90% 65% at 50% 8%, var(--art-tint,#1b1e24), transparent 72%);position:absolute;inset:0;overflow:hidden;-webkit-mask-image:linear-gradient(#0000,#000 5rem 55%,#0000 92%);mask-image:linear-gradient(#0000,#000 5rem 55%,#0000 92%)}.np-wash .cover-backdrop{opacity:.38;inset:-64px}.np-header{padding:max(.875rem, env(safe-area-inset-top)) 1rem .25rem 1.25rem;flex-shrink:0;align-items:center;gap:.5rem;display:flex}.np-grip{display:none}@media (max-width:767px){.np-header{touch-action:none;position:relative}.np-grip{top:max(.375rem, calc(env(safe-area-inset-top) - .5rem));background:var(--color-muted);opacity:.6;border-radius:999px;width:2.5rem;height:.3rem;display:block;position:absolute;left:50%;translate:-50%}}.np-scroll{overscroll-behavior:contain;flex:1;min-height:0;scroll-padding-block:1rem;overflow-y:auto}.np-layout{width:min(100%,32rem);padding:.5rem 1.25rem calc(2.5rem + env(safe-area-inset-bottom));grid-template-areas:"main""credits";gap:2rem;margin-inline:auto;display:grid}.np-main{flex-direction:column;grid-area:main;gap:1.25rem;min-width:0;display:flex}.np-side{grid-area:side;display:none}.np-stage{justify-content:center;display:flex}.np-cover{border-radius:1rem;width:min(100%,40dvh,22rem);min-width:8rem;box-shadow:0 28px 60px -16px #000c}.np-lyrics-full{width:100%}.np-transport{justify-content:space-between;align-items:center;display:flex}.np-options{border-top:1px solid var(--color-line);flex-direction:column;padding-top:.75rem;display:flex}.np-speed{background:var(--color-surface-raised);font-variant-numeric:tabular-nums;border-radius:.625rem;width:auto;min-height:2.75rem;padding:0 .75rem;font-size:.875rem}.np-up-next,.np-output{text-align:left;width:100%;min-height:44px;color:var(--color-muted);border-radius:.75rem;align-items:center;gap:.5rem;padding-inline:.75rem;font-size:.875rem;display:flex}@media (hover:hover){.np-up-next:hover,.np-output:hover{background:var(--color-surface-raised);color:var(--color-fg)}}.np-output[data-connection=connected],.np-output[data-connection=connecting]{color:var(--art-accent,var(--color-accent))}.np-lyrics-strip{background:color-mix(in srgb, var(--art-tint,#1b1e24) 45%, var(--color-surface));border-radius:1rem;padding:.75rem 1rem 1rem 1.125rem;position:relative}.np-lyrics-open,.np-lyrics-hide{border-radius:999px;align-items:center;min-height:44px;padding-inline:.875rem;font-size:.8125rem;font-weight:500;display:inline-flex}.np-lyrics-open{background:#ffffff14}.np-lyrics-open:after{content:"";border-radius:1rem;position:absolute;inset:0}@media (hover:hover){.np-lyrics-strip:hover .np-lyrics-open{background:#ffffff24}}.np-lyrics-hide{border:1px solid var(--color-line);align-self:center}@media (hover:hover){.np-lyrics-hide:hover{background:var(--color-surface-raised)}}.np-lyrics-lines{color:var(--color-muted);flex-direction:column;gap:.125rem;margin-top:.25rem;font-size:1.125rem;font-weight:500;line-height:1.45;animation:.28s cubic-bezier(.2,0,0,1) np-lyric-in;display:flex}.np-lyrics-lines li{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.np-lyrics-lines [data-current=true]{color:var(--color-fg)}@keyframes np-lyric-in{0%{opacity:0;transform:translateY(.5rem)}}.np-lyrics-full-screen{z-index:1;border:1px solid var(--color-line);border-radius:999px;align-items:center;min-height:44px;padding-inline:.875rem;font-size:.8125rem;font-weight:500;display:inline-flex;position:relative}@media (hover:hover){.np-lyrics-full-screen:hover{background:var(--color-surface-raised)}}.lyrics-sheet{--np-surface:color-mix(in srgb, var(--art-tint,#1b1e24) 50%, var(--color-bg));isolation:isolate;width:100%;max-width:none;height:100%;max-height:none;color:var(--color-fg);background-color:var(--np-surface);border:0;margin:0;padding:0;position:fixed;inset:0;overflow:hidden}.lyrics-sheet[open]{flex-direction:column;animation:.32s cubic-bezier(.2,0,0,1) np-sheet-in;display:flex}.lyrics-sheet::backdrop{background:var(--color-bg)}.lyrics-sheet-header{width:min(100%,48rem);padding:max(.875rem, env(safe-area-inset-top)) 1rem .5rem 1.25rem;flex-shrink:0;align-items:center;gap:.75rem;margin-inline:auto;display:flex}.lyrics-sheet-body{flex-direction:column;flex:1;width:min(100%,48rem);min-height:0;margin-inline:auto;padding-inline:1rem;display:flex}.lyrics-sheet-panel{flex:1;position:relative}.lyrics-box-sheet{flex:1;gap:.5rem;max-height:none;padding-block:25dvh 45dvh;-webkit-mask-image:linear-gradient(#0000,#000 10% 85%,#0000);mask-image:linear-gradient(#0000,#000 10% 85%,#0000)}.lyrics-box-sheet .lyrics-line{letter-spacing:-.01em;transform-origin:0;min-height:3rem;padding:.25rem .5rem;font-size:clamp(1.625rem,1.1rem + 2.6vw,2.75rem);font-weight:500;line-height:1.25;transition:color .3s,transform .35s cubic-bezier(.2,0,0,1)}.lyrics-box-sheet .lyrics-line[data-past]{transform:scale(.94)}.lyrics-box-sheet .lyrics-line[aria-current=true]{color:var(--color-fg)}.lyrics-box-sheet .lyrics-plain{color:var(--color-subtle);font-size:clamp(1.25rem,1rem + 1.4vw,1.75rem);font-weight:500}.lyrics-box-sheet .dc-translation{font-size:.6em}.lyrics-back{background:var(--np-surface);position:absolute;bottom:1rem;left:50%;translate:-50%;box-shadow:0 8px 24px -8px #000a}.lyrics-sheet-footer{width:min(100%,48rem);padding:.5rem 1.25rem calc(1rem + env(safe-area-inset-bottom));flex-direction:column;flex-shrink:0;gap:.25rem;margin-inline:auto;display:flex}.np-credits{border:1px solid var(--color-line);background:color-mix(in srgb, var(--color-surface) 82%, transparent);border-radius:1.25rem;flex-direction:column;grid-area:credits;gap:1rem;min-width:0;padding:1.25rem;display:flex}.np-credit-list{grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:1rem;display:grid}.np-credit-list dt{font-size:var(--label-size);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--color-muted);font-weight:500}.np-credit-list dd{overflow-wrap:anywhere;margin:.25rem 0 0;font-size:.9375rem}.np-credit-list a{min-height:24px;display:inline-block}.np-credit-card{border:1px solid var(--color-line);background:var(--color-surface);border-radius:.875rem;padding:1rem}.np-queue-part{margin-top:.875rem;margin-bottom:.25rem}li:first-child>.np-queue-part{margin-top:0}.np-queue-row{border-radius:.625rem;grid-template-columns:1.5rem 2.5rem minmax(0,1fr) auto auto;align-items:center;column-gap:.625rem;min-height:3.25rem;padding:.25rem .25rem .25rem .125rem;display:grid;position:relative}.np-queue-row[data-current=true]{background:var(--color-surface-raised)}.np-queue-cover{border-radius:.5rem;width:2.5rem;height:2.5rem}.np-queue-main{text-align:left;min-width:0;min-height:2.75rem}.np-queue-main>span{line-height:1.35}.np-queue-time{color:var(--color-muted);font-variant-numeric:tabular-nums;font-size:.75rem}.np-queue-actions{display:none}.np-queue-more-button{width:2.5rem;height:2.75rem;color:var(--color-muted);border-radius:.5rem;justify-content:center;align-items:center;display:inline-flex}@media (hover:hover) and (pointer:fine) and (not (any-pointer:coarse)){.np-queue-more{display:none}.np-queue-actions{background:var(--color-surface-raised);box-shadow:-.75rem 0 .75rem -.25rem var(--color-surface-raised);opacity:0;pointer-events:none;border-radius:.625rem;align-items:center;padding-inline-start:.5rem;display:flex;position:absolute;inset-block:0;inset-inline-end:.25rem}.np-queue-actions button{width:2.25rem;height:2.25rem;color:var(--color-muted);border-radius:.5rem}.np-queue-actions button:hover:not(:disabled){color:var(--color-fg)}.np-queue-actions button:disabled{opacity:.3}.np-queue-actions button:focus-visible{outline-offset:-2px}.np-queue-row:hover{background:var(--color-surface-raised)}.np-queue-row:hover .np-queue-actions,.np-queue-actions:focus-within{opacity:1;pointer-events:auto}.np-queue-row:has(:focus-visible) .np-queue-actions{opacity:1;pointer-events:auto}[data-dragging=true] .np-queue-actions{opacity:0;pointer-events:none}}.np-queue-clear{border-top:1px solid var(--color-line);flex-wrap:wrap;gap:0 1rem;margin-top:.875rem;padding-top:.25rem;display:flex}.np-queue-clear button{min-height:2.75rem;color:var(--color-muted);padding-inline:.25rem;font-size:.75rem}@media (hover:hover){.np-queue-clear button:hover:not(:disabled){color:var(--color-fg)}}.np-queue-clear button:disabled{opacity:.5}.np-drag{min-width:24px;min-height:44px;color:var(--color-muted);cursor:grab;touch-action:none;justify-content:center;align-self:stretch;align-items:center;display:flex}@media (hover:hover){.np-drag:hover{color:var(--color-fg)}}[data-dragging=true]{cursor:grabbing;-webkit-user-select:none;user-select:none}.np-queue-row[data-dragged=true]{opacity:.5}.np-queue-row[data-drop=before]:before,.np-queue-row[data-drop=after]:after{content:"";background:var(--art-accent,var(--color-accent));border-radius:1px;height:2px;position:absolute;inset-inline:.5rem}.np-queue-row[data-drop=before]:before{top:-3px}.np-queue-row[data-drop=after]:after{bottom:-3px}.np-sheet-grip{display:none}@media (max-width:1023px){.np-queue-sheet{width:100%;max-width:none;max-height:min(85dvh,46rem);padding:0 1.25rem calc(1.25rem + env(safe-area-inset-bottom));border-bottom:0;border-radius:1.25rem 1.25rem 0 0;inset:auto 0 0}.np-queue-sheet[open]{animation:.32s cubic-bezier(.2,0,0,1) np-sheet-in}.np-queue-sheet::backdrop{background:#000a;animation:.32s ease-out np-fade-in}.np-sheet-grip{z-index:1;background:var(--color-surface);cursor:grab;touch-action:none;justify-content:center;margin-inline:-1.25rem;padding-block:.75rem 1rem;display:flex;position:sticky;top:0}.np-sheet-grip:before{content:"";background:var(--color-muted);opacity:.6;border-radius:999px;width:2.5rem;height:.3rem}}@keyframes np-sheet-in{0%{transform:translateY(100%)}}@keyframes np-fade-in{0%{opacity:0}}@media (min-width:1024px){.np-header{padding:1.25rem 2rem .25rem 2.5rem}.np-layout{grid-template-columns:minmax(0,1fr) minmax(20rem,26rem);grid-template-areas:"main side""credits side";align-items:start;column-gap:3.5rem;width:min(100%,76rem);padding-inline:2.5rem}.np-main,.np-credits{justify-self:center;width:100%;max-width:34rem}.np-cover{width:min(100%,44dvh,30rem)}.np-side{overscroll-behavior:contain;border:1px solid var(--color-line);background:color-mix(in srgb, var(--color-surface) 72%, transparent);border-radius:1.25rem;max-height:calc(100dvh - 5rem);padding:1.25rem 1rem;display:block;position:sticky;top:0;overflow-y:auto}.np-up-next{display:none}}::view-transition-new(.now-playing-enter){animation:.34s cubic-bezier(.2,0,0,1) both np-rise}::view-transition-old(.now-playing-exit){animation:.22s cubic-bezier(.3,0,1,1) both np-sink}@keyframes np-rise{0%{opacity:0;transform:translateY(2.5rem)}}@keyframes np-sink{to{opacity:0;transform:translateY(2.5rem)}}@media (prefers-reduced-motion:reduce){.player-dock-bar,.np-mini{transition:none}.np-lyrics-lines,.np-queue-sheet[open],.np-queue-sheet::backdrop,.lyrics-sheet[open]{animation:none}.lyrics-box-sheet .lyrics-line{transition:none}.lyrics-box-sheet .lyrics-line[data-past]{transform:none}}.np-like{flex:none;position:relative}.np-like [role=alert]{z-index:1;text-align:right;width:max-content;max-width:14rem;position:absolute;top:100%;right:0}.preview-dock{height:var(--dock-height);padding-inline:.875rem 1rem;padding-bottom:env(safe-area-inset-bottom);align-items:center;gap:1rem}.preview-dock-meta{flex:1 1 0;align-items:center;gap:.75rem;min-width:0;display:flex}.preview-dock-end{flex:1 1 0;justify-content:flex-end;align-items:center;gap:.5rem;min-width:0;display:flex}.preview-dock-label{color:var(--art-accent,var(--color-accent));letter-spacing:.06em;text-transform:uppercase;font-size:.6875rem;font-weight:600;line-height:1rem}.preview-dock-back{border:1px solid var(--color-line);min-width:0;max-width:100%;min-height:44px;color:var(--color-fg);border-radius:999px;align-items:center;gap:.5rem;padding:.25rem .875rem .25rem .375rem;font-size:.8125rem;display:inline-flex}.preview-dock-back-compact{border-radius:.5rem;flex-shrink:0;place-items:center;width:44px;height:44px;display:inline-grid}@media (hover:hover){.preview-dock-back:hover{background:#ffffff10}}
.install-hint{left:.75rem;right:.75rem;bottom:calc(3.5rem + .75rem + env(safe-area-inset-bottom));z-index:30;border:1px solid var(--color-line);background:var(--color-surface-raised);border-radius:1rem;align-items:flex-start;gap:.75rem;padding:1rem;display:flex;position:fixed;box-shadow:0 12px 32px #000a}body:has(.player-dock) .install-hint{bottom:calc(57px + 4rem + .5rem + env(safe-area-inset-bottom))}@media (max-width:767px){.install-hint{align-items:center;padding:.625rem .75rem}.install-hint p{display:none}.install-hint h2+p+div{margin-top:.375rem}}@media (min-width:768px){.install-hint{width:22rem;bottom:1rem;left:auto}body:has(.player-dock) .install-hint{bottom:calc(76px + 2rem)}}.install-steps{flex-direction:column;gap:.75rem;margin:0;padding-left:1.25rem;line-height:1.55;list-style:decimal;display:flex}
