:root{
  --bg:#01030b;
  --bg2:#050518;

  --panel:rgba(5,8,28,.78);
  --panel2:rgba(9,11,39,.94);

  --line:rgba(21,208,252,.20);
  --line2:rgba(21,208,252,.60);

  /*
    Legacy variable names are retained so the existing V7/V8
    component CSS remains fully compatible.
  */
  --green:#15d0fc;
  --green2:#0463f7;
  --cyan:#d919f7;

  --blue:#0463f7;
  --electric-blue:#081dde;
  --purple:#6c0aea;
  --violet:#8c4dff;
  --magenta:#d919f7;

  --amber:#ffc968;
  --red:#ff5d8f;

  --text:#f3f1ff;
  --muted:#9699bd;

  --mono:"Cascadia Code","JetBrains Mono",Consolas,monospace;
  --sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  min-width:320px;
  min-height:100vh;
  overflow-x:hidden;

  color:var(--text);
  font-family:var(--sans);

  background:
    radial-gradient(
      circle at 50% -10%,
      rgba(108,10,234,.28),
      transparent 34%
    ),
    radial-gradient(
      circle at 84% 20%,
      rgba(21,208,252,.13),
      transparent 28%
    ),
    radial-gradient(
      circle at 8% 58%,
      rgba(217,25,247,.10),
      transparent 31%
    ),
    linear-gradient(
      180deg,
      #01030b 0%,
      #040619 48%,
      #010207 100%
    );
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input,
select,
textarea{
  font:inherit;
}

.app-shell{
  width:min(1720px,calc(100% - 28px));
  margin:14px auto 70px;
}

.spacefield{
  position:fixed;
  inset:0;
  z-index:-3;
  pointer-events:none;
  opacity:.32;

  background-image:
    radial-gradient(
      circle,
      rgba(255,255,255,.85) 0 1px,
      transparent 1.6px
    ),
    radial-gradient(
      circle,
      rgba(21,208,252,.70) 0 1px,
      transparent 1.6px
    ),
    radial-gradient(
      circle,
      rgba(217,25,247,.44) 0 1px,
      transparent 1.5px
    );

  background-size:
    160px 160px,
    260px 260px,
    360px 360px;

  animation:spaceDrift 120s linear infinite;
}

.scanlines{
  position:fixed;
  inset:0;
  z-index:1000;
  pointer-events:none;
  opacity:.16;

  background:
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,.025) 0 1px,
      transparent 1px 4px
    );
}

@keyframes spaceDrift{
  to{
    background-position:
      -260px 180px,
      -120px 260px,
      180px -160px;
  }
}

h1,
h2,
h3,
p{
  margin-top:0;
}

.mono{
  font-family:var(--mono);
}

.eyebrow{
  font:700 11px var(--mono);
  letter-spacing:.22em;
  color:var(--green);
  text-transform:uppercase;
  text-shadow:0 0 14px rgba(21,208,252,.22);
}

.muted{
  color:var(--muted);
}