@property --sb-angle{syntax:"<angle>";initial-value:0deg;inherits:false}
@property --sb-offset{syntax:"<angle>";initial-value:0deg;inherits:false}
@property --sb-percent{syntax:"<percentage>";initial-value:5%;inherits:false}
@property --sb-shine{syntax:"<color>";initial-value:white;inherits:false}
.shiny{--sb-base:#0b0b0a;--sb-inset:#1a1818;--sb-label:#fff;--sb-accent:oklch(0.68 0.19 42);--sb-accent-soft:oklch(0.8 0.13 52);--sb-d:3s;--sb-shadow:2px;--sb-ease:.8s cubic-bezier(.25,1,.5,1);
isolation:isolate;position:relative;overflow:hidden;cursor:pointer;outline-offset:4px;display:inline-flex;align-items:center;justify-content:center;white-space:normal;text-align:center;max-width:100%;text-decoration:none;
padding:1.1rem 1.9rem;font-family:Archivo,system-ui,sans-serif;font-size:15px;line-height:1.2;font-weight:600;letter-spacing:.01em;border:1px solid transparent;border-radius:999px;color:var(--sb-label);
background:var(--sb-base);
box-shadow:inset 0 0 0 1px var(--sb-inset);transition:var(--sb-ease);transition-property:--sb-offset,--sb-percent,--sb-shine;
animation:sb-angle var(--sb-d) linear infinite}
.shiny.sm{padding:.75rem 1.3rem;font-size:14px;white-space:nowrap}
.shiny:hover,.shiny:focus-visible{color:var(--sb-label)}
.shiny::before,.shiny::after,.shiny>span::before{content:"";pointer-events:none;position:absolute;inset-inline-start:50%;inset-block-start:50%;translate:-50% -50%;z-index:-1}
.shiny:active{translate:0 1px}
.shiny::before{--size:calc(100% - var(--sb-shadow)*3);--pos:2px;--space:calc(var(--pos)*2);width:var(--size);height:var(--size);background:radial-gradient(circle at var(--pos) var(--pos),white calc(var(--pos)/4),transparent 0) padding-box;background-size:var(--space) var(--space);background-repeat:space;mask-image:conic-gradient(from calc(var(--sb-angle) + 45deg),black,transparent 10% 90%,black);border-radius:inherit;opacity:.4;
animation:sb-angle var(--sb-d) linear infinite}
.shiny::after{width:100%;aspect-ratio:1;background:linear-gradient(-50deg,transparent,var(--sb-accent),transparent);mask-image:radial-gradient(circle at bottom,transparent 40%,black);opacity:.6;
animation:sb-shimmer var(--sb-d) linear infinite}
.shiny{-webkit-tap-highlight-color:transparent;will-change:transform}
.shiny>span{z-index:1;display:inline-flex;align-items:center;gap:10px}
.shiny>span::before{--size:calc(100% + 1rem);width:var(--size);height:var(--size);box-shadow:inset 0 -1ex 2rem 4px var(--sb-accent);opacity:0;transition:opacity var(--sb-ease);animation:sb-breathe calc(var(--sb-d)*1.5) linear infinite}
.shiny:is(:hover,:focus-visible){--sb-percent:20%;--sb-offset:95deg;--sb-shine:var(--sb-accent-soft)}
.shiny:is(:hover,:focus-visible)>span::before{opacity:1}
@keyframes sb-angle{to{--sb-angle:360deg}}
@keyframes sb-shimmer{to{rotate:360deg}}
@keyframes sb-breathe{from,to{scale:1}50%{scale:1.2}}

.shiny>.sb-ring{position:absolute;inset:-1px;border-radius:inherit;overflow:hidden;z-index:-2;pointer-events:none;-webkit-transform:translateZ(0);transform:translateZ(0)}
.shiny>.sb-ring::before{content:"";position:absolute;left:50%;top:50%;width:max(300%,320px);aspect-ratio:1;margin-left:calc(max(300%,320px) / -2);-webkit-transform:translateY(-50%) rotate(0deg);transform:translateY(-50%) rotate(0deg);background:conic-gradient(from 0deg,transparent 0%,var(--sb-accent) 5%,#fff 10%,var(--sb-accent) 15%,transparent 20%,transparent 50%,var(--sb-accent) 55%,#fff 60%,var(--sb-accent) 65%,transparent 70%);-webkit-animation:sb-spin var(--sb-d) linear infinite;animation:sb-spin var(--sb-d) linear infinite;transition:opacity .4s}
.shiny>.sb-ring::after{content:"";position:absolute;inset:1px;border-radius:inherit;background:var(--sb-base);box-shadow:inset 0 0 0 1px var(--sb-inset)}
.shiny:is(:hover,:focus-visible)>.sb-ring::before{background:conic-gradient(from 0deg,transparent 0%,var(--sb-accent) 10%,var(--sb-accent-soft) 20%,var(--sb-accent) 30%,transparent 40%,transparent 50%,var(--sb-accent) 60%,var(--sb-accent-soft) 70%,var(--sb-accent) 80%,transparent 90%)}
@-webkit-keyframes sb-spin{to{-webkit-transform:translateY(-50%) rotate(360deg);transform:translateY(-50%) rotate(360deg)}}
@keyframes sb-spin{to{-webkit-transform:translateY(-50%) rotate(360deg);transform:translateY(-50%) rotate(360deg)}}