feat: desert dusk theme with animated mule and pixel-art scenery

Replaces the cool-grey neutral theme with a warm desert dusk palette
pulled from a new pixel-art TopBar: a tiled, right-to-left scrolling
desert under a sky gradient, a 6-frame walking mule sprite where the
logo used to sit, and an ASCII block-character title on a black plate.
The active heap card now uses a cactus/dune scene as its stack
backdrop, and the "Built with hubris" mark moves into the TopBar's
bottom-right corner (AppFooter component removed).

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

frontend/src/components/layout/TopBar.tsx

@@ -1,5 +1,6 @@
 import { PanelLeftOpen, PanelRightOpen } from 'lucide-react'
-import muliLogo from '../../assets/muli-logo.png'
+import desertBg from '../../assets/desert.png'
+import muleSprites from '../../assets/mule-sprites.png'
 
 interface TopBarProps {
   leftSidebarOpen: boolean
@@ -8,10 +9,34 @@ interface TopBarProps {
   onExpandRight: () => void
 }
 
+// Block-character ASCII rendering of "Mulimago" — sits on a black plate
+// in place of the old text title.
+const MULIMAGO_ASCII = `▖  ▖  ▜ ▘
+▛▖▞▌▌▌▐ ▌▛▛▌▀▌▛▌█▌
+▌▝ ▌▙▌▐▖▌▌▌▌█▌▙▌▙▖`
+
+const ROMAN_PAIRS: [number, string][] = [
+  [1000, 'M'], [900, 'CM'], [500, 'D'], [400, 'CD'],
+  [100, 'C'], [90, 'XC'], [50, 'L'], [40, 'XL'],
+  [10, 'X'], [9, 'IX'], [5, 'V'], [4, 'IV'], [1, 'I'],
+]
+
+function toRoman(n: number): string {
+  let result = ''
+  for (const [value, symbol] of ROMAN_PAIRS) {
+    while (n >= value) {
+      result += symbol
+      n -= value
+    }
+  }
+  return result
+}
+
 /**
- * Slim top bar — logo on the left, settings gear on the right. The
- * active heap badge moved into the Heaps panel in the left sidebar
- * (where it actually relates to the heap rows the user navigates to).
+ * Slim top bar — animated walking mule on the left over a tiled desert
+ * backdrop, settings gear on the right. The active heap badge moved into
+ * the Heaps panel in the left sidebar (where it actually relates to the
+ * heap rows the user navigates to).
  *
  * Also hosts the "expand sidebar" affordances: when a side panel is
  * collapsed, a small panel-open icon appears on the corresponding edge
@@ -26,32 +51,68 @@ export function TopBar({
   onExpandRight,
 }: TopBarProps) {
   return (
-    <header className="flex h-12 items-center justify-between border-b border-border bg-surface px-4">
-      <div className="flex items-center gap-2">
+    <header
+      className="relative flex h-16 items-center justify-between overflow-hidden border-b border-border px-4"
+      style={{
+        // Two layers: desert tile on top (scrolls right→left), dusk-sky
+        // gradient underneath (static). Tile width is fixed at 200px so
+        // the `desert-scroll` keyframe can move by exactly one tile and
+        // loop seamlessly.
+        backgroundImage: `url(${desertBg}), linear-gradient(to bottom, #2b3a5c 0%, #6b6b8a 35%, #d68a5c 75%, #f0c188 100%)`,
+        backgroundRepeat: 'repeat-x, no-repeat',
+        backgroundSize: '200px 100%, 100% 100%',
+        backgroundPosition: '0 bottom, 0 0',
+        imageRendering: 'pixelated',
+        animation: 'desert-scroll 24s linear infinite',
+      }}
+    >
+      <div className="relative flex items-center gap-3">
         {!leftSidebarOpen && (
           <button
             onClick={onExpandLeft}
-            className="rounded p-1.5 text-text-muted transition-colors hover:bg-surface-2 hover:text-text"
+            className="rounded bg-black/30 p-1.5 text-text-muted backdrop-blur-sm transition-colors hover:bg-black/50 hover:text-text"
             title="Expand panel (Tab)"
             aria-label="Expand left panel"
           >
             <PanelLeftOpen className="h-4 w-4" />
           </button>
         )}
-        <img src={muliLogo} alt="Mulimago" className="h-7 w-7 object-contain" />
-        <h1 className="text-lg font-semibold text-text">Mulimago</h1>
+        <div
+          aria-label="Mulimago"
+          className="h-12 w-14"
+          style={{
+            backgroundImage: `url(${muleSprites})`,
+            backgroundSize: '300% 200%',
+            backgroundRepeat: 'no-repeat',
+            imageRendering: 'pixelated',
+            animation: 'mule-walk 0.6s steps(1) infinite',
+          }}
+        />
+        <pre
+          aria-label="Mulimago"
+          className="rounded bg-black px-2 py-1 font-mono text-[8px] leading-[1.05] text-text"
+          style={{ letterSpacing: 0 }}
+        >
+          {MULIMAGO_ASCII}
+        </pre>
       </div>
-      <div className="flex items-center gap-2">
+      <div className="flex h-full items-end gap-2 self-stretch pb-1">
         {!rightSidebarOpen && (
           <button
             onClick={onExpandRight}
-            className="rounded p-1.5 text-text-muted transition-colors hover:bg-surface-2 hover:text-text"
+            className="self-center rounded bg-black/30 p-1.5 text-text-muted backdrop-blur-sm transition-colors hover:bg-black/50 hover:text-text"
             title="Expand panel (I)"
             aria-label="Expand right panel"
           >
             <PanelRightOpen className="h-4 w-4" />
           </button>
         )}
+        <span
+          className="text-[10px] text-foreground-muted"
+          style={{ textShadow: '0 1px 2px rgba(0,0,0,0.7)' }}
+        >
+          Built with hubris • {toRoman(new Date().getFullYear())}
+        </span>
       </div>
     </header>
   )