流体交互层：按压反馈 + 真半透明材质 + 主题交叉过渡 + 弹层材质化

按 apple-design（Designing Fluid Interfaces）审查落地：
- 全站补 :active 按压缩放反馈（按钮/tab/链接/命令面板/前后栏导航），交互元素加 touch-action
- TopBar、首页标题栏、浮动主题钮改 color-mix 半透明 + blur 真材质，配 reduced-transparency 回退
- 主题切换 250ms 交叉过渡（theme-anim 瞬时类），消除亮度突变
- CommandPalette/ShortcutsPanel 过 <Transition name="pop">：scrim 淡入 + 面板自顶部锚点 scale 进入，退出原路返回
- 首页标题栏收缩由二值跳变改为滚动进度 --sq 连续插值（16–56px）
- reduced-motion 例外：弹层保留短交叉淡入，禁位移与主题过渡
- 触控目标增大（主题钮 40/44px、tab、后台导航项），文章大标题负字距 + 收紧行高

frontend/src/components/ThemeSwitcher.vue

@@ -58,7 +58,12 @@ const classes = computed(() => ['theme-switcher', `theme-switcher--${props.varia
   font-family: inherit;
   line-height: 1;
   padding: 0;
-  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
+  touch-action: manipulation;
+  transition:
+    color 0.15s ease,
+    background-color 0.15s ease,
+    border-color 0.15s ease,
+    transform 100ms ease-out;
 }
 
 .theme-switcher:hover {
@@ -67,6 +72,11 @@ const classes = computed(() => ['theme-switcher', `theme-switcher--${props.varia
   border-color: var(--admin-accent-line);
 }
 
+/* 按下瞬间就有反馈 */
+.theme-switcher:active {
+  transform: scale(0.92);
+}
+
 .theme-switcher .ic {
   font-size: 19px;
   line-height: 1;
@@ -75,8 +85,8 @@ const classes = computed(() => ['theme-switcher', `theme-switcher--${props.varia
 /* ---------- inline 形态：嵌入左栏底部 ---------- */
 
 .theme-switcher--inline {
-  width: 36px;
-  height: 36px;
+  width: 40px;
+  height: 40px;
 }
 
 /* ---------- floating 形态：右下角浮动 ---------- */
@@ -86,18 +96,24 @@ const classes = computed(() => ['theme-switcher', `theme-switcher--${props.varia
   right: 18px;
   bottom: 18px;
   z-index: 100;
-  width: 42px;
-  height: 42px;
-  backdrop-filter: blur(6px);
+  width: 44px;
+  height: 44px;
+  background: color-mix(in srgb, var(--admin-card) 78%, transparent);
+  backdrop-filter: blur(16px) saturate(180%);
   box-shadow: var(--admin-shadow);
 }
 
+@media (prefers-reduced-transparency: reduce) {
+  .theme-switcher--floating {
+    background: var(--admin-card);
+    backdrop-filter: none;
+  }
+}
+
 @media (max-width: 480px) {
   .theme-switcher--floating {
     right: 12px;
     bottom: 12px;
-    width: 38px;
-    height: 38px;
   }
 }
 </style>

frontend/src/components/TopBar.vue

@@ -29,11 +29,18 @@ import { site } from '../site'
     top: 0;
     z-index: 20;
     padding: 10px 18px;
-    background-color: var(--paper);
-    backdrop-filter: blur(6px);
+    background: color-mix(in srgb, var(--paper) 80%, transparent);
+    backdrop-filter: blur(10px) saturate(160%);
     border-bottom: 1px solid var(--line);
   }
 
+  @media (prefers-reduced-transparency: reduce) {
+    .topbar {
+      background: var(--paper);
+      backdrop-filter: none;
+    }
+  }
+
   .brand {
     font-family: var(--serif);
     font-size: 17px;