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/lib/components/GraphBackground.svelte

@@ -2,7 +2,7 @@
   import { onMount } from 'svelte'
   import { forceSimulation, forceLink, forceManyBody, forceCenter, forceCollide, type Simulation } from 'd3-force'
   import { fetchGraph, type Health } from '$lib/api'
-  import { mode } from 'mode-watcher'
+  import { getTheme } from '$lib/stores/theme.svelte'
 
   // Ambient, non-interactive knowledge-graph backdrop. Purely decorative: the
   // host places this behind the page with pointer-events:none, so it never
@@ -102,6 +102,28 @@
   let dpr = 1
   let w = 0
   let h = 0
+  let dotCanvas: HTMLCanvasElement | null = null
+  let lastDotDark: boolean | null = null
+
+  function drawDots(dark: boolean) {
+    if (!dotCanvas) {
+      dotCanvas = document.createElement('canvas')
+    }
+    dotCanvas.width = Math.round(w * dpr)
+    dotCanvas.height = Math.round(h * dpr)
+    const dctx = dotCanvas.getContext('2d')!
+    dctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+    dctx.clearRect(0, 0, w, h)
+    dctx.fillStyle = dark ? 'rgba(255,255,255,0.12)' : 'rgba(0,0,0,0.12)'
+    const spacing = 12
+    for (let x = spacing; x < w; x += spacing) {
+      for (let y = spacing; y < h; y += spacing) {
+        dctx.beginPath()
+        dctx.arc(x, y, 0.7, 0, Math.PI * 2)
+        dctx.fill()
+      }
+    }
+  }
 
   function onPointerMove(e: PointerEvent) {
     if (!host) return
@@ -118,6 +140,7 @@
     h = host.clientHeight
     canvas.width = Math.round(w * dpr)
     canvas.height = Math.round(h * dpr)
+    dotCanvas = null // force redraw on next frame
   }
 
   function colorForNode(n: SimNode): string {
@@ -145,10 +168,14 @@
     const driftY = Math.cos(ts * 0.043) * 60 + Math.sin(ts * 0.023) * 30
     const zoom = 0.82 + Math.sin(ts * 0.03) * 0.03
 
-    const dark = mode.current !== 'light'
+    const dark = getTheme() !== 'light'
     ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
     ctx.clearRect(0, 0, w, h)
 
+    if (lastDotDark !== dark) { dotCanvas = null; lastDotDark = dark }
+    if (!dotCanvas) drawDots(dark)
+    ctx.drawImage(dotCanvas!, 0, 0)
+
     const cx = w / 2
     const cy = h / 2