Modified UI + Readme Update

README.md

@@ -187,106 +187,7 @@ To add a new persona, edit `data/generate_users.py` and re-run `python -m backen
 
 ## TODO
 
-<<<<<<< Updated upstream
 From the spec (pages 10–11). Tags: **[Core]** = must do, **[Bonus]** = nice to have, **[Eval]** = for the grade.
-=======
-Roadmap derived from the project spec (pages 10–11). Items are grouped by spec
-area and marked with priority. Bracketed tags map back to the spec:
-**[Core]** = required deliverable, **[Bonus]** = stretch goal, **[Eval]** = validation.
-
-> **Note on sensing:** all camera capture and signal classification happens in
-> the **frontend** (MediaPipe JS). The backend only consumes pre-classified
-> labels (`affect`, `gesture_tag`, `gaze_bucket`).
-
-### Dataset
-
-- [ ] **[Core]** Add **heterogeneous** memory types per persona — currently only
-      autobiographical narratives exist.
-  - [ ] Add a set of synthetic social-media posts per persona (voice-matched)
-  - [ ] Add a set of synthetic past communication logs per persona
-  - [ ] Regenerate the synthesis script to produce both, then rebuild embeddings
-  - [ ] Make ingestion type-aware so the retriever knows which chunk-type a hit came from
-- [ ] **[Core]** Document the dataset schema so it is reusable by the evaluation harness.
-
-### Multimodal Sensing (frontend)
-
-- [ ] **[Core]** Detect **head-nod / sharp tilt as dissatisfaction**, distinct
-      from a generic frustrated affect read.
-  - [ ] Send a `dissatisfaction_signal` to the backend alongside the existing labels
-  - [ ] When the signal fires, branch the planner to a **"Turnaround Option"** —
-        a clarification candidate ("Did you mean X or Y?") instead of a plain answer
-- [ ] **[Bonus]** Add **vocalisation capture** (Web Speech API) and a
-      **conflict-resolution** step that compares the spoken intent against the
-      air-written intent, sending a single `resolved_intent` to the backend.
-- [ ] **[Polish]** Tighten the **thumbs-up boost** — today it only annotates the
-      prompt. The retriever should also bias affirmative-leaning candidates when
-      a thumbs-up is present.
-
-### Agentic Intent Decomposition
-
-> **Current state:** intent routing is **keyword-based**, not LLM-based.
-> The original LLM-driven router (Pydantic-validated JSON output) was
-> dropped because `gemma4:31b-cloud` consistently emitted the wrong JSON
-> shape and got truncated by `max_tokens`, triggering 3 retries + a
-> hard-fallback on every turn — adding ~30s of dead latency before the
-> generation call. The keyword router (~5 buckets matched against
-> hardcoded word lists in `intent.py`) handles the demo personas
-> reliably and adds ~0ms per turn.
->
-> **Trade-off:** the router is limited to the 5 hardcoded buckets
-> (`family`, `medical`, `hobbies`, `daily_routine`, `social`) and can't
-> distinguish `OPEN_DOMAIN` from `PERSONAL` queries. Acceptable today
-> because all current personas only have personal memories.
-
-- [ ] **[Core]** Make Personal / Contextual / Open-domain routing actually hit
-      **different retrieval pools** — today all sub-queries fall back to the same
-      vector index. Requires re-introducing some form of intent classification
-      (likely a constrained-output LLM call once `response_format=json_schema`
-      is supported on Ollama Cloud, or a tiny local classifier).
-- [ ] **[Perf]** When/if we re-add LLM intent: cache the schema prompt,
-      use a smaller routing model, and parallelise sub-query retrieval.
-
-### Retrieval
-
-- [ ] **[Bonus]** Persist **bucket priors** per user across conversations
-      (currently per-session only).
-- [ ] **[Bonus]** Extend the **latency-optimised fallback** beyond a single
-      LLM-tier switch:
-  - [ ] Return a cached canned response when end-to-end latency blows the budget
-  - [ ] Use the spec's **< 6s end-to-end** target instead of the current 3.5s threshold
-- [ ] **[Scale]** When per-user memory grows past ~100k chunks, swap the
-      torch-tensor matmul search for `hnswlib` (a ~2 MB approximate-NN library);
-      reintroduce a cross-encoder reranker once `top_k > ~30`.
-
-### Training-Free Response Generation
-
-- [ ] **[Core]** Return **multiple candidate responses** from the API so the
-      user can pick one (today the endpoint returns a single string).
-- [ ] **[Bonus]** On user selection, upsert the `(query, selected_response)` pair
-      into a small "accepted-pairs" index and consult it as a high-prior shortcut
-      on the next turn — the spec's lightweight retrieval-index update.
-
-### Evaluation & Validation
-
-- [ ] **[Eval]** **Factual Faithfulness** — NLI-based groundedness metric over
-      (retrieved evidence, generated response) pairs, reported as a hallucination
-      rate on a held-out set of partner-style queries per persona.
-- [ ] **[Eval]** **Communication Efficiency** — p50 / p95 end-to-end latency
-      across all three LLM tiers, with a pass/fail gate at the spec target of
-      **< 6s p95**.
-- [ ] **[Eval]** **Perceived Authenticity** — generate paired (persona, query,
-      response) samples and a 5-point Likert rating sheet for the live in-class eval.
-- [ ] **[Eval]** **Multimodal Alignment** — synthetic (gesture, query) scenarios
-      checked against expected response traits (e.g. thumbs-up ⇒ affirmative
-      lexicon present), reported as alignment accuracy.
-
-### Polish
-
-- [ ] **[Polish]** Move the hard-coded affect→tone and persona-override dicts
-      into a single YAML so tone-shaping can be tuned without touching code.
-- [x] **[Polish]** Delete the unused `backend/sensing/` Python modules now that
-      sensing lives entirely in the frontend. *(Done — only `labels.py` remains.)*
->>>>>>> Stashed changes
 
 Heads up: all camera/sensing stuff is in the frontend (MediaPipe JS). Backend just gets the labels (`affect`, `gesture_tag`, `gaze_bucket`). The `backend/sensing/` python modules are dead code.
 
@@ -311,6 +212,8 @@ Heads up: all camera/sensing stuff is in the frontend (MediaPipe JS). Backend ju
 
 ### Intent decomposition
 
+> Current state: routing is keyword-based, not LLM-based. The original LLM router (Pydantic-validated JSON) kept emitting the wrong shape with `gemma4:31b-cloud` and hitting the `max_tokens` truncation — 3 retries + hard fallback on every turn, ~30s of dead latency before generation. The keyword router (5 buckets matched against word lists in `intent.py`) handles the demo personas and adds ~0ms. Trade-off: stuck with the 5 hardcoded buckets (`family`, `medical`, `hobbies`, `daily_routine`, `social`) and can't tell `OPEN_DOMAIN` from `PERSONAL`. Fine for now since all personas only have personal memories. Revisit when Ollama Cloud ships `response_format=json_schema` or we add a tiny local classifier.
+
 - [ ] **[Core]** Personal / Contextual / Open-domain all hit the same FAISS index right now. Make them actually go different places — open-domain → web search (or stub), contextual → session memory
 - [ ] intent node is slow. Cache the prompt, use a tiny model for routing, parallelise the sub-queries
 
@@ -321,6 +224,7 @@ Heads up: all camera/sensing stuff is in the frontend (MediaPipe JS). Backend ju
   - drop reranker if retrieval is slow
   - return a canned response if we blow the budget entirely
   - threshold is 3.5s, spec says 6s — pick one
+- [ ] **[Scale]** past ~100k chunks per user, swap torch matmul for `hnswlib`; add a reranker if top_k grows past ~30
 
 ### Generation
 
@@ -349,7 +253,7 @@ Live per-turn scores show up in the `EvalPanel`. State:
 ### Cleanup
 
 - [ ] move the affect→tone / persona override dicts out of code into a yaml
-- [ ] delete `backend/sensing/` (dead code, sensing is in frontend)
+- [x] delete `backend/sensing/` (dead code, sensing is in frontend) — done, only `labels.py` remains
 
 ---
 

frontend/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>frontend</title>
+    <title>AAC Chatbot</title>
   </head>
   <body>
     <div id="root"></div>

frontend/src/App.css

@@ -5,9 +5,9 @@
 }
 
 body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-  background: #0f1117;
-  color: #e0e0e0;
+  font-family: var(--sans);
+  background: var(--bg);
+  color: var(--text);
 }
 
 .app-layout {
@@ -15,29 +15,29 @@ body {
   height: 100vh;
 }
 
-/* ── Sidebar ──────────────────────────────────────────────────────────── */
-
 .sidebar {
   width: 320px;
-  background: #1a1d27;
-  padding: 20px;
+  background: var(--sidebar-bg);
+  padding: 24px 20px;
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 20px;
   overflow-y: auto;
-  border-right: 1px solid #2a2d37;
+  border-right: 1px solid var(--border);
 }
 
 .app-title {
-  font-size: 20px;
-  font-weight: 600;
-  color: #fff;
+  font-family: var(--heading);
+  font-size: 24px;
+  font-weight: 500;
+  letter-spacing: -0.3px;
+  color: var(--text);
 }
 
 .sidebar-section {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 10px;
 }
 
 .toggle-label {
@@ -46,67 +46,88 @@ body {
   gap: 8px;
   cursor: pointer;
   font-size: 14px;
+  color: var(--text);
+  text-transform: none;
+  letter-spacing: normal;
 }
 
-/* ── Forms ─────────────────────────────────────────────────────────── */
+.toggle-label input[type="checkbox"] {
+  accent-color: var(--accent);
+  width: 15px;
+  height: 15px;
+  cursor: pointer;
+}
 
 .persona-selector {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 6px;
 }
 
 label {
   font-size: 12px;
-  color: #888;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
+  color: var(--text-muted);
+  font-weight: 500;
+  letter-spacing: normal;
+  text-transform: none;
 }
 
-select, input[type="text"] {
-  background: #252830;
-  color: #e0e0e0;
-  border: 1px solid #3a3d47;
-  border-radius: 6px;
-  padding: 8px 10px;
+select,
+input[type="text"] {
+  background: var(--surface);
+  color: var(--text);
+  border: 1px solid var(--border-strong);
+  border-radius: 10px;
+  padding: 9px 12px;
   font-size: 14px;
+  font-family: var(--sans);
   outline: none;
+  transition: border-color 0.15s, box-shadow 0.15s;
 }
 
-select:focus, input[type="text"]:focus {
-  border-color: #5b8def;
+select:focus,
+input[type="text"]:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-soft);
 }
 
-/* ── Webcam ────────────────────────────────────────────────────────── */
+select:hover,
+input[type="text"]:hover {
+  border-color: var(--text-faint);
+}
 
 .webcam-container {
-  border-radius: 8px;
+  border-radius: 12px;
   overflow: hidden;
-  background: #252830;
+  background: var(--surface);
+  border: 1px solid var(--border);
 }
 
-.webcam-placeholder, .webcam-error {
+.webcam-placeholder,
+.webcam-error {
   padding: 24px;
   text-align: center;
-  color: #666;
+  color: var(--text-faint);
   font-size: 13px;
 }
 
 .webcam-error {
-  color: #e55;
+  color: var(--fail);
 }
 
-/* ── Sensing status ───────────────────────────────────────────────── */
-
 .sensing-off {
-  color: #666;
+  color: var(--text-faint);
   font-size: 13px;
 }
 
 .sensing-status {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 6px;
+  padding: 10px 12px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 10px;
 }
 
 .sensing-row {
@@ -116,21 +137,19 @@ select:focus, input[type="text"]:focus {
 }
 
 .sensing-label {
-  color: #888;
+  color: var(--text-muted);
 }
 
 .sensing-value {
-  color: #ccc;
+  color: var(--text);
   font-weight: 500;
 }
 
-/* ── Shared metric primitives (latency, eval) ─────────────────────── */
-
 .section-title {
-  font-size: 12px;
-  color: #888;
+  font-size: 11px;
+  color: var(--text-muted);
   text-transform: uppercase;
-  letter-spacing: 0.5px;
+  letter-spacing: 0.6px;
   margin-bottom: 6px;
   font-weight: 600;
 }
@@ -140,47 +159,46 @@ select:focus, input[type="text"]:focus {
   justify-content: space-between;
   font-size: 13px;
   padding: 2px 0;
-  color: #aaa;
+  color: var(--text);
 }
 
 .metric-row.sub {
   padding-left: 12px;
   font-size: 11px;
-  color: #777;
+  color: var(--text-muted);
 }
 
 .metric-label {
-  color: #888;
+  color: var(--text-muted);
 }
 
 .metric-value {
-  color: #ccc;
-  font-family: monospace;
+  color: var(--text);
+  font-family: var(--mono);
+  font-size: 12px;
 }
 
 .metric-value.pass {
-  color: #4caf50;
+  color: var(--pass);
 }
 
 .metric-value.fail {
-  color: #f44336;
+  color: var(--fail);
 }
 
 .no-metrics {
-  color: #555;
+  color: var(--text-faint);
   font-size: 13px;
+  font-style: italic;
 }
 
-/* ── Main content ─────────────────────────────────────────────────── */
-
 .main-content {
   flex: 1;
   display: flex;
   flex-direction: column;
+  background: var(--bg);
 }
 
-/* ── Chat panel ───────────────────────────────────────────────────── */
-
 .chat-panel {
   display: flex;
   flex-direction: column;
@@ -188,53 +206,96 @@ select:focus, input[type="text"]:focus {
 }
 
 .chat-header {
-  padding: 16px 24px;
-  font-size: 16px;
-  font-weight: 600;
-  border-bottom: 1px solid #2a2d37;
-  background: #1a1d27;
+  padding: 18px 28px;
+  font-family: var(--heading);
+  font-size: 18px;
+  font-weight: 500;
+  letter-spacing: -0.2px;
+  color: var(--text);
+  border-bottom: 1px solid var(--border);
+  background: var(--bg);
 }
 
 .chat-messages {
   flex: 1;
   overflow-y: auto;
-  padding: 20px 24px;
+  padding: 28px 32px;
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 16px;
 }
 
 .chat-bubble {
-  max-width: 75%;
-  padding: 10px 14px;
-  border-radius: 12px;
-  font-size: 14px;
-  line-height: 1.5;
+  max-width: 72%;
+  padding: 12px 16px;
+  border-radius: 16px;
+  font-size: 15px;
+  line-height: 1.55;
 }
 
 .chat-bubble.partner {
   align-self: flex-end;
-  background: #2a4a8a;
-  border-bottom-right-radius: 4px;
+  background: var(--accent);
+  color: #ffffff;
+  border-bottom-right-radius: 6px;
+}
+
+.chat-bubble.partner .chat-role {
+  color: rgba(255, 255, 255, 0.85);
 }
 
 .chat-bubble.aac_user {
   align-self: flex-start;
-  background: #252830;
-  border-bottom-left-radius: 4px;
+  background: var(--surface);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-bottom-left-radius: 6px;
 }
 
 .chat-bubble.loading {
-  opacity: 0.6;
+  background: var(--surface);
+  border: 1px solid var(--border);
+}
+
+.chat-bubble.loading p {
+  display: inline-block;
+  background: linear-gradient(
+    90deg,
+    var(--text-muted) 0%,
+    var(--accent) 45%,
+    var(--accent) 55%,
+    var(--text-muted) 100%
+  );
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  animation: shimmer 1.8s ease-in-out infinite;
+  font-weight: 500;
+}
+
+@keyframes shimmer {
+  0%   { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chat-bubble.loading p {
+    animation: none;
+    background: none;
+    -webkit-text-fill-color: var(--text-muted);
+    color: var(--text-muted);
+  }
 }
 
 .chat-role {
   display: block;
   font-size: 11px;
-  color: #888;
+  color: var(--text-muted);
   margin-bottom: 4px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
+  font-weight: 600;
 }
 
 .chat-bubble p {
@@ -243,53 +304,57 @@ select:focus, input[type="text"]:focus {
 
 .chat-input-row {
   display: flex;
-  gap: 8px;
-  padding: 16px 24px;
-  border-top: 1px solid #2a2d37;
-  background: #1a1d27;
+  gap: 10px;
+  padding: 18px 28px;
+  border-top: 1px solid var(--border);
+  background: var(--bg);
 }
 
 .chat-input-row input {
   flex: 1;
+  padding: 11px 14px;
+  font-size: 15px;
 }
 
 .chat-input-row button {
-  background: #5b8def;
-  color: #fff;
+  background: var(--accent);
+  color: #ffffff;
   border: none;
-  border-radius: 6px;
-  padding: 8px 20px;
+  border-radius: 10px;
+  padding: 10px 22px;
   font-size: 14px;
+  font-weight: 500;
+  font-family: var(--sans);
   cursor: pointer;
+  transition: background 0.15s;
 }
 
 .chat-input-row button:disabled {
-  opacity: 0.4;
+  opacity: 0.45;
   cursor: not-allowed;
 }
 
 .chat-input-row button:hover:not(:disabled) {
-  background: #4a7cde;
+  background: var(--accent-hover);
 }
 
 .error {
-  color: #e55;
+  color: var(--fail);
   font-size: 13px;
 }
 
-/* ── Eval panel ──────────────────────────────────────────────────── */
-
 .eval-panel {
-  margin-top: 8px;
-  border-top: 1px solid #3a3d47;
-  padding-top: 6px;
+  margin-top: 10px;
+  border-top: 1px solid var(--border);
+  padding-top: 8px;
 }
 
 .eval-toggle {
   background: none;
   border: none;
-  color: #888;
+  color: var(--text-muted);
   font-size: 12px;
+  font-family: var(--sans);
   cursor: pointer;
   padding: 2px 0;
   display: flex;
@@ -298,31 +363,32 @@ select:focus, input[type="text"]:focus {
 }
 
 .eval-toggle:hover {
-  color: #bbb;
+  color: var(--text);
 }
 
 .slo-badge {
   font-size: 10px;
-  padding: 1px 6px;
-  border-radius: 3px;
+  padding: 2px 7px;
+  border-radius: 999px;
   font-weight: 600;
+  letter-spacing: 0.3px;
 }
 
 .slo-badge.pass {
-  background: #1b3a1b;
-  color: #4caf50;
+  background: var(--pass-bg);
+  color: var(--pass);
 }
 
 .slo-badge.fail {
-  background: #3a1b1b;
-  color: #f44336;
+  background: var(--fail-bg);
+  color: var(--fail);
 }
 
 .eval-details {
   display: flex;
   flex-direction: column;
-  gap: 10px;
-  margin-top: 8px;
+  gap: 12px;
+  margin-top: 10px;
 }
 
 .eval-section {
@@ -333,25 +399,23 @@ select:focus, input[type="text"]:focus {
 
 .eval-na {
   font-size: 11px;
-  color: #666;
+  color: var(--text-faint);
   font-style: italic;
 }
 
 .score-bar {
   height: 4px;
-  background: #2a2d37;
-  border-radius: 2px;
+  background: var(--border);
+  border-radius: 999px;
   overflow: hidden;
 }
 
 .score-bar-fill {
   height: 100%;
-  border-radius: 2px;
+  border-radius: 999px;
   transition: width 0.3s ease;
 }
 
-/* ── Star rating ─────────────────────────────────────────────────── */
-
 .star-rating {
   display: flex;
   align-items: center;
@@ -363,22 +427,40 @@ select:focus, input[type="text"]:focus {
   border: none;
   font-size: 18px;
   cursor: pointer;
-  color: #3a3d47;
+  color: var(--border-strong);
   padding: 0;
   line-height: 1;
   transition: color 0.15s;
 }
 
 .star-rating .star.active {
-  color: #ff9800;
+  color: var(--accent);
 }
 
 .star-rating .star:hover {
-  color: #ffb74d;
+  color: var(--accent-hover);
 }
 
 .star-label {
   font-size: 11px;
-  color: #888;
+  color: var(--text-muted);
   margin-left: 6px;
 }
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--border-strong);
+  border-radius: 999px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--text-faint);
+}

frontend/src/components/EvalPanel.tsx

@@ -77,7 +77,7 @@ export function EvalPanel({ evalScores }: Props) {
                 <ScoreBar value={evalScores.groundedness} />
                 <div className="metric-row">
                   <span>Hallucination Rate</span>
-                  <span className={`metric-value ${evalScores.hallucination_rate > 0.2 ? "fail" : "pass"}`}>
+                  <span className="metric-value">
                     {(evalScores.hallucination_rate * 100).toFixed(0)}%
                   </span>
                 </div>

frontend/src/index.css

@@ -1,111 +1,49 @@
 :root {
-  --text: #6b6375;
-  --text-h: #08060d;
-  --bg: #fff;
-  --border: #e5e4e7;
+  --bg: #faf9f5;
+  --surface: #ffffff;
+  --sidebar-bg: #f0eee6;
+  --text: #3d3929;
+  --text-muted: #6b6658;
+  --text-faint: #97918a;
+  --border: #e8e6dc;
+  --border-strong: #d4d0c4;
+  --accent: #c96442;
+  --accent-hover: #b05638;
+  --accent-soft: rgba(201, 100, 66, 0.15);
+  --pass: #2d7a4f;
+  --pass-bg: #e4f0e8;
+  --fail: #b4332a;
+  --fail-bg: #f5e3e0;
   --code-bg: #f4f3ec;
-  --accent: #aa3bff;
-  --accent-bg: rgba(170, 59, 255, 0.1);
-  --accent-border: rgba(170, 59, 255, 0.5);
-  --social-bg: rgba(244, 243, 236, 0.5);
-  --shadow:
-    rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
+  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04);
 
-  --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
-  --heading: system-ui, 'Segoe UI', Roboto, sans-serif;
-  --mono: ui-monospace, Consolas, monospace;
+  --sans: "Styrene B", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --heading: "Copernicus", "Tiempos Text", "Iowan Old Style", Georgia, serif;
+  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
 
-  font: 18px/145% var(--sans);
-  letter-spacing: 0.18px;
-  color-scheme: light dark;
+  color-scheme: light;
   color: var(--text);
   background: var(--bg);
+  font-family: var(--sans);
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-
-  @media (max-width: 1024px) {
-    font-size: 16px;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --text: #9ca3af;
-    --text-h: #f3f4f6;
-    --bg: #16171d;
-    --border: #2e303a;
-    --code-bg: #1f2028;
-    --accent: #c084fc;
-    --accent-bg: rgba(192, 132, 252, 0.15);
-    --accent-border: rgba(192, 132, 252, 0.5);
-    --social-bg: rgba(47, 48, 58, 0.5);
-    --shadow:
-      rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
-  }
-
-  #social .button-icon {
-    filter: invert(1) brightness(2);
-  }
-}
-
-#root {
-  width: 1126px;
-  max-width: 100%;
-  margin: 0 auto;
-  text-align: center;
-  border-inline: 1px solid var(--border);
-  min-height: 100svh;
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
 }
 
 body {
   margin: 0;
 }
 
-h1,
-h2 {
-  font-family: var(--heading);
-  font-weight: 500;
-  color: var(--text-h);
-}
-
-h1 {
-  font-size: 56px;
-  letter-spacing: -1.68px;
-  margin: 32px 0;
-  @media (max-width: 1024px) {
-    font-size: 36px;
-    margin: 20px 0;
-  }
-}
-h2 {
-  font-size: 24px;
-  line-height: 118%;
-  letter-spacing: -0.24px;
-  margin: 0 0 8px;
-  @media (max-width: 1024px) {
-    font-size: 20px;
-  }
-}
 p {
   margin: 0;
 }
 
-code,
-.counter {
+code {
   font-family: var(--mono);
-  display: inline-flex;
+  font-size: 13px;
+  padding: 2px 6px;
   border-radius: 4px;
-  color: var(--text-h);
-}
-
-code {
-  font-size: 15px;
-  line-height: 135%;
-  padding: 4px 8px;
   background: var(--code-bg);
+  color: var(--text);
 }