@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700&family=DM+Sans:wght@400;500;600&display=swap');

:root{
  --paper:#f4f7f5; --surface:#fff; --ink:#0f1f17; --ink-soft:#5b6b62;
  --border:#dde6e0; --accent:#2E8049; --accent-soft:#e3f1e8;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0b130f; --surface:#121d17; --ink:#eef4f0; --ink-soft:#9aaba1;
    --border:#22322a; --accent:#4cb36e; --accent-soft:#16301f;
  }
}
:root[data-theme="dark"]{
  --paper:#0b130f; --surface:#121d17; --ink:#eef4f0; --ink-soft:#9aaba1;
  --border:#22322a; --accent:#4cb36e; --accent-soft:#16301f;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.7 'DM Sans',system-ui,sans-serif}
header.top{background:var(--surface);border-bottom:1px solid var(--border)}
header.top .in,main,footer .in{max-width:820px;margin:0 auto;padding:0 16px}
header.top .in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
header.top img{height:28px;width:auto;display:block}
header.top nav{display:flex;gap:16px;flex-wrap:wrap;font-size:14px}
a{color:var(--accent)}
header.top nav a{text-decoration:none;color:var(--ink-soft)}
header.top nav a[aria-current]{color:var(--accent);font-weight:600}
main{padding-top:40px;padding-bottom:56px}
h1,h2,h3{font-family:'Outfit',system-ui,sans-serif;line-height:1.25;letter-spacing:-.01em}
h1{font-size:clamp(28px,5vw,38px);margin:0 0 8px}
h2{font-size:22px;margin:40px 0 8px;padding-top:8px}
h3{font-size:17px;margin:24px 0 4px}
.updated{color:var(--ink-soft);font-size:14px;margin:0 0 24px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px 22px;margin:20px 0}
.card.accent{background:var(--accent-soft);border-color:transparent}
ul,ol{padding-left:22px}
li{margin:4px 0}
table{width:100%;border-collapse:collapse;font-size:15px;margin:12px 0}
th,td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--border)}
th{font-weight:600}
.table-wrap{overflow-x:auto}
footer{border-top:1px solid var(--border);background:var(--surface);color:var(--ink-soft);font-size:14px}
footer .in{padding-top:20px;padding-bottom:20px;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) header.top img{filter:brightness(0) invert(1)} }
:root[data-theme="dark"] header.top img{filter:brightness(0) invert(1)}