Neumorphic Mobile Music Player Screen

<div class="relative screen-2">
        <div class="w-[393px] h-[850px] bg-black border-gray-800 border-8 rounded-[55px] pt-0 pr-0 pb-0 pl-0 shadow-2xl">
          <!-- Screen -->
          <div class="w-full h-full overflow-hidden relative rounded-[47px]">
            
            <!-- Status Bar -->
            <div class="flex justify-between items-center px-8 pt-4 pb-2">
              <div class="text-white text-sm font-medium font-sans" style="">9:41</div>
              <div class="flex items-center gap-1">
                <div class="w-4 h-2.5 border border-white rounded-sm">
                  <div class="w-3 h-1.5 bg-white rounded-sm m-0.5"></div>
                </div>
              </div>
            </div>

            <!-- Navigation -->
            <div class="flex pr-6 pb-6 pl-6 items-center justify-between">
              <button class="w-8 h-8 flex items-center justify-center">
                <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="chevron-down" class="lucide lucide-chevron-down w-6 h-6 text-white"><path d="m6 9 6 6 6-6" class=""></path></svg>
              </button>
              <div class="flex flex-col items-center">
                <span class="text-xs text-white/60 uppercase tracking-wider font-sans">Playing from Library</span>
                <span class="text-sm text-white font-medium font-sans" style="">Recently Added</span>
              </div>
              <button class="w-8 h-8 flex items-center justify-center">
                <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="more-horizontal" class="lucide lucide-more-horizontal w-6 h-6 text-white"><circle cx="12" cy="12" r="1" class=""></circle><circle cx="19" cy="12" r="1" class=""></circle><circle cx="5" cy="12" r="1" class=""></circle></svg>
              </button>
            </div>

            <!-- Album Art -->
            <div class="px-8 pb-8">
              <div class="aspect-square rounded-2xl overflow-hidden shadow-2xl">
                <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/ef672600-6227-4688-9383-8059dd612313_800w.jpg" alt="Album Cover" class="w-full h-full object-cover">
              </div>
            </div>

            <!-- Song Info -->
            <div class="px-8 pb-4">
              <div class="flex justify-between items-start">
                <div class="flex-1 min-w-0">
                  <h1 class="text-2xl text-white tracking-tight truncate font-sans font-medium" style="">Blinding Lights</h1>
                  <p class="text-lg text-white/70 truncate mt-1 font-sans" style="">The Weeknd</p>
                </div>
                <button class="ml-4 p-2">
                  <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="more-horizontal" class="lucide lucide-more-horizontal w-6 h-6 text-white/70"><circle cx="12" cy="12" r="1" class=""></circle><circle cx="19" cy="12" r="1" class=""></circle><circle cx="5" cy="12" r="1" class=""></circle></svg>
                </button>
              </div>
            </div>

            <!-- Progress Bar -->
            <div class="px-8 pb-6">
              <div class="w-full h-1 bg-white/20 rounded-full mb-2">
                <div class="w-1/3 h-full bg-white rounded-full"></div>
              </div>
              <div class="flex justify-between text-xs text-white/60">
                <span class="font-sans">1:23</span>
                <span class="font-sans">3:20</span>
              </div>
            </div>

            <!-- Controls -->
            <div class="pr-8 pb-8 pl-8">
  <div class="flex gap-4 items-center justify-center">
    <button class="wrap" style="--radius: 20px; --bg: #2c3238; display: flex; align-items: center; justify-content: center; flex-direction: column; position: relative; width: 50px; height: 50px;">
      <div style="content: ''; position: absolute; width: 150px; height: 2000px; border-radius: 50px; background-color: rgba(255, 255, 255, 0.05); filter: blur(40px); transform: skewY(-20deg); pointer-events: none; z-index: 1;"></div>
      <div style="content: ''; position: absolute; width: 100%; height: 100%; border-radius: 50px; background-color: rgba(0, 0, 0, 0.5); filter: blur(20px); z-index: 2;" class=""></div>
      <div class="button" style="position: relative; overflow: hidden; width: 44px; height: 44px; background-color: var(--bg); z-index: 10; border: transparent; border-radius: var(--radius); box-shadow: inset 0 1px 1px rgb(255 255 255 / 40%), inset 0 -6px 1px -4px #000000, inset 0 -15px 6px -8px #000000; transition: all 0.3s ease;">
        <div style="content: ''; position: absolute; inset: 0; border-radius: calc(var(--radius) * 0.8); border-top: 12px solid #414244; border-left: 10px solid #2b2b2c; border-right: 10px solid #2b2b2c; border-bottom: 12px solid #15161a; filter: blur(4px); transition: all 0.5s ease; z-index: 1;" class=""></div>
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="shuffle" class="lucide lucide-shuffle w-[18px] h-[18px]" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 20; width: 18px; height: 18px; color: rgb(156, 163, 175);"><path d="m18 14 4 4-4 4" class=""></path><path d="m18 2 4 4-4 4" class=""></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" class=""></path><path d="M2 6h1.972a4 4 0 0 1 3.6 2.2" class=""></path><path d="M22 18h-6.041a4 4 0 0 1-3.3-1.8l-.359-.45" class=""></path></svg>
      </div>
    </button>
    
    <button class="wrap" style="--radius: 25px; --bg: #2c3238; display: flex; align-items: center; justify-content: center; flex-direction: column; position: relative; width: 65px; height: 65px;">
      <div style="content: ''; position: absolute; width: 200px; height: 2500px; border-radius: 50px; background-color: rgba(255, 255, 255, 0.05); filter: blur(50px); transform: skewY(-20deg); pointer-events: none; z-index: 1;"></div>
      <div style="content: ''; position: absolute; width: 100%; height: 100%; border-radius: 50px; background-color: rgba(0, 0, 0, 0.5); filter: blur(25px); z-index: 2;" class=""></div>
      <div class="button" style="position: relative; overflow: hidden; width: 56px; height: 56px; background-color: var(--bg); z-index: 10; border: transparent; border-radius: var(--radius); box-shadow: inset 0 1px 1px rgb(255 255 255 / 40%), inset 0 -6px 1px -4px #000000, inset 0 -15px 6px -8px #000000; transition: all 0.3s ease;">
        <div style="content: ''; position: absolute; inset: 0; border-radius: calc(var(--radius) * 0.8); border-top: 16px solid #414244; border-left: 12px solid #2b2b2c; border-right: 12px solid #2b2b2c; border-bottom: 16px solid #15161a; filter: blur(5px); transition: all 0.5s ease; z-index: 1;" class=""></div>
        <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="skip-back" class="lucide lucide-skip-back lucide-shuffle w-[20px] h-[20px]" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 20; width: 20px; height: 20px; color: rgb(156, 163, 175);"><path d="M17.971 4.285A2 2 0 0 1 21 6v12a2 2 0 0 1-3.029 1.715l-9.997-5.998a2 2 0 0 1-.003-3.432z" class=""></path><path d="M3 20V4" class=""></path></svg>
      </div>
    </button>
    
    <button class="wrap" style="--radius: 30px; --bg: #2c3238; display: flex; align-items: center; justify-content: center; flex-direction: column; position: relative; width: 80px; height: 80px;">
      <div style="content: ''; position: absolute; width: 250px; height: 3000px; border-radius: 50px; background-color: rgba(255, 255, 255, 0.05); filter: blur(60px); transform: skewY(-20deg); pointer-events: none; z-index: 1;"></div>
      <div style="content: ''; position: absolute; width: 100%; height: 100%; border-radius: 50px; background-color: rgba(0, 0, 0, 0.5); filter: blur(30px); z-index: 2;"></div>
      <div class="button" style="position: relative; overflow: hidden; width: 70px; height: 70px; background-color: var(--bg); z-index: 10; border: transparent; border-radius: var(--radius); box-shadow: inset 0 1px 1px rgb(255 255 255 / 40%), inset 0 -6px 1px -4px #0084ff, inset 0 -15px 6px -8px #003cff; transition: all 0.3s ease;">
        <div style="content: ''; position: absolute; inset: 0; border-radius: calc(var(--radius) * 0.8); border-top: 20px solid #414244; border-left: 15px solid #2b2b2c; border-right: 15px solid #2b2b2c; border-bottom: 20px solid #15161a; filter: blur(6px); transition: all 0.5s ease; z-index: 1;" class=""></div>
        <div class="corner" style="transition: all 0.4s ease; opacity: 0.1; z-index: 2;">
          <div style="content: ''; position: absolute; top: 0; left: 8px; border-top: 25px solid white; border-left: 8px solid transparent; border-right: 8px solid transparent; filter: blur(6px); transform: rotate(-40deg);"></div>
          <div style="content: ''; position: absolute; top: 0; right: 8px; border-top: 25px solid white; border-left: 8px solid transparent; border-right: 8px solid transparent; filter: blur(6px); transform: rotate(40deg);" class=""></div>
        </div>
        <div class="inner" style="z-index: 15; position: absolute; display: flex; align-items: center; justify-content: center; inset: 12px 10px; border-radius: calc(var(--radius) * 0.85); background: linear-gradient(180deg, #232324 5%, #46484b 100%); transition: all 0.3s ease; box-shadow: inset 0 -5px 15px -1px rgba(0, 0, 0, 0.3), inset 0 -4px 3px -3px black, inset 0 -10px 20px -8px rgb(255 255 255 / 40%), inset 0 1px 0 1px rgb(255 255 255 / 20%);">
          <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="pause" class="lucide lucide-pause" style="width: 24px; height: 24px; filter: drop-shadow(rgb(2, 49, 206) 0px 0px 10px); z-index: 20; color: rgb(60, 105, 255);"><rect x="14" y="3" width="5" height="18" rx="1" class=""></rect><rect x="5" y="3" width="5" height="18" rx="1" class=""></rect></svg>
        </div>
      </div>
      
      
    </button>
    
    <button class="wrap" style="--radius: 25px; --bg: #2c3238; display: flex; align-items: center; justify-content: center; flex-direction: column; position: relative; width: 65px; height: 65px;">
      <div style="content: ''; position: absolute; width: 200px; height: 2500px; border-radius: 50px; background-color: rgba(255, 255, 255, 0.05); filter: blur(50px); transform: skewY(-20deg); pointer-events: none; z-index: 1;"></div>
      <div style="content: ''; position: absolute; width: 100%; height: 100%; border-radius: 50px; background-color: rgba(0, 0, 0, 0.5); filter: blur(25px); z-index: 2;" class=""></div>
      <div class="button" style="position: relative; overflow: hidden; width: 56px; height: 56px; background-color: var(--bg); z-index: 10; border: transparent; border-radius: var(--radius); box-shadow: inset 0 1px 1px rgb(255 255 255 / 40%), inset 0 -6px 1px -4px #000000, inset 0 -15px 6px -8px #000000; transition: all 0.3s ease;">
        <div style="content: ''; position: absolute; inset: 0; border-radius: calc(var(--radius) * 0.8); border-top: 16px solid #414244; border-left: 12px solid #2b2b2c; border-right: 12px solid #2b2b2c; border-bottom: 16px solid #15161a; filter: blur(5px); transition: all 0.5s ease; z-index: 1;" class=""></div>
        <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="skip-forward" class="lucide lucide-skip-forward lucide-skip-back lucide-shuffle w-[20px] h-[20px]" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 20; width: 20px; height: 20px; color: rgb(156, 163, 175);"><path d="M21 4v16" class=""></path><path d="M6.029 4.285A2 2 0 0 0 3 6v12a2 2 0 0 0 3.029 1.715l9.997-5.998a2 2 0 0 0 .003-3.432z" class=""></path></svg>
      </div>
    </button>
    
    <button class="wrap" style="--radius: 20px; --bg: #2c3238; display: flex; align-items: center; justify-content: center; flex-direction: column; position: relative; width: 50px; height: 50px;">
      <div style="content: ''; position: absolute; width: 150px; height: 2000px; border-radius: 50px; background-color: rgba(255, 255, 255, 0.05); filter: blur(40px); transform: skewY(-20deg); pointer-events: none; z-index: 1;"></div>
      <div style="content: ''; position: absolute; width: 100%; height: 100%; border-radius: 50px; background-color: rgba(0, 0, 0, 0.5); filter: blur(20px); z-index: 2;" class=""></div>
      <div class="button" style="position: relative; overflow: hidden; width: 44px; height: 44px; background-color: var(--bg); z-index: 10; border: transparent; border-radius: var(--radius); box-shadow: inset 0 1px 1px rgb(255 255 255 / 40%), inset 0 -6px 1px -4px #000000, inset 0 -15px 6px -8px #000000; transition: all 0.3s ease;">
        <div style="content: ''; position: absolute; inset: 0; border-radius: calc(var(--radius) * 0.8); border-top: 12px solid #414244; border-left: 10px solid #2b2b2c; border-right: 10px solid #2b2b2c; border-bottom: 12px solid #15161a; filter: blur(4px); transition: all 0.5s ease; z-index: 1;" class=""></div>
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" 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 w-[18px] h-[18px]" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 20; width: 18px; height: 18px; color: rgb(156, 163, 175);"><path d="m17 2 4 4-4 4" class=""></path><path d="M3 11v-1a4 4 0 0 1 4-4h14" class=""></path><path d="m7 22-4-4 4-4" class=""></path><path d="M21 13v1a4 4 0 0 1-4 4H3" class=""></path></svg>
      </div>
    </button>
  </div>
</div>

            <!-- Bottom Controls -->
            <div class="px-8 pb-8">
              <div class="flex items-center justify-between">
                <button class="p-2">
                  <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="volume-1" class="lucide lucide-volume-1 w-5 h-5 text-white/70"><path d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z" class=""></path><path d="M16 9a5 5 0 0 1 0 6" class=""></path></svg>
                </button>
                <div class="flex-1 mx-4 h-1 bg-white/20 rounded-full">
                  <div class="w-2/3 h-full bg-white rounded-full"></div>
                </div>
                <button class="p-2">
                  <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="volume-2" class="lucide lucide-volume-2 w-5 h-5 text-white/70"><path d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z" class=""></path><path d="M16 9a5 5 0 0 1 0 6" class=""></path><path d="M19.364 18.364a9 9 0 0 0 0-12.728" class=""></path></svg>
                </button>
              </div>
            </div>

            <!-- AirPlay & List -->
            <div class="pr-8 pb-6 pl-8">
              <div class="flex items-center justify-between">
                <button class="flex items-center gap-2 p-2">
                  <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="cast" class="lucide lucide-cast w-5 h-5 text-white/70"><path d="M2 8V6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6" class=""></path><path d="M2 12a9 9 0 0 1 8 8" class=""></path><path d="M2 16a5 5 0 0 1 4 4" class=""></path><line x1="2" x2="2.01" y1="20" y2="20" class=""></line></svg>
                  <span class="text-sm text-white/70 font-sans">iPhone</span>
                </button>
                <button class="p-2">
                  <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="list" class="lucide lucide-list w-5 h-5 text-white/70"><path d="M3 12h.01" class=""></path><path d="M3 18h.01" class=""></path><path d="M3 6h.01" class=""></path><path d="M8 12h13" class=""></path><path d="M8 18h13" class=""></path><path d="M8 6h13" class=""></path></svg>
                </button>
              </div>
            </div>

            <!-- Home Indicator -->
            <div class="absolute bottom-2 left-1/2 transform -translate-x-1/2 w-32 h-1 bg-white/30 rounded-full"></div>
          </div>
        </div>
      </div>