@property --beam-angle-bb-1 { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@property --beam-opacity-bb-1 { syntax: "<number>"; inherits: true; initial-value: 0; }
[data-beam="bb-1"] { position: relative; border-radius: 16px; overflow: hidden; }
[data-beam="bb-1"][data-active] { animation: 4s linear 0s infinite normal none running beam-spin-bb-1, 0.6s ease 0s 1 normal forwards running beam-fade-in-bb-1; }
[data-beam="bb-1"][data-fading] { animation: 4s linear 0s infinite normal none running beam-spin-bb-1, 0.5s ease 0s 1 normal forwards running beam-fade-out-bb-1; }
[data-beam="bb-1"][data-active]::after, [data-beam="bb-1"][data-fading]::after { content: ""; position: absolute; inset: 0px; border-radius: 15px; padding: 1px; clip-path: inset(0px round 16px); background: conic-gradient(
        from var(--beam-angle-bb-1),
        transparent 0%, transparent 54%,
        rgba(255, 255, 255, 0.1) 57%,
        rgba(255, 255, 255, 0.3) 60%,
        rgba(255, 255, 255, 0.6) 63%,
        rgba(255, 255, 255, 0.75) 66%,
        rgba(255, 255, 255, 0.6) 69%,
        rgba(255, 255, 255, 0.3) 72%,
        rgba(255, 255, 255, 0.1) 75%,
        transparent 78%, transparent 100%
      ),radial-gradient(ellipse 70px 40px at 33% -7.4%, rgb(240, 128, 78), transparent),
    radial-gradient(ellipse 60px 35px at 12% -5%, rgb(233, 162, 58), transparent),
    radial-gradient(ellipse 40px 70px at 2.1% 68.3%, rgb(198, 116, 72), transparent),
    radial-gradient(ellipse 20px 35px at 2.1% 68.3%, rgb(245, 190, 90), transparent),
    radial-gradient(ellipse 180px 32px at 74.4% 100%, rgb(122, 108, 224), transparent),
    radial-gradient(ellipse 85px 26px at 55% 100%, rgb(233, 162, 58), transparent),
    radial-gradient(ellipse 74px 32px at 93.9% 0%, rgb(216, 94, 70), transparent),
    radial-gradient(ellipse 26px 42px at 100% 27.1%, rgb(240, 128, 78), transparent),
    radial-gradient(ellipse 52px 48px at 100% 27.1%, rgb(205, 100, 76), transparent); mask-image: ; -webkit-mask-position-x: ; -webkit-mask-position-y: ; mask-size: ; mask-repeat: ; mask-origin: ; mask-clip: ; mask-mode: ; mask-composite: intersect, exclude; pointer-events: none; z-index: 2; opacity: calc(var(--beam-opacity-bb-1) * 0.26 * var(--beam-stroke-opacity, 1) * var(--beam-strength, 1)); animation: 12s ease-in-out 0s infinite normal none running beam-hue-shift-bb-1; }
[data-beam="bb-1"][data-active]::before, [data-beam="bb-1"][data-fading]::before { content: ""; position: absolute; inset: 0px; border-radius: 16px; background: radial-gradient(63px 36px at 33% -7.4%, rgba(240, 128, 78, 0.45), transparent), radial-gradient(54px 32px at 12% -5%, rgba(233, 162, 58, 0.45), transparent), radial-gradient(36px 63px at 2.1% 68.3%, rgba(198, 116, 72, 0.45), transparent), radial-gradient(18px 32px at 2.1% 68.3%, rgba(245, 190, 90, 0.45), transparent), radial-gradient(162px 29px at 74.4% 100%, rgba(122, 108, 224, 0.45), transparent), radial-gradient(77px 23px at 55% 100%, rgba(233, 162, 58, 0.45), transparent), radial-gradient(67px 29px at 93.9% 0%, rgba(216, 94, 70, 0.45), transparent), radial-gradient(23px 38px at 100% 27.1%, rgba(240, 128, 78, 0.45), transparent), radial-gradient(47px 43px at 100% 27.1%, rgba(205, 100, 76, 0.45), transparent); box-shadow: rgba(255, 255, 255, 0.27) 0px 0px 9px 1px inset; mask-image: conic-gradient(
      from var(--beam-angle-bb-1),
      transparent 0%, transparent 30%,
      rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
      white 52%, white 80%,
      rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
      transparent 95%, transparent 100%
    ),
    linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white),
    linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white); mask-composite: intersect, add; pointer-events: none; z-index: 1; opacity: calc(var(--beam-opacity-bb-1) * 0.42 * var(--beam-inner-opacity, 1) * var(--beam-strength, 1)); clip-path: inset(0px round 16px); animation: 12s ease-in-out 0s infinite normal none running beam-hue-shift-bb-1; }
[data-beam="bb-1"] [data-beam-bloom] { display: none; position: absolute; inset: 0px; border-radius: 15px; clip-path: inset(0px round 16px); background: conic-gradient(
        from var(--beam-angle-bb-1),
        transparent 0%, transparent 58%,
        rgba(255, 255, 255, 0.03) 62%,
        rgba(255, 255, 255, 0.08) 65%,
        rgba(255, 255, 255, 0.2) 67%,
        rgba(255, 255, 255, 0.45) 69%,
        rgba(255, 255, 255, 0.85) 70%,
        rgba(255, 255, 255, 0.85) 70.5%,
        rgba(255, 255, 255, 0.45) 71.5%,
        rgba(255, 255, 255, 0.2) 73%,
        rgba(255, 255, 255, 0.08) 75%,
        rgba(255, 255, 255, 0.03) 78%,
        transparent 82%
      ); mask: linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px) content-box exclude, linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px); padding: 1px; filter: blur(8px) brightness(1.3) saturate(1.2); pointer-events: none; z-index: 3; opacity: 0; }
[data-beam="bb-1"][data-active] [data-beam-bloom], [data-beam="bb-1"][data-fading] [data-beam-bloom] { display: block; opacity: calc(var(--beam-opacity-bb-1) * 0.24 * var(--beam-bloom-opacity, 1) * var(--beam-strength, 1)); }
@keyframes beam-spin-bb-1 { 
  100% { --beam-angle-bb-1: 360deg; }
}
@keyframes beam-fade-in-bb-1 { 
  100% { --beam-opacity-bb-1: 1; }
}
@keyframes beam-fade-out-bb-1 { 
  0% { --beam-opacity-bb-1: 1; }
  100% { --beam-opacity-bb-1: 0; }
}
@keyframes beam-hue-shift-bb-1 { 
  0% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) - 30deg)) brightness(1.30) saturate(1.20); }
  50% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) + 30deg)) brightness(1.30) saturate(1.20); }
  100% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) - 30deg)) brightness(1.30) saturate(1.20); }
}
[data-beam="bb-1"][data-paused], [data-beam="bb-1"][data-paused]::after, [data-beam="bb-1"][data-paused]::before, [data-beam="bb-1"][data-paused] [data-beam-bloom] { animation-play-state: paused !important; }
@property --beam-angle-bb-1 { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
[data-beam="bb-1"][data-active] { animation: 0.6s ease 0s 1 normal forwards running beam-fade-in-bb-1; }
[data-beam="bb-1"][data-fading] { animation: 0.5s ease 0s 1 normal forwards running beam-fade-out-bb-1; }
[data-beam="bb-1"][data-active]::after, [data-beam="bb-1"][data-fading]::after { animation: 4s linear 0s infinite normal none running beam-spin-bb-1, 12s ease-in-out 0s infinite normal none running beam-hue-shift-bb-1; }
[data-beam="bb-1"][data-active]::before, [data-beam="bb-1"][data-fading]::before { animation: 4s linear 0s infinite normal none running beam-spin-bb-1, 12s ease-in-out 0s infinite normal none running beam-hue-shift-bb-1; }
[data-beam="bb-1"][data-active] [data-beam-bloom], [data-beam="bb-1"][data-fading] [data-beam-bloom] { animation: 4s linear 0s infinite normal none running beam-spin-bb-1; }
[data-beam="bb-1"]:not([data-active]):not([data-fading]) { overflow: visible; }