/* The box is the page colour and does not clip: the light glows past its edges (the page's .feat-media has overflow hidden). */
.feat-other-zero-blue { background: var(--bg); overflow: visible; }
/* The canvas is larger than the box (script.js sets its inset from the box size, never past the viewport sideways) so the
   bloom fades to nothing before any edge. It is clear wherever there is no light and never takes pointer events. */
.feat-other-zero-blue .scene { position: absolute; left: 0; top: 0; right: auto; bottom: auto; width: 100%; height: 100%; max-width: none; display: block; pointer-events: none; }
/* Labels under the four lights (Owen 2026-10-30). Dots sit at x 16 %, bars 37-86 %; rows at 30 % / 70 % of the height. */
.feat-other-zero-blue .lbl { position: absolute; z-index: 2; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  font: 500 clamp(9px, 0.85vw, 12px)/1.2 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-dim); }
.feat-other-zero-blue .lbl-a1, .feat-other-zero-blue .lbl-a2 { top: 42%; }
.feat-other-zero-blue .lbl-b1, .feat-other-zero-blue .lbl-b2 { top: 82%; }
.feat-other-zero-blue .lbl-a1, .feat-other-zero-blue .lbl-b1 { left: 16%; }
.feat-other-zero-blue .lbl-a2, .feat-other-zero-blue .lbl-b2 { left: 61.5%; }
/* phones: labels wrap to two centred lines instead of running off the left edge */
@media (max-width: 560px) {
  .feat-other-zero-blue .lbl { white-space: normal; text-align: center; letter-spacing: .08em; }
  .feat-other-zero-blue .lbl-a1, .feat-other-zero-blue .lbl-b1 { width: 28%; }
  .feat-other-zero-blue .lbl-a2, .feat-other-zero-blue .lbl-b2 { width: 54%; }
}