.tab-browser { min-width:0; }
.tab-rail { display:flex; align-items:center; gap:5px; width:max-content; max-width:100%; margin:0 auto 32px; padding:6px; overflow-x:auto; scrollbar-width:thin; border-radius:var(--r-pill); background:var(--bg-panel-2); color:var(--text); }
.tab-rail [role="tab"] { position:relative; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; min-height:44px; padding:10px 19px; border:0; border-radius:var(--r-pill); background:var(--clear); color:var(--text-muted); font-weight:600; font-size:14px; white-space:nowrap; }
.tab-rail [role="tab"][aria-selected="true"] { background:var(--bg-panel); color:var(--text); box-shadow:var(--shadow-float); }
.tab-progress { position:absolute; bottom:2px; left:18px; right:18px; height:2px; border-radius:var(--r-pill); overflow:hidden; }
.tab-progress::after { content:""; display:block; height:100%; transform:scaleX(0); transform-origin:left; background:var(--accent-grad-x); color:var(--text); }
[data-autoplay].is-playing [aria-selected="true"] .tab-progress::after { animation:tab-time 6s linear forwards; }
@keyframes tab-time { to { transform:scaleX(1); } }
.tab-panel { padding:44px; border:1px solid var(--border); border-radius:var(--r-xl); background:var(--bg-panel); color:var(--text); box-shadow:var(--shadow-float); }
.feature-panel { display:grid; grid-template-columns:minmax(0,45fr) minmax(0,55fr); align-items:center; gap:44px; }
.feature-panel h3 { margin:0 0 18px; font-size:28px; }
.feature-panel p { margin:0; color:var(--text-muted); line-height:1.85; }
.feature-slice { padding:28px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--bg); color:var(--text); }
.feature-slice pre { margin:0; }
.toc { position:sticky; top:16px; z-index:4; display:flex; flex-wrap:wrap; gap:8px; padding:12px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--bg-panel); color:var(--text); box-shadow:var(--shadow-float); }
.toc a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:8px 16px; border-radius:var(--r-pill); font-size:14px; }
.toc a:hover,.toc a[aria-current] { background:var(--bg-panel-2); color:var(--text); }
.faq-stack { display:grid; gap:12px; }
.faq-item { border:1px solid var(--border); border-radius:var(--r-lg); background:var(--bg-panel); color:var(--text); box-shadow:var(--shadow-hair); }
.faq-item summary { position:relative; list-style:none; padding:22px 56px 22px 24px; cursor:pointer; font-weight:600; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; position:absolute; right:24px; top:19px; font-size:23px; color:var(--text-muted); }
.faq-item[open] summary::after { content:"−"; }
.faq-body { padding:0 24px 24px; color:var(--text-muted); }
.faq-body p:last-child { margin-bottom:0; }
.term-card { padding:28px; border:1px solid var(--border); border-radius:var(--r-xl); background:var(--bg-panel); color:var(--text); box-shadow:var(--shadow-float); }
.term-card h3 { margin:12px 0; }
.term-card p { margin:0; color:var(--text-muted); }
.term-key { font-family:var(--font-mono); font-size:12px; color:var(--text-muted); }
.client-card { display:flex; flex-direction:column; gap:20px; padding:28px; border:1px solid var(--border); border-radius:var(--r-xl); background:var(--bg-panel); color:var(--text); box-shadow:var(--shadow-float); }
.client-head { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.client-head h3 { margin:0; font-size:22px; }
.client-card p { color:var(--text-muted); margin:0; }
.client-meta { display:flex; flex-wrap:wrap; gap:8px 16px; color:var(--text-muted); font-family:var(--font-mono); font-size:12px; }
.client-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:auto; }
[data-ver]:empty { display:none; }
.badge-priority { background:var(--text); color:var(--bg-panel); border-color:var(--text); }
.badge-recommended { background:var(--bg-panel-2); color:var(--text); border-color:var(--border-strong); }
.badge-archived { background:var(--bg-panel-2); color:var(--text-muted); border-style:dashed; }
.post-card { display:flex; flex-direction:column; padding:28px; border:1px solid var(--border); border-radius:var(--r-xl); background:var(--bg-panel); color:var(--text); box-shadow:var(--shadow-float); transition:box-shadow var(--speed),transform var(--speed); }
.post-card:hover { box-shadow:var(--shadow-window); transform:translateY(-3px); }
.post-meta { display:flex; align-items:center; flex-wrap:wrap; gap:12px; font-size:12px; color:var(--text-muted); }
.post-card h3 { margin:22px 0 14px; font-size:22px; }
.post-card p { margin:0 0 24px; color:var(--text-muted); }
.post-more { margin-top:auto; font-size:14px; font-weight:600; }
.callout { margin:24px 0; padding:22px 24px; border:1px solid var(--border); border-left:4px 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-warn { border-left-color:var(--warn); }
.callout-error { border-left-color:var(--error); }
.callout-success { border-left-color:var(--success); }
.table-scroll { width:100%; max-width:100%; min-width:0; overflow-x:auto; overscroll-behavior-x:contain; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--bg-panel); color:var(--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,.article-body table th,.article-body table 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 table th,.article-body table th { background:var(--bg-panel-2); color:var(--text); font-weight:600; }
.data-table tr:last-child td { border-bottom:0; }
.prose table,.article-body table { display:block; width:100%; max-width:100%; min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch; border-collapse:collapse; background:var(--bg-panel); color:var(--text); }
.prose table code,.article-body 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:1px solid var(--border); border-radius:var(--r-xl); background:var(--bg-panel-2); color:var(--text); }
.article-download h2 { margin:0 0 8px; font-size:24px; }
.article-download p { margin:0; color:var(--text-muted); }
.dl-fab { position:fixed; right:24px; bottom:24px; z-index:12; display:inline-flex; align-items:center; justify-content:center; gap:12px; max-width:calc(100% - 40px); min-height:60px; padding:12px 22px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--bg-panel); color:var(--text); box-shadow:var(--shadow-window); }
.dl-fab svg { width:22px; height:22px; flex-shrink:0; }
.dl-fab strong { display:block; font-size:14px; }
.dl-fab small { display:block; font-size:11px; color:var(--text-muted); }
.preview-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.preview-states { display:flex; flex-wrap:wrap; align-items:center; gap:20px; }
.swatch { overflow:hidden; border:1px solid var(--border); border-radius:var(--r-md); background:var(--bg-panel); color:var(--text); }
.swatch-paint { display:block; height:76px; border-bottom:1px solid var(--border); }
.swatch code { display:block; padding:12px; font-size:12px; color:var(--text); }
.sw-bg { background:var(--bg); color:var(--text); }
.sw-panel { background:var(--bg-panel); color:var(--text); }
.sw-panel2 { background:var(--bg-panel-2); color:var(--text); }
.sw-border { background:var(--border); color:var(--text); }
.sw-border-strong { background:var(--border-strong); color:var(--text); }
.sw-off { background:var(--switch-off); color:var(--text); }
.sw-dot { background:var(--chrome-dot); color:var(--text); }
.sw-accent { background:var(--accent); color:var(--text); }
.sw-accent-dark { background:var(--accent-dark); color:var(--text); }
.sw-text { background:var(--text); color:var(--bg-panel); }
.sw-muted { background:var(--text-muted); color:var(--bg-panel); }
.sw-faint { background:var(--text-faint); color:var(--text); }
.sw-deep { background:var(--ink-deep); color:var(--bg-panel); }
.sw-success { background:var(--success); color:var(--text); }
.sw-success-soft { background:var(--success-soft); color:var(--text); }
.sw-warn { background:var(--warn); color:var(--text); }
.sw-error { background:var(--error); color:var(--text); }
.sw-grad { background:var(--accent-grad-x); color:var(--text); }
.preview-symbols { position:absolute; width:0; height:0; overflow:hidden; }
@media (max-width:860px) {
  .preview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .feature-panel { grid-template-columns:minmax(0,1fr); gap:28px; }
}
@media (max-width:640px) {
  .tab-rail { width:100%; margin-bottom:24px; justify-content:flex-start; }
  .tab-rail [role="tab"] { padding-inline:16px; }
  .tab-panel { padding:24px; }
  .feature-panel h3 { font-size:24px; }
  .feature-slice { padding:18px; }
  .toc { flex-wrap:nowrap; overflow-x:auto; }
  .toc a { flex-shrink:0; }
  .dl-fab { right:20px; bottom:16px; }
  .preview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .client-card,.post-card,.term-card { padding:24px; }
}