Unify into one race card: comparison strip + single reading pane

Collapse the two output panes, verdict, progress, and input into one
cohesive component that reads top-to-bottom on mobile:

- Comparison strip shows BOTH models at once (timer + LED + live bar)
with the speedup as a center number — no need to switch to compare.
- One reading pane with a PULPIE/DRIPPER segmented toggle; COPY / DIFF
act on the visible model (diff shows the LCS line-diff inline).
- Input section folded into the same card (select + run + raw-HTML
accordion), so it's a single card, not three stacked components.
- Speedup parsed from the backend verdict and shown large; plain-text
verdicts (bad input / errors) fall back to the status line.
- Mobile: strip stacks vertically into a list and still fits one screen;
toggle stays inline above the reading pane. Palette + streaming
contract untouched.

Co-Authored-By: Claude <noreply@anthropic.com>

index.html

@@ -17,9 +17,8 @@
     --green:#2F5A3C; --err:#8A2E16; --err-bg:#FFF3EC;
     --r:14px; --r-sm:10px; --r-lg:20px;
     --sh1:0 1px 2px rgba(27,23,20,.05), 0 1px 3px rgba(27,23,20,.04);
-    --sh2:0 8px 28px -10px rgba(27,23,20,.16), 0 2px 8px -3px rgba(27,23,20,.07);
+    --sh2:0 10px 32px -12px rgba(27,23,20,.18), 0 2px 8px -3px rgba(27,23,20,.07);
     --ring:0 0 0 3px rgba(198,83,29,.22);
-    --safe-b:env(safe-area-inset-bottom,0px);
     --safe-t:env(safe-area-inset-top,0px);
     color-scheme:light;
   }
@@ -27,7 +26,7 @@
   html,body{background:var(--paper);color:var(--ink)}
   body{font-family:'Inter','Helvetica Neue',Arial,sans-serif;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-tap-highlight-color:transparent}
   .mono{font-family:'IBM Plex Mono',monospace}
-  .wrap{width:100%;max-width:1240px;margin:0 auto;padding:max(28px,var(--safe-t)) 22px 22px;flex:1}
+  .wrap{width:100%;max-width:920px;margin:0 auto;padding:max(30px,var(--safe-t)) 20px 28px;flex:1}
   ::selection{background:rgba(198,83,29,.18)}
   *{scrollbar-width:thin;scrollbar-color:var(--hairline) transparent}
   ::-webkit-scrollbar{width:9px;height:9px}
@@ -37,8 +36,8 @@
   a,button,select,textarea{touch-action:manipulation}
 
   /* ── Header ── */
-  #header-block{margin-bottom:22px}
-  .topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px}
+  #header-block{margin-bottom:20px}
+  .topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}
   #eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.18em;color:var(--orange);text-transform:uppercase;font-weight:500;line-height:1.3}
   .pill{display:inline-flex;align-items:center;gap:7px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);background:var(--raised);border:1px solid var(--hairline);padding:6px 11px;border-radius:100px;box-shadow:var(--sh1);transition:all .2s;white-space:nowrap}
   .pill .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(47,90,60,.15)}
@@ -46,18 +45,22 @@
   .pill.error{color:var(--err);border-color:var(--orange)}
   .pill.error .dot{background:var(--err);box-shadow:0 0 0 3px rgba(138,46,22,.15)}
   @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.85)}}
-  #headline h1{font-weight:700;letter-spacing:-.035em;font-size:54px;color:var(--ink);line-height:1.02;background:linear-gradient(120deg,var(--ink) 30%,var(--orange) 145%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
-  #lead{font-family:'Lora',serif;font-size:19px;color:var(--body-ink);font-style:italic;max-width:680px;line-height:1.4;margin-top:6px}
+  #headline h1{font-weight:700;letter-spacing:-.035em;font-size:50px;color:var(--ink);line-height:1.02;background:linear-gradient(120deg,var(--ink) 30%,var(--orange) 145%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
+  #lead{font-family:'Lora',serif;font-size:18px;color:var(--body-ink);font-style:italic;max-width:620px;line-height:1.4;margin-top:6px}
 
-  /* ── Run card ── */
-  .run-card{background:var(--raised);border:1px solid var(--hairline);border-radius:var(--r);padding:18px;box-shadow:var(--sh1);margin-top:22px}
+  /* ── Unified race card ── */
+  .race-card{background:var(--raised);border:1px solid var(--hairline);border-radius:var(--r-lg);box-shadow:var(--sh2);overflow:hidden;margin-top:20px}
+  .card-section{padding:18px}
+  .card-divider{height:1px;background:var(--hairline)}
+
+  /* input section */
   .input-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.16em;color:var(--soft);text-transform:uppercase;margin-bottom:11px;display:flex;align-items:center;gap:8px}
   .input-eyebrow::after{content:"";flex:1;height:1px;background:var(--hairline)}
   #input-row{display:flex;align-items:stretch;gap:12px}
-  #example-select{flex:1;height:54px;background:var(--paper);border:1px solid var(--hairline);color:var(--ink);font-family:'IBM Plex Mono',monospace;font-size:14px;padding:0 44px 0 16px;cursor:pointer;appearance:none;border-radius:var(--r-sm);transition:all .15s;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C6531D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
+  #example-select{flex:1;height:52px;background:var(--paper);border:1px solid var(--hairline);color:var(--ink);font-family:'IBM Plex Mono',monospace;font-size:13px;padding:0 42px 0 16px;cursor:pointer;appearance:none;border-radius:var(--r-sm);transition:all .15s;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C6531D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
   #example-select:hover{border-color:var(--orange);box-shadow:var(--sh1)}
   #example-select:focus-visible{outline:none;box-shadow:var(--ring);border-color:var(--orange)}
-  #run-btn{height:54px;min-width:172px;background:linear-gradient(135deg,var(--orange) 0%,#D9642A 100%);color:#FBF7F0;border:none;cursor:pointer;font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;border-radius:var(--r-sm);display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:all .18s;box-shadow:0 4px 14px -4px rgba(198,83,29,.5)}
+  #run-btn{height:52px;min-width:150px;background:linear-gradient(135deg,var(--orange) 0%,#D9642A 100%);color:#FBF7F0;border:none;cursor:pointer;font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;border-radius:var(--r-sm);display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:all .18s;box-shadow:0 4px 14px -4px rgba(198,83,29,.5)}
   #run-btn:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 7px 22px -5px rgba(198,83,29,.55)}
   #run-btn:active:not(:disabled){transform:translateY(0)}
   #run-btn:focus-visible{outline:none;box-shadow:var(--ring)}
@@ -68,9 +71,8 @@
   #run-btn.running .bolt{display:none}
   @keyframes spin{to{transform:rotate(360deg)}}
 
-  /* accordion */
   #html-accordion{margin-top:12px}
-  .acc-header{display:flex;align-items:center;gap:9px;padding:9px 2px;cursor:pointer;user-select:none}
+  .acc-header{display:flex;align-items:center;gap:9px;padding:7px 2px;cursor:pointer;user-select:none}
   .acc-header .chev{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);display:flex;align-items:center;gap:7px;transition:color .15s}
   .acc-header .chev .arw{display:inline-block;transition:transform .22s;color:var(--orange)}
   .acc-header:hover .chev{color:var(--ink)}
@@ -78,58 +80,68 @@
   .acc-body{max-height:0;overflow:hidden;transition:max-height .3s ease}
   #html-accordion.open .acc-body{max-height:300px}
   .acc-body-inner{padding-top:8px}
-  #custom-html{width:100%;min-height:130px;background:var(--paper);border:1px solid var(--hairline);color:var(--ink);padding:13px 14px;font-family:'IBM Plex Mono',monospace;font-size:12px;line-height:1.55;resize:vertical;border-radius:var(--r-sm);transition:all .15s}
+  #custom-html{width:100%;min-height:120px;background:var(--paper);border:1px solid var(--hairline);color:var(--ink);padding:13px 14px;font-family:'IBM Plex Mono',monospace;font-size:12px;line-height:1.55;resize:vertical;border-radius:var(--r-sm);transition:all .15s}
   #custom-html:focus-visible{outline:none;border-color:var(--orange);box-shadow:var(--ring)}
-  .acc-hint{font-family:'Lora',serif;font-style:italic;color:var(--soft);font-size:12.5px;margin-top:9px}
-
-  /* ── Segmented control (mobile) ── */
-  .seg{display:none;gap:4px;background:var(--sunken);border:1px solid var(--hairline);padding:4px;border-radius:100px;margin:18px 0 0}
-  .seg button{flex:1;border:none;background:transparent;color:var(--soft);font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:10px 8px;cursor:pointer;border-radius:100px;transition:all .18s;font-weight:500;display:flex;align-items:center;justify-content:center;gap:7px}
-  .seg button .led{width:7px;height:7px;border-radius:50%;opacity:.5}
-  .seg button[data-seg="pulpie"] .led{background:var(--orange)}
-  .seg button[data-seg="dripper"] .led{background:var(--pine)}
-  .seg button.active{background:var(--raised);color:var(--ink);box-shadow:var(--sh1)}
-  .seg button.active .led{opacity:1}
-
-  /* ── Panes ── */
-  .panes{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}
-  .pane{background:var(--raised);border:1px solid var(--hairline);border-radius:var(--r);box-shadow:var(--sh1);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .25s,border-color .25s}
-  .pane.live{box-shadow:var(--sh2)}
-  .pane-head{padding:14px 18px 13px;border-bottom:1px solid var(--hairline);display:flex;justify-content:space-between;align-items:center;gap:10px;background:linear-gradient(180deg,var(--raised),rgba(236,229,215,.35))}
-  .pane-head .name{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;color:var(--soft);text-transform:uppercase;display:flex;align-items:center;gap:8px;min-width:0}
-  .pane-head .name b{color:var(--ink);font-weight:600;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-  .pane.pulpie-pane .name .led{background:var(--orange)}
-  .pane.dripper-pane .name .led{background:var(--pine)}
-  .led{width:8px;height:8px;border-radius:50%;flex:none;opacity:.45;transition:opacity .25s}
-  .pane.live .led{opacity:1;box-shadow:0 0 0 4px rgba(198,83,29,.12)}
-  .pane.dripper-pane.live .led{box-shadow:0 0 0 4px rgba(47,90,60,.12)}
-  .timer{font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.02em;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
+  .acc-hint{font-family:'Lora',serif;font-style:italic;color:var(--soft);font-size:12px;margin-top:8px}
+
+  /* comparison strip */
+  .cmp-strip{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:stretch;padding:16px 18px;background:linear-gradient(180deg,var(--raised),rgba(236,229,215,.4))}
+  .chip{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-sm);padding:11px 13px;display:flex;flex-direction:column;gap:8px;transition:all .25s;min-width:0}
+  .chip.live{border-color:var(--orange);box-shadow:0 0 0 3px rgba(198,83,29,.09)}
+  .chip.dripper.live{border-color:var(--pine);box-shadow:0 0 0 3px rgba(47,90,60,.09)}
+  .chip-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
+  .chip-name{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--soft);display:flex;align-items:center;gap:7px;min-width:0}
+  .chip-name b{color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+  .chip .led{width:8px;height:8px;border-radius:50%;flex:none;opacity:.4;transition:opacity .25s}
+  .chip.pulpie .led{background:var(--orange)}
+  .chip.dripper .led{background:var(--pine)}
+  .chip.live .led{opacity:1;box-shadow:0 0 0 4px rgba(198,83,29,.12)}
+  .chip.dripper.live .led{box-shadow:0 0 0 4px rgba(47,90,60,.12)}
+  .timer{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.02em;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
   .timer .running{color:var(--green);font-weight:500}
-  .pane.pulpie-pane .timer{color:var(--orange)}
-  .bar{height:3px;background:var(--sunken);position:relative;overflow:hidden}
-  .bar .fill{position:absolute;inset:0 100% 0 0;background:linear-gradient(90deg,var(--orange),var(--orange-hover));transition:right .35s cubic-bezier(.4,0,.2,1)}
-  .pane.dripper-pane .bar .fill{background:linear-gradient(90deg,var(--pine),#4A7E55)}
+  .chip.pulpie .timer{color:var(--orange)}
+  .bar{height:4px;background:var(--sunken);border-radius:4px;position:relative;overflow:hidden}
+  .bar .fill{position:absolute;inset:0 100% 0 0;background:linear-gradient(90deg,var(--orange),var(--orange-hover));border-radius:4px;transition:right .35s cubic-bezier(.4,0,.2,1)}
+  .chip.dripper .bar .fill{background:linear-gradient(90deg,var(--pine),#4A7E55)}
   .bar .fill.indeterminate{animation:indet 1.3s ease-in-out infinite}
   @keyframes indet{0%{left:-30%;right:100%}50%{right:40%}100%{left:100%;right:-30%}}
-  .result-pane{flex:1;min-height:300px;max-height:560px;overflow-y:auto;padding:18px 20px;position:relative;-webkit-overflow-scrolling:touch}
-  .result-pane .placeholder{color:var(--soft);font-style:italic;font-family:'Lora',serif;font-size:14.5px;line-height:1.5;display:flex;align-items:center;justify-content:center;min-height:240px;text-align:center;opacity:.85;padding:0 6px}
-  .skeleton{display:none}
-  .pane.working .result-pane .placeholder{display:none}
-  .pane.working .result-pane .skeleton{display:block}
-  .sk-line{height:10px;background:linear-gradient(90deg,var(--sunken),var(--hairline),var(--sunken));background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:6px;margin:14px 0}
-  .sk-line:nth-child(1){width:55%}.sk-line:nth-child(2){width:88%}.sk-line:nth-child(3){width:72%}.sk-line:nth-child(4){width:90%}.sk-line:nth-child(5){width:40%}
-  .sk-line:nth-child(2){animation-delay:.1s}.sk-line:nth-child(3){animation-delay:.2s}.sk-line:nth-child(4){animation-delay:.3s}.sk-line:nth-child(5){animation-delay:.4s}
-  @keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
-  .pane-actions{display:flex;gap:8px;padding:11px 18px;border-top:1px solid var(--hairline);background:rgba(236,229,215,.3);flex-wrap:wrap}
+
+  .cmp-center{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 4px;min-width:92px}
+  .sp-num{font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:32px;line-height:1;letter-spacing:-.03em;color:var(--orange);transition:all .3s}
+  .sp-lbl{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);margin-top:7px;line-height:1.3}
+  .cmp-center.idle .sp-num{color:var(--hairline);font-size:22px}
+  .cmp-center.idle .sp-lbl{opacity:0}
+
+  /* toolbar (toggle + actions) */
+  .read-toolbar{display:flex;align-items:center;gap:10px;padding:11px 18px;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);flex-wrap:wrap;background:rgba(236,229,215,.32)}
+  .toggle-seg{display:flex;gap:3px;background:var(--sunken);border:1px solid var(--hairline);padding:3px;border-radius:100px}
+  .toggle-seg button{border:none;background:transparent;color:var(--soft);font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:8px 14px;cursor:pointer;border-radius:100px;transition:all .18s;font-weight:500;display:flex;align-items:center;gap:7px}
+  .toggle-seg button .led{width:7px;height:7px;border-radius:50%;opacity:.5}
+  .toggle-seg button[data-model="pulpie"] .led{background:var(--orange)}
+  .toggle-seg button[data-model="dripper"] .led{background:var(--pine)}
+  .toggle-seg button.active{background:var(--raised);color:var(--ink);box-shadow:var(--sh1)}
+  .toggle-seg button.active .led{opacity:1}
+  .toolbar-spacer{flex:1}
   .mini-btn{background:var(--paper);color:var(--ink);border:1px solid var(--hairline);font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;padding:8px 12px;cursor:pointer;transition:all .15s;text-transform:uppercase;border-radius:7px;display:inline-flex;align-items:center;gap:6px;min-height:34px}
   .mini-btn:hover{color:var(--orange);border-color:var(--orange);background:var(--raised)}
   .mini-btn:focus-visible{outline:none;box-shadow:var(--ring)}
   .mini-btn:disabled{opacity:.4;cursor:not-allowed}
-  .mini-btn.active{color:var(--orange);border-color:var(--orange);background:var(--sunken)}
+
+  /* single reading pane */
+  .read-pane{min-height:280px;max-height:560px;overflow-y:auto;padding:18px 20px;-webkit-overflow-scrolling:touch}
+  .read-pane .placeholder{color:var(--soft);font-style:italic;font-family:'Lora',serif;font-size:14.5px;line-height:1.5;display:flex;align-items:center;justify-content:center;min-height:220px;text-align:center;opacity:.85;padding:0 6px}
+  .sk-line{height:10px;background:linear-gradient(90deg,var(--sunken),var(--hairline),var(--sunken));background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:6px;margin:14px 0}
+  .sk-line:nth-child(1){width:55%}.sk-line:nth-child(2){width:88%}.sk-line:nth-child(3){width:72%}.sk-line:nth-child(4){width:90%}.sk-line:nth-child(5){width:40%}
+  .sk-line:nth-child(2){animation-delay:.1s}.sk-line:nth-child(3){animation-delay:.2s}.sk-line:nth-child(4){animation-delay:.3s}.sk-line:nth-child(5){animation-delay:.4s}
+  @keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
+
+  /* status line (errors / bad input) */
+  #status-line{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--err);padding:0 20px 14px;display:none}
+  #status-line.show{display:block}
 
   /* markdown */
   .md h1,.md h2,.md h3,.md h4,.md h5,.md h6{color:var(--ink);font-weight:700;letter-spacing:-.02em;margin:16px 0 7px;line-height:1.22}
-  .md h1{font-size:26px}.md h2{font-size:21px}.md h3{font-size:18px}.md h4{font-size:15.5px}
+  .md h1{font-size:25px}.md h2{font-size:20px}.md h3{font-size:18px}.md h4{font-size:15.5px}
   .md h1:first-child,.md h2:first-child{margin-top:0}
   .md p{font-family:'Lora',serif;color:var(--body-ink);margin:9px 0;line-height:1.62;font-size:15px}
   .md ul,.md ol{margin:9px 0 9px 22px;font-family:'Lora',serif;color:var(--body-ink);font-size:15px}
@@ -146,33 +158,17 @@
   .md th{background:var(--sunken)}
   .md hr{border:none;border-top:1px solid var(--hairline);margin:15px 0}
 
-  /* verdict */
-  #verdict{margin-top:18px}
-  .verdict-hero{background:var(--ink);color:var(--paper);border-radius:var(--r);padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;box-shadow:var(--sh2);overflow:hidden;position:relative}
-  .verdict-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 120px at 100% 0%,rgba(198,83,29,.22),transparent 60%);pointer-events:none}
-  .verdict-hero>*{position:relative}
-  .verdict-hero .v-left{font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.04em;opacity:.85;line-height:1.7}
-  .verdict-hero .v-left b{color:var(--orange-hover);font-weight:600}
-  .verdict-hero .v-speed{font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:48px;line-height:1;letter-spacing:-.03em;color:var(--orange-hover);text-shadow:0 0 40px rgba(224,130,58,.4);white-space:nowrap}
-  .verdict-hero .v-speed small{font-size:18px;opacity:.7;margin-left:2px}
-  .verdict-queued{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.08em;color:var(--soft);text-transform:uppercase;padding:12px 0;display:flex;align-items:center;gap:8px}
-  .verdict-queued .dot{width:8px;height:8px;border-radius:50%;background:var(--orange);animation:pulse 1.1s infinite}
-  .verdict-bar{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.05em;padding:13px 0;border-top:1px solid var(--hairline);color:var(--ink)}
-  .verdict-bar .speed{color:var(--orange);font-weight:600}
-
-  .progress-track{height:3px;background:var(--sunken);margin-top:6px;border-radius:3px;overflow:hidden}
-  .progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--orange),var(--orange-hover));transition:width .35s cubic-bezier(.4,0,.2,1)}
-
+  /* flash */
   .flash{background:var(--err-bg);color:var(--err);border:1px solid var(--orange);padding:12px 16px;font-family:'IBM Plex Mono',monospace;font-size:12.5px;margin-top:14px;border-radius:var(--r-sm);display:none;align-items:center;gap:10px}
   .flash.show{display:flex}
   .flash .x{margin-left:auto;cursor:pointer;opacity:.6;padding:2px 6px}
   .flash .x:hover{opacity:1}
 
   /* ── Bench ── */
-  #bench-well{background:var(--raised);border:1px solid var(--hairline);border-radius:var(--r);padding:22px 22px;margin-top:22px;box-shadow:var(--sh1)}
-  #bench-well .label{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;color:var(--soft);margin-bottom:16px;text-transform:uppercase;display:flex;align-items:center;gap:8px}
+  #bench-well{background:var(--raised);border:1px solid var(--hairline);border-radius:var(--r);padding:20px;margin-top:18px;box-shadow:var(--sh1)}
+  #bench-well .label{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;color:var(--soft);margin-bottom:14px;text-transform:uppercase;display:flex;align-items:center;gap:8px}
   #bench-well .label::after{content:"";flex:1;height:1px;background:var(--hairline)}
-  .bench-row{display:grid;grid-template-columns:170px 1fr 92px;align-items:center;gap:14px;padding:9px 0}
+  .bench-row{display:grid;grid-template-columns:170px 1fr 80px;align-items:center;gap:14px;padding:8px 0}
   .bench-row .who{font-family:'Inter',sans-serif;font-size:13.5px;color:var(--ink);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
   .bench-row .who .params{color:var(--soft);font-family:'IBM Plex Mono',monospace;font-size:11px;margin-left:6px;font-weight:400}
   .bench-track{height:10px;background:var(--sunken);border-radius:6px;overflow:hidden}
@@ -181,49 +177,43 @@
   .bench-row.dim .bench-fill{opacity:.5}
   .bench-row .score{font-family:'IBM Plex Mono',monospace;font-size:13px;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
   .bench-row.win .score{color:var(--orange);font-weight:600}
-  #bench-well .note{font-family:'Lora',serif;font-style:italic;color:var(--body-ink);margin-top:14px;font-size:14px;line-height:1.5}
+  #bench-well .note{font-family:'Lora',serif;font-style:italic;color:var(--body-ink);margin-top:12px;font-size:13.5px;line-height:1.5}
 
   /* footer */
-  #footer-mono{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.06em;color:var(--soft);border-top:1px solid var(--hairline);padding-top:18px;margin-top:28px;padding-bottom:12px;display:flex;flex-wrap:wrap;gap:3px 0;align-items:center}
+  #footer-mono{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.06em;color:var(--soft);border-top:1px solid var(--hairline);padding-top:16px;margin-top:24px;padding-bottom:8px;display:flex;flex-wrap:wrap;gap:3px 0;align-items:center}
   #footer-mono a{color:var(--ink);text-decoration:none;padding:3px;transition:color .15s}
   #footer-mono a:hover{color:var(--orange)}
   #footer-mono .sep{opacity:.4;margin:0 5px}
 
-  /* ── Mobile layout ── */
-  @media (max-width:860px){
-    .wrap{padding:max(20px,var(--safe-t)) 16px calc(88px + var(--safe-b))}
-    #headline h1{font-size:40px}
-    #lead{font-size:17px}
-    .run-card{padding:16px}
+  /* ── Mobile ── */
+  @media (max-width:600px){
+    .wrap{padding:max(20px,var(--safe-t)) 14px 22px}
+    #headline h1{font-size:38px}
+    #lead{font-size:16px}
+    .race-card{border-radius:var(--r)}
+    .card-section{padding:15px}
     #input-row{flex-direction:column}
     #example-select,#run-btn{flex:1;width:100%;min-width:0}
-    /* segmented control: switch panes instead of stacking both */
-    .seg{display:flex}
-    .panes{grid-template-columns:1fr;margin-top:12px}
-    .pane{display:none}
-    .pane.mobile-active{display:flex}
-    .verdict-hero{flex-direction:row;flex-wrap:wrap;padding:18px 20px;gap:8px 16px}
-    .verdict-hero .v-speed{font-size:38px}
-    .bench-row{grid-template-columns:1fr 64px;gap:6px 12px}
+    /* comparison strip stacks: pulpie / speedup / dripper */
+    .cmp-strip{grid-template-columns:1fr;gap:10px;padding:14px}
+    .cmp-center{flex-direction:row;gap:12px;min-width:0;padding:2px 0;justify-content:flex-start}
+    .cmp-center .sp-num{font-size:24px}
+    .cmp-center .sp-lbl{margin-top:0}
+    .chip{flex-direction:row;align-items:center;gap:14px;flex-wrap:wrap}
+    .chip-top{flex:1;min-width:120px}
+    .chip .bar{flex:1;min-width:80px}
+    .read-toolbar{padding:10px 14px}
+    .read-pane{padding:16px 16px;min-height:240px}
+    .bench-row{grid-template-columns:1fr 60px;gap:6px 12px}
     .bench-row .who{grid-column:1/3}
     .bench-row .bench-track{grid-column:1}
     .bench-row .score{grid-column:2}
   }
-  @media (max-width:480px){
+  @media (max-width:420px){
     #eyebrow{font-size:9.5px}
     .pill{font-size:9px;padding:5px 9px}
-    #headline h1{font-size:34px}
-    .run-card{padding:14px;border-radius:var(--r-sm)}
-    .verdict-hero .v-speed{font-size:32px}
-  }
-
-  /* sticky mobile run bar (keeps EXTRACT reachable; pointer:coarse = touch devices) */
-  .runbar{display:none}
-  @media (hover:none) and (pointer:coarse){
-    .runbar{position:fixed;left:0;right:0;bottom:0;background:rgba(251,247,240,.92);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-top:1px solid var(--hairline);padding:10px 16px calc(10px + var(--safe-b));z-index:50;display:flex;gap:10px;align-items:center}
-    .runbar #run-btn{flex:1;min-width:0}
-    .runbar .sel-mini{display:none}
-    .wrap #run-btn{display:none}
+    #headline h1{font-size:32px}
+    .sp-num{font-size:22px}
   }
 
   @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@@ -241,81 +231,83 @@
     <div id="lead">Extract main content from HTML. One forward pass, not one token at a time.</div>
   </div>
 
-  <!-- Run card -->
-  <div class="run-card">
-    <div class="input-eyebrow">EXAMPLE PAGE</div>
-    <div id="input-row">
-      <select id="example-select" aria-label="Example page">
-        <option value="paulgraham.com">paulgraham.com</option>
-        <option value="nodejs.dev">nodejs.dev</option>
-        <option value="protobuf.dev">protobuf.dev</option>
-        <option value="istio.io">istio.io</option>
-        <option value="tutorialspoint.com">tutorialspoint.com</option>
-        <option value="builtin.com">builtin.com</option>
-        <option value="bbc.com">bbc.com</option>
-        <option value="theguardian.com">theguardian.com</option>
-        <option value="wikipedia.org">wikipedia.org</option>
-        <option value="stackoverflow.com">stackoverflow.com</option>
-      </select>
-      <button id="run-btn">
-        <svg class="bolt" viewBox="0 0 24 24" fill="currentColor"><path d="M13 2L4.5 13.5H11l-1 8.5L19.5 10H13z"/></svg>
-        <span class="spinner"></span>
-        <span class="btn-label">EXTRACT →</span>
-      </button>
-    </div>
-    <div id="html-accordion">
-      <div class="acc-header" id="acc-toggle" role="button" tabindex="0" aria-expanded="false">
-        <span class="chev"><span class="arw">▸</span>OR PASTE RAW HTML</span>
+  <!-- Unified race card -->
+  <div class="race-card">
+    <!-- input -->
+    <div class="card-section">
+      <div class="input-eyebrow">EXAMPLE PAGE</div>
+      <div id="input-row">
+        <select id="example-select" aria-label="Example page">
+          <option value="paulgraham.com">paulgraham.com</option>
+          <option value="nodejs.dev">nodejs.dev</option>
+          <option value="protobuf.dev">protobuf.dev</option>
+          <option value="istio.io">istio.io</option>
+          <option value="tutorialspoint.com">tutorialspoint.com</option>
+          <option value="builtin.com">builtin.com</option>
+          <option value="bbc.com">bbc.com</option>
+          <option value="theguardian.com">theguardian.com</option>
+          <option value="wikipedia.org">wikipedia.org</option>
+          <option value="stackoverflow.com">stackoverflow.com</option>
+        </select>
+        <button id="run-btn">
+          <svg class="bolt" viewBox="0 0 24 24" fill="currentColor"><path d="M13 2L4.5 13.5H11l-1 8.5L19.5 10H13z"/></svg>
+          <span class="spinner"></span>
+          <span class="btn-label">EXTRACT →</span>
+        </button>
+      </div>
+      <div id="html-accordion">
+        <div class="acc-header" id="acc-toggle" role="button" tabindex="0" aria-expanded="false">
+          <span class="chev"><span class="arw">▸</span>OR PASTE RAW HTML</span>
+        </div>
+        <div class="acc-body"><div class="acc-body-inner">
+          <textarea id="custom-html" placeholder="<html>…</html>  (2 MB max; JS-rendered SPAs will come up empty — nothing static to extract)"></textarea>
+          <div class="acc-hint">If set, this overrides the example dropdown. ⌘/Ctrl+Enter to run.</div>
+        </div></div>
       </div>
-      <div class="acc-body"><div class="acc-body-inner">
-        <textarea id="custom-html" placeholder="<html>…</html>  (2 MB max; JS-rendered SPAs will come up empty — nothing static to extract)"></textarea>
-        <div class="acc-hint">If set, this overrides the example dropdown. ⌘/Ctrl+Enter to run.</div>
-      </div></div>
     </div>
-  </div>
 
-  <!-- Segmented control (mobile only) -->
-  <div class="seg" role="tablist" aria-label="Model output">
-    <button data-seg="pulpie" class="active" role="tab" aria-selected="true"><span class="led"></span>PULPIE</button>
-    <button data-seg="dripper" role="tab" aria-selected="false"><span class="led"></span>DRIPPER</button>
-  </div>
+    <div class="card-divider"></div>
 
-  <!-- Panes -->
-  <div class="panes">
-    <div class="pane pulpie-pane mobile-active" id="pulpie-card" data-pane="pulpie">
-      <div class="pane-head">
-        <div class="name"><span class="led"></span>PULPIE <b>ORANGE-SMALL · 210M · ENCODER</b></div>
-        <div class="timer" id="pulpie-timer"></div>
+    <!-- comparison strip (both models, always visible) -->
+    <div class="cmp-strip">
+      <div class="chip pulpie" id="pulpie-chip">
+        <div class="chip-top">
+          <div class="chip-name"><span class="led"></span>PULPIE <b>210M · ENCODER</b></div>
+          <div class="timer" id="pulpie-timer"></div>
+        </div>
+        <div class="bar"><div class="fill" id="pulpie-bar"></div></div>
       </div>
-      <div class="bar"><div class="fill" id="pulpie-bar"></div></div>
-      <div class="result-pane" id="pulpie-pane">
-        <div class="placeholder">One encoder forward pass over every block.</div>
-        <div class="skeleton"><div class="sk-line"></div><div class="sk-line"></div><div class="sk-line"></div><div class="sk-line"></div><div class="sk-line"></div></div>
+      <div class="cmp-center idle" id="cmp-center">
+        <div class="sp-num" id="sp-num">—</div>
+        <div class="sp-lbl" id="sp-lbl">× FASTER · ON THIS PAGE</div>
       </div>
-      <div class="pane-actions">
-        <button class="mini-btn" data-copy="pulpie">⧉ COPY MD</button>
-        <button class="mini-btn" data-diff="pulpie">≠ DIFF</button>
+      <div class="chip dripper" id="dripper-chip">
+        <div class="chip-top">
+          <div class="chip-name"><span class="led"></span>DRIPPER <b>0.6B · DECODER</b></div>
+          <div class="timer" id="dripper-timer"></div>
+        </div>
+        <div class="bar"><div class="fill" id="dripper-bar"></div></div>
       </div>
     </div>
-    <div class="pane dripper-pane" id="dripper-card" data-pane="dripper">
-      <div class="pane-head">
-        <div class="name"><span class="led"></span>DRIPPER <b>0.6B · DECODER</b></div>
-        <div class="timer" id="dripper-timer"></div>
-      </div>
-      <div class="bar"><div class="fill" id="dripper-bar"></div></div>
-      <div class="result-pane" id="dripper-pane">
-        <div class="placeholder">The same labels, one token at a time.</div>
-        <div class="skeleton"><div class="sk-line"></div><div class="sk-line"></div><div class="sk-line"></div><div class="sk-line"></div><div class="sk-line"></div></div>
-      </div>
-      <div class="pane-actions">
-        <button class="mini-btn" data-copy="dripper">⧉ COPY MD</button>
-        <button class="mini-btn" data-diff="dripper">≠ DIFF</button>
+
+    <!-- toolbar: toggle + actions -->
+    <div class="read-toolbar">
+      <div class="toggle-seg" role="tablist" aria-label="Which model to read">
+        <button data-model="pulpie" class="active" role="tab" aria-selected="true"><span class="led"></span>PULPIE</button>
+        <button data-model="dripper" role="tab" aria-selected="false"><span class="led"></span>DRIPPER</button>
       </div>
+      <div class="toolbar-spacer"></div>
+      <button class="mini-btn" id="copy-btn">⧉ COPY MD</button>
+      <button class="mini-btn" id="diff-btn">≠ DIFF</button>
     </div>
+
+    <!-- single reading pane -->
+    <div class="read-pane" id="read-pane">
+      <div class="placeholder">One encoder forward pass over every block.</div>
+    </div>
+    <div id="status-line"></div>
   </div>
 
-  <div class="progress-track"><div class="progress-fill" id="progress-fill"></div></div>
-  <div id="verdict"></div>
   <div class="flash" id="flash"><span id="flash-text"></span><span class="x" id="flash-x">✕</span></div>
 
   <!-- Bench -->
@@ -338,11 +330,6 @@
   </div>
 </div>
 
-<!-- Sticky mobile run bar -->
-<div class="runbar">
-  <button id="run-btn-mobile">EXTRACT →</button>
-</div>
-
 <script type="module">
   import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
   import { marked } from "https://cdn.jsdelivr.net/npm/marked@12/lib/marked.esm.js";
@@ -351,47 +338,68 @@
 
   const $ = (id) => document.getElementById(id);
   const runBtn=$("run-btn"), btnLabel=runBtn.querySelector(".btn-label");
-  const runBtnMobile=$("run-btn-mobile");
   const exampleSelect=$("example-select"), customHtml=$("custom-html");
-  const pulpiePane=$("pulpie-pane"), dripperPane=$("dripper-pane");
-  const pulpieCard=$("pulpie-card"), dripperCard=$("dripper-card");
+  const readPane=$("read-pane");
+  const pulpieChip=$("pulpie-chip"), dripperChip=$("dripper-chip");
   const pulpieTimer=$("pulpie-timer"), dripperTimer=$("dripper-timer");
   const pulpieBar=$("pulpie-bar"), dripperBar=$("dripper-bar");
-  const verdictEl=$("verdict"), flashEl=$("flash"), flashText=$("flash-text"), progressFill=$("progress-fill");
+  const cmpCenter=$("cmp-center"), spNum=$("sp-num"), spLbl=$("sp-lbl");
+  const statusLine=$("status-line");
+  const flashEl=$("flash"), flashText=$("flash-text");
   const connPill=$("conn-pill"), connText=$("conn-text");
+  const copyBtn=$("copy-btn"), diffBtn=$("diff-btn");
 
   const PLACEHOLDERS = {
     pulpie:'<div class="placeholder">One encoder forward pass over every block.</div>',
     dripper:'<div class="placeholder">The same labels, one token at a time.</div>',
   };
-  const SKEL = '<div class="skeleton"><div class="sk-line"></div><div class="sk-line"></div><div class="sk-line"></div><div class="sk-line"></div><div class="sk-line"></div></div>';
+  const SKEL = '<div class="sk-line"></div><div class="sk-line"></div><div class="sk-line"></div><div class="sk-line"></div><div class="sk-line"></div>';
   let lastMd = { pulpie:"", dripper:"" };
-  let mobilePane = "pulpie"; // which pane is visible on mobile (streaming still writes both)
+  let running = false, currentModel = "pulpie";
 
   function renderMarkdown(md){ if(!md) return ""; return DOMPurify.sanitize(marked.parse(md)); }
-  function setPane(pane, md, isRaw){ if(!md){ pane.innerHTML=""; return; } pane.innerHTML = isRaw ? md : renderMarkdown(md); }
+  function renderRead(){
+    const md = lastMd[currentModel];
+    if(md) readPane.innerHTML = renderMarkdown(md);
+    else if(running) readPane.innerHTML = SKEL;
+    else readPane.innerHTML = PLACEHOLDERS[currentModel];
+  }
   function setRunning(on){
+    running = on;
     runBtn.classList.toggle("running", on); runBtn.disabled=on;
-    if(runBtnMobile) runBtnMobile.disabled = on;
     btnLabel.textContent = on ? "EXTRACTING…" : "EXTRACT →";
-    if(runBtnMobile) runBtnMobile.textContent = on ? "EXTRACTING…" : "EXTRACT →";
+    if(on || lastMd[currentModel]) renderRead();
   }
   function showError(msg){ flashText.textContent=msg; flashEl.classList.add("show"); }
   function clearError(){ flashEl.classList.remove("show"); }
-  function setProgress(pct){ progressFill.style.width = Math.max(0,Math.min(100,pct))+"%"; }
+  function setStatus(html){ if(!html){ statusLine.classList.remove("show"); statusLine.innerHTML=""; return; } statusLine.innerHTML=html; statusLine.classList.add("show"); }
   function setBar(bar, pct, indeterminate){
     bar.classList.toggle("indeterminate", !!indeterminate);
     if(indeterminate){ bar.style.right=""; }
     else { bar.style.right = (100-Math.max(0,Math.min(100,pct)))+"%"; }
   }
+  function setSpeedupIdle(){ cmpCenter.classList.add("idle"); spNum.textContent="—"; spLbl.textContent="× FASTER · ON THIS PAGE"; }
+  function setSpeedup(num){
+    cmpCenter.classList.remove("idle");
+    spNum.textContent = num;
+    spLbl.textContent = "× FASTER · ON THIS PAGE";
+  }
+  // Pull the speedup token ("12x" / "9.4x") out of the backend's verdict HTML:
+  //  <div ...>PULPIE 0.42s → DRIPPER 2.8s · <span ...>12x ON THIS PAGE</span></div>
+  function applyVerdict(v){
+    if(!v){ return; }
+    const m = v.match(/<span[^>]*>\s*([\d.]+x)\s+ON THIS PAGE\s*<\/span>/);
+    if(m){ setSpeedup(m[1]); setStatus(""); }
+    else { setSpeedupIdle(); setStatus(v); } // plain-text verdict (bad input / error)
+  }
 
   function resetPanes(){
-    pulpiePane.innerHTML = PLACEHOLDERS.pulpie + SKEL;
-    dripperPane.innerHTML = PLACEHOLDERS.dripper + SKEL;
-    pulpieCard.classList.remove("live","working"); dripperCard.classList.remove("live","working");
+    lastMd={pulpie:"",dripper:""};
+    pulpieChip.classList.remove("live"); dripperChip.classList.remove("live");
     pulpieTimer.innerHTML=""; dripperTimer.innerHTML="";
-    verdictEl.innerHTML=""; lastMd={pulpie:"",dripper:""};
-    setProgress(0); setBar(pulpieBar,0); setBar(dripperBar,0); clearError();
+    setBar(pulpieBar,0); setBar(dripperBar,0);
+    setSpeedupIdle(); setStatus(""); clearError();
+    renderRead();
   }
 
   function normalizeRecord(d){
@@ -404,20 +412,26 @@
   function applyRecord(rec){
     if(!rec) return;
     if(rec.pulpie_md!==undefined && rec.pulpie_md!==""){
-      lastMd.pulpie=rec.pulpie_md; pulpieCard.classList.remove("working"); pulpieCard.classList.add("live");
-      setPane(pulpiePane, rec.pulpie_md); setBar(pulpieBar,100);
-      setTimeout(()=>pulpieCard.classList.remove("live"), 900);
+      lastMd.pulpie=rec.pulpie_md;
+      pulpieChip.classList.add("live");
+      setBar(pulpieBar,100);
+      setTimeout(()=>pulpieChip.classList.remove("live"),900);
+      if(currentModel==="pulpie") renderRead();
     }
     if(rec.dripper_md!==undefined && rec.dripper_md!==""){
-      lastMd.dripper=rec.dripper_md; dripperCard.classList.add("live");
-      setPane(dripperPane, rec.dripper_md);
+      lastMd.dripper=rec.dripper_md;
+      dripperChip.classList.add("live");
+      if(currentModel==="dripper") renderRead();
     }
     if(rec.pulpie_timer!==undefined) pulpieTimer.innerHTML=rec.pulpie_timer;
     if(rec.dripper_timer!==undefined) dripperTimer.innerHTML=rec.dripper_timer;
-    if(rec.verdict!==undefined && rec.verdict!==""){ verdictEl.innerHTML=rec.verdict; dripperCard.classList.remove("live"); setBar(dripperBar,100); }
-    if(rec.pulpie_md && !rec.dripper_md){ setProgress(40); setBar(dripperBar,0,true); }
-    else if(rec.dripper_md && rec.verdict) setProgress(100);
-    else if(rec.dripper_md) setProgress(90);
+    // dripper progress: indeterminate while streaming, full when the verdict lands
+    if(rec.dripper_md && !(rec.verdict)){ setBar(dripperBar,0,true); }
+    if(rec.verdict!==undefined && rec.verdict!==""){
+      applyVerdict(rec.verdict);
+      dripperChip.classList.remove("live");
+      setBar(dripperBar,100);
+    }
   }
 
   // ── Connect ──
@@ -434,7 +448,6 @@
   async function run(){
     if(!client){ showError("Backend not connected. Reload the page."); return; }
     resetPanes(); setRunning(true);
-    pulpieCard.classList.add("working"); dripperCard.classList.add("working");
     const params = { example_name: exampleSelect.value, custom_html: customHtml.value.trim() };
     try {
       const submission = client.submit("/race", params);
@@ -442,19 +455,17 @@
       for await (const msg of submission){
         if(msg.type==="status"){
           if(msg.stage==="pending" && msg.position!=null){
-            verdictEl.innerHTML = '<div class="verdict-queued"><span class="dot"></span>QUEUED · POSITION '+msg.position+'</div>';
-          } else if(msg.stage==="generating"){ if(!verdictEl.querySelector(".verdict-hero")) verdictEl.innerHTML=""; }
+            setStatus('<span style="color:var(--soft)">QUEUED · POSITION '+msg.position+'</span>');
+          } else if(msg.stage==="generating"){ if(!sawData) setStatus(""); }
           continue;
         }
         if(msg.type==="data"){ sawData=true; applyRecord(normalizeRecord(msg.data)); }
       }
       if(!sawData) showError("Backend returned no data. Check the /race endpoint and Space logs.");
-      if(!verdictEl.innerHTML) setProgress(100);
-    } catch(e){ showError("Race failed: " + (e?.message||e)); setProgress(0); }
-    finally { setRunning(false); pulpieCard.classList.remove("working"); dripperCard.classList.remove("working"); }
+    } catch(e){ showError("Race failed: " + (e?.message||e)); }
+    finally { setRunning(false); }
   }
   runBtn.addEventListener("click", run);
-  if(runBtnMobile) runBtnMobile.addEventListener("click", run);
   exampleSelect.addEventListener("keydown", e=>{ if(e.key==="Enter"){ e.preventDefault(); run(); } });
   customHtml.addEventListener("keydown", e=>{ if(e.key==="Enter" && (e.metaKey||e.ctrlKey)){ e.preventDefault(); run(); } });
 
@@ -463,48 +474,43 @@
   accToggle.addEventListener("click", ()=>{ const o=acc.classList.toggle("open"); accToggle.setAttribute("aria-expanded", o); });
   accToggle.addEventListener("keydown", e=>{ if(e.key==="Enter"||e.key===" "){ e.preventDefault(); accToggle.click(); } });
 
-  // ── Mobile segmented control ──
-  document.querySelectorAll(".seg button").forEach(b=>{
+  // ── Model toggle ──
+  document.querySelectorAll(".toggle-seg button").forEach(b=>{
     b.addEventListener("click", ()=>{
-      mobilePane = b.getAttribute("data-seg");
-      document.querySelectorAll(".seg button").forEach(x=>{ const on=x===b; x.classList.toggle("active",on); x.setAttribute("aria-selected",on); });
-      pulpieCard.classList.toggle("mobile-active", mobilePane==="pulpie");
-      dripperCard.classList.toggle("mobile-active", mobilePane==="dripper");
+      currentModel = b.getAttribute("data-model");
+      document.querySelectorAll(".toggle-seg button").forEach(x=>{ const on=x===b; x.classList.toggle("active",on); x.setAttribute("aria-selected",on); });
+      renderRead();
     });
   });
 
   // ── Flash dismiss ──
   $("flash-x").addEventListener("click", clearError);
 
-  // ── Copy / Diff ──
-  document.querySelectorAll("[data-copy]").forEach(btn=>{
-    btn.addEventListener("click", async ()=>{
-      const which=btn.getAttribute("data-copy"), text=lastMd[which];
-      if(!text) return;
-      try { await navigator.clipboard.writeText(text); btn.textContent="✓ COPIED"; }
-      catch { btn.textContent="COPY FAILED"; }
-      setTimeout(()=>(btn.textContent="⧉ COPY MD"), 1400);
-    });
+  // ── Copy ──
+  copyBtn.addEventListener("click", async ()=>{
+    const text = lastMd[currentModel];
+    if(!text) return;
+    try { await navigator.clipboard.writeText(text); copyBtn.textContent="✓ COPIED"; }
+    catch { copyBtn.textContent="COPY FAILED"; }
+    setTimeout(()=>(copyBtn.textContent="⧉ COPY MD"), 1400);
   });
-  document.querySelectorAll("[data-diff]").forEach(btn=>{
-    btn.addEventListener("click", ()=>{
-      const which=btn.getAttribute("data-diff"), other=which==="pulpie"?"dripper":"pulpie";
-      if(!lastMd[which] || !lastMd[other]) return;
-      const a=lastMd.pulpie, b=lastMd.dripper, same=a.trim()===b.trim();
-      const targetPane = which==="pulpie"?pulpiePane:dripperPane;
-      // on mobile, make sure the pane we're diffing is visible
-      if(window.matchMedia("(max-width:860px)").matches && which!==mobilePane){
-        document.querySelector('.seg button[data-seg="'+which+'"]')?.click();
-      }
-      if(same){
-        targetPane.innerHTML = renderMarkdown(lastMd[which]) +
-          '<div style="font-family:\'IBM Plex Mono\',monospace;font-size:11px;color:var(--green);margin-top:14px;border-top:1px solid var(--hairline);padding-top:10px;">✓ IDENTICAL OUTPUTS</div>';
-      } else {
-        targetPane.innerHTML = '<pre style="white-space:pre-wrap;font-family:\'IBM Plex Mono\',monospace;font-size:12px;line-height:1.5;background:var(--sunken);border:1px solid var(--hairline);padding:12px;border-radius:8px;">'+escapeHtml(lineDiff(a,b))+'</pre>';
-      }
-      btn.textContent = same ? "IDENTICAL" : "↩ BACK";
-      btn.addEventListener("click", function revert(){ if(lastMd[which]) targetPane.innerHTML=renderMarkdown(lastMd[which]); btn.textContent="≠ DIFF"; btn.removeEventListener("click", revert); }, { once:true });
-    });
+
+  // ── Diff (against the other model, shown in the single reading pane) ──
+  let diffOpen=false, diffForModel=null;
+  diffBtn.addEventListener("click", ()=>{
+    if(diffOpen && diffForModel===currentModel){ renderRead(); diffOpen=false; diffBtn.textContent="≠ DIFF"; return; }
+    const other = currentModel==="pulpie" ? "dripper" : "pulpie";
+    if(!lastMd[currentModel] || !lastMd[other]) return;
+    const a=lastMd.pulpie, b=lastMd.dripper, same=a.trim()===b.trim();
+    if(same){
+      readPane.innerHTML = renderMarkdown(lastMd[currentModel]) +
+        '<div style="font-family:\'IBM Plex Mono\',monospace;font-size:11px;color:var(--green);margin-top:14px;border-top:1px solid var(--hairline);padding-top:10px;">✓ IDENTICAL OUTPUTS — PULPIE &amp; DRIPPER MATCH</div>';
+      diffBtn.textContent="IDENTICAL";
+    } else {
+      readPane.innerHTML = '<pre style="white-space:pre-wrap;font-family:\'IBM Plex Mono\',monospace;font-size:12px;line-height:1.5;background:var(--sunken);border:1px solid var(--hairline);padding:12px;border-radius:8px;">'+escapeHtml(lineDiff(a,b))+'</pre>';
+      diffBtn.textContent="↩ BACK";
+    }
+    diffOpen=true; diffForModel=currentModel;
   });
 
   function lineDiff(a,b){