.toggle{--base: 1;--shadow: 0;--skew: 0deg;--rotation: 33deg;--duration: 2.5s;--resize: var(--base);--resize-y: var(--resize);--ease: cubic-bezier(.23, 1, .32, 1);transform:translateY(calc(-4px * var(--shadow))) translate(calc(-50% - calc(3px * var(--shadow)))) rotate(-33deg);transition:transform var(--duration) var(--ease);background:transparent;display:inline-block;will-change:opacity;text-align:center;position:fixed;contain:strict;border:solid 0;height:160px;width:160px;margin:4px;bottom:0;left:50%}.toggle:before{box-shadow:0 0 17.5px 8.75px #fff;border-radius:118.3px;background:#fff;position:absolute;margin-left:-50.4px;margin-top:-50.4px;opacity:.2;content:"";height:100.8px;width:100.8px;left:50%;top:50%}.toggle .button{box-shadow:0 15px 25px -4px rgba(0,0,0,calc(.5 * var(--shadow))),inset 0 -3px 4px -1px rgba(0,0,0,calc(.2 * var(--shadow))),0 -10px 15px -1px rgba(255,255,255,calc(.6 * var(--shadow))),inset 0 3px 4px -1px rgba(255,255,255,calc(.2 * var(--shadow))),inset 0 0 5px 1px rgba(255,255,255,calc(.8 * var(--shadow))),inset 0 20px 30px 0 rgba(255,255,255,calc(.2 * var(--shadow)));transition:box-shadow var(--duration) var(--ease),background var(--duration) var(--ease);background:rgba(204,208,212,var(--shadow));will-change:box-shadow,filter;border-radius:96.32px;margin-left:-48.16px;margin-top:-48.16px;position:absolute;filter:blur(1px);height:96.32px;width:96.32px;display:block;left:50%;top:50%}.toggle .label{--shift: 0px;text-shadow:1px 1px 3px #ccd0d4,0 0 0 rgba(0,0,0,.8),1px 1px 4px #fff;transform:scale(var(--resize),var(--resize-y)) rotate(var(--rotation)) translate(-50%,-50%) skewY(var(--skew));transition:opacity var(--duration) var(--ease),transform var(--duration) var(--ease);will-change:opacity,zoom;transform-origin:0px 4px;color:#0006;opacity:var(--resize);font-family:serif;text-align:center;position:absolute;text-indent:10px;font-weight:700;font-size:42px;display:block;line-height:1;height:30px;width:auto;left:50%;top:50%}.toggle input{position:absolute;cursor:pointer;height:100%;width:100%;opacity:0;z-index:1;left:0;top:0}.toggle.checked input~.button{box-shadow:0 15px 25px -4px rgba(0,0,0,calc(.4 * var(--shadow))),inset 0 -8px 30px 1px rgba(255,255,255,calc(.9 * var(--shadow))),0 -10px 15px -1px rgba(255,255,255,calc(.6 * var(--shadow))),inset 0 8px 25px 0 rgba(0,0,0,calc(.4 * var(--shadow))),inset 0 0 10px 1px rgba(255,255,255,calc(.6 * var(--shadow)))}.toggle.checked input~.label{--resize: calc(var(--base) - .1);--shift: -2px}.toggle input:checked~.button{box-shadow:0 15px 25px -4px rgba(0,0,0,calc(.4 * var(--shadow))),inset 0 -8px 25px -1px rgba(255,255,255,calc(.9 * var(--shadow))),0 -10px 15px -1px rgba(255,255,255,calc(.6 * var(--shadow))),inset 0 8px 20px 0 rgba(0,0,0,calc(.2 * var(--shadow))),inset 0 0 5px 1px rgba(255,255,255,calc(.6 * var(--shadow)))}.toggle input:checked~.label{--resize: calc(var(--base) - .06);--shift: -1px}.android .toggle{--base: 1.22;--skew: -8deg;--rotation: 38deg}.android .toggle .label{--resize-y: calc(var(--resize) + .25);transform-origin:5px 5px}
