Glassmorphic Music Player Controls

<div class="flex items-center justify-center min-h-screen p-4 bg-gradient-to-br from-amber-100 to-amber-300 dark:from-stone-900 dark:to-stone-700 font-sans">
  <div class="w-full max-w-md p-6 rounded-3xl backdrop-filter backdrop-blur-xl bg-white/20 dark:bg-stone-800/30 border border-t-white/30 border-l-white/30 border-b-white/10 border-r-white/10 dark:border-t-stone-700/30 dark:border-l-stone-700/30 dark:border-b-stone-900/40 dark:border-r-stone-900/40 shadow-xl overflow-hidden transition-all duration-300 ease-in-out sm:p-8">
    <div class="flex items-center space-x-4 mb-6">
      <img src="https://picsum.photos/seed/music_album/100/100" alt="Album Art" class="w-20 h-20 rounded-xl shadow-lg ring-2 ring-white/30 dark:ring-stone-600/50 object-cover">
      <div class="flex-1">
        <h3 class="text-xl font-bold text-stone-900 dark:text-stone-100 mb-1 leading-tight sm:text-2xl">Lost in the Echoes</h3>
        <p class="text-sm text-stone-700 dark:text-stone-300 sm:text-base">The Echoes of Light</p>
      </div>
    </div>

    <div class="w-full bg-stone-300/50 dark:bg-stone-700/50 rounded-full h-2 mb-4 relative overflow-hidden">
      <div class="bg-amber-700 dark:bg-amber-500 h-full rounded-full" style="width: 65%;"></div>
      <div class="w-3 h-3 rounded-full bg-stone-900 dark:bg-stone-50 absolute top-1/2 -translate-y-1/2" style="left: 65%; transform: translateX(-50%) translateY(-50%);"></div>
    </div>
    <div class="flex justify-between text-xs text-stone-700 dark:text-stone-300 mb-6">
      <span>2:45</span>
      <span>-1:15</span>
    </div>

    <div class="flex items-center justify-around space-x-6 mb-6">
      <button class="flex items-center justify-center w-12 h-12 rounded-full backdrop-filter backdrop-blur-sm bg-white/30 dark:bg-stone-700/50 text-stone-800 dark:text-stone-200 shadow-md transition-all duration-200 ease-in-out hover:scale-105 hover:bg-white/50 dark:hover:bg-stone-600/70 focus:outline-none focus:ring-2 focus:ring-amber-600/50 focus:ring-offset-2 focus:ring-offset-white/20 dark:focus:ring-offset-stone-800/30">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
          <path fill-rule="evenodd" d="M20.25 12a.75.75 0 01-.75.75H6.31l5.47 5.47a.75.75 0 11-1.06 1.06l-6.75-6.75a.75.75 0 010-1.06l6.75-6.75a.75.75 0 111.06 1.06l-5.47 5.47H19.5a.75.75 0 01.75.75z" clip-rule="evenodd" />
        </svg>
      </button>

      <button class="flex items-center justify-center w-16 h-16 rounded-full backdrop-filter backdrop-blur-md bg-amber-600/70 dark:bg-amber-700 text-white shadow-lg transition-all duration-200 ease-in-out hover:scale-105 hover:bg-amber-700/80 dark:hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-white/30 dark:focus:ring-offset-stone-800/40">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-8 h-8">
          <path fill-rule="evenodd" d="M6.75 5.25a.75.75 0 01.75-.75H9a.75.75 0 01.75.75v13.5a.75.75 0 01-.75.75H7.5a.75.75 0 01-.75-.75V5.25zm7.5 0a.75.75 0 01.75-.75H16.5a.75.75 0 01.75.75v13.5a.75.75 0 01-.75.75h-1.5a.75.75 0 01-.75-.75V5.25z" clip-rule="evenodd" />
        </svg>
         <!-- Play icon (uncomment to show instead of pause) -->
        <!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-8 h-8">
          <path fill-rule="evenodd" d="M4.5 5.653c0-1.426 1.529-2.38 2.724-1.638L18.897 12l-11.673 7.985c-1.196.812-2.724-.136-2.724-1.638V5.653z" clip-rule="evenodd" />
        </svg> -->
      </button>

      <button class="flex items-center justify-center w-12 h-12 rounded-full backdrop-filter backdrop-blur-sm bg-white/30 dark:bg-stone-700/50 text-stone-800 dark:text-stone-200 shadow-md transition-all duration-200 ease-in-out hover:scale-105 hover:bg-white/50 dark:hover:bg-stone-600/70 focus:outline-none focus:ring-2 focus:ring-amber-600/50 focus:ring-offset-2 focus:ring-offset-white/20 dark:focus:ring-offset-stone-800/30">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
          <path fill-rule="evenodd" d="M3.75 12a.75.75 0 01.75-.75h13.19l-5.47-5.47a.75.75 0 011.06-1.06l6.75 6.75a.75.75 0 010 1.06l-6.75 6.75a.75.75 0 11-1.06-1.06l5.47-5.47H4.5a.75.75 0 01-.75-.75z" clip-rule="evenodd" />
        </svg>
      </button>
    </div>

    <div class="flex items-center justify-between mt-8 pt-4 border-t border-t-white/30 dark:border-t-stone-700/30">
      <button class="flex items-center justify-center w-10 h-10 rounded-full backdrop-filter backdrop-blur-sm bg-white/30 dark:bg-stone-700/50 text-stone-800 dark:text-stone-200 shadow-sm transition-all text-sm hover:bg-white/50 dark:hover:bg-stone-600/70 focus:outline-none focus:ring-2 focus:ring-amber-600/50 focus:ring-offset-2 focus:ring-offset-white/20 dark:focus:ring-offset-stone-800/30">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
          <path d="M18 5.25a2.25 2.25 0 00-2.25-2.25H13.5V6a.75.75 0 01-.75.75H10.5a.75.75 0 01-.75-.75V3H6.75A2.25 2.25 0 004.5 5.25v9.75A2.25 2.25 0 006.75 17.25h11.25A2.25 2.25 0 0020.25 15V5.25z" />
          <path fill-rule="evenodd" d="M5.841 20.352a.75.75 0 01.11.919l-1.396 2.41a.75.75 0 01-1.072.247 5.25 5.25 0 01-2.73-4.226c-.705-2.365 1.01-4.784 3.003-5.264a.75.75 0 01.378.143l1.395 2.41a.75.75 0 01-.069.813 2.998 2.998 0 00-1.029 2.012 2.998 2.998 0 002.585 2.934c.333.035.653.073.955.11z" clip-rule="evenodd" />
        </svg>
      </button>
      <button class="flex items-center justify-center w-10 h-10 rounded-full backdrop-filter backdrop-blur-sm bg-white/30 dark:bg-stone-700/50 text-stone-800 dark:text-stone-200 shadow-sm transition-all text-sm hover:bg-white/50 dark:hover:bg-stone-600/70 focus:outline-none focus:ring-2 focus:ring-amber-600/50 focus:ring-offset-2 focus:ring-offset-white/20 dark:focus:ring-offset-stone-800/30">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
          <path d="M13.5 4.5a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zM12 18.75h9v-1.5h-9v1.5zM12 13.5h9v-1.5h-9v1.5zM12 8.25h9V6.75h-9v1.5z" />
          <path d="M9 12a2.25 2.25 0 00-2.25 2.25V17.5L7.5 18H5.25A2.25 2.25 0 013 15.75v-1.5A2.25 2.25 0 015.25 12H9z" />
        </svg>
      </button>
      <button class="flex items-center justify-center w-10 h-10 rounded-full backdrop-filter backdrop-blur-sm bg-white/30 dark:bg-stone-700/50 text-stone-800 dark:text-stone-200 shadow-sm transition-all text-sm hover:bg-white/50 dark:hover:bg-stone-600/70 focus:outline-none focus:ring-2 focus:ring-amber-600/50 focus:ring-offset-2 focus:ring-offset-white/20 dark:focus:ring-offset-stone-800/30">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
          <path fill-rule="evenodd" d="M9.401 3.003L9.401 3.003c.88-1.523 2.65-1.926 4.172-1.045l1.474.851a9.966 9.966 0 013.255.474c1.196.356 2.052 1.517 1.906 2.709a1.597 1.597 0 00.26 1.056c.408.54.912 1.037 1.463 1.49l1.4.966c1.1.758 1.45 2.201.838 3.419C20.334 16.146 17.518 19 12 19c-3.149 0-5.91-.904-8.082-2.397-1.121-.795-1.874-2.234-1.637-3.666 4.792-.783 7.039-4.717 7.039-4.717z" clip-rule="evenodd" />
          <path d="M11.94 9.141a.75.75 0 10-1.39-.72l.432.842 1.39-.72-.432-.843z" />
        </svg>
      </button>
      <button class="flex items-center justify-center w-10 h-10 rounded-full backdrop-filter backdrop-blur-sm bg-white/30 dark:bg-stone-700/50 text-stone-800 dark:text-stone-200 shadow-sm transition-all text-sm hover:bg-white/50 dark:hover:bg-stone-600/70 focus:outline-none focus:ring-2 focus:ring-amber-600/50 focus:ring-offset-2 focus:ring-offset-white/20 dark:focus:ring-offset-stone-800/30">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
          <path d="M19.006 3.705a.75.75 0 00-.512-1.113L4.625 1.25A4.5 4.5 0 002.25 5.5V16.5a3 3 0 003 3h.75v3.375c0 .621.504 1.125 1.125 1.125h2.25a.75.75 0 00.75-.75v-3.75H12a.75.75 0 00.75-.75V14.25h.375c2.213 0 4.309-.655 6.004-1.764a.75.75 0 00.186-.135l3.42-3.037a.75.75 0 00.112-.868V4.5a.75.75 0 00-.91-.795zM16.793 9.782l-3.674 3.261a1.5 1.5 0 01-.587.232l-.23.03A.75.75 0 0012 13.5H9.75V5.5c0-.103.003-.205.009-.306C9.916 4.965 10.12 4.5 10.5 4.5h3C4.625 1.25 15.375 1.25 18.04 2.802a.75.75 0 00.41-.013c.962-.438 2.407-.942 3.605-1.124A.75.75 0 0022.5 1.5h.023a.75.75 0 00.046-1.498 7.502 7.502 0 00-6.191 1.026v1.312c0 2.226-1.501 4.25-3.765 4.25h-.548A9.75 9.75 0 014.5 8.25V5.5c0-.853.64-1.564 1.47-.788l11.751 2.35L19.006 3.705z" />
        </svg>
      </button>
    </div>
  </div>
</div>