feat: 布局三修——navbar 下方统一 32px 间距（章节页横幅零间距修复）；选中项背景＝章节色（与章头横幅统一，书架选中 ink）；字体系统（16px 基准=正文 / t1-t3 三级标题 / 小字两态 mute·strong / 大字两态 t1·幽灵 display 章号）全站应用

apps/tutorial/src/components/ChapterPage.tsx

@@ -23,15 +23,18 @@ export function ChapterPage({ id }: { id: ChapterId }) {
     <Page active={id}>
       {/* 章头：与书架相框共享 view-transition-name —— 点卡片进来时相框飞进来变成章头 */}
       <div
-        className="flex items-center gap-4 rounded-2xl border-2 border-ink p-5 shadow-hard"
+        className="relative flex items-center gap-4 overflow-hidden rounded-2xl border-2 border-ink p-5 shadow-hard"
         style={{ background: ch.color, viewTransitionName: `ch-${id}` } as CSSProperties}
       >
+        <span className="t-display pointer-events-none absolute -right-2 -top-3 select-none" aria-hidden>
+          0{id}
+        </span>
         <span className="text-[44px] leading-none">{ch.emoji}</span>
         <div className="flex-1">
-          <h1 className="m-0 text-[24px] font-extrabold text-ink">
+          <h1 className="m-0 text-t1 font-extrabold text-ink">
             第 {id} 章 · {ch.title}
           </h1>
-          <div className="mt-1.5 flex flex-wrap gap-x-6 gap-y-1 text-[12px] font-semibold text-ink">
+          <div className="mt-2 flex flex-wrap gap-x-6 gap-y-1 t-small-strong">
             <span>▲ 目标：{ch.target.goal}</span>
             <span>○ 预期：{ch.target.expectation}</span>
             <span className="flex items-center gap-1.5">
@@ -52,18 +55,20 @@ export function ChapterPage({ id }: { id: ChapterId }) {
                     {i + 1}
                   </span>
                   {s.kind === 'value' ? (
-                    <Mark className="text-[13.5px]">{s.title}</Mark>
+                    <Mark className="text-t3">{s.title}</Mark>
                   ) : (
-                    <span className="flex items-center gap-1.5 text-[13.5px] font-bold text-ink">
+                    <span className="flex items-center gap-1.5 text-t3 font-bold text-ink">
                       <Wave size={30} />
                       {s.title}
                       <span className="rounded-full bg-clash3b/15 px-2 py-0.5 text-[10.5px]">代理区 · 交给 agent</span>
                     </span>
                   )}
                 </div>
-                <p className="m-0 mt-2 text-[12.5px] leading-relaxed text-body">{s.what}</p>
-                <p className="m-0 mt-1.5 text-[12px] text-ink">
-                  <b>验收</b>：{s.accept}
+                <p className="m-0 mt-2.5 text-content text-body">{s.what}</p>
+                <p className="m-0 mt-2 text-content text-body">
+                  <b className="t-small-strong">验收</b>
+                  <span className="mx-1.5 text-mute">·</span>
+                  {s.accept}
                 </p>
               </li>
             ))}
@@ -76,9 +81,9 @@ export function ChapterPage({ id }: { id: ChapterId }) {
               <div key={b.name} className="rounded-xl border-2 border-ink bg-paper p-3.5 shadow-hard">
                 <div className="flex items-center gap-2">
                   <Tri size={13} />
-                  <b className="text-[13px]">{b.name}</b>
+                  <b className="text-t3">{b.name}</b>
                 </div>
-                <p className="m-0 mt-1.5 text-[11.5px] leading-relaxed text-body">
+                <p className="m-0 mt-2 text-small leading-relaxed text-body">
                   <b>是什么</b>：{b.what}
                   <br />
                   <b>为何在这</b>：{b.why}
@@ -94,7 +99,7 @@ export function ChapterPage({ id }: { id: ChapterId }) {
           <Section label="认知基础" note="脚下的地（env/库/运行环境）——第一次用到就地露出">
             <div className="flex items-start gap-3 rounded-xl border-2 border-dashed border-ink/40 bg-clash3b/15 p-4">
               <Ring size={18} className="mt-0.5 shrink-0" />
-              <p className="m-0 text-[12.5px] leading-relaxed text-body">{c.base}</p>
+              <p className="m-0 text-content text-body">{c.base}</p>
             </div>
           </Section>
         )}