:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--light: #ddd;--dark: #222}body{margin:0;padding:0;min-height:100vh;display:flex;justify-content:center;align-items:center}main>div{display:flex;justify-content:center;align-items:center}p{max-width:90vmin}div.three-way{--size: 60vmin;--cross: calc(var(--size) * .5);--twice: calc(var(--size) - var(--cross));--once: calc(var(--twice)* .5);--icon: calc(var(--cross) * .85);--edge: calc(var(--size) * .02);--side: #fff;--off: #900;--mix: #a50;--on: #060;--bgoff: #333;--bgmix: #666;--bgon: #999;--ioff: "☁️";--imix: "🌤️";--ion: "☀️";position:relative;display:flex;justify-content:center;align-items:center;width:var(--size);height:var(--cross);background-color:var(--bgoff);border:var(--edge) solid var(--side);border-radius:100vmax;overflow:hidden}div.three-way label{width:100%;height:100%}div.three-way label input{display:none}div.three-way:after{content:var(--ioff);background-color:var(--off);position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;font-size:var(--icon);width:var(--cross);height:var(--cross);border-radius:100vmax;overflow:hidden;transition:all .25s}div.three-way:has(.mix:checked){background-color:var(--bgmix)}div.three-way:has(.mix:checked):after{content:var(--imix);left:var(--once);background-color:var(--mix)}div.three-way:has(.on:checked){background-color:var(--bgon)}div.three-way:has(.on:checked):after{content:var(--ion);left:var(--twice);background-color:var(--on)}div.three-way.vertical{flex-direction:column;width:var(--cross);height:var(--size)}div.three-way.vertical:has(.mix:checked):after{left:0;top:var(--once)}div.three-way.vertical:has(.on:checked):after{left:0;top:var(--twice)}div.three-way.smiley{--off: #fff;--mix: #fff;--on: #fff;--bgoff: #000;--bgmix: #888;--bgon: #fff;--ioff: "☹️";--imix: "😏";--ion: "😊"}div.three-way.cats{--ioff: "😾";--imix: "😼";--ion: "😻"}div.three-way.cats:has(.off:checked):after{opacity:.25}div.three-way.like{--ioff: "👎";--imix: "🤜";--ion: "👍"}a.github{width:0;height:0}a.github img{position:absolute;right:3px;bottom:3px;width:32px;height:32px;filter:grayscale(1);opacity:.25}a.github img:hover{opacity:1}