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

按 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/views/HomeView.vue

@@ -20,10 +20,13 @@ const tag = computed(() => route.query.tag || '')
 const page = computed(() => Number(route.query.page || 1))
 const size = computed(() => site.posts_per_page || 10)
 
-// 滚动时收缩顶部标题栏：隐藏大标题，只留 tabs 贴顶
-const scrolled = ref(false)
+// 滚动收缩标题栏：16–56px 区间内连续插值 --sq（0→1），
+// 反馈跟随滚动本身，而不是在阈值处二值跳变
+const headEl = ref(null)
 function onScroll() {
-  scrolled.value = window.scrollY > 24
+  if (!headEl.value) return
+  const p = Math.min(1, Math.max(0, (window.scrollY - 16) / 40))
+  headEl.value.style.setProperty('--sq', p.toFixed(3))
 }
 onMounted(() => {
   onScroll()
@@ -88,7 +91,7 @@ applyDocTitle('')
       <LeftNav />
 
       <main class="main">
-        <header class="sticky-head" :class="{ 'is-compact': scrolled }">
+        <header ref="headEl" class="sticky-head">
           <h1 class="page-title">{{ heading }}</h1>
           <nav class="tabs">
             <button
@@ -149,14 +152,22 @@ applyDocTitle('')
 }
 
 .sticky-head {
+  --sq: 0;
   position: sticky;
   top: 0;
   z-index: 10;
-  background-color: var(--paper);
-  backdrop-filter: blur(6px);
+  background: color-mix(in srgb, var(--paper) 82%, transparent);
+  backdrop-filter: blur(8px) saturate(160%);
   border-bottom: 1px solid var(--line);
   padding: 8px 16px 0;
-  transition: padding 0.2s ease;
+}
+
+/* 系统要求减少半透明时回退为实心材质 */
+@media (prefers-reduced-transparency: reduce) {
+  .sticky-head {
+    background: var(--paper);
+    backdrop-filter: none;
+  }
 }
 
 .page-title {
@@ -164,40 +175,25 @@ applyDocTitle('')
   font-size: 17px;
   font-weight: 600;
   overflow: hidden;
-  max-height: 26px;
-  opacity: 1;
-  transition:
-    max-height 0.2s ease,
-    opacity 0.2s ease;
+  max-height: calc(26px * (1 - var(--sq)));
+  opacity: calc(1 - var(--sq));
 }
 
 .tabs {
   display: flex;
   gap: 2px;
-  margin-top: 4px;
-  transition: margin-top 0.2s ease;
-}
-
-/* 滚动后：收起大标题，只留 tabs 紧贴顶部 */
-.sticky-head.is-compact {
-  padding-top: 6px;
-}
-.sticky-head.is-compact .page-title {
-  max-height: 0;
-  opacity: 0;
-}
-.sticky-head.is-compact .tabs {
-  margin-top: 0;
+  margin-top: calc(4px * (1 - var(--sq)));
 }
 
 .tab {
   position: relative;
-  padding: 5px 12px 7px;
+  padding: 8px 12px 9px;
   background: none;
   border: 0;
   cursor: pointer;
   font-size: 13.5px;
   color: var(--muted);
+  transition: transform 100ms ease-out;
 }
 
 .tab:hover {

frontend/src/views/PostView.vue

@@ -147,7 +147,9 @@ const initial = computed(() => (site.author_name || 'O').trim().slice(0, 1).toUp
 .title {
   margin: 20px 0 0;
   font-size: 32px;
-  line-height: 1.35;
+  line-height: 1.2;
+  /* 大号衬线标题需要负字距，越紧越像"排"出来的而不是"摆"出来的 */
+  letter-spacing: -0.015em;
 }
 
 .lede {