:root {
  --brand1: #5c76f5;
  --brand2: #8250eb;
  --ink: #1c1c22;
  --muted: #5b5b68;
  --bg: #ffffff;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}
.wrap { max-width: 720px; margin: 0 auto; padding: 48px 24px 80px; }
header.hero { text-align: center; padding-top: 24px; }
.mark {
  display: block;
  width: 72px; height: 72px; border-radius: 18px; margin: 0 auto 16px;
  box-shadow: 0 10px 24px rgba(92, 76, 245, .35);
}
h1 { font-size: 34px; letter-spacing: -.02em; margin: .2em 0 .1em; }
h2 { font-size: 22px; letter-spacing: -.01em; margin: 2em 0 .4em; }
.tagline { color: var(--muted); font-size: 19px; margin-top: 0; }
p, li { color: #2b2b34; }
a { color: var(--brand2); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: var(--muted); font-size: 14px; }
nav { text-align: center; margin-top: 28px; }
nav a { margin: 0 10px; font-weight: 600; }
hr { border: none; border-top: 1px solid #ececef; margin: 40px 0; }
footer { text-align: center; color: var(--muted); font-size: 14px; margin-top: 48px; }
@media (prefers-color-scheme: dark) {
  :root { --ink: #f2f2f5; --muted: #a2a2ad; --bg: #111116; }
  p, li { color: #d6d6de; }
  hr { border-top-color: #26262e; }
}