:root{
  --paper:#FAF8F5; --raise:#FFFFFF; --ink:#1A1917; --muted:#5C5751;
  --rule:#E4DED6; --accent:#8C2F2F; --accent-soft:#F4EAE7; --ok:#2F6B3A;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#141310; --raise:#1C1A16; --ink:#EFEBE5; --muted:#A79F96;
    --rule:#2E2B26; --accent:#D98A7E; --accent-soft:#2A201E; --ok:#7FB88A;
  }
}
:root[data-theme="dark"]{
  --paper:#141310; --raise:#1C1A16; --ink:#EFEBE5; --muted:#A79F96;
  --rule:#2E2B26; --accent:#D98A7E; --accent-soft:#2A201E; --ok:#7FB88A;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:44rem;margin:0 auto;padding:0 1.5rem}

/* 2.4.1 —— 每页第一个可聚焦元素就是跳过导航。
   1.4.3 —— 颜色写死,不用 var(--accent):强调色在暗色模式下会变浅(#D98A7E),
   白字配上去只有 2.66:1。实测抓到过一次,别改回变量。 */
.skip{position:absolute;left:-9999px;top:0;background:#7A2727;color:#fff;
  padding:.7rem 1.1rem;border-radius:0 0 .4rem 0;z-index:99;font-weight:600;
  text-decoration:underline}
.skip:focus{left:0}

/* 1.4.1 —— 正文链接带下划线,不靠颜色单独区分 */
a{color:var(--accent);text-decoration:underline;text-underline-offset:.18em;
  text-decoration-thickness:.06em}
a:hover{text-decoration-thickness:.12em}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:2px}

header{border-bottom:1px solid var(--rule);padding:1.1rem 0}
.head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink)}
.brand:hover{text-decoration:none}
.seal{width:1.8rem;height:1.8rem;border-radius:.4rem;background:var(--accent);color:#FAF8F5;
  font-family:"IBM Plex Serif",Georgia,serif;font-weight:600;display:grid;place-items:center;
  font-size:1.05rem;flex:none}
.brandname{font-weight:600;letter-spacing:.1em;font-size:.79rem;text-transform:uppercase}
nav ul{display:flex;gap:1.1rem;list-style:none;margin:0;padding:0;flex-wrap:wrap;font-size:.9rem}
nav a{color:var(--ink);text-decoration:none;padding-bottom:.15rem;border-bottom:2px solid transparent}
nav a:hover,nav a[aria-current="page"]{border-bottom-color:var(--accent)}

main{display:block}
.hero{padding:3.6rem 0 2.4rem}
h1{font-family:"IBM Plex Serif",Georgia,serif;font-weight:500;
  font-size:clamp(1.95rem,5.2vw,2.85rem);line-height:1.15;letter-spacing:-.015em;
  margin:0 0 1rem;text-wrap:balance}
.lede{font-size:1.11rem;color:var(--muted);margin:0;max-width:36rem}
section{padding:2.6rem 0;border-top:1px solid var(--rule)}
section:first-of-type{border-top:0}
h2{font-family:"IBM Plex Serif",Georgia,serif;font-size:1.4rem;font-weight:600;
  margin:0 0 .9rem;letter-spacing:-.01em;text-wrap:balance}
h3{font-size:1.02rem;font-weight:600;margin:1.7rem 0 .35rem}
p{margin:0 0 1rem}
p:last-child{margin-bottom:0}
ul,ol{margin:0 0 1rem;padding-left:1.3rem}
li{margin-bottom:.45rem}
strong{font-weight:600}

blockquote{margin:1.4rem 0;padding:1.05rem 1.3rem;background:var(--accent-soft);
  border-left:3px solid var(--accent);border-radius:0 .5rem .5rem 0}
blockquote p{font-family:"IBM Plex Serif",Georgia,serif;font-size:1.08rem;margin:0 0 .4rem}
blockquote cite{font-style:normal;font-size:.86rem;color:var(--muted)}

.wrapx{overflow-x:auto;margin:1.2rem 0}
table{width:100%;border-collapse:collapse;font-size:.94rem;min-width:26rem}
caption{text-align:left;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);padding-bottom:.5rem}
th,td{border:1px solid var(--rule);padding:.62rem .8rem;text-align:left;vertical-align:top}
thead th{background:var(--raise);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
td.num{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap;width:7rem}

.card{background:var(--raise);border:1px solid var(--rule);border-left:3px solid var(--accent);
  border-radius:.6rem;padding:1.4rem 1.55rem;margin:1.3rem 0}
.card :is(h2,h3){margin-top:0}

.steps{list-style:none;padding:0;margin:1.2rem 0;counter-reset:s}
.steps li{counter-increment:s;padding-left:2.4rem;position:relative;margin-bottom:.95rem}
.steps li::before{content:counter(s);position:absolute;left:0;top:.05rem;
  width:1.6rem;height:1.6rem;border-radius:50%;background:var(--accent);color:#FAF8F5;
  display:grid;place-items:center;font-size:.8rem;font-weight:600;font-variant-numeric:tabular-nums}

.next{display:grid;gap:.85rem;margin:1.3rem 0 0;padding:0;list-style:none}
.next li{background:var(--raise);border:1px solid var(--rule);border-radius:.5rem;padding:.9rem 1.1rem}
.next a{font-weight:600}
.next span{display:block;color:var(--muted);font-size:.92rem;margin-top:.15rem}

dl.facts{display:grid;grid-template-columns:7.5rem 1fr;gap:.5rem 1.2rem;margin:1rem 0 0;font-size:.96rem}
dl.facts dt{color:var(--muted)}
dl.facts dd{margin:0}

footer{border-top:1px solid var(--rule);padding:2rem 0 3.5rem;color:var(--muted);font-size:.86rem;margin-top:1rem}
footer a{color:var(--accent)}
footer p{margin:0 0 .55rem}

@media (max-width:36rem){
  .hero{padding:2.6rem 0 1.9rem}
  section{padding:2.1rem 0}
  .head{gap:.7rem}
  nav ul{gap:.85rem;font-size:.86rem}
  dl.facts{grid-template-columns:1fr;gap:.1rem 0}
  dl.facts dt{margin-top:.8rem;font-size:.77rem;letter-spacing:.06em;text-transform:uppercase}
  dl.facts dt:first-child{margin-top:0}
}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}