*:after,*:before{box-sizing:border-box}:root{--transition:.25s;--spark:1.8s}@media screen and (min-width:1000px){div.fancybutton-wrapper button{font-size:25px !important}}div.fancybutton-wrapper{display:flex;justify-content:center}div.fancybutton-wrapper button{--cut:.1em;--active:0;--bg:radial-gradient(40% 50% at center 100%, hsl(200 calc(var(--active) * 67%) 12% / var(--active)), transparent), 
            radial-gradient( 80% 100% at center 120%, hsl(200 calc(var(--active) * 67%) 12% / var(--active)), transparent ), 
            hsl(220 calc(var(--active) * 217%) calc((var(--active) * 14%) + 22%));background:var(--bg);font-size:4vmin;font-weight:500;border:0;cursor:pointer;padding:.9em 1.3em;display:flex;align-items:center;gap:.25em;white-space:nowrap;border-radius:100px;position:relative;box-shadow:0 0 calc(var(--active) * 6em) calc(var(--active) * 2em) hsla(210,97%,25%,0.75),0 .05em 0 0 hsl(260 calc(var(--active) * 17%) calc((var(--active) * 50%) + 30%)) inset,0 -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))}div.fancybutton-wrapper button:active{scale:1}div.fancybutton-wrapper svg{overflow:visible !important}div.fancybutton-wrapper .sparkle path{color:hsl(0 0% calc((var(--active, 0) * 70%) + var(--base)));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)}div.fancybutton-wrapper button:is(:hover, :focus-visible) path{animation-name:bounce}@keyframes bounce{35%,65%{scale:var(--scale)}}div.fancybutton-wrapper .sparkle path:nth-of-type(1){--scale:.5;--delay:.1;--base:40%}div.fancybutton-wrapper .sparkle path:nth-of-type(2){--scale:1.5;--delay:.2;--base:20%}div.fancybutton-wrapper .sparkle path:nth-of-type(3){--scale:2.5;--delay:.35;--base:30%}div.fancybutton-wrapper button:before{content:"";position:absolute;inset:-0.25em;z-index:-1;border:.25em solid hsla(260,97%,50%,0.5);border-radius:100px;opacity:var(--active, 0);transition:opacity var(--transition)}div.fancybutton-wrapper .spark{position:absolute;inset:0;border-radius:100px;rotate:0deg;overflow:hidden;mask:linear-gradient(white, transparent 50%);animation:flip calc(var(--spark) * 2) infinite steps(2, end)}@keyframes flip{to{rotate:360deg}}div.fancybutton-wrapper .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)) + .4);background:conic-gradient(from 0deg, transparent 0 340deg, white 360deg);transition:opacity var(--transition);animation:rotate var(--spark) linear infinite both}div.fancybutton-wrapper .spark:after{content:"";position:absolute;inset:var(--cut);border-radius:100px}div.fancybutton-wrapper .backdrop{position:absolute;inset:var(--cut);background:var(--bg);border-radius:100px;transition:background var(--transition)}@keyframes rotate{to{transform:rotate(90deg)}}@supports (selector(:has(:is(+ *)))){div.fancybutton-wrapper body:has(button:is(:hover, :focus-visible)){--active:1;--play-state:running}div.fancybutton-wrapper .bodydrop{display:none}}div.fancybutton-wrapper button:is(:hover, :focus-visible)~:is(.bodydrop, .particle-pen){--active:1;--play-state:runnin}div.fancybutton-wrapper .bodydrop{background:hsl(260 calc(var(--active) * 97%) 6%);position:fixed;inset:0;z-index:-1}div.fancybutton-wrapper button:is(:hover, :focus-visible){--active:1;--play-state:running}div.fancybutton-wrapper .sparkle-button{position:relative}div.fancybutton-wrapper .particle-pen{position:absolute;width:200%;aspect-ratio:1;top:50%;left:50%;translate:-50% -50%;-webkit-mask:radial-gradient(white, transparent 65%);z-index:-1;opacity:var(--active, 0);transition:opacity var(--transition)}div.fancybutton-wrapper .particle{fill:white;width:calc(var(--size, .25) * 1rem);aspect-ratio:1;position:absolute;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%);z-index:-1;animation-play-state:var(--play-state, paused)}div.fancybutton-wrapper .particle path{fill:hsl(0,0%,90%);stroke:none}div.fancybutton-wrapper .particle:nth-of-type(even){animation-direction:reverse}@keyframes float-out{to{rotate:360deg}}div.fancybutton-wrapper .text{translate:2% -6%;letter-spacing:.01ch;background:linear-gradient(90deg, hsl(0 0% calc((var(--active) * 100%) + 65%)), hsl(0 0% calc((var(--active) * 100%) + 26%)));-webkit-background-clip:text;color:transparent;transition:background var(--transition)}div.fancybutton-wrapper button svg{inline-size:1.25em;translate:-25% -5%}