:root {
  --feature-icon-size: 42px;
  --badge-size: 12px;
  --table-size: 14px;
  --preview-swatch-height: 64px;
}

.tab-set { min-width: 0; }
.tab-bar[role="tablist"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 24px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-panel);
  color: var(--text);
}
.tab-button[role="tab"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--size-nav);
}
.tab-button[role="tab"]:hover { background: var(--bg-panel2); color: var(--text); }
.tab-button[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-text); box-shadow: inset 0 -3px 0 var(--accent); }
.tab-panel { min-width: 0; }
.tab-panel:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 4px; border-radius: var(--radius-md); }

.feature-axis { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 48px; }
.feature-stage { padding: 28px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-panel); color: var(--text); box-shadow: var(--shadow-card); }
.feature-stage svg { display: block; width: 100%; height: auto; }
.feature-stage figcaption { margin-top: 20px; color: var(--text-muted); font-size: var(--size-small); text-align: center; }
.feature-list[role="tablist"] { display: grid; gap: 12px; }
.feature-item { position: relative; padding: 12px 0 12px 22px; border-left: 3px solid var(--border); }
.feature-item:has([aria-selected="true"]) { border-left-color: var(--accent); }
.feature-tab[role="tab"] { display: flex; align-items: center; gap: 14px; width: 100%; padding: 0; border: 0; background: var(--bg); color: var(--text); text-align: left; font-size: var(--size-brand); font-weight: var(--weight-regular); }
.feature-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--feature-icon-size); height: var(--feature-icon-size); border-radius: var(--radius-round); background: var(--accent-dark); color: var(--text-on-accent); }
.feature-icon svg { width: 22px; height: 22px; }
.feature-detail { margin-top: 14px; padding-left: 56px; color: var(--text-muted); font-size: var(--size-nav); line-height: 1.85; }
.feature-detail p { margin-bottom: 0; }
.download-entry-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.platform-entry { display: flex; flex-direction: column; align-items: flex-start; }
.platform-entry .platform-icon { width: 28px; height: 28px; margin-bottom: 18px; color: var(--accent-dark); flex-shrink: 0; }
.platform-entry h3 { margin: 0 0 10px; font-size: var(--size-brand); }
.platform-entry p { flex: 1; color: var(--text-muted); font-size: var(--size-small); }
.platform-entry .text-link { margin-top: 6px; }

.toc { position: sticky; top: 12px; z-index: 10; display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 14px 18px; margin-bottom: 32px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-panel); color: var(--text); box-shadow: var(--shadow-bar); }
.toc a { display: inline-flex; align-items: center; min-height: 32px; color: var(--accent-dark); font-size: var(--size-small); }
.toc-static { position: static; }
.toc-label { align-self: center; color: var(--text-muted); font-size: var(--size-small); margin-right: 4px; }

.faq-item { margin-bottom: 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-panel); color: var(--text); }
.faq-item summary { position: relative; padding: 18px 52px 18px 20px; list-style: none; cursor: pointer; font-size: var(--size-body); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 20px; top: 18px; color: var(--accent-dark); font-family: var(--font-mono); font-size: var(--size-brand); }
.faq-item[open] summary::after { content: "−"; }
.faq-item[open] summary { border-bottom: 1px solid var(--border); }
.faq-answer { padding: 18px 20px; color: var(--text-muted); line-height: 1.85; }
.faq-answer > :last-child { margin-bottom: 0; }
.term-card { scroll-margin-top: 24px; }
.term-card h3 { margin: 12px 0; }
.term-card p { color: var(--text-muted); font-size: var(--size-nav); }
.term-alias { display: block; margin-bottom: 12px; font-family: var(--font-mono); font-size: var(--size-caption); color: var(--accent-dark); }

.client-card { padding: 28px; }
.client-heading { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.app-logo { width: 56px; height: 56px; flex-shrink: 0; }
.client-heading h2, .client-heading h3 { margin: 0 0 8px; }
.client-heading-text { flex: 1; min-width: 0; }
.client-meta { display: flex; flex-wrap: wrap; gap: 8px; color: var(--text-muted); font-size: var(--size-small); margin-bottom: 18px; }
.client-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.client-note { margin-top: 16px; color: var(--text-muted); font-size: var(--size-small); }
.badge, .tag { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 10px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--bg-panel2); color: var(--text-muted); font-size: var(--badge-size); line-height: 1.6; overflow-wrap: anywhere; }
.badge-first { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent-soft); }
.badge-recommended { background: var(--accent-dark-soft); color: var(--accent-dark); border-color: var(--accent-dark-soft); }
.badge-retired { background: var(--bg-panel2); color: var(--text-muted); }
.status-dot { width: 6px; height: 6px; flex-shrink: 0; border-radius: var(--radius-round); background: var(--success); }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; }
.article-card { display: flex; flex-direction: column; }
.article-card h3 { margin-top: 16px; margin-bottom: 12px; }
.article-card h3 a { color: var(--text); }
.article-card p { color: var(--text-muted); font-size: var(--size-nav); }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--text-muted); font-size: var(--size-caption); }
.article-card .text-link { margin-top: auto; }
.callout { position: relative; margin: 24px 0; padding: 20px 24px; border: 1px solid var(--border); border-left: 3px solid var(--accent-dark); border-radius: var(--radius-sm); background: var(--accent-dark-soft); color: var(--text); }
.callout > :last-child { margin-bottom: 0; }
.callout-title { margin-bottom: 8px; font-size: var(--size-body); font-weight: var(--weight-medium); color: var(--accent-dark); }
.callout-warning { border-left-color: var(--warn); background: var(--bg-panel); color: var(--text); }
.callout-warning .callout-title { color: var(--warn-text); }
.callout-error { border-left-color: var(--error); background: var(--bg-panel); color: var(--text); }
.callout-error .callout-title { color: var(--error-text); }

.table-scroll { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-panel); color: var(--text); overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--table-size); }
.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;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
  overflow-wrap: normal;
  word-break: normal;
}
.data-table th, .prose table th, .article-body table th { background: var(--bg-panel2); color: var(--text); font-weight: var(--weight-medium); }
.data-table td, .prose table td, .article-body table td { background: var(--bg-panel); color: var(--text); }
.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;
  overscroll-behavior-inline: contain;
  font-size: var(--table-size);
}
.prose table code, .article-body table code, .data-table code { overflow-wrap: anywhere; }
.article-body { min-width: 0; }
.download-guide { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 40px; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-panel); color: var(--text); box-shadow: var(--shadow-card); }
.download-guide-copy { flex: 1 1 240px; min-width: 0; }
.download-guide h2, .download-guide h3 { margin: 0 0 8px; font-size: var(--size-h3); }
.download-guide p { margin: 0; color: var(--text-muted); font-size: var(--size-small); }
.dl-fab { position: fixed; right: 24px; bottom: 24px; z-index: 30; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 32px); min-height: 48px; padding: 12px 18px; border: 1px solid var(--accent-dark); border-radius: var(--radius-md); background: var(--accent-dark); color: var(--text-on-accent); box-shadow: var(--shadow-card); font-size: var(--size-small); }
.dl-fab:hover { background: var(--accent-dark-hover); color: var(--text-on-accent); text-decoration: none; }
.dl-fab svg { width: 20px; height: 20px; flex-shrink: 0; }
.has-download-fab .site-footer { padding-bottom: 100px; }

.preview-colors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.swatch { padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-panel); color: var(--text); }
.swatch-chip { height: var(--preview-swatch-height); margin-bottom: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.swatch code { display: block; }
.sw-bg { background: var(--bg); color: var(--text); }
.sw-panel { background: var(--bg-panel); color: var(--text); }
.sw-panel2 { background: var(--bg-panel2); color: var(--text); }
.sw-border { background: var(--border); color: var(--text); }
.sw-accent { background: var(--accent); color: var(--text); }
.sw-accent-hover { background: var(--accent-hover); color: var(--text-on-accent); }
.sw-accent-text { background: var(--accent-text); color: var(--text-on-accent); }
.sw-accent-soft { background: var(--accent-soft); color: var(--text); }
.sw-teal { background: var(--accent-dark); color: var(--text-on-accent); }
.sw-teal-hover { background: var(--accent-dark-hover); color: var(--text-on-accent); }
.sw-deeper { background: var(--accent-deeper); color: var(--text-on-accent); }
.sw-teal-soft { background: var(--accent-dark-soft); color: var(--text); }
.sw-text { background: var(--text); color: var(--text-on-accent); }
.sw-muted { background: var(--text-muted); color: var(--text-on-accent); }
.sw-on { background: var(--text-on-accent); color: var(--text); }
.sw-success { background: var(--success); color: var(--text-on-accent); }
.sw-warn { background: var(--warn); color: var(--text); }
.sw-error { background: var(--error); color: var(--text-on-accent); }
.sw-warn-text { background: var(--warn-text); color: var(--text-on-accent); }
.sw-error-text { background: var(--error-text); color: var(--text-on-accent); }
.sw-dash { background: var(--line-dash); color: var(--text); }
.sw-fade { background: var(--card-fade); color: var(--text); }
.sw-glow-a { background: var(--glow-a); color: var(--text); }
.sw-glow-b { background: var(--glow-b); color: var(--text); }
.sw-glow-c { background: var(--glow-c); color: var(--text); }
.sw-veil { background: var(--veil); color: var(--text); }
.preview-buttons { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.preview-title { font-size: var(--size-h1); margin: 0 0 18px; }
.preview-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.preview-fab { position: static; width: fit-content; margin-top: 24px; }
.preview-shadow { box-shadow: var(--shadow-card-hover); }

@media (max-width: 920px) {
  .feature-axis { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .download-entry-grid, .preview-colors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .tab-button[role="tab"] { flex: 1 1 auto; padding-inline: 12px; }
  .feature-stage { padding: 20px; }
  .feature-detail { padding-left: 0; }
  .feature-item { padding-left: 14px; }
  .feature-tab[role="tab"] { font-size: var(--size-body); }
  .client-card { padding: 20px; }
  .client-actions { flex-direction: column; align-items: stretch; }
  .download-entry-grid { grid-template-columns: minmax(0, 1fr); }
  .callout { padding: 18px; }
  .dl-fab { right: 16px; bottom: 16px; }
  .preview-colors { gap: 10px; }
  .swatch { padding: 10px; }
  .swatch code { font-size: var(--size-caption); }
  .download-guide { padding: 20px; }
}