Align 'Try it' pill + tighten poolside.ai styling

Pills:
- 'Try it:' label pill was wrapping onto two lines because its inner
gradient span broke the inline-flex. Wrap the label + colon in a
dedicated nowrap .try container with its own leading dot so it reads
horizontally on every viewport.
- Update click handler to skip pills that contain the .try marker.

Color / design (closer to poolside.ai):
- Page background switches to a subtle dotted texture (radial-gradient
18px grid) on #fafafa, matching the textured gray panel under the
terminal card in the poolside screenshot.
- Card and terminal body are pure white; brand strip keeps the indigo→magenta
vertical accent.
- macOS chrome title strips magenta — 'pool — website — ~' is plain
mono ink, matching the original pool — website screenshot.
- Send button is solid indigo and gets the right-side 12px radius on the
prompt bar (rounded only on mobile via media query).

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

index.html

@@ -7,29 +7,28 @@
   <link rel="icon" href="https://cdn-avatars.huggingface.co/v1/production/uploads/699484cbe85a4b61cbc5ee0f/GpYWuz-CovEFgbPOW21dZ.png" />
   <style>
     :root {
-      /* poolside-aligned palette: indigo→magenta gradient, soft whites */
+      /* poolside-aligned palette: indigo + magenta on pure white */
       --indigo: #4f46e5;
       --indigo-700: #4338ca;
       --magenta: #d946ef;
-      --pink: #ec4899;
       --ink: #0f1020;
       --ink-soft: #1c1d2e;
-      --paper: #f8f8fc;
+      --paper: #ffffff;
       --paper-2: #ffffff;
       --paper-line: #ececf3;
       --paper-line-2: #d9d9e6;
       --muted: #6b6c80;
       --dim: #9f9fb3;
-      --bg: #f3f3f7;
+      --bg: #fafafa;
 
-      /* terminal ANSI palette mapped onto a paper background */
+      /* terminal ANSI palette mapped onto paper background */
       --term-bg: #ffffff;
       --term-divider: #efeff6;
       --term-fg: #0f1020;
       --term-muted: #6b6c80;
-      --term-cyan: #0e7490;        /* used for prompt prefix */
+      --term-cyan: #0e7490;
       --term-yellow: #b45309;
-      --term-green: #047857;       /* answer box accent */
+      --term-green: #047857;
       --term-bold-green: #059669;
       --term-grey: #9ca3af;
       --term-red: #b91c1c;
@@ -37,7 +36,10 @@
     * { box-sizing: border-box; }
     html, body { margin: 0; padding: 0; height: 100%; }
     body {
-      background: var(--bg);
+      background:
+        radial-gradient(circle at 1px 1px, rgba(15,16,32,0.06) 1px, transparent 0)
+        0 0 / 18px 18px,
+        #fafafa;
       color: var(--ink);
       font-family: 'Inter','SF Pro Display','Helvetica Neue',Arial,sans-serif;
       -webkit-font-smoothing: antialiased;
@@ -124,12 +126,9 @@
     .dot.g { background: #28c840; }
     .mactitle {
       flex: 1; text-align: center; font-size: 12px; color: var(--muted);
+      font-family: 'JetBrains Mono','Fira Code','SF Mono','Menlo',monospace;
     }
-    .mactitle .grad {
-      background: linear-gradient(90deg, var(--indigo) 0%, var(--magenta) 100%);
-      -webkit-background-clip: text; background-clip: text; color: transparent;
-      font-weight: 600;
-    }
+    .mactitle b { color: var(--ink); font-weight: 600; }
 
     /* --------- Terminal body (white) --------- */
     .term {
@@ -188,9 +187,9 @@
     }
     .promptbar button.send {
       background: var(--indigo); color: #fff; border: none;
-      border-left: 1px solid var(--indigo-700);
       padding: 0 22px; font: inherit; font-weight: 600; cursor: pointer;
       transition: background 120ms ease, transform 120ms ease;
+      border-radius: 0 12px 12px 0;
     }
     .promptbar button.send:hover { background: var(--indigo-700); }
     .promptbar button.send:disabled { opacity: 0.55; cursor: not-allowed; }
@@ -219,6 +218,13 @@
       -webkit-background-clip: text; background-clip: text; color: transparent;
       font-weight: 600;
     }
+    .pill .try {
+      display: inline-flex; align-items: center; gap: 6px;
+      white-space: nowrap;
+    }
+    .pill .try .dot-mini {
+      width: 7px; height: 7px; border-radius: 50%; background: var(--indigo);
+    }
     .footline {
       color: var(--muted); font-size: 12px; margin-top: 18px;
       padding-top: 14px; border-top: 1px solid var(--paper-line);
@@ -273,6 +279,7 @@
       .promptbar button.send {
         flex: 1 1 70%; padding: 12px 12px; font-size: 14px;
         border-top: 1px solid var(--paper-line); border-left: 1px solid var(--indigo-700);
+        border-radius: 0 0 12px 0;
       }
 
       .pillrow { gap: 6px; margin-top: 12px; }
@@ -314,7 +321,7 @@
         <span class="dots">
           <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
         </span>
-        <div class="mactitle">pool — <span class="grad">website</span> — <span class="grad"><span style="filter:blur(0)">~</span></span></div>
+        <div class="mactitle"><b>pool</b> — website — <b>~</b></div>
       </div>
 
       <div id="term" class="term" aria-live="polite"></div>
@@ -330,7 +337,7 @@
         </div>
 
         <div class="pillrow">
-          <span class="pill dot"><span class="grad">Try it:</span></span>
+          <span class="pill"><span class="try"><span class="dot-mini"></span><span class="grad">Try&nbsp;it</span><span class="grad">:</span></span></span>
           <span class="pill">How many r's are in <code style="color:var(--ink)">'strawberry'</code>?</span>
           <span class="pill">Write a recursive Fibonacci in Python.</span>
           <span class="pill">Explain backprop in one paragraph.</span>
@@ -363,10 +370,10 @@
     };
 
     const banner = [
-      `${ANSI.green}● Connected to agent server — Poolside v2.1${ANSI.reset}`,
-      `${ANSI.dim}● session id: robust-lake-${Math.floor(Math.random()*9000+1000)} · model poolside/laguna-s-2.1:free · openrouter${ANSI.reset}`,
+      `${ANSI.green}● ${ANSI.reset}Connected to agent server: ${ANSI.bold}Poolside v2.1${ANSI.reset}`,
+      `${ANSI.dim}  session id: robust-lake-${Math.floor(Math.random()*9000+1000)} · model poolside/laguna-s-2.1:free · openrouter${ANSI.reset}`,
       "",
-      `${ANSI.cyan}>${ANSI.reset} ${ANSI.dim}type a question below.${ANSI.reset} ${ANSI.dim}the model${ANSI.reset} ${ANSI.green}reasons before it answers${ANSI.reset}${ANSI.dim}, and remembers its thoughts on the next turn.${ANSI.reset}`,
+      `${ANSI.cyan}>${ANSI.reset} type a question below. the model ${ANSI.bold}reasons before it answers${ANSI.reset}, and remembers its thoughts on the next turn.`,
       "",
       `${ANSI.dim}─────────────────────────────────────────────────────────────────${ANSI.reset}`,
       "",
@@ -521,8 +528,9 @@
     // pill-driven seeds
     document.querySelectorAll('.pill').forEach(p => {
       p.addEventListener('click', () => {
+        // The "Try it:" label pill isn't a seed
+        if (p.querySelector('.try')) return;
         const txt = p.textContent.trim();
-        if (p.querySelector('.grad')) return;            // the "Try it:" pill isn't a seed
         if (txt.startsWith('•') || txt.length < 4) return;
         input.value = txt;
         input.focus();