.tabset { min-width:0; }
.tabs,[role="tablist"] { display:flex; gap:8px; min-width:0; max-width:100%; overflow-x:auto; padding:4px; scrollbar-width:thin; }
.tab,[role="tab"] {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  min-height:44px;
  gap:10px;
  padding:10px 20px;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:var(--bg);
  color:var(--text-muted);
  font-family:var(--font-body);
  font-size:15px;
  font-weight:var(--weight-regular);
  line-height:1.5;
  text-decoration:none;
}
.tab:hover,[role="tab"]:hover { color:var(--text); border-color:var(--text-muted); }
.tab[aria-selected="true"],[role="tab"][aria-selected="true"] { background:var(--bg-panel2); color:var(--text); border-color:var(--bg-panel2); }
.tab-panel { min-width:0; padding-top:28px; }
.tab-panel:focus-visible { outline-offset:6px; }
.feature-browser { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,7fr); gap:48px; }
.feature-browser [role="tablist"] { flex-direction:column; gap:0; padding:0; overflow:visible; align-self:start; }
.feature-browser [role="tab"] {
  position:relative;
  justify-content:flex-start;
  width:100%;
  min-height:76px;
  padding:20px 12px 20px 28px;
  border:0;
  border-bottom:1px solid var(--border);
  border-radius:0;
  background:var(--bg);
  color:var(--text-muted);
  text-align:left;
  white-space:normal;
  font-size:18px;
}
.feature-browser [role="tab"]::before { content:""; position:absolute; left:0; top:calc(50% - 4px); width:8px; height:8px; background:var(--accent); color:var(--on-accent); opacity:0; }
.feature-browser [role="tab"][aria-selected="true"] { background:var(--bg); color:var(--text); }
.feature-browser [role="tab"][aria-selected="true"]::before { opacity:1; }
.feature-browser [role="tab"]::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--accent); color:var(--on-accent); transform:scaleX(0); transform-origin:left; }
.feature-browser.is-playing [role="tab"][aria-selected="true"]::after { animation:tab-clock var(--feature-period) linear forwards; }
@keyframes tab-clock { to { transform:scaleX(1); } }
.feature-detail {
  position:relative;
  min-width:0;
  min-height:540px;
  padding:40px;
  border-radius:var(--r-card);
  background:var(--accent);
  color:var(--on-accent);
  overflow:hidden;
  isolation:isolate;
}
.feature-detail__head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.feature-detail h3 { margin:0; font-size:26px; }
.feature-detail p { margin-top:22px; max-width:620px; color:var(--on-accent); line-height:1.85; }
.feature-detail .btn { flex-shrink:0; }
.feature-art { position:relative; height:240px; margin-top:32px; overflow:hidden; color:var(--on-accent); }
.feature-sheet {
  position:absolute;
  left:10%;
  top:24px;
  width:70%;
  min-height:160px;
  padding:22px;
  border:1px solid var(--glass-line);
  border-radius:var(--r-panel);
  background:var(--glass-2);
  color:var(--on-accent);
  transform:rotate(-8deg);
}
.feature-sheet + .feature-sheet { top:72px; left:22%; transform:rotate(-8deg); }
.feature-sheet code { display:block; margin-top:10px; font-size:12px; }
.feature-sheet__row { padding-block:9px; border-bottom:1px solid var(--glass-line); font-size:14px; }
.toc { display:flex; align-items:center; gap:8px; overflow-x:auto; max-width:100%; padding-block:12px; background:var(--bg); color:var(--text); border-bottom:1px solid var(--border); }
.toc a { display:inline-flex; align-items:center; justify-content:center; flex:none; min-height:44px; padding:8px 16px; border-radius:var(--r-pill); color:var(--text-muted); text-decoration:none; }
.toc a:hover,.toc a[aria-current="location"] { background:var(--bg-panel2); color:var(--text); }
.toc--sticky { position:sticky; top:0; z-index:20; }
.document-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:56px; align-items:start; }
.document-layout > * { min-width:0; }
.document-layout > .toc { flex-direction:column; align-items:stretch; border-bottom:0; border-right:1px solid var(--border); top:24px; }
.document-layout > .toc a { justify-content:flex-start; white-space:normal; }
.faq { border-top:1px solid var(--border); }
.faq__item { border-bottom:1px solid var(--border); }
.faq__item summary { position:relative; padding:24px 44px 24px 0; font-size:18px; list-style:none; cursor:pointer; }
.faq__item summary::-webkit-details-marker { display:none; }
.faq__item summary::after { content:"+"; position:absolute; right:6px; top:22px; font-size:24px; color:var(--text-muted); }
.faq__item[open] summary::after { content:"−"; }
.faq__answer { padding-bottom:26px; max-width:800px; color:var(--text-muted); }
.faq__answer p:last-child { margin-bottom:0; }
.term-card { padding:28px; border:1px solid var(--border); border-radius:var(--r-tile); background:var(--bg); color:var(--text); min-width:0; }
.term-card__category { display:block; margin-bottom:14px; font-size:12px; color:var(--text-muted); }
.term-card h3 { margin:0 0 6px; }
.term-card__alias { font-family:var(--font-mono); font-size:12px; color:var(--text-muted); overflow-wrap:anywhere; }
.term-card p { margin:18px 0 0; color:var(--text-muted); }
.client-card { padding:32px; border:1px solid var(--border); border-radius:var(--r-card); background:var(--bg); color:var(--text); min-width:0; }
.client-card--primary { border-color:var(--text); }
.client-card__head { display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin-bottom:20px; }
.client-card__icon { width:56px; height:56px; flex-shrink:0; }
.client-card__heading { min-width:0; flex:1 1 160px; }
.client-card h3 { margin:0 0 6px; }
.client-card__meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; color:var(--text-muted); font-size:13px; }
.client-card__actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.client-card__actions .btn { white-space:normal; overflow-wrap:anywhere; }
[data-ver]:empty { display:none; }
.badge-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.status-badge,.tag {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:28px;
  max-width:100%;
  padding:4px 11px;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:var(--bg);
  color:var(--text-muted);
  font-size:12px;
  line-height:1.5;
  overflow-wrap:anywhere;
  white-space:normal;
  text-decoration:none;
}
.status-badge--first { background:var(--text); color:var(--on-accent); border-color:var(--text); }
.status-badge--recommended { color:var(--success); border-color:var(--success); background:var(--bg); }
.status-badge--archived { color:var(--text-muted); background:var(--bg-panel); border-color:var(--border); }
.status-dot { width:6px; height:6px; flex:none; border-radius:var(--r-circle); background:currentColor; color:inherit; }
.tag:hover { color:var(--link); border-color:var(--link); }
.post-card { display:flex; flex-direction:column; align-items:flex-start; min-width:0; padding:28px; border:1px solid var(--border); border-radius:var(--r-tile); background:var(--bg); color:var(--text); }
.post-card__meta { display:flex; align-items:center; flex-wrap:wrap; gap:12px; color:var(--text-muted); font-size:12px; }
.post-card h3 { margin:22px 0 14px; font-size:21px; line-height:1.5; }
.post-card h3 a { color:var(--text); text-decoration:none; }
.post-card h3 a:hover { color:var(--link); }
.post-card p { font-size:15px; color:var(--text-muted); }
.post-card__more { margin-top:auto; padding-top:16px; font-size:14px; }
.callout { margin:28px 0; padding:22px 24px; border:1px solid var(--border); border-left:3px solid var(--link); border-radius:var(--r-btn); background:var(--bg-panel); color:var(--text); }
.callout p:last-child { margin-bottom:0; }
.callout__title { display:block; margin-bottom:8px; font-weight:var(--weight-medium); }
.callout--warning { border-left-color:var(--warn); }
.callout--error { border-left-color:var(--error); }
.table-scroll { overflow-x:auto; max-width:100%; min-width:0; margin-block:28px; border:1px solid var(--border); border-radius:var(--r-btn); -webkit-overflow-scrolling:touch; }
.data-table { width:100%; border-collapse:collapse; color:var(--text); font-size:14px; 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);
  vertical-align:top;
  overflow-wrap:normal;
  word-break:normal;
}
.data-table th,.prose table th,.article-body table th { font-weight:var(--weight-medium); 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;
}
.prose table code,.article-body table code { overflow-wrap:anywhere; white-space:normal; }
.article-download { display:flex; align-items:center; justify-content:space-between; gap:28px; margin-top:64px; padding:32px; border:1px solid var(--border); border-radius:var(--r-card); background:var(--bg-panel); color:var(--text); }
.article-download > div { min-width:0; }
.article-download h2 { margin:0 0 12px; font-size:24px; }
.article-download p { margin:0; color:var(--text-muted); }
.article-download .btn { flex-shrink:0; }
.dl-fab {
  position:fixed;
  right:max(20px,env(safe-area-inset-right));
  bottom:max(20px,env(safe-area-inset-bottom));
  z-index:30;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  max-width:calc(100vw - 40px);
  min-height:56px;
  padding:12px 20px;
  border:1px solid var(--text);
  border-radius:var(--r-btn);
  background:var(--text);
  color:var(--on-accent);
  font-size:14px;
  text-decoration:none;
}
.dl-fab:hover { background:var(--ink-hover); color:var(--on-accent); border-color:var(--ink-hover); }
.dl-fab svg { width:22px; height:22px; flex:none; }
.dl-fab__text { min-width:0; }
.dl-fab__text small { display:block; font-size:11px; }
.preview-group { padding-top:72px; padding-bottom:72px; border-top:1px solid var(--border); }
.preview-group > h2 { margin-top:0; margin-bottom:32px; }
.swatches { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.swatch { min-width:0; padding:12px; border:1px solid var(--border); border-radius:var(--r-btn); background:var(--bg); color:var(--text); }
.swatch__paint { display:block; height:76px; margin-bottom:12px; border:1px solid var(--border); border-radius:var(--r-small); }
.swatch code { display:block; font-size:12px; }
.paint--bg { background:var(--bg); color:var(--text); }
.paint--panel { background:var(--bg-panel); color:var(--text); }
.paint--panel2 { background:var(--bg-panel2); color:var(--text); }
.paint--border { background:var(--border); color:var(--text); }
.paint--accent { background:var(--accent); color:var(--on-accent); }
.paint--accent-dark { background:var(--accent-dark); color:var(--on-accent); }
.paint--text { background:var(--text); color:var(--on-accent); }
.paint--muted { background:var(--text-muted); color:var(--on-accent); }
.paint--link { background:var(--link); color:var(--on-accent); }
.paint--success { background:var(--success); color:var(--on-accent); }
.paint--warn { background:var(--warn); color:var(--text); }
.paint--error { background:var(--error); color:var(--on-accent); }
.paint--hover { background:var(--ink-hover); color:var(--on-accent); }
.paint--white { background:var(--on-accent); color:var(--text); }
.glass-samples { display:flex; flex-wrap:wrap; gap:12px; padding:28px; border-radius:var(--r-card); background:var(--accent); color:var(--on-accent); }
.glass-sample { padding:18px; border:1px solid var(--glass-line); border-radius:var(--r-btn); background:var(--glass-2); color:var(--on-accent); }
.glass-sample--one { background:var(--glass-1); color:var(--on-accent); }
.glass-sample--three { background:var(--glass-3); color:var(--on-accent); }
.glass-sample--four { background:var(--glass-4); color:var(--on-accent); }
.preview-footer-note { margin-top:24px; font-size:13px; color:var(--text-muted); }
@media (max-width:900px) {
  .feature-browser { grid-template-columns:minmax(0,1fr); gap:24px; }
  .feature-browser [role="tablist"] { flex-direction:row; gap:8px; overflow-x:auto; padding:4px; }
  .feature-browser [role="tab"] { width:auto; min-height:44px; padding:10px 18px; border:1px solid var(--border); border-radius:var(--r-pill); font-size:15px; white-space:nowrap; }
  .feature-browser [role="tab"]::before,.feature-browser [role="tab"]::after { display:none; }
  .feature-browser [role="tab"][aria-selected="true"] { background:var(--bg-panel2); color:var(--text); }
  .document-layout { grid-template-columns:minmax(0,1fr); gap:24px; }
  .document-layout > .toc { flex-direction:row; border-right:0; border-bottom:1px solid var(--border); top:0; }
  .document-layout > .toc a { white-space:nowrap; }
}
@media (max-width:640px) {
  .feature-detail { padding:24px; min-height:560px; }
  .feature-detail__head { flex-direction:column; gap:16px; }
  .feature-detail h3 { font-size:23px; }
  .feature-sheet,.feature-sheet + .feature-sheet { transform:none; }
  .feature-sheet { left:0; width:85%; }
  .feature-sheet + .feature-sheet { left:12%; }
  .client-card { padding:24px; }
  .article-download { flex-direction:column; align-items:flex-start; padding:24px; }
  .swatches { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (prefers-reduced-motion:reduce) {
  .feature-browser.is-playing [role="tab"][aria-selected="true"]::after { animation:none; transform:scaleX(1); }
}