diff --git a/examples/app_hub/assets/hub-logo-fragment-globe.svg b/examples/app_hub/assets/hub-logo-fragment-globe.svg
new file mode 100644
index 0000000..a40e620
--- /dev/null
+++ b/examples/app_hub/assets/hub-logo-fragment-globe.svg
@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" role="img" aria-label="Globe fragment">
+  <defs>
+    <radialGradient id="globeOcean" cx="38%" cy="30%" r="72%">
+      <stop offset="0%" stop-color="#243044"/>
+      <stop offset="50%" stop-color="#1a2332"/>
+      <stop offset="100%" stop-color="#0a0e14"/>
+    </radialGradient>
+    <linearGradient id="globeTerminator" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#3d8bfd" stop-opacity="0.08"/>
+      <stop offset="40%" stop-color="#3d8bfd" stop-opacity="0.18"/>
+      <stop offset="70%" stop-color="#0a0e14" stop-opacity="0.55"/>
+      <stop offset="100%" stop-color="#0a0e14" stop-opacity="0.80"/>
+    </linearGradient>
+    <radialGradient id="globeSpecular" cx="35%" cy="28%" r="45%">
+      <stop offset="0%" stop-color="#e7ecf3" stop-opacity="0.12"/>
+      <stop offset="100%" stop-color="#e7ecf3" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="continentGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#5a6b82"/>
+      <stop offset="100%" stop-color="#3d5060"/>
+    </linearGradient>
+    <clipPath id="globeClip"><circle cx="720" cy="560" r="330"/></clipPath>
+  </defs>
+  <g id="globe-body"><circle cx="720" cy="560" r="330" fill="url(#globeOcean)" stroke="#2d3a4f" stroke-width="1.5"/></g>
+  <g id="globe-grid" clip-path="url(#globeClip)" fill="none" stroke="#e7ecf3" stroke-opacity="0.28" stroke-width="1.5">
+    <ellipse cx="720" cy="560" rx="330" ry="78"/><ellipse cx="720" cy="560" rx="330" ry="155"/><ellipse cx="720" cy="560" rx="330" ry="232"/><ellipse cx="720" cy="560" rx="330" ry="295"/>
+    <line x1="720" y1="230" x2="720" y2="890"/><path d="M 500 230 Q 480 560 500 890"/><path d="M 940 230 Q 960 560 940 890"/>
+    <path d="M 580 230 Q 548 560 580 890"/><path d="M 860 230 Q 892 560 860 890"/>
+  </g>
+  <g id="globe-continents" clip-path="url(#globeClip)" fill="url(#continentGrad)" stroke="#8b9cb3" stroke-opacity="0.35" stroke-width="1">
+    <path d="M 590 350 Q 610 325 655 320 Q 700 315 745 328 Q 810 335 855 355 Q 900 375 895 415 Q 888 445 860 458 Q 830 470 795 462 Q 770 468 750 488 Q 728 510 700 505 Q 668 498 640 480 Q 610 462 592 435 Q 570 405 590 350 Z"/>
+    <path d="M 640 480 Q 655 490 668 512 Q 680 535 678 570 Q 676 610 662 645 Q 648 678 628 692 Q 608 700 592 685 Q 575 668 572 640 Q 568 605 576 568 Q 582 535 590 508 Q 600 488 614 480 Q 628 472 640 480 Z"/>
+    <path d="M 430 360 Q 415 340 400 355 Q 390 372 398 400 Q 408 430 428 448 Q 450 464 468 455 Q 480 444 474 420 Q 468 395 448 375 Q 440 368 430 360 Z"/>
+  </g>
+  <circle id="globe-terminator" cx="720" cy="560" r="330" fill="url(#globeTerminator)" clip-path="url(#globeClip)"/>
+  <circle cx="720" cy="560" r="330" fill="url(#globeSpecular)" clip-path="url(#globeClip)"/>
+  <circle cx="720" cy="560" r="330" fill="none" stroke="#3d8bfd" stroke-opacity="0.25" stroke-width="2"/>
+</svg>
diff --git a/examples/app_hub/assets/hub-logo-fragment-rocket.svg b/examples/app_hub/assets/hub-logo-fragment-rocket.svg
new file mode 100644
index 0000000..dea023b
--- /dev/null
+++ b/examples/app_hub/assets/hub-logo-fragment-rocket.svg
@@ -0,0 +1,40 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" role="img" aria-label="Rocket fragment">
+  <defs>
+    <linearGradient id="rocketBodyGrad" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#e7ecf3"/>
+      <stop offset="35%" stop-color="#c8d4e3"/>
+      <stop offset="70%" stop-color="#8b9cb3"/>
+      <stop offset="100%" stop-color="#4a5a6e"/>
+    </linearGradient>
+    <linearGradient id="rocketUnderGrad" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#4a5a6e"/>
+      <stop offset="100%" stop-color="#2d3a4f"/>
+    </linearGradient>
+    <linearGradient id="wingGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#3d8bfd"/>
+      <stop offset="100%" stop-color="#1a2332"/>
+    </linearGradient>
+    <radialGradient id="nozzleGlow" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" stop-color="#ffffff" stop-opacity="1"/>
+      <stop offset="30%" stop-color="#5eead4" stop-opacity="0.9"/>
+      <stop offset="65%" stop-color="#3d8bfd" stop-opacity="0.6"/>
+      <stop offset="100%" stop-color="#3d8bfd" stop-opacity="0"/>
+    </radialGradient>
+    <filter id="nozzleFilter" x="-100%" y="-100%" width="300%" height="300%">
+      <feGaussianBlur stdDeviation="14" result="b"/>
+      <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+  </defs>
+  <g id="rocketship" transform="translate(1210,390) rotate(-32) scale(1,-1)">
+    <path d="M -340 0 L -300 -22 L -80 -26 L 0 0 L -80 8 L -300 8 Z" fill="url(#rocketUnderGrad)" stroke="#2d3a4f" stroke-width="1.2"/>
+    <path d="M -300 22 L -80 26 L 0 0 L -80 -8 L -300 -8 Z" fill="url(#rocketBodyGrad)" stroke="#1a2332" stroke-width="1.2"/>
+    <path d="M -290 -6 L -100 -8 L -60 -4 L -100 0 L -290 0 Z" fill="#3d8bfd" opacity="0.85"/>
+    <path d="M -80 -26 Q 30 -14 80 0 Q 30 14 -80 26 L -80 -26 Z" fill="#e7ecf3" stroke="#8b9cb3" stroke-width="1"/>
+    <path d="M -60 -16 Q -30 -14 -10 -10 Q -30 -6 -60 -4 Z" fill="#0a0e14" stroke="#3d8bfd" stroke-width="1"/>
+    <path d="M -280 22 L -160 22 L -100 90 L -240 70 Z" fill="url(#wingGrad)" stroke="#2d3a4f" stroke-width="1" opacity="0.95"/>
+    <path d="M -260 -22 L -180 -22 L -160 -55 L -240 -45 Z" fill="#3d8bfd" stroke="#1a2332" stroke-width="1" opacity="0.80"/>
+    <ellipse cx="-310" cy="0" rx="32" ry="20" fill="#2d3a4f" stroke="#8b9cb3" stroke-width="1"/>
+    <ellipse cx="-310" cy="0" rx="24" ry="15" fill="#1a2332"/>
+    <ellipse cx="-342" cy="0" rx="20" ry="20" fill="url(#nozzleGlow)" filter="url(#nozzleFilter)" opacity="0.90"/>
+  </g>
+</svg>
diff --git a/examples/app_hub/assets/hub-logo-fragment-space.svg b/examples/app_hub/assets/hub-logo-fragment-space.svg
new file mode 100644
index 0000000..e9df45b
--- /dev/null
+++ b/examples/app_hub/assets/hub-logo-fragment-space.svg
@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" role="img" aria-label="Space fragment">
+  <defs>
+    <radialGradient id="spaceBgGrad" cx="52%" cy="48%" r="75%">
+      <stop offset="0%" stop-color="#1a2332"/>
+      <stop offset="55%" stop-color="#0a0e14"/>
+      <stop offset="100%" stop-color="#060810"/>
+    </radialGradient>
+    <radialGradient id="nebulaAmber" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" stop-color="#b45309" stop-opacity="0.22"/>
+      <stop offset="60%" stop-color="#92400e" stop-opacity="0.10"/>
+      <stop offset="100%" stop-color="#78350f" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="nebulaBlue" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" stop-color="#1d4ed8" stop-opacity="0.20"/>
+      <stop offset="60%" stop-color="#1e3a5f" stop-opacity="0.10"/>
+      <stop offset="100%" stop-color="#0f172a" stop-opacity="0"/>
+    </radialGradient>
+  </defs>
+  <rect id="space-bg" width="1920" height="1080" fill="url(#spaceBgGrad)"/>
+  <ellipse id="nebula-amber" cx="310" cy="220" rx="380" ry="260" fill="url(#nebulaAmber)" transform="rotate(-18 310 220)"/>
+  <ellipse id="nebula-blue" cx="1640" cy="870" rx="420" ry="300" fill="url(#nebulaBlue)" transform="rotate(12 1640 870)"/>
+  <g id="stars-layer" fill="#e7ecf3" opacity="0.8">
+    <circle cx="164" cy="310" r="2"/><circle cx="1680" cy="140" r="1.8"/><circle cx="980" cy="920" r="2"/>
+    <circle cx="108" cy="155" r="1.3"/><circle cx="380" cy="186" r="1.4"/><circle cx="1160" cy="160" r="1.5"/>
+    <circle cx="42" cy="38" r="0.8"/><circle cx="462" cy="108" r="0.7"/><circle cx="910" cy="30" r="1"/>
+    <circle cx="1310" cy="40" r="0.7"/><circle cx="1760" cy="380" r="1.4"/><circle cx="1740" cy="820" r="0.6"/>
+  </g>
+</svg>
diff --git a/examples/app_hub/assets/hub-logo-fragment-tail.svg b/examples/app_hub/assets/hub-logo-fragment-tail.svg
new file mode 100644
index 0000000..edf0691
--- /dev/null
+++ b/examples/app_hub/assets/hub-logo-fragment-tail.svg
@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" role="img" aria-label="Tail fragment">
+  <defs>
+    <linearGradient id="exhaustGrad" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#5eead4" stop-opacity="0"/>
+      <stop offset="20%" stop-color="#5eead4" stop-opacity="0.4"/>
+      <stop offset="55%" stop-color="#3d8bfd" stop-opacity="0.75"/>
+      <stop offset="80%" stop-color="#5eead4" stop-opacity="0.95"/>
+      <stop offset="100%" stop-color="#ffffff" stop-opacity="0.9"/>
+    </linearGradient>
+    <linearGradient id="exhaustCore" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#ffffff" stop-opacity="0"/>
+      <stop offset="50%" stop-color="#ffffff" stop-opacity="0.4"/>
+      <stop offset="100%" stop-color="#ffffff" stop-opacity="0.95"/>
+    </linearGradient>
+  </defs>
+  <g id="exhaust-tail">
+    <path d="M 430 810 Q 540 740 660 670 Q 780 600 920 540 Q 1040 488 1148 460" fill="none" stroke="url(#exhaustGrad)" stroke-width="60" stroke-linecap="round" opacity="0.18"/>
+    <path d="M 430 810 Q 540 740 660 670 Q 780 600 920 540 Q 1040 488 1148 460" fill="none" stroke="url(#exhaustGrad)" stroke-width="32" stroke-linecap="round" opacity="0.45"/>
+    <path d="M 432 808 Q 542 738 662 668 Q 782 598 922 538 Q 1042 486 1150 458" fill="none" stroke="url(#exhaustCore)" stroke-width="10" stroke-linecap="round" opacity="0.72"/>
+    <path d="M 432 808 Q 542 738 662 668 Q 782 598 922 538 Q 1042 486 1150 458" fill="none" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" opacity="0.55"/>
+  </g>
+</svg>
diff --git a/examples/app_hub/assets/hub-logo-space-bg.png b/examples/app_hub/assets/hub-logo-space-bg.png
new file mode 100644
index 0000000..e3ffa4c
Binary files /dev/null and b/examples/app_hub/assets/hub-logo-space-bg.png differ
diff --git a/examples/app_hub/assets/hub-logo-space-bg.svg b/examples/app_hub/assets/hub-logo-space-bg.svg
new file mode 100644
index 0000000..25c6f14
--- /dev/null
+++ b/examples/app_hub/assets/hub-logo-space-bg.svg
@@ -0,0 +1,441 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" role="img" aria-label="Android Cast logo - space background variant">
+  <!--
+    ENTITY MAP (for targeted editing):
+      #space-bg         - deep outer space fill + nebula fogs
+      #stars-layer      - individual star points and blinks
+      #nebula-amber     - warm amber cosmic fog (upper-left region)
+      #nebula-blue      - cool blue cosmic fog (lower-right region)
+      #globe-body       - Earth sphere base fill
+      #globe-grid       - Mercator longitude/latitude lines
+      #globe-continents - landmass shapes (Eurasia, Africa, Americas)
+      #globe-terminator - day/night shadow gradient overlay
+      #exhaust-tail     - rocket exhaust/tail from bottom-left of globe toward nozzle
+      #rocketship       - full rocket assembly (body, wings, cockpit, nozzle, glow)
+  -->
+  <defs>
+    <!-- Space deep bg -->
+    <radialGradient id="spaceBgGrad" cx="52%" cy="48%" r="75%">
+      <stop offset="0%" stop-color="#1a2332"/>
+      <stop offset="55%" stop-color="#0a0e14"/>
+      <stop offset="100%" stop-color="#060810"/>
+    </radialGradient>
+
+    <!-- Globe ocean fill -->
+    <radialGradient id="globeOcean" cx="38%" cy="30%" r="72%">
+      <stop offset="0%" stop-color="#243044"/>
+      <stop offset="50%" stop-color="#1a2332"/>
+      <stop offset="100%" stop-color="#0a0e14"/>
+    </radialGradient>
+
+    <!-- Globe terminator (day/night) -->
+    <linearGradient id="globeTerminator" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#3d8bfd" stop-opacity="0.08"/>
+      <stop offset="40%" stop-color="#3d8bfd" stop-opacity="0.18"/>
+      <stop offset="70%" stop-color="#0a0e14" stop-opacity="0.55"/>
+      <stop offset="100%" stop-color="#0a0e14" stop-opacity="0.80"/>
+    </linearGradient>
+
+    <!-- Globe specular highlight -->
+    <radialGradient id="globeSpecular" cx="35%" cy="28%" r="45%">
+      <stop offset="0%" stop-color="#e7ecf3" stop-opacity="0.12"/>
+      <stop offset="100%" stop-color="#e7ecf3" stop-opacity="0"/>
+    </radialGradient>
+
+    <!-- Exhaust tail gradient: thin transparent at origin, thick glowing at nozzle -->
+    <linearGradient id="exhaustGrad" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#5eead4" stop-opacity="0"/>
+      <stop offset="20%" stop-color="#5eead4" stop-opacity="0.4"/>
+      <stop offset="55%" stop-color="#3d8bfd" stop-opacity="0.75"/>
+      <stop offset="80%" stop-color="#5eead4" stop-opacity="0.95"/>
+      <stop offset="100%" stop-color="#ffffff" stop-opacity="0.9"/>
+    </linearGradient>
+    <linearGradient id="exhaustCore" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#ffffff" stop-opacity="0"/>
+      <stop offset="50%" stop-color="#ffffff" stop-opacity="0.4"/>
+      <stop offset="100%" stop-color="#ffffff" stop-opacity="0.95"/>
+    </linearGradient>
+
+    <!-- Nebula amber fog -->
+    <radialGradient id="nebulaAmber" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" stop-color="#b45309" stop-opacity="0.22"/>
+      <stop offset="60%" stop-color="#92400e" stop-opacity="0.10"/>
+      <stop offset="100%" stop-color="#78350f" stop-opacity="0"/>
+    </radialGradient>
+
+    <!-- Nebula blue fog -->
+    <radialGradient id="nebulaBlue" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" stop-color="#1d4ed8" stop-opacity="0.20"/>
+      <stop offset="60%" stop-color="#1e3a5f" stop-opacity="0.10"/>
+      <stop offset="100%" stop-color="#0f172a" stop-opacity="0"/>
+    </radialGradient>
+
+    <!-- Rocket body gradient -->
+    <linearGradient id="rocketBodyGrad" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#e7ecf3"/>
+      <stop offset="35%" stop-color="#c8d4e3"/>
+      <stop offset="70%" stop-color="#8b9cb3"/>
+      <stop offset="100%" stop-color="#4a5a6e"/>
+    </linearGradient>
+
+    <!-- Rocket underbelly (flipped: underside now on top) -->
+    <linearGradient id="rocketUnderGrad" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#4a5a6e"/>
+      <stop offset="100%" stop-color="#2d3a4f"/>
+    </linearGradient>
+
+    <!-- Rocket wing -->
+    <linearGradient id="wingGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#3d8bfd"/>
+      <stop offset="100%" stop-color="#1a2332"/>
+    </linearGradient>
+
+    <!-- Nozzle glow -->
+    <radialGradient id="nozzleGlow" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" stop-color="#ffffff" stop-opacity="1"/>
+      <stop offset="30%" stop-color="#5eead4" stop-opacity="0.9"/>
+      <stop offset="65%" stop-color="#3d8bfd" stop-opacity="0.6"/>
+      <stop offset="100%" stop-color="#3d8bfd" stop-opacity="0"/>
+    </radialGradient>
+
+    <!-- Continent fill -->
+    <linearGradient id="continentGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#5a6b82"/>
+      <stop offset="100%" stop-color="#3d5060"/>
+    </linearGradient>
+
+    <!-- Glow filter -->
+    <filter id="glow" x="-60%" y="-60%" width="220%" height="220%">
+      <feGaussianBlur stdDeviation="8" result="b"/>
+      <feMerge>
+        <feMergeNode in="b"/>
+        <feMergeNode in="b"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+
+    <!-- Soft glow for nozzle -->
+    <filter id="nozzleFilter" x="-100%" y="-100%" width="300%" height="300%">
+      <feGaussianBlur stdDeviation="14" result="b"/>
+      <feMerge>
+        <feMergeNode in="b"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+
+    <!-- Blink star filter -->
+    <filter id="blink" x="-200%" y="-200%" width="500%" height="500%">
+      <feGaussianBlur stdDeviation="2.5" result="b"/>
+      <feMerge>
+        <feMergeNode in="b"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+
+    <!-- Globe clip -->
+    <clipPath id="globeClip">
+      <circle cx="720" cy="560" r="330"/>
+    </clipPath>
+  </defs>
+
+  <!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
+  <!-- #space-bg : deep space fill                    -->
+  <!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
+  <rect id="space-bg" width="1920" height="1080" fill="url(#spaceBgGrad)"/>
+
+  <!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
+  <!-- #nebula-amber : warm cosmic fog upper-left     -->
+  <!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
+  <ellipse id="nebula-amber" cx="310" cy="220" rx="380" ry="260" fill="url(#nebulaAmber)" transform="rotate(-18 310 220)"/>
+
+  <!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
+  <!-- #nebula-blue : cool cosmic fog lower-right     -->
+  <!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
+  <ellipse id="nebula-blue" cx="1640" cy="870" rx="420" ry="300" fill="url(#nebulaBlue)" transform="rotate(12 1640 870)"/>
+
+  <!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
+  <!-- #stars-layer : star field + blinks             -->
+  <!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
+  <g id="stars-layer" fill="#e7ecf3">
+    <!-- Tiny dim stars -->
+    <circle cx="42"   cy="38"   r="0.8" opacity="0.45"/>
+    <circle cx="128"  cy="92"   r="0.7" opacity="0.40"/>
+    <circle cx="195"  cy="18"   r="0.9" opacity="0.50"/>
+    <circle cx="280"  cy="72"   r="0.6" opacity="0.38"/>
+    <circle cx="380"  cy="44"   r="0.8" opacity="0.42"/>
+    <circle cx="462"  cy="108"  r="0.7" opacity="0.48"/>
+    <circle cx="550"  cy="22"   r="0.9" opacity="0.55"/>
+    <circle cx="640"  cy="78"   r="0.6" opacity="0.35"/>
+    <circle cx="740"  cy="48"   r="0.8" opacity="0.45"/>
+    <circle cx="820"  cy="112"  r="0.7" opacity="0.40"/>
+    <circle cx="910"  cy="30"   r="1.0" opacity="0.58"/>
+    <circle cx="1010" cy="86"   r="0.7" opacity="0.43"/>
+    <circle cx="1110" cy="24"   r="0.8" opacity="0.47"/>
+    <circle cx="1200" cy="96"   r="0.9" opacity="0.52"/>
+    <circle cx="1310" cy="40"   r="0.7" opacity="0.38"/>
+    <circle cx="1400" cy="118"  r="0.8" opacity="0.44"/>
+    <circle cx="1510" cy="58"   r="0.7" opacity="0.40"/>
+    <circle cx="1620" cy="28"   r="1.0" opacity="0.55"/>
+    <circle cx="1720" cy="80"   r="0.8" opacity="0.42"/>
+    <circle cx="1800" cy="140"  r="0.7" opacity="0.37"/>
+    <circle cx="1880" cy="60"   r="0.9" opacity="0.50"/>
+    <circle cx="68"   cy="195"  r="0.7" opacity="0.40"/>
+    <circle cx="148"  cy="260"  r="0.8" opacity="0.44"/>
+    <circle cx="240"  cy="310"  r="0.6" opacity="0.35"/>
+    <circle cx="88"   cy="410"  r="0.9" opacity="0.50"/>
+    <circle cx="160"  cy="530"  r="0.7" opacity="0.38"/>
+    <circle cx="55"   cy="620"  r="0.8" opacity="0.43"/>
+    <circle cx="130"  cy="720"  r="0.6" opacity="0.36"/>
+    <circle cx="62"   cy="830"  r="0.9" opacity="0.48"/>
+    <circle cx="200"  cy="890"  r="0.7" opacity="0.40"/>
+    <circle cx="310"  cy="970"  r="0.8" opacity="0.45"/>
+    <circle cx="440"  cy="1020" r="0.6" opacity="0.36"/>
+    <circle cx="570"  cy="980"  r="0.9" opacity="0.52"/>
+    <circle cx="680"  cy="1048" r="0.7" opacity="0.38"/>
+    <circle cx="820"  cy="1010" r="0.8" opacity="0.44"/>
+    <circle cx="940"  cy="1058" r="0.6" opacity="0.34"/>
+    <circle cx="1060" cy="1022" r="0.9" opacity="0.50"/>
+    <circle cx="1200" cy="990"  r="0.7" opacity="0.40"/>
+    <circle cx="1340" cy="1040" r="0.8" opacity="0.43"/>
+    <circle cx="1480" cy="1008" r="0.6" opacity="0.37"/>
+    <circle cx="1600" cy="1052" r="0.9" opacity="0.50"/>
+    <circle cx="1730" cy="1018" r="0.7" opacity="0.40"/>
+    <circle cx="1850" cy="990"  r="0.8" opacity="0.44"/>
+    <circle cx="1700" cy="200"  r="0.8" opacity="0.48"/>
+    <circle cx="1820" cy="320"  r="0.7" opacity="0.40"/>
+    <circle cx="1880" cy="450"  r="0.9" opacity="0.52"/>
+    <circle cx="1780" cy="580"  r="0.7" opacity="0.38"/>
+    <circle cx="1860" cy="700"  r="0.8" opacity="0.44"/>
+    <circle cx="1740" cy="820"  r="0.6" opacity="0.36"/>
+    <!-- Medium stars -->
+    <circle cx="108"  cy="155"  r="1.3" opacity="0.60"/>
+    <circle cx="380"  cy="186"  r="1.4" opacity="0.64"/>
+    <circle cx="520"  cy="940"  r="1.3" opacity="0.58"/>
+    <circle cx="1160" cy="160"  r="1.5" opacity="0.68"/>
+    <circle cx="1460" cy="880"  r="1.3" opacity="0.62"/>
+    <circle cx="1760" cy="380"  r="1.4" opacity="0.60"/>
+    <!-- Bright stars -->
+    <circle cx="164"  cy="310"  r="2.0" opacity="0.75"/>
+    <circle cx="1680" cy="140"  r="1.8" opacity="0.72"/>
+    <circle cx="980"  cy="920"  r="2.0" opacity="0.70"/>
+  </g>
+
+  <!-- Blink sparkles (4-point star shape) -->
+  <g id="stars-layer-blinks" opacity="0.82" filter="url(#blink)">
+    <!-- Blink 1 -->
+    <path d="M 226 148 L 228 138 L 230 148 L 240 150 L 230 152 L 228 162 L 226 152 L 216 150 Z" fill="#e7ecf3" opacity="0.80"/>
+    <!-- Blink 2 -->
+    <path d="M 1540 220 L 1542 212 L 1544 220 L 1552 222 L 1544 224 L 1542 232 L 1540 224 L 1532 222 Z" fill="#5eead4" opacity="0.70"/>
+    <!-- Blink 3 -->
+    <path d="M 1820 820 L 1822 812 L 1824 820 L 1832 822 L 1824 824 L 1822 832 L 1820 824 L 1812 822 Z" fill="#e7ecf3" opacity="0.65"/>
+    <!-- Blink 4 small -->
+    <path d="M 460 840 L 461.5 835 L 463 840 L 468 841.5 L 463 843 L 461.5 848 L 460 843 L 455 841.5 Z" fill="#3d8bfd" opacity="0.72"/>
+    <!-- Blink 5 -->
+    <path d="M 1380 80 L 1382 72 L 1384 80 L 1392 82 L 1384 84 L 1382 92 L 1380 84 L 1372 82 Z" fill="#e7ecf3" opacity="0.75"/>
+  </g>
+
+  <!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
+  <!-- #globe-body : Earth sphere                     -->
+  <!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
+  <g id="globe-body">
+    <circle cx="720" cy="560" r="330" fill="url(#globeOcean)" stroke="#2d3a4f" stroke-width="1.5"/>
+  </g>
+
+  <!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
+  <!-- #globe-grid : Mercator lon/lat lines           -->
+  <!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
+  <g id="globe-grid" clip-path="url(#globeClip)" fill="none" stroke="#e7ecf3" stroke-opacity="0.28" stroke-width="1.5">
+    <!-- Equator -->
+    <ellipse cx="720" cy="560" rx="330" ry="78"/>
+    <!-- Latitude lines -->
+    <ellipse cx="720" cy="560" rx="330" ry="155"/>
+    <ellipse cx="720" cy="560" rx="330" ry="232"/>
+    <ellipse cx="720" cy="560" rx="330" ry="295"/>
+    <!-- Tropics (dashed) -->
+    <ellipse cx="720" cy="560" rx="330" ry="110" stroke-dasharray="8 5" stroke-opacity="0.18"/>
+    <ellipse cx="720" cy="560" rx="330" ry="210" stroke-dasharray="8 5" stroke-opacity="0.18"/>
+    <!-- Prime meridian + antimeridian -->
+    <line x1="720" y1="230" x2="720" y2="890"/>
+    <!-- Longitude lines -->
+    <path d="M 500 230 Q 480 560 500 890"/>
+    <path d="M 940 230 Q 960 560 940 890"/>
+    <path d="M 580 230 Q 548 560 580 890"/>
+    <path d="M 860 230 Q 892 560 860 890"/>
+    <path d="M 618 230 Q 594 560 618 890"/>
+    <path d="M 822 230 Q 846 560 822 890"/>
+    <path d="M 655 230 Q 638 560 655 890"/>
+    <path d="M 785 230 Q 802 560 785 890"/>
+  </g>
+
+  <!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
+  <!-- #globe-continents : landmasses                 -->
+  <!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
+  <g id="globe-continents" clip-path="url(#globeClip)" fill="url(#continentGrad)" stroke="#8b9cb3" stroke-opacity="0.35" stroke-width="1" stroke-linejoin="round">
+    <!-- Eurasia -->
+    <path d="
+      M 590 350
+      Q 610 325 655 320
+      Q 700 315 745 328
+      Q 810 335 855 355
+      Q 900 375 895 415
+      Q 888 445 860 458
+      Q 830 470 795 462
+      Q 770 468 750 488
+      Q 728 510 700 505
+      Q 668 498 640 480
+      Q 610 462 592 435
+      Q 570 405 590 350 Z"/>
+    <!-- India (peninsula off Eurasia) -->
+    <path d="
+      M 780 462
+      Q 800 470 810 500
+      Q 820 530 808 555
+      Q 795 575 778 568
+      Q 762 558 758 530
+      Q 752 505 762 482
+      Q 770 468 780 462 Z"/>
+    <!-- Africa -->
+    <path d="
+      M 640 480
+      Q 655 490 668 512
+      Q 680 535 678 570
+      Q 676 610 662 645
+      Q 648 678 628 692
+      Q 608 700 592 685
+      Q 575 668 572 640
+      Q 568 605 576 568
+      Q 582 535 590 508
+      Q 600 488 614 480
+      Q 628 472 640 480 Z"/>
+    <!-- Western Europe (bump west of Eurasia) -->
+    <path d="
+      M 590 350
+      Q 572 360 560 380
+      Q 548 405 558 428
+      Q 566 448 580 452
+      Q 596 456 606 440
+      Q 618 420 612 398
+      Q 606 372 590 350 Z"/>
+    <!-- Americas (partial, visible left edge of globe) -->
+    <path d="
+      M 430 360
+      Q 415 340 400 355
+      Q 390 372 398 400
+      Q 408 430 428 448
+      Q 450 464 468 455
+      Q 480 444 474 420
+      Q 468 395 448 375
+      Q 440 368 430 360 Z"/>
+    <path d="
+      M 420 478
+      Q 405 490 400 515
+      Q 395 545 405 575
+      Q 415 602 432 618
+      Q 450 630 464 618
+      Q 476 602 470 572
+      Q 462 540 448 510
+      Q 436 490 420 478 Z"/>
+  </g>
+
+  <!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
+  <!-- #globe-terminator : day/night shadow           -->
+  <!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
+  <circle id="globe-terminator" cx="720" cy="560" r="330" fill="url(#globeTerminator)" clip-path="url(#globeClip)"/>
+
+  <!-- Globe specular highlight -->
+  <circle cx="720" cy="560" r="330" fill="url(#globeSpecular)" clip-path="url(#globeClip)"/>
+
+  <!-- Globe rim -->
+  <circle cx="720" cy="560" r="330" fill="none" stroke="#3d8bfd" stroke-opacity="0.25" stroke-width="2"/>
+
+  <!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
+  <!-- #exhaust-tail : curved plume from globe base   -->
+  <!--   thin at bottom-left, thick at rocket nozzle  -->
+  <!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
+  <g id="exhaust-tail">
+    <!-- Outer glow (very wide, very transparent) -->
+    <path d="M 430 810 Q 540 740 660 670 Q 780 600 920 540 Q 1040 488 1148 460"
+          fill="none" stroke="url(#exhaustGrad)" stroke-width="60" stroke-linecap="round" opacity="0.18"/>
+    <!-- Mid bloom -->
+    <path d="M 430 810 Q 540 740 660 670 Q 780 600 920 540 Q 1040 488 1148 460"
+          fill="none" stroke="url(#exhaustGrad)" stroke-width="32" stroke-linecap="round" opacity="0.45"/>
+    <!-- Core streak -->
+    <path d="M 432 808 Q 542 738 662 668 Q 782 598 922 538 Q 1042 486 1150 458"
+          fill="none" stroke="url(#exhaustCore)" stroke-width="10" stroke-linecap="round" opacity="0.72"/>
+    <!-- Thin tail filament -->
+    <path d="M 432 808 Q 542 738 662 668 Q 782 598 922 538 Q 1042 486 1150 458"
+          fill="none" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" opacity="0.55"/>
+  </g>
+
+  <!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
+  <!-- #rocketship : futuristic widebody              -->
+  <!--   flying upper-right, X-axis flipped           -->
+  <!--   (original top of ship now faces DOWN)        -->
+  <!--   nose pointing upper-right at ~-32deg         -->
+  <!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
+  <!--
+    Local coords: nose at (0,0), body extends -X (left = back).
+    X-flip: scale(1,-1) so dorsal (top) faces down in world space.
+    Then rotate -32deg and translate to world position (1210, 390).
+  -->
+  <g id="rocketship" transform="translate(1210,390) rotate(-32) scale(1,-1)">
+
+    <!-- === Main fuselage === -->
+    <!-- Underside panel (now world-UP after flip) -->
+    <path d="M -340 0 L -300 -22 L -80 -26 L 0 0 L -80 8 L -300 8 Z"
+          fill="url(#rocketUnderGrad)" stroke="#2d3a4f" stroke-width="1.2"/>
+
+    <!-- Dorsal spine (now world-DOWN after flip) -->
+    <path d="M -300 22 L -80 26 L 0 0 L -80 -8 L -300 -8 Z"
+          fill="url(#rocketBodyGrad)" stroke="#1a2332" stroke-width="1.2"/>
+
+    <!-- Blue accent stripe -->
+    <path d="M -290 -6 L -100 -8 L -60 -4 L -100 0 L -290 0 Z"
+          fill="#3d8bfd" opacity="0.85"/>
+
+    <!-- Nose cone -->
+    <path d="M -80 -26 Q 30 -14 80 0 Q 30 14 -80 26 L -80 -26 Z"
+          fill="#e7ecf3" stroke="#8b9cb3" stroke-width="1"/>
+
+    <!-- Nose tip highlight -->
+    <path d="M -80 -18 Q 20 -8 62 0 Q 20 4 -80 8 L -80 -18 Z"
+          fill="#ffffff" opacity="0.30"/>
+
+    <!-- Cockpit window strip -->
+    <path d="M -60 -16 Q -30 -14 -10 -10 Q -30 -6 -60 -4 Z"
+          fill="#0a0e14" stroke="#3d8bfd" stroke-width="1"/>
+    <circle cx="-42" cy="-10" r="5" fill="#1a2332" stroke="#5eead4" stroke-width="0.8"/>
+    <circle cx="-26" cy="-9"  r="4" fill="#1a2332" stroke="#5eead4" stroke-width="0.8"/>
+
+    <!-- === Delta wings (lower, world-UP side) === -->
+    <!-- Main delta wing -->
+    <path d="M -280 22 L -160 22 L -100 90 L -240 70 Z"
+          fill="url(#wingGrad)" stroke="#2d3a4f" stroke-width="1" opacity="0.95"/>
+    <!-- Wing leading edge highlight -->
+    <path d="M -280 22 L -160 22 L -120 60" fill="none" stroke="#3d8bfd" stroke-width="1.5" opacity="0.6"/>
+
+    <!-- === Dorsal fins (upper, world-DOWN side) === -->
+    <path d="M -260 -22 L -180 -22 L -160 -55 L -240 -45 Z"
+          fill="#3d8bfd" stroke="#1a2332" stroke-width="1" opacity="0.80"/>
+
+    <!-- === Engine pod === -->
+    <ellipse cx="-310" cy="0" rx="32" ry="20" fill="#2d3a4f" stroke="#8b9cb3" stroke-width="1"/>
+    <ellipse cx="-310" cy="0" rx="24" ry="15" fill="#1a2332"/>
+
+    <!-- === Nozzle glows (world-left = ship-back = exhaust end) === -->
+    <ellipse cx="-342" cy="0" rx="20" ry="20" fill="url(#nozzleGlow)" filter="url(#nozzleFilter)" opacity="0.90"/>
+    <ellipse cx="-355" cy="0" rx="32" ry="32" fill="url(#nozzleGlow)" filter="url(#nozzleFilter)" opacity="0.45"/>
+
+    <!-- === Panel detail lines === -->
+    <line x1="-240" y1="-6" x2="-240" y2="6" stroke="#8b9cb3" stroke-width="0.8" opacity="0.5"/>
+    <line x1="-190" y1="-6" x2="-190" y2="6" stroke="#8b9cb3" stroke-width="0.8" opacity="0.5"/>
+    <line x1="-140" y1="-8" x2="-140" y2="8" stroke="#8b9cb3" stroke-width="0.8" opacity="0.5"/>
+
+    <!-- === Navigation light === -->
+    <circle cx="60" cy="4" r="3" fill="#5eead4" filter="url(#blink)" opacity="0.9"/>
+  </g>
+
+  <!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
+  <!-- Foreground: globe rim glow (over everything)   -->
+  <!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
+  <circle cx="720" cy="560" r="332" fill="none" stroke="#3d8bfd" stroke-opacity="0.12" stroke-width="6"/>
+</svg>
diff --git a/examples/app_hub/assets/hub-logo-transparent.png b/examples/app_hub/assets/hub-logo-transparent.png
new file mode 100644
index 0000000..902a6d4
Binary files /dev/null and b/examples/app_hub/assets/hub-logo-transparent.png differ
diff --git a/examples/app_hub/assets/hub-logo-transparent.svg b/examples/app_hub/assets/hub-logo-transparent.svg
new file mode 100644
index 0000000..d760584
--- /dev/null
+++ b/examples/app_hub/assets/hub-logo-transparent.svg
@@ -0,0 +1,206 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" role="img" aria-label="Android Cast logo - transparent background variant">
+  <!--
+    ENTITY MAP (for targeted editing):
+      (no #space-bg, #nebula-*, #stars-layer in this variant - background is 100% transparent)
+      #globe-body       - Earth sphere base fill
+      #globe-grid       - Mercator longitude/latitude lines
+      #globe-continents - landmass shapes (Eurasia, Africa, Americas)
+      #globe-terminator - day/night shadow gradient overlay
+      #exhaust-tail     - rocket exhaust/tail from bottom-left of globe toward nozzle
+      #rocketship       - full rocket assembly (body, wings, cockpit, nozzle, glow)
+  -->
+  <defs>
+    <!-- Globe ocean fill -->
+    <radialGradient id="globeOcean" cx="38%" cy="30%" r="72%">
+      <stop offset="0%" stop-color="#243044"/>
+      <stop offset="50%" stop-color="#1a2332"/>
+      <stop offset="100%" stop-color="#0a0e14"/>
+    </radialGradient>
+
+    <!-- Globe terminator -->
+    <linearGradient id="globeTerminator" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#3d8bfd" stop-opacity="0.08"/>
+      <stop offset="40%" stop-color="#3d8bfd" stop-opacity="0.18"/>
+      <stop offset="70%" stop-color="#0a0e14" stop-opacity="0.55"/>
+      <stop offset="100%" stop-color="#0a0e14" stop-opacity="0.80"/>
+    </linearGradient>
+
+    <!-- Globe specular highlight -->
+    <radialGradient id="globeSpecular" cx="35%" cy="28%" r="45%">
+      <stop offset="0%" stop-color="#e7ecf3" stop-opacity="0.12"/>
+      <stop offset="100%" stop-color="#e7ecf3" stop-opacity="0"/>
+    </radialGradient>
+
+    <!-- Exhaust gradients -->
+    <linearGradient id="exhaustGrad" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#5eead4" stop-opacity="0"/>
+      <stop offset="20%" stop-color="#5eead4" stop-opacity="0.4"/>
+      <stop offset="55%" stop-color="#3d8bfd" stop-opacity="0.75"/>
+      <stop offset="80%" stop-color="#5eead4" stop-opacity="0.95"/>
+      <stop offset="100%" stop-color="#ffffff" stop-opacity="0.9"/>
+    </linearGradient>
+    <linearGradient id="exhaustCore" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#ffffff" stop-opacity="0"/>
+      <stop offset="50%" stop-color="#ffffff" stop-opacity="0.4"/>
+      <stop offset="100%" stop-color="#ffffff" stop-opacity="0.95"/>
+    </linearGradient>
+
+    <!-- Rocket body gradient -->
+    <linearGradient id="rocketBodyGrad" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#e7ecf3"/>
+      <stop offset="35%" stop-color="#c8d4e3"/>
+      <stop offset="70%" stop-color="#8b9cb3"/>
+      <stop offset="100%" stop-color="#4a5a6e"/>
+    </linearGradient>
+
+    <linearGradient id="rocketUnderGrad" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#4a5a6e"/>
+      <stop offset="100%" stop-color="#2d3a4f"/>
+    </linearGradient>
+
+    <linearGradient id="wingGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#3d8bfd"/>
+      <stop offset="100%" stop-color="#1a2332"/>
+    </linearGradient>
+
+    <radialGradient id="nozzleGlow" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" stop-color="#ffffff" stop-opacity="1"/>
+      <stop offset="30%" stop-color="#5eead4" stop-opacity="0.9"/>
+      <stop offset="65%" stop-color="#3d8bfd" stop-opacity="0.6"/>
+      <stop offset="100%" stop-color="#3d8bfd" stop-opacity="0"/>
+    </radialGradient>
+
+    <linearGradient id="continentGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#5a6b82"/>
+      <stop offset="100%" stop-color="#3d5060"/>
+    </linearGradient>
+
+    <filter id="glow" x="-60%" y="-60%" width="220%" height="220%">
+      <feGaussianBlur stdDeviation="8" result="b"/>
+      <feMerge>
+        <feMergeNode in="b"/>
+        <feMergeNode in="b"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+
+    <filter id="nozzleFilter" x="-100%" y="-100%" width="300%" height="300%">
+      <feGaussianBlur stdDeviation="14" result="b"/>
+      <feMerge>
+        <feMergeNode in="b"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+
+    <filter id="blink" x="-200%" y="-200%" width="500%" height="500%">
+      <feGaussianBlur stdDeviation="2.5" result="b"/>
+      <feMerge>
+        <feMergeNode in="b"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+
+    <clipPath id="globeClip">
+      <circle cx="720" cy="560" r="330"/>
+    </clipPath>
+  </defs>
+
+  <!-- Background: fully transparent (no rect) -->
+
+  <!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
+  <!-- #globe-body : Earth sphere                     -->
+  <!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
+  <g id="globe-body">
+    <circle cx="720" cy="560" r="330" fill="url(#globeOcean)" stroke="#2d3a4f" stroke-width="1.5"/>
+  </g>
+
+  <!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
+  <!-- #globe-grid : Mercator lon/lat lines           -->
+  <!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
+  <g id="globe-grid" clip-path="url(#globeClip)" fill="none" stroke="#e7ecf3" stroke-opacity="0.28" stroke-width="1.5">
+    <ellipse cx="720" cy="560" rx="330" ry="78"/>
+    <ellipse cx="720" cy="560" rx="330" ry="155"/>
+    <ellipse cx="720" cy="560" rx="330" ry="232"/>
+    <ellipse cx="720" cy="560" rx="330" ry="295"/>
+    <ellipse cx="720" cy="560" rx="330" ry="110" stroke-dasharray="8 5" stroke-opacity="0.18"/>
+    <ellipse cx="720" cy="560" rx="330" ry="210" stroke-dasharray="8 5" stroke-opacity="0.18"/>
+    <line x1="720" y1="230" x2="720" y2="890"/>
+    <path d="M 500 230 Q 480 560 500 890"/>
+    <path d="M 940 230 Q 960 560 940 890"/>
+    <path d="M 580 230 Q 548 560 580 890"/>
+    <path d="M 860 230 Q 892 560 860 890"/>
+    <path d="M 618 230 Q 594 560 618 890"/>
+    <path d="M 822 230 Q 846 560 822 890"/>
+    <path d="M 655 230 Q 638 560 655 890"/>
+    <path d="M 785 230 Q 802 560 785 890"/>
+  </g>
+
+  <!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
+  <!-- #globe-continents : landmasses                 -->
+  <!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
+  <g id="globe-continents" clip-path="url(#globeClip)" fill="url(#continentGrad)" stroke="#8b9cb3" stroke-opacity="0.35" stroke-width="1" stroke-linejoin="round">
+    <path d="M 590 350 Q 610 325 655 320 Q 700 315 745 328 Q 810 335 855 355 Q 900 375 895 415 Q 888 445 860 458 Q 830 470 795 462 Q 770 468 750 488 Q 728 510 700 505 Q 668 498 640 480 Q 610 462 592 435 Q 570 405 590 350 Z"/>
+    <path d="M 780 462 Q 800 470 810 500 Q 820 530 808 555 Q 795 575 778 568 Q 762 558 758 530 Q 752 505 762 482 Q 770 468 780 462 Z"/>
+    <path d="M 640 480 Q 655 490 668 512 Q 680 535 678 570 Q 676 610 662 645 Q 648 678 628 692 Q 608 700 592 685 Q 575 668 572 640 Q 568 605 576 568 Q 582 535 590 508 Q 600 488 614 480 Q 628 472 640 480 Z"/>
+    <path d="M 590 350 Q 572 360 560 380 Q 548 405 558 428 Q 566 448 580 452 Q 596 456 606 440 Q 618 420 612 398 Q 606 372 590 350 Z"/>
+    <path d="M 430 360 Q 415 340 400 355 Q 390 372 398 400 Q 408 430 428 448 Q 450 464 468 455 Q 480 444 474 420 Q 468 395 448 375 Q 440 368 430 360 Z"/>
+    <path d="M 420 478 Q 405 490 400 515 Q 395 545 405 575 Q 415 602 432 618 Q 450 630 464 618 Q 476 602 470 572 Q 462 540 448 510 Q 436 490 420 478 Z"/>
+  </g>
+
+  <!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
+  <!-- #globe-terminator                              -->
+  <!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
+  <circle id="globe-terminator" cx="720" cy="560" r="330" fill="url(#globeTerminator)" clip-path="url(#globeClip)"/>
+  <circle cx="720" cy="560" r="330" fill="url(#globeSpecular)" clip-path="url(#globeClip)"/>
+  <circle cx="720" cy="560" r="330" fill="none" stroke="#3d8bfd" stroke-opacity="0.25" stroke-width="2"/>
+
+  <!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
+  <!-- #exhaust-tail                                  -->
+  <!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
+  <g id="exhaust-tail">
+    <path d="M 430 810 Q 540 740 660 670 Q 780 600 920 540 Q 1040 488 1148 460"
+          fill="none" stroke="url(#exhaustGrad)" stroke-width="60" stroke-linecap="round" opacity="0.18"/>
+    <path d="M 430 810 Q 540 740 660 670 Q 780 600 920 540 Q 1040 488 1148 460"
+          fill="none" stroke="url(#exhaustGrad)" stroke-width="32" stroke-linecap="round" opacity="0.45"/>
+    <path d="M 432 808 Q 542 738 662 668 Q 782 598 922 538 Q 1042 486 1150 458"
+          fill="none" stroke="url(#exhaustCore)" stroke-width="10" stroke-linecap="round" opacity="0.72"/>
+    <path d="M 432 808 Q 542 738 662 668 Q 782 598 922 538 Q 1042 486 1150 458"
+          fill="none" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" opacity="0.55"/>
+  </g>
+
+  <!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
+  <!-- #rocketship                                    -->
+  <!-- PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP -->
+  <g id="rocketship" transform="translate(1210,390) rotate(-32) scale(1,-1)">
+    <path d="M -340 0 L -300 -22 L -80 -26 L 0 0 L -80 8 L -300 8 Z"
+          fill="url(#rocketUnderGrad)" stroke="#2d3a4f" stroke-width="1.2"/>
+    <path d="M -300 22 L -80 26 L 0 0 L -80 -8 L -300 -8 Z"
+          fill="url(#rocketBodyGrad)" stroke="#1a2332" stroke-width="1.2"/>
+    <path d="M -290 -6 L -100 -8 L -60 -4 L -100 0 L -290 0 Z"
+          fill="#3d8bfd" opacity="0.85"/>
+    <path d="M -80 -26 Q 30 -14 80 0 Q 30 14 -80 26 L -80 -26 Z"
+          fill="#e7ecf3" stroke="#8b9cb3" stroke-width="1"/>
+    <path d="M -80 -18 Q 20 -8 62 0 Q 20 4 -80 8 L -80 -18 Z"
+          fill="#ffffff" opacity="0.30"/>
+    <path d="M -60 -16 Q -30 -14 -10 -10 Q -30 -6 -60 -4 Z"
+          fill="#0a0e14" stroke="#3d8bfd" stroke-width="1"/>
+    <circle cx="-42" cy="-10" r="5" fill="#1a2332" stroke="#5eead4" stroke-width="0.8"/>
+    <circle cx="-26" cy="-9"  r="4" fill="#1a2332" stroke="#5eead4" stroke-width="0.8"/>
+    <path d="M -280 22 L -160 22 L -100 90 L -240 70 Z"
+          fill="url(#wingGrad)" stroke="#2d3a4f" stroke-width="1" opacity="0.95"/>
+    <path d="M -280 22 L -160 22 L -120 60" fill="none" stroke="#3d8bfd" stroke-width="1.5" opacity="0.6"/>
+    <path d="M -260 -22 L -180 -22 L -160 -55 L -240 -45 Z"
+          fill="#3d8bfd" stroke="#1a2332" stroke-width="1" opacity="0.80"/>
+    <ellipse cx="-310" cy="0" rx="32" ry="20" fill="#2d3a4f" stroke="#8b9cb3" stroke-width="1"/>
+    <ellipse cx="-310" cy="0" rx="24" ry="15" fill="#1a2332"/>
+    <ellipse cx="-342" cy="0" rx="20" ry="20" fill="url(#nozzleGlow)" filter="url(#nozzleFilter)" opacity="0.90"/>
+    <ellipse cx="-355" cy="0" rx="32" ry="32" fill="url(#nozzleGlow)" filter="url(#nozzleFilter)" opacity="0.45"/>
+    <line x1="-240" y1="-6" x2="-240" y2="6" stroke="#8b9cb3" stroke-width="0.8" opacity="0.5"/>
+    <line x1="-190" y1="-6" x2="-190" y2="6" stroke="#8b9cb3" stroke-width="0.8" opacity="0.5"/>
+    <line x1="-140" y1="-8" x2="-140" y2="8" stroke="#8b9cb3" stroke-width="0.8" opacity="0.5"/>
+    <circle cx="60" cy="4" r="3" fill="#5eead4" filter="url(#blink)" opacity="0.9"/>
+  </g>
+
+  <!-- Globe rim glow -->
+  <circle cx="720" cy="560" r="332" fill="none" stroke="#3d8bfd" stroke-opacity="0.12" stroke-width="6"/>
+</svg>
diff --git a/examples/app_hub/hub-logo-layers.css b/examples/app_hub/hub-logo-layers.css
new file mode 100644
index 0000000..c646c85
--- /dev/null
+++ b/examples/app_hub/hub-logo-layers.css
@@ -0,0 +1,44 @@
+/* Progressive logo loader (on-demand, fragment-friendly) */
+.hub-page::before {
+  content: none;
+}
+
+.hub-page.logo-enabled::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
+  background-position: center center, center center, center center, center center;
+  background-size: cover, cover, cover, cover;
+  background-image: var(--hub-layer-space, none), var(--hub-layer-globe, none), var(--hub-layer-tail, none), var(--hub-layer-rocket, none);
+  opacity: 0.75;
+}
+
+[data-theme="light"] .hub-page.logo-enabled::before {
+  opacity: 0.75;
+}
+
+.hub-page.logo-full {
+  --hub-layer-space: url("assets/hub-logo-fragment-space.svg");
+  --hub-layer-globe: url("assets/hub-logo-fragment-globe.svg");
+  --hub-layer-tail: url("assets/hub-logo-fragment-tail.svg");
+  --hub-layer-rocket: url("assets/hub-logo-fragment-rocket.svg");
+}
+
+.hub-page.logo-space {
+  --hub-layer-space: url("assets/hub-logo-fragment-space.svg");
+}
+
+.hub-page.logo-globe {
+  --hub-layer-globe: url("assets/hub-logo-fragment-globe.svg");
+}
+
+.hub-page.logo-tail {
+  --hub-layer-tail: url("assets/hub-logo-fragment-tail.svg");
+}
+
+.hub-page.logo-rocket {
+  --hub-layer-rocket: url("assets/hub-logo-fragment-rocket.svg");
+}
diff --git a/examples/app_hub/hub.css b/examples/app_hub/hub.css
index d872c58..e69db9b 100644
--- a/examples/app_hub/hub.css
+++ b/examples/app_hub/hub.css
@@ -8,19 +8,9 @@
   isolation: isolate;
 }
 
-/* Debug watermark visibility */
+/* Logo background is loaded progressively by hub-logo-layers.css when supported. */
 .hub-page::before {
-  content: "";
-  position: fixed;
-  inset: 0;
-  z-index: 0;
-  pointer-events: none;
-  background: url("assets/hub-logo.svg") center center / cover no-repeat;
-  opacity: 0.75;
-}
-
-[data-theme="light"] .hub-page::before {
-  opacity: 0.75;
+  content: none;
 }
 
 .hub-shell {
diff --git a/examples/app_hub/index.html b/examples/app_hub/index.html
index 7465ce7..2fc1bea 100644
--- a/examples/app_hub/index.html
+++ b/examples/app_hub/index.html
@@ -18,7 +18,7 @@
     <main class="main-pane hub-main">
       <header class="hub-header">
         <div class="hub-brand">
-          <img class="hub-logo-mark" src="assets/hub-logo.svg" alt="" width="112" height="84" decoding="async">
+          <img class="hub-logo-mark" src="assets/hub-logo-transparent.svg" alt="" width="112" height="84" decoding="async">
           <h1 class="hub-title">Android Cast</h1>
         </div>
         <p class="muted hub-subtitle">Project hub</p>
@@ -56,14 +56,37 @@
   <script>
     (function () {
       var sel = document.getElementById('theme-select');
-      if (!sel) return;
-      var cur = document.documentElement.getAttribute('data-theme') || 'dark';
-      sel.value = cur;
-      sel.addEventListener('change', function () {
-        var v = sel.value;
-        document.documentElement.setAttribute('data-theme', v);
-        try { localStorage.setItem('crash_console_theme', v); } catch (e) {}
-      });
+      if (sel) {
+        var cur = document.documentElement.getAttribute('data-theme') || 'dark';
+        sel.value = cur;
+        sel.addEventListener('change', function () {
+          var v = sel.value;
+          document.documentElement.setAttribute('data-theme', v);
+          try { localStorage.setItem('crash_console_theme', v); } catch (e) {}
+        });
+      }
+
+      // Progressive enhancement: load logo layers only when browser supports CSS + SVG background images.
+      var supportsCss = !!(window.CSS && CSS.supports);
+      var supportsSvg = !!(document.createElementNS && document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect);
+      var supportsBgSvg = supportsCss && CSS.supports('background-image', 'url("assets/hub-logo-fragment-space.svg")');
+      if (!(supportsSvg && supportsBgSvg)) return;
+
+      var body = document.body;
+      if (!body) return;
+
+      var params = new URLSearchParams(window.location.search);
+      var part = (params.get('logoPart') || 'full').toLowerCase();
+      var allowed = { full: true, space: true, globe: true, tail: true, rocket: true };
+      if (!allowed[part]) part = 'full';
+
+      var link = document.createElement('link');
+      link.rel = 'stylesheet';
+      link.href = 'hub-logo-layers.css';
+      link.onload = function () {
+        body.classList.add('logo-enabled', 'logo-' + part);
+      };
+      document.head.appendChild(link);
     })();
   </script>
 </body>