.sparkle-badge{display:inline-flex;align-items:center;padding:.2em .5em;font-size:.625rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:white;background:linear-gradient(135deg,hsl(260 60% 38%),hsl(270 55% 42%) 50%,hsl(260 60% 36%));border-radius:.25rem;box-shadow:inset 0 0 0 1px hsl(260 50% 50%/.3),0 1px 2px hsl(260 50% 20%/.3)}.sparkle-button{--transition:0.25s;--spark:1.8s;position:relative;z-index:0;isolation:isolate;display:inline-flex;overflow:visible}.sparkle-button button{--cut:0.1em;--active:0;--mouse-x:50%;--mouse-y:50%;--sparkle-bg-base:hsl(260 calc(var(--active) * 97%) calc((var(--active) * 44%) + 12%));--bg:radial-gradient(circle at var(--mouse-x) var(--mouse-y),hsl(270 calc(var(--active) * 97%) 72%/calc(var(--active) * 0.8)),transparent 50%),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),var(--sparkle-bg-base);background:var(--bg);font-size:.875rem;font-weight:500;border:1px solid hsl(240 6% 28%);cursor:pointer;padding:.5em .85em;display:flex;align-items:center;gap:.2em;white-space:nowrap;border-radius:100px;position:relative;box-shadow:0 0 calc(var(--active) * 1.65em) calc(var(--active) * .55em) hsl(260 97% 61%/.6),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) * .05))}.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:center;fill:currentColor;stroke:currentColor;animation-delay:calc((var(--transition) * 1.5) + (var(--delay) * 1s));animation-duration:.6s;transition:color var(--transition)}.sparkle-button button:is(:hover,:focus-visible) path{animation-name:sparkle-bounce}@keyframes sparkle-bounce{35%,65%{scale:var(--scale)}}.sparkle-button .sparkle path:first-of-type{--scale:0.5;--delay:0.1;--base:40%}.sparkle-button .sparkle path:nth-of-type(2){--scale:1.5;--delay:0.2;--base:20%}.sparkle-button .sparkle path:nth-of-type(3){--scale:2.5;--delay:0.35;--base:30%}.sparkle-button button:before{content:"";position:absolute;inset:-.25em;z-index:-1;border:.25em solid hsl(260 97% 50%/.5);border-radius:100px;opacity:var(--active,0);transition:opacity var(--transition)}.sparkle-button .spark{position:absolute;inset:0;border-radius:100px;rotate:0deg;overflow:hidden;-webkit-mask:linear-gradient(white,transparent 50%);mask:linear-gradient(white,transparent 50%);animation:spark-flip calc(var(--spark) * 2) infinite steps(2)}@keyframes spark-flip{to{rotate:1turn}}.sparkle-button .spark:before{content:"";position:absolute;width:200%;aspect-ratio:1;top:0;left:50%;z-index:-1;translate:-50% -15%;rotate:0deg;transform:rotate(-90deg);opacity:calc((var(--active)) + .4);background:conic-gradient(from 0deg,transparent 0 340deg,white 1turn);transition:opacity var(--transition);animation:spark-rotate var(--spark) linear infinite both}.sparkle-button .spark:after{content:"";position:absolute;inset:var(--cut);border-radius:100px}.sparkle-button .backdrop{position:absolute;inset:var(--cut);background:var(--bg);border-radius:100px;transition:background var(--transition)}@keyframes spark-rotate{to{transform:rotate(90deg)}}.sparkle-button button:is(:hover,:focus-visible)~.bodydrop,.sparkle-button button:is(:hover,:focus-visible)~.particle-pen{--active:1;--play-state:running}.sparkle-button .bodydrop{display:none}.sparkle-button button:is(:hover,:focus-visible){--active:1;--play-state:running}.sparkle-button .particle-pen{position:absolute;width:200%;aspect-ratio:1;top:50%;left:50%;translate:-50% -50%;-webkit-mask:radial-gradient(white,transparent 65%);mask:radial-gradient(white,transparent 65%);z-index:1;opacity:var(--active,0);transition:opacity var(--transition);pointer-events:none}.sparkle-button .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:sparkle-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:paused}.sparkle-button button:is(:hover,:focus-visible)~.particle-pen .particle{animation-play-state:running}.sparkle-button .particle path{fill:hsl(0 0% 90%);stroke:none}.sparkle-button .particle:nth-of-type(2n){animation-direction:reverse}@keyframes sparkle-float-out{to{rotate:1turn}}.sparkle-button .sparkle-text{position:relative;z-index:2;translate:2% -6%;letter-spacing:.01ch;--sparkle-text-from:hsl(0 0% calc((var(--active) * 100%) + 65%));--sparkle-text-to:hsl(0 0% calc((var(--active) * 100%) + 26%));background:linear-gradient(90deg,var(--sparkle-text-from),var(--sparkle-text-to));-webkit-background-clip:text;background-clip:text;color:transparent;transition:background var(--transition)}.sparkle-button button svg.sparkle{position:relative;z-index:2;inline-size:1.25em;translate:-25% -5%}html.dark .sparkle-button button{--sparkle-bg-base:hsl(calc(240 + (var(--active) * 20)) calc(4% + (var(--active) * 93%)) calc((var(--active) * 28%) + 16%));border-color:hsl(240 5% 24%)}html.dark .sparkle-button .sparkle-text{--sparkle-text-from:hsl(0 0% calc((var(--active) * 100%) + 90%));--sparkle-text-to:hsl(0 0% calc((var(--active) * 100%) + 70%))}html.dark .sparkle-button .sparkle path{color:hsl(0 0% calc((var(--active, 0) * 70%) + 75%))}html.dark .sparkle-button .sparkle path:first-of-type{--base:75%}html.dark .sparkle-button .sparkle path:nth-of-type(2){--base:65%}html.dark .sparkle-button .sparkle path:nth-of-type(3){--base:70%}html.dark .sparkle-button .particle path{fill:hsl(0 0% 85%)}.sparkle-button--light button{--sparkle-bg-base:hsl(260 calc(var(--active) * 97%) calc(100% - (var(--active) * 56%)));--bg:radial-gradient(circle at var(--mouse-x) var(--mouse-y),hsl(270 calc(var(--active) * 97%) 72%/calc(var(--active) * 0.8)),transparent 50%),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),var(--sparkle-bg-base);border:1px solid hsl(240 5% 84%);box-shadow:0 0 calc(var(--active) * 1.65em) calc(var(--active) * .55em) hsl(260 97% 61%/.6),0 .05em 0 0 hsl(0 0% calc(100% - (var(--active) * 70%))) inset,0 -.05em 0 0 hsl(260 calc(var(--active) * 97%) calc(92% - (var(--active) * 32%))) inset}.sparkle-button--light .sparkle-text{--sparkle-text-from:hsl(0 0% calc(25% + (var(--active) * 75%)));--sparkle-text-to:hsl(0 0% calc(40% + (var(--active) * 60%)))}.sparkle-button--light .sparkle path{color:hsl(0 0% calc(45% + (var(--active) * 55%)))}.sparkle-button--light .sparkle path:first-of-type{--base:55%}.sparkle-button--light .sparkle path:nth-of-type(2){--base:50%}.sparkle-button--light .sparkle path:nth-of-type(3){--base:52%}.sparkle-button--light .particle-pen{width:150%}.sparkle-button--light .particle{width:calc(var(--size, .25) * .7rem)}.sparkle-button--light .particle path{fill:hsl(260 70% 55%)}.sparkle-button--light button:before{border-color:hsl(260 70% 70%/.5)}.sparkle-button--light .spark:before{background:conic-gradient(from 0deg,transparent 0 340deg,hsl(260 70% 70%) 1turn)}html.dark .sparkle-button--light button{--sparkle-bg-base:hsl(0 0% calc(96% - (var(--active) * 4%)));border-color:hsl(0 0% 82%)}html.dark .sparkle-button--light .sparkle-text{--sparkle-text-from:hsl(0 0% calc(20% - (var(--active) * 8%)));--sparkle-text-to:hsl(0 0% calc(35% - (var(--active) * 8%)))}html.dark .sparkle-button--light .sparkle path{color:hsl(260 75% calc(50% - (var(--active) * 12%)))}html.dark .sparkle-button--light .particle path{fill:hsl(260 65% 50%)}.sparkle-button__icon-only{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;color:white;transition:color .25s}.sparkle-button__icon-only svg{flex-shrink:0}.sparkle-button--light .sparkle-button__icon-only{color:hsl(260 50% 30%)}.sparkle-button--light button:is(:hover,:focus-visible) .sparkle-button__icon-only{color:white}html.dark .sparkle-button--light .sparkle-button__icon-only{color:hsl(260 45% 35%)}.sparkle-button--rounded button{border-radius:.5rem;padding:.5rem .75rem}.sparkle-button--md button{font-size:.875rem;padding:.75rem 1.25rem}.sparkle-button--md.sparkle-button--rounded button{padding:.75rem 1.25rem}.sparkle-button--md .sparkle{inline-size:1.15em}.sparkle-button--rounded .backdrop,.sparkle-button--rounded .spark,.sparkle-button--rounded .spark:after,.sparkle-button--rounded button:before{border-radius:.5rem}.sparkle-button--sm button{font-size:.8125rem;padding:.35em .7em}.sparkle-button--sm .sparkle{inline-size:1.1em}.fab-particles{isolation:isolate}.fab-particles .fab-particle-pen{position:absolute;width:400%;aspect-ratio:1;top:50%;left:50%;translate:-50% -50%;-webkit-mask:radial-gradient(white,transparent 65%);mask:radial-gradient(white,transparent 65%);z-index:0;opacity:0;transition:opacity .25s;pointer-events:none}.fab-particles:hover .fab-particle-pen{opacity:1}.fab-particles .fab-particle-pen .particle{fill:hsl(260 70% 80%);width:calc(var(--size, .25) * 1.4rem);aspect-ratio:1;position:absolute;top:calc(var(--y) * 1%);left:calc(var(--x) * 1%);opacity:var(--alpha,1);animation:sparkle-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:paused}.fab-particles:hover .fab-particle-pen .particle{animation-play-state:running}.fab-particles .fab-particle-pen .particle path{fill:hsl(260 70% 80%);stroke:none}.fab-particles .fab-particle-pen .particle:nth-of-type(2n){animation-direction:reverse}html.dark .fab-particles .fab-particle-pen .particle path{fill:hsl(260 65% 80%)}