add official Chrome feature demos

public/demo/baseline/index.html

@@ -0,0 +1,70 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Baseline Demo</title>
+    <link rel="stylesheet" href="../shared.css" />
+  </head>
+  <body>
+    <main class="shell">
+      <aside class="rail">
+        <p class="eyebrow">Web Platform</p>
+        <h1>Baseline</h1>
+        <p class="lead">演示如何把“能不能用某个 Web API”变成特性状态、运行检测和 fallback 策略。</p>
+        <nav class="nav" aria-label="Demo navigation">
+          <a href="../index.html"><span class="num">0</span><span>返回总览</span></a>
+          <a href="../webmcp/index.html"><span class="num">1</span><span>WebMCP</span></a>
+          <a href="../prompt-api/index.html"><span class="num">2</span><span>Prompt API</span></a>
+          <a href="../devtools-agents/index.html"><span class="num">3</span><span>DevTools Agents</span></a>
+          <a href="../modern-web-guidance/index.html"><span class="num">4</span><span>Modern Web Guidance</span></a>
+          <a class="active" href="./index.html"><span class="num">5</span><span>Baseline</span></a>
+          <a href="../view-transitions/index.html"><span class="num">6</span><span>View Transitions</span></a>
+        </nav>
+        <div class="note">本地矩阵用于现场讲述；生产判断仍应回到官方 Baseline 数据和项目目标浏览器。</div>
+      </aside>
+
+      <section class="stage">
+        <div class="hero">
+          <section class="statement">
+            <p class="eyebrow">Can I ship it?</p>
+            <h2>从“Chrome 支持了”升级到“目标用户能稳定用”。</h2>
+            <p>
+              Baseline 的价值不是替代 feature detection，而是把团队讨论从版本号转成特性成熟度和采用策略。
+            </p>
+          </section>
+          <aside class="metrics">
+            <div class="metric"><strong id="ready-count">0</strong><span>当前环境可直接运行的能力</span></div>
+            <div class="metric"><strong id="enhanced-count">0</strong><span>适合渐进增强的能力</span></div>
+            <div class="metric"><strong id="blocked-count">0</strong><span>需要 fallback 或实验开关</span></div>
+          </aside>
+        </div>
+
+        <section class="two-col">
+          <div class="panel">
+            <p class="eyebrow">Feature matrix</p>
+            <h2>本地特性检测</h2>
+            <table class="table">
+              <thead>
+                <tr>
+                  <th>能力</th>
+                  <th>运行检测</th>
+                  <th>采用建议</th>
+                </tr>
+              </thead>
+              <tbody id="feature-table"></tbody>
+            </table>
+          </div>
+
+          <aside class="console">
+            <p class="eyebrow">Decision log</p>
+            <h2>判断依据</h2>
+            <pre id="log">正在检测...</pre>
+          </aside>
+        </section>
+      </section>
+    </main>
+
+    <script type="module" src="./baseline.js"></script>
+  </body>
+</html>