.tabs { min-width:0; }
[role="tablist"] { display:flex; align-items:center; flex-wrap:wrap; gap:6px; padding:6px; margin-bottom:24px; width:fit-content; max-width:100%; border:1px solid var(--border); border-radius:var(--radius-pill); background:var(--bg-panel); color:var(--text); }
[role="tab"] { min-height:44px; padding:10px 22px; border:0; border-radius:var(--radius-pill); background:var(--bg-panel); color:var(--text-muted); font-weight:var(--weight-semibold); }
[role="tab"]:hover { background:var(--bg-panel-2); color:var(--text); }
[role="tab"][aria-selected="true"] { background:var(--accent); color:var(--ink); box-shadow:var(--shadow-seg); }
[role="tabpanel"] { min-width:0; }
.toc { display:flex; flex-wrap:wrap; gap:8px; padding:16px; margin-bottom:32px; border:1px solid var(--border); border-radius:var(--radius-card); background:var(--bg); color:var(--text); }
.toc a { display:block; padding:10px 16px; min-height:44px; border-radius:var(--radius-pill); font-size:var(--size-small); }
.toc a:hover,.toc a[aria-current] { background:var(--bg-panel); color:var(--text); }
.toc-sticky { position:sticky; top:16px; z-index:10; }
.faq-item { margin-bottom:12px; border:1px solid var(--border); border-radius:var(--radius-card); background:var(--bg); color:var(--text); }
.faq-item summary { cursor:pointer; min-height:64px; padding:20px 54px 20px 24px; position:relative; font-weight:var(--weight-bold); list-style:none; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; position:absolute; right:24px; top:18px; color:var(--accent-readable); font-size:22px; }
.faq-item[open] summary::after { content:"−"; }
.faq-answer { padding:0 24px 22px; color:var(--text-muted); }
.faq-answer > :last-child { margin-bottom:0; }
.term-card { border-top:4px solid var(--accent); }
.term-card dt { font-family:var(--font-display); font-size:var(--size-h3); font-weight:var(--weight-display); }
.term-card dd { margin:14px 0 0; color:var(--text-muted); }
.term-alias { display:block; margin-top:4px; font-family:var(--font-mono); font-size:13px; font-weight:var(--weight-body); color:var(--text-muted); }
.client-card { position:relative; padding:32px; border-radius:var(--radius-panel); border:1px solid var(--border); background:var(--bg); color:var(--text); box-shadow:var(--shadow-card); }
.client-heading { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:18px; }
.client-heading h3 { margin:0; }
.client-meta { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:20px; font-size:var(--size-small); color:var(--text-muted); }
.client-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.badge,.tag { display:inline-block; max-width:100%; padding:5px 12px; border:1px solid var(--border); border-radius:var(--radius-pill); background:var(--bg-panel); color:var(--text-muted); font-size:12px; line-height:1.5; font-weight:var(--weight-semibold); overflow-wrap:anywhere; vertical-align:middle; }
.badge-first { background:var(--accent); color:var(--ink); border-color:var(--accent); }
.badge-recommended { background:var(--bg); color:var(--accent-readable); border-color:var(--accent-dark); }
.badge-retired { background:var(--bg-panel-2); color:var(--text-muted); }
.status-dot { display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:var(--radius-circle); background:var(--success); flex-shrink:0; }
.status-dot.warn { background:var(--warn); }
.status-dot.error { background:var(--error); }
.article-card { display:flex; flex-direction:column; align-items:flex-start; gap:16px; height:100%; transition:transform var(--ease),box-shadow var(--ease); }
.article-card:hover { transform:translateY(-3px); }
.article-card h3 { margin:0; font-size:21px; line-height:1.5; }
.article-card p { margin:0; color:var(--text-muted); }
.article-card time { color:var(--text-muted); font-family:var(--font-mono); font-size:12px; }
.article-card .text-link { margin-top:auto; }
.callout { margin:24px 0; padding:24px; border:1px solid var(--border); border-left:4px solid var(--accent-dark); border-radius:var(--radius-card); background:var(--bg-panel); color:var(--text); }
.callout strong { display:block; margin-bottom:8px; }
.callout > :last-child { margin-bottom:0; }
.callout-warning { border-left-color:var(--warn); }
.table-scroll { max-width:100%; min-width:0; overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-card); -webkit-overflow-scrolling:touch; }
.data-table { width:100%; border-collapse:collapse; text-align:left; background:var(--bg); color:var(--text); }
.data-table th,.data-table td,.prose th,.prose td,.article-body th,.article-body td { min-width:7em; padding:16px 20px; border-bottom:1px solid var(--border); vertical-align:top; overflow-wrap:normal; word-break:normal; }
.data-table th,.prose th,.article-body th { background:var(--bg-panel); color:var(--text); font-weight:var(--weight-bold); }
.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; }
.prose table code,.article-body table code,.data-table code { overflow-wrap:anywhere; }
.dl-fab { position:fixed; z-index:30; right:24px; bottom:24px; display:flex; align-items:center; gap:12px; max-width:calc(100% - 32px); min-height:56px; padding:12px 22px; border:1px solid var(--accent); border-radius:var(--radius-pill); background:var(--accent); color:var(--ink); box-shadow:var(--shadow-fab); font-weight:var(--weight-bold); }
.dl-fab svg { width:22px; height:22px; }
.article-download { margin-top:48px; padding:32px; border:1px solid var(--border); border-radius:var(--radius-panel); background:var(--bg-panel); color:var(--text); }
.article-download h2 { margin-top:0; font-size:var(--size-h3); }
.article-download p { color:var(--text-muted); }
.feature-intro { text-align:center; margin-bottom:0; }
.feature-intro h2 { margin-top:0; }
.feature-spine { position:relative; padding-top:72px; overflow-x:clip; }
.feature-spine::before { content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--border); }
.spine-node { position:relative; display:grid; place-items:center; width:48px; height:48px; margin:0 auto 64px; border-radius:var(--radius-circle); background:var(--accent-dark); color:var(--on-dark); }
.spine-node svg { width:22px; height:22px; }
.feature-panel { position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center; gap:72px; margin-bottom:56px; min-height:330px; padding:48px; border:1px solid var(--border); border-radius:var(--radius-panel); background:var(--bg-panel); color:var(--text); }
.feature-panel:nth-of-type(even) .feature-copy { order:2; }
.feature-copy h3 { margin-top:0; }
.feature-copy p { margin-bottom:0; color:var(--text-muted); line-height:1.85; }
.feature-props { display:grid; gap:16px; padding:12px; }
.feature-props .card { max-width:100%; }
.feature-props .card:nth-child(even) { margin-left:32px; }
.feature-props pre { margin:0; background:var(--bg); color:var(--text); box-shadow:var(--shadow-card); }
.setting-row { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.setting-row .toggle { flex-shrink:0; }
.preview-heading { margin-bottom:32px; }
.swatches { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; }
.swatch { overflow:hidden; border:1px solid var(--border); border-radius:var(--radius-card); background:var(--bg); color:var(--text); }
.swatch-sample { display:block; height:76px; border-bottom:1px solid var(--border); }
.swatch code { display:block; padding:12px; font-size:12px; }
.sw-bg { background:var(--bg); }
.sw-panel { background:var(--bg-panel); }
.sw-panel2 { background:var(--bg-panel-2); }
.sw-border { background:var(--border); }
.sw-accent { background:var(--accent); }
.sw-accent-dark { background:var(--accent-dark); }
.sw-readable { background:var(--accent-readable); }
.sw-text { background:var(--text); }
.sw-muted { background:var(--text-muted); }
.sw-success { background:var(--success); }
.sw-warn { background:var(--warn); }
.sw-error { background:var(--error); }
.sw-ink { background:var(--ink); }
.sw-frame { background:var(--device-frame); }
.sw-edge { background:var(--device-edge); }
.sw-key { background:var(--device-key); }
.sw-deep { background:var(--device-deep); }
.sw-dark { background:var(--ink); }
.sw-dark::after { content:""; display:block; height:100%; background:var(--on-dark-muted); }
.sw-line { background:var(--ink); box-shadow:inset 0 0 0 16px var(--on-dark-line); }
.sw-glow { background:radial-gradient(closest-side,var(--glow-core),var(--glow-mid),var(--glow-none)),var(--ink); }
.preview-dark { padding:24px; border-radius:var(--radius-card); background:var(--ink); color:var(--on-dark); }
.preview-mobile { display:none; }
.preview-mobile summary { min-height:44px; padding:10px; cursor:pointer; }
.preview-mobile nav { padding:12px var(--gutter); background:var(--bg); color:var(--text); }
.preview-mobile a { display:block; min-height:44px; padding:10px 16px; }
@media (max-width:1280px) {
  .preview-mobile { display:block; }
}
@media (max-width:768px) {
  .feature-spine::before { left:12px; }
  .spine-node { margin-left:0; }
  .feature-panel { margin-left:24px; padding:28px 20px; grid-template-columns:1fr; gap:24px; }
  .feature-panel:nth-of-type(even) .feature-copy { order:0; }
  .feature-props { padding:0; }
  .feature-props .card:nth-child(even) { margin-left:12px; }
}
@media (max-width:640px) {
  [role="tablist"] { border-radius:var(--radius-card); gap:4px; }
  [role="tab"] { padding:10px 15px; }
  .client-card,.article-download { padding:24px 20px; }
  .dl-fab { right:16px; bottom:16px; padding:12px 18px; }
  .faq-item summary { padding-left:20px; }
  .faq-answer { padding-inline:20px; }
}