html,
body {
  overflow-x: hidden;
}

code,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

pre {
  margin: 18px 0 0;
  padding: 20px;
  overflow-x: auto;
  border-radius: 10px;
  background: #13201c;
  color: #dceae4;
  font-size: 11px;
  line-height: 1.65;
}

.status-strip { margin-top: 18px; padding: 18px 22px; border: 1px solid var(--line); background: var(--card); }
.status-strip .done { display: inline-block; margin-right: 10px; padding: 3px 8px; background: var(--green); color: white; font-size: 10px; font-weight: 800; }
.status-strip p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.principle-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.principle-grid article { min-height: 210px; padding: 25px 22px; border: 1px solid var(--line); background: var(--card); }
.principle-grid article > span, .scenario-no { color: var(--green); font: 700 11px ui-monospace, monospace; }
.principle-grid h3 { margin: 28px 0 8px; font-size: 17px; }
.principle-grid p { margin: 0; color: var(--muted); font-size: 12px; }
.architecture-map { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 14px; align-items: center; }
.architecture-map > i, .playbook-flow > i { color: #98a59e; font-style: normal; }
.architecture-map article { padding: 19px; border: 1px solid var(--line); background: var(--card); }
.architecture-map article + article { margin-top: 10px; }
.architecture-map small, .architecture-map b, .architecture-map span { display: block; }
.architecture-map small { color: var(--green); font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.architecture-map b { margin: 5px 0; font-size: 14px; }
.architecture-map span { color: var(--muted); font-size: 10px; }
.architecture-map .sim-source { border-color: #9eb5e8; }
.architecture-map .ingest, .architecture-map .engine { border-color: var(--green); background: #e2eee8; }
.architecture-map .split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.architecture-map .split article { margin-top: 8px; }
.invariant { display: flex; gap: 10px; align-items: center; margin-top: 18px; padding: 16px 20px; background: #e8e6dc; font-size: 12px; }
.invariant b { white-space: nowrap; color: var(--green); }
.invariant code { padding: 2px 6px; background: white; color: var(--red); }
.contract-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contract-grid > article { min-width: 0; padding: 28px; border: 1px solid var(--line); background: var(--card); }
.contract-grid h3 { margin: 0; font-size: 19px; }
.contract-rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.contract-rules article { padding: 20px; background: #e8e6dc; }
.contract-rules h3 { margin: 0 0 8px; font-size: 14px; }
.contract-rules p { margin: 0; color: var(--muted); font-size: 11px; }
.contract-rules code { color: var(--green); }
.trigger-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.trigger-grid article { padding: 22px; border-left: 3px solid var(--green); background: var(--card); }
.trigger-grid span { color: var(--green); font: 700 10px ui-monospace, monospace; }
.trigger-grid h3 { margin: 13px 0 6px; font-size: 15px; }
.trigger-grid p { margin: 0; color: var(--muted); font-size: 11px; }
.lifecycle { display: flex; align-items: stretch; margin-top: 20px; padding: 18px; overflow-x: auto; border: 1px solid var(--line); background: var(--card); }
.lifecycle div { min-width: 125px; flex: 1; padding: 14px; }
.lifecycle i { align-self: center; color: #9da8a2; font-style: normal; }
.lifecycle b, .lifecycle span { display: block; }
.lifecycle b { color: var(--green); font-size: 11px; }
.lifecycle span { margin-top: 5px; color: var(--muted); font-size: 10px; }
.branch-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.branch-row span { padding: 7px 11px; background: #efe4dc; font-size: 10px; }
.compact { margin-top: 25px; }
.prediction-examples { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.prediction-examples code { padding: 12px; border: 1px solid var(--line); background: var(--card); color: var(--muted); font-size: 10px; }
.result-fields { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.result-fields span { padding: 7px 11px; border: 1px solid #c9d4cf; border-radius: 99px; background: #fffaf0; font-size: 10px; }
.sim-timeline { display: flex; align-items: center; margin-top: 18px; overflow-x: auto; }
.sim-timeline div { min-width: 125px; padding: 15px; border: 1px solid var(--line); background: var(--card); }
.sim-timeline i { min-width: 22px; height: 1px; background: var(--blue); }
.sim-timeline small, .sim-timeline b, .sim-timeline span { display: block; }
.sim-timeline small { color: var(--blue); font-size: 9px; font-weight: 800; }
.sim-timeline b { margin: 5px 0; font-size: 13px; }
.sim-timeline span { color: var(--muted); font-size: 10px; }
.scenario-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.scenario-cards article { padding: 28px; border: 1px solid var(--line); background: var(--card); }
.scenario-cards h3 { margin: 14px 0 8px; font-size: 21px; }
.scenario-story { min-height: 78px; color: var(--muted); font-size: 12px; }
.scenario-cards dl { margin: 20px 0 0; }
.scenario-cards dt { margin-top: 10px; color: var(--green); font-size: 9px; font-weight: 800; }
.scenario-cards dd { margin: 2px 0 0; color: var(--muted); font-size: 10px; }
.playbook-flow { display: flex; align-items: stretch; }
.playbook-flow > div { flex: 1; padding: 20px; border: 1px solid #3b4d45; background: #1b2b25; }
.playbook-flow .customer { border-color: #6b86c6; background: #1d2934; }
.playbook-flow small, .playbook-flow b, .playbook-flow span { display: block; }
.playbook-flow small { color: #70bea6; font-size: 9px; font-weight: 800; }
.playbook-flow b { margin: 6px 0; }
.playbook-flow span { color: #9fb0a8; font-size: 10px; }
.dark-contract { margin-top: 18px; }
.dark-contract > article { border-color: #3b4d45; background: #1b2b25; }
.dark-contract h3 { color: white; }
.dark-contract p { color: #9fb0a8; font-size: 12px; }
.state-list { display: flex; flex-wrap: wrap; gap: 7px; margin: 20px 0; }
.state-list span { padding: 7px 10px; border: 1px solid #4e665c; color: #b9d8cc; font: 700 10px ui-monospace, monospace; }
.roadmap { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.roadmap article { min-height: 260px; padding: 23px 20px; border-top: 3px solid var(--green); background: var(--card); }
.roadmap article > span { color: var(--green); font: 700 10px ui-monospace, monospace; }
.roadmap h3 { margin: 25px 0 8px; font-size: 16px; }
.roadmap p { min-height: 96px; color: var(--muted); font-size: 11px; }
.roadmap b, .roadmap small { display: block; }
.roadmap b { font-size: 10px; }
.roadmap small { color: var(--muted); font-size: 9px; }
.evidence-panel { margin-top: 22px; grid-template-columns: repeat(4, 1fr); }
.source-foot b { color: var(--ink); }

@media (max-width: 680px) {
  .version-line,
  .flow,
  .mvp-path,
  .gap-detail {
    max-width: 100%;
    overflow-x: auto;
  }

  .version-line {
    justify-content: flex-start;
  }

  .gap-detail table {
    min-width: 640px;
  }

  .principle-grid,
  .contract-grid,
  .contract-rules,
  .trigger-grid,
  .prediction-examples,
  .scenario-cards,
  .roadmap {
    grid-template-columns: 1fr;
  }

  .architecture-map { grid-template-columns: 1fr; }
  .architecture-map > i { transform: rotate(90deg); justify-self: center; }
  .invariant { align-items: flex-start; flex-wrap: wrap; }
  .playbook-flow { overflow-x: auto; }
  .playbook-flow > div { min-width: 180px; }
  .playbook-flow > i { align-self: center; }
  .scenario-story, .roadmap p { min-height: auto; }
  .evidence-panel { grid-template-columns: 1fr 1fr; }
  pre { font-size: 9px; }
}

@media (min-width: 681px) and (max-width: 1100px) {
  .principle-grid { grid-template-columns: repeat(2, 1fr); }
  .contract-rules { grid-template-columns: repeat(2, 1fr); }
  .roadmap { grid-template-columns: repeat(2, 1fr); }
}