Audio Player

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-800 dark:to-stone-900 min-h-screen flex items-center justify-center font-mono">
  <div class="w-full max-w-sm rounded-xl shadow-2xl overflow-hidden
              bg-gradient-to-br from-stone-50 to-stone-200
              dark:from-stone-700 dark:to-stone-900
              p-6 space-y-6 border border-stone-300 dark:border-stone-600
              relative transform transition-all duration-300 hover:scale-105">

    <!-- Top Section: Header & User Info -->
    <div class="flex items-center justify-between">
      <div class="flex items-center space-x-3">
        <img class="w-10 h-10 rounded-full border-2 border-stone-400 dark:border-stone-500 shadow-md"
             src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
        <div>
          <p class="text-sm font-bold text-stone-800 dark:text-stone-200">@SynthWaveSally</p>
          <p class="text-xs text-stone-600 dark:text-stone-400">Sharing a vibe...</p>
        </div>
      </div>
      <span class="text-stone-500 dark:text-stone-400 text-xs">3m ago</span>
    </div>

    <!-- Album Art & Track Info -->
    <div class="relative w-full aspect-square rounded-lg overflow-hidden shadow-lg border border-stone-300 dark:border-stone-600">
      <img class="w-full h-full object-cover" src="https://picsum.photos/400/400?grayscale&blur=2" alt="Album Art">
      <div class="absolute inset-0 bg-black bg-opacity-30 flex flex-col items-center justify-center p-4">
        <p class="text-xl font-extrabold text-white text-center drop-shadow-lg">Neon Dreams</p>
        <p class="text-sm text-stone-200 text-center mt-1 drop-shadow-md">The Retro Bandidos</p>
      </div>
    </div>

    <!-- Controls - Retro Buttons -->
    <div class="grid grid-cols-3 gap-3">
      <button aria-label="Previous Track" class="flex items-center justify-center p-3 rounded-full
                  bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300
                  shadow-md hover:shadow-lg transition-all duration-200
                  border border-stone-400 dark:border-stone-600
                  active:bg-stone-400 dark:active:bg-stone-600 group">
        <svg class="w-5 h-5 group-active:scale-90" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
      </button>
      <button aria-label="Play/Pause" class="flex items-center justify-center p-4 rounded-full
                  bg-amber-400 dark:bg-amber-600 text-amber-900 dark:text-amber-100
                  shadow-xl hover:shadow-2xl transition-all duration-200
                  border border-amber-500 dark:border-amber-700
                  active:bg-amber-500 dark:active:bg-amber-700 group relative -top-1">
        <svg class="w-7 h-7 group-active:scale-90" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
      </button>
      <button aria-label="Next Track" class="flex items-center justify-center p-3 rounded-full
                  bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300
                  shadow-md hover:shadow-lg transition-all duration-200
                  border border-stone-400 dark:border-stone-600
                  active:bg-stone-400 dark:active:bg-stone-600 group">
        <svg class="w-5 h-5 group-active:scale-90 scale-x-[-1]" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
      </button>
    </div>

    <!-- Progress Bar (Fake) -->
    <div class="w-full bg-stone-300 dark:bg-stone-700 rounded-full h-2.5 relative shadow-inner overflow-hidden">
      <div class="bg-amber-400 dark:bg-amber-500 h-2.5 rounded-full" style="width: 65%;"></div>
      <div class="absolute top-1/2 -mt-2 left-[65%] transform -translate-x-1/2 w-4 h-4 rounded-full bg-amber-600 dark:bg-amber-400 shadow-md border-2 border-stone-100 dark:border-stone-800"></div>
    </div>
    <div class="flex justify-between text-xs text-stone-600 dark:text-stone-400">
      <span>0:45</span>
      <span>3:10</span>
    </div>

    <!-- Action Buttons -->
    <div class="flex justify-around pt-2 border-t border-stone-300 dark:border-stone-700">
      <button aria-label="Like" class="flex items-center space-x-2 text-stone-600 dark:text-stone-400 hover:text-red-500 dark:hover:text-red-400">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"></path></svg>
        <span class="text-sm">1.2K</span>
      </button>
      <button aria-label="Comment" class="flex items-center space-x-2 text-stone-600 dark:text-stone-400 hover:text-blue-500 dark:hover:text-blue-400">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"></path></svg>
        <span class="text-sm">345</span>
      </button>
      <button aria-label="Share" class="flex items-center space-x-2 text-stone-600 dark:text-stone-400 hover:text-green-500 dark:hover:text-green-400">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18 16.08c-.76 0-1.44.3-1.96.79l-4.71-2.91c.07-.22.11-.45.11-.69s-.04-.47-.11-.69l4.71-2.91c.52.49 1.2.79 1.96.79 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.11.69l-4.71 2.91c-.52-.49-1.2-.79-1.96-.79-1.66 0-3 1.34-3 3s1.34 3 3 3c.76 0 1.44-.3 1.96-.79l4.71 2.91c-.07.22-.11.45-.11.69s.04.47.11.69l-4.71 2.91c-.52-.49-1.2-.79-1.96-.79-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3c0-.24-.04-.47-.11-.69l4.71-2.91c.52.49 1.2.79 1.96.79 1.66 0 3-1.34 3-3s-1.34-3-3-3z"></path></svg>
        <span class="text-sm">123</span>
      </button>
    </div>

    <!-- Vintage Speaker Grille Detail -->
    <div class="absolute bottom-0 left-0 right-0 h-4 bg-stone-300 dark:bg-stone-700 border-t border-stone-400 dark:border-stone-600
                flex justify-around items-center rounded-b-xl px-2">
      <div class="w-1.5 h-1.5 bg-stone-500 dark:bg-stone-500 rounded-full"></div>
      <div class="w-1.5 h-1.5 bg-stone-500 dark:bg-stone-500 rounded-full"></div>
      <div class="w-1.5 h-1.5 bg-stone-500 dark:bg-stone-500 rounded-full"></div>
      <div class="w-1.5 h-1.5 bg-stone-500 dark:bg-stone-500 rounded-full"></div>
      <div class="w-1.5 h-1.5 bg-stone-500 dark:bg-stone-500 rounded-full"></div>
      <div class="w-1.5 h-1.5 bg-stone-500 dark:bg-stone-500 rounded-full"></div>
    </div>

  </div>
</div>
              

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-blue-900 to-gray-900 dark:from-gray-900 dark:to-black p-4">
  <div class="w-full max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl mx-auto rounded-3xl p-6 md:p-8 lg:p-10 shadow-2xl relative overflow-hidden backdrop-filter backdrop-blur-lg border border-opacity-30 border-white dark:border-opacity-30 dark:border-gray-700" style="background-color: rgba(255, 255, 255, 0.08); dark:background-color: rgba(0, 0, 0, 0.2);">
    <!-- Background elements for glassmorphism effect -->
    <div class="absolute top-0 right-0 w-32 h-32 bg-blue-500 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob dark:bg-purple-700"></div>
    <div class="absolute bottom-0 left-0 w-32 h-32 bg-green-500 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob animation-delay-2000 dark:bg-orange-700"></div>
    <div class="absolute top-1/4 left-1/4 w-32 h-32 bg-yellow-500 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob animation-delay-4000 dark:bg-pink-700"></div>

    <div class="relative z-10 text-white text-center">
      <h2 class="text-2xl md:text-3xl font-extrabold mb-2 uppercase tracking-wide text-white dark:text-gray-100 drop-shadow-lg">Industrial Audio Feed</h2>
      <p class="text-sm md:text-base text-gray-200 dark:text-gray-400 mb-6 drop-shadow-md">Monitoring system broadcasts</p>

      <!-- Album Art / Waveform Placeholder -->
      <div class="w-full h-48 md:h-64 bg-gray-700 bg-opacity-40 rounded-2xl mb-8 flex items-center justify-center overflow-hidden shadow-inner-lg shadow-black/30 dark:shadow-gray-900/50">
        <img src="https://picsum.photos/400/300?random=1" alt="Industrial Sound Wave" class="object-cover w-full h-full opacity-70 blur-sm brightness-75 md:opacity-80 md:blur-none md:brightness-100" aria-hidden="true">
        <div class="absolute w-4/5 h-20 bg-gradient-to-r from-transparent via-blue-500/60 to-transparent rounded-full opacity-60 md:opacity-80" style="box-shadow: 0 0 15px rgba(59, 130, 246, 0.7);"></div>
        <div class="absolute text-white text-3xl md:text-4xl font-bold tracking-wider opacity-90 drop-shadow-lg">
          <span class="uppercase">Live Feed</span>
        </div>
      </div>

      <!-- Track Info -->
      <div class="mb-6">
        <h3 class="text-xl md:text-2xl font-bold mb-1 text-white dark:text-gray-100 drop-shadow-lg">Turbine Gen 5 Status</h3>
        <p class="text-md md:text-lg text-gray-300 dark:text-gray-400 drop-shadow-md">Sector 7 - Control Room</p>
      </div>

      <!-- Progress Bar -->
      <div class="w-full mb-6">
        <div class="h-2 bg-white bg-opacity-20 rounded-full drop-shadow-sm">
          <div class="h-full bg-blue-500 rounded-full w-3/4 shadow-md" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" aria-label="Playback progress"></div>
        </div>
        <div class="flex justify-between text-xs mt-2 text-gray-300 dark:text-gray-400">
          <span>02:45</span>
          <span>03:20</span>
        </div>
      </div>

      <!-- Controls -->
      <div class="flex justify-around items-center mb-6">
        <button class="p-3 md:p-4 rounded-full bg-white bg-opacity-10 backdrop-filter backdrop-blur-sm hover:bg-opacity-20 transition-all duration-300 shadow-lg text-blue-300 md:text-blue-200 dark:text-blue-500 hover:text-blue-100 dark:hover:text-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" aria-label="Previous track">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 md:h-7 md:w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
          </svg>
        </button>
        <button class="p-4 md:p-5 rounded-full bg-blue-600 bg-opacity-70 backdrop-filter backdrop-blur-sm hover:bg-opacity-90 transition-all duration-300 shadow-2xl text-white dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-70" aria-label="Play/Pause">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 md:h-10 md:w-10" fill="currentColor" viewBox="0 0 24 24" stroke="currentColor" stroke-width="0">
            <path stroke-linecap="round" stroke-linejoin="round" d="M14.73 5.485c-.975-1.077-2.73-1.077-3.705 0l-4.5 4.975c-.975 1.077-.975 2.828 0 3.905l4.5 4.975c.975 1.077 2.73 1.077 3.705 0l4.5-4.975c.975-1.077.975-2.828 0-3.905l-4.5-4.975z" />
          </svg>
        </button>
        <button class="p-3 md:p-4 rounded-full bg-white bg-opacity-10 backdrop-filter backdrop-blur-sm hover:bg-opacity-20 transition-all duration-300 shadow-lg text-blue-300 md:text-blue-200 dark:text-blue-500 hover:text-blue-100 dark:hover:text-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" aria-label="Next track">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 md:h-7 md:w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M13 5l7 7-7 7m-8-14l7 7-7 7" />
          </svg>
        </button>
      </div>

      <!-- Volume Control and Settings -->
      <div class="flex items-center justify-between text-gray-300 dark:text-gray-400">
        <div class="flex items-center space-x-2">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 md:h-6 md:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15.536 8.464A.999.999 0 0014 9H8a.999.999 0 00-.707 1.707L6 12l.707.707A.999.999 0 008 14h6a.999.999 0 001.536-.536l3.5-3.5a.999.999 0 000-1.414l-3.5-3.5z" />
          </svg>
          <input type="range" min="0" max="100" value="70" class="w-24 md:w-32 lg:w-40 h-1 rounded-full appearance-none outline-none bg-blue-400 transition-all duration-300" style="background: linear-gradient(to right, #60A5FA 70%, rgba(255,255,255,0.3) 70%);" aria-label="Volume slider">
        </div>
        <button class="p-2 rounded-full bg-white bg-opacity-10 backdrop-filter backdrop-blur-sm hover:bg-opacity-20 transition-all duration-300 shadow-lg text-blue-300 md:text-blue-200 dark:text-blue-500 hover:text-blue-100 dark:hover:text-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" aria-label="Audio settings">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 md:h-6 md:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
            <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
          </svg>
        </button>
      </div>

      <div class="mt-8 pt-4 border-t border-white border-opacity-10 dark:border-gray-700 text-sm italic text-gray-400 dark:text-gray-500 select-none">
        <p>System v3.1.2 | <span class="font-semibold">Online</span></p>
      </div>
    </div>
  </div>
</div>

<style>
  /* Custom CSS for range input thumb (for better glassmorphism integration) */
  input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #60A5FA; /* blue-400 */
    cursor: pointer;
    box-shadow: 0 0 5px rgba(59, 130, 246, 0.7);
    transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }

  input[type='range']::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #60A5FA; /* blue-400 */
    cursor: pointer;
    box-shadow: 0 0 5px rgba(59, 130, 246, 0.7);
    transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }

  input[type='range']:hover::-webkit-slider-thumb {
    background: #4B90F6; /* slightly darker blue */
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.9);
  }

  input[type='range']:hover::-moz-range-thumb {
    background: #4B90F6;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.9);
  }

  /* Keyframes for the blob animation */
  @keyframes blob {
    0% {
      transform: translate(0px, 0px) scale(1);
    }
    33% {
      transform: translate(30px, -50px) scale(1.1);
    }
    66% {
      transform: translate(-20px, 20px) scale(0.9);
    }
    100% {
      transform: translate(0px, 0px) scale(1);
    }
  }

  .animate-blob {
    animation: blob 7s infinite cubic-bezier(0.6, -0.28, 0.735, 0.045);
  }

  .animation-delay-2000 {
    animation-delay: 2s;
  }

  .animation-delay-4000 {
    animation-delay: 4s;
  }

</style>
              

                <div class="font-sans antialiased bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 p-4 sm:p-6 md:p-8 lg:p-10 flex items-center justify-center min-h-screen">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-xl rounded-none overflow-hidden border-2 border-gray-900 dark:border-gray-100 transition-all duration-300 ease-in-out">
    <!-- Header / Top Section -->
    <div class="flex items-center justify-between p-4 sm:p-6 bg-yellow-400 dark:bg-yellow-600 border-b-2 border-gray-900 dark:border-gray-100 relative">
      <h2 class="text-xl sm:text-2xl md:text-3xl font-extrabold text-gray-900 dark:text-gray-900 uppercase tracking-wider">
        Pro Workout Mix
      </h2>
      <button class="p-2 sm:p-3 bg-gray-900 dark:bg-gray-100 text-yellow-400 dark:text-yellow-600 border-2 border-gray-900 dark:border-gray-100 hover:scale-105 active:scale-95 transition-transform">
        <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
      </button>
      <div class="absolute top-0 right-0 w-8 h-8 sm:w-10 sm:h-10 bg-gray-900 dark:bg-gray-100 -mr-1 -mt-1"></div>
    </div>

    <div class="grid md:grid-cols-3">
      <!-- Left Section: Album Art & Currently Playing -->
      <div class="md:col-span-1 p-4 sm:p-6 bg-gray-50 dark:bg-gray-700 border-b-2 md:border-b-0 md:border-r-2 border-gray-900 dark:border-gray-100 relative">
        <div class="aspect-w-1 aspect-h-1 mb-4 flex items-center justify-center bg-gray-300 dark:bg-gray-600 border-2 border-gray-900 dark:border-gray-100 relative group">
          <img src="https://picsum.photos/400/400?random=1" alt="Album Art" class="object-cover w-full h-full p-2 block filter grayscale transition-all duration-300 group-hover:grayscale-0 group-hover:p-0">
          <div class="absolute top-0 left-0 w-full h-full border-4 border-yellow-400 dark:border-yellow-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          <div class="absolute top-0 left-0 w-full h-full bg-yellow-400 dark:bg-yellow-600 opacity-10 group-hover:opacity-0 transition-opacity duration-300"></div>
        </div>
        <div class="text-center">
          <p class="text-lg sm:text-xl font-bold uppercase text-gray-900 dark:text-gray-100 mb-1">Push It To The Limit</p>
          <p class="text-sm sm:text-base text-gray-700 dark:text-gray-300">Turbo Beats Feat. Fitness Flow</p>
        </div>
        <div class="absolute bottom-0 right-0 w-6 h-6 sm:w-8 sm:h-8 bg-gray-900 dark:bg-gray-100 -mr-1 -mb-1"></div>
      </div>

      <!-- Middle Section: Controls & Progress -->
      <div class="md:col-span-2 p-4 sm:p-6 bg-gray-100 dark:bg-gray-800 relative">

        <!-- Progress Bar -->
        <div class="w-full mb-6 relative">
          <div class="h-2 bg-gray-300 dark:bg-gray-700 border border-gray-900 dark:border-gray-100 relative">
            <div class="absolute h-full bg-yellow-400 dark:bg-yellow-600" style="width: 60%;"></div>
            <div class="absolute -mt-1 -ml-1 h-4 w-4 bg-gray-900 dark:bg-gray-100 border-2 border-yellow-400 dark:border-yellow-600" style="left: 60%; transform: translateX(-50%);"></div>
          </div>
          <div class="flex justify-between text-xs mt-2 text-gray-700 dark:text-gray-300">
            <span>2:35</span>
            <span>-1:45</span>
          </div>
        </div>

        <!-- Main Controls -->
        <div class="flex justify-center items-center space-x-4 sm:space-x-6 mb-8">

          <button class="p-3 sm:p-4 bg-gray-900 dark:bg-gray-100 text-yellow-400 dark:text-yellow-600 border-2 border-gray-900 dark:border-gray-100 hover:scale-110 active:scale-90 transition-transform relative group">
            <svg class="w-6 h-6 sm:w-8 sm:h-8" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4.793 4.793a1 1 0 011.414 0L10 8.586l3.793-3.793a1 1 0 111.414 1.414L11.414 10l3.793 3.793a1 1 0 01-1.414 1.414L10 11.414l-3.793 3.793a1 1 0 01-1.414-1.414L8.586 10 4.793 6.207a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
            <span class="absolute top-0 left-0 w-full h-full border-1 border-yellow-400 dark:border-yellow-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          </button>

          <button class="p-3 sm:p-4 bg-gray-900 dark:bg-gray-100 text-yellow-400 dark:text-yellow-600 border-2 border-gray-900 dark:border-gray-100 hover:scale-110 active:scale-90 transition-transform relative group">
            <svg class="w-6 h-6 sm:w-8 sm:h-8" fill="currentColor" viewBox="0 0 20 20"><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.832L12.744 10l-3.189-2.832z" clip-rule="evenodd"></path></svg>
             <span class="absolute top-0 left-0 w-full h-full border-1 border-yellow-400 dark:border-yellow-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          </button>

          <button class="p-3 sm:p-4 bg-gray-900 dark:bg-gray-100 text-yellow-400 dark:text-yellow-600 border-2 border-gray-900 dark:border-gray-100 hover:scale-110 active:scale-90 transition-transform relative group">
            <svg class="w-6 h-6 sm:w-8 sm:h-8" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M15.207 4.793a1 1 0 010 1.414L11.414 10l3.793 3.793a1 1 0 01-1.414 1.414L10 11.414l-3.793 3.793a1 1 0 01-1.414-1.414L8.586 10 4.793 6.207a1 1 0 011.414-1.414L10 8.586l3.793-3.793a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
             <span class="absolute top-0 left-0 w-full h-full border-1 border-yellow-400 dark:border-yellow-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          </button>
        </div>

        <!-- Volume Control -->
        <div class="flex items-center justify-center space-x-2 text-gray-700 dark:text-gray-300 mb-6">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M9.383 5.498a1 1 0 10-1.766-.996L4 7H3a2 2 0 00-2 2v2a2 2 0 002 2h1l3.617 1.502a1 1 0 101.766-.996L6.853 10l2.53-1.055zM14.004 7.253a1 1 0 00-1.748-.686 4.002 4.002 0 010 6.866 1 1 0 001.748-.686 2.002 2.002 0 000-3.494z" clip-rule="evenodd"></path></svg>
          <input type="range" class="w-32 bg-gray-300 dark:bg-gray-700 h-2 accent-yellow-400 dark:accent-yellow-600 border border-gray-900 dark:border-gray-100 outline-none hover:outline-none focus:outline-none" value="70">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M9.383 5.498a1 1 0 10-1.766-.996L4 7H3a2 2 0 00-2 2v2a2 2 0 002 2h1l3.617 1.502a1 1 0 101.766-.996L6.853 10l2.53-1.055zM14.004 7.253a1 1 0 00-1.748-.686 4.002 4.002 0 010 6.866 1 1 0 001.748-.686 2.002 2.002 0 000-3.494zM16.924 3.078a1 1 0 00-1.088 1.636 7.004 7.004 0 010 10.572 1 1 0 001.088 1.636 9.004 9.004 0 000-13.844z" clip-rule="evenodd"></path></svg>
        </div>

        <div class="absolute bottom-0 left-0 w-8 h-8 sm:w-10 sm:h-10 bg-gray-900 dark:bg-gray-100 -ml-1 -mb-1"></div>
      </div>

      <!-- Right Section: Track List -->
      <div class="md:col-span-3 p-4 sm:p-6 bg-gray-50 dark:bg-gray-700 border-t-2 border-gray-900 dark:border-gray-100 relative">
        <h3 class="text-lg sm:text-xl font-bold uppercase text-gray-900 dark:text-gray-100 mb-4">
          Playlist Tracks
        </h3>
        <ul class="space-y-3">
          <li class="flex items-center space-x-3 p-2 border-2 border-transparent hover:border-yellow-400 dark:hover:border-yellow-600 transition-colors duration-200 cursor-pointer group">
            <span class="text-sm text-gray-700 dark:text-gray-300 w-6 font-semibold flex-shrink-0">01</span>
            <div class="flex-grow">
              <p class="font-medium text-gray-900 dark:text-gray-100 group-hover:text-yellow-400 dark:group-hover:text-yellow-600">Push It To The Limit</p>
              <p class="text-xs text-gray-600 dark:text-gray-400">Turbo Beats Feat. Fitness Flow</p>
            </div>
            <span class="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0">4:20</span>
          </li>
          <li class="flex items-center space-x-3 p-2 border-2 border-transparent hover:border-r-yellow-400 dark:hover:border-r-yellow-600 transition-colors duration-200 cursor-pointer group">
            <span class="text-sm text-gray-700 dark:text-gray-300 w-6 font-semibold flex-shrink-0">02</span>
            <div class="flex-grow">
              <p class="font-medium text-gray-900 dark:text-gray-100 group-hover:text-yellow-400 dark:group-hover:text-yellow-600">Adrenaline Rush Zone</p>
              <p class="text-xs text-gray-600 dark:text-gray-400">Synth Pulse</p>
            </div>
            <span class="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0">3:55</span>
          </li>
          <li class="flex items-center space-x-3 p-2 border-2 border-transparent hover:border-r-yellow-400 dark:hover:border-r-yellow-600 transition-colors duration-200 cursor-pointer group">
            <span class="text-sm text-gray-700 dark:text-gray-300 w-6 font-semibold flex-shrink-0">03</span>
            <div class="flex-grow">
              <p class="font-medium text-gray-900 dark:text-gray-100 group-hover:text-yellow-400 dark:group-hover:text-yellow-600">Endurance Max</p>
              <p class="text-xs text-gray-600 dark:text-gray-400">Power Drifters</p>
            </div>
            <span class="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0">5:10</span>
          </li>
          <li class="flex items-center space-x-3 p-2 border-2 border-transparent hover:border-r-yellow-400 dark:hover:border-r-yellow-600 transition-colors duration-200 cursor-pointer group">
            <span class="text-sm text-gray-700 dark:text-gray-300 w-6 font-semibold flex-shrink-0">04</span>
            <div class="flex-grow">
              <p class="font-medium text-gray-900 dark:text-gray-100 group-hover:text-yellow-400 dark:group-hover:text-yellow-600">Beat Drop Blitz</p>
              <p class="text-xs text-gray-600 dark:text-gray-400">Rhythmic Force Inc.</p>
            </div>
            <span class="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0">3:40</span>
          </li>
          <li class="flex items-center space-x-3 p-2 border-2 border-transparent hover:border-r-yellow-400 dark:hover:border-r-yellow-600 transition-colors duration-200 cursor-pointer group">
            <span class="text-sm text-gray-700 dark:text-gray-300 w-6 font-semibold flex-shrink-0">05</span>
            <div class="flex-grow">
              <p class="font-medium text-gray-900 dark:text-gray-100 group-hover:text-yellow-400 dark:group-hover:text-yellow-600">Victory Lap Anthem</p>
              <p class="text-xs text-gray-600 dark:text-gray-400">The Finish Line Project</p>
            </div>
            <span class="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0">4:50</span>
          </li>
        </ul>
        <div class="absolute top-0 left-0 w-8 h-8 sm:w-10 sm:h-10 bg-gray-900 dark:bg-gray-100 -ml-1 -mt-1"></div>
      </div>
    </div>
  </div>
</div>
              

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-emerald-50 to-green-100 dark:from-gray-900 dark:to-gray-800 p-4 sm:p-6 lg:p-8">
  <div class="w-full max-w-sm md:max-w-md lg:max-w-xl bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden transform perspective-1000 rotateX-3 rotateY-2 transition-all duration-300 ease-in-out hover:rotateX-0 hover:rotateY-0 border-t border-l border-green-200 dark:border-green-700 bg-gradient-to-br from-green-50/50 to-emerald-50/50 dark:from-gray-800/50 dark:to-gray-900/50" style="transform-style: preserve-3d; perspective: 1000px;">
    <div class="p-6 md:p-8 lg:p-10 relative">
      <!-- Top '3D' Bevel -->
      <div class="absolute inset-0 bg-gradient-to-br from-green-500/20 to-emerald-600/20 dark:from-green-700/20 dark:to-emerald-800/20 rounded-3xl" style="transform: translateZ(-50px);"></div>

      <div class="relative z-10">
        <!-- Header -->
        <div class="flex items-center justify-between mb-6">
          <span class="text-xs md:text-sm uppercase tracking-wider text-green-700 dark:text-green-300 font-bold">Lesson Audio</span>
          <button class="p-2 rounded-full text-green-600 dark:text-green-400 hover:bg-green-100 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-green-500">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path></svg>
          </button>
        </div>

        <!-- Album Art / Thumbnail -->
        <div class="relative w-full aspect-video rounded-xl overflow-hidden shadow-lg mb-6 transform translateZ(20px)">
          <img src="https://picsum.photos/600/350?random=1" alt="Course Thumbnail" class="absolute inset-0 w-full h-full object-cover rounded-xl transition-transform duration-300 ease-in-out hover:scale-105">
          <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent rounded-xl"></div>
          <div class="absolute bottom-4 left-4 right-4 text-white">
            <h3 class="text-lg md:text-xl font-bold mb-1 drop-shadow-md">Understanding Photosynthesis</h3>
            <p class="text-sm text-gray-200 drop-shadow-sm">Biology Basics - Chapter 3</p>
          </div>
        </div>

        <!-- Controls and Progress Bar -->
        <div class="mb-6">
          <div class="flex justify-between items-center text-sm font-medium text-green-800 dark:text-green-200 mb-2">
            <span>1:23</span>
            <span>-3:45</span>
          </div>
          <div class="w-full bg-green-200 dark:bg-green-700 rounded-full h-2.5 relative transform translateZ(10px)">
            <div class="bg-green-500 dark:bg-green-400 h-2.5 rounded-full" style="width: 30%;"></div>
            <div class="absolute -top-0.5 left-[calc(30%-8px)] w-4 h-4 bg-white dark:bg-gray-800 rounded-full shadow-md border-2 border-green-500 dark:border-green-400 transform translateZ(5px)"></div>
          </div>
        </div>

        <div class="flex items-center justify-around mb-6 space-x-2">
          <button class="p-3 md:p-4 rounded-full text-green-600 dark:text-green-400 bg-green-100 dark:bg-gray-700 shadow-md hover:scale-105 active:scale-95 transition-all duration-200 transform translateZ(15px)">
            <svg class="w-6 h-6 md:w-7 md:h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 12c0 2.21.817 4.218 2.155 5.74M15 9V3M9 15v6"></path></svg>
          </button>
          <button class="p-3 md:p-4 rounded-full text-green-600 dark:text-green-400 bg-green-100 dark:bg-gray-700 shadow-md hover:scale-105 active:scale-95 transition-all duration-200 transform translateZ(15px)">
            <svg class="w-6 h-6 md:w-7 md:h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 19l-7-7 7-7m8 14l-7-7 7-7"></path></svg>
          </button>
          <button class="p-4 md:p-5 lg:p-6 rounded-full bg-green-500 dark:bg-green-600 text-white shadow-xl hover:scale-110 active:scale-90 transition-all duration-300 transform translateZ(25px) border-4 border-green-300 dark:border-green-500/50">
            <svg class="w-8 h-8 md:w-9 md:h-9" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
          </button>
          <button class="p-3 md:p-4 rounded-full text-green-600 dark:text-green-400 bg-green-100 dark:bg-gray-700 shadow-md hover:scale-105 active:scale-95 transition-all duration-200 transform translateZ(15px)">
            <svg class="w-6 h-6 md:w-7 md:h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7"></path></svg>
          </button>
          <button class="p-3 md:p-4 rounded-full text-green-600 dark:text-green-400 bg-green-100 dark:bg-gray-700 shadow-md hover:scale-105 active:scale-95 transition-all duration-200 transform translateZ(15px)">
            <svg class="w-6 h-6 md:w-7 md:h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.746 12C12.9 8.7 10.6 5.4 8.7 2.1m-2.1 6.6c-1.3 2.1-2.6 4.2-3.9 6.3M21 12c-1.8 3.3-4.1 6.6-6 9.9m-2.1-6.6c1.3-2.1 2.6-4.2 3.9-6.3M12 12a1 1 0 11-2 0 1 1 0 012 0z"></path></svg>
          </button>
        </div>

        <!-- More Info -->
        <div class="flex items-center space-x-4 bg-green-50 dark:bg-gray-700 p-4 rounded-xl shadow-inner transform translateZ(10px) border border-green-200 dark:border-gray-600">
          <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Instructor" class="w-12 h-12 rounded-full object-cover shadow-md">
          <div>
            <p class="text-sm font-semibold text-green-900 dark:text-green-100">Taught by Dr. Elara Vance</p>
            <p class="text-xs text-green-700 dark:text-green-300">Botanist & Environmental Scientist</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
              

                <div class="p-4 sm:p-6 lg:p-8 bg-amber-100 dark:bg-zinc-800 transition-colors duration-300 min-h-screen flex items-center justify-center font-sans">
  <div class="relative w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl mx-auto rounded-3xl overflow-hidden shadow-xl dark:shadow-2xl transition-all duration-300 ease-in-out
              bg-gradient-to-br from-amber-200 to-yellow-300 dark:from-zinc-700 dark:to-zinc-900
              border-4 border-amber-500 dark:border-zinc-500">

    <!-- Memphis Pattern Background -->
    <div class="absolute inset-0 z-0 opacity-20 dark:opacity-10 pointer-events-none">
      <svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
        <defs>
          <pattern id="memphis-pattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
            <rect x="0" y="0" width="10" height="10" fill="#6b4e4e" class="dark:fill-zinc-600" />
            <circle cx="15" cy="5" r="3" fill="#a0522d" class="dark:fill-zinc-400" />
            <rect x="5" y="10" width="10" height="7" fill="#d2b48c" class="dark:fill-zinc-500" />
            <path d="M0 0 L10 20 L20 0 Z" fill="#7f5539" class="dark:fill-zinc-700" />
          </pattern>
        </defs>
        <rect x="0" y="0" width="100%" height="100%" fill="url(#memphis-pattern)" />
      </svg>
    </div>

    <!-- Player Content -->
    <div class="relative z-10 p-6 sm:p-8 lg:p-10 flex flex-col items-center space-y-6 sm:space-y-8">

      <!-- Top Section: Album Art & Info -->
      <div class="flex flex-col sm:flex-row items-center sm:items-start text-center sm:text-left w-full space-y-4 sm:space-y-0 sm:space-x-6">
        <div class="relative w-32 h-32 sm:w-40 sm:h-40 flex-shrink-0 rounded-tl-3xl rounded-br-3xl overflow-hidden shadow-lg border-4 border-amber-600 dark:border-zinc-600 transition-all duration-300">
          <img src="https://picsum.photos/300/300?random=1" alt="Album Art" class="w-full h-full object-cover transition-transform duration-300 hover:scale-105">
          <div class="absolute bottom-0 right-0 p-2 bg-amber-600 dark:bg-zinc-600 text-amber-50 dark:text-zinc-50 text-xs font-semibold rounded-tl-lg shadow-md">Live</div>
        </div>
        <div class="flex flex-col flex-grow mt-2 sm:mt-0">
          <p class="text-xs sm:text-sm text-amber-900 dark:text-zinc-300 font-semibold mb-1 uppercase tracking-wider">Now Playing</p>
          <h3 class="text-2xl sm:text-3xl font-extrabold text-amber-800 dark:text-zinc-100 leading-tight mb-2">
            The Earth's Embrace
          </h3>
          <p class="text-lg sm:text-xl text-amber-700 dark:text-zinc-200 font-medium">
            <span class="block sm:inline-block">By </span>
            <span class="font-semibold border-b-2 border-dashed border-amber-600 dark:border-zinc-400 pb-0.5">Gaia Echoes</span>
          </p>
        </div>
      </div>

      <!-- Progress Bar -->
      <div class="w-full flex items-center space-x-3 mt-6">
        <span class="text-amber-800 dark:text-zinc-200 text-sm font-medium">0:45</span>
        <div class="flex-grow h-3 bg-amber-400 dark:bg-zinc-600 rounded-full overflow-hidden relative shadow-inner">
          <div class="h-full w-[45%] bg-amber-700 dark:bg-zinc-400 rounded-full relative">
            <div class="absolute -right-2 top-1/2 -translate-y-1/2 w-4 h-4 bg-amber-900 dark:bg-zinc-100 rounded-full shadow-md border-2 border-amber-500 dark:border-zinc-500"></div>
          </div>
        </div>
        <span class="text-amber-800 dark:text-zinc-200 text-sm font-medium">3:20</span>
      </div>

      <!-- Controls -->
      <div class="w-full flex justify-around items-center text-amber-900 dark:text-zinc-200 mt-6 pt-4 border-t-2 border-dashed border-amber-500 dark:border-zinc-500">
        <button class="p-3 sm:p-4 rounded-full bg-amber-300 dark:bg-zinc-700 shadow-md transform transition-all duration-200 hover:scale-110 active:scale-95
                       border-2 border-amber-500 dark:border-zinc-500 focus:outline-none focus:ring-4 focus:ring-amber-500/50 dark:focus:ring-zinc-500/50">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" fill="currentColor"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></svg>
        </button>
        <button class="p-4 sm:p-5 rounded-full bg-amber-500 dark:bg-zinc-400 text-amber-50 dark:text-zinc-900 shadow-lg transform transition-all duration-200 hover:scale-110 active:scale-95
                       border-2 border-amber-700 dark:border-zinc-300 focus:outline-none focus:ring-4 focus:ring-amber-700/50 dark:focus:ring-zinc-300/50">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
        </button>
        <button class="p-3 sm:p-4 rounded-full bg-amber-300 dark:bg-zinc-700 shadow-md transform transition-all duration-200 hover:scale-110 active:scale-95
                       border-2 border-amber-500 dark:border-zinc-500 focus:outline-none focus:ring-4 focus:ring-amber-500/50 dark:focus:ring-zinc-500/50">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" fill="currentColor"><path d="M16 18h2V6h-2zM6 18l8.5-6L6 6z"/></svg>
        </button>
      </div>

      <!-- Volume and Settings -->
      <div class="w-full flex justify-between items-center mt-6 pt-4 border-t-2 border-dashed border-amber-500 dark:border-zinc-500">
        <div class="flex items-center space-x-2 text-amber-800 dark:text-zinc-200">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor"><path d="M14 3.23c-.27-.2-.59-.3-.92-.3h-3.85c-.91 0-1.7.55-2.06 1.47L2 12l5.17 7.37c.36.92 1.15 1.47 2.06 1.47h3.85c.33 0 .65-.11.92-.3L22 12 14 3.23zm-.12 1.42L20 12l-7.12 7.35-.13-.13V4.65z"/></svg>
          <input type="range" class="w-24 sm:w-32 h-2 rounded-full bg-amber-400 dark:bg-zinc-600 appearance-none cursor-pointer
                                    [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:bg-amber-700 dark:[&::-webkit-slider-thumb]:bg-zinc-400 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:shadow-md [&::-webkit-slider-thumb]:-mt-1.5 [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-amber-500 dark:[&::-webkit-slider-thumb]:border-zinc-500 [&::-webkit-slider-thumb]:appearance-none
                                    [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:bg-amber-700 dark:[&::-moz-range-thumb]:bg-zinc-400 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:shadow-md [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-amber-500 dark:[&::-moz-range-thumb]:border-zinc-500">
        </div>
        <button class="p-2 sm:p-3 rounded-full bg-amber-300 dark:bg-zinc-700 text-amber-900 dark:text-zinc-200 shadow-md transform transition-all duration-200 hover:scale-105 active:scale-95
                       border-2 border-amber-500 dark:border-zinc-500 focus:outline-none focus:ring-4 focus:ring-amber-500/50 dark:focus:ring-zinc-500/50">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>
        </button>
      </div>

    </div>
  </div>
</div>
              

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-indigo-50 to-purple-100 dark:from-gray-900 dark:to-gray-800 p-4 sm:p-6 md:p-8 font-serif">
  <div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] border border-gray-100 dark:border-gray-700">
    <div class="p-6 sm:p-8 md:p-10">
      <div class="flex flex-col sm:flex-row items-center sm:items-start space-y-6 sm:space-y-0 sm:space-x-8">
        <div class="flex-shrink-0 w-32 h-32 sm:w-40 sm:h-40 md:w-52 md:h-52 rounded-2xl overflow-hidden shadow-lg border border-gray-200 dark:border-gray-600 group relative">
          <img src="https://picsum.photos/400/400?random=1" alt="Album Art" class="w-full h-full object-cover transform scale-100 group-hover:scale-105 transition-transform duration-500 ease-in-out" loading="lazy">
          <div class="absolute inset-0 bg-gradient-to-br from-indigo-600/70 via-purple-600/70 to-pink-600/70 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
            <p class="text-white text-xs text-center font-medium opacity-0 group-hover:opacity-100 transition-opacity duration-500 delay-150">Therapeutic Sounds</p>
          </div>
        </div>

        <div class="flex-grow text-center sm:text-left">
          <h3 class="text-lg sm:text-xl md:text-2xl font-bold tracking-tight text-gray-900 dark:text-white capitalize leading-snug mb-1 sm:mb-2">
            Mindfulness Meditation for Stress Relief
          </h3>
          <p class="text-sm sm:text-base text-gray-600 dark:text-gray-300 font-medium opacity-90 mb-3 sm:mb-4 px-2 sm:px-0">
            Dr. Eleanor Vance, Clinical Psychologist
          </p>
          <div class="flex items-center justify-center sm:justify-start space-x-2 text-gray-500 dark:text-gray-400 text-xs sm:text-sm opaciy-80">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m12.728 0l-.707.707M6 18H4a2 2 0 01-2-2V8.307l2.748 1.924A2 2 0 007.5 9h10a2 2 0 011.5 1.076L22 8.307V16a2 2 0 01-2 2h-2M15 9V7a2 2 0 00-2-2H9a2 2 0 00-2 2v2m10 5a2 2 0 01-2 2H7a2 2 0 01-2-2v-2a2 2 0 012-2h6a2 2 0 012 2v2z"></path></svg>
            <span>Session 1 of 5</span>
            <span class="h-1 w-1 bg-gray-400 dark:bg-gray-500 rounded-full"></span>
            <span>30 min</span>
          </div>
        </div>
      </div>

      <div class="mt-8">
        <div class="relative h-1 w-full bg-gray-200 dark:bg-gray-700 rounded-full">
          <div class="absolute top-0 left-0 h-1 bg-gradient-to-r from-indigo-500 to-purple-500 dark:from-indigo-400 dark:to-purple-400 rounded-full" style="width: 45%;"></div>
          <div class="absolute top-1/2 -mt-2 -ml-2 w-4 h-4 bg-purple-600 dark:bg-purple-500 rounded-full shadow-lg cursor-pointer transform -translate-x-1/2" style="left: 45%;"></div>
        </div>
        <div class="flex justify-between text-xs sm:text-sm text-gray-600 dark:text-gray-400 mt-2 font-medium opacity-80">
          <span>0:14</span>
          <span>29:46</span>
        </div>
      </div>

      <div class="flex items-center justify-center space-x-6 sm:space-x-8 mt-6 sm:mt-8">
        <button class="p-3 rounded-full text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16l-4-4m0 0l4-4m-4 4h18"></path></svg>
        </button>
        <button class="p-2 sm:p-3 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 dark:from-indigo-600 dark:to-purple-700 text-white shadow-lg transform hover:scale-110 active:scale-95 transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-indigo-300 dark:focus:ring-purple-700">
          <svg class="w-7 h-7 sm:w-8 sm:h-8" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a.75.75 0 01-.75-.75V6.75a.75.75 0 011.5 0v10.5a.75.75 0 01-.75.75zM14.25 18a.75.75 0 01-.75-.75V6.75a.75.75 0 011.5 0v10.5a.75.75 0 01-.75.75z" clip-rule="evenodd"></path></svg>
        </button>
        <button class="p-3 rounded-full text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
        </button>
      </div>

      <div class="mt-8 border-t border-gray-100 dark:border-gray-700 pt-6 sm:pt-8">
        <h4 class="text-base sm:text-lg font-semibold text-gray-900 dark:text-white mb-4 opacity-95">Upcoming Sessions</h4>
        <ul class="space-y-4">
          <li class="flex items-center justify-between group cursor-pointer p-4 -mx-4 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
            <div class="flex items-center space-x-4">
              <div class="flex-shrink-0 w-10 h-10 rounded-lg overflow-hidden relative">
                <img src="https://picsum.photos/100/100?random=2" alt="Session Art" class="w-full h-full object-cover" loading="lazy">
                <div class="absolute inset-0 bg-yellow-500 opacity-20"></div>
              </div>
              <div>
                <p class="text-sm font-medium text-gray-800 dark:text-white group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors leading-tight">Breathing Exercises for Anxiety</p>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">Dr. Eleanor Vance • 25 min</p>
              </div>
            </div>
            <button class="p-2 text-gray-500 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 opacity-0 group-hover:opacity-100 transition-opacity duration-200 focus:outline-none">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
            </button>
          </li>
          <li class="flex items-center justify-between group cursor-pointer p-4 -mx-4 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
            <div class="flex items-center space-x-4">
              <div class="flex-shrink-0 w-10 h-10 rounded-lg overflow-hidden relative">
                <img src="https://picsum.photos/100/100?random=3" alt="Session Art" class="w-full h-full object-cover" loading="lazy">
                <div class="absolute inset-0 bg-pink-500 opacity-20"></div>
              </div>
              <div>
                <p class="text-sm font-medium text-gray-800 dark:text-white group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors leading-tight">Guided Imagery for Pain Management</p>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">Dr. Eleanor Vance • 40 min</p>
              </div>
            </div>
            <button class="p-2 text-gray-500 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 opacity-0 group-hover:opacity-100 transition-opacity duration-200 focus:outline-none">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
            </button>
          </li>
        </ul>
      </div>

    </div>
  </div>
</div>
              

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-200 via-pink-200 to-red-200 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 p-4">
  <div class="bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl p-6 shadow-lg max-w-sm w-full border border-white border-opacity-20 dark:border-gray-600 dark:border-opacity-20">
    <div class="flex items-center space-x-4 mb-4">
      <img class="w-16 h-16 rounded-lg shadow-md" src="https://picsum.photos/id/1040/80/80" alt="Album Art">
      <div class="flex-1">
        <h3 class="text-xl font-bold text-indigo-800 dark:text-indigo-300">Ocean Waves</h3>
        <p class="text-sm text-purple-700 dark:text-purple-300">Relaxation Sounds</p>
      </div>
    </div>
    <div class="relative mb-4">
      <div class="w-full bg-purple-200 rounded-full h-2 dark:bg-gray-600">
        <div class="bg-gradient-to-r from-indigo-500 to-pink-500 h-2 rounded-full" style="width: 70%;"></div>
      </div>
      <div class="flex justify-between text-xs text-purple-800 dark:text-purple-200 mt-1">
        <span>2:10</span>
        <span>3:05</span>
      </div>
    </div>
    <div class="flex items-center justify-center space-x-6">
      <button class="text-purple-800 dark:text-purple-200 focus:outline-none">
        <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 5V.3c-4.9 1.1-8.5 5.7-8.5 11.2s3.6 10.1 8.5 11.2V19c-3.7 0-6.7-3-6.7-6.7S8.3 5.3 12 5zm0 14c3.9 0 7-3.1 7-7s-3.1-7-7-7v14zM16 12c0 2.2-1.8 4-4 4s-4-1.8-4-4 1.8-4 4-4 4 1.8 4 4z"></path>
        </svg>
      </button>
      <button class="bg-gradient-to-r from-indigo-600 to-pink-600 text-white p-3 rounded-full shadow-lg focus:outline-none transform hover:scale-105 transition duration-300">
        <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
          <path d="M8 5v14l11-7z"></path>
        </svg>
      </button>
      <button class="text-purple-800 dark:text-purple-200 focus:outline-none">
        <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 5V.3c-4.9 1.1-8.5 5.7-8.5 11.2s3.6 10.1 8.5 11.2V19c-3.7 0-6.7-3-6.7-6.7S8.3 5.3 12 5zm0 14c3.9 0 7-3.1 7-7s-3.1-7-7-7v14zM16 12c0 2.2-1.8 4-4 4s-4-1.8-4-4 1.8-4 4-4 4 1.8 4 4z"></path>
        </svg>
      </button>
    </div>
  </div>
</div>
              

                <div class="min-h-screen bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900 dark:from-gray-900 dark:via-gray-800 dark:to-black p-8 flex items-center justify-center">
  <div class="relative w-full max-w-xl bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-3xl shadow-xl border border-white border-opacity-20 dark:border-gray-700 p-8 space-y-8 overflow-hidden">
    <div class="absolute inset-0 top-0 left-0 bg-gradient-to-br from-teal-400 to-cyan-600 rounded-full w-48 h-48 opacity-30 blur-2xl animate-blob"></div>
    <div class="absolute inset-0 bottom-0 right-0 bg-gradient-to-br from-fuchsia-500 to-purple-600 rounded-full w-48 h-48 opacity-30 blur-2xl animate-blob animation-delay-2000"></div>
    <div class="absolute inset-0 top-1/2 left-1/2 bg-gradient-to-br from-lime-400 to-green-500 rounded-full w-48 h-48 opacity-30 blur-2xl animate-blob animation-delay-4000"></div>

    <!-- Header -->
    <div class="text-center text-white relative z-10">
      <h2 class="text-3xl font-extrabold mb-2 drop-shadow-lg">Now Playing</h2>
      <p class="text-lg opacity-80">Smooth listening, anytime, anywhere.</p>
    </div>

    <!-- Album Art and Song Info -->
    <div class="flex flex-col items-center space-y-6 relative z-10">
      <div class="w-48 h-48 rounded-2xl overflow-hidden shadow-2xl border-4 border-white border-opacity-30 transform hover:scale-105 transition duration-300">
        <img src="https://picsum.photos/400/400?random=1" alt="Album Art" class="w-full h-full object-cover">
      </div>
      <div class="text-center text-white">
        <h3 class="text-2xl font-bold mb-1 drop-shadow-lg">Dreamscape Echoes</h3>
        <p class="text-md opacity-80">Vocalist Name & Band Name</p>
      </div>
    </div>

    <!-- Progress Bar -->
    <div class="relative z-10">
      <div class="h-2 bg-white bg-opacity-30 rounded-full">
        <div class="h-full bg-gradient-to-r from-teal-400 to-cyan-600 rounded-full w-2/5"></div>
      </div>
      <div class="flex justify-between text-white text-sm mt-2 opacity-80">
        <span>1:45</span>
        <span>3:20</span>
      </div>
    </div>

    <!-- Controls -->
    <div class="flex justify-center space-x-8 text-white text-3xl relative z-10">
      <button class="relative group p-3 rounded-full bg-white bg-opacity-20 hover:bg-opacity-30 transition duration-300 transform hover:scale-110 backdrop-filter backdrop-blur-lg shadow-lg border border-white border-opacity-30">
        <i class="fas fa-backward"></i>
        <span class="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 px-3 py-1 bg-gray-800 text-white text-xs rounded-full opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">Previous</span>
      </button>
      <button class="relative group p-4 rounded-full bg-gradient-to-br from-teal-400 to-cyan-600 hover:from-teal-500 hover:to-cyan-700 transition duration-300 transform hover:scale-110 shadow-lg border border-white border-opacity-30 text-4xl">
        <i class="fas fa-play"></i>
        <span class="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 px-3 py-1 bg-gray-800 text-white text-xs rounded-full opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">Play</span>
      </button>
      <button class="relative group p-3 rounded-full bg-white bg-opacity-20 hover:bg-opacity-30 transition duration-300 transform hover:scale-110 backdrop-filter backdrop-blur-lg shadow-lg border border-white border-opacity-30">
        <i class="fas fa-forward"></i>
        <span class="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 px-3 py-1 bg-gray-800 text-white text-xs rounded-full opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">Next</span>
      </button>
    </div>

    <!-- Volume and Shuffle/Repeat -->
    <div class="flex justify-between items-center text-white relative z-10">
      <div class="flex items-center space-x-3 w-1/3">
        <i class="fas fa-volume-up text-xl opacity-80"></i>
        <div class="w-full h-1.5 bg-white bg-opacity-30 rounded-full">
          <div class="h-full bg-gradient-to-r from-fuchsia-500 to-purple-600 rounded-full w-3/4"></div>
        </div>
      </div>
      <div class="flex space-x-6 text-2xl">
        <button class="relative group opacity-80 hover:opacity-100 transition duration-300 transform hover:scale-110">
          <i class="fas fa-random"></i>
          <span class="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 px-3 py-1 bg-gray-800 text-white text-xs rounded-full opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">Shuffle</span>
        </button>
        <button class="relative group opacity-80 hover:opacity-100 transition duration-300 transform hover:scale-110">
          <i class="fas fa-redo-alt"></i>
          <span class="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 px-3 py-1 bg-gray-800 text-white text-xs rounded-full opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">Repeat</span>
        </button>
      </div>
    </div>

    <!-- Social Share/Engagement -->
    <div class="flex justify-around text-white relative z-10">
      <button class="flex flex-col items-center space-y-1 opacity-80 hover:opacity-100 transition duration-300 transform hover:scale-105">
        <i class="fas fa-share-alt text-2xl"></i>
        <span class="text-xs">Share</span>
      </button>
      <button class="flex flex-col items-center space-y-1 opacity-80 hover:opacity-100 transition duration-300 transform hover:scale-105">
        <i class="fas fa-comment-dots text-2xl"></i>
        <span class="text-xs">Comment</span>
      </button>
      <button class="flex flex-col items-center space-y-1 opacity-80 hover:opacity-100 transition duration-300 transform hover:scale-105">
        <i class="fas fa-heart text-2xl"></i>
        <span class="text-xs">Like</span>
      </button>
      <button class="flex flex-col items-center space-y-1 opacity-80 hover:opacity-100 transition duration-300 transform hover:scale-105">
        <i class="fas fa-plus text-2xl"></i>
        <span class="text-xs">Add to Playlist</span>
      </button>
    </div>
    
    <!-- Equalizer Visualizer (dummy) -->
    <div class="relative z-10 flex justify-center items-end h-16 space-x-1 mt-4">
      <div class="w-1.5 bg-gradient-to-b from-teal-400 to-cyan-600 rounded-full animate-pulse h-1/2"></div>
      <div class="w-1.5 bg-gradient-to-b from-fuchsia-500 to-purple-600 rounded-full animate-pulse animation-delay-300 h-3/4"></div>
      <div class="w-1.5 bg-gradient-to-b from-lime-400 to-green-500 rounded-full animate-pulse animation-delay-600 h-1/3"></div>
      <div class="w-1.5 bg-gradient-to-b from-teal-400 to-cyan-600 rounded-full animate-pulse animation-delay-900 h-2/3"></div>
      <div class="w-1.5 bg-gradient-to-b from-fuchsia-500 to-purple-600 rounded-full animate-pulse animation-delay-1200 h-1/2"></div>
      <div class="w-1.5 bg-gradient-to-b from-lime-400 to-green-500 rounded-full animate-pulse animation-delay-1500 h-full"></div>
      <div class="w-1.5 bg-gradient-to-b from-teal-400 to-cyan-600 rounded-full animate-pulse animation-delay-1800 h-1/4"></div>
      <div class="w-1.5 bg-gradient-to-b from-fuchsia-500 to-purple-600 rounded-full animate-pulse animation-delay-2100 h-2/3"></div>
    </div>


  </div>
</div>

<style>
  @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css");

  /* Custom animations for background blobs */
  @keyframes blob {
    0%, 100% {
      transform: translate(0, 0) scale(1);
    }
    33% {
      transform: translate(30px, -50px) scale(1.1);
    }
    66% {
      transform: translate(-20px, 40px) scale(0.9);
    }
  }

  .animate-blob {
    animation: blob 7s infinite cubic-bezier(0.6, 0.01, 0.4, 1);
  }

  .animation-delay-2000 {
    animation-delay: 2s;
  }

  .animation-delay-4000 {
    animation-delay: 4s;
  }

  /* Custom animation for equalizer */
  @keyframes pulse {
    0%, 100% {
      transform: scaleY(0.5);
    }
    50% {
      transform: scaleY(1);
    }
  }

  .animate-pulse { 
    animation: pulse 1.5s infinite ease-in-out;
  }

  .animation-delay-300 { animation-delay: 0.3s; }
  .animation-delay-600 { animation-delay: 0.6s; }
  .animation-delay-900 { animation-delay: 0.9s; }
  .animation-delay-1200 { animation-delay: 1.2s; }
  .animation-delay-1500 { animation-delay: 1.5s; }
  .animation-delay-1800 { animation-delay: 1.8s; }
  .animation-delay-2100 { animation-delay: 2.1s; }

</style>

<script>
  // You can add JavaScript here for interactive elements if needed, but it's not required by the prompt.
  // For example, to toggle play/pause or change volume.
</script>

              

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
  <div class="bg-gradient-to-br from-purple-200 via-pink-200 to-red-200 dark:from-purple-900 dark:via-pink-900 dark:to-red-900 
              p-8 border-8 border-black dark:border-white shadow-brutalism 
              w-full max-w-2xl mx-auto 
              grid grid-cols-1 md:grid-cols-3 gap-6 transform -rotate-2 hover:rotate-0 transition-transform duration-300 relative"> 
       
    <div class="absolute top-4 right-4 text-black dark:text-white text-xs font-mono transform rotate-90">
        BRUTAL_AUDIO_PLAYER
    </div>

    <!-- Album Art / Info -->
    <div class="md:col-span-1 bg-black dark:bg-white p-4 border-4 border-black dark:border-white shadow-brutalism-sm">
      <img src="https://picsum.photos/400/400?random=1" alt="Album Art" class="w-full h-auto object-cover border-4 border-red-500 dark:border-blue-500 mb-4">
      <div class="text-white dark:text-black font-bold text-xl mb-1 font-mono">The Concrete Jungle</div>
      <div class="text-gray-300 dark:text-gray-700 text-sm font-mono">DJ Monolith</div>
      <div class="text-gray-500 dark:text-gray-500 text-xs font-mono mt-2">© 2023 Brutal Sounds Inc.</div>
    </div>

    <!-- Main Controls -->
    <div class="md:col-span-2 flex flex-col justify-between">

      <!-- Track Title & Progress Bar -->
      <div class="bg-white dark:bg-black p-4 border-4 border-black dark:border-white shadow-brutalism-sm mb-6">
        <div class="text-black dark:text-white font-mono text-lg mb-2">Track 01: Echoes in the Void</div>
        <div class="w-full bg-gray-300 dark:bg-gray-700 h-4 border-2 border-black dark:border-white relative">
          <div class="bg-red-500 dark:bg-blue-500 h-full w-3/5 border-r-2 border-black dark:border-white"></div>
          <div class="absolute top-0 left-3/5 -mt-1 -ml-1 h-6 w-6 bg-green-400 dark:bg-yellow-400 border-4 border-black dark:border-white transform rotate-45"></div>
        </div>
        <div class="flex justify-between text-xs font-mono text-black dark:text-white mt-1">
          <span>1:45</span>
          <span>4:23</span>
        </div>
      </div>

      <!-- Playback Controls -->
      <div class="grid grid-cols-3 gap-4 mb-6">
        <button class="bg-black dark:bg-white text-white dark:text-black p-4 border-4 border-black dark:border-white 
                       shadow-brutalism-sm hover:bg-red-500 dark:hover:bg-blue-500 transition-colors duration-200 
                       font-bold text-xl font-mono transform skew-x-6 hover:skew-x-0">RWD</button>
        <button class="bg-black dark:bg-white text-white dark:text-black p-4 border-4 border-black dark:border-white 
                       shadow-brutalism-sm hover:bg-green-500 dark:hover:bg-yellow-500 transition-colors duration-200 
                       font-bold text-xl font-mono transform -rotate-12 hover:rotate-0">PLAY</button>
        <button class="bg-black dark:bg-white text-white dark:text-black p-4 border-4 border-black dark:border-white 
                       shadow-brutalism-sm hover:bg-red-500 dark:hover:bg-blue-500 transition-colors duration-200 
                       font-bold text-xl font-mono transform skew-x-6 hover:skew-x-0">FFW</button>
      </div>

      <!-- Volume & Mute -->
      <div class="flex items-center space-x-4 bg-white dark:bg-black p-4 border-4 border-black dark:border-white shadow-brutalism-sm">
        <span class="text-black dark:text-white font-mono text-lg">VOL:</span>
        <div class="flex-grow bg-gray-300 dark:bg-gray-700 h-4 border-2 border-black dark:border-white relative">
          <div class="bg-green-500 dark:bg-yellow-500 h-full w-4/5 border-r-2 border-black dark:border-white"></div>
          <div class="absolute top-0 left-4/5 -mt-1 -ml-1 h-6 w-6 bg-red-400 dark:bg-cyan-400 border-4 border-black dark:border-white transform rotate-45"></div>
        </div>
        <button class="bg-black dark:bg-white text-white dark:text-black p-2 border-4 border-black dark:border-white 
                       shadow-brutalism-sm hover:bg-purple-500 dark:hover:bg-orange-500 transition-colors duration-200 
                       font-bold text-sm font-mono">MUTE</button>
      </div>

    </div>

    <!-- Footer / Additional Info -->
    <div class="md:col-span-3 bg-black dark:bg-white p-4 border-4 border-black dark:border-white shadow-brutalism-sm
                flex justify-around items-center flex-wrap mt-6">
        <div class="text-white dark:text-black font-mono text-sm mb-2 md:mb-0">"DISTORTION IS BEAUTY"</div>
        <div class="relative w-16 h-16 border-4 border-red-500 dark:border-blue-500 transform rotate-6 hover:rotate-0 transition-transform duration-300">
            <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Artist Avatar" class="w-full h-full object-cover">
            <div class="absolute -bottom-2 -right-2 w-6 h-6 bg-green-500 dark:bg-yellow-500 border-4 border-black dark:border-white"></div>
        </div>
        <div class="text-white dark:text-black font-mono text-sm mt-2 md:mt-0">EST. MMXXIII</div>
    </div>

  </div>

  <!-- Brutalist Shadow Utility Class -->
  <style>
    .shadow-brutalism {
      box-shadow: 12px 12px 0px 0px #000, 14px 14px 0px 0px rgb(249 115 22);
    }
    .shadow-brutalism-sm {
      box-shadow: 6px 6px 0px 0px #000, 8px 8px 0px 0px rgb(239 68 68);
    }
    .dark .shadow-brutalism {
      box-shadow: 12px 12px 0px 0px #fff, 14px 14px 0px 0px rgb(59 130 246);
    }
    .dark .shadow-brutalism-sm {
      box-shadow: 6px 6px 0px 0px #fff, 8px 8px 0px 0px rgb(96 165 250);
    }
  </style>
</div>
              

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
  <div class="bg-red-500 dark:bg-red-800 p-6 shadow-2xl border-4 border-black dark:border-white w-full max-w-md">
    <div class="flex justify-between items-center mb-4 border-b-4 border-black dark:border-white pb-2">
      <h2 class="text-2xl md:text-3xl font-extrabold text-black dark:text-white uppercase tracking-wider">Now Playing</h2>
      <div class="text-black dark:text-white text-lg font-bold">🔊</div>
    </div>
    
    <div class="flex items-center space-x-4 mb-6">
      <div class="w-20 h-20 bg-blue-500 dark:bg-blue-800 flex-shrink-0 border-2 border-black dark:border-white overflow-hidden">
        <img src="https://picsum.photos/80/80?random=1" alt="Album Art" class="w-full h-full object-cover grayscale">
      </div>
      <div class="flex-grow">
        <h3 class="text-xl md:text-2xl font-bold text-black dark:text-white uppercase leading-tight">Track Title Goes Here</h3>
        <p class="text-md md:text-lg text-black dark:text-white font-medium">Artist Name</p>
      </div>
    </div>
    
    <div class="mb-6">
      <div class="w-full bg-black dark:bg-white h-4 mb-2 relative border-2 border-black dark:border-white">
        <div class="bg-yellow-500 dark:bg-yellow-400 h-full" style="width: 60%;"></div>
        <div class="absolute -right-1 top-1/2 -translate-y-1/2 w-6 h-6 bg-black dark:bg-white border-2 border-black dark:border-white"></div>
      </div>
      <div class="flex justify-between text-black dark:text-white text-sm font-semibold">
        <span>2:30</span>
        <span>-1:45</span>
      </div>
    </div>
    
    <div class="grid grid-cols-3 gap-4 border-t-4 border-black dark:border-white pt-4">
      <button class="bg-black dark:bg-white text-yellow-500 dark:text-yellow-400 p-3 text-lg md:text-xl font-bold border-2 border-black dark:border-white flex items-center justify-center transform active:scale-95 transition-transform duration-100">
        ⏪
      </button>
      <button class="bg-yellow-500 dark:bg-yellow-400 text-black dark:text-white p-3 text-lg md:text-xl font-bold border-2 border-black dark:border-white flex items-center justify-center transform active:scale-95 transition-transform duration-100">
        ▶
      </button>
      <button class="bg-black dark:bg-white text-yellow-500 dark:text-yellow-400 p-3 text-lg md:text-xl font-bold border-2 border-black dark:border-white flex items-center justify-center transform active:scale-95 transition-transform duration-100">
        ⏩
      </button>
    </div>
    
    <div class="mt-6 pt-4 border-t-4 border-black dark:border-white">
      <div class="flex justify-between items-center mb-2">
        <span class="text-black dark:text-white font-bold text-sm">Volume</span>
        <span class="text-black dark:text-white text-sm">75%</span>
      </div>
      <div class="w-full bg-black dark:bg-white h-3 relative border-2 border-black dark:border-white">
        <div class="bg-blue-500 dark:bg-blue-800 h-full" style="width: 75%;"></div>
        <div class="absolute -right-1 top-1/2 -translate-y-1/2 w-5 h-5 bg-black dark:bg-white border-2 border-black dark:border-white"></div>
      </div>
    </div>
    
  </div>
</div>