Neumorphic Audio Mixer Control Panel UI

<div class="min-h-screen flex items-center justify-center bg-black">
  <main
    class="bg-gradient-to-br from-[#212631] via-[#161920] to-[#0f1115] w-full max-w-5xl ring-[#333a47]/50 ring-1 rounded-[3rem] pt-10 pr-10 pb-10 pl-10 relative shadow-[0_30px_60px_rgba(0,0,0,0.15),0_10px_20px_rgba(0,0,0,0.1),inset_0_1px_1px_rgba(255,255,255,0.1),inset_0_-1px_2px_rgba(0,0,0,0.5)] backdrop-blur-3xl"
    data-element-locator="html &gt; body:nth-of-type(1) &gt; main:nth-of-type(1)">
    <!-- Inner Edge Highlight -->
    <div
      class="absolute inset-2 rounded-[2.5rem] ring-1 ring-black/40 shadow-[inset_0_2px_10px_rgba(0,0,0,0.5)] pointer-events-none">
    </div>

    <div class="relative z-10">
      <!-- Header Section -->
      <header class="flex items-center justify-between mb-16 relative pb-8">
        <!-- Engraved Divider -->
        <div
          class="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[#333a47] to-transparent shadow-[0_1px_0_rgba(0,0,0,0.8)]">
        </div>

        <div class="flex items-center gap-3">
          <div
            class="w-8 h-8 rounded-full bg-gradient-to-br from-orange-500 to-orange-700 shadow-[0_0_15px_rgba(249,115,22,0.4),inset_0_1px_2px_rgba(255,255,255,0.4)] flex items-center justify-center">
            <div class="w-3 h-3 rounded-full bg-white shadow-[0_0_5px_rgba(255,255,255,0.8)]"></div>
          </div>
          <!-- Logo (Letters only, tight tracking) -->
          <h1
            class="text-2xl font-medium tracking-tighter text-transparent bg-clip-text bg-gradient-to-b from-slate-200 to-slate-500 drop-shadow-[0_2px_2px_rgba(0,0,0,1)]">
            NXA
          </h1>
        </div>

        <div class="flex gap-5">
          <button class="w-12 h-12 rounded-full bg-gradient-to-b from-[#252a33] to-[#161920] shadow-[5px_5px_15px_rgba(0,0,0,0.6),-2px_-2px_8px_rgba(255,255,255,0.03),inset_0_1px_1px_rgba(255,255,255,0.1)] flex items-center justify-center text-slate-400 hover:text-orange-400 transition-all active:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-1px_-1px_2px_rgba(255,255,255,0.05)] active:scale-95">
              <iconify-icon icon="solar:tuning-linear" style="stroke-width: 1.5;"></iconify-icon>
            </button>
          <button class="w-12 h-12 rounded-full bg-gradient-to-b from-[#252a33] to-[#161920] shadow-[5px_5px_15px_rgba(0,0,0,0.6),-2px_-2px_8px_rgba(255,255,255,0.03),inset_0_1px_1px_rgba(255,255,255,0.1)] flex items-center justify-center text-slate-400 hover:text-orange-400 transition-all active:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-1px_-1px_2px_rgba(255,255,255,0.05)] active:scale-95">
              <iconify-icon icon="solar:settings-linear" style="stroke-width: 1.5;"></iconify-icon>
            </button>
        </div>
      </header>

      <!-- Main Control Grid -->
      <div class="grid grid-cols-1 md:grid-cols-3 gap-12 items-center justify-items-center">
        <!-- Left Dials (Bass, Mid) -->
        <div class="flex flex-row md:flex-col gap-12 w-full justify-around md:justify-center">
          <!-- Bass Dial -->
          <div class="flex flex-col items-center gap-5">
            <div class="relative w-36 h-36 flex items-center justify-center group cursor-pointer">
              <!-- Outer Engraved Ring -->
              <div
                class="absolute inset-0 rounded-full bg-[#11141a] shadow-[inset_4px_4px_10px_rgba(0,0,0,0.8),inset_-2px_-2px_6px_rgba(255,255,255,0.05)] border border-black/60">
              </div>

              <!-- Arc Progress -->
              <svg class="absolute inset-2 w-[calc(100%-1rem)] h-[calc(100%-1rem)] pointer-events-none"
                viewBox="0 0 100 100">
                <circle cx="50" cy="50" r="46" fill="none" stroke="url(#inactive-grad)" stroke-width="5"
                  stroke-dasharray="216 289" stroke-linecap="round" transform="rotate(135 50 50)" class=""></circle>
                <!-- 60% fill -->
                <circle cx="50" cy="50" r="46" fill="none" stroke="url(#orange-grad)" stroke-width="5"
                  stroke-dasharray="130 289" stroke-linecap="round" transform="rotate(135 50 50)"
                  filter="url(#neon-glow)" class="opacity-80 group-hover:opacity-100 transition-opacity"></circle>
              </svg>

              <!-- The Physical Knob -->
              <div
                class="relative w-24 h-24 rounded-full bg-gradient-to-br from-[#2a303c] to-[#15181e] shadow-[8px_8px_20px_rgba(0,0,0,0.8),-3px_-3px_10px_rgba(255,255,255,0.03),inset_0_1px_2px_rgba(255,255,255,0.08),inset_0_-2px_4px_rgba(0,0,0,0.6)] border border-[#333a47]/40 z-10 flex items-center justify-center">
                <!-- Inner Texture -->
                <div
                  class="absolute inset-2 rounded-full border border-black/50 bg-[#1a1d24] shadow-[inset_0_2px_5px_rgba(0,0,0,0.6)]">
                </div>
                <!-- Indicator Marker (Rotated to match 60%) -->
                <div class="absolute w-full h-full transform rotate-[25deg] pointer-events-none">
                  <div
                    class="absolute top-2.5 left-1/2 -translate-x-1/2 w-1.5 h-4 bg-orange-500 rounded-full shadow-[0_0_8px_rgba(249,115,22,0.9)]">
                  </div>
                </div>
              </div>
            </div>
            <span class="text-xs uppercase tracking-widest text-slate-400 font-medium drop-shadow-[0_1px_1px_rgba(0,0,0,1)]">
                Bass
              </span>
          </div>

          <!-- Mid Dial -->
          <div class="flex flex-col items-center gap-5">
            <div class="relative w-36 h-36 flex items-center justify-center group cursor-pointer">
              <div
                class="absolute inset-0 rounded-full bg-[#11141a] shadow-[inset_4px_4px_10px_rgba(0,0,0,0.8),inset_-2px_-2px_6px_rgba(255,255,255,0.05)] border border-black/60">
              </div>
              <svg class="absolute inset-2 w-[calc(100%-1rem)] h-[calc(100%-1rem)] pointer-events-none"
                viewBox="0 0 100 100">
                <circle cx="50" cy="50" r="46" fill="none" stroke="url(#inactive-grad)" stroke-width="5"
                  stroke-dasharray="216 289" stroke-linecap="round" transform="rotate(135 50 50)" class=""></circle>
                <!-- 40% fill -->
                <circle cx="50" cy="50" r="46" fill="none" stroke="url(#orange-grad)" stroke-width="5"
                  stroke-dasharray="86 289" stroke-linecap="round" transform="rotate(135 50 50)"
                  filter="url(#neon-glow)" class="opacity-80 group-hover:opacity-100 transition-opacity"></circle>
              </svg>
              <div
                class="relative w-24 h-24 rounded-full bg-gradient-to-br from-[#2a303c] to-[#15181e] shadow-[8px_8px_20px_rgba(0,0,0,0.8),-3px_-3px_10px_rgba(255,255,255,0.03),inset_0_1px_2px_rgba(255,255,255,0.08),inset_0_-2px_4px_rgba(0,0,0,0.6)] border border-[#333a47]/40 z-10 flex items-center justify-center">
                <div
                  class="absolute inset-2 rounded-full border border-black/50 bg-[#1a1d24] shadow-[inset_0_2px_5px_rgba(0,0,0,0.6)]">
                </div>
                <!-- Indicator Marker (Rotated to match 40%) -->
                <div class="absolute w-full h-full transform -rotate-[27deg] pointer-events-none">
                  <div
                    class="absolute top-2.5 left-1/2 -translate-x-1/2 w-1.5 h-4 bg-orange-500 rounded-full shadow-[0_0_8px_rgba(249,115,22,0.9)]">
                  </div>
                </div>
              </div>
            </div>
            <span class="text-xs uppercase tracking-widest text-slate-400 font-medium drop-shadow-[0_1px_1px_rgba(0,0,0,1)]">
                Mid
              </span>
          </div>
        </div>

        <!-- Center Master Volume (Largest) -->
        <div class="flex flex-col items-center gap-8 relative">
          <!-- Subtle ambient backlight behind master -->
          <div
            class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-orange-500/5 rounded-full blur-3xl pointer-events-none">
          </div>

          <div class="relative w-72 h-72 flex items-center justify-center group cursor-pointer">
            <!-- Outer Base -->
            <div
              class="absolute inset-0 rounded-full bg-[#0c0e12] shadow-[inset_6px_6px_15px_rgba(0,0,0,0.9),inset_-2px_-2px_8px_rgba(255,255,255,0.04)] border border-black z-0">
            </div>

            <!-- Arc Progress -->
            <svg class="absolute inset-3 w-[calc(100%-1.5rem)] h-[calc(100%-1.5rem)] pointer-events-none z-10"
              viewBox="0 0 100 100">
              <!-- Track -->
              <circle cx="50" cy="50" r="44" fill="none" stroke="url(#inactive-grad)" stroke-width="6"
                stroke-dasharray="207 276" stroke-linecap="round" transform="rotate(135 50 50)" class=""></circle>
              <!-- 72% fill -->
              <circle cx="50" cy="50" r="44" fill="none" stroke="url(#orange-grad)" stroke-width="6"
                stroke-dasharray="149 276" stroke-linecap="round" transform="rotate(135 50 50)" filter="url(#neon-glow)"
                class="opacity-90 group-hover:opacity-100 transition-opacity drop-shadow-[0_0_10px_rgba(249,115,22,0.5)]">
              </circle>
            </svg>

            <!-- Big Master Knob -->
            <div
              class="relative w-52 h-52 rounded-full bg-gradient-to-br from-[#2d3441] via-[#1a1d24] to-[#11141a] shadow-[15px_15px_35px_rgba(0,0,0,0.8),-5px_-5px_20px_rgba(255,255,255,0.02),inset_0_2px_4px_rgba(255,255,255,0.1),inset_0_-4px_8px_rgba(0,0,0,0.7)] border border-[#333a47]/50 z-20 flex flex-col items-center justify-center group-active:scale-[0.99] transition-transform duration-100">
              <!-- Stepped inner rings for tactile feel -->
              <div
                class="absolute inset-3 rounded-full border border-[#475266]/20 bg-gradient-to-tr from-[#161920] to-[#252a33]">
              </div>
              <div
                class="absolute inset-7 rounded-full border border-black/80 bg-[#161920] shadow-[inset_0_4px_10px_rgba(0,0,0,0.7)] flex flex-col items-center justify-center">
                <!-- Digital Value Display embedded in knob -->
                <span class="text-5xl font-light tracking-tighter text-white drop-shadow-[0_2px_5px_rgba(0,0,0,1)] relative z-30 mt-2">
                    72
                  </span>
                <span class="text-xs uppercase tracking-widest text-orange-500/80 font-medium mt-1">
                    Vol
                  </span>
              </div>

              <!-- Indicator Marker (Rotated to match 72%) -->
              <div class="absolute w-full h-full transform rotate-[55deg] pointer-events-none z-30">
                <div
                  class="absolute top-3.5 left-1/2 -translate-x-1/2 w-2 h-6 bg-gradient-to-b from-orange-400 to-orange-600 rounded-full shadow-[0_0_12px_rgba(249,115,22,1)] border border-orange-300/50">
                </div>
              </div>
            </div>
          </div>

          <div class="flex flex-col items-center gap-2">
            <span class="text-xs uppercase tracking-widest text-slate-300 font-medium drop-shadow-[0_1px_1px_rgba(0,0,0,1)]">
                Master Output
              </span>
            <!-- Status LEDs -->
            <div class="flex items-center gap-2 mt-1">
              <span class="w-2 h-2 rounded-full bg-orange-500 shadow-[0_0_8px_rgba(249,115,22,1),inset_0_1px_2px_rgba(255,255,255,0.5)]"></span>
              <span class="w-2 h-2 rounded-full bg-[#11141a] shadow-[inset_1px_1px_3px_rgba(0,0,0,0.9),0_1px_0_rgba(255,255,255,0.05)] border border-black"></span>
              <span class="w-2 h-2 rounded-full bg-[#11141a] shadow-[inset_1px_1px_3px_rgba(0,0,0,0.9),0_1px_0_rgba(255,255,255,0.05)] border border-black"></span>
            </div>
          </div>
        </div>

        <!-- Right Dials (Treble, Gain) -->
        <div class="flex flex-row md:flex-col gap-12 w-full justify-around md:justify-center">
          <!-- Treble Dial -->
          <div class="flex flex-col items-center gap-5">
            <div class="relative w-36 h-36 flex items-center justify-center group cursor-pointer">
              <div
                class="absolute inset-0 rounded-full bg-[#11141a] shadow-[inset_4px_4px_10px_rgba(0,0,0,0.8),inset_-2px_-2px_6px_rgba(255,255,255,0.05)] border border-black/60">
              </div>
              <svg class="absolute inset-2 w-[calc(100%-1rem)] h-[calc(100%-1rem)] pointer-events-none"
                viewBox="0 0 100 100">
                <circle cx="50" cy="50" r="46" fill="none" stroke="url(#inactive-grad)" stroke-width="5"
                  stroke-dasharray="216 289" stroke-linecap="round" transform="rotate(135 50 50)" class=""></circle>
                <!-- 85% fill -->
                <circle cx="50" cy="50" r="46" fill="none" stroke="url(#orange-grad)" stroke-width="5"
                  stroke-dasharray="183 289" stroke-linecap="round" transform="rotate(135 50 50)"
                  filter="url(#neon-glow)" class="opacity-80 group-hover:opacity-100 transition-opacity"></circle>
              </svg>
              <div
                class="relative w-24 h-24 rounded-full bg-gradient-to-br from-[#2a303c] to-[#15181e] shadow-[8px_8px_20px_rgba(0,0,0,0.8),-3px_-3px_10px_rgba(255,255,255,0.03),inset_0_1px_2px_rgba(255,255,255,0.08),inset_0_-2px_4px_rgba(0,0,0,0.6)] border border-[#333a47]/40 z-10 flex items-center justify-center">
                <div
                  class="absolute inset-2 rounded-full border border-black/50 bg-[#1a1d24] shadow-[inset_0_2px_5px_rgba(0,0,0,0.6)]">
                </div>
                <!-- Indicator Marker (Rotated to match 85%) -->
                <div class="absolute w-full h-full transform rotate-[94deg] pointer-events-none">
                  <div
                    class="absolute top-2.5 left-1/2 -translate-x-1/2 w-1.5 h-4 bg-orange-500 rounded-full shadow-[0_0_8px_rgba(249,115,22,0.9)]">
                  </div>
                </div>
              </div>
            </div>
            <span class="text-xs uppercase tracking-widest text-slate-400 font-medium drop-shadow-[0_1px_1px_rgba(0,0,0,1)]">
                Treble
              </span>
          </div>

          <!-- Gain Dial -->
          <div class="flex flex-col items-center gap-5">
            <div class="relative w-36 h-36 flex items-center justify-center group cursor-pointer">
              <div
                class="absolute inset-0 rounded-full bg-[#11141a] shadow-[inset_4px_4px_10px_rgba(0,0,0,0.8),inset_-2px_-2px_6px_rgba(255,255,255,0.05)] border border-black/60">
              </div>
              <svg class="absolute inset-2 w-[calc(100%-1rem)] h-[calc(100%-1rem)] pointer-events-none"
                viewBox="0 0 100 100">
                <circle cx="50" cy="50" r="46" fill="none" stroke="url(#inactive-grad)" stroke-width="5"
                  stroke-dasharray="216 289" stroke-linecap="round" transform="rotate(135 50 50)" class=""></circle>
                <!-- 30% fill -->
                <circle cx="50" cy="50" r="46" fill="none" stroke="url(#orange-grad)" stroke-width="5"
                  stroke-dasharray="65 289" stroke-linecap="round" transform="rotate(135 50 50)"
                  filter="url(#neon-glow)" class="opacity-80 group-hover:opacity-100 transition-opacity"></circle>
              </svg>
              <div
                class="relative w-24 h-24 rounded-full bg-gradient-to-br from-[#2a303c] to-[#15181e] shadow-[8px_8px_20px_rgba(0,0,0,0.8),-3px_-3px_10px_rgba(255,255,255,0.03),inset_0_1px_2px_rgba(255,255,255,0.08),inset_0_-2px_4px_rgba(0,0,0,0.6)] border border-[#333a47]/40 z-10 flex items-center justify-center">
                <div
                  class="absolute inset-2 rounded-full border border-black/50 bg-[#1a1d24] shadow-[inset_0_2px_5px_rgba(0,0,0,0.6)]">
                </div>
                <!-- Indicator Marker (Rotated to match 30%) -->
                <div class="absolute w-full h-full transform -rotate-[60deg] pointer-events-none">
                  <div
                    class="absolute top-2.5 left-1/2 -translate-x-1/2 w-1.5 h-4 bg-orange-500 rounded-full shadow-[0_0_8px_rgba(249,115,22,0.9)]">
                  </div>
                </div>
              </div>
            </div>
            <span class="text-xs uppercase tracking-widest text-slate-400 font-medium drop-shadow-[0_1px_1px_rgba(0,0,0,1)]">
                Gain
              </span>
          </div>
        </div>
      </div>

      <!-- Lower Section: Tactile Switches & Fader -->
      <div class="mt-20 pt-10 relative">
        <!-- Engraved Divider -->
        <div
          class="absolute top-0 left-6 right-6 h-px bg-gradient-to-r from-transparent via-[#333a47] to-transparent shadow-[0_1px_0_rgba(0,0,0,0.8)]">
        </div>

        <div class="flex flex-col md:flex-row justify-between items-center gap-10 px-4">
          <!-- Tactile Power/Mute Switches -->
          <div class="flex gap-6">
            <!-- Active Switch (Power) -->
            <div class="flex flex-col items-center gap-3">
              <button class="relative w-20 h-16 rounded-2xl bg-[#0c0e12] shadow-[inset_3px_3px_8px_rgba(0,0,0,0.9),inset_-1px_-1px_3px_rgba(255,255,255,0.03)] p-1.5 border border-black">
                  <div class="w-full h-full rounded-xl bg-gradient-to-b from-[#2a303c] to-[#1e222a] shadow-[0_4px_8px_rgba(0,0,0,0.6),inset_0_1px_2px_rgba(255,255,255,0.15)] flex items-center justify-center relative overflow-hidden border border-[#475266]/30 active:translate-y-0.5 active:shadow-[0_1px_2px_rgba(0,0,0,0.6),inset_0_1px_2px_rgba(255,255,255,0.05)] transition-all">
                    <div class="absolute inset-0 bg-orange-500/10 mix-blend-overlay"></div>
                    <iconify-icon icon="solar:power-button-linear" class="text-orange-500 drop-shadow-[0_0_6px_rgba(249,115,22,0.8)] z-10" style="stroke-width: 1.5; font-size: 1.5rem;"></iconify-icon>
                  </div>
                </button>
              <span class="text-xs uppercase tracking-widest text-slate-500 font-medium">
                  Power
                </span>
            </div>

            <!-- Inactive Switch (Mute) -->
            <div class="flex flex-col items-center gap-3">
              <button class="relative w-20 h-16 rounded-2xl bg-[#0c0e12] shadow-[inset_3px_3px_8px_rgba(0,0,0,0.9),inset_-1px_-1px_3px_rgba(255,255,255,0.03)] p-1.5 border border-black group">
                  <div class="w-full h-full rounded-xl bg-gradient-to-b from-[#222731] to-[#161920] shadow-[0_4px_8px_rgba(0,0,0,0.5),inset_0_1px_1px_rgba(255,255,255,0.05)] flex items-center justify-center border border-[#333a47]/20 group-hover:bg-[#252a33] group-active:translate-y-0.5 group-active:shadow-[0_1px_2px_rgba(0,0,0,0.6),inset_0_1px_1px_rgba(255,255,255,0.02)] transition-all">
                    <iconify-icon icon="solar:mute-linear" class="text-slate-500" style="stroke-width: 1.5; font-size: 1.5rem;"></iconify-icon>
                  </div>
                </button>
              <span class="text-xs uppercase tracking-widest text-slate-500 font-medium">
                  Mute
                </span>
            </div>
          </div>

          <!-- Horizontal Fader -->
          <div class="flex-1 w-full max-w-md flex flex-col gap-4">
            <div class="flex justify-between items-center px-2">
              <span class="text-xs uppercase tracking-widest text-slate-400 font-medium">
                  Crossfade
                </span>
              <span class="text-xs font-mono text-orange-400 drop-shadow-[0_0_5px_rgba(249,115,22,0.6)]">
                  +2.4 dB
                </span>
            </div>

            <!-- Fader Groove -->
            <div
              class="h-10 w-full rounded-xl bg-[#0a0c0f] shadow-[inset_0_6px_12px_rgba(0,0,0,0.9),inset_0_-1px_2px_rgba(255,255,255,0.04)] relative flex items-center px-2 border border-black/80">
              <!-- Glowing center indicator line in groove -->
              <div
                class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-px h-full bg-white/5 shadow-[0_0_2px_rgba(255,255,255,0.1)]">
              </div>

              <!-- Orange fill line simulation -->
              <div
                class="absolute left-3 top-1/2 -translate-y-1/2 h-1 w-[65%] rounded-full bg-gradient-to-r from-orange-600/50 to-orange-400 shadow-[0_0_8px_rgba(249,115,22,0.6)]">
              </div>

              <!-- Fader Thumb/Knob -->
              <div
                class="absolute left-[65%] -translate-x-1/2 w-10 h-16 rounded-lg bg-gradient-to-b from-[#3a4354] via-[#212631] to-[#161920] shadow-[8px_0_15px_rgba(0,0,0,0.8),-4px_0_10px_rgba(0,0,0,0.4),inset_0_2px_4px_rgba(255,255,255,0.15),inset_0_-2px_4px_rgba(0,0,0,0.8)] border border-[#475266]/50 flex items-center justify-center cursor-grab active:cursor-grabbing hover:brightness-110 transition-all z-10">
                <!-- Tactile grip lines on thumb -->
                <div class="flex gap-1">
                  <div class="w-0.5 h-8 rounded-full bg-black/80 shadow-[1px_0_1px_rgba(255,255,255,0.1)]"></div>
                  <div class="w-0.5 h-8 rounded-full bg-black/80 shadow-[1px_0_1px_rgba(255,255,255,0.1)]"></div>
                  <div class="w-0.5 h-8 rounded-full bg-black/80 shadow-[1px_0_1px_rgba(255,255,255,0.1)]"></div>
                </div>
                <!-- Thumb indicator dot -->
                <div
                  class="absolute top-2 w-1.5 h-1.5 rounded-full bg-orange-500 shadow-[0_0_5px_rgba(249,115,22,0.8)]">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>