* {
  box-sizing: border-box;
}
:root {
  color-scheme: light dark;
  --page: #fdfcf8;
  --surface: #f0eee6;
  --raised: #fff;
  --ink: #000;
  --muted: #333;
  --rule: #d8d5cc;
  --accent: #45658d;
  --warning: #9f1239;
  --focus: #175cd3;
  --content: 72ch;
  --dashboard: min(96vw, 90rem);
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #1c1a17;
    --surface: #2a2723;
    --raised: #211f1b;
    --ink: #e8e4dc;
    --muted: #c9c3b9;
    --rule: #555;
    --accent: #8ab4f8;
    --warning: #fb7185;
    --focus: #8ab4f8;
  }
}
html {
  background: var(--page);
  color: var(--ink);
  font: 100%/1.55 system-ui, sans-serif;
}
body {
  margin: 0;
}
a {
  color: var(--accent);
  text-underline-offset: .18em;
}
a:visited {
  color: color-mix(in srgb, var(--accent) 70%, var(--warning));
}
a:focus-visible,
button:focus-visible,
select:focus-visible,
textarea:focus-visible,
input:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
.skip {
  position: absolute;
  left: .75rem;
  top: -5rem;
  background: var(--ink);
  color: var(--page);
  padding: .6rem;
  z-index: 5;
}
.skip:focus {
  top: .75rem;
}
.masthead {
  max-width: var(--dashboard);
  margin: 0 auto;
  padding: 1.2rem clamp(1rem, 3vw, 2rem);
  display: flex;
  align-items: baseline;
  gap: .9rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--rule);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .78rem;
}
.masthead .brand {
  margin-right: auto;
  font-family: Georgia, serif;
  font-size: 1.35rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  text-decoration: none;
}
.masthead strong {
  font-family: ui-monospace, monospace;
}
main {
  margin: 0 auto;
  padding: 2rem clamp(1rem, 3vw, 2rem) 5rem;
}
.dashboard {
  max-width: var(--dashboard);
}
.narrative {
  max-width: var(--content);
}
.playground-section {
  max-width: var(--dashboard);
  margin: 2rem 0;
}
h1,
h2,
h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  line-height: 1.15;
}
h1 {
  font-size: clamp(2rem, 6vw, 4rem);
  margin: .2em 0;
}
h2 {
  font-size: clamp(1.4rem, 3vw, 2rem);
  border-bottom: 1px solid var(--rule);
  padding-bottom: .35rem;
  margin-top: 2.4rem;
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .78rem;
  margin: 0;
}
.notice {
  border-left: 5px solid var(--warning);
  background: var(--surface);
  padding: 1rem;
}
.button-link,
button {
  display: inline-block;
  border: 1px solid var(--ink);
  border-radius: 3px;
  padding: .6rem .85rem;
  background: var(--ink);
  color: var(--page);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
.button-link:visited {
  color: var(--page);
}
button[type="button"] {
  background: transparent;
  color: var(--ink);
}
button:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.metrics div {
  background: var(--raised);
  padding: 1rem;
  min-width: 0;
}
.metrics dt {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .72rem;
}
.metrics dd {
  margin: .3rem 0 0;
  font: 1.3rem ui-monospace, monospace;
  overflow-wrap: anywhere;
}
.evidence-facts {
  display: grid;
  gap: 1px;
  padding: 1px;
  background: var(--rule);
}
.evidence-facts div {
  display: grid;
  grid-template-columns: minmax(9rem, 1fr) minmax(0, 3fr);
  gap: 1rem;
  padding: 1rem;
  background: var(--raised);
}
.evidence-facts dt {
  font-weight: 700;
}
.evidence-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 36rem) {
  .evidence-facts div {
    grid-template-columns: 1fr;
  }
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
  flex-wrap: wrap;
}
.section-heading h2 {
  margin-bottom: 0;
}
.filters label,
form label {
  display: grid;
  gap: .35rem;
  font-weight: 650;
}
select,
input,
textarea {
  background: var(--raised);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: .55rem;
  font: inherit;
}
textarea {
  width: 100%;
  font-family: ui-monospace, monospace;
  font-size: .85rem;
  resize: vertical;
}
.demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1rem;
}
.demo-grid label {
  display: grid;
  gap: .35rem;
  font-weight: 650;
}
.demo-output {
  max-height: 32rem;
  overflow: auto;
  padding: 1rem;
  border: 1px solid var(--rule);
  background: var(--raised);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
fieldset {
  border: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
  padding: 1rem;
}
legend {
  font-family: Georgia, serif;
  padding: 0 .4rem;
}
.hint {
  color: var(--muted);
  font-size: .9rem;
}
.actions {
  display: flex;
  gap: .7rem;
  flex-wrap: wrap;
}
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--rule);
}
table {
  border-collapse: collapse;
  width: 100%;
  min-width: 58rem;
  font-variant-numeric: tabular-nums;
}
caption {
  text-align: left;
  padding: .75rem;
  color: var(--muted);
}
th,
td {
  padding: .7rem;
  border-top: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}
th {
  background: var(--surface);
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.status {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.status::before {
  content: "";
  width: .65rem;
  height: .65rem;
  border: 2px solid currentColor;
}
.panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1rem;
}
.panel {
  border: 1px solid var(--rule);
  padding: 1rem;
  background: var(--raised);
}
.panel h3 {
  margin-top: 0;
  font-size: 1.05rem;
}
.panel ul {
  padding-left: 1.2rem;
  margin-bottom: 0;
}
.panel li + li {
  margin-top: 0.35rem;
}

.status.pilot::before {
  transform: rotate(45deg);
}
.trajectory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 1rem;
}
.trajectory {
  border: 1px solid var(--rule);
  padding: 1rem;
  background: var(--raised);
  overflow: auto;
}
.trajectory ol {
  display: flex;
  align-items: end;
  gap: 2px;
  min-height: 8rem;
  padding: 0;
  margin: 1rem 0 0;
  list-style: none;
  border-bottom: 1px solid var(--rule);
}
.trajectory li {
  flex: 1 0 4px;
  min-width: 4px;
  background: var(--accent);
  height: var(--bar);
  position: relative;
}
.trajectory li:first-child {
  background: var(--warning);
}
.trajectory li span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
details {
  border: 1px solid var(--rule);
  background: var(--raised);
  margin: .7rem 0;
}
summary {
  padding: .8rem;
  cursor: pointer;
  font-weight: 650;
  overflow-wrap: anywhere;
}
.run-detail {
  padding: 0 .8rem .8rem;
}
.run-detail dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: .35rem .8rem;
}
.run-detail dt {
  color: var(--muted);
}
.run-detail dd {
  margin: 0;
  overflow-wrap: anywhere;
}
pre {
  background: var(--surface);
  padding: .8rem;
  overflow: auto;
  font-size: .76rem;
}
.method {
  max-width: var(--content);
  background: var(--surface);
  padding: .3rem 1.2rem 1rem;
  margin-top: 2rem;
}
.phase-list {
  padding-left: 1.4rem;
}
.sr-status {
  min-height: 1.5em;
}
.hosted-runner {
  max-width: min(100%, 78rem);
}
.run-progress progress {
  display: block;
  width: min(100%, 36rem);
  min-height: 1rem;
  margin: .4rem 0 1rem;
  accent-color: var(--accent);
}
#live-results > h2 {
  scroll-margin-top: 1rem;
}
#result-content > section {
  margin-block: 2rem;
}
.result-facts {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) minmax(0, 3fr);
  gap: 1px;
  padding: 1px;
  background: var(--rule);
}
.result-facts dt,
.result-facts dd {
  padding: .75rem;
  background: var(--raised);
  overflow-wrap: anywhere;
}
.result-facts dt {
  font-weight: 700;
}
.result-facts dd {
  margin: 0;
}
.hosted-runner table {
  min-width: 42rem;
}
@media (max-width: 36rem) {
  .result-facts {
    grid-template-columns: 1fr;
  }
  .result-facts dd {
    padding-top: 0;
  }
}
@media (max-width: 45rem) {
  .masthead .brand {
    width: 100%;
  }
  .run-detail dl {
    grid-template-columns: 1fr;
  }
}
.catalog-hero,
.catalog-list,
.catalog-filters,
.domain-totals {
  max-width: var(--dashboard);
}
.catalog-metrics {
  max-width: var(--dashboard);
}
.domain-counts {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1rem 0;
}
.domain-counts div,
.catalog-badges span {
  border: 1px solid var(--rule);
  background: var(--surface);
  padding: .25rem .5rem;
}
.domain-counts div {
  display: flex;
  gap: .45rem;
}
.domain-counts dt {
  font-weight: 650;
}
.domain-counts dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.catalog-filters fieldset {
  display: block;
}
.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
.catalog-filters a {
  margin-left: 1rem;
}
.catalog-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 29rem), 1fr));
  gap: 1rem;
}
.catalog-card {
  border-top: 4px solid var(--accent);
  background: var(--raised);
  padding: 1rem;
  container-type: inline-size;
}
.catalog-card h3 {
  font-size: 1.45rem;
  margin: 0;
}
.catalog-card code {
  display: block;
  margin-top: .5rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.catalog-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: .65rem 0;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.catalog-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1rem;
  padding: 0 1rem 1rem;
}
.catalog-detail-grid section {
  min-width: 0;
}
.catalog-detail-grid h4 {
  margin-bottom: .4rem;
}
.compact-definitions {
  margin: 0;
}
.compact-definitions div {
  display: grid;
  grid-template-columns: minmax(7rem, 1fr) minmax(0, 2fr);
  gap: .6rem;
  padding: .3rem 0;
  border-bottom: 1px solid var(--rule);
}
.compact-definitions dt {
  font-weight: 650;
}
.compact-definitions dd {
  margin: 0;
  overflow-wrap: anywhere;
}
@container (max-width: 25rem) {
  .compact-definitions div {
    grid-template-columns: 1fr;
    gap: 0;
  }
}
.proposal-inventory {
  margin-top: 2.5rem;
  padding: clamp(1rem, 3vw, 2rem);
  border: 2px solid var(--ink);
  background: var(--surface);
}
.proposal-inventory h2 {
  margin-top: .4rem;
}
.v2-inventory-metrics {
  margin-block: 1.5rem;
}
.v2-status-table th:first-child {
  min-width: 18rem;
  text-align: left;
}
.v2-status-table th span {
  font-weight: 400;
}
.v2-status-table td:last-child {
  min-width: 24rem;
}
.inspectability-panel {
  border: 1px solid var(--rule);
  background: var(--raised);
  padding: 1rem;
}
.inspectability-panel h3 {
  margin-top: 0;
  font-size: 1.45rem;
}
.inspectability-facts {
  display: grid;
  grid-template-columns: minmax(11rem, 1fr) minmax(0, 3fr);
  gap: 1px;
  padding: 1px;
  background: var(--rule);
}
.inspectability-facts dt,
.inspectability-facts dd {
  padding: .75rem;
  background: var(--raised);
  overflow-wrap: anywhere;
}
.inspectability-facts dt {
  font-weight: 700;
}
.inspectability-facts dd {
  margin: 0;
}
.inspectability-unavailable {
  border-left: 4px solid var(--warning);
  padding-left: .6rem;
}
@media (max-width: 40rem) {
  .inspectability-facts {
    grid-template-columns: 1fr;
  }
  .inspectability-facts dd {
    padding-top: 0;
  }
}
.raw-provenance {
  max-height: 32rem;
  overflow: auto;
  padding: 1rem;
  border: 1px solid var(--rule);
  background: var(--surface);
  font-size: .8rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
details > summary {
  cursor: pointer;
  font-weight: 650;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}
@media (forced-colors: active) {
  .notice {
    border: 2px solid CanvasText;
  }
  .trajectory li {
    background: CanvasText;
  }
}

/* Runnable demo routes (audio v2 proposals) */
.no-js-note {
  display: block;
}
html.js .no-js-note {
  display: none;
}
.js-only {
  display: none;
}
html.js .js-only {
  display: revert;
}
html.js .js-only[hidden] {
  display: none;
}
.demo-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: end;
}
.demo-controls label {
  display: grid;
  gap: 0.25rem;
  font-size: 0.9rem;
}
.demo-controls select,
.demo-controls button {
  font: inherit;
  padding: 0.4rem 0.6rem;
}
.demo-metrics {
  margin-block-start: 0.5rem;
}
.demo-oracle > li {
  margin-block-end: 1rem;
}
.demo-links li {
  margin-block-end: 0.35rem;
}

/* Interactive Homepage Benchmark Runner */
.runner-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}
.batch-progress-wrap {
  width: 100%;
  margin-top: 0.5rem;
}
.progress-bar-bg {
  width: 100%;
  height: 0.6rem;
  background: var(--rule);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}
.progress-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 0.2s ease;
}
.benchmark-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1.2rem;
  margin-top: 1rem;
}
.benchmark-card {
  border: 1px solid var(--rule);
  background: var(--raised);
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.category-badge {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  background: var(--surface);
  border: 1px solid var(--rule);
}
.card-status {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
}
.card-status.idle {
  background: var(--surface);
}
.card-status.running {
  background: var(--warning);
  color: #000;
}
.card-status.passed {
  background: #1b5e20;
  color: #fff;
}
.card-status.failed {
  background: #b71c1c;
  color: #fff;
}

.benchmark-card h3 {
  margin: 0.25rem 0 0.4rem;
  font-size: 1.1rem;
}
.card-desc {
  font-size: 0.88rem;
  margin-bottom: 0.8rem;
}
.card-metrics {
  font-size: 0.88rem;
  background: var(--surface);
  padding: 0.6rem;
  border: 1px solid var(--rule);
  margin-bottom: 1rem;
  font-family: ui-monospace, monospace;
}
.metric-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}
.metric-summary {
  font-weight: 700;
  margin-top: 0.25rem;
}
.card-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.btn-run-card {
  font: inherit;
  font-weight: 600;
  padding: 0.4rem 0.75rem;
  background: var(--ink);
  color: var(--page);
  border: 1px solid var(--rule);
  cursor: pointer;
}
.btn-link-card {
  font-size: 0.85rem;
  text-decoration: underline;
}

/* Interactive Playground UI Styles */
.playground-card {
  border: 1px solid var(--rule);
  background: var(--raised);
  padding: 1.2rem;
  margin-bottom: 1rem;
}
.pg-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.pg-cat-badge {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  background: var(--surface);
  border: 1px solid var(--rule);
}
.playground-status {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
}
.playground-status.idle {
  background: var(--surface);
}
.playground-status.running {
  background: var(--warning);
  color: #000;
}
.playground-status.passed {
  background: #1b5e20;
  color: #fff;
}
.playground-status.failed {
  background: #b71c1c;
  color: #fff;
}

.pg-desc,
.pg-expl {
  font-size: 0.9rem;
  margin: 0.3rem 0;
}
.playground-metrics {
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: 0.75rem;
  margin: 0.8rem 0;
  font-family: ui-monospace, monospace;
  font-size: 0.88rem;
}
.result-table {
  display: grid;
  gap: 0.25rem;
}
.result-header,
.result-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  padding: 0.25rem 0;
}
.result-header {
  font-weight: 700;
  border-bottom: 1px solid var(--rule);
}
.result-summary-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--rule);
  flex-wrap: wrap;
  gap: 0.5rem;
}
.badge-speedup {
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  font-size: 0.85rem;
}
.badge-speedup.wasm {
  background: #1b5e20;
  color: #fff;
}
.badge-speedup.js {
  background: #0277bd;
  color: #fff;
}
.badge-speedup.tie {
  background: var(--surface);
  border: 1px solid var(--rule);
}

.cold-ratio {
  font-size: 0.8rem;
  color: var(--muted);
}
.pg-card-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}
.btn-pg-run {
  font: inherit;
  font-weight: 600;
  padding: 0.45rem 0.85rem;
  background: var(--ink);
  color: var(--page);
  border: 1px solid var(--rule);
  cursor: pointer;
}
.btn-pg-link {
  font-size: 0.88rem;
  text-decoration: underline;
}
.controls-wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.commit-link {
  font-family: ui-monospace, monospace;
  font-size: 0.85rem;
  padding: 0.2rem 0.5rem;
  background: var(--surface);
  border: 1px solid var(--rule);
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-top: 1rem;
}
.nav-links a:not(.button-link) {
  font-weight: 600;
  text-decoration: underline;
}

.catalog-actions {
  margin: 0.75rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.btn-run-catalog {
  display: inline-block;
  font-weight: 700;
  padding: 0.45rem 0.85rem;
  background: var(--ink);
  color: var(--page);
  border: 1px solid var(--rule);
  text-decoration: none;
  font-size: 0.88rem;
}
.badge-blocked-catalog {
  display: inline-block;
  font-size: 0.82rem;
  padding: 0.3rem 0.6rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  color: var(--muted);
}

/* Performance Reporting & Graphs */
.speedup-badge {
  display: block;
  margin: 1rem 0;
  padding: 0.85rem 1.25rem;
  font-size: 1.1rem;
  font-weight: 700;
  border-radius: 4px;
  border-left: 5px solid currentColor;
}
.speedup-badge.wasm-wins {
  background: #e6f4ea;
  color: #137333;
}
.speedup-badge.js-wins {
  background: #fef7e0;
  color: #b06000;
}
.speedup-badge.tie {
  background: #e8f0fe;
  color: #1a73e8;
}
@media (prefers-color-scheme: dark) {
  .speedup-badge.wasm-wins {
    background: #0f3818;
    color: #81c995;
  }
  .speedup-badge.js-wins {
    background: #3c2600;
    color: #fdd663;
  }
  .speedup-badge.tie {
    background: #0d2e5c;
    color: #8ab4f8;
  }
}

.perf-graph-card {
  margin: 1.5rem 0;
  padding: 1.25rem;
  border: 1px solid var(--rule);
  background: var(--raised);
  border-radius: 4px;
}
.perf-title {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.1rem;
  font-family: Georgia, serif;
}
.perf-bar-group {
  margin-bottom: 1.25rem;
}
.perf-bar-group:last-child {
  margin-bottom: 0;
}
.perf-bar-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.35rem;
  font-size: 0.92rem;
}
.perf-bar-label .muted {
  color: var(--muted);
  font-size: 0.82rem;
}
.perf-bar-track {
  height: 1.6rem;
  background: var(--surface);
  border-radius: 2px;
  margin-bottom: 0.35rem;
  overflow: hidden;
}
.perf-bar {
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: 0.5rem;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  transition: width 300ms ease;
}
.perf-bar.js-cold {
  background: #d97706;
}
.perf-bar.js-warm {
  background: #b45309;
}
.perf-bar.wasm-cold {
  background: #2563eb;
}
.perf-bar.wasm-warm {
  background: #1d4ed8;
}

.results-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}
.results-table th,
.results-table td {
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--rule);
  text-align: left;
}
.results-table th {
  background: var(--surface);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── M4 Results Explorer ── */

.results-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: end;
  padding: 1rem;
  background: var(--surface, #f8f8f5);
  border: 1px solid var(--border, #e0ddd5);
  border-radius: 0.5rem;
}
.results-filters label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
}
.results-filters select {
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--border, #ccc);
  border-radius: 0.25rem;
  font-size: 0.875rem;
}
.results-filters button {
  padding: 0.375rem 1rem;
  border: 1px solid var(--border, #ccc);
  border-radius: 0.25rem;
  background: var(--surface, #fff);
  font-size: 0.875rem;
  cursor: pointer;
}

.matrix-wrap,
.runs-wrap,
.summary-wrap,
.detail-wrap {
  margin: 1rem 0;
  overflow-x: auto;
}

.data-matrix,
.data-runs,
.data-samples {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.data-matrix th,
.data-matrix td,
.data-runs th,
.data-runs td,
.data-samples th,
.data-samples td {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border, #e0ddd5);
  text-align: left;
}
.data-matrix thead th,
.data-runs thead th,
.data-samples thead th {
  background: var(--surface, #f8f8f5);
  font-weight: 600;
  white-space: nowrap;
}
.matrix-cell {
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.matrix-note {
  font-size: 0.8125rem;
  color: var(--text-muted, #666);
  margin-top: 0.5rem;
}

.run-row {
  cursor: pointer;
  transition: background 0.1s;
}
.run-row:hover,
.run-row:focus {
  background: var(--surface-hover, #f0f0eb);
  outline: none;
}

.status-passed {
  color: inherit;
  font-weight: 500;
}
.status-failed {
  color: inherit;
  font-weight: 500;
}
.status-unknown {
  color: var(--text-muted, #999);
}

.runs-meta {
  font-size: 0.8125rem;
  color: var(--text-muted, #666);
  margin-top: 0.5rem;
}

.detail-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}
.detail-facts dt {
  font-weight: 600;
  font-size: 0.8125rem;
  margin-bottom: 0.25rem;
}
.detail-facts dd {
  margin: 0 0 1rem;
}
.detail-facts pre {
  font-size: 0.75rem;
  line-height: 1.4;
  background: var(--surface, #f8f8f5);
  padding: 0.5rem;
  border-radius: 0.25rem;
  overflow-x: auto;
  max-height: 300px;
  overflow-y: auto;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}
.summary-grid dt {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.summary-grid dd {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0.25rem 0 0;
}

.error-notice {
  color: #c0392b;
  font-size: 0.875rem;
  padding: 0.75rem;
  background: #fdf2f0;
  border: 1px solid #f0c8c0;
  border-radius: 0.25rem;
}

/* ── Benchmark demo shell (consolidated from traditional-demo.css so every
   demo page shares the same shell styling via /styles.css alone) ─────────── */
.lede {
  max-width: 72ch;
  margin-block: 1.5rem 0;
  color: var(--muted);
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
}

.demo-panel,
.detail-grid > section,
.detail-cards > section {
  border: 1px solid var(--rule);
  background: var(--raised);
}

/* The "What it does" / "Why compare Wasm vs JS" / provenance / limitations
   cards. They were on .detail-grid, which is also the class on every
   #perf-reporting and #ml-reporting container — 65 of those against 6 card
   grids. Sharing the class meant the cards could not be given a layout or
   padding without also restyling every measurement report, which is why they
   had neither: the container had no layout, so they stacked flush with their
   borders doubling, and the sections had no padding, so every line of text sat
   against its own border.
   Splitting the class is the fix. .detail-grid keeps exactly the rules the
   reports already had; the cards now sit on the same padded, raised footing as
   .demo-panel, the element directly above them on each of these pages. */
.detail-cards {
  display: grid;
  /* Two columns, as .perf-reporting .detail-grid already uses. Every one of
     these pages carries exactly four cards, so a fixed pair lays them out 2x2
     at any width instead of leaving one stranded on a row of its own — which
     is what auto-fit does as soon as a third column fits. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-block: 1rem 0;
}

@media (max-width: 45rem) {
  .detail-cards {
    grid-template-columns: 1fr;
  }
}

.detail-cards > section {
  padding: clamp(1.1rem, 3vw, 1.6rem);
  box-shadow: 0.35rem 0.35rem 0 var(--rule);
  /* A grid item's min-width is auto, so a long unbreakable token — a hash, a
     URL — would otherwise widen its column past its share. */
  min-width: 0;
}

/* h2 carries a 2.4rem top margin for page flow; at the top of a card that
   reads as a gap above the heading rather than spacing between sections. */
.detail-cards > section > :first-child {
  margin-top: 0;
}

.detail-cards > section > :last-child {
  margin-bottom: 0;
}

.demo-panel {
  padding: clamp(1.2rem, 4vw, 2rem);
  box-shadow: 0.35rem 0.35rem 0 var(--rule);
  margin-block: 1rem 0;
}

.demo-panel .controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.8rem;
}

.demo-panel label {
  display: grid;
  flex: 1 1 22rem;
  gap: 0.35rem;
}

.demo-panel select,
.demo-panel button {
  font: inherit;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--page);
  color: var(--ink);
}

.demo-panel button {
  background: var(--accent);
  color: var(--page);
  border-color: var(--accent);
  cursor: pointer;
}

.demo-panel button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.demo-panel #status {
  min-height: 1.5em;
  margin-block: 0.75rem 0;
  color: var(--muted);
}

.perf-reporting {
  margin-top: 1.25rem;
}

.perf-reporting .detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

/* ── Measurement report: charts, scope tables, decision panel ────────────
   Series colours are defined once here and shared by the SVG charts and the
   table accents, so a language keeps one colour across every view. */
:root {
  --series-js: #b45309;
  --series-wasm: #1d4ed8;
  --series-0: #1d4ed8;
  --series-1: #b45309;
  --series-2: #047857;
  --series-3: #7c3aed;
  --series-4: #be123c;
  --series-5: #0e7490;
  --series-6: #a16207;
  --chart-grid: #d8d5cc;
  --ok: #137333;
  --caution: #b06000;
}
@media (prefers-color-scheme: dark) {
  :root {
    --series-js: #f0a868;
    --series-wasm: #7aa2f7;
    --series-0: #7aa2f7;
    --series-1: #f0a868;
    --series-2: #6ee7b7;
    --series-3: #c4b5fd;
    --series-4: #fda4af;
    --series-5: #67e8f9;
    --series-6: #fcd34d;
    --chart-grid: #45413b;
    --ok: #81c995;
    --caution: #fdd663;
  }
}

.wvj-icon {
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.16em;
  flex: none;
}

/* Charts */
.wvj-chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 25rem), 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0;
  align-items: start;
}
.wvj-chart-cell {
  min-width: 0;
}
.wvj-chart-cell .wvj-chart {
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.wvj-chart {
  margin: 1.5rem 0;
  padding: 1rem 1.1rem 0.85rem;
  border: 1px solid var(--rule);
  background: var(--raised);
  border-radius: 4px;
  overflow-x: auto;
}
.wvj-chart svg {
  display: block;
  max-width: 38rem;
  min-width: 0;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.wvj-chart-wide svg {
  max-width: 48rem;
  min-width: 0;
}
.wvj-chart-title {
  font-family: Georgia, serif;
  font-size: 1.05rem;
  margin-bottom: 0.75rem;
}
.wvj-chart-caption {
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
  color: var(--muted);
}
.wvj-grid {
  stroke: var(--chart-grid);
  stroke-width: 1;
}
.wvj-axis-label,
.wvj-axis-title {
  fill: var(--muted);
  font-size: 11px;
  font-family: system-ui, sans-serif;
}
.wvj-axis-title {
  font-size: 11.5px;
}
.wvj-bar-label {
  fill: var(--ink);
  font-size: 12.5px;
  font-family: system-ui, sans-serif;
}
.wvj-bar-value {
  fill: var(--ink);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-family: system-ui, sans-serif;
}
.wvj-bar-value.wvj-absent {
  fill: var(--muted);
  font-style: italic;
}
.wvj-bar {
  fill: var(--accent);
}
.wvj-bar-js {
  fill: var(--series-js);
}
.wvj-bar-wasm {
  fill: var(--series-wasm);
}
.wvj-ci {
  stroke: var(--ink);
  stroke-width: 1.25;
  opacity: 0.75;
}
.wvj-line {
  stroke-width: 2.25;
  stroke-linecap: round;
  fill: none;
}
.wvj-line-base {
  stroke-dasharray: 5 3;
}
.wvj-series-label {
  font-size: 11.5px;
  font-family: system-ui, sans-serif;
}
.wvj-crossing {
  fill: var(--raised);
  stroke: var(--ink);
  stroke-width: 2;
}
.wvj-series-0 {
  stroke: var(--series-0);
}
.wvj-series-1 {
  stroke: var(--series-1);
}
.wvj-series-2 {
  stroke: var(--series-2);
}
.wvj-series-3 {
  stroke: var(--series-3);
}
.wvj-series-4 {
  stroke: var(--series-4);
}
.wvj-series-5 {
  stroke: var(--series-5);
}
.wvj-series-6 {
  stroke: var(--series-6);
}
.wvj-series-text-0 {
  fill: var(--series-0);
}
.wvj-series-text-1 {
  fill: var(--series-1);
}
.wvj-series-text-2 {
  fill: var(--series-2);
}
.wvj-series-text-3 {
  fill: var(--series-3);
}
.wvj-series-text-4 {
  fill: var(--series-4);
}
.wvj-series-text-5 {
  fill: var(--series-5);
}
.wvj-series-text-6 {
  fill: var(--series-6);
}

/* Decision panel */
.decision-panel {
  margin: 1.25rem 0 1.75rem;
  padding: 1.15rem 1.25rem 1.35rem;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  background: var(--raised);
  border-radius: 4px;
}
.decision-heading {
  font-family: Georgia, serif;
  margin: 0;
  font-size: 1.35rem;
}
.decision-sub {
  margin: 0.2rem 0 1rem;
  color: var(--muted);
  font-size: 0.88rem;
}
.decision-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
  gap: 0.85rem;
}
.decision-card {
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--surface);
}
.decision-card h4 {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.4rem;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 600;
}
.decision-number {
  margin: 0;
  font-size: 1.9rem;
  line-height: 1.1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.decision-detail {
  margin: 0.35rem 0 0;
  font-size: 0.83rem;
  color: var(--muted);
}
.decision-card.is-verdict {
  border-color: var(--ok);
}
.decision-card.is-verdict .decision-number {
  color: var(--ok);
}
.decision-card.is-inconclusive {
  border-color: var(--caution);
}
.decision-card.is-inconclusive .decision-number {
  color: var(--caution);
}

/* Scope blocks */
.scope-legend {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--surface);
  font-size: 0.88rem;
}
.scope-legend summary {
  cursor: pointer;
  font-weight: 600;
}
.scope-legend dl {
  margin: 0.75rem 0 0;
}
.scope-legend dt {
  font-weight: 600;
  margin-top: 0.6rem;
}
.scope-legend dd {
  margin: 0.15rem 0 0;
  color: var(--muted);
}
.scope-legend em {
  color: var(--ink);
  font-style: normal;
  font-weight: 600;
}
.scope-block {
  margin: 1.75rem 0;
}
.scope-head {
  border-left: 3px solid var(--accent);
  padding-left: 0.85rem;
}
.scope-title {
  font-family: Georgia, serif;
  margin: 0;
  font-size: 1.15rem;
}
.scope-question {
  margin: 0.15rem 0 0.5rem;
  color: var(--muted);
  font-size: 0.9rem;
}
.scope-bounds {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
}
.scope-bounds div {
  display: flex;
  gap: 0.4rem;
}
.scope-bounds dt {
  font-weight: 600;
  flex: none;
}
.scope-bounds dd {
  margin: 0;
}
.results-table td.num,
.results-table th.num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.results-table tbody th {
  text-align: left;
  font-weight: 600;
  background: var(--surface);
}
.results-table tr.is-baseline {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.notice.is-dominated {
  border-left: 4px solid var(--warning);
  padding-left: 0.75rem;
}
.notice.is-material {
  border-left: 4px solid var(--caution);
  padding-left: 0.75rem;
}

/* CSV export */
.csv-export {
  margin: 1.25rem 0;
}
.csv-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}
.csv-actions button {
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.85rem;
  cursor: pointer;
}
.csv-actions button:hover {
  border-color: var(--accent);
}
.csv-export pre {
  max-height: 22rem;
  overflow: auto;
  font-size: 0.76rem;
}

/* Coverage matrix */
.scope-glossary dt {
  font-weight: 600;
  margin-top: 0.75rem;
}
.scope-glossary dd {
  margin: 0.15rem 0 0;
  color: var(--muted);
}
.cov-yes {
  text-align: center;
  color: var(--ok);
}
.cov-no {
  text-align: center;
  color: var(--muted);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* A demo route that has a measured benchmark twin says so. */
.wvj-canonical-banner {
  margin: 0 0 1rem;
  padding: 0.6rem 0.85rem;
  border-left: 3px solid var(--accent);
  background: var(--surface);
  font-size: 0.88rem;
}

/* Real-DOM stage: the rendered UI under test, visible while it is driven. */
.wvj-dom-frame {
  display: block;
  width: 100%;
  height: min(70vh, 32rem);
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--raised);
}
.dom-live-frame {
  margin-top: 0.5rem;
}
.dom-live-caption {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
  padding: 0.5rem 0.75rem;
  border-left: 3px solid var(--rule);
  background: var(--surface);
  font-size: 0.88rem;
  font-weight: 600;
}
.dom-live-caption[data-engine] {
  border-left-color: var(--series-wasm);
}
.dom-live-caption[data-engine="js"] {
  border-left-color: var(--series-js);
}
.dom-live-caption[data-engine]::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: currentColor;
  animation: wvj-pulse 1.1s ease-in-out infinite;
}
@keyframes wvj-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dom-live-caption[data-engine]::before {
    animation: none;
  }
}

/* Holistic Overview & Master Benchmark Table */
.holistic-overview {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 1.5rem;
  margin: 2rem 0;
}
.overview-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 1.25rem;
}
.ov-control-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
}
.ov-control-group label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.ov-control-group select,
.ov-control-group input[type="search"] {
  font-size: 0.85rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--rule);
  background: var(--raised);
  color: var(--ink);
  border-radius: 4px;
}
.ov-action-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.ov-view-group {
  display: inline-flex;
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
}
.btn-ov-view {
  background: var(--raised);
  color: var(--ink);
  border: none;
  padding: 0.4rem 0.75rem;
  font-size: 0.82rem;
  cursor: pointer;
  border-right: 1px solid var(--rule);
}
.btn-ov-view:last-child {
  border-right: none;
}
.btn-ov-view.active {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}
.btn-ov-run {
  background: #1b5e20;
  color: #fff;
  border: none;
  padding: 0.45rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
}
.btn-ov-run:hover:not(:disabled) {
  background: #2e7d32;
}
.btn-ov-secondary {
  background: var(--raised);
  color: var(--ink);
  border: 1px solid var(--rule);
  padding: 0.4rem 0.75rem;
  font-size: 0.82rem;
  border-radius: 4px;
  cursor: pointer;
}
.overview-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.kpi-card {
  background: var(--raised);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.kpi-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 600;
}
.kpi-val {
  font-size: 1.4rem;
  font-family: Georgia, serif;
  color: var(--ink);
}
.kpi-sub {
  font-size: 0.75rem;
  color: var(--muted);
}
.master-table-wrap {
  overflow-x: auto;
  margin-top: 1.5rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--raised);
}
.master-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  text-align: left;
}
.master-table caption {
  caption-side: top;
  text-align: left;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.75rem 0.85rem;
  color: var(--muted);
}
.master-table th,
.master-table td {
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
}
.master-table th {
  background: var(--surface);
  font-weight: 600;
  user-select: none;
}
.master-table th.sortable-th {
  cursor: pointer;
}
.master-table th.sortable-th:hover {
  background: var(--raised);
}
.master-table tbody tr:hover {
  background: var(--surface);
}
.ov-workload-link {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9rem;
}
.ov-workload-link:hover {
  text-decoration: underline;
  color: var(--accent);
}
.btn-ov-table-run {
  background: var(--raised);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  cursor: pointer;
  font-weight: 600;
}
.btn-ov-table-run:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.speedup-pill {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
}
.speedup-pill.wasm-faster {
  background: #e8f5e9;
  color: #1b5e20;
  border: 1px solid #c8e6c9;
}
.speedup-pill.js-faster {
  background: #fff3e0;
  color: #e65100;
  border: 1px solid #ffe0b2;
}
.speedup-pill.even {
  background: #f5f5f5;
  color: #424242;
  border: 1px solid #e0e0e0;
}
@media (prefers-color-scheme: dark) {
  .speedup-pill.wasm-faster {
    background: #1b5e2033;
    color: #81c784;
    border-color: #2e7d32;
  }
  .speedup-pill.js-faster {
    background: #e6510033;
    color: #ffb74d;
    border-color: #f57c00;
  }
  .speedup-pill.even {
    background: #42424233;
    color: #bdbdbd;
    border-color: #616161;
  }
}
.source-badge {
  display: inline-block;
  font-size: 0.7rem;
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.source-badge.live {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
}
.source-badge.reference {
  background: #e3f2fd;
  color: #1565c0;
  border: 1px solid #90caf9;
}
.source-badge.unmeasured {
  background: #fafafa;
  color: #757575;
  border: 1px solid #e0e0e0;
}
@media (prefers-color-scheme: dark) {
  .source-badge.live {
    background: #1b5e2033;
    color: #81c784;
    border-color: #2e7d32;
  }
  .source-badge.reference {
    background: #1565c033;
    color: #90caf9;
    border-color: #1976d2;
  }
  .source-badge.unmeasured {
    background: #42424233;
    color: #bdbdbd;
    border-color: #616161;
  }
}
.playground-cards-grid {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.playground-cards-grid .playground-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.playground-cards-grid .playground-card h3 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}
.playground-cards-grid .playground-metrics {
  flex: 1 1 auto;
}
.pg-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin: 0.75rem 0;
  background: var(--surface);
  padding: 0.6rem;
  border-radius: 4px;
  border: 1px solid var(--rule);
  text-align: center;
}
.pg-kpi {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.pg-kpi span {
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--muted);
}
.pg-kpi strong {
  font-size: 0.95rem;
  color: var(--ink);
}
.pg-compact-chart {
  margin: 0.75rem 0;
}
.pg-deep-details {
  margin-top: 1rem;
  border-top: 1px dashed var(--rule);
  padding-top: 0.5rem;
}
.pg-deep-details summary {
  font-size: 0.82rem;
  cursor: pointer;
  color: var(--muted);
  font-weight: 500;
  user-select: none;
}
.pg-deep-details summary:hover {
  color: var(--accent);
}
.pg-deep-content {
  margin-top: 0.75rem;
}

body[data-workload] main,
body[data-demo] main,
body[data-multilang-manifest] main {
  max-width: var(--dashboard);
  width: 100%;
}

.benchmark-group-section {
  margin: 2rem 0;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 6px;
}
.benchmark-group-section .group-title {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
  color: var(--ink);
}

.autoresearch-panel {
  margin-top: 1.5rem;
  padding: 1.25rem;
  background: var(--surface-secondary, #faf9f6);
  border: 1px solid var(--accent, #b35900);
  border-radius: 6px;
}
@media (prefers-color-scheme: dark) {
  .autoresearch-panel {
    background: #1e1e1e;
    border-color: #d97706;
  }
}
.autoresearch-header h4 {
  margin: 0 0 0.25rem 0;
  font-size: 1.15rem;
  color: var(--ink);
}
.autoresearch-header p {
  margin: 0 0 1rem 0;
  color: var(--muted);
  font-size: 0.9rem;
}
.autoresearch-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.probe-option {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  cursor: pointer;
}
.btn-run-autoresearch {
  padding: 0.45rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  background: var(--accent, #b35900);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.btn-run-autoresearch:hover {
  opacity: 0.9;
}
.btn-run-autoresearch:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.autoresearch-status {
  font-size: 0.85rem;
  color: var(--muted);
  font-style: italic;
  margin: 0.5rem 0 1rem 0;
}
.autoresearch-verdict-card {
  margin: 1rem 0;
  padding: 1rem;
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 6px;
}
@media (prefers-color-scheme: dark) {
  .autoresearch-verdict-card {
    background: #052e16;
    border-color: #166534;
  }
}
.autoresearch-verdict-title {
  font-weight: 700;
  font-size: 1rem;
  color: #166534;
  margin-bottom: 0.4rem;
}
@media (prefers-color-scheme: dark) {
  .autoresearch-verdict-title {
    color: #4ade80;
  }
}
.autoresearch-verdict-body {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
}
.badge-pass {
  background: #2e7d32;
  color: #fff;
}
.badge-neutral {
  background: #757575;
  color: #fff;
}
.badge-info {
  background: #1976d2;
  color: #fff;
}