diff --git a/README.md b/README.md
index f89595b..24a212a 100644
--- a/README.md
+++ b/README.md
@@ -38,6 +38,14 @@ Map Life Multiverse 是一个可复用的 Codex Skill，用于进行证据驱动
 4. **风险属于战略本身**：每条路线都包含隐性成本、依赖风险、机会成本和预警信号。
 5. **隐私最小化**：使用者可以跳过敏感问题，只提供对分析真正必要的信息。
 
+## 虚构示例
+
+[![人生多元宇宙虚构示例报告预览](examples/demo-report-preview.png)](examples/demo-report.html)
+
+仓库提供了一份[完整的交互式 HTML 示例报告](examples/demo-report.html)，用 2186 年火星穹顶生态维护员这一科幻案例，展示证据摘要、平行人生地图、可调路线比较、风险架构和可逆实验。示例中的世界、人物、制度、经历、评分、路线和数字均为虚构构造，不对应现实中的任何个人或组织。
+
+下载 `examples/demo-report.html` 后，可直接使用浏览器打开；文件不依赖外部服务，也不会上传数据。
+
 ## 安装
 
 ### 仓库级使用
@@ -138,4 +146,3 @@ $map-life-multiverse
 ## License
 
 [MIT License](LICENSE)
-
diff --git a/examples/demo-report-preview.png b/examples/demo-report-preview.png
new file mode 100644
index 0000000..5797813
Binary files /dev/null and b/examples/demo-report-preview.png differ
diff --git a/examples/demo-report.html b/examples/demo-report.html
new file mode 100644
index 0000000..869491b
--- /dev/null
+++ b/examples/demo-report.html
@@ -0,0 +1,441 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="Map Life Multiverse 的 2186 年火星科幻 HTML 示例报告。">
+  <link rel="icon" href="data:,">
+  <title>人生多元宇宙 · 火星科幻示例 M-2186</title>
+  <style>
+    :root {
+      --paper: #eee5d4;
+      --paper-2: #dfd2bd;
+      --ink: #242820;
+      --muted: #667066;
+      --line: rgba(36, 40, 32, .17);
+      --olive: #456e61;
+      --coral: #a84c2d;
+      --blue: #476c83;
+      --plum: #715e82;
+      --amber: #b77c31;
+      --cream: #fff8ea;
+      --shadow: 0 18px 50px rgba(55, 40, 30, .11);
+      --radius: 24px;
+    }
+
+    * { box-sizing: border-box; }
+    html { scroll-behavior: smooth; }
+    body {
+      margin: 0;
+      color: var(--ink);
+      background:
+        radial-gradient(circle at 90% 4%, rgba(168, 76, 45, .16), transparent 26rem),
+        radial-gradient(circle at 7% 22%, rgba(69, 110, 97, .12), transparent 30rem),
+        var(--paper);
+      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Noto Sans CJK SC", sans-serif;
+      line-height: 1.6;
+    }
+
+    button, input { font: inherit; }
+    button { color: inherit; }
+    a { color: inherit; }
+
+    .shell { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
+
+    .topbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 24px;
+      padding: 28px 0 20px;
+      border-bottom: 1px solid var(--line);
+    }
+
+    .brand { display: flex; align-items: center; gap: 12px; font-weight: 700; letter-spacing: -.02em; }
+    .brand-mark {
+      width: 34px;
+      height: 34px;
+      border: 1px solid var(--ink);
+      border-radius: 50%;
+      display: grid;
+      place-items: center;
+      position: relative;
+    }
+    .brand-mark::before, .brand-mark::after {
+      content: "";
+      position: absolute;
+      border: 1px solid var(--coral);
+      border-radius: 50%;
+      inset: 7px;
+    }
+    .brand-mark::after { inset: 13px; background: var(--coral); }
+    .topbar nav { display: flex; gap: 22px; color: var(--muted); font-size: 13px; }
+    .topbar nav a { text-decoration: none; }
+
+    .demo-flag {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 7px 11px;
+      border: 1px solid rgba(184, 95, 67, .36);
+      border-radius: 999px;
+      color: var(--coral);
+      font-size: 12px;
+      font-weight: 700;
+      letter-spacing: .08em;
+      text-transform: uppercase;
+      background: rgba(255, 250, 240, .62);
+    }
+
+    .demo-flag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }
+
+    .hero {
+      display: grid;
+      grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
+      gap: 70px;
+      padding: 74px 0 70px;
+      align-items: end;
+    }
+
+    .eyebrow { margin: 0 0 20px; color: var(--coral); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
+    h1 { margin: 0; max-width: 780px; font-family: Georgia, "Songti SC", serif; font-size: clamp(44px, 5.5vw, 72px); font-weight: 500; line-height: 1.02; letter-spacing: -.045em; }
+    h1 .hero-line { white-space: nowrap; }
+    h1 em { color: var(--coral); font-style: normal; }
+    .hero-lede { max-width: 670px; margin: 28px 0 0; color: var(--muted); font-size: 18px; }
+
+    .thesis-card {
+      padding: 28px;
+      border-top: 2px solid var(--ink);
+      border-bottom: 1px solid var(--line);
+    }
+    .thesis-card .num { color: var(--coral); font-family: Georgia, serif; font-size: 54px; line-height: 1; }
+    .thesis-card h2 { margin: 18px 0 10px; font-family: Georgia, "Songti SC", serif; font-size: 26px; font-weight: 500; line-height: 1.25; }
+    .thesis-card p { margin: 0; color: var(--muted); font-size: 14px; }
+
+    .evidence-strip {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      border-top: 1px solid var(--line);
+      border-bottom: 1px solid var(--line);
+    }
+    .evidence-item { min-height: 132px; padding: 24px 22px; border-right: 1px solid var(--line); }
+    .evidence-item:last-child { border-right: 0; }
+    .evidence-item span { display: block; margin-bottom: 18px; color: var(--muted); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
+    .evidence-item strong { display: block; font-family: Georgia, "Songti SC", serif; font-size: 21px; font-weight: 500; line-height: 1.35; }
+
+    section { padding: 88px 0; }
+    .section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 40px; }
+    .section-kicker { color: var(--coral); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
+    .section-head h2 { margin: 8px 0 0; font-family: Georgia, "Songti SC", serif; font-size: clamp(34px, 5vw, 58px); font-weight: 500; line-height: 1.08; letter-spacing: -.035em; }
+    .section-head p { margin: 0; color: var(--muted); }
+
+    .multiverse-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(310px, .85fr); gap: 24px; }
+    .map-panel, .route-panel, .compare-panel, .risk-card, .experiment-card {
+      border: 1px solid var(--line);
+      border-radius: var(--radius);
+      background: rgba(255, 250, 240, .72);
+      box-shadow: var(--shadow);
+    }
+
+    .map-panel { position: relative; min-height: 510px; overflow: hidden; }
+    .map-panel::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      background-image: radial-gradient(rgba(32, 38, 31, .14) .8px, transparent .8px);
+      background-size: 18px 18px;
+      mask-image: linear-gradient(to bottom, black, transparent 92%);
+    }
+    .orbit { position: absolute; border: 1px dashed rgba(32, 38, 31, .18); border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); }
+    .orbit.one { width: 260px; height: 260px; }
+    .orbit.two { width: 440px; height: 440px; }
+    .origin {
+      position: absolute;
+      left: 50%; top: 50%; transform: translate(-50%, -50%);
+      width: 112px; height: 112px; border-radius: 50%;
+      background: var(--ink); color: var(--cream);
+      display: grid; place-items: center; text-align: center;
+      box-shadow: 0 14px 40px rgba(32, 38, 31, .26);
+      z-index: 2;
+    }
+    .origin small { display: block; opacity: .65; font-size: 10px; letter-spacing: .12em; }
+    .origin strong { font-family: Georgia, serif; font-size: 17px; font-weight: 500; }
+    .route-node {
+      --node: var(--olive);
+      position: absolute;
+      z-index: 3;
+      width: 142px;
+      min-height: 70px;
+      padding: 11px 14px;
+      border: 1px solid var(--node);
+      border-radius: 18px;
+      background: var(--cream);
+      text-align: left;
+      cursor: pointer;
+      transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
+    }
+    .route-node:hover, .route-node[aria-pressed="true"] { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(32, 38, 31, .14); background: color-mix(in srgb, var(--node) 10%, var(--cream)); }
+    .route-node b { display: block; margin-bottom: 3px; font-size: 14px; }
+    .route-node small { color: var(--muted); font-size: 11px; }
+    .route-node::before { content: ""; width: 8px; height: 8px; display: block; margin-bottom: 7px; border-radius: 50%; background: var(--node); }
+    .route-node[data-route="dome"] { --node: var(--olive); left: 7%; top: 12%; }
+    .route-node[data-route="caravan"] { --node: var(--coral); right: 5%; top: 13%; }
+    .route-node[data-route="archive"] { --node: var(--blue); right: 7%; bottom: 10%; }
+    .route-node[data-route="signal"] { --node: var(--plum); left: 6%; bottom: 10%; }
+    .route-node[data-route="shadow"] { --node: var(--amber); left: 50%; bottom: 4%; transform: translateX(-50%); }
+    .route-node[data-route="shadow"]:hover, .route-node[data-route="shadow"][aria-pressed="true"] { transform: translateX(-50%) translateY(-4px); }
+
+    .route-panel { padding: 34px; min-height: 510px; display: flex; flex-direction: column; }
+    .route-index { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
+    .route-color { width: 28px; height: 4px; border-radius: 999px; background: var(--olive); }
+    .route-panel h3 { margin: 32px 0 8px; font-family: Georgia, "Songti SC", serif; font-size: 36px; font-weight: 500; line-height: 1.15; }
+    .route-tagline { margin: 0 0 26px; color: var(--muted); }
+    .route-question { margin: 0 0 26px; padding: 18px; border-left: 3px solid var(--olive); background: rgba(96, 113, 83, .08); font-family: Georgia, "Songti SC", serif; font-size: 19px; }
+    .route-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: auto; }
+    .route-facts span { display: block; color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
+    .route-facts strong { display: block; margin-top: 4px; font-size: 14px; font-weight: 600; }
+    .route-test { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
+    .route-test span { color: var(--coral); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
+    .route-test p { margin: 6px 0 0; font-size: 14px; }
+
+    .compare-wrap { background: var(--ink); color: var(--cream); }
+    .compare-wrap .section-head p { color: rgba(255, 250, 240, .64); }
+    .compare-panel { display: grid; grid-template-columns: 300px 1fr; gap: 42px; padding: 34px; color: var(--ink); }
+    .control { margin-bottom: 22px; }
+    .control label { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: 13px; }
+    .control output { color: var(--coral); font-weight: 700; }
+    input[type="range"] { width: 100%; accent-color: var(--coral); }
+    .chart-row { display: grid; grid-template-columns: 110px 1fr 40px; align-items: center; gap: 12px; margin-bottom: 20px; }
+    .chart-row span { font-size: 13px; }
+    .bar { height: 13px; border-radius: 999px; background: var(--paper-2); overflow: hidden; }
+    .bar i { display: block; height: 100%; width: 50%; border-radius: inherit; background: var(--olive); transition: width .35s ease; }
+    .chart-row strong { font-size: 13px; text-align: right; }
+    .chart-note { margin: 28px 0 0; color: var(--muted); font-size: 12px; }
+
+    .risk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
+    .risk-card { padding: 28px; box-shadow: none; }
+    .risk-no { color: var(--coral); font-family: Georgia, serif; font-size: 30px; }
+    .risk-card h3 { margin: 18px 0 8px; font-family: Georgia, "Songti SC", serif; font-size: 22px; font-weight: 500; }
+    .risk-card p { margin: 0; color: var(--muted); font-size: 14px; }
+    .risk-signal { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; }
+    .risk-signal b { color: var(--coral); }
+
+    .experiment-card { display: grid; grid-template-columns: 190px 1fr; gap: 34px; padding: 36px; }
+    .experiment-number { font-family: Georgia, serif; font-size: 84px; line-height: .9; color: var(--coral); }
+    .experiment-card h3 { margin: 0 0 12px; font-family: Georgia, "Songti SC", serif; font-size: 32px; font-weight: 500; }
+    .experiment-card p { margin: 0; color: var(--muted); }
+    .experiment-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 26px; }
+    .experiment-grid div { padding-top: 14px; border-top: 1px solid var(--line); }
+    .experiment-grid span { color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
+    .experiment-grid strong { display: block; margin-top: 5px; font-size: 14px; }
+
+    footer { padding: 40px 0 54px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
+    footer .shell { display: flex; justify-content: space-between; gap: 20px; }
+
+    @media (max-width: 900px) {
+      .hero, .section-head, .multiverse-grid, .compare-panel { grid-template-columns: 1fr; }
+      .hero { gap: 40px; padding-top: 52px; }
+      .evidence-strip { grid-template-columns: 1fr 1fr; }
+      .evidence-item:nth-child(2) { border-right: 0; }
+      .evidence-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
+      .risk-grid { grid-template-columns: 1fr; }
+    }
+
+    @media (max-width: 620px) {
+      .shell { width: min(100% - 24px, 1180px); }
+      .topbar { gap: 12px; }
+      .topbar nav, .demo-flag { display: none; }
+      .hero { padding: 42px 0 48px; }
+      h1 { font-size: 39px; }
+      .evidence-strip, .experiment-card, .experiment-grid { grid-template-columns: 1fr; }
+      .evidence-item { border-right: 0; border-bottom: 1px solid var(--line); }
+      .map-panel { min-height: 590px; }
+      .orbit.one { width: 210px; height: 210px; }
+      .orbit.two { width: 330px; height: 330px; }
+      .route-node { width: 124px; padding: 9px 11px; }
+      .route-node[data-route="dome"] { left: 3%; top: 8%; }
+      .route-node[data-route="caravan"] { right: 3%; top: 8%; }
+      .route-node[data-route="archive"] { right: 3%; bottom: 13%; }
+      .route-node[data-route="signal"] { left: 3%; bottom: 13%; }
+      .route-node[data-route="shadow"] { bottom: 1%; }
+      .route-panel { padding: 26px; }
+      .compare-panel { padding: 24px; }
+      .chart-row { grid-template-columns: 92px 1fr 34px; }
+      footer .shell { display: block; }
+    }
+  </style>
+</head>
+<body>
+  <header class="shell topbar">
+    <div class="brand"><span class="brand-mark" aria-hidden="true"></span>Map Life Multiverse</div>
+    <nav aria-label="报告导航">
+      <a href="#routes">平行人生</a>
+      <a href="#compare">路线比较</a>
+      <a href="#risks">风险</a>
+      <a href="#experiment">实验</a>
+    </nav>
+    <span class="demo-flag">Fictional Mars case</span>
+  </header>
+
+  <main>
+    <div class="shell hero">
+      <div>
+        <p class="eyebrow">M-2186 · 科幻世界 · 阿尔卡迪亚穹顶</p>
+        <h1><span class="hero-line">当世界只有一座穹顶，</span><br><span class="hero-line">离开与留下</span><br><span class="hero-line">都需要<em>重新设计</em>。</span></h1>
+        <p class="hero-lede">角色代号「苔藓-42」诞生于 2186 年火星，是阿尔卡迪亚穹顶的授粉系统维护员。报告把生态债务、共同体责任与五种星际生活结构转化成可以试验的路线。</p>
+      </div>
+      <aside class="thesis-card">
+        <div class="num">01</div>
+        <h2>真正的瓶颈不是技能，而是每次转向都牵动一整套生命支持系统。</h2>
+        <p>角色、基地、制度、经历、评分、路线和数字均为科幻构造，不对应现实世界。</p>
+      </aside>
+    </div>
+
+    <div class="shell evidence-strip" aria-label="示例证据摘要">
+      <div class="evidence-item"><span>Evidence 01</span><strong>在 47 次藻氧循环故障中完成无伤恢复</strong></div>
+      <div class="evidence-item"><span>Evidence 02</span><strong>用 180 个火星日训练出三名授粉无人机学徒</strong></div>
+      <div class="evidence-item"><span>Tension</span><strong>渴望离开穹顶，却也是社区唯一的旧协议译读者</strong></div>
+      <div class="evidence-item"><span>Unknown</span><strong>身体能否适应轨道低重力与荒原辐射仍未知</strong></div>
+    </div>
+
+    <section id="routes" class="shell">
+      <div class="section-head">
+        <div><span class="section-kicker">01 · Multiverse</span><h2>五条路线，五种星际日常</h2></div>
+        <p>点击节点查看路线。差异不只在任务名称，而在栖居环境、生态责任、同伴密度、身体代价与失败方式。</p>
+      </div>
+
+      <div class="multiverse-grid">
+        <div class="map-panel" aria-label="平行人生路线图">
+          <div class="orbit one" aria-hidden="true"></div>
+          <div class="orbit two" aria-hidden="true"></div>
+          <div class="origin"><div><small>NOW</small><strong>安全与自由<br>如何交换</strong></div></div>
+          <button class="route-node" data-route="dome" aria-pressed="true"><b>穹顶守护者</b><small>生命支持 × 继任培养</small></button>
+          <button class="route-node" data-route="caravan" aria-pressed="false"><b>荒原修复车队</b><small>移动维修 × 边缘聚落</small></button>
+          <button class="route-node" data-route="archive" aria-pressed="false"><b>轨道种子档案员</b><small>低重力 × 物种记忆</small></button>
+          <button class="route-node" data-route="signal" aria-pressed="false"><b>深空广播园丁</b><small>栽培知识 × 延迟通信</small></button>
+          <button class="route-node" data-route="shadow" aria-pressed="false"><b>警报同化</b><small>值守 × 依赖 × 无法离舱</small></button>
+        </div>
+
+        <article class="route-panel" aria-live="polite">
+          <div class="route-index"><span id="route-index">Route 01</span><i class="route-color" id="route-color"></i></div>
+          <h3 id="route-title">穹顶守护者</h3>
+          <p class="route-tagline" id="route-tagline">留在阿尔卡迪亚，但让系统不再依赖一个人。</p>
+          <blockquote class="route-question" id="route-question">如果先培养继任者，留下是否也能成为一种主动选择？</blockquote>
+          <div class="route-facts">
+            <div><span>日常结构</span><strong id="route-day">60% 生命支持 · 20% 学徒训练 · 20% 协议重写</strong></div>
+            <div><span>主要风险</span><strong id="route-risk">社区继续把单点依赖误认为可靠</strong></div>
+          </div>
+          <div class="route-test"><span>12 Sol 可逆实验</span><p id="route-test">让学徒独立接管一次完整夜班，仅保留延迟求援通道，记录故障、焦虑与实际自主率。</p></div>
+        </article>
+      </div>
+    </section>
+
+    <section id="compare" class="compare-wrap">
+      <div class="shell">
+        <div class="section-head">
+          <div><span class="section-kicker">02 · Comparison</span><h2>价值权重改变，答案也会改变</h2></div>
+          <p>拖动权重观察路线排序。指数只用于讨论，不代表成功概率，也不能替代致命约束判断。</p>
+        </div>
+
+        <div class="compare-panel">
+          <div>
+            <div class="control"><label for="autonomy">移动自由 <output id="autonomy-out">30</output></label><input id="autonomy" type="range" min="0" max="50" value="30"></div>
+            <div class="control"><label for="stability">栖居安全 <output id="stability-out">30</output></label><input id="stability" type="range" min="0" max="50" value="30"></div>
+            <div class="control"><label for="meaning">生态贡献 <output id="meaning-out">25</output></label><input id="meaning" type="range" min="0" max="50" value="25"></div>
+            <div class="control"><label for="recovery">同伴联结 <output id="recovery-out">15</output></label><input id="recovery" type="range" min="0" max="50" value="15"></div>
+          </div>
+          <div>
+            <div class="chart-row" data-chart="dome"><span>穹顶守护者</span><div class="bar"><i></i></div><strong>—</strong></div>
+            <div class="chart-row" data-chart="caravan"><span>荒原车队</span><div class="bar"><i></i></div><strong>—</strong></div>
+            <div class="chart-row" data-chart="archive"><span>种子档案</span><div class="bar"><i></i></div><strong>—</strong></div>
+            <div class="chart-row" data-chart="signal"><span>深空广播</span><div class="bar"><i></i></div><strong>—</strong></div>
+            <p class="chart-note">演示评分来自虚构世界设定。正式报告会在每个评分旁展示理由、反证和不确定性。</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section id="risks" class="shell">
+      <div class="section-head">
+        <div><span class="section-kicker">03 · Risk architecture</span><h2>穹顶不会突然崩塌，依赖会先悄悄变深</h2></div>
+        <p>风险不是最后附加的一页。每个星际风险都需要预警信号、预防规则和恢复动作。</p>
+      </div>
+      <div class="risk-grid">
+        <article class="risk-card"><span class="risk-no">01</span><h3>单人协议依赖</h3><p>旧系统只有一名译读者，社区把英雄式值守误当作安全冗余。</p><div class="risk-signal"><b>预警：</b>十个火星日内三次非必要唤醒。</div></article>
+        <article class="risk-card"><span class="risk-no">02</span><h3>辐射剂量慢性累积</h3><p>荒原自由带来难以感知的身体成本，兴奋感会压低风险判断。</p><div class="risk-signal"><b>预警：</b>个人剂量表连续两周期接近橙区。</div></article>
+        <article class="risk-card"><span class="risk-no">03</span><h3>任务吞没私人生命</h3><p>当“保护穹顶”成为唯一身份，非职责关系会逐渐失去语言。</p><div class="risk-signal"><b>预警：</b>连续二十个火星日没有一次非任务谈话。</div></article>
+      </div>
+    </section>
+
+    <section id="experiment" class="shell">
+      <div class="section-head">
+        <div><span class="section-kicker">04 · Reversible experiment</span><h2>先离开十八个火星日，而不是永久离舱</h2></div>
+        <p>用一次有返回窗口的荒原维修任务，验证移动生活的身体代价、协作密度与真实吸引力。</p>
+      </div>
+      <article class="experiment-card">
+        <div class="experiment-number">18</div>
+        <div>
+          <h3>随荒原修复车队完成一次边缘聚落任务</h3>
+          <p>携带便携藻氧模块前往虚构的「赤道裂谷第七站」，在不解除穹顶职位的情况下，记录辐射剂量、睡眠、同伴冲突、维修判断和返航后的恢复时间。</p>
+          <div class="experiment-grid">
+            <div><span>成功阈值</span><strong>独立修复一套循环系统且返航后七日恢复</strong></div>
+            <div><span>停止条件</span><strong>剂量进入橙区或连续两夜认知测试下降</strong></div>
+            <div><span>第 30 Sol 决定</span><strong>加入车队、季节轮换、留守培养或停止</strong></div>
+          </div>
+        </div>
+      </article>
+    </section>
+  </main>
+
+  <footer>
+    <div class="shell"><span>Map Life Multiverse · Fictional Mars Case M-2186</span><span>火星基地、角色、经历、数据、评分和情境均为科幻构造。</span></div>
+  </footer>
+
+  <script>
+    const routes = {
+      dome: { index: "Route 01", title: "穹顶守护者", tagline: "留在阿尔卡迪亚，但让系统不再依赖一个人。", question: "如果先培养继任者，留下是否也能成为一种主动选择？", day: "60% 生命支持 · 20% 学徒训练 · 20% 协议重写", risk: "社区继续把单点依赖误认为可靠", test: "让学徒独立接管一次完整夜班，仅保留延迟求援通道，记录故障、焦虑与实际自主率。", color: "#456e61", tint: "rgba(69,110,97,.09)" },
+      caravan: { index: "Route 02", title: "荒原修复车队", tagline: "在边缘聚落之间移动，修复被遗忘的生命支持系统。", question: "如果自由意味着承担辐射和返航风险，这种移动还值得吗？", day: "18 Sol 出舱 · 6 Sol 维修 · 12 Sol 穹顶恢复", risk: "身体剂量与团队隔离成本被浪漫化", test: "完成一次有返航窗口的十八 Sol 任务，持续记录剂量、睡眠和协作冲突。", color: "#a84c2d", tint: "rgba(168,76,45,.09)" },
+      archive: { index: "Route 03 · Surprise", title: "轨道种子档案员", tagline: "在低重力种子库中维护尚未登陆火星的物种记忆。", question: "如果不再维修当下，而是守护尚未发生的生态，会失去什么？", day: "轨道编目 · 远程萌发试验 · 三分钟通信延迟", risk: "低重力去适应与长期独处侵蚀地表关系", test: "远程完成一组种子失活诊断，并参加六 Sol 模拟隔离舱。", color: "#476c83", tint: "rgba(71,108,131,.09)" },
+      signal: { index: "Route 04 · Quiet", title: "深空广播园丁", tagline: "把栽培知识压缩成可跨越通信延迟的声音档案。", question: "如果不能亲自抵达，知识能否替自己去更远的聚落？", day: "温室观察 · 声音编目 · 延迟问答 · 小型共耕", risk: "收听数字制造影响错觉，缺少真实田野反馈", test: "发布三份不超过七分钟的故障广播，并收集两个聚落的修正记录。", color: "#715e82", tint: "rgba(113,94,130,.09)" },
+      shadow: { index: "Shadow future", title: "警报同化", tagline: "每一次救援都更证明系统离不开自己。", question: "如果警报成为唯一的价值证明，私人生命还剩下什么？", day: "全天候值守 · 临时睡眠 · 无继任者 · 无离舱许可", risk: "可靠性变成无法退出的制度性依赖", test: "公开全部非必要唤醒记录，并强制执行一次由继任者处理的低风险故障。", color: "#b77c31", tint: "rgba(183,124,49,.10)" }
+    };
+
+    const ids = ["index", "title", "tagline", "question", "day", "risk", "test"];
+    document.querySelectorAll(".route-node").forEach(button => {
+      button.addEventListener("click", () => {
+        const route = routes[button.dataset.route];
+        document.querySelectorAll(".route-node").forEach(node => node.setAttribute("aria-pressed", String(node === button)));
+        ids.forEach(id => document.getElementById(`route-${id}`).textContent = route[id]);
+        document.getElementById("route-color").style.background = route.color;
+        const quote = document.getElementById("route-question");
+        quote.style.borderColor = route.color;
+        quote.style.background = route.tint;
+      });
+    });
+
+    const scores = {
+      dome: [1.8, 4.9, 4.6, 4.7],
+      caravan: [4.9, 2.1, 4.4, 3.6],
+      archive: [3.8, 4.1, 4.8, 2.0],
+      signal: [3.5, 4.0, 3.9, 4.2]
+    };
+    const colors = { dome: "#456e61", caravan: "#a84c2d", archive: "#476c83", signal: "#715e82" };
+    const controls = ["autonomy", "stability", "meaning", "recovery"];
+
+    function recalculate() {
+      const weights = controls.map(id => Number(document.getElementById(id).value));
+      const total = weights.reduce((sum, value) => sum + value, 0) || 1;
+      controls.forEach(id => document.getElementById(`${id}-out`).value = document.getElementById(id).value);
+      Object.entries(scores).forEach(([key, values]) => {
+        const result = values.reduce((sum, value, index) => sum + value * weights[index], 0) / total;
+        const row = document.querySelector(`[data-chart="${key}"]`);
+        row.querySelector("i").style.width = `${result / 5 * 100}%`;
+        row.querySelector("i").style.background = colors[key];
+        row.querySelector("strong").textContent = result.toFixed(1);
+      });
+    }
+    controls.forEach(id => document.getElementById(id).addEventListener("input", recalculate));
+    recalculate();
+  </script>
+</body>
+</html>
