:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #10191b;
  color: #f1eee8;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 2rem;
  background: radial-gradient(ellipse at 20% 25%, #204145 0, transparent 36%), #10191b;
}

main { width: min(100%, 680px); }
.brand { color: inherit; text-decoration: none; font-size: 1.2rem; font-weight: 700; letter-spacing: -.04em; }
.brand span { color: #7ec5af; }
.eyebrow { margin: 5.5rem 0 1.2rem; color: #82c6b1; font-size: .72rem; letter-spacing: .19em; }
h1 { max-width: 620px; margin: 0; font-size: clamp(2.8rem, 9vw, 5.5rem); line-height: .98; letter-spacing: -.065em; }
.intro { max-width: 540px; margin: 1.6rem 0 2rem; color: #b9c5c1; font-size: 1.1rem; line-height: 1.7; }
.back { display: inline-flex; gap: .6rem; align-items: center; border-bottom: 1px solid #7ec5af; padding: .5rem 0; color: #eaf4ef; text-decoration: none; }
.status { display: flex; gap: .6rem; align-items: center; margin-top: 5rem; color: #a7b4b0; font-size: .85rem; }
.status span { width: .55rem; height: .55rem; border-radius: 100%; background: #68c4a7; box-shadow: 0 0 1rem #68c4a7; }

@media (prefers-reduced-motion: no-preference) {
  main { animation: appear .55s ease-out both; }
  @keyframes appear { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
}
