.tabs {min-width:0}
.tabs [role="tablist"] {display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:24px;min-width:0}
.tabs [role="tab"] {display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border:1px solid var(--border);border-radius:var(--r-pill);background:var(--bg-panel);color:var(--text-muted);text-align:left;line-height:1.5}
.tabs [role="tab"]:hover {border-color:var(--border-strong);color:var(--text)}
.tabs [role="tab"][aria-selected="true"] {border-color:var(--accent);background:var(--accent-soft);color:var(--text)}
.tabs [role="tabpanel"] {min-width:0;scroll-margin-top:24px}
.library {display:grid;grid-template-columns:minmax(190px,.7fr) minmax(0,2fr);gap:32px}
.library [role="tablist"] {display:flex;flex-direction:column;align-items:stretch;gap:4px}
.library [role="tab"] {position:relative;display:flex;justify-content:flex-start;width:100%;border:0;border-radius:var(--r-sm);background:var(--clear);color:var(--text-muted);padding:16px 20px}
.library [role="tab"][aria-selected="true"] {background:var(--bg-panel-2);color:var(--text)}
.library [role="tab"][aria-selected="true"]::before {content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:var(--r-pill);background:var(--accent);color:var(--text)}
.tab-progress {position:absolute;left:20px;right:20px;bottom:5px;height:2px;overflow:hidden;border-radius:var(--r-pill);background:var(--border);color:var(--text)}
.tab-progress::after {content:"";display:block;width:100%;height:100%;background:var(--accent);color:var(--text);transform:scaleX(0);transform-origin:left}
.tabs.is-playing [aria-selected="true"] .tab-progress::after {animation:tab-clock 9s linear forwards}
@keyframes tab-clock {to{transform:scaleX(1)}}
.toc {position:sticky;top:16px;align-self:start;display:flex;flex-wrap:wrap;gap:8px;padding:12px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg);color:var(--text);z-index:10;max-width:100%}
.toc a {display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 14px;border-radius:var(--r-pill);color:var(--text-muted);font-size:14px}
.toc a:hover,.toc a[aria-current="location"] {background:var(--bg-panel-2);color:var(--text)}
.faq-item {border-bottom:1px solid var(--border);padding-block:8px}
.faq-item summary {position:relative;list-style:none;cursor:pointer;padding:18px 52px 18px 0;font-size:17px;font-weight:500;min-height:60px}
.faq-item summary::-webkit-details-marker {display:none}
.faq-item summary::after {content:"+";position:absolute;right:0;top:12px;display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--border);border-radius:var(--r-circle);font-size:24px;font-weight:400}
.faq-item[open] summary::after {content:"−"}
.faq-item__body {padding:0 48px 16px 0;color:var(--text-muted)}
.faq-item__body a {color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px}
.term-card {border:1px solid var(--border);border-radius:var(--r-lg);padding:26px;background:var(--bg-panel);color:var(--text)}
.term-card__label {font-family:var(--font-mono);font-size:12px;color:var(--text-muted);letter-spacing:.04em}
.term-card h3 {margin:12px 0}
.term-card p {margin-bottom:0;color:var(--text-muted)}
.client-card {padding:28px;border:1px solid var(--border);border-radius:var(--r-xl);background:var(--bg-panel);color:var(--text);box-shadow:var(--shadow-panel);min-width:0}
.client-card--lead {border-color:var(--accent)}
.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}
.client-card__heading h3 {margin:0 0 6px}
.client-card__meta {display:flex;flex-wrap:wrap;gap:8px 16px;font-size:13px;color:var(--text-muted)}
.client-card__actions {display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
[data-ver]:empty {display:none}
.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);font-size:12px;font-weight:500;line-height:1.5;overflow-wrap:anywhere;background:var(--bg-panel-2);color:var(--text-muted)}
.badge--lead {background:var(--accent);color:var(--text);border-color:var(--accent)}
.badge--recommended {background:var(--accent-soft);color:var(--text);border-color:var(--accent-soft)}
.badge--archived {background:var(--bg-panel-2);color:var(--text-muted);border-color:var(--border-strong)}
.tag {display:inline-flex;max-width:100%;padding:4px 10px;border-radius:var(--r-pill);background:var(--bg-panel-2);color:var(--text-muted);font-size:12px;overflow-wrap:anywhere}
.post-card {display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:28px;border:1px solid var(--border);border-radius:var(--r-xl);background:var(--bg-panel);color:var(--text);min-width:0;transition:border-color var(--speed)}
.post-card:hover {border-color:var(--border-strong)}
.post-card__meta {display:flex;align-items:center;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--text-muted)}
.post-card h3 {margin:0;font-size:24px}
.post-card p {margin:0;color:var(--text-muted)}
.post-card__link {margin-top:auto;color:var(--accent-dark);font-size:14px;text-decoration:underline;text-underline-offset:4px}
.callout {margin:24px 0;padding:22px 24px;border:1px solid var(--border);border-left:3px solid var(--accent);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:600}
.callout--error {border-left-color:var(--error);background:var(--ink-panel);color:var(--ink-text)}
.callout--error .callout__title {color:var(--error)}
.callout a {text-decoration:underline;text-underline-offset:3px}
.table-wrap {max-width:100%;min-width:0;overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-lg);overscroll-behavior-x:contain}
.data-table {width:100%;border-collapse:collapse;text-align:left;background:var(--bg-panel);color:var(--text);font-size:14px}
.data-table th,.data-table td,.prose table th,.prose table td {min-width:7em;padding:16px 20px;vertical-align:top;border-bottom:1px solid var(--border);overflow-wrap:normal;word-break:normal}
.data-table th {font-weight:500;background:var(--bg-panel-2);color:var(--text)}
.data-table tr:last-child td {border-bottom:0}
.prose table {display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;min-width:0;border-collapse:collapse}
.prose table code {overflow-wrap:anywhere}
.dl-fab {position:fixed;right:24px;bottom:24px;z-index:25;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:60px;max-width:calc(100% - 32px);padding:12px 20px;border:1px solid var(--ink-border);border-radius:var(--r-pill);background:var(--ink-panel);color:var(--ink-text);box-shadow:var(--shadow-dark-float)}
.dl-fab svg {width:24px;height:24px;color:var(--accent);flex-shrink:0}
.dl-fab strong {display:block;font-weight:500;font-size:14px}
.dl-fab small {display:block;font-size:12px;color:var(--ink-muted)}
.dl-fab:hover {border-color:var(--accent)}
.article-download {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px;margin-top:40px;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:26px}
.article-download p {margin:0;color:var(--text-muted)}
.pitfall-grid {display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px;margin-top:40px}
.pitfall-card {min-width:0;padding:28px;border:1px solid var(--ink-border);border-radius:var(--r-xl);background:var(--ink-panel);color:var(--ink-text)}
.pitfall-card:first-child {grid-row:span 2}
.pitfall-card summary {display:flex;align-items:center;justify-content:space-between;gap:16px;list-style:none;cursor:pointer;font-family:var(--font-display);font-size:25px;font-weight:400}
.pitfall-card summary::-webkit-details-marker {display:none}
.pitfall-card summary::after {content:"+";display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;border:1px solid var(--ink-border);border-radius:var(--r-circle);background:var(--ink-border);color:var(--ink-text);font-family:var(--font-body);font-size:25px}
.pitfall-card[open] summary::after {content:"−"}
.pitfall-card p {margin:20px 0 0;color:var(--ink-muted);line-height:1.8}
.pitfall-card a {color:var(--ink-text);text-decoration:underline;text-underline-offset:4px}
.pitfall-art {height:140px;display:flex;align-items:center;justify-content:center;margin-bottom:24px}
.pitfall-card:first-child .pitfall-art {height:320px}
.pitfall-art svg {height:100%;width:100%}
.diagram-line {fill:none;stroke:var(--ink-muted);stroke-width:1.5}
.diagram-alert {fill:none;stroke:var(--error);stroke-width:2}
.diagram-label {fill:var(--ink-text);font-family:var(--font-mono);font-size:12px}
.diagram-warning {fill:var(--error);font-family:var(--font-mono);font-size:13px}
.diagram-surface {fill:var(--ink);stroke:var(--ink-border);stroke-width:1.5}
.preview-heading {margin-bottom:32px}
.preview-row {display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:20px}
.preview-only-static .dial__needle,.preview-only-static .dial__on,.preview-only-static .s-steam {animation:none}
.preview-only-static .dial__on {opacity:0}
.preview-only-static .dial__on--trojan {opacity:1}
.swatches {display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.swatch {display:flex;align-items:flex-end;min-height:100px;padding:12px;border:1px solid var(--border);border-radius:var(--r-md);font-family:var(--font-mono);font-size:11px;overflow-wrap:anywhere;background:var(--bg-panel);color:var(--text)}
.swatch span {padding:3px 6px;background:var(--bg);color:var(--text);border-radius:var(--r-focus)}
.sw-bg{background:var(--bg);color:var(--text)}
.sw-bg-panel{background:var(--bg-panel);color:var(--text)}
.sw-bg-panel-2{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-accent{background:var(--accent);color:var(--text)}
.sw-accent-dark{background:var(--accent-dark);color:var(--bg-panel)}
.sw-accent-soft{background:var(--accent-soft);color:var(--text)}
.sw-text{background:var(--text);color:var(--bg)}
.sw-text-muted{background:var(--text-muted);color:var(--bg)}
.sw-text-soft{background:var(--text-soft);color:var(--text)}
.sw-success{background:var(--success);color:var(--text)}
.sw-warn{background:var(--warn);color:var(--text)}
.sw-error{background:var(--error);color:var(--text)}
.sw-ink{background:var(--ink);color:var(--ink-text)}
.sw-ink-panel{background:var(--ink-panel);color:var(--ink-text)}
.sw-ink-panel-a{background:var(--ink-panel-a);color:var(--ink-text)}
.sw-ink-border{background:var(--ink-border);color:var(--ink-text)}
.sw-ink-text{background:var(--ink-text);color:var(--ink)}
.sw-ink-muted{background:var(--ink-muted);color:var(--ink)}
.sw-dial-1{background:var(--dial-1);color:var(--text)}
.sw-dial-2{background:var(--dial-2);color:var(--text)}
.sw-dial-3{background:var(--dial-3);color:var(--text)}
.sw-dial-4{background:var(--dial-4);color:var(--text)}
.sw-dial-5{background:var(--dial-5);color:var(--text)}
.sw-dial-6{background:var(--dial-6);color:var(--text)}
.sw-sky-1{background:var(--sky-1);color:var(--text)}
.sw-sky-2{background:var(--sky-2);color:var(--text)}
.sw-sky-3{background:var(--sky-3);color:var(--text)}
.sw-sun{background:var(--sun);color:var(--text)}
.sw-skyline{background:var(--skyline);color:var(--text)}
.sw-mullion{background:var(--mullion);color:var(--text)}
.sw-mullion-lit{background:var(--mullion-lit);color:var(--text)}
.sw-wall{background:var(--wall);color:var(--text)}
.sw-desk-1{background:var(--desk-1);color:var(--bg)}
.sw-desk-2{background:var(--desk-2);color:var(--bg)}
.sw-walnut-edge{background:var(--walnut-edge);color:var(--bg)}
.sw-walnut-lip{background:var(--walnut-lip);color:var(--text)}
.sw-walnut-grain{background:var(--walnut-grain);color:var(--text)}
.sw-shell{background:var(--shell);color:var(--text)}
.sw-shell-dark{background:var(--shell-dark);color:var(--text)}
.sw-bezel{background:var(--bezel);color:var(--bg)}
.sw-screen-bg{background:var(--screen-bg);color:var(--text)}
.sw-screen-side{background:var(--screen-side);color:var(--text)}
.sw-screen-block{background:var(--screen-block);color:var(--text)}
.sw-screen-dot{background:var(--screen-dot);color:var(--text)}
.sw-cat{background:var(--cat);color:var(--text)}
.sw-cat-line{background:var(--cat-line);color:var(--bg)}
.sw-cat-ear{background:var(--cat-ear);color:var(--text)}
.sw-cup{background:var(--cup);color:var(--text)}
.sw-cup-shade{background:var(--cup-shade);color:var(--text)}
.sw-tea{background:var(--tea);color:var(--text)}
.sw-steam{background:var(--steam);color:var(--text)}
.sw-veil{background:var(--veil);color:var(--ink-text)}
.sw-clear{background:var(--clear);color:var(--text)}
@media(max-width:768px) {
  .library {grid-template-columns:minmax(0,1fr);gap:16px}
  .library [role="tablist"] {flex-direction:row;flex-wrap:wrap;gap:6px}
  .library [role="tab"] {width:auto;flex:0 1 auto;padding:12px 16px}
  .pitfall-grid {grid-template-columns:minmax(0,1fr)}
  .pitfall-card:first-child {grid-row:auto}
  .pitfall-card:first-child .pitfall-art {height:200px}
}
@media(max-width:640px) {
  .client-card,.post-card,.term-card {padding:22px}
  .faq-item__body {padding-right:0}
  .dl-fab {right:16px;bottom:16px;padding:10px 16px}
  .dl-fab small {display:none}
  .article-download {padding:22px}
  .toc {position:static}
  .pitfall-card {padding:22px}
  .data-table th,.data-table td,.prose table th,.prose table td {padding:14px 16px}
}
@media(prefers-reduced-motion:reduce) {
  .tab-progress {display:none}
}