.radio-wrapper{width:84px;height:38px;margin:3px;display:block;position:relative}.btn{--primary:#ff184c;--shadow-primary:#fded00;--color:white;--font-size:9px;--shadow-primary-hue:180;--shadow-secondary-hue:60;--shadow-secondary:hsl(var(--shadow-secondary-hue), 90%, 60%);--clip:polygon(11% 0, 95% 0, 100% 25%, 90% 90%, 95% 90%, 85% 90%, 85% 100%, 7% 100%, 0 80%);--border:5px;--shimmy-distance:5;--clip-one:polygon(0 2%, 100% 2%, 100% 95%, 95% 95%, 95% 90%, 85% 90%, 85% 95%, 8% 95%, 0 70%);--clip-two:polygon(0 78%, 100% 78%, 100% 100%, 95% 100%, 95% 90%, 85% 90%, 85% 100%, 8% 100%, 0 78%);--clip-three:polygon(0 44%, 100% 44%, 100% 54%, 95% 54%, 95% 54%, 85% 54%, 85% 54%, 8% 54%, 0 54%);--clip-four:polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);--clip-five:polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);--clip-six:polygon(0 40%, 100% 40%, 100% 85%, 95% 85%, 95% 85%, 85% 85%, 85% 85%, 8% 85%, 0 70%);--clip-seven:polygon(0 63%, 100% 63%, 100% 80%, 95% 80%, 95% 80%, 85% 80%, 85% 80%, 8% 80%, 0 70%);color:var(--color);text-transform:uppercase;font-size:var(--font-size);letter-spacing:3px;text-align:center;width:100%;height:100%;font-weight:900;line-height:38px;transition:background .2s,all .3s;position:relative}.radio-wrapper.is-active .btn{--primary:#6c3697;--shadow-primary:#00e572}.radio-wrapper:hover .btn{--primary:#006042;--font-size:11px}.btn:after,.btn:before{content:"";clip-path:var(--clip);z-index:-1;position:absolute;inset:0}.btn:before{background:var(--shadow-primary);transform:translate(var(--border), 0)}.btn:after{background:var(--primary)}.btn__tag{letter-spacing:1px;color:#000;font-weight:400;line-height:1;font-size:var(--label-size);padding:1px 4px;position:absolute;bottom:-5%;right:5%}.btn__glitch{top:calc(var(--border) * -1);left:calc(var(--border) * -1);right:calc(var(--border) * -1);bottom:calc(var(--border) * -1);background:var(--shadow-primary);text-shadow:2px 2px var(--shadow-primary), -2px -2px var(--shadow-secondary);clip-path:var(--clip);animation:2s infinite glitch;display:none;position:absolute}.radio-wrapper:hover .btn .btn__glitch{display:block}.radio-wrapper.is-active .btn .btn__glitch{animation:5s infinite glitch;display:block}.btn__glitch:before{content:"";top:calc(var(--border) * 1);right:calc(var(--border) * 1);bottom:calc(var(--border) * 1);left:calc(var(--border) * 1);clip-path:var(--clip);background:var(--primary);z-index:-1;position:absolute}@keyframes glitch{0%{clip-path:var(--clip-one)}2%,8%{clip-path:var(--clip-two);transform:translate(calc(var(--shimmy-distance) * -1%), 0)}6%{clip-path:var(--clip-two);transform:translate(calc(var(--shimmy-distance) * 1%), 0)}9%{clip-path:var(--clip-two);transform:translate(0)}10%{clip-path:var(--clip-three);transform:translate(calc(var(--shimmy-distance) * 1%), 0)}13%{clip-path:var(--clip-three);transform:translate(0)}14%,21%{clip-path:var(--clip-four);transform:translate(calc(var(--shimmy-distance) * 1%), 0)}25%{clip-path:var(--clip-five);transform:translate(calc(var(--shimmy-distance) * 1%), 0)}30%{clip-path:var(--clip-five);transform:translate(calc(var(--shimmy-distance) * -1%), 0)}35%,45%{clip-path:var(--clip-six);transform:translate(calc(var(--shimmy-distance) * -1%))}40%{clip-path:var(--clip-six);transform:translate(calc(var(--shimmy-distance) * 1%))}50%{clip-path:var(--clip-six);transform:translate(0)}55%{clip-path:var(--clip-seven);transform:translate(calc(var(--shimmy-distance) * 1%), 0)}60%{clip-path:var(--clip-seven);transform:translate(0)}31%,61%,to{clip-path:var(--clip-four)}}.number{background:var(--shadow-primary);color:#323232;letter-spacing:1px;width:15px;height:6px;font-size:5.5px;font-weight:700;line-height:6.2px;position:absolute;top:0;left:81%}.space-btn{cursor:pointer;-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);background-image:linear-gradient(#212121,#212121),linear-gradient(137.48deg,#ffdb3b 10%,#fe53bb 45%,#8f51ea 67%,#04f 87%);background-size:300% 300%;background-origin:border-box;background-clip:content-box,border-box;border:4px double #0000;border-radius:5rem;justify-content:center;align-items:center;width:auto;min-width:13rem;height:3rem;padding:0 24px;text-decoration:none;transition:all .5s;animation:5s infinite gradient_301;display:flex;position:relative;overflow:hidden}.space-btn-container-stars{z-index:-1;-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);border-radius:5rem;width:100%;height:100%;transition:all .5s;position:absolute;overflow:hidden}.space-btn strong{z-index:2;letter-spacing:2px;color:#fff;text-shadow:0 0 4px #fff;text-transform:uppercase;align-items:center;gap:8px;font-family:inherit;font-size:14px;font-weight:700;display:flex}.space-btn-glow{width:12rem;display:flex;position:absolute}.space-btn-circle{filter:blur(2rem);z-index:-1;width:100%;height:30px;animation:4s infinite pulse_3011}.space-btn-circle:first-of-type{background:#fe53baa2}.space-btn-circle:nth-of-type(2){background:#8e51eab4}.space-btn:hover .space-btn-container-stars{z-index:1;background-color:#212121}.space-btn:hover{transform:scale(1.1)}.space-btn:active{background-origin:border-box;background-clip:content-box,border-box;border:4px double #fe53bb;animation:none}.space-btn:active .space-btn-circle{background:#fe53bb}.space-btn-stars{background:0 0;width:200rem;height:200rem;position:relative}.space-btn-stars:after{content:"";background-image:radial-gradient(#fff 1px,#0000 1%);background-size:50px 50px;width:100%;height:100%;animation:90s linear infinite animStarRotate;position:absolute;top:-10rem;left:-100rem}.space-btn-stars:before{content:"";opacity:.5;background-image:radial-gradient(#fff 1px,#0000 1%);background-size:50px 50px;width:170%;height:500%;animation:60s linear infinite animStar;position:absolute;top:0;left:-50%}@keyframes animStar{0%{transform:translateY(0)}to{transform:translateY(-135rem)}}@keyframes animStarRotate{0%{transform:rotate(360deg)}to{transform:rotate(0)}}@keyframes gradient_301{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}@keyframes pulse_3011{0%{transform:scale(.75);box-shadow:0 0 #000000b3}70%{transform:scale(1);box-shadow:0 0 0 10px #0000}to{transform:scale(.75);box-shadow:0 0 #0000}}.button-box{width:12rem;height:5rem;display:flex;position:relative}.button-box .button{cursor:pointer;opacity:.85;border:3px solid #311703;border-radius:5px;justify-content:center;align-items:center;width:3.2rem;height:3.2rem;transition:all .3s;display:flex;position:absolute;top:50%;left:50%;box-shadow:inset 0 0 4px #0006}.button-box .button .icon{opacity:.7;width:24px;height:24px;transition:all .25s}.button-box .button:nth-child(4){z-index:30;background:coral;transform:translate(-50%,-50%)rotate(90deg)}.button-box .button:nth-child(5){z-index:40;background:gold;transform:translate(-50%,-50%)rotate(-115deg)}.button-box .button:nth-child(6){z-index:50;background:#019b98;transform:translate(-50%,-50%)rotate(-45deg)}.button-box .button:nth-child(6) .icon{animation:2.2s linear infinite active}.button-box .touch{z-index:60;cursor:pointer;flex:1;height:100%;position:relative}.button-box .touch.left:hover~.button:nth-child(4){opacity:1;transform:translate(-170%,-50%)rotate(-90deg)scale(1.05)}.button-box .touch.left:hover~.button:nth-child(4) .icon{opacity:.9;width:25px}.button-box .touch.left:active~.button:nth-child(4){transform:translate(-170%,-50%)rotate(-90deg)scale(.9)}.button-box .touch.right:hover~.button:nth-child(5){opacity:1;transform:translate(70%,-50%)rotate(90deg)scale(1.05)}.button-box .touch.right:hover~.button:nth-child(5) .icon{opacity:.9;width:25px}.button-box .touch.right:active~.button:nth-child(5){transform:translate(70%,-50%)rotate(90deg)scale(.9)}.button-box .touch.middle:hover~.button:nth-child(6){opacity:1;transform:translate(-50%,-50%)rotate(0)scale(1.05)}.button-box .touch.middle:hover~.button:nth-child(6) .icon{opacity:.9;width:25px}.button-box .touch.middle:active~.button:nth-child(6){transform:translate(-50%,-50%)rotate(0)scale(.9)}.button-box:hover .button:nth-child(4){transform:translate(-170%,-50%)rotate(-90deg)}.button-box:hover .button:nth-child(5){transform:translate(70%,-50%)rotate(90deg)}.button-box:hover .button:nth-child(6){transform:translate(-50%,-50%)rotate(0)}.button-box:hover .button:nth-child(6) .icon{animation:4s linear infinite active}@keyframes active{to{transform:rotate(360deg)}}