@property --glass-angle-1{syntax:"<angle>";inherits:false;initial-value:-75deg}@property --glass-angle-2{syntax:"<angle>";inherits:false;initial-value:-45deg}.glass-btn{transition:transform .4s cubic-bezier(.25,1,.5,1),filter .4s cubic-bezier(.25,1,.5,1)}.glass-btn-surface{background:linear-gradient(-75deg,#ffffff0d,#fff3,#ffffff0d);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 0 0 #fff;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);transition:transform .4s cubic-bezier(.25,1,.5,1),box-shadow .4s cubic-bezier(.25,1,.5,1),backdrop-filter .4s cubic-bezier(.25,1,.5,1),-webkit-backdrop-filter .4s cubic-bezier(.25,1,.5,1)}.glass-btn-border{inset:0;top:calc(clamp(1px, .0625em, 4px) / -2);left:calc(clamp(1px, .0625em, 4px) / -2);width:calc(100% + clamp(1px, .0625em, 4px));height:calc(100% + clamp(1px, .0625em, 4px));padding:clamp(1px,.0625em,4px);background:conic-gradient(from var(--glass-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(clamp(1px, .0625em, 4px) / 2) #ffffff80;-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-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;transition:transform .4s cubic-bezier(.25,1,.5,1),--glass-angle-1 .5s}.glass-btn-content{text-shadow:0 .05em .05em #0000000d;transition:text-shadow .4s cubic-bezier(.25,1,.5,1)}.glass-btn-content:after{content:"";z-index:1;position:absolute;display:block;top:calc(clamp(1px, .0625em, 4px) / 2);left:calc(clamp(1px, .0625em, 4px) / 2);width:calc(100% - clamp(1px, .0625em, 4px));height:calc(100% - clamp(1px, .0625em, 4px));background:linear-gradient(var(--glass-angle-2),#fff0 0,#ffffff80 40% 50%,#fff0 55%);mix-blend-mode:screen;pointer-events:none;background-position:0;background-repeat:no-repeat;background-size:200% 200%;border-radius:16px;transition:background-position .5s cubic-bezier(.25,1,.5,1),--glass-angle-2 .5s cubic-bezier(.25,1,.5,1)}.glass-btn-shadow{top:calc(0% - 1em);left:calc(0% - 1em);width:calc(100% + 2em);height:calc(100% + 2em);filter:blur(clamp(2px,.125em,12px));transition:filter .4s cubic-bezier(.25,1,.5,1)}.glass-btn-shadow:after{content:"";position:absolute;inset:0;top:calc(2em - .5em);left:calc(2em - .875em);width:calc(100% - 2em - .25em);height:calc(100% - 2em - .25em);box-sizing:border-box;background:linear-gradient(180deg,#0003,#0000001a);opacity:1;border-radius:16px;padding:.125em;-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-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;transition:top .4s cubic-bezier(.25,1,.5,1),opacity .4s cubic-bezier(.25,1,.5,1)}.glass-btn:hover .glass-btn-surface{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 0 0 #fff,0 0 12px 0 rgb(25 25 35/.15);backdrop-filter:blur(.01em);-webkit-backdrop-filter:blur(.01em)}.glass-btn:hover .glass-btn-border{--glass-angle-1:-125deg}.glass-btn:hover .glass-btn-content{text-shadow:.025em .025em .025em #0000000f}.glass-btn:hover .glass-btn-content:after{background-position:25%}.glass-btn:hover .glass-btn-shadow{filter:blur(clamp(2px,.0625em,6px))}.glass-btn:hover .glass-btn-shadow:after{top:calc(2em - .875em)}.glass-btn:active .glass-btn-surface{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 0 #0000000d,0 .25em 0 0 #ffffffbf,inset 0 .25em .05em 0 #00000026}.glass-btn:active .glass-btn-content{text-shadow:.025em .1em .05em #00000014}.glass-btn:active .glass-btn-content:after{--glass-angle-2:-15deg;background-position:50% 15%}.glass-btn:has(.glass-btn-surface:active) .glass-btn-shadow{filter:blur(clamp(2px,.125em,12px))}.glass-btn:has(.glass-btn-surface:active) .glass-btn-shadow:after{top:calc(2em - .5em);opacity:.75}.glass-btn-surface:focus-visible{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 0 0 #fff,0 0 0 3px #1919191f;outline:none}.glass-btn:focus-within .glass-btn-border{--glass-angle-1:-125deg}.glass-btn:focus-within .glass-btn-content:after{background-position:25%}@media (hover:none) and (pointer:coarse){.glass-btn-content:after,.glass-btn:active .glass-btn-content:after{--glass-angle-2:-45deg;background-position:0}.glass-btn-border,.glass-btn:active .glass-btn-border,.glass-btn:hover .glass-btn-border{--glass-angle-1:-75deg}}.glass-btn-surface[aria-disabled=true]{cursor:default;pointer-events:none;opacity:.72}