web: every page works on mobile without horizontal overflow

- index.html, kernel.html: were missing the viewport meta entirely;
  mobile fell back to the default 980px layout and the content was
  scaled down. Add the standard 'width=device-width,initial-scale=1'
  and centre the body with margin:0 auto so the 640px max-width is
  centered instead of left-aligned on wide displays.
- host-your-own.html, how-it-works.html, zebra-audio.html, chat.html:
  add a 600px breakpoint that tightens body padding to 1rem, shrinks
  the h1 from 3rem to 2.2rem, and lets long URLs / pubkey hashes wrap
  via overflow-wrap:anywhere on body prose. .code / .diagram already
  use overflow-x:auto so internal scrolling stays bounded to the box,
  never pushes the page wider than the viewport.
- chat.html: cap the QR share box's canvas (was a fixed 320px square)
  with max-width:100% on phones, so 320px-wide handsets don't overflow.
- zebra-audio.html: the mute button had a fixed 6rem width to keep the
  'mute'/'unmute' label from shifting the row; on narrow phones that
  width forced wrapping. Drop it back to auto on small viewports.

All pages stamp+verify; the integrity footer hashes in the source
match the served files after `make stamp`.

web/chat.html

@@ -160,7 +160,10 @@
   .share-box .copy-row button { font-size: 0.75rem; padding: 0.25rem 0.7rem; }
   @media (max-width: 600px) {
     .share-box { grid-template-columns: 1fr; }
-    .share-box .qr-canvas { justify-self: center; }
+    /* cap the QR canvas so it never pushes the page wider than the
+     * viewport on narrow phones (320px and up) */
+    .share-box .qr-canvas { justify-self: center; max-width: 100%; }
+    h1 { font-size: 2.2rem; }
   }
 </style>
 </head>
@@ -1650,8 +1653,8 @@ logLine('sys', 'chat content lives in encrypted SRTP audio. no IP packets carry
 </script>
 <footer style="max-width:820px;margin:2.2rem auto 0;font-size:0.65rem;color:#999;line-height:1.7;word-break:break-all;font-family:monospace">
   <span style="color:#777">page integrity</span> &nbsp;·&nbsp; built <span class="stamp-date">2026-05-31</span><br>
-  md5 <span class="stamp-md5">4531ad26ca3a293e598ca793e9bf1d65</span><br>
-  sha256 <span class="stamp-sha">5eb0fa94e450cebb4a5437f4bee1223e6d91e87f07aafbeb5a6a3c3d9f9a4f54</span><br>
+  md5 <span class="stamp-md5">a6140b44704ef4929a00b9ab1cc5c09e</span><br>
+  sha256 <span class="stamp-sha">cae3bea040e6307767e2b3d553dfd8843e633b06b1db16c56dbe57884c156471</span><br>
   <span style="color:#bbb">hashes are of this page with these two fields zeroed — to verify, blank them and re-hash</span><br>
   <span style="color:#bbb">one self-contained file — <strong>save a copy</strong> and verify it against these hashes; point it at your own servers with ?signal= and ?turncred=, or <a href="host-your-own.html" style="color:#999">host your own community</a></span>
 </footer>

web/host-your-own.html

@@ -60,6 +60,14 @@
     padding: 0.5rem 1.2rem; text-decoration: none; font-size: 0.9rem;
   }
   .cta:hover { background: #333; }
+  @media (max-width: 600px) {
+    body { padding: 1rem; line-height: 1.55; }
+    h1 { font-size: 2.2rem; }
+    h2 { font-size: 1.1rem; margin: 1.8rem 0 0.7rem; }
+    .lead { font-size: 0.95rem; }
+    /* long URLs / hashes wrap instead of pushing the page wider */
+    p, li { overflow-wrap: anywhere; }
+  }
 </style>
 </head>
 <body>
@@ -384,8 +392,8 @@ turn.example.com {
 
 <footer style="max-width:820px;margin:2.2rem auto 0;font-size:0.65rem;color:#999;line-height:1.7;word-break:break-all;font-family:monospace">
   <span style="color:#777">page integrity</span> &nbsp;·&nbsp; built <span class="stamp-date">2026-05-31</span><br>
-  md5 <span class="stamp-md5">b5a42e5df4e5e9937c58de92af339106</span><br>
-  sha256 <span class="stamp-sha">8df19174149dfd36ff08ecb5972f5236ce9e796c28c55759e5f077b9fe65ccba</span><br>
+  md5 <span class="stamp-md5">25a35f8dd861f9fa99f83149283d69eb</span><br>
+  sha256 <span class="stamp-sha">2af25ffbc38e448be79437e00bef8865e128fbaf729822b8121fb65f35d381b0</span><br>
   <span style="color:#bbb">hashes are of this page with these two fields zeroed — to verify, blank them and re-hash</span><br>
   <span style="color:#bbb">one self-contained file — <strong>save a copy</strong> and verify it against these hashes; point it at your own servers with ?signal= and ?turncred=</span>
 </footer>

web/how-it-works.html

@@ -54,6 +54,13 @@
   }
   hr { border: none; border-top: 1px solid #ddd; margin: 2.5rem 0; }
   .foot { font-size: 0.75rem; color: #777; margin-top: 2rem; }
+  @media (max-width: 600px) {
+    body { padding: 1rem; line-height: 1.55; }
+    h1 { font-size: 2.2rem; }
+    h2 { font-size: 1.1rem; margin: 1.8rem 0 0.7rem; }
+    .lead { font-size: 0.95rem; }
+    p, li { overflow-wrap: anywhere; }
+  }
 </style>
 </head>
 <body>
@@ -268,8 +275,8 @@
 
 <footer style="max-width:820px;margin:2.2rem auto 0;font-size:0.65rem;color:#999;line-height:1.7;word-break:break-all;font-family:monospace">
   <span style="color:#777">page integrity</span> &nbsp;·&nbsp; built <span class="stamp-date">2026-05-31</span><br>
-  md5 <span class="stamp-md5">dda0da04369b1a74daa022b92d9e7389</span><br>
-  sha256 <span class="stamp-sha">ad5243b5d64b36792aa3a22f3a9c3160dc7bd6ef6bac96e2cf8faa1ff250ed69</span><br>
+  md5 <span class="stamp-md5">fc0889d591a978df0fdeb5b87c9af3d6</span><br>
+  sha256 <span class="stamp-sha">39179b76fd28a893c65a2e0e95a49a87ef5a88c615a5f4a8d97a6716a9190670</span><br>
   <span style="color:#bbb">hashes are of this page with these two fields zeroed — to verify, blank them and re-hash</span><br>
   <span style="color:#bbb">one self-contained file — <strong>save a copy</strong> and verify it against these hashes; point it at your own servers with ?signal= and ?turncred=, or <a href="host-your-own.html" style="color:#999">host your own community</a></span>
 </footer>

web/index.html

@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
   <title>zebra report</title>
   <style>
     @font-face {
@@ -20,6 +21,11 @@
       color: #000;
       padding: 2rem;
       max-width: 640px;
+      margin: 0 auto;
+    }
+    @media (max-width: 600px) {
+      body { padding: 1rem; }
+      h1 { font-size: 2.2rem; }
     }
 
     h1 {

web/kernel.html

@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
   <title>zebra kernel</title>
   <style>
     * { box-sizing: border-box; margin: 0; padding: 0; }
@@ -12,6 +13,11 @@
       color: #000;
       padding: 2rem;
       max-width: 640px;
+      margin: 0 auto;
+    }
+    @media (max-width: 600px) {
+      body { padding: 1rem; }
+      h1 { font-size: 2.2rem; }
     }
 
     h1 {

web/zebra-audio.html

@@ -68,6 +68,13 @@
   .log-line { margin-bottom: 0.2rem; word-wrap: break-word; }
   .log-line .ts { color: #888; }
   .log-line.err { color: #b00; }
+  @media (max-width: 600px) {
+    body { padding: 1rem; }
+    h1 { font-size: 2.2rem; }
+    .row, .controls, .level { gap: 0.5rem; }
+    /* drop the fixed mute-button width on phones so the row fits */
+    #btn-mute { width: auto; padding: 0.45rem 0.9rem; }
+  }
 </style>
 </head>
 <body>
@@ -653,8 +660,8 @@ else wirePuppet();
 
 <footer style="max-width:560px;margin:2.2rem auto 0;font-size:0.65rem;color:#999;line-height:1.7;word-break:break-all;font-family:monospace">
   <span id="pi-seal" style="color:#777;cursor:default;user-select:none" title="">page integrity</span> &nbsp;·&nbsp; built <span class="stamp-date">2026-05-31</span><br>
-  md5 <span class="stamp-md5">04b4198343210daaa77a362e380fd492</span><br>
-  sha256 <span class="stamp-sha">f172d5ad1cff1ac7c9728f8f9160bd004d7afb329004657a84bd4f85b7cf7d26</span><br>
+  md5 <span class="stamp-md5">d306f9a42ee33db54e69897cefec01bb</span><br>
+  sha256 <span class="stamp-sha">b6d6a585708f175bac7f33aca5770ba1debb239722de60cb2aef9c3bf6277872</span><br>
   <span style="color:#bbb">hashes are of this page with these two fields zeroed — to verify, blank them and re-hash</span><br>
   <span style="color:#bbb">one self-contained file — <strong>save a copy</strong> and verify it against these hashes; point it at your own servers with ?signal= and ?turncred=, or <a href="host-your-own.html" style="color:#999">host your own community</a></span>
 </footer>