Neumorphic Circular Weather Knob Display

<div
    class="flex bg-gradient-to-br from-[#2a2a2c] to-[#0d0d0f] w-64 h-64 z-10 border-[#333] border rounded-full mt-6 mr-auto ml-auto pt-3 pr-3 pb-3 pl-3 relative shadow-[12px_12px_24px_#050505,-4px_-4px_12px_#2a2a2a] items-center justify-center">
    <!-- Inset Track -->
    <div
        class="relative w-full h-full rounded-full bg-[#0a0a0c] shadow-[inset_8px_8px_16px_#000,inset_-2px_-2px_6px_#1f1f22] flex items-center justify-center">
        <!-- Glowing Neon Arc (Masked) -->
        <div class="absolute inset-2 rounded-full bg-[conic-gradient(from_200deg,#ffa600_0%,#ff3300_40%,transparent_45%,transparent_55%,#00e5ff_60%,#ffa600_100%)] opacity-90 shadow-[0_0_15px_rgba(255,166,0,0.3)]"
            style="mask: radial-gradient(transparent 62%, black 63%); -webkit-mask: radial-gradient(transparent 62%, black 63%);">
        </div>

        <!-- Inner Rotary Knob -->
        <div
            class="relative z-10 w-44 h-44 rounded-full bg-gradient-to-br from-[#222225] to-[#111113] shadow-[8px_8px_16px_#000,-4px_-4px_10px_#2a2a2a,inset_0_2px_4px_rgba(255,255,255,0.05)] border border-[#333] flex flex-col items-center justify-center">
            <!-- Texture Rings -->
            <div class="absolute inset-0 rounded-full border border-white/5 m-1.5 shadow-[inset_0_1px_2px_#000]"></div>
            <div
                class="absolute inset-0 rounded-full border border-black/60 m-3 shadow-[0_1px_1px_rgba(255,255,255,0.05)]">
            </div>

            <!-- LED Display Values -->
            <div
                class="text-[#ffa600] text-6xl font-thin tracking-tighter drop-shadow-[0_0_12px_rgba(255,166,0,0.6)] z-20 mt-3 pl-2">
                19°</div>
            <p
                class="text-[#ffa600]/80 text-xs font-normal uppercase tracking-widest mt-2 drop-shadow-[0_0_4px_rgba(255,166,0,0.3)]">
                Mostly Clear</p>
            <p class="text-[#888] text-xs font-normal mt-1 [text-shadow:0_1px_1px_rgba(0,0,0,0.8)]">H:24° L:18°</p>

            <!-- Hardware Divot -->
            <div
                class="absolute top-4 left-1/2 -translate-x-1/2 w-2 h-2 rounded-full bg-[#050505] shadow-[inset_1px_1px_2px_#000,0_1px_0_rgba(255,255,255,0.1)] z-20">
            </div>
        </div>
    </div>
</div>