/* Give the artwork room while keeping media above the player. */
.np .np-body { bottom:calc(var(--player-h) + var(--g) + 30px); }
.np.has-lyrics .np-body { padding-top:70px; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:5vw; }
.np.has-lyrics .np-cover {
  width:min(32vw,60dvh,620px,calc(100dvh - var(--player-h) - var(--g) - 260px));
}
.np.ember-mode:not(.has-lyrics):not(.has-clip) .np-cover {
  width:min(46dvh,460px,calc(100dvh - var(--player-h) - var(--g) - 290px));
}
.np.has-clip:not(.has-lyrics) .np-left {
  flex-direction:column;align-items:center;gap:24px;text-align:center;
}
.np.has-clip .np-cover,
.np.ember-mode.has-clip:not(.has-lyrics) .np-cover {
  width:min(70vw,980px,calc((100dvh - var(--player-h) - var(--g) - 260px) * 16 / 9));
}
.np.has-clip.has-lyrics .np-cover {
  width:min(44vw,820px,calc((100dvh - var(--player-h) - var(--g) - 260px) * 16 / 9));
}
.np.has-clip.has-lyrics .np-body { grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); }
@media(max-width:900px) {
  .np.has-lyrics .np-body { grid-template-columns:1fr; }
}
.np-video-close {
  position:absolute;top:12px;right:12px;z-index:3;
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  color:#fff;background:rgba(15,15,15,.65);border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(12px);box-shadow:0 4px 16px #0003;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-4px) scale(.92);
  transition:opacity 240ms var(--motion-ease),transform 360ms var(--motion-spring),background-color 240ms var(--motion-ease),visibility 0s 240ms;
}
.np-cover.clip-on .np-video-close { visibility:visible; }
.np-cover.clip-on:is(:hover,:focus-within) .np-video-close {
  opacity:1;pointer-events:auto;transform:translateY(0) scale(1);transition-delay:0s;
}
.np-video-close:hover { background:rgba(35,35,35,.9); }
.np-video-close:focus-visible { outline:2px solid #fff;outline-offset:3px; }
#npCover { cursor:default; }
#npCover.can-restore { cursor:pointer; }
#npCover.can-restore::after {
  content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.3);
  opacity:0;pointer-events:none;transition:opacity 260ms var(--motion-ease);
}
#npCover.can-restore:hover::after,#npCover.can-restore:focus-visible::after { opacity:1; }
#npCover:focus-visible { outline:2px solid #fff;outline-offset:-4px; }
.np-cover.media-resizing { transition: border-radius 580ms var(--motion-ease); }
.np-body { transition:grid-template-columns 580ms var(--motion-ease),gap 580ms var(--motion-ease),padding 580ms var(--motion-ease); }
@media(hover:none) {
  .np-cover.clip-on .np-video-close { opacity:1;pointer-events:auto;transform:none; }
}
@media(prefers-reduced-motion:reduce) {
  .np-video-close,.np-body,.np-cover.media-resizing { transition:none; }
}