/* Album covers + the full-view moving cover */
.cover{display:inline-grid;place-items:center;overflow:hidden;border-radius:10px;flex:none;cursor:zoom-in;padding:0;text-shadow:none;
  background:linear-gradient(135deg,var(--blue),var(--violet));box-shadow:0 8px 24px rgba(8,20,60,.35),0 0 0 1px rgba(255,255,255,.35)}
.cover img{width:100%;height:100%;object-fit:cover;display:block}.cover i{font-style:normal;font-weight:600;font-size:22px;color:#fff}
.cover.sm{width:var(--s);height:var(--s);border-radius:8px}.cover.sm i{font-size:calc(var(--s) * .42)}
body[data-phase="night"] .cover{box-shadow:0 0 22px color-mix(in srgb,var(--violet) 40%,transparent),0 0 0 1px rgba(255,255,255,.25)}
.np-head{display:flex;align-items:center;justify-content:center;gap:14px;margin:10px auto 0;max-width:560px;text-align:left}
#npCover{width:76px;height:76px;border-radius:12px;transition:transform .25s}#npCover:active{transform:scale(.94)}#npCover[hidden]{display:none}
.np-tt{min-width:0}.np-tt h1{margin:0 0 2px!important}
.np-head:has(#npCover[hidden]){text-align:center}
@media (orientation:landscape) and (max-height:560px){.np-head{justify-content:flex-start;margin-top:6px}#npCover{width:64px;height:64px}}

.viewer{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;
  background:rgba(4,6,20,0);-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);transition:background .45s,backdrop-filter .45s,-webkit-backdrop-filter .45s;cursor:zoom-out}
.viewer.on{background:rgba(4,6,20,.58);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.v-art{position:relative;width:min(86vw,64vh,560px);aspect-ratio:1;border-radius:16px;overflow:hidden;background:#111;
  box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.2);transition:transform .45s cubic-bezier(.2,.8,.2,1);will-change:transform}
.v-art>img,.v-art video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.v-art>i{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-size:30vmin;font-weight:600;background:linear-gradient(135deg,var(--blue),var(--violet))}
.v-art video{opacity:0;z-index:1}.v-art video.under{opacity:1;z-index:1}.v-art video.show{opacity:1;z-index:2;transition:opacity .9s ease}
.v-sheen{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.18) 50%,transparent 65%);transform:translateX(-120%)}
.viewer.on .v-sheen{animation:sheen 1.4s .35s ease-out forwards}@keyframes sheen{to{transform:translateX(120%)}}
.v-cap{text-align:center;opacity:0;transform:translateY(8px);transition:all .45s .15s}.viewer.on .v-cap{opacity:1;transform:none}
.v-cap b{display:block;font-size:20px;font-weight:600}.v-cap small{color:var(--soft);font-size:14px}
.v-x{position:absolute;top:calc(env(safe-area-inset-top) + 12px);right:calc(env(safe-area-inset-right) + 16px);font-size:34px;line-height:1;width:44px;height:44px;opacity:0;transition:opacity .3s}.viewer.on .v-x{opacity:.85}
@media (orientation:landscape) and (max-height:560px){.viewer{flex-direction:row;gap:28px}.v-art{width:min(70vh,46vw)}.v-cap{text-align:left}}
@media (prefers-reduced-motion:reduce){.v-art{transition:none}}