
:root{--paper:#f5f3ec;--ink:#1b1f1d;--muted:#5d625c;--line:#dcd7ca;--brand:#0e5a47;--brand-ink:#ffffff;--soft:#ebe8de;--code:#ffffff}
@media (prefers-color-scheme:dark){:root{--paper:#141716;--ink:#e9e7df;--muted:#a3a79f;--line:#2e3431;--brand:#5fbf9f;--brand-ink:#0b1210;--soft:#1c201e;--code:#1a1e1c}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 "IBM Plex Sans",system-ui,sans-serif}
a{color:var(--brand);text-underline-offset:3px}a:hover{text-decoration-thickness:2px}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
header.top{border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.mark{font:600 18px "IBM Plex Mono",monospace;color:var(--ink);text-decoration:none;letter-spacing:-.02em}
.mark span{color:var(--brand)}
nav a{color:var(--ink);text-decoration:none;margin-left:22px;font-size:15px}nav a:hover{color:var(--brand)}
section{padding:56px 0;border-bottom:1px solid var(--line)}
h1{font-size:clamp(30px,4.4vw,46px);line-height:1.12;letter-spacing:-.02em;margin:0 0 18px;font-weight:600}
h2{font-size:26px;line-height:1.25;margin:0 0 20px;font-weight:600;letter-spacing:-.01em}
h3{font-size:18px;margin:0 0 6px;font-weight:600}
p{margin:0 0 14px}.muted{color:var(--muted)}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
.lede{font-size:19px;color:var(--muted);max-width:34em}
.btn{display:inline-block;background:var(--brand);color:var(--brand-ink);padding:11px 18px;border-radius:6px;text-decoration:none;font-weight:600;font-size:16px}
.btn:hover{filter:brightness(1.08)}
.facts{display:flex;flex-wrap:wrap;gap:8px 22px;margin:18px 0 0;padding:0;list-style:none;font-size:15px;color:var(--muted)}
.facts b{color:var(--ink);font-weight:600}
.sample{background:var(--code);border:1px solid var(--line);border-radius:8px;font:13.5px/1.55 "IBM Plex Mono",monospace;overflow:hidden}
.sample .cap{padding:9px 14px;border-bottom:1px solid var(--line);color:var(--muted);font-size:12.5px}
.sample dl{margin:0;padding:10px 14px;display:grid;grid-template-columns:max-content 1fr;gap:3px 16px}
.sample dt{color:var(--brand)}.sample dd{margin:0;overflow-wrap:anywhere}
.cat{width:100%;border-collapse:collapse;font-size:16px}
.cat th{text-align:left;font:500 13px "IBM Plex Mono",monospace;color:var(--muted);padding:0 12px 10px 0;border-bottom:1px solid var(--line)}
.cat td{padding:16px 12px 16px 0;border-bottom:1px solid var(--line);vertical-align:top}
.cat td.num{font-family:"IBM Plex Mono",monospace;white-space:nowrap;font-size:15px}
.cat .t{font-weight:600}.cat .d{color:var(--muted);font-size:15px;margin-top:2px}
.cols{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 40px}
.fields{columns:2;column-gap:40px;padding:0;margin:0;list-style:none}
.fields li{break-inside:avoid;padding:7px 0;border-bottom:1px solid var(--line)}
.fields code{font:500 14px "IBM Plex Mono",monospace;color:var(--brand)}
ol.steps{padding-left:22px}ol.steps li{margin-bottom:8px}
details{border-bottom:1px solid var(--line);padding:14px 0}summary{cursor:pointer;font-weight:600}
details p{margin:10px 0 0;color:var(--muted)}
.crumb{font-size:14px;color:var(--muted);margin:26px 0 14px}.crumb a{color:var(--muted)}
.band{background:var(--soft)}
footer{padding:36px 0 50px;font-size:14px;color:var(--muted)}
footer .wrap{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between}
footer a{color:var(--muted)}
.prose{max-width:44em}.prose h2{margin-top:28px;font-size:21px}
@media (max-width:820px){.hero,.cols{grid-template-columns:1fr;gap:28px}.fields{columns:1}
 .cat thead{display:none}.cat tr{display:block;padding:14px 0;border-bottom:1px solid var(--line)}
 .cat td{display:block;border:0;padding:2px 0}.cat td.num::before{content:attr(data-l) " ";color:var(--muted);font-family:"IBM Plex Sans",sans-serif}
 section{padding:40px 0}nav a{margin-left:14px}}
