@property --los-beam-angle{
  syntax:'<angle>';
  initial-value:0deg;
  inherits:false;
}

.los-border-beam{
  --los-beam-strength:.58;
  --los-beam-width:2px;
  --los-beam-speed:2.7s;
  position:relative;
  isolation:isolate;
}

.los-border-beam>.los-beam-ring,
.los-border-beam>.los-beam-bloom{
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:2;
}

.los-beam-bloom{
  inset:-2px;
  z-index:1;
  opacity:calc(var(--los-beam-strength)*.32);
  filter:blur(10px);
}

/* Colorful rotate — narrow arc like Border Beam "colorful" mode */
.los-beam-colorful .los-beam-ring,
.los-beam-colorful .los-beam-bloom{
  background:conic-gradient(
    from var(--los-beam-angle),
    transparent 0deg,
    transparent 58deg,
    rgba(255,107,107,calc(var(--los-beam-strength)*.95)) 92deg,
    rgba(254,202,87,calc(var(--los-beam-strength)*.92)) 118deg,
    rgba(72,219,251,calc(var(--los-beam-strength)*.9)) 144deg,
    rgba(77,217,192,calc(var(--los-beam-strength)*.92)) 170deg,
    rgba(95,39,205,calc(var(--los-beam-strength)*.82)) 196deg,
    rgba(255,159,243,calc(var(--los-beam-strength)*.78)) 222deg,
    transparent 256deg,
    transparent 360deg
  );
}

.los-beam-ring{
  padding:var(--los-beam-width);
  -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:losBeamRotate var(--los-beam-speed) linear infinite;
}

.los-beam-bloom{
  animation:losBeamRotate var(--los-beam-speed) linear infinite;
}

.los-border-beam>:not(.los-beam-ring):not(.los-beam-bloom){
  position:relative;
  z-index:3;
}

.los-beam-line{--los-beam-width:1.5px;--los-beam-speed:2.4s}
.los-beam-sm{--los-beam-width:2px;--los-beam-strength:.5;--los-beam-speed:2.6s}
.los-beam-md{--los-beam-width:2.5px;--los-beam-strength:.58;--los-beam-speed:2.7s}
.los-beam-lg{--los-beam-width:3px;--los-beam-strength:.66;--los-beam-speed:3s}

[data-theme="light"] .los-beam-colorful .los-beam-ring,
[data-theme="light"] .los-beam-colorful .los-beam-bloom,
[data-theme="ocean"] .los-beam-colorful .los-beam-ring,
[data-theme="ocean"] .los-beam-colorful .los-beam-bloom{
  background:conic-gradient(
    from var(--los-beam-angle),
    transparent 0deg,
    transparent 58deg,
    rgba(226,76,110,calc(var(--los-beam-strength)*.88)) 92deg,
    rgba(196,142,18,calc(var(--los-beam-strength)*.86)) 118deg,
    rgba(0,151,178,calc(var(--los-beam-strength)*.9)) 144deg,
    rgba(26,143,160,calc(var(--los-beam-strength)*.92)) 170deg,
    rgba(88,62,170,calc(var(--los-beam-strength)*.78)) 196deg,
    rgba(176,141,26,calc(var(--los-beam-strength)*.72)) 222deg,
    transparent 256deg,
    transparent 360deg
  );
}

@keyframes losBeamRotate{
  0%{--los-beam-angle:0deg}
  100%{--los-beam-angle:360deg}
}

@media (prefers-reduced-motion:reduce){
  .los-beam-ring,.los-beam-bloom{display:none!important;animation:none!important}
}

html.los-motion-lite .los-beam-ring,
html.los-motion-lite .los-beam-bloom{
  display:none!important;
  animation:none!important;
}

html.los-tab-hidden .los-beam-ring,
html.los-tab-hidden .los-beam-bloom{
  display:none!important;
  animation:none!important;
}

@media (hover:none),(pointer:coarse),(prefers-reduced-data:reduce){
  .los-beam-ring,
  .los-beam-bloom{
    display:none!important;
    animation:none!important;
  }
}

@media (max-width:1500px){
  .los-beam-ring,
  .los-beam-bloom{
    display:none!important;
    animation:none!important;
  }
}

@media print{
  .los-beam-ring,.los-beam-bloom{display:none!important}
}

.pdf-rendering .los-beam-ring,.pdf-rendering .los-beam-bloom{display:none!important}