:root{
  --paper:#faf8f4; --paper-raised:#f2efe6; --ink:#23261f; --ink-soft:#5b6153;
  --rule:#ddd6c4; --accent:#3f6b26; --accent-soft:#e9f0e0; --accent-ink:#2c4d1b;
  --mono-tint:#efece2;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans",-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#15170f; --paper-raised:#1c1f15; --ink:#eae5d6; --ink-soft:#a2a894;
    --rule:#33392a; --accent:#8fc76a; --accent-soft:#212a19; --accent-ink:#a9dd86;
    --mono-tint:#1c2015;
  }
}
:root[data-theme="dark"]{
  --paper:#15170f; --paper-raised:#1c1f15; --ink:#eae5d6; --ink-soft:#a2a894;
  --rule:#33392a; --accent:#8fc76a; --accent-soft:#212a19; --accent-ink:#a9dd86;
  --mono-tint:#1c2015;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans);
  font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:700px; margin:0 auto; padding:56px 24px 80px}
header.top{margin-bottom:40px}
.badge{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--mono);
  font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--accent-ink);
  background:var(--accent-soft); border:1px solid var(--rule); border-radius:20px;
  padding:5px 12px 5px 10px;
}
.badge b{width:7px; height:7px; border-radius:50%; background:var(--accent); display:inline-block}
h1{
  font-family:var(--serif); font-weight:600; font-size:clamp(32px,6vw,44px);
  letter-spacing:-.01em; margin:18px 0 6px; text-wrap:balance; line-height:1.1;
}
.meta{color:var(--ink-soft); font-size:14px; margin:0}
.meta code{font-family:var(--mono); background:var(--mono-tint); padding:1px 6px; border-radius:4px; font-size:12.5px}
.meta a{color:var(--ink-soft)}

.keyfacts{
  background:var(--paper-raised); border:1px solid var(--rule); border-radius:14px;
  padding:22px 24px; margin:32px 0 40px;
}
.keyfacts h2{
  font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-soft); margin:0 0 14px;
}
.keyfacts ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px}
.keyfacts li{display:flex; gap:11px; align-items:flex-start; font-size:14.5px}
.keyfacts .ico{flex:none; width:20px; text-align:center; margin-top:1px}
.keyfacts b{font-weight:600}

nav.toc{margin:0 0 48px; padding:20px 0 0; border-top:1px solid var(--rule)}
nav.toc h2{
  font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-soft); margin:0 0 12px;
}
nav.toc ol{margin:0; padding:0 0 0 1.4em; columns:2; column-gap:28px; font-size:14px}
nav.toc li{margin-bottom:7px; break-inside:avoid}
nav.toc a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--rule)}
nav.toc a:hover{border-color:var(--accent); color:var(--accent-ink)}

article section{margin:0 0 40px; scroll-margin-top:20px}
article h2{
  font-family:var(--serif); font-weight:600; font-size:23px; letter-spacing:-.005em;
  display:flex; align-items:baseline; gap:12px; margin:0 0 14px; text-wrap:balance;
}
article h2 .num{font-family:var(--mono); font-size:14px; color:var(--accent); font-weight:500}
article h3{font-family:var(--sans); font-size:15.5px; font-weight:700; margin:22px 0 8px}
article p{margin:0 0 14px; max-width:64ch}
article p:last-child{margin-bottom:0}
article ul, article ol{margin:0 0 14px; padding-left:1.3em; max-width:62ch}
article li{margin-bottom:6px}
article a{color:var(--accent-ink)}
strong{font-weight:650}
code{font-family:var(--mono); background:var(--mono-tint); padding:1px 6px; border-radius:4px; font-size:.88em}

.callout{
  border-left:3px solid var(--accent); background:var(--accent-soft); border-radius:0 10px 10px 0;
  padding:14px 18px; margin:16px 0; font-size:14.5px;
}
.callout p{margin:0}
.callout p + p{margin-top:8px}

table{width:100%; border-collapse:collapse; margin:6px 0 16px; font-size:14px}
th,td{text-align:left; padding:9px 12px; border-bottom:1px solid var(--rule); vertical-align:top}
th{font-weight:700; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft)}
.twrap{overflow-x:auto; margin:0 0 16px}

.cards{display:flex; flex-direction:column; gap:14px; margin:32px 0}
.card{
  display:flex; align-items:flex-start; gap:16px; background:var(--paper-raised);
  border:1px solid var(--rule); border-radius:14px; padding:20px 22px; text-decoration:none; color:inherit;
}
.card .ico{font-size:22px; flex:none; line-height:1}
.card h3{margin:0 0 4px; font-family:var(--sans); font-size:16px; font-weight:700; color:var(--ink)}
.card p{margin:0; font-size:14px; color:var(--ink-soft)}
.card:hover{border-color:var(--accent)}

footer{
  margin-top:56px; padding-top:24px; border-top:1px solid var(--rule);
  color:var(--ink-soft); font-size:13px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
footer a{color:inherit}

@media (max-width:520px){
  nav.toc ol{columns:1}
  .wrap{padding:40px 18px 60px}
}