diff --git a/Makefile b/Makefile
index 61c1e2b..5b43bc9 100644
--- a/Makefile
+++ b/Makefile
@@ -8,7 +8,7 @@ PULSE   = src/pulse.c
 
 # stamp each web page with today's date + its own md5/sha256 (run before deploy)
 stamp:
-	@node web/stamp.js web/chat.html web/zebra-audio.html web/how-it-works.html web/host-your-own.html
+	@node web/stamp.js web/chat.html web/zebra-audio.html web/zebra-spaces.html web/how-it-works.html web/host-your-own.html
 
 all: tx rx chat bt carrier zebrad
 
diff --git a/web/chat.html b/web/chat.html
index 7579faf..3932a7a 100644
--- a/web/chat.html
+++ b/web/chat.html
@@ -1649,9 +1649,9 @@ 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-29</span><br>
-  md5 <span class="stamp-md5">9dfd76a0e07db313af57a2ea310918cc</span><br>
-  sha256 <span class="stamp-sha">e268adb6caac732ebc0dcf3ed4b635957a987225f7d9f9e99eb9b797d12ba0fe</span><br>
+  <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>
   <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>
diff --git a/web/host-your-own.html b/web/host-your-own.html
index 88d6185..f932ada 100644
--- a/web/host-your-own.html
+++ b/web/host-your-own.html
@@ -71,8 +71,8 @@
   <a href="/">unturf</a></p>
 
 <p class="lead">
-  The zebra pages (the <a href="./">chat</a> and the <a href="zebra-audio.html">voice
-  call</a>) need exactly two things from a server: a <strong>rendezvous relay</strong>
+  The zebra pages (the <a href="./">chat</a>, the <a href="zebra-audio.html">1:1 voice
+  call</a>, and the <a href="zebra-spaces.html">multi-party spaces</a>) need exactly two things from a server: a <strong>rendezvous relay</strong>
   so two browsers can find each other, and a <strong>TURN server</strong> so they
   can still connect when both sit behind NAT. Everything else &mdash; the crypto,
   the modem, the audio &mdash; runs in the browser. This page hands you the whole
@@ -383,9 +383,9 @@ turn.example.com {
 </p>
 
 <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-29</span><br>
-  md5 <span class="stamp-md5">521949cd4653a08a47afd841f53addc1</span><br>
-  sha256 <span class="stamp-sha">81bbc00c63ed4343885ab2dd575355da92ff6c0bc683d693e36a06e6015b6241</span><br>
+  <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>
   <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>
diff --git a/web/how-it-works.html b/web/how-it-works.html
index 163fcb6..9830fa9 100644
--- a/web/how-it-works.html
+++ b/web/how-it-works.html
@@ -267,9 +267,9 @@
 </p>
 
 <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-29</span><br>
-  md5 <span class="stamp-md5">ed504d5893ed6df262ac8b3b623352a0</span><br>
-  sha256 <span class="stamp-sha">96d2a30370bbe173ad805d0e90a80fce816314879a56ccd7d1ad1ec6e48dbb71</span><br>
+  <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>
   <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>
diff --git a/web/zebra-audio.html b/web/zebra-audio.html
index 2e2c41e..8f7bf35 100644
--- a/web/zebra-audio.html
+++ b/web/zebra-audio.html
@@ -74,6 +74,7 @@
 
 <h1>zebra audio</h1>
 <p class="sub">encrypted voice &nbsp;·&nbsp; webrtc &nbsp;·&nbsp; rendezvous &nbsp;·&nbsp;
+  <a href="zebra-spaces.html">spaces</a> &nbsp;·&nbsp;
   <a href="host-your-own.html">host your own</a> &nbsp;·&nbsp;
   <a href="/">unturf</a></p>
 
@@ -651,9 +652,9 @@ else wirePuppet();
 </section>
 
 <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-29</span><br>
-  md5 <span class="stamp-md5">db399c213000ea9dfe57b41bbe76b620</span><br>
-  sha256 <span class="stamp-sha">bdafd83348428485418947fd35aa21d77e3d98dcc1d050183bcda5a55ccd6291</span><br>
+  <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>
   <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>
diff --git a/web/zebra-spaces.html b/web/zebra-spaces.html
new file mode 100644
index 0000000..70ab301
--- /dev/null
+++ b/web/zebra-spaces.html
@@ -0,0 +1,992 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>zebra spaces</title>
+<style>
+  @font-face {
+    font-family: 'chunkfiveregular';
+    src: url('fonts/chunkfive-regular-webfont.woff2') format('woff2'),
+         url('fonts/chunkfive-regular-webfont.woff') format('woff');
+    font-weight: normal; font-style: normal;
+  }
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body {
+    font-family: monospace; background: #fff; color: #000;
+    padding: 2rem; max-width: 720px; margin: 0 auto;
+  }
+  h1 {
+    font-family: 'chunkfiveregular', serif;
+    font-size: 3rem; font-weight: normal; letter-spacing: 0.02em;
+    line-height: 1; margin-bottom: 0.2rem;
+  }
+  .sub {
+    font-size: 0.75rem; color: #555; margin-bottom: 2rem;
+    letter-spacing: 0.05em; text-transform: uppercase;
+  }
+  .sub a { color: #555; }
+  h2 {
+    font-family: 'chunkfiveregular', serif; font-size: 1.1rem; font-weight: normal;
+    border-bottom: 1px solid #000; padding-bottom: 0.25rem; margin-bottom: 0.8rem;
+  }
+  section { margin-bottom: 1.6rem; }
+  button {
+    background: #fff; color: #000; border: 1px solid #000;
+    padding: 0.4rem 0.9rem; font-family: monospace; font-size: 0.85rem; cursor: pointer;
+  }
+  button:hover:not(:disabled) { background: #f0f0f0; }
+  button:disabled { opacity: 0.3; cursor: default; }
+  button.invert { background: #000; color: #fff; }
+  button.invert:hover:not(:disabled) { background: #333; }
+  button.small { padding: 0.2rem 0.55rem; font-size: 0.75rem; }
+  .row { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; flex-wrap: wrap; }
+  input[type=text], input[type=password] {
+    font-family: monospace; font-size: 0.9rem; border: 1px solid #000;
+    padding: 0.4rem; background: #fff; color: #000; flex: 1; min-width: 0;
+  }
+  textarea {
+    font-family: monospace; font-size: 0.75rem; border: 1px solid #000;
+    padding: 0.4rem; background: #fff; color: #000; width: 100%; min-height: 4rem;
+    word-break: break-all;
+  }
+  select {
+    font-family: monospace; font-size: 0.9rem; border: 1px solid #000;
+    padding: 0.4rem; background: #fff; color: #000; flex: 1; min-width: 0; cursor: pointer;
+  }
+  .dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid #000; background: #fff; flex-shrink: 0; }
+  .dot.ok { background: #060; border-color: #060; }
+  .dot.warn { background: #888; }
+  .status-line { font-size: 0.8rem; color: #555; }
+  .status-line.ok { color: #060; }
+  .status-line.err { color: #b00; }
+  .note { font-size: 0.75rem; color: #555; line-height: 1.5; }
+  .meter { height: 8px; border: 1px solid #000; background: #fff; position: relative; overflow: hidden; }
+  .meter-fill { height: 100%; background: #000; width: 0%; transition: width 0.06s linear; }
+  /* member rows: badge | handle | pubkey short | meter | mod actions */
+  .member {
+    display: grid;
+    grid-template-columns: 5.5rem 1fr 4rem 1.4rem 1fr auto;
+    align-items: center; gap: 0.55rem; padding: 0.35rem 0;
+    border-bottom: 1px dotted #ccc; font-size: 0.85rem;
+  }
+  .member:last-child { border-bottom: none; }
+  .badge {
+    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em;
+    padding: 0.1rem 0.4rem; border: 1px solid #000; text-align: center;
+  }
+  .badge.host    { background: #000; color: #fff; }
+  .badge.cohost  { background: #444; color: #fff; }
+  .badge.speaker { background: #fff; color: #000; }
+  .badge.listener{ background: #fff; color: #888; border-color: #888; }
+  .handle { font-weight: bold; word-break: break-all; }
+  .handle .me { color: #060; font-weight: normal; font-size: 0.7rem; margin-left: 0.3rem; }
+  .pub-short { font-size: 0.7rem; color: #888; }
+  .raised { color: #b00; font-weight: bold; }
+  .mic { width: 18px; height: 18px; }
+  .mic svg { width: 18px; height: 18px; display: block; }
+  .mod-actions { display: flex; gap: 0.3rem; flex-wrap: wrap; justify-content: flex-end; }
+  .log { border: 1px solid #000; height: 150px; overflow-y: auto; padding: 0.5rem; font-size: 0.75rem; line-height: 1.5; background: #fafafa; }
+  .log-line { margin-bottom: 0.2rem; word-wrap: break-word; }
+  .log-line .ts { color: #888; }
+  .log-line.err { color: #b00; }
+  .invite-banner {
+    border: 2px solid #000; padding: 0.8rem; margin-bottom: 1rem; background: #ffd;
+    display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
+  }
+  .vault-panel { border: 1px dashed #000; padding: 0.7rem; margin-top: 0.5rem; }
+  .hidden { display: none !important; }
+  @media (max-width: 500px) {
+    .member { grid-template-columns: 5rem 1fr 1.4rem; }
+    .member .pub-short, .member .meter { display: none; }
+    .mod-actions { grid-column: 1 / -1; justify-content: flex-start; padding-left: 5.6rem; }
+  }
+</style>
+</head>
+<body>
+
+<h1>zebra spaces</h1>
+<p class="sub">encrypted voice rooms &nbsp;·&nbsp; webrtc &nbsp;·&nbsp; rendezvous &nbsp;·&nbsp;
+  <a href="zebra-audio.html">1:1 call</a> &nbsp;·&nbsp;
+  <a href="host-your-own.html">host your own</a> &nbsp;·&nbsp;
+  <a href="/">unturf</a></p>
+
+<section id="sec-identity">
+  <h2>identity</h2>
+  <div class="row">
+    <label class="note" for="handle" style="flex:0 0 4rem">handle</label>
+    <input type="text" id="handle" placeholder="what others see — under 32 chars" maxlength="32" autocomplete="off">
+    <span id="pub-short" class="pub-short" title="your persistent ed25519 pubkey"></span>
+  </div>
+  <div class="row">
+    <button id="btn-vault" class="small">backup / restore key</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.</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>
+    <div class="row">
+      <input type="password" id="vault-pass" placeholder="password" autocomplete="new-password">
+      <button id="btn-vault-backup" class="small">export</button>
+    </div>
+    <p class="note" style="margin:0.6rem 0 0.4rem"><strong>restore</strong> — paste a backup blob + its password. <em>overwrites your current identity.</em></p>
+    <textarea id="vault-blob" placeholder="zspc-id-v1|…"></textarea>
+    <div class="row" style="margin-top:0.4rem">
+      <input type="password" id="vault-pass-restore" placeholder="password" autocomplete="current-password">
+      <button id="btn-vault-restore" class="small">import</button>
+    </div>
+    <div class="row" style="margin-top:0.4rem">
+      <span class="dot" id="vault-dot"></span>
+      <span id="vault-status" class="status-line">idle</span>
+    </div>
+  </div>
+</section>
+
+<section id="sec-call">
+  <h2>space</h2>
+  <div class="row">
+    <input type="text" id="rdv-code" placeholder="rendezvous code — same string for everyone in the space">
+    <button id="btn-enter" class="invert">enter</button>
+  </div>
+  <div class="row">
+    <span class="dot warn" id="dot-call"></span>
+    <span id="call-status" class="status-line">idle</span>
+    <button id="btn-mute" disabled>mute</button>
+    <button id="btn-leave" disabled>leave</button>
+  </div>
+  <div class="row" id="row-mic-controls" style="display:none">
+    <label class="note" for="mic-select" style="flex:0 0 3rem">input</label>
+    <select id="mic-select" title="audio input device"><option value="">default microphone</option></select>
+  </div>
+  <div class="row" id="row-music-mode" style="display:none">
+    <label class="note"><input type="checkbox" id="music-mode"> music mode — raw mic, no echo/noise cancellation</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>
+</section>
+
+<section id="sec-invite" class="hidden">
+  <div class="invite-banner">
+    <strong>you're invited to the mic.</strong>
+    <span id="invite-from" class="note"></span>
+    <button id="btn-accept-mic" class="invert small">accept</button>
+    <button id="btn-decline-mic" class="small">decline</button>
+  </div>
+</section>
+
+<section id="sec-room" class="hidden">
+  <h2>room</h2>
+  <div id="members"></div>
+</section>
+
+<section id="sec-listener-actions" class="hidden">
+  <h2>your hand</h2>
+  <div class="row">
+    <button id="btn-raise" class="invert">raise hand</button>
+    <button id="btn-lower" class="hidden">lower hand</button>
+    <span id="hand-status" class="note">tap "raise hand" to ask a mod for the mic.</span>
+  </div>
+</section>
+
+<section>
+  <h2>log</h2>
+  <div class="log" id="log"></div>
+</section>
+
+<script>
+(async () => {
+const $ = (id) => document.getElementById(id);
+function b64(buf){ const u8=buf instanceof Uint8Array?buf:new Uint8Array(buf); let s=''; for(const b of u8) s+=String.fromCharCode(b); return btoa(s); }
+function unb64(s){ return Uint8Array.from(atob(s), c=>c.charCodeAt(0)); }
+function hex(buf){ const u8=buf instanceof Uint8Array?buf:new Uint8Array(buf); return Array.from(u8).map(b=>b.toString(16).padStart(2,'0')).join(''); }
+function shortHex(s){ return s.slice(0,4)+'…'+s.slice(-4); }
+
+const logEl = $('log');
+function logLine(kind, msg){
+  const d=document.createElement('div'); d.className='log-line '+(kind||'');
+  d.innerHTML='<span class="ts">'+new Date().toLocaleTimeString()+'</span> '+msg.replace(/[&<>]/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;'}[c]));
+  logEl.appendChild(d); logEl.scrollTop=logEl.scrollHeight;
+}
+
+/* ==================================================================
+ * identity — ed25519 keypair, persisted in localStorage as JWK.
+ *
+ * Why JWK and not raw bytes: WebCrypto's Ed25519 importKey accepts
+ * 'jwk' and 'raw'/'pkcs8' but JWK round-trips losslessly with both
+ * private and pubkey halves in one object. The pubkey we wire to the
+ * server is the raw 32-byte form, base64-encoded, matching what the
+ * Go side does with ed25519.PublicKey.
+ * ================================================================== */
+const ID_KEY = 'zebra-spaces-id-v1';
+const HANDLE_KEY = 'zebra-spaces-handle-v1';
+const VAULT_PREFIX = 'zspc-id-v1|';
+const PBKDF2_ITER = 600000;
+
+let myKeys = null;       /* { privateKey, publicKey, pubB64, pubHex } */
+let myHandle = '';
+
+async function generateIdentity(){
+  const kp = await crypto.subtle.generateKey({ name:'Ed25519' }, true, ['sign','verify']);
+  const raw = new Uint8Array(await crypto.subtle.exportKey('raw', kp.publicKey));
+  const jwk = await crypto.subtle.exportKey('jwk', kp.privateKey);
+  localStorage.setItem(ID_KEY, JSON.stringify(jwk));
+  return packKeys(kp.privateKey, kp.publicKey, raw);
+}
+function packKeys(priv, pub, rawPub){
+  const pubB64 = b64(rawPub), pubHex = hex(rawPub);
+  return { privateKey: priv, publicKey: pub, pubB64, pubHex };
+}
+async function loadOrCreateIdentity(){
+  const stored = localStorage.getItem(ID_KEY);
+  if (!stored){ myKeys = await generateIdentity(); logLine('','new identity created'); return; }
+  try {
+    const jwk = JSON.parse(stored);
+    const priv = await crypto.subtle.importKey('jwk', jwk, { name:'Ed25519' }, true, ['sign']);
+    /* derive pubkey JWK from the priv JWK so we can importKey for raw export */
+    const pubJwk = { kty:jwk.kty, crv:jwk.crv, x:jwk.x };
+    const pub = await crypto.subtle.importKey('jwk', pubJwk, { name:'Ed25519' }, true, ['verify']);
+    const raw = new Uint8Array(await crypto.subtle.exportKey('raw', pub));
+    myKeys = packKeys(priv, pub, raw);
+  } catch(e){
+    logLine('err','stored identity unreadable, generating new one: '+e.message);
+    myKeys = await generateIdentity();
+  }
+}
+async function signBytes(bytes){
+  const sig = await crypto.subtle.sign('Ed25519', myKeys.privateKey, bytes);
+  return b64(sig);
+}
+
+/* canonical sig inputs — must match the Go side byte-for-byte */
+function sigJoin(roomID, nonce, pubB64, handle){
+  return new TextEncoder().encode('zebra-spaces|v1|join|'+roomID+'|'+nonce+'|'+pubB64+'|'+handle);
+}
+function sigAction(roomID, epoch, action, ...args){
+  return new TextEncoder().encode(['zebra-spaces','v1',roomID,String(epoch),action,...args].join('|'));
+}
+
+/* ==================================================================
+ * vault — password backup/restore of the identity JWK.
+ *
+ * Format: 'zspc-id-v1|' + base64(salt[16] | iv[12] | aes-gcm-ct).
+ *   key = PBKDF2-SHA256(password, salt, 600000) -> AES-GCM-256
+ *   ct  = AES-GCM(iv, key, utf8(JSON(jwk)))
+ * Self-contained: anyone with the blob + password can restore.
+ * ================================================================== */
+async function deriveVaultKey(password, salt, usage){
+  const base = await crypto.subtle.importKey('raw', new TextEncoder().encode(password),
+    'PBKDF2', false, ['deriveKey']);
+  return crypto.subtle.deriveKey({ name:'PBKDF2', salt, iterations:PBKDF2_ITER, hash:'SHA-256' },
+    base, { name:'AES-GCM', length:256 }, false, usage);
+}
+async function vaultExport(password){
+  const jwk = JSON.parse(localStorage.getItem(ID_KEY));
+  const salt = crypto.getRandomValues(new Uint8Array(16));
+  const iv   = crypto.getRandomValues(new Uint8Array(12));
+  const key  = await deriveVaultKey(password, salt, ['encrypt']);
+  const ct   = new Uint8Array(await crypto.subtle.encrypt({ name:'AES-GCM', iv }, key,
+    new TextEncoder().encode(JSON.stringify(jwk))));
+  const blob = new Uint8Array(16+12+ct.length); blob.set(salt); blob.set(iv,16); blob.set(ct,28);
+  return VAULT_PREFIX + b64(blob);
+}
+async function vaultImport(blobStr, password){
+  if (!blobStr.startsWith(VAULT_PREFIX)) throw new Error('not a zebra-spaces vault blob');
+  const bytes = unb64(blobStr.slice(VAULT_PREFIX.length).trim());
+  if (bytes.length < 16+12+1) throw new Error('vault blob too short');
+  const salt = bytes.slice(0,16), iv = bytes.slice(16,28), ct = bytes.slice(28);
+  const key = await deriveVaultKey(password, salt, ['decrypt']);
+  const pt  = new Uint8Array(await crypto.subtle.decrypt({ name:'AES-GCM', iv }, key, ct));
+  const jwk = JSON.parse(new TextDecoder().decode(pt));
+  /* round-trip through WebCrypto to validate it's a real Ed25519 key */
+  const priv = await crypto.subtle.importKey('jwk', jwk, { name:'Ed25519' }, true, ['sign']);
+  const pubJwk = { kty:jwk.kty, crv:jwk.crv, x:jwk.x };
+  const pub = await crypto.subtle.importKey('jwk', pubJwk, { name:'Ed25519' }, true, ['verify']);
+  const raw = new Uint8Array(await crypto.subtle.exportKey('raw', pub));
+  localStorage.setItem(ID_KEY, JSON.stringify(jwk));
+  myKeys = packKeys(priv, pub, raw);
+  renderIdentity();
+}
+
+function setVaultStatus(msg, cls){
+  const e=$('vault-status'); e.textContent=msg; e.className='status-line'+(cls?' '+cls:'');
+  $('vault-dot').className='dot'+(cls==='ok'?' ok':cls==='err'?' warn':'');
+}
+function renderIdentity(){ $('pub-short').textContent = myKeys ? shortHex(myKeys.pubHex) : ''; }
+
+$('btn-vault').addEventListener('click', () => $('vault-panel').classList.toggle('hidden'));
+$('btn-vault-backup').addEventListener('click', async () => {
+  const pw = $('vault-pass').value;
+  if (!pw){ setVaultStatus('enter a password first','err'); return; }
+  if (pw.length < 8){ setVaultStatus('password too short (min 8 chars)','err'); return; }
+  try {
+    setVaultStatus('encrypting…');
+    const blob = await vaultExport(pw);
+    /* offer download — local file, no network */
+    const fname = 'zebra-id-'+shortHex(myKeys.pubHex).replace('…','-')+'.txt';
+    const a = document.createElement('a');
+    a.href = URL.createObjectURL(new Blob([blob], {type:'text/plain'}));
+    a.download = fname; a.click();
+    setVaultStatus('exported as '+fname,'ok');
+    $('vault-pass').value = '';
+  } catch(e){ setVaultStatus('export failed: '+e.message,'err'); }
+});
+$('btn-vault-restore').addEventListener('click', async () => {
+  const blob = $('vault-blob').value.trim();
+  const pw = $('vault-pass-restore').value;
+  if (!blob || !pw){ setVaultStatus('paste blob + password','err'); return; }
+  try {
+    setVaultStatus('decrypting…');
+    await vaultImport(blob, pw);
+    setVaultStatus('identity restored — pubkey '+shortHex(myKeys.pubHex),'ok');
+    $('vault-blob').value=''; $('vault-pass-restore').value='';
+  } catch(e){ setVaultStatus('restore failed: '+e.message,'err'); }
+});
+
+/* handle is per-browser, also in localStorage so it survives reload */
+$('handle').addEventListener('input', (e) => {
+  myHandle = e.target.value.trim().slice(0, 32);
+  localStorage.setItem(HANDLE_KEY, myHandle);
+});
+
+await loadOrCreateIdentity();
+myHandle = localStorage.getItem(HANDLE_KEY) || '';
+$('handle').value = myHandle;
+renderIdentity();
+logLine('', 'pubkey '+myKeys.pubHex);
+
+/* ==================================================================
+ * rendezvous signaling
+ * ================================================================== */
+const SIGNAL_URL = new URLSearchParams(location.search).get('signal')
+  || 'wss://cors-proxy.uncloseai.com/zebra-spaces-signal';
+const SIGNAL_SALT = new TextEncoder().encode('zebra-spaces-v1');
+async function deriveSignalRoom(code){
+  const h = await crypto.subtle.digest('SHA-256', new TextEncoder().encode('zebra-spaces-room|'+code));
+  return hex(h);
+}
+async function deriveSignalKey(code){
+  const base = await crypto.subtle.importKey('raw', new TextEncoder().encode(code), 'PBKDF2', false, ['deriveKey']);
+  return crypto.subtle.deriveKey({ name:'PBKDF2', salt:SIGNAL_SALT, iterations:PBKDF2_ITER, hash:'SHA-256' },
+    base, { name:'AES-GCM', length:256 }, false, ['encrypt','decrypt']);
+}
+async function aesEncrypt(key, str){
+  const iv=crypto.getRandomValues(new Uint8Array(12));
+  const ct=new Uint8Array(await crypto.subtle.encrypt({name:'AES-GCM',iv}, key, new TextEncoder().encode(str)));
+  const out=new Uint8Array(12+ct.length); out.set(iv); out.set(ct,12); return out;
+}
+async function aesDecrypt(key, bytes){
+  const iv=bytes.slice(0,12), ct=bytes.slice(12);
+  return new TextDecoder().decode(await crypto.subtle.decrypt({name:'AES-GCM',iv}, key, ct));
+}
+
+/* ==================================================================
+ * ephemeral TURN credentials (reused from zebra-audio model)
+ * ================================================================== */
+const TURN_CRED_URL = new URLSearchParams(location.search).get('turncred')
+  || 'https://cors-proxy.uncloseai.com/turn-cred';
+let rtcConfig = { iceServers: [{ urls: ['stun:proxy.uncloseai.com:3478','stun:stun.l.google.com:19302'] }] };
+async function refreshTurnCred(){
+  try {
+    const c = await (await fetch(TURN_CRED_URL, {cache:'no-store'})).json();
+    if (c && c.credential && c.uris) {
+      rtcConfig = { iceServers: [
+        { urls: c.stun || ['stun:proxy.uncloseai.com:3478'] },
+        { urls: c.uris, username: c.username, credential: c.credential }
+      ] };
+      logLine('', 'TURN credentials fetched');
+    }
+  } catch (e) { logLine('', 'no TURN creds — direct/STUN only ('+e.message+')'); }
+}
+
+/* ==================================================================
+ * audio — mic acquisition + per-PC remote audio elements
+ *
+ * One mic stream local; one <audio> per remote speaker (so all speakers
+ * are heard concurrently). Music-mode + mid-call device switching from
+ * zebra-audio carries over directly: re-acquire + replaceTrack on every
+ * live sender (now multiple senders, one per peer).
+ * ================================================================== */
+let micStream = null, audioCtx = null, musicMode = false, micDeviceId = '';
+function micConstraints(){
+  const base = musicMode
+    ? { echoCancellation:false, noiseSuppression:false, autoGainControl:false }
+    : { echoCancellation:true,  noiseSuppression:true,  autoGainControl:true  };
+  if (micDeviceId) base.deviceId = { exact: micDeviceId };
+  return base;
+}
+async function refreshMicList(){
+  try {
+    const devs = await navigator.mediaDevices.enumerateDevices();
+    const mics = devs.filter(d=>d.kind==='audioinput');
+    const sel = $('mic-select'); if (!sel) return;
+    sel.innerHTML = '';
+    if (!mics.length){ sel.innerHTML = '<option value="">default microphone</option>'; return; }
+    mics.forEach((m,i)=>{
+      const o = document.createElement('option');
+      o.value = m.deviceId; o.textContent = m.label || ('microphone '+(i+1));
+      sel.appendChild(o);
+    });
+    if (micDeviceId && mics.some(m=>m.deviceId===micDeviceId)) sel.value = micDeviceId;
+    else micDeviceId = sel.value;
+  } catch(e){ logLine('err','could not list inputs: '+e.message); }
+}
+function tagTrack(t){ if (t) t.contentHint = musicMode ? 'music' : 'speech'; }
+async function getMic(){
+  if (micStream) return micStream;
+  micStream = await navigator.mediaDevices.getUserMedia({ audio: micConstraints(), video:false });
+  tagTrack(micStream.getAudioTracks()[0]);
+  return micStream;
+}
+async function setSenderBitrate(sender){
+  if (!sender) return;
+  try {
+    const p = sender.getParameters();
+    if (!p.encodings || !p.encodings.length) p.encodings = [{}];
+    p.encodings[0].maxBitrate = musicMode ? 160000 : 40000;
+    await sender.setParameters(p);
+  } catch(_){}
+}
+async function applyMicMode(){
+  /* re-acquire mic with new constraints, hot-swap onto every live sender */
+  const ns = await navigator.mediaDevices.getUserMedia({ audio: micConstraints(), video:false });
+  const nt = ns.getAudioTracks()[0];
+  tagTrack(nt); nt.enabled = !muted;
+  for (const [uuid, pc] of peers){
+    const sender = pc.getSenders().find(s=>s.track && s.track.kind==='audio') || pc.getSenders()[0];
+    if (sender){ try { await sender.replaceTrack(nt); } catch(_){} setSenderBitrate(sender); }
+  }
+  if (micStream) micStream.getTracks().forEach(t=>t.stop());
+  micStream = ns;
+}
+function meterFor(stream, elId){
+  if (!audioCtx) audioCtx = new (window.AudioContext||window.webkitAudioContext)();
+  const src = audioCtx.createMediaStreamSource(stream);
+  const an = audioCtx.createAnalyser(); an.fftSize = 512;
+  src.connect(an);
+  const buf = new Uint8Array(an.fftSize);
+  const fill = typeof elId==='string' ? $(elId) : elId;
+  (function tick(){
+    if (!fill || !document.contains(fill)) return;   /* meter removed with member row */
+    an.getByteTimeDomainData(buf);
+    let peak=0; for (let i=0;i<buf.length;i++){ const v=Math.abs(buf[i]-128)/128; if(v>peak)peak=v; }
+    fill.style.width = Math.min(100, Math.round(peak*180))+'%';
+    requestAnimationFrame(tick);
+  })();
+}
+
+/* ==================================================================
+ * room state mirror (server is source of truth, we mirror locally for
+ * rendering). updated by welcome / peer-joined / peer-left / state /
+ * role-change / peer-booted / host-promoted.
+ * ================================================================== */
+let myUUID = '';
+let myRole = '';             /* host | cohost | speaker | listener */
+let roomEpoch = 0;
+let roomID = '';
+let members = new Map();     /* uuid -> {uuid,pubkey,handle,role,joined_at} */
+let hostUUID = '';
+let handraise = new Set();   /* uuids of listeners with hand raised */
+let outstandingInvite = null; /* {from, epoch} when we're invited */
+
+const peers = new Map();     /* uuid -> RTCPeerConnection (mesh among speakers) */
+const remoteAudio = new Map(); /* uuid -> <audio> element */
+
+function isMod(role){ return role==='host' || role==='cohost'; }
+function canSpeak(role){ return role==='host' || role==='cohost' || role==='speaker'; }
+
+/* ==================================================================
+ * signaling websocket — JSON text frames, see protocol header in
+ * cmd/zebra-spaces-signal/main.go
+ * ================================================================== */
+let ws = null, wantConnected = false, sigKey = null, sigReconnect = null;
+
+function send(obj){ if (ws && ws.readyState===1) ws.send(JSON.stringify(obj)); }
+async function sendEncSDP(toUUID, kind, desc){
+  send({ type:'sdp-to', to:toUUID, kind, data: b64(await aesEncrypt(sigKey, JSON.stringify(desc))) });
+}
+async function sendMicState(){
+  if (!sigKey) return;
+  try { send({ type:'mic-state', data: b64(await aesEncrypt(sigKey, JSON.stringify({muted}))) }); } catch(_){}
+}
+
+function setStatus(msg, cls){ const e=$('call-status'); e.textContent=msg; e.className='status-line'+(cls?' '+cls:''); }
+
+async function joinSpace(){
+  const code = $('rdv-code').value.trim();
+  if (!code){ setStatus('enter a rendezvous code','err'); return; }
+  if (!myHandle){ setStatus('pick a handle first (under "identity")','err'); $('handle').focus(); return; }
+  if (ws){ setStatus('already in a space — leave first',null); return; }
+  await refreshTurnCred();
+  /* mic isn't acquired here — listeners don't broadcast. We grab it
+   * lazily when our role becomes speaker (or we entered as host). */
+  roomID = await deriveSignalRoom(code);
+  sigKey = await deriveSignalKey(code);
+  wantConnected = true;
+  $('btn-enter').disabled = true;
+  setStatus('connecting…');
+  openSignal();
+}
+
+function openSignal(){
+  ws = new WebSocket(SIGNAL_URL + '?room=' + encodeURIComponent(roomID));
+  ws.onopen = async () => {
+    /* first message: signed join. Server assigns role: host if room is
+     * empty/we're the recently-departed host coming back, else listener. */
+    const nonce = hex(crypto.getRandomValues(new Uint8Array(16)));
+    const sig = await signBytes(sigJoin(roomID, nonce, myKeys.pubB64, myHandle));
+    send({ type:'join', pubkey: myKeys.pubB64, handle: myHandle, nonce, sig });
+  };
+  ws.onclose = () => {
+    ws = null;
+    if (wantConnected){
+      setStatus('rendezvous dropped — reconnecting…');
+      if (sigReconnect) clearTimeout(sigReconnect);
+      sigReconnect = setTimeout(()=>{ if (wantConnected) openSignal(); }, 1500);
+    } else {
+      setStatus('left',null);
+      $('btn-enter').disabled = false;
+    }
+  };
+  ws.onerror = () => setStatus('signal error','err');
+  ws.onmessage = (ev) => { handleSignal(ev.data).catch(e=>logLine('err','signal: '+e.message)); };
+}
+
+async function handleSignal(raw){
+  let m; try { m = JSON.parse(raw); } catch(_){ return; }
+  switch (m.type){
+    case 'welcome':
+      myUUID = m.your_uuid; myRole = m.role; roomEpoch = m.epoch;
+      applyState(m.state);
+      logLine('', 'joined as '+myRole+' — uuid '+shortHex(myUUID));
+      setStatus('connected as '+myRole, 'ok');
+      $('dot-call').className='dot ok';
+      $('btn-leave').disabled = false;
+      $('sec-room').classList.remove('hidden');
+      onRoleEntered();
+      renderRoom();
+      break;
+    case 'state':
+      roomEpoch = m.epoch; applyState(m.state); renderRoom(); break;
+    case 'peer-joined':
+      members.set(m.uuid, { uuid:m.uuid, pubkey:m.pubkey, handle:m.handle, role:m.role, joined_at: Date.now()/1000 });
+      logLine('', m.handle+' joined as '+m.role);
+      /* establish mesh PC if both us and them are speakers (or mods).
+       * present-member-offers: existing speaker offers when a new speaker
+       * arrives. deterministic by uuid string compare. */
+      if (canSpeak(myRole) && canSpeak(m.role)) connectToPeer(m.uuid, /*weOffer*/ myUUID < m.uuid);
+      renderRoom();
+      break;
+    case 'peer-left':
+      {
+        const left = members.get(m.uuid);
+        if (left) logLine('', left.handle+' left');
+        members.delete(m.uuid);
+        handraise.delete(m.uuid);
+        tearPeer(m.uuid);
+        if (hostUUID === m.uuid) hostUUID = '';
+        renderRoom();
+      }
+      break;
+    case 'sdp-from':
+      try { await onSDP(m.from, m.kind, await aesDecrypt(sigKey, unb64(m.data))); }
+      catch(e){ logLine('err','sdp from '+shortHex(m.from)+' failed: '+e.message); }
+      break;
+    case 'mic-state':
+      try { const s = JSON.parse(await aesDecrypt(sigKey, unb64(m.data)));
+            const mm = members.get(m.uuid); if (mm){ mm.muted = !!s.muted; renderRoom(); } } catch(_){}
+      break;
+    case 'hand-raised':
+      handraise.add(m.uuid); renderRoom();
+      { const mm = members.get(m.uuid); if (mm) logLine('', mm.handle+' raised hand'); }
+      break;
+    case 'hand-lowered':
+      handraise.delete(m.uuid); renderRoom(); break;
+    case 'mic-invite':
+      if (m.to === myUUID){
+        outstandingInvite = { from:m.from, epoch:m.epoch };
+        const from = members.get(m.from);
+        $('invite-from').textContent = 'from '+(from?from.handle:shortHex(m.from));
+        $('sec-invite').classList.remove('hidden');
+        logLine('', 'you were invited to the mic by '+(from?from.handle:shortHex(m.from)));
+      } else {
+        const from = members.get(m.from), to = members.get(m.to);
+        if (from && to) logLine('', from.handle+' invited '+to.handle+' to the mic');
+      }
+      break;
+    case 'mic-invite-declined':
+      if (m.from === myUUID){
+        const to = members.get(m.to);
+        logLine('', (to?to.handle:shortHex(m.to))+' declined the mic');
+      }
+      break;
+    case 'role-change':
+      {
+        const mm = members.get(m.uuid);
+        if (mm){
+          const prev = mm.role;
+          mm.role = m.role;
+          roomEpoch = m.epoch;
+          if (m.role === 'host') hostUUID = m.uuid;
+          if (m.uuid === myUUID){
+            myRole = m.role;
+            logLine('', 'you are now '+m.role);
+            setStatus('connected as '+myRole, 'ok');
+            onRoleChanged(prev, m.role);
+          } else {
+            logLine('', mm.handle+' is now '+m.role);
+            /* mesh adjustments */
+            if (canSpeak(myRole)){
+              if (canSpeak(m.role) && !peers.has(m.uuid)) connectToPeer(m.uuid, myUUID < m.uuid);
+              if (!canSpeak(m.role) && peers.has(m.uuid)) tearPeer(m.uuid);
+            } else if (peers.has(m.uuid)){
+              tearPeer(m.uuid);
+            }
+          }
+          renderRoom();
+        }
+      }
+      break;
+    case 'peer-booted':
+      {
+        const mm = members.get(m.uuid);
+        if (mm) logLine('', mm.handle+' was removed by '+(members.get(m.by)?members.get(m.by).handle:'a mod'));
+        members.delete(m.uuid); tearPeer(m.uuid); handraise.delete(m.uuid);
+        if (m.uuid === myUUID){
+          /* we got booted — connection will be closed by server */
+          logLine('err','you were removed from this space');
+        }
+        renderRoom();
+      }
+      break;
+    case 'host-left':
+      logLine('', 'host left the space');
+      hostUUID = '';
+      break;
+    case 'host-promoted':
+      roomEpoch = m.epoch;
+      hostUUID = m.new_host_uuid;
+      { const mm = members.get(m.new_host_uuid);
+        if (mm){ mm.role = 'host';
+          if (m.new_host_uuid === myUUID){ myRole = 'host'; setStatus('connected as host','ok'); onRoleChanged('cohost','host'); }
+          logLine('', (mm.handle||shortHex(m.new_host_uuid))+' is now host'); }
+        renderRoom();
+      }
+      break;
+    case 'space-closing':
+      logLine('err','space closing in '+m.grace_seconds+'s — '+m.reason);
+      setStatus('host left — space closing in '+m.grace_seconds+'s', 'err');
+      break;
+    case 'error':
+      logLine('err','signal: '+m.message);
+      setStatus('signal: '+m.message,'err');
+      break;
+  }
+}
+
+function applyState(state){
+  members = new Map();
+  hostUUID = state.host_uuid || '';
+  for (const m of (state.members||[])) members.set(m.uuid, Object.assign({}, m));
+  handraise = new Set(state.handraise_queue||[]);
+}
+
+/* called once on welcome (whatever role we entered as) and on every
+ * role change. host/cohost/speaker need a mic; listener drops it. */
+async function onRoleEntered(){
+  if (canSpeak(myRole)) await ensureMicAndUI();
+  else updateRoleUI();
+  /* fan-out PCs to all current speakers we should mesh with */
+  if (canSpeak(myRole)){
+    for (const [uuid, mm] of members){
+      if (uuid === myUUID) continue;
+      if (canSpeak(mm.role)) connectToPeer(uuid, myUUID < uuid);
+    }
+  }
+}
+async function onRoleChanged(prev, next){
+  if (!canSpeak(prev) && canSpeak(next)){
+    await ensureMicAndUI();
+    for (const [uuid, mm] of members){
+      if (uuid === myUUID) continue;
+      if (canSpeak(mm.role)) connectToPeer(uuid, myUUID < uuid);
+    }
+  } else if (canSpeak(prev) && !canSpeak(next)){
+    /* demoted to listener — tear all PCs, drop the mic, switch UI */
+    for (const u of [...peers.keys()]) tearPeer(u);
+    dropMic(); muted = false;
+  }
+  updateRoleUI();
+}
+async function ensureMicAndUI(){
+  try {
+    await getMic(); await refreshMicList();
+    $('row-mic-controls').style.display = 'flex';
+    $('row-music-mode').style.display = 'flex';
+    $('btn-mute').disabled = false;
+  } catch(e){ logLine('err','mic blocked: '+e.message); }
+  updateRoleUI();
+}
+function dropMic(){
+  if (micStream){ micStream.getTracks().forEach(t=>t.stop()); micStream = null; }
+  $('row-mic-controls').style.display = 'none';
+  $('row-music-mode').style.display = 'none';
+  $('btn-mute').disabled = true;
+}
+function updateRoleUI(){
+  $('sec-listener-actions').classList.toggle('hidden', myRole !== 'listener');
+}
+
+/* ==================================================================
+ * mesh — one RTCPeerConnection per other speaker
+ *
+ * Deterministic offerer: lex-smaller uuid offers. Avoids both-offer
+ * collisions when two speakers arrive nearly simultaneously. Reconnect
+ * by tear + reconnect with the same rule, so the same side always
+ * drives recovery.
+ * ================================================================== */
+async function connectToPeer(uuid, weOffer){
+  if (peers.has(uuid)) return;
+  if (!micStream){ try { await getMic(); } catch(e){ logLine('err','mic for '+shortHex(uuid)+': '+e.message); return; } }
+  const pc = new RTCPeerConnection(rtcConfig);
+  peers.set(uuid, pc);
+  for (const tr of micStream.getTracks()){ tagTrack(tr); pc.addTrack(tr, micStream); }
+  setSenderBitrate(pc.getSenders().find(s=>s.track && s.track.kind==='audio'));
+  pc.ontrack = (ev) => {
+    let a = remoteAudio.get(uuid);
+    if (!a){ a = document.createElement('audio'); a.autoplay = true; document.body.appendChild(a); remoteAudio.set(uuid, a); }
+    a.srcObject = ev.streams[0] || new MediaStream([ev.track]);
+    try {
+      const m = members.get(uuid);
+      if (m && m._meterEl) meterFor(a.srcObject, m._meterEl);
+    } catch(_){}
+  };
+  pc.onicecandidate = (ev) => { /* using waitForIceGathering pattern, candidates ignored */ };
+  pc.onconnectionstatechange = () => {
+    if (pc.connectionState === 'failed' && peers.get(uuid) === pc){
+      logLine('', 'peer '+shortHex(uuid)+' failed — reconnecting');
+      tearPeer(uuid);
+      /* let the offerer drive recovery */
+      setTimeout(()=>{ if (members.has(uuid) && canSpeak(members.get(uuid).role) && canSpeak(myRole))
+        connectToPeer(uuid, myUUID < uuid); }, 1500);
+    }
+  };
+  if (weOffer){
+    await pc.setLocalDescription(await pc.createOffer());
+    await waitForIceGathering(pc);
+    await sendEncSDP(uuid, 'offer', pc.localDescription);
+  }
+}
+function tearPeer(uuid){
+  const pc = peers.get(uuid);
+  if (pc){ try { pc.close(); } catch(_){} peers.delete(uuid); }
+  const a = remoteAudio.get(uuid);
+  if (a){ try { a.srcObject = null; a.remove(); } catch(_){} remoteAudio.delete(uuid); }
+}
+function waitForIceGathering(p, timeoutMs=6000){
+  return new Promise(res=>{
+    if (p.iceGatheringState==='complete') return res();
+    let done=false; const fin=()=>{ if(done)return; done=true; p.removeEventListener('icegatheringstatechange',h); clearTimeout(t); res(); };
+    const h=()=>{ if(p.iceGatheringState==='complete') fin(); };
+    p.addEventListener('icegatheringstatechange',h); const t=setTimeout(fin,timeoutMs);
+  });
+}
+async function onSDP(fromUUID, kind, json){
+  const desc = JSON.parse(json);
+  let pc = peers.get(fromUUID);
+  if (kind === 'offer'){
+    /* if we had an old PC, tear it (renegotiation = fresh PC) */
+    if (pc){ try { pc.close(); } catch(_){} peers.delete(fromUUID); }
+    await connectToPeer(fromUUID, /*weOffer*/ false);
+    pc = peers.get(fromUUID); if (!pc) return;
+    await pc.setRemoteDescription(desc);
+    await pc.setLocalDescription(await pc.createAnswer());
+    await waitForIceGathering(pc);
+    await sendEncSDP(fromUUID, 'answer', pc.localDescription);
+  } else if (kind === 'answer' && pc){
+    await pc.setRemoteDescription(desc);
+  }
+}
+
+/* ==================================================================
+ * mod actions — signed messages sent to the server
+ * ================================================================== */
+async function modInvite(uuid){
+  const sig = await signBytes(sigAction(roomID, roomEpoch, 'mic-invite', uuid));
+  send({ type:'mic-invite', to: uuid, epoch: roomEpoch, sig });
+}
+async function modPromote(uuid){
+  const sig = await signBytes(sigAction(roomID, roomEpoch, 'promote', uuid, 'cohost'));
+  send({ type:'promote', target: uuid, to: 'cohost', epoch: roomEpoch, sig });
+}
+async function modDemote(uuid, to){
+  const sig = await signBytes(sigAction(roomID, roomEpoch, 'demote', uuid, to));
+  send({ type:'demote', target: uuid, to, epoch: roomEpoch, sig });
+}
+async function modBoot(uuid){
+  if (!confirm('boot this person from the space?')) return;
+  const sig = await signBytes(sigAction(roomID, roomEpoch, 'boot', uuid));
+  send({ type:'boot', target: uuid, epoch: roomEpoch, sig });
+}
+
+/* ==================================================================
+ * room rendering — one <div class="member"> per uuid
+ *
+ * Re-render on every state change. Members keep a stable _meterEl ref
+ * so the per-speaker meter survives identity (re-render replaces row
+ * nodes; meter() captures the element by closure and stops itself when
+ * its element leaves the DOM).
+ * ================================================================== */
+const MIC_ON  = '<svg viewBox="0 0 24 24" fill="none" stroke="#060" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>';
+const MIC_OFF = '<svg viewBox="0 0 24 24" fill="none" stroke="#b00" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="1" y1="1" x2="23" y2="23"/><path d="M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V4a3 3 0 0 0-5.94-.6"/><path d="M17 16.95A7 7 0 0 1 5 12v-2m14 0v2a7 7 0 0 1-.11 1.23"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>';
+
+function rankOf(role){ return {host:4, cohost:3, speaker:2, listener:1}[role] || 0; }
+
+function renderRoom(){
+  const wrap = $('members'); wrap.innerHTML = '';
+  /* sort host → cohosts → speakers → listeners, then by joined_at */
+  const arr = [...members.values()].sort((a,b)=>{
+    const r = rankOf(b.role) - rankOf(a.role);
+    return r !== 0 ? r : (a.joined_at - b.joined_at);
+  });
+  for (const m of arr){
+    const row = document.createElement('div'); row.className = 'member';
+    const badge = document.createElement('span'); badge.className = 'badge '+m.role; badge.textContent = m.role;
+    const handle = document.createElement('span'); handle.className = 'handle';
+    handle.textContent = m.handle;
+    if (m.uuid === myUUID){ const me=document.createElement('span'); me.className='me'; me.textContent='(you)'; handle.appendChild(me); }
+    const pub = document.createElement('span'); pub.className = 'pub-short'; pub.title = m.pubkey; pub.textContent = shortHex(hex(unb64(m.pubkey)));
+    const micEl = document.createElement('span'); micEl.className = 'mic';
+    if (canSpeak(m.role)){
+      micEl.innerHTML = m.muted ? MIC_OFF : MIC_ON;
+    } else if (handraise.has(m.uuid)){
+      micEl.innerHTML = '<span class="raised" title="hand raised">✋</span>';
+    }
+    const meter = document.createElement('div'); meter.className = 'meter';
+    const fill = document.createElement('div'); fill.className = 'meter-fill';
+    meter.appendChild(fill);
+    m._meterEl = fill;
+    /* mod controls — only render when we can act on this row */
+    const acts = document.createElement('span'); acts.className = 'mod-actions';
+    if (isMod(myRole) && m.uuid !== myUUID){
+      if (m.role === 'listener'){
+        const b = document.createElement('button'); b.className='small invert';
+        b.textContent = handraise.has(m.uuid) ? 'give the mic' : 'invite mic';
+        b.onclick = () => modInvite(m.uuid).catch(e=>logLine('err','invite: '+e.message));
+        acts.appendChild(b);
+      }
+      if (m.role === 'speaker' && myRole === 'host'){
+        const b = document.createElement('button'); b.className='small';
+        b.textContent = '→ cohost'; b.onclick = () => modPromote(m.uuid).catch(e=>logLine('err','promote: '+e.message));
+        acts.appendChild(b);
+      }
+      if (m.role === 'speaker'){
+        const b = document.createElement('button'); b.className='small';
+        b.textContent = '→ listener'; b.onclick = () => modDemote(m.uuid, 'listener').catch(e=>logLine('err','demote: '+e.message));
+        acts.appendChild(b);
+      }
+      if (m.role === 'cohost' && myRole === 'host'){
+        const b = document.createElement('button'); b.className='small';
+        b.textContent = '→ speaker'; b.onclick = () => modDemote(m.uuid, 'speaker').catch(e=>logLine('err','demote: '+e.message));
+        acts.appendChild(b);
+      }
+      /* boot allowed against anyone except host; cohosts also can't boot cohosts (host only) */
+      if (m.role !== 'host' && !(m.role === 'cohost' && myRole !== 'host')){
+        const b = document.createElement('button'); b.className='small';
+        b.textContent = 'boot'; b.onclick = () => modBoot(m.uuid);
+        acts.appendChild(b);
+      }
+    }
+    row.appendChild(badge); row.appendChild(handle); row.appendChild(pub);
+    row.appendChild(micEl); row.appendChild(meter); row.appendChild(acts);
+    wrap.appendChild(row);
+  }
+  /* keep listener UI in sync */
+  $('sec-listener-actions').classList.toggle('hidden', myRole !== 'listener');
+  $('btn-raise').classList.toggle('hidden', handraise.has(myUUID));
+  $('btn-lower').classList.toggle('hidden', !handraise.has(myUUID));
+}
+
+/* ==================================================================
+ * listener actions: raise/lower hand, accept/decline mic invite
+ * ================================================================== */
+$('btn-raise').addEventListener('click', () => { send({ type:'raise-hand' }); });
+$('btn-lower').addEventListener('click', () => { send({ type:'lower-hand' }); });
+$('btn-accept-mic').addEventListener('click', () => {
+  if (!outstandingInvite) return;
+  send({ type:'accept-mic', epoch: outstandingInvite.epoch });
+  outstandingInvite = null;
+  $('sec-invite').classList.add('hidden');
+});
+$('btn-decline-mic').addEventListener('click', () => {
+  if (!outstandingInvite) return;
+  send({ type:'decline-mic', epoch: outstandingInvite.epoch });
+  outstandingInvite = null;
+  $('sec-invite').classList.add('hidden');
+});
+
+/* ==================================================================
+ * mute / mic input / music mode — same shape as zebra-audio but the
+ * mute applies to all live senders (we may have many).
+ * ================================================================== */
+let muted = false;
+$('btn-mute').addEventListener('click', () => {
+  if (!micStream) return;
+  muted = !muted;
+  micStream.getAudioTracks().forEach(t=>t.enabled=!muted);
+  $('btn-mute').textContent = muted ? 'unmute' : 'mute';
+  $('btn-mute').className = muted ? 'invert' : '';
+  sendMicState();
+});
+$('mic-select').addEventListener('change', async (e) => {
+  micDeviceId = e.target.value;
+  if (micStream){ try { await applyMicMode(); } catch(err){ logLine('err','input switch failed: '+err.message); await refreshMicList(); } }
+});
+$('music-mode').addEventListener('change', async (e) => {
+  musicMode = e.target.checked;
+  logLine('', 'mic mode: '+(musicMode?'MUSIC':'VOICE'));
+  if (micStream){ try { await applyMicMode(); } catch(err){ logLine('err','mic mode switch failed: '+err.message); } }
+});
+if (navigator.mediaDevices && navigator.mediaDevices.addEventListener){
+  navigator.mediaDevices.addEventListener('devicechange', refreshMicList);
+}
+
+/* ==================================================================
+ * leave / entry buttons
+ * ================================================================== */
+$('btn-enter').addEventListener('click', joinSpace);
+$('rdv-code').addEventListener('keydown', e=>{ if(e.key==='Enter'){ e.preventDefault(); joinSpace(); } });
+$('btn-leave').addEventListener('click', () => {
+  wantConnected = false;
+  if (sigReconnect){ clearTimeout(sigReconnect); sigReconnect = null; }
+  for (const u of [...peers.keys()]) tearPeer(u);
+  if (ws){ try { ws.close(); } catch(_){} ws = null; }
+  dropMic();
+  members.clear(); handraise.clear(); myUUID=''; myRole=''; hostUUID=''; outstandingInvite=null;
+  $('sec-room').classList.add('hidden');
+  $('sec-invite').classList.add('hidden');
+  $('sec-listener-actions').classList.add('hidden');
+  $('dot-call').className='dot warn';
+  setStatus('left', null);
+  $('btn-enter').disabled = false;
+  $('btn-leave').disabled = true;
+  $('btn-mute').disabled = true;
+  $('btn-mute').textContent = 'mute'; $('btn-mute').className=''; muted = false;
+  logLine('', 'left the space');
+});
+
+logLine('', 'ready — pick a handle, type a rendezvous code, enter the space');
+})();
+</script>
+
+<footer style="max-width:720px;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">7bfab8fb57fc87276b5add51ee2adc21</span><br>
+  sha256 <span class="stamp-sha">be0d788fc09365001429e4cf69340117f9583486d713101fd45999520184469f</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>
+</body>
+</html>