/* Tabs：每组使用 data-tabs，面板由 aria-controls 关联。 */
.tabs { min-width:0 }
[role="tablist"] { display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:24px }
[role="tab"] { min-height:46px;padding:10px 18px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--white);color:var(--ink-2);font-weight:700;line-height:1.5 }
[role="tab"]:hover { border-color:var(--accent);color:var(--accent-dark) }
[role="tab"][aria-selected="true"] { border-color:var(--accent);background:var(--blue-wash);color:var(--accent-dark);box-shadow:inset 0 -2px 0 var(--accent) }
[role="tabpanel"] { min-width:0 }
.dark [role="tab"] { background:var(--bg-panel);color:var(--text-muted);border-color:var(--border) }
.dark [role="tab"][aria-selected="true"] { background:var(--bg-panel-2);color:var(--text);border-color:var(--cyan) }

/* 产品示意窗 + 手风琴。面板可作为 tablist 的兄弟，保持 ARIA 语义。 */
.feature-layout { display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start;gap:56px;margin-top:44px }
.feature-layout>* { min-width:0 }
.feature-accordion [role="tablist"] { display:block;margin-bottom:0 }
.feature-item { border-bottom:1px solid var(--line) }
.feature-item [role="tab"] { display:block;width:100%;padding:24px 20px;text-align:left;border:0;border-radius:0;background:var(--clear);color:var(--ink);font-size:25px;font-weight:900;box-shadow:none }
.feature-item [role="tab"][aria-selected="true"] { color:var(--accent-dark) }
.feature-item:has([aria-selected="true"]) { border:1px solid var(--accent);border-radius:var(--r-card);background:var(--grad-wash);color:var(--ink) }
.feature-item [role="tabpanel"] { padding:0 20px 24px;color:var(--ink-2) }
.feature-item [role="tabpanel"] p { font-size:15px;line-height:1.85 }
.feature-item [role="tabpanel"] .link { font-weight:700 }
.feature-actions { text-align:center;margin-top:40px }
.app-demo { border:1px solid var(--line);border-radius:var(--r-win);background:var(--white);color:var(--ink);box-shadow:0 20px 50px var(--paper-shadow);overflow:hidden }
.app-demo-bar { display:flex;align-items:center;gap:7px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--paper-soft);color:var(--ink-2);font-family:var(--font-mono);font-size:13px }
.app-demo-bar .dot { width:8px;height:8px;background:var(--line);flex-shrink:0 }
.app-demo-bar span:last-child { margin-left:10px }
.app-demo-menu { display:flex;flex-wrap:wrap;gap:20px;padding:14px 22px;border-bottom:1px solid var(--line);font-size:13px;color:var(--ink-2) }
.app-demo-body { padding:24px;display:grid;gap:16px }
.setting { position:relative;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;min-height:76px;padding:18px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--white);color:var(--ink) }
.setting small { display:block;color:var(--ink-2);font-size:12px }
.setting.is-highlighted { border-color:var(--accent);outline:1px solid var(--accent) }
.setting.is-highlighted::after { content:"";position:absolute;right:-1px;top:-1px;width:12px;height:12px;border-top:4px solid var(--lime);border-right:4px solid var(--lime);border-radius:0 var(--r-ctl) 0 0 }
.setting-value { padding:5px 10px;border:1px solid var(--line);border-radius:var(--r-tag);font-size:13px;max-width:100% }
.switch-demo { display:inline-block;position:relative;width:36px;height:20px;border-radius:var(--r-pill);background:var(--line);flex-shrink:0 }
.switch-demo::after { content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:var(--r-dot);background:var(--white) }
.app-demo-note { margin:0;padding:0 24px 24px;font-size:12px;color:var(--ink-2) }

.toc { position:sticky;top:0;z-index:12;display:flex;flex-wrap:wrap;gap:8px;overflow-x:visible;max-width:100%;padding:12px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--white);color:var(--ink);box-shadow:var(--shadow-paper);overscroll-behavior-inline:contain;scrollbar-width:thin }
.toc a { display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border-radius:var(--r-ctl);white-space:nowrap;flex-shrink:0;font-size:14px }
.toc a:hover,.toc a[aria-current="location"] { background:var(--blue-wash);color:var(--accent-dark) }
.toc.is-static { position:static }
.faq-item { border-bottom:1px solid var(--line);background:var(--white);color:var(--ink) }
.faq-item summary { position:relative;cursor:pointer;list-style:none;padding:22px 44px 22px 0;font-size:18px;font-weight:700;line-height:1.5 }
.faq-item summary::-webkit-details-marker { display:none }
.faq-item summary::after { content:"+";position:absolute;right:12px;top:20px;font-family:var(--font-mono);font-size:22px;color:var(--accent-dark) }
.faq-item[open] summary::after { content:"−" }
.faq-answer { padding-bottom:24px;max-width:64em;color:var(--ink-2) }
.faq-answer p:last-child { margin-bottom:0 }
.term-card { border-top:3px solid var(--accent) }
.term-en { display:block;margin-bottom:12px;font-family:var(--font-mono);font-size:12px;color:var(--ink-2) }
.term-card h3 { margin-bottom:4px }
.client-card { position:relative;display:flex;flex-direction:column;gap:20px }
.client-heading { display:flex;align-items:center;gap:16px;flex-wrap:wrap }
.client-heading img { width:56px;height:56px;flex-shrink:0 }
.client-heading h3 { margin:0 }
.client-meta { display:flex;flex-wrap:wrap;gap:12px;font-family:var(--font-mono);font-size:13px;color:var(--ink-2) }
.client-actions { display:flex;flex-wrap:wrap;gap:12px;margin-top:auto }
.client-card.is-preferred { border-color:var(--accent);box-shadow:0 4px 24px var(--paper-shadow),inset 0 3px 0 var(--accent) }
.badge { display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:4px 9px;border:1px solid var(--line);border-radius:var(--r-tag);font-size:12px;font-weight:700;line-height:1.5;white-space:normal;overflow:hidden;overflow-wrap:anywhere;background:var(--paper-soft);color:var(--ink-2) }
.badge-first { background:var(--accent);color:var(--white);border-color:var(--accent) }
.badge-recommended { background:var(--blue-wash);color:var(--accent-dark);border-color:var(--accent) }
.badge-retired { background:var(--paper-soft);color:var(--ink-2);border-style:dashed }
.tag-row { display:flex;flex-wrap:wrap;align-items:center;gap:8px }
.article-card { display:flex;flex-direction:column;gap:16px }
.article-card h3 { margin:0;font-size:21px;line-height:1.5 }
.article-card h3 a:hover { color:var(--accent-dark);text-decoration:underline;text-underline-offset:4px }
.article-card p { color:var(--ink-2) }
.article-meta { display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:12px;color:var(--ink-2) }
.article-card .link { margin-top:auto;align-self:flex-start }
.callout { margin-block:28px;padding:22px 24px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r-ctl);background:var(--blue-wash);color:var(--ink) }
.callout p:last-child { margin-bottom:0 }
.callout-title { display:block;margin-bottom:8px;font-weight:800 }
.callout-warning { border-left-color:var(--warn) }
.callout-error { border-left-color:var(--error) }
.dark .callout { background:var(--bg-panel);color:var(--text);border-color:var(--border);border-left-color:var(--cyan) }

.table-scroll { width:100%;max-width:100%;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain }
.data-table { width:100%;border-collapse:collapse;font-size:14px;background:var(--white);color:var(--ink) }
.data-table th,.data-table td,.prose table th,.prose table td,.article-body table th,.article-body table td { min-width:7em;padding:14px 18px;border:1px solid var(--line);text-align:left;vertical-align:top;overflow-wrap:normal;word-break:normal }
.data-table th,.prose table th,.article-body table th { background:var(--paper-soft);color:var(--ink);font-weight:700 }
.data-table td code,.data-table th code,.prose table code,.article-body table code { overflow-wrap:anywhere;white-space:normal }
.prose table,.article-body table { display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;min-width:0;border-collapse:collapse;background:var(--white);color:var(--ink) }
.prose table td,.article-body table td { background:var(--white);color:var(--ink) }
.prose table caption,.article-body table caption { text-align:left;padding-block:12px;color:var(--ink-2) }

.article-download { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px;margin-top:48px;padding:28px;border:1px solid var(--border);border-radius:var(--r-card);background:var(--bg);color:var(--text);box-shadow:0 8px 32px var(--paper-shadow) }
.article-download h2 { margin-bottom:8px;font-size:24px }
.article-download p { margin:0;color:var(--text-muted) }
.article-download>div { min-width:0 }
.dl-fab { position:fixed;right:24px;bottom:24px;z-index:25;display:flex;align-items:center;gap:12px;max-width:calc(100vw - 40px);min-height:56px;padding:12px 18px;border:1px solid var(--border);border-radius:var(--r-card);background:var(--bg-panel);color:var(--text);box-shadow:0 12px 32px var(--shade-2) }
.dl-fab svg { width:22px;height:22px;fill:none;stroke:var(--cyan);stroke-width:1.8;flex-shrink:0 }
.dl-fab strong { display:block;font-size:14px }
.dl-fab small { display:block;color:var(--text-muted);font-size:12px }
.dl-fab:hover { border-color:var(--cyan) }
.trust-section { position:relative;overflow-x:clip;background:var(--bg);color:var(--text) }
.trust-section::before { content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,var(--cyan-ring) 1px,var(--clear) 1.5px);background-size:67px 73px }
.trust-section .wrap { position:relative }

/* 预览专用色板，颜色仍来自全局令牌。 */
.token-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:28px }
.token { min-width:0;padding:10px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--white);color:var(--ink) }
.token i { display:block;height:54px;border:1px solid var(--line);border-radius:var(--r-tag);margin-bottom:8px }
.token code { font-size:11px }
.sw-bg { background:var(--bg) }
.sw-panel { background:var(--bg-panel) }
.sw-panel2 { background:var(--bg-panel-2) }
.sw-border { background:var(--border) }
.sw-accent { background:var(--accent) }
.sw-accent-dark { background:var(--accent-dark) }
.sw-cyan { background:var(--cyan) }
.sw-lime { background:var(--lime) }
.sw-text { background:var(--text) }
.sw-muted { background:var(--text-muted) }
.sw-success { background:var(--success) }
.sw-warn { background:var(--warn) }
.sw-error { background:var(--error) }
.sw-white { background:var(--white) }
.sw-soft { background:var(--paper-soft) }
.sw-ink { background:var(--ink) }
.sw-ink2 { background:var(--ink-2) }
.sw-ink3 { background:var(--ink-3) }
.sw-line { background:var(--line) }
.sw-art { background:var(--line-art) }
.sw-punc { background:var(--code-punc) }
.sw-field-cyan { background:var(--field-cyan) }
.sw-field-blue { background:var(--field-blue) }
.sw-field-deep { background:var(--field-deep) }
.sw-glow-cyan { background:var(--glow-cyan) }
.sw-glow-blue { background:var(--glow-blue) }
.sw-lime-glow { background:var(--lime-glow) }
.sw-accent-shadow { background:var(--accent-shadow) }
.sw-shade1 { background:var(--shade-1) }
.sw-shade2 { background:var(--shade-2) }
.sw-shade3 { background:var(--shade-3) }
.sw-glass { background:var(--glass) }
.sw-panel-a { background:var(--panel-a) }
.sw-border-soft { background:var(--border-soft) }
.sw-ghost { background:var(--ghost-line) }
.sw-hi { background:var(--hi-line) }
.sw-ring { background:var(--cyan-ring) }
.sw-edge { background:var(--cap-edge) }
.sw-paper-shadow { background:var(--paper-shadow) }
.sw-wash { background:var(--blue-wash) }
.sw-mask { background:var(--mask) }
.sw-clear { background:var(--clear) }
.sw-grad { background:var(--grad-accent) }
.sw-neon { background:var(--grad-neon) }
.sw-btn { background:var(--grad-btn) }
.sw-grad-wash { background:var(--grad-wash) }
.preview-row { display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-block:24px }
.type-sample { border-bottom:1px solid var(--line);padding-block:24px }
.type-display { font-family:var(--font-display);font-size:48px;font-weight:900;line-height:1.1 }
.type-mono { font-family:var(--font-mono);font-size:14px }
@media(max-width:1000px) {
  .feature-layout { grid-template-columns:minmax(0,1fr);gap:32px }
  .feature-item [role="tab"] { font-size:23px }
}
@media(max-width:640px) {
  .token-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .feature-item [role="tab"] { font-size:21px;padding:20px 16px }
  .feature-item [role="tabpanel"] { padding-inline:16px }
  .app-demo-body { padding:16px;gap:12px }
  .setting { padding:14px }
  [role="tablist"] { gap:6px }
  [role="tab"] { padding:10px 12px;font-size:14px }
  .dl-fab { right:20px;bottom:16px;padding:10px 14px }
  .dl-fab small { display:none }
  .type-display { font-size:30px }
}