.tab-list { display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 24px;padding:0;list-style:none;min-width:0 }
.tab-list [role="tab"] { min-height:44px;padding:10px 20px;border:1px solid var(--border);border-radius:var(--r-pill);background:var(--bg-panel);color:var(--text-muted);font-size:15px }
.tab-list [role="tab"]:hover { border-color:var(--text-muted) }
.tab-list [role="tab"][aria-selected="true"] { background:var(--text);color:var(--bg-panel);border-color:var(--text) }
[role="tabpanel"] { min-width:0;scroll-margin-top:24px }
.feature-layout { display:grid;grid-template-columns:260px minmax(0,1fr);gap:48px;margin-top:40px }
.feature-tabs { display:flex;flex-direction:column;align-items:stretch;gap:8px;margin:0;padding:0 }
.feature-tabs [role="tab"] { position:relative;min-height:64px;padding:14px 24px;text-align:left;border:0;background:var(--clear);color:var(--ink-muted);font-family:var(--font-display);font-size:24px;line-height:1.35 }
.feature-tabs [role="tab"][aria-selected="true"] { color:var(--ink-text) }
.feature-tabs [role="tab"][aria-selected="true"]::before { content:"";position:absolute;left:0;top:16px;bottom:16px;width:2px;border-radius:var(--r-line);background:var(--accent);color:var(--ink-text) }
.feature-panel { padding:32px;border:1px solid var(--ink-line);border-radius:var(--r-frame);background:var(--ink-panel);color:var(--ink-text);box-shadow:var(--shadow-win) }
.feature-panel p { line-height:1.85;color:var(--ink-muted) }
.feature-panel h3 { margin-bottom:16px;color:var(--ink-text) }
.feature-panel .warn { background:var(--error-soft);color:var(--ink-text);border-color:var(--error-line) }
.feature-panel .warn svg { color:var(--error) }
.feature-demo { padding:20px;border:1px solid var(--ink-line);border-radius:var(--r-card);background:var(--ink);color:var(--ink-text) }
.feature-demo .set-row:first-of-type { margin-top:0 }
.toc { display:flex;flex-wrap:wrap;gap:8px;margin-block:24px;padding:12px;border:1px solid var(--border);border-radius:var(--r-card);background:var(--bg-panel);color:var(--text);min-width:0 }
.toc a { display:flex;align-items:center;min-height:44px;padding:8px 16px;border-radius:var(--r-pill);font-size:14px;color:var(--text-muted) }
.toc a:hover,.toc a[aria-current] { background:var(--bg-panel-2);color:var(--text) }
.toc--sticky { position:sticky;top:16px;z-index:var(--z-fab) }
.faq-item { margin-bottom:12px;border:1px solid var(--border);border-radius:var(--r-card);background:var(--bg-panel);color:var(--text);box-shadow:var(--shadow-chip) }
.faq-item summary { position:relative;list-style:none;cursor:pointer;min-height:60px;padding:20px 56px 20px 24px;font-weight:var(--weight-medium);overflow-wrap:anywhere }
.faq-item summary::-webkit-details-marker { display:none }
.faq-item summary::after { content:"+";position:absolute;right:24px;top:17px;font-family:var(--font-mono);font-size:22px;color:var(--accent-dark) }
.faq-item[open] summary::after { content:"−" }
.faq-answer { padding:0 24px 24px;color:var(--text-muted) }
.faq-answer > :first-child { margin-top:0 }
.faq-answer > :last-child { margin-bottom:0 }
.term-card { min-width:0;padding:28px;border:1px solid var(--border);border-radius:var(--r-card);background:var(--bg-panel);color:var(--text);box-shadow:var(--shadow-card) }
.term-card h3 { margin:12px 0;font-size:26px }
.term-card p { margin-bottom:0;color:var(--text-muted) }
.term-card__alias { font-family:var(--font-mono);font-size:12px;color:var(--text-muted) }
.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-muted);font-size:12px;font-weight:var(--weight-medium);line-height:1.5;overflow-wrap:anywhere }
.badge--first { background:var(--accent-ghost);color:var(--accent-dark);border-color:var(--border) }
.badge--recommended { background:var(--success-halo);color:var(--success-readable);border-color:var(--border) }
.badge--retired { background:var(--error-soft);color:var(--error-readable);border-color:var(--error-line) }
.badge--warning { background:var(--bg-panel-2);color:var(--warn-readable);border-color:var(--border) }
.badge-row { display:flex;flex-wrap:wrap;align-items:center;gap:8px }
.client-card { padding:28px;border:1px solid var(--border);border-radius:var(--r-frame);background:var(--bg-panel);color:var(--text);box-shadow:var(--shadow-card);min-width:0 }
.client-card__head { display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-bottom:20px }
.client-card__head > div { min-width:0 }
.client-card__logo { width:56px;height:56px;flex-shrink:0 }
.client-card h3 { margin:0;font-size:28px }
.client-card__version { margin-top:4px;font-family:var(--font-mono);font-size:12px;color:var(--text-muted) }
.client-card__version:empty { display:none }
.client-card__description { color:var(--text-muted) }
.client-card__actions { display:flex;flex-wrap:wrap;gap:12px;margin-top:24px }
.client-card__secondary { display:flex;flex-wrap:wrap;gap:12px;margin-top:16px;font-size:13px;color:var(--accent-dark) }
.platform-card { display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:28px;border:1px solid var(--border);border-radius:var(--r-card);background:var(--bg-panel);color:var(--text);box-shadow:var(--shadow-card) }
.platform-card > svg { width:28px;height:28px;color:var(--text-muted);margin-bottom:20px }
.platform-card h3 { margin:0;font-size:26px }
.platform-card p { font-size:14px;color:var(--text-muted);margin-bottom:24px }
.platform-card a { margin-top:auto;font-size:14px;color:var(--accent-dark) }
.section-tail { margin-top:24px;text-align:right;font-size:14px }
.article-card { display:flex;flex-direction:column;min-width:0;height:100%;padding:28px;border:1px solid var(--border);border-radius:var(--r-card);background:var(--bg-panel);color:var(--text);box-shadow:var(--shadow-card) }
.article-card__meta { display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:12px;color:var(--text-muted) }
.article-card time { font-family:var(--font-mono) }
.article-card h3 { font-size:24px;margin:20px 0 12px }
.article-card h3 a:hover { color:var(--accent-dark) }
.article-card p { color:var(--text-muted);font-size:14px;margin:0 0 24px }
.article-card__link { margin-top:auto;font-size:14px;color:var(--accent-dark) }
.callout { margin:24px 0;padding:20px 24px;border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--r-notice);background:var(--bg-panel-2);color:var(--text);min-width:0 }
.callout > :first-child { margin-top:0 }
.callout > :last-child { margin-bottom:0 }
.callout__title { display:block;margin-bottom:8px;font-weight:var(--weight-strong) }
.callout--warning { border-left-color:var(--warn);background:var(--bg-panel-2);color:var(--text) }
.callout--danger { border-color:var(--error-line);border-left-color:var(--error);background:var(--error-soft);color:var(--error-readable) }
.callout--success { border-left-color:var(--success);background:var(--bg-panel-2);color:var(--success-readable) }
.table-scroll { width:100%;max-width:100%;min-width:0;overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:var(--r-card);background:var(--bg-panel);color:var(--text) }
.data-table { width:100%;border-collapse:collapse;background:var(--bg-panel);color:var(--text);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(--border);overflow-wrap:normal;word-break:normal;vertical-align:top }
.data-table th,.prose table th,.article-body table th { background:var(--bg-panel-2);color:var(--text);font-size:14px;font-weight:var(--weight-medium) }
.data-table td { font-size:14px }
.data-table tr:last-child td { border-bottom:0 }
.data-table caption { padding:16px 20px;text-align:left;color:var(--text-muted);font-size:13px }
.prose table,.article-body table { display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;min-width:0;overscroll-behavior-inline:contain;border-collapse:collapse;background:var(--bg-panel);color:var(--text) }
.prose table code,.article-body table code,.data-table code { overflow-wrap:anywhere }
.article-body { min-width:0 }
.article-body > div,.prose > div { min-width:0;max-width:100% }
.article-download { margin-top:48px;padding:28px;border:1px solid var(--border);border-radius:var(--r-card);background:var(--bg-panel-2);color:var(--text);box-shadow:var(--shadow-card) }
.article-download h2 { margin-top:0;font-size:28px }
.article-download p { color:var(--text-muted) }
.dl-fab { position:fixed;right:24px;bottom:24px;z-index:var(--z-fab);display:flex;align-items:center;gap:12px;max-width:calc(100% - 40px);min-height:60px;padding:14px 20px;border:1px solid var(--border);border-radius:var(--r-pill);background:var(--bg-panel);color:var(--text);box-shadow:var(--shadow-pop) }
.dl-fab svg { width:22px;height:22px;flex-shrink:0;color:var(--accent-dark) }
.dl-fab strong { display:block;font-size:14px;font-weight:var(--weight-medium) }
.dl-fab small { display:block;font-size:12px;color:var(--text-muted) }
.dl-fab:hover { border-color:var(--accent) }
.preview-palette { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px }
.swatch { min-width:0;margin:0;border:1px solid var(--border);border-radius:var(--r-notice);background:var(--bg-panel);color:var(--text);overflow:hidden }
.swatch::before { content:"";display:block;height:64px;background:var(--swatch,var(--bg));color:var(--text) }
.swatch figcaption { padding:10px 12px;font-family:var(--font-mono);font-size:12px;overflow-wrap:anywhere }
.swatch--bg { --swatch:var(--bg) }
.swatch--panel { --swatch:var(--bg-panel) }
.swatch--panel2 { --swatch:var(--bg-panel-2) }
.swatch--border { --swatch:var(--border) }
.swatch--accent { --swatch:var(--accent) }
.swatch--accent-dark { --swatch:var(--accent-dark) }
.swatch--text { --swatch:var(--text) }
.swatch--muted { --swatch:var(--text-muted) }
.swatch--success { --swatch:var(--success) }
.swatch--warn { --swatch:var(--warn) }
.swatch--error { --swatch:var(--error) }
.swatch--ink { --swatch:var(--ink) }
.swatch--ink2 { --swatch:var(--ink-2) }
.swatch--ink-panel { --swatch:var(--ink-panel) }
.swatch--ink-panel2 { --swatch:var(--ink-panel-2) }
.swatch--ink-line { --swatch:var(--ink-line) }
.swatch--ink-text { --swatch:var(--ink-text) }
.swatch--ink-muted { --swatch:var(--ink-muted) }
.swatch--ink-dot { --swatch:var(--ink-dot) }
.swatch--ink-hover { --swatch:var(--ink-hover) }
.swatch--accent-ghost { --swatch:var(--accent-ghost) }
.swatch--accent-glow { --swatch:var(--accent-glow) }
.swatch--error-soft { --swatch:var(--error-soft) }
.swatch--error-line { --swatch:var(--error-line) }
.swatch--success-halo { --swatch:var(--success-halo) }
.swatch--error-readable { --swatch:var(--error-readable) }
.swatch--success-readable { --swatch:var(--success-readable) }
.swatch--warn-readable { --swatch:var(--warn-readable) }
.swatch--veil { --swatch:var(--veil) }
.swatch--clear { --swatch:var(--clear) }
.preview-type h1 { margin-top:0 }
.preview-states { display:flex;flex-wrap:wrap;align-items:center;gap:12px }
.preview-focus { outline:2px solid var(--accent-dark);outline-offset:4px }
.preview-platform-icon { width:26px;height:26px }
.preview-static-language { position:relative }
.preview-static-language summary { list-style:none;cursor:pointer }
.preview-static-language summary::-webkit-details-marker { display:none }
.preview-static-language .language-menu { display:block }
@media (max-width:900px) {
  .feature-layout { grid-template-columns:1fr;gap:24px }
  .feature-tabs { flex-direction:row;flex-wrap:wrap;gap:4px }
  .feature-tabs [role="tab"] { font-size:20px;min-height:48px;padding:12px 16px }
  .feature-tabs [role="tab"][aria-selected="true"]::before { left:16px;right:16px;top:auto;bottom:0;width:auto;height:2px }
}
@media (max-width:640px) {
  .feature-panel { padding:20px }
  .feature-demo { padding:16px }
  .client-card,.term-card,.article-card,.platform-card { padding:22px }
  .preview-palette { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .toc { gap:4px;padding:8px }
  .toc--sticky { position:static }
  .dl-fab { right:20px;bottom:20px;padding:12px 16px }
  .dl-fab small { display:none }
  .article-download { padding:22px }
  .faq-item summary { padding-left:20px }
  .faq-answer { padding-inline:20px }
}