.demo-hero {
  max-width: 64rem;
  padding: clamp(3.5rem, 7vw, 5.25rem) 0 clamp(3rem, 6vw, 4.25rem);
}
.demo-hero h1 {
  max-width: 14ch;
  margin: 0;
  font-size: var(--display);
  font-weight: var(--wt-display);
  letter-spacing: -0.06em;
  line-height: 0.94;
}
.demo-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  margin-top: 1.5rem;
  color: var(--faint);
  font: var(--label)/1.55 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.demo-facts strong { color: var(--ink); font-weight: var(--wt-label); }

.evidence-shell { padding: 0 0 clamp(3.5rem, 7vw, 5rem); }
.evidence-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1rem;
}
.evidence-heading .section-label { margin: 0 0 0.35rem; }
.evidence-heading h2 {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  letter-spacing: -0.04em;
  line-height: 1.1;
}
.demo-status {
  max-width: 28rem;
  margin: 0;
  color: var(--muted);
  font: var(--label)/1.55 var(--mono);
  text-align: right;
}
.demo-status[data-state="ready"] { color: var(--blue); }
.demo-status[data-state="error"] { color: var(--orange); }

.run-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  padding: 1px;
  background: var(--rule);
}
.run-card { min-width: 0; background: var(--paper); }
.run-header { min-height: 9.2rem; padding: 1rem; }
.run-step {
  margin: 0 0 0.35rem;
  color: var(--blue);
  font: var(--wt-label) var(--label)/1.45 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.candidate-card .run-step { color: var(--orange); }
.run-header h3 {
  margin: 0;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  letter-spacing: -0.025em;
}
.run-state {
  margin: 0.55rem 0 0;
  color: var(--muted);
  font: var(--label)/1.55 var(--mono);
}
.replay-card .run-state[data-verified="true"] { color: var(--blue); }

.run-viewport {
  position: relative;
  min-height: 250px;
  overflow: hidden;
  background: var(--paper-deep);
  touch-action: none;
}
.run-viewport canvas { display: block; }
.viewer-loading {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--muted);
  font: var(--label)/1.5 var(--mono);
  pointer-events: none;
}
.viewer-readout {
  position: absolute;
  z-index: 1;
  right: 0.7rem;
  bottom: 0.55rem;
  left: 0.7rem;
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  color: var(--muted);
  font: 0.65rem/1.5 var(--mono);
  pointer-events: none;
}
.error-readout { color: var(--ink); }

.run-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem 1rem;
  margin: 0;
  padding: 1rem;
}
.run-metrics div { min-width: 0; }
.run-metrics dt {
  color: var(--faint);
  font: 0.65rem/1.45 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.run-metrics dd { margin: 0.2rem 0 0; font: 0.84rem/1.45 var(--mono); }
.run-metrics .digest { grid-column: 1 / -1; }
.run-metrics code { display: block; overflow-x: auto; color: var(--muted); }
.replay-card .run-metrics code { color: var(--blue); }

.playback { padding: 1.25rem 0 0; }
.playback-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.playback-actions output {
  margin-left: auto;
  color: var(--muted);
  font: var(--label)/1.45 var(--mono);
}
.btn:disabled,
.download-tape[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.fault-track {
  position: relative;
  height: 3.8rem;
  margin-top: 0.6rem;
  border-top: 1px solid var(--rule);
}
.fault-window {
  position: absolute;
  top: -1px;
  min-width: 5.25rem;
  padding: 0.42rem 0.5rem;
  border-top: 3px solid var(--orange);
  color: var(--muted);
  font: 0.62rem/1.4 var(--mono);
  white-space: nowrap;
}
.fault-window b { display: block; color: var(--ink); font-weight: var(--wt-label); }
.fault-window.glitch { left: 30%; width: 10%; }
.fault-window.drop { left: 50%; width: 4%; }
.fault-window.latency { right: 0; left: 65%; }
.active-fault { margin: 0; color: var(--faint); font: var(--label)/1.5 var(--mono); }
.active-fault strong { color: var(--ink); }

.verdict {
  display: grid;
  grid-template-columns: minmax(9rem, 0.22fr) minmax(0, 1fr);
  gap: 1.5rem;
  margin-top: 1.7rem;
  padding: 1.3rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.verdict .section-label,
.verdict p { margin: 0; }
.verdict p:last-child { max-width: 56rem; color: var(--muted); }
.verdict strong { color: var(--ink); }

.tape-evidence { padding: 1.1rem 0; border-bottom: 1px solid var(--rule); }
.tape-evidence summary { width: fit-content; font-weight: var(--wt-strong); cursor: pointer; }
.tape-evidence > p { max-width: 52rem; color: var(--muted); font-size: 0.9rem; }
.tape-evidence pre {
  margin: 1rem 0;
  padding: 1rem;
  overflow-x: auto;
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  font: 0.72rem/1.65 var(--mono);
}
.download-tape { display: inline-block; text-decoration: none; }

.implementation { padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.implementation h2 { margin: 0 0 0.6rem; font-size: var(--title); letter-spacing: -0.04em; }
.implementation > p { max-width: 48rem; margin: 0 0 1.75rem; color: var(--muted); }
.implementation-row {
  display: grid;
  grid-template-columns: 3rem minmax(10rem, 0.28fr) minmax(0, 1fr);
  gap: 1rem;
  padding: 1.05rem 0;
}
.implementation-row span:first-child { color: var(--blue); font: var(--label)/1.5 var(--mono); }
.implementation-row strong { font-size: 0.95rem; }
.implementation-row p { max-width: 52rem; margin: 0; color: var(--muted); font-size: 0.94rem; }
.source-links { display: flex; flex-wrap: wrap; gap: 0.7rem 1.25rem; margin-top: 1.5rem; }
.noscript { margin: 1rem; padding: 1rem; border: 1px solid var(--orange); }

@media (max-width: 900px) {
  .run-grid { grid-template-columns: 1fr; }
  .run-header { min-height: 0; }
  .run-viewport { min-height: 330px; }
  .viewer-readout { font-size: var(--label); }
}

@media (max-width: 640px) {
  .evidence-heading { display: block; }
  .demo-status { margin-top: 0.75rem; text-align: left; }
  .run-viewport { min-height: 270px; }
  .playback-actions { flex-wrap: wrap; }
  .playback-actions output { width: 100%; margin: 0.25rem 0 0; }
  .fault-track { height: 7.1rem; }
  .fault-window { min-width: 0; white-space: normal; }
  .fault-window.glitch { left: 0; width: 30%; }
  .fault-window.drop { left: 33%; width: 30%; }
  .fault-window.latency { right: 0; left: auto; width: 34%; }
  .verdict { grid-template-columns: 1fr; gap: 0.5rem; }
  .implementation-row { grid-template-columns: 2rem minmax(0, 1fr); }
  .implementation-row p { grid-column: 2; }
  .nav-links a:nth-child(2) { display: none; }
}