.container{flex-direction:column;justify-content:center;align-items:flex-start;height:100%;display:flex}.button{color:#fff;cursor:pointer;will-change:transform;background-color:#029e03;border-radius:24px;padding:10px 20px;font-size:3rem;font-weight:600;transform:scale(.5)}
*,:after,:before{box-sizing:border-box}:root{--transition:.25s;--spark:1.8s}.sparkle-button{position:relative;overflow:visible}.sparkle-button button{--cut:.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(--bg);cursor:pointer;white-space:nowrap;box-shadow:0 0 calc(var(--active)*6em)calc(var(--active)*3em)#7b3bfcbf,0 .05em 0 0 hsl(260 calc(var(--active)*97%)calc((var(--active)*50%) + 30%))inset,0 -.05em 0 0 hsl(260 calc(var(--active)*97%)calc(var(--active)*60%))inset;transition:box-shadow var(--transition),scale var(--transition),background var(--transition);scale:calc(1 + (var(--active)*.1));z-index:2;border:0;border-radius:100px;align-items:center;gap:.25em;padding:.9em 1.3em;font-size:2rem;font-weight:500;display:flex;position:relative;overflow:visible}.sparkle-button button:active{scale:1}.sparkle-button svg{overflow:visible!important}.sparkle-button .sparkle path{color:hsl(0 0% calc((var(--active,0)*70%) + var(--base)));transform-box:fill-box;transform-origin:50%;fill:currentColor;stroke:currentColor;animation-delay:calc((var(--transition)*1.5) + (var(--delay)*1s));transition:color var(--transition);animation-duration:.6s}.sparkle-button button:is(:hover,:focus-visible) .sparkle path{animation-name:bounce}@keyframes bounce{35%,65%{scale:var(--scale)}}.sparkle-button .sparkle path:first-of-type{--scale:.5;--delay:.1;--base:40%}.sparkle-button .sparkle path:nth-of-type(2){--scale:1.5;--delay:.2;--base:20%}.sparkle-button .sparkle path:nth-of-type(3){--scale:2.5;--delay:.35;--base:30%}.sparkle-button button:before{content:"";z-index:-1;opacity:var(--active,0);transition:opacity var(--transition);border:.25em solid #5604fb80;border-radius:100px;position:absolute;inset:-.25em}.sparkle-button .spark{animation:flip calc(var(--spark)*2)infinite steps(2,end);border-radius:100px;position:absolute;inset:0;overflow:hidden;rotate:none;-webkit-mask:linear-gradient(#fff,#0000 50%);mask:linear-gradient(#fff,#0000 50%)}@keyframes flip{to{rotate:360deg}}.sparkle-button .spark:before{content:"";aspect-ratio:1;z-index:-1;width:200%;translate:-50% -15%;rotate:0;opacity:calc((var(--active)) + .4);background:conic-gradient(from 0deg,transparent 0 340deg,white 360deg);transition:opacity var(--transition);animation:rotate var(--spark)linear infinite both;position:absolute;top:0%;left:50%;transform:rotate(-90deg)}.sparkle-button .spark:after{content:"";inset:var(--cut);border-radius:100px;position:absolute}.sparkle-button .backdrop{inset:var(--cut);background:var(--bg);transition:background var(--transition);border-radius:100px;position:absolute}@keyframes rotate{to{transform:rotate(90deg)}}@supports selector(:has(:is(+ *))){.sparkle-button:has(button:is(:hover,:focus-visible)){--active:1;--play-state:running}.sparkle-button .bodydrop{display:none}}.sparkle-button button:is(:hover,:focus-visible)~:is(.bodydrop,.particle-pen){--active:1;--play-state:running}.sparkle-button .bodydrop{background:hsl(260 calc(var(--active)*97%)6%);z-index:-1;position:fixed;inset:0}.sparkle-button button:is(:hover,:focus-visible),.sparkle-button.is-auto-active button{--active:1;--play-state:running}.sparkle-button.is-auto-active button .sparkle path{animation-name:bounce}.sparkle-button.is-auto-active button~:is(.bodydrop,.particle-pen){--active:1;--play-state:running}.sparkle-button.is-auto-active .particle-pen{opacity:1;--play-state:running}.sparkle-button .particle-pen{aspect-ratio:1;z-index:0;opacity:0;width:200%;transition:opacity var(--transition);--play-state:paused;pointer-events:none;position:absolute;top:50%;left:50%;overflow:visible;translate:-50% -50%;-webkit-mask:radial-gradient(#fff,#0000 65%);mask:radial-gradient(#fff,#0000 65%)}.sparkle-button button:is(:hover,:focus-visible)~.particle-pen{opacity:1;--play-state:running}.sparkle-button:has(button:is(:hover,:focus-visible)) .particle-pen{opacity:1;--play-state:running}.sparkle-button .particle{color:#e6e6e6;width:calc(var(--size,.25)*1rem);aspect-ratio:1;min-width:.5rem;top:calc(var(--y,50)*1%);left:calc(var(--x,50)*1%);opacity:var(--alpha,.8);animation:float-out calc(var(--duration,1)*1s)calc(var(--delay,0)*-1s)infinite linear;transform-origin:var(--origin-x,1000%)var(--origin-y,1000%);z-index:1;animation-play-state:var(--play-state,paused);pointer-events:none;will-change:transform;position:absolute;overflow:visible}.sparkle-button .particle path{fill:currentColor;stroke:none}.sparkle-button .particle:nth-of-type(2n){animation-direction:reverse}@keyframes float-out{to{rotate:360deg}}.sparkle-button .text{letter-spacing:.01ch;background:linear-gradient(90deg,hsl(0 0% calc((var(--active)*100%) + 65%)),hsl(0 0% calc((var(--active)*100%) + 26%)));color:#0000;transition:background var(--transition);-webkit-background-clip:text;translate:2% -6%}.sparkle-button button svg{inline-size:1.25em;translate:-25% -5%}
.rotating-text-wrapper{cursor:default;flex-wrap:wrap;justify-content:center;align-items:center;gap:.25em;width:280px;font-size:2.25rem;font-weight:700;line-height:2.5rem;display:flex}@media (min-width:640px){.rotating-text-wrapper{justify-content:flex-start;width:440px}}.rotating-text-container{background-color:#3b82f6;border-radius:12px;flex-wrap:nowrap;align-items:center;min-width:0;height:50px;padding-left:10px;padding-right:10px;display:inline-flex;position:relative;overflow:hidden;box-shadow:4px 4px 6px -1px #0003,2px 2px 4px -1px #0000001a}.dark .rotating-text-container{box-shadow:4px 4px 6px -1px #3b82f680,2px 2px 4px -1px #3b82f680}.rotating-text-inner{white-space:nowrap;flex-wrap:nowrap;align-items:center;display:inline-flex}.rotating-text-character{color:#fff;display:inline-block;overflow:hidden}