style: 官网环境支持改为卡片网格布局

site/index.html

@@ -138,8 +138,40 @@
 
 <section class="container">
   <h2 class="section-title">环境支持</h2>
-  <p class="section-desc">Chrome 64+ / Firefox 63+ / Safari 11+ / Edge 79+ / Node.js 18+ / TypeScript 4.5+</p>
+  <p class="section-desc">所有现代浏览器原生支持，无需 polyfill</p>
-  <p style="text-align:center;color:var(--muted);font-size:13px;margin-top:8px">依赖 Web Animations API · Pointer Events · CSS Grid · CSS Custom Properties — 所有现代浏览器原生支持</p>
+  <div class="env-grid" style="display:grid; grid-template-columns:repeat(auto-fill,minmax(165px,1fr)); gap:12px;">
+    <div class="feature" style="text-align:center;padding:20px 16px;">
+      <div style="font-size:28px;margin-bottom:6px;">🌐</div>
+      <h3>Chrome</h3>
+      <p>64+</p>
+    </div>
+    <div class="feature" style="text-align:center;padding:20px 16px;">
+      <div style="font-size:28px;margin-bottom:6px;">🦊</div>
+      <h3>Firefox</h3>
+      <p>63+</p>
+    </div>
+    <div class="feature" style="text-align:center;padding:20px 16px;">
+      <div style="font-size:28px;margin-bottom:6px;">🧭</div>
+      <h3>Safari</h3>
+      <p>11+</p>
+    </div>
+    <div class="feature" style="text-align:center;padding:20px 16px;">
+      <div style="font-size:28px;margin-bottom:6px;">🪟</div>
+      <h3>Edge</h3>
+      <p>79+</p>
+    </div>
+    <div class="feature" style="text-align:center;padding:20px 16px;">
+      <div style="font-size:28px;margin-bottom:6px;">📦</div>
+      <h3>Node.js</h3>
+      <p>18+</p>
+    </div>
+    <div class="feature" style="text-align:center;padding:20px 16px;">
+      <div style="font-size:28px;margin-bottom:6px;">📘</div>
+      <h3>TypeScript</h3>
+      <p>4.5+</p>
+    </div>
+  </div>
+  <p style="text-align:center;color:var(--muted);font-size:13px;margin-top:16px">核心依赖：Web Animations API · Pointer Events · CSS Grid · CSS Custom Properties</p>
 </section>
 
 <section class="container">