:root {
  color-scheme: light;
  --page: #f5f4f1;
  --surface: #ffffff;
  --surface-soft: #faf9f7;
  --ink: #1c1b1a;
  --ink-soft: #3f3c39;
  --muted: #716d68;
  --line: #ddd9d4;
  --line-strong: #c9c3bd;
  --brand: #ff6b00;
  --brand-dark: #ff6b00;
  --brand-soft: #f8e9dd;
  --warning: #875008;
  --warning-soft: #fbf3e2;
  --success: #45624c;
  --success-soft: #edf3ee;
  --focus: #1769aa;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
html:not(.js) .js-only { display: none; }

body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background: var(--page);
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif;
  letter-spacing: 0;
}

.is-embedded body { background: transparent; }
.is-embedded .site-header,
.is-embedded .chapter-heading,
.is-embedded .site-footer { display: none; }
.is-embedded .page-shell {
  width: 100%;
  padding: 0 0 8px;
}
.is-embedded .scenario-switcher { margin-top: 0; }
.is-embedded .demo-shell-stage { height: 760px; }

button,
summary { font: inherit; }

button:focus-visible,
summary:focus-visible,
a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--focus) 30%, transparent);
  outline-offset: 2px;
}

.site-header {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 12px max(24px, calc((100vw - 1440px) / 2));
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid var(--line);
}

.brand {
  min-width: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
}

.brand img {
  width: 126px;
  height: 32px;
  object-fit: contain;
}

.brand span {
  padding-left: 12px;
  border-left: 1px solid var(--line-strong);
  font-size: 13px;
  font-weight: 800;
}

.prototype-flags {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.prototype-flags strong,
.prototype-flags span {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.2;
}

.prototype-flags strong {
  color: var(--brand-dark);
  border-color: #e5b99c;
  background: var(--brand-soft);
}

.page-shell {
  width: min(1440px, calc(100% - 48px));
  margin: 0 auto;
  padding: 44px 0 64px;
}

.chapter-heading {
  display: grid;
  grid-template-columns: 92px minmax(0, 960px);
  gap: 26px;
  align-items: start;
}

.chapter-index {
  align-self: center;
  color: var(--brand);
  font: 800 72px/.82 Arial, sans-serif;
}

.eyebrow,
.context-kicker {
  margin: 0;
  color: var(--brand-dark);
  font: 800 11px/1.4 Consolas, "Courier New", monospace;
}

.chapter-heading h1 {
  max-width: 900px;
  margin: 7px 0 10px;
  font-size: clamp(30px, 3.2vw, 48px);
  line-height: 1.16;
  letter-spacing: 0;
}

.chapter-lead {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.75;
}

.scenario-switcher {
  margin-top: 34px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
}

.scenario-switcher-head {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 13px 10px 16px;
}

.scenario-switcher-head > div { min-width: 0; }
.scenario-switcher-head span,
.scenario-switcher-head strong { display: block; }
.scenario-switcher-head span { color: var(--muted); font-size: 12px; font-weight: 700; }
.scenario-switcher-head strong { margin-top: 3px; font-size: 15px; line-height: 1.35; }

.scenario-switcher-toggle {
  min-width: 112px;
  min-height: 44px;
  padding: 9px 14px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--ink);
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}
.scenario-switcher-toggle:hover,
.scenario-switcher-toggle[aria-expanded="true"] { color: #fff; background: var(--ink); }

.scenario-options {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--line-strong);
}
.scenario-options[hidden] { display: none; }

.scenario-options button {
  min-width: 0;
  min-height: 72px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 12px 14px;
  color: var(--ink-soft);
  background: var(--surface);
  border: 0;
  border-right: 1px solid var(--line);
  cursor: pointer;
  text-align: left;
}

.scenario-options button:last-child { border-right: 0; }
.scenario-options button:hover { background: var(--surface-soft); }
.scenario-options button[aria-pressed="true"] { color: #fff; background: var(--ink); box-shadow: inset 0 -3px 0 var(--brand); }
.scenario-options button[aria-pressed="true"] small { color: #d7d1cb; }
.scenario-options b,
.scenario-options small { min-width: 0; display: block; }
.scenario-options b { font-size: 14px; line-height: 1.35; }
.scenario-options small { color: var(--muted); font-size: 12px; line-height: 1.35; }

.scenario-bar {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 10px 15px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-bottom: 0;
}

.scenario-label,
.scenario-badge {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.scenario-label { padding-right: 12px; border-right: 1px solid var(--line); }
.scenario-bar strong { font-size: 15px; }
.scenario-question { color: var(--muted); font-size: 14px; }
.scenario-badge {
  margin-left: auto;
  padding: 4px 7px;
  color: var(--brand-dark);
  background: var(--brand-soft);
  border-radius: 3px;
}

.stage-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  list-style: none;
}

.stage-track li {
  position: relative;
  min-width: 0;
  min-height: 70px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 11px 15px;
  color: var(--muted);
  border-right: 1px solid var(--line);
}

.stage-track li:last-child { border-right: 0; }

.stage-track li > span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  padding: 5px 8px;
  color: var(--brand);
  background: #fff;
  border: 1px solid var(--brand);
  border-radius: 3px;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 800;
  white-space: nowrap;
}

.stage-track strong { display: block; }
.stage-track strong { color: inherit; font-size: 14px; line-height: 1.35; }

.stage-track li.is-active {
  color: var(--ink);
  background: var(--brand-soft);
  box-shadow: inset 0 -4px 0 var(--brand);
}

.stage-track li[data-stage="input"].is-active { background: #efedea; box-shadow: inset 0 -4px 0 #8a8179; }
.stage-track li[data-stage="processing"].is-active { background: var(--brand-soft); box-shadow: inset 0 -4px 0 var(--brand); }
.stage-track li[data-stage="decision"].is-active { background: var(--warning-soft); box-shadow: inset 0 -4px 0 var(--warning); }
.stage-track li[data-stage="result"].is-active { background: var(--success-soft); box-shadow: inset 0 -4px 0 var(--success); }

.stage-track li.is-active > span {
  color: var(--ink);
  background: #fff;
  border-color: var(--brand-dark);
}

.stage-track li.is-complete { color: var(--ink-soft); }
.stage-track li.is-complete > span { color: var(--brand); }

.demo-shell-stage {
  position: relative;
  height: clamp(560px, calc(100dvh - 32px), 820px);
}

.demo-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 65fr) minmax(300px, 35fr);
  align-items: start;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-top: 0;
  box-shadow: 0 18px 45px rgba(35, 30, 26, .07);
}

.conversation {
  min-width: 0;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-self: start;
  overflow: hidden;
  border-right: 1px solid var(--line-strong);
}

.conversation-header {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 22px;
  border-bottom: 1px solid var(--line);
}

.advisor-identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}

.advisor-avatar,
.message-avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--brand);
  font-weight: 800;
}

.advisor-avatar { width: 38px; height: 38px; border-radius: 6px; font-size: 15px; }
.advisor-identity h2 { margin: 0; font-size: 17px; letter-spacing: 0; }
.advisor-identity p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }

.live-status {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.live-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #aaa49e;
}

.conversation.is-running .live-status i { background: var(--brand); animation: pulse 1.2s ease-in-out infinite; }
.conversation.is-complete .live-status i { background: var(--success); }
body[data-phase="decision"] .conversation.is-running .live-status i { background: var(--warning); }

@keyframes pulse { 50% { opacity: .35; } }

.message-list {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 26px 28px 34px;
  overflow-y: scroll;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #8f857c #ebe7e2;
  background: var(--surface-soft);
}

.message-list::-webkit-scrollbar { width: 12px; }
.message-list::-webkit-scrollbar-track { background: #ebe7e2; border-left: 1px solid var(--line); }
.message-list::-webkit-scrollbar-thumb {
  min-height: 48px;
  background: #8f857c;
  border: 3px solid #ebe7e2;
  border-radius: 999px;
}
.message-list::-webkit-scrollbar-thumb:hover { background: #665e57; }
.message-list:focus-visible { outline: 3px solid color-mix(in srgb, var(--focus) 30%, transparent); outline-offset: -3px; }

.message-row {
  width: min(78%, 660px);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  animation: message-in 220ms ease both;
}

.message-row.visitor { align-self: flex-end; justify-content: flex-end; }
.message-avatar { width: 30px; height: 30px; border-radius: 5px; font-size: 12px; }
.visitor .message-avatar { color: var(--muted); background: #ece9e5; }
.person-avatar {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: #ece9e5;
}
.person-avatar::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #716d68;
  transform: translateX(-50%);
}
.person-avatar::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 18px;
  height: 10px;
  border-radius: 10px 10px 4px 4px;
  background: #716d68;
  transform: translateX(-50%);
}
.message-content { min-width: 0; }
.message-author { display: block; margin: 0 2px 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.visitor .message-author { text-align: right; }

.bubble {
  padding: 13px 15px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 4px 8px 8px 8px;
}

.visitor .bubble {
  background: var(--surface);
  border-color: var(--line-strong);
  border-radius: 8px 4px 8px 8px;
}

.bubble p { margin: 0; font-size: 15px; line-height: 1.75; }
.bubble p + p { margin-top: 9px; }

.system-event {
  width: min(90%, 760px);
  align-self: center;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid #8a8179;
  border-radius: 4px;
  animation: message-in 220ms ease both;
}

.system-event.is-processing { border-left-color: var(--brand); }
.system-event.is-conflict { border-left-color: var(--warning); background: #fffdfa; }
.system-event.is-result { border-left-color: var(--success); background: #fbfdfb; }

.event-line {
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 13px;
}

.event-icon {
  min-width: 38px;
  min-height: 30px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 5px 7px;
  color: var(--muted);
  background: #efedea;
  border-radius: 3px;
  font: 800 11px/1.2 Arial, sans-serif;
}

.is-processing .event-icon { color: var(--ink); background: var(--brand); }
.is-conflict .event-icon { color: var(--warning); background: var(--warning-soft); }
.is-result .event-icon { color: var(--success); background: var(--success-soft); }
.event-line div { min-width: 0; }
.event-line strong,
.event-line small { display: block; }
.event-line strong { font-size: 14px; line-height: 1.45; }
.event-line small { margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.45; }

.evidence-snapshot { border-top: 1px solid var(--line); }
.evidence-snapshot summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 13px;
  color: var(--ink-soft);
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  font-weight: 800;
}

.evidence-snapshot summary::-webkit-details-marker { display: none; }
.evidence-snapshot summary span::before { content: "+"; display: inline-block; width: 16px; color: var(--brand-dark); }
.evidence-snapshot[open] summary span::before { content: "−"; }
.evidence-snapshot summary small { color: var(--muted); font-size: 12px; font-weight: 500; }
.evidence-snapshot summary:hover { background: #f4f1ee; }

.source-grid,
.processing-steps,
.conflict-grid,
.result-sheet {
  margin: 0 13px 13px;
  padding: 13px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
}

.source-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.source-grid div { min-width: 0; padding: 9px; background: #fff; border: 1px solid var(--line); }
.source-grid b,
.source-grid span { display: block; }
.source-grid b { font-size: 13px; line-height: 1.4; }
.source-grid span { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.4; }

.project-sources { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.project-sources section { min-width: 0; padding: 10px; background: #fff; border: 1px solid var(--line); }
.project-sources section > span { margin: 0 0 4px; color: var(--brand-dark); font-weight: 800; }
.project-sources ul { display: grid; gap: 4px; margin: 9px 0 0; padding: 8px 0 0; border-top: 1px solid var(--line); list-style: none; }
.project-sources li { color: var(--muted); font-size: 12px; line-height: 1.45; }
.project-sources li::before { content: "·"; margin-right: 4px; color: var(--brand); font-weight: 800; }

.scene-document section:nth-child(1),
.scene-document .processing-step:nth-child(1),
.scene-document .processing-step:nth-child(3) { border-left: 3px solid #718399; }
.scene-data section,
.scene-data .processing-step { border-left: 3px solid #45624c; }
.scene-workflow section,
.scene-workflow .processing-step { border-left: 3px solid #875008; }
.scene-team section,
.scene-team .processing-step { border-left: 3px solid var(--brand); }

.scene-data.knowledge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.scene-data.knowledge-grid div { position: relative; padding-left: 34px; }
.scene-data.knowledge-grid div::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 11px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--success);
  background: var(--success-soft);
}

.scene-workflow.agenda-list { position: relative; padding-left: 20px; }
.scene-workflow.agenda-list::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 6px; width: 2px; background: #d8b77e; }
.scene-workflow.agenda-list li { position: relative; }
.scene-workflow.agenda-list li::before { content: ""; position: absolute; top: 16px; left: -20px; width: 10px; height: 10px; border-radius: 50%; background: var(--warning); border: 2px solid #fff; }

.scene-team.knowledge-grid div:nth-child(odd) { background: #fffaf6; border-color: #e5c3ad; }
.scene-team.agenda-list li { grid-template-columns: 118px minmax(0, 1fr); }

.noscript-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.noscript-grid p { margin: 0; padding: 12px; background: var(--surface-soft); border: 1px solid var(--line); }
.noscript-grid b { display: block; margin-bottom: 4px; color: var(--ink); }

.transformation-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  margin: 0 13px 8px;
  padding: 10px 12px;
  color: var(--muted);
  background: var(--brand-soft);
  border: 1px solid #ebc9b1;
  font-size: 12px;
  text-align: center;
}
.transformation-line i { color: var(--brand); font-style: normal; font-size: 18px; }
.transformation-line strong { color: var(--ink); }

.processing-steps { display: grid; gap: 7px; }
.processing-step {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px 9px;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--line);
  font-size: 12px;
}

.processing-step span b,
.processing-step span small { display: block; }
.processing-step span b { color: inherit; font-size: 12px; line-height: 1.45; }
.processing-step span small { margin-top: 2px; color: inherit; font-size: 12px; line-height: 1.45; }
.processing-step em { color: inherit; font-style: normal; font-size: 12px; }

.processing-step i {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  font-style: normal;
  font-size: 9px;
}

.processing-step.is-current { color: var(--ink); border-color: var(--brand-dark); background: var(--brand-soft); }
.processing-step.is-complete { color: var(--ink-soft); }
.processing-step.is-complete i { color: #fff; background: var(--success); border-color: var(--success); }

.conflict-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.version-card { min-width: 0; padding: 11px; background: #fff; border: 1px solid var(--line); }
.version-card.is-old { border-color: #d8b77e; background: #fffcf5; }
.version-card > span { color: var(--muted); font-size: 12px; font-weight: 800; }
.version-card h4 { margin: 5px 0 7px; font-size: 15px; }
.version-card p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.6; }
.conflict-note { grid-column: 1 / -1; margin: 2px 0 0; padding-top: 10px; color: var(--warning); border-top: 1px solid #dfcfb4; font-size: 12px; line-height: 1.55; }

.decision-card {
  width: min(86%, 700px);
  align-self: center;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--warning);
  border-radius: 4px;
  animation: message-in 220ms ease both;
  scroll-margin-top: 96px;
}

.decision-card > span { color: var(--warning); font-size: 12px; font-weight: 800; }
.decision-card h3 { margin: 6px 0 7px; font-size: 19px; line-height: 1.45; letter-spacing: 0; }
.decision-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.decision-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 13px; }
.decision-actions button {
  min-height: 48px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 9px 11px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 800;
}
.decision-actions button strong,
.decision-actions button span { display: block; }
.decision-actions button strong { font-size: 14px; line-height: 1.45; }
.decision-actions button span { color: inherit; font-size: 12px; line-height: 1.45; font-weight: 500; }
.decision-actions button:hover:not(:disabled) { border-color: var(--brand-dark); background: var(--brand-soft); }
.decision-actions button:disabled { cursor: default; opacity: .56; }
.decision-actions button.is-selected { color: var(--ink); background: var(--brand-dark); border-color: var(--brand-dark); opacity: 1; box-shadow: inset 0 0 0 2px var(--brand-dark); }

.result-sheet { padding: 14px; }
.result-sheet > span { color: var(--success); font-size: 12px; font-weight: 800; }
.result-sheet h4 { margin: 5px 0 7px; font-size: 19px; }
.result-sheet > p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.65; }
.evidence-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 11px; }
.evidence-tags span { padding: 5px 7px; color: var(--success); background: #fff; border: 1px solid #bdcbbf; border-radius: 3px; font-size: 12px; font-weight: 700; }
.citation-list { display: grid; gap: 5px; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line); list-style: none; }
.citation-list li { color: var(--muted); font-size: 12px; line-height: 1.5; }
.citation-list b { color: var(--ink-soft); }
.remaining-note { margin-top: 10px !important; padding: 8px 9px; background: var(--warning-soft); color: var(--warning) !important; }

.knowledge-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 12px;
}
.knowledge-grid div { min-width: 0; padding: 9px; background: #fff; border: 1px solid var(--line); }
.knowledge-grid b,
.knowledge-grid small { display: block; }
.knowledge-grid b { color: var(--ink); font-size: 13px; line-height: 1.4; }
.knowledge-grid small { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.5; }

.agenda-list { display: grid; gap: 7px; margin: 13px 0 0; padding: 0; list-style: none; }
.agenda-list li {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 3px 12px;
  padding: 9px 10px;
  background: #fff;
  border: 1px solid var(--line);
}
.agenda-list b { grid-row: 1 / 3; color: var(--ink); font-size: 12px; line-height: 1.5; }
.agenda-list span { color: var(--ink-soft); font-size: 12px; line-height: 1.5; }
.agenda-list small { color: var(--muted); font-size: 12px; line-height: 1.5; }

.knowledge-proof-chain,
.document-diff,
.data-before-after,
.team-trial {
  display: grid;
  align-items: stretch;
  gap: 8px;
  margin-top: 13px;
}

.knowledge-proof-chain { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); }
.knowledge-proof-chain span { display: grid; place-items: center; min-height: 48px; padding: 8px; color: var(--brand-dark); background: var(--brand-soft); border: 1px solid #e5b99c; font-size: 12px; font-weight: 800; text-align: center; }
.knowledge-proof-chain i { align-self: center; color: var(--brand); font-style: normal; }

.document-diff,
.data-before-after,
.team-trial { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.document-diff > div,
.data-before-after > div,
.team-trial > div { min-width: 0; padding: 11px; background: #fff; border: 1px solid var(--line); }
.document-diff > i,
.data-before-after > i,
.team-trial > i { align-self: center; color: var(--brand); font-style: normal; font-size: 18px; }
.document-diff small,
.data-before-after small,
.team-trial small { display: block; margin-bottom: 7px; color: var(--muted); font-size: 12px; font-weight: 800; }
.document-diff del,
.document-diff ins { display: block; font-size: 13px; line-height: 1.6; text-decoration-thickness: 2px; }
.document-diff ins { color: var(--success); text-decoration: none; }
.data-before-after b { display: block; margin-top: 5px; font-size: 12px; line-height: 1.5; }
.team-trial b { display: block; font-size: 13px; }
.team-trial p { margin: 6px 0 0; color: var(--ink-soft); font-size: 12px; line-height: 1.55; }

.workflow-result-line { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 13px 0 0; padding: 0; list-style: none; }
.workflow-result-line li { position: relative; min-width: 0; padding: 11px 11px 11px 15px; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--warning); }
.workflow-result-line span,
.workflow-result-line b,
.workflow-result-line small { display: block; }
.workflow-result-line span { color: var(--warning); font-size: 12px; font-weight: 800; }
.workflow-result-line b { margin-top: 5px; font-size: 13px; }
.workflow-result-line small { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.45; }

.validation-panel { margin-top: 14px; padding: 14px; background: var(--success-soft); border: 1px solid #bdcbbf; }
.reusable-output,
.validation-panel { scroll-margin-top: 96px; }
.validation-heading span,
.validation-heading strong { display: block; }
.validation-heading span { color: var(--success); font-size: 12px; font-weight: 800; }
.validation-heading strong { margin-top: 4px; font-size: 16px; line-height: 1.45; }
.validation-panel dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 0; }
.validation-panel dl div { min-width: 0; padding: 10px; background: #fff; border-left: 3px solid var(--success); }
.validation-panel dt { color: var(--success); font-size: 12px; font-weight: 800; }
.validation-panel dd { margin: 5px 0 0; color: var(--ink-soft); font-size: 12px; line-height: 1.55; }

@keyframes message-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.action-dock {
  position: relative;
  z-index: 3;
  min-width: 0;
  max-width: 100%;
  min-height: 92px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, auto);
  gap: 18px;
  align-items: center;
  padding: 15px 20px;
  background: var(--surface);
  border-top: 1px solid var(--line-strong);
}

.dock-label { color: var(--brand-dark); font-size: 12px; font-weight: 800; }
.action-dock p { margin: 4px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.action-buttons { display: flex; justify-content: flex-end; gap: 7px; }
.action-buttons button {
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 800;
}
.action-buttons .primary-action { color: var(--ink); background: var(--brand-dark); border-color: var(--brand-dark); }
.action-buttons .secondary-action { color: var(--ink); background: #fff; }
.action-buttons button:hover { border-color: var(--ink); }
.action-buttons button:disabled { cursor: wait; opacity: .55; }

/* Keep every text layer aligned with the orange button foreground. */
.decision-actions button.is-selected,
.action-buttons .primary-action {
  color: var(--ink);
}

.decision-actions button.is-selected *,
.action-buttons .primary-action * {
  color: inherit;
}

.task-context {
  min-width: 0;
  padding: 27px 25px;
  background: #f3f1ee;
}

.task-context > header { padding-bottom: 21px; border-bottom: 1px solid var(--line-strong); }
.task-context h2 { margin: 5px 0 0; font-size: 22px; letter-spacing: 0; }

.task-facts { margin: 20px 0 0; }
.task-facts div { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.task-facts dt { color: var(--muted); font-size: 12px; }
.task-facts dd { margin: 0; font-size: 13px; line-height: 1.55; font-weight: 700; }

.context-progress { margin-top: 26px; }
.progress-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.progress-heading span { color: var(--muted); font-size: 12px; font-weight: 800; }
.progress-heading strong { color: var(--brand-dark); font: 800 12px/1 Arial, sans-serif; }
.context-progress ol { display: grid; gap: 0; margin: 15px 0 0; padding: 0; list-style: none; }
.context-progress li {
  position: relative;
  min-height: 59px;
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  gap: 10px;
  color: var(--muted);
}
.context-progress li::after { content: ""; position: absolute; top: 16px; bottom: 0; left: 5px; width: 1px; background: var(--line-strong); }
.context-progress li:last-child::after { display: none; }
.context-progress li > span { z-index: 1; width: 11px; height: 11px; margin-top: 3px; border: 2px solid #b4aea8; border-radius: 50%; background: #f3f1ee; }
.context-progress b,
.context-progress small { display: block; }
.context-progress b { color: inherit; font-size: 13px; }
.context-progress small { margin-top: 4px; color: inherit; font-size: 12px; line-height: 1.4; }
.context-progress li.is-active { color: var(--ink); }
.context-progress li.is-active > span { border-color: var(--brand); background: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
body[data-phase="decision"] .context-progress li.is-active > span { border-color: var(--warning); background: var(--warning); box-shadow: 0 0 0 4px var(--warning-soft); }
body[data-phase="result"] .context-progress li.is-active > span { border-color: var(--success); background: var(--success); box-shadow: 0 0 0 4px var(--success-soft); }
.context-progress li.is-complete { color: var(--ink-soft); }
.context-progress li.is-complete > span { border-color: var(--success); background: var(--success); }

.responsibility-note {
  margin-top: 6px;
  padding: 14px 0 0;
  border-top: 1px solid var(--line-strong);
}
.responsibility-note span { color: var(--brand-dark); font-size: 12px; font-weight: 800; }
.responsibility-note p { margin: 6px 0 0; color: var(--ink-soft); font-size: 12px; line-height: 1.65; }
.demo-boundary { margin: 24px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }

.noscript-note { margin-top: 16px; padding: 18px; border: 1px solid var(--line-strong); background: #fff; }
.noscript-note strong { font-size: 14px; }
.noscript-note p { margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.65; }

.site-footer {
  min-height: 68px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 24px max(24px, calc((100vw - 1440px) / 2));
  color: var(--muted);
  background: #242220;
  font-size: 12px;
}

@media (max-width: 1040px) {
  .scenario-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .scenario-options button { border-bottom: 1px solid var(--line); }
  .scenario-options button:nth-child(3) { border-right: 0; }
  .scenario-options button:nth-child(4),
  .scenario-options button:nth-child(5) { border-bottom: 0; }
  .demo-shell { grid-template-columns: minmax(0, 62fr) minmax(270px, 38fr); }
  .stage-track li { padding: 10px; }
  .stage-track strong { font-size: 12px; }
  .message-row { width: 86%; }
  .action-dock { grid-template-columns: 1fr; gap: 10px; }
  .action-buttons { justify-content: stretch; }
  .action-buttons button { flex: 1; }
  .project-sources { grid-template-columns: 1fr; }
  .knowledge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agenda-list li { grid-template-columns: 124px minmax(0, 1fr); }
}

@media (max-width: 780px) {
  .site-header { align-items: flex-start; padding: 11px 16px; }
  .brand img { width: 104px; height: 28px; }
  .brand span { display: none; }
  .prototype-flags { flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
  .prototype-flags strong,
  .prototype-flags span { padding: 4px 6px; font-size: 12px; }
  .page-shell { width: calc(100% - 28px); padding: 32px 0 46px; }
  .chapter-heading { grid-template-columns: 58px minmax(0, 1fr); gap: 12px; }
  .chapter-index { font-size: 48px; }
  .chapter-heading h1 { margin-top: 5px; font-size: 29px; }
  .chapter-lead { font-size: 14px; }
  .scenario-switcher { margin-top: 26px; }
  .scenario-switcher-head { min-height: 62px; padding: 9px 10px 9px 12px; }
  .scenario-switcher-head strong { font-size: 14px; }
  .scenario-options { grid-template-columns: 1fr; }
  .scenario-options button { min-height: 64px; border-right: 0; border-bottom: 1px solid var(--line) !important; }
  .scenario-options button:last-child { border-bottom: 0 !important; }
  .scenario-bar { flex-wrap: wrap; gap: 7px 10px; margin-top: 10px; padding: 10px 12px; }
  .scenario-bar strong { font-size: 13px; }
  .scenario-question { width: 100%; padding-left: 69px; }
  .stage-track { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .stage-track li { min-height: 76px; grid-template-columns: 1fr; gap: 7px; align-content: center; }
  .stage-track li:nth-child(2),
  .stage-track li:nth-child(4) { border-right: 0; }
  .stage-track li:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .stage-track li > span { justify-self: start; }
  .stage-track strong { display: block; font-size: 12px; }
  .demo-shell-stage,
  .is-embedded .demo-shell-stage { height: auto; }
  .demo-shell { position: static; width: 100%; height: auto; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
  .conversation {
    position: static;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-right: 0;
  }
  .conversation-header { min-height: 68px; padding: 12px 14px; }
  .advisor-avatar { width: 34px; height: 34px; }
  .advisor-identity h2 { font-size: 15px; }
  .advisor-identity p { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .live-status { font-size: 12px; }
  .message-list { min-height: 0; max-height: none; padding: 20px 13px 28px; overflow: visible; scrollbar-gutter: auto; }
  .message-row { width: 94%; }
  .system-event { width: 100%; }
  .decision-card { width: 100%; }
  .source-grid,
  .conflict-grid { grid-template-columns: 1fr; }
  .project-sources { grid-template-columns: 1fr; }
  .conflict-note { grid-column: 1; }
  .decision-actions { grid-template-columns: 1fr; }
  .knowledge-proof-chain { grid-template-columns: 1fr; }
  .knowledge-proof-chain i { justify-self: center; transform: rotate(90deg); }
  .document-diff,
  .data-before-after,
  .team-trial { grid-template-columns: 1fr; }
  .document-diff > i,
  .data-before-after > i,
  .team-trial > i { justify-self: center; transform: rotate(90deg); }
  .workflow-result-line,
  .validation-panel dl { grid-template-columns: 1fr; }
  .action-dock { padding: 13px; }
  .action-buttons { flex-direction: column; }
  .task-context { width: 100%; min-width: 0; padding: 24px 18px; border-top: 1px solid var(--line-strong); }
  .task-facts { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }
  .task-facts div:first-child { grid-column: 1 / -1; }
  .context-progress ol { grid-template-columns: 1fr 1fr; gap: 14px; }
  .context-progress li { min-height: 44px; }
  .context-progress li::after { display: none; }
  .site-footer { flex-direction: column; padding: 20px 16px; }
  .noscript-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .site-header { flex-direction: column; align-items: stretch; }
  .brand { width: 104px; flex: 0 0 auto; }
  .prototype-flags { justify-content: flex-start; }
  .chapter-heading { grid-template-columns: 1fr; }
  .chapter-index { font-size: 36px; }
  .chapter-heading h1 { font-size: 26px; overflow-wrap: anywhere; }
  .chapter-lead { overflow-wrap: anywhere; }
  .scenario-question { padding-left: 0; }
  .scenario-badge { margin-left: 0; }
  .stage-track strong { overflow-wrap: anywhere; }
  .conversation { grid-template-columns: minmax(0, 1fr); }
  .conversation-header { min-width: 0; max-width: 100%; align-items: flex-start; }
  .advisor-identity { flex: 1 1 auto; }
  .advisor-identity p { max-width: 150px; }
  .live-status { flex: 0 0 auto; }
  .message-list,
  .action-dock { width: 100%; min-width: 0; }
  .message-row { width: 100%; }
  .advisor .message-avatar { display: none; }
  .person-avatar { display: block; }
  .message-row { width: 96%; }
  .bubble { padding: 11px 12px; }
  .task-facts { grid-template-columns: 1fr; }
  .task-facts div:first-child { grid-column: auto; }
  .knowledge-grid { grid-template-columns: 1fr; }
  .scene-data.knowledge-grid { grid-template-columns: 1fr; }
  .agenda-list li { grid-template-columns: 1fr; }
  .scene-team.agenda-list li { grid-template-columns: 1fr; }
  .agenda-list b { grid-row: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}