#1b1535
1<label class="group relative grid h-40 w-48 cursor-pointer place-items-center">2 <input type="checkbox" class="sr-only" />3 <span class="absolute left-3 top-4 size-20 rounded-full bg-fuchsia-500/80 blur-2xl transition-all duration-700 ease-out group-has-[:checked]:translate-x-20 group-has-[:checked]:bg-cyan-400/80"></span>4 <span class="absolute bottom-4 right-3 size-20 rounded-full bg-amber-300/70 blur-2xl transition-all duration-700 ease-out group-has-[:checked]:-translate-x-20 group-has-[:checked]:bg-violet-500/80"></span>5 <span class="relative h-14 w-28 rounded-full border border-white/30 bg-white/10 shadow-[inset_0_1px_1px_rgba(255,255,255,.45),0_18px_36px_-14px_rgba(0,0,0,.6)] backdrop-blur-xl transition-colors duration-500 group-has-[:checked]:bg-white/20">6 <span class="absolute left-1.5 top-1.5 grid size-11 place-items-center rounded-full border border-white/60 bg-white/70 shadow-[0_6px_16px_-4px_rgba(0,0,0,.45),inset_0_-3px_6px_rgba(0,0,0,.08)] transition-transform duration-500 ease-[cubic-bezier(.34,1.56,.64,1)] group-has-[:checked]:translate-x-14">7 <span class="size-2.5 rounded-full bg-slate-400 transition-all duration-500 group-has-[:checked]:bg-emerald-400 group-has-[:checked]:shadow-[0_0_10px_3px_rgba(52,211,153,.85)]"></span>8 </span>9 </span>10 <span class="absolute bottom-3 text-[10px] font-semibold uppercase tracking-[.3em] text-white/40 transition-colors duration-500 group-has-[:checked]:text-white/90">foco</span>11</label>