/* assets/css/lab/articles/<slug>.css — 本页专属样式（en/zh 共用，单列文章版式） */
/* ============ Lab article · readable single-column layout ============ */
.article{max-width:820px;margin:0 auto}
.article-head{padding:26px 0 4px}
.article-head h1{margin:0 0 12px;font-size:30px;font-weight:600;color:var(--strong);line-height:1.24;letter-spacing:.005em}
.article-head .lede{margin:0;font-size:16px;color:var(--muted);line-height:1.75;max-width:760px}
.article-meta{margin:0 0 4px;font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.article-meta a{color:var(--accent);text-decoration:none}
.article-body{margin-top:8px}
.article-body h2{margin:34px 0 12px;font-size:21px;font-weight:600;color:var(--strong);line-height:1.35}
.article-body h2:first-child{margin-top:16px}
.article-body h3{margin:24px 0 8px;font-size:16px;font-weight:600;color:var(--strong)}
.article-body p{margin:0 0 14px;font-size:15px;line-height:1.85;color:var(--text)}
.article-body ul,.article-body ol{margin:0 0 14px;padding-left:22px;font-size:15px;line-height:1.85;color:var(--text)}
.article-body li{margin-bottom:6px}
.article-body a{color:var(--accent);text-decoration:none}
.article-body a:hover{text-decoration:underline}
.article-body strong{color:var(--strong);font-weight:600}
.article-body code{font-family:var(--mono);font-size:.87em;background:var(--panel-2);border:1px solid var(--line-soft);border-radius:5px;padding:1px 5px}
.article-body pre{margin:0 0 16px;padding:14px 16px;background:#0f172a;color:#e2e8f0;border-radius:10px;overflow:auto;font-family:var(--mono);font-size:12.5px;line-height:1.7}
.article-body pre code{background:none;border:0;padding:0;color:inherit;font-size:inherit}
.note{margin:0 0 16px;padding:12px 16px;background:#f7faff;border:1px solid var(--line-soft);border-left:3px solid var(--accent);border-radius:9px;font-size:14px;line-height:1.75;color:var(--text)}
.note strong{color:var(--strong)}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 16px}
.compare>div{padding:14px 16px;border:1px solid var(--line-soft);border-radius:11px;background:var(--panel);font-size:14px;line-height:1.7;color:var(--text)}
.compare h3,.compare h4{margin:0 0 6px;font-size:12.5px;font-weight:600;color:var(--strong);font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase}
.compare ul{margin:0;padding-left:18px;font-size:13.5px}
@media (max-width:640px){.compare{grid-template-columns:1fr}}

/* ============ figures ============ */
.figure{margin:22px 0 26px;padding:16px 16px 12px;background:var(--panel);border:1px solid var(--line-soft);border-radius:12px}
.figure svg{display:block;width:100%;height:auto}
.figure figcaption{margin-top:10px;font-size:12.5px;color:var(--muted);line-height:1.65;text-align:center}
.figure figcaption em{color:var(--accent-2);font-style:normal}
.figure .fig-title{fill:#16202c;font-family:var(--mono);font-size:14px;font-weight:600;text-anchor:middle}
.figure .fig-sub{fill:#5b6472;font-size:11px;text-anchor:middle}
.figure .tag{fill:#334155}
.figure .tag-sm{fill:#5b6472}
.figure .legend{fill:#5b6472}
.fig-part{fill:#c2d1e4;stroke:#5b6a7d;stroke-width:1.6;stroke-linejoin:round}
.fig-part2{fill:#dbe3ee;stroke:#5b6a7d;stroke-width:1.6;stroke-linejoin:round}
.fig-accent{fill:#bfdbfe;stroke:#2563eb;stroke-width:1.6;stroke-linejoin:round}
.fig-shell{fill:#8b96a3;fill-opacity:.3;stroke:#5b6a7d;stroke-width:1.6;stroke-linejoin:round}
.fig-box{fill:#eef4ff;stroke:#2563eb;stroke-width:1.6;stroke-linejoin:round}
.fig-box2{fill:#eef2f7;stroke:#5b6a7d;stroke-width:1.6;stroke-linejoin:round}
.fig-hot{fill:#fecaca;stroke:#be123c;stroke-width:1.6;stroke-linejoin:round}
.fig-grid{fill:none;stroke:#e3e9f2;stroke-width:1}
.fig-axis{fill:none;stroke:#c3ccd9;stroke-width:1.4}
.fig-line{fill:none;stroke:#5b6a7d;stroke-width:1.6}
.fig-flow{fill:none;stroke:#2563eb;stroke-width:3;stroke-linecap:round;stroke-dasharray:12 9;animation:art-flow 1.15s linear infinite}
.fig-flow--slow{animation-duration:2.2s;stroke:#0ea5e9}
@keyframes art-flow{to{stroke-dashoffset:-42}}

/* ============ FAQ + related + disclaimer ============ */
.article-faq,.article-related{margin-top:38px}
.article-faq>h2,.article-related>h2{margin:0 0 14px;font-size:21px;font-weight:600;color:var(--strong)}
.article-faq .faq-item h3{margin:0 0 6px;font-size:14px;font-weight:600;color:var(--strong)}
.article-faq .faq-item p{margin:0;font-size:14px;line-height:1.78;color:var(--text)}
.article .disclaimer{margin-top:36px}

@media (max-width:768px){
  .article-head h1{font-size:23px}
  .article-head .lede{font-size:14.5px}
  .article-body p,.article-body ul,.article-body ol{font-size:14px}
  .article-body h2,.article-faq>h2,.article-related>h2{font-size:18.5px}
  .figure{padding:10px 10px 8px}
}
@media (prefers-reduced-motion:reduce){.fig-flow,.fig-flow--slow{animation:none}}