.btn-container{--btn-color:#84b067;--corner-color:#84b067;--corner-dist:24px;--corner-multiplier:1.5;--timing-function:cubic-bezier(0,0,0,2.5);--duration:.25s;justify-content:center;align-items:center;display:flex;position:relative}.btn{min-width:160px;min-height:calc(var(--corner-dist)*2);background:linear-gradient(#fff2,#0001),var(--btn-color);transition:transform var(--duration)var(--timing-function),filter var(--duration)var(--timing-function);-webkit-transition:transform var(--duration)var(--timing-function),-webkit-filter var(--duration)var(--timing-function);cursor:pointer;border:none;border-radius:16px;padding:.25em 1em;position:relative;box-shadow:inset 1px 1px 2px -1px #fff,0 2px 1px #00000010,0 4px 2px #00000010,0 8px 4px #00000010,0 16px 8px #00000010,0 32px 16px #00000010}.btn-drawer{color:#0009;background:linear-gradient(#fff2,#0001),var(--btn-color);opacity:0;min-height:32px;transition:transform calc(.5*var(--duration))ease,filter var(--duration)var(--timing-function),opacity calc(.5*var(--duration))ease;-webkit-transition:transform calc(.5*var(--duration))ease,-webkit-filter var(--duration)var(--timing-function),opacity calc(.5*var(--duration))ease;-webkit-filter:blur(2px);background-color:#fbff13;border:none;border-radius:16px;justify-content:center;padding:.25em 1em;font-family:Poppins,monospace;font-size:.8em;font-weight:600;display:flex;position:absolute}.transition-top{border-radius:12px 12px 0 0;align-items:start;top:0;left:0}.transition-bottom{border-radius:0 0 12px 12px;align-items:end;bottom:0;right:0}.btn-text{color:#5550;-webkit-text-fill-color:transparent;-webkit-filter:drop-shadow(0 1px #fff6)drop-shadow(0 -1px #0006);transition:transform var(--duration)var(--timing-function),filter var(--duration)var(--timing-function),color var(--duration)var(--timing-function);-webkit-transition:transform var(--duration)var(--timing-function),-webkit-filter var(--duration)var(--timing-function),color var(--duration)var(--timing-function);background-image:linear-gradient(#e1e1e1,#fff);-webkit-background-clip:text;background-clip:text;font-family:Syne,Poppins,Inter,sans-serif;font-size:1.25em;font-weight:600;display:inline-block}.btn-corner{fill:none;width:32px;stroke:var(--corner-color);transition:transform var(--duration)var(--timing-function),filter var(--duration)var(--timing-function);-webkit-transition:transform var(--duration)var(--timing-function),-webkit-filter var(--duration)var(--timing-function);position:absolute}.btn-corner:first-of-type{transform:translate(calc(-1*var(--corner-dist)),calc(-1*var(--corner-dist)))rotate(90deg);top:0;left:0}.btn-corner:nth-of-type(2){transform:translate(var(--corner-dist),calc(-1*var(--corner-dist)))rotate(180deg);top:0;right:0}.btn-corner:nth-of-type(3){transform:translate(var(--corner-dist),var(--corner-dist))rotate(-90deg);bottom:0;right:0}.btn-corner:nth-of-type(4){transform:translate(calc(-1*var(--corner-dist)),var(--corner-dist))rotate(0deg);bottom:0;left:0}:is(.btn-container:has(.btn:hover),.btn-container:has(.btn:focus-visible)) .btn{-webkit-filter:drop-shadow(0 16px 16px #0002);transform:scale(1.05)}:is(.btn-container:has(.btn:hover),.btn-container:has(.btn:focus-visible)) .transition-top{-webkit-filter:blur();opacity:1;animation:3s linear infinite hue-anim;transform:translateY(-24px)rotate(4deg)}:is(.btn-container:has(.btn:hover),.btn-container:has(.btn:focus-visible)) .transition-bottom{-webkit-filter:blur();opacity:1;animation:3s linear infinite hue-anim;transform:translateY(24px)rotate(4deg)}:is(.btn-container:has(.btn:hover),.btn-container:has(.btn:focus-visible)) .btn-text{-webkit-filter:drop-shadow(0 1px #fff6)drop-shadow(0 -1px #0006)drop-shadow(0 6px 2px #0003);color:#0008;transform:scale(1.05)}:is(.btn-container:has(.btn:hover),.btn-container:has(.btn:focus-visible)){--corner-color:#0004}:is(.btn-container:has(.btn:hover),.btn-container:has(.btn:focus-visible)) .btn-corner:first-of-type{transform:translate(calc(-1*var(--corner-multiplier)*var(--corner-dist)),calc(-1*var(--corner-multiplier)*var(--corner-dist)))rotate(90deg);-webkit-filter:drop-shadow(-10px 10px 1px var(--corner-color))drop-shadow(-20px 20px 2px var(--corner-color))}:is(.btn-container:has(.btn:hover),.btn-container:has(.btn:focus-visible)) .btn-corner:nth-of-type(2){transform:translate(calc(var(--corner-multiplier)*var(--corner-dist)),calc(-1*var(--corner-multiplier)*var(--corner-dist)))rotate(180deg);-webkit-filter:drop-shadow(-10px 10px 1px var(--corner-color))drop-shadow(-20px 20px 2px var(--corner-color))}@-moz-document url-prefix(){:is(.btn-container:has(.btn:hover),.btn-container:has(.btn:focus-visible)) .btn-corner:nth-of-type(2){filter:drop-shadow(10px -10px 1px var(--corner-color))drop-shadow(20px -20px 2px var(--corner-color))}}:is(.btn-container:has(.btn:hover),.btn-container:has(.btn:focus-visible)) .btn-corner:nth-of-type(3){transform:translate(calc(var(--corner-multiplier)*var(--corner-dist)),calc(var(--corner-multiplier)*var(--corner-dist)))rotate(-90deg);-webkit-filter:drop-shadow(-10px 10px 1px var(--corner-color))drop-shadow(-20px 20px 2px var(--corner-color))}:is(.btn-container:has(.btn:hover),.btn-container:has(.btn:focus-visible)) .btn-corner:nth-of-type(4){transform:translate(calc(-1*var(--corner-multiplier)*var(--corner-dist)),calc(var(--corner-multiplier)*var(--corner-dist)))rotate(0deg);-webkit-filter:drop-shadow(-10px 10px 1px var(--corner-color))drop-shadow(-20px 20px 2px var(--corner-color))}.btn-container:has(.btn:active) .btn{-webkit-filter:drop-shadow(0 10px 4px #0002);transform:scale(.95)}.btn-container:has(.btn:active) .transition-top,.btn-container:has(.btn:active) .transition-bottom{transform:translateY(0)scale(.5)}.btn-container:has(.btn:active) .btn-text{-webkit-filter:drop-shadow(0 1px #fff6)drop-shadow(0 -1px #0006)drop-shadow(0 6px 2px #0003);color:#000a;transform:scale(1)}.btn-container:has(.btn:active){--corner-color:#0005;--corner-multiplier:.95}.btn-container:has(.btn:active) .btn-corner:first-of-type{transform:translate(calc(-1*var(--corner-multiplier)*var(--corner-dist)),calc(-1*var(--corner-multiplier)*var(--corner-dist)))rotate(90deg);-webkit-filter:drop-shadow(-10px 10px 2px var(--corner-color))drop-shadow(-20px 20px 3px var(--corner-color))}.btn-container:has(.btn:active) .btn-corner:nth-of-type(2){transform:translate(calc(var(--corner-multiplier)*var(--corner-dist)),calc(-1*var(--corner-multiplier)*var(--corner-dist)))rotate(180deg);-webkit-filter:drop-shadow(-10px 10px 2px var(--corner-color))drop-shadow(-20px 20px 3px var(--corner-color))}@-moz-document url-prefix(){.btn-container:has(.btn:active) .btn-corner:nth-of-type(2){filter:drop-shadow(10px -10px 2px var(--corner-color))drop-shadow(20px -20px 3px var(--corner-color))}}.btn-container:has(.btn:active) .btn-corner:nth-of-type(3){transform:translate(calc(var(--corner-multiplier)*var(--corner-dist)),calc(var(--corner-multiplier)*var(--corner-dist)))rotate(-90deg);-webkit-filter:drop-shadow(-10px 10px 2px var(--corner-color))drop-shadow(-20px 20px 3px var(--corner-color))}.btn-container:has(.btn:active) .btn-corner:nth-of-type(4){transform:translate(calc(-1*var(--corner-multiplier)*var(--corner-dist)),calc(var(--corner-multiplier)*var(--corner-dist)))rotate(0deg);-webkit-filter:drop-shadow(-10px 10px 2px var(--corner-color))drop-shadow(-20px 20px 3px var(--corner-color))}@keyframes hue-anim{0%,to{-webkit-filter:hue-rotate()}50%{-webkit-filter:hue-rotate(-70deg)}}