:root {
  color-scheme: dark;
  background: #0a0d14;
  color: #eef1f7;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  display: grid;
  min-height: 100dvh;
  padding: 2rem;
  place-items: center;
  overflow: hidden;
}

/* Two soft pools of light drifting slowly behind the page. */
body::before {
  position: fixed;
  z-index: -1;
  inset: -30%;
  background:
    radial-gradient(circle at 38% 42%, rgb(65 104 218 / 0.2), transparent 34%),
    radial-gradient(circle at 64% 60%, rgb(125 91 186 / 0.1), transparent 30%);
  content: "";
  animation: drift 48s ease-in-out infinite alternate;
}

main {
  text-align: center;
  animation: rise 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.mark {
  display: block;
  width: 5rem;
  height: 5rem;
  filter: drop-shadow(0 0.75rem 2.5rem rgb(65 104 218 / 0.35));
}

.mark path {
  stroke-dasharray: 1;
  animation: draw 1.6s 0.25s cubic-bezier(0.6, 0, 0.2, 1) both;
}

h1 {
  font-size: clamp(1.5rem, 4vw, 1.875rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}

p {
  margin-top: 0.625rem;
  color: #97a1b6;
}

a {
  color: #c6cede;
  text-underline-offset: 0.25em;
}

a:hover {
  color: #fff;
}

@keyframes drift {
  from { transform: translate3d(-5%, -3%, 0) rotate(-4deg); }
  to { transform: translate3d(5%, 4%, 0) rotate(5deg); }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(0.5rem); }
}

@keyframes draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  main,
  .mark path {
    animation: none;
  }
}