@property --beam-angle{syntax: "<angle>"; inherits: false; initial-value: 0deg;}@keyframes beam-spin{0%{--beam-angle: 0deg}50%{--beam-angle: 180deg}to{--beam-angle: 360deg}}.beam{position:relative;isolation:isolate;display:flex;border-radius:var(--pill-radius);--beam-strength: 1;--beam-rim: 2px;--beam-rim-blur: 5px;--beam-bleed: 4px;--beam-spill: 26px;--beam-cycle: 5.4s;--beam-c1: #bfe9c4;--beam-c2: #aebbf0;--beam-c3: #c8b6f2;--beam-c4: #efd0be;--beam-ambient: rgba(178, 164, 232, .28)}.beam:before,.beam:after{content:"";position:absolute;border-radius:inherit;z-index:-1;pointer-events:none;background:conic-gradient(from var(--beam-angle, 0deg),var(--beam-ambient) 0turn,var(--beam-ambient) .79turn,var(--beam-c4) .845turn,var(--beam-c3) .9turn,var(--beam-c2) .952turn,var(--beam-c1) .988turn,var(--beam-ambient) 1turn);animation:beam-spin var(--beam-cycle) linear infinite;will-change:--beam-angle}.beam:before{inset:calc(-1 * var(--beam-rim));filter:blur(var(--beam-rim-blur));opacity:calc(.75 * var(--beam-strength))}.beam:after{inset:calc(-1 * var(--beam-bleed));filter:blur(var(--beam-spill));opacity:calc(.6 * var(--beam-strength))}.beam>.pill{box-shadow:inset 0 1px #e8e6e10f}.beam[data-beam=colorful]{--beam-c1: #ff6b9d;--beam-c2: #ffd76b;--beam-c3: #6bd5ff;--beam-c4: #b06bff;--beam-ambient: rgba(200, 140, 255, .3)}.beam[data-beam=brand]{--beam-c1: #7dd87d;--beam-c2: #4a90ff;--beam-c3: #8b6fff;--beam-c4: #7dd87d;--beam-ambient: rgba(125, 216, 125, .22)}.beam[data-beam=mono]{--beam-c1: #e8e6e1;--beam-c2: #b9b7b1;--beam-c3: #e8e6e1;--beam-c4: #d6d4cf;--beam-ambient: rgba(232, 230, 225, .16);--beam-strength: .8}.beam[data-beam=off]:before,.beam[data-beam=off]:after{display:none}@media (max-width: 768px){.beam{border-radius:var(--pill-radius);--beam-spill: 16px;--beam-bleed: 3px}}@media (prefers-reduced-motion: reduce){.beam:before,.beam:after{animation:none;will-change:auto}}