.oc-spotlight-normal,
.oc-spotlight-dense,
.oc-spotlight-nolight {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  --oc-mx: 50%;
  --oc-my: 50%;
  --ocpb-current-gap: var(--ocpb-normal-gap, 18px);
  background-color: var(--ocpb-bg-color, #0b1120);
  box-shadow: inset 0 0 120px rgba(0, 0, 0, var(--ocpb-vignette-opacity, 0.34));
}

.oc-spotlight-dense {
  --ocpb-current-gap: var(--ocpb-dense-gap, 9px);
}

.oc-spotlight-normal::before,
.oc-spotlight-dense::before,
.oc-spotlight-nolight::before,
.oc-spotlight-normal::after,
.oc-spotlight-dense::after,
.oc-spotlight-nolight::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-position: 0 0;
  background-repeat: repeat;
}

.oc-spotlight-normal::before,
.oc-spotlight-dense::before,
.oc-spotlight-nolight::before {
  z-index: 0;
  background-image: radial-gradient(
    circle at calc(var(--ocpb-current-gap) / 2) calc(var(--ocpb-current-gap) / 2),
    rgba(var(--ocpb-perf-rgb, 228, 236, 255), 1) var(--ocpb-perf-size, 1px),
    transparent var(--ocpb-perf-fade-size, 1.2px)
  );
  background-size: var(--ocpb-current-gap) var(--ocpb-current-gap);
  opacity: var(--ocpb-perf-opacity, 0.36);
}

.oc-spotlight-normal::after,
.oc-spotlight-dense::after,
.oc-spotlight-nolight::after {
  z-index: 0;
  background-image: radial-gradient(
    circle at calc(var(--ocpb-current-gap) / 2) calc(var(--ocpb-current-gap) / 2),
    rgba(var(--ocpb-highlight-rgb, 255, 255, 255), 1) var(--ocpb-highlight-size, 1px),
    transparent var(--ocpb-highlight-fade, 1.25px)
  );
  background-size: var(--ocpb-current-gap) var(--ocpb-current-gap);
  opacity: var(--ocpb-highlight-opacity, 0.9);
  -webkit-mask-image: radial-gradient(
    var(--ocpb-mask-size, 280px) var(--ocpb-mask-size, 280px) at var(--oc-mx) var(--oc-my),
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.85) 28%,
    rgba(0, 0, 0, 0) 68%
  );
  mask-image: radial-gradient(
    var(--ocpb-mask-size, 280px) var(--ocpb-mask-size, 280px) at var(--oc-mx) var(--oc-my),
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.85) 28%,
    rgba(0, 0, 0, 0) 68%
  );
  filter: drop-shadow(0 0 var(--ocpb-glow-blur, 18px) rgba(var(--ocpb-glow-rgb, 90, 130, 255), var(--ocpb-glow-opacity, 0.95)));
}

.oc-spotlight-nolight::after {
  -webkit-mask-image: radial-gradient(
    var(--ocpb-mask-size-nl, 320px) var(--ocpb-mask-size-nl, 320px) at var(--oc-mx) var(--oc-my),
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.9) 30%,
    rgba(0, 0, 0, 0.45) 52%,
    rgba(0, 0, 0, 0) 74%
  );
  mask-image: radial-gradient(
    var(--ocpb-mask-size-nl, 320px) var(--ocpb-mask-size-nl, 320px) at var(--oc-mx) var(--oc-my),
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.9) 30%,
    rgba(0, 0, 0, 0.45) 52%,
    rgba(0, 0, 0, 0) 74%
  );
  filter: drop-shadow(0 0 var(--ocpb-shadow-blur, 6px) rgba(var(--ocpb-shadow-rgb, 140, 180, 255), var(--ocpb-shadow-opacity, 0.22)));
}

.oc-spotlight-normal > *,
.oc-spotlight-dense > *,
.oc-spotlight-nolight > * {
  position: relative;
  z-index: 1;
}