add official Chrome feature demos

pages/demo/modern-web-guidance.md

@@ -0,0 +1,41 @@
+# Demo 5：Modern Web Guidance 官方 CLI
+
+<div class="grid grid-cols-[1.1fr_0.9fr] gap-8 mt-8">
+
+<div class="card-blue">
+<div class="font-semibold mb-3">现场命令</div>
+
+```bash
+npx modern-web-guidance@latest search "animate a dialog modal backdrop"
+npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"
+```
+
+</div>
+
+<div class="card-green">
+<div class="font-semibold mb-3">讲什么</div>
+<div class="space-y-2 text-sm">
+
+- AI coding agent 容易写旧方案
+- MWG 把现代 Web 指南变成可检索技能
+- search 找 use case，retrieve 拿具体指南
+- 指南会带 Baseline / fallback 意识
+
+</div>
+</div>
+
+</div>
+
+<div class="mt-8 card-amber text-sm">
+本地辅助页：<span class="font-mono">/demo/modern-web-guidance/index.html</span>；脚本：<span class="font-mono">scripts/demo-modern-web-guidance.sh</span>。
+</div>
+
+<!--
+官方依据：
+- https://developer.chrome.com/docs/modern-web-guidance/get-started
+
+现场顺序：
+1. 先跑 search，看官方返回的 use case 列表。
+2. 再跑 retrieve，看具体 Markdown 指南。
+3. 打开本地辅助页展示 dialog/top-layer 动画的现代写法。
+-->