首屏打字文案改成长句也不溢出：按实际字宽自适应字号

问题
- h1 是 whitespace-nowrap + 固定字号 text-[min(10.5vw,3rem)] sm:text-6xl
  md:text-7xl lg:text-8xl。其实旧文案就已经临界：旧句「折腾 Linux 的乐趣」
  约 9.5 字宽，390px 屏上设计字号 40.9px 需要 389px，而 px-6 之后只有 342px。
  换成王小波那句（14 字）后溢出更明显。桌面端同理：lg 的 96px × 14 字
  = 1344px，而容器 max-w-4xl 只有 896px。

做法
- 不再拍固定字号，改成按「这一句完整文本」的实际渲染宽度算
- 关键点：只会**缩小**，不会放大。上限取当前断点的设计字号 ——
  短句（记录思考/总结生活）保持原来的视觉分量，只有放不下的长句让步
- 量的是完整句子不是当前已打出的部分，所以打字机逐字出现时不会重排
- 字号只在句子切换的那一刻变一次，那时 h1 是空的，看不出跳动；
  另加了 300ms 的 font-size 过渡
- 光标从固定像素改成 em 单位（w-[0.08em] h-[0.9em]），跟着字号缩放
- 算字号时扣掉光标自身的占宽（ml-2 的 8px + 0.08em），否则右边会顶出去

实现细节
- 设计字号不写死在 JS 里：用一个带同样响应式类的隐藏探针读计算值，
  断点逻辑仍然只在 class 里有一处
- 两个隐藏量具放在 h-0 + overflow-hidden 的绝对定位容器里，不参与布局、
  不会撑出横向滚动条
- ResizeObserver 跟随容器变化；document.fonts.ready 后再量一次
  （网络字体加载完字宽会变）

预期效果（含光标占位，实测可用宽度）
  390px  设计 40.9px：14字 24.3px / 11字 30.9px / 4字 40.9px(保持)
  430px  设计 45.1px：14字 27.2px / 11字 34.6px / 4字 45.1px(保持)
  768px  设计 72.0px：14字 51.9px / 11字 65.9px / 4字 72.0px(保持)
  1280px 设计 96.0px：14字 64.7px / 11字 82.2px / 4字 96.0px(保持)
长句刚好占满可用宽度，短句维持原设计大小，无一溢出。

注：hero.tsx 里同时带入了你自己改的那四句文案（王小波那句 + 记录思考 /
总结生活）。src/data/site.ts 里你的 tagline/description/keywords 改动我没有提交。

src/data/reading.json

@@ -1,5 +1,5 @@
 {
-  "updatedAt": "2026-09-15T04:44:09.927Z",
+  "updatedAt": "2026-09-15T04:49:54.266Z",
   "source": "weread",
   "books": [
     {