feat(website): 下载页改成「客户端 / 服务端 / 插件」切换，卡片照 ClassIsland 官网那排重做

进来默认停在**客户端**（原先那颗主按钮指着服务端），服务端与插件各是一个可切换的分组。

- 新增「装什么」分段控件（客户端 / 服务端 / 插件）：客户端一组一张卡，服务端一组两张
  （Windows + Linux），插件一组一张。它与版本选择器共用同一套指示器实现（beUI Tabs 的滑移；
  位置用 offsetLeft / offsetWidth 量，所以版本多了横滚之后也不会错位）；
- 卡片改成 ClassIsland 官网那一页的样子：平台图标 + 名称 + 系统要求 + 主按钮 + 变体下拉。
  第一个文件是主按钮，其余进 `<details>` 下拉（点别处或 Esc 收起）；插件那张只有一个文件，
  就不摆一个点不开的箭头；
- 主按钮下面留一行 mono 文件名与体积 —— 自托管场景里"点下去拿到哪个文件"是要看得见的；
- 首屏那颗主按钮跟着「版本 + 分组」走：默认是这一版客户端的安装版，切分组就跟着换；
- Linux 那个企鹅重画了一版：窄头宽肚 + 白脸 + 橙嘴橙脚（卡片底色恒为纸白，可以用实色）。
  原先那版头身糊成一团，44px 下认不出来；
- 卡片整排**左对齐**（跟着这一节的标题走）：参考图那一页整体居中，但本站在每一带都是
  左对齐的节奏，孤零零一张卡居中会跟标题对不上。窄屏下卡片单列、分裂按钮撑满卡片宽。

`<meta name="ch-version">` 那一行的版本号没有跟着工作区里的 1.2.0 一起提交：仓库里另外
13 个落点还是 1.1.2，单独把它改成 1.2.0 会让 `pnpm version:check` 在 HEAD 上直接失败。
等整批版本号一起提交时它会自然跟上（它是 `scripts/version.mjs` 的落点之一）。

website/download.html

@@ -89,9 +89,9 @@
 
             <!-- 版本选择：Tab 由 assets/download.js 按发布列表建出来 -->
             <div class="dl-pick intro-seq" style="--intro-delay: 250ms">
-              <p class="dl-pick-label" id="ver-label">版本</p>
-              <div class="dl-tabs" role="tablist" aria-labelledby="ver-label" id="ver-tabs">
-                <span class="dl-tabs-indicator" id="ver-indicator" aria-hidden="true"></span>
+              <p class="sr-only" id="ver-label">选择版本</p>
+              <div class="dl-seg" role="tablist" aria-labelledby="ver-label" id="ver-tabs">
+                <span class="dl-seg-indicator" id="ver-indicator" aria-hidden="true"></span>
               </div>
               <p class="dl-pick-note" id="ver-note" role="status">正在读取版本列表……</p>
             </div>
@@ -111,7 +111,7 @@
                 href="https://github.com/LoveChengke/ClassHelper/releases/latest"
                 data-press="0.93"
               >
-                下最新版服务端
+                下载最新版客户端
               </a>
               <a
                 class="btn btn-line"
@@ -134,18 +134,28 @@
         </div>
       </section>
 
-      <!-- ═══════════════════════ 这一版里有什么 ═══════════════════════ -->
+      <!-- ═══════════════════════ 装什么、装到哪台机器 ═══════════════════════ -->
       <section class="band band-paper" id="pick">
         <div class="wrap">
-          <h2 class="h2">这一版里有这几个包</h2>
+          <h2 class="h2">装什么，挑一下</h2>
           <p class="lead narrow">
-            按「装在哪台机器上」挑：教室机器装班级端，服务器装服务端，教室大屏再给 ClassIsland 加一个插件。
-            四个包互不依赖顺序，但
+            四个交付物互不依赖安装顺序，但
             <strong>服务端要先有一台机器跑着</strong>
-            ，别的才连得上。
+            ，另外三个才连得上 —— 不确定就先切到「服务端」看一眼。
           </p>
 
-          <!-- 卡片由 assets/download.js 按当前选中的版本渲染 -->
+          <div class="dl-groups">
+            <p class="dl-pick-label" id="group-label">装什么</p>
+            <div class="dl-seg" role="tablist" aria-labelledby="group-label" id="group-tabs">
+              <span class="dl-seg-indicator" id="group-indicator" aria-hidden="true"></span>
+              <button class="dl-seg-item" type="button" role="tab" data-value="client">客户端</button>
+              <button class="dl-seg-item" type="button" role="tab" data-value="server">服务端</button>
+              <button class="dl-seg-item" type="button" role="tab" data-value="plugin">插件</button>
+            </div>
+            <p class="dl-pick-note" id="group-note" role="status"></p>
+          </div>
+
+          <!-- 卡片由 assets/download.js 按「当前版本 + 当前分组」渲染 -->
           <div class="dl-grid" id="dl-grid" role="tabpanel" tabindex="0" aria-live="polite"></div>
 
           <p class="dl-note" id="dl-note"></p>