:root{
  --bg:#f7f9fb; --panel:#ffffff; --ink:#16212b; --muted:#5c6b7a;
  --line:#dfe6ec; --accent:#1f7ba6; --accent-soft:#e8f3f8;
  --warn:#8a5a00; --warn-soft:#fdf3e0;
  --cool:#4aa8d8; --warm:#d98246; --wall:#c9d6df; --wall2:#e4edf3; --sky:#dcecf5;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f1519; --panel:#161e24; --ink:#e6edf3; --muted:#9bacbb;
    --line:#26323b; --accent:#5ab6dd; --accent-soft:#14282f;
    --warn:#e0b464; --warn-soft:#2a2213;
    --cool:#5ab6dd; --warm:#e0a06a; --wall:#33424d; --wall2:#1e2932; --sky:#16242c;
  }
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-text-size-adjust:100%}
.wrap{max-width:900px;margin:0 auto;padding:0 20px}
header{border-bottom:1px solid var(--line);background:var(--panel)}
.brand{display:flex;align-items:center;gap:10px;padding:18px 0;font-weight:600;letter-spacing:.2px}
.brand svg{flex:none}
.brand span{color:var(--muted);font-weight:400;font-size:14px}
h1{font-size:31px;line-height:1.25;margin:34px 0 12px}
h2{font-size:21px;margin:40px 0 10px;padding-top:14px;border-top:1px solid var(--line)}
h3{font-size:16px;margin:22px 0 6px}
p{margin:10px 0}
.lead{font-size:18px;color:var(--muted);margin-bottom:6px}
ul{padding-left:22px;margin:10px 0}
li{margin:6px 0}
figure{margin:22px 0}
figure svg{display:block;width:100%;height:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:12px}
figcaption{margin-top:8px;font-size:13.5px;color:var(--muted);text-align:center}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:14px;margin:18px 0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:0 16px 16px;overflow:hidden}
.card .thumb{margin:0 -16px 12px}
.card .thumb svg{display:block;width:100%;height:auto;border-bottom:1px solid var(--line);background:var(--sky)}
.card h3{margin:0}
.card p{font-size:14px;color:var(--muted);margin:6px 0 0}
.tag{display:inline-block;font-size:12px;color:var(--accent);background:var(--accent-soft);
  border-radius:99px;padding:2px 9px;margin-top:10px}
.note{background:var(--warn-soft);border-left:3px solid var(--warn);border-radius:0 8px 8px 0;
  padding:12px 16px;margin:18px 0;font-size:15px}
.tablewrap{overflow-x:auto;margin:16px 0;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line)}
th{font-weight:600;background:var(--accent-soft);color:var(--ink)}
tr:last-child td{border-bottom:0}
td code{background:var(--accent-soft);color:var(--accent);padding:1px 5px;border-radius:4px;font-size:13px}
.svg-label{font:500 12px -apple-system,"Segoe UI",Roboto,Arial,sans-serif;fill:var(--muted)}
.svg-title{font:600 13px -apple-system,"Segoe UI",Roboto,Arial,sans-serif;fill:var(--ink)}
.svg-num{font:600 12px -apple-system,"Segoe UI",Roboto,Arial,sans-serif;fill:#fff}
footer{margin:52px 0 0;border-top:1px solid var(--line);background:var(--panel)}
footer .wrap{padding-top:22px;padding-bottom:32px;color:var(--muted);font-size:14px}