:root{--colormode-switch-size: 2em}.switch{font-size:17px;position:relative;display:inline-block;width:var(--colormode-switch-size);height:calc(var(--colormode-switch-size) * .55);border-radius:calc(var(--colormode-switch-size) * .275);box-shadow:0 0 10px #0000001a}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#2a2a2a;transition:.4s;border-radius:inherit;overflow:hidden}.slider:before{position:absolute;content:"";height:calc(var(--colormode-switch-size) * .3);width:calc(var(--colormode-switch-size) * .3);border-radius:50%;left:calc(var(--colormode-switch-size) * .125);bottom:calc(var(--colormode-switch-size) * .125);transition:.4s;transition-timing-function:cubic-bezier(.81,-.04,.38,1.5);box-shadow:inset calc(var(--colormode-switch-size) * .125) calc(var(--colormode-switch-size) * -.0625) 0 0 #fff}.switch input:checked+.slider{background-color:#00a6ff}.switch input:checked+.slider:before{transform:translate(calc(var(--colormode-switch-size) * .45));box-shadow:inset calc(var(--colormode-switch-size) * .234375) calc(var(--colormode-switch-size) * -.0625) 0 calc(var(--colormode-switch-size) * .234375) #ffcf48}.star{background-color:#fff;border-radius:50%;position:absolute;width:calc(var(--colormode-switch-size) * .08);height:calc(var(--colormode-switch-size) * .08);transition:all .4s}.star_1{left:calc(var(--colormode-switch-size) * .625);top:calc(var(--colormode-switch-size) * .125)}.star_2{left:calc(var(--colormode-switch-size) * .55);top:calc(var(--colormode-switch-size) * .3)}.star_3{left:calc(var(--colormode-switch-size) * .75);top:calc(var(--colormode-switch-size) * .225)}.switch input:checked~.slider .star{opacity:0}.cloud{width:calc(var(--colormode-switch-size) * .875);position:absolute;bottom:calc(var(--colormode-switch-size) * -.35);left:calc(var(--colormode-switch-size) * -.275);opacity:0;transition:all .4s}.switch input:checked~.slider .cloud{opacity:1}