Match nipunbatra.github.io design system; fix Mermaid parser errors

Look & feel:
- Work Sans body + Playfair Display headings (both from Google Fonts).
- Warm-red #c44536 accent, #1a1a2e ink, cream #faf7f2 surface — same
palette as nipunbatra.github.io / sustainability-lab.github.io.
- Cream title card with warm-red left border replaces the purple/pink
gradient block.
- Underlined-accent tab bar, rounded-corner primary button, subtle
shadows and 4px corners throughout.
- Pill example buttons now white with cream hover in the warm-red.
- Gradio theme switched from Soft to Default(red) so our CSS variables
control the look.

Mermaid:
- Fully quote every node label; switch edge labels from `-- x -->` to
`-->|x|`; drop <br/> from inside diamond labels. Mermaid 11.14 is
strict about unquoted specials and that was the source of
"Syntax error in text".
- Use mermaid.run({nodes}) async with a :not([data-processed]) selector
so re-renders after tab swaps don't double-parse.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

app.py

@@ -655,6 +655,8 @@ TOOLS_DETAIL = f"""
 
 
 # Mermaid flowchart — rendered inside a raw HTML block with CDN Mermaid.
+# Mermaid 11 is strict: every label with special chars / parens must be
+# quoted, and <br/> tags must live inside quoted labels only.
 FLOWCHART_HTML = """
 <div style="padding: 1rem 0;">
 <h2 style="text-align:left;">Without tools vs. with tools</h2>
@@ -662,28 +664,31 @@ FLOWCHART_HTML = """
 
 <pre class="mermaid" style="background:transparent;">
 flowchart LR
-    subgraph plain["Without tools (plain LLM)"]
-        direction TB
-        PU[User question] --> PL[LLM]
-        PL --> PA["Answer<br/>(may hallucinate)"]
+    subgraph plain["Without tools"]
+        PU["User question"] --> PL["LLM"]
+        PL --> PA["Answer (may hallucinate)"]
     end
-    subgraph agent["With tools (agent loop)"]
-        direction TB
-        AU[User question] --> AL["LLM + tool menu"]
-        AL --> AD{Tool call<br/>needed?}
-        AD -- no --> AF["Final answer<br/>(grounded in data)"]
-        AD -- yes --> AT[Run tool in your code]
-        AT --> AR[Append result to messages]
+    subgraph agent["With tools - agent loop"]
+        AU["User question"] --> AL["LLM + tool menu"]
+        AL --> AD{"Tool call?"}
+        AD -->|no| AF["Final answer"]
+        AD -->|yes| AT["Run tool in your code"]
+        AT --> AR["Append result"]
         AR --> AL
     end
 </pre>
 
 <script type="module">
   import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs";
-  mermaid.initialize({ startOnLoad: true, theme: "default", securityLevel: "loose", flowchart: { htmlLabels: true } });
-  const rerun = () => { try { mermaid.run({ nodes: document.querySelectorAll('.mermaid:not([data-processed])') }); } catch(e) {} };
-  rerun();
-  const obs = new MutationObserver(rerun);
+  mermaid.initialize({ startOnLoad: false, theme: "default", securityLevel: "loose" });
+  async function renderAll() {
+    const blocks = document.querySelectorAll('.mermaid:not([data-processed])');
+    if (!blocks.length) return;
+    try { await mermaid.run({ nodes: blocks }); }
+    catch (e) { console.error('Mermaid render error:', e); }
+  }
+  renderAll();
+  const obs = new MutationObserver(renderAll);
   obs.observe(document.body, { childList: true, subtree: true });
 </script>
 </div>
@@ -691,69 +696,191 @@ flowchart LR
 
 
 CUSTOM_CSS = """
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Work+Sans:wght@300;400;500;600&display=swap');
+
+:root {
+  --ink: #1a1a2e;
+  --muted: #5a6070;
+  --paper: #ffffff;
+  --cream: #faf7f2;
+  --accent: #c44536;
+  --accent-hover: #a63c30;
+  --line: rgba(26, 26, 46, 0.1);
+  --shadow-sm: 0 2px 8px rgba(26, 26, 46, 0.06);
+  --shadow-md: 0 8px 30px rgba(26, 26, 46, 0.12);
+}
+
+.gradio-container, .gradio-container * {
+  font-family: "Work Sans", system-ui, sans-serif !important;
+  color: var(--ink);
+}
+
+.gradio-container { background: var(--paper) !important; }
+
+.gradio-container h1, .gradio-container h2 {
+  font-family: "Playfair Display", serif !important;
+  font-weight: 600 !important;
+  letter-spacing: -0.01em;
+}
+
+.gradio-container h1, .gradio-container h2, .gradio-container h3,
+.gradio-container p, .gradio-container label {
+  text-align: left !important;
+}
+
+/* Header card — replaces the purple/pink gradient */
 #title-card {
-  background: linear-gradient(135deg, #4f46e5 0%, #ec4899 100%);
-  color: white;
-  padding: 1.25rem 1.5rem;
-  border-radius: 16px;
-  margin-bottom: 1rem;
+  background: var(--cream);
+  border: 1px solid var(--line);
+  border-left: 4px solid var(--accent);
+  padding: 1.5rem 1.75rem;
+  border-radius: 4px;
+  margin-bottom: 1.25rem;
+  box-shadow: var(--shadow-sm);
+}
+#title-card h1 {
+  font-family: "Playfair Display", serif;
+  color: var(--ink);
+  margin: 0 0 .35rem 0;
+  font-size: 2rem;
+  font-weight: 600;
+}
+#title-card p {
+  color: var(--muted);
+  margin: 0;
+  font-size: 1rem;
+  line-height: 1.6;
+}
+#title-card a { color: var(--accent); text-decoration: none; }
+#title-card a:hover { color: var(--accent-hover); text-decoration: underline; }
+
+/* Tabs */
+.gradio-container .tab-nav button {
+  font-family: "Work Sans", sans-serif !important;
+  font-weight: 500 !important;
+  color: var(--muted) !important;
+  background: transparent !important;
+  border: none !important;
+  border-bottom: 2px solid transparent !important;
+  border-radius: 0 !important;
+  padding: .6rem 1.1rem !important;
+}
+.gradio-container .tab-nav button.selected {
+  color: var(--accent) !important;
+  border-bottom-color: var(--accent) !important;
 }
-#title-card h1 { color: white; margin: 0 0 .25rem 0; font-size: 1.8rem; }
-#title-card p  { color: rgba(255,255,255,.92); margin: 0; font-size: .95rem; }
 
+/* Question textbox */
 #question-box textarea {
+  font-family: "Work Sans", sans-serif !important;
   font-size: 1.05rem !important;
-  border-radius: 12px !important;
+  border-radius: 4px !important;
   padding: .75rem 1rem !important;
-  border: 2px solid #e5e7eb !important;
+  border: 1px solid var(--line) !important;
+  background: var(--paper) !important;
   transition: border-color .15s;
 }
 #question-box textarea:focus {
-  border-color: #4f46e5 !important;
+  border-color: var(--accent) !important;
   outline: none !important;
+  box-shadow: 0 0 0 3px rgba(196, 69, 54, .1) !important;
+}
+
+/* Primary button (Run both) */
+.gradio-container button.primary {
+  background: var(--accent) !important;
+  border: none !important;
+  border-radius: 4px !important;
+  font-weight: 500 !important;
+  letter-spacing: .02em !important;
+  transition: background .15s;
+}
+.gradio-container button.primary:hover {
+  background: var(--accent-hover) !important;
 }
 
-#pill-row { gap: .45rem !important; flex-wrap: wrap !important; }
+/* Pill-style example buttons */
+#pill-row { gap: .5rem !important; flex-wrap: wrap !important; }
 #pill-row .gr-button, #pill-row button {
   border-radius: 999px !important;
-  padding: .35rem .9rem !important;
-  font-size: .85rem !important;
-  font-weight: 500 !important;
-  background: #f3f4f6 !important;
-  color: #1f2937 !important;
-  border: 1px solid #e5e7eb !important;
+  padding: .4rem 1rem !important;
+  font-family: "Work Sans", sans-serif !important;
+  font-size: .88rem !important;
+  font-weight: 400 !important;
+  background: var(--paper) !important;
+  color: var(--ink) !important;
+  border: 1px solid var(--line) !important;
   min-width: 0 !important;
   width: auto !important;
   text-align: left !important;
   white-space: normal !important;
-  line-height: 1.25 !important;
+  line-height: 1.3 !important;
   flex: 0 0 auto !important;
+  transition: all .15s ease;
 }
 #pill-row .gr-button:hover, #pill-row button:hover {
-  background: #e0e7ff !important;
-  border-color: #4f46e5 !important;
+  background: var(--cream) !important;
+  border-color: var(--accent) !important;
+  color: var(--accent) !important;
 }
 
+/* Result panels */
 .panel {
-  border-radius: 14px;
-  padding: 1rem 1.1rem;
+  border-radius: 4px;
+  padding: 1.1rem 1.25rem;
   min-height: 220px;
+  background: var(--paper);
+  box-shadow: var(--shadow-sm);
+}
+.panel-plain {
+  background: var(--cream);
+  border: 1px solid var(--line);
+  border-top: 3px solid #9a6b6b;
+}
+.panel-agent {
+  background: var(--paper);
+  border: 1px solid var(--line);
+  border-top: 3px solid var(--accent);
+}
+.panel h3 {
+  font-family: "Playfair Display", serif !important;
+  margin-top: 0 !important;
+  margin-bottom: .25rem !important;
+  color: var(--ink) !important;
 }
-.panel-plain { background: #fdecea; border: 1px solid #f5b7b1; }
-.panel-agent { background: #e8f5e9; border: 1px solid #a9dfbf; }
-.panel h3 { margin-top: 0 !important; text-align: left; }
 
 .final-box {
-  background: white;
-  border-left: 4px solid #1e8449;
+  background: var(--cream);
+  border-left: 3px solid var(--accent);
   padding: .75rem 1rem;
-  border-radius: 8px;
+  border-radius: 2px;
   margin-bottom: .75rem;
 }
 
-/* Left-align everything in the demo by default */
-.gradio-container h1, .gradio-container h2, .gradio-container h3,
-.gradio-container p, .gradio-container label { text-align: left !important; }
+/* Dropdown */
+.gradio-container .gr-dropdown,
+.gradio-container .gr-dropdown input {
+  border-radius: 4px !important;
+  border-color: var(--line) !important;
+  font-family: "Work Sans", sans-serif !important;
+}
+
+/* Code blocks keep mono font */
+.gradio-container code, .gradio-container pre,
+.gradio-container pre code {
+  font-family: "JetBrains Mono", "SF Mono", Menlo, monospace !important;
+  font-size: .88rem !important;
+}
+
+/* Links */
+.gradio-container a {
+  color: var(--accent);
+  text-decoration: none;
+}
+.gradio-container a:hover {
+  color: var(--accent-hover);
+  text-decoration: underline;
+}
 """
 
 
@@ -787,14 +914,22 @@ EXAMPLES = [
 
 TITLE_CARD = """
 <div id="title-card">
-  <h1>🤖 Agent 101 — LLM vs. LLM-with-tools</h1>
-  <p>Same model both sides. Left: plain LLM. Right: the same model with a toolkit and an agent loop. Watch what happens on questions the LLM can't answer from memory.</p>
-  <p style="margin-top:.4rem;font-size:.85rem;">Built for CS 203 at IIT Gandhinagar · <a href="https://github.com/nipunbatra/stt-ai-teaching/blob/master/lecture-demos/week12/colab-notebooks/01-agents-from-scratch.ipynb" style="color:white;text-decoration:underline;">companion Colab</a></p>
+  <h1>Agent 101</h1>
+  <p>LLM vs. LLM-with-tools — same model on both sides, the only difference is the agent loop on the right. Watch what happens on questions the LLM can't answer from memory.</p>
+  <p style="margin-top:.5rem;font-size:.88rem;color:var(--muted);">Built for CS 203 at IIT Gandhinagar · <a href="https://github.com/nipunbatra/stt-ai-teaching/blob/master/lecture-demos/week12/colab-notebooks/01-agents-from-scratch.ipynb">companion Colab</a></p>
 </div>
 """
 
 
-with gr.Blocks(title="Agent 101", theme=gr.themes.Soft(), css=CUSTOM_CSS) as demo:
+with gr.Blocks(
+    title="Agent 101",
+    theme=gr.themes.Default(
+        primary_hue=gr.themes.colors.red,
+        font=[gr.themes.GoogleFont("Work Sans"), "system-ui", "sans-serif"],
+        font_mono=[gr.themes.GoogleFont("JetBrains Mono"), "monospace"],
+    ),
+    css=CUSTOM_CSS,
+) as demo:
     gr.HTML(TITLE_CARD)
 
     with gr.Tabs():