@layer normalize,base,demo,glows,transitions,trail;@layer normalize{html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}}@layer trail{:root{--offset: calc(var(--step) * .5)}.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:var(--offset),calc(var(--offset) + (var(--step) * 2.5));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}.glow{opacity:1;transition-property:opacity;transition-duration:1.25s;transition-delay:var(--offset);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-property:opacity;transition-duration:var(--step);transition-delay:0s;transition-timing-function:var(--ease)}}@layer glows{.face-plate,.face-glowdrop{position:absolute;inset:0;border-radius:inherit}.face-glowdrop:after,.face-glowdrop:before{content:"";height:50%;aspect-ratio:1;background:#fff;filter:blur(6px);position:absolute;z-index:-1;border-radius:50%}.face-glowdrop:before{left:4%;width:56%;translate:0 -25%}.face-glowdrop:after{bottom:0;right:12%;width:34%;translate:0 20%}.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)}.face-glows div{position:absolute;inset:0;border-radius:inherit;filter:blur(4px);border:.1em solid white}}@layer transitions{:root{--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% )}body{transition-property:background-color,color;transition-duration:var(--step);transition-timing-function:var(--ease)}.socket{transition-property:background-color,box-shadow;transition-duration:var(--step);transition-timing-function:var(--ease)}.face{transition-property:scale;transition-duration:var(--step);transition-timing-function:var(--ease)}.outline{transition-property:stroke;transition-duration:var(--step);transition-timing-function:var(--ease)}.inner-bg{fill:#000;transition-property:fill;transition-duration:var(--step);transition-timing-function:var(--ease)}.toggle:before{transition-property:scale,opacity;transition-duration:var(--step);transition-timing-function:var(--ease)}.face-shadow:after,.face-shadow:before{transition-property:opacity,translate,filter,scale;transition-duration:var(--step);transition-timing-function:var(--ease)}.face-shadow:after{scale:.5}.face-plate{transition-property:background-color;transition-duration:var(--step);transition-timing-function:var(--ease)}.face-glowdrop{scale:0;transition-property:scale;transition-duration:var(--step);transition-timing-function:var(--ease)}.socket-shadow,.face-glows,.face-shine{transition-property:opacity;transition-duration:var(--step);transition-timing-function:var(--ease)}button:active .socket{box-shadow:-.045em .1em .2em -.15em #fff}button:active .face{scale:.99}.glow{opacity:0;transition-property:opacity;transition-duration:var(--step);transition-timing-function:var(--ease)}.toggle[aria-pressed=true] .face{scale:1.12}.toggle[aria-pressed=true] .outline{stroke:#4d4d4d}.toggle[aria-pressed=true] .inner-bg{fill:#333}.toggle[aria-pressed=true] .socket{box-shadow:-.025em .08em .2em -.1em #fff}.toggle[aria-pressed=true] .glow{opacity:0}.toggle[aria-pressed=true] .face-glowdrop{scale:1}.toggle[aria-pressed=true]:before{scale:2;opacity:0}.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[aria-pressed=true] .socket-shadow,.toggle[aria-pressed=true] .face-glows,.toggle[aria-pressed=true] .face-shine{opacity:1}.face{scale:1}}@layer demo{main{font-size:var(--font-size);scale:1}:root{--font-size: 64px;--bg-light: hsl(235 5% 85%);--bg-dark: hsl(220 27% 6%);--button-light: hsl(223 4% 73%);--button-dark: hsl(220 27% 6%)}body{background:light-dark(var(--bg-light),var(--bg-dark));overflow:hidden}button{background:#0000;font-size:var(--font-size);height:3em;padding:0;border-radius:3em;border:0;aspect-ratio:1.8 / 1;position:relative;cursor:pointer}button:after{content:""}button :is(.socket,.face){position:absolute;border-radius:3em}.toggle:before{pointer-events:none}.socket{box-shadow:-.05em .1em .2em -.2em #fff;background:light-dark(hsl(0 0% 90%),hsl(0 0% 0%));position:relative;inset:0}.socket-shadow{position:absolute;inset:0;opacity:0;border-radius:inherit;box-shadow:0 .075em .1em #fff}.face{inset:.15em}.toggle:before{content:"";width:150vmax;height:200vmax;aspect-ratio:1;border-radius:0%;background:radial-gradient(#ffffff40,#000 35%);position:absolute;translate:-50% -65%;left:50%;top:50%;z-index:-1;opacity:.35}.face-shadow,.face-shadow:after,.face-shadow:before{position:absolute;inset:0;border-radius:inherit}.face-shadow:after,.face-shadow:before{content:""}.face-shadow:before{background:#000}.face-shadow:after{background:#fff}.face-plate{box-shadow:-.05em .1em .2em -.2em #fff inset;background:conic-gradient(from 45deg,#0000,#ffffff0d),light-dark(var(--button-light),var(--button-dark))}.face-shine{position:absolute;inset:0;opacity:0;border-radius:3em}.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}.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}.face-shine:after{content:"";position:absolute;inset:0;background:conic-gradient(from 45deg,#0000,#ffffff40);border-radius:3em}.face svg{--glow: hsl(182 90% 92%);width:25%;position:absolute;top:50%;left:50%;translate:-52% -48%;overflow:visible!important}.face svg path{transform-box:fill-box;transform-origin:center center}.glow{z-index:3;filter:drop-shadow(0 0 .2em var(--glow));will-change:opacity}.trail-holder{z-index:2;filter:blur(10px)}.trail-holder .trail{stroke-width:4}.trail{stroke-dashoffset:0}.inner-face{fill:#c9cacf}.glow-path{fill:var(--glow);stroke:var(--glow);opacity:1;stroke-width:0px}}@layer base{:root{--font-size-min: 16;--font-size-max: 20;--font-ratio-min: 1.2;--font-ratio-max: 1.33;--font-width-min: 375;--font-width-max: 1500}html{--line: light-dark(hsl(0 0% 10% / .3), hsl(0 0% 100% / .3));color-scheme:light dark}[data-theme=light]{--line: hsl(0 0% 10% / .3);color-scheme:light only}[data-theme=dark]{--line: hsl(0 0% 100% / .3);color-scheme:dark only}:where(.fluid){--fluid-min: calc( var(--font-size-min) * pow(var(--font-ratio-min), var(--font-level, 0)) );--fluid-max: calc( var(--font-size-max) * pow(var(--font-ratio-max), var(--font-level, 0)) );--fluid-preferred: calc( (var(--fluid-max) - var(--fluid-min)) / (var(--font-width-max) - var(--font-width-min)) );--fluid-type: clamp( (var(--fluid-min) / 16) * 1rem, ((var(--fluid-min) / 16) * 1rem) - (((var(--fluid-preferred) * var(--font-width-min)) / 16) * 1rem) + (var(--fluid-preferred) * var(--variable-unit, 100vi)), (var(--fluid-max) / 16) * 1rem );font-size:var(--fluid-type)}*,*:after,*:before{box-sizing:border-box}body{display:grid;place-items:center;min-height:100vh;font-family:SF Pro Text,SF Pro Icons,AOS Icons,Helvetica Neue,Helvetica,Arial,sans-serif,system-ui}body:before{--size: 45px;content:"";height:100vh;width:100vw;position:fixed;background:linear-gradient(90deg,var(--line) 1px,transparent 1px var(--size)) 50% 50% / var(--size) var(--size),linear-gradient(var(--line) 1px,transparent 1px var(--size)) 50% 50% / var(--size) var(--size);-webkit-mask:linear-gradient(-20deg,transparent 64%,white);mask:linear-gradient(-20deg,transparent 64%,white);top:0;transform-style:flat;pointer-events:none;z-index:-1}.bear-link{color:canvasText;position:fixed;top:1rem;left:1rem;width:48px;aspect-ratio:1;display:grid;place-items:center;opacity:.8}:where(.x-link,.bear-link):is(:hover,:focus-visible){opacity:1}.bear-link svg{width:75%}.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}}div.tp-dfwv{z-index:9999}div.tp-dfwv .tp-rotv{max-height:calc(100vh - 16px);overflow:auto;border-radius:var(--bs-br)}div.tp-dfwv .tp-rotv>.tp-rotv_b{position:sticky;top:0;z-index:2;background:#45474c}