.tabs{min-width:0}
[role="tablist"]{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:28px;padding-bottom:14px;border-bottom:1px solid var(--rule)}
[role="tab"]{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;max-width:100%;padding:10px 18px;border:1px solid var(--rule);border-radius:var(--r);background:var(--surface);color:var(--ink);font-weight:var(--weight-medium)}
[role="tab"][aria-selected="true"]{background:var(--bg-panel);color:var(--text);border-color:var(--bg-panel);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:6px}
[role="tab"]:hover{border-color:var(--border)}
[role="tabpanel"]{min-width:0}
.toc{position:sticky;top:0;z-index:10;display:flex;flex-wrap:wrap;gap:8px 24px;padding:16px 20px;background:var(--bg-panel2);color:var(--ink);border-block:1px solid var(--rule);margin-bottom:40px}
.toc a{display:inline-flex;align-items:center;min-height:36px;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:5px}
.toc-static{position:static}
.faq-item{border-bottom:1px solid var(--rule);padding-top:8px;padding-bottom:8px}
.faq-item summary{position:relative;cursor:pointer;list-style:none;padding:20px 36px 20px 0;font-size:var(--size-lede);font-weight:var(--weight-medium)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:4px;top:18px;font-family:var(--font-mono);font-size:var(--size-h3);color:var(--ink-soft)}
.faq-item[open] summary::after{content:"−"}
.faq-answer{max-width:760px;color:var(--ink-soft);padding-bottom:12px}
.faq-answer p:last-child{margin-bottom:0}
.term-card{min-width:0;border-top:1px solid var(--border);padding-top:24px;padding-bottom:28px}
.term-card h3{margin-bottom:8px}
.term-category{font-family:var(--font-mono);font-size:var(--size-xs);color:var(--ink-soft);margin-bottom:12px}
.term-card p{color:var(--ink-soft)}
.client-card{min-width:0;padding:32px;border:1px solid var(--rule);border-radius:var(--r);background:var(--surface);color:var(--ink)}
.client-card+.client-card{margin-top:24px}
.client-head{display:flex;align-items:flex-start;flex-wrap:wrap;gap:16px;margin-bottom:20px}
.client-icon{width:56px;height:56px;flex-shrink:0}
.client-heading{min-width:0;flex:1 1 180px}
.client-heading h3{margin-bottom:8px}
.client-heading p{margin-bottom:0;color:var(--ink-soft)}
.client-version{display:inline-block;font-family:var(--font-mono);font-size:var(--size-xs);color:var(--ink-soft);margin-top:8px}
[data-rev]:empty{display:none}
.client-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.client-note{font-size:var(--size-sm);color:var(--ink-soft);margin-top:18px;margin-bottom:0}
.client-card--recommended{border-color:var(--border);border-top:3px solid var(--accent)}
.client-card--archive{background:var(--bg-panel2);color:var(--ink)}
.badges{display:flex;flex-wrap:wrap;gap:8px}
.badge,.tag{display:inline-flex;align-items:center;justify-content:center;gap:7px;max-width:100%;min-height:28px;padding:4px 10px;border:1px solid var(--rule);border-radius:var(--r);background:var(--bg-panel2);color:var(--ink-soft);font-size:var(--size-xs);line-height:1.5;white-space:normal;overflow-wrap:anywhere}
.badge--first,.badge--recommended{background:var(--bg-panel);color:var(--text);border-color:var(--border)}
.badge--first::before,.badge--recommended::before{content:"";width:6px;height:6px;flex-shrink:0;border-radius:var(--r);background:var(--success)}
.badge--archive{background:var(--rule);color:var(--ink);border-color:var(--rule)}
.badge--archive::before{content:"";width:6px;height:6px;flex-shrink:0;border-radius:var(--r);background:var(--ink-soft)}
.post-card{min-width:0;padding-top:28px;padding-bottom:32px;border-top:1px solid var(--border)}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:18px;font-family:var(--font-mono);font-size:var(--size-xs);color:var(--ink-soft)}
.post-card h3{margin-bottom:16px}
.post-card h3 a{text-decoration:underline;text-decoration-color:var(--clear);text-underline-offset:6px}
.post-card h3 a:hover{text-decoration-color:var(--accent)}
.post-card p{color:var(--ink-soft)}
.callout{margin:28px 0;padding:24px 28px;border:1px solid var(--rule);border-left:3px solid var(--border);border-radius:var(--r);background:var(--surface);color:var(--ink)}
.callout p:last-child{margin-bottom:0}
.callout-title{display:block;margin-bottom:8px;font-weight:var(--weight-semibold)}
.callout--warn{border-left-color:var(--warn)}
.callout--success{border-left-color:var(--success)}
.callout--error{border-left-color:var(--error)}
.callout--dark{background:var(--bg-panel);color:var(--text);border-color:var(--border)}
.table-scroll{overflow-x:auto;max-width:100%;min-width:0;-webkit-overflow-scrolling:touch;margin-block:28px}
.data-table{width:100%;border-collapse:collapse;background:var(--surface);color:var(--ink);font-size:var(--size-nav);text-align:left}
.data-table th,.data-table td,.prose table th,.prose table td{min-width:7em;padding:16px 20px;border-bottom:1px solid var(--rule);vertical-align:top;overflow-wrap:normal;word-break:normal}
.data-table th,.prose table th{background:var(--bg-panel2);color:var(--ink);font-weight:var(--weight-semibold)}
.data-table td code,.prose table td code{overflow-wrap:anywhere;word-break:normal}
.prose table,.article-body table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;min-width:0;border-collapse:collapse;background:var(--surface);color:var(--ink)}
.article-body table th,.article-body table td{min-width:7em;padding:16px 20px;overflow-wrap:normal;word-break:normal;border-bottom:1px solid var(--rule)}
.article-body{min-width:0}
.article-body :is(div,section){min-width:0;max-width:100%}
.article-download{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px;margin-top:48px;padding:32px;background:var(--bg-panel);color:var(--text);border:1px solid var(--border);border-radius:var(--r)}
.article-download>div{min-width:0;flex:1 1 260px}
.article-download h2{font-size:var(--size-h3);margin-bottom:12px}
.article-download p{color:var(--text-muted);margin-bottom: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(100% - 40px);min-height:52px;padding:12px 20px;border:1px solid var(--border);border-bottom:3px solid var(--accent);border-radius:var(--r);background:var(--bg-panel);color:var(--text);font-size:var(--size-nav);font-weight:var(--weight-medium)}
.dl-fab:hover{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:5px}
.preview-palette{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.swatch{min-width:0;border:1px solid var(--rule);border-radius:var(--r);background:var(--surface);color:var(--ink);overflow:hidden}
.swatch-color{height:76px;border-bottom:1px solid var(--rule)}
.swatch figcaption{padding:12px;font-size:var(--size-xs)}
.swatch figcaption code{display:block}
.swatch{margin:0}
.sw-bg{background:var(--bg);color:var(--text)}
.sw-panel{background:var(--bg-panel);color:var(--text)}
.sw-panel2{background:var(--bg-panel2);color:var(--ink)}
.sw-border{background:var(--border);color:var(--text)}
.sw-accent{background:var(--accent);color:var(--ink)}
.sw-accent-dark{background:var(--accent-dark);color:var(--surface)}
.sw-text{background:var(--text);color:var(--ink)}
.sw-muted{background:var(--text-muted);color:var(--ink)}
.sw-success{background:var(--success);color:var(--ink)}
.sw-warn{background:var(--warn);color:var(--ink)}
.sw-error{background:var(--error);color:var(--ink)}
.sw-ink{background:var(--ink);color:var(--text)}
.sw-ink-soft{background:var(--ink-soft);color:var(--text)}
.sw-surface{background:var(--surface);color:var(--ink)}
.sw-rule{background:var(--rule);color:var(--ink)}
.sw-clear{background:var(--clear);color:var(--ink)}
.sw-wall{background:var(--scene-wall);color:var(--ink)}
.sw-shade{background:var(--scene-shade);color:var(--text)}
.sw-wood{background:var(--scene-wood);color:var(--ink)}
.sw-wood-deep{background:var(--scene-wood-deep);color:var(--ink)}
.sw-taupe{background:var(--scene-taupe);color:var(--text)}
.sw-screen{background:var(--scene-screen);color:var(--text)}
.sw-board{background:var(--scene-board);color:var(--ink)}
.sw-line{background:var(--scene-line);color:var(--ink)}
.sw-glow{background:var(--scene-glow);color:var(--ink)}
.type-sample{font-family:var(--font-display);font-size:var(--size-h1);font-weight:var(--weight-regular);line-height:1.22}
.preview-label{font-family:var(--font-mono);font-size:var(--size-xs);color:var(--ink-soft)}
.section-dark .preview-label{color:var(--text-muted)}
.preview-button-set{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-bottom:28px}
.preview-chips{justify-content:flex-start}
.preview-mobile-nav{display:none}
@media(max-width:768px){.preview-palette{grid-template-columns:repeat(3,minmax(0,1fr))}.type-sample{font-size:var(--size-hero-mobile)}}
@media(max-width:640px){
  .preview-palette{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .client-card{padding:24px}
  .callout{padding:20px}
  .toc{position:static;gap:8px 18px;padding:12px 16px}
  .article-download{padding:24px}
  .article-download .btn{width:100%}
  .dl-fab{font-size:var(--size-sm);min-height:48px;padding:10px 16px}
  .preview-mobile-nav{display:block}
}