Audio Control Panel UI Mockup

<div
  class="aspect-[4/3] lg:mx-0 shadow-zinc-900/30 overflow-hidden flex flex-col z-10 w-full max-w-2xl border-zinc-900/10 border rounded-xl mr-auto ml-auto relative shadow-2xl"
  style="background: radial-gradient(120% 120% at 12% 10%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 22%, rgba(0,0,0,0.20) 55%, rgba(0,0,0,0.70) 100%), linear-gradient(180deg, #17181b 0%, #0d0f12 55%, #090a0c 100%)">
  <!-- Mockup Window Header -->
  <div class="flex bg-zinc-900 w-full h-12 border-zinc-800 border-b pr-4 pl-4 items-center justify-between"
    style="background: linear-gradient(180deg, #121318 0%, #0b0c10 100%)">
    <div class="flex gap-4 items-center text-zinc-400">
      <iconify-icon icon="solar:code-square-bold-duotone" width="20" height="20" class=""></iconify-icon>
      <iconify-icon icon="solar:monitor-smartphone-bold-duotone" width="20" height="20" class=""></iconify-icon>
      <div class="h-4 w-px bg-zinc-700 mx-2"></div>
      <iconify-icon icon="solar:undo-left-bold-duotone" width="18" height="18" class=""></iconify-icon>
    </div>
    <div class="flex items-center gap-6 text-sm font-medium text-zinc-300">
      <span class="hover:text-white cursor-pointer tracking-tight">PLATFORM</span>
      <span class="hover:text-white cursor-pointer tracking-tight">SERVICES</span>
      <span class="hover:text-white cursor-pointer tracking-tight">RATES</span>
    </div>
    <div class="flex items-center gap-3">
      <button class="bg-blue-600 text-white text-xs px-4 py-1.5 rounded font-medium" style="background: linear-gradient(180deg, #2f6bff 0%, #1f4edb 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 10px 18px rgba(0,0,0,0.35);">Publish</button>
      <div class="flex gap-1.5 ml-2">
        <div class="w-3 h-3 rounded-full bg-zinc-700"
          style="background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.22), rgba(255,255,255,0.05) 35%, rgba(0,0,0,0.55) 100%); box-shadow: inset 0 1px 1px rgba(255,255,255,0.10), 0 3px 10px rgba(0,0,0,0.55);">
        </div>
        <div class="w-3 h-3 rounded-full bg-zinc-700"
          style="background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.22), rgba(255,255,255,0.05) 35%, rgba(0,0,0,0.55) 100%); box-shadow: inset 0 1px 1px rgba(255,255,255,0.10), 0 3px 10px rgba(0,0,0,0.55);">
        </div>
        <div class="w-3 h-3 rounded-full bg-zinc-700"
          style="background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.22), rgba(255,255,255,0.05) 35%, rgba(0,0,0,0.55) 100%); box-shadow: inset 0 1px 1px rgba(255,255,255,0.10), 0 3px 10px rgba(0,0,0,0.55);">
        </div>
      </div>
    </div>
  </div>

  <!-- Mockup Body -->
  <div class="flex-1 flex overflow-hidden bg-zinc-100 relative"
    style="background: radial-gradient(120% 120% at 10% 8%, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.02) 25%, rgba(0,0,0,0.22) 55%, rgba(0,0,0,0.65) 100%), linear-gradient(180deg, #1b1d21 0%, #0d0f12 55%, #08090b 100%);">
    <!-- Soft vignette + volumetric top-left lighting -->
    <div class="absolute inset-0 pointer-events-none"
      style="background: radial-gradient(90% 70% at 12% 12%, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 22%, rgba(255,255,255,0.00) 55%), radial-gradient(120% 120% at 50% 55%, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0.75) 100%);">
    </div>

    <!-- Brushed metal + matte micrograin -->
    <div class="absolute inset-0 pointer-events-none"
      style="background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.018) 1px, rgba(0,0,0,0) 3px), radial-gradient(circle at 25% 30%, rgba(255,255,255,0.04), rgba(255,255,255,0) 40%); mix-blend-mode: overlay;">
    </div>

    <!-- Sidebar -->
    <div class="flex flex-col z-10 shrink-0 bg-white w-56 h-full border-zinc-200 border-r"
      style="background: linear-gradient(180deg, #1a1c20 0%, #0f1114 100%); border-color: rgba(255,255,255,0.06); box-shadow: inset -1px 0 0 rgba(255,255,255,0.06), 18px 0 50px rgba(0,0,0,0.55);">
      <div class="flex text-zinc-800 border-zinc-100 border-b pt-4 pr-4 pb-4 pl-4 items-center justify-between"
        style="border-color: rgba(255,255,255,0.06);">
        <span class="text-base font-semibold tracking-tight" style="color: rgba(255,255,255,0.92); text-shadow: 0 1px 0 rgba(0,0,0,0.65);">Layout</span>
        <iconify-icon icon="solar:menu-dots-bold-duotone" width="20" height="20"
          style="color: rgba(255,255,255,0.55);"></iconify-icon>
      </div>

      <div class="p-4 flex flex-col gap-6">
        <!-- Toggle Section -->
        <div class="">
          <div class="text-xs mb-2 font-medium uppercase tracking-widest"
            style="color: rgba(255,255,255,0.55); text-shadow: 0 1px 0 rgba(0,0,0,0.7);">Layout Mode</div>
          <div class="p-1 rounded-md flex text-sm"
            style="background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.03) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -1px 0 rgba(0,0,0,0.6);">
            <div class="shadow-sm flex-1 text-center py-1.5 rounded font-medium cursor-pointer"
              style="color: rgba(185,236,255,0.95); background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 10px 20px rgba(0,0,0,0.55);">
              Grid</div>
            <div class="flex-1 text-center py-1.5 font-medium cursor-pointer"
              style="color: rgba(255,255,255,0.62); text-shadow: 0 1px 0 rgba(0,0,0,0.7);">Block</div>
          </div>
        </div>

        <!-- Sliders Section -->
        <div class="">
          <div class="text-xs mb-2 font-medium uppercase tracking-widest"
            style="color: rgba(255,255,255,0.55); text-shadow: 0 1px 0 rgba(0,0,0,0.7);">Padding</div>
          <div class="flex items-center gap-3 mb-2">
            <iconify-icon icon="solar:arrow-up-bold-duotone" width="16" height="16" class="text-zinc-400"
              style="color: rgba(255,255,255,0.45);"></iconify-icon>
            <div class="h-1.5 rounded-full flex-1 overflow-hidden"
              style="background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(255,255,255,0.05) 100%); box-shadow: inset 0 1px 2px rgba(0,0,0,0.75), inset 0 -1px 0 rgba(255,255,255,0.06);">
              <div class="h-full w-1/3 rounded-full"
                style="background: linear-gradient(90deg, rgba(64,255,200,0.95) 0%, rgba(86,140,255,0.95) 55%, rgba(168,85,247,0.85) 100%); box-shadow: 0 0 16px rgba(86,140,255,0.45);">
              </div>
            </div>
          </div>
          <div class="flex items-center gap-3">
            <iconify-icon icon="solar:arrow-right-bold-duotone" width="16" height="16" class="text-zinc-400"
              style="color: rgba(255,255,255,0.45);"></iconify-icon>
            <div class="h-1.5 rounded-full flex-1 overflow-hidden"
              style="background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(255,255,255,0.05) 100%); box-shadow: inset 0 1px 2px rgba(0,0,0,0.75), inset 0 -1px 0 rgba(255,255,255,0.06);">
              <div class="h-full w-2/3 rounded-full"
                style="background: linear-gradient(90deg, rgba(64,255,200,0.95) 0%, rgba(86,140,255,0.95) 55%, rgba(168,85,247,0.85) 100%); box-shadow: 0 0 16px rgba(86,140,255,0.45);">
              </div>
            </div>
          </div>
        </div>

        <!-- Checkboxes -->
        <div class="">
          <div class="text-xs mb-3 font-medium uppercase tracking-widest"
            style="color: rgba(255,255,255,0.55); text-shadow: 0 1px 0 rgba(0,0,0,0.7);">Visibility</div>
          <label class="flex items-center gap-3 mb-2 cursor-pointer">
            <div class="w-4 h-4 rounded border flex items-center justify-center" style="border-color: rgba(120,200,255,0.9); background: linear-gradient(180deg, rgba(64,255,200,0.85) 0%, rgba(86,140,255,0.75) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 10px 18px rgba(0,0,0,0.55);">
              <iconify-icon icon="solar:check-read-bold-duotone" width="12" height="12" class="text-white"></iconify-icon>
            </div>
            <span class="text-sm font-medium" style="color: rgba(255,255,255,0.78); text-shadow: 0 1px 0 rgba(0,0,0,0.75);">Desktop</span>
          </label>
          <label class="flex items-center gap-3 cursor-pointer">
            <div class="w-4 h-4 rounded border flex items-center justify-center" style="border-color: rgba(255,255,255,0.18); background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -1px 0 rgba(0,0,0,0.7);"></div>
            <span class="text-sm font-medium" style="color: rgba(255,255,255,0.72); text-shadow: 0 1px 0 rgba(0,0,0,0.75);">Mobile</span>
          </label>
        </div>

        <!-- Warm LEDs -->
        <div class="mt-2 grid grid-cols-3 gap-2">
          <div class="flex items-center gap-2">
            <div class="w-2.5 h-2.5 rounded-full"
              style="background: radial-gradient(circle at 30% 30%, rgba(255,235,170,1) 0%, rgba(255,184,90,0.9) 30%, rgba(255,120,40,0.45) 60%, rgba(0,0,0,0.6) 100%); box-shadow: 0 0 10px rgba(255,166,70,0.55), inset 0 1px 1px rgba(255,255,255,0.14);">
            </div>
            <span class="text-[10px] uppercase tracking-wider font-medium" style="color: rgba(255,255,255,0.45); text-shadow: 0 1px 0 rgba(0,0,0,0.75);">Sig</span>
          </div>
          <div class="flex items-center gap-2">
            <div class="w-2.5 h-2.5 rounded-full"
              style="background: radial-gradient(circle at 30% 30%, rgba(210,255,230,1) 0%, rgba(90,255,170,0.9) 28%, rgba(40,180,120,0.45) 60%, rgba(0,0,0,0.6) 100%); box-shadow: 0 0 10px rgba(70,255,180,0.45), inset 0 1px 1px rgba(255,255,255,0.14);">
            </div>
            <span class="text-[10px] uppercase tracking-wider font-medium" style="color: rgba(255,255,255,0.45); text-shadow: 0 1px 0 rgba(0,0,0,0.75);">On</span>
          </div>
          <div class="flex items-center gap-2">
            <div class="w-2.5 h-2.5 rounded-full"
              style="background: radial-gradient(circle at 30% 30%, rgba(255,220,220,1) 0%, rgba(255,90,90,0.92) 28%, rgba(180,40,40,0.45) 60%, rgba(0,0,0,0.6) 100%); box-shadow: 0 0 10px rgba(255,90,90,0.35), inset 0 1px 1px rgba(255,255,255,0.14);">
            </div>
            <span class="text-[10px] uppercase tracking-wider font-medium" style="color: rgba(255,255,255,0.45); text-shadow: 0 1px 0 rgba(0,0,0,0.75);">Clip</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Canvas Area -->
    <div class="flex-1 relative flex flex-col items-center justify-center overflow-hidden"
      style="background: radial-gradient(120% 100% at 18% 12%, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 25%, rgba(0,0,0,0.28) 60%, rgba(0,0,0,0.72) 100%), linear-gradient(180deg, #17181b 0%, #0d0f12 50%, #07080a 100%);">
      <!-- Realistic panel base -->
      <div class="absolute inset-0"
        style="background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.028) 0px, rgba(255,255,255,0.015) 1px, rgba(0,0,0,0) 4px);">
      </div>
      <div class="absolute inset-0"
        style="background: radial-gradient(80% 60% at 22% 18%, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 20%, rgba(255,255,255,0) 55%), radial-gradient(110% 110% at 55% 60%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0.85) 100%);">
      </div>

      <!-- Center hardware module -->
      <div class="relative z-10 w-full max-w-md px-6">
        <div class="rounded-2xl border"
          style="border-color: rgba(255,255,255,0.08); background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 35%, rgba(0,0,0,0.35) 100%); box-shadow: 0 30px 80px rgba(0,0,0,0.70), inset 0 1px 0 rgba(255,255,255,0.12);">
          <!-- top fascia -->
          <div class="px-6 pt-6 pb-4">
            <div class="flex items-start justify-between gap-4">
              <div class="min-w-0">
                <h2 class="text-2xl font-semibold tracking-tight text-white"
                  style="text-shadow: 0 2px 0 rgba(0,0,0,0.65);">Master Output</h2>
                <p class="text-xs font-medium uppercase tracking-widest mt-1"
                  style="color: rgba(255,255,255,0.55); text-shadow: 0 1px 0 rgba(0,0,0,0.75);">Studio Monitor
                  Controller</p>
              </div>
              <div class="flex items-center gap-2">
                <div class="w-2.5 h-2.5 rounded-full"
                  style="background: radial-gradient(circle at 30% 30%, rgba(255,240,180,1) 0%, rgba(255,185,90,0.95) 30%, rgba(255,120,40,0.45) 60%, rgba(0,0,0,0.6) 100%); box-shadow: 0 0 14px rgba(255,166,70,0.60);">
                </div>
                <span class="text-[10px] font-medium uppercase tracking-wider" style="color: rgba(255,255,255,0.55); text-shadow: 0 1px 0 rgba(0,0,0,0.75);">Warm</span>
              </div>
            </div>
          </div>

          <!-- middle: dial + toggles -->
          <div class="px-6 pb-6">
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 items-center">
              <!-- Dial -->
              <div class="relative mx-auto sm:mx-0 w-56 h-56">
                <!-- neon progress arc -->
                <div class="absolute inset-0 rounded-full"
                  style="background: conic-gradient(from 210deg, rgba(64,255,200,0.00) 0deg, rgba(64,255,200,0.95) 38deg, rgba(86,140,255,0.95) 120deg, rgba(168,85,247,0.00) 240deg, rgba(64,255,200,0.00) 360deg); filter: blur(0.2px);">
                </div>
                <div class="absolute inset-1 rounded-full"
                  style="background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 35%, rgba(0,0,0,0.65) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 30px 70px rgba(0,0,0,0.75);">
                </div>

                <!-- dial bezel -->
                <div class="absolute inset-4 rounded-full"
                  style="background: radial-gradient(circle at 30% 25%, rgba(230,230,235,0.20) 0%, rgba(255,255,255,0.06) 22%, rgba(0,0,0,0.80) 70%, rgba(0,0,0,0.95) 100%), repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.012) 1px, rgba(0,0,0,0) 3px); box-shadow: inset 0 18px 30px rgba(0,0,0,0.75), inset 0 -10px 22px rgba(255,255,255,0.06), 0 18px 40px rgba(0,0,0,0.65);">
                </div>

                <!-- inner dial face -->
                <div class="absolute inset-[28px] rounded-full"
                  style="background: radial-gradient(circle at 28% 22%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.08) 18%, rgba(0,0,0,0.65) 62%, rgba(0,0,0,0.92) 100%); box-shadow: inset 0 8px 18px rgba(0,0,0,0.78), inset 0 -2px 0 rgba(255,255,255,0.10);">
                </div>

                <!-- knurl ring hint -->
                <div class="absolute inset-[22px] rounded-full"
                  style="mask-image: radial-gradient(circle, transparent 58%, black 59%); -webkit-mask-image: radial-gradient(circle, transparent 58%, black 59%); background-image: repeating-conic-gradient(from 0deg, rgba(255,255,255,0.07) 0deg, rgba(255,255,255,0.02) 7deg, rgba(0,0,0,0.0) 11deg);">
                </div>

                <!-- indicator line -->
                <div class="absolute left-1/2 top-1/2 w-1 h-24 -translate-y-[86%] -translate-x-1/2 rounded-full"
                  style="background: linear-gradient(180deg, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.12) 70%, rgba(0,0,0,0) 100%); box-shadow: 0 0 10px rgba(120,200,255,0.35);">
                </div>

                <!-- center cap -->
                <div class="absolute left-1/2 top-1/2 w-14 h-14 -translate-x-1/2 -translate-y-1/2 rounded-full"
                  style="background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.08) 25%, rgba(0,0,0,0.85) 70%, rgba(0,0,0,0.95) 100%); box-shadow: inset 0 10px 18px rgba(0,0,0,0.70), inset 0 -1px 0 rgba(255,255,255,0.14), 0 14px 30px rgba(0,0,0,0.65);">
                </div>

                <!-- engraved label -->
                <div class="absolute -bottom-2 left-1/2 -translate-x-1/2 px-3 py-1 rounded-full border"
                  style="border-color: rgba(255,255,255,0.10); background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0.35) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 18px 40px rgba(0,0,0,0.55);">
                  <span class="text-[10px] uppercase tracking-wider font-medium" style="color: rgba(255,255,255,0.70); text-shadow: 0 1px 0 rgba(0,0,0,0.8); letter-spacing: 0.14em;">Level</span>
                </div>
              </div>

              <!-- Toggles + labels -->
              <div class="flex flex-col gap-4">
                <div class="rounded-xl border p-4"
                  style="border-color: rgba(255,255,255,0.08); background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0.40) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 24px 60px rgba(0,0,0,0.55);">
                  <div class="flex items-center justify-between gap-3">
                    <div>
                      <div class="text-xs font-medium uppercase tracking-widest"
                        style="color: rgba(255,255,255,0.55); text-shadow: 0 1px 0 rgba(0,0,0,0.75);">Monitor</div>
                      <div class="text-sm font-medium mt-1"
                        style="color: rgba(255,255,255,0.82); text-shadow: 0 1px 0 rgba(0,0,0,0.75);">DIM</div>
                    </div>

                    <!-- physical toggle (custom) -->
                    <div class="relative w-14 h-8 rounded-full border"
                      style="border-color: rgba(255,255,255,0.10); background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(255,255,255,0.05) 100%); box-shadow: inset 0 2px 6px rgba(0,0,0,0.75), inset 0 -1px 0 rgba(255,255,255,0.08);">
                      <div class="absolute top-1 left-1 w-6 h-6 rounded-full border"
                        style="border-color: rgba(255,255,255,0.14); background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.10) 35%, rgba(0,0,0,0.75) 100%), repeating-linear-gradient(90deg, rgba(255,255,255,0.08) 0px, rgba(255,255,255,0.02) 1px, rgba(0,0,0,0) 3px); box-shadow: 0 10px 18px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.18);">
                      </div>
                      <div class="absolute right-2 top-1/2 -translate-y-1/2 w-2 h-2 rounded-full"
                        style="background: radial-gradient(circle at 30% 30%, rgba(255,240,180,1) 0%, rgba(255,185,90,0.95) 35%, rgba(255,120,40,0.35) 70%, rgba(0,0,0,0.7) 100%); box-shadow: 0 0 10px rgba(255,166,70,0.45);">
                      </div>
                    </div>
                  </div>

                  <div class="mt-3 h-px"
                    style="background: linear-gradient(90deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.00) 100%);">
                  </div>

                  <div class="mt-3 flex items-center justify-between gap-3">
                    <div>
                      <div class="text-xs font-medium uppercase tracking-widest"
                        style="color: rgba(255,255,255,0.55); text-shadow: 0 1px 0 rgba(0,0,0,0.75);">Routing</div>
                      <div class="text-sm font-medium mt-1"
                        style="color: rgba(255,255,255,0.82); text-shadow: 0 1px 0 rgba(0,0,0,0.75);">MONO</div>
                    </div>

                    <div class="relative w-14 h-8 rounded-full border"
                      style="border-color: rgba(255,255,255,0.10); background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(255,255,255,0.05) 100%); box-shadow: inset 0 2px 6px rgba(0,0,0,0.75), inset 0 -1px 0 rgba(255,255,255,0.08);">
                      <div class="absolute top-1 right-1 w-6 h-6 rounded-full border"
                        style="border-color: rgba(255,255,255,0.14); background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.10) 35%, rgba(0,0,0,0.75) 100%), repeating-linear-gradient(90deg, rgba(255,255,255,0.08) 0px, rgba(255,255,255,0.02) 1px, rgba(0,0,0,0) 3px); box-shadow: 0 10px 18px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.18);">
                      </div>
                      <div class="absolute left-2 top-1/2 -translate-y-1/2 w-2 h-2 rounded-full"
                        style="background: radial-gradient(circle at 30% 30%, rgba(210,255,230,1) 0%, rgba(90,255,170,0.9) 35%, rgba(40,180,120,0.35) 70%, rgba(0,0,0,0.7) 100%); box-shadow: 0 0 10px rgba(70,255,180,0.35);">
                      </div>
                    </div>
                  </div>
                </div>

                <!-- Embossed CTA -->
                <button class="w-full px-6 py-3 rounded-xl text-sm font-medium text-white transition-colors" style="background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0.40) 100%), linear-gradient(180deg, rgba(255,120,40,0.95) 0%, rgba(204,78,14,0.98) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 24px 60px rgba(0,0,0,0.60), 0 0 22px rgba(255,120,40,0.18);">
                  Engage Output
                </button>
              </div>
            </div>
          </div>

          <!-- bottom engraved strip -->
          <div class="px-6 pb-6">
            <div class="rounded-xl border px-4 py-3 flex items-center justify-between gap-4"
              style="border-color: rgba(255,255,255,0.08); background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.55) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -1px 0 rgba(0,0,0,0.75);">
              <div class="flex items-center gap-3 min-w-0">
                <div class="w-8 h-8 rounded-lg border flex items-center justify-center"
                  style="border-color: rgba(255,255,255,0.10); background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.06) 35%, rgba(0,0,0,0.75) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 16px 30px rgba(0,0,0,0.55);">
                  <iconify-icon icon="solar:volume-loud-bold-duotone" width="18" height="18"
                    style="color: rgba(185,236,255,0.92);"></iconify-icon>
                </div>
                <div class="min-w-0">
                  <div class="text-[10px] uppercase tracking-wider font-medium"
                    style="color: rgba(255,255,255,0.55); text-shadow: 0 1px 0 rgba(0,0,0,0.75);">Engraved</div>
                  <div class="text-sm font-medium"
                    style="color: rgba(255,255,255,0.80); text-shadow: 0 1px 0 rgba(0,0,0,0.75);">Reference: -12 dB
                  </div>
                </div>
              </div>

              <div class="flex items-center gap-2 shrink-0">
                <div class="w-2.5 h-2.5 rounded-full"
                  style="background: radial-gradient(circle at 30% 30%, rgba(255,220,220,1) 0%, rgba(255,90,90,0.92) 30%, rgba(180,40,40,0.35) 65%, rgba(0,0,0,0.7) 100%); box-shadow: 0 0 12px rgba(255,90,90,0.35);">
                </div>
                <span class="text-[10px] uppercase tracking-wider font-medium" style="color: rgba(255,255,255,0.55); text-shadow: 0 1px 0 rgba(0,0,0,0.75);">Protect</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Floating Panel 1: Width Control -->
      <div
        class="absolute top-1/4 -left-12 rounded-lg shadow-2xl border p-2 flex items-center gap-4 z-20 w-64 backdrop-blur-sm"
        style="border-color: rgba(255,255,255,0.10); background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0.35) 100%); box-shadow: 0 28px 70px rgba(0,0,0,0.70), inset 0 1px 0 rgba(255,255,255,0.14);">
        <div class="flex-1">
          <div class="text-xs mb-1 font-medium"
            style="color: rgba(255,255,255,0.70); text-shadow: 0 1px 0 rgba(0,0,0,0.75);">Max Width</div>
          <div class="h-2 rounded-full overflow-hidden w-full"
            style="background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(255,255,255,0.05) 100%); box-shadow: inset 0 1px 2px rgba(0,0,0,0.75), inset 0 -1px 0 rgba(255,255,255,0.06);">
            <div class="h-full w-3/4 rounded-full"
              style="background: linear-gradient(90deg, rgba(64,255,200,0.95) 0%, rgba(86,140,255,0.95) 55%, rgba(168,85,247,0.85) 100%); box-shadow: 0 0 16px rgba(86,140,255,0.35);">
            </div>
          </div>
        </div>
        <div class="flex rounded p-0.5"
          style="background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(0,0,0,0.40) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);">
          <div class="text-white text-[10px] px-2 py-1 rounded-sm font-medium"
            style="background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0.35) 100%), linear-gradient(180deg, rgba(86,140,255,0.95) 0%, rgba(37,99,235,0.95) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 10px 18px rgba(0,0,0,0.55);">
            Auto</div>
          <div class="text-[10px] px-2 py-1 font-medium"
            style="color: rgba(255,255,255,0.65); text-shadow: 0 1px 0 rgba(0,0,0,0.75);">100%</div>
        </div>
      </div>

      <!-- Floating Panel 2: Color Picker -->
      <div
        class="absolute bottom-12 right-12 rounded-xl shadow-2xl border p-4 flex flex-col gap-4 z-20 backdrop-blur-md"
        style="border-color: rgba(255,255,255,0.10); background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0.38) 100%); box-shadow: 0 28px 75px rgba(0,0,0,0.70), inset 0 1px 0 rgba(255,255,255,0.14);">
        <div class="flex gap-4">
          <!-- Gradient Area -->
          <div class="w-40 h-32 rounded-lg relative overflow-hidden border shadow-inner"
            style="border-color: rgba(255,255,255,0.12); background: linear-gradient(135deg, rgba(34,211,238,0.95) 0%, rgba(59,130,246,0.95) 45%, rgba(168,85,247,0.90) 100%); box-shadow: inset 0 16px 26px rgba(0,0,0,0.35), inset 0 -1px 0 rgba(255,255,255,0.10);">
            <div
              class="absolute top-4 right-6 w-4 h-4 rounded-full border-2 border-white shadow-sm ring-1 ring-black/10">
            </div>
            <div class="absolute inset-0 pointer-events-none"
              style="background: radial-gradient(60% 60% at 22% 18%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.00) 60%);">
            </div>
          </div>

          <!-- Sliders -->
          <div class="flex flex-col gap-3 justify-center">
            <div class="w-4 h-24 rounded-full relative shadow-inner"
              style="background: linear-gradient(180deg, rgba(239,68,68,0.95) 0%, rgba(34,197,94,0.95) 50%, rgba(59,130,246,0.95) 100%); box-shadow: inset 0 10px 18px rgba(0,0,0,0.45), inset 0 -1px 0 rgba(255,255,255,0.10);">
              <div class="absolute top-1/3 -left-1 -right-1 h-3 rounded shadow-sm border"
                style="border-color: rgba(255,255,255,0.18); background: linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(0,0,0,0.35) 100%); box-shadow: 0 10px 18px rgba(0,0,0,0.60), inset 0 1px 0 rgba(255,255,255,0.22);">
              </div>
            </div>
            <div class="w-4 h-24 rounded-full relative shadow-inner"
              style="background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(0,0,0,0.92) 100%); box-shadow: inset 0 10px 18px rgba(0,0,0,0.45), inset 0 -1px 0 rgba(255,255,255,0.10);">
              <div class="absolute bottom-1/4 -left-1 -right-1 h-3 rounded shadow-sm border"
                style="border-color: rgba(255,255,255,0.18); background: linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(0,0,0,0.35) 100%); box-shadow: 0 10px 18px rgba(0,0,0,0.60), inset 0 1px 0 rgba(255,255,255,0.22);">
              </div>
            </div>
          </div>
        </div>

        <!-- Color Swatches -->
        <div class="flex justify-between items-center gap-2 mt-2">
          <div class="w-5 h-5 rounded-full cursor-pointer ring-2 ring-offset-1 ring-blue-500"
            style="background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.03) 35%, rgba(0,0,0,0.85) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 10px 18px rgba(0,0,0,0.60);">
          </div>
          <div class="w-5 h-5 rounded-full cursor-pointer"
            style="background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.04) 35%, rgba(239,68,68,0.95) 100%); box-shadow: 0 10px 18px rgba(0,0,0,0.55);">
          </div>
          <div class="w-5 h-5 rounded-full cursor-pointer"
            style="background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.04) 35%, rgba(251,146,60,0.95) 100%); box-shadow: 0 10px 18px rgba(0,0,0,0.55);">
          </div>
          <div class="w-5 h-5 rounded-full cursor-pointer"
            style="background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.04) 35%, rgba(252,211,77,0.95) 100%); box-shadow: 0 10px 18px rgba(0,0,0,0.55);">
          </div>
          <div class="w-5 h-5 rounded-full cursor-pointer"
            style="background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.04) 35%, rgba(74,222,128,0.95) 100%); box-shadow: 0 10px 18px rgba(0,0,0,0.55);">
          </div>
          <div class="w-5 h-5 rounded-full cursor-pointer"
            style="background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.04) 35%, rgba(34,211,238,0.95) 100%); box-shadow: 0 10px 18px rgba(0,0,0,0.55);">
          </div>
          <div class="w-5 h-5 rounded-full cursor-pointer"
            style="background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.04) 35%, rgba(59,130,246,0.95) 100%); box-shadow: 0 10px 18px rgba(0,0,0,0.55);">
          </div>
          <div class="w-5 h-5 rounded-full cursor-pointer"
            style="background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.04) 35%, rgba(168,85,247,0.95) 100%); box-shadow: 0 10px 18px rgba(0,0,0,0.55);">
          </div>
          <iconify-icon icon="solar:settings-bold-duotone" width="18" height="18" class="cursor-pointer ml-1"
            style="color: rgba(255,255,255,0.55); filter: drop-shadow(0 10px 18px rgba(0,0,0,0.55));"></iconify-icon>
        </div>
      </div>
    </div>
  </div>
</div>