:root{
  --bg:#ffffff; --fg:#1a2332; --muted:#5b6b7f; --rule:#e2e8f0;
  --accent:#2563eb; --card:#f8fafc;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0f172a; --fg:#e2e8f0; --muted:#94a3b8; --rule:#1e293b;
         --accent:#60a5fa; --card:#152133; }
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}
.wrap{max-width:780px; margin:0 auto; padding:48px 16px 80px}
header{border-bottom:1px solid var(--rule); padding-bottom:20px; margin-bottom:34px}
.brand{font-size:15px; font-weight:700; letter-spacing:.2px}
.brand a{color:var(--fg); text-decoration:none}
h1{font-size:28px; line-height:1.25; margin:18px 0 6px}
.meta{color:var(--muted); font-size:13px; margin:0}
h2{font-size:18px; margin:34px 0 10px; padding-top:6px}
h3{font-size:15px; margin:22px 0 6px}
p,li{color:var(--fg)}
ul{padding-left:22px} li{margin:5px 0}
a{color:var(--accent)}
.note{
  background:var(--card); border:1px solid var(--rule); border-radius:10px;
  padding:14px 16px; margin:22px 0; font-size:14.5px; color:var(--muted);
}
.note strong{color:var(--fg)}
footer{
  margin-top:52px; padding-top:20px; border-top:1px solid var(--rule);
  color:var(--muted); font-size:13px;
}
footer a{color:var(--accent)}
code{
  background:var(--card); border:1px solid var(--rule); border-radius:5px;
  padding:1px 5px; font-size:13.5px;
}
@media print{
  :root{--bg:#fff;--fg:#000;--muted:#333;--rule:#bbb;--card:#f4f4f4}
  .wrap{padding:0} a{color:#000}
}