*{border:0;box-sizing:border-box;margin:0;padding:0}:root{--hue: 223;--bg: hsl(var(--hue),10%,90%);--fg: hsl(var(--hue),10%,10%);--trans-dur: .5s;--trans-timing1: cubic-bezier(.65,0,.35,1);--trans-timing2: cubic-bezier(.65,0,.35,1.5);font-size:calc(56px + (120 - 56) * (100vw - 280px) / (3840 - 280))}body,input{color:var(--fg);font:1em/1.5 sans-serif;transition:background-color var(--trans-dur) var(--trans-timing1),color var(--trans-dur) var(--trans-timing1)}body{background-color:var(--bg);display:flex;height:100vh}.switch{display:flex;margin:auto}.switch__emoji{box-shadow:.25em .25em .125em #0000004d;overflow:hidden;pointer-events:none;top:.25em;left:.25em;width:1em;height:1em}[dir=rtl] .switch__emoji{right:.25em;left:auto}.switch__emoji,.switch__emoji:before,.switch__emoji:after,.switch__emoji-eye,.switch__emoji-mouth,.switch__emoji-face{display:block;position:absolute}.switch__emoji,.switch__emoji:before,.switch__emoji:after,.switch__emoji-eye,.switch__emoji-mouth{border-radius:50%}.switch__emoji:before,.switch__emoji:after{content:"";width:100%;height:100%;transform:translateZ(0)}.switch__emoji:before{background-color:#f2c40d;box-shadow:-.25em -.25em .25em #c29d0a inset,.1875em .1875em .25em #f9e286 inset}.switch__emoji:after{box-shadow:0 0 .125em .0625em #f5d03d80 inset}.switch__emoji,.switch__emoji-face{transform-style:preserve-3d;transition:transform var(--trans-dur) var(--trans-timing2)}.switch__emoji-eye,.switch__emoji-mouth{backface-visibility:hidden}.switch__emoji-eye{border:.0625em solid hsl(var(--hue),10%,10%);border-right-color:transparent;border-bottom-color:transparent;border-radius:50%;top:50%;left:50%;width:.25em;height:.25em;transform:translate(-50%,-50%) rotateY(-22.5deg) translateZ(.5em) rotate(45deg)}.switch__emoji-eye+.switch__emoji-eye{transform:translate(-50%,-50%) rotateY(22.5deg) translateZ(.5em) rotate(45deg)}.switch__emoji-mouth{background-image:radial-gradient(100% 100% at 50% 100%,#f2180d 20%,#f5463d 33%,#f5463d00 35%),radial-gradient(100% 100% at 75% 113%,#000 26%,#0000 35%),linear-gradient(#0000 50%,#000 50% 55%,hsl(var(--hue),10%,10%) 65%);top:50%;left:50%;width:.5em;height:.5em;transform:translate(-50%,-50%) rotateX(-15deg) translateZ(.5em)}.switch__emoji-face{top:0;left:0;width:100%;height:100%;transform:rotateY(0)}.switch__emoji-face+.switch__emoji-face{transform:rotateY(-180deg)}.switch__emoji-face--sad .switch__emoji-eye{background-color:hsl(var(--hue),10%,10%);border:0;width:.1875em;height:.1875em}.switch__emoji-face--sad .switch__emoji-mouth{background-image:none;border:.0625em solid transparent;border-top-color:hsl(var(--hue),10%,10%);transform:translate(-50%) rotateX(-20deg) translateZ(.5em)}.switch__input,.switch__label{-webkit-tap-highlight-color:transparent}.switch__input{background-color:hsl(var(--hue),10%,80%);border-radius:.75em;box-shadow:.0625em .0625em .0625em #fff inset,-.0625em -.0625em .0625em hsl(var(--hue),10%,80%) inset,0 0 0 .125em hsl(var(--hue),10%,90%) inset,.25em .25em .125em #0000004d inset,.0625em .0625em .0625em #0000004d;cursor:pointer;display:block;width:2.5em;height:1.5em;-webkit-appearance:none;appearance:none;transition:background-color var(--trans-dur) var(--trans-timing1),box-shadow var(--trans-dur) var(--trans-timing1)}.switch__input:checked{background-color:#0ac213}.switch__input:checked+.switch__emoji{transform:translate(100%)}[dir=rtl] .switch__input:checked+.switch__emoji{transform:translate(-100%)}.switch__input:checked+.switch__emoji .switch__emoji-face{transform:rotateY(179.99deg)}[dir=rtl] .switch__input:checked+.switch__emoji .switch__emoji-face{transform:rotateY(-179.99deg)}.switch__input:checked+.switch__emoji .switch__emoji-face+.switch__emoji-face{transform:rotateY(0)}[dir=rtl] .switch__input:checked+.switch__emoji .switch__emoji-face+.switch__emoji-face{transform:rotateY(-360deg)}.switch__label,.switch__wrapper{display:block}.switch__label{margin-inline-start:.5em;overflow:hidden;position:absolute;width:1px;height:1px}.switch__wrapper{position:relative}@media(prefers-color-scheme:dark){:root{--bg: hsl(var(--hue),10%,10%);--fg: hsl(var(--hue),10%,90%)}.switch__input{background-color:hsl(var(--hue),10%,20%);box-shadow:.0625em .0625em .0625em hsl(var(--hue),10%,25%) inset,-.0625em -.0625em .0625em hsl(var(--hue),10%,20%) inset,0 0 0 .125em hsl(var(--hue),10%,30%) inset,.25em .25em .125em #0000004d inset,.0625em .0625em .0625em #0000004d}}