@property --angle-1{syntax:"<angle>";inherits:false;initial-value:-75deg}@property --angle-2{syntax:"<angle>";inherits:false;initial-value:-45deg}:root{--anim--hover-time:.4s;--anim--hover-ease:cubic-bezier(.25, 1, .5, 1)}.button-wrap{transition:transform var(--anim--hover-time) var(--anim--hover-ease);background:0 0;border-radius:999vw;display:inline-flex;position:relative}.button-shadow{--shadow-cuttoff-fix:2em;width:calc(100% + var(--shadow-cuttoff-fix));height:calc(100% + var(--shadow-cuttoff-fix));top:calc(0% - var(--shadow-cuttoff-fix) / 2);left:calc(0% - var(--shadow-cuttoff-fix) / 2);filter:blur(clamp(2px,.125em,12px));pointer-events:none;position:absolute;overflow:visible}.button-shadow:after{content:"";z-index:0;width:calc(100% - var(--shadow-cuttoff-fix) - .25em);height:calc(100% - var(--shadow-cuttoff-fix) - .25em);inset:0;top:calc(var(--shadow-cuttoff-fix) - .5em);left:calc(var(--shadow-cuttoff-fix) - .875em);-webkit-mask-composite:xor;transition:top var(--anim--hover-time) var(--anim--hover-ease), opacity var(--anim--hover-time) var(--anim--hover-ease);opacity:1;background:linear-gradient(#0003,#0000001a);border-radius:999vw;padding:.125em;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}.button-wrap button{--border-width:clamp(1px, .0625em, 4px);all:unset;cursor:pointer;-webkit-tap-highlight-color:#0000;z-index:3;transition:transform var(--anim--hover-time) var(--anim--hover-ease);border-radius:999vw;flex:1;position:relative}.button-wrap button:hover{transform:scale(.975)}.button-wrap button>span{-webkit-user-select:none;user-select:none;letter-spacing:-.05em;color:#ffffffe6;-webkit-font-smoothing:antialiased;text-shadow:0 .15em .05em #00000040;transition:text-shadow var(--anim--hover-time) var(--anim--hover-ease), color var(--anim--hover-time) var(--anim--hover-ease);padding-block:1.4em;padding-inline:2.25em;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:1em;font-weight:500;display:block;position:relative}.button-wrap button:hover>span{text-shadow:.025em .025em .025em #0000001f}.button-wrap 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);background:linear-gradient(var(--angle-2), #fff0 0%, #ffffff80 40% 50%, #fff0 55%);mix-blend-mode:screen;pointer-events:none;opacity:.15;transition:background-position calc(var(--anim--hover-time) * 1.25) var(--anim--hover-ease), --angle-2 calc(var(--anim--hover-time) * 1.25) var(--anim--hover-ease);background-position:0%;background-repeat:no-repeat;background-size:200% 200%;border-radius:999vw;display:block;position:absolute;overflow:clip}.button-wrap button:hover>span:after{background-position:25%}.button-wrap button:active>span:after{--angle-2:-15deg;background-position:50% 15%}.button-wrap:has(button:hover) .button-shadow{filter:blur(clamp(2px,.0625em,6px));transition:filter var(--anim--hover-time) var(--anim--hover-ease)}.button-wrap:has(button:hover) .button-shadow:after{top:calc(var(--shadow-cuttoff-fix) - .875em)}.button-wrap:has(button:active){transform:rotateX(25deg)}.button-wrap:has(button:active) .button-shadow{filter:blur(clamp(2px,.125em,12px))}.button-wrap:has(button:active) .button-shadow:after{top:calc(var(--shadow-cuttoff-fix) - .5em);opacity:.75}.button-wrap:has(button:active) button>span{text-shadow:.025em .25em .05em #0000001f}.button-wrap button.glass-main{box-shadow:none;background:#ffffff0d}.button-wrap button.glass-main:after{display:none}.button-wrap.glass-sm button>span{padding-block:.42em;padding-inline:1.5em}.button-wrap.glass-tall button>span{padding-block:.72em}.button-wrap.glass-card,.button-wrap.glass-card button,.button-wrap.glass-card .button-shadow:after{border-radius:12px}.button-wrap.glass-card button>span:after{border-radius:10px}.button-wrap.glass-black button{background:#ffffff85}.button-wrap.glass-black button.glass-main{background:#ffffff6b}.button-wrap.glass-black button>span{color:#111;text-shadow:none}.button-wrap.glass-black button>span:after{display:none}.button-wrap.glass-black button:hover>span{text-shadow:none}.button-wrap.glass-black:has(button:active) button>span{text-shadow:none}@media (hover:none) and (pointer:coarse){.button-wrap button>span:after,.button-wrap button:active>span:after{--angle-2:-45deg}}