:root { --ink:#172B4D; --muted:#5E6C84; --green:#1F845A; --line:#DFE1E6; --bg:#FAFBFC; }
* { box-sizing:border-box; scrollbar-width:none; }
*::-webkit-scrollbar { display:none; }
body { margin:0; font:17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color:var(--ink); background:#fff;
  overflow-wrap:break-word; }
header { border-bottom:1px solid var(--line); background:var(--bg); }
.wrap { max-width:820px; margin:0 auto; padding:0 20px; }
nav { display:flex; flex-wrap:wrap; gap:8px 22px; align-items:center; padding:14px 0; }
nav .brand { display:flex; gap:10px; align-items:center; font-weight:700; color:var(--ink); text-decoration:none; margin-right:auto; }
nav .brand img { width:28px; height:28px; }
nav a { color:var(--muted); text-decoration:none; }
nav a:hover { color:var(--green); }
h1 { font-size:2.1em; line-height:1.2; margin:1.2em 0 .3em; }
h2 { margin-top:1.8em; font-size:1.35em; }
.lead { font-size:1.15em; color:var(--muted); }
code { background:#F4F5F7; padding:1px 5px; border-radius:4px; font-size:.92em; }
.loop { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin:1.2em 0; padding:0; list-style:none; counter-reset:s; }
.loop li { border:1px solid var(--line); border-radius:10px; padding:14px; background:var(--bg); counter-increment:s; }
.loop li::before { content:counter(s); display:inline-block; width:26px; height:26px; border-radius:50%; background:var(--green); color:#fff;
  text-align:center; font-weight:700; line-height:26px; margin-bottom:6px; }
.note { border-left:4px solid var(--green); background:#E3FCEF; padding:10px 14px; border-radius:0 8px 8px 0; }
footer { border-top:1px solid var(--line); margin-top:3em; padding:20px 0 40px; color:var(--muted); font-size:.9em; }