:root {
  --text: #eef4ff;
  --muted: #8fa0c4;
  --glass: rgba(12, 18, 36, 0.58);
  --stroke: rgba(255, 255, 255, 0.12);
  --glow: rgba(86, 196, 255, 0.38);
  --bg: #040711;
  --radius: 18px;
  --radius-sm: 12px;
  --mx: 50%;
  --my: 18%;
}
* {
  box-sizing: border-box;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
*::-webkit-scrollbar { display: none; }
html, body { min-height: 100%; }
html { background: var(--bg); }
body {
  margin: 0;
  color: var(--text);
  font: 15px/1.45 "Segoe UI Variable", "Segoe UI", "Microsoft YaHei UI", sans-serif;
  background: transparent;
  overflow-x: hidden;
}
header, .layout { position: relative; z-index: 2; }
.aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(900px 520px at 8% -8%, rgba(56, 189, 248, 0.42), transparent 58%),
    radial-gradient(720px 480px at 92% 6%, rgba(168, 85, 247, 0.38), transparent 52%),
    radial-gradient(780px 520px at 70% 108%, rgba(34, 211, 238, 0.22), transparent 52%),
    linear-gradient(180deg, #07101f, #050814 42%, #03050c);
}
.aurora::before,
.aurora::after {
  content: "";
  position: absolute;
  inset: -10%;
  pointer-events: none;
}
.aurora::before {
  background:
    radial-gradient(42vmax 28vmax at 18% 22%, rgba(59, 130, 246, 0.22), transparent 62%),
    radial-gradient(36vmax 24vmax at 82% 18%, rgba(217, 70, 239, 0.16), transparent 64%),
    radial-gradient(30vmax 22vmax at 58% 78%, rgba(45, 212, 191, 0.12), transparent 66%);
  animation: drift 10s ease-in-out infinite alternate;
}
.aurora::after {
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 50% 28%, #000 18%, transparent 72%);
  opacity: 0.7;
}