:root { --ink:#16202c; --muted:#4a5666; --rule:#d9dee5; --bg:#ffffff; --accent:#1c4f8b; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
.wrap { max-width:44rem; margin:0 auto; padding:2.5rem 1rem 4rem; }
header { border-bottom:1px solid var(--rule); padding-bottom:1rem; margin-bottom:2rem; }
.brand { font-size:1.05rem; font-weight:700; letter-spacing:.01em; }
.op { color:var(--muted); font-size:.9rem; margin-top:.15rem; }
h1 { font-size:1.6rem; margin:0 0 .25rem; }
h2 { font-size:1.1rem; margin:2rem 0 .5rem; }
.eff { color:var(--muted); font-size:.92rem; margin:0 0 1.5rem; }
a { color:var(--accent); }
nav { margin-top:2.5rem; padding-top:1rem; border-top:1px solid var(--rule); font-size:.92rem; }
nav a { margin-right:1rem; }
.box { border:1px solid var(--rule); border-left:3px solid var(--accent); padding:.9rem 1rem; margin:1.25rem 0; }
footer { margin-top:2.5rem; color:var(--muted); font-size:.85rem; }
@media (prefers-color-scheme: dark) {
  :root { --ink:#e7ecf2; --muted:#a3adba; --rule:#2c3948; --bg:#101720; --accent:#7fb2ee; }
}
ul { padding-left:1.3rem; }
li { margin:.35rem 0; }
blockquote { margin:1rem 0; padding:.6rem 1rem; border-left:3px solid var(--rule); color:var(--muted); font-style:italic; }