revert: restore Twilight Atelier (drop Risograph Folio)

app/documents/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { api } from "@/lib/api";
+import { api, ApiError } from "@/lib/api";
 import type { DocumentMeta, ReindexResponse } from "@/lib/types";
 import {
   useMutation,
@@ -54,70 +54,58 @@ export default function DocumentsPage() {
 
   return (
     <div className="flex-1 overflow-y-auto">
-      <div className="container-app py-10 space-y-10">
-        {/* Editorial masthead */}
-        <header className="animate-fade-in">
-          <div className="flex items-baseline justify-between mb-3">
-            <span className="folio-chrome">Folio II · Library</span>
-            <span className="folio-chrome">
-              {data ? `${data.count.toLocaleString()} entries` : "Loading…"}
-            </span>
+      <div className="container-app py-10 space-y-8">
+        {/* Hero strip */}
+        <header className="flex items-end justify-between flex-wrap gap-4 animate-fade-in">
+          <div>
+            <h1 className="text-display-lg text-ink">
+              Documents <span className="serif-italic text-amber">corpus.</span>
+            </h1>
+            <p className="text-body text-ink-50 mt-2">
+              {data ? (
+                <>
+                  <span className="font-mono text-ink">
+                    {data.count.toLocaleString()}
+                  </span>{" "}
+                  indexed · persistent at{" "}
+                  <span className="font-mono">/data/docs/</span>
+                </>
+              ) : (
+                "Loading…"
+              )}
+            </p>
           </div>
-          <h1
-            className="text-ink"
-            style={{
-              fontSize: "clamp(56px, 9vw, 110px)",
-              lineHeight: 0.92,
-              fontWeight: 300,
-              letterSpacing: "-0.04em",
-              fontFamily: "var(--font-fraunces)",
-            }}
-          >
-            The <span className="italic-display text-rust">corpus.</span>
-          </h1>
-          <div className="hairline--double mt-6 animate-rule" />
-          <div className="grid md:grid-cols-[1fr_auto] gap-6 items-end mt-6 animate-stagger-2">
-            <p
-              className="text-ink max-w-[60ch]"
-              style={{
-                fontFamily: "var(--font-fraunces)",
-                fontSize: "20px",
-                lineHeight: 1.45,
-                fontWeight: 300,
-              }}
+          <div className="flex items-center gap-3">
+            <button
+              onClick={() => reindex.mutate()}
+              disabled={reindex.isPending}
+              className="btn-secondary"
             >
-              The standing collection of Etiya BSS documents, persisted at{" "}
-              <span className="font-mono text-ink-70">/data/docs/</span>. Use
-              the search to query the catalog, or contribute a new entry.
-            </p>
-            <div className="flex items-center gap-3">
-              <button
-                onClick={() => reindex.mutate()}
-                disabled={reindex.isPending}
-                className="btn-secondary"
-              >
-                {reindex.isPending ? "Re-indexing…" : "Re-index"}
-              </button>
-              <button
-                onClick={() => setShowAdd((v) => !v)}
-                className="btn-rust"
-              >
-                {showAdd ? "Close" : "Add entry"}
-              </button>
-            </div>
+              {reindex.isPending ? "Re-indexing…" : "Re-index now"}
+            </button>
+            <button
+              onClick={() => setShowAdd((v) => !v)}
+              className="btn-primary"
+            >
+              {showAdd ? "Close" : "Add document"}
+            </button>
           </div>
         </header>
 
         {/* Reindex banner */}
         {reindexResult && (
           <div
-            className="card-rust flex items-center justify-between gap-3 animate-fade-up"
+            className="rounded-md p-4 flex items-center justify-between gap-3 animate-fade-up"
+            style={{
+              background: "rgba(93, 214, 168, 0.08)",
+              boxShadow: "0 0 0 1px rgba(93, 214, 168, 0.28)",
+            }}
           >
-            <div>
-              <span className="folio-chrome--rust folio-chrome mr-3">
-                Re-index complete
+            <div className="text-caption">
+              <span className="text-status-ok font-mono uppercase tracking-[0.12em] mr-3">
+                re-index ok
               </span>
-              <span className="font-mono text-caption text-ink-70">
+              <span className="font-mono text-ink-70">
                 mode={reindexResult.mode ?? "none"} · added=
                 {reindexResult.added} · removed={reindexResult.removed} ·
                 indexed={reindexResult.indexed_count} ·{" "}
@@ -126,67 +114,62 @@ export default function DocumentsPage() {
             </div>
             <button
               onClick={() => setReindexResult(null)}
-              className="folio-chrome hover:text-rust"
+              className="text-caption text-ink-50 hover:text-ink"
             >
-              Dismiss
+              dismiss
             </button>
           </div>
         )}
 
-        {/* Add entry form */}
+        {/* Add document panel */}
         {showAdd && (
           <AddDocumentForm
-            onCreated={() => qc.invalidateQueries({ queryKey: ["documents"] })}
+            onCreated={() => {
+              qc.invalidateQueries({ queryKey: ["documents"] });
+            }}
           />
         )}
 
-        {/* Search */}
-        <section className="animate-fade-up-slow">
-          <div className="flex items-baseline justify-between mb-3">
-            <span className="folio-chrome">Index</span>
-            <span className="folio-chrome">
+        {/* Search + list */}
+        <section className="card animate-fade-up-slow">
+          <div className="flex items-center justify-between gap-4 mb-5 flex-wrap">
+            <div className="relative flex-1 min-w-[260px] max-w-[480px]">
+              <svg
+                className="absolute left-3.5 top-1/2 -translate-y-1/2 text-ink-50"
+                width="14"
+                height="14"
+                viewBox="0 0 14 14"
+                fill="none"
+              >
+                <circle cx="6" cy="6" r="4" stroke="currentColor" strokeWidth="1.4" />
+                <path d="m9.5 9.5 3 3" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
+              </svg>
+              <input
+                type="text"
+                placeholder="Search by name or doc_id…"
+                value={filter}
+                onChange={(e) => {
+                  setFilter(e.target.value);
+                  setPage(0);
+                }}
+                className="input-glass !pl-10"
+              />
+            </div>
+            <span className="text-caption text-ink-50 font-mono shrink-0 uppercase tracking-[0.12em]">
               {filtered.length.toLocaleString()} match
               {filtered.length === 1 ? "" : "es"}
             </span>
           </div>
 
-          <div className="relative max-w-[640px] mb-6">
-            <svg
-              className="absolute left-4 top-1/2 -translate-y-1/2 text-ink-50"
-              width="14"
-              height="14"
-              viewBox="0 0 14 14"
-              fill="none"
-            >
-              <circle cx="6" cy="6" r="4" stroke="currentColor" strokeWidth="1.4" />
-              <path
-                d="m9.5 9.5 3 3"
-                stroke="currentColor"
-                strokeWidth="1.4"
-                strokeLinecap="round"
-              />
-            </svg>
-            <input
-              type="text"
-              placeholder="Query the catalog…"
-              value={filter}
-              onChange={(e) => {
-                setFilter(e.target.value);
-                setPage(0);
-              }}
-              className="input-print !pl-11"
+          {error && (
+            <div
+              className="p-4 rounded-md mb-4"
               style={{
-                fontFamily: "var(--font-fraunces)",
-                fontSize: "17px",
-                fontWeight: 400,
+                background: "rgba(255, 122, 122, 0.06)",
+                boxShadow: "0 0 0 1px rgba(255, 122, 122, 0.28)",
               }}
-            />
-          </div>
-
-          {error && (
-            <div className="card-rust mb-4">
-              <div className="folio-chrome--rust folio-chrome mb-1">Errata</div>
-              <p className="text-body-strong text-ink">
+            >
+              <p className="text-status-err text-body-strong">
                 Failed to load documents
               </p>
               <p className="text-caption text-ink-70 mt-1">
@@ -196,59 +179,54 @@ export default function DocumentsPage() {
           )}
 
           {isLoading && (
-            <div className="text-ink-50 italic-display py-12 text-center" style={{ fontSize: "22px" }}>
-              Loading the catalog…
+            <div className="text-ink-50 text-body py-12 text-center text-shimmer">
+              Loading documents…
             </div>
           )}
 
           {visible.length > 0 && (
-            <ul className="border-t-2 border-ink/30">
-              {visible.map((d, i) => {
-                const folio = String(page * PAGE_SIZE + i + 1).padStart(4, "0");
-                return (
-                  <li
-                    key={d.doc_id}
-                    className="grid grid-cols-[80px_1fr_auto] gap-4 sm:gap-6 py-4 border-b border-ink/12 group"
-                  >
-                    <div className="folio-chrome--ink folio-chrome pt-0.5">
-                      № {folio}
+            <ul className="divide-y divide-glass-border">
+              {visible.map((d) => (
+                <li
+                  key={d.doc_id}
+                  className="flex items-center justify-between gap-4 py-3.5 group"
+                >
+                  <div className="min-w-0 flex-1">
+                    <div className="text-body-strong text-ink truncate">
+                      {d.name}
                     </div>
-                    <div className="min-w-0">
-                      <div
-                        className="italic-display text-ink truncate group-hover:text-rust transition-colors"
-                        style={{ fontSize: "19px", lineHeight: 1.3 }}
-                      >
-                        {d.name}
-                      </div>
-                      <div className="folio-chrome mt-1 truncate">
-                        {d.doc_id} · {d.length_chars.toLocaleString()} chars ·{" "}
+                    <div className="flex items-center gap-2.5 mt-0.5 text-micro text-ink-50 font-mono uppercase tracking-[0.10em]">
+                      <span className="truncate">{d.doc_id}</span>
+                      <Sep />
+                      <span>{d.length_chars.toLocaleString()} chars</span>
+                      <Sep />
+                      <span>
                         {new Date(d.created_at * 1000).toLocaleDateString()}
-                      </div>
+                      </span>
                     </div>
-                    <button
-                      onClick={() => setConfirmDelete(d)}
-                      className="opacity-0 group-hover:opacity-100 transition-opacity folio-chrome hover:text-rust"
-                    >
-                      Withdraw
-                    </button>
-                  </li>
-                );
-              })}
+                  </div>
+                  <button
+                    onClick={() => setConfirmDelete(d)}
+                    className="opacity-0 group-hover:opacity-100 transition-opacity text-caption text-status-err hover:bg-status-err-glow px-2.5 py-1 rounded-md"
+                  >
+                    Delete
+                  </button>
+                </li>
+              ))}
             </ul>
           )}
 
           {totalPages > 1 && (
-            <div className="flex items-center justify-between mt-6">
+            <div className="flex items-center justify-between mt-5">
               <button
                 onClick={() => setPage((p) => Math.max(0, p - 1))}
                 disabled={page === 0}
                 className="btn-ghost disabled:opacity-30"
               >
-                ← Previous
+                ← Prev
               </button>
-              <span className="folio-chrome">
-                Folio {String(page + 1).padStart(2, "0")} ·{" "}
-                {String(totalPages).padStart(2, "0")}
+              <span className="text-caption text-ink-50 font-mono uppercase tracking-[0.12em]">
+                page {page + 1} of {totalPages}
               </span>
               <button
                 onClick={() => setPage((p) => Math.min(totalPages - 1, p + 1))}
@@ -278,7 +256,10 @@ function AddDocumentForm({ onCreated }: { onCreated: () => void }) {
   const [name, setName] = useState("");
   const [text, setText] = useState("");
   const [doReindex, setDoReindex] = useState(true);
-  const [feedback, setFeedback] = useState<{ kind: "ok" | "err"; msg: string } | null>(null);
+  const [feedback, setFeedback] = useState<{
+    kind: "ok" | "err";
+    msg: string;
+  } | null>(null);
 
   const create = useMutation({
     mutationFn: async (payload: { text: string; name?: string }) => {
@@ -289,7 +270,7 @@ function AddDocumentForm({ onCreated }: { onCreated: () => void }) {
     onSuccess: (created) => {
       setFeedback({
         kind: "ok",
-        msg: `Filed: ${created.name} (${created.doc_id.slice(0, 12)}…)`,
+        msg: `Added: ${created.name} (${created.doc_id.slice(0, 12)}…)`,
       });
       setText("");
       setName("");
@@ -303,23 +284,11 @@ function AddDocumentForm({ onCreated }: { onCreated: () => void }) {
 
   return (
     <section className="card animate-fade-up">
-      <div className="flex items-baseline justify-between mb-2">
-        <span className="folio-chrome">Submission · New entry</span>
-      </div>
-      <h2
-        className="text-ink"
-        style={{
-          fontFamily: "var(--font-fraunces)",
-          fontSize: "32px",
-          fontWeight: 500,
-          letterSpacing: "-0.018em",
-        }}
-      >
-        File a new <span className="italic-display text-rust">entry.</span>
+      <h2 className="text-display-sm text-ink">
+        Add <span className="serif-italic text-amber">document</span>
       </h2>
-      <p className="text-caption text-ink-70 mt-1.5 max-w-[60ch]">
-        Documents persist immediately; re-indexing syncs them into the
-        retrieval atelier.
+      <p className="text-caption text-ink-50 mt-1">
+        Documents persist immediately; re-indexing syncs them into RAG retrieval.
       </p>
 
       <form
@@ -328,25 +297,25 @@ function AddDocumentForm({ onCreated }: { onCreated: () => void }) {
           if (!text.trim()) return;
           create.mutate({ text: text.trim(), name: name.trim() || undefined });
         }}
-        className="mt-6 space-y-4"
+        className="mt-5 space-y-4"
       >
         <div>
-          <label className="folio-chrome--ink folio-chrome block mb-1.5">
-            Title <span className="text-ink-50 normal-case tracking-normal">(optional)</span>
+          <label className="text-caption-strong text-ink block mb-1.5">
+            Name <span className="text-ink-50 font-normal">(optional)</span>
           </label>
           <input
             type="text"
             value={name}
             onChange={(e) => setName(e.target.value)}
             placeholder="e.g. Customer Onboarding Flow v2"
-            className="input-print"
+            className="input-glass"
             disabled={create.isPending}
           />
         </div>
 
         <div>
-          <label className="folio-chrome--ink folio-chrome block mb-1.5">
-            Body
+          <label className="text-caption-strong text-ink block mb-1.5">
+            Content
           </label>
           <textarea
             value={text}
@@ -354,41 +323,40 @@ function AddDocumentForm({ onCreated }: { onCreated: () => void }) {
             required
             rows={8}
             placeholder="Paste markdown or plain text…"
-            className="input-print resize-y"
+            className="input-glass resize-y"
             disabled={create.isPending}
-            style={{ fontFamily: "var(--font-mono)", fontSize: "13px" }}
           />
-          <p className="folio-chrome mt-1">
+          <p className="text-micro text-ink-50 mt-1 font-mono uppercase tracking-[0.10em]">
             {text.length.toLocaleString()} chars
           </p>
         </div>
 
-        <label className="flex items-center gap-2.5 cursor-pointer">
+        <label className="flex items-center gap-2.5 text-caption text-ink cursor-pointer">
           <input
             type="checkbox"
             checked={doReindex}
             onChange={(e) => setDoReindex(e.target.checked)}
-            className="w-4 h-4 accent-rust"
+            className="w-4 h-4 accent-amber"
           />
-          <span className="text-caption text-ink">
-            Auto re-index after filing
+          <span>Auto re-index after add</span>
+          <span className="text-ink-50 text-micro font-mono">
+            (~350ms)
           </span>
-          <span className="folio-chrome">~350ms</span>
         </label>
 
         <div className="flex items-center gap-4 pt-2">
           <button
             type="submit"
             disabled={create.isPending || !text.trim()}
-            className="btn-rust"
+            className="btn-primary"
           >
-            {create.isPending ? "Filing…" : "File entry"}
+            {create.isPending ? "Saving…" : "Save document"}
           </button>
           {feedback && (
             <span
               className={clsx(
                 "text-caption",
-                feedback.kind === "ok" ? "text-status-ok" : "text-rust"
+                feedback.kind === "ok" ? "text-status-ok" : "text-status-err"
               )}
             >
               {feedback.msg}
@@ -413,29 +381,23 @@ function ConfirmDelete({
 }) {
   return (
     <div
-      className="fixed inset-0 z-50 flex items-center justify-center p-6 animate-fade-in"
-      style={{ background: "rgba(25,23,19,0.32)" }}
+      className="fixed inset-0 z-50 bg-canvas-deep/70 backdrop-blur-sm flex items-center justify-center p-6 animate-fade-in"
       onClick={onCancel}
     >
       <div
         onClick={(e) => e.stopPropagation()}
-        className="card max-w-[460px] w-full animate-fade-up"
-        style={{ background: "var(--paper)" }}
+        className="glass-strong rounded-lg max-w-[460px] w-full p-7 animate-fade-up"
       >
-        <div className="folio-chrome--rust folio-chrome mb-2">
-          Permanent withdrawal
+        <h3 className="text-display-sm">Delete document?</h3>
+        <p className="text-caption text-ink-50 mt-1">This is permanent.</p>
+        <div className="mt-4 p-3 rounded-md bg-glass">
+          <div className="text-body-strong text-ink truncate">{doc.name}</div>
+          <div className="text-micro text-ink-50 font-mono mt-0.5 truncate">
+            {doc.doc_id}
+          </div>
         </div>
-        <h3
-          className="italic-display text-ink"
-          style={{ fontSize: "28px", lineHeight: 1.2 }}
-        >
-          Withdraw entry?
-        </h3>
-        <div className="hairline mt-3 mb-3" />
-        <p className="text-body-strong text-ink truncate">{doc.name}</p>
-        <p className="folio-chrome mt-1 truncate">{doc.doc_id}</p>
-        <p className="text-caption text-ink-70 mt-4">
-          Re-indexing will remove it from retrieval.
+        <p className="text-caption text-ink-50 mt-4">
+          Re-indexing will remove it from /ask_smart retrieval.
         </p>
         <div className="mt-6 flex items-center justify-end gap-3">
           <button onClick={onCancel} className="btn-secondary">
@@ -444,12 +406,16 @@ function ConfirmDelete({
           <button
             onClick={onConfirm}
             disabled={loading}
-            className="btn-rust"
+            className="btn-danger"
           >
-            {loading ? "Withdrawing…" : "Withdraw"}
+            {loading ? "Deleting…" : "Delete"}
           </button>
         </div>
       </div>
     </div>
   );
 }
+
+function Sep() {
+  return <span className="text-ink-30">·</span>;
+}

app/globals.css

@@ -3,176 +3,151 @@
 @tailwind utilities;
 
 /* ───────────────────────────────────────────────────────────────
-   Risograph Folio — base
+   Twilight Atelier — base canvas
    ─────────────────────────────────────────────────────────────── */
 @layer base {
   :root {
-    color-scheme: light;
-    --paper: #f4ede0;
-    --paper-deep: #ebe2d0;
-    --ink: #191713;
-    --rust: #c84d2c;
+    color-scheme: dark;
   }
 
   html,
   body {
-    background: var(--paper);
-    color: var(--ink);
-    font-family: var(--font-plex), ui-sans-serif, system-ui, sans-serif;
+    background: #06070a;
+    color: #f5f3ec;
+    font-family: var(--font-manrope), system-ui, -apple-system, sans-serif;
     font-size: 15px;
-    line-height: 1.65;
+    line-height: 1.6;
     font-weight: 400;
-    font-feature-settings: "ss01", "ss03", "calt";
+    font-feature-settings: "ss01", "cv11", "calt";
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-rendering: optimizeLegibility;
   }
 
   body {
-    /* Layered paper:
-       1. base parchment color
-       2. halftone dot pattern (very low opacity)
-       3. warm sun-bleached gradient at top-right
-       4. inked-edge vignette toward bottom-left
-       5. fine paper grain (svg noise) */
+    /* Layered: deep canvas + warm aurora + subtle grain */
     background:
-      radial-gradient(900px 600px at 92% 0%, rgba(200, 77, 44, 0.07), transparent 60%),
-      radial-gradient(800px 700px at 0% 100%, rgba(25, 23, 19, 0.05), transparent 60%),
-      var(--paper);
+      radial-gradient(1100px 700px at 78% -10%, rgba(255, 181, 69, 0.12), transparent 65%),
+      radial-gradient(900px 800px at 8% 110%, rgba(98, 70, 255, 0.10), transparent 60%),
+      radial-gradient(1400px 900px at 50% 50%, rgba(20, 24, 40, 0.6), transparent 70%),
+      #06070a;
     background-attachment: fixed;
     min-height: 100vh;
     overflow-x: hidden;
-    position: relative;
   }
 
-  /* Halftone dot field (decorative; below all content) */
+  /* Subtle grain overlay (doesn't capture pointer events) */
   body::before {
     content: "";
     position: fixed;
     inset: 0;
     pointer-events: none;
     z-index: 0;
-    background-image: radial-gradient(
-      circle at center,
-      rgba(25, 23, 19, 0.08) 0.7px,
-      transparent 1.4px
-    );
-    background-size: 6px 6px;
-    background-position: 0 0;
-    opacity: 0.55;
-    mask-image: radial-gradient(
-      ellipse 100% 70% at 50% 30%,
-      transparent 0%,
-      black 70%
-    );
-    -webkit-mask-image: radial-gradient(
-      ellipse 100% 70% at 50% 30%,
-      transparent 0%,
-      black 70%
-    );
-  }
-
-  /* Paper grain — very subtle */
-  body::after {
-    content: "";
-    position: fixed;
-    inset: 0;
-    pointer-events: none;
-    z-index: 0;
-    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch' seed='3'/><feColorMatrix values='0 0 0 0 0.10, 0 0 0 0 0.09, 0 0 0 0 0.08, 0 0 0 0.10 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
-    opacity: 0.5;
-    mix-blend-mode: multiply;
+    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1, 0 0 0 0 1, 0 0 0 0 1, 0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
+    opacity: 0.65;
+    mix-blend-mode: overlay;
   }
 
   ::selection {
-    background: var(--rust);
-    color: var(--paper);
+    background: rgba(255, 181, 69, 0.32);
+    color: #fff8e7;
   }
 
-  /* Hand-set scrollbar (warm, paper-tinted) */
+  /* Custom scrollbar — barely there */
   ::-webkit-scrollbar {
-    width: 12px;
-    height: 12px;
+    width: 10px;
+    height: 10px;
   }
   ::-webkit-scrollbar-thumb {
-    background-color: rgba(25, 23, 19, 0.18);
+    background-color: rgba(255, 255, 255, 0.08);
     border-radius: 9999px;
-    border: 3px solid var(--paper);
+    border: 2px solid transparent;
     background-clip: content-box;
   }
   ::-webkit-scrollbar-thumb:hover {
-    background-color: rgba(25, 23, 19, 0.30);
+    background-color: rgba(255, 255, 255, 0.16);
   }
   ::-webkit-scrollbar-track {
     background: transparent;
   }
 
+  /* Focus ring — luminous amber */
   :focus-visible {
-    outline: 2px solid var(--rust);
+    outline: 2px solid rgba(255, 181, 69, 0.75);
+    outline-offset: 2px;
+    border-radius: 4px;
+  }
+  button:focus-visible,
+  a:focus-visible,
+  input:focus-visible,
+  textarea:focus-visible {
     outline-offset: 3px;
   }
 
-  /* Headlines — Fraunces by default for h1/h2/h3 */
+  /* Default kerning for headlines */
   h1,
   h2,
   h3,
   h4 {
-    font-family: var(--font-fraunces), ui-serif, Georgia, serif;
-    font-weight: 500;
     letter-spacing: -0.02em;
-    color: var(--ink);
-  }
-
-  /* Italic links: slip into italic on hover */
-  a {
-    transition: color 0.2s ease, font-style 0s;
   }
 }
 
 /* ───────────────────────────────────────────────────────────────
-   Components
+   Component grammars
    ─────────────────────────────────────────────────────────────── */
 @layer components {
-  /* ── Italic display moments ─────────────────────────────────── */
-  .italic-display {
-    font-family: var(--font-fraunces), ui-serif, Georgia, serif;
-    font-style: italic;
-    font-weight: 400;
-    font-variation-settings: "SOFT" 30, "WONK" 1;
+  /* ── Glass surfaces ─────────────────────────────────────────── */
+  .glass {
+    background: rgba(255, 255, 255, 0.04);
+    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
+      0 0 0 1px rgba(255, 255, 255, 0.08),
+      0 16px 40px -16px rgba(0, 0, 0, 0.6);
+    backdrop-filter: blur(16px) saturate(140%);
+    -webkit-backdrop-filter: blur(16px) saturate(140%);
   }
 
-  /* ── Buttons — flat printed ─────────────────────────────────── */
-  .btn-primary {
-    @apply inline-flex items-center justify-center
-           px-5 py-2.5 rounded-pill
-           text-body-strong text-paper
-           bg-ink
-           transition-all duration-200 ease-atelier
-           active:scale-[0.97]
-           disabled:opacity-30 disabled:cursor-not-allowed
-           hover:bg-rust;
+  .glass-strong {
+    background: rgba(255, 255, 255, 0.06);
+    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset,
+      0 0 0 1px rgba(255, 255, 255, 0.14),
+      0 28px 80px -24px rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(20px) saturate(160%);
+    -webkit-backdrop-filter: blur(20px) saturate(160%);
+  }
+
+  .glass-elev {
+    background: linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0.06) 0%,
+      rgba(255, 255, 255, 0.02) 100%
+    );
+    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset,
+      0 0 0 1px rgba(255, 255, 255, 0.10),
+      0 32px 80px -24px rgba(0, 0, 0, 0.7);
   }
 
-  .btn-rust {
+  /* ── Buttons ────────────────────────────────────────────────── */
+  .btn-primary {
     @apply inline-flex items-center justify-center
            px-5 py-2.5 rounded-pill
-           text-body-strong text-paper
-           bg-rust
+           text-body-strong text-canvas
+           bg-amber
            transition-all duration-200 ease-atelier
            active:scale-[0.97]
-           hover:bg-rust-deep
-           disabled:opacity-30 disabled:cursor-not-allowed;
+           disabled:opacity-40 disabled:cursor-not-allowed disabled:active:scale-100
+           hover:bg-amber-soft hover:shadow-amber;
   }
 
   .btn-secondary {
     @apply inline-flex items-center justify-center
            px-5 py-2.5 rounded-pill
            text-body text-ink
-           bg-transparent
+           bg-glass
            transition-all duration-200 ease-atelier
            active:scale-[0.97]
-           hover:bg-ink-08;
-    box-shadow: 0 0 0 1px rgba(25, 23, 19, 0.20);
+           hover:bg-glass-stronger;
+    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10);
   }
 
   .btn-ghost {
@@ -180,96 +155,50 @@
            px-3 py-1.5 rounded-md
            text-caption text-ink-70
            transition-colors duration-200
-           hover:text-ink hover:bg-ink-08;
+           hover:text-ink hover:bg-glass;
   }
 
-  /* ── Inputs — flat printed input fields ────────────────────── */
-  .input-print {
-    @apply w-full bg-paper-deep text-ink
+  .btn-danger {
+    @apply inline-flex items-center justify-center
+           px-5 py-2.5 rounded-pill
+           text-body-strong text-status-err
+           transition-colors duration-200
+           hover:bg-status-err-glow;
+    box-shadow: 0 0 0 1px rgba(255, 122, 122, 0.4);
+  }
+
+  /* ── Inputs ─────────────────────────────────────────────────── */
+  .input-glass {
+    @apply w-full bg-glass text-ink
            rounded-md px-4 py-3
            text-body
            outline-none
            transition-all duration-200;
-    box-shadow: 0 0 0 1px rgba(25, 23, 19, 0.18),
-      inset 0 1px 0 rgba(25, 23, 19, 0.04);
+    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10);
   }
-  .input-print:focus {
-    box-shadow: 0 0 0 2px var(--rust),
-      inset 0 1px 0 rgba(25, 23, 19, 0.04);
+  .input-glass:focus {
+    background: rgba(255, 255, 255, 0.07);
+    box-shadow: 0 0 0 1px rgba(255, 181, 69, 0.55),
+      0 0 24px -6px rgba(255, 181, 69, 0.35);
   }
-  .input-print::placeholder {
-    color: rgba(25, 23, 19, 0.36);
+  .input-glass::placeholder {
+    color: rgba(245, 243, 236, 0.36);
   }
 
-  /* ── Cards — flat printed paper, hairline ruled ────────────── */
+  /* ── Cards ──────────────────────────────────────────────────── */
   .card {
-    @apply rounded-md p-6;
-    background: var(--paper-deep);
-    box-shadow: 0 0 0 1px rgba(25, 23, 19, 0.12),
-      inset 0 1px 0 rgba(255, 255, 255, 0.45);
+    @apply rounded-lg p-6 glass;
   }
 
-  .card-rust {
-    @apply rounded-md p-6;
-    background: linear-gradient(
-      180deg,
-      rgba(245, 216, 200, 0.6) 0%,
-      var(--paper-deep) 100%
-    );
-    box-shadow: 0 0 0 1px rgba(200, 77, 44, 0.35),
-      inset 0 1px 0 rgba(255, 255, 255, 0.45);
-  }
-
-  /* ── Folio chrome (the magazine masthead vibe) ─────────────── */
-  .folio-chrome {
-    @apply font-mono uppercase tracking-[0.22em] text-ink-50;
-    font-size: 10px;
-    line-height: 1.4;
-    font-weight: 600;
-  }
-  .folio-chrome--ink {
-    @apply text-ink;
-  }
-  .folio-chrome--rust {
-    @apply text-rust;
-  }
-
-  /* Hairline rule — animates in (use animate-rule) */
-  .hairline {
-    height: 1px;
-    background: rgba(25, 23, 19, 0.16);
-  }
-  .hairline--rust {
-    background: var(--rust);
-  }
-  .hairline--double {
-    height: 4px;
-    background: linear-gradient(
-      to bottom,
-      rgba(25, 23, 19, 0.22),
-      rgba(25, 23, 19, 0.22) 1px,
-      transparent 1px,
-      transparent 3px,
-      rgba(25, 23, 19, 0.22) 3px,
-      rgba(25, 23, 19, 0.22) 4px
-    );
-  }
-
-  /* Drop-cap for assistant answers (the editorial feature) */
-  .drop-cap::first-letter {
-    font-family: var(--font-fraunces), ui-serif, Georgia, serif;
+  /* ── Editorial italic moments ───────────────────────────────── */
+  .serif-italic {
+    font-family: var(--font-instrument), ui-serif, Georgia, serif;
     font-style: italic;
     font-weight: 400;
-    font-variation-settings: "SOFT" 30, "WONK" 1;
-    color: var(--rust);
-    float: left;
-    font-size: 4.4em;
-    line-height: 0.85;
-    margin: 0.08em 0.12em -0.05em -0.04em;
-    padding: 0;
+    letter-spacing: -0.01em;
   }
 
-  /* Containers */
+  /* ── Containers ─────────────────────────────────────────────── */
   .container-app {
     @apply max-w-[1480px] mx-auto px-6 md:px-10;
   }
@@ -280,35 +209,49 @@
     @apply max-w-[760px] mx-auto px-6 md:px-10;
   }
 
-  /* Italic-on-hover (editorial micro-interaction) */
-  .hover-italic {
-    transition: color 0.2s ease, font-style 0.001s;
-  }
-  .hover-italic:hover {
-    font-style: italic;
-    color: var(--rust);
+  /* ── Chat-specific helpers ──────────────────────────────────── */
+  .chat-bubble-user {
+    @apply rounded-2xl rounded-tr-sm px-5 py-3 text-body text-ink;
+    background: linear-gradient(
+      135deg,
+      rgba(255, 181, 69, 0.16) 0%,
+      rgba(255, 181, 69, 0.08) 100%
+    );
+    box-shadow: 0 0 0 1px rgba(255, 181, 69, 0.22),
+      0 8px 24px -8px rgba(255, 181, 69, 0.18);
   }
 
-  /* Underline-from-left link */
-  .link-rule {
-    position: relative;
-    color: inherit;
+  .chat-bubble-assistant {
+    @apply rounded-2xl rounded-tl-sm px-5 py-4 text-body text-ink;
+    background: linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0.05) 0%,
+      rgba(255, 255, 255, 0.025) 100%
+    );
+    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10),
+      0 16px 48px -16px rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
   }
-  .link-rule::after {
-    content: "";
-    position: absolute;
-    bottom: -2px;
-    left: 0;
-    width: 100%;
+
+  /* Hairline divider — for sectioning inside cards */
+  .hairline {
     height: 1px;
-    background: currentColor;
-    transform: scaleX(0);
-    transform-origin: right;
-    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
+    background: linear-gradient(
+      90deg,
+      transparent,
+      rgba(255, 255, 255, 0.12),
+      transparent
+    );
   }
-  .link-rule:hover::after {
-    transform-origin: left;
-    transform: scaleX(1);
+  .hairline-vert {
+    width: 1px;
+    background: linear-gradient(
+      180deg,
+      transparent,
+      rgba(255, 255, 255, 0.10),
+      transparent
+    );
   }
 }
 
@@ -316,54 +259,65 @@
    Utilities
    ─────────────────────────────────────────────────────────────── */
 @layer utilities {
-  .text-balance {
-    text-wrap: balance;
+  .text-shimmer {
+    background: linear-gradient(
+      110deg,
+      rgba(245, 243, 236, 0.4) 30%,
+      rgba(245, 243, 236, 1) 50%,
+      rgba(245, 243, 236, 0.4) 70%
+    );
+    background-size: 200% 100%;
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    animation: shimmerBg 2.4s linear infinite;
   }
-  .text-pretty {
-    text-wrap: pretty;
+
+  @keyframes shimmerBg {
+    0% {
+      background-position: 200% 0;
+    }
+    100% {
+      background-position: -200% 0;
+    }
   }
 
-  /* Halftone backdrop — for hero/feature panels */
-  .halftone-bg {
-    background-image: radial-gradient(
-      circle at center,
-      rgba(25, 23, 19, 0.18) 0.8px,
-      transparent 1.6px
+  /* Aurora gradient orbs (used decoratively behind hero) */
+  .aurora-amber {
+    position: absolute;
+    border-radius: 9999px;
+    background: radial-gradient(
+      circle,
+      rgba(255, 181, 69, 0.32) 0%,
+      rgba(255, 181, 69, 0) 65%
     );
-    background-size: 5px 5px;
+    filter: blur(80px);
+    pointer-events: none;
   }
-  .halftone-rust {
-    background-image: radial-gradient(
-      circle at center,
-      rgba(200, 77, 44, 0.4) 0.8px,
-      transparent 1.6px
+  .aurora-violet {
+    position: absolute;
+    border-radius: 9999px;
+    background: radial-gradient(
+      circle,
+      rgba(120, 90, 240, 0.22) 0%,
+      rgba(120, 90, 240, 0) 65%
     );
-    background-size: 5px 5px;
-  }
-
-  /* Register marks (corner crosshairs) */
-  .register-corners {
-    position: relative;
+    filter: blur(90px);
+    pointer-events: none;
   }
-  .register-corners::before,
-  .register-corners::after {
-    content: "✚";
+  .aurora-teal {
     position: absolute;
-    font-family: var(--font-mono);
-    font-size: 11px;
-    color: rgba(25, 23, 19, 0.30);
-    line-height: 1;
-  }
-  .register-corners::before {
-    top: 8px;
-    left: 8px;
-  }
-  .register-corners::after {
-    bottom: 8px;
-    right: 8px;
+    border-radius: 9999px;
+    background: radial-gradient(
+      circle,
+      rgba(80, 200, 200, 0.18) 0%,
+      rgba(80, 200, 200, 0) 65%
+    );
+    filter: blur(80px);
+    pointer-events: none;
   }
 
-  /* No-scrollbar */
+  /* No-scrollbar utility */
   .scrollbar-none {
     scrollbar-width: none;
   }
@@ -371,8 +325,7 @@
     display: none;
   }
 
-  /* Riso-style "ink offset" effect — used for emphasis text */
-  .ink-offset {
-    text-shadow: 1px 0 0 rgba(200, 77, 44, 0.5);
+  .text-balance {
+    text-wrap: balance;
   }
 }

app/layout.tsx

@@ -1,35 +1,35 @@
 import type { Metadata } from "next";
-import { Fraunces, IBM_Plex_Sans, JetBrains_Mono } from "next/font/google";
+import { Instrument_Serif, Manrope, JetBrains_Mono } from "next/font/google";
 import "./globals.css";
 import { Providers } from "./providers";
 import { AppShell } from "@/components/chat/AppShell";
 
-const fraunces = Fraunces({
+const manrope = Manrope({
   subsets: ["latin"],
-  variable: "--font-fraunces",
+  variable: "--font-manrope",
   display: "swap",
-  style: ["normal", "italic"],
-  axes: ["SOFT", "WONK", "opsz"],
+  weight: ["300", "400", "500", "600", "700"],
 });
 
-const plex = IBM_Plex_Sans({
+const instrument = Instrument_Serif({
   subsets: ["latin"],
-  variable: "--font-plex",
+  variable: "--font-instrument",
   display: "swap",
-  weight: ["300", "400", "500", "600", "700"],
+  weight: ["400"],
+  style: ["normal", "italic"],
 });
 
 const mono = JetBrains_Mono({
   subsets: ["latin"],
   variable: "--font-mono",
   display: "swap",
-  weight: ["400", "500", "600"],
+  weight: ["400", "500"],
 });
 
 export const metadata: Metadata = {
-  title: "doc·to·lora — Etiya BSS Folio",
+  title: "doc-to-lora · Etiya BSS Atelier",
   description:
-    "A printed-publication interrogation surface for the Etiya BSS corpus, built on the doc-to-lora hypernetwork.",
+    "An atelier for stateless retrieval-augmented inference over Etiya BSS documents — built on the doc-to-lora hypernetwork.",
 };
 
 export default function RootLayout({
@@ -40,7 +40,7 @@ export default function RootLayout({
   return (
     <html
       lang="en"
-      className={`${fraunces.variable} ${plex.variable} ${mono.variable}`}
+      className={`${manrope.variable} ${instrument.variable} ${mono.variable}`}
     >
       <body className="min-h-screen">
         <Providers>

app/system/page.tsx

@@ -6,10 +6,6 @@ import { useMutation, useQuery } from "@tanstack/react-query";
 import { useEffect, useState } from "react";
 import clsx from "clsx";
 
-/**
- * Colophon. The publication's printer's marks: typesetters, presses,
- * paper, ink. Here: model, hardware, latencies, eval suite, indexer.
- */
 export default function SystemPage() {
   const { data, error, refetch, isFetching } = useQuery({
     queryKey: ["health"],
@@ -30,195 +26,125 @@ export default function SystemPage() {
 
   return (
     <div className="flex-1 overflow-y-auto">
-      <div className="container-app py-10 space-y-12">
-        {/* Editorial masthead */}
-        <header className="animate-fade-in">
-          <div className="flex items-baseline justify-between mb-3">
-            <span className="folio-chrome">Folio III · Colophon</span>
-            <button
-              onClick={() => refetch()}
-              disabled={isFetching}
-              className="folio-chrome hover:text-rust transition-colors"
-            >
-              {isFetching ? "Refreshing…" : "Refresh ↻"}
-            </button>
+      <div className="container-app py-10 space-y-10">
+        {/* Header */}
+        <header className="flex items-end justify-between flex-wrap gap-4 animate-fade-in">
+          <div>
+            <h1 className="text-display-lg text-ink">
+              System <span className="serif-italic text-amber">readout.</span>
+            </h1>
+            <p className="text-body text-ink-50 mt-2">
+              Live telemetry — auto-refresh every 30s.
+            </p>
           </div>
-          <h1
-            className="text-ink"
-            style={{
-              fontSize: "clamp(56px, 9vw, 110px)",
-              lineHeight: 0.92,
-              fontWeight: 300,
-              letterSpacing: "-0.04em",
-              fontFamily: "var(--font-fraunces)",
-            }}
+          <button
+            onClick={() => refetch()}
+            disabled={isFetching}
+            className="btn-secondary"
           >
-            The <span className="italic-display text-rust">colophon.</span>
-          </h1>
-          <div className="hairline--double mt-6 animate-rule" />
-          <p
-            className="text-ink mt-6 max-w-[64ch] animate-stagger-1"
-            style={{
-              fontFamily: "var(--font-fraunces)",
-              fontSize: "20px",
-              lineHeight: 1.45,
-              fontWeight: 300,
-            }}
-          >
-            A printer's mark for the atelier — the presses, the type, the paper.
-            Live readouts auto-refresh every thirty seconds.
-          </p>
+            {isFetching ? "Refreshing…" : "Refresh now"}
+          </button>
         </header>
 
         {error && (
-          <div className="card-rust animate-fade-in">
-            <div className="folio-chrome--rust folio-chrome mb-1">Errata</div>
-            <p className="text-body-strong text-ink">Failed to read /health</p>
+          <div
+            className="p-4 rounded-md"
+            style={{
+              background: "rgba(255, 122, 122, 0.06)",
+              boxShadow: "0 0 0 1px rgba(255, 122, 122, 0.28)",
+            }}
+          >
+            <p className="text-status-err text-body-strong">
+              Failed to read /health
+            </p>
             <p className="text-caption text-ink-70 mt-1">
               {error instanceof Error ? error.message : String(error)}
             </p>
           </div>
         )}
 
-        {/* Hero metric panel — magazine pull-quote of the GPU */}
-        <section className="animate-fade-up">
-          <div
-            className="rounded-lg p-8 md:p-12 register-corners halftone-bg"
-            style={{
-              background:
-                "linear-gradient(180deg, var(--paper-deep) 0%, var(--paper) 100%)",
-              boxShadow: "0 0 0 1.5px rgba(25,23,19,0.30), 0 1px 0 rgba(255,255,255,0.5) inset",
-            }}
-          >
-            <div className="folio-chrome mb-3">Press status</div>
-            <div className="flex items-baseline gap-4 flex-wrap">
-              <div
-                className="italic-display text-ink"
-                style={{ fontSize: "clamp(64px, 10vw, 120px)", lineHeight: 0.95, fontWeight: 300 }}
-              >
-                {data === undefined ? "—" : data.model_loaded ? "Running" : "Loading"}
-              </div>
-              <span
-                className={clsx(
-                  "inline-block w-3 h-3 rounded-full mb-3 ml-2 transition-colors",
-                  data === undefined
-                    ? "bg-ink-30"
-                    : data.model_loaded
-                    ? "bg-status-ok animate-ink-pulse"
-                    : "bg-status-warn animate-ink-pulse"
-                )}
-              />
-            </div>
-
-            <div className="hairline mt-8 mb-6" />
-
-            <div className="grid sm:grid-cols-3 gap-x-8 gap-y-6">
-              <Pull
-                label="Documents indexed"
-                value={data?.doc_count?.toLocaleString() ?? "—"}
-              />
-              <Pull
-                label="GPU memory"
-                value={data ? data.gpu_memory_gb.toFixed(2) : "—"}
-                unit="GB"
-              />
-              <Pull label="Hardware" value="A100" unit="80GB" />
-            </div>
-          </div>
+        {/* Hero metrics */}
+        <section className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4 animate-fade-up">
+          <BigMetric
+            label="Stage"
+            value={
+              data === undefined
+                ? "—"
+                : data.model_loaded
+                ? "Running"
+                : "Loading"
+            }
+            tone={
+              data === undefined ? "neutral" : data.model_loaded ? "ok" : "warn"
+            }
+          />
+          <BigMetric
+            label="Documents indexed"
+            value={data?.doc_count?.toLocaleString() ?? "—"}
+          />
+          <BigMetric
+            label="GPU memory"
+            value={data ? data.gpu_memory_gb.toFixed(2) : "—"}
+            unit="GB"
+          />
+          <BigMetric label="Hardware" value="A100" unit="80GB" />
         </section>
 
         {/* Latencies + corpus */}
-        <section className="grid lg:grid-cols-2 gap-6 animate-fade-up-slow">
+        <section className="grid lg:grid-cols-2 gap-4 animate-fade-up-slow">
           <Latencies />
           <CorpusBreakdown data={data} />
         </section>
 
-        {/* Eval — pull-quote panel with halftone */}
-        <section className="animate-fade-up">
-          <div
-            className="rounded-lg p-8 md:p-10 relative overflow-hidden"
-            style={{
-              background: "var(--ink)",
-              color: "var(--paper)",
-            }}
-          >
-            <div
-              aria-hidden
-              className="absolute inset-0 opacity-25"
-              style={{
-                backgroundImage:
-                  "radial-gradient(circle at center, rgba(244, 237, 224, 0.5) 0.8px, transparent 1.6px)",
-                backgroundSize: "5px 5px",
-              }}
-            />
-            <div className="relative">
-              <div className="folio-chrome" style={{ color: "rgba(244,237,224,0.5)" }}>
-                Issue review · Eval suite · 100 questions
-              </div>
-              <h2
-                className="mt-3"
-                style={{
-                  fontFamily: "var(--font-fraunces)",
-                  fontSize: "44px",
-                  lineHeight: 1.05,
-                  fontWeight: 400,
-                }}
-              >
-                The <span className="italic-display" style={{ color: "var(--rust)" }}>numbers.</span>
-              </h2>
-              <div className="hairline--double mt-6 mb-8" style={{ filter: "invert(1)", opacity: 0.6 }} />
-              <div className="grid grid-cols-2 md:grid-cols-4 gap-x-8 gap-y-6">
-                <Bench label="Hallucination defense" value="87.5" unit="%" />
-                <Bench label="Concept queries" value="84" unit="%" />
-                <Bench label="Cross-domain" value="55" unit="%" />
-                <Bench label="Fact recall" value="59" unit="%" />
-              </div>
-              <p
-                className="mt-8 max-w-[60ch]"
-                style={{
-                  fontFamily: "var(--font-fraunces)",
-                  fontSize: "16px",
-                  lineHeight: 1.55,
-                  fontWeight: 300,
-                  color: "rgba(244,237,224,0.75)",
-                }}
-              >
-                Pure numerical signals — anchor, dense, rerank — with zero
-                hardcoded reference text. The eval set lives at{" "}
-                <span className="font-mono" style={{ color: "var(--paper)" }}>
-                  eval/eval_set.jsonl
-                </span>{" "}
-                and is replayed on demand.
-              </p>
+        {/* Eval suite — featured panel */}
+        <section
+          className="relative rounded-xl p-8 md:p-10 overflow-hidden"
+          style={{
+            background:
+              "linear-gradient(135deg, rgba(255,181,69,0.08) 0%, rgba(255,255,255,0.02) 100%)",
+            boxShadow:
+              "0 0 0 1px rgba(255,181,69,0.20), 0 32px 80px -32px rgba(0,0,0,0.6)",
+          }}
+        >
+          <div className="aurora-amber" style={{ width: 480, height: 480, top: -200, right: -200 }} />
+          <div className="relative">
+            <div className="text-micro uppercase tracking-[0.18em] text-amber font-mono">
+              Eval suite
+            </div>
+            <h2 className="text-display-md text-ink mt-3">
+              100-question <span className="serif-italic">benchmark.</span>
+            </h2>
+            <div className="mt-8 grid grid-cols-2 md:grid-cols-4 gap-6">
+              <BenchMetric label="Hallucination defense" value="87.5" unit="%" />
+              <BenchMetric label="Concept queries" value="84" unit="%" />
+              <BenchMetric label="Cross-domain" value="55" unit="%" />
+              <BenchMetric label="Fact recall" value="59" unit="%" />
             </div>
+            <p className="text-caption text-ink-70 mt-8 max-w-[640px]">
+              Pure numerical signals (anchor / dense / rerank) with zero hardcoded
+              reference text. The eval set lives at{" "}
+              <span className="font-mono text-ink">eval/eval_set.jsonl</span>{" "}
+              and can be replayed any time.
+            </p>
           </div>
         </section>
 
         {/* Index management */}
         <section>
           <div className="mb-5">
-            <span className="folio-chrome">Press · Index management</span>
-            <h2
-              className="text-ink mt-2"
-              style={{
-                fontFamily: "var(--font-fraunces)",
-                fontSize: "36px",
-                fontWeight: 500,
-                letterSpacing: "-0.02em",
-              }}
-            >
-              Run the <span className="italic-display text-rust">indexer.</span>
+            <h2 className="text-display-md text-ink">
+              Index <span className="serif-italic text-amber">management.</span>
             </h2>
-            <p className="text-caption text-ink-70 mt-1.5 max-w-[64ch]">
-              The retrieval index needs syncing after documents change.
-              Incremental embeds only deltas; full rebuild re-anchors topics.
+            <p className="text-caption text-ink-50 mt-1.5 max-w-[680px]">
+              The RAG index needs to be synchronized after document changes.
+              Incremental is the default — it only embeds new/removed docs.
             </p>
           </div>
 
-          <div className="grid md:grid-cols-2 gap-6">
+          <div className="grid md:grid-cols-2 gap-4">
             <ReindexCard
               title="Incremental"
-              description="Sync new and removed entries only."
+              description="Sync new and removed docs only."
               cost="≈ $0.0001"
               latency="~350 ms"
               loading={
@@ -227,13 +153,13 @@ export default function SystemPage() {
               onClick={() =>
                 reindex.mutate({ force_full: false, rebuild_anchors: false })
               }
-              accent
             />
             <ReindexCard
               title="Full rebuild"
-              description="Re-embed all entries + rebuild K-means topic anchors."
+              description="Re-embed all docs + rebuild K-means anchors."
               cost="≈ $0.16"
               latency="~30 s"
+              danger
               loading={reindex.isPending && !!reindex.variables?.force_full}
               onClick={() =>
                 reindex.mutate({ force_full: true, rebuild_anchors: true })
@@ -242,22 +168,25 @@ export default function SystemPage() {
           </div>
 
           {reindex.data && (
-            <div className="mt-6 card animate-fade-up">
-              <div className="folio-chrome--ink folio-chrome mb-2">
-                Re-index complete
+            <div className="mt-4 card animate-fade-up">
+              <div className="text-micro uppercase tracking-[0.15em] text-status-ok font-mono mb-2">
+                re-index complete
               </div>
-              <pre
-                className="font-mono text-caption text-ink whitespace-pre-wrap break-all"
-                style={{ fontSize: "12px", lineHeight: 1.6 }}
-              >
+              <pre className="font-mono text-caption text-ink whitespace-pre-wrap break-all">
                 {JSON.stringify(reindex.data, null, 2)}
               </pre>
             </div>
           )}
           {reindex.error && (
-            <div className="mt-6 card-rust">
-              <div className="folio-chrome--rust folio-chrome mb-1">
-                Re-index failed
+            <div
+              className="mt-4 p-4 rounded-md"
+              style={{
+                background: "rgba(255, 122, 122, 0.06)",
+                boxShadow: "0 0 0 1px rgba(255, 122, 122, 0.28)",
+              }}
+            >
+              <div className="text-micro uppercase tracking-[0.15em] text-status-err font-mono mb-1">
+                re-index failed
               </div>
               <p className="text-caption text-ink">
                 {reindex.error instanceof Error
@@ -272,40 +201,44 @@ export default function SystemPage() {
   );
 }
 
-function Pull({
+function BigMetric({
   label,
   value,
   unit,
+  tone = "neutral",
 }: {
   label: string;
   value: string | number;
   unit?: string;
+  tone?: "ok" | "warn" | "err" | "neutral";
 }) {
+  const dotCls = {
+    ok: "bg-status-ok shadow-[0_0_8px_rgba(93,214,168,0.7)]",
+    warn: "bg-amber shadow-[0_0_8px_rgba(255,181,69,0.7)]",
+    err: "bg-status-err",
+    neutral: "bg-ink-30",
+  }[tone];
   return (
-    <div>
-      <div className="folio-chrome mb-1.5">{label}</div>
-      <div
-        className="text-ink"
-        style={{
-          fontFamily: "var(--font-fraunces)",
-          fontSize: "44px",
-          lineHeight: 1,
-          fontWeight: 400,
-          letterSpacing: "-0.02em",
-        }}
-      >
+    <div className="card">
+      <div className="flex items-center gap-2 text-micro uppercase tracking-[0.14em] text-ink-50 font-mono">
+        <span
+          className={clsx(
+            "inline-block w-1.5 h-1.5 rounded-full",
+            dotCls,
+            tone !== "neutral" && "animate-pulse-soft"
+          )}
+        />
+        {label}
+      </div>
+      <div className="text-display-md font-mono text-ink mt-2">
         {value}
-        {unit && (
-          <span className="text-rust ml-1.5" style={{ fontSize: "22px", fontWeight: 400 }}>
-            {unit}
-          </span>
-        )}
+        {unit && <span className="text-ink-50 ml-1.5 text-lead">{unit}</span>}
       </div>
     </div>
   );
 }
 
-function Bench({
+function BenchMetric({
   label,
   value,
   unit,
@@ -316,28 +249,12 @@ function Bench({
 }) {
   return (
     <div>
-      <div
-        className="folio-chrome"
-        style={{ color: "rgba(244,237,224,0.5)" }}
-      >
+      <div className="text-micro uppercase tracking-[0.14em] text-ink-50 font-mono">
         {label}
       </div>
-      <div
-        className="mt-1.5"
-        style={{
-          fontFamily: "var(--font-fraunces)",
-          fontSize: "56px",
-          lineHeight: 1,
-          fontWeight: 300,
-          letterSpacing: "-0.025em",
-        }}
-      >
+      <div className="text-display-lg font-mono text-ink mt-2">
         {value}
-        {unit && (
-          <span style={{ color: "var(--rust)", fontSize: "26px", marginLeft: "2px" }}>
-            {unit}
-          </span>
-        )}
+        {unit && <span className="text-amber ml-1 text-display-sm">{unit}</span>}
       </div>
     </div>
   );
@@ -367,23 +284,11 @@ function Latencies() {
 
   return (
     <div className="card">
-      <div className="flex items-baseline justify-between mb-3">
-        <span className="folio-chrome">Press timings</span>
-      </div>
-      <h3
-        className="text-ink mb-4"
-        style={{
-          fontFamily: "var(--font-fraunces)",
-          fontSize: "24px",
-          fontWeight: 500,
-        }}
-      >
-        Round-trip <span className="italic-display text-rust">latencies.</span>
-      </h3>
-      <div className="space-y-2.5">
+      <h3 className="text-body-strong text-ink mb-4">Round-trip latencies</h3>
+      <div className="space-y-2.5 text-caption">
         <Row label="browser → ping" value={pingMs ? `${pingMs.toFixed(0)} ms` : "—"} />
         <Row label="ask_smart (reject)" value="≈ 400 ms" />
-        <Row label="ask_smart (inference)" value="≈ 1.3 – 2.0 s" />
+        <Row label="ask_smart (inference)" value="≈ 1.3-2.0 s" />
         <Row label="reindex (incremental)" value="≈ 350 ms" />
         <Row label="reindex (full)" value="≈ 30 s" />
       </div>
@@ -394,20 +299,8 @@ function Latencies() {
 function CorpusBreakdown({ data }: { data: HealthResponse | undefined }) {
   return (
     <div className="card">
-      <div className="flex items-baseline justify-between mb-3">
-        <span className="folio-chrome">Plates &amp; type</span>
-      </div>
-      <h3
-        className="text-ink mb-4"
-        style={{
-          fontFamily: "var(--font-fraunces)",
-          fontSize: "24px",
-          fontWeight: 500,
-        }}
-      >
-        Corpus &amp; <span className="italic-display text-rust">index.</span>
-      </h3>
-      <div className="space-y-2.5">
+      <h3 className="text-body-strong text-ink mb-4">Corpus &amp; index</h3>
+      <div className="space-y-2.5 text-caption">
         <Row
           label="documents on disk"
           value={data ? data.doc_count.toLocaleString() : "—"}
@@ -428,7 +321,7 @@ function ReindexCard({
   cost,
   latency,
   loading,
-  accent,
+  danger,
   onClick,
 }: {
   title: string;
@@ -436,32 +329,30 @@ function ReindexCard({
   cost: string;
   latency: string;
   loading: boolean;
-  accent?: boolean;
+  danger?: boolean;
   onClick: () => void;
 }) {
   return (
-    <div className={accent ? "card-rust flex flex-col gap-4" : "card flex flex-col gap-4"}>
+    <div className="card flex flex-col gap-4">
       <div>
-        <div className="flex items-baseline justify-between">
-          <span className="folio-chrome--ink folio-chrome">{latency}</span>
-          <span className="folio-chrome">openai cost {cost}</span>
+        <div className="flex items-center justify-between">
+          <h3 className="text-display-sm text-ink">{title}</h3>
+          <span className="text-micro font-mono uppercase tracking-[0.12em] text-amber">
+            {latency}
+          </span>
         </div>
-        <h3
-          className="text-ink mt-2"
-          style={{
-            fontFamily: "var(--font-fraunces)",
-            fontSize: "26px",
-            fontWeight: 500,
-          }}
-        >
-          {title}<span className="italic-display text-rust">.</span>
-        </h3>
-        <p className="text-caption text-ink-70 mt-1.5">{description}</p>
+        <p className="text-caption text-ink-70 mt-1">{description}</p>
+        <p className="text-micro text-ink-50 mt-2 font-mono uppercase tracking-[0.10em]">
+          openai cost {cost}
+        </p>
       </div>
       <button
         onClick={onClick}
         disabled={loading}
-        className={accent ? "btn-rust self-start" : "btn-primary self-start"}
+        className={clsx(
+          danger ? "btn-secondary" : "btn-primary",
+          "self-start"
+        )}
       >
         {loading ? "Running…" : `Run ${title.toLowerCase()}`}
       </button>
@@ -471,9 +362,11 @@ function ReindexCard({
 
 function Row({ label, value }: { label: string; value: string }) {
   return (
-    <div className="grid grid-cols-[1fr_auto] gap-4 items-baseline border-b border-ink/10 pb-2 last:border-0 last:pb-0">
-      <span className="folio-chrome">{label}</span>
-      <span className="font-mono text-caption text-ink truncate">{value}</span>
+    <div className="flex items-center justify-between gap-4">
+      <span className="text-ink-50 font-mono uppercase tracking-[0.10em] text-micro">
+        {label}
+      </span>
+      <span className="font-mono text-ink text-caption truncate">{value}</span>
     </div>
   );
 }

components/chat/AppShell.tsx

@@ -4,10 +4,12 @@ import { Sidebar } from "./Sidebar";
 import { TopBar } from "./TopBar";
 import { Aurora } from "./Aurora";
 import { useChatStore } from "@/lib/chatStore";
+import clsx from "clsx";
 import { usePathname } from "next/navigation";
 import { useEffect } from "react";
 
 export function AppShell({ children }: { children: React.ReactNode }) {
+  const sidebarOpen = useChatStore((s) => s.sidebarOpen);
   const pathname = usePathname();
   const conversations = useChatStore((s) => s.conversations);
   const activeId = useChatStore((s) => s.activeId);
@@ -23,12 +25,21 @@ export function AppShell({ children }: { children: React.ReactNode }) {
 
   return (
     <div className="relative min-h-screen flex flex-col">
+      {/* Atmospheric background — fixed, behind everything */}
       <Aurora />
+
       <TopBar />
 
-      <div className="relative z-10 flex-1 flex">
+      <div className="relative z-10 flex-1 flex overflow-hidden">
         <Sidebar />
-        <main className="flex-1 flex flex-col min-w-0">{children}</main>
+        <main
+          className={clsx(
+            "flex-1 flex flex-col min-w-0 transition-[margin] duration-300 ease-atelier",
+            sidebarOpen ? "md:ml-0" : "md:ml-0"
+          )}
+        >
+          {children}
+        </main>
       </div>
     </div>
   );

components/chat/Aurora.tsx

@@ -1,34 +1,44 @@
 "use client";
 
 /**
- * Halftone Folio backdrop.
- * A printer's plate: corner register marks + bleed lines + halftone field.
- * Pure decoration. Pinned behind the page.
+ * Atmospheric backdrop — three slow-drifting aurora orbs.
+ * Pure CSS, no JS animation. Pinned behind everything via fixed inset.
  */
 export function Aurora() {
   return (
-    <>
-      {/* Page-edge register marks (printer's bleed lines) */}
-      <div
-        aria-hidden
-        className="fixed inset-0 z-0 pointer-events-none hidden md:block"
-      >
-        <Cross className="top-3 left-3" />
-        <Cross className="top-3 right-3" />
-        <Cross className="bottom-3 left-3" />
-        <Cross className="bottom-3 right-3" />
-      </div>
-    </>
-  );
-}
-
-function Cross({ className }: { className?: string }) {
-  return (
-    <span
-      className={`absolute w-[14px] h-[14px] text-ink-30 font-mono leading-none ${className ?? ""}`}
-      style={{ fontSize: "13px" }}
+    <div
+      aria-hidden
+      className="fixed inset-0 z-0 overflow-hidden pointer-events-none"
     >
-      ✚
-    </span>
+      <div
+        className="aurora-amber animate-aurora-1"
+        style={{
+          width: "70vmax",
+          height: "70vmax",
+          top: "-25vmax",
+          right: "-20vmax",
+        }}
+      />
+      <div
+        className="aurora-violet animate-aurora-2"
+        style={{
+          width: "60vmax",
+          height: "60vmax",
+          bottom: "-20vmax",
+          left: "-15vmax",
+        }}
+      />
+      <div
+        className="aurora-teal animate-aurora-1"
+        style={{
+          width: "40vmax",
+          height: "40vmax",
+          top: "40vh",
+          left: "30vw",
+          opacity: 0.6,
+          animationDelay: "-8s",
+        }}
+      />
+    </div>
   );
 }

components/chat/Composer.tsx

@@ -4,10 +4,6 @@ import { useEffect, useRef, useState } from "react";
 import clsx from "clsx";
 import { useChatStore } from "@/lib/chatStore";
 
-/**
- * Composer — the printer's submission box.
- * Heavy hairline frame, italic placeholder, ink-on-paper buttons.
- */
 export function Composer({
   onSubmit,
   disabled,
@@ -23,6 +19,7 @@ export function Composer({
   const ref = useRef<HTMLTextAreaElement | null>(null);
   const settings = useChatStore((s) => s.settings);
 
+  // Autosize textarea
   useEffect(() => {
     const el = ref.current;
     if (!el) return;
@@ -44,99 +41,71 @@ export function Composer({
     }
   };
 
-  const tunedDot = !isDefaults(settings);
-
   return (
-    <div className="sticky bottom-0 z-20 px-4 sm:px-6 pt-3 pb-5 bg-gradient-to-t from-paper via-paper to-transparent">
-      <div className="max-w-[1040px] mx-auto">
-        <div className="grid grid-cols-[80px_1fr] gap-6">
-          {/* Margin folio */}
-          <div className="text-right pr-2 pt-3 hidden sm:block">
-            <div className="folio-chrome">Submit</div>
-          </div>
-
-          {/* Composer body */}
-          <div
-            className="rounded-md transition-shadow duration-200"
-            style={{
-              background: "var(--paper)",
-              boxShadow:
-                "0 0 0 1.5px rgba(25,23,19,0.30), 0 6px 24px -8px rgba(25,23,19,0.18)",
-            }}
-          >
-            <textarea
-              ref={ref}
-              value={value}
-              onChange={(e) => setValue(e.target.value)}
-              onKeyDown={onKey}
-              disabled={disabled}
-              rows={1}
-              placeholder="Pose your question…"
-              className={clsx(
-                "w-full bg-transparent outline-none resize-none px-5 pt-4 pb-2 leading-relaxed scrollbar-none",
-                "text-ink placeholder:italic placeholder:text-ink-50",
-                "text-[18px]"
-              )}
-              style={{
-                fontFamily: "var(--font-fraunces), ui-serif, Georgia, serif",
-                fontWeight: 400,
-                maxHeight: 200,
-              }}
-              aria-label="Question"
-            />
+    <div className="sticky bottom-0 z-20 px-4 sm:px-6 pt-4 pb-5 bg-gradient-to-t from-canvas-deep via-canvas-deep/85 to-transparent">
+      <div className="max-w-[920px] mx-auto">
+        <div
+          className="relative rounded-2xl glass-strong overflow-hidden transition-all duration-200"
+          style={{ padding: "10px 12px" }}
+        >
+          <textarea
+            ref={ref}
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            onKeyDown={onKey}
+            disabled={disabled}
+            rows={1}
+            placeholder="Ask anything about Etiya BSS…"
+            className="w-full bg-transparent outline-none resize-none px-3 py-2.5 text-body text-ink placeholder:text-ink-30 leading-relaxed scrollbar-none"
+            style={{ maxHeight: 200 }}
+            aria-label="Question"
+          />
 
-            <div className="flex items-center justify-between px-3 pb-2.5 pt-1 border-t border-ink/10">
-              <div className="flex items-center gap-1">
-                <ToolButton
-                  onClick={onOpenSettings}
-                  label="Tune retrieval & generation"
-                  hasDot={tunedDot}
-                  icon={
-                    <svg width="13" height="13" viewBox="0 0 13 13" fill="none">
-                      <circle
-                        cx="6.5"
-                        cy="6.5"
-                        r="2"
-                        stroke="currentColor"
-                        strokeWidth="1.4"
-                      />
-                      <path
-                        d="M6.5 1v2M6.5 10v2M1 6.5h2M10 6.5h2M2.6 2.6 4 4M9 9l1.4 1.4M2.6 10.4 4 9M9 4l1.4-1.4"
-                        stroke="currentColor"
-                        strokeWidth="1.3"
-                        strokeLinecap="round"
-                      />
-                    </svg>
-                  }
-                >
-                  Edit settings
-                </ToolButton>
-                <ToolButton
-                  onClick={onClear}
-                  label="Clear transcript"
-                  icon={
-                    <svg width="13" height="13" viewBox="0 0 13 13" fill="none">
-                      <path
-                        d="M2.5 3.5h8M5 3.5V2h3v1.5M3.5 3.5l.5 7.5h5l.5-7.5"
-                        stroke="currentColor"
-                        strokeWidth="1.3"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                      />
-                    </svg>
-                  }
-                >
-                  Clear
-                </ToolButton>
-                <span className="folio-chrome ml-3 hidden md:inline">
-                  ⏎ submit · ⇧⏎ newline
-                </span>
-              </div>
-              <SendButton
-                onClick={submit}
-                disabled={!value.trim() || disabled}
-              />
+          {/* Action row */}
+          <div className="flex items-center justify-between mt-1.5 px-1">
+            <div className="flex items-center gap-1">
+              <ToolButton
+                onClick={onOpenSettings}
+                label="Tune retrieval & inference"
+                icon={
+                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+                    <circle cx="7" cy="7" r="2" stroke="currentColor" strokeWidth="1.4" />
+                    <path
+                      d="M7 1v2M7 11v2M1 7h2M11 7h2M2.8 2.8 4.2 4.2M9.8 9.8l1.4 1.4M2.8 11.2 4.2 9.8M9.8 4.2l1.4-1.4"
+                      stroke="currentColor"
+                      strokeWidth="1.3"
+                      strokeLinecap="round"
+                    />
+                  </svg>
+                }
+              >
+                <span className="text-caption hidden sm:inline">Settings</span>
+                {!isDefaults(settings) && (
+                  <span className="ml-1 inline-block w-1.5 h-1.5 rounded-full bg-amber animate-pulse-soft" />
+                )}
+              </ToolButton>
+              <ToolButton
+                onClick={onClear}
+                label="Clear conversation"
+                icon={
+                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+                    <path
+                      d="M3 4h8M5.5 4V2.5h3V4M4 4l.5 8h5L10 4M6 6.5v3M8 6.5v3"
+                      stroke="currentColor"
+                      strokeWidth="1.3"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                  </svg>
+                }
+              >
+                <span className="text-caption hidden sm:inline">Clear</span>
+              </ToolButton>
+              <span className="text-micro font-mono text-ink-30 ml-2 hidden md:inline">
+                ⏎ to send · ⇧⏎ for newline
+              </span>
             </div>
+            <SendButton onClick={submit} disabled={!value.trim() || disabled} />
           </div>
         </div>
       </div>
@@ -148,29 +117,21 @@ function ToolButton({
   onClick,
   icon,
   label,
-  hasDot,
   children,
 }: {
   onClick: () => void;
   icon: React.ReactNode;
   label: string;
-  hasDot?: boolean;
   children?: React.ReactNode;
 }) {
   return (
     <button
       onClick={onClick}
       title={label}
-      className="relative inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-ink-70 hover:text-ink hover:bg-ink-08 transition-colors"
+      className="inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-ink-50 hover:text-ink hover:bg-glass transition-colors"
     >
       {icon}
-      <span className="folio-chrome hidden sm:inline">{children}</span>
-      {hasDot && (
-        <span
-          className="absolute top-1 right-1 w-1.5 h-1.5 rounded-full bg-rust animate-ink-pulse"
-          aria-hidden
-        />
-      )}
+      {children}
     </button>
   );
 }
@@ -186,21 +147,18 @@ function SendButton({
     <button
       onClick={onClick}
       disabled={disabled}
-      aria-label="Submit"
+      aria-label="Send"
       className={clsx(
-        "shrink-0 inline-flex items-center gap-2 px-4 py-2 rounded-pill transition-all",
-        "active:scale-[0.97]",
+        "shrink-0 inline-flex items-center justify-center w-9 h-9 rounded-full transition-all",
+        "active:scale-[0.95]",
         disabled
-          ? "bg-paper-deep text-ink-30 cursor-not-allowed"
-          : "bg-ink text-paper hover:bg-rust hover:shadow-rust"
+          ? "bg-glass text-ink-30 cursor-not-allowed"
+          : "bg-amber text-canvas hover:bg-amber-soft hover:shadow-amber"
       )}
     >
-      <span className="folio-chrome--ink folio-chrome" style={{ color: "inherit" }}>
-        Submit
-      </span>
-      <svg width="11" height="11" viewBox="0 0 11 11" fill="none">
+      <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
         <path
-          d="M2 5.5h7M5.5 2 9 5.5 5.5 9"
+          d="M2.5 7h9M7 2.5l4.5 4.5L7 11.5"
           stroke="currentColor"
           strokeWidth="1.6"
           strokeLinecap="round"

components/chat/Empty.tsx

@@ -7,115 +7,85 @@ const SAMPLES = [
   "Can a category be localized in multiple languages?",
 ];
 
-/**
- * Empty state — magazine cover for a new transcript.
- */
 export function ChatEmpty({ onAsk }: { onAsk: (q: string) => void }) {
   return (
     <div className="relative flex-1 flex items-center justify-center px-6 py-12">
-      <div className="max-w-[920px] w-full">
-        {/* Top folio bar */}
-        <div className="flex items-baseline justify-between mb-10 animate-fade-in">
-          <span className="folio-chrome">Folio I · Transcript</span>
-          <span className="folio-chrome">№ 01</span>
-        </div>
-
-        {/* Headline — heavy editorial */}
-        <h1 className="animate-stagger-1">
-          <span
-            className="block font-display text-ink"
-            style={{
-              fontSize: "clamp(56px, 11vw, 132px)",
-              lineHeight: 0.92,
-              fontWeight: 300,
-              letterSpacing: "-0.04em",
-            }}
-          >
-            Pose a
-          </span>
-          <span
-            className="italic-display block text-rust"
+      <div className="max-w-[760px] w-full text-center">
+        {/* Decorative orbital mark */}
+        <div className="flex justify-center mb-8 animate-fade-in">
+          <div
+            className="relative w-16 h-16 rounded-2xl flex items-center justify-center"
             style={{
-              fontSize: "clamp(64px, 13vw, 156px)",
-              lineHeight: 0.88,
-              fontWeight: 300,
-              letterSpacing: "-0.045em",
-              fontVariationSettings: '"SOFT" 100, "WONK" 1, "opsz" 144',
+              background:
+                "linear-gradient(135deg, rgba(255,181,69,0.28), rgba(255,181,69,0.04))",
+              boxShadow:
+                "0 0 0 1px rgba(255,181,69,0.40), 0 0 64px -16px rgba(255,181,69,0.55)",
             }}
           >
-            question.
-          </span>
-        </h1>
+            <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
+              <path
+                d="M14 3v4M14 21v4M3 14h4M21 14h4M6 6l3 3M19 19l3 3M6 22l3-3M19 9l3-3"
+                stroke="#ffb545"
+                strokeWidth="1.6"
+                strokeLinecap="round"
+              />
+              <circle cx="14" cy="14" r="3" fill="#ffb545" />
+            </svg>
+          </div>
+        </div>
 
-        <div className="hairline mt-10 mb-6 animate-rule" />
+        {/* Editorial headline — sans + serif italic mix */}
+        <h1 className="text-display-xl text-ink animate-stagger-1 text-balance">
+          Ask <span className="serif-italic text-amber">anything.</span>
+        </h1>
+        <p className="text-lead text-ink-70 mt-5 animate-stagger-2 text-balance">
+          A stateless retrieval-augmented atelier over{" "}
+          <span className="font-mono text-ink">1,166</span> Etiya BSS documents,
+          re-tokenizing every turn — no cache, no drift.
+        </p>
 
-        {/* Lede paragraph (magazine deck style) */}
-        <div className="grid md:grid-cols-[2fr_1fr] gap-10 items-start animate-stagger-2">
-          <p
-            className="text-ink"
-            style={{
-              fontFamily: "var(--font-fraunces)",
-              fontSize: "22px",
-              lineHeight: 1.45,
-              fontWeight: 300,
-              letterSpacing: "-0.012em",
-            }}
-          >
-            A stateless retrieval-augmented atelier over{" "}
-            <span className="italic-display text-rust">1,166</span>{" "}
-            Etiya BSS documents. The hypernetwork re-tokenizes its source on
-            every turn — no LoRA cache, no drift, only fresh thinking.
-          </p>
-          <aside className="folio-chrome--ink folio-chrome border-l border-ink/30 pl-4">
-            <div className="mb-2">Methods</div>
-            <ul className="space-y-1.5 list-none normal-case tracking-normal text-caption text-ink-70">
-              <li>· K-means topic anchors</li>
-              <li>· BM25 + dense (text-3-large)</li>
-              <li>· BGE rerank · RRF fusion</li>
-              <li>· Local refusal classifier</li>
-            </ul>
-          </aside>
+        {/* Sample chips */}
+        <div className="mt-12 grid sm:grid-cols-2 gap-2.5 animate-stagger-3">
+          {SAMPLES.map((q) => (
+            <button
+              key={q}
+              onClick={() => onAsk(q)}
+              className="group text-left rounded-md p-4 transition-all
+                         bg-glass hover:bg-glass-stronger
+                         hover:shadow-amber/30"
+              style={{ boxShadow: "0 0 0 1px rgba(255,255,255,0.08)" }}
+            >
+              <div className="flex items-start gap-3">
+                <span className="shrink-0 mt-1 w-1 h-1 rounded-full bg-amber" />
+                <span className="text-body text-ink-70 group-hover:text-ink transition-colors">
+                  {q}
+                </span>
+              </div>
+            </button>
+          ))}
         </div>
 
-        <div className="hairline--double mt-10 mb-8 animate-rule-2" />
-
-        {/* Sample interrogations */}
-        <div className="animate-stagger-3">
-          <div className="folio-chrome mb-4">Suggested entries</div>
-          <ul className="grid sm:grid-cols-2 gap-x-8 gap-y-1">
-            {SAMPLES.map((q, i) => (
-              <li key={q}>
-                <button
-                  onClick={() => onAsk(q)}
-                  className="group w-full text-left py-3 flex items-baseline gap-3
-                             border-b border-ink/12 hover:border-rust transition-colors"
-                >
-                  <span className="folio-chrome shrink-0 w-7 group-hover:text-rust transition-colors">
-                    {String(i + 1).padStart(2, "0")}
-                  </span>
-                  <span
-                    className="flex-1 text-ink group-hover:italic transition-all"
-                    style={{
-                      fontFamily: "var(--font-fraunces)",
-                      fontSize: "17px",
-                      lineHeight: 1.4,
-                      fontWeight: 400,
-                    }}
-                  >
-                    {q}
-                  </span>
-                  <span
-                    className="text-rust opacity-0 group-hover:opacity-100 -translate-x-1 group-hover:translate-x-0 transition-all"
-                    aria-hidden
-                  >
-                    ↳
-                  </span>
-                </button>
-              </li>
-            ))}
-          </ul>
+        {/* Capability strip */}
+        <div className="mt-14 flex flex-wrap items-center justify-center gap-x-8 gap-y-3 text-micro uppercase tracking-[0.18em] text-ink-50 font-mono animate-stagger-4">
+          <Cap label="triple-gate retrieval" />
+          <Dot />
+          <Cap label="bge rerank" />
+          <Dot />
+          <Cap label="kmeans anchors" />
+          <Dot />
+          <Cap label="zero hardcoded text" />
         </div>
       </div>
     </div>
   );
 }
+
+function Cap({ label }: { label: string }) {
+  return <span>{label}</span>;
+}
+
+function Dot() {
+  return (
+    <span className="inline-block w-1 h-1 rounded-full bg-ink-30" aria-hidden />
+  );
+}

components/chat/GroundingPill.tsx

@@ -20,7 +20,7 @@ const META: Record<
   ungrounded: {
     label: "Ungrounded",
     tone: "warn",
-    hint: "Answer was generated but doesn't strongly match the source.",
+    hint: "Answer was generated but doesn't strongly match the source. Treat with caution.",
   },
   rejected_low_similarity: {
     label: "No source",
@@ -40,21 +40,27 @@ export function GroundingPill({ status }: { status: GroundingStatus }) {
     tone: "neutral",
     hint: "",
   };
-  const cls = {
-    ok: "text-status-ok ring-status-ok/40 bg-status-ok-glow",
-    warn: "text-status-warn ring-status-warn/40 bg-status-warn-glow",
-    err: "text-status-err ring-status-err/40 bg-status-err-glow",
-    neutral: "text-ink-70 ring-ink/24 bg-paper-deep",
+  const toneCls = {
+    ok: "bg-status-ok-glow text-status-ok",
+    warn: "bg-status-warn-glow text-amber",
+    err: "bg-status-err-glow text-status-err",
+    neutral: "bg-glass text-ink-70",
+  }[meta.tone];
+
+  const ringCls = {
+    ok: "ring-1 ring-status-ok/30",
+    warn: "ring-1 ring-amber/35",
+    err: "ring-1 ring-status-err/30",
+    neutral: "ring-1 ring-glass-border",
   }[meta.tone];
 
   return (
     <span
       title={meta.hint}
       className={clsx(
-        "inline-flex items-center gap-1.5 rounded-pill px-2.5 py-0.5",
-        "folio-chrome",
-        "ring-1",
-        cls
+        "inline-flex items-center gap-1.5 rounded-pill px-2.5 py-1 text-micro uppercase tracking-[0.12em] font-mono",
+        toneCls,
+        ringCls
       )}
     >
       <Dot tone={meta.tone} />
@@ -66,8 +72,8 @@ export function GroundingPill({ status }: { status: GroundingStatus }) {
 function Dot({ tone }: { tone: "ok" | "warn" | "err" | "neutral" }) {
   const cls = {
     ok: "bg-status-ok",
-    warn: "bg-status-warn",
-    err: "bg-rust",
+    warn: "bg-amber",
+    err: "bg-status-err",
     neutral: "bg-ink-50",
   }[tone];
   return <span className={clsx("inline-block w-1.5 h-1.5 rounded-full", cls)} />;

components/chat/Message.tsx

@@ -6,50 +6,25 @@ import { SourceChips } from "./SourceChips";
 import { useState } from "react";
 import clsx from "clsx";
 
-/**
- * Editorial transcript layout:
- *   [margin folio]  |  [content column]
- *
- * User questions: italic Fraunces ledes, hairline rule beneath.
- * Assistant answers: drop-cap first letter, IBM Plex body, bibliography below,
- *                    spec sheet typeset like a magazine colophon.
- */
-
-export function UserMessage({ text, index }: { text: string; index: number }) {
+export function UserMessage({ text }: { text: string }) {
   return (
-    <article className="grid grid-cols-[80px_1fr] gap-6 animate-fade-up">
-      <div className="text-right pr-2 pt-1">
-        <div className="folio-chrome">№ {String(index + 1).padStart(2, "0")} · Q</div>
+    <div className="flex items-start gap-3 justify-end animate-fade-up">
+      <div className="max-w-[80%] chat-bubble-user">
+        <span className="whitespace-pre-wrap">{text}</span>
       </div>
-      <div className="border-t border-ink/16 pt-3">
-        <span className="folio-chrome--ink folio-chrome">Question</span>
-        <p
-          className="italic-display text-ink mt-1.5"
-          style={{
-            fontSize: "clamp(22px, 2.6vw, 30px)",
-            lineHeight: 1.25,
-            letterSpacing: "-0.018em",
-            fontWeight: 400,
-            fontVariationSettings: '"SOFT" 30, "WONK" 1',
-          }}
-        >
-          {text}
-        </p>
+      <div className="shrink-0 w-7 h-7 rounded-md bg-glass flex items-center justify-center text-micro font-mono text-ink-70 mt-1"
+        style={{ boxShadow: "0 0 0 1px rgba(255,255,255,0.10)" }}
+      >
+        U
       </div>
-    </article>
+    </div>
   );
 }
 
-export function AssistantMessage({
-  turn,
-  index,
-}: {
-  turn: ChatTurn;
-  index: number;
-}) {
+export function AssistantMessage({ turn }: { turn: ChatTurn }) {
   const r = turn.response;
-  const [copied, setCopied] = useState(false);
   if (!r) return null;
+  const [copied, setCopied] = useState(false);
 
   const copy = async () => {
     try {
@@ -60,82 +35,40 @@ export function AssistantMessage({
   };
 
   return (
-    <article className="grid grid-cols-[80px_1fr] gap-6 animate-fade-up">
-      {/* Margin folio */}
-      <div className="text-right pr-2 pt-1">
-        <div className="folio-chrome">
-          № {String(index + 1).padStart(2, "0")} · A
-        </div>
-        <div className="mt-3 folio-chrome text-rust">
-          {r.total_seconds.toFixed(2)}s
-        </div>
-      </div>
-
-      {/* Body column */}
-      <div className="border-t border-ink/16 pt-3">
-        {/* Banner */}
-        <div className="flex items-baseline justify-between mb-3 flex-wrap gap-2">
-          <div className="flex items-baseline gap-3">
-            <span className="folio-chrome--ink folio-chrome">Answer</span>
-            <GroundingPill status={r._grounding_status} />
+    <div className="flex items-start gap-3 animate-fade-up">
+      <Avatar />
+      <article className="chat-bubble-assistant flex-1 min-w-0 max-w-[88%]">
+        {/* Header: grounding + actions */}
+        <header className="flex items-center justify-between gap-3 mb-3">
+          <GroundingPill status={r._grounding_status} />
+          <div className="flex items-center gap-1">
+            <button
+              onClick={copy}
+              className="text-micro text-ink-50 hover:text-ink hover:bg-glass rounded-md px-2 py-1 transition-colors flex items-center gap-1"
+              title="Copy answer"
+            >
+              {copied ? (
+                <>
+                  <svg width="11" height="11" viewBox="0 0 11 11" fill="none">
+                    <path d="M2 6 4.5 8.5 9 3" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
+                  </svg>
+                  copied
+                </>
+              ) : (
+                <>
+                  <svg width="11" height="11" viewBox="0 0 11 11" fill="none">
+                    <rect x="2" y="2" width="6" height="6" rx="1" stroke="currentColor" strokeWidth="1.2"/>
+                    <rect x="3.5" y="3.5" width="6" height="6" rx="1" stroke="currentColor" strokeWidth="1.2"/>
+                  </svg>
+                  copy
+                </>
+              )}
+            </button>
           </div>
-          <button
-            onClick={copy}
-            className="folio-chrome hover:text-rust transition-colors flex items-center gap-1.5"
-            title="Copy answer"
-          >
-            {copied ? (
-              <>
-                <svg width="11" height="11" viewBox="0 0 11 11" fill="none">
-                  <path
-                    d="M2 6 4.5 8.5 9 3"
-                    stroke="currentColor"
-                    strokeWidth="1.6"
-                    strokeLinecap="round"
-                  />
-                </svg>
-                Copied
-              </>
-            ) : (
-              <>
-                <svg width="11" height="11" viewBox="0 0 11 11" fill="none">
-                  <rect
-                    x="2"
-                    y="2"
-                    width="6"
-                    height="6"
-                    rx="1"
-                    stroke="currentColor"
-                    strokeWidth="1.2"
-                  />
-                  <rect
-                    x="3.5"
-                    y="3.5"
-                    width="6"
-                    height="6"
-                    rx="1"
-                    stroke="currentColor"
-                    strokeWidth="1.2"
-                  />
-                </svg>
-                Copy
-              </>
-            )}
-          </button>
-        </div>
+        </header>
 
-        {/* Answer body — drop-cap, generous reading width */}
-        <div
-          className="drop-cap text-ink"
-          style={{
-            fontFamily: "var(--font-fraunces)",
-            fontSize: "20px",
-            lineHeight: 1.55,
-            fontWeight: 400,
-            maxWidth: "70ch",
-            whiteSpace: "pre-wrap",
-          }}
-        >
+        {/* Answer */}
+        <div className="text-ink leading-[1.65] whitespace-pre-wrap">
           {r.answer}
         </div>
 
@@ -143,85 +76,98 @@ export function AssistantMessage({
         {r.source_docs?.length > 0 && <SourceChips docs={r.source_docs} />}
 
         {/* Spec sheet */}
-        <footer className="mt-6 pt-3 border-t border-ink/16">
-          <div className="folio-chrome mb-2">Colophon</div>
-          <div className="grid grid-cols-3 sm:grid-cols-6 gap-x-6 gap-y-3">
-            <Spec label="top·sim" value={r._top_similarity?.toFixed(3) ?? "—"} />
-            <Spec label="rerank" value={r._top_rerank_score?.toFixed(2) ?? "—"} />
-            <Spec label="anchor" value={r._anchor_score?.toFixed(3) ?? "—"} />
-            <Spec
-              label="retrieve"
-              value={`${r.retrieve_seconds.toFixed(2)}s`}
-            />
-            <Spec
-              label="inference"
-              value={`${r.inference_seconds.toFixed(2)}s`}
-            />
-            <Spec label="total" value={`${r.total_seconds.toFixed(2)}s`} accent />
-          </div>
+        <footer className="mt-4 pt-3 border-t border-glass-border flex flex-wrap items-center gap-x-5 gap-y-1.5 text-micro text-ink-50 font-mono uppercase tracking-[0.10em]">
+          <Spec label="top·sim" value={r._top_similarity?.toFixed(3) ?? "—"} />
+          <Spec label="rerank" value={r._top_rerank_score?.toFixed(2) ?? "—"} />
+          <Spec label="anchor" value={r._anchor_score?.toFixed(3) ?? "—"} />
+          <Spec
+            label="retrieve"
+            value={`${r.retrieve_seconds.toFixed(2)}s`}
+          />
+          <Spec
+            label="inference"
+            value={`${r.inference_seconds.toFixed(2)}s`}
+          />
+          <Spec
+            label="total"
+            value={`${r.total_seconds.toFixed(2)}s`}
+            highlight
+          />
         </footer>
-      </div>
-    </article>
+      </article>
+    </div>
   );
 }
 
-export function ErrorMessage({
-  turn,
-  index,
-}: {
-  turn: ChatTurn;
-  index: number;
-}) {
+export function ErrorMessage({ turn }: { turn: ChatTurn }) {
   const e = turn.error;
   if (!e) return null;
   return (
-    <article className="grid grid-cols-[80px_1fr] gap-6 animate-fade-up">
-      <div className="text-right pr-2 pt-1">
-        <div className="folio-chrome text-rust">Errata</div>
-        <div className="mt-2 folio-chrome">№ {String(index + 1).padStart(2, "0")}</div>
-      </div>
-      <div className="border-t border-rust pt-3">
-        <span className="folio-chrome--rust folio-chrome">
-          HTTP {e.status || "—"}
-        </span>
-        <p
-          className="italic-display text-ink mt-1.5"
-          style={{ fontSize: "20px", lineHeight: 1.3 }}
-        >
-          {e.message}
-        </p>
+    <div className="flex items-start gap-3 animate-fade-up">
+      <Avatar tone="err" />
+      <article
+        className="flex-1 min-w-0 max-w-[88%] rounded-2xl rounded-tl-sm px-5 py-4"
+        style={{
+          background: "rgba(255, 122, 122, 0.06)",
+          boxShadow: "0 0 0 1px rgba(255, 122, 122, 0.28)",
+        }}
+      >
+        <div className="text-micro uppercase tracking-[0.12em] text-status-err font-mono">
+          error · http {e.status || "—"}
+        </div>
+        <div className="text-body-strong text-ink mt-1.5">{e.message}</div>
         {e.status === 502 && (
-          <p className="text-caption text-ink-70 mt-3 max-w-prose">
-            The upstream Space appears to be sleeping or building. Try again in
-            a moment.
-          </p>
+          <div className="text-caption text-ink-70 mt-2">
+            Backend not reachable. Check the HF Space stage.
+          </div>
         )}
-      </div>
-    </article>
+      </article>
+    </div>
   );
 }
 
 function Spec({
   label,
   value,
-  accent,
+  highlight,
 }: {
   label: string;
   value: string;
-  accent?: boolean;
+  highlight?: boolean;
 }) {
   return (
-    <div>
-      <div className="folio-chrome">{label}</div>
-      <div
-        className={clsx(
-          "font-mono mt-0.5",
-          accent ? "text-rust" : "text-ink"
-        )}
-        style={{ fontSize: "15px", fontWeight: 500 }}
-      >
+    <span className="inline-flex items-baseline gap-1">
+      <span>{label}</span>
+      <span className={clsx(highlight ? "text-amber" : "text-ink-70")}>
         {value}
-      </div>
+      </span>
+    </span>
+  );
+}
+
+function Avatar({ tone = "amber" }: { tone?: "amber" | "err" }) {
+  const bg =
+    tone === "err"
+      ? "linear-gradient(135deg, rgba(255,122,122,0.95), rgba(195,70,70,1))"
+      : "linear-gradient(135deg, rgba(255,181,69,0.95), rgba(214,138,31,1))";
+  const ring =
+    tone === "err"
+      ? "0 0 0 1px rgba(255,122,122,0.45), 0 0 14px -2px rgba(255,122,122,0.4)"
+      : "0 0 0 1px rgba(255,181,69,0.45), 0 0 14px -2px rgba(255,181,69,0.45)";
+  return (
+    <div
+      className="shrink-0 w-7 h-7 rounded-md flex items-center justify-center mt-1"
+      style={{ background: bg, boxShadow: ring }}
+    >
+      <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+        <path
+          d="M2.5 7.5 4.8 9.8l6-6.6"
+          stroke="#0a0b10"
+          strokeWidth="1.8"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
     </div>
   );
 }

components/chat/SettingsDrawer.tsx

@@ -14,15 +14,78 @@ type ParamMeta = {
 };
 
 const PARAMS: ParamMeta[] = [
-  { key: "top_k", label: "Top-K retrieval", desc: "How many documents surface as context. 1 = single best; 3 = blend.", min: 1, max: 3, step: 1 },
-  { key: "max_new_tokens", label: "Max new tokens", desc: "Generation cap. >200 risks repetition under greedy decoding.", min: 32, max: 512, step: 8 },
-  { key: "similarity_threshold", label: "Dense similarity gate", desc: "Reject if dense cosine top-1 below this. Lower = more permissive.", min: 0, max: 1, step: 0.01 },
-  { key: "rerank_threshold", label: "BGE rerank gate", desc: "Reject if cross-encoder score below this. Higher = stricter.", min: -2, max: 5, step: 0.05 },
-  { key: "anchor_threshold", label: "Anchor (topic) gate", desc: "Reject if question is far from every K-means topic centroid.", min: 0, max: 1, step: 0.01 },
-  { key: "scaler", label: "doc-to-lora scaler", desc: "LoRA intensity. 0=ignore doc · 1=normal · >1 amplify · <0 invert.", min: -2, max: 2, step: 0.05 },
-  { key: "bias_scaler", label: "Bias scaler", desc: "Bias-side LoRA intensity. Usually 1.0.", min: -2, max: 2, step: 0.05 },
-  { key: "repetition_penalty", label: "Repetition penalty", desc: "1.0 = off. 1.1–1.2 cuts loops without hurting fluency.", min: 1, max: 2, step: 0.05 },
-  { key: "no_repeat_ngram_size", label: "No-repeat n-gram", desc: "Forbid same n-gram twice. 0=off. 4=cuts most loops.", min: 0, max: 8, step: 1 },
+  {
+    key: "top_k",
+    label: "Top-K retrieval",
+    desc: "How many docs surface as context. 1 = single best; 3 = blend.",
+    min: 1,
+    max: 3,
+    step: 1,
+  },
+  {
+    key: "max_new_tokens",
+    label: "Max new tokens",
+    desc: "Generation cap. >200 risks repetition under greedy decoding.",
+    min: 32,
+    max: 512,
+    step: 8,
+  },
+  {
+    key: "similarity_threshold",
+    label: "Dense similarity gate",
+    desc: "Reject if dense cosine top-1 below this. Lower = more permissive.",
+    min: 0,
+    max: 1,
+    step: 0.01,
+  },
+  {
+    key: "rerank_threshold",
+    label: "BGE rerank gate",
+    desc: "Reject if BGE cross-encoder score below this. Higher = stricter.",
+    min: -2,
+    max: 5,
+    step: 0.05,
+  },
+  {
+    key: "anchor_threshold",
+    label: "Anchor (topic) gate",
+    desc: "Reject if question is far from every K-means topic centroid.",
+    min: 0,
+    max: 1,
+    step: 0.01,
+  },
+  {
+    key: "scaler",
+    label: "doc-to-lora scaler",
+    desc: "LoRA intensity. 0=ignore doc · 1=normal · >1 amplify · <0 invert.",
+    min: -2,
+    max: 2,
+    step: 0.05,
+  },
+  {
+    key: "bias_scaler",
+    label: "Bias scaler",
+    desc: "Bias-side LoRA intensity. Usually 1.0.",
+    min: -2,
+    max: 2,
+    step: 0.05,
+  },
+  {
+    key: "repetition_penalty",
+    label: "Repetition penalty",
+    desc: "1.0 = off. 1.1–1.2 cuts loops without hurting fluency.",
+    min: 1,
+    max: 2,
+    step: 0.05,
+  },
+  {
+    key: "no_repeat_ngram_size",
+    label: "No-repeat n-gram",
+    desc: "Forbid same n-gram twice. 0=off. 4=cuts most loops.",
+    min: 0,
+    max: 8,
+    step: 1,
+  },
 ];
 
 export function SettingsDrawer({
@@ -36,6 +99,7 @@ export function SettingsDrawer({
   const setSettings = useChatStore((s) => s.setSettings);
   const reset = useChatStore((s) => s.resetSettings);
 
+  // ESC to close
   useEffect(() => {
     if (!open) return;
     const onKey = (e: KeyboardEvent) => {
@@ -47,65 +111,52 @@ export function SettingsDrawer({
 
   return (
     <>
+      {/* Scrim */}
       <div
         className={clsx(
-          "fixed inset-0 z-40 transition-opacity duration-300",
+          "fixed inset-0 z-40 bg-canvas-deep/60 backdrop-blur-sm transition-opacity duration-300",
           open ? "opacity-100" : "opacity-0 pointer-events-none"
         )}
-        style={{ background: "rgba(25,23,19,0.20)" }}
         onClick={onClose}
         aria-hidden
       />
+      {/* Panel */}
       <aside
         className={clsx(
-          "fixed top-0 right-0 z-50 h-screen w-full sm:w-[480px]",
+          "fixed top-0 right-0 z-50 h-screen w-full sm:w-[460px] glass-strong",
           "flex flex-col transition-transform duration-300 ease-atelier",
           open ? "translate-x-0" : "translate-x-full"
         )}
-        style={{
-          background: "var(--paper-deep)",
-          boxShadow: "-12px 0 48px -12px rgba(25,23,19,0.20), -1px 0 0 rgba(25,23,19,0.20)",
-        }}
         role="dialog"
         aria-modal="true"
         aria-label="Inference settings"
       >
-        <header className="px-7 pt-7 pb-5 border-b border-ink/16">
-          <div className="flex items-baseline justify-between mb-2">
-            <span className="folio-chrome">Workshop · Settings</span>
-            <button
-              onClick={onClose}
-              className="p-1.5 -mr-1.5 rounded-md text-ink-50 hover:text-ink hover:bg-ink-08 transition-colors"
-              aria-label="Close"
-            >
-              <svg width="13" height="13" viewBox="0 0 13 13" fill="none">
-                <path
-                  d="m3 3 7 7M10 3l-7 7"
-                  stroke="currentColor"
-                  strokeWidth="1.5"
-                  strokeLinecap="round"
-                />
-              </svg>
-            </button>
+        <header className="px-6 py-5 flex items-center justify-between border-b border-glass-border">
+          <div>
+            <div className="text-display-sm">Inference settings</div>
+            <div className="text-caption text-ink-50 mt-0.5">
+              Tune retrieval gates and generation in real time.
+            </div>
           </div>
-          <h2
-            className="italic-display text-ink"
-            style={{ fontSize: "32px", lineHeight: 1.15 }}
+          <button
+            onClick={onClose}
+            className="p-2 rounded-md text-ink-50 hover:text-ink hover:bg-glass transition-colors"
+            aria-label="Close settings"
           >
-            Tune the <span className="text-rust">inference.</span>
-          </h2>
-          <p className="text-caption text-ink-70 mt-2 max-w-[36ch]">
-            Adjust retrieval gates and generation behaviour. Changes take
-            effect on the next submitted question.
-          </p>
+            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+              <path
+                d="m3 3 8 8M11 3l-8 8"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+              />
+            </svg>
+          </button>
         </header>
 
-        <div className="flex-1 overflow-y-auto px-7 py-6 space-y-6">
-          {/* Grounding toggle */}
-          <label
-            className="flex items-start gap-3 p-3 -mx-1 rounded-md cursor-pointer hover:bg-ink-08 transition-colors"
-            style={{ boxShadow: "0 0 0 1px rgba(25,23,19,0.12)" }}
-          >
+        <div className="flex-1 overflow-y-auto px-6 py-5 space-y-5">
+          {/* use_grounding toggle */}
+          <label className="flex items-start gap-3 p-3 rounded-md bg-glass cursor-pointer hover:bg-glass-stronger transition-colors">
             <Toggle
               checked={settings.use_grounding}
               onChange={(v) => setSettings({ ...settings, use_grounding: v })}
@@ -114,7 +165,7 @@ export function SettingsDrawer({
               <div className="text-body-strong text-ink">
                 Wrap with grounding instruction
               </div>
-              <div className="text-caption text-ink-70 mt-0.5">
+              <div className="text-caption text-ink-50 mt-0.5">
                 Forces the model to refuse if context is insufficient.
               </div>
             </div>
@@ -132,10 +183,10 @@ export function SettingsDrawer({
           ))}
         </div>
 
-        <footer className="px-7 py-4 border-t border-ink/16 flex items-center justify-between">
+        <footer className="px-6 py-4 border-t border-glass-border flex items-center justify-between">
           <button
             onClick={reset}
-            className="folio-chrome flex items-center gap-1.5 hover:text-rust transition-colors"
+            className="text-caption text-ink-70 hover:text-ink transition-colors flex items-center gap-1.5"
           >
             <svg width="11" height="11" viewBox="0 0 11 11" fill="none">
               <path
@@ -148,7 +199,7 @@ export function SettingsDrawer({
             </svg>
             Reset to defaults
           </button>
-          <button onClick={onClose} className="btn-primary">
+          <button onClick={onClose} className="btn-primary text-caption">
             Done
           </button>
         </footer>
@@ -166,21 +217,22 @@ function ParamSlider({
   value: number;
   onChange: (v: number) => void;
 }) {
-  const isDefault = (DEFAULT_SETTINGS[meta.key] as number) === value;
-  const display =
+  const isDefault =
+    (DEFAULT_SETTINGS[meta.key] as number) === value;
+  const displayValue =
     meta.step < 1 ? value.toFixed(2) : Math.round(value).toString();
 
   return (
     <div>
-      <div className="flex items-baseline justify-between mb-1.5">
+      <div className="flex items-center justify-between mb-1.5">
         <label className="text-body-strong text-ink">{meta.label}</label>
         <span
           className={clsx(
-            "font-mono text-caption",
-            isDefault ? "text-ink-50" : "text-rust"
+            "text-caption font-mono",
+            isDefault ? "text-ink-50" : "text-amber"
           )}
         >
-          {display}
+          {displayValue}
         </span>
       </div>
       <input
@@ -190,10 +242,10 @@ function ParamSlider({
         step={meta.step}
         value={value}
         onChange={(e) => onChange(parseFloat(e.target.value))}
-        className="w-full accent-rust"
+        className="w-full accent-amber"
         aria-label={meta.label}
       />
-      <p className="text-caption text-ink-70 mt-1.5">{meta.desc}</p>
+      <p className="text-micro text-ink-50 mt-1.5">{meta.desc}</p>
     </div>
   );
 }
@@ -213,16 +265,15 @@ function Toggle({
       onClick={() => onChange(!checked)}
       className={clsx(
         "relative w-9 h-5 rounded-pill transition-colors duration-200 shrink-0 mt-0.5",
-        checked ? "bg-rust" : "bg-paper-edge"
+        checked ? "bg-amber" : "bg-glass-stronger"
       )}
-      style={{ boxShadow: "inset 0 0 0 1px rgba(25,23,19,0.18)" }}
+      style={{ boxShadow: "0 0 0 1px rgba(255,255,255,0.10)" }}
     >
       <span
         className={clsx(
-          "absolute top-0.5 w-4 h-4 rounded-full bg-paper transition-transform duration-200",
+          "absolute top-0.5 w-4 h-4 rounded-full bg-canvas-deep transition-transform duration-200",
           checked ? "translate-x-[18px]" : "translate-x-0.5"
         )}
-        style={{ boxShadow: "0 1px 2px rgba(25,23,19,0.25)" }}
       />
     </button>
   );

components/chat/Sidebar.tsx

@@ -5,10 +5,6 @@ import { usePathname } from "next/navigation";
 import { useChatStore } from "@/lib/chatStore";
 import clsx from "clsx";
 
-/**
- * Catalog sidebar — magazine table-of-contents vibe.
- * Each conversation is a folio entry, numbered, with a hairline rule below.
- */
 export function Sidebar() {
   const pathname = usePathname();
   const sidebarOpen = useChatStore((s) => s.sidebarOpen);
@@ -22,39 +18,16 @@ export function Sidebar() {
   return (
     <aside
       className={clsx(
-        "shrink-0 sticky z-20 self-start",
+        "shrink-0 h-[calc(100vh-3.5rem)] sticky top-14 z-20",
         "transition-[width,opacity] duration-300 ease-atelier",
         sidebarOpen
-          ? "w-[300px] opacity-100"
+          ? "w-[280px] opacity-100"
           : "w-0 opacity-0 pointer-events-none"
       )}
-      style={{
-        top: "calc(var(--topbar-h, 88px))",
-        height: "calc(100vh - var(--topbar-h, 88px))",
-      }}
     >
-      <div
-        className="h-full overflow-hidden flex flex-col"
-        style={{
-          background: "var(--paper-deep)",
-          boxShadow: "1px 0 0 rgba(25,23,19,0.12)",
-        }}
-      >
-        {/* Header: Catalog */}
-        <div className="px-5 pt-5 pb-3">
-          <div className="folio-chrome">Catalog</div>
-          <h2
-            className="italic-display text-ink mt-1"
-            style={{ fontSize: "26px", lineHeight: 1.05 }}
-          >
-            Recent <span className="not-italic font-display font-medium not-italic-fix">interrogations.</span>
-          </h2>
-        </div>
-
-        <div className="hairline mx-5" />
-
-        {/* New conversation */}
-        <div className="px-5 py-4">
+      <div className="h-full overflow-hidden border-r border-glass-border bg-canvas-deep/40 backdrop-blur-glass flex flex-col">
+        {/* New chat */}
+        <div className="p-4">
           <button
             onClick={() => {
               newConversation();
@@ -63,161 +36,129 @@ export function Sidebar() {
                 window.dispatchEvent(new PopStateEvent("popstate"));
               }
             }}
-            className="group w-full flex items-center justify-between
-                       py-2.5 px-3 rounded-md
-                       text-ink hover:text-paper hover:bg-ink
-                       transition-all"
-            style={{ boxShadow: "0 0 0 1px rgba(25,23,19,0.18)" }}
+            className="w-full flex items-center gap-2.5 px-4 py-3 rounded-md
+                       bg-amber/10 text-amber
+                       hover:bg-amber/15 transition-colors
+                       text-body-strong"
+            style={{ boxShadow: "0 0 0 1px rgba(255,181,69,0.28)" }}
           >
-            <span className="flex items-center gap-2.5">
-              <svg width="13" height="13" viewBox="0 0 13 13" fill="none">
-                <path
-                  d="M6.5 1.5v10M1.5 6.5h10"
-                  stroke="currentColor"
-                  strokeWidth="1.4"
-                  strokeLinecap="round"
-                />
-              </svg>
-              <span className="text-body-strong">Begin new transcript</span>
-            </span>
-            <span className="folio-chrome group-hover:text-paper transition-colors">⌘N</span>
+            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+              <path
+                d="M7 2v10M2 7h10"
+                stroke="currentColor"
+                strokeWidth="1.6"
+                strokeLinecap="round"
+              />
+            </svg>
+            <span>New conversation</span>
           </button>
         </div>
 
-        {/* Sections (folio nav) */}
-        <nav className="px-3 pb-2 flex flex-col">
-          <NavLink href="/" active={pathname === "/"} folio="I" label="Transcript" />
+        {/* Sections */}
+        <nav className="px-3 pb-3 flex flex-col gap-0.5">
+          <NavLink
+            href="/"
+            active={pathname === "/"}
+            label="Chat"
+            icon={<IconSpark />}
+          />
           <NavLink
             href="/documents"
             active={pathname.startsWith("/documents")}
-            folio="II"
-            label="Library"
+            label="Documents"
+            icon={<IconDoc />}
           />
           <NavLink
             href="/system"
             active={pathname.startsWith("/system")}
-            folio="III"
-            label="Colophon"
+            label="System"
+            icon={<IconPulse />}
           />
         </nav>
 
-        <div className="hairline mx-5 my-2" />
+        <div className="hairline mx-4 my-2" />
 
-        {/* Recent transcripts */}
-        <div className="flex-1 overflow-y-auto px-3 pt-2 pb-4">
-          <div className="px-2 pb-2 folio-chrome">Index of transcripts</div>
-          {list.length === 0 ? (
-            <div className="px-3 py-3 text-caption text-ink-50 italic">
-              <span className="italic-display">No interrogations yet.</span>
+        {/* Conversation history */}
+        <div className="px-3 flex-1 overflow-y-auto">
+          <div className="px-3 py-2 text-micro uppercase tracking-[0.15em] text-ink-50">
+            Recent
+          </div>
+          {list.length === 0 && (
+            <div className="px-3 py-4 text-caption text-ink-50">
+              No conversations yet.
             </div>
-          ) : (
-            <ul>
-              {list.map((c, idx) => {
-                const folio = String(idx + 1).padStart(2, "0");
-                const active = activeId === c.id && pathname === "/";
-                return (
-                  <li key={c.id} className="relative group">
-                    <button
-                      onClick={() => {
-                        openConversation(c.id);
-                        if (pathname !== "/") {
-                          window.history.pushState(null, "", "/");
-                          window.dispatchEvent(new PopStateEvent("popstate"));
-                        }
-                        if (window.innerWidth < 768) setSidebarOpen(false);
-                      }}
-                      className={clsx(
-                        "w-full text-left px-2 py-3 transition-colors flex items-start gap-3 rounded-sm",
-                        active
-                          ? "bg-ink text-paper"
-                          : "text-ink hover:bg-ink-08"
-                      )}
-                    >
-                      <span
-                        className={clsx(
-                          "shrink-0 mt-0.5 font-mono",
-                          active ? "text-paper/70" : "text-rust"
-                        )}
-                        style={{
-                          fontSize: "10px",
-                          letterSpacing: "0.18em",
-                          fontWeight: 600,
-                        }}
-                      >
-                        № {folio}
-                      </span>
-                      <span className="min-w-0 flex-1">
-                        <span
-                          className={clsx(
-                            "block truncate text-body",
-                            active ? "text-paper" : "text-ink"
-                          )}
-                          style={{ fontWeight: active ? 500 : 400 }}
-                        >
-                          {c.title}
-                        </span>
-                        <span
-                          className={clsx(
-                            "block mt-0.5 folio-chrome",
-                            active && "text-paper/60"
-                          )}
-                        >
-                          {formatRelative(c.updatedAt)} · {c.turns.length}{" "}
-                          turn{c.turns.length === 1 ? "" : "s"}
-                        </span>
-                      </span>
-                    </button>
-                    <button
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        if (window.confirm(`Delete "${c.title}"?`)) {
-                          deleteConversation(c.id);
-                        }
-                      }}
-                      className={clsx(
-                        "absolute right-2 top-3 opacity-0 group-hover:opacity-100",
-                        "p-1 rounded text-ink-50 hover:text-rust hover:bg-rust-glow",
-                        "transition-all",
-                        active && "text-paper/60 hover:text-paper hover:bg-rust"
-                      )}
-                      aria-label="Delete transcript"
-                      title="Delete"
-                    >
-                      <svg width="11" height="11" viewBox="0 0 11 11" fill="none">
-                        <path
-                          d="M2.5 2.5l6 6M8.5 2.5l-6 6"
-                          stroke="currentColor"
-                          strokeWidth="1.4"
-                          strokeLinecap="round"
-                        />
-                      </svg>
-                    </button>
-                    <div
-                      className={clsx(
-                        "h-px mx-2",
-                        active ? "bg-transparent" : "bg-ink/12"
-                      )}
-                    />
-                  </li>
-                );
-              })}
-            </ul>
           )}
+          <ul className="flex flex-col gap-0.5">
+            {list.map((c) => (
+              <li key={c.id} className="group relative">
+                <button
+                  onClick={() => {
+                    openConversation(c.id);
+                    if (pathname !== "/") {
+                      window.history.pushState(null, "", "/");
+                      window.dispatchEvent(new PopStateEvent("popstate"));
+                    }
+                    if (window.innerWidth < 768) setSidebarOpen(false);
+                  }}
+                  className={clsx(
+                    "w-full text-left px-3 py-2 rounded-md transition-colors",
+                    "flex items-start gap-2 min-w-0",
+                    activeId === c.id && pathname === "/"
+                      ? "bg-glass-stronger text-ink"
+                      : "text-ink-70 hover:text-ink hover:bg-glass"
+                  )}
+                >
+                  <span className="text-caption truncate flex-1 min-w-0">
+                    {c.title}
+                  </span>
+                  <span className="text-micro text-ink-30 font-mono shrink-0 mt-0.5">
+                    {formatRelative(c.updatedAt)}
+                  </span>
+                </button>
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    if (window.confirm(`Delete "${c.title}"?`)) {
+                      deleteConversation(c.id);
+                    }
+                  }}
+                  className="absolute right-2 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100
+                             p-1 rounded text-ink-50 hover:text-status-err hover:bg-status-err-glow
+                             transition-all"
+                  aria-label="Delete conversation"
+                  title="Delete"
+                >
+                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+                    <path
+                      d="M3 3l6 6M9 3l-6 6"
+                      stroke="currentColor"
+                      strokeWidth="1.4"
+                      strokeLinecap="round"
+                    />
+                  </svg>
+                </button>
+              </li>
+            ))}
+          </ul>
         </div>
 
-        {/* Footer colophon */}
-        <div
-          className="px-5 py-4 border-t border-ink/12"
-          style={{ background: "rgba(0,0,0,0.02)" }}
-        >
+        {/* Footer */}
+        <div className="px-4 py-3 border-t border-glass-border">
           <a
             href="https://huggingface.co/spaces/Etiya/d2l-api"
             target="_blank"
             rel="noopener noreferrer"
-            className="folio-chrome flex items-center justify-between hover:text-rust transition-colors"
+            className="flex items-center justify-between text-micro uppercase tracking-[0.12em] text-ink-50 hover:text-ink-70 transition-colors"
           >
-            <span>Imprint · HF Space</span>
-            <span aria-hidden>↗</span>
+            <span>HF Space · backend</span>
+            <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
+              <path
+                d="M3 3h4v4M7 3 3 7"
+                stroke="currentColor"
+                strokeWidth="1.3"
+                strokeLinecap="round"
+              />
+            </svg>
           </a>
         </div>
       </div>
@@ -228,52 +169,26 @@ export function Sidebar() {
 function NavLink({
   href,
   active,
-  folio,
   label,
+  icon,
 }: {
   href: string;
   active: boolean;
-  folio: string;
   label: string;
+  icon: React.ReactNode;
 }) {
   return (
     <Link
       href={href}
       className={clsx(
-        "group flex items-baseline gap-3 px-3 py-2 rounded-sm transition-colors",
-        active ? "text-rust" : "text-ink hover:text-rust"
+        "flex items-center gap-3 px-3 py-2 rounded-md transition-all",
+        active
+          ? "bg-glass-stronger text-ink"
+          : "text-ink-70 hover:text-ink hover:bg-glass"
       )}
     >
-      <span
-        className="folio-chrome shrink-0 w-7"
-        style={{ color: active ? "var(--rust)" : undefined }}
-      >
-        {folio}
-      </span>
-      <span
-        className={clsx(
-          "flex-1 transition-all",
-          active ? "italic" : "group-hover:italic"
-        )}
-        style={{
-          fontFamily: active ? "var(--font-fraunces)" : "var(--font-plex)",
-          fontSize: active ? "20px" : "16px",
-          fontWeight: active ? 400 : 500,
-          lineHeight: 1.1,
-          fontVariationSettings: active ? '"SOFT" 30, "WONK" 1' : undefined,
-        }}
-      >
-        {label}{active && "."}
-      </span>
-      <span
-        className={clsx(
-          "transition-transform shrink-0 text-rust",
-          active ? "translate-x-0 opacity-100" : "-translate-x-2 opacity-0 group-hover:translate-x-0 group-hover:opacity-100"
-        )}
-        aria-hidden
-      >
-        →
-      </span>
+      <span className={clsx("w-4 h-4", active && "text-amber")}>{icon}</span>
+      <span className="text-body">{label}</span>
     </Link>
   );
 }
@@ -281,14 +196,51 @@ function NavLink({
 function formatRelative(ts: number): string {
   const diff = Date.now() - ts;
   const min = Math.floor(diff / 60_000);
-  if (min < 1) return "just now";
-  if (min < 60) return `${min}m ago`;
+  if (min < 1) return "now";
+  if (min < 60) return `${min}m`;
   const hr = Math.floor(min / 60);
-  if (hr < 24) return `${hr}h ago`;
+  if (hr < 24) return `${hr}h`;
   const d = Math.floor(hr / 24);
-  if (d < 7) return `${d}d ago`;
-  return new Date(ts).toLocaleDateString(undefined, {
-    month: "short",
-    day: "numeric",
-  });
+  if (d < 7) return `${d}d`;
+  return new Date(ts).toLocaleDateString(undefined, { month: "short", day: "numeric" });
+}
+
+function IconSpark() {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" className="w-full h-full">
+      <path
+        d="M8 1.5v3M8 11.5v3M1.5 8h3M11.5 8h3M3.5 3.5l2 2M10.5 10.5l2 2M3.5 12.5l2-2M10.5 5.5l2-2"
+        stroke="currentColor"
+        strokeWidth="1.4"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+function IconDoc() {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" className="w-full h-full">
+      <path
+        d="M3.5 1.5h6l3.5 3.5v9a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5v-12a.5.5 0 0 1 .5-.5z"
+        stroke="currentColor"
+        strokeWidth="1.4"
+      />
+      <path d="M9.5 1.5V5h3.5" stroke="currentColor" strokeWidth="1.4" />
+    </svg>
+  );
+}
+
+function IconPulse() {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" className="w-full h-full">
+      <path
+        d="M1.5 8h3l1.5-4 3 8L10.5 8h4"
+        stroke="currentColor"
+        strokeWidth="1.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
 }

components/chat/SourceChips.tsx

@@ -4,51 +4,46 @@ import type { SourceDoc } from "@/lib/types";
 import { useState } from "react";
 import clsx from "clsx";
 
-/**
- * Source list — bibliography style.
- * Numbered entries, italic title, hairline below, expandable scores.
- */
 export function SourceChips({ docs }: { docs: SourceDoc[] }) {
   const [expanded, setExpanded] = useState<string | null>(null);
   if (!docs?.length) return null;
 
   return (
-    <section className="mt-6">
-      <div className="flex items-baseline justify-between mb-2">
-        <span className="folio-chrome">Bibliography</span>
-        <span className="folio-chrome">{docs.length} entr{docs.length === 1 ? "y" : "ies"}</span>
+    <div className="mt-4 flex flex-col gap-2">
+      <div className="text-micro uppercase tracking-[0.12em] text-ink-50 font-mono">
+        Sources · {docs.length}
       </div>
-      <ul className="border-t border-ink/16">
-        {docs.map((d, i) => {
+      <ul className="flex flex-col gap-1.5">
+        {docs.map((d) => {
           const isOpen = expanded === d.doc_id;
           const sim = d.similarity ?? d.dense_similarity ?? 0;
           return (
-            <li key={d.doc_id} className="border-b border-ink/12">
+            <li key={d.doc_id}>
               <button
                 onClick={() => setExpanded(isOpen ? null : d.doc_id)}
-                className="w-full text-left py-3 flex items-baseline gap-4 group"
+                className={clsx(
+                  "w-full text-left rounded-md px-3 py-2 transition-all",
+                  "flex items-center gap-3",
+                  isOpen
+                    ? "bg-glass-stronger"
+                    : "bg-glass hover:bg-glass-stronger"
+                )}
+                style={{ boxShadow: "0 0 0 1px rgba(255,255,255,0.07)" }}
               >
-                <span className="folio-chrome--ink folio-chrome shrink-0 w-7">
-                  {String(i + 1).padStart(2, "0")}
-                </span>
-                <span className="min-w-0 flex-1">
-                  <span
-                    className="block italic-display text-ink truncate group-hover:text-rust transition-colors"
-                    style={{ fontSize: "16px", lineHeight: 1.3 }}
-                  >
+                <SimilarityRing value={sim} />
+                <div className="min-w-0 flex-1">
+                  <div className="text-caption-strong text-ink truncate">
                     {d.name}
-                  </span>
-                  <span className="block mt-0.5 folio-chrome">
+                  </div>
+                  <div className="text-micro font-mono text-ink-50 truncate">
                     {d.doc_id}
-                  </span>
-                </span>
-                <SimilarityRing value={sim} />
+                  </div>
+                </div>
                 <span
                   className={clsx(
                     "text-ink-50 transition-transform shrink-0",
                     isOpen && "rotate-180"
                   )}
-                  aria-hidden
                 >
                   <svg width="11" height="11" viewBox="0 0 11 11" fill="none">
                     <path
@@ -61,7 +56,10 @@ export function SourceChips({ docs }: { docs: SourceDoc[] }) {
                 </span>
               </button>
               {isOpen && (
-                <div className="pb-4 grid grid-cols-3 gap-6 animate-fade-in">
+                <div
+                  className="mt-1.5 px-3 py-3 rounded-md bg-canvas-deep/70 grid grid-cols-3 gap-3 animate-fade-in"
+                  style={{ boxShadow: "0 0 0 1px rgba(255,255,255,0.06)" }}
+                >
                   <Metric label="Cosine" value={fmt(d.similarity)} />
                   <Metric label="Dense" value={fmt(d.dense_similarity)} />
                   <Metric label="Rerank" value={fmt(d.rerank_score, 2)} />
@@ -71,20 +69,17 @@ export function SourceChips({ docs }: { docs: SourceDoc[] }) {
           );
         })}
       </ul>
-    </section>
+    </div>
   );
 }
 
 function Metric({ label, value }: { label: string; value: string }) {
   return (
     <div>
-      <div className="folio-chrome">{label}</div>
-      <div
-        className="font-mono text-ink mt-0.5"
-        style={{ fontSize: "16px", fontWeight: 500 }}
-      >
-        {value}
+      <div className="text-micro uppercase tracking-[0.12em] text-ink-50">
+        {label}
       </div>
+      <div className="text-body-strong font-mono text-ink mt-0.5">{value}</div>
     </div>
   );
 }
@@ -98,41 +93,41 @@ function SimilarityRing({ value }: { value: number }) {
   const v = Math.max(0, Math.min(1, value || 0));
   const tone =
     v >= 0.7
-      ? "var(--rust)"
+      ? "rgb(93, 214, 168)"
       : v >= 0.45
-      ? "rgba(25, 23, 19, 0.85)"
-      : "rgba(25, 23, 19, 0.35)";
-  const r = 11;
+      ? "rgb(255, 181, 69)"
+      : "rgba(245, 243, 236, 0.4)";
+  const r = 9;
   const C = 2 * Math.PI * r;
   const dash = C * v;
   return (
-    <svg width="28" height="28" viewBox="0 0 28 28" className="shrink-0">
+    <svg width="22" height="22" viewBox="0 0 22 22" className="shrink-0">
       <circle
-        cx="14"
-        cy="14"
+        cx="11"
+        cy="11"
         r={r}
-        stroke="rgba(25,23,19,0.18)"
-        strokeWidth="1.5"
+        stroke="rgba(255,255,255,0.10)"
+        strokeWidth="2"
         fill="none"
       />
       <circle
-        cx="14"
-        cy="14"
+        cx="11"
+        cy="11"
         r={r}
         stroke={tone}
-        strokeWidth="1.8"
+        strokeWidth="2"
         fill="none"
         strokeLinecap="round"
         strokeDasharray={`${dash} ${C - dash}`}
-        transform="rotate(-90 14 14)"
+        transform="rotate(-90 11 11)"
         style={{ transition: "stroke-dasharray 0.4s cubic-bezier(0.16,1,0.3,1)" }}
       />
       <text
-        x="14"
-        y="16.5"
+        x="11"
+        y="13.5"
         textAnchor="middle"
-        fontSize="8"
-        fill="rgba(25, 23, 19, 0.85)"
+        fontSize="7"
+        fill="rgba(245, 243, 236, 0.85)"
         fontFamily="var(--font-mono), monospace"
         fontWeight="600"
       >

components/chat/Thinking.tsx

@@ -1,30 +1,17 @@
 "use client";
 
-const STAGES = ["Retrieving", "Reranking", "Grounding", "Generating"];
+const STAGES = ["retrieving", "reranking", "grounding", "generating"];
 
-/**
- * Thinking placeholder. Editorial: a folio mark, italic running header,
- * three pulsing dots in mono.
- */
 export function Thinking() {
   return (
-    <div className="grid grid-cols-[80px_1fr] gap-6 animate-fade-in">
-      <div className="text-right pr-2 pt-1">
-        <div className="folio-chrome">Pending</div>
-      </div>
-      <div className="border-t border-ink/16 pt-3">
-        <div className="flex items-baseline gap-3">
-          <span
-            className="italic-display text-ink-50"
-            style={{
-              fontSize: "20px",
-              lineHeight: 1.2,
-              fontVariationSettings: '"SOFT" 30, "WONK" 1',
-            }}
-          >
+    <div className="flex items-start gap-3 animate-fade-in">
+      <Avatar />
+      <div className="chat-bubble-assistant flex-1 min-w-0">
+        <div className="flex items-center gap-2.5">
+          <Dots />
+          <span className="text-caption text-ink-70 text-shimmer">
             {STAGES.join(" · ")}
           </span>
-          <Dots />
         </div>
       </div>
     </div>
@@ -35,17 +22,41 @@ function Dots() {
   return (
     <span className="inline-flex items-center gap-1">
       <span
-        className="w-1.5 h-1.5 rounded-full bg-rust animate-thinking-dot"
+        className="w-1.5 h-1.5 rounded-full bg-amber animate-thinking-dot"
         style={{ animationDelay: "0s" }}
       />
       <span
-        className="w-1.5 h-1.5 rounded-full bg-rust animate-thinking-dot"
-        style={{ animationDelay: "0.18s" }}
+        className="w-1.5 h-1.5 rounded-full bg-amber animate-thinking-dot"
+        style={{ animationDelay: "0.16s" }}
       />
       <span
-        className="w-1.5 h-1.5 rounded-full bg-rust animate-thinking-dot"
-        style={{ animationDelay: "0.36s" }}
+        className="w-1.5 h-1.5 rounded-full bg-amber animate-thinking-dot"
+        style={{ animationDelay: "0.32s" }}
       />
     </span>
   );
 }
+
+function Avatar() {
+  return (
+    <div
+      className="shrink-0 w-7 h-7 rounded-md flex items-center justify-center"
+      style={{
+        background:
+          "linear-gradient(135deg, rgba(255,181,69,0.95), rgba(214,138,31,1))",
+        boxShadow:
+          "0 0 0 1px rgba(255,181,69,0.45), 0 0 14px -2px rgba(255,181,69,0.45)",
+      }}
+    >
+      <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+        <path
+          d="M2.5 7.5 4.8 9.8l6-6.6"
+          stroke="#0a0b10"
+          strokeWidth="1.8"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    </div>
+  );
+}

components/chat/Thread.tsx

@@ -6,9 +6,7 @@ import { AssistantMessage, ErrorMessage, UserMessage } from "./Message";
 import { Thinking } from "./Thinking";
 
 export function Thread() {
-  const conv = useChatStore((s) =>
-    s.activeId ? s.conversations[s.activeId] : null
-  );
+  const conv = useChatStore((s) => (s.activeId ? s.conversations[s.activeId] : null));
   const ref = useRef<HTMLDivElement | null>(null);
 
   // Auto-scroll to bottom on new turns
@@ -22,36 +20,15 @@ export function Thread() {
 
   return (
     <div ref={ref} className="flex-1 overflow-y-auto">
-      <div className="max-w-[1040px] mx-auto px-6 md:px-10 py-10">
-        {/* Transcript header */}
-        <header className="grid grid-cols-[80px_1fr] gap-6 mb-8 animate-fade-in">
-          <div className="text-right pr-2">
-            <div className="folio-chrome">Transcript</div>
-          </div>
-          <div className="border-b-2 border-ink/30 pb-3 flex items-baseline justify-between flex-wrap gap-2">
-            <h1
-              className="italic-display text-ink"
-              style={{ fontSize: "32px", lineHeight: 1.1 }}
-            >
-              {conv.title}
-            </h1>
-            <span className="folio-chrome">
-              {conv.turns.length} turn{conv.turns.length === 1 ? "" : "s"} ·{" "}
-              {new Date(conv.createdAt).toLocaleDateString()}
-            </span>
+      <div className="max-w-[920px] mx-auto px-4 sm:px-6 py-8 space-y-6">
+        {conv.turns.map((t) => (
+          <div key={t.id} className="space-y-4">
+            <UserMessage text={t.question} />
+            {t.pending && <Thinking />}
+            {t.error && <ErrorMessage turn={t} />}
+            {t.response && <AssistantMessage turn={t} />}
           </div>
-        </header>
-
-        <div className="space-y-10">
-          {conv.turns.map((t, i) => (
-            <div key={t.id} className="space-y-8">
-              <UserMessage text={t.question} index={i} />
-              {t.pending && <Thinking />}
-              {t.error && <ErrorMessage turn={t} index={i} />}
-              {t.response && <AssistantMessage turn={t} index={i} />}
-            </div>
-          ))}
-        </div>
+        ))}
       </div>
     </div>
   );

components/chat/TopBar.tsx

@@ -6,10 +6,6 @@ import { api } from "@/lib/api";
 import { useChatStore } from "@/lib/chatStore";
 import clsx from "clsx";
 
-/**
- * Magazine masthead. Vol/Issue/folio chrome on the left, brand/title centered,
- * status pulse on the right.
- */
 export function TopBar() {
   const [pulse, setPulse] = useState<"alive" | "down" | "loading">("loading");
   const [pingMs, setPingMs] = useState<number | null>(null);
@@ -41,84 +37,64 @@ export function TopBar() {
     };
   }, []);
 
-  const today = new Date().toLocaleDateString("en-US", {
-    year: "numeric",
-    month: "short",
-    day: "2-digit",
-  });
-
   return (
-    <header className="relative z-30 sticky top-0 bg-paper/85 backdrop-blur-sm">
-      {/* Top thin issue-strip */}
-      <div className="border-b border-ink/12">
-        <div className="container-app py-1.5 flex items-center justify-between text-[10px] folio-chrome">
-          <span>Vol. I · Issue 02 · Etiya BSS Atelier · {today}</span>
-          <span className="hidden md:inline">EN · UTC+3 · ISTANBUL</span>
-        </div>
-      </div>
-
-      {/* Masthead */}
-      <div className="border-b border-ink/16">
-        <div className="container-app py-3 flex items-center justify-between gap-4">
-          {/* Left: sidebar toggle + brand */}
-          <div className="flex items-center gap-3">
-            <button
-              onClick={toggleSidebar}
-              className="hidden md:inline-flex p-2 rounded-md text-ink-50 hover:text-ink hover:bg-ink-08 transition-colors"
-              aria-label="Toggle catalog"
-            >
-              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-                <path
-                  d="M2 4h12M2 8h12M2 12h12"
-                  stroke="currentColor"
-                  strokeWidth="1.5"
-                  strokeLinecap="round"
-                />
-              </svg>
-            </button>
-            <Link href="/" className="flex items-center gap-2.5 group">
-              <Mark />
-              <div className="leading-tight">
-                <div
-                  className="italic-display text-ink"
-                  style={{ fontSize: "26px", lineHeight: 1, letterSpacing: "-0.02em" }}
-                >
-                  doc<span className="text-rust">·</span>to
-                  <span className="text-rust">·</span>lora
-                </div>
-                <div className="folio-chrome mt-1">
-                  An interrogation atelier
-                </div>
+    <header className="sticky top-0 z-30 h-14 flex items-center backdrop-blur-nav bg-canvas-deep/60 border-b border-glass-border">
+      <div className="container-app flex items-center justify-between w-full">
+        {/* Left: brand + sidebar toggle */}
+        <div className="flex items-center gap-3">
+          <button
+            onClick={toggleSidebar}
+            className="md:flex hidden p-2 rounded-md text-ink-50 hover:text-ink hover:bg-glass transition-colors"
+            aria-label="Toggle sidebar"
+          >
+            <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
+              <path
+                d="M3 5h12M3 9h12M3 13h12"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+              />
+            </svg>
+          </button>
+          <Link href="/" className="flex items-center gap-2.5 group">
+            <Mark />
+            <div className="leading-none">
+              <div className="text-body-strong text-ink">
+                doc<span className="text-amber">·</span>to
+                <span className="text-amber">·</span>lora
+              </div>
+              <div className="text-micro text-ink-50 mt-0.5 uppercase tracking-[0.18em]">
+                Etiya BSS Atelier
               </div>
-            </Link>
-          </div>
+            </div>
+          </Link>
+        </div>
 
-          {/* Right: status */}
-          <div className="flex items-center gap-3">
+        {/* Right: status pulse */}
+        <div className="flex items-center gap-3">
+          <span
+            className="hidden sm:flex items-center gap-2 rounded-pill px-3 py-1.5 bg-glass"
+            style={{ boxShadow: "0 0 0 1px rgba(255,255,255,0.08)" }}
+            aria-live="polite"
+          >
             <span
-              className="hidden sm:flex items-center gap-2 px-3 py-1.5 rounded-pill bg-paper-deep"
-              style={{ boxShadow: "0 0 0 1px rgba(25,23,19,0.18)" }}
-              aria-live="polite"
-            >
-              <span
-                className={clsx(
-                  "inline-block w-1.5 h-1.5 rounded-full transition-colors",
-                  pulse === "alive"
-                    ? "bg-status-ok animate-ink-pulse"
-                    : pulse === "down"
-                    ? "bg-rust"
-                    : "bg-ink-50"
-                )}
-              />
-              <span className="folio-chrome--ink folio-chrome">
-                {pulse === "alive"
-                  ? `Live · ${pingMs?.toFixed(0) ?? "—"}ms`
+              className={clsx(
+                "inline-block w-1.5 h-1.5 rounded-full transition-colors",
+                pulse === "alive"
+                  ? "bg-status-ok shadow-[0_0_8px_rgba(93,214,168,0.8)] animate-pulse-soft"
                   : pulse === "down"
-                  ? "Down"
-                  : "···"}
-              </span>
+                  ? "bg-status-err"
+                  : "bg-ink-50"
+              )}
+            />
+            <span className="text-micro text-ink-70 font-mono uppercase tracking-[0.15em]">
+              {pulse === "alive"
+                ? `live · ${pingMs?.toFixed(0) ?? "—"}ms`
+                : pulse === "down"
+                ? "down"
+                : "···"}
             </span>
-          </div>
+          </span>
         </div>
       </div>
     </header>
@@ -128,23 +104,23 @@ export function TopBar() {
 function Mark() {
   return (
     <span
-      className="relative inline-flex items-center justify-center w-9 h-9 rounded-md"
+      className="relative inline-flex items-center justify-center w-8 h-8 rounded-md"
       style={{
-        background: "var(--rust)",
-        boxShadow: "0 0 0 1px rgba(200,77,44,0.35), 0 1px 0 rgba(255,255,255,0.4) inset",
+        background:
+          "linear-gradient(135deg, rgba(255,181,69,0.95) 0%, rgba(214,138,31,1) 100%)",
+        boxShadow:
+          "0 0 0 1px rgba(255,181,69,0.4), 0 0 20px -2px rgba(255,181,69,0.5)",
       }}
     >
-      <span
-        className="italic-display"
-        style={{
-          fontSize: "22px",
-          lineHeight: 1,
-          color: "#f4ede0",
-          fontWeight: 400,
-        }}
-      >
-        d
-      </span>
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+        <path
+          d="M2.5 8.5 5 11l6-7"
+          stroke="#0a0b10"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
     </span>
   );
 }

tailwind.config.ts

@@ -1,13 +1,12 @@
 import type { Config } from "tailwindcss";
 
 /**
- * Etiya doc-to-lora — Risograph Folio.
+ * Etiya doc-to-lora — Twilight Atelier design tokens.
  *
- * A printed-publication aesthetic for an AI corpus. Two-color riso ink on
- * warm parchment, halftone textures instead of gradients, Fraunces italic
- * carrying display moments, magazine-folio chrome (volume, issue, folio
- * numbers, register marks). The interrogation is a transcript; the doc list
- * is a catalog; the system page is a colophon.
+ * Aesthetic: A research notebook at dusk. Deep indigo canvas warmed by a
+ * single luminous amber, atmospheric aurora behind glass surfaces, editorial
+ * serif italics carrying display moments. Sober enough for enterprise BSS,
+ * soulful enough to belong in an AI atelier.
  */
 const config: Config = {
   content: [
@@ -18,97 +17,105 @@ const config: Config = {
   theme: {
     extend: {
       colors: {
-        // ── Paper (warm parchment, never pure white)
-        paper: {
-          DEFAULT: "#f4ede0",
-          deep: "#ebe2d0",
-          shade: "#e2d6bd",
-          edge: "#d3c6a8",
+        // ── Canvas (deep indigo-charcoal with warmth)
+        canvas: {
+          DEFAULT: "#0a0b10",
+          deep: "#06070a",
+          1: "#0e0f17",
+          2: "#14151f",
+          3: "#1c1d29",
+          4: "#262735",
         },
-        // ── Ink (warm near-black, espresso)
-        ink: {
-          DEFAULT: "#191713",
-          90: "rgba(25, 23, 19, 0.92)",
-          70: "rgba(25, 23, 19, 0.68)",
-          50: "rgba(25, 23, 19, 0.46)",
-          30: "rgba(25, 23, 19, 0.26)",
-          15: "rgba(25, 23, 19, 0.14)",
-          "08": "rgba(25, 23, 19, 0.08)",
+        // ── Glass / overlay
+        glass: {
+          DEFAULT: "rgba(255, 255, 255, 0.04)",
+          stronger: "rgba(255, 255, 255, 0.07)",
+          border: "rgba(255, 255, 255, 0.10)",
+          "border-strong": "rgba(255, 255, 255, 0.16)",
         },
-        // ── Single saturated accent (Riso warm red / rust)
-        rust: {
-          DEFAULT: "#c84d2c",
-          deep: "#a43d20",
-          soft: "#e89878",
-          glow: "rgba(200, 77, 44, 0.14)",
-          ring: "rgba(200, 77, 44, 0.45)",
-          paper: "#f5d8c8",
+        // ── Ink (warm off-white text — never pure white)
+        ink: {
+          DEFAULT: "#f5f3ec",
+          90: "rgba(245, 243, 236, 0.90)",
+          70: "rgba(245, 243, 236, 0.65)",
+          50: "rgba(245, 243, 236, 0.46)",
+          30: "rgba(245, 243, 236, 0.28)",
+          15: "rgba(245, 243, 236, 0.14)",
         },
-        // ── Cool counterpoint (used sparingly: status-ok, technical chips)
-        slate: {
-          DEFAULT: "#3e5260",
-          soft: "#7a8c98",
-          paper: "#d6dde2",
+        // ── Single luminous accent (warm amber)
+        amber: {
+          DEFAULT: "#ffb545",
+          soft: "#ffd599",
+          deep: "#d68a1f",
+          glow: "rgba(255, 181, 69, 0.18)",
+          ring: "rgba(255, 181, 69, 0.45)",
         },
-        // ── Status (riso-tuned, not generic)
+        // ── Status (warm-tuned, never primary brand colors)
         status: {
-          ok: "#496c2a",
-          "ok-glow": "rgba(73, 108, 42, 0.12)",
-          warn: "#c2873a",
-          "warn-glow": "rgba(194, 135, 58, 0.14)",
-          err: "#c84d2c",
-          "err-glow": "rgba(200, 77, 44, 0.14)",
+          ok: "#5dd6a8",
+          "ok-glow": "rgba(93, 214, 168, 0.16)",
+          warn: "#ffb545",
+          "warn-glow": "rgba(255, 181, 69, 0.16)",
+          err: "#ff7a7a",
+          "err-glow": "rgba(255, 122, 122, 0.16)",
         },
       },
       fontFamily: {
-        // Display: Fraunces (variable italic, optical sizes — wonderful)
-        display: ["var(--font-fraunces)", "ui-serif", "Georgia", "serif"],
-        // UI / body: IBM Plex Sans — humanist, characterful, never Inter
-        sans: ["var(--font-plex)", "ui-sans-serif", "system-ui", "sans-serif"],
-        // Folio numerals & technical readouts
+        // Editorial italic display (Google Font: Instrument Serif)
+        serif: ["var(--font-instrument)", "ui-serif", "Georgia", "serif"],
+        // UI / body (Manrope — modern, geometric, warmer than Inter)
+        sans: ["var(--font-manrope)", "system-ui", "-apple-system", "sans-serif"],
+        // Spec-sheet readouts
         mono: ["var(--font-mono)", "ui-monospace", "SF Mono", "Menlo", "monospace"],
-        // Editorial italic shortcut
-        serif: ["var(--font-fraunces)", "ui-serif", "Georgia", "serif"],
       },
       fontSize: {
-        // Folio display ladder — Fraunces with wide tracking range
-        folio: ["120px", { lineHeight: "0.92", letterSpacing: "-0.04em", fontWeight: "300" }],
-        "display-2xl": ["88px", { lineHeight: "0.96", letterSpacing: "-0.035em", fontWeight: "300" }],
-        "display-xl": ["64px", { lineHeight: "1.0", letterSpacing: "-0.03em", fontWeight: "400" }],
-        "display-lg": ["44px", { lineHeight: "1.05", letterSpacing: "-0.02em", fontWeight: "500" }],
-        "display-md": ["32px", { lineHeight: "1.15", letterSpacing: "-0.018em", fontWeight: "500" }],
-        "display-sm": ["22px", { lineHeight: "1.25", letterSpacing: "-0.012em", fontWeight: "500" }],
-        // Body (Plex)
-        lead: ["19px", { lineHeight: "1.55", letterSpacing: "0", fontWeight: "400" }],
-        body: ["15px", { lineHeight: "1.65", letterSpacing: "0", fontWeight: "400" }],
+        // Atelier display ladder — generous, with -0.02em tracking
+        "display-2xl": ["88px", { lineHeight: "0.95", letterSpacing: "-0.04em", fontWeight: "500" }],
+        "display-xl": ["64px", { lineHeight: "1.0", letterSpacing: "-0.035em", fontWeight: "500" }],
+        "display-lg": ["44px", { lineHeight: "1.05", letterSpacing: "-0.025em", fontWeight: "600" }],
+        "display-md": ["32px", { lineHeight: "1.12", letterSpacing: "-0.02em", fontWeight: "600" }],
+        "display-sm": ["24px", { lineHeight: "1.2", letterSpacing: "-0.015em", fontWeight: "600" }],
+        // Body
+        lead: ["20px", { lineHeight: "1.5", letterSpacing: "-0.005em", fontWeight: "400" }],
+        body: ["15px", { lineHeight: "1.6", letterSpacing: "0", fontWeight: "400" }],
         "body-strong": ["15px", { lineHeight: "1.6", letterSpacing: "0", fontWeight: "600" }],
         caption: ["13px", { lineHeight: "1.5", letterSpacing: "0", fontWeight: "400" }],
         "caption-strong": ["13px", { lineHeight: "1.4", letterSpacing: "0.005em", fontWeight: "600" }],
-        // Folio chrome — heavy uppercase tracking
-        folio_chrome: ["10px", { lineHeight: "1.4", letterSpacing: "0.22em", fontWeight: "600" }],
-        micro: ["11px", { lineHeight: "1.4", letterSpacing: "0.16em", fontWeight: "500" }],
+        micro: ["11px", { lineHeight: "1.4", letterSpacing: "0.05em", fontWeight: "500" }],
+      },
+      spacing: {
+        section: "96px",
       },
       borderRadius: {
         none: "0",
-        xs: "2px",
-        sm: "4px",
-        DEFAULT: "6px",
-        md: "8px",
-        lg: "12px",
+        xs: "6px",
+        sm: "10px",
+        DEFAULT: "12px",
+        md: "14px",
+        lg: "20px",
+        xl: "28px",
+        "2xl": "36px",
         pill: "9999px",
       },
       boxShadow: {
-        // No glassy floats — flat printed surfaces with hairline rules
-        rule: "0 1px 0 rgba(25, 23, 19, 0.14)",
-        "rule-strong": "0 1px 0 rgba(25, 23, 19, 0.26)",
-        "rule-up": "0 -1px 0 rgba(25, 23, 19, 0.14)",
-        // A faint press shadow for cards (almost imperceptible)
-        press: "0 0 0 1px rgba(25,23,19,0.08), 0 1px 0 rgba(25,23,19,0.06)",
-        // Rust ring for accent buttons
-        rust:
-          "0 0 0 1px rgba(200,77,44,0.45), 0 6px 18px -6px rgba(200,77,44,0.35)",
+        // The single sanctioned card glow — for elevated surfaces
+        glass:
+          "0 1px 0 rgba(255,255,255,0.05) inset, 0 0 0 1px rgba(255,255,255,0.08), 0 16px 40px -16px rgba(0,0,0,0.6)",
+        "glass-lg":
+          "0 1px 0 rgba(255,255,255,0.06) inset, 0 0 0 1px rgba(255,255,255,0.10), 0 28px 80px -24px rgba(0,0,0,0.7)",
+        // Amber accent glow for active CTAs
+        amber:
+          "0 0 0 1px rgba(255,181,69,0.42), 0 0 32px -8px rgba(255,181,69,0.45)",
+        // Hairline ring (replaces border-1 for crisp edges on glass)
+        hairline: "0 0 0 1px rgba(255,255,255,0.08)",
+        "hairline-strong": "0 0 0 1px rgba(255,255,255,0.16)",
+      },
+      backdropBlur: {
+        glass: "16px",
+        nav: "24px",
       },
       transitionTimingFunction: {
+        // Smooth deceleration — feels like Apple's spring
         atelier: "cubic-bezier(0.32, 0.72, 0, 1)",
         "out-expo": "cubic-bezier(0.16, 1, 0.3, 1)",
       },
@@ -120,10 +127,10 @@ const config: Config = {
         "stagger-2": "fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.16s both",
         "stagger-3": "fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.24s both",
         "stagger-4": "fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.32s both",
-        rule: "rule 0.5s cubic-bezier(0.16, 1, 0.3, 1) both",
-        "rule-2": "rule 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both",
-        "rule-3": "rule 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both",
-        "ink-pulse": "inkPulse 2.4s ease-in-out infinite",
+        shimmer: "shimmer 2.4s ease-in-out infinite",
+        "pulse-soft": "pulseSoft 2.4s ease-in-out infinite",
+        "aurora-1": "aurora1 22s ease-in-out infinite alternate",
+        "aurora-2": "aurora2 28s ease-in-out infinite alternate",
         "thinking-dot": "thinkingDot 1.4s ease-in-out infinite",
       },
       keyframes: {
@@ -132,20 +139,28 @@ const config: Config = {
           "100%": { opacity: "1" },
         },
         fadeUp: {
-          "0%": { opacity: "0", transform: "translateY(10px)" },
+          "0%": { opacity: "0", transform: "translateY(12px)" },
           "100%": { opacity: "1", transform: "translateY(0)" },
         },
-        rule: {
-          "0%": { transform: "scaleX(0)", transformOrigin: "left" },
-          "100%": { transform: "scaleX(1)", transformOrigin: "left" },
+        shimmer: {
+          "0%, 100%": { opacity: "0.4" },
+          "50%": { opacity: "0.85" },
+        },
+        pulseSoft: {
+          "0%, 100%": { opacity: "0.7", transform: "scale(1)" },
+          "50%": { opacity: "1", transform: "scale(1.04)" },
+        },
+        aurora1: {
+          "0%": { transform: "translate(-10%, -8%) scale(1)" },
+          "100%": { transform: "translate(8%, 10%) scale(1.15)" },
         },
-        inkPulse: {
-          "0%, 100%": { opacity: "0.65" },
-          "50%": { opacity: "1" },
+        aurora2: {
+          "0%": { transform: "translate(8%, 10%) scale(1.1)" },
+          "100%": { transform: "translate(-6%, -4%) scale(1)" },
         },
         thinkingDot: {
-          "0%, 80%, 100%": { opacity: "0.18" },
-          "40%": { opacity: "1" },
+          "0%, 80%, 100%": { opacity: "0.25", transform: "translateY(0)" },
+          "40%": { opacity: "1", transform: "translateY(-3px)" },
         },
       },
     },