Now Playing Audio Player Card with Controls

<section class="relative overflow-hidden ring-1 ring-white/10 bg-neutral-900/60 rounded-2xl px-6 py-6 max-w-xl">
          <div class="pointer-events-none absolute inset-x-0 top-0 h-28 bg-[radial-gradient(100%_60%_at_50%_0%,rgba(255,255,255,0.06),rgba(0,0,0,0))]"></div>

          <div class="flex items-center justify-between">
            <div class="">
              <p class="text-xs uppercase tracking-widest text-neutral-400">Now playing</p>
              <h3 class="mt-1 text-lg font-semibold tracking-tight text-white">Midnight Glass</h3>
              <p class="text-xs text-neutral-400">EchoFlux Sessions</p>
            </div>
            <div class="flex items-center gap-2">
              <button class="rounded-full bg-white/5 p-2 ring-1 ring-white/10 hover:bg-white/10">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="shuffle" class="lucide lucide-shuffle h-4 w-4 text-neutral-200"><path d="m18 14 4 4-4 4"></path><path d="m18 2 4 4-4 4"></path><path d="M2 18h1.973a4 4 0 0 0 3.3-1.7l5.454-8.6a4 4 0 0 1 3.3-1.7H22"></path><path d="M2 6h1.972a4 4 0 0 1 3.6 2.2"></path><path d="M22 18h-6.041a4 4 0 0 1-3.3-1.8l-.359-.45"></path></svg>
              </button>
              <button class="rounded-full bg-white/5 p-2 ring-1 ring-white/10 hover:bg-white/10">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="repeat" class="lucide lucide-repeat h-4 w-4 text-neutral-200"><path d="m17 2 4 4-4 4"></path><path d="M3 11v-1a4 4 0 0 1 4-4h14"></path><path d="m7 22-4-4 4-4"></path><path d="M21 13v1a4 4 0 0 1-4 4H3"></path></svg>
              </button>
              <button class="rounded-full bg-white/5 p-2 ring-1 ring-white/10 hover:bg-white/10">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="settings-2" class="lucide lucide-settings-2 h-4 w-4 text-neutral-200"><path d="M14 17H5"></path><path d="M19 7h-9"></path><circle cx="17" cy="17" r="3"></circle><circle cx="7" cy="7" r="3"></circle></svg>
              </button>
            </div>
          </div>

          <div class="mt-5">
            <div class="relative h-2 w-full overflow-hidden rounded-full bg-white/10">
              <div id="progress" class="h-full w-[38%] rounded-full bg-gradient-to-r from-orange-400 to-amber-400"></div>
              <div class="pointer-events-none absolute inset-0 rounded-full ring-1 ring-white/10"></div>
            </div>
            <div class="mt-2 flex items-center justify-between text-[11px] text-neutral-400">
              <span id="elapsed">00:58</span>
              <span>03:21</span>
            </div>
          </div>

          <p class="mt-6 text-sm text-neutral-300">Own your pipeline. Compose, version, share, and monetize—without sacrificing control or quality.</p>
        </section>