.matrix { position: relative; margin: 0; animation: matrix-rise var(--duration-device) var(--ease-out) both; }
.matrix::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  right: -8px;
  bottom: -8px;
  background: var(--bg-panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-contact);
}
.matrix__sheet { position: relative; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; }
.matrix__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding-inline: 24px; }
.matrix__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin: 0; font-size: var(--text-caption); font-weight: var(--weight-medium); color: var(--text); }
.matrix__sub { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-regular); color: var(--text-muted); }
.matrix__legend { display: flex; gap: 16px; margin: 0; font-size: var(--text-xs); color: var(--text-muted); flex-shrink: 0; }
.legend-i { display: inline-flex; align-items: center; gap: 6px; }
.legend-i .yes { color: var(--coral); }
.matrix__scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.matrix__table { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.matrix__table col.c-label { width: 186px; }
.matrix__table th, .matrix__table td { height: 60px; padding: 0 16px; text-align: center; vertical-align: middle; border-top: 1px solid var(--border); font-size: var(--text-nav); color: var(--text); word-break: normal; overflow-wrap: normal; }
.matrix__table thead th { background: var(--bg-panel); color: var(--text); font-weight: var(--weight-medium); }
.matrix__table thead th.c-label { text-align: left; padding-left: 24px; font-size: var(--text-xs); letter-spacing: 0.06em; color: var(--text-muted); }
.matrix__table thead th.is-hi { background: var(--accent); border-top-color: var(--accent); color: var(--on-dark); }
.matrix__table tbody th { text-align: left; padding-left: 24px; font-weight: var(--weight-regular); }
.matrix__table tbody tr:nth-child(even) > * { background: var(--bg-panel); color: var(--text); }
.matrix__table tbody tr td.is-hi { background: var(--bg-panel-2); color: var(--text); }
.yes { width: 20px; height: 20px; display: inline-block; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--text); }
.matrix__table td.is-hi .yes { color: var(--coral); }
.no { display: inline-block; width: 16px; height: 2px; border-radius: var(--r-xs); background: var(--line-strong); color: var(--text-muted); vertical-align: middle; }
.core { font-family: var(--font-mono); font-size: var(--text-code-small); letter-spacing: -0.01em; color: var(--text); }
.matrix__more { position: absolute; right: 28px; bottom: -20px; z-index: 2; display: inline-flex; align-items: center; min-height: 40px; padding: 8px 18px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-pill); box-shadow: var(--shadow-pill); font-size: var(--text-caption); font-weight: var(--weight-medium); color: var(--accent); }
.matrix__more:hover { background: var(--bg-panel-2); color: var(--accent); text-decoration: none; }
@keyframes matrix-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

.dl-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px; background: var(--bg-panel); color: var(--text); border-radius: var(--r-xl); }
.dl-tile { display: flex; min-width: 0; flex-direction: column; gap: 12px; min-height: 228px; padding: 28px 24px 24px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-lg); }
.dl-tile > svg { width: 28px; height: 28px; color: var(--text); display: block; }
.dl-tile h3 { margin: 8px 0 0; font-size: var(--text-lg); letter-spacing: -0.01em; }
.dl-tile__client { margin: 0; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--accent); }
.dl-tile__desc { margin: 0; font-size: var(--text-caption); line-height: 1.65; color: var(--text-muted); }
.dl-tile__go { margin-top: auto; font-size: var(--text-caption); font-weight: var(--weight-medium); color: var(--accent); }

.tabs { min-width: 0; }
[role="tablist"] { display: flex; align-items: center; gap: 8px; max-width: 100%; overflow-x: auto; padding: 6px 4px; scrollbar-width: thin; }
[role="tab"] {
  flex: 0 0 auto;
  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: var(--text-caption);
  text-align: left;
}
[role="tab"]:hover { color: var(--accent); border-color: var(--accent); }
[role="tab"][aria-selected="true"] { background: var(--accent); color: var(--on-dark); border-color: var(--accent); }
[role="tabpanel"] { min-width: 0; padding-top: 28px; }
.spec-tabs { display: grid; grid-template-columns: 32% minmax(0, 1fr); background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; }
.spec-tabs > [role="tablist"] { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; border-right: 1px solid var(--border); }
.spec-tabs [role="tab"] { position: relative; width: 100%; min-height: 72px; padding: 20px 28px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: var(--bg); color: var(--text); font-size: var(--text-body); }
.spec-tabs [role="tab"]:nth-child(even) { background: var(--bg-panel); color: var(--text); }
.spec-tabs [role="tab"][aria-selected="true"] { background: var(--bg-panel-2); color: var(--accent); }
.spec-tabs [role="tab"][aria-selected="true"]::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent); color: var(--on-dark); }
.spec-tabs [role="tab"]:focus-visible { outline-offset: -5px; }
.spec-tabs > [role="tabpanel"] { display: flex; flex-direction: column; padding: 40px; }
.spec-tabs [role="tabpanel"] h3 { margin: 12px 0 20px; }
.spec-tabs__snippet { margin: 0 0 20px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-panel); color: var(--text); font-family: var(--font-mono); font-size: var(--text-sm); }
.spec-tabs__clients { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 24px; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chip, .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--bg);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
}
.badge--first, .badge--recommended, .chip--active { border-color: var(--accent); background: var(--bg-panel-2); color: var(--accent); }
.badge--retired, .chip--inactive { background: var(--bg-panel); color: var(--text-muted); border-color: var(--border); }
.badge--status::before { content: ""; width: 6px; height: 6px; flex-shrink: 0; border-radius: var(--r-circle); background: var(--success); color: var(--bg); }

.toc { position: sticky; top: 0; z-index: 10; display: flex; gap: 8px; max-width: 100%; padding: 12px; overflow-x: auto; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-pill); }
.toc a { flex-shrink: 0; display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: var(--r-pill); color: var(--text-muted); font-size: var(--text-caption); }
.toc a:hover, .toc a[aria-current] { background: var(--bg-panel-2); color: var(--accent); text-decoration: none; }
.toc--static { position: static; }
.faq { border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--bg); color: var(--text); overflow: hidden; }
.faq__item + .faq__item { border-top: 1px solid var(--border); }
.faq__item summary { position: relative; min-height: 64px; padding: 20px 56px 20px 24px; list-style: none; cursor: pointer; font-weight: var(--weight-medium); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; position: absolute; top: 18px; right: 24px; color: var(--accent); font-size: var(--text-xl); }
.faq__item[open] summary::after { content: "−"; }
.faq__item[open] summary { background: var(--bg-panel); color: var(--text); }
.faq__answer { padding: 20px 24px 24px; color: var(--text-muted); }
.faq__answer > :last-child { margin-bottom: 0; }

.term-card { min-width: 0; padding: 28px; background: var(--bg-panel); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-lg); }
.term-card h3 { margin: 12px 0 16px; }
.term-card p { margin-bottom: 0; color: var(--text-muted); }
.client-card { min-width: 0; padding: 32px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-xl); }
.client-card--featured { border-color: var(--accent); }
.client-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 24px; }
.client-card__head > div { min-width: 0; }
.client-card__head h3 { margin: 0 0 6px; }
.client-card__logo { width: 56px; height: 56px; flex-shrink: 0; }
.client-card__meta { margin: 0; color: var(--text-muted); font-size: var(--text-caption); }
.client-card__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.client-card__secondary { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; font-size: var(--text-caption); }

.article-card { display: flex; flex-direction: column; min-width: 0; padding: 28px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg); color: var(--text); }
.article-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: var(--text-xs); color: var(--text-muted); }
.article-card h3 { margin: 20px 0 16px; font-size: var(--text-xl); line-height: 1.45; }
.article-card h3 a { color: var(--text); }
.article-card p { color: var(--text-muted); font-size: var(--text-caption); }
.article-card__more { margin-top: auto; padding-top: 16px; font-size: var(--text-caption); color: var(--accent); }
.callout { margin: 28px 0; padding: 24px 28px; background: var(--bg-panel-2); color: var(--text); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--r-lg); }
.callout__title { margin: 0 0 10px; font-size: var(--text-body); font-weight: var(--weight-medium); color: var(--accent); }
.callout > :last-child { margin-bottom: 0; }
.callout--neutral { background: var(--bg-panel); color: var(--text); border-left-color: var(--line-strong); }
.download-guide { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; padding: 32px; background: var(--bg-panel); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-xl); }
.download-guide__copy { min-width: 0; flex: 1 1 240px; }
.download-guide h2 { margin: 0 0 12px; font-size: var(--text-xl); }
.download-guide p { margin: 0; color: var(--text-muted); }
.dl-fab { position: fixed; right: 24px; bottom: 24px; z-index: 30; display: inline-flex; align-items: center; gap: 12px; max-width: calc(100% - 32px); min-height: 56px; padding: 12px 22px; border: 1px solid var(--accent); border-radius: var(--r-pill); background: var(--accent); color: var(--on-dark); box-shadow: var(--shadow-contact); font-size: var(--text-caption); }
.dl-fab svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dl-fab:hover { background: var(--accent-dark); color: var(--on-dark); text-decoration: none; }

.table-scroll { min-width: 0; max-width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; border-collapse: collapse; text-align: left; 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);
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.data-table th, .prose table th { background: var(--accent); color: var(--on-dark); font-weight: var(--weight-medium); }
.data-table tbody tr:nth-child(even), .prose table tbody tr:nth-child(even) { background: var(--bg-panel); color: var(--text); }
.data-table tr:last-child td, .data-table tr:last-child th { border-bottom: 0; }
.prose table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  min-width: 0;
  border-collapse: collapse;
  background: var(--bg);
  color: var(--text);
}
.prose table code, .data-table code { overflow-wrap: anywhere; white-space: normal; }

.palette-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.swatch { min-width: 0; padding: 16px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg); color: var(--text); }
.swatch__paint { height: 64px; margin-bottom: 12px; border: 1px solid var(--border); border-radius: var(--r-sm); }
.swatch code { font-size: var(--text-xs); }
.swatch--bg .swatch__paint { background: var(--bg); color: var(--text); }
.swatch--panel .swatch__paint { background: var(--bg-panel); color: var(--text); }
.swatch--panel2 .swatch__paint { background: var(--bg-panel-2); color: var(--text); }
.swatch--border .swatch__paint { background: var(--border); color: var(--text); }
.swatch--line .swatch__paint { background: var(--line-strong); color: var(--text); }
.swatch--accent .swatch__paint { background: var(--accent); color: var(--on-dark); }
.swatch--dark .swatch__paint { background: var(--accent-dark); color: var(--on-dark); }
.swatch--coral .swatch__paint { background: var(--coral); color: var(--accent-dark); }
.swatch--text .swatch__paint { background: var(--text); color: var(--on-dark); }
.swatch--muted .swatch__paint { background: var(--text-muted); color: var(--on-dark); }
.swatch--success .swatch__paint { background: var(--success); color: var(--on-dark); }
.swatch--warn .swatch__paint { background: var(--warn); color: var(--text); }
.swatch--error .swatch__paint { background: var(--error); color: var(--on-dark); }
.swatch--white .swatch__paint { background: var(--on-dark); color: var(--text); }
.swatch--white-muted .swatch__paint { background: var(--on-dark-muted); color: var(--text); }
.swatch--white-faint .swatch__paint { background: var(--on-dark-faint); color: var(--text); }
.swatch--white-line .swatch__paint { background: var(--on-dark-line); color: var(--text); }
.swatch--white-wash .swatch__paint { background: var(--on-dark-wash); color: var(--text); }
.swatch--veil .swatch__paint { background: var(--veil); color: var(--on-dark); }
.swatch--clear .swatch__paint { background: var(--clear); color: var(--text); }
.preview-section { padding-top: 56px; padding-bottom: 56px; }
.preview-section > h2 { margin-top: 0; }
.preview-stack > * + * { margin-top: 24px; }
.preview-dark { padding: 28px; background: var(--accent-dark); color: var(--on-dark); border-radius: var(--r-xl); }
.preview-dark .cta { margin-bottom: 0; }

@media (max-width: 1180px) {
  .dl-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .spec-tabs { grid-template-columns: minmax(0, 1fr); }
  .spec-tabs > [role="tablist"] { flex-direction: row; align-items: center; gap: 8px; padding: 12px; border-right: 0; border-bottom: 1px solid var(--border); }
  .spec-tabs [role="tab"] { width: auto; min-height: 44px; padding: 10px 18px; border: 1px solid var(--border); border-radius: var(--r-pill); font-size: var(--text-caption); }
  .spec-tabs [role="tab"][aria-selected="true"] { border-color: var(--accent); }
  .spec-tabs [role="tab"][aria-selected="true"]::before { display: none; }
  .spec-tabs > [role="tabpanel"] { padding: 24px; }
  .palette-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .matrix::before { top: 6px; left: 6px; right: -6px; bottom: -6px; }
  .matrix__bar { padding-inline: 16px; gap: 10px; }
  .matrix__sub { display: none; }
  .matrix__legend { gap: 10px; }
  .matrix__more { right: 16px; font-size: var(--text-sm); }
  .matrix__table col.c-label { width: 160px; }
  .dl-board { grid-template-columns: minmax(0, 1fr); }
  .client-card, .download-guide { padding: 24px; }
  .dl-fab { right: 16px; bottom: 16px; padding: 10px 18px; min-height: 48px; }
  .callout { padding: 20px; }
  .toc { border-radius: var(--r-lg); }
}