diff --git a/content/posts/assets/media-sample/sample-photo.jpg b/content/posts/assets/media-sample/sample-photo.jpg
new file mode 100644
index 0000000..7e17265
Binary files /dev/null and b/content/posts/assets/media-sample/sample-photo.jpg differ
diff --git a/content/posts/media-sample.md b/content/posts/media-sample.md
new file mode 100644
index 0000000..1b633ce
--- /dev/null
+++ b/content/posts/media-sample.md
@@ -0,0 +1,32 @@
+---
+title: "媒体支持样例"
+pubDate: 2026-10-25
+category: tech
+tags: [test, hidden]
+# 视觉/管线测试样张：draft:true 会被 getStaticPaths 全链路过滤（无静态产物），
+# 故用非 draft + hidden 标记保证 /archives/media-sample/ 产物存在；视觉测试完成后应删除本篇
+draft: false
+---
+
+本篇为三媒管线样张：验证 markdown 图片、HTML5 视频/音频在构建链路中的处理，供视觉回归与多端适配测试使用（hidden 标记，勿收录）。
+
+## 图片（markdown 语法，构建期经 sharp 优化）
+
+![样例照片](./assets/media-sample/sample-photo.jpg)
+
+*图注写法：斜体单独成段，photos 目录样片副本（1600×2400 竖幅）。*
+
+## 视频（raw HTML，H.264 320×240，ffmpeg testsrc2 生成）
+
+<!-- 视/音频走 public/media/ 绝对路径：raw HTML 相对引用不经打包器（曾实测 404），
+     与写作指南“大视频走仓外 store 的 /media/ 命名空间”对齐 -->
+
+<video controls preload="metadata" width="320" height="240" src="/media/media-sample/sample-video.mp4"></video>
+
+*原生 <video> 控件，无 JS；源文件 45KB，faststart 已开启。*
+
+## 音频（raw HTML，440Hz 正弦波 mp3）
+
+<audio controls preload="metadata" src="/media/media-sample/sample-audio.mp3"></audio>
+
+*原生 <audio> 控件；源文件 18KB。*
diff --git a/public/media/media-sample/sample-audio.mp3 b/public/media/media-sample/sample-audio.mp3
new file mode 100644
index 0000000..d91ea08
Binary files /dev/null and b/public/media/media-sample/sample-audio.mp3 differ
diff --git a/public/media/media-sample/sample-video.mp4 b/public/media/media-sample/sample-video.mp4
new file mode 100644
index 0000000..8e06d58
Binary files /dev/null and b/public/media/media-sample/sample-video.mp4 differ
diff --git a/src/components/ArtalkComments.astro b/src/components/ArtalkComments.astro
index 2794950..ac4c469 100644
--- a/src/components/ArtalkComments.astro
+++ b/src/components/ArtalkComments.astro
@@ -16,7 +16,8 @@ const { pageKey, pageTitle } = Astro.props;
      防 Artalk 自带 atk-dark-mode 类与接管层打架。弹层挂 body 下需单独同款映射 -->
 <style is:global>
   #artalk-container,
-  .atk-layer-wrap {
+  /* 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);
@@ -74,10 +75,21 @@ const { pageKey, pageTitle } = Astro.props;
   if (el) {
     const mount = () => {
       if (document.getElementById('artalk-lib')) return initArtalk();
+      // 官方部署文档要求 CSS 手动引入（JS 不自动注入）；此前缺失导致评论区自上线起跑在 UA 默认样式上
+      const cssReady = new Promise<void>((done) => {
+        if (document.getElementById('artalk-css')) return done();
+        const l = document.createElement('link');
+        l.id = 'artalk-css';
+        l.rel = 'stylesheet';
+        l.href = 'https://wait4x.online/artalk/dist/Artalk.css';
+        l.onload = () => done();
+        l.onerror = () => done(); // CSS 失败不阻塞：评论至少可用（降级 UA 样式）
+        document.head.appendChild(l);
+      });
       const s = document.createElement('script');
       s.id = 'artalk-lib';
       s.src = 'https://wait4x.online/artalk/dist/Artalk.js';
-      s.onload = initArtalk;
+      s.onload = () => { void cssReady.then(initArtalk); };
       document.head.appendChild(s);
     };
     const initArtalk = () => {