Audio Processing Hardware-Style Control Panel

<div class="min-h-screen flex items-center justify-center bg-black">
  <div
    class="aspect-[16/9] min-h-[500px] overflow-hidden flex flex-col bg-gradient-to-b from-[#1e1e22] to-[#0a0a0c] w-full max-w-5xl border-[#2a2a2d] border rounded-[1.5rem] relative shadow-[0_25px_50px_-12px_rgba(0,0,0,1),inset_0_1px_1px_rgba(255,255,255,0.1)]"
    data-element-locator="html &gt; body:nth-of-type(1) &gt; div:nth-of-type(1)">

    <!-- Subtle noise overlay for metal/plastic texture -->
    <div class="absolute inset-0 pointer-events-none opacity-[0.03]"
      style="background-image: url('data:image/svg+xml,%3Csvg viewBox=%220 0 200 200%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22noiseFilter%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.8%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23noiseFilter)%22/%3E%3C/svg%3E');">
    </div>

    <!-- Top Bar -->
    <div
      class="relative w-full px-8 py-6 flex justify-between items-center border-b border-[#050505] shadow-[0_1px_0_rgba(255,255,255,0.03)] z-10">
      <!-- Power Section -->
      <div class="flex items-center gap-5">
        <button class="w-10 h-10 rounded-full bg-gradient-to-b from-[#2a2a2d] to-[#0a0a0c] border border-black shadow-[0_4px_6px_rgba(0,0,0,0.6),inset_0_1px_1px_rgba(255,255,255,0.15)] flex items-center justify-center active:shadow-[inset_0_3px_6px_rgba(0,0,0,0.8)] active:from-[#0a0a0c] active:to-[#111] transition-all group">
                    <iconify-icon icon="solar:power-linear" class="text-violet-500 text-xl group-active:scale-95 transition-transform drop-shadow-[0_0_8px_rgba(139,92,246,0.8)]" stroke-width="1.5"></iconify-icon>
                </button>
        <div class="flex flex-col">
          <span class="text-neutral-200 text-sm font-normal tracking-wide drop-shadow-[0_1px_1px_rgba(0,0,0,0.8)]">Aura</span>
          <span class="text-neutral-500 text-xs font-light tracking-widest uppercase text-[0.65rem] drop-shadow-[0_1px_1px_rgba(0,0,0,0.8)]">Chromatic</span>
        </div>
      </div>

      <!-- Preset Selector Screen -->
      <div
        class="flex items-center gap-3 px-6 py-2.5 rounded-full bg-[#050505] shadow-[inset_0_2px_6px_rgba(0,0,0,0.9),0_1px_0_rgba(255,255,255,0.05)] border border-[#000] cursor-pointer group">
        <!-- Physical LED -->
        <div
          class="w-2 h-2 rounded-full bg-violet-400 shadow-[0_0_8px_rgba(139,92,246,0.8),inset_0_1px_2px_rgba(255,255,255,0.8),inset_0_-1px_2px_rgba(0,0,0,0.4)]">
        </div>
        <span class="text-neutral-300 text-sm font-light tracking-wide group-hover:text-neutral-100 transition-colors">Warm Tube Saturation</span>
        <iconify-icon icon="solar:alt-arrow-down-linear" class="text-neutral-600 text-lg ml-2"
          stroke-width="1.5"></iconify-icon>
      </div>

      <!-- Header Controls -->
      <div class="flex items-center gap-3">
        <button class="w-9 h-9 rounded-full bg-gradient-to-b from-[#2a2a2d] to-[#0a0a0c] border border-black shadow-[0_4px_6px_rgba(0,0,0,0.6),inset_0_1px_1px_rgba(255,255,255,0.15)] flex items-center justify-center active:shadow-[inset_0_3px_6px_rgba(0,0,0,0.8)] active:from-[#0a0a0c] active:to-[#111] transition-all text-neutral-400 hover:text-neutral-200">
                    <iconify-icon icon="solar:undo-left-linear" class="text-lg" stroke-width="1.5"></iconify-icon>
                </button>
        <button class="w-9 h-9 rounded-full bg-gradient-to-b from-[#2a2a2d] to-[#0a0a0c] border border-black shadow-[0_4px_6px_rgba(0,0,0,0.6),inset_0_1px_1px_rgba(255,255,255,0.15)] flex items-center justify-center active:shadow-[inset_0_3px_6px_rgba(0,0,0,0.8)] active:from-[#0a0a0c] active:to-[#111] transition-all text-neutral-400 hover:text-neutral-200">
                    <iconify-icon icon="solar:undo-right-linear" class="text-lg" stroke-width="1.5"></iconify-icon>
                </button>
      </div>
    </div>

    <!-- Main UI Grid -->
    <div class="relative flex-1 grid grid-cols-1 md:grid-cols-3 gap-8 px-10 items-center z-10">

      <!-- Left Section: Character Faders -->
      <div class="flex justify-center gap-16">
        <!-- Density Hardware Fader -->
        <div class="flex flex-col items-center gap-6">
          <span class="text-neutral-500 text-xs font-light tracking-widest uppercase drop-shadow-[0_1px_1px_rgba(0,0,0,0.8)]">Density</span>
          <!-- Inset Track -->
          <div
            class="relative w-2 h-44 bg-[#050505] rounded-full border border-black shadow-[inset_0_3px_6px_rgba(0,0,0,0.9),0_1px_0_rgba(255,255,255,0.05)] flex justify-center">
            <!-- LED Fill Inside Track -->
            <div
              class="absolute bottom-1 w-1 h-[60%] bg-violet-500 rounded-full shadow-[0_0_10px_rgba(139,92,246,0.8)]">
            </div>
            <!-- Physical Thumb -->
            <div
              class="absolute bottom-[60%] left-1/2 -translate-x-1/2 translate-y-1/2 w-8 h-12 bg-gradient-to-b from-[#333] via-[#111] to-[#050505] rounded-[3px] border border-[#000] shadow-[0_8px_12px_rgba(0,0,0,0.8),inset_0_1px_1px_rgba(255,255,255,0.2),inset_1px_0_1px_rgba(255,255,255,0.05),inset_-1px_0_1px_rgba(255,255,255,0.05)] flex flex-col items-center justify-center gap-[2px] cursor-pointer hover:brightness-110 active:brightness-95 transition-all">
              <div class="w-4 h-[1px] bg-black/90 shadow-[0_1px_0_rgba(255,255,255,0.05)]"></div>
              <div class="w-4 h-[1px] bg-black/90 shadow-[0_1px_0_rgba(255,255,255,0.05)]"></div>
              <div class="w-5 h-px bg-white/40 shadow-[0_1px_2px_rgba(0,0,0,1)]"></div>
              <div class="w-4 h-[1px] bg-black/90 shadow-[0_1px_0_rgba(255,255,255,0.05)]"></div>
              <div class="w-4 h-[1px] bg-black/90 shadow-[0_1px_0_rgba(255,255,255,0.05)]"></div>
            </div>
          </div>
          <span class="text-neutral-400 text-xs font-light drop-shadow-[0_1px_1px_rgba(0,0,0,0.8)]">60</span>
        </div>

        <!-- Drive Hardware Fader -->
        <div class="flex flex-col items-center gap-6">
          <span class="text-neutral-500 text-xs font-light tracking-widest uppercase drop-shadow-[0_1px_1px_rgba(0,0,0,0.8)]">Drive</span>
          <!-- Inset Track -->
          <div
            class="relative w-2 h-44 bg-[#050505] rounded-full border border-black shadow-[inset_0_3px_6px_rgba(0,0,0,0.9),0_1px_0_rgba(255,255,255,0.05)] flex justify-center">
            <!-- LED Fill Inside Track -->
            <div
              class="absolute bottom-1 w-1 h-[82%] bg-violet-500 rounded-full shadow-[0_0_10px_rgba(139,92,246,0.8)]">
            </div>
            <!-- Physical Thumb -->
            <div
              class="absolute bottom-[82%] left-1/2 -translate-x-1/2 translate-y-1/2 w-8 h-12 bg-gradient-to-b from-[#333] via-[#111] to-[#050505] rounded-[3px] border border-[#000] shadow-[0_8px_12px_rgba(0,0,0,0.8),inset_0_1px_1px_rgba(255,255,255,0.2),inset_1px_0_1px_rgba(255,255,255,0.05),inset_-1px_0_1px_rgba(255,255,255,0.05)] flex flex-col items-center justify-center gap-[2px] cursor-pointer hover:brightness-110 active:brightness-95 transition-all">
              <div class="w-4 h-[1px] bg-black/90 shadow-[0_1px_0_rgba(255,255,255,0.05)]"></div>
              <div class="w-4 h-[1px] bg-black/90 shadow-[0_1px_0_rgba(255,255,255,0.05)]"></div>
              <div class="w-5 h-px bg-white/40 shadow-[0_1px_2px_rgba(0,0,0,1)]"></div>
              <div class="w-4 h-[1px] bg-black/90 shadow-[0_1px_0_rgba(255,255,255,0.05)]"></div>
              <div class="w-4 h-[1px] bg-black/90 shadow-[0_1px_0_rgba(255,255,255,0.05)]"></div>
            </div>
          </div>
          <span class="text-neutral-100 text-xs font-normal drop-shadow-[0_1px_1px_rgba(0,0,0,0.8)]">82</span>
        </div>
      </div>

      <!-- Center Section: Main Hardware Dial -->
      <div class="flex flex-col items-center justify-center mt-[-2rem]">
        <div class="relative w-[18rem] h-[18rem] flex items-center justify-center">

          <!-- Hardware Silkscreen Rings & Active LED Ring -->
          <svg viewBox="0 0 200 200" class="absolute inset-0 w-full h-full">
            <circle cx="100" cy="100" r="80" fill="none" stroke="currentColor"
              class="text-black shadow-[0_1px_0_rgba(255,255,255,0.1)]" stroke-width="3" stroke-linecap="round"
              stroke-dasharray="502" stroke-dashoffset="125" transform="rotate(135 100 100)"></circle>
            <!-- Active Arc -->
            <circle cx="100" cy="100" r="80" fill="none" stroke="currentColor"
              class="text-violet-500 drop-shadow-[0_0_10px_rgba(139,92,246,0.8)]" stroke-width="3.5"
              stroke-linecap="round" stroke-dasharray="502" stroke-dashoffset="220" transform="rotate(135 100 100)">
            </circle>
          </svg>

          <!-- Large Outer Knob Base -->
          <div
            class="w-48 h-48 rounded-full bg-gradient-to-b from-[#3a3a3d] to-[#050505] border border-black shadow-[0_20px_35px_rgba(0,0,0,0.9),inset_0_1px_1px_rgba(255,255,255,0.2)] p-1.5 relative cursor-pointer group active:scale-[0.99] transition-transform">
            <!-- Recessed Inner Plate -->
            <div
              class="w-full h-full rounded-full bg-gradient-to-tr from-[#0a0a0c] to-[#1a1a1c] border border-black shadow-[inset_0_12px_24px_rgba(0,0,0,0.9),0_1px_1px_rgba(255,255,255,0.1)] flex flex-col items-center justify-center group-hover:brightness-110 transition-all">
              <!-- Digital Readout Style -->
              <div
                class="flex flex-col items-center justify-center bg-[#050505] w-28 h-28 rounded-full shadow-[inset_0_4px_8px_rgba(0,0,0,0.8),0_1px_0_rgba(255,255,255,0.05)] border border-black">
                <span class="text-5xl font-light tracking-tight text-white mb-0.5 drop-shadow-[0_0_8px_rgba(255,255,255,0.3)]">74%</span>
                <span class="text-[0.6rem] font-light tracking-widest text-neutral-500 uppercase drop-shadow-[0_1px_1px_rgba(0,0,0,0.8)]">Amount</span>
              </div>
            </div>

            <!-- Physical Indicator LED -->
            <div class="absolute inset-0 rounded-full pointer-events-none" style="transform: rotate(60deg);">
              <div
                class="absolute top-4 left-1/2 -translate-x-1/2 w-3 h-3 bg-violet-400 rounded-full border border-black shadow-[0_0_12px_rgba(167,139,250,0.9),inset_0_1px_2px_rgba(255,255,255,0.9),inset_0_-1px_2px_rgba(0,0,0,0.5)]">
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Right Section: Modulation Sliders -->
      <div class="flex flex-col justify-center gap-12 pl-4">

        <!-- Wow Horizontal Slider -->
        <div class="flex items-center gap-5 w-full max-w-[240px]">
          <span class="w-16 text-[0.65rem] font-light tracking-widest text-neutral-500 text-right uppercase drop-shadow-[0_1px_1px_rgba(0,0,0,0.8)]">Wow</span>
          <!-- Inset Track -->
          <div
            class="flex-1 relative h-1.5 bg-[#050505] rounded-full border border-black shadow-[inset_0_2px_4px_rgba(0,0,0,0.8),0_1px_0_rgba(255,255,255,0.05)] flex items-center cursor-pointer">
            <div class="absolute left-0 h-full w-[35%] bg-neutral-500 rounded-full"></div>
            <!-- Metal Peg Thumb -->
            <div
              class="absolute left-[35%] -translate-x-1/2 w-4 h-4 bg-gradient-to-b from-[#e5e5e5] to-[#888] rounded-full border border-black shadow-[0_3px_6px_rgba(0,0,0,0.6),inset_0_1px_1px_rgba(255,255,255,0.9)] hover:brightness-110 active:scale-95 transition-all">
            </div>
          </div>
          <span class="w-8 text-xs font-light text-neutral-400 drop-shadow-[0_1px_1px_rgba(0,0,0,0.8)]">35</span>
        </div>

        <!-- Flutter Horizontal Slider -->
        <div class="flex items-center gap-5 w-full max-w-[240px]">
          <span class="w-16 text-[0.65rem] font-light tracking-widest text-neutral-500 text-right uppercase drop-shadow-[0_1px_1px_rgba(0,0,0,0.8)]">Flutter</span>
          <!-- Inset Track -->
          <div
            class="flex-1 relative h-1.5 bg-[#050505] rounded-full border border-black shadow-[inset_0_2px_4px_rgba(0,0,0,0.8),0_1px_0_rgba(255,255,255,0.05)] flex items-center cursor-pointer">
            <div class="absolute left-0 h-full w-[15%] bg-neutral-500 rounded-full"></div>
            <!-- Metal Peg Thumb -->
            <div
              class="absolute left-[15%] -translate-x-1/2 w-4 h-4 bg-gradient-to-b from-[#e5e5e5] to-[#888] rounded-full border border-black shadow-[0_3px_6px_rgba(0,0,0,0.6),inset_0_1px_1px_rgba(255,255,255,0.9)] hover:brightness-110 active:scale-95 transition-all">
            </div>
          </div>
          <span class="w-8 text-xs font-light text-neutral-400 drop-shadow-[0_1px_1px_rgba(0,0,0,0.8)]">15</span>
        </div>

        <!-- Noise Horizontal Slider -->
        <div class="flex items-center gap-5 w-full max-w-[240px]">
          <span class="w-16 text-[0.65rem] font-light tracking-widest text-neutral-500 text-right uppercase drop-shadow-[0_1px_1px_rgba(0,0,0,0.8)]">Noise</span>
          <!-- Inset Track -->
          <div
            class="flex-1 relative h-1.5 bg-[#050505] rounded-full border border-black shadow-[inset_0_2px_4px_rgba(0,0,0,0.8),0_1px_0_rgba(255,255,255,0.05)] flex items-center cursor-pointer">
            <div class="absolute left-0 h-full w-[8%] bg-neutral-500 rounded-full"></div>
            <!-- Metal Peg Thumb -->
            <div
              class="absolute left-[8%] -translate-x-1/2 w-4 h-4 bg-gradient-to-b from-[#e5e5e5] to-[#888] rounded-full border border-black shadow-[0_3px_6px_rgba(0,0,0,0.6),inset_0_1px_1px_rgba(255,255,255,0.9)] hover:brightness-110 active:scale-95 transition-all">
            </div>
          </div>
          <span class="w-8 text-xs font-light text-neutral-400 drop-shadow-[0_1px_1px_rgba(0,0,0,0.8)]">08</span>
        </div>

      </div>

    </div>

    <!-- Bottom Mix Plate -->
    <div
      class="relative w-full px-16 pb-8 pt-6 flex items-center justify-between gap-6 z-10 border-t border-[#050505] shadow-[inset_0_1px_0_rgba(255,255,255,0.02)] mt-auto bg-gradient-to-b from-[#111113]/50 to-[#050505]/50">
      <span class="text-xs font-light tracking-widest text-neutral-500 uppercase drop-shadow-[0_1px_1px_rgba(0,0,0,0.8)]">Dry</span>

      <!-- Inset Mix Track -->
      <div
        class="flex-1 max-w-2xl relative h-2 bg-[#050505] rounded-full border border-black shadow-[inset_0_2px_4px_rgba(0,0,0,0.9),0_1px_0_rgba(255,255,255,0.05)] flex items-center cursor-pointer mx-4">
        <!-- Center Tick Mark -->
        <div
          class="absolute left-1/2 -translate-x-1/2 w-[2px] h-4 bg-[#222] border-r border-white/5 pointer-events-none">
        </div>
        <!-- Track LED Fill -->
        <div
          class="absolute left-0 h-full w-[100%] bg-violet-500 rounded-full shadow-[0_0_10px_rgba(139,92,246,0.6)] opacity-50">
        </div>

        <!-- Mix Physical Thumb -->
        <div
          class="absolute left-[100%] -translate-x-1/2 w-6 h-8 bg-gradient-to-b from-[#333] via-[#111] to-[#050505] rounded border border-black shadow-[0_5px_10px_rgba(0,0,0,0.8),inset_0_1px_1px_rgba(255,255,255,0.2)] flex items-center justify-center hover:brightness-110 active:brightness-95 transition-all">
          <!-- Thumb Indicator Line -->
          <div class="w-[2px] h-4 bg-violet-400 shadow-[0_0_6px_rgba(139,92,246,0.8)] rounded-full"></div>
        </div>
      </div>

      <span class="text-xs font-normal tracking-widest text-violet-400 uppercase drop-shadow-[0_0_6px_rgba(139,92,246,0.4)]">Wet</span>
    </div>

  </div>