.bgx-animated-gradient {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(-45deg, oklch(from var(--c) 0.74 0.16 calc(h + 130)), oklch(from var(--c) 0.64 0.22 calc(h + 90)), var(--c), oklch(from var(--c) 0.78 0.13 calc(h - 80)));
  background-size: 400% 400%;
  animation: bgx-animated-gradient-pan 15s ease -4s infinite;
}
@keyframes bgx-animated-gradient-pan {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.bgx-aurora {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: oklch(from var(--c) 0.985 0.006 calc(h + 0));
  isolation: isolate;
}
.bgx-aurora span {
  position: absolute;
  left: -30%;
  right: -30%;
  top: var(--y);
  height: var(--h);
  border-radius: 50%;
  background: linear-gradient(90deg, transparent 4%, var(--a) 28%, var(--b) 54%, var(--e) 78%, transparent 96%);
  filter: blur(1.2em);
  mix-blend-mode: multiply;
  opacity: var(--o);
  animation: bgx-aurora-sway var(--t) cubic-bezier(0.45, 0, 0.55, 1) var(--d) infinite alternate;
}
.bgx-aurora span:nth-child(1) { --y: 2%; --h: 6em; --r: -10deg; --t: 9s; --d: -3s; --o: 0.85; --a: oklch(from var(--c) 0.74 0.15 calc(h + 0)); --b: oklch(from var(--c) 0.84 0.11 calc(h - 55)); --e: oklch(from var(--c) 0.72 0.17 calc(h + 45)); }
.bgx-aurora span:nth-child(2) { --y: 26%; --h: 4.5em; --r: 7deg; --t: 12s; --d: -8s; --o: 0.75; --a: oklch(from var(--c) 0.86 0.1 calc(h - 100)); --b: oklch(from var(--c) 0.76 0.14 calc(h + 0)); --e: oklch(from var(--c) 0.84 0.1 calc(h - 50)); }
.bgx-aurora span:nth-child(3) { --y: 46%; --h: 3.5em; --r: -14deg; --t: 7s; --d: -1s; --o: 0.6; --a: oklch(from var(--c) 0.76 0.15 calc(h + 60)); --b: oklch(from var(--c) 0.88 0.08 calc(h - 80)); --e: oklch(from var(--c) 0.76 0.14 calc(h + 0)); }
@keyframes bgx-aurora-sway {
  from { transform: translateX(-10%) rotate(var(--r)) scaleY(0.75); }
  to   { transform: translateX(10%) rotate(calc(var(--r) * -0.5)) scaleY(1.25); }
}

@property --bgx-mesh-gradient-t {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.bgx-mesh-gradient {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-color: oklch(from var(--c) 0.97 0.015 calc(h + 0));
  background-image:
    radial-gradient(at calc(18% + 14% * cos(var(--bgx-mesh-gradient-t))) calc(22% + 18% * sin(var(--bgx-mesh-gradient-t))), oklch(from var(--c) 0.76 0.15 calc(h + 0)) 0, transparent 55%),
    radial-gradient(at calc(84% - 12% * sin(var(--bgx-mesh-gradient-t))) calc(18% + 16% * cos(var(--bgx-mesh-gradient-t))), oklch(from var(--c) 0.8 0.13 calc(h + 70)) 0, transparent 52%),
    radial-gradient(at calc(68% + 16% * cos(var(--bgx-mesh-gradient-t) * 2)) calc(86% - 14% * sin(var(--bgx-mesh-gradient-t))), oklch(from var(--c) 0.84 0.12 calc(h - 70)) 0, transparent 55%),
    radial-gradient(at calc(24% - 14% * sin(var(--bgx-mesh-gradient-t) * 2)) calc(82% + 10% * cos(var(--bgx-mesh-gradient-t))), oklch(from var(--c) 0.86 0.1 calc(h + 150)) 0, transparent 50%);
  animation: bgx-mesh-gradient-orbit 14s linear infinite;
}
@keyframes bgx-mesh-gradient-orbit {
  to { --bgx-mesh-gradient-t: 360deg; }
}

.bgx-gradient-blobs {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: oklch(from var(--c) 0.985 0.008 calc(h + 0));
  isolation: isolate;
}
.bgx-gradient-blobs span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: max(12em, 27%);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 42% 58% 62% 38% / 44% 38% 62% 56%;
  background: linear-gradient(var(--a), var(--from), var(--to));
  opacity: 0.85;
  mix-blend-mode: multiply;
  animation:
    bgx-gradient-blobs-morph var(--t) ease-in-out var(--d) infinite alternate,
    bgx-gradient-blobs-drift calc(var(--t) * 1.6) ease-in-out var(--d) infinite alternate;
}
.bgx-gradient-blobs span:nth-child(1) { --x: 18%; --y: 32%; --a: 135deg; --from: oklch(from var(--c) 0.8 0.14 calc(h + 0)); --to: oklch(from var(--c) 0.74 0.17 calc(h + 60)); --t: 7s; --d: -2s; }
.bgx-gradient-blobs span:nth-child(2) { --x: 80%; --y: 30%; --a: 200deg; --from: oklch(from var(--c) 0.86 0.13 calc(h + 120)); --to: oklch(from var(--c) 0.78 0.15 calc(h + 170)); --t: 8.5s; --d: -5s; }
.bgx-gradient-blobs span:nth-child(3) { --x: 52%; --y: 80%; --a: 60deg; --from: oklch(from var(--c) 0.84 0.11 calc(h - 60)); --to: oklch(from var(--c) 0.72 0.15 calc(h - 20)); --t: 9.5s; --d: -1s; }
@keyframes bgx-gradient-blobs-morph {
  0%   { border-radius: 42% 58% 62% 38% / 44% 38% 62% 56%; }
  50%  { border-radius: 64% 36% 41% 59% / 57% 62% 38% 43%; }
  100% { border-radius: 36% 64% 55% 45% / 38% 51% 49% 62%; }
}
@keyframes bgx-gradient-blobs-drift {
  from { transform: translate(-8%, 5%) rotate(0deg); }
  to   { transform: translate(9%, -7%) rotate(50deg); }
}

.bgx-blurred-orbs {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #07080f;
  isolation: isolate;
}
.bgx-blurred-orbs span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  mix-blend-mode: screen;
  animation: bgx-blurred-orbs-orbit var(--t) linear var(--d) infinite var(--dir, normal);
}
.bgx-blurred-orbs span::before {
  content: "";
  position: absolute;
  left: var(--r);
  width: var(--size);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--o) 15%, transparent);
}
.bgx-blurred-orbs span:nth-child(1) { --x: 28%; --y: 42%; --r: 4em; --size: 20em; --t: 16s; --d: -3s; --o: oklch(from var(--c) 0.62 0.2 calc(h + 0) / 0.9); }
.bgx-blurred-orbs span:nth-child(2) { --x: 70%; --y: 55%; --r: 5em; --size: 18em; --t: 21s; --d: -11s; --dir: reverse; --o: oklch(from var(--c) 0.62 0.24 calc(h + 70) / 0.8); }
.bgx-blurred-orbs span:nth-child(3) { --x: 52%; --y: 20%; --r: 3.5em; --size: 15em; --t: 13s; --d: -6s; --o: oklch(from var(--c) 0.78 0.14 calc(h - 60) / 0.7); }
@keyframes bgx-blurred-orbs-orbit {
  to { transform: rotate(1turn); }
}

.bgx-lava-lamp {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
  isolation: isolate;
}
.bgx-lava-lamp-wax {
  position: absolute;
  inset: 0;
  background: #000;
  filter: contrast(24);
}
.bgx-lava-lamp-wax::before,
.bgx-lava-lamp-wax::after {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  border-radius: 50%;
  background: #fff;
  filter: blur(1em);
}
.bgx-lava-lamp-wax::before { bottom: -3.4em; height: 6em; }
.bgx-lava-lamp-wax::after { top: -3.8em; height: 5.4em; }
.bgx-lava-lamp-wax span {
  position: absolute;
  top: 0;
  left: var(--x);
  width: var(--size);
  height: 100%;
  animation: bgx-lava-lamp-rise var(--t) cubic-bezier(0.45, 0, 0.55, 1) var(--d) infinite;
}
.bgx-lava-lamp-wax span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  aspect-ratio: 1;
  translate: 0 -50%;
  border-radius: 50%;
  background: #fff;
  filter: blur(1em);
  animation: bgx-lava-lamp-squish calc(var(--t) / 2) ease-in-out var(--d) infinite alternate;
}
.bgx-lava-lamp-wax span:nth-child(1) { --x: 8%; --size: 5em; --t: 13s; --d: -2s; }
.bgx-lava-lamp-wax span:nth-child(2) { --x: 26%; --size: 3.6em; --t: 10s; --d: -7s; }
.bgx-lava-lamp-wax span:nth-child(3) { --x: 42%; --size: 6.2em; --t: 16s; --d: -12s; }
.bgx-lava-lamp-wax span:nth-child(4) { --x: 60%; --size: 4.2em; --t: 11.5s; --d: -4s; }
.bgx-lava-lamp-wax span:nth-child(5) { --x: 74%; --size: 5.6em; --t: 14s; --d: -9s; }
.bgx-lava-lamp-wax span:nth-child(6) { --x: 88%; --size: 3.8em; --t: 9s; --d: -1s; }
.bgx-lava-lamp::before,
.bgx-lava-lamp::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.bgx-lava-lamp::before {
  z-index: 1;
  background: linear-gradient(to top, oklch(from var(--c) 0.72 0.19 calc(h + 120)), oklch(from var(--c) 0.64 0.24 calc(h + 80)) 55%, oklch(from var(--c) 0.58 0.22 calc(h + 40)));
  mix-blend-mode: multiply;
}
.bgx-lava-lamp::after {
  z-index: 2;
  background: radial-gradient(ellipse 80% 70% at 50% 50%, oklch(from var(--c) 0.26 0.08 calc(h + 60)), oklch(from var(--c) 0.16 0.05 calc(h + 40)));
  mix-blend-mode: lighten;
}
@keyframes bgx-lava-lamp-rise {
  0%, 100% { transform: translate(0, 54%); }
  50%      { transform: translate(18%, -54%); }
}
@keyframes bgx-lava-lamp-squish {
  from { transform: scale(1, 1); }
  to   { transform: scale(0.84, 1.2); }
}

.bgx-holographic {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(160deg, #eef0f6, #dde3ee 45%, #f3eef7);
  isolation: isolate;
}
.bgx-holographic::before,
.bgx-holographic::after {
  content: "";
  position: absolute;
  inset: -80% -30%;
  animation: bgx-holographic-slide var(--t) linear infinite var(--dir, normal);
}
.bgx-holographic::before {
  --tile: 26em;
  --t: 9s;
  background: linear-gradient(90deg, oklch(from var(--c) 0.86 0.11 calc(h + 0)), oklch(from var(--c) 0.88 0.1 calc(h + 60)), oklch(from var(--c) 0.9 0.1 calc(h + 120)), oklch(from var(--c) 0.88 0.1 calc(h + 180)), oklch(from var(--c) 0.86 0.11 calc(h + 240)), oklch(from var(--c) 0.86 0.12 calc(h + 300)), oklch(from var(--c) 0.86 0.11 calc(h + 0))) 0 0 / var(--tile) 100%;
  transform: rotate(-28deg);
  mix-blend-mode: multiply;
}
.bgx-holographic::after {
  --tile: 4.5em;
  --t: 6s;
  --dir: reverse;
  background: linear-gradient(90deg, rgb(255 255 255 / 0), rgb(255 255 255 / 0.75) 35%, rgb(255 255 255 / 0) 55%, rgb(40 40 70 / 0.12) 80%, rgb(255 255 255 / 0)) 0 0 / var(--tile) 100%;
  transform: rotate(38deg);
  mix-blend-mode: soft-light;
}
.bgx-holographic span {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 38%, rgb(255 255 255 / 0.7) 50%, transparent 62%) 0 0 / 300% 100% no-repeat;
  mix-blend-mode: screen;
  animation: bgx-holographic-glare 5s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}
@keyframes bgx-holographic-slide {
  to { background-position: var(--tile) 0; }
}
@keyframes bgx-holographic-glare {
  0%        { background-position: 100% 0; }
  60%, 100% { background-position: 0% 0; }
}

.bgx-conic-gradient {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #06070d;
}
.bgx-conic-gradient::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 300%;
  aspect-ratio: 1;
  translate: -50% -50%;
  background: conic-gradient(var(--c), oklch(from var(--c) 0.66 0.24 calc(h + 80)), oklch(from var(--c) 0.8 0.16 calc(h + 150)), oklch(from var(--c) 0.74 0.14 calc(h - 70)), var(--c));
  opacity: 0.85;
  animation: bgx-conic-gradient-spin 18s linear infinite;
}
.bgx-conic-gradient::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgb(6 7 13 / 0.55), transparent 22%),
    radial-gradient(ellipse 75% 95% at 50% 50%, transparent 30%, rgb(6 7 13 / 0.85));
}
@keyframes bgx-conic-gradient-spin {
  to { transform: rotate(1turn); }
}

.bgx-northern-lights {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(#02040b, #050d1f 45%, #0a2033 80%, #0e2a3a);
  isolation: isolate;
}
.bgx-northern-lights span:nth-child(-n + 2) {
  position: absolute;
  top: var(--top);
  bottom: var(--bottom);
  left: -25%;
  right: -25%;
  background:
    linear-gradient(90deg, transparent 0 30%, rgb(2 4 11 / 0.4) 55%, transparent 80%) 0 0 / 1.3em 100%,
    linear-gradient(90deg, transparent 0 20%, rgb(2 4 11 / 0.5) 60%, transparent) 0 0 / 3.1em 100%,
    linear-gradient(to top, transparent, var(--low) 12%, var(--mid) 38%, var(--high) 68%, transparent);
  mix-blend-mode: screen;
  opacity: var(--o);
  transform-origin: 50% 100%;
  animation:
    bgx-northern-lights-sway var(--t) ease-in-out var(--d) infinite alternate,
    bgx-northern-lights-rays 10s linear infinite;
}
.bgx-northern-lights span:nth-child(1) { --top: 4%; --bottom: 34%; --r: -7deg; --t: 7s; --d: -2s; --o: 0.9; --low: #52ffb8; --mid: #22d3a4; --high: oklch(from var(--c) 0.55 0.2 calc(h + 40)); }
.bgx-northern-lights span:nth-child(2) { --top: 14%; --bottom: 26%; --r: 9deg; --t: 9s; --d: -6s; --o: 0.7; --low: #7dffd0; --mid: oklch(from var(--c) 0.72 0.15 calc(h - 60)); --high: var(--c); }
.bgx-northern-lights span:nth-child(n + 3) {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}
.bgx-northern-lights span:nth-child(3) {
  height: 38%;
  background: #0b1a2b;
  clip-path: polygon(0 100%, 0 46%, 9% 30%, 16% 42%, 27% 12%, 36% 36%, 44% 26%, 55% 48%, 66% 18%, 75% 38%, 84% 24%, 93% 40%, 100% 30%, 100% 100%);
}
.bgx-northern-lights span:nth-child(4) {
  height: 24%;
  background: #03070e;
  clip-path: polygon(0 100%, 0 40%, 12% 58%, 22% 30%, 31% 52%, 43% 44%, 52% 62%, 63% 34%, 72% 54%, 83% 40%, 92% 60%, 100% 46%, 100% 100%);
}
@keyframes bgx-northern-lights-sway {
  from { transform: rotate(var(--r)) translateX(-5%) skewX(-18deg) scaleY(0.9); }
  to   { transform: rotate(var(--r)) translateX(5%) skewX(16deg) scaleY(1.08); }
}
@keyframes bgx-northern-lights-rays {
  to { background-position: 2.6em 0, -3.1em 0, 0 0; }
}

.bgx-sunset-sky {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  --t: 20s;
  --d: -9.6s;
  background: linear-gradient(oklch(from var(--c) 0.58 0.14 calc(h + 0)), oklch(from var(--c) 0.86 0.07 calc(h - 15)) 75%);
}
.bgx-sunset-sky span {
  position: absolute;
}
.bgx-sunset-sky-dusk,
.bgx-sunset-sky-night {
  inset: 0;
}
.bgx-sunset-sky-dusk {
  background: linear-gradient(#27266a, #8c3d88 38%, #f0735a 70%, #ffc27a);
  animation: bgx-sunset-sky-dusk var(--t) linear var(--d) infinite;
}
.bgx-sunset-sky-night {
  background: linear-gradient(#02030f, #0a1230 60%, #1b2350);
  animation: bgx-sunset-sky-night var(--t) linear var(--d) infinite;
}
.bgx-sunset-sky-arm {
  left: 50%;
  top: 100%;
  animation: bgx-sunset-sky-turn var(--t) linear var(--d) infinite;
}
.bgx-sunset-sky-arm::before,
.bgx-sunset-sky-arm::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  translate: -50% -50%;
}
.bgx-sunset-sky-arm::before {
  top: -13em;
  width: 3.2em;
  aspect-ratio: 1;
  background: radial-gradient(circle at 45% 40%, #fffbe6, #ffd166 55%, #ff9f43);
  box-shadow: 0 0 2.5em 0.6em rgb(255 190 100 / 0.55);
}
.bgx-sunset-sky-arm::after {
  top: 13em;
  width: 2.2em;
  aspect-ratio: 1;
  background: #eef2ff;
  box-shadow: inset -0.55em -0.2em 0 #c3cbe6, 0 0 1.6em rgb(220 228 255 / 0.35);
}
.bgx-sunset-sky-hills {
  left: -5%;
  right: -5%;
  bottom: 0;
  height: 28%;
  background:
    radial-gradient(ellipse 38% 100% at 22% 100%, #1d2b3a 98%, transparent 100%),
    radial-gradient(ellipse 45% 85% at 78% 100%, #14202d 98%, transparent 100%),
    linear-gradient(transparent 55%, #101a26 56%);
}
.bgx-sunset-sky-hills::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  filter: brightness(0.35);
  animation: bgx-sunset-sky-night var(--t) linear var(--d) infinite;
}
@keyframes bgx-sunset-sky-turn {
  0%   { transform: rotate(-100deg); }
  62%  { transform: rotate(100deg); }
  100% { transform: rotate(260deg); }
}
@keyframes bgx-sunset-sky-dusk {
  0%, 100% { opacity: 0.7; }
  4%  { opacity: 0.9; }
  10% { opacity: 0.5; }
  16%, 40%, 66% { opacity: 0; }
  48% { opacity: 0.7; }
  54% { opacity: 1; }
  60% { opacity: 0.6; }
}
@keyframes bgx-sunset-sky-night {
  0%, 100% { opacity: 0.75; }
  6%  { opacity: 0.25; }
  10%, 50% { opacity: 0; }
  56% { opacity: 0.35; }
  64%, 94% { opacity: 1; }
}

.bgx-skewed-gradient-hero {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: oklch(from var(--c) 0.985 0.006 calc(h + 0));
}
.bgx-skewed-gradient-hero span {
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 100% 38%, 0 86%);
  background:
    radial-gradient(ellipse 36% 60% at 30% 62%, oklch(from var(--c) 0.7 0.24 calc(h + 70)), transparent 70%) 0 0 / 60em 100%,
    radial-gradient(ellipse 32% 70% at 70% 38%, oklch(from var(--c) 0.86 0.16 calc(h + 150)), transparent 70%) 0 0 / 44em 100%,
    linear-gradient(90deg, var(--c), oklch(from var(--c) 0.62 0.2 calc(h - 40)), oklch(from var(--c) 0.72 0.2 calc(h + 40)), var(--c)) 0 0 / 52em 100%;
  animation: bgx-skewed-gradient-hero-flow 24s linear infinite;
}
.bgx-skewed-gradient-hero span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(255 255 255 / 0.18), transparent 40%);
}
@keyframes bgx-skewed-gradient-hero-flow {
  to { background-position: 60em 0, -44em 0, 52em 0; }
}

.bgx-grainy-gradient {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(150deg, oklch(from var(--c) 0.3 0.1 calc(h + 60)), oklch(from var(--c) 0.2 0.08 calc(h - 10)) 60%, oklch(from var(--c) 0.16 0.06 calc(h - 40)));
  isolation: isolate;
}
.bgx-grainy-gradient span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: max(22em, 50%);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--o), transparent);
  animation: bgx-grainy-gradient-drift var(--t) ease-in-out var(--d) infinite alternate;
}
.bgx-grainy-gradient span:nth-child(1) { --x: 28%; --y: 70%; --o: oklch(from var(--c) 0.7 0.2 calc(h + 110)); --t: 9s; --d: -2s; }
.bgx-grainy-gradient span:nth-child(2) { --x: 74%; --y: 26%; --o: oklch(from var(--c) 0.62 0.24 calc(h + 60)); --t: 11s; --d: -7s; }
.bgx-grainy-gradient-grain {
  position: absolute;
  inset: 0;
  mix-blend-mode: overlay;
  opacity: 0.55;
}
@keyframes bgx-grainy-gradient-drift {
  from { transform: translate(-18%, 10%) scale(0.9); }
  to   { transform: translate(16%, -12%) scale(1.15); }
}

.bgx-spotlight {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 30% at 50% 100%, oklch(from var(--c) 0.3 0.05 calc(h + 0) / 0.6), transparent 70%),
    linear-gradient(#030408, #0b0d14);
  isolation: isolate;
}
.bgx-spotlight span {
  position: absolute;
  top: -1em;
  left: var(--x);
  width: 40em;
  height: 160%;
  translate: -50% 0;
  transform-origin: 50% 0;
  background: conic-gradient(from 162deg at 50% 0%, transparent, var(--beam) 12deg 24deg, transparent 36deg);
  -webkit-mask-image: linear-gradient(#000 10%, transparent 75%);
  mask-image: linear-gradient(#000 10%, transparent 75%);
  mix-blend-mode: screen;
  animation: bgx-spotlight-sweep var(--t) cubic-bezier(0.45, 0, 0.55, 1) var(--d) infinite alternate;
}
.bgx-spotlight span:nth-child(1) { --x: 30%; --a: -28deg; --b: 30deg; --t: 5s; --d: -1s; --beam: oklch(from var(--c) 0.92 0.06 calc(h + 0) / 0.55); }
.bgx-spotlight span:nth-child(2) { --x: 70%; --a: 28deg; --b: -30deg; --t: 6.2s; --d: -4s; --beam: oklch(from var(--c) 0.86 0.12 calc(h + 60) / 0.5); }
.bgx-spotlight::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -3em;
  width: 22em;
  height: 6em;
  translate: -50% 0;
  background: radial-gradient(closest-side, oklch(from var(--c) 0.9 0.06 calc(h + 0) / 0.35), transparent);
}
@keyframes bgx-spotlight-sweep {
  from { transform: rotate(var(--a)); }
  to   { transform: rotate(var(--b)); }
}

.bgx-underwater {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(oklch(from var(--c) 0.62 0.11 calc(h - 60)), oklch(from var(--c) 0.36 0.09 calc(h - 45)) 45%, oklch(from var(--c) 0.14 0.04 calc(h - 30)));
  isolation: isolate;
}
.bgx-underwater::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 45%;
  background:
    radial-gradient(ellipse 50% 42% at 50% 50%, transparent 58%, rgb(255 255 255 / 0.35) 70%, transparent 80%) 0 0 / 3.2em 1.6em,
    radial-gradient(ellipse 50% 42% at 50% 50%, transparent 55%, rgb(255 255 255 / 0.28) 68%, transparent 80%) 0 0 / 4.4em 2.1em;
  -webkit-mask-image: linear-gradient(#000, transparent);
  mask-image: linear-gradient(#000, transparent);
  mix-blend-mode: soft-light;
  animation: bgx-underwater-caustics 6s linear infinite;
}
.bgx-underwater span {
  position: absolute;
  top: -10%;
  left: var(--x);
  width: var(--w);
  height: 130%;
  background: linear-gradient(oklch(from var(--c) 0.97 0.04 calc(h - 60) / 0.5), transparent 80%);
  transform-origin: 50% 0;
  filter: blur(0.5em);
  mix-blend-mode: screen;
  animation: bgx-underwater-shaft var(--t) ease-in-out var(--d) infinite alternate;
}
.bgx-underwater span:nth-child(1) { --x: 14%; --w: 2.2em; --t: 5s; --d: -1s; }
.bgx-underwater span:nth-child(2) { --x: 36%; --w: 4em; --t: 6.5s; --d: -3s; }
.bgx-underwater span:nth-child(3) { --x: 60%; --w: 1.6em; --t: 4.2s; --d: -2s; }
.bgx-underwater span:nth-child(4) { --x: 80%; --w: 3.2em; --t: 7s; --d: -5s; }
@keyframes bgx-underwater-shaft {
  from { transform: rotate(18deg) skewX(-6deg); opacity: 0.35; }
  to   { transform: rotate(26deg) skewX(6deg); opacity: 0.9; }
}
@keyframes bgx-underwater-caustics {
  to { background-position: 6.4em 1.6em, -4.4em 2.1em; }
}

.bgx-breathing-glow {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #050608;
}
.bgx-breathing-glow span {
  position: absolute;
  left: 50%;
  top: 50%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  animation: bgx-breathing-glow-breathe 6s cubic-bezier(0.45, 0, 0.55, 1) var(--d) infinite;
}
.bgx-breathing-glow span:nth-child(1) {
  --d: -0.4s;
  width: max(34em, 60%);
  background: radial-gradient(closest-side, oklch(from var(--c) 0.62 0.18 calc(h + 40) / 0.5), oklch(from var(--c) 0.5 0.16 calc(h + 40) / 0.18) 55%, transparent);
}
.bgx-breathing-glow span:nth-child(2) {
  --d: -1s;
  width: max(16em, 30%);
  background: radial-gradient(closest-side, oklch(from var(--c) 0.95 0.05 calc(h + 0) / 0.9), oklch(from var(--c) 0.7 0.18 calc(h + 0) / 0.7) 35%, oklch(from var(--c) 0.6 0.2 calc(h + 0) / 0.2) 70%, transparent);
}
@keyframes bgx-breathing-glow-breathe {
  0%, 100% { transform: scale(0.72); opacity: 0.45; }
  40%      { transform: scale(1.06); opacity: 1; }
  55%      { transform: scale(1.02); opacity: 0.95; }
}

.bgx-color-changing {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-color: var(--c);
  animation: bgx-color-changing-cycle 12s ease-in-out -1s infinite;
}
.bgx-color-changing::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 70% at 50% 0%, rgb(255 255 255 / 0.22), transparent 70%),
    linear-gradient(transparent 50%, rgb(0 0 0 / 0.18));
}
@keyframes bgx-color-changing-cycle {
  0%, 100% { background-color: var(--c); }
  25%      { background-color: oklch(from var(--c) 0.66 0.2 calc(h + 70)); }
  50%      { background-color: oklch(from var(--c) 0.72 0.17 calc(h + 150)); }
  75%      { background-color: oklch(from var(--c) 0.7 0.15 calc(h - 70)); }
}

@property --bgx-rainbow-h {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
.bgx-rainbow {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(120deg,
    oklch(from var(--c) 0.7 0.19 calc(h + var(--bgx-rainbow-h))),
    oklch(from var(--c) 0.72 0.18 calc(h + var(--bgx-rainbow-h) + 60)),
    oklch(from var(--c) 0.8 0.17 calc(h + var(--bgx-rainbow-h) + 120)),
    oklch(from var(--c) 0.76 0.15 calc(h + var(--bgx-rainbow-h) + 180)),
    oklch(from var(--c) 0.7 0.17 calc(h + var(--bgx-rainbow-h) + 240)),
    oklch(from var(--c) 0.68 0.2 calc(h + var(--bgx-rainbow-h) + 300)));
  animation: bgx-rainbow-roll 8s linear infinite;
}
@keyframes bgx-rainbow-roll {
  to { --bgx-rainbow-h: 360; }
}

.bgx-marble {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #f3f1ee;
}
.bgx-marble-defs {
  position: absolute;
}
.bgx-marble span {
  position: absolute;
  inset: -45%;
  background: linear-gradient(90deg,
    #f3f1ee 0% 20%, oklch(from var(--c) 0.55 0.12 calc(h + 0)) 23%, #f3f1ee 26%,
    #e7e3de 45%, #c8a25c 47%, #f3f1ee 50% 70%,
    #2a2a33 72%, #f3f1ee 75% 100%) 0 0 / 12em 100%;
  transform: rotate(-20deg);
  filter: url(#bgx-marble-warp);
  animation: bgx-marble-flow 20s linear infinite;
}
@keyframes bgx-marble-flow {
  to { background-position: 12em 0; }
}

.bgx-ambient-glow {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #09090b;
}
.bgx-ambient-glow span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: max(30em, 60%);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--o), transparent);
  animation: bgx-ambient-glow-pulse 6s cubic-bezier(0.4, 0, 0.6, 1) var(--d) infinite;
}
.bgx-ambient-glow span:nth-child(1) { --x: 6%; --y: 0%; --d: 0s; --o: oklch(from var(--c) 0.62 0.2 calc(h + 0) / 0.62); }
.bgx-ambient-glow span:nth-child(2) { --x: 94%; --y: 100%; --d: -3s; --o: oklch(from var(--c) 0.62 0.22 calc(h + 60) / 0.52); }
.bgx-ambient-glow::after {
  content: "";
  position: absolute;
  left: 15%;
  right: 15%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, oklch(from var(--c) 0.88 0.1 calc(h + 0) / 0.95), transparent);
}
@keyframes bgx-ambient-glow-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

.bgx-fire-glow {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(to top, #1f0703, #0b0404 55%, #050303);
  isolation: isolate;
}
.bgx-fire-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 75% 60% at 50% 100%, rgb(255 120 40 / 0.55), rgb(200 40 10 / 0.25) 50%, transparent 78%);
  transform-origin: 50% 100%;
  animation: bgx-fire-glow-heat 3s ease-in-out infinite alternate;
}
.bgx-fire-glow::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.2em;
  background: linear-gradient(to top, oklch(from var(--c) 0.66 0.2 calc(h + 0) / 0.5), transparent);
  mix-blend-mode: screen;
}
.bgx-fire-glow span {
  position: absolute;
  left: var(--x);
  bottom: -1em;
  width: var(--w);
  height: calc(var(--w) * 1.9);
  translate: -50% 0;
  transform-origin: 50% 100%;
  mix-blend-mode: screen;
  animation: bgx-fire-glow-flicker var(--t) ease-in-out var(--d) infinite alternate;
}
.bgx-fire-glow span::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50% 0 50% 50%;
  background: radial-gradient(circle at 34% 66%, #fff6cf, #ffd04a 22%, #ff7a1a 50%, rgb(220 40 10 / 0.7) 78%, transparent);
  transform: scaleY(1.9) rotate(-45deg);
  transform-origin: 50% 100%;
  filter: blur(0.45em);
}
.bgx-fire-glow span:nth-child(1) { --x: 10%; --w: 5em; --t: 1.3s; --d: -0.2s; }
.bgx-fire-glow span:nth-child(2) { --x: 26%; --w: 6.5em; --t: 1.7s; --d: -0.9s; }
.bgx-fire-glow span:nth-child(3) { --x: 42%; --w: 5.5em; --t: 1.1s; --d: -0.5s; }
.bgx-fire-glow span:nth-child(4) { --x: 57%; --w: 7em; --t: 1.9s; --d: -1.3s; }
.bgx-fire-glow span:nth-child(5) { --x: 72%; --w: 5em; --t: 1.4s; --d: -0.3s; }
.bgx-fire-glow span:nth-child(6) { --x: 87%; --w: 6em; --t: 1.6s; --d: -1.1s; }
.bgx-fire-glow span:nth-child(7) { --x: 50%; --w: 4em; --t: 1.2s; --d: -0.7s; }
@keyframes bgx-fire-glow-flicker {
  0%   { transform: scale(1, 0.82) skewX(-5deg); opacity: 0.8; }
  50%  { transform: scale(0.9, 1.12) skewX(4deg); opacity: 1; }
  100% { transform: scale(1.04, 0.94) skewX(-2deg); opacity: 0.9; }
}
@keyframes bgx-fire-glow-heat {
  from { transform: scaleY(0.9); opacity: 0.75; }
  to   { transform: scaleY(1.08); opacity: 1; }
}

@property --bgx-morphing-gradient-a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 135deg;
}
@property --bgx-morphing-gradient-c1 {
  syntax: "<color>";
  inherits: false;
  initial-value: #3b82f6;
}
@property --bgx-morphing-gradient-c2 {
  syntax: "<color>";
  inherits: false;
  initial-value: #a855f7;
}
@property --bgx-morphing-gradient-c3 {
  syntax: "<color>";
  inherits: false;
  initial-value: #f97316;
}
.bgx-morphing-gradient {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(var(--bgx-morphing-gradient-a), var(--bgx-morphing-gradient-c1), var(--bgx-morphing-gradient-c2), var(--bgx-morphing-gradient-c3));
  animation: bgx-morphing-gradient-morph 12s ease-in-out -2s infinite;
}
@keyframes bgx-morphing-gradient-morph {
  0% {
    --bgx-morphing-gradient-a: 135deg;
    --bgx-morphing-gradient-c1: var(--c);
    --bgx-morphing-gradient-c2: oklch(from var(--c) 0.62 0.22 calc(h + 60));
    --bgx-morphing-gradient-c3: oklch(from var(--c) 0.78 0.15 calc(h + 130));
  }
  33% {
    --bgx-morphing-gradient-a: 255deg;
    --bgx-morphing-gradient-c1: oklch(from var(--c) 0.74 0.16 calc(h - 60));
    --bgx-morphing-gradient-c2: var(--c);
    --bgx-morphing-gradient-c3: oklch(from var(--c) 0.68 0.21 calc(h + 60));
  }
  66% {
    --bgx-morphing-gradient-a: 375deg;
    --bgx-morphing-gradient-c1: oklch(from var(--c) 0.7 0.19 calc(h + 30));
    --bgx-morphing-gradient-c2: oklch(from var(--c) 0.8 0.15 calc(h + 100));
    --bgx-morphing-gradient-c3: oklch(from var(--c) 0.76 0.15 calc(h + 170));
  }
  100% {
    --bgx-morphing-gradient-a: 495deg;
    --bgx-morphing-gradient-c1: var(--c);
    --bgx-morphing-gradient-c2: oklch(from var(--c) 0.62 0.22 calc(h + 60));
    --bgx-morphing-gradient-c3: oklch(from var(--c) 0.78 0.15 calc(h + 130));
  }
}

.bgx-neon-glow {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  --n1: oklch(from var(--c) 0.66 0.27 calc(h + 70));
  --n2: oklch(from var(--c) 0.84 0.14 calc(h - 60));
  background: linear-gradient(#0a0514, #0d0719 64%, #05030a 64%, #0b0714);
  isolation: isolate;
}
.bgx-neon-glow span {
  position: absolute;
  mix-blend-mode: screen;
  animation: bgx-neon-glow-flicker var(--t) linear var(--d) infinite;
}
.bgx-neon-glow span:nth-child(-n + 4) {
  left: calc(var(--x) - max(11em, 21%));
  width: max(22em, 42%);
}
.bgx-neon-glow span:nth-child(1),
.bgx-neon-glow span:nth-child(2) {
  top: -20%;
  height: 90%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--n), transparent);
}
.bgx-neon-glow span:nth-child(1)::before,
.bgx-neon-glow span:nth-child(2)::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 24%;
  width: 0.32em;
  height: 44%;
  translate: -50% 0;
  border-radius: 1em;
  background: color-mix(in srgb, var(--n) 45%, #fff);
  box-shadow: 0 0 0.5em 0.1em var(--n), 0 0 2.2em 0.4em var(--n);
}
.bgx-neon-glow span:nth-child(odd):not(:last-child) { --x: 20%; --n: var(--n1); --t: 7s; --d: -1s; }
.bgx-neon-glow span:nth-child(even) { --x: 80%; --n: var(--n2); --t: 5.3s; --d: -3s; }
.bgx-neon-glow span:nth-child(3),
.bgx-neon-glow span:nth-child(4) {
  top: 64%;
  bottom: 0;
  background:
    repeating-linear-gradient(transparent 0 0.3em, rgb(5 3 10 / 0.6) 0.3em 0.42em),
    radial-gradient(ellipse 16% 100% at 50% 0%, var(--n), transparent);
  opacity: 0.7;
  animation:
    bgx-neon-glow-flicker var(--t) linear var(--d) infinite,
    bgx-neon-glow-ripple 1.4s linear infinite;
}
.bgx-neon-glow span:nth-child(5) {
  left: -20%;
  right: -20%;
  top: 26%;
  height: 32%;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--n1) 30%, transparent) 30%, color-mix(in srgb, var(--n2) 26%, transparent) 70%, transparent);
  filter: blur(1.4em);
  animation: bgx-neon-glow-haze 9s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
@keyframes bgx-neon-glow-flicker {
  0%, 17%, 21%, 24%, 58%, 61%, 100% { opacity: 1; }
  19%, 23% { opacity: 0.35; }
  59.5%    { opacity: 0.6; }
}
@keyframes bgx-neon-glow-ripple {
  to { background-position: 0 0.42em, 0 0; }
}
@keyframes bgx-neon-glow-haze {
  from { transform: translateX(-8%) scaleY(0.8); opacity: 0.6; }
  to   { transform: translateX(8%) scaleY(1.2); opacity: 1; }
}

.bgx-silk {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: oklch(from var(--c) 0.3 0.12 calc(h + 0));
}
.bgx-silk-defs {
  position: absolute;
}
.bgx-silk span {
  position: absolute;
  inset: -7em;
  background: linear-gradient(90deg,
    oklch(from var(--c) 0.22 0.1 calc(h + 0)), oklch(from var(--c) 0.38 0.14 calc(h + 0)) 30%, oklch(from var(--c) 0.75 0.1 calc(h + 0)) 42%, oklch(from var(--c) 0.45 0.15 calc(h + 0)) 52%,
    oklch(from var(--c) 0.28 0.12 calc(h + 0)) 70%, oklch(from var(--c) 0.5 0.14 calc(h + 0)) 85%, oklch(from var(--c) 0.22 0.1 calc(h + 0))) 0 0 / 16em 100%;
  filter: url(#bgx-silk-fold);
  animation: bgx-silk-sway 12s linear infinite;
}
@keyframes bgx-silk-sway {
  to { background-position: 16em 0; }
}

.bgx-watercolor-bloom {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #fbf8f2;
  isolation: isolate;
}
.bgx-watercolor-bloom-defs {
  position: absolute;
}
.bgx-watercolor-bloom span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  aspect-ratio: 1.2;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--p) 0%, var(--p) 55%, var(--rim) 86%, transparent 95%);
  filter: url(#bgx-watercolor-bloom-edge);
  mix-blend-mode: multiply;
  opacity: 0;
  animation: bgx-watercolor-bloom-spread 10s cubic-bezier(0.2, 0.7, 0.3, 1) var(--d) infinite;
}
.bgx-watercolor-bloom span:nth-child(1) { --x: 22%; --y: 38%; --w: 15em; --d: 0s; --p: oklch(from var(--c) 0.8 0.1 calc(h + 0) / 0.45); --rim: oklch(from var(--c) 0.6 0.15 calc(h + 0) / 0.7); }
.bgx-watercolor-bloom span:nth-child(2) { --x: 60%; --y: 62%; --w: 17em; --d: -2s; --p: oklch(from var(--c) 0.82 0.1 calc(h + 60) / 0.45); --rim: oklch(from var(--c) 0.62 0.16 calc(h + 60) / 0.7); }
.bgx-watercolor-bloom span:nth-child(3) { --x: 82%; --y: 28%; --w: 13em; --d: -4s; --p: oklch(from var(--c) 0.86 0.1 calc(h - 60) / 0.45); --rim: oklch(from var(--c) 0.66 0.13 calc(h - 60) / 0.7); }
.bgx-watercolor-bloom span:nth-child(4) { --x: 40%; --y: 20%; --w: 12em; --d: -6s; --p: oklch(from var(--c) 0.86 0.1 calc(h + 130) / 0.45); --rim: oklch(from var(--c) 0.68 0.14 calc(h + 130) / 0.7); }
.bgx-watercolor-bloom span:nth-child(5) { --x: 12%; --y: 78%; --w: 14em; --d: -8s; --p: oklch(from var(--c) 0.8 0.1 calc(h + 30) / 0.45); --rim: oklch(from var(--c) 0.6 0.15 calc(h + 30) / 0.7); }
@keyframes bgx-watercolor-bloom-spread {
  0%   { transform: scale(0.3) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  55%  { transform: scale(1) rotate(12deg); opacity: 1; }
  100% { transform: scale(1.06) rotate(16deg); opacity: 0; }
}

.bgx-edge-glow {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #050508;
}
.bgx-edge-glow span {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, #000, transparent var(--f) calc(100% - var(--f)), #000), linear-gradient(#000, transparent var(--f) calc(100% - var(--f)), #000);
  mask-image: linear-gradient(to right, #000, transparent var(--f) calc(100% - var(--f)), #000), linear-gradient(#000, transparent var(--f) calc(100% - var(--f)), #000);
}
.bgx-edge-glow span:nth-child(1) { --f: 4em; opacity: 0.7; }
.bgx-edge-glow span:nth-child(2) { --f: 0.6em; }
.bgx-edge-glow span::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 250%;
  aspect-ratio: 1;
  translate: -50% -50%;
  background: conic-gradient(var(--c), oklch(from var(--c) 0.68 0.24 calc(h + 70)), oklch(from var(--c) 0.82 0.16 calc(h + 150)), oklch(from var(--c) 0.72 0.18 calc(h - 60)), var(--c));
  animation: bgx-edge-glow-spin 5s linear infinite;
}
@keyframes bgx-edge-glow-spin {
  to { transform: rotate(1turn); }
}

.bgx-plasma {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
  isolation: isolate;
}
.bgx-plasma::before,
.bgx-plasma::after {
  content: "";
  position: absolute;
  inset: -100%;
  background: repeating-radial-gradient(circle at var(--at), var(--a) 0, var(--b) 3em, var(--a) 6em);
  animation: bgx-plasma-drift var(--t) cubic-bezier(0.45, 0, 0.55, 1) var(--d) infinite alternate;
}
.bgx-plasma::before {
  --at: 42% 46%;
  --a: oklch(from var(--c) 0.25 0.1 calc(h + 0));
  --b: var(--c);
  --t: 8s;
  --d: -2s;
}
.bgx-plasma::after {
  --at: 58% 52%;
  --a: oklch(from var(--c) 0.3 0.1 calc(h + 120));
  --b: oklch(from var(--c) 0.85 0.16 calc(h + 120));
  --t: 11s;
  --d: -7s;
  mix-blend-mode: difference;
  animation-direction: alternate-reverse;
}
@keyframes bgx-plasma-drift {
  from { transform: translate(-6%, 4%) rotate(0deg); }
  to   { transform: translate(5%, -5%) rotate(20deg); }
}

.bgx-subtle-sweep {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 60% at 50% -10%, oklch(from var(--c) 0.88 0.06 calc(h + 0) / 0.8), transparent 70%),
    linear-gradient(oklch(from var(--c) 0.975 0.012 calc(h + 0)), oklch(from var(--c) 0.99 0.004 calc(h + 0)) 70%);
}
.bgx-subtle-sweep span {
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -60%;
  width: 60%;
  background: linear-gradient(90deg, transparent, oklch(from var(--c) 0.86 0.09 calc(h + 0) / 0.75) 42%, oklch(from var(--c) 0.88 0.08 calc(h + 70) / 0.65) 58%, transparent);
  transform: skewX(-20deg);
  animation: bgx-subtle-sweep-glide 9s cubic-bezier(0.45, 0, 0.25, 1) -2.6s infinite;
}
@keyframes bgx-subtle-sweep-glide {
  0%        { transform: skewX(-20deg) translateX(0); }
  70%, 100% { transform: skewX(-20deg) translateX(300%); }
}

.bgx-gradient-orb {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  --swirl: conic-gradient(from 0deg at 35% 40%, var(--c), oklch(from var(--c) 0.66 0.24 calc(h + 70)), oklch(from var(--c) 0.82 0.15 calc(h - 60)), oklch(from var(--c) 0.74 0.2 calc(h + 140)), var(--c));
  background: radial-gradient(ellipse 60% 70% at 50% 50%, oklch(from var(--c) 0.2 0.05 calc(h + 0)), #06060a 70%);
}
.bgx-gradient-orb span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(10em, 22%);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
}
.bgx-gradient-orb span::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: var(--swirl);
  animation: bgx-gradient-orb-spin 6s linear infinite var(--dir, normal);
}
.bgx-gradient-orb span:nth-child(1)::before {
  --dir: reverse;
  inset: -30%;
  filter: blur(2.4em);
  opacity: 0.6;
}
.bgx-gradient-orb span:nth-child(2) {
  overflow: hidden;
}
.bgx-gradient-orb span:nth-child(2)::before {
  inset: -25%;
  filter: blur(0.7em);
}
.bgx-gradient-orb span:nth-child(2)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgb(255 255 255 / 0.6), transparent 38%),
    radial-gradient(circle, transparent 55%, rgb(0 0 0 / 0.45));
}
@keyframes bgx-gradient-orb-spin {
  to { transform: rotate(1turn); }
}

.bgx-lens-flare {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(ellipse 90% 90% at 20% 15%, oklch(from var(--c) 0.22 0.05 calc(h + 0)), #040509 70%);
  isolation: isolate;
}
.bgx-lens-flare-rig {
  position: absolute;
  left: 50%;
  top: 50%;
  animation: bgx-lens-flare-swing 8s cubic-bezier(0.45, 0, 0.55, 1) -2s infinite alternate;
}
.bgx-lens-flare-rig span {
  position: absolute;
  left: var(--at);
  width: var(--size);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--paint);
  mix-blend-mode: screen;
}
.bgx-lens-flare-rig span:nth-child(1) {
  --at: -13em;
  --size: 9em;
  --paint: radial-gradient(closest-side, #fff 0 8%, oklch(from var(--c) 0.95 0.06 calc(h + 0) / 0.9) 16%, oklch(from var(--c) 0.75 0.16 calc(h + 0) / 0.35) 45%, transparent);
  animation: bgx-lens-flare-shimmer 2.6s ease-in-out infinite alternate;
}
.bgx-lens-flare-rig span:nth-child(1)::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46em;
  height: 0.5em;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, #fff, oklch(from var(--c) 0.8 0.14 calc(h + 0) / 0.6) 40%, transparent);
  animation: bgx-lens-flare-level 8s cubic-bezier(0.45, 0, 0.55, 1) -2s infinite alternate;
}
.bgx-lens-flare-rig span:nth-child(2) { --at: 3em; --size: 1.6em; --paint: radial-gradient(closest-side, oklch(from var(--c) 0.85 0.12 calc(h + 60) / 0.55), transparent); }
.bgx-lens-flare-rig span:nth-child(3) { --at: 6.5em; --size: 3.4em; --paint: radial-gradient(closest-side, transparent 70%, oklch(from var(--c) 0.8 0.14 calc(h - 60) / 0.5) 88%, transparent); }
.bgx-lens-flare-rig span:nth-child(4) { --at: 9em; --size: 2.2em; --paint: oklch(from var(--c) 0.85 0.12 calc(h - 30) / 0.3); border-radius: 0; clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); }
.bgx-lens-flare-rig span:nth-child(5) { --at: 12em; --size: 5em; --paint: radial-gradient(closest-side, oklch(from var(--c) 0.75 0.15 calc(h + 30) / 0.18) 60%, oklch(from var(--c) 0.8 0.14 calc(h + 30) / 0.35) 90%, transparent); }
.bgx-lens-flare-rig span:nth-child(6) { --at: 17em; --size: 7.5em; --paint: radial-gradient(closest-side, transparent 60%, oklch(from var(--c) 0.85 0.1 calc(h - 110) / 0.25) 85%, transparent); }
@keyframes bgx-lens-flare-swing {
  from { transform: rotate(12deg); }
  to   { transform: rotate(30deg); }
}
@keyframes bgx-lens-flare-level {
  from { transform: rotate(-12deg); }
  to   { transform: rotate(-30deg); }
}
@keyframes bgx-lens-flare-shimmer {
  from { opacity: 0.85; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1.05); }
}

.bgx-prism-rainbow {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(ellipse 70% 80% at 40% 50%, oklch(from var(--c) 0.2 0.04 calc(h + 0)), #06060b 70%);
  isolation: isolate;
}
.bgx-prism-rainbow span {
  position: absolute;
}
.bgx-prism-rainbow span:nth-child(1) {
  right: 60%;
  top: 50%;
  width: 45%;
  height: 0.22em;
  translate: 0 -50%;
  transform-origin: 100% 50%;
  transform: rotate(8deg);
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.9));
  box-shadow: 0 0 0.6em rgb(255 255 255 / 0.5);
  animation: bgx-prism-rainbow-flicker 3s ease-in-out infinite alternate;
}
.bgx-prism-rainbow span:nth-child(2) {
  left: 40%;
  top: 50%;
  width: 70%;
  height: 300%;
  translate: 0 -50%;
  transform-origin: 0 50%;
  background: conic-gradient(from 76deg at 0 50%, transparent, #ff4d4d 3deg, #ff9f1a 7deg, #ffe14d 11deg, #4ddb6a 15deg, #3aa8ff 19deg, #8b5cf6 23deg, transparent 27deg);
  -webkit-mask-image: linear-gradient(90deg, #000 20%, transparent 95%);
  mask-image: linear-gradient(90deg, #000 20%, transparent 95%);
  mix-blend-mode: screen;
  animation: bgx-prism-rainbow-sway 6s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
.bgx-prism-rainbow span:nth-child(3) {
  left: 40%;
  top: 50%;
  width: 6em;
  aspect-ratio: 1.15;
  translate: -50% -58%;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: linear-gradient(160deg, oklch(from var(--c) 0.95 0.04 calc(h + 0) / 0.9), oklch(from var(--c) 0.7 0.12 calc(h + 0) / 0.35) 40%, oklch(from var(--c) 0.3 0.08 calc(h + 0) / 0.5));
}
.bgx-prism-rainbow span:nth-child(3)::after {
  content: "";
  position: absolute;
  inset: 0.12em;
  clip-path: polygon(50% 1.5%, 99% 99%, 1% 99%);
  background: linear-gradient(170deg, oklch(from var(--c) 0.3 0.06 calc(h + 0)), #0b0b14 70%);
}
@keyframes bgx-prism-rainbow-sway {
  from { transform: rotate(-3deg) scaleY(0.92); opacity: 0.8; }
  to   { transform: rotate(3deg) scaleY(1.06); opacity: 1; }
}
@keyframes bgx-prism-rainbow-flicker {
  from { opacity: 0.75; }
  to   { opacity: 1; }
}

.bgx-parallax-starfield {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(ellipse 140% 100% at 50% 125%, color-mix(in srgb, var(--c) 34%, #0a0f24), #03040b 72%);}
.bgx-parallax-starfield span {
  position: absolute;
  inset: 0 0 calc(var(--tile) * -1);
  background-size: var(--tile) var(--tile);
  animation: bgx-parallax-starfield-rise var(--dur) linear infinite;
}
.bgx-parallax-starfield span:nth-child(1) {
  --tile: 9em;
  --dur: 40s;
  background-image:
    radial-gradient(circle 0.07em at 4% 45.1%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.07em at 32.7% 8.2%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.07em at 83.2% 41.6%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.07em at 51.6% 47%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.07em at 47.4% 29.9%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.07em at 24.1% 69.6%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.07em at 16.9% 39%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.07em at 58.1% 80.1%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.07em at 39.2% 11.8%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.07em at 24% 71.6%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.07em at 58.5% 55%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.07em at 48% 25.6%, rgb(255 255 255 / 0.6) 50%, transparent);
}
.bgx-parallax-starfield span:nth-child(2) {
  --tile: 14em;
  --dur: 26s;
  background-image:
    radial-gradient(circle 0.11em at 4% 6.3%, color-mix(in srgb, var(--c) 25%, #fff) 50%, transparent),
    radial-gradient(circle 0.11em at 38.9% 54.5%, color-mix(in srgb, var(--c) 25%, #fff) 50%, transparent),
    radial-gradient(circle 0.11em at 27.3% 7.3%, color-mix(in srgb, var(--c) 25%, #fff) 50%, transparent),
    radial-gradient(circle 0.11em at 11.5% 60.5%, color-mix(in srgb, var(--c) 25%, #fff) 50%, transparent),
    radial-gradient(circle 0.11em at 61.4% 49.8%, color-mix(in srgb, var(--c) 25%, #fff) 50%, transparent),
    radial-gradient(circle 0.11em at 79.5% 91.1%, color-mix(in srgb, var(--c) 25%, #fff) 50%, transparent),
    radial-gradient(circle 0.11em at 14.3% 77.2%, color-mix(in srgb, var(--c) 25%, #fff) 50%, transparent),
    radial-gradient(circle 0.11em at 25.1% 20.8%, color-mix(in srgb, var(--c) 25%, #fff) 50%, transparent),
    radial-gradient(circle 0.11em at 44.2% 20.3%, color-mix(in srgb, var(--c) 25%, #fff) 50%, transparent);
}
.bgx-parallax-starfield span:nth-child(3) {
  --tile: 21em;
  --dur: 15s;
  background-image:
    radial-gradient(circle 0.34em at 4% 83.8%, #fff 0 22%, color-mix(in srgb, var(--c) 55%, transparent) 36%, transparent),
    radial-gradient(circle 0.34em at 92.1% 93.2%, #fff 0 22%, color-mix(in srgb, var(--c) 55%, transparent) 36%, transparent),
    radial-gradient(circle 0.34em at 69.5% 13.3%, #fff 0 22%, color-mix(in srgb, var(--c) 55%, transparent) 36%, transparent),
    radial-gradient(circle 0.34em at 72.1% 14.9%, #fff 0 22%, color-mix(in srgb, var(--c) 55%, transparent) 36%, transparent),
    radial-gradient(circle 0.34em at 16.3% 57.7%, #fff 0 22%, color-mix(in srgb, var(--c) 55%, transparent) 36%, transparent),
    radial-gradient(circle 0.34em at 21.4% 24.1%, #fff 0 22%, color-mix(in srgb, var(--c) 55%, transparent) 36%, transparent);
}
@keyframes bgx-parallax-starfield-rise {
  to { transform: translateY(calc(var(--tile) * -1)); }
}

.bgx-shooting-stars {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(160deg, #03050d 30%, color-mix(in srgb, var(--c) 30%, #0b1024));}
.bgx-shooting-stars::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: 12em 12em;
  background-image:
    radial-gradient(circle 0.08em at 4% 40.2%, rgb(255 255 255 / 0.55) 50%, transparent),
    radial-gradient(circle 0.08em at 94.1% 78%, rgb(255 255 255 / 0.55) 50%, transparent),
    radial-gradient(circle 0.08em at 81.6% 93.9%, rgb(255 255 255 / 0.55) 50%, transparent),
    radial-gradient(circle 0.08em at 89.5% 80.7%, rgb(255 255 255 / 0.55) 50%, transparent),
    radial-gradient(circle 0.08em at 82.3% 33.7%, rgb(255 255 255 / 0.55) 50%, transparent),
    radial-gradient(circle 0.08em at 70.6% 31.2%, rgb(255 255 255 / 0.55) 50%, transparent),
    radial-gradient(circle 0.08em at 10.4% 42.4%, rgb(255 255 255 / 0.55) 50%, transparent),
    radial-gradient(circle 0.08em at 21.7% 70%, rgb(255 255 255 / 0.55) 50%, transparent),
    radial-gradient(circle 0.08em at 51.6% 33%, rgb(255 255 255 / 0.55) 50%, transparent),
    radial-gradient(circle 0.08em at 70.2% 72.1%, rgb(255 255 255 / 0.55) 50%, transparent),
    radial-gradient(circle 0.08em at 14.8% 18.5%, rgb(255 255 255 / 0.55) 50%, transparent),
    radial-gradient(circle 0.08em at 17.6% 17.6%, rgb(255 255 255 / 0.55) 50%, transparent);
}
.bgx-shooting-stars span {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--len);
  height: 0.1em;
  border-radius: 999em;
  background: linear-gradient(to right, transparent, color-mix(in srgb, var(--c) 70%, transparent) 65%, #fff);
  rotate: 152deg;
  opacity: 0;
  animation: bgx-shooting-stars-fly var(--dur) linear var(--delay) infinite;
}
.bgx-shooting-stars span::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -0.1em;
  width: 0.26em;
  height: 0.26em;
  margin-top: -0.13em;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0.5em 0.12em color-mix(in srgb, var(--c) 80%, #fff);
}
.bgx-shooting-stars span:nth-child(1) { --x: 62%; --y: 4%; --len: 8em; --dur: 5.2s; --delay: -0.6s; }
.bgx-shooting-stars span:nth-child(2) { --x: 88%; --y: 22%; --len: 6em; --dur: 6.4s; --delay: -1.2s; }
.bgx-shooting-stars span:nth-child(3) { --x: 34%; --y: -6%; --len: 7em; --dur: 5.8s; --delay: -3.4s; }
.bgx-shooting-stars span:nth-child(4) { --x: 104%; --y: 2%; --len: 9em; --dur: 7.1s; --delay: -4.6s; }
.bgx-shooting-stars span:nth-child(5) { --x: 76%; --y: 38%; --len: 5em; --dur: 6s; --delay: -2.5s; }
.bgx-shooting-stars span:nth-child(6) { --x: 50%; --y: 16%; --len: 6.5em; --dur: 7.6s; --delay: -6.2s; }
@keyframes bgx-shooting-stars-fly {
  0%   { transform: translateX(0); opacity: 0; }
  4%   { opacity: 1; }
  28%  { opacity: 1; }
  40%  { transform: translateX(30em); opacity: 0; }
  100% { transform: translateX(30em); opacity: 0; }
}

.bgx-twinkling-stars {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(to bottom, #04060f, #0a1024 60%, color-mix(in srgb, var(--c) 38%, #101634));}
.bgx-twinkling-stars::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: 10em 10em;
  background-image:
    radial-gradient(circle 0.07em at 4% 93.4%, rgb(255 255 255 / 0.5) 50%, transparent),
    radial-gradient(circle 0.07em at 8.3% 32.4%, rgb(255 255 255 / 0.5) 50%, transparent),
    radial-gradient(circle 0.07em at 25.8% 59.6%, rgb(255 255 255 / 0.5) 50%, transparent),
    radial-gradient(circle 0.07em at 49.4% 94.1%, rgb(255 255 255 / 0.5) 50%, transparent),
    radial-gradient(circle 0.07em at 4.2% 53.6%, rgb(255 255 255 / 0.5) 50%, transparent),
    radial-gradient(circle 0.07em at 34% 52.7%, rgb(255 255 255 / 0.5) 50%, transparent),
    radial-gradient(circle 0.07em at 7.8% 80.6%, rgb(255 255 255 / 0.5) 50%, transparent),
    radial-gradient(circle 0.07em at 80.7% 10.8%, rgb(255 255 255 / 0.5) 50%, transparent),
    radial-gradient(circle 0.07em at 56.5% 41.5%, rgb(255 255 255 / 0.5) 50%, transparent),
    radial-gradient(circle 0.07em at 33.5% 53.9%, rgb(255 255 255 / 0.5) 50%, transparent),
    radial-gradient(circle 0.07em at 15.7% 40.7%, rgb(255 255 255 / 0.5) 50%, transparent),
    radial-gradient(circle 0.07em at 23.9% 32.8%, rgb(255 255 255 / 0.5) 50%, transparent),
    radial-gradient(circle 0.07em at 81.9% 89.3%, rgb(255 255 255 / 0.5) 50%, transparent),
    radial-gradient(circle 0.07em at 84.4% 64.5%, rgb(255 255 255 / 0.5) 50%, transparent);
}
.bgx-twinkling-stars span {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--s);
  height: var(--s);
  margin: calc(var(--s) / -2);
  background: radial-gradient(closest-side, #fff 0 14%, color-mix(in srgb, var(--c) 45%, #fff) 30%, transparent);
  clip-path: polygon(50% 0, 56% 44%, 100% 50%, 56% 56%, 50% 100%, 44% 56%, 0 50%, 44% 44%);
  opacity: 0.15;
  animation: bgx-twinkling-stars-twinkle var(--dur) ease-in-out var(--delay) infinite;
}
.bgx-twinkling-stars span:nth-child(1) { --x: 13.8%; --y: 39.4%; --s: 0.91em; --dur: 3.52s; --delay: -4.47s; }
.bgx-twinkling-stars span:nth-child(2) { --x: 43.3%; --y: 71.1%; --s: 1.66em; --dur: 2.74s; --delay: -3.05s; }
.bgx-twinkling-stars span:nth-child(3) { --x: 32.1%; --y: 38.3%; --s: 1.88em; --dur: 3.67s; --delay: -2.47s; }
.bgx-twinkling-stars span:nth-child(4) { --x: 84.2%; --y: 83%; --s: 2.06em; --dur: 2.45s; --delay: -2.95s; }
.bgx-twinkling-stars span:nth-child(5) { --x: 45.8%; --y: 45%; --s: 1.2em; --dur: 2.57s; --delay: -4.68s; }
.bgx-twinkling-stars span:nth-child(6) { --x: 73.4%; --y: 88.1%; --s: 1.84em; --dur: 3.44s; --delay: -2.65s; }
.bgx-twinkling-stars span:nth-child(7) { --x: 54.6%; --y: 60.6%; --s: 1.67em; --dur: 4.21s; --delay: -0.71s; }
.bgx-twinkling-stars span:nth-child(8) { --x: 19.5%; --y: 72.2%; --s: 2.08em; --dur: 2.78s; --delay: -3.39s; }
.bgx-twinkling-stars span:nth-child(9) { --x: 92.7%; --y: 45.7%; --s: 1.77em; --dur: 2.84s; --delay: -3.88s; }
.bgx-twinkling-stars span:nth-child(10) { --x: 63.9%; --y: 45.6%; --s: 1.06em; --dur: 2.72s; --delay: -1.17s; }
.bgx-twinkling-stars span:nth-child(11) { --x: 69.6%; --y: 76%; --s: 1.5em; --dur: 3.7s; --delay: -2.16s; }
.bgx-twinkling-stars span:nth-child(12) { --x: 59.9%; --y: 69.9%; --s: 1.24em; --dur: 3.19s; --delay: -2s; }
.bgx-twinkling-stars span:nth-child(13) { --x: 23.3%; --y: 44.9%; --s: 2.18em; --dur: 3.59s; --delay: -3.24s; }
.bgx-twinkling-stars span:nth-child(14) { --x: 37.9%; --y: 91.6%; --s: 2.15em; --dur: 3.37s; --delay: -4.55s; }
.bgx-twinkling-stars span:nth-child(15) { --x: 79.6%; --y: 89.2%; --s: 1.08em; --dur: 2.94s; --delay: -3.43s; }
.bgx-twinkling-stars span:nth-child(16) { --x: 8%; --y: 32.6%; --s: 0.88em; --dur: 3.85s; --delay: -0.68s; }
.bgx-twinkling-stars span:nth-child(17) { --x: 96.6%; --y: 42.8%; --s: 1.27em; --dur: 4.26s; --delay: -2.71s; }
.bgx-twinkling-stars span:nth-child(18) { --x: 2.9%; --y: 81.5%; --s: 1.33em; --dur: 4.49s; --delay: -4.73s; }
@keyframes bgx-twinkling-stars-twinkle {
  0%, 100% { transform: scale(0.25) rotate(0deg); opacity: 0.15; }
  50%      { transform: scale(1) rotate(45deg); opacity: 1; }
}

.bgx-spiral-galaxy {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(ellipse 70% 80% at 50% 50%, color-mix(in srgb, var(--c) 20%, #070918), #02030a 75%);}
.bgx-spiral-galaxy::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: 11em 11em;
  background-image:
    radial-gradient(circle 0.07em at 4.1% 35.2%, rgb(255 255 255 / 0.55) 50%, transparent),
    radial-gradient(circle 0.07em at 63.6% 55.9%, rgb(255 255 255 / 0.55) 50%, transparent),
    radial-gradient(circle 0.07em at 80% 54.2%, rgb(255 255 255 / 0.55) 50%, transparent),
    radial-gradient(circle 0.07em at 35.3% 22.3%, rgb(255 255 255 / 0.55) 50%, transparent),
    radial-gradient(circle 0.07em at 25.2% 37.4%, rgb(255 255 255 / 0.55) 50%, transparent),
    radial-gradient(circle 0.07em at 25% 84.8%, rgb(255 255 255 / 0.55) 50%, transparent),
    radial-gradient(circle 0.07em at 95.9% 45.8%, rgb(255 255 255 / 0.55) 50%, transparent),
    radial-gradient(circle 0.07em at 77.2% 60%, rgb(255 255 255 / 0.55) 50%, transparent),
    radial-gradient(circle 0.07em at 63.9% 54.3%, rgb(255 255 255 / 0.55) 50%, transparent),
    radial-gradient(circle 0.07em at 24.5% 72.6%, rgb(255 255 255 / 0.55) 50%, transparent),
    radial-gradient(circle 0.07em at 63% 74%, rgb(255 255 255 / 0.55) 50%, transparent),
    radial-gradient(circle 0.07em at 79.2% 9.6%, rgb(255 255 255 / 0.55) 50%, transparent);
}
.bgx-spiral-galaxy-disk {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: rotate(-24deg) scaleY(0.48);
}
.bgx-spiral-galaxy-disk span {
  position: absolute;
  border-radius: 50%;
}
.bgx-spiral-galaxy-disk span:nth-child(1) {
  width: 30em;
  height: 30em;
  margin: -15em;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 38%, transparent), color-mix(in srgb, var(--c) 12%, transparent) 50%, transparent);
}
.bgx-spiral-galaxy-disk span:nth-child(2) {
  width: 0.14em;
  height: 0.14em;
  margin: -0.07em;
  background: #fff;
  box-shadow:
    1.11em 0.11em 0 0.06em color-mix(in srgb, var(--c) 35%, #fff),
    1.24em -0.02em 0 0.03em color-mix(in srgb, var(--c) 35%, #fff),
    1.24em -0.02em 1.05em 0.3em color-mix(in srgb, var(--c) 36%, transparent),
    1.4em -0.38em 0 0.04em #fff,
    1.54em -0.51em 0 0.03em #fff,
    1.54em -0.51em 1.1em 0.32em color-mix(in srgb, var(--c) 36%, transparent),
    1.04em -0.97em 0 0.04em #fff,
    1.15em -1.04em 0 0.07em #fff,
    1.15em -1.04em 1.09em 0.31em color-mix(in srgb, var(--c) 36%, transparent),
    0.68em -1.57em 0 0.07em color-mix(in srgb, var(--c) 35%, #fff),
    0.61em -2.02em 0 0.05em #fff,
    0.61em -2.02em 1.15em 0.33em color-mix(in srgb, var(--c) 36%, transparent),
    0.16em -1.9em 0 0.04em #fff,
    0.35em -2em 0 0.05em color-mix(in srgb, var(--c) 35%, #fff),
    0.35em -2em 1.14em 0.33em color-mix(in srgb, var(--c) 36%, transparent),
    0.12em -2.32em 0 0.02em color-mix(in srgb, var(--c) 35%, #fff),
    -0.68em -2.33em 0 0.04em color-mix(in srgb, var(--c) 35%, #fff),
    -0.68em -2.33em 1.19em 0.35em color-mix(in srgb, var(--c) 36%, transparent),
    -1.02em -1.94em 0 0.06em #fff,
    -1.35em -1.84em 0 0.03em #fff,
    -1.35em -1.84em 1.17em 0.34em color-mix(in srgb, var(--c) 36%, transparent),
    -1.91em -1.49em 0 0.04em color-mix(in srgb, var(--c) 35%, #fff),
    -2.49em -1.31em 0 0.04em color-mix(in srgb, var(--c) 35%, #fff),
    -2.49em -1.31em 1.24em 0.36em color-mix(in srgb, var(--c) 36%, transparent),
    -2.89em -1.16em 0 0.02em #fff,
    -3.33em -1.15em 0 0.06em color-mix(in srgb, var(--c) 35%, #fff),
    -3.33em -1.15em 1.32em 0.39em color-mix(in srgb, var(--c) 36%, transparent),
    -3.66em 0.39em 0 0.06em color-mix(in srgb, var(--c) 35%, #fff),
    -3.73em 0.18em 0 0.06em color-mix(in srgb, var(--c) 35%, #fff),
    -3.73em 0.18em 1.35em 0.4em color-mix(in srgb, var(--c) 36%, transparent),
    -3.27em 0.7em 0 0.06em color-mix(in srgb, var(--c) 35%, #fff),
    -3.36em 1.01em 0 0.04em color-mix(in srgb, var(--c) 35%, #fff),
    -3.36em 1.01em 1.32em 0.39em color-mix(in srgb, var(--c) 36%, transparent),
    -3.85em 2.3em 0 0.04em #fff,
    -3.5em 2.84em 0 0.04em color-mix(in srgb, var(--c) 35%, #fff),
    -3.5em 2.84em 1.44em 0.43em color-mix(in srgb, var(--c) 36%, transparent),
    -2.48em 3.39em 0 0.06em #fff,
    -3.03em 4.35em 0 0.06em #fff,
    -3.03em 4.35em 1.54em 0.46em color-mix(in srgb, var(--c) 36%, transparent),
    -2.05em 4.65em 0 0.07em #fff,
    0.1em 5.15em 0 0.04em color-mix(in srgb, var(--c) 35%, #fff),
    0.1em 5.15em 1.52em 0.46em color-mix(in srgb, var(--c) 36%, transparent),
    1.5em 5.98em 0 0.03em #fff,
    0.81em 5.94em 0 0.06em #fff,
    0.81em 5.94em 1.62em 0.49em color-mix(in srgb, var(--c) 36%, transparent),
    2.69em 5.91em 0 0.05em #fff,
    3.08em 5.91em 0 0.04em #fff,
    3.08em 5.91em 1.7em 0.52em color-mix(in srgb, var(--c) 36%, transparent),
    3.57em 5.25em 0 0.05em #fff,
    4.36em 4.29em 0 0.06em color-mix(in srgb, var(--c) 35%, #fff),
    4.36em 4.29em 1.63em 0.49em color-mix(in srgb, var(--c) 36%, transparent),
    6.58em 3.31em 0 0.05em color-mix(in srgb, var(--c) 35%, #fff),
    6.82em 1.38em 0 0.03em #fff,
    6.82em 1.38em 1.73em 0.53em color-mix(in srgb, var(--c) 36%, transparent),
    7.23em 1.47em 0 0.05em #fff,
    8.99em -0.47em 0 0.04em color-mix(in srgb, var(--c) 35%, #fff),
    8.99em -0.47em 1.98em 0.61em color-mix(in srgb, var(--c) 36%, transparent),
    9.74em -2.03em 0 0.03em #fff,
    10.2em -3.53em 0 0.05em #fff,
    10.2em -3.53em 2.19em 0.68em color-mix(in srgb, var(--c) 36%, transparent),
    9.26em -6.36em 0 0.04em color-mix(in srgb, var(--c) 35%, #fff),
    10.19em -6.2em 0 0.07em #fff,
    10.19em -6.2em 2.33em 0.73em color-mix(in srgb, var(--c) 36%, transparent),
    9.45em -8.29em 0 0.06em color-mix(in srgb, var(--c) 35%, #fff),
    4.06em -12.7em 0 0.04em color-mix(in srgb, var(--c) 35%, #fff),
    4.06em -12.7em 2.5em 0.78em color-mix(in srgb, var(--c) 36%, transparent),
    -1.4em 0.07em 0 0.05em #fff,
    -1.31em 0.36em 0 0.08em color-mix(in srgb, var(--c) 35%, #fff),
    -1.31em 0.36em 1.06em 0.3em color-mix(in srgb, var(--c) 36%, transparent),
    -1.38em 0.66em 0 0.05em color-mix(in srgb, var(--c) 35%, #fff),
    -1.34em 0.48em 0 0.05em #fff,
    -1.34em 0.48em 1.07em 0.31em color-mix(in srgb, var(--c) 36%, transparent),
    -1.34em 1.15em 0 0.07em #fff,
    -1.11em 1.32em 0 0.02em #fff,
    -1.11em 1.32em 1.11em 0.32em color-mix(in srgb, var(--c) 36%, transparent),
    -0.83em 1.39em 0 0.07em color-mix(in srgb, var(--c) 35%, #fff),
    -0.33em 1.71em 0 0.08em #fff,
    -0.33em 1.71em 1.11em 0.32em color-mix(in srgb, var(--c) 36%, transparent),
    -0.54em 2.11em 0 0.07em #fff,
    0.13em 1.84em 0 0.04em #fff,
    0.13em 1.84em 1.12em 0.32em color-mix(in srgb, var(--c) 36%, transparent),
    0.54em 2.12em 0 0.04em color-mix(in srgb, var(--c) 35%, #fff),
    0.4em 2.11em 0 0.03em color-mix(in srgb, var(--c) 35%, #fff),
    0.4em 2.11em 1.16em 0.34em color-mix(in srgb, var(--c) 36%, transparent),
    1.03em 2.12em 0 0.05em #fff,
    1.5em 2.07em 0 0.07em #fff,
    1.5em 2.07em 1.21em 0.35em color-mix(in srgb, var(--c) 36%, transparent),
    1.99em 1.29em 0 0.07em color-mix(in srgb, var(--c) 35%, #fff),
    2.4em 1.12em 0 0.06em color-mix(in srgb, var(--c) 35%, #fff),
    2.4em 1.12em 1.22em 0.36em color-mix(in srgb, var(--c) 36%, transparent),
    2.88em 0.67em 0 0.07em #fff,
    2.73em 0.74em 0 0.07em #fff,
    2.73em 0.74em 1.24em 0.36em color-mix(in srgb, var(--c) 36%, transparent),
    2.87em 0.31em 0 0.03em color-mix(in srgb, var(--c) 35%, #fff),
    3.73em 0.06em 0 0.03em color-mix(in srgb, var(--c) 35%, #fff),
    3.73em 0.06em 1.35em 0.4em color-mix(in srgb, var(--c) 36%, transparent),
    3.14em -0.61em 0 0.05em #fff,
    3.47em -1.94em 0 0.04em color-mix(in srgb, var(--c) 35%, #fff),
    3.47em -1.94em 1.38em 0.41em color-mix(in srgb, var(--c) 36%, transparent),
    3.28em -1.63em 0 0.08em #fff,
    2.3em -2.86em 0 0.06em #fff,
    2.3em -2.86em 1.34em 0.4em color-mix(in srgb, var(--c) 36%, transparent),
    2.59em -3.55em 0 0.06em color-mix(in srgb, var(--c) 35%, #fff),
    2.08em -4.07em 0 0.03em #fff,
    2.08em -4.07em 1.45em 0.43em color-mix(in srgb, var(--c) 36%, transparent),
    2.14em -4.55em 0 0.03em color-mix(in srgb, var(--c) 35%, #fff),
    1em -4.7em 0 0.06em #fff,
    1em -4.7em 1.48em 0.44em color-mix(in srgb, var(--c) 36%, transparent),
    -0.28em -6.21em 0 0.04em color-mix(in srgb, var(--c) 35%, #fff),
    -1.66em -6.22em 0 0.04em #fff,
    -1.66em -6.22em 1.67em 0.51em color-mix(in srgb, var(--c) 36%, transparent),
    -2.07em -6.54em 0 0.04em color-mix(in srgb, var(--c) 35%, #fff),
    -4.05em -4.84em 0 0.07em #fff,
    -4.05em -4.84em 1.66em 0.5em color-mix(in srgb, var(--c) 36%, transparent),
    -5.06em -5.17em 0 0.04em color-mix(in srgb, var(--c) 35%, #fff),
    -5.3em -3.29em 0 0.08em color-mix(in srgb, var(--c) 35%, #fff),
    -5.3em -3.29em 1.65em 0.5em color-mix(in srgb, var(--c) 36%, transparent),
    -6.96em -4.23em 0 0.02em #fff,
    -7.47em -3.84em 0 0.08em #fff,
    -7.47em -3.84em 1.91em 0.59em color-mix(in srgb, var(--c) 36%, transparent),
    -8.72em -0.41em 0 0.07em #fff,
    -8.47em 0.69em 0 0.07em #fff,
    -8.47em 0.69em 1.92em 0.59em color-mix(in srgb, var(--c) 36%, transparent),
    -9.28em 2.02em 0 0.07em color-mix(in srgb, var(--c) 35%, #fff),
    -9.76em 5.04em 0 0.04em color-mix(in srgb, var(--c) 35%, #fff),
    -9.76em 5.04em 2.22em 0.69em color-mix(in srgb, var(--c) 36%, transparent),
    -8.19em 5.08em 0 0.08em #fff,
    -8.42em 5.13em 0 0.07em color-mix(in srgb, var(--c) 35%, #fff),
    -8.42em 5.13em 2.08em 0.64em color-mix(in srgb, var(--c) 36%, transparent),
    -7.03em 9.57em 0 0.06em #fff,
    -6.4em 10.49em 0 0.05em color-mix(in srgb, var(--c) 35%, #fff),
    -6.4em 10.49em 2.37em 0.74em color-mix(in srgb, var(--c) 36%, transparent),
    0.28em -1.72em 0 0.06em #fff,
    0.4em -0.2em 0 0.05em #fff,
    -2.13em 0.76em 0 0.05em #fff,
    -1.78em 0.73em 0 0.04em #fff,
    0.39em -1.61em 0 0.03em #fff,
    -1.01em -2.33em 0 0.03em #fff,
    0.32em -0.47em 0 0.04em #fff,
    0.93em -2.36em 0 0.04em #fff,
    -1.53em -0.38em 0 0.06em #fff,
    -0.51em -0.11em 0 0.04em #fff,
    -1.15em 0.65em 0 0.05em #fff,
    0.07em -2.31em 0 0.06em #fff,
    -0.13em 0.95em 0 0.05em #fff,
    -0.86em -0.01em 0 0.03em #fff,
    -0.27em -0.79em 0 0.05em #fff,
    -0.62em 0.32em 0 0.04em #fff;
  animation: bgx-spiral-galaxy-spin 80s linear infinite;
}
.bgx-spiral-galaxy-disk span:nth-child(3) {
  width: 7em;
  height: 7em;
  margin: -3.5em;
  background: radial-gradient(closest-side, #fff 6%, color-mix(in srgb, var(--c) 40%, #fff) 22%, color-mix(in srgb, var(--c) 45%, transparent) 50%, transparent);
  animation: bgx-spiral-galaxy-glow 5s ease-in-out infinite alternate;
}
@keyframes bgx-spiral-galaxy-spin {
  to { transform: rotate(360deg); }
}
@keyframes bgx-spiral-galaxy-glow {
  from { opacity: 0.8; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1.06); }
}

.bgx-warp-speed {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--c) 34%, #0a0d1f), #020308 60%);}
.bgx-warp-speed::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7em;
  height: 7em;
  margin: -3.5em;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 45%, #fff), transparent);
  animation: bgx-warp-speed-core 1.6s ease-in-out infinite alternate;
}
.bgx-warp-speed span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 75%;
  height: var(--w);
  margin-top: calc(var(--w) / -2);
  transform-origin: 0 50%;
  rotate: var(--a);
  background: linear-gradient(to right, transparent 45%, color-mix(in srgb, var(--c) 55%, #fff) 86%, #fff 95%, transparent);
  opacity: 0;
  animation: bgx-warp-speed-streak var(--dur) cubic-bezier(0.55, 0, 1, 0.45) var(--delay) infinite;
}
.bgx-warp-speed span:nth-child(1) { --a: 0deg; --w: 0.15em; --dur: 1.57s; --delay: -0.12s; }
.bgx-warp-speed span:nth-child(2) { --a: 14deg; --w: 0.08em; --dur: 1.72s; --delay: -0.62s; }
.bgx-warp-speed span:nth-child(3) { --a: 27deg; --w: 0.12em; --dur: 1.66s; --delay: -0.2s; }
.bgx-warp-speed span:nth-child(4) { --a: 45deg; --w: 0.15em; --dur: 1.35s; --delay: -1.74s; }
.bgx-warp-speed span:nth-child(5) { --a: 54deg; --w: 0.12em; --dur: 1.66s; --delay: -0.99s; }
.bgx-warp-speed span:nth-child(6) { --a: 66deg; --w: 0.06em; --dur: 1.71s; --delay: -0.41s; }
.bgx-warp-speed span:nth-child(7) { --a: 74deg; --w: 0.13em; --dur: 1.51s; --delay: -0.5s; }
.bgx-warp-speed span:nth-child(8) { --a: 89deg; --w: 0.08em; --dur: 1.45s; --delay: -0.47s; }
.bgx-warp-speed span:nth-child(9) { --a: 103deg; --w: 0.15em; --dur: 1.08s; --delay: -0.44s; }
.bgx-warp-speed span:nth-child(10) { --a: 113deg; --w: 0.14em; --dur: 1.2s; --delay: -0.58s; }
.bgx-warp-speed span:nth-child(11) { --a: 125deg; --w: 0.12em; --dur: 1.78s; --delay: -0.95s; }
.bgx-warp-speed span:nth-child(12) { --a: 133deg; --w: 0.06em; --dur: 1.34s; --delay: -0.78s; }
.bgx-warp-speed span:nth-child(13) { --a: 150deg; --w: 0.08em; --dur: 1.5s; --delay: -1.17s; }
.bgx-warp-speed span:nth-child(14) { --a: 163deg; --w: 0.14em; --dur: 1.66s; --delay: -1.48s; }
.bgx-warp-speed span:nth-child(15) { --a: 171deg; --w: 0.11em; --dur: 1.37s; --delay: -0.05s; }
.bgx-warp-speed span:nth-child(16) { --a: 181deg; --w: 0.15em; --dur: 1.68s; --delay: -0.86s; }
.bgx-warp-speed span:nth-child(17) { --a: 200deg; --w: 0.06em; --dur: 1.07s; --delay: -0.96s; }
.bgx-warp-speed span:nth-child(18) { --a: 210deg; --w: 0.07em; --dur: 1.45s; --delay: -1.59s; }
.bgx-warp-speed span:nth-child(19) { --a: 225deg; --w: 0.14em; --dur: 1.78s; --delay: -0.99s; }
.bgx-warp-speed span:nth-child(20) { --a: 229deg; --w: 0.08em; --dur: 1.16s; --delay: -1.67s; }
.bgx-warp-speed span:nth-child(21) { --a: 246deg; --w: 0.1em; --dur: 1.25s; --delay: -0.26s; }
.bgx-warp-speed span:nth-child(22) { --a: 253deg; --w: 0.09em; --dur: 1.09s; --delay: -0.38s; }
.bgx-warp-speed span:nth-child(23) { --a: 273deg; --w: 0.14em; --dur: 1.28s; --delay: -0.76s; }
.bgx-warp-speed span:nth-child(24) { --a: 277deg; --w: 0.12em; --dur: 1.05s; --delay: -0.39s; }
.bgx-warp-speed span:nth-child(25) { --a: 290deg; --w: 0.14em; --dur: 1.28s; --delay: -0.86s; }
.bgx-warp-speed span:nth-child(26) { --a: 305deg; --w: 0.14em; --dur: 1.67s; --delay: -1.44s; }
.bgx-warp-speed span:nth-child(27) { --a: 319deg; --w: 0.1em; --dur: 1.48s; --delay: -1.34s; }
.bgx-warp-speed span:nth-child(28) { --a: 327deg; --w: 0.1em; --dur: 1.24s; --delay: -0.19s; }
.bgx-warp-speed span:nth-child(29) { --a: 336deg; --w: 0.15em; --dur: 1.69s; --delay: -1.6s; }
.bgx-warp-speed span:nth-child(30) { --a: 350deg; --w: 0.13em; --dur: 1.26s; --delay: -1.49s; }
@keyframes bgx-warp-speed-streak {
  0%   { transform: scaleX(0.06); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: scaleX(1.4); opacity: 1; }
}
@keyframes bgx-warp-speed-core {
  from { opacity: 0.55; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1.1); }
}

.bgx-snowfall {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 120% 34% at 50% 112%, rgb(255 255 255 / 0.4), transparent),
    linear-gradient(to bottom, #172033, color-mix(in srgb, var(--c) 26%, #4a5877));}
.bgx-snowfall span {
  position: absolute;
  inset: calc(var(--tile) * -1) -1em 0;
  background-size: var(--tile) var(--tile);
  animation:
    bgx-snowfall-fall var(--dur) linear infinite,
    bgx-snowfall-sway var(--sway) ease-in-out infinite alternate;
}
.bgx-snowfall span:nth-child(1) {
  --tile: 10em;
  --dur: 16s;
  --sway: 3s;
  background-image:
    radial-gradient(circle 0.1em at 4.1% 73.8%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.1em at 31% 49%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.1em at 66.4% 26%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.1em at 55.8% 82.2%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.1em at 86% 65.2%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.1em at 22.4% 39.3%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.1em at 59.5% 36.5%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.1em at 21.1% 39%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.1em at 13.3% 72.7%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.1em at 21.6% 48.5%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.1em at 49.6% 60.8%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.1em at 16% 27.2%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.1em at 11.2% 14.3%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.1em at 88.7% 43.6%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.1em at 36.4% 5.4%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.1em at 31.7% 89.9%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.1em at 46.1% 59.6%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.1em at 40.8% 81.2%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.1em at 37.7% 38.2%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.1em at 16% 44.3%, rgb(255 255 255 / 0.6) 50%, transparent);
}
.bgx-snowfall span:nth-child(2) {
  --tile: 15em;
  --dur: 11s;
  --sway: 4s;
  background-image:
    radial-gradient(circle 0.2em at 4.1% 30.2%, rgb(255 255 255 / 0.9) 45%, transparent),
    radial-gradient(circle 0.2em at 33.1% 33.8%, rgb(255 255 255 / 0.9) 45%, transparent),
    radial-gradient(circle 0.2em at 78.5% 14.6%, rgb(255 255 255 / 0.9) 45%, transparent),
    radial-gradient(circle 0.2em at 73.1% 56%, rgb(255 255 255 / 0.9) 45%, transparent),
    radial-gradient(circle 0.2em at 60% 41.2%, rgb(255 255 255 / 0.9) 45%, transparent),
    radial-gradient(circle 0.2em at 71.5% 46.4%, rgb(255 255 255 / 0.9) 45%, transparent),
    radial-gradient(circle 0.2em at 89.3% 49.2%, rgb(255 255 255 / 0.9) 45%, transparent),
    radial-gradient(circle 0.2em at 40.8% 50%, rgb(255 255 255 / 0.9) 45%, transparent),
    radial-gradient(circle 0.2em at 76.3% 75.5%, rgb(255 255 255 / 0.9) 45%, transparent),
    radial-gradient(circle 0.2em at 70.7% 73.1%, rgb(255 255 255 / 0.9) 45%, transparent),
    radial-gradient(circle 0.2em at 19.3% 37.5%, rgb(255 255 255 / 0.9) 45%, transparent),
    radial-gradient(circle 0.2em at 48.8% 93.6%, rgb(255 255 255 / 0.9) 45%, transparent);
}
.bgx-snowfall span:nth-child(3) {
  --tile: 24em;
  --dur: 7s;
  --sway: 5s;
  background-image:
    radial-gradient(circle 0.5em at 4.1% 83.5%, #fff 18%, rgb(255 255 255 / 0.45) 50%, transparent),
    radial-gradient(circle 0.5em at 39.3% 80.1%, #fff 18%, rgb(255 255 255 / 0.45) 50%, transparent),
    radial-gradient(circle 0.5em at 22.6% 72.3%, #fff 18%, rgb(255 255 255 / 0.45) 50%, transparent),
    radial-gradient(circle 0.5em at 33.1% 69.5%, #fff 18%, rgb(255 255 255 / 0.45) 50%, transparent),
    radial-gradient(circle 0.5em at 74% 61.1%, #fff 18%, rgb(255 255 255 / 0.45) 50%, transparent),
    radial-gradient(circle 0.5em at 34.9% 67.9%, #fff 18%, rgb(255 255 255 / 0.45) 50%, transparent);
}
@keyframes bgx-snowfall-fall {
  to { transform: translateY(var(--tile)); }
}
@keyframes bgx-snowfall-sway {
  from { translate: -0.7em 0; }
  to   { translate: 0.7em 0; }
}

.bgx-rain {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    linear-gradient(to bottom, transparent 70%, color-mix(in srgb, var(--c) 18%, transparent)),
    linear-gradient(to bottom, #070b14, color-mix(in srgb, var(--c) 22%, #0f1729));}
.bgx-rain span {
  position: absolute;
  inset: calc(-20% - var(--tile)) -25% -20%;
  rotate: 12deg;
  background-size: var(--tile) var(--tile);
  animation: bgx-rain-fall var(--dur) linear infinite;
}
.bgx-rain span:nth-child(1) {
  --tile: 7em;
  --dur: 0.8s;
  background-image:
    radial-gradient(0.04em 0.9em at 4.1% 68.9%, rgb(200 220 255 / 0.4) 40%, transparent),
    radial-gradient(0.04em 0.9em at 92.5% 26.9%, rgb(200 220 255 / 0.4) 40%, transparent),
    radial-gradient(0.04em 0.9em at 64.9% 78.3%, rgb(200 220 255 / 0.4) 40%, transparent),
    radial-gradient(0.04em 0.9em at 93.7% 23.9%, rgb(200 220 255 / 0.4) 40%, transparent),
    radial-gradient(0.04em 0.9em at 28.9% 69%, rgb(200 220 255 / 0.4) 40%, transparent),
    radial-gradient(0.04em 0.9em at 68.8% 92.9%, rgb(200 220 255 / 0.4) 40%, transparent),
    radial-gradient(0.04em 0.9em at 53% 39.9%, rgb(200 220 255 / 0.4) 40%, transparent),
    radial-gradient(0.04em 0.9em at 76.6% 29%, rgb(200 220 255 / 0.4) 40%, transparent),
    radial-gradient(0.04em 0.9em at 25.7% 93.9%, rgb(200 220 255 / 0.4) 40%, transparent),
    radial-gradient(0.04em 0.9em at 67.8% 49%, rgb(200 220 255 / 0.4) 40%, transparent),
    radial-gradient(0.04em 0.9em at 5.9% 24.3%, rgb(200 220 255 / 0.4) 40%, transparent),
    radial-gradient(0.04em 0.9em at 77.6% 19.2%, rgb(200 220 255 / 0.4) 40%, transparent);
}
.bgx-rain span:nth-child(2) {
  --tile: 11em;
  --dur: 0.55s;
  background-image:
    radial-gradient(0.06em 1.5em at 4.1% 25.3%, color-mix(in srgb, var(--c) 35%, rgb(230 240 255 / 0.75)) 40%, transparent),
    radial-gradient(0.06em 1.5em at 94.6% 11.7%, color-mix(in srgb, var(--c) 35%, rgb(230 240 255 / 0.75)) 40%, transparent),
    radial-gradient(0.06em 1.5em at 76.9% 66.9%, color-mix(in srgb, var(--c) 35%, rgb(230 240 255 / 0.75)) 40%, transparent),
    radial-gradient(0.06em 1.5em at 19% 89.7%, color-mix(in srgb, var(--c) 35%, rgb(230 240 255 / 0.75)) 40%, transparent),
    radial-gradient(0.06em 1.5em at 94.9% 44.9%, color-mix(in srgb, var(--c) 35%, rgb(230 240 255 / 0.75)) 40%, transparent),
    radial-gradient(0.06em 1.5em at 26% 8%, color-mix(in srgb, var(--c) 35%, rgb(230 240 255 / 0.75)) 40%, transparent),
    radial-gradient(0.06em 1.5em at 82.8% 52.7%, color-mix(in srgb, var(--c) 35%, rgb(230 240 255 / 0.75)) 40%, transparent),
    radial-gradient(0.06em 1.5em at 4.3% 39.9%, color-mix(in srgb, var(--c) 35%, rgb(230 240 255 / 0.75)) 40%, transparent);
}
.bgx-rain i {
  position: absolute;
  bottom: var(--b);
  left: var(--x);
  width: 3em;
  height: 0.7em;
  margin-left: -1.5em;
  border: 0.06em solid rgb(200 220 255 / 0.55);
  border-radius: 50%;
  opacity: 0;
  animation: bgx-rain-ripple 1.6s ease-out var(--delay) infinite;
}
.bgx-rain i:nth-of-type(1) { --x: 14%; --b: 6%; --delay: -0.2s; }
.bgx-rain i:nth-of-type(2) { --x: 38%; --b: 12%; --delay: -0.9s; }
.bgx-rain i:nth-of-type(3) { --x: 61%; --b: 4%; --delay: -1.3s; }
.bgx-rain i:nth-of-type(4) { --x: 80%; --b: 10%; --delay: -0.5s; }
.bgx-rain i:nth-of-type(5) { --x: 93%; --b: 3%; --delay: -1.1s; }
@keyframes bgx-rain-fall {
  to { transform: translateY(var(--tile)); }
}
@keyframes bgx-rain-ripple {
  0%   { transform: scale(0.1); opacity: 0.9; }
  100% { transform: scale(1); opacity: 0; }
}

.bgx-floating-bubbles {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(to top, color-mix(in srgb, var(--c) 24%, #fff), color-mix(in srgb, var(--c) 6%, #fff));}
.bgx-floating-bubbles span {
  position: absolute;
  top: 0;
  left: var(--x);
  width: var(--d);
  height: 100%;
  animation: bgx-floating-bubbles-rise var(--dur) linear var(--delay) infinite;
}
.bgx-floating-bubbles span::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #fff 0 9%, transparent 17%),
    radial-gradient(closest-side, transparent 62%, color-mix(in srgb, var(--c) 28%, transparent) 88%, color-mix(in srgb, var(--c) 55%, transparent));
  box-shadow:
    inset 0.12em -0.08em 0.25em oklch(from var(--c) 0.85 0.12 calc(h + 70) / 0.5),
    inset -0.1em 0.1em 0.25em oklch(from var(--c) 0.85 0.12 calc(h - 70) / 0.45);
  animation: bgx-floating-bubbles-wobble var(--sway) ease-in-out infinite alternate;
}
.bgx-floating-bubbles span:nth-child(1) { --x: 40.8%; --d: 2.12em; --dur: 10.14s; --delay: -3.48s; --sway: 1.48s; }
.bgx-floating-bubbles span:nth-child(2) { --x: 74%; --d: 1.76em; --dur: 7.15s; --delay: -5.54s; --sway: 2.44s; }
.bgx-floating-bubbles span:nth-child(3) { --x: 67%; --d: 2.6em; --dur: 8.22s; --delay: -9.4s; --sway: 2.47s; }
.bgx-floating-bubbles span:nth-child(4) { --x: 12.3%; --d: 2.21em; --dur: 9.67s; --delay: -11.35s; --sway: 1.98s; }
.bgx-floating-bubbles span:nth-child(5) { --x: 54.1%; --d: 1.82em; --dur: 10.12s; --delay: -11.24s; --sway: 1.57s; }
.bgx-floating-bubbles span:nth-child(6) { --x: 47.7%; --d: 3.03em; --dur: 8.69s; --delay: -6.89s; --sway: 1.94s; }
.bgx-floating-bubbles span:nth-child(7) { --x: 18.9%; --d: 2.46em; --dur: 7.52s; --delay: -9.57s; --sway: 2.57s; }
.bgx-floating-bubbles span:nth-child(8) { --x: 34.2%; --d: 2.72em; --dur: 9.71s; --delay: -4.86s; --sway: 1.46s; }
.bgx-floating-bubbles span:nth-child(9) { --x: 87.8%; --d: 3.44em; --dur: 7.72s; --delay: -7.51s; --sway: 2.33s; }
.bgx-floating-bubbles span:nth-child(10) { --x: 81.5%; --d: 2.09em; --dur: 10.73s; --delay: -1.54s; --sway: 2.32s; }
.bgx-floating-bubbles span:nth-child(11) { --x: 59.9%; --d: 1.37em; --dur: 10.31s; --delay: -11.93s; --sway: 2.13s; }
.bgx-floating-bubbles span:nth-child(12) { --x: 97.6%; --d: 1.65em; --dur: 9.99s; --delay: -4.75s; --sway: 2.02s; }
.bgx-floating-bubbles span:nth-child(13) { --x: 22.6%; --d: 2.65em; --dur: 9.79s; --delay: -9.55s; --sway: 2.55s; }
.bgx-floating-bubbles span:nth-child(14) { --x: 5.3%; --d: 1.15em; --dur: 7.33s; --delay: -5.11s; --sway: 1.65s; }
@keyframes bgx-floating-bubbles-rise {
  from { transform: translateY(var(--d)); }
  to   { transform: translateY(-100%); }
}
@keyframes bgx-floating-bubbles-wobble {
  from { transform: translateX(-0.5em) scale(1, 0.94); }
  to   { transform: translateX(0.5em) scale(0.94, 1); }
}

.bgx-fireflies {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  --glow: color-mix(in oklab, var(--c) 30%, #eaff8a);
  background:
    radial-gradient(ellipse 55% 30% at 18% 106%, #03060a 97%, transparent),
    radial-gradient(ellipse 75% 26% at 84% 108%, #050a0f 97%, transparent),
    linear-gradient(to bottom, #04070f 10%, color-mix(in srgb, var(--c) 30%, #0b1a1a));}
.bgx-fireflies span {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: color-mix(in srgb, var(--glow), #fff 40%);
  box-shadow: 0 0 calc(var(--s) * 2) calc(var(--s) * 0.6) color-mix(in srgb, var(--glow) 55%, transparent);
  opacity: 0.1;
  animation:
    bgx-fireflies-wander var(--dur) ease-in-out var(--delay) infinite,
    bgx-fireflies-blink var(--blink) ease-in-out var(--delay) infinite;
}
.bgx-fireflies span:nth-child(1) { --x: 92.7%; --y: 76.5%; --s: 0.26em; --ax: -1.23em; --ay: 0.98em; --dur: 6.16s; --blink: 3.41s; --delay: -7.48s; }
.bgx-fireflies span:nth-child(2) { --x: 46.9%; --y: 75.8%; --s: 0.35em; --ax: 1.79em; --ay: 1.43em; --dur: 9.26s; --blink: 3.76s; --delay: -3.67s; }
.bgx-fireflies span:nth-child(3) { --x: 38.8%; --y: 22.7%; --s: 0.32em; --ax: 1.23em; --ay: 0.98em; --dur: 8.11s; --blink: 2.44s; --delay: -5.17s; }
.bgx-fireflies span:nth-child(4) { --x: 57.9%; --y: 20.8%; --s: 0.25em; --ax: 1.51em; --ay: 1.21em; --dur: 7.52s; --blink: 3.95s; --delay: -3.01s; }
.bgx-fireflies span:nth-child(5) { --x: 16%; --y: 65.3%; --s: 0.22em; --ax: -2.26em; --ay: 1.81em; --dur: 9.62s; --blink: 3.02s; --delay: -1.99s; }
.bgx-fireflies span:nth-child(6) { --x: 70.3%; --y: 32.9%; --s: 0.28em; --ax: -1.76em; --ay: 1.41em; --dur: 8.41s; --blink: 2.37s; --delay: -7.68s; }
.bgx-fireflies span:nth-child(7) { --x: 64.2%; --y: 25.5%; --s: 0.4em; --ax: 1.83em; --ay: 1.46em; --dur: 6.45s; --blink: 2.27s; --delay: -4.85s; }
.bgx-fireflies span:nth-child(8) { --x: 51%; --y: 83.4%; --s: 0.36em; --ax: -2.38em; --ay: 1.9em; --dur: 6.35s; --blink: 3.13s; --delay: -7.91s; }
.bgx-fireflies span:nth-child(9) { --x: 27.3%; --y: 40.5%; --s: 0.18em; --ax: 2.3em; --ay: 1.84em; --dur: 6.42s; --blink: 2.12s; --delay: -1.36s; }
.bgx-fireflies span:nth-child(10) { --x: 84.5%; --y: 27.3%; --s: 0.38em; --ax: -1.24em; --ay: 0.99em; --dur: 6.01s; --blink: 3.01s; --delay: -2.07s; }
.bgx-fireflies span:nth-child(11) { --x: 97.9%; --y: 60%; --s: 0.23em; --ax: 1.1em; --ay: 0.88em; --dur: 6.53s; --blink: 3.31s; --delay: -2.95s; }
.bgx-fireflies span:nth-child(12) { --x: 36.2%; --y: 23.8%; --s: 0.23em; --ax: 1.45em; --ay: 1.16em; --dur: 8.81s; --blink: 2.54s; --delay: -2.08s; }
.bgx-fireflies span:nth-child(13) { --x: 24%; --y: 37.4%; --s: 0.34em; --ax: -1.7em; --ay: 1.36em; --dur: 6.5s; --blink: 2.25s; --delay: -7.37s; }
.bgx-fireflies span:nth-child(14) { --x: 10.2%; --y: 44.6%; --s: 0.34em; --ax: 1.65em; --ay: 1.32em; --dur: 6.23s; --blink: 2.37s; --delay: -4.98s; }
.bgx-fireflies span:nth-child(15) { --x: 76.9%; --y: 79.4%; --s: 0.25em; --ax: -2.33em; --ay: 1.86em; --dur: 8.8s; --blink: 3.77s; --delay: -2.06s; }
.bgx-fireflies span:nth-child(16) { --x: 3.3%; --y: 59.9%; --s: 0.28em; --ax: 1.39em; --ay: 1.11em; --dur: 6.43s; --blink: 2.53s; --delay: -7.82s; }
@keyframes bgx-fireflies-wander {
  0%, 100% { translate: 0 0; }
  25%      { translate: var(--ax) calc(var(--ay) * -1); }
  50%      { translate: calc(var(--ax) * 0.3) calc(var(--ay) * 0.7); }
  75%      { translate: calc(var(--ax) * -0.7) calc(var(--ay) * -0.3); }
}
@keyframes bgx-fireflies-blink {
  0%, 100% { opacity: 0.1; transform: scale(0.7); }
  45%      { opacity: 1; transform: scale(1); }
  60%      { opacity: 0.85; }
}

.bgx-confetti {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--c) 6%, #fff), color-mix(in srgb, var(--c) 16%, #fff));}
.bgx-confetti span {
  position: absolute;
  top: 0;
  left: var(--x);
  height: 100%;
  animation: bgx-confetti-fall var(--dur) linear var(--delay) infinite;
}
.bgx-confetti span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0.55em;
  height: 0.95em;
  border-radius: 0.08em;
  background: var(--k);
  animation:
    bgx-confetti-flip var(--spin) linear infinite,
    bgx-confetti-sway calc(var(--spin) * 1.6) ease-in-out infinite alternate;
}
.bgx-confetti span:nth-child(4n + 1) { --k: var(--c); }
.bgx-confetti span:nth-child(4n + 2) { --k: oklch(from var(--c) 0.78 0.17 calc(h + 150)); }
.bgx-confetti span:nth-child(4n + 3) { --k: oklch(from var(--c) 0.84 0.16 calc(h - 150)); }
.bgx-confetti span:nth-child(4n + 4) { --k: oklch(from var(--c) 0.7 0.2 calc(h + 70)); }
.bgx-confetti span:nth-child(3n)::before { width: 0.6em; height: 0.6em; border-radius: 50%; }
.bgx-confetti span:nth-child(5n)::before { width: 0.28em; height: 1.4em; }
.bgx-confetti span:nth-child(1) { --x: 29.9%; --dur: 7.47s; --delay: -4.42s; --spin: 1.63s; --ax: 0.44; }
.bgx-confetti span:nth-child(2) { --x: 93.9%; --dur: 5.21s; --delay: -5.85s; --spin: 1.56s; --ax: 0.99; }
.bgx-confetti span:nth-child(3) { --x: 5.8%; --dur: 4.86s; --delay: -2.21s; --spin: 1.39s; --ax: 0.64; }
.bgx-confetti span:nth-child(4) { --x: 20.5%; --dur: 4.97s; --delay: -5.95s; --spin: 1.62s; --ax: 0.36; }
.bgx-confetti span:nth-child(5) { --x: 18.2%; --dur: 7.37s; --delay: -1.55s; --spin: 1.31s; --ax: 0.31; }
.bgx-confetti span:nth-child(6) { --x: 99.3%; --dur: 7.11s; --delay: -5.68s; --spin: 1.63s; --ax: 0.65; }
.bgx-confetti span:nth-child(7) { --x: 85.6%; --dur: 5.41s; --delay: -2.38s; --spin: 1.08s; --ax: 0.9; }
.bgx-confetti span:nth-child(8) { --x: 78.7%; --dur: 5.21s; --delay: -1.17s; --spin: 0.9s; --ax: 0.86; }
.bgx-confetti span:nth-child(9) { --x: 9.7%; --dur: 5.64s; --delay: -5.92s; --spin: 1.34s; --ax: 0.22; }
.bgx-confetti span:nth-child(10) { --x: 40.7%; --dur: 6.35s; --delay: -1.23s; --spin: 1.76s; --ax: 0.48; }
.bgx-confetti span:nth-child(11) { --x: 90.9%; --dur: 5.64s; --delay: -1.23s; --spin: 1.01s; --ax: 0.63; }
.bgx-confetti span:nth-child(12) { --x: 83.9%; --dur: 5.8s; --delay: -4.4s; --spin: 1.1s; --ax: 0.62; }
.bgx-confetti span:nth-child(13) { --x: 59.9%; --dur: 4.51s; --delay: -1.82s; --spin: 1.72s; --ax: 0.87; }
.bgx-confetti span:nth-child(14) { --x: 62.1%; --dur: 7.29s; --delay: -1.62s; --spin: 1.5s; --ax: 0.48; }
.bgx-confetti span:nth-child(15) { --x: 37.6%; --dur: 5.01s; --delay: -1.25s; --spin: 1.71s; --ax: 0.77; }
.bgx-confetti span:nth-child(16) { --x: 32.9%; --dur: 5.31s; --delay: -6.12s; --spin: 0.96s; --ax: 0.25; }
.bgx-confetti span:nth-child(17) { --x: 24.1%; --dur: 6.88s; --delay: -2.91s; --spin: 1s; --ax: 0.4; }
.bgx-confetti span:nth-child(18) { --x: 75.6%; --dur: 7.42s; --delay: -2.98s; --spin: 1.07s; --ax: 0.88; }
.bgx-confetti span:nth-child(19) { --x: 47.4%; --dur: 4.63s; --delay: -5.09s; --spin: 1.35s; --ax: 0.41; }
.bgx-confetti span:nth-child(20) { --x: 52.8%; --dur: 6.77s; --delay: -3.67s; --spin: 1.38s; --ax: 0.5; }
.bgx-confetti span:nth-child(21) { --x: 56.3%; --dur: 7.13s; --delay: -0.79s; --spin: 1.34s; --ax: 0.81; }
.bgx-confetti span:nth-child(22) { --x: 71.4%; --dur: 5.36s; --delay: -3.78s; --spin: 0.95s; --ax: 0.91; }
.bgx-confetti span:nth-child(23) { --x: 66.5%; --dur: 5.87s; --delay: -0.36s; --spin: 1.54s; --ax: 0.86; }
.bgx-confetti span:nth-child(24) { --x: 12.6%; --dur: 6.69s; --delay: -4.89s; --spin: 1.03s; --ax: 0.42; }
.bgx-confetti span:nth-child(25) { --x: 44.6%; --dur: 4.85s; --delay: -0.59s; --spin: 0.99s; --ax: 0.7; }
.bgx-confetti span:nth-child(26) { --x: 2.3%; --dur: 6.48s; --delay: -4.07s; --spin: 1.4s; --ax: 0.23; }
@keyframes bgx-confetti-fall {
  from { transform: translateY(-2em); }
  to   { transform: translateY(100%); }
}
@keyframes bgx-confetti-flip {
  from { transform: rotate3d(1, var(--ax), 0.2, 0deg); }
  to   { transform: rotate3d(1, var(--ax), 0.2, 360deg); }
}
@keyframes bgx-confetti-sway {
  from { translate: -0.8em 0; }
  to   { translate: 0.8em 0; }
}

.bgx-particle-network {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  --dot: color-mix(in srgb, var(--c) 45%, #fff);
  --link: color-mix(in srgb, var(--c) 60%, transparent);
  background: radial-gradient(ellipse 90% 80% at 30% 20%, color-mix(in srgb, var(--c) 24%, #0b1022), #05070f 80%);}
.bgx-particle-network::before {
  content: "";
  position: absolute;
  inset: 0 0 -12em;
  background-size: 12em 12em;
  background-image:
    radial-gradient(circle 0.1em at 4.1% 78.4%, color-mix(in srgb, var(--c) 40%, #fff) 50%, transparent),
    radial-gradient(circle 0.1em at 74.3% 5.4%, color-mix(in srgb, var(--c) 40%, #fff) 50%, transparent),
    radial-gradient(circle 0.1em at 43.6% 62.1%, color-mix(in srgb, var(--c) 40%, #fff) 50%, transparent),
    radial-gradient(circle 0.1em at 51.4% 84.5%, color-mix(in srgb, var(--c) 40%, #fff) 50%, transparent),
    radial-gradient(circle 0.1em at 91.6% 20.5%, color-mix(in srgb, var(--c) 40%, #fff) 50%, transparent),
    radial-gradient(circle 0.1em at 42.1% 5.3%, color-mix(in srgb, var(--c) 40%, #fff) 50%, transparent),
    radial-gradient(circle 0.1em at 41.2% 27.7%, color-mix(in srgb, var(--c) 40%, #fff) 50%, transparent),
    radial-gradient(circle 0.1em at 66.2% 84.6%, color-mix(in srgb, var(--c) 40%, #fff) 50%, transparent),
    radial-gradient(circle 0.1em at 48% 40.2%, color-mix(in srgb, var(--c) 40%, #fff) 50%, transparent);
  opacity: 0.6;
  animation: bgx-particle-network-dust 30s linear infinite;
}
.bgx-particle-network span {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--w);
  height: var(--h);
  rotate: var(--r);
  animation: bgx-particle-network-drift var(--dur) ease-in-out var(--delay) infinite alternate;
}
.bgx-particle-network span::before {
  content: "";
  position: absolute;
  top: -0.15em;
  left: -0.15em;
  width: 0.3em;
  height: 0.3em;
  border-radius: 50%;
  background: var(--dot);
  box-shadow: var(--w) 0 var(--dot), 0 var(--h) var(--dot);
}
.bgx-particle-network span::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--link), var(--link)) 0 -0.03em / 100% 0.06em no-repeat,
    linear-gradient(var(--link), var(--link)) -0.03em 0 / 0.06em 100% no-repeat,
    linear-gradient(to bottom right, transparent calc(50% - 0.035em), var(--link) 0 calc(50% + 0.035em), transparent 0);
  animation: bgx-particle-network-link var(--pulse) ease-in-out var(--delay) infinite;
}
.bgx-particle-network span:nth-child(1) { --x: 95.2%; --y: 23.4%; --w: 3.63em; --h: 3.71em; --r: 217deg; --dx: -1.44em; --dy: -0.98em; --turn: -16deg; --dur: 9.35s; --pulse: 3.7s; --delay: -7.67s; }
.bgx-particle-network span:nth-child(2) { --x: 76.7%; --y: 18.8%; --w: 4.48em; --h: 3.71em; --r: 222deg; --dx: 0.72em; --dy: 0.2em; --turn: 20deg; --dur: 9.28s; --pulse: 5.78s; --delay: -8.71s; }
.bgx-particle-network span:nth-child(3) { --x: 85.6%; --y: 16%; --w: 3.2em; --h: 3.42em; --r: 249deg; --dx: 1.67em; --dy: -0.08em; --turn: -11deg; --dur: 10.9s; --pulse: 3.55s; --delay: -6.67s; }
.bgx-particle-network span:nth-child(4) { --x: 31.7%; --y: 63.2%; --w: 4.32em; --h: 4.12em; --r: 231deg; --dx: 2.4em; --dy: -1.24em; --turn: -7deg; --dur: 9s; --pulse: 3.74s; --delay: -4.15s; }
.bgx-particle-network span:nth-child(5) { --x: 55.1%; --y: 46.4%; --w: 5.41em; --h: 4.22em; --r: 163deg; --dx: 0.79em; --dy: 0.2em; --turn: 14deg; --dur: 8.82s; --pulse: 4.84s; --delay: -9.35s; }
.bgx-particle-network span:nth-child(6) { --x: 64.6%; --y: 29.7%; --w: 5.5em; --h: 2.79em; --r: 8deg; --dx: -2.07em; --dy: 0.41em; --turn: -6deg; --dur: 11.61s; --pulse: 4.62s; --delay: -1.82s; }
.bgx-particle-network span:nth-child(7) { --x: 46.5%; --y: 53.1%; --w: 4.7em; --h: 3.08em; --r: 39deg; --dx: -1.93em; --dy: 1.33em; --turn: -23deg; --dur: 9.47s; --pulse: 5.51s; --delay: -2.43s; }
.bgx-particle-network span:nth-child(8) { --x: 25.8%; --y: 42.3%; --w: 5.69em; --h: 3.72em; --r: 194deg; --dx: 0.04em; --dy: -1.37em; --turn: -23deg; --dur: 11.51s; --pulse: 4.75s; --delay: -7.07s; }
.bgx-particle-network span:nth-child(9) { --x: 16.6%; --y: 35.3%; --w: 4.02em; --h: 3.5em; --r: 134deg; --dx: 1.79em; --dy: -1.32em; --turn: -7deg; --dur: 7.93s; --pulse: 3.78s; --delay: -3.13s; }
.bgx-particle-network span:nth-child(10) { --x: 2.1%; --y: 21%; --w: 4.42em; --h: 4.22em; --r: 333deg; --dx: -1.85em; --dy: -0.46em; --turn: 16deg; --dur: 9.58s; --pulse: 4.91s; --delay: -5.1s; }
@keyframes bgx-particle-network-drift {
  from { transform: translate(0, 0) rotate(0deg); }
  to   { transform: translate(var(--dx), var(--dy)) rotate(var(--turn)); }
}
@keyframes bgx-particle-network-link {
  0%, 100% { opacity: 0.15; }
  50%      { opacity: 1; }
}
@keyframes bgx-particle-network-dust {
  to { transform: translateY(-12em); }
}

.bgx-floating-particles {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  --beam: color-mix(in srgb, var(--c) 30%, #fff1d0);
  background: linear-gradient(160deg, #1d1712, #0e0b09 55%, color-mix(in srgb, var(--c) 20%, #0e0b0a));}
.bgx-floating-particles::before {
  content: "";
  position: absolute;
  inset: -10% -25%;
  background:
    linear-gradient(112deg, transparent 16%, color-mix(in srgb, var(--beam) 36%, transparent) 25%, transparent 34%),
    linear-gradient(112deg, transparent 39%, color-mix(in srgb, var(--beam) 28%, transparent) 47%, transparent 57%),
    linear-gradient(112deg, transparent 61%, color-mix(in srgb, var(--beam) 22%, transparent) 66%, transparent 73%);
  mask: linear-gradient(to bottom, #000 10%, transparent 95%);
  animation: bgx-floating-particles-beams 7s ease-in-out infinite alternate;
}
.bgx-floating-particles-motes {
  position: absolute;
  inset: -10% -25%;
  mask: linear-gradient(112deg, rgb(0 0 0 / 0.2) 16%, #000 25%, rgb(0 0 0 / 0.2) 34% 39%, #000 47%, rgb(0 0 0 / 0.2) 57% 61%, #000 66%, rgb(0 0 0 / 0.2) 73%);
}
.bgx-floating-particles span {
  position: absolute;
  top: 0;
  left: calc(var(--x) * 0.67 + 16.5%);
  height: 100%;
  animation: bgx-floating-particles-rise var(--dur) linear var(--delay) infinite;
}
.bgx-floating-particles span::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: var(--beam);
  box-shadow: 0 0 calc(var(--s) * 2.5) color-mix(in srgb, var(--beam) 70%, transparent);
  animation:
    bgx-floating-particles-float var(--sway) ease-in-out var(--delay) infinite alternate,
    bgx-floating-particles-glint var(--glint) ease-in-out var(--delay) infinite;
}
.bgx-floating-particles span:nth-child(1) { --x: 95.1%; --s: 0.23em; --dur: 18.77s; --delay: -5.02s; --sway: 3.84s; --glint: 3.44s; }
.bgx-floating-particles span:nth-child(2) { --x: 51.2%; --s: 0.45em; --dur: 17.26s; --delay: -4.76s; --sway: 4.61s; --glint: 2.48s; }
.bgx-floating-particles span:nth-child(3) { --x: 31.7%; --s: 0.42em; --dur: 21.18s; --delay: -14.35s; --sway: 3.89s; --glint: 4.09s; }
.bgx-floating-particles span:nth-child(4) { --x: 77.3%; --s: 0.26em; --dur: 20.46s; --delay: -11.71s; --sway: 2.71s; --glint: 2.95s; }
.bgx-floating-particles span:nth-child(5) { --x: 15.5%; --s: 0.33em; --dur: 13.35s; --delay: -17.97s; --sway: 4.4s; --glint: 4.8s; }
.bgx-floating-particles span:nth-child(6) { --x: 74%; --s: 0.19em; --dur: 16s; --delay: -16.33s; --sway: 3.96s; --glint: 3.03s; }
.bgx-floating-particles span:nth-child(7) { --x: 44.5%; --s: 0.47em; --dur: 12.56s; --delay: -13.31s; --sway: 4.53s; --glint: 3.92s; }
.bgx-floating-particles span:nth-child(8) { --x: 4.9%; --s: 0.22em; --dur: 20.5s; --delay: -9.23s; --sway: 3.77s; --glint: 2.77s; }
.bgx-floating-particles span:nth-child(9) { --x: 42.8%; --s: 0.34em; --dur: 14.71s; --delay: -16.18s; --sway: 5.34s; --glint: 2.47s; }
.bgx-floating-particles span:nth-child(10) { --x: 67.2%; --s: 0.41em; --dur: 14.79s; --delay: -11.19s; --sway: 3.57s; --glint: 4.68s; }
.bgx-floating-particles span:nth-child(11) { --x: 39.1%; --s: 0.3em; --dur: 21.58s; --delay: -18.74s; --sway: 2.92s; --glint: 3.89s; }
.bgx-floating-particles span:nth-child(12) { --x: 71.3%; --s: 0.18em; --dur: 16.61s; --delay: -13.07s; --sway: 4.49s; --glint: 4.77s; }
.bgx-floating-particles span:nth-child(13) { --x: 54.1%; --s: 0.23em; --dur: 16.87s; --delay: -12.99s; --sway: 4.78s; --glint: 4.04s; }
.bgx-floating-particles span:nth-child(14) { --x: 88.5%; --s: 0.29em; --dur: 13.98s; --delay: -2.57s; --sway: 5.23s; --glint: 3.09s; }
.bgx-floating-particles span:nth-child(15) { --x: 57.8%; --s: 0.28em; --dur: 17.66s; --delay: -17.46s; --sway: 3.51s; --glint: 2.68s; }
.bgx-floating-particles span:nth-child(16) { --x: 92.7%; --s: 0.21em; --dur: 18.43s; --delay: -13.13s; --sway: 3.83s; --glint: 3.05s; }
.bgx-floating-particles span:nth-child(17) { --x: 81.1%; --s: 0.37em; --dur: 19.42s; --delay: -21.96s; --sway: 3.07s; --glint: 3.53s; }
.bgx-floating-particles span:nth-child(18) { --x: 62.3%; --s: 0.46em; --dur: 17.88s; --delay: -17.1s; --sway: 2.97s; --glint: 3.35s; }
.bgx-floating-particles span:nth-child(19) { --x: 64.7%; --s: 0.44em; --dur: 14.7s; --delay: -9.5s; --sway: 2.88s; --glint: 4.02s; }
.bgx-floating-particles span:nth-child(20) { --x: 21.6%; --s: 0.38em; --dur: 15.45s; --delay: -4.89s; --sway: 3.74s; --glint: 2.52s; }
.bgx-floating-particles span:nth-child(21) { --x: 84.3%; --s: 0.28em; --dur: 14.58s; --delay: -1.76s; --sway: 4.76s; --glint: 3.59s; }
.bgx-floating-particles span:nth-child(22) { --x: 11%; --s: 0.24em; --dur: 17.99s; --delay: -15.51s; --sway: 4.93s; --glint: 2.96s; }
.bgx-floating-particles span:nth-child(23) { --x: 9.1%; --s: 0.32em; --dur: 16.47s; --delay: -14.23s; --sway: 3.8s; --glint: 4.62s; }
.bgx-floating-particles span:nth-child(24) { --x: 27.8%; --s: 0.34em; --dur: 18.52s; --delay: -2.34s; --sway: 3.23s; --glint: 3.03s; }
.bgx-floating-particles span:nth-child(25) { --x: 47.8%; --s: 0.22em; --dur: 19.02s; --delay: -7.89s; --sway: 5.16s; --glint: 4.54s; }
.bgx-floating-particles span:nth-child(26) { --x: 98.6%; --s: 0.35em; --dur: 12.08s; --delay: -21.56s; --sway: 3.71s; --glint: 4.03s; }
.bgx-floating-particles span:nth-child(27) { --x: 25.8%; --s: 0.25em; --dur: 20.75s; --delay: -17.05s; --sway: 3.43s; --glint: 4.34s; }
.bgx-floating-particles span:nth-child(28) { --x: 35.4%; --s: 0.32em; --dur: 18.95s; --delay: -9.08s; --sway: 5.46s; --glint: 2.97s; }
.bgx-floating-particles span:nth-child(29) { --x: 19.3%; --s: 0.31em; --dur: 13.15s; --delay: -2.36s; --sway: 4.72s; --glint: 3.33s; }
.bgx-floating-particles span:nth-child(30) { --x: 2.7%; --s: 0.3em; --dur: 17.74s; --delay: -20.85s; --sway: 3.62s; --glint: 3.75s; }
@keyframes bgx-floating-particles-rise {
  from { transform: translateY(1em); }
  to   { transform: translateY(-100%); }
}
@keyframes bgx-floating-particles-float {
  from { translate: -1.2em 0; }
  to   { translate: 1.2em 0; }
}
@keyframes bgx-floating-particles-glint {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}
@keyframes bgx-floating-particles-beams {
  from { opacity: 0.7; transform: translateX(-0.6em); }
  to   { opacity: 1; transform: translateX(0.6em); }
}

.bgx-bokeh-lights {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(ellipse 90% 90% at 70% 30%, color-mix(in srgb, var(--c) 22%, #0d0f1c), #06070d 75%);}
.bgx-bokeh-lights span {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--d);
  height: var(--d);
  margin: calc(var(--d) / -2);
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--k) 32%, transparent) 74%, color-mix(in srgb, var(--k) 60%, transparent) 91%, transparent);
  mix-blend-mode: screen;
  opacity: 0.3;
  animation:
    bgx-bokeh-lights-drift var(--dur) ease-in-out var(--delay) infinite alternate,
    bgx-bokeh-lights-glow var(--pulse) ease-in-out var(--delay) infinite alternate;
}
.bgx-bokeh-lights span:nth-child(3n + 1) { --k: var(--c); }
.bgx-bokeh-lights span:nth-child(3n + 2) { --k: oklch(from var(--c) 0.8 0.14 calc(h + 50)); }
.bgx-bokeh-lights span:nth-child(3n) { --k: oklch(from var(--c) 0.86 0.1 calc(h - 45)); }
.bgx-bokeh-lights span:nth-child(1) { --x: 11.8%; --y: 85.4%; --d: 3.09em; --dx: 1em; --dy: 0.87em; --dur: 11.01s; --pulse: 4.76s; --delay: -0.99s; }
.bgx-bokeh-lights span:nth-child(2) { --x: 94.7%; --y: 36.7%; --d: 5.13em; --dx: 1.17em; --dy: 0.02em; --dur: 11.05s; --pulse: 4.56s; --delay: -7.68s; }
.bgx-bokeh-lights span:nth-child(3) { --x: 67.2%; --y: 8.1%; --d: 7.83em; --dx: 0.16em; --dy: 0.34em; --dur: 8.88s; --pulse: 2.99s; --delay: -0.78s; }
.bgx-bokeh-lights span:nth-child(4) { --x: 90.2%; --y: 8.1%; --d: 5.03em; --dx: -2.46em; --dy: -1.57em; --dur: 8.92s; --pulse: 5s; --delay: -2.89s; }
.bgx-bokeh-lights span:nth-child(5) { --x: 80.7%; --y: 79.8%; --d: 4.02em; --dx: 1.89em; --dy: -0.72em; --dur: 13.57s; --pulse: 3.84s; --delay: -0.24s; }
.bgx-bokeh-lights span:nth-child(6) { --x: 45.4%; --y: 17.8%; --d: 3.13em; --dx: -0.04em; --dy: -1.29em; --dur: 12.52s; --pulse: 3.76s; --delay: -7.38s; }
.bgx-bokeh-lights span:nth-child(7) { --x: 17.9%; --y: 19.2%; --d: 3.21em; --dx: -2.87em; --dy: -1.37em; --dur: 10.1s; --pulse: 3.08s; --delay: -3.51s; }
.bgx-bokeh-lights span:nth-child(8) { --x: 74.7%; --y: 63.2%; --d: 6.12em; --dx: 1.74em; --dy: 1.13em; --dur: 8.8s; --pulse: 3.93s; --delay: -8.39s; }
.bgx-bokeh-lights span:nth-child(9) { --x: 51.9%; --y: 76.7%; --d: 6.63em; --dx: 0.62em; --dy: 1.83em; --dur: 11.23s; --pulse: 3.81s; --delay: -6.19s; }
.bgx-bokeh-lights span:nth-child(10) { --x: 60.2%; --y: 23%; --d: 6.69em; --dx: 2.27em; --dy: -1.39em; --dur: 8.01s; --pulse: 3.27s; --delay: -2.76s; }
.bgx-bokeh-lights span:nth-child(11) { --x: 24.8%; --y: 76.7%; --d: 6.06em; --dx: 2.36em; --dy: 0.63em; --dur: 8.35s; --pulse: 4.08s; --delay: -8.19s; }
.bgx-bokeh-lights span:nth-child(12) { --x: 38.5%; --y: 12.1%; --d: 6.7em; --dx: -1.32em; --dy: -0.08em; --dur: 13.62s; --pulse: 3.43s; --delay: -1.82s; }
.bgx-bokeh-lights span:nth-child(13) { --x: 30.4%; --y: 11.8%; --d: 7.27em; --dx: 1.03em; --dy: 0.54em; --dur: 10.05s; --pulse: 4.44s; --delay: -6.28s; }
.bgx-bokeh-lights span:nth-child(14) { --x: 3.3%; --y: 39.9%; --d: 2.88em; --dx: -1.25em; --dy: -1.07em; --dur: 12.01s; --pulse: 3.47s; --delay: -9.93s; }
@keyframes bgx-bokeh-lights-drift {
  from { translate: 0 0; }
  to   { translate: var(--dx) var(--dy); }
}
@keyframes bgx-bokeh-lights-glow {
  from { opacity: 0.25; transform: scale(0.88); }
  to   { opacity: 0.95; transform: scale(1.06); }
}

.bgx-rising-embers {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  --ember: color-mix(in oklab, var(--c) 15%, #ff8a3d);
  background: linear-gradient(to bottom, #070509, #150a08 65%, #2a1109);}
.bgx-rising-embers::after {
  content: "";
  position: absolute;
  inset: auto -10% 0;
  height: 55%;
  background: radial-gradient(ellipse 60% 100% at 50% 100%, color-mix(in srgb, var(--ember) 50%, transparent), transparent 75%);
  transform-origin: 50% 100%;
  animation: bgx-rising-embers-fire 1.8s ease-in-out infinite alternate;
}
.bgx-rising-embers span {
  position: absolute;
  top: 0;
  left: var(--x);
  height: 100%;
  animation: bgx-rising-embers-climb var(--dur) linear var(--delay) infinite;
}
.bgx-rising-embers span::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: color-mix(in srgb, var(--ember), #fff 45%);
  box-shadow: 0 0 calc(var(--s) * 1.6) calc(var(--s) * 0.4) var(--ember);
  opacity: 0;
  animation:
    bgx-rising-embers-zigzag var(--zig) ease-in-out var(--delay) infinite alternate,
    bgx-rising-embers-cool var(--dur) linear var(--delay) infinite;
}
.bgx-rising-embers span:nth-child(1) { --x: 29.3%; --s: 0.17em; --dur: 5.74s; --delay: -1.72s; --zig: 1.37s; }
.bgx-rising-embers span:nth-child(2) { --x: 74.9%; --s: 0.27em; --dur: 3.81s; --delay: -5.65s; --zig: 1.36s; }
.bgx-rising-embers span:nth-child(3) { --x: 62.6%; --s: 0.33em; --dur: 4.15s; --delay: -6.16s; --zig: 1.46s; }
.bgx-rising-embers span:nth-child(4) { --x: 21.3%; --s: 0.16em; --dur: 4.97s; --delay: -3.37s; --zig: 1s; }
.bgx-rising-embers span:nth-child(5) { --x: 6.2%; --s: 0.29em; --dur: 5.29s; --delay: -2.93s; --zig: 1.74s; }
.bgx-rising-embers span:nth-child(6) { --x: 67.4%; --s: 0.24em; --dur: 4.85s; --delay: -6.2s; --zig: 1.07s; }
.bgx-rising-embers span:nth-child(7) { --x: 47.1%; --s: 0.24em; --dur: 5.19s; --delay: -1.36s; --zig: 1.67s; }
.bgx-rising-embers span:nth-child(8) { --x: 70.3%; --s: 0.27em; --dur: 4.19s; --delay: -0.38s; --zig: 1.74s; }
.bgx-rising-embers span:nth-child(9) { --x: 35.5%; --s: 0.35em; --dur: 5.83s; --delay: -0.25s; --zig: 1.69s; }
.bgx-rising-embers span:nth-child(10) { --x: 25.4%; --s: 0.35em; --dur: 4.86s; --delay: -1.72s; --zig: 1.11s; }
.bgx-rising-embers span:nth-child(11) { --x: 93.8%; --s: 0.26em; --dur: 4.91s; --delay: -2.51s; --zig: 1.18s; }
.bgx-rising-embers span:nth-child(12) { --x: 79%; --s: 0.3em; --dur: 5.4s; --delay: -4.27s; --zig: 1.63s; }
.bgx-rising-embers span:nth-child(13) { --x: 43.3%; --s: 0.28em; --dur: 3.86s; --delay: -5.69s; --zig: 1.28s; }
.bgx-rising-embers span:nth-child(14) { --x: 17%; --s: 0.19em; --dur: 4.65s; --delay: -3.51s; --zig: 1.17s; }
.bgx-rising-embers span:nth-child(15) { --x: 56.4%; --s: 0.23em; --dur: 5.62s; --delay: -4.38s; --zig: 0.93s; }
.bgx-rising-embers span:nth-child(16) { --x: 50.7%; --s: 0.19em; --dur: 5.81s; --delay: -5.44s; --zig: 1s; }
.bgx-rising-embers span:nth-child(17) { --x: 83.8%; --s: 0.31em; --dur: 5.21s; --delay: -2.53s; --zig: 0.95s; }
.bgx-rising-embers span:nth-child(18) { --x: 41.1%; --s: 0.23em; --dur: 6.5s; --delay: -6.36s; --zig: 0.89s; }
.bgx-rising-embers span:nth-child(19) { --x: 33.6%; --s: 0.28em; --dur: 5.66s; --delay: -4.35s; --zig: 1.67s; }
.bgx-rising-embers span:nth-child(20) { --x: 60.5%; --s: 0.34em; --dur: 5.56s; --delay: -5.68s; --zig: 0.95s; }
.bgx-rising-embers span:nth-child(21) { --x: 9.7%; --s: 0.32em; --dur: 6.32s; --delay: -2.76s; --zig: 1.52s; }
.bgx-rising-embers span:nth-child(22) { --x: 85.5%; --s: 0.22em; --dur: 4.78s; --delay: -0.18s; --zig: 1.15s; }
.bgx-rising-embers span:nth-child(23) { --x: 91.2%; --s: 0.25em; --dur: 5.86s; --delay: -3.03s; --zig: 1.44s; }
.bgx-rising-embers span:nth-child(24) { --x: 97.1%; --s: 0.32em; --dur: 4.57s; --delay: -6.02s; --zig: 0.98s; }
.bgx-rising-embers span:nth-child(25) { --x: 13.8%; --s: 0.26em; --dur: 4.59s; --delay: -4.79s; --zig: 1.67s; }
.bgx-rising-embers span:nth-child(26) { --x: 1.3%; --s: 0.18em; --dur: 6.08s; --delay: -4.84s; --zig: 0.91s; }
@keyframes bgx-rising-embers-climb {
  from { transform: translateY(0.5em); }
  to   { transform: translateY(-100%); }
}
@keyframes bgx-rising-embers-zigzag {
  from { translate: -0.9em 0; }
  to   { translate: 0.9em 0; }
}
@keyframes bgx-rising-embers-cool {
  0%   { opacity: 0; }
  6%   { opacity: 1; }
  22%  { opacity: 0.6; }
  30%  { opacity: 1; }
  48%  { opacity: 0.7; }
  70%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes bgx-rising-embers-fire {
  from { opacity: 0.7; transform: scaleY(0.92); }
  to   { opacity: 1; transform: scaleY(1.06); }
}

.bgx-matrix-rain {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  --code: color-mix(in oklab, var(--c) 45%, #22ff7a);
  background: radial-gradient(ellipse 80% 70% at 50% 40%, color-mix(in srgb, var(--code) 10%, #030807), #010302);}
.bgx-matrix-rain span {
  position: absolute;
  top: 0;
  left: var(--x);
  width: 0.9em;
  height: 100%;
  overflow: hidden;
  background: color-mix(in srgb, var(--code) 9%, transparent);
  mask-image:
    radial-gradient(0.15em 0.06em at 0.27em 0.35em, #000 70%, transparent),
    radial-gradient(0.06em 0.3em at 0.18em 0.5em, #000 70%, transparent),
    radial-gradient(0.06em 0.3em at 0.18em 1.5em, #000 70%, transparent),
    radial-gradient(0.28em 0.06em at 0.41em 1.5em, #000 70%, transparent),
    radial-gradient(0.09em 0.09em at 0.41em 1.5em, #000 70%, transparent),
    radial-gradient(0.28em 0.06em at 0.41em 2.8em, #000 70%, transparent),
    radial-gradient(0.28em 0.06em at 0.41em 2.5em, #000 70%, transparent),
    radial-gradient(0.06em 0.3em at 0.41em 3.5em, #000 70%, transparent),
    radial-gradient(0.06em 0.3em at 0.18em 3.5em, #000 70%, transparent),
    radial-gradient(0.28em 0.06em at 0.41em 3.8em, #000 70%, transparent),
    radial-gradient(0.15em 0.06em at 0.27em 4.35em, #000 70%, transparent),
    radial-gradient(0.06em 0.3em at 0.41em 4.5em, #000 70%, transparent),
    radial-gradient(0.09em 0.09em at 0.41em 5.5em, #000 70%, transparent),
    radial-gradient(0.28em 0.06em at 0.41em 5.2em, #000 70%, transparent),
    radial-gradient(0.28em 0.06em at 0.41em 5.8em, #000 70%, transparent),
    radial-gradient(0.06em 0.3em at 0.63em 6.5em, #000 70%, transparent),
    radial-gradient(0.28em 0.06em at 0.41em 6.5em, #000 70%, transparent),
    radial-gradient(0.09em 0.09em at 0.41em 7.5em, #000 70%, transparent),
    radial-gradient(0.15em 0.06em at 0.27em 7.35em, #000 70%, transparent),
    radial-gradient(0.28em 0.06em at 0.41em 8.2em, #000 70%, transparent),
    radial-gradient(0.15em 0.06em at 0.54em 8.65em, #000 70%, transparent),
    radial-gradient(0.06em 0.3em at 0.18em 8.5em, #000 70%, transparent),
    radial-gradient(0.28em 0.06em at 0.41em 9.8em, #000 70%, transparent),
    radial-gradient(0.06em 0.3em at 0.63em 9.5em, #000 70%, transparent);
  mask-size: 0.9em 10em;
  mask-position: 0 var(--off);
}
.bgx-matrix-rain span::before {
  content: "";
  position: absolute;
  top: calc(var(--len) * -1);
  left: 0;
  width: 100%;
  height: calc(100% + var(--len));
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--code) 70%, transparent) 40%, var(--code) 90%, #effff4 0) top / 100% var(--len) no-repeat;
  animation: bgx-matrix-rain-fall var(--dur) linear var(--delay) infinite;
}
.bgx-matrix-rain span:nth-child(1) { --x: 45%; --off: 4em; --len: 7.54em; --dur: 4.61s; --delay: -1.89s; }
.bgx-matrix-rain span:nth-child(2) { --x: 35.5%; --off: 5em; --len: 6.06em; --dur: 2.35s; --delay: -2.54s; }
.bgx-matrix-rain span:nth-child(3) { --x: 94.2%; --off: 4em; --len: 6.71em; --dur: 4.57s; --delay: -0.62s; }
.bgx-matrix-rain span:nth-child(4) { --x: 25.2%; --off: 9em; --len: 7.66em; --dur: 3.58s; --delay: -4.02s; }
.bgx-matrix-rain span:nth-child(5) { --x: 49.3%; --off: 1em; --len: 5.96em; --dur: 3.61s; --delay: -3.42s; }
.bgx-matrix-rain span:nth-child(6) { --x: 90.6%; --off: 3em; --len: 7.81em; --dur: 2.34s; --delay: -3.54s; }
.bgx-matrix-rain span:nth-child(7) { --x: 41.2%; --off: 3em; --len: 6.08em; --dur: 4.4s; --delay: -0.56s; }
.bgx-matrix-rain span:nth-child(8) { --x: 83.5%; --off: 5em; --len: 7.07em; --dur: 3.07s; --delay: -4.44s; }
.bgx-matrix-rain span:nth-child(9) { --x: 27.8%; --off: 0em; --len: 5.99em; --dur: 4.36s; --delay: -0.92s; }
.bgx-matrix-rain span:nth-child(10) { --x: 71.6%; --off: 5em; --len: 8.92em; --dur: 4.59s; --delay: -2.16s; }
.bgx-matrix-rain span:nth-child(11) { --x: 66.5%; --off: 2em; --len: 9.69em; --dur: 3.33s; --delay: -2.29s; }
.bgx-matrix-rain span:nth-child(12) { --x: 60.6%; --off: 2em; --len: 9.88em; --dur: 3.27s; --delay: -1.51s; }
.bgx-matrix-rain span:nth-child(13) { --x: 56.3%; --off: 5em; --len: 5.15em; --dur: 4.47s; --delay: -0.19s; }
.bgx-matrix-rain span:nth-child(14) { --x: 32.2%; --off: 3em; --len: 10.51em; --dur: 3.74s; --delay: -3.65s; }
.bgx-matrix-rain span:nth-child(15) { --x: 77.8%; --off: 0em; --len: 5.5em; --dur: 4.15s; --delay: -3.93s; }
.bgx-matrix-rain span:nth-child(16) { --x: 20.3%; --off: 0em; --len: 11.44em; --dur: 3.63s; --delay: -4.08s; }
.bgx-matrix-rain span:nth-child(17) { --x: 51.1%; --off: 9em; --len: 9.91em; --dur: 3.57s; --delay: -0.73s; }
.bgx-matrix-rain span:nth-child(18) { --x: 17.6%; --off: 3em; --len: 6.53em; --dur: 3.61s; --delay: -2.95s; }
.bgx-matrix-rain span:nth-child(19) { --x: 12.6%; --off: 2em; --len: 9em; --dur: 3.57s; --delay: -1.95s; }
.bgx-matrix-rain span:nth-child(20) { --x: 85.7%; --off: 9em; --len: 9.89em; --dur: 3.58s; --delay: -1.31s; }
.bgx-matrix-rain span:nth-child(21) { --x: 97.8%; --off: 5em; --len: 11.29em; --dur: 2.59s; --delay: -4.93s; }
.bgx-matrix-rain span:nth-child(22) { --x: 10.1%; --off: 9em; --len: 5.2em; --dur: 4.16s; --delay: -4.47s; }
.bgx-matrix-rain span:nth-child(23) { --x: 74.6%; --off: 4em; --len: 7.63em; --dur: 4.32s; --delay: -0.1s; }
.bgx-matrix-rain span:nth-child(24) { --x: 5.8%; --off: 6em; --len: 9.07em; --dur: 3.55s; --delay: -0.55s; }
.bgx-matrix-rain span:nth-child(25) { --x: 62.8%; --off: 0em; --len: 9.35em; --dur: 4.14s; --delay: -4.12s; }
.bgx-matrix-rain span:nth-child(26) { --x: 0.9%; --off: 9em; --len: 7.56em; --dur: 3.61s; --delay: -1.93s; }
@keyframes bgx-matrix-rain-fall {
  to { transform: translateY(100%); }
}

.bgx-fireworks {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(to bottom, #04050d, #0b0f24 65%, color-mix(in srgb, var(--c) 30%, #141a38));}
.bgx-fireworks span {
  position: absolute;
  top: var(--y);
  left: var(--x);
  color: var(--k);
}
.bgx-fireworks span::before {
  content: "";
  position: absolute;
  width: 0.24em;
  height: 0.24em;
  margin: -0.12em;
  border-radius: 50%;
  rotate: var(--r);
  box-shadow:
    4.48em 0em 0 0.03em currentColor,
    3.86em 0em 0 -0.02em color-mix(in srgb, currentColor 70%, transparent),
    3.23em 0em 0 -0.05em color-mix(in srgb, currentColor 40%, transparent),
    4.06em 1.96em 0 0.03em currentColor,
    3.49em 1.69em 0 -0.02em color-mix(in srgb, currentColor 70%, transparent),
    2.92em 1.41em 0 -0.05em color-mix(in srgb, currentColor 40%, transparent),
    3.38em 2.93em 0 0.03em currentColor,
    2.91em 2.52em 0 -0.02em color-mix(in srgb, currentColor 70%, transparent),
    2.43em 2.11em 0 -0.05em color-mix(in srgb, currentColor 40%, transparent),
    2.02em 3.95em 0 0.03em currentColor,
    1.73em 3.4em 0 -0.02em color-mix(in srgb, currentColor 70%, transparent),
    1.45em 2.85em 0 -0.05em color-mix(in srgb, currentColor 40%, transparent),
    0.39em 4.67em 0 0.03em currentColor,
    0.33em 4.02em 0 -0.02em color-mix(in srgb, currentColor 70%, transparent),
    0.28em 3.36em 0 -0.05em color-mix(in srgb, currentColor 40%, transparent),
    -1.31em 4.3em 0 0.03em currentColor,
    -1.12em 3.7em 0 -0.02em color-mix(in srgb, currentColor 70%, transparent),
    -0.94em 3.1em 0 -0.05em color-mix(in srgb, currentColor 40%, transparent),
    -2.28em 3.34em 0 0.03em currentColor,
    -1.96em 2.87em 0 -0.02em color-mix(in srgb, currentColor 70%, transparent),
    -1.64em 2.4em 0 -0.05em color-mix(in srgb, currentColor 40%, transparent),
    -3.27em 2.69em 0 0.03em currentColor,
    -2.81em 2.32em 0 -0.02em color-mix(in srgb, currentColor 70%, transparent),
    -2.35em 1.94em 0 -0.05em color-mix(in srgb, currentColor 40%, transparent),
    -3.83em 1.09em 0 0.03em currentColor,
    -3.29em 0.94em 0 -0.02em color-mix(in srgb, currentColor 70%, transparent),
    -2.76em 0.79em 0 -0.05em color-mix(in srgb, currentColor 40%, transparent),
    -4.44em -0.52em 0 0.03em currentColor,
    -3.82em -0.45em 0 -0.02em color-mix(in srgb, currentColor 70%, transparent),
    -3.2em -0.38em 0 -0.05em color-mix(in srgb, currentColor 40%, transparent),
    -4.04em -2em 0 0.03em currentColor,
    -3.47em -1.72em 0 -0.02em color-mix(in srgb, currentColor 70%, transparent),
    -2.91em -1.44em 0 -0.05em color-mix(in srgb, currentColor 40%, transparent),
    -3.11em -3.36em 0 0.03em currentColor,
    -2.68em -2.89em 0 -0.02em color-mix(in srgb, currentColor 70%, transparent),
    -2.24em -2.42em 0 -0.05em color-mix(in srgb, currentColor 40%, transparent),
    -1.94em -4.03em 0 0.03em currentColor,
    -1.67em -3.47em 0 -0.02em color-mix(in srgb, currentColor 70%, transparent),
    -1.39em -2.9em 0 -0.05em color-mix(in srgb, currentColor 40%, transparent),
    -0.71em -4.77em 0 0.03em currentColor,
    -0.61em -4.1em 0 -0.02em color-mix(in srgb, currentColor 70%, transparent),
    -0.51em -3.43em 0 -0.05em color-mix(in srgb, currentColor 40%, transparent),
    0.99em -4.21em 0 0.03em currentColor,
    0.85em -3.62em 0 -0.02em color-mix(in srgb, currentColor 70%, transparent),
    0.71em -3.03em 0 -0.05em color-mix(in srgb, currentColor 40%, transparent),
    2.4em -3.65em 0 0.03em currentColor,
    2.06em -3.14em 0 -0.02em color-mix(in srgb, currentColor 70%, transparent),
    1.73em -2.63em 0 -0.05em color-mix(in srgb, currentColor 40%, transparent),
    3.37em -2.81em 0 0.03em currentColor,
    2.9em -2.41em 0 -0.02em color-mix(in srgb, currentColor 70%, transparent),
    2.43em -2.02em 0 -0.05em color-mix(in srgb, currentColor 40%, transparent),
    4.1em -1.12em 0 0.03em currentColor,
    3.52em -0.96em 0 -0.02em color-mix(in srgb, currentColor 70%, transparent),
    2.95em -0.81em 0 -0.05em color-mix(in srgb, currentColor 40%, transparent),
    2.41em 0.65em 0 -0.02em color-mix(in srgb, currentColor, #fff 55%),
    1.77em 1.77em 0 -0.02em color-mix(in srgb, currentColor, #fff 55%),
    0.65em 2.41em 0 -0.02em color-mix(in srgb, currentColor, #fff 55%),
    -0.65em 2.41em 0 -0.02em color-mix(in srgb, currentColor, #fff 55%),
    -1.77em 1.77em 0 -0.02em color-mix(in srgb, currentColor, #fff 55%),
    -2.41em 0.65em 0 -0.02em color-mix(in srgb, currentColor, #fff 55%),
    -2.41em -0.65em 0 -0.02em color-mix(in srgb, currentColor, #fff 55%),
    -1.77em -1.77em 0 -0.02em color-mix(in srgb, currentColor, #fff 55%),
    -0.65em -2.41em 0 -0.02em color-mix(in srgb, currentColor, #fff 55%),
    0.65em -2.41em 0 -0.02em color-mix(in srgb, currentColor, #fff 55%),
    1.77em -1.77em 0 -0.02em color-mix(in srgb, currentColor, #fff 55%),
    2.41em -0.65em 0 -0.02em color-mix(in srgb, currentColor, #fff 55%),
    0 0 1.6em 0.8em color-mix(in srgb, currentColor 30%, transparent);
  opacity: 0;
  animation:
    bgx-fireworks-burst var(--dur) var(--delay) infinite,
    bgx-fireworks-sag var(--dur) var(--delay) infinite;
}
.bgx-fireworks span::after {
  content: "";
  position: absolute;
  top: 0;
  left: -0.06em;
  width: 0.12em;
  height: 3em;
  border-radius: 999em;
  background: linear-gradient(to bottom, color-mix(in srgb, currentColor, #fff 50%), transparent);
  opacity: 0;
  animation: bgx-fireworks-launch var(--dur) var(--delay) infinite;
}
.bgx-fireworks span:nth-child(1) { --x: 22%; --y: 40%; --r: 0deg; --k: var(--c); --dur: 3.2s; --delay: -1.4s; }
.bgx-fireworks span:nth-child(2) { --x: 48%; --y: 34%; --r: 40deg; --k: oklch(from var(--c) 0.84 0.16 calc(h + 140)); --dur: 3.6s; --delay: -0.4s; }
.bgx-fireworks span:nth-child(3) { --x: 72%; --y: 46%; --r: 75deg; --k: oklch(from var(--c) 0.86 0.15 calc(h - 120)); --dur: 3.4s; --delay: -2.9s; }
.bgx-fireworks span:nth-child(4) { --x: 88%; --y: 30%; --r: 20deg; --k: oklch(from var(--c) 0.8 0.17 calc(h + 60)); --dur: 3.8s; --delay: -2.2s; }
@keyframes bgx-fireworks-sag {
  0%, 60% { translate: 0 0; }
  100%    { translate: 0 1.4em; }
}
@keyframes bgx-fireworks-launch {
  0%   { transform: translateY(10em); opacity: 0; animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); }
  4%   { opacity: 1; }
  26%  { transform: translateY(0); opacity: 1; }
  30%  { transform: translateY(0) scaleY(0.2); opacity: 0; }
  100% { transform: translateY(0) scaleY(0.2); opacity: 0; }
}
@keyframes bgx-fireworks-burst {
  0%, 26% { transform: scale(0.05); opacity: 0; }
  28%     { opacity: 1; animation-timing-function: cubic-bezier(0.1, 0.7, 0.3, 1); }
  70%     { transform: scale(1); opacity: 1; }
  100%    { transform: scale(1.08); opacity: 0; }
}

.bgx-lightning-storm {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  --bolt: color-mix(in srgb, var(--c) 35%, #fff);
  --cloud: color-mix(in srgb, var(--c) 14%, #2b3144);
  background:
    radial-gradient(40% 5em at 18% 1em, color-mix(in srgb, var(--cloud), #000 25%) 50%, transparent),
    radial-gradient(30% 6.5em at 70% 0, color-mix(in srgb, var(--cloud), #000 20%) 50%, transparent),
    linear-gradient(to bottom, #0b0d16, #141a2a 55%, color-mix(in srgb, var(--c) 20%, #1a2033));}
.bgx-lightning-storm::before {
  content: "";
  position: absolute;
  top: -1.5em;
  left: 0;
  right: -16em;
  height: 8em;
  background-size: 16em 8em;
  background-repeat: repeat-x;
  background-image:
    radial-gradient(3.6em 2.6em at 0 3.4em, var(--cloud) 55%, transparent),
    radial-gradient(3.6em 2.6em at 16em 3.4em, var(--cloud) 55%, transparent),
    radial-gradient(3.4em 2.9em at 5em 2.8em, var(--cloud) 55%, transparent),
    radial-gradient(3.2em 2.3em at 10.5em 3.6em, var(--cloud) 55%, transparent),
    linear-gradient(to bottom, var(--cloud) 2.2em, transparent 4.6em);
  animation: bgx-lightning-storm-roll 30s linear infinite;
}
.bgx-lightning-storm::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 90% 90% at 50% 0, color-mix(in srgb, var(--bolt) 70%, transparent), transparent 75%);
  opacity: 0;
  animation: bgx-lightning-storm-flash 5s linear infinite;
}
.bgx-lightning-storm span {
  position: absolute;
  top: 2.5em;
  left: var(--x);
  width: 5em;
  height: 72%;
  filter: drop-shadow(0 0 0.35em var(--bolt));
  opacity: 0;
  animation: bgx-lightning-storm-strike 5s linear var(--delay) infinite;
}
.bgx-lightning-storm span::before,
.bgx-lightning-storm span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(#fff, var(--bolt));
  clip-path: polygon(51% 0, 56% 0, 45% 22%, 62% 32%, 42% 57%, 58% 65%, 32% 100%, 30% 100%, 51% 68%, 35% 60%, 55% 35%, 38% 24%);
}
.bgx-lightning-storm span::after {
  clip-path: polygon(58% 33%, 60% 33%, 72% 46%, 66% 52%, 84% 72%, 83% 72%, 64% 53%, 70% 47%);
}
.bgx-lightning-storm span:nth-child(1) { --x: 55%; --delay: 0s; }
.bgx-lightning-storm span:nth-child(2) { --x: 14%; --delay: -2.5s; }
@keyframes bgx-lightning-storm-roll {
  to { transform: translateX(-16em); }
}
@keyframes bgx-lightning-storm-strike {
  0%, 5%   { opacity: 0; }
  6%       { opacity: 1; }
  8%       { opacity: 0.2; }
  10%      { opacity: 1; }
  15%      { opacity: 0; }
  100%     { opacity: 0; }
}
@keyframes bgx-lightning-storm-flash {
  0%, 5%, 55%  { opacity: 0; }
  6%, 56%      { opacity: 0.85; }
  8%, 58%      { opacity: 0.15; }
  10%, 60%     { opacity: 0.7; }
  16%, 66%     { opacity: 0; }
  100%         { opacity: 0; }
}

.bgx-falling-leaves {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--c) 8%, #fff8ee), color-mix(in srgb, var(--c) 6%, #fde4c8));}
.bgx-falling-leaves span {
  position: absolute;
  top: 0;
  left: var(--x);
  height: 100%;
  animation: bgx-falling-leaves-fall var(--dur) linear var(--delay) infinite;
}
.bgx-falling-leaves span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--s);
  height: var(--s);
  border-radius: 0 100%;
  background:
    linear-gradient(to top right, transparent calc(50% - 0.04em), rgb(0 0 0 / 0.2) 0 calc(50% + 0.04em), transparent 0),
    var(--k);
  transform-origin: 50% -3em;
  animation:
    bgx-falling-leaves-rock var(--rock) ease-in-out var(--delay) infinite alternate,
    bgx-falling-leaves-flip calc(var(--rock) * 1.3) ease-in-out var(--delay) infinite alternate;
}
.bgx-falling-leaves span:nth-child(4n + 1) { --k: color-mix(in oklab, var(--c) 18%, #e4572e); }
.bgx-falling-leaves span:nth-child(4n + 2) { --k: color-mix(in oklab, var(--c) 18%, #f4a340); }
.bgx-falling-leaves span:nth-child(4n + 3) { --k: color-mix(in oklab, var(--c) 18%, #b83b26); }
.bgx-falling-leaves span:nth-child(4n + 4) { --k: color-mix(in oklab, var(--c) 18%, #e3b448); }
.bgx-falling-leaves span:nth-child(1) { --x: 47.6%; --s: 1.45em; --dur: 10.42s; --delay: -4.43s; --rock: 1.39s; }
.bgx-falling-leaves span:nth-child(2) { --x: 59.9%; --s: 1.31em; --dur: 10.77s; --delay: -2.59s; --rock: 2.04s; }
.bgx-falling-leaves span:nth-child(3) { --x: 74%; --s: 1.1em; --dur: 9.38s; --delay: -2.81s; --rock: 2.09s; }
.bgx-falling-leaves span:nth-child(4) { --x: 77.6%; --s: 1.41em; --dur: 8s; --delay: -4.83s; --rock: 1.62s; }
.bgx-falling-leaves span:nth-child(5) { --x: 95.1%; --s: 1.28em; --dur: 8.18s; --delay: -9.24s; --rock: 1.34s; }
.bgx-falling-leaves span:nth-child(6) { --x: 15.8%; --s: 1.48em; --dur: 7.64s; --delay: -6.15s; --rock: 1.31s; }
.bgx-falling-leaves span:nth-child(7) { --x: 84.5%; --s: 1.13em; --dur: 7.86s; --delay: -7.95s; --rock: 1.44s; }
.bgx-falling-leaves span:nth-child(8) { --x: 91.6%; --s: 1.08em; --dur: 8.21s; --delay: -2.78s; --rock: 1.77s; }
.bgx-falling-leaves span:nth-child(9) { --x: 32.7%; --s: 1.15em; --dur: 8.34s; --delay: -1.31s; --rock: 1.78s; }
.bgx-falling-leaves span:nth-child(10) { --x: 19.8%; --s: 1.35em; --dur: 8.71s; --delay: -9.76s; --rock: 1.92s; }
.bgx-falling-leaves span:nth-child(11) { --x: 51.1%; --s: 1.08em; --dur: 10.47s; --delay: -4.52s; --rock: 1.92s; }
.bgx-falling-leaves span:nth-child(12) { --x: 28.9%; --s: 1.35em; --dur: 10.11s; --delay: -2.53s; --rock: 1.84s; }
.bgx-falling-leaves span:nth-child(13) { --x: 42.5%; --s: 1.47em; --dur: 7.28s; --delay: -5.77s; --rock: 1.8s; }
.bgx-falling-leaves span:nth-child(14) { --x: 9.4%; --s: 1.13em; --dur: 10.3s; --delay: -10.1s; --rock: 1.5s; }
.bgx-falling-leaves span:nth-child(15) { --x: 66.6%; --s: 1.26em; --dur: 10.3s; --delay: -9.56s; --rock: 1.42s; }
.bgx-falling-leaves span:nth-child(16) { --x: 1.8%; --s: 1.49em; --dur: 9.38s; --delay: -7.69s; --rock: 1.67s; }
@keyframes bgx-falling-leaves-fall {
  from { transform: translateY(-4em); }
  to   { transform: translateY(100%); }
}
@keyframes bgx-falling-leaves-rock {
  from { transform: rotate(-38deg); }
  to   { transform: rotate(38deg); }
}
@keyframes bgx-falling-leaves-flip {
  from { scale: 1 1; }
  to   { scale: 0.3 1; }
}

.bgx-cherry-blossom {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  --petal: color-mix(in oklab, var(--c) 15%, #ff9cc2);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--c) 14%, #fff), color-mix(in srgb, var(--petal) 24%, #fff));}
.bgx-cherry-blossom span {
  position: absolute;
  inset: 0;
  left: calc(var(--x) - 45%);
  animation: bgx-cherry-blossom-drift var(--dur) linear var(--delay) infinite;
}
.bgx-cherry-blossom span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--s);
  height: calc(var(--s) * 0.8);
  border-radius: 50% 0 50% 50%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--petal) 25%, #fff), var(--petal) 65%);
  animation:
    bgx-cherry-blossom-tumble var(--spin) linear infinite,
    bgx-cherry-blossom-gust calc(var(--spin) * 1.7) ease-in-out infinite alternate;
}
.bgx-cherry-blossom span:nth-child(1) { --x: 70.1%; --s: 1.21em; --dur: 9.7s; --delay: -4.65s; --spin: 2.01s; --ax: 0.36; }
.bgx-cherry-blossom span:nth-child(2) { --x: 5.7%; --s: 0.98em; --dur: 11.99s; --delay: -5.89s; --spin: 2.1s; --ax: 0.91; }
.bgx-cherry-blossom span:nth-child(3) { --x: 44.5%; --s: 1.17em; --dur: 8.93s; --delay: -9.51s; --spin: 2.97s; --ax: 0.83; }
.bgx-cherry-blossom span:nth-child(4) { --x: 93.8%; --s: 0.75em; --dur: 10.1s; --delay: -4.65s; --spin: 1.75s; --ax: 0.67; }
.bgx-cherry-blossom span:nth-child(5) { --x: 46.9%; --s: 1.05em; --dur: 7.31s; --delay: -5.4s; --spin: 2.46s; --ax: 0.57; }
.bgx-cherry-blossom span:nth-child(6) { --x: 85.4%; --s: 1.12em; --dur: 7.01s; --delay: -2.11s; --spin: 2.87s; --ax: 0.38; }
.bgx-cherry-blossom span:nth-child(7) { --x: 38%; --s: 0.87em; --dur: 8.01s; --delay: -0.82s; --spin: 2.62s; --ax: 0.71; }
.bgx-cherry-blossom span:nth-child(8) { --x: 50.9%; --s: 1.11em; --dur: 11.94s; --delay: -9.63s; --spin: 2.84s; --ax: 0.92; }
.bgx-cherry-blossom span:nth-child(9) { --x: 29.6%; --s: 1.12em; --dur: 9.1s; --delay: -6.57s; --spin: 2.19s; --ax: 0.98; }
.bgx-cherry-blossom span:nth-child(10) { --x: 66.2%; --s: 0.85em; --dur: 9.86s; --delay: -1.68s; --spin: 2.11s; --ax: 0.85; }
.bgx-cherry-blossom span:nth-child(11) { --x: 20.3%; --s: 1.29em; --dur: 11.01s; --delay: -11.16s; --spin: 1.62s; --ax: 0.85; }
.bgx-cherry-blossom span:nth-child(12) { --x: 14.6%; --s: 1.23em; --dur: 7.16s; --delay: -6.38s; --spin: 3.02s; --ax: 0.37; }
.bgx-cherry-blossom span:nth-child(13) { --x: 80.6%; --s: 0.95em; --dur: 8.71s; --delay: -5.19s; --spin: 1.95s; --ax: 0.72; }
.bgx-cherry-blossom span:nth-child(14) { --x: 33.3%; --s: 1.22em; --dur: 9.24s; --delay: -1.08s; --spin: 2.82s; --ax: 0.71; }
.bgx-cherry-blossom span:nth-child(15) { --x: 25%; --s: 0.97em; --dur: 8.48s; --delay: -1.76s; --spin: 1.79s; --ax: 0.86; }
.bgx-cherry-blossom span:nth-child(16) { --x: 57.8%; --s: 0.86em; --dur: 9.88s; --delay: -10.05s; --spin: 2.16s; --ax: 0.37; }
.bgx-cherry-blossom span:nth-child(17) { --x: 74.7%; --s: 0.97em; --dur: 10.69s; --delay: -10.06s; --spin: 3.07s; --ax: 0.83; }
.bgx-cherry-blossom span:nth-child(18) { --x: 90.2%; --s: 1.16em; --dur: 7.82s; --delay: -4.95s; --spin: 1.95s; --ax: 0.58; }
.bgx-cherry-blossom span:nth-child(19) { --x: 12%; --s: 1.1em; --dur: 10.33s; --delay: -8.81s; --spin: 1.63s; --ax: 0.89; }
.bgx-cherry-blossom span:nth-child(20) { --x: 60.8%; --s: 0.99em; --dur: 7.15s; --delay: -4.61s; --spin: 1.98s; --ax: 0.38; }
.bgx-cherry-blossom span:nth-child(21) { --x: 98.7%; --s: 1.08em; --dur: 7.93s; --delay: -9.71s; --spin: 2.56s; --ax: 0.72; }
.bgx-cherry-blossom span:nth-child(22) { --x: 3.2%; --s: 0.91em; --dur: 10.09s; --delay: -5.66s; --spin: 1.98s; --ax: 0.74; }
@keyframes bgx-cherry-blossom-drift {
  from { transform: translate(-2em, -2em); }
  to   { transform: translate(60%, 100%); }
}
@keyframes bgx-cherry-blossom-tumble {
  from { transform: rotate3d(1, var(--ax), 0.4, 0deg); }
  to   { transform: rotate3d(1, var(--ax), 0.4, 360deg); }
}
@keyframes bgx-cherry-blossom-gust {
  from { translate: 0 -0.8em; }
  to   { translate: 0 0.8em; }
}

.bgx-floating-hearts {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  --heart: color-mix(in oklab, var(--c) 25%, #ff4f8b);
  background: linear-gradient(to top, color-mix(in srgb, var(--heart) 20%, #fff), color-mix(in srgb, var(--c) 4%, #fff));}
.bgx-floating-hearts span {
  position: absolute;
  top: 0;
  left: var(--x);
  height: 100%;
  animation: bgx-floating-hearts-rise var(--dur) linear var(--delay) infinite;
}
.bgx-floating-hearts span::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--s);
  height: var(--s);
  background:
    radial-gradient(circle at 60% 65%, var(--k) 64%, transparent 65%) top left / 51% 51%,
    radial-gradient(circle at 40% 65%, var(--k) 64%, transparent 65%) top right / 51% 51%,
    linear-gradient(to bottom left, var(--k) 43%, transparent 43%) bottom left / 51% 51%,
    linear-gradient(to bottom right, var(--k) 43%, transparent 43%) bottom right / 51% 51%;
  background-repeat: no-repeat;
  opacity: 0;
  animation:
    bgx-floating-hearts-sway var(--sway) ease-in-out var(--delay) infinite alternate,
    bgx-floating-hearts-beat 1.6s ease-in-out var(--delay) infinite,
    bgx-floating-hearts-fade var(--dur) linear var(--delay) infinite;
}
.bgx-floating-hearts span:nth-child(3n + 1) { --k: var(--heart); }
.bgx-floating-hearts span:nth-child(3n + 2) { --k: color-mix(in srgb, var(--heart) 55%, #fff); }
.bgx-floating-hearts span:nth-child(3n) { --k: color-mix(in oklab, var(--heart), var(--c) 45%); }
.bgx-floating-hearts span:nth-child(1) { --x: 40.8%; --s: 1.86em; --dur: 6.34s; --delay: -9.06s; --sway: 1.74s; }
.bgx-floating-hearts span:nth-child(2) { --x: 70.3%; --s: 0.94em; --dur: 8.45s; --delay: -1.48s; --sway: 1.97s; }
.bgx-floating-hearts span:nth-child(3) { --x: 10.7%; --s: 1.91em; --dur: 6.85s; --delay: -7.36s; --sway: 1.63s; }
.bgx-floating-hearts span:nth-child(4) { --x: 91.5%; --s: 1.47em; --dur: 6.5s; --delay: -8.63s; --sway: 2.17s; }
.bgx-floating-hearts span:nth-child(5) { --x: 86.4%; --s: 1.33em; --dur: 9.95s; --delay: -5.71s; --sway: 1.61s; }
.bgx-floating-hearts span:nth-child(6) { --x: 36.3%; --s: 1.13em; --dur: 9.36s; --delay: -1.59s; --sway: 2.27s; }
.bgx-floating-hearts span:nth-child(7) { --x: 16.5%; --s: 1.01em; --dur: 9.02s; --delay: -9.04s; --sway: 1.92s; }
.bgx-floating-hearts span:nth-child(8) { --x: 97.8%; --s: 1.36em; --dur: 7.75s; --delay: -5s; --sway: 2.03s; }
.bgx-floating-hearts span:nth-child(9) { --x: 51.5%; --s: 1.82em; --dur: 7.06s; --delay: -3.95s; --sway: 2.1s; }
.bgx-floating-hearts span:nth-child(10) { --x: 45.4%; --s: 1.67em; --dur: 9.66s; --delay: -4.58s; --sway: 2.06s; }
.bgx-floating-hearts span:nth-child(11) { --x: 79.7%; --s: 0.95em; --dur: 8.35s; --delay: -8.44s; --sway: 2.78s; }
.bgx-floating-hearts span:nth-child(12) { --x: 29%; --s: 0.92em; --dur: 6.36s; --delay: -6.45s; --sway: 2.27s; }
.bgx-floating-hearts span:nth-child(13) { --x: 23.5%; --s: 0.81em; --dur: 8.29s; --delay: -3.7s; --sway: 2.47s; }
.bgx-floating-hearts span:nth-child(14) { --x: 64.9%; --s: 1.97em; --dur: 7.2s; --delay: -5.71s; --sway: 1.95s; }
.bgx-floating-hearts span:nth-child(15) { --x: 59.8%; --s: 1.42em; --dur: 8.35s; --delay: -8.53s; --sway: 2.56s; }
.bgx-floating-hearts span:nth-child(16) { --x: 1.8%; --s: 0.82em; --dur: 6.5s; --delay: -0.97s; --sway: 1.83s; }
@keyframes bgx-floating-hearts-rise {
  from { transform: translateY(var(--s)); }
  to   { transform: translateY(-100%); }
}
@keyframes bgx-floating-hearts-sway {
  from { translate: -0.8em 0; rotate: -12deg; }
  to   { translate: 0.8em 0; rotate: 12deg; }
}
@keyframes bgx-floating-hearts-beat {
  0%, 30%, 100% { transform: scale(1); }
  12%           { transform: scale(1.16); }
  22%           { transform: scale(1.06); }
}
@keyframes bgx-floating-hearts-fade {
  0%   { opacity: 0; }
  10%  { opacity: 0.9; }
  65%  { opacity: 0.9; }
  90%  { opacity: 0; }
  100% { opacity: 0; }
}

.bgx-floating-balloons {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--c) 30%, #fff), color-mix(in srgb, var(--c) 7%, #fff));}
.bgx-floating-balloons span {
  position: absolute;
  top: 0;
  left: var(--x);
  width: 2em;
  height: 100%;
  font-size: calc(var(--z) * 1em);
  transform-origin: 50% 100%;
  animation:
    bgx-floating-balloons-rise var(--dur) linear var(--delay) infinite,
    bgx-floating-balloons-tilt var(--sway) ease-in-out var(--delay) infinite alternate;
}
.bgx-floating-balloons span::before {
  content: "";
  position: absolute;
  bottom: 3em;
  left: 0;
  width: 2em;
  height: 2.5em;
  border-radius: 50% 50% 50% 50% / 42% 42% 58% 58%;
  background:
    radial-gradient(circle at 34% 28%, rgb(255 255 255 / 0.75) 0 7%, transparent 22%),
    radial-gradient(circle at 40% 35%, transparent 45%, rgb(0 0 0 / 0.14)),
    var(--k);
}
.bgx-floating-balloons span::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0.82em;
  width: 0.36em;
  height: 3.1em;
  background:
    linear-gradient(var(--k), var(--k)) top / 0.3em 0.22em no-repeat,
    linear-gradient(to right, transparent calc(50% - 0.03em), color-mix(in srgb, var(--c) 30%, rgb(0 0 0 / 0.35)) 0 calc(50% + 0.03em), transparent 0);
}
.bgx-floating-balloons span:nth-child(5n + 1) { --k: var(--c); }
.bgx-floating-balloons span:nth-child(5n + 2) { --k: oklch(from var(--c) 0.7 0.2 calc(h + 150)); }
.bgx-floating-balloons span:nth-child(5n + 3) { --k: oklch(from var(--c) 0.84 0.15 calc(h - 160)); }
.bgx-floating-balloons span:nth-child(5n + 4) { --k: oklch(from var(--c) 0.66 0.2 calc(h + 80)); }
.bgx-floating-balloons span:nth-child(5n + 5) { --k: oklch(from var(--c) 0.82 0.13 calc(h - 70)); }
.bgx-floating-balloons span:nth-child(1) { --x: 36%; --z: 0.97; --dur: 13.43s; --delay: -7.02s; --sway: 3.07s; }
.bgx-floating-balloons span:nth-child(2) { --x: 11.7%; --z: 1.02; --dur: 11.74s; --delay: -2.28s; --sway: 3.11s; }
.bgx-floating-balloons span:nth-child(3) { --x: 57%; --z: 0.72; --dur: 16.51s; --delay: -7.03s; --sway: 2.68s; }
.bgx-floating-balloons span:nth-child(4) { --x: 96.9%; --z: 0.59; --dur: 17.65s; --delay: -10.52s; --sway: 3.34s; }
.bgx-floating-balloons span:nth-child(5) { --x: 71.7%; --z: 0.99; --dur: 10.85s; --delay: -10.49s; --sway: 2.51s; }
.bgx-floating-balloons span:nth-child(6) { --x: 47.4%; --z: 0.68; --dur: 16.35s; --delay: -7.72s; --sway: 2.72s; }
.bgx-floating-balloons span:nth-child(7) { --x: 66.1%; --z: 0.78; --dur: 13.13s; --delay: -0.95s; --sway: 3.04s; }
.bgx-floating-balloons span:nth-child(8) { --x: 22%; --z: 0.78; --dur: 14.31s; --delay: -8.44s; --sway: 2.95s; }
.bgx-floating-balloons span:nth-child(9) { --x: 85.9%; --z: 0.76; --dur: 13.81s; --delay: -11.4s; --sway: 2.37s; }
.bgx-floating-balloons span:nth-child(10) { --x: 8.2%; --z: 0.98; --dur: 12.57s; --delay: -3.38s; --sway: 2.73s; }
@keyframes bgx-floating-balloons-rise {
  from { transform: translateY(5.6em); }
  to   { transform: translateY(-100%); }
}
@keyframes bgx-floating-balloons-tilt {
  from { rotate: -7deg; translate: -0.5em 0; }
  to   { rotate: 7deg; translate: 0.5em 0; }
}

.bgx-floating-lanterns {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  --warm: color-mix(in oklab, var(--c) 15%, #ffa53d);
  background:
    radial-gradient(ellipse 120% 55% at 50% 112%, color-mix(in srgb, var(--warm) 40%, #3a1a3a), transparent 75%),
    linear-gradient(to bottom, #070916, color-mix(in srgb, var(--c) 30%, #1b1638) 70%, #2b1a36);}
.bgx-floating-lanterns span {
  position: absolute;
  top: 0;
  left: var(--x);
  width: 1em;
  height: 100%;
  font-size: calc(var(--z) * 1em);
  opacity: var(--o);
  transform-origin: 50% 100%;
  animation:
    bgx-floating-lanterns-rise var(--dur) linear var(--delay) infinite,
    bgx-floating-lanterns-drift var(--sway) ease-in-out var(--delay) infinite alternate;
}
.bgx-floating-lanterns span::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1em;
  height: 1.3em;
  border-radius: 0.3em 0.3em 0.18em 0.18em / 0.4em 0.4em 0.18em 0.18em;
  background:
    radial-gradient(ellipse 60% 40% at 50% 88%, #fff6d8, transparent),
    linear-gradient(to top, color-mix(in srgb, var(--warm), #fff 30%), var(--warm) 45%, color-mix(in srgb, var(--warm), #6b1d00 45%));
  box-shadow: 0 0 1.4em 0.3em color-mix(in srgb, var(--warm) 45%, transparent);
  animation: bgx-floating-lanterns-flicker var(--fl) ease-in-out infinite alternate;
}
.bgx-floating-lanterns span:nth-child(1) { --x: 23.1%; --z: 1.01; --o: 0.88; --dur: 16.29s; --delay: -14.23s; --sway: 2.91s; --fl: 0.57s; }
.bgx-floating-lanterns span:nth-child(2) { --x: 18.3%; --z: 0.72; --o: 0.77; --dur: 19.86s; --delay: -12.54s; --sway: 3.64s; --fl: 0.86s; }
.bgx-floating-lanterns span:nth-child(3) { --x: 38.7%; --z: 1.25; --o: 0.98; --dur: 14.99s; --delay: -19.53s; --sway: 3.3s; --fl: 0.76s; }
.bgx-floating-lanterns span:nth-child(4) { --x: 59.8%; --z: 1.21; --o: 0.96; --dur: 16.71s; --delay: -14.78s; --sway: 2.75s; --fl: 0.58s; }
.bgx-floating-lanterns span:nth-child(5) { --x: 75.6%; --z: 0.77; --o: 0.79; --dur: 18.54s; --delay: -8.41s; --sway: 4.17s; --fl: 0.77s; }
.bgx-floating-lanterns span:nth-child(6) { --x: 97.6%; --z: 1.21; --o: 0.96; --dur: 14.27s; --delay: -1.52s; --sway: 2.84s; --fl: 0.85s; }
.bgx-floating-lanterns span:nth-child(7) { --x: 91.1%; --z: 0.95; --o: 0.86; --dur: 20.1s; --delay: -14.69s; --sway: 3.5s; --fl: 0.53s; }
.bgx-floating-lanterns span:nth-child(8) { --x: 47.9%; --z: 0.92; --o: 0.85; --dur: 16.61s; --delay: -8.76s; --sway: 3.89s; --fl: 0.43s; }
.bgx-floating-lanterns span:nth-child(9) { --x: 69.5%; --z: 0.68; --o: 0.76; --dur: 21.35s; --delay: -1.9s; --sway: 3.87s; --fl: 0.89s; }
.bgx-floating-lanterns span:nth-child(10) { --x: 11.1%; --z: 1.04; --o: 0.9; --dur: 17.55s; --delay: -15.56s; --sway: 3.51s; --fl: 0.49s; }
.bgx-floating-lanterns span:nth-child(11) { --x: 83.4%; --z: 0.63; --o: 0.74; --dur: 20.37s; --delay: -15.56s; --sway: 3.75s; --fl: 0.46s; }
.bgx-floating-lanterns span:nth-child(12) { --x: 33%; --z: 0.92; --o: 0.85; --dur: 19.49s; --delay: -14.28s; --sway: 3.83s; --fl: 0.6s; }
.bgx-floating-lanterns span:nth-child(13) { --x: 53.4%; --z: 1.06; --o: 0.9; --dur: 17.06s; --delay: -18.51s; --sway: 3.1s; --fl: 0.56s; }
.bgx-floating-lanterns span:nth-child(14) { --x: 4.8%; --z: 1.17; --o: 0.94; --dur: 15.12s; --delay: -4.32s; --sway: 4.15s; --fl: 0.77s; }
@keyframes bgx-floating-lanterns-rise {
  from { transform: translateY(2.5em); }
  to   { transform: translateY(-100%); }
}
@keyframes bgx-floating-lanterns-drift {
  from { translate: -0.6em 0; rotate: -5deg; }
  to   { translate: 0.6em 0; rotate: 5deg; }
}
@keyframes bgx-floating-lanterns-flicker {
  from { opacity: 0.78; }
  to   { opacity: 1; }
}

.bgx-orbiting-planets {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--c) 26%, #0b1030), #04050c 70%);}
.bgx-orbiting-planets::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: 10em 10em;
  background-image:
    radial-gradient(circle 0.07em at 4.2% 39.2%, rgb(255 255 255 / 0.5) 50%, transparent),
    radial-gradient(circle 0.07em at 93.3% 78.1%, rgb(255 255 255 / 0.5) 50%, transparent),
    radial-gradient(circle 0.07em at 55.5% 24.3%, rgb(255 255 255 / 0.5) 50%, transparent),
    radial-gradient(circle 0.07em at 44.7% 41.9%, rgb(255 255 255 / 0.5) 50%, transparent),
    radial-gradient(circle 0.07em at 54% 91.5%, rgb(255 255 255 / 0.5) 50%, transparent),
    radial-gradient(circle 0.07em at 71.6% 46.4%, rgb(255 255 255 / 0.5) 50%, transparent),
    radial-gradient(circle 0.07em at 13.8% 60.5%, rgb(255 255 255 / 0.5) 50%, transparent),
    radial-gradient(circle 0.07em at 42% 60.9%, rgb(255 255 255 / 0.5) 50%, transparent),
    radial-gradient(circle 0.07em at 7.9% 37.4%, rgb(255 255 255 / 0.5) 50%, transparent),
    radial-gradient(circle 0.07em at 69.2% 51.9%, rgb(255 255 255 / 0.5) 50%, transparent);
}
.bgx-orbiting-planets::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.6em;
  height: 2.6em;
  margin: -1.3em;
  border-radius: 50%;
  background: radial-gradient(closest-side, #fff, #ffd98a 40%, #ff9d3b 75%, transparent);
  box-shadow: 0 0 2em 0.6em rgb(255 170 60 / 0.35);
}
.bgx-orbiting-planets span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--d);
  height: var(--d);
  margin: calc(var(--d) / -2);
  border: 0.06em solid color-mix(in srgb, var(--c) 28%, transparent);
  border-radius: 50%;
  animation: bgx-orbiting-planets-spin var(--dur) linear var(--delay) infinite;
}
.bgx-orbiting-planets span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--p);
  height: var(--p);
  margin: calc(var(--p) / -2);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 95%, color-mix(in srgb, var(--k), #fff 55%), var(--k) 50%, color-mix(in srgb, var(--k), #000 55%));
}
.bgx-orbiting-planets span:nth-child(1) { --d: 5em; --p: 0.4em; --k: #b8bcc8; --dur: 5s; --delay: -1.2s; }
.bgx-orbiting-planets span:nth-child(2) { --d: 8em; --p: 0.62em; --k: #f2c46d; --dur: 9s; --delay: -5s; }
.bgx-orbiting-planets span:nth-child(3) { --d: 11.5em; --p: 0.7em; --k: var(--c); --dur: 14s; --delay: -11s; }
.bgx-orbiting-planets span:nth-child(4) { --d: 16em; --p: 0.5em; --k: #e2674a; --dur: 20s; --delay: -6s; }
.bgx-orbiting-planets span:nth-child(5) { --d: 23em; --p: 1.1em; --k: #e8cf9a; --dur: 34s; --delay: -24s; }
.bgx-orbiting-planets span:nth-child(5)::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 2.4em;
  height: 0.7em;
  border: 0.1em solid color-mix(in srgb, var(--k) 75%, #fff);
  border-radius: 50%;
  translate: -50% -50%;
  rotate: -22deg;
}
@keyframes bgx-orbiting-planets-spin {
  to { transform: rotate(360deg); }
}

.bgx-rain-on-window {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle 3.5em at 14% 72%, color-mix(in srgb, var(--c) 55%, transparent), transparent),
    radial-gradient(circle 2.5em at 36% 58%, rgb(255 180 90 / 0.45), transparent),
    radial-gradient(circle 4em at 62% 80%, color-mix(in srgb, var(--c) 40%, transparent), transparent),
    radial-gradient(circle 2.2em at 80% 52%, rgb(255 110 120 / 0.4), transparent),
    radial-gradient(circle 3em at 93% 84%, rgb(255 200 120 / 0.35), transparent),
    radial-gradient(circle 2em at 48% 90%, rgb(255 230 180 / 0.3), transparent),
    linear-gradient(to bottom, #0b1020, color-mix(in srgb, var(--c) 22%, #121a2e));}
.bgx-rain-on-window::before,
.bgx-rain-on-window::after {
  content: "";
  position: absolute;
  inset: 0;
}
.bgx-rain-on-window::before {
  background-size: 9em 9em;
  background-image:
    radial-gradient(circle 0.2em at 4.2% 87.6%, rgb(220 232 255 / 0.3) 0 20%, rgb(180 200 240 / 0.1) 50%, rgb(0 0 0 / 0.32) 78%, transparent),
    radial-gradient(circle 0.2em at 95.4% 62.9%, rgb(220 232 255 / 0.3) 0 20%, rgb(180 200 240 / 0.1) 50%, rgb(0 0 0 / 0.32) 78%, transparent),
    radial-gradient(circle 0.2em at 67.5% 12.9%, rgb(220 232 255 / 0.3) 0 20%, rgb(180 200 240 / 0.1) 50%, rgb(0 0 0 / 0.32) 78%, transparent),
    radial-gradient(circle 0.2em at 62% 15.7%, rgb(220 232 255 / 0.3) 0 20%, rgb(180 200 240 / 0.1) 50%, rgb(0 0 0 / 0.32) 78%, transparent),
    radial-gradient(circle 0.2em at 28% 67.4%, rgb(220 232 255 / 0.3) 0 20%, rgb(180 200 240 / 0.1) 50%, rgb(0 0 0 / 0.32) 78%, transparent),
    radial-gradient(circle 0.2em at 28.8% 53.5%, rgb(220 232 255 / 0.3) 0 20%, rgb(180 200 240 / 0.1) 50%, rgb(0 0 0 / 0.32) 78%, transparent),
    radial-gradient(circle 0.2em at 43.6% 73.2%, rgb(220 232 255 / 0.3) 0 20%, rgb(180 200 240 / 0.1) 50%, rgb(0 0 0 / 0.32) 78%, transparent),
    radial-gradient(circle 0.2em at 61.6% 71.8%, rgb(220 232 255 / 0.3) 0 20%, rgb(180 200 240 / 0.1) 50%, rgb(0 0 0 / 0.32) 78%, transparent),
    radial-gradient(circle 0.2em at 70.9% 40.3%, rgb(220 232 255 / 0.3) 0 20%, rgb(180 200 240 / 0.1) 50%, rgb(0 0 0 / 0.32) 78%, transparent),
    radial-gradient(circle 0.2em at 26.3% 76.5%, rgb(220 232 255 / 0.3) 0 20%, rgb(180 200 240 / 0.1) 50%, rgb(0 0 0 / 0.32) 78%, transparent),
    radial-gradient(circle 0.2em at 81.1% 57.9%, rgb(220 232 255 / 0.3) 0 20%, rgb(180 200 240 / 0.1) 50%, rgb(0 0 0 / 0.32) 78%, transparent),
    radial-gradient(circle 0.2em at 19.8% 37.6%, rgb(220 232 255 / 0.3) 0 20%, rgb(180 200 240 / 0.1) 50%, rgb(0 0 0 / 0.32) 78%, transparent),
    radial-gradient(circle 0.2em at 18.5% 84.5%, rgb(220 232 255 / 0.3) 0 20%, rgb(180 200 240 / 0.1) 50%, rgb(0 0 0 / 0.32) 78%, transparent),
    radial-gradient(circle 0.2em at 59.3% 37.9%, rgb(220 232 255 / 0.3) 0 20%, rgb(180 200 240 / 0.1) 50%, rgb(0 0 0 / 0.32) 78%, transparent),
    radial-gradient(circle 0.2em at 38.6% 10.5%, rgb(220 232 255 / 0.3) 0 20%, rgb(180 200 240 / 0.1) 50%, rgb(0 0 0 / 0.32) 78%, transparent),
    radial-gradient(circle 0.2em at 14.1% 8%, rgb(220 232 255 / 0.3) 0 20%, rgb(180 200 240 / 0.1) 50%, rgb(0 0 0 / 0.32) 78%, transparent);
}
.bgx-rain-on-window::after {
  background-size: 14.5em 13em;
  background-image:
    radial-gradient(circle 0.38em at 4.2% 19.8%, rgb(220 232 255 / 0.32) 0 18%, rgb(180 200 240 / 0.1) 50%, rgb(0 0 0 / 0.36) 80%, transparent),
    radial-gradient(circle 0.38em at 50.4% 55.3%, rgb(220 232 255 / 0.32) 0 18%, rgb(180 200 240 / 0.1) 50%, rgb(0 0 0 / 0.36) 80%, transparent),
    radial-gradient(circle 0.38em at 73.6% 53.1%, rgb(220 232 255 / 0.32) 0 18%, rgb(180 200 240 / 0.1) 50%, rgb(0 0 0 / 0.36) 80%, transparent),
    radial-gradient(circle 0.38em at 70.7% 48.6%, rgb(220 232 255 / 0.32) 0 18%, rgb(180 200 240 / 0.1) 50%, rgb(0 0 0 / 0.36) 80%, transparent),
    radial-gradient(circle 0.38em at 61% 55.4%, rgb(220 232 255 / 0.32) 0 18%, rgb(180 200 240 / 0.1) 50%, rgb(0 0 0 / 0.36) 80%, transparent),
    radial-gradient(circle 0.38em at 7.3% 57.1%, rgb(220 232 255 / 0.32) 0 18%, rgb(180 200 240 / 0.1) 50%, rgb(0 0 0 / 0.36) 80%, transparent),
    radial-gradient(circle 0.38em at 12.5% 79.5%, rgb(220 232 255 / 0.32) 0 18%, rgb(180 200 240 / 0.1) 50%, rgb(0 0 0 / 0.36) 80%, transparent),
    radial-gradient(circle 0.38em at 71.5% 77.2%, rgb(220 232 255 / 0.32) 0 18%, rgb(180 200 240 / 0.1) 50%, rgb(0 0 0 / 0.36) 80%, transparent),
    radial-gradient(circle 0.38em at 10.4% 41.7%, rgb(220 232 255 / 0.32) 0 18%, rgb(180 200 240 / 0.1) 50%, rgb(0 0 0 / 0.36) 80%, transparent);
}
.bgx-rain-on-window span {
  position: absolute;
  top: 0;
  left: var(--x);
  width: var(--s);
  height: 100%;
  animation: bgx-rain-on-window-slide var(--dur) cubic-bezier(0.6, 0, 0.8, 0.9) var(--delay) infinite;
}
.bgx-rain-on-window span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--s);
  height: calc(var(--s) * 1.2);
  border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  background:
    radial-gradient(circle at 38% 66%, rgb(255 255 255 / 0.9) 0 10%, transparent 20%),
    radial-gradient(circle at 50% 60%, rgb(210 225 255 / 0.2) 35%, rgb(0 0 0 / 0.4) 80%);
  box-shadow: inset 0 -0.06em 0.1em rgb(255 255 255 / 0.35);
}
.bgx-rain-on-window span::after {
  content: "";
  position: absolute;
  top: -2.6em;
  left: 50%;
  width: calc(var(--s) * 0.3);
  height: 2.8em;
  translate: -50% 0;
  border-radius: 999em;
  background: linear-gradient(to bottom, transparent, rgb(210 225 255 / 0.1));
}
.bgx-rain-on-window span:nth-child(1) { --x: 54.1%; --s: 0.83em; --dur: 7.35s; --delay: -2.98s; }
.bgx-rain-on-window span:nth-child(2) { --x: 93.6%; --s: 1.01em; --dur: 7.66s; --delay: -9.59s; }
.bgx-rain-on-window span:nth-child(3) { --x: 83%; --s: 1.12em; --dur: 9.02s; --delay: -4.4s; }
.bgx-rain-on-window span:nth-child(4) { --x: 21.9%; --s: 0.83em; --dur: 7.37s; --delay: -7.07s; }
.bgx-rain-on-window span:nth-child(5) { --x: 37.8%; --s: 1.13em; --dur: 6.94s; --delay: -0.36s; }
.bgx-rain-on-window span:nth-child(6) { --x: 60.8%; --s: 0.87em; --dur: 9.49s; --delay: -2.77s; }
.bgx-rain-on-window span:nth-child(7) { --x: 7.9%; --s: 1em; --dur: 6.79s; --delay: -0.46s; }
@keyframes bgx-rain-on-window-slide {
  0%   { transform: translateY(-1.5em); }
  16%  { transform: translateY(14%); }
  30%  { transform: translateY(16%); }
  42%  { transform: translateY(40%); }
  58%  { transform: translateY(42%); }
  72%  { transform: translateY(70%); }
  84%  { transform: translateY(72%); }
  100% { transform: translateY(calc(100% + 3em)); }
}

.bgx-fog {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  --mist: color-mix(in srgb, var(--c) 14%, #dfe6f0);
  --pine: color-mix(in srgb, var(--c) 10%, #05080d);
  background:
    conic-gradient(from 168deg at 50% 0, var(--pine) 24deg, transparent 0) 0 100% / 1.5em 3.2em repeat-x,
    conic-gradient(from 166deg at 50% 0, color-mix(in srgb, var(--pine), #3a4760 25%) 28deg, transparent 0) 0.6em 100% / 2.2em 4.6em repeat-x,
    conic-gradient(from 165deg at 50% 0, color-mix(in srgb, var(--pine), #3a4760 45%) 30deg, transparent 0) 1.3em 100% / 3.1em 6.2em repeat-x,
    linear-gradient(to bottom, #0b1020, color-mix(in srgb, var(--c) 24%, #283248));}
.bgx-fog span {
  position: absolute;
  left: 0;
  right: calc(var(--tile) * -1);
  bottom: var(--b);
  height: var(--h);
  background-size: var(--tile) 100%;
  background-repeat: repeat-x;
  animation:
    bgx-fog-drift var(--dur) linear infinite var(--dir),
    bgx-fog-breathe var(--br) ease-in-out infinite alternate;
}
.bgx-fog span:nth-child(1) {
  --tile: 30em;
  --h: 9em;
  --b: 18%;
  --dur: 50s;
  --dir: reverse;
  --br: 5s;
  background-image:
    radial-gradient(8em 40% at 5em 50%, color-mix(in srgb, var(--mist) 26%, transparent), transparent),
    radial-gradient(8em 40% at 35em 50%, color-mix(in srgb, var(--mist) 26%, transparent), transparent),
    radial-gradient(9em 36% at 16em 40%, color-mix(in srgb, var(--mist) 26%, transparent), transparent),
    radial-gradient(7em 42% at 25em 58%, color-mix(in srgb, var(--mist) 26%, transparent), transparent),
    radial-gradient(7em 42% at -5em 58%, color-mix(in srgb, var(--mist) 26%, transparent), transparent);
}
.bgx-fog span:nth-child(2) {
  --tile: 24em;
  --h: 8em;
  --b: -1em;
  --dur: 30s;
  --dir: normal;
  --br: 4s;
  background-image:
    radial-gradient(5em 38% at 3em 55%, color-mix(in srgb, var(--mist) 42%, transparent), transparent),
    radial-gradient(5em 38% at 27em 55%, color-mix(in srgb, var(--mist) 42%, transparent), transparent),
    radial-gradient(6em 36% at 12em 45%, color-mix(in srgb, var(--mist) 42%, transparent), transparent),
    radial-gradient(4.5em 36% at 20em 60%, color-mix(in srgb, var(--mist) 42%, transparent), transparent),
    radial-gradient(4.5em 36% at -4em 60%, color-mix(in srgb, var(--mist) 42%, transparent), transparent);
}
.bgx-fog span:nth-child(3) {
  --tile: 36em;
  --h: 7em;
  --b: -2.5em;
  --dur: 22s;
  --dir: reverse;
  --br: 6s;
  background-image:
    radial-gradient(7em 42% at 6em 50%, color-mix(in srgb, var(--mist) 52%, transparent), transparent),
    radial-gradient(7em 42% at 42em 50%, color-mix(in srgb, var(--mist) 52%, transparent), transparent),
    radial-gradient(6em 38% at 19em 55%, color-mix(in srgb, var(--mist) 52%, transparent), transparent),
    radial-gradient(7em 42% at 30em 45%, color-mix(in srgb, var(--mist) 52%, transparent), transparent),
    radial-gradient(7em 42% at -6em 45%, color-mix(in srgb, var(--mist) 52%, transparent), transparent);
}
@keyframes bgx-fog-drift {
  to { transform: translateX(calc(var(--tile) * -1)); }
}
@keyframes bgx-fog-breathe {
  from { opacity: 0.55; }
  to   { opacity: 1; }
}

.bgx-black-hole {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--c) 24%, #0a0c1c), #020207 62%);}
.bgx-black-hole::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: 11em 11em;
  background-image:
    radial-gradient(circle 0.07em at 4.2% 53.6%, rgb(255 255 255 / 0.5) 50%, transparent),
    radial-gradient(circle 0.07em at 13.7% 78.8%, rgb(255 255 255 / 0.5) 50%, transparent),
    radial-gradient(circle 0.07em at 35.8% 47.7%, rgb(255 255 255 / 0.5) 50%, transparent),
    radial-gradient(circle 0.07em at 56.6% 68.8%, rgb(255 255 255 / 0.5) 50%, transparent),
    radial-gradient(circle 0.07em at 81.9% 39.3%, rgb(255 255 255 / 0.5) 50%, transparent),
    radial-gradient(circle 0.07em at 90.4% 89.3%, rgb(255 255 255 / 0.5) 50%, transparent),
    radial-gradient(circle 0.07em at 8.6% 44.8%, rgb(255 255 255 / 0.5) 50%, transparent),
    radial-gradient(circle 0.07em at 68% 34.4%, rgb(255 255 255 / 0.5) 50%, transparent),
    radial-gradient(circle 0.07em at 17.8% 54.4%, rgb(255 255 255 / 0.5) 50%, transparent),
    radial-gradient(circle 0.07em at 87.8% 15.5%, rgb(255 255 255 / 0.5) 50%, transparent);
}
.bgx-black-hole-disk {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26em;
  height: 26em;
  margin: -13em;
  transform: rotate(-9deg) scaleY(0.2);
}
.bgx-black-hole-disk:last-child {
  clip-path: inset(50% 0 0);
}
.bgx-black-hole-disk span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(color-mix(in srgb, var(--c) 45%, #fff), color-mix(in srgb, var(--c) 70%, transparent) 25%, #fff 42%, color-mix(in srgb, var(--c) 60%, transparent) 62%, color-mix(in srgb, var(--c) 35%, #fff) 82%, color-mix(in srgb, var(--c) 45%, #fff));
  mask: radial-gradient(closest-side, transparent 30%, #000 36%, rgb(0 0 0 / 0.55) 60%, transparent);
  animation: bgx-black-hole-spin 6s linear infinite;
}
.bgx-black-hole i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6em;
  height: 6em;
  margin: -3em;
  border-radius: 50%;
  background: #000;
  box-shadow:
    0 0 0 0.1em color-mix(in srgb, var(--c) 35%, #fff),
    0 0 1.2em 0.35em color-mix(in srgb, var(--c) 60%, transparent),
    0 0 4em 1.4em color-mix(in srgb, var(--c) 22%, transparent);
}
.bgx-black-hole i::before {
  content: "";
  position: absolute;
  inset: -1.1em;
  border-radius: 50%;
  background: radial-gradient(closest-side, transparent 72%, color-mix(in srgb, var(--c) 45%, #fff) 80%, color-mix(in srgb, var(--c) 40%, transparent) 88%, transparent);
  animation: bgx-black-hole-halo 3s ease-in-out infinite alternate;
}
@keyframes bgx-black-hole-spin {
  to { transform: rotate(360deg); }
}
@keyframes bgx-black-hole-halo {
  from { opacity: 0.55; transform: scale(0.98); }
  to   { opacity: 1; transform: scale(1.03); }
}

.bgx-star-trails {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 22% at 20% 104%, #020308 96%, transparent),
    radial-gradient(ellipse 60% 18% at 88% 104%, #03040a 96%, transparent),
    linear-gradient(to bottom, #03040b, #0a0f22 55%, color-mix(in srgb, var(--c) 34%, #151c3c));}
.bgx-star-trails-sky {
  position: absolute;
  top: 24%;
  left: 55%;
  animation: bgx-star-trails-turn 100s linear infinite;
}
.bgx-star-trails-sky::before {
  content: "";
  position: absolute;
  width: 0.24em;
  height: 0.24em;
  margin: -0.12em;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0.5em 0.1em color-mix(in srgb, var(--c) 50%, #fff);
}
.bgx-star-trails-sky span {
  position: absolute;
  width: var(--d);
  height: var(--d);
  margin: calc(var(--d) / -2);
  border: var(--w) solid transparent;
  border-top-color: var(--k);
  border-radius: 50%;
  rotate: var(--a);
}
.bgx-star-trails-sky span:nth-child(3n) { border-right-color: var(--k); }
.bgx-star-trails-sky span:nth-child(1) { --d: 2em; --w: 0.09em; --a: 195deg; --k: color-mix(in srgb, var(--c) 59%, transparent); }
.bgx-star-trails-sky span:nth-child(2) { --d: 4.91em; --w: 0.11em; --a: 357deg; --k: rgb(255 255 255 / 0.55); }
.bgx-star-trails-sky span:nth-child(3) { --d: 6.21em; --w: 0.1em; --a: 6deg; --k: color-mix(in srgb, var(--c) 41%, transparent); }
.bgx-star-trails-sky span:nth-child(4) { --d: 8.49em; --w: 0.06em; --a: 189deg; --k: color-mix(in srgb, var(--c) 58%, transparent); }
.bgx-star-trails-sky span:nth-child(5) { --d: 10.67em; --w: 0.09em; --a: 57deg; --k: rgb(255 255 255 / 0.42); }
.bgx-star-trails-sky span:nth-child(6) { --d: 12.49em; --w: 0.06em; --a: 108deg; --k: rgb(255 255 255 / 0.37); }
.bgx-star-trails-sky span:nth-child(7) { --d: 14.69em; --w: 0.12em; --a: 21deg; --k: rgb(255 255 255 / 0.4); }
.bgx-star-trails-sky span:nth-child(8) { --d: 16.46em; --w: 0.12em; --a: 43deg; --k: color-mix(in srgb, var(--c) 67%, transparent); }
.bgx-star-trails-sky span:nth-child(9) { --d: 17.98em; --w: 0.11em; --a: 202deg; --k: color-mix(in srgb, var(--c) 56%, transparent); }
.bgx-star-trails-sky span:nth-child(10) { --d: 20.23em; --w: 0.11em; --a: 25deg; --k: rgb(255 255 255 / 0.27); }
.bgx-star-trails-sky span:nth-child(11) { --d: 21.97em; --w: 0.1em; --a: 26deg; --k: rgb(255 255 255 / 0.26); }
.bgx-star-trails-sky span:nth-child(12) { --d: 23.7em; --w: 0.08em; --a: 148deg; --k: rgb(255 255 255 / 0.43); }
.bgx-star-trails-sky span:nth-child(13) { --d: 26.56em; --w: 0.09em; --a: 179deg; --k: color-mix(in srgb, var(--c) 70%, transparent); }
.bgx-star-trails-sky span:nth-child(14) { --d: 28.04em; --w: 0.08em; --a: 307deg; --k: rgb(255 255 255 / 0.46); }
.bgx-star-trails-sky span:nth-child(15) { --d: 30.33em; --w: 0.12em; --a: 189deg; --k: rgb(255 255 255 / 0.37); }
.bgx-star-trails-sky span:nth-child(16) { --d: 32.02em; --w: 0.09em; --a: 201deg; --k: color-mix(in srgb, var(--c) 66%, transparent); }
.bgx-star-trails-sky span:nth-child(17) { --d: 34.53em; --w: 0.05em; --a: 216deg; --k: color-mix(in srgb, var(--c) 50%, transparent); }
.bgx-star-trails-sky span:nth-child(18) { --d: 35.51em; --w: 0.11em; --a: 162deg; --k: color-mix(in srgb, var(--c) 54%, transparent); }
.bgx-star-trails-sky span:nth-child(19) { --d: 37.98em; --w: 0.12em; --a: 74deg; --k: color-mix(in srgb, var(--c) 49%, transparent); }
.bgx-star-trails-sky span:nth-child(20) { --d: 39.35em; --w: 0.1em; --a: 356deg; --k: rgb(255 255 255 / 0.47); }
.bgx-star-trails-sky span:nth-child(21) { --d: 41.29em; --w: 0.06em; --a: 289deg; --k: rgb(255 255 255 / 0.56); }
.bgx-star-trails-sky span:nth-child(22) { --d: 43.94em; --w: 0.06em; --a: 356deg; --k: rgb(255 255 255 / 0.26); }
.bgx-star-trails-sky span:nth-child(23) { --d: 46.27em; --w: 0.06em; --a: 207deg; --k: color-mix(in srgb, var(--c) 67%, transparent); }
.bgx-star-trails-sky span:nth-child(24) { --d: 48em; --w: 0.11em; --a: 343deg; --k: rgb(255 255 255 / 0.51); }
.bgx-star-trails-sky span:nth-child(25) { --d: 49.84em; --w: 0.09em; --a: 21deg; --k: rgb(255 255 255 / 0.2); }
.bgx-star-trails-sky span:nth-child(26) { --d: 51.25em; --w: 0.12em; --a: 4deg; --k: color-mix(in srgb, var(--c) 65%, transparent); }
.bgx-star-trails-sky span:nth-child(27) { --d: 54.06em; --w: 0.09em; --a: 7deg; --k: rgb(255 255 255 / 0.5); }
.bgx-star-trails-sky span:nth-child(28) { --d: 55.72em; --w: 0.11em; --a: 345deg; --k: rgb(255 255 255 / 0.52); }
.bgx-star-trails-sky span:nth-child(29) { --d: 57.92em; --w: 0.11em; --a: 135deg; --k: rgb(255 255 255 / 0.39); }
.bgx-star-trails-sky span:nth-child(30) { --d: 59.75em; --w: 0.12em; --a: 227deg; --k: rgb(255 255 255 / 0.37); }
.bgx-star-trails-sky span:nth-child(31) { --d: 61.25em; --w: 0.07em; --a: 211deg; --k: rgb(255 255 255 / 0.41); }
.bgx-star-trails-sky span:nth-child(32) { --d: 62.84em; --w: 0.08em; --a: 229deg; --k: rgb(255 255 255 / 0.41); }
.bgx-star-trails-sky span:nth-child(33) { --d: 65.35em; --w: 0.08em; --a: 202deg; --k: rgb(255 255 255 / 0.29); }
.bgx-star-trails-sky span:nth-child(34) { --d: 67.72em; --w: 0.07em; --a: 99deg; --k: rgb(255 255 255 / 0.59); }
.bgx-star-trails-sky span:nth-child(35) { --d: 68.89em; --w: 0.1em; --a: 341deg; --k: rgb(255 255 255 / 0.23); }
.bgx-star-trails-sky span:nth-child(36) { --d: 70.74em; --w: 0.11em; --a: 158deg; --k: color-mix(in srgb, var(--c) 56%, transparent); }
.bgx-star-trails-sky span:nth-child(37) { --d: 73.51em; --w: 0.12em; --a: 218deg; --k: rgb(255 255 255 / 0.48); }
.bgx-star-trails-sky span:nth-child(38) { --d: 75.17em; --w: 0.07em; --a: 40deg; --k: color-mix(in srgb, var(--c) 49%, transparent); }
.bgx-star-trails-sky span:nth-child(39) { --d: 77.46em; --w: 0.09em; --a: 259deg; --k: rgb(255 255 255 / 0.35); }
.bgx-star-trails-sky span:nth-child(40) { --d: 79.37em; --w: 0.05em; --a: 332deg; --k: rgb(255 255 255 / 0.3); }
.bgx-star-trails-sky span:nth-child(41) { --d: 80.62em; --w: 0.09em; --a: 316deg; --k: rgb(255 255 255 / 0.5); }
.bgx-star-trails-sky span:nth-child(42) { --d: 82.96em; --w: 0.11em; --a: 190deg; --k: color-mix(in srgb, var(--c) 51%, transparent); }
.bgx-star-trails-sky span:nth-child(43) { --d: 84.74em; --w: 0.11em; --a: 339deg; --k: rgb(255 255 255 / 0.33); }
.bgx-star-trails-sky span:nth-child(44) { --d: 86.49em; --w: 0.12em; --a: 156deg; --k: rgb(255 255 255 / 0.25); }
@keyframes bgx-star-trails-turn {
  to { transform: rotate(360deg); }
}

.bgx-solar-eclipse {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--c) 30%, #0b0f22), #020308 60%);}
.bgx-solar-eclipse span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--d);
  height: var(--d);
  margin: calc(var(--d) / -2);
  border-radius: 50%;
}
.bgx-solar-eclipse span:nth-child(1),
.bgx-solar-eclipse span:nth-child(2) {
  mask: radial-gradient(closest-side, #000 26%, rgb(0 0 0 / 0.4) 45%, transparent);
}
.bgx-solar-eclipse span:nth-child(1) {
  --d: 18em;
  background: repeating-conic-gradient(color-mix(in srgb, var(--c) 40%, #fff) 0 1.5deg, transparent 1.5deg 7deg);
  animation: bgx-solar-eclipse-spin 40s linear infinite;
}
.bgx-solar-eclipse span:nth-child(2) {
  --d: 14em;
  background: repeating-conic-gradient(from 3deg, #fff 0 1deg, transparent 1deg 5deg);
  opacity: 0.7;
  animation: bgx-solar-eclipse-spin 28s linear infinite reverse;
}
.bgx-solar-eclipse span:nth-child(3) {
  --d: 5.6em;
  background: #020308;
  box-shadow:
    0 0 0 0.1em #fff,
    0 0 0.8em 0.25em color-mix(in srgb, var(--c) 35%, #fff),
    0 0 3em 1em color-mix(in srgb, var(--c) 40%, transparent);
}
.bgx-solar-eclipse span:nth-child(3)::after {
  content: "";
  position: absolute;
  top: 12%;
  left: 82%;
  width: 1.4em;
  height: 1.4em;
  margin: -0.7em;
  border-radius: 50%;
  background: radial-gradient(closest-side, #fff 15%, color-mix(in srgb, var(--c) 20%, #fff) 30%, transparent);
  animation: bgx-solar-eclipse-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes bgx-solar-eclipse-spin {
  to { transform: rotate(360deg); }
}
@keyframes bgx-solar-eclipse-pulse {
  50% { opacity: 0.5; }
}

.bgx-nebula {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  --gas: oklch(from var(--c) 0.62 0.2 calc(h + 70));
  background:
    radial-gradient(circle 0.07em at 4.3% 43.8%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.07em at 71% 87.1%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.07em at 10.1% 30.9%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.07em at 59.8% 62.8%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.07em at 76.8% 91.1%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.07em at 38.6% 36.6%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.07em at 34.4% 22.8%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.07em at 84.2% 94.5%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.07em at 88.2% 70%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.07em at 35.8% 58.8%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.07em at 38.3% 43.6%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.07em at 87.6% 44.9%, rgb(255 255 255 / 0.6) 50%, transparent),
    #03030a;
  background-size: 10em 10em, auto;}
.bgx-nebula::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 34% 7% at 42% 56%, rgb(3 3 10 / 0.75), transparent),
    radial-gradient(ellipse 18% 5% at 63% 44%, rgb(3 3 10 / 0.6), transparent),
    radial-gradient(ellipse 22% 6% at 30% 38%, rgb(3 3 10 / 0.5), transparent);
  rotate: -14deg;
}
.bgx-nebula span:nth-child(-n + 2) {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44em;
  height: 44em;
  margin: -22em;
  mix-blend-mode: screen;
  animation: bgx-nebula-swirl var(--dur) linear infinite var(--dir);
}
.bgx-nebula span:nth-child(1) {
  --dur: 80s;
  --dir: normal;
  background:
    radial-gradient(ellipse 26% 12% at 40% 47%, color-mix(in srgb, var(--c) 75%, transparent), transparent),
    radial-gradient(ellipse 16% 22% at 57% 42%, color-mix(in srgb, var(--c) 50%, transparent), transparent),
    radial-gradient(ellipse 30% 9% at 52% 60%, color-mix(in srgb, var(--c) 45%, transparent), transparent),
    radial-gradient(ellipse 9% 7% at 47% 50%, color-mix(in srgb, var(--c) 35%, #fff), transparent);
}
.bgx-nebula span:nth-child(2) {
  --dur: 64s;
  --dir: reverse;
  background:
    radial-gradient(ellipse 22% 10% at 58% 54%, color-mix(in srgb, var(--gas) 70%, transparent), transparent),
    radial-gradient(ellipse 14% 20% at 40% 58%, color-mix(in srgb, var(--gas) 50%, transparent), transparent),
    radial-gradient(ellipse 28% 8% at 46% 40%, color-mix(in srgb, var(--gas) 45%, transparent), transparent);
}
.bgx-nebula span:nth-child(n + 3) {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--s);
  height: var(--s);
  margin: calc(var(--s) / -2);
  background: radial-gradient(closest-side, #fff 0 12%, color-mix(in srgb, var(--c) 40%, #fff) 26%, transparent);
  clip-path: polygon(50% 0, 54% 46%, 100% 50%, 54% 54%, 50% 100%, 46% 54%, 0 50%, 46% 46%);
  animation: bgx-nebula-flare var(--t) ease-in-out var(--delay) infinite alternate;
}
.bgx-nebula span:nth-child(3) { --x: 22%; --y: 28%; --s: 1.8em; --t: 2.6s; --delay: -0.4s; }
.bgx-nebula span:nth-child(4) { --x: 71%; --y: 22%; --s: 1.4em; --t: 3.1s; --delay: -1.9s; }
.bgx-nebula span:nth-child(5) { --x: 58%; --y: 74%; --s: 2.2em; --t: 3.6s; --delay: -1.1s; }
.bgx-nebula span:nth-child(6) { --x: 88%; --y: 62%; --s: 1.2em; --t: 2.3s; --delay: -2.2s; }
@keyframes bgx-nebula-swirl {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.15); }
  100% { transform: rotate(360deg) scale(1); }
}
@keyframes bgx-nebula-flare {
  from { transform: scale(0.55); opacity: 0.5; }
  to   { transform: scale(1) rotate(12deg); opacity: 1; }
}

.bgx-planet-horizon {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--c) 32%, #0b1030), #03040b 70%);}
.bgx-planet-horizon::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: 11em 11em;
  background-image:
    radial-gradient(circle 0.07em at 4.3% 24.4%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.07em at 28.1% 64.3%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.07em at 28.2% 59.8%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.07em at 85.8% 69.5%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.07em at 83.8% 55%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.07em at 66.3% 47.3%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.07em at 33.1% 41.8%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.07em at 21.7% 18.9%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.07em at 90.7% 74.3%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.07em at 63.5% 95.7%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.07em at 84.7% 54.7%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.07em at 44.7% 6.5%, rgb(255 255 255 / 0.6) 50%, transparent);
}
.bgx-planet-horizon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 34% 7% at 50% 60%, color-mix(in srgb, var(--c) 30%, rgb(255 255 255 / 0.6)), transparent);
  animation: bgx-planet-horizon-glare 5s ease-in-out infinite alternate;
}
.bgx-planet-horizon-planet {
  position: absolute;
  top: 60%;
  left: 50%;
  width: 90em;
  height: 90em;
  margin-left: -45em;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 0, color-mix(in srgb, var(--c) 50%, #1b2a55), #070a18 26%);
  box-shadow:
    0 -0.1em 0.3em color-mix(in srgb, var(--c) 30%, #fff),
    0 -0.5em 1.6em 0.3em color-mix(in srgb, var(--c) 60%, transparent),
    0 -1.5em 5em 1em color-mix(in srgb, var(--c) 28%, transparent);
}
.bgx-planet-horizon-planet span {
  position: absolute;
  top: 0;
  left: 0;
  right: -24em;
  height: 14em;
  background-size: 24em 100%;
  background-image:
    radial-gradient(9em 5% at 4em 14%, color-mix(in srgb, var(--c) 30%, rgb(255 255 255 / 0.3)), transparent),
    radial-gradient(9em 5% at 28em 14%, color-mix(in srgb, var(--c) 30%, rgb(255 255 255 / 0.3)), transparent),
    radial-gradient(10em 6% at 15em 26%, color-mix(in srgb, var(--c) 30%, rgb(255 255 255 / 0.3)), transparent),
    radial-gradient(10em 6% at -9em 26%, color-mix(in srgb, var(--c) 30%, rgb(255 255 255 / 0.3)), transparent),
    radial-gradient(11em 5% at 9em 40%, color-mix(in srgb, var(--c) 30%, rgb(255 255 255 / 0.3)), transparent),
    radial-gradient(11em 5% at 33em 40%, color-mix(in srgb, var(--c) 30%, rgb(255 255 255 / 0.3)), transparent),
    radial-gradient(8em 6% at 20em 52%, color-mix(in srgb, var(--c) 30%, rgb(255 255 255 / 0.3)), transparent),
    radial-gradient(8em 6% at -4em 52%, color-mix(in srgb, var(--c) 30%, rgb(255 255 255 / 0.3)), transparent),
    radial-gradient(9em 5% at 3em 66%, color-mix(in srgb, var(--c) 30%, rgb(255 255 255 / 0.3)), transparent),
    radial-gradient(9em 5% at 27em 66%, color-mix(in srgb, var(--c) 30%, rgb(255 255 255 / 0.3)), transparent);
  mask: linear-gradient(to bottom, #000, transparent);
  animation: bgx-planet-horizon-turn 36s linear infinite;
}
.bgx-planet-horizon i {
  position: absolute;
  top: 16%;
  left: 0;
  width: 100%;
  animation: bgx-planet-horizon-moon 40s linear -14s infinite;
}
.bgx-planet-horizon i::before {
  content: "";
  position: absolute;
  width: 1.3em;
  height: 1.3em;
  border-radius: 50%;
  background: radial-gradient(circle at 72% 80%, #e6e9f2, #9aa2b8 45%, #262a38 80%);
  box-shadow: 0 0 0.8em color-mix(in srgb, var(--c) 30%, transparent);
}
@keyframes bgx-planet-horizon-turn {
  to { transform: translateX(-24em); }
}
@keyframes bgx-planet-horizon-moon {
  from { transform: translateX(-2em); }
  to   { transform: translateX(100%); }
}
@keyframes bgx-planet-horizon-glare {
  from { opacity: 0.6; }
  to   { opacity: 1; }
}

.bgx-animated-grid {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  --cell: 2.5em;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, color-mix(in srgb, var(--c) 30%, transparent), transparent 70%),
    color-mix(in srgb, var(--c) 8%, #05070c);
}
.bgx-animated-grid-lines {
  position: absolute;
  inset: 0;
  -webkit-mask: radial-gradient(ellipse 75% 85% at 50% 35%, #000 25%, transparent 78%);
  mask: radial-gradient(ellipse 75% 85% at 50% 35%, #000 25%, transparent 78%);
}
.bgx-animated-grid-lines::before {
  content: "";
  position: absolute;
  inset: calc(var(--cell) * -1) 0 0 calc(var(--cell) * -1);
  background:
    linear-gradient(color-mix(in srgb, var(--c) 50%, transparent) 0 1px, transparent 2px) 0 0 / var(--cell) var(--cell),
    linear-gradient(90deg, color-mix(in srgb, var(--c) 50%, transparent) 0 1px, transparent 2px) 0 0 / var(--cell) var(--cell);
  animation: bgx-animated-grid-pan 3s linear infinite;
}
@keyframes bgx-animated-grid-pan {
  to { transform: translate(var(--cell), var(--cell)); }
}

.bgx-retro-synthwave-grid {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  --cell: 2.5em;
  --sky: oklch(from var(--c) 0.16 0.07 calc(h + 40));
  --haze: oklch(from var(--c) 0.42 0.18 calc(h + 75));
  --line: oklch(from var(--c) 0.74 0.2 calc(h + 75));
  --ridge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V30L34 21L55 29L82 11L108 27L131 19L152 26L181 5L208 23L233 15L259 28L286 13L313 25L340 17L366 29L400 30V40Z'/%3E%3C/svg%3E") 0 100% / 44em 100% repeat-x;
  background:
    radial-gradient(ellipse 60% 45% at 50% 58%, color-mix(in srgb, var(--haze) 85%, transparent), transparent),
    linear-gradient(var(--sky) 10%, var(--haze) 58%);
}
.bgx-retro-synthwave-grid-rim,
.bgx-retro-synthwave-grid-ridge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 42%;
  height: 3.4em;
  -webkit-mask: var(--ridge);
  mask: var(--ridge);
}
.bgx-retro-synthwave-grid-rim {
  background: var(--line);
  transform: translateY(-0.13em);
  filter: drop-shadow(0 0 0.4em var(--line));
}
.bgx-retro-synthwave-grid-ridge {
  background: linear-gradient(oklch(from var(--c) 0.2 0.08 calc(h + 50)), oklch(from var(--c) 0.12 0.05 calc(h + 40)));
}
.bgx-retro-synthwave-grid-floor {
  position: absolute;
  inset: 58% 0 0;
  overflow: hidden;
  perspective: 8em;
  perspective-origin: 50% 0;
  background: linear-gradient(var(--haze), oklch(from var(--c) 0.2 0.08 calc(h + 60)) 30%, oklch(from var(--c) 0.12 0.05 calc(h + 40)));
  box-shadow: inset 0 1px var(--line);
}
.bgx-retro-synthwave-grid-floor > i {
  position: absolute;
  top: 100%;
  left: -100%;
  width: 300%;
  height: 50em;
  overflow: hidden;
  transform-origin: 50% 0;
  transform: rotateX(-90deg);
  -webkit-mask: linear-gradient(#000 5%, transparent 40%);
  mask: linear-gradient(#000 5%, transparent 40%);
}
.bgx-retro-synthwave-grid-floor > i::before {
  content: "";
  position: absolute;
  inset: 0 0 calc(var(--cell) * -1);
  background:
    linear-gradient(90deg, var(--line) 0.14em, transparent 0.14em) 50% 0 / var(--cell) var(--cell),
    linear-gradient(var(--line) 0.14em, transparent 0.14em) 0 0 / var(--cell) var(--cell);
  animation: bgx-retro-synthwave-grid-run 1.1s linear infinite;
}
@keyframes bgx-retro-synthwave-grid-run {
  to { transform: translateY(calc(var(--cell) * -1)); }
}

.bgx-layered-waves {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 100' preserveAspectRatio='none'%3E%3Cpath d='M0 60Q150 20 300 60T600 60V100H0Z'/%3E%3C/svg%3E");
  background: linear-gradient(color-mix(in srgb, var(--c) 5%, #fff), color-mix(in srgb, var(--c) 16%, #fff));
}
.bgx-layered-waves span {
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(100% + var(--p));
  height: var(--h);
  background: var(--fill);
  -webkit-mask: var(--wave) 0 0 / var(--p) 100% repeat-x;
  mask: var(--wave) 0 0 / var(--p) 100% repeat-x;
  animation:
    bgx-layered-waves-roll var(--t) linear infinite,
    bgx-layered-waves-bob 3.2s ease-in-out infinite alternate;
}
.bgx-layered-waves span:nth-child(1) { --p: 34em; --h: 9.5em; --t: 19s; --fill: color-mix(in srgb, var(--c) 22%, transparent); animation-delay: -4s, -1s; }
.bgx-layered-waves span:nth-child(2) { --p: 26em; --h: 7.5em; --t: 13s; --fill: color-mix(in srgb, var(--c) 40%, transparent); animation-delay: -9s, -2.4s; }
.bgx-layered-waves span:nth-child(3) { --p: 30em; --h: 5.5em; --t: 9s; --fill: color-mix(in srgb, var(--c) 65%, transparent); animation-delay: -2s, -0.6s; }
.bgx-layered-waves span:nth-child(4) { --p: 22em; --h: 3.6em; --t: 6s; --fill: var(--c); animation-delay: -3s, -1.8s; }
@keyframes bgx-layered-waves-roll {
  to { transform: translateX(calc(var(--p) * -1)); }
}
@keyframes bgx-layered-waves-bob {
  from { translate: 0 0; }
  to   { translate: 0 0.5em; }
}

.bgx-dot-grid-pulse {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  --gap: 1.5em;
  --dots: radial-gradient(circle, var(--c) 0.2em, transparent 0.24em) 0 0 / var(--gap) var(--gap);
  background:
    radial-gradient(circle, color-mix(in srgb, var(--c) 35%, transparent) 0.09em, transparent 0.12em) 0 0 / var(--gap) var(--gap),
    color-mix(in srgb, var(--c) 4%, #fbfcfe);
}
.bgx-dot-grid-pulse::before,
.bgx-dot-grid-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--dots);
  -webkit-mask: radial-gradient(circle, transparent 20%, rgb(0 0 0 / 0.3) 32%, #000 38.5%, transparent 40%) 50% 50% / 0 0 no-repeat;
  mask: radial-gradient(circle, transparent 20%, rgb(0 0 0 / 0.3) 32%, #000 38.5%, transparent 40%) 50% 50% / 0 0 no-repeat;
  animation: bgx-dot-grid-pulse-ring 4s cubic-bezier(0.3, 0.2, 0.6, 1) -1.2s infinite;
}
.bgx-dot-grid-pulse::after {
  animation-delay: -3.2s;
}
@keyframes bgx-dot-grid-pulse-ring {
  from { -webkit-mask-size: 0 0; mask-size: 0 0; }
  to   { -webkit-mask-size: 320% 320%; mask-size: 320% 320%; }
}

.bgx-diagonal-stripes {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  --tile: 3em;
  background: var(--c);
}
.bgx-diagonal-stripes::before {
  content: "";
  position: absolute;
  inset: 0 0 0 calc(var(--tile) * -1);
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 78%, #fff) 25%, transparent 25% 50%, color-mix(in srgb, var(--c) 78%, #fff) 50% 75%, transparent 75%) 0 0 / var(--tile) var(--tile);
  animation: bgx-diagonal-stripes-slide 1.8s linear infinite;
}
.bgx-diagonal-stripes::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 90% at 50% 40%, transparent 40%, color-mix(in srgb, var(--c) 45%, #000));
  opacity: 0.55;
}
@keyframes bgx-diagonal-stripes-slide {
  to { transform: translateX(var(--tile)); }
}

.bgx-grid-beams {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  --cell: 3em;
  --beam: color-mix(in srgb, var(--c) 35%, #fff);
  background:
    linear-gradient(color-mix(in srgb, var(--c) 16%, transparent) 1px, transparent 1px) 0 0 / var(--cell) var(--cell),
    linear-gradient(90deg, color-mix(in srgb, var(--c) 16%, transparent) 1px, transparent 1px) 0 0 / var(--cell) var(--cell),
    radial-gradient(ellipse 80% 70% at 50% 110%, color-mix(in srgb, var(--c) 22%, transparent), transparent),
    color-mix(in srgb, var(--c) 6%, #06080d);
}
.bgx-grid-beams-col,
.bgx-grid-beams-row {
  position: absolute;
}
.bgx-grid-beams-col {
  top: 0;
  bottom: 0;
  width: 1px;
  left: var(--x);
  left: round(down, var(--x), var(--cell));
}
.bgx-grid-beams-row {
  left: 0;
  right: 0;
  height: 1px;
  top: var(--y);
  top: round(down, var(--y), var(--cell));
}
.bgx-grid-beams-col::before,
.bgx-grid-beams-row::before {
  content: "";
  position: absolute;
  inset: 0;
  filter: drop-shadow(0 0 0.2em var(--c)) drop-shadow(0 0 0.6em var(--c));
  animation: bgx-grid-beams-fall var(--t) cubic-bezier(0.5, 0, 0.7, 1) var(--d) infinite;
}
.bgx-grid-beams-col::before {
  background: linear-gradient(to top, var(--beam), var(--c) 0.8em, transparent 8em);
}
.bgx-grid-beams-row::before {
  background: linear-gradient(to left, var(--beam), var(--c) 0.8em, transparent 10em);
  animation-name: bgx-grid-beams-sweep;
}
@keyframes bgx-grid-beams-fall {
  from { transform: translateY(-100%); }
  to   { transform: translateY(100%); }
}
@keyframes bgx-grid-beams-sweep {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

.bgx-hexagon-pulse {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  --w: 2.0785em;
  --hh: 3.6em;
  --hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17.32 30' preserveAspectRatio='none'%3E%3Cpath d='M0 0V5L8.66 10L17.32 5V0M8.66 10V20M0 30V25L8.66 20L17.32 25V30' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E") 0 0 / var(--w) var(--hh);
  container-type: size;
  background: color-mix(in srgb, var(--c) 7%, #06080d);
}
.bgx-hexagon-pulse::before,
.bgx-hexagon-pulse-lit {
  content: "";
  position: absolute;
  inset: 0;
  -webkit-mask: var(--hex);
  mask: var(--hex);
}
.bgx-hexagon-pulse::before {
  background: color-mix(in srgb, var(--c) 18%, transparent);
}
.bgx-hexagon-pulse-lit > i {
  position: absolute;
  top: 0;
  left: 0;
  width: 18em;
  height: 18em;
  margin: -9em 0 0 -9em;
  background: radial-gradient(closest-side, var(--c), color-mix(in srgb, var(--c) 40%, transparent) 45%, transparent);
  animation:
    bgx-hexagon-pulse-x 7s ease-in-out infinite alternate,
    bgx-hexagon-pulse-y 4.3s ease-in-out infinite alternate;
}
.bgx-hexagon-pulse-cell {
  position: absolute;
  width: var(--w);
  height: 2.4em;
  left: var(--x);
  left: round(nearest, var(--x), var(--w));
  top: calc(var(--y) - 1.2em);
  top: calc(round(nearest, var(--y), var(--hh)) - 1.2em);
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 70%, transparent), color-mix(in srgb, var(--c) 25%, transparent));
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  opacity: 0;
  transform: scale(0.84);
  animation: bgx-hexagon-pulse-fill 4.8s ease-in-out var(--d) infinite;
}
@keyframes bgx-hexagon-pulse-x {
  from { translate: 8cqw 0; }
  to   { translate: 92cqw 0; }
}
@keyframes bgx-hexagon-pulse-y {
  from { transform: translateY(10cqh); }
  to   { transform: translateY(90cqh); }
}
@keyframes bgx-hexagon-pulse-fill {
  0%, 100% { opacity: 0; transform: scale(0.6); }
  30%      { opacity: 1; transform: scale(0.84); }
  60%      { opacity: 0; transform: scale(0.84); }
}

.bgx-radar-sweep {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  --t: 4s;
  container-type: size;
  background:
    repeating-radial-gradient(circle, transparent 0 calc(3em - 1px), color-mix(in srgb, var(--c) 30%, transparent) calc(3em - 1px) 3em),
    linear-gradient(90deg, transparent calc(50% - 0.5px), color-mix(in srgb, var(--c) 35%, transparent) 0 calc(50% + 0.5px), transparent 0),
    linear-gradient(transparent calc(50% - 0.5px), color-mix(in srgb, var(--c) 35%, transparent) 0 calc(50% + 0.5px), transparent 0),
    radial-gradient(circle, color-mix(in srgb, var(--c) 20%, #03060a), color-mix(in srgb, var(--c) 5%, #020305) 75%);
}
.bgx-radar-sweep-beam {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150cqmax;
  height: 150cqmax;
  margin: -75cqmax 0 0 -75cqmax;
  border-radius: 50%;
  background: conic-gradient(transparent 0 280deg, color-mix(in srgb, var(--c) 8%, transparent) 290deg, color-mix(in srgb, var(--c) 45%, transparent) 357deg, var(--c) 359.6deg, transparent 360deg);
  animation: bgx-radar-sweep-turn var(--t) linear infinite;
}
.bgx-radar-sweep-blip {
  position: absolute;
  top: calc(50% + var(--y));
  left: calc(50% + var(--x));
  width: 0.5em;
  height: 0.5em;
  margin: -0.25em 0 0 -0.25em;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 45%, #fff);
  box-shadow: 0 0 0.6em var(--c);
  animation: bgx-radar-sweep-blip var(--t) ease-out var(--d) infinite;
}
@keyframes bgx-radar-sweep-turn {
  to { transform: rotate(1turn); }
}
@keyframes bgx-radar-sweep-blip {
  0%       { opacity: 1; transform: scale(1.3); }
  70%, 100% { opacity: 0; transform: scale(0.7); }
}

.bgx-radial-ripple {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  --t: 6s;
  container-type: size;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 14%, #fff), color-mix(in srgb, var(--c) 5%, #fbfcfe) 70%);
}
.bgx-radial-ripple span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120cqmax;
  height: 120cqmax;
  margin: -60cqmax 0 0 -60cqmax;
  border-radius: 50%;
  background: radial-gradient(closest-side, transparent 86%, color-mix(in srgb, var(--c) 22%, transparent) 93%, color-mix(in srgb, var(--c) 60%, transparent) 97%, transparent 99%);
  transform: scale(var(--at));
  opacity: calc(1 - var(--at));
  animation: bgx-radial-ripple-spread var(--t) linear calc(var(--t) * var(--at) * -1) infinite;
}
.bgx-radial-ripple span:nth-child(1) { --at: 0.1; }
.bgx-radial-ripple span:nth-child(2) { --at: 0.3; }
.bgx-radial-ripple span:nth-child(3) { --at: 0.5; }
.bgx-radial-ripple span:nth-child(4) { --at: 0.7; }
.bgx-radial-ripple span:nth-child(5) { --at: 0.9; }
@keyframes bgx-radial-ripple-spread {
  0%   { transform: scale(0.02); opacity: 0; }
  8%   { opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

.bgx-circuit-board {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  --board: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M0 20H48L68 40H118L138 20H200M0 80H26L46 60H82M200 80H170L150 60H126M60 100V92L74 78H100M60 0V6M158 30V20M174 30V20M162 48V54'/%3E%3Ccircle cx='87' cy='60' r='5'/%3E%3Ccircle cx='121' cy='60' r='5'/%3E%3Ccircle cx='105' cy='78' r='5'/%3E%3Ccircle cx='60' cy='11' r='5'/%3E%3Ccircle cx='162' cy='59' r='5'/%3E%3Crect x='150' y='30' width='32' height='18' rx='2'/%3E%3C/g%3E%3C/svg%3E");
  background: color-mix(in srgb, var(--c) 9%, #04070a);
}
.bgx-circuit-board::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--c) 32%, transparent);
  -webkit-mask: var(--board) 0 0 / 16em 8em;
  mask: var(--board) 0 0 / 16em 8em;
}
.bgx-circuit-board-pulses {
  position: absolute;
  top: 0;
  left: 0;
  width: 128em;
  height: 64em;
  overflow: visible;
}
.bgx-circuit-board-pulses use {
  fill: none;
  stroke: color-mix(in srgb, var(--c) 40%, #fff);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 14 1100;
  animation: bgx-circuit-board-run var(--t) linear var(--d) infinite var(--dir, normal);
}
.bgx-circuit-board-pulses .bgx-circuit-board-short {
  stroke-dasharray: 24 1100;
  animation-name: bgx-circuit-board-hop;
}
@keyframes bgx-circuit-board-run {
  from { stroke-dashoffset: 14; }
  to   { stroke-dashoffset: -1000; }
}
@keyframes bgx-circuit-board-hop {
  from { stroke-dashoffset: 24; }
  to   { stroke-dashoffset: -100; }
}

.bgx-film-grain {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  container-type: size;
  background: radial-gradient(ellipse 85% 80% at 50% 45%, color-mix(in srgb, var(--c) 32%, #1c1d21), color-mix(in srgb, var(--c) 6%, #060607) 85%);
}
.bgx-film-grain-noise {
  position: absolute;
  inset: -25%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' preserveAspectRatio='none'%3E%3Cfilter id='g' x='0' y='0' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 4 0 0 0 -2.1'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 14em 14em;
  opacity: 0.4;
  animation: bgx-film-grain-jitter 0.7s steps(1) infinite;
}
.bgx-film-grain-scratch {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: linear-gradient(transparent 5%, rgb(255 255 255 / 0.4) 25% 70%, transparent 95%);
  opacity: 0;
  animation: bgx-film-grain-scratch 3.4s steps(1) infinite;
}
.bgx-film-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  animation: bgx-film-grain-flicker 1.3s steps(1) infinite;
}
@keyframes bgx-film-grain-jitter {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(-3%, -5%); }
  20%  { transform: translate(-7%, 2%); }
  30%  { transform: translate(4%, -8%); }
  40%  { transform: translate(-2%, 6%); }
  50%  { transform: translate(-6%, 3%); }
  60%  { transform: translate(7%, 1%); }
  70%  { transform: translate(1%, 5%); }
  80%  { transform: translate(3%, 8%); }
  90%  { transform: translate(-5%, 4%); }
}
@keyframes bgx-film-grain-scratch {
  0%   { transform: translateX(23cqw); opacity: 0.9; }
  6%   { transform: translateX(24cqw); opacity: 0.5; }
  12%  { opacity: 0; }
  50%  { transform: translateX(68cqw); opacity: 0.7; }
  54%  { transform: translateX(67cqw); opacity: 0.35; }
  60%  { opacity: 0; }
  100% { transform: translateX(67cqw); opacity: 0; }
}
@keyframes bgx-film-grain-flicker {
  0%   { opacity: 0.08; }
  20%  { opacity: 0; }
  35%  { opacity: 0.12; }
  45%  { opacity: 0.03; }
  60%  { opacity: 0.09; }
  80%  { opacity: 0; }
  90%  { opacity: 0.05; }
}

.bgx-halftone-dots {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  --band: 18em;
  container-type: size;
  isolation: isolate;
  background: #fff;
}
.bgx-halftone-dots-ink {
  position: absolute;
  inset: 0;
  background: radial-gradient(closest-side, #444, #fff) 0 0 / 0.9em 0.9em;
  filter: contrast(20);
}
.bgx-halftone-dots-ink > i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(150cqmax + var(--band) * 2);
  height: calc(150cqmax + var(--band) * 2);
  margin: calc(-75cqmax - var(--band)) 0 0 calc(-75cqmax - var(--band));
  background: repeating-linear-gradient(90deg, #999 0, #fff calc(var(--band) / 2), #999 var(--band));
  mix-blend-mode: multiply;
  animation: bgx-halftone-dots-roll 6s linear infinite;
}
.bgx-halftone-dots::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c);
  mix-blend-mode: screen;
}
@keyframes bgx-halftone-dots-roll {
  from { transform: rotate(-30deg) translateX(0); }
  to   { transform: rotate(-30deg) translateX(calc(var(--band) * -1)); }
}

.bgx-isometric-cubes {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  --tw: 2.1651em;
  --th: 3.75em;
  background: color-mix(in srgb, var(--c) 70%, #0a0c12);
}
.bgx-isometric-cubes span {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--c) 45%, #0a0c12);
  -webkit-mask: var(--face) 0 0 / var(--tw) var(--th);
  mask: var(--face) 0 0 / var(--tw) var(--th);
}
.bgx-isometric-cubes span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--c) 45%, #fff);
  opacity: var(--lit);
  animation: bgx-isometric-cubes-light 6s ease-in-out var(--lag, 0s) infinite;
}
.bgx-isometric-cubes-top {
  --lit: 1;
  --face: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17.32 30' preserveAspectRatio='none'%3E%3Cpath d='M0 5L8.66 10L0 15L-8.66 10ZM17.32 5L25.98 10L17.32 15L8.66 10ZM8.66 20L17.32 25L8.66 30L0 25Z' stroke='%23000' stroke-width='.3'/%3E%3C/svg%3E");
}
.bgx-isometric-cubes-left {
  --face: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17.32 30' preserveAspectRatio='none'%3E%3Cpath d='M0 -5L8.66 0L8.66 10L0 5ZM8.66 10L17.32 15L17.32 25L8.66 20ZM0 25L8.66 30L8.66 40L0 35Z' stroke='%23000' stroke-width='.3'/%3E%3C/svg%3E");
}
.bgx-isometric-cubes-right {
  --face: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17.32 30' preserveAspectRatio='none'%3E%3Cpath d='M8.66 0L17.32 -5L17.32 5L8.66 10ZM0 15L8.66 10L8.66 20L0 25ZM8.66 30L17.32 25L17.32 35L8.66 40Z' stroke='%23000' stroke-width='.3'/%3E%3C/svg%3E");
}
.bgx-isometric-cubes-left { --lag: -2s; --lit: 0.4; }
.bgx-isometric-cubes-right { --lag: -4s; --lit: 0; }
@keyframes bgx-isometric-cubes-light {
  0%, 100% { opacity: 1; }
  33%      { opacity: 0.4; }
  66%      { opacity: 0; }
}

.bgx-topographic-lines {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--c) 7%, #fbfaf6);
}
.bgx-topographic-lines-map {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80em;
  height: 48em;
  margin: -24em 0 0 -40em;
  overflow: visible;
}
.bgx-topographic-lines-map use {
  fill: none;
  stroke: color-mix(in srgb, var(--c) 38%, transparent);
  stroke-width: 1;
  transform-box: view-box;
  transform-origin: 0 0;
  transform: scale(var(--k));
  animation: bgx-topographic-lines-drift 12s ease-in-out calc(var(--i) * 0.3s - 24s) infinite;
}
.bgx-topographic-lines-map .bgx-topographic-lines-major {
  stroke: color-mix(in srgb, var(--c) 62%, transparent);
  stroke-width: 1.6;
}
@keyframes bgx-topographic-lines-drift {
  0%, 100% { transform: rotate(-3deg) scale(var(--k)); }
  50%      { transform: rotate(3deg) scale(var(--k)); }
}

.bgx-wave-lines {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  --sine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0 50Q100 -38 200 50T400 50' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E");
  background:
    radial-gradient(ellipse 60% 45% at 50% 50%, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%),
    color-mix(in srgb, var(--c) 7%, #05060b);
}
.bgx-wave-lines-set {
  position: absolute;
  inset: 0;
  -webkit-mask: linear-gradient(90deg, transparent, #000 25% 75%, transparent);
  mask: linear-gradient(90deg, transparent, #000 25% 75%, transparent);
}
.bgx-wave-lines-set span {
  position: absolute;
  top: 50%;
  left: 0;
  width: calc(100% + var(--p));
  height: calc(var(--p) / 4);
  margin-top: calc(var(--p) / -8);
  background: oklch(from var(--c) calc(l + 0.08) c calc(h + var(--h)));
  -webkit-mask: var(--sine) 0 0 / var(--p) 100% repeat-x;
  mask: var(--sine) 0 0 / var(--p) 100% repeat-x;
  mix-blend-mode: screen;
  animation:
    bgx-wave-lines-flow var(--t) linear infinite var(--dir, normal),
    bgx-wave-lines-swell calc(var(--t) * 0.6) ease-in-out infinite alternate;
}
.bgx-wave-lines-set span:nth-child(1) { --p: 28em; --t: 7s; --h: 0; }
.bgx-wave-lines-set span:nth-child(2) { --p: 22em; --t: 5s; --h: 40; --dir: reverse; }
.bgx-wave-lines-set span:nth-child(3) { --p: 34em; --t: 9s; --h: -40; }
.bgx-wave-lines-set span:nth-child(4) { --p: 18em; --t: 6s; --h: 80; --dir: reverse; }
.bgx-wave-lines-set span:nth-child(5) { --p: 40em; --t: 11s; --h: 20; }
@keyframes bgx-wave-lines-flow {
  to { transform: translateX(calc(var(--p) * -1)); }
}
@keyframes bgx-wave-lines-swell {
  from { scale: 1 0.55; }
  to   { scale: 1 1; }
}

.bgx-geometric-shapes {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, color-mix(in srgb, var(--c) 14%, transparent), transparent),
    color-mix(in srgb, var(--c) 8%, #07080d);
}
.bgx-geometric-shapes-shape {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--s);
  height: var(--s);
  fill: none;
  stroke: oklch(from var(--c) calc(l + 0.08) c calc(h + var(--h)));
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
  animation: bgx-geometric-shapes-float var(--t) cubic-bezier(0.45, 0, 0.55, 1) var(--d) infinite alternate;
}
@keyframes bgx-geometric-shapes-float {
  from { transform: translate(0, 0) rotate(0deg); }
  to   { transform: translate(var(--dx, 0.7em), var(--dy, -1.2em)) rotate(var(--r, 45deg)); }
}

.bgx-spotlight-grid {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  --cell: 2em;
  --r: 9em;
  --grid:
    radial-gradient(circle at 0.5px 0.5px, currentColor 0.12em, transparent 0.16em) 0 0 / var(--cell) var(--cell),
    linear-gradient(currentColor 0 1px, transparent 1px) 0 0 / var(--cell) var(--cell),
    linear-gradient(90deg, currentColor 0 1px, transparent 1px) 0 0 / var(--cell) var(--cell);
  color: color-mix(in srgb, var(--c) 14%, transparent);
  background: var(--grid), color-mix(in srgb, var(--c) 6%, #050608);
}
.bgx-spotlight-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  --spot: circle var(--r) at var(--bgx-spotlight-grid-x) var(--bgx-spotlight-grid-y);
  color: color-mix(in srgb, var(--c) 80%, #fff);
  background: radial-gradient(var(--spot), color-mix(in srgb, var(--c) 30%, transparent), transparent), var(--grid);
  -webkit-mask: radial-gradient(var(--spot), #000 30%, transparent);
  mask: radial-gradient(var(--spot), #000 30%, transparent);
  animation:
    bgx-spotlight-grid-x 6.4s cubic-bezier(0.45, 0, 0.55, 1) -2.4s infinite alternate,
    bgx-spotlight-grid-y 4.1s cubic-bezier(0.45, 0, 0.55, 1) -1.6s infinite alternate;
}
@property --bgx-spotlight-grid-x {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 30%;
}
@property --bgx-spotlight-grid-y {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 40%;
}
@keyframes bgx-spotlight-grid-x {
  from { --bgx-spotlight-grid-x: 12%; }
  to   { --bgx-spotlight-grid-x: 88%; }
}
@keyframes bgx-spotlight-grid-y {
  from { --bgx-spotlight-grid-y: 18%; }
  to   { --bgx-spotlight-grid-y: 82%; }
}

.bgx-polka-dots {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  --gap: 3em;
  --fine: 2em;
  background: color-mix(in srgb, var(--c) 10%, #fff);
}
.bgx-polka-dots::before,
.bgx-polka-dots::after {
  content: "";
  position: absolute;
  inset: -4em;
}
.bgx-polka-dots::before {
  --dot: radial-gradient(circle, color-mix(in srgb, var(--c) 30%, transparent) 0.62em, transparent 0.66em);
  background:
    var(--dot) 0 0 / var(--gap) var(--gap),
    var(--dot) calc(var(--gap) / 2) calc(var(--gap) / 2) / var(--gap) var(--gap);
  animation: bgx-polka-dots-back 7s linear infinite;
}
.bgx-polka-dots::after {
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 85%, transparent) 0.16em, transparent 0.19em) 0 0 / var(--fine) var(--fine);
  animation: bgx-polka-dots-front 5s linear infinite;
}
@keyframes bgx-polka-dots-back {
  to { transform: translate(var(--gap), var(--gap)); }
}
@keyframes bgx-polka-dots-front {
  to { transform: translate(calc(var(--fine) * -1), var(--fine)); }
}

.bgx-chevron-zigzag {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  --tile: 3em;
  background: color-mix(in srgb, var(--c) 8%, #fff);
}
.bgx-chevron-zigzag::before {
  content: "";
  position: absolute;
  inset: 0 0 calc(var(--tile) * -1);
  --z: color-mix(in srgb, var(--c) 75%, #fff);
  background:
    linear-gradient(135deg, var(--z) 25%, transparent 25%) calc(var(--tile) / -2) 0 / var(--tile) var(--tile),
    linear-gradient(225deg, var(--z) 25%, transparent 25%) calc(var(--tile) / -2) 0 / var(--tile) var(--tile),
    linear-gradient(315deg, var(--z) 25%, transparent 25%) 0 0 / var(--tile) var(--tile),
    linear-gradient(45deg, var(--z) 25%, transparent 25%) 0 0 / var(--tile) var(--tile);
  animation: bgx-chevron-zigzag-march 2.4s linear infinite;
}
@keyframes bgx-chevron-zigzag-march {
  to { transform: translateY(calc(var(--tile) * -1)); }
}

.bgx-sliding-checkerboard {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  --sq: 2em;
  background: color-mix(in srgb, var(--c) 6%, #fff);
}
.bgx-sliding-checkerboard span {
  position: absolute;
  inset: 0 calc(var(--sq) * -2);
  background: conic-gradient(color-mix(in srgb, var(--c) 80%, transparent) 25%, transparent 0 50%, color-mix(in srgb, var(--c) 80%, transparent) 0 75%, transparent 0) 0 0 / calc(var(--sq) * 2) calc(var(--sq) * 2);
  -webkit-mask: repeating-linear-gradient(#000 0 var(--sq), transparent 0 calc(var(--sq) * 2)) 0 var(--row);
  mask: repeating-linear-gradient(#000 0 var(--sq), transparent 0 calc(var(--sq) * 2)) 0 var(--row);
  animation: bgx-sliding-checkerboard-slide 4s cubic-bezier(0.7, 0, 0.3, 1) infinite;
}
.bgx-sliding-checkerboard-even { --row: 0; --dir: 1; }
.bgx-sliding-checkerboard-odd  { --row: var(--sq); --dir: -1; }
@keyframes bgx-sliding-checkerboard-slide {
  0%, 15%   { transform: translateX(0); }
  40%, 65%  { transform: translateX(calc(var(--sq) * var(--dir))); }
  90%, 100% { transform: translateX(calc(var(--sq) * 2 * var(--dir))); }
}

.bgx-rotating-plus-pattern {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  --tile: 2.4em;
  --w: 0.1em;
  background: color-mix(in srgb, var(--c) 5%, #fff);
}
.bgx-rotating-plus-pattern span {
  --a: var(--bgx-rotating-plus-pattern-a);
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--a), transparent calc(50% - var(--w)), currentColor 0 calc(50% + var(--w)), transparent 0),
    linear-gradient(calc(var(--a) + 90deg), transparent calc(50% - var(--w)), currentColor 0 calc(50% + var(--w)), transparent 0);
  background-size: var(--tile) var(--tile);
  background-position: var(--at);
  -webkit-mask: radial-gradient(circle, #000 0.55em, transparent 0.58em) var(--at) / var(--tile) var(--tile);
  mask: radial-gradient(circle, #000 0.55em, transparent 0.58em) var(--at) / var(--tile) var(--tile);
  animation: bgx-rotating-plus-pattern-turn 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.bgx-rotating-plus-pattern-a {
  --at: 0 0;
  color: var(--c);
}
.bgx-rotating-plus-pattern-b {
  --at: calc(var(--tile) / 2) calc(var(--tile) / 2);
  color: color-mix(in srgb, var(--c) 35%, transparent);
  animation-direction: reverse;
}
@property --bgx-rotating-plus-pattern-a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes bgx-rotating-plus-pattern-turn {
  0%, 20%   { --bgx-rotating-plus-pattern-a: 0deg; }
  80%, 100% { --bgx-rotating-plus-pattern-a: 90deg; }
}

.bgx-memphis-pattern {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  --tile: 12em;
  background: color-mix(in srgb, var(--c) 5%, #fff8ec);
}
.bgx-memphis-pattern-tile {
  position: absolute;
  inset: calc(var(--tile) * -1) 0 0 calc(var(--tile) * -1);
  animation: bgx-memphis-pattern-drift 18s linear infinite;
}
.bgx-memphis-pattern-tile > i {
  position: absolute;
  inset: 0;
  -webkit-mask: var(--shapes) 0 0 / var(--tile) var(--tile);
  mask: var(--shapes) 0 0 / var(--tile) var(--tile);
}
.bgx-memphis-pattern-tile > i:nth-child(1) {
  background: var(--c);
  --shapes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M8 30q6-8 12 0t12 0 12 0M58 104q5-7 10 0t10 0 10 0'/%3E%3Ccircle cx='92' cy='88' r='7'/%3E%3C/g%3E%3C/svg%3E");
}
.bgx-memphis-pattern-tile > i:nth-child(2) {
  background: oklch(from var(--c) 0.7 0.17 calc(h + 110));
  --shapes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' preserveAspectRatio='none'%3E%3Cpath d='M84 14l14 24H70Z' fill='none' stroke='%23000' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M18 84a12 12 0 0 1 24 0Z'/%3E%3C/svg%3E");
}
.bgx-memphis-pattern-tile > i:nth-child(3) {
  background: oklch(from var(--c) 0.86 0.16 calc(h + 200));
  --shapes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' preserveAspectRatio='none'%3E%3Cg%3E%3Ccircle cx='50' cy='50' r='2'/%3E%3Ccircle cx='56' cy='50' r='2'/%3E%3Ccircle cx='62' cy='50' r='2'/%3E%3Ccircle cx='50' cy='56' r='2'/%3E%3Ccircle cx='56' cy='56' r='2'/%3E%3Ccircle cx='62' cy='56' r='2'/%3E%3Ccircle cx='50' cy='62' r='2'/%3E%3Ccircle cx='56' cy='62' r='2'/%3E%3Ccircle cx='62' cy='62' r='2'/%3E%3Ccircle cx='104' cy='58' r='6'/%3E%3C/g%3E%3Cpath d='M10 106l6-6 6 6 6-6 6 6' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.bgx-memphis-pattern-tile > i:nth-child(4) {
  background: oklch(from var(--c) 0.28 0.06 h);
  --shapes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M40 18v12M34 24h12M110 100v10M105 105h10M70 76l8-8M76 80l8-8M82 84l8-8'/%3E%3Ccircle cx='28' cy='58' r='4'/%3E%3C/g%3E%3C/svg%3E");
}
@keyframes bgx-memphis-pattern-drift {
  to { transform: translate(var(--tile), var(--tile)); }
}

.bgx-low-poly-triangles {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  --tw: 18em;
  --th: 5.196em;
  background: color-mix(in srgb, var(--c) 30%, #080a10);
}
.bgx-low-poly-triangles span {
  position: absolute;
  inset: 0;
  -webkit-mask: var(--facets) 0 0 / var(--tw) var(--th);
  mask: var(--facets) 0 0 / var(--tw) var(--th);
}
.bgx-low-poly-triangles span:nth-child(1) {
  background: color-mix(in srgb, var(--c) 70%, transparent);
  --facets: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 34.64' preserveAspectRatio='none'%3E%3Cpath d='M0 17.32L20 17.32L10 0Z' fill-opacity='0.12'/%3E%3Cpath d='M20 17.32L40 17.32L30 0Z' fill-opacity='0.51'/%3E%3Cpath d='M40 17.32L60 17.32L50 0Z' fill-opacity='0.39'/%3E%3Cpath d='M60 17.32L80 17.32L70 0Z' fill-opacity='0.16'/%3E%3Cpath d='M80 17.32L100 17.32L90 0Z' fill-opacity='0.88'/%3E%3Cpath d='M100 17.32L120 17.32L110 0Z' fill-opacity='0.48'/%3E%3Cpath d='M-10 0L10 0L0 17.32Z' fill-opacity='0.58'/%3E%3Cpath d='M110 0L130 0L120 17.32Z' fill-opacity='0.58'/%3E%3Cpath d='M10 0L30 0L20 17.32Z' fill-opacity='0.53'/%3E%3Cpath d='M30 0L50 0L40 17.32Z' fill-opacity='0.54'/%3E%3Cpath d='M50 0L70 0L60 17.32Z' fill-opacity='0.37'/%3E%3Cpath d='M70 0L90 0L80 17.32Z' fill-opacity='0.31'/%3E%3Cpath d='M90 0L110 0L100 17.32Z' fill-opacity='0.75'/%3E%3Cpath d='M-10 34.64L10 34.64L0 17.32Z' fill-opacity='0.24'/%3E%3Cpath d='M110 34.64L130 34.64L120 17.32Z' fill-opacity='0.24'/%3E%3Cpath d='M10 34.64L30 34.64L20 17.32Z' fill-opacity='0.45'/%3E%3Cpath d='M30 34.64L50 34.64L40 17.32Z' fill-opacity='0.64'/%3E%3Cpath d='M50 34.64L70 34.64L60 17.32Z' fill-opacity='0.85'/%3E%3Cpath d='M70 34.64L90 34.64L80 17.32Z' fill-opacity='0.46'/%3E%3Cpath d='M90 34.64L110 34.64L100 17.32Z' fill-opacity='0.19'/%3E%3Cpath d='M0 17.32L20 17.32L10 34.64Z' fill-opacity='0.31'/%3E%3Cpath d='M20 17.32L40 17.32L30 34.64Z' fill-opacity='0.77'/%3E%3Cpath d='M40 17.32L60 17.32L50 34.64Z' fill-opacity='0.64'/%3E%3Cpath d='M60 17.32L80 17.32L70 34.64Z' fill-opacity='0.61'/%3E%3Cpath d='M80 17.32L100 17.32L90 34.64Z' fill-opacity='0.54'/%3E%3Cpath d='M100 17.32L120 17.32L110 34.64Z' fill-opacity='0.33'/%3E%3C/svg%3E");
}
.bgx-low-poly-triangles span:nth-child(2),
.bgx-low-poly-triangles span:nth-child(3) {
  background: color-mix(in srgb, var(--c) 55%, #fff);
  opacity: 0;
  animation: bgx-low-poly-triangles-glint 5s ease-in-out infinite;
}
.bgx-low-poly-triangles span:nth-child(2) {
  --facets: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 34.64' preserveAspectRatio='none'%3E%3Cpath d='M0 17.32L20 17.32L10 0Z' fill-opacity='0.12'/%3E%3Cpath d='M20 17.32L40 17.32L30 0Z' fill-opacity='0.84'/%3E%3Cpath d='M40 17.32L60 17.32L50 0Z' fill-opacity='0.92'/%3E%3Cpath d='M60 17.32L80 17.32L70 0Z' fill-opacity='0.38'/%3E%3Cpath d='M80 17.32L100 17.32L90 0Z' fill-opacity='0.52'/%3E%3Cpath d='M100 17.32L120 17.32L110 0Z' fill-opacity='0.43'/%3E%3Cpath d='M-10 0L10 0L0 17.32Z' fill-opacity='0.44'/%3E%3Cpath d='M110 0L130 0L120 17.32Z' fill-opacity='0.44'/%3E%3Cpath d='M10 0L30 0L20 17.32Z' fill-opacity='0.72'/%3E%3Cpath d='M30 0L50 0L40 17.32Z' fill-opacity='0.74'/%3E%3Cpath d='M50 0L70 0L60 17.32Z' fill-opacity='0.21'/%3E%3Cpath d='M70 0L90 0L80 17.32Z' fill-opacity='0.23'/%3E%3Cpath d='M90 0L110 0L100 17.32Z' fill-opacity='0.18'/%3E%3Cpath d='M-10 34.64L10 34.64L0 17.32Z' fill-opacity='0.21'/%3E%3Cpath d='M110 34.64L130 34.64L120 17.32Z' fill-opacity='0.21'/%3E%3Cpath d='M10 34.64L30 34.64L20 17.32Z' fill-opacity='0.12'/%3E%3Cpath d='M30 34.64L50 34.64L40 17.32Z' fill-opacity='0.60'/%3E%3Cpath d='M50 34.64L70 34.64L60 17.32Z' fill-opacity='0.44'/%3E%3Cpath d='M70 34.64L90 34.64L80 17.32Z' fill-opacity='0.53'/%3E%3Cpath d='M90 34.64L110 34.64L100 17.32Z' fill-opacity='0.32'/%3E%3Cpath d='M0 17.32L20 17.32L10 34.64Z' fill-opacity='0.22'/%3E%3Cpath d='M20 17.32L40 17.32L30 34.64Z' fill-opacity='0.95'/%3E%3Cpath d='M40 17.32L60 17.32L50 34.64Z' fill-opacity='0.21'/%3E%3Cpath d='M60 17.32L80 17.32L70 34.64Z' fill-opacity='0.93'/%3E%3Cpath d='M80 17.32L100 17.32L90 34.64Z' fill-opacity='0.19'/%3E%3Cpath d='M100 17.32L120 17.32L110 34.64Z' fill-opacity='0.98'/%3E%3C/svg%3E");
}
.bgx-low-poly-triangles span:nth-child(3) {
  --facets: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 34.64' preserveAspectRatio='none'%3E%3Cpath d='M0 17.32L20 17.32L10 0Z' fill-opacity='0.12'/%3E%3Cpath d='M20 17.32L40 17.32L30 0Z' fill-opacity='0.28'/%3E%3Cpath d='M40 17.32L60 17.32L50 0Z' fill-opacity='0.57'/%3E%3Cpath d='M60 17.32L80 17.32L70 0Z' fill-opacity='0.61'/%3E%3Cpath d='M80 17.32L100 17.32L90 0Z' fill-opacity='0.16'/%3E%3Cpath d='M100 17.32L120 17.32L110 0Z' fill-opacity='0.38'/%3E%3Cpath d='M-10 0L10 0L0 17.32Z' fill-opacity='0.31'/%3E%3Cpath d='M110 0L130 0L120 17.32Z' fill-opacity='0.31'/%3E%3Cpath d='M10 0L30 0L20 17.32Z' fill-opacity='0.92'/%3E%3Cpath d='M30 0L50 0L40 17.32Z' fill-opacity='0.94'/%3E%3Cpath d='M50 0L70 0L60 17.32Z' fill-opacity='0.94'/%3E%3Cpath d='M70 0L90 0L80 17.32Z' fill-opacity='0.14'/%3E%3Cpath d='M90 0L110 0L100 17.32Z' fill-opacity='0.48'/%3E%3Cpath d='M-10 34.64L10 34.64L0 17.32Z' fill-opacity='0.17'/%3E%3Cpath d='M110 34.64L130 34.64L120 17.32Z' fill-opacity='0.17'/%3E%3Cpath d='M10 34.64L30 34.64L20 17.32Z' fill-opacity='0.67'/%3E%3Cpath d='M30 34.64L50 34.64L40 17.32Z' fill-opacity='0.57'/%3E%3Cpath d='M50 34.64L70 34.64L60 17.32Z' fill-opacity='0.91'/%3E%3Cpath d='M70 34.64L90 34.64L80 17.32Z' fill-opacity='0.60'/%3E%3Cpath d='M90 34.64L110 34.64L100 17.32Z' fill-opacity='0.44'/%3E%3Cpath d='M0 17.32L20 17.32L10 34.64Z' fill-opacity='0.14'/%3E%3Cpath d='M20 17.32L40 17.32L30 34.64Z' fill-opacity='0.24'/%3E%3Cpath d='M40 17.32L60 17.32L50 34.64Z' fill-opacity='0.67'/%3E%3Cpath d='M60 17.32L80 17.32L70 34.64Z' fill-opacity='0.36'/%3E%3Cpath d='M80 17.32L100 17.32L90 34.64Z' fill-opacity='0.72'/%3E%3Cpath d='M100 17.32L120 17.32L110 34.64Z' fill-opacity='0.76'/%3E%3C/svg%3E");
  animation-delay: -2.5s;
}
@keyframes bgx-low-poly-triangles-glint {
  0%, 100% { opacity: 0; }
  50%      { opacity: 0.75; }
}

.bgx-moire-pattern {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  --orbit: 2.2em;
  container-type: size;
  background: color-mix(in srgb, var(--c) 5%, #fff);
}
.bgx-moire-pattern::before,
.bgx-moire-pattern::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(150cqmax + var(--orbit) * 3);
  height: calc(150cqmax + var(--orbit) * 3);
  margin: calc(-75cqmax - var(--orbit) * 1.5) 0 0 calc(-75cqmax - var(--orbit) * 1.5);
  background: repeating-radial-gradient(circle, color-mix(in srgb, var(--c) 80%, transparent) 0 0.16em, transparent 0.2em 0.6em);
}
.bgx-moire-pattern::after {
  transform-origin: calc(50% + var(--orbit)) 50%;
  animation: bgx-moire-pattern-orbit 14s linear infinite;
}
@keyframes bgx-moire-pattern-orbit {
  to { transform: rotate(1turn); }
}

.bgx-tartan-plaid {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  --repeat: 8em;
  --bands:
    transparent 0 1em,
    color-mix(in srgb, var(--c) 45%, transparent) 1em 3em,
    transparent 3em 3.4em,
    color-mix(in srgb, var(--c) 40%, #1a1a2e) 3.4em 4.4em,
    transparent 4.4em 5.2em,
    color-mix(in srgb, oklch(from var(--c) 0.85 0.14 calc(h + 190)) 70%, transparent) 5.2em 5.45em,
    transparent 5.45em var(--repeat);
  background: color-mix(in srgb, var(--c) 10%, #f7f3ea);
}
.bgx-tartan-plaid span {
  position: absolute;
  inset: calc(var(--repeat) * -1);
  mix-blend-mode: multiply;
}
.bgx-tartan-plaid-warp {
  background: repeating-linear-gradient(90deg, var(--bands));
  animation: bgx-tartan-plaid-warp 12s linear infinite;
}
.bgx-tartan-plaid-weft {
  background:
    repeating-linear-gradient(45deg, rgb(0 0 0 / 0.07) 0 1px, transparent 1px 0.3em),
    repeating-linear-gradient(0deg, var(--bands));
  animation: bgx-tartan-plaid-weft 16s linear infinite;
}
@keyframes bgx-tartan-plaid-warp {
  to { transform: translateX(var(--repeat)); }
}
@keyframes bgx-tartan-plaid-weft {
  to { transform: translateY(var(--repeat)); }
}

.bgx-data-stream-lines {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  --tw: 30em;
  --th: 6em;
  background: color-mix(in srgb, var(--c) 7%, #04060a);
}
.bgx-data-stream-lines span {
  position: absolute;
  inset: 0 0 0 calc(var(--tw) * -1);
  -webkit-mask: var(--rows) 0 var(--y) / var(--tw) var(--th);
  mask: var(--rows) 0 var(--y) / var(--tw) var(--th);
  animation: bgx-data-stream-lines-flow var(--t) linear infinite;
}
.bgx-data-stream-lines-far {
  --rows: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'%3E%3Cpath d='M0.0 5.3h54.9v1.4h-54.9zM74.4 5.3h6.7v1.4h-6.7zM118.3 5.3h21.0v1.4h-21.0zM160.5 5.3h37.9v1.4h-37.9zM236.6 5.3h21.7v1.4h-21.7zM19.1 17.3h44.0v1.4h-44.0zM80.8 17.3h12.4v1.4h-12.4zM129.5 17.3h33.2v1.4h-33.2zM172.9 17.3h32.1v1.4h-32.1zM231.7 17.3h55.0v1.4h-55.0zM3.7 29.3h19.8v1.4h-19.8zM68.4 29.3h32.4v1.4h-32.4zM134.6 29.3h24.0v1.4h-24.0zM203.1 29.3h53.5v1.4h-53.5zM279.5 29.3h10.7v1.4h-10.7zM10.0 41.3h5.4v1.4h-5.4zM35.3 41.3h15.0v1.4h-15.0zM70.1 41.3h56.7v1.4h-56.7zM157.1 41.3h35.9v1.4h-35.9zM236.1 41.3h4.2v1.4h-4.2zM259.3 41.3h22.9v1.4h-22.9zM12.6 53.3h6.2v1.4h-6.2zM63.2 53.3h4.2v1.4h-4.2zM90.0 53.3h11.1v1.4h-11.1zM135.7 53.3h55.3v1.4h-55.3zM219.6 53.3h5.6v1.4h-5.6zM249.4 53.3h8.8v1.4h-8.8zM280.8 53.3h14.8v1.4h-14.8z'/%3E%3C/svg%3E");
  --y: 0.6em;
  --t: 11s;
  background: color-mix(in srgb, var(--c) 40%, transparent);
}
.bgx-data-stream-lines-near {
  --rows: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'%3E%3Cpath d='M0.0 5.3h4.0v1.4h-4.0zM27.2 5.3h22.1v1.4h-22.1zM67.4 5.3h4.1v1.4h-4.1zM82.8 5.3h26.6v1.4h-26.6zM142.4 5.3h18.9v1.4h-18.9zM202.0 5.3h57.8v1.4h-57.8zM272.3 5.3h27.7v1.4h-27.7zM5.5 17.3h15.4v1.4h-15.4zM36.0 17.3h44.2v1.4h-44.2zM109.7 17.3h25.8v1.4h-25.8zM175.3 17.3h21.9v1.4h-21.9zM221.2 17.3h16.8v1.4h-16.8zM250.8 17.3h4.8v1.4h-4.8zM265.2 17.3h23.4v1.4h-23.4zM28.1 29.3h20.9v1.4h-20.9zM58.5 29.3h4.5v1.4h-4.5zM108.2 29.3h22.1v1.4h-22.1zM160.3 29.3h13.5v1.4h-13.5zM213.5 29.3h13.7v1.4h-13.7zM262.5 29.3h25.5v1.4h-25.5zM9.8 41.3h62.2v1.4h-62.2zM106.9 41.3h20.7v1.4h-20.7zM149.5 41.3h8.4v1.4h-8.4zM167.5 41.3h27.8v1.4h-27.8zM242.8 41.3h17.2v1.4h-17.2zM280.9 41.3h8.2v1.4h-8.2zM5.7 53.3h29.0v1.4h-29.0zM79.2 53.3h13.3v1.4h-13.3zM132.8 53.3h25.9v1.4h-25.9zM201.6 53.3h10.8v1.4h-10.8zM248.2 53.3h11.8v1.4h-11.8zM272.9 53.3h4.5v1.4h-4.5z'/%3E%3C/svg%3E");
  --y: 0;
  --t: 6s;
  background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 50%, #fff) 50%, var(--c));
}
.bgx-data-stream-lines::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 7%, #04060a), transparent 25% 75%, color-mix(in srgb, var(--c) 7%, #04060a));
}
@keyframes bgx-data-stream-lines-flow {
  to { transform: translateX(var(--tw)); }
}

.bgx-tv-static {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  container-type: size;
  background: #111;
}
.bgx-tv-static-snow {
  position: absolute;
  inset: -20%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' preserveAspectRatio='none'%3E%3Cfilter id='s' x='0' y='0' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix values='3.2 0 0 0 -1.1 3.2 0 0 0 -1.1 3.2 0 0 0 -1.1 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23s)'/%3E%3C/svg%3E") 0 0 / 10em 10em;
  opacity: 0.8;
  animation: bgx-tv-static-snow 0.36s steps(1) infinite;
}
.bgx-tv-static-roll {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 30%;
  background: linear-gradient(transparent, rgb(255 255 255 / 0.12) 45%, rgb(255 255 255 / 0.2) 50%, transparent);
  animation: bgx-tv-static-roll 3.2s linear infinite;
}
.bgx-tv-static::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(transparent 0 0.12em, rgb(0 0 0 / 0.3) 0.12em 0.25em),
    radial-gradient(ellipse at 50% 50%, transparent 50%, rgb(0 0 0 / 0.75)),
    color-mix(in srgb, var(--c) 45%, #fff);
  mix-blend-mode: multiply;
}
@keyframes bgx-tv-static-snow {
  0%   { transform: translate(0, 0); }
  17%  { transform: translate(-6%, 4%); }
  33%  { transform: translate(5%, -7%); }
  50%  { transform: translate(-3%, -4%); }
  67%  { transform: translate(7%, 6%); }
  83%  { transform: translate(-7%, 1%); }
}
@keyframes bgx-tv-static-roll {
  from { transform: translateY(-100%); }
  to   { transform: translateY(calc(100cqh + 100%)); }
}

.bgx-blueprint-grid {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  --ink: rgb(255 255 255 / 0.85);
  background:
    linear-gradient(rgb(255 255 255 / 0.2) 1px, transparent 1px) -1px -1px / 5em 5em,
    linear-gradient(90deg, rgb(255 255 255 / 0.2) 1px, transparent 1px) -1px -1px / 5em 5em,
    linear-gradient(rgb(255 255 255 / 0.08) 1px, transparent 1px) -1px -1px / 1em 1em,
    linear-gradient(90deg, rgb(255 255 255 / 0.08) 1px, transparent 1px) -1px -1px / 1em 1em,
    radial-gradient(ellipse at 60% 40%, color-mix(in srgb, var(--c) 70%, #1b3b75), color-mix(in srgb, var(--c) 45%, #07142b));
}
.bgx-blueprint-grid-draft {
  position: absolute;
  top: 50%;
  right: 8%;
  width: 22em;
  height: 12em;
  margin-top: -6em;
  overflow: visible;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.3;
  stroke-linecap: round;
}
.bgx-blueprint-grid-draft path {
  stroke-dasharray: 100 100;
  animation: bgx-blueprint-grid-draw 7s cubic-bezier(0.55, 0.1, 0.35, 1) calc(var(--i) * 0.35s - 2.2s) infinite;
}
.bgx-blueprint-grid-draft .bgx-blueprint-grid-thin {
  stroke-width: 0.7;
  stroke-dasharray: 4 3;
  animation-name: bgx-blueprint-grid-fade;
}
@keyframes bgx-blueprint-grid-draw {
  0%       { stroke-dashoffset: 100; opacity: 1; }
  30%, 82% { stroke-dashoffset: 0; opacity: 1; }
  95%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes bgx-blueprint-grid-fade {
  0%, 10%   { opacity: 0; }
  30%, 82%  { opacity: 0.8; }
  95%, 100% { opacity: 0; }
}

.bgx-wavy-pattern {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20' preserveAspectRatio='none'%3E%3Cpath d='M0 10Q10 3 20 10T40 10' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
  --tw: 3em;
  --th: 1.5em;
  background: color-mix(in srgb, var(--c) 6%, #fff);
}
.bgx-wavy-pattern span {
  position: absolute;
  inset: 0 calc(var(--tw) * -1);
  -webkit-mask: var(--wave) 0 var(--y) / var(--tw) var(--th);
  mask: var(--wave) 0 var(--y) / var(--tw) var(--th);
}
.bgx-wavy-pattern-back {
  --y: calc(var(--th) / 2);
  background: color-mix(in srgb, var(--c) 28%, transparent);
  animation: bgx-wavy-pattern-right 5s linear infinite;
}
.bgx-wavy-pattern-front {
  --y: 0;
  background: color-mix(in srgb, var(--c) 70%, transparent);
  animation: bgx-wavy-pattern-left 3s linear infinite;
}
@keyframes bgx-wavy-pattern-left {
  to { transform: translateX(calc(var(--tw) * -1)); }
}
@keyframes bgx-wavy-pattern-right {
  to { transform: translateX(var(--tw)); }
}

.bgx-hud-rings {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent calc(50% - 0.5px), color-mix(in srgb, var(--c) 18%, transparent) 0 calc(50% + 0.5px), transparent 0),
    linear-gradient(transparent calc(50% - 0.5px), color-mix(in srgb, var(--c) 18%, transparent) 0 calc(50% + 0.5px), transparent 0),
    radial-gradient(circle, color-mix(in srgb, var(--c) 18%, #05070c), color-mix(in srgb, var(--c) 5%, #030407) 70%);
}
.bgx-hud-rings-ring,
.bgx-hud-rings-core {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
}
.bgx-hud-rings-ring {
  width: var(--d);
  height: var(--d);
  margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  border: 0.12em var(--b, solid) color-mix(in srgb, var(--c) 55%, transparent);
  animation: bgx-hud-rings-turn var(--t) linear infinite var(--dir, normal);
}
.bgx-hud-rings .bgx-hud-rings-arcs {
  border-width: 0.2em;
  border-color: var(--c) transparent color-mix(in srgb, var(--c) 60%, #fff) transparent;
}
.bgx-hud-rings .bgx-hud-rings-ticks {
  border: 0;
  background: repeating-conic-gradient(color-mix(in srgb, var(--c) 45%, transparent) 0 1deg, transparent 1deg 6deg);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 0.6em), #000 calc(100% - 0.55em));
  mask: radial-gradient(closest-side, transparent calc(100% - 0.6em), #000 calc(100% - 0.55em));
}
.bgx-hud-rings-core {
  width: 1em;
  height: 1em;
  margin: -0.5em 0 0 -0.5em;
  background: color-mix(in srgb, var(--c) 50%, #fff);
  box-shadow: 0 0 1em var(--c);
  animation: bgx-hud-rings-pulse 2s ease-in-out infinite;
}
@keyframes bgx-hud-rings-turn {
  to { transform: rotate(1turn); }
}
@keyframes bgx-hud-rings-pulse {
  0%, 100% { transform: scale(0.7); opacity: 0.7; }
  50%      { transform: scale(1); opacity: 1; }
}