Mini Media Player Dock

<!--
  A now-playing strip. The track text is min-w-0 + truncate so a long title
  cannot push the strip past a 320px viewport. The transport buttons are icon
  only, so each carries an aria-label; the play/pause button swaps its label
  when toggled (see React/TypeScript). The progress bar is a real progressbar
  role, not a naked div.
-->
<div class="fixed bottom-6 left-1/2 w-72 max-w-[calc(100vw-2rem)] -translate-x-1/2 rounded-2xl border border-black/10 bg-white/90 p-2 shadow-[0_12px_32px_-12px_rgba(0,0,0,0.4)] backdrop-blur-md dark:border-white/10 dark:bg-gray-900/90">
  <div class="flex items-center gap-3">
    <div class="h-11 w-11 shrink-0 rounded-lg bg-gradient-to-br from-violet-500 to-fuchsia-500" aria-hidden="true"></div>
    <div class="min-w-0 flex-1">
      <p class="truncate text-sm font-semibold text-gray-900 dark:text-gray-100">Midnight Signals</p>
      <p class="truncate text-xs text-gray-600 dark:text-gray-400">The Wavelengths</p>
    </div>
    <div class="flex shrink-0 items-center gap-0.5">
      <button type="button" aria-label="Previous track" class="flex h-10 w-10 items-center justify-center rounded-lg text-gray-700 hover:bg-black/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-600 dark:text-gray-200 dark:hover:bg-white/10 dark:focus-visible:ring-blue-400">
        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M7 6a1 1 0 0 1 2 0v5l8-5.2A1 1 0 0 1 18.5 6.6v10.8a1 1 0 0 1-1.5.8L9 13v5a1 1 0 0 1-2 0Z" /></svg>
      </button>
      <button type="button" aria-label="Pause" aria-pressed="true" class="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-600 text-white hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-white dark:focus-visible:ring-blue-200">
        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M8 5h3v14H8zM13 5h3v14h-3z" /></svg>
      </button>
      <button type="button" aria-label="Next track" class="flex h-10 w-10 items-center justify-center rounded-lg text-gray-700 hover:bg-black/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-600 dark:text-gray-200 dark:hover:bg-white/10 dark:focus-visible:ring-blue-400">
        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M17 6a1 1 0 0 0-2 0v5L7 5.8A1 1 0 0 0 5.5 6.6v10.8a1 1 0 0 0 1.5.8L15 13v5a1 1 0 0 0 2 0Z" /></svg>
      </button>
    </div>
  </div>
  <div class="mt-2 h-1 w-full overflow-hidden rounded-full bg-black/10 dark:bg-white/10" role="progressbar" aria-label="Playback progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="42">
    <div class="h-full w-[42%] rounded-full bg-blue-600"></div>
  </div>
</div>