body {
  position: relative;
  background: radial-gradient(circle at 20% 10%, #111723 0%, #090b10 42%, #060708 100%);
}

body.bg-gif {
  background-image: linear-gradient(rgba(5, 7, 10, 0.76), rgba(5, 7, 10, 0.76)), var(--bg-gif);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

body::before {
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.03),
    rgba(255, 255, 255, 0.03) 1px,
    transparent 1px,
    transparent 4px
  );
  opacity: 0.14;
}

body::after {
  background-image:
    radial-gradient(circle at 14% 21%, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px),
    radial-gradient(circle at 80% 72%, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px);
  background-size: 160px 160px, 190px 190px;
  mix-blend-mode: soft-light;
  opacity: 0.12;
  animation: grainShift 18s steps(10) infinite;
}

.site-mark {
  text-shadow: 0 0 12px rgba(151, 211, 255, 0.22);
  animation: markFlicker 11s ease-in-out infinite;
}

.card,
.category-block,
.gateway-panel {
  box-shadow: 0 0 0 1px rgba(160, 209, 255, 0.02), 0 12px 42px rgba(0, 0, 0, 0.36);
}

.site-header {
  box-shadow: 0 1px 0 rgba(151, 211, 255, 0.06);
}

.btn,
.site-nav a,
.card {
  transition: border-color 200ms ease, background-color 200ms ease, transform 180ms ease;
}

.btn:hover,
.btn:focus-visible,
.site-nav a:hover,
.site-nav a:focus-visible,
.card:hover {
  border-color: #3d5d80;
  background-color: rgba(151, 211, 255, 0.14);
}

.card:hover {
  transform: translateY(-2px);
}

.scan-beam {
  box-shadow: 0 0 12px rgba(151, 211, 255, 0.17);
  animation: beamJitter 16s linear infinite;
}

body.ui-flat .btn:hover,
body.ui-flat .btn:focus-visible,
body.ui-flat .site-nav a:hover,
body.ui-flat .site-nav a:focus-visible,
body.ui-flat .card:hover {
  background-color: transparent;
}

@keyframes grainShift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-1%, 1%); }
  50% { transform: translate(1%, -1%); }
  75% { transform: translate(0.5%, 0.6%); }
  100% { transform: translate(0, 0); }
}

@keyframes markFlicker {
  0%, 100% { opacity: 0.95; }
  48% { opacity: 0.95; }
  50% { opacity: 0.86; }
  53% { opacity: 0.93; }
}

@keyframes beamJitter {
  0%, 98%, 100% { transform: translateX(0); }
  99% { transform: translateX(0.8px); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  body::after {
    transform: none;
  }
}

/* Left-align specific lede instances */
.lede.lede--left {
  text-align: left;
}

/* Right-align specific lede instances */
.lede.lede--right {
  text-align: right;
}