.threed-button{--width: 220px;--height: 40px;--color: #a8b0cc;--color-accent: #b054ea;--color-bg: #16181e;--color-bg-2: #242832;--color-icon: #8c8f99;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;outline:none;border-radius:20px;cursor:pointer;position:relative;z-index:1;width:var(--width);height:var(--height);padding:0}.threed-button .bg{position:absolute;inset:0;border-radius:20px;background:var(--color-bg);box-shadow:0 0 0 1px #ffffff0d,0 2px 8px #0003;transition:transform .3s cubic-bezier(.175,.885,.32,1.275)}.threed-button .wrap{position:absolute;inset:0;border-radius:20px;overflow:hidden}.threed-button .splash{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:342px;height:208px;stroke:var(--color-accent);fill:none;z-index:-1;opacity:0;pointer-events:none}.threed-button:hover .bg{transform:scale(1.05)}.threed-button:active .bg{transform:scale(.95)}.threed-button .path{position:absolute;top:0;left:0;width:100%;height:100%;fill:none;stroke:var(--color-accent);stroke-width:2px;stroke-dasharray:480;stroke-dashoffset:480;filter:drop-shadow(0 0 4px var(--color-accent))}.threed-button:hover .path path{animation:path 1s ease forwards}.threed-button .content{display:flex;align-items:center;justify-content:center;height:100%;position:relative;z-index:2}.threed-button .char{display:inline-flex;color:var(--color);font-weight:600;letter-spacing:.5px;font-size:14px}.threed-button .char span{position:relative;display:inline-block}.threed-button .state-2{position:absolute;left:0;width:100%;text-align:center;justify-content:center;display:flex;opacity:0}.threed-button:hover .state-1 span{animation:charDisappear .4s ease forwards;animation-delay:calc(var(--i) * .03s)}.threed-button:hover .state-2{opacity:1}.threed-button:hover .state-2 span{animation:charAppear .4s ease forwards;animation-delay:calc(.1s + var(--i) * .03s)}.threed-button .icon{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:16px;height:16px;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease}.threed-button:hover .icon{opacity:1;transition-delay:.3s}.threed-button .icon div{width:6px;height:6px;border-top:2px solid var(--color-accent);border-right:2px solid var(--color-accent);transform:rotate(45deg)}