.tabs { min-width: 0; }
[role="tablist"] { display: flex; gap: 8px; max-width: 100%; overflow-x: auto; padding: 4px; }
[role="tab"] {
  position: relative;
  flex-shrink: 0;
  min-height: 48px;
  padding: 12px 20px;
  border: 0;
  border-radius: var(--r-detail);
  background: var(--clear);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-align: left;
}
[role="tab"]:hover, [role="tab"][aria-selected="true"] { color: var(--text); }
[role="tab"][aria-selected="true"]::after { content: ""; position: absolute; inset: auto 16px 0; height: 2px; background: var(--accent); color: var(--bg); }
[role="tabpanel"] { min-width: 0; scroll-margin-top: 24px; }
.config-index { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; align-items: start; }
.config-index > * { min-width: 0; }
.config-index [role="tablist"] { flex-direction: column; gap: 8px; }
.config-index [role="tab"] { width: 100%; padding-inline: 24px; }
.config-index [role="tab"][aria-selected="true"]::after { inset: 12px auto 12px 0; width: 2px; height: auto; }
.config-detail { padding: 40px; border: 1px solid var(--border); border-radius: var(--r-panel); background: var(--bg-panel); color: var(--text); box-shadow: var(--panel-shadow); }
.config-detail p { color: var(--text-muted); line-height: 1.9; }
.metal-key {
  display: block; width: 48px; height: 48px; margin-bottom: 32px;
  border: 1px solid var(--edge); border-radius: var(--r-detail);
  background: linear-gradient(145deg, var(--metal-hi), var(--metal-lo)); color: var(--text);
  box-shadow: inset 2px 2px 0 var(--hairline-hi), inset -3px -3px 0 var(--bg-deep), 0 14px 24px -12px var(--drop);
}
.toc {
  display: flex; flex-wrap: wrap; gap: 8px 20px; min-width: 0;
  padding: 20px 24px; margin-block: 32px;
  border: 1px solid var(--border); border-radius: var(--r-card);
  background: var(--bg); color: var(--text-muted);
}
.toc a { display: block; min-height: 44px; padding-block: 10px; font-size: var(--text-nav); }
.toc a:hover, .toc a[aria-current] { color: var(--text); }
.toc--sticky { position: sticky; top: 16px; z-index: 10; }
.faq-item { border-bottom: 1px solid var(--border); padding-block: 8px; }
.faq-item summary { position: relative; list-style: none; padding: 20px 40px 20px 0; cursor: pointer; color: var(--text); font-size: var(--text-lg); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 4px; top: 20px; color: var(--text-muted); }
.faq-item[open] summary::after { content: "−"; }
.faq-item .faq-answer { padding-bottom: 20px; color: var(--text-muted); }
.faq-answer > :last-child { margin-bottom: 0; }
.term-card { padding: 28px; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--bg-panel); color: var(--text); }
.term-card h3 { margin: 12px 0; }
.term-card p { color: var(--text-muted); }
.term-en { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); overflow-wrap: anywhere; }
.tag, .client-badge {
  display: inline-block; max-width: 100%; padding: 4px 10px;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--bg-panel); color: var(--text-muted); font-size: var(--text-xs);
  overflow-wrap: anywhere; vertical-align: middle;
}
.client-badge--first, .client-badge--recommended { border-color: var(--accent-border); color: var(--accent); }
.client-badge--retired { border-color: var(--border-strong); color: var(--text-muted); }
.tag--success { color: var(--success); }
.tag--warning { color: var(--warn); }
.tag--error { color: var(--error); }
.client-card { min-width: 0; padding: 32px; border: 1px solid var(--border); border-radius: var(--r-panel); background: var(--bg-panel); color: var(--text); box-shadow: var(--panel-shadow); }
.client-card--first { border-color: var(--accent-border); }
.client-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 20px; }
.client-card__head h3 { margin: 0; }
.client-card__version { font-family: var(--font-mono); color: var(--text-muted); font-size: var(--text-sm); }
.client-card__version:empty { display: none; }
.client-card__description { color: var(--text-muted); }
.client-card__links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.client-card__minor { margin-top: 16px; font-size: var(--text-sm); color: var(--text-muted); }
.client-card__minor a { text-decoration: underline; text-underline-offset: 4px; }
.article-card { display: flex; flex-direction: column; min-width: 0; padding: 32px; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--bg-panel); color: var(--text); box-shadow: var(--panel-shadow); transition: border-color var(--speed); }
.article-card:hover { border-color: var(--border-strong); }
.article-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--text-muted); font-size: var(--text-xs); }
.article-card h3 { margin-block: 24px 16px; font-size: var(--text-h3); }
.article-card p { color: var(--text-muted); }
.article-card__link { margin-top: auto; padding-top: 16px; font-size: var(--text-nav); }
.callout { margin: 32px 0; padding: 24px 28px; border: 1px solid var(--border); border-left: 2px solid var(--accent); border-radius: var(--r-card); background: var(--bg-panel); color: var(--text); }
.callout p:last-child { margin-bottom: 0; }
.callout__label { display: block; margin-bottom: 8px; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--accent); }
.callout--warning { border-left-color: var(--warn); }
.callout--warning .callout__label { color: var(--warn); }
.table-scroll { min-width: 0; max-width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-card); -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; border-collapse: collapse; color: var(--text); font-size: var(--text-nav); }
.data-table th, .data-table td, .prose table th, .prose table td, .article-body table th, .article-body table td {
  min-width: 7em; padding: 18px 22px; border-bottom: 1px solid var(--border);
  text-align: left; 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: var(--weight-medium); }
.data-table td, .prose table td, .article-body table td { 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; }
.data-table code, .prose table code, .article-body table code { overflow-wrap: anywhere; }
.dl-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 30;
  display: flex; align-items: center; gap: 12px; max-width: calc(100% - 32px);
  min-height: 56px; padding: 12px 22px; border: 1px solid var(--accent-border); border-radius: var(--r-pill);
  background: var(--bg-panel); color: var(--text); font-size: var(--text-nav);
  box-shadow: 0 10px 34px -8px var(--accent-glow), var(--panel-shadow);
}
.dl-fab svg { width: 20px; height: 20px; color: var(--accent); }
.dl-fab:hover { border-color: var(--accent); }
.article-download { margin-top: 64px; padding: 32px; border: 1px solid var(--border); border-radius: var(--r-panel); background: var(--bg-panel); color: var(--text); }
.article-download h2 { font-size: var(--text-h3); margin-top: 0; }
.article-download p { color: var(--text-muted); }
.platform-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; max-width: 760px; margin-inline: auto; }
.platform-entry { display: flex; flex-direction: column; align-items: center; min-width: 0; gap: 14px; text-align: center; }
.platform-key { display: grid; place-items: center; width: 96px; height: 96px; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--bg); color: var(--text-muted); transition: border-color var(--speed), box-shadow var(--speed); }
.platform-key svg { width: 30px; height: 30px; }
.platform-entry:hover .platform-key, .platform-entry[aria-current] .platform-key { border-color: var(--accent); box-shadow: 0 16px 30px -20px var(--accent-glow); }
.platform-entry small { font-size: var(--text-xs); color: var(--text-muted); }
.section-tail { display: block; width: fit-content; max-width: 100%; margin: 36px auto 0; color: var(--text-muted); font-size: var(--text-nav); }
.section-tail:hover { color: var(--text); }
.quick-stair { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-bottom: 64px; isolation: isolate; }
.quick-stair::before { content: ""; position: absolute; inset: 45% 10% auto; z-index: -1; border-top: 1px dashed var(--border-strong); }
.quick-stair .panel:nth-child(2) { transform: translateY(32px); }
.quick-stair .panel:nth-child(3) { transform: translateY(64px); }
.step-label { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
.preview-gallery { padding-top: 100px; padding-bottom: 100px; }
.preview-gallery h2 { margin-top: 0; }
.preview-gallery + .preview-gallery { border-top: 1px solid var(--border); }
.sample-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-block: 24px; }
.swatch-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.swatch { min-width: 0; margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); }
.swatch i { display: block; height: 64px; margin-bottom: 10px; border: 1px solid var(--border-strong); border-radius: var(--r-detail); color: var(--text); }
.swatch figcaption { overflow-wrap: anywhere; color: var(--text-muted); }
.sw-bg { background: var(--bg); }
.sw-panel { background: var(--bg-panel); }
.sw-panel2 { background: var(--bg-panel-2); }
.sw-deep { background: var(--bg-deep); }
.sw-border { background: var(--border); }
.sw-border-strong { background: var(--border-strong); }
.sw-accent { background: var(--accent); }
.sw-accent-dark { background: var(--accent-dark); }
.sw-text { background: var(--text); }
.sw-muted { background: var(--text-muted); }
.sw-faint { background: var(--text-faint); }
.sw-white { background: var(--on-accent); }
.sw-success { background: var(--success); }
.sw-warn { background: var(--warn); }
.sw-error { background: var(--error); }
.sw-title-hi { background: var(--title-hi); }
.sw-title-lo { background: var(--title-lo); }
.sw-badge-from { background: var(--badge-from); }
.sw-badge-to { background: var(--badge-to); }
.sw-metal-hi { background: var(--metal-hi); }
.sw-metal-lo { background: var(--metal-lo); }
.sw-edge { background: var(--edge); }
.sw-edge-dim { background: var(--edge-dim); }
.sw-engrave { background: var(--engrave); }
.sw-hole { background: var(--hole); }
.sw-groove { background: var(--groove); }
.sw-shade { background: var(--shade); }
.sw-sheen { background: var(--sheen); }
.sw-brush { background: var(--brush); }
.sw-hole-rim { background: var(--hole-rim); }
.sw-engrave-lip { background: var(--engrave-lip); }
.sw-shoulder { background: var(--shoulder); }
.sw-shoulder-hot { background: var(--shoulder-hot); }
.sw-beam1 { background: var(--beam-1); }
.sw-beam2 { background: var(--beam-2); }
.sw-spot { background: var(--spot); }
.sw-floor { background: var(--floor); }
.sw-shadow { background: var(--shadow-core); }
.sw-drop { background: var(--drop); }
.sw-accent-border { background: var(--accent-border); }
.sw-accent-haze { background: var(--accent-haze); }
.sw-accent-glow { background: var(--accent-glow); }
.sw-accent-hot { background: var(--accent-glow-hot); }
.sw-accent-line { background: var(--accent-line); }
.sw-glass-hi { background: var(--glass-hi); }
.sw-glass-lo { background: var(--glass-lo); }
.sw-hairline { background: var(--hairline-hi); }
.sw-chip { background: var(--chip-bg); }
.sw-code-str { background: var(--code-str); }
.sw-code-punc { background: var(--code-punc); }
.sw-code-ln { background: var(--code-ln); }
.sw-clear { background: var(--clear); }
.preview-static .rig, .preview-static .pulse { animation: none; }
.preview-static .pulse { opacity: 1; transform: translateX(320px); }
@media (max-width: 768px) {
  .config-index { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .config-index [role="tablist"] { flex-direction: row; }
  .config-index [role="tab"] { width: auto; }
  .config-index [role="tab"][aria-selected="true"]::after { inset: auto 16px 0; width: auto; height: 2px; }
  .config-detail { padding: 24px; }
  .platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .quick-stair { grid-template-columns: minmax(0, 1fr); padding-bottom: 0; }
  .quick-stair .panel:nth-child(n) { transform: none; }
  .quick-stair::before { inset: 10% auto 10% 50%; border-top: 0; border-left: 1px dashed var(--border-strong); }
  .swatch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .dl-fab { right: 16px; bottom: 16px; }
  .client-card, .article-card, .term-card, .article-download { padding: 24px; }
  .toc { padding-inline: 18px; }
  .preview-gallery { padding-top: 64px; padding-bottom: 64px; }
}
 /*