@property --angle-1{syntax:"<angle>";inherits:false;initial-value:-75deg}@property --angle-2{syntax:"<angle>";inherits:false;initial-value:-45deg}@property --flow-angle{syntax:"<angle>";inherits:false;initial-value:0deg}:root{--glass-button-size:clamp(2rem, 4vw, 5rem);--glass-button-hover-time:.4s;--glass-button-hover-ease:cubic-bezier(.25, 1, .5, 1)}@keyframes flow-border{0%{--flow-angle:0deg}to{--flow-angle:360deg}}.glass-button-wrap{z-index:2;pointer-events:none;transition:all var(--glass-button-hover-time) var(--glass-button-hover-ease);background:0 0;border-radius:999vw;position:relative}.glass-button-flow{z-index:1;pointer-events:none;border-radius:999vw;position:absolute;inset:-2px;overflow:hidden}.glass-button-flow:before{content:"";border-radius:999vw;padding:2px;animation:3s linear infinite flow-border;position:absolute;inset:0;-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}.glass-button-flow:after{content:"";filter:blur(4px);border-radius:999vw;padding:4px;animation:3s linear infinite flow-border;position:absolute;inset:-4px;-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}.glass-button-flow-white:before{background:conic-gradient(from var(--flow-angle) at 50% 50%, transparent 0%, transparent 50%, #ffffff1a 58%, #ffffff80 65%, #fffc 72%, #fff 78%, #fff 82%, #fffc 88%, #ffffff80 93%, #ffffff1a 97%, transparent 100%)}.glass-button-flow-white:after{background:conic-gradient(from var(--flow-angle) at 50% 50%, transparent 0%, transparent 55%, #ffffff0d 62%, #fff3 70%, #ffffff59 78%, #ffffff59 82%, #fff3 90%, #ffffff0d 96%, transparent 100%)}.glass-button-flow-black:before{background:conic-gradient(from var(--flow-angle) at 50% 50%, transparent 0%, transparent 50%, #0000001a 58%, #00000059 65%, #0000008c 72%, #000000b3 78%, #000000b3 82%, #0000008c 88%, #00000059 93%, #0000001a 97%, transparent 100%)}.glass-button-flow-black:after{background:conic-gradient(from var(--flow-angle) at 50% 50%, transparent 0%, transparent 55%, #0000000d 62%, #0000001f 70%, #0003 78%, #0003 82%, #0000001f 90%, #0000000d 96%, transparent 100%)}.glass-button-shadow{--shadow-cuttoff-fix:2em;top:calc(0% - var(--shadow-cuttoff-fix) / 2);left:calc(0% - var(--shadow-cuttoff-fix) / 2);width:calc(100% + var(--shadow-cuttoff-fix));height:calc(100% + var(--shadow-cuttoff-fix));pointer-events:none;-moz-filter:blur(clamp(2px, .125em, 12px));-ms-filter:blur(clamp(2px, .125em, 12px));filter:blur(clamp(2px,.125em,12px));position:absolute;overflow:visible}.glass-button-shadow:after{inset:0;top:calc(var(--shadow-cuttoff-fix) - .5em);left:calc(var(--shadow-cuttoff-fix) - .875em);z-index:0;box-sizing:border-box;width:calc(100% - var(--shadow-cuttoff-fix) - .25em);height:calc(100% - var(--shadow-cuttoff-fix) - .25em);content:"";opacity:1;transition:all var(--glass-button-hover-time) var(--glass-button-hover-ease);background:linear-gradient(#0003,#0000001a);border-radius:999vw;padding:.125em;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}.glass-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));-moz-backdrop-filter:blur(clamp(1px, .125em, 4px));-ms-backdrop-filter:blur(clamp(1px, .125em, 4px));transition:all var(--glass-button-hover-time) var(--glass-button-hover-ease);background:linear-gradient(-75deg,#ffffff0d,#fff3,#ffffff0d);border-radius:999vw;position:relative;box-shadow:inset 0 .125em .125em #0000000d,inset 0 -.125em .125em #ffffff80,0 .25em .125em -.125em #0003,inset 0 0 .1em .25em #fff3,0 0 #fff}.glass-button:hover{-moz-backdrop-filter:blur(.01em);-ms-backdrop-filter:blur(.01em);-webkit-backdrop-filter:blur(.01em);backdrop-filter:blur(.01em);transform:scale(.975);box-shadow:inset 0 .125em .125em #0000000d,inset 0 -.125em .125em #ffffff80,0 .15em .05em -.1em #00000040,inset 0 0 .05em .1em #ffffff80,0 0 #fff}.glass-button-text{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-user-select:none;user-select:none;transition:all var(--glass-button-hover-time) var(--glass-button-hover-ease);font-family:inherit;font-weight:500;display:block;position:relative}.glass-button-text-black{color:#323232;text-shadow:0 .25em .05em #0000001a}.glass-button:hover .glass-button-text-black{text-shadow:.025em .025em .025em #0000001f}.glass-button-wrap:has(.glass-button:active) .glass-button-text-black{text-shadow:.025em .25em .05em #0000001f}.glass-button-text-white{color:#fff;text-shadow:0 .25em .05em #0000004d}.glass-button:hover .glass-button-text-white{text-shadow:.025em .025em .025em #0006}.glass-button-wrap:has(.glass-button:active) .glass-button-text-white{text-shadow:.025em .25em .05em #0006}.glass-button-text:after{top:calc(0% + var(--border-width) / 2);left:calc(0% + var(--border-width) / 2);z-index:1;box-sizing:border-box;width:calc(100% - var(--border-width));height:calc(100% - var(--border-width));pointer-events:none;content:"";background:linear-gradient(var(--angle-2), #fff0 0%, #ffffff80 40% 50%, #fff0 55%);mix-blend-mode:screen;transition:background-position calc(var(--glass-button-hover-time) * 1.25) var(--glass-button-hover-ease), --angle-2 calc(var(--glass-button-hover-time) * 1.25) var(--glass-button-hover-ease);background-position:0%;background-repeat:no-repeat;background-size:200% 200%;border-radius:999vw;display:block;position:absolute;overflow:clip}.glass-button:hover .glass-button-text:after{background-position:25%}.glass-button:active .glass-button-text:after{--angle-2:-15deg;background-position:50% 15%}@media (hover:none) and (pointer:coarse){.glass-button-text:after,.glass-button:active .glass-button-text:after{--angle-2:-45deg}}.glass-button:after{inset:0;top:calc(0% - var(--border-width) / 2);left:calc(0% - var(--border-width) / 2);z-index:1;box-sizing:border-box;width:calc(100% + var(--border-width));height:calc(100% + var(--border-width));padding:var(--border-width);content:"";background:conic-gradient(from var(--angle-1) at 50% 50%, #00000080, #0000 5% 40%, #00000080 50%, #0000 60% 95%, #00000080), linear-gradient(180deg, #ffffff80, #ffffff80);box-shadow:inset 0 0 0 calc(var(--border-width) / 2) #ffffff80;transition:all var(--glass-button-hover-time) var(--glass-button-hover-ease), --angle-1 .5s ease;border-radius:999vw;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}.glass-button:hover:after{--angle-1:-125deg}.glass-button:active:after{--angle-1:-75deg}@media (hover:none) and (pointer:coarse){.glass-button:after,.glass-button:hover:after,.glass-button:active:after{--angle-1:-75deg}}.glass-button-wrap:has(.glass-button:hover) .glass-button-shadow{-moz-filter:blur(clamp(2px, .0625em, 6px));-ms-filter:blur(clamp(2px, .0625em, 6px));filter:blur(clamp(2px,.0625em,6px));transition:filter var(--glass-button-hover-time) var(--glass-button-hover-ease)}.glass-button-wrap:has(.glass-button:hover) .glass-button-shadow:after{top:calc(var(--shadow-cuttoff-fix) - .875em);opacity:1}.glass-button-wrap:has(.glass-button:active){transform:rotateX(25deg)}.glass-button-wrap:has(.glass-button:active) .glass-button{box-shadow:inset 0 .125em .125em #0000000d,inset 0 -.125em .125em #ffffff80,0 .125em .125em -.125em #0003,inset 0 0 .1em .25em #fff3,0 .225em .05em #0000000d,0 .25em #ffffffbf,inset 0 .25em .05em #00000026}.glass-button-wrap:has(.glass-button:active) .glass-button-shadow{-moz-filter:blur(clamp(2px, .125em, 12px));-ms-filter:blur(clamp(2px, .125em, 12px));filter:blur(clamp(2px,.125em,12px))}.glass-button-wrap:has(.glass-button:active) .glass-button-shadow:after{top:calc(var(--shadow-cuttoff-fix) - .5em);opacity:.75}