/* 切换由 tabs.js 管理。普通 tab 面板必须位于同一个 data-tabs 容器。 */
.tabs {min-width:0}
.tab-list,[role="tablist"].tab-list {
  display:flex;align-items:center;gap:8px;
  max-width:100%;overflow-x:auto;padding:6px 2px 12px;
  scrollbar-width:thin;
}
.tab-list [role="tab"] {
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;min-height:44px;padding:10px 20px;
  border:1px solid var(--c-border);border-radius:var(--r-pill);
  background:var(--c-bg);color:var(--c-muted);font-weight:600;
}
.tab-list [role="tab"]:hover {color:var(--c-text);border-color:var(--c-muted)}
.tab-list [role="tab"][aria-selected="true"] {background:var(--c-accent);color:var(--c-text);border-color:var(--c-accent)}
.tab-panel {min-width:0;padding-top:24px}
.tab-panel:focus-visible {outline-offset:6px}
.feature-split {
  display:grid;grid-template-columns:minmax(0,.43fr) minmax(0,.57fr);
  background:var(--c-panel);color:var(--c-text);
  border:1px solid var(--c-border);border-radius:var(--r-panel);
  overflow:hidden;
}
.feature-tabs {
  display:flex;flex-direction:column;gap:10px;
  padding:48px 40px;border-right:1px solid var(--c-border);
}
.feature-tabs [role="tab"] {
  position:relative;display:block;width:100%;min-height:64px;text-align:left;
  padding:12px 12px 16px 28px;border:0;
  background:var(--c-clear);color:var(--c-muted);
  font-family:var(--font-display);font-size:clamp(20px,2.3vw,28px);font-weight:800;
}
.feature-tabs [role="tab"]::before {
  content:"";position:absolute;left:0;top:26px;width:8px;height:8px;
  border-radius:var(--r-circle);background:var(--c-clear);color:var(--c-text);
}
.feature-tabs [aria-selected="true"] {color:var(--c-text)}
.feature-tabs [aria-selected="true"]::before {background:var(--c-accent);color:var(--c-text)}
.tab-progress {
  position:absolute;bottom:0;left:28px;right:12px;height:2px;
  background:var(--c-accent);color:var(--c-text);transform:scaleX(0);transform-origin:left;
}
.tabs.is-playing [aria-selected="true"] .tab-progress {animation:shelf-progress var(--tab-duration) linear forwards}
.tabs:not(.is-playing) [aria-selected="true"] .tab-progress {transform:scaleX(1)}
@keyframes shelf-progress {from {transform:scaleX(0)} to {transform:scaleX(1)}}
.feature-detail {min-width:0;padding-top:48px;padding-left:40px}
.feature-card {
  min-height:420px;padding:40px;
  background:var(--c-bg);color:var(--c-text);
  border:1px solid var(--c-border);border-right:0;border-bottom:0;
  border-radius:var(--r-card) 0 0 0;
}
.feature-card h3 {margin:0 0 20px}
.feature-card p {color:var(--c-muted)}
.feature-card pre {margin-bottom:0}
.toc {
  position:sticky;top:12px;z-index:10;
  display:flex;flex-wrap:wrap;gap:8px;
  padding:12px;border:1px solid var(--c-border);border-radius:var(--r-ctrl);
  background:var(--c-bg);color:var(--c-text);margin-bottom:40px;
}
.toc a {display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 14px;color:var(--c-muted);border-radius:var(--r-small)}
.toc a:hover,.toc a[aria-current="location"] {background:var(--c-panel);color:var(--c-text);text-decoration:none}
.toc.is-static {position:static}
.faq-item {
  border:1px solid var(--c-border);border-radius:var(--r-ctrl);
  background:var(--c-bg);color:var(--c-text);margin-bottom:12px;
}
.faq-item summary {position:relative;list-style:none;cursor:pointer;padding:22px 56px 22px 24px;font-weight:700}
.faq-item summary::-webkit-details-marker {display:none}
.faq-item summary::after {content:"+";position:absolute;right:24px;top:20px;font-family:var(--font-mono);font-size:22px;color:var(--c-muted)}
.faq-item[open] summary::after {content:"−"}
.faq-answer {padding:0 24px 24px;color:var(--c-muted)}
.faq-answer p:last-child {margin-bottom:0}
.term-card {position:relative;padding:32px;border-top:3px solid var(--c-text)}
.term-card .term-name {margin:12px 0 16px}
.term-alias {font-family:var(--font-mono);font-size:var(--fs-small);color:var(--c-muted)}
.term-card p {color:var(--c-muted)}
.badge,.tag {
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  max-width:100%;padding:5px 11px;border:1px solid var(--c-border);
  border-radius:var(--r-pill);background:var(--c-panel);color:var(--c-muted);
  font-size:12px;font-weight:600;line-height:1.5;
  white-space:normal;overflow-wrap:anywhere;
}
.badge-prime {background:var(--c-accent);color:var(--c-text);border-color:var(--c-accent)}
.badge-recommended {background:var(--c-bg);color:var(--c-accent-dark);border-color:var(--c-accent-dark)}
.badge-archived {background:var(--c-panel);color:var(--c-muted);border-color:var(--c-border)}
.badge-dot {width:6px;height:6px;border-radius:var(--r-circle);flex-shrink:0;background:var(--c-accent-dark);color:var(--c-on-dark)}
.client-card {display:grid;gap:24px}
.client-card.is-prime {border-color:var(--c-accent-dark)}
.client-head {display:flex;align-items:flex-start;gap:16px}
.client-head > div {min-width:0}
.app-icon {width:56px;height:56px;flex-shrink:0}
.client-title {margin:0 0 8px}
.client-summary {color:var(--c-muted);margin:0}
.client-meta {display:flex;flex-wrap:wrap;gap:12px;margin:0;padding:0;list-style:none;font-size:var(--fs-small);color:var(--c-muted)}
[data-rev]:empty {display:none}
.client-actions {display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.client-actions .btn {min-height:48px;font-size:15px;padding:10px 20px}
.post-card {display:flex;flex-direction:column;gap:20px}
.post-meta {display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:var(--fs-small);color:var(--c-muted)}
.post-card h3 {margin:0}
.post-card h3 a {color:var(--c-text)}
.post-card p {margin:0;color:var(--c-muted)}
.post-link {margin-top:auto;font-weight:600}
.callout {
  margin:28px 0;padding:24px 28px;border:1px solid var(--c-border);
  border-left:4px solid var(--c-accent-dark);border-radius:var(--r-ctrl);
  background:var(--c-panel);color:var(--c-text);
}
.callout p:last-child {margin-bottom:0}
.callout-title {display:block;margin-bottom:8px;font-weight:700}
.callout-warning {border-left-color:var(--c-warn)}
.callout-error {border-left-color:var(--c-error)}
.callout-success {border-left-color:var(--c-success)}
.table-scroll {max-width:100%;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--c-border);border-radius:var(--r-ctrl)}
.data-table {width:100%;border-collapse:collapse;background:var(--c-bg);color:var(--c-text);font-size:var(--fs-small)}
.data-table th,.data-table td,.prose table th,.prose table td {
  min-width:7em;padding:18px 20px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--c-border);overflow-wrap:normal;word-break:normal;
}
.data-table th,.prose table th {background:var(--c-panel);color:var(--c-text);font-weight:700}
.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;
  background:var(--c-bg);color:var(--c-text);
}
.article-body table th,.article-body table td {min-width:7em;padding:18px 20px;overflow-wrap:normal;word-break:normal;border-bottom:1px solid var(--c-border)}
.article-body table th {background:var(--c-panel);color:var(--c-text)}
.prose table code,.article-body table code,.data-table code {overflow-wrap:anywhere;white-space:normal}
.download-guide {
  display:flex;align-items:center;justify-content:space-between;gap:28px;
  margin-top:56px;padding:32px;border-radius:var(--r-card);
  border:1px solid var(--c-border);background:var(--c-panel);color:var(--c-text);
}
.download-guide > div {min-width:0}
.download-guide h3 {margin:0 0 12px}
.download-guide p {margin:0;color:var(--c-muted)}
.download-guide .btn {flex-shrink:0}
.dl-fab {
  position:fixed;right:24px;bottom:24px;z-index:20;
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:56px;max-width:calc(100% - 40px);padding:14px 22px;
  background:var(--c-accent);color:var(--c-text);
  border:1px solid var(--c-accent-dark);border-radius:var(--r-pill);font-weight:700;
}
.dl-fab svg {width:20px;height:20px;flex-shrink:0}
.dl-fab:hover {background:var(--c-accent-hover);color:var(--c-text);text-decoration:none}
.quickstart-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-block:40px}
.quickstart-grid > * {min-width:0}
.step-mark {font-family:var(--font-mono);font-size:14px;font-weight:700;border-bottom:1px solid var(--c-text);padding-bottom:12px}
.quickstart-grid h3 {margin-block:20px 12px}
.quickstart-grid p {color:var(--c-text)}
.breadcrumb {display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 32px;padding:0;font-size:var(--fs-small);color:var(--c-muted)}
.breadcrumb li + li::before {content:"/";margin-right:8px;color:var(--c-muted)}
/* 预览专用陈列；不引入额外颜色。 */
.preview-block {padding-top:80px;padding-bottom:80px}
.preview-heading {margin:0 0 32px}
.swatch-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.swatch {min-width:0;margin:0;border:1px solid var(--c-border);border-radius:var(--r-ctrl);overflow:hidden;background:var(--c-bg);color:var(--c-text)}
.swatch-color {height:64px;border-bottom:1px solid var(--c-border)}
.swatch figcaption {padding:12px;font-family:var(--font-mono);font-size:12px;overflow-wrap:anywhere}
.sw-bg {background:var(--c-bg);color:var(--c-text)}
.sw-panel {background:var(--c-panel);color:var(--c-text)}
.sw-dark {background:var(--c-dark);color:var(--c-on-dark)}
.sw-border {background:var(--c-border);color:var(--c-text)}
.sw-accent {background:var(--c-accent);color:var(--c-text)}
.sw-accent-hover {background:var(--c-accent-hover);color:var(--c-text)}
.sw-accent-edge {background:var(--c-accent-edge);color:var(--c-text)}
.sw-accent-dark {background:var(--c-accent-dark);color:var(--c-on-dark)}
.sw-text {background:var(--c-text);color:var(--c-on-dark)}
.sw-muted {background:var(--c-muted);color:var(--c-on-dark)}
.sw-success {background:var(--c-success);color:var(--c-text)}
.sw-warn {background:var(--c-warn);color:var(--c-text)}
.sw-error {background:var(--c-error);color:var(--c-on-dark)}
.sw-graphite {background:var(--c-graphite);color:var(--c-on-dark)}
.sw-raised {background:var(--c-graphite-raised);color:var(--c-on-dark)}
.sw-deep {background:var(--c-graphite-deep);color:var(--c-on-dark)}
.sw-line {background:var(--c-graphite-line);color:var(--c-on-dark)}
.sw-line-soft {background:var(--c-graphite-line-soft);color:var(--c-on-dark)}
.sw-slab {background:var(--c-slab);color:var(--c-on-dark)}
.sw-dot-1 {background:var(--c-dot-1);color:var(--c-on-dark)}
.sw-dot-2 {background:var(--c-dot-2);color:var(--c-on-dark)}
.sw-dot-3 {background:var(--c-dot-3);color:var(--c-on-dark)}
.sw-off {background:var(--c-switch-off);color:var(--c-on-dark)}
.sw-knob {background:var(--c-knob-off);color:var(--c-text)}
.sw-on-dark {background:var(--c-on-dark);color:var(--c-text)}
.sw-on-dark-2 {background:var(--c-on-dark-2);color:var(--c-text)}
.sw-on-dark-muted {background:var(--c-on-dark-muted);color:var(--c-text)}
.sw-line-dark {background:var(--c-line-dark);color:var(--c-on-dark)}
.sw-line-hover {background:var(--c-line-dark-hover);color:var(--c-on-dark)}
.sw-lift {background:var(--c-stage-lift);color:var(--c-on-dark)}
.sw-panel-edge {background:var(--c-panel-edge);color:var(--c-text)}
.sw-caret {background:var(--c-caret);color:var(--c-on-dark)}
.sw-clear {background:var(--c-clear);color:var(--c-text)}
.sw-shadow-soft {background:var(--c-shadow-soft);color:var(--c-text)}
.sw-shadow-near {background:var(--c-shadow-near);color:var(--c-text)}
.sw-shadow-far {background:var(--c-shadow-far);color:var(--c-on-dark)}
.sw-veil {background:var(--c-veil);color:var(--c-on-dark)}
.button-gallery {display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.type-sample {font-size:var(--fs-h1);font-weight:900;line-height:1.15}
.preview-dark-buttons {padding:28px;border-radius:var(--r-card);background:var(--c-dark);color:var(--c-on-dark);margin-top:24px}
.preview-fab {position:static;margin-top:24px}
@media (max-width:1023px) {
  .feature-tabs {padding:32px 24px}
  .feature-detail {padding-top:32px;padding-left:24px}
  .feature-card {padding:28px}
  .swatch-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:768px) {
  .feature-split {grid-template-columns:minmax(0,1fr)}
  .feature-tabs {flex-direction:row;overflow-x:auto;gap:8px;padding:20px;border-right:0;border-bottom:1px solid var(--c-border)}
  .feature-tabs [role="tab"] {width:auto;flex-shrink:0;white-space:nowrap;min-height:44px;font-size:16px;padding:10px 18px;border:1px solid var(--c-border);border-radius:var(--r-pill)}
  .feature-tabs [role="tab"]::before {display:none}
  .feature-tabs [aria-selected="true"] {background:var(--c-accent);color:var(--c-text);border-color:var(--c-accent)}
  .feature-tabs .tab-progress {left:18px;right:18px}
  .feature-detail {padding:24px 0 0 24px}
  .feature-card {min-height:0}
  .quickstart-grid {grid-template-columns:minmax(0,1fr);gap:24px}
  .download-guide {flex-direction:column;align-items:flex-start}
}
@media (max-width:640px) {
  .swatch-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .preview-block {padding-top:56px;padding-bottom:56px}
  .toc {position:static;flex-wrap:nowrap;overflow-x:auto}
  .toc a {flex-shrink:0}
  .term-card {padding:24px}
  .callout {padding:20px}
  .dl-fab {right:20px;bottom:20px;min-height:50px;padding:12px 18px;font-size:14px}
  .preview-fab {position:static}
}
@media (prefers-reduced-motion:reduce) {
  .tab-progress {animation:none !important}
}