feat: add theme system, fonts, graph styling, rename Overview→Tasks

- Terracotta (light) and Carbon (dark) themes with toggle
- Inknut Antiqua headings, DM Sans body
- Dot grid background on EntityGraph and GraphBackground
- Theme-adaptive graph colors on EntityGraph
- Art Nouveau chat styling (borders, underlines, blockquote quotes)
- Bullet point styles in chat prose
- Task goal in header, rename Overview→Tasks, New Task labels
- Logo uses var(--primary) for theme awareness

web/src/pages/Chat.svelte

@@ -132,11 +132,11 @@
         {#each $messages as msg, i (msg.id)}
           <div class="flex flex-col gap-1.5 {msg.role === 'user' ? 'items-end' : 'items-start'}">
             {#if msg.role === 'user'}
-              <div class="max-w-[85%] rounded-2xl rounded-br-sm bg-primary px-4 py-2.5 text-sm text-primary-foreground whitespace-pre-wrap">{msg.text}</div>
+              <div class="max-w-[85%] rounded-2xl rounded-br-sm bg-primary px-4 py-2.5 text-sm text-primary-foreground whitespace-pre-wrap user-msg">{msg.text}</div>
             {:else}
               <div class="flex w-full flex-col gap-2">
                 {#if msg.text}
-                  <div class="prose-chat max-w-none text-sm leading-relaxed">
+                  <div class="prose-chat max-w-none text-sm leading-relaxed assistant-msg">
                     <!-- eslint-disable-next-line svelte/no-at-html-tags — sanitized via DOMPurify -->
                     {@html render(msg.text)}
                   </div>
@@ -194,7 +194,7 @@
       </div>
     {/each}
 
-    <div class="border-t bg-card/50 p-3">
+    <div class="border-t bg-card/50 p-3 input-ornament relative">
       <form
         class="mx-auto flex max-w-3xl items-end gap-2"
         onsubmit={(e) => {
@@ -245,63 +245,169 @@
 </div>
 
 <style>
-  /* Minimal markdown styling for assistant messages. */
+  /* ── Art Nouveau chat styling ── */
+
+  /* Assistant message wrapper — ornamental frame */
+  .assistant-msg {
+    position: relative;
+    border-left: 2px solid var(--primary);
+    border-image: linear-gradient(to bottom, var(--primary), transparent 80%) 1;
+    padding-left: 1rem;
+  }
+
+  /* User message — softened bubble with inner glow */
+  .user-msg {
+    box-shadow: 0 0 12px -4px var(--primary);
+    border: 1px solid var(--primary);
+  }
+
+  /* Prose overrides */
   .prose-chat :global(p) {
     margin: 0 0 0.5rem;
   }
   .prose-chat :global(p:last-child) {
     margin-bottom: 0;
   }
+
   .prose-chat :global(ul),
   .prose-chat :global(ol) {
     margin: 0 0 0.5rem;
     padding-left: 1.25rem;
   }
+  .prose-chat :global(ul) {
+    list-style-type: disc;
+  }
+  .prose-chat :global(ol) {
+    list-style-type: decimal;
+  }
   .prose-chat :global(li) {
     margin-bottom: 0.125rem;
+    padding-left: 0.25rem;
   }
+  .prose-chat :global(li::marker) {
+    color: var(--primary);
+  }
+
   .prose-chat :global(code) {
     background: var(--muted);
+    border: 1px solid var(--border);
     border-radius: 4px;
-    padding: 0.1em 0.35em;
+    padding: 0.15em 0.4em;
     font-family: var(--font-mono);
     font-size: 0.85em;
+    color: var(--primary);
   }
+
   .prose-chat :global(pre) {
     background: var(--muted);
     border: 1px solid var(--border);
     border-radius: 8px;
-    padding: 0.625rem 0.75rem;
+    padding: 0.75rem 0.875rem;
     overflow-x: auto;
     margin: 0 0 0.5rem;
+    position: relative;
+  }
+  .prose-chat :global(pre)::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: linear-gradient(to right, transparent, var(--primary), transparent);
+    opacity: 0.4;
   }
   .prose-chat :global(pre code) {
     background: none;
     padding: 0;
     font-size: 0.8125rem;
+    color: inherit;
+    border: none;
   }
+
   .prose-chat :global(h1),
   .prose-chat :global(h2),
   .prose-chat :global(h3) {
     font-weight: 600;
     margin: 0.75rem 0 0.375rem;
     font-size: 1em;
+    position: relative;
+    display: inline-block;
   }
+  .prose-chat :global(h1)::after,
+  .prose-chat :global(h2)::after,
+  .prose-chat :global(h3)::after {
+    content: '';
+    display: block;
+    height: 1px;
+    margin-top: 2px;
+    background: linear-gradient(to right, var(--primary), transparent);
+    opacity: 0.5;
+  }
+
   .prose-chat :global(table) {
     border-collapse: collapse;
     margin: 0 0 0.5rem;
     font-size: 0.8125rem;
   }
+  .prose-chat :global(th) {
+    background: var(--muted);
+    font-weight: 600;
+  }
   .prose-chat :global(th),
   .prose-chat :global(td) {
     border: 1px solid var(--border);
-    padding: 0.25rem 0.5rem;
+    padding: 0.3rem 0.6rem;
     text-align: left;
   }
+
   .prose-chat :global(blockquote) {
-    border-left: 3px solid var(--border);
+    border-left: 3px solid var(--primary);
     padding-left: 0.75rem;
     color: var(--muted-foreground);
     margin: 0 0 0.5rem;
+    font-style: italic;
+    position: relative;
+  }
+  .prose-chat :global(blockquote)::before {
+    content: '“';
+    position: absolute;
+    left: -0.15rem;
+    top: -0.35rem;
+    font-size: 1.5rem;
+    color: var(--primary);
+    opacity: 0.6;
+    font-style: normal;
+    line-height: 1;
+  }
+
+  .prose-chat :global(hr) {
+    border: none;
+    height: 1px;
+    margin: 0.75rem 0;
+    background: linear-gradient(to right, transparent, var(--border) 20%, var(--border) 80%, transparent);
+  }
+
+  .prose-chat :global(strong) {
+    color: var(--primary);
+  }
+
+  .prose-chat :global(a) {
+    color: var(--primary);
+    text-decoration: underline;
+    text-decoration-style: dotted;
+    text-underline-offset: 2px;
+  }
+
+  /* Input area ornament */
+  .input-ornament::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 2rem;
+    right: 2rem;
+    height: 1px;
+    background: linear-gradient(to right, transparent, var(--primary), transparent);
+    opacity: 0.3;
   }
 </style>