:root {
  color-scheme: light dark;
  --page: #eef4f7;
  --card: #ffffff;
  --ink: #152b39;
  --muted: #506b7a;
  --accent: #0d628d;
  --line: #c4d5de;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 17px/1.6 Arial, Helvetica, sans-serif;
}
main {
  width: min(920px, calc(100% - 32px));
  margin: 32px auto;
  padding: clamp(24px, 5vw, 42px);
  background: var(--card);
  border-radius: 14px;
  box-shadow: 0 8px 28px #16344924;
}
h1, h2 { color: var(--accent); line-height: 1.2; }
h1 { margin-top: 0; }
h2 { margin-top: 1.7em; }
a { color: var(--accent); }
li { margin: 0.4em 0; }
.meta { color: var(--muted); }
footer {
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.94em;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #0d1d2a;
    --card: #10283a;
    --ink: #f3f7fa;
    --muted: #a9bbc7;
    --accent: #88cfef;
    --line: #31546f;
  }
  main { box-shadow: none; }
}