Analog Audio Processor UI Panel

<div class="min-h-screen flex items-center justify-center bg-black">
  <div class="flex flex-col z-10 w-full max-w-5xl rounded-2xl relative"
    style="background: linear-gradient(165deg, rgb(42, 42, 42) 0%, rgb(23, 23, 23) 40%, rgb(10, 10, 10) 100%); box-shadow: rgba(255, 255, 255, 0.15) 0px 2px 1px -1px inset, rgba(0, 0, 0, 0.8) 0px -3px 4px -1px inset, rgba(255, 255, 255, 0.05) 1px 0px 2px -1px inset, rgba(0, 0, 0, 0.5) -1px 0px 2px -1px inset, rgb(0, 0, 0) 0px 40px 80px -20px, rgb(0, 0, 0) 0px 0px 0px 1px"
    data-element-locator="html &gt; body:nth-of-type(1) &gt; div:nth-of-type(2)">

    <!-- Texture/Grain Overlay -->
    <div class="absolute inset-0 opacity-[0.15] rounded-2xl mix-blend-overlay pointer-events-none"
      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=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.85%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22/%3E%3C/svg%3E');">
    </div>

    <!-- Corner Screws -->
    <div class="absolute top-4 left-4 w-4 h-4 rounded-full flex items-center justify-center"
      style="background: linear-gradient(135deg, #444, #111); box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.8);">
      <div class="w-2.5 h-2.5 rounded-full bg-neutral-900"
        style="box-shadow: inset 0 1px 2px rgba(0,0,0,0.8), 0 1px 0 rgba(255,255,255,0.2);"></div>
    </div>
    <div class="absolute top-4 right-4 w-4 h-4 rounded-full flex items-center justify-center transform rotate-45"
      style="background: linear-gradient(135deg, #444, #111); box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.8);">
      <div class="w-2.5 h-2.5 rounded-full bg-neutral-900"
        style="box-shadow: inset 0 1px 2px rgba(0,0,0,0.8), 0 1px 0 rgba(255,255,255,0.2);"></div>
    </div>
    <div class="absolute bottom-4 left-4 w-4 h-4 rounded-full flex items-center justify-center transform -rotate-12"
      style="background: linear-gradient(135deg, #444, #111); box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.8);">
      <div class="w-2.5 h-2.5 rounded-full bg-neutral-900"
        style="box-shadow: inset 0 1px 2px rgba(0,0,0,0.8), 0 1px 0 rgba(255,255,255,0.2);"></div>
    </div>
    <div class="absolute bottom-4 right-4 w-4 h-4 rounded-full flex items-center justify-center transform rotate-90"
      style="background: linear-gradient(135deg, #444, #111); box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.8);">
      <div class="w-2.5 h-2.5 rounded-full bg-neutral-900"
        style="box-shadow: inset 0 1px 2px rgba(0,0,0,0.8), 0 1px 0 rgba(255,255,255,0.2);"></div>
    </div>

    <!-- Top Bevel Panel (Branding & I/O) -->
    <div class="relative w-full px-8 py-5 border-b border-neutral-900/50 flex items-center justify-between z-20"
      style="box-shadow: 0 4px 6px -1px rgba(0,0,0,0.3);">

      <div class="flex items-center gap-4">
        <div class="flex flex-col">
          <span class="text-xs font-medium tracking-[0.3em] text-neutral-500 uppercase leading-none mb-1">Analog Processor</span>
          <h1 class="text-xl font-semibold tracking-tighter text-neutral-300 leading-none"
            style="text-shadow: 0 1px 2px rgba(0,0,0,0.8);">O B S I D I A N</h1>
        </div>
        <div class="h-6 w-px bg-neutral-800 mx-2" style="box-shadow: 1px 0 0 rgba(255,255,255,0.05);"></div>
        <span class="font-['JetBrains_Mono'] text-xs text-neutral-600">MOD-X7</span>
      </div>

      <!-- Heat Vents -->
      <div class="hidden md:flex gap-1.5 opacity-60">
        <div
          class="w-8 h-1.5 rounded-full bg-black shadow-[inset_0_1px_2px_rgba(0,0,0,1),0_1px_0_rgba(255,255,255,0.1)]">
        </div>
        <div
          class="w-8 h-1.5 rounded-full bg-black shadow-[inset_0_1px_2px_rgba(0,0,0,1),0_1px_0_rgba(255,255,255,0.1)]">
        </div>
        <div
          class="w-8 h-1.5 rounded-full bg-black shadow-[inset_0_1px_2px_rgba(0,0,0,1),0_1px_0_rgba(255,255,255,0.1)]">
        </div>
        <div
          class="w-8 h-1.5 rounded-full bg-black shadow-[inset_0_1px_2px_rgba(0,0,0,1),0_1px_0_rgba(255,255,255,0.1)]">
        </div>
      </div>

      <!-- Power Switch -->
      <div class="flex items-center gap-4">
        <span class="text-xs font-medium tracking-widest text-neutral-500 uppercase">Power</span>
        <div class="relative w-12 h-6 rounded-full p-1 cursor-pointer"
          style="background: #0f0f0f; box-shadow: inset 0 2px 4px rgba(0,0,0,0.8), 0 1px 0 rgba(255,255,255,0.1);">
          <div class="absolute right-1 top-1 w-4 h-4 rounded-full bg-orange-600" style="
                            background: radial-gradient(circle at 30% 30%, #ff8a00, #c24100);
                            box-shadow: 0 1px 3px rgba(0,0,0,0.5), inset 0 -1px 2px rgba(0,0,0,0.4);
                         "></div>
        </div>
      </div>
    </div>

    <!-- Main Interface Area -->
    <div class="relative p-8 grid grid-cols-1 md:grid-cols-12 gap-10 z-20">

      <!-- Left Section: Pre-Amp (Knobs) -->
      <div class="md:col-span-3 flex flex-col items-center justify-between gap-8 border-r border-neutral-800/50 pr-8"
        style="box-shadow: 1px 0 0 rgba(255,255,255,0.03);">

        <!-- Drive Knob -->
        <div class="flex flex-col items-center gap-4">
          <div class="relative w-28 h-28 rounded-full flex items-center justify-center group"
            style="background: #1a1a1a; box-shadow: inset 0 2px 4px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.05);">
            <!-- Dial Scale -->
            <div class="absolute inset-2 rounded-full border border-neutral-800 border-dashed opacity-50"></div>

            <!-- Metal Knob Base -->
            <div
              class="relative w-20 h-20 rounded-full flex items-center justify-center shadow-2xl transform transition-transform group-active:scale-95 cursor-grab"
              style="background: linear-gradient(135deg, #444 0%, #222 50%, #111 100%);
                                    box-shadow: 0 12px 15px -3px rgba(0,0,0,0.9), inset 0 1px 1px rgba(255,255,255,0.3), inset 0 -2px 2px rgba(0,0,0,0.5);">
              <!-- Ribbed Texture Ring -->
              <div class="absolute inset-0.5 rounded-full opacity-30"
                style="background: repeating-conic-gradient(#000 0deg 2deg, transparent 2deg 4deg);"></div>

              <!-- Inner Knob Top -->
              <div class="relative w-14 h-14 rounded-full transform rotate-[40deg]"
                style="background: radial-gradient(circle at 50% 0%, #3a3a3a 0%, #1a1a1a 80%);
                                        box-shadow: inset 0 2px 2px rgba(255,255,255,0.15), inset 0 -2px 4px rgba(0,0,0,0.6);">
                <!-- Indicator Dot -->
                <div
                  class="absolute top-1.5 left-1/2 -translate-x-1/2 w-1.5 h-1.5 rounded-full bg-white shadow-[0_0_5px_rgba(255,255,255,0.8)]">
                </div>
              </div>
            </div>
          </div>
          <span class="text-xs font-medium tracking-widest text-neutral-400 uppercase bg-neutral-900/50 px-3 py-1 rounded border border-neutral-800 shadow-inner">Input Gain</span>
        </div>

        <!-- Color Toggle -->
        <div class="flex flex-col items-center gap-3 mt-4">
          <div class="w-12 h-16 rounded-md bg-neutral-900 flex items-center justify-center p-1"
            style="box-shadow: inset 0 2px 5px rgba(0,0,0,1), 0 1px 0 rgba(255,255,255,0.1);">
            <div class="w-6 h-12 bg-neutral-950 rounded-sm relative shadow-inner cursor-pointer">
              <!-- Toggle Bat (Down Position) -->
              <div class="absolute bottom-1 left-1/2 -translate-x-1/2 w-4 h-6 rounded-sm" style="background: linear-gradient(90deg, #555 0%, #aaa 50%, #333 100%);
                                        box-shadow: 0 4px 6px rgba(0,0,0,0.8), inset 0 1px 1px rgba(255,255,255,0.5);
                                        border-bottom: 2px solid #111;"></div>
            </div>
          </div>
          <span class="text-xs font-medium tracking-widest text-neutral-500 uppercase">Sat. Type</span>
        </div>

      </div>

      <!-- Center Section: Graphic EQ (Sliders) -->
      <div class="md:col-span-6 flex flex-col items-center border-r border-neutral-800/50 pr-8"
        style="box-shadow: 1px 0 0 rgba(255,255,255,0.03);">

        <div class="w-full flex justify-between items-center mb-6 px-4">
          <div class="flex items-center gap-2">
            <!-- LED Indicator -->
            <div class="w-4 h-4 rounded-full flex items-center justify-center"
              style="background: linear-gradient(180deg, #333, #111); box-shadow: inset 0 1px 1px rgba(255,255,255,0.1), 0 1px 2px rgba(0,0,0,0.8);">
              <div class="w-2 h-2 rounded-full bg-orange-500"
                style="box-shadow: 0 0 10px 2px rgba(249,115,22,0.6), inset 0 1px 2px rgba(255,255,255,0.8);"></div>
            </div>
            <span class="text-xs font-medium tracking-widest text-neutral-400 uppercase">EQ Active</span>
          </div>
          <span class="font-['JetBrains_Mono'] text-xs text-neutral-600">4-BAND PRECISION</span>
        </div>

        <div class="flex justify-between w-full h-48 px-2 relative">
          <!-- Horizontal Zero Line -->
          <div class="absolute top-1/2 left-0 w-full h-px bg-neutral-800/50 -translate-y-1/2 z-0"
            style="box-shadow: 0 1px 0 rgba(255,255,255,0.02);"></div>

          <!-- Slider 1: Low -->
          <div class="flex flex-col items-center h-full relative z-10">
            <div class="relative h-full w-8 flex justify-center">
              <!-- Track -->
              <div class="absolute top-0 bottom-0 w-2 rounded-full"
                style="background: #080808; box-shadow: inset 0 2px 5px rgba(0,0,0,1), 0 1px 0 rgba(255,255,255,0.05);">
              </div>
              <!-- Scale Marks -->
              <div class="absolute left-8 h-full flex flex-col justify-between py-2 opacity-30">
                <div class="w-1.5 h-px bg-white"></div>
                <div class="w-1 h-px bg-white"></div>
                <div class="w-1.5 h-px bg-white"></div>
                <div class="w-1 h-px bg-white"></div>
                <div class="w-1.5 h-px bg-white"></div>
              </div>
              <!-- Cap (Positioned via inline style top) -->
              <div
                class="absolute top-[20%] w-10 h-6 rounded flex items-center justify-center cursor-pointer shadow-xl transition-transform active:scale-95"
                style="background: linear-gradient(180deg, #4a4a4a 0%, #2a2a2a 100%);
                                        box-shadow: 0 8px 10px -2px rgba(0,0,0,0.8), inset 0 1px 1px rgba(255,255,255,0.2), inset 0 -1px 2px rgba(0,0,0,0.8);
                                        border: 1px solid #111;">
                <div class="w-6 h-0.5 bg-neutral-900 rounded-full shadow-[0_1px_0_rgba(255,255,255,0.1)]"></div>
              </div>
            </div>
            <span class="font-['JetBrains_Mono'] text-xs text-neutral-500 mt-4">80Hz</span>
          </div>

          <!-- Slider 2: Low-Mid -->
          <div class="flex flex-col items-center h-full relative z-10">
            <div class="relative h-full w-8 flex justify-center">
              <div class="absolute top-0 bottom-0 w-2 rounded-full"
                style="background: #080808; box-shadow: inset 0 2px 5px rgba(0,0,0,1), 0 1px 0 rgba(255,255,255,0.05);">
              </div>
              <div
                class="absolute top-[60%] w-10 h-6 rounded flex items-center justify-center cursor-pointer shadow-xl transition-transform active:scale-95"
                style="background: linear-gradient(180deg, #4a4a4a 0%, #2a2a2a 100%);
                                        box-shadow: 0 8px 10px -2px rgba(0,0,0,0.8), inset 0 1px 1px rgba(255,255,255,0.2), inset 0 -1px 2px rgba(0,0,0,0.8);
                                        border: 1px solid #111;">
                <div class="w-6 h-0.5 bg-neutral-900 rounded-full shadow-[0_1px_0_rgba(255,255,255,0.1)]"></div>
              </div>
            </div>
            <span class="font-['JetBrains_Mono'] text-xs text-neutral-500 mt-4">400Hz</span>
          </div>

          <!-- Slider 3: High-Mid -->
          <div class="flex flex-col items-center h-full relative z-10">
            <div class="relative h-full w-8 flex justify-center">
              <div class="absolute top-0 bottom-0 w-2 rounded-full"
                style="background: #080808; box-shadow: inset 0 2px 5px rgba(0,0,0,1), 0 1px 0 rgba(255,255,255,0.05);">
              </div>
              <div
                class="absolute top-[35%] w-10 h-6 rounded flex items-center justify-center cursor-pointer shadow-xl transition-transform active:scale-95"
                style="background: linear-gradient(180deg, #4a4a4a 0%, #2a2a2a 100%);
                                        box-shadow: 0 8px 10px -2px rgba(0,0,0,0.8), inset 0 1px 1px rgba(255,255,255,0.2), inset 0 -1px 2px rgba(0,0,0,0.8);
                                        border: 1px solid #111;">
                <div class="w-6 h-0.5 bg-neutral-900 rounded-full shadow-[0_1px_0_rgba(255,255,255,0.1)]"></div>
              </div>
            </div>
            <span class="font-['JetBrains_Mono'] text-xs text-neutral-500 mt-4">2kHz</span>
          </div>

          <!-- Slider 4: High -->
          <div class="flex flex-col items-center h-full relative z-10">
            <div class="relative h-full w-8 flex justify-center">
              <div class="absolute top-0 bottom-0 w-2 rounded-full"
                style="background: #080808; box-shadow: inset 0 2px 5px rgba(0,0,0,1), 0 1px 0 rgba(255,255,255,0.05);">
              </div>
              <div
                class="absolute top-[10%] w-10 h-6 rounded flex items-center justify-center cursor-pointer shadow-xl transition-transform active:scale-95"
                style="background: linear-gradient(180deg, #4a4a4a 0%, #2a2a2a 100%);
                                        box-shadow: 0 8px 10px -2px rgba(0,0,0,0.8), inset 0 1px 1px rgba(255,255,255,0.2), inset 0 -1px 2px rgba(0,0,0,0.8);
                                        border: 1px solid #111;">
                <div class="w-6 h-0.5 bg-neutral-900 rounded-full shadow-[0_1px_0_rgba(255,255,255,0.1)]"></div>
              </div>
            </div>
            <span class="font-['JetBrains_Mono'] text-xs text-neutral-500 mt-4">8kHz</span>
          </div>
        </div>

      </div>

      <!-- Right Section: Master Output (Knobs) -->
      <div class="md:col-span-3 flex flex-col items-center justify-between gap-8 pl-4">

        <!-- Output Knob (Smaller than Input) -->
        <div class="flex flex-col items-center gap-4">
          <div class="relative w-24 h-24 rounded-full flex items-center justify-center group"
            style="background: #1a1a1a; box-shadow: inset 0 2px 4px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.05);">
            <div class="absolute inset-2 rounded-full border border-neutral-800 border-dashed opacity-50"></div>

            <div
              class="relative w-16 h-16 rounded-full flex items-center justify-center shadow-2xl transform transition-transform group-active:scale-95 cursor-grab"
              style="background: linear-gradient(135deg, #444 0%, #222 50%, #111 100%);
                                    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.9), inset 0 1px 1px rgba(255,255,255,0.3), inset 0 -2px 2px rgba(0,0,0,0.5);">
              <div class="absolute inset-0.5 rounded-full opacity-30"
                style="background: repeating-conic-gradient(#000 0deg 2deg, transparent 2deg 4deg);"></div>
              <div class="relative w-12 h-12 rounded-full transform rotate-[210deg]"
                style="background: radial-gradient(circle at 50% 0%, #3a3a3a 0%, #1a1a1a 80%);
                                        box-shadow: inset 0 2px 2px rgba(255,255,255,0.15), inset 0 -2px 4px rgba(0,0,0,0.6);">
                <div
                  class="absolute top-1 left-1/2 -translate-x-1/2 w-1.5 h-1.5 rounded-full bg-white shadow-[0_0_5px_rgba(255,255,255,0.8)]">
                </div>
              </div>
            </div>
          </div>
          <span class="text-xs font-medium tracking-widest text-neutral-400 uppercase bg-neutral-900/50 px-3 py-1 rounded border border-neutral-800 shadow-inner">Output</span>
        </div>

        <!-- Mix Knob -->
        <div class="flex flex-col items-center gap-4">
          <div class="relative w-20 h-20 rounded-full flex items-center justify-center group"
            style="background: #1a1a1a; box-shadow: inset 0 2px 4px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.05);">

            <div
              class="relative w-14 h-14 rounded-full flex items-center justify-center shadow-2xl transform transition-transform group-active:scale-95 cursor-grab"
              style="background: linear-gradient(135deg, #444 0%, #222 50%, #111 100%);
                                    box-shadow: 0 8px 12px -3px rgba(0,0,0,0.9), inset 0 1px 1px rgba(255,255,255,0.3), inset 0 -2px 2px rgba(0,0,0,0.5);">
              <div class="absolute inset-0.5 rounded-full opacity-30"
                style="background: repeating-conic-gradient(#000 0deg 2deg, transparent 2deg 4deg);"></div>
              <div class="relative w-10 h-10 rounded-full transform rotate-[0deg]"
                style="background: radial-gradient(circle at 50% 0%, #3a3a3a 0%, #1a1a1a 80%);
                                        box-shadow: inset 0 2px 2px rgba(255,255,255,0.15), inset 0 -2px 4px rgba(0,0,0,0.6);">
                <div
                  class="absolute top-1 left-1/2 -translate-x-1/2 w-1 h-1.5 rounded-full bg-white shadow-[0_0_5px_rgba(255,255,255,0.8)]">
                </div>
              </div>
            </div>
          </div>
          <span class="text-xs font-medium tracking-widest text-neutral-500 uppercase">Wet / Dry</span>
        </div>

      </div>

    </div>

    <!-- Bottom Bevel Panel (Stomp Switches) -->
    <div
      class="relative w-full px-12 py-8 border-t border-neutral-900/80 bg-neutral-900/30 rounded-b-2xl flex justify-between items-center z-20"
      style="box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);">

      <!-- Left Foot Switch (Bypass) -->
      <div class="flex flex-col items-center gap-6">
        <!-- LED Indicator (Red, Off) -->
        <div class="w-6 h-6 rounded-full flex items-center justify-center"
          style="background: linear-gradient(180deg, #333, #111); box-shadow: inset 0 1px 1px rgba(255,255,255,0.1), 0 2px 4px rgba(0,0,0,0.8);">
          <div class="w-3 h-3 rounded-full bg-red-950" style="box-shadow: inset 0 1px 3px rgba(0,0,0,0.9);"></div>
        </div>

        <!-- Heavy Metal Switch -->
        <div class="w-20 h-20 rounded-full flex items-center justify-center relative cursor-pointer group"
          style="background: #111; box-shadow: 0 4px 6px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.1);">
          <!-- Nut/Washer Base -->
          <div class="w-16 h-16 rounded-full flex items-center justify-center"
            style="background: conic-gradient(from 0deg, #555, #999, #555, #999, #555);">
            <!-- Plunger -->
            <div
              class="w-10 h-10 rounded-full transform transition-transform group-active:scale-95 group-active:translate-y-1"
              style="background: radial-gradient(circle at 50% 20%, #e5e5e5 0%, #888 100%);
                                    box-shadow: 0 5px 8px rgba(0,0,0,0.8), inset 0 2px 2px rgba(255,255,255,1), inset 0 -2px 4px rgba(0,0,0,0.4);">
            </div>
          </div>
        </div>
        <span class="text-sm font-semibold tracking-widest text-neutral-400 uppercase">Bypass</span>
      </div>

      <!-- Decorative Center Logo/Icon -->
      <div class="flex flex-col items-center opacity-40 mix-blend-screen">
        <iconify-icon icon="solar:vinyl-linear" class="text-4xl text-neutral-500"></iconify-icon>
      </div>

      <!-- Right Foot Switch (Engage/Boost) -->
      <div class="flex flex-col items-center gap-6">
        <!-- LED Indicator (Blue, On) -->
        <div class="w-6 h-6 rounded-full flex items-center justify-center"
          style="background: linear-gradient(180deg, #333, #111); box-shadow: inset 0 1px 1px rgba(255,255,255,0.1), 0 2px 4px rgba(0,0,0,0.8);">
          <div class="w-3 h-3 rounded-full bg-blue-500"
            style="box-shadow: 0 0 12px 3px rgba(59,130,246,0.8), inset 0 1px 2px rgba(255,255,255,0.9);"></div>
        </div>

        <!-- Heavy Metal Switch -->
        <div class="w-20 h-20 rounded-full flex items-center justify-center relative cursor-pointer group"
          style="background: #111; box-shadow: 0 4px 6px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.1);">
          <div class="w-16 h-16 rounded-full flex items-center justify-center"
            style="background: conic-gradient(from 0deg, #555, #999, #555, #999, #555);">
            <div
              class="w-10 h-10 rounded-full transform transition-transform group-active:scale-95 group-active:translate-y-1"
              style="background: radial-gradient(circle at 50% 20%, #e5e5e5 0%, #888 100%);
                                    box-shadow: 0 5px 8px rgba(0,0,0,0.8), inset 0 2px 2px rgba(255,255,255,1), inset 0 -2px 4px rgba(0,0,0,0.4);">
            </div>
          </div>
        </div>
        <span class="text-sm font-semibold tracking-widest text-neutral-400 uppercase text-shadow">Engage</span>
      </div>

    </div>
  </div>