fix(comments): 评论失败提示误报与瞬间评论区配色脱同步（5i T2/T3）

用户实测：「评论区总是显示加载失败，但是实际上是正常显示的，另外瞬间的评论区
的颜色和主题色不同步」。

T2 误报根因：软导航/二次挂载时 `#artalk-lib` 脚本标签已在 DOM，但 `window.Artalk`
尚未就绪，旧代码直接 `initArtalk()` → `!lib` 分支 `showRetry(true)` → 失败提示
永久显示；随后库加载完成、评论正常渲染，提示却留在页面上。
- 脚本标签在但库未就绪 → 等它的 load 事件再 init，不再立即判失败
- 失败提示只留真失败：script.onerror，或超时且确实未挂载
- `mounting` 在所有成功/失败路径复位（旧代码失败后永真，把 IO/锚点/滚底/重试全堵死）
- 成功路径清提示；三条触发路径与重试钮、astro:page-load 复核全部保留

T3 配色脱同步：18 个 `--at-color-*` 映射原先只写在 `#artalk-container` 作用域，
瞬间容器是 `mom-atk-<slug>` 不在其内 → 回落到 Artalk 默认白底。
- 抽成共享片段 geek/ArtalkThemeStyles.astro（两处引用，杜绝双份漂移）
- **额外挖出的第 4 个坑**：Artalk init 成功会给容器加 `.artalk` 类，其 CDN 样式表
  里 `.artalk{--at-color-bg:#fff}` 与裸属性选择器 `[data-artalk-panel]` 同特异性
  且后加载 → 平级后来居上。瞬间容器选择器加 `body` 前缀 (0,1,1) 压住；
  文章页是 `#artalk-container`(1,0,0) 本来就压得住，所以只有瞬间翻白

验证: 构建 exit 0；E2E 46/46；我独立复测——
      ① 文章页挂载成功且 #artalk-retry 保持 hidden
      ② 连发 3 次 astro:page-load 仍不误报、仍挂载
      ③ 瞬间评论区明暗两态 --at-color-bg 实测 rgb(255,255,255)/rgb(25,29,35)
         分别等于 --bg，容器带 .artalk 类（说明是 init 后真态）

Spec: 2026-11-02_blog-5i-fonts-polish (T2/T3)

Co-authored-by: GLM-5.3

src/components/geek/ArtalkThemeStyles.astro

@@ -0,0 +1,86 @@
+---
+/**
+ * Artalk 主题接管（Phase 5i T3：从 ArtalkComments 抽出的共享片段，两处组件共用，不复制两份）。
+ *
+ * 为什么要抽：文章页容器是 `#artalk-container`，瞬间页容器是 `mom-atk-<slug>`
+ * （带 `[data-artalk-panel]`）。原先 18 个 `--at-color-*` 映射只写在 `#artalk-container`
+ * 作用域，瞬间评论区因此回落 Artalk 官方默认色（白底深字）——暗色主题下尤其突兀。
+ * 现在一套片段覆盖三种宿主：文章容器 / 瞬间容器 / Artalk 弹层（挂在 body 下）。
+ *
+ * 依据：Artalk.css(v2.10) 全部表面由这 18 个变量驱动；值均为 `var(--token)`，
+ * 明暗随 `html[data-theme]` 翻转自动生效，一套规则双态成立。init 侧统一锁
+ * `darkMode: false`，防 Artalk 自带 `atk-dark-mode` 类与接管层打架。
+ */
+---
+
+<style is:global>
+  /* ── 18 个色彩变量：三种宿主一套映射 ──
+     瞬间容器必须用 `body [data-artalk-panel]`(0,1,1)：Artalk init 后会给容器加 `.artalk` 类，
+     它从 CDN 后加载的样式表里有 `.artalk{--at-color-bg:#fff…}`，与裸属性选择器 (0,1,0) 同特异性
+     且后来居上 → 暗色下瞬间评论区会翻白底（实测踩到）。文章容器是 ID(1,0,0) 本就压得住。 */
+  #artalk-container,
+  body [data-artalk-panel],
+  /* Artalk.css 运行时才挂 head，平级选择器后来居上：body 前缀提一级特异性保住覆盖 */
+  body .atk-layer-wrap {
+    --at-color-bg: var(--bg);
+    --at-color-bg-transl: color-mix(in oklab, var(--bg) 95%, transparent);
+    --at-color-bg-grey: var(--bg-soft);
+    --at-color-bg-grey-transl: color-mix(in oklab, var(--bg-soft) 95%, transparent);
+    --at-color-bg-light: var(--accent-soft);
+    --at-color-border: color-mix(in oklab, var(--ink-4) 55%, transparent); /* --line 在白底近不可见（视觉终审建议项），加深一档 */
+    --at-color-font: var(--ink-2);
+    --at-color-deep: var(--ink-1);
+    --at-color-sub: var(--ink-3);
+    --at-color-grey: var(--ink-3);
+    --at-color-meta: var(--ink-4);
+    --at-color-light: var(--ink-4);
+    --at-color-main: var(--accent);
+    /* 高度限高渐隐遮罩必须与 bg 同源，否则暗色下露白腿 */
+    --at-color-gradient: linear-gradient(180deg, transparent, var(--bg));
+    /* red/pink/yellow/green 语义功能色保留官方默认：纪律只管气质，不损语义 */
+  }
+
+  /* ── 气质对齐（不动排版）：字体、头像圆角、时间戳 mono、链接纪律 ── */
+  #artalk-container,
+  body [data-artalk-panel] {
+    font-family: var(--font-sans);
+  }
+  #artalk-container .atk-avatar img,
+  body [data-artalk-panel] .atk-avatar img {
+    border-radius: 8px;
+  }
+  #artalk-container .atk-meta,
+  #artalk-container .atk-ua,
+  body [data-artalk-panel] .atk-meta,
+  body [data-artalk-panel] .atk-ua {
+    font-family: var(--font-mono);
+    font-size: 12px;
+  }
+  #artalk-container .atk-copyright,
+  body [data-artalk-panel] .atk-copyright {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--ink-4);
+  }
+  #artalk-container .atk-textarea,
+  #artalk-container .atk-input,
+  #artalk-container .atk-send-btn,
+  #artalk-container .atk-btn,
+  body [data-artalk-panel] .atk-textarea,
+  body [data-artalk-panel] .atk-input,
+  body [data-artalk-panel] .atk-send-btn,
+  body [data-artalk-panel] .atk-btn {
+    border-radius: 8px;
+  }
+  #artalk-container .atk-content a,
+  body [data-artalk-panel] .atk-content a {
+    color: var(--accent);
+    text-decoration: underline;
+    text-decoration-color: color-mix(in oklab, var(--accent) 40%, transparent);
+    text-underline-offset: 0.2em;
+  }
+  #artalk-container .atk-content a:hover,
+  body [data-artalk-panel] .atk-content a:hover {
+    text-decoration-color: var(--accent);
+  }
+</style>