@property --angle-1{syntax:"<angle>";inherits:false;initial-value:-75deg}@property --angle-2{syntax:"<angle>";inherits:false;initial-value:-45deg}:root{--anim--hover-time:300ms;--anim--hover-ease:cubic-bezier(0.25,1,0.5,1)}.tt-button-area{display:flex;flex-direction:column;width:100%}.tt-button-wrap{background:transparent;border-radius:10px;pointer-events:none;position:relative;transition:all var(--anim--hover-time) var(--anim--hover-ease);width:fit-content;z-index:2}.tt-button-shadow{--shadow-cuttoff-fix:2em;filter:blur(clamp(2px,.125em,12px));-webkit-filter:blur(clamp(2px,.125em,12px));height:calc(100% + var(--shadow-cuttoff-fix));left:calc(0% - var(--shadow-cuttoff-fix)/2);overflow:visible;pointer-events:none;position:absolute;top:calc(0% - var(--shadow-cuttoff-fix)/2);width:calc(100% + var(--shadow-cuttoff-fix))}.tt-button-shadow:after{background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.1));border-radius:999vw;box-sizing:border-box;content:"";height:calc(100% - var(--shadow-cuttoff-fix) - .25em);inset:0;left:calc(var(--shadow-cuttoff-fix) - .875em);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;opacity:1;padding:.125em;position:absolute;top:calc(var(--shadow-cuttoff-fix) - .5em);transition:all var(--anim--hover-time) var(--anim--hover-ease);width:calc(100% - var(--shadow-cuttoff-fix) - .25em);z-index:0}.tt-button{--border-width:clamp(1px,0.0625em,4px);all:unset;cursor:pointer;display:inline-block;pointer-events:auto;z-index:3;-webkit-tap-highlight-color:rgba(0,0,0,0)}.tt-button,.tt-button>span{border-radius:999vw;position:relative}.tt-button>span{backdrop-filter:blur(clamp(1px,.125em,4px));-webkit-backdrop-filter:blur(clamp(1px,.125em,4px));background-image:linear-gradient(-75deg,var(--btn-color-1),var(--btn-color-2),var(--btn-color-1));background-repeat:no-repeat;background-size:100% 100%;box-shadow:inset 0 .125em .125em rgba(0,0,0,.05),inset 0 -.125em .125em hsla(0,0%,100%,.5),0 .25em .125em -.125em rgba(0,0,0,.2),inset 0 0 .1em .25em hsla(0,0%,100%,.2),0 0 0 0 #fff;color:#333;display:block;font-family:Asap Condensed,sans-serif;font-size:20px;font-weight:600;letter-spacing:0;padding-block:10px;padding-inline:30px;text-shadow:0 .25em .05em rgba(0,0,0,.1);transition:all var(--anim--hover-time) var(--anim--hover-ease);user-select:none}.tt-button:hover>span{backdrop-filter:blur(.01em);-webkit-backdrop-filter:blur(.01em);box-shadow:inset 0 .125em .125em rgba(0,0,0,.05),inset 0 -.125em .125em hsla(0,0%,100%,.5),0 .15em .05em -.1em rgba(0,0,0,.25),inset 0 0 .05em .1em hsla(0,0%,100%,.5),0 0 0 0 #fff}.tt-button:active>span{box-shadow:inset 0 .125em .125em rgba(0,0,0,.05),inset 0 -.125em .125em hsla(0,0%,100%,.5),0 .125em .125em -.125em rgba(0,0,0,.2),inset 0 0 .1em .25em hsla(0,0%,100%,.2),0 .225em .05em 0 rgba(0,0,0,.05),0 .25em 0 0 hsla(0,0%,100%,.75),inset 0 .25em .05em 0 rgba(0,0,0,.15);transform:rotateX(25deg) scale(1)}.tt-button>span:after{background:linear-gradient(var(--angle-2),hsla(0,0%,100%,0) 0,hsla(0,0%,100%,.5) 40% 50%,hsla(0,0%,100%,0) 55%);background-position:0 50%;background-repeat:no-repeat;background-size:200% 200%;border-radius:999vw;content:"";inset:0;mix-blend-mode:screen;overflow:clip;pointer-events:none;position:absolute;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)}.tt-button:hover>span:after{background-position:25% 50%}.tt-button:active>span:after{background-position:50% 15%;--angle-2:-15deg}@media (hover:none) and (pointer:coarse){.tt-button:active>span:after,.tt-button>span:after{--angle-2:-45deg}}.tt-button:after{background:conic-gradient(from var(--angle-1) at 50% 50%,rgba(0,0,0,.75),transparent 5% 40%,rgba(0,0,0,.75) 50%,transparent 60% 95%,rgba(0,0,0,.75)),linear-gradient(180deg,hsla(0,0%,100%,.5),hsla(0,0%,100%,.5));border-radius:999vw;box-shadow:inset 0 0 0 calc(var(--border-width)/2) hsla(0,0%,100%,.5);box-sizing:border-box;content:"";height:calc(100% + var(--border-width));inset:0;left:calc(0% - var(--border-width)/2);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;padding:var(--border-width);pointer-events:none;position:absolute;top:calc(0% - var(--border-width)/2);transition:all var(--anim--hover-time) var(--anim--hover-ease),--angle-1 .5s ease;width:calc(100% + var(--border-width));z-index:4}.tt-button:hover:after{--angle-1:-125deg}.tt-button:active:after{--angle-1:-75deg}@media (hover:none) and (pointer:coarse){.tt-button:active:after,.tt-button:after,.tt-button:hover:after{--angle-1:-75deg}}.tt-button:hover~.tt-button-shadow{filter:blur(clamp(2px,.0625em,6px));-webkit-filter:blur(clamp(2px,.0625em,6px));transition:filter var(--anim--hover-time) var(--anim--hover-ease)}.tt-button:hover~.tt-button-shadow:after{opacity:1;top:calc(var(--shadow-cuttoff-fix) - .875em)}.tt-button:active~.tt-button-shadow{filter:blur(clamp(2px,.125em,12px));-webkit-filter:blur(clamp(2px,.125em,12px))}.tt-button:active~.tt-button-shadow:after{opacity:.75;top:calc(var(--shadow-cuttoff-fix) - .5em)}