:root {
  --bg: #070907;
  --bg-elevated: #0c0f0c;
  --bg-soft: #101410;
  --panel: #111611;

  --line: #202820;
  --line-strong: #2c362c;

  --text: #f3f7f1;
  --text-soft: #b7c0b5;
  --muted: #7f8b7d;

  --green: #76b900;
  --green-bright: #8ed400;
  --green-soft: rgba(118, 185, 0, 0.11);
  --green-border: rgba(118, 185, 0, 0.38);

  --red: #ff5d62;
  --red-soft: rgba(255, 93, 98, 0.10);
  --red-border: rgba(255, 93, 98, 0.34);

  --amber: #f5b642;
  --amber-soft: rgba(245, 182, 66, 0.10);
  --amber-border: rgba(245, 182, 66, 0.30);

  --mono: "JetBrains Mono", monospace;
  --sans: "Inter", sans-serif;

  --max-width: 1480px;

  --ease: 180ms ease;
}


/* =========================================================
   RESET
========================================================= */

* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;

  min-height: 100vh;

  font-family: var(--sans);

  color: var(--text);

  background:
    radial-gradient(
      circle at 70% 15%,
      rgba(118, 185, 0, 0.045),
      transparent 30%
    ),
    linear-gradient(
      rgba(255, 255, 255, 0.015) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.015) 1px,
      transparent 1px
    ),
    var(--bg);

  background-size:
    auto,
    40px 40px,
    40px 40px,
    auto;
}


button {
  font: inherit;
  color: inherit;
}


/* =========================================================
   APP
========================================================= */

.app {
  min-height: 100vh;
  overflow-x: hidden;
}


/* =========================================================
   TOPBAR
========================================================= */

.topbar {
  width: 100%;
  min-height: 76px;

  padding: 0 32px;

  position: sticky;
  top: 0;
  z-index: 100;

  display: grid;

  grid-template-columns:
    minmax(300px, 1fr)
    auto
    minmax(300px, 1fr);

  align-items: center;

  gap: 24px;

  border-bottom:
    1px solid var(--line);

  background:
    rgba(7, 9, 7, 0.90);

  backdrop-filter:
    blur(18px);
}


.brand {
  display: flex;

  align-items: center;

  gap: 13px;
}


.brand-symbol {
  width: 38px;
  height: 38px;

  border:
    1px solid var(--line-strong);

  border-radius: 8px;

  display: grid;

  place-items: center;

  background: #0d110d;

  position: relative;
}


.brand-symbol::before,
.brand-symbol::after {
  content: "";

  position: absolute;

  border:
    1px solid rgba(118, 185, 0, 0.42);
}


.brand-symbol::before {
  width: 18px;
  height: 18px;

  transform:
    rotate(45deg);
}


.brand-symbol::after {
  width: 7px;
  height: 7px;

  background:
    var(--green);

  border: none;

  box-shadow:
    0 0 14px rgba(118, 185, 0, 0.45);
}


.brand-symbol-inner {
  width: 2px;
  height: 2px;
}


.brand-copy {
  display: flex;

  flex-direction: column;

  gap: 3px;
}


.brand-name {
  font-size: 12px;

  font-weight: 800;

  letter-spacing: 0.14em;
}


.brand-tagline {
  font-size: 10px;

  color: var(--muted);
}


.top-nav {
  display: flex;

  align-items: center;

  gap: 4px;
}


.nav-item {
  min-height: 34px;

  padding:
    0 12px;

  border: 0;

  border-radius: 6px;

  background:
    transparent;

  font-size: 11px;

  color: var(--muted);

  cursor: pointer;

  transition:
    background var(--ease),
    color var(--ease);
}


.nav-item:hover {
  color: var(--text);

  background:
    rgba(255, 255, 255, 0.025);
}


.nav-item.active {
  color: var(--text);

  background:
    var(--green-soft);
}


.runtime-strip {
  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 8px;
}


.runtime-item {
  min-height: 30px;

  padding:
    0 9px;

  border:
    1px solid var(--line);

  border-radius: 6px;

  display: inline-flex;

  align-items: center;

  gap: 7px;

  font-family: var(--mono);

  font-size: 9px;

  letter-spacing: 0.06em;

  color: var(--text-soft);
}


.runtime-dot {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    var(--green);

  box-shadow:
    0 0 10px rgba(118, 185, 0, 0.5);
}


/* =========================================================
   HERO
========================================================= */

.hero {
  max-width: var(--max-width);

  margin:
    0 auto;

  min-height: 690px;

  padding:
    84px 34px 64px;

  display: grid;

  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(420px, 0.95fr);

  gap: 70px;

  align-items: center;
}


.hero-kicker,
.section-kicker,
.phase-heading,
.blackbox-kicker,
.autopsy-label,
.minimizer-label,
.reality-label,
.repair-label,
.replay-column-label {
  font-family: var(--mono);

  font-size: 9px;

  font-weight: 600;

  letter-spacing: 0.14em;

  color: var(--muted);
}


.hero-copy h1 {
  max-width: 820px;

  margin:
    14px 0 20px;

  font-size:
    clamp(48px, 5.6vw, 86px);

  line-height: 0.98;

  letter-spacing: -0.055em;

  font-weight: 800;
}


.hero-accent {
  display: block;

  color: var(--green);
}


.hero-description {
  max-width: 680px;

  margin: 0;

  font-size: 16px;

  line-height: 1.7;

  color: var(--text-soft);
}


.hero-actions {
  margin-top: 30px;

  display: flex;

  gap: 10px;

  flex-wrap: wrap;
}


.primary-cta,
.secondary-cta,
.replay-button,
.save-regression-button {
  min-height: 44px;

  padding:
    0 16px;

  border-radius: 7px;

  font-family: var(--mono);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 0.07em;

  cursor: pointer;

  transition:
    transform var(--ease),
    background var(--ease),
    border var(--ease);
}


.primary-cta {
  border:
    1px solid var(--green);

  background:
    var(--green);

  color: #0a0d08;
}


.primary-cta:hover {
  background:
    var(--green-bright);

  transform:
    translateY(-1px);
}


.secondary-cta {
  border:
    1px solid var(--line-strong);

  background:
    rgba(255, 255, 255, 0.015);

  color:
    var(--text-soft);
}


.secondary-cta:hover {
  color:
    var(--text);

  border-color:
    var(--green-border);
}


.cta-icon {
  margin-right: 7px;
}


.hero-proof {
  margin-top: 34px;

  display: flex;

  align-items: center;

  gap: 18px;

  flex-wrap: wrap;
}


.proof-item {
  display: flex;

  flex-direction: column;

  gap: 3px;
}


.proof-label {
  font-family:
    var(--mono);

  font-size: 8px;

  letter-spacing: 0.1em;

  color: var(--muted);
}


.proof-value {
  font-size: 11px;

  font-weight: 600;

  color: var(--text-soft);
}


.proof-divider {
  width: 1px;
  height: 28px;

  background:
    var(--line);
}


/* =========================================================
   HERO BLACK BOX
========================================================= */

.hero-visual {
  position: relative;
}


.blackbox-shell {
  min-height: 520px;

  border:
    1px solid var(--line-strong);

  border-radius: 14px;

  position: relative;

  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.017),
      rgba(255, 255, 255, 0.003)
    ),
    #090c09;

  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.40);
}


.blackbox-shell::before {
  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      rgba(118, 185, 0, 0.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(118, 185, 0, 0.025) 1px,
      transparent 1px
    );

  background-size:
    28px 28px;
}


.blackbox-header,
.blackbox-footer {
  position: relative;

  z-index: 2;

  min-height: 67px;

  padding:
    15px 17px;

  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 18px;
}


.blackbox-header {
  border-bottom:
    1px solid var(--line);
}


.blackbox-footer {
  border-top:
    1px solid var(--line);
}


.blackbox-id {
  margin-top: 5px;

  font-family:
    var(--mono);

  font-size: 10px;

  color: var(--text-soft);
}


.blackbox-status {
  padding:
    6px 8px;

  border:
    1px solid var(--green-border);

  border-radius: 5px;

  background:
    var(--green-soft);

  font-family:
    var(--mono);

  font-size: 8px;

  letter-spacing: 0.08em;

  color: var(--green);
}


.blackbox-graph {
  min-height: 385px;

  padding:
    28px 24px;

  position: relative;

  z-index: 2;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;
}


.graph-node {
  min-width: 150px;

  min-height: 60px;

  padding:
    10px 14px;

  border:
    1px solid var(--line-strong);

  border-radius: 8px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  background:
    #0b0f0b;
}


.graph-node.node-agent {
  border-color:
    var(--green-border);

  box-shadow:
    0 0 24px rgba(118, 185, 0, 0.035);
}


.graph-node.node-unsafe {
  border-color:
    var(--red-border);

  background:
    var(--red-soft);
}


.node-label {
  margin-bottom: 5px;

  font-family:
    var(--mono);

  font-size: 8px;

  letter-spacing: 0.1em;

  color: var(--muted);
}


.node-value {
  font-family:
    var(--mono);

  font-size: 12px;

  font-weight: 600;
}


.node-unsafe .node-value {
  color: var(--red);
}


.graph-edge {
  width: 1px;

  height: 45px;

  position: relative;

  background:
    linear-gradient(
      var(--green-border),
      rgba(118, 185, 0, 0.15)
    );
}


.graph-edge::after {
  content: "▼";

  position: absolute;

  bottom: -7px;

  left: 50%;

  transform:
    translateX(-50%);

  font-size: 8px;

  color: var(--green);
}


.graph-edge span {
  position: absolute;

  left: 12px;

  top: 50%;

  transform:
    translateY(-50%);

  white-space: nowrap;

  font-family:
    var(--mono);

  font-size: 8px;

  color: var(--muted);
}


.graph-edge.dangerous {
  background:
    linear-gradient(
      var(--red),
      rgba(255, 93, 98, 0.22)
    );
}


.graph-edge.dangerous::after {
  color: var(--red);
}


.graph-warning {
  margin:
    8px 0 2px;

  padding:
    5px 7px;

  border:
    1px solid var(--amber-border);

  border-radius: 5px;

  background:
    var(--amber-soft);

  font-family:
    var(--mono);

  font-size: 8px;

  letter-spacing: 0.07em;

  color: var(--amber);
}


.boundary-badge {
  margin-top: 9px;

  font-family:
    var(--mono);

  font-size: 9px;

  color: var(--red);
}


.blackbox-footer {
  display: grid;

  grid-template-columns:
    1fr 1fr;
}


.blackbox-footer > div {
  display: flex;

  flex-direction: column;

  gap: 4px;
}


.blackbox-footer-label {
  font-family:
    var(--mono);

  font-size: 8px;

  letter-spacing: 0.1em;

  color: var(--muted);
}


.blackbox-footer-value {
  font-family:
    var(--mono);

  font-size: 10px;

  font-weight: 600;
}


.blackbox-footer-value.green {
  color: var(--green);
}


/* =========================================================
   SHARED SECTIONS
========================================================= */

.investigation-section,
.workspace,
.benchmark-section,
.confidence-strip {
  max-width: var(--max-width);

  margin:
    0 auto;

  padding-left: 34px;

  padding-right: 34px;
}


/* =========================================================
   INVESTIGATION SELECTOR
========================================================= */

.investigation-section {
  padding-top: 50px;

  padding-bottom: 72px;

  border-top:
    1px solid var(--line);
}


.section-heading-row h2,
.benchmark-heading h2 {
  margin:
    8px 0 0;

  font-size: 30px;

  letter-spacing: -0.035em;
}


.investigation-grid {
  margin-top: 28px;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 10px;
}


.investigation-card {
  min-height: 140px;

  padding: 18px;

  border:
    1px solid var(--line);

  border-radius: 9px;

  display: grid;

  grid-template-columns:
    46px minmax(0, 1fr) 28px;

  gap: 14px;

  align-items: center;

  text-align: left;

  background:
    rgba(255, 255, 255, 0.01);

  cursor: pointer;

  transition:
    border var(--ease),
    background var(--ease),
    transform var(--ease);
}


.investigation-card:hover {
  border-color:
    var(--line-strong);

  transform:
    translateY(-2px);
}


.investigation-card.active {
  border-color:
    var(--green-border);

  background:
    var(--green-soft);
}


.investigation-number {
  font-family:
    var(--mono);

  font-size: 13px;

  color: var(--muted);
}


.investigation-card.active
.investigation-number {
  color: var(--green);
}


.investigation-card-title {
  margin-bottom: 7px;

  font-size: 16px;

  font-weight: 700;
}


.investigation-card-copy {
  max-width: 470px;

  font-size: 11px;

  line-height: 1.6;

  color: var(--muted);
}


.investigation-arrow {
  font-size: 20px;

  color: var(--muted);
}


.investigation-card.active
.investigation-arrow {
  color: var(--green);
}


/* =========================================================
   WORKSPACE
========================================================= */

.workspace {
  padding-top: 60px;

  padding-bottom: 60px;

  border-top:
    1px solid var(--line);
}


.workspace-header {
  padding-bottom: 26px;

  display: flex;

  justify-content:
    space-between;

  gap: 22px;

  align-items: flex-end;
}


.workspace-header h2 {
  margin:
    6px 0 0;

  font-size: 36px;

  letter-spacing: -0.04em;
}


.workspace-status {
  padding:
    7px 9px;

  border:
    1px solid var(--line);

  border-radius: 5px;

  font-family:
    var(--mono);

  font-size: 9px;

  letter-spacing: 0.08em;
}


.workspace-status.ready {
  color: var(--muted);
}


.workspace-status.running {
  border-color:
    var(--green-border);

  color:
    var(--green);

  background:
    var(--green-soft);
}


.workspace-status.failed {
  border-color:
    var(--red-border);

  color:
    var(--red);

  background:
    var(--red-soft);
}


.workspace-status.safe {
  border-color:
    var(--green-border);

  color:
    var(--green);

  background:
    var(--green-soft);
}


/* =========================================================
   PHASE BLOCKS
========================================================= */

.phase-block {
  padding:
    34px 0;

  display: grid;

  grid-template-columns:
    64px minmax(0, 1fr);

  gap: 20px;

  border-top:
    1px solid var(--line);
}


.phase-index {
  padding-top: 2px;

  font-family:
    var(--mono);

  font-size: 13px;

  color: var(--green);
}


.phase-title {
  margin-top: 6px;

  margin-bottom: 18px;

  font-size: 24px;

  font-weight: 700;

  letter-spacing: -0.03em;
}


/* =========================================================
   DISCOVER
========================================================= */

.prompt-display {
  min-height: 94px;

  padding: 16px;

  border-left:
    2px solid var(--green);

  background:
    linear-gradient(
      90deg,
      var(--green-soft),
      transparent 85%
    );

  font-family:
    var(--mono);

  font-size: 14px;

  line-height: 1.7;
}


.placeholder {
  color: var(--muted);
}


/* =========================================================
   EXECUTION GRAPH
========================================================= */

.execution-graph {
  min-height: 290px;

  padding: 20px;

  border:
    1px solid var(--line);

  border-radius: 9px;

  background:
    linear-gradient(
      rgba(118, 185, 0, 0.02) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(118, 185, 0, 0.02) 1px,
      transparent 1px
    ),
    #090c09;

  background-size:
    30px 30px;

  overflow-x: auto;
}


.execution-graph.empty {
  display: grid;

  place-items: center;
}


.graph-empty-state {
  font-family:
    var(--mono);

  font-size: 10px;

  color: var(--muted);
}


/* =========================================================
   SPLIT REALITY
========================================================= */

.split-reality {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    90px
    minmax(0, 1fr);

  gap: 16px;

  align-items: stretch;
}


.reality-panel {
  min-height: 260px;

  padding: 18px;

  border:
    1px solid var(--line);

  border-radius: 9px;

  background:
    rgba(255, 255, 255, 0.01);

  display: flex;

  flex-direction: column;
}


.reality-response,
.critical-action {
  flex: 1;

  margin-top: 12px;

  margin-bottom: 20px;

  padding: 13px;

  border:
    1px solid var(--line);

  border-radius: 7px;

  font-family:
    var(--mono);

  font-size: 11px;

  line-height: 1.65;

  background:
    #090c09;
}


.verdict {
  font-size: 36px;

  font-weight: 800;

  letter-spacing: -0.04em;
}


.verdict.pass {
  color: var(--green);
}


.verdict.fail {
  color: var(--red);
}


.verdict.neutral {
  color: var(--muted);
}


.verdict-caption {
  margin-top: 4px;

  font-size: 10px;

  color: var(--muted);
}


.reality-divider {
  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;
}


.not-equal {
  font-size: 42px;

  color: var(--green);
}


.not-equal-label {
  margin-top: 8px;

  writing-mode: vertical-rl;

  transform:
    rotate(180deg);

  font-family:
    var(--mono);

  font-size: 8px;

  letter-spacing: 0.1em;

  color: var(--muted);
}


/* =========================================================
   AUTOPSY
========================================================= */

.autopsy-grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 8px;
}


.autopsy-panel {
  min-height: 105px;

  padding: 14px;

  border-top:
    1px solid var(--line-strong);

  border-bottom:
    1px solid var(--line);

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.015),
      transparent
    );
}


.autopsy-value {
  margin-top: 12px;

  overflow-wrap: anywhere;

  font-family:
    var(--mono);

  font-size: 14px;

  font-weight: 600;
}


.minimizer-block {
  margin-top: 26px;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    50px
    minmax(0, 1fr);

  gap: 12px;

  align-items: stretch;
}


.minimizer-column {
  padding: 15px;

  border:
    1px solid var(--line);

  border-radius: 8px;

  background:
    #090c09;
}


.minimizer-column.highlighted {
  border-color:
    var(--green-border);

  background:
    var(--green-soft);
}


.minimizer-text {
  margin-top: 10px;

  font-family:
    var(--mono);

  font-size: 12px;

  line-height: 1.65;
}


.minimizer-arrow {
  display: grid;

  place-items: center;

  color: var(--green);

  font-size: 24px;
}


/* =========================================================
   REPAIR / REPLAY
========================================================= */

.repair-layout {
  display: grid;

  grid-template-columns:
    minmax(280px, 0.82fr)
    minmax(0, 1.18fr);

  gap: 18px;
}


.repair-copy {
  padding: 18px;

  border:
    1px solid var(--green-border);

  border-radius: 9px;

  background:
    var(--green-soft);
}


.repair-title {
  margin-top: 8px;

  margin-bottom: 8px;

  font-size: 24px;

  font-weight: 700;
}


.repair-description {
  font-size: 11px;

  line-height: 1.65;

  color: var(--text-soft);
}


.replay-button {
  width: 100%;

  margin-top: 20px;

  border:
    1px solid var(--green);

  background:
    var(--green);

  color:
    #0a0d08;
}


.replay-comparison {
  min-height: 230px;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    54px
    minmax(0, 1fr);

  align-items: center;
}


.replay-column {
  height: 100%;

  padding: 18px;

  border:
    1px solid var(--line);

  border-radius: 9px;

  display: flex;

  flex-direction: column;

  justify-content: center;
}


.replay-column.before {
  border-color:
    var(--red-border);

  background:
    var(--red-soft);
}


.replay-column.after {
  border-color:
    var(--green-border);

  background:
    var(--green-soft);
}


.replay-status {
  margin-top: 14px;

  margin-bottom: 7px;

  font-size: 38px;

  font-weight: 800;

  letter-spacing: -0.04em;
}


.replay-column.before
.replay-status:not(.neutral) {
  color: var(--red);
}


.replay-column.after
.replay-status:not(.neutral) {
  color: var(--green);
}


.replay-status.neutral {
  color: var(--muted);
}


.replay-detail {
  font-size: 10px;

  color: var(--text-soft);
}


.replay-center-arrow {
  display: grid;

  place-items: center;

  font-size: 26px;

  color: var(--green);
}


/* =========================================================
   REGRESSION
========================================================= */

.regression-shell {
  border:
    1px solid var(--line);

  border-radius: 9px;

  overflow: hidden;
}


.regression-code {
  min-height: 220px;

  margin: 0;

  padding: 18px;

  font-family:
    var(--mono);

  font-size: 11px;

  line-height: 1.7;

  color: var(--text-soft);

  background:
    #090c09;

  overflow-x: auto;
}


.save-regression-button {
  width: 100%;

  min-height: 44px;

  border: 0;

  border-top:
    1px solid var(--line);

  border-radius: 0;

  background:
    rgba(255, 255, 255, 0.012);
}


.save-regression-button:hover {
  background:
    var(--green-soft);

  color: var(--green);
}


/* =========================================================
   CONFIDENCE STRIP
========================================================= */

.confidence-strip {
  margin-top: 12px;

  margin-bottom: 70px;

  padding-top: 22px;

  padding-bottom: 22px;

  border-top:
    1px solid var(--line);

  border-bottom:
    1px solid var(--line);

  display: grid;

  grid-template-columns:
    1.2fr
    repeat(4, minmax(0, 1fr));

  gap: 10px;

  align-items: center;
}


.confidence-title {
  margin-top: 6px;

  font-size: 20px;

  font-weight: 700;
}


.confidence-item {
  padding-left: 15px;

  border-left:
    1px solid var(--line);
}


.confidence-label {
  margin-bottom: 6px;

  font-size: 9px;

  color: var(--muted);
}


.confidence-value {
  font-family:
    var(--mono);

  font-size: 10px;

  font-weight: 600;
}


.confidence-value.green {
  color: var(--green);
}


.confidence-value.muted {
  color: var(--text-soft);
}


/* =========================================================
   BENCHMARKS
========================================================= */

.benchmark-section {
  padding-bottom: 80px;
}


.benchmark-grid {
  margin-top: 28px;

  display: grid;

  grid-template-columns:
    repeat(6, minmax(0, 1fr));

  border-top:
    1px solid var(--line);

  border-bottom:
    1px solid var(--line);
}


.benchmark-item {
  min-height: 145px;

  padding: 20px;

  border-right:
    1px solid var(--line);

  display: flex;

  flex-direction: column;

  justify-content: center;
}


.benchmark-item:last-child {
  border-right: 0;
}


.benchmark-value {
  margin-bottom: 7px;

  font-size: 32px;

  font-weight: 800;

  letter-spacing: -0.04em;

  color: var(--green);
}


.benchmark-label {
  font-size: 10px;

  line-height: 1.5;

  color: var(--muted);
}


/* =========================================================
   FOOTER
========================================================= */

.footer {
  min-height: 78px;

  padding:
    0 34px;

  border-top:
    1px solid var(--line);

  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 20px;

  font-family:
    var(--mono);

  font-size: 9px;

  letter-spacing: 0.06em;

  color: var(--muted);
}


/* =========================================================
   LOADING OVERLAY
========================================================= */

.loading-overlay {
  position: fixed;

  inset: 0;

  z-index: 300;

  display: none;

  place-items: center;

  background:
    rgba(4, 5, 4, 0.86);

  backdrop-filter:
    blur(12px);

  opacity: 0;

  pointer-events: none;

  transition:
    opacity 220ms ease;
}


.loading-overlay.active {
  display: grid;
  opacity: 1;

  pointer-events: auto;
}


.loading-core {
  width:
    min(
      460px,
      calc(100vw - 34px)
    );

  text-align: center;
}


.loading-number {
  margin-bottom: 10px;

  font-family:
    var(--mono);

  font-size: 11px;

  color: var(--green);
}


.loading-stage {
  margin-bottom: 8px;

  font-size: 34px;

  font-weight: 800;

  letter-spacing: -0.04em;
}


.loading-message {
  margin-bottom: 20px;

  font-family:
    var(--mono);

  font-size: 10px;

  color: var(--muted);
}


.loading-progress {
  width: 100%;

  height: 2px;

  background:
    var(--line);
}


.loading-progress-bar {
  width: 0%;

  height: 100%;

  background:
    var(--green);

  box-shadow:
    0 0 14px rgba(118, 185, 0, 0.5);

  transition:
    width 500ms ease;
}


/* =========================================================
   ANIMATIONS
========================================================= */

.reveal {
  animation:
    reveal 300ms ease both;
}


@keyframes reveal {

  from {
    opacity: 0;

    transform:
      translateY(5px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}


.graph-pulse {
  animation:
    graphPulse 900ms ease;
}


@keyframes graphPulse {

  0% {
    box-shadow:
      0 0 0 0 rgba(118, 185, 0, 0);
  }

  40% {
    box-shadow:
      0 0 0 6px rgba(118, 185, 0, 0.08);
  }

  100% {
    box-shadow:
      0 0 0 0 rgba(118, 185, 0, 0);
  }

}


/* =========================================================
   LIVE EXECUTION GRAPH
========================================================= */

.live-graph {
  min-width: 760px;

  min-height: 250px;

  display: flex;

  align-items: center;

  justify-content:
    flex-start;

  gap: 0;

  padding:
    35px 22px;
}


.live-node {
  min-width: 128px;

  min-height: 78px;

  padding: 12px;

  border:
    1px solid var(--line-strong);

  border-radius: 8px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  background:
    #0b0f0b;

  position: relative;
}


.live-node.warning {
  border-color:
    var(--amber-border);
}


.live-node.danger {
  border-color:
    var(--red-border);

  background:
    var(--red-soft);

  box-shadow:
    0 0 30px rgba(255, 93, 98, 0.05);
}


.live-node-label {
  margin-bottom: 6px;

  font-family:
    var(--mono);

  font-size: 8px;

  letter-spacing: 0.1em;

  color: var(--muted);
}


.live-node-value {
  max-width: 160px;

  text-align: center;

  overflow-wrap: anywhere;

  font-family:
    var(--mono);

  font-size: 11px;

  font-weight: 600;
}


.live-node.danger
.live-node-value {
  color: var(--red);
}


.live-edge {
  width: 100px;

  height: 1px;

  position: relative;

  background:
    var(--line-strong);

  flex:
    0 0 100px;
}


.live-edge::after {
  content: "▶";

  position: absolute;

  right: -4px;

  top: 50%;

  transform:
    translateY(-50%);

  font-size: 7px;

  color: var(--muted);
}


.live-edge span {
  position: absolute;

  top: -18px;

  left: 50%;

  transform:
    translateX(-50%);

  white-space: nowrap;

  font-family:
    var(--mono);

  font-size: 8px;

  color: var(--muted);
}


.live-edge.warning {
  background:
    var(--amber);
}


.live-edge.warning::after {
  color: var(--amber);
}


.live-edge.danger {
  background:
    var(--red);
}


.live-edge.danger::after {
  color: var(--red);
}


.live-warning {
  margin-left: 8px;

  margin-right: 8px;

  padding:
    5px 7px;

  border:
    1px solid var(--amber-border);

  border-radius: 5px;

  background:
    var(--amber-soft);

  font-family:
    var(--mono);

  font-size: 8px;

  white-space: nowrap;

  color: var(--amber);
}


/* =========================================================
   REPLAY STATUS COLORS
========================================================= */

.replay-column.after
.replay-status {
  color: var(--green);
}


.replay-column.before
.replay-status {
  color: var(--red);
}


/* =========================================================
   REGRESSION SUITE
========================================================= */

.regression-suite-section {
  max-width:
    var(--max-width);

  margin:
    0 auto;

  padding:
    54px 34px 80px;

  border-top:
    1px solid var(--line);
}


.regression-suite-section
.section-heading-row {
  display: flex;

  align-items: flex-end;

  justify-content:
    space-between;

  gap: 24px;
}


.regression-suite-section
.section-heading-row h2 {
  margin:
    8px 0 0;

  font-size: 30px;

  letter-spacing:
    -0.035em;
}


.regression-suite-description {
  max-width: 760px;

  margin:
    12px 0 0;

  font-size: 12px;

  line-height: 1.7;

  color:
    var(--muted);
}


.regression-suite-count {
  flex:
    0 0 auto;

  padding:
    8px 10px;

  border:
    1px solid var(--green-border);

  border-radius: 6px;

  background:
    var(--green-soft);

  font-family:
    var(--mono);

  font-size: 9px;

  font-weight: 700;

  letter-spacing:
    0.08em;

  color:
    var(--green);
}


/* =========================================================
   REGRESSION SUITE LIST
========================================================= */

.regression-suite-list {
  margin-top: 28px;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 14px;
}


.regression-suite-empty {
  grid-column:
    1 / -1;

  min-height: 150px;

  padding: 24px;

  border:
    1px dashed var(--line-strong);

  border-radius: 10px;

  display: grid;

  place-items: center;

  background:
    rgba(255, 255, 255, 0.008);

  font-family:
    var(--mono);

  font-size: 10px;

  line-height: 1.6;

  color:
    var(--muted);
}


/* =========================================================
   REGRESSION CARD
========================================================= */

.regression-suite-card {
  min-width: 0;

  padding: 18px;

  border:
    1px solid var(--line);

  border-radius: 10px;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.016),
      rgba(255, 255, 255, 0.004)
    ),
    #090c09;

  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.16);

  transition:
    transform var(--ease),
    border-color var(--ease),
    background var(--ease);
}


.regression-suite-card:hover {
  transform:
    translateY(-2px);

  border-color:
    var(--green-border);

  background:
    linear-gradient(
      180deg,
      rgba(118, 185, 0, 0.055),
      rgba(255, 255, 255, 0.004)
    ),
    #090c09;
}


.regression-card-header {
  padding-bottom: 15px;

  border-bottom:
    1px solid var(--line);

  display: flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap: 16px;
}


.regression-card-id {
  margin-bottom: 7px;

  font-family:
    var(--mono);

  font-size: 10px;

  font-weight: 700;

  letter-spacing:
    0.1em;

  color:
    var(--green);
}


.regression-card-class {
  overflow-wrap:
    anywhere;

  font-family:
    var(--mono);

  font-size: 12px;

  font-weight: 600;

  line-height: 1.5;

  color:
    var(--text);
}


.regression-card-status {
  flex:
    0 0 auto;

  padding:
    6px 8px;

  border:
    1px solid var(--green-border);

  border-radius: 5px;

  background:
    var(--green-soft);

  font-family:
    var(--mono);

  font-size: 8px;

  font-weight: 700;

  letter-spacing:
    0.08em;

  color:
    var(--green);
}


.regression-card-trigger {
  margin-top: 16px;

  padding: 14px;

  border-left:
    2px solid var(--green);

  background:
    linear-gradient(
      90deg,
      var(--green-soft),
      transparent 88%
    );
}


.regression-card-label {
  margin-bottom: 7px;

  font-family:
    var(--mono);

  font-size: 8px;

  font-weight: 600;

  letter-spacing:
    0.12em;

  color:
    var(--muted);
}


.regression-card-value {
  overflow-wrap:
    anywhere;

  font-family:
    var(--mono);

  font-size: 10px;

  line-height: 1.65;

  color:
    var(--text-soft);
}


.regression-card-grid {
  margin-top: 16px;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  border-top:
    1px solid var(--line);

  border-left:
    1px solid var(--line);
}


.regression-card-grid > div {
  min-width: 0;

  padding: 13px;

  border-right:
    1px solid var(--line);

  border-bottom:
    1px solid var(--line);
}


.regression-card-grid
.danger-text {
  color: var(--red);
}


.regression-card-grid
.safe-text {
  color: var(--green);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1180px) {

  .topbar {
    grid-template-columns:
      1fr auto;
  }


  .top-nav {
    display: none;
  }


  .hero {
    grid-template-columns:
      1fr;
  }


  .hero-visual {
    max-width: 720px;
  }


  .benchmark-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }


  .benchmark-item:nth-child(3n) {
    border-right: 0;
  }


  .confidence-strip {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .confidence-intro {
    grid-column:
      1 / -1;
  }

}


@media (max-width: 900px) {

  .topbar {
    padding:
      12px 18px;
  }


  .runtime-strip {
    display: none;
  }


  .hero,
  .investigation-section,
  .workspace,
  .benchmark-section,
  .confidence-strip {
    padding-left: 18px;

    padding-right: 18px;
  }


  .hero {
    padding-top: 62px;
  }


  .investigation-grid {
    grid-template-columns:
      1fr;
  }


  .split-reality {
    grid-template-columns:
      1fr;
  }


  .reality-divider {
    min-height: 80px;
  }


  .not-equal-label {
    writing-mode:
      horizontal-tb;

    transform: none;
  }


  .autopsy-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .repair-layout {
    grid-template-columns:
      1fr;
  }


  .benchmark-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .benchmark-item:nth-child(3n) {
    border-right:
      1px solid var(--line);
  }


  .benchmark-item:nth-child(2n) {
    border-right: 0;
  }


  .regression-suite-section {
    padding-left: 18px;

    padding-right: 18px;
  }


  .regression-suite-list {
    grid-template-columns:
      1fr;
  }

}


@media (max-width: 620px) {

  .brand-tagline {
    display: none;
  }


  .hero-copy h1 {
    font-size: 46px;
  }


  .hero-actions {
    flex-direction:
      column;
  }


  .primary-cta,
  .secondary-cta {
    width: 100%;
  }


  .hero-proof {
    gap: 12px;
  }


  .proof-divider {
    display: none;
  }


  .blackbox-shell {
    min-height: 470px;
  }


  .phase-block {
    grid-template-columns:
      1fr;
  }


  .phase-index {
    margin-bottom: -8px;
  }


  .minimizer-block {
    grid-template-columns:
      1fr;
  }


  .minimizer-arrow {
    transform:
      rotate(90deg);
  }


  .autopsy-grid {
    grid-template-columns:
      1fr;
  }


  .replay-comparison {
    grid-template-columns:
      1fr;

    gap: 10px;
  }


  .replay-center-arrow {
    transform:
      rotate(90deg);
  }


  .confidence-strip {
    grid-template-columns:
      1fr;
  }


  .confidence-item {
    padding:
      12px 0;

    border-left: 0;

    border-top:
      1px solid var(--line);
  }


  .benchmark-grid {
    grid-template-columns:
      1fr;
  }


  .benchmark-item {
    border-right: 0;

    border-bottom:
      1px solid var(--line);
  }


  .footer {
    padding: 18px;

    flex-direction:
      column;

    align-items:
      flex-start;
  }


  .regression-suite-section {
    padding-top: 44px;
  }


  .regression-suite-section
  .section-heading-row {
    flex-direction:
      column;

    align-items:
      flex-start;
  }


  .regression-suite-count {
    align-self:
      flex-start;
  }


  .regression-card-grid {
    grid-template-columns:
      1fr;
  }


  .regression-card-header {
    flex-direction:
      column;
  }

}
/* Domain context shares the existing forensic palette. */
[hidden] { display: none !important; }
.domain-panel { margin: 28px 0 0; padding: 20px; border: 1px solid var(--border); background: rgba(10,14,12,.9); }
.domain-selector { display: flex; gap: 10px; flex-wrap: wrap; }
.domain-button { padding: 12px 18px; border: 1px solid #343c38; color: #b9c2bc; background: transparent; font: inherit; cursor: pointer; }
.domain-button.active { border-color: var(--green); color: var(--green); background: var(--green-soft); }
.domain-button:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
#domainContext { font-size: 13px; color: #a7b4ad; margin: 14px 0 0; }
.event-snapshot { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 16px; padding-top: 16px; border-top: 1px solid #28322c; font: 12px/1.8 "JetBrains Mono", monospace; color: #a7b4ad; }
.warning-text { color: var(--amber, #edba65); }
.evidence-domains { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.evidence-card { border: 1px solid #28322c; padding: 22px; background: rgba(10,14,12,.85); font-size: 14px; line-height: 1.7; }
.evidence-card h3 { color: var(--green); margin: 0 0 12px; }
.evidence-card strong { color: #e4eee8; }
.supporting-evidence { margin-top: 20px; }
.evidence-limitations { margin-top: 20px; }
.replay-evidence { margin-top: 14px; font-size: 12px; text-align: left; }
.replay-evidence summary { cursor: pointer; color: var(--green); }
.replay-evidence pre { max-height: 320px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; color: #b9c2bc; }
@media (max-width: 900px) { .event-snapshot, .evidence-domains { grid-template-columns: 1fr; } }

/* Enterprise presentation: layout and typography only. */
:root {
  --bg: #101419; --bg-elevated: #161c23; --bg-soft: #1b222b; --panel: #161c23;
  --line: #303946; --line-strong: #465263; --text: #e8edf3; --text-soft: #bcc6d2; --muted: #9aa8b9;
  --green: #7bbca0; --green-bright: #7bbca0; --green-soft: #1a2d27; --green-border: #38594c;
  --red: #ed9499; --red-soft: #302024; --red-border: #6e3f49;
  --amber: #dfba79; --amber-soft: #30291e; --amber-border: #695735;
  --accent: #98b6dd; --mono: ui-monospace, 'Cascadia Code', Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; --max-width: 1440px;
}
body { background: var(--bg); font-size: 14px; line-height: 1.55; }
* { box-shadow: none !important; text-shadow: none !important; }
[hidden] { display: none !important; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }
button, summary { touch-action: manipulation; }
button:focus-visible, summary:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
button:hover { transform: none !important; }
.reveal, .reveal.visible { opacity: 1; transform: none; }
.graph-pulse, .runtime-dot, .brand-symbol-inner { animation: none; }
.topbar { min-height: 66px; padding: 12px 28px; grid-template-columns: auto auto 1fr auto; gap: 24px; background: #131920; backdrop-filter: none; }
.brand-symbol, .brand-tagline { display: none; }
.brand-name { font: 600 17px/1.2 var(--sans); letter-spacing: -.02em; white-space: nowrap; }
.top-nav { justify-content: center; gap: 18px; }
.nav-item { padding: 8px 0; font: 500 13px var(--sans); letter-spacing: 0; color: var(--text-soft); background: none; border-radius: 0; }
.nav-item.active { color: var(--text); border-bottom-color: var(--accent); }
.runtime-strip { gap: 10px; }
.runtime-item { font: 12px var(--sans); letter-spacing: 0; padding: 0; border: 0; background: none; color: var(--muted); }
.runtime-dot { width: 6px; height: 6px; background: var(--green); }
.domain-selector { display: flex; gap: 0; flex-wrap: nowrap; border: 1px solid var(--line-strong); border-radius: 4px; overflow: hidden; }
.domain-button { padding: 7px 12px; font: 500 12px var(--sans); border: 0; border-radius: 0; color: var(--text-soft); white-space: nowrap; }
.domain-button + .domain-button { border-left: 1px solid var(--line-strong); }
.domain-button.active { color: var(--text); background: #2b394a; border-color: var(--line-strong); }
.domain-panel { max-width: var(--max-width); margin: 0 auto; padding: 14px 32px 0; border: 0; background: none; }
#domainContext { margin: 0; color: var(--muted); font-size: 12px; }
.event-snapshot { margin-top: 12px; padding: 12px 16px; gap: 20px; border: 1px solid var(--line); background: var(--bg-elevated); font: 12px/1.6 var(--sans); color: var(--text-soft); grid-template-columns: 1fr 1fr; }
.event-snapshot strong, .warning-text { color: var(--text); font-weight: 500; }
.hero { max-width: var(--max-width); margin: 0 auto; padding: 28px 32px 32px; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.hero-copy { max-width: 860px; }
.hero-copy h1 { font-size: 32px; line-height: 1.2; letter-spacing: -.035em; margin: 8px 0 10px; max-width: 760px; }
.hero-description { margin: 0; font-size: 16px; line-height: 1.5; color: var(--text-soft); max-width: none; }
.hero-kicker { display: none; }
.hero-actions { margin-top: 18px; gap: 16px; }
.hero-visual, .hero-proof, .cta-icon { display: none; }
.primary-cta, .secondary-cta, .replay-button, .save-regression-button { min-height: 36px; padding: 9px 14px; border-radius: 4px; letter-spacing: 0; font: 500 13px var(--sans); }
.primary-cta { background: #b0c5e1; color: #142030; border: 1px solid #b0c5e1; }
.primary-cta:hover { background: #c2d3e9; }
.secondary-cta { background: none; border: 1px solid var(--line-strong); color: var(--text-soft); }
#viewBlackBoxButton { border: 0; padding-left: 0; color: var(--accent); }
#exportReportButton { position: static; display: block; max-width: 250px; margin: 0 32px 24px; }
.section-kicker, .phase-heading, .reality-label, .autopsy-label, .minimizer-label, .repair-label, .replay-column-label, .regression-card-label, .node-label, .live-node-label, .confidence-label { font: 500 12px/1.5 var(--sans); letter-spacing: 0; color: var(--muted); text-transform: none; }
.section-heading-row h2, .benchmark-heading h2, .workspace-header h2 { font-size: 22px; line-height: 1.3; letter-spacing: -.02em; margin: 4px 0 0; }
.investigation-section { padding: 22px 32px 28px; border-top: 1px solid var(--line); }
.investigation-grid { margin-top: 16px; gap: 8px; grid-template-columns: repeat(2, minmax(0,1fr)); }
.investigation-card { min-height: 92px; padding: 14px 16px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px 14px; background: var(--bg-elevated); border: 1px solid var(--line); border-radius: 4px; }
.investigation-card.active { background: #1d2733; border-color: #758fae; }
.investigation-card:hover { border-color: #758fae; background: #1d2733; }
.investigation-number { display: none; }
.investigation-card-body { min-width: 0; }
.investigation-card-title { font: 600 14px var(--sans); color: var(--text); margin: 0 0 4px; }
.investigation-card-copy { font: 12px/1.45 var(--sans); color: var(--text-soft); }
.investigation-meta { grid-column: 1; display: flex; gap: 16px; font-size: 11px; color: var(--muted); }
.investigation-arrow { grid-column: 2; grid-row: 1/3; color: var(--accent); font-size: 18px; }
.workspace { padding: 0 32px 24px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); column-gap: 20px; }
.workspace-header { grid-column: 1/-1; padding: 18px 20px; margin: 0; background: #1d2733; border: 1px solid var(--line-strong); border-bottom: 0; }
.workspace-status { font: 500 12px var(--sans); border-radius: 3px; padding: 5px 9px; }
.workspace-status.ready { color: var(--text-soft); background: var(--bg-soft); border: 1px solid var(--line); }
.phase-block { grid-column: 1/-1; margin: 0; padding: 20px; border: 1px solid var(--line); border-top: 0; background: var(--bg-elevated); display: grid; grid-template-columns: 25px minmax(0,1fr); gap: 12px; }
.trace-phase { grid-column: 1; border-right: 0; }
.verdict-phase { grid-column: 2; }
.phase-index { font: 12px var(--mono); color: var(--muted); padding-top: 2px; }
.phase-content { min-width: 0; }
.phase-title { font: 600 15px var(--sans); margin: 4px 0 12px; }
.prompt-display, .reality-response, .critical-action, .minimizer-text, .repair-description { font: 13px/1.65 var(--sans); overflow-wrap: anywhere; }
.prompt-display { padding: 12px; border: 1px solid var(--line); border-radius: 3px; background: var(--bg); }
.execution-graph { min-height: 100px; padding: 10px 0; border: 0; border-radius: 0; background: none; overflow: visible; }
.live-graph { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0 0 0 15px; border-left: 1px solid var(--line-strong); }
.live-node { width: auto; min-width: 0; max-width: none; padding: 10px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 3px; position: relative; }
.live-node::before { content: ''; position: absolute; width: 7px; height: 7px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--bg-elevated); left: -20px; top: 15px; }
.live-node.danger { border-color: var(--red-border); background: var(--red-soft); }
.live-node.warning { border-color: var(--line-strong); background: var(--bg); }
.live-node-value { font: 12px/1.6 var(--mono); white-space: normal; overflow-wrap: anywhere; color: var(--text); }
.live-edge { width: auto; height: auto; min-height: 28px; margin: 0; background: none; padding: 5px 12px; color: var(--muted); }
.live-edge::after { display: none; }
.live-edge span { position: static; font: 11px/1.5 var(--mono); background: none; color: inherit; white-space: normal; }
.live-edge.danger { color: var(--red); background: none; }
.live-warning { margin: 6px 0; padding: 4px 0; border: 0; color: var(--amber); font: 11px var(--sans); background: none; }
.graph-empty-state { font: 13px/1.5 var(--sans); color: var(--muted); padding: 16px 0; }
.split-reality { display: grid; grid-template-columns: 1fr; gap: 12px; }
.reality-panel { padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); background: none; border-radius: 0; }
.reality-divider { display: none; }
.verdict { font: 600 18px var(--sans); margin: 10px 0 4px; }
.verdict-caption { font: 11px var(--sans); color: var(--muted); }
.autopsy-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.autopsy-panel { padding: 10px 0; background: none; border: 0; border-radius: 0; }
.autopsy-value { font: 12px/1.5 var(--mono); overflow-wrap: anywhere; }
.minimizer-block { padding: 12px 0; margin-top: 12px; border-top: 1px solid var(--line); gap: 16px; }
.minimizer-column, .minimizer-column.highlighted { padding: 12px; border: 1px solid var(--line); border-radius: 3px; background: var(--bg); }
.repair-layout { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; }
.repair-title { font: 600 16px var(--sans); color: var(--text); }
.replay-button, .save-regression-button { color: var(--accent); background: var(--bg-soft); border: 1px solid var(--line-strong); }
.replay-column, .replay-column.before, .replay-column.after { border: 1px solid var(--line); border-radius: 3px; background: var(--bg); padding: 14px; min-width: 0; }
.replay-status { font: 600 20px var(--sans); }
.replay-detail { font: 12px/1.6 var(--sans); }
.regression-code { font: 12px/1.6 var(--mono); padding: 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 3px; white-space: pre-wrap; overflow-wrap: anywhere; }
.confidence-strip { display: grid; grid-template-columns: 1.2fr repeat(4,1fr); margin: 0 auto 28px; padding: 16px 32px; gap: 20px; background: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.confidence-strip .confidence-item:nth-child(2) { display: none; }
.confidence-title { font: 600 16px var(--sans); }
.confidence-value { font: 500 12px var(--sans); margin-top: 6px; }
.regression-suite-section { max-width: var(--max-width); padding: 0 32px 32px; margin: 0 auto; }
.regression-suite-description { font: 12px/1.65 var(--sans); color: var(--muted); margin: 10px 0; }
.regression-suite-count { font: 12px var(--sans); padding: 0; border: 0; background: none; color: var(--muted); }
.regression-suite-list { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 18px; }
.regression-suite-card { background: var(--bg-elevated); padding: 18px 20px; border: 1px solid var(--line); border-radius: 0; margin-top: -1px; }
.regression-suite-card:hover { background: var(--bg-elevated); border-color: var(--line); }
.regression-card-header { margin-bottom: 12px; }
.regression-card-id { font: 600 14px var(--mono); color: var(--text); }
.regression-card-id .regression-card-label { display: inline-block; margin-left: 12px; }
.regression-card-class { font: 12px var(--mono); color: var(--text-soft); margin-top: 4px; }
.regression-card-status { background: none; border: 0; font: 500 12px var(--sans); color: var(--text-soft); }
.regression-card-trigger { padding: 0; background: none; border: 0; margin-bottom: 12px; }
.regression-card-value { font: 12px/1.6 var(--sans); overflow-wrap: anywhere; }
.regression-card-grid { grid-template-columns: 1.1fr 1.2fr 1.2fr 1fr; gap: 20px; }
.regression-card-grid > div { padding: 0; border: 0; background: none; }
.regression-rerun-result { font: 12px/1.6 var(--sans) !important; }
.benchmark-section { padding: 24px 32px; border-top: 1px solid var(--line); }
.evidence-domains { gap: 0; margin-top: 16px; border: 1px solid var(--line); }
.evidence-card { background: var(--bg-elevated); padding: 18px 20px; border: 0; font: 13px/1.65 var(--sans); }
.evidence-card + .evidence-card { border-left: 1px solid var(--line); }
.evidence-card h3 { font: 600 15px var(--sans); color: var(--text); margin: 0 0 10px; }
.evidence-card p { padding: 8px 0; margin: 0; border-bottom: 1px solid var(--line); }
.evidence-card p:last-child { border-bottom: 0; }
.evidence-card strong { color: var(--text); font-variant-numeric: tabular-nums; }
.supporting-evidence { margin-top: 16px; border: 1px solid var(--line); }
.evaluation-subheading { padding-top: 18px; margin-top: 8px !important; }
.footer { padding: 20px 32px; color: var(--muted); font: 12px var(--sans); border-top: 1px solid var(--line); }
.loading-overlay { background: rgba(16,20,25,.96); backdrop-filter: none; }
.loading-number { font: 32px var(--mono); color: var(--muted); }
.loading-stage { font: 600 16px var(--sans); color: var(--text); letter-spacing: 0; }
.loading-progress-bar { background: var(--accent); }
pre, .replay-evidence { max-width: 100%; }
@media (max-width: 1280px) {
  .topbar { grid-template-columns: auto 1fr auto; gap: 16px; }
  .top-nav { grid-row: 2; grid-column: 1/-1; justify-content: flex-start; }
  .domain-selector { justify-self: center; }
}
@media (max-width: 1024px) {
  .workspace { grid-template-columns: 1fr; }
  .trace-phase, .verdict-phase { grid-column: 1/-1; border-right: 1px solid var(--line); }
  .split-reality { grid-template-columns: 1fr 1fr; }
  .hero-copy h1 { font-size: 29px; }
  .autopsy-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .repair-layout { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .topbar { padding: 12px 20px; gap: 12px; }
  .runtime-strip { font-size: 11px; }
  .runtime-item:first-child { display: none; }
  .hero, .domain-panel, .workspace, .investigation-section, .regression-suite-section, .benchmark-section { padding-left: 20px; padding-right: 20px; }
  .investigation-grid { grid-template-columns: 1fr; }
  .confidence-strip { padding: 16px 20px; gap: 14px; grid-template-columns: repeat(4,1fr); }
  .confidence-intro { grid-column: 1/-1; }
  .regression-card-grid { grid-template-columns: 1fr 1fr; }
  .event-snapshot, .evidence-domains { grid-template-columns: 1fr; }
  .evidence-card + .evidence-card { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 620px) {
  .topbar { grid-template-columns: 1fr auto; }
  .domain-selector { grid-row: 2; grid-column: 1/-1; justify-self: stretch; }
  .domain-button { flex: 1; }
  .top-nav { grid-row: 3; }
  .split-reality, .autopsy-grid { grid-template-columns: 1fr; }
  .hero-copy h1 { font-size: 26px; }
  .phase-block { grid-template-columns: 1fr; padding: 16px; }
  .phase-index { display: none; }
  .minimizer-block { display: grid; grid-template-columns: 1fr; }
  .minimizer-arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
.trace-metadata { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 3px 12px; margin: 10px 0 0; font-size: 11px; border-top: 1px solid var(--line); padding-top: 8px; }
.trace-metadata dt { color: var(--muted); }
.trace-metadata dd { margin: 0; font-family: var(--mono); overflow-wrap: anywhere; }
.regression-card-last-run { font: 11px/1.5 var(--sans); color: var(--muted); margin: 0 0 12px; }
.top-nav { display: flex; }
.loading-progress-bar { transition: width .2s linear; }
.app { overflow-x: clip; }
.live-graph { min-width: 0; min-height: 0; width: 100%; }
.live-node { align-items: stretch; justify-content: flex-start; min-height: 0; }
.live-node-value { max-width: none; text-align: left; }
.live-edge { flex: none; }
.reality-panel { min-height: 0; }
.reality-response, .critical-action { background: var(--bg); border-radius: 3px; margin-bottom: 10px; }
.critical-action { font-family: var(--mono); font-size: 12px; }
.nav-item.active { background: transparent; color: var(--accent); }
.regression-rerun-button { border-color: var(--line-strong) !important; }
.domain-button:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }

/* Infrastructure attribution, kept within existing header and evidence surfaces. */
.runtime-item.inference-label { display: grid; gap: 3px; min-width: 0; }
.inference-caption { font-size: 10px; color: var(--muted); }
.inference-model { font-size: 12px; line-height: 1.4; color: var(--text-soft); }
.infrastructure-note { color: var(--muted); font-size: 12px; }
@media (max-width: 900px) { .inference-label { max-width: 180px; } .inference-model { white-space: normal; } }

/* Final judge-facing refinement: existing layout and semantic status labels stay intact. */
:root {
  --bg: #0b0f14; --bg-elevated: #11161d; --bg-soft: #161c24; --panel: #1b232d;
  --line: #27313d; --line-strong: #3c4a5d;
  --text: #f3f6fa; --text-soft: #c1cad6; --muted: #98a2b3;
  --accent: #73a5ff;
  --green: #50cda0; --green-bright: #50cda0; --green-soft: #152b24; --green-border: #315e4d;
  --amber: #e8b15c; --amber-soft: #2d2519; --amber-border: #72562c;
  --red: #ed8692; --red-soft: #2d1b22; --red-border: #70404b;
}
.topbar { background: var(--bg-elevated); border-bottom-color: var(--line); }
.domain-selector { border-radius: 6px; background: var(--bg); }
.domain-button { min-height: 36px; }
.domain-button.active { background: #1b2c46; color: #c6dcff; }
.domain-button:not(.active):hover { background: var(--bg-soft); color: var(--text); }
.nav-item:hover { color: var(--accent); }
.hero { padding-top: 32px; padding-bottom: 36px; }
.hero-copy h1 { font-weight: 650; line-height: 1.25; }
.primary-cta, .secondary-cta, .replay-button, .save-regression-button { min-height: 40px; border-radius: 6px; font-size: 14px; }
.primary-cta { background: #3164ce; border-color: #3164ce; color: var(--text); font-weight: 600; }
.primary-cta:not(:disabled):hover { background: #2859bd; border-color: #2859bd; }
.secondary-cta:not(:disabled):hover, .replay-button:not(:disabled):hover, .save-regression-button:not(:disabled):hover { background: #1b2a40; border-color: #6385b8; color: #d2e1fa; }
button:disabled { opacity: 1; color: #a5afbf; background: #161c24; border-color: var(--line); }
.nav-item:focus-visible, .domain-button:focus-visible { outline-offset: 2px; }
.domain-button:focus-visible { outline-offset: -3px; }
.investigation-section { padding-top: 24px; padding-bottom: 32px; }
.investigation-grid { gap: 10px; }
.investigation-card { padding: 16px 18px; border-radius: 6px; }
.investigation-card.active { background: #172339; border-color: #6385b8; }
.investigation-card.active .investigation-arrow { color: var(--accent); }
.investigation-card:hover { background: #192437; border-color: #6385b8; }
.investigation-card-title { font-size: 15px; }
.investigation-card-copy { font-size: 13px; line-height: 1.6; }
.investigation-meta { font-size: 12px; gap: 18px; }
.workspace-header { background: var(--bg-soft); border-color: var(--line); border-radius: 6px 6px 0 0; padding: 20px; }
.workspace-status.running { background: var(--amber-soft); border-color: var(--amber-border); color: var(--amber); }
.workspace-status.safe { background: var(--bg); border-color: var(--line-strong); color: var(--text-soft); }
.verdict.pass { color: var(--text-soft); }
.phase-title { font-size: 16px; margin-bottom: 14px; }
.phase-heading, .reality-label, .autopsy-label, .minimizer-label, .repair-label, .replay-column-label, .regression-card-label, .confidence-label { font-size: 13px; }
.prompt-display, .reality-response, .minimizer-text, .repair-description { font-size: 14px; line-height: 1.65; }
.live-node, .prompt-display, .minimizer-column, .minimizer-column.highlighted, .regression-code { border-radius: 5px; }
.live-node-label, .live-edge span, .trace-metadata, .live-warning { font-size: 12px; }
.live-node::before { background: var(--bg); }
.live-node.danger::before { background: var(--red); border-color: var(--red); }
.repair-copy { background: var(--bg-soft); border-color: var(--line); border-radius: 6px; padding: 18px; }
.replay-column, .replay-column.before, .replay-column.after { border-radius: 6px; padding: 18px; }
.replay-status { font-size: 19px; line-height: 1.35; letter-spacing: -.02em; }
.replay-detail, .replay-evidence summary { font-size: 13px; line-height: 1.65; }
.replay-evidence summary { color: var(--accent); }
.replay-center-arrow, .minimizer-arrow { color: var(--muted); }
.confidence-strip { margin-top: 8px; margin-bottom: 36px; padding-top: 20px; padding-bottom: 20px; }
.confidence-value { font-size: 13px; font-weight: 600; }
.warning-text, .confidence-value.muted { color: var(--amber); }
#confidenceRule.muted, #confidenceUtility.muted { color: var(--muted); }
.regression-suite-description { font-size: 13px; }
.regression-suite-card { padding: 20px; }
.regression-card-status { color: var(--text-soft); }
.regression-card-status.verified { color: var(--green); }
.regression-card-status.unverified { color: var(--amber); }
.regression-card-value { font-size: 13px; }
.benchmark-section { padding-top: 28px; padding-bottom: 32px; }
.event-snapshot, .evidence-domains, .supporting-evidence { border-radius: 6px; overflow: hidden; }
.footer, .infrastructure-note { font-size: 13px; line-height: 1.6; }
#exportReportButton { min-height: 36px; font-size: 13px; background: transparent; color: var(--text-soft); }
#exportReportButton:disabled { color: var(--muted); border-color: var(--line); }
@media (max-width: 900px) {
  .topbar { grid-template-columns: auto minmax(0,1fr); }
  .runtime-strip { display: flex; grid-column: 1/-1; grid-row: 3; justify-content: space-between; min-width: 0; }
  .runtime-item:first-child { display: flex; }
  .runtime-item.inference-label { max-width: none; }
}
@media (max-width: 768px) {
  .investigation-card { padding: 14px 16px; }
  .hero { padding-top: 24px; padding-bottom: 28px; }
  .confidence-strip { gap: 16px; }
}

/* Judge-facing state communication; no evaluation semantics changed. */
.evidence-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin: 20px 0 10px; }
.evidence-summary article { padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 5px; }
.evidence-summary strong { display:block; font-size: 26px; font-weight:600; color:var(--text); }
.evidence-summary span, .evidence-summary-scope { font-size:12px; color:var(--muted); line-height:1.6; }
.evidence-summary-scope { margin-bottom:20px; }
.saved-verification { text-align:right; }
.regression-rerun-result { font-family:var(--sans) !important; font-size:13px !important; }
.workspace.is-idle .phase-block:not(.discover-phase) { padding-top:16px; padding-bottom:16px; }
.workspace.is-idle .phase-block:not(.discover-phase) .phase-heading,
.workspace.is-idle .phase-block:not(.discover-phase) .phase-title { color:var(--muted); }
.workspace.is-idle .trace-phase .phase-content > :not(.phase-heading):not(.phase-title):not(.phase-note),
.workspace.is-idle .verdict-phase .phase-content > :not(.phase-heading):not(.phase-title):not(.phase-note),
.workspace.is-idle .localize-phase .phase-content > :not(.phase-heading):not(.phase-title):not(.phase-note),
.workspace.is-idle .replay-comparison,
.workspace.is-idle .repair-label,
.workspace.is-idle .repair-title,
.workspace.is-idle .regression-code { display:none; }
.workspace.is-idle .repair-layout { grid-template-columns:1fr; }
.confidence-strip.is-idle .confidence-item { display:none; }
.loading-number { font:12px var(--sans); letter-spacing:.08em; }
.loading-message,.loading-includes,.loading-expectation,.loading-elapsed { font:13px/1.7 var(--sans); color:var(--muted); }
.loading-includes { margin:18px 0 10px; }
.loading-elapsed { font-family:var(--mono); }
.loading-progress { overflow:hidden; margin-top:20px; }
.loading-progress-bar { width:30%; transition:none; animation:indeterminate-workflow 2s ease-in-out infinite alternate; }
@keyframes indeterminate-workflow { from { transform:translateX(-100%); } to { transform:translateX(330%); } }
@media (prefers-reduced-motion:reduce) { .loading-progress-bar { animation:none; width:100%; opacity:.5; } }
.runtime-strip .inference-model { font-size:11px; color:var(--muted); }
@media (max-width:1024px) { .evidence-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:500px) { .evidence-summary { grid-template-columns:1fr; } }

#benchmarkSection { scroll-margin-top:90px; }
@media (max-width:900px) { #benchmarkSection { scroll-margin-top:175px; } }

/* Visual review refinement: layered SaaS surfaces and human-readable hierarchy. */
:root { --bg:#0b1018; --bg-elevated:#131b27; --bg-soft:#192333; --panel:#182231; --line:#2a3545; --line-strong:#3b4b61; --text:#f1f5fa; --text-soft:#c2cbd8; --muted:#a0adbf; --accent:#8bb5ff; }
body { background:var(--bg); font-size:15px; }
.topbar { background:#111923; padding:16px 32px; border-bottom-color:var(--line); }
.brand-name { font-size:19px; font-weight:650; }
.nav-item { font-size:14px; }
.domain-selector { padding:3px; gap:3px; border-radius:9px; background:#0c131d; border-color:var(--line); overflow:visible; }
.domain-button { border-radius:6px; padding:8px 13px; font-size:12px; }
.domain-button + .domain-button { border-left:0; }
.domain-button.active { background:#223b60; color:#e9f1ff; }
.domain-panel { padding-top:22px; }
#domainContext { font-size:13px; }
.hero { padding-top:42px; padding-bottom:44px; }
.hero-copy { max-width:960px; }
.hero-copy h1 { font-size:46px; line-height:1.12; font-weight:650; letter-spacing:-.04em; max-width:900px; margin:0 0 18px; }
.hero-description { font-size:18px; line-height:1.65; max-width:810px; }
#domainLimitations { max-width:780px; font-size:13px; margin-top:16px; color:var(--muted); }
.hero-actions { margin-top:24px; gap:18px; }
.primary-cta { min-height:46px; padding:12px 20px; font-size:15px; font-weight:600; border-radius:8px; background:#3769d8; border-color:#4a79df; }
.primary-cta:hover { background:#315fc9; border-color:#8bb5ff; }
.secondary-cta,.replay-button,.save-regression-button { border-radius:7px; min-height:42px; font-size:14px; }
#viewBlackBoxButton { color:var(--text-soft); }
.section-heading-row h2,.benchmark-heading h2,.workspace-header h2 { font-size:26px; font-weight:600; }
.section-kicker { font-size:13px; margin-bottom:8px; }
.investigation-section { padding-top:30px; padding-bottom:34px; border-top-color:#202c3b; }
.investigation-grid { gap:14px; margin-top:20px; }
.investigation-card { min-height:122px; padding:20px 22px; border-radius:10px; background:#141e2b; border-color:#2a3545; }
.investigation-card:hover { background:#19283c; border-color:#536c91; }
.investigation-card.active { background:#1b2c45; border-color:#6c99df; }
.investigation-card-title { font-size:17px; font-weight:600; margin-bottom:8px; }
.investigation-card-copy { font-size:14px; line-height:1.65; }
.investigation-meta { margin-top:10px; font:12px/1.6 var(--sans); }
.investigation-arrow { font-size:22px; color:var(--accent); }
.workspace { padding-top:12px; row-gap:0; }
.workspace-header { padding:24px; background:#1a2638; border-radius:10px 10px 0 0; }
.phase-block { padding:24px; background:#131c29; border-color:#263448; gap:16px; }
.phase-index { font:600 12px/1.7 var(--sans); color:#a7bddc; }
.phase-heading { color:#a7b6ca; font-size:13px; }
.phase-title { font-size:18px; font-weight:600; line-height:1.4; margin-top:5px; margin-bottom:18px; }
.prompt-display { background:#101824; padding:18px; border-radius:8px; border-color:#2c3a4e; font-size:15px; line-height:1.75; min-height:0; }
.live-node { border-radius:7px; background:#101925; padding:14px; }
.live-node-label { font:500 12px/1.6 var(--sans); }
.live-node-value { font-size:13px; }
.live-edge span { font-family:var(--sans); }
.reality-response { font:15px/1.75 var(--sans); color:var(--text-soft); background:#101824; border-color:#2a384c; border-radius:8px; padding:18px; }
.reality-panel { min-height:0; padding-top:0; }
.verdict { font-size:22px; font-weight:600; }
.verdict-caption { font-size:13px; line-height:1.65; }
.minimizer-column,.minimizer-column.highlighted,.regression-code { background:#101824; border-color:#2a384c; border-radius:8px; }
.repair-copy { background:#1b283c; border-color:#34455f; border-radius:9px; padding:22px; }
.repair-title { font-size:18px; line-height:1.5; }
.replay-column,.replay-column.before,.replay-column.after { padding:22px; border-radius:9px; background:#101a28; border-color:#324158; }
.replay-status { font-size:21px; line-height:1.4; overflow-wrap:anywhere; }
.replay-detail { font-size:14px; line-height:1.75; }
.regression-suite-card { background:#141f2d; padding:24px; border-radius:10px; border-color:#334156; }
.regression-card-class { font-family:var(--mono); font-size:12px; color:var(--text-soft); }
.regression-card-value { font-size:14px; line-height:1.75; }
.regression-card-grid { gap:20px; }
.regression-card-status { font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.04em; }
.regression-suite-description,.evidence-summary-scope { font-size:14px; line-height:1.75; }
.evidence-summary { gap:16px; margin-top:24px; }
.evidence-summary article { background:#182438; padding:22px; border-color:#354762; border-radius:9px; }
.evidence-summary strong { font-size:34px; font-weight:600; letter-spacing:-.035em; }
.evidence-summary span { display:block; font-size:13px; line-height:1.6; margin-top:8px; }
.evidence-card { background:#131e2b; }
.evidence-card h3 { font-size:18px; font-weight:600; }
.evidence-card p { font-size:14px; line-height:1.8; }
.event-snapshot { padding:18px 20px; border-radius:9px; background:var(--surface-1); font-size:13px; }
.loading-core { width:min(540px,calc(100vw - 48px)); padding:36px; border:1px solid #364760; border-radius:12px; background:#172337; }
.loading-overlay { background:rgba(8,14,23,.95); }
.loading-stage { font-size:24px; line-height:1.35; margin-bottom:14px; }
.loading-message,.loading-includes,.loading-expectation { font-size:14px; line-height:1.8; }
.loading-number { color:var(--muted); font-size:11px; }
.loading-progress { height:3px; border-radius:3px; }
@media (max-width:1280px) { .topbar { gap:16px; padding-left:24px; padding-right:24px; } .nav-item { font-size:13px; } }
@media (max-width:1024px) { .hero-copy h1 { font-size:40px; } .hero { padding-top:32px; padding-bottom:36px; } .investigation-card { padding:18px; } }
@media (max-width:768px) { .topbar { padding:12px 20px; } .brand-name { font-size:18px; } .hero { padding-top:28px; padding-bottom:32px; } .hero-copy h1 { font-size:36px; max-width:600px; } .hero-description { font-size:16px; } .phase-block { padding:20px; } .evidence-summary article { padding:18px; } .evidence-summary strong { font-size:30px; } .loading-core { padding:28px; } }

#investigationSection, #regressionSuiteSection, #investigationWorkspace { scroll-margin-top:100px; }
@media (max-width:900px) { #investigationSection, #regressionSuiteSection, #investigationWorkspace { scroll-margin-top:175px; } }

/* Final micro-polish: contrast and hierarchy only. */
:root { --text-soft:#cbd4e1; --muted:#b0bdd0; }
.hero-description,.investigation-card-copy { color:var(--text-soft); }
.section-kicker,.investigation-meta,.category-replay { color:var(--muted); }
.investigation-meta { align-items:center; gap:12px; }
.category-severity { display:inline-flex; align-items:center; padding:3px 8px; border:1px solid #50617a; border-radius:5px; background:#202d40; color:#d0dbea; font:500 12px/1.4 var(--sans); white-space:nowrap; }
.investigation-card.active { background:#20334f; border-color:#85aff1; border-left-width:3px; padding-left:20px; }
.investigation-card:hover:not(.active) { border-color:#627d9f; }
#viewBlackBoxButton { min-height:46px; padding:12px 20px; border:1px solid #5d708c; border-radius:8px; background:transparent; color:var(--text-soft); font-size:15px; font-weight:500; }
#viewBlackBoxButton:hover { background:#1c2a3e; border-color:#8bb5ff; color:var(--text); }
button:focus-visible,summary:focus-visible,a:focus-visible { outline:2px solid #a6c8ff; outline-offset:4px; }
.runtime-strip { gap:16px; padding-right:6px; }
.runtime-item.inference-label { gap:4px; padding-left:14px; border-left:1px solid var(--line); }
.inference-caption { font-size:11px; line-height:1.45; color:var(--muted); }
.runtime-strip .inference-model { font-size:12px; line-height:1.5; color:var(--muted); }
#domainLimitations { margin-top:10px; max-width:740px; font-size:13px; line-height:1.6; color:var(--muted); }
.hero-actions { margin-top:18px; }
.hero { padding-bottom:34px; }
@media(max-width:1024px) { .investigation-card.active { padding-left:16px; } .hero { padding-bottom:30px; } }
@media(max-width:768px) { .hero { padding-bottom:26px; } .runtime-strip { padding-right:0; gap:12px; } .inference-label { text-align:left; } }

/* Phone header: give every topbar group its own row so status, nav and model label never overlap. */
@media (max-width: 620px) {
  .topbar { grid-template-columns: minmax(0,1fr); row-gap: 10px; }
  .topbar > .brand { grid-row: 1; grid-column: 1; }
  .topbar > .domain-selector { grid-row: 2; grid-column: 1; }
  .topbar > .top-nav { grid-row: 3; grid-column: 1; display: flex; flex-wrap: wrap; gap: 4px 12px; min-width: 0; }
  .topbar > .runtime-strip { grid-row: 4; grid-column: 1; flex-direction: column; align-items: flex-start; gap: 4px; }
  .runtime-item.inference-label { text-align: left; white-space: normal; }
}

/* ==========================================================================
   Structural base: sizing, spacing and layout only. Colours, surfaces and
   semantic states come from the graphite + violet layer below. Declarations
   the graphite + violet layer overrides have been removed.
   ========================================================================== */
.topbar { padding:12px max(32px, calc((100vw - var(--max-width)) / 2)); }
.brand { gap:10px; align-items:center; }
.brand-symbol { display:block; width:22px; height:22px; flex:none; position:relative; }
.brand-symbol::after { content:''; position:absolute; inset:6px; border:2px solid #fff; border-radius:50%; border-right-color:transparent; }
.brand-symbol-inner { display:none; }
.brand-copy { display:flex; flex-direction:column; gap:1px; min-width:0; }
.brand-name { font:600 15px/1.25 var(--sans); white-space:nowrap; }
.brand-tagline { display:block; font:400 12px/1.3 var(--sans); white-space:nowrap; }
.domain-button { padding:6px 12px; }
.top-nav { gap:4px; }
.nav-item { padding:6px 10px; font:500 13px/1.3 var(--sans); border:0; background:transparent; }
.runtime-strip { gap:14px; }
.runtime-item { font:500 12px/1.4 var(--sans); }
.runtime-dot { width:7px; height:7px; border-radius:50%; }
.runtime-item.inference-label { padding-left:14px; border-left:1px solid var(--line); }
.inference-caption { font-size:11px; }
.runtime-strip .inference-model { font-size:12px; color:var(--text-soft); }
.domain-panel,.hero,.investigation-section,.workspace,.confidence-strip,.regression-suite-section,.benchmark-section,.footer { max-width:var(--max-width); margin-left:auto; margin-right:auto; padding-left:32px; padding-right:32px; box-sizing:content-box; }
.domain-panel { padding-top:16px; padding-bottom:0; border:0; background:none; }
#domainContext { font:400 13px/1.5 var(--sans); }
.section-kicker,.hero-kicker { font:500 12px/1.4 var(--sans); }
h2 { font:600 22px/1.3 var(--sans); letter-spacing:-.015em; color:var(--text); }
.section-heading-row { margin-bottom:16px; }
.regression-suite-description { font-size:13px; line-height:1.6; }
.hero { padding-top:40px; padding-bottom:40px; border-bottom:0; }
.investigation-section { border-top:0; }
.investigation-section::before { content:''; display:block; height:1px; margin:-32px 0 32px; background:var(--line); }
.hero-copy h1 { font:650 44px/1.1 var(--sans); margin:0; }
.hero-description { margin-top:14px; font:400 17px/1.55 var(--sans); }
#domainLimitations { margin-top:12px; max-width:680px; font:400 12.5px/1.6 var(--sans); }
.hero-actions { margin-top:22px; }
.primary-cta,#runInvestigationButton { box-shadow:var(--shadow-1) !important; }
#viewBlackBoxButton,.secondary-cta { padding:9px 16px; font:500 14px/1.2 var(--sans); }
button:disabled { opacity:.55; cursor:not-allowed; }
.investigation-section { padding-top:32px; padding-bottom:32px; }
.investigation-grid { gap:12px; }
.investigation-card { padding:16px 18px; transition:border-color .12s, background .12s; }
.investigation-card.active { padding-left:16px; }
.investigation-card-title { font:600 15px/1.35 var(--sans); letter-spacing:-.005em; }
.investigation-card-copy { margin-top:4px; font:400 13.5px/1.55 var(--sans); }
.investigation-meta { margin-top:12px; gap:10px; font-size:12px; color:var(--muted); }
.category-severity { padding:2px 8px; font:500 12px/1.5 var(--sans); }
.category-replay { font:400 12px/1.5 var(--sans); }
.investigation-arrow { font-size:16px; transition:transform .12s, color .12s; }
.investigation-card:hover .investigation-arrow,.investigation-card.active .investigation-arrow { transform:translateX(2px); }
.workspace { padding-top:8px; padding-bottom:24px; grid-template-columns:minmax(0,1fr); column-gap:0; }
.workspace-header { grid-column:1/-1; padding:18px 20px; border:1px solid var(--line); border-bottom:0; }
.workspace-header h2 { font-size:20px; }
.workspace-status { border-radius:999px; padding:3px 10px; font:500 12px/1.5 var(--sans); letter-spacing:0; text-transform:none; }
.phase-block,.trace-phase,.verdict-phase { grid-column:1/-1; padding:22px 20px; border:1px solid var(--line); border-top:1px solid var(--line); border-bottom:0; grid-template-columns:36px minmax(0,1fr); gap:14px; }
.workspace > .phase-block:last-child,.final-phase { border-bottom:1px solid var(--line); border-radius:0 0 var(--r-lg) var(--r-lg); }
.phase-index { position:relative; align-self:start; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; font:500 12px/1 var(--mono); }
.phase-heading { font:500 12px/1.4 var(--sans); letter-spacing:0; text-transform:none; }
.phase-title { margin-top:2px; margin-bottom:14px; font:600 17px/1.35 var(--sans); }
.prompt-display { padding:14px 16px; font:400 14px/1.65 var(--sans); }
.live-graph { padding-left:18px; border-left:1px solid var(--line-strong); gap:0; max-width:880px; }
.live-node { padding:12px 14px; }
.live-node::before { left:-23px; top:16px; width:9px; height:9px; border:1px solid var(--line-strong); }
.live-node.warning::before { background:var(--amber-soft); }
.live-node-label { font:500 12px/1.5 var(--sans); text-transform:none; letter-spacing:0; }
.live-node-value { font:500 13px/1.55 var(--mono); }
.live-edge,.live-edge.warning,.live-edge.danger { min-height:30px; padding:6px 0 6px 2px; background:none !important; border:0; display:flex; align-items:center; }
.live-edge span { position:static; transform:none; left:auto; top:auto; font:400 12px/1.4 var(--mono) !important; }
.live-edge span::before { content:'↓ '; font-family:var(--sans); }
.live-warning { display:inline-flex; align-self:flex-start; align-items:center; gap:6px; margin:8px 0 2px; padding:2px 8px; font:500 12px/1.5 var(--sans); }
.trace-metadata { margin-top:10px; padding-top:10px; border-top:1px solid var(--line); display:grid; grid-template-columns:max-content minmax(0,1fr); gap:4px 16px; }
.trace-metadata dt { font:400 12px/1.5 var(--sans); }
.trace-metadata dd { margin:0; font:400 12.5px/1.5 var(--mono); overflow-wrap:anywhere; }
.split-reality { display:grid; grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr); gap:0; align-items:stretch; overflow:hidden; }
.reality-panel { display:flex; flex-direction:column; gap:10px; padding:20px; margin:0; border:0; border-radius:0; min-width:0; }
.reality-label { font:600 13px/1.4 var(--sans); text-transform:none; letter-spacing:0; }
.reality-label::after { display:block; content:''; }
.reality-panel:first-child .reality-label::before { content:'What the user saw · '; color:var(--muted); font-weight:400; }
.reality-panel:last-child .reality-label::before { content:'What the agent did · '; color:var(--muted); font-weight:400; }
.reality-response,.critical-action { flex:1; margin:0; padding:14px 16px; font:400 14.5px/1.65 var(--sans); }
.critical-action { font:400 13px/1.7 var(--mono); }
.reality-divider { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; border-left:1px solid var(--line); border-right:1px solid var(--line); padding:0; }
.not-equal { font:500 22px/1 var(--sans); }
.not-equal-label { display:none; }
.verdict { align-self:flex-start; margin:4px 0 0; padding:4px 10px; font:600 13px/1.4 var(--sans) !important; letter-spacing:.02em; }
.verdict-caption { margin-top:-4px; font:400 12px/1.4 var(--sans); }
.autopsy-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; overflow:hidden; }
.autopsy-panel { padding:12px 14px; border:0; border-right:1px solid var(--line); border-radius:0; min-width:0; }
.autopsy-panel:last-child { border-right:0; }
.autopsy-label { font:400 12px/1.4 var(--sans); }
.autopsy-value { margin-top:4px; font:500 13px/1.5 var(--mono); overflow-wrap:anywhere; }
.minimizer-block { margin-top:12px; padding:0; border:0; gap:12px; align-items:stretch; }
.minimizer-column,.minimizer-column.highlighted { padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-md); }
.minimizer-label { font:400 12px/1.4 var(--sans); text-transform:none; letter-spacing:0; }
.minimizer-text { margin-top:4px; font:400 13.5px/1.6 var(--sans); }
.minimizer-arrow { align-self:center; }
.repair-layout { gap:16px; align-items:stretch; }
.repair-copy { padding:18px; }
.repair-label { font:400 12px/1.4 var(--sans); text-transform:none; letter-spacing:0; }
.repair-title { margin-top:4px; font:600 16px/1.35 var(--sans); }
.repair-description { margin-top:6px; font:400 13.5px/1.6 var(--sans); }
.replay-button { margin-top:14px; }
.replay-comparison { gap:12px; align-items:stretch; }
.replay-column,.replay-column.before,.replay-column.after { padding:18px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface-inset); min-width:0; }
.replay-column-label { font:500 12px/1.4 var(--sans); text-transform:none; letter-spacing:0; }
.replay-status { margin-top:6px; font:650 17px/1.35 var(--sans) !important; letter-spacing:.01em; }
.replay-detail { margin-top:6px; font:400 13px/1.55 var(--sans); }
.replay-center-arrow { align-self:center; }
.replay-evidence summary { font:500 12.5px/1.5 var(--sans); }
.regression-code { padding:14px 16px; font:400 12.5px/1.7 var(--mono); }
.save-regression-button { font:500 13px/1.2 var(--sans); }
.confidence-strip { margin-top:0; margin-bottom:32px; padding-top:16px; padding-bottom:16px; border:0; }
.confidence-strip:not(.is-idle) { border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.confidence-label { font:400 12px/1.4 var(--sans); text-transform:none; letter-spacing:0; }
.confidence-value { font:600 13px/1.4 var(--sans); letter-spacing:0; }
.regression-suite-section { padding-top:24px; padding-bottom:32px; }
.regression-suite-count { font:500 12px/1.4 var(--sans); letter-spacing:0; text-transform:none; }
.regression-suite-list { gap:8px; }
.regression-card { padding:14px 16px; }
.regression-card-header { margin-bottom:8px; align-items:flex-start; gap:12px; }
.regression-card-id { font:600 13.5px/1.4 var(--mono); }
.regression-card-id .regression-card-label { margin-left:10px; padding:1px 8px; border:1px solid var(--line-strong); border-radius:999px; font:500 11.5px/1.5 var(--sans); color:var(--text-soft); vertical-align:1px; }
.regression-card-class { margin-top:2px; font:400 12px/1.5 var(--mono); }
.saved-verification { text-align:right; }
.saved-verification .regression-card-label { display:block; font:400 11.5px/1.4 var(--sans); }
.regression-card-status { display:inline-block; margin-top:2px; padding:1px 8px; font:600 12px/1.5 var(--sans) !important; letter-spacing:.01em; }
.regression-card-trigger { margin-bottom:8px; }
.regression-card-trigger .regression-card-label,.regression-card-grid .regression-card-label { font:400 11.5px/1.4 var(--sans); text-transform:none; letter-spacing:0; }
.regression-card-value { font:400 13px/1.55 var(--sans); }
.regression-card-grid { grid-template-columns:1.3fr 1.2fr 1fr 1fr; gap:4px 16px; padding:10px 0 0; border-top:1px solid var(--line); }
.regression-rerun-area { margin-top:10px !important; padding-top:10px !important; border-top:1px solid var(--line) !important; display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; }
.regression-rerun-area > .regression-card-label { font:400 11.5px/1.4 var(--sans); }
.regression-rerun-button.save-regression-button { width:auto; min-height:30px; margin:0; padding:5px 12px; font:500 12.5px/1.2 var(--sans); }
.regression-rerun-result { flex:1 1 260px; font:400 12.5px/1.5 var(--sans) !important; }
.regression-card-last-run { font:400 12px/1.5 var(--sans); }
.regression-suite-empty { border:1px dashed var(--line-strong); border-radius:var(--r-md); }
.benchmark-section { padding-top:24px; padding-bottom:40px; }
.evidence-summary { gap:12px; }
.evidence-summary article { padding:16px 18px; }
.evidence-summary strong { font:600 28px/1.15 var(--sans); }
.evidence-summary span { margin-top:6px; font:400 12.5px/1.5 var(--sans); }
.evidence-summary-scope { font:400 12.5px/1.6 var(--sans); }
.evidence-domains { gap:12px; }
.evidence-card,.evidence-card.supporting-evidence { padding:18px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--bg-elevated); }
.evidence-card h3,.evaluation-subheading { font:600 15px/1.4 var(--sans); letter-spacing:-.005em; }
.evidence-card p { font:400 13.5px/1.6 var(--sans); }
.evidence-card p strong { font-variant-numeric:tabular-nums; }
.evaluation-subheading { margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.evidence-limitations { padding:12px 14px; }
.footer { border-top:1px solid var(--line); padding-top:20px; padding-bottom:28px; font:400 12.5px/1.5 var(--sans); }
#exportReportButton.secondary-cta { min-height:34px; padding:6px 12px; font-size:13px; }
.loading-overlay { backdrop-filter:blur(4px); }
.loading-core { width:min(520px, calc(100vw - 32px)); padding:28px; text-align:left; }
.loading-number { font:500 12px/1.4 var(--sans); letter-spacing:0; text-transform:none; }
.loading-stage { margin-top:4px; font:600 18px/1.35 var(--sans); letter-spacing:-.01em; text-transform:none; }
.loading-message,.loading-includes,.loading-expectation { font:400 13.5px/1.6 var(--sans); }
.loading-includes { margin:14px 0 6px; font-family:var(--mono); font-size:12.5px; }
.loading-elapsed { font:500 12.5px/1.5 var(--mono); font-variant-numeric:tabular-nums; }
.loading-progress { height:3px; margin-top:18px; border-radius:999px; overflow:hidden; }
.loading-progress-bar { height:100%; border-radius:999px; }
@media (max-width:1280px) {
  .topbar { padding-left:24px; padding-right:24px; }
  .runtime-item.inference-label { max-width:220px; }
}
@media (max-width:1024px) {
  .domain-panel,.hero,.investigation-section,.workspace,.confidence-strip,.regression-suite-section,.benchmark-section,.footer { padding-left:24px; padding-right:24px; }
  .hero { padding-top:32px; padding-bottom:32px; }
  .investigation-card.active { padding-left:16px; }
  .autopsy-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .autopsy-panel:nth-child(2n) { border-right:0; }
  .autopsy-panel:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .regression-card-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
  .domain-panel,.hero,.investigation-section,.workspace,.confidence-strip,.regression-suite-section,.benchmark-section,.footer { padding-left:16px; padding-right:16px; }
  .topbar { padding:10px 16px; }
  .hero-description { font-size:16px; }
  .phase-block,.trace-phase,.verdict-phase { grid-template-columns:minmax(0,1fr); padding:18px 16px; gap:8px; }
  .split-reality { grid-template-columns:minmax(0,1fr); }
  .reality-divider { flex-direction:row; padding:6px 0; border:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .not-equal { font-size:18px; }
  .repair-layout,.replay-comparison { grid-template-columns:minmax(0,1fr) !important; display:grid; }
  .replay-center-arrow { display:none; }
  .evidence-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .evidence-domains { grid-template-columns:minmax(0,1fr); }
  .loading-core { padding:22px; }
}
@media (max-width:620px) {
  .autopsy-grid { grid-template-columns:minmax(0,1fr); }
  .autopsy-panel { border-right:0; border-bottom:1px solid var(--line); }
  .autopsy-panel:last-child { border-bottom:0; }
  .saved-verification { text-align:left; }
}
.autopsy-label { text-transform:uppercase; letter-spacing:.04em; font-size:11.5px; }
.workspace { border-top:0 !important; }
.regression-card-grid .regression-card-label { text-transform:uppercase; letter-spacing:.04em; }
@media (max-width:1024px) {
  .regression-card-grid { row-gap:12px; }
}

/* ==========================================================================
   Agent Forensics design system — graphite + violet presentation layer.
   Appended after (and overriding) the earlier blue layer. Visual only:
   no hooks, IDs, copy, evidence values or behavior are changed.
   Semantics: red = confirmed unsafe, green = verified protected,
   amber = warning/incomplete, violet = interaction/selection/brand,
   cyan = neutral information only.
   ========================================================================== */
:root {
  --bg:#0A0A0D; --surface-1:#111218; --surface-2:#171821; --surface-3:#1D1F2A;
  --border:rgba(255,255,255,0.08); --border-subtle:rgba(255,255,255,0.05); --border-strong:rgba(255,255,255,0.14);
  --accent:#7C6CF2; --accent-fill:#6252D6; --accent-fill-hover:#6A5AE0; --accent-text:#A99DFF; --accent-soft:rgba(124,108,242,0.14); --accent-line:rgba(124,108,242,0.40);
  --info:#63B3FF;
  --text:#F5F5F7; --text-soft:#B8BAC5; --muted:#858896;
  --danger:#F05D6F; --danger-soft:rgba(240,93,111,0.10); --danger-line:rgba(240,93,111,0.35);
  --success:#45C48B; --success-soft:rgba(69,196,139,0.10); --success-line:rgba(69,196,139,0.35);
  --warning:#E6B35C; --warning-soft:rgba(230,179,92,0.10); --warning-line:rgba(230,179,92,0.35);
  /* legacy aliases still referenced by earlier rules and app.js inline styles */
  --bg-elevated:var(--surface-1); --bg-soft:var(--surface-1); --panel:var(--surface-1); --surface:var(--surface-1); --surface-inset:var(--bg);
  --line:var(--border); --line-strong:var(--border-strong); --line-focus:var(--accent);
  --accent-solid:var(--accent-fill); --accent-solid-hover:var(--accent-fill-hover); --accent-border:var(--accent-line);
  --red:var(--danger); --red-soft:var(--danger-soft); --red-border:var(--danger-line);
  --green:var(--success); --green-soft:var(--success-soft); --green-border:var(--success-line);
  --amber:var(--warning); --amber-soft:var(--warning-soft); --amber-border:var(--warning-line);
  --sans:"Inter","Inter Variable",-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Mono",Menlo,Consolas,monospace;
  --r-sm:6px; --r-md:8px; --r-lg:12px;
  --shadow-1:none; --shadow-2:none;
  --max-width:1200px;
}
html,body { background:var(--bg); }
body { color:var(--text); font-family:var(--sans); font-feature-settings:"cv01","ss03"; -webkit-font-smoothing:antialiased; }
::selection { background:rgba(124,108,242,.35); }
button:focus-visible,summary:focus-visible,a:focus-visible,[tabindex]:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
a { color:var(--accent-text); }

/* Header / app shell ----------------------------------------------------- */
.topbar { background:rgba(10,10,13,.88); border-bottom:1px solid var(--border-subtle); backdrop-filter:saturate(140%) blur(10px); }
.brand-symbol { border-radius:5px; background:var(--accent); border:0; }
.brand-name { font-weight:590; font-size:14px; letter-spacing:-.01em; color:var(--text); }
.brand-tagline { color:var(--muted); font-weight:400; letter-spacing:0; text-transform:none; }
.domain-selector { padding:2px; gap:2px; background:var(--surface-1); border:1px solid var(--border); border-radius:var(--r-md); }
.domain-button { border:0; border-radius:var(--r-sm); background:transparent; color:var(--text-soft); font:510 13px/1.4 var(--sans); letter-spacing:0; text-transform:none; transition:background .12s, color .12s; }
.domain-button:hover { color:var(--text); background:var(--surface-2); }
.domain-button.active,.domain-button[aria-pressed="true"] { background:var(--accent-soft); color:var(--accent-text); box-shadow:inset 0 0 0 1px var(--accent-line) !important; }
.nav-item { border-radius:var(--r-sm); color:var(--text-soft); font-weight:510; font-size:13px; letter-spacing:0; text-transform:none; }
.nav-item:hover,.nav-item.active { color:var(--text); background:var(--surface-2); }
.runtime-item { color:var(--text-soft); }
.runtime-dot { background:var(--info); }
.runtime-item.inference-label { border-left-color:var(--border); }
.inference-caption { color:var(--muted); }

/* Shared section rhythm ------------------------------------------------- */
.section-kicker,.hero-kicker { font-weight:510; font-size:12px; color:var(--accent-text); letter-spacing:0; text-transform:none; }
.section-heading-row h2,.benchmark-heading h2,.workspace-header h2 { font-weight:590; letter-spacing:-.012em; color:var(--text); }
#domainContext,.regression-suite-description { color:var(--muted); }

/* Hero (copy unchanged) ------------------------------------------------- */
.hero { background:none; }
.hero-copy h1 { font-size:48px; font-weight:510; line-height:1.05; letter-spacing:-1.056px; color:var(--text); }
.hero-description { color:var(--text-soft); font-weight:400; }
#domainLimitations { color:var(--muted); }
.hero-actions { gap:8px; }

/* Buttons --------------------------------------------------------------- */
.primary-cta,#runInvestigationButton,.replay-button { min-height:36px; padding:8px 16px; border:1px solid var(--accent-fill); border-radius:var(--r-sm); background:var(--accent-fill); color:#fff; font:510 14px/1.2 var(--sans); letter-spacing:0; text-transform:none; }
.primary-cta:hover,#runInvestigationButton:hover,.replay-button:hover:not(:disabled) { background:var(--accent-fill-hover); border-color:var(--accent-fill-hover); }
#viewBlackBoxButton,.secondary-cta,.save-regression-button { min-height:36px; border:1px solid var(--border); border-radius:var(--r-sm); background:rgba(255,255,255,.02); color:var(--text); font-weight:510; letter-spacing:0; text-transform:none; }
#viewBlackBoxButton:hover,.secondary-cta:hover,.save-regression-button:hover:not(:disabled) { background:rgba(255,255,255,.05); border-color:var(--border-strong); }

/* Investigation cards --------------------------------------------------- */
.investigation-card { border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface-1); box-shadow:none !important; }
.investigation-card:hover:not(.active) { border-color:var(--border-strong); background:var(--surface-2); }
.investigation-card.active { border:1px solid var(--accent); background:var(--surface-2); box-shadow:inset 0 0 0 1px rgba(124,108,242,.25) !important; }
.investigation-card-title { font-weight:590; color:var(--text); }
.investigation-card-copy { color:var(--text-soft); }
.category-severity { border:1px solid var(--border); border-radius:999px; background:transparent; color:var(--text-soft); font-weight:510; }
.category-replay { color:var(--muted); }
.investigation-arrow { color:var(--muted); }
.investigation-card:hover .investigation-arrow,.investigation-card.active .investigation-arrow { color:var(--accent-text); }

/* Workspace + workflow sections ----------------------------------------- */
.workspace-header { background:var(--surface-2); border-color:var(--border); border-radius:var(--r-lg) var(--r-lg) 0 0; }
.phase-block,.trace-phase,.verdict-phase { border-color:var(--border); background:var(--surface-1); }
.phase-index { border:1px solid var(--border-strong); border-radius:var(--r-sm); background:var(--surface-2); color:var(--text-soft); }
.phase-heading { color:var(--accent-text); font-weight:510; }
.phase-title { font-weight:590; color:var(--text); letter-spacing:-.01em; }
.prompt-display { border:1px solid var(--border); border-radius:var(--r-md); background:var(--bg); color:var(--text); }

/* Trace: red only on the violating event -------------------------------- */
.live-graph { border-left-color:var(--border-strong); }
.live-node { border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface-2); }
.live-node::before { border-color:var(--border-strong); background:var(--surface-1); }
.live-node.warning { border-color:var(--border); background:var(--surface-2); }
.live-node.warning::before { border-color:var(--warning); }
.live-node.danger { border-color:var(--danger-line); background:var(--danger-soft); box-shadow:inset 2px 0 0 var(--danger) !important; }
.live-node.danger::before { background:var(--danger); border-color:var(--danger); }
.live-node-label { color:var(--muted); }
.live-node-value { color:var(--text); }
.live-node.danger .live-node-value,.live-edge.danger span { color:var(--danger); }
.live-edge span,.live-edge.warning span { color:var(--muted); }
.live-edge span::before { color:var(--border-strong); }
.live-warning { border:1px solid var(--warning-line); border-radius:999px; background:var(--warning-soft); color:var(--warning); font-weight:510; }
.trace-metadata { border-top-color:var(--border); }
.trace-metadata dt { color:var(--muted); }
.trace-metadata dd { color:var(--text-soft); }

/* Response vs trace (featured, 12px) ------------------------------------ */
.split-reality { border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface-2); }
.reality-panel,.reality-panel:last-child { background:transparent; }
.reality-panel:has(.verdict.fail) { background:var(--danger-soft); box-shadow:inset 0 2px 0 var(--danger) !important; }
.reality-label { color:var(--text-soft); font-weight:590; }
.reality-panel .reality-label::before { color:var(--muted); font-weight:400; }
.reality-response,.critical-action { border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface-1); color:var(--text); }
.reality-panel:has(.verdict.fail) .critical-action { border-color:var(--danger-line); background:rgba(10,10,13,.55); }
.reality-divider { border-color:var(--border); background:var(--surface-1); }
.not-equal { color:var(--text-soft); }
.verdict { border:1px solid var(--border-strong); border-radius:999px; background:transparent; color:var(--text-soft); }
.verdict.fail { border-color:var(--danger-line); background:var(--danger-soft); color:var(--danger); }
.verdict.pass,.verdict.neutral { border-color:var(--border-strong); background:transparent; color:var(--text-soft); }
.verdict-caption { color:var(--muted); }

/* Localize / minimize ---------------------------------------------------- */
.autopsy-grid { border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface-2); }
.autopsy-panel { border-color:var(--border); background:none; }
.autopsy-label,.minimizer-label,.repair-label,.replay-column-label,.confidence-label { color:var(--muted); font-weight:510; }
.autopsy-value,.minimizer-text { color:var(--text); }
.minimizer-column { border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface-2); }
.minimizer-column.highlighted { border-color:var(--accent-line); background:var(--accent-soft); }
.minimizer-arrow,.replay-center-arrow { color:var(--muted); }

/* Repair + replay -------------------------------------------------------- */
.repair-copy { border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface-2); }
.repair-title { font-weight:590; color:var(--text); }
.repair-description,.replay-detail { color:var(--text-soft); }
.replay-column { border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface-2); }
.replay-column:has(.replay-status[style*="--red"]) { border-color:var(--danger-line); background:var(--danger-soft); box-shadow:inset 0 2px 0 var(--danger) !important; }
.replay-column:has(.replay-status[style*="--green"]) { border-color:var(--success-line); background:var(--success-soft); box-shadow:inset 0 2px 0 var(--success) !important; }
.replay-column:has(.replay-status[style*="--amber"]) { border-color:var(--warning-line); background:var(--warning-soft); box-shadow:inset 0 2px 0 var(--warning) !important; }
.replay-status { font-weight:590 !important; }
.replay-evidence summary { color:var(--text-soft); }
.replay-evidence pre,.regression-code { border:1px solid var(--border); border-radius:var(--r-md); background:var(--bg); color:var(--text-soft); }

/* Verification strip ----------------------------------------------------- */
.confidence-strip { background:none; border-color:var(--border); }
.confidence-value.green { color:var(--success); }
.confidence-value.danger-text { color:var(--danger); }

/* Regression suite ------------------------------------------------------- */
.regression-suite-count { color:var(--muted); }
.regression-card { border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface-1); box-shadow:none !important; }
.regression-card:hover { border-color:var(--border-strong); }
.regression-card-id { color:var(--text); }
.regression-card-class,.regression-card-last-run,.saved-verification .regression-card-label,.regression-rerun-area > .regression-card-label { color:var(--muted); }
.regression-card-status { border:1px solid var(--border-strong); border-radius:999px; }
.regression-card-status.verified { border-color:var(--success-line); background:var(--success-soft); color:var(--success); }
.regression-card-status.unverified { border-color:var(--warning-line); background:var(--warning-soft); color:var(--warning); }
.regression-card-trigger .regression-card-label,.regression-card-grid .regression-card-label { color:var(--muted); }
.regression-card-value { color:var(--text-soft); }
.regression-card-grid,.regression-rerun-area { border-top-color:var(--border) !important; }
.regression-card-grid .danger-text { color:var(--danger); }
.regression-card-grid .safe-text { color:var(--success); }
.regression-card-grid .warning-text { color:var(--warning); }
.regression-rerun-button.save-regression-button { border:1px solid var(--border) !important; border-radius:var(--r-sm); background:rgba(255,255,255,.02); color:var(--text-soft); }
.regression-rerun-button.save-regression-button:hover:not(:disabled) { color:var(--text); background:rgba(255,255,255,.05); border-color:var(--border-strong) !important; }
.regression-suite-empty { border-color:var(--border-strong); color:var(--muted); }

/* Evidence: numbers stay neutral; cyan only for source/infra notes ------ */
.evidence-summary article { border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface-1); box-shadow:none !important; }
.evidence-summary strong { font-weight:590; letter-spacing:-.02em; color:var(--text); font-variant-numeric:tabular-nums; }
.evidence-summary span,.evidence-summary-scope { color:var(--muted) !important; }
.evidence-card { border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface-1); box-shadow:none !important; }
.evidence-card h3,.evaluation-subheading { font-weight:590; color:var(--text); text-transform:none; }
.evidence-card p { color:var(--text-soft); }
.evidence-card p strong { color:var(--text); font-weight:590; }
.evaluation-subheading { border-top-color:var(--border); }
.evidence-limitations { border:1px solid var(--warning-line); border-left:2px solid var(--warning); border-radius:var(--r-md); background:var(--warning-soft); color:var(--text-soft); }
.infrastructure-note { color:var(--muted); }
.infrastructure-note::before { content:'ⓘ '; color:var(--info); }

/* Footer ----------------------------------------------------------------- */
.footer { border-top-color:var(--border-subtle); color:var(--muted); background:none; }

/* Loading modal: featured surface, no shadow ---------------------------- */
.loading-overlay { background:rgba(10,10,13,.82); }
.loading-core { border:1px solid var(--border-strong); border-radius:var(--r-lg); background:var(--surface-3); box-shadow:none !important; }
.loading-number { color:var(--accent-text); }
.loading-stage { color:var(--text); font-weight:590; }
.loading-message,.loading-expectation { color:var(--text-soft); }
.loading-includes,.loading-elapsed { color:var(--muted); }
.loading-progress { background:var(--surface-1); }
.loading-progress-bar { background:var(--accent); }

/* Responsive ------------------------------------------------------------- */
@media (max-width:1024px) { .hero-copy h1 { font-size:38px; letter-spacing:-.8px; } }
@media (max-width:768px) { .hero-copy h1 { font-size:32px; letter-spacing:-.6px; } }
@media (prefers-reduced-motion:reduce) { .domain-button,.investigation-card,.investigation-arrow { transition:none; } }
/* graphite-violet: review fixes */
.regression-suite-card { background:var(--surface-1); border:1px solid var(--border); border-radius:var(--r-md); }
.regression-suite-card:hover { background:var(--surface-1); border-color:var(--border-strong); }
.brand-symbol::before { display:none; }
.hero-copy { max-width:960px; }
.hero-copy h1 { max-width:none; }
.hero-copy > p { max-width:680px; }
.hero-copy > p.hero-description, .hero-description { max-width:740px; }
/* Header provider label: full name at desktop widths, short name at 1024px and below. */
.runtime-item.inference-label { max-width:none; }
.runtime-strip .inference-model { white-space:nowrap; }
.runtime-strip .inference-model-short { display:none; }
@media (max-width:1024px) {
  .runtime-strip .inference-model-full { display:none; }
  .runtime-strip .inference-model-short { display:block; }
}

/* Regression suite explanatory copy (secondary text only) ------------------ */
.regression-suite-explainer { margin:0 0 10px; max-width:640px; font:13px/1.6 var(--sans); color:var(--muted); }
.regression-rerun-note { margin:4px 0 10px; max-width:560px; font:12px/1.55 var(--sans); color:var(--muted); }

/* Investigation workflow explanatory copy (secondary text only) ----------- */
.investigation-explainer { margin:6px 0 0; max-width:640px; font:13px/1.6 var(--sans); color:var(--muted); }
.phase-note { margin:-8px 0 12px; max-width:640px; font:12.5px/1.5 var(--sans); color:var(--muted); }
.phase-note-key { margin-top:-4px; padding-left:10px; border-left:2px solid var(--accent-line); color:var(--text); opacity:.82; font-size:13px; }
.replay-note { margin:10px 0 14px; max-width:420px; font:12.5px/1.5 var(--sans); color:var(--muted); }