/* A decorative grid and glow, isolated behind the existing page contents. */
.fr-ambient-host { position: relative; isolation: isolate; }
.fr-ambient {
  --fr-grid-step: 64px;
  --fr-grid-line: rgba(57, 105, 139, .075);
  --fr-grid-dot: rgba(41, 132, 145, .19);
  --fr-glow-teal: rgba(43, 203, 187, .10);
  --fr-glow-violet: rgba(119, 106, 209, .065);
  --fr-pointer-color: rgba(32, 158, 157, .10);
  --fr-pointer-glow: rgba(43, 203, 187, .045);
  --fr-pointer-x: 50%; --fr-pointer-y: 280px;
  --fr-pointer-alpha: 0;
  --fr-shift-x: 0px; --fr-shift-y: 0px;
  position: absolute; inset: 0; z-index: -1; overflow: hidden;
  pointer-events: none; user-select: none;
}
.fr-ambient::before {
  content: ""; position: absolute; inset: -4px;
  background-image: radial-gradient(circle at 1px 1px, var(--fr-grid-dot) .85px, transparent 1.25px),
    linear-gradient(to right, var(--fr-grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--fr-grid-line) 1px, transparent 1px);
  background-size: var(--fr-grid-step) var(--fr-grid-step);
  background-position: 4px 4px;
  mask-image: linear-gradient(to bottom, #000 0, rgba(0,0,0,.8) 650px, transparent 1500px);
  transform: translate(var(--fr-shift-x), var(--fr-shift-y));
}
.fr-ambient::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 720px 440px at 64% 290px, var(--fr-glow-teal), transparent 78%),
    radial-gradient(ellipse 840px 500px at 26% 840px, var(--fr-glow-violet), transparent 76%);
}
.fr-grid-motion { position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; transform: translate(var(--fr-shift-x), var(--fr-shift-y)); }
.fr-ambient-highlight {
  position: absolute; inset: 0; opacity: var(--fr-pointer-alpha);
  background-image: radial-gradient(circle 220px at var(--fr-pointer-x) var(--fr-pointer-y), var(--fr-pointer-glow), transparent 76%),
    linear-gradient(to right, var(--fr-pointer-color) 1px, transparent 1px), linear-gradient(to bottom, var(--fr-pointer-color) 1px, transparent 1px);
  background-size: 100% 100%, var(--fr-grid-step) var(--fr-grid-step), var(--fr-grid-step) var(--fr-grid-step);
  mask-image: radial-gradient(circle 210px at var(--fr-pointer-x) var(--fr-pointer-y), #000, transparent 76%);
  transform: translate(var(--fr-shift-x), var(--fr-shift-y));
}
.fr-motion-toggle { font-size: 12px; text-align: left; }
:root[data-theme="dark"] .fr-ambient {
  --fr-grid-line: rgba(78, 156, 173, .115);
  --fr-grid-dot: rgba(99, 204, 205, .27);
  --fr-glow-teal: rgba(28, 188, 177, .15);
  --fr-glow-violet: rgba(111, 87, 190, .12);
  --fr-pointer-color: rgba(91, 225, 207, .24);
  --fr-pointer-glow: rgba(43, 203, 187, .085);
}
@media (max-width: 560px) { .fr-ambient { --fr-grid-step: 48px; } }
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .fr-ambient-highlight { display: none; }
  .fr-ambient::before, .fr-grid-motion { transform: none; }
}