diff --git a/DESIGN.md b/DESIGN.md
index c96aabf..0bccd43 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -1,7 +1,7 @@
 ---
-version: "2.0"
-name: "ExamServer Open World — Playable Operations Board"
-description: "Three authored visual modes for a beginner cyber range, bound by one learning hierarchy."
+version: "2.1"
+name: "ExamServer Open World — Calm Playable Map"
+description: "A beginner cyber range that reveals complexity only after the learner asks for it."
 colors:
   primary: "#007F90"
   primary-hover: "#006470"
@@ -67,7 +67,7 @@ components:
 
 このサイトは「説明を読む教材」ではなく、攻撃経路を自分で切り開くプレイアブルな作戦盤である。良い見た目の条件は装飾量ではない。2秒で現在地が分かり、10秒で次の仮説を比較でき、選んだ行動と発見の因果が記憶に残ることを品質基準とする。
 
-認知負荷はユーザーが求めた時だけ上げる。初期画面には現在の状況、現在の目標、次の主要操作だけを残し、補助情報は名称と件数が分かる「ラベル付きの引き手」として待機させる。引き手を操作した時だけ一枚のdrawerを開き、別の引き手を操作したら中身を入れ替える。
+認知負荷はユーザーが求めた時だけ上げる。初期画面には現在の状況、現在の目標、地図／仮説、次の主要操作だけを残す。補助情報への入口は、各画面に一本だけある「ツール」というラベル付きの引き手である。引いた後のdrawer内で初めて接続、事実、次の調査／ヒント、履歴の名称と件数を見せ、選んだ一種類だけ本文を表示する。
 
 三つの見た目は配色プリセットではない。情報の意味、操作、状態を共有しながら、異なる構図・書体・境界・動きで同じ世界を演出する。
 
@@ -89,8 +89,9 @@ components:
 ### 2. Hierarchy before decoration
 
 - 常時表示: 画面名、現在の目標、世界／仮説、次の主要操作
-- 引き手: ライブ接続、確定した事実、次の調査／ヒント、最近の発見、見た目
-- 開いた時: 選択した一種類だけをdrawerへ表示する
+- 引き手: 各画面に補助情報をまとめた一本の `ツール`
+- Header: ブランドと一本の `メニュー`。画面移動、見た目、演習終了、公開状態は開いた後に見せる
+- 開いた時: 接続、事実、次の調査／ヒント、履歴から選択した一種類だけをdrawerへ表示する
 - 緊急表示: 接続断や更新失敗だけは現在の作業を失わせず主画面へ通知する
 
 見出し、選択地点、主ボタンだけが最強のコントラストを持つ。補助文、時刻、接続状態は一段静かにする。件数は「中に何があるか」を予告するために使い、進捗カードやKPI列にはしない。
@@ -133,14 +134,14 @@ components:
 
 ## Shared interaction contract
 
-- Headerの `見た目 PLAY / OPS / FOCUS` という一つの引き手からテーマを即時切替できる。三択を初期表示しない。
+- Headerの `メニュー` を開いた後にPLAY / OPS / FOCUSを即時切替できる。画面移動、三択、演習終了を初期表示しない。
 - 選択は `aria-pressed` で伝え、44px相当の操作面と明確なfocus ringを持つ。
 - 選択テーマはversion付きlocalStorageへ保存する。保存不能でもPLAYで継続する。
 - テーマ切替で画面、地図選択、仮説、ヒント、セッション状態を初期化しない。
 - 色テーマと公開ガイドはローカルbundleだけで動く。ライブ教材イベントは同一originのクラウドAPIから受け、外部fontや第三者UI SDKは要求しない。
 - 補助情報のdrawerは同時に一枚だけ開く。`Escape` と背景操作で閉じ、閉じた後は元の引き手へfocusを戻す。
 - drawer内へkeyboard focusを閉じ込め、見えていない補助情報をtab順へ残さない。
-- 新しい教材イベントを受けてもdrawerを勝手に開かない。引き手の件数と主画面の目標だけを更新する。
+- 新しい教材イベントを受けてもdrawerを勝手に開かない。閉じている間は主画面の目標と進捗だけを更新し、件数はdrawerを開いた後に見せる。
 
 ## State language
 
@@ -166,8 +167,9 @@ components:
 ## Responsive contract
 
 - 主基準: 1366×768。検証: 1672×941、1280×720、360×800。
-- 900px未満でも初期画面へ補助情報を縦積みしない。引き手は横方向に短く並べ、選んだ情報だけをbottom sheetとして表示する。
-- 狭いheaderでは現在テーマだけを残し、三択は `見た目` の引き手を開いた後に表示する。
+- 900px未満でも初期画面へ補助情報を縦積みしない。一本の `ツール` だけを残し、選んだ情報をbottom sheetとして表示する。
+- 狭いheaderもブランドと `メニュー` の一段だけにし、公開状態、画面移動、テーマ、演習終了は開いた後に表示する。
+- モバイルでは選択地点と `次の一手` を地図より前へ置き、地図一覧は残りの画面内でスクロールできる。
 - 横スクロール、sticky headerによるfocus隠れ、44px未満の主要操作を許さない。
 
 ## Rejected directions
diff --git a/PROJECT_CONSTITUTION.md b/PROJECT_CONSTITUTION.md
index f8522e4..fd7e4a4 100644
--- a/PROJECT_CONSTITUTION.md
+++ b/PROJECT_CONSTITUTION.md
@@ -19,7 +19,7 @@ WindowsとのデュアルブートDebianノートをKali実機または隔離Kal
 3. Kali BridgeはDebianの公開投影を読み、外向きHTTPSだけでクラウドへ中継する。Debianへインターネット経路を与えない。
 4. 学習サイトは未接続でも公開ブリーフィングを表示し、ペアリング後は発見済み事実だけをライブ投影する。未発見の正解や完全な世界定義をブラウザへ渡さない。
 5. 状況相談は事実から仮説を選ばせ、観察点、道具、操作例の順でヒントを開く。
-6. 初期画面は現在地、現在目標、次の主要操作だけを見せ、接続、事実、調査、履歴、見た目はラベル付きの引き手から一種類ずつ開く。
+6. 初期画面は現在地、現在目標、地図／仮説、次の主要操作だけを見せる。補助情報は各画面に一本だけあるラベル付きの `ツール` を引いてから、接続、事実、調査／ヒント、履歴の一種類を選んで開く。画面移動、見た目、演習終了はHeaderの一本の `メニュー` に収納する。
 7. 3 footholdすべてから3 root経路へ到達でき、別セッションで別ルートを遊べる。
 8. root取得後はDebianを信頼せず、外した信頼済み復旧USBからgolden imageへ戻す。
 
@@ -55,7 +55,7 @@ WindowsとのデュアルブートDebianノートをKali実機または隔離Kal
 5. デュアルブート作業がWindows、EFI、実データを損なう。
 6. KaliのWi-Fiと有線LANがルータ化し、隔離したDebianへ外部経路を与える。
 7. ライブ接続がない通常閲覧で、故障画面または偽の進行データを表示する。
-8. 接続、事実、調査、履歴、設定を初期画面へ並べ、初心者が地図よりUIの解読に時間を使う。
+8. 接続、事実、調査、履歴、設定の入口を初期画面へ並べ、初心者が地図よりUIの解読に時間を使う。
 
 ## Observable acceptance
 
@@ -69,4 +69,4 @@ WindowsとのデュアルブートDebianノートをKali実機または隔離Kal
 - Kali Bridge停止時は最後の確定状態と再接続表示を残し、復帰後に欠落なく追いつく。
 - 復旧USBからDebian、ラボ状態、Debian EFIをgolden stateへ戻し、Windowsが再起動できる。
 - Firefox ESRの1366×768、1280×720、360pxで主要フローをキーボードだけでも完了できる。
-- 初回表示では補助パネルの本文が見えず、各ラベルと件数から必要な情報を選び、一度に一枚だけ開閉できる。
+- 初回表示では補助パネルの本文もカテゴリ一覧も見えず、一本の `ツール` を開いた後にラベルと件数から必要な情報を選び、一度に一種類だけ表示できる。
diff --git a/apps/lab-guide/src/App.test.tsx b/apps/lab-guide/src/App.test.tsx
index 3a0764f..65462ed 100644
--- a/apps/lab-guide/src/App.test.tsx
+++ b/apps/lab-guide/src/App.test.tsx
@@ -102,16 +102,21 @@ describe("Lab guide", () => {
         name: "風切モータースの世界を先に歩く",
       }),
     ).toBeVisible();
-    expect(screen.getByText("公開ガイド")).toBeVisible();
     expect(screen.queryByLabelText(/接続コード/)).not.toBeInTheDocument();
     expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
     const pairingPull = screen.getByRole("button", {
-      name: /^ライブ接続、6文字を開く$/,
+      name: "探索ツールを開く",
     });
     expect(pairingPull).toHaveAttribute("aria-expanded", "false");
+    expect(screen.getAllByRole("button", { name: /ツールを開く/ })).toHaveLength(
+      1,
+    );
 
     await user.click(pairingPull);
-    const pairingDialog = screen.getByRole("dialog", { name: "ライブ接続" });
+    const pairingDialog = screen.getByRole("dialog", { name: "探索ツール" });
+    expect(
+      within(pairingDialog).getByRole("button", { name: /^接続6文字$/ }),
+    ).toHaveAttribute("aria-pressed", "true");
     expect(within(pairingDialog).getByLabelText(/接続コード/)).toBeVisible();
     expect(
       within(pairingDialog).getByRole("button", { name: "ライブ接続" }),
@@ -132,14 +137,14 @@ describe("Lab guide", () => {
     );
 
     const pairingPull = await screen.findByRole("button", {
-      name: /^ライブ接続、6文字を開く$/,
+      name: "探索ツールを開く",
     });
     pairingPull.focus();
     await user.click(pairingPull);
 
-    const dialog = screen.getByRole("dialog", { name: "ライブ接続" });
+    const dialog = screen.getByRole("dialog", { name: "探索ツール" });
     const close = within(dialog).getByRole("button", {
-      name: "ライブ接続を閉じる",
+      name: "探索ツールを閉じる",
     });
     const input = within(dialog).getByLabelText(/接続コード/);
     expect(screen.getAllByRole("dialog")).toHaveLength(1);
@@ -155,7 +160,8 @@ describe("Lab guide", () => {
     expect(pairingPull).toHaveFocus();
   });
 
-  it("updates pull counts without opening a drawer on a live discovery", async () => {
+  it("keeps live counts stored until the user asks for the tool shelf", async () => {
+    const user = userEvent.setup();
     render(<App client={createFixtureClient("transition")} />);
 
     expect(
@@ -164,7 +170,7 @@ describe("Lab guide", () => {
       }),
     ).toBeVisible();
     expect(
-      screen.getByRole("button", { name: /^事実、0件を開く$/ }),
+      screen.getByRole("button", { name: "探索ツールを開く" }),
     ).toBeVisible();
     expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
 
@@ -175,13 +181,18 @@ describe("Lab guide", () => {
         { timeout: 2_000 },
       ),
     ).toBeVisible();
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+
+    await user.click(
+      screen.getByRole("button", { name: "探索ツールを開く" }),
+    );
+    const toolDialog = screen.getByRole("dialog", { name: "探索ツール" });
     expect(
-      screen.getByRole("button", { name: /^事実、1件を開く$/ }),
-    ).toBeVisible();
+      within(toolDialog).getByRole("button", { name: /^事実1件$/ }),
+    ).toHaveAttribute("aria-pressed", "true");
     expect(
-      screen.getByRole("button", { name: /^最近の発見、1件を開く$/ }),
+      within(toolDialog).getByRole("button", { name: /^履歴1件$/ }),
     ).toBeVisible();
-    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
   });
 
   it("defaults to PLAY and changes art direction without losing the active screen", async () => {
@@ -190,7 +201,7 @@ describe("Lab guide", () => {
     const user = userEvent.setup();
     render(<App client={createFixtureClient("live")} />);
 
-    await user.click(screen.getByLabelText("見た目 PLAY"));
+    await user.click(screen.getByLabelText("メニュー"));
     const themeGroup = screen.getByRole("group", { name: "表示テーマ" });
     expect(
       within(themeGroup).getByRole("button", {
@@ -202,8 +213,12 @@ describe("Lab guide", () => {
     await user.click(
       screen.getByRole("button", { name: "状況相談" }),
     );
+    await user.click(screen.getByLabelText("メニュー"));
+    const reopenedThemeGroup = screen.getByRole("group", {
+      name: "表示テーマ",
+    });
     await user.click(
-      within(themeGroup).getByRole("button", {
+      within(reopenedThemeGroup).getByRole("button", {
         name: "OPS ハッカー",
       }),
     );
@@ -213,11 +228,12 @@ describe("Lab guide", () => {
     expect(
       screen.getByRole("heading", { name: "次に確かめることを選ぶ" }),
     ).toBeVisible();
-    await user.click(screen.getByLabelText("見た目 OPS"));
+    await user.click(screen.getByLabelText("メニュー"));
     expect(
-      within(themeGroup).getByRole("button", {
-        name: "OPS ハッカー",
-      }),
+      within(screen.getByRole("group", { name: "表示テーマ" })).getByRole(
+        "button",
+        { name: "OPS ハッカー" },
+      ),
     ).toHaveAttribute("aria-pressed", "true");
 
     window.localStorage.removeItem(THEME_STORAGE_KEY);
@@ -228,8 +244,7 @@ describe("Lab guide", () => {
     const user = userEvent.setup();
     render(<App client={createFixtureClient("live")} />);
 
-    expect(await screen.findByLabelText("見た目 FOCUS")).toBeVisible();
-    await user.click(screen.getByLabelText("見た目 FOCUS"));
+    await user.click(await screen.findByLabelText("メニュー"));
     expect(
       screen.getByRole("button", { name: "FOCUS シンプル" }),
     ).toHaveAttribute("aria-pressed", "true");
@@ -325,7 +340,7 @@ describe("Lab guide", () => {
     ).toBeVisible();
     expect(screen.queryByLabelText("見つけたflag")).not.toBeInTheDocument();
 
-    await user.click(screen.getByRole("button", { name: "状況相談" }));
+    await user.click(screen.getByRole("button", { name: "次の一手" }));
 
     expect(
       screen.getByRole("heading", { name: "次に確かめることを選ぶ" }),
@@ -346,7 +361,7 @@ describe("Lab guide", () => {
     const user = userEvent.setup();
     render(<App client={createFixtureClient("live")} />);
 
-    await user.click(await screen.findByRole("button", { name: "状況相談" }));
+    await user.click(await screen.findByRole("button", { name: "次の一手" }));
     await user.click(
       screen.getByRole("button", {
         name: /公開ファイルに別の手掛かりがないか探す/,
@@ -370,12 +385,12 @@ describe("Lab guide", () => {
     const user = userEvent.setup();
     render(<App client={createFixtureClient("live")} />);
 
-    await user.click(await screen.findByRole("button", { name: "状況相談" }));
+    await user.click(await screen.findByRole("button", { name: "次の一手" }));
     await user.click(
-      screen.getByRole("button", { name: /^ヒント、3段階を開く$/ }),
+      screen.getByRole("button", { name: "相談ツールを開く" }),
     );
     const hintDialog = screen.getByRole("dialog", {
-      name: "必要ならヒント",
+      name: "相談ツール",
     });
     expect(
       within(hintDialog).getByText(
@@ -413,11 +428,16 @@ describe("Lab guide", () => {
     render(<App client={createFixtureClient("unavailable")} />);
 
     await user.click(
-      await screen.findByRole("button", { name: /^次の調査、/ }),
+      await screen.findByRole("button", { name: "探索ツールを開く" }),
     );
     const investigationDialog = screen.getByRole("dialog", {
-      name: "次の調査",
+      name: "探索ツール",
     });
+    await user.click(
+      within(investigationDialog).getByRole("button", {
+        name: /^次の調査\d+件$/,
+      }),
+    );
     const input = within(investigationDialog).getByLabelText("見つけたflag");
     await user.type(input, "manual-proof");
     await user.click(
@@ -442,11 +462,16 @@ describe("Lab guide", () => {
     render(<App client={createFixtureClient("success")} />);
 
     await user.click(
-      await screen.findByRole("button", { name: /^次の調査、/ }),
+      await screen.findByRole("button", { name: "探索ツールを開く" }),
     );
     const investigationDialog = screen.getByRole("dialog", {
-      name: "次の調査",
+      name: "探索ツール",
     });
+    await user.click(
+      within(investigationDialog).getByRole("button", {
+        name: /^次の調査\d+件$/,
+      }),
+    );
     expect(
       within(investigationDialog).getByLabelText("Windowsで見つけたflag"),
     ).toBeVisible();
@@ -464,6 +489,7 @@ describe("Lab guide", () => {
       name: "中古バイク店の業務サーバを調べる",
     });
 
+    await user.click(screen.getByLabelText("メニュー"));
     const endSession = screen.getByRole("button", { name: "演習を終了" });
     await user.click(endSession);
     expect(
@@ -482,8 +508,9 @@ describe("Lab guide", () => {
 
     await user.click(screen.getByRole("button", { name: "探索を続ける" }));
     expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
-    expect(endSession).toHaveFocus();
+    expect(screen.getByLabelText("メニュー")).toHaveFocus();
 
+    await user.click(screen.getByLabelText("メニュー"));
     await user.click(screen.getByRole("button", { name: "演習を終了" }));
     await user.click(screen.getByRole("button", { name: "終了する" }));
     expect(
@@ -495,10 +522,10 @@ describe("Lab guide", () => {
     const user = userEvent.setup();
     render(<App client={createFixtureClient("empty")} />);
     await user.click(
-      await screen.findByRole("button", { name: /^事実、0件を開く$/ }),
+      await screen.findByRole("button", { name: "探索ツールを開く" }),
     );
     const factsDialog = screen.getByRole("dialog", {
-      name: "分かっていること",
+      name: "探索ツール",
     });
     expect(
       within(factsDialog).getByText("まだ発見はありません。"),
@@ -536,10 +563,10 @@ describe("Lab guide", () => {
     });
     await waitFor(() => expect(publish).toBeTypeOf("function"));
     await user.click(
-      screen.getByRole("button", { name: /^事実、3件を開く$/ }),
+      screen.getByRole("button", { name: "探索ツールを開く" }),
     );
     const factsDialog = screen.getByRole("dialog", {
-      name: "分かっていること",
+      name: "探索ツール",
     });
     expect(within(factsDialog).getByText("Webサイトが見える")).toBeVisible();
 
diff --git a/apps/lab-guide/src/components/AppHeader.tsx b/apps/lab-guide/src/components/AppHeader.tsx
index 5c480a2..fdf1883 100644
--- a/apps/lab-guide/src/components/AppHeader.tsx
+++ b/apps/lab-guide/src/components/AppHeader.tsx
@@ -1,11 +1,13 @@
 import {
+  IconChevronRight,
   IconLogout2,
   IconMap2,
+  IconMenu2,
   IconMessageCircleQuestion,
   IconPalette,
   IconShield,
 } from "@tabler/icons-react";
-import { useRef } from "react";
+import { useRef, useState } from "react";
 import { THEME_OPTIONS, type ThemeMode } from "../theme";
 import type { ExperienceMode, ScreenId } from "../types";
 
@@ -28,13 +30,30 @@ export function AppHeader({
   theme,
   onThemeChange,
 }: AppHeaderProps) {
-  const themeMenuRef = useRef<HTMLDetailsElement>(null);
+  const appMenuRef = useRef<HTMLDetailsElement>(null);
+  const [menuOpen, setMenuOpen] = useState(false);
   const activeTheme =
     THEME_OPTIONS.find((option) => option.id === theme) ?? THEME_OPTIONS[0];
 
+  const closeMenu = () => {
+    appMenuRef.current?.removeAttribute("open");
+    setMenuOpen(false);
+  };
+
+  const selectScreen = (screen: ScreenId) => {
+    onScreenChange(screen);
+    closeMenu();
+  };
+
   const selectTheme = (nextTheme: ThemeMode) => {
     onThemeChange(nextTheme);
-    themeMenuRef.current?.removeAttribute("open");
+    closeMenu();
+  };
+
+  const endSession = () => {
+    closeMenu();
+    appMenuRef.current?.querySelector("summary")?.focus();
+    onEnd();
   };
 
   return (
@@ -43,40 +62,14 @@ export function AppHeader({
         <IconShield aria-hidden="true" stroke={1.7} />
         <span className="brand-name">ExamServer</span>
         <span className="brand-divider" aria-hidden="true" />
-        <span className="brand-lab">
-          <span>OPEN WORLD</span>
-          実践ラボ
-        </span>
+        <span className="brand-lab">実践ラボ</span>
       </div>
 
-      <nav className="primary-nav" aria-label="ラボ内の画面">
-        <button
-          type="button"
-          className="nav-tab"
-          aria-current={activeScreen === "map" ? "page" : undefined}
-          onClick={() => onScreenChange("map")}
-        >
-          <IconMap2 aria-hidden="true" />
-          探索地図
-        </button>
-        <button
-          type="button"
-          className="nav-tab"
-          aria-current={activeScreen === "consultation" ? "page" : undefined}
-          onClick={() => onScreenChange("consultation")}
-        >
-          <IconMessageCircleQuestion aria-hidden="true" />
-          状況相談
-        </button>
-      </nav>
-
       <div className="header-actions">
-        <span className={`experience-label experience-label--${experience}`}>
-          {experience === "live" ? "ライブ演習" : "公開ガイド"}
-        </span>
         <details
-          ref={themeMenuRef}
-          className="theme-menu"
+          ref={appMenuRef}
+          className="app-menu"
+          onToggle={(event) => setMenuOpen(event.currentTarget.open)}
           onBlur={(event) => {
             if (!event.currentTarget.contains(event.relatedTarget)) {
               event.currentTarget.removeAttribute("open");
@@ -89,40 +82,80 @@ export function AppHeader({
             }
           }}
         >
-          <summary aria-label={`見た目 ${activeTheme.label}`}>
-            <IconPalette aria-hidden="true" />
-            <span>見た目</span>
-            <strong>{activeTheme.label}</strong>
+          <summary aria-label="メニュー">
+            <IconMenu2 aria-hidden="true" />
+            <span>メニュー</span>
           </summary>
-          <div className="theme-menu-options" role="group" aria-label="表示テーマ">
-            {THEME_OPTIONS.map((option) => (
+
+          <div className="app-menu-panel" hidden={!menuOpen}>
+            <span
+              className={`app-menu-status experience-label experience-label--${experience}`}
+            >
+              {experience === "live" ? "ライブ演習" : "公開ガイド"}
+            </span>
+            <nav className="app-menu-section" aria-label="ラボ内の画面">
+              <span className="app-menu-label">画面</span>
               <button
-                key={option.id}
                 type="button"
-                aria-label={`${option.label} ${option.description}`}
-                aria-pressed={theme === option.id}
-                title={`${option.label} - ${option.description}`}
-                onClick={() => selectTheme(option.id)}
+                aria-current={activeScreen === "map" ? "page" : undefined}
+                onClick={() => selectScreen("map")}
               >
-                <span>{option.label}</span>
-                <small>{option.description}</small>
+                <IconMap2 aria-hidden="true" />
+                <span>探索地図</span>
+                <IconChevronRight aria-hidden="true" />
               </button>
-            ))}
+              <button
+                type="button"
+                aria-current={
+                  activeScreen === "consultation" ? "page" : undefined
+                }
+                onClick={() => selectScreen("consultation")}
+              >
+                <IconMessageCircleQuestion aria-hidden="true" />
+                <span>状況相談</span>
+                <IconChevronRight aria-hidden="true" />
+              </button>
+            </nav>
+
+            <div
+              className="app-menu-section app-menu-themes"
+              role="group"
+              aria-label="表示テーマ"
+            >
+              <span className="app-menu-label">
+                <IconPalette aria-hidden="true" />
+                見た目
+                <small>{activeTheme.label}</small>
+              </span>
+              {THEME_OPTIONS.map((option) => (
+                <button
+                  key={option.id}
+                  type="button"
+                  aria-label={`${option.label} ${option.description}`}
+                  aria-pressed={theme === option.id}
+                  title={`${option.label} - ${option.description}`}
+                  onClick={() => selectTheme(option.id)}
+                >
+                  <span>{option.label}</span>
+                  <small>{option.description}</small>
+                </button>
+              ))}
+            </div>
+
+            {experience === "live" ? (
+              <button
+                type="button"
+                className="app-menu-end"
+                aria-label={sessionEnded ? "演習は終了済み" : "演習を終了"}
+                onClick={endSession}
+                disabled={sessionEnded}
+              >
+                <IconLogout2 aria-hidden="true" />
+                <span>{sessionEnded ? "終了しました" : "演習を終了"}</span>
+              </button>
+            ) : null}
           </div>
         </details>
-
-        {experience === "live" ? (
-          <button
-            type="button"
-            className="end-session-button"
-            aria-label={sessionEnded ? "演習は終了済み" : "演習を終了"}
-            onClick={onEnd}
-            disabled={sessionEnded}
-          >
-            <IconLogout2 aria-hidden="true" />
-            <span>{sessionEnded ? "終了しました" : "演習を終了"}</span>
-          </button>
-        ) : null}
       </div>
     </header>
   );
diff --git a/apps/lab-guide/src/components/DisclosureDrawer.tsx b/apps/lab-guide/src/components/DisclosureDrawer.tsx
index 5b3510a..a078db4 100644
--- a/apps/lab-guide/src/components/DisclosureDrawer.tsx
+++ b/apps/lab-guide/src/components/DisclosureDrawer.tsx
@@ -161,3 +161,41 @@ export function DisclosurePull({
     </button>
   );
 }
+
+export interface ToolShelfItem<T extends string> {
+  id: T;
+  label: string;
+  meta?: string;
+  icon: ReactNode;
+}
+
+interface ToolShelfProps<T extends string> {
+  items: ToolShelfItem<T>[];
+  active: T;
+  onSelect: (id: T) => void;
+}
+
+export function ToolShelf<T extends string>({
+  items,
+  active,
+  onSelect,
+}: ToolShelfProps<T>) {
+  return (
+    <nav className="tool-shelf-nav" aria-label="表示する情報">
+      {items.map((item) => (
+        <button
+          key={item.id}
+          type="button"
+          aria-pressed={active === item.id}
+          onClick={() => onSelect(item.id)}
+        >
+          <span className="tool-shelf-icon" aria-hidden="true">
+            {item.icon}
+          </span>
+          <span>{item.label}</span>
+          {item.meta ? <small>{item.meta}</small> : null}
+        </button>
+      ))}
+    </nav>
+  );
+}
diff --git a/apps/lab-guide/src/components/ExplorationMap.tsx b/apps/lab-guide/src/components/ExplorationMap.tsx
index 55c59db..c10292f 100644
--- a/apps/lab-guide/src/components/ExplorationMap.tsx
+++ b/apps/lab-guide/src/components/ExplorationMap.tsx
@@ -7,7 +7,6 @@ import {
   IconCompass,
   IconListCheck,
   IconListDetails,
-  IconMap2,
   IconPlugConnected,
   IconRoute,
   IconTargetArrow,
@@ -24,6 +23,8 @@ import { ConnectionBanner } from "./ConnectionBanner";
 import {
   DisclosureDrawer,
   DisclosurePull,
+  ToolShelf,
+  type ToolShelfItem,
 } from "./DisclosureDrawer";
 import { EventStrip } from "./EventStrip";
 import { KnownFacts } from "./KnownFacts";
@@ -115,14 +116,38 @@ export function ExplorationMap({
   }, [activeDisclosure, experience]);
 
   const drawerId = "map-disclosure-drawer";
-  const drawerTitle =
-    activeDisclosure === "pairing"
-      ? "ライブ接続"
-      : activeDisclosure === "facts"
-        ? "分かっていること"
-        : activeDisclosure === "investigations"
-          ? "次の調査"
-          : "最近の発見";
+  const defaultDisclosure: MapDisclosure =
+    experience === "browse" ? "pairing" : "facts";
+  const shelfItems: ToolShelfItem<MapDisclosure>[] = [
+    ...(experience === "browse"
+      ? [
+          {
+            id: "pairing" as const,
+            label: "接続",
+            meta: "6文字",
+            icon: <IconPlugConnected />,
+          },
+        ]
+      : []),
+    {
+      id: "facts",
+      label: "事実",
+      meta: `${projection.facts.length}件`,
+      icon: <IconListCheck />,
+    },
+    {
+      id: "investigations",
+      label: "次の調査",
+      meta: `${projection.investigations.slice(0, 3).length}件`,
+      icon: <IconCompass />,
+    },
+    {
+      id: "events",
+      label: "履歴",
+      meta: `${projection.recentEvents.length}件`,
+      icon: <IconListDetails />,
+    },
+  ];
 
   const openConsultation = (hypothesisId?: string) => {
     setActiveDisclosure(null);
@@ -142,10 +167,21 @@ export function ExplorationMap({
             onRefresh={onRefresh}
           />
         ) : null}
-        <header className="stage-intro">
-          <h1>{projection.heading}</h1>
-          <p>{projection.lede}</p>
-        </header>
+        <div className="stage-heading-row">
+          <header className="stage-intro">
+            <span className="stage-eyebrow">探索地図</span>
+            <h1>{projection.heading}</h1>
+          </header>
+          <nav className="disclosure-pulls" aria-label="必要な情報を開く">
+            <DisclosurePull
+              label="探索ツール"
+              icon={<IconCompass />}
+              controls={drawerId}
+              open={activeDisclosure !== null}
+              onClick={() => setActiveDisclosure(defaultDisclosure)}
+            />
+          </nav>
+        </div>
 
         <section className="stage-context" aria-label="現在の目標">
           <IconTargetArrow aria-hidden="true" />
@@ -169,43 +205,6 @@ export function ExplorationMap({
           ) : null}
         </section>
 
-        <nav className="disclosure-pulls" aria-label="必要な情報を開く">
-          {experience === "browse" ? (
-            <DisclosurePull
-              label="ライブ接続"
-              meta="6文字"
-              icon={<IconPlugConnected />}
-              controls={drawerId}
-              open={activeDisclosure === "pairing"}
-              onClick={() => setActiveDisclosure("pairing")}
-            />
-          ) : null}
-          <DisclosurePull
-            label="事実"
-            meta={`${projection.facts.length}件`}
-            icon={<IconListCheck />}
-            controls={drawerId}
-            open={activeDisclosure === "facts"}
-            onClick={() => setActiveDisclosure("facts")}
-          />
-          <DisclosurePull
-            label="次の調査"
-            meta={`${projection.investigations.slice(0, 3).length}件`}
-            icon={<IconCompass />}
-            controls={drawerId}
-            open={activeDisclosure === "investigations"}
-            onClick={() => setActiveDisclosure("investigations")}
-          />
-          <DisclosurePull
-            label="最近の発見"
-            meta={`${projection.recentEvents.length}件`}
-            icon={<IconListDetails />}
-            controls={drawerId}
-            open={activeDisclosure === "events"}
-            onClick={() => setActiveDisclosure("events")}
-          />
-        </nav>
-
         {projection.status === "complete" ? (
           <section className="success-callout" aria-labelledby="success-title">
             <IconRoute aria-hidden="true" />
@@ -216,32 +215,16 @@ export function ExplorationMap({
           </section>
         ) : null}
 
-        <div className="map-toolbar">
-          <h2>
-            <IconMap2 aria-hidden="true" />
+        <section className="map-workspace" aria-labelledby="map-workspace-title">
+          <h2 id="map-workspace-title" className="sr-only">
             探索地図
           </h2>
-          <details className="map-legend-details">
-            <summary>地図記号</summary>
-            <div className="map-legend" aria-label="地図の状態">
-              <span>
-                <IconCircleCheck aria-hidden="true" /> 発見済み
-              </span>
-              <span>
-                <IconCircleDot aria-hidden="true" /> 選択中
-              </span>
-              <span>
-                <IconCircleDashed aria-hidden="true" /> 未発見
-              </span>
-            </div>
-          </details>
-        </div>
-
-        <MapCanvas
-          projection={projection}
-          selectedNodeId={selectedNodeId}
-          onSelectNode={setSelectedNodeId}
-        />
+          <MapCanvas
+            projection={projection}
+            selectedNodeId={selectedNodeId}
+            onSelectNode={setSelectedNodeId}
+          />
+        </section>
 
         {selectedNode && selectedNode.state !== "undiscovered" ? (
           <section
@@ -254,10 +237,6 @@ export function ExplorationMap({
             <div className="selected-node-copy">
               <small>選択中の地点</small>
               <strong>{selectedNode.label}</strong>
-              <span>
-                {selectedNode.detail ??
-                  "この地点で得た事実を、次の仮説につなげます。"}
-              </span>
             </div>
             {selectedNode.progress ? (
               <span className="selected-node-progress">
@@ -278,9 +257,17 @@ export function ExplorationMap({
       <DisclosureDrawer
         id={drawerId}
         open={activeDisclosure !== null}
-        title={drawerTitle}
+        title="探索ツール"
         onClose={() => setActiveDisclosure(null)}
       >
+        {activeDisclosure ? (
+          <ToolShelf
+            items={shelfItems}
+            active={activeDisclosure}
+            onSelect={setActiveDisclosure}
+          />
+        ) : null}
+
         {activeDisclosure === "pairing" ? (
           <SessionPairingPanel
             pending={pairingPending}
@@ -290,15 +277,31 @@ export function ExplorationMap({
         ) : null}
 
         {activeDisclosure === "facts" ? (
-          <KnownFacts
-            facts={projection.facts}
-            title="分かっていること"
-            projection={projection}
-            detailed
-            experience={experience}
-            showHeading={false}
-            showContextCards={false}
-          />
+          <>
+            <KnownFacts
+              facts={projection.facts}
+              title="分かっていること"
+              projection={projection}
+              detailed
+              experience={experience}
+              showHeading={false}
+              showContextCards={false}
+            />
+            <section className="drawer-map-legend" aria-label="地図の記号">
+              <h3>地図の記号</h3>
+              <div>
+                <span>
+                  <IconCircleCheck aria-hidden="true" /> 発見済み
+                </span>
+                <span>
+                  <IconCircleDot aria-hidden="true" /> 選択中
+                </span>
+                <span>
+                  <IconCircleDashed aria-hidden="true" /> 未発見
+                </span>
+              </div>
+            </section>
+          </>
         ) : null}
 
         {activeDisclosure === "investigations" ? (
diff --git a/apps/lab-guide/src/components/SituationConsultation.tsx b/apps/lab-guide/src/components/SituationConsultation.tsx
index e81259c..a105f0c 100644
--- a/apps/lab-guide/src/components/SituationConsultation.tsx
+++ b/apps/lab-guide/src/components/SituationConsultation.tsx
@@ -27,6 +27,8 @@ import { ConnectionBanner } from "./ConnectionBanner";
 import {
   DisclosureDrawer,
   DisclosurePull,
+  ToolShelf,
+  type ToolShelfItem,
 } from "./DisclosureDrawer";
 import { EventStrip } from "./EventStrip";
 import { KnownFacts } from "./KnownFacts";
@@ -228,12 +230,26 @@ export function SituationConsultation({
           : false
       : false;
   const drawerId = "consultation-disclosure-drawer";
-  const drawerTitle =
-    activeDisclosure === "facts"
-      ? "分かっていること"
-      : activeDisclosure === "hints"
-        ? "必要ならヒント"
-        : "最近の発見";
+  const shelfItems: ToolShelfItem<ConsultationDisclosure>[] = [
+    {
+      id: "facts",
+      label: "事実",
+      meta: `${projection.facts.length}件`,
+      icon: <IconListCheck />,
+    },
+    {
+      id: "hints",
+      label: "ヒント",
+      meta: `${projection.hints.length}段階`,
+      icon: <IconBulb />,
+    },
+    {
+      id: "events",
+      label: "履歴",
+      meta: `${projection.recentEvents.length}件`,
+      icon: <IconListDetails />,
+    },
+  ];
 
   return (
     <main className="lab-screen consultation-screen">
@@ -246,13 +262,21 @@ export function SituationConsultation({
             onRefresh={onRefresh}
           />
         ) : null}
-        <header className="consultation-intro">
-          <IconMessageCircleQuestion aria-hidden="true" />
-          <div>
+        <div className="stage-heading-row">
+          <header className="consultation-intro">
+            <span className="stage-eyebrow">状況相談</span>
             <h1>次に確かめることを選ぶ</h1>
-            <p>いま分かっている事実から、次の仮説を1つ選びます。</p>
-          </div>
-        </header>
+          </header>
+          <nav className="disclosure-pulls" aria-label="必要な情報を開く">
+            <DisclosurePull
+              label="相談ツール"
+              icon={<IconBulb />}
+              controls={drawerId}
+              open={activeDisclosure !== null}
+              onClick={() => setActiveDisclosure("hints")}
+            />
+          </nav>
+        </div>
 
         <section className="stage-context" aria-label="現在の目標">
           <IconTargetArrow aria-hidden="true" />
@@ -262,33 +286,6 @@ export function SituationConsultation({
           </div>
         </section>
 
-        <nav className="disclosure-pulls" aria-label="必要な情報を開く">
-          <DisclosurePull
-            label="事実"
-            meta={`${projection.facts.length}件`}
-            icon={<IconListCheck />}
-            controls={drawerId}
-            open={activeDisclosure === "facts"}
-            onClick={() => setActiveDisclosure("facts")}
-          />
-          <DisclosurePull
-            label="ヒント"
-            meta={`${projection.hints.length}段階`}
-            icon={<IconBulb />}
-            controls={drawerId}
-            open={activeDisclosure === "hints"}
-            onClick={() => setActiveDisclosure("hints")}
-          />
-          <DisclosurePull
-            label="最近の発見"
-            meta={`${projection.recentEvents.length}件`}
-            icon={<IconListDetails />}
-            controls={drawerId}
-            open={activeDisclosure === "events"}
-            onClick={() => setActiveDisclosure("events")}
-          />
-        </nav>
-
         {projection.hypotheses.length > 0 ? (
           <>
             <fieldset className="hypothesis-fieldset">
@@ -373,9 +370,17 @@ export function SituationConsultation({
       <DisclosureDrawer
         id={drawerId}
         open={activeDisclosure !== null}
-        title={drawerTitle}
+        title="相談ツール"
         onClose={() => setActiveDisclosure(null)}
       >
+        {activeDisclosure ? (
+          <ToolShelf
+            items={shelfItems}
+            active={activeDisclosure}
+            onSelect={setActiveDisclosure}
+          />
+        ) : null}
+
         {activeDisclosure === "facts" ? (
           <KnownFacts
             facts={projection.facts}
diff --git a/apps/lab-guide/src/styles.css b/apps/lab-guide/src/styles.css
index 363e46d..d4a1b6c 100644
--- a/apps/lab-guide/src/styles.css
+++ b/apps/lab-guide/src/styles.css
@@ -7,3 +7,4 @@
 @import "./styles/disclosure-shell.css";
 @import "./styles/disclosure-themes.css";
 @import "./styles/disclosure-responsive.css";
+@import "./styles/calm-shell.css";
diff --git a/apps/lab-guide/src/styles/calm-shell.css b/apps/lab-guide/src/styles/calm-shell.css
new file mode 100644
index 0000000..a1cc101
--- /dev/null
+++ b/apps/lab-guide/src/styles/calm-shell.css
@@ -0,0 +1,818 @@
+/* Calm shell ------------------------------------------------------------
+   The default view exposes one primary task and one labelled way to ask
+   for more. Legacy theme rules remain available inside the opened shelves. */
+
+:root[data-theme] {
+  --header-height: 56px;
+}
+
+/* Header: brand + one menu --------------------------------------------- */
+
+:root[data-theme] .app-header {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-rows: var(--header-height);
+  align-items: center;
+  height: var(--header-height);
+  padding: 0 clamp(14px, 2.4vw, 30px);
+  border-bottom-width: 1px;
+  box-shadow: none;
+}
+
+:root[data-theme] .brand-lockup {
+  gap: 10px;
+  min-width: 0;
+  padding: 0;
+}
+
+:root[data-theme] .brand-lockup > svg {
+  width: 24px;
+  height: 24px;
+}
+
+:root[data-theme] .brand-name {
+  overflow: hidden;
+  font-family: var(--body);
+  font-size: 17px;
+  font-weight: 760;
+  letter-spacing: -0.035em;
+  text-overflow: ellipsis;
+}
+
+:root[data-theme] .brand-divider {
+  height: 18px;
+}
+
+:root[data-theme] .brand-lab {
+  font-family: var(--body);
+  font-size: 12px;
+  font-weight: 680;
+  letter-spacing: 0;
+}
+
+:root[data-theme] .header-actions {
+  display: flex;
+  grid-column: 2;
+  grid-row: 1;
+  align-items: center;
+  gap: 0;
+  height: auto;
+  padding: 0;
+  background: transparent;
+  border: 0;
+}
+
+.app-menu {
+  position: relative;
+}
+
+.app-menu > summary {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 44px;
+  padding: 0 12px;
+  color: inherit;
+  background: transparent;
+  border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 720;
+  list-style: none;
+  cursor: pointer;
+  user-select: none;
+}
+
+.app-menu > summary::-webkit-details-marker {
+  display: none;
+}
+
+.app-menu > summary svg {
+  width: 20px;
+  height: 20px;
+}
+
+.app-menu[open] > summary {
+  color: var(--primary);
+  background: var(--surface);
+  border-color: var(--primary);
+}
+
+.app-menu-panel {
+  position: absolute;
+  z-index: 90;
+  top: calc(100% + 8px);
+  right: 0;
+  display: grid;
+  gap: 14px;
+  width: min(320px, calc(100vw - 24px));
+  padding: 14px;
+  color: var(--text);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  box-shadow: 0 18px 55px var(--ink-shadow);
+}
+
+:root[data-theme="play"] .app-menu-panel {
+  border: 2px solid #11110e;
+  border-radius: 2px;
+  box-shadow: 5px 5px 0 var(--signal);
+}
+
+:root[data-theme="ops"] .app-menu-panel {
+  background: #08161b;
+  border-color: #31545b;
+  box-shadow: 0 20px 58px rgb(0 0 0 / 45%);
+}
+
+.app-menu-status {
+  display: inline-flex;
+  justify-self: start;
+  min-height: 26px;
+}
+
+.app-menu-section {
+  display: grid;
+  gap: 5px;
+}
+
+.app-menu-label {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  min-height: 24px;
+  color: var(--muted-text);
+  font-family: var(--mono);
+  font-size: 9px;
+  font-weight: 730;
+  letter-spacing: 0.08em;
+}
+
+.app-menu-label svg {
+  width: 16px;
+  height: 16px;
+}
+
+.app-menu-label small {
+  margin-left: auto;
+  font-size: 9px;
+}
+
+.app-menu-section > button,
+.app-menu-end {
+  display: grid;
+  grid-template-columns: 22px minmax(0, 1fr) 18px;
+  gap: 10px;
+  align-items: center;
+  width: 100%;
+  min-height: 44px;
+  padding: 0 10px;
+  color: var(--text);
+  text-align: left;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 3px;
+}
+
+.app-menu-section > button:hover,
+.app-menu-section > button[aria-current="page"],
+.app-menu-section > button[aria-pressed="true"] {
+  background: var(--muted-surface);
+  border-color: var(--border);
+}
+
+.app-menu-section > button[aria-current="page"],
+.app-menu-section > button[aria-pressed="true"] {
+  color: var(--primary-hover);
+  border-color: var(--primary);
+}
+
+.app-menu-section > button svg {
+  width: 20px;
+  height: 20px;
+}
+
+.app-menu-section > button svg:last-child {
+  justify-self: end;
+  width: 16px;
+  height: 16px;
+}
+
+.app-menu-themes {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.app-menu-themes .app-menu-label {
+  grid-column: 1 / -1;
+}
+
+.app-menu-themes > button {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 2px;
+  min-height: 52px;
+  padding: 7px 6px;
+  text-align: center;
+}
+
+.app-menu-themes > button > span {
+  font-family: var(--mono);
+  font-size: 10px;
+  font-weight: 760;
+}
+
+.app-menu-themes > button > small {
+  color: var(--muted-text);
+  font-size: 9px;
+}
+
+.app-menu-end {
+  grid-template-columns: 22px minmax(0, 1fr);
+  color: var(--danger);
+  border-color: color-mix(in srgb, var(--danger) 28%, var(--border));
+}
+
+.app-menu-end svg {
+  width: 20px;
+  height: 20px;
+}
+
+/* Main task surface ----------------------------------------------------- */
+
+:root[data-theme] .map-screen,
+:root[data-theme] .consultation-screen {
+  display: block;
+  height: calc(100dvh - var(--header-height));
+  min-height: 0;
+  overflow: hidden;
+}
+
+:root[data-theme] .map-stage,
+:root[data-theme] .consultation-stage {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  margin: 0 auto;
+  background-color: var(--canvas);
+}
+
+:root[data-theme] .map-stage {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  max-width: 1540px;
+  padding: clamp(14px, 2.2vh, 22px) clamp(18px, 3.2vw, 48px) 16px;
+  overflow: hidden;
+}
+
+:root[data-theme] .consultation-stage {
+  display: block;
+  max-width: 920px;
+  padding: clamp(18px, 3vh, 30px) clamp(20px, 4vw, 48px) 32px;
+  overflow-y: auto;
+}
+
+.stage-heading-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 18px;
+  align-items: end;
+}
+
+:root[data-theme] .stage-intro,
+:root[data-theme] .consultation-intro {
+  min-width: 0;
+  padding: 0;
+  border: 0;
+}
+
+:root[data-theme] .stage-intro::before,
+:root[data-theme] .consultation-intro::before {
+  display: none;
+}
+
+.stage-eyebrow {
+  display: block;
+  margin-bottom: 3px;
+  color: var(--muted-text);
+  font-family: var(--mono);
+  font-size: 9px;
+  font-weight: 740;
+  letter-spacing: 0.1em;
+}
+
+:root[data-theme] .stage-intro h1,
+:root[data-theme] .consultation-intro h1 {
+  margin: 0;
+  font-family: var(--heading);
+  font-size: clamp(22px, 2.2vw, 30px);
+  font-weight: 680;
+  line-height: 1.32;
+  letter-spacing: -0.02em;
+}
+
+:root[data-theme] .stage-context {
+  display: grid;
+  grid-template-columns: 24px minmax(0, 1fr) auto;
+  gap: 10px;
+  align-items: center;
+  min-height: 46px;
+  padding: 7px 12px;
+  margin: 0;
+  color: var(--text);
+  background: color-mix(in srgb, var(--surface) 72%, transparent);
+  border: 0;
+  border-left: 2px solid var(--primary);
+}
+
+:root[data-theme] .stage-context > svg {
+  width: 21px;
+  height: 21px;
+}
+
+:root[data-theme] .stage-context div > small {
+  margin-bottom: 0;
+  font-size: 8px;
+}
+
+:root[data-theme] .stage-context strong {
+  overflow: hidden;
+  font-size: 12px;
+  line-height: 1.4;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:root[data-theme] .stage-context > span {
+  min-width: 52px;
+  padding: 4px 6px;
+  font-size: 10px;
+}
+
+/* One labelled pull ----------------------------------------------------- */
+
+:root[data-theme] .disclosure-pulls {
+  display: block;
+  min-height: 44px;
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+}
+
+:root[data-theme] .disclosure-pull {
+  display: grid;
+  grid-template-columns: 19px auto;
+  gap: 7px;
+  min-height: 44px;
+  padding: 0 12px;
+}
+
+:root[data-theme] .disclosure-pull-cord {
+  top: -13px;
+  left: 22px;
+  height: 12px;
+}
+
+:root[data-theme] .disclosure-pull-meta {
+  display: none;
+}
+
+/* Map gets the remaining viewport -------------------------------------- */
+
+.map-workspace {
+  position: relative;
+  flex: 1 1 auto;
+  display: flex;
+  min-width: 0;
+  min-height: 260px;
+  overflow: hidden;
+  background: color-mix(in srgb, var(--surface) 56%, transparent);
+  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
+  border-radius: 5px;
+  flex-direction: column;
+}
+
+:root[data-theme="play"] .map-workspace {
+  background: color-mix(in srgb, var(--surface) 68%, transparent);
+  border: 2px solid #11110e;
+  border-radius: 2px;
+}
+
+:root[data-theme="ops"] .map-workspace {
+  border-color: #203b42;
+  border-radius: 2px;
+}
+
+:root[data-theme="focus"] .map-workspace {
+  background: transparent;
+  border-width: 1px 0;
+  border-radius: 0;
+}
+
+:root[data-theme] .map-workspace .map-canvas {
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  margin: 0;
+}
+
+:root[data-theme] .selected-node-brief {
+  flex: 0 0 auto;
+  display: grid;
+  grid-template-columns: 40px minmax(0, 1fr) auto auto;
+  gap: 11px;
+  align-items: center;
+  min-height: 62px;
+  padding: 8px 10px;
+  margin: 0;
+  border-width: 1px;
+  border-radius: 4px;
+  box-shadow: none;
+}
+
+:root[data-theme] .selected-node-symbol {
+  width: 38px;
+  height: 38px;
+}
+
+:root[data-theme] .selected-node-symbol svg {
+  width: 22px;
+  height: 22px;
+}
+
+:root[data-theme] .selected-node-copy small {
+  font-size: 8px;
+}
+
+:root[data-theme] .selected-node-copy strong {
+  margin-top: 1px;
+  font-size: 13px;
+}
+
+:root[data-theme] .selected-node-progress {
+  font-size: 9px;
+}
+
+:root[data-theme] .selected-node-brief > button {
+  min-height: 44px;
+  box-shadow: none;
+}
+
+/* Drawer navigation appears only after the user asks ------------------- */
+
+.tool-shelf-nav {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 6px;
+  padding-bottom: 16px;
+  margin-bottom: 18px;
+  border-bottom: 1px solid var(--border);
+}
+
+.tool-shelf-nav > button {
+  display: grid;
+  grid-template-columns: 20px minmax(0, 1fr);
+  gap: 2px 6px;
+  align-items: center;
+  min-width: 0;
+  min-height: 54px;
+  padding: 7px 6px;
+  color: var(--muted-text);
+  text-align: left;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 3px;
+}
+
+.tool-shelf-nav > button:hover,
+.tool-shelf-nav > button[aria-pressed="true"] {
+  color: var(--text);
+  background: var(--muted-surface);
+  border-color: var(--border);
+}
+
+.tool-shelf-nav > button[aria-pressed="true"] {
+  color: var(--primary-hover);
+  border-color: var(--primary);
+}
+
+.tool-shelf-icon {
+  display: grid;
+  grid-row: 1 / 3;
+  place-items: center;
+}
+
+.tool-shelf-icon svg {
+  width: 19px;
+  height: 19px;
+}
+
+.tool-shelf-nav > button > span:not(.tool-shelf-icon) {
+  overflow: hidden;
+  font-size: 10px;
+  font-weight: 720;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tool-shelf-nav > button small {
+  color: var(--muted-text);
+  font-family: var(--mono);
+  font-size: 8px;
+}
+
+.drawer-map-legend {
+  padding-top: 18px;
+  margin-top: 20px;
+  border-top: 1px solid var(--border);
+}
+
+.drawer-map-legend h3 {
+  margin: 0 0 10px;
+  font-size: 12px;
+}
+
+.drawer-map-legend > div {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px 18px;
+  color: var(--muted-text);
+  font-size: 11px;
+}
+
+.drawer-map-legend span {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.drawer-map-legend svg {
+  width: 18px;
+  height: 18px;
+}
+
+/* Consultation: necessary choice, not stacked exposition ---------------- */
+
+:root[data-theme] .hypothesis-fieldset {
+  padding-top: 20px;
+}
+
+:root[data-theme] .hypothesis-fieldset legend {
+  padding: 0 0 12px;
+  font-size: 16px;
+}
+
+:root[data-theme] .hypothesis-option {
+  min-height: 66px;
+  font-size: 15px;
+}
+
+:root[data-theme] .hypothesis-explanation {
+  grid-template-columns: 42px minmax(0, 1fr);
+  gap: 14px;
+  min-height: 82px;
+  padding: 12px 16px;
+  margin-top: 12px;
+}
+
+:root[data-theme] .hypothesis-explanation > svg {
+  width: 38px;
+  height: 38px;
+  padding: 9px;
+}
+
+:root[data-theme] .hypothesis-explanation h2 {
+  margin-bottom: 3px;
+  font-size: 14px;
+}
+
+:root[data-theme] .hypothesis-explanation p {
+  font-size: 12px;
+}
+
+:root[data-theme] .consultation-actions {
+  gap: 10px;
+  margin-top: 14px;
+}
+
+:root[data-theme] .consultation-actions .primary-action,
+:root[data-theme] .consultation-actions .secondary-action {
+  min-width: 0;
+}
+
+/* Responsive ----------------------------------------------------------- */
+
+@media (max-width: 900px) {
+  :root[data-theme] .app-header {
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-rows: var(--header-height);
+  }
+
+  :root[data-theme] .header-actions {
+    grid-column: 2;
+    grid-row: 1;
+    padding: 0;
+  }
+
+  :root[data-theme] .map-screen,
+  :root[data-theme] .consultation-screen {
+    height: calc(100dvh - var(--header-height));
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  :root[data-theme] .map-stage,
+  :root[data-theme] .consultation-stage {
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    padding: 14px 16px 16px;
+    overflow-y: auto;
+  }
+
+  :root[data-theme] .map-stage {
+    display: flex;
+  }
+
+  .stage-heading-row {
+    gap: 10px;
+  }
+
+  :root[data-theme] .stage-intro h1,
+  :root[data-theme] .consultation-intro h1 {
+    font-size: clamp(20px, 6vw, 25px);
+  }
+
+  :root[data-theme] .disclosure-pulls {
+    min-height: 44px;
+    padding: 0;
+    margin: 0;
+  }
+
+  :root[data-theme] .disclosure-pull {
+    width: auto;
+  }
+
+  .map-workspace {
+    order: 4;
+    flex-basis: 300px;
+    min-height: 300px;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+
+  :root[data-theme] .selected-node-brief {
+    order: 3;
+  }
+
+  .map-stage > .success-callout {
+    order: 2;
+  }
+
+  .map-stage > .stage-heading-row {
+    order: 0;
+  }
+
+  .map-stage > .stage-context,
+  .map-stage > .connection-banner {
+    order: 1;
+  }
+
+  :root[data-theme] .consultation-intro {
+    padding: 0;
+  }
+
+  .tool-shelf-nav {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  :root[data-theme] .disclosure-drawer .known-facts,
+  :root[data-theme] .disclosure-drawer .investigation-rail,
+  :root[data-theme] .disclosure-drawer .hint-rail,
+  :root[data-theme] .disclosure-drawer .event-strip {
+    display: block;
+  }
+}
+
+@media (max-width: 560px) {
+  :root[data-theme] .app-header {
+    padding-inline: 12px;
+  }
+
+  :root[data-theme] .brand-lockup {
+    gap: 7px;
+  }
+
+  :root[data-theme] .brand-lockup > svg {
+    width: 21px;
+    height: 21px;
+  }
+
+  :root[data-theme] .brand-name {
+    font-size: 15px;
+  }
+
+  :root[data-theme] .brand-lab {
+    font-size: 10px;
+  }
+
+  .app-menu > summary {
+    min-height: 44px;
+    padding-inline: 10px;
+  }
+
+  .app-menu > summary span {
+    font-size: 11px;
+  }
+
+  :root[data-theme] .map-stage,
+  :root[data-theme] .consultation-stage {
+    gap: 10px;
+    padding: 12px;
+  }
+
+  .stage-eyebrow {
+    margin-bottom: 2px;
+  }
+
+  :root[data-theme] .stage-context {
+    grid-template-columns: 20px minmax(0, 1fr) auto;
+    gap: 7px;
+    min-height: 42px;
+    padding: 6px 8px;
+  }
+
+  :root[data-theme] .stage-context > svg {
+    width: 18px;
+    height: 18px;
+  }
+
+  :root[data-theme] .stage-context strong {
+    font-size: 11px;
+  }
+
+  :root[data-theme] .selected-node-brief {
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 8px;
+    min-height: 58px;
+    padding: 7px 8px;
+  }
+
+  :root[data-theme] .selected-node-symbol,
+  :root[data-theme] .selected-node-progress {
+    display: none;
+  }
+
+  :root[data-theme] .selected-node-brief > button {
+    grid-column: auto;
+    justify-self: end;
+    width: auto;
+    min-height: 44px;
+    padding-inline: 11px;
+  }
+
+  .map-workspace {
+    flex-basis: 280px;
+    min-height: 280px;
+  }
+
+  :root[data-theme] .hypothesis-fieldset {
+    padding-top: 16px;
+  }
+
+  :root[data-theme] .hypothesis-option {
+    grid-template-columns: 30px minmax(0, 1fr) 20px;
+    gap: 8px;
+    min-height: 58px;
+    padding: 9px 10px;
+    font-size: 13px;
+  }
+
+  :root[data-theme] .hypothesis-option > svg:first-child {
+    width: 26px;
+    height: 26px;
+  }
+
+  :root[data-theme] .hypothesis-explanation {
+    display: block;
+    min-height: 0;
+    padding: 10px 12px;
+  }
+
+  :root[data-theme] .hypothesis-explanation > svg {
+    display: none;
+  }
+
+  :root[data-theme] .consultation-actions {
+    display: grid;
+    grid-template-columns: 1fr auto;
+  }
+
+  :root[data-theme] .consultation-actions .primary-action,
+  :root[data-theme] .consultation-actions .secondary-action {
+    min-width: 0;
+    padding-inline: 10px;
+  }
+}