:root {
  --navy: #1a1a2e;
  --navy-700: #2e2250;
  --purple: #4f2a8c;
  --purple-50: #f3eeff;
  --orange: #ec6333;
  --ink: #1a1a2e;
  --ink-soft: #4a4a5e;
  --line: #e4e0ef;
  --page: #fbfaff;
  --card: #ffffff;
  --link: #4f2a8c;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f0f0fc;
    --ink-soft: #b9b6cc;
    --line: #2e2a44;
    --page: #121220;
    --card: #1a1a2e;
    --purple-50: #241b3d;
    --link: #ceb1ff;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

a { color: var(--link); }

.site-header {
  background: linear-gradient(135deg, var(--navy), var(--navy-700));
  padding: 20px 16px;
}

.site-header .inner,
main,
.site-footer .inner {
  max-width: 760px;
  margin: 0 auto;
}

.site-header a.brand { display: inline-block; line-height: 0; }
.site-header img { height: 44px; width: auto; }

main { padding: 32px 16px 48px; }

h1 { font-size: 2rem; line-height: 1.2; margin: 0 0 8px; }
h2 { font-size: 1.25rem; margin: 36px 0 8px; }
h3 { font-size: 1.05rem; margin: 24px 0 4px; }

.lede { color: var(--ink-soft); font-size: 1.1rem; margin: 0 0 24px; }
.meta { color: var(--ink-soft); font-size: 0.9rem; }

.note {
  background: var(--purple-50);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 20px 0;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 4px 20px;
  margin: 16px 0;
}

ul, ol { padding-left: 1.3em; }
li { margin: 4px 0; }

.pages { list-style: none; padding: 0; }
.pages li { margin: 10px 0; }
.pages a { font-weight: 600; }

.site-footer {
  border-top: 1px solid var(--line);
  padding: 24px 16px 40px;
  color: var(--ink-soft);
  font-size: 0.9rem;
}
.site-footer nav a { margin-right: 16px; }

@media (max-width: 480px) {
  body { font-size: 16px; }
  h1 { font-size: 1.6rem; }
}