feat(app): retraced brand flame — one mark for icon, splash, sidebar, About

- app/build/icon.svg + icon.png: hand-retraced vector of the approved
  reference (three flat layers: coral #e86c39, amber #f7943c, cream
  #fecb8b on charcoal #231613), Big Sur squircle proportions (824/1024,
  r185, transparent corners, no glow), flame ~72% optically centered;
  8 render-and-compare iterations against the reference; legible at 16px
- FlameMark retraced to the same three paths (flat fills, no gradients);
  flicker now animates the cream core only
- AboutModal renders FlameMark instead of the old gradient flame.png;
  orphaned 70KB asset removed

253/253, typecheck + build green.

app/build/icon.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024">
+  <!-- CodeBurn app icon. Charcoal squircle (Big Sur proportion: 824 square, r185,
+       centered in 1024) + three-layer flame: coral outer, amber mid, cream core. -->
+  <rect x="100" y="100" width="824" height="824" rx="185" ry="185" fill="#231613"/>
+  <!-- outer coral: left horn + tall right-curling tip + right horn, round base -->
+  <path fill="#e86c39" d="M507 786C438 788 352 776 300 736C254 700 248 646 264 588C276 532 288 466 306 420C315 398 324 382 332 374C339 368 346 369 350 382C366 424 393 484 418 526C434 474 452 394 466 332C478 280 490 234 500 198C508 178 524 172 542 186C566 206 590 232 608 264C612 314 620 394 640 444C648 466 660 470 668 460C688 428 716 398 740 392C748 389 754 396 754 412C762 452 776 498 787 552C800 622 784 692 728 732C668 778 574 786 507 786Z"/>
+  <!-- amber mid flame -->
+  <path fill="#f7943c" d="M508 770C446 772 370 760 322 722C282 692 276 642 290 590C300 546 310 498 328 464C338 446 352 446 360 462C376 424 398 372 416 342C430 318 452 314 466 338C478 360 482 398 490 426C502 406 516 386 536 382C558 378 574 396 584 426C598 468 616 514 642 550C664 580 674 630 658 674C634 720 574 770 508 770Z"/>
+  <!-- cream core -->
+  <path fill="#fecb8b" d="M507 772C452 772 402 744 382 694C364 654 368 606 390 570C402 548 412 510 418 474C424 450 438 442 452 450C466 458 472 482 478 504C483 516 494 520 505 517C517 514 524 504 530 488C540 468 556 464 570 476C584 488 590 518 606 550C630 594 632 646 612 686C590 730 552 772 507 772Z"/>
+</svg>

app/renderer/components/AboutModal.tsx

@@ -1,7 +1,7 @@
 import { useEffect, type MouseEvent, type ReactNode } from 'react'
 
 import { version } from '../../package.json'
-import flameLogo from '../assets/flame.png'
+import { FlameMark } from './FlameMark'
 import { codeburn } from '../lib/ipc'
 
 export type SocialLink = {
@@ -39,7 +39,7 @@ export function AboutModal({ socials, onClose }: { socials: SocialLink[]; onClos
         <button className="about-modal-close" type="button" aria-label="Close About" onClick={onClose}>×</button>
         <div className="about-modal-grid">
           <div className="about-modal-hero">
-            <img className="about-modal-logo" src={flameLogo} alt="" />
+            <span className="about-modal-logo" aria-hidden="true"><FlameMark size={52} /></span>
             <div className="about-modal-name" id="about-modal-title">CodeBurn</div>
             <div className="about-modal-version">v{version}</div>
             <div className="about-modal-tagline">Know where every token goes, across every AI coding tool.</div>

app/renderer/components/FlameMark.tsx

@@ -1,47 +1,41 @@
-import { useId, useMemo } from 'react'
+import { useMemo } from 'react'
 
 import { motionEnabled } from '../lib/motion'
 
-// Flame silhouette: Bootstrap Icons `fire` (MIT License, © The Bootstrap Authors,
-// https://github.com/twbs/icons/blob/main/icons/fire.svg). A filled teardrop
-// flame whose tip curls right, with a small inner negative-space tongue at the
-// bottom center -- the closest MIT-licensed match to the menubar's SF Symbol
-// `flame.fill`. Path embedded verbatim; only the fill is swapped for the brand
-// gradient.
-const FLAME_PATH =
-  'M8 16c3.314 0 6-2 6-5.5 0-1.5-.5-4-2.5-6 .25 1.5-1.25 2-1.25 2C11 4 9 .5 6 0c.357 2 .5 4-2 6-1.25 1-2 2.729-2 4.5C2 14 4.686 16 8 16m0-1c-1.657 0-3-1-3-2.75 0-.75.25-2 1.25-3C6.125 10 7 10.5 7 10.5c-.375-1.25.5-3.25 2-3.5-.179 1-.25 2 1 3 .625.5 1 1.364 1 2.25C11 14 9.657 15 8 15'
+// Hand-authored three-layer flame, retraced from the approved CodeBurn app icon
+// (app/build/icon.svg) minus the squircle: coral outer silhouette (left tongue +
+// tall right-curling tip + right tongue), a warmer amber mid layer, and a bright
+// cream core. Same path data and sampled fills as the icon so the splash, sidebar
+// and dock read as one mark. Coordinates share the icon's 1024 space; the viewBox
+// frames just the flame.
+const CORAL =
+  'M507 786C438 788 352 776 300 736C254 700 248 646 264 588C276 532 288 466 306 420C315 398 324 382 332 374C339 368 346 369 350 382C366 424 393 484 418 526C434 474 452 394 466 332C478 280 490 234 500 198C508 178 524 172 542 186C566 206 590 232 608 264C612 314 620 394 640 444C648 466 660 470 668 460C688 428 716 398 740 392C748 389 754 396 754 412C762 452 776 498 787 552C800 622 784 692 728 732C668 778 574 786 507 786Z'
+const AMBER =
+  'M508 770C446 772 370 760 322 722C282 692 276 642 290 590C300 546 310 498 328 464C338 446 352 446 360 462C376 424 398 372 416 342C430 318 452 314 466 338C478 360 482 398 490 426C502 406 516 386 536 382C558 378 574 396 584 426C598 468 616 514 642 550C664 580 674 630 658 674C634 720 574 770 508 770Z'
+const CREAM =
+  'M507 772C452 772 402 744 382 694C364 654 368 606 390 570C402 548 412 510 418 474C424 450 438 442 452 450C466 458 472 482 478 504C483 516 494 520 505 517C517 514 524 504 530 488C540 468 556 464 570 476C584 488 590 518 606 550C630 594 632 646 612 686C590 730 552 772 507 772Z'
 
 /**
- * Brand flame mark, mirroring the menubar's `BurnFlame`. The vertical gradient
- * reproduces that view's Ember-preset stops (glow -> light -> base -> deep, from
- * base to tip). Shared between the launch splash (large) and the sidebar (small).
- * `live` gives the whole mark an all-but-imperceptible idle flicker in the
- * sidebar; its phase is randomized once per mount so a row of flames never
- * metronomes. All motion is gated by motionEnabled().
+ * Brand flame mark. Shared between the launch splash (large) and the sidebar
+ * (small). `live` gives the mark an all-but-imperceptible idle flicker on its
+ * bright core; the flicker phase is randomized once per mount so a row of flames
+ * never metronomes. All motion is gated by motionEnabled().
  */
 export function FlameMark({ size = 20, live = false }: { size?: number; live?: boolean }) {
-  const uid = useId()
-  const grad = `fm-grad-${uid}`
   // Random negative delay so the loop starts mid-cycle at a different point each
   // mount. Computed once; only takes effect when the flicker class is present.
   const flickerStyle = useMemo(() => ({ animationDelay: `-${(Math.random() * 4 + 1).toFixed(2)}s` }), [])
   const flicker = live && motionEnabled()
 
   return (
-    <svg className="flamemark" width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true">
-      <defs>
-        <linearGradient id={grad} x1="0" y1="1" x2="0" y2="0">
-          <stop offset="0" stopColor="#f0a070" />
-          <stop offset=".33" stopColor="#e8774a" />
-          <stop offset=".67" stopColor="#c9521d" />
-          <stop offset="1" stopColor="#8b3e13" />
-        </linearGradient>
-      </defs>
+    <svg className="flamemark" width={size} height={size} viewBox="196 157 650 650" fill="none" aria-hidden="true">
+      <path fill="#e86c39" d={CORAL} />
+      <path fill="#f7943c" d={AMBER} />
       <path
         className={flicker ? 'fm-flicker' : undefined}
         style={flicker ? flickerStyle : undefined}
-        fill={`url(#${grad})`}
-        d={FLAME_PATH}
+        fill="#fecb8b"
+        d={CREAM}
       />
     </svg>
   )

app/renderer/styles/plain.css

@@ -153,7 +153,7 @@ body { overflow: hidden; background: var(--bg); color: var(--ink); }
   display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 24px;
   border-right: 1px solid var(--line2); text-align: center;
 }
-.about-modal-logo { width: 52px; height: 52px; margin-bottom: 12px; object-fit: contain; }
+.about-modal-logo { display: inline-block; width: 52px; height: 52px; margin-bottom: 12px; }
 .about-modal-name { font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
 .about-modal-version { margin-top: 5px; color: var(--mut2); font-size: 11.5px; font-variant-numeric: tabular-nums; }
 .about-modal-tagline { max-width: 32ch; margin: 11px auto 0; color: var(--mut); font-size: 12.5px; line-height: 1.5; }