.toggle{--font-size: 20px;--step: .5s;--ease: linear( 0 0%, .2342 12.49%, .4374 24.99%, .6093 37.49%, .6835 43.74%, .7499 49.99%, .8086 56.25%, .8593 62.5%, .9023 68.75%, .9375 75%, .9648 81.25%, .9844 87.5%, .9961 93.75%, 1 100% );--glow: hsl(182 90% 92%);--bg-dark: hsl(220 27% 6%);--bg-light: hsl(235 5% 85%);--button-dark: hsl(220 27% 6%);--button-light: hsl(223 4% 73%);font-size:var(--font-size);background:transparent;height:2.2em;padding:0;border-radius:3em;border:none;outline:none;box-shadow:0 0 20px #ffffff1a;aspect-ratio:1.8 / 1;position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent;overflow:hidden;transition:box-shadow var(--step) var(--ease)}.toggle[aria-pressed=true]{box-shadow:0 0 25px #fff3}.toggle:focus,.toggle:focus-visible{outline:none}.toggle .socket,.toggle .face{position:absolute;border-radius:3em}.toggle .socket{inset:0;box-shadow:-.05em .1em .2em -.2em #fff;background:#e6e6e6;transition:background-color var(--step) var(--ease),box-shadow var(--step) var(--ease)}[data-theme=dark] .toggle .socket{background:#000}.toggle .socket-shadow{position:absolute;inset:0;border-radius:inherit;opacity:0;box-shadow:0 .075em .1em #fff;transition:opacity var(--step) var(--ease)}.toggle[aria-pressed=true] .socket-shadow{opacity:1}.toggle .face{inset:.15em;scale:1;transition:scale var(--step) var(--ease)}.toggle[aria-pressed=true] .face{scale:1.12}.toggle:active .socket{box-shadow:-.045em .1em .2em -.15em #fff}.toggle:active .face{scale:.99}.toggle .face-shadow,.toggle .face-shadow:after,.toggle .face-shadow:before{position:absolute;inset:0;border-radius:inherit}.toggle .face-shadow:after,.toggle .face-shadow:before{content:"";transition:opacity var(--step) var(--ease),translate var(--step) var(--ease),filter var(--step) var(--ease),scale var(--step) var(--ease)}.toggle .face-shadow:before{background:#000}.toggle .face-shadow:after{background:#fff;scale:.5}.toggle[aria-pressed=true] .face-shadow:before{translate:-15% 55%;filter:blur(1em);opacity:.35}.toggle[aria-pressed=true] .face-shadow:after{filter:blur(.5em);scale:1}.toggle .face-plate{position:absolute;inset:0;border-radius:inherit;box-shadow:-.05em .1em .2em -.2em #fff inset;background:conic-gradient(from 45deg,#0000,#ffffff0d),var(--button-light);transition:background-color var(--step) var(--ease)}[data-theme=dark] .toggle .face-plate{background:conic-gradient(from 45deg,#0000,#ffffff0d),var(--button-dark)}.toggle .face-glowdrop{position:absolute;inset:0;border-radius:inherit;scale:0;transition:scale var(--step) var(--ease)}.toggle[aria-pressed=true] .face-glowdrop{scale:1}.toggle .face-glowdrop:after,.toggle .face-glowdrop:before{content:"";height:50%;aspect-ratio:1;background:#fff;filter:blur(6px);position:absolute;z-index:-1;border-radius:50%}.toggle .face-glowdrop:before{left:4%;width:56%;translate:0 -25%}.toggle .face-glowdrop:after{bottom:0;right:12%;width:34%;translate:0 20%}.toggle .face-shine{position:absolute;inset:0;border-radius:3em;opacity:0;transition:opacity var(--step) var(--ease)}.toggle[aria-pressed=true] .face-shine{opacity:1}.toggle .face-shine-shadow{position:absolute;inset:0;border-radius:inherit;-webkit-mask:conic-gradient(from 0deg,#fff 90deg,#0000 110deg 200deg,#fff 215deg 280deg,#0000 315deg);mask:conic-gradient(from 0deg,#fff 90deg,#0000 110deg 200deg,#fff 215deg 280deg,#0000 315deg);box-shadow:.075em 0 .025em -.025em #00000080 inset,-.075em -.05em .025em -.025em #00000080 inset}.toggle .face-shine:before{content:"";position:absolute;inset:.05em;border-radius:3em;box-shadow:0 -.05em .025em -.025em #80808080 inset,-.025em .05em .025em -.025em #ffffff80 inset}.toggle .face-shine:after{content:"";position:absolute;inset:0;background:conic-gradient(from 45deg,#0000,#ffffff40);border-radius:3em}.toggle .face-glows{position:absolute;inset:-.075em;opacity:0;border-radius:inherit;mix-blend-mode:plus-lighter;filter:blur(8px);z-index:20;-webkit-mask:conic-gradient(from 280deg,#0000,#fff 20deg 45deg,#0000 95deg),conic-gradient(from 110deg,#0000,#fff 20deg,#0000 95deg);mask:conic-gradient(from 280deg,#0000,#fff 20deg 45deg,#0000 95deg),conic-gradient(from 110deg,#0000,#fff 20deg,#0000 95deg);transition:opacity var(--step) var(--ease)}.toggle[aria-pressed=true] .face-glows{opacity:1}.toggle .face-glows div{position:absolute;inset:0;border-radius:inherit;filter:blur(4px);border:.1em solid white}.toggle .face svg{width:25%;position:absolute;top:50%;left:50%;translate:-52% -48%;overflow:visible!important}.toggle .face svg path{transform-box:fill-box;transform-origin:center center}.toggle .glow{z-index:3;filter:drop-shadow(0 0 .2em var(--glow));will-change:opacity;opacity:1;transition:opacity 1.25s;transition-delay:calc(var(--step) * .5);transition-timing-function:linear(0 0%,.0039 6.25%,.0156 12.5%,.0352 18.75%,.0625 25%,.0977 31.25%,.1407 37.5%,.1914 43.74%,.2499 49.99%,.3164 56.25%,.3906 62.5%,.5625 75%,.7656 87.5%,1 100%)}.toggle[aria-pressed=true] .glow{opacity:0;transition:opacity var(--step) var(--ease);transition-delay:0s}.toggle .glow-path{fill:var(--glow);stroke:var(--glow);opacity:1;stroke-width:0px}.toggle .trail-holder{z-index:2;filter:blur(10px)}.toggle .trail-holder .trail{stroke-width:4}.toggle .trail{stroke-dasharray:10 80;stroke-dashoffset:10;opacity:0;transition-property:stroke-dashoffset,opacity;transition-duration:calc(var(--step) * 3),calc(var(--step) * .5);transition-delay:calc(var(--step) * .5),calc(var(--step) * 3);transition-timing-function:var(--ease),linear(0 0%,.0039 6.25%,.0156 12.5%,.0352 18.75%,.0625 25%,.0977 31.25%,.1407 37.5%,.1914 43.74%,.2499 49.99%,.3164 56.25%,.3906 62.5%,.5625 75%,.7656 87.5%,1 100%)}.toggle[aria-pressed=true] .trail{transition:stroke-dashoffset 0s;opacity:1;stroke-dashoffset:-70}.toggle .outline{transition:stroke var(--step) var(--ease)}.toggle[aria-pressed=true] .outline{stroke:#4d4d4d}.toggle .inner-face{fill:#c9cacf}.toggle .inner-bg{fill:#000;transition:fill var(--step) var(--ease)}.toggle[aria-pressed=true] .inner-bg{fill:#333}.toggle .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}