/* Tab 使用 aria-selected 与 hidden 作为唯一可见状态。 */
.tabs { min-width:0; }
.tab-list,[role="tablist"] { display:flex; align-items:center; gap:8px; max-width:100%; overflow-x:auto; padding:4px; scrollbar-width:thin; }
.tab-list [role="tab"],[role="tablist"] > [role="tab"] {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-shrink:0;
  min-height:44px;
  padding:10px 20px;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  background:var(--bg-panel);
  color:var(--text-muted);
  font-family:var(--font-body);
  font-size:var(--fs-14);
  font-weight:600;
  text-align:center;
}
[role="tab"][aria-selected="true"] { background:var(--bg-panel); color:var(--text); border-color:var(--accent-dark); box-shadow:var(--shadow-sm); }
[role="tab"]:hover { color:var(--text); }
[role="tabpanel"] { min-width:0; scroll-margin-top:24px; }
.tab-panel { margin-top:24px; }
.feature-browser { display:grid; grid-template-columns:minmax(0,38fr) minmax(0,62fr); align-items:start; gap:32px; }
.feature-browser > * { min-width:0; }
.feature-tabs[role="tablist"] { display:flex; flex-direction:column; align-items:stretch; gap:6px; padding:0; overflow:visible; }
.feature-tabs [role="tab"] {
  position:relative;
  display:block;
  width:100%;
  flex-shrink:1;
  padding:18px 20px;
  border:0;
  border-radius:var(--r-md);
  background:var(--clear);
  color:var(--text-muted);
  text-align:left;
}
.feature-tabs [role="tab"] b { display:block; font-size:var(--fs-16); color:var(--text); }
.feature-tabs [role="tab"] small { display:block; margin-top:4px; font-size:var(--fs-13); line-height:1.5; font-weight:400; }
.feature-tabs [role="tab"][aria-selected="true"] { background:var(--bg-panel); color:var(--text-muted); box-shadow:var(--shadow-sm); }
.feature-tabs [role="tab"][aria-selected="true"]::before { content:""; position:absolute; left:0; top:20px; width:3px; height:24px; border-radius:var(--r-pill); background:var(--accent-grad); }
.tab-progress { display:block; position:absolute; bottom:0; left:20px; right:20px; height:2px; overflow:hidden; background:var(--line); border-radius:var(--r-pill); }
.tab-progress::after { content:""; display:block; width:100%; height:100%; background:var(--accent-grad-x); transform:scaleX(0); transform-origin:left; }
[data-running="true"] [aria-selected="true"] .tab-progress::after { animation:slice-timer var(--tab-duration,8s) linear forwards; }
@keyframes slice-timer { to { transform:scaleX(1); } }
.slice-window { border:1px solid var(--line); border-radius:var(--r-xl); background:var(--bg-panel); color:var(--text); box-shadow:var(--shadow-pop); overflow:hidden; }
.slice-chrome { display:flex; align-items:center; gap:18px; min-height:52px; padding:12px 20px; border-bottom:1px solid var(--line); font-size:var(--fs-13); color:var(--text-muted); }
.slice-chrome .lights { padding:0; }
.slice-content { padding:28px; }
.slice-content > :last-child { margin-bottom:0; }
.slice-content pre { margin-top:0; }
.slice-content p { margin-top:24px; color:var(--text-muted); font-size:var(--fs-15); line-height:1.85; }
.slice-content h3 { margin:0 0 18px; }
.toc { position:sticky; top:16px; z-index:10; display:flex; flex-wrap:wrap; align-items:center; gap:8px; max-width:100%; margin-block:24px; padding:10px; overflow-x:visible; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--bg-panel); color:var(--text); box-shadow:var(--shadow-sm); overscroll-behavior-x:contain; }
.toc a { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:8px 16px; flex-shrink:0; border-radius:var(--r-pill); font-size:var(--fs-14); }
.toc a:hover,.toc a[aria-current="location"] { background:var(--bg-panel-2); color:var(--text); }
.toc-static { position:static; }
.faq-item { border-bottom:1px solid var(--line); }
.faq-item summary { position:relative; padding:22px 40px 22px 0; cursor:pointer; list-style:none; font-weight:650; font-size:var(--fs-16); }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; position:absolute; right:8px; top:20px; font-size:var(--fs-22); line-height:1; color:var(--text-muted); }
.faq-item[open] summary::after { content:"−"; }
.faq-answer { padding:0 32px 22px 0; color:var(--text-muted); }
.faq-answer p:last-child { margin-bottom:0; }
.term-card { position:relative; border-top:3px solid var(--line-strong); }
.term-card dt,.term-card h3 { margin:0 0 6px; font-family:var(--font-display); font-size:var(--fs-20); font-weight:750; }
.term-card dd { margin:0; color:var(--text-muted); }
.term-key { display:block; margin-bottom:14px; font-family:var(--font-mono); font-size:var(--fs-12); color:var(--text-muted); overflow-wrap:anywhere; }
.badge,.chip { display:inline-flex; align-items:center; justify-content:center; gap:6px; max-width:100%; padding:5px 10px; border:1px solid var(--line); border-radius:var(--r-pill); background:var(--bg-panel-2); color:var(--text); font-size:var(--fs-12); line-height:1.4; font-weight:600; white-space:normal; overflow-wrap:anywhere; vertical-align:middle; }
.badge::before { width:5px; height:5px; flex-shrink:0; border-radius:var(--r-circle); }
.badge-pick::before,.badge-recommended::before { content:""; background:var(--accent-grad); }
.badge-pick { box-shadow:inset 0 0 0 1px var(--accent-ring); }
.badge-archived { background:var(--bg-panel-2); color:var(--text-muted); }
.client-card { padding:30px; border-radius:var(--r-xl); }
.client-card.is-featured { border-color:var(--accent-dark); box-shadow:var(--shadow-pop); }
.client-heading { display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:18px; }
.client-heading h3 { margin:0; }
.client-meta { color:var(--text-muted); font-size:var(--fs-13); }
.client-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:24px; }
[data-ver]:empty { display:none; }
.client-icon { width:56px; height:56px; flex-shrink:0; }
.article-card { display:flex; flex-direction:column; height:100%; }
.article-card h3 { font-size:var(--fs-20); line-height:1.5; margin-top:18px; }
.article-card h3 a:hover { text-decoration:underline; text-underline-offset:5px; }
.article-meta { display:flex; align-items:center; flex-wrap:wrap; gap:10px; color:var(--text-muted); font-size:var(--fs-12); }
.article-card p { color:var(--text-muted); font-size:var(--fs-14); }
.article-card .article-read { margin-top:auto; padding-top:16px; font-size:var(--fs-14); font-weight:600; }
.callout { margin:24px 0; padding:20px 24px; border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:var(--r-md); background:var(--bg-panel-2); color:var(--text); font-size:var(--fs-15); }
.callout p:last-child { margin-bottom:0; }
.callout strong { display:block; margin-bottom:6px; }
.callout-warning { border-left-color:var(--warn); }
.callout-error { border-left-color:var(--error); }
.callout-success { border-left-color:var(--success); }
.table-scroll { max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; border:1px solid var(--line); border-radius:var(--r-md); background:var(--bg-panel); color:var(--text); }
.data-table { width:100%; border-collapse:collapse; font-size:var(--fs-14); text-align:left; }
.data-table caption { padding:16px; font-weight:650; text-align:left; }
.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-bottom:1px solid var(--line);
  vertical-align:top;
  overflow-wrap:normal;
  word-break:normal;
}
.data-table th,.prose table th,.article-body table th { background:var(--bg-panel-2); color:var(--text); font-weight:650; }
.data-table tr:last-child td { border-bottom:0; }
.prose table,.article-body table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; min-width:0; width:100%; border-collapse:collapse; font-size:var(--fs-14); text-align:left; }
.prose table code,.article-body table code,.data-table code { overflow-wrap:anywhere; word-break:normal; }
.download-guide { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:40px; padding:28px; border:1px solid var(--line); border-radius:var(--r-xl); background:var(--bg-panel-2); color:var(--text); }
.download-guide h2 { margin:0 0 8px; font-size:var(--fs-22); }
.download-guide p { margin:0; color:var(--text-muted); font-size:var(--fs-14); }
.download-guide .btn { flex-shrink:0; }
.dl-fab {
  position:fixed;
  z-index:30;
  right:max(20px,env(safe-area-inset-right));
  bottom:max(20px,env(safe-area-inset-bottom));
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  max-width:calc(100vw - 40px);
  min-height:52px;
  padding:12px 20px;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  background:var(--bg-panel);
  color:var(--text);
  box-shadow:var(--shadow-pop);
  font-size:var(--fs-14);
  font-weight:700;
}
.dl-fab svg { width:20px; height:20px; flex-shrink:0; }
.dl-fab:hover { border-color:var(--accent-dark); }
.has-dl-fab .site-footer { padding-bottom:100px; }

/* 静态设计预览工具。 */
.preview-heading { margin-bottom:28px; }
.preview-heading p { margin:10px 0 0; color:var(--text-muted); }
.swatch-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.swatch { margin:0; padding:12px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--bg-panel); color:var(--text); font-size:var(--fs-12); }
.swatch-sample { display:block; height:68px; margin-bottom:10px; border:1px solid var(--line); border-radius:var(--r-sm); }
.sw-bg { background:var(--bg); }
.sw-panel { background:var(--bg-panel); }
.sw-panel2 { background:var(--bg-panel-2); }
.sw-line { background:var(--line); }
.sw-line-strong { background:var(--line-strong); }
.sw-accent { background:var(--accent); }
.sw-accent-dark { background:var(--accent-dark); }
.sw-text { background:var(--text); }
.sw-muted { background:var(--text-muted); }
.sw-ink { background:var(--ink); }
.sw-success { background:var(--success); }
.sw-warn { background:var(--warn); }
.sw-error { background:var(--error); }
.sw-close { background:var(--dot-close); }
.sw-min { background:var(--dot-min); }
.sw-max { background:var(--dot-max); }
.sw-grad { background:var(--accent-grad); }
.sw-ring { background:var(--accent-ring); }
.sw-glow { background:var(--glow-amber); }
.sw-spot { background:var(--spot); }
.sw-clear { background:var(--spot-fade); }
.sw-row { background:var(--hl-row); }
.sw-veil { background:var(--veil); }
.sw-success-ring { background:var(--success-ring); }
.type-display { font-family:var(--font-display); font-size:var(--fs-h1); font-weight:900; line-height:1.2; }
.preview-button-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.preview-tokens { margin-top:20px; color:var(--text-muted); font-size:var(--fs-13); }
@media (max-width:960px) {
  .feature-browser { gap:20px; }
  .swatch-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .feature-browser { grid-template-columns:minmax(0,1fr); }
  .feature-tabs[role="tablist"] { flex-direction:row; align-items:stretch; gap:8px; overflow-x:auto; padding:4px; }
  .feature-tabs [role="tab"] { width:auto; flex-shrink:0; padding:10px 18px; border:1px solid var(--line); border-radius:var(--r-pill); text-align:center; }
  .feature-tabs [role="tab"] b { font-size:var(--fs-14); }
  .feature-tabs [role="tab"] small { display:none; }
  .feature-tabs [role="tab"][aria-selected="true"] { border-color:var(--accent-dark); }
  .feature-tabs [role="tab"][aria-selected="true"]::before { display:none; }
  .tab-progress { left:16px; right:16px; }
  .slice-content { padding:22px; }
  .download-guide { align-items:flex-start; flex-direction:column; }
  .client-card { padding:22px; }
}
@media (max-width:640px) {
  .swatch-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .type-display { font-size:var(--fs-h1-mobile); }
  .dl-fab { right:18px; bottom:max(18px,env(safe-area-inset-bottom)); max-width:calc(100vw - 36px); }
  .toc { top:8px; }
}