.ui-chart-bg{
  position:fixed;
  inset:-12vh -12vw;
  z-index:-1;
  pointer-events:none;
  opacity:.65;
  transform:translate3d(0,0,0);
  animation:uiChartFloat 12s ease-in-out infinite;
}

/* Ensure the background can sit behind all content */
body{
  position:relative;
  z-index:0;
}

.ui-chart-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(60% 60% at 10% 20%, rgba(81,202,180,.06), rgba(0,0,0,0) 55%),
    radial-gradient(55% 55% at 85% 70%, rgba(139,98,255,.06), rgba(0,0,0,0) 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.032) 0 1px, rgba(0,0,0,0) 1px 44px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, rgba(0,0,0,0) 1px 70px);
  filter:blur(.35px);
  opacity:.55;
  mix-blend-mode:screen;
}

.ui-chart-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20900%20450%27%3E%3Cg%20fill%3D%27none%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M30%20340%20L115%20310%20L165%20330%20L235%20275%20L305%20295%20L370%20235%20L445%20260%20L510%20215%20L585%20235%20L650%20190%20L725%20210%20L795%20160%20L870%20185%27%20stroke%3D%27%2351CAB4%27%20stroke-opacity%3D%27.18%27%20stroke-width%3D%272.3%27/%3E%3Cpath%20d%3D%27M30%20362%20L115%20335%20L165%20352%20L235%20305%20L305%20328%20L370%20270%20L445%20295%20L510%20260%20L585%20280%20L650%20240%20L725%20255%20L795%20210%20L870%20230%27%20stroke%3D%27%238B62FF%27%20stroke-opacity%3D%27.16%27%20stroke-width%3D%271.9%27/%3E%3C/g%3E%3Cg%20stroke%3D%27%23FFFFFF%27%20stroke-opacity%3D%27.08%27%20stroke-width%3D%271%27%3E%3Cpath%20d%3D%27M120%20270%20V350%27/%3E%3Cpath%20d%3D%27M160%20295%20V365%27/%3E%3Cpath%20d%3D%27M230%20240%20V320%27/%3E%3Cpath%20d%3D%27M300%20255%20V340%27/%3E%3Cpath%20d%3D%27M368%20195%20V280%27/%3E%3Cpath%20d%3D%27M440%20220%20V305%27/%3E%3Cpath%20d%3D%27M510%20175%20V255%27/%3E%3Cpath%20d%3D%27M585%20195%20V275%27/%3E%3Cpath%20d%3D%27M650%20150%20V230%27/%3E%3Cpath%20d%3D%27M725%20170%20V250%27/%3E%3Cpath%20d%3D%27M795%20125%20V210%27/%3E%3Cpath%20d%3D%27M865%20145%20V225%27/%3E%3C/g%3E%3Cg%20fill%3D%27%23FFFFFF%27%20fill-opacity%3D%27.055%27%3E%3Crect%20x%3D%27112%27%20y%3D%27296%27%20width%3D%2716%27%20height%3D%2730%27%20rx%3D%273%27/%3E%3Crect%20x%3D%27152%27%20y%3D%27316%27%20width%3D%2716%27%20height%3D%2726%27%20rx%3D%273%27/%3E%3Crect%20x%3D%27222%27%20y%3D%27262%27%20width%3D%2716%27%20height%3D%2730%27%20rx%3D%273%27/%3E%3Crect%20x%3D%27292%27%20y%3D%27278%27%20width%3D%2716%27%20height%3D%2728%27%20rx%3D%273%27/%3E%3Crect%20x%3D%27360%27%20y%3D%27218%27%20width%3D%2716%27%20height%3D%2730%27%20rx%3D%273%27/%3E%3Crect%20x%3D%27432%27%20y%3D%27238%27%20width%3D%2716%27%20height%3D%2728%27%20rx%3D%273%27/%3E%3Crect%20x%3D%27502%27%20y%3D%27192%27%20width%3D%2716%27%20height%3D%2728%27%20rx%3D%273%27/%3E%3Crect%20x%3D%27577%27%20y%3D%27212%27%20width%3D%2716%27%20height%3D%2728%27%20rx%3D%273%27/%3E%3Crect%20x%3D%27642%27%20y%3D%27168%27%20width%3D%2716%27%20height%3D%2728%27%20rx%3D%273%27/%3E%3Crect%20x%3D%27717%27%20y%3D%27188%27%20width%3D%2716%27%20height%3D%2728%27%20rx%3D%273%27/%3E%3Crect%20x%3D%27787%27%20y%3D%27144%27%20width%3D%2716%27%20height%3D%2728%27%20rx%3D%273%27/%3E%3Crect%20x%3D%27857%27%20y%3D%27162%27%20width%3D%2716%27%20height%3D%2728%27%20rx%3D%273%27/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat;
  background-size:900px 450px;
  background-position:0 0;
  filter:blur(.5px);
  opacity:.6;
  mix-blend-mode:screen;
  animation:uiChartDrift 38s linear infinite, uiChartPulse 9s ease-in-out infinite;
}

@keyframes uiChartFloat{
  0%,100%{transform:translate3d(0,-8px,0)}
  50%{transform:translate3d(0,10px,0)}
}

@keyframes uiChartDrift{
  0%{background-position:0 0}
  100%{background-position:-900px -180px}
}

@keyframes uiChartPulse{
  0%,100%{opacity:.52}
  50%{opacity:.8}
}

@media (prefers-reduced-motion: reduce){
  .ui-chart-bg,
  .ui-chart-bg::after{
    animation:none !important;
  }
}