@property --beam-angle{syntax: "<angle>"; inherits: false; initial-value: 0deg;}.beam-button-wrap{position:relative;display:inline-block;border-radius:999px;padding:2px;isolation:isolate}.beam-button-wrap .beam-button-beam{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;padding:2px;background:conic-gradient(from var(--beam-angle),transparent 0deg,#ff2d95 20deg,#b347ff 60deg,#00d4ff 110deg,transparent 150deg,transparent 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;animation:beam-spin 2.8s linear infinite;pointer-events:none;z-index:0}.beam-button-wrap .beam-button-inner{position:relative;z-index:1;border-radius:999px;padding:.625rem 1.25rem;font-weight:600;letter-spacing:.01em;border:0}.beam-button-wrap.is-disabled .beam-button-beam{animation-play-state:paused;opacity:.3}@keyframes beam-spin{to{--beam-angle: 360deg}}@media (prefers-reduced-motion: reduce){.beam-button-wrap .beam-button-beam{animation:none;background:linear-gradient(90deg,#ff2d95,#00d4ff)}}