Audio Player Component

<div class="p-4 md:p-8 lg:p-12 bg-gradient-to-br from-amber-50 to-orange-100 dark:from-stone-800 dark:to-stone-900 font-sans antialiased min-h-screen flex items-center justify-center">
  <div class="w-full max-w-sm mx-auto rounded-3xl shadow-xl overflow-hidden
              bg-gradient-to-br from-white via-stone-50 to-stone-100 
              dark:from-stone-700 dark:via-stone-750 dark:to-stone-800
              transform transition-all duration-300 hover:scale-[1.01]
              border border-stone-200 dark:border-stone-600">
    <div class="p-6 space-y-4 relative overflow-hidden">
      <div class="absolute inset-0 bg-no-repeat bg-center opacity-30 dark:opacity-10" 
           style="background-image: url('https://picsum.photos/seed/watercolor/600/400?blur=5&grayscale'); background-size: cover; filter: saturate(0.5);">
      </div>
      
      <div class="relative z-10 flex flex-col items-center">
        <div class="w-24 h-24 rounded-full overflow-hidden shadow-md border-4 border-stone-100 dark:border-stone-600">
          <img src="https://picsum.photos/seed/consulting/150/150" alt="Podcast Thumbnail" class="w-full h-full object-cover grayscale opacity-90">
        </div>
        <h3 class="mt-4 text-xl font-semibold text-stone-800 dark:text-stone-100 text-center">
          Understanding Client Needs
        </h3>
        <p class="text-sm text-stone-600 dark:text-stone-300 text-center">
          Episode 01: The Consulting Journey
        </p>
      </div>

      <div class="relative z-10 space-y-4">
        <div class="w-full h-2 bg-stone-200 dark:bg-stone-600 rounded-full overflow-hidden relative">
          <div class="absolute top-0 left-0 h-full bg-orange-300 dark:bg-orange-500 rounded-full" style="width: 40%;"></div>
          <div class="absolute top-1/2 left-[40%] -translate-x-1/2 -translate-y-1/2 w-4 h-4 bg-orange-500 dark:bg-orange-400 rounded-full shadow-lg"></div>
        </div>
        <div class="flex justify-between text-xs text-stone-500 dark:text-stone-400">
          <span>0:45</span>
          <span>2:30</span>
        </div>
      </div>

      <div class="relative z-10 flex justify-center items-center gap-6">
        <button class="p-2 text-stone-600 dark:text-stone-300 rounded-full hover:bg-stone-200 dark:hover:bg-stone-600 transition-colors focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-orange-500">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 12v1a8 8 0 0015.356 2m-.001-2H12m13 0l-5 5-5-5" />
          </svg>
        </button>
        <button class="p-3 bg-orange-400 dark:bg-orange-600 text-white rounded-full shadow-lg 
                       hover:bg-orange-500 dark:hover:bg-orange-500 transition-colors 
                       focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-700">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
          </svg>
        </button>
        <button class="p-2 text-stone-600 dark:text-stone-300 rounded-full hover:bg-stone-200 dark:hover:bg-stone-600 transition-colors focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-orange-500">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 12v1a8 8 0 0015.356 2m-.001-2H12m13 0l-5 5-5-5" />
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>