/* ==========================================================================
   docs.css — 云智 Token Hub 文档系统（MiniRelax 设计语言 v2 落地）
   依赖 tokens.css（品牌变量 + 动效降级），通过 @import 保持引入顺序。
   红线：颜色只走变量表；按钮 999px 胶囊；卡片 ≥14px；阴影只用蓝主色系；
        禁 transition:all；含长文本的 flex 子项必须 min-width:0。
   ========================================================================== */
@import url("./tokens.css");

/* ---- 代码块 / 点缀扩展色（集中注册，对应品牌代码演示窗体系） ---- */
:root {
  --code-border: #1e293b;
  --code-bar: #111827;
  --code-text: #e2e8f0;
  --code-dim: #64748b;
  --code-blue: #38bdf8;
  --code-green: #86efac;
  --code-amber: #fbbf24;
  --violet: #7c3aed;
  --violet-soft: #f5f3ff;
  --violet-border: #ddd6fe;
  --cyan: #0891b2;
}

/* ============================== 基础 ============================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { font-family: var(--font-sans); color: var(--text-2); background: var(--bg); line-height: 1.7; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button { font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
img, svg { max-width: 100%; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }
.num, .tnum { font-variant-numeric: tabular-nums; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.label-en { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-4); }
.min-w-0 { min-width: 0; }

/* ============================== 顶栏（B 悬浮胶囊） ============================== */
.topbar {
  position: fixed; top: 14px; left: 50%; transform: translate(-50%, 0);
  width: min(1200px, calc(100% - 32px)); height: 64px;
  display: flex; align-items: center; gap: 16px; padding: 0 12px 0 20px;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid rgba(226, 232, 240, .7);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-nav); z-index: 70;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
/* 吸顶「收紧」：位移 + 更实底色 + 更强阴影，尺寸不变（不触发布局） */
.topbar.fixed-in { transform: translate(-50%, -6px); background: rgba(255, 255, 255, .92); box-shadow: var(--shadow-float); }
body.landing .topbar { position: absolute; }
body.landing .topbar.fixed-in { position: fixed; }
.topbar__brand { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; color: var(--text-1); min-width: 0; }
.topbar__logo { width: 32px; height: 32px; object-fit: contain; flex: none; }
.topbar__slot { display: flex; align-items: center; gap: 4px; padding: 4px; margin-inline: auto; background: rgba(241, 245, 249, .75); border: 1px solid var(--border-light); border-radius: var(--radius-pill); }
.topbar__link { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: var(--radius-pill); color: var(--text-2); font-size: 14px; font-weight: 500; border: 0; background: none;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, transform var(--dur-fast) ease; }
.topbar__link:hover { background: #fff; box-shadow: var(--shadow-panel); transform: translateY(-1px); }
.topbar__link.is-active { color: var(--primary); background: #fff; box-shadow: var(--shadow-panel); }
.topbar__cta { height: 42px; padding: 0 22px; border: 0; border-radius: var(--radius-pill); background: var(--ink); color: #fff; font-size: 14px; font-weight: 600;
  transition: transform var(--dur-fast) ease, background-color var(--dur-fast) ease; }
.topbar__cta:hover { background: #1e293b; transform: translateY(-2px); }
.burger { display: none; width: 44px; height: 44px; border: 1px solid var(--border-light); border-radius: var(--radius-pill); background: #fff; place-items: center; margin-left: auto; flex: none; color: var(--text-2); }

/* 移动端浮卡抽屉（blur + border + shadow + safe-area） */
.nav-drawer {
  position: fixed; top: 76px; left: 12px; right: 12px; border-radius: 24px;
  background: rgba(255, 255, 255, .97);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-float);
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
  z-index: 75; display: none;
}
.nav-drawer.is-open { display: block; }
.nav-drawer a { display: flex; align-items: center; height: 48px; padding: 0 16px; border-radius: 14px; color: var(--text-2); font-weight: 500; }
.nav-drawer a:hover { background: var(--bg-alt); }
.nav-drawer .drawer-cta { color: var(--primary); font-weight: 700; }

/* 文档库下拉（landing 顶栏，浮卡三件套） */
.docs-menu { position: relative; }
.docs-menu__trigger { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 0; border-radius: var(--radius-pill); color: var(--text-2); font: 500 14px var(--font-sans); background: none;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, box-shadow var(--dur-fast) ease; }
.docs-menu__trigger:hover, .docs-menu.is-open .docs-menu__trigger { background: #fff; color: var(--primary); box-shadow: var(--shadow-panel); }
.docs-menu__chevron { transition: transform var(--dur-fast) ease; }
.docs-menu.is-open .docs-menu__chevron { transform: rotate(180deg); }
.docs-menu__panel { position: absolute; top: calc(100% + 12px); right: 0; width: 500px; padding: 20px 22px 22px; background: rgba(255, 255, 255, .98); border: 1px solid var(--border-light); border-radius: var(--radius-md); box-shadow: var(--shadow-float);
  opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease; }
.docs-menu.is-open .docs-menu__panel { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.docs-menu__intro { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border-light); }
.docs-menu__intro b { display: block; font-size: 14px; color: var(--text-1); }
.docs-menu__intro span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--text-3); }
.docs-menu__groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.docs-menu__group-title { margin-bottom: 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-4); }
.docs-menu__group a { display: block; padding: 5px 0; font-size: 13px; color: var(--text-3); transition: color .18s ease, transform .18s ease; }
.docs-menu__group a:hover { color: var(--primary); transform: translateX(2px); }

/* ============================== 文档布局（侧栏 rail + 正文 + TOC） ============================== */
.docs { display: grid; grid-template-columns: minmax(0, 1fr); max-width: var(--container); margin-inline: auto; padding: 110px var(--gutter) 0; }
.sidebar { min-width: 0; }
.sidebar__head { display: none; }
.sidebar__group { margin-bottom: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sidebar__title { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-4); margin: 0 6px 0 0; flex: none; }
.sidebar__link { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: var(--radius-pill); font-size: 13.5px; color: var(--text-3); background: #fff; border: 1px solid var(--border-light); min-width: 0;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
.sidebar__link:hover { color: var(--text-1); }
.sidebar__link.is-active { background: var(--primary-soft); color: var(--primary); font-weight: 600; border-color: var(--primary-border); }
.badge { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; line-height: 1; flex: none; }
.badge--new { background: var(--primary-soft); border: 1px solid var(--primary-border); color: var(--primary); }
.badge--warn { background: var(--warn-soft); border: 1px solid var(--warn-border); color: var(--warn); }
.badge--success { background: var(--success-soft); border: 1px solid var(--success-border); color: var(--success); }
.sidebar__link .badge { margin-left: auto; height: 18px; padding: 0 7px; font-size: 10.5px; }

.article { min-width: 0; padding-bottom: 96px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-4); }
.crumbs a { color: var(--text-3); transition: color .18s ease; }
.crumbs a:hover { color: var(--primary); }
.crumbs .sep { color: var(--border); }
.article__head { margin-top: 18px; padding-bottom: 22px; border-bottom: 1px solid var(--border-light); }
.article h1 { font-size: clamp(26px, 4vw, 36px); font-weight: 800; letter-spacing: -.02em; line-height: 1.18; color: var(--text-1); }
.article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; font-size: 12.5px; color: var(--text-4); }
.article__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--border); }
.article__body { margin-top: 30px; font-size: 15px; max-width: 760px; }
.article__body > p { margin: 14px 0; color: var(--text-2); }
.article__body h2 { font-size: 24px; font-weight: 800; letter-spacing: -.01em; color: var(--text-1); margin: 44px 0 6px; padding-top: 12px; scroll-margin-top: 96px; }
.article__body h2:first-child { margin-top: 8px; }
.article__body h3 { font-size: 17.5px; font-weight: 700; color: var(--text-1); margin: 30px 0 4px; scroll-margin-top: 96px; }
.article__body strong { color: var(--text-1); }
.article__body ul, .article__body ol { margin: 12px 0; padding-left: 22px; display: grid; gap: 7px; }
.article__body li { color: var(--text-2); min-width: 0; }
code.inline { font-family: var(--font-mono); font-size: 12.5px; background: var(--bg-alt); border: 1px solid var(--border-light); border-radius: 6px; padding: 1.5px 7px; color: var(--primary-hover); overflow-wrap: anywhere; }

/* 步骤（index-chip 语言） */
.steps { margin: 18px 0; display: grid; gap: 12px; list-style: none; counter-reset: step; }
.steps li { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.steps li::before { counter-increment: step; content: counter(step, decimal-leading-zero); flex: none; width: 28px; height: 28px; border-radius: 9px;
  display: grid; place-items: center; background: var(--bg-alt); color: var(--text-3); font-weight: 700; font-size: 12.5px; font-variant-numeric: tabular-nums;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease; }
.steps li:hover::before { background: var(--primary); color: #fff; }
.steps__text { min-width: 0; padding-top: 3px; font-size: 14.5px; color: var(--text-2); }

/* callout（语义色淡底 + SVG 角标，禁 emoji） */
.callout { margin: 18px 0; border-radius: var(--radius-md); padding: 14px 18px; font-size: 13.5px; line-height: 1.7; min-width: 0; }
.callout strong { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.callout--warn { background: var(--warn-soft); border: 1px solid var(--warn-border); color: #92400e; }
.callout--warn strong { color: var(--warn); }
.callout--ok { background: var(--success-soft); border: 1px solid var(--success-border); color: #065f46; }
.callout--ok strong { color: var(--success); }
.callout--info { background: var(--primary-soft); border: 1px solid var(--primary-border); color: var(--primary-hover); }
.callout--info strong { color: var(--primary); }
.callout .sq { width: 14px; height: 14px; flex: none; -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; background: currentColor; }
.callout--warn .sq { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3C/svg%3E"); }
.callout--ok .sq { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8.5 12.5 2.5 2.5 4.5-5'/%3E%3C/svg%3E"); }
.callout--info .sq { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8h.01M12 12v4'/%3E%3C/svg%3E"); }

/* 代码块（D4 codeblock 语言） */
.codeblock { background: var(--bg-code); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--code-border); margin: 18px 0; }
.codeblock__bar { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; background: var(--code-bar); }
.codeblock__dot { width: 11px; height: 11px; border-radius: 50%; }
.codeblock__lang { margin-left: auto; height: 24px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600; color: #cbd5e1; background: rgba(148, 163, 184, .12); border: 1px solid rgba(148, 163, 184, .2); }
.codeblock__copy { height: 24px; padding: 0 10px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid rgba(148, 163, 184, .2); border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600; color: #cbd5e1; background: rgba(148, 163, 184, .12);
  transition: background-color .18s ease, color .18s ease; }
.codeblock__copy:hover { background: rgba(148, 163, 184, .22); color: #fff; }
.codeblock pre { margin: 0; padding: 16px 18px; font: 12.5px/1.75 var(--font-mono); color: var(--code-text); overflow-x: auto; min-width: 0; }
.codeblock .c { color: var(--code-dim); }
.codeblock .k { color: var(--code-blue); }
.codeblock .s { color: var(--code-green); }
.codeblock .v { color: var(--code-amber); }

/* 表格 */
.tbl-wrap { margin: 18px 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; min-width: 0; }
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 520px; font-variant-numeric: tabular-nums; }
th { text-align: left; background: var(--bg-alt); color: var(--text-3); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
th, td { padding: 12px 18px; border-bottom: 1px solid var(--border-light); min-width: 0; }
tr:last-child td { border-bottom: 0; }
td code.inline { font-size: 12px; }

/* 右侧 TOC */
.toc { min-width: 0; font-size: 13px; }
.toc__title { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-4); margin-bottom: 10px; }
.toc a { display: block; padding: 5px 0 5px 14px; color: var(--text-3); border-left: 2px solid var(--border-light);
  transition: color .18s ease, border-color .18s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toc a:hover { color: var(--text-1); }
.toc a.is-active { color: var(--primary); border-left-color: var(--primary); }
.toc a.lvl3 { padding-left: 26px; }

/* 上一篇 / 下一篇 */
.pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--border-light); }
.pager__card { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 20px; min-width: 0;
  transition: transform var(--dur-fast) ease, border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease; }
.pager__card:hover { transform: translateY(-2px); border-color: var(--primary-border); box-shadow: var(--shadow-panel); }
.pager__label { font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-4); }
.pager__title { margin-top: 4px; font-size: 14.5px; font-weight: 700; color: var(--text-1); }
.pager__card--next { text-align: right; }

/* ============================== 搜索命令面板 ============================== */
.search-mask { position: fixed; inset: 0; background: rgba(15, 23, 42, .36); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  z-index: 90; display: none; padding: 14vh 16px 0; }
.search-mask.is-open { display: block; }
.search-panel { max-width: 560px; margin-inline: auto; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float); overflow: hidden; }
.search-panel__bar { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border-light); }
.search-panel__bar svg { flex: none; color: var(--text-4); }
.search-panel__input { flex: 1; min-width: 0; border: 0; outline: 0; font: 16px var(--font-sans); color: var(--text-1); background: none; }
.search-panel__esc { flex: none; height: 26px; padding: 0 10px; display: grid; place-items: center; border-radius: 8px; background: var(--bg-alt);
  border: 1px solid var(--border-light); color: var(--text-4); font-size: 11px; font-weight: 600; }
.search-panel__list { max-height: min(46vh, 380px); overflow-y: auto; padding: 8px; }
.search-panel__empty { padding: 26px 18px; text-align: center; font-size: 13.5px; color: var(--text-4); }
.search-result { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--radius-md); cursor: pointer; min-width: 0;
  transition: background-color .15s ease; }
.search-result:hover, .search-result.is-cursor { background: var(--primary-soft); }
.search-result__group { flex: none; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-4);
  background: var(--bg-alt); border: 1px solid var(--border-light); border-radius: var(--radius-pill); height: 22px; padding: 0 9px; display: inline-flex; align-items: center; }
.search-result__title { font-size: 14px; font-weight: 600; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-result__kw { margin-top: 1px; font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-result__go { margin-left: auto; flex: none; color: var(--text-4); }
.search-panel__foot { display: flex; gap: 16px; padding: 10px 18px; border-top: 1px solid var(--border-light); font-size: 11.5px; color: var(--text-4); }

/* ============================== 阅读进度 / 返回顶部 ============================== */
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--grad-cta); z-index: 80; border-radius: 0 3px 3px 0; transition: width .1s linear; }
.backtop { position: fixed; right: 20px; bottom: calc(24px + env(safe-area-inset-bottom)); width: 46px; height: 46px; border-radius: 50%;
  background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-fab);
  display: grid; place-items: center; color: var(--text-3); z-index: 60; opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--dur-fast) ease, transform var(--dur-fast) ease, visibility var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease; }
.backtop.is-show { opacity: 1; visibility: visible; transform: none; }
.backtop:hover { color: var(--primary); border-color: var(--primary-border); transform: translateY(-2px); }

/* ============================== 页脚（文档页紧凑条） ============================== */
.footer { border-top: 1px solid var(--border-light); background: var(--bg); margin-top: 24px; }
.footer__inner { max-width: var(--container); margin-inline: auto; padding: 22px var(--gutter) calc(22px + env(safe-area-inset-bottom));
  display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; font-size: 12.5px; color: var(--text-3); }
.footer__powered { display: inline-flex; align-items: center; gap: 8px; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; background: #10b981; box-shadow: 0 0 0 3px var(--success-soft); }
.status-dot--pulse { animation: dot-pulse 2s ease-in-out infinite; }
@keyframes dot-pulse { 0%, 100% { transform: scale(.85); opacity: .85 } 50% { transform: scale(1.15); opacity: 1 } }
.footer__links { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0; }
.footer__links a { display: inline-flex; align-items: center; padding-left: 16px; margin-left: 16px; border-left: 1px solid var(--border); transition: color .18s ease; }
.footer__links a:hover { color: var(--primary); }

/* ==========================================================================
   LANDING（index.html 落地层）
   ========================================================================== */

/* ---------- Hero（点阵 + 双椭圆柔光） ---------- */
.hero { position: relative; padding: 150px 0 96px; overflow: hidden;
  background-image: radial-gradient(#e4e4e7 1px, transparent 1px); background-size: 24px 24px; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(600px 320px at 18% 12%, rgba(59, 130, 246, .14), transparent 70%),
    radial-gradient(520px 300px at 82% 10%, rgba(124, 58, 237, .12), transparent 70%),
    radial-gradient(ellipse at 50% 45%, transparent 30%, var(--bg) 78%); }
.hero > * { position: relative; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
.hero-badge { display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 4px 14px 4px 4px; background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-pill); box-shadow: var(--shadow-panel); }
.hero-badge__tag { height: 26px; padding: 0 10px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.hero-badge__text { font-size: 13px; color: var(--text-2); padding-right: 6px; }
.hero h1 { margin-top: 24px; font-size: clamp(34px, 5vw, 54px); font-weight: 900; letter-spacing: -.025em; line-height: 1.1; color: var(--text-1); }
.typewriter__caret { display: inline-block; width: 4px; height: 1em; background: var(--ink); vertical-align: -.1em; animation: caret-blink 1s steps(1) infinite; }
@keyframes caret-blink { 0%, 50% { opacity: 1 } 51%, 100% { opacity: 0 } }
.hero-grad-line { display: block; background: var(--grad-cta); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  opacity: 0; transform: translateY(14px); animation: grad-line-in .5s var(--ease-spring) .25s forwards; }
@keyframes grad-line-in { to { opacity: 1; transform: none; } }
.hero__sub { margin-top: 20px; font-size: 16px; color: var(--text-3); max-width: 52ch; }
.hero__sub strong { color: var(--text-2); font-weight: 700; }
.hero__sub .keep { white-space: nowrap; }

/* 2×2 按钮阵：双 CTA + 两张入口卡 */
.hero__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 640px; margin-top: 32px; }
.hero-entry { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #fff; border: 1px solid var(--border); border-radius: 18px; min-width: 0;
  transition: transform var(--dur-fast) ease, border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease; }
.hero-entry:hover { transform: translateY(-2px); box-shadow: var(--shadow-panel); }
.hero-entry--blue:hover { border-color: var(--primary-border); }
.hero-entry--violet:hover { border-color: var(--violet-border); }
.hero-entry__chip { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--primary-soft); color: var(--primary); }
.hero-entry--violet .hero-entry__chip { background: var(--violet-soft); color: var(--violet); }
.hero-entry__body { min-width: 0; }
.hero-entry__body b { display: block; font-size: 14px; color: var(--text-1); }
.hero-entry__body span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-3); }
.hero-entry__chevron { margin-left: auto; flex: none; color: var(--text-4); transition: transform var(--dur-fast) ease; }
.hero-entry:hover .hero-entry__chevron { transform: translateX(3px); }

/* hero-stats 四格数据条带 */
.hero-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 40px; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: #fff; }
.hero-stats__cell { padding: 18px 20px; border-right: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); min-width: 0; }
.hero-stats__cell:nth-child(4n) { border-right: 0; }
.hero-stats__cell:nth-child(n+3) { border-bottom: 0; }
.hero-stats__num { font-size: 26px; font-weight: 800; color: var(--text-1); font-variant-numeric: tabular-nums; }
.hero-stats__num em { font-size: 12px; font-weight: 600; color: var(--text-3); font-style: normal; margin-left: 4px; }
.hero-stats__label { font-size: 12.5px; color: var(--text-3); }

/* 控制台演示窗（双 pane） */
.demo { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--code-border); box-shadow: var(--shadow-float); }
.demo__bar { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; background: var(--code-bar); }
.demo__dot { width: 11px; height: 11px; border-radius: 50%; }
.demo__title { margin-left: 8px; font: 11.5px var(--font-mono); color: var(--code-dim); }
.demo__body { display: grid; grid-template-columns: 1fr 1fr; background: var(--bg-code); color: var(--code-text); }
.demo__pane { padding: 18px; font: 12.5px/1.8 var(--font-mono); min-width: 0; overflow-wrap: break-word; }
.demo__pane + .demo__pane { border-left: 1px solid var(--code-border); }
.demo__pane-head { font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--code-dim); margin-bottom: 10px; }
.demo__caret { display: inline-block; width: 2px; height: 1.05em; background: var(--code-blue); vertical-align: -.15em; animation: caret-blink 1s steps(1) infinite; }
.demo__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px; background: var(--bg-code); border-top: 1px solid var(--code-border); }
.demo__chip { height: 26px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600; color: #cbd5e1; background: rgba(148, 163, 184, .12); border: 1px solid rgba(148, 163, 184, .2); }
/* 演示窗角标 */
.demo-float { position: absolute; left: -28px; bottom: -24px; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px 0 12px;
  background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-pill); box-shadow: var(--shadow-float);
  animation: floaty 5s ease-in-out infinite; min-width: 0; }
.demo-float__icon { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--success-soft); color: var(--success); }
.demo-float b { display: block; font-size: 13px; font-weight: 700; color: var(--text-1); white-space: nowrap; }
.demo-float span { display: block; font-size: 11px; color: var(--text-3); white-space: nowrap; }
@keyframes floaty { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }

/* ---------- 统一 section 节奏 ---------- */
.section { padding: var(--section-y) 0; }
.section-alt { background: var(--bg-alt); border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); }
.section__head { max-width: 720px; margin: 0 auto 44px; text-align: center; }
.section__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); }
.section__title { font-size: clamp(27px, 3vw, 36px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--text-1); margin-top: 8px; }
.section__desc { font-size: 17px; color: var(--text-3); margin-top: 10px; }

/* ---------- D1 信任跑马灯 ---------- */
.trust { padding: 56px 0; }
.trust__head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 22px; }
.trust__title { font-size: 15px; font-weight: 700; color: var(--text-1); white-space: nowrap; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__row { display: flex; gap: 12px; width: max-content; animation: marquee-l 28s linear infinite; }
.marquee__row--reverse { animation-name: marquee-r; }
.marquee:hover .marquee__row { animation-play-state: paused; }
@keyframes marquee-l { to { transform: translateX(-50%); } }
@keyframes marquee-r { from { transform: translateX(-50%); } to { transform: none; } }
.marquee + .marquee { margin-top: 12px; }
.trust-chip { height: 44px; padding: 0 18px; display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg-alt); border: 1px solid var(--border-light); border-radius: 10px; color: var(--text-3); font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.trust-chip svg { color: var(--primary); flex: none; }

/* ---------- D2 features ---------- */
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.feature { background: var(--bg); border: 1px solid var(--border); border-radius: 20px; padding: 26px; min-width: 0;
  transition: transform var(--dur-fast) ease, border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease; }
.feature:hover { transform: translateY(-3px); border-color: var(--primary-border); box-shadow: var(--shadow-card-hover); }
.feature__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.feature__icon { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; flex: none; }
.feature__title { font-size: 16.5px; font-weight: 700; color: var(--text-1); margin: 14px 0 8px; }
.feature__desc { font-size: 14.5px; color: var(--text-3); line-height: 1.7; overflow-wrap: break-word; }
.feature__list { margin-top: 14px; display: grid; gap: 8px; list-style: none; }
.feature__list li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--text-3); min-width: 0; }
.feature__list li::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 2px; background: var(--primary);
  -webkit-mask: var(--check-icon) center/contain no-repeat; mask: var(--check-icon) center/contain no-repeat; }
:root { --check-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }

/* ---------- 接入路径（三步） ---------- */
.path__track { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.path__track::before { content: ""; position: absolute; top: 44px; left: calc(16.6% + 44px); right: calc(16.6% + 44px); height: 2px;
  background: repeating-linear-gradient(90deg, var(--border) 0 8px, transparent 8px 16px); }
.path__step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.path__bubble { width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; background: #fff;
  border: 1px solid var(--border); box-shadow: var(--shadow-panel);
  transition: transform var(--dur-fast) ease, border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease; }
.path__step:hover .path__bubble { transform: translateY(-4px); border-color: var(--primary-border); box-shadow: var(--shadow-card-hover); }
.path__bubble svg { color: var(--primary); }
.path__index { position: absolute; top: -6px; right: calc(50% - 60px); height: 24px; padding: 0 9px; display: grid; place-items: center;
  border-radius: var(--radius-pill); background: var(--ink); color: #fff; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.path__name { margin-top: 16px; font-size: 16px; font-weight: 700; color: var(--text-1); }
.path__desc { margin-top: 6px; font-size: 13.5px; color: var(--text-3); max-width: 30ch; overflow-wrap: break-word; }

/* ---------- 编码工具卡 ---------- */
.tools-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.tool-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 24px; min-width: 0; overflow: hidden;
  transition: transform var(--dur-fast) ease, border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease; }
.tool-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad-cta); opacity: .85; }
.tool-card:hover { transform: translateY(-4px); border-color: var(--primary-border); box-shadow: var(--shadow-card-hover); }
.tool-card__head { display: flex; align-items: center; gap: 12px; }
.tool-card__icon { width: 42px; height: 42px; border-radius: var(--radius-md); flex: none; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.tool-card--violet .tool-card__icon { background: var(--violet-soft); color: var(--violet); }
.tool-card--cyan .tool-card__icon { background: #ecfeff; color: var(--cyan); }
.tool-card__head h3 { font-size: 16.5px; font-weight: 800; color: var(--text-1); }
.tool-card__head .label-en { display: block; margin-top: 2px; }
.tool-card__desc { padding: 12px 0 0; font-size: 13.5px; color: var(--text-3); line-height: 1.65; min-height: 66px; }
.tool-card__foot { margin-top: auto; padding-top: 16px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-3); }
.tool-card__more { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 600; color: var(--primary); }
.tool-card__more svg { transition: transform var(--dur-fast) ease; }
.tool-card:hover .tool-card__more svg { transform: translateX(3px); }
.tool-card__state { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.tool-card__state .sdot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.sdot--ok { background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .15); }
.sdot--warn { background: var(--code-amber); box-shadow: 0 0 0 3px rgba(251, 191, 36, .15); }

/* ---------- D4 developers（tabs + codeblock） ---------- */
.dev-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: start; }
.dev-copy h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 800; letter-spacing: -.02em; color: var(--text-1); line-height: 1.2; }
.dev-copy p { margin-top: 12px; font-size: 15px; color: var(--text-3); }
.dev-points { margin-top: 20px; display: grid; gap: 12px; }
.dev-point { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.dev-point__chip { flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--bg-alt); color: var(--text-3); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dev-point__chip.is-active { background: var(--primary); color: #fff; }
.dev-point b { display: block; font-size: 14px; color: var(--text-1); }
.dev-point span { display: block; font-size: 13px; color: var(--text-3); margin-top: 1px; }
.tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--bg-alt); border: 1px solid var(--border-light); border-radius: var(--radius-pill); }
.tabs__btn { height: 32px; padding: 0 14px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600; color: var(--text-3); background: none; border: 0;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease; }
.tabs__btn.is-active { background: #fff; color: var(--primary); box-shadow: var(--shadow-panel); }
.dev-code .codeblock { margin: 0; }
.dev-code [data-pane] { display: none; }
.dev-code [data-pane].is-active { display: block; }

/* ---------- D7 FAQ（左粘性渐变卡 + 右序号手风琴） ---------- */
.faq { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 48px; align-items: start; }
.faq__sticky { position: sticky; top: 110px; padding: 28px; border-radius: var(--radius-lg); background: var(--grad-brand); color: #fff; overflow: hidden; }
.faq__sticky .label-en { color: rgba(255, 255, 255, .75); }
.faq__sticky h2 { margin-top: 8px; font-size: 24px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
.faq__sticky p { margin-top: 10px; font-size: 14px; color: rgba(255, 255, 255, .85); line-height: 1.7; }
.faq__sticky .btn { margin-top: 20px; }
.faq__stats { display: flex; gap: 24px; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .25); }
.faq__stat b { display: block; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.faq__stat span { font-size: 12px; color: rgba(255, 255, 255, .75); }
.faq__glow { position: absolute; right: -70px; bottom: -90px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .3), transparent 62%); }
.faq__item { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease; }
.faq__item + .faq__item { margin-top: 10px; }
.faq__item.is-open { border-color: var(--primary-border); box-shadow: 0 8px 26px rgba(37, 99, 235, .08); }
.faq__trigger { width: 100%; display: flex; align-items: center; gap: 12px; padding: 18px 20px; background: none; border: 0; cursor: pointer; font: inherit; font-weight: 600; color: var(--text-1); text-align: left; min-width: 0; }
.faq__trigger .index-chip { flex: none; }
.faq__trigger-text { flex: 1; min-width: 0; }
.faq__chevron { flex: none; color: var(--text-4); transition: transform var(--dur-fast) ease; }
.faq__item.is-open .faq__chevron { transform: rotate(180deg); color: var(--primary); }
.faq__answer { display: none; padding: 0 20px 18px 62px; color: var(--text-3); line-height: 1.75; font-size: 14px; }
.faq__item.is-open .faq__answer { display: block; }
.index-chip { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: var(--bg-alt); color: var(--text-3); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease; }
.faq__item.is-open .index-chip { background: var(--primary); color: #fff; }

/* ---------- D8 cta-band ---------- */
.cta-band { border-radius: var(--radius-lg); background: var(--grad-brand); color: #fff; padding: 56px 48px; position: relative; overflow: hidden; }
.cta-band__glow { position: absolute; right: -80px; bottom: -120px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .28), transparent 62%); }
.cta-band h2 { font-size: 29px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.cta-band p { margin-top: 10px; font-size: 15.5px; color: rgba(255, 255, 255, .85); max-width: 52ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* ---------- 按钮 ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 26px; border: 1px solid transparent; border-radius: var(--radius-pill);
  font: 600 14.5px var(--font-sans); white-space: nowrap; position: relative; text-decoration: none;
  transition: transform var(--dur-fast) ease, background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease, box-shadow var(--dur-fast) ease; }
.btn--primary { background-image: var(--grad-cta); color: #fff; overflow: hidden; }
.btn--primary::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-18deg); pointer-events: none; }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(37, 99, 235, .28); }
.btn--primary:hover::after { transform: translateX(340%) skewX(-18deg); transition: transform .6s ease; }
.btn--secondary { background: var(--bg); border-color: var(--border); color: var(--text-1); }
.btn--secondary:hover { transform: translateY(-2px); border-color: var(--primary); color: var(--primary); box-shadow: var(--shadow-panel); }
.btn--ink { background: var(--ink); color: #fff; height: 42px; }
.btn--ink:hover { background: #1e293b; transform: translateY(-2px); }
.btn--white { background: #fff; color: var(--ink); }
.btn--white:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(15, 23, 42, .18); }
.btn--ghost-light { background: transparent; border-color: rgba(255, 255, 255, .6); color: #fff; }
.btn--ghost-light:hover { border-color: #fff; transform: translateY(-2px); }
.btn__arrow { transition: transform var(--dur-fast) ease; }
.btn--primary:hover .btn__arrow { transform: translateX(5px); }

/* ---------- E 页脚四层（landing） ---------- */
.footer--site { border-top: 1px solid var(--border-light); background: var(--bg); margin-top: 0; }
.footer__grid { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: 40px; padding: 64px 0 40px; }
.footer__brand { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; color: var(--text-1); }
.footer__brand img { width: 30px; height: 30px; object-fit: contain; flex: none; }
.footer__intro { margin-top: 14px; font-size: 13.5px; color: var(--text-3); max-width: 40ch; line-height: 1.7; }
.footer__col-title { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-4); font-weight: 700; }
.footer__col { margin-top: 16px; display: grid; gap: 10px; align-content: start; }
.footer__link { display: inline-flex; align-items: center; font-size: 13.5px; color: var(--text-3); min-width: 0;
  transition: color .18s ease, transform .18s ease; }
.footer__link:hover { color: var(--primary); transform: translateX(2px); }
.footer__entity-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 8px; padding: 28px; background: var(--bg-alt); border: 1px solid var(--border-light); border-radius: var(--radius-lg); }
.footer__entity-card { text-align: center; min-width: 0; }
.footer__entity-name { font-size: 15px; font-weight: 700; color: var(--text-1); }
.footer__entity-role { font-size: 12.5px; color: var(--text-3); margin-top: 6px; }
.footer__entity-foot { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; font-size: 12px; color: var(--text-4); }
.footer__dots { display: inline-flex; gap: 6px; }
.footer__dots span { width: 8px; height: 8px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 3px rgba(37, 99, 235, .10); animation: dot-pulse 2s ease-in-out infinite; }
.footer__dots span:nth-child(1) { background: var(--primary); }
.footer__dots span:nth-child(2) { background: var(--violet); animation-delay: .25s; }
.footer__dots span:nth-child(3) { background: var(--cyan); animation-delay: .5s; }
.footer__powered-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border-light); font-size: 12.5px; color: var(--text-3); }
.footer__legal { background: var(--bg-alt); color: var(--text-3); font-size: 12px; padding: 20px 0 calc(20px + env(safe-area-inset-bottom)); }
.footer__legal .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; align-items: center; }
.footer__legal a { color: var(--text-3); transition: color .18s ease; }
.footer__legal a:hover { color: var(--primary); }

/* ============================== 响应式 ============================== */
@media (min-width: 769px) {
  /* 桌面文档布局：固定左 rail + 居中正文 + 固定右 TOC（隐藏顶栏） */
  .topbar { display: none; }
  .nav-drawer { display: none !important; }
  .docs { display: block; width: auto; max-width: none; margin: 0 0 0 268px; padding: 0; background: var(--bg); }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: 268px; padding: 20px 16px 24px; background: #fff; border-right: 1px solid var(--border-light); overflow-y: auto; z-index: 30; }
  .sidebar__head { display: block; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--border-light); }
  .sidebar__brand { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 700; color: var(--text-1); }
  .sidebar__brand img { width: 28px; height: 28px; object-fit: contain; flex: none; }
  .sidebar__search { display: flex; align-items: center; gap: 8px; width: 100%; height: 38px; margin-top: 20px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-alt); color: var(--text-3); font: 13px var(--font-sans); text-align: left;
    transition: border-color .18s ease, background-color .18s ease, color .18s ease; }
  .sidebar__search:hover { border-color: var(--primary-border); background: #fff; color: var(--text-1); }
  .sidebar__search svg { width: 15px; height: 15px; flex: none; }
  .sidebar__search kbd { margin-left: auto; padding: 1px 5px; border: 1px solid var(--border); border-radius: 4px; background: #fff; color: var(--text-4); font: 11px var(--font-mono); }
  .sidebar__group { display: block; margin-bottom: 18px; }
  .sidebar__title { margin: 0 10px 5px; }
  .sidebar__link { display: flex; height: auto; min-height: 34px; padding: 7px 10px; border-radius: 7px; font-size: 13px; background: none; border: 0; }
  .sidebar__link .badge { margin-left: auto; }
  .article { width: min(calc(100% - 360px), 860px); margin: 0 auto; padding: 72px 0 96px; }
  .toc { position: fixed; top: 72px; right: max(24px, calc((100vw - 1128px) / 2)); width: 190px; padding-left: 16px; max-height: calc(100vh - 96px); overflow-y: auto; }
  .footer { margin-left: 268px; }
  body.landing .topbar { display: flex; }
}
@media (min-width: 769px) and (max-width: 1180px) {
  .docs { margin-left: 240px; }
  .sidebar { width: 240px; }
  .article { width: min(calc(100% - 64px), 860px); }
  .toc { display: none; }
  .footer { margin-left: 240px; }
}
@media (max-width: 1180px) {
  .hero__grid { grid-template-columns: 1fr; gap: 48px; }
  .tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dev-layout { grid-template-columns: 1fr; gap: 32px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1024px) {
  .topbar__slot { display: none; }
  .path__track { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; gap: 36px; }
  .path__track::before { display: none; }
}
@media (max-width: 900px) {
  .faq { grid-template-columns: 1fr; gap: 24px; }
  .faq__sticky { position: static; }
  .footer--site .footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .footer__entity-grid { grid-template-columns: 1fr; }
  .docs { padding-top: 104px; gap: 0; }
  .topbar__cta { display: none; }
  .burger { display: grid; }
  .features { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .hero { padding-top: 108px; padding-bottom: 72px; }
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-stats__cell:nth-child(2n) { border-right: 0; }
  .hero-stats__cell:nth-child(4n) { border-right: 0; }
  .hero-stats__cell:nth-child(n+3) { border-bottom: 1px solid var(--border-light); }
  .hero-stats__cell:nth-child(n+2):nth-child(odd) { border-bottom: 0; }
  .demo__body { grid-template-columns: 1fr; }
  .demo__pane + .demo__pane { border-left: 0; border-top: 1px solid var(--code-border); }
  .demo-float { position: static; margin-top: 14px; animation: none; }
  .section { padding: 64px 0; }
  .cta-band { padding: 40px 28px; }
  .cta-band h2 { font-size: 23px; }
  .tools-grid { grid-template-columns: 1fr; }
  .article h1 { font-size: 26px; }
  .article__body { font-size: 14.5px; }
  .codeblock pre { padding: 14px; font-size: 12px; }
  .callout { padding: 12px 14px; }
  .steps li::before { width: 26px; height: 26px; }
}
@media (max-width: 640px) {
  .hero__actions { grid-template-columns: 1fr; }
  .pager { grid-template-columns: 1fr; }
  .pager__card--next { text-align: left; }
  .footer__links { margin-left: 0; width: 100%; }
  .footer__links a:first-child { margin-left: 0; padding-left: 0; border-left: 0; }
  .search-mask { padding-top: 9vh; }
  .footer__legal .container { justify-content: center; text-align: center; }
}
@media (hover: none) {
  .demo-float { animation: none; }
}

/* ============================== 动效降级 ============================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .js .reveal { opacity: 1; transform: none; }
  .marquee__row { animation: none; }
  .hero-grad-line { opacity: 1; transform: none; animation: none; }
  .demo-float { animation: none; }
}