:root {
  --bg-top: #0b1324; --bg-bottom: #16233f; --ink: #e8eef9; --muted: #8fa1c2; --accent: #f2b544;
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  display: grid; grid-template-rows: 1fr auto; min-height: 100%;
  background: radial-gradient(120% 80% at 50% 0%, var(--bg-bottom), var(--bg-top));
  color: var(--ink);
  font: 16px/1.5 ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
main { place-self: center; text-align: center; padding: 2rem; }
.mark { width: 7rem; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; opacity: .9;
  animation: drift 7s ease-in-out infinite; }
h1 { font-size: clamp(2.5rem, 8vw, 4.5rem); font-weight: 700; letter-spacing: -.02em; margin-top: .75rem; }
.status { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1rem; padding: .35rem .9rem;
  border: 1px solid #2a3a5c; border-radius: 999px; color: var(--accent); font-weight: 600;
  font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; }
.dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent);
  animation: pulse 2s ease-in-out infinite; }
.note { color: var(--muted); margin-top: 1.25rem; }
footer { text-align: center; padding: 1.5rem; color: #5d6f91; font-size: .8rem; letter-spacing: .06em; }
@keyframes drift { 50% { transform: translateY(-6px); } }
@keyframes pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .mark, .dot { animation: none; } }