zebra-spaces: wider layout, narrower right column, 92vh video, trim prose

Maximize screen-share resolution on desktop/laptop:
- drop body max-width cap (was 1440px) so layout breathes to full viewport
- shrink right column from 520px to 360px; left column gets the surplus
- bump screen-tile video max-height from 80vh to 92vh
- tighter padding + gap

Cut four prose blocks to roughly a third:
- identity note: full key-management paragraph → 'key lives in this browser only'
- input note: full role/encryption paragraph → 'join as listener; host promotes to mic. end-to-end encrypted.'
- share note: full URL-embedding paragraph → 'share only with people you trust to hear the room.'
- screen-share note: full picker explanation → 'window or tab; tick share audio if offered.'

web/zebra-spaces.html

@@ -14,21 +14,21 @@
   * { box-sizing: border-box; margin: 0; padding: 0; }
   body {
     font-family: monospace; background: #fff; color: #000;
-    padding: 2rem; max-width: 1440px; margin: 0 auto;
+    padding: 1rem 1.5rem; max-width: none; margin: 0 auto;
   }
   /* two-column page on desktop: left = timeline (1fr, takes remaining
-   * space — will host the running event feed once v0.3 lands), right =
-   * controls (capped at 520px so they never get awkwardly wide on a
-   * full-screen monitor). Both columns get min-width:0 so they shrink
-   * without forcing a horizontal scrollbar. */
+   * space — hosts screen shares + the running event feed), right =
+   * controls (kept narrow so the screen share gets maximum pixels).
+   * Both columns get min-width:0 so they shrink without forcing a
+   * horizontal scrollbar. */
   .page {
     display: grid;
-    grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
-    gap: 2rem;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
+    gap: 1.25rem;
     align-items: start;
   }
   .timeline {
-    border-right: 1px solid #ddd; padding-right: 2rem; min-height: 60vh;
+    border-right: 1px solid #ddd; padding-right: 1.25rem; min-height: 60vh;
     min-width: 0; display: flex; flex-direction: column;
   }
   .controls { min-width: 0; }
@@ -66,7 +66,7 @@
     display: flex; flex-direction: column;
   }
   .screen-tile video {
-    width: 100%; height: auto; max-height: 80vh; display: block; background: #000;
+    width: 100%; height: auto; max-height: 92vh; display: block; background: #000;
   }
   .screen-tile .screen-meta {
     background: #111; color: #ddd; font-size: 0.7rem; padding: 0.3rem 0.5rem;
@@ -227,7 +227,7 @@
   <div class="row">
     <button id="btn-vault" class="small">backup / restore key</button>
     <button id="btn-logout" class="small">log out</button>
-    <span class="note">your key lives only in this browser; back it up if you want it on another device or after clearing data. log out wipes it and generates a fresh identity.</span>
+    <span class="note">key lives in this browser only.</span>
   </div>
   <div id="vault-panel" class="vault-panel hidden">
     <p class="note" style="margin-bottom:0.5rem"><strong>backup</strong> — pick a password; you'll get a text blob to save.</p>
@@ -267,12 +267,7 @@
   <div class="row" id="row-music-mode">
     <label class="note"><input type="checkbox" id="music-mode"> music mode — raw mic, no echo/noise cancellation (for playing audio through it)</label>
   </div>
-  <p class="note">
-    everyone joins as a listener. host (first to enter) can invite listeners to the
-    mic. co-hosts share mod powers but cannot remove the host. audio is end-to-end
-    encrypted (DTLS-SRTP); SDP is encrypted with the rendezvous code before reaching
-    the relay.
-  </p>
+  <p class="note">join as listener; host promotes to mic. end-to-end encrypted.</p>
 </section>
 
 <section id="sec-invite" class="hidden">
@@ -297,11 +292,7 @@
 
 <section id="sec-share" class="hidden">
   <h2>share</h2>
-  <p class="note" style="margin-bottom:0.5rem">
-    anyone who opens this URL lands in this space (joins as listener).
-    the rendezvous code is embedded — share only with people you trust to
-    hear the room. self-contained: works offline, no server-side index.
-  </p>
+  <p class="note" style="margin-bottom:0.5rem">share only with people you trust to hear the room.</p>
   <div class="row">
     <input type="text" id="share-url" readonly>
     <button id="btn-copy-share" class="small">copy</button>
@@ -321,8 +312,7 @@
   <div class="row">
     <button id="btn-screen-share" class="invert">share screen</button>
     <button id="btn-screen-stop" class="hidden">stop sharing</button>
-    <span class="note">shares a window or tab; if the picker offers an
-      "also share tab/system audio" checkbox the audio rides along.</span>
+    <span class="note">window or tab; tick "share audio" if offered.</span>
   </div>
 </section>
 
@@ -1599,8 +1589,8 @@ logLine('', 'ready — pick a handle, type a rendezvous code, enter the space');
 
 <footer style="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-06-02</span><br>
-  md5 <span class="stamp-md5">9f18287a705bb3427c7dd969f4dbd6e9</span><br>
-  sha256 <span class="stamp-sha">43e630fa94aa51360da0e051ea8381f9255dc80cb8f016a210565c6035663a8c</span><br>
+  md5 <span class="stamp-md5">051db7e4a0ad45f749f2de691bb1f7c7</span><br>
+  sha256 <span class="stamp-sha">38861760202e2d6af7bc264bdf5243e2d25fa211af18c9bbd443f8867f9dd7a5</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 against these hashes; point 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>