:root { color-scheme: light dark; --ink: #1d1d1f; --soft: #5b5b60; --paper: #fbfbf8; --line: #dedcd5;
  --accent: #2f5d8a; }
@media (prefers-color-scheme: dark) { :root { --ink: #ececea; --soft: #a9a9a4; --paper: #18181a;
  --line: #34343a; --accent: #8db4dc; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); line-height: 1.5;
  font: 17px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width: 34rem; margin: 0 auto; padding: 3rem 1rem; }
h1 { font-size: 1.6rem; margin: 0 0 .5rem; }
p, li { color: var(--soft); }
.lead { color: var(--ink); font-size: 1.1rem; }
a, button { color: var(--accent); }
.button { display: inline-block; margin: .5rem .75rem .5rem 0; padding: .7rem 1.2rem; min-height: 44px;
  border: 1px solid var(--accent); border-radius: 10px; background: none; font: inherit; text-decoration: none;
  cursor: pointer; }
.button.primary { background: var(--accent); color: var(--paper); }
ol { padding-left: 1.3rem; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }