:root { --page-ink:#182621; --page-muted:#64736c; --page-paper:#fff; --page-canvas:#f6f7f3; --page-green:#17654b; --page-lime:#d9ee79; --page-line:#e4e8e3; }
* { box-sizing:border-box; }
body { margin:0; background:var(--page-canvas); color:var(--page-ink); font:16px/1.72 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
.wrap { max-width:760px; margin:0 auto; padding:28px 22px 70px; }
a { color:var(--page-green); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover { color:#1d4335; }
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--page-ink); text-decoration:none; font-size:18px; font-weight:750; letter-spacing:-.04em; }
.brand-mark { display:grid; place-items:center; width:33px; height:33px; border-radius:9px; color:#104c37; background:var(--page-lime); font-size:20px; font-weight:800; }
h1 { margin:54px 0 17px; font-size:clamp(36px,6vw,46px); line-height:1.08; letter-spacing:-.045em; font-weight:780; }
h2 { margin:35px 0 8px; font-size:22px; line-height:1.25; letter-spacing:-.03em; font-weight:720; }
p,li { color:#58645e; }
li { margin:7px 0; }
code { display:inline-block; max-width:100%; overflow-wrap:anywhere; white-space:normal; border-left:3px solid var(--page-green); background:#eef5e9; padding:12px 14px; color:#33443a; font:13px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace; }
.box { margin:12px 0; padding:5px 16px; background:var(--page-paper); border:1px solid var(--page-line); border-radius:8px; }
@media(max-width:560px) { .wrap { padding:22px 18px 54px; } h1 { margin-top:43px; } }