@deeeed/metamask-harness 0.34.2 → 0.34.4

package/library/recipes/extension/performance/navigation-memory.recipe.json

@@ -0,0 +1,175 @@
+{
+  "$schema": "https://farmslot.io/schemas/recipe-v1.schema.json",
+  "title": "Extension navigation retained-memory audit",
+  "description": "Measures post-GC retained nodes and listeners across eight representative Extension screens, verifies detached DOM does not grow, and separates navigation-attributable listener growth from an equal-duration idle control.",
+  "proofTargets": [
+    {
+      "id": "screen-slopes",
+      "claim": "Eight representative Extension screens remain within separate post-GC retained-node and listener growth bounds during navigation churn."
+    },
+    {
+      "id": "detached-dom",
+      "claim": "Detached DOM retained after forced garbage collection does not grow beyond the declared bound."
+    },
+    {
+      "id": "idle-control",
+      "claim": "Navigation-attributable listener growth remains within its declared bound after subtracting an equal-duration idle control."
+    }
+  ],
+  "workflow": {
+    "entry": "require-cdp",
+    "nodes": {
+      "require-cdp": {
+        "action": "cdp.target",
+        "required": true,
+        "require_reachable": true,
+        "intent": "Confirm the live Extension CDP target is reachable before measuring retained memory.",
+        "next": "ensure-unlocked"
+      },
+      "ensure-unlocked": {
+        "action": "metamask.wallet.ensure_unlocked",
+        "intent": "Ensure the representative screens are reachable from an unlocked wallet.",
+        "next": "market-detail"
+      },
+      "market-detail": {
+        "action": "metamask.performance.measure_navigation_memory",
+        "screen_hash": "#/perps/market/ETH",
+        "screen_test_id": "perps-market-detail-page",
+        "return_hash": "#/",
+        "cycles": 8,
+        "timeout_ms": 400000,
+        "max_nodes_per_cycle": 2,
+        "max_listeners_per_cycle": 4,
+        "intent": "Measure the post-GC navigation slope for Perps market detail.",
+        "proves": ["screen-slopes"],
+        "next": "order-entry"
+      },
+      "order-entry": {
+        "action": "metamask.performance.measure_navigation_memory",
+        "screen_hash": "#/perps/trade/ETH?direction=long&mode=new",
+        "screen_test_id": "perps-order-entry-page",
+        "return_hash": "#/",
+        "cycles": 6,
+        "timeout_ms": 400000,
+        "max_nodes_per_cycle": 2,
+        "max_listeners_per_cycle": 4,
+        "intent": "Measure the post-GC navigation slope for Perps order entry.",
+        "proves": ["screen-slopes"],
+        "next": "perps-home"
+      },
+      "perps-home": {
+        "action": "metamask.performance.measure_navigation_memory",
+        "screen_hash": "#/perps-home",
+        "screen_test_id": "perps-home-page",
+        "return_hash": "#/",
+        "cycles": 6,
+        "timeout_ms": 400000,
+        "max_nodes_per_cycle": 2,
+        "max_listeners_per_cycle": 4,
+        "intent": "Measure the post-GC navigation slope for Perps home.",
+        "proves": ["screen-slopes"],
+        "next": "market-list"
+      },
+      "market-list": {
+        "action": "metamask.performance.measure_navigation_memory",
+        "screen_hash": "#/perps/market-list",
+        "screen_test_id": "market-list-view",
+        "return_hash": "#/",
+        "cycles": 6,
+        "timeout_ms": 400000,
+        "max_nodes_per_cycle": 2,
+        "max_listeners_per_cycle": 4,
+        "intent": "Measure the post-GC navigation slope for the Perps market list.",
+        "proves": ["screen-slopes"],
+        "next": "perps-activity"
+      },
+      "perps-activity": {
+        "action": "metamask.performance.measure_navigation_memory",
+        "screen_hash": "#/perps/activity",
+        "screen_test_id": "perps-activity-page",
+        "return_hash": "#/",
+        "cycles": 6,
+        "timeout_ms": 400000,
+        "max_nodes_per_cycle": 2,
+        "max_listeners_per_cycle": 4,
+        "intent": "Measure the post-GC navigation slope for Perps activity.",
+        "proves": ["screen-slopes"],
+        "next": "asset-details"
+      },
+      "asset-details": {
+        "action": "metamask.performance.measure_navigation_memory",
+        "screen_hash": "#/asset/0x1/",
+        "screen_test_id": "asset-price-chart",
+        "return_hash": "#/",
+        "cycles": 6,
+        "timeout_ms": 400000,
+        "max_nodes_per_cycle": 2,
+        "max_listeners_per_cycle": 4,
+        "intent": "Measure the post-GC navigation slope for asset details.",
+        "proves": ["screen-slopes"],
+        "next": "swaps-bridge"
+      },
+      "swaps-bridge": {
+        "action": "metamask.performance.measure_navigation_memory",
+        "screen_hash": "#/cross-chain/swaps/prepare-bridge-page",
+        "screen_test_id": "bridge-source-button",
+        "return_hash": "#/",
+        "cycles": 6,
+        "timeout_ms": 400000,
+        "max_nodes_per_cycle": 2,
+        "max_listeners_per_cycle": 4,
+        "intent": "Measure the post-GC navigation slope for Swaps and Bridge.",
+        "proves": ["screen-slopes"],
+        "next": "settings-control"
+      },
+      "settings-control": {
+        "action": "metamask.performance.measure_navigation_memory",
+        "screen_hash": "#/settings",
+        "screen_test_id": "settings-tab-bar-grouped",
+        "return_hash": "#/",
+        "cycles": 6,
+        "timeout_ms": 400000,
+        "max_nodes_per_cycle": 2,
+        "max_listeners_per_cycle": 4,
+        "intent": "Measure a non-Perps control screen with the same retained-memory gate.",
+        "proves": ["screen-slopes"],
+        "next": "detached-market-detail"
+      },
+      "detached-market-detail": {
+        "action": "metamask.performance.measure_detached_dom",
+        "screen_hash": "#/perps/market/ETH",
+        "screen_test_id": "perps-market-detail-page",
+        "return_hash": "#/",
+        "cycles": 5,
+        "timeout_ms": 400000,
+        "max_detached_growth": 50,
+        "intent": "Compare retained detached DOM before and after market-detail navigation churn.",
+        "proves": ["detached-dom"],
+        "next": "idle-control-market-detail"
+      },
+      "idle-control-market-detail": {
+        "action": "metamask.performance.compare_idle_navigation_memory",
+        "screen_hash": "#/perps/market/ETH",
+        "screen_test_id": "perps-market-detail-page",
+        "return_hash": "#/",
+        "rounds": 8,
+        "round_duration_ms": 10000,
+        "timeout_ms": 400000,
+        "max_attributable_listeners_per_cycle": 2,
+        "intent": "Subtract equal-duration idle growth from the market-detail navigation slope.",
+        "proves": ["idle-control"],
+        "next": "return-home"
+      },
+      "return-home": {
+        "action": "ui.navigate",
+        "page": "home",
+        "intent": "Leave the Extension on a known screen after the audit.",
+        "next": "done"
+      },
+      "done": {
+        "action": "end",
+        "status": "pass"
+      }
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deeeed/metamask-harness",
-  "version": "0.34.2",
+  "version": "0.34.4",
   "type": "module",
   "bin": {
     "mm-harness": "bin/mm-harness"

package/scripts/site-contrast.mjs

@@ -146,6 +146,7 @@ const REVEAL = String.raw`
     const d = document.getElementById(l.getAttribute('aria-controls'));
     if (d) d.hidden = false;
   });
+  document.querySelectorAll('[role="tabpanel"][hidden]').forEach((p) => { p.hidden = false; });
   return true;
 })()
 `;
@@ -331,6 +332,9 @@ async function auditPage(browserEndpoint, url) {
 async function checkBehavior(browserEndpoint, port, pages) {
   const base = `http://127.0.0.1:${port}/`;
   await withPage(browserEndpoint, `${base}index.html`, async (page) => {
+    // Step 1 is the hero call to action; it was a collapsible before, so accept
+    // either shape. Step 2 is a tabbed set of prompts, one per kind of work —
+    // every one of them has to survive a copy, including the hidden panels.
     const copied = await page.evaluate(String.raw`
       (async () => {
         Object.defineProperty(navigator, 'clipboard', {
@@ -342,20 +346,58 @@ async function checkBehavior(browserEndpoint, port, pages) {
             },
           },
         });
-        // The onboarding prompt is the hero call to action; it was a collapsible
-        // before, so accept either shape.
-        const button = document.querySelector('.cmd-hero .copy, .prompt .copy');
-        if (!button) throw new Error('copy button was not initialized');
-        button.click();
-        await new Promise((resolve) => setTimeout(resolve, 25));
-        return window.__siteCopied;
+        async function grab(button) {
+          if (!button) throw new Error('copy button was not initialized');
+          window.__siteCopied = null;
+          button.click();
+          await new Promise((resolve) => setTimeout(resolve, 25));
+          return window.__siteCopied;
+        }
+        const out = { setup: await grab(document.querySelector('.cmd-hero .copy, .prompt .copy')), work: [] };
+        for (const tab of document.querySelectorAll('[role="tab"]')) {
+          tab.click();
+          const panel = document.getElementById(tab.getAttribute('aria-controls'));
+          if (!panel || panel.hidden) throw new Error('tab ' + tab.id + ' did not reveal its panel');
+          out.work.push(await grab(panel.querySelector('.cmd .copy')));
+        }
+        return out;
       })()
     `);
-    const expected = 'mm-harness run <recipe> --artifacts-dir ./first-recipe-artifacts';
-    if (!copied?.includes(expected)) {
-      throw new Error(`copy prompt omitted "${expected}"`);
+    // Setting up installs the harness and the skills; the work prompts invoke
+    // them by their exact installed names.
+    const expected = [
+      ['npm i -g @deeeed/metamask-harness@latest', copied.setup],
+      ['yarn skills', copied.setup],
+      ['/mms-recipe-pr-qa-review', copied.work.join('\n')],
+      ['/mms-recipe-cook', copied.work.join('\n')],
+    ];
+    const missing = expected.filter(([line, text]) => !text?.includes(line)).map(([line]) => line);
+    if (missing.length) {
+      throw new Error(`copy prompt omitted ${missing.map((m) => `"${m}"`).join(', ')}`);
+    }
+    if (copied.work.length < 3) {
+      throw new Error(`expected three work prompts, copied ${copied.work.length}`);
     }
 
+    // The landing page is the lobby: one prompt, one way onward, nothing else.
+    const lobby = await page.evaluate(String.raw`
+      (() => ({
+        nav: document.querySelectorAll('.nav a').length,
+        steps: document.querySelectorAll('.step[data-step]').length,
+        depth: document.querySelector('a[href="how-it-works.html"]') !== null,
+        anchor: document.getElementById('prompt') !== null,
+      }))()
+    `);
+    if (lobby.nav || lobby.steps || !lobby.depth || !lobby.anchor) {
+      throw new Error(
+        `landing page is not a lobby: ${lobby.nav} nav links, ${lobby.steps} steps, ` +
+          `depth link ${lobby.depth}, prompt anchor ${lobby.anchor}`,
+      );
+    }
+  });
+
+  // The walkthrough and its saved progress live one click deeper.
+  await withPage(browserEndpoint, `${base}how-it-works.html`, async (page) => {
     const progress = await page.evaluate(String.raw`
       (() => {
         const box = document.querySelector('.step-check');
@@ -426,6 +468,20 @@ async function checkBehavior(browserEndpoint, port, pages) {
       if (broken.length) {
         throw new Error(`${relative} has broken internal links: ${broken.join(', ')}`);
       }
+      // Every page past the lobby owes the reader one click back to the prompt.
+      if (relative !== 'index.html') {
+        const back = await page.evaluate(String.raw`
+          (() => {
+            const link = document.querySelector('.nav a.nav-cta');
+            if (!link) return null;
+            const url = new URL(link.getAttribute('href'), location.href);
+            return url.pathname + url.hash;
+          })()
+        `);
+        if (back !== '/index.html#prompt') {
+          throw new Error(`${relative} has no nav link back to the setup prompt (found ${back})`);
+        }
+      }
       for (const width of [834, 390]) {
         await page.send('Emulation.setDeviceMetricsOverride', {
           width,

package/site/architecture.html

@@ -14,11 +14,12 @@
   <div class="wrap topbar-inner">
     <a class="brand" href="index.html">
       <span class="brand-mark" aria-hidden="true"></span>
-      <span class="brand-name">mm-harness</span>
+      <span class="brand-name">recipes</span>
     </a>
     <nav class="nav" aria-label="Main">
-      <a href="index.html">Start Here</a>
-      <a href="recipes.html">Recipes</a>
+      <a class="nav-cta" href="index.html#prompt">Quick start</a>
+      <a href="how-it-works.html">How it works</a>
+      <a href="recipes.html">Recipe anatomy</a>
       <a href="perps.html">Perps</a>
       <a href="cheatsheet.html">Cheatsheet</a>
       <a href="architecture.html" aria-current="page">Architecture</a>
@@ -30,11 +31,12 @@
 
 <main>
 <section class="wrap hero" style="padding-bottom:1rem">
-  <span class="eyebrow">The stack</span>
+  <span class="eyebrow">The stack behind a recipe</span>
   <h1>How the pieces fit together</h1>
   <p class="lede">
-    Four moving parts, two of which people routinely confuse. What each layer is, where it lives, which
-    workflow you are in, and the mistakes that cost newcomers their first afternoon.
+    The recipe is the unit of trust; the rest of the stack runs it. Four moving parts, two of which
+    people routinely confuse. What each layer is, where it lives, which workflow you are in, and the
+    mistakes that cost newcomers their first afternoon.
   </p>
 </section>
 
@@ -45,8 +47,9 @@
       <span class="k">A recipe proves a task with actions.</span> Recipes are JSON graphs of typed
       actions; <code>mm-harness</code> executes them against a real app and produces an evidence bundle
       a reviewer can trust. <strong>Skills</strong> teach an agent a workflow — author a recipe, review
-      a PR, validate a release. <strong>Recipe libraries</strong> hold each team's recipes and domain
-      actions. Compose in that order, against the product repo under test.
+      a PR, validate a release — and are the layer you work through; they call the harness, which runs
+      the recipe. <strong>Recipe libraries</strong> hold each team's recipes and domain actions.
+      Compose in that order, against the product repo under test.
     </p>
   </div>
 </section>
@@ -67,9 +70,12 @@
         release — turning "figure it out" into a procedure with gates you can steer.
       </p>
       <p>
-        Skills live in the internal <code>Consensys/skills</code> repo, installed per checkout with that
-        repo's tooling. <strong>You do not need skills to run a recipe</strong>, only to have an agent
-        follow a proven workflow instead of improvising one.
+        Skills come from the public <code>MetaMask/skills</code> repo plus the internal
+        <code>Consensys/skills</code> overlay, which needs access to that org; private skills override
+        public ones on a name collision. Clone each, point <code>METAMASK_SKILLS_DIR</code> and
+        <code>CONSENSYS_SKILLS_DIR</code> at them, then install per checkout with
+        <code>yarn skills</code>. <strong>You do not need skills to run a recipe</strong>, only to have
+        an agent follow a proven workflow instead of improvising one.
         <a href="tutorials/v3.html">V3 walks the install.</a>
       </p>
     </div>
@@ -129,8 +135,8 @@
       </p>
       <p style="margin-bottom:0">
         They differ, and the harness says so rather than pretending otherwise: Core is headless with
-        nothing to launch and no UI actions; Mobile carries video capture; Extension is screenshots
-        only.
+        nothing to launch and no UI actions; Extension and iOS can record full-run video; Android
+        replay video is not implemented yet, so use screenshot evidence there.
       </p>
     </div>
   </div>
@@ -466,7 +472,7 @@
 
   <hr class="sep">
   <div class="btn-row">
-    <a class="btn btn-primary" href="index.html#steps">Do the walkthrough →</a>
+    <a class="btn btn-primary" href="how-it-works.html#steps">Do the walkthrough →</a>
     <a class="btn btn-ghost" href="reviewers.html">Read an evidence bundle</a>
   </div>
 </section>
@@ -474,8 +480,8 @@
 
 <footer class="footer">
   <div class="wrap">
-    <p>Internal getting-started guide for the MetaMask agentic coding workflow. Not official MetaMask product documentation.</p>
-    <p>Verified against mm-harness 0.33+.</p>
+    <p>Internal getting-started guide for proving MetaMask changes with recipes. Not official MetaMask product documentation.</p>
+    <p>Sample output moves between releases; trust your terminal over this page.</p>
   </div>
 </footer>
 

package/site/assets/progress.mjs

@@ -1,9 +1,9 @@
 /*
  * Shared behaviour for the getting-started site: checklist progress, copy
- * buttons, platform filters, and the layer diagram. No dependencies, no
+ * buttons, platform filters, tabs, and the layer diagram. No dependencies, no
  * network, no tracking. Progress lives in localStorage under
  * `mmh.progress.<page>`, where <page> comes from body[data-progress-page].
- * Pages that share a namespace share their state (Start Here and the V1
+ * Pages that share a namespace share their state (the How it works walkthrough and the V1
  * tutorial are deliberately the same checklist).
  */
 (function () {
@@ -235,6 +235,50 @@
     select('all');
   }
 
+  /* ---------- tabs ---------- */
+
+  /*
+   * One tablist per group, roving tabindex: only the selected tab is in the
+   * tab order, arrows move between them. Panels stay in the DOM so their
+   * commands remain copyable the moment a tab is shown.
+   */
+  function initTabs() {
+    [].slice.call(document.querySelectorAll('[role="tablist"]')).forEach(function (list) {
+      var tabs = [].slice.call(list.querySelectorAll('[role="tab"]'));
+      if (!tabs.length) return;
+
+      function select(tab, focus) {
+        tabs.forEach(function (other) {
+          var on = other === tab;
+          other.setAttribute('aria-selected', String(on));
+          other.tabIndex = on ? 0 : -1;
+          var panel = document.getElementById(other.getAttribute('aria-controls'));
+          if (panel) panel.hidden = !on;
+        });
+        if (focus) tab.focus();
+      }
+
+      tabs.forEach(function (tab, i) {
+        tab.addEventListener('click', function () { select(tab, false); });
+        tab.addEventListener('keydown', function (e) {
+          var next = null;
+          if (e.key === 'ArrowRight') next = tabs[(i + 1) % tabs.length];
+          if (e.key === 'ArrowLeft') next = tabs[(i - 1 + tabs.length) % tabs.length];
+          if (e.key === 'Home') next = tabs[0];
+          if (e.key === 'End') next = tabs[tabs.length - 1];
+          if (!next) return;
+          e.preventDefault();
+          select(next, true);
+        });
+      });
+
+      var current = tabs.filter(function (t) {
+        return t.getAttribute('aria-selected') === 'true';
+      })[0];
+      select(current || tabs[0], false);
+    });
+  }
+
   /* ---------- layer diagram ---------- */
 
   function initLayers() {
@@ -261,6 +305,7 @@
     initCopy();
     initCellCopy();
     initFilters();
+    initTabs();
     initLayers();
   }
 

package/site/assets/style.css

@@ -37,7 +37,9 @@
 
 *, *::before, *::after { box-sizing: border-box; }
 
-html { scroll-behavior: smooth; scroll-padding-top: 92px; }
+/* Clears the sticky bar plus the progress rail (114px together), so an anchor
+   never parks its heading underneath them. */
+html { scroll-behavior: smooth; scroll-padding-top: 116px; }
 
 body {
   margin: 0;
@@ -158,6 +160,11 @@ main { padding-bottom: 6rem; }
 .nav a:hover { color: var(--text); background: var(--surface); text-decoration: none; }
 .nav a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); }
 
+/* The way back to the setup prompt. It leads the nav and stays visible when the
+   rest of the bar scrolls, because it is the one link every page owes a reader. */
+.nav a.nav-cta { color: var(--accent); border: 1px solid var(--accent-line); }
+.nav a.nav-cta:hover { background: var(--accent-soft); color: var(--accent); }
+
 /* ---------- progress rail ---------- */
 
 .progress-rail {
@@ -248,6 +255,169 @@ main { padding-bottom: 6rem; }
   color: var(--text-faint);
 }
 
+/* ---------- lobby (front page) ----------
+   The entry page carries one idea and one call to action: no nav, no rail, no
+   checklist. Everything else in the site hangs off the single button below. */
+
+.lobby {
+  display: flex;
+  align-items: center;
+  min-height: 100vh;
+  padding: 3rem 0 4rem;
+}
+
+.lobby-inner {
+  width: min(760px, calc(100% - 3rem));
+  margin: 0 auto;
+  text-align: center;
+}
+
+.lobby-mark {
+  display: block;
+  width: 26px;
+  height: 26px;
+  margin: 0 auto 2rem;
+  border-radius: 7px;
+  background: linear-gradient(145deg, var(--accent) 0%, var(--accent-deep) 100%);
+  transform: rotate(45deg);
+  box-shadow: 0 0 0 1px rgba(246, 133, 27, 0.3), 0 4px 18px rgba(246, 133, 27, 0.25);
+}
+
+.lobby h1 {
+  font-size: clamp(2rem, 4.6vw, 2.85rem);
+  max-width: 24ch;
+  margin: 0 auto 0.7rem;
+  /* Break at the comma rather than orphaning the last word. */
+  text-wrap: balance;
+}
+
+.lobby-lede {
+  font-size: 1.11rem;
+  line-height: 1.62;
+  color: var(--text-dim);
+  max-width: 60ch;
+  margin: 0 auto 1.1rem;
+}
+
+.lobby-sub {
+  font-size: 0.95rem;
+  color: var(--text-faint);
+  max-width: 54ch;
+  margin: 0 auto 1.5rem;
+}
+
+/* Code is never centred, even when its surroundings are. */
+.lobby .cmd { text-align: left; }
+
+/* The prompt is meant to be copied, not read: keep it short enough that the
+   button under it stays in view, and say so with a fade at the cut. */
+/* Wider right gutter than the shared block: the copy control is bigger here. */
+.lobby .cmd-hero pre { max-height: 15rem; font-size: 0.8rem; padding-right: 5rem; }
+
+.lobby .cmd-hero::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 2.6rem;
+  pointer-events: none;
+  background: linear-gradient(to bottom, rgba(11, 12, 16, 0), #0b0c10);
+}
+
+/* Copying is the call to action here, so the control is a button, not a hint. */
+.lobby .cmd-hero .copy {
+  font-size: 0.78rem;
+  font-weight: 600;
+  padding: 0.38rem 0.85rem;
+  color: #17120b;
+  background: var(--accent);
+  border-color: var(--accent);
+}
+.lobby .cmd-hero .copy:hover { color: #17120b; background: #ff9630; border-color: #ff9630; }
+.lobby .cmd-hero .copy[data-copied="1"] {
+  color: #0a1a10;
+  background: var(--pass);
+  border-color: var(--pass);
+}
+
+/* ---------- quick start (lobby) ----------
+   Two steps: set up once, then pick the work. Left-aligned inside the centred
+   lobby, because everything in here is read line by line. */
+
+.qs { text-align: left; margin-top: 1.8rem; }
+
+.qs-step + .qs-step { margin-top: 2.6rem; }
+
+.qs-title {
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+  font-size: 1.16rem;
+  font-weight: 640;
+  margin: 0 0 0.35rem;
+}
+
+.qs-num {
+  flex: none;
+  width: 1.6rem;
+  height: 1.6rem;
+  display: grid;
+  place-items: center;
+  border-radius: 50%;
+  background: var(--accent-soft);
+  border: 1px solid var(--accent-line);
+  color: var(--accent);
+  font-family: var(--mono);
+  font-size: 0.8rem;
+}
+
+.qs-why { color: var(--text-dim); font-size: 0.95rem; margin-bottom: 0.9rem; }
+
+/* ---------- tabs ---------- */
+
+.tablist {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+  margin-bottom: 0.9rem;
+}
+
+.tab {
+  font: 560 0.9rem var(--sans);
+  color: var(--text-dim);
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 99px;
+  padding: 0.4rem 1rem;
+  cursor: pointer;
+  transition: all 0.16s var(--ease);
+}
+.tab:hover { color: var(--text); border-color: var(--accent-line); }
+.tab[aria-selected="true"] {
+  color: var(--accent);
+  background: var(--accent-soft);
+  border-color: var(--accent-line);
+}
+
+.qs-panel[hidden] { display: none; }
+.qs-panel:focus-visible { outline-offset: 4px; }
+
+.qs-panel-why { color: var(--text-dim); font-size: 0.92rem; margin-bottom: 0.5rem; }
+
+/* These prompts are the call to action too, so their copy control never hides. */
+.qs-panel .cmd .copy { opacity: 1; }
+.qs-panel .cmd pre { white-space: pre-wrap; word-break: break-word; font-size: 0.82rem; }
+
+.lobby-cta { display: flex; justify-content: center; gap: 0.7rem; flex-wrap: wrap; margin-top: 1.6rem; }
+
+.lobby-fine {
+  margin: 2.4rem auto 0;
+  max-width: 56ch;
+  font-size: 0.86rem;
+  color: var(--text-faint);
+}
+
 /* ---------- cards ---------- */
 
 .card {
@@ -639,6 +809,16 @@ tr[hidden], .filter-hidden { display: none !important; }
 
 .stack { display: flex; flex-direction: column; gap: 0.55rem; margin: 1.8rem 0; }
 
+/* Names which end of the diagram is the one you touch. */
+.stack-caption {
+  font-family: var(--mono);
+  font-size: 0.78rem;
+  letter-spacing: 0.04em;
+  color: var(--text-faint);
+  margin: 1.6rem 0 0.55rem;
+}
+.stack-caption + .stack { margin-top: 0; }
+
 .layer {
   width: 100%;
   text-align: left;