@property --angle-1{syntax:"<angle>";inherits:false;initial-value:-75deg}@property --angle-2{syntax:"<angle>";inherits:false;initial-value:-45deg}:root{--global--size:clamp(2rem,4vw,5rem);--anim--hover-time:400ms;--anim--hover-ease:cubic-bezier(0.25,1,0.5,1);--bg-color:#000;--text-color:#f5f5f5;--highlight-color:rgba(255,255,255,0.15)}body{background-color:var(--bg-color);color:var(--text-color);font-family:Inter,sans-serif;margin:0;padding:0}.button-wrap{position:relative;z-index:2;border-radius:999vw;background:transparent;pointer-events:none;transition:all var(--anim--hover-time) var(--anim--hover-ease)}.button-shadow{--shadow-cuttoff-fix:2em;position:absolute;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));overflow:visible;pointer-events:none}.button-shadow:after{content:"";position:absolute;z-index:0;inset:0;border-radius:999vw;background:linear-gradient(180deg,var(--highlight-color),rgba(255,255,255,.02));width:calc(100% - var(--shadow-cuttoff-fix) - .25em);height:calc(100% - var(--shadow-cuttoff-fix) - .25em);top:calc(var(--shadow-cuttoff-fix) - .5em);left:calc(var(--shadow-cuttoff-fix) - .875em);padding:.125em;box-sizing:border-box;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;transition:all var(--anim--hover-time) var(--anim--hover-ease);overflow:visible;opacity:1}.glass-button{--border-width:clamp(1px,0.0625em,4px);all:unset;cursor:pointer;position:relative;-webkit-tap-highlight-color:rgba(0,0,0,0);pointer-events:auto;z-index:3;background:linear-gradient(-75deg,rgba(255,255,255,.05),rgba(255,255,255,.1),rgba(255,255,255,.05));border-radius:999vw;box-shadow:inset 0 .125em .125em rgba(255,255,255,.05),inset 0 -.125em .125em rgba(0,0,0,.8),0 .25em .125em -.125em rgba(0,0,0,1),inset 0 0 .1em .25em rgba(255,255,255,.15);backdrop-filter:blur(clamp(1px,.125em,4px));transition:all var(--anim--hover-time) var(--anim--hover-ease)}.glass-button:hover{transform:scale(.975);backdrop-filter:blur(.01em);box-shadow:inset 0 .125em .125em rgba(255,255,255,.05),inset 0 -.125em .125em rgba(0,0,0,.8),0 .15em .05em -.1em rgba(0,0,0,.9),inset 0 0 .05em .1em rgba(255,255,255,.2)}.glass-button span{position:relative;display:flex;-webkit-user-select:none;-moz-user-select:none;user-select:none;letter-spacing:-.05em;font-weight:500;font-size:22px;color:var(--text-color);text-shadow:0 .25em .05em rgba(0,0,0,.9);transition:all var(--anim--hover-time) var(--anim--hover-ease);padding-inline:1.5em;padding-block:.875em}.glass-button:hover span{text-shadow:.025em .025em .025em rgba(0,0,0,1)}.glass-button span:after{content:"";display:block;position:absolute;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;border-radius:999vw;overflow:clip;background:linear-gradient(var(--angle-2),rgba(255,255,255,0) 0,rgba(255,255,255,.25) 40% 50%,rgba(255,255,255,0) 55%);z-index:3;mix-blend-mode:screen;pointer-events:none;background-size:200% 200%;background-position:0 50%;background-repeat:no-repeat;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)}.glass-button:hover span:after{background-position:25% 50%}.glass-button:active span:after{background-position:50% 15%;--angle-2:-15deg}.glass-button:after{content:"";position:absolute;z-index:1;inset:0;border-radius:999vw;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);padding:var(--border-width);box-sizing:border-box;background:conic-gradient(from var(--angle-1) at 50% 50%,rgba(255,255,255,.4),rgba(255,255,255,0) 5% 40%,rgba(255,255,255,.4) 50%,rgba(255,255,255,0) 60% 95%,rgba(255,255,255,.4)),linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.9));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;transition:all var(--anim--hover-time) var(--anim--hover-ease),--angle-1 .5s ease;box-shadow:inset 0 0 0 calc(var(--border-width) / 2) rgba(255,255,255,.1)}.glass-button:hover:after{--angle-1:-125deg}.glass-button:active:after{--angle-1:-75deg}.button-wrap:has(.glass-button:hover) .button-shadow{filter:blur(clamp(2px,.0625em,6px));transition:filter var(--anim--hover-time) var(--anim--hover-ease)}.button-wrap:has(.glass-button:hover) .button-shadow:after{top:calc(var(--shadow-cuttoff-fix) - .875em);opacity:1}.button-wrap:has(.glass-button:active){transform:rotateX(25deg)}.button-wrap:has(.glass-button:active) .glass-button{box-shadow:inset 0 .125em .125em rgba(255,255,255,.05),inset 0 -.125em .125em rgba(0,0,0,.8),0 .125em .125em -.125em rgba(0,0,0,1),inset 0 0 .1em .25em rgba(255,255,255,.2),0 .225em .05em 0 rgba(255,255,255,.1),0 .25em 0 0 rgba(0,0,0,1),inset 0 .25em .05em 0 rgba(255,255,255,.05)}.button-wrap:has(.glass-button:active) .button-shadow{filter:blur(clamp(2px,.125em,12px))}.button-wrap:has(.glass-button:active) .button-shadow:after{top:calc(var(--shadow-cuttoff-fix) - .5em);opacity:.75}.button-wrap:has(.glass-button:active) span{text-shadow:.025em .25em .05em rgba(0,0,0,1)}.bttn{position:relative;display:inline-flex;justify-content:center;align-items:center;height:auto;gap:10px;padding:16px 32px;transition:all .15s ease-in-out;border-radius:20px;z-index:1;backdrop-filter:blur(6px);font-weight:600;color:#5b596c;overflow:hidden}.bttn,.bttn *{-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer}.bttn__label{position:relative;z-index:3;background:linear-gradient(180deg,#FFF,rgba(255,255,255,.6));color:transparent;-webkit-background-clip:text;background-clip:text;font-size:14px}.bttn--glass{background:radial-gradient(214.46% 115.1% at 51.74% 16.04%,rgba(55,70,74,.6) 0,rgba(116,128,150,.1) 58.65%,rgba(214,218,227,.05) 100%);box-shadow:-4px -4px 24px 0 rgba(149,159,165,0),inset 0 .7px 0 0 rgba(255,255,255,.6),inset 0 2px 2px 0 rgba(81,95,105,.3),inset -1px 0 0 0 rgba(0,0,0,.45),inset 1px 0 0 0 rgba(0,0,0,.45),inset 0 -.7px 0 0 rgba(255,255,255,.45),inset 0 2px 3px 1px rgba(255,255,255,.2),inset 0 -4px 8px 0 rgba(255,255,255,.25),0 4px 12px 0 rgba(34,45,52,.29)}.bttn--icon-only,.bttn--icon-only .bttn__container{width:56px;padding:0}.bttn--glass:before{content:"";position:absolute;transition:all .15s ease-in-out;bottom:0;left:0;right:0;margin:auto;width:70%;height:14px;background-color:#ffffff;border-radius:100%;filter:blur(10px);z-index:2;opacity:.3;transform-origin:bottom}