:root{
  --bg:#fbfaf7; --surface:#ffffff; --surface-2:#f2f4f0;
  --ink:#14211c; --ink-2:#3d4d46; --muted:#5f6f67;
  --line:#dfe4de; --line-strong:#c6cec7;
  --accent:#1f6b52; --accent-2:#1f5f6b; --accent-ink:#ffffff; --accent-soft:#e3efe9;
  --ok:#1f6b52; --warn:#7a5a0e; --danger:#9c2b25; --info:#1f5f6b;
  --warn-bg:#fbf6e9; --warn-line:#e6d6ad; --danger-bg:#fbeeec; --danger-line:#e6c2bd;
  --radius:2px; --radius-pill:999px;
  --shadow:0 1px 2px rgba(20,33,28,.06);
  --font-serif:Georgia,"Songti SC","SimSun","Noto Serif CJK SC",serif;
  --font-sans:"Segoe UI","Microsoft YaHei","PingFang SC",system-ui,-apple-system,sans-serif;
  --font-mono:ui-monospace,Consolas,"Courier New",monospace;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --container:760px; --container-wide:1140px;
  --ease:ease-out; --dur:160ms;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-sans);
  font-size:17px;line-height:1.65;overflow-wrap:anywhere}
img{max-width:100%;height:auto;vertical-align:middle}
a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--ink)}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote,table{margin:0}
ul,ol{padding-left:1.15em}
h1,h2,h3{font-family:var(--font-serif);font-weight:600;line-height:1.3;letter-spacing:0}
h1{font-size:30px;margin-bottom:var(--space-4)}
h2{font-size:22px;margin:var(--space-6) 0 var(--space-3)}
h3{font-size:18px;margin:var(--space-5) 0 var(--space-2)}
p{margin-bottom:var(--space-3)}
small,.small{font-size:14px}
.micro{font-size:12.5px}
.muted{color:var(--muted)}
.wrap{width:100%;max-width:var(--container);margin:0 auto;padding-inline:var(--space-4)}
.wrap-wide{max-width:var(--container-wide)}

/* masthead */
.masthead{border-bottom:1px solid var(--line);background:var(--surface)}
.masthead .wrap{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-3);
  padding-block:var(--space-3)}
.brand{display:inline-flex;align-items:center;gap:var(--space-2)}
.brand img{width:28px;height:28px;display:block}
.brand b{font-family:var(--font-serif);font-size:20px;font-weight:600;color:var(--ink);
  letter-spacing:.01em}
.brand:hover{text-decoration:none}
.tagline{font-size:14px;color:var(--muted)}
.indexbar{border-top:1px solid var(--line);background:var(--surface-2)}
.indexbar .wrap{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-2);
  padding-block:var(--space-2)}
.indexbar a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--space-3);
  font-size:15px;color:var(--ink-2);text-decoration:none;border-radius:var(--radius)}
.indexbar a:hover{background:var(--surface);color:var(--accent);text-decoration:underline}
.indexbar a[aria-current="page"]{background:var(--accent-soft);color:var(--accent);font-weight:600}
.indexbar a:focus-visible,.toc a:focus-visible,summary:focus-visible,
a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* layout */
main{padding-block:var(--space-6) var(--space-8)}
.layout{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-6)}
.toc-box{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.toc-box summary{cursor:pointer;padding:var(--space-3) var(--space-4);font-weight:600;
  min-height:44px;display:flex;align-items:center}
.toc{padding:0 var(--space-4) var(--space-3)}
.toc ul{list-style:none;padding:0;margin:0}
.toc li{margin-bottom:var(--space-1)}
.toc a{display:block;padding:var(--space-1) 0;font-size:15px;color:var(--ink-2);text-decoration:none}
.toc a:hover{color:var(--accent);text-decoration:underline}
.toc .toc-title{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);margin-bottom:var(--space-2)}
.prose{max-width:var(--container);min-width:0}
.card,.table-scroll,dl.terms,table{min-width:0}

/* components */
.card{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  box-shadow:var(--shadow);padding:var(--space-5)}
.card + .card{margin-top:var(--space-5)}
.lede{font-size:18px;color:var(--ink-2);margin-bottom:var(--space-5)}
.table-scroll{overflow-x:auto;margin-bottom:var(--space-4)}
.table-scroll table{min-width:620px}
table{border-collapse:collapse;width:100%;font-size:15.5px;background:var(--surface)}
caption{caption-side:top;text-align:left;font-size:14px;color:var(--muted);
  padding-bottom:var(--space-2)}
th,td{border:1px solid var(--line);padding:var(--space-2) var(--space-3);text-align:left;
  vertical-align:top}
thead th{background:var(--surface-2);font-family:var(--font-mono);font-size:12.5px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
tbody tr:hover{background:var(--surface-2)}
tbody th{font-weight:600;background:var(--surface);white-space:nowrap}
dl.terms{margin:0}
dl.terms dt{font-weight:600;margin-top:var(--space-4);padding-top:var(--space-3);
  border-top:1px solid var(--line)}
dl.terms dt:first-of-type{border-top:0;padding-top:0;margin-top:0}
dl.terms dd{margin:var(--space-1) 0 0;color:var(--ink-2)}
ol.steps{counter-reset:step;list-style:none;padding:0}
ol.steps li{counter-increment:step;position:relative;padding-left:var(--space-6);
  margin-bottom:var(--space-3)}
ol.steps li::before{content:counter(step);position:absolute;left:0;top:1px;
  width:22px;height:22px;border:1px solid var(--line-strong);border-radius:50%;
  font-family:var(--font-mono);font-size:12.5px;line-height:20px;text-align:center;
  color:var(--muted);background:var(--surface)}
ul.plain{list-style:none;padding:0}
ul.plain li{margin-bottom:var(--space-2)}
.tag{display:inline-block;font-family:var(--font-mono);font-size:12.5px;letter-spacing:.04em;
  padding:2px var(--space-2);border:1px solid var(--line-strong);border-radius:var(--radius);
  color:var(--muted);background:var(--surface)}
.dot{display:inline-block;width:8px;height:8px;border-radius:var(--radius-pill);
  margin-right:var(--space-2);vertical-align:middle}
.dot.ok{background:var(--ok)}.dot.warn{background:var(--warn)}.dot.danger{background:var(--danger)}
.callout{border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface);
  padding:var(--space-4);margin-bottom:var(--space-4)}
.callout.warn{background:var(--warn-bg);border-color:var(--warn-line)}
.callout.danger{background:var(--danger-bg);border-color:var(--danger-line)}
.callout .micro{font-family:var(--font-mono);letter-spacing:.04em;color:var(--muted);
  display:block;margin-bottom:var(--space-1)}
details.faq{border-top:1px solid var(--line)}
details.faq:last-of-type{border-bottom:1px solid var(--line)}
details.faq summary{cursor:pointer;padding:var(--space-3) 0;font-weight:600;min-height:44px;
  display:flex;align-items:center}
details.faq summary::marker{color:var(--muted)}
details.faq p{padding:0 0 var(--space-3);color:var(--ink-2)}
.filter{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;
  margin-bottom:var(--space-4)}
.filter label{font-size:14px;color:var(--muted)}
.filter input{min-height:44px;padding:0 var(--space-3);border:1px solid var(--line-strong);
  border-radius:var(--radius);background:var(--surface);color:var(--ink);
  font-family:var(--font-sans);font-size:15px;flex:1 1 200px;min-width:0}
.filter .count{font-family:var(--font-mono);font-size:12.5px;color:var(--muted)}
.related{margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--line)}
.related ul{list-style:none;padding:0}
.related li{margin-bottom:var(--space-2)}

.site-footer{border-top:1px solid var(--line);background:var(--surface-2);
  font-size:14px;color:var(--muted);padding-block:var(--space-5)}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);
  justify-content:space-between}
.site-footer a{color:var(--ink-2)}
.site-footer nav{display:flex;flex-wrap:wrap;gap:var(--space-4)}

@media (min-width:641px){.wrap{padding-inline:var(--space-5)}}
@media (min-width:901px){
  h1{font-size:32px}
  .indexbar a{padding-inline:var(--space-4)}
}
@media (min-width:1201px){
  .layout{grid-template-columns:220px minmax(0,1fr);align-items:start}
  .toc-box{position:sticky;top:var(--space-5)}
  .toc-box summary{display:none}
  .toc-box .toc{padding:var(--space-4)}
  .toc-box[open] .toc,.toc-box .toc{display:block}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}