:root { color-scheme: light dark; }

body {
  margin: 0;
  padding: 48px 22px 80px;
  font: 16px/1.75 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  color: #2B2A33;
  background: #FBFBFD;
}

main { max-width: 700px; margin: 0 auto; }

h1 { font-size: 27px; margin: 0 0 6px; letter-spacing: .3px; }

.updated { color: #7A7787; font-size: 14px; margin: 0 0 34px; }

h2 { font-size: 17px; margin: 34px 0 10px; }

p, li { color: #3D3B47; }

ul { padding-left: 20px; }

a { color: #5956D6; }

.card {
  background: #fff;
  border: 1px solid #E8E7EF;
  border-radius: 14px;
  padding: 18px 20px;
  margin: 14px 0;
}

.q { font-weight: 600; margin: 0 0 6px; }

.a { margin: 0; color: #4A4854; }

footer {
  margin-top: 48px;
  padding-top: 18px;
  border-top: 1px solid #E8E7EF;
  color: #7A7787;
  font-size: 13px;
}

footer a { color: #7A7787; }

@media (prefers-color-scheme: dark) {
  body { color: #E9E8F0; background: #16151C; }
  p, li { color: #C9C7D4; }
  .card { background: #1E1D26; border-color: #2E2D39; }
  .a { color: #B9B7C6; }
  .updated { color: #8A8798; }
  footer { border-color: #2E2D39; color: #8A8798; }
  footer a { color: #8A8798; }
  a { color: #9A97F0; }
}