Visual/IA pass: brand mark, real header, mobile bottom tabs, topic browse

- Logo mark: SVG rising-dots wave (sage dots + warm gold peak = 'upbeat bytes'),
  used as favicon/PWA icon and in the header.
- Header: full-width app bar — mark + mixed-type wordmark (Upbeat serif ink /
  Bytes sans sage) on the left, housed Boundaries/History utility cluster on the
  right (desktop). No more floating text links.
- Mobile: fixed bottom tab bar (Today / Browse / You); utilities move into a
  'You' sheet. One-handed, modern, calm.
- Browse: moods stay the primary front door; added a quiet 'Explore by topic'
  section (existing topics) below the content — selecting a topic loads its feed.
- Layout trimmed (header now in-page, full width); footer keeps clearance for the
  bottom bar.

Phase A of the consensus pass; Phase B (add technology + learning topics and
reclassify) is next. Live site untouched until publish.sh.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/static/favicon.svg

@@ -1,5 +1,8 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-  <rect width="64" height="64" rx="14" fill="#2f7d5b"/>
-  <circle cx="32" cy="29" r="11" fill="#faf6ee"/>
-  <path d="M14 44 q12 9 24 3 q9 -4 12 1" stroke="#faf6ee" stroke-width="3.4" fill="none" stroke-linecap="round"/>
+  <rect width="64" height="64" rx="15" fill="#2f7d5b"/>
+  <path d="M13 45 Q26 41 35 26 T53 14" fill="none" stroke="#faf6ee" stroke-width="3" opacity="0.32" stroke-linecap="round"/>
+  <circle cx="13" cy="45" r="3.6" fill="#faf6ee"/>
+  <circle cx="25" cy="37" r="4" fill="#faf6ee"/>
+  <circle cx="38" cy="26" r="4.4" fill="#faf6ee"/>
+  <circle cx="51" cy="14" r="6" fill="#e8c87a"/>
 </svg>