/* n8 Cloud Host — WebGL background (N8Scene) canvas + no-WebGL fallback */
.n8-scene {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  contain: strict;
}
/* large viewport height: the canvas doesn't resize when mobile browser bars show/hide */
@supports (height: 100lvh) {
  .n8-scene { height: 100lvh !important; }
}
@media print {
  .n8-scene { display: none !important; }
}

/* Static fallback when WebGL is unavailable: a dot-grid "field" fading into the space background,
   with soft brand nebula glows. Layers (top → bottom): glows, vignette, dot grid.
   Painted once on its own fixed layer (not background-attachment: fixed on <body>, which forces a
   full-viewport repaint on every scroll frame). Content (main/footer) sits above it at z-index 1. */
html.n8-no-webgl body { background-color: #0d1218; }
html.n8-no-webgl body::before {
  content: "";
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(60% 45% at 22% 18%, rgba(0, 209, 232, 0.10), transparent 70%),
    radial-gradient(55% 50% at 82% 62%, rgba(113, 69, 204, 0.13), transparent 70%),
    radial-gradient(70% 60% at 50% 45%, rgba(13, 18, 24, 0) 0%, rgba(13, 18, 24, 0.55) 55%, #0d1218 85%),
    radial-gradient(circle at 50% 50%, rgba(0, 209, 232, 0.16) 0 1.6px, rgba(0, 84, 200, 0.06) 2.4px, transparent 3.2px);
  background-size: auto, auto, auto, 15px 15px;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  will-change: transform;
}
@supports (height: 100lvh) {
  html.n8-no-webgl body::before { height: 100lvh; }
}
@media (max-width: 768px) {
  html.n8-no-webgl body::before { background-size: auto, auto, auto, 19px 19px; }
}