/* Dycode Light Rays — container overlay layering.
   The host establishes an isolated stacking context so the light layers can
   sit either behind (negative z-index) or in front of the content. */

.dycode-lr-host {
  position: relative;
  isolation: isolate;
}

/* Solid background color layer — always behind content. */
.dycode-lr-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

/* WebGL rays layer. */
.dycode-lr {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Behind the container content. */
.dycode-lr.is-below {
  z-index: -1;
}

/* In front of the container content (still click-through). */
.dycode-lr.is-above {
  z-index: 6;
}

.dycode-lr-canvas {
  display: block;
  width: 100%;
  height: 100%;
}