Audio Console Hero with Skeuomorphic UI

<main
    class="lg:py-32 grid grid-cols-1 lg:grid-cols-12 gap-16 lg:gap-8 z-10 w-full max-w-7xl mr-auto ml-auto pt-20 pr-6 pb-20 pl-6 relative gap-x-16 gap-y-16 items-center">

    <!-- Left: Typography & CTAs -->
    <div class="lg:col-span-5 flex flex-col items-start gap-8 z-20">
        <!-- Brand Logo -->
        <div class="flex items-center gap-2 text-zinc-400 mb-4">
            <div class="w-6 h-6 rounded flex items-center justify-center bg-zinc-900"
                style="box-shadow: inset 0 1px 1px rgba(255,255,255,0.1), 0 2px 4px rgba(0,0,0,0.5);">
                <div class="w-2 h-2 rounded-full bg-orange-500" style="box-shadow: 0 0 8px rgba(249,115,22,0.8);"></div>
            </div>
            <span class="text-xs uppercase text-zinc-300 font-sans">A U R A L I S</span>
        </div>

        <h1 class="text-5xl lg:text-7xl text-transparent bg-clip-text bg-gradient-to-br from-white via-zinc-200 to-zinc-500 leading-tight font-google-sans-flex font-light tracking-tighter"
            style="text-shadow: rgba(0, 0, 0, 0.5) 0px 10px 30px;">
            Audio Processing.<br>Console Precision.
        </h1>

        <p class="text-base lg:text-lg text-zinc-400 leading-relaxed max-w-lg font-sans">
            An AI-powered processing console that combines analog-style tactile control with intelligent signal shaping.
            Dial in depth, tone, and clarity with mastering-grade precision.
        </p>

        <div class="flex flex-wrap items-center gap-4 mt-4">
            <!-- Primary CTA (Tactile Button) -->
            <button class="relative px-6 py-3 rounded-lg bg-zinc-800 text-sm text-orange-400 uppercase transition-transform active:scale-95 flex items-center gap-2 group overflow-hidden font-sans" style="box-shadow: rgba(0, 0, 0, 0.6) 0px 8px 20px, rgba(255, 255, 255, 0.1) 0px 1px 1px inset, rgba(0, 0, 0, 0.5) 0px -2px 4px inset; border: 1px solid rgb(63, 63, 70);">
                    <div class="absolute inset-0 bg-gradient-to-b from-white/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
                    <iconify-icon icon="solar:tuning-square-linear" width="18" class="text-orange-500"></iconify-icon>
                    Open Console
                </button>

            <!-- Secondary CTA -->
            <button class="px-6 py-3 rounded-lg text-sm text-zinc-300 hover:text-white transition-colors flex items-center gap-2 font-sans">
                    <iconify-icon icon="solar:play-circle-linear" width="20"></iconify-icon>
                    Hear the Difference
                </button>
        </div>
    </div>

    <!-- Right: Skeuomorphic Console -->
    <div class="lg:col-span-7 flex justify-center lg:justify-end relative">

        <!-- Console Chassis -->
        <div class="w-full max-w-[600px] aspect-[4/3] rounded-3xl bg-zinc-900 p-2 relative"
            style="box-shadow: 25px 25px 60px rgba(0,0,0,0.8), -10px -10px 40px rgba(255,255,255,0.03), inset 0 1px 2px rgba(255,255,255,0.1);">

            <!-- Brushed Metal Faceplate -->
            <div class="w-full h-full rounded-2xl bg-zinc-900 flex flex-col relative overflow-hidden"
                style="box-shadow: inset 0 2px 3px rgba(255,255,255,0.08), inset 0 -2px 5px rgba(0,0,0,0.9); background: linear-gradient(145deg, #27272a 0%, #18181b 50%, #09090b 100%);">

                <!-- Subtle noise texture overlay -->
                <div class="absolute inset-0 opacity-20 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=%22noiseFilter%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(%23noiseFilter)%22/%3E%3C/svg%3E');">
                </div>

                <!-- Chassis Screws -->
                <div class="absolute top-4 left-4 w-4 h-4 rounded-full bg-zinc-800 flex items-center justify-center"
                    style="box-shadow: inset 0 1px 3px rgba(0,0,0,0.9), 0 1px 0 rgba(255,255,255,0.1);">
                    <div
                        class="w-2.5 h-2.5 rounded-full bg-gradient-to-br from-zinc-600 to-zinc-900 flex items-center justify-center rotate-45">
                        <div class="w-full h-px bg-zinc-950"></div>
                        <div class="h-full w-px bg-zinc-950 absolute"></div>
                    </div>
                </div>
                <div class="absolute top-4 right-4 w-4 h-4 rounded-full bg-zinc-800 flex items-center justify-center"
                    style="box-shadow: inset 0 1px 3px rgba(0,0,0,0.9), 0 1px 0 rgba(255,255,255,0.1);">
                    <div
                        class="w-2.5 h-2.5 rounded-full bg-gradient-to-br from-zinc-600 to-zinc-900 flex items-center justify-center rotate-[60deg]">
                        <div class="w-full h-px bg-zinc-950"></div>
                        <div class="h-full w-px bg-zinc-950 absolute"></div>
                    </div>
                </div>
                <div class="absolute bottom-4 left-4 w-4 h-4 rounded-full bg-zinc-800 flex items-center justify-center"
                    style="box-shadow: inset 0 1px 3px rgba(0,0,0,0.9), 0 1px 0 rgba(255,255,255,0.1);">
                    <div
                        class="w-2.5 h-2.5 rounded-full bg-gradient-to-br from-zinc-600 to-zinc-900 flex items-center justify-center rotate-12">
                        <div class="w-full h-px bg-zinc-950"></div>
                        <div class="h-full w-px bg-zinc-950 absolute"></div>
                    </div>
                </div>
                <div class="absolute bottom-4 right-4 w-4 h-4 rounded-full bg-zinc-800 flex items-center justify-center"
                    style="box-shadow: inset 0 1px 3px rgba(0,0,0,0.9), 0 1px 0 rgba(255,255,255,0.1);">
                    <div
                        class="w-2.5 h-2.5 rounded-full bg-gradient-to-br from-zinc-600 to-zinc-900 flex items-center justify-center rotate-[100deg]">
                        <div class="w-full h-px bg-zinc-950"></div>
                        <div class="h-full w-px bg-zinc-950 absolute"></div>
                    </div>
                </div>

                <!-- Top Section: Knobs & Switches -->
                <div class="flex-1 flex px-8 pt-10 pb-4 relative z-10">

                    <!-- Left Group: Input / Output -->
                    <div class="w-1/4 flex flex-col justify-between items-center py-2">
                        <!-- Input Knob -->
                        <div class="flex flex-col items-center gap-3">
                            <span class="text-[10px] text-zinc-400 uppercase font-sans" style="text-shadow: rgba(255, 255, 255, 0.05) 0px 1px 0px, rgba(0, 0, 0, 0.8) 0px -1px 0px;">Input Gain</span>
                            <div class="relative w-16 h-16 rounded-full bg-zinc-800 flex items-center justify-center"
                                style="box-shadow: 0 8px 15px -3px rgba(0,0,0,0.8), inset 0 2px 4px rgba(255,255,255,0.1), inset 0 -2px 4px rgba(0,0,0,0.6);">
                                <!-- Scale dots -->
                                <svg class="absolute inset-1 w-[calc(100%-8px)] h-[calc(100%-8px)]"
                                    viewBox="0 0 100 100">
                                    <circle cx="50" cy="50" r="45" fill="none" stroke="#3f3f46" stroke-width="2"
                                        stroke-dasharray="2 10" class=""></circle>
                                </svg>
                                <div class="w-12 h-12 rounded-full bg-gradient-to-br from-zinc-600 via-zinc-800 to-zinc-950 relative transform -rotate-45"
                                    style="box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 2px 5px rgba(0,0,0,0.5);">
                                    <div class="absolute w-1 h-3 bg-white rounded-full top-1 left-1/2 -translate-x-1/2"
                                        style="box-shadow: 0 0 3px rgba(255,255,255,0.5);"></div>
                                </div>
                            </div>
                        </div>

                        <!-- Output Knob -->
                        <div class="flex flex-col items-center gap-3">
                            <span class="text-[10px] text-zinc-400 uppercase font-sans" style="text-shadow: rgba(255, 255, 255, 0.05) 0px 1px 0px, rgba(0, 0, 0, 0.8) 0px -1px 0px;">Output</span>
                            <div class="relative w-16 h-16 rounded-full bg-zinc-800 flex items-center justify-center"
                                style="box-shadow: 0 8px 15px -3px rgba(0,0,0,0.8), inset 0 2px 4px rgba(255,255,255,0.1), inset 0 -2px 4px rgba(0,0,0,0.6);">
                                <svg class="absolute inset-1 w-[calc(100%-8px)] h-[calc(100%-8px)]"
                                    viewBox="0 0 100 100">
                                    <circle cx="50" cy="50" r="45" fill="none" stroke="#3f3f46" stroke-width="2"
                                        stroke-dasharray="2 10" class=""></circle>
                                </svg>
                                <div class="w-12 h-12 rounded-full bg-gradient-to-br from-zinc-600 via-zinc-800 to-zinc-950 relative transform rotate-12"
                                    style="box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 2px 5px rgba(0,0,0,0.5);">
                                    <div class="absolute w-1 h-3 bg-white rounded-full top-1 left-1/2 -translate-x-1/2"
                                        style="box-shadow: 0 0 3px rgba(255,255,255,0.5);"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Center: Giant Depth Dial -->
                    <div class="w-2/4 flex flex-col items-center justify-center relative">
                        <span class="text-xs text-zinc-300 uppercase mb-6 font-sans" style="text-shadow: rgba(255, 255, 255, 0.05) 0px 1px 0px, rgba(0, 0, 0, 0.8) 0px -1px 0px;">Saturation</span>

                        <!-- Dial Container with recessed shadow -->
                        <div class="relative w-40 h-40 rounded-full bg-zinc-950 flex items-center justify-center"
                            style="box-shadow: inset 0 4px 10px rgba(0,0,0,1), inset 0 -1px 2px rgba(255,255,255,0.05), 0 1px 1px rgba(255,255,255,0.05);">

                            <!-- Neon Arc SVG -->
                            <svg class="absolute inset-2 w-[calc(100%-16px)] h-[calc(100%-16px)] transform -rotate-[135deg]"
                                viewBox="0 0 100 100">
                                <!-- Background track -->
                                <path d="M 20 80 A 42 42 0 1 1 80 80" fill="none" stroke="#18181b" stroke-width="4"
                                    stroke-linecap="round" class=""></path>
                                <!-- Progress (Glowing) -->
                                <path d="M 20 80 A 42 42 0 1 1 80 80" fill="none" stroke="#f97316" stroke-width="4"
                                    stroke-linecap="round" stroke-dasharray="190" stroke-dashoffset="60"
                                    style="filter: drop-shadow(0 0 6px rgba(249,115,22,0.8));" class=""></path>
                            </svg>

                            <!-- The Physical Knob -->
                            <div class="w-28 h-28 rounded-full bg-gradient-to-br from-zinc-600 via-zinc-800 to-zinc-900 flex items-center justify-center relative transform rotate-[60deg]"
                                style="box-shadow: 0 15px 25px rgba(0,0,0,0.9), inset 0 2px 3px rgba(255,255,255,0.2), inset 0 -3px 5px rgba(0,0,0,0.8); border: 1px solid #3f3f46;">

                                <!-- Inner metallic ring -->
                                <div class="w-20 h-20 rounded-full bg-gradient-to-tl from-zinc-700 to-zinc-900"
                                    style="box-shadow: inset 0 2px 5px rgba(0,0,0,0.8), 0 1px 1px rgba(255,255,255,0.1);">
                                </div>

                                <!-- Indicator dot/line -->
                                <div class="absolute w-2 h-6 bg-orange-400 rounded-full top-2 left-1/2 -translate-x-1/2"
                                    style="box-shadow: 0 0 8px rgba(249,115,22,0.8), inset 0 1px 1px rgba(255,255,255,0.8);">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Right Group: Toggles & Wet/Dry -->
                    <div class="w-1/4 flex flex-col justify-between items-center py-2">
                        <!-- Switches Row -->
                        <div class="flex gap-4 w-full justify-center">
                            <!-- Bypass Switch -->
                            <div class="flex flex-col items-center gap-2">
                                <div class="w-2 h-2 rounded-full bg-zinc-800"
                                    style="box-shadow: inset 0 1px 2px rgba(0,0,0,0.8), 0 1px 0 rgba(255,255,255,0.1);">
                                </div> <!-- LED Off -->
                                <div class="w-8 h-12 bg-zinc-950 rounded-md relative flex justify-center py-1"
                                    style="box-shadow: inset 0 2px 4px rgba(0,0,0,1), inset 0 -1px 1px rgba(255,255,255,0.05), 0 1px 0 rgba(255,255,255,0.05);">
                                    <!-- Switch Down -->
                                    <div class="w-2.5 h-5 bg-gradient-to-b from-zinc-600 via-zinc-400 to-zinc-700 rounded-full relative z-10 bottom-0 absolute mb-1"
                                        style="box-shadow: 0 3px 4px rgba(0,0,0,0.8), inset 0 1px 1px rgba(255,255,255,0.5); border: 1px solid #52525b;">
                                    </div>
                                </div>
                                <span class="text-[9px] text-zinc-500 uppercase mt-1 font-sans" style="text-shadow: rgba(255, 255, 255, 0.05) 0px 1px 0px, rgba(0, 0, 0, 0.8) 0px -1px 0px;">Bypass</span>
                            </div>

                            <!-- Engage Switch -->
                            <div class="flex flex-col items-center gap-2">
                                <div class="w-2 h-2 rounded-full bg-orange-500"
                                    style="box-shadow: 0 0 8px rgba(249,115,22,0.8), inset 0 1px 1px rgba(255,255,255,0.5);">
                                </div> <!-- LED On -->
                                <div class="w-8 h-12 bg-zinc-950 rounded-md relative flex justify-center py-1"
                                    style="box-shadow: inset 0 2px 4px rgba(0,0,0,1), inset 0 -1px 1px rgba(255,255,255,0.05), 0 1px 0 rgba(255,255,255,0.05);">
                                    <!-- Switch Up -->
                                    <div class="w-2.5 h-5 bg-gradient-to-b from-zinc-300 via-white to-zinc-400 rounded-full relative z-10 top-0 absolute mt-1"
                                        style="box-shadow: 0 5px 6px rgba(0,0,0,0.8), inset 0 1px 1px rgba(255,255,255,0.8); border: 1px solid #71717a;">
                                    </div>
                                </div>
                                <span class="text-[9px] text-zinc-300 uppercase mt-1 font-sans" style="text-shadow: rgba(255, 255, 255, 0.05) 0px 1px 0px, rgba(0, 0, 0, 0.8) 0px -1px 0px;">Engage</span>
                            </div>
                        </div>

                        <!-- Wet/Dry Knob -->
                        <div class="flex flex-col items-center gap-3 mt-4">
                            <span class="text-[10px] text-zinc-400 uppercase font-sans" style="text-shadow: rgba(255, 255, 255, 0.05) 0px 1px 0px, rgba(0, 0, 0, 0.8) 0px -1px 0px;">Wet / Dry</span>
                            <div class="relative w-16 h-16 rounded-full bg-zinc-800 flex items-center justify-center"
                                style="box-shadow: 0 8px 15px -3px rgba(0,0,0,0.8), inset 0 2px 4px rgba(255,255,255,0.1), inset 0 -2px 4px rgba(0,0,0,0.6);">
                                <svg class="absolute inset-1 w-[calc(100%-8px)] h-[calc(100%-8px)]"
                                    viewBox="0 0 100 100">
                                    <circle cx="50" cy="50" r="45" fill="none" stroke="#3f3f46" stroke-width="2"
                                        stroke-dasharray="2 10" class=""></circle>
                                </svg>
                                <div class="w-12 h-12 rounded-full bg-gradient-to-br from-zinc-600 via-zinc-800 to-zinc-950 relative transform rotate-45"
                                    style="box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 2px 5px rgba(0,0,0,0.5);">
                                    <div class="absolute w-1 h-3 bg-white rounded-full top-1 left-1/2 -translate-x-1/2"
                                        style="box-shadow: 0 0 3px rgba(255,255,255,0.5);"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Divider Line -->
                <div class="w-[90%] mx-auto h-px bg-zinc-950 relative z-10"
                    style="box-shadow: 0 1px 0 rgba(255,255,255,0.05);"></div>

                <!-- Bottom Section: EQ Faders -->
                <div class="h-[40%] flex justify-between px-16 pt-6 pb-8 relative z-10">

                    <!-- Fader 1 (80Hz) -->
                    <div class="flex flex-col items-center gap-4 w-12">
                        <span class="text-[10px] text-zinc-500 font-sans" style="text-shadow: rgba(255, 255, 255, 0.05) 0px 1px 0px, rgba(0, 0, 0, 0.8) 0px -1px 0px;">80Hz</span>
                        <div class="flex-1 w-2.5 bg-zinc-950 rounded-full relative flex justify-center"
                            style="box-shadow: inset 0 2px 5px rgba(0,0,0,1), inset 0 -1px 1px rgba(255,255,255,0.05), 0 1px 0 rgba(255,255,255,0.05);">
                            <!-- Scale lines -->
                            <div class="absolute h-full w-8 flex flex-col justify-between py-2 pointer-events-none">
                                <div class="h-px w-2 bg-zinc-700 mx-auto"></div>
                                <div class="h-px w-1 bg-zinc-800 mx-auto"></div>
                                <div class="h-px w-2 bg-zinc-700 mx-auto"></div>
                                <div class="h-px w-1 bg-zinc-800 mx-auto"></div>
                                <div class="h-px w-4 bg-zinc-600 mx-auto"></div>
                                <div class="h-px w-1 bg-zinc-800 mx-auto"></div>
                                <div class="h-px w-2 bg-zinc-700 mx-auto"></div>
                                <div class="h-px w-1 bg-zinc-800 mx-auto"></div>
                                <div class="h-px w-2 bg-zinc-700 mx-auto"></div>
                            </div>
                            <!-- The Cap -->
                            <div class="absolute w-7 h-10 bg-gradient-to-b from-zinc-600 via-zinc-800 to-zinc-900 rounded-[3px] z-10 bottom-[20%]"
                                style="box-shadow: 0 8px 12px rgba(0,0,0,0.8), inset 0 1px 1px rgba(255,255,255,0.3), inset 0 -1px 1px rgba(0,0,0,0.8); border: 1px solid #3f3f46;">
                                <div class="absolute top-1/2 left-1 right-1 h-1 bg-zinc-950 -translate-y-1/2 rounded-full"
                                    style="box-shadow: inset 0 1px 2px rgba(0,0,0,1), 0 1px 0 rgba(255,255,255,0.2);">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Fader 2 (400Hz) -->
                    <div class="flex flex-col items-center gap-4 w-12">
                        <span class="text-[10px] text-zinc-500 font-sans" style="text-shadow: rgba(255, 255, 255, 0.05) 0px 1px 0px, rgba(0, 0, 0, 0.8) 0px -1px 0px;">400Hz</span>
                        <div class="flex-1 w-2.5 bg-zinc-950 rounded-full relative flex justify-center"
                            style="box-shadow: inset 0 2px 5px rgba(0,0,0,1), inset 0 -1px 1px rgba(255,255,255,0.05), 0 1px 0 rgba(255,255,255,0.05);">
                            <div class="absolute h-full w-8 flex flex-col justify-between py-2 pointer-events-none">
                                <div class="h-px w-2 bg-zinc-700 mx-auto"></div>
                                <div class="h-px w-1 bg-zinc-800 mx-auto"></div>
                                <div class="h-px w-2 bg-zinc-700 mx-auto"></div>
                                <div class="h-px w-1 bg-zinc-800 mx-auto"></div>
                                <div class="h-px w-4 bg-zinc-600 mx-auto"></div>
                                <div class="h-px w-1 bg-zinc-800 mx-auto"></div>
                                <div class="h-px w-2 bg-zinc-700 mx-auto"></div>
                                <div class="h-px w-1 bg-zinc-800 mx-auto"></div>
                                <div class="h-px w-2 bg-zinc-700 mx-auto"></div>
                            </div>
                            <div class="absolute w-7 h-10 bg-gradient-to-b from-zinc-600 via-zinc-800 to-zinc-900 rounded-[3px] z-10 bottom-[60%]"
                                style="box-shadow: 0 8px 12px rgba(0,0,0,0.8), inset 0 1px 1px rgba(255,255,255,0.3), inset 0 -1px 1px rgba(0,0,0,0.8); border: 1px solid #3f3f46;">
                                <div class="absolute top-1/2 left-1 right-1 h-1 bg-zinc-950 -translate-y-1/2 rounded-full"
                                    style="box-shadow: inset 0 1px 2px rgba(0,0,0,1), 0 1px 0 rgba(255,255,255,0.2);">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Fader 3 (2kHz) -->
                    <div class="flex flex-col items-center gap-4 w-12">
                        <span class="text-[10px] text-zinc-500 font-sans" style="text-shadow: rgba(255, 255, 255, 0.05) 0px 1px 0px, rgba(0, 0, 0, 0.8) 0px -1px 0px;">2kHz</span>
                        <div class="flex-1 w-2.5 bg-zinc-950 rounded-full relative flex justify-center"
                            style="box-shadow: inset 0 2px 5px rgba(0,0,0,1), inset 0 -1px 1px rgba(255,255,255,0.05), 0 1px 0 rgba(255,255,255,0.05);">
                            <div class="absolute h-full w-8 flex flex-col justify-between py-2 pointer-events-none">
                                <div class="h-px w-2 bg-zinc-700 mx-auto"></div>
                                <div class="h-px w-1 bg-zinc-800 mx-auto"></div>
                                <div class="h-px w-2 bg-zinc-700 mx-auto"></div>
                                <div class="h-px w-1 bg-zinc-800 mx-auto"></div>
                                <div class="h-px w-4 bg-zinc-600 mx-auto"></div>
                                <div class="h-px w-1 bg-zinc-800 mx-auto"></div>
                                <div class="h-px w-2 bg-zinc-700 mx-auto"></div>
                                <div class="h-px w-1 bg-zinc-800 mx-auto"></div>
                                <div class="h-px w-2 bg-zinc-700 mx-auto"></div>
                            </div>
                            <div class="absolute w-7 h-10 bg-gradient-to-b from-zinc-600 via-zinc-800 to-zinc-900 rounded-[3px] z-10 bottom-[45%]"
                                style="box-shadow: 0 8px 12px rgba(0,0,0,0.8), inset 0 1px 1px rgba(255,255,255,0.3), inset 0 -1px 1px rgba(0,0,0,0.8); border: 1px solid #3f3f46;">
                                <div class="absolute top-1/2 left-1 right-1 h-1 bg-zinc-950 -translate-y-1/2 rounded-full"
                                    style="box-shadow: inset 0 1px 2px rgba(0,0,0,1), 0 1px 0 rgba(255,255,255,0.2);">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Fader 4 (8kHz) -->
                    <div class="flex flex-col items-center gap-4 w-12">
                        <span class="text-[10px] text-zinc-500 font-sans" style="text-shadow: rgba(255, 255, 255, 0.05) 0px 1px 0px, rgba(0, 0, 0, 0.8) 0px -1px 0px;">8kHz</span>
                        <div class="flex-1 w-2.5 bg-zinc-950 rounded-full relative flex justify-center"
                            style="box-shadow: inset 0 2px 5px rgba(0,0,0,1), inset 0 -1px 1px rgba(255,255,255,0.05), 0 1px 0 rgba(255,255,255,0.05);">
                            <div class="absolute h-full w-8 flex flex-col justify-between py-2 pointer-events-none">
                                <div class="h-px w-2 bg-zinc-700 mx-auto"></div>
                                <div class="h-px w-1 bg-zinc-800 mx-auto"></div>
                                <div class="h-px w-2 bg-zinc-700 mx-auto"></div>
                                <div class="h-px w-1 bg-zinc-800 mx-auto"></div>
                                <div class="h-px w-4 bg-zinc-600 mx-auto"></div>
                                <div class="h-px w-1 bg-zinc-800 mx-auto"></div>
                                <div class="h-px w-2 bg-zinc-700 mx-auto"></div>
                                <div class="h-px w-1 bg-zinc-800 mx-auto"></div>
                                <div class="h-px w-2 bg-zinc-700 mx-auto"></div>
                            </div>
                            <div class="absolute w-7 h-10 bg-gradient-to-b from-zinc-600 via-zinc-800 to-zinc-900 rounded-[3px] z-10 bottom-[75%]"
                                style="box-shadow: 0 8px 12px rgba(0,0,0,0.8), inset 0 1px 1px rgba(255,255,255,0.3), inset 0 -1px 1px rgba(0,0,0,0.8); border: 1px solid #3f3f46;">
                                <div class="absolute top-1/2 left-1 right-1 h-1 bg-zinc-950 -translate-y-1/2 rounded-full"
                                    style="box-shadow: inset 0 1px 2px rgba(0,0,0,1), 0 1px 0 rgba(255,255,255,0.2);">
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</main>