body::before{
  content:'';position:fixed;inset:-25%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(36% 36% at 16% 20%, rgba(124, 92, 255, .26), transparent 70%),
    radial-gradient(32% 32% at 84% 16%, rgba( 56, 189, 248, .18), transparent 70%),
    radial-gradient(38% 38% at 74% 84%, rgba(236,  72, 153, .15), transparent 72%),
    radial-gradient(30% 30% at 24% 80%, rgba( 45, 212, 191, .12), transparent 70%);
  filter:blur(60px) saturate(1.06);
  animation:smAurora 34s ease-in-out infinite alternate;
}

body::after{
  content:'';position:fixed;inset:-25%;z-index:-1;pointer-events:none;opacity:.7;
  background:
    radial-gradient(28% 28% at 62% 30%, rgba(99, 102, 241, .16), transparent 72%),
    radial-gradient(26% 26% at 30% 62%, rgba(168,  85, 247, .13), transparent 72%);
  filter:blur(70px);
  animation:smAurora2 46s ease-in-out infinite alternate;
}
@keyframes smAurora{
  0%  {transform:translate3d(0,0,0) scale(1)}
  50% {transform:translate3d(-2.5%,1.8%,0) scale(1.07)}
  100%{transform:translate3d(2.2%,-1.4%,0) scale(1.03)}
}
@keyframes smAurora2{
  0%  {transform:translate3d(1.5%,-1%,0) scale(1.04)}
  100%{transform:translate3d(-1.8%,1.6%,0) scale(1)}
}

html[data-sm-theme="light"] body::before{
  background:
    radial-gradient(36% 36% at 16% 20%, rgba(124, 92, 255, .16), transparent 70%),
    radial-gradient(32% 32% at 84% 16%, rgba( 56, 189, 248, .13), transparent 70%),
    radial-gradient(38% 38% at 74% 84%, rgba(236,  72, 153, .10), transparent 72%),
    radial-gradient(30% 30% at 24% 80%, rgba( 45, 212, 191, .09), transparent 70%);
}
html[data-sm-theme="light"] body::after{opacity:.5}
@media (prefers-reduced-motion:reduce){
  body::before,body::after{animation:none}
}

@media (max-width:700px){
  body::before{filter:blur(48px);animation:none}
  body::after{display:none}
}


html.sr-on .sr{
  opacity:0;transform:translateY(26px);
  transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--sr-d,0s);will-change:opacity,transform}
html.sr-on .sr.sr-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.sr-on .sr{opacity:1;transform:none;transition:none}
}


html::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  opacity:.042;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
  background-size:220px 220px;
  animation:smGrain 7s steps(6) infinite;
}

@keyframes smGrain{
  0%,100%{transform:translate3d(0,0,0)}
  20%{transform:translate3d(-2%,1%,0)}
  40%{transform:translate3d(1.5%,-1.5%,0)}
  60%{transform:translate3d(-1%,2%,0)}
  80%{transform:translate3d(2%,1.5%,0)}
}
html[data-sm-theme="light"]::after{opacity:.030;mix-blend-mode:multiply}
@media (prefers-reduced-motion:reduce){html::after{animation:none}}
@media (max-width:700px){html::after{opacity:.032;animation:none}}