feat: rebrand to website design, Apple HIG icons, ASCII onboarding animation

- Align Electron CSS with website design schema (Inter font, #FBFAF5/#191919
  palette, #213448/#94B4C1 accent)
- Generate proper app icons from logo.svg via cairosvg (no more Pillow ladder)
- Square bg icons for Electron/tray (Apple HIG — OS applies squircle mask)
- Circle bg icons for website favicon only
- Add scrolling ASCII agent-activity animation to onboarding hero left panel
- Remove dock.setIcon() — let macOS use bundle .icns with system mask
- Fix goal title overflow with min-w-0 for flex truncation

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

src/renderer/styles.css

@@ -1,30 +1,32 @@
 @import "tailwindcss";
 
 @theme {
-  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB",
+  --font-sans: "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB",
     "Noto Sans CJK SC", Helvetica, Arial, sans-serif;
+  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
   --font-mono: "JetBrains Mono Variable", "Microsoft YaHei", ui-monospace,
     SFMono-Regular, Menlo, Monaco, Consolas, monospace;
 }
 
+/* ─── Light theme — aligned with website ─── */
 :root {
   color-scheme: light;
-  --bg: #f7f8fa;
-  --bg-subtle: #ffffff;
-  --panel: #ffffff;
-  --panel-soft: #f0f2f5;
-  --panel-strong: #f7f8fa;
-  --line: rgba(50, 65, 85, 0.08);
-  --line-strong: rgba(50, 65, 85, 0.15);
-  --text: #1a1d24;
-  --muted: #6b7280;
-  --muted-strong: #4b5563;
-  --accent: #4a5d7a;
-  --accent-text: #3d5070;
-  --accent-soft: #edf1f7;
-  --accent-hover: #3d4f6d;
-  --text-on-accent: #ffffff;
+  --bg: #FBFAF5;
+  --bg-subtle: #FFFFFF;
+  --panel: #FFFFFF;
+  --panel-soft: #F3F2ED;
+  --panel-strong: #FBFAF5;
+  --line: rgba(25, 25, 25, 0.08);
+  --line-strong: rgba(25, 25, 25, 0.15);
+  --text: #191919;
+  --muted: #7a7a72;
+  --muted-strong: #565650;
+  --accent: #213448;
+  --accent-text: #213448;
+  --accent-soft: rgba(33, 52, 72, 0.07);
+  --accent-hover: #192838;
+  --text-on-accent: #FBFAF5;
   --danger: #c53030;
   --danger-soft: #fef2f2;
   --warn: #b45309;
@@ -37,23 +39,24 @@
   color-scheme: light;
 }
 
+/* ─── Dark theme — aligned with website ─── */
 :root[data-theme="dark"] {
   color-scheme: dark;
-  --bg: #16181f;
-  --bg-subtle: #1a1c24;
-  --panel: #1e2028;
-  --panel-soft: #24262e;
-  --panel-strong: #1c1e26;
-  --line: rgba(148, 163, 190, 0.12);
-  --line-strong: rgba(148, 163, 190, 0.2);
-  --text: #edf0f7;
-  --muted: #8b95a5;
-  --muted-strong: #b0b8c8;
-  --accent: #7b9cc4;
-  --accent-text: #7b9cc4;
-  --accent-soft: rgba(123, 156, 196, 0.14);
-  --accent-hover: #93b0d4;
-  --text-on-accent: #ffffff;
+  --bg: #191919;
+  --bg-subtle: #1e1e1e;
+  --panel: #222222;
+  --panel-soft: #2a2a2a;
+  --panel-strong: #1c1c1c;
+  --line: rgba(251, 250, 245, 0.08);
+  --line-strong: rgba(251, 250, 245, 0.15);
+  --text: #FBFAF5;
+  --muted: #8a8a84;
+  --muted-strong: #b8b8b2;
+  --accent: #94B4C1;
+  --accent-text: #94B4C1;
+  --accent-soft: rgba(148, 180, 193, 0.12);
+  --accent-hover: #a8c4cf;
+  --text-on-accent: #191919;
   --danger: #f87171;
   --danger-soft: rgba(248, 113, 113, 0.12);
   --warn: #f59e0b;
@@ -65,21 +68,21 @@
 @media (prefers-color-scheme: dark) {
   :root[data-theme="system"] {
     color-scheme: dark;
-    --bg: #16181f;
-    --bg-subtle: #1a1c24;
-    --panel: #1e2028;
-    --panel-soft: #24262e;
-    --panel-strong: #1c1e26;
-    --line: rgba(148, 163, 190, 0.12);
-    --line-strong: rgba(148, 163, 190, 0.2);
-    --text: #edf0f7;
-    --muted: #8b95a5;
-    --muted-strong: #b0b8c8;
-    --accent: #7b9cc4;
-    --accent-text: #7b9cc4;
-    --accent-soft: rgba(123, 156, 196, 0.14);
-    --accent-hover: #93b0d4;
-    --text-on-accent: #ffffff;
+    --bg: #191919;
+    --bg-subtle: #1e1e1e;
+    --panel: #222222;
+    --panel-soft: #2a2a2a;
+    --panel-strong: #1c1c1c;
+    --line: rgba(251, 250, 245, 0.08);
+    --line-strong: rgba(251, 250, 245, 0.15);
+    --text: #FBFAF5;
+    --muted: #8a8a84;
+    --muted-strong: #b8b8b2;
+    --accent: #94B4C1;
+    --accent-text: #94B4C1;
+    --accent-soft: rgba(148, 180, 193, 0.12);
+    --accent-hover: #a8c4cf;
+    --text-on-accent: #191919;
     --danger: #f87171;
     --danger-soft: rgba(248, 113, 113, 0.12);
     --warn: #f59e0b;
@@ -133,11 +136,11 @@ select {
 
 ::-webkit-scrollbar-thumb {
   border-radius: 999px;
-  background: rgba(60, 75, 100, 0.2);
+  background: rgba(25, 25, 25, 0.15);
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: rgba(60, 75, 100, 0.32);
+  background: rgba(25, 25, 25, 0.25);
 }
 
 .mono {
@@ -147,7 +150,7 @@ select {
 .surface {
   background: var(--panel);
   border: 1px solid var(--line);
-  box-shadow: 0 1px 3px rgba(26, 29, 36, 0.06), 0 0 0 0.5px rgba(26, 29, 36, 0.03);
+  box-shadow: 0 1px 3px rgba(25, 25, 25, 0.06), 0 0 0 0.5px rgba(25, 25, 25, 0.03);
 }
 
 .focus-ring {
@@ -160,9 +163,19 @@ select {
 
 .focus-ring:focus-visible {
   box-shadow:
-    0 0 0 1px rgba(74, 93, 122, 0.5),
-    0 0 0 4px rgba(74, 93, 122, 0.12);
-  border-color: rgba(74, 93, 122, 0.35);
+    0 0 0 1px rgba(33, 52, 72, 0.5),
+    0 0 0 4px rgba(33, 52, 72, 0.12);
+  border-color: rgba(33, 52, 72, 0.35);
+}
+
+/* ─── ASCII animation ─── */
+@keyframes ascii-scroll-up {
+  0% { transform: translateY(0); }
+  100% { transform: translateY(-50%); }
+}
+
+.ascii-scroll-track {
+  animation: ascii-scroll-up 80s linear infinite;
 }
 
 @media (prefers-reduced-motion: reduce) {