Neural Audio Control Panel UI

<div class="overflow-x-auto hide-scrollbar w-full pb-12">
    <div class="min-w-[1000px] flex flex-col overflow-hidden text-left bg-[#121214] w-full max-w-5xl border-[#080809] border rounded-2xl mr-auto ml-auto relative shadow-[0_80px_160px_-40px_rgba(0,0,0,1),0_40px_80px_-40px_rgba(0,0,0,0.9),inset_0_1px_1px_rgba(255,255,255,0.08),inset_0_-2px_10px_rgba(0,0,0,0.5)] gap-x-10 gap-y-10"
        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=%22nf%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.8%22 numOctaves=%224%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23nf)%22 opacity=%220.04%22/%3E%3C/svg%3E')">

        <!-- Volumetric Top-Left Light Catch -->
        <div
            class="absolute -top-32 -left-32 w-[600px] h-[600px] bg-white/[0.03] rounded-full blur-[120px] pointer-events-none z-0">
        </div>

        <!-- Rack Ears / Side Mounts -->
        <div
            class="absolute left-4 top-4 bottom-4 w-1.5 rounded-full bg-black/40 shadow-[inset_1px_0_1px_rgba(255,255,255,0.02)]">
        </div>
        <div
            class="absolute right-4 top-4 bottom-4 w-1.5 rounded-full bg-black/40 shadow-[inset_1px_0_1px_rgba(255,255,255,0.02)]">
        </div>

        <!-- Hardware Screws -->
        <div
            class="absolute top-6 left-6 w-3 h-3 rounded-full bg-gradient-to-br from-[#444] to-[#111] shadow-[1px_1px_2px_rgba(0,0,0,0.8)] border border-black/50 flex items-center justify-center">
            <div class="w-2 h-[1px] bg-black/40 rotate-45"></div>
        </div>
        <div
            class="absolute top-6 right-6 w-3 h-3 rounded-full bg-gradient-to-br from-[#444] to-[#111] shadow-[1px_1px_2px_rgba(0,0,0,0.8)] border border-black/50 flex items-center justify-center">
            <div class="w-2 h-[1px] bg-black/40 -rotate-12"></div>
        </div>
        <div
            class="absolute bottom-6 left-6 w-3 h-3 rounded-full bg-gradient-to-br from-[#444] to-[#111] shadow-[1px_1px_2px_rgba(0,0,0,0.8)] border border-black/50 flex items-center justify-center">
            <div class="w-2 h-[1px] bg-black/40 rotate-90"></div>
        </div>
        <div
            class="absolute bottom-6 right-6 w-3 h-3 rounded-full bg-gradient-to-br from-[#444] to-[#111] shadow-[1px_1px_2px_rgba(0,0,0,0.8)] border border-black/50 flex items-center justify-center">
            <div class="w-2 h-[1px] bg-black/40 rotate-[130deg]"></div>
        </div>

        <!-- Top Status Bar (Engraved) -->
        <div class="flex items-center justify-between px-10 py-6 relative z-10">
            <div class="flex items-center gap-3">
                <div class="w-2 h-2 rounded-full bg-emerald-500 shadow-[0_0_10px_#10b981] border border-emerald-400/50">
                </div>
                <span class="text-zinc-500 font-mono text-[10px] uppercase tracking-[0.3em] font-semibold" style="text-shadow: rgba(255, 255, 255, 0.05) 0px 1px 0px;">System Status: Nominal</span>
            </div>
            <div class="flex items-center gap-6">
                <div class="flex flex-col items-end">
                    <span class="text-zinc-400 font-mono text-[11px] uppercase tracking-widest font-semibold" style="text-shadow: rgba(255, 255, 255, 0.05) 0px 1px 0px;">Obsidian Pro-8</span>
                    <span class="text-zinc-600 font-mono text-[8px] uppercase tracking-[0.4em] -mt-1">Neural Audio Processor</span>
                </div>
            </div>
        </div>

        <!-- Main Dashboard Section -->
        <div class="flex flex-1 gap-10 z-10 pt-10 pr-10 pb-10 pl-10 relative gap-x-10 gap-y-10">

            <!-- Left Side: Meters & Toggles -->
            <div class="w-1/4 flex flex-col gap-8">
                <!-- Analog VU Meter -->
                <div
                    class="h-32 bg-[#080809] border border-black rounded-lg shadow-[inset_0_4px_10px_rgba(0,0,0,0.8),0_1px_1px_rgba(255,255,255,0.05)] p-4 flex flex-col justify-between relative overflow-hidden">
                    <div class="absolute inset-0 bg-gradient-to-b from-white/[0.02] to-transparent pointer-events-none">
                    </div>
                    <span class="text-zinc-600 font-mono text-[8px] uppercase tracking-widest">Input Gain (dB)</span>
                    <div class="flex gap-1 h-12 items-end">
                        <div class="flex-1 bg-zinc-800 rounded-sm h-[30%]"></div>
                        <div class="flex-1 bg-zinc-800 rounded-sm h-[45%]"></div>
                        <div class="flex-1 bg-zinc-800 rounded-sm h-[60%]"></div>
                        <div class="flex-1 bg-emerald-500 shadow-[0_0_8px_#10b981] rounded-sm h-[75%]"></div>
                        <div class="flex-1 bg-emerald-500 shadow-[0_0_8px_#10b981] rounded-sm h-[85%]"></div>
                        <div class="flex-1 bg-amber-500 shadow-[0_0_8px_#f59e0b] rounded-sm h-[92%]"></div>
                        <div class="flex-1 bg-rose-500 shadow-[0_0_8px_#ef4444] rounded-sm h-[100%]"></div>
                    </div>
                    <div class="flex justify-between text-zinc-700 font-mono text-[8px]">
                        <span class="">-48</span><span class="">-24</span><span>-12</span><span>-6</span><span class="text-rose-900 font-bold">0</span>
                    </div>
                </div>

                <!-- Physical Toggle Switches -->
                <div class="flex justify-around items-center pt-4">
                    <div class="flex flex-col items-center gap-3">
                        <div
                            class="w-10 h-14 bg-[#0a0a0b] border border-black rounded-md shadow-[inset_0_2px_4px_rgba(0,0,0,0.8)] p-1.5">
                            <button class="w-full h-1/2 bg-gradient-to-b from-[#444] to-[#222] rounded-t-sm shadow-[0_2px_4px_rgba(0,0,0,0.5)] border-t border-white/10 active:scale-95 transition-transform"></button>
                        </div>
                        <span class="text-zinc-500 font-mono text-[9px] uppercase tracking-widest font-semibold">Bypass</span>
                    </div>
                    <div class="flex flex-col items-center gap-3">
                        <div
                            class="w-10 h-14 bg-[#0a0a0b] border border-black rounded-md shadow-[inset_0_2px_4px_rgba(0,0,0,0.8)] p-1.5 flex flex-col justify-end">
                            <button class="w-full h-1/2 bg-gradient-to-b from-[#222] to-[#444] rounded-b-sm shadow-[0_-2px_4px_rgba(0,0,0,0.5)] border-b border-white/5 active:scale-95 transition-transform"></button>
                        </div>
                        <span class="text-zinc-500 font-mono text-[9px] uppercase tracking-widest font-semibold">Sync</span>
                    </div>
                </div>
            </div>

            <!-- Center: The Master Dial -->
            <div class="flex-1 flex flex-col relative items-center justify-center">
                <!-- Engraved Label -->
                <div class="mb-8 text-zinc-600 font-mono text-xs uppercase tracking-[0.5em] font-semibold"
                    style="text-shadow: rgba(255, 255, 255, 0.05) 0px 1px 0px;">Master Core Synthesis</div>

                <div
                    class="bg-gradient-to-b from-[#222] to-[#050505] w-72 h-72 rounded-full pt-2 pr-2 pb-2 pl-2 relative shadow-[0_40px_80px_rgba(0,0,0,1),inset_0_1px_1px_rgba(255,255,255,0.1)]">
                    <!-- Progress Arc -->
                    <div class="rounded-full absolute top-0 right-0 bottom-0 left-0"
                        style="background: conic-gradient(from 220deg, rgb(249, 115, 22) 0%, rgb(249, 115, 22) 240deg, transparent 0deg); filter: drop-shadow(rgba(249, 115, 22, 0.4) 0px 0px 10px);">
                    </div>

                    <!-- Knob Shadow Bezel -->
                    <div class="absolute inset-6 rounded-full bg-black shadow-[inset_0_10px_20px_rgba(0,0,0,1)]"></div>

                    <!-- The Physical Knob -->
                    <div
                        class="absolute inset-8 rounded-full bg-gradient-to-tr from-[#0a0a0b] via-[#1c1c1f] to-[#2a2a2d] shadow-[0_15px_30px_rgba(0,0,0,0.9),inset_0_1px_0_rgba(255,255,255,0.1)] border border-black group cursor-pointer active:scale-95 transition-transform">
                        <!-- Brushed Texture Overlay -->
                        <div class="absolute inset-0 rounded-full opacity-20 pointer-events-none"
                            style="background-image: radial-gradient(circle at center, transparent 30%, black 100%), repeating-conic-gradient(from 0deg, #444 0deg 10deg, #222 10deg 20deg);">
                        </div>

                        <!-- Top Cap Shadow -->
                        <div
                            class="absolute inset-4 rounded-full bg-gradient-to-b from-[#333] to-[#0a0a0b] shadow-[0_4px_10px_rgba(0,0,0,0.8),inset_0_1px_1px_rgba(255,255,255,0.1)] flex items-center justify-center">
                            <div class="text-white font-mono text-4xl font-light tracking-tighter"
                                style="text-shadow: 0 2px 10px rgba(0,0,0,0.8);">84</div>
                        </div>

                        <!-- Indicator Dot (LED) -->
                        <div
                            class="absolute top-6 left-1/2 -translate-x-1/2 w-2 h-2 rounded-full bg-orange-500 shadow-[0_0_10px_#f97316,0_0_20px_#f97316] border border-orange-300/50">
                        </div>
                    </div>
                </div>

                <div class="mt-8 flex gap-12">
                    <div class="flex flex-col items-center">
                        <span class="text-orange-500 font-mono text-[10px] uppercase tracking-widest font-semibold shadow-[0_0_8px_rgba(249,115,22,0.2)]">Active</span>
                        <div class="w-1.5 h-1.5 rounded-full bg-orange-400 mt-1 shadow-[0_0_6px_#f97316]"></div>
                    </div>
                    <div class="flex flex-col items-center">
                        <span class="text-zinc-600 font-mono text-[10px] uppercase tracking-widest font-semibold">Limit</span>
                        <div class="w-1.5 h-1.5 rounded-full bg-zinc-800 mt-1"></div>
                    </div>
                </div>
            </div>

            <!-- Right Side: Secondary Parameters -->
            <div class="w-1/4 flex flex-col justify-center gap-10">
                <!-- Slider Module 1 -->
                <div class="flex flex-col gap-3">
                    <div class="flex justify-between items-center px-1">
                        <span class="text-zinc-500 font-mono text-[9px] uppercase tracking-[0.2em] font-semibold">Saturation</span>
                        <span class="text-zinc-400 font-mono text-[10px]">62%</span>
                    </div>
                    <div
                        class="h-2 bg-black rounded-full shadow-[inset_0_2px_4px_rgba(0,0,0,1)] border border-white/5 relative p-0.5">
                        <div
                            class="h-full w-[62%] bg-gradient-to-r from-amber-900 to-amber-500 rounded-full shadow-[0_0_8px_rgba(245,158,11,0.3)]">
                        </div>
                        <div
                            class="absolute top-1/2 -translate-y-1/2 left-[62%] -translate-x-1/2 w-4 h-4 rounded-full bg-gradient-to-b from-[#eee] to-[#888] border border-black shadow-[0_2px_4px_rgba(0,0,0,0.8)]">
                        </div>
                    </div>
                </div>

                <!-- Slider Module 2 -->
                <div class="flex flex-col gap-3">
                    <div class="flex justify-between items-center px-1">
                        <span class="text-zinc-500 font-mono text-[9px] uppercase tracking-[0.2em] font-semibold">Diffusion</span>
                        <span class="text-zinc-400 font-mono text-[10px]">28%</span>
                    </div>
                    <div
                        class="h-2 bg-black rounded-full shadow-[inset_0_2px_4px_rgba(0,0,0,1)] border border-white/5 relative p-0.5">
                        <div
                            class="h-full w-[28%] bg-gradient-to-r from-cyan-900 to-cyan-500 rounded-full shadow-[0_0_8px_rgba(6,182,212,0.3)]">
                        </div>
                        <div
                            class="absolute top-1/2 -translate-y-1/2 left-[28%] -translate-x-1/2 w-4 h-4 rounded-full bg-gradient-to-b from-[#eee] to-[#888] border border-black shadow-[0_2px_4px_rgba(0,0,0,0.8)]">
                        </div>
                    </div>
                </div>

                <!-- Slider Module 3 -->
                <div class="flex flex-col gap-3">
                    <div class="flex justify-between items-center px-1">
                        <span class="text-zinc-500 font-mono text-[9px] uppercase tracking-[0.2em] font-semibold">Harmonics</span>
                        <span class="text-zinc-400 font-mono text-[10px]">91%</span>
                    </div>
                    <div
                        class="h-2 bg-black rounded-full shadow-[inset_0_2px_4px_rgba(0,0,0,1)] border border-white/5 relative p-0.5">
                        <div
                            class="h-full w-[91%] bg-gradient-to-r from-emerald-900 to-emerald-500 rounded-full shadow-[0_0_8px_rgba(16,185,129,0.3)]">
                        </div>
                        <div
                            class="absolute top-1/2 -translate-y-1/2 left-[91%] -translate-x-1/2 w-4 h-4 rounded-full bg-gradient-to-b from-[#eee] to-[#888] border border-black shadow-[0_2px_4px_rgba(0,0,0,0.8)]">
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <!-- Bottom Ventilation Grille & Label -->
        <div
            class="h-16 bg-gradient-to-t from-black to-transparent flex items-center justify-center relative overflow-hidden">
            <div class="flex gap-2 opacity-40">
                <div class="w-1 h-8 bg-zinc-800 rounded-full"></div>
                <div class="w-1 h-8 bg-zinc-800 rounded-full"></div>
                <div class="w-1 h-8 bg-zinc-800 rounded-full"></div>
                <div class="w-1 h-8 bg-zinc-800 rounded-full"></div>
                <div class="w-1 h-8 bg-zinc-800 rounded-full"></div>
                <div class="w-1 h-8 bg-zinc-800 rounded-full"></div>
                <div class="w-1 h-8 bg-zinc-800 rounded-full"></div>
                <div class="w-1 h-8 bg-zinc-800 rounded-full"></div>
                <div class="w-1 h-8 bg-zinc-800 rounded-full"></div>
                <div class="w-1 h-8 bg-zinc-800 rounded-full"></div>
                <div class="w-1 h-8 bg-zinc-800 rounded-full"></div>
                <div class="w-1 h-8 bg-zinc-800 rounded-full"></div>
            </div>
            <div class="absolute bottom-4 right-10 text-zinc-700 font-mono text-[8px] uppercase tracking-[0.5em]">Serial
                No. OBS-2024-X4</div>
        </div>

    </div>
</div>