body{width:100%;height:100vh;margin:0;padding:0;display:flex;align-items:center;justify-content:center;font-size:3rem;background-color:#e1e1e1;font-family:Inter,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden}button{all:unset;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);position:relative;border-radius:999vw;background-color:#000000bf;box-shadow:-.15em -.15em .15em -.075em #05050540,.0375em .0375em .0675em #0505051a}button:after{content:"";position:absolute;z-index:0;width:calc(100% + .3em);height:calc(100% + .3em);top:-.15em;left:-.15em;border-radius:inherit;background:linear-gradient(-135deg,rgba(5,5,5,.5),transparent 20%,transparent 100%);filter:blur(.0125em);opacity:.25;mix-blend-mode:multiply}button .button-outer{position:relative;z-index:1;border-radius:inherit;transition:box-shadow .3s ease;will-change:box-shadow;box-shadow:0 .05em .05em -.01em #050505,0 .01em .01em -.01em #05050580,.15em .3em .1em -.01em #05050540}button:active .button-outer{box-shadow:0 0 #050505,0 0 #05050580,0 0 #05050540}.button-inner{--inset: .035em;position:relative;z-index:1;border-radius:inherit;padding:1em 1.5em;background-image:linear-gradient(135deg,#e6e6e6,#b4b4b4);transition:box-shadow .3s ease,clip-path .25s ease,background-image .25s ease,transform .25s ease;will-change:box-shadow,clip-path,background-image,transform;overflow:clip;clip-path:inset(0 0 0 0 round 999vw);box-shadow:0 0 inset #0505051a,-.05em -.05em .05em inset #05050540,0 0 inset #0505051a,0 0 .05em .2em inset #ffffff40,.025em .05em .1em inset #fff,.12em .12em .12em inset #ffffff40,-.075em -.25em .25em .1em inset #05050540}button:active .button-inner{clip-path:inset(clamp(1px,.0625em,2px) clamp(1px,.0625em,2px) clamp(1px,.0625em,2px) clamp(1px,.0625em,2px) round 999vw);box-shadow:.1em .15em .05em inset #050505bf,-.025em -.03em .05em .025em inset #05050580,.25em .25em .2em inset #05050580,0 0 .05em .5em inset #ffffff26,0 0 inset #fff,.12em .12em .12em inset #ffffff40,-.075em -.12em .2em .1em inset #05050540}button .button-inner span{position:relative;z-index:4;font-family:Inter,sans-serif;letter-spacing:-.05em;font-weight:500;color:#0000;background-image:linear-gradient(135deg,#191919,#4b4b4b);-webkit-background-clip:text;background-clip:text;transition:transform .25s ease;display:block;will-change:transform;text-shadow:rgba(0,0,0,.1) 0 0 .1em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}button:active .button-inner span,button:active .button-inner{transform:scale(.975)}
