:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #090b10;
  color: #f4f6fb;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 75% 20%, rgba(94, 92, 230, .22), transparent 32rem),
    radial-gradient(circle at 10% 85%, rgba(31, 163, 163, .14), transparent 28rem),
    #090b10;
}

main {
  width: min(90vw, 720px);
  padding: 4rem 0;
}

.mark {
  width: 3rem;
  height: 3rem;
  margin-bottom: 2rem;
}

.eyebrow {
  margin: 0 0 .75rem;
  color: #9ba5ba;
  font: 600 .78rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
}

h1 {
  max-width: 680px;
  margin: 0;
  font-size: clamp(3rem, 9vw, 6.5rem);
  line-height: .93;
  letter-spacing: -.065em;
}

.lede {
  max-width: 580px;
  margin: 2rem 0;
  color: #adb5c6;
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.65;
}

nav {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 2.5rem 0;
}

nav a {
  display: inline-flex;
  gap: 1rem;
  align-items: center;
  padding: .8rem 1rem;
  border: 1px solid #2a3040;
  border-radius: .65rem;
  color: #e8ebf2;
  text-decoration: none;
  background: rgba(255, 255, 255, .025);
}

nav a:hover {
  border-color: #727de8;
  background: rgba(114, 125, 232, .08);
}

.status {
  display: flex;
  gap: .65rem;
  align-items: center;
  margin-top: 4rem;
  color: #778196;
  font: .78rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.status span {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: #e5b84f;
  box-shadow: 0 0 1rem rgba(229, 184, 79, .6);
}