:root{--bg-1:#070b17;--bg-2:#0b1224;--a1:#0ea5e9;--a2:#6366f1;--a3:#0b92c5;--glow:#0ea5e944}
html{color-scheme:dark}
body{
  margin:0;
  background:
    radial-gradient(1100px 700px at 12% -8%, var(--a1) 0%, transparent 55%),
    radial-gradient(900px 560px at 90% 0%, var(--a2) 0%, transparent 55%),
    radial-gradient(1200px 800px at 50% -20%, color-mix(in oklab, var(--a3) 30%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-1), var(--bg-2));
  background-attachment: scroll, scroll, scroll, fixed;
  color: #e6eaf3;
}
body::before{
  content:"";
  position:fixed; inset:-10vh -10vw;
  pointer-events:none;
  background:
    radial-gradient(35vmax 22vmax at 70% 15%, var(--glow) 0%, transparent 60%),
    radial-gradient(26vmax 18vmax at 25% 8%, var(--glow) 0%, transparent 70%);
  filter: blur(40px);
  opacity:.55;
  z-index:-1;
}
body::after{
  content:"";
  position:fixed; inset:-5vh -5vw;
  pointer-events:none;
  background:
    repeating-conic-gradient(from 0deg, #ffffff08 0 2deg, transparent 2deg 4deg),
    repeating-linear-gradient(0deg, #ffffff06 0 1px, transparent 1px 2px);
  mix-blend-mode: soft-light;
  opacity:.08;
  animation: bg-noise 14s linear infinite;
  z-index:-1;
}
@keyframes bg-pan{to{background-position: 0px 0px, 0px 0px, 0px 0px, 0 0}}
@keyframes bg-noise{0%{transform: translate3d(0,0,0)}100%{transform: translate3d(1px,0,0)}}
@media (prefers-reduced-motion: reduce){
  body::after{animation: none}
}