* { box-sizing:border-box }
body { margin:0; background:#f4f5f7; color:#1c2530; font:16px/1.6 -apple-system,"Segoe UI",Roboto,Arial,sans-serif }
.wrap { max-width:40rem; margin:0 auto; padding:0 1.1rem }
.top { display:flex; justify-content:space-between; align-items:center; padding:1.1rem 0; border-bottom:2px solid #2b3a48 }
.brand { font-weight:700; color:#2b3a48; text-decoration:none; letter-spacing:.02em }
.links a { color:#5b6b7a; text-decoration:none; margin-left:1rem; font-size:.92rem }
h1 { font-size:1.6rem; margin:1.6rem 0 .3rem }
.lead { color:#4a5866; margin:.2rem 0 1.6rem }
.cards { display:grid; gap:1rem }
.card { background:#fff; border:1px solid #dde1e6; border-left:4px solid #3d6b8a; border-radius:6px; padding:1rem 1.1rem }
h2 { margin:0 0 .2rem; font-size:1.05rem }
h2 a { color:#20455c; text-decoration:none }
h2 a:hover { text-decoration:underline }
.tag { margin:.1rem 0 .5rem; color:#7a8794; font-size:.8rem; text-transform:uppercase; letter-spacing:.06em }
p { margin:.4rem 0 }
pre { background:#eceef1; border:1px solid #dde1e6; border-radius:5px; padding:.6rem .8rem; overflow:auto; font:13px/1.5 Consolas,monospace }
code { font:13px/1.5 Consolas,monospace }
ul { margin:.4rem 0 .8rem 1.2rem; padding:0 }
footer { border-top:1px solid #dde1e6; margin-top:2rem; padding:1rem 0 2rem; color:#6b7885; font-size:.88rem }
footer a { color:#6b7885 }
.copy { margin:.3rem 0 0 }
.obf { font-style:italic } .at { color:#7a8794 }