#bi-neural-banner {
  --foreground: #e1fdff;
  --background: #061832;
  --card: rgba(8, 37, 68, .82);
  --muted-foreground: #a9c4d5;
  --bi-cyan: rgb(41 204 255);
  --bi-led: rgb(91 231 255);
  --bi-ice: rgb(225 253 255);
  position: relative;
  width: 100%;
  height: clamp(320px, 52vw, 430px);
  overflow: hidden;
  color: var(--foreground);
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--bi-cyan) 20%, transparent) 0, transparent 31%),
    radial-gradient(ellipse at 50% 55%, color-mix(in srgb, var(--bi-led) 10%, transparent) 0, transparent 62%);
  isolation: isolate;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
}
#bi-neural-banner .bi-network { position: absolute; inset: 0; width: 100%; height: 100%; }
#bi-neural-banner .bi-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(130px, 22vw, 184px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1px solid color-mix(in srgb, var(--bi-cyan) 54%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 40px color-mix(in srgb, var(--bi-cyan) 25%, transparent), inset 0 0 28px color-mix(in srgb, var(--bi-cyan) 12%, transparent);
}
#bi-neural-banner .bi-core::before,
#bi-neural-banner .bi-core::after {
  position: absolute;
  content: "";
  border-radius: 50%;
  inset: 9%;
  border: 1px solid color-mix(in srgb, var(--foreground) 32%, transparent);
}
#bi-neural-banner .bi-core::after { inset: 19%; border-style: dashed; opacity: .58; }
#bi-neural-banner .bi-orbit { position: absolute; inset: -6%; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--bi-cyan) 48%, transparent); }
#bi-neural-banner .bi-orbit-a { animation: bi-spin 18s linear infinite; }
#bi-neural-banner .bi-orbit-b { inset: 4%; border-style: dotted; animation: bi-spin-reverse 13s linear infinite; }
#bi-neural-banner .bi-chip {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  width: 35%;
  aspect-ratio: 1;
  place-content: center;
  transform: translate(-50%, -50%);
  color: var(--foreground);
  background: color-mix(in srgb, var(--card) 84%, transparent);
  border: 1px solid color-mix(in srgb, var(--bi-cyan) 76%, transparent);
  box-shadow: 0 0 30px color-mix(in srgb, var(--bi-cyan) 36%, transparent), inset 0 0 14px color-mix(in srgb, var(--foreground) 7%, transparent);
  text-align: center;
}
#bi-neural-banner .bi-chip::before,
#bi-neural-banner .bi-chip::after { position: absolute; content: ""; inset: -13%; border: 1px solid color-mix(in srgb, var(--bi-cyan) 34%, transparent); }
#bi-neural-banner .bi-chip::after { inset: -24%; border-style: dotted; }
#bi-neural-banner .bi-chip span { font-size: clamp(30px, 5vw, 47px); font-weight: 500; letter-spacing: -.06em; text-shadow: 0 0 20px color-mix(in srgb, var(--bi-cyan) 72%, transparent); }
#bi-neural-banner .bi-chip small { margin-top: 1px; color: var(--muted-foreground); font-size: 7px; letter-spacing: .13em; }
#bi-neural-banner .bi-node { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--foreground); }
#bi-neural-banner .bi-node-inner {
  display: grid;
  width: clamp(30px, 5vw, 42px);
  aspect-ratio: 1;
  place-content: center;
  border: 1px solid color-mix(in srgb, var(--bi-cyan) 76%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--background) 65%, transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--bi-cyan) 30%, transparent), inset 0 0 12px color-mix(in srgb, var(--bi-cyan) 11%, transparent);
  animation: bi-float 4.8s ease-in-out infinite;
  transition: border-color .25s ease, box-shadow .25s ease, color .25s ease;
}
#bi-neural-banner .bi-node-inner svg { width: 19px; height: 19px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
#bi-neural-banner .bi-node-inner svg text { fill: currentColor; stroke: none; font-size: 8px; font-weight: 500; }
#bi-neural-banner .bi-node.is-near .bi-node-inner { color: var(--bi-led); border-color: color-mix(in srgb, var(--bi-cyan) 96%, transparent); box-shadow: 0 0 30px color-mix(in srgb, var(--bi-cyan) 55%, transparent), inset 0 0 16px color-mix(in srgb, var(--bi-cyan) 18%, transparent); }
#bi-neural-banner .bi-node:nth-of-type(3n) .bi-node-inner { animation-delay: -1.5s; }
#bi-neural-banner .bi-node:nth-of-type(3n + 1) .bi-node-inner { animation-delay: -3s; }
#bi-neural-banner .bi-caption { position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); color: var(--muted-foreground); font-size: 10px; letter-spacing: .22em; white-space: nowrap; }
#bi-neural-banner .bi-caption b { color: var(--bi-cyan); font-weight: 400; }
@keyframes bi-spin { to { transform: rotate(360deg); } }
@keyframes bi-spin-reverse { to { transform: rotate(-360deg); } }
@keyframes bi-float { 0%, 100% { translate: 0 -2px; } 50% { translate: 0 3px; } }
@media (max-width: 520px) {
  #bi-neural-banner {
  --foreground: #e1fdff;
  --background: #061832;
  --card: rgba(8, 37, 68, .82);
  --muted-foreground: #a9c4d5; height: 340px; -webkit-mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent); mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent); }
  #bi-neural-banner .bi-node:nth-of-type(3n) { display: none; }
  #bi-neural-banner .bi-caption { letter-spacing: .12em; }
}
@media (prefers-reduced-motion: reduce) {
  #bi-neural-banner .bi-orbit, #bi-neural-banner .bi-node-inner { animation: none; }
}