.tabs { min-width: 0; }
.feature-browser { display: grid; grid-template-columns: minmax(0, 28fr) minmax(0, 72fr); gap: 40px; }
.feature-browser > * { min-width: 0; }
[role="tablist"] { display: flex; gap: 8px; min-width: 0; max-width: 100%; overflow-x: auto; padding: 4px; scrollbar-width: thin; }
[role="tab"] {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; min-height: 44px; padding: 10px 20px;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--mask-clear); color: var(--text-muted);
  position: relative; font: inherit;
}
[role="tab"]:hover { color: var(--text); border-color: var(--link); }
[role="tab"][aria-selected="true"] { background: var(--bg-panel-2); color: var(--text); }
[role="tabpanel"] { min-width: 0; scroll-margin-top: 28px; }
.feature-browser [role="tablist"] { flex-direction: column; gap: 14px; overflow: visible; align-self: start; padding: 0; }
.feature-browser [role="tab"] { justify-content: flex-start; flex-shrink: 1; border: 0; border-radius: 0; padding: 12px 22px; background: var(--mask-clear); color: var(--text-muted); text-align: left; }
.feature-browser [role="tab"]::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 0; width: 1px; background: var(--border); }
.feature-browser [role="tab"][aria-selected="true"] { color: var(--text); }
.feature-browser [role="tab"][aria-selected="true"]::before { width: 2px; background: linear-gradient(180deg, var(--accent), var(--accent-2)); }
.feature-panel { padding: 36px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-panel); color: var(--text); box-shadow: inset 0 1px 0 var(--panel-glow); }
.feature-panel p { color: var(--text-soft); }
.feature-panel pre { margin-top: 28px; margin-bottom: 0; }
.toc { display: flex; align-items: center; gap: 8px; overflow-x: auto; max-width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--bg-panel); color: var(--text); }
.toc a { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-height: 44px; padding: 8px 16px; border-radius: var(--r-btn); color: var(--text-muted); }
.toc a:hover { color: var(--link); background: var(--bg-panel-2); }
.toc-sticky { position: sticky; top: 12px; z-index: 10; }
.faq-item { border-bottom: 1px solid var(--border); background: var(--mask-clear); color: var(--text); }
.faq-item summary { position: relative; cursor: pointer; list-style: none; padding: 22px 40px 22px 0; font-weight: 500; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 8px; top: 20px; font-family: var(--font-mono); color: var(--text-muted); }
.faq-item[open] summary::after { content: "−"; }
.faq-answer { padding: 0 32px 20px 0; color: var(--text-soft); }
.faq-answer > :last-child { margin-bottom: 0; }
.term-card, .client-card, .post-card { min-width: 0; padding: 28px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-panel); color: var(--text); box-shadow: inset 0 1px 0 var(--panel-glow); }
.term-card p, .client-card p, .post-card p { color: var(--text-muted); }
.term-card .term-name { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); display: block; margin-bottom: 14px; }
.term-card h3 { margin-bottom: 8px; }
.client-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.client-icon { width: 56px; height: 56px; flex-shrink: 0; }
.client-title { flex: 1; min-width: 0; }
.client-title h3 { margin-bottom: 6px; }
.client-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 20px; color: var(--text-muted); font-family: var(--font-mono); font-size: 12px; }
.client-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.client-card.is-first { background: var(--bg-panel-2); color: var(--text); border-color: var(--border); }
.badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tag, .status-badge { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--bg-panel-2); color: var(--text-soft); font-size: 12px; overflow-wrap: anywhere; white-space: normal; }
.status-first, .status-recommended { color: var(--text); background: var(--bg-panel); }
.status-first::before, .status-recommended::before { content: ""; width: 5px; height: 5px; flex-shrink: 0; border-radius: var(--r-dot); background: var(--success); }
.status-archived { color: var(--warn); background: var(--bg-panel); }
.post-card { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.post-card h3, .post-card p { margin: 0; }
.post-card h3 a:hover { color: var(--link); }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.post-card > .link { margin-top: auto; }
.callout { margin: 28px 0; padding: 24px 28px; border: 1px solid var(--border); border-left: 3px solid var(--link); border-radius: var(--r-card); background: var(--bg-panel-2); color: var(--text-soft); }
.callout strong { color: var(--text); }
.callout > :last-child { margin-bottom: 0; }
.callout-warning { border-left-color: var(--warn); }
.callout-error { border-left-color: var(--error); }
.table-scroll { min-width: 0; max-width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-card); -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; border-collapse: collapse; background: var(--bg-panel); color: var(--text-soft); text-align: left; }
.data-table th, .data-table td, .prose table th, .prose table td {
  min-width: 7em; padding: 16px 20px; border-bottom: 1px solid var(--border);
  overflow-wrap: normal; word-break: normal; vertical-align: top;
}
.data-table th, .prose table th { background: var(--bg-panel-2); color: var(--text); font-weight: 500; }
.data-table tr:last-child td { border-bottom: 0; }
.prose table {
  display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
  max-width: 100%; min-width: 0; width: 100%; border-collapse: collapse;
  background: var(--bg-panel); color: var(--text-soft);
}
.prose table code { overflow-wrap: anywhere; }
.article-download { margin-top: 48px; padding: 28px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-panel-2); color: var(--text); }
.article-download p { color: var(--text-muted); }
.dl-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 15;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  max-width: calc(100vw - 36px); min-height: 56px; padding: 12px 18px;
  border: 1px solid var(--border); border-radius: var(--r-card);
  background: var(--bg-panel-2); color: var(--text);
  box-shadow: 0 18px 34px -14px var(--shadow-deep);
}
.dl-fab svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; flex-shrink: 0; }
.dl-fab small { display: block; font-size: 11px; color: var(--text-muted); }
.dl-fab:hover { border-color: var(--link); }
.preview-demo { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-block: 24px; }
.preview-demo .dl-fab { position: static; }
.token-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.token { min-width: 0; border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; background: var(--bg-panel); color: var(--text); }
.token code { display: block; padding: 10px; font-size: 11px; }
.token::before { content: ""; display: block; height: 52px; border-bottom: 1px solid var(--border); background: var(--sample); }
.sw-bg { --sample: var(--bg); }
.sw-panel { --sample: var(--bg-panel); }
.sw-panel2 { --sample: var(--bg-panel-2); }
.sw-border { --sample: var(--border); }
.sw-border-soft { --sample: var(--border-soft); }
.sw-accent { --sample: var(--accent); }
.sw-accent2 { --sample: var(--accent-2); }
.sw-accent-dark { --sample: var(--accent-dark); }
.sw-link { --sample: var(--link); }
.sw-text { --sample: var(--text); }
.sw-soft { --sample: var(--text-soft); }
.sw-muted { --sample: var(--text-muted); }
.sw-dim { --sample: var(--text-dim); }
.sw-success { --sample: var(--success); }
.sw-warn { --sample: var(--warn); }
.sw-error { --sample: var(--error); }
.sw-frame { --sample: var(--frame); }
.sw-win { --sample: var(--win); }
.sw-side { --sample: var(--win-side); }
.sw-strip { --sample: var(--win-strip); }
.sw-off { --sample: var(--toggle-off); }
.sw-field { --sample: var(--field-deep); }
.sw-mid { --sample: var(--field-mid); }
.sw-glow { --sample: var(--accent-glow); }
.sw-glow-soft { --sample: var(--accent-glow-soft); }
.sw-ring { --sample: var(--accent-ring); }
.sw-on { --sample: var(--on-accent); }
.sw-grid { --sample: var(--grid-line); }
.sw-field-grid { --sample: var(--field-grid); }
.sw-hairline { --sample: var(--hairline); }
.sw-hover { --sample: var(--hover-wash); }
.sw-edge { --sample: var(--frame-edge); }
.sw-panel-glow { --sample: var(--panel-glow); }
.sw-deep-shadow { --sample: var(--shadow-deep); }
.sw-mid-shadow { --sample: var(--shadow-mid); }
.sw-solid { --sample: var(--mask-solid); }
.sw-clear { --sample: var(--mask-clear); }

@media (max-width: 768px) {
  .feature-browser { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .feature-browser [role="tablist"] { flex-direction: row; overflow-x: auto; padding: 4px; gap: 8px; }
  .feature-browser [role="tab"] { flex-shrink: 0; border: 1px solid var(--border); border-radius: var(--r-pill); padding: 10px 16px; }
  .feature-browser [role="tab"]::before { display: none; }
  .feature-browser [role="tab"][aria-selected="true"] { background: var(--bg-panel-2); color: var(--text); }
  .feature-panel { padding: 24px; }
  .term-card, .client-card, .post-card { padding: 24px; }
  .token-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dl-fab { right: 18px; bottom: 18px; }
  .callout { padding: 20px; }
}