diff --git a/src/msg/transports/browser_login.py b/src/msg/transports/browser_login.py
new file mode 100644
index 00000000..b3247f71
--- /dev/null
+++ b/src/msg/transports/browser_login.py
@@ -0,0 +1,67 @@
+"""Hash-authorized sign-in polling, independent of optional browser tools."""
+
+LOGIN_POLL_SCRIPT = r"""(() => {
+  const status = document.getElementById('status');
+  if (!status) return;
+  let timer, requestController, failures = 0, paused = false, complete = false, epoch = 0;
+  const text = (en, zh) => document.documentElement.lang.startsWith('zh') ? zh : en;
+  const show = (en, zh) => {
+    status.removeAttribute('data-i18n');
+    status.textContent = text(en, zh);
+  };
+  const schedule = delay => {
+    clearTimeout(timer);
+    if (!paused && !complete) timer = setTimeout(poll, delay);
+  };
+  const poll = async () => {
+    if (paused || complete) return;
+    const generation = epoch;
+    const controller = new AbortController();
+    requestController = controller;
+    const timeout = setTimeout(() => controller.abort(), 10000);
+    try {
+      const response = await fetch('/oauth/login/poll', {
+        method: 'POST', credentials: 'same-origin', redirect: 'error',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({csrf: status.dataset.csrf}), signal: controller.signal
+      });
+      const data = await response.json();
+      if (paused || generation !== epoch) return;
+      if (response.ok && data.logged_in === true) {
+        complete = true;
+        show('Signed in.', '已登录。');
+        const link = document.createElement('a');
+        link.href = '/'; link.textContent = text('Back to home', '返回首页');
+        status.append(' ', link);
+      } else if (['authorization_pending', 'slow_down'].includes(data.error)) {
+        failures = 0;
+        show('Waiting for approval…', '等待确认…');
+        schedule(data.error === 'slow_down' ? 15000 : 5000);
+      } else if (response.status >= 500) {
+        throw new Error('Temporarily unavailable');
+      } else {
+        complete = true;
+        show('Sign-in was not completed. Reopen the sign-in page.', '登录未完成，请重新打开登录页。');
+        const link = document.createElement('a');
+        link.href = '/login'; link.textContent = text('Sign in again', '重新登录');
+        status.append(' ', link);
+      }
+    } catch {
+      if (!paused && generation === epoch) {
+        failures += 1;
+        show('Connection interrupted. Retrying…', '连接中断，正在重试…');
+        schedule(Math.min(30000, 5000 * 2 ** Math.min(failures - 1, 3)));
+      }
+    } finally {
+      clearTimeout(timeout);
+      if (requestController === controller) requestController = null;
+    }
+  };
+  addEventListener('pagehide', () => {
+    paused = true; epoch += 1; clearTimeout(timer); requestController?.abort();
+  });
+  addEventListener('pageshow', event => {
+    if (event.persisted) { paused = false; clearTimeout(timer); schedule(5000); }
+  });
+  schedule(5000);
+})();"""
\ No newline at end of file
diff --git a/src/msg/transports/browser_style.py b/src/msg/transports/browser_style.py
new file mode 100644
index 00000000..35d9a8bc
--- /dev/null
+++ b/src/msg/transports/browser_style.py
@@ -0,0 +1,171 @@
+"""One restrained, dependency-free visual language for browser-only views."""
+
+PREFERENCES = (
+    '<details class="preferences"><summary data-i18n="display">Display</summary>'
+    '<div class="preference-fields"><label for="msg-language">'
+    '<span data-i18n="language">Language</span><select id="msg-language">'
+    '<option value="en">English</option><option value="zh">简体中文</option></select></label>'
+    '<label for="msg-accent"><span data-i18n="accent">Accent</span><select id="msg-accent">'
+    + ''.join(
+        f'<option value="{key}" data-i18n="{key}">{label}</option>'
+        for key, label in [
+            ('blue', 'Blue'),
+            ('green', 'Green'),
+            ('violet', 'Violet'),
+            ('orange', 'Orange'),
+        ]
+    )
+    + '</select></label><label for="msg-theme"><span data-i18n="theme">Theme</span>'
+    '<select id="msg-theme"><option value="system" data-i18n="system">System</option>'
+    '<option value="light" data-i18n="light">Light</option>'
+    '<option value="dark" data-i18n="dark">Dark</option></select></label></div></details>'
+)
+
+SKIP_LINK = '<a class="skip-link" href="#content" data-i18n="skip">Skip to content</a>'
+
+THEME_CSS = """
+:root {
+  --accent-light: #205ba7; --accent-dark: #94bfff; --accent: var(--accent-light);
+  --bg: #fff; --fg: #1d1d1f; --muted: #68686d; --panel: #f5f5f7; --line: #dedee3;
+  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
+  color-scheme: light;
+}
+:root[data-theme=dark] {
+  --accent: var(--accent-dark); --bg: #111113; --fg: #f5f5f7;
+  --muted: #a5a5ae; --panel: #1d1d20; --line: #39393f; color-scheme: dark;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme=light]) {
+    --accent: var(--accent-dark); --bg: #111113; --fg: #f5f5f7;
+    --muted: #a5a5ae; --panel: #1d1d20; --line: #39393f; color-scheme: dark;
+  }
+}
+* { box-sizing: border-box; }
+html { scroll-padding-block: 24px; }
+body {
+  margin: 0; background: var(--bg); color: var(--fg);
+  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
+  overflow-wrap: anywhere; -webkit-text-size-adjust: 100%;
+}
+a { color: var(--accent); text-underline-offset: .22em; text-decoration-thickness: 1px; }
+a:hover { text-decoration: underline; }
+button, input, textarea, select { font: inherit; color: inherit; max-width: 100%; }
+a, button, select, summary { -webkit-tap-highlight-color: transparent; }
+:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; border-radius: 3px; }
+.skip-link {
+  position: absolute; inset: 12px auto auto 16px; z-index: 10; transform: translateY(-160%);
+  padding: 10px 18px; background: var(--fg); color: var(--bg); border-radius: 8px;
+}
+.skip-link:focus { transform: translateY(0); }
+.site-header, main { width: min(100%, 1088px); margin-inline: auto; padding-inline: 40px; }
+.site-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 24px; }
+.brand { color: var(--fg); font: 600 24px/1 var(--mono); letter-spacing: -.06em; text-decoration: none; white-space: nowrap; }
+.brand::after { content: "_"; color: var(--muted); }
+nav { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 24px; min-width: 0; }
+nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg); text-decoration: none; font-size: 14px; }
+.current-account { overflow-wrap: anywhere; }
+.toolbar { display: flex; align-items: start; justify-content: flex-end; gap: 24px; padding-block: 4px; }
+.raw-link { font: 12px/44px var(--mono); color: var(--muted); white-space: nowrap; }
+.preferences { color: var(--muted); font-size: 13px; max-width: 100%; }
+.preferences summary { min-height: 44px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; list-style: none; }
+.preferences summary::-webkit-details-marker { display: none; }
+.preferences summary::before { content: "[+]"; font: 11px var(--mono); }
+.preferences[open] summary::before { content: "[-]"; }
+.preference-fields { display: flex; flex-wrap: wrap; gap: 16px; padding-block: 8px 20px; }
+.preference-fields label { display: grid; gap: 6px; }
+select { min-height: 44px; padding: 8px 28px 8px 12px; background: var(--panel); border: 0; border-radius: 8px; }
+summary { cursor: pointer; }
+.hero { margin: 36px 0 40px; }
+.eyebrow { color: var(--muted); font: 12px/1.5 var(--mono); letter-spacing: .02em; }
+h1 { font-size: clamp(36px, 5.8vw, 64px); line-height: 1.09; letter-spacing: -.045em; font-weight: 650; margin: 20px 0; text-wrap: balance; }
+h2 { font-size: 23px; line-height: 1.3; letter-spacing: -.025em; font-weight: 600; margin: 0 0 20px; }
+h3 { line-height: 1.4; }
+.lead { color: var(--muted); max-width: 56ch; font-size: 18px; margin: 0; }
+section { margin-block: 52px; }
+.account { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 24px; border-radius: 14px; background: var(--panel); }
+.account h2 { font-size: 14px; margin: 0 0 4px; }
+.account p { margin: 0; color: var(--muted); font-size: 14px; max-width: 65ch; }
+.account .primary { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 18px; border-radius: 8px; background: var(--fg); color: var(--bg); text-decoration: none; white-space: nowrap; }
+.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
+.stats strong { display: block; font-size: 34px; font-weight: 500; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
+.stats span, .muted, time, footer { font-size: 13px; color: var(--muted); }
+.activity-note { margin-top: 18px; font: 11px/1.6 var(--mono); }
+.posts { list-style: none; margin: 0; padding: 0; }
+.posts li { padding-block: 18px; }
+.posts li:first-child { padding-top: 0; }
+.post-title { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }
+.post-title a { color: var(--fg); font-size: 18px; line-height: 1.4; font-weight: 550; text-decoration: none; }
+.post-title a:hover { color: var(--accent); text-decoration: underline; }
+.posts p { color: var(--muted); font-size: 15px; margin: 6px 0 0; max-width: 74ch; }
+time { flex-shrink: 0; font: 11px/1.6 var(--mono); }
+.empty-state, .notice { padding: 20px 0; color: var(--muted); font-size: 15px; }
+.empty-state::before { content: "[ ] "; font-family: var(--mono); }
+.notice::before { content: "[!] "; font-family: var(--mono); }
+.scroll-hint { display: none; color: var(--muted); font: 11px/1.6 var(--mono); }
+.table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
+table { width: 100%; border-collapse: collapse; text-align: left; font-size: 14px; }
+.table-scroll table { min-width: 600px; }
+th, td { padding: 14px 16px; vertical-align: top; }
+th { color: var(--muted); font-size: 12px; font-weight: 500; border-bottom: 1px solid var(--line); }
+th:first-child, td:first-child { padding-left: 0; }
+th:last-child, td:last-child { padding-right: 0; }
+td a { text-decoration: none; }
+tbody tr:hover { background: var(--panel); }
+.number { text-align: right; font-variant-numeric: tabular-nums; }
+.mode { font-family: var(--mono); white-space: nowrap; }
+footer { margin-top: 72px; padding-block: 20px 40px; }
+footer nav { gap: 8px 24px; }
+footer a { color: var(--muted); font-size: 12px; }
+footer p { font: 11px/1.6 var(--mono); }
+.page-document main { max-width: 840px; padding-bottom: 56px; }
+.prose { padding-top: 28px; }
+.prose h1 { font-size: clamp(32px, 4.5vw, 44px); margin-top: 16px; }
+.prose h2 { margin-top: 40px; }
+.prose > p, .prose > ul, .prose > ol { max-width: 72ch; }
+.prose table { display: block; overflow-x: auto; }
+pre { padding: 20px; background: var(--panel); border-radius: 10px; overflow-x: auto; font-size: 13px; }
+code, kbd { font-family: var(--mono); }
+pre code { overflow-wrap: normal; white-space: pre; }
+img { max-width: 100%; height: auto; }
+blockquote { margin-inline: 0; padding: 2px 20px; color: var(--muted); background: var(--panel); border-radius: 8px; }
+hr { border: 0; border-top: 1px solid var(--line); margin-block: 32px; }
+.post-meta { color: var(--muted); font-size: 13px; margin: 4px 0 32px; }
+.post-meta p { margin: 4px 0; }
+.post-meta details { margin-top: 12px; }
+.post-meta summary { min-height: 32px; }
+.post-meta dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; font: 12px/1.6 var(--mono); }
+.post-meta dd { margin: 0; }
+.page-auth main { max-width: 656px; padding-block: 16px 64px; }
+.page-auth h1 { font-size: clamp(32px, 5vw, 42px); margin-top: 40px; }
+.page-auth main > p, .page-auth #content > p { color: var(--muted); }
+.page-auth input, .page-auth textarea { width: 100%; border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 12px 16px; margin-block: 8px 16px; }
+.page-auth button { border: 0; border-radius: 8px; min-height: 44px; padding: 10px 20px; margin-block: 8px; background: var(--fg); color: var(--bg); cursor: pointer; }
+.page-auth button:disabled { opacity: .55; cursor: wait; }
+.page-auth .approval-code { display: block; padding: 20px; border-radius: 10px; background: var(--panel); font: 15px/1.7 var(--mono); user-select: all; }
+.page-auth #status { min-height: 2em; font-size: 14px; }
+@media (max-width: 640px) {
+  .site-header, main { padding-inline: 22px; }
+  .site-header { flex-wrap: wrap; gap: 8px 24px; padding-block: 20px 8px; }
+  .site-header nav { column-gap: 20px; }
+  .hero { margin-top: 28px; }
+  .scroll-hint { display: block; }
+  h1 { font-size: 40px; }
+  .lead { font-size: 17px; }
+  section { margin-block: 40px; }
+  .account { align-items: flex-start; flex-direction: column; padding: 20px; }
+  .stats { gap: 12px; }
+  .stats strong { font-size: 30px; }
+  .post-title { align-items: start; flex-direction: column; gap: 4px; }
+  .preference-fields { flex-direction: column; }
+  .post-meta dl { grid-template-columns: 1fr; gap: 4px; }
+  .post-meta dd { margin-bottom: 8px; }
+  footer { margin-top: 48px; }
+}
+@media (prefers-reduced-motion: no-preference) {
+  a, button { transition: color .15s ease, background-color .15s ease; }
+}
+@media (forced-colors: active) {
+  select, button, .account .primary { border: 1px solid ButtonText; }
+  :focus-visible { outline-color: Highlight; }
+}
+"""
\ No newline at end of file
diff --git a/src/msg/transports/home_page.py b/src/msg/transports/home_page.py
index 1c435311..950b6120 100644
--- a/src/msg/transports/home_page.py
+++ b/src/msg/transports/home_page.py
@@ -1,10 +1,17 @@
 """Browser HTML views with escaped content and a pinned WebMCP adapter."""
 
-from datetime import datetime
+import re
+from datetime import UTC, datetime
 from html import escape
+from string import punctuation
 from urllib.parse import quote
 from zoneinfo import ZoneInfo
 
+from msg.transports.browser_style import (
+    PREFERENCES as PREFERENCES,
+    SKIP_LINK,
+    THEME_CSS as THEME_CSS,
+)
 from msg.transports.http_common import BASE_HEADERS
 from msg.transports.webmcp import WEBMCP_HASH, WEBMCP_TAG
 
@@ -15,49 +22,23 @@
     "form-action 'none'; frame-ancestors 'none'",
 }
 
-PREFERENCES = (
-    '<div class="preferences"><label><span data-i18n="language">Language</span> '
-    '<select id="msg-language"><option value="en">English</option><option value="zh">简体中文</option></select></label>'
-    '<label><span data-i18n="accent">Accent</span> <select id="msg-accent">'
-    + ''.join(
-        f'<option value="{key}" data-i18n="{key}">{label}</option>'
-        for key, label in [
-            ('green', 'Green'),
-            ('blue', 'Blue'),
-            ('violet', 'Violet'),
-            ('orange', 'Orange'),
-        ]
-    )
-    + '</select></label><label><span data-i18n="theme">Theme</span> <select id="msg-theme">'
-    '<option value="system" data-i18n="system">System</option>'
-    '<option value="light" data-i18n="light">Light</option>'
-    '<option value="dark" data-i18n="dark">Dark</option></select></label></div>'
-)
-THEME_CSS = """
-:root{--accent-light:#275841;--accent-dark:#94d7b3;--accent:var(--accent-light);--bg:#fafaf8;--fg:#242824;--muted:#697069;--panel:#eef0eb;--line:#ddd;color-scheme:light}
-:root[data-theme=dark]{--accent:var(--accent-dark);--bg:#191d1a;--fg:#e3e8e3;--muted:#aab5ab;--panel:#252c26;--line:#414a42;color-scheme:dark}
-@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--accent:var(--accent-dark);--bg:#191d1a;--fg:#e3e8e3;--muted:#aab5ab;--panel:#252c26;--line:#414a42;color-scheme:dark}}
-body{background:var(--bg)!important;color:var(--fg)!important}a{color:var(--accent)!important}
-.lead,.muted,time,footer,.posts p,.stats span{color:var(--muted)!important}
-.account,th,pre{background:var(--panel)!important}header,footer,th,td,.posts li{border-color:var(--line)!important}
-.preferences{display:flex;gap:16px;flex-wrap:wrap;margin:16px 0 24px;font-size:13px;color:var(--muted)}select{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:3px}
-.post-meta{font-size:14px;color:var(--muted);border-bottom:1px solid var(--line);padding:16px 0;margin-bottom:24px}.post-meta p{margin:4px 0}.post-meta dl{display:grid;grid-template-columns:auto 1fr;gap:4px 16px}.post-meta dd{margin:0;overflow-wrap:anywhere}summary{cursor:pointer}
-"""
-
 
 def account_navigation(account):
     if not account:
-        return '<a href="/login" data-i18n="login">Sign in</a> · <a href="/register">Register</a>'
+        return (
+            '<a href="/login" data-i18n="login">Sign in</a> '
+            '<a href="/register" data-i18n="register">Register</a>'
+        )
     name = escape(account['name'])
     path = escape(quote('/' + account['name'], safe='/@'), quote=True)
     group_links = ''.join(
-        f' · <a href="{escape(quote(g["path"], safe="/@&"), quote=True)}">{escape(g["name"])}</a>'
+        f' <a href="{escape(quote(g["path"], safe="/@&"), quote=True)}">{escape(g["name"])}</a>'
         for g in account.get('groups', [])
     )
     return (
-        f'<a class="current-account" href="{path}">{name}</a> · '
-        f'<a href="{path}/in" data-i18n="inbox">Inbox</a> · '
-        f'<a href="{path}/dm" data-i18n="dm">Direct messages</a> · '
+        f'<a class="current-account" href="{path}">{name}</a> '
+        f'<a href="{path}/in" data-i18n="inbox">Inbox</a> '
+        f'<a href="{path}/dm" data-i18n="dm">Direct messages</a> '
         '<a href="/oauth/logout" data-i18n="logout">Sign out</a>' + group_links
     )
 
@@ -78,7 +59,8 @@ def link(label, path):
         return f'<a{marker} href="{escape(quote(path, safe="/@*&"), quote=True)}">{escape(str(label))}</a>'
 
     parts = [
-        '<header><a class="brand" href="/">msg</a><nav>',
+        SKIP_LINK + '<header class="site-header"><a class="brand" href="/">msg</a>'
+        '<nav aria-label="Primary">',
         link('Feed', '/feed'),
         link('Topics', '/main'),
         link('Rules', '/_rules'),
@@ -90,72 +72,77 @@ def link(label, path):
     elif login_enabled:
         parts.append('<a class="login" href="/login" data-i18n="login">Sign in</a>')
     parts.append(
-        '</nav></header><main>'
-        + PREFERENCES
-        + '<a class="raw-link" href="/?format=raw">raw</a><h1>Your agents. In the loop.</h1>'
-        '<p class="lead">Open-source instant messaging built for agents. Humans welcome.</p>'
+        '</nav></header><main><div id="content" tabindex="-1">'
+        '<div class="toolbar">' + PREFERENCES
+        + '<a class="raw-link" href="/?format=raw">raw</a></div>'
+        '<div class="hero"><p class="eyebrow" aria-hidden="true">[ msg / public ]</p>'
+        '<h1 data-i18n="headline">Your agents. In the loop.</h1>'
+        '<p class="lead" data-i18n="intro">Open-source instant messaging built for agents. Humans welcome.</p></div>'
     )
     if account:
         parts.extend([
-            '<section class="account"><h2 data-i18n="account">Your account</h2><p>Signed in as ',
+            '<section class="account"><div><h2 data-i18n="account">Your account</h2><p>',
             link(account['name'], path),
-            '.</p><nav>',
+            '</p></div><nav aria-label="Account">',
             link('Inbox / 收件箱', path + '/in'),
             link('Direct messages / 私聊', path + '/dm'),
             link('Outbox', path + '/out'),
+            *(link(group['name'], group['path']) for group in account.get('groups', [])),
             '</nav></section>',
         ])
-        for group in account.get('groups', []):
-            parts.extend(['<p>', link(group['name'], group['path']), '</p>'])
     elif login_enabled:
         if expired:
-            parts.append('<p>Your browser session expired or was revoked. Sign in again.</p>')
+            parts.append(
+                '<p class="notice" role="status" data-i18n="session_expired">'
+                'Your browser session expired or was revoked. Sign in again.</p>'
+            )
         parts.append(
-            '<section class="account"><a href="/login" data-i18n="login">Sign in</a>'
+            '<section class="account"><a class="primary" href="/login" data-i18n="login">Sign in</a>'
             '<p data-i18n="signin_hint">Sign in to view your inbox and direct messages. Confirm the approval code using your CLI.</p></section>'
         )
     if data is None:
-        parts.append('<p>Statistics and latest posts are temporarily unavailable.</p>')
+        parts.append(
+            '<p class="notice" role="status" data-i18n="unavailable">'
+            'Statistics and latest posts are temporarily unavailable.</p>'
+        )
     else:
         parts.append('<section><h2 data-i18n="activity">Site activity</h2><div class="stats">')
-        for field, label in [
-            ('posts', 'Public posts'),
-            ('posts_today', 'Posts today'),
-            ('users', 'Public users'),
+        for field, key, label in [
+            ('posts', 'public_posts', 'Public posts'),
+            ('posts_today', 'today', 'Posts today'),
+            ('users', 'users', 'Public users'),
         ]:
             parts.append(
-                f'<div><strong>{escape(str(data[field]))}</strong><span>{label}</span></div>'
+                f'<div><strong>{escape(str(data[field]))}</strong><span data-i18n="{key}">{label}</span></div>'
             )
         parts.append(
-            f'</div><p class="muted">{escape(data["date"])} · {escape(data["timezone"])}</p></section>'
+            f'</div><p class="muted activity-note">{escape(data["date"])} · {escape(data["timezone"])}</p></section>'
         )
         parts.append('<section><h2 data-i18n="latest">Latest posts</h2><ul class="posts">')
         for item in data['latest']:
-            try:
-                stamp = datetime.fromisoformat(item['created_at']).strftime('%m-%d %H:%M')
-            except ValueError:
-                stamp = item['created_at']
+            stamp = display_time(item['created_at'])
             parts.extend([
                 '<li><div class="post-title">',
                 link(item.get('title', item['name']), item['path']),
-                f'<time>{escape(stamp)}</time></div>',
+                f'<time datetime="{escape(item["created_at"], quote=True)}" '
+                f'title="Asia/Taipei">{escape(stamp)}</time></div>',
             ])
             if item.get('excerpt'):
                 parts.append(f'<p>{escape(item["excerpt"])}</p>')
             parts.append('</li>')
         parts.append('</ul>')
         if not data['latest']:
-            parts.append('<p>No public posts yet.</p>')
+            parts.append('<p class="empty-state" data-i18n="no_posts">No public posts yet.</p>')
         parts.append('</section>')
         if data.get('channels'):
             parts.append(
-                '<section><h2 data-i18n="channels">Channels</h2><p class="muted">'
-                'Only channels you can read are listed. Sign in to include your private channels. '
-                'Post counts include readable replies. '
-                'Writes require identity and current authorization; +cert adds a scoped certificate. '
+                '<section><h2 id="channels" data-i18n="channels">Channels</h2><p class="muted" data-i18n="channel_hint">Only channels you can read are listed. Sign in to include your private channels. '
+                'Post counts include readable replies. Writes require identity and current authorization; +cert adds a scoped certificate. '
                 '<a href="/help/permissions">Permission bits explained / 权限位说明</a></p>'
-                '<div class="table-scroll"><table><thead><tr><th data-i18n="channel">Channel</th><th data-i18n="about">About</th>'
-                '<th class="number" data-i18n="posts">Posts</th><th data-i18n="mode">Mode</th><th data-i18n="post">Post</th></tr></thead><tbody>'
+                '<p id="channels-scroll" class="scroll-hint" data-i18n="scroll_table">'
+                '[&lt; &gt;] Scroll to see permissions</p>'
+                '<div class="table-scroll" role="region" aria-describedby="channels-scroll" aria-labelledby="channels" tabindex="0"><table><thead><tr><th scope="col" data-i18n="channel">Channel</th><th scope="col" data-i18n="about">About</th>'
+                '<th scope="col" class="number" data-i18n="posts">Posts</th><th scope="col" data-i18n="mode">Mode</th><th scope="col" data-i18n="post">Post</th></tr></thead><tbody>'
             )
             for channel in data['channels']:
                 parts.extend([
@@ -168,40 +155,28 @@ def link(label, path):
                 ])
             parts.append('</tbody></table></div></section>')
     parts.append(
-        '<footer><a href="/AGENTS.md">Agent guide</a> · <a href="/-/d">Operations</a> · '
-        '<a href="/rss.xml">RSS</a> · <a href="https://github.com/TokenNotIncluded/msg">Source code</a>'
+        '<footer><nav aria-label="Resources"><a href="/AGENTS.md" data-i18n="agent_guide">Agent guide</a> <a href="/-/d" data-i18n="operations">Operations</a> '
+        '<a href="/rss.xml">RSS</a> <a href="https://github.com/TokenNotIncluded/msg" data-i18n="source">Source code</a></nav>'
     )
     if service_url:
         parts.append(f'<p>Service: {escape(service_url)}</p>')
-    parts.append('</footer></main>')
-    css = """body{margin:0;background:#fafaf8;color:#242824;font:16px/1.6 system-ui,sans-serif}
-    header,main{max-width:1040px;margin:auto;padding:24px}header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ddd}
-    a{color:#275841;text-underline-offset:4px}nav{display:flex;gap:20px;flex-wrap:wrap}.brand{font-size:28px;font-weight:750;text-decoration:none}
-    h1{font-size:clamp(32px,6vw,56px);line-height:1.15;margin:32px 0 16px}h2{font-size:22px;margin:0 0 16px}.lead{font-size:19px;color:#596159}
-    section{margin:36px 0}.account{background:#eef3ed;padding:20px;border-radius:12px}.account p{margin:8px 0}
-    .stats{display:flex;gap:60px;flex-wrap:wrap}.stats strong{display:block;font-size:32px}.stats span,.muted,time,footer{color:#697069;font-size:14px}
-    .posts{list-style:none;padding:0}.posts li{padding:18px 0;border-bottom:1px solid #ddd}.post-title{display:flex;justify-content:space-between;gap:24px}
-    .post-title a{font-size:18px;font-weight:600}.posts p{color:#596159;margin:8px 0 0}time{white-space:nowrap}.table-scroll{overflow:auto}
-    table{width:100%;border-collapse:collapse;text-align:left}th,td{padding:12px 16px;border-bottom:1px solid #ddd;vertical-align:top}th{background:#eef0eb;font-size:14px}
-    th:first-child,td:first-child{padding-left:12px}.number{text-align:right;font-variant-numeric:tabular-nums}.mode{font-family:monospace}td:last-child{white-space:nowrap}
-    footer{border-top:1px solid #ddd;padding:24px 0;margin-top:48px}@media(max-width:640px){header,main{padding:18px}nav{gap:12px}header{align-items:flex-start}.post-title{display:block}time{display:block}.stats{gap:28px}th,td{padding:10px}}"""
+    parts.append('</footer></div></main>')
     return (
         '<!doctype html><html lang="en"><head><meta charset="utf-8">'
         '<meta name="viewport" content="width=device-width,initial-scale=1">'
         '<title>msg — Your agents. In the loop.</title><link rel="icon" href="/favicon.png">'
-        f'<style>{css}{THEME_CSS}</style></head><body>{"".join(parts)}{WEBMCP_TAG}</body></html>'
+        f'<style>{THEME_CSS}</style></head><body class="page-home">{"".join(parts)}{WEBMCP_TAG}</body></html>'
     ).encode()
 
 
 def display_time(value):
     try:
-        return (
-            datetime
-            .fromisoformat(value)
-            .astimezone(ZoneInfo('Asia/Taipei'))
-            .strftime('%Y-%m-%d %H:%M')
-        )
-    except ValueError, TypeError:
+        stamp = datetime.fromisoformat(value)
+        # Stored timestamps are UTC; never let the worker's local timezone decide.
+        if stamp.tzinfo is None:
+            stamp = stamp.replace(tzinfo=UTC)
+        return stamp.astimezone(ZoneInfo('Asia/Taipei')).strftime('%Y-%m-%d %H:%M')
+    except OverflowError, ValueError, TypeError:
         return str(value)
 
 
@@ -210,7 +185,9 @@ def document_html(markdown, *, title='msg', account=None, resource=None, raw_pat
 
     metadata = ''
     if resource and resource.get('type') == 'post' and markdown.startswith('---\n'):
-        markdown = markdown.split('\n---\n', 1)[1].lstrip('\n')
+        _, separator, body_markdown = markdown.partition('\n---\n')
+        if separator:
+            markdown = body_markdown.lstrip('\n')
         author = resource.get('links', {}).get('a', {}).get('path', '')
         channel = resource.get('links', {}).get('t', {}).get('path', '')
         metadata = '<aside class="post-meta">'
@@ -232,32 +209,31 @@ def document_html(markdown, *, title='msg', account=None, resource=None, raw_pat
     return (
         '<!doctype html><html lang="en"><head><meta charset="utf-8">'
         '<meta name="viewport" content="width=device-width,initial-scale=1">'
-        f'<title>{escape(title)}</title><style>'
-        'body{max-width:1040px;margin:32px auto;padding:0 24px;font:16px/1.65 system-ui;color:#242824;background:#fafaf8}'
-        'a{color:#275841}nav{margin-bottom:16px}table{border-collapse:collapse;width:100%;display:block;overflow:auto}'
-        'th,td{padding:10px 16px;border-bottom:1px solid #ddd;text-align:left}th{background:#eef0eb}'
-        'pre{padding:16px;background:#eef0eb;overflow:auto}img{max-width:100%}code{overflow-wrap:anywhere}'
-        + THEME_CSS
-        + '</style></head><body><nav><a href="/">msg / <span data-i18n="home">Home</span></a> · '
-        + account_navigation(account)
-        + f' · <a class="raw-link" href="{raw_url}">raw</a></nav>'
-        + PREFERENCES
-        + f'<main>{metadata}{body}</main>{WEBMCP_TAG}</body></html>'
+        f'<title>{escape(title)}</title><link rel="icon" href="/favicon.png">'
+        f'<style>{THEME_CSS}</style></head><body class="page-document">'
+        + SKIP_LINK
+        + '<header class="site-header"><a class="brand" href="/">msg</a>'
+        '<nav aria-label="Account">' + account_navigation(account) + '</nav></header>'
+        '<main><div class="toolbar">' + PREFERENCES
+        + f'<a class="raw-link" href="{raw_url}">raw</a></div>'
+        f'<div id="content" class="prose" tabindex="-1">{metadata}{body}</div></main>'
+        f'{WEBMCP_TAG}</body></html>'
     ).encode()
 
 
-def resource_markdown(value, fallback):
-    def clean(text):
-        import re
+def markdown_text(value):
+    """Escape metadata as literal Markdown, not HTML or active link syntax."""
+    text = str(value).replace('\n', ' ').replace('\r', ' ')
+    return re.sub('([' + re.escape(punctuation) + '])', r'\\\1', text)
 
-        return re.sub(r'([\\`*_{}\[\]<>!|&])', r'\\\1', str(text))
 
+def resource_markdown(value, fallback):
     conversation = value.get('conversation')
     if conversation:
-        lines = ['# ' + clean(conversation['contact']['name']), '']
+        lines = ['# ' + markdown_text(conversation['contact']['name']), '']
         for item in conversation['messages']:
             lines.extend([
-                '## ' + clean(item['author']['name']) + ' · ' + display_time(item['created_at']),
+                '## ' + markdown_text(item['author']['name']) + ' · ' + display_time(item['created_at']),
                 '',
                 item['body'],
                 '',
@@ -270,17 +246,17 @@ def clean(text):
             lines.append('No messages yet.')
         return '\n'.join(lines)
     if 'items' in value and value.get('type') in {'topic', 'organization'}:
-        lines = ['# ' + clean(value['name']), '']
+        lines = ['# ' + markdown_text(value['name']), '']
         for item in value['items']:
             preview = item.get('preview', {})
             title = preview.get('title', item['name'])
             path = quote(item['path'], safe='/@*')
-            lines.extend(['## [' + clean(title) + '](' + path + ')', ''])
+            lines.extend(['## [' + markdown_text(title) + '](' + path + ')', ''])
             if preview:
                 lines.extend([
-                    clean(preview['author']['name']) + ' · ' + display_time(preview['created_at']),
+                    markdown_text(preview['author']['name']) + ' · ' + display_time(preview['created_at']),
                     '',
-                    clean(preview.get('excerpt', '')),
+                    markdown_text(preview.get('excerpt', '')),
                     '',
                 ])
         if not value['items']:
@@ -313,9 +289,9 @@ def mailbox_html(value, name, *, account=None):
         label = (peer or {}).get('name', 'Private account')
         prefix = 'From' if name in {'in', 'inbox'} else 'To' if name in {'out', 'outbox'} else ''
         path = quote(item.get('path') or item.get('preview', {}).get('path') or path, safe='/@*')
-        lines.append(f'- {prefix} [{escape(label)}]({path}) — {state} {stamp}')
+        lines.append(f'- {prefix} [{markdown_text(label)}]({path}) — {markdown_text(state)} {markdown_text(stamp)}')
         if item.get('preview'):
-            lines.extend(['', escape(item['preview'].get('excerpt', '')), ''])
+            lines.extend(['', markdown_text(item['preview'].get('excerpt', '')), ''])
     if not value['items']:
         lines.append('这里还没有消息。 / No messages yet.')
     if value.get('cursor'):
diff --git a/src/msg/transports/http_common.py b/src/msg/transports/http_common.py
index 5ebf8090..9786b443 100644
--- a/src/msg/transports/http_common.py
+++ b/src/msg/transports/http_common.py
@@ -17,15 +17,33 @@
 
 
 async def body_bytes(request, limit):
-    length = request.headers.get('content-length')
-    if length is not None:
-        require(length.isdecimal() and int(length) <= limit, 'request_too_large')
+    """Validate framing before consumption and bound compressed and decoded bytes."""
+    lengths = request.headers.getlist('content-length')
+    encodings = request.headers.getlist('content-encoding')
+    require(len(lengths) <= 1 and len(encodings) <= 1, 'invalid_request')
+    require(not (lengths and 'transfer-encoding' in request.headers), 'invalid_request')
+    encoding = encodings[0].strip(' \t').lower() if encodings else 'identity'
+    require(encoding in {'identity', 'gzip'}, 'unknown_encoding')
+    expected = None
+    if lengths:
+        length = lengths[0].strip(' \t')
+        require(length.isascii() and length.isdecimal(), 'invalid_request')
+        # Compare bounded strings before int(): huge headers must not raise ValueError.
+        digits = length.lstrip('0') or '0'
+        maximum = str(limit)
+        require(
+            len(digits) < len(maximum)
+            or (len(digits) == len(maximum) and digits <= maximum),
+            'request_too_large',
+        )
+        expected = int(digits)
     body = bytearray()
     async for data in request.stream():
-        require(len(body) + len(data) <= limit, 'request_too_large')
+        size = len(body) + len(data)
+        require(size <= limit, 'request_too_large')
+        require(expected is None or size <= expected, 'invalid_request')
         body.extend(data)
-    encoding = request.headers.get('content-encoding', 'identity')
-    require(encoding in {'identity', 'gzip'}, 'unknown_encoding')
+    require(expected is None or len(body) == expected, 'invalid_request')
     return gunzip(bytes(body), limit) if encoding == 'gzip' else bytes(body)
 
 
diff --git a/src/msg/transports/oauth_http.py b/src/msg/transports/oauth_http.py
index f53269e9..d90feaa0 100644
--- a/src/msg/transports/oauth_http.py
+++ b/src/msg/transports/oauth_http.py
@@ -3,6 +3,7 @@
 import hashlib
 import hmac
 import os
+from base64 import b64encode
 from dataclasses import replace
 from datetime import timedelta
 from html import escape
@@ -16,7 +17,8 @@
 from msg.core.models import TokenProof
 from msg.core.requests import request_for
 from msg.security.oauth import DEVICE_GRANT, OAuthService, get, save, secret, state_id
-from msg.transports.home_page import PREFERENCES, THEME_CSS
+from msg.transports.browser_login import LOGIN_POLL_SCRIPT
+from msg.transports.browser_style import PREFERENCES, SKIP_LINK, THEME_CSS
 from msg.transports.http_common import body_bytes
 from msg.transports.packet import decode_packet
 from msg.transports.url_safety import require_matching_host, require_safe_request_target
@@ -29,7 +31,7 @@
     'X-Content-Type-Options': 'nosniff',
     'X-Frame-Options': 'DENY',
     'Content-Security-Policy': "default-src 'none'; style-src 'unsafe-inline'; "
-    f"script-src 'nonce-msg' 'sha256-{WEBMCP_HASH}'; connect-src 'self'; form-action 'self'; "
+    f"script-src 'sha256-{WEBMCP_HASH}'; connect-src 'self'; img-src 'self'; form-action 'self'; "
     "frame-ancestors 'none'; base-uri 'none'",
 }
 
@@ -38,28 +40,33 @@ def json(value, status=200):
     return JSONResponse(value, status_code=status, headers=HEADERS)
 
 
-def page(title, body):
+def page(title, body, *, script=None):
+    """Render trusted form markup; authorize only the explicitly supplied script."""
+    headers = {**HEADERS, 'Referrer-Policy': 'strict-origin'}
+    script_tag = ''
+    if script is not None:
+        pinned = b64encode(hashlib.sha256(script.encode()).digest()).decode()
+        headers['Content-Security-Policy'] = headers['Content-Security-Policy'].replace(
+            'script-src ', f"script-src 'sha256-{pinned}' "
+        )
+        script_tag = '<script>' + script + '</script>'
     return HTMLResponse(
-        '<!doctype html><html lang="en"><meta charset="utf-8">'
+        '<!doctype html><html lang="en"><head><meta charset="utf-8">'
         '<meta name="viewport" content="width=device-width, initial-scale=1">'
-        '<title>' + escape(title) + '</title><style>'
-        'body{font:17px system-ui;background:#faf9f6;color:#252525;margin:0;}'
-        'main{max-width:540px;margin:12vh auto;padding:32px;line-height:1.7;}'
-        'h1{font-size:30px;}code{font-size:21px;word-break:break-all;}'
-        'button,input,textarea{font:inherit;padding:10px 16px;margin:8px 0;}'
-        'button{cursor:pointer;}a{color:inherit;}' + THEME_CSS + '</style><main>'
-        '<nav><a href="/">msg / Home</a> · <a href="/register">Register</a> · <a href="?format=raw">raw</a></nav>'
-        + PREFERENCES
-        + '<h1>'
-        + escape(title)
-        + '</h1>'
-        + body
-        + '</main>'
-        + WEBMCP_TAG
-        + '</html>',
+        '<title>' + escape(title) + '</title>'
+        '<link rel="icon" href="/favicon.png">'
+        '<style>' + THEME_CSS + '</style></head><body class="page-auth">'
+        + SKIP_LINK
+        + '<header class="site-header"><a class="brand" href="/">msg</a>'
+        '<nav aria-label="Account"><a href="/" data-i18n="home">Home</a>'
+        '<a href="/register" data-i18n="register">Register</a></nav></header>'
+        '<main><div class="toolbar">' + PREFERENCES
+        + '<a class="raw-link" href="?format=raw">raw</a></div>'
+        '<div id="content" tabindex="-1"><h1>' + escape(title) + '</h1>'
+        + body + '</div></main>' + WEBMCP_TAG + script_tag + '</body></html>',
         # Form POSTs need a non-opaque Origin for the same-origin CSRF fence.
         # no-referrer makes navigation POST origins null in Chromium.
-        headers={**HEADERS, 'Referrer-Policy': 'strict-origin'},
+        headers=headers,
     )
 
 
@@ -117,10 +124,13 @@ def cookie(self, response, name, value, ttl):
 
     def require_csrf(self, request, args, name):
         value = request.cookies.get(name, '')
+        supplied = args.get('csrf', '')
         require(
-            value
+            isinstance(supplied, str)
+            and supplied.isascii()
+            and value
             and request.headers.get('origin') == self.service.settings.service_url
-            and hmac.compare_digest(args.get('csrf', ''), csrf(value)),
+            and hmac.compare_digest(supplied, csrf(value)),
             'invalid_request',
         )
         return value
@@ -249,7 +259,17 @@ async def bound_receive():
                     sent = True
                     return {'type': 'http.request', 'body': data, 'more_body': False}
 
-                await self.app(scope, bound_receive, send)
+                # The canonical packet now contains a proof and is no longer gzip.
+                # Forward matching framing, without mutating the incoming scope.
+                rebound_scope = dict(
+                    scope,
+                    headers=[
+                        (k, v)
+                        for k, v in scope['headers']
+                        if k.lower() not in {b'content-length', b'content-encoding', b'transfer-encoding'}
+                    ] + [(b'content-length', str(len(data)).encode())],
+                )
+                await self.app(rebound_scope, bound_receive, send)
                 return
             if (path.startswith('/oauth/') or path == '/login') and (
                 request.method in {'GET', 'HEAD'} and request.query_params.get('format') == 'raw'
@@ -333,19 +353,16 @@ async def dispatch(self, request):
                 )
             response = page(
                 'Sign in to MSG',
-                '<p>Approve this browser sign-in from a signed-in CLI:</p><code>msg auth approve '
-                + escape(code)
-                + '</code><p>This browser can read content, your inbox, and direct messages you have permission to access. Only approve if you opened this page.</p>'
-                '<p><a href="/register">Register using the CLI</a> · <a href="/login?format=raw">raw</a></p><p id="status">Waiting for approval…</p><p><a href="/oauth/signup">'
-                'No identity? Create a hosted identity</a></p><script nonce="msg">'
-                'const c=' + canonical(csrf(value)).decode() + ';'
-                'const poll=async()=>{const r=await fetch("/oauth/login/poll",{method:"POST",'
-                'headers:{"Content-Type":"application/json"},body:JSON.stringify({csrf:c})});'
-                'const d=await r.json();if(d.logged_in){document.getElementById("status").textContent='
-                '"Signed in.";const a=document.createElement("a");a.href="/";a.textContent="Back to home";'
-                'document.getElementById("status").append(" ",a);return;}if(["authorization_pending","slow_down"].includes(d.error))'
-                '{setTimeout(poll,d.error==="slow_down"?15000:5000);}else{document.getElementById("status").textContent='
-                '"Sign-in was not completed. Please reopen this page.";}};setTimeout(poll,5000);</script>',
+                '<p>Approve this browser sign-in from a signed-in CLI:</p>'
+                '<code class="approval-code">msg auth approve ' + escape(code) + '</code>'
+                '<p>This browser can read content, your inbox, and direct messages you have permission to access. Only approve if you opened this page.</p>'
+                '<p><a href="/register">Register using the CLI</a></p>'
+                '<p id="status" role="status" aria-live="polite" data-i18n="approval_wait" '
+                'data-csrf="' + escape(csrf(value), quote=True) + '">Waiting for approval…</p>'
+                '<p><a href="/oauth/signup">No identity? Create a hosted identity</a></p>'
+                '<noscript><p>JavaScript is needed to complete this browser sign-in. '
+                'The <a href="/register">CLI</a> works without it.</p></noscript>',
+                script=LOGIN_POLL_SCRIPT,
             )
             self.cookie(response, self.login_cookie, value, 600)
             return response
@@ -357,7 +374,8 @@ async def dispatch(self, request):
                     '<p>The server will store your signing and encryption keys. You can switch to managing your own keys later.</p>'
                     '<form method="post">'
                     + fields({'csrf': csrf(binder)})
-                    + '<input name="handle" placeholder="Identity handle" required pattern="[a-z][a-z0-9-]{1,40}">'
+                    + '<label for="handle">Identity handle</label>'
+                    '<input id="handle" name="handle" autocomplete="username" autocapitalize="none" spellcheck="false" minlength="2" maxlength="41" required pattern="[a-z][a-z0-9-]{1,40}">'
                     '<br><button>Create identity and sign in</button></form>',
                 )
                 self.cookie(response, self.login_cookie, binder, 600)
diff --git a/src/msg/transports/webmcp.py b/src/msg/transports/webmcp.py
index 9262edcc..151c689e 100644
--- a/src/msg/transports/webmcp.py
+++ b/src/msg/transports/webmcp.py
@@ -5,6 +5,16 @@
 
 WEBMCP_SCRIPT = r"""(() => {
   const translations = {
+    scroll_table: ['[< >] Scroll to see permissions', '[< >] 左右滑动查看权限'],
+    display: ['Display', '显示'], skip: ['Skip to content', '跳至正文'],
+    headline: ['Your agents. In the loop.', '让交流，接得上。'],
+    intro: ['Open-source instant messaging built for agents. Humans welcome.', '为 Agent 构建的开源即时通信，也欢迎人类。'],
+    no_posts: ['No public posts yet.', '还没有公开帖子。'],
+    unavailable: ['Statistics and latest posts are temporarily unavailable.', '统计与最近帖子暂时不可用。'],
+    session_expired: ['Your browser session expired or was revoked. Sign in again.', '浏览器会话已过期或被撤销，请重新登录。'],
+    channel_hint: ['Public post counts include replies. Writes require identity and current authorization; +cert adds a scoped certificate.', '公开帖子数包含回复。写入需要身份与当前授权；+cert 还需要对应范围的证书。'],
+    agent_guide: ['Agent guide', 'Agent 指南'], operations: ['Operations', '操作目录'], source: ['Source code', '源代码'],
+    approval_wait: ['Waiting for approval…', '等待确认…'],
     register: ['Register','注册'], topics: ['Topics','主题'], rules: ['Rules','规则'], feed: ['Feed','动态'],
     home: ['Home', '首页'], login: ['Sign in', '登录'], logout: ['Sign out', '退出'],
     language: ['Language', '语言'], accent: ['Accent', '强调色'], theme: ['Theme', '主题'],
@@ -32,7 +42,7 @@
     save('msg.language', language);
   };
   const applyAccent = value => {
-    const accent = Object.hasOwn(palettes, value) ? value : 'green';
+    const accent = Object.hasOwn(palettes, value) ? value : 'blue';
     document.documentElement.style.setProperty('--accent-light', palettes[accent][0]);
     document.documentElement.style.setProperty('--accent-dark', palettes[accent][1]);
     const selector = document.getElementById('msg-accent'); if (selector) selector.value = accent;
@@ -44,7 +54,7 @@
     const selector = document.getElementById('msg-theme'); if (selector) selector.value = theme;
     save('msg.theme', theme);
   };
-  applyLanguage(load('msg.language', 'en')); applyAccent(load('msg.accent', 'green')); applyTheme(load('msg.theme','system'));
+  applyLanguage(load('msg.language', 'en')); applyAccent(load('msg.accent', 'blue')); applyTheme(load('msg.theme','system'));
   for (const [key, apply] of [['language',applyLanguage],['accent',applyAccent],['theme',applyTheme]]) {
     document.getElementById('msg-' + key)?.addEventListener('change', event => apply(event.target.value));
   }
@@ -74,8 +84,10 @@
     {name: 'msg_home', description: 'Read MSG public activity, channels and the current account links.',
     inputSchema: {type: 'object', properties: {}, additionalProperties: false},
     annotations: {readOnlyHint: true, untrustedContentHint: true}, execute: () => read({path: '/'})}];
-  Promise.all(tools.map(tool => context.registerTool(tool, {signal: controller.signal})))
-    .catch(() => { controller.abort(); });
+  try {
+    Promise.all(tools.map(tool => context.registerTool(tool, {signal: controller.signal})))
+      .catch(() => { controller.abort(); });
+  } catch { controller.abort(); }
 })();"""
 
 WEBMCP_HASH = b64encode(sha256(WEBMCP_SCRIPT.encode()).digest()).decode()
diff --git a/tests/test_browser_refinement.py b/tests/test_browser_refinement.py
new file mode 100644
index 00000000..024c81da
--- /dev/null
+++ b/tests/test_browser_refinement.py
@@ -0,0 +1,117 @@
+"""Browser details must not compromise rendering or the raw resource contract."""
+
+from html.parser import HTMLParser
+
+import pytest
+
+from msg.transports.home_page import document_html, home_html, mailbox_html
+
+
+class Elements(HTMLParser):
+    def __init__(self, html):
+        super().__init__()
+        self.tags = []
+        self.text = []
+        self.feed(html)
+
+    def handle_starttag(self, tag, attrs):
+        self.tags.append((tag, dict(attrs)))
+
+    def handle_data(self, value):
+        self.text.append(value)
+
+
+@pytest.mark.parametrize('markdown', ['---\nunfinished metadata', '---\njust a separator\n\n# Body'])
+def test_unclosed_frontmatter_remains_visible_instead_of_crashing(markdown):
+    html = document_html(markdown, resource={'type': 'post'}).decode()
+    assert markdown.split('\n')[1] in html
+
+
+def test_only_a_complete_frontmatter_envelope_is_removed():
+    html = document_html('---\ninternal: private\n---\n\n# Real body', resource={'type': 'post'}).decode()
+    assert '<h1>Real body</h1>' in html
+    assert 'internal: private' not in html
+
+
+def test_mailbox_labels_and_excerpts_are_literal_markdown_text():
+    label = 'name](https://outside.invalid) [click'
+    excerpt = '![image](https://outside.invalid/pixel) and **not markup**'
+    html = mailbox_html({
+        'path': '/@reader/in',
+        'items': [{'sender_contact': {'name': label}, 'path': '/main/1',
+                   'preview': {'excerpt': excerpt}}],
+    }, 'in').decode()
+    parsed = Elements(html)
+    assert not any(a.get('href', '').startswith('https://outside.invalid') for _, a in parsed.tags)
+    assert not any(tag == 'img' for tag, _ in parsed.tags)
+    assert label in ''.join(parsed.text) and excerpt in ''.join(parsed.text)
+
+
+def test_home_preferences_are_collapsed_and_content_is_keyboard_reachable():
+    parsed = Elements(home_html().decode())
+    assert any(tag == 'details' and a.get('class') == 'preferences' and 'open' not in a
+               for tag, a in parsed.tags)
+    assert any(tag == 'a' and a.get('class') == 'skip-link' and a.get('href') == '#content'
+               for tag, a in parsed.tags)
+    assert any(a.get('id') == 'content' and a.get('tabindex') == '-1' for _, a in parsed.tags)
+    for name in ('msg-language', 'msg-accent', 'msg-theme'):
+        assert sum(a.get('id') == name for _, a in parsed.tags) == 1
+
+
+def test_home_counters_are_translated_without_invented_activity():
+    html = home_html({'posts': 0, 'posts_today': 0, 'users': 0, 'date': '2026-10-01',
+                      'timezone': 'Asia/Taipei', 'latest': []}).decode()
+    parsed = Elements(html)
+    markers = {a.get('data-i18n') for _, a in parsed.tags}
+    assert {'public_posts', 'today', 'users', 'no_posts'} <= markers
+    assert 'Statistics and latest posts are temporarily unavailable.' not in html.split('<script>')[0]
+
+
+def test_unavailable_activity_is_not_displayed_as_zero():
+    html = home_html().decode().split('<script>')[0]
+    assert 'Statistics and latest posts are temporarily unavailable.' in html
+    assert '<strong>0</strong>' not in html
+
+
+def test_shared_page_css_does_not_need_important_overrides():
+    html = document_html('# Test').decode()
+    css = html.split('<style>')[1].split('</style>')[0]
+    assert '!important' not in css
+    assert ':focus-visible' in css and 'prefers-reduced-motion' in css
+
+
+@pytest.mark.parametrize('excerpt', ['# Heading', '- item', '+ item', '1. item', '---', '> quote', '`code`'])
+def test_mailbox_preview_cannot_create_markdown_blocks(excerpt):
+    html = mailbox_html({
+        'path': '/@reader/in',
+        'items': [{'path': '/main/1', 'preview': {'excerpt': excerpt}}],
+    }, 'in').decode()
+    parsed = Elements(html)
+    # The mailbox itself has exactly one heading and one message list.
+    assert sum(tag == 'h1' for tag, _ in parsed.tags) == 1
+    assert not any(tag in {'hr', 'blockquote', 'pre', 'ol', 'code'} for tag, _ in parsed.tags)
+    assert excerpt in ''.join(parsed.text)
+
+
+@pytest.mark.parametrize('render', [home_html, lambda **kw: document_html('# Hello', **kw)])
+def test_current_account_group_links_survive_browser_refinement(render):
+    html = render(account={'name': '@reader', 'groups': [{'name': '&admins', 'path': '/&admins'}]}).decode()
+    assert 'href="/&amp;admins"' in html and '&amp;admins' in html
+
+
+@pytest.mark.parametrize('value,expected', [
+    ('2026-10-01T00:00:00', '2026-10-01 08:00'),
+    ('2026-10-01T00:00:00Z', '2026-10-01 08:00'),
+    ('9999-12-31T23:59:59Z', '9999-12-31T23:59:59Z'),
+    ('invalid timestamp', 'invalid timestamp'),
+])
+def test_display_timestamps_are_deterministic_and_tolerate_bad_metadata(value, expected):
+    from msg.transports.home_page import display_time
+
+    assert display_time(value) == expected
+
+
+def test_document_keeps_html_and_script_urls_inert():
+    html = document_html('# Title\n\n<script>alert(1)</script>\n\n[bad](javascript:alert(1))').decode()
+    assert '<h1>Title</h1>' in html
+    assert '<script>alert(1)</script>' not in html and 'href="javascript:' not in html
\ No newline at end of file
diff --git a/tests/test_http_body_integrity.py b/tests/test_http_body_integrity.py
new file mode 100644
index 00000000..ee06cf12
--- /dev/null
+++ b/tests/test_http_body_integrity.py
@@ -0,0 +1,108 @@
+"""Reject ambiguous framing before reading; bound wire and decoded bodies."""
+
+import gzip
+
+import pytest
+from starlette.requests import Request
+
+from msg.core.errors import Failure
+from msg.transports.http_common import body_bytes
+
+
+def streaming_request(headers=(), chunks=(b'abc',)):
+    consumed = []
+    messages = iter(chunks)
+
+    async def receive():
+        data = next(messages, None)
+        consumed.append(data)
+        return {'type': 'http.request', 'body': data or b'', 'more_body': data is not None}
+
+    request = Request({'type': 'http', 'headers': list(headers)}, receive)
+    return request, consumed
+
+
+@pytest.mark.asyncio
+@pytest.mark.parametrize('declared', [b'0', b'2', b'4'])
+async def test_declared_and_received_content_length_must_match(declared):
+    request, _ = streaming_request([(b'content-length', declared)])+    with pytest.raises(Failure, match='invalid_request'):
+        await body_bytes(request, 64)
+
+
+@pytest.mark.asyncio
+@pytest.mark.parametrize('headers', [
+    [(b'content-length', b'3'), (b'content-length', b'3')],
+    [(b'content-length', b'3'), (b'content-length', b'4')],
+    [(b'content-length', b'3, 3')],
+    [(b'content-length', b'+3')],
+    [(b'content-length', b'-3')],
+    [(b'content-length', b'')],
+    [(b'content-length', b'3'), (b'transfer-encoding', b'chunked')],
+    [(b'content-encoding', b'gzip'), (b'content-encoding', b'identity')],
+])
+async def test_ambiguous_framing_is_rejected_without_consuming_body(headers):
+    request, consumed = streaming_request(headers)
+    with pytest.raises(Failure, match='invalid_request'):
+        await body_bytes(request, 64)
+    assert consumed == []
+
+
+@pytest.mark.asyncio
+@pytest.mark.parametrize('declared', [b'65', b'9' * 5000], ids=['over-limit', 'huge-decimal'])
+async def test_large_decimal_lengths_cannot_escape_as_integer_conversion_errors(declared):
+    request, consumed = streaming_request([(b'content-length', declared)])
+    with pytest.raises(Failure, match='request_too_large'):
+        await body_bytes(request, 64)
+    assert consumed == []
+
+
+@pytest.mark.asyncio
+async def test_unknown_encoding_is_rejected_before_streaming():
+    request, consumed = streaming_request([(b'content-encoding', b'br')])
+    with pytest.raises(Failure, match='unknown_encoding'):
+        await body_bytes(request, 64)
+    assert consumed == []
+
+
+@pytest.mark.asyncio
+@pytest.mark.parametrize('headers,chunks,expected', [
+    ([], (b'a', b'bc'), b'abc'),
+    ([(b'content-length', b'0003')], (b'abc',), b'abc'),
+    ([(b'content-length', b'0')], (), b''),
+    ([(b'content-encoding', b'IDENTITY')], (b'abc',), b'abc'),
+    ([(b'transfer-encoding', b'chunked')], (b'a', b'bc'), b'abc'),
+])
+async def test_valid_streams_keep_their_bytes(headers, chunks, expected):
+    request, _ = streaming_request(headers, chunks)
+    assert await body_bytes(request, 64) == expected
+
+
+@pytest.mark.asyncio
+async def test_gzip_content_length_measures_wire_bytes_not_decoded_bytes():
+    raw = gzip.compress(b'hello' * 8)
+    request, _ = streaming_request(
+        [(b'content-length', str(len(raw)).encode()), (b'content-encoding', b'GZip')],
+        (raw[:5], raw[5:]),
+    )
+    assert await body_bytes(request, 64) == b'hello' * 8
+
+
+@pytest.mark.asyncio
+@pytest.mark.parametrize('raw,code', [
+    (gzip.compress(b'x' * 256), 'request_too_large'),
+    (gzip.compress(b'abc')[:-1], 'invalid_gzip'),
+    (gzip.compress(b'abc') + b'trailing', 'invalid_gzip'),
+    (gzip.compress(b'abc') + gzip.compress(b'def'), 'invalid_gzip'),
+])
+async def test_gzip_rejects_expansion_truncation_and_extra_members(raw, code):
+    request, _ = streaming_request([(b'content-encoding', b'gzip')], (raw,))
+    with pytest.raises(Failure, match=code):
+        await body_bytes(request, 64)
+
+
+@pytest.mark.asyncio
+async def test_stream_overflow_stops_before_consuming_further_chunks():
+    request, consumed = streaming_request(chunks=(b'x' * 65, b'not read'))
+    with pytest.raises(Failure, match='request_too_large'):
+        await body_bytes(request, 64)
+    assert len(consumed) == 1
\ No newline at end of file
diff --git a/tests/test_oauth_browser_integrity.py b/tests/test_oauth_browser_integrity.py
new file mode 100644
index 00000000..08c02160
--- /dev/null
+++ b/tests/test_oauth_browser_integrity.py
@@ -0,0 +1,55 @@
+"""Authentication-page behavior and CSRF failure paths without a database."""
+
+from base64 import b64encode
+from hashlib import sha256
+from types import SimpleNamespace
+
+import pytest
+from starlette.requests import Request
+
+from msg.core.errors import Failure
+from msg.transports.oauth_http import HEADERS, OAuthBoundary, csrf, page
+from msg.transports.webmcp import WEBMCP_HASH
+
+
+def test_oauth_csp_never_authorizes_a_fixed_nonce():
+    assert 'nonce-msg' not in HEADERS['Content-Security-Policy']
+    response = page('Consent', '<p>Read-only permission</p>')
+    assert 'nonce-msg' not in response.headers['content-security-policy']
+    assert "'sha256-" + WEBMCP_HASH + "'" in response.headers['content-security-policy']
+
+
+def test_optional_page_script_is_pinned_to_exact_bytes():
+    script = 'document.documentElement.dataset.test = "ok";'
+    response = page('Test', '<p>Body</p>', script=script)
+    expected = b64encode(sha256(script.encode()).digest()).decode()
+    assert f"'sha256-{expected}'" in response.headers['content-security-policy']
+    assert f'<script>{script}</script>' in response.body.decode()
+    # The extra authorization must not leak into later responses or the base policy.
+    assert expected not in HEADERS['Content-Security-Policy']
+    assert expected not in page('Other', '').headers['content-security-policy']
+
+
+@pytest.mark.parametrize('token', ['非ASCII', '', 'wrong', None, ['wrong']])
+def test_invalid_csrf_values_fail_with_a_controlled_error(token):
+    boundary = OAuthBoundary.__new__(OAuthBoundary)
+    boundary.service = SimpleNamespace(settings=SimpleNamespace(service_url='https://msg.test'))
+    request = Request({'type': 'http', 'headers': [
+        (b'cookie', b'msg_login=opaque-cookie'), (b'origin', b'https://msg.test'),
+    ]})
+    with pytest.raises(Failure, match='invalid_request'):
+        boundary.require_csrf(request, {'csrf': token}, 'msg_login')
+
+
+def test_valid_csrf_still_requires_the_origin_and_cookie():
+    boundary = OAuthBoundary.__new__(OAuthBoundary)
+    boundary.service = SimpleNamespace(settings=SimpleNamespace(service_url='https://msg.test'))
+    for origin, good in [(b'https://msg.test', True), (b'https://other.test', False)]:
+        request = Request({'type': 'http', 'headers': [
+            (b'cookie', b'msg_login=opaque-cookie'), (b'origin', origin),
+        ]})
+        if good:
+            assert boundary.require_csrf(request, {'csrf': csrf('opaque-cookie')}, 'msg_login') == 'opaque-cookie'
+        else:
+            with pytest.raises(Failure, match='invalid_request'):
+                boundary.require_csrf(request, {'csrf': csrf('opaque-cookie')}, 'msg_login')
diff --git a/tests/test_oauth_browser_regressions.py b/tests/test_oauth_browser_regressions.py
new file mode 100644
index 00000000..d67b1016
--- /dev/null
+++ b/tests/test_oauth_browser_regressions.py
@@ -0,0 +1,39 @@
+"""Database-backed checks for the real OAuth-to-protocol transport boundary."""
+
+import gzip
+from datetime import timedelta
+
+import pytest
+from test_oauth import device_tokens, oauth as oauth
+
+from msg.core.codec import canonical
+from msg.core.requests import request_for
+
+
+@pytest.mark.asyncio
+@pytest.mark.parametrize('compressed', [False, True])
+async def test_real_oauth_bearer_rebinds_body_framing(oauth, compressed):
+    app, _, subject, http = oauth
+    tokens = await device_tokens(oauth)
+    request = request_for(
+        'discovery.get', {'id': '/main'}, app.settings.service_url,
+        subject=subject, expires_at=app.clock() + timedelta(seconds=120),
+    )
+    raw = canonical(request)
+    headers = {'Authorization': 'Bearer ' + tokens['access_token']}
+    if compressed:
+        raw = gzip.compress(raw)
+        headers['Content-Encoding'] = 'gzip'
+    response = await http.post('/-/p/discovery.get', content=raw, headers=headers)
+    assert response.status_code == 200, response.text
+    assert response.json()['status'] == 'ok' and response.json()['actor'] == subject
+
+
+@pytest.mark.asyncio
+async def test_non_ascii_csrf_is_bad_request_not_server_error(oauth):
+    _, _, _, http = oauth
+    assert (await http.get('/login')).status_code == 200
+    response = await http.post(
+        '/oauth/login/poll', json={'csrf': '非ASCII'}, headers={'Origin': str(http.base_url).rstrip('/')}
+    )
+    assert response.status_code == 400 and response.json() == {'error': 'invalid_request'}