:root { --bg: #ffffff; --fg: #1d1d1f; --muted: #6e6e73; --mark-bg: #f5f5f7; --mark-fg: #6e6e73; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #000000; --fg: #f5f5f7; --muted: #a1a1a6; --mark-bg: #1c1c1e; --mark-fg: #f5f5f7; }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  display: grid; place-items: center; padding: 0 16px;
}
main { text-align: center; }
.mark {
  width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 16px;
  background: var(--mark-bg); color: var(--mark-fg);
  display: grid; place-items: center; font-size: 32px; font-weight: 600;
}
h1 { font-size: 28px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 8px; }
p { color: var(--muted); font-size: 17px; margin: 0; }