From 656f206c401faab65a157b0640470c7ec5c91ec7 Mon Sep 17 00:00:00 2001
From: "russell@unturf.com" <russell@unturf.com>
Date: Sun, 14 Jun 2026 13:11:09 -0400
Subject: [PATCH] playground+repl: bend+vault on one line, grid-only layout,
 hidden fix

- bend URL and vault password now share a single config-bar row, split
  via a 2-column grid (1fr 1fr). Vault still hidden when free-form
  isn't selected; just collapses its column.
- Every flexbox removed. Every multi-child container uses CSS grid:
  .controls, .config-bar, .bend-bar, .vault-bar, .panes, .pane,
  .brand, .tabbar, .tabs, .tab, .transcript, .entry, .tier-output,
  .prompt-bar, .lock-screen, .lock-card, .lock-row.
- Added `[hidden] { display: none !important; }` so the ephemeral
  button on the REPL lock screen actually hides the modal. Without
  this, .lock-screen's `display: grid` overrode the hidden attribute's
  UA-default display: none.
---
 wasm/app/index.html       | 29 ++++++++-------
 wasm/app/style.css        | 73 +++++++++++++++++++------------------
 wasm/dist-repl/repl.css   | 71 +++++++++++++++++++++++-------------
 wasm/dist-repl/style.css  | 76 +++++++++++++++++++++------------------
 wasm/repl/repl.css        | 71 +++++++++++++++++++++++-------------
 www/playground/index.html | 29 ++++++++-------
 www/playground/style.css  | 73 +++++++++++++++++++------------------
 www/repl/repl.css         | 71 +++++++++++++++++++++++-------------
 www/repl/style.css        | 73 +++++++++++++++++++------------------
 9 files changed, 327 insertions(+), 239 deletions(-)

diff --git a/wasm/app/index.html b/wasm/app/index.html
index b664386..dda1230 100644
--- a/wasm/app/index.html
+++ b/wasm/app/index.html
@@ -59,22 +59,21 @@
   <span id="status" class="status"></span>
 </section>
 
-<section class="bend-bar">
-  <span class="bend-icon" title="gpu-worker bend URL">⚡</span>
-  <label>bend URL
+<section class="config-bar">
+  <div class="bend-bar">
+    <span class="bend-icon" title="gpu-worker bend URL">⚡</span>
     <input id="bend-url" type="url" placeholder="https://your-gpu-worker.example/bend  (sets (bend!-call ...) destination)">
-  </label>
-  <button id="bend-save" class="secondary">save</button>
-  <span id="bend-state" class="bend-state"></span>
-</section>
-
-<section class="vault-bar" id="vault-bar" hidden>
-  <span class="vault-icon" title="local vault">🔒</span>
-  <span id="vault-state" class="vault-state">locked</span>
-  <input id="vault-pw" type="password" autocomplete="off" placeholder="password to unlock free-form vault">
-  <button id="vault-unlock" class="secondary">unlock</button>
-  <button id="vault-lock" class="secondary" hidden>lock</button>
-  <span id="vault-note" class="vault-note"></span>
+    <button id="bend-save" class="secondary">save</button>
+    <span id="bend-state" class="bend-state"></span>
+  </div>
+  <div class="vault-bar" id="vault-bar" hidden>
+    <span class="vault-icon" title="local vault">🔒</span>
+    <span id="vault-state" class="vault-state">locked</span>
+    <input id="vault-pw" type="password" autocomplete="off" placeholder="vault password">
+    <button id="vault-unlock" class="secondary">unlock</button>
+    <button id="vault-lock" class="secondary" hidden>lock</button>
+    <span id="vault-note" class="vault-note"></span>
+  </div>
 </section>
 
 <section class="panes">
diff --git a/wasm/app/style.css b/wasm/app/style.css
index 1e69047..bd3af40 100644
--- a/wasm/app/style.css
+++ b/wasm/app/style.css
@@ -1,6 +1,5 @@
-/* lumbda playground — styled to match lumbda.com homepage.
- * palette + typography mirror www/style.css.
- */
+/* lumbda playground — grid-only layout, matches lumbda.com homepage palette.
+ * No flexbox. Every multi-child layout uses CSS Grid. */
 
 @font-face {
   font-family: 'chunkfive';
@@ -15,7 +14,7 @@
   --fg: #1a1a1a;
   --bg: #fafaf7;
   --muted: #666;
-  --accent: #227842;            /* single brand green — matches homepage */
+  --accent: #227842;
   --green: #227842;
   --rule: #d4d4d0;
   --code-bg: #f0ede4;
@@ -30,7 +29,7 @@
     --fg: #e8e6e0;
     --bg: #161613;
     --muted: #9a9892;
-    --accent: #5ec07a;          /* lightened for contrast on dark bg */
+    --accent: #5ec07a;
     --green: #5ec07a;
     --rule: #3a3a36;
     --code-bg: #22221f;
@@ -42,9 +41,13 @@
 
 * { box-sizing: border-box; }
 
+/* The hidden attribute must beat author display rules.
+ * Without !important, .lock-screen { display: grid } overrides
+ * [hidden]'s UA default of display: none. */
+[hidden] { display: none !important; }
+
 html {
-  /* Default zoom so text is comfortably readable. Native CSS zoom
-   * preserves layout proportions across the whole document. */
+  /* Comfortable default zoom. */
   zoom: 1.33;
 }
 
@@ -65,8 +68,9 @@ header {
 }
 
 .brand {
-  display: inline-flex;
-  align-items: flex-end;
+  display: inline-grid;
+  grid-template-columns: auto auto;
+  align-items: end;
   gap: 0.6rem;
   text-decoration: none;
   color: inherit;
@@ -124,10 +128,10 @@ header code {
 .controls {
   padding: 0.75rem 1.5rem;
   border-bottom: 1px solid var(--rule);
-  display: flex;
+  display: grid;
+  grid-template-columns: auto auto auto auto 1fr;
   gap: 1rem;
   align-items: center;
-  flex-wrap: wrap;
   background: var(--bg);
 }
 
@@ -189,30 +193,33 @@ header code {
 .controls .status {
   color: var(--muted);
   font-size: 0.8em;
-  margin-left: auto;
+  justify-self: end;
 }
 .controls .status.busy { color: var(--busy); }
 .controls .status.warn { color: var(--busy); }
 .controls .status.err  { color: var(--err); }
 .controls .status.ok   { color: var(--green); }
 
-.bend-bar {
+/* ─── Config bar: bend + vault side by side ────────────────────── */
+
+.config-bar {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.6rem;
   padding: 0.4rem 1.5rem;
   border-bottom: 1px solid var(--rule);
-  display: flex; align-items: center; gap: 0.6rem;
   background: var(--bg);
   font-size: 0.85em;
 }
-.bend-bar .bend-icon { font-size: 1em; }
-.bend-bar label {
-  flex: 1;
-  display: flex;
-  align-items: center;
+
+.bend-bar {
+  display: grid;
+  grid-template-columns: auto 1fr auto auto;
   gap: 0.5rem;
-  color: var(--muted);
+  align-items: center;
 }
+.bend-bar .bend-icon { font-size: 1em; }
 .bend-bar input[type=url] {
-  flex: 1;
   background: var(--code-bg);
   border: 1px solid var(--rule);
   color: var(--fg);
@@ -220,6 +227,7 @@ header code {
   font-family: var(--mono);
   font-size: 0.9em;
   border-radius: 3px;
+  min-width: 0;
 }
 .bend-bar input[type=url]:focus { outline: none; border-color: var(--green); }
 .bend-bar button {
@@ -237,11 +245,10 @@ header code {
 .bend-bar .bend-state { color: var(--green); font-size: 0.8em; min-width: 4em; }
 
 .vault-bar {
-  padding: 0.5rem 1.5rem;
-  border-bottom: 1px solid var(--rule);
-  display: flex; align-items: center; gap: 0.6rem;
-  background: var(--bg);
-  font-size: 0.85em;
+  display: grid;
+  grid-template-columns: auto auto auto auto auto 1fr;
+  gap: 0.5rem;
+  align-items: center;
 }
 .vault-bar .vault-icon { font-size: 1em; }
 .vault-bar .vault-state { color: var(--muted); }
@@ -254,7 +261,7 @@ header code {
   font-family: var(--mono);
   font-size: 0.9em;
   border-radius: 3px;
-  width: 18rem;
+  min-width: 0;
 }
 .vault-bar input[type=password]:focus { outline: none; border-color: var(--green); }
 .vault-bar button {
@@ -284,11 +291,12 @@ header code {
 .pane {
   background: var(--pane-bg);
   padding: 0.5rem 0.75rem 0.75rem;
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-rows: auto 1fr;
+  gap: 0.4rem;
 }
 .pane h2 {
-  margin: 0 0 0.4rem;
+  margin: 0;
   font-size: 0.7rem;
   font-weight: 500;
   color: var(--muted);
@@ -311,7 +319,6 @@ header code {
   font-size: 13px;
   line-height: 1.35;
 }
-/* Append-only: results arrive in finish order — fastest tier shows up first. */
 #output .tier-block { margin-bottom: 1rem; }
 #output .tier-block:last-child { margin-bottom: 0; }
 #output .tier-block h3 {
@@ -334,9 +341,7 @@ header code {
   white-space: pre;
   font-family: var(--mono);
 }
-#output .err {
-  color: var(--err);
-}
+#output .err { color: var(--err); }
 
 /* ─── Footer ────────────────────────────────────────────────────── */
 
diff --git a/wasm/dist-repl/repl.css b/wasm/dist-repl/repl.css
index 9b1534c..19dc1f5 100644
--- a/wasm/dist-repl/repl.css
+++ b/wasm/dist-repl/repl.css
@@ -1,10 +1,17 @@
-/* lumbda repl specific styles — inherits style.css palette. */
+/* lumbda repl — grid-only layout. Inherits palette + base from style.css. */
 
-body.repl { display: flex; flex-direction: column; min-height: 100vh; }
+body.repl {
+  display: grid;
+  grid-template-rows: auto auto 1fr auto auto;
+  min-height: 100vh;
+}
+
+/* ─── Lock screen overlay ──────────────────────────────────────── */
 
 .lock-screen {
   position: fixed; inset: 0; z-index: 1000;
-  display: flex; align-items: center; justify-content: center;
+  display: grid;
+  place-items: center;
   background: rgba(15, 17, 21, 0.85);
   backdrop-filter: blur(4px);
 }
@@ -15,16 +22,18 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
   padding: 1.5rem 2rem;
   max-width: 28rem;
   width: 90%;
+  display: grid;
+  gap: 0.4rem;
 }
 .lock-card h2 {
-  margin: 0 0 0.5rem;
+  margin: 0 0 0.1rem;
   font-family: 'chunkfive', Georgia, serif;
   font-size: 1.4rem;
   color: var(--green);
   font-weight: normal;
 }
 .lock-card p {
-  margin: 0 0 0.8rem;
+  margin: 0;
   font-size: 0.85rem;
   color: var(--muted);
   line-height: 1.5;
@@ -32,7 +41,7 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
 .lock-card input[type=password] {
   width: 100%;
   padding: 0.5rem 0.7rem;
-  margin: 0.4rem 0;
+  margin: 0.4rem 0 0;
   background: var(--code-bg);
   color: var(--fg);
   border: 1px solid var(--rule);
@@ -44,7 +53,13 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
   outline: none;
   border-color: var(--green);
 }
-.lock-row { display: flex; gap: 0.6rem; margin-top: 0.5rem; }
+.lock-row {
+  display: grid;
+  grid-template-columns: auto auto;
+  gap: 0.6rem;
+  margin-top: 0.5rem;
+  justify-content: start;
+}
 .lock-row button {
   font-family: var(--mono);
   font-size: 0.85em; font-weight: 600;
@@ -58,14 +73,17 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
 .lock-row .primary:hover { filter: brightness(1.1); }
 .lock-row .secondary:hover { background: var(--code-bg); }
 .lock-note {
-  margin: 0.6rem 0 0;
+  margin: 0.4rem 0 0;
   color: var(--err);
   font-size: 0.8rem;
   min-height: 1.2em;
 }
 
+/* ─── Tab bar ──────────────────────────────────────────────────── */
+
 .tabbar {
-  display: flex;
+  display: grid;
+  grid-template-columns: auto auto 1fr auto auto auto auto;
   gap: 0.3rem;
   align-items: center;
   padding: 0.4rem 1rem;
@@ -73,10 +91,11 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
   background: var(--bg);
 }
 .tabs {
-  display: flex;
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: max-content;
   gap: 0.3rem;
   overflow-x: auto;
-  flex: 0 1 auto;
 }
 .tab {
   background: var(--pane-bg);
@@ -85,9 +104,10 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
   border-radius: 3px 3px 0 0;
   font-size: 0.85em;
   cursor: pointer;
-  display: inline-flex;
-  align-items: center;
+  display: inline-grid;
+  grid-template-columns: auto auto;
   gap: 0.3rem;
+  align-items: center;
   white-space: nowrap;
 }
 .tab.active {
@@ -115,15 +135,17 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
   border-color: var(--green); color: var(--green);
 }
 .tabbar .ghost:disabled { opacity: 0.4; cursor: default; }
-.tabbar .spacer { flex: 1; }
+
+/* ─── Transcript ───────────────────────────────────────────────── */
 
 .transcript-wrap {
-  flex: 1;
   overflow: auto;
   padding: 1rem;
   background: var(--code-bg);
 }
 .transcript {
+  display: grid;
+  gap: 0.6rem;
   font-family: var(--mono);
   font-size: 0.9em;
   line-height: 1.5;
@@ -131,17 +153,18 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
   margin: 0 auto;
 }
 .transcript .entry {
-  margin-bottom: 0.8rem;
+  display: grid;
+  gap: 0.25rem;
   padding: 0.4rem 0.6rem;
   border-left: 2px solid var(--rule);
 }
 .transcript .entry .prompt-line {
   color: var(--green);
   white-space: pre-wrap;
-  margin-bottom: 0.2rem;
 }
 .transcript .entry .tier-output {
-  display: flex;
+  display: grid;
+  grid-template-columns: 7rem 1fr;
   gap: 0.6rem;
   padding: 0.25rem 0;
   border-top: 1px dashed var(--rule);
@@ -152,13 +175,10 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
   font-size: 0.7em;
   text-transform: uppercase;
   letter-spacing: 0.08em;
-  min-width: 7rem;
-  flex-shrink: 0;
   padding-top: 0.15rem;
 }
 .transcript .entry .tier-result {
   white-space: pre-wrap;
-  flex: 1;
 }
 .transcript .entry .tier-time {
   color: var(--muted);
@@ -167,10 +187,13 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
 }
 .transcript .entry.error .tier-result { color: var(--err); }
 
+/* ─── Prompt bar ───────────────────────────────────────────────── */
+
 .prompt-bar {
-  display: flex;
-  align-items: flex-end;
+  display: grid;
+  grid-template-columns: auto 1fr auto auto;
   gap: 0.5rem;
+  align-items: end;
   padding: 0.5rem 1rem 0.8rem;
   border-top: 1px solid var(--rule);
   background: var(--bg);
@@ -181,7 +204,6 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
   padding: 0.4rem 0 0;
 }
 .prompt-bar textarea {
-  flex: 1;
   resize: none;
   background: var(--code-bg);
   border: 1px solid var(--rule);
@@ -192,6 +214,7 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
   border-radius: 3px;
   min-height: 1.6em;
   max-height: 30vh;
+  min-width: 0;
 }
 .prompt-bar textarea:focus { outline: none; border-color: var(--green); }
 .prompt-bar select {
diff --git a/wasm/dist-repl/style.css b/wasm/dist-repl/style.css
index e62e45c..bd3af40 100644
--- a/wasm/dist-repl/style.css
+++ b/wasm/dist-repl/style.css
@@ -1,6 +1,5 @@
-/* lumbda playground — styled to match lumbda.com homepage.
- * palette + typography mirror www/style.css.
- */
+/* lumbda playground — grid-only layout, matches lumbda.com homepage palette.
+ * No flexbox. Every multi-child layout uses CSS Grid. */
 
 @font-face {
   font-family: 'chunkfive';
@@ -15,7 +14,7 @@
   --fg: #1a1a1a;
   --bg: #fafaf7;
   --muted: #666;
-  --accent: #227842;            /* single brand green — matches homepage */
+  --accent: #227842;
   --green: #227842;
   --rule: #d4d4d0;
   --code-bg: #f0ede4;
@@ -30,7 +29,7 @@
     --fg: #e8e6e0;
     --bg: #161613;
     --muted: #9a9892;
-    --accent: #5ec07a;          /* lightened for contrast on dark bg */
+    --accent: #5ec07a;
     --green: #5ec07a;
     --rule: #3a3a36;
     --code-bg: #22221f;
@@ -42,9 +41,13 @@
 
 * { box-sizing: border-box; }
 
+/* The hidden attribute must beat author display rules.
+ * Without !important, .lock-screen { display: grid } overrides
+ * [hidden]'s UA default of display: none. */
+[hidden] { display: none !important; }
+
 html {
-  /* Default zoom so text is comfortably readable. Native CSS zoom
-   * preserves layout proportions across the whole document. */
+  /* Comfortable default zoom. */
   zoom: 1.33;
 }
 
@@ -65,8 +68,9 @@ header {
 }
 
 .brand {
-  display: inline-flex;
-  align-items: flex-end;
+  display: inline-grid;
+  grid-template-columns: auto auto;
+  align-items: end;
   gap: 0.6rem;
   text-decoration: none;
   color: inherit;
@@ -124,10 +128,10 @@ header code {
 .controls {
   padding: 0.75rem 1.5rem;
   border-bottom: 1px solid var(--rule);
-  display: flex;
+  display: grid;
+  grid-template-columns: auto auto auto auto 1fr;
   gap: 1rem;
   align-items: center;
-  flex-wrap: wrap;
   background: var(--bg);
 }
 
@@ -146,7 +150,8 @@ header code {
   letter-spacing: 0.08em;
 }
 .controls label {
-  margin-right: 0.7em;
+  display: block;
+  margin: 0.1em 0;
   cursor: pointer;
   user-select: none;
   font-size: 0.85em;
@@ -188,30 +193,33 @@ header code {
 .controls .status {
   color: var(--muted);
   font-size: 0.8em;
-  margin-left: auto;
+  justify-self: end;
 }
 .controls .status.busy { color: var(--busy); }
 .controls .status.warn { color: var(--busy); }
 .controls .status.err  { color: var(--err); }
 .controls .status.ok   { color: var(--green); }
 
-.bend-bar {
+/* ─── Config bar: bend + vault side by side ────────────────────── */
+
+.config-bar {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.6rem;
   padding: 0.4rem 1.5rem;
   border-bottom: 1px solid var(--rule);
-  display: flex; align-items: center; gap: 0.6rem;
   background: var(--bg);
   font-size: 0.85em;
 }
-.bend-bar .bend-icon { font-size: 1em; }
-.bend-bar label {
-  flex: 1;
-  display: flex;
-  align-items: center;
+
+.bend-bar {
+  display: grid;
+  grid-template-columns: auto 1fr auto auto;
   gap: 0.5rem;
-  color: var(--muted);
+  align-items: center;
 }
+.bend-bar .bend-icon { font-size: 1em; }
 .bend-bar input[type=url] {
-  flex: 1;
   background: var(--code-bg);
   border: 1px solid var(--rule);
   color: var(--fg);
@@ -219,6 +227,7 @@ header code {
   font-family: var(--mono);
   font-size: 0.9em;
   border-radius: 3px;
+  min-width: 0;
 }
 .bend-bar input[type=url]:focus { outline: none; border-color: var(--green); }
 .bend-bar button {
@@ -236,11 +245,10 @@ header code {
 .bend-bar .bend-state { color: var(--green); font-size: 0.8em; min-width: 4em; }
 
 .vault-bar {
-  padding: 0.5rem 1.5rem;
-  border-bottom: 1px solid var(--rule);
-  display: flex; align-items: center; gap: 0.6rem;
-  background: var(--bg);
-  font-size: 0.85em;
+  display: grid;
+  grid-template-columns: auto auto auto auto auto 1fr;
+  gap: 0.5rem;
+  align-items: center;
 }
 .vault-bar .vault-icon { font-size: 1em; }
 .vault-bar .vault-state { color: var(--muted); }
@@ -253,7 +261,7 @@ header code {
   font-family: var(--mono);
   font-size: 0.9em;
   border-radius: 3px;
-  width: 18rem;
+  min-width: 0;
 }
 .vault-bar input[type=password]:focus { outline: none; border-color: var(--green); }
 .vault-bar button {
@@ -283,11 +291,12 @@ header code {
 .pane {
   background: var(--pane-bg);
   padding: 0.5rem 0.75rem 0.75rem;
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-rows: auto 1fr;
+  gap: 0.4rem;
 }
 .pane h2 {
-  margin: 0 0 0.4rem;
+  margin: 0;
   font-size: 0.7rem;
   font-weight: 500;
   color: var(--muted);
@@ -310,7 +319,6 @@ header code {
   font-size: 13px;
   line-height: 1.35;
 }
-/* Append-only: results arrive in finish order — fastest tier shows up first. */
 #output .tier-block { margin-bottom: 1rem; }
 #output .tier-block:last-child { margin-bottom: 0; }
 #output .tier-block h3 {
@@ -333,9 +341,7 @@ header code {
   white-space: pre;
   font-family: var(--mono);
 }
-#output .err {
-  color: var(--err);
-}
+#output .err { color: var(--err); }
 
 /* ─── Footer ────────────────────────────────────────────────────── */
 
diff --git a/wasm/repl/repl.css b/wasm/repl/repl.css
index 9b1534c..19dc1f5 100644
--- a/wasm/repl/repl.css
+++ b/wasm/repl/repl.css
@@ -1,10 +1,17 @@
-/* lumbda repl specific styles — inherits style.css palette. */
+/* lumbda repl — grid-only layout. Inherits palette + base from style.css. */
 
-body.repl { display: flex; flex-direction: column; min-height: 100vh; }
+body.repl {
+  display: grid;
+  grid-template-rows: auto auto 1fr auto auto;
+  min-height: 100vh;
+}
+
+/* ─── Lock screen overlay ──────────────────────────────────────── */
 
 .lock-screen {
   position: fixed; inset: 0; z-index: 1000;
-  display: flex; align-items: center; justify-content: center;
+  display: grid;
+  place-items: center;
   background: rgba(15, 17, 21, 0.85);
   backdrop-filter: blur(4px);
 }
@@ -15,16 +22,18 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
   padding: 1.5rem 2rem;
   max-width: 28rem;
   width: 90%;
+  display: grid;
+  gap: 0.4rem;
 }
 .lock-card h2 {
-  margin: 0 0 0.5rem;
+  margin: 0 0 0.1rem;
   font-family: 'chunkfive', Georgia, serif;
   font-size: 1.4rem;
   color: var(--green);
   font-weight: normal;
 }
 .lock-card p {
-  margin: 0 0 0.8rem;
+  margin: 0;
   font-size: 0.85rem;
   color: var(--muted);
   line-height: 1.5;
@@ -32,7 +41,7 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
 .lock-card input[type=password] {
   width: 100%;
   padding: 0.5rem 0.7rem;
-  margin: 0.4rem 0;
+  margin: 0.4rem 0 0;
   background: var(--code-bg);
   color: var(--fg);
   border: 1px solid var(--rule);
@@ -44,7 +53,13 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
   outline: none;
   border-color: var(--green);
 }
-.lock-row { display: flex; gap: 0.6rem; margin-top: 0.5rem; }
+.lock-row {
+  display: grid;
+  grid-template-columns: auto auto;
+  gap: 0.6rem;
+  margin-top: 0.5rem;
+  justify-content: start;
+}
 .lock-row button {
   font-family: var(--mono);
   font-size: 0.85em; font-weight: 600;
@@ -58,14 +73,17 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
 .lock-row .primary:hover { filter: brightness(1.1); }
 .lock-row .secondary:hover { background: var(--code-bg); }
 .lock-note {
-  margin: 0.6rem 0 0;
+  margin: 0.4rem 0 0;
   color: var(--err);
   font-size: 0.8rem;
   min-height: 1.2em;
 }
 
+/* ─── Tab bar ──────────────────────────────────────────────────── */
+
 .tabbar {
-  display: flex;
+  display: grid;
+  grid-template-columns: auto auto 1fr auto auto auto auto;
   gap: 0.3rem;
   align-items: center;
   padding: 0.4rem 1rem;
@@ -73,10 +91,11 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
   background: var(--bg);
 }
 .tabs {
-  display: flex;
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: max-content;
   gap: 0.3rem;
   overflow-x: auto;
-  flex: 0 1 auto;
 }
 .tab {
   background: var(--pane-bg);
@@ -85,9 +104,10 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
   border-radius: 3px 3px 0 0;
   font-size: 0.85em;
   cursor: pointer;
-  display: inline-flex;
-  align-items: center;
+  display: inline-grid;
+  grid-template-columns: auto auto;
   gap: 0.3rem;
+  align-items: center;
   white-space: nowrap;
 }
 .tab.active {
@@ -115,15 +135,17 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
   border-color: var(--green); color: var(--green);
 }
 .tabbar .ghost:disabled { opacity: 0.4; cursor: default; }
-.tabbar .spacer { flex: 1; }
+
+/* ─── Transcript ───────────────────────────────────────────────── */
 
 .transcript-wrap {
-  flex: 1;
   overflow: auto;
   padding: 1rem;
   background: var(--code-bg);
 }
 .transcript {
+  display: grid;
+  gap: 0.6rem;
   font-family: var(--mono);
   font-size: 0.9em;
   line-height: 1.5;
@@ -131,17 +153,18 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
   margin: 0 auto;
 }
 .transcript .entry {
-  margin-bottom: 0.8rem;
+  display: grid;
+  gap: 0.25rem;
   padding: 0.4rem 0.6rem;
   border-left: 2px solid var(--rule);
 }
 .transcript .entry .prompt-line {
   color: var(--green);
   white-space: pre-wrap;
-  margin-bottom: 0.2rem;
 }
 .transcript .entry .tier-output {
-  display: flex;
+  display: grid;
+  grid-template-columns: 7rem 1fr;
   gap: 0.6rem;
   padding: 0.25rem 0;
   border-top: 1px dashed var(--rule);
@@ -152,13 +175,10 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
   font-size: 0.7em;
   text-transform: uppercase;
   letter-spacing: 0.08em;
-  min-width: 7rem;
-  flex-shrink: 0;
   padding-top: 0.15rem;
 }
 .transcript .entry .tier-result {
   white-space: pre-wrap;
-  flex: 1;
 }
 .transcript .entry .tier-time {
   color: var(--muted);
@@ -167,10 +187,13 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
 }
 .transcript .entry.error .tier-result { color: var(--err); }
 
+/* ─── Prompt bar ───────────────────────────────────────────────── */
+
 .prompt-bar {
-  display: flex;
-  align-items: flex-end;
+  display: grid;
+  grid-template-columns: auto 1fr auto auto;
   gap: 0.5rem;
+  align-items: end;
   padding: 0.5rem 1rem 0.8rem;
   border-top: 1px solid var(--rule);
   background: var(--bg);
@@ -181,7 +204,6 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
   padding: 0.4rem 0 0;
 }
 .prompt-bar textarea {
-  flex: 1;
   resize: none;
   background: var(--code-bg);
   border: 1px solid var(--rule);
@@ -192,6 +214,7 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
   border-radius: 3px;
   min-height: 1.6em;
   max-height: 30vh;
+  min-width: 0;
 }
 .prompt-bar textarea:focus { outline: none; border-color: var(--green); }
 .prompt-bar select {
diff --git a/www/playground/index.html b/www/playground/index.html
index b664386..dda1230 100644
--- a/www/playground/index.html
+++ b/www/playground/index.html
@@ -59,22 +59,21 @@
   <span id="status" class="status"></span>
 </section>
 
-<section class="bend-bar">
-  <span class="bend-icon" title="gpu-worker bend URL">⚡</span>
-  <label>bend URL
+<section class="config-bar">
+  <div class="bend-bar">
+    <span class="bend-icon" title="gpu-worker bend URL">⚡</span>
     <input id="bend-url" type="url" placeholder="https://your-gpu-worker.example/bend  (sets (bend!-call ...) destination)">
-  </label>
-  <button id="bend-save" class="secondary">save</button>
-  <span id="bend-state" class="bend-state"></span>
-</section>
-
-<section class="vault-bar" id="vault-bar" hidden>
-  <span class="vault-icon" title="local vault">🔒</span>
-  <span id="vault-state" class="vault-state">locked</span>
-  <input id="vault-pw" type="password" autocomplete="off" placeholder="password to unlock free-form vault">
-  <button id="vault-unlock" class="secondary">unlock</button>
-  <button id="vault-lock" class="secondary" hidden>lock</button>
-  <span id="vault-note" class="vault-note"></span>
+    <button id="bend-save" class="secondary">save</button>
+    <span id="bend-state" class="bend-state"></span>
+  </div>
+  <div class="vault-bar" id="vault-bar" hidden>
+    <span class="vault-icon" title="local vault">🔒</span>
+    <span id="vault-state" class="vault-state">locked</span>
+    <input id="vault-pw" type="password" autocomplete="off" placeholder="vault password">
+    <button id="vault-unlock" class="secondary">unlock</button>
+    <button id="vault-lock" class="secondary" hidden>lock</button>
+    <span id="vault-note" class="vault-note"></span>
+  </div>
 </section>
 
 <section class="panes">
diff --git a/www/playground/style.css b/www/playground/style.css
index 1e69047..bd3af40 100644
--- a/www/playground/style.css
+++ b/www/playground/style.css
@@ -1,6 +1,5 @@
-/* lumbda playground — styled to match lumbda.com homepage.
- * palette + typography mirror www/style.css.
- */
+/* lumbda playground — grid-only layout, matches lumbda.com homepage palette.
+ * No flexbox. Every multi-child layout uses CSS Grid. */
 
 @font-face {
   font-family: 'chunkfive';
@@ -15,7 +14,7 @@
   --fg: #1a1a1a;
   --bg: #fafaf7;
   --muted: #666;
-  --accent: #227842;            /* single brand green — matches homepage */
+  --accent: #227842;
   --green: #227842;
   --rule: #d4d4d0;
   --code-bg: #f0ede4;
@@ -30,7 +29,7 @@
     --fg: #e8e6e0;
     --bg: #161613;
     --muted: #9a9892;
-    --accent: #5ec07a;          /* lightened for contrast on dark bg */
+    --accent: #5ec07a;
     --green: #5ec07a;
     --rule: #3a3a36;
     --code-bg: #22221f;
@@ -42,9 +41,13 @@
 
 * { box-sizing: border-box; }
 
+/* The hidden attribute must beat author display rules.
+ * Without !important, .lock-screen { display: grid } overrides
+ * [hidden]'s UA default of display: none. */
+[hidden] { display: none !important; }
+
 html {
-  /* Default zoom so text is comfortably readable. Native CSS zoom
-   * preserves layout proportions across the whole document. */
+  /* Comfortable default zoom. */
   zoom: 1.33;
 }
 
@@ -65,8 +68,9 @@ header {
 }
 
 .brand {
-  display: inline-flex;
-  align-items: flex-end;
+  display: inline-grid;
+  grid-template-columns: auto auto;
+  align-items: end;
   gap: 0.6rem;
   text-decoration: none;
   color: inherit;
@@ -124,10 +128,10 @@ header code {
 .controls {
   padding: 0.75rem 1.5rem;
   border-bottom: 1px solid var(--rule);
-  display: flex;
+  display: grid;
+  grid-template-columns: auto auto auto auto 1fr;
   gap: 1rem;
   align-items: center;
-  flex-wrap: wrap;
   background: var(--bg);
 }
 
@@ -189,30 +193,33 @@ header code {
 .controls .status {
   color: var(--muted);
   font-size: 0.8em;
-  margin-left: auto;
+  justify-self: end;
 }
 .controls .status.busy { color: var(--busy); }
 .controls .status.warn { color: var(--busy); }
 .controls .status.err  { color: var(--err); }
 .controls .status.ok   { color: var(--green); }
 
-.bend-bar {
+/* ─── Config bar: bend + vault side by side ────────────────────── */
+
+.config-bar {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.6rem;
   padding: 0.4rem 1.5rem;
   border-bottom: 1px solid var(--rule);
-  display: flex; align-items: center; gap: 0.6rem;
   background: var(--bg);
   font-size: 0.85em;
 }
-.bend-bar .bend-icon { font-size: 1em; }
-.bend-bar label {
-  flex: 1;
-  display: flex;
-  align-items: center;
+
+.bend-bar {
+  display: grid;
+  grid-template-columns: auto 1fr auto auto;
   gap: 0.5rem;
-  color: var(--muted);
+  align-items: center;
 }
+.bend-bar .bend-icon { font-size: 1em; }
 .bend-bar input[type=url] {
-  flex: 1;
   background: var(--code-bg);
   border: 1px solid var(--rule);
   color: var(--fg);
@@ -220,6 +227,7 @@ header code {
   font-family: var(--mono);
   font-size: 0.9em;
   border-radius: 3px;
+  min-width: 0;
 }
 .bend-bar input[type=url]:focus { outline: none; border-color: var(--green); }
 .bend-bar button {
@@ -237,11 +245,10 @@ header code {
 .bend-bar .bend-state { color: var(--green); font-size: 0.8em; min-width: 4em; }
 
 .vault-bar {
-  padding: 0.5rem 1.5rem;
-  border-bottom: 1px solid var(--rule);
-  display: flex; align-items: center; gap: 0.6rem;
-  background: var(--bg);
-  font-size: 0.85em;
+  display: grid;
+  grid-template-columns: auto auto auto auto auto 1fr;
+  gap: 0.5rem;
+  align-items: center;
 }
 .vault-bar .vault-icon { font-size: 1em; }
 .vault-bar .vault-state { color: var(--muted); }
@@ -254,7 +261,7 @@ header code {
   font-family: var(--mono);
   font-size: 0.9em;
   border-radius: 3px;
-  width: 18rem;
+  min-width: 0;
 }
 .vault-bar input[type=password]:focus { outline: none; border-color: var(--green); }
 .vault-bar button {
@@ -284,11 +291,12 @@ header code {
 .pane {
   background: var(--pane-bg);
   padding: 0.5rem 0.75rem 0.75rem;
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-rows: auto 1fr;
+  gap: 0.4rem;
 }
 .pane h2 {
-  margin: 0 0 0.4rem;
+  margin: 0;
   font-size: 0.7rem;
   font-weight: 500;
   color: var(--muted);
@@ -311,7 +319,6 @@ header code {
   font-size: 13px;
   line-height: 1.35;
 }
-/* Append-only: results arrive in finish order — fastest tier shows up first. */
 #output .tier-block { margin-bottom: 1rem; }
 #output .tier-block:last-child { margin-bottom: 0; }
 #output .tier-block h3 {
@@ -334,9 +341,7 @@ header code {
   white-space: pre;
   font-family: var(--mono);
 }
-#output .err {
-  color: var(--err);
-}
+#output .err { color: var(--err); }
 
 /* ─── Footer ────────────────────────────────────────────────────── */
 
diff --git a/www/repl/repl.css b/www/repl/repl.css
index 9b1534c..19dc1f5 100644
--- a/www/repl/repl.css
+++ b/www/repl/repl.css
@@ -1,10 +1,17 @@
-/* lumbda repl specific styles — inherits style.css palette. */
+/* lumbda repl — grid-only layout. Inherits palette + base from style.css. */
 
-body.repl { display: flex; flex-direction: column; min-height: 100vh; }
+body.repl {
+  display: grid;
+  grid-template-rows: auto auto 1fr auto auto;
+  min-height: 100vh;
+}
+
+/* ─── Lock screen overlay ──────────────────────────────────────── */
 
 .lock-screen {
   position: fixed; inset: 0; z-index: 1000;
-  display: flex; align-items: center; justify-content: center;
+  display: grid;
+  place-items: center;
   background: rgba(15, 17, 21, 0.85);
   backdrop-filter: blur(4px);
 }
@@ -15,16 +22,18 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
   padding: 1.5rem 2rem;
   max-width: 28rem;
   width: 90%;
+  display: grid;
+  gap: 0.4rem;
 }
 .lock-card h2 {
-  margin: 0 0 0.5rem;
+  margin: 0 0 0.1rem;
   font-family: 'chunkfive', Georgia, serif;
   font-size: 1.4rem;
   color: var(--green);
   font-weight: normal;
 }
 .lock-card p {
-  margin: 0 0 0.8rem;
+  margin: 0;
   font-size: 0.85rem;
   color: var(--muted);
   line-height: 1.5;
@@ -32,7 +41,7 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
 .lock-card input[type=password] {
   width: 100%;
   padding: 0.5rem 0.7rem;
-  margin: 0.4rem 0;
+  margin: 0.4rem 0 0;
   background: var(--code-bg);
   color: var(--fg);
   border: 1px solid var(--rule);
@@ -44,7 +53,13 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
   outline: none;
   border-color: var(--green);
 }
-.lock-row { display: flex; gap: 0.6rem; margin-top: 0.5rem; }
+.lock-row {
+  display: grid;
+  grid-template-columns: auto auto;
+  gap: 0.6rem;
+  margin-top: 0.5rem;
+  justify-content: start;
+}
 .lock-row button {
   font-family: var(--mono);
   font-size: 0.85em; font-weight: 600;
@@ -58,14 +73,17 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
 .lock-row .primary:hover { filter: brightness(1.1); }
 .lock-row .secondary:hover { background: var(--code-bg); }
 .lock-note {
-  margin: 0.6rem 0 0;
+  margin: 0.4rem 0 0;
   color: var(--err);
   font-size: 0.8rem;
   min-height: 1.2em;
 }
 
+/* ─── Tab bar ──────────────────────────────────────────────────── */
+
 .tabbar {
-  display: flex;
+  display: grid;
+  grid-template-columns: auto auto 1fr auto auto auto auto;
   gap: 0.3rem;
   align-items: center;
   padding: 0.4rem 1rem;
@@ -73,10 +91,11 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
   background: var(--bg);
 }
 .tabs {
-  display: flex;
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: max-content;
   gap: 0.3rem;
   overflow-x: auto;
-  flex: 0 1 auto;
 }
 .tab {
   background: var(--pane-bg);
@@ -85,9 +104,10 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
   border-radius: 3px 3px 0 0;
   font-size: 0.85em;
   cursor: pointer;
-  display: inline-flex;
-  align-items: center;
+  display: inline-grid;
+  grid-template-columns: auto auto;
   gap: 0.3rem;
+  align-items: center;
   white-space: nowrap;
 }
 .tab.active {
@@ -115,15 +135,17 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
   border-color: var(--green); color: var(--green);
 }
 .tabbar .ghost:disabled { opacity: 0.4; cursor: default; }
-.tabbar .spacer { flex: 1; }
+
+/* ─── Transcript ───────────────────────────────────────────────── */
 
 .transcript-wrap {
-  flex: 1;
   overflow: auto;
   padding: 1rem;
   background: var(--code-bg);
 }
 .transcript {
+  display: grid;
+  gap: 0.6rem;
   font-family: var(--mono);
   font-size: 0.9em;
   line-height: 1.5;
@@ -131,17 +153,18 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
   margin: 0 auto;
 }
 .transcript .entry {
-  margin-bottom: 0.8rem;
+  display: grid;
+  gap: 0.25rem;
   padding: 0.4rem 0.6rem;
   border-left: 2px solid var(--rule);
 }
 .transcript .entry .prompt-line {
   color: var(--green);
   white-space: pre-wrap;
-  margin-bottom: 0.2rem;
 }
 .transcript .entry .tier-output {
-  display: flex;
+  display: grid;
+  grid-template-columns: 7rem 1fr;
   gap: 0.6rem;
   padding: 0.25rem 0;
   border-top: 1px dashed var(--rule);
@@ -152,13 +175,10 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
   font-size: 0.7em;
   text-transform: uppercase;
   letter-spacing: 0.08em;
-  min-width: 7rem;
-  flex-shrink: 0;
   padding-top: 0.15rem;
 }
 .transcript .entry .tier-result {
   white-space: pre-wrap;
-  flex: 1;
 }
 .transcript .entry .tier-time {
   color: var(--muted);
@@ -167,10 +187,13 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
 }
 .transcript .entry.error .tier-result { color: var(--err); }
 
+/* ─── Prompt bar ───────────────────────────────────────────────── */
+
 .prompt-bar {
-  display: flex;
-  align-items: flex-end;
+  display: grid;
+  grid-template-columns: auto 1fr auto auto;
   gap: 0.5rem;
+  align-items: end;
   padding: 0.5rem 1rem 0.8rem;
   border-top: 1px solid var(--rule);
   background: var(--bg);
@@ -181,7 +204,6 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
   padding: 0.4rem 0 0;
 }
 .prompt-bar textarea {
-  flex: 1;
   resize: none;
   background: var(--code-bg);
   border: 1px solid var(--rule);
@@ -192,6 +214,7 @@ body.repl { display: flex; flex-direction: column; min-height: 100vh; }
   border-radius: 3px;
   min-height: 1.6em;
   max-height: 30vh;
+  min-width: 0;
 }
 .prompt-bar textarea:focus { outline: none; border-color: var(--green); }
 .prompt-bar select {
diff --git a/www/repl/style.css b/www/repl/style.css
index 1e69047..bd3af40 100644
--- a/www/repl/style.css
+++ b/www/repl/style.css
@@ -1,6 +1,5 @@
-/* lumbda playground — styled to match lumbda.com homepage.
- * palette + typography mirror www/style.css.
- */
+/* lumbda playground — grid-only layout, matches lumbda.com homepage palette.
+ * No flexbox. Every multi-child layout uses CSS Grid. */
 
 @font-face {
   font-family: 'chunkfive';
@@ -15,7 +14,7 @@
   --fg: #1a1a1a;
   --bg: #fafaf7;
   --muted: #666;
-  --accent: #227842;            /* single brand green — matches homepage */
+  --accent: #227842;
   --green: #227842;
   --rule: #d4d4d0;
   --code-bg: #f0ede4;
@@ -30,7 +29,7 @@
     --fg: #e8e6e0;
     --bg: #161613;
     --muted: #9a9892;
-    --accent: #5ec07a;          /* lightened for contrast on dark bg */
+    --accent: #5ec07a;
     --green: #5ec07a;
     --rule: #3a3a36;
     --code-bg: #22221f;
@@ -42,9 +41,13 @@
 
 * { box-sizing: border-box; }
 
+/* The hidden attribute must beat author display rules.
+ * Without !important, .lock-screen { display: grid } overrides
+ * [hidden]'s UA default of display: none. */
+[hidden] { display: none !important; }
+
 html {
-  /* Default zoom so text is comfortably readable. Native CSS zoom
-   * preserves layout proportions across the whole document. */
+  /* Comfortable default zoom. */
   zoom: 1.33;
 }
 
@@ -65,8 +68,9 @@ header {
 }
 
 .brand {
-  display: inline-flex;
-  align-items: flex-end;
+  display: inline-grid;
+  grid-template-columns: auto auto;
+  align-items: end;
   gap: 0.6rem;
   text-decoration: none;
   color: inherit;
@@ -124,10 +128,10 @@ header code {
 .controls {
   padding: 0.75rem 1.5rem;
   border-bottom: 1px solid var(--rule);
-  display: flex;
+  display: grid;
+  grid-template-columns: auto auto auto auto 1fr;
   gap: 1rem;
   align-items: center;
-  flex-wrap: wrap;
   background: var(--bg);
 }
 
@@ -189,30 +193,33 @@ header code {
 .controls .status {
   color: var(--muted);
   font-size: 0.8em;
-  margin-left: auto;
+  justify-self: end;
 }
 .controls .status.busy { color: var(--busy); }
 .controls .status.warn { color: var(--busy); }
 .controls .status.err  { color: var(--err); }
 .controls .status.ok   { color: var(--green); }
 
-.bend-bar {
+/* ─── Config bar: bend + vault side by side ────────────────────── */
+
+.config-bar {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.6rem;
   padding: 0.4rem 1.5rem;
   border-bottom: 1px solid var(--rule);
-  display: flex; align-items: center; gap: 0.6rem;
   background: var(--bg);
   font-size: 0.85em;
 }
-.bend-bar .bend-icon { font-size: 1em; }
-.bend-bar label {
-  flex: 1;
-  display: flex;
-  align-items: center;
+
+.bend-bar {
+  display: grid;
+  grid-template-columns: auto 1fr auto auto;
   gap: 0.5rem;
-  color: var(--muted);
+  align-items: center;
 }
+.bend-bar .bend-icon { font-size: 1em; }
 .bend-bar input[type=url] {
-  flex: 1;
   background: var(--code-bg);
   border: 1px solid var(--rule);
   color: var(--fg);
@@ -220,6 +227,7 @@ header code {
   font-family: var(--mono);
   font-size: 0.9em;
   border-radius: 3px;
+  min-width: 0;
 }
 .bend-bar input[type=url]:focus { outline: none; border-color: var(--green); }
 .bend-bar button {
@@ -237,11 +245,10 @@ header code {
 .bend-bar .bend-state { color: var(--green); font-size: 0.8em; min-width: 4em; }
 
 .vault-bar {
-  padding: 0.5rem 1.5rem;
-  border-bottom: 1px solid var(--rule);
-  display: flex; align-items: center; gap: 0.6rem;
-  background: var(--bg);
-  font-size: 0.85em;
+  display: grid;
+  grid-template-columns: auto auto auto auto auto 1fr;
+  gap: 0.5rem;
+  align-items: center;
 }
 .vault-bar .vault-icon { font-size: 1em; }
 .vault-bar .vault-state { color: var(--muted); }
@@ -254,7 +261,7 @@ header code {
   font-family: var(--mono);
   font-size: 0.9em;
   border-radius: 3px;
-  width: 18rem;
+  min-width: 0;
 }
 .vault-bar input[type=password]:focus { outline: none; border-color: var(--green); }
 .vault-bar button {
@@ -284,11 +291,12 @@ header code {
 .pane {
   background: var(--pane-bg);
   padding: 0.5rem 0.75rem 0.75rem;
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-rows: auto 1fr;
+  gap: 0.4rem;
 }
 .pane h2 {
-  margin: 0 0 0.4rem;
+  margin: 0;
   font-size: 0.7rem;
   font-weight: 500;
   color: var(--muted);
@@ -311,7 +319,6 @@ header code {
   font-size: 13px;
   line-height: 1.35;
 }
-/* Append-only: results arrive in finish order — fastest tier shows up first. */
 #output .tier-block { margin-bottom: 1rem; }
 #output .tier-block:last-child { margin-bottom: 0; }
 #output .tier-block h3 {
@@ -334,9 +341,7 @@ header code {
   white-space: pre;
   font-family: var(--mono);
 }
-#output .err {
-  color: var(--err);
-}
+#output .err { color: var(--err); }
 
 /* ─── Footer ────────────────────────────────────────────────────── */