.np-screen{--np-top: rgb(83, 83, 83);--np-glow: 130, 130, 130;--np-fg: #fff;--np-dim: #cdcdcd;--np-faint: rgba(255, 255, 255, .24);--np-x: 4.6cqw;--np-u: 1.8cqh;position:absolute;inset:0;z-index:3;container-type:size;overflow:hidden;color:var(--np-fg);font-family:"Figtree",var(--font-sans);-webkit-font-smoothing:antialiased;pointer-events:none;visibility:hidden;-webkit-mask:var(--np-mask) 0 0 / 100% 100% no-repeat;mask:var(--np-mask) 0 0 / 100% 100% no-repeat;clip-path:inset(32% 0 32% 0)}.np-stage{position:absolute;inset:0;opacity:0;filter:brightness(1.25)}.np-screen.is-on{visibility:visible;clip-path:inset(0);transition:clip-path .62s cubic-bezier(.22,1,.36,1)}.np-screen.is-on .np-stage{opacity:1;filter:none;transition:opacity .42s cubic-bezier(.33,1,.68,1),filter .7s cubic-bezier(.22,1,.36,1)}.np-screen.is-leaving{visibility:visible;clip-path:inset(32% 0 32% 0);transition:clip-path .34s cubic-bezier(.4,0,.6,1)}.np-screen.is-leaving .np-stage{opacity:0;filter:brightness(.6);transition:opacity .3s cubic-bezier(.4,0,.6,1),filter .3s ease-in}#screen-panel .screen-curve,#screen-panel .screen-video{transition:opacity .6s ease-out,filter .38s ease-out}#screen-panel[data-np=on] .screen-curve,#screen-panel[data-np=on] .screen-video{filter:brightness(.35);transition:opacity .6s ease-out,filter .22s ease-in}.np-bg{position:absolute;inset:0;background-color:var(--np-top);transition:background-color .9s ease}.np-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0000,#00000052)}.np-view{position:absolute;inset:0}.np-view img{display:block;width:100%;height:100%;object-fit:cover}.np-art-empty{display:block;width:100%;height:100%;background:#0000004d}.np-empty{display:grid;place-items:center;height:100%}.np-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-weight:800;letter-spacing:normal;line-height:1.08;text-wrap:balance}.np-artist{font-weight:400;color:var(--np-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.np-artist em{font-style:normal;color:#ffffff80;text-transform:capitalize}.np-kicker{display:inline-flex;align-items:center;gap:var(--np-u);font-weight:700;font-size:4.6cqh;line-height:1;color:var(--np-dim)}.np-screen[data-status=playing] .np-kicker{color:var(--np-fg)}.np-timecode{font-size:4.6cqh;line-height:1;font-variant-numeric:tabular-nums;color:var(--np-dim)}.np-timecode i{font-style:normal;margin:0 .5em;color:var(--np-faint)}.np-eq{display:inline-flex;align-items:flex-end;gap:.6cqh;height:3.6cqh}.np-eq i{width:.8cqh;height:100%;background:currentColor;transform-origin:50% 100%;animation:np-eq .82s ease-in-out infinite alternate}.np-eq i:nth-child(2){animation-duration:.56s;animation-delay:-.18s}.np-eq i:nth-child(3){animation-duration:.7s;animation-delay:-.42s}.np-eq i:nth-child(4){animation-duration:.64s;animation-delay:-90ms}@keyframes np-eq{0%{transform:scaleY(.2)}to{transform:scaleY(1)}}.np-bar,.np-full-bar{position:relative;display:block;height:.8cqh;border-radius:.8cqh;background:var(--np-faint);overflow:hidden}.np-bar i,.np-full-bar i{position:absolute;inset:0;background:var(--np-fg);transform-origin:0 50%;transform:scaleX(0)}.np-full{position:absolute;inset:0}.np-full-meta,.np-full-status{position:absolute;bottom:3cqh;display:flex;flex-direction:column;gap:.1em;max-width:calc(46cqw - 29cqh);line-height:1.2}.np-full-meta{left:max(1.5cqw,10px)}.np-full-status{right:max(1.5cqw,10px);align-items:flex-end;text-align:right}.np-full-title{display:inline-flex;align-items:center;gap:.4em;font-size:max(2.1cqh,12px);font-weight:700;color:var(--np-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.np-full-sub{font-size:max(1.75cqh,10px);font-weight:400;color:var(--np-dim);transition:color .9s ease;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.np-full-title .np-eq{height:.7em;gap:.12em}.np-full-title .np-eq i{width:.14em}.np-full-deck{position:absolute;left:50%;top:20.4cqh;width:58cqh;height:58cqh;transform:translate(-50%)}.np-full-sleeve{position:absolute;inset:0;z-index:1;border-radius:1cqh;overflow:hidden;box-shadow:0 1.2cqh 3.6cqh #00000080}.np-screen.is-on .np-full-deck .np-vinyl-disc{transform:translate(50%)}.np-vinyl{--deck: 66cqh;position:absolute;inset:0;display:flex;align-items:center;gap:5cqw;padding:0 var(--np-x)}.np-vinyl-deck{position:relative;flex:none;height:var(--deck);aspect-ratio:1.7}.np-vinyl-sleeve,.np-vinyl-disc{position:absolute;aspect-ratio:1}.np-vinyl-sleeve{left:0;top:0;height:100%;z-index:1;border-radius:.6cqh;overflow:hidden;box-shadow:1cqh 0 2cqh #00000059,0 4cqh 9cqh #00000073}.np-vinyl-disc{left:0;top:2%;height:96%;border-radius:50%;background:radial-gradient(circle,transparent 0 17%,rgba(255,255,255,.05) 17.5%,transparent 18.5%),repeating-radial-gradient(circle,#0c0c0c 0 .7%,#191919 .9%,#0c0c0c 1.3%),#101010;box-shadow:0 0 0 .4cqh #050505,0 3cqh 7cqh #0000008c;transition:transform .7s cubic-bezier(.16,1,.3,1) .18s}.np-vinyl-disc:after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 30deg,transparent 0 12%,rgba(var(--np-glow),.16) 18%,transparent 26% 62%,rgba(255,255,255,.06) 68%,transparent 76%)}.np-vinyl-label{position:absolute;inset:32%;border-radius:50%;overflow:hidden}.np-vinyl-label:after{content:"";position:absolute;inset:44%;border-radius:50%;background:#0c0c0c}.np-screen.is-on .np-vinyl-disc{transform:translate(66%)}.np-screen.is-on[data-status=playing] .np-vinyl-label,.np-screen.is-on[data-status=playing] .np-vinyl-disc:after{animation:np-spin 1.8s linear infinite}@keyframes np-spin{to{transform:rotate(360deg)}}.np-vinyl-meta{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:var(--np-u)}.np-vinyl-meta .np-title{font-size:9.5cqh}.np-vinyl-meta .np-artist{font-size:4.8cqh;margin-top:calc(var(--np-u) * -.6)}.np-vinyl-status .np-kicker,.np-vinyl-status .np-timecode{font-size:4cqh}.np-vinyl-meta .np-bar{margin-top:calc(var(--np-u) * .4)}.np-vinyl-sub{display:flex;justify-content:space-between;align-items:baseline;gap:calc(var(--np-u) * 2)}.np-vinyl-sub>*{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.np-vinyl-sub>em{flex:0 1 auto;text-align:right}.np-vinyl-sub>span{flex:0 1 auto}.np-vinyl-status{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--np-u) * 2);margin-top:calc(var(--np-u) * .5)}@media(prefers-reduced-motion:reduce){.np-screen.is-on,.np-screen.is-leaving,.np-stage,#screen-panel .screen-curve,#screen-panel .screen-video{transition:none!important}.np-eq i,.np-vinyl-label,.np-vinyl-disc:after{animation:none!important}.np-vinyl-disc,.np-bg{transition:none}}
