.tab-strip{display:flex;gap:24px;overflow-x:auto;max-width:100%;border-bottom:1px solid var(--c-line);padding-bottom:1px}
[role="tab"]{font-family:var(--f-display);cursor:pointer}
.tab-strip [role="tab"]{position:relative;flex-shrink:0;min-height:48px;padding:12px 8px;border:0;background:var(--clear);color:var(--c-ink-muted);font-size:var(--fs-body);font-weight:700}
.tab-strip [role="tab"]::after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;border-radius:var(--r-tab);background:var(--c-accent);transform:scaleX(0);transition:transform var(--speed) var(--ease)}
.tab-strip [role="tab"][aria-selected="true"]{color:var(--c-ink)}
.tab-strip [role="tab"][aria-selected="true"]::after{transform:scaleX(1)}
[role="tabpanel"]{min-width:0}
.tab-panels{padding-top:28px}
.deep .tab-strip{border-color:var(--c-border)}
.deep .tab-strip [role="tab"]{color:var(--c-text-muted)}
.deep .tab-strip [role="tab"][aria-selected="true"]{color:var(--c-text)}
.feature-layout{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:48px;align-items:start}
.feature-demo{min-height:420px;padding:0;border:1px solid var(--c-line);border-radius:var(--r-card);background:var(--c-paper-2);color:var(--c-ink);overflow:hidden}
.demo-titlebar{display:flex;align-items:center;gap:8px;min-height:44px;padding:12px 20px;background:var(--c-paper);color:var(--c-ink-muted);border-bottom:1px solid var(--c-line);font-family:var(--f-mono);font-size:var(--fs-xs)}
.demo-titlebar .demo-caption{margin-left:auto}
.demo-body{display:grid;grid-template-columns:minmax(100px,1fr) minmax(0,3fr);min-height:374px}
.demo-sidebar{padding:22px 16px;border-right:1px solid var(--c-line);font-size:var(--fs-sm)}
.demo-sidebar p{margin-bottom:20px}
.demo-settings{padding:28px;min-width:0}
.setting-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;min-height:58px;border-bottom:1px solid var(--c-line);font-size:var(--fs-sm)}
.setting-box{margin-top:20px;padding:20px;border:1px solid var(--c-line);border-radius:var(--r-ctl);background:var(--c-paper);color:var(--c-ink);font-family:var(--f-mono);font-size:var(--fs-sm)}
.switch-illustration{display:inline-block;position:relative;width:34px;height:20px;flex-shrink:0;border:1px solid var(--c-line);border-radius:var(--r-pill);background:var(--c-accent)}
.switch-illustration::after{content:"";position:absolute;right:3px;top:3px;width:12px;height:12px;border-radius:var(--r-round);background:var(--c-bg)}
.feature-controls{display:flex;flex-direction:column;gap:12px}
.feature-item{border:1px solid var(--clear);border-bottom-color:var(--c-line);border-radius:var(--r-card);background:var(--c-paper);color:var(--c-ink)}
.feature-item:has([aria-selected="true"]){border-color:var(--c-link);background:linear-gradient(120deg,var(--c-tab-tint),var(--c-paper));color:var(--c-ink)}
.feature-item [role="tab"]{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:22px;border:0;border-radius:var(--r-card);background:var(--clear);color:var(--c-ink);font-size:var(--fs-h3);font-weight:var(--fw-display);text-align:left}
.feature-item [aria-selected="true"]{color:var(--c-link)}
.feature-item [role="tab"]::after{content:"+";flex-shrink:0}
.feature-item [aria-selected="true"]::after{content:"−"}
.feature-detail{padding:0 22px 24px;color:var(--c-ink-muted);font-size:var(--fs-sm);line-height:1.85}
.feature-detail p{margin-bottom:12px}
.feature-detail a{font-weight:700}
.feature-bottom{margin-top:40px;text-align:center}
.toc{position:sticky;top:16px;z-index:5;display:flex;gap:8px;max-width:100%;padding:12px;border:1px solid var(--c-line);border-radius:var(--r-card);overflow-x:auto;background:var(--c-paper);color:var(--c-ink);overscroll-behavior-inline:contain}
.toc a{display:inline-flex;align-items:center;min-height:44px;flex-shrink:0;padding:8px 14px;border-radius:var(--r-ctl);text-decoration:none;font-size:var(--fs-sm)}
.toc a:hover,.toc a[aria-current="location"]{background:var(--c-paper-2);color:var(--c-link)}
.faq-item{border-bottom:1px solid var(--c-line);background:var(--c-paper);color:var(--c-ink)}
.faq-item summary{position:relative;min-height:64px;padding:20px 44px 20px 0;font-weight:800;cursor:pointer;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:12px;top:20px;color:var(--c-link);font-family:var(--f-mono)}
.faq-item[open] summary::after{content:"−"}
.faq-answer{padding-bottom:24px;color:var(--c-ink-muted);line-height:1.85}
.faq-answer p:last-child{margin-bottom:0}
.term-card{border-top:3px solid var(--c-link)}
.term-name{margin:0 0 6px;font-family:var(--f-mono);font-size:var(--fs-h3);font-weight:800}
.term-category{margin:0 0 20px;color:var(--c-ink-muted);font-size:var(--fs-xs)}
.client-card{position:relative;display:flex;flex-direction:column;gap:20px}
.client-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.client-heading h3{margin:0}
.client-revision{font-family:var(--f-mono);font-size:var(--fs-sm);color:var(--c-ink-muted)}
.client-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:auto}
.status-badge{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:4px 10px;border:1px solid var(--c-line);border-radius:var(--r-ctl);background:var(--c-paper-2);color:var(--c-ink-muted);font-size:var(--fs-xs);font-weight:700;overflow-wrap:anywhere}
.status-badge.preferred{background:var(--c-accent);color:var(--c-bg);border-color:var(--c-accent-dark)}
.status-badge.recommended{background:var(--c-panel);color:var(--c-text);border-color:var(--c-border)}
.status-badge.retired{background:var(--c-paper-2);color:var(--c-ink-muted);border-color:var(--c-line)}
.badge-row{display:flex;flex-wrap:wrap;gap:8px}
.article-card{display:flex;flex-direction:column;gap:16px;transition:border-color var(--speed) ease,transform var(--speed) ease}
.article-card:hover{border-color:var(--c-link);transform:translateY(-3px)}
.article-card h3{margin:0;font-size:var(--fs-h3)}
.article-card h3 a{text-decoration:none}
.article-card p{color:var(--c-ink-muted)}
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:var(--fs-xs);color:var(--c-ink-muted)}
.article-link{margin-top:auto;font-size:var(--fs-sm);font-weight:700}
.callout{margin:24px 0;padding:20px 24px;border:1px solid var(--c-line);border-left:3px solid var(--c-link);border-radius:var(--r-ctl);background:var(--c-paper-2);color:var(--c-ink)}
.callout p:last-child{margin-bottom:0}
.callout-title{display:block;margin-bottom:8px;font-weight:800}
.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-line);border-radius:var(--r-card);background:var(--c-paper);color:var(--c-ink)}
.data-table{width:100%;border-collapse:collapse;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:16px 20px;border-bottom:1px solid var(--c-line);overflow-wrap:normal;word-break:normal;vertical-align:top}
.data-table th,.prose table th,.article-body table th{background:var(--c-paper-2);color:var(--c-ink);font-weight:800}
.data-table td,.prose table td,.article-body table td{background:var(--c-paper);color:var(--c-ink)}
.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;border-collapse:collapse;text-align:left}
.prose table code,.article-body table code,.data-table code{overflow-wrap:anywhere}
.download-guide{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px;margin-top:48px;padding:28px;border:1px solid var(--c-border);border-radius:var(--r-card);background:var(--c-panel);color:var(--c-text)}
.download-guide h2,.download-guide h3{margin:0 0 8px;font-size:var(--fs-h3)}
.download-guide p{margin:0;color:var(--c-text-muted)}
.dl-fab{position:fixed;right:24px;bottom:24px;z-index:20;display:flex;align-items:center;gap:12px;max-width:calc(100% - 40px);min-height:56px;padding:14px 20px;border:1px solid var(--c-accent-dark);border-radius:var(--r-card);background:var(--c-accent);color:var(--c-bg);text-decoration:none;box-shadow:0 8px 28px var(--a-shadow-mid);font-weight:800}
.dl-fab svg{width:22px;height:22px;flex-shrink:0}
.dl-fab small{display:block;font-size:var(--fs-xs);font-weight:500}
.dl-fab:hover{background:var(--c-accent-dark);color:var(--c-bg)}
.preview-swatch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:12px}
.swatch{margin:0;border:1px solid var(--c-line);border-radius:var(--r-card);overflow:hidden;background:var(--c-paper);color:var(--c-ink)}
.swatch-sample{height:72px;border-bottom:1px solid var(--c-line)}
.swatch figcaption{padding:12px;font-family:var(--f-mono);font-size:var(--fs-xs);overflow-wrap:anywhere}
.sw-bg{background:var(--c-bg)}
.sw-panel{background:var(--c-panel)}
.sw-panel-2{background:var(--c-panel-2)}
.sw-border{background:var(--c-border)}
.sw-accent{background:var(--c-accent)}
.sw-accent-dark{background:var(--c-accent-dark)}
.sw-text{background:var(--c-text)}
.sw-text-muted{background:var(--c-text-muted)}
.sw-success{background:var(--c-success)}
.sw-warn{background:var(--c-warn)}
.sw-error{background:var(--c-error)}
.sw-paper{background:var(--c-paper)}
.sw-paper-2{background:var(--c-paper-2)}
.sw-ink{background:var(--c-ink)}
.sw-ink-muted{background:var(--c-ink-muted)}
.sw-line{background:var(--c-line)}
.sw-link{background:var(--c-link)}
.sw-tab-tint{background:var(--c-tab-tint)}
.sw-blue{background:var(--c-glow-blue)}
.sw-violet{background:var(--c-glow-violet)}
.sw-cyan{background:var(--c-glow-cyan)}
.sw-code-key{background:var(--c-code-key)}
.sw-code-dim{background:var(--c-code-dim)}
.sw-field-blue{background:var(--a-field-blue)}
.sw-field-violet{background:var(--a-field-violet)}
.sw-field-cyan{background:var(--a-field-cyan)}
.sw-horizon{background:var(--a-horizon)}
.sw-glow-cyan{background:var(--a-glow-cyan)}
.sw-glow-violet{background:var(--a-glow-violet)}
.sw-border-soft{background:var(--a-border-soft)}
.sw-border-faint{background:var(--a-border-faint)}
.sw-lid{background:var(--a-lid)}
.sw-lid-inner{background:var(--a-lid-inner)}
.sw-panel-glass{background:var(--a-panel-glass)}
.sw-panel-chip{background:var(--a-panel-chip)}
.sw-panel-depth{background:var(--a-panel-2-depth)}
.sw-bar{background:var(--a-bar)}
.sw-white-06{background:var(--a-white-06)}
.sw-white-40{background:var(--a-white-40)}
.sw-success-ring{background:var(--a-success-ring)}
.sw-success-ring-2{background:var(--a-success-ring-2)}
.sw-accent-shadow{background:var(--a-accent-shadow)}
.sw-shadow-deep{background:var(--a-shadow-deep)}
.sw-shadow-mid{background:var(--a-shadow-mid)}
.sw-shadow-strip-1{background:var(--a-shadow-strip-1)}
.sw-shadow-strip-2{background:var(--a-shadow-strip-2)}
.sw-dot-ring{background:var(--a-dot-ring)}
.sw-veil{background:var(--a-veil)}
.sw-mask{background:var(--mask-solid)}
.sw-clear{background:var(--clear)}
.type-display{font-family:var(--f-display);font-size:var(--h1-size);font-weight:var(--fw-display);line-height:1.12}
.type-lead{font-size:var(--fs-lead)}
.type-mono{font-family:var(--f-mono)}
.preview-flow{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.preview-fab{position:static;max-width:100%}
@media(max-width:860px){
  .feature-layout{grid-template-columns:minmax(0,1fr);gap:28px}
}
@media(max-width:640px){
  .feature-demo{min-height:320px}
  .demo-body{grid-template-columns:minmax(80px,1fr) minmax(0,2fr);min-height:280px}
  .demo-settings{padding:16px}
  .demo-sidebar{padding:16px 12px}
  .feature-item [role="tab"]{padding:18px}
  .feature-detail{padding:0 18px 20px}
  .download-guide{padding:22px}
  .dl-fab{right:20px;bottom:20px;padding:12px 16px}
}