Agentic Systems Studio landing and agent trace

README.md

@@ -1,10 +1,36 @@
 ---
 title: Agentic Systems Studio
-emoji: 👁
-colorFrom: purple
-colorTo: pink
+emoji: "🧭"
+colorFrom: gray
+colorTo: green
 sdk: static
-pinned: false
+app_file: index.html
+pinned: true
+license: mit
+short_description: Studio landing and a plan-tools-answer trace
+tags:
+  - agents
+  - llmops
+  - rag
+  - portfolio
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Agentic Systems Studio
+
+Landing page and a small **agent trace** for [Hanumanthu Harsha Vardhan](https://huggingface.co/hharsha).
+
+Original branding for [agentic-systems-studio.com](https://agentic-systems-studio.com). Not a GitHub-search clone. The trace is a browser mock: a planner picks tools, each tool returns a real link or checklist from this studio's public projects, and the last step writes the answer. No paid LLM and no Space hardware.
+
+## Why this is static
+
+New Gradio Spaces on free `cpu-basic` returned **HTTP 402** (PRO required, September 2026). [`gradio/app.py`](https://huggingface.co/spaces/hharsha/agentic-systems-studio/blob/main/gradio/app.py) is the same trace, ready if the account can host Gradio later. The live page does not need that.
+
+## Linked projects
+
+- [agentfleet](https://github.com/hharsha98/agentfleet)
+- [Vibespace](https://github.com/hharsha98/Vibespace)
+- [agent-os](https://github.com/hharsha98/agent-os)
+- [retrievallab](https://github.com/hharsha98/retrievallab)
+- [agentops-studio](https://github.com/hharsha98/agentops-studio)
+- [careeragent](https://github.com/hharsha98/careeragent)
+- [Retrieval Lab](https://huggingface.co/spaces/hharsha/retrieval-lab-demo)

demo.js

@@ -0,0 +1,90 @@
+const CATALOG = [
+  { id: "agentfleet", name: "AgentFleet", blurb: "Self-hostable multi-agent operations. A goal becomes a task DAG, with evals, cost governance, and guardrails.", url: "https://github.com/hharsha98/agentfleet", tags: ["agent", "fleet", "orchestr", "dag", "eval", "guardrail", "ops"] },
+  { id: "vibespace", name: "Vibespace", blurb: "Agentic development environment: terminal grid for coding agents, a kanban that dispatches them, shared memory.", url: "https://github.com/hharsha98/Vibespace", tags: ["ide", "terminal", "kanban", "claude", "cursor", "codex", "vibe"] },
+  { id: "agent-os", name: "Agent OS", blurb: "Local command center for agents already on the machine. Dry-run by default, sandboxed, gated control.", url: "https://github.com/hharsha98/agent-os", tags: ["local", "os", "sandbox", "dry-run", "desktop"] },
+  { id: "retrievallab", name: "RetrievalLab", blurb: "Advanced RAG made visible: hybrid search, reranking, query transforms, recall@k and MRR.", url: "https://github.com/hharsha98/retrievallab", tags: ["rag", "retriev", "search", "rerank", "citation", "pdf", "chunk"] },
+  { id: "agentops", name: "AgentOps Studio", blurb: "Operations lab — orchestration, cited RAG, MCP-style tools, traces. A different product from AgentFleet.", url: "https://github.com/hharsha98/agentops-studio", tags: ["mcp", "trace", "observ", "llmops", "docker", "kubernetes"] },
+  { id: "careeragent", name: "CareerAgent", blurb: "Job-hunt agents: cited CV chat, company research, tailored bullets, Kanban tracking.", url: "https://github.com/hharsha98/careeragent", tags: ["career", "cv", "job", "resume", "hiring"] },
+];
+const EXTRAS = [
+  ["Studio site", "https://agentic-systems-studio.com", "Product home for Agentic Systems Studio."],
+  ["Retrieval Lab Demo", "https://huggingface.co/spaces/hharsha/retrieval-lab-demo", "Browser chat-with-PDF with citations."],
+  ["Showcase dataset", "https://huggingface.co/datasets/hharsha/agentic-systems-showcase", "Project records. No invented papers."],
+  ["LinkedIn", "https://www.linkedin.com/in/hanumanthu1", "Hanumanthu Harsha Vardhan."],
+];
+const CHECKLIST = [
+  "Pin the model and the prompt template; log both with the trace id.",
+  "Store retrieved passage ids, not just the final answer, so citations can be audited.",
+  "Gate tool side effects. Read-only by default; writes need an explicit confirm step.",
+  "Run a small golden set (recall@k or a rubric) before changing the chunker or the embedder.",
+  "Ship the public demo without a card. This page does not request GPU hardware.",
+  "Cloud notes for this profile: AWS and GCP only. Do not describe Azure estates that are not owned.",
+];
+
+function pick(goal) {
+  const text = goal.toLowerCase();
+  const scored = CATALOG.map((item) => {
+    let score = item.tags.reduce((n, tag) => n + (text.includes(tag) ? 1 : 0), 0);
+    if (text.includes(item.name.toLowerCase()) || text.includes(item.id)) score += 3;
+    return { score, item };
+  }).sort((a, b) => b.score - a.score);
+  const chosen = scored.filter((row) => row.score > 0).slice(0, 3).map((row) => row.item);
+  return chosen.length ? chosen : [CATALOG[0], CATALOG[3], CATALOG[4]];
+}
+
+function escapeHtml(s) {
+  return s.replace(/[&<>]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;" }[c]));
+}
+
+function renderCards() {
+  const bits = CATALOG.map((item) => `<a class="card" href="${item.url}" target="_blank" rel="noreferrer"><strong>${item.name}</strong><span>${item.blurb}</span></a>`);
+  for (const [name, url, blurb] of EXTRAS) {
+    bits.push(`<a class="card" href="${url}" target="_blank" rel="noreferrer"><strong>${name}</strong><span>${blurb}</span></a>`);
+  }
+  document.getElementById("cards").innerHTML = bits.join("");
+}
+
+function run() {
+  const goal = document.getElementById("goal").value.trim();
+  const out = document.getElementById("trace");
+  if (goal.length < 8) {
+    out.textContent = "Give the agent a goal of at least a short sentence.";
+    return;
+  }
+  const projects = pick(goal);
+  const wantsRetrieval = projects.some((p) => p.id === "retrievallab") || /rag|pdf|retriev|citation/.test(goal.toLowerCase());
+  const plan = [
+    "Restate the goal and refuse anything that is not in the studio catalog.",
+    "Select at most three public projects whose tags overlap the goal.",
+    "If the goal is about documents, attach the retrieval demo contract (chunk, embed, cite).",
+    "Attach an LLMOps checklist and name AWS/GCP only.",
+    "Write the answer as a trace, not as a hidden chain of thought.",
+  ];
+  const names = projects.map((p) => p.name).join(", ");
+  const toolItems = projects.map((p) => `<li><code>${escapeHtml(p.name)}</code> — ${escapeHtml(p.blurb)} → <a href="${p.url}">${p.url}</a></li>`).join("");
+  const retrieval = wantsRetrieval
+    ? `<p><strong>retrieval_notes</strong> — contract for the public demo, not a second product.</p>
+       <ul>
+         <li>Chunk on page boundaries, embed, return top-k and a citation table.</li>
+         <li>If generation is unavailable, keep the extractive sentences. Do not fill gaps from memory.</li>
+         <li>Try it: <a href="https://huggingface.co/spaces/hharsha/retrieval-lab-demo">Retrieval Lab</a></li>
+       </ul>`
+    : "";
+  out.innerHTML = `
+    <h3>1 · Plan</h3>
+    <ol>${plan.map((s) => `<li>${s}</li>`).join("")}</ol>
+    <h3>2 · Tools</h3>
+    <p><strong>repo_catalog</strong> — read-only lookup over the six public products.</p>
+    <ul>${toolItems}</ul>
+    ${retrieval}
+    <p><strong>llmops_checklist</strong></p>
+    <ul>${CHECKLIST.map((s) => `<li>${s}</li>`).join("")}</ul>
+    <h3>3 · Answer</h3>
+    <p>For “${escapeHtml(goal.replace(/\.$/, ""))}”, start with <strong>${escapeHtml(names)}</strong>. Ship the smallest loop a reviewer can click: a catalog entry, a retrieval path with citations, and a checklist that gates side effects. The trace above is the whole agent. It ran in the browser on rules and this catalog — there is no hidden paid model on this Space.</p>
+    <p>Studio: <a href="https://agentic-systems-studio.com">agentic-systems-studio.com</a> · GitHub: <a href="https://github.com/hharsha98">hharsha98</a> · Nuremberg.</p>
+  `;
+}
+
+renderCards();
+document.getElementById("run").addEventListener("click", run);
+run();

gradio/app.py

@@ -0,0 +1,199 @@
+import gradio as gr
+
+CATALOG = [
+    {
+        "id": "agentfleet",
+        "name": "AgentFleet",
+        "blurb": "Self-hostable multi-agent operations. A goal becomes a task DAG, with evals, cost governance, and guardrails.",
+        "url": "https://github.com/hharsha98/agentfleet",
+        "tags": ["agent", "fleet", "orchestr", "dag", "eval", "guardrail", "ops"],
+    },
+    {
+        "id": "vibespace",
+        "name": "Vibespace",
+        "blurb": "Agentic development environment: terminal grid for coding agents, a kanban that dispatches them, shared memory.",
+        "url": "https://github.com/hharsha98/Vibespace",
+        "tags": ["ide", "terminal", "kanban", "claude", "cursor", "codex", "vibe"],
+    },
+    {
+        "id": "agent-os",
+        "name": "Agent OS",
+        "blurb": "Local command center for agents already on the machine. Dry-run by default, sandboxed, gated control.",
+        "url": "https://github.com/hharsha98/agent-os",
+        "tags": ["local", "os", "sandbox", "dry-run", "desktop"],
+    },
+    {
+        "id": "retrievallab",
+        "name": "RetrievalLab",
+        "blurb": "Advanced RAG made visible: hybrid search, reranking, query transforms, recall@k and MRR.",
+        "url": "https://github.com/hharsha98/retrievallab",
+        "tags": ["rag", "retriev", "search", "rerank", "citation", "pdf", "chunk"],
+    },
+    {
+        "id": "agentops",
+        "name": "AgentOps Studio",
+        "blurb": "Operations lab — orchestration, cited RAG, MCP-style tools, traces. A different product from AgentFleet.",
+        "url": "https://github.com/hharsha98/agentops-studio",
+        "tags": ["mcp", "trace", "observ", "llmops", "docker", "kubernetes"],
+    },
+    {
+        "id": "careeragent",
+        "name": "CareerAgent",
+        "blurb": "Job-hunt agents: cited CV chat, company research, tailored bullets, Kanban tracking.",
+        "url": "https://github.com/hharsha98/careeragent",
+        "tags": ["career", "cv", "job", "resume", "hiring"],
+    },
+]
+
+CHECKLIST = [
+    "Pin the model and the prompt template; log both with the trace id.",
+    "Store retrieved passage ids, not just the final answer, so citations can be audited.",
+    "Gate tool side effects. Read-only by default; writes need an explicit confirm step.",
+    "Run a small golden set (recall@k or a rubric) before changing the chunker or the embedder.",
+    "Ship on CPU first. This studio's public Hub demos stay on cpu-basic.",
+    "Cloud notes for this profile: AWS and GCP only. Do not describe Azure estates that are not owned.",
+]
+
+
+def cards_html() -> str:
+    bits = []
+    for item in CATALOG:
+        bits.append(
+            f"<a class='card' href='{item['url']}' target='_blank' rel='noreferrer'>"
+            f"<strong>{item['name']}</strong><span>{item['blurb']}</span></a>"
+        )
+    extras = [
+        ("Studio site", "https://agentic-systems-studio.com", "Product home for Agentic Systems Studio."),
+        ("Retrieval Lab Demo", "https://huggingface.co/spaces/hharsha/retrieval-lab-demo", "CPU chat-with-PDF with citations."),
+        ("Showcase dataset", "https://huggingface.co/datasets/hharsha/agentic-systems-showcase", "Project records, no invented papers."),
+        ("LinkedIn", "https://www.linkedin.com/in/hanumanthu1", "Hanumanthu Harsha Vardhan."),
+    ]
+    for name, url, blurb in extras:
+        bits.append(
+            f"<a class='card alt' href='{url}' target='_blank' rel='noreferrer'>"
+            f"<strong>{name}</strong><span>{blurb}</span></a>"
+        )
+    return "<div class='grid'>" + "".join(bits) + "</div>"
+
+
+def pick_projects(goal: str) -> list[dict]:
+    text = goal.lower()
+    scored = []
+    for item in CATALOG:
+        score = sum(1 for tag in item["tags"] if tag in text)
+        if item["name"].lower() in text or item["id"] in text:
+            score += 3
+        scored.append((score, item))
+    scored.sort(key=lambda pair: pair[0], reverse=True)
+    chosen = [item for score, item in scored if score > 0][:3]
+    if not chosen:
+        chosen = [CATALOG[0], CATALOG[3], CATALOG[4]]
+    return chosen
+
+
+def run_agent(goal: str) -> str:
+    goal = (goal or "").strip()
+    if len(goal) < 8:
+        return "Give the agent a goal of at least a short sentence. Example: *Design a cited RAG demo and the ops checks before I ship it.*"
+    projects = pick_projects(goal)
+    wants_retrieval = any(p["id"] == "retrievallab" for p in projects) or any(
+        w in goal.lower() for w in ("rag", "pdf", "retriev", "citation")
+    )
+    wants_ops = any(w in goal.lower() for w in ("ops", "deploy", "eval", "ship", "llmops", "aws", "gcp", "trace"))
+    tools = ["repo_catalog"]
+    if wants_retrieval:
+        tools.append("retrieval_notes")
+    if wants_ops or True:
+        tools.append("llmops_checklist")
+
+    plan = [
+        "Restate the goal and refuse anything that is not in the studio catalog.",
+        "Select at most three public projects whose tags overlap the goal.",
+        "If the goal is about documents, attach the retrieval demo contract (chunk, embed, cite).",
+        "Attach an LLMOps checklist and name AWS/GCP only.",
+        "Write the answer as a trace, not as a hidden chain of thought.",
+    ]
+    lines = ["## 1 · Plan"]
+    for i, step in enumerate(plan, start=1):
+        lines.append(f"{i}. {step}")
+    lines.append("\n## 2 · Tools")
+    lines.append("**repo_catalog** — read-only lookup over the six public products.")
+    for p in projects:
+        lines.append(f"- `{p['name']}` — {p['blurb']} → {p['url']}")
+    if "retrieval_notes" in tools:
+        lines.append("")
+        lines.append("**retrieval_notes** — contract for the CPU demo, not a second product.")
+        lines.append("- Chunk on page boundaries, embed with MiniLM-class vectors, return top-k and a citation table.")
+        lines.append("- If generation is unavailable, keep the extractive sentences. Do not fill gaps from memory.")
+        lines.append("- Try it: https://huggingface.co/spaces/hharsha/retrieval-lab-demo")
+    lines.append("")
+    lines.append("**llmops_checklist** — six checks, no cloud inventory beyond what the profile owns.")
+    for item in CHECKLIST:
+        lines.append(f"- {item}")
+    names = ", ".join(p["name"] for p in projects)
+    lines.append("\n## 3 · Answer")
+    lines.append(
+        f"For “{goal.rstrip('.')}”, start with **{names}**. "
+        "Ship the smallest loop that a reviewer can click: a catalog entry, a retrieval path with citations, and a checklist that gates side effects. "
+        "The trace above is the whole agent. It ran on CPU with rules and the studio catalog — there is no hidden paid model in this Space."
+    )
+    lines.append(
+        "\nStudio: https://agentic-systems-studio.com · GitHub: https://github.com/hharsha98 · Nuremberg."
+    )
+    return "\n".join(lines)
+
+
+CSS = """
+@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,560;9..144,680&family=Source+Sans+3:wght@400;600&display=swap');
+.gradio-container {background: #f3efe6 !important;}
+h1, h2, h3 {font-family: Fraunces, Georgia, serif !important;}
+.grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-top: 8px;}
+.card {
+  display: flex; flex-direction: column; gap: 6px;
+  text-decoration: none; color: #1c1915;
+  background: #fffdf8; border: 1px solid #e3d9c8; border-radius: 16px;
+  padding: 14px 14px 12px; min-height: 112px;
+  font-family: "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
+}
+.card strong {font-family: Fraunces, Georgia, serif; font-size: 1.15rem;}
+.card span {color: #5c564c; line-height: 1.35;}
+.card:hover {border-color: #1f4d3a;}
+footer {display: none !important;}
+"""
+
+EXAMPLES = [
+    "Plan a cited RAG demo I can run on a laptop, and the checks before I ship it.",
+    "I want a local-first place to supervise several coding agents. What should I open?",
+    "Compare AgentFleet and AgentOps Studio for an LLMOps walkthrough.",
+]
+
+
+def build():
+    with gr.Blocks(title="Agentic Systems Studio", css=CSS, theme=gr.themes.Soft(primary_hue="green", neutral_hue="stone")) as demo:
+        gr.Markdown(
+            """
+# Agentic Systems Studio
+Hanumanthu Harsha Vardhan · Nuremberg · agents, RAG, LLMOps
+
+A studio map and a CPU agent trace. The trace is deliberate: **plan, call tools, answer**. It uses this catalog only — it does not search GitHub at large and it does not pretend to be someone else's project.
+            """
+        )
+        with gr.Tabs():
+            with gr.Tab("Studio"):
+                gr.HTML(cards_html())
+                gr.Markdown(
+                    "Email [mechaharsh@gmail.com](mailto:mechaharsh@gmail.com) · "
+                    "[GitHub hharsha98](https://github.com/hharsha98)"
+                )
+            with gr.Tab("Agent trace"):
+                goal = gr.Textbox(label="Goal", lines=3, placeholder=EXAMPLES[0])
+                gr.Examples(examples=EXAMPLES, inputs=goal)
+                go = gr.Button("Run plan → tools → answer", variant="primary")
+                out = gr.Markdown()
+                go.click(run_agent, goal, out)
+                goal.submit(run_agent, goal, out)
+    return demo
+
+
+if __name__ == "__main__":
+    build().launch()

gradio/requirements.txt

@@ -0,0 +1 @@
+gradio==5.50.0

index.html

@@ -1,19 +1,37 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Agentic Systems Studio</title>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,560&family=Source+Sans+3:wght@400;600;700&display=swap" />
+  <link rel="stylesheet" href="./styles.css" />
+</head>
+<body>
+  <main>
+    <div class="kicker">Nuremberg · agents · RAG · LLMOps</div>
+    <h1>Agentic Systems Studio</h1>
+    <p class="lede">Hanumanthu Harsha Vardhan. A product map and a CPU-free agent trace: plan, call tools, answer. The trace only knows this studio's public projects. It is not a GitHub-wide search and it is not someone else's Space.</p>
+    <div class="row">
+      <a class="btn" href="https://agentic-systems-studio.com">Studio site</a>
+      <a class="btn ghost" href="https://github.com/hharsha98">GitHub</a>
+      <a class="btn ghost" href="https://www.linkedin.com/in/hanumanthu1">LinkedIn</a>
+      <a class="btn ghost" href="https://huggingface.co/spaces/hharsha/retrieval-lab-demo">Retrieval Lab</a>
+    </div>
+    <h2 style="margin-top:28px">Products</h2>
+    <div id="cards" class="grid"></div>
+    <section class="panel">
+      <h2>Agent trace</h2>
+      <p class="lede">Type a goal. The mock plans in the open, looks up the catalog, attaches a retrieval note when the goal is about documents, and ends with an LLMOps checklist. AWS and GCP only.</p>
+      <label for="goal">Goal</label>
+      <textarea id="goal">Plan a cited RAG demo I can run on a laptop, and the checks before I ship it.</textarea>
+      <div class="row" style="margin-top:10px">
+        <button id="run" type="button">Run plan → tools → answer</button>
+      </div>
+      <div id="trace" class="trace"></div>
+    </section>
+    <p class="note">Gradio hosting on new cpu-basic Spaces returned HTTP 402 without PRO. <code>gradio/app.py</code> is the same trace for a PRO Space. This page runs entirely in the browser. Email <a href="mailto:mechaharsh@gmail.com">mechaharsh@gmail.com</a>.</p>
+  </main>
+  <script type="module" src="./demo.js"></script>
+</body>
 </html>

styles.css

@@ -0,0 +1,72 @@
+
+:root {
+  --ink: #1c1915;
+  --muted: #5e584e;
+  --paper: #f4efe6;
+  --card: #fffdf8;
+  --line: #e4d9c8;
+  --pine: #1f4d3a;
+  --copper: #b85c38;
+}
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  color: var(--ink);
+  background:
+    radial-gradient(900px 420px at 0% -10%, #efe2cc 0%, transparent 50%),
+    var(--paper);
+  font-family: "Source Sans 3", "Segoe UI", sans-serif;
+}
+main { max-width: 980px; margin: 0 auto; padding: 36px 18px 64px; }
+.kicker { letter-spacing: .16em; text-transform: uppercase; font-size: 12px; color: var(--copper); font-weight: 700; }
+h1 { font-family: Fraunces, Georgia, serif; font-weight: 560; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; margin: 6px 0 8px; }
+h2 { font-family: Fraunces, Georgia, serif; font-size: 1.45rem; margin: 0 0 8px; }
+.lede { color: var(--muted); max-width: 46rem; font-size: 1.05rem; }
+a { color: var(--pine); }
+.panel {
+  background: var(--card);
+  border: 1px solid var(--line);
+  border-radius: 16px;
+  padding: 16px;
+  margin-top: 14px;
+}
+label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
+input[type="file"], textarea, input[type="range"] { width: 100%; }
+textarea {
+  font: inherit;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  padding: 10px 12px;
+  background: #fff;
+  min-height: 78px;
+}
+.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
+button, .btn {
+  font: inherit;
+  background: var(--pine);
+  color: #f6f1e8;
+  border: 0;
+  border-radius: 999px;
+  padding: 10px 16px;
+  cursor: pointer;
+  text-decoration: none;
+  display: inline-block;
+}
+button.ghost, .btn.ghost { background: transparent; color: var(--pine); border: 1px solid var(--pine); }
+button:disabled { opacity: .55; cursor: wait; }
+.status { color: var(--muted); font-size: .95rem; min-height: 1.2em; }
+.answer { white-space: pre-wrap; line-height: 1.45; }
+table { width: 100%; border-collapse: collapse; font-size: .92rem; }
+th, td { text-align: left; vertical-align: top; border-top: 1px solid var(--line); padding: 8px 6px; }
+.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
+.card {
+  display: flex; flex-direction: column; gap: 6px;
+  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
+  padding: 14px; text-decoration: none; color: inherit; min-height: 120px;
+}
+.card:hover { border-color: var(--pine); }
+.card strong { font-family: Fraunces, Georgia, serif; font-size: 1.15rem; }
+.card span { color: var(--muted); }
+.trace { line-height: 1.45; }
+.trace h3 { font-family: Fraunces, Georgia, serif; margin: 16px 0 6px; }
+footer.note { margin-top: 22px; color: var(--muted); font-size: .92rem; }