:root { --green:#1b5e20; --green-dark:#124016; --green-soft:#e7f1e8; --ink:#17211a; --muted:#55655a; --line:#d9e1da; --bg:#f6f8f5; --surface:#fff; --amber:#fff4d6; --amber-line:#e0b84a; --red:#fbe9e9; }
@media (prefers-color-scheme: dark) { :root { --green:#7fcf86; --green-dark:#a6e3ab; --green-soft:#1d2e20; --ink:#e7eee8; --muted:#a2b1a6; --line:#2b382d; --bg:#101612; --surface:#18211b; --amber:#3a3118; --amber-line:#8a6d1c; --red:#3a1f1f; } }
* { box-sizing: border-box }
body { margin:0; font-family: system-ui,"Segoe UI",Roboto,Arial,sans-serif; color:var(--ink); background:var(--bg); line-height:1.65 }
a { color:var(--green) } img { max-width:100%; height:auto }
header.top { background:var(--surface); border-bottom:1px solid var(--line) }
.wrap { max-width:860px; margin:0 auto; padding:0 1.25rem }
header.top .wrap { display:flex; justify-content:space-between; align-items:center; min-height:58px; gap:1rem; flex-wrap:wrap }
.brand { font-weight:700; font-size:1.15rem; color:var(--green); text-decoration:none; display:flex; align-items:center; gap:.5rem }
.brand img { width:28px; height:28px }
header.top nav a { margin-left:1.1rem; color:var(--ink); text-decoration:none; font-size:.95rem }
main { padding:1.5rem 0 3rem }
h1 { font-size:1.9rem; line-height:1.25; margin:.4rem 0 .4rem } h2 { margin-top:2.2rem; border-bottom:1px solid var(--line); padding-bottom:.3rem } h3 { margin-top:1.8rem }
.meta { color:var(--muted); font-style:italic; margin:0 0 1rem }
figure { margin:1rem 0 1.4rem } figure img { border:1px solid var(--line); border-radius:8px; display:block; max-height:640px; width:auto; max-width:100% }
blockquote { margin:1rem 0; padding:.7rem 1rem; border-left:4px solid var(--green); background:var(--green-soft); border-radius:0 8px 8px 0 }
blockquote.warn { border-color:var(--amber-line); background:var(--amber) } blockquote.why { border-color:var(--green) }
.table { overflow-x:auto } table { border-collapse:collapse; width:100%; margin:1rem 0; background:var(--surface) }
th,td { border:1px solid var(--line); padding:.5rem .7rem; text-align:left; vertical-align:top } th { background:var(--green-soft) }
li { margin:.3rem 0 } code { background:var(--green-soft); padding:.1rem .35rem; border-radius:4px }
.crumbs { font-size:.9rem; color:var(--muted); margin-top:1.2rem } .crumbs a { color:var(--muted) }
.group { margin:2rem 0 } .group h2 { margin-bottom:.2rem } .group p.lead { color:var(--muted); margin:.2rem 0 .8rem }
.cards { display:grid; gap:.7rem } .card { background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:.8rem 1rem }
.card a { font-weight:600; text-decoration:none } .card p { margin:.2rem 0 0; color:var(--muted); font-size:.95rem } .card .meta { margin:.1rem 0 0; font-size:.85rem }
footer { border-top:1px solid var(--line); padding:1.2rem 0; color:var(--muted); font-size:.9rem }
.next { margin-top:2rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap }
@media print { header.top, footer, .next { display:none } body { background:#fff; color:#000 } figure img { max-height:420px } }