@property --angle-1{syntax:"<angle>";inherits:false;initial-value:-75deg}@property --angle-2{syntax:"<angle>";inherits:false;initial-value:-45deg}.frosted-button-wrap{z-index:2;pointer-events:none;background:0 0;border-radius:999vw;transition:all .4s cubic-bezier(.25,1,.5,1);display:inline-block;position:relative}.frosted-button-shadow{--shadow-cutoff-fix:2em;width:calc(100% + var(--shadow-cutoff-fix));height:calc(100% + var(--shadow-cutoff-fix));top:calc(0% - var(--shadow-cutoff-fix)/2);left:calc(0% - var(--shadow-cutoff-fix)/2);filter:blur(clamp(2px,.125em,12px));pointer-events:none;position:absolute;overflow:visible}.frosted-button-shadow:after{content:"";z-index:0;width:calc(100% - var(--shadow-cutoff-fix) - .25em);height:calc(100% - var(--shadow-cutoff-fix) - .25em);inset:0;top:calc(var(--shadow-cutoff-fix) - .5em);left:calc(var(--shadow-cutoff-fix) - .875em);box-sizing:border-box;opacity:1;background:linear-gradient(#0003,#0000001a);border-radius:999vw;padding:.125em;transition:all .4s cubic-bezier(.25,1,.5,1);position:absolute;overflow:visible;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.frosted-button{--border-width:clamp(1px,.0625em,4px);all:unset;cursor:pointer;-webkit-tap-highlight-color:#0000;pointer-events:auto;z-index:3;-webkit-backdrop-filter:blur(clamp(1px,.125em,4px));background:linear-gradient(-75deg,#5b4fff26,#5b4fff59,#5b4fff26);border-radius:999vw;transition:all .4s cubic-bezier(.25,1,.5,1);position:relative;box-shadow:inset 0 .125em .125em #00000026,inset 0 -.125em .125em #5b4fff66,0 .25em .125em -.125em #0000004d,inset 0 0 .1em .25em #5b4fff4d,0 0 #5b4fff}.frosted-button:hover{-webkit-backdrop-filter:blur(.01em);transform:scale(.975);box-shadow:inset 0 .125em .125em #00000026,inset 0 -.125em .125em #5b4fff80,0 .15em .05em -.1em #00000059,inset 0 0 .05em .1em #5b4fff80,0 0 #5b4fff}.frosted-button span{-webkit-user-select:none;user-select:none;letter-spacing:-.05em;color:#fffffff2;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-shadow:0 .25em .05em #0000004d;padding-block:.875em;padding-inline:1.5em;font-family:inherit;font-weight:500;transition:all .4s cubic-bezier(.25,1,.5,1);display:block;position:relative}.frosted-button:hover span{text-shadow:.025em .025em .025em #00000059}.frosted-button span:after{content:"";z-index:1;width:calc(100% - var(--border-width));height:calc(100% - var(--border-width));top:calc(0% + var(--border-width)/2);left:calc(0% + var(--border-width)/2);box-sizing:border-box;background:linear-gradient(var(--angle-2),#5b4fff00 0%,#5b4fff99 40% 50%,#5b4fff00 55%);z-index:3;mix-blend-mode:screen;pointer-events:none;background-position:0%;background-repeat:no-repeat;background-size:200% 200%;border-radius:999vw;transition:background-position .5s cubic-bezier(.25,1,.5,1),--angle-2 .5s cubic-bezier(.25,1,.5,1);display:block;position:absolute;overflow:clip}.frosted-button:hover span:after{background-position:25%}.frosted-button:active span:after{--angle-2:-15deg;background-position:50% 15%}.frosted-button:after{content:"";z-index:1;width:calc(100% + var(--border-width));height:calc(100% + var(--border-width));inset:0;top:calc(0% - var(--border-width)/2);left:calc(0% - var(--border-width)/2);padding:var(--border-width);box-sizing:border-box;background:conic-gradient(from var(--angle-1)at 50% 50%,#5b4fffcc,#5b4fff00 5% 40%,#5b4fffcc 50%,#5b4fff00 60% 95%,#5b4fffcc),linear-gradient(180deg,#5b4fff80,#5b4fff80);-webkit-mask-composite:xor;box-shadow:inset 0 0 0 calc(var(--border-width)/2)#5b4fff80;border-radius:999vw;transition:all .4s cubic-bezier(.25,1,.5,1),--angle-1 .5s;position:absolute;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.frosted-button:hover:after{--angle-1:-125deg}.frosted-button:active:after{--angle-1:-75deg}.frosted-button-wrap:has(.frosted-button:hover) .frosted-button-shadow{filter:blur(clamp(2px,.0625em,6px))}.frosted-button-wrap:has(.frosted-button:hover) .frosted-button-shadow:after{top:calc(var(--shadow-cutoff-fix) - .875em);opacity:1}.frosted-button-wrap:has(.frosted-button:active){transform:rotateX(25deg)}.frosted-button-wrap:has(.frosted-button:active) .frosted-button{box-shadow:inset 0 .125em .125em #00000026,inset 0 -.125em .125em #5b4fff66,0 .125em .125em -.125em #0000004d,inset 0 0 .1em .25em #5b4fff4d,0 .225em .05em #00000026,0 .25em #5b4fff99,inset 0 .25em .05em #00000040}.frosted-button-wrap:has(.frosted-button:active) .frosted-button-shadow{filter:blur(clamp(2px,.125em,12px))}.frosted-button-wrap:has(.frosted-button:active) .frosted-button-shadow:after{top:calc(var(--shadow-cutoff-fix) - .5em);opacity:.75}.frosted-button-wrap:has(.frosted-button:active) span{text-shadow:.025em .25em .05em #0000001f}