From 045b1d758e986fa860227e30c2f8a18fb3d8cc34 Mon Sep 17 00:00:00 2001
From: AAA <35992542+TNTcraftHIM@users.noreply.github.com>
Date: Sat, 29 Aug 2026 03:22:30 +0800
Subject: [PATCH] feat(ui): integrate living-room UI (#321)

---
 docs/product/presentation-lifecycle.md        |   27 +
 index.html                                    |   10 +-
 package-lock.json                             |   10 -
 package.json                                  |    1 -
 src/client/App.tsx                            |  198 +-
 src/client/components/AppHeader.tsx           |   16 -
 .../components/ConnectionDetailsToggle.tsx    |   28 -
 src/client/components/RoomCode.tsx            |  154 -
 src/client/components/RoomCodeEntry.tsx       |   74 -
 src/client/components/StageEntryActions.tsx   |   51 -
 src/client/components/StatsGrid.tsx           |  279 --
 src/client/components/StatusBadge.tsx         |   79 -
 src/client/components/TopologyView.tsx        |   58 -
 src/client/components/connection-details.ts   |    7 +-
 src/client/components/living/Comic.tsx        | 1296 +++++++++
 src/client/components/living/ComicTooltip.tsx |  246 ++
 src/client/components/living/Couch.tsx        |  149 +
 src/client/components/living/Header.tsx       |   94 +
 src/client/components/living/Metrics.tsx      |  257 ++
 src/client/components/living/PawnDetail.tsx   |  139 +
 src/client/components/living/RoomChip.tsx     |  153 +
 src/client/components/living/RouteTree.tsx    |  321 +++
 src/client/components/living/Stage.tsx        |  115 +
 src/client/components/living/hints/index.tsx  |  128 +
 src/client/components/living/hints/set1.tsx   |  294 ++
 src/client/components/living/hints/set2.tsx   |  537 ++++
 src/client/components/living/hints/set3.tsx   |  416 +++
 src/client/components/living/hints/set4.tsx   |  441 +++
 src/client/components/living/primitives.tsx   |  306 ++
 src/client/components/status-badge-model.ts   |    8 +-
 src/client/lib/api.ts                         |   45 +-
 src/client/lib/display-name.ts                |   12 +-
 src/client/main.tsx                           |    3 +
 src/client/media/host-sfu-route.ts            |   17 +-
 src/client/media/quality.ts                   |   69 +-
 src/client/media/viewer-presentation.ts       |   86 +-
 src/client/pages/HostPage.tsx                 | 2252 +++++++++------
 src/client/pages/JoinPage.tsx                 |  102 +-
 src/client/pages/ViewerPage.tsx               | 1050 ++++---
 src/client/pages/host-page-notices.ts         |   71 +-
 src/client/sfu/publisher.ts                   |    9 +-
 src/client/styles.css                         | 2549 +++++++----------
 src/client/ui/copy.ts                         |  842 ++++++
 src/client/ui/icons.tsx                       |  109 +
 src/client/ui/theme.ts                        |   56 +
 src/client/webrtc/host-peer.ts                |   27 +-
 src/client/webrtc/viewer-peer.ts              |    9 +-
 tests/connection-details-toggle.test.ts       |   29 -
 tests/connection-details.test.ts              |    8 +-
 tests/copy.test.ts                            |   49 +
 tests/host-page-notice.test.ts                |    3 +
 tests/living-components.test.ts               |   55 +
 ...tats-grid.test.ts => metric-cells.test.ts} |   99 +-
 tests/route-tree.test.ts                      |  124 +
 tests/stage-entry-actions.test.ts             |   73 -
 tests/status-badge.test.ts                    |   16 +-
 tests/topology-view.test.ts                   |   56 -
 tests/viewer-presentation.test.ts             |   24 +-
 58 files changed, 9758 insertions(+), 3978 deletions(-)
 delete mode 100644 src/client/components/AppHeader.tsx
 delete mode 100644 src/client/components/ConnectionDetailsToggle.tsx
 delete mode 100644 src/client/components/RoomCode.tsx
 delete mode 100644 src/client/components/RoomCodeEntry.tsx
 delete mode 100644 src/client/components/StageEntryActions.tsx
 delete mode 100644 src/client/components/StatsGrid.tsx
 delete mode 100644 src/client/components/StatusBadge.tsx
 delete mode 100644 src/client/components/TopologyView.tsx
 create mode 100644 src/client/components/living/Comic.tsx
 create mode 100644 src/client/components/living/ComicTooltip.tsx
 create mode 100644 src/client/components/living/Couch.tsx
 create mode 100644 src/client/components/living/Header.tsx
 create mode 100644 src/client/components/living/Metrics.tsx
 create mode 100644 src/client/components/living/PawnDetail.tsx
 create mode 100644 src/client/components/living/RoomChip.tsx
 create mode 100644 src/client/components/living/RouteTree.tsx
 create mode 100644 src/client/components/living/Stage.tsx
 create mode 100644 src/client/components/living/hints/index.tsx
 create mode 100644 src/client/components/living/hints/set1.tsx
 create mode 100644 src/client/components/living/hints/set2.tsx
 create mode 100644 src/client/components/living/hints/set3.tsx
 create mode 100644 src/client/components/living/hints/set4.tsx
 create mode 100644 src/client/components/living/primitives.tsx
 create mode 100644 src/client/ui/copy.ts
 create mode 100644 src/client/ui/icons.tsx
 create mode 100644 src/client/ui/theme.ts
 delete mode 100644 tests/connection-details-toggle.test.ts
 create mode 100644 tests/copy.test.ts
 create mode 100644 tests/living-components.test.ts
 rename tests/{stats-grid.test.ts => metric-cells.test.ts} (68%)
 create mode 100644 tests/route-tree.test.ts
 delete mode 100644 tests/stage-entry-actions.test.ts
 delete mode 100644 tests/topology-view.test.ts

diff --git a/docs/product/presentation-lifecycle.md b/docs/product/presentation-lifecycle.md
index c808e3c..ac137f0 100644
--- a/docs/product/presentation-lifecycle.md
+++ b/docs/product/presentation-lifecycle.md
@@ -17,6 +17,33 @@ room identity, current state, roster, and one manual media-reconnect action.
 Controls and text must remain usable without overlap or horizontal overflow on
 desktop and mobile viewports.
 
+## Visual Language
+
+The interface presents one small shared living room rather than an operations
+dashboard. The television is the media stage, the couch and pawns make presence
+spatial, the shelf separates watching from controls, and the room display keeps
+the four-digit code prominent. This metaphor must clarify the same product
+state on Host and Viewer pages; decoration never creates a second state model.
+
+Chinese, English, and pure-visual modes are three expressions of the same typed
+state and command catalog. A fresh Browser starts in visual mode and persists
+an explicit later choice. Text modes use concise copy. Visual mode uses one
+consistent stroke language for single concepts, small panel comics for causes
+and sequences, and literal scene objects for people, rooms, and media. Glyphs do
+not form sentences. Universal digits, transport symbols, URLs, and measured
+values remain literal when users need the data.
+
+Motion explains entry, transition, progress, and control feedback. Stable state
+stays still; ambient animation and motion added only for ornament are outside
+the language. All meaning remains available with reduced motion. Functional
+controls remain native buttons or inputs with localized accessible names, and
+hover, keyboard focus, and touch receive equivalent guidance.
+
+The visual hierarchy, interaction ownership, and information order remain the
+same across themes and viewport sizes. Responsive layout may reflow or scroll a
+bounded visualization, but it must not hide a primary action, truncate an
+essential value, overlap controls, or change product semantics.
+
 ## Playback Ownership
 
 One native `<video>` element owns Viewer play/pause, volume, mute, and fullscreen.
diff --git a/index.html b/index.html
index be8b31f..8c7b31e 100644
--- a/index.html
+++ b/index.html
@@ -3,9 +3,17 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="theme-color" content="#121513" />
+    <meta name="theme-color" content="#141e29" media="(prefers-color-scheme: dark)" />
+    <meta name="theme-color" content="#e9f2ee" media="(prefers-color-scheme: light)" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <title>Screener</title>
+    <script>
+      try {
+        var theme = localStorage.getItem("screener:ui-theme") ||
+          (matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
+        document.documentElement.dataset.theme = theme;
+      } catch (e) {}
+    </script>
   </head>
   <body>
     <div id="root"></div>
diff --git a/package-lock.json b/package-lock.json
index 4742254..627b15a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,6 @@
       "dependencies": {
         "livekit-client": "2.22.0",
         "livekit-server-sdk": "2.17.0",
-        "lucide-react": "1.31.0",
         "react": "19.2.8",
         "react-dom": "19.2.8",
         "sdp-transform": "2.15.0",
@@ -1501,15 +1500,6 @@
         "url": "https://tidelift.com/funding/github/npm/loglevel"
       }
     },
-    "node_modules/lucide-react": {
-      "version": "1.31.0",
-      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.31.0.tgz",
-      "integrity": "sha512-G8u2eEtoHUnUa9f8lbvqDhCiORMnYLdUEo06EEG9MQvHQrInKcX3Pa2TH39MM5qyzRcWETxB0+aOwAPI1g1kEg==",
-      "license": "ISC",
-      "peerDependencies": {
-        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
-      }
-    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
diff --git a/package.json b/package.json
index d52e652..ee6eebd 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,6 @@
   "dependencies": {
     "livekit-client": "2.22.0",
     "livekit-server-sdk": "2.17.0",
-    "lucide-react": "1.31.0",
     "react": "19.2.8",
     "react-dom": "19.2.8",
     "sdp-transform": "2.15.0",
diff --git a/src/client/App.tsx b/src/client/App.tsx
index 0a35130..8d3aff3 100644
--- a/src/client/App.tsx
+++ b/src/client/App.tsx
@@ -1,4 +1,3 @@
-import { KeyRound, LoaderCircle } from "lucide-react";
 import { useEffect, useState, type FormEvent } from "react";
 import {
   ApiError,
@@ -10,6 +9,11 @@ import { parseAppRoute, readViewerRoute } from "./lib/session";
 import { HostPage } from "./pages/HostPage";
 import { JoinPage } from "./pages/JoinPage";
 import { ViewerPage } from "./pages/ViewerPage";
+import { AppHeader } from "./components/living/Header";
+import { Btn, Pill } from "./components/living/primitives";
+import { ComicTooltip } from "./components/living/ComicTooltip";
+import { Glyph, type GlyphName } from "./ui/icons";
+import { useCopy } from "./ui/copy";
 
 const appRoute = parseAppRoute(window.location.pathname);
 const viewerRoute = appRoute.kind === "viewer" ? readViewerRoute() : null;
@@ -27,10 +31,8 @@ function stateFromStatus(status: SiteAccessStatus): AccessState {
     : { kind: "required", error: null };
 }
 
-function readableError(error: unknown): string {
-  return error instanceof ApiError
-    ? error.message
-    : "无法连接站点访问服务，请重试";
+function readableError(error: unknown, t: (key: "gate.connectFailed") => string): string {
+  return error instanceof ApiError ? error.message : t("gate.connectFailed");
 }
 
 export function App() {
@@ -48,9 +50,49 @@ export function App() {
     return <SiteAccessGate surface="join" />;
   }
   return appRoute.kind === "malformed-room" ? (
-    <MalformedRoomRoute />
+    <StaticRoute icon="door" titleKey="gate.malformed" hintKey="gate.malformedHint" />
   ) : (
-    <UnavailableRoute />
+    <StaticRoute icon="alert" titleKey="gate.unavailableRoute" />
+  );
+}
+
+function StaticRoute({
+  icon,
+  titleKey,
+  hintKey,
+}: {
+  icon: GlyphName;
+  titleKey: "gate.malformed" | "gate.unavailableRoute";
+  hintKey?: "gate.malformedHint";
+}) {
+  const { t, vis } = useCopy();
+  const panelIcon = (
+    <span className="lr-tv-big" style={{ borderColor: "var(--ink)", color: "var(--ink)", background: "var(--paper)" }}>
+      <Glyph name={icon} size={30} />
+    </span>
+  );
+  return (
+    <div className="lr-app">
+      <AppHeader />
+      <main className="lr-join">
+        <div className="lr-join-panel">
+          {vis ? (
+            <ComicTooltip kind="warning">{panelIcon}</ComicTooltip>
+          ) : (
+            panelIcon
+          )}
+          {vis ? null : (
+            <div className="lr-access-text">
+              <h1>{t(titleKey)}</h1>
+              {hintKey ? <p>{t(hintKey)}</p> : null}
+            </div>
+          )}
+          <span className="visually-hidden" role="alert">
+            {t(titleKey)}
+          </span>
+        </div>
+      </main>
+    </div>
   );
 }
 
@@ -59,6 +101,7 @@ function SiteAccessGate({
 }: {
   surface: "host" | "join" | "viewer";
 }) {
+  const { t, vis } = useCopy();
   const [access, setAccess] = useState<AccessState>({ kind: "checking" });
   const [password, setPassword] = useState("");
   const [submitting, setSubmitting] = useState(false);
@@ -69,7 +112,7 @@ function SiteAccessGate({
       (status) => active && setAccess(stateFromStatus(status)),
       (error: unknown) =>
         active &&
-        setAccess({ kind: "unavailable", message: readableError(error) }),
+        setAccess({ kind: "unavailable", message: readableError(error, t) }),
     );
     return () => {
       active = false;
@@ -111,7 +154,7 @@ function SiteAccessGate({
     try {
       setAccess(stateFromStatus(await getSiteAccess()));
     } catch (error) {
-      setAccess({ kind: "unavailable", message: readableError(error) });
+      setAccess({ kind: "unavailable", message: readableError(error, t) });
     }
   }
 
@@ -120,7 +163,7 @@ function SiteAccessGate({
     const submittedPassword = password;
     setPassword("");
     if (!submittedPassword.trim()) {
-      setAccess({ kind: "required", error: "请输入站点口令" });
+      setAccess({ kind: "required", error: t("gate.hint") });
       return;
     }
 
@@ -134,8 +177,8 @@ function SiteAccessGate({
         kind: "required",
         error:
           error instanceof ApiError && error.status === 401
-            ? "站点口令不正确，请重试"
-            : readableError(error),
+            ? t("gate.wrong")
+            : readableError(error, t),
       });
     } finally {
       setSubmitting(false);
@@ -152,94 +195,79 @@ function SiteAccessGate({
     return (
       <HostPage
         onAuthorizationRequired={() =>
-          setAccess({ kind: "required", error: "站点访问已失效，请重新验证" })
+          setAccess({ kind: "required", error: t("gate.expired") })
         }
       />
     );
   }
 
   return (
-    <div className="app-shell">
-      <main className="access-workspace access-workspace-full">
+    <div className="lr-app">
+      <AppHeader />
+      <main className="lr-join">
         {access.kind === "checking" ? (
-          <div className="access-loading" role="status">
-            <LoaderCircle size={20} className="spin" aria-hidden="true" />
-            正在验证站点访问
+          <div className="lr-loading" role="status">
+            <Glyph name="loader" size={22} className="lr-spin" />
+            {vis ? null : (
+              <span className="lr-tv-msg" style={{ color: "var(--ink)", textShadow: "none" }}>
+                {t("gate.checking")}
+              </span>
+            )}
           </div>
         ) : access.kind === "unavailable" ? (
-          <section className="access-panel" aria-labelledby="access-heading">
-            <h1 id="access-heading">暂时无法验证站点访问</h1>
-            <p className="access-error" role="alert">
-              {access.message}
-            </p>
-            <button
-              className="button button-secondary"
-              type="button"
-              onClick={() => void retry()}
-            >
-              重试
-            </button>
-          </section>
-        ) : (
-          <form className="access-panel" onSubmit={(event) => void submit(event)}>
-            <div>
-              <h1>站点访问</h1>
-              <p className="section-meta">请输入站点口令</p>
-            </div>
-            <label className="token-field">
-              <span>站点口令</span>
-              <span className="input-with-icon">
-                <KeyRound size={16} aria-hidden="true" />
-                <input
-                  type="password"
-                  value={password}
-                  disabled={submitting}
-                  autoComplete="current-password"
-                  autoFocus
-                  onChange={(event) => setPassword(event.target.value)}
-                />
-              </span>
-            </label>
-            {access.error && (
-              <p className="access-error" role="alert">
-                {access.error}
-              </p>
+          <div className="lr-join-panel">
+            <span className="lr-tv-big" style={{ borderColor: "var(--ink)", color: "var(--ink)", background: "var(--paper)" }}>
+              <Glyph name="wifiOff" size={30} />
+            </span>
+            {vis ? (
+              <span className="visually-hidden" role="alert">{access.message}</span>
+            ) : (
+              <div className="lr-access-text">
+                <h1>{t("gate.unavailable")}</h1>
+                <p role="alert">{access.message}</p>
+              </div>
             )}
-            <button
-              className="button button-primary"
+            <Btn icon="refresh" title="common.retry" cap="common.retry" onClick={() => void retry()} />
+          </div>
+        ) : (
+          <form className="lr-join-panel" onSubmit={(event) => void submit(event)}>
+            <span className="lr-tv-big" style={{ borderColor: "var(--ink)", color: "var(--ink)", background: "var(--paper)" }}>
+              <Glyph name="key" size={30} draw="gate-key" />
+            </span>
+            {vis ? null : (
+              <div className="lr-access-text">
+                <h1>{t("gate.title")}</h1>
+                <p>{t("gate.hint")}</p>
+              </div>
+            )}
+            <span className="lr-input" style={{ minWidth: 240 }}>
+              <Glyph name="lock" size={17} />
+              <input
+                type="password"
+                value={password}
+                disabled={submitting}
+                autoComplete="current-password"
+                autoFocus
+                aria-label={t("gate.password")}
+                placeholder={vis ? "····" : t("gate.password")}
+                onChange={(event) => setPassword(event.target.value)}
+              />
+            </span>
+            {access.error ? (
+              <Pill icon="alert" tone="bad" label={access.error} alert comic="warning" />
+            ) : null}
+            <Btn
+              icon="arrowRight"
+              title="gate.submit"
+              cap="gate.submit"
+              tone="primary"
               type="submit"
+              hint="hint-password"
               disabled={submitting}
-            >
-              {submitting ? "正在验证" : "进入站点"}
-            </button>
+            />
           </form>
         )}
       </main>
     </div>
   );
 }
-
-function UnavailableRoute() {
-  return (
-    <div className="app-shell">
-      <main className="access-workspace access-workspace-full">
-        <section className="access-panel">
-          <h1>无法访问</h1>
-        </section>
-      </main>
-    </div>
-  );
-}
-
-function MalformedRoomRoute() {
-  return (
-    <div className="app-shell">
-      <main className="access-workspace access-workspace-full">
-        <section className="access-panel">
-          <h1>房间号格式不正确</h1>
-          <p className="section-meta">请输入 1000 至 9999 的四位房间号</p>
-        </section>
-      </main>
-    </div>
-  );
-}
diff --git a/src/client/components/AppHeader.tsx b/src/client/components/AppHeader.tsx
deleted file mode 100644
index 9d17ea5..0000000
--- a/src/client/components/AppHeader.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { MonitorUp } from "lucide-react";
-import type { ReactNode } from "react";
-
-export function AppHeader({ status }: { status: ReactNode }) {
-  return (
-    <header className="app-header">
-      <a className="brand" href="/" aria-label="Screener 首页">
-        <span className="brand-mark" aria-hidden="true">
-          <MonitorUp size={19} />
-        </span>
-        <span>Screener</span>
-      </a>
-      {status && <div className="header-status">{status}</div>}
-    </header>
-  );
-}
diff --git a/src/client/components/ConnectionDetailsToggle.tsx b/src/client/components/ConnectionDetailsToggle.tsx
deleted file mode 100644
index 5846d5f..0000000
--- a/src/client/components/ConnectionDetailsToggle.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import type { ChangeEvent } from "react";
-
-interface ConnectionDetailsToggleProps {
-  checked: boolean;
-  onChange: (checked: boolean) => void;
-}
-
-export function ConnectionDetailsToggle({
-  checked,
-  onChange,
-}: ConnectionDetailsToggleProps) {
-  return (
-    <div className="connection-details-toggle">
-      <label
-        title="展开或隐藏连接的技术指标"
-      >
-        <input
-          type="checkbox"
-          checked={checked}
-          onChange={(event: ChangeEvent<HTMLInputElement>) =>
-            onChange(event.currentTarget.checked)
-          }
-        />
-        <span>显示连接详情</span>
-      </label>
-    </div>
-  );
-}
diff --git a/src/client/components/RoomCode.tsx b/src/client/components/RoomCode.tsx
deleted file mode 100644
index 78ea2cb..0000000
--- a/src/client/components/RoomCode.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-import { Check, CircleAlert, Copy, Hash, RefreshCw, X } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
-import { copyRoomCode } from "./room-code";
-
-type CopyState = "idle" | "copied" | "failed";
-
-export function RoomCode({
-  roomId,
-  onReplace,
-  replaceDisabled = false,
-}: {
-  roomId: string;
-  onReplace?: () => void | Promise<void>;
-  replaceDisabled?: boolean;
-}) {
-  const [copyState, setCopyState] = useState<CopyState>("idle");
-  const [confirmingReplace, setConfirmingReplace] = useState(false);
-  const [replacePending, setReplacePending] = useState(false);
-  const resetTimerRef = useRef<number | null>(null);
-  const mountedRef = useRef(false);
-
-  useEffect(() => {
-    mountedRef.current = true;
-    return () => {
-      mountedRef.current = false;
-      if (resetTimerRef.current !== null) {
-        window.clearTimeout(resetTimerRef.current);
-      }
-    };
-  }, []);
-
-  async function copy(): Promise<void> {
-    if (resetTimerRef.current !== null) {
-      window.clearTimeout(resetTimerRef.current);
-      resetTimerRef.current = null;
-    }
-    try {
-      await copyRoomCode(roomId);
-      if (!mountedRef.current) {
-        return;
-      }
-      setCopyState("copied");
-      resetTimerRef.current = window.setTimeout(() => {
-        setCopyState("idle");
-        resetTimerRef.current = null;
-      }, 1_500);
-    } catch {
-      if (mountedRef.current) {
-        setCopyState("failed");
-        resetTimerRef.current = window.setTimeout(() => {
-          setCopyState("idle");
-          resetTimerRef.current = null;
-        }, 1_500);
-      }
-    }
-  }
-
-  async function replace(): Promise<void> {
-    if (!onReplace || replacePending || replaceDisabled) {
-      return;
-    }
-    setReplacePending(true);
-    try {
-      await onReplace();
-    } finally {
-      if (mountedRef.current) {
-        setReplacePending(false);
-        setConfirmingReplace(false);
-      }
-    }
-  }
-
-  const copyLabel =
-    copyState === "copied"
-      ? "房间号已复制"
-      : copyState === "failed"
-        ? "复制失败，请手动复制房间号"
-        : `复制房间号 ${roomId}`;
-
-  return (
-    <span className="room-code" aria-label={`房间号 ${roomId}`}>
-      <Hash size={15} aria-hidden="true" />
-      <span className="room-code-label">房间号</span>
-      <strong>{roomId}</strong>
-      <span className="room-code-actions">
-        {onReplace && confirmingReplace ? (
-          <>
-            <button
-              className="room-code-copy"
-              type="button"
-              title={replacePending ? "正在更换房间号" : "确认更换房间号"}
-              aria-label={replacePending ? "正在更换房间号" : "确认更换房间号"}
-              disabled={replacePending || replaceDisabled}
-              onClick={() => void replace()}
-            >
-              {replacePending ? (
-                <RefreshCw size={15} className="spin" aria-hidden="true" />
-              ) : (
-                <Check size={15} aria-hidden="true" />
-              )}
-            </button>
-            <button
-              className="room-code-copy"
-              type="button"
-              title="取消更换房间号"
-              aria-label="取消更换房间号"
-              disabled={replacePending}
-              onClick={() => setConfirmingReplace(false)}
-            >
-              <X size={15} aria-hidden="true" />
-            </button>
-          </>
-        ) : (
-          <>
-            {onReplace && (
-              <button
-                className="room-code-copy"
-                type="button"
-                title="更换房间号"
-                aria-label="更换房间号"
-                disabled={replaceDisabled}
-                onClick={() => setConfirmingReplace(true)}
-              >
-                <RefreshCw size={15} aria-hidden="true" />
-              </button>
-            )}
-            <button
-              className={`room-code-copy${copyState === "failed" ? " is-failed" : ""}`}
-              type="button"
-              title={copyLabel}
-              aria-label={copyLabel}
-              onClick={() => void copy()}
-            >
-              {copyState === "copied" ? (
-                <Check size={15} aria-hidden="true" />
-              ) : copyState === "failed" ? (
-                <CircleAlert size={15} aria-hidden="true" />
-              ) : (
-                <Copy size={15} aria-hidden="true" />
-              )}
-            </button>
-          </>
-        )}
-      </span>
-      <span className="visually-hidden" role="status" aria-live="polite">
-        {copyState === "copied"
-          ? "房间号已复制"
-          : copyState === "failed"
-            ? "房间号复制失败"
-            : ""}
-      </span>
-    </span>
-  );
-}
diff --git a/src/client/components/RoomCodeEntry.tsx b/src/client/components/RoomCodeEntry.tsx
deleted file mode 100644
index 7add106..0000000
--- a/src/client/components/RoomCodeEntry.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { ArrowRight, Hash } from "lucide-react";
-import { useState, type FormEvent } from "react";
-import { roomRouteForExplicitEntry } from "../lib/session";
-
-interface RoomCodeEntryProps {
-  id: string;
-  autoFocus?: boolean;
-  inline?: boolean;
-}
-
-export function RoomCodeEntry({ id, autoFocus = false, inline = false }: RoomCodeEntryProps) {
-  const [roomId, setRoomId] = useState("");
-  const [error, setError] = useState<string | null>(null);
-  const inputId = `${id}-input`;
-
-  function join(event: FormEvent<HTMLFormElement>): void {
-    event.preventDefault();
-    const route = roomRouteForExplicitEntry(roomId);
-    if (!route) {
-      setError("请输入 1000 至 9999 的四位房间号");
-      return;
-    }
-    window.location.assign(route);
-  }
-
-  return (
-    <form
-      id={id}
-      className={inline ? "room-code-entry is-inline" : "access-panel"}
-      onSubmit={join}
-    >
-      {!inline && (
-        <div>
-          <h1>加入房间</h1>
-          <p className="section-meta">输入分享者提供的房间号</p>
-        </div>
-      )}
-      <div className="token-field">
-        <label className={inline ? "visually-hidden" : "field-label"} htmlFor={inputId}>
-          房间号
-        </label>
-        <span className="input-with-icon">
-          <Hash size={16} aria-hidden="true" />
-          <input
-            id={inputId}
-            value={roomId}
-            inputMode="numeric"
-            autoComplete="off"
-            autoFocus={autoFocus}
-            placeholder={inline ? "房间号" : undefined}
-            aria-invalid={error ? "true" : undefined}
-            onChange={(event) => {
-              setRoomId(event.target.value);
-              setError(null);
-            }}
-          />
-        </span>
-      </div>
-      {error && (
-        <p className="access-error" role="alert">
-          {error}
-        </p>
-      )}
-      <button
-        className={inline ? "icon-button room-code-submit" : "button button-primary"}
-        type="submit"
-        title={inline ? "加入房间" : undefined}
-        aria-label={inline ? "加入房间" : undefined}
-      >
-        {inline ? <ArrowRight size={18} aria-hidden="true" /> : "加入"}
-      </button>
-    </form>
-  );
-}
diff --git a/src/client/components/StageEntryActions.tsx b/src/client/components/StageEntryActions.tsx
deleted file mode 100644
index 112a7c0..0000000
--- a/src/client/components/StageEntryActions.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { Hash, MonitorUp } from "lucide-react";
-
-import { RoomCodeEntry } from "./RoomCodeEntry";
-
-interface StageEntryActionsProps {
-  joiningRoom: boolean;
-  startSharingDisabled?: boolean;
-  onJoinToggle: () => void;
-  onStartSharing: () => void;
-}
-
-export function StageEntryActions({
-  joiningRoom,
-  startSharingDisabled = false,
-  onJoinToggle,
-  onStartSharing,
-}: StageEntryActionsProps) {
-  return (
-    <>
-      <div className="entry-actions">
-        <button
-          className="entry-action"
-          type="button"
-          disabled={startSharingDisabled}
-          title="开始分享屏幕"
-          onClick={onStartSharing}
-        >
-          <MonitorUp size={18} aria-hidden="true" />
-          开始分享
-        </button>
-        <span className="entry-divider" aria-hidden="true">
-          或
-        </span>
-        <button
-          className="entry-action"
-          type="button"
-          title="输入房间号加入观看"
-          aria-expanded={joiningRoom}
-          aria-controls="host-room-code-entry"
-          onClick={onJoinToggle}
-        >
-          <Hash size={18} aria-hidden="true" />
-          加入房间
-        </button>
-      </div>
-      {joiningRoom && (
-        <RoomCodeEntry id="host-room-code-entry" autoFocus inline />
-      )}
-    </>
-  );
-}
diff --git a/src/client/components/StatsGrid.tsx b/src/client/components/StatsGrid.tsx
deleted file mode 100644
index 0d38e0c..0000000
--- a/src/client/components/StatsGrid.tsx
+++ /dev/null
@@ -1,279 +0,0 @@
-import { ChevronDown } from "lucide-react";
-import { useId, useState } from "react";
-
-import type { ConnectionMetrics } from "../types";
-import { formatPacketLossPercent } from "./connection-details";
-
-interface MetricValue {
-  label: string;
-  value: string;
-  title?: string;
-}
-
-function readableNumber(value: number | null, digits = 0): string {
-  return value === null || !Number.isFinite(value) ? "未知" : value.toFixed(digits);
-}
-
-function readableWithUnit(
-  value: number | null,
-  unit: string,
-  digits = 0,
-): string {
-  const readable = readableNumber(value, digits);
-  return readable === "未知" ? readable : `${readable} ${unit}`;
-}
-
-function qualityReason(value: string): string {
-  const labels: Record<string, string> = {
-    none: "正常",
-    bandwidth: "带宽受限",
-    cpu: "编码受限",
-    other: "其他限制",
-  };
-  return labels[value] ?? "未分类限制";
-}
-
-function Metric({ label, value, title }: MetricValue) {
-  return (
-    <div className="metric" title={title}>
-      <dt>{label}</dt>
-      <dd>{value}</dd>
-    </div>
-  );
-}
-
-function codecName(codec: string): string {
-  return codec.split("/").at(-1) ?? codec;
-}
-
-export function codecContractWarnings(metrics: ConnectionMetrics): string[] {
-  const warnings: string[] = [];
-  if (
-    metrics.codec &&
-    !["video/h264", "video/vp8"].includes(metrics.codec.toLowerCase())
-  ) {
-    warnings.push(
-      `视频编码为 ${codecName(metrics.codec)}，预期 H264 或 VP8`,
-    );
-  }
-  if (metrics.audioCodec && metrics.audioCodec.toLowerCase() !== "audio/opus") {
-    warnings.push(`音频编码为 ${codecName(metrics.audioCodec)}，预期 Opus`);
-  }
-  return warnings;
-}
-
-function secondaryMetrics(
-  metrics: ConnectionMetrics,
-  direction: "send" | "receive",
-): MetricValue[] {
-  const values: MetricValue[] = [];
-  const addNumber = (
-    label: string,
-    value: number | null,
-    unit: string,
-    digits = 0,
-    title?: string,
-  ) => {
-    if (value !== null && Number.isFinite(value)) {
-      values.push({ label, value: readableWithUnit(value, unit, digits), title });
-    }
-  };
-
-  addNumber("RTT", metrics.rttMs, "ms", 0, "网络往返时间");
-  if (metrics.codec) {
-    values.push({ label: "视频编码", value: codecName(metrics.codec) });
-  }
-
-  if (direction === "send") {
-    addNumber("可用上行", metrics.availableOutgoingKbps, "kbps");
-    if (metrics.qualityLimitationReason) {
-      values.push({
-        label: "质量状态",
-        value: qualityReason(metrics.qualityLimitationReason),
-      });
-    }
-    const captureParts: string[] = [];
-    if (metrics.captureWidth !== null && metrics.captureHeight !== null) {
-      captureParts.push(`${metrics.captureWidth}x${metrics.captureHeight}`);
-    }
-    if (metrics.captureFramesPerSecond !== null) {
-      captureParts.push(readableWithUnit(metrics.captureFramesPerSecond, "fps", 1));
-    }
-    if (captureParts.length > 0) {
-      values.push({
-        label: "捕获设置",
-        value: captureParts.join(" · "),
-        title: "MediaStreamTrack 当前捕获设置",
-      });
-    }
-    addNumber(
-      "编码输入帧率",
-      metrics.mediaSourceFramesPerSecond,
-      "fps",
-      1,
-    );
-    if (metrics.encoderImplementation) {
-      values.push({
-        label: "编码器",
-        value: `${metrics.encoderImplementation}${
-          metrics.powerEfficientEncoder === true
-            ? " · 节能"
-            : metrics.powerEfficientEncoder === false
-              ? " · 非节能"
-              : ""
-        }`,
-      });
-    }
-    addNumber("编码耗时/帧", metrics.intervalEncodeMs, "ms", 1);
-  } else {
-    addNumber("网络抖动", metrics.jitterMs, "ms", 1);
-    addNumber("丢帧", metrics.framesDropped, "帧");
-    addNumber("解码耗时/帧", metrics.intervalDecodeMs, "ms", 1);
-    addNumber("画面冻结", metrics.intervalFreezeCount, "次");
-    addNumber("冻结时长", metrics.intervalFreezeDurationMs, "ms", 1);
-  }
-
-  addNumber("音频码率", metrics.audioBitrateKbps, "kbps");
-  if (metrics.audioPacketLossPercent !== null) {
-    values.push({
-      label: "音频丢包率",
-      value: formatPacketLossPercent(metrics.audioPacketLossPercent),
-    });
-  }
-  addNumber("音频抖动", metrics.audioJitterMs, "ms", 1);
-
-  if (direction === "receive") {
-    addNumber(
-      "音视频播放差",
-      metrics.audioVideoPlayoutDeltaMs,
-      "ms",
-      1,
-      "音频 estimatedPlayoutTimestamp 减视频；正值表示音频时间线领先",
-    );
-    addNumber(
-      "视频缓冲",
-      metrics.videoJitterBufferDelayMs,
-      "ms",
-      1,
-      "最近统计区间内已播放视频帧的平均抖动缓冲延迟",
-    );
-    addNumber(
-      "音频缓冲",
-      metrics.audioJitterBufferDelayMs,
-      "ms",
-      1,
-      "最近统计区间内已播放音频样本的平均抖动缓冲延迟",
-    );
-    if (metrics.audioConcealedSamplesPercent !== null) {
-      values.push({
-        label: "音频补偿率",
-        value: formatPacketLossPercent(metrics.audioConcealedSamplesPercent),
-        title: "最近统计区间内由接收端合成补偿的音频样本比例",
-      });
-    }
-    addNumber(
-      "音频补偿",
-      metrics.intervalAudioConcealmentEvents,
-      "次",
-      0,
-      "最近统计区间内开始连续音频样本补偿的次数",
-    );
-  }
-
-  return values;
-}
-
-export function StatsGrid({
-  metrics,
-  direction,
-  progressive = false,
-}: {
-  metrics: ConnectionMetrics;
-  direction: "send" | "receive";
-  progressive?: boolean;
-}) {
-  const [secondaryExpanded, setSecondaryExpanded] = useState(false);
-  const secondaryId = useId();
-  const warnings = codecContractWarnings(metrics);
-  const primary: MetricValue[] = [
-    { label: "分辨率", value: metrics.resolution ?? "未知" },
-    {
-      label: "帧率",
-      value: readableWithUnit(metrics.framesPerSecond, "fps", 1),
-    },
-    {
-      label: "码率",
-      value: readableWithUnit(metrics.bitrateKbps, "kbps"),
-    },
-    {
-      label: "丢包率",
-      value: formatPacketLossPercent(metrics.packetLossPercent),
-    },
-  ];
-  const secondary = secondaryMetrics(metrics, direction);
-  const summary = (
-    <>
-      <dl className="stats-grid">
-        {primary.map((metric) => (
-          <Metric key={metric.label} {...metric} />
-        ))}
-      </dl>
-      {warnings.map((warning) => (
-        <p className="stats-contract-warning" key={warning}>
-          {warning}
-        </p>
-      ))}
-    </>
-  );
-
-  if (!progressive) {
-    return (
-      <>
-        <dl className="stats-grid">
-          {[...primary, ...secondary].map((metric) => (
-            <Metric key={metric.label} {...metric} />
-          ))}
-        </dl>
-        {warnings.map((warning) => (
-          <p className="stats-contract-warning" key={warning}>
-            {warning}
-          </p>
-        ))}
-      </>
-    );
-  }
-
-  const toggleLabel = secondaryExpanded ? "收起详细指标" : "展开详细指标";
-  return (
-    <div className="stats-disclosure">
-      {summary}
-      {secondary.length > 0 && (
-        <>
-          <div className="stats-detail-actions">
-            <span>详细指标</span>
-            <button
-              className={`icon-button stats-detail-toggle${secondaryExpanded ? " is-expanded" : ""}`}
-              type="button"
-              title={toggleLabel}
-              aria-label={toggleLabel}
-              aria-expanded={secondaryExpanded}
-              aria-controls={secondaryId}
-              onClick={() => setSecondaryExpanded((current) => !current)}
-            >
-              <ChevronDown size={16} aria-hidden="true" />
-            </button>
-          </div>
-          <dl
-            id={secondaryId}
-            className="stats-grid stats-grid-secondary"
-            hidden={!secondaryExpanded}
-          >
-            {secondary.map((metric) => (
-              <Metric key={metric.label} {...metric} />
-            ))}
-          </dl>
-        </>
-      )}
-    </div>
-  );
-}
diff --git a/src/client/components/StatusBadge.tsx b/src/client/components/StatusBadge.tsx
deleted file mode 100644
index 565f59e..0000000
--- a/src/client/components/StatusBadge.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import { CircleAlert, Network, Server } from "lucide-react";
-import type { SignalConnectionState } from "../types";
-import {
-  MEDIA_ROUTE_PRESENTATION,
-  ROUTING_STATUS_PRESENTATION,
-} from "./status-badge-model";
-
-interface BadgeProps {
-  tone: "good" | "warning" | "danger" | "neutral";
-  label: string;
-  title?: string;
-}
-
-function Badge({ tone, label, title }: BadgeProps) {
-  return (
-    <span className={`status-badge status-${tone}`} title={title}>
-      <span className="status-dot" aria-hidden="true" />
-      {label}
-    </span>
-  );
-}
-
-export function SignalStatusBadge({
-  state,
-}: {
-  state: SignalConnectionState;
-}) {
-  const values: Record<SignalConnectionState, BadgeProps> = {
-    connecting: { tone: "neutral", label: "正在连接" },
-    connected: { tone: "good", label: "服务器已连接" },
-    reconnecting: { tone: "warning", label: "正在恢复" },
-    offline: { tone: "neutral", label: "服务器未连接" },
-  };
-  return <Badge {...values[state]} />;
-}
-
-export function PeerStatusBadge({
-  state,
-}: {
-  state: RTCPeerConnectionState | "reconnecting" | "waiting" | "routing";
-}) {
-  const labels: Record<
-    RTCPeerConnectionState | "reconnecting" | "waiting" | "routing",
-    BadgeProps
-  > = {
-    waiting: { tone: "neutral", label: "等待开始分享" },
-    reconnecting: { tone: "warning", label: "正在恢复" },
-    routing: ROUTING_STATUS_PRESENTATION,
-    new: { tone: "neutral", label: "准备中" },
-    connecting: { tone: "neutral", label: "正在连接" },
-    connected: { tone: "good", label: "已连接" },
-    disconnected: { tone: "warning", label: "连接中断" },
-    failed: { tone: "danger", label: "连接失败" },
-    closed: { tone: "neutral", label: "已关闭" },
-  };
-  return <Badge {...labels[state]} />;
-}
-
-export function MediaRouteBadge({ route }: { route: "p2p" | "sfu" }) {
-  const presentation = MEDIA_ROUTE_PRESENTATION[route];
-  const Icon = presentation.icon === "network" ? Network : Server;
-  return (
-    <span
-      className={`status-badge status-${presentation.tone}`}
-      title="当前媒体路径"
-    >
-      <Icon size={14} aria-hidden="true" />
-      {presentation.label}
-    </span>
-  );
-}
-export function WarningBanner({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="notice notice-warning" role="status">
-      <CircleAlert size={16} aria-hidden="true" />
-      <span>{children}</span>
-    </div>
-  );
-}
diff --git a/src/client/components/TopologyView.tsx b/src/client/components/TopologyView.tsx
deleted file mode 100644
index 49a241b..0000000
--- a/src/client/components/TopologyView.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import type { LabeledViewerPresence } from "../lib/viewer-presence";
-import { deriveParticipantTopology, type TopologyBranch } from "../lib/participant-topology";
-function ViewerBranch({ branch, edge }: { branch: TopologyBranch; edge: "P2P" | "SFU" }) {
-  return (
-    <li>
-      <div className="topology-node">
-        <span className="topology-edge">{edge}</span><strong>{branch.viewer.label}</strong>
-      </div>
-      {branch.children.length > 0 && (
-        <ul>
-          {branch.children.map((child) => (
-            <ViewerBranch key={child.viewer.peerId} branch={child} edge="P2P" />
-          ))}
-        </ul>
-      )}
-    </li>
-  );
-}
-
-export function TopologyView({ hostPeerId, hostLabel, viewers }: { hostPeerId: string | null; hostLabel: string; viewers: readonly LabeledViewerPresence[] }) {
-  const topology = deriveParticipantTopology(hostPeerId, viewers);
-  return (
-    <div className="topology-view" id="room-topology">
-      <ul className="topology-tree" aria-label="当前连接拓扑">
-        <li>
-          <div className="topology-node">
-            <span className="topology-role">Host</span><strong>{hostLabel}</strong>
-          </div>
-          <ul>
-            {topology.peerRoots.map((root) => (
-              <ViewerBranch key={root.viewer.peerId} branch={root} edge="P2P" />
-            ))}
-            {topology.sfuRoots.length > 0 && (
-              <li>
-                <div className="topology-node">
-                  <span className="topology-role">SFU</span><strong>媒体服务器</strong>
-                </div>
-                <ul>
-                  {topology.sfuRoots.map((root) => (
-                    <ViewerBranch key={root.viewer.peerId} branch={root} edge="SFU" />
-                  ))}
-                </ul>
-              </li>
-            )}
-          </ul>
-        </li>
-      </ul>
-      {topology.pending.length > 0 && (
-        <div className="topology-pending">
-          <span>连接中</span>
-          {topology.pending.map((viewer) => (
-            <strong key={viewer.peerId}>{viewer.label}</strong>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/src/client/components/connection-details.ts b/src/client/components/connection-details.ts
index 92f739d..584a766 100644
--- a/src/client/components/connection-details.ts
+++ b/src/client/components/connection-details.ts
@@ -1,8 +1,11 @@
 import type { PeerSnapshot } from "../types";
 
-export function formatPacketLossPercent(value: number | null): string {
+export function formatPacketLossPercent(
+  value: number | null,
+  unknownLabel: string,
+): string {
   return value === null || !Number.isFinite(value)
-    ? "未知"
+    ? unknownLabel
     : `${value.toFixed(1)}%`;
 }
 
diff --git a/src/client/components/living/Comic.tsx b/src/client/components/living/Comic.tsx
new file mode 100644
index 0000000..39914df
--- /dev/null
+++ b/src/client/components/living/Comic.tsx
@@ -0,0 +1,1296 @@
+// Panel comics (四宫格漫画): pictorial state strips that carry meaning with no
+// human language. Each
+// scene is a self-contained inline SVG: own <style>, vls- prefixed keyframes,
+// own prefers-reduced-motion block pinning informative final frames. Motion
+// constitution: state-change beats only, loops rest >=40%, max 2 movers per
+// panel, stamps play once and hold. SSR-safe: pure static markup, no hooks.
+
+import type { CSSProperties, ReactNode } from "react";
+
+export type ComicKind =
+  | "waiting-for-host"
+  | "connecting-p2p"
+  | "connecting-sfu"
+  | "tap-to-play"
+  | "host-paused"
+  | "recovering"
+  | "route-failed"
+  | "playback-failed"
+  | "host-offline"
+  | "no-audio"
+  | "room-not-found"
+  | "access-denied"
+  | "invalid-invite"
+  | "room-full"
+  | "warning";
+
+export const COMIC_KINDS: readonly ComicKind[] = [
+  "waiting-for-host",
+  "connecting-p2p",
+  "connecting-sfu",
+  "tap-to-play",
+  "host-paused",
+  "recovering",
+  "route-failed",
+  "playback-failed",
+  "host-offline",
+  "no-audio",
+  "room-not-found",
+  "access-denied",
+  "invalid-invite",
+  "room-full",
+  "warning",
+];
+
+/** stage = dark TV overlay (default for overlay states); paper = join rows. */
+export type ComicTheme = "stage" | "paper";
+
+const DEFAULT_THEME: Record<ComicKind, ComicTheme> = {
+  "waiting-for-host": "stage",
+  "connecting-p2p": "stage",
+  "connecting-sfu": "stage",
+  "tap-to-play": "stage",
+  "host-paused": "stage",
+  recovering: "stage",
+  "route-failed": "stage",
+  "playback-failed": "stage",
+  "host-offline": "stage",
+  "no-audio": "stage",
+  "room-not-found": "paper",
+  "access-denied": "paper",
+  "invalid-invite": "paper",
+  "room-full": "paper",
+  warning: "paper",
+};
+
+/* ------------------------------------------------------------------ *
+ * Cast + idiom helpers. Everything is absolute-coordinates: any element
+ * whose class animates `transform` must not carry a transform attribute
+ * (CSS motion would override it), so helpers bake positions into paths.
+ * ------------------------------------------------------------------ */
+
+/* Cast is exported for the hint-scene sets under ./hints (control tooltips);
+   scene functions only dereference these at render time, so the hints ↔ Comic
+   module cycle is safe (function declarations hoist; consts read post-init). */
+export const YOU = "#2fa66a";
+export const LIVE = "#2fa66a";
+export const WARN = "#d98e04";
+export const DANGER = "#d64541";
+export const INK_STAGE = "#dfe8f2";
+export const MINT = "#9de8bf";
+export const SKY = "#7ea4f5";
+export const LINE = "#8ea3b8";
+export const FAINT = "#7789a8";
+export const TV_BODY = "#22303e";
+export const TV_EDGE = "#57697f";
+export const TV_SCREEN = "#16233c";
+export const STAR_GOLD = "#efb23f";
+
+export const r2 = (n: number) => Math.round(n * 100) / 100;
+
+/** Panel frame: rounded rect, rx 14 at >100px wide, stroke 2.5. */
+export function Frame({
+  x,
+  w,
+  theme,
+  accent,
+}: {
+  x: number;
+  w: number;
+  theme: ComicTheme;
+  accent?: string;
+}) {
+  const paper = theme === "paper";
+  return (
+    <rect
+      x={x}
+      y={4}
+      width={w}
+      height={88}
+      rx={w > 100 ? 14 : 12}
+      fill={paper ? "var(--paper)" : "#0d1526"}
+      stroke={accent ?? (paper ? "var(--ink)" : "#48597a")}
+      strokeWidth={2.5}
+    />
+  );
+}
+
+/** Floor/horizon line characters stand on (stage scenes). */
+export function Floor({ x1, x2, y = 76 }: { x1: number; x2: number; y?: number }) {
+  return (
+    <path
+      d={`M${x1} ${y} H${x2}`}
+      stroke="#48597a"
+      strokeWidth={2.5}
+      strokeLinecap="round"
+    />
+  );
+}
+
+/** Mini pawn, feet on (x, yb), s = half-width. Green you-pawn by default. */
+export function Pawn({
+  x,
+  yb,
+  s,
+  color = YOU,
+  eyes = false,
+  className,
+}: {
+  x: number;
+  yb: number;
+  s: number;
+  color?: string;
+  eyes?: boolean;
+  className?: string;
+}) {
+  const body = `M${r2(x - s)} ${yb} c0-${r2(s * 1.1)} ${r2(s * 0.45)}-${r2(s * 1.55)} ${s}-${r2(s * 1.55)} s${s} ${r2(s * 0.45)} ${s} ${r2(s * 1.55)} Z`;
+  const headR = r2(s * 0.6);
+  const hy = r2(yb - s * 1.55 - headR * 0.75);
+  const inner = (
+    <>
+      <path d={body} fill={color} />
+      <circle cx={x} cy={hy} r={headR} fill={color} />
+      {eyes ? (
+        <>
+          <circle cx={x - 2.2} cy={hy} r={r2(s * 0.11)} fill="#101a2c" />
+          <circle cx={x + 2.2} cy={hy} r={r2(s * 0.11)} fill="#101a2c" />
+        </>
+      ) : null}
+    </>
+  );
+  return className ? <g className={className}>{inner}</g> : inner;
+}
+
+/** Mini host TV: body + recessed screen. */
+export function MiniTv({ x, y, w, h }: { x: number; y: number; w: number; h: number }) {
+  return (
+    <>
+      <rect
+        x={x}
+        y={y}
+        width={w}
+        height={h}
+        rx={Math.min(8, h * 0.2)}
+        fill={TV_BODY}
+        stroke={TV_EDGE}
+        strokeWidth={2}
+      />
+      <rect
+        x={r2(x + w * 0.07)}
+        y={r2(y + h * 0.11)}
+        width={r2(w * 0.86)}
+        height={r2(h * 0.66)}
+        rx={Math.min(4, h * 0.1)}
+        fill={TV_SCREEN}
+      />
+    </>
+  );
+}
+
+/** Crescent moon (host not live / room asleep). Static; safe to transform. */
+export function Moon({
+  x,
+  y,
+  k = 1,
+}: {
+  x: number;
+  y: number;
+  k?: number;
+}) {
+  return (
+    <g transform={`translate(${r2(x - 229 * k)} ${r2(y - 48 * k)}) scale(${k})`}>
+      <path
+        fillRule="evenodd"
+        d="M229 39.5a8.5 8.5 0 1 1 0 17 8.5 8.5 0 1 1 0-17ZM232.5 42.3a6.3 6.3 0 1 0 0 11.4 6.3 6.3 0 1 0 0-11.4Z"
+        fill="#f2e9c9"
+      />
+    </g>
+  );
+}
+
+/** Host crown outline; dashed = the host is gone, not asleep. */
+const CROWN_PTS: ReadonlyArray<readonly [number, number]> = [
+  [-6, 0],
+  [-8.5, -10.5],
+  [-3, -6],
+  [0, -12.5],
+  [3, -6],
+  [8.5, -10.5],
+  [6, 0],
+];
+export function Crown({
+  x,
+  y,
+  k = 1,
+  dashed = false,
+  className,
+  baseOpacity,
+}: {
+  x: number;
+  y: number;
+  k?: number;
+  dashed?: boolean;
+  className?: string;
+  baseOpacity?: number;
+}) {
+  const d = `M${CROWN_PTS.map(([px, py]) => `${r2(x + px * k)} ${r2(y + py * k)}`).join(" L")} Z`;
+  return dashed ? (
+    <path
+      className={className}
+      opacity={baseOpacity}
+      d={d}
+      fill="none"
+      stroke={STAR_GOLD}
+      strokeWidth={2}
+      strokeDasharray="4 3"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  ) : (
+    <path className={className} opacity={baseOpacity} d={d} fill={STAR_GOLD} />
+  );
+}
+
+/** SFU relay server box; two slot lines light --live as the dot passes. */
+export function ServerBox({
+  x,
+  y,
+  w = 24,
+  h = 16,
+  lit = false,
+  slotsClass,
+}: {
+  x: number;
+  y: number;
+  w?: number;
+  h?: number;
+  lit?: boolean;
+  slotsClass?: string;
+}) {
+  const inset = w * 0.17;
+  const slots = (
+    <>
+      <path d={`M${r2(x + inset)} ${r2(y + h * 0.31)}h${r2(w - inset * 2)}`} />
+      <path d={`M${r2(x + inset)} ${r2(y + h * 0.63)}h${r2(w - inset * 2)}`} />
+    </>
+  );
+  return (
+    <>
+      <rect
+        x={x}
+        y={y}
+        width={w}
+        height={h}
+        rx={2.5}
+        fill="#0d1526"
+        stroke={lit ? LIVE : LINE}
+        strokeWidth={2}
+      />
+      {slotsClass ? (
+        <g className={slotsClass} stroke={LIVE} strokeWidth={2} strokeLinecap="round">
+          {slots}
+        </g>
+      ) : (
+        <g stroke={LIVE} strokeWidth={2} strokeLinecap="round">
+          {slots}
+        </g>
+      )}
+    </>
+  );
+}
+
+/** Join-page door (paper rooms). */
+export function Door({ x, y, className }: { x: number; y: number; className?: string }) {
+  const inner = (
+    <>
+      <rect
+        x={x}
+        y={y}
+        width={32}
+        height={54}
+        rx={5}
+        fill="var(--wall-2)"
+        stroke="var(--ink)"
+        strokeWidth={2.5}
+      />
+      <circle cx={x + 25} cy={y + 28} r={2} fill="var(--ink)" />
+    </>
+  );
+  return className ? <g className={className}>{inner}</g> : inner;
+}
+
+/** Tiny spark at a route break: three rays. */
+export function Spark({ x, y, className }: { x: number; y: number; className?: string }) {
+  return (
+    <g
+      className={className}
+      stroke={STAR_GOLD}
+      strokeWidth={2}
+      strokeLinecap="round"
+      fill="none"
+    >
+      <path d={`M${x} ${y - 6}v-5 M${x - 11} ${y - 2}l-4 -3 M${x + 11} ${y - 2}l4 -3`} />
+    </g>
+  );
+}
+
+/** Four-point success star; plays once, then holds. */
+export function Star({
+  x,
+  y,
+  r = 6,
+  className,
+  baseOpacity,
+}: {
+  x: number;
+  y: number;
+  r?: number;
+  className?: string;
+  baseOpacity?: number;
+}) {
+  const a = r / 3;
+  const d = `M${x} ${y - r} l${a} ${r - a} ${r - a} ${a} -${r - a} ${a} -${a} ${r - a} -${a} -${r - a} -${r - a} -${a} ${r - a} -${a} Z`;
+  return <path className={className} opacity={baseOpacity} d={d} fill={STAR_GOLD} />;
+}
+
+/** Red-X verdict stamp: stamped once, held forever; never pulses. */
+export function RedX({
+  cx,
+  cy,
+  arm = 6,
+  className,
+}: {
+  cx: number;
+  cy: number;
+  arm?: number;
+  className?: string;
+}) {
+  return (
+    <path
+      className={className}
+      d={`M${cx - arm} ${cy - arm} L${cx + arm} ${cy + arm} M${cx + arm} ${cy - arm} L${cx - arm} ${cy + arm}`}
+      stroke={DANGER}
+      strokeWidth={3}
+      strokeLinecap="round"
+      fill="none"
+    />
+  );
+}
+
+/** Power plug, prongs pointing down, cord trailing up-right. */
+export function Plug({ x, y, className }: { x: number; y: number; className?: string }) {
+  const inner = (
+    <>
+      <path
+        d={`M${x} ${y} c0-8 6-10 12-12`}
+        stroke={TV_EDGE}
+        strokeWidth={2.5}
+        fill="none"
+        strokeLinecap="round"
+      />
+      <rect x={x - 14} y={y} width={28} height={14} rx={4} fill={TV_BODY} stroke={TV_EDGE} strokeWidth={2} />
+      <path
+        d={`M${x - 4} ${y + 14}v6 M${x + 4} ${y + 14}v6`}
+        stroke={LINE}
+        strokeWidth={2.5}
+        strokeLinecap="round"
+      />
+    </>
+  );
+  return className ? <g className={className}>{inner}</g> : inner;
+}
+
+/** Wall socket the plug seats into. */
+export function Socket({ x, y }: { x: number; y: number }) {
+  return (
+    <>
+      <rect x={x} y={y} width={20} height={15} rx={3} fill={TV_BODY} stroke={TV_EDGE} strokeWidth={2} />
+      <path
+        d={`M${x + 6} ${y + 5}v6 M${x + 14} ${y + 5}v6`}
+        stroke="#101a2c"
+        strokeWidth={2}
+        strokeLinecap="round"
+      />
+    </>
+  );
+}
+
+/** TV-static speckles; positions hand-scattered inside the given screen. */
+export function Static({
+  pts,
+  cls,
+}: {
+  pts: ReadonlyArray<readonly [number, number]>;
+  cls: string;
+}) {
+  return (
+    <g className={cls} fill="#7d92a8">
+      {pts.map(([px, py], i) => (
+        <rect key={i} x={px} y={py} width={2.5} height={2.5} rx={0.5} />
+      ))}
+    </g>
+  );
+}
+
+/** SVG-local reduced-motion block: kill keyframes, pin informative poses. */
+export function rmBlock(kills: string[], pins: Array<readonly [string, string]>): string {
+  const kill = kills.map((c) => `.${c}{animation:none}`).join("");
+  const pin = pins.map(([s, c]) => `${s}{${c}}`).join("");
+  return `@media (prefers-reduced-motion:reduce){${kill}${pin}}`;
+}
+
+/* ------------------------------ scenes ------------------------------ */
+
+/** 1. waiting-for-host: 1 wide panel, loop 3.2s. */
+function SceneWaiting({ theme }: { theme: ComicTheme }) {
+  return (
+    <>
+      <style>{`
+.vls-wf-moon{transform-box:fill-box;transform-origin:center;animation:vlsWfMoon 3.2s ease-in-out infinite}
+.vls-wf-z1{animation:vlsWfZ 3.2s ease-in-out infinite}
+.vls-wf-z2{animation:vlsWfZ 3.2s ease-in-out .45s infinite}
+.vls-wf-z3{animation:vlsWfZ 3.2s ease-in-out .9s infinite}
+.vls-wf-eyes{transform-box:fill-box;transform-origin:center;animation:vlsWfBlink 3.2s ease-in-out infinite}
+.vls-wf-led{animation:vlsWfLed 1.1s ease-in-out infinite}
+@keyframes vlsWfMoon{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
+@keyframes vlsWfZ{0%{opacity:0;transform:translateY(3px)}8%{opacity:.9}20%,100%{opacity:0;transform:translateY(-3px)}}
+@keyframes vlsWfBlink{0%,66%,74%,100%{transform:scaleY(1)}70%{transform:scaleY(.12)}}
+@keyframes vlsWfLed{0%,100%{opacity:1}50%{opacity:.35}}
+${rmBlock(
+  ["vls-wf-moon", "vls-wf-z1", "vls-wf-z2", "vls-wf-z3", "vls-wf-eyes", "vls-wf-led"],
+  [[".vls-wf-z1,.vls-wf-z2,.vls-wf-z3", "opacity:.55"], [".vls-wf-led", "opacity:1"]],
+)}
+`}</style>
+      <Frame x={4} w={312} theme={theme} />
+      <Floor x1={24} x2={296} />
+      <Pawn x={69} yb={76} s={11} />
+      <g className="vls-wf-eyes">
+        <circle cx={71} cy={53} r={1.1} fill="#101a2c" />
+        <circle cx={74.6} cy={53} r={1.1} fill="#101a2c" />
+      </g>
+      <rect x={206} y={28} width={64} height={42} rx={8} fill={TV_BODY} stroke={TV_EDGE} strokeWidth={2} />
+      <rect x={212} y={34} width={52} height={28} rx={4} fill={TV_SCREEN} />
+      <g className="vls-wf-moon">
+        <path
+          fillRule="evenodd"
+          d="M229 39.5a8.5 8.5 0 1 1 0 17 8.5 8.5 0 1 1 0-17ZM232.5 42.3a6.3 6.3 0 1 0 0 11.4 6.3 6.3 0 1 0 0-11.4Z"
+          fill="#f2e9c9"
+        />
+      </g>
+      <g stroke="#a9bcd4" strokeWidth={2} strokeLinecap="round" fill="none">
+        <path className="vls-wf-z1" opacity={0.55} d="M244 51h6l-6 4h6" />
+        <path className="vls-wf-z2" opacity={0.55} d="M251 44h7l-7 5h7" />
+        <path className="vls-wf-z3" opacity={0.55} d="M258 36h8l-8 6h8" />
+      </g>
+      <circle className="vls-wf-led" cx={238} cy={76} r={3.5} fill={WARN} />
+    </>
+  );
+}
+
+/** 2/3. connecting P2P / SFU: 3 panels, loop 2.8s. */
+function SceneConnecting({ theme, sfu }: { theme: ComicTheme; sfu: boolean }) {
+  const k = sfu ? "vls-cs" : "vls-cn";
+  const dotKf = sfu
+    ? `@keyframes ${k}Dot{0%{transform:translate(0,0);opacity:0}6%{opacity:1}26%{transform:translate(10px,-31px)}40%{transform:translate(36px,-31px);opacity:1}56%{transform:translate(46px,-12px);opacity:1}68%{transform:translate(46px,-12px);opacity:1}78%,100%{transform:translate(46px,-12px);opacity:0}}
+@keyframes ${k}Slots{0%,26%{opacity:.25}34%,62%{opacity:1}72%,100%{opacity:.25}}`
+    : `@keyframes ${k}Dot{0%{transform:translate(0,0);opacity:0}8%{opacity:1}55%{transform:translate(26px,0);opacity:1}70%{transform:translate(26px,0);opacity:1}80%,100%{transform:translate(26px,0);opacity:0}}`;
+  const kills = sfu
+    ? [`${k}-line`, `${k}-dot`, `${k}-slots`, `${k}-warm`, `${k}-led`]
+    : [`${k}-line`, `${k}-dot`, `${k}-warm`, `${k}-led`];
+  const pins: Array<readonly [string, string]> = [
+    [`.${k}-dot`, "opacity:0"],
+    [`.${k}-warm`, "opacity:.2"],
+    [`.${k}-led`, "opacity:1"],
+  ];
+  if (sfu) pins.push([`.${k}-slots`, "opacity:1"]);
+  return (
+    <>
+      <style>{`
+.${k}-line{animation:${k}March 1.1s linear infinite}
+.${k}-dot{animation:${k}Dot 2.8s ease-in-out infinite}
+${sfu ? `.${k}-slots{animation:${k}Slots 2.8s ease-in-out infinite}` : ""}
+.${k}-warm{animation:${k}Warm 2.8s ease-in-out infinite}
+.${k}-led{animation:${k}Led .8s ease-in-out infinite}
+@keyframes ${k}March{to{stroke-dashoffset:-16}}
+${dotKf}
+@keyframes ${k}Warm{0%,52%{opacity:0}60%{opacity:.25}66%{opacity:.1}74%{opacity:.3}100%{opacity:.18}}
+@keyframes ${k}Led{0%,100%{opacity:1}50%{opacity:.3}}
+${rmBlock(kills, pins)}
+`}</style>
+      <Frame x={8} w={96} theme={theme} />
+      <Frame x={112} w={96} theme={theme} />
+      <Frame x={216} w={96} theme={theme} />
+      <Floor x1={20} x2={92} />
+      <Pawn x={56} yb={76} s={11} eyes />
+      <Pawn x={128} yb={74} s={7} eyes />
+      {sfu ? (
+        <>
+          <g stroke={LINE} strokeWidth={2.5} strokeLinecap="round" fill="none" strokeDasharray="4 4">
+            <path className={`${k}-line`} d="M137 57 L147 26" />
+            <path className={`${k}-line`} d="M173 26 L183 45" />
+          </g>
+          <ServerBox x={148} y={15} slotsClass={`${k}-slots`} />
+          <g className={`${k}-dot`}>
+            <circle cx={137} cy={57} r={2.5} fill={MINT} />
+          </g>
+          <rect x={170} y={40} width={24} height={16} rx={3} fill={TV_BODY} stroke={TV_EDGE} strokeWidth={1.5} />
+          <circle cx={182} cy={61} r={2} fill={TV_EDGE} />
+        </>
+      ) : (
+        <>
+          <path
+            className={`${k}-line`}
+            d="M137 57 H166"
+            stroke={LINE}
+            strokeWidth={2.5}
+            strokeLinecap="round"
+            fill="none"
+            strokeDasharray="4 4"
+          />
+          <g className={`${k}-dot`}>
+            <path d="M132 52 l-6 -3 M132 62 l-6 3" stroke={FAINT} strokeWidth={2} strokeLinecap="round" />
+            <circle cx={140} cy={57} r={2.5} fill={MINT} />
+          </g>
+          <rect x={170} y={42} width={24} height={16} rx={3} fill={TV_BODY} stroke={TV_EDGE} strokeWidth={1.5} />
+          <circle cx={182} cy={63} r={2} fill={TV_EDGE} />
+        </>
+      )}
+      <Floor x1={228} x2={300} />
+      <rect x={238} y={26} width={52} height={40} rx={7} fill={TV_BODY} stroke={TV_EDGE} strokeWidth={2} />
+      <rect x={244} y={32} width={40} height={24} rx={4} fill={TV_SCREEN} />
+      <rect className={`${k}-warm`} x={244} y={32} width={40} height={24} rx={4} fill={SKY} opacity={0} />
+      <circle className={`${k}-led`} cx={264} cy={72} r={3.5} fill="#4a84f2" />
+    </>
+  );
+}
+
+/** 4. tap-to-play: 2 panels, loop 2.4s. Companion to the real big button. */
+function SceneTap({ theme }: { theme: ComicTheme }) {
+  return (
+    <>
+      <style>{`
+.vls-tp-finger{animation:vlsTpFinger 2.4s ease-in-out infinite}
+.vls-tp-btn{transform-box:fill-box;transform-origin:center;animation:vlsTpBtn 2.4s ease-in-out infinite}
+.vls-tp-ripple{transform-box:fill-box;transform-origin:center;animation:vlsTpRipple 2.4s ease-out infinite}
+.vls-tp-flash{animation:vlsTpFlash 2.4s ease-in-out infinite}
+.vls-tp-play{transform-box:fill-box;transform-origin:center;animation:vlsTpPlay 2.4s ease-in-out infinite}
+.vls-tp-led{animation:vlsTpLed 2.4s ease-in-out infinite}
+.vls-tp-arcs{animation:vlsTpArcs 2.4s ease-in-out infinite}
+@keyframes vlsTpFinger{0%,18%{transform:translate(0,0)}42%,52%{transform:translate(30px,-18px)}78%,100%{transform:translate(0,0)}}
+@keyframes vlsTpBtn{0%,40%{transform:scale(1)}46%{transform:scale(.86)}54%{transform:scale(1.05)}60%,100%{transform:scale(1)}}
+@keyframes vlsTpRipple{0%,42%{transform:scale(1);opacity:0}45%{opacity:.75}72%,100%{transform:scale(1.65);opacity:0}}
+@keyframes vlsTpFlash{0%,48%{opacity:0}54%{opacity:.4}66%,100%{opacity:0}}
+@keyframes vlsTpPlay{0%,50%{transform:scale(1)}57%{transform:scale(1.18)}66%,100%{transform:scale(1)}}
+@keyframes vlsTpLed{0%,50%{opacity:.3}56%,82%{opacity:1}100%{opacity:.3}}
+@keyframes vlsTpArcs{0%,52%{opacity:0}58%{opacity:.9}64%{opacity:.15}72%{opacity:.9}86%,100%{opacity:0}}
+${rmBlock(
+  ["vls-tp-finger", "vls-tp-btn", "vls-tp-ripple", "vls-tp-flash", "vls-tp-play", "vls-tp-led", "vls-tp-arcs"],
+  [
+    [".vls-tp-ripple,.vls-tp-flash", "opacity:0"],
+    [".vls-tp-arcs", "opacity:.5"],
+    [".vls-tp-led", "opacity:1"],
+  ],
+)}
+`}</style>
+      <Frame x={4} w={152} theme={theme} />
+      <Frame x={164} w={152} theme={theme} />
+      <circle className="vls-tp-ripple" cx={80} cy={48} r={24} fill="none" stroke={SKY} strokeWidth={3} />
+      <g className="vls-tp-btn">
+        <circle cx={80} cy={48} r={24} fill="#2f6fed" />
+        <path d="M74 39 L91 48 L74 57 Z" fill="#fff" />
+      </g>
+      <g className="vls-tp-finger">
+        <path d="M22 80 l7 -7 M27 85 l7 -7" stroke={FAINT} strokeWidth={2.5} strokeLinecap="round" />
+        <circle cx={34} cy={72} r={7} fill={INK_STAGE} />
+      </g>
+      <rect x={200} y={22} width={88} height={52} rx={8} fill={TV_BODY} stroke={TV_EDGE} strokeWidth={2} />
+      <rect x={206} y={28} width={76} height={36} rx={4} fill={TV_SCREEN} />
+      <rect className="vls-tp-flash" x={206} y={28} width={76} height={36} rx={4} fill={INK_STAGE} opacity={0} />
+      <path className="vls-tp-play" d="M236 38 L254 46 L236 54 Z" fill={MINT} />
+      <circle className="vls-tp-led" cx={244} cy={80} r={3.5} fill={LIVE} opacity={0.3} />
+      <g className="vls-tp-arcs" opacity={0} stroke={MINT} strokeWidth={2.5} strokeLinecap="round" fill="none">
+        <path d="M294 38 a12 12 0 0 1 0 16" />
+        <path d="M300 33 a20 20 0 0 1 0 26" />
+      </g>
+    </>
+  );
+}
+
+/** 5. host-paused: 2 panels, loop 3s. Cozy, not broken — no z's, no red. */
+function ScenePaused({ theme }: { theme: ComicTheme }) {
+  return (
+    <>
+      <style>{`
+.vls-hp-bars{animation:vlsHpBars 3s ease-in-out infinite}
+.vls-hp-led{animation:vlsHpLed 1.1s ease-in-out infinite}
+.vls-hp-eyes{transform-box:fill-box;transform-origin:center;animation:vlsHpBlink 3s ease-in-out infinite}
+.vls-hp-steam1{animation:vlsHpSteam 3s ease-in-out infinite}
+.vls-hp-steam2{animation:vlsHpSteam 3s ease-in-out 1.5s infinite}
+@keyframes vlsHpBars{0%,100%{opacity:.55}50%{opacity:1}}
+@keyframes vlsHpLed{0%,100%{opacity:1}50%{opacity:.3}}
+@keyframes vlsHpBlink{0%,44%,52%,100%{transform:scaleY(1)}48%{transform:scaleY(.12)}}
+@keyframes vlsHpSteam{0%{transform:translateY(2px);opacity:0}25%{opacity:.9}55%,100%{transform:translateY(-5px);opacity:0}}
+${rmBlock(
+  ["vls-hp-bars", "vls-hp-led", "vls-hp-eyes", "vls-hp-steam1", "vls-hp-steam2"],
+  [
+    [".vls-hp-bars,.vls-hp-led", "opacity:1"],
+    [".vls-hp-steam1", "opacity:.55;transform:translateY(-2px)"],
+    [".vls-hp-steam2", "opacity:0"],
+  ],
+)}
+`}</style>
+      <Frame x={4} w={152} theme={theme} />
+      <Frame x={164} w={152} theme={theme} />
+      <rect x={36} y={16} width={88} height={54} rx={9} fill={TV_BODY} stroke={TV_EDGE} strokeWidth={2} />
+      <rect x={42} y={22} width={76} height={38} rx={4} fill={TV_SCREEN} />
+      <rect x={42} y={22} width={76} height={38} rx={4} fill="#0a101c" opacity={0.5} />
+      <g className="vls-hp-bars" fill={INK_STAGE}>
+        <rect x={70} y={30} width={9} height={26} rx={3.5} />
+        <rect x={85} y={30} width={9} height={26} rx={3.5} />
+      </g>
+      <circle className="vls-hp-led" cx={80} cy={76} r={3.5} fill={WARN} />
+      <Floor x1={176} x2={304} y={78} />
+      <path d="M198 78 c0-16 8-22 18-22 s18 6 18 22 Z" fill={YOU} />
+      <circle cx={216} cy={50} r={9} fill={YOU} />
+      <g className="vls-hp-eyes" fill="#101a2c">
+        <circle cx={212.5} cy={49} r={1.5} />
+        <circle cx={219.5} cy={49} r={1.5} />
+      </g>
+      <rect x={240} y={66} width={12} height={12} rx={3} fill="#e4572e" />
+      <path d="M252 69 a5 5 0 0 1 0 6" stroke="#e4572e" strokeWidth={2.5} fill="none" />
+      <path className="vls-hp-steam1" d="M243 60 q3 -4 0 -8" stroke={LINE} strokeWidth={2} strokeLinecap="round" fill="none" opacity={0} />
+      <path className="vls-hp-steam2" d="M249 60 q-3 -4 0 -8" stroke={LINE} strokeWidth={2} strokeLinecap="round" fill="none" opacity={0} />
+    </>
+  );
+}
+
+/** 6. recovering: 3 panels, loop 3.2s. Plug re-seats, LEDs chase, one sweat drop. */
+function SceneRecovering({ theme }: { theme: ComicTheme }) {
+  return (
+    <>
+      <style>{`
+.vls-rc-spark{animation:vlsRcSpark 3.2s ease-in-out infinite}
+.vls-rc-plug{transform-box:fill-box;transform-origin:center;animation:vlsRcPlug 3.2s ease-in-out infinite}
+.vls-rc-plug-lines{animation:vlsRcPlugLines 3.2s ease-in-out infinite}
+.vls-rc-sweat{transform-box:fill-box;transform-origin:center;animation:vlsRcSweat 3.2s ease-in-out infinite}
+.vls-rc-c1{animation:vlsRcC1 3.2s ease-in-out infinite}
+.vls-rc-c2{animation:vlsRcC2 3.2s ease-in-out infinite}
+.vls-rc-c3{animation:vlsRcC3 3.2s ease-in-out infinite}
+@keyframes vlsRcSpark{0%{opacity:0}10%{opacity:1}30%,100%{opacity:.55}}
+@keyframes vlsRcPlug{0%{transform:translate(-4px,-9px) rotate(-6deg)}12%{transform:translate(-2px,-4px) rotate(5deg)}22%{transform:translate(0,-1px) rotate(-2deg)}30%,100%{transform:translate(0,0) rotate(0)}}
+@keyframes vlsRcPlugLines{0%{opacity:0}6%{opacity:.9}28%,100%{opacity:0}}
+@keyframes vlsRcSweat{0%,53%{opacity:0;transform:translateY(0)}56%{opacity:1}72%,100%{opacity:0;transform:translateY(9px)}}
+@keyframes vlsRcC1{0%,24%{opacity:.25}32%,58%{opacity:1}66%,100%{opacity:.25}}
+@keyframes vlsRcC2{0%,34%{opacity:.25}42%,64%{opacity:1}72%,100%{opacity:.25}}
+@keyframes vlsRcC3{0%,44%{opacity:.25}52%,70%{opacity:1}78%,100%{opacity:.25}}
+${rmBlock(
+  ["vls-rc-spark", "vls-rc-plug", "vls-rc-plug-lines", "vls-rc-sweat", "vls-rc-c1", "vls-rc-c2", "vls-rc-c3"],
+  [
+    [".vls-rc-plug", "transform:none"],
+    [".vls-rc-plug-lines", "opacity:0"],
+    [".vls-rc-spark", "opacity:1"],
+    [".vls-rc-c1,.vls-rc-c2,.vls-rc-c3", "opacity:1"],
+    [".vls-rc-sweat", "opacity:0"],
+  ],
+)}
+`}</style>
+      <Frame x={8} w={96} theme={theme} />
+      <Frame x={112} w={96} theme={theme} />
+      <Frame x={216} w={96} theme={theme} />
+      <Floor x1={20} x2={92} />
+      <Pawn x={40} yb={76} s={8} eyes />
+      <MiniTv x={66} y={44} w={26} h={18} />
+      <path d="M48 58 H53 M59 58 H64" stroke={LINE} strokeWidth={2.5} strokeLinecap="round" fill="none" />
+      <Spark x={56} y={52} className="vls-rc-spark" />
+      <Socket x={170} y={50} />
+      <g className="vls-rc-plug-lines" opacity={0}>
+        <path d="M156 34 l-7 -4 M158 44 l-8 0" stroke={FAINT} strokeWidth={2} strokeLinecap="round" />
+      </g>
+      <Plug x={180} y={30} className="vls-rc-plug" />
+      <Floor x1={228} x2={300} />
+      <Pawn x={252} yb={76} s={9} eyes />
+      <path
+        className="vls-rc-sweat"
+        d="M264 46 c2 3 2 5 0 6 c-2 -1 -2 -3 0 -6 Z"
+        fill={SKY}
+        opacity={0}
+      />
+      <circle className="vls-rc-c1" cx={272} cy={34} r={3} fill={LIVE} opacity={0.25} />
+      <circle className="vls-rc-c2" cx={284} cy={34} r={3} fill={LIVE} opacity={0.25} />
+      <circle className="vls-rc-c3" cx={296} cy={34} r={3} fill={LIVE} opacity={0.25} />
+    </>
+  );
+}
+
+/** 7. route-failed: 4 panels, one-shot 3.6s entrance + idle green flow. */
+function SceneRouteFailed({ theme }: { theme: ComicTheme }) {
+  return (
+    <>
+      <style>{`
+.vls-rf-panel{transform-box:fill-box;transform-origin:center;animation:vlsRfIn .5s cubic-bezier(.3,1.5,.5,1) backwards}
+.vls-rf-p2{animation-delay:.15s}.vls-rf-p3{animation-delay:.3s}.vls-rf-p4{animation-delay:.45s}
+.vls-rf-march{animation:vlsRfMarch .4s linear .4s 3 both}
+.vls-rf-x{transform-box:fill-box;transform-origin:center;animation:vlsRfX 3.6s ease-out both}
+.vls-rf-spark{animation:vlsRfSpark 3.6s ease-out both}
+.vls-rf-dot{animation:vlsRfDot 3.6s ease-in-out both}
+.vls-rf-green{stroke-dasharray:5 5;animation:vlsRfGreen 3.6s ease-out both,vlsRfFlow 1.1s linear 3.6s infinite}
+.vls-rf-slots{animation:vlsRfSlots 3.6s ease-out both}
+.vls-rf-star{transform-box:fill-box;transform-origin:center;animation:vlsRfStar 3.6s cubic-bezier(.3,1.5,.5,1) both}
+.vls-rf-grey{animation:vlsRfGrey 3.6s ease-out both}
+@keyframes vlsRfIn{from{opacity:0;transform:translateY(6px) scale(.9)}}
+@keyframes vlsRfMarch{from{stroke-dashoffset:0}to{stroke-dashoffset:-16}}
+@keyframes vlsRfX{0%,32%{opacity:0;transform:scale(1.7) rotate(8deg)}40%,100%{opacity:1;transform:scale(1) rotate(8deg)}}
+@keyframes vlsRfSpark{0%,32%{opacity:0}35%{opacity:1}44%,100%{opacity:0}}
+@keyframes vlsRfDot{0%,44%{transform:translate(0,0);opacity:0}46%{opacity:1}54%{transform:translate(2px,-31px)}60%{transform:translate(18px,-31px)}70%,100%{transform:translate(28px,-11px);opacity:0}}
+@keyframes vlsRfGreen{0%,72%{opacity:0}80%,100%{opacity:1}}
+@keyframes vlsRfFlow{to{stroke-dashoffset:-20}}
+@keyframes vlsRfSlots{0%,60%{opacity:0}66%,100%{opacity:1}}
+@keyframes vlsRfStar{0%,82%{opacity:0;transform:scale(0)}90%{opacity:1;transform:scale(1.25)}96%,100%{opacity:1;transform:scale(1)}}
+@keyframes vlsRfGrey{0%{opacity:.9}70%{opacity:.9}82%,100%{opacity:.15}}
+${rmBlock(
+  ["vls-rf-panel", "vls-rf-march", "vls-rf-x", "vls-rf-spark", "vls-rf-dot", "vls-rf-green", "vls-rf-slots", "vls-rf-star", "vls-rf-grey"],
+  [
+    [".vls-rf-green", "stroke-dasharray:none;opacity:1"],
+    [".vls-rf-slots,.vls-rf-star", "opacity:1"],
+    [".vls-rf-spark,.vls-rf-dot", "opacity:0"],
+    [".vls-rf-grey", "opacity:.15"],
+  ],
+)}
+`}</style>
+      <g className="vls-rf-panel">
+        <Frame x={4} w={72} theme={theme} />
+        <path d="M9 68 c0-12 5-17 11-17 s11 5 11 17 Z" fill={YOU} />
+        <circle cx={20} cy={42} r={6.5} fill={YOU} />
+        <circle cx={17.5} cy={41} r={1.1} fill="#101a2c" />
+        <circle cx={22.5} cy={41} r={1.1} fill="#101a2c" />
+        <rect x={47} y={36} width={18} height={13} rx={2.5} fill={TV_BODY} stroke={TV_EDGE} strokeWidth={1.5} />
+        <circle cx={56} cy={54} r={2} fill={TV_EDGE} />
+        <path className="vls-rf-march" d="M28 47 H46" stroke={LINE} strokeWidth={2.5} strokeDasharray="4 4" fill="none" />
+      </g>
+      <g className="vls-rf-panel vls-rf-p2">
+        <Frame x={84} w={72} theme={theme} />
+        <path d="M89 68 c0-12 5-17 11-17 s11 5 11 17 Z" fill={YOU} />
+        <circle cx={100} cy={42} r={6.5} fill={YOU} />
+        <circle cx={97.5} cy={41} r={1.1} fill="#101a2c" />
+        <circle cx={102.5} cy={41} r={1.1} fill="#101a2c" />
+        <rect x={127} y={36} width={18} height={13} rx={2.5} fill={TV_BODY} stroke={TV_EDGE} strokeWidth={1.5} />
+        <circle cx={136} cy={54} r={2} fill={DANGER} />
+        <path d="M108 47 H113 M121 47 H126" stroke={LINE} strokeWidth={2.5} fill="none" />
+        <g className="vls-rf-spark" opacity={0} stroke={STAR_GOLD} strokeWidth={2} strokeLinecap="round">
+          <path d="M117 36 v-5 M106 40 l-4 -3 M128 40 l4 -3" />
+        </g>
+        <path className="vls-rf-x" d="M111 41 L123 53 M123 41 L111 53" stroke={DANGER} strokeWidth={3} strokeLinecap="round" fill="none" />
+      </g>
+      <g className="vls-rf-panel vls-rf-p3">
+        <Frame x={164} w={72} theme={theme} />
+        <path d="M169 68 c0-12 5-17 11-17 s11 5 11 17 Z" fill={YOU} />
+        <circle cx={180} cy={42} r={6.5} fill={YOU} />
+        <circle cx={177.5} cy={41} r={1.1} fill="#101a2c" />
+        <circle cx={182.5} cy={41} r={1.1} fill="#101a2c" />
+        <rect x={207} y={36} width={18} height={13} rx={2.5} fill={TV_BODY} stroke={TV_EDGE} strokeWidth={1.5} />
+        <circle cx={216} cy={54} r={2} fill={TV_EDGE} />
+        <rect x={192} y={10} width={16} height={12} rx={2.5} fill="#0d1526" stroke={LINE} strokeWidth={2} />
+        <g className="vls-rf-slots" stroke={LIVE} strokeWidth={2} strokeLinecap="round">
+          <path d="M195 14 h10 M195 18 h10" />
+        </g>
+        <g className="vls-rf-grey" stroke={LINE} strokeWidth={2.5} strokeDasharray="4 4" fill="none">
+          <path d="M188 47 L192 16" />
+          <path d="M208 16 L216 34" />
+        </g>
+        <circle className="vls-rf-dot" cx={188} cy={47} r={2.5} fill={MINT} opacity={0} />
+      </g>
+      <g className="vls-rf-panel vls-rf-p4">
+        <Frame x={244} w={72} theme={theme} accent={LIVE} />
+        <path d="M249 68 c0-12 5-17 11-17 s11 5 11 17 Z" fill={YOU} />
+        <circle cx={260} cy={42} r={6.5} fill={YOU} />
+        <circle cx={257.5} cy={41} r={1.1} fill="#101a2c" />
+        <circle cx={262.5} cy={41} r={1.1} fill="#101a2c" />
+        <rect x={287} y={36} width={18} height={13} rx={2.5} fill={TV_BODY} stroke={TV_EDGE} strokeWidth={1.5} />
+        <path d="M292 39 L300 42.5 L292 46 Z" fill={MINT} />
+        <circle cx={296} cy={54} r={2} fill={LIVE} />
+        <rect x={272} y={10} width={16} height={12} rx={2.5} fill="#0d1526" stroke={LIVE} strokeWidth={2} />
+        <path d="M275 14 h10 M275 18 h10" stroke={LIVE} strokeWidth={2} strokeLinecap="round" />
+        <g className="vls-rf-green" opacity={0} stroke={LIVE} strokeWidth={2.5} fill="none">
+          <path d="M268 47 L272 16" />
+          <path d="M288 16 L296 34" />
+        </g>
+        <Star x={296} y={26} className="vls-rf-star" baseOpacity={0} />
+      </g>
+    </>
+  );
+}
+
+/** 8. playback-failed: 2 panels, loop 3s. Link fine, picture dead. */
+function ScenePlaybackFailed({ theme }: { theme: ComicTheme }) {
+  return (
+    <>
+      <style>{`
+.vls-pf-s1{animation:vlsPfStaticA .36s steps(3) infinite}
+.vls-pf-s2{animation:vlsPfStaticB .36s steps(3) infinite}
+.vls-pf-rip{animation:vlsPfRip 3s ease-in-out infinite}
+.vls-pf-pawn{transform-box:fill-box;transform-origin:50% 100%;animation:vlsPfTap 3s ease-in-out infinite}
+.vls-pf-ring{animation:vlsPfRing 3s ease-in-out infinite}
+@keyframes vlsPfStaticA{0%{transform:translate(0,0);opacity:.5}33%{transform:translate(1px,-1px);opacity:.8}66%{transform:translate(-1px,1px);opacity:.35}100%{transform:translate(0,0);opacity:.5}}
+@keyframes vlsPfStaticB{0%{transform:translate(0,0);opacity:.35}33%{transform:translate(-1px,1px);opacity:.7}66%{transform:translate(1px,-1px);opacity:.45}100%{transform:translate(0,0);opacity:.35}}
+@keyframes vlsPfRip{0%,18%{opacity:.35}22%{opacity:.7}28%{opacity:.35}33%{opacity:.7}42%,100%{opacity:.35}}
+@keyframes vlsPfTap{0%,16%{transform:translate(0,0)}20%{transform:translate(4px,0)}24%{transform:translate(0,0)}31%{transform:translate(0,0)}35%{transform:translate(4px,0)}39%,100%{transform:translate(0,0)}}
+@keyframes vlsPfRing{0%,55%{opacity:.25}63%{opacity:1}78%,100%{opacity:.25}}
+${rmBlock(
+  ["vls-pf-s1", "vls-pf-s2", "vls-pf-rip", "vls-pf-pawn", "vls-pf-ring"],
+  [
+    [".vls-pf-s1,.vls-pf-s2,.vls-pf-rip", "opacity:.35;transform:none"],
+    [".vls-pf-ring", "opacity:1"],
+  ],
+)}
+`}</style>
+      <Frame x={4} w={152} theme={theme} />
+      <Frame x={164} w={152} theme={theme} />
+      <Floor x1={16} x2={60} />
+      <Pawn x={34} yb={76} s={8} eyes />
+      <path d="M44 62 H68" stroke={LIVE} strokeWidth={2.5} strokeLinecap="round" fill="none" />
+      <MiniTv x={70} y={30} w={64} h={40} />
+      <Static
+        cls="vls-pf-s1"
+        pts={[[78, 38], [92, 34], [108, 40], [122, 36], [84, 50], [100, 46], [116, 52], [126, 48]]}
+      />
+      <Static
+        cls="vls-pf-s2"
+        pts={[[86, 42], [104, 36], [118, 44], [80, 56], [96, 54], [112, 48], [124, 56], [90, 57]]}
+      />
+      <Floor x1={176} x2={304} y={78} />
+      <Pawn x={200} yb={78} s={9} eyes className="vls-pf-pawn" />
+      <MiniTv x={232} y={26} w={66} h={42} />
+      <Static
+        cls="vls-pf-rip"
+        pts={[[240, 34], [254, 32], [270, 38], [284, 34], [246, 46], [262, 44], [278, 48], [252, 52], [268, 54], [284, 50]]}
+      />
+      <g className="vls-pf-ring" opacity={0.25}>
+        <circle cx={306} cy={18} r={9} fill="none" stroke={SKY} strokeWidth={2.5} />
+        <path d="M311 11 l3 -2 M312 13 l4 0" stroke={SKY} strokeWidth={2.5} strokeLinecap="round" fill="none" />
+      </g>
+    </>
+  );
+}
+
+/** 9. host-offline: 2 panels, loop 3.4s. Plug pulled; dashed crown = gone. */
+function SceneHostOffline({ theme }: { theme: ComicTheme }) {
+  return (
+    <>
+      <style>{`
+.vls-ho-plug{transform-box:fill-box;transform-origin:50% 0%;animation:vlsHoSway 3.4s ease-in-out infinite}
+.vls-ho-pawn{transform-box:fill-box;transform-origin:50% 100%;animation:vlsHoWave 3.4s ease-in-out infinite}
+.vls-ho-crown{animation:vlsHoCrown 3.4s ease-in-out infinite}
+@keyframes vlsHoSway{0%{transform:rotate(-6deg)}10%{transform:rotate(6deg)}20%{transform:rotate(-5deg)}30%{transform:rotate(4deg)}40%,100%{transform:rotate(0)}}
+@keyframes vlsHoWave{0%,10%{transform:rotate(0)}14%{transform:rotate(-8deg)}18%{transform:rotate(8deg)}22%{transform:rotate(-8deg)}26%{transform:rotate(8deg)}30%,100%{transform:rotate(0)}}
+@keyframes vlsHoCrown{0%,30%{opacity:.2}40%{opacity:.7}50%,100%{opacity:.2}}
+${rmBlock(
+  ["vls-ho-plug", "vls-ho-pawn", "vls-ho-crown"],
+  [[".vls-ho-plug", "transform:none"], [".vls-ho-crown", "opacity:.5"]],
+)}
+`}</style>
+      <Frame x={4} w={152} theme={theme} />
+      <Frame x={164} w={152} theme={theme} />
+      <rect x={30} y={22} width={70} height={44} rx={8} fill={TV_BODY} stroke={TV_EDGE} strokeWidth={2} />
+      <rect x={36} y={28} width={58} height={30} rx={4} fill="#0a101c" />
+      <Moon x={72} y={43} k={0.55} />
+      <path d="M65 66 c0 6 -4 8 -8 10" stroke={TV_EDGE} strokeWidth={2.5} fill="none" strokeLinecap="round" />
+      <Plug x={57} y={76} className="vls-ho-plug" />
+      <Floor x1={176} x2={304} y={78} />
+      <Pawn x={210} yb={78} s={9} eyes className="vls-ho-pawn" />
+      <Crown x={272} y={42} k={1.1} dashed className="vls-ho-crown" baseOpacity={0.5} />
+    </>
+  );
+}
+
+/** 10. no-audio: 2 panels, loop 3s. Before: TV alive (mint play triangle,
+ * flicker ticks), three healthy LIVE-green sound arcs. After: picture still
+ * alive, sound dashed + red-slashed, and a big you-pawn (s=18) presses BOTH
+ * mitten-hands to its head — arms stamp up once and hold, head micro-shakes
+ * "I hear nothing". Rest >=44%. */
+function SceneNoAudio({ theme }: { theme: ComicTheme }) {
+  return (
+    <>
+      <style>{`
+.vls-na-flick{animation:vlsNaFlick 3s ease-in-out infinite}
+.vls-na-a1{animation:vlsNaArc 3s ease-in-out infinite}
+.vls-na-a2{animation:vlsNaArc 3s ease-in-out -.3s infinite}
+.vls-na-a3{animation:vlsNaArc 3s ease-in-out -.6s infinite}
+.vls-na-pawn{transform-box:fill-box;transform-origin:50% 100%;animation:vlsNaShake 3s ease-in-out infinite}
+.vls-na-arm{transform-box:fill-box;transform-origin:50% 100%;animation:vlsNaArm 3s cubic-bezier(.3,1.4,.5,1) infinite}
+.vls-na-slash{transform-box:fill-box;transform-origin:center;animation:vlsNaSlash 3s ease-out infinite}
+@keyframes vlsNaFlick{0%{opacity:.15}10%{opacity:.8}20%{opacity:.2}30%{opacity:.7}40%,100%{opacity:.15}}
+@keyframes vlsNaArc{0%{opacity:.45}12%{opacity:1}26%{opacity:.45}42%,100%{opacity:.8}}
+@keyframes vlsNaArm{0%,8%{transform:scaleY(.05)}20%,100%{transform:scaleY(1)}}
+@keyframes vlsNaSlash{0%,22%{opacity:0;transform:scale(1.7)}30%,100%{opacity:1;transform:scale(1)}}
+@keyframes vlsNaShake{0%,36%,56%,100%{transform:rotate(0)}40%{transform:rotate(-2.5deg)}44%{transform:rotate(2.5deg)}48%{transform:rotate(-1.8deg)}52%{transform:rotate(1.8deg)}}
+${rmBlock(
+  ["vls-na-flick", "vls-na-a1", "vls-na-a2", "vls-na-a3", "vls-na-pawn", "vls-na-arm", "vls-na-slash"],
+  [
+    [".vls-na-flick", "opacity:.5"],
+    [".vls-na-a1,.vls-na-a2,.vls-na-a3", "opacity:.8"],
+    [".vls-na-slash", "opacity:1;transform:none"],
+    [".vls-na-arm,.vls-na-pawn", "transform:none"],
+  ],
+)}
+`}</style>
+      <Frame x={4} w={152} theme={theme} />
+      <Frame x={164} w={152} theme={theme} />
+      {/* panel 1 (before): picture alive, three healthy sound arcs */}
+      <rect x={26} y={20} width={76} height={48} rx={9} fill={TV_BODY} stroke={TV_EDGE} strokeWidth={2} />
+      <rect x={32} y={26} width={64} height={32} rx={4} fill={TV_SCREEN} />
+      <path d="M54 34 L74 42 L54 50 Z" fill={MINT} />
+      <g className="vls-na-flick" stroke={SKY} strokeWidth={2} strokeLinecap="round" opacity={0.15}>
+        <path d="M38 30v6 M42 40v5" />
+        <path d="M92 31v6 M88 41v5" />
+      </g>
+      <circle cx={64} cy={74} r={3} fill={LIVE} />
+      <g stroke={LIVE} strokeWidth={2.5} fill="none" strokeLinecap="round">
+        <path className="vls-na-a1" d="M106 36a10 10 0 0 1 0 16" />
+        <path className="vls-na-a2" d="M112 31a16 16 0 0 1 0 26" />
+        <path className="vls-na-a3" d="M118 26a22 22 0 0 1 0 36" />
+      </g>
+      {/* panel 2 (after): picture still alive on the mini TV, but the sound
+          arcs arrive dashed and carry a stamped red slash; big pawn (s=18)
+          presses both mitten-hands to its head — arms are body-green with a
+          dark halo outline so the pose reads on both themes. */}
+      <MiniTv x={172} y={30} w={42} h={30} />
+      <path d="M187 37.5 L199 43 L187 48.5 Z" fill={MINT} />
+      <Floor x1={176} x2={308} y={85} />
+      <g
+        stroke={LINE}
+        strokeWidth={2.5}
+        fill="none"
+        strokeLinecap="round"
+        strokeDasharray="4 3"
+        opacity={0.5}
+      >
+        <path d="M218 38a8 8 0 0 1 0 12" />
+        <path d="M223 33.5a14 14 0 0 1 0 21" />
+        <path d="M228 29a20 20 0 0 1 0 32" />
+      </g>
+      <path
+        className="vls-na-slash"
+        d="M216 29 L250 63"
+        stroke={DANGER}
+        strokeWidth={3.5}
+        strokeLinecap="round"
+        fill="none"
+      />
+      <g className="vls-na-pawn">
+        <path d="M264 85 c0-19.8 8.1-27.9 18-27.9 s18 8.1 18 27.9 Z" fill={YOU} />
+        <circle cx={282} cy={49} r={10.8} fill={YOU} />
+        <circle cx={276} cy={48} r={2} fill="#101a2c" />
+        <circle cx={281} cy={48} r={2} fill="#101a2c" />
+        <g className="vls-na-arm">
+          <path d="M267 72 Q256 57 272 45" stroke="#101a2c" strokeWidth={6.5} strokeLinecap="round" fill="none" />
+          <path d="M267 72 Q256 57 272 45" stroke={YOU} strokeWidth={3.5} strokeLinecap="round" fill="none" />
+        </g>
+        <g className="vls-na-arm">
+          <path d="M297 72 Q308 57 292 45" stroke="#101a2c" strokeWidth={6.5} strokeLinecap="round" fill="none" />
+          <path d="M297 72 Q308 57 292 45" stroke={YOU} strokeWidth={3.5} strokeLinecap="round" fill="none" />
+        </g>
+      </g>
+    </>
+  );
+}
+
+/** 11. room-not-found: 2 paper panels, loop 3s. The door isn't there. */
+function SceneNotFound({ theme }: { theme: ComicTheme }) {
+  return (
+    <>
+      <style>{`
+.vls-rn-knock{animation:vlsRnKnock 3s ease-in-out infinite}
+.vls-rn-kn{animation:vlsRnKn 3s ease-in-out infinite}
+.vls-rn-solid{animation:vlsRnSolid 3s ease-in-out infinite}
+.vls-rn-ghost{animation:vlsRnGhost 3s ease-in-out infinite}
+.vls-rn-puff{animation:vlsRnPuff 3s ease-in-out infinite}
+@keyframes vlsRnKnock{0%{transform:translateX(0)}6%{transform:translateX(5px)}12%{transform:translateX(0)}18%{transform:translateX(5px)}25%,100%{transform:translateX(0)}}
+@keyframes vlsRnKn{0%,3%{opacity:0}7%{opacity:.9}11%{opacity:0}19%{opacity:.9}24%,100%{opacity:0}}
+@keyframes vlsRnSolid{0%,30%{opacity:1}45%,80%{opacity:0}92%,100%{opacity:1}}
+@keyframes vlsRnGhost{0%,30%{opacity:0}45%,80%{opacity:.9}92%,100%{opacity:0}}
+@keyframes vlsRnPuff{0%,38%{opacity:0;transform:translateY(3px)}50%{opacity:.6}68%,100%{opacity:0;transform:translateY(-4px)}}
+${rmBlock(
+  ["vls-rn-knock", "vls-rn-kn", "vls-rn-solid", "vls-rn-ghost", "vls-rn-puff"],
+  [[".vls-rn-solid", "opacity:0"], [".vls-rn-ghost", "opacity:.9"], [".vls-rn-puff,.vls-rn-kn", "opacity:0"]],
+)}
+`}</style>
+      <Frame x={4} w={152} theme={theme} />
+      <Frame x={164} w={152} theme={theme} />
+      <g className="vls-rn-knock">
+        <path d="M52 74 c0-11 5-16 11-16 s11 5 11 16 Z" fill={YOU} />
+        <circle cx={63} cy={49} r={6} fill={YOU} />
+        <circle cx={66} cy={48} r={1} fill="#101a2c" />
+        <circle cx={70} cy={48} r={1} fill="#101a2c" />
+      </g>
+      <g className="vls-rn-kn" stroke="var(--ink)" strokeWidth={2} strokeLinecap="round" opacity={0}>
+        <path d="M84 36l-7-3M82 46h-8M84 56l-7 3" />
+      </g>
+      <Door x={96} y={18} />
+      <g className="vls-rn-solid">
+        <Door x={250} y={18} />
+      </g>
+      <g className="vls-rn-ghost" opacity={0}>
+        <rect
+          x={250}
+          y={18}
+          width={32}
+          height={54}
+          rx={5}
+          fill="none"
+          stroke="var(--ink)"
+          strokeWidth={2.5}
+          strokeDasharray="5 4"
+        />
+      </g>
+      <g className="vls-rn-puff" fill="var(--ink)" opacity={0}>
+        <circle cx={250} cy={30} r={3} />
+        <circle cx={262} cy={24} r={4} />
+        <circle cx={272} cy={32} r={2.5} />
+      </g>
+    </>
+  );
+}
+
+/** 12. access-denied: 2 paper panels, loop 3s. Door there, won't open. */
+function SceneAccessDenied({ theme }: { theme: ComicTheme }) {
+  return (
+    <>
+      <style>{`
+.vls-ad-door{transform-box:fill-box;transform-origin:center;animation:vlsAdShake 3s ease-in-out infinite}
+.vls-ad-x{transform-box:fill-box;transform-origin:center;animation:vlsAdX 3s ease-out infinite}
+@keyframes vlsAdShake{0%{transform:translateX(0)}3%{transform:translateX(-3px)}6%{transform:translateX(3px)}9%{transform:translateX(-2px)}12%{transform:translateX(2px)}15%,100%{transform:translateX(0)}}
+@keyframes vlsAdX{0%,18%{opacity:0;transform:scale(1.6) rotate(8deg)}24%,100%{opacity:1;transform:scale(1) rotate(8deg)}}
+${rmBlock(["vls-ad-door", "vls-ad-x"], [[".vls-ad-x", "opacity:1;transform:scale(1) rotate(8deg)"]])}
+`}</style>
+      <Frame x={4} w={152} theme={theme} />
+      <Frame x={164} w={152} theme={theme} />
+      <Pawn x={48} yb={76} s={9} eyes />
+      <rect x={60} y={38} width={16} height={11} rx={2} fill="var(--paper)" stroke="var(--ink)" strokeWidth={2} />
+      <circle cx={72} cy={43.5} r={1.6} fill="var(--ink)" />
+      <Door x={100} y={18} />
+      <rect x={112} y={40} width={10} height={13} rx={2} fill="var(--paper)" stroke="var(--ink)" strokeWidth={1.5} />
+      <circle cx={117} cy={44} r={1.6} fill="var(--ink)" />
+      <Pawn x={190} yb={76} s={9} eyes />
+      <rect x={202} y={46} width={16} height={11} rx={2} fill="var(--paper)" stroke="var(--ink)" strokeWidth={2} />
+      <circle cx={214} cy={51.5} r={1.6} fill="var(--ink)" />
+      <RedX cx={210} cy={51.5} arm={5.5} className="vls-ad-x" />
+      <g className="vls-ad-door">
+        <Door x={242} y={18} />
+        <rect x={254} y={40} width={10} height={13} rx={2} fill="var(--paper)" stroke="var(--ink)" strokeWidth={1.5} />
+        <circle cx={259} cy={44} r={2} fill={DANGER} />
+      </g>
+    </>
+  );
+}
+
+/** 13. invalid-invite: 2 paper panels, loop 3.2s. The ticket is broken. */
+function SceneInvalidInvite({ theme }: { theme: ComicTheme }) {
+  return (
+    <>
+      <style>{`
+.vls-ii-l{transform-box:fill-box;transform-origin:center;animation:vlsIiL 3.2s ease-in-out infinite}
+.vls-ii-r{transform-box:fill-box;transform-origin:center;animation:vlsIiR 3.2s ease-in-out infinite}
+.vls-ii-x{transform-box:fill-box;transform-origin:center;animation:vlsIiX 3.2s ease-out infinite}
+@keyframes vlsIiL{0%{transform:translate(0,0) rotate(0)}35%,100%{transform:translate(-3px,1px) rotate(-5deg)}}
+@keyframes vlsIiR{0%{transform:translate(0,0) rotate(0)}35%,100%{transform:translate(3px,-1px) rotate(5deg)}}
+@keyframes vlsIiX{0%,38%{opacity:0;transform:scale(1.6) rotate(8deg)}45%,100%{opacity:1;transform:scale(1) rotate(8deg)}}
+${rmBlock(
+  ["vls-ii-l", "vls-ii-r", "vls-ii-x"],
+  [
+    [".vls-ii-l", "transform:translate(-3px,1px) rotate(-5deg)"],
+    [".vls-ii-r", "transform:translate(3px,-1px) rotate(5deg)"],
+    [".vls-ii-x", "opacity:1;transform:scale(1) rotate(8deg)"],
+  ],
+)}
+`}</style>
+      <Frame x={4} w={152} theme={theme} />
+      <Frame x={164} w={152} theme={theme} />
+      <Pawn x={48} yb={76} s={9} eyes />
+      <rect x={62} y={40} width={20} height={13} rx={2} fill="var(--paper)" stroke="var(--ink)" strokeWidth={2} />
+      <path d="M62 42 L72 48 L82 42" stroke="var(--ink)" strokeWidth={1.5} fill="none" />
+      <Pawn x={186} yb={76} s={9} eyes />
+      <g className="vls-ii-l">
+        <path
+          d="M228 38 H241 L238 42 L242 46 L238 50 L241 54 H228 Z"
+          fill="var(--paper)"
+          stroke="var(--ink)"
+          strokeWidth={2}
+          strokeLinejoin="round"
+        />
+      </g>
+      <g className="vls-ii-r">
+        <path
+          d="M252 38 H241 L244 42 L240 46 L244 50 L241 54 H252 Z"
+          fill="var(--paper)"
+          stroke="var(--ink)"
+          strokeWidth={2}
+          strokeLinejoin="round"
+        />
+      </g>
+      <RedX cx={240} cy={46} arm={6} className="vls-ii-x" />
+    </>
+  );
+}
+
+/** 14. room-full: 2 paper panels, loop 3.2s. Cute first, verdict clear. */
+function SceneRoomFull({ theme }: { theme: ComicTheme }) {
+  const crowd = [
+    "var(--pawn-1)",
+    "var(--pawn-2)",
+    "var(--pawn-3)",
+    "var(--pawn-4)",
+    "var(--pawn-5)",
+    "var(--pawn-6)",
+    "var(--pawn-7)",
+  ];
+  return (
+    <>
+      <style>{`
+.vls-fl-c1{animation:vlsFlSquish 3.2s ease-in-out infinite}
+.vls-fl-c2{animation:vlsFlSquish 3.2s ease-in-out .09s infinite}
+.vls-fl-c3{animation:vlsFlSquish 3.2s ease-in-out .18s infinite}
+.vls-fl-c4{animation:vlsFlSquish 3.2s ease-in-out .27s infinite}
+.vls-fl-c5{animation:vlsFlSquish 3.2s ease-in-out .36s infinite}
+.vls-fl-c6{animation:vlsFlSquish 3.2s ease-in-out .45s infinite}
+.vls-fl-c7{animation:vlsFlSquish 3.2s ease-in-out .54s infinite}
+.vls-fl-you{transform-box:fill-box;transform-origin:50% 100%;animation:vlsFlBob 3.2s ease-in-out infinite}
+.vls-fl-ghost{animation:vlsFlGhost 3.2s ease-in-out infinite}
+@keyframes vlsFlSquish{0%{transform:translateY(0)}8%{transform:translateY(-1.5px)}16%,100%{transform:translateY(0)}}
+@keyframes vlsFlBob{0%,14%{transform:translate(0,0)}20%{transform:translate(0,-3px)}26%,30%{transform:translate(0,0)}36%{transform:translate(0,-3px)}44%,100%{transform:translate(0,0)}}
+@keyframes vlsFlGhost{0%,45%{opacity:.55}50%{opacity:.15}52%{opacity:.5}55%,100%{opacity:0}}
+${rmBlock(
+  ["vls-fl-c1", "vls-fl-c2", "vls-fl-c3", "vls-fl-c4", "vls-fl-c5", "vls-fl-c6", "vls-fl-c7", "vls-fl-you", "vls-fl-ghost"],
+  [[".vls-fl-ghost", "opacity:0"]],
+)}
+`}</style>
+      <Frame x={4} w={152} theme={theme} />
+      <Frame x={164} w={152} theme={theme} />
+      {crowd.map((color, i) => (
+        <Pawn key={i} x={40 + i * 12} yb={56} s={5.5} color={color} className={`vls-fl-c${i + 1}`} />
+      ))}
+      <rect x={30} y={48} width={92} height={20} rx={10} fill="var(--couch)" />
+      <rect x={24} y={62} width={104} height={16} rx={8} fill="var(--couch)" />
+      <g className="vls-fl-you">
+        <Pawn x={240} yb={64} s={7} eyes />
+      </g>
+      <rect x={196} y={58} width={100} height={22} rx={11} fill="var(--couch)" />
+      <rect
+        className="vls-fl-ghost"
+        x={268}
+        y={40}
+        width={22}
+        height={16}
+        rx={4}
+        fill="none"
+        stroke="var(--ink)"
+        strokeWidth={2}
+        strokeDasharray="4 3"
+        opacity={0.55}
+      />
+    </>
+  );
+}
+
+/** 15. warning: 1 wide panel, loop 2.6s. Persistent condition: the you-pawn
+ * stands beside the big Hearth coal-bowl warning glyph; heat-rays rise in a
+ * staggered 0-55% window, the pawn blinks at 70%, rest >=50%. */
+function SceneWarning({ theme }: { theme: ComicTheme }) {
+  return (
+    <>
+      <style>{`
+.vls-wn-ray1{animation:vlsWnRay 2.6s ease-out infinite}
+.vls-wn-ray2{animation:vlsWnRay 2.6s ease-out .25s infinite}
+.vls-wn-ray3{animation:vlsWnRay 2.6s ease-out .5s infinite}
+.vls-wn-eyes{transform-box:fill-box;transform-origin:center;animation:vlsWnBlink 2.6s ease-in-out infinite}
+@keyframes vlsWnRay{0%{opacity:0;transform:translateY(3px)}9%{opacity:1}24%{transform:translateY(-2px)}50%,100%{transform:translateY(-2px);opacity:1}}
+@keyframes vlsWnBlink{0%,66%,74%,100%{transform:scaleY(1)}70%{transform:scaleY(.12)}}
+${rmBlock(
+  ["vls-wn-ray1", "vls-wn-ray2", "vls-wn-ray3", "vls-wn-eyes"],
+  [[".vls-wn-ray1,.vls-wn-ray2,.vls-wn-ray3", "opacity:1;transform:none"]],
+)}
+`}</style>
+      <Frame x={4} w={312} theme={theme} />
+      <Floor x1={24} x2={296} />
+      <Pawn x={96} yb={76} s={11} />
+      <g className="vls-wn-eyes">
+        <circle cx={98} cy={53} r={1.1} fill="#101a2c" />
+        <circle cx={101.6} cy={53} r={1.1} fill="#101a2c" />
+      </g>
+      {/* Hearth warning glyph x3.5 (~54% panel height), bowl feet on the floor:
+          M6 13a6 6 0 0 0 12 0 + rays M12 9V5.5 / M8.5 9.5 7 7.5 / M15.5 9.5 17 7.5,
+          baked at origin (168, 9.5). */}
+      <path
+        d="M189 55 a21 21 0 0 0 42 0"
+        stroke={WARN}
+        strokeWidth={2.5}
+        strokeLinecap="round"
+        fill="none"
+      />
+      <g stroke={WARN} strokeWidth={2.5} strokeLinecap="round" fill="none">
+        <g className="vls-wn-ray1" opacity={0}>
+          <path d="M197.75 42.75 L192.5 35.75" />
+          <path d="M188.5 41 l-4 -3.5" stroke={FAINT} strokeWidth={2} />
+        </g>
+        <g className="vls-wn-ray2" opacity={0}>
+          <path d="M210 41 V28.75" />
+        </g>
+        <g className="vls-wn-ray3" opacity={0}>
+          <path d="M222.25 42.75 L227.5 35.75" />
+          <path d="M231.5 41 l4 -3.5" stroke={FAINT} strokeWidth={2} />
+        </g>
+      </g>
+    </>
+  );
+}
+
+/* ------------------------------ component ------------------------------ */
+const SCENES: Record<ComicKind, (props: { theme: ComicTheme }) => ReactNode> = {
+  "waiting-for-host": SceneWaiting,
+  "connecting-p2p": (p) => <SceneConnecting {...p} sfu={false} />,
+  "connecting-sfu": (p) => <SceneConnecting {...p} sfu />,
+  "tap-to-play": SceneTap,
+  "host-paused": ScenePaused,
+  recovering: SceneRecovering,
+  "route-failed": SceneRouteFailed,
+  "playback-failed": ScenePlaybackFailed,
+  "host-offline": SceneHostOffline,
+  "no-audio": SceneNoAudio,
+  "room-not-found": SceneNotFound,
+  "access-denied": SceneAccessDenied,
+  "invalid-invite": SceneInvalidInvite,
+  "room-full": SceneRoomFull,
+  warning: SceneWarning,
+};
+
+/**
+ * Self-contained pictorial state strip. Renders a 320x96 inline SVG at
+ * width min(320px, 86%). The SVG is aria-hidden: wrap it in a role="status"
+ * container with a localized aria-label (README §4).
+ */
+export function Comic({
+  kind,
+  size,
+  theme,
+}: {
+  kind: ComicKind;
+  size?: number;
+  theme?: ComicTheme;
+}) {
+  const resolvedTheme = theme ?? DEFAULT_THEME[kind];
+  const style: CSSProperties = {
+    width: size != null ? `${size}px` : "min(320px, 86%)",
+    height: "auto",
+    display: "block",
+  };
+  return (
+    <svg
+      viewBox="0 0 320 96"
+      style={style}
+      aria-hidden="true"
+      focusable="false"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      {SCENES[kind]({ theme: resolvedTheme })}
+    </svg>
+  );
+}
diff --git a/src/client/components/living/ComicTooltip.tsx b/src/client/components/living/ComicTooltip.tsx
new file mode 100644
index 0000000..56266e3
--- /dev/null
+++ b/src/client/components/living/ComicTooltip.tsx
@@ -0,0 +1,246 @@
+// Comic tooltip: a floating paper panel showing a panel comic above (or below)
+// its trigger. Visibility is three-channel, matching platform conventions:
+// hover on fine pointers, keyboard focus via :has(:focus-visible), and the
+// Material long-press on touch (500ms hold → open, ~1.5s after release →
+// auto-hide, context menu and the trailing synthetic click suppressed).
+// Alignment: the align prop is a desktop-tuned preference; whenever a show
+// channel opens, the trigger's live viewport position is measured and
+// start/center/end is re-picked so the panel never clips off-screen (rows
+// wrap at narrow widths, so a static choice cannot hold). The caret lives on
+// the wrapper, so it stays centered on the trigger whatever the panel picks.
+// Styling in styles.css under "comic tooltip" / "glyph draw-in". SSR-safe:
+// handlers only run in the browser.
+
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import { Comic, type ComicKind } from "./Comic";
+import { HintComic, isHintKind, type HintKind } from "./hints";
+
+const LONG_PRESS_MS = 500;
+const TOUCH_HIDE_MS = 1500;
+// Minimum clearance the re-picked alignment keeps to each viewport edge.
+const EDGE_MARGIN = 8;
+
+type Align = "center" | "start" | "end";
+
+export function ComicTooltip({
+  kind,
+  place = "above",
+  align = "center",
+  children,
+}: {
+  kind: ComicKind | HintKind;
+  /** below = for controls pinned to the viewport top (header). */
+  place?: "above" | "below";
+  /** Preferred alignment; re-picked at open time if it would clip off-screen. */
+  align?: Align;
+  children: ReactNode;
+}) {
+  const wrapRef = useRef<HTMLSpanElement | null>(null);
+  const tipRef = useRef<HTMLSpanElement | null>(null);
+  const pressTimer = useRef<number | null>(null);
+  const hideTimer = useRef<number | null>(null);
+  const longPressed = useRef(false);
+  const pressPoint = useRef<{ x: number; y: number } | null>(null);
+  const [touchOpen, setTouchOpen] = useState(false);
+  const [liveAlign, setLiveAlign] = useState<Align | null>(null);
+
+  // Re-pick alignment from the trigger's live geometry. The configured align
+  // wins whenever it fits; otherwise the first alignment that keeps the whole
+  // panel inside the viewport, then whichever clips least (panel wider than
+  // the viewport is impossible — CSS caps it — but stay total).
+  const pickAlign = () => {
+    const wrap = wrapRef.current;
+    if (!wrap) return;
+    const vw = window.innerWidth;
+    if (!vw) return; // no layout (SSR/test): keep the prop alignment
+    const rect = wrap.getBoundingClientRect();
+    const measured = tipRef.current?.offsetWidth ?? 0;
+    const width = Math.max(0, Math.min(measured || 320, vw - EDGE_MARGIN * 2));
+    const center = rect.left + rect.width / 2;
+    const boxes: Record<Align, { left: number; right: number }> = {
+      center: { left: center - width / 2, right: center + width / 2 },
+      start: { left: rect.left, right: rect.left + width },
+      end: { left: rect.right - width, right: rect.right },
+    };
+    const clipped = (box: { left: number; right: number }): number =>
+      Math.max(0, EDGE_MARGIN - box.left) +
+      Math.max(0, box.right - (vw - EDGE_MARGIN));
+    const order: Align[] = [
+      align,
+      ...(["center", "start", "end"] as Align[]).filter((a) => a !== align),
+    ];
+    const fits = order.find((a) => clipped(boxes[a]) === 0);
+    setLiveAlign(
+      fits ??
+        order.reduce((a, b) => (clipped(boxes[a]) <= clipped(boxes[b]) ? a : b)),
+    );
+  };
+
+  // Single owner of panel placement: while the tooltip may be open (hover,
+  // focus, or long-press), viewport resize/scroll re-picks the alignment so
+  // the panel stays inside the viewport mid-open — no page-level clamps.
+  const pickAlignRef = useRef(pickAlign);
+  pickAlignRef.current = pickAlign;
+  useEffect(() => {
+    const wrap = wrapRef.current;
+    if (!wrap) return;
+    let frame = 0;
+    let listening = false;
+    const schedulePick = () => {
+      window.cancelAnimationFrame(frame);
+      frame = window.requestAnimationFrame(() => pickAlignRef.current());
+    };
+    const open = () => {
+      if (listening) return;
+      listening = true;
+      window.addEventListener("resize", schedulePick);
+      window.addEventListener("scroll", schedulePick, true);
+    };
+    const close = () => {
+      if (!listening) return;
+      listening = false;
+      window.removeEventListener("resize", schedulePick);
+      window.removeEventListener("scroll", schedulePick, true);
+    };
+    wrap.addEventListener("pointerenter", open);
+    wrap.addEventListener("pointerleave", close);
+    wrap.addEventListener("focusin", open);
+    wrap.addEventListener("focusout", close);
+    return () => {
+      window.cancelAnimationFrame(frame);
+      close();
+      wrap.removeEventListener("pointerenter", open);
+      wrap.removeEventListener("pointerleave", close);
+      wrap.removeEventListener("focusin", open);
+      wrap.removeEventListener("focusout", close);
+    };
+  }, []);
+
+  // The long-press channel outlives the touch contact: listen while open.
+  useEffect(() => {
+    if (!touchOpen) return;
+    let frame = 0;
+    const schedulePick = () => {
+      window.cancelAnimationFrame(frame);
+      frame = window.requestAnimationFrame(() => pickAlignRef.current());
+    };
+    window.addEventListener("resize", schedulePick);
+    window.addEventListener("scroll", schedulePick, true);
+    return () => {
+      window.cancelAnimationFrame(frame);
+      window.removeEventListener("resize", schedulePick);
+      window.removeEventListener("scroll", schedulePick, true);
+    };
+  }, [touchOpen]);
+
+  useEffect(
+    () => () => {
+      if (pressTimer.current !== null) window.clearTimeout(pressTimer.current);
+      if (hideTimer.current !== null) window.clearTimeout(hideTimer.current);
+    },
+    [],
+  );
+
+  // While long-press-open, any tap elsewhere dismisses (WCAG dismissible).
+  useEffect(() => {
+    if (!touchOpen) return;
+    const dismiss = (event: PointerEvent) => {
+      if (!wrapRef.current?.contains(event.target as Node)) {
+        setTouchOpen(false);
+      }
+    };
+    document.addEventListener("pointerdown", dismiss);
+    return () => document.removeEventListener("pointerdown", dismiss);
+  }, [touchOpen]);
+
+  const cancelPress = () => {
+    if (pressTimer.current !== null) {
+      window.clearTimeout(pressTimer.current);
+      pressTimer.current = null;
+    }
+  };
+
+  const placeClass = place === "below" ? " is-below" : "";
+  const shownAlign = liveAlign ?? align;
+  const alignClass =
+    shownAlign === "start" ? " is-start" : shownAlign === "end" ? " is-end" : "";
+  return (
+    <span
+      ref={wrapRef}
+      className={`lr-comic-tip-wrap${touchOpen ? " is-tip-open" : ""}`}
+      onPointerEnter={pickAlign}
+      onFocus={pickAlign}
+      onPointerDown={(event) => {
+        if (event.pointerType !== "touch") return;
+        cancelPress();
+        pressPoint.current = { x: event.clientX, y: event.clientY };
+        pressTimer.current = window.setTimeout(() => {
+          pressTimer.current = null;
+          longPressed.current = true;
+          pickAlign();
+          setTouchOpen(true);
+        }, LONG_PRESS_MS);
+      }}
+      onPointerUp={() => {
+        cancelPress();
+        pressPoint.current = null;
+        if (longPressed.current) {
+          if (hideTimer.current !== null) window.clearTimeout(hideTimer.current);
+          hideTimer.current = window.setTimeout(() => {
+            longPressed.current = false;
+            setTouchOpen(false);
+          }, TOUCH_HIDE_MS);
+        }
+      }}
+      onPointerCancel={() => {
+        cancelPress();
+        pressPoint.current = null;
+        longPressed.current = false;
+        if (hideTimer.current !== null) {
+          window.clearTimeout(hideTimer.current);
+          hideTimer.current = null;
+        }
+        setTouchOpen(false);
+      }}
+      onPointerMove={(event) => {
+        // Only a real drag (scroll intent) cancels the hold — Chrome emits
+        // sub-pixel settling moves right after touchstart that must not count.
+        if (pressTimer.current !== null && event.pointerType === "touch" && pressPoint.current) {
+          const dx = event.clientX - pressPoint.current.x;
+          const dy = event.clientY - pressPoint.current.y;
+          if (dx * dx + dy * dy > 100) cancelPress();
+        }
+      }}
+      onContextMenu={(event) => {
+        // Long-press on a wrapped control means "show the hint", never the
+        // native context menu. Chrome fires contextmenu as a PointerEvent;
+        // fall back to treating unknown types as touch.
+        if ((event.nativeEvent as PointerEvent).pointerType !== "mouse") {
+          event.preventDefault();
+        }
+      }}
+      onClickCapture={(event) => {
+        // The synthetic click after a long-press must not fire the control.
+        if (longPressed.current) {
+          event.preventDefault();
+          event.stopPropagation();
+        }
+      }}
+      onKeyDown={(event) => {
+        if (event.key === "Escape") {
+          setTouchOpen(false);
+          (document.activeElement as HTMLElement | null)?.blur?.();
+        }
+      }}
+    >
+      {children}
+      <span ref={tipRef} className={`lr-comic-tip${placeClass}${alignClass}`} role="note">
+        {isHintKind(kind) ? (
+          <HintComic kind={kind} size={240} />
+        ) : (
+          <Comic kind={kind} theme="paper" size={240} />
+        )}
+      </span>
+    </span>
+  );
+}
diff --git a/src/client/components/living/Couch.tsx b/src/client/components/living/Couch.tsx
new file mode 100644
index 0000000..7bd1f32
--- /dev/null
+++ b/src/client/components/living/Couch.tsx
@@ -0,0 +1,149 @@
+// The couch: the roster as pawns watching the TV. Joining pawns hop in,
+// self carries the green pointer, the host wears a crown (topology only).
+import { Glyph } from "../../ui/icons";
+import { useCopy } from "../../ui/copy";
+
+const PAWN_COLORS = [
+  "var(--pawn-1)", "var(--pawn-2)", "var(--pawn-3)", "var(--pawn-4)",
+  "var(--pawn-5)", "var(--pawn-6)", "var(--pawn-7)", "var(--pawn-8)",
+];
+const YOU_COLOR = "var(--you)";
+
+export function pawnColor(key: string, you = false): string {
+  if (you) return YOU_COLOR;
+  let hash = 0;
+  for (const char of key) hash = (hash * 31 + char.charCodeAt(0)) | 0;
+  return PAWN_COLORS[Math.abs(hash) % PAWN_COLORS.length]!;
+}
+
+export function PawnSvg({ color, crown }: { color: string; crown?: boolean }) {
+  return (
+    <svg viewBox="0 0 40 48" width="40" height="48" aria-hidden="true">
+      {crown ? (
+        <path
+          d="M11 12.5 L8.5 2 L14 6.5 L17 0 L20 6.5 L25.5 2 L23 12.5 Z"
+          fill="var(--pawn-2)"
+        />
+      ) : null}
+      <circle cx="20" cy="14" r="8.5" fill={color} />
+      <path d="M5 46c0-13 6.5-17 15-17s15 4 15 17Z" fill={color} />
+      <circle cx="17" cy="13" r="1.6" fill="var(--stage)" />
+      <circle cx="23" cy="13" r="1.6" fill="var(--stage)" />
+    </svg>
+  );
+}
+
+export interface CouchEntry {
+  key: string;
+  name: string;
+  connected: boolean;
+  statusLabel?: string;
+  you?: boolean;
+  child?: boolean;
+  selectable?: boolean;
+}
+
+export function Couch({
+  entries,
+  selectedKey,
+  onSelect,
+  emptyHint,
+}: {
+  entries: CouchEntry[];
+  selectedKey?: string | null;
+  onSelect?: (key: string) => void;
+  emptyHint?: string;
+}) {
+  const { vis, t } = useCopy();
+  const crowded = entries.length > 10;
+
+  return (
+    <div className="lr-couch">
+      <svg viewBox="0 0 640 132" aria-hidden="true">
+        <rect x="70" y="110" width="18" height="16" rx="5" fill="var(--frame)" />
+        <rect x="552" y="110" width="18" height="16" rx="5" fill="var(--frame)" />
+        <rect x="28" y="28" width="58" height="80" rx="24" fill="var(--couch-dark)" />
+        <rect x="554" y="28" width="58" height="80" rx="24" fill="var(--couch-dark)" />
+        <rect x="56" y="18" width="528" height="58" rx="27" fill="var(--couch)" />
+        <rect x="44" y="62" width="552" height="50" rx="23" fill="var(--couch)" />
+        <path d="M212 64v46M428 64v46" stroke="var(--couch-dark)" strokeWidth="4" strokeLinecap="round" />
+      </svg>
+      <div
+        className={`lr-pawns${crowded ? " is-crowded" : ""}`}
+        role="group"
+        aria-label={t("common.viewers")}
+      >
+        {entries.map((entry, index) => {
+          const stateLabel = entry.connected
+            ? t("state.peer.connected")
+            : (entry.statusLabel ?? t("state.peer.connecting"));
+          const label = entry.you
+            ? `${entry.name} · ${t("common.you")}`
+            : `${entry.name} · ${stateLabel}`;
+          const showName = !vis && !entry.child && !crowded;
+          const inner = (
+            <>
+              <PawnSvg color={pawnColor(entry.key, entry.you)} />
+              <i
+                className={`lr-pawn-led${entry.connected ? "" : " is-wait"}`}
+                // With a name pill the default bottom:4px lands on the pill's
+                // right end; lift the LED onto the figure instead. Scoped here
+                // because the living-room stylesheet is owned elsewhere.
+                style={showName ? { bottom: 20 } : undefined}
+                aria-hidden="true"
+              />
+              {showName ? (
+                // 58px ellipsizes the EN default "Visitor"; 72px fits it.
+                <span className="lr-pawn-name" style={{ maxWidth: 72 }}>
+                  {entry.name}
+                </span>
+              ) : null}
+            </>
+          );
+          // Hop stagger derives from position only, so render stays pure
+          // (a seen-keys map mutates during render: StrictMode's discarded
+          // first pass pre-fills it and the committed render gets 0ms).
+          const style = { animationDelay: `${Math.min(index, 12) * 70}ms` };
+          const className = `lr-pawn${entry.you ? " is-you" : ""}${entry.child ? " is-child" : ""}${
+            entry.selectable === false ? " is-static" : ""
+          }${selectedKey === entry.key ? " is-selected" : ""}`;
+          if (entry.selectable === false) {
+            return (
+              <span
+                key={entry.key}
+                className={className}
+                style={style}
+                title={vis ? undefined : label}
+                aria-label={label}
+              >
+                {inner}
+              </span>
+            );
+          }
+          return (
+            <button
+              key={entry.key}
+              type="button"
+              className={className}
+              style={style}
+              title={vis ? undefined : label}
+              aria-label={label}
+              aria-pressed={selectedKey === entry.key}
+              onClick={() => onSelect?.(entry.key)}
+            >
+              {inner}
+            </button>
+          );
+        })}
+      </div>
+      {entries.length === 0 ? (
+        <div
+          className="lr-couch-empty"
+          title={vis ? undefined : (emptyHint ?? t("host.viewers.empty"))}
+        >
+          <Glyph name="users" size={22} />
+        </div>
+      ) : null}
+    </div>
+  );
+}
diff --git a/src/client/components/living/Header.tsx b/src/client/components/living/Header.tsx
new file mode 100644
index 0000000..43b76ae
--- /dev/null
+++ b/src/client/components/living/Header.tsx
@@ -0,0 +1,94 @@
+// App header: brand mark, LED connection state, language-mode pill
+// (中文 / EN / 纯视觉), and theme toggle.
+import { VisGlyph } from "./primitives";
+import { ComicTooltip } from "./ComicTooltip";
+import { useCopy, type Lang } from "../../ui/copy";
+import { useTheme } from "../../ui/theme";
+
+export type LedState = "live" | "busy" | "warn" | "bad" | "off";
+
+export function LedStrip({ state, label }: { state: LedState; label: string }) {
+  const { vis } = useCopy();
+  return (
+    <span className="lr-leds" data-state={state} role="status" title={vis ? undefined : label} aria-label={label}>
+      <i />
+      <i />
+      <i />
+      {vis ? null : <span className="lr-leds-label">{label}</span>}
+    </span>
+  );
+}
+
+export function HeaderControls() {
+  const { lang, vis, t, setLang, setVis } = useCopy();
+  const { theme, toggle } = useTheme();
+  const option = (mode: Lang | "vis", label: string, tipKey: "mode.zh" | "mode.en" | "mode.vis") => {
+    const active = mode === "vis" ? vis : !vis && lang === mode;
+    return (
+      <button
+        type="button"
+        className={active ? "is-selected" : ""}
+        title={vis ? undefined : t(tipKey)}
+        aria-label={t(tipKey)}
+        aria-pressed={active}
+        onClick={() => (mode === "vis" ? setVis(true) : setLang(mode))}
+      >
+        {label}
+      </button>
+    );
+  };
+  const themeTitle = t(theme === "dark" ? "theme.light" : "theme.dark");
+  const themeButton = (
+    <button
+      type="button"
+      className="lr-btn"
+      style={{ minWidth: 40, height: 40, borderRadius: 999 }}
+      title={vis ? undefined : themeTitle}
+      aria-label={themeTitle}
+      onClick={(event) => {
+        // Hint-wrapped in vis: pointer activation must not leave the comic
+        // pinned open by focus over the stage (keyboard clicks keep focus).
+        if (vis && event.detail !== 0) event.currentTarget.blur();
+        toggle();
+      }}
+    >
+      <VisGlyph name={theme === "dark" ? "sun" : "moon"} size={16} draw="theme-toggle" />
+      {vis ? null : (
+        <span className="lr-cap">
+          {t(theme === "dark" ? "theme.light.short" : "theme.dark.short")}
+        </span>
+      )}
+    </button>
+  );
+  return (
+    <span className="lr-top-right lr-header-controls">
+      <span className="lr-lang" role="group" aria-label={t("mode.language")}>
+        {option("zh", "中", "mode.zh")}
+        {option("en", "EN", "mode.en")}
+        {option("vis", vis ? "✦" : "视", "mode.vis")}
+      </span>
+      {vis ? (
+        <ComicTooltip kind="hint-theme" place="below" align="end">
+          {themeButton}
+        </ComicTooltip>
+      ) : (
+        themeButton
+      )}
+    </span>
+  );
+}
+
+export function AppHeader({ led }: { led?: React.ReactNode }) {
+  const { t, vis } = useCopy();
+  return (
+    <header className="lr-top">
+      <a className="lr-brand" href="/" aria-label={t("brand.home")} title={vis ? undefined : t("brand.home")}>
+        <VisGlyph name="tv" size={24} />
+      </a>
+      <span className="lr-top-right">
+        {led}
+        <HeaderControls />
+      </span>
+    </header>
+  );
+}
diff --git a/src/client/components/living/Metrics.tsx b/src/client/components/living/Metrics.tsx
new file mode 100644
index 0000000..50755ab
--- /dev/null
+++ b/src/client/components/living/Metrics.tsx
@@ -0,0 +1,257 @@
+// Connection metrics as living-room meter cells: glyph + value, plus the
+// label in text modes. Secondary metrics expand behind a chevron.
+import { useId, useState, type ReactNode } from "react";
+import { Glyph, type GlyphName } from "../../ui/icons";
+import { useCopy, type CopyKey } from "../../ui/copy";
+import { ComicTooltip } from "./ComicTooltip";
+import { Pill } from "./primitives";
+import type { ConnectionMetrics } from "../../types";
+import { formatPacketLossPercent } from "../connection-details";
+
+interface MetricValue {
+  icon: GlyphName;
+  label: CopyKey;
+  value: string;
+  title?: string;
+}
+
+export function codecContractWarnings(
+  metrics: ConnectionMetrics,
+  t: (key: CopyKey, vars?: Record<string, string>) => string,
+): string[] {
+  const warnings: string[] = [];
+  const codecName = (codec: string) => codec.split("/").at(-1) ?? codec;
+  if (
+    metrics.codec &&
+    !["video/h264", "video/vp8"].includes(metrics.codec.toLowerCase())
+  ) {
+    warnings.push(t("stats.warn.codec", { codec: codecName(metrics.codec) }));
+  }
+  if (metrics.audioCodec && metrics.audioCodec.toLowerCase() !== "audio/opus") {
+    warnings.push(t("stats.warn.audioCodec", { codec: codecName(metrics.audioCodec) }));
+  }
+  return warnings;
+}
+
+function secondaryMetrics(
+  metrics: ConnectionMetrics,
+  direction: "send" | "receive",
+  t: (key: CopyKey, vars?: Record<string, string>) => string,
+): MetricValue[] {
+  const values: MetricValue[] = [];
+  const readable = (value: number | null, digits = 0): string =>
+    value === null || !Number.isFinite(value) ? t("stats.unknown") : value.toFixed(digits);
+  const addNumber = (
+    label: CopyKey,
+    icon: GlyphName,
+    value: number | null,
+    unit: string,
+    digits = 0,
+    title?: string,
+  ) => {
+    if (value !== null && Number.isFinite(value)) {
+      values.push({ icon, label, value: `${readable(value, digits)} ${unit}`, title });
+    }
+  };
+  const qualityReason = (value: string): string => {
+    const keys: Record<string, CopyKey> = {
+      none: "stats.quality.normal",
+      bandwidth: "stats.quality.bandwidth",
+      cpu: "stats.quality.cpu",
+      other: "stats.quality.other",
+    };
+    return t(keys[value] ?? "stats.quality.unclassified");
+  };
+
+  addNumber("stats.rtt", "clock", metrics.rttMs, "ms");
+  if (metrics.codec) {
+    values.push({
+      icon: "cpu",
+      label: "stats.codec",
+      value: metrics.codec.split("/").at(-1) ?? metrics.codec,
+    });
+  }
+
+  if (direction === "send") {
+    addNumber("stats.outgoing", "gauge", metrics.availableOutgoingKbps, "kbps");
+    if (metrics.qualityLimitationReason) {
+      values.push({
+        icon: "gauge",
+        label: "stats.qualityState",
+        value: qualityReason(metrics.qualityLimitationReason),
+      });
+    }
+    const captureParts: string[] = [];
+    let captureDiffersFromDelivery = false;
+    if (metrics.captureWidth !== null && metrics.captureHeight !== null) {
+      const captureResolution = `${metrics.captureWidth}x${metrics.captureHeight}`;
+      captureParts.push(captureResolution);
+      captureDiffersFromDelivery ||= captureResolution !== metrics.resolution;
+    }
+    if (metrics.captureFramesPerSecond !== null) {
+      const captureFps = readable(metrics.captureFramesPerSecond, 1);
+      captureParts.push(`${captureFps} fps`);
+      captureDiffersFromDelivery ||=
+        metrics.framesPerSecond === null ||
+        !Number.isFinite(metrics.framesPerSecond) ||
+        captureFps !== metrics.framesPerSecond.toFixed(1);
+    }
+    if (captureParts.length > 0 && captureDiffersFromDelivery) {
+      values.push({ icon: "expand", label: "stats.capture", value: captureParts.join(" · ") });
+    }
+    addNumber("stats.inputFps", "wave", metrics.mediaSourceFramesPerSecond, "fps", 1);
+    if (metrics.encoderImplementation) {
+      values.push({
+        icon: "cpu",
+        label: "stats.encoder",
+        value: `${metrics.encoderImplementation}${
+          metrics.powerEfficientEncoder === true
+            ? " · ✓"
+            : metrics.powerEfficientEncoder === false
+              ? " · ✗"
+              : ""
+        }`,
+      });
+    }
+    addNumber("stats.encodeMs", "clock", metrics.intervalEncodeMs, "ms", 1);
+  } else {
+    addNumber("stats.jitter", "wave", metrics.jitterMs, "ms", 1);
+    addNumber("stats.dropped", "drop", metrics.framesDropped, "", 0);
+    addNumber("stats.decodeMs", "clock", metrics.intervalDecodeMs, "ms", 1);
+    addNumber("stats.freezeCount", "alert", metrics.intervalFreezeCount, "", 0);
+    addNumber("stats.freezeDuration", "clock", metrics.intervalFreezeDurationMs, "ms", 1);
+  }
+
+  addNumber("stats.audio", "speaker", metrics.audioBitrateKbps, "kbps");
+  if (metrics.audioPacketLossPercent !== null) {
+    values.push({
+      icon: "drop",
+      label: "stats.audioLoss",
+      value: formatPacketLossPercent(metrics.audioPacketLossPercent, t("stats.unknown")),
+    });
+  }
+  addNumber("stats.audioJitter", "wave", metrics.audioJitterMs, "ms", 1);
+
+  if (direction === "receive") {
+    addNumber("stats.playoutDelta", "clock", metrics.audioVideoPlayoutDeltaMs, "ms", 1);
+    addNumber("stats.videoBuffer", "clock", metrics.videoJitterBufferDelayMs, "ms", 1);
+    addNumber("stats.audioBuffer", "clock", metrics.audioJitterBufferDelayMs, "ms", 1);
+    if (metrics.audioConcealedSamplesPercent !== null) {
+      values.push({
+        icon: "drop",
+        label: "stats.audioConcealedRate",
+        value: formatPacketLossPercent(metrics.audioConcealedSamplesPercent, t("stats.unknown")),
+      });
+    }
+    addNumber("stats.audioConcealed", "speaker", metrics.intervalAudioConcealmentEvents, "", 0);
+  }
+
+  return values;
+}
+
+export function MetricCells({
+  metrics,
+  direction,
+  expanded,
+  onToggle,
+}: {
+  metrics: ConnectionMetrics;
+  direction: "send" | "receive";
+  expanded: boolean;
+  onToggle: (expanded: boolean) => void;
+}) {
+  const { t, vis } = useCopy();
+  const cell = ({ icon, label, value, title }: MetricValue): ReactNode => {
+    if (vis && label === "stats.qualityState") return null;
+    const display = vis && value === t("stats.unknown") ? "—" : value;
+    return (
+    <span className="lr-meter-cell" title={vis ? undefined : title ?? t(label)} key={label + display}>
+      <Glyph name={icon} size={16} />
+      {vis ? (
+        <b>{display}</b>
+      ) : (
+        <span className="lr-meter-text">
+          <b>{display}</b>
+          <small>{t(label)}</small>
+        </span>
+      )}
+    </span>
+    );
+  };
+
+  const primary: MetricValue[] = [
+    { icon: "expand", label: "stats.resolution", value: metrics.resolution ?? t("stats.unknown") },
+    {
+      icon: "wave",
+      label: "stats.fps",
+      value: metrics.framesPerSecond === null || !Number.isFinite(metrics.framesPerSecond)
+        ? t("stats.unknown")
+        : `${metrics.framesPerSecond.toFixed(1)} fps`,
+    },
+    {
+      icon: "gauge",
+      label: "stats.bitrate",
+      value: metrics.bitrateKbps === null || !Number.isFinite(metrics.bitrateKbps)
+        ? t("stats.unknown")
+        : `${metrics.bitrateKbps.toFixed(0)} kbps`,
+    },
+    { icon: "drop", label: "stats.loss", value: formatPacketLossPercent(metrics.packetLossPercent, t("stats.unknown")) },
+  ];
+  const secondary = secondaryMetrics(metrics, direction, t);
+  const warnings = codecContractWarnings(metrics, t);
+  const secondaryId = useId();
+  const moreTitle = t(expanded ? "stats.less" : "stats.more");
+  const moreButton = (
+    <button
+      type="button"
+      className={`lr-btn lr-metrics-more${expanded ? " is-open" : ""}`}
+      title={vis ? undefined : moreTitle}
+      aria-label={moreTitle}
+      aria-expanded={expanded}
+      aria-controls={secondaryId}
+      onClick={(event) => {
+        // Hint-wrapped in vis: pointer activation must not leave the comic
+        // pinned open by focus (keyboard clicks keep focus).
+        if (vis && event.detail !== 0) event.currentTarget.blur();
+        onToggle(!expanded);
+      }}
+    >
+      <Glyph name="chevron" size={15} />
+      {vis ? null : <span className="lr-cap">{t("stats.more")}</span>}
+    </button>
+  );
+
+  return (
+    <>
+      <div className="lr-meter" role="group" aria-label={t("stats.title")}>
+        {primary.map(cell)}
+      </div>
+      {secondary.length > 0 ? (
+        <>
+          {vis ? (
+            // This button lands at the card's left edge (the meter takes a
+            // full flex basis), so prefer start; ComicTooltip re-picks from
+            // live geometry if that would clip.
+            <ComicTooltip kind="hint-more-metrics" align="start">{moreButton}</ComicTooltip>
+          ) : (
+            moreButton
+          )}
+          {expanded ? (
+            <div id={secondaryId} className="lr-meter" role="group" aria-label={t("stats.more")}>
+              {secondary.map(cell)}
+            </div>
+          ) : null}
+        </>
+      ) : null}
+      {warnings.map((warning) => (
+        <Pill icon="alert" label={warning} comic="warning" key={warning} />
+      ))}
+    </>
+  );
+}
+
+// Standalone wrapper for pages that keep the expanded state themselves.
+export function useMetricsExpanded(): [boolean, (next: boolean) => void] {
+  const [expanded, setExpanded] = useState(false);
+  return [expanded, setExpanded];
+}
diff --git a/src/client/components/living/PawnDetail.tsx b/src/client/components/living/PawnDetail.tsx
new file mode 100644
index 0000000..b88f755
--- /dev/null
+++ b/src/client/components/living/PawnDetail.tsx
@@ -0,0 +1,139 @@
+// Per-viewer drill-down: name, route glyph, primary metrics, expandable
+// detailed metrics. Host sees every viewer; a viewer sees itself and its
+// relay children (matching what the wire actually delivers).
+import { PawnSvg, pawnColor } from "./Couch";
+import { Glyph } from "../../ui/icons";
+import { ComicTooltip } from "./ComicTooltip";
+import { useCopy } from "../../ui/copy";
+import type { ConnectionMetrics } from "../../types";
+import { MetricCells } from "./Metrics";
+
+export function RouteGlyph({ route }: { route: "p2p" | "sfu" }) {
+  const { t, vis } = useCopy();
+  const cell = (
+    <span
+      className="lr-meter-cell"
+      title={vis ? undefined : t(route === "sfu" ? "state.route.sfu" : "state.route.p2p")}
+      // Hint-wrapped in vis: focusable so keyboard users reach the comic.
+      tabIndex={vis ? 0 : undefined}
+    >
+      {route === "sfu" ? (
+        <svg width="36" height="16" viewBox="0 0 36 16" fill="none" stroke="#53676a" strokeWidth="2" aria-hidden="true">
+          <circle cx="4" cy="8" r="3" fill="#53676a" stroke="none" />
+          <rect x="14" y="3" width="8" height="10" rx="2" />
+          <circle cx="32" cy="8" r="3" fill="#53676a" stroke="none" />
+          <path d="M7 8h7M22 8h7" />
+        </svg>
+      ) : (
+        <svg width="36" height="16" viewBox="0 0 36 16" fill="none" stroke="#53676a" strokeWidth="2" aria-hidden="true">
+          <circle cx="4" cy="8" r="3" fill="#53676a" stroke="none" />
+          <circle cx="32" cy="8" r="3" fill="#53676a" stroke="none" />
+          <path d="M7 8h22" />
+        </svg>
+      )}
+      <b>{route === "sfu" ? "SFU" : "P2P"}</b>
+    </span>
+  );
+  return vis ? (
+    <ComicTooltip kind={route === "sfu" ? "hint-route-sfu" : "hint-route-p2p"}>
+      {cell}
+    </ComicTooltip>
+  ) : (
+    cell
+  );
+}
+
+export function PawnDetail({
+  pawnKey,
+  name,
+  you = false,
+  route,
+  metrics,
+  direction,
+  tag,
+  error,
+  expanded,
+  onToggleMetrics,
+  onClose,
+}: {
+  pawnKey: string;
+  name: string;
+  you?: boolean;
+  route: "p2p" | "sfu" | null;
+  metrics?: ConnectionMetrics | null;
+  direction: "send" | "receive";
+  tag?: { icon: "arrowUp" | "loader"; label: string };
+  error?: string | null;
+  expanded: boolean;
+  onToggleMetrics: (expanded: boolean) => void;
+  onClose: () => void;
+}) {
+  const { t, vis } = useCopy();
+  return (
+    <div className="lr-row is-sub lr-pawn-detail" role="group" aria-label={name}>
+      <span className="lr-pawn-mini">
+        <PawnSvg color={pawnColor(pawnKey, you)} />
+      </span>
+      {vis ? (
+        <span className="visually-hidden">{name}</span>
+      ) : (
+        <span className="lr-pawn-detail-name">{name}</span>
+      )}
+      {tag ? (
+        <span className="lr-meter-cell" title={vis ? undefined : tag.label}>
+          <Glyph name={tag.icon} size={16} />
+          {vis ? <span className="visually-hidden">{tag.label}</span> : <b>{tag.label}</b>}
+        </span>
+      ) : null}
+      {error ? (
+        <ComicTooltip kind="route-failed">
+          <span
+            className="lr-pill is-bad"
+            role="alert"
+            title={vis ? undefined : error}
+            // Comic-wrapped: focusable so keyboard users reach the comic.
+            tabIndex={vis ? 0 : undefined}
+          >
+            <Glyph name="alert" size={16} />
+            {vis ? <span className="visually-hidden">{error}</span> : <span>{error}</span>}
+          </span>
+        </ComicTooltip>
+      ) : null}
+      {route ? <RouteGlyph route={route} /> : null}
+      {metrics ? (
+        <MetricCells
+          metrics={metrics}
+          direction={direction}
+          expanded={expanded}
+          onToggle={onToggleMetrics}
+        />
+      ) : null}
+      {vis ? (
+        <ComicTooltip kind="hint-close">
+          <button
+            type="button"
+            className="lr-pawn-detail-close"
+            aria-label={t("common.close")}
+            onClick={(event) => {
+              // Pointer activation must not leave the comic pinned by focus.
+              if (event.detail !== 0) event.currentTarget.blur();
+              onClose();
+            }}
+          >
+            <Glyph name="x" size={16} />
+          </button>
+        </ComicTooltip>
+      ) : (
+        <button
+          type="button"
+          className="lr-pawn-detail-close"
+          title={t("common.close")}
+          aria-label={t("common.close")}
+          onClick={onClose}
+        >
+          <Glyph name="x" size={16} />
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/src/client/components/living/RoomChip.tsx b/src/client/components/living/RoomChip.tsx
new file mode 100644
index 0000000..2a2fa77
--- /dev/null
+++ b/src/client/components/living/RoomChip.tsx
@@ -0,0 +1,153 @@
+// LCD room code chip with copy and in-place room replacement confirmation.
+import { useEffect, useRef, useState } from "react";
+import { Glyph } from "../../ui/icons";
+import { useCopy } from "../../ui/copy";
+import { copyRoomCode } from "../room-code";
+import { Btn } from "./primitives";
+import { ComicTooltip } from "./ComicTooltip";
+
+export function Lcd({ code }: { code: string }) {
+  const { t, vis } = useCopy();
+  const [copyState, setCopyState] = useState<"idle" | "copied" | "failed">(
+    "idle",
+  );
+  const timerRef = useRef<number | null>(null);
+  useEffect(
+    () => () => {
+      if (timerRef.current !== null) window.clearTimeout(timerRef.current);
+    },
+    [],
+  );
+
+  async function copy(): Promise<void> {
+    if (timerRef.current !== null) window.clearTimeout(timerRef.current);
+    try {
+      await copyRoomCode(code, (value) => navigator.clipboard.writeText(value));
+      setCopyState("copied");
+    } catch {
+      setCopyState("failed");
+    }
+    timerRef.current = window.setTimeout(() => setCopyState("idle"), 1500);
+  }
+
+  const copyFeedback =
+    copyState === "copied"
+      ? t("common.copied")
+      : copyState === "failed"
+        ? t("common.copyFailed")
+        : "";
+
+  const copyButton = (
+    <button
+      type="button"
+      title={vis ? undefined : t("common.copy")}
+      aria-label={copyFeedback || t("common.copy")}
+      onClick={(event) => {
+        // Hint-wrapped in vis: pointer activation must not leave the comic
+        // pinned open by focus (keyboard clicks keep focus).
+        if (vis && event.detail !== 0) event.currentTarget.blur();
+        void copy();
+      }}
+    >
+      <Glyph
+        name={
+          copyState === "copied"
+            ? "check"
+            : copyState === "failed"
+              ? "alert"
+              : "copy"
+        }
+        size={16}
+        draw="lcd-copy"
+      />
+    </button>
+  );
+
+  return (
+    <span
+      className="lr-lcd"
+      role="group"
+      aria-label={`${t("common.roomCode")} ${code}`}
+      title={vis ? undefined : t("common.roomCode")}
+    >
+      <span className="lr-lcd-roll" aria-hidden="true">
+        {[...code].map((digit, index) => (
+          <span key={`${code}-${index}`} style={{ animationDelay: `${index * 45}ms` }}>
+            {digit}
+          </span>
+        ))}
+      </span>
+      {vis ? (
+        <ComicTooltip kind="hint-copy-code">{copyButton}</ComicTooltip>
+      ) : (
+        copyButton
+      )}
+      <span className="visually-hidden" role="status" aria-live="polite">
+        {copyFeedback}
+      </span>
+    </span>
+  );
+}
+
+export function RoomChip({
+  roomId,
+  onReplace,
+  replaceDisabled = false,
+}: {
+  roomId: string;
+  onReplace?: () => void | Promise<void>;
+  replaceDisabled?: boolean;
+}) {
+  const { vis } = useCopy();
+  const [confirming, setConfirming] = useState(false);
+  const [pending, setPending] = useState(false);
+  const pendingRef = useRef(false);
+
+  async function replace(): Promise<void> {
+    if (!onReplace || pendingRef.current || replaceDisabled) return;
+    pendingRef.current = true;
+    setPending(true);
+    try {
+      await onReplace();
+    } finally {
+      pendingRef.current = false;
+      setPending(false);
+      setConfirming(false);
+    }
+  }
+
+  return (
+    <>
+      <Lcd code={roomId} />
+      {onReplace ? (
+        confirming ? (
+          <>
+            <Btn
+              icon="check"
+              title="host.roomReplaceConfirm"
+              hint="hint-shuffle-code"
+              disabled={pending || replaceDisabled}
+              onClick={() => void replace()}
+            />
+            <Btn
+              icon="x"
+              title="common.cancel"
+              hint="hint-close"
+              disabled={pending}
+              onClick={() => setConfirming(false)}
+            />
+          </>
+        ) : (
+          <Btn
+            icon="refresh"
+            title="host.roomReplace"
+            cap={vis ? undefined : "host.roomReplace"}
+            hint="hint-shuffle-code"
+            disabled={replaceDisabled}
+            onClick={() => setConfirming(true)}
+          />
+        )
+      ) : null}
+    </>
+  );
+}
diff --git a/src/client/components/living/RouteTree.tsx b/src/client/components/living/RouteTree.tsx
new file mode 100644
index 0000000..6f5fc04
--- /dev/null
+++ b/src/client/components/living/RouteTree.tsx
@@ -0,0 +1,321 @@
+// The connection topology as a real tree: host (crowned) roots direct P2P
+// viewers and the SFU node; relay children hang off their parent viewer.
+// Data comes from deriveParticipantTopology.
+import { PawnSvg, pawnColor } from "./Couch";
+import { useCopy } from "../../ui/copy";
+import type { LabeledViewerPresence } from "../../lib/viewer-presence";
+import { deriveParticipantTopology, type TopologyBranch } from "../../lib/participant-topology";
+
+interface TreeNode {
+  key: string;
+  label: string;
+  via: string | null;
+  sfu: boolean;
+  you: boolean;
+}
+
+const HOST_X = 40;
+const COLUMN_GAP = 190;
+const ROW_BASE = 40;
+const PENDING_COLOR = "#d98e04";
+
+function xForDepth(depth: number): number {
+  return HOST_X + (depth + 1) * COLUMN_GAP;
+}
+
+export function RouteTree({
+  hostPeerId,
+  hostLabel,
+  viewers,
+  selfPeerId,
+  flowing = false,
+}: {
+  hostPeerId: string | null;
+  hostLabel: string;
+  viewers: readonly LabeledViewerPresence[];
+  selfPeerId?: string | null;
+  flowing?: boolean;
+}) {
+  const { t, vis } = useCopy();
+  const topology = deriveParticipantTopology(hostPeerId, viewers);
+
+  const nodes: TreeNode[] = [];
+  const collect = (branch: TopologyBranch, via: string | null, sfu: boolean) => {
+    nodes.push({
+      key: branch.viewer.peerId,
+      label: branch.viewer.label,
+      via,
+      sfu,
+      you: selfPeerId === branch.viewer.peerId,
+    });
+    branch.children.forEach((child) => collect(child, branch.viewer.peerId, false));
+  };
+  topology.peerRoots.forEach((root) => collect(root, null, false));
+  topology.sfuRoots.forEach((root) => collect(root, null, true));
+
+  const childrenOf = new Map<string | "sfu" | null, TreeNode[]>();
+  const add = (parent: string | "sfu" | null, node: TreeNode) => {
+    const list = childrenOf.get(parent) ?? [];
+    list.push(node);
+    childrenOf.set(parent, list);
+  };
+  for (const node of nodes) {
+    if (node.via) add(node.via, node);
+    else if (node.sfu) add("sfu", node);
+    else add(null, node);
+  }
+  const hasSfu = nodes.some((n) => n.sfu);
+
+  const spacing = nodes.length > 10 ? 32 : 42;
+  let row = 0;
+  const pos = new Map<string, { x: number; y: number }>();
+  function layout(node: TreeNode, depth: number): void {
+    const kids = childrenOf.get(node.key) ?? [];
+    let y: number;
+    if (kids.length === 0) {
+      y = ROW_BASE + row * spacing;
+      row += 1;
+    } else {
+      kids.forEach((kid) => layout(kid, depth + 1));
+      y = kids.reduce((sum, kid) => sum + pos.get(kid.key)!.y, 0) / kids.length;
+    }
+    pos.set(node.key, { x: xForDepth(depth), y });
+  }
+  (childrenOf.get(null) ?? []).forEach((node) => layout(node, 0));
+  let sfuPos: { x: number; y: number } | null = null;
+  if (hasSfu) {
+    const sfuKids = (childrenOf.get("sfu") ?? []);
+    sfuKids.forEach((node) => layout(node, 1));
+    sfuPos = {
+      x: xForDepth(0),
+      y: sfuKids.reduce((sum, kid) => sum + pos.get(kid.key)!.y, 0) / sfuKids.length,
+    };
+  }
+
+  // Pending viewers (upstream not yet in the tree) dangle off the host as
+  // dashed amber edges — visible in every language mode, not just text.
+  const pendingPos = topology.pending.map((viewer) => {
+    const p = { x: xForDepth(0), y: ROW_BASE + row * spacing };
+    row += 1;
+    return { viewer, ...p };
+  });
+
+  const height = Math.max(140, row * spacing + 64);
+
+  const rootYs = [
+    ...(childrenOf.get(null) ?? []).map((node) => pos.get(node.key)!.y),
+    ...(sfuPos ? [sfuPos.y] : []),
+    ...pendingPos.map((p) => p.y),
+  ];
+  const hostPos = {
+    x: HOST_X,
+    y:
+      rootYs.length > 0
+        ? rootYs.reduce((a, b) => a + b, 0) / rootYs.length
+        : height / 2,
+  };
+  const width = Math.max(
+    640,
+    ...[...pos.values(), ...pendingPos, ...(sfuPos ? [sfuPos] : [])].map(
+      ({ x }) => x + 70,
+    ),
+  );
+
+  // Center the whole composition vertically inside the panel.
+  const allYs = [
+    ...[...pos.values()].map((p) => p.y),
+    ...(sfuPos ? [sfuPos.y] : []),
+    ...pendingPos.map((p) => p.y),
+    hostPos.y,
+  ];
+  const minY = Math.min(...allYs) - 26;
+  const maxY = Math.max(...allYs) + (vis ? 22 : 34);
+  const shift = Math.max(0, (height - (maxY - minY)) / 2 - minY + 4);
+  if (shift > 0) {
+    pos.forEach((p) => {
+      p.y += shift;
+    });
+    pendingPos.forEach((p) => {
+      p.y += shift;
+    });
+    if (sfuPos) sfuPos.y += shift;
+    hostPos.y += shift;
+  }
+
+  const flowClass = flowing ? "flow" : undefined;
+
+  const labelText = (name: string, x: number, y: number) =>
+    vis ? null : (
+      <text x={x} y={y} textAnchor="middle">
+        {name}
+      </text>
+    );
+
+  const pendingLabel = `${t("host.topology.pending")}: ${topology.pending
+    .map((viewer) => viewer.label)
+    .join(", ")}`;
+
+  const srSummary = [
+    `${t("common.host")} ${hostLabel}`,
+    ...nodes.map(
+      (node) =>
+        `${node.label} (${t(node.sfu ? "state.route.sfu" : "state.route.p2p")})`,
+    ),
+    ...topology.pending.map(
+      (viewer) => `${viewer.label} (${t("host.topology.pending")})`,
+    ),
+  ].join(" · ");
+
+  return (
+    <div
+      className="lr-route"
+      role="group"
+      aria-label={`${t("host.topology")}: ${srSummary}`}
+      id="room-topology"
+    >
+      <svg
+        viewBox={`0 0 ${width} ${height}`}
+        style={{ width, minWidth: "100%", maxWidth: "none" }}
+      >
+        {/* In vis mode <title> doubles as a native hover tooltip, leaking
+            human-language UI text into the zero-text mode; accessible names
+            ride on aria-label instead, which never becomes hover text. */}
+        {vis ? null : <title>{t("host.topology")}</title>}
+        {/* edges first, nodes on top */}
+        {nodes.map((node) => {
+          const p = pos.get(node.key)!;
+          const parentNode = node.via ? pos.get(node.via) : undefined;
+          const parent = parentNode ?? (node.sfu && sfuPos ? sfuPos : hostPos);
+          const color = node.sfu ? "#8ea3b8" : "#2fa66a";
+          return (
+            <path
+              key={`edge-${node.key}`}
+              d={`M ${parent.x + 20} ${parent.y} Q ${(parent.x + p.x) / 2} ${parent.y + (p.y - parent.y) * 0.55}, ${p.x - 18} ${p.y}`}
+              fill="none"
+              stroke={color}
+              strokeWidth={2.5}
+              className={flowClass}
+            />
+          );
+        })}
+        {pendingPos.map((p) => (
+          <path
+            key={`edge-pending-${p.viewer.peerId}`}
+            d={`M ${hostPos.x + 20} ${hostPos.y} Q ${(hostPos.x + p.x) / 2} ${hostPos.y + (p.y - hostPos.y) * 0.55}, ${p.x - 18} ${p.y}`}
+            fill="none"
+            stroke={PENDING_COLOR}
+            strokeWidth={2.5}
+            strokeDasharray="6 7"
+            className={flowClass}
+          />
+        ))}
+        {sfuPos ? (
+          <path
+            d={`M ${hostPos.x + 20} ${hostPos.y} L ${sfuPos.x - 20} ${sfuPos.y}`}
+            fill="none"
+            stroke="#8ea3b8"
+            strokeWidth={2.5}
+            className={flowClass}
+          />
+        ) : null}
+        <g
+          transform={`translate(${hostPos.x - 4}, ${hostPos.y - 20}) scale(0.85)`}
+          role={vis ? "img" : undefined}
+          aria-label={vis ? `${hostLabel} · ${t("common.host")}` : undefined}
+        >
+          {vis ? null : <title>{`${hostLabel} · ${t("common.host")}`}</title>}
+          <PawnSvg color="var(--couch)" crown />
+        </g>
+        {labelText(hostLabel, hostPos.x + 14, hostPos.y + 30)}
+        {sfuPos ? (
+          <g
+            transform={`translate(${sfuPos.x - 20}, ${sfuPos.y - 16})`}
+            role={vis ? "img" : undefined}
+            aria-label={vis ? t("host.sfu") : undefined}
+          >
+            {vis ? null : <title>{t("host.sfu")}</title>}
+            <rect width="40" height="32" rx="7" fill="none" stroke="#8ea3b8" strokeWidth="2.5" />
+            <path d="M8 12h24M8 20h24" stroke="#8ea3b8" strokeWidth="2.5" strokeLinecap="round" />
+          </g>
+        ) : null}
+        {sfuPos ? labelText(t("host.sfu"), sfuPos.x, sfuPos.y + 32) : null}
+        {nodes.map((node) => {
+          const p = pos.get(node.key)!;
+          const isChild = node.via !== null && !node.sfu;
+          const nodeLabel = node.you ? `${node.label} · ${t("common.you")}` : node.label;
+          return (
+            <g
+              key={node.key}
+              transform={`translate(${p.x - 14}, ${p.y - 15}) scale(${isChild ? 0.52 : 0.72})`}
+              role={vis ? "img" : undefined}
+              aria-label={vis ? nodeLabel : undefined}
+            >
+              {vis ? null : <title>{nodeLabel}</title>}
+              <PawnSvg color={pawnColor(node.key, node.you)} />
+              {node.you ? (
+                <circle cx="20" cy="26" r="22" fill="none" stroke="var(--you)" strokeWidth="3" />
+              ) : null}
+            </g>
+          );
+        })}
+        {pendingPos.map((p) => (
+          <g
+            key={`pending-${p.viewer.peerId}`}
+            transform={`translate(${p.x - 14}, ${p.y - 15}) scale(0.72)`}
+            opacity={0.55}
+            role={vis ? "img" : undefined}
+            aria-label={vis ? `${p.viewer.label} · ${t("host.topology.pending")}` : undefined}
+          >
+            {vis ? null : <title>{`${p.viewer.label} · ${t("host.topology.pending")}`}</title>}
+            <PawnSvg color={pawnColor(p.viewer.peerId, selfPeerId === p.viewer.peerId)} />
+          </g>
+        ))}
+        {vis
+          ? null
+          : nodes.map((node) => {
+              const p = pos.get(node.key)!;
+              const isChild = node.via !== null && !node.sfu;
+              return (
+                <text key={`label-${node.key}`} x={p.x + 4} y={p.y + (isChild ? 20 : 26)} textAnchor="middle">
+                  {node.label}
+                </text>
+              );
+            })}
+        {vis
+          ? null
+          : pendingPos.map((p) => (
+              <text
+                key={`label-pending-${p.viewer.peerId}`}
+                x={p.x + 4}
+                y={p.y + 26}
+                textAnchor="middle"
+                opacity={0.7}
+              >
+                {p.viewer.label}
+              </text>
+            ))}
+      </svg>
+      <ul className="visually-hidden">
+        {nodes.map((node) => (
+          <li key={`sr-${node.key}`}>
+            {node.label} {node.sfu ? "SFU" : "P2P"}
+          </li>
+        ))}
+        {topology.pending.map((viewer) => (
+          <li key={`sr-pending-${viewer.peerId}`}>
+            {viewer.label} {t("host.topology.pending")}
+          </li>
+        ))}
+      </ul>
+      {topology.pending.length > 0 ? (
+        vis ? (
+          <span className="visually-hidden">{pendingLabel}</span>
+        ) : (
+          <div className="lr-status-text" style={{ padding: "4px 6px" }}>
+            {pendingLabel}
+          </div>
+        )
+      ) : null}
+    </div>
+  );
+}
diff --git a/src/client/components/living/Stage.tsx b/src/client/components/living/Stage.tsx
new file mode 100644
index 0000000..821b11e
--- /dev/null
+++ b/src/client/components/living/Stage.tsx
@@ -0,0 +1,115 @@
+// The TV stage: frame, screen, chin LED. Pages render their own <video>
+// (stream binding stays with the page); overlays and the connecting
+// storyboard are provided here.
+import type { ReactNode } from "react";
+import { Glyph, type GlyphName } from "../../ui/icons";
+import { useCopy, type CopyKey } from "../../ui/copy";
+import { Comic, type ComicKind } from "./Comic";
+
+export type ChinState = "off" | "on" | "warn" | "bad" | "busy";
+
+export function StageTv({
+  chin,
+  hasEntry,
+  live,
+  children,
+  label,
+}: {
+  chin: ChinState;
+  hasEntry?: boolean;
+  live?: boolean;
+  children: ReactNode;
+  label: string;
+}) {
+  return (
+    <div className="lr-tv">
+      <div
+        className={`lr-tv-screen${hasEntry ? " has-entry" : ""}${live ? " is-on" : ""}`}
+        role="group"
+        aria-label={label}
+      >
+        {children}
+      </div>
+      <div className="lr-tv-chin">
+        <i className={chin === "off" ? "" : `is-${chin}`} />
+      </div>
+    </div>
+  );
+}
+
+export function StaticNoise() {
+  return <div className="lr-tv-static" aria-hidden="true" />;
+}
+
+export function StoryBoard({ step }: { step: 0 | 1 | 2 }) {
+  const { vis, t } = useCopy();
+  const panels: [GlyphName, CopyKey][] = [
+    ["door", "story.room"],
+    ["plug", "story.link"],
+    ["tv", "story.show"],
+  ];
+  return (
+    <div className="lr-story" role="status" aria-label={t("host.starting")}>
+      {panels.map(([icon, key], index) => (
+        <span key={key} style={{ display: "contents" }}>
+          {index > 0 ? (
+            <span className={`lr-story-link${step > index - 1 ? " is-done" : ""}`} />
+          ) : null}
+          <span
+            className={`lr-story-item${step > index ? " is-done" : step === index ? " is-now" : ""}`}
+          >
+            <span
+              className={`lr-story-panel${step > index ? " is-done" : step === index ? " is-now" : ""}`}
+            >
+              <Glyph name={step > index ? "check" : icon} size={22} />
+            </span>
+            {vis ? null : <span className="lr-story-cap">{t(key)}</span>}
+          </span>
+        </span>
+      ))}
+    </div>
+  );
+}
+
+export function StageOverlay({
+  icon,
+  message,
+  dim,
+  spin,
+  comic,
+  onActivate,
+}: {
+  icon: GlyphName;
+  message: string;
+  dim?: boolean;
+  spin?: boolean;
+  comic?: ComicKind;
+  onActivate?: () => void;
+}) {
+  const { vis } = useCopy();
+  const content = (
+    <>
+      {vis && comic ? <Comic kind={comic} theme="stage" /> : null}
+      <span className={`lr-tv-big${spin ? " lr-spin" : ""}${onActivate ? " is-action is-ripple" : ""}`}>
+        <Glyph name={icon} size={30} draw="stage-overlay" />
+      </span>
+      {vis ? null : <span className="lr-tv-msg">{message}</span>}
+    </>
+  );
+  if (onActivate) {
+    return (
+      <button type="button" className={`lr-tv-overlay${dim ? " is-dim" : ""}`} onClick={onActivate} aria-label={message}>
+        {content}
+      </button>
+    );
+  }
+  return (
+    <div
+      className={`lr-tv-overlay${dim ? " is-dim" : ""}`}
+      role="status"
+      aria-label={message}
+    >
+      {content}
+    </div>
+  );
+}
diff --git a/src/client/components/living/hints/index.tsx b/src/client/components/living/hints/index.tsx
new file mode 100644
index 0000000..867c5c8
--- /dev/null
+++ b/src/client/components/living/hints/index.tsx
@@ -0,0 +1,128 @@
+// Control hint scenes (操作提示漫画): small 2-panel before→after idioms used
+// as hover/focus tooltips on controls in pure-visual mode, where no human
+// language may appear. Same cast, palette, 320x96 canvas, and motion
+// constitution as the state comics. Sets live in set1..set4.tsx;
+// each must define exactly its SetNKind keys — the merge below then proves
+// completeness at compile time. JSX-free shell: this module is also loaded
+// by the tsx preview harness, which uses the classic JSX runtime.
+
+import { createElement, type CSSProperties, type ReactNode } from "react";
+import type { ComicTheme } from "../Comic";
+import { SET1_SCENES } from "./set1";
+import { SET2_SCENES } from "./set2";
+import { SET3_SCENES } from "./set3";
+import { SET4_SCENES } from "./set4";
+
+export type Set1Kind =
+  | "hint-share-start"
+  | "hint-share-stop"
+  | "hint-pause"
+  | "hint-resume"
+  | "hint-switch-source"
+  | "hint-reconnect";
+
+export type Set2Kind =
+  | "hint-copy-code"
+  | "hint-shuffle-code"
+  | "hint-copy-invite"
+  | "hint-rotate-invite"
+  | "hint-revoke-invite"
+  | "hint-policy-open"
+  | "hint-policy-private"
+  | "hint-password";
+
+export type Set3Kind =
+  | "hint-quality"
+  | "hint-audio-quality"
+  | "hint-degrade-pref"
+  | "hint-codec"
+  | "hint-advanced"
+  | "hint-details"
+  | "hint-more-metrics";
+
+export type Set4Kind =
+  | "hint-topology"
+  | "hint-close"
+  | "hint-admit"
+  | "hint-deny"
+  | "hint-rename"
+  | "hint-theme"
+  | "hint-join-go"
+  | "hint-route-p2p"
+  | "hint-route-sfu";
+
+export type HintKind = Set1Kind | Set2Kind | Set3Kind | Set4Kind;
+
+export const HINT_KINDS: readonly HintKind[] = [
+  "hint-share-start",
+  "hint-share-stop",
+  "hint-pause",
+  "hint-resume",
+  "hint-switch-source",
+  "hint-reconnect",
+  "hint-copy-code",
+  "hint-shuffle-code",
+  "hint-copy-invite",
+  "hint-rotate-invite",
+  "hint-revoke-invite",
+  "hint-policy-open",
+  "hint-policy-private",
+  "hint-password",
+  "hint-quality",
+  "hint-audio-quality",
+  "hint-degrade-pref",
+  "hint-codec",
+  "hint-advanced",
+  "hint-details",
+  "hint-more-metrics",
+  "hint-topology",
+  "hint-close",
+  "hint-admit",
+  "hint-deny",
+  "hint-rename",
+  "hint-theme",
+  "hint-join-go",
+  "hint-route-p2p",
+  "hint-route-sfu",
+];
+
+export type HintScene = (props: { theme: ComicTheme }) => ReactNode;
+
+export const HINT_SCENES: Record<HintKind, HintScene> = {
+  ...SET1_SCENES,
+  ...SET2_SCENES,
+  ...SET3_SCENES,
+  ...SET4_SCENES,
+};
+
+const HINT_KIND_SET: ReadonlySet<string> = new Set(HINT_KINDS);
+
+export function isHintKind(kind: string): kind is HintKind {
+  return HINT_KIND_SET.has(kind);
+}
+
+/** All hint scenes are paper idioms: they float on a paper tooltip. */
+export function HintComic({
+  kind,
+  size,
+}: {
+  kind: HintKind;
+  size?: number;
+}) {
+  const style: CSSProperties = {
+    width: size != null ? `${size}px` : "min(320px, 86%)",
+    height: "auto",
+    display: "block",
+  };
+  return createElement(
+    "svg",
+    {
+      viewBox: "0 0 320 96",
+      style,
+      "aria-hidden": true,
+      focusable: false,
+      xmlns: "http://www.w3.org/2000/svg",
+    },
+    HINT_SCENES[kind]({ theme: "paper" }),
+  );
+}
diff --git a/src/client/components/living/hints/set1.tsx b/src/client/components/living/hints/set1.tsx
new file mode 100644
index 0000000..3bda88c
--- /dev/null
+++ b/src/client/components/living/hints/set1.tsx
@@ -0,0 +1,294 @@
+// Hint set 1 — sharing lifecycle: start/stop/pause/resume/source/fullscreen/reconnect.
+// Scenes follow ../Comic.tsx conventions: 320x96 canvas, 2-panel
+// before→after idiom (Frame x={4} w={152} + Frame x={164} w={152}), vls-
+// prefixed keyframes in an inline <style>, rmBlock for reduced motion.
+import {
+  FAINT,
+  Floor,
+  Frame,
+  INK_STAGE,
+  LIVE,
+  MINT,
+  MiniTv,
+  Moon,
+  Pawn,
+  Plug,
+  SKY,
+  Socket,
+  Spark,
+  Star,
+  TV_BODY,
+  TV_EDGE,
+  WARN,
+  YOU,
+  rmBlock,
+} from "../Comic";
+import type { HintScene, Set1Kind } from "./index";
+
+/* hint-share-start: [dark TV + pawn reaching toward it] → [TV bright, mint
+   glow, rays + Star]. The after panel replays one power-on beat per loop
+   (CRT screen-on → rays → star → pawn hop), then rests lit ~60%. */
+const SceneShareStart: HintScene = ({ theme }) => (
+  <>
+    <style>{`
+.vls-hs-reach{transform-box:fill-box;transform-origin:50% 100%;animation:vlsHsReach 3.2s ease-in-out infinite}
+.vls-hs-intent{animation:vlsHsIntent 3.2s ease-in-out infinite}
+.vls-hs-crt{transform-box:fill-box;transform-origin:center;animation:vlsHsCrt 3.2s ease-out infinite}
+.vls-hs-rays{animation:vlsHsRays 3.2s ease-out infinite}
+.vls-hs-star{transform-box:fill-box;transform-origin:center;animation:vlsHsStar 3.2s cubic-bezier(.3,1.5,.5,1) infinite}
+.vls-hs-hop{animation:vlsHsHop 3.2s cubic-bezier(.3,1.5,.5,1) infinite}
+@keyframes vlsHsReach{0%{transform:rotate(0)}10%{transform:rotate(7deg)}26%{transform:rotate(7deg)}40%,100%{transform:rotate(0)}}
+@keyframes vlsHsIntent{0%{opacity:0}10%{opacity:.9}26%{opacity:.9}40%,100%{opacity:0}}
+@keyframes vlsHsCrt{0%{transform:scaleY(.06);opacity:.5}12%,100%{transform:scaleY(1);opacity:1}}
+@keyframes vlsHsRays{0%,8%{opacity:0;transform:translateY(2px)}18%,100%{opacity:1;transform:translateY(0)}}
+@keyframes vlsHsStar{0%,18%{opacity:0;transform:scale(0)}26%{opacity:1;transform:scale(1.25)}33%,100%{opacity:1;transform:scale(1)}}
+@keyframes vlsHsHop{0%,26%{transform:translateY(0)}33%{transform:translateY(-6px)}40%,100%{transform:translateY(0)}}
+${rmBlock(
+  ["vls-hs-reach", "vls-hs-intent", "vls-hs-crt", "vls-hs-rays", "vls-hs-star", "vls-hs-hop"],
+  [
+    [".vls-hs-crt,.vls-hs-rays,.vls-hs-star", "opacity:1;transform:none"],
+    [".vls-hs-intent", "opacity:0"],
+  ],
+)}
+`}</style>
+    <Frame x={4} w={152} theme={theme} />
+    <Frame x={164} w={152} theme={theme} accent={LIVE} />
+    <Floor x1={14} x2={146} y={78} />
+    <MiniTv x={55} y={24} w={66} h={42} />
+    <circle cx={88} cy={73} r={3} fill={TV_EDGE} />
+    <g className="vls-hs-reach">
+      <path d="M20 78 c0-11 4.5-15.5 10-15.5 s10 4.5 10 15.5 Z" fill={YOU} />
+      <circle cx={30} cy={58} r={6} fill={YOU} />
+      <circle cx={31.5} cy={57.5} r={1.2} fill="#101a2c" />
+      <circle cx={34.9} cy={57.5} r={1.2} fill="#101a2c" />
+    </g>
+    <g className="vls-hs-intent" opacity={0} stroke={FAINT} strokeWidth={2.5} strokeLinecap="round">
+      <path d="M43 45 l7 -5 M46 55 l8 -3" />
+    </g>
+    <Floor x1={174} x2={306} y={78} />
+    <MiniTv x={207} y={24} w={66} h={42} />
+    <g className="vls-hs-crt">
+      <rect x={211.62} y={28.62} width={56.76} height={27.72} rx={4} fill={MINT} />
+      <path d="M233 37 L247 42.5 L233 48 Z" fill="#101a2c" />
+    </g>
+    <g className="vls-hs-rays" stroke={MINT} strokeWidth={2.5} strokeLinecap="round" fill="none">
+      <path d="M222 17 l-6 -7 M240 14 V6 M258 17 l6 -7" />
+    </g>
+    <Star x={272} y={15} r={7} className="vls-hs-star" />
+    <circle cx={240} cy={73} r={3} fill={LIVE} />
+    <g className="vls-hs-hop">
+      <Pawn x={184} yb={78} s={9} eyes />
+    </g>
+  </>
+);
+
+/* hint-share-stop: [bright TV, pawn watching] → [TV dims, chin LED out, small
+   Moon, pawn content]. Calm power-down: dim + LED-out beat, moon settles. */
+const SceneShareStop: HintScene = ({ theme }) => (
+  <>
+    <style>{`
+.vls-hx-eyes{transform-box:fill-box;transform-origin:center;animation:vlsHxBlink 3.4s ease-in-out infinite}
+.vls-hx-dim{animation:vlsHxDim 3.4s ease-out infinite}
+.vls-hx-led{animation:vlsHxLed 3.4s ease-out infinite}
+.vls-hx-moon{animation:vlsHxMoon 3.4s ease-in-out infinite}
+.vls-hx-settle{animation:vlsHxSettle 3.4s cubic-bezier(.3,1.5,.5,1) infinite}
+@keyframes vlsHxBlink{0%,44%,52%,100%{transform:scaleY(1)}48%{transform:scaleY(.12)}}
+@keyframes vlsHxDim{0%{opacity:0}14%,100%{opacity:1}}
+@keyframes vlsHxLed{0%{opacity:1}14%,100%{opacity:0}}
+@keyframes vlsHxMoon{0%,16%{opacity:0;transform:translateY(3px)}28%{opacity:1;transform:translateY(0)}38%{transform:translateY(-2px)}50%,100%{opacity:1;transform:translateY(0)}}
+@keyframes vlsHxSettle{0%,48%{transform:translateY(0)}54%{transform:translateY(-2px)}60%,100%{transform:translateY(0)}}
+${rmBlock(
+  ["vls-hx-eyes", "vls-hx-dim", "vls-hx-led", "vls-hx-moon", "vls-hx-settle"],
+  [
+    [".vls-hx-dim", "opacity:1"],
+    [".vls-hx-led", "opacity:0"],
+    [".vls-hx-moon", "opacity:1;transform:none"],
+  ],
+)}
+`}</style>
+    <Frame x={4} w={152} theme={theme} />
+    <Frame x={164} w={152} theme={theme} />
+    <Floor x1={14} x2={146} y={78} />
+    <MiniTv x={47} y={24} w={66} h={42} />
+    <rect x={51.62} y={28.62} width={56.76} height={27.72} rx={4} fill={MINT} />
+    <path d="M73 37 L87 42.5 L73 48 Z" fill="#101a2c" />
+    <g stroke={MINT} strokeWidth={2.5} strokeLinecap="round" fill="none">
+      <path d="M62 17 l-6 -7 M80 14 V6 M98 17 l6 -7" />
+    </g>
+    <circle cx={80} cy={73} r={3} fill={LIVE} />
+    <path d="M15 78 c0-9.9 4.05-13.95 9-13.95 s9 4.05 9 13.95 Z" fill={YOU} />
+    <circle cx={24} cy={60} r={5.4} fill={YOU} />
+    <g className="vls-hx-eyes" fill="#101a2c">
+      <circle cx={24} cy={59.5} r={1.1} />
+      <circle cx={27.6} cy={59.5} r={1.1} />
+    </g>
+    <Floor x1={174} x2={306} y={78} />
+    <MiniTv x={207} y={24} w={66} h={42} />
+    <rect className="vls-hx-dim" x={211.62} y={28.62} width={56.76} height={27.72} rx={4} fill="#0a101c" />
+    <circle cx={240} cy={73} r={3} fill={TV_EDGE} />
+    <circle className="vls-hx-led" cx={240} cy={73} r={3} fill={LIVE} opacity={0} />
+    <g className="vls-hx-moon">
+      <Moon x={240} y={42} k={0.8} />
+    </g>
+    <g className="vls-hx-settle">
+      <path d="M187 78 c0-9.9 4.05-13.95 9-13.95 s9 4.05 9 13.95 Z" fill={YOU} />
+      <circle cx={196} cy={60} r={5.4} fill={YOU} />
+      <path
+        d="M191.8 59.5 q1.7 -2.2 3.4 0 M198.8 59.5 q1.7 -2.2 3.4 0"
+        stroke="#101a2c"
+        strokeWidth={1.8}
+        strokeLinecap="round"
+        fill="none"
+      />
+    </g>
+  </>
+);
+
+/* hint-pause: [TV alive, motion lines] → [same picture frozen + pause-bars
+   stamp + amber LED]. Reuses the host-paused idiom (dim + bars + amber). */
+const ScenePause: HintScene = ({ theme }) => (
+  <>
+    <style>{`
+.vls-pz-flick{animation:vlsPzFlick 3s ease-in-out infinite}
+.vls-pz-hold{animation:vlsPzHold 3s ease-out infinite}
+.vls-pz-bars{transform-box:fill-box;transform-origin:center;animation:vlsPzBars 3s cubic-bezier(.3,1.5,.5,1) infinite}
+@keyframes vlsPzFlick{0%{opacity:.5}10%{opacity:.9}20%{opacity:.2}32%{opacity:.85}44%,100%{opacity:.5}}
+@keyframes vlsPzHold{0%{opacity:0}12%,100%{opacity:1}}
+@keyframes vlsPzBars{0%,5%{opacity:0;transform:scale(1.45)}16%,100%{opacity:1;transform:scale(1)}}
+${rmBlock(
+  ["vls-pz-flick", "vls-pz-hold", "vls-pz-bars"],
+  [[".vls-pz-flick", "opacity:.5"], [".vls-pz-hold,.vls-pz-bars", "opacity:1;transform:none"]],
+)}
+`}</style>
+    <Frame x={4} w={152} theme={theme} />
+    <Frame x={164} w={152} theme={theme} accent={WARN} />
+    <MiniTv x={44} y={22} w={72} h={46} />
+    <path d="M73 34 L89 42.2 L73 50.4 Z" fill={MINT} />
+    <g className="vls-pz-flick" stroke={SKY} strokeWidth={2} strokeLinecap="round" opacity={0.5}>
+      <path d="M54 33 v7 M58 45 v6 M106 34 v6 M102 46 v5" />
+    </g>
+    <circle cx={80} cy={74} r={3} fill={LIVE} />
+    <MiniTv x={204} y={22} w={72} h={46} />
+    <path d="M233 34 L249 42.2 L233 50.4 Z" fill={MINT} />
+    <g className="vls-pz-hold">
+      <rect x={209.04} y={27.06} width={61.92} height={30.36} rx={4} fill="#0a101c" opacity={0.45} />
+      <circle cx={240} cy={74} r={3} fill={WARN} />
+    </g>
+    <circle cx={240} cy={74} r={3} fill={LIVE} opacity={0.35} />
+    <g className="vls-pz-bars" fill={INK_STAGE}>
+      <rect x={229} y={30.5} width={8.5} height={23.5} rx={3.5} />
+      <rect x={242.5} y={30.5} width={8.5} height={23.5} rx={3.5} />
+    </g>
+  </>
+);
+
+/* hint-resume: [frozen picture + pause bars] → [bars gone, play triangle
+   springs, motion lines return]. Before panel is perfectly still = frozen. */
+const SceneResume: HintScene = ({ theme }) => (
+  <>
+    <style>{`
+.vls-rs-play{transform-box:fill-box;transform-origin:center;animation:vlsRsPlay 3s cubic-bezier(.3,1.5,.5,1) infinite}
+.vls-rs-led{animation:vlsRsLed 3s ease-out infinite}
+.vls-rs-flick{animation:vlsRsFlick 3s ease-in-out infinite}
+@keyframes vlsRsPlay{0%{transform:scale(.55);opacity:.5}14%{transform:scale(1.18);opacity:1}22%,100%{transform:scale(1);opacity:1}}
+@keyframes vlsRsLed{0%{opacity:.2}10%,100%{opacity:1}}
+@keyframes vlsRsFlick{0%,12%{opacity:0}20%{opacity:.9}30%{opacity:.25}40%{opacity:.85}54%,100%{opacity:.5}}
+${rmBlock(
+  ["vls-rs-play", "vls-rs-led", "vls-rs-flick"],
+  [[".vls-rs-play,.vls-rs-led", "opacity:1;transform:none"], [".vls-rs-flick", "opacity:.5"]],
+)}
+`}</style>
+    <Frame x={4} w={152} theme={theme} />
+    <Frame x={164} w={152} theme={theme} accent={LIVE} />
+    <MiniTv x={44} y={22} w={72} h={46} />
+    <path d="M73 34 L89 42.2 L73 50.4 Z" fill={MINT} />
+    <rect x={49.04} y={27.06} width={61.92} height={30.36} rx={4} fill="#0a101c" opacity={0.45} />
+    <g fill={INK_STAGE}>
+      <rect x={69} y={30.5} width={8.5} height={23.5} rx={3.5} />
+      <rect x={82.5} y={30.5} width={8.5} height={23.5} rx={3.5} />
+    </g>
+    <circle cx={80} cy={74} r={3} fill={WARN} />
+    <MiniTv x={204} y={22} w={72} h={46} />
+    <path className="vls-rs-play" d="M233 34 L249 42.2 L233 50.4 Z" fill={MINT} />
+    <g className="vls-rs-flick" stroke={SKY} strokeWidth={2} strokeLinecap="round" opacity={0}>
+      <path d="M214 33 v7 M218 45 v6 M266 34 v6 M262 46 v5" />
+    </g>
+    <circle className="vls-rs-led" cx={240} cy={74} r={3} fill={LIVE} />
+  </>
+);
+
+/* hint-switch-source: [two monitor cards, left lit] → [right lit, swap arcs
+   with two dots exchanging seats — the Hearth switch do-si-do]. */
+const SceneSwitchSource: HintScene = ({ theme }) => (
+  <>
+    <style>{`
+.vls-sw-d1{animation:vlsSwD1 3.2s ease-in-out infinite}
+.vls-sw-d2{animation:vlsSwD2 3.2s ease-in-out infinite}
+@keyframes vlsSwD1{0%{transform:translate(0,0);opacity:0}8%{opacity:1}22%{transform:translate(11px,-6px)}36%{transform:translate(22px,0);opacity:1}46%,100%{transform:translate(22px,0);opacity:0}}
+@keyframes vlsSwD2{0%{transform:translate(0,0);opacity:0}8%{opacity:1}22%{transform:translate(-11px,6px)}36%{transform:translate(-22px,0);opacity:1}46%,100%{transform:translate(-22px,0);opacity:0}}
+${rmBlock(["vls-sw-d1", "vls-sw-d2"], [[".vls-sw-d1,.vls-sw-d2", "opacity:0;transform:none"]])}
+`}</style>
+    <Frame x={4} w={152} theme={theme} />
+    <Frame x={164} w={152} theme={theme} accent={SKY} />
+    <rect x={27} y={28} width={46} height={32} rx={6} fill={TV_BODY} stroke={TV_EDGE} strokeWidth={2} />
+    <rect x={32} y={32} width={36} height={16} rx={3} fill={MINT} />
+    <circle cx={50} cy={54} r={2.5} fill={LIVE} />
+    <rect x={87} y={28} width={46} height={32} rx={6} fill={TV_BODY} stroke={TV_EDGE} strokeWidth={2} />
+    <rect x={92} y={32} width={36} height={16} rx={3} fill="#16233c" />
+    <circle cx={110} cy={54} r={2.5} fill={TV_EDGE} />
+    <rect x={187} y={28} width={46} height={32} rx={6} fill={TV_BODY} stroke={TV_EDGE} strokeWidth={2} />
+    <rect x={192} y={32} width={36} height={16} rx={3} fill="#16233c" />
+    <circle cx={210} cy={54} r={2.5} fill={TV_EDGE} />
+    <rect x={247} y={28} width={46} height={32} rx={6} fill={TV_BODY} stroke={TV_EDGE} strokeWidth={2} />
+    <rect x={252} y={32} width={36} height={16} rx={3} fill={MINT} />
+    <circle cx={270} cy={54} r={2.5} fill={LIVE} />
+    <g stroke={SKY} strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" fill="none">
+      <path d="M229 29 C236 16 244 16 251 29 M244.5 26.5 L251 29 L249 22.5" />
+      <path d="M251 63 C244 76 236 76 229 63 M235.5 65.5 L229 63 L231 69.5" />
+    </g>
+    <circle className="vls-sw-d1" cx={229} cy={29} r={2.5} fill={MINT} opacity={0} />
+    <circle className="vls-sw-d2" cx={251} cy={63} r={2.5} fill={MINT} opacity={0} />
+  </>
+);
+
+/* hint-reconnect: [Plug out of Socket, small Spark at the gap] → [Plug seats
+   with a wiggle, LIVE dot pops]. Same plug language as recovering. */
+const SceneReconnect: HintScene = ({ theme }) => (
+  <>
+    <style>{`
+.vls-rj-spark{animation:vlsRjSpark 3.2s ease-in-out infinite}
+.vls-rj-plug{transform-box:fill-box;transform-origin:50% 100%;animation:vlsRjPlug 3.2s ease-in-out infinite}
+.vls-rj-led{transform-box:fill-box;transform-origin:center;animation:vlsRjLed 3.2s cubic-bezier(.3,1.5,.5,1) infinite}
+@keyframes vlsRjSpark{0%,100%{opacity:.55}15%{opacity:1}}
+@keyframes vlsRjPlug{0%{transform:translate(-2px,-8px) rotate(-6deg)}10%{transform:translate(-1px,-3px) rotate(4deg)}20%{transform:translate(0,-1px) rotate(-2deg)}28%,100%{transform:none}}
+@keyframes vlsRjLed{0%,24%{opacity:0;transform:scale(.4)}32%{opacity:1;transform:scale(1.3)}40%,100%{opacity:1;transform:scale(1)}}
+${rmBlock(
+  ["vls-rj-spark", "vls-rj-plug", "vls-rj-led"],
+  [
+    [".vls-rj-spark", "opacity:1"],
+    [".vls-rj-plug", "transform:none"],
+    [".vls-rj-led", "opacity:1;transform:none"],
+  ],
+)}
+`}</style>
+    <Frame x={4} w={152} theme={theme} />
+    <Frame x={164} w={152} theme={theme} accent={LIVE} />
+    <Socket x={90} y={52} />
+    <Plug x={80} y={23} />
+    <Spark x={93} y={49} className="vls-rj-spark" />
+    <Socket x={250} y={52} />
+    <g className="vls-rj-plug">
+      <Plug x={260} y={36} />
+    </g>
+    <circle className="vls-rj-led" cx={284} cy={38} r={3.5} fill={LIVE} />
+  </>
+);
+
+export const SET1_SCENES: Record<Set1Kind, HintScene> = {
+  "hint-share-start": SceneShareStart,
+  "hint-share-stop": SceneShareStop,
+  "hint-pause": ScenePause,
+  "hint-resume": SceneResume,
+  "hint-switch-source": SceneSwitchSource,
+  "hint-reconnect": SceneReconnect,
+};
diff --git a/src/client/components/living/hints/set2.tsx b/src/client/components/living/hints/set2.tsx
new file mode 100644
index 0000000..d92a322
--- /dev/null
+++ b/src/client/components/living/hints/set2.tsx
@@ -0,0 +1,537 @@
+// Hint set 2 — room & invite: code copy/shuffle, invite copy/rotate/revoke, policy open/private, password.
+// Scenes follow ../Comic.tsx conventions: 320x96 canvas, 2-panel
+// before→after idiom (Frame x={4} w={152} + Frame x={164} w={152}), vls-
+// prefixed keyframes in an inline <style>, rmBlock for reduced motion.
+// Paper idioms: var(--ink)/var(--wall-2)/var(--paper) carry the drawing;
+// room codes are always 4 abstract digit slots, never real digits.
+import {
+  Door,
+  FAINT,
+  Frame,
+  INK_STAGE,
+  Pawn,
+  RedX,
+  SKY,
+  Spark,
+  Star,
+  STAR_GOLD,
+  TV_SCREEN,
+  rmBlock,
+} from "../Comic";
+import type { HintScene, Set2Kind } from "./index";
+
+/* LCD code card: pale body, dark screen, 4 abstract digit slots at +12/+27/
+   +42/+57 inside the 78x46 body. */
+const SLOT_DX = [12, 27, 42, 57] as const;
+
+function LcdBase({ x, y }: { x: number; y: number }) {
+  return (
+    <>
+      <rect
+        x={x}
+        y={y}
+        width={78}
+        height={46}
+        rx={9}
+        fill="var(--wall-2)"
+        stroke="var(--ink)"
+        strokeWidth={2.5}
+      />
+      <rect x={x + 6} y={y + 6} width={66} height={34} rx={5} fill={TV_SCREEN} />
+    </>
+  );
+}
+
+function LcdSlots({
+  x,
+  y,
+  className,
+}: {
+  x: number;
+  y: number;
+  className?: string;
+}) {
+  const slots = (
+    <>
+      {SLOT_DX.map((dx) => (
+        <rect
+          key={dx}
+          x={x + dx}
+          y={y + 17}
+          width={9}
+          height={10}
+          rx={2}
+          fill="none"
+          stroke={INK_STAGE}
+          strokeWidth={2}
+        />
+      ))}
+    </>
+  );
+  return className ? <g className={className}>{slots}</g> : slots;
+}
+
+/** One chain link: a stadium ring, optionally tilted (static transform). */
+function LinkRing({
+  x,
+  y,
+  w,
+  h,
+  tilt = 0,
+}: {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  tilt?: number;
+}) {
+  const ring = (
+    <rect
+      x={x}
+      y={y}
+      width={w}
+      height={h}
+      rx={h / 2}
+      fill="var(--paper)"
+      stroke="var(--ink)"
+      strokeWidth={2.5}
+    />
+  );
+  return tilt ? <g transform={`rotate(${tilt} ${x + w / 2} ${y + h / 2})`}>{ring}</g> : ring;
+}
+
+/** Open doorway: warm lit frame + leaf swung open on the left hinge. */
+function OpenDoorway({ x, y }: { x: number; y: number }) {
+  return (
+    <>
+      <rect
+        x={x}
+        y={y}
+        width={32}
+        height={56}
+        rx={5}
+        fill={STAR_GOLD}
+        opacity={0.3}
+        stroke="var(--ink)"
+        strokeWidth={2.5}
+      />
+      <path
+        d={`M${x} ${y} L${x - 12} ${y + 6} L${x - 12} ${y + 62} L${x} ${y + 56} Z`}
+        fill="var(--wall-2)"
+        stroke="var(--ink)"
+        strokeWidth={2.5}
+        strokeLinejoin="round"
+      />
+      <circle cx={x - 8} cy={y + 32} r={1.8} fill="var(--ink)" />
+    </>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/* hint-copy-code: tap the code card → a second copy + star.           */
+/* ------------------------------------------------------------------ */
+const SceneCopyCode: HintScene = ({ theme }) => (
+  <>
+    <style>{`
+.vls-copy-pawn{transform-box:fill-box;transform-origin:50% 100%;animation:vlsCopyLean 2.6s ease-in-out infinite}
+.vls-copy-ring{transform-box:fill-box;transform-origin:center;animation:vlsCopyRing 2.6s ease-out infinite}
+.vls-copy-front{transform-box:fill-box;transform-origin:50% 100%;animation:vlsCopyHop 2.6s ease-in-out infinite}
+.vls-copy-star{transform-box:fill-box;transform-origin:center;animation:vlsCopyStar 2.6s cubic-bezier(.3,1.5,.5,1) infinite}
+@keyframes vlsCopyLean{0%,8%{transform:rotate(0)}18%,30%{transform:rotate(7deg)}42%,100%{transform:rotate(0)}}
+@keyframes vlsCopyRing{0%,14%{transform:scale(.6);opacity:0}20%{opacity:.8}38%,100%{transform:scale(1.7);opacity:0}}
+@keyframes vlsCopyHop{0%,12%{transform:translateY(0)}20%{transform:translateY(-2.5px)}30%,100%{transform:translateY(0)}}
+@keyframes vlsCopyStar{0%,14%{opacity:0;transform:scale(0)}24%{opacity:1;transform:scale(1.25)}32%,100%{opacity:1;transform:scale(1)}}
+${rmBlock(
+  ["vls-copy-pawn", "vls-copy-ring", "vls-copy-front", "vls-copy-star"],
+  [
+    [".vls-copy-ring", "opacity:0"],
+    [".vls-copy-star", "opacity:1;transform:scale(1)"],
+  ],
+)}
+`}</style>
+    <Frame x={4} w={152} theme={theme} />
+    <Frame x={164} w={152} theme={theme} />
+    <LcdBase x={58} y={22} />
+    <LcdSlots x={58} y={22} />
+    <circle
+      className="vls-copy-ring"
+      cx={57}
+      cy={45}
+      r={6}
+      fill="none"
+      stroke={SKY}
+      strokeWidth={2.5}
+      opacity={0}
+    />
+    <Pawn x={38} yb={76} s={9} eyes className="vls-copy-pawn" />
+    <LcdBase x={210} y={18} />
+    <g className="vls-copy-front">
+      <LcdBase x={190} y={32} />
+      <LcdSlots x={190} y={32} />
+    </g>
+    <Star x={292} y={22} r={7} className="vls-copy-star" baseOpacity={0} />
+  </>
+);
+
+/* ------------------------------------------------------------------ */
+/* hint-shuffle-code: slots at rest → slots mid-roll + spark.          */
+/* ------------------------------------------------------------------ */
+const SceneShuffleCode: HintScene = ({ theme }) => (
+  <>
+    <style>{`
+.vls-shuf-slots{opacity:.45}
+.vls-shuf-roll{animation:vlsShufRoll 2.4s linear infinite}
+.vls-shuf-spark{transform-box:fill-box;transform-origin:center;animation:vlsShufSpark 2.4s ease-out infinite}
+@keyframes vlsShufRoll{0%{transform:translateY(-2px)}8%{transform:translateY(2px)}16%{transform:translateY(-2px)}24%{transform:translateY(2px)}32%{transform:translateY(-1px)}40%,100%{transform:translateY(0)}}
+@keyframes vlsShufSpark{0%,8%{opacity:0;transform:scale(.5)}16%{opacity:1;transform:scale(1.1)}22%,70%{opacity:1;transform:scale(1)}82%,100%{opacity:0}}
+${rmBlock(
+  ["vls-shuf-roll", "vls-shuf-spark"],
+  [
+    [".vls-shuf-roll", "transform:none"],
+    [".vls-shuf-spark", "opacity:1;transform:none"],
+  ],
+)}
+`}</style>
+    <Frame x={4} w={152} theme={theme} />
+    <Frame x={164} w={152} theme={theme} />
+    <LcdBase x={41} y={25} />
+    <LcdSlots x={41} y={25} />
+    <LcdBase x={201} y={25} />
+    <LcdSlots x={201} y={25} className="vls-shuf-slots" />
+    <g className="vls-shuf-roll" fill={INK_STAGE} opacity={0.9}>
+      {SLOT_DX.map((dx) => (
+        <g key={dx}>
+          <rect x={202 + dx} y={43.5} width={7} height={1.8} rx={0.9} />
+          <rect x={202 + dx} y={47} width={7} height={1.8} rx={0.9} />
+          <rect x={202 + dx} y={50.5} width={7} height={1.8} rx={0.9} />
+        </g>
+      ))}
+    </g>
+    <Spark x={288} y={30} className="vls-shuf-spark" />
+  </>
+);
+
+/* ------------------------------------------------------------------ */
+/* hint-copy-invite: pawn balancing a link → link arcs to a friend.    */
+/* ------------------------------------------------------------------ */
+const SceneCopyInvite: HintScene = ({ theme }) => (
+  <>
+    <style>{`
+.vls-cinv-eyes{transform-box:fill-box;transform-origin:center;animation:vlsCinvBlink 2.8s ease-in-out infinite}
+.vls-cinv-fly{animation:vlsCinvFly 2.8s ease-in-out infinite}
+.vls-cinv-arc{animation:vlsCinvArc 2.8s ease-in-out infinite}
+.vls-cinv-star{transform-box:fill-box;transform-origin:center;animation:vlsCinvStar 2.8s cubic-bezier(.3,1.5,.5,1) infinite}
+@keyframes vlsCinvBlink{0%,60%,68%,100%{transform:scaleY(1)}64%{transform:scaleY(.12)}}
+@keyframes vlsCinvFly{0%,6%{transform:translate(-92px,0);opacity:0}10%{opacity:1}32%{transform:translate(-46px,-20px)}50%{transform:translate(0,0)}56%{transform:translate(0,-3px)}62%,100%{transform:translate(0,0)}}
+@keyframes vlsCinvArc{0%,10%{opacity:0}20%{opacity:.7}55%{opacity:.7}72%,100%{opacity:0}}
+@keyframes vlsCinvStar{0%,50%{opacity:0;transform:scale(0)}58%{opacity:1;transform:scale(1.25)}66%,100%{opacity:1;transform:scale(1)}}
+${rmBlock(
+  ["vls-cinv-eyes", "vls-cinv-fly", "vls-cinv-arc", "vls-cinv-star"],
+  [
+    [".vls-cinv-fly", "transform:none;opacity:1"],
+    [".vls-cinv-arc", "opacity:.35"],
+    [".vls-cinv-star", "opacity:1"],
+  ],
+)}
+`}</style>
+    <Frame x={4} w={152} theme={theme} />
+    <Frame x={164} w={152} theme={theme} />
+    <Pawn x={62} yb={76} s={10} />
+    <g className="vls-cinv-eyes" fill="#101a2c">
+      <circle cx={59.8} cy={56} r={1.1} />
+      <circle cx={64.2} cy={56} r={1.1} />
+    </g>
+    <LinkRing x={50} y={27.5} w={24} h={13} tilt={-12} />
+    <path
+      className="vls-cinv-arc"
+      d="M196 50 Q242 14 288 50"
+      stroke={FAINT}
+      strokeWidth={2}
+      strokeDasharray="4 4"
+      fill="none"
+      opacity={0}
+    />
+    <Pawn x={196} yb={76} s={8.5} eyes />
+    <Pawn x={288} yb={76} s={8.5} eyes color={SKY} />
+    <g className="vls-cinv-fly" opacity={0}>
+      <LinkRing x={278} y={31.5} w={20} h={11} tilt={-12} />
+    </g>
+    <Star x={288} y={16} r={6} className="vls-cinv-star" baseOpacity={0} />
+  </>
+);
+
+/* ------------------------------------------------------------------ */
+/* hint-rotate-invite: a link → the link spun fresh + spark.           */
+/* ------------------------------------------------------------------ */
+const SceneRotateInvite: HintScene = ({ theme }) => (
+  <>
+    <style>{`
+.vls-rinv-ring{transform-box:view-box;transform-origin:240px 48px;animation:vlsRinvSpin 2.6s ease-in-out infinite}
+.vls-rinv-spark{transform-box:fill-box;transform-origin:center;animation:vlsRinvSpark 2.6s ease-out infinite}
+@keyframes vlsRinvSpin{0%,10%{transform:rotate(0)}50%,100%{transform:rotate(360deg)}}
+@keyframes vlsRinvSpark{0%,44%{opacity:0;transform:scale(.5)}54%{opacity:1;transform:scale(1.1)}62%,82%{opacity:1;transform:scale(1)}92%,100%{opacity:0}}
+${rmBlock(
+  ["vls-rinv-ring", "vls-rinv-spark"],
+  [[".vls-rinv-spark", "opacity:1;transform:none"]],
+)}
+`}</style>
+    <Frame x={4} w={152} theme={theme} />
+    <Frame x={164} w={152} theme={theme} />
+    <LinkRing x={65} y={40} w={30} h={16} tilt={-15} />
+    <LinkRing x={225} y={40} w={30} h={16} tilt={-15} />
+    <g
+      className="vls-rinv-ring"
+      stroke={SKY}
+      strokeWidth={2.5}
+      strokeLinecap="round"
+      fill="none"
+    >
+      <path d="M240 28 A20 20 0 1 1 220 48" />
+      <path d="M227 46 L220 48 L222 55" />
+    </g>
+    <Spark x={272} y={24} className="vls-rinv-spark" />
+  </>
+);
+
+/* ------------------------------------------------------------------ */
+/* hint-revoke-invite: intact chain → snapped, ends droop, red-X.      */
+/* ------------------------------------------------------------------ */
+const SceneRevokeInvite: HintScene = ({ theme }) => (
+  <>
+    <style>{`
+.vls-rev-l{transform-box:view-box;transform-origin:223px 52.5px;animation:vlsRevL 2.8s ease-in-out infinite}
+.vls-rev-r{transform-box:view-box;transform-origin:257px 52.5px;animation:vlsRevR 2.8s ease-in-out infinite}
+.vls-rev-x{transform-box:fill-box;transform-origin:center;animation:vlsRevX 2.8s ease-out infinite}
+@keyframes vlsRevL{0%,10%{transform:translate(9px,-4.5px) rotate(-18deg)}20%{transform:translate(-2px,1px) rotate(5deg)}30%,100%{transform:translate(0,0) rotate(0)}}
+@keyframes vlsRevR{0%,10%{transform:translate(-9px,-4.5px) rotate(18deg)}20%{transform:translate(2px,1px) rotate(-5deg)}30%,100%{transform:translate(0,0) rotate(0)}}
+@keyframes vlsRevX{0%,30%{opacity:0;transform:scale(1.6) rotate(8deg)}38%,100%{opacity:1;transform:scale(1) rotate(8deg)}}
+${rmBlock(
+  ["vls-rev-l", "vls-rev-r", "vls-rev-x"],
+  [[".vls-rev-x", "opacity:1;transform:scale(1) rotate(8deg)"]],
+)}
+`}</style>
+    <Frame x={4} w={152} theme={theme} />
+    <Frame x={164} w={152} theme={theme} />
+    <LinkRing x={56} y={41} w={28} h={14} />
+    <LinkRing x={76} y={41} w={28} h={14} />
+    <g className="vls-rev-l">
+      <g transform="rotate(18 223 52.5)">
+        <rect
+          x={210}
+          y={46}
+          width={26}
+          height={13}
+          rx={6.5}
+          fill="var(--paper)"
+          stroke="var(--ink)"
+          strokeWidth={2.5}
+        />
+      </g>
+    </g>
+    <g className="vls-rev-r">
+      <g transform="rotate(-18 257 52.5)">
+        <rect
+          x={244}
+          y={46}
+          width={26}
+          height={13}
+          rx={6.5}
+          fill="var(--paper)"
+          stroke="var(--ink)"
+          strokeWidth={2.5}
+        />
+      </g>
+    </g>
+    <RedX cx={240} cy={38} arm={5} className="vls-rev-x" />
+  </>
+);
+
+/* ------------------------------------------------------------------ */
+/* hint-policy-open: shut door → door wide open, two pawns hop in.     */
+/* ------------------------------------------------------------------ */
+const ScenePolicyOpen: HintScene = ({ theme }) => (
+  <>
+    <style>{`
+.vls-open-p1{transform-box:fill-box;transform-origin:50% 100%;animation:vlsOpenHop 2.8s ease-in-out infinite}
+.vls-open-p2{transform-box:fill-box;transform-origin:50% 100%;animation:vlsOpenHop 2.8s ease-in-out .2s infinite}
+@keyframes vlsOpenHop{0%,6%{transform:translateY(0)}14%{transform:translateY(-5px)}22%{transform:translateY(0)}28%{transform:translateY(-3px)}34%,100%{transform:translateY(0)}}
+${rmBlock(["vls-open-p1", "vls-open-p2"], [])}
+`}</style>
+    <Frame x={4} w={152} theme={theme} />
+    <Frame x={164} w={152} theme={theme} />
+    <Door x={64} y={20} />
+    <OpenDoorway x={224} y={18} />
+    <Pawn x={238} yb={74} s={6.5} eyes className="vls-open-p1" />
+    <Pawn x={206} yb={78} s={5.5} eyes color={SKY} className="vls-open-p2" />
+  </>
+);
+
+/* ------------------------------------------------------------------ */
+/* hint-policy-private: open door → shut + locked, one pawn waits with */
+/* its little invite card.                                             */
+/* ------------------------------------------------------------------ */
+const ScenePolicyPrivate: HintScene = ({ theme }) => (
+  <>
+    <style>{`
+.vls-priv-eyes{transform-box:fill-box;transform-origin:center;animation:vlsPrivBlink 3s ease-in-out infinite}
+@keyframes vlsPrivBlink{0%,52%,60%,100%{transform:scaleY(1)}56%{transform:scaleY(.12)}}
+${rmBlock(["vls-priv-eyes"], [])}
+`}</style>
+    <Frame x={4} w={152} theme={theme} />
+    <Frame x={164} w={152} theme={theme} />
+    <OpenDoorway x={64} y={18} />
+    <Pawn x={204} yb={76} s={8} />
+    <g className="vls-priv-eyes" fill="#101a2c">
+      <circle cx={201.8} cy={60} r={0.9} />
+      <circle cx={206.2} cy={60} r={0.9} />
+    </g>
+    <g transform="rotate(-10 202 44)">
+      <rect
+        x={195}
+        y={39}
+        width={14}
+        height={10}
+        rx={2}
+        fill="var(--paper)"
+        stroke="var(--ink)"
+        strokeWidth={1.5}
+      />
+      <path
+        d="M197.5 42.5 h4 M197.5 45.5 h6"
+        stroke="var(--ink)"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+      />
+    </g>
+    <Door x={224} y={18} />
+    <path
+      d="M235 38 v-5 a5.5 5.5 0 0 1 11 0 v5"
+      stroke="var(--ink)"
+      strokeWidth={2.5}
+      fill="none"
+      strokeLinecap="round"
+    />
+    <rect
+      x={232}
+      y={38}
+      width={16}
+      height={13}
+      rx={3}
+      fill={STAR_GOLD}
+      stroke="var(--ink)"
+      strokeWidth={2}
+    />
+    <circle cx={240} cy={44} r={1.8} fill="var(--ink)" />
+  </>
+);
+
+/* ------------------------------------------------------------------ */
+/* hint-password: key approaches the lock → shackle up, door ajar.     */
+/* ------------------------------------------------------------------ */
+const ScenePassword: HintScene = ({ theme }) => (
+  <>
+    <style>{`
+.vls-pass-key{animation:vlsPassKey 2.8s ease-in-out infinite}
+.vls-pass-lines{animation:vlsPassLines 2.8s ease-in-out infinite}
+.vls-pass-shackle{transform-box:view-box;transform-origin:190px 44px;animation:vlsPassShackle 2.8s ease-in-out infinite}
+.vls-pass-glow{animation:vlsPassGlow 2.8s ease-in-out infinite}
+@keyframes vlsPassKey{0%{transform:translateX(0);opacity:0}6%{opacity:1}30%{transform:translateX(26px)}68%{transform:translateX(26px);opacity:1}80%{transform:translateX(26px);opacity:0}82%,100%{transform:translateX(0);opacity:0}}
+@keyframes vlsPassLines{0%,4%{opacity:0}10%{opacity:.9}24%{opacity:.9}32%,100%{opacity:0}}
+@keyframes vlsPassShackle{0%,8%{transform:rotate(34deg)}20%{transform:rotate(-6deg)}28%,100%{transform:rotate(0)}}
+@keyframes vlsPassGlow{0%,30%{opacity:.3}42%{opacity:.65}55%,100%{opacity:.3}}
+${rmBlock(
+  ["vls-pass-key", "vls-pass-lines", "vls-pass-shackle", "vls-pass-glow"],
+  [
+    [".vls-pass-key", "transform:translateX(26px);opacity:1"],
+    [".vls-pass-lines", "opacity:0"],
+    [".vls-pass-glow", "opacity:.45"],
+  ],
+)}
+`}</style>
+    <Frame x={4} w={152} theme={theme} />
+    <Frame x={164} w={152} theme={theme} />
+    <g className="vls-pass-lines" opacity={0}>
+      <path d="M42 42 l-7 -2 M42 52 l-7 2" stroke={FAINT} strokeWidth={2} strokeLinecap="round" />
+    </g>
+    <g className="vls-pass-key" opacity={0}>
+      <circle cx={52} cy={47} r={5} fill="var(--paper)" stroke="var(--ink)" strokeWidth={2.5} />
+      <path d="M57 47 h14 M66 47 v4 M70 47 v4" stroke="var(--ink)" strokeWidth={2.5} strokeLinecap="round" />
+    </g>
+    <path
+      d="M92 40 v-5 a6 6 0 0 1 12 0 v5"
+      stroke="var(--ink)"
+      strokeWidth={2.5}
+      fill="none"
+      strokeLinecap="round"
+    />
+    <rect
+      x={88}
+      y={40}
+      width={18}
+      height={14}
+      rx={3}
+      fill={STAR_GOLD}
+      stroke="var(--ink)"
+      strokeWidth={2}
+    />
+    <circle cx={97} cy={47} r={1.8} fill="var(--ink)" />
+    <rect
+      className="vls-pass-glow"
+      x={230}
+      y={16}
+      width={36}
+      height={58}
+      rx={5}
+      fill={SKY}
+      opacity={0.3}
+    />
+    <rect
+      x={230}
+      y={16}
+      width={36}
+      height={58}
+      rx={5}
+      fill="none"
+      stroke="var(--ink)"
+      strokeWidth={2.5}
+    />
+    <path
+      d="M230 16 L260 20 L260 70 L230 74 Z"
+      fill="var(--wall-2)"
+      stroke="var(--ink)"
+      strokeWidth={2.5}
+      strokeLinejoin="round"
+    />
+    <circle cx={254} cy={46} r={1.8} fill="var(--ink)" />
+    <rect
+      x={186}
+      y={44}
+      width={18}
+      height={14}
+      rx={3}
+      fill={STAR_GOLD}
+      stroke="var(--ink)"
+      strokeWidth={2}
+    />
+    <circle cx={195} cy={51} r={1.8} fill="var(--ink)" />
+    <path
+      className="vls-pass-shackle"
+      d="M190 44 v-5 a6 6 0 0 1 11.8 -2.2"
+      stroke="var(--ink)"
+      strokeWidth={2.5}
+      fill="none"
+      strokeLinecap="round"
+    />
+  </>
+);
+
+export const SET2_SCENES: Record<Set2Kind, HintScene> = {
+  "hint-copy-code": SceneCopyCode,
+  "hint-shuffle-code": SceneShuffleCode,
+  "hint-copy-invite": SceneCopyInvite,
+  "hint-rotate-invite": SceneRotateInvite,
+  "hint-revoke-invite": SceneRevokeInvite,
+  "hint-policy-open": ScenePolicyOpen,
+  "hint-policy-private": ScenePolicyPrivate,
+  "hint-password": ScenePassword,
+};
diff --git a/src/client/components/living/hints/set3.tsx b/src/client/components/living/hints/set3.tsx
new file mode 100644
index 0000000..05de947
--- /dev/null
+++ b/src/client/components/living/hints/set3.tsx
@@ -0,0 +1,416 @@
+// Hint set 3 — settings: video/audio quality, degradation preference, codec, advanced door, details, more-metrics.
+// Scenes follow ../Comic.tsx conventions: 320x96 canvas, 2-panel
+// before→after idiom (Frame x={4} w={152} + Frame x={164} w={152}), vls-
+// prefixed keyframes in an inline <style>, rmBlock for reduced motion.
+import {
+  FAINT,
+  Frame,
+  LINE,
+  LIVE,
+  MINT,
+  Pawn,
+  SKY,
+  STAR_GOLD,
+  Star,
+  TV_BODY,
+  TV_EDGE,
+  TV_SCREEN,
+  rmBlock,
+} from "../Comic";
+import type { HintScene, Set3Kind } from "./index";
+
+/** hint-quality: soft TV (few fat scanlines, squinting pawn) → sharp TV (many
+ * thin crisp lines, one light sweep, star pop). Loop 3s. */
+const hintQuality: HintScene = ({ theme }) => (
+  <>
+    <style>{`
+.vls-vq-soft{animation:vlsVqSoft 3s ease-in-out infinite}
+.vls-vq-sweep{animation:vlsVqSweep 3s ease-in-out infinite}
+.vls-vq-star{transform-box:fill-box;transform-origin:center;animation:vlsVqStar 3s cubic-bezier(.3,1.5,.5,1) infinite}
+@keyframes vlsVqSoft{0%,48%,100%{opacity:.4}12%{opacity:.58}24%{opacity:.34}36%{opacity:.52}}
+@keyframes vlsVqSweep{0%,22%{transform:translateX(0);opacity:0}30%{opacity:.3}48%,100%{transform:translateX(49px);opacity:0}}
+@keyframes vlsVqStar{0%,55%{opacity:0;transform:scale(0)}66%{opacity:1;transform:scale(1.25)}74%,100%{opacity:1;transform:scale(1)}}
+${rmBlock(
+  ["vls-vq-soft", "vls-vq-sweep", "vls-vq-star"],
+  [
+    [".vls-vq-soft", "opacity:.4"],
+    [".vls-vq-sweep", "opacity:0"],
+    [".vls-vq-star", "opacity:1;transform:none"],
+  ],
+)}
+`}</style>
+    <Frame x={4} w={152} theme={theme} />
+    <Frame x={164} w={152} theme={theme} />
+    {/* BEFORE: pawn squints at a soft picture (3 fat faint scanlines) */}
+    <Pawn x={26} yb={80} s={8} />
+    <path d="M24 64h2.8 M27.6 64h2.8" stroke="#101a2c" strokeWidth={2} strokeLinecap="round" fill="none" />
+    <rect x={52} y={22} width={76} height={46} rx={8} fill={TV_BODY} stroke={TV_EDGE} strokeWidth={2} />
+    <rect x={58} y={28} width={64} height={30} rx={3} fill={TV_SCREEN} />
+    <g className="vls-vq-soft" fill={LINE} opacity={0.4}>
+      <rect x={63} y={33} width={52} height={6} rx={3} />
+      <rect x={63} y={42} width={52} height={6} rx={3} />
+      <rect x={63} y={51} width={52} height={6} rx={3} />
+    </g>
+    {/* AFTER: crisp thin scanlines + sweep + star; pawn brightens up */}
+    <Pawn x={186} yb={80} s={8} />
+    <circle cx={187} cy={62.8} r={1.2} fill="#101a2c" />
+    <circle cx={190} cy={62.8} r={1.2} fill="#101a2c" />
+    <rect x={212} y={22} width={76} height={46} rx={8} fill={TV_BODY} stroke={TV_EDGE} strokeWidth={2} />
+    <rect x={218} y={28} width={64} height={30} rx={3} fill={TV_SCREEN} />
+    <g fill={MINT} opacity={0.95}>
+      <rect x={221} y={30} width={58} height={2.5} rx={1.25} />
+      <rect x={221} y={35} width={58} height={2.5} rx={1.25} />
+      <rect x={221} y={40} width={58} height={2.5} rx={1.25} />
+      <rect x={221} y={45} width={58} height={2.5} rx={1.25} />
+      <rect x={221} y={50} width={58} height={2.5} rx={1.25} />
+      <rect x={221} y={55} width={58} height={2.5} rx={1.25} />
+    </g>
+    <rect className="vls-vq-sweep" x={218} y={28} width={9} height={30} fill="#ffffff" opacity={0} />
+    <Star x={294} y={17} r={7} className="vls-vq-star" baseOpacity={0} />
+  </>
+);
+
+/** hint-audio-quality: speaker with one thin faint arc (pawn leans in to
+ * hear) → three bold rich arcs (happy-eye pawn static, star). Loop 3s. */
+const hintAudioQuality: HintScene = ({ theme }) => (
+  <>
+    <style>{`
+.vls-aq-weak{animation:vlsAqWeak 3s ease-in-out infinite}
+.vls-aq-listen{transform-box:fill-box;transform-origin:50% 100%;animation:vlsAqListen 3s ease-in-out infinite}
+.vls-aq-a1{animation:vlsAqPing 3s ease-out infinite}
+.vls-aq-a2{animation:vlsAqPing 3s ease-out .08s infinite}
+.vls-aq-a3{animation:vlsAqPing 3s ease-out .16s infinite}
+.vls-aq-star{transform-box:fill-box;transform-origin:center;animation:vlsAqStar 3s cubic-bezier(.3,1.5,.5,1) infinite}
+@keyframes vlsAqWeak{0%,30%,100%{opacity:.4}12%{opacity:.6}22%{opacity:.32}}
+@keyframes vlsAqListen{0%,30%,58%,100%{transform:rotate(0)}40%,50%{transform:rotate(-8deg)}}
+@keyframes vlsAqPing{0%,5%{opacity:.25}12%,100%{opacity:1}}
+@keyframes vlsAqStar{0%,46%{opacity:0;transform:scale(0)}54%{opacity:1;transform:scale(1.25)}60%,100%{opacity:1;transform:scale(1)}}
+${rmBlock(
+  ["vls-aq-weak", "vls-aq-listen", "vls-aq-a1", "vls-aq-a2", "vls-aq-a3", "vls-aq-star"],
+  [
+    [".vls-aq-weak", "opacity:.4"],
+    [".vls-aq-listen,.vls-aq-star", "transform:none"],
+    [".vls-aq-a1,.vls-aq-a2,.vls-aq-a3,.vls-aq-star", "opacity:1"],
+  ],
+)}
+`}</style>
+    <Frame x={4} w={152} theme={theme} />
+    <Frame x={164} w={152} theme={theme} />
+    {/* BEFORE: thin faint arc, pawn cups its ear and leans in */}
+    <rect x={40} y={42} width={13} height={18} rx={3} fill={TV_BODY} stroke={TV_EDGE} strokeWidth={2} />
+    <path d="M53 47 L67 38 V64 L53 55 Z" fill={TV_BODY} stroke={TV_EDGE} strokeWidth={2} strokeLinejoin="round" />
+    <path className="vls-aq-weak" d="M73 45 a9 9 0 0 1 0 12" stroke={LINE} strokeWidth={2} strokeLinecap="round" fill="none" opacity={0.4} />
+    <g className="vls-aq-listen">
+      <Pawn x={122} yb={80} s={9} />
+      <circle cx={118.5} cy={61.3} r={1.3} fill="#101a2c" />
+      <circle cx={122} cy={61.3} r={1.3} fill="#101a2c" />
+      <path d="M116 55 a7 7 0 0 0 0 12" stroke="#23804f" strokeWidth={2.5} strokeLinecap="round" fill="none" />
+    </g>
+    {/* AFTER: three bold arcs, happy-eye pawn static, star */}
+    <rect x={200} y={42} width={13} height={18} rx={3} fill={TV_BODY} stroke={TV_EDGE} strokeWidth={2} />
+    <path d="M213 47 L227 38 V64 L213 55 Z" fill={TV_BODY} stroke={TV_EDGE} strokeWidth={2} strokeLinejoin="round" />
+    <g stroke={LIVE} strokeWidth={2.5} strokeLinecap="round" fill="none">
+      <path className="vls-aq-a1" d="M232 46 a8 8 0 0 1 0 10" />
+      <path className="vls-aq-a2" d="M237 41 a13 13 0 0 1 0 20" />
+      <path className="vls-aq-a3" d="M242 36 a18 18 0 0 1 0 30" />
+    </g>
+    <Pawn x={282} yb={80} s={9} />
+    <path d="M277.5 62 q1.7 -2.3 3.4 0 M282.5 62 q1.7 -2.3 3.4 0" stroke="#101a2c" strokeWidth={1.8} strokeLinecap="round" fill="none" />
+    <Star x={257} y={21} r={6.5} className="vls-aq-star" baseOpacity={0} />
+  </>
+);
+
+/** hint-degrade-pref: balance scale weighing a crisp frame against a
+ * motion-blur frame (beam wobbles) → scale settles level, star. Loop 3.2s. */
+const hintDegradePref: HintScene = ({ theme }) => (
+  <>
+    <style>{`
+.vls-dp-beam{transform-box:fill-box;transform-origin:50% 0%;animation:vlsDpBeam 3.2s ease-in-out infinite}
+.vls-dp-settle{transform-box:fill-box;transform-origin:50% 0%;animation:vlsDpSettle 3.2s ease-in-out infinite}
+.vls-dp-star{transform-box:fill-box;transform-origin:center;animation:vlsDpStar 3.2s cubic-bezier(.3,1.5,.5,1) infinite}
+@keyframes vlsDpBeam{0%,40%,100%{transform:rotate(0)}12%{transform:rotate(5deg)}26%{transform:rotate(-4deg)}}
+@keyframes vlsDpSettle{0%,16%,100%{transform:rotate(0)}4%{transform:rotate(3deg)}10%{transform:rotate(-2deg)}}
+@keyframes vlsDpStar{0%,30%{opacity:0;transform:scale(0)}40%{opacity:1;transform:scale(1.25)}48%,100%{opacity:1;transform:scale(1)}}
+${rmBlock(
+  ["vls-dp-beam", "vls-dp-settle", "vls-dp-star"],
+  [
+    [".vls-dp-beam,.vls-dp-settle,.vls-dp-star", "transform:none"],
+    [".vls-dp-star", "opacity:1"],
+  ],
+)}
+`}</style>
+    <Frame x={4} w={152} theme={theme} />
+    <Frame x={164} w={152} theme={theme} />
+    {/* BEFORE: pawn watches the scale wobble — crisp frame vs blur frame */}
+    <Pawn x={26} yb={80} s={7.5} />
+    <circle cx={27.3} cy={64} r={1.1} fill="#101a2c" />
+    <circle cx={29.7} cy={64} r={1.1} fill="#101a2c" />
+    <path d="M84 78 V34 M70 78 H98" stroke="var(--ink)" strokeWidth={2.5} strokeLinecap="round" fill="none" />
+    <g className="vls-dp-beam" stroke="var(--ink)" strokeWidth={2.5} strokeLinecap="round" fill="none">
+      <path d="M52 34 H116" />
+      <path d="M52 34 V44 M116 34 V44" strokeWidth={2} />
+      <path d="M44 44 Q52 51 60 44 M44 44 H60" strokeWidth={2} />
+      <path d="M108 44 Q116 51 124 44 M108 44 H124" strokeWidth={2} />
+      <rect x={46.5} y={35} width={11} height={9} rx={1.5} fill="var(--paper)" strokeWidth={2} />
+      <rect x={50.2} y={38} width={3.6} height={3.6} rx={0.8} fill="var(--ink)" stroke="none" />
+      <rect x={104.5} y={35} width={11} height={9} rx={1.5} stroke={FAINT} strokeWidth={2} opacity={0.25} />
+      <rect x={107} y={35} width={11} height={9} rx={1.5} stroke={FAINT} strokeWidth={2} opacity={0.5} />
+      <rect x={109.5} y={35} width={11} height={9} rx={1.5} fill="var(--paper)" strokeWidth={2} />
+    </g>
+    <circle cx={84} cy={34} r={2.5} fill="var(--ink)" />
+    {/* AFTER: settle once, level, star; pawn pleased */}
+    <Pawn x={298} yb={80} s={7.5} />
+    <path d="M294 65 q1.6 -2.2 3.2 0 M299 65 q1.6 -2.2 3.2 0" stroke="#101a2c" strokeWidth={1.8} strokeLinecap="round" fill="none" />
+    <path d="M244 78 V34 M230 78 H258" stroke="var(--ink)" strokeWidth={2.5} strokeLinecap="round" fill="none" />
+    <g className="vls-dp-settle" stroke="var(--ink)" strokeWidth={2.5} strokeLinecap="round" fill="none">
+      <path d="M212 34 H276" />
+      <path d="M212 34 V44 M276 34 V44" strokeWidth={2} />
+      <path d="M204 44 Q212 51 220 44 M204 44 H220" strokeWidth={2} />
+      <path d="M268 44 Q276 51 284 44 M268 44 H284" strokeWidth={2} />
+      <rect x={206.5} y={35} width={11} height={9} rx={1.5} fill="var(--paper)" strokeWidth={2} />
+      <rect x={210.2} y={38} width={3.6} height={3.6} rx={0.8} fill="var(--ink)" stroke="none" />
+      <rect x={264.5} y={35} width={11} height={9} rx={1.5} stroke={FAINT} strokeWidth={2} opacity={0.25} />
+      <rect x={267} y={35} width={11} height={9} rx={1.5} stroke={FAINT} strokeWidth={2} opacity={0.5} />
+      <rect x={269.5} y={35} width={11} height={9} rx={1.5} fill="var(--paper)" strokeWidth={2} />
+    </g>
+    <circle cx={244} cy={34} r={2.5} fill="var(--ink)" />
+    <Star x={244} y={16} r={7} className="vls-dp-star" baseOpacity={0} />
+  </>
+);
+
+/** hint-codec: puzzle piece with eyes floats beside a TV with a dashed
+ * socket → piece slots in, LED goes live, star. Loop 3s. */
+const hintCodec: HintScene = ({ theme }) => (
+  <>
+    <style>{`
+.vls-cd-bob{animation:vlsCdBob 3s ease-in-out infinite}
+.vls-cd-dock{animation:vlsCdDock 3s cubic-bezier(.3,1.5,.5,1) infinite}
+.vls-cd-star{transform-box:fill-box;transform-origin:center;animation:vlsCdStar 3s cubic-bezier(.3,1.5,.5,1) infinite}
+@keyframes vlsCdBob{0%,40%,100%{transform:translateY(0)}20%{transform:translateY(-2.5px)}}
+@keyframes vlsCdDock{0%,6%{transform:translateX(-8px)}20%{transform:translateX(1px)}26%,100%{transform:translateX(0)}}
+@keyframes vlsCdStar{0%,32%{opacity:0;transform:scale(0)}42%{opacity:1;transform:scale(1.25)}50%,100%{opacity:1;transform:scale(1)}}
+${rmBlock(
+  ["vls-cd-bob", "vls-cd-dock", "vls-cd-star"],
+  [
+    [".vls-cd-bob,.vls-cd-dock,.vls-cd-star", "transform:none"],
+    [".vls-cd-star", "opacity:1"],
+  ],
+)}
+`}</style>
+    <Frame x={4} w={152} theme={theme} />
+    <Frame x={164} w={152} theme={theme} />
+    {/* BEFORE: piece bobs beside the TV, dashed socket waits on the edge */}
+    <g className="vls-cd-bob">
+      <path
+        d="M40 34 a4 4 0 0 1 4-4 h16 a4 4 0 0 1 4 4 v5 a3.5 3.5 0 0 1 0 7 v4 a4 4 0 0 1-4 4 h-16 a4 4 0 0 1-4-4 Z"
+        fill={STAR_GOLD}
+        stroke="var(--ink)"
+        strokeWidth={2}
+        strokeLinejoin="round"
+      />
+      <circle cx={48.5} cy={39} r={1.5} fill="#101a2c" />
+      <circle cx={55.5} cy={39} r={1.5} fill="#101a2c" />
+    </g>
+    <rect x={92} y={22} width={52} height={40} rx={7} fill={TV_BODY} stroke={TV_EDGE} strokeWidth={2} />
+    <rect x={97} y={27} width={42} height={26} rx={3} fill={TV_SCREEN} />
+    <path d="M92 37 a5 5 0 0 1 0 10" stroke={FAINT} strokeWidth={2} strokeLinecap="round" strokeDasharray="3 3" fill="none" />
+    <circle cx={118} cy={68} r={2.5} fill={TV_EDGE} />
+    {/* AFTER: piece docked flush, happy eyes, LED live, star */}
+    <rect x={252} y={22} width={52} height={40} rx={7} fill={TV_BODY} stroke={TV_EDGE} strokeWidth={2} />
+    <rect x={257} y={27} width={42} height={26} rx={3} fill={TV_SCREEN} />
+    <circle cx={278} cy={68} r={2.5} fill={LIVE} />
+    <g className="vls-cd-dock">
+      <path
+        d="M224 34 a4 4 0 0 1 4-4 h16 a4 4 0 0 1 4 4 v5 a3.5 3.5 0 0 1 0 7 v4 a4 4 0 0 1-4 4 h-16 a4 4 0 0 1-4-4 Z"
+        fill={STAR_GOLD}
+        stroke="var(--ink)"
+        strokeWidth={2}
+        strokeLinejoin="round"
+      />
+      <path d="M234 40 q1.8 -2.4 3.6 0 M241 40 q1.8 -2.4 3.6 0" stroke="#101a2c" strokeWidth={1.8} strokeLinecap="round" fill="none" />
+    </g>
+    <Star x={284} y={16} r={7} className="vls-cd-star" baseOpacity={0} />
+  </>
+);
+
+/** hint-advanced: closed cabinet door with a sliders glyph → door swings
+ * open revealing 3 slider tracks with set knobs; pawn hops. Loop 3.2s. */
+const hintAdvanced: HintScene = ({ theme }) => (
+  <>
+    <style>{`
+.vls-adv-blink{transform-box:fill-box;transform-origin:center;animation:vlsAdvBlink 3.2s ease-in-out infinite}
+.vls-adv-door{transform-box:fill-box;transform-origin:left center;animation:vlsAdvDoor 3.2s ease-in-out infinite}
+.vls-adv-hop{transform-box:fill-box;transform-origin:50% 100%;animation:vlsAdvHop 3.2s cubic-bezier(.3,1.5,.5,1) infinite}
+@keyframes vlsAdvBlink{0%,52%,60%,100%{transform:scaleY(1)}56%{transform:scaleY(.12)}}
+@keyframes vlsAdvDoor{0%,8%{transform:scaleX(1)}26%{transform:scaleX(.09)}33%,100%{transform:scaleX(.14)}}
+@keyframes vlsAdvHop{0%,40%,62%,100%{transform:translateY(0)}46%{transform:translateY(-4.5px)}52%{transform:translateY(0)}57%{transform:translateY(-2px)}}
+${rmBlock(
+  ["vls-adv-blink", "vls-adv-door", "vls-adv-hop"],
+  [
+    [".vls-adv-blink,.vls-adv-hop", "transform:none"],
+    [".vls-adv-door", "transform:scaleX(.14)"],
+  ],
+)}
+`}</style>
+    <Frame x={4} w={152} theme={theme} />
+    <Frame x={164} w={152} theme={theme} />
+    {/* BEFORE: closed door, sliders glyph embossed, pawn glances over */}
+    <rect x={44} y={18} width={56} height={60} rx={8} fill="var(--wall-2)" stroke="var(--ink)" strokeWidth={2.5} />
+    <rect x={49} y={23} width={44} height={50} rx={5} fill="var(--paper)" stroke="var(--ink)" strokeWidth={2} />
+    <path d="M56 36 H74 M56 46 H74" stroke={FAINT} strokeWidth={2} strokeLinecap="round" fill="none" />
+    <circle cx={64} cy={36} r={2.5} fill="var(--ink)" />
+    <circle cx={70} cy={46} r={2.5} fill="var(--ink)" />
+    <circle cx={87} cy={48} r={2.5} fill="var(--ink)" />
+    <Pawn x={122} yb={80} s={7.5} />
+    <g className="vls-adv-blink">
+      <circle cx={118.6} cy={64.2} r={1.2} fill="#101a2c" />
+      <circle cx={122} cy={64.2} r={1.2} fill="#101a2c" />
+    </g>
+    {/* AFTER: tracks + set knobs revealed as the door swings open */}
+    <rect x={204} y={18} width={56} height={60} rx={8} fill="var(--wall-2)" stroke="var(--ink)" strokeWidth={2.5} />
+    <g stroke={FAINT} strokeWidth={2.5} strokeLinecap="round" fill="none">
+      <path d="M215 34 H251" />
+      <path d="M215 48 H251" />
+      <path d="M215 62 H251" />
+    </g>
+    <circle cx={222} cy={34} r={4} fill={LIVE} stroke="var(--ink)" strokeWidth={1.5} />
+    <circle cx={242} cy={48} r={4} fill={STAR_GOLD} stroke="var(--ink)" strokeWidth={1.5} />
+    <circle cx={230} cy={62} r={4} fill={SKY} stroke="var(--ink)" strokeWidth={1.5} />
+    <g className="vls-adv-door">
+      <rect x={209} y={23} width={44} height={50} rx={5} fill="var(--paper)" stroke="var(--ink)" strokeWidth={2} />
+    </g>
+    <g className="vls-adv-hop">
+      <Pawn x={284} yb={80} s={7.5} />
+      <circle cx={281} cy={64.2} r={1.2} fill="#101a2c" />
+      <circle cx={284.4} cy={64.2} r={1.2} fill="#101a2c" />
+    </g>
+  </>
+);
+
+/** hint-details: a plain row of meter bars → magnifier pops over the bars,
+ * enlarged inside the lens; pawn peeks. Loop 3s. */
+const hintDetails: HintScene = ({ theme }) => (
+  <>
+    <style>{`
+.vls-dt-lens{transform-box:fill-box;transform-origin:center;animation:vlsDtLens 3s cubic-bezier(.3,1.5,.5,1) infinite}
+.vls-dt-blink{transform-box:fill-box;transform-origin:center;animation:vlsDtBlink 3s ease-in-out infinite}
+@keyframes vlsDtLens{0%,6%{transform:scale(0);opacity:0}14%{transform:scale(1.12);opacity:1}20%,100%{transform:scale(1);opacity:1}}
+@keyframes vlsDtBlink{0%,56%,64%,100%{transform:scaleY(1)}60%{transform:scaleY(.12)}}
+${rmBlock(
+  ["vls-dt-lens", "vls-dt-blink"],
+  [
+    [".vls-dt-lens", "transform:none;opacity:1"],
+    [".vls-dt-blink", "transform:none"],
+  ],
+)}
+`}</style>
+    <Frame x={4} w={152} theme={theme} />
+    <Frame x={164} w={152} theme={theme} />
+    {/* BEFORE: plain bar row, pawn looks on */}
+    <path d="M28 74 H116" stroke="var(--ink)" strokeWidth={2.5} strokeLinecap="round" fill="none" />
+    <g fill="var(--ink)">
+      <rect x={34} y={60} width={8} height={14} rx={2.5} />
+      <rect x={50} y={50} width={8} height={24} rx={2.5} />
+      <rect x={66} y={56} width={8} height={18} rx={2.5} />
+      <rect x={82} y={44} width={8} height={30} rx={2.5} />
+      <rect x={98} y={52} width={8} height={22} rx={2.5} />
+    </g>
+    <Pawn x={132} yb={80} s={7} />
+    <circle cx={129.8} cy={65.2} r={1.2} fill="#101a2c" />
+    <circle cx={132.6} cy={65.2} r={1.2} fill="#101a2c" />
+    {/* AFTER: magnifier over the same bars, enlarged inside the lens */}
+    <path d="M188 74 H276" stroke="var(--ink)" strokeWidth={2.5} strokeLinecap="round" fill="none" />
+    <g fill="var(--ink)">
+      <rect x={194} y={60} width={8} height={14} rx={2.5} />
+      <rect x={210} y={50} width={8} height={24} rx={2.5} />
+      <rect x={226} y={56} width={8} height={18} rx={2.5} />
+      <rect x={242} y={44} width={8} height={30} rx={2.5} />
+      <rect x={258} y={52} width={8} height={22} rx={2.5} />
+    </g>
+    <g className="vls-dt-lens">
+      <circle cx={232} cy={52} r={21} fill="var(--paper)" stroke="var(--ink)" strokeWidth={3} />
+      <path d="M247 67 L258 78" stroke="var(--ink)" strokeWidth={4} strokeLinecap="round" fill="none" />
+      <g fill="var(--ink)">
+        <rect x={214} y={42} width={10} height={30} rx={3} />
+        <rect x={227} y={50} width={10} height={22} rx={3} />
+        <rect x={240} y={40} width={10} height={32} rx={3} />
+      </g>
+    </g>
+    <Pawn x={296} yb={80} s={7} />
+    <g className="vls-dt-blink">
+      <circle cx={293.4} cy={65.6} r={1.2} fill="#101a2c" />
+      <circle cx={296.2} cy={65.6} r={1.2} fill="#101a2c" />
+    </g>
+  </>
+);
+
+/** hint-more-metrics: one meter row + chevron-down (beckons) → three rows
+ * unfold with overshoot + chevron-up. Loop 3s. */
+const hintMoreMetrics: HintScene = ({ theme }) => (
+  <>
+    <style>{`
+.vls-mm-chev{animation:vlsMmChev 3s ease-in-out infinite}
+.vls-mm-r2{animation:vlsMmIn 3s cubic-bezier(.3,1.5,.5,1) infinite}
+.vls-mm-r3{animation:vlsMmIn 3s cubic-bezier(.3,1.5,.5,1) .12s infinite}
+@keyframes vlsMmChev{0%,30%,100%{transform:translateY(0)}15%{transform:translateY(2.5px)}}
+@keyframes vlsMmIn{0%{opacity:0;transform:translateY(-7px)}8%{opacity:1;transform:translateY(1px)}14%,100%{opacity:1;transform:translateY(0)}}
+${rmBlock(
+  ["vls-mm-chev", "vls-mm-r2", "vls-mm-r3"],
+  [
+    [".vls-mm-chev", "transform:none"],
+    [".vls-mm-r2,.vls-mm-r3", "opacity:1;transform:none"],
+  ],
+)}
+`}</style>
+    <Frame x={4} w={152} theme={theme} />
+    <Frame x={164} w={152} theme={theme} />
+    {/* BEFORE: one folded row, chevron-down bobs, pawn watches */}
+    <rect x={34} y={32} width={92} height={15} rx={7.5} fill="var(--wall-2)" stroke="var(--ink)" strokeWidth={2} />
+    <g fill="var(--ink)">
+      <rect x={46} y={38} width={5} height={5} rx={1.5} />
+      <rect x={56} y={35} width={5} height={8} rx={1.5} />
+      <rect x={66} y={37} width={5} height={6} rx={1.5} />
+      <circle cx={80} cy={39.5} r={2} />
+    </g>
+    <path className="vls-mm-chev" d="M70 62 l10 8 l10 -8" stroke="var(--ink)" strokeWidth={3} strokeLinecap="round" strokeLinejoin="round" fill="none" />
+    <Pawn x={140} yb={80} s={6} />
+    <circle cx={138.2} cy={67.4} r={1} fill="#101a2c" />
+    <circle cx={140.6} cy={67.4} r={1} fill="#101a2c" />
+    {/* AFTER: three rows unfolded, chevron-up on top */}
+    <path d="M230 22 l10 -7 l10 7" stroke="var(--ink)" strokeWidth={3} strokeLinecap="round" strokeLinejoin="round" fill="none" />
+    <rect x={194} y={28} width={92} height={15} rx={7.5} fill="var(--wall-2)" stroke="var(--ink)" strokeWidth={2} />
+    <g fill="var(--ink)">
+      <rect x={206} y={34} width={5} height={5} rx={1.5} />
+      <rect x={216} y={31} width={5} height={8} rx={1.5} />
+      <rect x={226} y={33} width={5} height={6} rx={1.5} />
+      <circle cx={240} cy={35.5} r={2} />
+    </g>
+    <g className="vls-mm-r2">
+      <rect x={194} y={46} width={92} height={15} rx={7.5} fill="var(--wall-2)" stroke="var(--ink)" strokeWidth={2} />
+      <rect x={206} y={52} width={5} height={5} rx={1.5} fill={LIVE} />
+      <rect x={216} y={49} width={5} height={8} rx={1.5} fill={LIVE} />
+      <rect x={226} y={51} width={5} height={6} rx={1.5} fill={LIVE} />
+      <circle cx={240} cy={53.5} r={2} fill={LIVE} />
+    </g>
+    <g className="vls-mm-r3">
+      <rect x={194} y={64} width={92} height={15} rx={7.5} fill="var(--wall-2)" stroke="var(--ink)" strokeWidth={2} />
+      <rect x={206} y={70} width={5} height={5} rx={1.5} fill={STAR_GOLD} />
+      <rect x={216} y={67} width={5} height={8} rx={1.5} fill={STAR_GOLD} />
+      <rect x={226} y={69} width={5} height={6} rx={1.5} fill={STAR_GOLD} />
+      <circle cx={240} cy={71.5} r={2} fill={STAR_GOLD} />
+    </g>
+    <Pawn x={300} yb={80} s={6} />
+    <circle cx={298.2} cy={67.4} r={1} fill="#101a2c" />
+    <circle cx={300.6} cy={67.4} r={1} fill="#101a2c" />
+  </>
+);
+
+export const SET3_SCENES: Record<Set3Kind, HintScene> = {
+  "hint-quality": hintQuality,
+  "hint-audio-quality": hintAudioQuality,
+  "hint-degrade-pref": hintDegradePref,
+  "hint-codec": hintCodec,
+  "hint-advanced": hintAdvanced,
+  "hint-details": hintDetails,
+  "hint-more-metrics": hintMoreMetrics,
+};
diff --git a/src/client/components/living/hints/set4.tsx b/src/client/components/living/hints/set4.tsx
new file mode 100644
index 0000000..da95264
--- /dev/null
+++ b/src/client/components/living/hints/set4.tsx
@@ -0,0 +1,441 @@
+// Hint set 4 — people & misc: topology, close, admit/deny, rename, theme, join-go, route p2p/sfu.
+// Scenes follow ../Comic.tsx conventions: 320x96 canvas, 2-panel
+// before→after idiom (Frame x={4} w={152} + Frame x={164} w={152}), vls-
+// prefixed keyframes in an inline <style>, rmBlock for reduced motion.
+// Absolute coordinates only: any element whose class animates `transform`
+// carries no transform attribute — positions are baked into path data.
+import {
+  Crown,
+  Door,
+  FAINT,
+  Frame,
+  LIVE,
+  MINT,
+  Pawn,
+  RedX,
+  SKY,
+  ServerBox,
+  Spark,
+  Star,
+  STAR_GOLD,
+  TV_SCREEN,
+  rmBlock,
+} from "../Comic";
+import type { HintScene, Set4Kind } from "./index";
+
+const INK = "var(--ink)";
+const WALL2 = "var(--wall-2)";
+const EYE = "#101a2c";
+
+/* hint-topology: [one crowned pawn alone] → [crowned pawn with two leaf
+   pawns on live-green edges]. Loop 3.2s: leaves hop in turn (8-20%, 26-38%),
+   everyone blinks at 62%; rest >=55%. */
+const HintTopology: HintScene = ({ theme }) => (
+  <>
+    <style>{`
+.vls-top-eyes{transform-box:fill-box;transform-origin:center;animation:vlsTopBlink 3.2s ease-in-out infinite}
+.vls-top-leaf1{transform-box:fill-box;transform-origin:50% 100%;animation:vlsTopHop1 3.2s ease-in-out infinite}
+.vls-top-leaf2{transform-box:fill-box;transform-origin:50% 100%;animation:vlsTopHop2 3.2s ease-in-out infinite}
+@keyframes vlsTopBlink{0%,58%,66%,100%{transform:scaleY(1)}62%{transform:scaleY(.12)}}
+@keyframes vlsTopHop1{0%,8%{transform:translateY(0)}14%{transform:translateY(-4px)}20%,100%{transform:translateY(0)}}
+@keyframes vlsTopHop2{0%,26%{transform:translateY(0)}32%{transform:translateY(-4px)}38%,100%{transform:translateY(0)}}
+${rmBlock(
+  ["vls-top-eyes", "vls-top-leaf1", "vls-top-leaf2"],
+  [[".vls-top-eyes,.vls-top-leaf1,.vls-top-leaf2", "transform:none"]],
+)}
+`}</style>
+    <Frame x={4} w={152} theme={theme} />
+    <Frame x={164} w={152} theme={theme} accent={LIVE} />
+    <Crown x={80} y={47} />
+    <Pawn x={80} yb={78} s={12} />
+    <g className="vls-top-eyes" fill={EYE}>
+      <circle cx={77.4} cy={54} r={1.3} />
+      <circle cx={82.6} cy={54} r={1.3} />
+    </g>
+    <g stroke={LIVE} strokeWidth={3} strokeLinecap="round" fill="none">
+      <path d="M240 47 C231 55 222 58 213 65" />
+      <path d="M240 47 C249 55 258 58 267 65" />
+    </g>
+    <Pawn x={240} yb={46} s={7} />
+    <g className="vls-top-eyes" fill={EYE}>
+      <circle cx={237.8} cy={32} r={0.9} />
+      <circle cx={242.2} cy={32} r={0.9} />
+    </g>
+    <Crown x={240} y={27} k={0.75} />
+    <Pawn x={210} yb={80} s={7} color={SKY} eyes className="vls-top-leaf1" />
+    <Pawn x={270} yb={80} s={7} color={MINT} eyes className="vls-top-leaf2" />
+  </>
+);
+
+/* hint-close: [open card] → [card folds away + small RedX stamp]. Loop 3.4s:
+   card wobbles (10-28%), folds out (40-52%), X stamps once at 56-62% and
+   holds; rest 62-100%. */
+const HintClose: HintScene = ({ theme }) => (
+  <>
+    <style>{`
+.vls-cls-card{transform-box:fill-box;transform-origin:center;animation:vlsClsCard 3.4s ease-in-out infinite}
+.vls-cls-x{transform-box:fill-box;transform-origin:center;animation:vlsClsX 3.4s ease-out infinite}
+@keyframes vlsClsCard{0%,10%{transform:rotate(0);opacity:1}16%{transform:rotate(2.5deg)}22%{transform:rotate(-2.5deg)}28%,40%{transform:rotate(0);opacity:1}52%,100%{transform:rotate(-14deg) translate(-12px,20px) scale(.55);opacity:0}}
+@keyframes vlsClsX{0%,56%{opacity:0;transform:scale(1.6) rotate(8deg)}62%,100%{opacity:1;transform:scale(1) rotate(8deg)}}
+${rmBlock(
+  ["vls-cls-card", "vls-cls-x"],
+  [
+    [".vls-cls-card", "opacity:0;transform:none"],
+    [".vls-cls-x", "opacity:1;transform:scale(1) rotate(8deg)"],
+  ],
+)}
+`}</style>
+    <Frame x={4} w={152} theme={theme} />
+    <Frame x={164} w={152} theme={theme} />
+    <rect x={52} y={22} width={56} height={50} rx={8} fill={WALL2} stroke={INK} strokeWidth={2.5} />
+    <g stroke={INK} strokeWidth={2} strokeLinecap="round" fill="none" opacity={0.5}>
+      <path d="M62 36 q4 -5 8 0 t8 0 t8 0" />
+      <path d="M62 48 q4 -5 8 0 t8 0" />
+    </g>
+    <g className="vls-cls-card">
+      <rect x={212} y={22} width={56} height={50} rx={8} fill={WALL2} stroke={INK} strokeWidth={2.5} />
+      <g stroke={INK} strokeWidth={2} strokeLinecap="round" fill="none" opacity={0.5}>
+        <path d="M222 36 q4 -5 8 0 t8 0 t8 0" />
+        <path d="M222 48 q4 -5 8 0 t8 0" />
+      </g>
+    </g>
+    <RedX cx={266} cy={24} arm={6.5} className="vls-cls-x" />
+  </>
+);
+
+/* hint-admit: [pawn knocking at a shut door] → [door open, pawn hops in,
+   star]. Loop 3.2s: two knocks 0-24%, hop-in 10-26%, star pop 30-42%;
+   rest ~58%. */
+const HintAdmit: HintScene = ({ theme }) => (
+  <>
+    <style>{`
+.vls-adm-knock{animation:vlsAdmKnock 3.2s ease-in-out infinite}
+.vls-adm-kn{animation:vlsAdmKn 3.2s ease-in-out infinite}
+.vls-adm-hop{transform-box:fill-box;transform-origin:50% 100%;animation:vlsAdmHop 3.2s cubic-bezier(.3,1.4,.5,1) infinite}
+.vls-adm-star{transform-box:fill-box;transform-origin:center;animation:vlsAdmStar 3.2s cubic-bezier(.3,1.5,.5,1) infinite}
+@keyframes vlsAdmKnock{0%{transform:translateX(0)}6%{transform:translateX(4px)}12%{transform:translateX(0)}18%{transform:translateX(4px)}24%,100%{transform:translateX(0)}}
+@keyframes vlsAdmKn{0%,3%{opacity:0}7%{opacity:.9}11%{opacity:0}15%{opacity:.9}22%,100%{opacity:0}}
+@keyframes vlsAdmHop{0%,10%{transform:translate(-40px,0)}18%{transform:translate(-18px,-9px)}26%,100%{transform:translate(0,0)}}
+@keyframes vlsAdmStar{0%,30%{opacity:0;transform:scale(0)}36%{opacity:1;transform:scale(1.25)}42%,100%{opacity:1;transform:scale(1)}}
+${rmBlock(
+  ["vls-adm-knock", "vls-adm-kn", "vls-adm-hop", "vls-adm-star"],
+  [
+    [".vls-adm-kn", "opacity:0"],
+    [".vls-adm-hop,.vls-adm-star", "transform:none"],
+    [".vls-adm-star", "opacity:1"],
+  ],
+)}
+`}</style>
+    <Frame x={4} w={152} theme={theme} />
+    <Frame x={164} w={152} theme={theme} accent={LIVE} />
+    <g className="vls-adm-knock">
+      <Pawn x={63} yb={76} s={9} eyes />
+    </g>
+    <g className="vls-adm-kn" stroke={INK} strokeWidth={2} strokeLinecap="round" opacity={0}>
+      <path d="M84 36l-7-3M82 46h-8M84 56l-7 3" />
+    </g>
+    <Door x={96} y={18} />
+    <rect x={242} y={18} width={38} height={56} rx={5} fill={TV_SCREEN} stroke={INK} strokeWidth={2.5} />
+    <path d="M242 18 L262 25 L262 67 L242 74 Z" fill={WALL2} stroke={INK} strokeWidth={2.5} strokeLinejoin="round" />
+    <circle cx={257} cy={46} r={1.8} fill={INK} />
+    <g className="vls-adm-hop">
+      <Pawn x={271} yb={74} s={8} eyes />
+    </g>
+    <Star x={288} y={24} className="vls-adm-star" baseOpacity={0} />
+  </>
+);
+
+/* hint-deny: [pawn at a shut door] → [door stays shut, pawn turned away
+   waving bye with a head-tilt; footprints trail back]. Gentle: no RedX.
+   Loop 3.2s: two knocks 0-24%, wave 32-52%; rest ~48%. */
+const HintDeny: HintScene = ({ theme }) => (
+  <>
+    <style>{`
+.vls-dny-kn{animation:vlsDnyKn 3.2s ease-in-out infinite}
+.vls-dny-wave{transform-box:fill-box;transform-origin:50% 100%;animation:vlsDnyWave 3.2s ease-in-out infinite}
+@keyframes vlsDnyKn{0%,3%{opacity:0}7%{opacity:.9}11%{opacity:0}15%{opacity:.9}22%,100%{opacity:0}}
+@keyframes vlsDnyWave{0%,32%{transform:rotate(0)}36%{transform:rotate(-8deg)}40%{transform:rotate(8deg)}44%{transform:rotate(-8deg)}48%{transform:rotate(8deg)}52%,100%{transform:rotate(0)}}
+${rmBlock(
+  ["vls-dny-kn", "vls-dny-wave"],
+  [[".vls-dny-kn", "opacity:0"], [".vls-dny-wave", "transform:none"]],
+)}
+`}</style>
+    <Frame x={4} w={152} theme={theme} />
+    <Frame x={164} w={152} theme={theme} />
+    <Pawn x={60} yb={76} s={9} eyes />
+    <g className="vls-dny-kn" stroke={INK} strokeWidth={2} strokeLinecap="round" opacity={0}>
+      <path d="M88 36l-7-3M86 46h-8M88 56l-7 3" />
+    </g>
+    <Door x={96} y={18} />
+    <Door x={252} y={18} />
+    <g fill={INK} opacity={0.35}>
+      <circle cx={222} cy={72} r={1.5} />
+      <circle cx={232} cy={68} r={1.5} />
+    </g>
+    <g className="vls-dny-wave">
+      <Pawn x={206} yb={76} s={9} />
+      <circle cx={202.5} cy={58} r={1} fill={EYE} />
+      <circle cx={206} cy={58} r={1} fill={EYE} />
+    </g>
+  </>
+);
+
+/* hint-rename: [blank name tag] → [pencil writes a squiggle on the tag +
+   spark]. Loop 3.2s: pencil rides the pen tip left→right wiggling (6-34%)
+   as the line draws, spark pops 38-46%, holds; rest 54%. */
+const HintRename: HintScene = ({ theme }) => (
+  <>
+    <style>{`
+.vls-rnm-line{stroke-dasharray:1;animation:vlsRnmLine 3.2s ease-in-out infinite}
+.vls-rnm-pencil{transform-box:fill-box;transform-origin:0% 100%;animation:vlsRnmPencil 3.2s ease-in-out infinite}
+.vls-rnm-spark{transform-box:fill-box;transform-origin:center;animation:vlsRnmSpark 3.2s cubic-bezier(.3,1.5,.5,1) infinite}
+@keyframes vlsRnmLine{0%,6%{stroke-dashoffset:1}34%,100%{stroke-dashoffset:0}}
+@keyframes vlsRnmPencil{0%,6%{transform:translate(-30px,0) rotate(0)}12%{transform:translate(-21px,0) rotate(-6deg)}18%{transform:translate(-13px,0) rotate(5deg)}24%{transform:translate(-6px,0) rotate(-5deg)}30%{transform:translate(-2px,0) rotate(4deg)}34%,100%{transform:translate(0,0) rotate(0)}}
+@keyframes vlsRnmSpark{0%,38%{opacity:0;transform:scale(.4)}44%{opacity:1;transform:scale(1.2)}50%,100%{opacity:1;transform:scale(1)}}
+${rmBlock(
+  ["vls-rnm-line", "vls-rnm-pencil", "vls-rnm-spark"],
+  [
+    [".vls-rnm-line", "stroke-dashoffset:0"],
+    [".vls-rnm-pencil", "transform:none"],
+    [".vls-rnm-spark", "opacity:1;transform:none"],
+  ],
+)}
+`}</style>
+    <Frame x={4} w={152} theme={theme} />
+    <Frame x={164} w={152} theme={theme} accent={LIVE} />
+    <rect x={44} y={30} width={72} height={30} rx={8} fill={WALL2} stroke={INK} strokeWidth={2.5} />
+    <circle cx={55} cy={45} r={2.5} fill="var(--paper)" stroke={INK} strokeWidth={1.5} />
+    <path d="M66 45 h40" stroke={INK} strokeWidth={2} strokeLinecap="round" strokeDasharray="3 4" opacity={0.3} />
+    <rect x={204} y={30} width={72} height={30} rx={8} fill={WALL2} stroke={INK} strokeWidth={2.5} />
+    <circle cx={215} cy={45} r={2.5} fill="var(--paper)" stroke={INK} strokeWidth={1.5} />
+    <path
+      className="vls-rnm-line"
+      d="M224 45 q5 -7 10 0 t10 0 t10 0"
+      pathLength={1}
+      stroke={INK}
+      strokeWidth={2.5}
+      strokeLinecap="round"
+      fill="none"
+    />
+    <g className="vls-rnm-pencil">
+      <polygon points="254.3,39.7 265.6,28.4 270.6,33.4 259.3,44.7" fill={STAR_GOLD} stroke={INK} strokeWidth={2} strokeLinejoin="round" />
+      <polygon points="254.3,39.7 259.3,44.7 254,45" fill={INK} />
+    </g>
+    <Spark x={266} y={24} className="vls-rnm-spark" />
+  </>
+);
+
+/* hint-theme: single wide panel — sun and moon on a two-arrow do-si-do.
+   Loop 3s: sun owns 0-38%, crossfade 38-50%, moon owns 50-88%, fade back;
+   arrows static. */
+const HintTheme: HintScene = ({ theme }) => (
+  <>
+    <style>{`
+.vls-thm-sun{transform-box:fill-box;transform-origin:center;animation:vlsThmSun 3s ease-in-out infinite}
+.vls-thm-moon{transform-box:fill-box;transform-origin:center;animation:vlsThmMoon 3s ease-in-out infinite}
+@keyframes vlsThmSun{0%,38%{opacity:1;transform:scale(1)}50%,88%{opacity:.45;transform:scale(.92)}100%{opacity:1;transform:scale(1)}}
+@keyframes vlsThmMoon{0%,38%{opacity:.45;transform:scale(.92)}50%,88%{opacity:1;transform:scale(1)}100%{opacity:.45;transform:scale(.92)}}
+${rmBlock(
+  ["vls-thm-sun", "vls-thm-moon"],
+  [[".vls-thm-sun,.vls-thm-moon", "opacity:1;transform:none"]],
+)}
+`}</style>
+    <Frame x={4} w={312} theme={theme} />
+    <g stroke={INK} strokeWidth={2.5} strokeLinecap="round" fill="none" opacity={0.55}>
+      <path d="M100 34 A90 90 0 0 1 220 34" />
+      <path d="M212 27 L220 34 L212 41" />
+      <path d="M220 62 A90 90 0 0 0 100 62" />
+      <path d="M108 55 L100 62 L108 69" />
+    </g>
+    <g className="vls-thm-sun">
+      <g stroke={INK} strokeWidth={2.5} strokeLinecap="round">
+        <path d="M125 48h5 M90 48h5 M117.5 61l2.5 4.3 M102.5 35l-2.5-4.3 M102.5 61l-2.5 4.3 M117.5 35l2.5-4.3" />
+      </g>
+      <circle cx={110} cy={48} r={11} fill={STAR_GOLD} stroke={INK} strokeWidth={2} />
+    </g>
+    <g className="vls-thm-moon">
+      <circle cx={210} cy={48} r={11} fill={INK} />
+      <circle cx={214} cy={44} r={9} fill="var(--paper)" />
+      <circle cx={228} cy={32} r={1.8} fill={STAR_GOLD} />
+      <circle cx={232} cy={48} r={1.4} fill={STAR_GOLD} />
+    </g>
+  </>
+);
+
+/* hint-join-go: [pawn beside 4 filled code slots] → [pawn hops through an
+   open door + star]. Loop 3.2s: blink at 62%, hop-in 8-24%, star 28-42%;
+   rest ~58%. */
+const HintJoinGo: HintScene = ({ theme }) => (
+  <>
+    <style>{`
+.vls-jgo-eyes{transform-box:fill-box;transform-origin:center;animation:vlsJgoBlink 3.2s ease-in-out infinite}
+.vls-jgo-hop{transform-box:fill-box;transform-origin:50% 100%;animation:vlsJgoHop 3.2s cubic-bezier(.3,1.4,.5,1) infinite}
+.vls-jgo-star{transform-box:fill-box;transform-origin:center;animation:vlsJgoStar 3.2s cubic-bezier(.3,1.5,.5,1) infinite}
+@keyframes vlsJgoBlink{0%,58%,66%,100%{transform:scaleY(1)}62%{transform:scaleY(.12)}}
+@keyframes vlsJgoHop{0%,8%{transform:translate(-38px,0)}16%{transform:translate(-18px,-10px)}24%,100%{transform:translate(0,0)}}
+@keyframes vlsJgoStar{0%,28%{opacity:0;transform:scale(0)}34%{opacity:1;transform:scale(1.25)}42%,100%{opacity:1;transform:scale(1)}}
+${rmBlock(
+  ["vls-jgo-eyes", "vls-jgo-hop", "vls-jgo-star"],
+  [
+    [".vls-jgo-eyes,.vls-jgo-hop,.vls-jgo-star", "transform:none"],
+    [".vls-jgo-star", "opacity:1"],
+  ],
+)}
+`}</style>
+    <Frame x={4} w={152} theme={theme} />
+    <Frame x={164} w={152} theme={theme} accent={LIVE} />
+    <Pawn x={32} yb={76} s={9} />
+    <g className="vls-jgo-eyes" fill={EYE}>
+      <circle cx={34.6} cy={58} r={1} />
+      <circle cx={38.2} cy={58} r={1} />
+    </g>
+    <g fill={WALL2} stroke={INK} strokeWidth={2}>
+      <rect x={58} y={32} width={15} height={24} rx={4} />
+      <rect x={79} y={32} width={15} height={24} rx={4} />
+      <rect x={100} y={32} width={15} height={24} rx={4} />
+      <rect x={121} y={32} width={15} height={24} rx={4} />
+    </g>
+    <g fill={INK}>
+      <circle cx={65.5} cy={44} r={2.5} />
+      <circle cx={86.5} cy={44} r={2.5} />
+      <circle cx={107.5} cy={44} r={2.5} />
+      <circle cx={128.5} cy={44} r={2.5} />
+    </g>
+    <rect x={224} y={16} width={40} height={58} rx={5} fill={TV_SCREEN} stroke={INK} strokeWidth={2.5} />
+    <path d="M224 16 L246 24 L246 68 L224 74 Z" fill={WALL2} stroke={INK} strokeWidth={2.5} strokeLinejoin="round" />
+    <circle cx={241} cy={45} r={1.8} fill={INK} />
+    <g className="vls-jgo-hop">
+      <Pawn x={255} yb={76} s={9} eyes />
+    </g>
+    <Star x={280} y={22} className="vls-jgo-star" baseOpacity={0} />
+  </>
+);
+
+/* hint-route-p2p: [two pawns apart] → [direct live-green arc pawn→pawn,
+   live dot on the apex]. Loop 3.2s: arc draws 6-28%, both pawns hop 30-42%,
+   panel-1 pair blinks at 64%; rest ~58%. */
+const HintRouteP2p: HintScene = ({ theme }) => (
+  <>
+    <style>{`
+.vls-p2p-eyes{transform-box:fill-box;transform-origin:center;animation:vlsP2pBlink 3.2s ease-in-out infinite}
+.vls-p2p-arc{stroke-dasharray:1;animation:vlsP2pArc 3.2s ease-in-out infinite}
+.vls-p2p-hop{animation:vlsP2pHop 3.2s ease-in-out infinite}
+@keyframes vlsP2pBlink{0%,60%,68%,100%{transform:scaleY(1)}64%{transform:scaleY(.12)}}
+@keyframes vlsP2pArc{0%,6%{stroke-dashoffset:1}28%,100%{stroke-dashoffset:0}}
+@keyframes vlsP2pHop{0%,30%{transform:translateY(0)}36%{transform:translateY(-4px)}42%,100%{transform:translateY(0)}}
+${rmBlock(
+  ["vls-p2p-eyes", "vls-p2p-arc", "vls-p2p-hop"],
+  [
+    [".vls-p2p-arc", "stroke-dashoffset:0"],
+    [".vls-p2p-eyes,.vls-p2p-hop", "transform:none"],
+  ],
+)}
+`}</style>
+    <Frame x={4} w={152} theme={theme} />
+    <Frame x={164} w={152} theme={theme} accent={LIVE} />
+    <Pawn x={42} yb={74} s={9} />
+    <g className="vls-p2p-eyes" fill={EYE}>
+      <circle cx={45} cy={56} r={1} />
+      <circle cx={48.5} cy={56} r={1} />
+    </g>
+    <Pawn x={118} yb={74} s={9} color={SKY} />
+    <g className="vls-p2p-eyes" fill={EYE}>
+      <circle cx={111.5} cy={56} r={1} />
+      <circle cx={115} cy={56} r={1} />
+    </g>
+    <g fill={FAINT}>
+      <circle cx={74} cy={60} r={1.5} />
+      <circle cx={88} cy={60} r={1.5} />
+    </g>
+    <g className="vls-p2p-hop">
+      <Pawn x={202} yb={74} s={9} eyes />
+      <Pawn x={278} yb={74} s={9} color={SKY} eyes />
+    </g>
+    <path
+      className="vls-p2p-arc"
+      d="M213 58 Q240 30 267 58"
+      pathLength={1}
+      stroke={LIVE}
+      strokeWidth={3}
+      strokeLinecap="round"
+      fill="none"
+    />
+    <circle cx={240} cy={44} r={3.5} fill={LIVE} />
+  </>
+);
+
+/* hint-route-sfu: [two pawns apart] → [two live-green arcs detour up
+   through a lit server box]. Loop 3.2s: left arc 6-24%, right arc 14-32%,
+   both pawns hop 34-46%, panel-1 pair blinks at 64%; rest ~54%. */
+const HintRouteSfu: HintScene = ({ theme }) => (
+  <>
+    <style>{`
+.vls-sfu-eyes{transform-box:fill-box;transform-origin:center;animation:vlsSfuBlink 3.2s ease-in-out infinite}
+.vls-sfu-a1{stroke-dasharray:1;animation:vlsSfuA1 3.2s ease-in-out infinite}
+.vls-sfu-a2{stroke-dasharray:1;animation:vlsSfuA2 3.2s ease-in-out infinite}
+.vls-sfu-hop{animation:vlsSfuHop 3.2s ease-in-out infinite}
+@keyframes vlsSfuBlink{0%,60%,68%,100%{transform:scaleY(1)}64%{transform:scaleY(.12)}}
+@keyframes vlsSfuA1{0%,6%{stroke-dashoffset:1}24%,100%{stroke-dashoffset:0}}
+@keyframes vlsSfuA2{0%,14%{stroke-dashoffset:1}32%,100%{stroke-dashoffset:0}}
+@keyframes vlsSfuHop{0%,34%{transform:translateY(0)}40%{transform:translateY(-4px)}46%,100%{transform:translateY(0)}}
+${rmBlock(
+  ["vls-sfu-eyes", "vls-sfu-a1", "vls-sfu-a2", "vls-sfu-hop"],
+  [
+    [".vls-sfu-a1,.vls-sfu-a2", "stroke-dashoffset:0"],
+    [".vls-sfu-eyes,.vls-sfu-hop", "transform:none"],
+  ],
+)}
+`}</style>
+    <Frame x={4} w={152} theme={theme} />
+    <Frame x={164} w={152} theme={theme} accent={LIVE} />
+    <Pawn x={42} yb={74} s={9} />
+    <g className="vls-sfu-eyes" fill={EYE}>
+      <circle cx={45} cy={56} r={1} />
+      <circle cx={48.5} cy={56} r={1} />
+    </g>
+    <Pawn x={118} yb={74} s={9} color={SKY} />
+    <g className="vls-sfu-eyes" fill={EYE}>
+      <circle cx={111.5} cy={56} r={1} />
+      <circle cx={115} cy={56} r={1} />
+    </g>
+    <g fill={FAINT}>
+      <circle cx={74} cy={60} r={1.5} />
+      <circle cx={88} cy={60} r={1.5} />
+    </g>
+    <ServerBox x={228} y={12} lit />
+    <g className="vls-sfu-hop">
+      <Pawn x={200} yb={76} s={9} eyes />
+      <Pawn x={280} yb={76} s={9} color={SKY} eyes />
+    </g>
+    <path
+      className="vls-sfu-a1"
+      d="M209 60 Q219 34 232 29"
+      pathLength={1}
+      stroke={LIVE}
+      strokeWidth={3}
+      strokeLinecap="round"
+      fill="none"
+    />
+    <path
+      className="vls-sfu-a2"
+      d="M271 60 Q261 34 248 29"
+      pathLength={1}
+      stroke={LIVE}
+      strokeWidth={3}
+      strokeLinecap="round"
+      fill="none"
+    />
+  </>
+);
+
+export const SET4_SCENES: Record<Set4Kind, HintScene> = {
+  "hint-topology": HintTopology,
+  "hint-close": HintClose,
+  "hint-admit": HintAdmit,
+  "hint-deny": HintDeny,
+  "hint-rename": HintRename,
+  "hint-theme": HintTheme,
+  "hint-join-go": HintJoinGo,
+  "hint-route-p2p": HintRouteP2p,
+  "hint-route-sfu": HintRouteSfu,
+};
diff --git a/src/client/components/living/primitives.tsx b/src/client/components/living/primitives.tsx
new file mode 100644
index 0000000..6e7e3dd
--- /dev/null
+++ b/src/client/components/living/primitives.tsx
@@ -0,0 +1,306 @@
+// Living-room control primitives. Every glyph control keeps its copy in
+// title/aria; text modes add a visible caption from the same catalog.
+import type { CSSProperties, MouseEvent, ReactNode } from "react";
+import { ComicTooltip } from "./ComicTooltip";
+import type { ComicKind } from "./Comic";
+import type { HintKind } from "./hints";
+import { Glyph, type GlyphName } from "../../ui/icons";
+import { useCopy, type CopyKey } from "../../ui/copy";
+
+// Matches the global `button:disabled` look (styles.css) without the disabled
+// attribute, which would swallow the pointer events and focus the comic
+// tooltip needs. pointer-events: none routes hover/touch to the wrap so all
+// three show channels keep working; keyboard focus is unaffected.
+const SOFT_DISABLED_STYLE: CSSProperties = { opacity: 0.4, pointerEvents: "none" };
+
+// Activation guard for soft-disabled (aria-disabled) hint triggers: the
+// control stays focusable so its comic is reachable, but it never fires.
+function blockSoftDisabledClick(event: MouseEvent<HTMLButtonElement>): void {
+  event.preventDefault();
+  event.stopPropagation();
+}
+
+// Pointer activations blur the trigger so the comic is not pinned open by
+// focus after the action completes; keyboard clicks (detail 0) keep focus,
+// so the panel persists for genuine keyboard use.
+function blurAfterPointerClick(event: MouseEvent<HTMLButtonElement>): void {
+  if (event.detail !== 0) event.currentTarget.blur();
+}
+
+// Renders the functional icon in every mode; vis mode never swaps icons for
+// script — controls stay identical to the text version, hints come from the
+// comic tooltip.
+export function VisGlyph({
+  name,
+  size = 18,
+  draw,
+}: {
+  name: GlyphName;
+  size?: number;
+  /** Draw-in spot id (state-beat icons only — see Glyph). */
+  draw?: string;
+}) {
+  return <Glyph name={name} size={size} draw={draw} />;
+}
+
+export function Cap({ k }: { k: CopyKey }) {
+  const { vis, t } = useCopy();
+  return vis ? null : <span className="lr-cap">{t(k)}</span>;
+}
+
+export function Btn({
+  icon,
+  cap,
+  tone,
+  title,
+  disabled,
+  pressed,
+  expanded,
+  controls,
+  onClick,
+  type = "button",
+  hint,
+  draw,
+}: {
+  icon: GlyphName;
+  cap?: CopyKey;
+  tone?: "primary" | "danger" | "on";
+  title: CopyKey;
+  disabled?: boolean;
+  pressed?: boolean;
+  expanded?: boolean;
+  controls?: string;
+  onClick?: () => void;
+  type?: "button" | "submit";
+  /** Vis mode: 2-panel hint comic on hover/focus; native title stays off. */
+  hint?: HintKind;
+  /** Draw-in spot id for state-beat toggle icons (see Glyph). */
+  draw?: string;
+}) {
+  const { t, vis } = useCopy();
+  const label = t(title);
+  const wrapped = vis && hint;
+  const softDisabled = Boolean(wrapped && disabled);
+  const button = (
+    <button
+      type={type}
+      className={`lr-btn${tone ? ` is-${tone}` : ""}`}
+      title={vis ? undefined : label}
+      aria-label={label}
+      disabled={disabled && !softDisabled}
+      aria-disabled={softDisabled || undefined}
+      aria-pressed={pressed}
+      aria-expanded={expanded}
+      aria-controls={controls}
+      style={softDisabled ? SOFT_DISABLED_STYLE : undefined}
+      onClick={
+        softDisabled
+          ? blockSoftDisabledClick
+          : wrapped
+            ? (event) => {
+                blurAfterPointerClick(event);
+                onClick?.();
+              }
+            : onClick
+      }
+    >
+      <Glyph name={icon} size={19} draw={draw} />
+      {cap ? <Cap k={cap} /> : null}
+    </button>
+  );
+  return wrapped ? (
+    <ComicTooltip kind={wrapped}>{button}</ComicTooltip>
+  ) : (
+    button
+  );
+}
+
+export function Chip({
+  selected,
+  disabled,
+  onClick,
+  title,
+  hint,
+  children,
+}: {
+  selected: boolean;
+  disabled?: boolean;
+  onClick?: () => void;
+  title: string;
+  /** Vis mode: 2-panel hint comic on hover/focus; native title stays off. */
+  hint?: HintKind;
+  children: ReactNode;
+}) {
+  const { vis } = useCopy();
+  const wrapped = vis && hint;
+  const softDisabled = Boolean(wrapped && disabled);
+  const chip = (
+    <button
+      type="button"
+      className={`lr-chip${selected ? " is-selected" : ""}`}
+      aria-pressed={selected}
+      disabled={disabled && !softDisabled}
+      aria-disabled={softDisabled || undefined}
+      style={softDisabled ? SOFT_DISABLED_STYLE : undefined}
+      title={vis ? undefined : title}
+      aria-label={title}
+      onClick={
+        softDisabled
+          ? blockSoftDisabledClick
+          : wrapped
+            ? (event) => {
+                blurAfterPointerClick(event);
+                onClick?.();
+              }
+            : onClick
+      }
+    >
+      {children}
+    </button>
+  );
+  return wrapped ? (
+    <ComicTooltip kind={wrapped}>{chip}</ComicTooltip>
+  ) : (
+    chip
+  );
+}
+
+export function Row({
+  sub,
+  label,
+  children,
+}: {
+  sub?: boolean;
+  label?: string;
+  children: ReactNode;
+}) {
+  return (
+    <div className={`lr-row${sub ? " is-sub" : ""}`} role={label ? "group" : undefined} aria-label={label}>
+      {children}
+    </div>
+  );
+}
+
+export function RowGroup({
+  actions,
+  children,
+}: {
+  actions?: boolean;
+  children: ReactNode;
+}) {
+  return (
+    <div className={actions ? "lr-row-group lr-group-actions" : "lr-row-group"}>
+      {children}
+    </div>
+  );
+}
+
+export function Pill({
+  icon,
+  tone,
+  label,
+  alert,
+  comic,
+}: {
+  icon: GlyphName;
+  tone?: "bad" | "good";
+  label: string;
+  alert?: boolean;
+  comic?: ComicKind;
+}) {
+  const { vis } = useCopy();
+  const wrapped = vis && comic;
+  const body = (
+    <span
+      className={`lr-pill${tone ? ` is-${tone}` : ""}`}
+      role={alert ? "alert" : "status"}
+      title={vis ? undefined : label}
+      // Hint-wrapped bodies must take keyboard focus, or the comic is
+      // unreachable for keyboard users (spans never match :focus-visible).
+      tabIndex={wrapped ? 0 : undefined}
+    >
+      <Glyph name={icon} size={16} />
+      {vis ? <span className="visually-hidden">{label}</span> : <span>{label}</span>}
+    </span>
+  );
+  return wrapped ? (
+    <ComicTooltip kind={wrapped}>{body}</ComicTooltip>
+  ) : (
+    body
+  );
+}
+
+export function SwitchItem({
+  checked,
+  disabled,
+  onChange,
+  label,
+  note,
+  hint,
+}: {
+  checked: boolean;
+  disabled?: boolean;
+  onChange: (checked: boolean) => void;
+  label: string;
+  /** Text modes: extra sentence appended to the title tooltip. */
+  note?: string;
+  /** Vis mode: 2-panel hint comic on hover/focus; native title stays off. */
+  hint?: HintKind;
+}) {
+  const { vis } = useCopy();
+  const wrapped = vis && hint;
+  const softDisabled = Boolean(wrapped && disabled);
+  const item = (
+    <span className="lr-switch-item">
+      <button
+        type="button"
+        className="lr-switch"
+        role="switch"
+        aria-checked={checked}
+        aria-label={label}
+        title={vis ? undefined : note ? `${label} · ${note}` : label}
+        disabled={disabled && !softDisabled}
+        aria-disabled={softDisabled || undefined}
+        style={softDisabled ? SOFT_DISABLED_STYLE : undefined}
+        onClick={
+          softDisabled
+            ? blockSoftDisabledClick
+            : (event) => {
+                if (wrapped) blurAfterPointerClick(event);
+                onChange(!checked);
+              }
+        }
+      />
+      {vis ? null : <span className="lr-cap">{label}</span>}
+    </span>
+  );
+  return wrapped ? (
+    <ComicTooltip kind={wrapped}>{item}</ComicTooltip>
+  ) : (
+    item
+  );
+}
+
+export function NameTag({ name }: { name: string }) {
+  const { t, vis } = useCopy();
+  return (
+    <span className="lr-name-tag" title={vis ? undefined : t("host.name")}>
+      <i aria-hidden="true" />
+      <span>{name}</span>
+    </span>
+  );
+}
+
+export function FieldCap({ k }: { k: CopyKey }) {
+  const { vis, t } = useCopy();
+  return vis ? null : <span className="lr-field-cap">{t(k)}</span>;
+}
+
+export function StatusText({ children }: { children: ReactNode }) {
+  const { vis } = useCopy();
+  return vis ? null : (
+    <span className="lr-status-text" role="status" aria-live="polite">
+      {children}
+    </span>
+  );
+}
diff --git a/src/client/components/status-badge-model.ts b/src/client/components/status-badge-model.ts
index c9cd009..9aa7e29 100644
--- a/src/client/components/status-badge-model.ts
+++ b/src/client/components/status-badge-model.ts
@@ -1,13 +1,7 @@
 import type { ParticipantRouteAssignment } from "../../shared/protocol";
 import type { ConnectionMetrics, PeerSnapshot } from "../types";
 
-export const MEDIA_ROUTE_PRESENTATION = {
-  p2p: { tone: "good", label: "P2P", icon: "network" },
-  sfu: { tone: "warning", label: "SFU fallback", icon: "server" },
-} as const;
-export const ROUTING_STATUS_PRESENTATION = { tone: "neutral", label: "线路分配中" } as const;
-
-export type PresentedMediaRoute = keyof typeof MEDIA_ROUTE_PRESENTATION;
+export type PresentedMediaRoute = "p2p" | "sfu";
 
 export function hasPeerRouteEvidence(
   peer: PeerSnapshot | null | undefined,
diff --git a/src/client/lib/api.ts b/src/client/lib/api.ts
index 2d9ed0e..f592cb0 100644
--- a/src/client/lib/api.ts
+++ b/src/client/lib/api.ts
@@ -1,3 +1,4 @@
+import { say } from "../ui/copy";
 import {
   createRoomResponseSchema,
   roomAccessUpdateResponseSchema,
@@ -26,20 +27,20 @@ async function responseBody(response: Response): Promise<unknown> {
   try {
     return await response.json();
   } catch {
-    throw new ApiError("服务返回了无法识别的响应", response.status);
+    throw new ApiError(say("host.err.serverError"), response.status);
   }
 }
 
 function parseSiteAccessStatus(value: unknown): SiteAccessStatus {
   if (!value || typeof value !== "object") {
-    throw new ApiError("验证服务返回的数据格式不正确", 502);
+    throw new ApiError(say("host.err.serverError"), 502);
   }
   const record = value as Record<string, unknown>;
   if (
     typeof record.required !== "boolean" ||
     typeof record.authenticated !== "boolean"
   ) {
-    throw new ApiError("验证服务返回的数据格式不正确", 502);
+    throw new ApiError(say("host.err.serverError"), 502);
   }
   return {
     required: record.required,
@@ -55,8 +56,10 @@ export async function getSiteAccess(): Promise<SiteAccessStatus> {
   if (!response.ok) {
     throw new ApiError(
       response.status === 401
-        ? "站点访问已失效，请重新验证"
-        : `站点验证服务暂时不可用 (${response.status})`,
+        ? say("gate.expired")
+        : say("gate.serviceUnavailable", {
+            status: String(response.status),
+          }),
       response.status,
     );
   }
@@ -77,8 +80,10 @@ export async function authenticateSiteAccess(
   if (!response.ok) {
     throw new ApiError(
       response.status === 401
-        ? "站点口令不正确，请重试"
-        : `站点验证服务暂时不可用 (${response.status})`,
+        ? say("gate.wrong")
+        : say("gate.serviceUnavailable", {
+            status: String(response.status),
+          }),
       response.status,
     );
   }
@@ -108,15 +113,17 @@ export async function createRoom(
   if (!response.ok) {
     throw new ApiError(
       response.status === 401
-        ? "站点访问已失效，请重新验证"
-        : `当前无法创建房间 (${response.status})`,
+        ? say("gate.expired")
+        : say("host.err.createRoomStatus", {
+            status: String(response.status),
+          }),
       response.status,
     );
   }
 
   const parsed = createRoomResponseSchema.safeParse(body);
   if (!parsed.success) {
-    throw new ApiError("建房服务返回的数据格式不正确", 502);
+    throw new ApiError(say("host.err.serverError"), 502);
   }
   return parsed.data;
 }
@@ -143,14 +150,16 @@ export async function replaceOwnedRoom(
   if (!response.ok) {
     throw new ApiError(
       response.status === 404
-        ? "房间不存在或已过期"
-        : `当前无法更换房间 (${response.status})`,
+        ? say("viewer.msg.notFound")
+        : say("host.err.replaceRoomStatus", {
+            status: String(response.status),
+          }),
       response.status,
     );
   }
   const parsed = createRoomResponseSchema.safeParse(body);
   if (!parsed.success) {
-    throw new ApiError("换房服务返回的数据格式不正确", 502);
+    throw new ApiError(say("host.err.serverError"), 502);
   }
   return parsed.data;
 }
@@ -173,17 +182,19 @@ export async function updateRoomAccess(
   if (!response.ok) {
     throw new ApiError(
       response.status === 401
-        ? "站点访问已失效，请重新验证"
+        ? say("gate.expired")
         : response.status === 404
-          ? "房间不存在或已过期"
-          : `当前无法更新房间设置 (${response.status})`,
+          ? say("viewer.msg.notFound")
+          : say("host.err.updateRoomStatus", {
+              status: String(response.status),
+            }),
       response.status,
     );
   }
 
   const parsed = roomAccessUpdateResponseSchema.safeParse(body);
   if (!parsed.success) {
-    throw new ApiError("房间设置服务返回的数据格式不正确", 502);
+    throw new ApiError(say("host.err.serverError"), 502);
   }
   return parsed.data;
 }
diff --git a/src/client/lib/display-name.ts b/src/client/lib/display-name.ts
index 8befde5..e9e482a 100644
--- a/src/client/lib/display-name.ts
+++ b/src/client/lib/display-name.ts
@@ -1,9 +1,8 @@
 import {
-  DEFAULT_HOST_DISPLAY_NAME_PREFIX,
-  DEFAULT_VIEWER_DISPLAY_NAME,
   normalizeDisplayName,
   type DisplayName,
 } from "../../shared/protocol";
+import { say } from "../ui/copy";
 
 const DISPLAY_NAME_STORAGE_KEY = "screener:display-name:v1";
 
@@ -25,22 +24,23 @@ export function readStoredDisplayName(): DisplayName | null {
 }
 
 export function readDisplayName(
-  fallback: DisplayName = DEFAULT_VIEWER_DISPLAY_NAME,
+  fallback: DisplayName = say("common.name.viewerDefault") as DisplayName,
 ): DisplayName {
   return readStoredDisplayName() ?? fallback;
 }
 
 export function defaultHostDisplayName(clientId: string): DisplayName {
   const suffix = clientId.slice(-6);
+  const prefix = say("common.name.hostDefault");
   return (
-    normalizeDisplayName(`${DEFAULT_HOST_DISPLAY_NAME_PREFIX}-${suffix}`) ??
-    DEFAULT_HOST_DISPLAY_NAME_PREFIX
+    normalizeDisplayName(suffix ? `${prefix}-${suffix}` : prefix) ??
+    (prefix as DisplayName)
   );
 }
 
 export function saveDisplayName(
   value: string,
-  fallback: DisplayName = DEFAULT_VIEWER_DISPLAY_NAME,
+  fallback: DisplayName = say("common.name.viewerDefault") as DisplayName,
 ): DisplayName | null {
   const normalized = normalizeDisplayName(value);
   const useFallback = value.length === 0 || /^\p{Zs}+$/u.test(value);
diff --git a/src/client/main.tsx b/src/client/main.tsx
index a4358cf..cce2ffe 100644
--- a/src/client/main.tsx
+++ b/src/client/main.tsx
@@ -1,8 +1,11 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { App } from "./App";
+import { initTheme } from "./ui/theme";
 import "./styles.css";
 
+initTheme();
+
 const root = document.getElementById("root");
 if (!root) {
   throw new Error("Application root was not found");
diff --git a/src/client/media/host-sfu-route.ts b/src/client/media/host-sfu-route.ts
index 7d4ecd7..c6fef9b 100644
--- a/src/client/media/host-sfu-route.ts
+++ b/src/client/media/host-sfu-route.ts
@@ -1,3 +1,4 @@
+import { say, type CopyKey } from "../ui/copy";
 import type {
   ClientMessage,
   MediaRoutePhase,
@@ -663,13 +664,13 @@ async function disconnectPublisher(
 }
 
 function sfuFailureWarning(stage: SfuPublisherFailureStage): string {
-  const label: Record<SfuPublisherFailureStage, string> = {
-    connect: "连接",
-    source: "分享源",
-    "video-publish": "视频发布",
-    "sender-config": "视频参数配置",
-    "audio-publish": "音频发布",
-    transport: "传输",
+  const stageKey: Record<SfuPublisherFailureStage, CopyKey> = {
+    connect: "host.warn.sfuStage.connect",
+    source: "host.warn.sfuStage.source",
+    "video-publish": "host.warn.sfuStage.videoPublish",
+    "sender-config": "host.warn.sfuStage.senderConfig",
+    "audio-publish": "host.warn.sfuStage.audioPublish",
+    transport: "host.warn.sfuStage.transport",
   };
-  return `SFU ${label[stage]}失败，已启动自动恢复`;
+  return say("host.warn.sfuRecover", { stage: say(stageKey[stage]) });
 }
diff --git a/src/client/media/quality.ts b/src/client/media/quality.ts
index e8d0346..400c4b9 100644
--- a/src/client/media/quality.ts
+++ b/src/client/media/quality.ts
@@ -6,6 +6,7 @@ import {
   type QualitySettings,
   type ScreenAudioQuality,
 } from "../../shared/protocol";
+import { joinItems, say, type CopyKey } from "../ui/copy";
 import { displayMediaOptions } from "./audio-capture";
 
 export type {
@@ -37,11 +38,11 @@ export const QUALITY_PROFILES = {
   },
 } as const satisfies Record<QualityProfileId, QualitySettings>;
 
-export const QUALITY_PROFILE_LABELS = {
-  "720p30": "720p · 30 帧",
-  "1080p30": "1080p · 30 帧",
-  "1080p60": "1080p · 60 帧",
-} as const satisfies Record<QualityProfileId, string>;
+const QUALITY_PROFILE_KEYS = {
+  "720p30": "host.quality.720p30",
+  "1080p30": "host.quality.1080p30",
+  "1080p60": "host.quality.1080p60",
+} as const satisfies Record<QualityProfileId, CopyKey>;
 
 export const QUALITY_RESOLUTIONS = {
   "480p": { width: 854, height: 480, label: "480p" },
@@ -53,23 +54,11 @@ export const QUALITY_RESOLUTIONS = {
   { width: number; height: number; label: string }
 >;
 
-export const DEGRADATION_PREFERENCE_LABELS = {
-  "maintain-resolution": "清晰",
-  balanced: "均衡",
-  "maintain-framerate": "流畅",
-} as const satisfies Record<DegradationPreference, string>;
-
-export const DEGRADATION_PREFERENCE_HINTS = {
-  "maintain-resolution": "保留细节",
-  balanced: "自动权衡",
-  "maintain-framerate": "优先帧率",
-} as const satisfies Record<DegradationPreference, string>;
-
-export const SCREEN_AUDIO_QUALITY_LABELS = {
-  saver: "普通",
-  music: "音乐",
-  "very-high": "保真",
-} as const satisfies Record<ScreenAudioQuality, string>;
+const DEGRADATION_PREFERENCE_KEYS = {
+  "maintain-resolution": "host.advanced.preference.resolution",
+  balanced: "host.advanced.preference.balanced",
+  "maintain-framerate": "host.advanced.preference.framerate",
+} as const satisfies Record<DegradationPreference, CopyKey>;
 
 export const DEFAULT_SCREEN_AUDIO_QUALITY: ScreenAudioQuality = "music";
 export const SCREEN_AUDIO_BITRATES = {
@@ -176,9 +165,9 @@ export function matchingQualityProfileId(
 export function qualitySettingsLabel(settings: QualitySettings): string {
   const profileId = matchingQualityProfileId(settings);
   if (profileId) {
-    return QUALITY_PROFILE_LABELS[profileId];
+    return say(QUALITY_PROFILE_KEYS[profileId]);
   }
-  return `${QUALITY_RESOLUTIONS[settings.resolution].label} ${settings.maxFramerate} · ${(settings.maxBitrate / 1_000_000).toFixed(1)} Mbps · ${DEGRADATION_PREFERENCE_LABELS[settings.degradationPreference]}`;
+  return `${QUALITY_RESOLUTIONS[settings.resolution].label} ${settings.maxFramerate} · ${(settings.maxBitrate / 1_000_000).toFixed(1)} Mbps · ${say(DEGRADATION_PREFERENCE_KEYS[settings.degradationPreference])}`;
 }
 
 function captureConstraints(profile: QualityProfile): MediaTrackConstraints {
@@ -197,7 +186,7 @@ export async function captureDisplay(
   profile: QualityProfile,
 ): Promise<MediaStream> {
   if (!navigator.mediaDevices?.getDisplayMedia) {
-    throw new Error("当前浏览器不支持屏幕共享");
+    throw new Error(say("host.capture.unavailable"));
   }
 
   const stream = await navigator.mediaDevices.getDisplayMedia(
@@ -207,7 +196,7 @@ export async function captureDisplay(
   const videoTrack = stream.getVideoTracks()[0];
   if (!videoTrack) {
     stream.getTracks().forEach((track) => track.stop());
-    throw new Error("浏览器没有返回可分享的视频轨道");
+    throw new Error(say("host.capture.noSource"));
   }
   videoTrack.contentHint = "motion";
   for (const audioTrack of stream.getAudioTracks()) {
@@ -222,7 +211,7 @@ export async function applyCaptureProfile(
 ): Promise<void> {
   const videoTrack = stream.getVideoTracks()[0];
   if (!videoTrack) {
-    throw new Error("共享流缺少视频轨道");
+    throw new Error(say("host.capture.noSource"));
   }
   await videoTrack.applyConstraints(captureConstraints(profile));
 }
@@ -368,24 +357,26 @@ export function audioSenderParameterWarning(
     return null;
   }
   return readback.appliedMaxBitrate === null
-    ? "浏览器未读回音频码率上限"
-    : `浏览器将音频码率上限改写为 ${Math.round(readback.appliedMaxBitrate / 1_000)} kbps`;
+    ? say("host.warn.audioUnread")
+    : say("host.warn.audioRewritten", { kbps: String(Math.round(readback.appliedMaxBitrate / 1_000)) });
 }
 
-const PARAMETER_LABELS = {
-  maxBitrate: "码率上限",
-  maxFramerate: "帧率上限",
-  scaleResolutionDownBy: "分辨率缩放",
-  degradationPreference: "质量优先级",
-  scalabilityMode: "伸缩模式",
-} as const satisfies Record<keyof VideoSenderParameterValues, string>;
+const PARAMETER_KEYS = {
+  maxBitrate: "host.warn.param.maxBitrate",
+  maxFramerate: "host.warn.param.maxFramerate",
+  scaleResolutionDownBy: "host.warn.param.scaleResolutionDownBy",
+  degradationPreference: "host.warn.param.degradationPreference",
+  scalabilityMode: "host.warn.param.scalabilityMode",
+} as const satisfies Record<keyof VideoSenderParameterValues, CopyKey>;
 
 export function senderParameterWarning(
   readback: VideoSenderParameterReadback,
 ): string | null {
   return readback.mismatches.length > 0
-    ? `浏览器未完整接受${readback.mismatches
-        .map((key) => PARAMETER_LABELS[key])
-        .join("、")}`
+    ? say("host.warn.senderPartial", {
+        params: joinItems(
+          readback.mismatches.map((key) => say(PARAMETER_KEYS[key])),
+        ),
+      })
     : null;
 }
diff --git a/src/client/media/viewer-presentation.ts b/src/client/media/viewer-presentation.ts
index 2969225..8d14cce 100644
--- a/src/client/media/viewer-presentation.ts
+++ b/src/client/media/viewer-presentation.ts
@@ -1,4 +1,5 @@
 import type { ServerMessage } from "../../shared/protocol";
+import type { CopyKey } from "../ui/copy";
 import type { SignalConnectionState } from "../types";
 
 export type ViewerHostState =
@@ -27,6 +28,9 @@ export type ViewerFailureCode =
   | "AUTOPLAY_BLOCKED"
   | "PLAYBACK_FAILED";
 
+export type ViewerMessageKey = Extract<CopyKey, `viewer.msg.${string}`>;
+export type ViewerNoticeKey = Extract<CopyKey, `viewer.notice.${string}`>;
+
 export type ViewerStage =
   | "joining"
   | "room-not-found"
@@ -130,8 +134,8 @@ export type ViewerPresentationAction =
 
 export interface ViewerPresentation {
   stage: ViewerStage;
-  message: string;
-  notice: string | null;
+  messageKey: ViewerMessageKey;
+  noticeKey: ViewerNoticeKey | null;
   overlay: "none" | "status" | "blocking";
   hasCurrentFrame: boolean;
   hasRetainedFrame: boolean;
@@ -439,62 +443,62 @@ export function deriveViewerPresentation(
   const frameOverlay = retainedFrame ? "status" : "blocking";
 
   if (state.access === "checking") {
-    return presentation("joining", "正在加入房间", "blocking", state);
+    return presentation("joining", "viewer.msg.joining", "blocking", state);
   }
   if (state.access === "denied") {
     switch (state.failure) {
       case "ROOM_NOT_FOUND":
         return presentation(
           "room-not-found",
-          "房间不存在或已过期",
+          "viewer.msg.notFound",
           "blocking",
           state,
         );
       case "ROOM_ACCESS_DENIED":
         return presentation(
           "access-denied",
-          "当前无法通过房间号加入",
+          "viewer.msg.denied",
           "blocking",
           state,
         );
       case "INVALID_TOKEN":
         return presentation(
           "invalid-invite",
-          "邀请链接无效或已失效",
+          "viewer.msg.invalidInvite",
           "blocking",
           state,
         );
       case "ROOM_EXPIRED":
-        return presentation("room-expired", "房间已过期", "blocking", state);
+        return presentation("room-expired", "viewer.msg.expired", "blocking", state);
       case "ROOM_CLOSED":
-        return presentation("room-closed", "房间已关闭", "blocking", state);
+        return presentation("room-closed", "viewer.msg.closed", "blocking", state);
       case "ROOM_FULL":
-        return presentation("room-full", "当前无法加入房间", "blocking", state);
+        return presentation("room-full", "viewer.msg.full", "blocking", state);
       case "STALE_CLIENT":
         return presentation(
           "stale-client",
-          "页面版本已更新，请刷新后重试",
+          "viewer.msg.stale",
           "blocking",
           state,
         );
       case "SESSION_REPLACED":
         return presentation(
           "session-replaced",
-          "此页面的会话已被另一个标签页接管",
+          "viewer.msg.sessionReplaced",
           "blocking",
           state,
         );
       case "SIGNAL_TERMINATED":
         return presentation(
           "signal-terminated",
-          "连接已终止，请刷新后重试",
+          "viewer.msg.signalTerminated",
           "blocking",
           state,
         );
       default:
         return presentation(
           "server-error",
-          "暂时无法加入房间",
+          "viewer.msg.joinUnavailable",
           "blocking",
           state,
         );
@@ -504,7 +508,7 @@ export function deriveViewerPresentation(
   if (state.host === "paused") {
     return presentation(
       "host-paused",
-      "分享者已暂停",
+      "viewer.msg.hostPaused",
       currentFrame || retainedFrame ? "status" : "blocking",
       state,
     );
@@ -515,7 +519,7 @@ export function deriveViewerPresentation(
     state.autoplayBlockedGeneration === state.media.generation &&
     state.connection === "connected"
   ) {
-    return presentation("needs-play", "点击播放", "status", state);
+    return presentation("needs-play", "viewer.msg.needsPlay", "status", state);
   }
 
   if (currentFrame) {
@@ -527,16 +531,16 @@ export function deriveViewerPresentation(
     return {
       ...presentation(
         signalRecovering || mediaRecovering ? "recovering" : "playing",
-        signalRecovering || mediaRecovering ? "正在恢复连接" : "正在播放",
+        signalRecovering || mediaRecovering ? "viewer.msg.recovering" : "viewer.msg.playing",
         "none",
         state,
       ),
-      notice: state.host === "offline"
-        ? "分享者连接已中断，画面可能冻结"
+      noticeKey: state.host === "offline"
+        ? "viewer.notice.hostOffline"
         : signalRecovering
-          ? "服务器连接正在恢复，画面仍在播放"
+          ? "viewer.notice.signalRecovering"
         : mediaRecovering
-          ? "媒体连接正在恢复"
+          ? "viewer.notice.mediaRecovering"
           : null,
     };
   }
@@ -544,7 +548,7 @@ export function deriveViewerPresentation(
   if (state.routeStatus?.state === "failed") {
     return presentation(
       "route-failed",
-      "没有可用的媒体线路",
+      "viewer.msg.routeFailed",
       frameOverlay,
       state,
     );
@@ -554,56 +558,56 @@ export function deriveViewerPresentation(
     case "ROUTE_EXHAUSTED":
       return presentation(
         "route-failed",
-        "没有可用的媒体线路",
+        "viewer.msg.routeFailed",
         frameOverlay,
         state,
       );
     case "PLAYBACK_FAILED":
       return presentation(
         "playback-failed",
-        "浏览器无法播放当前画面",
+        "viewer.msg.playbackFailed",
         frameOverlay,
         state,
       );
     case "SERVER_ERROR":
       return presentation(
         "server-error",
-        "连接服务暂时不可用",
+        "viewer.msg.serverError",
         frameOverlay,
         state,
       );
     case "STALE_CLIENT":
       return presentation(
         "stale-client",
-        "页面版本已更新，请刷新后重试",
+        "viewer.msg.stale",
         frameOverlay,
         state,
       );
     case "SESSION_REPLACED":
       return presentation(
         "session-replaced",
-        "此页面的会话已被另一个标签页接管",
+        "viewer.msg.sessionReplaced",
         frameOverlay,
         state,
       );
     case "SIGNAL_TERMINATED":
       return presentation(
         "signal-terminated",
-        "连接已终止，请刷新后重试",
+        "viewer.msg.signalTerminated",
         frameOverlay,
         state,
       );
     case "HOST_OFFLINE":
       return presentation(
         "host-offline",
-        "分享者连接已中断",
+        "viewer.msg.hostOffline",
         frameOverlay,
         state,
       );
     case "HOST_STOPPED":
       return presentation(
         "waiting-host",
-        "等待开始分享",
+        "viewer.msg.waitingHost",
         frameOverlay,
         state,
       );
@@ -612,7 +616,7 @@ export function deriveViewerPresentation(
   if (state.routeStatus?.state === "waiting") {
     return presentation(
       "waiting-sfu",
-      "正在连接备用线路",
+      "viewer.msg.preparingSfu",
       frameOverlay,
       state,
     );
@@ -624,7 +628,7 @@ export function deriveViewerPresentation(
   ) {
     return presentation(
       "recovering",
-      "正在恢复连接",
+      "viewer.msg.recovering",
       frameOverlay,
       state,
     );
@@ -632,7 +636,7 @@ export function deriveViewerPresentation(
   if (state.media) {
     return presentation(
       "receiving",
-      "正在接收画面",
+      "viewer.msg.receiving",
       frameOverlay,
       state,
     );
@@ -640,7 +644,7 @@ export function deriveViewerPresentation(
   if (state.route?.phase === "prepare") {
     return presentation(
       state.route.kind === "sfu" ? "preparing-sfu" : "preparing-p2p",
-      state.route.kind === "sfu" ? "正在连接备用线路" : "正在建立 P2P",
+      state.route.kind === "sfu" ? "viewer.msg.preparingSfu" : "viewer.msg.preparingP2p",
       frameOverlay,
       state,
     );
@@ -648,7 +652,7 @@ export function deriveViewerPresentation(
   if (state.host === "stopped" || state.host === "unknown") {
     return presentation(
       "waiting-host",
-      "等待开始分享",
+      "viewer.msg.waitingHost",
       frameOverlay,
       state,
     );
@@ -656,7 +660,7 @@ export function deriveViewerPresentation(
   if (state.host === "offline") {
     return presentation(
       "host-offline",
-      "分享者连接已中断",
+      "viewer.msg.hostOffline",
       frameOverlay,
       state,
     );
@@ -664,7 +668,7 @@ export function deriveViewerPresentation(
   if (state.route?.kind === "p2p") {
     return presentation(
       "preparing-p2p",
-      "正在建立 P2P",
+      "viewer.msg.preparingP2p",
       frameOverlay,
       state,
     );
@@ -672,14 +676,14 @@ export function deriveViewerPresentation(
   if (state.route?.kind === "sfu") {
     return presentation(
       "preparing-sfu",
-      "正在连接备用线路",
+      "viewer.msg.preparingSfu",
       frameOverlay,
       state,
     );
   }
   return presentation(
     "allocating",
-    "正在分配线路",
+    "viewer.msg.allocating",
     frameOverlay,
     state,
   );
@@ -713,14 +717,14 @@ function hasCurrentFrame(state: ViewerPresentationState): boolean {
 
 function presentation(
   stage: ViewerStage,
-  message: string,
+  messageKey: ViewerMessageKey,
   overlay: ViewerPresentation["overlay"],
   state: ViewerPresentationState,
 ): ViewerPresentation {
   return {
     stage,
-    message,
-    notice: null,
+    messageKey,
+    noticeKey: null,
     overlay,
     hasCurrentFrame: hasCurrentFrame(state),
     hasRetainedFrame: state.retainedFrame,
diff --git a/src/client/pages/HostPage.tsx b/src/client/pages/HostPage.tsx
index c9b2f0c..e52a17f 100644
--- a/src/client/pages/HostPage.tsx
+++ b/src/client/pages/HostPage.tsx
@@ -1,27 +1,14 @@
 import {
-  Check,
-  Copy,
-  Eye,
-  EyeOff,
-  Globe2,
-  KeyRound,
-  Link2Off,
-  LoaderCircle,
-  LockKeyhole,
-  MonitorUp,
-  Network,
-  Pause,
-  Pencil,
-  Play,
-  RefreshCw,
-  Save,
-  Square,
-  Users,
-  X,
-} from "lucide-react";
-import { useEffect, useMemo, useRef, useState } from "react";
+  Fragment,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type CSSProperties,
+  type FormEvent,
+  type ReactNode,
+} from "react";
 import {
-  DEFAULT_HOST_DISPLAY_NAME_PREFIX,
   DEFAULT_QUALITY_SETTINGS,
   DEFAULT_ROUTE_POLICY,
   MAX_VIEWER_PASSWORD_LENGTH,
@@ -34,20 +21,38 @@ import {
   type CodeEntryPolicy,
   type RoutePolicy,
 } from "../../shared/protocol";
-import { AppHeader } from "../components/AppHeader";
-import { ConnectionDetailsToggle } from "../components/ConnectionDetailsToggle";
-import { RoomCode } from "../components/RoomCode";
-import { StageEntryActions } from "../components/StageEntryActions";
 import { qualityLimitationSummary } from "../components/connection-details";
+import { AppHeader, LedStrip, type LedState } from "../components/living/Header";
+import { Couch, type CouchEntry } from "../components/living/Couch";
+import { useMetricsExpanded } from "../components/living/Metrics";
+import { PawnDetail } from "../components/living/PawnDetail";
+import { RoomChip } from "../components/living/RoomChip";
+import { RouteTree } from "../components/living/RouteTree";
+import type { ComicKind } from "../components/living/Comic";
+import { ComicTooltip } from "../components/living/ComicTooltip";
+import type { HintKind } from "../components/living/hints";
 import {
-  MediaRouteBadge,
-  PeerStatusBadge,
-  SignalStatusBadge,
-  WarningBanner,
-} from "../components/StatusBadge";
-import { StatsGrid } from "../components/StatsGrid";
-import { TopologyView } from "../components/TopologyView";
+  StageOverlay,
+  StageTv,
+  StaticNoise,
+  StoryBoard,
+} from "../components/living/Stage";
+import {
+  Btn,
+  Cap,
+  Chip,
+  FieldCap,
+  NameTag,
+  Pill,
+  Row,
+  RowGroup,
+  StatusText,
+  SwitchItem,
+  VisGlyph,
+} from "../components/living/primitives";
 import { hasPeerRouteEvidence } from "../components/status-badge-model";
+import { Glyph, type GlyphName } from "../ui/icons";
+import { say, useCopy, type CopyKey } from "../ui/copy";
 import {
   ApiError,
   createRoom,
@@ -75,6 +80,7 @@ import {
   readPreferredRoomId,
   readViewerGrant,
   replaceViewerInvite,
+  roomRouteForExplicitEntry,
   writeHostRoom,
   writePreferredRoom,
 } from "../lib/session";
@@ -86,21 +92,18 @@ import { labelParticipantSnapshot } from "../lib/viewer-presence";
 import {
   applyCaptureProfile,
   captureDisplay,
-  DEGRADATION_PREFERENCE_HINTS,
-  DEGRADATION_PREFERENCE_LABELS,
   matchingQualityProfileId,
   QUALITY_PROFILES,
-  QUALITY_PROFILE_LABELS,
   QUALITY_RESOLUTIONS,
   qualitySettingsEqual,
   qualitySettingsLabel,
   resolveScreenAudioQuality,
   SCREEN_AUDIO_BITRATES,
-  SCREEN_AUDIO_QUALITY_LABELS,
   setMediaPaused,
   videoQualitySettingsEqual,
   type DegradationPreference,
   type QualityProfileId,
+  type QualityResolution,
   type QualitySettings,
   type ScreenAudioQuality,
 } from "../media/quality";
@@ -125,6 +128,7 @@ import {
   type ViewerQualityEvidencePresentation,
 } from "../media/viewer-quality-evidence";
 import type {
+  ConnectionMetrics,
   PeerSnapshot,
   SignalConnectionState,
 } from "../types";
@@ -152,6 +156,98 @@ import {
 
 type HostPhase = "idle" | "starting" | "live" | "ended" | "error";
 
+type NoticeValue =
+  | { kind: "text"; text: string }
+  | { kind: "key"; key: CopyKey; vars?: Record<string, string> };
+
+const SIGNAL_LED_STATE: Record<SignalConnectionState, LedState> = {
+  connected: "live",
+  connecting: "busy",
+  reconnecting: "warn",
+  offline: "off",
+};
+
+const SIGNAL_LED_LABEL: Record<SignalConnectionState, CopyKey> = {
+  connected: "state.signal.connected",
+  connecting: "state.signal.connecting",
+  reconnecting: "state.signal.reconnecting",
+  offline: "state.signal.offline",
+};
+
+const QUALITY_PROFILE_CAPTIONS: Record<QualityProfileId, CopyKey> = {
+  "720p30": "host.quality.720p30",
+  "1080p30": "host.quality.1080p30",
+  "1080p60": "host.quality.1080p60",
+};
+
+const PREFERENCE_PRESENTATION: Record<
+  DegradationPreference,
+  { icon: GlyphName; cap: CopyKey; hint: CopyKey }
+> = {
+  "maintain-resolution": {
+    icon: "mountain",
+    cap: "host.advanced.preference.resolution",
+    hint: "host.advanced.preference.resolutionHint",
+  },
+  balanced: {
+    icon: "balance",
+    cap: "host.advanced.preference.balanced",
+    hint: "host.advanced.preference.balancedHint",
+  },
+  "maintain-framerate": {
+    icon: "zap",
+    cap: "host.advanced.preference.framerate",
+    hint: "host.advanced.preference.framerateHint",
+  },
+};
+
+const AUDIO_QUALITY_CAPTIONS: Record<ScreenAudioQuality, CopyKey> = {
+  saver: "host.advanced.audio.saver",
+  music: "host.advanced.audio.music",
+  "very-high": "host.advanced.audio.veryHigh",
+};
+
+const PEER_STATE_CAPTIONS: Record<string, CopyKey> = {
+  new: "state.peer.new",
+  connecting: "state.peer.connecting",
+  routing: "state.peer.routing",
+  waiting: "state.peer.waiting",
+  reconnecting: "state.peer.reconnecting",
+  failed: "state.peer.failed",
+  disconnected: "state.peer.disconnected",
+  closed: "state.peer.closed",
+};
+
+// Scanline glyph on each quality tile: denser scanlines (plus a motion wave
+// at 60 fps) read as a higher preset without any text.
+function QualityTileGlyph({ density }: { density: number }) {
+  const lines = [2, 3, 4][density] ?? 3;
+  return (
+    <svg width={28} height={38} viewBox="0 0 28 38" fill="none" aria-hidden="true">
+      <rect x={2} y={3} width={24} height={26} rx={4} stroke="currentColor" strokeWidth={2.2} />
+      {Array.from({ length: lines }, (_, index) => (
+        <path
+          key={index}
+          d={`M6 ${13 + index * 6}h16`}
+          stroke="currentColor"
+          strokeWidth={1.6}
+          strokeLinecap="round"
+          opacity={0.45 + index * 0.2}
+        />
+      ))}
+      {density === 2 ? (
+        <path
+          d="M7 25.5c1.4 0 1.4-2 2.8-2s1.4 2 2.8 2 1.4-2 2.8-2 1.4 2 2.8 2"
+          stroke="currentColor"
+          strokeWidth={1.6}
+          fill="none"
+          strokeLinecap="round"
+        />
+      ) : null}
+    </svg>
+  );
+}
+
 type ViewerQualityEvidence = Extract<
   ServerMessage,
   { type: "viewer-quality-evidence" }
@@ -162,7 +258,10 @@ type HostRouteAssignment = Extract<
 >["assignment"];
 
 interface CaptureDetails {
-  resolution: string;
+  /** null = source reported no usable width/height; mapped to a localized
+   *  "unknown" (or the vis dash) at render time so language switches and vis
+   *  mode never see a baked-in string from capture time. */
+  resolution: string | null;
   frameRate: number | null;
   hasAudio: boolean;
 }
@@ -173,7 +272,7 @@ function captureDetails(stream: MediaStream): CaptureDetails {
     resolution:
       settings?.width && settings.height
         ? `${settings.width}x${settings.height}`
-        : "未知",
+        : null,
     frameRate: settings?.frameRate ?? null,
     hasAudio: stream.getAudioTracks().length > 0,
   };
@@ -242,14 +341,14 @@ function hostRoomFromCreated(room: CreateRoomResponse): HostRoomState {
   };
 }
 
-function hostTerminationMessage(reason: SignalingTerminationReason): string {
+function hostTerminationKey(reason: SignalingTerminationReason): CopyKey {
   switch (reason) {
     case "STALE_CLIENT":
-      return "页面版本已更新，请刷新后重试";
+      return "host.terminated.stale";
     case "SESSION_REPLACED":
-      return "此页面的会话已被另一个标签页接管";
+      return "host.terminated.session";
     case "SIGNAL_TERMINATED":
-      return "服务器连接已终止，请刷新后重试";
+      return "host.terminated.signal";
   }
 }
 
@@ -315,7 +414,28 @@ export function HostPage({ onAuthorizationRequired }: HostPageProps = {}) {
   const [viewerQualityEvidence, setViewerQualityEvidence] = useState<
     Map<string, ViewerQualityEvidencePresentation>
   >(() => new Map());
-  const [notice, setNotice] = useState<string | null>(null);
+  const [noticeValue, setNoticeValue] = useState<NoticeValue | null>(null);
+  const [noticeComic, setNoticeComic] = useState<ComicKind | null>(null);
+  function setNotice(value: string | null, comic: ComicKind | null = null): void {
+    setNoticeValue(value ? { kind: "text", text: value } : null);
+    setNoticeComic(comic);
+  }
+  function setNoticeKey(key: CopyKey, vars?: Record<string, string>): void {
+    setNoticeValue({ kind: "key", key, vars });
+    setNoticeComic(null);
+  }
+  function setNoticeError(error: unknown, action: HostAction): void {
+    setNoticeValue({ kind: "text", text: readableError(error, action) });
+    setNoticeComic(action === "connection" ? "route-failed" : "warning");
+  }
+  function setNoticeErrorKey(
+    key: CopyKey,
+    comic: ComicKind = "warning",
+    vars?: Record<string, string>,
+  ): void {
+    setNoticeValue({ kind: "key", key, vars });
+    setNoticeComic(comic);
+  }
   const [copied, setCopied] = useState(false);
   const [switchingSource, setSwitchingSource] = useState(false);
   const [changingQuality, setChangingQuality] = useState(false);
@@ -324,6 +444,13 @@ export function HostPage({ onAuthorizationRequired }: HostPageProps = {}) {
   const [showConnectionDetails, setShowConnectionDetails] = useState(false);
   const [showTopology, setShowTopology] = useState(false);
   const [joiningRoom, setJoiningRoom] = useState(false);
+  const { vis, t } = useCopy();
+  const [selectedPawn, setSelectedPawn] = useState<string | null>(null);
+  const [joinRoomCode, setJoinRoomCode] = useState("");
+  const [joinRoomError, setJoinRoomError] = useState(false);
+  const [passwordOpen, setPasswordOpen] = useState(false);
+  const [showAdvanced, setShowAdvanced] = useState(false);
+  const [metricsExpanded, setMetricsExpanded] = useMetricsExpanded();
 
   const videoRef = useRef<HTMLVideoElement | null>(null);
   const streamRef = useRef<MediaStream | null>(null);
@@ -594,7 +721,7 @@ export function HostPage({ onAuthorizationRequired }: HostPageProps = {}) {
     ) {
       const warning = route.getQualityWarning();
       if (warning) {
-        setNotice(warning);
+        setNotice(warning, "route-failed");
       }
     }
   }
@@ -697,7 +824,10 @@ export function HostPage({ onAuthorizationRequired }: HostPageProps = {}) {
     setRoomMutation(null);
   }
 
-  function endSharing(message: string, notifyServer = true): void {
+  function endSharing(
+    message: string | { key: CopyKey; vars?: Record<string, string> },
+    notifyServer = true,
+  ): void {
     const generation = activeGenerationRef.current;
     if (generation === null || generationRef.current !== generation) {
       return;
@@ -709,7 +839,11 @@ export function HostPage({ onAuthorizationRequired }: HostPageProps = {}) {
       writePreferredRoom(currentRoom.roomId);
     }
     disposeResources(notifyServer);
-    setNotice(message);
+    if (typeof message === "string") {
+      setNotice(message);
+    } else {
+      setNoticeKey(message.key, message.vars);
+    }
     setPhase("ended");
   }
 
@@ -733,7 +867,7 @@ export function HostPage({ onAuthorizationRequired }: HostPageProps = {}) {
       );
       const replacement = hostRoomFromCreated(response);
       if (wasSharing) {
-        endSharing("房间号已更换", false);
+        endSharing({ key: "host.roomReplaced" }, false);
       }
       replaceViewerInvite(activeRoom.roomId, null);
       writeHostRoom(replacement);
@@ -744,15 +878,17 @@ export function HostPage({ onAuthorizationRequired }: HostPageProps = {}) {
       setViewerPasswordEnabled(profile.roomPassword !== null);
       setViewerPasswordDraft(profile.roomPassword ?? "");
       setViewerPasswordVisible(false);
-      setNotice(null);
+      if (!wasSharing) {
+        setNoticeKey("host.roomReplaced");
+      }
       setPhase(wasSharing ? "ended" : "idle");
     } catch (error) {
       if (error instanceof ApiError && error.status === 404) {
         if (forgetRoom(activeRoom)) {
-          endSharing("房间已失效，再次点击将创建新房", false);
+          endSharing({ key: "host.roomInvalid" }, false);
         }
       }
-      setNotice(readableError(error, "room"));
+      setNoticeError(error, "room");
     } finally {
       finishRoomMutation(mutation);
     }
@@ -863,7 +999,7 @@ export function HostPage({ onAuthorizationRequired }: HostPageProps = {}) {
           isCurrentGeneration(generation) &&
           streamRef.current === captured
         ) {
-          endSharing("已停止分享");
+          endSharing({ key: "host.stopNotice" });
         }
       },
       { once: true },
@@ -1012,15 +1148,17 @@ export function HostPage({ onAuthorizationRequired }: HostPageProps = {}) {
             : null;
         const connectionWarning =
           failed > 0 || !sfuUpdated
-            ? "分享设置已更新，但部分观看连接未能应用新参数"
+            ? say("host.notice.partialApply")
             : null;
         const warning = sfuWarning ?? connectionWarning;
         const successNotice =
           audioChanged && !videoChanged
-            ? `音频质量已切换为 ${SCREEN_AUDIO_QUALITY_LABELS[resolveScreenAudioQuality(nextProfile.screenAudioQuality)]}`
+            ? say("host.notice.audioSet", { label: say(AUDIO_QUALITY_CAPTIONS[resolveScreenAudioQuality(nextProfile.screenAudioQuality)]) })
             : videoChanged && audioChanged
-              ? "分享设置已应用"
-              : `画质已切换为 ${qualitySettingsLabel(nextProfile)}`;
+              ? say("host.notice.qualityApplied")
+              : say("host.notice.qualitySet", {
+                  label: qualitySettingsLabel(nextProfile),
+                });
         setNotice(warning || successNotice);
       }
     } catch (error) {
@@ -1032,7 +1170,7 @@ export function HostPage({ onAuthorizationRequired }: HostPageProps = {}) {
           advancedQualityRef.current = qualitySettingsRef.current;
           setAdvancedQuality(qualitySettingsRef.current);
         }
-        setNotice(readableError(error, "quality"));
+        setNoticeError(error, "quality");
       }
     } finally {
       if (qualityChangeRef.current === token) {
@@ -1059,7 +1197,7 @@ export function HostPage({ onAuthorizationRequired }: HostPageProps = {}) {
     }
     if (sharingPausedRef.current) {
       if (!setMediaPaused(activeStream, false)) {
-        setNotice("当前分享没有可恢复的媒体轨道");
+        setNoticeKey("host.pause.noTracksResume");
         return;
       }
       hostSfuRouteRef.current?.setPaused(false);
@@ -1067,27 +1205,27 @@ export function HostPage({ onAuthorizationRequired }: HostPageProps = {}) {
         setMediaPaused(activeStream, true);
         hostSfuRouteRef.current?.setPaused(true);
         signalRef.current?.confirmSharingPaused();
-        setNotice("服务器连接正在恢复，分享仍保持暂停");
+        setNoticeKey("host.pause.signalRecovering");
         return;
       }
       sharingPausedRef.current = false;
       setSharingPaused(false);
-      setNotice("音视频分享已恢复");
+      setNoticeKey("host.resumeNotice");
       return;
     }
     if (!setMediaPaused(activeStream, true)) {
-      setNotice("当前分享没有可暂停的媒体轨道");
+      setNoticeKey("host.pause.noTracksPause");
       return;
     }
     sharingPausedRef.current = true;
     setSharingPaused(true);
     hostSfuRouteRef.current?.setPaused(true);
     discardPreparedHostChild();
-    setNotice(
-      signalRef.current?.setSharingPaused(true) === true
-        ? "音视频分享已暂停"
-        : "服务器连接正在恢复，分享保持暂停",
-    );
+    if (signalRef.current?.setSharingPaused(true) === true) {
+      setNoticeKey("host.pauseNotice");
+    } else {
+      setNoticeKey("host.pause.signalRecovering");
+    }
   }
 
   function removePeer(peerId: string): void {
@@ -1301,7 +1439,7 @@ export function HostPage({ onAuthorizationRequired }: HostPageProps = {}) {
               isCurrentGeneration(generation) &&
               hostChildIsAssigned(peerId)
             ) {
-              setNotice(readableError(error, "connection"));
+              setNoticeError(error, "connection");
             }
           },
         );
@@ -1364,7 +1502,7 @@ export function HostPage({ onAuthorizationRequired }: HostPageProps = {}) {
       (peerId) => {
         void startPeer(peerId, generation).catch((error: unknown) => {
           if (isCurrentGeneration(generation)) {
-            setNotice(readableError(error, "connection"));
+            setNoticeError(error, "connection");
           }
         });
       },
@@ -1490,7 +1628,7 @@ export function HostPage({ onAuthorizationRequired }: HostPageProps = {}) {
       sharingPausedRef.current = true;
       setSharingPaused(true);
       signalRef.current?.confirmSharingPaused();
-      setNotice("分享仍保持暂停");
+      setNoticeKey("host.pause.stillPaused");
       return;
     }
     if (message.type === "route-update") {
@@ -1588,7 +1726,7 @@ export function HostPage({ onAuthorizationRequired }: HostPageProps = {}) {
         generation,
       ).catch((error: unknown) => {
         if (isCurrentGeneration(generation)) {
-          setNotice(readableError(error, "connection"));
+          setNoticeError(error, "connection");
         }
       });
       return;
@@ -1598,7 +1736,7 @@ export function HostPage({ onAuthorizationRequired }: HostPageProps = {}) {
         return;
       }
       endSharing(
-        message.reason === "expired" ? "房间已过期" : "房间已关闭",
+        message.reason === "expired" ? say("host.roomExpired") : say("host.roomClosed"),
         false,
       );
       return;
@@ -1608,7 +1746,7 @@ export function HostPage({ onAuthorizationRequired }: HostPageProps = {}) {
         if (!forgetRoom(activeRoom)) {
           return;
         }
-        endSharing("房间已失效，再次点击将创建新房", false);
+        endSharing({ key: "host.roomInvalid" }, false);
         return;
       }
       if (message.code === "AUTH_REQUIRED") {
@@ -1618,7 +1756,7 @@ export function HostPage({ onAuthorizationRequired }: HostPageProps = {}) {
         endSharing(hostServerErrorNotice(message.code), false);
         return;
       }
-      setNotice(hostServerErrorNotice(message.code));
+      setNotice(hostServerErrorNotice(message.code), "warning");
     }
   }
 
@@ -1655,7 +1793,7 @@ export function HostPage({ onAuthorizationRequired }: HostPageProps = {}) {
       }
       activeGenerationRef.current = null;
       shareGenerationRef.current = null;
-      setNotice(readableError(error, "capture"));
+      setNoticeError(error, "capture");
       setPhase("error");
       return;
     }
@@ -1741,7 +1879,7 @@ export function HostPage({ onAuthorizationRequired }: HostPageProps = {}) {
                 isCurrentShare(generation, shareGeneration) &&
                 signalRef.current === signal
               ) {
-                endSharing(hostTerminationMessage(reason), false);
+                endSharing({ key: hostTerminationKey(reason) }, false);
               }
             },
             onAccessRequired: () => {
@@ -1749,7 +1887,7 @@ export function HostPage({ onAuthorizationRequired }: HostPageProps = {}) {
                 isCurrentShare(generation, shareGeneration) &&
                 signalRef.current === signal
               ) {
-                endSharing("站点访问已失效，请重新验证", false);
+                endSharing({ key: "gate.expired" }, false);
                 onAuthorizationRequired?.();
               }
             },
@@ -1839,7 +1977,7 @@ export function HostPage({ onAuthorizationRequired }: HostPageProps = {}) {
             onAuthorizationRequired();
             return;
           }
-          setNotice(readableError(error, "room"));
+          setNoticeError(error, "room");
           setPhase("error");
         }
       };
@@ -1864,7 +2002,7 @@ export function HostPage({ onAuthorizationRequired }: HostPageProps = {}) {
         onAuthorizationRequired();
         return;
       }
-      setNotice(readableError(error, "room"));
+      setNoticeError(error, "room");
       setPhase("error");
     }
     } finally {
@@ -1898,7 +2036,7 @@ export function HostPage({ onAuthorizationRequired }: HostPageProps = {}) {
         isCurrentGeneration(generation) &&
         sourceSwitchRef.current === token
       ) {
-        setNotice(readableError(error, "source"));
+        setNoticeError(error, "source");
       }
       finishSourceSwitch(token);
       return;
@@ -1915,7 +2053,7 @@ export function HostPage({ onAuthorizationRequired }: HostPageProps = {}) {
     const previousStream = streamRef.current;
     if (!previousStream) {
       captured.getTracks().forEach((track) => track.stop());
-      setNotice("当前分享已经结束");
+      setNoticeKey("host.shareEnded");
       finishSourceSwitch(token);
       return;
     }
@@ -2000,7 +2138,7 @@ export function HostPage({ onAuthorizationRequired }: HostPageProps = {}) {
               isCurrentGeneration(generation) &&
               sourceSwitchRef.current === token
             ) {
-              setNotice(readableError(error, "connection"));
+              setNoticeError(error, "connection");
             }
           }
         }),
@@ -2016,6 +2154,9 @@ export function HostPage({ onAuthorizationRequired }: HostPageProps = {}) {
             sfuReplaced,
             sfuWarning,
           }),
+          sfuWarning || !sfuReplaced || failedPeerIds.length > 0
+            ? "warning"
+            : null,
         );
       }
     } finally {
@@ -2039,7 +2180,7 @@ export function HostPage({ onAuthorizationRequired }: HostPageProps = {}) {
         setCopied(false);
       }, 1_500);
     } catch {
-      setNotice("无法复制邀请链接，请稍后重试");
+      setNoticeKey("host.invite.copyFailed");
     }
   }
 
@@ -2056,11 +2197,11 @@ export function HostPage({ onAuthorizationRequired }: HostPageProps = {}) {
     if (!isCurrentRoomAuthority(activeRoom) && roomRef.current !== null) {
       return;
     }
-    setNotice(
-      error instanceof ApiError
-        ? error.message
-        : "当前无法更新房间设置，请稍后重试",
-    );
+    if (error instanceof ApiError) {
+      setNotice(error.message, "warning");
+    } else {
+      setNoticeErrorKey("host.accessFailed", "warning");
+    }
   }
 
   async function changeCodeEntryPolicy(policy: CodeEntryPolicy): Promise<void> {
@@ -2103,12 +2244,12 @@ export function HostPage({ onAuthorizationRequired }: HostPageProps = {}) {
       };
       roomRef.current = updatedRoom;
       setRoom(updatedRoom);
-      setNotice(
+      setNoticeKey(
         response.codeEntryPolicy === "open"
-          ? "房间已设为公开"
+          ? "host.policy.setOpen"
           : response.viewerPasswordEnabled
-            ? "房间已设为私密，可凭邀请或密码加入"
-            : "房间已设为私密，仅限邀请加入",
+            ? "host.policy.setPrivatePassword"
+            : "host.policy.setPrivateInvite",
       );
     } catch (error) {
       handleRoomAccessFailure(error, activeRoom);
@@ -2150,10 +2291,8 @@ export function HostPage({ onAuthorizationRequired }: HostPageProps = {}) {
       };
       roomRef.current = updatedRoom;
       setRoom(updatedRoom);
-      setNotice(
-        response.inviteUrl
-          ? "邀请链接已更新"
-          : "邀请链接已撤销",
+      setNoticeKey(
+        response.inviteUrl ? "host.invite.updated" : "host.invite.revoked",
       );
     } catch (error) {
       handleRoomAccessFailure(error, activeRoom);
@@ -2167,9 +2306,9 @@ export function HostPage({ onAuthorizationRequired }: HostPageProps = {}) {
       password !== null &&
       !viewerPasswordSchema.safeParse(password).success
     ) {
-      setNotice(
-        `房间密码只需 1-${MAX_VIEWER_PASSWORD_LENGTH} 个可见字符`,
-      );
+      setNoticeKey("host.password.rule", {
+        max: String(MAX_VIEWER_PASSWORD_LENGTH),
+      });
       return;
     }
     const activeRoom = roomRef.current;
@@ -2205,12 +2344,12 @@ export function HostPage({ onAuthorizationRequired }: HostPageProps = {}) {
       setViewerPasswordEnabled(response.enabled);
       setViewerPasswordDraft(password ?? "");
       setViewerPasswordVisible(false);
-      setNotice(
+      setNoticeKey(
         password === null
-          ? "房间密码已移除，仅限邀请加入"
+          ? "host.password.removed"
           : hadPassword
-            ? "房间密码已更新"
-            : "房间密码已设置",
+            ? "host.password.updated"
+            : "host.password.saved",
       );
     } catch (error) {
       handleRoomAccessFailure(error, activeRoom);
@@ -2222,10 +2361,10 @@ export function HostPage({ onAuthorizationRequired }: HostPageProps = {}) {
   function commitDisplayName(): void {
     const hostFallback = hostClientIdRef.current
       ? defaultHostDisplayName(hostClientIdRef.current)
-      : DEFAULT_HOST_DISPLAY_NAME_PREFIX;
+      : defaultHostDisplayName("");
     const saved = saveDisplayName(displayNameDraft, hostFallback);
     if (!saved) {
-      setDisplayNameError("名称格式无效或超过 24 个字符");
+      setDisplayNameError(say("host.nameError"));
       return;
     }
     displayNameRef.current = saved;
@@ -2234,622 +2373,699 @@ export function HostPage({ onAuthorizationRequired }: HostPageProps = {}) {
     setDisplayNameError(null);
     setEditingDisplayName(false);
     if (!signalRef.current?.setDisplayName(saved)) {
-      setNotice("开始分享并连接后才能修改昵称");
+      setNoticeKey("host.nameOffline");
     }
   }
 
+  function joinRoomFromStage(event: FormEvent<HTMLFormElement>): void {
+    event.preventDefault();
+    const route = roomRouteForExplicitEntry(joinRoomCode);
+    if (!route) {
+      setJoinRoomError(true);
+      return;
+    }
+    window.location.assign(route);
+  }
+
   const activeCodeEntryPolicy =
     room?.codeEntryPolicy ?? creationProfile.codeEntryPolicy;
+  const hostPeerId = hostPresence?.peerId ?? hostPeerIdRef.current;
+
+  const couchEntries: CouchEntry[] = viewers.map((viewer) => {
+    const snapshot =
+      viewer.upstream.kind === "peer" && viewer.upstream.peerId === hostPeerId
+        ? peerSnapshots.get(viewer.peerId)
+        : undefined;
+    const qualityPresentation = viewerQualityEvidence.get(viewer.peerId);
+    const qualityEvidence = qualityPresentation?.evidence;
+    const hasCurrentQualityEvidence =
+      qualityEvidence !== undefined &&
+      qualityEvidenceUpstreamMatches(qualityEvidence, viewer.upstream) &&
+      qualityPresentation?.fresh === true;
+    const hasCommittedMedia = viewer.mediaReady === true;
+    const connected =
+      snapshot?.connectionState === "connected" ||
+      hasCurrentQualityEvidence ||
+      hasCommittedMedia;
+    const viewerState = connected
+      ? "connected"
+      : (snapshot?.connectionState ??
+        (viewer.upstream.kind === "none" ? "routing" : "connecting"));
+    return {
+      key: viewer.peerId,
+      name: viewer.label,
+      connected,
+      statusLabel: t(
+        PEER_STATE_CAPTIONS[viewerState] ?? "state.peer.connecting",
+      ),
+    };
+  });
+
+  const selectedViewer = selectedPawn
+    ? (viewers.find((viewer) => viewer.peerId === selectedPawn) ?? null)
+    : null;
+  let selectedDetail: {
+    route: "p2p" | "sfu" | null;
+    metrics: ConnectionMetrics | null;
+    direction: "send" | "receive";
+    tag?: { icon: "loader"; label: string };
+    error: string | null;
+  } | null = null;
+  if (selectedViewer) {
+    const snapshot =
+      selectedViewer.upstream.kind === "peer" &&
+      selectedViewer.upstream.peerId === hostPeerId
+        ? peerSnapshots.get(selectedViewer.peerId)
+        : undefined;
+    const qualityPresentation = viewerQualityEvidence.get(
+      selectedViewer.peerId,
+    );
+    const qualityEvidence = qualityPresentation?.evidence;
+    const hasMatchingQualityEvidence =
+      qualityEvidence !== undefined &&
+      qualityEvidenceUpstreamMatches(qualityEvidence, selectedViewer.upstream);
+    const hasCurrentQualityEvidence =
+      hasMatchingQualityEvidence && qualityPresentation?.fresh === true;
+    const hasCommittedMedia = selectedViewer.mediaReady === true;
+    const hasCurrentRouteEvidence =
+      hasPeerRouteEvidence(snapshot) ||
+      hasCurrentQualityEvidence ||
+      hasCommittedMedia;
+    const connected =
+      snapshot?.connectionState === "connected" ||
+      hasCurrentQualityEvidence ||
+      hasCommittedMedia;
+    const viewerState = connected
+      ? "connected"
+      : (snapshot?.connectionState ?? "routing");
+    const detailMetrics = hasMatchingQualityEvidence
+      ? metricsFromQualityEvidence(qualityEvidence)
+      : snapshot && hasPeerRouteEvidence(snapshot)
+        ? snapshot.metrics
+        : null;
+    selectedDetail = {
+      route:
+        hasCurrentRouteEvidence && selectedViewer.upstream.kind !== "none"
+          ? selectedViewer.upstream.kind === "peer"
+            ? "p2p"
+            : "sfu"
+          : null,
+      metrics: detailMetrics,
+      direction: hasMatchingQualityEvidence ? "receive" : "send",
+      tag: connected
+        ? undefined
+        : {
+            icon: "loader",
+            label: t(
+              PEER_STATE_CAPTIONS[viewerState] ?? "state.peer.connecting",
+            ),
+          },
+      error: snapshot?.error ?? null,
+    };
+  }
+
+  const noticeText = noticeValue
+    ? noticeValue.kind === "text"
+      ? noticeValue.text
+      : t(noticeValue.key, noticeValue.vars)
+    : null;
+
+  const phaseLine =
+    phase === "live"
+      ? t("host.onlineCount", {
+          n: String(viewers.length),
+          max: String(maxViewers ?? "-"),
+        })
+      : phase === "starting"
+        ? `${t("host.starting")}…`
+        : phase === "ended" && room
+          ? t("host.ended")
+          : room
+            ? t("host.roomReady")
+            : t("host.notStarted");
+
+  // Vis mode swaps native title tooltips for 2-panel hint comics; text modes
+  // render the trigger unchanged, so markup structure stays identical.
+  // wrapStyle adds a layout span around the tooltip wrapper (vis mode only)
+  // for triggers whose flex context would otherwise stretch the wrapper away
+  // from the trigger it must hug, or collapse a control's text-mode geometry.
+  const hintWrap = (
+    kind: HintKind,
+    node: ReactNode,
+    align: "start" | "center" | "end" = "center",
+    wrapStyle?: CSSProperties,
+  ): ReactNode =>
+    vis ? (
+      wrapStyle ? (
+        <span style={wrapStyle}>
+          <ComicTooltip kind={kind} align={align}>
+            {node}
+          </ComicTooltip>
+        </span>
+      ) : (
+        <ComicTooltip kind={kind} align={align}>
+          {node}
+        </ComicTooltip>
+      )
+    ) : (
+      node
+    );
+
   return (
-    <div className="app-shell">
+    <div className="lr-app">
       <AppHeader
-        status={
-          showConnectionDetails ? (
-            <SignalStatusBadge state={signalStatus} />
-          ) : null
+        led={
+          <LedStrip
+            state={SIGNAL_LED_STATE[signalStatus]}
+            label={t(SIGNAL_LED_LABEL[signalStatus])}
+          />
         }
       />
 
-      <main className="host-workspace">
-        <section className="broadcast-area" aria-labelledby="broadcast-heading">
-          <div className="section-heading">
-            <div>
-              <div className="title-line">
-                <h1 id="broadcast-heading">
-                  {hostPresence?.displayName ?? displayName} 的屏幕
-                </h1>
-                {room && (
-                  <RoomCode
-                    roomId={room.roomId}
-                    onReplace={replaceCurrentRoom}
-                    replaceDisabled={phase === "starting" || roomMutating}
-                  />
-                )}
-              </div>
-              <p className="section-meta">
-                {phase === "live"
-                  ? `${viewers.length}/${maxViewers ?? "-"} 人在线`
-                  : phase === "starting"
-                    ? "正在连接"
-                    : phase === "ended" && room
-                      ? "已停止分享"
-                      : room
-                        ? "房间已就绪"
-                        : "尚未开始"}
-              </p>
-            </div>
-            {(phase === "live" || phase === "starting") && (
-              <div className="broadcast-actions">
-                {phase === "live" && (
-                  <button
-                    className="button button-secondary"
-                    type="button"
-                    disabled={
-                      switchingSource ||
-                      changingQuality
-                    }
-                    onClick={toggleSharingPause}
-                  >
-                    {sharingPaused ? (
-                      <Play size={16} fill="currentColor" aria-hidden="true" />
-                    ) : (
-                      <Pause size={16} fill="currentColor" aria-hidden="true" />
-                    )}
-                    {sharingPaused ? "恢复分享" : "暂停分享"}
-                  </button>
-                )}
-                {phase === "live" && (
-                  <button
-                    className="button button-secondary"
-                    type="button"
-                    disabled={
-                      switchingSource ||
-                      changingQuality
-                    }
-                    onClick={() => void switchSource()}
-                  >
-                    <RefreshCw size={16} aria-hidden="true" />
-                    {switchingSource ? "正在选择" : "切换来源"}
-                  </button>
-                )}
-                <button
-                  className="button button-danger"
-                  type="button"
-                  onClick={() =>
-                    endSharing(
-                      phase === "starting"
-                        ? "启动已取消"
-                        : "已停止分享",
-                    )
-                  }
-                >
-                  <Square size={16} fill="currentColor" aria-hidden="true" />
-                  {phase === "starting" ? "取消" : "停止分享"}
-                </button>
-              </div>
-            )}
-          </div>
-
-          <form
-            className={`viewer-name-control host-name-control${
-              editingDisplayName ? " is-editing" : ""
-            }`}
-            onSubmit={(event) => {
-              event.preventDefault();
-              commitDisplayName();
-            }}
-          >
-            <label
-              htmlFor={editingDisplayName ? "host-display-name" : undefined}
-            >
-              昵称
-            </label>
-            {editingDisplayName ? (
-              <>
-                <input
-                  id="host-display-name"
-                  type="text"
-                  value={displayNameDraft}
-                  maxLength={96}
-                  autoComplete="nickname"
-                  autoFocus
-                  aria-invalid={displayNameError ? "true" : undefined}
-                  onChange={(event) => {
-                    setDisplayNameDraft(event.target.value);
-                    setDisplayNameError(null);
-                  }}
-                />
-                <button
-                  type="submit"
-                  className="icon-button"
-                  title="保存昵称"
-                  aria-label="保存昵称"
-                  disabled={displayNameDraft === displayName}
-                >
-                  <Save size={17} />
-                </button>
-                <button
-                  type="button"
-                  className="icon-button"
-                  title="取消编辑"
-                  aria-label="取消编辑昵称"
-                  onClick={() => {
-                    setDisplayNameDraft(displayName);
-                    setDisplayNameError(null);
-                    setEditingDisplayName(false);
-                  }}
-                >
-                  <X size={17} />
-                </button>
-              </>
-            ) : (
-              <>
-                <span className="viewer-name-value">{displayName}</span>
-                <button
-                  type="button"
-                  className="icon-button"
-                  title="编辑昵称"
-                  aria-label="编辑昵称"
-                  onClick={() => {
-                    setDisplayNameDraft(displayName);
-                    setDisplayNameError(null);
-                    setEditingDisplayName(true);
-                  }}
-                >
-                  <Pencil size={17} />
-                </button>
-              </>
-            )}
-            {displayNameError && (
-              <span className="viewer-name-error" role="alert">
-                {displayNameError}
-              </span>
-            )}
-          </form>
-
-          <div
-            className="video-stage local-stage"
-            role="group"
-            aria-label="分享或加入房间"
+      <main className="lr-room">
+        <h1 className="visually-hidden">
+          {t("host.title", { name: hostPresence?.displayName ?? displayName })}
+        </h1>
+        <div className="lr-scene">
+          <StageTv
+            chin={
+              phase === "live"
+                ? sharingPaused
+                  ? "warn"
+                  : "on"
+                : phase === "starting"
+                  ? "busy"
+                  : "off"
+            }
+            live={phase === "live"}
+            hasEntry={
+              phase === "idle" || phase === "ended" || phase === "error"
+            }
+            label={t("host.stageAria")}
           >
             {stream ? (
               <video ref={videoRef} autoPlay muted playsInline />
-            ) : phase === "idle" ||
-              phase === "ended" ||
-              phase === "error" ? (
-              <div className="stage-placeholder stage-entry">
-                {phase === "ended" && room && (
-                  <span className="stage-status">已停止分享</span>
+            ) : null}
+            {!stream &&
+            (phase === "idle" || phase === "ended" || phase === "error") ? (
+              <div className="lr-tv-overlay">
+                {vis ? null : (
+                  <div className="lr-entry-text">
+                    <h1>{t("host.idle.heading")}</h1>
+                    <p>{t("host.idle.hint")}</p>
+                  </div>
                 )}
-                <StageEntryActions
-                  joiningRoom={joiningRoom}
-                  startSharingDisabled={roomMutating}
-                  onStartSharing={() => {
-                    setJoiningRoom(false);
-                    void startSharing();
-                  }}
-                  onJoinToggle={() =>
-                    setJoiningRoom((current) => !current)
-                  }
-                />
-              </div>
-            ) : (
-              <div className="stage-placeholder">
-                <MonitorUp size={36} strokeWidth={1.5} aria-hidden="true" />
-              </div>
-            )}
-            {(phase === "starting" ||
-              switchingSource ||
-              sharingPaused ||
-              (stream !== null && localPreviewPaused)) && (
-              <div className="stage-overlay" role="status">
-                {switchingSource ? (
-                  <RefreshCw
-                    size={36}
-                    strokeWidth={1.5}
-                    className="spin"
-                    aria-hidden="true"
-                  />
-                ) : sharingPaused ? (
-                  <Pause size={36} strokeWidth={1.5} aria-hidden="true" />
-                ) : phase === "starting" ? (
-                  <LoaderCircle
-                    size={36}
-                    strokeWidth={1.5}
-                    className="spin"
-                    aria-hidden="true"
-                  />
-                ) : (
-                  <EyeOff size={36} strokeWidth={1.5} aria-hidden="true" />
-                )}
-                <span>
-                  {switchingSource
-                    ? "正在切换来源"
-                    : sharingPaused
-                      ? "音视频分享已暂停"
-                      : phase === "starting"
-                        ? "正在连接"
-                        : "本地预览已暂停，分享仍在继续"}
-                </span>
-              </div>
-            )}
-          </div>
-
-          {showConnectionDetails && details && stream && (
-            <div className="capture-strip" aria-label="实际捕获参数">
-              <span>{details.resolution}</span>
-              <span>{details.frameRate ? `${details.frameRate.toFixed(0)} fps` : "帧率未知"}</span>
-              <span>{resolvedVideoCodec?.toUpperCase() ?? "编码待定"}</span>
-              <span>{details.hasAudio ? "含音频" : "无音频"}</span>
-            </div>
-          )}
-
-          {!details?.hasAudio && stream && (
-            <WarningBanner>当前来源没有可共享音频</WarningBanner>
-          )}
-          {qualityLimitation && (
-            <WarningBanner>{qualityLimitation}</WarningBanner>
-          )}
-          {notice && (
-            <div className="notice" role="status" aria-live="polite">
-              {notice}
-            </div>
-          )}
-
-          <ConnectionDetailsToggle
-            checked={showConnectionDetails}
-            onChange={setShowConnectionDetails}
-          />
-
-          <div className="setup-controls">
-            <div className="quality-controls">
-              <fieldset className="control-group">
-                <legend>视频预设</legend>
-                <div className="segmented-control">
-                  {(Object.keys(QUALITY_PROFILES) as QualityProfileId[]).map(
-                    (id) => (
+                {phase === "ended" && room && !vis ? (
+                  <span className="lr-tv-msg">{t("host.ended")}</span>
+                ) : null}
+                <div className="lr-entry-actions">
+                  <span className="lr-entry-action">
+                    {hintWrap(
+                      "hint-share-start",
                       <button
-                        key={id}
                         type="button"
-                        className={
-                          selectedQualityProfileId === id
-                            ? "is-selected"
-                            : undefined
-                        }
-                        aria-pressed={selectedQualityProfileId === id}
-                        title={`${QUALITY_PROFILE_LABELS[id]} · ${(QUALITY_PROFILES[id].maxBitrate / 1_000_000).toFixed(0)} Mbps`}
-                        disabled={
-                          phase === "starting" ||
-                          switchingSource
-                        }
-                        onClick={() =>
-                          void changeQuality({
-                            ...QUALITY_PROFILES[id],
-                            screenAudioQuality: resolveScreenAudioQuality(
-                              advancedQualityRef.current.screenAudioQuality,
-                            ),
-                          })
-                        }
+                        className="lr-tv-big is-action is-ripple"
+                        title={vis ? undefined : t("host.start")}
+                        aria-label={t("host.start")}
+                        disabled={roomMutating}
+                        onClick={() => {
+                          setJoiningRoom(false);
+                          void startSharing();
+                        }}
                       >
-                        {QUALITY_PROFILE_LABELS[id]}
-                      </button>
-                    ),
-                  )}
-                </div>
-              </fieldset>
-
-              <details className="advanced-quality">
-                <summary>高级设置</summary>
-                <div className="advanced-quality-grid">
-                  <label>
-                    <span>分辨率上限</span>
-                    <select
-                      value={advancedQuality.resolution}
-                      disabled={phase === "starting" || switchingSource}
-                      onChange={(event) =>
-                        changeAdvancedQuality({
-                          resolution: event.target
-                            .value as QualitySettings["resolution"],
-                        })
-                      }
-                    >
-                      {Object.entries(QUALITY_RESOLUTIONS).map(
-                        ([resolution, option]) => (
-                          <option key={resolution} value={resolution}>
-                            {option.label}
-                          </option>
-                        ),
-                      )}
-                    </select>
-                  </label>
-                  <label>
-                    <span>帧率上限</span>
-                    <div className="range-control">
-                      <input
-                        type="range"
-                        min="15"
-                        max="60"
-                        step="5"
-                        value={advancedQuality.maxFramerate}
-                        disabled={phase === "starting" || switchingSource}
-                        onChange={(event) =>
-                          changeAdvancedQuality({
-                            maxFramerate: Number(event.target.value),
-                          })
-                        }
-                      />
-                      <output>{advancedQuality.maxFramerate} fps</output>
-                    </div>
-                  </label>
-                  <label>
-                    <span>视频码率上限</span>
-                    <div className="range-control">
-                      <input
-                        type="range"
-                        min="2000000"
-                        max="12000000"
-                        step="500000"
-                        value={advancedQuality.maxBitrate}
-                        disabled={phase === "starting" || switchingSource}
-                        onChange={(event) =>
-                          changeAdvancedQuality({
-                            maxBitrate: Number(event.target.value),
-                          })
-                        }
-                      />
-                      <output>
-                        {(advancedQuality.maxBitrate / 1_000_000).toFixed(1)} Mbps
-                      </output>
-                    </div>
-                  </label>
-                  <fieldset className="control-group quality-priority">
-                    <legend>画面偏好</legend>
-                    <div className="segmented-control">
-                      {(
-                        Object.keys(
-                          DEGRADATION_PREFERENCE_LABELS,
-                        ) as DegradationPreference[]
-                      ).map((preference) => (
-                        <button
-                          key={preference}
-                          type="button"
-                          className={
-                            advancedQuality.degradationPreference === preference
-                              ? "is-selected"
-                              : undefined
-                          }
-                          aria-pressed={
-                            advancedQuality.degradationPreference === preference
-                          }
-                          disabled={phase !== "live" || switchingSource}
-                          onClick={() =>
-                            changeAdvancedQuality({
-                              degradationPreference: preference,
-                            })
-                          }
-                        >
-                          <span>
-                            {DEGRADATION_PREFERENCE_LABELS[preference]}
-                          </span>
-                          <small>
-                            {DEGRADATION_PREFERENCE_HINTS[preference]}
-                          </small>
-                        </button>
-                      ))}
-                    </div>
-                  </fieldset>
-                  <fieldset className="control-group quality-priority">
-                    <legend>音频质量</legend>
-                    <div className="segmented-control">
-                      {(
-                        Object.keys(
-                          SCREEN_AUDIO_QUALITY_LABELS,
-                        ) as ScreenAudioQuality[]
-                      ).map((audioQuality) => (
-                        <button
-                          key={audioQuality}
-                          type="button"
-                          className={
-                            resolveScreenAudioQuality(
-                              advancedQuality.screenAudioQuality,
-                            ) === audioQuality
-                              ? "is-selected"
-                              : undefined
-                          }
-                          aria-pressed={
-                            resolveScreenAudioQuality(
-                              advancedQuality.screenAudioQuality,
-                            ) === audioQuality
-                          }
-                          title={`${SCREEN_AUDIO_QUALITY_LABELS[audioQuality]} · ${SCREEN_AUDIO_BITRATES[audioQuality] / 1_000} kbps 上限`}
-                          disabled={
-                            phase === "starting" ||
-                            switchingSource
-                          }
-                          onClick={() =>
-                            changeScreenAudioQuality(audioQuality)
-                          }
-                        >
-                          <span>
-                            {SCREEN_AUDIO_QUALITY_LABELS[audioQuality]}
-                          </span>
-                          <small>
-                            {SCREEN_AUDIO_BITRATES[audioQuality] / 1_000} kbps
-                          </small>
-                        </button>
-                      ))}
-                    </div>
-                  </fieldset>
-                  <fieldset className="control-group route-policy-controls">
-                    <legend>路由策略</legend>
-                    <label>
-                      <input
-                        type="checkbox"
-                        checked={routePolicy.topologyOptimization}
-                        disabled={phase === "starting" || phase === "live"}
-                        onChange={(event) =>
-                          changeRoutePolicy({
-                            topologyOptimization: event.target.checked,
-                          })
-                        }
-                      />
-                      <span>
-                        自动优化拓扑
-                        <small>观看中逐步选择更健康的连接</small>
-                      </span>
-                    </label>
-                    <label>
-                      <input
-                        type="checkbox"
-                        checked={routePolicy.peerOnly}
-                        disabled={phase === "starting" || phase === "live"}
-                        onChange={(event) =>
-                          changeRoutePolicy({ peerOnly: event.target.checked })
-                        }
-                      />
-                      <span>
-                        纯 P2P
-                        <small>不使用媒体服务器，无法直连时停止尝试</small>
-                      </span>
-                    </label>
-                  </fieldset>
-                  <fieldset className="control-group quality-priority">
-                    <legend>视频编码</legend>
-                    <div className="segmented-control">
-                      {(["vp8", "auto", "h264"] as const).map((mode) => (
-                        <button
-                          key={mode}
-                          type="button"
-                          className={
-                            videoCodecMode === mode ? "is-selected" : undefined
-                          }
-                          aria-pressed={videoCodecMode === mode}
-                          disabled={phase === "starting" || phase === "live"}
-                          onClick={() => changeVideoCodecMode(mode)}
-                        >
-                          <span>{mode === "auto" ? "自动" : mode.toUpperCase()}</span>
-                          <small>
-                            {mode === "vp8"
-                              ? "兼容优先"
-                              : mode === "h264"
-                                ? "硬件优先"
-                                : resolvedVideoCodec
-                                  ? resolvedVideoCodec.toUpperCase()
-                                  : "自动选择"}
-                          </small>
-                        </button>
-                      ))}
-                    </div>
-                  </fieldset>
-                </div>
-              </details>
-            </div>
-          </div>
-          {room && (
-            <div className="invite-bar">
-              <div className="invite-primary">
-                <div className="invite-heading">
-                  <div className="invite-heading-copy">
-                    <span className="field-label">邀请链接</span>
-                    <span className="invite-status">
-                      {room.inviteUrl ? "可用" : "暂无"}
-                    </span>
-                  </div>
-                  <div className="invite-icon-actions">
-                    <button
-                      className="icon-button invite-icon-action"
-                      type="button"
-                      title="更新邀请链接"
-                      aria-label="更新邀请链接"
-                      disabled={roomMutating}
-                      onClick={() => void changeViewerGrant("rotate")}
-                    >
-                      <RefreshCw size={17} aria-hidden="true" />
-                    </button>
-                    <button
-                      className="icon-button invite-icon-action is-danger"
-                      type="button"
-                      title="撤销邀请链接"
-                      aria-label="撤销邀请链接"
-                      disabled={!room.inviteUrl || roomMutating}
-                      onClick={() => void changeViewerGrant("revoke")}
-                    >
-                      <Link2Off size={17} aria-hidden="true" />
-                    </button>
-                  </div>
-                </div>
-                <div className="invite-copy-row">
-                  <span
-                    className="invite-url"
-                    title={room.inviteUrl ?? undefined}
-                  >
-                    {room.inviteUrl ??
-                      (activeCodeEntryPolicy === "open"
-                        ? "暂无邀请链接，仍可凭房间号加入"
-                        : viewerPasswordEnabled
-                          ? "暂无邀请链接，仍可凭房间号和密码加入"
-                          : "暂无邀请链接，请先更新链接再邀请他人")}
+                        <VisGlyph name="cast" size={34} draw="entry-cast" />
+                      </button>,
+                      "start",
+                    )}
+                    {vis ? null : (
+                      <span className="lr-tv-msg">{t("host.start")}</span>
+                    )}
                   </span>
-                  <button
-                    className="button button-primary invite-copy-action"
-                    type="button"
+                  <span className="lr-entry-action">
+                    {hintWrap(
+                      "hint-join-go",
+                      <button
+                        type="button"
+                        className="lr-tv-big"
+                        title={vis ? undefined : t("host.join")}
+                        aria-label={t("host.join")}
+                        aria-expanded={joiningRoom}
+                        aria-controls="host-room-code-entry"
+                        onClick={() => setJoiningRoom((current) => !current)}
+                      >
+                        <VisGlyph name="door" size={30} draw="entry-door" />
+                      </button>,
+                      "end",
+                    )}
+                    {vis ? null : (
+                      <span className="lr-tv-msg">{t("host.join")}</span>
+                    )}
+                  </span>
+                </div>
+                {joiningRoom ? (
+                  <form
+                    id="host-room-code-entry"
+                    className="lr-join-panel"
+                    style={{ gap: 12 }}
+                    onSubmit={joinRoomFromStage}
+                  >
+                    <div
+                      className={`lr-dials-wrap${
+                        joinRoomError ? " lr-join-door is-shake" : ""
+                      }`}
+                    >
+                      <div className="lr-dials" aria-hidden="true">
+                        {[0, 1, 2, 3].map((index) => (
+                          <span
+                            key={index}
+                            className={`lr-dial${
+                              joinRoomCode[index] ? " is-filled" : ""
+                            }${index === joinRoomCode.length ? " is-active" : ""}`}
+                          >
+                            {joinRoomCode[index] ?? ""}
+                          </span>
+                        ))}
+                      </div>
+                      <input
+                        value={joinRoomCode}
+                        inputMode="numeric"
+                        autoComplete="off"
+                        maxLength={4}
+                        autoFocus
+                        aria-label={t("join.field")}
+                        aria-invalid={joinRoomError ? "true" : undefined}
+                        onChange={(event) => {
+                          setJoinRoomCode(
+                            event.target.value.replace(/\D/g, "").slice(0, 4),
+                          );
+                          setJoinRoomError(false);
+                        }}
+                      />
+                    </div>
+                    {joinRoomError ? (
+                      <>
+                        <span
+                          className="lr-join-error"
+                          role="alert"
+                          aria-label={t("join.invalid")}
+                        >
+                          <Glyph name="x" size={22} />
+                        </span>
+                        {vis ? null : (
+                          <span className="lr-cap" style={{ color: "var(--danger)" }}>
+                            {t("join.invalid")}
+                          </span>
+                        )}
+                      </>
+                    ) : null}
+                    {hintWrap(
+                      "hint-join-go",
+                      <button
+                        className="lr-join-go"
+                        type="submit"
+                        title={vis ? undefined : t("join.submit")}
+                        aria-label={t("join.submit")}
+                        disabled={joinRoomCode.length !== 4}
+                      >
+                        <Glyph name="arrowRight" size={24} />
+                      </button>,
+                    )}
+                  </form>
+                ) : null}
+              </div>
+            ) : null}
+            {switchingSource ? (
+              <StageOverlay
+                icon="refresh"
+                spin
+                dim
+                message={t("host.switchingSource")}
+              />
+            ) : sharingPaused ? (
+              <StageOverlay icon="pause" dim comic="host-paused" message={t("host.pauseNotice")} />
+            ) : phase === "starting" ? (
+              <>
+                <StaticNoise />
+                <div
+                  className="lr-tv-overlay"
+                  role="status"
+                  aria-label={t("host.starting")}
+                >
+                  <StoryBoard step={1} />
+                </div>
+              </>
+            ) : stream && localPreviewPaused ? (
+              <StageOverlay
+                icon="eyeOff"
+                dim
+                message={t("host.localPreviewPaused")}
+              />
+            ) : null}
+          </StageTv>
+          <div className="lr-shelf" aria-hidden="true" />
+          <Couch
+            entries={couchEntries}
+            selectedKey={selectedPawn}
+            onSelect={(key) =>
+              setSelectedPawn((current) => (current === key ? null : key))
+            }
+            emptyHint={t(
+              phase === "live" ? "host.viewers.waiting" : "host.viewers.empty",
+            )}
+          />
+        </div>
+
+        <div className="lr-deck">
+          {selectedViewer && selectedDetail ? (
+            <PawnDetail
+              pawnKey={selectedViewer.peerId}
+              name={selectedViewer.label}
+              route={selectedDetail.route}
+              metrics={selectedDetail.metrics}
+              direction={selectedDetail.direction}
+              tag={selectedDetail.tag}
+              error={selectedDetail.error}
+              expanded={metricsExpanded}
+              onToggleMetrics={setMetricsExpanded}
+              onClose={() => setSelectedPawn(null)}
+            />
+          ) : null}
+
+          <Row>
+            {room ? (
+              <RowGroup>
+                <FieldCap k="common.roomCode" />
+                <RoomChip
+                  roomId={room.roomId}
+                  onReplace={replaceCurrentRoom}
+                  replaceDisabled={phase === "starting" || roomMutating}
+                />
+              </RowGroup>
+            ) : null}
+            <RowGroup>
+              <StatusText>{phaseLine}</StatusText>
+              {!details?.hasAudio && stream ? (
+                <Pill icon="speaker" label={t("host.noAudio")} comic="no-audio" />
+              ) : null}
+              {qualityLimitation ? (
+                <Pill icon="alert" label={qualityLimitation} comic="warning" />
+              ) : null}
+              {noticeText && (vis || noticeText !== phaseLine) ? (
+                <Pill
+                  icon={noticeComic ? "alert" : "check"}
+                  tone={noticeComic ? undefined : "good"}
+                  label={noticeText}
+                  comic={noticeComic ?? undefined}
+                />
+              ) : null}
+            </RowGroup>
+            <span className="lr-spacer" />
+            <div
+              style={{
+                display: "flex",
+                flexWrap: "wrap",
+                alignItems: "center",
+                gap: 12,
+                minWidth: 0,
+              }}
+            >
+            <RowGroup>
+              {editingDisplayName ? (
+                <form
+                  style={{ display: "contents" }}
+                  onSubmit={(event) => {
+                    event.preventDefault();
+                    commitDisplayName();
+                  }}
+                >
+                  <span className="lr-input" style={{ minWidth: 150 }}>
+                    <input
+                      id="host-display-name"
+                      type="text"
+                      value={displayNameDraft}
+                      maxLength={96}
+                      autoComplete="nickname"
+                      autoFocus
+                      aria-label={t("host.name")}
+                      aria-invalid={displayNameError ? "true" : undefined}
+                      onChange={(event) => {
+                        setDisplayNameDraft(event.target.value);
+                        setDisplayNameError(null);
+                      }}
+                    />
+                  </span>
+                  <Btn
+                    icon="check"
+                    title="host.nameSave"
+                    hint="hint-rename"
+                    type="submit"
+                    disabled={displayNameDraft === displayName}
+                  />
+                  {hintWrap(
+                    "hint-close",
+                    <Btn
+                      icon="x"
+                      title="host.nameCancel"
+                      onClick={() => {
+                        setDisplayNameDraft(displayName);
+                        setDisplayNameError(null);
+                        setEditingDisplayName(false);
+                      }}
+                    />,
+                    "end",
+                  )}
+                </form>
+              ) : (
+                <>
+                  <NameTag name={hostPresence?.displayName ?? displayName} />
+                  {hintWrap(
+                    "hint-rename",
+                    <Btn
+                      icon="pencil"
+                      cap="common.edit"
+                      title="host.nameEdit"
+                      onClick={() => {
+                        setDisplayNameDraft(displayName);
+                        setDisplayNameError(null);
+                        setEditingDisplayName(true);
+                      }}
+                    />,
+                    "end",
+                  )}
+                </>
+              )}
+              {displayNameError ? (
+                <Pill icon="alert" tone="bad" label={displayNameError} alert comic="warning" />
+              ) : null}
+            </RowGroup>
+            <RowGroup actions>
+              {phase === "live" ? (
+                <>
+                  <Btn
+                    icon={sharingPaused ? "play" : "pause"}
+                    cap={sharingPaused ? "host.resume" : "host.pause"}
+                    title={sharingPaused ? "host.resume" : "host.pause"}
+                    hint={sharingPaused ? "hint-resume" : "hint-pause"}
+                    draw="host-share-toggle"
+                    disabled={switchingSource || changingQuality}
+                    onClick={toggleSharingPause}
+                  />
+                  {hintWrap(
+                    "hint-switch-source",
+                    <Btn
+                      icon="refresh"
+                      cap={switchingSource ? "host.switching" : "host.switchSource"}
+                      title="host.switchSource"
+                      disabled={switchingSource || changingQuality}
+                      onClick={() => void switchSource()}
+                    />,
+                    "end",
+                  )}
+                  {hintWrap(
+                    "hint-share-stop",
+                    <Btn
+                      icon="stop"
+                      tone="danger"
+                      cap="host.stop"
+                      title="host.stop"
+                      onClick={() => endSharing({ key: "host.stopNotice" })}
+                    />,
+                    "end",
+                  )}
+                </>
+              ) : phase === "starting" ? (
+                hintWrap(
+                  "hint-share-stop",
+                  <Btn
+                    icon="x"
+                    tone="danger"
+                    cap="host.cancelStart"
+                    title="host.cancelStart"
+                    onClick={() => endSharing({ key: "host.startCancelled" })}
+                  />,
+                  "end",
+                )
+              ) : null}
+            </RowGroup>
+            </div>
+          </Row>
+
+          {room ? (
+            <Row label={t("host.invite")}>
+              <RowGroup actions>
+                {hintWrap(
+                  "hint-copy-invite",
+                  <Btn
+                    icon={copied ? "check" : "link"}
+                    tone={room.inviteUrl ? "primary" : undefined}
+                    cap="common.copy"
+                    title={copied ? "common.copied" : "host.invite.copy"}
                     disabled={!room.inviteUrl || roomMutating}
                     onClick={() => void copyInvite()}
-                  >
-                    {copied ? (
-                      <Check size={16} aria-hidden="true" />
-                    ) : (
-                      <Copy size={16} aria-hidden="true" />
-                    )}
-                    {copied ? "已复制" : "复制邀请链接"}
-                  </button>
-                </div>
-              </div>
-              <div className="room-entry-policy">
-                <div className="room-entry-heading">
-                  <span className="field-label">准入方式</span>
-                </div>
-                <div className="segmented-control room-policy-control">
-                  {(
-                    [
-                      ["open", "公开", Globe2],
-                      ["private", "私密", LockKeyhole],
-                    ] as const
-                  ).map(([policy, label, Icon]) => (
+                  />,
+                  "start",
+                )}
+                <Btn
+                  icon="refresh"
+                  cap="host.invite.rotateShort"
+                  title="host.invite.rotate"
+                  hint="hint-rotate-invite"
+                  disabled={roomMutating}
+                  onClick={() => void changeViewerGrant("rotate")}
+                />
+                <Btn
+                  icon="linkOff"
+                  tone="danger"
+                  cap="host.invite.revokeShort"
+                  title="host.invite.revoke"
+                  hint="hint-revoke-invite"
+                  disabled={!room.inviteUrl || roomMutating}
+                  onClick={() => void changeViewerGrant("revoke")}
+                />
+              </RowGroup>
+              {room.inviteUrl ? (
+                <code className="lr-invite-url" title={room.inviteUrl}>
+                  {room.inviteUrl}
+                </code>
+              ) : null}
+              <span className="lr-divider" aria-hidden="true" />
+              <RowGroup>
+                <span
+                  className="lr-toggle"
+                  role="group"
+                  aria-label={t("host.policy")}
+                  data-selected={activeCodeEntryPolicy}
+                >
+                  {hintWrap(
+                    "hint-policy-open",
                     <button
-                      key={policy}
                       type="button"
-                      className={`room-policy-option policy-${policy}${
-                        activeCodeEntryPolicy === policy
-                          ? " is-selected"
-                          : ""
-                      }`}
-                      aria-pressed={activeCodeEntryPolicy === policy}
+                      className={
+                        activeCodeEntryPolicy === "open" ? "is-selected" : undefined
+                      }
+                      title={
+                        vis
+                          ? undefined
+                          : `${t("host.policy.open")} · ${t("host.policy.openHint")}`
+                      }
+                      aria-label={t("host.policy.open")}
+                      aria-pressed={activeCodeEntryPolicy === "open"}
                       disabled={roomMutating}
-                      onClick={() => void changeCodeEntryPolicy(policy)}
+                      onClick={() => void changeCodeEntryPolicy("open")}
                     >
-                      <Icon size={16} aria-hidden="true" />
-                      <span>{label}</span>
-                    </button>
-                  ))}
-                </div>
-                {activeCodeEntryPolicy === "private" && (
+                      <VisGlyph name="globe" size={19} />
+                      <Cap k="host.policy.open" />
+                    </button>,
+                    "center",
+                    // Vis mode interposes the tooltip wrapper between the
+                    // toggle and its buttons, breaking the text-mode
+                    // `.lr-toggle button { flex: 1 }` halves (and the sliding
+                    // thumb's 50% geometry). Give each wrapper its half back.
+                    { flex: 1, display: "grid" },
+                  )}
+                  {hintWrap(
+                    "hint-policy-private",
+                    <button
+                      type="button"
+                      className={
+                        activeCodeEntryPolicy === "private"
+                          ? "is-selected"
+                          : undefined
+                      }
+                      title={
+                        vis
+                          ? undefined
+                          : `${t("host.policy.private")} · ${t("host.policy.privateHint")}`
+                      }
+                      aria-label={t("host.policy.private")}
+                      aria-pressed={activeCodeEntryPolicy === "private"}
+                      disabled={roomMutating}
+                      onClick={() => void changeCodeEntryPolicy("private")}
+                    >
+                      <VisGlyph name="lock" size={19} />
+                      <Cap k="host.policy.private" />
+                    </button>,
+                    "center",
+                    { flex: 1, display: "grid" },
+                  )}
+                </span>
+                {activeCodeEntryPolicy === "private" ? (
+                  hintWrap(
+                    "hint-password",
+                    <button
+                      type="button"
+                      className="lr-btn"
+                      title={
+                        vis
+                          ? undefined
+                          : t(
+                              viewerPasswordEnabled
+                                ? "host.password.set"
+                                : "host.password.unset",
+                            )
+                      }
+                      aria-label={t("host.password.setAction")}
+                      aria-expanded={passwordOpen}
+                      aria-controls="host-password-form"
+                      onClick={() => setPasswordOpen((current) => !current)}
+                    >
+                      <VisGlyph name="key" size={19} />
+                      {viewerPasswordEnabled ? (
+                        <i className="lr-chip-dot" aria-hidden="true" />
+                      ) : null}
+                      <Cap k="join.password" />
+                    </button>,
+                    "end",
+                  )
+                ) : null}
+                {!room.inviteUrl ? (
+                  <Pill
+                    icon="link"
+                    label={t(
+                      activeCodeEntryPolicy === "open"
+                        ? "host.invite.emptyOpen"
+                        : viewerPasswordEnabled
+                          ? "host.invite.emptyPassword"
+                          : "host.invite.emptyPrivate",
+                    )}
+                  />
+                ) : null}
+              </RowGroup>
+              {activeCodeEntryPolicy === "private" && passwordOpen ? (
+                <RowGroup>
                   <form
-                    className={`viewer-password-control${
-                      viewerPasswordEnabled ? " has-password" : ""
-                    }`}
+                    id="host-password-form"
+                    style={{ display: "contents" }}
                     onSubmit={(event) => {
                       event.preventDefault();
                       void changeViewerPassword(viewerPasswordDraft);
                     }}
                   >
-                    <label htmlFor="viewer-password">
-                      {viewerPasswordEnabled
-                        ? "房间密码已设置"
-                        : "房间密码未设置"}
-                    </label>
-                    <span className="input-with-icon">
-                      <KeyRound size={16} aria-hidden="true" />
+                    <span
+                      className="lr-input"
+                      style={{ flex: 1, minWidth: 180 }}
+                    >
+                      <Glyph name="key" size={17} />
                       <input
                         id="viewer-password"
                         type={viewerPasswordVisible ? "text" : "password"}
@@ -2857,181 +3073,539 @@ export function HostPage({ onAuthorizationRequired }: HostPageProps = {}) {
                         maxLength={MAX_VIEWER_PASSWORD_LENGTH}
                         autoComplete="new-password"
                         placeholder={
-                          viewerPasswordEnabled
-                            ? "输入密码"
-                            : "设置后可凭房间号加入"
+                          vis
+                            ? ""
+                            : viewerPasswordEnabled
+                              ? t("host.password.inputPlaceholder")
+                              : t("host.password.placeholder")
                         }
+                        aria-label={t("join.password")}
                         autoFocus={!viewerPasswordEnabled}
                         disabled={roomMutating}
                         onChange={(event) =>
                           setViewerPasswordDraft(event.target.value)
                         }
                       />
-                      {viewerPasswordEnabled && viewerPasswordDraft.length > 0 && (
-                        <button
-                          className="password-visibility-action"
-                          type="button"
-                          title={viewerPasswordVisible ? "隐藏密码" : "显示密码"}
-                          aria-label={
-                            viewerPasswordVisible ? "隐藏房间密码" : "显示房间密码"
-                          }
-                          aria-pressed={viewerPasswordVisible}
-                          disabled={roomMutating}
-                          onClick={() =>
-                            setViewerPasswordVisible((current) => !current)
-                          }
-                        >
-                          {viewerPasswordVisible ? (
-                            <EyeOff size={17} aria-hidden="true" />
-                          ) : (
-                            <Eye size={17} aria-hidden="true" />
-                          )}
-                        </button>
-                      )}
                     </span>
-                    <button
-                      className="icon-button"
+                    {viewerPasswordEnabled && viewerPasswordDraft.length > 0 ? (
+                      <Btn
+                        icon={viewerPasswordVisible ? "eyeOff" : "eye"}
+                        title={
+                          viewerPasswordVisible
+                            ? "host.password.hide"
+                            : "host.password.show"
+                        }
+                        draw="host-password-eye"
+                        pressed={viewerPasswordVisible}
+                        disabled={roomMutating}
+                        onClick={() =>
+                          setViewerPasswordVisible((current) => !current)
+                        }
+                      />
+                    ) : null}
+                    <Btn
+                      icon="check"
                       type="submit"
-                      title={viewerPasswordEnabled ? "更改房间密码" : "设置房间密码"}
-                      aria-label={
-                        viewerPasswordEnabled ? "更改房间密码" : "设置房间密码"
+                      title={
+                        viewerPasswordEnabled
+                          ? "host.password.changeAction"
+                          : "host.password.setAction"
                       }
+                      hint="hint-password"
                       disabled={
                         roomMutating ||
                         viewerPasswordDraft.length === 0 ||
                         (viewerPasswordEnabled &&
-                          viewerPasswordDraft ===
-                            creationProfile.roomPassword)
+                          viewerPasswordDraft === creationProfile.roomPassword)
                       }
-                    >
-                      <Check size={18} aria-hidden="true" />
-                    </button>
-                    {viewerPasswordEnabled && (
-                      <button
-                        className="icon-button"
-                        type="button"
-                        title="移除房间密码"
-                        aria-label="移除房间密码"
+                    />
+                    {viewerPasswordEnabled ? (
+                      <Btn
+                        icon="x"
+                        tone="danger"
+                        title="host.password.remove"
                         disabled={roomMutating}
                         onClick={() => void changeViewerPassword(null)}
-                      >
-                        <X size={18} aria-hidden="true" />
-                      </button>
-                    )}
+                      />
+                    ) : null}
                   </form>
+                </RowGroup>
+              ) : null}
+            </Row>
+          ) : null}
+
+          <Row label={t("host.quality")}>
+            <RowGroup>
+              <div className="lr-tiles">
+                {(Object.keys(QUALITY_PROFILES) as QualityProfileId[]).map(
+                  (id, index) => (
+                    <Fragment key={id}>
+                      {hintWrap(
+                        "hint-quality",
+                        <button
+                          type="button"
+                          className={`lr-tile${
+                            selectedQualityProfileId === id ? " is-selected" : ""
+                          }`}
+                          aria-pressed={selectedQualityProfileId === id}
+                          title={
+                            vis
+                              ? undefined
+                              : t("host.quality.title", {
+                                  label: t(QUALITY_PROFILE_CAPTIONS[id]),
+                                  mbps: (
+                                    QUALITY_PROFILES[id].maxBitrate / 1_000_000
+                                  ).toFixed(0),
+                                })
+                          }
+                          aria-label={t(QUALITY_PROFILE_CAPTIONS[id])}
+                          disabled={phase === "starting" || switchingSource}
+                          onClick={() =>
+                            void changeQuality({
+                              ...QUALITY_PROFILES[id],
+                              screenAudioQuality: resolveScreenAudioQuality(
+                                advancedQualityRef.current.screenAudioQuality,
+                              ),
+                            })
+                          }
+                        >
+                          <QualityTileGlyph density={index} />
+                          <small>
+                            {vis
+                              ? `${QUALITY_PROFILES[id].resolution.replace("p", "")}·${QUALITY_PROFILES[id].maxFramerate}`
+                              : t(QUALITY_PROFILE_CAPTIONS[id])}
+                          </small>
+                        </button>,
+                        index === 0 ? "start" : "center",
+                      )}
+                    </Fragment>
+                  ),
                 )}
               </div>
-            </div>
-          )}
-        </section>
-
-        <aside className="viewer-panel" aria-labelledby="viewer-heading">
-          <div className="viewer-panel-heading">
+            </RowGroup>
+            <span className="lr-spacer" />
+            {hintWrap(
+              "hint-advanced",
+              <Btn
+                icon="sliders"
+                cap="host.advanced"
+                title="host.advanced"
+                tone={showAdvanced ? "on" : undefined}
+                expanded={showAdvanced}
+                controls="host-advanced-door"
+                onClick={() => setShowAdvanced((current) => !current)}
+              />,
+              "end",
+              // Mobile stacks `.lr-row` into a stretch column, which would
+              // stretch the tooltip wrapper to full row width and leave its
+              // wrapper-centered caret (and end-aligned panel) floating in
+              // empty card space away from the button. Take the stretch on a
+              // layout span instead and park the wrapper at the row's end,
+              // matching the desktop row-right placement; in the desktop row
+              // layout the span shrink-wraps and this is a no-op.
+              { display: "flex", justifyContent: "flex-end" },
+            )}
+          </Row>
+          <div
+            id="host-advanced-door"
+            className={`lr-door-reveal${showAdvanced ? " is-open" : ""}`}
+          >
             <div>
-              <h2 id="viewer-heading">观看者</h2>
-              <span>在线 {viewers.length}/{maxViewers ?? "-"}</span>
-            </div>
-            <button
-              className="icon-button"
-              type="button"
-              title={showTopology ? "隐藏连接拓扑" : "显示连接拓扑"}
-              aria-label={showTopology ? "隐藏连接拓扑" : "显示连接拓扑"}
-              aria-controls="room-topology"
-              aria-expanded={showTopology}
-              onClick={() => setShowTopology((current) => !current)}
-            >
-              <Network size={17} aria-hidden="true" />
-            </button>
-          </div>
-
-          {showTopology && (
-            <TopologyView
-              hostPeerId={hostPresence?.peerId ?? hostPeerIdRef.current}
-              hostLabel={labeledHostPresence?.label ?? displayName}
-              viewers={viewers}
-            />
-          )}
-
-          <div className="viewer-list">
-            {viewers.map((viewer) => {
-              const snapshot =
-                viewer.upstream.kind === "peer" &&
-                viewer.upstream.peerId ===
-                  (hostPresence?.peerId ?? hostPeerIdRef.current)
-                  ? peerSnapshots.get(viewer.peerId)
-                  : undefined;
-              const qualityPresentation = viewerQualityEvidence.get(
-                viewer.peerId,
-              );
-              const qualityEvidence = qualityPresentation?.evidence;
-              const hasMatchingQualityEvidence =
-                qualityEvidence !== undefined &&
-                qualityEvidenceUpstreamMatches(
-                  qualityEvidence,
-                  viewer.upstream,
-                );
-              const hasCurrentQualityEvidence =
-                hasMatchingQualityEvidence &&
-                qualityPresentation?.fresh === true;
-              const hasCommittedMedia = viewer.mediaReady === true;
-              const hasCurrentRouteEvidence =
-                hasPeerRouteEvidence(snapshot) ||
-                hasCurrentQualityEvidence ||
-                hasCommittedMedia;
-              const hasCurrentConnectionEvidence =
-                snapshot?.connectionState === "connected" ||
-                hasCurrentQualityEvidence ||
-                hasCommittedMedia;
-              const viewerState =
-                hasCurrentConnectionEvidence
-                  ? "connected"
-                  : (snapshot?.connectionState ?? "routing");
-              const detailMetrics = hasMatchingQualityEvidence
-                ? metricsFromQualityEvidence(qualityEvidence)
-                : snapshot && hasPeerRouteEvidence(snapshot)
-                  ? snapshot.metrics
-                  : null;
-              const detailDirection = hasMatchingQualityEvidence
-                ? "receive"
-                : "send";
-              return (
-                <article className="viewer-item" key={viewer.peerId}>
-                  <div className="viewer-item-heading">
-                    <div>
-                      <h3 title={viewer.label}>{viewer.label}</h3>
-                      <PeerStatusBadge state={viewerState} />
+              {showAdvanced ? (
+                <div
+                  className="lr-door-body"
+                  role="group"
+                  aria-label={t("host.advanced")}
+                >
+                  <div className="lr-door-group">
+                    <span
+                      className="lr-door-glyph"
+                      title={vis ? undefined : t("host.advanced.resolution")}
+                    >
+                      <VisGlyph name="expand" size={19} />
+                      <Cap k="host.advanced.resolution" />
+                    </span>
+                    <div
+                      className="lr-row-group"
+                      role="group"
+                      aria-label={t("host.advanced.resolution")}
+                    >
+                      {(
+                        Object.keys(QUALITY_RESOLUTIONS) as QualityResolution[]
+                      ).map((resolution) => (
+                        <Chip
+                          key={resolution}
+                          selected={advancedQuality.resolution === resolution}
+                          disabled={phase === "starting" || switchingSource}
+                          title={QUALITY_RESOLUTIONS[resolution].label}
+                          hint="hint-quality"
+                          onClick={() =>
+                            changeAdvancedQuality({ resolution })
+                          }
+                        >
+                          {QUALITY_RESOLUTIONS[resolution].label}
+                        </Chip>
+                      ))}
                     </div>
                   </div>
-                  {showConnectionDetails &&
-                    hasCurrentRouteEvidence &&
-                    viewer.upstream.kind !== "none" && (
-                    <div className="viewer-transport-heading">
-                      <MediaRouteBadge
-                        route={viewer.upstream.kind === "peer" ? "p2p" : "sfu"}
+                  <div className="lr-door-group">
+                    <span
+                      className="lr-door-glyph"
+                      title={vis ? undefined : t("host.advanced.framerate")}
+                    >
+                      <VisGlyph name="wave" size={19} />
+                      <Cap k="host.advanced.framerate" />
+                    </span>
+                    <span className="lr-slider">
+                      <input
+                        type="range"
+                        min={15}
+                        max={60}
+                        step={5}
+                        value={advancedQuality.maxFramerate}
+                        disabled={phase === "starting" || switchingSource}
+                        aria-label={t("host.advanced.framerate")}
+                        onChange={(event) =>
+                          changeAdvancedQuality({
+                            maxFramerate: Number(event.target.value),
+                          })
+                        }
+                      />
+                      <output>{advancedQuality.maxFramerate} fps</output>
+                    </span>
+                  </div>
+                  <div className="lr-door-group">
+                    <span
+                      className="lr-door-glyph"
+                      title={vis ? undefined : t("host.advanced.bitrate")}
+                    >
+                      <VisGlyph name="gauge" size={19} />
+                      <Cap k="host.advanced.bitrate" />
+                    </span>
+                    <span className="lr-slider">
+                      <input
+                        type="range"
+                        min={2000000}
+                        max={12000000}
+                        step={500000}
+                        value={advancedQuality.maxBitrate}
+                        disabled={phase === "starting" || switchingSource}
+                        aria-label={t("host.advanced.bitrate")}
+                        onChange={(event) =>
+                          changeAdvancedQuality({
+                            maxBitrate: Number(event.target.value),
+                          })
+                        }
+                      />
+                      <output>
+                        {(advancedQuality.maxBitrate / 1_000_000).toFixed(1)}{" "}
+                        Mbps
+                      </output>
+                    </span>
+                  </div>
+                  <div className="lr-door-group">
+                    <span
+                      className="lr-door-glyph"
+                      title={vis ? undefined : t("host.advanced.preference")}
+                    >
+                      <VisGlyph name="mountain" size={19} />
+                      <Cap k="host.advanced.preference" />
+                    </span>
+                    <div
+                      className="lr-row-group"
+                      role="group"
+                      aria-label={t("host.advanced.preference")}
+                    >
+                      {(
+                        Object.keys(
+                          PREFERENCE_PRESENTATION,
+                        ) as DegradationPreference[]
+                      ).map((preference) => (
+                        <Chip
+                          key={preference}
+                          selected={
+                            advancedQuality.degradationPreference === preference
+                          }
+                          disabled={phase !== "live" || switchingSource}
+                          title={`${t(PREFERENCE_PRESENTATION[preference].cap)} · ${t(PREFERENCE_PRESENTATION[preference].hint)}`}
+                          hint="hint-degrade-pref"
+                          onClick={() =>
+                            changeAdvancedQuality({
+                              degradationPreference: preference,
+                            })
+                          }
+                        >
+                          <Glyph
+                            name={PREFERENCE_PRESENTATION[preference].icon}
+                            size={18}
+                          />
+                          <Cap k={PREFERENCE_PRESENTATION[preference].cap} />
+                        </Chip>
+                      ))}
+                    </div>
+                  </div>
+                  <div className="lr-door-group">
+                    <span
+                      className="lr-door-glyph"
+                      title={vis ? undefined : t("host.advanced.audio")}
+                    >
+                      <VisGlyph name="speaker" size={19} />
+                      <Cap k="host.advanced.audio" />
+                    </span>
+                    <div
+                      className="lr-row-group"
+                      role="group"
+                      aria-label={t("host.advanced.audio")}
+                    >
+                      {(
+                        Object.keys(
+                          AUDIO_QUALITY_CAPTIONS,
+                        ) as ScreenAudioQuality[]
+                      ).map((audioQuality) => (
+                        <Chip
+                          key={audioQuality}
+                          selected={
+                            resolveScreenAudioQuality(
+                              advancedQuality.screenAudioQuality,
+                            ) === audioQuality
+                          }
+                          disabled={phase === "starting" || switchingSource}
+                          title={t("host.audio.title", {
+                            label: t(AUDIO_QUALITY_CAPTIONS[audioQuality]),
+                            kbps: String(
+                              SCREEN_AUDIO_BITRATES[audioQuality] / 1_000,
+                            ),
+                          })}
+                          hint="hint-audio-quality"
+                          onClick={() => changeScreenAudioQuality(audioQuality)}
+                        >
+                          <Cap k={AUDIO_QUALITY_CAPTIONS[audioQuality]} />
+                          <small>
+                            {SCREEN_AUDIO_BITRATES[audioQuality] / 1_000}
+                          </small>
+                        </Chip>
+                      ))}
+                    </div>
+                  </div>
+                  <div className="lr-door-group">
+                    <span
+                      className="lr-door-glyph"
+                      title={vis ? undefined : t("host.advanced.route")}
+                    >
+                      <VisGlyph name="branch" size={19} />
+                      <Cap k="host.advanced.route" />
+                    </span>
+                    <div className="lr-row-group">
+                      <SwitchItem
+                        checked={routePolicy.topologyOptimization}
+                        disabled={phase === "starting" || phase === "live"}
+                        onChange={(checked) =>
+                          changeRoutePolicy({ topologyOptimization: checked })
+                        }
+                        label={t("host.advanced.route.topo")}
+                        note={t("host.advanced.route.topoHint")}
+                        hint="hint-topology"
+                      />
+                      <SwitchItem
+                        checked={routePolicy.peerOnly}
+                        disabled={phase === "starting" || phase === "live"}
+                        onChange={(checked) =>
+                          changeRoutePolicy({ peerOnly: checked })
+                        }
+                        label={t("host.advanced.route.peerOnly")}
+                        note={t("host.advanced.route.peerOnlyHint")}
+                        hint="hint-route-p2p"
                       />
                     </div>
-                  )}
-                  {showConnectionDetails && detailMetrics && (
-                    <StatsGrid
-                      metrics={detailMetrics}
-                      direction={detailDirection}
-                      progressive
-                    />
-                  )}
-                  {snapshot?.error && (
-                    <p className="inline-error">{snapshot.error}</p>
-                  )}
-                </article>
-              );
-            })}
-            {viewers.length === 0 && (
-              <div className="empty-viewers">
-                <Users size={24} strokeWidth={1.5} aria-hidden="true" />
-                <span>{phase === "live" ? "等待朋友加入" : "暂无观看者"}</span>
-              </div>
-            )}
+                  </div>
+                  <div className="lr-door-group">
+                    <span
+                      className="lr-door-glyph"
+                      title={vis ? undefined : t("host.advanced.codec")}
+                    >
+                      <VisGlyph name="cpu" size={19} />
+                      <Cap k="host.advanced.codec" />
+                    </span>
+                    <div
+                      className="lr-row-group"
+                      role="group"
+                      aria-label={t("host.advanced.codec")}
+                    >
+                      {(["vp8", "auto", "h264"] as const).map((mode) => (
+                        <Chip
+                          key={mode}
+                          selected={videoCodecMode === mode}
+                          disabled={phase === "starting" || phase === "live"}
+                          title={
+                            mode === "auto"
+                              ? resolvedVideoCodec
+                                ? `${t("host.advanced.codec.auto")} · ${resolvedVideoCodec.toUpperCase()}`
+                                : `${t("host.advanced.codec.auto")} · ${t("host.advanced.codec.autoHint")}`
+                              : `${mode.toUpperCase()} · ${t(
+                                  mode === "vp8"
+                                    ? "host.advanced.codec.vp8Hint"
+                                    : "host.advanced.codec.h264Hint",
+                                )}`
+                          }
+                          hint="hint-codec"
+                          onClick={() => changeVideoCodecMode(mode)}
+                        >
+                          {mode.toUpperCase()}
+                          {mode === "auto" && resolvedVideoCodec ? (
+                            <i
+                              className="lr-chip-dot"
+                              title={
+                                vis
+                                  ? undefined
+                                  : resolvedVideoCodec.toUpperCase()
+                              }
+                            />
+                          ) : null}
+                        </Chip>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              ) : null}
+            </div>
           </div>
-        </aside>
+
+          <Row label={t("host.details")}>
+            <RowGroup actions>
+              {hintWrap(
+                "hint-details",
+                <Btn
+                  icon="gauge"
+                  cap={showConnectionDetails ? "host.details.hide" : "host.details"}
+                  title={showConnectionDetails ? "host.details.hide" : "host.details"}
+                  tone={showConnectionDetails ? "on" : undefined}
+                  expanded={showConnectionDetails}
+                  controls="host-details-panel"
+                  disabled={!details || !stream}
+                  onClick={() => setShowConnectionDetails((current) => !current)}
+                />,
+                "start",
+              )}
+              {hintWrap(
+                "hint-topology",
+                <Btn
+                  icon="network"
+                  cap="host.topology"
+                  title={showTopology ? "host.topology.hide" : "host.topology.show"}
+                  tone={showTopology ? "on" : undefined}
+                  expanded={showTopology}
+                  controls="room-topology"
+                  onClick={() => setShowTopology((current) => !current)}
+                />,
+                "end",
+              )}
+            </RowGroup>
+          </Row>
+          {showConnectionDetails && details && stream ? (
+            <Row sub>
+              <div id="host-details-panel" style={{ display: "contents" }}>
+              <span
+                className="lr-meter-tag"
+                title={vis ? undefined : t("host.captureAria")}
+              >
+                <Glyph name="arrowUp" size={17} />
+                {vis ? null : (
+                  <span className="lr-cap">{t("stats.capture")}</span>
+                )}
+              </span>
+              <div
+                className="lr-meter"
+                role="group"
+                aria-label={t("host.captureAria")}
+              >
+                <span
+                  className="lr-meter-cell"
+                  title={vis ? undefined : t("stats.resolution")}
+                >
+                  <Glyph name="expand" size={16} />
+                  <b>
+                    {details.resolution ?? (vis ? "—" : t("stats.unknown"))}
+                  </b>
+                </span>
+                <span
+                  className="lr-meter-cell"
+                  title={vis ? undefined : t("stats.fps")}
+                >
+                  <Glyph name="wave" size={16} />
+                  <b>
+                    {details.frameRate
+                      ? `${details.frameRate.toFixed(0)} fps`
+                      : vis
+                        ? "—"
+                        : t("host.capture.fpsUnknown")}
+                  </b>
+                </span>
+                <span
+                  className="lr-meter-cell"
+                  title={vis ? undefined : t("stats.codec")}
+                >
+                  <Glyph name="cpu" size={16} />
+                  <b>
+                    {resolvedVideoCodec?.toUpperCase() ??
+                      (vis ? "—" : t("host.capture.codecPending"))}
+                  </b>
+                </span>
+                <span
+                  className="lr-meter-cell"
+                  title={vis ? undefined : t("stats.audio")}
+                >
+                  {vis ? (
+                    <span
+                      style={{ position: "relative", display: "inline-flex" }}
+                    >
+                      <Glyph name="speaker" size={16} />
+                      {details.hasAudio ? null : (
+                        <span
+                          aria-hidden="true"
+                          style={{
+                            position: "absolute",
+                            top: -3,
+                            bottom: -3,
+                            left: "50%",
+                            width: 2.5,
+                            borderRadius: 2,
+                            background: "currentColor",
+                            transform: "translateX(-50%) rotate(45deg)",
+                          }}
+                        />
+                      )}
+                      <span className="visually-hidden">
+                        {details.hasAudio
+                          ? t("host.capture.hasAudio")
+                          : t("host.capture.noAudio")}
+                      </span>
+                    </span>
+                  ) : (
+                    <>
+                      <Glyph name="speaker" size={16} />
+                      <b>
+                        {details.hasAudio
+                          ? t("host.capture.hasAudio")
+                          : t("host.capture.noAudio")}
+                      </b>
+                    </>
+                  )}
+                </span>
+              </div>
+              </div>
+            </Row>
+          ) : null}
+          {showTopology ? (
+            <Row sub>
+              <RouteTree
+                hostPeerId={hostPeerId}
+                hostLabel={labeledHostPresence?.label ?? displayName}
+                viewers={viewers}
+                flowing={phase === "starting"}
+              />
+            </Row>
+          ) : null}
+        </div>
       </main>
     </div>
   );
diff --git a/src/client/pages/JoinPage.tsx b/src/client/pages/JoinPage.tsx
index 3a5931a..67a45ca 100644
--- a/src/client/pages/JoinPage.tsx
+++ b/src/client/pages/JoinPage.tsx
@@ -1,12 +1,102 @@
-import { AppHeader } from "../components/AppHeader";
-import { RoomCodeEntry } from "../components/RoomCodeEntry";
+import { useState, type FormEvent } from "react";
+import { AppHeader } from "../components/living/Header";
+import { ComicTooltip } from "../components/living/ComicTooltip";
+import { Glyph } from "../ui/icons";
+import { useCopy } from "../ui/copy";
+import { roomRouteForExplicitEntry } from "../lib/session";
 
 export function JoinPage() {
+  const { t, vis } = useCopy();
+  const [roomId, setRoomId] = useState("");
+  const [error, setError] = useState(false);
+
+  function join(event: FormEvent<HTMLFormElement>): void {
+    event.preventDefault();
+    const route = roomRouteForExplicitEntry(roomId);
+    if (!route) {
+      setError(true);
+      return;
+    }
+    window.location.assign(route);
+  }
+
+  const goButton = (
+    <button
+      className="lr-join-go"
+      type="submit"
+      title={vis ? undefined : t("join.submit")}
+      aria-label={t("join.submit")}
+      disabled={roomId.length !== 4}
+    >
+      <Glyph name="arrowRight" size={26} />
+    </button>
+  );
+
   return (
-    <div className="app-shell">
-      <AppHeader status={null} />
-      <main className="access-workspace">
-        <RoomCodeEntry id="join-room-code" autoFocus />
+    <div className="lr-app">
+      <AppHeader />
+      <main className="lr-join">
+        <form className="lr-join-panel" onSubmit={join} noValidate>
+          <span
+            className={`lr-join-door${error ? " is-shake" : ""}`}
+            title={vis ? undefined : t("join.title")}
+            role="img"
+            aria-label={t("join.title")}
+          >
+            <Glyph name="door" size={96} draw="join-door" />
+          </span>
+          {vis ? null : (
+            <div className="lr-access-text">
+              <h1>{t("join.title")}</h1>
+              <p>{t("join.hint")}</p>
+            </div>
+          )}
+          <div className="lr-dials-wrap">
+            <div className="lr-dials" aria-hidden="true">
+              {[0, 1, 2, 3].map((index) => (
+                <span
+                  key={index}
+                  className={`lr-dial${roomId[index] ? " is-filled" : index === roomId.length ? " is-active" : ""}`}
+                >
+                  {roomId[index] ?? ""}
+                </span>
+              ))}
+            </div>
+            <input
+              value={roomId}
+              inputMode="numeric"
+              autoComplete="off"
+              maxLength={4}
+              autoFocus
+              aria-label={t("join.field")}
+              aria-invalid={error}
+              onChange={(event) => {
+                setRoomId(event.target.value.replace(/\D/g, "").slice(0, 4));
+                setError(false);
+              }}
+            />
+          </div>
+          {error ? (
+            <>
+              <span className="lr-join-error" role="alert" aria-label={t("join.invalid")}>
+                <Glyph name="x" size={24} />
+              </span>
+              {vis ? (
+                <span className="visually-hidden">{t("join.invalid")}</span>
+              ) : (
+                <span className="lr-cap" style={{ color: "var(--danger)" }}>
+                  {t("join.invalid")}
+                </span>
+              )}
+            </>
+          ) : null}
+          {vis ? (
+            <ComicTooltip kind="hint-join-go">{goButton}</ComicTooltip>
+          ) : (
+            goButton
+          )}
+          {vis ? null : <span className="lr-cap">{t("join.submit")}</span>}
+        </form>
       </main>
     </div>
   );
diff --git a/src/client/pages/ViewerPage.tsx b/src/client/pages/ViewerPage.tsx
index 6fd97ae..110746d 100644
--- a/src/client/pages/ViewerPage.tsx
+++ b/src/client/pages/ViewerPage.tsx
@@ -1,18 +1,11 @@
 import {
-  CirclePlay,
-  KeyRound,
-  LoaderCircle,
-  Network,
-  Pause,
-  Pencil,
-  RefreshCw,
-  Save,
-  TriangleAlert,
-  VideoOff,
-  WifiOff,
-  X,
-} from "lucide-react";
-import { useEffect, useMemo, useReducer, useRef, useState } from "react";
+  useEffect,
+  useMemo,
+  useReducer,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
 import {
   DEFAULT_QUALITY_SETTINGS,
   DEFAULT_ROUTE_POLICY,
@@ -24,22 +17,36 @@ import {
   type ServerMessage,
   type RoutePolicy,
 } from "../../shared/protocol";
-import { AppHeader } from "../components/AppHeader";
-import { ConnectionDetailsToggle } from "../components/ConnectionDetailsToggle";
-import { RoomCode } from "../components/RoomCode";
 import { qualityLimitationSummary } from "../components/connection-details";
-import {
-  MediaRouteBadge,
-  PeerStatusBadge,
-  SignalStatusBadge,
-  WarningBanner,
-} from "../components/StatusBadge";
-import { StatsGrid } from "../components/StatsGrid";
-import { TopologyView } from "../components/TopologyView";
 import {
   viewerReconnectRoute,
   viewerRouteEvidence,
 } from "../components/status-badge-model";
+import { AppHeader, LedStrip, type LedState } from "../components/living/Header";
+import { Couch, type CouchEntry } from "../components/living/Couch";
+import { MetricCells, useMetricsExpanded } from "../components/living/Metrics";
+import { PawnDetail, RouteGlyph } from "../components/living/PawnDetail";
+import { Lcd } from "../components/living/RoomChip";
+import { RouteTree } from "../components/living/RouteTree";
+import { Comic, type ComicKind } from "../components/living/Comic";
+import { ComicTooltip } from "../components/living/ComicTooltip";
+import type { HintKind } from "../components/living/hints";
+import {
+  StageOverlay,
+  StageTv,
+  type ChinState,
+} from "../components/living/Stage";
+import {
+  Btn,
+  FieldCap,
+  NameTag,
+  Pill,
+  Row,
+  RowGroup,
+  StatusText,
+} from "../components/living/primitives";
+import { Glyph, type GlyphName } from "../ui/icons";
+import { useCopy, type CopyKey } from "../ui/copy";
 import { readDisplayName, saveDisplayName } from "../lib/display-name";
 import { clearViewerGrant, getStableClientId } from "../lib/session";
 import { SignalingClient } from "../lib/signaling";
@@ -130,44 +137,110 @@ interface RemoteMediaBinding {
   videoTrackKey: string;
 }
 
-function StageOverlayIcon({ stage }: { stage: ViewerStage }) {
-  if (stage === "needs-play") {
-    return <CirclePlay size={36} strokeWidth={1.5} aria-hidden="true" />;
+const CONNECTING_STAGES: readonly ViewerStage[] = [
+  "joining",
+  "preparing-p2p",
+  "preparing-sfu",
+  "waiting-sfu",
+  "receiving",
+  "allocating",
+  "recovering",
+];
+
+function stageOverlayGlyph(stage: ViewerStage): { icon: GlyphName; spin: boolean } {
+  switch (stage) {
+    case "needs-play":
+      return { icon: "play", spin: false };
+    case "host-paused":
+      return { icon: "pause", spin: false };
+    case "host-offline":
+      return { icon: "wifiOff", spin: false };
+    case "route-failed":
+    case "playback-failed":
+    case "server-error":
+      return { icon: "alert", spin: false };
+    case "recovering":
+    case "waiting-sfu":
+    case "preparing-p2p":
+    case "preparing-sfu":
+    case "receiving":
+    case "allocating":
+      return { icon: "loader", spin: true };
+    case "waiting-host":
+      return { icon: "moon", spin: false };
+    default:
+      return { icon: "tv", spin: false };
   }
-  if (stage === "host-paused") {
-    return <Pause size={36} strokeWidth={1.5} aria-hidden="true" />;
+}
+
+// Visual mode tells the stage as a panel comic; the glyph stays as its marker.
+function stageOverlayComic(
+  stage: ViewerStage,
+  route: "p2p" | "sfu" | null,
+): ComicKind | undefined {
+  switch (stage) {
+    case "waiting-host":
+      return "waiting-for-host";
+    case "preparing-p2p":
+      return "connecting-p2p";
+    case "preparing-sfu":
+    case "waiting-sfu":
+      return "connecting-sfu";
+    case "needs-play":
+      return "tap-to-play";
+    case "host-paused":
+      return "host-paused";
+    case "recovering":
+      return "recovering";
+    case "route-failed":
+    case "server-error":
+      return "route-failed";
+    case "playback-failed":
+      return "playback-failed";
+    case "host-offline":
+      return "host-offline";
+    case "receiving":
+    case "allocating":
+      return route === "sfu" ? "connecting-sfu" : "connecting-p2p";
+    default:
+      return undefined;
   }
-  if (stage === "host-offline") {
-    return <WifiOff size={36} strokeWidth={1.5} aria-hidden="true" />;
+}
+
+function stageChin(stage: ViewerStage): ChinState {
+  switch (stage) {
+    case "playing":
+      return "on";
+    case "host-paused":
+    case "recovering":
+      return "warn";
+    case "route-failed":
+    case "playback-failed":
+    case "host-offline":
+    case "server-error":
+    case "stale-client":
+    case "session-replaced":
+    case "signal-terminated":
+      return "bad";
+    case "waiting-host":
+      return "off";
+    default:
+      return "busy";
   }
-  if (
-    stage === "route-failed" ||
-    stage === "playback-failed" ||
-    stage === "server-error"
-  ) {
-    return <TriangleAlert size={36} strokeWidth={1.5} aria-hidden="true" />;
-  }
-  if (
-    stage === "recovering" ||
-    stage === "waiting-sfu" ||
-    stage === "preparing-p2p" ||
-    stage === "preparing-sfu" ||
-    stage === "receiving" ||
-    stage === "allocating"
-  ) {
-    return (
-      <LoaderCircle
-        size={36}
-        strokeWidth={1.5}
-        className="spin"
-        aria-hidden="true"
-      />
-    );
-  }
-  return <VideoOff size={36} strokeWidth={1.5} aria-hidden="true" />;
+}
+
+function MeterTag({ icon, label }: { icon: GlyphName; label: string }) {
+  const { vis } = useCopy();
+  return (
+    <span className="lr-meter-tag" title={vis ? undefined : label} role="img" aria-label={label}>
+      <Glyph name={icon} size={17} />
+      {vis ? null : <span className="lr-cap">{label}</span>}
+    </span>
+  );
 }
 
 export function ViewerPage({ roomId, viewerGrant }: ViewerPageProps) {
+  const { t, vis } = useCopy();
   const [presentationState, dispatchPresentationState] = useReducer(
     reduceViewerPresentation,
     INITIAL_VIEWER_PRESENTATION_STATE,
@@ -192,13 +265,13 @@ export function ViewerPage({ roomId, viewerGrant }: ViewerPageProps) {
   const [showTopology, setShowTopology] = useState(false);
   const [displayName, setDisplayName] = useState(() => readDisplayName());
   const [displayNameDraft, setDisplayNameDraft] = useState(displayName);
-  const [displayNameError, setDisplayNameError] = useState<string | null>(null);
+  const [displayNameError, setDisplayNameError] = useState(false);
   const [editingDisplayName, setEditingDisplayName] = useState(false);
   const [participantPresence, setParticipantPresence] = useState<
     ParticipantPresenceEntry[] | null
   >(null);
   const [viewerPasswordDraft, setViewerPasswordDraft] = useState("");
-  const [viewerPasswordError, setViewerPasswordError] = useState<string | null>(
+  const [viewerPasswordError, setViewerPasswordError] = useState<CopyKey | null>(
     null,
   );
   const [viewerPasswordAttempt, setViewerPasswordAttempt] = useState<{
@@ -207,6 +280,15 @@ export function ViewerPage({ roomId, viewerGrant }: ViewerPageProps) {
   } | null>(null);
   const [viewerPasswordExpanded, setViewerPasswordExpanded] = useState(false);
   const [frameProofEpoch, setFrameProofEpoch] = useState(0);
+  // Presentation-only: which couch pawn is drilled into, and this viewer's
+  // own peer id (mirrors the authenticated message for couch/route-tree).
+  const [selectedPawn, setSelectedPawn] = useState<string | null>(null);
+  const [selfPeerId, setSelfPeerId] = useState<string | null>(null);
+  const [routeMetricsExpanded, setRouteMetricsExpanded] = useMetricsExpanded();
+  const [relayMetricsExpanded, setRelayMetricsExpanded] = useMetricsExpanded();
+  const [downstreamMetricsExpanded, setDownstreamMetricsExpanded] =
+    useMetricsExpanded();
+  const [pawnMetricsExpanded, setPawnMetricsExpanded] = useMetricsExpanded();
 
   const qualityLimitation = useMemo(
     () =>
@@ -217,14 +299,11 @@ export function ViewerPage({ roomId, viewerGrant }: ViewerPageProps) {
       ),
     [peerSnapshot, relaySnapshot],
   );
-  const hostPresence = useMemo(
+  const hostDisplayName = useMemo(
     () =>
       participantPresence?.find(
-        (participant): participant is Extract<
-          ParticipantPresenceEntry,
-          { role: "host" }
-        > => participant.role === "host",
-      ) ?? null,
+        (participant) => participant.role === "host",
+      )?.displayName ?? null,
     [participantPresence],
   );
   const { host: labeledHostPresence, viewers } = useMemo(
@@ -278,7 +357,6 @@ export function ViewerPage({ roomId, viewerGrant }: ViewerPageProps) {
     signalStatus === "connected" &&
     reconnectRoute !== null &&
     presentationState.connection !== "reconnecting";
-  const routeConnectionState = presentation.connectionState;
   const routeMetrics = routePresentation.evidence?.metrics ?? null;
 
   function bindRemoteStream(stream: MediaStream, revision: number): void {
@@ -1379,6 +1457,7 @@ export function ViewerPage({ roomId, viewerGrant }: ViewerPageProps) {
         setViewerPasswordError(null);
         clearRelayChildEvidence();
         currentPeerId = message.peerId;
+        setSelfPeerId(message.peerId);
         endpointMediaCopyCapacity = message.endpointMediaCopyCapacity;
         currentAssignment = limitMediaAssignment(
           currentAssignment,
@@ -1786,13 +1865,13 @@ export function ViewerPage({ roomId, viewerGrant }: ViewerPageProps) {
         if (message.code === "INVALID_TOKEN") {
           clearViewerGrant(roomId);
           if (!viewerGrant && viewerPasswordAttempt) {
-            setViewerPasswordError("无法加入房间，请重试");
+            setViewerPasswordError("join.passwordError");
           }
           return;
         }
         if (message.code === "ROOM_ACCESS_DENIED") {
           if (viewerPasswordAttempt) {
-            setViewerPasswordError("当前无法通过房间号加入");
+            setViewerPasswordError("viewer.msg.denied");
             setViewerPasswordExpanded(true);
           }
           return;
@@ -1920,13 +1999,13 @@ export function ViewerPage({ roomId, viewerGrant }: ViewerPageProps) {
   function commitDisplayName(): void {
     const saved = saveDisplayName(displayNameDraft);
     if (!saved) {
-      setDisplayNameError("名称格式无效或超过 24 个字符");
+      setDisplayNameError(true);
       return;
     }
     displayNameRef.current = saved;
     setDisplayName(saved);
     setDisplayNameDraft(saved);
-    setDisplayNameError(null);
+    setDisplayNameError(false);
     setEditingDisplayName(false);
     signalRef.current?.setViewerDisplayName(saved);
   }
@@ -1934,9 +2013,7 @@ export function ViewerPage({ roomId, viewerGrant }: ViewerPageProps) {
   function submitViewerPassword(event: React.FormEvent<HTMLFormElement>): void {
     event.preventDefault();
     if (!viewerPasswordSchema.safeParse(viewerPasswordDraft).success) {
-      setViewerPasswordError(
-        `请输入 1-${MAX_VIEWER_PASSWORD_LENGTH} 个可见字符`,
-      );
+      setViewerPasswordError("join.passwordRule");
       return;
     }
     setViewerPasswordError(null);
@@ -1960,373 +2037,526 @@ export function ViewerPage({ roomId, viewerGrant }: ViewerPageProps) {
       "SESSION_REPLACED",
       "SIGNAL_TERMINATED",
     ].includes(presentationState.failure ?? "");
+    const deniedComic: ComicKind =
+      presentationState.failure === "ROOM_FULL"
+        ? "room-full"
+        : codeOnlyDenied
+          ? "access-denied"
+          : presentationState.failure === "INVALID_TOKEN"
+            ? "invalid-invite"
+            : presentationState.failure === "ROOM_NOT_FOUND" ||
+                presentationState.failure === "ROOM_EXPIRED" ||
+                presentationState.failure === "ROOM_CLOSED"
+              ? "room-not-found"
+              : "warning";
+    const deniedIcon: GlyphName =
+      presentationState.failure === "ROOM_NOT_FOUND" ||
+      presentationState.failure === "ROOM_EXPIRED" ||
+      presentationState.failure === "ROOM_CLOSED"
+        ? "door"
+        : presentationState.failure === "ROOM_ACCESS_DENIED"
+          ? "lock"
+          : presentationState.failure === "ROOM_FULL"
+            ? "users"
+            : "alert";
+    const deniedHintKey: CopyKey = codeOnlyDenied
+      ? "viewer.hint.denied"
+      : presentationState.failure === "ROOM_NOT_FOUND" ||
+          presentationState.failure === "ROOM_EXPIRED" ||
+          presentationState.failure === "ROOM_CLOSED"
+        ? "viewer.hint.notFound"
+        : presentationState.failure === "INVALID_TOKEN"
+          ? "viewer.hint.invite"
+          : "viewer.hint.generic";
     return (
-      <div className="app-shell">
-        <main className="access-workspace access-workspace-full">
+      <div className="lr-app">
+        <AppHeader
+          led={
+            accessState === "checking" ? (
+              <LedStrip state="busy" label={t(presentation.messageKey)} />
+            ) : undefined
+          }
+        />
+        <main className="lr-join">
           {accessState === "checking" ? (
-            <div className="access-loading" role="status">
-              <LoaderCircle size={20} className="spin" aria-hidden="true" />
-              正在加入房间
+            <div className="lr-join-panel">
+              <span
+                className="lr-tv-big lr-spin"
+                role="status"
+                aria-label={t(presentation.messageKey)}
+              >
+                <Glyph name="loader" size={30} />
+              </span>
+              {vis ? null : (
+                <span className="lr-tv-msg">{t(presentation.messageKey)}</span>
+              )}
             </div>
           ) : (
-            <section className="access-panel">
-              <div>
-                <h1>{presentation.message}</h1>
-                <p className="section-meta">
-                  {codeOnlyDenied
-                    ? "请使用分享者提供的邀请链接，或尝试房间密码。"
-                    : presentationState.failure === "ROOM_NOT_FOUND"
-                      ? "请确认房间号，或向分享者获取新的邀请链接。"
-                    : viewerGrant
-                      ? "请向分享者获取新的邀请链接。"
-                      : "请检查入口后重试。"}
-                </p>
-              </div>
-              {codeOnlyDenied && !viewerPasswordExpanded && (
-                <button
-                  className="button button-secondary"
-                  type="button"
-                  aria-expanded="false"
-                  aria-controls="viewer-password-retry"
-                  onClick={() => setViewerPasswordExpanded(true)}
-                >
-                  <KeyRound size={16} aria-hidden="true" />
-                  输入房间密码
-                </button>
+            <div className="lr-join-panel">
+              {vis ? (
+                <>
+                  <Comic kind={deniedComic} theme="paper" />
+                  <span className="visually-hidden" role="alert">
+                    {t(presentation.messageKey)}
+                  </span>
+                </>
+              ) : (
+              <span
+                className="lr-tv-big"
+                style={{
+                  borderColor: "var(--ink)",
+                  color: "var(--ink)",
+                  background: "var(--paper)",
+                }}
+                title={t(presentation.messageKey)}
+                role="img"
+                aria-label={t(presentation.messageKey)}
+              >
+                <Glyph name={deniedIcon} size={30} />
+              </span>
               )}
-              {codeOnlyDenied && viewerPasswordExpanded && (
-                <form
-                  id="viewer-password-retry"
-                  className="access-password-retry"
-                  onSubmit={submitViewerPassword}
-                >
-                  <label className="token-field">
-                    <span>房间密码</span>
-                    <span className="input-with-icon">
-                      <KeyRound size={16} aria-hidden="true" />
-                      <input
-                        type="password"
-                        value={viewerPasswordDraft}
-                        maxLength={MAX_VIEWER_PASSWORD_LENGTH}
-                        autoComplete="current-password"
-                        autoFocus
-                        onChange={(event) => {
-                          setViewerPasswordDraft(event.target.value);
-                          setViewerPasswordError(null);
-                        }}
-                      />
-                    </span>
-                  </label>
+              {vis ? (
+                <Pill icon="alert" tone="bad" label={t(deniedHintKey)} />
+              ) : (
+                <div className="lr-access-text">
+                  <h1>{t(presentation.messageKey)}</h1>
+                  <p>{t(deniedHintKey)}</p>
+                </div>
+              )}
+              {codeOnlyDenied && (
+                <>
+                  <Btn
+                    icon="key"
+                    cap="join.passwordAction"
+                    title="join.passwordAction"
+                    expanded={viewerPasswordExpanded}
+                    controls="viewer-password-retry"
+                    onClick={() => setViewerPasswordExpanded((current) => !current)}
+                  />
+                  {viewerPasswordExpanded ? (
+                    <div id="viewer-password-retry">
+                      <form
+                      style={{ display: "grid", justifyItems: "center", gap: 14 }}
+                      onSubmit={submitViewerPassword}
+                    >
+                  <span className="lr-input" style={{ minWidth: 220 }}>
+                    <Glyph name="key" size={17} />
+                    <input
+                      type="password"
+                      value={viewerPasswordDraft}
+                      maxLength={MAX_VIEWER_PASSWORD_LENGTH}
+                      autoComplete="current-password"
+                      autoFocus
+                      aria-label={t("join.password")}
+                      onChange={(event) => {
+                        setViewerPasswordDraft(event.target.value);
+                        setViewerPasswordError(null);
+                      }}
+                    />
+                  </span>
                   {viewerPasswordError && (
-                    <p className="access-error" role="alert">
-                      {viewerPasswordError}
-                    </p>
+                    <Pill icon="alert" tone="bad" label={t(viewerPasswordError, { max: String(MAX_VIEWER_PASSWORD_LENGTH) })} alert comic="access-denied" />
                   )}
-                  <button className="button button-primary" type="submit">
-                    加入
-                  </button>
-                </form>
+                  <Btn
+                    icon="arrowRight"
+                    tone="primary"
+                    cap="join.submit"
+                    title="join.submit"
+                    type="submit"
+                    hint="hint-password"
+                  />
+                      </form>
+                    </div>
+                  ) : null}
+                </>
               )}
               {canRefresh && (
-                <button
-                  className="button button-primary"
-                  type="button"
+                <Btn
+                  icon="refresh"
+                  cap="common.refresh"
+                  title="common.refresh"
                   onClick={() => window.location.reload()}
-                >
-                  <RefreshCw size={16} aria-hidden="true" />
-                  刷新页面
-                </button>
+                />
               )}
-            </section>
+            </div>
           )}
         </main>
       </div>
     );
   }
 
+  const chin = stageChin(presentation.stage);
+  const ledState: LedState = chin === "on" ? "live" : chin;
+  const overlayGlyph = stageOverlayGlyph(presentation.stage);
+  const assignedRouteKind =
+    assignedRoute?.upstream.kind === "sfu"
+      ? "sfu"
+      : assignedRoute?.upstream.kind === "peer"
+        ? "p2p"
+        : routePresentation.route;
+  const overlayComic = stageOverlayComic(
+    presentation.stage,
+    assignedRouteKind,
+  );
+  const selectedChildEvidence =
+    selectedPawn !== null &&
+    selectedPawn !== selfPeerId &&
+    relayChildEvidence?.evidence.viewerPeerId === selectedPawn
+      ? relayChildEvidence
+      : null;
+  const couchEntries: CouchEntry[] = viewers.map((viewer) => {
+    const isSelf = selfPeerId !== null && viewer.peerId === selfPeerId;
+    const isChild =
+      !isSelf &&
+      selfPeerId !== null &&
+      viewer.upstream.kind === "peer" &&
+      viewer.upstream.peerId === selfPeerId;
+    return {
+      key: viewer.peerId,
+      name: viewer.label,
+      connected: viewer.mediaReady === true,
+      statusLabel: t(
+        isSelf
+          ? (`state.peer.${presentation.connectionState}` as CopyKey)
+          : viewer.upstream.kind === "none"
+            ? "state.peer.routing"
+            : "state.peer.connecting",
+      ),
+      you: isSelf,
+      child: isChild,
+      selectable: isSelf || isChild ? undefined : false,
+    };
+  });
+
+  // Vis mode swaps native title tooltips for 2-panel hint comics; text modes
+  // render the trigger unchanged, so markup structure stays identical. Edge
+  // alignment keeps the panel on-screen for triggers near a viewport edge.
+  const hintWrap = (
+    kind: HintKind,
+    node: ReactNode,
+    align: "start" | "center" | "end" = "center",
+  ): ReactNode =>
+    vis ? (
+      <ComicTooltip kind={kind} align={align}>
+        {node}
+      </ComicTooltip>
+    ) : (
+      node
+    );
+
   return (
-    <div className="app-shell viewer-shell">
+    <div className="lr-app">
+      <style>{`
+/* The video fills the screen exactly, so its own :focus-visible outline is
+   clipped by .lr-tv-screen's overflow: hidden. Ring the screen container
+   instead; :focus-visible keeps mouse clicks ring-free like every control. */
+.lr-tv-screen:has(:focus-visible) { outline: 3px solid var(--action); outline-offset: 2px; }
+`}</style>
       <AppHeader
-        status={
-          showConnectionDetails ? (
-            <SignalStatusBadge state={signalStatus} />
-          ) : null
-        }
+        led={<LedStrip state={ledState} label={t(presentation.messageKey)} />}
       />
-
-      <main className="viewer-workspace">
-        <div className="viewer-title-row">
-          <div>
-            <div className="title-line">
-              <h1>
-                {hostPresence ? `${hostPresence.displayName} 的屏幕` : "好友屏幕"}
-              </h1>
-              <RoomCode roomId={roomId} />
-            </div>
-          </div>
-          <div className="viewer-badges">
-            <PeerStatusBadge
-              state={routeConnectionState}
-            />
-            {showConnectionDetails && routePresentation.route && (
-              <>
-                <MediaRouteBadge route={routePresentation.route} />
-              </>
-            )}
-          </div>
-        </div>
-
-        <form
-          className={`viewer-name-control${
-            editingDisplayName ? " is-editing" : ""
-          }`}
-          onSubmit={(event) => {
-            event.preventDefault();
-            commitDisplayName();
-          }}
-        >
-          <label
-            htmlFor={editingDisplayName ? "viewer-display-name" : undefined}
+      <main className="lr-room">
+        <h1 className="visually-hidden">
+          {hostDisplayName
+            ? t("viewer.title", { name: hostDisplayName })
+            : t("viewer.titleFallback")}
+        </h1>
+        <div className="lr-scene">
+          <StageTv
+            chin={chin}
+            live={presentation.stage === "playing"}
+            label={t("viewer.stageAria")}
           >
-            昵称
-          </label>
-          {editingDisplayName ? (
-            <>
-              <input
-                id="viewer-display-name"
-                type="text"
-                value={displayNameDraft}
-                maxLength={96}
-                autoComplete="nickname"
-                autoFocus
-                aria-invalid={displayNameError ? "true" : undefined}
-                onChange={(event) => {
-                  setDisplayNameDraft(event.target.value);
-                  setDisplayNameError(null);
-                }}
-              />
-              <button
-                type="submit"
-                className="icon-button"
-                title="保存昵称"
-                aria-label="保存昵称"
-                disabled={displayNameDraft === displayName}
-              >
-                <Save size={17} />
-              </button>
-              <button
-                type="button"
-                className="icon-button"
-                title="取消编辑"
-                aria-label="取消编辑昵称"
-                onClick={() => {
-                  setDisplayNameDraft(displayName);
-                  setDisplayNameError(null);
-                  setEditingDisplayName(false);
-                }}
-              >
-                <X size={17} />
-              </button>
-            </>
-          ) : (
-            <>
-              <span className="viewer-name-value">{displayName}</span>
-              <button
-                type="button"
-                className="icon-button"
-                title="编辑昵称"
-                aria-label="编辑昵称"
-                onClick={() => {
-                  setDisplayNameDraft(displayName);
-                  setDisplayNameError(null);
-                  setEditingDisplayName(true);
-                }}
-              >
-                <Pencil size={17} />
-              </button>
-            </>
-          )}
-          {displayNameError && (
-            <span className="viewer-name-error" role="alert">
-              {displayNameError}
-            </span>
-          )}
-        </form>
-
-        <section className="video-stage remote-stage" aria-label="共享画面">
-          <video
-            ref={videoRef}
-            autoPlay
-            controls={
-              presentation.overlay === "none" ||
-              presentation.stage === "needs-play" ||
-              (presentation.stage === "receiving" &&
-                presentation.hasRetainedFrame)
-            }
-            playsInline
-            onPlay={() => {
-              invalidateQualityPresentation();
-              setFrameProofEpoch((current) => current + 1);
-              const binding = remoteMediaRef.current;
-              if (binding) {
-                dispatchPresentation({
-                  type: "autoplay-cleared",
-                  generation: binding.generation,
-                });
+            <video
+              ref={videoRef}
+              autoPlay
+              tabIndex={0}
+              aria-label={t("viewer.stageAria")}
+              controls={
+                presentation.overlay === "none" ||
+                presentation.stage === "needs-play" ||
+                (presentation.stage === "receiving" &&
+                  presentation.hasRetainedFrame)
               }
-            }}
-            onPause={invalidateQualityPresentation}
-            onEnded={invalidateQualityPresentation}
-          />
-          {presentation.overlay === "blocking" && (
-            <div className="stage-placeholder" role="status">
-              <StageOverlayIcon stage={presentation.stage} />
-              <span>{presentation.message}</span>
-            </div>
-          )}
-          {presentation.overlay === "status" &&
-            presentation.stage === "needs-play" && (
-            <button
-              className="stage-overlay is-interactive"
-              type="button"
-              onClick={() => {
-                const video = videoRef.current;
+              playsInline
+              onPlay={() => {
+                invalidateQualityPresentation();
+                setFrameProofEpoch((current) => current + 1);
                 const binding = remoteMediaRef.current;
-                if (video && binding) attemptPlayback(video, binding);
+                if (binding) {
+                  dispatchPresentation({
+                    type: "autoplay-cleared",
+                    generation: binding.generation,
+                  });
+                }
+              }}
+              onPause={invalidateQualityPresentation}
+              onEnded={invalidateQualityPresentation}
+            />
+            {presentation.overlay === "blocking" && (
+              <StageOverlay
+                dim
+                icon={overlayGlyph.icon}
+                spin={overlayGlyph.spin}
+                comic={overlayComic}
+                message={t(presentation.messageKey)}
+              />
+            )}
+            {presentation.overlay === "status" &&
+              presentation.stage === "needs-play" && (
+                <StageOverlay
+                  dim
+                  icon="play"
+                  comic="tap-to-play"
+                  message={t(presentation.messageKey)}
+                  onActivate={() => {
+                    const video = videoRef.current;
+                    const binding = remoteMediaRef.current;
+                    if (video && binding) attemptPlayback(video, binding);
+                  }}
+                />
+              )}
+            {presentation.overlay === "status" &&
+              presentation.stage !== "needs-play" && (
+                <StageOverlay
+                  dim
+                  icon={overlayGlyph.icon}
+                  spin={overlayGlyph.spin}
+                  comic={overlayComic}
+                  message={t(presentation.messageKey)}
+                />
+              )}
+          </StageTv>
+          <div className="lr-shelf" aria-hidden="true" />
+          <Couch
+            entries={couchEntries}
+            selectedKey={selectedPawn}
+            onSelect={(key) =>
+              setSelectedPawn((current) => (current === key ? null : key))
+            }
+          />
+        </div>
+        <div className="lr-deck">
+          {selectedPawn !== null &&
+          selectedPawn === selfPeerId ? (
+            <PawnDetail
+              pawnKey={selectedPawn}
+              name={vis ? displayName : `${displayName} · ${t("common.you")}`}
+              you
+              route={routePresentation.route}
+              metrics={routeMetrics}
+              direction="receive"
+              expanded={pawnMetricsExpanded}
+              onToggleMetrics={setPawnMetricsExpanded}
+              onClose={() => setSelectedPawn(null)}
+            />
+          ) : null}
+          {selectedPawn !== null && selectedChildEvidence ? (
+            <PawnDetail
+              pawnKey={selectedPawn}
+              name={
+                viewers.find((viewer) => viewer.peerId === selectedPawn)
+                  ?.label ?? selectedPawn
+              }
+              route={null}
+              metrics={metricsFromQualityEvidence(selectedChildEvidence.evidence)}
+              direction="receive"
+              tag={{ icon: "arrowUp", label: t("stats.downstream") }}
+              expanded={pawnMetricsExpanded}
+              onToggleMetrics={setPawnMetricsExpanded}
+              onClose={() => setSelectedPawn(null)}
+            />
+          ) : null}
+          <Row>
+            <RowGroup>
+              <FieldCap k="common.roomCode" />
+              <Lcd code={roomId} />
+            </RowGroup>
+            <RowGroup>
+              <StatusText>
+                {hostDisplayName
+                  ? `${t("viewer.title", { name: hostDisplayName })} · `
+                  : ""}
+                {t(presentation.messageKey)}
+                {participantPresence
+                  ? ` · ${t("viewer.onlineCount", { n: String(viewers.length) })}`
+                  : ""}
+              </StatusText>
+            </RowGroup>
+            <span className="lr-spacer" />
+            <form
+              className="lr-row-group lr-group-name"
+              onSubmit={(event) => {
+                event.preventDefault();
+                commitDisplayName();
               }}
             >
-              <StageOverlayIcon stage={presentation.stage} />
-              <span>{presentation.message}</span>
-            </button>
-          )}
-          {presentation.overlay === "status" &&
-            presentation.stage !== "needs-play" && (
-            <div className="stage-overlay" role="status">
-              <StageOverlayIcon stage={presentation.stage} />
-              <span>{presentation.message}</span>
-            </div>
-          )}
-        </section>
-
-        <div className="viewer-status-row">
-          <div className="toolbar-status" role="status" aria-live="polite">
-            {presentation.message}
-          </div>
-          <div className="viewer-status-actions">
-            {labeledHostPresence ? (
-              <button
-                className="icon-button viewer-status-action"
-                type="button"
-                title={showTopology ? "隐藏连接拓扑" : "显示连接拓扑"}
-                aria-label={showTopology ? "隐藏连接拓扑" : "显示连接拓扑"}
-                aria-controls="room-topology"
-                aria-expanded={showTopology}
-                onClick={() => setShowTopology((current) => !current)}
-              >
-                <Network size={18} aria-hidden="true" />
-              </button>
-            ) : (
-              <span className="viewer-status-action-placeholder" aria-hidden="true" />
-            )}
-            <button
-              type="button"
-              className="icon-button viewer-status-action"
-              title="重新连接媒体"
-              aria-label="重新连接媒体"
-              disabled={!reconnectAvailable}
-              onClick={retryConnection}
-            >
-              <RefreshCw size={18} />
-            </button>
-          </div>
-        </div>
-
-        {presentation.notice && (
-          <div className="notice" role="status">
-            {presentation.notice}
-          </div>
-        )}
-        {participantPresence && (
-          <section
-            className="viewer-roster"
-            aria-labelledby="viewer-roster-heading"
-          >
-            <div className="viewer-roster-heading">
-              <div>
-                <h2 id="viewer-roster-heading">观看者</h2>
-                <span>在线 {viewers.length}</span>
+              {editingDisplayName ? (
+                <>
+                  <span className="lr-input" style={{ minWidth: 150 }}>
+                    <input
+                      id="viewer-display-name"
+                      type="text"
+                      value={displayNameDraft}
+                      maxLength={96}
+                      autoComplete="nickname"
+                      autoFocus
+                      aria-label={t("host.name")}
+                      aria-invalid={displayNameError ? "true" : undefined}
+                      onChange={(event) => {
+                        setDisplayNameDraft(event.target.value);
+                        setDisplayNameError(false);
+                      }}
+                    />
+                  </span>
+                  <Btn
+                    icon="check"
+                    title="host.nameSave"
+                    type="submit"
+                    disabled={displayNameDraft === displayName}
+                  />
+                  <Btn
+                    icon="x"
+                    title="host.nameCancel"
+                    onClick={() => {
+                      setDisplayNameDraft(displayName);
+                      setDisplayNameError(false);
+                      setEditingDisplayName(false);
+                    }}
+                  />
+                </>
+              ) : (
+                <>
+                  <NameTag name={displayName} />
+                  {hintWrap(
+                    "hint-rename",
+                    <Btn
+                      icon="pencil"
+                      cap="common.edit"
+                      title="host.nameEdit"
+                      onClick={() => {
+                        setDisplayNameDraft(displayName);
+                        setDisplayNameError(false);
+                        setEditingDisplayName(true);
+                      }}
+                    />,
+                    "end",
+                  )}
+                </>
+              )}
+              {displayNameError && (
+                <Pill icon="alert" tone="bad" label={t("host.nameError")} alert />
+              )}
+            </form>
+            <RowGroup actions>
+              {labeledHostPresence
+                ? hintWrap(
+                    "hint-topology",
+                    <Btn
+                      icon="network"
+                      cap="host.topology"
+                      title={
+                        showTopology ? "host.topology.hide" : "host.topology.show"
+                      }
+                      tone={showTopology ? "on" : undefined}
+                      expanded={showTopology}
+                      controls="room-topology"
+                      onClick={() => setShowTopology((current) => !current)}
+                    />,
+                    "start",
+                  )
+                : null}
+              {hintWrap(
+                "hint-reconnect",
+                <Btn
+                  icon="refresh"
+                  cap="viewer.reconnect"
+                  title="viewer.reconnect"
+                  disabled={!reconnectAvailable}
+                  onClick={retryConnection}
+                />,
+                "end",
+              )}
+              <Btn
+                icon="gauge"
+                cap="host.details"
+                title={showConnectionDetails ? "host.details.hide" : "host.details"}
+                hint="hint-details"
+                tone={showConnectionDetails ? "on" : undefined}
+                expanded={showConnectionDetails}
+                controls="viewer-details-panel"
+                disabled={
+                  !routePresentation.route &&
+                  !relaySnapshot &&
+                  !relayChildEvidence
+                }
+                onClick={() => setShowConnectionDetails((current) => !current)}
+              />
+            </RowGroup>
+          </Row>
+          {presentation.noticeKey ? (
+            <Pill icon="alert" label={t(presentation.noticeKey)} />
+          ) : null}
+          {routePresentation.evidence === peerSnapshot &&
+          peerSnapshot?.error ? (
+            <Pill icon="alert" tone="bad" label={t("viewer.error.p2p")} comic="route-failed" />
+          ) : null}
+          {relaySnapshot?.error ? (
+            <Pill icon="alert" tone="bad" label={t("viewer.error.relay")} comic="route-failed" />
+          ) : null}
+          {qualityLimitation ? (
+            <Pill icon="alert" label={qualityLimitation} comic="warning" />
+          ) : null}
+          {showConnectionDetails && routePresentation.route ? (
+            <Row sub>
+              <div id="viewer-details-panel" style={{ display: "contents" }}>
+                <MeterTag icon="arrowDown" label={t("stats.title")} />
+                <RouteGlyph route={routePresentation.route} />
+                {routeMetrics ? (
+                  <MetricCells
+                    metrics={routeMetrics}
+                    direction="receive"
+                    expanded={routeMetricsExpanded}
+                    onToggle={setRouteMetricsExpanded}
+                  />
+                ) : null}
               </div>
-            </div>
-            {showTopology && labeledHostPresence && (
-              <TopologyView
+            </Row>
+          ) : null}
+          {showConnectionDetails && relaySnapshot ? (
+            <Row sub>
+              <MeterTag icon="arrowUp" label={t("stats.relay")} />
+              <MetricCells
+                metrics={relaySnapshot.metrics}
+                direction="send"
+                expanded={relayMetricsExpanded}
+                onToggle={setRelayMetricsExpanded}
+              />
+            </Row>
+          ) : null}
+          {showConnectionDetails && relayChildEvidence ? (
+            <Row sub>
+              <MeterTag icon="arrowUp" label={t("stats.downstream")} />
+              <MetricCells
+                metrics={metricsFromQualityEvidence(relayChildEvidence.evidence)}
+                direction="receive"
+                expanded={downstreamMetricsExpanded}
+                onToggle={setDownstreamMetricsExpanded}
+              />
+            </Row>
+          ) : null}
+          {showTopology && labeledHostPresence ? (
+            <Row sub>
+              <RouteTree
                 hostPeerId={labeledHostPresence.peerId}
                 hostLabel={labeledHostPresence.label}
                 viewers={viewers}
+                selfPeerId={selfPeerId}
+                flowing={CONNECTING_STAGES.includes(presentation.stage)}
               />
-            )}
-            <ul className="viewer-roster-list">
-              {viewers.map((viewer) => (
-                <li key={viewer.peerId} title={viewer.label}>
-                  {viewer.label}
-                </li>
-              ))}
-            </ul>
-          </section>
-        )}
-
-        <ConnectionDetailsToggle
-          checked={showConnectionDetails}
-          onChange={setShowConnectionDetails}
-        />
-
-        {routePresentation.evidence === peerSnapshot && peerSnapshot?.error && (
-          <div className="notice notice-error" role="status">
-            P2P 媒体连接异常
-          </div>
-        )}
-        {relaySnapshot?.error && (
-          <div className="notice notice-error" role="status">
-            下游媒体连接异常
-          </div>
-        )}
-        {qualityLimitation && (
-          <WarningBanner>{qualityLimitation}</WarningBanner>
-        )}
-        {showConnectionDetails && routePresentation.route && (
-          <section className="viewer-stats" aria-labelledby="stats-heading">
-            <h2 id="stats-heading">连接数据</h2>
-            <div className="viewer-transport-heading">
-              <MediaRouteBadge route={routePresentation.route} />
-            </div>
-            {routeMetrics && (
-              <StatsGrid
-                metrics={routeMetrics}
-                direction="receive"
-              />
-            )}
-          </section>
-        )}
-        {showConnectionDetails && relaySnapshot && (
-          <section className="viewer-stats" aria-labelledby="relay-stats-heading">
-            <h2 id="relay-stats-heading">转发数据</h2>
-            <StatsGrid
-              metrics={relaySnapshot.metrics}
-              direction="send"
-            />
-          </section>
-        )}
-        {showConnectionDetails && relayChildEvidence && (
-          <section
-            className="viewer-stats"
-            aria-labelledby="relay-child-stats-heading"
-          >
-            <h2 id="relay-child-stats-heading">下游接收数据</h2>
-            <StatsGrid
-              metrics={metricsFromQualityEvidence(relayChildEvidence.evidence)}
-              direction="receive"
-            />
-          </section>
-        )}
+            </Row>
+          ) : null}
+        </div>
       </main>
     </div>
   );
diff --git a/src/client/pages/host-page-notices.ts b/src/client/pages/host-page-notices.ts
index d231b93..8f78abb 100644
--- a/src/client/pages/host-page-notices.ts
+++ b/src/client/pages/host-page-notices.ts
@@ -1,4 +1,5 @@
 import type { ServerMessage } from "../../shared/protocol";
+import { joinSentences, say, type CopyKey } from "../ui/copy";
 
 export type HostAction =
   | "capture"
@@ -7,12 +8,12 @@ export type HostAction =
   | "connection"
   | "room";
 
-const HOST_ACTION_FALLBACK: Record<HostAction, string> = {
-  capture: "启动分享失败",
-  source: "切换分享来源失败",
-  quality: "应用画质设置失败",
-  connection: "观看连接处理失败",
-  room: "房间操作失败",
+const HOST_ACTION_FALLBACK: Record<HostAction, CopyKey> = {
+  capture: "host.fail.start",
+  source: "host.fail.source",
+  quality: "host.fail.quality",
+  connection: "host.fail.connection",
+  room: "host.fail.room",
 };
 
 type ServerErrorCode = Extract<
@@ -20,18 +21,18 @@ type ServerErrorCode = Extract<
   { type: "error" }
 >["code"];
 
-const HOST_SERVER_ERROR_NOTICE: Record<ServerErrorCode, string> = {
-  AUTH_REQUIRED: "站点访问已失效，请重新验证",
-  INVALID_MESSAGE: "页面版本已更新，请刷新后重试",
-  INVALID_TOKEN: "分享凭证已失效，请重新创建房间",
-  ROOM_NOT_FOUND: "房间不存在或已过期",
-  ROOM_ACCESS_DENIED: "当前操作没有权限",
-  ROOM_EXPIRED: "房间已过期，请重新创建",
-  ROOM_FULL: "房间已满",
-  HOST_ALREADY_CONNECTED: "此房间已在另一个页面中分享",
-  PEER_NOT_FOUND: "对应的观看连接已经离开",
-  FORBIDDEN: "当前操作不可用",
-  SERVER_ERROR: "服务暂时不可用，请稍后重试",
+const HOST_SERVER_ERROR_NOTICE: Record<ServerErrorCode, CopyKey> = {
+  AUTH_REQUIRED: "gate.expired",
+  INVALID_MESSAGE: "host.terminated.stale",
+  INVALID_TOKEN: "host.err.invalidToken",
+  ROOM_NOT_FOUND: "viewer.msg.notFound",
+  ROOM_ACCESS_DENIED: "host.err.accessDenied",
+  ROOM_EXPIRED: "host.err.roomExpired",
+  ROOM_FULL: "join.full",
+  HOST_ALREADY_CONNECTED: "host.err.alreadyConnected",
+  PEER_NOT_FOUND: "host.err.peerGone",
+  FORBIDDEN: "host.err.forbidden",
+  SERVER_ERROR: "host.err.serverError",
 };
 
 export function hostActionErrorNotice(
@@ -44,20 +45,20 @@ export function hostActionErrorNotice(
   ) {
     switch (error.name) {
       case "NotAllowedError":
-        return "屏幕选择已取消或没有共享权限";
+        return say("host.capture.cancelled");
       case "NotFoundError":
-        return "没有可用的屏幕分享来源";
+        return say("host.capture.noSource");
       case "NotReadableError":
-        return "浏览器暂时无法读取所选分享来源";
+        return say("host.capture.readFailed");
       case "SecurityError":
-        return "当前页面无法启动屏幕分享";
+        return say("host.capture.unavailable");
     }
   }
-  return HOST_ACTION_FALLBACK[action];
+  return say(HOST_ACTION_FALLBACK[action]);
 }
 
 export function hostServerErrorNotice(code: ServerErrorCode): string {
-  return HOST_SERVER_ERROR_NOTICE[code];
+  return say(HOST_SERVER_ERROR_NOTICE[code]);
 }
 
 export function sourceSwitchNotice({
@@ -70,23 +71,23 @@ export function sourceSwitchNotice({
   sfuWarning: string | null;
 }): string {
   const peerWarning =
-    failedPeerCount > 0 ? "部分观看者正在重新连接" : null;
+    failedPeerCount > 0 ? say("host.notice.reconnecting") : null;
   if (!sfuReplaced) {
-    return [
-      sfuWarning ?? "SFU 分享来源未切换成功，正在恢复观看连接",
+    const parts = [
+      sfuWarning ?? say("host.notice.sfuRecovering"),
       peerWarning,
-    ]
-      .filter((message): message is string => message !== null)
-      .join("；");
+    ].filter((message): message is string => message !== null);
+    return joinSentences(parts);
   }
   if (sfuWarning) {
-    return [sfuWarning, peerWarning]
-      .filter((message): message is string => message !== null)
-      .join("；");
+    const parts = [sfuWarning, peerWarning].filter(
+      (message): message is string => message !== null,
+    );
+    return joinSentences(parts);
   }
   return peerWarning
-    ? `分享来源已切换，但${peerWarning}`
-    : "分享来源已切换";
+    ? say("host.notice.sourceSwitch.partial", { warning: peerWarning })
+    : say("host.notice.sourceSwitch.ok");
 }
 
 export function shouldPauseLocalPreview(
diff --git a/src/client/sfu/publisher.ts b/src/client/sfu/publisher.ts
index f686fdf..bcda39f 100644
--- a/src/client/sfu/publisher.ts
+++ b/src/client/sfu/publisher.ts
@@ -1,3 +1,4 @@
+import { say } from "../ui/copy";
 import type {
   LocalTrackPublication,
   Room,
@@ -440,7 +441,7 @@ export class SfuPublisher {
         if (!this.owns(room, generation)) {
           return false;
         }
-        const failureWarning = "切换 SFU 分享来源失败";
+        const failureWarning = say("host.fail.sfuSwitch");
 
         // A rejected publish/unpublish may have changed server state without
         // returning enough ownership information to undo it safely.
@@ -591,7 +592,7 @@ export class SfuPublisher {
             return false;
           }
           videoSucceeded = false;
-          const failureWarning = "应用 SFU 发送参数失败";
+          const failureWarning = say("host.fail.sfuParams");
           try {
             const rolledBack = await configurePublishedVideo(
               video,
@@ -1268,7 +1269,7 @@ function retainPublishedAudioOptions(
 }
 
 function audioSenderFailureWarning(_error: unknown): string {
-  return "应用 SFU 音频发送参数失败";
+  return say("host.fail.sfuAudioParams");
 }
 
 function mergeQualityWarnings(...warnings: Array<string | null>): string | null {
@@ -1332,7 +1333,7 @@ async function safeDisconnect(room: Room): Promise<void> {
 function requiredVideoTrack(stream: MediaStream): MediaStreamTrack {
   const track = stream.getVideoTracks()[0];
   if (!track) {
-    throw new Error("屏幕共享没有视频轨道");
+    throw new Error(say("host.capture.noSource"));
   }
   return track;
 }
diff --git a/src/client/styles.css b/src/client/styles.css
index b1f6bfb..fc6aef4 100644
--- a/src/client/styles.css
+++ b/src/client/styles.css
@@ -1,1582 +1,1147 @@
+/* Screener living-room UI — the production design system.
+   The stage is a TV on the wall, viewers are pawns on the couch, connection
+   state is what the TV shows and what the LEDs say. Copy lives in tooltips
+   and aria in visual mode; text modes add visible captions.
+   Motion serves state changes and control feedback only, and collapses
+   entirely under prefers-reduced-motion. */
+
 :root {
+  color-scheme: light;
+  --wall: #e9f2ee;
+  --wall-2: #dcebe4;
+  --ink: #22303e;
+  --paper: #ffffff;
+  --couch: #e4572e;
+  --couch-dark: #c8492b;
+  --you: #2fa66a;
+  --pawn-1: #3b7dd8;
+  --pawn-2: #efb23f;
+  --pawn-3: #8e6fd8;
+  --pawn-4: #2fa8a0;
+  --pawn-5: #e2698f;
+  --pawn-6: #7d9c3f;
+  --pawn-7: #e08a3c;
+  --pawn-8: #5f7dd8;
+  --action: #2f6fed;
+  --action-deep: #2058c9;
+  --live: #2fa66a;
+  --warn: #d98e04;
+  --danger: #d64541;
+  --lcd: #1d2b22;
+  --lcd-digits: #9de8bf;
+  --stage: #101a2c;
+  --frame: #22303e;
+  --radius: 16px;
+  --spring: cubic-bezier(.3, 1.45, .45, 1);
+  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "PingFang SC",
+    "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
+  --mono: ui-monospace, "Cascadia Mono", SFMono-Regular, Consolas, monospace;
+}
+
+html[data-theme="dark"] {
   color-scheme: dark;
-  font-family:
-    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-    sans-serif;
-  color: #f1f3f1;
-  background: #101310;
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  letter-spacing: 0;
-  --surface: #171b18;
-  --surface-raised: #1d221e;
-  --surface-hover: #252b26;
-  --border: #343a35;
-  --border-strong: #4a514b;
-  --text: #f1f3f1;
-  --muted: #a8afa9;
-  --faint: #747c75;
-  --green: #45d483;
-  --green-strong: #2fbd70;
-  --green-soft: #173526;
-  --amber: #efb84e;
-  --amber-soft: #3b2e16;
-  --red: #f06b6b;
-  --red-soft: #3c1d1d;
+  --wall: #141e29;
+  --wall-2: #0e1620;
+  --ink: #dde8f3;
+  --paper: #22303e;
+  --frame: #0a111a;
+  --action: #4a84f2;
+  --action-deep: #3a70d8;
+  --live: #3fb97a;
+  --warn: #e8a33d;
+  --danger: #e25a52;
+  --lcd: #0d1611;
 }
 
-* {
-  box-sizing: border-box;
-}
+* { box-sizing: border-box; }
+[hidden] { display: none !important; }
 
-html,
-body,
-#root {
-  min-width: 0;
-  min-height: 100%;
-  margin: 0;
-}
+html, body, #root { margin: 0; min-height: 100%; }
 
 body {
-  min-height: 100vh;
-  min-height: 100dvh;
-  background: #101310;
+  background: var(--wall);
+  color: var(--ink);
+  font-family: var(--font);
+  font-size: 15px;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  transition: background-color 300ms ease, color 300ms ease;
 }
 
-button,
-input,
-select {
-  font: inherit;
-  letter-spacing: 0;
-}
+button, input, select { font: inherit; color: inherit; }
+button { cursor: pointer; }
+button:disabled { cursor: not-allowed; opacity: 0.4; }
+h1, h2, h3, p, dl, dd, dt { margin: 0; }
+ul { margin: 0; padding: 0; list-style: none; }
 
-button {
-  color: inherit;
-}
-
-button:focus-visible,
-input:focus-visible,
-select:focus-visible,
-a:focus-visible {
-  outline: 2px solid var(--green);
+:focus-visible {
+  outline: 3px solid var(--action);
   outline-offset: 2px;
-}
-
-button:disabled {
-  cursor: not-allowed;
-  opacity: 0.45;
-}
-
-.app-shell {
-  min-height: 100vh;
-  min-height: 100dvh;
-  background: #101310;
-}
-
-.app-header {
-  position: sticky;
-  z-index: 10;
-  top: 0;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-height: 58px;
-  padding: 9px clamp(16px, 3vw, 40px);
-  border-bottom: 1px solid var(--border);
-  background: rgba(16, 19, 16, 0.96);
-  backdrop-filter: blur(12px);
-}
-
-.brand {
-  display: inline-flex;
-  gap: 10px;
-  align-items: center;
-  color: var(--text);
-  font-size: 16px;
-  font-weight: 700;
-  text-decoration: none;
-}
-
-.brand-mark {
-  display: grid;
-  width: 34px;
-  height: 34px;
-  place-items: center;
-  border: 1px solid #326645;
-  border-radius: 6px;
-  color: var(--green);
-  background: #14271b;
-}
-
-.header-status {
-  display: flex;
-  min-width: 112px;
-  justify-content: flex-end;
-}
-
-.access-workspace {
-  display: grid;
-  min-height: calc(100dvh - 58px);
-  padding: 24px 16px;
-  place-items: center;
-}
-
-.access-workspace-full {
-  min-height: 100vh;
-  min-height: 100dvh;
-}
-
-.access-panel {
-  display: grid;
-  width: min(360px, 100%);
-  gap: 18px;
-  padding: 22px;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  background: var(--surface);
-}
-
-.access-loading {
-  display: flex;
-  gap: 9px;
-  align-items: center;
-  color: var(--muted);
-  font-size: 13px;
-}
-
-.access-error {
-  color: #ff9797;
-  font-size: 13px;
-  line-height: 1.45;
-}
-
-.spin {
-  animation: spin 0.9s linear infinite;
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.host-workspace {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 370px;
-  width: min(1500px, 100%);
-  min-height: calc(100dvh - 58px);
-  margin: 0 auto;
-}
-
-.broadcast-area {
-  min-width: 0;
-  padding: 28px clamp(18px, 3vw, 42px) 40px;
-}
-
-.section-heading,
-.viewer-title-row {
-  display: flex;
-  min-height: 48px;
-  gap: 12px;
-  align-items: flex-start;
-  justify-content: space-between;
-  margin-bottom: 16px;
-}
-
-.title-line {
-  display: flex;
-  min-width: 0;
-  flex-wrap: wrap;
-  gap: 8px 10px;
-  align-items: center;
-}
-
-.room-code {
-  display: inline-flex;
-  min-width: 0;
-  height: 32px;
-  align-items: center;
-  gap: 6px;
-  overflow: hidden;
-  padding-left: 9px;
-  border: 1px solid #326645;
-  border-radius: 6px;
-  color: var(--green);
-  background: #14271b;
-}
-
-.room-code-label {
-  color: var(--muted);
-  font-size: 11px;
-  white-space: nowrap;
-}
-
-.room-code strong {
-  overflow: hidden;
-  color: var(--text);
-  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
-  font-size: 14px;
-  font-variant-numeric: tabular-nums;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.room-code-actions {
-  display: inline-flex;
-  height: 30px;
-  flex: 0 0 auto;
-}
-
-.room-code-copy {
-  display: grid;
-  width: 31px;
-  height: 30px;
-  flex: 0 0 31px;
-  padding: 0;
-  place-items: center;
-  border: 0;
-  border-left: 1px solid #326645;
-  color: var(--green);
-  background: transparent;
-  cursor: pointer;
-}
-
-.room-code-copy:hover {
-  color: var(--text);
-  background: var(--green-soft);
-}
-
-.room-code-copy.is-failed {
-  color: var(--red);
-  background: var(--red-soft);
-}
-
-.room-code-copy:focus-visible {
-  outline: 0;
-  box-shadow: inset 0 0 0 2px var(--green);
+  border-radius: 8px;
 }
 
 .visually-hidden {
   position: absolute;
-  width: 1px;
-  height: 1px;
+  width: 1px; height: 1px;
   overflow: hidden;
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
   white-space: nowrap;
 }
 
-h1,
-h2,
-h3,
-p {
-  margin: 0;
-}
+/* ---------- header ---------- */
 
-h1 {
-  font-size: 22px;
-  line-height: 1.25;
-}
-
-h2 {
-  font-size: 15px;
-  line-height: 1.3;
-}
-
-h3 {
-  font-size: 14px;
-  line-height: 1.3;
-}
-
-.section-meta {
-  min-height: 20px;
-  margin-top: 4px;
-  color: var(--muted);
-  font-size: 13px;
-  line-height: 20px;
-}
-
-.broadcast-actions {
+.lr-top {
   display: flex;
-  gap: 8px;
   align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px clamp(16px, 4vw, 44px) 6px;
 }
 
-.video-stage {
+.lr-brand {
+  display: grid;
+  width: 44px; height: 44px;
+  place-items: center;
+  border: 2.5px solid var(--ink);
+  border-radius: 14px;
+  background: var(--paper);
+  color: var(--ink);
+  transition: background 160ms ease, color 160ms ease, transform 160ms var(--spring);
+}
+.lr-brand:hover { background: var(--ink); color: var(--paper); }
+.lr-brand:active { transform: scale(.92); }
+
+.lr-top-right { display: inline-flex; gap: 10px; align-items: center; }
+
+/* LED state strip */
+.lr-leds {
+  display: inline-flex;
+  gap: 7px;
+  align-items: center;
+  padding: 8px 12px;
+  border-radius: 999px;
+  background: var(--wall-2);
+}
+.lr-leds i {
+  width: 9px; height: 9px;
+  border-radius: 50%;
+  background: #b7c6bf;
+  transition: background 300ms ease;
+}
+.lr-leds[data-state="live"] i { background: var(--live); opacity: .35; }
+.lr-leds[data-state="live"] i:first-child { opacity: 1; animation: lr-breathe 2.8s ease-in-out infinite; }
+.lr-leds[data-state="busy"] i { animation: lr-chase 1s ease-in-out infinite; background: var(--action); }
+.lr-leds[data-state="busy"] i:nth-child(2) { animation-delay: .15s; }
+.lr-leds[data-state="busy"] i:nth-child(3) { animation-delay: .3s; }
+.lr-leds[data-state="warn"] i { background: var(--warn); animation: lr-blink 1.1s ease-in-out infinite; }
+.lr-leds[data-state="bad"] i { background: var(--danger); }
+.lr-leds-label { margin-left: 4px; font-size: 11.5px; font-weight: 700; opacity: .8; white-space: nowrap; }
+
+@keyframes lr-breathe { 50% { opacity: .55; } }
+@keyframes lr-chase { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
+@keyframes lr-blink { 50% { opacity: .3; } }
+
+/* language + theme controls */
+.lr-lang {
+  display: inline-flex;
+  gap: 4px;
+  padding: 4px;
+  border: 2.5px solid var(--ink);
+  border-radius: 999px;
+  background: var(--paper);
+}
+.lr-lang button {
+  display: inline-grid;
+  min-width: 38px;
+  height: 34px;
+  place-items: center;
+  padding: 0 9px;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--ink);
+  font-size: 12px;
+  font-weight: 700;
+  opacity: .55;
+  transition: opacity 120ms ease, transform 140ms var(--spring);
+}
+.lr-lang button:hover:not(.is-selected) { opacity: .85; }
+.lr-lang button:active { transform: scale(.9); }
+.lr-lang button.is-selected { background: var(--ink); color: var(--paper); opacity: 1; }
+
+/* ---------- room layout ---------- */
+
+/* overflow-x: clip keeps invisible absolutely-positioned decor (the resting
+   opacity:0 comic-tip panels, up to 320px wide and centered on triggers near
+   the viewport edge) out of the document's scrollable overflow — at narrow
+   widths they otherwise inflate scrollWidth and open a blank horizontal
+   gutter. clip (unlike hidden) creates no scroll container and leaves
+   overflow-y: visible untouched. Open panels are edge-aligned via
+   is-start/is-end, so nothing visible is cut in practice. */
+.lr-app { min-height: 100dvh; display: flex; flex-direction: column; overflow-x: clip; }
+.lr-room {
+  flex: 1;
+  width: min(1180px, 100%);
+  min-width: 0;
+  margin: 0 auto;
+  padding: 8px clamp(14px, 3.5vw, 40px) 64px;
+}
+.lr-scene { position: relative; min-width: 0; }
+
+/* ---------- the TV ---------- */
+
+.lr-tv {
+  position: relative;
+  width: min(880px, 100%);
+  margin: 0 auto;
+  padding: 12px 12px 0;
+  border: 3px solid var(--frame);
+  border-radius: 26px 26px 20px 20px;
+  background: var(--frame);
+}
+.lr-tv-screen {
   position: relative;
-  width: 100%;
   overflow: hidden;
   aspect-ratio: 16 / 9;
-  border: 1px solid var(--border);
+  border-radius: 14px 14px 8px 8px;
+  background: var(--stage);
+}
+.lr-tv-screen video { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--stage); }
+.lr-tv-screen.has-entry { aspect-ratio: 16 / 9; }
+.lr-tv-screen.is-on { animation: lr-crt .5s cubic-bezier(.2, .8, .3, 1) both; }
+.lr-tv-chin {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 26px;
+}
+.lr-tv-chin i {
+  width: 8px; height: 8px;
+  border-radius: 50%;
+  background: #57697f;
+  transition: background 300ms ease;
+}
+.lr-tv-chin i.is-on { background: var(--live); }
+.lr-tv-chin i.is-warn { background: var(--warn); animation: lr-blink 1.1s infinite; }
+.lr-tv-chin i.is-bad { background: var(--danger); }
+.lr-tv-chin i.is-busy { background: var(--action); animation: lr-blink .8s infinite; }
+
+@keyframes lr-crt {
+  0% { filter: brightness(3); transform: scaleY(.012); }
+  55% { filter: brightness(1.6); transform: scaleY(1.02); }
+  100% { filter: brightness(1); transform: scaleY(1); }
+}
+
+.lr-shelf {
+  width: min(640px, 84%);
+  height: 10px;
+  margin: 14px auto 0;
+  border: 3px solid var(--ink);
   border-radius: 6px;
-  background: #050706;
+  background: var(--paper);
 }
 
-.video-stage video {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  background: #050706;
-}
-
-.stage-placeholder,
-.stage-overlay {
+/* TV overlays */
+.lr-tv-overlay {
   position: absolute;
   inset: 0;
   display: grid;
-  gap: 10px;
   place-content: center;
   justify-items: center;
-  color: var(--faint);
-  font-size: 14px;
-}
-
-.stage-overlay {
-  width: 100%;
-  padding: 0;
-  border: 0;
-  color: var(--text);
-  background: rgba(5, 7, 6, 0.72);
-  font: inherit;
+  gap: 14px;
+  padding: 18px;
+  color: #dfe8f2;
   text-align: center;
-  pointer-events: none;
 }
+.lr-tv-overlay.is-dim { background: rgba(10, 16, 28, .62); }
 
-.stage-overlay.is-interactive {
-  cursor: pointer;
-  pointer-events: auto;
-}
-
-.stage-overlay.is-interactive:hover {
-  background: rgba(5, 7, 6, 0.8);
-}
-
-.stage-overlay.is-interactive:focus-visible {
-  outline: 2px solid var(--green);
-  outline-offset: -3px;
-}
-
-.stage-entry {
-  grid-template-columns: minmax(0, 1fr);
-  grid-template-rows: minmax(0, 1fr) 44px minmax(0, 1fr);
-  gap: 0;
-  width: 100%;
-}
-
-.stage-entry .stage-status {
-  align-self: end;
-  margin-bottom: 13px;
-}
-
-.stage-status {
-  color: var(--muted);
-}
-
-.entry-actions {
+.lr-tv-big {
   display: grid;
-  grid-row: 2;
-  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
-  width: min(520px, calc(100% - 20px));
-  gap: 8px;
-  align-items: stretch;
-}
-
-.entry-action {
-  display: inline-flex;
-  min-width: 0;
-  height: 44px;
-  min-height: 44px;
-  gap: 7px;
-  align-items: center;
-  justify-content: center;
-  padding: 0 9px;
-  border: 1px solid #326645;
-  border-radius: 6px;
-  color: var(--text);
-  background: #14271b;
-  font-size: 13px;
-  font-weight: 700;
-  text-decoration: none;
-  white-space: nowrap;
-  cursor: pointer;
-}
-
-.entry-action svg {
-  flex: 0 0 auto;
-  color: var(--green);
-}
-
-.entry-action:hover {
-  border-color: var(--green-strong);
-  background: var(--green-soft);
-}
-
-.entry-divider {
-  display: grid;
-  grid-template-rows: minmax(3px, 1fr) auto minmax(3px, 1fr);
-  gap: 3px;
-  justify-items: center;
-  align-items: center;
-  color: var(--faint);
-  font-size: 11px;
-}
-
-.entry-divider::before,
-.entry-divider::after {
-  width: 1px;
-  height: 100%;
-  background: var(--border-strong);
-  content: "";
-}
-
-.room-code-entry.is-inline {
-  display: grid;
-  grid-row: 3;
-  min-width: 0;
-  width: min(520px, calc(100% - 20px));
-  grid-template-columns: minmax(0, 1fr) 44px;
-  gap: 8px;
-  align-self: start;
-  margin-top: 13px;
-}
-
-.room-code-entry.is-inline .access-error {
-  grid-column: 1 / -1;
-}
-
-.room-code-submit {
-  width: 44px;
-  min-height: 44px;
-  grid-column: 2;
-  grid-row: 1;
-}
-
-.capture-strip {
-  display: flex;
-  min-height: 34px;
-  gap: 8px 18px;
-  align-items: center;
-  padding: 7px 2px;
-  color: var(--muted);
-  font-size: 12px;
-  font-variant-numeric: tabular-nums;
-}
-
-.notice {
-  display: flex;
-  min-height: 38px;
-  align-items: center;
-  margin-top: 10px;
-  padding: 8px 10px;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  color: var(--muted);
-  background: var(--surface);
-  font-size: 13px;
-  line-height: 1.4;
-}
-
-.notice-warning {
-  gap: 8px;
-  border-color: #6a5224;
-  color: #f3c86f;
-  background: var(--amber-soft);
-}
-
-.notice-error {
-  border-color: #713838;
-  color: #ff9797;
-  background: var(--red-soft);
-}
-
-.setup-controls {
-  margin-top: 22px;
-}
-
-.quality-controls {
-  min-width: 0;
-}
-
-.advanced-quality {
-  margin-top: 10px;
-  border-top: 1px solid var(--border);
-}
-
-.advanced-quality summary {
-  width: fit-content;
-  padding-top: 10px;
-  color: var(--muted);
-  font-size: 13px;
-  cursor: pointer;
-}
-
-.advanced-quality summary:hover {
-  color: var(--text);
-}
-
-.advanced-quality-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 14px 18px;
-  align-items: end;
-  padding-top: 14px;
-}
-
-.advanced-quality-grid > label > span {
-  display: block;
-  margin-bottom: 7px;
-  color: var(--muted);
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.advanced-quality-grid select {
-  width: 100%;
-  height: 40px;
-  padding: 0 10px;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  color: var(--text);
-  background: var(--surface);
-}
-
-.range-control {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 92px;
-  min-height: 40px;
-  gap: 10px;
-  align-items: center;
-}
-
-.range-control input {
-  width: 100%;
-  accent-color: var(--green);
-}
-
-.range-control output {
-  color: var(--text);
-  font-size: 12px;
-  font-variant-numeric: tabular-nums;
-  text-align: right;
-}
-
-.quality-priority {
-  grid-column: 1 / -1;
-}
-
-.quality-priority .segmented-control {
-  height: 54px;
-}
-
-.quality-priority .segmented-control button {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  align-items: center;
-  justify-content: center;
-  line-height: 1.1;
-}
-
-.quality-priority .segmented-control small {
-  color: var(--faint);
-  font-size: 10px;
-  font-weight: 500;
-}
-
-.quality-priority .segmented-control button.is-selected small {
-  color: #a9cdb7;
-}
-
-.route-policy-controls {
-  display: grid;
-  grid-column: 1 / -1;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 8px;
-}
-
-.route-policy-controls legend {
-  grid-column: 1 / -1;
-}
-
-.route-policy-controls label {
-  display: flex;
-  min-width: 0;
-  gap: 9px;
-  align-items: flex-start;
-  padding: 10px;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  cursor: pointer;
-}
-
-.route-policy-controls input {
-  flex: 0 0 auto;
-  margin: 2px 0 0;
-  accent-color: var(--green-strong);
-}
-
-.route-policy-controls span {
-  display: grid;
-  min-width: 0;
-  gap: 3px;
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.route-policy-controls small {
-  color: var(--faint);
-  font-size: 10px;
-  font-weight: 500;
-}
-
-.control-note {
-  margin: 8px 0 0;
-  color: var(--muted);
-  font-size: 13px;
-}
-
-.connection-details-toggle {
-  display: inline-flex;
-  min-height: 44px;
-  max-width: 100%;
-  gap: 9px;
-  align-items: center;
-  margin-top: 8px;
-  padding: 0 2px;
-  color: var(--muted);
-  font-size: 13px;
-}
-
-.connection-details-toggle:hover {
-  color: var(--text);
-}
-
-.connection-details-toggle > label {
-  display: inline-flex;
-  gap: 9px;
-  align-items: center;
-  cursor: pointer;
-}
-
-.connection-details-toggle input {
-  width: 18px;
-  height: 18px;
-  flex: 0 0 18px;
-  margin: 0;
-  accent-color: var(--green-strong);
-  cursor: pointer;
-}
-
-.control-group {
-  min-width: 0;
-  margin: 0;
-  padding: 0;
-  border: 0;
-}
-
-.control-group legend,
-.token-field > span:first-child,
-.field-label {
-  display: block;
-  margin-bottom: 7px;
-  color: var(--muted);
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.segmented-control {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  height: 42px;
-  overflow: hidden;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  background: var(--surface);
-}
-
-.segmented-control button {
-  min-width: 0;
-  padding: 0 10px;
-  border: 0;
-  border-right: 1px solid var(--border);
-  color: var(--muted);
-  background: transparent;
-  cursor: pointer;
-  white-space: nowrap;
-}
-
-.segmented-control button:last-child {
-  border-right: 0;
-}
-
-.segmented-control button:hover:not(:disabled) {
-  color: var(--text);
-  background: var(--surface-hover);
-}
-
-.segmented-control button.is-selected {
-  color: #dff9e9;
-  background: var(--green-soft);
-  box-shadow: inset 0 -2px var(--green);
-}
-
-.token-field {
-  min-width: 0;
-}
-
-.input-with-icon {
-  display: flex;
-  height: 42px;
-  align-items: center;
-  padding: 0 12px;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  color: var(--faint);
-  background: var(--surface);
-}
-
-.input-with-icon:focus-within {
-  border-color: var(--green);
-}
-
-.input-with-icon input {
-  min-width: 0;
-  flex: 1;
-  height: 100%;
-  padding: 0 0 0 9px;
-  border: 0;
-  outline: 0;
-  color: var(--text);
-  background: transparent;
-}
-
-.password-visibility-action {
-  display: inline-flex;
-  width: 32px;
-  height: 32px;
-  flex: 0 0 32px;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  border: 0;
-  color: var(--muted);
-  background: transparent;
-  cursor: pointer;
-}
-
-.password-visibility-action:hover:not(:disabled) {
-  color: var(--text);
-}
-
-.button,
-.icon-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  cursor: pointer;
-}
-
-.button {
-  min-height: 42px;
-  gap: 8px;
-  padding: 0 15px;
-  font-size: 13px;
-  font-weight: 700;
-  white-space: nowrap;
-}
-
-.button-primary {
-  border-color: var(--green-strong);
-  color: #06140c;
-  background: var(--green);
-}
-
-.button-primary:hover:not(:disabled) {
-  background: #59df91;
-}
-
-.button-secondary {
-  border-color: var(--border-strong);
-  color: var(--text);
-  background: var(--surface-raised);
-}
-
-.button-secondary:hover:not(:disabled) {
-  background: var(--surface-hover);
-}
-
-.button-danger {
-  border-color: #7c3d3d;
-  color: #ffaaaa;
-  background: var(--red-soft);
-}
-
-.button-danger:hover:not(:disabled) {
-  border-color: var(--red);
-}
-
-.icon-button {
-  width: 40px;
-  height: 40px;
-  flex: 0 0 40px;
-  padding: 0;
-  color: var(--muted);
-  background: var(--surface-raised);
-}
-
-.icon-button:hover:not(:disabled) {
-  border-color: var(--border-strong);
-  color: var(--text);
-  background: var(--surface-hover);
-}
-
-.invite-bar {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  min-width: 0;
-  gap: 0;
-  align-items: start;
-  margin-top: 18px;
-  padding: 11px 12px;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  background: var(--surface);
-}
-
-.invite-primary,
-.room-entry-policy {
-  min-width: 0;
-}
-
-.room-entry-policy {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
-  gap: 12px;
-  align-items: center;
-  margin-top: 12px;
-  padding-top: 12px;
-  border-top: 1px solid var(--border);
-}
-
-.invite-heading,
-.invite-heading-copy,
-.invite-icon-actions {
-  display: flex;
-  min-width: 0;
-  align-items: center;
-}
-
-.invite-heading {
-  min-height: 40px;
-  justify-content: space-between;
-  gap: 10px;
-}
-
-.invite-heading-copy {
-  align-items: baseline;
-  gap: 6px;
-}
-
-.invite-icon-actions {
-  flex: 0 0 auto;
-  gap: 6px;
-}
-
-.invite-icon-action.is-danger {
-  color: var(--red);
-}
-
-.invite-copy-row {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  min-width: 0;
-  gap: 6px;
-  align-items: start;
-  margin-top: 8px;
-}
-
-.invite-copy-action {
-  min-height: 40px;
-  white-space: nowrap;
-}
-
-.invite-status {
-  color: var(--muted);
-  font-size: 12px;
-}
-
-.room-entry-heading {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-  justify-content: flex-start;
-}
-
-.room-policy-control {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  width: 100%;
-}
-
-.room-policy-control button {
-  display: inline-flex;
-  flex: 1;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-}
-
-.room-policy-control .policy-private.is-selected {
-  color: #f3c86f;
-  background: var(--amber-soft);
-  box-shadow: inset 0 -2px var(--amber);
-}
-
-.viewer-password-control {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 40px;
-  grid-column: 1 / -1;
-  width: 100%;
-  gap: 6px;
-  align-items: center;
-  padding-top: 10px;
-  border-top: 1px solid var(--border);
-}
-
-.viewer-password-control.has-password {
-  grid-template-columns: minmax(0, 1fr) 40px 40px;
-}
-
-.viewer-password-control > label {
-  grid-column: 1 / -1;
-  color: var(--muted);
-  font-size: 12px;
-}
-
-.access-password-retry {
-  display: grid;
-  min-width: 0;
-  gap: 12px;
-}
-
-.viewer-password-control .input-with-icon {
-  min-width: 0;
-}
-
-.viewer-password-control input {
-  min-width: 0;
-  width: 100%;
-}
-
-.room-entry-heading .field-label {
-  margin-bottom: 0;
-}
-
-.invite-url {
-  display: flex;
-  min-width: 0;
-  min-height: 40px;
-  align-items: center;
-  padding: 7px 9px;
-  border: 1px solid var(--border);
-  border-radius: 5px;
-  color: var(--text);
-  background: var(--surface-raised);
-  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
-  font-size: 12px;
-  overflow-wrap: anywhere;
-  white-space: normal;
-}
-
-.viewer-panel {
-  min-width: 0;
-  padding: 28px 18px 40px;
-  border-left: 1px solid var(--border);
-  background: #131613;
-}
-
-.viewer-panel-heading,
-.viewer-panel-heading > div,
-.viewer-item-heading,
-.viewer-item-heading > div {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.viewer-panel-heading {
-  height: 34px;
-  margin-bottom: 12px;
-  color: var(--muted);
-}
-
-.viewer-panel-heading > div {
-  gap: 8px;
-}
-
-.viewer-panel-heading span {
-  color: var(--faint);
-  font-size: 12px;
-}
-
-.topology-view {
-  margin-bottom: 14px;
-  border-block: 1px solid var(--border);
-}
-.topology-tree,
-.topology-tree ul {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-.topology-tree ul {
-  margin-left: 9px;
-  padding-left: 17px;
-  border-left: 1px solid var(--border-strong);
-}
-.topology-tree li {
-  padding: 4px 0;
-}
-.topology-node {
-  display: flex;
-  min-width: 0;
-  align-items: center;
-  gap: 7px;
-  color: var(--text);
-  font-size: 12px;
-}
-.topology-node strong {
-  min-width: 0;
-  overflow-wrap: anywhere;
-}
-.topology-edge,
-.topology-role {
-  flex: 0 0 32px;
-  color: var(--faint);
-  font-size: 10px;
-  font-weight: 700;
-}
-.topology-pending {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 5px 9px;
-  margin-top: 7px;
-  padding-top: 8px;
-  border-top: 1px solid var(--border);
-  color: var(--faint);
-  font-size: 11px;
-}
-
-.viewer-list {
-  display: grid;
-  gap: 10px;
-}
-
-.viewer-item {
-  min-width: 0;
-  padding: 13px;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  background: var(--surface);
-}
-
-.viewer-item-heading {
-  min-height: 30px;
-  gap: 8px;
-  margin-bottom: 12px;
-}
-
-.viewer-item-heading > div {
-  min-width: 0;
-  gap: 8px;
-}
-
-.viewer-item-heading h3 {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.viewer-transport-heading {
-  display: flex;
-  min-height: 28px;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  margin-bottom: 8px;
-  color: var(--faint);
-  font-size: 11px;
-}
-
-.empty-viewers {
-  display: grid;
-  min-height: 150px;
-  gap: 9px;
-  place-content: center;
-  justify-items: center;
-  border: 1px dashed var(--border);
-  border-radius: 6px;
-  color: var(--faint);
-  font-size: 13px;
-}
-
-.status-badge,
-.diagnostic-badge {
-  display: inline-flex;
-  min-height: 24px;
-  align-items: center;
-  gap: 6px;
-  border: 1px solid var(--border);
-  border-radius: 999px;
-  padding: 3px 8px;
-  font-size: 11px;
-  font-weight: 650;
-  line-height: 1;
-  white-space: nowrap;
-}
-
-.status-dot {
-  width: 6px;
-  height: 6px;
+  width: 84px; height: 84px;
+  place-items: center;
+  border: 3px solid #dfe8f2;
   border-radius: 50%;
-  background: currentColor;
+  color: #fff;
+  background: rgba(255, 255, 255, .07);
+  transition: transform 180ms var(--spring), background 160ms ease;
+}
+.lr-tv-big:hover { transform: scale(1.05); }
+.lr-tv-big:active { transform: scale(.94); }
+.lr-tv-big.is-action { border-color: var(--action); background: var(--action); cursor: pointer; }
+.lr-tv-big.is-action:hover { background: var(--action-deep); }
+.lr-tv-big.is-ripple { animation: lr-ripple 2s ease-out infinite; }
+@keyframes lr-ripple {
+  0% { box-shadow: 0 0 0 0 rgba(47, 111, 237, .45); }
+  70% { box-shadow: 0 0 0 22px rgba(47, 111, 237, 0); }
+  100% { box-shadow: 0 0 0 0 rgba(47, 111, 237, 0); }
 }
 
-.status-good {
-  border-color: #2d6844;
-  color: #78e6a4;
-  background: var(--green-soft);
+.lr-tv-msg {
+  font-size: 14.5px;
+  font-weight: 600;
+  color: #dfe8f2;
+  text-shadow: 0 1px 8px rgba(0, 0, 0, .65);
 }
 
-.status-warning,
-.diagnostic-badge {
-  border-color: #6a5224;
-  color: #f3c86f;
-  background: var(--amber-soft);
+.lr-entry-text { display: grid; gap: 6px; margin-bottom: 4px; }
+.lr-entry-text h1 { font-size: clamp(19px, 2.6vw, 24px); font-weight: 800; color: #f2efe7; letter-spacing: -0.01em; text-wrap: balance; }
+.lr-entry-text p { max-width: 400px; margin: 0 auto; color: #9aa0b0; font-size: 13.5px; text-wrap: balance; }
+.lr-entry-actions { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
+.lr-entry-action { display: grid; justify-items: center; gap: 8px; align-content: start; }
+
+/* static noise while connecting */
+.lr-tv-static {
+  position: absolute;
+  inset: 0;
+  opacity: .55;
+  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Crect width='90' height='90' fill='%230d1526'/%3E%3Crect x='4' y='9' width='5' height='5' fill='%232c3a52'/%3E%3Crect x='26' y='30' width='4' height='4' fill='%231e2a40'/%3E%3Crect x='52' y='12' width='6' height='6' fill='%23364a68'/%3E%3Crect x='70' y='48' width='5' height='5' fill='%23232f47'/%3E%3Crect x='12' y='60' width='6' height='6' fill='%23304058'/%3E%3Crect x='40' y='70' width='4' height='4' fill='%231e2a40'/%3E%3Crect x='64' y='74' width='5' height='5' fill='%232c3a52'/%3E%3Crect x='80' y='20' width='4' height='4' fill='%23304058'/%3E%3Crect x='34' y='50' width='5' height='5' fill='%23232f47'/%3E%3Crect x='8' y='36' width='4' height='4' fill='%23364a68'/%3E%3Crect x='48' y='40' width='4' height='4' fill='%232c3a52'/%3E%3Crect x='76' y='64' width='4' height='4' fill='%231e2a40'/%3E%3C/svg%3E");
+  animation: lr-static .36s steps(3) infinite;
+}
+@keyframes lr-static {
+  0% { background-position: 0 0; }
+  33% { background-position: 28px 14px; }
+  66% { background-position: -18px 26px; }
+  100% { background-position: 12px -20px; }
 }
 
-.status-danger {
-  border-color: #713838;
-  color: #ff9797;
-  background: var(--red-soft);
-}
-
-.status-neutral {
-  color: var(--muted);
-  background: var(--surface-raised);
-}
-
-.stats-grid {
+/* storyboard: connection beats */
+.lr-story { display: flex; align-items: center; justify-content: center; gap: 10px; }
+.lr-story-item { display: grid; justify-items: center; gap: 6px; }
+.lr-story-panel {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 10px 14px;
-  margin: 0;
-  font-variant-numeric: tabular-nums;
+  width: 52px; height: 52px;
+  place-items: center;
+  border: 2.5px solid #48597a;
+  border-radius: 14px;
+  color: #7789a8;
+  background: rgba(13, 21, 38, .65);
+  transition: border-color 220ms ease, color 220ms ease;
 }
+.lr-story-panel.is-done { border-color: var(--live); color: var(--live); animation: lr-pop .24s var(--spring); }
+.lr-story-panel.is-now { border-color: var(--action); color: #fff; animation: lr-blink 1s ease-in-out infinite; }
+.lr-story-link { width: 22px; height: 2.5px; border-radius: 2px; background: #48597a; transition: background 220ms ease; }
+.lr-story-link.is-done { background: var(--live); }
+.lr-story-cap { font-size: 10.5px; font-weight: 600; color: #8ea0bd; white-space: nowrap; }
+.lr-story-item.is-done .lr-story-cap { color: var(--live); }
+.lr-story-item.is-now .lr-story-cap { color: #fff; }
 
-.stats-disclosure {
-  min-width: 0;
+/* ---------- couch + pawns ---------- */
+
+.lr-couch {
+  position: relative;
+  width: min(720px, 96%);
+  margin: 22px auto 0;
 }
-
-.stats-detail-actions {
-  display: flex;
-  min-width: 0;
-  align-items: center;
-  gap: 8px;
-  margin-top: 9px;
-  padding-top: 6px;
-  border-top: 1px solid var(--border);
-  color: var(--faint);
-  font-size: 11px;
-}
-
-.stats-detail-actions span {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.stats-detail-toggle.icon-button {
-  width: 32px;
-  height: 32px;
-  flex-basis: 32px;
-  margin-left: auto;
-}
-
-.stats-detail-toggle svg {
-  transition: transform 140ms ease;
-}
-
-.stats-detail-toggle.is-expanded svg {
-  transform: rotate(180deg);
-}
-
-.stats-grid-secondary {
-  margin-top: 10px;
-}
-
-.stats-grid-secondary[hidden] {
-  display: none;
-}
-
-.stats-contract-warning {
-  margin: 10px 0 0;
-  color: var(--amber);
-  font-size: 12px;
-  line-height: 1.45;
-}
-
-.metric {
-  min-width: 0;
-}
-
-.metric dt {
-  overflow: hidden;
-  margin-bottom: 2px;
-  color: var(--faint);
-  font-size: 10px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.metric dd {
-  overflow: hidden;
-  margin: 0;
-  color: #dfe3df;
-  font-size: 12px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.inline-error {
-  margin-top: 10px;
-  overflow-wrap: anywhere;
-  color: #ff9797;
-  font-size: 11px;
-  line-height: 1.4;
-}
-
-.viewer-workspace {
-  width: min(1380px, 100%);
-  margin: 0 auto;
-  padding: 26px clamp(16px, 3vw, 40px) 42px;
-}
-
-.viewer-badges {
+.lr-couch > svg { display: block; width: 100%; height: auto; }
+.lr-pawns {
+  position: absolute;
+  inset: 0 8% auto;
+  top: -16px;
   display: flex;
   flex-wrap: wrap;
-  gap: 8px;
-  justify-content: flex-end;
+  justify-content: center;
+  gap: 2px 10px;
+  padding: 0 12px;
 }
-
-.viewer-name-control {
+.lr-pawn {
+  position: relative;
   display: grid;
-  width: min(100%, 380px);
-  min-height: 40px;
-  grid-template-columns: auto minmax(0, 1fr) 40px;
-  gap: 8px;
-  align-items: center;
-  margin: 8px 0 12px;
-}
-
-.viewer-name-control.is-editing {
-  grid-template-columns: auto minmax(0, 1fr) 40px 40px;
-}
-
-.viewer-name-control:not(.is-editing) {
-  display: inline-flex;
-  width: auto;
-  max-width: 100%;
-}
-
-.viewer-name-control:not(.is-editing) .viewer-name-value {
-  flex: 0 1 auto;
-}
-
-.viewer-name-control label {
-  color: var(--muted);
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.viewer-name-control input {
-  width: 100%;
-  min-width: 0;
-  height: 40px;
-  padding: 0 10px;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  outline: 0;
-  color: var(--text);
-  background: var(--surface);
-}
-
-.viewer-name-control input:focus {
-  border-color: var(--green);
-}
-
-.viewer-name-value {
-  min-width: 0;
-  overflow: hidden;
-  color: var(--text);
-  font-size: 14px;
-  font-weight: 600;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.viewer-name-error {
-  grid-column: 2 / -1;
-  color: #ff9797;
-  font-size: 11px;
-  overflow-wrap: anywhere;
-}
-
-.remote-stage {
-  max-height: calc(100dvh - 250px);
-  margin: 0 auto;
-}
-
-.viewer-status-row {
-  display: grid;
-  width: 100%;
-  min-height: 44px;
-  grid-template-columns: minmax(0, 1fr) 84px;
-  gap: 8px;
-  align-items: center;
-  padding: 4px 0;
-}
-
-.viewer-roster {
-  margin-top: 16px;
-  padding: 14px 0;
-  border-block: 1px solid var(--border);
-}
-
-.viewer-roster-heading {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  margin-bottom: 10px;
-}
-
-.viewer-roster-heading > div {
-  display: flex;
-  min-width: 0;
-  align-items: baseline;
-  gap: 8px;
-}
-
-.viewer-roster-heading h2 {
-  color: var(--muted);
-  font-size: 14px;
-}
-
-.viewer-roster-heading span {
-  color: var(--faint);
-  font-size: 12px;
-}
-
-.viewer-roster .topology-view {
-  max-width: 100%;
-  max-height: min(42vh, 320px);
-  overflow-x: hidden;
-  overflow-y: auto;
-  padding-block: 6px;
-  overscroll-behavior: contain;
-}
-
-.viewer-roster-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 7px 20px;
-  margin: 0;
+  width: 44px;
+  place-items: center;
   padding: 0;
-  list-style: none;
+  border: 0;
+  background: transparent;
+  animation: lr-hop .55s var(--spring) backwards;
+  transition: transform 150ms var(--spring);
+}
+.lr-pawn:hover:not(.is-static) { transform: translateY(-5px) rotate(-4deg); }
+.lr-pawn svg { width: 40px; height: 48px; display: block; }
+.lr-pawn-led {
+  position: absolute;
+  top: 2px; right: 0;
+  width: 10px; height: 10px;
+  border: 2px solid var(--wall);
+  border-radius: 50%;
+  background: var(--live);
+  transition: background 200ms ease;
+}
+.lr-pawn-led.is-wait { background: var(--warn); animation: lr-blink 1.2s infinite; }
+.lr-pawn.is-you::after {
+  content: "";
+  position: absolute;
+  top: -13px; left: 50%;
+  width: 13px; height: 10px;
+  background: var(--you);
+  clip-path: polygon(50% 100%, 0 0, 100% 0);
+  transform: translateX(-50%);
+}
+.lr-pawn.is-you { z-index: 1; }
+.lr-pawn.is-static { cursor: default; }
+.lr-pawn.is-selected { transform: translateY(-5px); }
+.lr-pawn.is-selected::before {
+  content: "";
+  position: absolute;
+  inset: -3px -6px;
+  border: 2.5px solid var(--action);
+  border-radius: 13px;
+}
+.lr-pawn.is-child { width: 34px; margin-left: -8px; align-self: end; }
+.lr-pawn.is-child svg { width: 30px; height: 36px; }
+.lr-pawns.is-crowded { gap: 6px 3px; top: -14px; }
+.lr-pawns.is-crowded .lr-pawn { width: 33px; }
+.lr-pawns.is-crowded .lr-pawn svg { width: 29px; height: 35px; }
+.lr-pawns.is-crowded .lr-pawn-led { width: 8px; height: 8px; }
+.lr-pawn-name {
+  max-width: 58px;
+  margin-top: -4px;
+  padding: 1px 6px;
+  border-radius: 7px;
+  background: var(--paper);
+  color: var(--ink);
+  font-size: 10px;
+  font-weight: 700;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, .12);
+}
+.lr-pawn-name.is-mini { font-size: 9px; max-width: 40px; padding: 0 5px; }
+.lr-couch-empty {
+  position: absolute;
+  inset: -8px 0 auto;
+  display: grid;
+  place-items: center;
+  color: #6f8579;
+  opacity: .85;
+}
+@keyframes lr-hop {
+  0% { transform: translateY(-16px) scale(.7); opacity: 0; }
+  60% { transform: translateY(3px) scale(1.04); opacity: 1; }
+  100% { transform: translateY(0) scale(1); opacity: 1; }
 }
 
-.viewer-roster-list li {
+/* ---------- deck: control rows ---------- */
+
+.lr-deck { width: 100%; min-width: 0; margin-top: 34px; display: grid; gap: 14px; }
+
+.lr-row {
+  display: flex;
   min-width: 0;
-  color: var(--text);
-  font-size: 13px;
-  font-weight: 600;
-  overflow-wrap: anywhere;
+  max-width: 100%;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+  padding: 15px 18px;
+  border: 2.5px solid var(--ink);
+  border-radius: var(--radius);
+  background: var(--paper);
 }
-
-.toolbar-status {
+.lr-row.is-sub { background: var(--wall-2); border-color: transparent; }
+.lr-row-group { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; }
+.lr-group-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
+.lr-spacer { flex: 1; }
+.lr-divider { width: 2.5px; align-self: stretch; border-radius: 2px; background: var(--wall-2); }
+.lr-row.is-sub .lr-divider { background: #c3d4cb; }
+.lr-field-cap { opacity: .55; font-size: 12px; font-weight: 600; }
+.lr-invite-url {
+  min-width: 0;
+  max-width: 340px;
+  overflow: hidden;
+  padding: 7px 10px;
+  border: 1.5px dashed var(--wall-2);
+  border-radius: 8px;
+  background: var(--wall-2);
+  color: var(--ink);
+  font-family: var(--mono);
+  font-size: 11px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  user-select: all;
+}
+html[data-theme="dark"] .lr-invite-url { background: #1a2634; border-color: #33465c; }
+.lr-status-text {
   min-width: 0;
   overflow: hidden;
-  color: var(--muted);
-  font-size: 13px;
+  font-size: 13.5px;
+  font-weight: 600;
+  opacity: .78;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.viewer-status-actions {
+/* LCD room code */
+.lr-lcd {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 12px;
+  border: 3px solid var(--ink);
+  border-radius: 12px;
+  background: var(--lcd);
+  color: var(--lcd-digits);
+  font-family: var(--mono);
+  font-size: 24px;
+  font-weight: 700;
+  letter-spacing: .3em;
+  text-indent: .15em;
+}
+.lr-lcd button {
   display: grid;
-  grid-template-columns: 40px 40px;
-  gap: 4px;
-}
-
-.viewer-status-action,
-.viewer-status-action-placeholder {
-  width: 40px;
-  height: 40px;
-}
-
-.viewer-status-action {
-  border-color: transparent;
-  color: var(--faint);
+  width: 34px; height: 34px;
+  place-items: center;
+  border: 0;
+  border-radius: 8px;
   background: transparent;
+  color: var(--lcd-digits);
+  transition: background 120ms ease;
+}
+.lr-lcd button:hover { background: #ffffff22; }
+.lr-lcd-roll { display: inline-flex; overflow: hidden; }
+.lr-lcd-roll span { display: inline-block; animation: lr-roll .34s var(--spring) both; }
+@keyframes lr-roll { from { transform: translateY(110%); } }
+
+/* ---------- buttons & chips ---------- */
+
+.lr-btn {
+  display: inline-grid;
+  grid-auto-flow: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-width: 52px; height: 52px;
+  padding: 0 14px;
+  border: 2.5px solid var(--ink);
+  border-radius: 15px;
+  background: var(--paper);
+  color: var(--ink);
+  white-space: nowrap;
+  transition: transform 120ms var(--spring), background 120ms ease, box-shadow 160ms ease;
+}
+.lr-btn:hover:not(:disabled) { background: var(--wall-2); transform: translateY(-1px); }
+.lr-btn:active:not(:disabled) { transform: scale(.93); }
+.lr-btn.is-primary { border-color: var(--action); background: var(--action); color: #fff; }
+.lr-btn.is-primary:hover:not(:disabled) { background: var(--action-deep); box-shadow: 0 4px 14px rgba(47, 111, 237, .35); }
+.lr-btn.is-danger { border-color: var(--danger); color: var(--danger); }
+.lr-btn.is-danger:hover:not(:disabled) { background: rgba(214, 69, 65, .1); }
+.lr-btn.is-on { border-color: var(--ink); background: var(--ink); color: var(--paper); }
+.lr-btn .lr-cap { margin-left: 2px; font-size: 12.5px; font-weight: 600; }
+
+.lr-cap { font-size: 12.5px; font-weight: 600; color: inherit; white-space: nowrap; }
+
+.lr-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 9px 14px;
+  border: 2.5px solid var(--ink);
+  border-radius: 10px;
+  background: var(--paper);
+  font-family: var(--mono);
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: .1em;
+  transition: transform 120ms var(--spring), background 120ms ease;
+}
+.lr-chip:hover:not(:disabled) { background: var(--wall-2); }
+.lr-chip:active:not(:disabled) { transform: scale(.94); }
+.lr-chip.is-selected { background: var(--ink); color: var(--paper); animation: lr-pop .2s var(--spring); }
+.lr-chip .lr-cap { font-family: var(--font); letter-spacing: 0; }
+.lr-chip small { margin-left: 5px; font-size: 10.5px; opacity: .6; }
+.lr-chip-dot {
+  display: inline-block;
+  width: 7px; height: 7px;
+  margin-left: 7px;
+  border-radius: 50%;
+  background: var(--live);
+  vertical-align: 1px;
+}
+@keyframes lr-pop { 50% { transform: scale(1.06); } }
+
+/* policy segmented toggle with sliding thumb. inline-grid + 1fr auto columns
+   makes every option exactly half the toggle (equal to the widest caption),
+   so the 50%/translateX(100%) thumb lines up in every language — flex sizing
+   let EN "Open"/"Private" run unequal and the thumb underlapped the selected
+   button. */
+.lr-toggle {
+  position: relative;
+  display: inline-grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  padding: 4px;
+  border: 2.5px solid var(--ink);
+  border-radius: 15px;
+  background: var(--paper);
+}
+.lr-toggle::before {
+  content: "";
+  position: absolute;
+  top: 4px; bottom: 4px; left: 4px;
+  width: calc(50% - 4px);
+  border-radius: 11px;
+  background: var(--ink);
+  transition: transform 260ms var(--spring);
+}
+.lr-toggle[data-selected="private"]::before { transform: translateX(100%); }
+.lr-toggle button {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  min-width: 44px; height: 44px;
+  padding: 0 10px;
+  border: 0;
+  border-radius: 11px;
+  background: transparent;
+  color: #8aa0b2;
+  transition: color 180ms ease;
+}
+.lr-toggle button.is-selected { color: var(--paper); }
+.lr-toggle button:active { transform: scale(.94); }
+/* Vis mode hint-wraps each option button, so the wrap (not the button) is the
+   grid item; it stretches to its track, and without centering the icon-only
+   button would pin to the left of its half. */
+.lr-toggle .lr-comic-tip-wrap { justify-content: center; }
+
+/* iOS-style switch */
+.lr-switch {
+  position: relative;
+  display: inline-flex;
+  width: 58px; height: 34px;
+  border: 2.5px solid var(--ink);
+  border-radius: 999px;
+  background: var(--paper);
+  flex: 0 0 auto;
+  transition: background 200ms ease, border-color 200ms ease;
+}
+.lr-switch::after {
+  content: "";
+  position: absolute;
+  top: 2.5px; left: 3px;
+  width: 24px; height: 24px;
+  border-radius: 50%;
+  background: var(--ink);
+  transition: transform 280ms var(--spring), background 200ms ease;
+}
+.lr-switch:active::after { transform: scaleX(1.18); }
+.lr-switch[aria-checked="true"] { background: var(--live); border-color: var(--live); }
+.lr-switch[aria-checked="true"]::after { transform: translateX(24px); background: #fff; }
+.lr-switch[aria-checked="true"]:active::after { transform: translateX(24px) scaleX(1.18); }
+
+/* sliders */
+.lr-slider { display: flex; align-items: center; gap: 12px; }
+.lr-slider input { flex: 1; accent-color: var(--action); height: 32px; }
+.lr-slider output { min-width: 64px; font-family: var(--mono); font-size: 12.5px; text-align: right; }
+
+/* quality tiles */
+.lr-tiles { display: flex; gap: 10px; flex-wrap: wrap; }
+.lr-tile {
+  display: grid;
+  justify-items: center;
+  gap: 6px;
+  min-width: 76px;
+  padding: 12px 10px 9px;
+  border: 2.5px solid var(--ink);
+  border-radius: 14px;
+  background: var(--paper);
+  color: var(--ink);
+  transition: transform 140ms var(--spring), background 120ms ease;
+}
+.lr-tile:hover:not(:disabled):not(.is-selected) { background: var(--wall-2); transform: translateY(-2px); }
+.lr-tile:active:not(:disabled) { transform: scale(.95); }
+.lr-tile.is-selected { background: var(--ink); color: var(--paper); animation: lr-pop .2s var(--spring); }
+.lr-tile small { font-family: var(--mono); font-size: 11px; letter-spacing: .02em; color: #5d7086; white-space: nowrap; }
+.lr-tile.is-selected small { color: var(--paper); opacity: .75; }
+
+/* text inputs */
+.lr-input {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  height: 48px;
+  padding: 0 12px;
+  border: 2.5px solid var(--ink);
+  border-radius: 13px;
+  background: var(--paper);
+  transition: border-color 140ms ease;
+}
+.lr-input:focus-within { border-color: var(--action); outline: 3px solid var(--action); outline-offset: 2px; }
+.lr-input input { min-width: 0; flex: 1; height: 100%; border: 0; outline: 0; background: transparent; font: inherit; }
+.lr-input input[type="password"]:not(:placeholder-shown) { letter-spacing: .25em; }
+
+.lr-name-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 8px 13px;
+  border: 2.5px solid var(--ink);
+  border-radius: 999px;
+  background: var(--paper);
+  font-size: 13.5px;
+  font-weight: 700;
+  max-width: 100%;
+}
+.lr-name-tag i { width: 9px; height: 9px; border-radius: 50%; background: var(--you); flex: 0 0 auto; }
+.lr-name-tag span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* notices */
+.lr-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 9px 14px;
+  border-radius: 999px;
+  background: #fdf3e0;
+  border: 2px solid var(--warn);
+  color: #8a5f04;
+  font-size: 13px;
+  font-weight: 600;
+  animation: lr-slide-in 240ms var(--spring);
+}
+.lr-pill.is-bad { background: rgba(214, 69, 65, .1); border-color: var(--danger); color: #a1332f; }
+.lr-pill.is-good { background: #e2f3e9; border-color: var(--live); color: #1f7a4a; }
+html[data-theme="dark"] .lr-pill { background: #2e2410; }
+html[data-theme="dark"] .lr-pill.is-bad { background: #331c1a; }
+html[data-theme="dark"] .lr-pill.is-good { background: #14291d; }
+@keyframes lr-slide-in { from { opacity: 0; transform: translateY(-6px); } }
+
+/* metric cells */
+.lr-meter { display: flex; flex-wrap: wrap; gap: 10px; }
+.lr-meter-cell {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 9px 12px;
+  border-radius: 12px;
+  background: var(--wall-2);
+}
+.lr-meter-cell b { font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: .02em; }
+.lr-meter-cell svg { color: #53676a; }
+html[data-theme="dark"] .lr-meter-cell svg { color: #7d92a8; }
+.lr-meter-text { display: grid; line-height: 1.18; }
+.lr-meter-text small { font-size: 9.5px; font-weight: 600; opacity: .62; }
+.lr-meter-tag { display: inline-flex; align-items: center; padding: 9px 2px 9px 0; color: #53676a; }
+.lr-meter-tag .lr-cap { margin-left: 6px; font-size: 12px; }
+.lr-metrics-more { min-width: 40px; height: 40px; padding: 0 10px; }
+.lr-metrics-more svg { transition: transform 160ms ease; }
+.lr-metrics-more.is-open svg { transform: rotate(180deg); }
+
+/* per-viewer detail row */
+.lr-pawn-detail { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
+.lr-pawn-mini { display: grid; place-items: center; }
+.lr-pawn-mini svg { width: 28px; height: 34px; display: block; }
+.lr-pawn-detail-name { font-size: 14px; font-weight: 800; }
+.lr-pawn-detail .lr-meter { flex: 1 1 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); }
+.lr-pawn-detail-close {
+  display: grid;
+  width: 40px; height: 40px;
+  place-items: center;
+  border: 2.5px solid var(--ink);
+  border-radius: 12px;
+  background: var(--paper);
+  color: var(--ink);
+  transition: transform 120ms var(--spring), background 120ms ease;
+}
+.lr-pawn-detail-close:hover { background: var(--wall-2); }
+.lr-pawn-detail-close:active { transform: scale(.9); }
+
+/* ---------- topology tree ---------- */
+
+.lr-route {
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  flex: 1 1 100%;
+  overflow-x: auto;
+  padding: 6px 2px;
+  box-sizing: border-box;
+}
+.lr-route svg { display: block; width: 100%; max-width: 880px; height: auto; margin: 0 auto; }
+.lr-route text { fill: var(--ink); font-size: 11px; font-weight: 600; opacity: .72; paint-order: stroke; stroke: var(--paper); stroke-width: 3px; }
+.lr-route .flow { stroke-dasharray: 5 7; animation: lr-flow 1.1s linear infinite; }
+@keyframes lr-flow { to { stroke-dashoffset: -24; } }
+
+/* ---------- advanced door ---------- */
+
+.lr-door-body {
+  display: grid;
+  gap: 16px;
+  padding: 16px;
+  border: 2.5px dashed #9db3a7;
+  border-radius: var(--radius);
+}
+.lr-door { display: grid; }
+.lr-door-reveal {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 260ms ease;
+}
+.lr-door-reveal.is-open { grid-template-rows: 1fr; }
+.lr-door-reveal > div { overflow: hidden; }
+/* Once open, tooltips inside the door must escape the reveal clip; the
+   discrete flip is delayed past the 260ms row transition so the opening
+   animation still renders clipped. */
+.lr-door-reveal.is-open > div { overflow: visible; transition: overflow 0s 260ms; }
+.lr-door-group { display: grid; gap: 10px; }
+.lr-door-glyph { display: flex; align-items: center; gap: 10px; color: #53676a; }
+html[data-theme="dark"] .lr-door-glyph { color: #7d92a8; }
+.lr-door-glyph .lr-cap { font-size: 13px; }
+.lr-switch-item { display: inline-flex; align-items: center; gap: 9px; }
+
+/* ---------- join / access ---------- */
+
+.lr-join {
+  flex: 1;
+  display: grid;
+  place-items: center;
+  padding: 24px 16px 72px;
+}
+.lr-join-panel { display: grid; justify-items: center; gap: 20px; }
+.lr-join-door { color: var(--ink); }
+.lr-join-door.is-shake { animation: lr-shake .4s ease; }
+@keyframes lr-shake {
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-7px); }
+  50% { transform: translateX(6px); }
+  75% { transform: translateX(-4px); }
+}
+.lr-dials-wrap { position: relative; }
+.lr-dials-wrap:focus-within { outline: 3px solid var(--action); outline-offset: 2px; border-radius: 14px; }
+.lr-dials { display: flex; gap: 12px; }
+.lr-dial {
+  display: grid;
+  width: 64px; height: 78px;
+  place-items: center;
+  border: 3px solid var(--ink);
+  border-radius: 14px;
+  background: var(--paper);
+  font-family: var(--mono);
+  font-size: 34px;
+  font-weight: 700;
+  transition: border-color 120ms ease, transform 160ms var(--spring), box-shadow 160ms ease;
+}
+.lr-dial.is-active { border-color: var(--action); transform: translateY(-4px); box-shadow: 0 6px 0 -2px rgba(47, 111, 237, .2); }
+.lr-dial.is-filled { background: var(--ink); color: var(--paper); animation: lr-pop .18s ease; }
+.lr-dials-wrap input {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  cursor: pointer;
+  font-size: 40px;
+}
+.lr-join-error {
+  display: grid;
+  width: 52px; height: 52px;
+  place-items: center;
+  border-radius: 50%;
+  background: var(--danger);
+  color: #fff;
+  animation: lr-pop .2s var(--spring);
+}
+.lr-join-go {
+  display: grid;
+  width: 68px; height: 68px;
+  place-items: center;
+  border: 3px solid var(--action);
+  border-radius: 50%;
+  background: var(--action);
+  color: #fff;
+  transition: transform 140ms var(--spring), background 160ms ease;
+}
+.lr-join-go:hover:not(:disabled) { background: var(--action-deep); transform: scale(1.05); }
+.lr-join-go:active:not(:disabled) { transform: scale(.92); }
+.lr-join-go:disabled { background: var(--wall-2); border-color: transparent; color: #9db3a7; opacity: 1; }
+html[data-theme="dark"] .lr-join-go:disabled { background: #1a2634; color: #48607a; }
+
+.lr-access-text { display: grid; gap: 7px; justify-items: center; max-width: 330px; text-align: center; }
+.lr-access-text h1 { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
+.lr-access-text p { font-size: 13px; line-height: 1.6; opacity: .72; }
+
+.lr-loading { display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; }
+.lr-spin { animation: lr-rotate .9s linear infinite; }
+@keyframes lr-rotate { to { transform: rotate(360deg); } }
+
+/* ---------- dark theme refinements ---------- */
+
+html[data-theme="dark"] .lr-btn:hover:not(:disabled) { background: #2b3d4f; }
+html[data-theme="dark"] .lr-btn.is-on { background: var(--ink); color: #22303e; }
+html[data-theme="dark"] .lr-btn.is-danger:hover:not(:disabled) { background: #3d2626; }
+html[data-theme="dark"] .lr-chip:hover:not(:disabled),
+html[data-theme="dark"] .lr-tile:hover:not(:disabled):not(.is-selected) { background: #2b3d4f; }
+html[data-theme="dark"] .lr-chip.is-selected,
+html[data-theme="dark"] .lr-tile.is-selected { background: var(--ink); color: #22303e; }
+html[data-theme="dark"] .lr-tile.is-selected small { color: #4a5f78; }
+html[data-theme="dark"] .lr-row.is-sub { background: #1a2634; }
+html[data-theme="dark"] .lr-meter-cell { background: #1a2634; }
+html[data-theme="dark"] .lr-meter-tag { color: #7d92a8; }
+html[data-theme="dark"] .lr-door-body { border-color: #33465c; }
+html[data-theme="dark"] .lr-pawn-name { background: #0e1620; box-shadow: none; }
+html[data-theme="dark"] .lr-couch-empty { color: #54708c; }
+html[data-theme="dark"] .lr-switch { background: #0e1620; }
+html[data-theme="dark"] .lr-switch::after { background: var(--ink); }
+
+/* ---------- responsive ---------- */
+
+@media (max-width: 640px) {
+  .lr-pawns { top: -14px; gap: 2px 6px; }
+  .lr-pawn { width: 36px; }
+  .lr-pawn svg { width: 32px; height: 39px; }
+  .lr-row { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px; }
+  .lr-row > .lr-spacer,
+  .lr-row > .lr-divider { display: none; }
+  .lr-row-group { width: 100%; gap: 9px; }
+  .lr-group-actions { display: flex; width: 100%; gap: 8px; min-width: 0; }
+  .lr-group-actions .lr-btn { flex: 1 1 0; min-width: 0; min-height: 52px; padding: 4px 5px; gap: 6px; }
+  .lr-group-actions .lr-btn .lr-cap { white-space: normal; text-align: center; line-height: 1.25; font-size: 11px; }
+  .lr-lcd { flex: 1; justify-content: center; }
+  .lr-tiles { display: flex; width: 100%; gap: 8px; }
+  .lr-tiles .lr-tile { flex: 1 1 0; min-width: 0; padding: 10px 6px 8px; }
+  .lr-meter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
+  .lr-pawn-detail .lr-meter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .lr-meter-cell { justify-content: flex-start; }
+  .lr-group-name .lr-name-tag { flex: 1; }
+  .lr-toggle { flex: 1; }
+  .lr-door-body { padding: 12px; }
+  .lr-dial { width: 54px; height: 66px; font-size: 28px; }
+  .lr-status-text { width: 100%; }
+  .lr-tv-screen.has-entry { aspect-ratio: auto; min-height: 292px; }
+  .lr-tv-big { width: 72px; height: 72px; }
+  .lr-leds-label { display: none; }
+  .lr-header-controls .lr-btn .lr-cap { display: none; }
 }
 
-.viewer-status-action:hover:not(:disabled) {
-  color: var(--text);
-  background: var(--surface);
+/* ---------- comic tooltip ---------- */
+
+/* Pure-CSS hover/focus panel carrying a paper Comic above its trigger. The
+   trigger inside the wrapper stays the focusable element (touch = focus), so
+   no tabindex here. Enter is delayed ~120ms, exit is immediate. Under
+   prefers-reduced-motion the global block collapses the transition to instant
+   and the comic's own RM block pins its final frame. */
+/* Visibility is three-channel: hover on fine pointers only (touch would
+   leave sticky-hover stuck), keyboard focus via :has(:focus-visible) (touch
+   taps never match, so no stuck tooltip after activation), and .is-tip-open
+   from the component's Material-style long-press handling. */
+.lr-comic-tip-wrap { position: relative; display: inline-flex; }
+.lr-comic-tip {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%) translateY(4px);
+  width: max-content;
+  max-width: 320px;
+  z-index: 30;
+  background: var(--paper);
+  border: 2.5px solid var(--ink);
+  border-radius: 14px;
+  padding: 10px;
+  box-shadow: 0 6px 18px rgb(16 26 44 / .18);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity .16s ease, transform .16s ease;
+}
+.lr-comic-tip * { animation-play-state: paused !important; }
+/* Caret lives on the wrapper (not the panel) so it always centers on the
+   trigger button, whatever the panel alignment is. The diamond's center sits
+   on the panel's edge; the half inside the panel hides behind its paper
+   background (z 29 vs 30), leaving a clean point aimed at the trigger. */
+.lr-comic-tip-wrap::before {
+  content: "";
+  position: absolute;
+  bottom: calc(100% + 3px);
+  left: 50%;
+  width: 10px;
+  height: 10px;
+  margin-left: -5px;
+  background: var(--paper);
+  border: 2.5px solid var(--ink);
+  transform: rotate(45deg) scale(.6);
+  z-index: 29;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity .16s ease, transform .16s ease;
+}
+.lr-comic-tip-wrap:has(.lr-comic-tip.is-below)::before {
+  bottom: auto;
+  top: calc(100% + 3px);
 }
 
-.viewer-stats {
-  margin-top: 22px;
-}
+/* channel 1: fine-pointer hover */
+@media (hover: hover) and (pointer: fine) {
+  .lr-comic-tip-wrap:hover .lr-comic-tip { opacity: 1; transform: translateX(-50%) translateY(0); transition-delay: .12s; }
+  .lr-comic-tip-wrap:hover .lr-comic-tip * { animation-play-state: running !important; }
+  .lr-comic-tip-wrap:hover .lr-comic-tip.is-below { transform: translateX(-50%) translateY(0); }
+  .lr-comic-tip-wrap:hover .lr-comic-tip.is-start,
+  .lr-comic-tip-wrap:hover .lr-comic-tip.is-end { transform: translateX(0) translateY(0); }
+  .lr-comic-tip-wrap:hover::before { opacity: 1; transform: rotate(45deg) scale(1); transition-delay: .12s; }
 
-.viewer-stats h2 {
-  margin-bottom: 12px;
-  color: var(--muted);
-}
-
-.viewer-stats .stats-grid {
-  grid-template-columns: repeat(6, minmax(0, 1fr));
-  padding: 14px 0;
-  border-top: 1px solid var(--border);
-  border-bottom: 1px solid var(--border);
-}
-
-@media (max-width: 1050px) {
-  .host-workspace {
-    grid-template-columns: minmax(0, 1fr) 330px;
+  /* Panel mutex: keyboard focus (channel 2) can hold one wrap's panel open
+     while the pointer hovers a neighboring trigger, and two 320px panels at
+     the same z-index would overlap (stacking decided by DOM order alone).
+     While a wrap in the same container carries focus-visible, suppress
+     hover-open on the others; the suppressed wrap re-arms the moment focus
+     moves, so keyboard and pointer handoff stays a clean one-panel relay.
+     Scoped to the containers that hold adjacent wrapped triggers; the guard
+     keys on focus-visible inside a wrap, so plain mouse clicks (no panel
+     held open) never suppress anything. */
+  :is(.lr-row-group, .lr-pawn-detail, .lr-entry-actions):has(.lr-comic-tip-wrap:has(:focus-visible))
+    .lr-comic-tip-wrap:not(:has(:focus-visible)):hover .lr-comic-tip {
+    opacity: 0;
+    transition-delay: 0s;
   }
-
-  .section-heading {
-    flex-wrap: wrap;
-  }
-
-  .broadcast-actions {
-    width: 100%;
-    flex-wrap: wrap;
-  }
-
-  .advanced-quality-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .quality-priority {
-    grid-column: auto;
-  }
-
-  .route-policy-controls {
-    grid-column: auto;
-    grid-template-columns: 1fr;
-  }
-  .viewer-stats .stats-grid {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
+  :is(.lr-row-group, .lr-pawn-detail, .lr-entry-actions):has(.lr-comic-tip-wrap:has(:focus-visible))
+    .lr-comic-tip-wrap:not(:has(:focus-visible)):hover::before {
+    opacity: 0;
+    transition-delay: 0s;
   }
 }
 
-@media (max-width: 780px) {
-  .app-header {
-    position: static;
-    padding: 9px 14px;
-  }
-
-  .host-workspace {
-    display: block;
-  }
-
-  .broadcast-area,
-  .viewer-workspace {
-    padding: 20px 14px 28px;
-  }
-
-  .viewer-panel {
-    padding: 20px 14px 28px;
-    border-top: 1px solid var(--border);
-    border-left: 0;
-  }
-
-  .remote-stage {
-    max-height: none;
-  }
-
-  .viewer-stats .stats-grid {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-
+/* channels 2+3: keyboard focus-visible and touch long-press */
+.lr-comic-tip-wrap:has(:focus-visible) .lr-comic-tip,
+.lr-comic-tip-wrap.is-tip-open .lr-comic-tip {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+  transition-delay: .12s;
+}
+.lr-comic-tip-wrap:has(:focus-visible) .lr-comic-tip *,
+.lr-comic-tip-wrap.is-tip-open .lr-comic-tip * {
+  animation-play-state: running !important;
+}
+.lr-comic-tip-wrap:has(:focus-visible) .lr-comic-tip.is-below,
+.lr-comic-tip-wrap.is-tip-open .lr-comic-tip.is-below { transform: translateX(-50%) translateY(0); }
+.lr-comic-tip-wrap:has(:focus-visible) .lr-comic-tip.is-start,
+.lr-comic-tip-wrap:has(:focus-visible) .lr-comic-tip.is-end,
+.lr-comic-tip-wrap.is-tip-open .lr-comic-tip.is-start,
+.lr-comic-tip-wrap.is-tip-open .lr-comic-tip.is-end { transform: translateX(0) translateY(0); }
+.lr-comic-tip-wrap:has(:focus-visible)::before,
+.lr-comic-tip-wrap.is-tip-open::before {
+  opacity: 1;
+  transform: rotate(45deg) scale(1);
+  transition-delay: .12s;
 }
 
-@media (max-width: 680px) {
-  .room-entry-policy {
-    grid-template-columns: minmax(0, 1fr);
-    gap: 10px;
-  }
+/* Below-placement: header controls sit at the viewport top, so their panel
+   opens downward; the wrapper caret flips to the trigger's bottom edge. */
+.lr-comic-tip.is-below { bottom: auto; top: calc(100% + 8px); transform: translateX(-50%) translateY(-4px); }
 
-  .room-policy-control,
-  .viewer-password-control {
-    grid-column: 1;
-  }
+/* Edge alignment: triggers near a viewport edge anchor the panel's near edge
+   instead of centering, so the comic never clips off-screen. */
+.lr-comic-tip.is-start { left: 0; transform: translateX(0) translateY(4px); }
+.lr-comic-tip.is-end { left: auto; right: 0; transform: translateX(0) translateY(4px); }
+.lr-comic-tip.is-below.is-start { transform: translateX(0) translateY(-4px); }
+.lr-comic-tip.is-below.is-end { transform: translateX(0) translateY(-4px); }
+
+/* On mobile the wrapper (not the button) is the flex item, so equal-width
+   action buttons keep their stretch when hint-wrapped. */
+@media (max-width: 640px) {
+  .lr-group-actions .lr-comic-tip-wrap { flex: 1 1 0; min-width: 0; }
+  .lr-group-actions .lr-comic-tip-wrap .lr-btn { width: 100%; }
+  .lr-comic-tip { max-width: min(320px, 78vw); }
+  .lr-comic-tip svg { width: 100% !important; height: auto; }
 }
 
-@media (max-width: 520px) {
-  .viewer-title-row {
-    flex-wrap: wrap;
-  }
-
-  .broadcast-actions .button {
-    min-width: 0;
-    flex: 1 1 calc(50% - 4px);
-  }
-
-  .viewer-badges {
-    width: 100%;
-    justify-content: flex-start;
-  }
-
-  .viewer-name-control {
-    width: 100%;
-  }
-
-  .segmented-control {
-    height: auto;
-    min-height: 42px;
-  }
-
-  .segmented-control button {
-    min-height: 42px;
-    padding: 6px;
-    white-space: normal;
-  }
-
-  .viewer-password-control.has-password {
-    grid-template-columns: minmax(0, 1fr) 40px 40px;
-  }
-
-  .viewer-stats .stats-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
+.lr-comic-tip-caption {
+  display: block;
+  margin-top: 6px;
+  font-size: 11px;
+  font-weight: 600;
+  text-align: center;
+  opacity: .72;
 }
 
+/* ---------- reduced motion: everything collapses to instant ---------- */
+
 @media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    scroll-behavior: auto !important;
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
   }
+  .lr-tv-static { animation: none; opacity: .35; }
+  .lr-route .flow { animation: none; stroke-dasharray: none; }
+}
 
-  .stats-detail-toggle svg {
-    transition: none;
+/* ---------- interaction and legibility constraints ---------- */
+
+/* Password field needs enough room for the full hint text in both languages
+   (the tracking itself is scoped to the filled state above). !important is
+   required because HostPage pins minWidth: 180 via an inline style. */
+.lr-input:has(input[type="password"]) { min-width: 260px !important; }
+
+/* Dark-mode notice pills: pair the dark fills with readable foregrounds. */
+html[data-theme="dark"] .lr-pill { color: #e8a33d; }
+html[data-theme="dark"] .lr-pill.is-bad { color: #e88a85; }
+html[data-theme="dark"] .lr-pill.is-good { color: #63c78a; }
+/* Dark-mode preset tiles: lift the unselected caption off the tile fill. */
+html[data-theme="dark"] .lr-tile small { color: #8ba0b4; }
+
+@media (max-width: 640px) {
+  /* Pawn drill-down: the shared .lr-row column stack breaks this card —
+     column + wrap fans the children into off-screen side-by-side columns and
+     the meter's 100% flex-basis inflates the block axis. Keep it row-wrapped
+     so the meter takes its own full-width line at natural height and the
+     more/close buttons stay in flow inside the card. */
+  .lr-pawn-detail { flex-direction: row; align-items: center; }
+  .lr-pawn-detail .lr-meter { flex: 1 1 100%; align-content: start; }
+  /* Action row: let the buttons wrap to two rows once three-across can no
+     longer hold each label on a single line (stops orphan-character wraps). */
+  .lr-group-actions .lr-comic-tip-wrap,
+  .lr-group-actions > .lr-btn { flex-basis: 112px; }
+}
+
+
+/* Entry overlay hosts hint tooltips: let them escape the screens clip. */
+.lr-tv-screen.has-entry { overflow: visible; }
+@media (max-width: 640px) {
+  .lr-tv-screen .lr-comic-tip { max-width: 62vw; }
+}
+
+/* ---------- glyph draw-in (一笔一划) ---------- */
+
+/* One-shot state-entry beat, gated by Glyph: only on an icon SWAP (play↔pause,
+   copy→check, moon↔sun — innerHTML remounts and replays) or on explicit
+   theatrical mounts (entry cast/door, stage overlay, join door, gate key).
+   Everyday interactions never retrigger it. */
+/* Every shape carries pathLength=1 (injected by Glyph), so dasharray/offset
+   in [0,1] paces each stroke evenly no matter its real length. The pen
+   grammar: one stroke at a time — 210ms draw per stroke, next stroke starts
+   as the current one lands (190ms stagger, ~10% overlap) — with a fast-in,
+   settle-out pen curve. Solid icons and filled dots pop with the spring.
+   Reduced motion pins the final pose via the global collapse plus the pins. */
+.lr-glyph-draw :is(path, circle, rect, line) {
+  stroke-dasharray: 1;
+  stroke-dashoffset: 1;
+  animation: lr-glyph-in 210ms cubic-bezier(.45, .05, .35, 1) forwards;
+}
+.lr-glyph-draw.is-solid > :is(path, circle, rect),
+.lr-glyph-draw :is([fill="currentColor"], [fill^="#"]) {
+  stroke-dasharray: none;
+  stroke-dashoffset: 0;
+  transform-box: fill-box;
+  transform-origin: center;
+  /* spring curve inlined: a var() reference would make Chromium restart the
+     animation whenever :root custom properties change (theme flip). */
+  animation: lr-glyph-pop 220ms cubic-bezier(.3, 1.45, .45, 1) both;
+}
+.lr-glyph-draw > *:nth-child(2) { animation-delay: 190ms; }
+.lr-glyph-draw > *:nth-child(3) { animation-delay: 380ms; }
+.lr-glyph-draw > *:nth-child(4) { animation-delay: 570ms; }
+.lr-glyph-draw > *:nth-child(5) { animation-delay: 760ms; }
+.lr-glyph-draw > *:nth-child(6) { animation-delay: 950ms; }
+@keyframes lr-glyph-in { to { stroke-dashoffset: 0; } }
+@keyframes lr-glyph-pop {
+  0% { opacity: 0; transform: scale(.3); }
+  100% { opacity: 1; transform: scale(1); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .lr-glyph-draw :is(path, circle, rect, line) {
+    animation: none !important;
+    stroke-dashoffset: 0 !important;
+    opacity: 1 !important;
+    transform: none !important;
   }
 }
+
+/* append-sink: workflow agents append new rules ABOVE this line. */
diff --git a/src/client/ui/copy.ts b/src/client/ui/copy.ts
new file mode 100644
index 0000000..94472c5
--- /dev/null
+++ b/src/client/ui/copy.ts
@@ -0,0 +1,842 @@
+// The single copy catalog. zh and en carry identical keys (type-enforced);
+// "visual" is a presentation mode over the same keys, not another catalog.
+//
+// Store notes: lang/vis sync across tabs via the window "storage" event (a
+// commit in one tab re-applies the persisted values here; theme.ts keeps its
+// own per-tab store). Known trade-off: flipping lang/vis while a hint tooltip
+// is open remounts the trigger, because the living primitives mount
+// ComicTooltip conditionally, so keyboard focus drops to <body> on a mode
+// flip. The wrapper lives outside this module; the behavior is documented
+// here where the flip originates.
+import { useSyncExternalStore } from "react";
+
+export type Lang = "zh" | "en";
+export type CopyMode = "text" | "vis";
+
+const zh = {
+  "brand.home": "Screener 首页",
+
+  "common.roomCode": "房间号",
+  "common.copy": "复制",
+  "common.copied": "已复制",
+  "common.copyFailed": "复制失败",
+  "common.cancel": "取消",
+  "common.retry": "重试",
+  "common.refresh": "刷新页面",
+  "common.edit": "编辑",
+  "common.close": "收起",
+  "common.viewers": "观看者",
+  "common.you": "你",
+  "common.host": "分享者",
+  "common.name.viewerDefault": "访客",
+  "common.name.hostDefault": "分享者",
+
+  "gate.title": "站点访问",
+  "gate.hint": "请输入站点口令",
+  "gate.password": "站点口令",
+  "gate.submit": "进入站点",
+  "gate.checking": "正在验证站点访问",
+  "gate.wrong": "站点口令不正确，请重试",
+  "gate.unavailable": "暂时无法验证站点访问",
+  "gate.malformed": "房间号格式不正确",
+  "gate.malformedHint": "请输入 1000 至 9999 的四位房间号",
+  "gate.unavailableRoute": "无法访问",
+
+  "join.title": "加入房间",
+  "join.hint": "输入分享者提供的房间号",
+  "join.field": "房间号",
+  "join.submit": "加入",
+  "join.invalid": "请输入 1000 至 9999 的四位房间号",
+  "join.joining": "正在加入房间",
+  "join.notFound": "房间不存在或已过期",
+  "join.notFoundHint": "请确认房间号，或向分享者获取新的邀请链接。",
+  "join.denied": "当前无法通过房间号加入",
+  "join.deniedHint": "请使用分享者提供的邀请链接，或尝试房间密码。",
+  "join.password": "房间密码",
+  "join.passwordError": "无法加入房间，请重试",
+  "join.passwordRule": "请输入 1-{max} 个可见字符",
+  "join.passwordAction": "输入房间密码",
+  "join.full": "房间已满",
+
+  "host.title": "{name} 的屏幕",
+  "host.idle.heading": "想播点什么？",
+  "host.idle.hint": "分享你的屏幕，朋友凭房间号或邀请链接就能进来看。",
+  "host.start": "开始分享",
+  "host.join": "加入房间",
+  "host.starting": "正在连接",
+  "host.cancelStart": "取消",
+  "host.live": "正在分享",
+  "host.paused": "已暂停",
+  "host.ended": "已停止分享",
+  "host.roomReady": "房间已就绪",
+  "host.pause": "暂停分享",
+  "host.resume": "恢复分享",
+  "host.switchSource": "切换来源",
+  "host.switching": "正在选择",
+  "host.stop": "停止分享",
+  "host.noAudio": "当前来源没有可共享音频",
+  "host.localPreviewPaused": "本地预览已暂停，分享仍在继续",
+  "host.pauseNotice": "音视频分享已暂停",
+  "host.resumeNotice": "音视频分享已恢复",
+  "host.stopNotice": "已停止分享",
+  "host.roomReplaced": "房间号已更换",
+  "host.roomInvalid": "房间已失效，再次点击将创建新房",
+  "host.roomReplace": "更换房间号",
+  "host.roomReplaceConfirm": "确认更换房间号",
+  "host.captureError": "无法开始屏幕采集，请检查浏览器权限后重试",
+  "host.terminated.stale": "页面版本已更新，请刷新后重试",
+  "host.terminated.session": "此页面的会话已被另一个标签页接管",
+  "host.terminated.signal": "服务器连接已终止，请刷新后重试",
+  "host.notice.qualityApplied": "分享设置已应用",
+  "host.notice.qualitySet": "画质已切换为 {label}",
+  "host.notice.audioSet": "音频质量已切换为 {label}",
+  "host.notice.partialApply": "分享设置已更新，但部分观看连接未能应用新参数",
+  "host.notice.sourceSwitch.ok": "分享来源已切换",
+  "host.notice.sourceSwitch.partial": "分享来源已切换，但{warning}",
+
+  "host.name": "昵称",
+  "host.nameSave": "保存昵称",
+  "host.nameCancel": "取消编辑昵称",
+  "host.nameEdit": "编辑昵称",
+  "host.nameError": "名称格式无效或超过 24 个字符",
+  "host.nameOffline": "开始分享并连接后才能修改昵称",
+
+  "host.invite": "邀请链接",
+  "host.invite.copy": "复制邀请链接",
+  "host.invite.copyFailed": "无法复制邀请链接，请稍后重试",
+  "host.invite.rotate": "更新邀请链接",
+  "host.invite.revoke": "撤销邀请链接",
+  "host.invite.rotateShort": "更新链接",
+  "host.invite.revokeShort": "撤销链接",
+  "host.invite.updated": "邀请链接已更新",
+  "host.invite.revoked": "邀请链接已撤销",
+  "host.invite.emptyOpen": "暂无邀请链接，仍可凭房间号加入",
+  "host.invite.emptyPassword": "暂无邀请链接，仍可凭房间号和密码加入",
+  "host.invite.emptyPrivate": "暂无邀请链接，请先更新链接再邀请他人",
+
+  "host.policy": "准入方式",
+  "host.policy.open": "公开",
+  "host.policy.private": "私密",
+  "host.policy.openHint": "知道房间号即可加入",
+  "host.policy.privateHint": "凭邀请链接加入，或设置房间密码",
+  "host.policy.setOpen": "房间已设为公开",
+  "host.policy.setPrivateInvite": "房间已设为私密，仅限邀请加入",
+  "host.policy.setPrivatePassword": "房间已设为私密，可凭邀请或密码加入",
+  "host.password.set": "房间密码已设置",
+  "host.password.unset": "房间密码未设置",
+  "host.password.placeholder": "设置后可凭房间号加入",
+  "host.password.setAction": "设置房间密码",
+  "host.password.changeAction": "更改房间密码",
+  "host.password.remove": "移除房间密码",
+  "host.password.show": "显示房间密码",
+  "host.password.hide": "隐藏房间密码",
+  "host.password.saved": "房间密码已设置",
+  "host.password.updated": "房间密码已更新",
+  "host.password.removed": "房间密码已移除，仅限邀请加入",
+  "host.password.rule": "房间密码只需 1-{max} 个可见字符",
+  "host.accessFailed": "当前无法更新房间设置，请稍后重试",
+
+  "host.viewers.empty": "暂无观看者",
+  "host.viewers.waiting": "等待朋友加入",
+
+  "host.quality": "视频预设",
+  "host.quality.720p30": "720p · 30 帧",
+  "host.quality.1080p30": "1080p · 30 帧",
+  "host.quality.1080p60": "1080p · 60 帧",
+  "host.advanced": "高级设置",
+  "host.advanced.resolution": "分辨率上限",
+  "host.advanced.framerate": "帧率上限",
+  "host.advanced.bitrate": "视频码率上限",
+  "host.advanced.preference": "画面偏好",
+  "host.advanced.preference.resolution": "清晰",
+  "host.advanced.preference.balanced": "均衡",
+  "host.advanced.preference.framerate": "流畅",
+  "host.advanced.preference.resolutionHint": "保留细节",
+  "host.advanced.preference.balancedHint": "自动权衡",
+  "host.advanced.preference.framerateHint": "优先帧率",
+  "host.advanced.audio": "音频质量",
+  "host.advanced.audio.saver": "普通",
+  "host.advanced.audio.music": "音乐",
+  "host.advanced.audio.veryHigh": "保真",
+  "host.advanced.route": "路由策略",
+  "host.advanced.route.topo": "自动优化拓扑",
+  "host.advanced.route.topoHint": "观看中逐步选择更健康的连接",
+  "host.advanced.route.peerOnly": "纯 P2P",
+  "host.advanced.route.peerOnlyHint": "不使用媒体服务器，无法直连时停止尝试",
+  "host.advanced.codec": "视频编码",
+  "host.advanced.codec.auto": "自动",
+  "host.advanced.codec.autoHint": "自动选择",
+  "host.advanced.codec.vp8Hint": "兼容优先",
+  "host.advanced.codec.h264Hint": "硬件优先",
+
+  "host.details": "显示连接详情",
+  "host.details.hide": "隐藏连接详情",
+  "host.topology": "连接拓扑",
+  "host.topology.show": "显示连接拓扑",
+  "host.topology.hide": "隐藏连接拓扑",
+  "host.topology.pending": "连接中",
+  "host.sfu": "媒体服务器",
+
+  "state.signal.connected": "服务器已连接",
+  "state.signal.connecting": "正在连接",
+  "state.signal.reconnecting": "正在恢复",
+  "state.signal.offline": "服务器未连接",
+  "state.peer.connected": "已连接",
+  "state.peer.connecting": "正在连接",
+  "state.peer.routing": "线路分配中",
+  "state.peer.waiting": "等待开始分享",
+  "state.peer.reconnecting": "正在恢复",
+  "state.peer.failed": "连接失败",
+  "state.peer.disconnected": "连接中断",
+  "state.peer.closed": "已关闭",
+  "state.peer.new": "准备中",
+  "state.route.p2p": "P2P 直连",
+  "state.route.sfu": "服务器中转",
+
+  "stats.title": "连接数据",
+  "stats.relay": "转发数据",
+  "stats.downstream": "下游接收数据",
+  "stats.more": "详细指标",
+  "stats.less": "收起详细指标",
+  "stats.resolution": "分辨率",
+  "stats.fps": "帧率",
+  "stats.bitrate": "码率",
+  "stats.loss": "丢包率",
+  "stats.rtt": "RTT",
+  "stats.codec": "视频编码",
+  "stats.jitter": "网络抖动",
+  "stats.dropped": "丢帧",
+  "stats.encoder": "编码器",
+  "stats.audio": "音频码率",
+  "stats.unknown": "未知",
+  "stats.outgoing": "可用上行",
+  "stats.qualityState": "质量状态",
+  "stats.quality.normal": "正常",
+  "stats.quality.bandwidth": "带宽受限",
+  "stats.quality.cpu": "编码受限",
+  "stats.quality.other": "其他限制",
+  "stats.quality.unclassified": "未分类限制",
+  "stats.capture": "捕获设置",
+  "stats.inputFps": "编码输入帧率",
+  "stats.encodeMs": "编码耗时/帧",
+  "stats.decodeMs": "解码耗时/帧",
+  "stats.freezeCount": "画面冻结",
+  "stats.freezeDuration": "冻结时长",
+  "stats.audioLoss": "音频丢包率",
+  "stats.audioJitter": "音频抖动",
+  "stats.playoutDelta": "音视频播放差",
+  "stats.videoBuffer": "视频缓冲",
+  "stats.audioBuffer": "音频缓冲",
+  "stats.audioConcealedRate": "音频补偿率",
+  "stats.audioConcealed": "音频补偿",
+
+  "viewer.title": "{name} 的屏幕",
+  "viewer.titleFallback": "好友屏幕",
+  "viewer.reconnect": "重新连接媒体",
+  "viewer.msg.joining": "正在加入房间",
+  "viewer.msg.waitingHost": "等待开始分享",
+  "viewer.msg.preparingP2p": "正在建立 P2P",
+  "viewer.msg.preparingSfu": "正在连接备用线路",
+  "viewer.msg.allocating": "正在分配线路",
+  "viewer.msg.receiving": "正在接收画面",
+  "viewer.msg.playing": "正在播放",
+  "viewer.msg.needsPlay": "点击播放",
+  "viewer.msg.hostPaused": "分享者已暂停",
+  "viewer.msg.recovering": "正在恢复连接",
+  "viewer.msg.routeFailed": "没有可用的媒体线路",
+  "viewer.msg.playbackFailed": "浏览器无法播放当前画面",
+  "viewer.msg.hostOffline": "分享者连接已中断",
+  "viewer.msg.serverError": "连接服务暂时不可用",
+  "viewer.msg.notFound": "房间不存在或已过期",
+  "viewer.msg.denied": "当前无法通过房间号加入",
+  "viewer.msg.invalidInvite": "邀请链接无效或已失效",
+  "viewer.msg.expired": "房间已过期",
+  "viewer.msg.closed": "房间已关闭",
+  "viewer.msg.full": "当前无法加入房间",
+  "viewer.msg.stale": "页面版本已更新，请刷新后重试",
+  "viewer.msg.sessionReplaced": "此页面的会话已被另一个标签页接管",
+  "viewer.msg.signalTerminated": "连接已终止，请刷新后重试",
+  "viewer.notice.signalRecovering": "服务器连接正在恢复，画面仍在播放",
+  "viewer.notice.mediaRecovering": "媒体连接正在恢复",
+  "viewer.notice.hostOffline": "分享者连接已中断，画面可能冻结",
+  "viewer.hint.denied": "请使用分享者提供的邀请链接，或尝试房间密码。",
+  "viewer.hint.notFound": "请确认房间号，或向分享者获取新的邀请链接。",
+  "viewer.hint.invite": "请向分享者获取新的邀请链接。",
+  "viewer.hint.generic": "请检查入口后重试。",
+  "viewer.error.p2p": "P2P 媒体连接异常",
+  "viewer.error.relay": "下游媒体连接异常",
+
+  "mode.language": "界面语言",
+  "mode.zh": "中文",
+  "mode.en": "English",
+  "mode.vis": "纯视觉",
+  "theme.dark": "切换到暗色模式",
+  "theme.light": "切换到浅色模式",
+  "theme.dark.short": "暗色",
+  "theme.light.short": "浅色",
+
+  "story.room": "找到房间",
+  "story.link": "建立连接",
+  "story.show": "接收画面",
+
+  "gate.connectFailed": "无法连接站点访问服务，请重试",
+  "gate.expired": "站点访问已失效，请重新验证",
+  "gate.serviceUnavailable": "站点验证服务暂时不可用 ({status})",
+
+  "host.onlineCount": "{n} / {max} 人在线",
+  "host.notStarted": "尚未开始",
+  "host.startCancelled": "启动已取消",
+  "host.switchingSource": "正在切换来源",
+  "host.capture.fpsUnknown": "帧率未知",
+  "host.capture.codecPending": "编码待定",
+  "host.capture.hasAudio": "含音频",
+  "host.capture.noAudio": "无音频",
+  "host.stageAria": "分享或加入房间",
+  "host.captureAria": "实际捕获参数",
+  "host.quality.title": "{label} · {mbps} Mbps",
+  "host.audio.title": "{label} · {kbps} kbps 上限",
+  "host.roomExpired": "房间已过期",
+  "host.roomClosed": "房间已关闭",
+  "host.pause.noTracksResume": "当前分享没有可恢复的媒体轨道",
+  "host.pause.signalRecovering": "服务器连接正在恢复，分享仍保持暂停",
+  "host.pause.noTracksPause": "当前分享没有可暂停的媒体轨道",
+  "host.pause.stillPaused": "分享仍保持暂停",
+  "host.shareEnded": "当前分享已经结束",
+  "host.fail.start": "启动分享失败",
+  "host.err.createConnection": "创建连接失败",
+  "host.err.codecUnsupported": "当前浏览器无法使用支持的视频编码",
+  "host.err.applySender": "应用发送参数失败",
+  "host.err.applyAudioSender": "应用音频发送参数失败",
+  "host.fail.source": "切换分享来源失败",
+  "host.fail.quality": "应用画质设置失败",
+  "host.fail.connection": "观看连接处理失败",
+  "host.fail.room": "房间操作失败",
+  "host.err.invalidToken": "分享凭证已失效，请重新创建房间",
+  "host.err.accessDenied": "当前操作没有权限",
+  "host.err.roomExpired": "房间已过期，请重新创建",
+  "host.err.alreadyConnected": "此房间已在另一个页面中分享",
+  "host.err.peerGone": "对应的观看连接已经离开",
+  "host.err.forbidden": "当前操作不可用",
+  "host.err.serverError": "服务暂时不可用，请稍后重试",
+  "host.err.createRoomStatus": "当前无法创建房间 ({status})",
+  "host.err.replaceRoomStatus": "当前无法更换房间 ({status})",
+  "host.err.updateRoomStatus": "当前无法更新房间设置 ({status})",
+  "host.capture.cancelled": "屏幕选择已取消或没有共享权限",
+  "host.capture.noSource": "没有可用的屏幕分享来源",
+  "host.capture.readFailed": "浏览器暂时无法读取所选分享来源",
+  "host.capture.unavailable": "当前页面无法启动屏幕分享",
+  "host.notice.reconnecting": "部分观看者正在重新连接",
+  "host.notice.sfuRecovering": "SFU 分享来源未切换成功，正在恢复观看连接",
+  "host.password.inputPlaceholder": "输入密码",
+
+  "stats.warn.codec": "视频编码为 {codec}，预期 H264 或 VP8",
+  "stats.warn.audioCodec": "音频编码为 {codec}，预期 Opus",
+
+  "viewer.msg.joinUnavailable": "暂时无法加入房间",
+  "viewer.onlineCount": "在线 {n}",
+  "viewer.stageAria": "共享画面",
+
+  "host.warn.audioUnread": "浏览器未读回音频码率上限",
+  "host.warn.bandwidth": "当前连接带宽受限，画质已自动降低",
+  "host.warn.encoding": "编码性能受限，画质已自动降低",
+  "host.warn.other": "浏览器持续报告其他画质限制",
+  "host.warn.unclassified": "浏览器持续报告未分类的画质限制",
+  "host.warn.audioRewritten": "浏览器将音频码率上限改写为 {kbps} kbps",
+  "host.warn.senderPartial": "浏览器未完整接受{params}",
+  "host.warn.param.maxBitrate": "码率上限",
+  "host.warn.param.maxFramerate": "帧率上限",
+  "host.warn.param.scaleResolutionDownBy": "分辨率缩放",
+  "host.warn.param.degradationPreference": "质量优先级",
+  "host.warn.param.scalabilityMode": "伸缩模式",
+  "host.warn.sfuRecover": "SFU {stage}失败，已启动自动恢复",
+  "host.warn.sfuStage.connect": "连接",
+  "host.warn.sfuStage.source": "分享源",
+  "host.warn.sfuStage.videoPublish": "视频发布",
+  "host.warn.sfuStage.senderConfig": "视频参数配置",
+  "host.warn.sfuStage.audioPublish": "音频发布",
+  "host.warn.sfuStage.transport": "传输",
+  "host.fail.sfuSwitch": "切换 SFU 分享来源失败",
+  "host.fail.sfuAudioParams": "应用 SFU 音频发送参数失败",
+  "host.fail.sfuParams": "应用 SFU 发送参数失败",
+} as const;
+
+const en: Record<keyof typeof zh, string> = {
+  "brand.home": "Screener home",
+
+  "common.roomCode": "Room code",
+  "common.copy": "Copy",
+  "common.copied": "Copied",
+  "common.copyFailed": "Copy failed",
+  "common.cancel": "Cancel",
+  "common.retry": "Retry",
+  "common.refresh": "Refresh page",
+  "common.edit": "Edit",
+  "common.close": "Close",
+  "common.viewers": "Viewers",
+  "common.you": "you",
+  "common.host": "Host",
+  "common.name.viewerDefault": "Visitor",
+  "common.name.hostDefault": "Host",
+
+  "gate.title": "Site access",
+  "gate.hint": "Enter the site passphrase",
+  "gate.password": "Site passphrase",
+  "gate.submit": "Enter site",
+  "gate.checking": "Checking site access",
+  "gate.wrong": "Incorrect passphrase, try again",
+  "gate.unavailable": "Site access cannot be verified right now",
+  "gate.malformed": "Invalid room code format",
+  "gate.malformedHint": "Enter a four-digit room code between 1000 and 9999",
+  "gate.unavailableRoute": "Unavailable",
+
+  "join.title": "Join a room",
+  "join.hint": "Enter the four-digit room code from your friend",
+  "join.field": "Room code",
+  "join.submit": "Join",
+  "join.invalid": "Enter a four-digit room code between 1000 and 9999",
+  "join.joining": "Joining the room",
+  "join.notFound": "Room not found or expired",
+  "join.notFoundHint": "Check the room code, or ask the host for a new invite link.",
+  "join.denied": "This room cannot be joined by code right now",
+  "join.deniedHint": "Use the host's invite link, or try the room password.",
+  "join.password": "Room password",
+  "join.passwordError": "Could not join; try again",
+  "join.passwordRule": "Enter 1-{max} visible characters",
+  "join.passwordAction": "Enter room password",
+  "join.full": "Room is full",
+
+  "host.title": "{name}'s screen",
+  "host.idle.heading": "Something worth watching?",
+  "host.idle.hint": "Share your screen and friends can drop in with the room code or invite link.",
+  "host.start": "Start sharing",
+  "host.join": "Join a room",
+  "host.starting": "Connecting",
+  "host.cancelStart": "Cancel",
+  "host.live": "Live",
+  "host.paused": "Paused",
+  "host.ended": "Sharing stopped",
+  "host.roomReady": "Room ready",
+  "host.pause": "Pause sharing",
+  "host.resume": "Resume sharing",
+  "host.switchSource": "Switch source",
+  "host.switching": "Choosing",
+  "host.stop": "Stop sharing",
+  "host.noAudio": "This source has no shareable audio",
+  "host.localPreviewPaused": "Local preview paused; sharing continues",
+  "host.pauseNotice": "Audio and video sharing paused",
+  "host.resumeNotice": "Audio and video sharing resumed",
+  "host.stopNotice": "Sharing stopped",
+  "host.roomReplaced": "Room code replaced",
+  "host.roomInvalid": "Room expired; press again to create a new one",
+  "host.roomReplace": "Replace room code",
+  "host.roomReplaceConfirm": "Confirm replacing the room code",
+  "host.captureError": "Screen capture unavailable; check browser permission and retry",
+  "host.terminated.stale": "Page updated; refresh to continue",
+  "host.terminated.session": "This page's session was taken over by another tab",
+  "host.terminated.signal": "Server connection terminated; refresh to continue",
+  "host.notice.qualityApplied": "Share settings applied",
+  "host.notice.qualitySet": "Quality switched to {label}",
+  "host.notice.audioSet": "Audio quality switched to {label}",
+  "host.notice.partialApply": "Settings updated, but some viewer connections could not apply them",
+  "host.notice.sourceSwitch.ok": "Share source switched",
+  "host.notice.sourceSwitch.partial": "Source switched, but {warning}",
+
+  "host.name": "Display name",
+  "host.nameSave": "Save display name",
+  "host.nameCancel": "Cancel editing",
+  "host.nameEdit": "Edit display name",
+  "host.nameError": "Invalid name, or longer than 24 characters",
+  "host.nameOffline": "Display name can only change while sharing and connected",
+
+  "host.invite": "Invite link",
+  "host.invite.copy": "Copy invite link",
+  "host.invite.copyFailed": "Could not copy the invite link; try again",
+  "host.invite.rotate": "Rotate invite link",
+  "host.invite.revoke": "Revoke invite link",
+  "host.invite.rotateShort": "Rotate link",
+  "host.invite.revokeShort": "Revoke link",
+  "host.invite.updated": "Invite link rotated",
+  "host.invite.revoked": "Invite link revoked",
+  "host.invite.emptyOpen": "No invite link; the room code still works",
+  "host.invite.emptyPassword": "No invite link; room code plus password still works",
+  "host.invite.emptyPrivate": "No invite link; rotate one before inviting",
+
+  "host.policy": "Admission",
+  "host.policy.open": "Open",
+  "host.policy.private": "Private",
+  "host.policy.openHint": "Anyone with the room code can join",
+  "host.policy.privateHint": "Invite link only, or set a room password",
+  "host.policy.setOpen": "Room is now open",
+  "host.policy.setPrivateInvite": "Room is now private, invite link only",
+  "host.policy.setPrivatePassword": "Room is now private, invite link or password",
+  "host.password.set": "Room password set",
+  "host.password.unset": "No room password",
+  "host.password.placeholder": "Set one to allow code entry",
+  "host.password.setAction": "Set room password",
+  "host.password.changeAction": "Change room password",
+  "host.password.remove": "Remove room password",
+  "host.password.show": "Show room password",
+  "host.password.hide": "Hide room password",
+  "host.password.saved": "Room password set",
+  "host.password.updated": "Room password updated",
+  "host.password.removed": "Password removed; invite link only",
+  "host.password.rule": "1-{max} visible characters",
+  "host.accessFailed": "Cannot update room settings right now; try again later",
+
+  "host.viewers.empty": "No viewers yet",
+  "host.viewers.waiting": "Waiting for friends to join",
+
+  "host.quality": "Video preset",
+  "host.quality.720p30": "720p · 30 fps",
+  "host.quality.1080p30": "1080p · 30 fps",
+  "host.quality.1080p60": "1080p · 60 fps",
+  "host.advanced": "Advanced settings",
+  "host.advanced.resolution": "Resolution ceiling",
+  "host.advanced.framerate": "Frame rate ceiling",
+  "host.advanced.bitrate": "Video bitrate ceiling",
+  "host.advanced.preference": "Picture preference",
+  "host.advanced.preference.resolution": "Clarity",
+  "host.advanced.preference.balanced": "Balanced",
+  "host.advanced.preference.framerate": "Fluency",
+  "host.advanced.preference.resolutionHint": "Keep detail",
+  "host.advanced.preference.balancedHint": "Weigh automatically",
+  "host.advanced.preference.framerateHint": "Prefer frame rate",
+  "host.advanced.audio": "Audio quality",
+  "host.advanced.audio.saver": "Standard",
+  "host.advanced.audio.music": "Music",
+  "host.advanced.audio.veryHigh": "Studio",
+  "host.advanced.route": "Route policy",
+  "host.advanced.route.topo": "Auto topology tuning",
+  "host.advanced.route.topoHint": "Gradually pick healthier paths while live",
+  "host.advanced.route.peerOnly": "Pure P2P",
+  "host.advanced.route.peerOnlyHint": "No media server; stop when direct paths fail",
+  "host.advanced.codec": "Video codec",
+  "host.advanced.codec.auto": "Auto",
+  "host.advanced.codec.autoHint": "Pick automatically",
+  "host.advanced.codec.vp8Hint": "Compatibility first",
+  "host.advanced.codec.h264Hint": "Hardware first",
+
+  "host.details": "Show connection details",
+  "host.details.hide": "Hide connection details",
+  "host.topology": "Connection topology",
+  "host.topology.show": "Show connection topology",
+  "host.topology.hide": "Hide connection topology",
+  "host.topology.pending": "Connecting",
+  "host.sfu": "Media server",
+
+  "state.signal.connected": "Server connected",
+  "state.signal.connecting": "Connecting",
+  "state.signal.reconnecting": "Recovering",
+  "state.signal.offline": "Server offline",
+  "state.peer.connected": "Connected",
+  "state.peer.connecting": "Connecting",
+  "state.peer.routing": "Routing",
+  "state.peer.waiting": "Waiting for share",
+  "state.peer.reconnecting": "Recovering",
+  "state.peer.failed": "Connection failed",
+  "state.peer.disconnected": "Connection lost",
+  "state.peer.closed": "Closed",
+  "state.peer.new": "Preparing",
+  "state.route.p2p": "P2P direct",
+  "state.route.sfu": "Via server",
+
+  "stats.title": "Connection data",
+  "stats.relay": "Relay data",
+  "stats.downstream": "Downstream receive data",
+  "stats.more": "Detailed metrics",
+  "stats.less": "Hide detailed metrics",
+  "stats.resolution": "Resolution",
+  "stats.fps": "Frame rate",
+  "stats.bitrate": "Bitrate",
+  "stats.loss": "Packet loss",
+  "stats.rtt": "RTT",
+  "stats.codec": "Video codec",
+  "stats.jitter": "Jitter",
+  "stats.dropped": "Dropped frames",
+  "stats.encoder": "Encoder",
+  "stats.audio": "Audio bitrate",
+  "stats.unknown": "Unknown",
+  "stats.outgoing": "Available uplink",
+  "stats.qualityState": "Quality state",
+  "stats.quality.normal": "Normal",
+  "stats.quality.bandwidth": "Bandwidth-limited",
+  "stats.quality.cpu": "Encoder-limited",
+  "stats.quality.other": "Other limit",
+  "stats.quality.unclassified": "Unclassified limit",
+  "stats.capture": "Capture settings",
+  "stats.inputFps": "Encoder input rate",
+  "stats.encodeMs": "Encode time/frame",
+  "stats.decodeMs": "Decode time/frame",
+  "stats.freezeCount": "Freezes",
+  "stats.freezeDuration": "Freeze duration",
+  "stats.audioLoss": "Audio packet loss",
+  "stats.audioJitter": "Audio jitter",
+  "stats.playoutDelta": "A/V playout delta",
+  "stats.videoBuffer": "Video buffer",
+  "stats.audioBuffer": "Audio buffer",
+  "stats.audioConcealedRate": "Audio concealment rate",
+  "stats.audioConcealed": "Audio concealments",
+
+  "viewer.title": "{name}'s screen",
+  "viewer.titleFallback": "A friend's screen",
+  "viewer.reconnect": "Reconnect media",
+  "viewer.msg.joining": "Joining the room",
+  "viewer.msg.waitingHost": "Waiting for the host to share",
+  "viewer.msg.preparingP2p": "Establishing P2P",
+  "viewer.msg.preparingSfu": "Connecting backup route",
+  "viewer.msg.allocating": "Allocating a route",
+  "viewer.msg.receiving": "Receiving video",
+  "viewer.msg.playing": "Playing",
+  "viewer.msg.needsPlay": "Tap to play",
+  "viewer.msg.hostPaused": "Host paused",
+  "viewer.msg.recovering": "Recovering connection",
+  "viewer.msg.routeFailed": "No media route available",
+  "viewer.msg.playbackFailed": "The browser cannot play this stream",
+  "viewer.msg.hostOffline": "Host connection lost",
+  "viewer.msg.serverError": "Connection service unavailable",
+  "viewer.msg.notFound": "Room not found or expired",
+  "viewer.msg.denied": "This room cannot be joined by code right now",
+  "viewer.msg.invalidInvite": "Invite link invalid or expired",
+  "viewer.msg.expired": "Room expired",
+  "viewer.msg.closed": "Room closed",
+  "viewer.msg.full": "Cannot join the room right now",
+  "viewer.msg.stale": "Page updated; refresh to continue",
+  "viewer.msg.sessionReplaced": "This page's session was taken over by another tab",
+  "viewer.msg.signalTerminated": "Connection terminated; refresh to continue",
+  "viewer.notice.signalRecovering": "Server reconnecting; video keeps playing",
+  "viewer.notice.mediaRecovering": "Media connection recovering",
+  "viewer.notice.hostOffline": "Host connection lost; picture may freeze",
+  "viewer.hint.denied": "Use the host's invite link, or try the room password.",
+  "viewer.hint.notFound": "Check the room code, or ask the host for a new invite link.",
+  "viewer.hint.invite": "Ask the host for a new invite link.",
+  "viewer.hint.generic": "Check your entry point and try again.",
+  "viewer.error.p2p": "P2P media connection error",
+  "viewer.error.relay": "Downstream media connection error",
+
+  "mode.language": "Interface language",
+  "mode.zh": "中文",
+  "mode.en": "English",
+  "mode.vis": "Visual only",
+  "theme.dark": "Switch to dark mode",
+  "theme.light": "Switch to light mode",
+  "theme.dark.short": "Dark",
+  "theme.light.short": "Light",
+
+  "story.room": "Room found",
+  "story.link": "Linking up",
+  "story.show": "Receiving picture",
+
+  "gate.connectFailed": "Cannot reach the site access service; try again",
+  "gate.expired": "Site access expired; verify again",
+  "gate.serviceUnavailable": "Site access service unavailable ({status})",
+
+  "host.onlineCount": "{n} / {max} online",
+  "host.notStarted": "Not started",
+  "host.startCancelled": "Start cancelled",
+  "host.switchingSource": "Switching source",
+  "host.capture.fpsUnknown": "Unknown frame rate",
+  "host.capture.codecPending": "Codec pending",
+  "host.capture.hasAudio": "With audio",
+  "host.capture.noAudio": "No audio",
+  "host.stageAria": "Share or join a room",
+  "host.captureAria": "Actual capture parameters",
+  "host.quality.title": "{label} · {mbps} Mbps",
+  "host.audio.title": "{label} · {kbps} kbps ceiling",
+  "host.roomExpired": "Room expired",
+  "host.roomClosed": "Room closed",
+  "host.pause.noTracksResume": "No resumable media tracks in the current share",
+  "host.pause.signalRecovering": "Server reconnecting; sharing stays paused",
+  "host.pause.noTracksPause": "No pausable media tracks in the current share",
+  "host.pause.stillPaused": "Sharing stays paused",
+  "host.shareEnded": "The current share has ended",
+  "host.fail.start": "Failed to start sharing",
+  "host.err.createConnection": "Failed to create the connection",
+  "host.err.codecUnsupported": "This browser cannot use a supported video codec",
+  "host.err.applySender": "Failed to apply sender parameters",
+  "host.err.applyAudioSender": "Failed to apply audio sender parameters",
+  "host.fail.source": "Failed to switch share source",
+  "host.fail.quality": "Failed to apply quality settings",
+  "host.fail.connection": "Viewer connection handling failed",
+  "host.fail.room": "Room operation failed",
+  "host.err.invalidToken": "Share credentials expired; create the room again",
+  "host.err.accessDenied": "Not permitted",
+  "host.err.roomExpired": "Room expired; create it again",
+  "host.err.alreadyConnected": "This room is already shared in another page",
+  "host.err.peerGone": "The viewer connection has left",
+  "host.err.forbidden": "Action unavailable",
+  "host.err.serverError": "Service temporarily unavailable; try again later",
+  "host.err.createRoomStatus": "Cannot create a room right now ({status})",
+  "host.err.replaceRoomStatus": "Cannot change rooms right now ({status})",
+  "host.err.updateRoomStatus": "Cannot update room settings right now ({status})",
+  "host.capture.cancelled": "Screen selection cancelled or not permitted",
+  "host.capture.noSource": "No shareable screen source available",
+  "host.capture.readFailed": "The browser cannot read the selected source right now",
+  "host.capture.unavailable": "This page cannot start screen sharing",
+  "host.notice.reconnecting": "Some viewers are reconnecting",
+  "host.notice.sfuRecovering": "SFU source switch failed; restoring viewer connections",
+  "host.password.inputPlaceholder": "Enter password",
+
+  "stats.warn.codec": "Video codec is {codec}; expected H264 or VP8",
+  "stats.warn.audioCodec": "Audio codec is {codec}; expected Opus",
+
+  "viewer.msg.joinUnavailable": "Cannot join the room right now",
+  "viewer.onlineCount": "{n} online",
+  "viewer.stageAria": "Shared picture",
+
+  "host.warn.audioUnread": "The browser did not report the audio bitrate ceiling",
+  "host.warn.bandwidth": "This connection is bandwidth-limited; quality was reduced automatically",
+  "host.warn.encoding": "Encoding performance is limited; quality was reduced automatically",
+  "host.warn.other": "The browser keeps reporting other quality limits",
+  "host.warn.unclassified": "The browser keeps reporting an unclassified quality limit",
+  "host.warn.audioRewritten": "The browser rewrote the audio bitrate ceiling to {kbps} kbps",
+  "host.warn.senderPartial": "The browser did not fully accept {params}",
+  "host.warn.param.maxBitrate": "bitrate ceiling",
+  "host.warn.param.maxFramerate": "frame rate ceiling",
+  "host.warn.param.scaleResolutionDownBy": "resolution scaling",
+  "host.warn.param.degradationPreference": "quality preference",
+  "host.warn.param.scalabilityMode": "scalability mode",
+  "host.warn.sfuRecover": "SFU {stage} failed; automatic recovery started",
+  "host.warn.sfuStage.connect": "connect",
+  "host.warn.sfuStage.source": "source",
+  "host.warn.sfuStage.videoPublish": "video publish",
+  "host.warn.sfuStage.senderConfig": "sender config",
+  "host.warn.sfuStage.audioPublish": "audio publish",
+  "host.warn.sfuStage.transport": "transport",
+  "host.fail.sfuSwitch": "Failed to switch the SFU share source",
+  "host.fail.sfuAudioParams": "Failed to apply SFU audio sender parameters",
+  "host.fail.sfuParams": "Failed to apply SFU sender parameters",
+};
+
+export type CopyKey = keyof typeof zh;
+
+const CATALOGS: Record<Lang, Record<CopyKey, string>> = { zh, en };
+
+const LANG_STORAGE_KEY = "screener:ui-lang";
+const MODE_STORAGE_KEY = "screener:ui-mode";
+
+interface CopyPrefs {
+  lang: Lang;
+  vis: boolean;
+}
+
+function readStored(): Partial<CopyPrefs> {
+  try {
+    const lang = window.localStorage.getItem(LANG_STORAGE_KEY);
+    const mode = window.localStorage.getItem(MODE_STORAGE_KEY);
+    return {
+      ...(lang === "zh" || lang === "en" ? { lang } : {}),
+      ...(mode === "text" || mode === "vis" ? { vis: mode === "vis" } : {}),
+    };
+  } catch {
+    return {};
+  }
+}
+
+function detectLang(): Lang {
+  return typeof navigator !== "undefined" &&
+    navigator.language?.toLowerCase().startsWith("zh")
+    ? "zh"
+    : "en";
+}
+
+const stored = readStored();
+const state: CopyPrefs = {
+  lang: stored.lang ?? detectLang(),
+  vis: stored.vis ?? true,
+};
+
+function syncDocumentLanguage(): void {
+  if (typeof document !== "undefined") {
+    document.documentElement.lang = state.lang === "zh" ? "zh-CN" : "en";
+  }
+}
+
+syncDocumentLanguage();
+
+const listeners = new Set<() => void>();
+
+// Applies values without persisting (storage-event sync path); commit() is
+// the persisting variant for local user actions.
+function apply(next: Partial<CopyPrefs>): void {
+  if (next.lang) state.lang = next.lang;
+  if (next.vis !== undefined) state.vis = next.vis;
+  syncDocumentLanguage();
+  listeners.forEach((listener) => listener());
+}
+
+function commit(next: Partial<CopyPrefs>): void {
+  apply(next);
+  try {
+    window.localStorage.setItem(LANG_STORAGE_KEY, state.lang);
+    window.localStorage.setItem(MODE_STORAGE_KEY, state.vis ? "vis" : "text");
+  } catch {
+    // Restricted storage only disables persistence.
+  }
+}
+
+// Cross-tab sync: a commit in another tab re-applies the persisted values
+// here. Identical-value writes fire no storage event, so tabs converge
+// without re-notify loops.
+if (typeof window !== "undefined") {
+  window.addEventListener("storage", (event) => {
+    if (event.key === LANG_STORAGE_KEY || event.key === MODE_STORAGE_KEY) {
+      apply(readStored());
+    }
+  });
+}
+
+// Non-React setter (used by the mode pill and by tests).
+export const setCopy = commit;
+
+export function t(lang: Lang, key: CopyKey, vars?: Record<string, string>): string {
+  let value = CATALOGS[lang][key];
+  if (vars) {
+    for (const [name, replacement] of Object.entries(vars)) {
+      value = value.replace(`{${name}}`, replacement);
+    }
+  }
+  return value;
+}
+
+// Non-hook accessor for transient notices composed outside React render
+// (pages keep resolved strings in state; a language switch leaves an already
+// shown notice in its original language until replaced).
+export function say(key: CopyKey, vars?: Record<string, string>): string {
+  return t(state.lang, key, vars);
+}
+
+// Locale-aware joins for composed notices (say() composites).
+export function joinSentences(parts: string[]): string {
+  return parts.join(state.lang === "zh" ? "；" : "; ");
+}
+export function joinItems(parts: string[]): string {
+  return parts.join(state.lang === "zh" ? "、" : ", ");
+}
+
+export interface Copy {
+  lang: Lang;
+  vis: boolean;
+  t: (key: CopyKey, vars?: Record<string, string>) => string;
+  setLang: (lang: Lang) => void;
+  setVis: (vis: boolean) => void;
+}
+
+export function useCopy(): Copy {
+  const snapshot = () => `${state.lang}:${state.vis}`;
+  const current = useSyncExternalStore(
+    (listener) => {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    snapshot,
+    snapshot,
+  );
+  const [lang, vis] = current.split(":") as [Lang, string];
+  return {
+    lang,
+    vis: vis === "true",
+    t: (key, vars) => t(lang, key, vars),
+    setLang: (next) => commit({ lang: next, vis: false }),
+    setVis: (next) => commit({ vis: next }),
+  };
+}
diff --git a/src/client/ui/icons.tsx b/src/client/ui/icons.tsx
new file mode 100644
index 0000000..886e78a
--- /dev/null
+++ b/src/client/ui/icons.tsx
@@ -0,0 +1,109 @@
+// Hand-drawn flat icon set for the living-room UI. Stroke icons use
+// currentColor; solid icons (play/pause/stop) are filled. Bodies are real JSX
+// children (never dangerouslySetInnerHTML — React re-sets innerHTML on every
+// render pass, which would restart the draw-in animation on unrelated state
+// changes; reconciled children stay put, so the draw only replays on a true
+// icon swap). pathLength={1} on every shape paces the draw-in evenly.
+import type { ReactNode } from "react";
+
+const PATHS: Record<string, { body: ReactNode; solid?: boolean }> = {
+  copy: { body: (<><rect pathLength={1} x="9" y="9" width="12" height="12" rx="2"/><path pathLength={1} d="M5 15V5a2 2 0 0 1 2-2h10"/></>) },
+  check: { body: (<><path pathLength={1} d="M4 12.5 9.5 18 20 6.5"/></>) },
+  refresh: { body: (<><path pathLength={1} d="M3 12a9 9 0 0 1 9-9 9.7 9.7 0 0 1 6.7 2.7L21 8"/><path pathLength={1} d="M21 3v5h-5"/><path pathLength={1} d="M21 12a9 9 0 0 1-9 9 9.7 9.7 0 0 1-6.7-2.7L3 16"/><path pathLength={1} d="M8 16H3v5"/></>) },
+  x: { body: (<><path pathLength={1} d="M18 6 6 18M6 6l12 12"/></>) },
+  eye: { body: (<><path pathLength={1} d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"/><circle pathLength={1} cx="12" cy="12" r="3"/></>) },
+  eyeOff: { body: (<><path pathLength={1} d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 10 8 10 8a18.5 18.5 0 0 1-2.16 3.19M6.61 6.61A13.5 13.5 0 0 0 2 12s3 8 10 8a9.74 9.74 0 0 0 5.39-1.61"/><path pathLength={1} d="m2 2 20 20"/><path pathLength={1} d="M9.88 9.88a3 3 0 1 0 4.24 4.24"/></>) },
+  play: { solid: true, body: (<><path pathLength={1} d="M7 4.8v14.4a1 1 0 0 0 1.52.86l11.4-7.2a1 1 0 0 0 0-1.72L8.52 3.94A1 1 0 0 0 7 4.8Z"/></>) },
+  pause: { solid: true, body: (<><rect pathLength={1} x="6" y="4" width="4.2" height="16" rx="1.2"/><rect pathLength={1} x="13.8" y="4" width="4.2" height="16" rx="1.2"/></>) },
+  stop: { solid: true, body: (<><rect pathLength={1} x="6" y="6" width="12" height="12" rx="2"/></>) },
+  share: { body: (<><rect pathLength={1} x="2" y="4" width="20" height="13" rx="2"/><path pathLength={1} d="M12 17v-7m0 0-3 3m3-3 3 3"/><path pathLength={1} d="M8 21h8"/></>) },
+  hash: { body: (<><path pathLength={1} d="M9 3 7 21M17 3l-2 18M4 8h17M3 16h17"/></>) },
+  users: { body: (<><circle pathLength={1} cx="9" cy="8" r="3.5"/><path pathLength={1} d="M2.5 20c.8-3.2 3.4-5 6.5-5s5.7 1.8 6.5 5"/><circle pathLength={1} cx="17" cy="9" r="2.5"/><path pathLength={1} d="M16.2 15.2c2.5.4 4.6 1.8 5.3 4.8"/></>) },
+  network: { body: (<><rect pathLength={1} x="9" y="2" width="6" height="6" rx="1.5"/><rect pathLength={1} x="2" y="16" width="6" height="6" rx="1.5"/><rect pathLength={1} x="16" y="16" width="6" height="6" rx="1.5"/><path pathLength={1} d="M12 8v3.5M12 11.5 5.5 16M12 11.5l6.5 4.5"/></>) },
+  chevron: { body: (<><path pathLength={1} d="m6 9 6 6 6-6"/></>) },
+  loader: { body: (<><path pathLength={1} d="M21 12a9 9 0 1 1-6.22-8.56"/></>) },
+  alert: { body: (<><path pathLength={1} d="M12 3.5 2.8 19.5a1 1 0 0 0 .87 1.5h16.66a1 1 0 0 0 .87-1.5L12 3.5Z"/><path pathLength={1} d="M12 10v4.5"/><path pathLength={1} d="M12 17.8h.01"/></>) },
+  wifiOff: { body: (<><path pathLength={1} d="m2 2 20 20"/><path pathLength={1} d="M8.5 16.5a5 5 0 0 1 7 0"/><path pathLength={1} d="M5 12.9a11 11 0 0 1 3.1-2.2M15.9 11.4a11 11 0 0 1 3.1 1.5"/><path pathLength={1} d="M1.5 8.8A16 16 0 0 1 8 5.4m8 .2a16 16 0 0 1 6.5 3.2"/><path pathLength={1} d="M12 20h.01"/></>) },
+  moon: { body: (<><path pathLength={1} d="M20.2 14.2A8.5 8.5 0 1 1 9.8 3.8a7 7 0 1 0 10.4 10.4Z"/></>) },
+  pencil: { body: (<><path pathLength={1} d="M17 3a2.83 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3Z"/></>) },
+  link: { body: (<><path pathLength={1} d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path pathLength={1} d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></>) },
+  linkOff: { body: (<><path pathLength={1} d="M10 13a5 5 0 0 0 7.54.54l1.1-1.1M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/><path pathLength={1} d="m3 3 18 18"/></>) },
+  arrowRight: { body: (<><path pathLength={1} d="M4 12h16m-6.5-6.5L20 12l-6.5 6.5"/></>) },
+  arrowUp: { body: (<><path pathLength={1} d="M12 20V4m-6.5 6.5L12 4l6.5 6.5"/></>) },
+  arrowDown: { body: (<><path pathLength={1} d="M12 4v16m-6.5-6.5L12 20l6.5-6.5"/></>) },
+  key: { body: (<><circle pathLength={1} cx="7.5" cy="15.5" r="4.5"/><path pathLength={1} d="m11 12.5 9.5-9.5M14.5 6l3 3M17.5 3l3 3"/></>) },
+  globe: { body: (<><circle pathLength={1} cx="12" cy="12" r="9"/><path pathLength={1} d="M3 12h18"/><path pathLength={1} d="M12 3c2.5 2.6 3.9 5.6 3.9 9s-1.4 6.4-3.9 9c-2.5-2.6-3.9-5.6-3.9-9S9.5 5.6 12 3Z"/></>) },
+  lock: { body: (<><rect pathLength={1} x="4" y="11" width="16" height="10" rx="2"/><path pathLength={1} d="M8 11V7a4 4 0 0 1 8 0v4"/></>) },
+  signal: { body: (<><path pathLength={1} d="M2 9a15 15 0 0 1 20 0"/><path pathLength={1} d="M5 12.5a10 10 0 0 1 14 0"/><path pathLength={1} d="M8.5 16a5 5 0 0 1 7 0"/><path pathLength={1} d="M12 19.5h.01"/></>) },
+  server: { body: (<><rect pathLength={1} x="3" y="4" width="18" height="7" rx="2"/><rect pathLength={1} x="3" y="13" width="18" height="7" rx="2"/><path pathLength={1} d="M7 7.5h.01M7 16.5h.01"/></>) },
+  tv: { body: (<><rect pathLength={1} x="2" y="5" width="20" height="14" rx="2"/><path pathLength={1} d="M8 2l4 3 4-3"/></>) },
+  door: { body: (<><path pathLength={1} d="M4 21V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v16"/><path pathLength={1} d="M2 21h20"/><path pathLength={1} d="M12.5 12h.01"/></>) },
+  plug: { body: (<><path pathLength={1} d="M9 7V3m6 4V3"/><path pathLength={1} d="M6 7h12v4a6 6 0 0 1-12 0V7Z"/><path pathLength={1} d="M12 17v4"/></>) },
+  gauge: { body: (<><path pathLength={1} d="M4 14.5a8 8 0 1 1 16 0"/><path pathLength={1} d="m12 14 3.5-4"/><path pathLength={1} d="M3.5 17.5h17"/></>) },
+  drop: { body: (<><path pathLength={1} d="M12 3s6 6.4 6 11a6 6 0 0 1-12 0c0-4.6 6-11 6-11Z"/></>) },
+  expand: { body: (<><path pathLength={1} d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/></>) },
+  wave: { body: (<><path pathLength={1} d="M2 12c1.7 0 1.7-2.5 3.4-2.5S7 12 8.7 12s1.6-2.5 3.3-2.5S13.6 12 15.3 12s1.7-2.5 3.4-2.5S20.3 12 22 12"/></>) },
+  speaker: { body: (<><path pathLength={1} d="M4 9v6h4l5 4V5L8 9H4Z"/><path pathLength={1} d="M16 9a4.2 4.2 0 0 1 0 6M18.5 6.5a8 8 0 0 1 0 11"/></>) },
+  sliders: { body: (<><path pathLength={1} d="M3 6h9m4 0h5M3 12h3m4 0h11M3 18h12m4 0h2"/><circle pathLength={1} cx="14" cy="6" r="2"/><circle pathLength={1} cx="8" cy="12" r="2"/><circle pathLength={1} cx="17" cy="18" r="2"/></>) },
+  mountain: { body: (<><path pathLength={1} d="m3 18 5.5-8.5L13 15l3.5-5L21 18H3Z"/></>) },
+  balance: { body: (<><path pathLength={1} d="M12 4v16m-5 0h10"/><path pathLength={1} d="m12 6-6 1.5L3.5 13a3.1 3.1 0 0 0 5 0L6 7.5M12 6l6 1.5 2.5 5.5a3.1 3.1 0 0 1-5 0L18 7.5"/></>) },
+  branch: { body: (<><circle pathLength={1} cx="6" cy="6" r="2.5"/><circle pathLength={1} cx="6" cy="18" r="2.5"/><circle pathLength={1} cx="18" cy="8" r="2.5"/><path pathLength={1} d="M6 8.5v7M6 13c5 0 5.5-2 9.3-3.2"/></>) },
+  clock: { body: (<><circle pathLength={1} cx="12" cy="12" r="9"/><path pathLength={1} d="M12 7v5.2l3.4 2"/></>) },
+  cpu: { body: (<><rect pathLength={1} x="7" y="7" width="10" height="10" rx="2"/><path pathLength={1} d="M10 2v3m4-3v3M10 19v3m4-3v3M2 10h3M2 14h3m14-4h3m-3 4h3"/></>) },
+  star: { body: (<><path pathLength={1} d="m12 3 2.7 5.7 6.3.8-4.6 4.3 1.2 6.2-5.6-3-5.6 3 1.2-6.2L3 9.5l6.3-.8L12 3Z"/></>) },
+  zap: { body: (<><path pathLength={1} d="M13 2 4 14h6l-1 8 9-12h-6l1-8Z"/></>) },
+  sparkles: { body: (<><path pathLength={1} d="m12 4 1.6 4.4L18 10l-4.4 1.6L12 16l-1.6-4.4L6 10l4.4-1.6L12 4Z"/><path pathLength={1} d="m18.5 15.5.8 2.2 2.2.8-2.2.8-.8 2.2-.8-2.2-2.2-.8 2.2-.8.8-2.2Z"/></>) },
+  cast: { body: (<><path pathLength={1} d="M2 16.1A5 5 0 0 1 5.9 20M2 12.05A9.95 9.95 0 0 1 9.95 20M2 8a14 14 0 0 1 14 14"/><circle pathLength={1} cx="3" cy="20" r="1.2" fill="currentColor" stroke="none"/><rect pathLength={1} x="2" y="4" width="20" height="15" rx="2"/></>) },
+  sun: { body: (<><circle pathLength={1} cx="12" cy="12" r="4"/><path pathLength={1} d="M12 2v2m0 16v2M4.9 4.9l1.4 1.4m11.4 11.4 1.4 1.4M2 12h2m16 0h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></>) },
+};
+
+export type GlyphName = keyof typeof PATHS;
+
+export function Glyph({
+  name,
+  size = 18,
+  className,
+  draw,
+}: {
+  name: GlyphName | string;
+  size?: number;
+  className?: string;
+  /**
+   * Declares this icon a draw-in SPOT (the value is the spot's stable id,
+   * used for documentation only). Spots are state-beat positions the author
+   * chose deliberately: theatrical mounts (entry cast/door, stage overlay,
+   * join/gate doors) and toggle icons whose form changes (pause↔play,
+   * copy↔check, moon↔sun, eye↔eyeOff). The draw replays exactly when the
+   * icon's innerHTML changes — a swap at the spot, or a genuine re-entry
+   * remount. No runtime inference: icons without a spot never draw, so list
+   * reconciliation and StrictMode can never cause a false trigger.
+   */
+  draw?: string;
+}) {
+  const icon = PATHS[name] ?? PATHS.alert;
+  const isSolid = icon?.solid === true;
+  const drawClass = [
+    draw ? "lr-glyph-draw" : null,
+    draw && isSolid ? "is-solid" : null,
+    className ?? null,
+  ]
+    .filter(Boolean)
+    .join(" ");
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill={isSolid ? "currentColor" : "none"}
+      stroke={isSolid ? "none" : "currentColor"}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+      className={drawClass || undefined}
+    >
+      {icon?.body}
+    </svg>
+  );
+}
diff --git a/src/client/ui/theme.ts b/src/client/ui/theme.ts
new file mode 100644
index 0000000..2897075
--- /dev/null
+++ b/src/client/ui/theme.ts
@@ -0,0 +1,56 @@
+// Light/dark theme with system default, persistence, and no-flash startup.
+// index.html applies the stored/system theme before first paint; this module
+// owns runtime toggles.
+import { useSyncExternalStore } from "react";
+
+export type Theme = "light" | "dark";
+
+const THEME_STORAGE_KEY = "screener:ui-theme";
+
+function detectTheme(): Theme {
+  return typeof window !== "undefined" &&
+    window.matchMedia?.("(prefers-color-scheme: dark)").matches
+    ? "dark"
+    : "light";
+}
+
+function readInitial(): Theme {
+  const attr = document.documentElement.dataset.theme;
+  if (attr === "dark" || attr === "light") {
+    return attr;
+  }
+  return detectTheme();
+}
+
+const state: { theme: Theme } = { theme: "light" };
+const listeners = new Set<() => void>();
+
+export function applyTheme(theme: Theme): void {
+  state.theme = theme;
+  document.documentElement.dataset.theme = theme;
+  try {
+    window.localStorage.setItem(THEME_STORAGE_KEY, theme);
+  } catch {
+    // Restricted storage only disables persistence.
+  }
+  listeners.forEach((listener) => listener());
+}
+
+export function initTheme(): void {
+  state.theme = readInitial();
+  document.documentElement.dataset.theme = state.theme;
+}
+
+export function useTheme(): { theme: Theme; toggle: () => void } {
+  const theme = useSyncExternalStore(
+    (listener) => {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    () => state.theme,
+  );
+  return {
+    theme,
+    toggle: () => applyTheme(theme === "dark" ? "light" : "dark"),
+  };
+}
diff --git a/src/client/webrtc/host-peer.ts b/src/client/webrtc/host-peer.ts
index 886c86f..57986ea 100644
--- a/src/client/webrtc/host-peer.ts
+++ b/src/client/webrtc/host-peer.ts
@@ -1,3 +1,4 @@
+import { say } from "../ui/copy";
 import {
   PERSISTENT_NATIVE_EDGE_DEGRADED_WINDOWS,
   type IceConfig,
@@ -107,7 +108,7 @@ export class HostPeer {
   async start(): Promise<boolean> {
     const videoTrack = this.stream.getVideoTracks()[0];
     if (!videoTrack) {
-      this.setError(new Error("共享流缺少视频轨道"), "创建连接失败");
+      this.setError(new Error(say("host.capture.noSource")), say("host.err.createConnection"));
       return false;
     }
     const audioTrack = this.stream.getAudioTracks()[0] ?? null;
@@ -116,7 +117,7 @@ export class HostPeer {
       streams: [this.stream],
     });
     if (!applyVideoCodecPreference(videoTransceiver, this.videoCodec)) {
-      this.setError(null, "当前浏览器无法使用支持的视频编码");
+      this.setError(null, say("host.err.codecUnsupported"));
       return false;
     }
     this.videoSender = videoTransceiver.sender;
@@ -173,7 +174,7 @@ export class HostPeer {
             videoSender.replaceTrack(previousVideoTrack),
             audioSender.replaceTrack(previousAudioTrack),
           ]);
-          this.setError(error, "切换共享源失败");
+          this.setError(error, say("host.fail.source"));
           return false;
         }
 
@@ -292,7 +293,7 @@ export class HostPeer {
         this.pendingCandidates.push(payload.candidate);
       }
     } catch (error) {
-      this.setError(error, "建立观看连接失败");
+      this.setError(error, say("host.err.createConnection"));
     }
   }
 
@@ -325,7 +326,7 @@ export class HostPeer {
         iceServers: iceConfig.iceServers,
       });
     } catch (error) {
-      this.setError(error, "更新网络配置失败");
+      this.setError(error, say("host.err.createConnection"));
     }
   }
 
@@ -424,7 +425,7 @@ export class HostPeer {
           },
         })
       ) {
-        throw new Error("服务器暂时离线，等待重新连接");
+        throw new Error(say("host.err.serverError"));
       }
       this.snapshot = { ...this.snapshot, error: null };
       this.emit();
@@ -436,7 +437,7 @@ export class HostPeer {
       if (this.ordinaryAnswerEpoch === epoch) {
         this.ordinaryAnswerEpoch = null;
       }
-      this.setError(error, restart ? "恢复连接失败" : "创建连接失败");
+      this.setError(error, restart ? say("host.err.createConnection") : say("host.err.createConnection"));
       return false;
     }
   }
@@ -592,7 +593,7 @@ export class HostPeer {
         videoWarning = senderParameterWarning(senderParameters);
       } catch {
         videoSucceeded = false;
-        videoWarning = "应用发送参数失败";
+        videoWarning = say("host.err.applySender");
       }
     }
 
@@ -614,7 +615,7 @@ export class HostPeer {
           audioWarning = audioSenderParameterWarning(audioSenderParameters);
         } catch {
           audioSucceeded = false;
-          audioWarning = "应用音频发送参数失败";
+          audioWarning = say("host.err.applyAudioSender");
         }
       } else {
         audioSenderParameters = null;
@@ -682,14 +683,14 @@ export class HostPeer {
     }
     switch (this.limitationReason) {
       case "bandwidth":
-        return "当前连接带宽受限，画质已自动降低";
+        return say("host.warn.bandwidth");
       case "cpu":
-        return "编码性能受限，画质已自动降低";
+        return say("host.warn.encoding");
       case "other":
-        return "浏览器持续报告其他画质限制";
+        return say("host.warn.other");
       default:
         return this.limitationReason
-          ? "浏览器持续报告未分类的画质限制"
+          ? say("host.warn.unclassified")
           : null;
     }
   }
diff --git a/src/client/webrtc/viewer-peer.ts b/src/client/webrtc/viewer-peer.ts
index 05c7e37..541def9 100644
--- a/src/client/webrtc/viewer-peer.ts
+++ b/src/client/webrtc/viewer-peer.ts
@@ -1,3 +1,4 @@
+import { say } from "../ui/copy";
 import type { IceConfig, SignalPayload } from "../../shared/protocol";
 import {
   EMPTY_METRICS,
@@ -108,7 +109,7 @@ export class ViewerPeer {
         iceServers: iceConfig.iceServers,
       });
     } catch (error) {
-      this.setError(error, "更新网络配置失败");
+      this.setError(error, say("host.fail.connection"));
     }
   }
 
@@ -306,7 +307,7 @@ export class ViewerPeer {
           sdp: connection.localDescription.sdp,
         },
       })) {
-        throw new Error("服务器连接暂时不可用");
+        throw new Error(say("viewer.msg.serverError"));
       }
       this.offerRecoveryAttempts = 0;
       this.scheduleInitialConnectionDeadline(connection, connectionId);
@@ -314,7 +315,7 @@ export class ViewerPeer {
       if (!this.isCurrentConnection(connection, connectionId)) {
         return;
       }
-      this.setError(error, "建立分享连接失败");
+      this.setError(error, say("host.fail.connection"));
       if (
         this.offerRecoveryAttempts < 1 &&
         this.events.sendRestartRequest(parentPeerId, connectionId, true)
@@ -347,7 +348,7 @@ export class ViewerPeer {
       await connection.addIceCandidate(payload.candidate);
     } catch (error) {
       if (this.isCurrentConnection(connection, connectionId)) {
-        this.setError(error, "建立分享连接失败");
+        this.setError(error, say("host.fail.connection"));
       }
     }
   }
diff --git a/tests/connection-details-toggle.test.ts b/tests/connection-details-toggle.test.ts
deleted file mode 100644
index bd1e71a..0000000
--- a/tests/connection-details-toggle.test.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { createElement } from "react";
-import { renderToStaticMarkup } from "react-dom/server";
-import { describe, expect, it, vi } from "vitest";
-
-import { ConnectionDetailsToggle } from "../src/client/components/ConnectionDetailsToggle.tsx";
-
-describe("ConnectionDetailsToggle", () => {
-  it("renders only the controlled connection-details checkbox", () => {
-    const expanded = renderToStaticMarkup(
-      createElement(ConnectionDetailsToggle, {
-        checked: true,
-        onChange: vi.fn(),
-      }),
-    );
-    const collapsed = renderToStaticMarkup(
-      createElement(ConnectionDetailsToggle, {
-        checked: false,
-        onChange: vi.fn(),
-      }),
-    );
-
-    expect(expanded).toContain("显示连接详情");
-    expect(expanded).toContain('type="checkbox"');
-    expect(expanded).toContain("checked=\"\"");
-    expect(expanded).not.toContain("button");
-    expect(collapsed).not.toContain("checked=\"\"");
-    expect(collapsed).not.toContain("下载");
-  });
-});
diff --git a/tests/connection-details.test.ts b/tests/connection-details.test.ts
index 4b37e96..4069b23 100644
--- a/tests/connection-details.test.ts
+++ b/tests/connection-details.test.ts
@@ -31,9 +31,9 @@ describe("progressive connection details", () => {
   });
 
   it("formats interval packet loss without inventing unknown values", () => {
-    expect(formatPacketLossPercent(1.25)).toBe("1.3%");
-    expect(formatPacketLossPercent(0)).toBe("0.0%");
-    expect(formatPacketLossPercent(null)).toBe("未知");
-    expect(formatPacketLossPercent(Number.NaN)).toBe("未知");
+    expect(formatPacketLossPercent(1.25, "未知")).toBe("1.3%");
+    expect(formatPacketLossPercent(0, "未知")).toBe("0.0%");
+    expect(formatPacketLossPercent(null, "未知")).toBe("未知");
+    expect(formatPacketLossPercent(Number.NaN, "未知")).toBe("未知");
   });
 });
diff --git a/tests/copy.test.ts b/tests/copy.test.ts
new file mode 100644
index 0000000..a718435
--- /dev/null
+++ b/tests/copy.test.ts
@@ -0,0 +1,49 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { say, setCopy, t, type CopyKey } from "../src/client/ui/copy.ts";
+
+describe("copy catalog", () => {
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    setCopy({ lang: "zh", vis: false });
+  });
+
+  it("renders zh and en for every key", () => {
+    const zh = t("zh", "join.title");
+    expect(zh).toBe("加入房间");
+    expect(t("en", "join.title")).toBe("Join a room");
+  });
+
+  it("interpolates variables", () => {
+    expect(t("zh", "host.title", { name: "阿舟" })).toBe("阿舟 的屏幕");
+    expect(t("en", "host.onlineCount", { n: "4", max: "20" })).toBe(
+      "4 / 20 online",
+    );
+  });
+
+  it("keeps zh and en key sets identical", () => {
+    // Type-level parity is enforced by Record<keyof typeof zh, string>;
+    // this guards runtime drift if the catalog shape changes.
+    for (const key of ["host.start", "viewer.msg.playing", "stats.more"] as CopyKey[]) {
+      expect(t("zh", key).length).toBeGreaterThan(0);
+      expect(t("en", key).length).toBeGreaterThan(0);
+    }
+  });
+
+  it("say() follows the current language", () => {
+    setCopy({ lang: "zh" });
+    expect(say("common.copied")).toBe("已复制");
+    setCopy({ lang: "en" });
+    expect(say("common.copied")).toBe("Copied");
+  });
+
+  it("keeps the document language aligned with the selected catalog", () => {
+    const documentElement = { lang: "zh-CN" };
+    vi.stubGlobal("document", { documentElement });
+
+    setCopy({ lang: "en" });
+    expect(documentElement.lang).toBe("en");
+    setCopy({ lang: "zh" });
+    expect(documentElement.lang).toBe("zh-CN");
+  });
+});
diff --git a/tests/host-page-notice.test.ts b/tests/host-page-notice.test.ts
index a4c19f9..0669fbe 100644
--- a/tests/host-page-notice.test.ts
+++ b/tests/host-page-notice.test.ts
@@ -1,5 +1,6 @@
 import { describe, expect, it } from "vitest";
 
+import { setCopy } from "../src/client/ui/copy.ts";
 import {
   hostActionErrorNotice,
   hostServerErrorNotice,
@@ -7,6 +8,8 @@ import {
   sourceSwitchNotice,
 } from "../src/client/pages/host-page-notices.ts";
 
+setCopy({ lang: "zh" });
+
 describe("host error notices", () => {
   it("maps every server error code without exposing server text", () => {
     const notices = {
diff --git a/tests/living-components.test.ts b/tests/living-components.test.ts
new file mode 100644
index 0000000..2a6ee0a
--- /dev/null
+++ b/tests/living-components.test.ts
@@ -0,0 +1,55 @@
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { afterEach, describe, expect, it } from "vitest";
+
+import { Couch } from "../src/client/components/living/Couch.tsx";
+import { StageOverlay } from "../src/client/components/living/Stage.tsx";
+import { NameTag } from "../src/client/components/living/primitives.tsx";
+import { setCopy } from "../src/client/ui/copy.ts";
+
+describe("living-room presentation", () => {
+  afterEach(() => setCopy({ lang: "zh", vis: false }));
+
+  it("keeps visual-only stage status available to assistive technology", () => {
+    setCopy({ lang: "en", vis: true });
+    const html = renderToStaticMarkup(
+      createElement(StageOverlay, {
+        icon: "refresh",
+        message: "Media connection recovering",
+      }),
+    );
+
+    expect(html).toContain('role="status"');
+    expect(html).toContain('aria-label="Media connection recovering"');
+    expect(html).not.toContain("lr-tv-msg");
+  });
+
+  it("announces the supplied state for a Viewer without committed media", () => {
+    setCopy({ lang: "en", vis: false });
+    const html = renderToStaticMarkup(
+      createElement(Couch, {
+        entries: [
+          {
+            key: "viewer-1",
+            name: "TNT",
+            connected: false,
+            statusLabel: "Recovering",
+          },
+        ],
+      }),
+    );
+
+    expect(html).toContain("TNT · Recovering");
+    expect(html).toContain("lr-pawn-led is-wait");
+  });
+
+  it("keeps the current display name visible in visual mode", () => {
+    setCopy({ lang: "en", vis: true });
+    const html = renderToStaticMarkup(
+      createElement(NameTag, { name: "TNT" }),
+    );
+
+    expect(html).toContain(">TNT<");
+    expect(html).not.toContain("visually-hidden");
+  });
+});
diff --git a/tests/stats-grid.test.ts b/tests/metric-cells.test.ts
similarity index 68%
rename from tests/stats-grid.test.ts
rename to tests/metric-cells.test.ts
index 9911599..61bddba 100644
--- a/tests/stats-grid.test.ts
+++ b/tests/metric-cells.test.ts
@@ -2,12 +2,15 @@ import { createElement } from "react";
 import { renderToStaticMarkup } from "react-dom/server";
 import { describe, expect, it } from "vitest";
 
-import { StatsGrid } from "../src/client/components/StatsGrid.tsx";
+import { MetricCells } from "../src/client/components/living/Metrics.tsx";
+import { setCopy } from "../src/client/ui/copy.ts";
 import {
   EMPTY_METRICS,
   type ConnectionMetrics,
 } from "../src/client/types.ts";
 
+setCopy({ lang: "zh", vis: false });
+
 const metrics = {
   ...EMPTY_METRICS,
   bitrateKbps: 4_200,
@@ -40,28 +43,33 @@ const metrics = {
   qualityLimitationReason: "bandwidth",
 } satisfies ConnectionMetrics;
 
-describe("StatsGrid progressive disclosure", () => {
-  it("keeps one-glance picture results above an accessible detail panel", () => {
-    const html = renderToStaticMarkup(
-      createElement(StatsGrid, {
+describe("MetricCells progressive disclosure", () => {
+  it("keeps one-glance picture results above an accessible detail expansion", () => {
+    const collapsed = renderToStaticMarkup(
+      createElement(MetricCells, {
         metrics,
         direction: "send",
-        progressive: true,
+        expanded: false,
+        onToggle: () => undefined,
       }),
     );
 
     for (const label of ["分辨率", "帧率", "码率", "丢包率"]) {
-      expect(html).toContain(label);
+      expect(collapsed).toContain(label);
     }
-    expect(html).toContain('aria-expanded="false"');
-    expect(html).toContain('title="展开详细指标"');
-    const controlId = html.match(/aria-controls="([^"]+)"/)?.[1];
-    expect(controlId).toBeTruthy();
-    const panelStart = html.indexOf(`<dl id="${controlId}"`);
-    expect(panelStart).toBeGreaterThan(0);
-    expect(html.slice(panelStart, html.indexOf(">", panelStart))).toContain(
-      'hidden=""',
+    expect(collapsed).toContain('aria-expanded="false"');
+    expect(collapsed).toContain('title="详细指标"');
+    expect(collapsed).not.toContain("可用上行");
+
+    const expanded = renderToStaticMarkup(
+      createElement(MetricCells, {
+        metrics,
+        direction: "send",
+        expanded: true,
+        onToggle: () => undefined,
+      }),
     );
+    expect(expanded).toContain('aria-expanded="true"');
     for (const label of [
       "RTT",
       "视频编码",
@@ -73,18 +81,23 @@ describe("StatsGrid progressive disclosure", () => {
       "编码耗时/帧",
       "音频码率",
     ]) {
-      expect(html.indexOf(label)).toBeGreaterThan(panelStart);
+      expect(expanded).toContain(label);
     }
-    expect(html).toContain("58.5 fps");
-    expect(html).toContain("VP8");
+    expect(expanded).toContain("58.5 fps");
+    expect(expanded).toContain("VP8");
   });
 
   it("shows the negotiated video codec but omits browser-internal transport details", () => {
     const html = renderToStaticMarkup(
-      createElement(StatsGrid, { metrics, direction: "send" }),
+      createElement(MetricCells, {
+        metrics,
+        direction: "send",
+        expanded: true,
+        onToggle: () => undefined,
+      }),
     );
 
-    expect(html).toContain("<dt>视频编码</dt><dd>VP8</dd>");
+    expect(html).toContain("VP8");
     for (const omitted of [
       "音频 Codec",
       "候选路径",
@@ -94,42 +107,43 @@ describe("StatsGrid progressive disclosure", () => {
       "STUN 响应",
       "candidate-pair-7",
       "192.0.2.10",
+      "2001:db8::10",
       "当前 RID",
       "max-fs=8160",
       "请求 / 应用",
     ]) {
       expect(html).not.toContain(omitted);
     }
-    expect(html).not.toContain("详细指标");
-    expect(html).not.toContain("aria-expanded");
   });
 
   it("shows codecs only when the negotiated contract is unexpected", () => {
     const html = renderToStaticMarkup(
-      createElement(StatsGrid, {
+      createElement(MetricCells, {
         metrics: {
           ...metrics,
           codec: "video/VP9",
           audioCodec: "audio/PCMU",
         },
         direction: "receive",
+        expanded: false,
+        onToggle: () => undefined,
       }),
     );
 
     expect(html).toContain("视频编码为 VP9，预期 H264 或 VP8");
     expect(html).toContain("音频编码为 PCMU，预期 Opus");
-    expect(html).not.toContain("视频 Codec");
-    expect(html).not.toContain("音频 Codec");
   });
 
   it("does not expose an unknown browser quality-limitation value", () => {
     const html = renderToStaticMarkup(
-      createElement(StatsGrid, {
+      createElement(MetricCells, {
         metrics: {
           ...metrics,
           qualityLimitationReason: "browser-internal-sentinel",
         },
         direction: "send",
+        expanded: true,
+        onToggle: () => undefined,
       }),
     );
 
@@ -152,15 +166,19 @@ describe("StatsGrid progressive disclosure", () => {
       intervalAudioConcealmentEvents: 3,
     } satisfies ConnectionMetrics;
     const receiveHtml = renderToStaticMarkup(
-      createElement(StatsGrid, {
+      createElement(MetricCells, {
         metrics: receiverMetrics,
         direction: "receive",
+        expanded: true,
+        onToggle: () => undefined,
       }),
     );
     const sendHtml = renderToStaticMarkup(
-      createElement(StatsGrid, {
+      createElement(MetricCells, {
         metrics: receiverMetrics,
         direction: "send",
+        expanded: true,
+        onToggle: () => undefined,
       }),
     );
 
@@ -185,14 +203,35 @@ describe("StatsGrid progressive disclosure", () => {
 
   it("does not render an empty second level", () => {
     const html = renderToStaticMarkup(
-      createElement(StatsGrid, {
+      createElement(MetricCells, {
         metrics: EMPTY_METRICS,
         direction: "receive",
-        progressive: true,
+        expanded: false,
+        onToggle: () => undefined,
       }),
     );
 
     expect(html).not.toContain("详细指标");
     expect(html).not.toContain("aria-expanded");
   });
+
+  it("omits capture input when it matches the delivered picture", () => {
+    const html = renderToStaticMarkup(
+      createElement(MetricCells, {
+        metrics: {
+          ...metrics,
+          resolution: "1920x1080",
+          framesPerSecond: 60,
+          captureWidth: 1920,
+          captureHeight: 1080,
+          captureFramesPerSecond: 60,
+        },
+        direction: "send",
+        expanded: true,
+        onToggle: () => undefined,
+      }),
+    );
+
+    expect(html).not.toContain("捕获设置");
+  });
 });
diff --git a/tests/route-tree.test.ts b/tests/route-tree.test.ts
new file mode 100644
index 0000000..975f1aa
--- /dev/null
+++ b/tests/route-tree.test.ts
@@ -0,0 +1,124 @@
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+
+import { RouteTree } from "../src/client/components/living/RouteTree.tsx";
+import { labelParticipantSnapshot } from "../src/client/lib/viewer-presence.ts";
+import { setCopy } from "../src/client/ui/copy.ts";
+
+setCopy({ lang: "zh", vis: false });
+
+describe("RouteTree", () => {
+  it("disambiguates Host and Viewer names without exposing unique peer IDs", () => {
+    const { host, viewers } = labelParticipantSnapshot([
+      {
+        role: "host",
+        peerId: "host_private_123456",
+        displayName: "同名",
+        upstream: { kind: "none" },
+      },
+      {
+        role: "viewer",
+        peerId: "viewer_private_root_654321",
+        displayName: "同名",
+        upstream: { kind: "peer", peerId: "host_private_123456" },
+      },
+      {
+        role: "viewer",
+        peerId: "viewer_private_child_456789",
+        displayName: "朋友乙",
+        upstream: { kind: "peer", peerId: "viewer_private_root_654321" },
+      },
+      {
+        role: "viewer",
+        peerId: "viewer_private_sfu_789012",
+        displayName: "朋友丙",
+        upstream: { kind: "sfu" },
+      },
+    ]);
+
+    const html = renderToStaticMarkup(
+      createElement(RouteTree, {
+        hostPeerId: host?.peerId ?? null,
+        hostLabel: host?.label ?? "分享者",
+        viewers,
+        selfPeerId: null,
+      }),
+    );
+
+    expect(html).toContain("同名 (123456)");
+    expect(html).toContain("同名 (654321)");
+    expect(html).toContain("朋友乙");
+    expect(html).toContain("朋友丙");
+    expect(html).toContain("媒体服务器");
+    expect(html).toContain("分享者");
+    expect(html).not.toContain("host_private_123456");
+    expect(html).not.toContain("viewer_private_root_654321");
+    expect(html).not.toContain("viewer_private_child_456789");
+    expect(html).not.toContain("viewer_private_sfu_789012");
+  });
+
+  it("keeps the tree text-free in visual mode", () => {
+    const { host, viewers } = labelParticipantSnapshot([
+      {
+        role: "host",
+        peerId: "host_abc12345",
+        displayName: "阿舟",
+        upstream: { kind: "none" },
+      },
+      {
+        role: "viewer",
+        peerId: "viewer_def67890",
+        displayName: "阿茶",
+        upstream: { kind: "peer", peerId: "host_abc12345" },
+      },
+    ]);
+    setCopy({ vis: true });
+    const html = renderToStaticMarkup(
+      createElement(RouteTree, {
+        hostPeerId: host?.peerId ?? null,
+        hostLabel: host?.label ?? "分享者",
+        viewers,
+        selfPeerId: null,
+      }),
+    );
+    expect(html).not.toContain("<text");
+    // Accessible names ride on aria-label: <title> doubles as a native hover
+    // tooltip, which leaks localized UI text into the zero-text mode.
+    expect(html).not.toContain("<title");
+    expect(html).toContain('aria-label="阿茶"');
+    setCopy({ vis: false });
+  });
+
+  it("gives every reachable depth its own horizontal column", () => {
+    const participants = [
+      {
+        role: "host" as const,
+        peerId: "host",
+        displayName: "Host",
+        upstream: { kind: "none" as const },
+      },
+      ...Array.from({ length: 5 }, (_, index) => ({
+        role: "viewer" as const,
+        peerId: `viewer-${index}`,
+        displayName: `Viewer ${index}`,
+        upstream: {
+          kind: "peer" as const,
+          peerId: index === 0 ? "host" : `viewer-${index - 1}`,
+        },
+      })),
+    ];
+    const { host, viewers } = labelParticipantSnapshot(participants);
+    const html = renderToStaticMarkup(
+      createElement(RouteTree, {
+        hostPeerId: host?.peerId ?? null,
+        hostLabel: host?.label ?? "Host",
+        viewers,
+      }),
+    );
+    const width = Number(html.match(/viewBox="0 0 (\d+) /)?.[1]);
+
+    expect(width).toBeGreaterThan(640);
+    expect(new Set([...html.matchAll(/translate\((\d+),/g)].map((match) => match[1])).size).toBeGreaterThanOrEqual(6);
+  });
+});
diff --git a/tests/stage-entry-actions.test.ts b/tests/stage-entry-actions.test.ts
deleted file mode 100644
index 4909237..0000000
--- a/tests/stage-entry-actions.test.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import { readFileSync } from "node:fs";
-import { join } from "node:path";
-
-import { createElement } from "react";
-import { renderToStaticMarkup } from "react-dom/server";
-import { describe, expect, it } from "vitest";
-
-import { StageEntryActions } from "../src/client/components/StageEntryActions.tsx";
-
-describe("Host stage entry layout", () => {
-  it("keeps disclosure as the immediate sibling after the fixed action row", () => {
-    const closed = renderToStaticMarkup(
-      createElement(StageEntryActions, {
-        joiningRoom: false,
-        onJoinToggle: () => undefined,
-        onStartSharing: () => undefined,
-      }),
-    );
-    const open = renderToStaticMarkup(
-      createElement(StageEntryActions, {
-        joiningRoom: true,
-        onJoinToggle: () => undefined,
-        onStartSharing: () => undefined,
-      }),
-    );
-
-    expect(closed.match(/class="entry-action"/g)).toHaveLength(2);
-    expect(open.match(/class="entry-action"/g)).toHaveLength(2);
-    expect(open).toMatch(
-      /class="entry-actions"[\s\S]*?<\/div><form[^>]*class="room-code-entry is-inline"/,
-    );
-    const row = open.match(/<div class="entry-actions">([\s\S]*?)<\/div>/)?.[1];
-    expect(row).toContain("开始分享");
-    expect(row).toContain("加入房间");
-    expect(open).toContain('title="输入房间号加入观看"');
-    expect(row).not.toContain('class="room-code-entry');
-    expect(row).not.toContain("<form");
-    expect(open).toContain('aria-expanded="true"');
-    expect(open).toContain('id="host-room-code-entry-input"');
-  });
-
-  it("uses bounded tracks for both the row and its independent disclosure", () => {
-    const css = readFileSync(
-      join(import.meta.dirname, "../src/client/styles.css"),
-      "utf8",
-    );
-    expect(css).toMatch(
-      /\.entry-actions\s*\{[\s\S]*?grid-template-columns:\s*minmax\(0, 1fr\) 24px minmax\(0, 1fr\);[\s\S]*?width:\s*min\(520px, calc\(100% - 20px\)\);/,
-    );
-    expect(css).toMatch(
-      /\.stage-entry\s*\{[\s\S]*?grid-template-columns:\s*minmax\(0, 1fr\);[\s\S]*?grid-template-rows:\s*minmax\(0, 1fr\) 44px minmax\(0, 1fr\);/,
-    );
-    expect(css).toMatch(
-      /\.entry-action\s*\{[\s\S]*?height:\s*44px;[\s\S]*?min-height:\s*44px;/,
-    );
-    expect(css).toMatch(
-      /\.room-code-entry\.is-inline\s*\{[\s\S]*?width:\s*min\(520px, calc\(100% - 20px\)\);[\s\S]*?grid-template-columns:\s*minmax\(0, 1fr\) 44px;/,
-    );
-  });
-
-  it("disables share start while room authority is mutating", () => {
-    const markup = renderToStaticMarkup(
-      createElement(StageEntryActions, {
-        joiningRoom: false,
-        startSharingDisabled: true,
-        onJoinToggle: () => undefined,
-        onStartSharing: () => undefined,
-      }),
-    );
-
-    expect(markup).toMatch(/<button[^>]*disabled=""[^>]*>/);
-  });
-});
diff --git a/tests/status-badge.test.ts b/tests/status-badge.test.ts
index 47d45f5..e326b08 100644
--- a/tests/status-badge.test.ts
+++ b/tests/status-badge.test.ts
@@ -2,8 +2,6 @@ import { describe, expect, it } from "vitest";
 
 import {
   hasPeerRouteEvidence,
-  MEDIA_ROUTE_PRESENTATION,
-  ROUTING_STATUS_PRESENTATION,
   viewerReconnectRoute,
   viewerRouteEvidence,
 } from "../src/client/components/status-badge-model.ts";
@@ -18,20 +16,8 @@ const peerSnapshot: PeerSnapshot = {
   error: null,
 };
 
-describe("route status badges", () => {
-  it("uses distinct icon and color language for active P2P and SFU routes", () => {
-    expect(MEDIA_ROUTE_PRESENTATION.p2p).toEqual({
-      tone: "good", label: "P2P", icon: "network",
-    });
-    expect(MEDIA_ROUTE_PRESENTATION.sfu).toEqual({
-      tone: "warning", label: "SFU fallback", icon: "server",
-    });
-  });
-
+describe("route evidence models", () => {
   it("keeps an assigned route neutral before current media evidence", () => {
-    expect(ROUTING_STATUS_PRESENTATION).toEqual({
-      tone: "neutral", label: "线路分配中",
-    });
     expect(viewerRouteEvidence({ kind: "sfu" }, null, null)).toEqual({
       route: null,
       evidence: null,
diff --git a/tests/topology-view.test.ts b/tests/topology-view.test.ts
deleted file mode 100644
index acd185f..0000000
--- a/tests/topology-view.test.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import { createElement } from "react";
-import { renderToStaticMarkup } from "react-dom/server";
-import { describe, expect, it } from "vitest";
-
-import { TopologyView } from "../src/client/components/TopologyView.tsx";
-import { labelParticipantSnapshot } from "../src/client/lib/viewer-presence.ts";
-
-describe("TopologyView", () => {
-  it("disambiguates Host and Viewer names without exposing unique peer IDs", () => {
-    const { host, viewers } = labelParticipantSnapshot([
-      {
-        role: "host",
-        peerId: "host_private_123456",
-        displayName: "同名",
-        upstream: { kind: "none" },
-      },
-      {
-        role: "viewer",
-        peerId: "viewer_private_root_654321",
-        displayName: "同名",
-        upstream: { kind: "peer", peerId: "host_private_123456" },
-      },
-      {
-        role: "viewer",
-        peerId: "viewer_private_child_456789",
-        displayName: "朋友乙",
-        upstream: { kind: "peer", peerId: "viewer_private_root_654321" },
-      },
-      {
-        role: "viewer",
-        peerId: "viewer_private_sfu_789012",
-        displayName: "朋友丙",
-        upstream: { kind: "sfu" },
-      },
-    ]);
-
-    const html = renderToStaticMarkup(
-      createElement(TopologyView, {
-        hostPeerId: host?.peerId ?? null,
-        hostLabel: host?.label ?? "分享者",
-        viewers,
-      }),
-    );
-
-    expect(html).toContain('aria-label="当前连接拓扑"');
-    expect(html).toContain("同名 (123456)");
-    expect(html).toContain("同名 (654321)");
-    expect(html).toContain("朋友乙");
-    expect(html).toContain("朋友丙");
-    expect(html).toContain("媒体服务器");
-    expect(html).not.toContain("host_private_123456");
-    expect(html).not.toContain("viewer_private_root_654321");
-    expect(html).not.toContain("viewer_private_child_456789");
-    expect(html).not.toContain("viewer_private_sfu_789012");
-  });
-});
diff --git a/tests/viewer-presentation.test.ts b/tests/viewer-presentation.test.ts
index ae0a224..506bcfd 100644
--- a/tests/viewer-presentation.test.ts
+++ b/tests/viewer-presentation.test.ts
@@ -32,7 +32,7 @@ describe("Viewer presentation reducer", () => {
     );
     expect(deriveViewerPresentation(preparing)).toMatchObject({
       stage: "preparing-p2p",
-      message: "正在建立 P2P",
+      messageKey: "viewer.msg.preparingP2p",
       overlay: "blocking",
     });
 
@@ -67,7 +67,7 @@ describe("Viewer presentation reducer", () => {
     );
     expect(deriveViewerPresentation(blocked)).toMatchObject({
       stage: "needs-play",
-      message: "点击播放",
+      messageKey: "viewer.msg.needsPlay",
       overlay: "status",
       failureCode: "AUTOPLAY_BLOCKED",
     });
@@ -293,7 +293,7 @@ describe("Viewer presentation reducer", () => {
     expect(deriveViewerPresentation(state)).toMatchObject({
       stage: "recovering",
       overlay: "none",
-      notice: "服务器连接正在恢复，画面仍在播放",
+      noticeKey: "viewer.notice.signalRecovering",
     });
   });
 
@@ -315,8 +315,8 @@ describe("Viewer presentation reducer", () => {
     expect(resumed.connection).toBe("connected");
     expect(deriveViewerPresentation(resumed)).toMatchObject({
       stage: "playing",
-      message: "正在播放",
-      notice: null,
+      messageKey: "viewer.msg.playing",
+      noticeKey: null,
     });
   });
 
@@ -388,7 +388,7 @@ describe("Viewer presentation reducer", () => {
       stage: "playing",
       overlay: "none",
       hasCurrentFrame: true,
-      notice: "分享者连接已中断，画面可能冻结",
+      noticeKey: "viewer.notice.hostOffline",
     });
     expect(
       reduceViewerPresentation(offlineWithMedia, {
@@ -423,9 +423,9 @@ describe("Viewer presentation reducer", () => {
 
     expect(deriveViewerPresentation(reconnecting)).toMatchObject({
       stage: "recovering",
-      message: "正在恢复连接",
+      messageKey: "viewer.msg.recovering",
       overlay: "none",
-      notice: "服务器连接正在恢复，画面仍在播放",
+      noticeKey: "viewer.notice.signalRecovering",
     });
   });
 
@@ -490,7 +490,7 @@ describe("Viewer presentation reducer", () => {
 
     expect(deriveViewerPresentation(failed)).toMatchObject({
       stage: "route-failed",
-      message: "没有可用的媒体线路",
+      messageKey: "viewer.msg.routeFailed",
       overlay: "status",
       hasCurrentFrame: false,
       hasRetainedFrame: true,
@@ -577,7 +577,7 @@ describe("Viewer presentation reducer", () => {
     });
     expect(deriveViewerPresentation(denied)).toMatchObject({
       stage: "access-denied",
-      message: "当前无法通过房间号加入",
+      messageKey: "viewer.msg.denied",
     });
 
     const notFound = reduceViewerPresentation(failed, {
@@ -587,7 +587,7 @@ describe("Viewer presentation reducer", () => {
     });
     expect(deriveViewerPresentation(notFound)).toMatchObject({
       stage: "room-not-found",
-      message: "房间不存在或已过期",
+      messageKey: "viewer.msg.notFound",
     });
   });
 
@@ -630,7 +630,7 @@ describe("Viewer presentation reducer", () => {
     );
     expect(deriveViewerPresentation(restarted)).toMatchObject({
       stage: "playing",
-      message: "正在播放",
+      messageKey: "viewer.msg.playing",
       overlay: "none",
     });
   });