:root {
  --bg: #0d1018;
  --surface: #161b26;
  --text: #e7e9ee;
  --muted: #9aa3b2;
  --primary: #7c6ff0;
  --border: #232a38;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  padding: 0 20px;
}

main {
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 0 96px;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 30px; line-height: 1.2; margin: 0 0 8px; }
h2 { font-size: 20px; margin: 40px 0 12px; }
p, li { color: var(--text); }
.muted { color: var(--muted); }

.updated { color: var(--muted); font-size: 14px; margin: 0 0 32px; }

ul { padding-left: 22px; }
li { margin: 6px 0; }

.back { display: inline-block; margin-top: 48px; font-size: 14px; }

hr { border: 0; border-top: 1px solid var(--border); margin: 40px 0; }

/* Landing page */
.hero { text-align: center; padding: 96px 0; }
.hero .logo { font-size: 40px; }
.hero h1 { font-size: 36px; margin-top: 16px; }
.hero p { color: var(--muted); font-size: 18px; }
.hero .links { margin-top: 32px; font-size: 15px; }
.hero .links a { margin: 0 12px; }