:root{--background:oklch(97% 0 0);--foreground:oklch(20.5% 0 0);--light:oklch(100% 0 0);--light-shade:oklch(99% 0 0);--dark:oklch(20.5% 0 0);--dark-shade:oklch(20.5% 0 0)}.theme .dark{--background:oklch(20.5% 0 0);--foreground:oklch(97% 0 0)}.toggle{border-radius:50%;display:block;height:var(--toggle-size);width:var(--toggle-size);overflow:hidden;position:relative;transition:all .3s ease;cursor:pointer;background:transparent;border:none;padding:0}.toggle,.toggle-sm{--toggle-size:16px;--sun-size:6px;--sun-pos:5px;--sun-ray-offset:7px;--sun-ray-spread:-2px;--moon-size:14px;--moon-pos:1px;--moon-shadow-size:12px;--moon-shadow-pos:-1px}.toggle-lg{--toggle-size:24px;--sun-size:10px;--sun-pos:7px;--sun-ray-offset:10px;--sun-ray-spread:-3.5px;--moon-size:20px;--moon-pos:2px;--moon-shadow-size:18px;--moon-shadow-pos:-2px}.toggle:after,.toggle:before{content:"";display:block;position:absolute}.toggle-light:before{animation:sun .4s ease-out forwards;background-color:var(--light-shade);border-radius:50%;height:var(--sun-size);width:var(--sun-size);top:var(--sun-pos);left:var(--sun-pos);box-shadow:var(--sun-ray-offset) 0 0 var(--sun-ray-spread) var(--light-shade),calc(-1 * var(--sun-ray-offset)) 0 0 var(--sun-ray-spread) var(--light-shade),0 var(--sun-ray-offset) 0 var(--sun-ray-spread) var(--light-shade),0 calc(-1 * var(--sun-ray-offset)) 0 var(--sun-ray-spread) var(--light-shade),calc(.707 * var(--sun-ray-offset)) calc(.707 * var(--sun-ray-offset)) 0 var(--sun-ray-spread) var(--light-shade),calc(-.707 * var(--sun-ray-offset)) calc(.707 * var(--sun-ray-offset)) 0 var(--sun-ray-spread) var(--light-shade),calc(.707 * var(--sun-ray-offset)) calc(-.707 * var(--sun-ray-offset)) 0 var(--sun-ray-spread) var(--light-shade),calc(-.707 * var(--sun-ray-offset)) calc(-.707 * var(--sun-ray-offset)) 0 var(--sun-ray-spread) var(--light-shade)}.toggle-dark:before{animation:moon .4s ease-out forwards;background-color:var(--dark-shade);border-radius:50%;width:var(--moon-size);height:var(--moon-size);top:var(--moon-pos);left:var(--moon-pos);z-index:1}.toggle-dark:after{animation:moon-shadow .4s ease-out forwards;background:var(--light);border-radius:50%;width:var(--moon-shadow-size);height:var(--moon-shadow-size);top:var(--moon-shadow-pos);right:var(--moon-shadow-pos);z-index:2}@keyframes sun{0%{transform:rotate(-90deg) scale(.5);opacity:0}to{transform:rotate(0deg) scale(1);opacity:1}}@keyframes moon{0%{transform:rotate(-90deg) scale(.5);opacity:0}to{transform:rotate(0deg) scale(1);opacity:1}}@keyframes moon-shadow{0%{transform:rotate(-45deg) scale(.5) translate(10px,-10px);opacity:0}to{transform:rotate(0deg) scale(1) translate(0);opacity:1}}