:root {
  color-scheme: dark;
  --bg: #050608;
  --fg: #cfd7df;
  --muted: #8b97a5;
  --mx: 50vw;
  --my: 50vh;
  font-family: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(80rem 50rem at 80% -10%, #0e121b 0%, transparent 55%),
    radial-gradient(70rem 45rem at -10% 110%, #0a0f16 0%, transparent 60%),
    var(--bg);
  color: var(--fg);
  letter-spacing: 0.01em;
}

main {
  position: relative;
  z-index: 2;
  padding: 2rem;
  text-align: center;
}

.line {
  margin: 0;
  color: var(--fg);
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  opacity: 0.9;
}

footer {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 2;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1;
}

.ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(18rem 18rem at var(--mx) var(--my), rgba(138, 170, 210, 0.08), transparent 68%),
    radial-gradient(28rem 28rem at var(--mx) var(--my), rgba(110, 128, 154, 0.05), transparent 74%);
  transition: background-position 200ms linear;
  z-index: 1;
}

.grain {
  position: fixed;
  inset: -50%;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.045) 0.5px, transparent 0.6px);
  background-size: 3px 3px;
  opacity: 0.09;
  animation: drift 24s linear infinite;
  z-index: 0;
}

@keyframes drift {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(7%, -7%, 0);
  }
}