/* 技术文档风：细线、网格、等宽数字、无圆角无阴影 */
:root{
  --ink:#1a2226;
  --ink-2:#4a565c;
  --ink-3:#7d878c;
  --paper:#f4f3ee;
  --paper-2:#eae8e0;
  --line:#c8c5ba;
  --teal:#0d5c63;
  --teal-deep:#083c41;
  --f-s:16px;
  --f-xs:12px;
  --f-s2:18px;
  --f-m:24px;
  --f-l:34px;
  --f-xl:56px;
  --sp4:4px;--sp8:8px;--sp12:12px;--sp16:16px;--sp24:24px;--sp32:32px;--sp48:48px;--sp64:64px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--paper);color:var(--ink);
  font-size:var(--f-s);line-height:1.8;
  border-top:4px solid var(--teal);
}
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--sp32)}
a{color:var(--teal);text-decoration:none;border-bottom:1px solid var(--line)}
a:hover{color:var(--teal-deep);border-bottom-color:var(--teal-deep)}
a:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
/* header */
header{border-bottom:1px solid var(--line);background:var(--paper)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp24);padding-top:var(--sp16);padding-bottom:var(--sp16);flex-wrap:wrap}
.brand img{display:block;height:32px;width:auto;border:0}
nav[aria-label="主导航"]{display:flex;gap:var(--sp24);flex-wrap:wrap}
nav[aria-label="主导航"] a{border:0;font-size:var(--f-s2);color:var(--ink-2);padding:var(--sp4) 0}
nav[aria-label="主导航"] a:hover{color:var(--teal)}
nav[aria-label="主导航"] a[aria-current="page"]{color:var(--teal);border-bottom:2px solid var(--teal)}
/* breadcrumb */
.breadcrumb{font-size:var(--f-xs);letter-spacing:.08em;color:var(--ink-3);padding:var(--sp16) 0;border-bottom:1px dashed var(--line);margin-bottom:var(--sp32)}
.breadcrumb a{border:0;color:var(--ink-3)}
.breadcrumb span{margin:0 var(--sp8)}
/* type */
h1{font-size:var(--f-xl);font-weight:700;letter-spacing:.02em;line-height:1.25}
h2{font-size:var(--f-l);font-weight:600;letter-spacing:.04em}
h3{font-size:var(--f-s2);font-weight:600}
.sec-title{font-size:var(--f-m);font-weight:600;letter-spacing:.12em;color:var(--teal-deep);border-left:4px solid var(--teal);padding-left:var(--sp16);margin-bottom:var(--sp32)}
.eyebrow{font-family:ui-monospace,Consolas,monospace;font-size:var(--f-xs);letter-spacing:.3em;color:var(--teal);margin-bottom:var(--sp16)}
.lead{max-width:38em;color:var(--ink-2);font-size:var(--f-s2)}
main{padding:var(--sp48) 0 var(--sp64)}
section{margin-bottom:var(--sp64)}
/* hero variants */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--sp48);align-items:center;border-bottom:1px solid var(--line);padding-bottom:var(--sp48)}
.hero-fig img{width:100%;height:auto;display:block}
.hero-text .btn{margin-top:var(--sp24)}
.hero.offset{grid-template-columns:.9fr 1.1fr}
.hero.offset .hero-fig{order:-1}
.hero.bigword{display:block;border-bottom:0;padding-bottom:0}
.hero.bigword .hero-fig{max-width:640px;margin-top:var(--sp32)}
.band{border:1px solid var(--line);background:var(--paper-2);padding:var(--sp32);margin-bottom:var(--sp64)}
.band .lead{margin-top:var(--sp16)}
.band figure{margin-top:var(--sp24);max-width:640px}
.band figure img{width:100%;height:auto;display:block}
/* buttons: square, outlined */
.btn{display:inline-block;border:1px solid var(--teal);color:var(--teal);padding:var(--sp12) var(--sp32);font-size:var(--f-s2);letter-spacing:.1em;border-bottom-width:1px;transition:background .15s,color .15s}
.btn:hover{background:var(--teal);color:#fff;border-color:var(--teal)}
.btn:focus-visible{outline:2px solid var(--teal-deep);outline-offset:2px}
/* capability grid */
.cap-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp24)}
.cap{border-top:2px solid var(--ink);padding-top:var(--sp16)}
.cap p{color:var(--ink-2);max-width:32em}
/* nine items */
.items-sec{padding:var(--sp32) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.item{border:1px solid var(--line);background:#fbfaf7;padding:var(--sp16);display:flex;flex-direction:column}
.item h2{font-size:var(--f-s2);margin:var(--sp16) 0 var(--sp8)}
.item p{color:var(--ink-2);font-size:var(--f-s)}
.item ul{list-style:none;margin-top:var(--sp12);border-top:1px dashed var(--line);padding-top:var(--sp12)}
.item li{font-size:var(--f-xs);color:var(--ink-3);letter-spacing:.04em;padding:var(--sp4) 0 var(--sp4) var(--sp16);position:relative}
.item li::before{content:"—";position:absolute;left:0;color:var(--teal)}
.item img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
@media(max-width:760px){.items{grid-template-columns:minmax(0,1fr)}}
/* steps */
.steps{list-style:none;counter-reset:st;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp24)}
.steps>li{counter-increment:st;border-top:2px solid var(--teal);padding-top:var(--sp16)}
.steps>li::before{content:counter(st,decimal-leading-zero);font-family:ui-monospace,monospace;font-size:var(--f-m);color:var(--teal);display:block;margin-bottom:var(--sp8)}
.steps p{color:var(--ink-2);font-size:var(--f-s);margin-top:var(--sp8)}
/* faq */
.faq-list{border-top:1px solid var(--line)}
.faq-list>div{border-bottom:1px solid var(--line);padding:var(--sp24) 0}
.faq-list dt{font-weight:600;font-size:var(--f-s2)}
.faq-list dd{color:var(--ink-2);max-width:44em;margin-top:var(--sp8)}
.faq-page{margin-bottom:var(--sp48)}
/* prose */
.prose p{max-width:44em;margin-bottom:var(--sp16);color:var(--ink-2)}
.prose h2{margin:var(--sp48) 0 var(--sp16)}
.prose h1{margin-bottom:var(--sp24)}
.prose figure{margin:var(--sp24) 0}
.prose figure img{width:100%;height:auto;display:block;max-width:640px}
.prose ol.steps{margin:var(--sp24) 0}
/* table */
.cmp{width:100%;max-width:56em;border-collapse:collapse;margin:var(--sp24) 0;font-size:var(--f-s)}
.cmp caption{text-align:left;color:var(--ink-3);font-size:var(--f-xs);letter-spacing:.1em;padding-bottom:var(--sp8)}
.cmp th,.cmp td{border:1px solid var(--line);padding:var(--sp12);text-align:left;vertical-align:top}
.cmp thead th{background:var(--paper-2);font-weight:600}
.checklist{list-style:none;max-width:44em;margin:var(--sp16) 0 var(--sp32)}
.checklist li{padding:var(--sp8) 0 var(--sp8) var(--sp32);border-bottom:1px dashed var(--line);position:relative;color:var(--ink-2)}
.checklist li::before{content:"✓";position:absolute;left:var(--sp8);color:var(--teal);font-family:ui-monospace,monospace}
/* cta */
.cta{border:1px solid var(--teal);background:var(--teal-deep);color:#eef4f3;padding:var(--sp48) var(--sp32);text-align:left}
.cta h2{color:#fff;margin-bottom:var(--sp16)}
.cta p{max-width:40em;margin-bottom:var(--sp24);color:#c8d6d4}
.cta .btn{border-color:#fff;color:#fff}
.cta .btn:hover{background:#fff;color:var(--teal-deep)}
/* footer */
footer{border-top:1px solid var(--line);background:var(--paper-2);padding:var(--sp32) 0;font-size:var(--f-s)}
footer p{margin-bottom:var(--sp8)}
.flinks a{border:0;color:var(--ink-2);margin-right:var(--sp8)}
.fine{color:var(--ink-3);font-size:var(--f-xs)}
.fico{vertical-align:-2px;border:0}
img{max-width:100%}
@media(max-width:900px){
  h1{font-size:var(--f-l)}
  .hero,.hero.offset{grid-template-columns:minmax(0,1fr)}
  .hero.offset .hero-fig{order:0}
  .cap-grid,.steps{grid-template-columns:minmax(0,1fr)}
  .wrap{padding:0 var(--sp16)}
}