.tabs { min-width:0 }
[role="tablist"] { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:24px }
[role="tab"] {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:10px 20px; border:1px solid var(--border);
  border-radius:var(--r-pill); background:var(--bg); color:var(--text-muted);
  font-size:15px; font-weight:var(--weight-label); line-height:1.4;
}
[role="tab"]:hover { background:var(--bg-panel); color:var(--text) }
[role="tab"][aria-selected="true"] { background:var(--bg-panel-2); color:var(--on-dark); border-color:var(--bg-panel-2) }
[role="tabpanel"] { min-width:0 }
[role="tabpanel"]:focus-visible { outline-offset:6px }
.toc {
  position:sticky; top:16px; z-index:8;
  display:flex; flex-wrap:wrap; gap:8px; padding:12px;
  border:1px solid var(--border); border-radius:var(--r-card);
  background:var(--bg); color:var(--text); box-shadow:var(--shadow-card);
}
.toc a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:9px 14px; border-radius:var(--r-pill); text-decoration:none; font-size:14px; line-height:1.4 }
.toc a:hover,.toc a[aria-current] { background:var(--bg-panel); 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:20px 40px 20px 0; font-weight:var(--weight-bold); line-height:1.5 }
.faq-item summary::-webkit-details-marker { display:none }
.faq-item summary::after { content:"+"; position:absolute; right:8px; top:17px; font-size:24px; color:var(--text-muted) }
.faq-item[open] summary::after { content:"−" }
.faq-answer { padding:0 32px 20px 0; color:var(--text-muted) }
.faq-answer p:last-child { margin-bottom:0 }
.term-card { border:0; background:var(--bg-panel); color:var(--text); border-radius:var(--r-canvas); padding:32px }
.term-card h3 { margin-bottom:6px }
.term-en { display:block; font-family:var(--font-mono); font-size:13px; color:var(--text-muted); margin-bottom:16px }
.term-card p { margin-bottom:0 }
.client-card { position:relative; padding:32px; border:1px solid var(--border); border-radius:var(--r-canvas); background:var(--bg); color:var(--text) }
.client-card.is-first { border-width:2px; border-color:var(--text); box-shadow:var(--shadow-card) }
.client-head { display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:16px }
.client-head h3 { margin:0 }
.client-card p { color:var(--text-muted) }
.client-meta { display:flex; flex-wrap:wrap; gap:8px 20px; font-size:14px; color:var(--text-muted); margin-block:20px }
[data-version]:empty { display:none }
.client-actions { display:flex; flex-wrap:wrap; gap:12px }
.tag,.status-badge { display:inline-flex; align-items:center; gap:6px; max-width:100%; padding:5px 10px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--bg-panel); color:var(--text); font-size:12px; font-weight:var(--weight-label); line-height:1.45; white-space:normal; overflow-wrap:anywhere }
.status-badge::before { content:""; width:6px; height:6px; border-radius:var(--r-pill); flex-shrink:0; background:var(--text-muted); color:var(--text) }
.status-first,.status-recommended { background:var(--bg-panel-2); color:var(--on-dark); border-color:var(--bg-panel-2) }
.status-first::before,.status-recommended::before { background:var(--success); color:var(--text) }
.status-archived::before { background:var(--warn); color:var(--text) }
.status-error::before { background:var(--error); color:var(--text) }
.post-card { display:flex; flex-direction:column; align-items:flex-start; padding:32px; border:1px solid var(--border); border-radius:var(--r-canvas); background:var(--bg); color:var(--text); transition:box-shadow var(--duration-fast),transform var(--duration-fast) }
.post-card:hover { box-shadow:var(--shadow-card); transform:translateY(-3px) }
.post-meta { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:20px; font-size:13px; color:var(--text-muted) }
.post-card h3 { font-size:24px; margin-bottom:16px }
.post-card h3 a { text-decoration:none }
.post-card p { color:var(--text-muted) }
.post-link { margin-top:auto; font-size:14px; font-weight:var(--weight-bold) }
.callout { margin:24px 0; padding:24px 28px; border:1px solid var(--border); border-left:4px solid var(--text-muted); border-radius:var(--r-card); background:var(--bg-panel); color:var(--text) }
.callout p:last-child { margin-bottom:0 }
.callout strong { display:block; margin-bottom:8px }
.callout-warning { border-left-color:var(--warn) }
.callout-error { border-left-color:var(--error) }
.callout-success { border-left-color:var(--success) }
.table-wrap { width:100%; max-width:100%; min-width:0; overflow-x:auto; border:1px solid var(--border); border-radius:var(--r-card); overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch }
.data-table { width:100%; border-collapse:collapse; text-align:left; font-size:15px; background:var(--bg); color:var(--text) }
.data-table th,.data-table td,.prose table th,.prose table td {
  min-width:7em; padding:16px 20px; border-bottom:1px solid var(--border);
  vertical-align:top; overflow-wrap:normal; word-break:normal; white-space:normal;
}
.data-table th,.prose table th { background:var(--bg-panel); color:var(--text); font-weight:var(--weight-bold) }
.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; width:100%; border-collapse:collapse; overscroll-behavior-x:contain;
}
.prose table code,.data-table code { overflow-wrap:anywhere }
.dl-fab {
  position:fixed; z-index:20; right:max(var(--gutter),env(safe-area-inset-right)); bottom:max(24px,env(safe-area-inset-bottom));
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  max-width:calc(100% - var(--gutter) * 2); min-height:56px;
  padding:12px 20px; border:1px solid var(--border); border-radius:var(--r-card);
  background:var(--bg); color:var(--text); box-shadow:var(--shadow-card); text-decoration:none;
  font-size:14px; font-weight:var(--weight-bold); line-height:1.4;
}
.dl-fab svg { width:22px; height:22px; flex-shrink:0 }
.article-download { margin-block:48px; padding:32px; border-radius:var(--r-canvas); background:var(--bg-panel); color:var(--text) }
.article-download h2 { margin-top:0 }
.article-download p { color:var(--text-muted) }
.setting-row { display:flex; justify-content:space-between; align-items:center; gap:16px; padding-block:12px; font-size:14px }
.switch-display { display:inline-block; width:38px; height:22px; padding:3px; border-radius:var(--r-pill); background:var(--ink-soft); color:var(--on-dark); flex-shrink:0 }
.switch-display::after { content:""; display:block; width:16px; height:16px; margin-left:16px; border-radius:var(--r-pill); background:var(--bg); color:var(--text) }
.palette { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:16px }
.swatch { border:1px solid var(--border); border-radius:var(--r-card); overflow:hidden; background:var(--bg); color:var(--text) }
.swatch-sample { display:block; height:80px; border-bottom:1px solid var(--border) }
.swatch code { display:block; padding:12px; color:var(--text) }
.sw-bg { background:var(--bg); color:var(--text) }
.sw-panel { background:var(--bg-panel); color:var(--text) }
.sw-dark { background:var(--bg-panel-2); color:var(--on-dark) }
.sw-border { background:var(--border); color:var(--text) }
.sw-accent { background:var(--accent); color:var(--text) }
.sw-accent-dark { background:var(--accent-dark); color:var(--on-dark) }
.sw-text { background:var(--text); color:var(--on-dark) }
.sw-muted { background:var(--text-muted); color:var(--on-dark) }
.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-on-dark { background:var(--on-dark); color:var(--text) }
.sw-on-muted { background:var(--on-dark-muted); color:var(--text) }
.sw-deep { background:var(--ink-deep); color:var(--on-dark) }
.sw-soft { background:var(--ink-soft); color:var(--on-dark) }
.sw-lamp { background:var(--lamp); color:var(--text) }
.sw-dark-line { background:var(--bg-panel-2); color:var(--on-dark); box-shadow:inset 0 0 0 20px var(--on-dark-line) }
.sw-dark-strong { background:var(--bg-panel-2); color:var(--on-dark); box-shadow:inset 0 0 0 20px var(--on-dark-line-strong) }
.sw-dark-fill { background:var(--bg-panel-2); color:var(--on-dark); box-shadow:inset 0 0 0 20px var(--on-dark-fill) }
.sw-veil { background:var(--veil); color:var(--on-dark) }
.sw-clear { background:var(--clear); color:var(--text) }
.preview-dark { background:var(--bg-panel-2); color:var(--on-dark); border-radius:var(--r-canvas); padding:32px }
.preview-h1 { font-family:var(--font-display); font-weight:var(--weight-title); font-size:var(--size-h1); line-height:1.16 }
@media (max-width:640px) {
  .term-card,.client-card,.post-card,.article-download { padding:24px }
  .toc { position:static }
  [role="tablist"] { gap:6px }
  [role="tab"] { padding-inline:14px }
  .callout { padding:20px }
  .preview-h1 { font-size:30px }
  .dl-fab { bottom:16px; min-height:48px; padding:10px 16px }
}