/* The music bar: it stays at the top of the window while the page scrolls. Icons and the song's name only. */
.player { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: .35rem; height: 52px; padding: 0 16px;
  background: #1c1727; border-bottom: 1px solid #41384f; color: #eee9f5; font: 16px/1.2 "Atkinson Hyperlegible", system-ui, sans-serif; }
.player button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: #dcb764; cursor: pointer; }
.player button.big { width: 40px; height: 40px; background: #7a55c7; color: #fff; }
.player button:hover { color: #fff; }
.player button.big:hover { background: #8d68d6; }
.player button:focus-visible, .player input:focus-visible { outline: 2px solid #dcb764; outline-offset: 2px; }
.player svg { width: 20px; height: 20px; fill: currentColor; }
.pInfo { flex: 1; min-width: 0; max-width: 520px; margin: 0 .6rem; }
#pName { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-bottom: 5px; }
.pBar { height: 6px; border-radius: 3px; background: #41384f; cursor: pointer; }
#pFill { width: 0; height: 100%; border-radius: 3px; background: #dcb764; }
#pVol { width: 110px; margin-left: auto; accent-color: #dcb764; }
@media (max-width: 520px) {
  #pPrev, #pVol { display: none; }
  .player { padding: 0 12px; }
}