.tabs { min-width:0 }
.tabs__list,[role="tablist"] { display:flex; align-items:center; gap:10px; max-width:100%; overflow-x:auto; padding:4px 4px 12px; scrollbar-width:thin }
.tabs__tab,[role="tab"] { display:inline-flex; align-items:center; justify-content:center; gap:10px; flex-shrink:0; min-height:44px; padding:10px 20px; border:var(--line) solid var(--c-border); border-radius:var(--r-pill); background:var(--c-bg); color:var(--c-cobalt); font-family:var(--font-body); font-weight:var(--weight-bold); white-space:nowrap }
.tabs__tab svg { width:20px; height:20px; flex-shrink:0 }
[role="tab"]:hover { border-color:var(--c-cobalt) }
[role="tab"][aria-selected="true"] { border-color:var(--c-cobalt); background:var(--c-cobalt); color:var(--c-on-dark) }
.tabs__panel,[role="tabpanel"] { min-width:0; margin-top:20px }
.feature-tabs { display:grid; grid-template-columns:minmax(220px,.65fr) minmax(0,1.65fr); align-items:start; gap:40px; margin-top:40px }
.feature-tabs [role="tablist"] { flex-direction:column; align-items:stretch; overflow:visible; padding:4px }
.feature-tabs [role="tab"] { justify-content:flex-start; width:100%; padding-inline:22px }
.feature-tabs [role="tabpanel"] { margin-top:0; padding:28px; border:var(--line) solid var(--c-border); border-radius:var(--r-card); background:var(--c-bg); color:var(--c-text) }
.feature-visual { display:grid; place-items:center; min-height:230px; margin-bottom:24px; border-radius:var(--r-inner); background:var(--c-panel); color:var(--c-cobalt); overflow-x:clip }
.feature-visual svg { width:100%; max-width:520px; height:auto }
.feature-panel__copy { color:var(--c-muted); line-height:1.85 }
.setting-pill { display:inline-block; max-width:100%; margin-top:20px; padding:8px 16px; border:var(--line) solid var(--c-border); border-radius:var(--r-pill); background:var(--c-panel-2); color:var(--c-cobalt); font-family:var(--font-mono); font-size:13px; overflow-wrap:anywhere }
.topology-line { fill:none; stroke:var(--c-edge); stroke-width:2; stroke-dasharray:6 7 }
.topology-shape { fill:var(--c-bg); stroke:var(--c-cobalt); stroke-width:2 }
.topology-core { fill:var(--c-cobalt); stroke:var(--c-cobalt); stroke-width:2 }
.topology-text { fill:var(--c-cobalt); font-family:var(--font-mono); font-size:14px }
.topology-text--light { fill:var(--c-on-dark); font-family:var(--font-body); font-weight:var(--weight-bold) }
.toc { position:sticky; top:16px; z-index:10; display:flex; gap:8px; align-items:center; max-width:100%; overflow-x:auto; padding:12px; border:var(--line) solid var(--c-border); border-radius:var(--r-card); background:var(--c-bg); color:var(--c-text); scrollbar-width:thin }
.toc a { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; min-height:44px; padding:8px 16px; border-radius:var(--r-pill); color:var(--c-cobalt); font-size:14px; font-weight:var(--weight-semibold); white-space:nowrap }
.toc a:hover,.toc a[aria-current="location"] { background:var(--c-panel); color:var(--c-cobalt) }
.toc--flow { position:static }
.faq { border:var(--line) solid var(--c-border); border-radius:var(--r-card); background:var(--c-bg); color:var(--c-text) }
.faq + .faq { margin-top:12px }
.faq summary { position:relative; min-height:64px; padding:18px 58px 18px 22px; cursor:pointer; list-style:none; font-weight:var(--weight-bold) }
.faq summary::-webkit-details-marker { display:none }
.faq summary::after { content:"+"; position:absolute; right:22px; top:17px; color:var(--c-cobalt); font-size:22px; line-height:1.3 }
.faq[open] summary::after { content:"−" }
.faq__answer { padding:0 22px 22px; color:var(--c-muted); line-height:1.85 }
.faq__answer p + p { margin-top:12px }
.term-card { min-width:0; padding:24px; border:var(--line) solid var(--c-border); border-radius:var(--r-card); background:var(--c-bg); color:var(--c-text) }
.term-card__category { margin-bottom:12px; color:var(--c-muted); font-size:12px; font-weight:var(--weight-semibold) }
.term-card h3 { color:var(--c-cobalt) }
.term-card__alias { display:block; margin-top:4px; color:var(--c-muted); font-family:var(--font-mono); font-size:13px; overflow-wrap:anywhere }
.term-card p { margin-top:16px; color:var(--c-muted) }
.badge-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px }
.badge { display:inline-flex; align-items:center; gap:6px; max-width:100%; min-height:26px; padding:3px 11px; border:var(--line) solid var(--c-border); border-radius:var(--r-pill); background:var(--c-panel-2); color:var(--c-cobalt); font-size:12px; font-weight:var(--weight-bold); line-height:1.5; white-space:normal; overflow-wrap:anywhere }
.badge--first { border-color:var(--c-note); background:var(--c-note); color:var(--c-text) }
.badge--recommended { border-color:var(--c-cobalt); background:var(--c-cobalt); color:var(--c-on-dark) }
.badge--retired { border-color:var(--c-coral); background:var(--c-panel-2); color:var(--c-text) }
.badge--retired::before { content:""; width:6px; height:6px; flex-shrink:0; border-radius:var(--r-circle); background:var(--c-coral); color:var(--c-text) }
.badge--status::before { content:""; width:6px; height:6px; flex-shrink:0; border-radius:var(--r-circle); background:var(--c-success); color:var(--c-text) }
.client-card { min-width:0; padding:28px; border:var(--line) solid var(--c-border); border-radius:var(--r-card); background:var(--c-bg); color:var(--c-text) }
.client-card__head { display:flex; flex-wrap:wrap; align-items:center; gap:12px }
.client-card__head h3 { font-size:24px }
.client-card__version { margin-left:auto; color:var(--c-muted); font-family:var(--font-mono); font-size:13px; overflow-wrap:anywhere }
.client-card__desc { margin-top:16px; color:var(--c-muted) }
.client-card__actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px }
.client-card__fine { margin-top:16px; font-size:13px; color:var(--c-muted) }
.client-card__fine a { color:var(--c-cobalt); text-decoration:underline; text-underline-offset:3px }
.platform-card { display:flex; flex-direction:column; min-width:0; padding:24px; border:var(--line) solid var(--c-border); border-radius:var(--r-card); background:var(--c-bg); color:var(--c-text); transition:border-color var(--speed) var(--ease) }
.platform-card:hover { border-color:var(--c-accent) }
.platform-card__icon { display:grid; place-items:center; width:48px; height:48px; margin-bottom:16px; border-radius:var(--r-circle); background:var(--c-panel); color:var(--c-cobalt) }
.platform-card__icon svg { width:22px; height:22px }
.platform-card h3 { font-size:18px; font-weight:var(--weight-heavy) }
.platform-card__client { margin-top:2px; color:var(--c-muted); font-family:var(--font-mono); font-size:13px }
.platform-card__note { margin-top:10px; font-size:14.5px }
.platform-card__go { margin-top:16px; color:var(--c-cobalt); font-size:14.5px; font-weight:var(--weight-bold) }
.article-card { display:flex; flex-direction:column; gap:16px; min-width:0; padding:24px; border:var(--line) solid var(--c-border); border-radius:var(--r-card); background:var(--c-bg); color:var(--c-text) }
.article-card__meta { display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:12px; color:var(--c-muted) }
.article-card h3 { font-size:20px; line-height:1.5; letter-spacing:0 }
.article-card h3 a:hover { color:var(--c-cobalt); text-decoration:underline; text-underline-offset:4px }
.article-card p { color:var(--c-muted); font-size:14px }
.article-card__go { margin-top:auto; color:var(--c-cobalt); font-size:14px; font-weight:var(--weight-bold) }
.callout { min-width:0; margin:24px 0; padding:20px 24px; border:var(--line) solid var(--c-border); border-left:4px solid var(--c-accent); border-radius:var(--r-inner); background:var(--c-panel); color:var(--c-text); line-height:1.8 }
.callout strong { color:var(--c-cobalt) }
.callout p + p { margin-top:10px }
.callout--note { border-left-color:var(--c-note); background:var(--c-panel-2); color:var(--c-text) }
.callout--warning { border-left-color:var(--c-coral); background:var(--c-panel-2); color:var(--c-text) }
.table-scroll { max-width:100%; min-width:0; overflow-x:auto; overscroll-behavior-inline:contain; -webkit-overflow-scrolling:touch; border:var(--line) solid var(--c-border); border-radius:var(--r-inner); background:var(--c-bg); color:var(--c-text) }
.data-table { width:100%; border-collapse:collapse; text-align:left; font-size:14px }
.data-table th,.data-table td,.prose table th,.prose table td { min-width:7em; padding:14px 18px; border-bottom:var(--line) solid var(--c-border); vertical-align:top; overflow-wrap:normal; word-break:normal }
.data-table th,.prose table th { background:var(--c-panel); color:var(--c-cobalt); font-weight:var(--weight-bold) }
.data-table td,.prose table td { background:var(--c-bg); color:var(--c-text) }
.data-table tr:last-child td { border-bottom:0 }
.prose table { display:block; max-width:100%; min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch; border-collapse:collapse; text-align:left; font-size:14px }
.prose table caption { text-align:left; padding-block:10px; color:var(--c-muted) }
.data-table code,.prose table code { overflow-wrap:anywhere }
.article-download { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; margin-top:48px; padding:28px; border:var(--line) solid var(--c-border); border-radius:var(--r-card); background:var(--c-panel); color:var(--c-text) }
.article-download__copy { flex:1 1 240px; min-width:0 }
.article-download h2 { font-size:24px }
.article-download p { margin-top:10px; color:var(--c-muted) }
.dl-fab { position:fixed; right:24px; bottom:24px; z-index:25; display:inline-flex; align-items:center; gap:12px; max-width:calc(100% - 32px); min-height:60px; padding:12px 22px; border:var(--line) solid var(--c-cobalt); border-radius:var(--r-pill); background:var(--c-cobalt); color:var(--c-on-dark) }
.dl-fab svg { width:24px; height:24px; flex-shrink:0 }
.dl-fab strong { display:block; font-size:14px; font-weight:var(--weight-bold) }
.dl-fab small { display:block; color:var(--c-on-dark-muted); font-size:12px }
.dl-fab:hover { background:var(--c-cobalt-raise); color:var(--c-on-dark) }
.dl-fab:focus-visible { outline-color:var(--c-accent) }
.has-dl-fab { padding-bottom:100px }
.preview-fab { position:static; max-width:100% }
.preview-swatches { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:32px }
.swatch { min-width:0; border:var(--line) solid var(--c-border); border-radius:var(--r-inner); background:var(--c-bg); color:var(--c-text); overflow:hidden }
.swatch__paint { display:block; height:72px }
.swatch code { display:block; padding:12px; color:var(--c-text); font-size:12px }
.swatch--bg .swatch__paint { background:var(--c-bg); color:var(--c-text) }
.swatch--panel .swatch__paint { background:var(--c-panel); color:var(--c-text) }
.swatch--panel-2 .swatch__paint { background:var(--c-panel-2); color:var(--c-text) }
.swatch--border .swatch__paint { background:var(--c-border); color:var(--c-text) }
.swatch--edge .swatch__paint { background:var(--c-edge); color:var(--c-text) }
.swatch--accent .swatch__paint { background:var(--c-accent); color:var(--c-text) }
.swatch--hover .swatch__paint { background:var(--c-accent-hover); color:var(--c-text) }
.swatch--cobalt .swatch__paint { background:var(--c-cobalt); color:var(--c-on-dark) }
.swatch--raise .swatch__paint { background:var(--c-cobalt-raise); color:var(--c-on-dark) }
.swatch--text .swatch__paint { background:var(--c-text); color:var(--c-on-dark) }
.swatch--muted .swatch__paint { background:var(--c-muted); color:var(--c-on-dark) }
.swatch--success .swatch__paint { background:var(--c-success); color:var(--c-text) }
.swatch--note .swatch__paint { background:var(--c-note); color:var(--c-text) }
.swatch--coral .swatch__paint { background:var(--c-coral); color:var(--c-text) }
.swatch--grid .swatch__paint { background:var(--c-grid); color:var(--c-on-dark) }
.swatch--on-dark .swatch__paint { background:var(--c-on-dark); color:var(--c-text) }
.swatch--dark-muted .swatch__paint { background:var(--c-on-dark-muted); color:var(--c-text) }
.swatch--dark-line .swatch__paint { background:var(--c-on-dark-line); color:var(--c-text) }
.swatch--mask .swatch__paint { background:var(--c-mask); color:var(--c-on-dark) }
.swatch--clear .swatch__paint { background:var(--c-clear); color:var(--c-text) }
.swatch--veil .swatch__paint { background:var(--c-veil); color:var(--c-text) }
.type-display { font-family:var(--font-display); font-size:var(--title-xl); font-weight:var(--weight-display); letter-spacing:-.02em; line-height:1.2 }
.preview-dark { padding:24px; border-radius:var(--r-card); background:var(--c-cobalt); color:var(--c-on-dark) }
.preview-space { margin-top:32px }
.preview-icons { position:absolute; width:0; height:0; overflow:hidden }
@media (max-width:900px) {
  .feature-tabs { grid-template-columns:minmax(0,1fr); gap:20px }
  .feature-tabs [role="tablist"] { flex-direction:row; align-items:center; overflow-x:auto; padding-bottom:12px }
  .feature-tabs [role="tab"] { width:auto }
}
@media (max-width:640px) {
  .feature-tabs [role="tabpanel"] { padding:20px }
  .feature-visual { min-height:180px }
  .preview-swatches { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .client-card { padding:20px }
  .client-card__actions { flex-direction:column; align-items:stretch }
  .client-card__version { margin-left:0 }
  .article-download { padding:20px }
  .dl-fab { right:16px; bottom:16px; padding:10px 18px }
}