From 4194e04e94c88672a10895c9e8c9cb71d2320245 Mon Sep 17 00:00:00 2001
From: ytwei <frobel0520@gmail.com>
Date: Sun, 23 Aug 2026 17:59:58 +0800
Subject: [PATCH] fix: complete curriculum UI UX cleanup

---
 frontend/src/App.tsx                          |   3 +-
 frontend/src/components/AuthLab.tsx           |   6 +-
 frontend/src/components/AuthLesson.tsx        |   9 +-
 frontend/src/components/CliLab.tsx            |  20 +-
 frontend/src/components/GitLab.tsx            |  14 +-
 frontend/src/components/GitLesson.tsx         |  23 +-
 frontend/src/components/IdeLab.tsx            |  23 +-
 frontend/src/components/TopicShell.tsx        |  33 ++-
 frontend/src/content/git.ts                   |  15 --
 frontend/src/styles.css                       | 218 +++++++++++++++++-
 frontend/src/topics/build/lab.tsx             |  23 +-
 frontend/src/topics/build/lesson.tsx          |   9 +-
 frontend/src/topics/cicd/content.test.ts      |   2 +-
 frontend/src/topics/cicd/content.ts           |  14 +-
 frontend/src/topics/cicd/lab.tsx              |  27 ++-
 frontend/src/topics/cicd/lesson.tsx           |   9 +-
 frontend/src/topics/cicd/simulator.ts         |   8 +-
 frontend/src/topics/cli/content.ts            |  16 +-
 frontend/src/topics/cli/lesson.tsx            |  13 +-
 frontend/src/topics/cli/simulator.test.ts     |   2 +-
 frontend/src/topics/cli/simulator.ts          |   8 +-
 frontend/src/topics/deploy/content.ts         |   4 +-
 frontend/src/topics/deploy/lab.tsx            |  27 ++-
 frontend/src/topics/deploy/lesson.tsx         |   9 +-
 frontend/src/topics/deploy/simulator.ts       |   6 +-
 frontend/src/topics/docker/content.test.ts    |   2 +-
 frontend/src/topics/docker/content.ts         |  38 +--
 frontend/src/topics/docker/lab.tsx            |  29 ++-
 frontend/src/topics/docker/lesson.tsx         |  11 +-
 frontend/src/topics/docker/simulator.test.ts  |   2 +-
 frontend/src/topics/docker/simulator.ts       |  16 +-
 frontend/src/topics/env/lab.tsx               |  23 +-
 frontend/src/topics/env/lesson.tsx            |  11 +-
 frontend/src/topics/guardrail/content.ts      |   2 +-
 frontend/src/topics/guardrail/lab.tsx         |   9 +-
 frontend/src/topics/guardrail/lesson.tsx      |  11 +-
 frontend/src/topics/guardrail/simulator.ts    |  10 +-
 frontend/src/topics/ide/content.ts            |   4 +-
 frontend/src/topics/ide/lesson.tsx            |  11 +-
 frontend/src/topics/ide/simulator.ts          |  10 +-
 frontend/src/topics/index/content.ts          |   2 +-
 frontend/src/topics/index/lab.tsx             |  19 +-
 frontend/src/topics/index/lesson.tsx          |   9 +-
 frontend/src/topics/index/simulator.ts        |   2 +-
 frontend/src/topics/index/styles.css          |   2 +-
 frontend/src/topics/integration/content.ts    |  28 +--
 frontend/src/topics/integration/lab.tsx       |  32 ++-
 frontend/src/topics/integration/lesson.tsx    |  11 +-
 frontend/src/topics/integration/simulator.ts  |  14 +-
 frontend/src/topics/logs/content.ts           |  12 +-
 frontend/src/topics/logs/lab.tsx              |  19 +-
 frontend/src/topics/logs/lesson.tsx           |  11 +-
 frontend/src/topics/logs/simulator.test.ts    |   2 +-
 frontend/src/topics/logs/simulator.ts         |  14 +-
 frontend/src/topics/package/content.ts        |  12 +-
 frontend/src/topics/package/lab.tsx           |  23 +-
 frontend/src/topics/package/lesson.tsx        |  11 +-
 frontend/src/topics/package/simulator.ts      |  10 +-
 frontend/src/topics/postgresql/content.ts     |   4 +-
 frontend/src/topics/postgresql/lab.tsx        |  19 +-
 frontend/src/topics/postgresql/lesson.tsx     |   9 +-
 frontend/src/topics/postgresql/simulator.ts   |   4 +-
 .../src/topics/problem-solving/content.ts     |   8 +-
 frontend/src/topics/problem-solving/lab.tsx   |   9 +-
 .../src/topics/problem-solving/lesson.tsx     |   9 +-
 .../src/topics/problem-solving/simulator.ts   |   2 +-
 frontend/src/topics/remote/lab.tsx            |   7 +-
 frontend/src/topics/remote/lesson.tsx         |  13 +-
 frontend/src/topics/rest/content.ts           |   6 +-
 frontend/src/topics/rest/lab.tsx              |   5 +-
 frontend/src/topics/rest/lesson.tsx           |   9 +-
 frontend/src/topics/schema/content.ts         |  10 +-
 frontend/src/topics/schema/lab.tsx            |  19 +-
 frontend/src/topics/schema/lesson.tsx         |   9 +-
 frontend/src/topics/schema/simulator.ts       |   2 +-
 frontend/src/topics/sql/content.ts            |   4 +-
 frontend/src/topics/sql/lab.tsx               |  21 +-
 frontend/src/topics/sql/lesson.tsx            |   9 +-
 frontend/src/topics/unit/content.ts           |  12 +-
 frontend/src/topics/unit/lab.tsx              |  19 +-
 frontend/src/topics/unit/lesson.tsx           |  11 +-
 81 files changed, 691 insertions(+), 492 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index ad9a967..0f22401 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -73,7 +73,7 @@ export default function App() {
       <aside className={`sidebar ${menuOpen ? "open" : ""}`}>
         <button className="brand" type="button" onClick={() => goPath("/map")}>
           <span className="brand-mark">SE</span>
-          <span><b>Software Engineering</b><small>FIELD MANUAL · 2026</small></span>
+          <span><b>Software Engineering</b></span>
         </button>
         <div className="nav-label">目錄 / CONTENTS</div>
         <nav>
@@ -118,7 +118,6 @@ export default function App() {
         <header className="topbar">
           <button className="menu-button" type="button" aria-label="開啟選單" onClick={() => setMenuOpen((value) => !value)}>☰</button>
           <div className="breadcrumb"><span>WORKSHOP</span><i>/</i><b>{routeLabel(route)}</b></div>
-          <div className="top-status">已開放 <b>{progress.coreProgress.ready} / {progress.coreProgress.total}</b></div>
         </header>
         {route.kind === "map" ? <CurriculumMap curriculum={curriculum} onOpenTrack={(trackId) => goPath(trackPath(trackId))} /> : null}
         {route.kind === "track" && activeTrack ? <TrackPage track={activeTrack} completedTopicIds={completedTopicIds} onBackToMap={() => goPath("/map")} onOpenTopic={(topicId) => goTopic(topicId, "lesson")} /> : null}
diff --git a/frontend/src/components/AuthLab.tsx b/frontend/src/components/AuthLab.tsx
index 8bffa60..c115214 100644
--- a/frontend/src/components/AuthLab.tsx
+++ b/frontend/src/components/AuthLab.tsx
@@ -36,15 +36,14 @@ export function AuthLab({ onComplete }: { onComplete: () => void }) {
   const progress = configured ? 50 + (demoStep / authDemoSteps.length) * 50 : (questionStep / authQuestions.length) * 50;
 
   return (
-    <div className="page auth-lab-page">
+    <div className="page auth-lab-page course-lab-shell">
       <header className="lab-header">
-        <div><p className="kicker">INTERACTIVE LAB / OIDC</p><h1>組出一條<br /><em>可信任的登入路徑</em></h1></div>
+        <div><h1>組出一條<br /><em>可信任的登入路徑</em></h1></div>
         <div className="lab-progress"><span>{demoComplete ? "完成" : configured ? `DEMO ${demoStep + 1} / ${authDemoSteps.length}` : `CONFIG ${questionStep + 1} / ${authQuestions.length}`}</span><div><i style={{ width: `${progress}%` }} /></div></div>
       </header>
 
       <div className="auth-lab-grid">
         <section className="auth-request">
-          <p className="kicker">SAMPLE ONLY / NO NETWORK CALL</p>
           <dl>
             <div><dt>tenant_id</dt><dd>{demoConfig.tenantId}</dd></div>
             <div><dt>client_id</dt><dd>{demoConfig.clientId}</dd></div>
@@ -58,7 +57,6 @@ export function AuthLab({ onComplete }: { onComplete: () => void }) {
 
         <section className="auth-challenge">
           {!configured ? <>
-            <p className="kicker">CONFIGURATION {String(questionStep + 1).padStart(2, "0")}</p>
             <h2>{question.prompt}</h2>
             <div className="auth-options">{options.map((option) => <button className={selected === option ? "selected" : ""} onClick={() => setSelected(option)} key={option}>{option}</button>)}</div>
             {selected && !correct ? <p className="auth-feedback error">欄位不符。</p> : <p className="auth-feedback">{correct ? "正確。" : "選擇一個欄位。"}</p>}
diff --git a/frontend/src/components/AuthLesson.tsx b/frontend/src/components/AuthLesson.tsx
index ab6700a..45a17e2 100644
--- a/frontend/src/components/AuthLesson.tsx
+++ b/frontend/src/components/AuthLesson.tsx
@@ -4,20 +4,19 @@ import type { LessonOrientation } from "../topics/types";
 
 export function AuthLesson({ completed, onOpenLab, orientation }: { completed: boolean; onOpenLab: () => void; orientation: LessonOrientation }) {
   return (
-    <div className="page auth-page">
+    <div className="page auth-page course-lesson-page">
       <header className="lesson-hero auth-hero">
         <div>
-          <p className="kicker">MODULE 02 / WEB & API</p>
           <h1>Auth：把信任<br /><em>接到正確的位置</em></h1>
           <p>Entra ID 是服務，OIDC 是協定，SSO 是結果。</p>
         </div>
         <div className="auth-hero-actions">
-          <div className={`module-status ${completed ? "done" : ""}`}><span>{completed ? "✓" : "02"}</span><div><small>MODULE STATUS</small><b>{completed ? "已完成" : "學習中"}</b></div></div>
+          <div className={`module-status ${completed ? "done" : ""}`}><span>{completed ? "✓" : "09"}</span><div><b>{completed ? "已完成" : "學習中"}</b></div></div>
           <a className="button auth-deck-link" href={`${import.meta.env.BASE_URL}entra-oidc-sso-deck.html`}>開啟簡報 <span>→</span></a>
         </div>
       </header>
 
-      <TopicOrientation orientation={orientation} />
+      <TopicOrientation orientation={orientation} showMeta={false} />
 
       <section className="auth-model" aria-label="OIDC 設定關係">
         <div className="auth-node"><small>DIRECTORY</small><strong>Tenant ID</strong><code>{demoConfig.tenantId}</code></div>
@@ -39,7 +38,7 @@ export function AuthLesson({ completed, onOpenLab, orientation }: { completed: b
       </section>
 
       <section className="lab-cta">
-        <div><p className="kicker">CONFIGURATION LAB</p><h2>把七個值放回登入流程。</h2></div>
+        <div><h2>把七個值放回登入流程。</h2></div>
         <button className="button light" onClick={onOpenLab}>進入 Auth Lab <span>→</span></button>
       </section>
     </div>
diff --git a/frontend/src/components/CliLab.tsx b/frontend/src/components/CliLab.tsx
index 9c1e991..e680c57 100644
--- a/frontend/src/components/CliLab.tsx
+++ b/frontend/src/components/CliLab.tsx
@@ -20,9 +20,7 @@ interface TerminalEntry {
   exitCode?: number | null;
 }
 
-const initialHistory: readonly TerminalEntry[] = [
-  { lines: ["CLI Workshop sandbox v1", "固定 project fixture 已準備好。輸入第一個指令開始。"] },
-];
+const initialHistory: readonly TerminalEntry[] = [];
 
 function statusTone(state: CliLabState): TopicStatusTone {
   if (state.phase === "completed") return "success";
@@ -71,13 +69,14 @@ export function CliLab({ onComplete }: { onComplete: () => void }) {
   function reset() {
     setCli(createCliLabState());
     setCommand("");
-    setHistory([{ lines: ["Sandbox 已重設。從 pwd 重新開始。"] }]);
+    setHistory([{ lines: ["已重設。從 pwd 重新開始。"] }]);
   }
 
   return (
     <TopicLabShell
-      eyebrow="INTERACTIVE LAB / CLI"
-      title={<>在固定工作目錄中<br /><em>讀懂命令列</em></>}
+      className="foundation-lab-shell"
+      showMeta={false}
+      title={<>在工作目錄中<br /><em>讀懂命令列</em></>}
       progressLabel={cliLabIsComplete(cli) ? "完成" : `${completedCount} / ${cliLessonSteps.length}`}
       progress={progress}
       onReset={reset}
@@ -85,10 +84,10 @@ export function CliLab({ onComplete }: { onComplete: () => void }) {
       <TopicStatusFeedback tone={statusTone(cli)} message={statusMessage(cli)} />
 
       <div className="lab-layout cli-lab-layout">
-        <section className="terminal-panel" aria-label="CLI 命令列模擬器">
+          <section className="terminal-panel" aria-label="CLI 命令列">
           <div className="terminal-top">
             <span className="terminal-dots" aria-hidden="true"><i /><i /><i /></span>
-            <b>cli-workshop — {cli.cwd}</b>
+            <b>{cli.cwd}</b>
             <span aria-label={`目前 exit code ${cli.exitCode ?? "尚未執行"}`}>exit {cli.exitCode ?? "—"}</span>
           </div>
           <div className="terminal-output" role="log" aria-live="polite" aria-label="命令列輸出">
@@ -117,15 +116,14 @@ export function CliLab({ onComplete }: { onComplete: () => void }) {
             />
             <button type="submit" disabled={!command.trim() || cliLabIsComplete(cli)}>執行</button>
           </form>
-          <p id="cli-command-help" className="sr-only">輸入固定 fixture 支援的命令，按 Enter 或執行送出。</p>
+          <p id="cli-command-help" className="sr-only">輸入教材中的命令，按 Enter 或執行送出。</p>
         </section>
 
         <aside className="mission-panel">
-          <p className="kicker">CURRENT MISSION</p>
           {cliLabIsComplete(cli) ? (
             <TopicCompletionCard
               title="命令列流程完成"
-              description="你已能確認 cwd、讀取 fixture、解讀輸出，並用固定檢查完成一次可重複流程。"
+              description="你已能確認 cwd、讀取檔案、解讀輸出，並完成一次可重複流程。"
               onReset={reset}
             />
           ) : (
diff --git a/frontend/src/components/GitLab.tsx b/frontend/src/components/GitLab.tsx
index 1729499..92e4a1b 100644
--- a/frontend/src/components/GitLab.tsx
+++ b/frontend/src/components/GitLab.tsx
@@ -20,9 +20,7 @@ interface TerminalEntry {
   accepted?: boolean;
 }
 
-const initialHistory: readonly TerminalEntry[] = [
-  { lines: ["Git cowork sandbox v2", "固定 hosted repository 與 pipeline fixture 已準備好。"] },
-];
+const initialHistory: readonly TerminalEntry[] = [];
 
 function statusTone(state: GitReleaseState, accepted: boolean): TopicStatusTone {
   if (!accepted) return "error";
@@ -74,7 +72,8 @@ export function GitLab({ onComplete }: { onComplete: () => void }) {
 
   return (
     <TopicLabShell
-      eyebrow="INTERACTIVE LAB / GIT COWORK"
+      eyebrow=""
+      className="git-lab-shell"
       title={<>把一個功能<br /><em>送進 pipeline</em></>}
       progressLabel={completed ? "完成" : `${state.completedStepIds.length} / ${GIT_RELEASE_STEPS.length} STEPS`}
       progress={gitReleaseProgress(state)}
@@ -90,7 +89,7 @@ export function GitLab({ onComplete }: { onComplete: () => void }) {
         <>
           <div className="lab-layout git-release-layout">
             <section className="terminal-panel" aria-label="Git 指令終端機">
-              <div className="terminal-top"><span className="terminal-dots"><i /><i /><i /></span><b>git-cowork — {state.localBranch}</b><button type="button" onClick={reset}>重設</button></div>
+              <div className="terminal-top"><span className="terminal-dots"><i /><i /><i /></span><button type="button" onClick={reset}>重設</button></div>
               <div className="terminal-output" aria-live="polite">
                 {history.map((entry, index) => (
                   <div className={`terminal-entry ${entry.accepted === false ? "error" : ""}`} key={`${index}-${entry.command ?? "system"}`}>
@@ -107,7 +106,6 @@ export function GitLab({ onComplete }: { onComplete: () => void }) {
             </section>
 
             <aside className="mission-panel" aria-label="Git cowork 狀態">
-              <p className="kicker">CURRENT MISSION</p>
               <label className="git-provider-picker" htmlFor="git-provider">練習平台
                 <select
                   id="git-provider"
@@ -140,7 +138,7 @@ export function GitLab({ onComplete }: { onComplete: () => void }) {
           </div>
 
           <div className="git-release-actions remote-action-panel">
-            <div className="remote-panel-heading"><div><p className="kicker">WORKFLOW ACTIONS</p><h2>選擇一個操作，理解它改變哪一層</h2></div><span className="remote-lab-meta">{state.provider === "github" ? "PR" : "MERGE REQUEST"} · {state.targetBranch}</span></div>
+            <div className="remote-panel-heading"><div><h2>選擇一個操作，理解它改變哪一層</h2></div><span className="remote-lab-meta">{state.provider === "github" ? "PR" : "MERGE REQUEST"} · {state.targetBranch}</span></div>
             <div className="remote-action-list">
               {GIT_RELEASE_STEPS.map((step, index) => {
                 const done = state.completedStepIds.includes(step.id);
@@ -156,7 +154,7 @@ export function GitLab({ onComplete }: { onComplete: () => void }) {
           </div>
 
           <div className="git-release-pipeline remote-context-panel">
-            <div className="section-heading"><div><p className="kicker">PIPELINE JOBS</p><h2>push 之後 runner 執行什麼？</h2></div><p>每個 job 都是可讀的 fixture 結果，不連線真實 CI provider。</p></div>
+            <div className="section-heading"><div><h2>push 之後 runner 執行什麼？</h2></div></div>
             <div className="git-job-grid">
               {GIT_RELEASE_PIPELINE_JOBS.map((job) => <div key={job} className={state.pipelineJobs.includes(job) ? "passed" : "pending"}><span>{state.pipelineJobs.includes(job) ? "✓" : "○"}</span><b>{job}</b></div>)}
             </div>
diff --git a/frontend/src/components/GitLesson.tsx b/frontend/src/components/GitLesson.tsx
index c6fd2cb..cb6e283 100644
--- a/frontend/src/components/GitLesson.tsx
+++ b/frontend/src/components/GitLesson.tsx
@@ -4,24 +4,23 @@ import { gitCommandGuide, gitLessons, gitPipeline, gitWorkflow } from "../conten
 
 export function GitLesson({ completed, onOpenLab, orientation }: { completed: boolean; onOpenLab: () => void; orientation: LessonOrientation }) {
   return (
-    <div className="page lesson-page">
+    <div className="page lesson-page git-lesson-page">
       <header className="lesson-hero">
         <div>
-          <p className="kicker">MODULE 01 / FOUNDATIONS</p>
           <h1>Git：讓改變<br /><em>有跡可循</em></h1>
           <p>先建立本地歷史與遠端協作的心智模型，再到 Lab 親手走過 clone → commit → push → pipeline → merge。</p>
         </div>
         <div className={`module-status ${completed ? "done" : ""}`}>
           <span>{completed ? "✓" : "01"}</span>
-          <div><small>MODULE STATUS</small><b>{completed ? "已完成" : "學習中"}</b></div>
+          <div><b>{completed ? "已完成" : "學習中"}</b></div>
         </div>
       </header>
 
-      <TopicOrientation orientation={orientation} />
+      <TopicOrientation orientation={orientation} showMeta={false} />
 
       <section className="mental-model">
         <div className="section-heading">
-          <div><p className="kicker">MENTAL MODEL</p><h2>檔案如何變成歷史</h2></div>
+          <div><h2>檔案如何變成歷史</h2></div>
           <p>每一步都在縮小「這次到底要記錄什麼」。</p>
         </div>
         <div className="workflow-row">
@@ -37,35 +36,35 @@ export function GitLesson({ completed, onOpenLab, orientation }: { completed: bo
       <section className="lesson-list">
         {gitLessons.map((lesson) => (
           <article className="lesson-card" key={lesson.number}>
-            <div className="lesson-index"><span>{lesson.number}</span><small>{lesson.eyebrow}</small></div>
+            <div className="lesson-index"><span>{lesson.number}</span></div>
             <div className="lesson-copy">
               <h2>{lesson.title}</h2>
               <p>{lesson.body}</p>
               <code><span>$</span> {lesson.command}</code>
             </div>
-            <aside><small>記住這句</small><p>{lesson.takeaway}</p></aside>
+            <aside><p>{lesson.takeaway}</p></aside>
           </article>
         ))}
       </section>
 
       <section className="lesson-list git-command-guide" aria-label="Git 指令與使用時機">
-        <div className="section-heading"><div><p className="kicker">COMMAND DECISION GUIDE</p><h2>知道指令，更要知道什麼時候用</h2></div><p>每個操作都要能說明它改變了哪一層狀態。</p></div>
+        <div className="section-heading"><div><h2>知道指令，更要知道什麼時候用</h2></div></div>
         {gitCommandGuide.map((guide, index) => (
           <article className="lesson-card" key={guide.id}>
-            <div className="lesson-index"><span>{String(index + 1).padStart(2, "0")}</span><small>{guide.category}</small></div>
+            <div className="lesson-index"><span>{String(index + 1).padStart(2, "0")}</span></div>
             <div className="lesson-copy">
               <h2>{guide.title}</h2>
               <p>{guide.body}</p>
               <code><span>$</span> {guide.command}</code>
             </div>
-            <aside><small>什麼時候用</small><p>{guide.when}</p><small>記住這句</small><p>{guide.takeaway}</p></aside>
+            <aside><p>{guide.when}</p><p>{guide.takeaway}</p></aside>
           </article>
         ))}
       </section>
 
       <section className="mental-model git-pipeline-model" aria-label="Commit 到部署的 pipeline">
         <div className="section-heading">
-          <div><p className="kicker">FROM COMMIT TO DEPLOY</p><h2>push 之後，平台做了什麼？</h2></div>
+          <div><h2>push 之後，平台做了什麼？</h2></div>
           <p>Git command 改變 repository；hosted platform 再依規則啟動 review、pipeline 與部署。</p>
         </div>
         <div className="workflow-row">
@@ -79,7 +78,7 @@ export function GitLesson({ completed, onOpenLab, orientation }: { completed: bo
       </section>
 
       <section className="lab-cta">
-        <div><p className="kicker">READY TO PRACTICE?</p><h2>看懂了，現在親手做一次。</h2><p>一條 cowork workflow，約 12 分鐘。輸錯不會破壞任何真實 repository。</p></div>
+        <div><h2>看懂了，現在親手做一次。</h2></div>
         <button className="button light" onClick={onOpenLab}>進入 Git Lab <span>→</span></button>
       </section>
     </div>
diff --git a/frontend/src/components/IdeLab.tsx b/frontend/src/components/IdeLab.tsx
index ef1c360..2098165 100644
--- a/frontend/src/components/IdeLab.tsx
+++ b/frontend/src/components/IdeLab.tsx
@@ -26,7 +26,7 @@ interface DebugHistoryEntry {
 }
 
 const IDE_ACTIONS: readonly IdeAction[] = [
-  { id: "open", label: "開啟固定檔案", command: "open src/order.ts" },
+  { id: "open", label: "開啟檔案", command: "open src/order.ts" },
   { id: "breakpoint", label: "設定第 3 行 breakpoint", command: "breakpoint 3" },
   { id: "run", label: "啟動 calculateTotal", command: "run calculateTotal(10, 2, 3)" },
   { id: "inspect", label: "檢查目前 variables", command: "inspect variables" },
@@ -34,9 +34,7 @@ const IDE_ACTIONS: readonly IdeAction[] = [
   { id: "continue", label: "繼續到程式結束", command: "continue" },
 ];
 
-const initialHistory: readonly DebugHistoryEntry[] = [
-  { lines: ["IDE Workshop sandbox v1", "固定 order.ts fixture 已準備好。選擇一個 debugger action 開始。"] },
-];
+const initialHistory: readonly DebugHistoryEntry[] = [];
 
 function statusTone(state: IdeLabState): TopicStatusTone {
   if (state.phase === "completed") return "success";
@@ -88,12 +86,13 @@ export function IdeLab({ onComplete }: { onComplete?: () => void }) {
   function reset() {
     setIde(createIdeLabState());
     setCommand("");
-    setHistory([{ lines: ["Sandbox 已重設。從開啟 src/order.ts 重新開始。"] }]);
+    setHistory([{ lines: ["已重設。從開啟 src/order.ts 重新開始。"] }]);
   }
 
   return (
     <TopicLabShell
-      eyebrow="INTERACTIVE LAB / IDE"
+      className="foundation-lab-shell"
+      showMeta={false}
       title={<>用除錯器看見<br /><em>程式正在做什麼</em></>}
       progressLabel={completed ? "完成" : `${completedCount} / ${IDE_ACTIONS.length}`}
       progress={Math.round((completedCount / IDE_ACTIONS.length) * 100)}
@@ -104,12 +103,12 @@ export function IdeLab({ onComplete }: { onComplete?: () => void }) {
       {completed ? (
         <TopicCompletionCard
           title="Debug 流程完成"
-          description="你已能設定 breakpoint、讀取 paused frame、逐行觀察 variables，並用 continue 完成固定函式。"
+          description="你已能設定 breakpoint、讀取 paused frame、逐行觀察 variables，並用 continue 完成函式。"
           onReset={reset}
         />
       ) : (
         <div className="ide-lab-layout">
-          <section className="ide-editor-panel" aria-label="IDE editor fixture">
+          <section className="ide-editor-panel" aria-label="IDE 編輯器">
             <div className="ide-editor-top">
               <span className="ide-window-dots" aria-hidden="true"><i /><i /><i /></span>
               <b>{ide.selectedFile ?? "workspace"}</b>
@@ -161,9 +160,9 @@ export function IdeLab({ onComplete }: { onComplete?: () => void }) {
             <p id="ide-command-help" className="sr-only">可輸入教材中的 debugger 指令，或使用右側 mission buttons。</p>
           </section>
 
-          <aside className="ide-control-panel" aria-label="Debugger controls">
+          <aside className="ide-control-panel" aria-label="除錯操作">
             <div className="ide-panel-heading">
-              <div><p className="kicker">DEBUGGER CONTROL</p><h2>依序收集執行線索</h2></div>
+              <div><h2>依序收集執行線索</h2></div>
               <span className="ide-lab-meta">{ide.selectedFile ?? "no file"}</span>
             </div>
             <div className="ide-action-list">
@@ -185,13 +184,13 @@ export function IdeLab({ onComplete }: { onComplete?: () => void }) {
                 );
               })}
             </div>
-            <p className="ide-current-hint">目前任務：{currentAction.label}。按鈕只派送 deterministic event，不會啟動真實 debugger。</p>
+            <p className="ide-current-hint">目前任務：{currentAction.label}。</p>
           </aside>
         </div>
       )}
 
       <section className="ide-debug-state" aria-labelledby="ide-debug-state-title">
-        <div className="section-heading"><div><p className="kicker">LIVE DEBUG STATE</p><h2 id="ide-debug-state-title">目前的執行線索</h2></div><p>只顯示 simulator 狀態，不連接本機 process。</p></div>
+        <div className="section-heading"><div><h2 id="ide-debug-state-title">目前的執行線索</h2></div></div>
         <div className="ide-state-grid">
           <div><small>PHASE</small><b>{ide.phase}</b></div>
           <div><small>CURRENT LINE</small><b>{ide.currentLine ?? "—"}</b></div>
diff --git a/frontend/src/components/TopicShell.tsx b/frontend/src/components/TopicShell.tsx
index af0df9e..92b806f 100644
--- a/frontend/src/components/TopicShell.tsx
+++ b/frontend/src/components/TopicShell.tsx
@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
 import type { LessonOrientation } from "../topics/types";
 
-export function TopicOrientation({ orientation }: { orientation: LessonOrientation }) {
+export function TopicOrientation({ orientation, showMeta = true }: { orientation: LessonOrientation; showMeta?: boolean }) {
   const cards = [
     ["What", orientation.what],
     ["Why", orientation.why],
@@ -12,8 +12,11 @@ export function TopicOrientation({ orientation }: { orientation: LessonOrientati
   return (
     <section className="lesson-orientation" aria-labelledby="lesson-orientation-title">
       <div className="section-heading">
-        <div><p className="kicker">START HERE</p><h2 id="lesson-orientation-title">先回答四個問題</h2></div>
-        <p>先知道它解決什麼問題，再進入操作與細節。</p>
+        <div>
+          {showMeta ? <p className="kicker">START HERE</p> : null}
+          <h2 id="lesson-orientation-title">先回答四個問題</h2>
+        </div>
+        {showMeta ? <p>先知道它解決什麼問題，再進入操作與細節。</p> : null}
       </div>
       <div className="orientation-grid">
         {cards.map(([label, answer]) => (
@@ -28,7 +31,9 @@ export function TopicOrientation({ orientation }: { orientation: LessonOrientati
 }
 
 export interface TopicLessonShellProps {
-  eyebrow: string;
+  eyebrow?: string;
+  className?: string;
+  showMeta?: boolean;
   title: ReactNode;
   description: ReactNode;
   orientation: LessonOrientation;
@@ -39,6 +44,8 @@ export interface TopicLessonShellProps {
 
 export function TopicLessonShell({
   eyebrow,
+  className,
+  showMeta = true,
   title,
   description,
   orientation,
@@ -47,20 +54,20 @@ export function TopicLessonShell({
   children,
 }: TopicLessonShellProps) {
   return (
-    <div className="page lesson-page topic-lesson-shell">
+    <div className={`page lesson-page topic-lesson-shell${className ? ` ${className}` : ""}`}>
       <header className="lesson-hero">
         <div>
-          <p className="kicker">{eyebrow}</p>
+          {showMeta && eyebrow ? <p className="kicker">{eyebrow}</p> : null}
           <h1>{title}</h1>
           <p>{description}</p>
         </div>
         <div className={`module-status ${completed ? "done" : ""}`} aria-label={completed ? "主題已完成" : "主題學習中"}>
           <span aria-hidden="true">{completed ? "✓" : moduleNumber}</span>
-          <div><small>MODULE STATUS</small><b>{completed ? "已完成" : "學習中"}</b></div>
+          <div>{showMeta ? <small>MODULE STATUS</small> : null}<b>{completed ? "已完成" : "學習中"}</b></div>
         </div>
       </header>
       <section className="topic-lesson-content">
-        <TopicOrientation orientation={orientation} />
+        <TopicOrientation orientation={orientation} showMeta={showMeta} />
         {children}
       </section>
     </div>
@@ -68,7 +75,9 @@ export function TopicLessonShell({
 }
 
 export interface TopicLabShellProps {
-  eyebrow: string;
+  eyebrow?: string;
+  className?: string;
+  showMeta?: boolean;
   title: ReactNode;
   progressLabel: string;
   progress: number;
@@ -78,6 +87,8 @@ export interface TopicLabShellProps {
 
 export function TopicLabShell({
   eyebrow,
+  className,
+  showMeta = true,
   title,
   progressLabel,
   progress,
@@ -87,9 +98,9 @@ export function TopicLabShell({
   const boundedProgress = Math.max(0, Math.min(100, progress));
 
   return (
-    <div className="page lab-page topic-lab-shell">
+    <div className={`page lab-page topic-lab-shell${className ? ` ${className}` : ""}`}>
       <header className="lab-header">
-        <div><p className="kicker">{eyebrow}</p><h1>{title}</h1></div>
+        <div>{showMeta && eyebrow ? <p className="kicker">{eyebrow}</p> : null}<h1>{title}</h1></div>
         <div className="lab-progress" role="progressbar" aria-label="Lab 進度" aria-valuemin={0} aria-valuemax={100} aria-valuenow={boundedProgress}>
           <span>{progressLabel}</span>
           <div><i style={{ width: `${boundedProgress}%` }} /></div>
diff --git a/frontend/src/content/git.ts b/frontend/src/content/git.ts
index 2b8ff72..4e6213d 100644
--- a/frontend/src/content/git.ts
+++ b/frontend/src/content/git.ts
@@ -10,7 +10,6 @@ export const gitOrientation: LessonOrientation = {
 export const gitLessons = [
   {
     number: "01",
-    eyebrow: "SNAPSHOT",
     title: "Commit 是一個可命名的時間點",
     body: "Git 不只是備份檔案。每次 commit 都保存一組完整狀態，並記錄它從哪個狀態演進而來。好的 commit 小而完整，訊息說明為什麼改。",
     command: 'git commit -m "add profile page"',
@@ -18,7 +17,6 @@ export const gitLessons = [
   },
   {
     number: "02",
-    eyebrow: "STAGING AREA",
     title: "先挑選，再提交",
     body: "工作目錄是你正在修改的現場；staging area 是下一個 commit 的草稿。git add 不是存檔，而是把特定版本的檔案放進草稿。",
     command: "git add app.js",
@@ -26,7 +24,6 @@ export const gitLessons = [
   },
   {
     number: "03",
-    eyebrow: "BRANCH",
     title: "分支是會移動的標籤",
     body: "branch 不是另一份資料夾，而是一個指向 commit 的名稱。切出功能分支後，你可以獨立前進；merge 再把兩條歷史接回來。",
     command: "git switch -c feature/avatar",
@@ -37,7 +34,6 @@ export const gitLessons = [
 export const gitCommandGuide = [
   {
     id: "clone",
-    category: "START",
     title: "先把專案帶到本機",
     command: "git clone <url>",
     body: "第一次參與既有專案時，用 clone 建立本地 repository，同時設定 origin。若你沒有原 repository 的寫入權限，先在 GitHub／GitLab fork，再 clone 自己的 copy。",
@@ -46,7 +42,6 @@ export const gitCommandGuide = [
   },
   {
     id: "checkout",
-    category: "BRANCH",
     title: "切換你要工作的分支",
     command: "git checkout -b feature/profile",
     body: "checkout 的 legacy 用法可以建立並切換分支。現代 Git 通常用 git switch -c feature/profile；checkout 也能從歷史取出檔案，這正是它容易讓人混淆的地方。",
@@ -55,7 +50,6 @@ export const gitCommandGuide = [
   },
   {
     id: "add",
-    category: "LOCAL",
     title: "挑選這次要提交的修改",
     command: "git add src/profile.ts",
     body: "add 把指定檔案的目前版本放進 staging area。它不是存檔，也不會建立 commit；你可以用它把一個大修改拆成幾個可 review 的單位。",
@@ -64,7 +58,6 @@ export const gitCommandGuide = [
   },
   {
     id: "commit",
-    category: "LOCAL",
     title: "留下可追蹤的本地快照",
     command: 'git commit -m "add profile page"',
     body: "commit 將暫存內容寫進本地歷史，形成可比較、可回復、可 review 的變更單位。commit 完成後，遠端與其他 coworker 還看不到它。",
@@ -73,7 +66,6 @@ export const gitCommandGuide = [
   },
   {
     id: "stash",
-    category: "LOCAL",
     title: "暫時收起還沒完成的工作",
     command: "git stash",
     body: "stash 把未完成的工作暫時收起，讓工作目錄回到乾淨狀態。它適合切換任務或處理緊急修正，但不是正式歷史，也不是團隊共享的備份。",
@@ -82,7 +74,6 @@ export const gitCommandGuide = [
   },
   {
     id: "fetch",
-    category: "REMOTE",
     title: "先更新你對遠端的認知",
     command: "git fetch origin",
     body: "fetch 下載遠端最新的 objects 與 branch 參照，更新 origin/dev 等 remote-tracking branch，但不直接修改你目前的工作檔案。",
@@ -91,7 +82,6 @@ export const gitCommandGuide = [
   },
   {
     id: "pull",
-    category: "REMOTE",
     title: "取得並整合遠端變更",
     command: "git pull --rebase origin dev",
     body: "pull 通常等於 fetch 加上 merge 或 rebase，會把遠端變更整合進目前分支，因此可能改變工作目錄。團隊應明確知道專案採 merge 還是 rebase，避免每個人得到不同歷史。",
@@ -100,7 +90,6 @@ export const gitCommandGuide = [
   },
   {
     id: "rebase",
-    category: "HISTORY",
     title: "把自己的分支接到最新基線",
     command: "git rebase origin/dev",
     body: "rebase 將自己的 commit 重新接到最新 origin/dev 後面，讓待審查歷史更直。它可能改寫 commit ID，不應任意對已被多人共用的 branch 使用。",
@@ -109,7 +98,6 @@ export const gitCommandGuide = [
   },
   {
     id: "cherry-pick",
-    category: "HISTORY",
     title: "只移植一個特定修正",
     command: "git cherry-pick a1b2c3d",
     body: "cherry-pick 把指定 commit 的變更套用到目前分支，並建立一個新的 commit。它適合把 hotfix 或單一修正移植到另一條 release branch。",
@@ -118,7 +106,6 @@ export const gitCommandGuide = [
   },
   {
     id: "push",
-    category: "REMOTE",
     title: "把本地歷史發布給團隊",
     command: "git push -u origin feature/profile",
     body: "push 將本地缺少的 objects 與 branch ref 傳到 hosted repository。遠端 branch 更新後，其他人、PR／MR 與 CI 才能看到這組 commit。",
@@ -127,7 +114,6 @@ export const gitCommandGuide = [
   },
   {
     id: "merge",
-    category: "INTEGRATE",
     title: "把兩條歷史整合起來",
     command: "git merge feature/profile",
     body: "merge 將指定分支的歷史整合到目前分支，可能產生 merge commit，也可能需要解決衝突。平台上的 PR／MR merge 是同一個概念加上 review、checks 與權限規則。",
@@ -136,7 +122,6 @@ export const gitCommandGuide = [
   },
   {
     id: "fork",
-    category: "PLATFORM",
     title: "沒有寫入權限時先建立副本",
     command: "Fork repository → git clone <your-url>",
     body: "fork 是 GitHub／GitLab 上的 hosted copy，常用於沒有原 repository 寫入權限的協作者。你 clone 自己的 fork，再透過 upstream 與 PR／MR 把變更送回原專案。",
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 3a263bf..3325967 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -658,7 +658,7 @@ h1 em {
 .auth-node { min-width: 0; padding: 28px 0; }
 .auth-node small { display: block; color: var(--muted); font: 9px "DM Mono"; letter-spacing: .12em; }
 .auth-node strong { display: block; margin: 10px 0 14px; font: 600 24px "Newsreader", "Noto Serif TC", serif; }
-.auth-node code { display: block; overflow: hidden; color: var(--teal-dark); font: 10px "DM Mono"; text-overflow: ellipsis; }
+.auth-node code { display: block; min-width: 0; overflow-wrap: anywhere; color: var(--teal-dark); font: 10px "DM Mono"; white-space: normal; }
 .auth-node.active { padding-inline: 26px; color: var(--paper); background: var(--teal-dark); }
 .auth-node.active small, .auth-node.active code { color: #bfd2d1; }
 .auth-field-list { margin-top: 70px; border-top: 2px solid var(--ink); }
@@ -866,7 +866,7 @@ h1 em {
   .remote-lab-meta { display: block; margin-top: 14px; }
 }
 .guardrail-lab-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr); gap: 16px; }
-.guardrail-control-panel, .guardrail-result-panel { border: 1px solid var(--line); background: var(--surface); }
+.guardrail-control-panel, .guardrail-result-panel { min-width: 0; border: 1px solid var(--line); background: var(--surface); }
 .guardrail-control-panel { padding: 30px; }
 .guardrail-result-panel { align-self: start; padding: 30px; }
 .guardrail-panel-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
@@ -892,10 +892,11 @@ h1 em {
 .guardrail-scenario-list { display: grid; gap: 7px; margin-top: 12px; }
 .guardrail-scenario { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; padding: 14px; border: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
 .guardrail-scenario:hover, .guardrail-scenario:focus-visible { border-color: var(--teal-dark); background: #edf5f2; outline: none; }
+.guardrail-scenario > span { min-width: 0; }
 .guardrail-scenario b, .guardrail-scenario small { display: block; }
 .guardrail-scenario b { font-size: 12px; }
 .guardrail-scenario small { max-width: 390px; overflow: hidden; margin-top: 5px; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
-.guardrail-scenario i { color: var(--teal-dark); font: 10px "DM Mono"; font-style: normal; }
+.guardrail-scenario i { flex: 0 0 auto; color: var(--teal-dark); font: 10px "DM Mono"; font-style: normal; }
 .guardrail-result-list { display: grid; gap: 8px; margin-top: 28px; }
 .guardrail-result { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); }
 .guardrail-result > span { display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid var(--teal-dark); color: var(--teal-dark); font: 12px "DM Mono"; }
@@ -909,19 +910,22 @@ h1 em {
 .guardrail-result-note b { color: var(--teal-dark); font-weight: 400; }
 
 @media (max-width: 720px) {
-  .guardrail-lab-grid { grid-template-columns: 1fr; }
+  .guardrail-lab-grid { grid-template-columns: minmax(0, 1fr); }
   .guardrail-control-panel, .guardrail-result-panel { padding: 22px; }
   .guardrail-panel-heading { display: block; }
   .guardrail-stage-label { display: block; margin-top: 14px; }
   .guardrail-stage-picker { grid-template-columns: 1fr; }
   .guardrail-validator { grid-template-columns: 18px minmax(0, 1fr); }
   .guardrail-validator i { grid-column: 2; }
+  .guardrail-scenario small { overflow-wrap: anywhere; white-space: normal; }
   .topic-lab-actions { justify-content: stretch; }
   .topic-lab-actions .button { width: 100%; }
   .topic-completion { margin: 34px auto; padding: 32px 22px; }
 }
 
 @media (max-width: 950px) {
+  .workflow-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .workflow-step { min-width: 0; }
   .auth-model { grid-template-columns: 1fr; }
   .auth-model > i { height: 36px; transform: rotate(90deg); }
   .auth-node, .auth-node.active { padding: 24px; }
@@ -1142,3 +1146,209 @@ h1 em {
 @media (prefers-reduced-motion: reduce) {
   .integration-stage, .integration-scenario { transition: none; }
 }
+
+@media (max-width: 640px) {
+  .rest-request-target code { min-width: 0; overflow-wrap: anywhere; text-overflow: clip; white-space: normal; }
+}
+
+/* Git typography accessibility floor: readable support text without flattening the hero hierarchy. */
+.nav-label { font-size: 12px; }
+.sidebar nav button span { font-size: 12px; }
+.sidebar-progress > div:first-child { font-size: 12px; }
+.sidebar-progress b { font-size: 12px; }
+.sidebar-progress p { font-size: 12px; }
+.breadcrumb { font-size: 12px; }
+
+.git-lesson-page .section-heading h2 { font-size: 24px; }
+.git-lesson-page .section-heading > p { font-size: 12px; }
+.git-lesson-page .workflow-step > span { font-size: 12px; }
+.git-lesson-page .workflow-step p { font-size: 12px; }
+.git-lesson-page .lesson-index span { font-size: 24px; }
+.git-lesson-page .lesson-copy code { font-size: 12px; }
+.git-lesson-page .lesson-copy code span { font-size: inherit; }
+.git-lesson-page .lesson-card aside p { font-size: 12px; }
+.git-lesson-page .orientation-card > div strong { font-size: 24px; }
+.git-lesson-page .module-status > span { font-size: 12px; }
+.git-lesson-page .lab-cta h2 { font-size: 24px; }
+
+.git-lab-shell .lab-progress span { font-size: 12px; }
+.git-lab-shell .terminal-top { font-size: 12px; }
+.git-lab-shell .terminal-top button { font-size: 12px; }
+.git-lab-shell .terminal-entry p { font-size: 12px; }
+.git-lab-shell .terminal-entry small { font-size: 12px; }
+.git-lab-shell .terminal-form input { font-size: 12px; }
+.git-lab-shell .terminal-form button { font-size: 12px; }
+.git-lab-shell .mission-number { font-size: 24px; }
+.git-lab-shell .git-provider-picker { font-size: 12px; }
+.git-lab-shell .git-provider-picker select { font-size: 12px; }
+.git-lab-shell .command-chip code { font-size: 12px; }
+.git-lab-shell .command-chip span { font-size: 12px; }
+.git-lab-shell .mission-note { font-size: 12px; }
+.git-lab-shell .repo-state small { font-size: 12px; }
+.git-lab-shell .repo-state b { font-size: 12px; }
+.git-lab-shell .remote-panel-heading h2,
+.git-lab-shell .remote-context-panel h2 { font-size: 24px; }
+.git-lab-shell .remote-lab-meta { font-size: 12px; }
+.git-lab-shell .remote-action-index { font-size: 12px; }
+.git-lab-shell .remote-action-copy code {
+  overflow: visible;
+  font-size: 12px;
+  text-overflow: clip;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  line-height: 1.5;
+}
+.git-lab-shell .git-job-grid b { font-size: 12px; }
+.git-lab-shell .topic-completion h2 { font-size: 24px; }
+
+/* Foundations typography floor: readable support text while preserving the hero hierarchy. */
+.foundation-lesson-page .section-heading h2 { font-size: 24px; }
+.foundation-lesson-page .section-heading > p { font-size: 12px; }
+.foundation-lesson-page .lesson-index span { font-size: 24px; }
+.foundation-lesson-page .lesson-copy code { font-size: 12px; }
+.foundation-lesson-page .lesson-copy code span { font-size: inherit; }
+.foundation-lesson-page .lesson-card aside p { font-size: 12px; }
+.foundation-lesson-page .orientation-card > div strong { font-size: 24px; }
+.foundation-lesson-page .module-status > span { font-size: 12px; }
+.foundation-lesson-page .lab-cta h2 { font-size: 24px; }
+
+.foundation-lab-shell .kicker,
+.foundation-lab-shell small,
+.foundation-lab-shell code { font-size: 12px; }
+.foundation-lab-shell .section-heading h2 { font-size: 24px; }
+.foundation-lab-shell .lab-progress span,
+.foundation-lab-shell .terminal-top,
+.foundation-lab-shell .terminal-top button,
+.foundation-lab-shell .terminal-entry p,
+.foundation-lab-shell .terminal-entry small,
+.foundation-lab-shell .terminal-form input,
+.foundation-lab-shell .terminal-form button,
+.foundation-lab-shell .git-provider-picker,
+.foundation-lab-shell .git-provider-picker select,
+.foundation-lab-shell .command-chip code,
+.foundation-lab-shell .command-chip span,
+.foundation-lab-shell .mission-note,
+.foundation-lab-shell .repo-state small,
+.foundation-lab-shell .repo-state b,
+.foundation-lab-shell .remote-lab-meta,
+.foundation-lab-shell .remote-action-index,
+.foundation-lab-shell .remote-context-list dt,
+.foundation-lab-shell .remote-context-list dd,
+.foundation-lab-shell .ide-editor-top,
+.foundation-lab-shell .ide-file-tab,
+.foundation-lab-shell .ide-file-tab span,
+.foundation-lab-shell .ide-editor,
+.foundation-lab-shell .ide-code-line,
+.foundation-lab-shell .ide-lab-meta,
+.foundation-lab-shell .ide-action-index,
+.foundation-lab-shell .ide-current-hint,
+.foundation-lab-shell .package-workspace-top,
+.foundation-lab-shell .package-file-tabs button,
+.foundation-lab-shell .package-editor,
+.foundation-lab-shell .package-action-index,
+.foundation-lab-shell .package-current-hint,
+.foundation-lab-shell .package-lab-meta,
+.foundation-lab-shell .ide-breakpoint { font-size: 12px; }
+.foundation-lab-shell .mission-number { font-size: 24px; }
+.foundation-lab-shell .ide-state-grid small,
+.foundation-lab-shell .ide-state-grid b,
+.foundation-lab-shell .package-state-grid small,
+.foundation-lab-shell .package-state-grid b { font-size: 12px; }
+.foundation-lab-shell .remote-action-copy code,
+.foundation-lab-shell .ide-action-copy code,
+.foundation-lab-shell .package-action-copy code { font-size: 12px; }
+.foundation-lab-shell .remote-action-copy code {
+  overflow: visible;
+  text-overflow: clip;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  line-height: 1.5;
+}
+.foundation-lab-shell .remote-panel-heading h2,
+.foundation-lab-shell .remote-context-panel h2,
+.foundation-lab-shell .ide-panel-heading h2,
+.foundation-lab-shell .package-panel-heading h2,
+.foundation-lab-shell .topic-completion h2 { font-size: 24px; }
+
+/* Remaining course typography floor: keep instructional text between 12px and 24px. */
+.course-lesson-page :is(p, span, b, strong, small, code, pre, button, input, textarea, select, option, label, dt, dd, th, td, li, em, i) {
+  font-size: max(12px, 1em) !important;
+}
+.course-lesson-page :is(h2, h3, h4) {
+  font-size: min(24px, max(12px, 1em)) !important;
+}
+.course-lesson-page .lesson-index span,
+.course-lesson-page .orientation-card > div strong,
+.course-lesson-page .lab-cta h2 { font-size: 24px !important; }
+.course-lesson-page .lesson-card,
+.course-lesson-page .lesson-copy,
+.course-lesson-page .lesson-card aside { min-width: 0; }
+.course-lesson-page .lesson-copy code {
+  max-width: 100%;
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+
+.course-lab-shell :is(p, span, b, strong, small, code, pre, button, input, textarea, select, option, label, dt, dd, th, td, li, em, i) {
+  font-size: max(12px, 1em) !important;
+}
+.course-lab-shell :is(h2, h3, h4) {
+  font-size: min(24px, max(12px, 1em)) !important;
+}
+.course-lab-shell .topic-completion h2 { font-size: 24px !important; }
+
+@media (max-width: 900px) {
+  .course-lab-shell .rest-code-toolbar,
+  .course-lab-shell .rest-code-meta {
+    align-items: stretch;
+    flex-direction: column;
+    padding: 12px;
+  }
+  .course-lab-shell .rest-file-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .course-lab-shell .rest-code-lines > button {
+    grid-template-columns: 32px minmax(0, 1fr);
+    padding-right: 10px;
+  }
+  .course-lab-shell .rest-code-lines > button small { grid-column: 2; }
+  .course-lab-shell .rest-code-lines > button code { overflow-wrap: anywhere; white-space: pre-wrap; }
+}
+
+/* Full-site typography floor: content text stays between 12px and 24px. */
+.main-area :is(p, span, b, strong, small, code, pre, button, input, textarea, select, option, label, dt, dd, th, td, li, em, i) {
+  font-size: max(12px, 1em) !important;
+}
+.main-area :is(h2, h3, h4) {
+  font-size: min(24px, max(12px, 1em)) !important;
+}
+
+/* Map and track metadata is supporting content, so keep it readable without competing with titles. */
+.page-map .visual-title,
+.page-map .map-intro h2 { font-size: 24px !important; }
+.page-map .visual-label,
+.page-map .visual-footer span,
+.page-map .visual-footer b,
+.page-map .map-intro > p,
+.page-map .track-card header > span,
+.page-map .track-card header p,
+.page-map .track-card-link,
+.page-map .topic-state,
+.page-map .topic-item b,
+.page-map .topic-item small,
+.page-map .topic-item em { font-size: 12px !important; }
+
+.track-page .track-back,
+.track-page .kicker,
+.track-page .track-progress-block small,
+.track-page .track-topic-status,
+.track-page .track-topic-button,
+.track-page .track-topic-disabled,
+.track-page .track-topic-copy > p:last-child { font-size: 12px !important; }
+.track-page .track-progress-block > span,
+.track-page .track-topic-number,
+.track-page .track-topic-copy h3,
+.track-page .track-topic-heading h2 { font-size: 24px !important; }
+
+.course-lesson-page .orientation-card > div strong,
+.course-lesson-page .lab-cta h2,
+.course-lab-shell .problem-solving-case-card h2,
+.course-lab-shell .topic-completion h2 { font-size: 24px !important; }
diff --git a/frontend/src/topics/build/lab.tsx b/frontend/src/topics/build/lab.tsx
index 9009f69..67ec69e 100644
--- a/frontend/src/topics/build/lab.tsx
+++ b/frontend/src/topics/build/lab.tsx
@@ -18,9 +18,7 @@ interface BuildHistoryEntry {
   accepted?: boolean;
 }
 
-const INITIAL_HISTORY: readonly BuildHistoryEntry[] = [
-  { lines: ["Build sandbox v1", "固定 package、Vite config 與 dist fixture 已準備好。"] },
-];
+const INITIAL_HISTORY: readonly BuildHistoryEntry[] = [];
 
 function eventForStep(stepId: BuildStepId): BuildLabEvent {
   return buildLabHappyPath.find((event) => event.type === stepId) ?? { type: stepId };
@@ -114,12 +112,13 @@ export function BuildLab({ onComplete }: { onComplete?: () => void }) {
     setState(createInitialBuildState());
     setCommand("");
     setSelectedFile("package-json");
-    setHistory([{ lines: ["BUILD Lab 已重設。從 cat package.json 重新開始。"] }]);
+    setHistory([{ lines: ["已重設。從 cat package.json 重新開始。"] }]);
   }
 
   return (
     <TopicLabShell
-      eyebrow="INTERACTIVE LAB / BUILD"
+      className="course-lab-shell"
+      showMeta={false}
       title={<>把 source 變成<br /><em>可以交付的產品</em></>}
       progressLabel={`${completedCount} / ${buildLessonSteps.length} STEPS`}
       progress={buildLabProgress(state)}
@@ -135,13 +134,13 @@ export function BuildLab({ onComplete }: { onComplete?: () => void }) {
         />
       ) : (
         <div className="build-lab-grid">
-          <section className="build-workspace-panel" aria-label="Build workspace fixture">
+          <section className="build-workspace-panel" aria-label="Build workspace">
             <div className="build-workspace-top">
               <span className="build-window-dots" aria-hidden="true"><i /><i /><i /></span>
               <b>workshop-build-lab</b>
               <span className="build-phase">{state.phase}</span>
             </div>
-            <div className="build-file-tabs" role="tablist" aria-orientation="horizontal" aria-label="Build fixture files">
+            <div className="build-file-tabs" role="tablist" aria-orientation="horizontal" aria-label="Build files">
               {buildFileFixtures.map((file, index) => (
                 <button
                   className={selectedFile === file.id ? "active" : ""}
@@ -173,7 +172,7 @@ export function BuildLab({ onComplete }: { onComplete?: () => void }) {
                 key={file.id}
                 role="tabpanel"
                 aria-labelledby={buildTabId(file.id)}
-                aria-label={`${file.id} fixture`}
+                aria-label={file.id}
                 tabIndex={0}
                 hidden={selectedFile !== file.id}
               >
@@ -210,8 +209,8 @@ export function BuildLab({ onComplete }: { onComplete?: () => void }) {
 
           <aside className="build-control-panel" aria-label="Build controls">
             <div className="build-panel-heading">
-              <div><p className="kicker">BUILD CONTROL</p><h2>從 source 走到 artifact</h2></div>
-              <span className="build-lab-meta">Vite + TypeScript<br />fixture only</span>
+              <div><h2>從 source 走到 artifact</h2></div>
+              <span className="build-lab-meta">Vite + TypeScript</span>
             </div>
             <div className="build-action-list">
               {buildLessonSteps.map((step, index) => {
@@ -232,13 +231,13 @@ export function BuildLab({ onComplete }: { onComplete?: () => void }) {
                 );
               })}
             </div>
-            <p className="build-current-hint">目前任務：{currentStep.title}。可以故意點錯順序，觀察 simulator 如何保留狀態並提示原因。</p>
+            <p className="build-current-hint">目前任務：{currentStep.title}。可以故意點錯順序，觀察狀態如何保留並提示原因。</p>
           </aside>
         </div>
       )}
 
       <section className="build-state-section" aria-labelledby="build-state-title">
-        <div className="section-heading"><div><p className="kicker">LIVE BUILD STATE</p><h2 id="build-state-title">目前的交付線索</h2></div><p>只顯示 simulator 狀態，不執行真實 build。</p></div>
+        <div className="section-heading"><div><h2 id="build-state-title">目前的交付線索</h2></div></div>
         <div className="build-state-grid">
           <div><small>TYPECHECK</small><b>{state.typecheckState}</b></div>
           <div><small>BUNDLE</small><b>{state.bundleState}</b></div>
diff --git a/frontend/src/topics/build/lesson.tsx b/frontend/src/topics/build/lesson.tsx
index c8b6dd8..37c39f4 100644
--- a/frontend/src/topics/build/lesson.tsx
+++ b/frontend/src/topics/build/lesson.tsx
@@ -5,7 +5,8 @@ import type { LessonOrientation } from "../types";
 export function BuildLesson({ completed, onOpenLab, orientation }: { completed: boolean; onOpenLab: () => void; orientation: LessonOrientation }) {
   return (
     <TopicLessonShell
-      eyebrow="TOPIC 07 / FOUNDATIONS"
+      className="course-lesson-page"
+      showMeta={false}
       moduleNumber="07"
       title={<>把 source 變成<br /><em>可以交付的產品</em></>}
       description="從 TypeScript gate、Vite production bundle 到 dist preview，理解 source、artifact、base path 與靜態部署的關係。"
@@ -17,20 +18,20 @@ export function BuildLesson({ completed, onOpenLab, orientation }: { completed:
           const step = buildLessonSteps[index];
           return (
             <article className="lesson-card" key={section.id}>
-              <div className="lesson-index"><span>{String(index + 1).padStart(2, "0")}</span><small>BUILD</small></div>
+              <div className="lesson-index"><span>{String(index + 1).padStart(2, "0")}</span></div>
               <div className="lesson-copy">
                 <h2>{section.title}</h2>
                 <p>{section.body}</p>
                 {step ? <code><span>$</span> {step.command}</code> : null}
               </div>
-              <aside><small>記住這句</small><p>{step?.takeaway ?? "Build 的終點不是指令成功，而是 artifact 能被正確服務。"}</p></aside>
+              <aside><p>{step?.takeaway ?? "Build 的終點不是指令成功，而是 artifact 能被正確服務。"}</p></aside>
             </article>
           );
         })}
       </section>
 
       <section className="lab-cta">
-        <div><p className="kicker">BUILD TOOLING LAB</p><h2>把 artifact 交到正確位置。</h2><p>{buildLesson.objectives.length} 個學習目標 · 不執行真實部署</p></div>
+        <div><h2>把 artifact 交到正確位置。</h2></div>
         <button className="button light" type="button" onClick={onOpenLab}>進入 BUILD Lab <span>→</span></button>
       </section>
     </TopicLessonShell>
diff --git a/frontend/src/topics/cicd/content.test.ts b/frontend/src/topics/cicd/content.test.ts
index 08d6501..d3c1d41 100644
--- a/frontend/src/topics/cicd/content.test.ts
+++ b/frontend/src/topics/cicd/content.test.ts
@@ -34,7 +34,7 @@ describe("CI/CD topic content contract", () => {
       cacheDependencyPath: "frontend/package-lock.json",
       workingDirectory: "frontend",
       targetRefs: ["dev", "main"],
-      sourceRef: "fixture/feature",
+      sourceRef: "feature/order",
     });
     expect(cicdWorkflowFixture.path).toBe(".github/workflows/ci.yml");
     expect(cicdWorkflowFixture.lines).toContain("npm test · cwd frontend");
diff --git a/frontend/src/topics/cicd/content.ts b/frontend/src/topics/cicd/content.ts
index 5f459ef..e32e040 100644
--- a/frontend/src/topics/cicd/content.ts
+++ b/frontend/src/topics/cicd/content.ts
@@ -14,7 +14,7 @@ export const cicdLesson: LessonDefinition = {
     "理解 npm ci、test、lint、build 的 fail-fast 順序。",
     "以 required check 判斷 pull request 是否 mergeable。",
     "區分 test failure、build failure 與下游 not-run evidence。",
-    "用固定 scenario 重跑 success、failure 與 reset/replay flow。",
+    "依序重跑 scenario、failure 與 reset/replay flow。",
   ],
   sections: [
     {
@@ -50,7 +50,7 @@ export const cicdLesson: LessonDefinition = {
     {
       id: "repeatable-pipeline",
       title: "Reset 後重跑同一條線",
-      body: "相同 fixture 加上相同 event sequence 應得到相同 step status、required check 與 merge gate。可重複的 pipeline evidence 比一次性的綠色畫面更可靠。",
+      body: "相同測試資料加上相同 event sequence 應得到相同 step status、required check 與 merge gate。可重複的 pipeline evidence 比一次性的綠色畫面更可靠。",
     },
   ],
 };
@@ -97,7 +97,7 @@ export const cicdLessonSteps: readonly CicdLessonStep[] = [
     sectionId: "checkout-and-cache",
     title: "Checkout source",
     command: "actions/checkout@v4",
-    explanation: "runner 先取得 fixture source ref；尚未 checkout 時，install 與任何 gate 都沒有可信輸入。",
+    explanation: "runner 先取得 source ref；尚未 checkout 時，install 與任何 gate 都沒有可信輸入。",
     takeaway: "先固定 source，再談依賴與檢查結果。",
   },
   {
@@ -105,7 +105,7 @@ export const cicdLessonSteps: readonly CicdLessonStep[] = [
     sectionId: "checkout-and-cache",
     title: "安裝 lockfile 依賴",
     command: "npm ci  # frontend",
-    explanation: "Node 22、npm cache 與 frontend/package-lock.json 形成 deterministic install context。",
+    explanation: "Node 22、npm cache 與 frontend/package-lock.json 形成可重現的 install context。",
     takeaway: "npm ci 是可重現 pipeline input，不是可省略的暖身。",
   },
   {
@@ -159,7 +159,7 @@ export const cicdFixture = {
   cacheDependencyPath: "frontend/package-lock.json",
   workingDirectory: "frontend",
   targetRefs: ["dev", "main"],
-  sourceRef: "fixture/feature",
+  sourceRef: "feature/order",
 } as const;
 
 export interface CicdWorkflowFixture {
@@ -274,8 +274,8 @@ export interface CicdStageFixture {
 
 export const cicdStageFixtures: readonly CicdStageFixture[] = [
   { id: "inspect-workflow", boundary: "workflow / job", successEvidence: "CI · frontend · required check frontend", failureEvidence: "workflow 尚未 inspect" },
-  { id: "select-trigger", boundary: "event / ref", successEvidence: "pull_request · base dev", failureEvidence: "event 或 target ref 不在 fixture" },
-  { id: "checkout-source", boundary: "source ref", successEvidence: "fixture/feature checked out", failureEvidence: "source 尚未取得，後續 stages not-run" },
+  { id: "select-trigger", boundary: "event / ref", successEvidence: "pull_request · base dev", failureEvidence: "event 或 target ref 不符合條件" },
+  { id: "checkout-source", boundary: "source ref", successEvidence: "feature/order checked out", failureEvidence: "source 尚未取得，後續 stages not-run" },
   { id: "install-dependencies", boundary: "lockfile / runtime", successEvidence: "Node 22 · npm cache · npm ci passed", failureEvidence: "install failed，test／lint／build not-run" },
   { id: "run-test", boundary: "behavior gate", successEvidence: "npm test passed", failureEvidence: "npm test failed，lint／build not-run" },
   { id: "run-lint", boundary: "TypeScript gate", successEvidence: "npm run lint passed", failureEvidence: "lint failed，build not-run" },
diff --git a/frontend/src/topics/cicd/lab.tsx b/frontend/src/topics/cicd/lab.tsx
index 34bedb8..5acce3d 100644
--- a/frontend/src/topics/cicd/lab.tsx
+++ b/frontend/src/topics/cicd/lab.tsx
@@ -26,7 +26,6 @@ interface CicdHistoryEntry {
 }
 
 const INITIAL_HISTORY: readonly CicdHistoryEntry[] = [
-  { lines: ["CI/CD sandbox v1", "固定 workflow、required check 與四個 pipeline scenario 已準備好。"] },
 ];
 
 function scenarioFor(scenarioId: CicdScenarioId | null): CicdScenarioFixture | undefined {
@@ -110,12 +109,13 @@ export function CicdLab({ onComplete }: { onComplete?: () => void }) {
   function reset() {
     dispatch({ type: "reset" });
     setCommand("");
-    setHistory([{ lines: ["CI/CD Lab 已重設；保留 scenario audit，從固定 workflow 重新開始。"] }]);
+    setHistory([]);
   }
 
   return (
     <TopicLabShell
-      eyebrow="INTERACTIVE LAB / CI/CD"
+      className="course-lab-shell"
+      showMeta={false}
       title={<>讓每次變更都經過同一條<br /><em>可重跑的檢查線</em></>}
       progressLabel={`${state.completedScenarioIds.length} / ${cicdScenarioFixtures.length} SCENARIOS · ${state.regressionVerified ? "REPLAY OK" : "REPLAY PENDING"}`}
       progress={cicdLabProgress(state)}
@@ -133,8 +133,7 @@ export function CicdLab({ onComplete }: { onComplete?: () => void }) {
 
       <section className="cicd-scenario-panel" aria-labelledby="cicd-scenario-title">
         <div className="cicd-panel-heading">
-          <div><p className="kicker">FIXED PIPELINES</p><h2 id="cicd-scenario-title">先選擇一條可重跑的 CI/CD flow</h2></div>
-          <span>{cicdScenarioFixtures.length} required outcomes</span>
+          <div><h2 id="cicd-scenario-title">先選擇一條可重跑的 CI/CD flow</h2></div>
         </div>
         <div className="cicd-scenario-list" role="group" aria-label="Required CI/CD scenarios">
           {cicdScenarioFixtures.map((item, index) => {
@@ -159,17 +158,17 @@ export function CicdLab({ onComplete }: { onComplete?: () => void }) {
 
       <section className="cicd-workbench-panel" aria-labelledby="cicd-workbench-title">
         <div className="cicd-panel-heading cicd-workbench-heading">
-          <div><p className="kicker">PIPELINE WORKBENCH</p><h2 id="cicd-workbench-title">每個 stage 都留下 gate evidence</h2></div>
-          <span>{scenario ? `${state.completedStageIds.length} / ${cicdLessonSteps.length} stages` : "waiting for fixture"}</span>
+          <div><h2 id="cicd-workbench-title">每個 stage 都留下 gate evidence</h2></div>
+          <span>{scenario ? `${state.completedStageIds.length} / ${cicdLessonSteps.length} stages` : "未選擇"}</span>
         </div>
         <div className="cicd-workbench-grid">
           <section className="cicd-context-panel" aria-labelledby="cicd-context-title">
             <div className="cicd-file-header">
-              <div><p className="kicker">WORKFLOW FIXTURE</p><h3 id="cicd-context-title">固定 CI workflow</h3></div>
+              <div><h3 id="cicd-context-title">CI workflow</h3></div>
               <span>{cicdFixture.workingDirectory}</span>
             </div>
-            <div className="cicd-file-card" aria-label="CI workflow fixture">
-              <header><span>{cicdWorkflowFixture.path}</span><b>fixture only</b></header>
+            <div className="cicd-file-card" aria-label="CI workflow">
+              <header><span>{cicdWorkflowFixture.path}</span></header>
               {cicdWorkflowFixture.lines.map((line, index) => (
                 <div className="cicd-code-line" key={`${line}-${index}`}><span>{String(index + 1).padStart(2, "0")}</span><code>{line}</code></div>
               ))}
@@ -200,8 +199,8 @@ export function CicdLab({ onComplete }: { onComplete?: () => void }) {
 
           <aside className="cicd-control-panel" aria-label="CI/CD Lab controls">
             <div className="cicd-panel-heading">
-              <div><p className="kicker">STAGE CONTROL</p><h3>從 trigger 走到 merge gate</h3></div>
-              <span className="cicd-lab-meta">fixture only<br />no runner</span>
+              <div><h3>從 trigger 走到 merge gate</h3></div>
+              <span className="cicd-lab-meta">no runner</span>
             </div>
             <div className="cicd-action-list">
               {cicdLessonSteps.map((step, index) => {
@@ -228,7 +227,7 @@ export function CicdLab({ onComplete }: { onComplete?: () => void }) {
       </section>
 
       <section className="cicd-state-section" aria-labelledby="cicd-state-title">
-        <div className="cicd-panel-heading"><div><p className="kicker">LIVE PIPELINE STATE</p><h2 id="cicd-state-title">目前的 workflow／gate 線索</h2></div><span>只顯示 simulator，不啟動 runner</span></div>
+        <div className="cicd-panel-heading"><div><h2 id="cicd-state-title">目前的 workflow／gate 線索</h2></div></div>
         <div className="cicd-state-grid">
           <div><small>PHASE</small><b>{state.phase}</b></div>
           <div><small>SCENARIO</small><b>{state.selectedScenarioId ?? "—"}</b></div>
@@ -250,7 +249,7 @@ export function CicdLab({ onComplete }: { onComplete?: () => void }) {
       </section>
 
       <section className="cicd-evidence-section" aria-labelledby="cicd-evidence-title">
-        <div className="cicd-panel-heading"><div><p className="kicker">OBSERVABLE CONTRACT</p><h2 id="cicd-evidence-title">每個 stage 都有 success／failure evidence</h2></div><span>不以顏色代替結果</span></div>
+        <div className="cicd-panel-heading"><div><h2 id="cicd-evidence-title">每個 stage 都有 success／failure evidence</h2></div></div>
         <div className="cicd-evidence-table" role="table" aria-label="CI/CD stage evidence">
           {cicdStageFixtures.map((fixture) => (
             <div className="cicd-evidence-row" key={fixture.id} role="row">
diff --git a/frontend/src/topics/cicd/lesson.tsx b/frontend/src/topics/cicd/lesson.tsx
index 7bc4c83..b6774fe 100644
--- a/frontend/src/topics/cicd/lesson.tsx
+++ b/frontend/src/topics/cicd/lesson.tsx
@@ -5,7 +5,8 @@ import { cicdLesson, cicdLessonSteps } from "./content";
 export function CicdLesson({ completed, onOpenLab, orientation }: { completed: boolean; onOpenLab: () => void; orientation: LessonOrientation }) {
   return (
     <TopicLessonShell
-      eyebrow="TOPIC 18 / DELIVERY"
+      className="course-lesson-page"
+      showMeta={false}
       moduleNumber="18"
       title={<>讓每次變更都經過<br /><em>可重跑的檢查線</em></>}
       description="從 workflow trigger、source checkout 與 lockfile install，到 test／lint／build、required check 與 merge gate，理解一條 CI pipeline 如何留下可追蹤的 failure boundary。"
@@ -17,20 +18,20 @@ export function CicdLesson({ completed, onOpenLab, orientation }: { completed: b
           const step = cicdLessonSteps.find((candidate) => candidate.sectionId === section.id);
           return (
             <article className="lesson-card" key={section.id}>
-              <div className="lesson-index"><span>{String(index + 1).padStart(2, "0")}</span><small>CI/CD</small></div>
+              <div className="lesson-index"><span>{String(index + 1).padStart(2, "0")}</span></div>
               <div className="lesson-copy">
                 <h2>{section.title}</h2>
                 <p>{section.body}</p>
                 {step ? <code><span>$</span> {step.command}</code> : null}
               </div>
-              <aside><small>記住這句</small><p>{step?.takeaway ?? "每個 pipeline 結果都要連回一個清楚的 gate boundary。"}</p></aside>
+              <aside><p>{step?.takeaway ?? "每個 pipeline 結果都要連回一個清楚的 gate boundary。"}</p></aside>
             </article>
           );
         })}
       </section>
 
       <section className="lab-cta">
-        <div><p className="kicker">CI/CD LAB</p><h2>讓 workflow、failure 與 merge gate 都留下證據。</h2><p>{cicdLesson.objectives.length} 個學習目標 · deterministic fixture，不啟動真實 runner</p></div>
+        <div><h2>讓 workflow、failure 與 merge gate 都留下證據。</h2></div>
         <button className="button light" type="button" onClick={onOpenLab}>進入 CI/CD Lab <span>→</span></button>
       </section>
     </TopicLessonShell>
diff --git a/frontend/src/topics/cicd/simulator.ts b/frontend/src/topics/cicd/simulator.ts
index 0ff2ef1..c04b683 100644
--- a/frontend/src/topics/cicd/simulator.ts
+++ b/frontend/src/topics/cicd/simulator.ts
@@ -214,7 +214,7 @@ export function createInitialCicdState(): CicdLabState {
     regressionVerified: false,
     resetSinceBaseline: false,
     resetCount: 0,
-    lastFeedback: "請先選擇一個 CI/CD deterministic scenario。",
+    lastFeedback: "請先選擇一個 CI/CD scenario。",
     lastCommand: null,
     canReset: true,
   };
@@ -231,7 +231,7 @@ export function resetCicdLab(previous?: CicdLabState): CicdLabState {
     regressionVerified: previous.regressionVerified,
     resetSinceBaseline: previous.resetSinceBaseline || previous.regressionBaselineSignature !== null,
     resetCount: previous.resetCount + 1,
-    lastFeedback: "CI/CD Lab 已重設；可以選擇下一個固定 pipeline scenario。",
+    lastFeedback: "CI/CD Lab 已重設；可以選擇下一個 pipeline scenario。",
   };
 }
 
@@ -255,7 +255,7 @@ export function runCicdEvent(current: CicdLabState, event: CicdLabEvent): CicdEv
 
   if (event.type === "select-scenario") {
     const scenario = cicdScenarioFixtures.find((candidate) => candidate.id === event.scenarioId);
-    if (!scenario) return failed(current, "select-scenario", "請選擇一個有效的 CI/CD deterministic scenario。 ");
+    if (!scenario) return failed(current, "select-scenario", "請選擇一個有效的 CI/CD scenario。 ");
     if (current.selectedScenarioId && current.completedStageIds.length > 0) {
       return blocked(current, "select-scenario", "目前 scenario 尚未 reset；先完成或重設目前的 pipeline flow。 ");
     }
@@ -311,7 +311,7 @@ export function runCicdEvent(current: CicdLabState, event: CicdLabEvent): CicdEv
       return accepted(
         state,
         { phase: "running", activeStageId: "install-dependencies", completedStageIds: withStage(state, event.type), lastCommand: commandFor(event.type) },
-        "fixture source ref 已 checkout；可以建立依賴安裝 context。",
+        "source ref 已 checkout；可以建立依賴安裝 context。",
         [`source ref: ${cicdFixture.sourceRef}`, "checkout: passed", "next: npm ci"],
       );
     case "install-dependencies":
diff --git a/frontend/src/topics/cli/content.ts b/frontend/src/topics/cli/content.ts
index 652caa0..a59347f 100644
--- a/frontend/src/topics/cli/content.ts
+++ b/frontend/src/topics/cli/content.ts
@@ -1,16 +1,16 @@
 import type { LessonDefinition } from "../../topics/types";
 
 export const cliLesson: LessonDefinition = {
-  title: "在固定工作目錄中讀懂命令列",
+  title: "在工作目錄中讀懂命令列",
   orientation: {
     what: "命令列是用文字指令與作業系統或工具互動的介面；每個指令都會在目前工作目錄中讀取輸入並產生結果。",
     why: "它適合把檢查、建置與部署寫成可重複、可自動化、可被 CI 執行的流程，而不是依賴手動點擊。",
     when: "需要快速處理檔案、搜尋線索、執行專案 script、檢查 exit code，或在本機重現 CI 步驟時使用。",
-    how: "先用 pwd 確認 context，再用 cd、ls、cat、grep 讀取 fixture，觀察 stdout／stderr 與 exit code，最後重複驗證流程。",
+    how: "先用 pwd 確認 context，再用 cd、ls、cat、grep 讀取檔案，觀察 stdout／stderr 與 exit code，最後重複驗證流程。",
   },
   objectives: [
     "用 pwd 與 cd 建立目前工作目錄的 context。",
-    "用 ls、cat 與 grep 讀取 fixture 並找出線索。",
+    "用 ls、cat 與 grep 讀取檔案並找出線索。",
     "區分 stdout、stderr 與 exit code，並用可重複流程完成檢查。",
   ],
   sections: [
@@ -32,7 +32,7 @@ export const cliLesson: LessonDefinition = {
     {
       id: "repeatable-check",
       title: "把檢查做成可重複流程",
-      body: "固定 fixture 與固定命令順序能讓結果可重現。若走錯路徑或流程失敗，先讀懂回饋，再 reset 回到相同起點。",
+      body: "固定檔案與命令順序能讓結果可重現。若走錯路徑或流程失敗，先讀懂回饋，再 reset 回到相同起點。",
     },
   ],
 };
@@ -50,7 +50,7 @@ export const cliLessonSteps: readonly CliLessonStep[] = [
     id: "context",
     title: "確認目前工作目錄",
     command: "pwd",
-    explanation: "先確認命令列目前位於固定的 project fixture，避免用錯相對路徑。",
+    explanation: "先確認命令列目前位於 project 目錄，避免用錯相對路徑。",
     takeaway: "先確認 context，再解讀其他命令的結果。",
   },
   {
@@ -78,7 +78,7 @@ export const cliLessonSteps: readonly CliLessonStep[] = [
     id: "verify",
     title: "執行固定檢查",
     command: "npm test",
-    explanation: "在正確的來源目錄執行 fixture 內的固定檢查，成功時會回報 stdout 與 exit code 0。",
+    explanation: "在正確的來源目錄執行檢查，成功時會回報 stdout 與 exit code 0。",
     takeaway: "可重複的檢查流程比一次性的手動觀察可靠。",
   },
 ] as const;
@@ -200,7 +200,7 @@ export const cliFailureFixtures: readonly CliFailureFixture[] = [
 export const cliLabInitialState: CliLabState = {
   cwd: "/workspace/project",
   files: [
-    { path: "README.md", content: "# CLI fixture" },
+    { path: "README.md", content: "# CLI project" },
     { path: "package.json", content: '{"scripts":{"test":"vitest run"}}' },
     { path: "src/app.ts", content: "export const ready = true; // TODO: add example" },
     { path: ".env.example", content: "API_URL=https://example.invalid" },
@@ -212,7 +212,7 @@ export const cliLabInitialState: CliLabState = {
   exitCode: null,
   phase: "initial",
   completedStepIds: [],
-  lastMessage: "準備從固定的 project fixture 開始。",
+  lastMessage: "先確認目前工作目錄。",
   canReset: true,
 };
 
diff --git a/frontend/src/topics/cli/lesson.tsx b/frontend/src/topics/cli/lesson.tsx
index fd77ef7..9153c51 100644
--- a/frontend/src/topics/cli/lesson.tsx
+++ b/frontend/src/topics/cli/lesson.tsx
@@ -5,10 +5,11 @@ import type { LessonOrientation } from "../types";
 export function CliLesson({ completed, onOpenLab, orientation }: { completed: boolean; onOpenLab: () => void; orientation: LessonOrientation }) {
   return (
     <TopicLessonShell
-      eyebrow="TOPIC 03 / FOUNDATIONS"
+      className="foundation-lesson-page"
+      showMeta={false}
       moduleNumber="03"
-      title={<>在固定工作目錄中<br /><em>讀懂命令列</em></>}
-      description="先確認 cwd，再用固定 fixture 讀取檔案、搜尋線索與執行檢查；錯誤不會碰到真實檔案，reset 後可以重複練習。"
+      title={<>在工作目錄中<br /><em>讀懂命令列</em></>}
+      description="先確認 cwd，再用命令列讀取檔案、搜尋線索與執行檢查。"
       orientation={orientation}
       completed={completed}
     >
@@ -17,20 +18,20 @@ export function CliLesson({ completed, onOpenLab, orientation }: { completed: bo
           const step = cliLessonSteps[index];
           return (
             <article className="lesson-card" key={section.id}>
-              <div className="lesson-index"><span>{String(index + 1).padStart(2, "0")}</span><small>CLI</small></div>
+              <div className="lesson-index"><span>{String(index + 1).padStart(2, "0")}</span></div>
               <div className="lesson-copy">
                 <h2>{section.title}</h2>
                 <p>{section.body}</p>
                 {step ? <code><span>$</span> {step.command}</code> : null}
               </div>
-              <aside><small>記住這句</small><p>{step?.takeaway ?? "先讀懂輸出，再決定下一個命令。"}</p></aside>
+              <aside><p>{step?.takeaway ?? "先讀懂輸出，再決定下一個命令。"}</p></aside>
             </article>
           );
         })}
       </section>
 
       <section className="lab-cta">
-        <div><p className="kicker">COMMAND LINE LAB</p><h2>把命令列流程走一遍。</h2><p>{cliLesson.objectives.length} 個學習目標 · 不碰真實 shell 或檔案系統</p></div>
+        <div><h2>把命令列流程走一遍。</h2></div>
         <button className="button light" type="button" onClick={onOpenLab}>進入 CLI Lab <span>→</span></button>
       </section>
     </TopicLessonShell>
diff --git a/frontend/src/topics/cli/simulator.test.ts b/frontend/src/topics/cli/simulator.test.ts
index d5ba9a0..9a109c5 100644
--- a/frontend/src/topics/cli/simulator.test.ts
+++ b/frontend/src/topics/cli/simulator.test.ts
@@ -53,7 +53,7 @@ describe("CLI Lab simulator", () => {
     const result = runCliCommand(createCliLabState(), "cat README.md");
 
     expect(result.accepted).toBe(true);
-    expect(result.output).toEqual(["# CLI fixture"]);
+    expect(result.output).toEqual(["# CLI project"]);
     expect(result.state.completedStepIds).toEqual([]);
     expect(result.state.exitCode).toBe(0);
   });
diff --git a/frontend/src/topics/cli/simulator.ts b/frontend/src/topics/cli/simulator.ts
index 09ca7ee..d5a5281 100644
--- a/frontend/src/topics/cli/simulator.ts
+++ b/frontend/src/topics/cli/simulator.ts
@@ -112,7 +112,7 @@ function runKnownCommand(state: CliLabState, command: string): CliCommandResult
     return appendSuccess(
       state,
       output,
-      state.cwd === "/workspace/project/src" ? "已確認來源目錄內有 app.ts。" : "已列出 project root 的固定檔案。",
+      state.cwd === "/workspace/project/src" ? "已確認來源目錄內有 app.ts。" : "已列出 project root 的檔案。",
       state.cwd === "/workspace/project/src" ? "inspect" : undefined,
     );
   }
@@ -152,9 +152,9 @@ function runKnownCommand(state: CliLabState, command: string): CliCommandResult
 
   if (command === "npm test") {
     if (state.cwd !== "/workspace/project/src") {
-      return appendOutput(state, "stderr", "npm test: blocked until the source directory is selected", 1, "先完成 pwd 與 cd src，再執行固定檢查。");
+      return appendOutput(state, "stderr", "npm test: blocked until the source directory is selected", 1, "先完成 pwd 與 cd src，再執行檢查。");
     }
-    return appendSuccess(state, "Tests: 3 passed", "固定檢查通過，CLI Lab 已完成。", "verify");
+    return appendSuccess(state, "Tests: 3 passed", "檢查通過，CLI Lab 已完成。", "verify");
   }
 
   return null;
@@ -175,7 +175,7 @@ export function runCliCommand(current: CliLabState, rawCommand: string): CliComm
   const knownResult = runKnownCommand(state, command);
   if (knownResult) return knownResult;
 
-  return appendOutput(state, "stderr", `${command}: command not found`, 127, "命令不存在；請確認拼字或回到教材中的固定指令。");
+  return appendOutput(state, "stderr", `${command}: command not found`, 127, "命令不存在；請確認拼字或回到教材中的指令。");
 }
 
 export const cliSimulator: SimulatorDefinition<CliLabState, CliLabEvent> = {
diff --git a/frontend/src/topics/deploy/content.ts b/frontend/src/topics/deploy/content.ts
index a2ae70b..e7238e9 100644
--- a/frontend/src/topics/deploy/content.ts
+++ b/frontend/src/topics/deploy/content.ts
@@ -14,7 +14,7 @@ export const deployLesson: LessonDefinition = {
     "理解 release version、artifact provenance 與 Pages base path 的關係。",
     "辨識 artifact missing、base path mismatch 與 live probe failure 的 boundary。",
     "以 release record 保存 source、version、URL、status 與 rollback evidence。",
-    "用固定 scenario 重跑 success、blocked、rollback 與 reset/replay flow。",
+    "依序重跑 scenario、blocked、rollback 與 reset/replay flow。",
   ],
   sections: [
     {
@@ -25,7 +25,7 @@ export const deployLesson: LessonDefinition = {
     {
       id: "workflow-input",
       title: "Release source 要指向 main",
-      body: "部署 fixture 只接受 main push 或手動 dispatch。source、candidate version 與 previous verified version 必須在 release 開始前清楚可見。",
+      body: "部署流程只接受 main push 或手動 dispatch。source、candidate version 與 previous verified version 必須在 release 開始前清楚可見。",
     },
     {
       id: "artifact-provenance",
diff --git a/frontend/src/topics/deploy/lab.tsx b/frontend/src/topics/deploy/lab.tsx
index a13cd31..f367763 100644
--- a/frontend/src/topics/deploy/lab.tsx
+++ b/frontend/src/topics/deploy/lab.tsx
@@ -26,7 +26,6 @@ interface DeployHistoryEntry {
 }
 
 const INITIAL_HISTORY: readonly DeployHistoryEntry[] = [
-  { lines: ["Deploy sandbox v1", "固定 Pages workflow、release record 與四個 deployment scenario 已準備好。"] },
 ];
 
 function scenarioFor(scenarioId: DeployScenarioId | null): DeployScenarioFixture | undefined {
@@ -109,12 +108,13 @@ export function DeployLab({ onComplete }: { onComplete?: () => void }) {
   function reset() {
     dispatch({ type: "reset" });
     setCommand("");
-    setHistory([{ lines: ["Deploy Lab 已重設；保留 scenario audit，從固定 Pages workflow 重新開始。"] }]);
+    setHistory([]);
   }
 
   return (
     <TopicLabShell
-      eyebrow="INTERACTIVE LAB / DEPLOY"
+      className="course-lab-shell"
+      showMeta={false}
       title={<>讓 publish、probe 與 rollback<br /><em>都留下證據</em></>}
       progressLabel={`${state.completedScenarioIds.length} / ${deployScenarioFixtures.length} SCENARIOS · ${state.regressionVerified ? "REPLAY OK" : "REPLAY PENDING"}`}
       progress={deployLabProgress(state)}
@@ -132,8 +132,7 @@ export function DeployLab({ onComplete }: { onComplete?: () => void }) {
 
       <section className="deploy-scenario-panel" aria-labelledby="deploy-scenario-title">
         <div className="deploy-panel-heading">
-          <div><p className="kicker">FIXED RELEASES</p><h2 id="deploy-scenario-title">先選擇一條可重跑的 deployment flow</h2></div>
-          <span>{deployScenarioFixtures.length} required outcomes</span>
+          <div><h2 id="deploy-scenario-title">先選擇一條可重跑的 deployment flow</h2></div>
         </div>
         <div className="deploy-scenario-list" role="group" aria-label="Required deployment scenarios">
           {deployScenarioFixtures.map((item, index) => {
@@ -158,17 +157,17 @@ export function DeployLab({ onComplete }: { onComplete?: () => void }) {
 
       <section className="deploy-workbench-panel" aria-labelledby="deploy-workbench-title">
         <div className="deploy-panel-heading deploy-workbench-heading">
-          <div><p className="kicker">RELEASE WORKBENCH</p><h2 id="deploy-workbench-title">每個 stage 都留下 delivery evidence</h2></div>
-          <span>{scenario ? `${state.completedStageIds.length} / ${deployLessonSteps.length} stages` : "waiting for fixture"}</span>
+          <div><h2 id="deploy-workbench-title">每個 stage 都留下 delivery evidence</h2></div>
+          <span>{scenario ? `${state.completedStageIds.length} / ${deployLessonSteps.length} stages` : "未選擇"}</span>
         </div>
         <div className="deploy-workbench-grid">
           <section className="deploy-context-panel" aria-labelledby="deploy-context-title">
             <div className="deploy-file-header">
-              <div><p className="kicker">PAGES WORKFLOW FIXTURE</p><h3 id="deploy-context-title">固定 deployment workflow</h3></div>
+              <div><h3 id="deploy-context-title">Pages deployment workflow</h3></div>
               <span>{deployFixture.pagesBranch}</span>
             </div>
-            <div className="deploy-file-card" aria-label="Deploy workflow fixture">
-              <header><span>{deployWorkflowFixture.path}</span><b>fixture only</b></header>
+            <div className="deploy-file-card" aria-label="Deploy workflow">
+              <header><span>{deployWorkflowFixture.path}</span></header>
               {deployWorkflowFixture.lines.map((line, index) => (
                 <div className="deploy-code-line" key={`${line}-${index}`}><span>{String(index + 1).padStart(2, "0")}</span><code>{line}</code></div>
               ))}
@@ -199,8 +198,8 @@ export function DeployLab({ onComplete }: { onComplete?: () => void }) {
 
           <aside className="deploy-control-panel" aria-label="Deploy Lab controls">
             <div className="deploy-panel-heading">
-              <div><p className="kicker">STAGE CONTROL</p><h3>從 main release 走到 rollback</h3></div>
-              <span className="deploy-lab-meta">fixture only<br />no Pages API</span>
+              <div><h3>從 main release 走到 rollback</h3></div>
+              <span className="deploy-lab-meta">no Pages API</span>
             </div>
             <div className="deploy-action-list">
               {deployLessonSteps.map((step, index) => {
@@ -227,7 +226,7 @@ export function DeployLab({ onComplete }: { onComplete?: () => void }) {
       </section>
 
       <section className="deploy-state-section" aria-labelledby="deploy-state-title">
-        <div className="deploy-panel-heading"><div><p className="kicker">LIVE RELEASE STATE</p><h2 id="deploy-state-title">目前的 artifact／Pages 線索</h2></div><span>只顯示 simulator，不連線 Pages</span></div>
+        <div className="deploy-panel-heading"><div><h2 id="deploy-state-title">目前的 artifact／Pages 線索</h2></div></div>
         <div className="deploy-state-grid">
           <div><small>PHASE</small><b>{state.phase}</b></div>
           <div><small>SCENARIO</small><b>{state.selectedScenarioId ?? "—"}</b></div>
@@ -251,7 +250,7 @@ export function DeployLab({ onComplete }: { onComplete?: () => void }) {
       </section>
 
       <section className="deploy-evidence-section" aria-labelledby="deploy-evidence-title">
-        <div className="deploy-panel-heading"><div><p className="kicker">OBSERVABLE CONTRACT</p><h2 id="deploy-evidence-title">每個 stage 都有 success／failure evidence</h2></div><span>不以顏色代替結果</span></div>
+        <div className="deploy-panel-heading"><div><h2 id="deploy-evidence-title">每個 stage 都有 success／failure evidence</h2></div></div>
         <div className="deploy-evidence-table" role="table" aria-label="Deployment stage evidence">
           {deployStageFixtures.map((fixture) => (
             <div className="deploy-evidence-row" key={fixture.id} role="row">
diff --git a/frontend/src/topics/deploy/lesson.tsx b/frontend/src/topics/deploy/lesson.tsx
index ac272d5..9de0777 100644
--- a/frontend/src/topics/deploy/lesson.tsx
+++ b/frontend/src/topics/deploy/lesson.tsx
@@ -5,7 +5,8 @@ import { deployLesson, deployLessonSteps } from "./content";
 export function DeployLesson({ completed, onOpenLab, orientation }: { completed: boolean; onOpenLab: () => void; orientation: LessonOrientation }) {
   return (
     <TopicLessonShell
-      eyebrow="TOPIC 19 / DELIVERY"
+      className="course-lesson-page"
+      showMeta={false}
       moduleNumber="19"
       title={<>把通過驗證的版本交付到<br /><em>可觀測的網站</em></>}
       description="從 main release、CI artifact 與 Pages base path，到 gh-pages publish、live probe、release record 與 rollback，理解部署如何留下完整的 evidence chain。"
@@ -17,20 +18,20 @@ export function DeployLesson({ completed, onOpenLab, orientation }: { completed:
           const step = deployLessonSteps.find((candidate) => candidate.sectionId === section.id);
           return (
             <article className="lesson-card" key={section.id}>
-              <div className="lesson-index"><span>{String(index + 1).padStart(2, "0")}</span><small>DEPLOY</small></div>
+              <div className="lesson-index"><span>{String(index + 1).padStart(2, "0")}</span></div>
               <div className="lesson-copy">
                 <h2>{section.title}</h2>
                 <p>{section.body}</p>
                 {step ? <code><span>$</span> {step.command}</code> : null}
               </div>
-              <aside><small>記住這句</small><p>{step?.takeaway ?? "每個部署結果都要連回一個清楚的 release boundary。"}</p></aside>
+              <aside><p>{step?.takeaway ?? "每個部署結果都要連回一個清楚的 release boundary。"}</p></aside>
             </article>
           );
         })}
       </section>
 
       <section className="lab-cta">
-        <div><p className="kicker">DEPLOY LAB</p><h2>讓 publish、probe 與 rollback 都留下證據。</h2><p>{deployLesson.objectives.length} 個學習目標 · deterministic fixture，不連線真實 Pages</p></div>
+        <div><h2>讓 publish、probe 與 rollback 都留下證據。</h2></div>
         <button className="button light" type="button" onClick={onOpenLab}>進入 DEPLOY Lab <span>→</span></button>
       </section>
     </TopicLessonShell>
diff --git a/frontend/src/topics/deploy/simulator.ts b/frontend/src/topics/deploy/simulator.ts
index 0f927a8..3f393c1 100644
--- a/frontend/src/topics/deploy/simulator.ts
+++ b/frontend/src/topics/deploy/simulator.ts
@@ -203,7 +203,7 @@ export function createInitialDeployState(): DeployLabState {
     regressionVerified: false,
     resetSinceBaseline: false,
     resetCount: 0,
-    lastFeedback: "請先選擇一個 deployment deterministic scenario。",
+    lastFeedback: "請先選擇一個 deployment scenario。",
     lastCommand: null,
     canReset: true,
   };
@@ -220,7 +220,7 @@ export function resetDeployLab(previous?: DeployLabState): DeployLabState {
     regressionVerified: previous.regressionVerified,
     resetSinceBaseline: previous.resetSinceBaseline || previous.regressionBaselineSignature !== null,
     resetCount: previous.resetCount + 1,
-    lastFeedback: "Deploy Lab 已重設；可以選擇下一個固定 release scenario。",
+    lastFeedback: "Deploy Lab 已重設；可以選擇下一個 release scenario。",
   };
 }
 
@@ -244,7 +244,7 @@ export function runDeployEvent(current: DeployLabState, event: DeployLabEvent):
 
   if (event.type === "select-scenario") {
     const scenario = deployScenarioFixtures.find((candidate) => candidate.id === event.scenarioId);
-    if (!scenario) return failed(current, "select-scenario", "請選擇一個有效的 deployment deterministic scenario。 ");
+    if (!scenario) return failed(current, "select-scenario", "請選擇一個有效的 deployment scenario。 ");
     if (current.selectedScenarioId && current.completedStageIds.length > 0) {
       return blocked(current, "select-scenario", "目前 scenario 尚未 reset；先完成或重設目前的 release flow。 ");
     }
diff --git a/frontend/src/topics/docker/content.test.ts b/frontend/src/topics/docker/content.test.ts
index b703c87..3f1a097 100644
--- a/frontend/src/topics/docker/content.test.ts
+++ b/frontend/src/topics/docker/content.test.ts
@@ -30,7 +30,7 @@ describe("Docker topic content contract", () => {
       dockerfilePath: "Dockerfile",
       sourceArtifact: "dist/index.html",
       imageTag: "workshop-web:1",
-      imageDigest: "sha256:docker-fixture-001",
+      imageDigest: "sha256:docker-image-001",
       containerName: "workshop-web",
       containerPort: 80,
       hostPort: 8080,
diff --git a/frontend/src/topics/docker/content.ts b/frontend/src/topics/docker/content.ts
index 03a92de..89fd779 100644
--- a/frontend/src/topics/docker/content.ts
+++ b/frontend/src/topics/docker/content.ts
@@ -4,23 +4,23 @@ export const dockerLesson: LessonDefinition = {
   title: "把靜態 artifact 放進可重複的執行環境",
   orientation: {
     what: "Docker 用 image 描述可重複建立的檔案與設定，用 container 表示從 image 啟動的執行個體；Dockerfile 與 build context 連起這兩個邊界。",
-    why: "把 runtime 輸入固定下來，能讓本機、CI 與部署使用相同的執行環境，也讓缺檔、錯誤 port 與殘留 container 變成可觀察的狀態。",
+    why: "把 runtime 輸入整理好，能讓本機、CI 與部署使用相同的執行環境，也讓缺檔、錯誤 port 與殘留 container 變成可觀察的狀態。",
     when: "需要包裝 static site、重現服務環境、檢查 container 內外的 port 邊界，或在交付前驗證 image 與 runtime 行為時使用。",
-    how: "先檢查 Dockerfile 與 build context，再 build 固定 image，run container，從 host probe 驗證 port mapping，最後 stop／remove 清理 fixture。",
+    how: "先檢查 Dockerfile 與 build context，再 build image，run container，從 host probe 驗證 port mapping，最後 stop／remove 清理環境。",
   },
   objectives: [
     "分辨 image、container、Dockerfile 與 build context 的責任。",
     "讀懂 FROM、COPY、EXPOSE 與 runtime command 如何影響 static-site container。",
-    "理解固定 tag、digest 與 source artifact 如何支援可重現的 build。",
+    "理解 tag、digest 與 source artifact 如何支援可重現的 build。",
     "分辨 container 內的 port metadata 與 host 端的 published port。",
-    "用固定 HTTP probe 驗證 container running 不等於 host 可連線。",
-    "完成 stop／remove cleanup，讓相同 Docker fixture 可以安全重跑。",
+    "用 HTTP probe 驗證 container running 不等於 host 可連線。",
+    "完成 stop／remove cleanup，讓相同 Docker 輸入可以安全重跑。",
   ],
   sections: [
     {
       id: "image-and-container",
       title: "Image 是輸入，container 是執行個體",
-      body: "image 是可被標記與建立的固定輸入；container 是從 image 產生、具有 running／stopped state 的執行個體。看到 image build 成功，還不能推論服務已啟動。",
+      body: "image 是可被標記與建立的可重現輸入；container 是從 image 產生、具有 running／stopped state 的執行個體。看到 image build 成功，還不能推論服務已啟動。",
     },
     {
       id: "dockerfile-boundaries",
@@ -30,12 +30,12 @@ export const dockerLesson: LessonDefinition = {
     {
       id: "build-context",
       title: "Context 決定 build 能看見什麼",
-      body: "docker build 最後的 . 是固定 build context；Dockerfile 不能讀取 context 之外的檔案。這裡的 fixture 只提供 dist/index.html 與 Dockerfile，不讀取使用者真實 repository。",
+      body: "docker build 最後的 . 是 build context；Dockerfile 不能讀取 context 之外的檔案。這裡只提供 dist/index.html 與 Dockerfile，不讀取使用者真實 repository。",
     },
     {
       id: "reproducible-image",
-      title: "用固定輸入留下 image 證據",
-      body: "固定 image tag、fixture digest 與 source artifact，才能比較兩次 build 是否使用相同輸入。這個 Lab 不下載 base image，也不把目前時間或 random id 當成驗收結果。",
+      title: "用可重現輸入留下 image 證據",
+      body: "image tag、checksum 與 source artifact 能讓兩次 build 比較相同輸入。這個 Lab 不下載 base image，也不把目前時間或 random id 當成驗收結果。",
     },
     {
       id: "published-port",
@@ -45,12 +45,12 @@ export const dockerLesson: LessonDefinition = {
     {
       id: "runtime-probe",
       title: "Running 還要經過 host probe",
-      body: "container running 只能證明執行個體啟動；固定的 curl probe 還要看到正確 mapping 與 HTTP 200。沒有 mapping 時要保留 unreachable，不可把成功結果寫死。",
+      body: "container running 只能證明執行個體啟動；curl probe 還要看到正確 mapping 與 HTTP 200。沒有 mapping 時要保留 unreachable，不可把成功結果寫死。",
     },
     {
       id: "cleanup-and-repeat",
       title: "清理是可重複流程的一部分",
-      body: "先 stop 再 remove container，才能清除 runtime 與 port state，讓下一次相同 fixture 不會被殘留狀態污染。完成 cleanup 後再 reset 重跑，結果應保持一致。",
+      body: "先 stop 再 remove container，才能清除 runtime 與 port state，讓下一次流程不會被殘留狀態污染。完成 cleanup 後再 reset 重跑，結果應保持一致。",
     },
   ],
 };
@@ -72,15 +72,15 @@ export const dockerLessonSteps: readonly DockerLessonStep[] = [
     sectionId: "build-context",
     title: "檢查 build context",
     command: "cat Dockerfile && ls dist",
-    explanation: "先確認 Dockerfile 與 dist/index.html 都位於固定 context，避免把 context 之外的檔案當成 build input。",
+    explanation: "先確認 Dockerfile 與 dist/index.html 都位於同一個 context，避免把 context 之外的檔案當成 build input。",
     takeaway: "Build 能看見什麼，先由 context 決定。",
   },
   {
     id: "build-image",
     sectionId: "reproducible-image",
-    title: "建立固定 image",
+    title: "建立 image",
     command: "docker build -t workshop-web:1 .",
-    explanation: "用固定 tag 與固定 source artifact 建立 image；COPY 找不到 artifact 時，build 要在 boundary 停止。",
+    explanation: "用指定 tag 與 source artifact 建立 image；COPY 找不到 artifact 時，build 要在 boundary 停止。",
     takeaway: "Build success 的證據包含 tag、digest 與 source input。",
   },
   {
@@ -96,7 +96,7 @@ export const dockerLessonSteps: readonly DockerLessonStep[] = [
     sectionId: "runtime-probe",
     title: "驗證 host runtime",
     command: "curl http://localhost:8080/",
-    explanation: "用固定 host probe 觀察 HTTP 200；container running 但沒有 published mapping 時，結果必須是 unreachable。",
+    explanation: "用 host probe 觀察 HTTP 200；container running 但沒有 published mapping 時，結果必須是 unreachable。",
     takeaway: "Running、mapping 與 probe success 要一起成立。",
   },
   {
@@ -104,7 +104,7 @@ export const dockerLessonSteps: readonly DockerLessonStep[] = [
     sectionId: "cleanup-and-repeat",
     title: "停止並移除 container",
     command: "docker stop workshop-web && docker rm workshop-web",
-    explanation: "先停止 runtime，再移除 fixture container，清掉可能影響下一次練習的 local state。",
+    explanation: "先停止 runtime，再移除 container，清掉可能影響下一次練習的 local state。",
     takeaway: "清理完成，流程才真正可重跑。",
   },
 ] as const;
@@ -114,7 +114,7 @@ export const dockerFixture = {
   dockerfilePath: "Dockerfile",
   sourceArtifact: "dist/index.html",
   imageTag: "workshop-web:1",
-  imageDigest: "sha256:docker-fixture-001",
+  imageDigest: "sha256:docker-image-001",
   containerName: "workshop-web",
   containerPort: 80,
   hostPort: 8080,
@@ -200,14 +200,14 @@ export const dockerCommandFixtures: readonly DockerCommandFixture[] = [
     stepId: "inspect-context",
     command: "cat Dockerfile && ls dist",
     boundary: "build context / Dockerfile",
-    successEvidence: "Dockerfile 與 dist/index.html 都在固定 context",
+    successEvidence: "Dockerfile 與 dist/index.html 都在同一個 context",
     failureEvidence: "尚未確認 source artifact，不能開始 build",
   },
   {
     stepId: "build-image",
     command: "docker build -t workshop-web:1 .",
     boundary: "COPY / image",
-    successEvidence: "workshop-web:1 · sha256:docker-fixture-001",
+    successEvidence: "workshop-web:1 · sha256:docker-image-001",
     failureEvidence: "COPY dist/ 找不到 dist/index.html，image 保持 absent",
   },
   {
diff --git a/frontend/src/topics/docker/lab.tsx b/frontend/src/topics/docker/lab.tsx
index 24ea1f7..5b8b86e 100644
--- a/frontend/src/topics/docker/lab.tsx
+++ b/frontend/src/topics/docker/lab.tsx
@@ -26,7 +26,6 @@ interface DockerHistoryEntry {
 }
 
 const INITIAL_HISTORY: readonly DockerHistoryEntry[] = [
-  { lines: ["Docker sandbox v1", "固定 Dockerfile、dist artifact 與三個 scenario 已準備好。"] },
 ];
 
 function scenarioFor(scenarioId: DockerScenarioId | null): DockerScenarioFixture | undefined {
@@ -112,12 +111,13 @@ export function DockerLab({ onComplete }: { onComplete?: () => void }) {
   function reset() {
     dispatch({ type: "reset" });
     setCommand("");
-    setHistory([{ lines: ["Docker Lab 已重設；保留 scenario audit，從固定 fixture 重新開始。"] }]);
+    setHistory([]);
   }
 
   return (
     <TopicLabShell
-      eyebrow="INTERACTIVE LAB / DOCKER BASICS"
+      className="course-lab-shell"
+      showMeta={false}
       title={<>把 image、container 與 port<br /><em>都留下可觀察證據</em></>}
       progressLabel={`${state.completedScenarioIds.length} / ${dockerScenarioFixtures.length} SCENARIOS · ${state.regressionVerified ? "REPLAY OK" : "REPLAY PENDING"}`}
       progress={dockerLabProgress(state)}
@@ -128,15 +128,14 @@ export function DockerLab({ onComplete }: { onComplete?: () => void }) {
       {completed ? (
         <TopicCompletionCard
           title="三個 Docker scenarios 與 replay 都完成了。"
-          description="你已驗證固定 image、COPY failure、container state、host port mapping、HTTP probe 與 cleanup；Docker Lab 完成。"
+          description="你已驗證 image、COPY failure、container state、host port mapping、HTTP probe 與 cleanup；Docker Lab 完成。"
           onReset={reset}
         />
       ) : null}
 
       <section className="docker-scenario-panel" aria-labelledby="docker-scenario-title">
         <div className="docker-panel-heading">
-          <div><p className="kicker">FIXED SCENARIOS</p><h2 id="docker-scenario-title">先選擇一條可重跑的 Docker flow</h2></div>
-          <span>{dockerScenarioFixtures.length} required outcomes</span>
+          <div><h2 id="docker-scenario-title">先選擇一條可重跑的 Docker flow</h2></div>
         </div>
         <div className="docker-scenario-list" role="group" aria-label="Required Docker scenarios">
           {dockerScenarioFixtures.map((item, index) => {
@@ -161,17 +160,17 @@ export function DockerLab({ onComplete }: { onComplete?: () => void }) {
 
       <section className="docker-workbench-panel" aria-labelledby="docker-workbench-title">
         <div className="docker-panel-heading docker-workbench-heading">
-          <div><p className="kicker">DOCKER WORKBENCH</p><h2 id="docker-workbench-title">每一步都對應一個 runtime boundary</h2></div>
-          <span>{scenario ? `${state.completedStepIds.length} / ${dockerLessonSteps.length} stages` : "waiting for fixture"}</span>
+          <div><h2 id="docker-workbench-title">每一步都對應一個 runtime boundary</h2></div>
+          <span>{scenario ? `${state.completedStepIds.length} / ${dockerLessonSteps.length} stages` : "未選擇"}</span>
         </div>
         <div className="docker-workbench-grid">
           <section className="docker-context-panel" aria-labelledby="docker-context-title">
             <div className="docker-file-header">
-              <div><p className="kicker">BUILD CONTEXT</p><h3 id="docker-context-title">固定 static-site fixture</h3></div>
+              <div><h3 id="docker-context-title">static-site build context</h3></div>
               <span>{dockerFixture.contextPath}</span>
             </div>
-            <div className="docker-file-card" aria-label="Dockerfile fixture">
-              <header><span>{dockerFileFixture.path}</span><b>fixture only</b></header>
+            <div className="docker-file-card" aria-label="Dockerfile">
+              <header><span>{dockerFileFixture.path}</span></header>
               {dockerFileFixture.lines.map((line, index) => (
                 <div className="docker-code-line" key={`${line}-${index}`}><span>{String(index + 1).padStart(2, "0")}</span><code>{line}</code></div>
               ))}
@@ -203,8 +202,8 @@ export function DockerLab({ onComplete }: { onComplete?: () => void }) {
 
           <aside className="docker-control-panel" aria-label="Docker Lab controls">
             <div className="docker-panel-heading">
-              <div><p className="kicker">COMMAND CONTROL</p><h3>從 context 走到 cleanup</h3></div>
-              <span className="docker-lab-meta">fixture only<br />no daemon</span>
+              <div><h3>從 context 走到 cleanup</h3></div>
+              <span className="docker-lab-meta">no daemon</span>
             </div>
             <div className="docker-action-list">
               {dockerLessonSteps.map((step, index) => {
@@ -238,7 +237,7 @@ export function DockerLab({ onComplete }: { onComplete?: () => void }) {
       </section>
 
       <section className="docker-state-section" aria-labelledby="docker-state-title">
-        <div className="docker-panel-heading"><div><p className="kicker">LIVE RUNTIME STATE</p><h2 id="docker-state-title">目前的 image／container 線索</h2></div><span>只顯示 simulator，不執行 Docker</span></div>
+        <div className="docker-panel-heading"><div><h2 id="docker-state-title">目前的 image／container 線索</h2></div></div>
         <div className="docker-state-grid">
           <div><small>PHASE</small><b>{state.phase}</b></div>
           <div><small>SCENARIO</small><b>{state.selectedScenarioId ?? "—"}</b></div>
@@ -254,7 +253,7 @@ export function DockerLab({ onComplete }: { onComplete?: () => void }) {
       </section>
 
       <section className="docker-evidence-section" aria-labelledby="docker-evidence-title">
-        <div className="docker-panel-heading"><div><p className="kicker">OBSERVABLE CONTRACT</p><h2 id="docker-evidence-title">每個 command 都留下 boundary evidence</h2></div><span>不以顏色代替結果</span></div>
+        <div className="docker-panel-heading"><div><h2 id="docker-evidence-title">每個 command 都留下 boundary evidence</h2></div></div>
         <div className="docker-evidence-table" role="table" aria-label="Docker command evidence">
           {dockerCommandFixtures.map((fixture) => (
             <div className="docker-evidence-row" key={fixture.stepId} role="row">
diff --git a/frontend/src/topics/docker/lesson.tsx b/frontend/src/topics/docker/lesson.tsx
index c33548b..3618a1a 100644
--- a/frontend/src/topics/docker/lesson.tsx
+++ b/frontend/src/topics/docker/lesson.tsx
@@ -5,10 +5,11 @@ import { dockerLesson, dockerLessonSteps } from "./content";
 export function DockerLesson({ completed, onOpenLab, orientation }: { completed: boolean; onOpenLab: () => void; orientation: LessonOrientation }) {
   return (
     <TopicLessonShell
-      eyebrow="TOPIC 17 / DELIVERY"
+      className="course-lesson-page"
+      showMeta={false}
       moduleNumber="17"
       title={<>把靜態 artifact 放進<br /><em>可重複的執行環境</em></>}
-      description="從 Dockerfile 與 build context 到 image、container、host port 與 cleanup，理解一個 static site 如何被固定成可觀察的 runtime fixture。"
+      description="從 Dockerfile 與 build context 到 image、container、host port 與 cleanup，理解一個 static site 如何成為可觀察的 runtime。"
       orientation={orientation}
       completed={completed}
     >
@@ -17,20 +18,20 @@ export function DockerLesson({ completed, onOpenLab, orientation }: { completed:
           const step = dockerLessonSteps.find((candidate) => candidate.sectionId === section.id);
           return (
             <article className="lesson-card" key={section.id}>
-              <div className="lesson-index"><span>{String(index + 1).padStart(2, "0")}</span><small>DOCKER</small></div>
+              <div className="lesson-index"><span>{String(index + 1).padStart(2, "0")}</span></div>
               <div className="lesson-copy">
                 <h2>{section.title}</h2>
                 <p>{section.body}</p>
                 {step ? <code><span>$</span> {step.command}</code> : null}
               </div>
-              <aside><small>記住這句</small><p>{step?.takeaway ?? "每個 runtime 結果都要連回一個清楚的 boundary。"}</p></aside>
+              <aside><p>{step?.takeaway ?? "每個 runtime 結果都要連回一個清楚的 boundary。"}</p></aside>
             </article>
           );
         })}
       </section>
 
       <section className="lab-cta">
-        <div><p className="kicker">DOCKER BASICS LAB</p><h2>讓 image、container 與 port 都留下證據。</h2><p>{dockerLesson.objectives.length} 個學習目標 · deterministic fixture，不啟動真實 Docker</p></div>
+        <div><h2>讓 image、container 與 port 都留下證據。</h2></div>
         <button className="button light" type="button" onClick={onOpenLab}>進入 DOCKER Lab <span>→</span></button>
       </section>
     </TopicLessonShell>
diff --git a/frontend/src/topics/docker/simulator.test.ts b/frontend/src/topics/docker/simulator.test.ts
index 01d19a6..5148eb1 100644
--- a/frontend/src/topics/docker/simulator.test.ts
+++ b/frontend/src/topics/docker/simulator.test.ts
@@ -56,7 +56,7 @@ describe("Docker deterministic simulator", () => {
       selectedScenarioId: "static-site-success",
       imageState: "built",
       imageTag: "workshop-web:1",
-      imageDigest: "sha256:docker-fixture-001",
+      imageDigest: "sha256:docker-image-001",
       containerState: "removed",
       portMapping: "published",
       probeState: "success",
diff --git a/frontend/src/topics/docker/simulator.ts b/frontend/src/topics/docker/simulator.ts
index 7df294d..1326553 100644
--- a/frontend/src/topics/docker/simulator.ts
+++ b/frontend/src/topics/docker/simulator.ts
@@ -201,7 +201,7 @@ export function createInitialDockerState(): DockerLabState {
     resetSinceBaseline: false,
     resetCount: 0,
     lastCommand: null,
-    lastMessage: "請先選擇一個 Docker deterministic scenario。",
+    lastMessage: "請先選擇一個 Docker scenario。",
     canReset: true,
   };
 }
@@ -217,7 +217,7 @@ export function resetDockerLab(previous?: DockerLabState): DockerLabState {
     regressionVerified: previous.regressionVerified,
     resetSinceBaseline: previous.resetSinceBaseline || previous.happyPathBaselineSignature !== null,
     resetCount: previous.resetCount + 1,
-    lastMessage: "Docker Lab 已重設；可以選擇下一個固定 scenario。",
+    lastMessage: "Docker Lab 已重設；可以選擇下一個 scenario。",
   };
 }
 
@@ -229,7 +229,7 @@ export function runDockerEvent(current: DockerLabState, event: DockerLabEvent):
   if (event.type === "reset") {
     return {
       state: resetDockerLab(current),
-      output: ["Docker Lab 已重設；固定 image、container、port 與 probe state 已清除。"],
+      output: ["Docker Lab 已重設；image、container、port 與 probe state 已清除。"],
       accepted: true,
       observedFailure: false,
     };
@@ -241,7 +241,7 @@ export function runDockerEvent(current: DockerLabState, event: DockerLabEvent):
 
   if (event.type === "select-scenario") {
     const scenario = dockerScenarioFixtures.find((candidate) => candidate.id === event.scenarioId);
-    if (!scenario) return failed(current, "select-scenario", "請選擇一個有效的 Docker deterministic scenario。 ");
+    if (!scenario) return failed(current, "select-scenario", "請選擇一個有效的 Docker scenario。 ");
     if (current.selectedScenarioId && current.completedStepIds.length > 0) {
       return blocked(current, "select-scenario", "目前 scenario 尚未 reset；先完成或重設目前的 Docker flow。 ");
     }
@@ -288,7 +288,7 @@ export function runDockerEvent(current: DockerLabState, event: DockerLabEvent):
         },
         scenario.id === "missing-build-artifact"
           ? "Dockerfile 已找到，但 dist/index.html 缺少；下一步 build 會在 COPY boundary 停止。"
-          : "Dockerfile 與 dist/index.html 都在固定 build context；可以開始 build。",
+          : "Dockerfile 與 dist/index.html 都在同一個 build context；可以開始 build。",
         scenario.id === "missing-build-artifact"
           ? ["Dockerfile: found", "dist/index.html: missing", "context: .", "next: docker build → COPY failure"]
           : ["Dockerfile: found", "dist/index.html: found", "context: .", "next: docker build"],
@@ -391,7 +391,7 @@ export function runDockerEvent(current: DockerLabState, event: DockerLabEvent):
           probeStatus: dockerFixture.probeStatus,
           lastCommand: commandFor(event.type),
         },
-        "host probe 回傳固定 HTTP 200；runtime verification 通過，可以 cleanup。",
+        "host probe 回傳 HTTP 200；runtime verification 通過，可以 cleanup。",
         ["HTTP status: 200", `body marker: ${dockerFixture.bodyMarker}`, "probe: success", "next: stop and remove"],
       );
     case "repair-port":
@@ -409,10 +409,10 @@ export function runDockerEvent(current: DockerLabState, event: DockerLabEvent):
           portMapping: "published",
           probeState: "pending",
           probeStatus: null,
-          lastMessage: "已補上 8080→80 mapping；重新執行固定 host probe。",
+          lastMessage: "已補上 8080→80 mapping；重新執行 host probe。",
           lastCommand: "docker run --name workshop-web -p 8080:80 workshop-web:1",
         },
-        "已補上 8080→80 mapping；重新執行固定 host probe。",
+        "已補上 8080→80 mapping；重新執行 host probe。",
         ["EXPOSE 80: unchanged", "host mapping: 8080→80", "next: curl probe"],
       );
     case "cleanup-container":
diff --git a/frontend/src/topics/env/lab.tsx b/frontend/src/topics/env/lab.tsx
index 0c92d98..2cbbca2 100644
--- a/frontend/src/topics/env/lab.tsx
+++ b/frontend/src/topics/env/lab.tsx
@@ -17,9 +17,7 @@ interface EnvHistoryEntry {
   accepted?: boolean;
 }
 
-const INITIAL_HISTORY: readonly EnvHistoryEntry[] = [
-  { lines: ["Environment sandbox v1", "固定 .env fixture 已準備好。請依序檢查設定來源與公開邊界。"] },
-];
+const INITIAL_HISTORY: readonly EnvHistoryEntry[] = [];
 
 function eventForStep(stepId: EnvStepId): EnvLabEvent {
   return envLabHappyPath.find((event) => event.type === stepId) ?? { type: stepId };
@@ -101,12 +99,13 @@ export function EnvLab({ onComplete }: { onComplete?: () => void }) {
     setState(createInitialEnvState());
     setCommand("");
     setSelectedFile("env-example");
-    setHistory([{ lines: ["ENV Lab 已重設。從 cat .env.example 重新開始。"] }]);
+    setHistory([{ lines: ["已重設。從 cat .env.example 重新開始。"] }]);
   }
 
   return (
     <TopicLabShell
-      eyebrow="INTERACTIVE LAB / ENV"
+      className="course-lab-shell"
+      showMeta={false}
       title={<>讓設定跟著環境走<br /><em>但別把秘密打包</em></>}
       progressLabel={`${completedCount} / ${envLessonSteps.length} STEPS`}
       progress={envLabProgress(state)}
@@ -122,13 +121,13 @@ export function EnvLab({ onComplete }: { onComplete?: () => void }) {
         />
       ) : (
         <div className="env-lab-grid">
-          <section className="env-workspace-panel" aria-label="Environment workspace fixture">
+          <section className="env-workspace-panel" aria-label="Environment workspace">
             <div className="env-workspace-top">
               <span className="env-window-dots" aria-hidden="true"><i /><i /><i /></span>
               <b>workshop-env-lab</b>
               <span className="env-phase">{state.phase}</span>
             </div>
-            <div className="env-file-tabs" role="tablist" aria-label="Environment fixture files">
+            <div className="env-file-tabs" role="tablist" aria-label="Environment files">
               {envFileFixtures.map((file) => (
                 <button
                   className={selectedFile === file.id ? "active" : ""}
@@ -142,7 +141,7 @@ export function EnvLab({ onComplete }: { onComplete?: () => void }) {
                 </button>
               ))}
             </div>
-            <div className="env-editor" role="region" aria-label={`${selectedFile} fixture`}>
+            <div className="env-editor" role="region" aria-label={selectedFile}>
               {envFileLines(state, selectedFile).map((line, index) => (
                 <div className="env-code-line" key={`${selectedFile}-${index}`}>
                   <span>{String(index + 1).padStart(2, "0")}</span><code>{line || " "}</code>
@@ -175,8 +174,8 @@ export function EnvLab({ onComplete }: { onComplete?: () => void }) {
 
           <aside className="env-control-panel" aria-label="Environment controls">
             <div className="env-panel-heading">
-              <div><p className="kicker">ENV CONTROL</p><h2>從來源走到安全邊界</h2></div>
-              <span className="env-lab-meta">Vite mode<br />fixture only</span>
+              <div><h2>從來源走到安全邊界</h2></div>
+              <span className="env-lab-meta">Vite mode</span>
             </div>
             <div className="env-action-list">
               {envLessonSteps.map((step, index) => {
@@ -197,13 +196,13 @@ export function EnvLab({ onComplete }: { onComplete?: () => void }) {
                 );
               })}
             </div>
-            <p className="env-current-hint">目前任務：{currentStep.title}。可以故意點錯順序，觀察 simulator 如何保留狀態並提示原因。</p>
+            <p className="env-current-hint">目前任務：{currentStep.title}。可以故意點錯順序，觀察狀態如何保留並提示原因。</p>
           </aside>
         </div>
       )}
 
       <section className="env-state-section" aria-labelledby="env-state-title">
-        <div className="section-heading"><div><p className="kicker">LIVE ENV STATE</p><h2 id="env-state-title">目前的設定線索</h2></div><p>只顯示 simulator 狀態，不讀取真實 .env。</p></div>
+        <div className="section-heading"><div><h2 id="env-state-title">目前的設定線索</h2></div></div>
         <div className="env-state-grid">
           <div><small>SOURCE</small><b>{state.configState}</b></div>
           <div><small>EXPOSURE</small><b>{state.exposureState}</b></div>
diff --git a/frontend/src/topics/env/lesson.tsx b/frontend/src/topics/env/lesson.tsx
index 9421b3a..f602538 100644
--- a/frontend/src/topics/env/lesson.tsx
+++ b/frontend/src/topics/env/lesson.tsx
@@ -5,10 +5,11 @@ import type { LessonOrientation } from "../types";
 export function EnvLesson({ completed, onOpenLab, orientation }: { completed: boolean; onOpenLab: () => void; orientation: LessonOrientation }) {
   return (
     <TopicLessonShell
-      eyebrow="TOPIC 06 / FOUNDATIONS"
+      className="course-lesson-page"
+      showMeta={false}
       moduleNumber="06"
       title={<>讓設定跟著環境走<br /><em>但別把秘密打包</em></>}
-      description="從 .env.example、.env.local 到 client bundle，理解設定來源、公開邊界與 fail-fast 驗證；所有操作都在固定 fixture 中完成。"
+      description="從 .env.example、.env.local 到 client bundle，理解設定來源、公開邊界與 fail-fast 驗證。"
       orientation={orientation}
       completed={completed}
     >
@@ -17,20 +18,20 @@ export function EnvLesson({ completed, onOpenLab, orientation }: { completed: bo
           const step = envLessonSteps[index];
           return (
             <article className="lesson-card" key={section.id}>
-              <div className="lesson-index"><span>{String(index + 1).padStart(2, "0")}</span><small>ENV</small></div>
+              <div className="lesson-index"><span>{String(index + 1).padStart(2, "0")}</span></div>
               <div className="lesson-copy">
                 <h2>{section.title}</h2>
                 <p>{section.body}</p>
                 {step ? <code><span>$</span> {step.command}</code> : null}
               </div>
-              <aside><small>記住這句</small><p>{step?.takeaway ?? "設定是契約；秘密要留在正確的 runtime 邊界。"}</p></aside>
+              <aside><p>{step?.takeaway ?? "設定是契約；秘密要留在正確的 runtime 邊界。"}</p></aside>
             </article>
           );
         })}
       </section>
 
       <section className="lab-cta">
-        <div><p className="kicker">ENVIRONMENT LAB</p><h2>把設定放到正確的邊界。</h2><p>{envLesson.objectives.length} 個學習目標 · 不讀取真實 .env</p></div>
+        <div><h2>把設定放到正確的邊界。</h2></div>
         <button className="button light" type="button" onClick={onOpenLab}>進入 ENV Lab <span>→</span></button>
       </section>
     </TopicLessonShell>
diff --git a/frontend/src/topics/guardrail/content.ts b/frontend/src/topics/guardrail/content.ts
index e8788ae..d930e95 100644
--- a/frontend/src/topics/guardrail/content.ts
+++ b/frontend/src/topics/guardrail/content.ts
@@ -6,7 +6,7 @@ export const guardrailLesson: LessonDefinition = {
     what: "Guardrail 是包在模型輸入、輸出或工具操作周圍的驗證與處置機制，用規則判斷風險並決定下一步。",
     why: "它讓 AI 系統能阻擋敏感資料、錯誤格式與危險副作用，並留下使用者與工程師都能理解的失敗原因。",
     when: "模型可能接觸個資、產生不合規內容、偏離任務、回傳錯誤格式，或準備執行寫入／刪除等 tool side effect 時使用。",
-    how: "選擇 input、output、tool 掛載點，配置 validator 與失敗策略，再用 deterministic scenarios 驗證 pass、fix、reask 或 block。",
+    how: "選擇 input、output、tool 掛載點，配置 validator 與失敗策略，再用可重跑的情境驗證 pass、fix、reask 或 block。",
   },
   objectives: [
     "分辨 Validator、Guard、Hub 與 OnFailAction 的責任。",
diff --git a/frontend/src/topics/guardrail/lab.tsx b/frontend/src/topics/guardrail/lab.tsx
index e25d404..b4fd822 100644
--- a/frontend/src/topics/guardrail/lab.tsx
+++ b/frontend/src/topics/guardrail/lab.tsx
@@ -44,7 +44,8 @@ export function GuardrailLab({ onComplete }: { onComplete?: () => void }) {
 
   return (
     <TopicLabShell
-      eyebrow="INTERACTIVE LAB / GUARDRAILS"
+      className="course-lab-shell"
+      showMeta={false}
       title={<>讓每一次呼叫<br /><em>先通過一道防線</em></>}
       progressLabel={`${state.completedScenarioIds.length} / ${guardrailRequiredScenarioIds.length} SCENARIOS`}
       progress={guardrailLabProgress(state)}
@@ -53,7 +54,7 @@ export function GuardrailLab({ onComplete }: { onComplete?: () => void }) {
       {completed ? (
         <TopicCompletionCard
           title="三個關鍵情境都完成了。"
-          description="你已看過安全放行、可修正的輸入風險，以及工具副作用攔截；每個結果都有固定規則與 latency。"
+          description="你已看過安全放行、可修正的輸入風險，以及工具副作用攔截；每個結果都有對應規則與 latency。"
           onReset={() => apply({ type: "reset" })}
         />
       ) : (
@@ -103,7 +104,7 @@ export function GuardrailLab({ onComplete }: { onComplete?: () => void }) {
             </div>
 
             <div className="guardrail-section-heading scenario-heading">
-              <p className="kicker">FIXED SCENARIOS</p>
+              <p className="kicker">SCENARIOS</p>
               <span>不呼叫真實模型</span>
             </div>
             <div className="guardrail-scenario-list">
@@ -130,7 +131,7 @@ export function GuardrailLab({ onComplete }: { onComplete?: () => void }) {
                   <div><b>{result.validatorId}</b><small>{result.message}</small></div>
                   <i>{result.latencyMs}ms</i>
                 </div>
-              )) : <p className="guardrail-empty">送出一個固定情境後，這裡會顯示 validator 結果與成本。</p>}
+              )) : <p className="guardrail-empty">選擇一個情境後，這裡會顯示 validator 結果與成本。</p>}
             </div>
             <p className="guardrail-result-note">目前 outcome：<b>{state.outcome}</b> · session phase：<b>{state.phase}</b></p>
           </aside>
diff --git a/frontend/src/topics/guardrail/lesson.tsx b/frontend/src/topics/guardrail/lesson.tsx
index bc38715..935b09c 100644
--- a/frontend/src/topics/guardrail/lesson.tsx
+++ b/frontend/src/topics/guardrail/lesson.tsx
@@ -5,25 +5,26 @@ import type { LessonOrientation } from "../types";
 export function GuardrailLesson({ completed, onOpenLab, orientation }: { completed: boolean; onOpenLab: () => void; orientation: LessonOrientation }) {
   return (
     <TopicLessonShell
-      eyebrow="EXTENSION / AI & LLM ENGINEERING"
+      className="course-lesson-page"
+      showMeta={false}
       moduleNumber="EX"
       title={<>在模型邊界<br /><em>放一道防線</em></>}
-      description="從 Validator、Guard 到 OnFailAction，理解如何在 input、output 與 tool 三個掛載點建立可解釋、可重設的 deterministic guardrail pipeline。"
+      description="從 Validator、Guard 到 OnFailAction，理解如何在 input、output 與 tool 三個掛載點建立可解釋、可重設的 guardrail pipeline。"
       orientation={orientation}
       completed={completed}
     >
       <section className="lesson-list" aria-label="Guardrail 教材">
         {guardrailLesson.sections.map((section, index) => (
           <article className="lesson-card" key={section.id}>
-            <div className="lesson-index"><span>{String(index + 1).padStart(2, "0")}</span><small>GUARDRAIL</small></div>
+            <div className="lesson-index"><span>{String(index + 1).padStart(2, "0")}</span></div>
             <div className="lesson-copy"><h2>{section.title}</h2><p>{section.body}</p></div>
-            <aside><small>學習目標</small><p>{guardrailLesson.objectives[index] ?? "讓每個失敗都留下可理解的理由。"}</p></aside>
+            <aside><p>{guardrailLesson.objectives[index] ?? "讓每個失敗都留下可理解的理由。"}</p></aside>
           </article>
         ))}
       </section>
 
       <section className="lab-cta">
-        <div><p className="kicker">GUARDRAIL LAB</p><h2>把規則放進 pipeline。</h2><p>Extension track · deterministic fixture · 不呼叫真實模型</p></div>
+        <div><h2>把規則放進 pipeline。</h2></div>
         <button className="button light" type="button" onClick={onOpenLab}>進入 Guardrail Lab <span>→</span></button>
       </section>
     </TopicLessonShell>
diff --git a/frontend/src/topics/guardrail/simulator.ts b/frontend/src/topics/guardrail/simulator.ts
index 860567e..9b865cd 100644
--- a/frontend/src/topics/guardrail/simulator.ts
+++ b/frontend/src/topics/guardrail/simulator.ts
@@ -62,7 +62,7 @@ export function createInitialGuardrailState(): GuardrailState {
     latencyMs: 0,
     phase: "initial",
     completedScenarioIds: [],
-    lastMessage: "選擇一個固定情境，觀察每層 guardrail 的結果。",
+    lastMessage: "選擇一個情境，觀察每層 guardrail 的結果。",
     canReset: true,
   };
 }
@@ -126,7 +126,7 @@ export function runGuardrailEvent(current: GuardrailState, event: GuardrailEvent
           outcome: "pass",
           latencyMs: 0,
         },
-        `已切換到 ${event.stage} stage；請選擇固定情境。`,
+        `已切換到 ${event.stage} stage；請選擇情境。`,
       );
     case "setInput":
       return accepted(current, { lastInput: event.text, results: [], outcome: "pass", latencyMs: 0 }, "已更新待檢查內容。", [
@@ -144,12 +144,12 @@ export function runGuardrailEvent(current: GuardrailState, event: GuardrailEvent
     }
     case "submitScenario": {
       const scenario = guardrailScenarios.find((item) => item.id === event.id);
-      if (!scenario) return blocked(current, `找不到 ${event.id} scenario fixture。`);
+      if (!scenario) return blocked(current, `找不到 ${event.id} 對應情境。`);
       if (scenario.stage !== current.stage) {
         return blocked(current, `${scenario.id} 需要在 ${scenario.stage} stage 執行。`);
       }
       if (current.lastInput !== scenario.input) {
-        return blocked(current, "請先把 scenario 的固定輸入載入，再送出檢查。");
+        return blocked(current, "請先載入 scenario 輸入，再送出檢查。");
       }
       if (scenario.expectedValidator && !current.enabledValidators.includes(scenario.expectedValidator)) {
         return blocked(current, `請先啟用 ${scenario.expectedValidator} validator，才能觀察這個風險。`);
@@ -172,7 +172,7 @@ export function runGuardrailEvent(current: GuardrailState, event: GuardrailEvent
         : current.completedScenarioIds;
       const completed = guardrailRequiredScenarioIds.every((id) => completedScenarioIds.includes(id));
       const message = `${scenario.title}：${scenario.expectedAction}，結果為 ${scenario.expectedOutcome}。`;
-      const output = [message, ...results.map((result) => result.message), `固定 latency：${scenario.latencyMs}ms`];
+      const output = [message, ...results.map((result) => result.message), `latency：${scenario.latencyMs}ms`];
       return {
         state: {
           ...current,
diff --git a/frontend/src/topics/ide/content.ts b/frontend/src/topics/ide/content.ts
index e6b83fe..699251f 100644
--- a/frontend/src/topics/ide/content.ts
+++ b/frontend/src/topics/ide/content.ts
@@ -9,7 +9,7 @@ export const ideLesson: LessonDefinition = {
     how: "先開啟正確檔案，設定 breakpoint，執行到暫停點，檢查變數與呼叫堆疊，再用 step over 或 continue 觀察下一步。",
   },
   objectives: [
-    "在固定 editor fixture 中開啟檔案並設定 breakpoint。",
+    "開啟檔案並設定 breakpoint。",
     "從 paused state 閱讀 current line、call stack 與 variables。",
     "用 step over 與 continue 控制執行，區分暫停、完成與非法操作。",
   ],
@@ -139,7 +139,7 @@ export const ideInitialState: IdeLabState = {
   lastStream: null,
   exitCode: null,
   completedStepIds: [],
-  lastMessage: "準備從固定的 order.ts fixture 開始。",
+  lastMessage: "先開啟 src/order.ts。",
   canReset: true,
 };
 
diff --git a/frontend/src/topics/ide/lesson.tsx b/frontend/src/topics/ide/lesson.tsx
index 2c91294..69b944b 100644
--- a/frontend/src/topics/ide/lesson.tsx
+++ b/frontend/src/topics/ide/lesson.tsx
@@ -5,10 +5,11 @@ import type { LessonOrientation } from "../types";
 export function IdeLesson({ completed, onOpenLab, orientation }: { completed: boolean; onOpenLab: () => void; orientation: LessonOrientation }) {
   return (
     <TopicLessonShell
-      eyebrow="TOPIC 04 / FOUNDATIONS"
+      className="foundation-lesson-page"
+      showMeta={false}
       moduleNumber="04"
       title={<>用除錯器看見程式<br /><em>正在做什麼</em></>}
-      description="先在固定的 editor fixture 建立 context，再設定 breakpoint、閱讀 paused state，最後用 step over 與 continue 觀察程式如何完成。"
+      description="先在 editor 建立 context，再設定 breakpoint、閱讀 paused state，最後用 step over 與 continue 觀察程式如何完成。"
       orientation={orientation}
       completed={completed}
     >
@@ -17,20 +18,20 @@ export function IdeLesson({ completed, onOpenLab, orientation }: { completed: bo
           const step = ideLessonSteps[index];
           return (
             <article className="lesson-card" key={section.id}>
-              <div className="lesson-index"><span>{String(index + 1).padStart(2, "0")}</span><small>IDE</small></div>
+              <div className="lesson-index"><span>{String(index + 1).padStart(2, "0")}</span></div>
               <div className="lesson-copy">
                 <h2>{section.title}</h2>
                 <p>{section.body}</p>
                 {step ? <code><span>›</span> {step.command}</code> : null}
               </div>
-              <aside><small>記住這句</small><p>{step?.takeaway ?? "先讀懂執行線索，再決定下一個 debugger 動作。"}</p></aside>
+              <aside><p>{step?.takeaway ?? "先讀懂執行線索，再決定下一個 debugger 動作。"}</p></aside>
             </article>
           );
         })}
       </section>
 
       <section className="lab-cta">
-        <div><p className="kicker">DEBUGGER LAB</p><h2>把除錯流程走一遍。</h2><p>{ideLesson.objectives.length} 個學習目標 · 只使用瀏覽器內固定 fixture</p></div>
+        <div><h2>把除錯流程走一遍。</h2></div>
         <button className="button light" type="button" onClick={onOpenLab}>進入 IDE Lab <span>→</span></button>
       </section>
     </TopicLessonShell>
diff --git a/frontend/src/topics/ide/simulator.ts b/frontend/src/topics/ide/simulator.ts
index d95b682..462ccc3 100644
--- a/frontend/src/topics/ide/simulator.ts
+++ b/frontend/src/topics/ide/simulator.ts
@@ -77,10 +77,10 @@ function runKnownCommand(state: IdeLabState, command: string): IdeCommandResult
   if (command.startsWith("open ")) {
     const path = command.slice(5);
     if (path !== ideFileFixture.path) {
-      return appendFailure(state, `open: ${path}: file not found`, "檔案不存在；請開啟固定的 src/order.ts。", 1);
+      return appendFailure(state, `open: ${path}: file not found`, "檔案不存在；請開啟 src/order.ts。", 1);
     }
     state.selectedFile = ideFileFixture.path;
-    return appendSuccess(state, `Opened ${ideFileFixture.path}`, "已開啟固定的 order.ts fixture。", "open");
+    return appendSuccess(state, `Opened ${ideFileFixture.path}`, "已開啟 order.ts。", "open");
   }
 
   if (command.startsWith("breakpoint ")) {
@@ -100,7 +100,7 @@ function runKnownCommand(state: IdeLabState, command: string): IdeCommandResult
 
   if (command === "run calculateTotal(10, 2, 3)") {
     if (state.selectedFile !== ideFileFixture.path) {
-      return appendFailure(state, "run: no file is open", "先開啟 src/order.ts，再啟動固定函式。", 2);
+      return appendFailure(state, "run: no file is open", "先開啟 src/order.ts，再啟動 calculateTotal。", 2);
     }
     if (!state.breakpointLines.includes(3)) {
       return appendFailure(state, "run: no breakpoint at line 3", "先在第 3 行設定 breakpoint，再執行函式。", 2);
@@ -138,7 +138,7 @@ function runKnownCommand(state: IdeLabState, command: string): IdeCommandResult
 
   if (command === "continue") {
     if (state.phase !== "paused" || state.currentLine === null) {
-      return appendFailure(state, "continue: program has not started", "先 run 固定函式，再 continue 到下一個 breakpoint 或結束。", 2);
+      return appendFailure(state, "continue: program has not started", "先 run calculateTotal，再 continue 到下一個 breakpoint 或結束。", 2);
     }
     if (!state.completedStepIds.includes("step")) {
       return appendFailure(state, "continue: step over the paused line first", "先完成 inspect 與 step over，再 continue。", 2);
@@ -164,7 +164,7 @@ export function runIdeCommand(current: IdeLabState, rawCommand: string): IdeComm
   const knownResult = runKnownCommand(state, command);
   if (knownResult) return knownResult;
 
-  return appendFailure(state, `${command}: command not found`, "命令不存在；請使用教材中的固定 debugger 指令。", 127);
+  return appendFailure(state, `${command}: command not found`, "命令不存在；請使用教材中的 debugger 指令。", 127);
 }
 
 export const ideSimulator: SimulatorDefinition<IdeLabState, IdeLabEvent> = {
diff --git a/frontend/src/topics/index/content.ts b/frontend/src/topics/index/content.ts
index 4f4c228..bdc160e 100644
--- a/frontend/src/topics/index/content.ts
+++ b/frontend/src/topics/index/content.ts
@@ -107,7 +107,7 @@ export const indexLessonSteps: readonly IndexLessonStep[] = [
     id: "inspect-plan",
     title: "看見 table scan",
     code: "EXPLAIN QUERY PLAN SELECT * FROM orders WHERE customer_id = 42;",
-    explanation: "沒有索引時，fixture 會逐列檢查 orders，先記下目前的查詢成本。",
+    explanation: "沒有索引時，orders 會逐列檢查，先記下目前的查詢成本。",
     takeaway: "優化前先量測，否則無法證明索引帶來了什麼改變。",
   },
   {
diff --git a/frontend/src/topics/index/lab.tsx b/frontend/src/topics/index/lab.tsx
index c9c98bf..271f786 100644
--- a/frontend/src/topics/index/lab.tsx
+++ b/frontend/src/topics/index/lab.tsx
@@ -18,9 +18,7 @@ interface IndexHistoryEntry {
   accepted?: boolean;
 }
 
-const INITIAL_HISTORY: readonly IndexHistoryEntry[] = [
-  { lines: ["INDEX + TRANSACTION workbench v1", "固定 orders + accounts fixture 已載入。"] },
-];
+const INITIAL_HISTORY: readonly IndexHistoryEntry[] = [];
 
 function eventForStep(stepId: IndexStepId): IndexLabEvent {
   return indexLabHappyPath.find((event) => event.type === stepId) ?? { type: stepId };
@@ -76,12 +74,13 @@ export function IndexLab({ onComplete }: { onComplete?: () => void }) {
 
   function reset() {
     setState(createInitialIndexState());
-    setHistory([{ lines: ["Index + Transaction Lab 已重設。從查詢計畫開始。"] }]);
+    setHistory([{ lines: ["已重設。從查詢計畫開始。"] }]);
   }
 
   return (
     <TopicLabShell
-      eyebrow="INTERACTIVE LAB / INDEX + TRANSACTION"
+      className="course-lab-shell"
+      showMeta={false}
       title={<>讓查詢走更短的路<br /><em>也讓寫入保持一致</em></>}
       progressLabel={completedCount + " / " + indexLessonSteps.length + " CHECKS"}
       progress={indexLabProgress(state)}
@@ -97,13 +96,13 @@ export function IndexLab({ onComplete }: { onComplete?: () => void }) {
         />
       ) : (
         <div className="index-lab-grid">
-          <section className="index-workspace-panel" aria-label="Index and transaction workbench fixture">
+          <section className="index-workspace-panel" aria-label="Index and transaction workbench">
             <div className="index-workspace-top">
               <span className="index-window-dots" aria-hidden="true"><i /><i /><i /></span>
               <b>workshop-index-transactions</b>
               <span className="index-phase">{state.phase}</span>
             </div>
-            <div className="index-query-toolbar"><span>query.plan</span><small>fixture only · no database</small></div>
+            <div className="index-query-toolbar"><span>query.plan</span></div>
             <div className="index-query-card">
               <small>CURRENT CHECK</small>
               <code>{currentStep?.code ?? "-- choose a check"}</code>
@@ -128,8 +127,8 @@ export function IndexLab({ onComplete }: { onComplete?: () => void }) {
 
           <aside className="index-control-panel" aria-label="Index and transaction controls">
             <div className="index-panel-heading">
-              <div><p className="kicker">CHECK CONTROL</p><h2>從 plan 走到 transaction</h2></div>
-              <span className="index-lab-meta">relational<br />fixture only</span>
+              <div><h2>從 plan 走到 transaction</h2></div>
+              <span className="index-lab-meta">relational</span>
             </div>
             <div className="index-action-list">
               {indexLessonSteps.map((step, stepIndex) => {
@@ -156,7 +155,7 @@ export function IndexLab({ onComplete }: { onComplete?: () => void }) {
       )}
 
       <section className="index-result-section" aria-labelledby="index-result-title">
-        <div className="section-heading"><div><p className="kicker">OBSERVABLE RESULT</p><h2 id="index-result-title">目前的資料線索</h2></div><p>只顯示 simulator 結果，不連線真實資料庫。</p></div>
+        <div className="section-heading"><div><h2 id="index-result-title">目前的資料線索</h2></div></div>
         <div className="index-result-panel">
           {state.result ? (
             <>
diff --git a/frontend/src/topics/index/lesson.tsx b/frontend/src/topics/index/lesson.tsx
index 0a74de9..9475548 100644
--- a/frontend/src/topics/index/lesson.tsx
+++ b/frontend/src/topics/index/lesson.tsx
@@ -13,7 +13,8 @@ export function IndexLesson({
 }) {
   return (
     <TopicLessonShell
-      eyebrow="TOPIC 12 / DATA"
+      className="course-lesson-page"
+      showMeta={false}
       moduleNumber="12"
       title={<>讓查詢走更短的路<br /><em>也讓寫入保持一致</em></>}
       description="從 table scan 與 index search 開始，接著用 rollback 與 commit 驗證交易的一致性邊界。"
@@ -25,20 +26,20 @@ export function IndexLesson({
           const step = indexLessonSteps[sectionIndex];
           return (
             <article className="lesson-card" key={section.id}>
-              <div className="lesson-index"><span>{String(sectionIndex + 1).padStart(2, "0")}</span><small>INDEX</small></div>
+              <div className="lesson-index"><span>{String(sectionIndex + 1).padStart(2, "0")}</span></div>
               <div className="lesson-copy">
                 <h2>{section.title}</h2>
                 <p>{section.body}</p>
                 {step ? <code><span>→</span> {step.code}</code> : null}
               </div>
-              <aside><small>記住這句</small><p>{step?.takeaway ?? "先量測，再決定要不要改變資料存取路徑。"}</p></aside>
+              <aside><p>{step?.takeaway ?? "先量測，再決定要不要改變資料存取路徑。"}</p></aside>
             </article>
           );
         })}
       </section>
 
       <section className="lab-cta">
-        <div><p className="kicker">INDEX + TRANSACTION LAB</p><h2>把效能與一致性變成可驗證的結果。</h2><p>{indexLesson.objectives.length} 個學習目標 · 固定 orders／accounts fixture，不連線真實資料庫</p></div>
+        <div><h2>把效能與一致性變成可驗證的結果。</h2></div>
         <button className="button light" type="button" onClick={onOpenLab}>進入 Index Lab <span>→</span></button>
       </section>
     </TopicLessonShell>
diff --git a/frontend/src/topics/index/simulator.ts b/frontend/src/topics/index/simulator.ts
index 280fbaf..a02661f 100644
--- a/frontend/src/topics/index/simulator.ts
+++ b/frontend/src/topics/index/simulator.ts
@@ -146,7 +146,7 @@ export function runIndexEvent(current: IndexLabState, event: IndexLabEvent): Ind
   }
 
   if (event.type === "inspect-plan") {
-    return accepted(current, event.type, "目前是 table scan：查詢需要檢查整張 orders fixture。");
+    return accepted(current, event.type, "目前是 table scan：查詢需要檢查整張 orders table。");
   }
 
   if (event.type === "create-index") {
diff --git a/frontend/src/topics/index/styles.css b/frontend/src/topics/index/styles.css
index 37f0f2e..04ce49b 100644
--- a/frontend/src/topics/index/styles.css
+++ b/frontend/src/topics/index/styles.css
@@ -2,7 +2,7 @@
 .index-workspace-panel, .index-control-panel { min-width: 0; border: 1px solid var(--ink); }
 .index-workspace-panel { color: #dce9e6; background: #172729; }
 .index-workspace-top { min-height: 47px; padding: 0 17px; display: flex; align-items: center; gap: 13px; color: #9ab0ad; background: #203638; border-bottom: 1px solid #496063; font: 10px "DM Mono"; }
-.index-workspace-top b { overflow: hidden; color: #d1dfdc; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
+.index-workspace-top b { min-width: 0; overflow-wrap: anywhere; color: #d1dfdc; font-weight: 500; white-space: normal; }
 .index-window-dots { display: flex; gap: 5px; }
 .index-window-dots i { width: 7px; height: 7px; border-radius: 50%; background: #a6725b; }
 .index-window-dots i:nth-child(2) { background: #b8a873; }
diff --git a/frontend/src/topics/integration/content.ts b/frontend/src/topics/integration/content.ts
index cb7183c..8cc535e 100644
--- a/frontend/src/topics/integration/content.ts
+++ b/frontend/src/topics/integration/content.ts
@@ -127,11 +127,11 @@ export const integrationLesson: LessonDefinition = {
     what: "整合測試驗證多個模組透過公開契約協作時，輸入、輸出與錯誤是否仍然一致。",
     why: "單一函式都通過，不代表 adapter、service 與 repository 接在一起時真的能完成一條可用流程。",
     when: "需要確認模組組合、資料 mapping、依賴邊界或錯誤傳遞，而不必啟動整個 production 系統時使用。",
-    how: "保留要驗證的真實模組，只在外部依賴邊界使用 deterministic fixture，沿著 success 與 failure scenario 觀察契約。",
+    how: "保留要驗證的真實模組，只在外部依賴邊界使用可控的測試資料，沿著 success 與 failure scenario 觀察契約。",
   },
   objectives: [
     "分辨 unit boundary 與 checkoutClient、orderService、orderRepository 之間的整合 boundary。",
-    "用固定 order input 與 repository outcome 建立可重跑的 integration fixture。",
+    "用固定 order input 與 repository outcome 建立可重跑的整合測試案例。",
     "追蹤成功流程如何跨過 client、service、repository 與 response 四個 boundary。",
     "從 response-contract-error 與 dependency-unavailable 判斷失敗位置和未發生的副作用。",
     "理解整合測試、unit test 與 E2E test 各自保護的範圍，不用一層測試取代其他層。",
@@ -144,7 +144,7 @@ export const integrationLesson: LessonDefinition = {
     },
     {
       id: "fixture",
-      title: "準備小而完整的 fixture",
+      title: "準備小而完整的測試資料",
       body: "固定的 order input、repository response 與 dependency outcome 讓每次執行都有相同證據，不需要呼叫真實資料庫或服務。",
     },
     {
@@ -175,15 +175,15 @@ export const integrationLessonSteps: readonly IntegrationLessonStep[] = [
     id: "define-boundary",
     title: "選定整合 boundary",
     code: "checkoutClient → orderService → orderRepository → orderResponse",
-    explanation: "這條路徑保留多個真實模組，並只把 repository 的外部結果固定成 fixture；純粹的 subtotal 計算仍可由 unit test 保護。",
+    explanation: "這條路徑保留多個真實模組，並只把 repository 的外部結果固定成測試資料；純粹的 subtotal 計算仍可由 unit test 保護。",
     takeaway: "先決定哪些模組要一起工作，整合測試才不會變成沒有邊界的 E2E。",
   },
   {
     id: "load-fixture",
-    title: "載入固定 order fixture",
+    title: "載入 order 測試資料",
     code: 'const input = { items: [{ sku: "book", quantity: 2, unitPrice: 50 }], discount: 10 };',
     explanation: "subtotal 固定為 100，discount 固定為 10；同一個 input 能讓成功與兩個 failure scenarios 只改變必要的 dependency outcome。",
-    takeaway: "小 fixture 要能直接推導 expected result，也要能隔離每一種失敗原因。",
+    takeaway: "小型測試資料要能直接推導 expected result，也要能隔離每一種失敗原因。",
   },
   {
     id: "trace-success",
@@ -210,7 +210,7 @@ export const integrationLessonSteps: readonly IntegrationLessonStep[] = [
     id: "run-regression",
     title: "重跑完整 regression",
     code: "success + response-contract-error + repository-unavailable",
-    explanation: "三個 scenario 必須在同一組 fixture 規則下重跑，確認 success、錯誤位置與 side effect 都與第一次相同。",
+    explanation: "三個 scenario 必須在同一組規則下重跑，確認 success、錯誤位置與 side effect 都與第一次相同。",
     takeaway: "回歸不是只看綠燈，而是確認每條可觀察路徑都沒有被改壞。",
   },
 ] as const;
@@ -282,7 +282,7 @@ export const integrationScenarios: readonly IntegrationScenarioFixture[] = [
     trace: [
       { boundary: "client", input: "items[book × 2] + discount 10", output: "CreateOrderRequest", evidence: "all request fields preserved" },
       { boundary: "service", input: "CreateOrderRequest", output: "OrderDraft total 90", evidence: "subtotal 100 - discount 10" },
-      { boundary: "repository", input: "OrderDraft", output: "ord-001 / created", evidence: "deterministic repository success" },
+      { boundary: "repository", input: "OrderDraft", output: "ord-001 / created", evidence: "repository success" },
       { boundary: "response", input: "OrderResponse", output: "201 Created", evidence: "orderId, total and status present" },
     ],
   },
@@ -314,7 +314,7 @@ export const integrationScenarios: readonly IntegrationScenarioFixture[] = [
     repositoryResult: {
       kind: "dependency-unavailable",
       errorCode: "dependency-unavailable",
-      message: "order repository fixture is unavailable",
+      message: "order repository is unavailable",
     },
     expected: {
       kind: "dependency-unavailable",
@@ -326,7 +326,7 @@ export const integrationScenarios: readonly IntegrationScenarioFixture[] = [
     trace: [
       { boundary: "client", input: "items[book × 2] + discount 10", output: "CreateOrderRequest", evidence: "request mapping passed" },
       { boundary: "service", input: "CreateOrderRequest", output: "OrderDraft total 90", evidence: "service prepared repository call" },
-      { boundary: "repository", input: "OrderDraft", output: "dependency-unavailable", evidence: "fixed dependency error preserved" },
+      { boundary: "repository", input: "OrderDraft", output: "dependency-unavailable", evidence: "dependency error preserved" },
     ],
   },
 ] as const;
@@ -349,7 +349,7 @@ export const integrationResults: Readonly<Record<IntegrationStepId, IntegrationL
   "define-boundary": {
     id: "define-boundary",
     columns: ["module", "boundary", "external I/O", "test purpose"],
-    rows: integrationBoundaryFixtures.map((boundary) => [boundary.module, boundary.id, boundary.externalBoundary ? "fixture" : "in-process", boundary.responsibility]),
+    rows: integrationBoundaryFixtures.map((boundary) => [boundary.module, boundary.id, boundary.externalBoundary ? "external" : "in-process", boundary.responsibility]),
     caption: "4 module boundaries · 1 controlled external edge",
   },
   "load-fixture": {
@@ -358,9 +358,9 @@ export const integrationResults: Readonly<Record<IntegrationStepId, IntegrationL
     rows: [
       ["items", "book × 2 @ 50", "subtotal 100"],
       ["discount", 10, "expected total 90"],
-      ["orderId", "ord-001", "deterministic repository response"],
+      ["orderId", "ord-001", "repository response"],
     ],
-    caption: "1 order input · fixed outcome",
+    caption: "1 order input · same outcome",
   },
   "trace-success": {
     id: "trace-success",
@@ -388,7 +388,7 @@ export const integrationResults: Readonly<Record<IntegrationStepId, IntegrationL
       ["response-contract-error", "response boundary error", "none"],
       ["repository-unavailable", "dependency error", "none"],
     ],
-    caption: "regression fixture · 3 scenarios stable",
+    caption: "regression · 3 scenarios stable",
   },
 };
 
diff --git a/frontend/src/topics/integration/lab.tsx b/frontend/src/topics/integration/lab.tsx
index afbf655..5a02bf5 100644
--- a/frontend/src/topics/integration/lab.tsx
+++ b/frontend/src/topics/integration/lab.tsx
@@ -20,7 +20,7 @@ import {
 } from "./simulator";
 
 const STAGE_LABELS: Record<IntegrationStageId, string> = {
-  input: "FIXTURE",
+  input: "INPUT",
   client: "CLIENT",
   service: "SERVICE",
   repository: "REPOSITORY",
@@ -28,7 +28,7 @@ const STAGE_LABELS: Record<IntegrationStageId, string> = {
 };
 
 const STAGE_HINTS: Record<IntegrationStageId, string> = {
-  input: "固定 order input",
+  input: "order input",
   client: "checkoutClient mapping",
   service: "orderService rule",
   repository: "orderRepository edge",
@@ -36,7 +36,7 @@ const STAGE_HINTS: Record<IntegrationStageId, string> = {
 };
 
 const STAGE_MODULES: Record<IntegrationStageId, string> = {
-  input: "checkout fixture",
+  input: "checkout input",
   client: "checkoutClient",
   service: "orderService",
   repository: "orderRepository",
@@ -93,7 +93,7 @@ interface EvidenceView {
 function evidenceFor(scenario: IntegrationScenarioFixture, state: IntegrationLabState): EvidenceView {
   if (state.activeStageId === "input") {
     return {
-      title: "固定 checkout input 已準備",
+      title: "checkout input 已準備",
       input: inputSummary(scenario),
       output: "CreateOrderRequest",
       evidence: "subtotal 100 - discount 10；三個 scenario 共用同一份 input。",
@@ -107,11 +107,11 @@ function evidenceFor(scenario: IntegrationScenarioFixture, state: IntegrationLab
 
   return {
     title: `${STAGE_MODULES[state.activeStageId]} 的 observable evidence`,
-    input: observation?.input ?? "固定 fixture input",
-    output: observation?.output ?? "尚無固定 output",
+    input: observation?.input ?? "尚無 input",
+    output: observation?.output ?? "尚無 output",
     evidence: state.response && state.response !== "success" && failure
-      ? `${observation?.evidence ?? "固定 failure outcome"} ${failure.evidence}`
-      : observation?.evidence ?? "尚無固定 evidence",
+      ? `${observation?.evidence ?? "尚無 failure outcome"} ${failure.evidence}`
+      : observation?.evidence ?? "尚無 evidence",
     next: nextStage ? `${nextStage} boundary` : "terminal outcome",
   };
 }
@@ -141,7 +141,8 @@ export function IntegrationLab({ onComplete }: { onComplete?: () => void }) {
 
   return (
     <TopicLabShell
-      eyebrow="INTERACTIVE LAB / INTEGRATION TESTING"
+      className="course-lab-shell"
+      showMeta={false}
       title={<>讓模組契約一起工作<br /><em>沿著 boundary 找到證據</em></>}
       progressLabel={`${state.completedScenarioIds.length} / ${integrationRequiredScenarioIds.length} SCENARIOS`}
       progress={integrationLabProgress(state)}
@@ -152,7 +153,7 @@ export function IntegrationLab({ onComplete }: { onComplete?: () => void }) {
       {completed ? (
         <TopicCompletionCard
           title="三個 integration scenarios 都完成了。"
-          description="你已重跑 success、response contract failure 與 dependency failure；每個 boundary、failure location 與 side effect 都留下固定證據。"
+          description="你已重跑 success、response contract failure 與 dependency failure；每個 boundary、failure location 與 side effect 都留下可追蹤證據。"
           onReset={() => dispatch({ type: "reset" })}
         />
       ) : null}
@@ -162,7 +163,6 @@ export function IntegrationLab({ onComplete }: { onComplete?: () => void }) {
           <section className="integration-scenario-panel" aria-labelledby="integration-scenario-title">
             <div className="integration-panel-heading">
               <div>
-                <p className="kicker">FIXED SCENARIOS</p>
                 <h2 id="integration-scenario-title">先選一條可重跑的協作路徑</h2>
               </div>
               <span>{integrationRequiredScenarioIds.length} required outcomes</span>
@@ -191,7 +191,6 @@ export function IntegrationLab({ onComplete }: { onComplete?: () => void }) {
           <section className="integration-trace-panel" aria-labelledby="integration-trace-title">
             <div className="integration-panel-heading integration-trace-heading">
               <div>
-                <p className="kicker">BOUNDARY TRACE</p>
                 <h2 id="integration-trace-title">每一步只前進一個可觀察邊界</h2>
               </div>
               <button className="button primary" type="button" onClick={() => dispatch({ type: "trace-next" })}>
@@ -240,7 +239,7 @@ export function IntegrationLab({ onComplete }: { onComplete?: () => void }) {
               </section>
 
               <aside className="integration-state-panel" aria-label="Integration Lab state">
-                <div className="integration-state-heading"><p className="kicker">SESSION STATE</p><span>{scenario ? scenario.id : "no fixture"}</span></div>
+                <div className="integration-state-heading"><span>{scenario ? scenario.id : "未選擇"}</span></div>
                 <div className="integration-state-grid">
                   <div><small>PHASE</small><b>{state.phase}</b></div>
                   <div><small>RESPONSE</small><b>{state.response ?? "—"}</b></div>
@@ -248,7 +247,6 @@ export function IntegrationLab({ onComplete }: { onComplete?: () => void }) {
                   <div><small>VISITED</small><b>{state.visitedBoundaryIds.length} / 4</b></div>
                 </div>
                 <div className="integration-boundary-list">
-                  <p className="kicker">PASSED BOUNDARIES</p>
                   {state.visitedBoundaryIds.length ? state.visitedBoundaryIds.map((boundary) => (
                     <span key={boundary}>✓ {STAGE_MODULES[boundary]}</span>
                   )) : <small>尚未通過 boundary。</small>}
@@ -263,14 +261,14 @@ export function IntegrationLab({ onComplete }: { onComplete?: () => void }) {
             </div>
           </section>
 
-          <section className="integration-fixture-grid" aria-label="Integration fixture contract">
+          <section className="integration-fixture-grid" aria-label="Integration contract">
             <article>
-              <header><span>CHECKOUT INPUT</span><b>{scenario ? "deterministic" : "waiting"}</b></header>
+              <header><span>CHECKOUT INPUT</span><b>{scenario ? "ready" : "waiting"}</b></header>
               <pre>{scenario ? JSON.stringify(scenario.input, null, 2) : "先選 scenario"}</pre>
             </article>
             <article>
               <header><span>EXPECTED OUTCOME</span><b>{scenario ? scenario.expected.kind : "—"}</b></header>
-              <p>{scenario ? expectedDetail(scenario) : "每個 scenario 都有固定 response、error 與 side effect。"}</p>
+              <p>{scenario ? expectedDetail(scenario) : "每個 scenario 都有對應的 response、error 與 side effect。"}</p>
             </article>
             <article>
               <header><span>MODULE CONTRACTS</span><b>{integrationBoundaryFixtures.length} boundaries</b></header>
diff --git a/frontend/src/topics/integration/lesson.tsx b/frontend/src/topics/integration/lesson.tsx
index 8efbf28..6c4fce0 100644
--- a/frontend/src/topics/integration/lesson.tsx
+++ b/frontend/src/topics/integration/lesson.tsx
@@ -13,10 +13,11 @@ export function IntegrationLesson({
 }) {
   return (
     <TopicLessonShell
-      eyebrow="TOPIC 15 / QUALITY"
+      className="course-lesson-page"
+      showMeta={false}
       moduleNumber="15"
       title={<>讓模組契約一起工作<br /><em>沿著 boundary 找到證據</em></>}
-      description="從 integration boundary、deterministic fixture 開始，追蹤 success、contract failure 與 dependency failure 如何被觀察。"
+      description="從 integration boundary 開始，追蹤 success、contract failure 與 dependency failure 如何被觀察。"
       orientation={orientation}
       completed={completed}
     >
@@ -25,20 +26,20 @@ export function IntegrationLesson({
           const step = integrationLessonSteps[sectionIndex];
           return (
             <article className="lesson-card" key={section.id}>
-              <div className="lesson-index"><span>{String(sectionIndex + 1).padStart(2, "0")}</span><small>INTEGRATION</small></div>
+              <div className="lesson-index"><span>{String(sectionIndex + 1).padStart(2, "0")}</span></div>
               <div className="lesson-copy">
                 <h2>{section.title}</h2>
                 <p>{section.body}</p>
                 {step ? <code><span>→</span> {step.code}</code> : null}
               </div>
-              <aside><small>記住這句</small><p>{step?.takeaway ?? "先固定可觀察的 boundary，再讓整合結果留下證據。"}</p></aside>
+              <aside><p>{step?.takeaway ?? "先固定可觀察的 boundary，再讓整合結果留下證據。"}</p></aside>
             </article>
           );
         })}
       </section>
 
       <section className="lab-cta">
-        <div><p className="kicker">INTEGRATION LAB</p><h2>把 success 與 failure path 跑成可觀察的 boundary trace。</h2><p>{integrationLesson.objectives.length} 個學習目標 · 固定 checkout fixture，不連線真實服務</p></div>
+        <div><h2>把 success 與 failure path 跑成可觀察的 boundary trace。</h2></div>
         <button className="button light" type="button" onClick={onOpenLab}>進入 Integration Lab <span>→</span></button>
       </section>
     </TopicLessonShell>
diff --git a/frontend/src/topics/integration/simulator.ts b/frontend/src/topics/integration/simulator.ts
index 274a0ae..0435f65 100644
--- a/frontend/src/topics/integration/simulator.ts
+++ b/frontend/src/topics/integration/simulator.ts
@@ -130,7 +130,7 @@ function blocked(current: IntegrationLabState, message: string): IntegrationEven
 }
 
 function selectedScenarioMessage(scenario: NonNullable<ReturnType<typeof scenarioFor>>): string {
-  return `${scenario.title} fixture 已載入；下一步觀察 client boundary。`;
+  return `${scenario.title} 已載入；下一步觀察 client boundary。`;
 }
 
 function boundaryMessage(
@@ -140,7 +140,7 @@ function boundaryMessage(
   const observation = boundaryObservation(scenario, boundary);
   const nextStage = nextStageFor(scenario, boundary);
   const nextMessage = nextStage ? `下一步觀察 ${nextStage} boundary。` : "這是目前 scenario 的 terminal boundary。";
-  return `${boundary} boundary 通過：${observation?.evidence ?? "已保留固定 fixture 證據"} ${nextMessage}`;
+  return `${boundary} boundary 通過：${observation?.evidence ?? "已保留 evidence"} ${nextMessage}`;
 }
 
 function failureMessage(
@@ -149,7 +149,7 @@ function failureMessage(
 ): string {
   const fixture = failureFixtureFor(scenario.id);
   const observation = boundaryObservation(scenario, boundary);
-  return `${fixture?.message ?? `${boundary} boundary failure。`} 證據：${fixture?.evidence ?? observation?.evidence ?? "固定 fixture outcome"}`;
+  return `${fixture?.message ?? `${boundary} boundary failure。`} 證據：${fixture?.evidence ?? observation?.evidence ?? "failure outcome"}`;
 }
 
 function terminalResult(
@@ -214,7 +214,7 @@ function advanceToStage(
   }
 
   if (stageId === "input") {
-    return accepted(current, { activeStageId: "input" }, "固定 input fixture 已確認；下一步觀察 client boundary。");
+    return accepted(current, { activeStageId: "input" }, "input 已確認；下一步觀察 client boundary。");
   }
 
   const visitedBoundaryIds = appendUnique(current.visitedBoundaryIds, stageId);
@@ -239,7 +239,7 @@ export function createInitialIntegrationState(): IntegrationLabState {
     phase: "initial",
     response: null,
     sideEffects: "none",
-    lastMessage: "請先選擇固定 scenario fixture，再開始 trace。",
+    lastMessage: "請先選擇 scenario，再開始 trace。",
     canReset: true,
   };
 }
@@ -263,7 +263,7 @@ export function runIntegrationEvent(current: IntegrationLabState, event: Integra
 
   if (event.type === "select-scenario") {
     const scenario = scenarioFor(event.scenarioId);
-    if (!scenario) return blocked(current, `找不到 ${event.scenarioId} scenario fixture。`);
+    if (!scenario) return blocked(current, `找不到 ${event.scenarioId} scenario。`);
     const state = cloneState(current);
     return {
       state: {
@@ -283,7 +283,7 @@ export function runIntegrationEvent(current: IntegrationLabState, event: Integra
 
   const state = cloneState(current);
   const scenario = scenarioFor(state.selectedScenarioId);
-  if (!scenario) return blocked(state, "尚未選擇 scenario；請先載入固定 fixture，再開始 trace。");
+  if (!scenario) return blocked(state, "尚未選擇 scenario；請先載入測試資料，再開始 trace。");
 
   if (state.response !== null) {
     return blocked(state, `${scenario.title} 已到 terminal outcome；請先選擇另一個 scenario 或 reset。`);
diff --git a/frontend/src/topics/logs/content.ts b/frontend/src/topics/logs/content.ts
index 30b34cb..f19cb8f 100644
--- a/frontend/src/topics/logs/content.ts
+++ b/frontend/src/topics/logs/content.ts
@@ -104,7 +104,7 @@ export const logsLesson: LessonDefinition = {
     what: "結構化日誌把執行中的事件、嚴重性與安全上下文留下來，讓人可以沿著同一個 request 找到發生了什麼。",
     why: "只有錯誤文字時，很難把正常事件、輸入問題與依賴逾時放進同一條時間線，也容易把秘密寫進輸出。",
     when: "需要理解 request timeline、failure evidence 或服務邊界發生什麼時，使用 logs；趨勢數值與跨服務路徑則交給 metrics 或 traces。",
-    how: "先定義穩定 event schema，再選正確 level、保留 correlationId、限制 safe context，最後用 deterministic fixture 重跑。",
+    how: "先定義穩定 event schema，再選正確 level、保留 correlationId、限制 safe context，最後用可重跑的測試資料驗證。",
   },
   objectives: [
     "分辨 logs、metrics 與 traces 的責任邊界，不把一種訊號當成全部觀測工具。",
@@ -375,11 +375,11 @@ export const logsResults: Readonly<Record<LogsStepId, LogsLessonResult>> = {
   },
   "event-schema": {
     id: "event-schema",
-    columns: ["field", "purpose", "fixture rule"],
+    columns: ["field", "purpose", "scenario rule"],
     rows: [
       ["level", "severity", "debug · info · warn · error"],
       ["event", "machine-readable name", "stable event naming"],
-      ["correlationId", "request association", "fixed per scenario"],
+      ["correlationId", "request association", "same per scenario"],
       ["outcome", "terminal meaning", "started → success/rejected/failed"],
     ],
     caption: "structured event · stable fields",
@@ -432,14 +432,14 @@ export const logsResults: Readonly<Record<LogsStepId, LogsLessonResult>> = {
       scenario.expected.correlationId,
       "passed",
     ]),
-    caption: "regression fixture · 3 scenarios stable",
+    caption: "regression · 3 scenarios stable",
   },
 };
 
 export const logsFailureFixtures: readonly LogsFailureFixture[] = [
   {
     event: "inspect-without-scenario",
-    message: "尚未選擇 scenario；請先載入固定 Logs fixture，再開始 inspect。",
+    message: "尚未選擇 scenario；請先載入 Logs 測試資料，再開始 inspect。",
     evidence: "selectedScenarioId 仍然是 null，沒有可供檢查的 event sequence。",
   },
   {
@@ -454,7 +454,7 @@ export const logsFailureFixtures: readonly LogsFailureFixture[] = [
   },
   {
     event: "wrong-severity",
-    message: "level 與 scenario outcome 不符；請依 fixture evidence 選擇 info、warn 或 error。",
+    message: "level 與 scenario outcome 不符；請依案例 evidence 選擇 info、warn 或 error。",
     evidence: "validation-rejected 是 warn，dependency-timeout 是 error，request-success 是 info。",
   },
   {
diff --git a/frontend/src/topics/logs/lab.tsx b/frontend/src/topics/logs/lab.tsx
index 24de0db..de207b3 100644
--- a/frontend/src/topics/logs/lab.tsx
+++ b/frontend/src/topics/logs/lab.tsx
@@ -92,7 +92,8 @@ export function LogsLab({ onComplete }: { onComplete?: () => void }) {
 
   return (
     <TopicLabShell
-      eyebrow="INTERACTIVE LAB / STRUCTURED LOGGING"
+      className="course-lab-shell"
+      showMeta={false}
       title={<>讓每一筆 event 都能回到 request<br /><em>沿著 timeline 找到安全證據</em></>}
       progressLabel={`${state.completedScenarioIds.length} / ${logsRequiredScenarioIds.length} SCENARIOS`}
       progress={logsLabProgress(state)}
@@ -113,7 +114,6 @@ export function LogsLab({ onComplete }: { onComplete?: () => void }) {
           <section className="logs-scenario-panel" aria-labelledby="logs-scenario-title">
             <div className="logs-panel-heading">
               <div>
-                <p className="kicker">FIXED SCENARIOS</p>
                 <h2 id="logs-scenario-title">先載入一條可重跑的 request timeline</h2>
               </div>
               <span>{logsRequiredScenarioIds.length} required outcomes</span>
@@ -145,13 +145,13 @@ export function LogsLab({ onComplete }: { onComplete?: () => void }) {
                 <p className="kicker">REQUEST TIMELINE</p>
                 <h2 id="logs-workbench-title">逐筆 inspect，再驗證三層 evidence</h2>
               </div>
-              <span>{scenario ? `${state.activeEventIndex} / ${scenario.events.length} events` : "waiting for fixture"}</span>
+              <span>{scenario ? `${state.activeEventIndex} / ${scenario.events.length} events` : "未選擇"}</span>
             </div>
 
             <div className="logs-workbench-grid">
               <section className="logs-timeline-panel" aria-labelledby="logs-timeline-title">
                 <div className="logs-subheading">
-                  <div><p className="kicker">EVENT STREAM</p><h3 id="logs-timeline-title">固定 schema 的事件流</h3></div>
+                  <div><h3 id="logs-timeline-title">一致 schema 的事件流</h3></div>
                   <span>{scenario ? scenario.expected.correlationId : "no correlation"}</span>
                 </div>
                 <div className="logs-event-list" role="list" aria-label="Logs event timeline">
@@ -186,13 +186,13 @@ export function LogsLab({ onComplete }: { onComplete?: () => void }) {
                       </article>
                     );
                   }) : (
-                    <p className="logs-empty">選擇一個 scenario，才能開始 inspect 固定 event sequence。</p>
+                    <p className="logs-empty">選擇一個 scenario，才能開始 inspect event sequence。</p>
                   )}
                 </div>
               </section>
 
               <aside className="logs-state-panel" aria-label="Logs Lab state">
-                <div className="logs-state-heading"><p className="kicker">SESSION STATE</p><span>{scenario ? scenario.id : "no fixture"}</span></div>
+                <div className="logs-state-heading"><span>{scenario ? scenario.id : "未選擇"}</span></div>
                 <div className="logs-state-grid">
                   <div><small>PHASE</small><b>{state.phase}</b></div>
                   <div><small>EVENTS</small><b>{scenario ? `${state.activeEventIndex} / ${scenario.events.length}` : "—"}</b></div>
@@ -202,7 +202,6 @@ export function LogsLab({ onComplete }: { onComplete?: () => void }) {
                   <div><small>COMPLETED</small><b>{state.completedScenarioIds.length} / {logsRequiredScenarioIds.length}</b></div>
                 </div>
                 <div className="logs-check-list">
-                  <p className="kicker">EVIDENCE CHECKS</p>
                   <button className={`logs-check ${state.correlationCheck}`} type="button" onClick={() => dispatch({ type: "verify-correlation" })}>
                     <span aria-hidden="true">{state.correlationCheck === "passed" ? "✓" : "01"}</span>
                     <b>Correlation ID</b><small>same request · same id</small>
@@ -228,9 +227,9 @@ export function LogsLab({ onComplete }: { onComplete?: () => void }) {
 
           <section className="logs-fixture-grid" aria-label="Logs fixture contract">
             <article>
-              <header><span>SAFE REQUEST FIXTURE</span><b>{scenario ? "loaded" : "waiting"}</b></header>
+              <header><span>SAFE REQUEST</span><b>{scenario ? "loaded" : "waiting"}</b></header>
               <pre>{scenario ? safeRequestSummary(scenario) : "先選 scenario"}</pre>
-          <p>authorization、password、accessToken、cookie 與 email 只作為 redaction fixture，不會渲染 raw value。</p>
+          <p>authorization、password、accessToken、cookie 與 email 只作為遮罩示例，不會渲染 raw value。</p>
             </article>
             <article>
               <header><span>EXPECTED TERMINAL</span><b>{scenario ? scenario.expected.level : "—"}</b></header>
@@ -241,7 +240,7 @@ export function LogsLab({ onComplete }: { onComplete?: () => void }) {
                   <div><dt>STATUS</dt><dd>{scenario.expected.statusCode}</dd></div>
                   <div><dt>OUTCOME</dt><dd>{scenario.expected.outcome}</dd></div>
                 </dl>
-              ) : <p>每條 scenario 都有固定的 terminal evidence contract。</p>}
+              ) : <p>每條 scenario 都有 terminal evidence contract。</p>}
             </article>
             <article>
               <header><span>SAFE CONTEXT ALLOWLIST</span><b>{logsSafeContextKeys.length} keys</b></header>
diff --git a/frontend/src/topics/logs/lesson.tsx b/frontend/src/topics/logs/lesson.tsx
index 8d92da8..aa55093 100644
--- a/frontend/src/topics/logs/lesson.tsx
+++ b/frontend/src/topics/logs/lesson.tsx
@@ -13,10 +13,11 @@ export function LogsLesson({
 }) {
   return (
     <TopicLessonShell
-      eyebrow="TOPIC 16 / QUALITY"
+      className="course-lesson-page"
+      showMeta={false}
       moduleNumber="16"
       title={<>讓每一筆日誌都留下可追蹤的線索<br /><em>沿著 timeline 找到安全證據</em></>}
-      description="從 structured event、severity、correlationId 與 safe context 開始，重跑正常完成、輸入拒絕與依賴逾時的固定 request timeline。"
+      description="從 structured event、severity、correlationId 與 safe context 開始，重跑正常完成、輸入拒絕與依賴逾時的 request timeline。"
       orientation={orientation}
       completed={completed}
     >
@@ -25,20 +26,20 @@ export function LogsLesson({
           const step = logsLessonSteps[sectionIndex];
           return (
             <article className="lesson-card" key={section.id}>
-              <div className="lesson-index"><span>{String(sectionIndex + 1).padStart(2, "0")}</span><small>LOGS</small></div>
+              <div className="lesson-index"><span>{String(sectionIndex + 1).padStart(2, "0")}</span></div>
               <div className="lesson-copy">
                 <h2>{section.title}</h2>
                 <p>{section.body}</p>
                 {step ? <code><span>→</span> {step.code}</code> : null}
               </div>
-              <aside><small>記住這句</small><p>{step?.takeaway ?? "先固定可觀察的 event，再讓日誌留下安全證據。"}</p></aside>
+              <aside><p>{step?.takeaway ?? "先固定可觀察的 event，再讓日誌留下安全證據。"}</p></aside>
             </article>
           );
         })}
       </section>
 
       <section className="lab-cta">
-        <div><p className="kicker">STRUCTURED LOGGING LAB</p><h2>把 request timeline 跑成可安全重現的 evidence。</h2><p>{logsLesson.objectives.length} 個學習目標 · 固定 Logs fixture，不連線真實服務</p></div>
+        <div><h2>把 request timeline 跑成可安全重現的 evidence。</h2></div>
         <button className="button light" type="button" onClick={onOpenLab}>進入 Logs Lab <span>→</span></button>
       </section>
     </TopicLessonShell>
diff --git a/frontend/src/topics/logs/simulator.test.ts b/frontend/src/topics/logs/simulator.test.ts
index 6b88794..a61a342 100644
--- a/frontend/src/topics/logs/simulator.test.ts
+++ b/frontend/src/topics/logs/simulator.test.ts
@@ -41,7 +41,7 @@ describe("Logs deterministic simulator", () => {
       redactionCheck: "pending",
       terminalOutcome: null,
       lastFeedback: "none",
-      lastMessage: "請先選擇固定 Logs scenario，再逐筆 inspect event。",
+      lastMessage: "請先選擇 Logs scenario，再逐筆 inspect event。",
       canReset: true,
     });
     expect(result.accepted).toBe(false);
diff --git a/frontend/src/topics/logs/simulator.ts b/frontend/src/topics/logs/simulator.ts
index bdb3ee1..40824e4 100644
--- a/frontend/src/topics/logs/simulator.ts
+++ b/frontend/src/topics/logs/simulator.ts
@@ -127,7 +127,7 @@ function selectedScenarioOrBlock(current: LogsLabState):
   return {
     result: blocked(
       current,
-      failureText("inspect-without-scenario", "尚未選擇 scenario；請先載入固定 Logs fixture。"),
+      failureText("inspect-without-scenario", "尚未選擇 scenario；請先載入 Logs 測試資料。"),
     ),
   };
 }
@@ -269,7 +269,7 @@ export function createInitialLogsState(): LogsLabState {
     redactionCheck: "pending",
     terminalOutcome: null,
     lastFeedback: "none",
-    lastMessage: "請先選擇固定 Logs scenario，再逐筆 inspect event。",
+    lastMessage: "請先選擇 Logs scenario，再逐筆 inspect event。",
     canReset: true,
   };
 }
@@ -284,12 +284,12 @@ export function isLogsLabComplete(state: LogsLabState): boolean {
 
 function selectScenario(current: LogsLabState, scenarioId: LogsScenarioId): LogsEventResult {
   const scenario = scenarioFor(scenarioId);
-  if (!scenario) return blocked(current, `找不到 ${scenarioId} Logs scenario fixture。`);
+  if (!scenario) return blocked(current, `找不到 ${scenarioId} Logs scenario。`);
   if (current.completedScenarioIds.includes(scenario.id)) {
     return blocked(current, `${scenario.title} 已完成；請先 reset 後再重練，不要重複累加 completion。`);
   }
 
-  const message = `${scenario.title} fixture 已載入；下一步 inspect sequence 1。`;
+  const message = `${scenario.title} 已載入；下一步 inspect sequence 1。`;
   return {
     state: {
       ...cloneState(current),
@@ -327,7 +327,7 @@ function inspectEvent(current: LogsLabState, sequence: number): LogsEventResult
 
   const event = scenario.events[current.activeEventIndex];
   if (!event || event.sequence !== sequence) {
-    return blocked(current, `找不到 ${scenario.id} 的 sequence ${sequence} event；請回到固定 fixture。`);
+    return blocked(current, `找不到 ${scenario.id} 的 sequence ${sequence} event；請重新選擇 scenario。`);
   }
 
   const visibleEventIds = [...current.visibleEventIds, eventIdFor(scenario.id, event.sequence)];
@@ -420,7 +420,7 @@ function verifyTerminal(current: LogsLabState, observation: LogsTerminalObservat
       current,
       failureText(
         "wrong-severity",
-        "terminal evidence 與 fixture contract 不一致；請檢查 level、source、statusCode、outcome 與 correlationId。",
+        "terminal evidence contract 不一致；請檢查 level、source、statusCode、outcome 與 correlationId。",
       ),
     );
   }
@@ -445,7 +445,7 @@ function verifyTerminal(current: LogsLabState, observation: LogsTerminalObservat
 
 export function runLogsEvent(current: LogsLabState, event: LogsLabEvent): LogsEventResult {
   if (event.type === "reset") {
-    return { state: resetLogsLab(), output: ["Logs Lab 已重設，可以重新 inspect 固定 scenarios。"], accepted: true };
+    return { state: resetLogsLab(), output: ["Logs Lab 已重設，可以重新 inspect scenarios。"], accepted: true };
   }
 
   if (current.phase === "completed") {
diff --git a/frontend/src/topics/package/content.ts b/frontend/src/topics/package/content.ts
index 65e6815..8b39c40 100644
--- a/frontend/src/topics/package/content.ts
+++ b/frontend/src/topics/package/content.ts
@@ -11,7 +11,7 @@ export const packageLesson: LessonDefinition = {
   objectives: [
     "分辨 package.json、package-lock.json 與 installed modules 各自負責的狀態。",
     "用版本範圍新增依賴，理解 manifest spec 與 lockfile exact version 的差異。",
-    "用 npm install 解析 fixture registry，再用 npm ci 從 lockfile 重建相同結果。",
+    "用 npm install 解析套件來源，再用 npm ci 從 lockfile 重建相同結果。",
     "在依賴狀態不一致時，知道應該更新、檢查或停止，而不是留下半套安裝。",
   ],
   sections: [
@@ -28,7 +28,7 @@ export const packageLesson: LessonDefinition = {
     {
       id: "install-and-lock",
       title: "npm install 會更新解析結果",
-      body: "新增依賴後，npm install 會依照 fixture registry 解析 direct dependency 與 transitive dependency，並同步更新 lockfile。這一步應留下可 review 的 manifest 與 lockfile 變更。",
+      body: "新增依賴後，npm install 會解析 direct dependency 與 transitive dependency，並同步更新 lockfile。這一步應留下可 review 的 manifest 與 lockfile 變更。",
     },
     {
       id: "clean-rebuild",
@@ -65,21 +65,21 @@ export const packageLessonSteps: readonly PackageLessonStep[] = [
     id: "add-dependency",
     title: "新增版本範圍",
     command: "npm install @workshop/format@^1.2.0",
-    explanation: "用版本範圍新增 direct dependency；fixture 會讓 manifest 更新，並標記 lockfile 尚未同步。",
+    explanation: "用版本範圍新增 direct dependency；manifest 會更新，lockfile 則尚未同步。",
     takeaway: "改 manifest 後，先承認 lockfile 是 stale。",
   },
   {
     id: "install",
     title: "解析並安裝依賴",
     command: "npm install",
-    explanation: "從固定 registry fixture 解析 @workshop/format@1.3.0 與它的 transitive dependency。",
+    explanation: "解析 @workshop/format@1.3.0 與它的 transitive dependency。",
     takeaway: "安裝結果要能被 lockfile 解釋。",
   },
   {
     id: "inspect-lockfile",
     title: "檢查 exact resolution",
     command: "cat package-lock.json",
-    explanation: "確認 lockfile 記下 direct dependency、transitive dependency、exact version 與 fixture 來源。",
+    explanation: "確認 lockfile 記下 direct dependency、transitive dependency 與 exact version。",
     takeaway: "lockfile 是可重現安裝的證據。",
   },
   {
@@ -189,7 +189,7 @@ export const packageLabInitialState: PackageLabState = {
   installState: "empty",
   completedStepIds: [],
   lastCommand: null,
-  lastMessage: "準備從固定 package.json fixture 開始。",
+  lastMessage: "先檢查 package.json。",
   canReset: true,
 };
 
diff --git a/frontend/src/topics/package/lab.tsx b/frontend/src/topics/package/lab.tsx
index 416470c..8f87110 100644
--- a/frontend/src/topics/package/lab.tsx
+++ b/frontend/src/topics/package/lab.tsx
@@ -19,9 +19,7 @@ interface PackageHistoryEntry {
 type PackageFile = "package.json" | "package-lock.json" | "node_modules";
 
 const PACKAGE_FILES: readonly PackageFile[] = ["package.json", "package-lock.json", "node_modules"];
-const INITIAL_HISTORY: readonly PackageHistoryEntry[] = [
-  { lines: ["Package Management sandbox v1", "固定 fixture registry 已準備好。選擇一個 package action 開始。"] },
-];
+const INITIAL_HISTORY: readonly PackageHistoryEntry[] = [];
 
 function eventForStep(stepId: PackageStepId): PackageLabEvent {
   return packageLabHappyPath.find((event) => event.type === stepId) ?? { type: stepId };
@@ -116,12 +114,13 @@ export function PackageLab({ onComplete }: { onComplete?: () => void }) {
     setState(createInitialPackageState());
     setCommand("");
     setSelectedFile("package.json");
-    setHistory([{ lines: ["Package Lab 已重設。從 cat package.json 重新開始。"] }]);
+    setHistory([{ lines: ["已重設。從 cat package.json 重新開始。"] }]);
   }
 
   return (
     <TopicLabShell
-      eyebrow="INTERACTIVE LAB / PACKAGE"
+      className="foundation-lab-shell"
+      showMeta={false}
       title={<>讓依賴變得可重現<br /><em>而不是碰運氣</em></>}
       progressLabel={`${completedCount} / ${packageLessonSteps.length} STEPS`}
       progress={packageLabProgress(state)}
@@ -137,13 +136,12 @@ export function PackageLab({ onComplete }: { onComplete?: () => void }) {
         />
       ) : (
         <div className="package-lab-grid">
-          <section className="package-workspace-panel" aria-label="Package workspace fixture">
+          <section className="package-workspace-panel" aria-label="套件工作區">
             <div className="package-workspace-top">
               <span className="package-window-dots" aria-hidden="true"><i /><i /><i /></span>
-              <b>workshop-package-lab</b>
               <span className="package-phase">{state.phase}</span>
             </div>
-            <div className="package-file-tabs" role="tablist" aria-orientation="horizontal" aria-label="Package fixture files">
+            <div className="package-file-tabs" role="tablist" aria-orientation="horizontal" aria-label="套件檔案">
               {PACKAGE_FILES.map((file, index) => (
                 <button
                   className={selectedFile === file ? "active" : ""}
@@ -175,7 +173,7 @@ export function PackageLab({ onComplete }: { onComplete?: () => void }) {
                 key={file}
                 role="tabpanel"
                 aria-labelledby={packageTabId(file)}
-                aria-label={`${file} fixture`}
+                aria-label={file}
                 tabIndex={0}
                 hidden={selectedFile !== file}
               >
@@ -212,8 +210,7 @@ export function PackageLab({ onComplete }: { onComplete?: () => void }) {
 
           <aside className="package-control-panel" aria-label="Package management controls">
             <div className="package-panel-heading">
-              <div><p className="kicker">PACKAGE CONTROL</p><h2>依序同步三層狀態</h2></div>
-              <span className="package-lab-meta">npm@10.8.2<br />fixture registry</span>
+              <div><h2>依序同步三層狀態</h2></div>
             </div>
             <div className="package-action-list">
               {packageLessonSteps.map((step, index) => {
@@ -234,13 +231,13 @@ export function PackageLab({ onComplete }: { onComplete?: () => void }) {
                 );
               })}
             </div>
-            <p className="package-current-hint">目前任務：{currentStep.title}。可以故意點錯順序，觀察 simulator 如何保留狀態並提示原因。</p>
+            <p className="package-current-hint">目前任務：{currentStep.title}。</p>
           </aside>
         </div>
       )}
 
       <section className="package-state-section" aria-labelledby="package-state-title">
-        <div className="section-heading"><div><p className="kicker">LIVE PACKAGE STATE</p><h2 id="package-state-title">目前的依賴線索</h2></div><p>只顯示 simulator 狀態，不連線真實 registry。</p></div>
+        <div className="section-heading"><div><h2 id="package-state-title">目前的依賴線索</h2></div></div>
         <div className="package-state-grid">
           <div><small>MANIFEST</small><b>{state.manifestState}</b></div>
           <div><small>LOCKFILE</small><b>{state.lockfileState}</b></div>
diff --git a/frontend/src/topics/package/lesson.tsx b/frontend/src/topics/package/lesson.tsx
index 1cb8709..a1a691e 100644
--- a/frontend/src/topics/package/lesson.tsx
+++ b/frontend/src/topics/package/lesson.tsx
@@ -5,10 +5,11 @@ import type { LessonOrientation } from "../types";
 export function PackageLesson({ completed, onOpenLab, orientation }: { completed: boolean; onOpenLab: () => void; orientation: LessonOrientation }) {
   return (
     <TopicLessonShell
-      eyebrow="TOPIC 05 / FOUNDATIONS"
+      className="foundation-lesson-page"
+      showMeta={false}
       moduleNumber="05"
       title={<>讓依賴可重現<br /><em>而不是碰運氣</em></>}
-      description="從 package.json、lockfile 到 clean install，理解版本解析與可重現依賴；所有操作都在固定 fixture 中完成。"
+      description="從 package.json、lockfile 到 clean install，理解版本解析與可重現依賴。"
       orientation={orientation}
       completed={completed}
     >
@@ -17,20 +18,20 @@ export function PackageLesson({ completed, onOpenLab, orientation }: { completed
           const step = packageLessonSteps[index];
           return (
             <article className="lesson-card" key={section.id}>
-              <div className="lesson-index"><span>{String(index + 1).padStart(2, "0")}</span><small>PACKAGE</small></div>
+              <div className="lesson-index"><span>{String(index + 1).padStart(2, "0")}</span></div>
               <div className="lesson-copy">
                 <h2>{section.title}</h2>
                 <p>{section.body}</p>
                 {step ? <code><span>$</span> {step.command}</code> : null}
               </div>
-              <aside><small>記住這句</small><p>{step?.takeaway ?? "先讀懂 dependency graph，再決定下一個操作。"}</p></aside>
+              <aside><p>{step?.takeaway ?? "先讀懂 dependency graph，再決定下一個操作。"}</p></aside>
             </article>
           );
         })}
       </section>
 
       <section className="lab-cta">
-        <div><p className="kicker">PACKAGE MANAGEMENT LAB</p><h2>把依賴裝得可重現。</h2><p>{packageLesson.objectives.length} 個學習目標 · 不連線真實 registry</p></div>
+        <div><h2>把依賴裝得可重現。</h2></div>
         <button className="button light" type="button" onClick={onOpenLab}>進入 Package Lab <span>→</span></button>
       </section>
     </TopicLessonShell>
diff --git a/frontend/src/topics/package/simulator.ts b/frontend/src/topics/package/simulator.ts
index d55c14d..4c75c02 100644
--- a/frontend/src/topics/package/simulator.ts
+++ b/frontend/src/topics/package/simulator.ts
@@ -129,7 +129,7 @@ export function runPackageEvent(current: PackageLabState, event: PackageLabEvent
       return accepted(
         state,
         { completedStepIds: withStep(state, "inspect-manifest"), lastCommand: "cat package.json" },
-        "已確認 package.json 與 npm@10.8.2 fixture。",
+        "已確認 package.json 與 npm@10.8.2。",
         ["workshop-package-lab", "dependencies: (empty)", "packageManager: npm@10.8.2"],
       );
     case "add-dependency":
@@ -137,7 +137,7 @@ export function runPackageEvent(current: PackageLabState, event: PackageLabEvent
         return blocked(state, "npm install @workshop/format@^1.2.0", "請先檢查 package.json，再新增依賴。");
       }
       if (event.packageSpec !== "@workshop/format@^1.2.0") {
-        return failed(state, "npm install", "package not found in fixture registry.");
+        return failed(state, "npm install", "package not found.");
       }
       if (state.manifest.dependencies["@workshop/format"]) {
         return blocked(state, "npm install @workshop/format@^1.2.0", "@workshop/format 已存在；請繼續檢查目前 lockfile 狀態。");
@@ -168,7 +168,7 @@ export function runPackageEvent(current: PackageLabState, event: PackageLabEvent
           lastCommand: "npm install",
           completedStepIds: withStep(state, "install"),
         },
-        "已從 fixture registry 解析 direct 與 transitive dependencies。",
+        "已解析 direct 與 transitive dependencies。",
         ["@workshop/format@1.3.0", "@workshop/shared@1.0.0", "lockfile: synced"],
       );
     case "inspect-lockfile":
@@ -178,8 +178,8 @@ export function runPackageEvent(current: PackageLabState, event: PackageLabEvent
       return accepted(
         state,
         { lastCommand: "cat package-lock.json", completedStepIds: withStep(state, "inspect-lockfile") },
-        "已確認 exact versions、transitive dependency 與 fixture registry 來源。",
-        ["@workshop/format: 1.3.0", "@workshop/shared: 1.0.0", "resolvedFrom: fixture-registry"],
+        "已確認 exact versions 與 transitive dependency。",
+        ["@workshop/format: 1.3.0", "@workshop/shared: 1.0.0", "resolution: package-lock"],
       );
     case "clean-install":
       if (!hasCompleted(state, "inspect-lockfile")) {
diff --git a/frontend/src/topics/postgresql/content.ts b/frontend/src/topics/postgresql/content.ts
index 41af495..fa69e96 100644
--- a/frontend/src/topics/postgresql/content.ts
+++ b/frontend/src/topics/postgresql/content.ts
@@ -135,7 +135,7 @@ export const postgresqlLessonSteps: readonly PostgreSqlLessonStep[] = [
     title: "查詢 JSONB payload",
     code: "SELECT payload->>'kind' FROM events WHERE payload @> '{\"kind\":\"signup\"}';",
     explanation: "->> 取出文字值，@> 判斷 JSONB 是否包含指定結構；查詢的是資料形狀，不是原始字串。",
-    takeaway: "JSONB 仍然需要明確的查詢語意與可驗證的 fixture。",
+    takeaway: "JSONB 仍然需要明確的查詢語意與可驗證的範例資料。",
   },
   {
     id: "create-jsonb-index",
@@ -148,7 +148,7 @@ export const postgresqlLessonSteps: readonly PostgreSqlLessonStep[] = [
     id: "explain-query",
     title: "讀懂 PostgreSQL EXPLAIN",
     code: "EXPLAIN (ANALYZE, BUFFERS) SELECT * FROM events WHERE payload @> '{\"kind\":\"signup\"}';",
-    explanation: "在 GIN index 已建立並完成 ANALYZE 後，EXPLAIN 顯示 plan 與 buffer 線索；本 Lab 用 deterministic fixture 示範 Bitmap Index Scan，真實 PostgreSQL 仍可能依 table size 選擇 Seq Scan。",
+    explanation: "在 GIN index 已建立並完成 ANALYZE 後，EXPLAIN 顯示 plan 與 buffer 線索；本 Lab 用範例資料示範 Bitmap Index Scan，真實 PostgreSQL 仍可能依 table size 選擇 Seq Scan。",
     takeaway: "先看實際 plan 和 rows，再判斷 index 是否真的改善查詢。",
   },
   {
diff --git a/frontend/src/topics/postgresql/lab.tsx b/frontend/src/topics/postgresql/lab.tsx
index e7c10d1..79413f3 100644
--- a/frontend/src/topics/postgresql/lab.tsx
+++ b/frontend/src/topics/postgresql/lab.tsx
@@ -18,9 +18,7 @@ interface PostgreSqlHistoryEntry {
   accepted?: boolean;
 }
 
-const INITIAL_HISTORY: readonly PostgreSqlHistoryEntry[] = [
-  { lines: ["POSTGRESQL workbench v1", "固定 events fixture 與 psql session 已準備好。"] },
-];
+const INITIAL_HISTORY: readonly PostgreSqlHistoryEntry[] = [];
 
 function eventForStep(stepId: PostgreSqlStepId): PostgreSqlLabEvent {
   return postgresqlLabHappyPath.find((event) => event.type === stepId) ?? { type: stepId };
@@ -76,12 +74,13 @@ export function PostgreSqlLab({ onComplete }: { onComplete?: () => void }) {
 
   function reset() {
     setState(createInitialPostgreSqlState());
-    setHistory([{ lines: ["PostgreSQL Lab 已重設。從 psql session 開始。"] }]);
+    setHistory([{ lines: ["已重設。從 psql session 開始。"] }]);
   }
 
   return (
     <TopicLabShell
-      eyebrow="INTERACTIVE LAB / POSTGRESQL"
+      className="course-lab-shell"
+      showMeta={false}
       title={<>從 psql 連線到<br /><em>可驗證的寫入</em></>}
       progressLabel={completedCount + " / " + postgresqlLessonSteps.length + " CHECKS"}
       progress={postgresqlLabProgress(state)}
@@ -97,13 +96,13 @@ export function PostgreSqlLab({ onComplete }: { onComplete?: () => void }) {
         />
       ) : (
         <div className="postgresql-lab-grid">
-          <section className="postgresql-workspace-panel" aria-label="PostgreSQL workbench fixture">
+          <section className="postgresql-workspace-panel" aria-label="PostgreSQL workbench">
             <div className="postgresql-workspace-top">
               <span className="postgresql-window-dots" aria-hidden="true"><i /><i /><i /></span>
               <b>workshop-postgresql</b>
               <span className="postgresql-phase">{state.phase}</span>
             </div>
-            <div className="postgresql-query-toolbar"><span>psql session</span><small>fixture only · no database</small></div>
+            <div className="postgresql-query-toolbar"><span>psql session</span></div>
             <div className="postgresql-query-card">
               <small>CURRENT CHECK</small>
               <code>{currentStep?.code ?? "-- choose a check"}</code>
@@ -129,8 +128,8 @@ export function PostgreSqlLab({ onComplete }: { onComplete?: () => void }) {
 
           <aside className="postgresql-control-panel" aria-label="PostgreSQL controls">
             <div className="postgresql-panel-heading">
-              <div><p className="kicker">CHECK CONTROL</p><h2>從 session 走到 commit</h2></div>
-              <span className="postgresql-lab-meta">PostgreSQL 16<br />fixture only</span>
+              <div><h2>從 session 走到 commit</h2></div>
+              <span className="postgresql-lab-meta">PostgreSQL 16</span>
             </div>
             <div className="postgresql-action-list">
               {postgresqlLessonSteps.map((step, stepIndex) => {
@@ -157,7 +156,7 @@ export function PostgreSqlLab({ onComplete }: { onComplete?: () => void }) {
       )}
 
       <section className="postgresql-result-section" aria-labelledby="postgresql-result-title">
-        <div className="section-heading"><div><p className="kicker">OBSERVABLE RESULT</p><h2 id="postgresql-result-title">目前的資料線索</h2></div><p>只顯示 simulator 結果，不連線真實 PostgreSQL。</p></div>
+        <div className="section-heading"><div><h2 id="postgresql-result-title">目前的資料線索</h2></div></div>
         <div className="postgresql-result-panel">
           {state.result ? (
             <>
diff --git a/frontend/src/topics/postgresql/lesson.tsx b/frontend/src/topics/postgresql/lesson.tsx
index cb82b01..e0ee894 100644
--- a/frontend/src/topics/postgresql/lesson.tsx
+++ b/frontend/src/topics/postgresql/lesson.tsx
@@ -13,7 +13,8 @@ export function PostgreSqlLesson({
 }) {
   return (
     <TopicLessonShell
-      eyebrow="TOPIC 13 / DATA"
+      className="course-lesson-page"
+      showMeta={false}
       moduleNumber="13"
       title={<>從 psql 連線到<br /><em>可驗證的寫入</em></>}
       description="從 PostgreSQL session、型別與 JSONB 開始，追到 RETURNING、EXPLAIN 與 transaction commit。"
@@ -25,20 +26,20 @@ export function PostgreSqlLesson({
           const step = postgresqlLessonSteps[sectionIndex];
           return (
             <article className="lesson-card" key={section.id}>
-              <div className="lesson-index"><span>{String(sectionIndex + 1).padStart(2, "0")}</span><small>PGSQL</small></div>
+              <div className="lesson-index"><span>{String(sectionIndex + 1).padStart(2, "0")}</span></div>
               <div className="lesson-copy">
                 <h2>{section.title}</h2>
                 <p>{section.body}</p>
                 {step ? <code><span>→</span> {step.code}</code> : null}
               </div>
-              <aside><small>記住這句</small><p>{step?.takeaway ?? "先確認 session，再把資料庫行為變成可觀察結果。"}</p></aside>
+              <aside><p>{step?.takeaway ?? "先確認 session，再把資料庫行為變成可觀察結果。"}</p></aside>
             </article>
           );
         })}
       </section>
 
       <section className="lab-cta">
-        <div><p className="kicker">POSTGRESQL LAB</p><h2>把 PostgreSQL 的邊界跑成一條可驗證流程。</h2><p>{postgresqlLesson.objectives.length} 個學習目標 · 固定 events fixture，不連線真實資料庫</p></div>
+        <div><h2>把 PostgreSQL 的邊界跑成一條可驗證流程。</h2></div>
         <button className="button light" type="button" onClick={onOpenLab}>進入 PostgreSQL Lab <span>→</span></button>
       </section>
     </TopicLessonShell>
diff --git a/frontend/src/topics/postgresql/simulator.ts b/frontend/src/topics/postgresql/simulator.ts
index 3d9e726..324edca 100644
--- a/frontend/src/topics/postgresql/simulator.ts
+++ b/frontend/src/topics/postgresql/simulator.ts
@@ -150,7 +150,7 @@ export function runPostgreSqlEvent(
   }
 
   if (event.type === "inspect-session") {
-    return accepted(current, event.type, "已連線到 workshop：student 使用 PostgreSQL 16.4 操作 events fixture。");
+    return accepted(current, event.type, "已連線到 workshop：student 使用 PostgreSQL 16.4 操作 events table。");
   }
 
   if (event.type === "define-contract") {
@@ -170,7 +170,7 @@ export function runPostgreSqlEvent(
   }
 
   if (event.type === "explain-query") {
-    return accepted(current, event.type, "EXPLAIN fixture 顯示 Bitmap Index Scan；真實 planner 仍要依資料量與成本驗證。");
+    return accepted(current, event.type, "EXPLAIN 顯示 Bitmap Index Scan；真實 planner 仍要依資料量與成本驗證。");
   }
 
   return accepted(current, event.type, "events 的新增與更新都完成，COMMIT 讓 transaction 正式可見。", "completed");
diff --git a/frontend/src/topics/problem-solving/content.ts b/frontend/src/topics/problem-solving/content.ts
index f13ef66..2bc8f93 100644
--- a/frontend/src/topics/problem-solving/content.ts
+++ b/frontend/src/topics/problem-solving/content.ts
@@ -172,7 +172,7 @@ export const problemSolvingLessonSteps: readonly ProblemSolvingLessonStep[] = [
     title: "驗證一個可推翻假設",
     method: "假設驅動除錯 · 實驗",
     code: "hypothesis: payment provider timeout causes 500",
-    explanation: "用 fixture 將付款依賴延遲固定在 3000ms，確認 500 只在 timeout path 出現。",
+    explanation: "用測試資料將付款依賴延遲固定在 3000ms，確認 500 只在 timeout path 出現。",
     takeaway: "一次只驗證一個假設，才能知道哪個改變帶來結果。",
   },
   {
@@ -195,7 +195,7 @@ export const problemSolvingLessonSteps: readonly ProblemSolvingLessonStep[] = [
     id: "verify-fix",
     title: "重現並跑回歸",
     method: "驗證 · unit／integration／regression",
-    code: "incident fixture → 503 · healthy provider → 201 · tests pass",
+    code: "incident case → 503 · healthy provider → 201 · tests pass",
     explanation: "重新執行原始事故案例，再確認正常付款仍可建立訂單，並保留測試防止回歸。",
     takeaway: "錯誤消失只是起點；正常路徑與失敗路徑都要驗證。",
   },
@@ -245,7 +245,7 @@ export const problemSolvingResults: Readonly<Record<ProblemSolvingStepId, Proble
     title: "失敗已穩定重現",
     observations: [
       { label: "RUNS", value: "3 / 3" },
-      { label: "INPUT", value: "same order fixture" },
+      { label: "INPUT", value: "same order case" },
       { label: "OUTPUT", value: "HTTP 500" },
     ],
     takeaway: "固定重現路徑後，任何修復都能被同一個案例驗證。",
@@ -275,7 +275,7 @@ export const problemSolvingResults: Readonly<Record<ProblemSolvingStepId, Proble
     title: "假設通過最小實驗",
     observations: [
       { label: "HYPOTHESIS", value: "payment provider timeout" },
-      { label: "FIXTURE DELAY", value: "3000ms" },
+      { label: "TEST DELAY", value: "3000ms" },
       { label: "RESULT", value: "timeout path reproduced" },
     ],
     takeaway: "假設不是結論；它要靠可重複的實驗支持或被推翻。",
diff --git a/frontend/src/topics/problem-solving/lab.tsx b/frontend/src/topics/problem-solving/lab.tsx
index 203a4d1..ecb5d84 100644
--- a/frontend/src/topics/problem-solving/lab.tsx
+++ b/frontend/src/topics/problem-solving/lab.tsx
@@ -21,7 +21,7 @@ interface ProblemSolvingHistoryEntry {
 }
 
 const INITIAL_HISTORY: readonly ProblemSolvingHistoryEntry[] = [
-  { lines: ["PROBLEM SOLVING workbench v0", "固定 orders + payment fixture 已載入。"] },
+  { lines: ["Problem Solving Lab 已載入。", "從問題陳述開始。"] },
 ];
 
 function statusTone(state: ProblemSolvingLabState): TopicStatusTone {
@@ -73,7 +73,8 @@ export function ProblemSolvingLab({ onComplete }: { onComplete?: () => void }) {
 
   return (
     <TopicLabShell
-      eyebrow="INTERACTIVE LAB / PROBLEM SOLVING"
+      className="course-lab-shell"
+      showMeta={false}
       title={<>從症狀走到<br /><em>可驗證的修復</em></>}
       progressLabel={`${completedCount} / ${problemSolvingLessonSteps.length} CHECKS`}
       progress={problemSolvingLabProgress(state)}
@@ -123,7 +124,7 @@ export function ProblemSolvingLab({ onComplete }: { onComplete?: () => void }) {
           <aside className="problem-solving-control-panel" aria-labelledby="problem-solving-actions-title">
             <div className="problem-solving-panel-heading">
               <div><p className="kicker">METHOD CONTROL</p><h2 id="problem-solving-actions-title">沿著證據縮小範圍</h2></div>
-              <span className="problem-solving-lab-meta">fixture only<br />no external service</span>
+              <span className="problem-solving-lab-meta">本地案例<br />不連線外部服務</span>
             </div>
             <div className="problem-solving-action-list">
               {problemSolvingLessonSteps.map((step, stepIndex) => {
@@ -150,7 +151,7 @@ export function ProblemSolvingLab({ onComplete }: { onComplete?: () => void }) {
       )}
 
       <section className="problem-solving-result-section" aria-labelledby="problem-solving-result-title">
-        <div className="section-heading"><div><p className="kicker">OBSERVABLE RESULT</p><h2 id="problem-solving-result-title">目前的問題線索</h2></div><p>只顯示 deterministic fixture 結果，不連線真實服務。</p></div>
+        <div className="section-heading"><div><p className="kicker">OBSERVABLE RESULT</p><h2 id="problem-solving-result-title">目前的問題線索</h2></div><p>只顯示本地案例結果，不連線真實服務。</p></div>
         <div className="problem-solving-result-panel">
           {state.lastResult ? (
             <>
diff --git a/frontend/src/topics/problem-solving/lesson.tsx b/frontend/src/topics/problem-solving/lesson.tsx
index a6a3b2c..1d83b4e 100644
--- a/frontend/src/topics/problem-solving/lesson.tsx
+++ b/frontend/src/topics/problem-solving/lesson.tsx
@@ -13,7 +13,8 @@ export function ProblemSolvingLesson({
 }) {
   return (
     <TopicLessonShell
-      eyebrow="EXTENSION / PROBLEM SOLVING"
+      className="course-lesson-page"
+      showMeta={false}
       moduleNumber="EX"
       title={<>從症狀走到<br /><em>可驗證的修復</em></>}
       description="把除錯、事故處理與錯誤邊界整理成一條可重複的工程工作流。"
@@ -25,13 +26,13 @@ export function ProblemSolvingLesson({
           const step = problemSolvingLessonSteps[sectionIndex];
           return (
             <article className="lesson-card" key={section.id}>
-              <div className="lesson-index"><span>{String(sectionIndex + 1).padStart(2, "0")}</span><small>METHOD</small></div>
+              <div className="lesson-index"><span>{String(sectionIndex + 1).padStart(2, "0")}</span></div>
               <div className="lesson-copy">
                 <h2>{section.title}</h2>
                 <p>{section.body}</p>
                 {step ? <code><span>→</span> {step.code}</code> : null}
               </div>
-              <aside><small>{step?.method ?? "ENGINEERING METHOD"}</small><p>{step?.takeaway ?? "先保留證據，再決定下一個可驗證的動作。"}</p></aside>
+              <aside><p>{step?.takeaway ?? "先保留證據，再決定下一個可驗證的動作。"}</p></aside>
             </article>
           );
         })}
@@ -39,9 +40,7 @@ export function ProblemSolvingLesson({
 
       <section className="lab-cta">
         <div>
-          <p className="kicker">PROBLEM SOLVING LAB</p>
           <h2>把猜測改成可追蹤的檢查。</h2>
-          <p>{problemSolvingLesson.objectives.length} 個學習目標 · 固定 orders／payment fixture，不連線真實服務</p>
         </div>
         <button className="button light" type="button" onClick={onOpenLab}>進入 Problem Solving Lab <span>→</span></button>
       </section>
diff --git a/frontend/src/topics/problem-solving/simulator.ts b/frontend/src/topics/problem-solving/simulator.ts
index bafa14a..f477546 100644
--- a/frontend/src/topics/problem-solving/simulator.ts
+++ b/frontend/src/topics/problem-solving/simulator.ts
@@ -126,7 +126,7 @@ export function runProblemSolvingEvent(
         current,
         event.type,
         { reproduction: "stable" },
-        "同一個 orders fixture 連續 3 次得到 500；失敗可以被驗證。",
+        "同一組 orders 測試資料連續 3 次得到 500；失敗可以被驗證。",
       );
     case "collect-evidence":
       return accepted(
diff --git a/frontend/src/topics/remote/lab.tsx b/frontend/src/topics/remote/lab.tsx
index 9ab8b0b..df7f439 100644
--- a/frontend/src/topics/remote/lab.tsx
+++ b/frontend/src/topics/remote/lab.tsx
@@ -64,7 +64,8 @@ export function RemoteLab({ onComplete }: { onComplete?: () => void }) {
 
   return (
     <TopicLabShell
-      eyebrow="INTERACTIVE LAB / REMOTE"
+      className="foundation-lab-shell"
+      showMeta={false}
       title={<>把變更送上<br /><em>遠端協作流程</em></>}
       progressLabel={`${Math.round(remoteLabProgress(state) / 100 * REQUIRED_STEPS.length)} / ${REQUIRED_STEPS.length} STEPS`}
       progress={remoteLabProgress(state)}
@@ -81,7 +82,6 @@ export function RemoteLab({ onComplete }: { onComplete?: () => void }) {
           <section className="remote-action-panel" aria-labelledby="remote-actions-title">
             <div className="remote-panel-heading">
               <div>
-                <p className="kicker">MISSION CONTROL</p>
                 <h2 id="remote-actions-title">依序完成協作檢查</h2>
               </div>
               <span className="remote-lab-meta">{state.localBranch} · {state.remoteName}</span>
@@ -107,7 +107,6 @@ export function RemoteLab({ onComplete }: { onComplete?: () => void }) {
           </section>
 
           <aside className="remote-context-panel" aria-labelledby="remote-context-title">
-            <p className="kicker">REMOTE CONTEXT</p>
             <h2 id="remote-context-title">目前的協作狀態</h2>
             <dl className="remote-context-list">
               <div><dt>BASE</dt><dd>{state.baseBranch}</dd></div>
@@ -117,7 +116,7 @@ export function RemoteLab({ onComplete }: { onComplete?: () => void }) {
               <div><dt>CHECKS</dt><dd>{state.checks}</dd></div>
             </dl>
             <TopicStatusFeedback tone={feedback.accepted ? "neutral" : "error"} message={feedback.message} />
-            <p className="remote-context-hint">可以故意點錯順序，觀察 simulator 如何保留狀態並提示下一步。</p>
+            <p className="remote-context-hint">可以故意點錯順序，觀察狀態如何保留並提示下一步。</p>
           </aside>
         </div>
       )}
diff --git a/frontend/src/topics/remote/lesson.tsx b/frontend/src/topics/remote/lesson.tsx
index 9b8b4b8..29ad518 100644
--- a/frontend/src/topics/remote/lesson.tsx
+++ b/frontend/src/topics/remote/lesson.tsx
@@ -5,10 +5,11 @@ import type { LessonOrientation } from "../types";
 export function RemoteLesson({ completed, onOpenLab, orientation }: { completed: boolean; onOpenLab: () => void; orientation: LessonOrientation }) {
   return (
     <TopicLessonShell
-      eyebrow="TOPIC 03 / REMOTE COLLABORATION"
-      moduleNumber="03"
+      className="foundation-lesson-page"
+      showMeta={false}
+      moduleNumber="02"
       title={<>把本地工作<br /><em>送進協作流程</em></>}
-      description="理解 origin、fetch、rebase、push 與 PR 的責任邊界，再用 deterministic Lab 走完一次可 review、可合併的遠端工作流。"
+      description="理解 origin、fetch、rebase、push 與 PR 的責任邊界，再走完一次可 review、可合併的遠端工作流。"
       orientation={orientation}
       completed={completed}
     >
@@ -17,20 +18,20 @@ export function RemoteLesson({ completed, onOpenLab, orientation }: { completed:
           const step = remoteLessonSteps[index];
           return (
             <article className="lesson-card" key={section.id}>
-              <div className="lesson-index"><span>{String(index + 1).padStart(2, "0")}</span><small>REMOTE</small></div>
+              <div className="lesson-index"><span>{String(index + 1).padStart(2, "0")}</span></div>
               <div className="lesson-copy">
                 <h2>{section.title}</h2>
                 <p>{section.body}</p>
                 {step ? <code><span>$</span> {step.command}</code> : null}
               </div>
-              <aside><small>記住這句</small><p>{step?.takeaway ?? "先讓協作狀態可被解釋，再讓它可被合併。"}</p></aside>
+              <aside><p>{step?.takeaway ?? "先讓協作狀態可被解釋，再讓它可被合併。"}</p></aside>
             </article>
           );
         })}
       </section>
 
       <section className="lab-cta">
-        <div><p className="kicker">REMOTE COLLABORATION LAB</p><h2>把分支送上 review。</h2><p>{remoteLesson.objectives.length} 個學習目標 · 不連線真實 provider</p></div>
+        <div><h2>把分支送上 review。</h2></div>
         <button className="button light" type="button" onClick={onOpenLab}>進入 Remote Lab <span>→</span></button>
       </section>
     </TopicLessonShell>
diff --git a/frontend/src/topics/rest/content.ts b/frontend/src/topics/rest/content.ts
index 42f3cc2..ee11883 100644
--- a/frontend/src/topics/rest/content.ts
+++ b/frontend/src/topics/rest/content.ts
@@ -223,10 +223,10 @@ export const restCodeFiles: readonly RestCodeFile[] = [
       { id: "db-4", code: "engine = create_engine(\"sqlite:///workshop.db\", connect_args=connect_args)", explanation: "建立可連到 workshop.db 的 database engine，並套用 SQLite 的 thread 設定。", timing: "應用程式啟動並載入 module 時。", connection: "所有 Session 會透過這個 engine 發送 SQL。", consequence: "連線字串或 connect_args 錯誤會讓 database 操作失敗。", stages: ["database"] },
       { id: "db-4b", code: "def create_db_and_tables():", explanation: "宣告 workshop 啟動時建立缺少資料表的 helper。", timing: "FastAPI lifespan 啟動階段呼叫。", connection: "正式專案通常改由 migration 管理 schema。", consequence: "全新 SQLite 檔沒有 table 時，第一個 query 會失敗。", stages: ["dependency", "database"] },
       { id: "db-4c", code: "    SQLModel.metadata.create_all(engine)", explanation: "依所有 table models 的 metadata 建立尚不存在的資料表。", timing: "server 開始接受 request 前。", connection: "engine 把 CREATE TABLE 送到 SQLite。", consequence: "它不會取代正式 migration，也不會安全修改既有 schema。", stages: ["database"] },
-      { id: "db-4d", code: "    with Session(engine) as session:", explanation: "開啟短生命週期 Session，準備 workshop 的固定初始資料。", timing: "建表完成後、server 接受 request 前。", connection: "讓 GET 情境在全新 database 也有 deterministic rows。", consequence: "沒有 seed 時，全新 database 的 GET /items/1 只會得到 404。", stages: ["database"] },
+      { id: "db-4d", code: "    with Session(engine) as session:", explanation: "開啟短生命週期 Session，準備 workshop 的初始資料。", timing: "建表完成後、server 接受 request 前。", connection: "讓 GET 情境在全新 database 也有可預期的 rows。", consequence: "沒有 seed 時，全新 database 的 GET /items/1 只會得到 404。", stages: ["database"] },
       { id: "db-4e", code: "        if session.get(Item, 1) is None:", explanation: "只在 id=1 不存在時 seed，避免每次啟動都重複插入。", timing: "每次 application startup。", connection: "Session.get 以 primary key 查詢 Item。", consequence: "無條件 seed 會造成 primary-key conflict 或重複資料。", stages: ["database"] },
-      { id: "db-4f", code: "            session.add_all([Item(id=1, name=\"Notebook\", price=180), Item(id=2, name=\"Mouse\", price=650)])", explanation: "加入兩筆與 browser simulator 相同的 deterministic fixture。", timing: "第一次啟動空 database 時。", connection: "這兩筆 row 支援 200 與 404 查詢對照。", consequence: "fixture 與 simulator 漂移會讓教材展示和實際程式結果不同。", stages: ["database"] },
-      { id: "db-4g", code: "            session.commit()", explanation: "提交 seed transaction，讓兩筆 fixture 永久寫入 SQLite。", timing: "確認 database 尚未 seed 後。", connection: "後續每個 request 的 Session 都能查到它們。", consequence: "沒有 commit，Session 關閉後 seed 不會保存。", stages: ["database"] },
+      { id: "db-4f", code: "            session.add_all([Item(id=1, name=\"Notebook\", price=180), Item(id=2, name=\"Mouse\", price=650)])", explanation: "加入兩筆與 browser lab 相同的範例資料。", timing: "第一次啟動空 database 時。", connection: "這兩筆 row 支援 200 與 404 查詢對照。", consequence: "範例資料與 lab 漂移會讓教材展示和實際程式結果不同。", stages: ["database"] },
+      { id: "db-4g", code: "            session.commit()", explanation: "提交 seed transaction，讓兩筆資料寫入 SQLite。", timing: "確認 database 尚未 seed 後。", connection: "後續每個 request 的 Session 都能查到它們。", consequence: "沒有 commit，Session 關閉後 seed 不會保存。", stages: ["database"] },
       { id: "db-5", code: "def get_session():", explanation: "宣告 FastAPI dependency，用來提供一個 request 專用 Session。", timing: "每次 route 需要 SessionDep 時。", connection: "FastAPI dependency system 負責呼叫它。", consequence: "自行在 route 建 Session 容易忘記關閉。", stages: ["dependency"] },
       { id: "db-6", code: "    with Session(engine) as session:", explanation: "從 engine 開啟 Session，並用 context manager 確保最後關閉。", timing: "path operation 執行前。", connection: "Session 追蹤 ORM objects 與 transaction。", consequence: "未關閉 Session 可能耗盡連線資源。", stages: ["dependency", "database"] },
       { id: "db-7", code: "        yield session", explanation: "把 Session 注入 route，並暫停 dependency；request 結束後才離開 with。", timing: "path operation 執行前，到 response 完成後清理。", connection: "create_item 的 session 參數會收到這個物件。", consequence: "改成 return 仍可提供值，但失去 yield 後的清理生命週期。", stages: ["dependency"] },
diff --git a/frontend/src/topics/rest/lab.tsx b/frontend/src/topics/rest/lab.tsx
index 6ef216e..d4b306b 100644
--- a/frontend/src/topics/rest/lab.tsx
+++ b/frontend/src/topics/rest/lab.tsx
@@ -128,7 +128,8 @@ export function RestLab({ onComplete }: { onComplete?: () => void }) {
 
   return (
     <TopicLabShell
-      eyebrow="INTERACTIVE LAB / FASTAPI REQUEST"
+      className="course-lab-shell"
+      showMeta={false}
       title={<>追蹤一次 request<br /><em>讀懂整個 full stack</em></>}
       progressLabel={`${state.completedScenarioIds.length} / ${restScenarios.length} REQUESTS`}
       progress={restLabProgress(state)}
@@ -271,7 +272,7 @@ export function RestLab({ onComplete }: { onComplete?: () => void }) {
 
       <section className="rest-io-grid" aria-label="Request database and response state">
         <article><header><span>REQUEST BODY</span><b>{scenario.method === "POST" ? "application/json" : "none"}</b></header><pre>{scenario.requestBody}</pre></article>
-        <article><header><span>SQL 示意（非實際 log）</span><b>{state.databaseItems.length} rows · SQLite fixture</b></header><pre>{state.requestStarted && (currentIndex >= stageIndex("database") || scenario.terminalStageId === "validation") ? scenario.sql : "— waiting for database stage —"}</pre></article>
+        <article><header><span>SQL 示意（非實際 log）</span><b>{state.databaseItems.length} rows · SQLite</b></header><pre>{state.requestStarted && (currentIndex >= stageIndex("database") || scenario.terminalStageId === "validation") ? scenario.sql : "— waiting for database stage —"}</pre></article>
         <article className={state.responseReady ? "ready" : ""}><header><span>HTTP RESPONSE</span><b>{state.responseReady ? scenario.status : "Pending"}</b></header><pre>{state.responseReady ? scenario.responseBody : "— follow the request to see the response —"}</pre></article>
       </section>
     </TopicLabShell>
diff --git a/frontend/src/topics/rest/lesson.tsx b/frontend/src/topics/rest/lesson.tsx
index 3ae84a1..783bfbe 100644
--- a/frontend/src/topics/rest/lesson.tsx
+++ b/frontend/src/topics/rest/lesson.tsx
@@ -5,7 +5,8 @@ import type { LessonOrientation } from "../types";
 export function RestLesson({ completed, onOpenLab, orientation }: { completed: boolean; onOpenLab: () => void; orientation: LessonOrientation }) {
   return (
     <TopicLessonShell
-      eyebrow="TOPIC 08 / WEB & API"
+      className="course-lesson-page"
+      showMeta={false}
       moduleNumber="08"
       title={<>一個 request<br /><em>穿過哪些程式碼？</em></>}
       description="從 React fetch、FastAPI routing 與 Pydantic validation，一路追到 ORM、SQLite 與 JSON response。"
@@ -15,14 +16,14 @@ export function RestLesson({ completed, onOpenLab, orientation }: { completed: b
       <section className="lesson-list" aria-label="FastAPI request lifecycle 教材">
         {restLesson.sections.map((section, index) => (
           <article className="lesson-card" key={section.id}>
-            <div className="lesson-index"><span>{String(index + 1).padStart(2, "0")}</span><small>REQUEST</small></div>
+            <div className="lesson-index"><span>{String(index + 1).padStart(2, "0")}</span></div>
             <div className="lesson-copy"><h2>{section.title}</h2><p>{section.body}</p></div>
-            <aside><small>觀察重點</small><p>{restLesson.objectives[index]}</p></aside>
+            <aside><p>{restLesson.objectives[index]}</p></aside>
           </article>
         ))}
       </section>
       <section className="lab-cta">
-        <div><p className="kicker">FASTAPI REQUEST LAB</p><h2>讓 request 自己帶你讀程式。</h2><p>逐行解說 · deterministic simulator · 不連線真實 backend</p></div>
+        <div><h2>讓 request 自己帶你讀程式。</h2></div>
         <button className="button light" type="button" onClick={onOpenLab}>進入 FastAPI Lab <span>→</span></button>
       </section>
     </TopicLessonShell>
diff --git a/frontend/src/topics/schema/content.ts b/frontend/src/topics/schema/content.ts
index b6879a1..e75e8ba 100644
--- a/frontend/src/topics/schema/content.ts
+++ b/frontend/src/topics/schema/content.ts
@@ -76,7 +76,7 @@ export const schemaLesson: LessonDefinition = {
     what: "資料庫 schema 是資料模型的契約；它描述有哪些實體、欄位、主鍵、外鍵與完整性規則。",
     why: "把規則寫在資料形狀裡，能減少重複、孤兒資料與每個服務各自猜欄位的風險。",
     when: "新增功能、拆分資料表、設計 API model、寫 migration，或需要檢查資料關係時使用。",
-    how: "先找出實體，再選穩定主鍵，連接外鍵，標記 required／nullable，最後用 fixture 驗證完整性。",
+    how: "先找出實體，再選穩定主鍵，連接外鍵，標記 required／nullable，最後用測試資料驗證完整性。",
   },
   objectives: [
     "把需求拆成 projects 與 tasks 兩個清楚的資料實體。",
@@ -103,7 +103,7 @@ export const schemaLesson: LessonDefinition = {
     {
       id: "protect-integrity",
       title: "最後決定 required 與 nullable",
-      body: "title 與 project_id 是建立 task 必須有的資料；assignee 與 completed_at 可以暫時沒有值。最後用 fixture 檢查主鍵唯一、外鍵存在與 required 欄位不為空。",
+      body: "title 與 project_id 是建立 task 必須有的資料；assignee 與 completed_at 可以暫時沒有值。最後用測試資料檢查主鍵唯一、外鍵存在與 required 欄位不為空。",
     },
   ],
 };
@@ -141,7 +141,7 @@ export const schemaLessonSteps: readonly SchemaLessonStep[] = [
     id: "validate-integrity",
     title: "驗證資料完整性",
     code: "CHECK PK unique · FK exists · required fields present",
-    explanation: "用固定 fixture 驗證 primary key 沒重複、foreign key 沒有 orphan、required 欄位沒有空值。",
+    explanation: "用測試資料驗證 primary key 沒重複、foreign key 沒有 orphan、required 欄位沒有空值。",
     takeaway: "schema 的完成條件是規則可被檢查，不是圖畫得漂亮。",
   },
 ] as const;
@@ -220,7 +220,7 @@ export const schemaResults: Readonly<Record<SchemaStepId, SchemaResult>> = {
     id: "validate-integrity",
     columns: ["check", "result", "evidence"],
     rows: [
-      ["primary keys", "PASS", "7 unique ids across fixture tables"],
+      ["primary keys", "PASS", "7 unique ids across tables"],
       ["foreign keys", "PASS", "4 task project_id values resolve"],
       ["required fields", "PASS", "project.name, project_id and title are present"],
       ["nullable fields", "PASS", "NULL means not assigned / not finished"],
@@ -249,5 +249,5 @@ export interface SchemaFailureFixture {
 export const schemaFailureFixtures: readonly SchemaFailureFixture[] = [
   { event: "define-keys", message: "請先拆出 projects 與 tasks，再為每張表設定 key。" },
   { event: "link-project-task", message: "請先為兩張表建立 primary key，foreign key 才有可指向的目標。" },
-  { event: "validate-integrity", message: "請先標記 required 與 nullable，再檢查 fixture 的完整性。" },
+  { event: "validate-integrity", message: "請先標記 required 與 nullable，再檢查資料完整性。" },
 ] as const;
diff --git a/frontend/src/topics/schema/lab.tsx b/frontend/src/topics/schema/lab.tsx
index 8f6ba90..cab0fc3 100644
--- a/frontend/src/topics/schema/lab.tsx
+++ b/frontend/src/topics/schema/lab.tsx
@@ -18,9 +18,7 @@ interface SchemaHistoryEntry {
   accepted?: boolean;
 }
 
-const INITIAL_HISTORY: readonly SchemaHistoryEntry[] = [
-  { lines: ["SCHEMA workbench v1", "固定 projects + tasks fixture 已載入。"] },
-];
+const INITIAL_HISTORY: readonly SchemaHistoryEntry[] = [];
 
 function eventForStep(stepId: SchemaStepId): SchemaLabEvent {
   return schemaLabHappyPath.find((event) => event.type === stepId) ?? { type: stepId };
@@ -71,12 +69,13 @@ export function SchemaLab({ onComplete }: { onComplete?: () => void }) {
 
   function reset() {
     setState(createInitialSchemaState());
-    setHistory([{ lines: ["SCHEMA Lab 已重設。從實體邊界開始。"] }]);
+    setHistory([{ lines: ["已重設。從實體邊界開始。"] }]);
   }
 
   return (
     <TopicLabShell
-      eyebrow="INTERACTIVE LAB / SCHEMA"
+      className="course-lab-shell"
+      showMeta={false}
       title={<>先畫出關係<br /><em>再決定資料形狀</em></>}
       progressLabel={`${completedCount} / ${schemaLessonSteps.length} DECISIONS`}
       progress={schemaLabProgress(state)}
@@ -92,13 +91,13 @@ export function SchemaLab({ onComplete }: { onComplete?: () => void }) {
         />
       ) : (
         <div className="schema-lab-grid">
-          <section className="schema-canvas-panel" aria-label="Schema design canvas fixture">
+          <section className="schema-canvas-panel" aria-label="Schema design canvas">
             <div className="schema-workspace-top">
               <span className="schema-window-dots" aria-hidden="true"><i /><i /><i /></span>
               <b>workshop-schema-design</b>
               <span className="schema-phase">{state.phase}</span>
             </div>
-            <div className="schema-canvas-toolbar"><span>schema.canvas</span><small>fixture only · no migration</small></div>
+            <div className="schema-canvas-toolbar"><span>schema.canvas</span></div>
             <div className="schema-table-stack">
               {schemaTables.map((table) => (
                 <article className={`schema-table-card schema-table-${table.id}`} key={table.id}>
@@ -130,8 +129,8 @@ export function SchemaLab({ onComplete }: { onComplete?: () => void }) {
 
           <aside className="schema-control-panel" aria-label="Schema design controls">
             <div className="schema-panel-heading">
-              <div><p className="kicker">DESIGN CONTROL</p><h2>從需求走到 constraint</h2></div>
-              <span className="schema-lab-meta">relational<br />fixture only</span>
+              <div><h2>從需求走到 constraint</h2></div>
+              <span className="schema-lab-meta">relational</span>
             </div>
             <div className="schema-action-list">
               {schemaLessonSteps.map((step, index) => {
@@ -158,7 +157,7 @@ export function SchemaLab({ onComplete }: { onComplete?: () => void }) {
       )}
 
       <section className="schema-result-section" aria-labelledby="schema-result-title">
-        <div className="section-heading"><div><p className="kicker">MODEL CHECK RESULT</p><h2 id="schema-result-title">目前的模型線索</h2></div><p>只顯示 simulator 結果，不建立真實資料表。</p></div>
+        <div className="section-heading"><div><h2 id="schema-result-title">目前的模型線索</h2></div></div>
         <div className="schema-result-panel">
           {state.result ? (
             <>
diff --git a/frontend/src/topics/schema/lesson.tsx b/frontend/src/topics/schema/lesson.tsx
index 70fe7eb..5d12c25 100644
--- a/frontend/src/topics/schema/lesson.tsx
+++ b/frontend/src/topics/schema/lesson.tsx
@@ -5,7 +5,8 @@ import type { LessonOrientation } from "../types";
 export function SchemaLesson({ completed, onOpenLab, orientation }: { completed: boolean; onOpenLab: () => void; orientation: LessonOrientation }) {
   return (
     <TopicLessonShell
-      eyebrow="TOPIC 11 / DATA"
+      className="course-lesson-page"
+      showMeta={false}
       moduleNumber="11"
       title={<>先畫出關係<br /><em>再決定資料形狀</em></>}
       description="從 projects 與 tasks 的實體邊界開始，補上 primary key、foreign key、nullable 與完整性檢查。"
@@ -17,20 +18,20 @@ export function SchemaLesson({ completed, onOpenLab, orientation }: { completed:
           const step = schemaLessonSteps[index];
           return (
             <article className="lesson-card" key={section.id}>
-              <div className="lesson-index"><span>{String(index + 1).padStart(2, "0")}</span><small>SCHEMA</small></div>
+              <div className="lesson-index"><span>{String(index + 1).padStart(2, "0")}</span></div>
               <div className="lesson-copy">
                 <h2>{section.title}</h2>
                 <p>{section.body}</p>
                 {step ? <code><span>→</span> {step.code}</code> : null}
               </div>
-              <aside><small>記住這句</small><p>{step?.takeaway ?? "資料模型的完成條件是規則可被檢查。"}</p></aside>
+              <aside><p>{step?.takeaway ?? "資料模型的完成條件是規則可被檢查。"}</p></aside>
             </article>
           );
         })}
       </section>
 
       <section className="lab-cta">
-        <div><p className="kicker">SCHEMA DESIGN LAB</p><h2>把需求整理成可靠的資料模型。</h2><p>{schemaLesson.objectives.length} 個學習目標 · 固定 projects／tasks fixture，不連線真實資料庫</p></div>
+        <div><h2>把需求整理成可靠的資料模型。</h2></div>
         <button className="button light" type="button" onClick={onOpenLab}>進入 Schema Lab <span>→</span></button>
       </section>
     </TopicLessonShell>
diff --git a/frontend/src/topics/schema/simulator.ts b/frontend/src/topics/schema/simulator.ts
index f40aa4a..80d9439 100644
--- a/frontend/src/topics/schema/simulator.ts
+++ b/frontend/src/topics/schema/simulator.ts
@@ -117,7 +117,7 @@ export function runSchemaEvent(current: SchemaLabState, event: SchemaLabEvent):
           ? "請先為兩張表建立 primary key，foreign key 才有可指向的目標。"
           : event.type === "mark-nullable"
             ? "請先連接 project 與 task，再決定哪些欄位可以是 NULL。"
-            : "請先標記 required 與 nullable，再檢查 fixture 的完整性。";
+            : "請先標記 required 與 nullable，再檢查資料完整性。";
     return blocked(current, event.type, message);
   }
 
diff --git a/frontend/src/topics/sql/content.ts b/frontend/src/topics/sql/content.ts
index cd06f56..db14d25 100644
--- a/frontend/src/topics/sql/content.ts
+++ b/frontend/src/topics/sql/content.ts
@@ -55,7 +55,7 @@ export const sqlLesson: LessonDefinition = {
     what: "SQL 是描述資料問題的查詢語言；你用 SELECT、WHERE、GROUP BY 與 ORDER BY 表達想看哪些資料。",
     why: "把查詢寫成可重複的契約，能讓同一個問題在不同資料量與不同工具中得到可檢查的結果。",
     when: "需要讀取資料、篩選條件、統計群組、排序報表，或追查 API 背後到底查了什麼時使用。",
-    how: "先確認資料表與欄位，再選欄位、過濾 rows、聚合群組，最後排序結果；每一步都用固定 fixture 驗證。",
+    how: "先確認資料表與欄位，再選欄位、過濾 rows、聚合群組，最後排序結果；每一步都用範例資料驗證。",
   },
   objectives: [
     "看懂 SELECT 如何決定結果欄位與資料列。",
@@ -92,7 +92,7 @@ export const sqlLessonSteps: readonly SqlLessonStep[] = [
     id: "inspect-schema",
     title: "確認 orders schema",
     query: "PRAGMA table_info(orders);",
-    explanation: "先讀 SQLite fixture 的欄位與型別，確認後面的 customer、status、amount 都真的存在。",
+    explanation: "先讀 SQLite orders table 的欄位與型別，確認後面的 customer、status、amount 都真的存在。",
     takeaway: "查詢的第一個契約是資料形狀，不是憑印象猜欄位。",
   },
   {
diff --git a/frontend/src/topics/sql/lab.tsx b/frontend/src/topics/sql/lab.tsx
index 17b3a6c..b61d36a 100644
--- a/frontend/src/topics/sql/lab.tsx
+++ b/frontend/src/topics/sql/lab.tsx
@@ -16,9 +16,7 @@ interface SqlHistoryEntry {
   accepted?: boolean;
 }
 
-const INITIAL_HISTORY: readonly SqlHistoryEntry[] = [
-  { lines: ["SQL sandbox v1", "固定 orders schema 與 6 筆 fixture 已準備好。"] },
-];
+const INITIAL_HISTORY: readonly SqlHistoryEntry[] = [];
 
 function eventForStep(stepId: SqlStepId): SqlLabEvent {
   return sqlLabHappyPath.find((event) => event.type === stepId) ?? { type: stepId };
@@ -90,12 +88,13 @@ export function SqlLab({ onComplete }: { onComplete?: () => void }) {
   function reset() {
     setState(createInitialSqlState());
     setCommand("");
-    setHistory([{ lines: ["SQL Lab 已重設。從 PRAGMA table_info(orders) 開始。"] }]);
+    setHistory([{ lines: ["已重設。從 PRAGMA table_info(orders) 開始。"] }]);
   }
 
   return (
     <TopicLabShell
-      eyebrow="INTERACTIVE LAB / SQL"
+      className="course-lab-shell"
+      showMeta={false}
       title={<>讓資料庫回答一個<br /><em>精準問題</em></>}
       progressLabel={`${completedCount} / ${sqlLessonSteps.length} STEPS`}
       progress={sqlLabProgress(state)}
@@ -111,7 +110,7 @@ export function SqlLab({ onComplete }: { onComplete?: () => void }) {
         />
       ) : (
         <div className="sql-lab-grid">
-          <section className="sql-workspace-panel" aria-label="SQL query workspace fixture">
+          <section className="sql-workspace-panel" aria-label="SQL query workspace">
             <div className="sql-workspace-top">
               <span className="sql-window-dots" aria-hidden="true"><i /><i /><i /></span>
               <b>workshop-sql-lab</b>
@@ -119,7 +118,7 @@ export function SqlLab({ onComplete }: { onComplete?: () => void }) {
             </div>
             <div className="sql-query-toolbar">
               <span>orders.sql</span>
-              <small>SQLite fixture · read only</small>
+              <small>SQLite · read only</small>
             </div>
             <div className="sql-editor" role="region" aria-label="Current SQL query">
               <div className="sql-code-line"><span>01</span><code>{sqlLessonSteps.find((step) => step.id === state.selectedStepId)?.query ?? "-- choose a query"}</code></div>
@@ -151,8 +150,8 @@ export function SqlLab({ onComplete }: { onComplete?: () => void }) {
 
           <aside className="sql-control-panel" aria-label="SQL query controls">
             <div className="sql-panel-heading">
-              <div><p className="kicker">QUERY CONTROL</p><h2>從 rows 走到答案</h2></div>
-              <span className="sql-lab-meta">SQLite<br />fixture only</span>
+              <div><h2>從 rows 走到答案</h2></div>
+              <span className="sql-lab-meta">SQLite</span>
             </div>
             <div className="sql-action-list">
               {sqlLessonSteps.map((step, index) => {
@@ -173,13 +172,13 @@ export function SqlLab({ onComplete }: { onComplete?: () => void }) {
                 );
               })}
             </div>
-            <p className="sql-current-hint">目前任務：{currentStep.title}。可以故意點錯順序，觀察 simulator 為什麼要先確認資料形狀。</p>
+            <p className="sql-current-hint">目前任務：{currentStep.title}。可以故意點錯順序，觀察為什麼要先確認資料形狀。</p>
           </aside>
         </div>
       )}
 
       <section className="sql-result-section" aria-labelledby="sql-result-title">
-        <div className="section-heading"><div><p className="kicker">LIVE QUERY RESULT</p><h2 id="sql-result-title">目前的資料線索</h2></div><p>只顯示 simulator 結果，不連線真實資料庫。</p></div>
+        <div className="section-heading"><div><h2 id="sql-result-title">目前的資料線索</h2></div></div>
         <div className="sql-result-panel">
           {state.result ? (
             <>
diff --git a/frontend/src/topics/sql/lesson.tsx b/frontend/src/topics/sql/lesson.tsx
index edbfe0c..f0916e5 100644
--- a/frontend/src/topics/sql/lesson.tsx
+++ b/frontend/src/topics/sql/lesson.tsx
@@ -5,7 +5,8 @@ import type { LessonOrientation } from "../types";
 export function SqlLesson({ completed, onOpenLab, orientation }: { completed: boolean; onOpenLab: () => void; orientation: LessonOrientation }) {
   return (
     <TopicLessonShell
-      eyebrow="TOPIC 10 / DATA"
+      className="course-lesson-page"
+      showMeta={false}
       moduleNumber="10"
       title={<>讓資料庫回答一個<br /><em>精準問題</em></>}
       description="從 orders schema、SELECT 與 WHERE，一路追到 customer 聚合和 ORDER BY 報表。"
@@ -17,20 +18,20 @@ export function SqlLesson({ completed, onOpenLab, orientation }: { completed: bo
           const step = sqlLessonSteps[index];
           return (
             <article className="lesson-card" key={section.id}>
-              <div className="lesson-index"><span>{String(index + 1).padStart(2, "0")}</span><small>SQL</small></div>
+              <div className="lesson-index"><span>{String(index + 1).padStart(2, "0")}</span></div>
               <div className="lesson-copy">
                 <h2>{section.title}</h2>
                 <p>{section.body}</p>
                 {step ? <code><span>$</span> {step.query}</code> : null}
               </div>
-              <aside><small>記住這句</small><p>{step?.takeaway ?? "查詢的終點不是語法通過，而是結果能回答一個明確問題。"}</p></aside>
+              <aside><p>{step?.takeaway ?? "查詢的終點不是語法通過，而是結果能回答一個明確問題。"}</p></aside>
             </article>
           );
         })}
       </section>
 
       <section className="lab-cta">
-        <div><p className="kicker">SQL QUERY LAB</p><h2>把一張 orders 表變成可讀的答案。</h2><p>{sqlLesson.objectives.length} 個學習目標 · 固定 SQLite fixture，不連線真實資料庫</p></div>
+        <div><h2>把一張 orders 表變成可讀的答案。</h2></div>
         <button className="button light" type="button" onClick={onOpenLab}>進入 SQL Lab <span>→</span></button>
       </section>
     </TopicLessonShell>
diff --git a/frontend/src/topics/unit/content.ts b/frontend/src/topics/unit/content.ts
index d0194c1..da940c2 100644
--- a/frontend/src/topics/unit/content.ts
+++ b/frontend/src/topics/unit/content.ts
@@ -68,11 +68,11 @@ export const unitLesson: LessonDefinition = {
     what: "單元測試以隔離的最小行為為對象，檢查一個函式在明確輸入下是否產生預期結果。",
     why: "小而快的測試能在錯誤剛出現時提供線索，降低依賴整條 API 或畫面流程才發現問題的成本。",
     when: "商業規則、資料轉換或邊界條件可以被獨立呼叫時，先用單元測試固定它的可觀察行為。",
-    how: "先選定 unit boundary，再 Arrange fixture、Act 一次、Assert 結果，沿著 red → green → edge → regression 收斂。",
+    how: "先選定 unit boundary，再 Arrange 測試資料、Act 一次、Assert 結果，沿著 red → green → edge → regression 收斂。",
   },
   objectives: [
     "分辨純函式的 unit boundary 與不應混入的 HTTP、資料庫副作用。",
-    "用 Arrange、Act、Assert 建立可重複的測試 fixture。",
+    "用 Arrange、Act、Assert 建立可重複的測試資料。",
     "讀懂 red／green feedback，讓測試先揭露錯誤再驗證最小修復。",
     "為空集合與折扣超過小計等邊界條件補上回歸保護。",
   ],
@@ -84,7 +84,7 @@ export const unitLesson: LessonDefinition = {
     },
     {
       id: "arrange",
-      title: "Arrange 一個看得懂的 fixture",
+      title: "Arrange 一組看得懂的測試資料",
       body: "輸入資料要小到能直接讀懂，expected value 也要由業務規則推導，而不是從實作細節複製答案。",
     },
     {
@@ -122,8 +122,8 @@ export const unitLessonSteps: readonly UnitLessonStep[] = [
     id: "arrange-fixture",
     title: "Arrange 標準案例",
     code: "const order = { items: [100, 50], discount: 10 };",
-    explanation: "fixture 的 subtotal 是 150，discount 是 10，因此測試預期 total 應為 140。",
-    takeaway: "小 fixture 讓失敗訊息能直接指出哪個規則出了問題。",
+    explanation: "測試資料的 subtotal 是 150，discount 是 10，因此測試預期 total 應為 140。",
+    takeaway: "小型測試資料讓失敗訊息能直接指出哪個規則出了問題。",
   },
   {
     id: "run-red",
@@ -193,7 +193,7 @@ export const unitResults: Readonly<Record<UnitStepId, UnitLabResult>> = {
     id: "arrange-fixture",
     columns: ["case", "input", "expected"],
     rows: [[unitTestCases[0].title, unitTestCases[0].input, unitTestCases[0].expected]],
-    caption: "Arrange · 1 fixture",
+    caption: "Arrange · standard case",
   },
   "run-red": {
     id: "run-red",
diff --git a/frontend/src/topics/unit/lab.tsx b/frontend/src/topics/unit/lab.tsx
index 8ccdc53..1591013 100644
--- a/frontend/src/topics/unit/lab.tsx
+++ b/frontend/src/topics/unit/lab.tsx
@@ -18,9 +18,7 @@ interface UnitHistoryEntry {
   accepted?: boolean;
 }
 
-const INITIAL_HISTORY: readonly UnitHistoryEntry[] = [
-  { lines: ["UNIT TEST RUNNER v1", "固定 order-total fixture 已載入。"] },
-];
+const INITIAL_HISTORY: readonly UnitHistoryEntry[] = [];
 
 function eventForStep(stepId: UnitStepId): UnitLabEvent {
   return unitLabHappyPath.find((event) => event.type === stepId) ?? { type: stepId };
@@ -77,12 +75,13 @@ export function UnitLab({ onComplete }: { onComplete?: () => void }) {
 
   function reset() {
     setState(createInitialUnitState());
-    setHistory([{ lines: ["Unit Testing Lab 已重設。從 unit boundary 開始。"] }]);
+    setHistory([{ lines: ["已重設。從 unit boundary 開始。"] }]);
   }
 
   return (
     <TopicLabShell
-      eyebrow="INTERACTIVE LAB / UNIT TESTING"
+      className="course-lab-shell"
+      showMeta={false}
       title={<>讓錯誤在最小範圍內被看見<br /><em>再用測試鎖住行為</em></>}
       progressLabel={completedCount + " / " + unitLessonSteps.length + " CHECKS"}
       progress={unitLabProgress(state)}
@@ -98,13 +97,13 @@ export function UnitLab({ onComplete }: { onComplete?: () => void }) {
         />
       ) : (
         <div className="unit-lab-grid">
-          <section className="unit-test-panel" aria-label="Unit testing workbench fixture">
+          <section className="unit-test-panel" aria-label="Unit testing workbench">
             <div className="unit-workspace-top">
               <span className="unit-window-dots" aria-hidden="true"><i /><i /><i /></span>
               <b>workshop-unit-tests</b>
               <span className="unit-phase">{state.phase}</span>
             </div>
-            <div className="unit-test-toolbar"><span>test-runner</span><small>fixture only · no source mutation</small></div>
+            <div className="unit-test-toolbar"><span>test-runner</span></div>
             <div className="unit-test-case-card">
               <small>ACTIVE CHECK</small>
               <code>{currentStep?.code ?? "-- choose a check"}</code>
@@ -129,8 +128,8 @@ export function UnitLab({ onComplete }: { onComplete?: () => void }) {
 
           <aside className="unit-control-panel" aria-label="Unit testing controls">
             <div className="unit-panel-heading">
-              <div><p className="kicker">CHECK CONTROL</p><h2>從 boundary 走到 regression</h2></div>
-              <span className="unit-lab-meta">pure function<br />fixture only</span>
+              <div><h2>從 boundary 走到 regression</h2></div>
+              <span className="unit-lab-meta">pure function</span>
             </div>
             <div className="unit-action-list">
               {unitLessonSteps.map((step, stepIndex) => {
@@ -157,7 +156,7 @@ export function UnitLab({ onComplete }: { onComplete?: () => void }) {
       )}
 
       <section className="unit-result-section" aria-labelledby="unit-result-title">
-        <div className="section-heading"><div><p className="kicker">OBSERVABLE RESULT</p><h2 id="unit-result-title">目前的測試線索</h2></div><p>只顯示 deterministic fixture 結果，不執行真實程式碼。</p></div>
+        <div className="section-heading"><div><h2 id="unit-result-title">目前的測試線索</h2></div></div>
         <div className="unit-result-panel">
           {state.result ? (
             <>
diff --git a/frontend/src/topics/unit/lesson.tsx b/frontend/src/topics/unit/lesson.tsx
index 87fdb96..a7ffb41 100644
--- a/frontend/src/topics/unit/lesson.tsx
+++ b/frontend/src/topics/unit/lesson.tsx
@@ -13,8 +13,9 @@ export function UnitLesson({
 }) {
   return (
     <TopicLessonShell
-      eyebrow="TOPIC 13 / QUALITY"
-      moduleNumber="13"
+      className="course-lesson-page"
+      showMeta={false}
+      moduleNumber="14"
       title={<>讓錯誤在最小範圍內被看見<br /><em>再用測試鎖住行為</em></>}
       description="從 unit boundary、Arrange／Act／Assert 開始，走過 red、green、edge case 與 regression suite。"
       orientation={orientation}
@@ -25,20 +26,20 @@ export function UnitLesson({
           const step = unitLessonSteps[sectionIndex];
           return (
             <article className="lesson-card" key={section.id}>
-              <div className="lesson-index"><span>{String(sectionIndex + 1).padStart(2, "0")}</span><small>UNIT</small></div>
+              <div className="lesson-index"><span>{String(sectionIndex + 1).padStart(2, "0")}</span></div>
               <div className="lesson-copy">
                 <h2>{section.title}</h2>
                 <p>{section.body}</p>
                 {step ? <code><span>→</span> {step.code}</code> : null}
               </div>
-              <aside><small>記住這句</small><p>{step?.takeaway ?? "先選定可觀察的行為，再讓測試保護它。"}</p></aside>
+              <aside><p>{step?.takeaway ?? "先選定可觀察的行為，再讓測試保護它。"}</p></aside>
             </article>
           );
         })}
       </section>
 
       <section className="lab-cta">
-        <div><p className="kicker">UNIT TESTING LAB</p><h2>把 red → green → regression 跑成一條快速回饋。</h2><p>{unitLesson.objectives.length} 個學習目標 · 固定 order-total fixture，不執行真實程式碼</p></div>
+        <div><h2>把 red → green → regression 跑成一條快速回饋。</h2></div>
         <button className="button light" type="button" onClick={onOpenLab}>進入 Unit Testing Lab <span>→</span></button>
       </section>
     </TopicLessonShell>