:root{
  --ground:#f4f7fa; --canvas:#ffffff; --ink:#0e1a2b; --body:#3e4c5e; --faint:#75839a;
  --line:#e2e8f0; --soft:#f7fafc;
  --blue:#1e4fc2; --blue-bg:#edf2fc; --blue-line:#c8d6f4;
  --green:#0b7a58; --green-bg:#eaf6f0; --green-line:#bde3d2;
  --amber:#a86408; --amber-bg:#fdf5e7; --amber-line:#f0dcb4;
  --red:#b3271e; --red-bg:#fdefee;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --shadow:0 12px 40px rgba(14,26,43,.06);
}
@media (prefers-color-scheme: dark){
  :root{ --ground:#0b1220; --canvas:#131c2c; --ink:#e9eef6; --body:#a9b5c7; --faint:#74829a;
    --line:#26324a; --soft:#192437; --blue:#8aa5f2; --blue-bg:#1a2542; --blue-line:#2e4070;
    --green:#54c79e; --green-bg:#122c25; --green-line:#1e4a3c; --amber:#e2ab55; --amber-bg:#332512; --amber-line:#54401e;
    --red:#f0918a; --red-bg:#361a18; --shadow:0 12px 40px rgba(0,0,0,.4); }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Helvetica Neue",sans-serif;
  background:var(--ground); color:var(--body); margin:0; font-size:15.5px; line-height:1.85}
h1,h2,h3,h4{color:var(--ink); line-height:1.35; text-wrap:balance; margin:0}
p{margin:8px 0}
a{color:var(--blue)}
code{font-family:var(--mono); font-size:.92em; background:var(--soft); padding:0 5px; border-radius:5px}

.nav{position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--canvas) 90%,transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line); padding:12px 18px}
.nav-inner{max-width:1020px; margin:0 auto; display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.logo{font-weight:800; color:var(--ink); font-size:17px; text-decoration:none; letter-spacing:.01em}
.logo b{color:var(--blue)}
.nav-links{display:flex; gap:2px; flex-wrap:wrap; margin-left:auto}
.nav-links a{padding:5px 12px; border-radius:999px; font-size:13.5px; color:var(--body); text-decoration:none}
.nav-links a:hover,.nav-links a.on{background:var(--soft); color:var(--ink)}
.nav-links a.cta{background:var(--blue); color:#fff}

.wrap{max-width:1020px; margin:0 auto; padding:0 18px}
.hero{padding:64px 0 30px; max-width:820px}
.hero .eyebrow{font-size:12px; font-weight:700; letter-spacing:.22em; color:var(--blue); text-transform:uppercase}
.hero h1{font-size:38px; font-weight:800; margin:12px 0 14px}
.hero .lead{font-size:17.5px; max-width:680px}
@media (max-width:640px){ .hero h1{font-size:29px} .hero{padding:40px 0 20px} }

.section{background:var(--canvas); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow);
  padding:36px 40px; margin:24px 0; scroll-margin-top:70px}
@media (max-width:640px){ .section{padding:24px 18px} }
.sec-eyebrow{font-size:11px; font-weight:700; letter-spacing:.2em; color:var(--blue); text-transform:uppercase; margin-bottom:4px}
.section h2{font-size:24px; margin-bottom:6px}
.sec-sub{color:var(--faint); font-size:13.5px; margin-bottom:18px}
h3{font-size:17px; margin:20px 0 6px}

.grid{display:grid; gap:14px; margin:16px 0}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:var(--soft); border:1px solid var(--line); border-radius:14px; padding:18px 20px}
.card h4{font-size:15px; margin-bottom:6px}
.card p{margin:0; font-size:13.5px}
/* acc-* 语义类保留但不再渲染左侧色条（2026-07-31 老板反馈：典型 AI 网页元素） */

.pill{display:inline-flex; align-items:center; padding:3px 11px; border-radius:999px; font-size:12px; font-weight:600;
  border:1px solid var(--blue-line); color:var(--blue); background:var(--blue-bg); margin-right:6px}
.pill.green{border-color:var(--green-line); color:var(--green); background:var(--green-bg)}
.pill.amber{border-color:var(--amber-line); color:var(--amber); background:var(--amber-bg)}

.row{display:flex; gap:10px; align-items:stretch; justify-content:center; flex-wrap:wrap; margin:14px 0}
.node{border:1.5px solid var(--line); border-radius:11px; padding:10px 14px; background:var(--canvas);
  text-align:center; font-size:13px; line-height:1.6; flex:0 1 auto}
.node b{display:block; color:var(--ink); font-size:13.5px}
.node small{color:var(--faint); font-size:11.5px; display:block}
.n-blue{border-color:var(--blue-line); background:var(--blue-bg)} .n-blue b{color:var(--blue)}
.n-green{border-color:var(--green-line); background:var(--green-bg)} .n-green b{color:var(--green)}
.n-amber{border-color:var(--amber-line); background:var(--amber-bg)} .n-amber b{color:var(--amber)}
.arr{align-self:center; color:var(--faint); font-size:16px}

.tblwrap{overflow-x:auto; margin:14px 0; border:1px solid var(--line); border-radius:12px}
table{border-collapse:collapse; width:100%; font-size:13.5px}
th{background:var(--soft); text-align:left; font-weight:700; color:var(--ink); padding:9px 13px; border-bottom:1px solid var(--line); white-space:nowrap}
td{padding:9px 13px; border-bottom:1px solid var(--line); vertical-align:top}
tr:last-child td{border-bottom:none}
td.num{text-align:right; font-variant-numeric:tabular-nums; font-family:var(--mono); font-size:12.5px}

.quote{background:var(--amber-bg); border:1px solid var(--amber-line); border-radius:12px;
  padding:14px 18px; margin:16px 0; color:var(--ink); font-size:14.5px}
.quote small{display:block; color:var(--faint); margin-top:4px; font-size:12px}

.cta-band{display:flex; gap:14px; flex-wrap:wrap; margin:18px 0 4px}
.btn{display:inline-block; padding:11px 22px; border-radius:12px; font-size:15px; font-weight:700; text-decoration:none}
.btn.primary{background:var(--blue); color:#fff}
.btn.ghost{border:1.5px solid var(--line); color:var(--ink); background:var(--canvas)}

.footer{max-width:1020px; margin:20px auto 44px; padding:0 20px; font-size:12.5px; color:var(--faint); line-height:2}
.footer a{color:var(--faint)}