.btn-wrapper{display:inline-block;position:relative}.btn{--border-radius:24px;--padding:4px;--transition:.4s;--button-color:#101010;--highlight-color-hue:210deg;-webkit-user-select:none;user-select:none;background-color:var(--button-color);border-radius:var(--border-radius);cursor:pointer;transition:box-shadow var(--transition), border var(--transition), background-color var(--transition);border:1px solid #fff2;justify-content:center;padding:.4em .4em .4em .8em;font-family:Poppins,Inter,Segoe UI,sans-serif;font-size:14px;font-weight:600;display:flex;box-shadow:inset 0 1px 1px #fff3,inset 0 2px 2px #ffffff26,inset 0 4px 4px #ffffff1a,inset 0 8px 8px #ffffff0d,inset 0 16px 16px #ffffff0d,0 -1px 1px #00000005,0 -2px 2px #00000008,0 -4px 4px #0000000d,0 -8px 8px #0000000f,0 -16px 16px #00000014}.btn:before{content:"";top:calc(0px - var(--padding));left:calc(0px - var(--padding));width:calc(100% + var(--padding) * 2);height:calc(100% + var(--padding) * 2);border-radius:calc(var(--border-radius) + var(--padding));pointer-events:none;z-index:-1;transition:box-shadow var(--transition), filter var(--transition);background-image:linear-gradient(#000a,#0004);position:absolute;box-shadow:inset 0 -8px 8px -6px #0000,inset 0 -16px 16px -8px #0000,1px 1px 1px #fff2,2px 2px 2px #fff1,-1px -1px 1px #0002,-2px -2px 2px #0001}.btn:after{content:"";border-radius:inherit;pointer-events:none;background-image:linear-gradient(0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent);opacity:0;width:100%;height:100%;transition:opacity var(--transition), filter var(--transition);background-position:0 0;position:absolute;top:0;left:0}.btn-svg{flex-shrink:0;width:18px;height:18px;margin-right:10px}.btn-letter{color:#fff5;transition:color var(--transition), text-shadow var(--transition), opacity var(--transition);animation:2s ease-in-out infinite letter-anim;display:inline-block;position:relative}.btn-letter.space{width:2px;margin:0 .1em}@keyframes letter-anim{50%{text-shadow:0 0 3px #fff8;color:#fff}}.btn-svg{fill:#e8e8e8;filter:drop-shadow(0 0 2px #fff9);height:24px;transition:fill var(--transition), filter var(--transition), opacity var(--transition);flex-grow:1;margin-right:.5rem;animation:2s linear .5s infinite flicker}@keyframes flicker{50%{opacity:.3}}.txt-wrapper{align-items:center;min-width:6.4em;display:flex;position:relative}.txt-1,.txt-2{word-spacing:-1em;position:absolute}.txt-1{animation:1s ease-in-out forwards appear-anim}.txt-2{opacity:0}@keyframes appear-anim{0%{opacity:0}to{opacity:1}}.btn:focus .txt-1{animation:.3s ease-in-out 1s forwards opacity-anim}.btn:focus .txt-2{animation:.3s ease-in-out 1s reverse forwards opacity-anim}@keyframes opacity-anim{0%{opacity:1}to{opacity:0}}.btn:focus .btn-letter{animation:1s ease-in-out forwards focused-letter-anim,1.2s ease-in-out 1s infinite letter-anim}@keyframes focused-letter-anim{0%,to{filter:blur()}50%{filter:blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%));transform:scale(2)}}.btn:focus .btn-svg{animation-duration:1.2s;animation-delay:.2s}.btn:focus:before{box-shadow:0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001}.btn:focus:after{opacity:.6;filter:brightness();-webkit-mask-image:linear-gradient(#0000,#fff);mask-image:linear-gradient(#0000,#fff)}.btn-letter:first-child,.btn:focus .btn-letter:first-child{animation-delay:0s}.btn-letter:nth-child(2),.btn:focus .btn-letter:nth-child(2){animation-delay:80ms}.btn-letter:nth-child(3),.btn:focus .btn-letter:nth-child(3){animation-delay:.16s}.btn-letter:nth-child(4),.btn:focus .btn-letter:nth-child(4){animation-delay:.24s}.btn-letter:nth-child(5),.btn:focus .btn-letter:nth-child(5){animation-delay:.32s}.btn-letter:nth-child(6),.btn:focus .btn-letter:nth-child(6){animation-delay:.4s}.btn-letter:nth-child(7),.btn:focus .btn-letter:nth-child(7){animation-delay:.48s}.btn-letter:nth-child(8),.btn:focus .btn-letter:nth-child(8){animation-delay:.56s}.btn-letter:nth-child(9),.btn:focus .btn-letter:nth-child(9){animation-delay:.64s}.btn-letter:nth-child(10),.btn:focus .btn-letter:nth-child(10){animation-delay:.72s}.btn-letter:nth-child(11),.btn:focus .btn-letter:nth-child(11){animation-delay:.8s}.btn-letter:nth-child(12),.btn:focus .btn-letter:nth-child(12){animation-delay:.88s}.btn-letter:nth-child(13),.btn:focus .btn-letter:nth-child(13){animation-delay:.96s}.btn:active{border:solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%);background-color:hsla(var(--highlight-color-hue), 50%, 20%, .5)}.btn:active:before{box-shadow:0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001}.btn:active:after{opacity:1;filter:brightness(200%);-webkit-mask-image:linear-gradient(#0000,#fff);mask-image:linear-gradient(#0000,#fff)}.btn:active .btn-letter{text-shadow:0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%);animation:none}.btn.playing{border:solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%);background-color:hsla(var(--highlight-color-hue), 50%, 20%, .5);animation:1.5s ease-in-out infinite alternate pulse}.btn.playing:before{box-shadow:0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001}.btn.playing:after{opacity:1;filter:brightness(200%);-webkit-mask-image:linear-gradient(#0000,#fff);mask-image:linear-gradient(#0000,#fff)}.btn.playing .btn-letter{text-shadow:0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%);animation:.5s ease-in-out infinite alternate bounce}.btn.playing .btn-svg{fill:#fff;filter:drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009);animation:.8s ease-in-out infinite beat}@keyframes pulse{0%{transform:scale(1)}to{transform:scale(1.02)}}@keyframes bounce{0%{transform:translateY(0)}to{transform:translateY(-2px)}}@keyframes beat{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.btn:hover{border:solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%)}.btn:hover:before{box-shadow:0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001}.btn:hover:after{opacity:1;-webkit-mask-image:linear-gradient(#0000,#fff);mask-image:linear-gradient(#0000,#fff)}.btn:hover .btn-svg{fill:#fff;filter:drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009);animation:none}