*,:after,:before{box-sizing:border-box}:root{--transition:0.25s;--spark:1.8s}.sparkle-btn{height:48px;padding:12px 24px;--cut:0.1em;--active:0;--bg:radial-gradient(40% 50% at center 100%,hsl(270 calc(var(--active) * 97%) 72%/var(--active)),transparent),radial-gradient(80% 100% at center 120%,hsl(260 calc(var(--active) * 97%) 70%/var(--active)),transparent),hsl(260 calc(var(--active) * 97%) calc((var(--active) * 44%) + 12%));background:var(--Linear,linear-gradient(90deg,#425cc7 0,#00269a 100%));font-size:20px;border:0;cursor:pointer;display:flex;align-items:center;gap:.25em;white-space:nowrap;border-radius:100px;position:relative;transition:all .3s}.sparkle-btn:hover{scale:1.2;box-shadow:0 0 60px rgba(0,38,154,.5)}.sparkle-btn:hover .backdrop{background:#00269a}.sparkle-btn:active{scale:1}.sparkle-btn:is(:hover,:focus-visible) path{animation-name:bounce;animation-iteration-count:infinite;animation-duration:1s}.sparkle-btn:is(:hover,:focus-visible)~:is(.bodydrop,.particle-pen){--active:1;--play-state:running}.sparkle-btn:is(:hover,:focus-visible){--active:1;--play-state:running}.sparkle-btn svg{inline-size:1.25em;translate:-25% -5%}svg{overflow:visible!important}.sparkle path{color:#fff;transform-box:fill-box;transform-origin:center;fill:currentColor;stroke:currentColor;animation-delay:calc(var(--transition)*1.5 + var(--delay)*1s);animation-duration:.6s;transition:color var(--transition)}.sparkle path#_three,.sparkle path#_two{opacity:.6}@keyframes bounce{35%,65%{scale:var(--scale);opacity:1}}.sparkle path:first-of-type{--scale:0.5;--delay:0.1;--base:40%}.sparkle path:nth-of-type(2){--scale:1.5;--delay:0.2;--base:20%}.sparkle path:nth-of-type(3){--scale:2.5;--delay:0.35;--base:30%}.spark{position:absolute;inset:0;border-radius:100px;rotate:0deg;overflow:hidden;-webkit-mask:linear-gradient(#fff,transparent 50%);mask:linear-gradient(#fff,transparent 50%);animation:flip calc(var(--spark)*2) infinite steps(2)}@keyframes flip{to{rotate:1turn}}.spark:before{content:"";position:absolute;width:200%;aspect-ratio:1;top:0;left:50%;z-index:-1;translate:-50% -15%;rotate:0;transform:rotate(-90deg);opacity:calc((var(--active)) + 1);background:conic-gradient(from 0deg,transparent 0 320deg,#fff 1turn);transition:opacity var(--transition);animation:rotate var(--spark) linear infinite both}.spark:after{content:""}.backdrop,.spark:after{position:absolute;inset:var(--cut);border-radius:100px}.backdrop{background:var(--Linear,linear-gradient(90deg,#425cc7 0,#00269a 100%));transition:all 1s}@keyframes rotate{to{transform:rotate(90deg)}}@supports(selector(:has(:is(+ *)))){body:has(.sparkle-btn:is(:hover,:focus-visible)){--active:1;--play-state:running}.bodydrop{display:none}}.bodydrop{background:hsl(260,calc(var(--active) * 97%),6%);position:fixed;inset:0;z-index:-1}.sparkle-button{position:relative}.particle-pen{width:200%;top:50%;left:50%;translate:-50% -50%;-webkit-mask:radial-gradient(#fff,transparent 65%);opacity:var(--active,0);transition:opacity var(--transition)}.particle,.particle-pen{position:absolute;aspect-ratio:1;z-index:-1}.particle{fill:#fff;width:calc(var(--size, .25)*1rem);top:calc(var(--y)*1%);left:calc(var(--x)*1%);opacity:var(--alpha,1);animation:float-out calc(var(--duration, 1)*1s) calc(var(--delay)*-1s) infinite linear;transform-origin:var(--origin-x,1000%) var(--origin-y,1000%);animation-play-state:var(--play-state,paused)}.particle path{fill:#e6e6e6;stroke:none}.particle:nth-of-type(2n){animation-direction:reverse}@keyframes float-out{to{rotate:1turn}}.text{translate:2% -6%;font-size:14px;color:#fff}.sparkle-button._white-bg .sparkle-btn{background:#00269a;justify-content:center}.sparkle-button._white-bg .sparkle-btn img{position:relative;z-index:1001}.sparkle-button._white-bg .backdrop{background:#fff}.sparkle-button._white-bg .text,.sparkle-button._white-bg path{color:#00269a}.sparkle-button._white-bg .spark:before{background:conic-gradient(from 0deg,transparent 0 320deg,#fff 1turn)}