.tabs { min-width:0; }
[role="tablist"] { display:flex; flex-wrap:wrap; gap:8px; padding:6px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--bg-panel-2); color:var(--text); }
[role="tab"] { position:relative; display:inline-flex; align-items:center; gap:12px; min-height:48px; padding:12px 20px; border-radius:var(--r-md); color:var(--text-muted); text-align:left; font-weight:var(--weight-medium); }
[role="tab"] svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
[role="tab"]:hover { color:var(--text); }
[role="tab"][aria-selected="true"] { background:var(--bg-panel); color:var(--text); }
[role="tab"][aria-selected="true"]::before { content:""; position:absolute; bottom:5px; left:20px; right:20px; height:3px; background:var(--accent); color:var(--on-accent); border-radius:var(--r-pill); }
[role="tabpanel"] { min-width:0; margin-top:24px; }
.feature-library { display:grid; grid-template-columns:260px minmax(0,1fr); gap:36px; align-items:start; }
.feature-library [role="tablist"] { display:flex; flex-direction:column; align-items:stretch; background:var(--clear); color:var(--text); border:0; padding:0; }
.feature-library [role="tab"] { width:100%; padding:18px 22px; }
.feature-library [role="tab"][aria-selected="true"]::before { left:0; right:auto; top:17px; bottom:17px; height:auto; width:3px; }
.feature-library [role="tabpanel"] { margin:0; }
.feature-window { position:relative; border-radius:var(--r-xl); background:var(--paper); color:var(--ink); box-shadow:var(--shadow-window); min-width:0; }
.window-chrome { display:flex; align-items:center; gap:8px; padding:18px 24px; border-bottom:1px solid var(--paper-line-2); font-size:var(--fs-sm); font-weight:var(--weight-semibold); }
.chrome-dot { width:9px; height:9px; flex:none; background:var(--paper-line-2); color:var(--ink); border-radius:var(--r-pill); }
.chrome-title { margin-left:10px; }
.window-content { padding:28px 32px 80px; }
.window-content p { color:var(--ink-soft); line-height:1.9; }
.window-content pre { background:var(--dev-body); color:var(--ink-2); border:1px solid var(--paper-line-2); }
.menu-path { position:absolute; right:24px; bottom:-18px; max-width:calc(100% - 48px); padding:16px 20px; background:var(--glass); color:var(--ink); border-radius:var(--r-md); box-shadow:var(--shadow-float); backdrop-filter:blur(14px); transform:rotate(3deg); font-size:var(--fs-sm); overflow-wrap:anywhere; }
.toc { position:sticky; top:16px; z-index:10; display:flex; flex-wrap:wrap; gap:8px; padding:12px; margin-bottom:32px; background:var(--bg-panel-2); color:var(--text); border:1px solid var(--border); border-radius:var(--r-lg); }
.toc a { display:inline-flex; align-items:center; min-height:44px; padding:8px 14px; font-size:var(--fs-sm); text-decoration:none; border-radius:var(--r-sm); }
.toc a:hover,.toc a[aria-current="location"] { background:var(--bg-panel); color:var(--text); }
.toc-static { position:static; }
.faq-item { background:var(--bg-panel); color:var(--text); border:1px solid var(--border); border-radius:var(--r-lg); margin-bottom:12px; }
.faq-item summary { position:relative; min-height:64px; padding:20px 56px 20px 24px; font-weight:var(--weight-semibold); list-style:none; cursor:pointer; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; position:absolute; right:24px; top:20px; font-family:var(--font-mono); }
.faq-item[open] summary::after { content:"−"; }
.faq-answer { padding:0 24px 24px; color:var(--text-muted); }
.faq-answer > :last-child { margin-bottom:0; }
.term-card { border-top:3px solid var(--border); }
.term-card dt { font-size:var(--fs-h3); font-weight:var(--weight-bold); margin-bottom:8px; }
.term-card dd { margin:0; color:var(--text-muted); }
.term-meta { display:block; font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--text-muted); margin-bottom:16px; }
.badge-row { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.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); font-size:var(--fs-xs); font-weight:var(--weight-semibold); overflow-wrap:anywhere; }
.badge-lead,.badge-recommended { background:var(--paper); color:var(--ink); border-color:var(--paper-line-2); }
.badge-lead::before { content:""; width:6px; height:6px; flex:none; border-radius:var(--r-pill); background:var(--success); color:var(--ink); }
.badge-retired { background:var(--bg-panel-2); color:var(--text-muted); border-style:dashed; }
.badge-status::before { content:""; width:6px; height:6px; flex:none; border-radius:var(--r-pill); background:var(--success); color:var(--ink); }
.download-card { display:flex; flex-direction:column; gap:20px; }
.client-heading { display:flex; align-items:center; flex-wrap:wrap; gap:16px; }
.client-heading h3 { margin:0; }
.client-icon { width:56px; height:56px; flex-shrink:0; }
.client-heading-text { min-width:0; flex:1; }
.client-meta { color:var(--text-muted); font-size:var(--fs-sm); }
.download-actions { display:flex; flex-wrap:wrap; gap:12px; }
.download-actions .btn { min-width:0; }
.download-card p { margin:0; color:var(--text-muted); }
.download-minor { display:flex; flex-wrap:wrap; gap:16px; font-size:var(--fs-sm); }
.platform-card { display:flex; flex-direction:column; gap:20px; text-decoration:none; min-height:220px; }
.platform-card svg { width:30px; height:30px; fill:currentColor; }
.platform-card h3 { margin:0; }
.platform-card p { color:var(--text-muted); margin:0; font-size:var(--fs-sm); }
.platform-card .text-link { margin-top:auto; font-size:var(--fs-sm); }
.platform-card:hover { border-color:var(--text-muted); }
.article-card { display:flex; flex-direction:column; gap:16px; }
.article-card h3 { font-size:var(--fs-h3); margin:0; }
.article-card h3 a { text-decoration:none; }
.article-card h3 a:hover { text-decoration:underline; }
.article-card p { margin:0; color:var(--text-muted); }
.article-meta { display:flex; flex-wrap:wrap; gap:12px; align-items:center; font-size:var(--fs-xs); color:var(--text-muted); }
.article-card .text-link { margin-top:auto; font-size:var(--fs-sm); }
.callout { padding:24px 28px; border:1px solid var(--border); border-left:3px solid var(--text-muted); border-radius:var(--r-md); background:var(--bg-panel-2); color:var(--text); }
.callout p:last-child { margin-bottom:0; }
.callout-title { display:block; margin-bottom:8px; font-weight:var(--weight-bold); }
.callout-warning { border-left-color:var(--warn); }
.callout-error { border-left-color:var(--error); }
.callout-success { border-left-color:var(--success); }
.table-scroll { max-width:100%; min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch; margin-block:24px; border:1px solid var(--border); border-radius:var(--r-md); }
.data-table { width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.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; 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-panel-2); color:var(--text); font-weight:var(--weight-semibold); }
.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; margin-block:24px; }
.data-table code,.prose table code,.article-body table code { overflow-wrap:anywhere; word-break:normal; }
.dl-fab { position:fixed; z-index:40; right:max(20px,env(safe-area-inset-right)); bottom:max(20px,env(safe-area-inset-bottom)); display:flex; align-items:center; gap:12px; max-width:calc(100% - 40px); padding:14px 20px; background:var(--paper-hi); color:var(--ink); border:1px solid var(--paper-line-2); border-radius:var(--r-lg); box-shadow:var(--shadow-drop); text-decoration:none; }
.dl-fab svg { width:24px; height:24px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.dl-fab strong { display:block; font-size:var(--fs-sm); }
.dl-fab small { display:block; font-size:var(--fs-xs); color:var(--ink-soft); }
.article-download { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; margin-top:48px; padding:28px; border-radius:var(--r-xl); background:var(--bg-panel-2); color:var(--text); border:1px solid var(--border); }
.article-download h2 { font-size:var(--fs-h3); margin:0 0 8px; }
.article-download p { margin:0; color:var(--text-muted); }
.article-download-copy { flex:1 1 240px; min-width:0; }
.preview-section { padding-top:72px; padding-bottom:72px; }
.swatches { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; }
.swatch { padding:12px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--bg-panel-2); color:var(--text); min-width:0; }
.swatch code { display:block; font-size:var(--fs-xs); }
.swatch-sample { display:block; height:64px; margin-bottom:12px; border:1px solid var(--border); border-radius:var(--r-sm); color:var(--ink); }
.sw-bg { background:var(--bg); }.sw-bg-panel { background:var(--bg-panel); }.sw-bg-panel-2 { background:var(--bg-panel-2); }
.sw-border { background:var(--border); }.sw-accent { background:var(--accent); }.sw-accent-dark { background:var(--accent-dark); }
.sw-text { background:var(--text); }.sw-text-muted { background:var(--text-muted); }.sw-success { background:var(--success); }.sw-warn { background:var(--warn); }.sw-error { background:var(--error); }
.sw-paper { background:var(--paper); }.sw-paper-hi { background:var(--paper-hi); }.sw-paper-line { background:var(--paper-line); }.sw-paper-line-2 { background:var(--paper-line-2); }
.sw-ink { background:var(--ink); }.sw-ink-2 { background:var(--ink-2); }.sw-ink-soft { background:var(--ink-soft); }.sw-ink-muted { background:var(--ink-muted); }.sw-ink-faint { background:var(--ink-faint); }
.sw-on-accent { background:var(--on-accent); }.sw-white { background:var(--white); }
.sw-dev-body { background:var(--dev-body); }.sw-dev-chrome { background:var(--dev-chrome); }.sw-dev-line { background:var(--dev-line); }.sw-dev-bar { background:var(--dev-bar); }.sw-dev-bar-2 { background:var(--dev-bar-2); }.sw-dev-bar-strong { background:var(--dev-bar-strong); }.sw-dev-select { background:var(--dev-select); }
.sw-bezel { background:var(--bezel); }.sw-bezel-edge { background:var(--bezel-edge); }.sw-screen { background:var(--screen); }.sw-switch-off { background:var(--switch-off); }.sw-knob { background:var(--knob); }
.sw-glass { background:var(--glass); }.sw-glass-edge { background:var(--glass-edge); }.sw-glass-line { background:var(--glass-line); }.sw-marker { background:var(--marker); }.sw-floor { background:var(--floor); }.sw-dev-ring { background:var(--dev-ring); }.sw-veil { background:var(--veil); }.sw-clear { background:var(--clear); }
.type-display { font-family:var(--font-display); font-size:var(--fs-h1); line-height:var(--leading-title); font-weight:var(--weight-display); }
.type-mono { font-family:var(--font-mono); font-size:var(--fs-sm); }
.preview-label { font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--text-muted); margin-bottom:12px; }
@media (max-width:880px) {
  .feature-library { grid-template-columns:1fr; gap:24px; }
  .feature-library [role="tablist"] { flex-direction:row; flex-wrap:wrap; }
  .feature-library [role="tab"] { width:auto; flex:1 1 180px; }
}
@media (max-width:640px) {
  .window-content { padding:24px 20px 88px; }
  .menu-path { transform:none; right:16px; max-width:calc(100% - 32px); }
  .window-chrome { padding:16px 20px; }
  [role="tab"] { padding:12px 16px; }
  .feature-library [role="tab"] { flex:1 1 130px; padding:14px 16px; }
  .toc { position:static; }
  .faq-item summary { padding-left:20px; }
  .faq-answer { padding-inline:20px; }
  .callout { padding:20px; }
  .dl-fab { padding:12px 16px; }
  .dl-fab small { display:none; }
  .type-display { font-size:var(--fs-mobile-h1); }
  .swatches { grid-template-columns:repeat(2,minmax(0,1fr)); }
}