@layer theme,base;@layer components{.shiny-button{--gleam-base:#0b0b0e;--gleam-inset:#1c1b21;--gleam-label:#fff;--gleam-c1:#fcad29;--gleam-c2:#fe3769;--gleam-c3:#f582ed;--gleam-c4:#ce9eff;--gleam-c5:#30befd;--gleam-glow:#ffffff24;--gleam-duration:3s;--gleam-ease:.8s cubic-bezier(.25, 1, .5, 1);--gleam-arc:4%;--gleam-arc-hover:13%;--gleam-speckle:.16;--gleam-sheen:0;--gleam-shadow-size:2px;--gleam-percent:var(--gleam-arc);isolation:isolate;cursor:pointer;outline-offset:4px;color:var(--gleam-label);background:linear-gradient(var(--gleam-base), var(--gleam-base)) padding-box, conic-gradient(from calc(var(--gleam-angle) - var(--gleam-angle-offset)), transparent, var(--gleam-c1) var(--gleam-percent), var(--gleam-c2) calc(var(--gleam-percent) * 2), var(--gleam-shine) calc(var(--gleam-percent) * 3), var(--gleam-c4) calc(var(--gleam-percent) * 4), var(--gleam-c5) calc(var(--gleam-percent) * 5), transparent calc(var(--gleam-percent) * 6)) border-box;box-shadow:inset 0 0 0 1px var(--gleam-inset);transition:var(--gleam-ease);animation:gleam-angle var(--gleam-duration) linear infinite, gleam-angle calc(var(--gleam-duration) / .4) linear infinite reverse paused;animation-composition:add;border:1.5px solid #0000;border-radius:9999px;transition-property:--gleam-angle-offset,--gleam-percent,--gleam-shine;position:relative;overflow:hidden}.shiny-button:before,.shiny-button:after,.shiny-button>span:before{content:"";pointer-events:none;z-index:-1;position:absolute;inset-block-start:50%;inset-inline-start:50%;translate:-50% -50%}.shiny-button:active{translate:0 1px}.shiny-button:before{--size:calc(100% - var(--gleam-shadow-size) * 3);--position:2px;--space:calc(var(--position) * 2);width:var(--size);height:var(--size);background:radial-gradient(circle at var(--position) var(--position), white calc(var(--position) / 4), transparent 0) padding-box;background-size:var(--space) var(--space);-webkit-mask-image:conic-gradient(from calc(var(--gleam-angle) + 45deg), black, transparent 10% 90%, black);mask-image:conic-gradient(from calc(var(--gleam-angle) + 45deg), black, transparent 10% 90%, black);border-radius:inherit;opacity:var(--gleam-speckle);animation:gleam-angle var(--gleam-duration) linear infinite, gleam-angle calc(var(--gleam-duration) / .4) linear infinite reverse paused;animation-composition:add;background-repeat:space}.shiny-button:after{aspect-ratio:1;background:linear-gradient(-50deg, transparent, var(--gleam-c2), var(--gleam-c4), var(--gleam-c5), transparent);width:100%;opacity:var(--gleam-sheen);animation:gleam-shimmer var(--gleam-duration) linear infinite, gleam-shimmer calc(var(--gleam-duration) / .4) linear infinite reverse paused;animation-composition:add;-webkit-mask-image:radial-gradient(circle at bottom,#0000 40%,#000);mask-image:radial-gradient(circle at bottom,#0000 40%,#000)}.shiny-button>span{justify-content:center;align-items:center;gap:inherit;z-index:1;display:inline-flex}.shiny-button>span:before{--size:calc(100% + 1rem);width:var(--size);height:var(--size);box-shadow:inset 0 -1ex 2rem 4px var(--gleam-glow);opacity:0;transition:opacity var(--gleam-ease);animation:calc(var(--gleam-duration) * 1.5) gleam-breathe linear infinite}.shiny-button:is(:hover,:focus-visible){--gleam-percent:var(--gleam-arc-hover);--gleam-angle-offset:95deg;--gleam-shine:var(--gleam-c3)}.shiny-button:is(:hover,:focus-visible),.shiny-button:is(:hover,:focus-visible):before,.shiny-button:is(:hover,:focus-visible):after{animation-play-state:running}.shiny-button:is(:hover,:focus-visible)>span:before{opacity:1}@media (prefers-reduced-motion:reduce){.shiny-button,.shiny-button:before,.shiny-button:after,.shiny-button>span:before{animation:none!important}.shiny-button:is(:hover,:focus-visible)>span:before{opacity:0}.shiny-button{transition:none}}}@layer utilities;@property --gleam-angle{syntax:"<angle>";inherits:false;initial-value:0deg}@property --gleam-angle-offset{syntax:"<angle>";inherits:false;initial-value:0deg}@property --gleam-percent{syntax:"<percentage>";inherits:false;initial-value:4%}@property --gleam-shine{syntax:"<color>";inherits:false;initial-value:#fff}@keyframes gleam-angle{to{--gleam-angle:360deg}}@keyframes gleam-shimmer{to{rotate:360deg}}@keyframes gleam-breathe{0%,to{scale:1}50%{scale:1.2}}