Models 44

Gemini 4 Argon

by Googlereasoning defaultClean
Open in new window

Running live in a sandboxed frame. Click inside it before using the keyboard.

How it went

Total time
3 min 5 s
Cost
$0.143
Output tokens
14,208
Spent thinking
0 tokens
Speed
78.6 tok/s
Console errors
0
First token after
4.5 s
First visible text after
4.5 s
Prompt tokens
392
Code size
31.0 KB
Finish reason
stop
Served by
Google
Model id
google/gemini-4-argon
Reasoning sent
model default
Max output
943,718 tokens
Generated
Nov 12, 2026

What it was asked

The prompt
“draw me an SVG of an astronaut cat skateboarding on the moon”
System prompt, sent with every prompt
You are generating a self-contained web demo. It will be rendered automatically in a sandboxed iframe and compared side by side with the output of other AI models given the exact same task.

Output rules:
- Reply with exactly ONE fenced code block containing the complete file: ```html (or ```svg when the task asks for an SVG). No text before or after the code block.
- Everything must be inline: CSS in <style>, JavaScript in <script>. No external files, images, fonts or network requests, except the CDN URLs explicitly allowed by the task.
- Do not use localStorage, sessionStorage, cookies, IndexedDB, alert(), confirm(), prompt() or window.open(): they are blocked in the sandbox and will throw.
- The page must look right in a 1280×800 viewport and adapt gracefully down to 375px wide. No horizontal scrollbar.
- Something meaningful must be visible on first paint: a screenshot is taken automatically about 3 seconds after load, without any interaction.
- Everything that makes the demo interesting must be visible within the first seconds: nothing hidden behind a high score, a later level or a long play session.
- Games must start in a self-playing demo mode (a simple AI plays) behind a "Click or press a key to start" message, so the game can be judged in action without playing.
- The iframe only receives keyboard events after the user clicks it: if the demo uses the keyboard, display a clear "Click or press a key to start" message.
- The code must run with zero errors in the console of the latest Chrome.

Code run-1.svg · 642 lines

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Astronaut Cat Skateboarding on the Moon</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body, html {
      width: 100%;
      height: 100%;
      background-color: #050510;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: system-ui, -apple-system, sans-serif;
    }
    svg {
      width: 100%;
      height: 100%;
      max-width: 1280px;
      max-height: 800px;
      display: block;
      box-shadow: 0 0 60px rgba(0, 200, 255, 0.15);
    }

    /* Animations */
    @keyframes float-skater {
      0%, 100% { transform: translate(0px, 0px) rotate(0deg); }
      50% { transform: translate(4px, -16px) rotate(-1.5deg); }
    }
    @keyframes shadow-pulse {
      0%, 100% { transform: scale(1) rotate(-18deg); opacity: 0.45; }
      50% { transform: scale(0.86) rotate(-18deg); opacity: 0.25; }
    }
    @keyframes wheel-spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    @keyframes flame-flicker {
      0%, 100% { transform: scaleX(1) scaleY(1); opacity: 0.95; }
      50% { transform: scaleX(1.18) scaleY(0.92); opacity: 1; }
    }
    @keyframes tail-wag {
      0%, 100% { transform: rotate(0deg); }
      50% { transform: rotate(7deg); }
    }
    @keyframes twinkle {
      0%, 100% { opacity: 0.25; transform: scale(0.85); }
      50% { opacity: 1; transform: scale(1.15); }
    }
    @keyframes earth-float {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-8px); }
    }

    .skater-rig {
      animation: float-skater 3.4s ease-in-out infinite;
      transform-origin: 650px 380px;
    }
    .moon-shadow {
      animation: shadow-pulse 3.4s ease-in-out infinite;
      transform-origin: 625px 560px;
    }
    .wheel-spin {
      animation: wheel-spin 0.65s linear infinite;
      transform-box: fill-box;
      transform-origin: center;
    }
    .thruster-flame {
      animation: flame-flicker 0.14s ease-in-out infinite;
      transform-box: fill-box;
      transform-origin: right center;
    }
    .cat-tail {
      animation: tail-wag 2.2s ease-in-out infinite;
      transform-origin: 550px 400px;
    }
    .star-twinkle-1 {
      animation: twinkle 3s ease-in-out infinite;
      transform-box: fill-box;
      transform-origin: center;
    }
    .star-twinkle-2 {
      animation: twinkle 4.2s ease-in-out infinite 1.3s;
      transform-box: fill-box;
      transform-origin: center;
    }
    .earth-group {
      animation: earth-float 8s ease-in-out infinite;
    }
  </style>
</head>
<body>

<svg viewBox="0 0 1280 800" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- Space Background Gradient -->
    <linearGradient id="spaceGrad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#04040c" />
      <stop offset="45%" stop-color="#0b0d24" />
      <stop offset="80%" stop-color="#181236" />
      <stop offset="100%" stop-color="#221642" />
    </linearGradient>

    <!-- Nebula Gradients -->
    <radialGradient id="nebulaPink" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#ff2a85" stop-opacity="0.22" />
      <stop offset="55%" stop-color="#9b1dff" stop-opacity="0.08" />
      <stop offset="100%" stop-color="#000000" stop-opacity="0" />
    </radialGradient>
    <radialGradient id="nebulaCyan" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#00e5ff" stop-opacity="0.18" />
      <stop offset="60%" stop-color="#0051ff" stop-opacity="0.05" />
      <stop offset="100%" stop-color="#000000" stop-opacity="0" />
    </radialGradient>

    <!-- Earth Gradients & Clip -->
    <linearGradient id="earthOcean" x1="15%" y1="15%" x2="85%" y2="85%">
      <stop offset="0%" stop-color="#00d2ff" />
      <stop offset="50%" stop-color="#0968e5" />
      <stop offset="100%" stop-color="#041b4e" />
    </linearGradient>
    <radialGradient id="earthAtmo" cx="50%" cy="50%" r="50%">
      <stop offset="78%" stop-color="#00d2ff" stop-opacity="0" />
      <stop offset="92%" stop-color="#4ae2ff" stop-opacity="0.45" />
      <stop offset="100%" stop-color="#00d2ff" stop-opacity="0" />
    </radialGradient>
    <clipPath id="earthClip">
      <circle cx="210" cy="210" r="95" />
    </clipPath>

    <!-- Saturn Gradients -->
    <linearGradient id="saturnBody" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#ffe299" />
      <stop offset="55%" stop-color="#e59852" />
      <stop offset="100%" stop-color="#6e352c" />
    </linearGradient>

    <!-- Moon Surface Gradients -->
    <linearGradient id="moonSurface" x1="35%" y1="0%" x2="65%" y2="100%">
      <stop offset="0%" stop-color="#d8dce8" />
      <stop offset="25%" stop-color="#a8b0c4" />
      <stop offset="65%" stop-color="#6c758c" />
      <stop offset="100%" stop-color="#3c4254" />
    </linearGradient>
    <linearGradient id="craterInterior" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#485063" />
      <stop offset="40%" stop-color="#5d667d" />
      <stop offset="100%" stop-color="#bcc3d4" />
    </linearGradient>
    <linearGradient id="craterRimShadow" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#2a2f3d" />
      <stop offset="100%" stop-color="#586075" />
    </linearGradient>

    <!-- Suit & Cat Gradients -->
    <linearGradient id="suitMain" x1="20%" y1="10%" x2="80%" y2="90%">
      <stop offset="0%" stop-color="#ffffff" />
      <stop offset="60%" stop-color="#e3e8f0" />
      <stop offset="100%" stop-color="#abb6c8" />
    </linearGradient>
    <linearGradient id="suitLimbBack" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#d0d7e2" />
      <stop offset="100%" stop-color="#7f8c9f" />
    </linearGradient>
    <linearGradient id="catFur" x1="20%" y1="0%" x2="80%" y2="100%">
      <stop offset="0%" stop-color="#ffb65c" />
      <stop offset="55%" stop-color="#f28322" />
      <stop offset="100%" stop-color="#b84a08" />
    </linearGradient>
    <radialGradient id="glassHelmet" cx="35%" cy="28%" r="65%">
      <stop offset="0%" stop-color="#ffffff" stop-opacity="0.55" />
      <stop offset="18%" stop-color="#b8f2ff" stop-opacity="0.18" />
      <stop offset="65%" stop-color="#00a2ff" stop-opacity="0.06" />
      <stop offset="88%" stop-color="#00d8ff" stop-opacity="0.28" />
      <stop offset="100%" stop-color="#e0faff" stop-opacity="0.75" />
    </radialGradient>

    <!-- Skateboard & Flame Gradients -->
    <linearGradient id="deckGrad" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#ff1e74" />
      <stop offset="50%" stop-color="#ff7714" />
      <stop offset="100%" stop-color="#ffdd00" />
    </linearGradient>
    <linearGradient id="flameOuter" x1="100%" y1="50%" x2="0%" y2="50%">
      <stop offset="0%" stop-color="#ffffff" />
      <stop offset="18%" stop-color="#00ffff" />
      <stop offset="55%" stop-color="#0066ff" stop-opacity="0.85" />
      <stop offset="100%" stop-color="#7a00ff" stop-opacity="0" />
    </linearGradient>

    <!-- Glow Filter -->
    <filter id="neonGlow" x="-30%" y="-30%" width="160%" height="160%">
      <feGaussianBlur stdDeviation="7" result="blur" />
      <feMerge>
        <feMergeNode in="blur" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
  </defs>

  <!-- ================= 1. DEEP SPACE BACKGROUND ================= -->
  <rect width="1280" height="800" fill="url(#spaceGrad)" />

  <!-- Cosmic Nebulae -->
  <ellipse cx="780" cy="240" rx="520" ry="260" fill="url(#nebulaPink)" transform="rotate(-12 780 240)" />
  <ellipse cx="360" cy="360" rx="440" ry="220" fill="url(#nebulaCyan)" transform="rotate(15 360 360)" />
  <ellipse cx="1050" cy="140" rx="320" ry="180" fill="url(#nebulaCyan)" />

  <!-- Starfield -->
  <g fill="#ffffff">
    <!-- Tiny Background Stars -->
    <circle cx="75" cy="85" r="1.2" opacity="0.5" />
    <circle cx="145" cy="340" r="1.5" opacity="0.7" />
    <circle cx="290" cy="70" r="1" opacity="0.4" />
    <circle cx="380" cy="160" r="1.8" opacity="0.8" />
    <circle cx="440" cy="290" r="1.2" opacity="0.6" />
    <circle cx="520" cy="60" r="1.5" opacity="0.5" />
    <circle cx="670" cy="95" r="2" opacity="0.9" />
    <circle cx="740" cy="180" r="1.2" opacity="0.4" />
    <circle cx="880" cy="75" r="1.6" opacity="0.7" />
    <circle cx="950" cy="240" r="1.2" opacity="0.6" />
    <circle cx="1140" cy="80" r="1.8" opacity="0.8" />
    <circle cx="1210" cy="220" r="1.4" opacity="0.5" />
    <circle cx="1190" cy="380" r="1.2" opacity="0.7" />
    <circle cx="60" cy="440" r="1.5" opacity="0.6" />
    <circle cx="590" cy="230" r="1.3" opacity="0.5" />
    <circle cx="840" cy="330" r="1.4" opacity="0.7" />

    <!-- Glowing Sparkle Stars -->
    <g class="star-twinkle-1">
      <path d="M 480,110 Q 480,124 494,124 Q 480,124 480,138 Q 480,124 466,124 Q 480,124 480,110 Z" fill="#ffffff" />
      <circle cx="480" cy="124" r="3" fill="#b8f2ff" filter="url(#neonGlow)" />

      <path d="M 920,105 Q 920,115 930,115 Q 920,115 920,125 Q 920,115 910,115 Q 920,115 920,105 Z" fill="#ffffff" />
      <circle cx="340" cy="240" r="2.5" fill="#ffd4ec" />
      <circle cx="1090" cy="300" r="2.5" fill="#b8f2ff" />
    </g>

    <g class="star-twinkle-2">
      <path d="M 810,45 Q 810,57 822,57 Q 810,57 810,69 Q 810,57 798,57 Q 810,57 810,45 Z" fill="#ffffff" />
      <path d="M 110,135 Q 110,144 119,144 Q 110,144 110,153 Q 110,144 101,144 Q 110,144 110,135 Z" fill="#b8f2ff" />
      <path d="M 1220,115 Q 1220,124 1229,124 Q 1220,124 1220,133 Q 1220,124 1211,124 Q 1220,124 1220,115 Z" fill="#ffd4ec" />
      <circle cx="620" cy="145" r="2.5" fill="#ffffff" />
    </g>
  </g>

  <!-- Shooting Star / Comet -->
  <g opacity="0.85" transform="rotate(-22 860 140)">
    <path d="M 860,140 L 1010,140" stroke="url(#flameOuter)" stroke-width="3" stroke-linecap="round" />
    <circle cx="860" cy="140" r="3" fill="#ffffff" filter="url(#neonGlow)" />
  </g>

  <!-- ================= 2. PLANETS (EARTH & SATURN) ================= -->
  <!-- Earth in the Distance -->
  <g class="earth-group">
    <circle cx="210" cy="210" r="112" fill="url(#earthAtmo)" />
    <g clip-path="url(#earthClip)">
      <circle cx="210" cy="210" r="95" fill="url(#earthOcean)" />
      <!-- Continents -->
      <path d="M 140,145 Q 185,135 205,165 Q 230,195 205,230 Q 175,255 150,235 Q 125,215 140,145 Z" fill="#2ee682" opacity="0.85" />
      <path d="M 245,195 Q 275,180 295,215 Q 315,255 275,295 Q 235,305 225,270 Q 215,235 245,195 Z" fill="#26c46f" opacity="0.85" />
      <path d="M 180,105 Q 225,115 245,135 Q 270,125 255,100 Z" fill="#52f29c" opacity="0.8" />
      <!-- Swirly Clouds -->
      <path d="M 115,175 Q 175,155 235,180 Q 275,195 305,175" fill="none" stroke="#ffffff" stroke-width="9" stroke-linecap="round" opacity="0.55" />
      <path d="M 135,245 Q 195,225 255,250" fill="none" stroke="#ffffff" stroke-width="7" stroke-linecap="round" opacity="0.45" />
      <path d="M 175,135 Q 215,125 265,145" fill="none" stroke="#ffffff" stroke-width="5" stroke-linecap="round" opacity="0.5" />
      <!-- Night Crescent Shadow -->
      <path d="M 210,105 A 95,95 0 0,1 210,315 A 70,98 0 0,0 210,105 Z" fill="#040617" opacity="0.72" transform="rotate(28 210 210)" />
    </g>
    <!-- Rim Light -->
    <circle cx="210" cy="210" r="95" fill="none" stroke="#70ecff" stroke-width="1.5" opacity="0.5" />
  </g>

  <!-- Saturn on the Right -->
  <g transform="translate(1065, 175) rotate(-24)">
    <!-- Back Ring -->
    <path d="M -98,0 A 98,26 0 0,1 98,0" fill="none" stroke="#e4b887" stroke-width="12" opacity="0.55" />
    <path d="M -116,0 A 116,32 0 0,1 116,0" fill="none" stroke="#b5835a" stroke-width="5" opacity="0.4" />
    <!-- Planet Body -->
    <circle cx="0" cy="0" r="46" fill="url(#saturnBody)" />
    <!-- Planet Shading -->
    <path d="M 0,-46 A 46,46 0 0,1 0,46 A 32,46 0 0,0 0,-46 Z" fill="#13091c" opacity="0.55" transform="rotate(15)" />
    <!-- Front Ring -->
    <path d="M 98,0 A 98,26 0 0,1 -98,0" fill="none" stroke="#f7d6a8" stroke-width="12" opacity="0.9" />
    <path d="M 116,0 A 116,32 0 0,1 -116,0" fill="none" stroke="#d49e6a" stroke-width="5" opacity="0.7" />
  </g>

  <!-- ================= 3. DISTANT LUNAR HILLS & FLAG ================= -->
  <path d="M -80,630 Q 170,480 450,555 Q 780,455 1040,565 Q 1190,500 1360,585 L 1360,800 L -80,800 Z" fill="#464d63" />

  <!-- Cute Paw-Print Moon Flag on Distant Hill -->
  <g transform="translate(275, 455) rotate(-7)">
    <line x1="0" y1="0" x2="0" y2="85" stroke="#d8dce8" stroke-width="3.5" stroke-linecap="round" />
    <circle cx="0" cy="0" r="4.5" fill="#ff3385" />
    <path d="M 2,5 Q 30,0 56,9 Q 82,18 106,10 L 106,52 Q 82,60 56,50 Q 30,41 2,48 Z" fill="#ff2a7a" stroke="#ffffff" stroke-width="2" />
    <!-- White Paw Print Emblem -->
    <g fill="#ffffff" transform="translate(53, 31) scale(0.85)">
      <ellipse cx="0" cy="5" rx="9" ry="7" />
      <circle cx="-10" cy="-5" r="3.8" />
      <circle cx="-3.5" cy="-10" r="3.8" />
      <circle cx="4.5" cy="-10" r="3.8" />
      <circle cx="11" cy="-5" r="3.8" />
    </g>
  </g>

  <!-- ================= 4. FOREGROUND MOON & CRATER BOWL ================= -->
  <!-- Main Moon Horizon Curve (Sloped Like a Skate Ramp) -->
  <path d="M -100,660 Q 320,440 830,525 Q 1120,575 1380,470 L 1380,850 L -100,850 Z" fill="url(#moonSurface)" />
  <!-- Bright Rim Highlight Along Moon Horizon -->
  <path d="M -100,660 Q 320,440 830,525 Q 1120,575 1380,470" fill="none" stroke="#eef2ff" stroke-width="3" opacity="0.5" />

  <!-- Giant Skate-Bowl Crater (Right Foreground) -->
  <g transform="translate(970, 650) rotate(-6)">
    <!-- Outer Rim Highlight -->
    <ellipse cx="0" cy="0" rx="235" ry="78" fill="#d8deeb" opacity="0.55" />
    <!-- Crater Bowl Wall -->
    <ellipse cx="0" cy="4" rx="215" ry="66" fill="url(#craterInterior)" />
    <!-- Deep Lip Shadow -->
    <path d="M -215,4 A 215,66 0 0,1 215,4 A 215,52 0 0,0 -215,4 Z" fill="url(#craterRimShadow)" />
    <!-- Skate Carve Grind Marks Inside Bowl -->
    <path d="M -145,16 Q -30,52 115,8" fill="none" stroke="#eef2ff" stroke-width="2.5" stroke-dasharray="10 8" opacity="0.45" />
    <path d="M -110,30 Q 10,56 140,20" fill="none" stroke="#8df5ff" stroke-width="2" stroke-dasharray="6 10" opacity="0.35" />
  </g>

  <!-- Secondary Craters & Moon Rocks -->
  <!-- Left Mid Crater -->
  <g transform="translate(185, 675) rotate(-13)">
    <ellipse cx="0" cy="0" rx="95" ry="34" fill="#c7cfe0" opacity="0.6" />
    <ellipse cx="0" cy="3" rx="84" ry="27" fill="url(#craterInterior)" />
    <path d="M -84,3 A 84,27 0 0,1 84,3 A 84,19 0 0,0 -84,3 Z" fill="#3a4154" />
  </g>

  <!-- Center Low Crater -->
  <g transform="translate(525, 725) rotate(-4)">
    <ellipse cx="0" cy="0" rx="68" ry="22" fill="#bac2d4" opacity="0.5" />
    <ellipse cx="0" cy="2" rx="58" ry="17" fill="url(#craterInterior)" />
    <path d="M -58,2 A 58,17 0 0,1 58,2 A 58,11 0 0,0 -58,2 Z" fill="#3a4154" />
  </g>

  <!-- High Rim Small Crater -->
  <g transform="translate(430, 540) rotate(-11)">
    <ellipse cx="0" cy="2" rx="38" ry="11" fill="url(#craterInterior)" />
    <path d="M -38,2 A 38,11 0 0,1 38,2 A 38,7 0 0,0 -38,2 Z" fill="#434b5e" />
  </g>

  <!-- Surface Pebbles & Texture -->
  <g fill="#535b70" opacity="0.7">
    <ellipse cx="330" cy="610" rx="14" ry="6" transform="rotate(-10 330 610)" />
    <ellipse cx="352" cy="618" rx="6" ry="3" />
    <ellipse cx="680" cy="645" rx="18" ry="7" transform="rotate(6 680 645)" />
    <ellipse cx="708" cy="652" rx="8" ry="4" />
    <ellipse cx="1190" cy="545" rx="12" ry="5" transform="rotate(-15 1190 545)" />
  </g>

  <!-- Dynamic Shadow Cast by Cat & Skateboard on the Moon -->
  <ellipse class="moon-shadow" cx="625" cy="560" rx="145" ry="24" fill="#232838" />

  <!-- Floating Low-Gravity Moon Pebbles Kicked Up -->
  <g fill="#9aa3b8">
    <circle cx="430" cy="495" r="6" />
    <circle cx="385" cy="470" r="4" opacity="0.8" />
    <circle cx="465" cy="520" r="4.5" />
    <circle cx="775" cy="485" r="5" opacity="0.85" />
    <circle cx="820" cy="510" r="3.5" opacity="0.65" />
  </g>

  <!-- ================= 5. ASTRONAUT CAT SKATEBOARDING ================= -->
  <g class="skater-rig">

    <!-- Motion Speed Arcs / Cosmic Shred Trails -->
    <g opacity="0.75" filter="url(#neonGlow)">
      <path d="M 270,565 Q 400,520 515,470" fill="none" stroke="#00f2ff" stroke-width="3.5" stroke-linecap="round" stroke-dasharray="18 14" />
      <path d="M 320,595 Q 445,550 565,492" fill="none" stroke="#ff2a85" stroke-width="2.5" stroke-linecap="round" stroke-dasharray="10 16" />
      <path d="M 230,525 Q 350,480 465,435" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-dasharray="6 18" />
    </g>

    <!-- Center Skateboard & Cat on Pivot (650, 380) and Tilt for Ollie Jump -->
    <g transform="translate(650, 380) rotate(-19) translate(-650, -380)">

      <!-- -------- A. ROCKET THRUSTER & SKATEBOARD -------- -->
      <!-- Rocket Thruster Flame (Left / Rear of Deck) -->
      <g class="thruster-flame">
        <path d="M 492,455 C 420,432 340,444 255,460 C 340,480 420,486 492,473 Z" fill="url(#flameOuter)" filter="url(#neonGlow)" />
        <path d="M 492,459 C 445,448 395,454 345,462 C 395,471 445,474 492,469 Z" fill="#ffffff" />
        <!-- Thruster Sparks -->
        <circle cx="320" cy="445" r="3.5" fill="#00ffff" />
        <circle cx="280" cy="472" r="2.5" fill="#ff3399" />
        <circle cx="375" cy="480" r="3" fill="#ffffff" />
      </g>

      <!-- Thruster Nozzle Hardware -->
      <path d="M 508,452 L 486,446 L 486,478 L 508,470 Z" fill="#3a4154" stroke="#7c879e" stroke-width="2" stroke-linejoin="round" />
      <ellipse cx="486" cy="462" rx="4" ry="15" fill="#00ffff" opacity="0.8" />

      <!-- Skateboard Trucks (Metallic Brackets) -->
      <!-- Rear Truck -->
      <path d="M 548,472 L 568,472 L 563,493 L 553,493 Z" fill="#9ba6bd" stroke="#2c3242" stroke-width="2" />
      <rect x="543" y="468" width="30" height="6" rx="2" fill="#525b70" />
      <!-- Front Truck -->
      <path d="M 732,472 L 752,472 L 747,493 L 737,493 Z" fill="#9ba6bd" stroke="#2c3242" stroke-width="2" />
      <rect x="727" y="468" width="30" height="6" rx="2" fill="#525b70" />

      <!-- Neon Under-Glow Beneath Deck -->
      <ellipse cx="650" cy="482" rx="125" ry="12" fill="#00f2ff" opacity="0.38" filter="url(#neonGlow)" />

      <!-- Skateboard Deck -->
      <!-- Deck Bottom Graphic Layer -->
      <path d="M 482,442 Q 505,468 538,468 L 762,468 Q 795,468 818,442 L 823,449 Q 798,478 762,478 L 538,478 Q 502,478 477,449 Z" fill="url(#deckGrad)" stroke="#1e2230" stroke-width="2" />
      <!-- Deck Side Rim Stripe -->
      <path d="M 480,446 Q 503,473 538,473 L 762,473 Q 797,473 820,446" fill="none" stroke="#ffffff" stroke-width="2" opacity="0.75" />
      <!-- Dark Grip Tape Top -->
      <path d="M 482,442 Q 505,468 538,468 L 762,468 Q 795,468 818,442 Q 795,459 762,459 L 538,459 Q 505,459 482,442 Z" fill="#232736" stroke="#454d66" stroke-width="1.5" />

      <!-- Glowing Neon Wheels -->
      <!-- Rear Wheel -->
      <g transform="translate(558, 498)">
        <circle cx="0" cy="0" r="22" fill="#161924" stroke="#00f2ff" stroke-width="5" filter="url(#neonGlow)" />
        <g class="wheel-spin">
          <line x1="-15" y1="0" x2="15" y2="0" stroke="#ff2a85" stroke-width="3" />
          <line x1="0" y1="-15" x2="0" y2="15" stroke="#ff2a85" stroke-width="3" />
          <circle cx="0" cy="0" r="7" fill="#ffffff" />
        </g>
        <circle cx="0" cy="0" r="3" fill="#161924" />
      </g>

      <!-- Front Wheel -->
      <g transform="translate(742, 498)">
        <circle cx="0" cy="0" r="22" fill="#161924" stroke="#00f2ff" stroke-width="5" filter="url(#neonGlow)" />
        <g class="wheel-spin">
          <line x1="-15" y1="0" x2="15" y2="0" stroke="#ff2a85" stroke-width="3" />
          <line x1="0" y1="-15" x2="0" y2="15" stroke="#ff2a85" stroke-width="3" />
          <circle cx="0" cy="0" r="7" fill="#ffffff" />
        </g>
        <circle cx="0" cy="0" r="3" fill="#161924" />
      </g>

      <!-- -------- B. ASTRONAUT CAT SPACESUIT & BODY -------- -->
      <!-- Pressurized Cat Tail in Spacesuit Sleeve -->
      <g class="cat-tail">
        <path d="M 588,398 C 530,412 478,370 486,322 C 492,286 532,292 528,324 C 524,348 548,372 588,376 Z" fill="url(#suitMain)" stroke="#4e586e" stroke-width="3" stroke-linejoin="round" />
        <!-- Glowing Neon Stripes on Tail Tip -->
        <path d="M 487,328 Q 505,322 526,330" fill="none" stroke="#ff2a85" stroke-width="5" stroke-linecap="round" />
        <path d="M 490,312 Q 508,308 525,317" fill="none" stroke="#00e5ff" stroke-width="4" stroke-linecap="round" />
      </g>

      <!-- Space Jetpack / Life-Support Backpack -->
      <g transform="translate(556, 294) rotate(-8)">
        <rect x="0" y="0" width="56" height="92" rx="16" fill="url(#suitLimbBack)" stroke="#475166" stroke-width="3" />
        <!-- Side Oxygen Tank Cylinder -->
        <rect x="-12" y="14" width="18" height="64" rx="9" fill="#68758f" stroke="#3c4457" stroke-width="2.5" />
        <!-- Glowing Status Lights -->
        <circle cx="-3" cy="28" r="3.5" fill="#00ff88" filter="url(#neonGlow)" />
        <circle cx="-3" cy="40" r="3.5" fill="#00e5ff" filter="url(#neonGlow)" />
        <rect x="12" y="18" width="22" height="10" rx="3" fill="#ff2a85" />
      </g>

      <!-- Back Arm (Right Arm Reaching Forward for Balance) -->
      <g>
        <path d="M 678,315 Q 735,305 772,265" fill="none" stroke="url(#suitLimbBack)" stroke-width="30" stroke-linecap="round" />
        <path d="M 678,315 Q 735,305 772,265" fill="none" stroke="#566178" stroke-width="32" stroke-linecap="round" opacity="0.25" />
        <!-- Red Suit Cuff Ring -->
        <ellipse cx="762" cy="275" rx="15" ry="7" transform="rotate(42 762 275)" fill="#ff2a85" />
        <!-- Space Glove Paw -->
        <circle cx="778" cy="258" r="17" fill="#ffffff" stroke="#566178" stroke-width="2.5" />
        <circle cx="790" cy="252" r="6" fill="#ffffff" stroke="#566178" stroke-width="2" />
        <circle cx="788" cy="264" r="6" fill="#ffffff" stroke="#566178" stroke-width="2" />
        <ellipse cx="782" cy="259" rx="6" ry="5" fill="#ff85b3" />
      </g>

      <!-- Front Leg (Right Leg Planted Forward on Board) -->
      <g>
        <path d="M 672,392 Q 708,412 714,442" fill="none" stroke="url(#suitLimbBack)" stroke-width="36" stroke-linecap="round" />
        <!-- Knee Joint Ridges -->
        <path d="M 684,412 Q 704,405 716,415" fill="none" stroke="#64708a" stroke-width="3" />
        <!-- Futuristic Magnetic Space Boot (Front) -->
        <path d="M 692,435 L 732,435 C 748,435 755,448 755,461 L 688,461 Z" fill="#ffffff" stroke="#475166" stroke-width="3" stroke-linejoin="round" />
        <rect x="692" y="432" width="40" height="8" rx="4" fill="#ff2a85" />
        <rect x="686" y="456" width="71" height="7" rx="3.5" fill="#00e5ff" />
      </g>

      <!-- Back Leg (Left Leg Bent & Kicking Tail of Board) -->
      <g>
        <path d="M 608,395 Q 572,418 576,442" fill="none" stroke="url(#suitMain)" stroke-width="36" stroke-linecap="round" />
        <path d="M 564,418 Q 584,412 596,422" fill="none" stroke="#8592ad" stroke-width="3" />
        <!-- Futuristic Magnetic Space Boot (Rear) -->
        <path d="M 554,435 L 594,435 C 608,435 614,448 614,461 L 548,461 Z" fill="#ffffff" stroke="#475166" stroke-width="3" stroke-linejoin="round" />
        <rect x="554" y="432" width="40" height="8" rx="4" fill="#ff2a85" />
        <rect x="546" y="456" width="70" height="7" rx="3.5" fill="#00e5ff" />
      </g>

      <!-- Main Spacesuit Torso -->
      <path d="M 594,302 C 578,348 582,412 612,418 L 676,418 C 702,412 706,352 686,302 Z" fill="url(#suitMain)" stroke="#475166" stroke-width="3" stroke-linejoin="round" />
      <!-- Suit Ribbing / Seam Lines -->
      <path d="M 588,375 Q 642,390 694,375" fill="none" stroke="#a6b2c7" stroke-width="3" />
      <path d="M 592,392 Q 642,407 692,392" fill="none" stroke="#a6b2c7" stroke-width="3" />

      <!-- Chest Control Pack (Fish-Bone Telemetry Display) -->
      <g transform="translate(624, 326) rotate(3)">
        <rect x="0" y="0" width="48" height="36" rx="8" fill="#23293a" stroke="#8f9cb5" stroke-width="2.5" />
        <!-- Cute Neon Fish Icon on Chest Screen -->
        <path d="M 12,18 Q 22,9 32,18 Q 22,27 12,18 Z M 30,18 L 38,12 L 38,24 Z" fill="#00f2ff" />
        <circle cx="17" cy="17" r="1.5" fill="#23293a" />
        <!-- Indicator Buttons -->
        <circle cx="12" cy="30" r="2.2" fill="#ff2a85" />
        <circle cx="20" cy="30" r="2.2" fill="#ffdd00" />
        <circle cx="28" cy="30" r="2.2" fill="#00ff88" />
      </g>

      <!-- Front Arm (Left Arm Shredding Backwards) -->
      <g>
        <path d="M 604,322 Q 554,335 516,300" fill="none" stroke="url(#suitMain)" stroke-width="30" stroke-linecap="round" />
        <path d="M 604,322 Q 554,335 516,300" fill="none" stroke="#475166" stroke-width="33" stroke-linecap="round" opacity="0.2" />
        <!-- Shoulder Patch (Paw Emblem) -->
        <circle cx="585" cy="322" r="11" fill="#ff7714" stroke="#ffffff" stroke-width="1.5" />
        <circle cx="585" cy="323" r="4" fill="#ffffff" />
        <!-- Red Suit Cuff Ring -->
        <ellipse cx="526" cy="308" rx="7" ry="15" transform="rotate(-42 526 308)" fill="#ff2a85" />
        <!-- Space Glove Paw -->
        <circle cx="510" cy="292" r="17" fill="#ffffff" stroke="#475166" stroke-width="2.5" />
        <circle cx="497" cy="284" r="6" fill="#ffffff" stroke="#475166" stroke-width="2" />
        <circle cx="496" cy="296" r="6" fill="#ffffff" stroke="#475166" stroke-width="2" />
        <circle cx="503" cy="276" r="5.5" fill="#ffffff" stroke="#475166" stroke-width="2" />
        <!-- Pink Paw Pad on Glove -->
        <ellipse cx="508" cy="292" rx="6" ry="5" fill="#ff85b3" />
      </g>

      <!-- Metallic Neck Ring -->
      <ellipse cx="642" cy="298" rx="54" ry="13" fill="#8895b0" stroke="#3c4457" stroke-width="3" />
      <ellipse cx="642" cy="295" rx="48" ry="9" fill="#505b73" />
      <circle cx="604" cy="299" r="3" fill="#00f2ff" />
      <circle cx="642" cy="304" r="3" fill="#ff2a85" />
      <circle cx="680" cy="299" r="3" fill="#00f2ff" />

      <!-- -------- C. CAT HEAD & GLASS BUBBLE HELMET -------- -->
      <!-- Rear Interior of Helmet -->
      <circle cx="648" cy="212" r="92" fill="#182238" opacity="0.45" />

      <!-- Ginger Tabby Cat Head -->
      <g transform="translate(650, 222) rotate(5)">
        <!-- Left Ear -->
        <path d="M -56,-34 L -70,-92 C -70,-98 -62,-100 -56,-95 L -14,-58 Z" fill="url(#catFur)" stroke="#8f3500" stroke-width="2.5" stroke-linejoin="round" />
        <path d="M -52,-42 L -62,-82 L -25,-54 Z" fill="#ff8da1" />

        <!-- Right Ear -->
        <path d="M 18,-56 L 62,-92 C 68,-96 75,-92 73,-85 L 56,-28 Z" fill="url(#catFur)" stroke="#8f3500" stroke-width="2.5" stroke-linejoin="round" />
        <path d="M 26,-52 L 60,-80 L 50,-36 Z" fill="#ff8da1" />

        <!-- Fluffy Head Base & Cheeks -->
        <ellipse cx="0" cy="0" rx="66" ry="54" fill="url(#catFur)" stroke="#8f3500" stroke-width="2.5" />
        <!-- Cheek Fur Tufts -->
        <path d="M -62,4 L -76,-2 L -66,14 L -78,18 L -58,26" fill="url(#catFur)" stroke="#8f3500" stroke-width="2" stroke-linejoin="round" />
        <path d="M 62,4 L 76,-2 L 66,14 L 78,18 L 58,26" fill="url(#catFur)" stroke="#8f3500" stroke-width="2" stroke-linejoin="round" />

        <!-- Tabby Forehead Stripes -->
        <path d="M 0,-52 L 0,-28" stroke="#9e3b00" stroke-width="5" stroke-linecap="round" />
        <path d="M -14,-49 L -9,-30" stroke="#9e3b00" stroke-width="4.5" stroke-linecap="round" />
        <path d="M 14,-49 L 9,-30" stroke="#9e3b00" stroke-width="4.5" stroke-linecap="round" />

        <!-- Cream Muzzle Patch -->
        <ellipse cx="4" cy="16" rx="28" ry="20" fill="#fff3e6" />

        <!-- Big Expressive Eyes (Looking Forward with Stoked Energy) -->
        <!-- Left Eye -->
        <g transform="translate(-24, -6)">
          <ellipse cx="0" cy="0" rx="15" ry="16" fill="#0d1b2a" />
          <ellipse cx="1" cy="0" rx="13" ry="14" fill="#17e88f" />
          <ellipse cx="3" cy="0" rx="7" ry="10" fill="#09111c" />
          <!-- Starry Eye Catchlights -->
          <circle cx="-4" cy="-5" r="4.5" fill="#ffffff" />
          <circle cx="5" cy="5" r="2.2" fill="#ffffff" />
        </g>

        <!-- Right Eye -->
        <g transform="translate(28, -6)">
          <ellipse cx="0" cy="0" rx="15" ry="16" fill="#0d1b2a" />
          <ellipse cx="1" cy="0" rx="13" ry="14" fill="#17e88f" />
          <ellipse cx="3" cy="0" rx="7" ry="10" fill="#09111c" />
          <!-- Starry Eye Catchlights -->
          <circle cx="-4" cy="-5" r="4.5" fill="#ffffff" />
          <circle cx="5" cy="5" r="2.2" fill="#ffffff" />
        </g>

        <!-- Cute Rosy Cheeks -->
        <ellipse cx="-42" cy="14" rx="10" ry="6" fill="#ff5c8a" opacity="0.55" />
        <ellipse cx="44" cy="14" rx="10" ry="6" fill="#ff5c8a" opacity="0.55" />

        <!-- Pink Triangle Nose -->
        <path d="M -3,7 L 9,7 L 3,14 Z" fill="#ff4d79" stroke="#8f3500" stroke-width="1.5" stroke-linejoin="round" />

        <!-- Happy Excited Cat Mouth (:3 + Open Grin) -->
        <path d="M -9,17 Q -3,23 3,15 Q 9,23 15,17" fill="none" stroke="#6e2600" stroke-width="2.8" stroke-linecap="round" />
        <path d="M -5,19 Q 3,33 11,19 Z" fill="#d92b5a" stroke="#6e2600" stroke-width="2" stroke-linejoin="round" />
        <!-- Little White Fang -->
        <path d="M 7,19 L 9,24 L 11,19 Z" fill="#ffffff" />

        <!-- Whiskers -->
        <g stroke="#fff8f0" stroke-width="2" stroke-linecap="round" opacity="0.9">
          <line x1="-48" y1="10" x2="-82" y2="2" />
          <line x1="-50" y1="17" x2="-86" y2="17" />
          <line x1="-48" y1="24" x2="-80" y2="31" />
          <line x1="50" y1="10" x2="84" y2="2" />
          <line x1="52" y1="17" x2="88" y2="17" />
          <line x1="50" y1="24" x2="82" y2="31" />
        </g>
      </g>

      <!-- Helmet Radio Antenna (Left Top) -->
      <g transform="translate(575, 145) rotate(-32)">
        <rect x="-5" y="0" width="10" height="14" rx="3" fill="#8895b0" stroke="#3c4457" stroke-width="2" />
        <line x1="0" y1="0" x2="0" y2="-34" stroke="#d8dce8" stroke-width="4" stroke-linecap="round" />
        <circle cx="0" cy="-36" r="7" fill="#00f2ff" filter="url(#neonGlow)" />
        <circle cx="0" cy="-36" r="3.5" fill="#ffffff" />
      </g>

      <!-- Transparent Space Helmet Bubble -->
      <circle cx="648" cy="212" r="92" fill="url(#glassHelmet)" stroke="#b8f2ff" stroke-width="3.5" />

      <!-- Glossy Helmet Visor Highlights -->
      <path d="M 582,162 A 76,76 0 0,1 692,144" fill="none" stroke="#ffffff" stroke-width="8" stroke-linecap="round" opacity="0.65" />
      <ellipse cx="578" cy="186" rx="6" ry="13" transform="rotate(-18 578 186)" fill="#ffffff" opacity="0.55" />
      <path d="M 605,282 A 78,78 0 0,0 722,245" fill="none" stroke="#00e5ff" stroke-width="4" stroke-linecap="round" opacity="0.45" />

    </g>
  </g>

  <!-- ================= 6. FOREGROUND VIGNETTE & SPARKLES ================= -->
  <g fill="#00f2ff" opacity="0.7">
    <circle cx="485" cy="390" r="2.5" filter="url(#neonGlow)" />
    <circle cx="815" cy="360" r="3" filter="url(#neonGlow)" />
    <circle cx="745" cy="255" r="2" />
  </g>
</svg>

</body>
</html>
Raw response
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Astronaut Cat Skateboarding on the Moon</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body, html {
      width: 100%;
      height: 100%;
      background-color: #050510;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: system-ui, -apple-system, sans-serif;
    }
    svg {
      width: 100%;
      height: 100%;
      max-width: 1280px;
      max-height: 800px;
      display: block;
      box-shadow: 0 0 60px rgba(0, 200, 255, 0.15);
    }

    /* Animations */
    @keyframes float-skater {
      0%, 100% { transform: translate(0px, 0px) rotate(0deg); }
      50% { transform: translate(4px, -16px) rotate(-1.5deg); }
    }
    @keyframes shadow-pulse {
      0%, 100% { transform: scale(1) rotate(-18deg); opacity: 0.45; }
      50% { transform: scale(0.86) rotate(-18deg); opacity: 0.25; }
    }
    @keyframes wheel-spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    @keyframes flame-flicker {
      0%, 100% { transform: scaleX(1) scaleY(1); opacity: 0.95; }
      50% { transform: scaleX(1.18) scaleY(0.92); opacity: 1; }
    }
    @keyframes tail-wag {
      0%, 100% { transform: rotate(0deg); }
      50% { transform: rotate(7deg); }
    }
    @keyframes twinkle {
      0%, 100% { opacity: 0.25; transform: scale(0.85); }
      50% { opacity: 1; transform: scale(1.15); }
    }
    @keyframes earth-float {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-8px); }
    }

    .skater-rig {
      animation: float-skater 3.4s ease-in-out infinite;
      transform-origin: 650px 380px;
    }
    .moon-shadow {
      animation: shadow-pulse 3.4s ease-in-out infinite;
      transform-origin: 625px 560px;
    }
    .wheel-spin {
      animation: wheel-spin 0.65s linear infinite;
      transform-box: fill-box;
      transform-origin: center;
    }
    .thruster-flame {
      animation: flame-flicker 0.14s ease-in-out infinite;
      transform-box: fill-box;
      transform-origin: right center;
    }
    .cat-tail {
      animation: tail-wag 2.2s ease-in-out infinite;
      transform-origin: 550px 400px;
    }
    .star-twinkle-1 {
      animation: twinkle 3s ease-in-out infinite;
      transform-box: fill-box;
      transform-origin: center;
    }
    .star-twinkle-2 {
      animation: twinkle 4.2s ease-in-out infinite 1.3s;
      transform-box: fill-box;
      transform-origin: center;
    }
    .earth-group {
      animation: earth-float 8s ease-in-out infinite;
    }
  </style>
</head>
<body>

<svg viewBox="0 0 1280 800" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- Space Background Gradient -->
    <linearGradient id="spaceGrad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#04040c" />
      <stop offset="45%" stop-color="#0b0d24" />
      <stop offset="80%" stop-color="#181236" />
      <stop offset="100%" stop-color="#221642" />
    </linearGradient>

    <!-- Nebula Gradients -->
    <radialGradient id="nebulaPink" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#ff2a85" stop-opacity="0.22" />
      <stop offset="55%" stop-color="#9b1dff" stop-opacity="0.08" />
      <stop offset="100%" stop-color="#000000" stop-opacity="0" />
    </radialGradient>
    <radialGradient id="nebulaCyan" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#00e5ff" stop-opacity="0.18" />
      <stop offset="60%" stop-color="#0051ff" stop-opacity="0.05" />
      <stop offset="100%" stop-color="#000000" stop-opacity="0" />
    </radialGradient>

    <!-- Earth Gradients & Clip -->
    <linearGradient id="earthOcean" x1="15%" y1="15%" x2="85%" y2="85%">
      <stop offset="0%" stop-color="#00d2ff" />
      <stop offset="50%" stop-color="#0968e5" />
      <stop offset="100%" stop-color="#041b4e" />
    </linearGradient>
    <radialGradient id="earthAtmo" cx="50%" cy="50%" r="50%">
      <stop offset="78%" stop-color="#00d2ff" stop-opacity="0" />
      <stop offset="92%" stop-color="#4ae2ff" stop-opacity="0.45" />
      <stop offset="100%" stop-color="#00d2ff" stop-opacity="0" />
    </radialGradient>
    <clipPath id="earthClip">
      <circle cx="210" cy="210" r="95" />
    </clipPath>

    <!-- Saturn Gradients -->
    <linearGradient id="saturnBody" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#ffe299" />
      <stop offset="55%" stop-color="#e59852" />
      <stop offset="100%" stop-color="#6e352c" />
    </linearGradient>

    <!-- Moon Surface Gradients -->
    <linearGradient id="moonSurface" x1="35%" y1="0%" x2="65%" y2="100%">
      <stop offset="0%" stop-color="#d8dce8" />
      <stop offset="25%" stop-color="#a8b0c4" />
      <stop offset="65%" stop-color="#6c758c" />
      <stop offset="100%" stop-color="#3c4254" />
    </linearGradient>
    <linearGradient id="craterInterior" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#485063" />
      <stop offset="40%" stop-color="#5d667d" />
      <stop offset="100%" stop-color="#bcc3d4" />
    </linearGradient>
    <linearGradient id="craterRimShadow" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#2a2f3d" />
      <stop offset="100%" stop-color="#586075" />
    </linearGradient>

    <!-- Suit & Cat Gradients -->
    <linearGradient id="suitMain" x1="20%" y1="10%" x2="80%" y2="90%">
      <stop offset="0%" stop-color="#ffffff" />
      <stop offset="60%" stop-color="#e3e8f0" />
      <stop offset="100%" stop-color="#abb6c8" />
    </linearGradient>
    <linearGradient id="suitLimbBack" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#d0d7e2" />
      <stop offset="100%" stop-color="#7f8c9f" />
    </linearGradient>
    <linearGradient id="catFur" x1="20%" y1="0%" x2="80%" y2="100%">
      <stop offset="0%" stop-color="#ffb65c" />
      <stop offset="55%" stop-color="#f28322" />
      <stop offset="100%" stop-color="#b84a08" />
    </linearGradient>
    <radialGradient id="glassHelmet" cx="35%" cy="28%" r="65%">
      <stop offset="0%" stop-color="#ffffff" stop-opacity="0.55" />
      <stop offset="18%" stop-color="#b8f2ff" stop-opacity="0.18" />
      <stop offset="65%" stop-color="#00a2ff" stop-opacity="0.06" />
      <stop offset="88%" stop-color="#00d8ff" stop-opacity="0.28" />
      <stop offset="100%" stop-color="#e0faff" stop-opacity="0.75" />
    </radialGradient>

    <!-- Skateboard & Flame Gradients -->
    <linearGradient id="deckGrad" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#ff1e74" />
      <stop offset="50%" stop-color="#ff7714" />
      <stop offset="100%" stop-color="#ffdd00" />
    </linearGradient>
    <linearGradient id="flameOuter" x1="100%" y1="50%" x2="0%" y2="50%">
      <stop offset="0%" stop-color="#ffffff" />
      <stop offset="18%" stop-color="#00ffff" />
      <stop offset="55%" stop-color="#0066ff" stop-opacity="0.85" />
      <stop offset="100%" stop-color="#7a00ff" stop-opacity="0" />
    </linearGradient>

    <!-- Glow Filter -->
    <filter id="neonGlow" x="-30%" y="-30%" width="160%" height="160%">
      <feGaussianBlur stdDeviation="7" result="blur" />
      <feMerge>
        <feMergeNode in="blur" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
  </defs>

  <!-- ================= 1. DEEP SPACE BACKGROUND ================= -->
  <rect width="1280" height="800" fill="url(#spaceGrad)" />

  <!-- Cosmic Nebulae -->
  <ellipse cx="780" cy="240" rx="520" ry="260" fill="url(#nebulaPink)" transform="rotate(-12 780 240)" />
  <ellipse cx="360" cy="360" rx="440" ry="220" fill="url(#nebulaCyan)" transform="rotate(15 360 360)" />
  <ellipse cx="1050" cy="140" rx="320" ry="180" fill="url(#nebulaCyan)" />

  <!-- Starfield -->
  <g fill="#ffffff">
    <!-- Tiny Background Stars -->
    <circle cx="75" cy="85" r="1.2" opacity="0.5" />
    <circle cx="145" cy="340" r="1.5" opacity="0.7" />
    <circle cx="290" cy="70" r="1" opacity="0.4" />
    <circle cx="380" cy="160" r="1.8" opacity="0.8" />
    <circle cx="440" cy="290" r="1.2" opacity="0.6" />
    <circle cx="520" cy="60" r="1.5" opacity="0.5" />
    <circle cx="670" cy="95" r="2" opacity="0.9" />
    <circle cx="740" cy="180" r="1.2" opacity="0.4" />
    <circle cx="880" cy="75" r="1.6" opacity="0.7" />
    <circle cx="950" cy="240" r="1.2" opacity="0.6" />
    <circle cx="1140" cy="80" r="1.8" opacity="0.8" />
    <circle cx="1210" cy="220" r="1.4" opacity="0.5" />
    <circle cx="1190" cy="380" r="1.2" opacity="0.7" />
    <circle cx="60" cy="440" r="1.5" opacity="0.6" />
    <circle cx="590" cy="230" r="1.3" opacity="0.5" />
    <circle cx="840" cy="330" r="1.4" opacity="0.7" />

    <!-- Glowing Sparkle Stars -->
    <g class="star-twinkle-1">
      <path d="M 480,110 Q 480,124 494,124 Q 480,124 480,138 Q 480,124 466,124 Q 480,124 480,110 Z" fill="#ffffff" />
      <circle cx="480" cy="124" r="3" fill="#b8f2ff" filter="url(#neonGlow)" />

      <path d="M 920,105 Q 920,115 930,115 Q 920,115 920,125 Q 920,115 910,115 Q 920,115 920,105 Z" fill="#ffffff" />
      <circle cx="340" cy="240" r="2.5" fill="#ffd4ec" />
      <circle cx="1090" cy="300" r="2.5" fill="#b8f2ff" />
    </g>

    <g class="star-twinkle-2">
      <path d="M 810,45 Q 810,57 822,57 Q 810,57 810,69 Q 810,57 798,57 Q 810,57 810,45 Z" fill="#ffffff" />
      <path d="M 110,135 Q 110,144 119,144 Q 110,144 110,153 Q 110,144 101,144 Q 110,144 110,135 Z" fill="#b8f2ff" />
      <path d="M 1220,115 Q 1220,124 1229,124 Q 1220,124 1220,133 Q 1220,124 1211,124 Q 1220,124 1220,115 Z" fill="#ffd4ec" />
      <circle cx="620" cy="145" r="2.5" fill="#ffffff" />
    </g>
  </g>

  <!-- Shooting Star / Comet -->
  <g opacity="0.85" transform="rotate(-22 860 140)">
    <path d="M 860,140 L 1010,140" stroke="url(#flameOuter)" stroke-width="3" stroke-linecap="round" />
    <circle cx="860" cy="140" r="3" fill="#ffffff" filter="url(#neonGlow)" />
  </g>

  <!-- ================= 2. PLANETS (EARTH & SATURN) ================= -->
  <!-- Earth in the Distance -->
  <g class="earth-group">
    <circle cx="210" cy="210" r="112" fill="url(#earthAtmo)" />
    <g clip-path="url(#earthClip)">
      <circle cx="210" cy="210" r="95" fill="url(#earthOcean)" />
      <!-- Continents -->
      <path d="M 140,145 Q 185,135 205,165 Q 230,195 205,230 Q 175,255 150,235 Q 125,215 140,145 Z" fill="#2ee682" opacity="0.85" />
      <path d="M 245,195 Q 275,180 295,215 Q 315,255 275,295 Q 235,305 225,270 Q 215,235 245,195 Z" fill="#26c46f" opacity="0.85" />
      <path d="M 180,105 Q 225,115 245,135 Q 270,125 255,100 Z" fill="#52f29c" opacity="0.8" />
      <!-- Swirly Clouds -->
      <path d="M 115,175 Q 175,155 235,180 Q 275,195 305,175" fill="none" stroke="#ffffff" stroke-width="9" stroke-linecap="round" opacity="0.55" />
      <path d="M 135,245 Q 195,225 255,250" fill="none" stroke="#ffffff" stroke-width="7" stroke-linecap="round" opacity="0.45" />
      <path d="M 175,135 Q 215,125 265,145" fill="none" stroke="#ffffff" stroke-width="5" stroke-linecap="round" opacity="0.5" />
      <!-- Night Crescent Shadow -->
      <path d="M 210,105 A 95,95 0 0,1 210,315 A 70,98 0 0,0 210,105 Z" fill="#040617" opacity="0.72" transform="rotate(28 210 210)" />
    </g>
    <!-- Rim Light -->
    <circle cx="210" cy="210" r="95" fill="none" stroke="#70ecff" stroke-width="1.5" opacity="0.5" />
  </g>

  <!-- Saturn on the Right -->
  <g transform="translate(1065, 175) rotate(-24)">
    <!-- Back Ring -->
    <path d="M -98,0 A 98,26 0 0,1 98,0" fill="none" stroke="#e4b887" stroke-width="12" opacity="0.55" />
    <path d="M -116,0 A 116,32 0 0,1 116,0" fill="none" stroke="#b5835a" stroke-width="5" opacity="0.4" />
    <!-- Planet Body -->
    <circle cx="0" cy="0" r="46" fill="url(#saturnBody)" />
    <!-- Planet Shading -->
    <path d="M 0,-46 A 46,46 0 0,1 0,46 A 32,46 0 0,0 0,-46 Z" fill="#13091c" opacity="0.55" transform="rotate(15)" />
    <!-- Front Ring -->
    <path d="M 98,0 A 98,26 0 0,1 -98,0" fill="none" stroke="#f7d6a8" stroke-width="12" opacity="0.9" />
    <path d="M 116,0 A 116,32 0 0,1 -116,0" fill="none" stroke="#d49e6a" stroke-width="5" opacity="0.7" />
  </g>

  <!-- ================= 3. DISTANT LUNAR HILLS & FLAG ================= -->
  <path d="M -80,630 Q 170,480 450,555 Q 780,455 1040,565 Q 1190,500 1360,585 L 1360,800 L -80,800 Z" fill="#464d63" />

  <!-- Cute Paw-Print Moon Flag on Distant Hill -->
  <g transform="translate(275, 455) rotate(-7)">
    <line x1="0" y1="0" x2="0" y2="85" stroke="#d8dce8" stroke-width="3.5" stroke-linecap="round" />
    <circle cx="0" cy="0" r="4.5" fill="#ff3385" />
    <path d="M 2,5 Q 30,0 56,9 Q 82,18 106,10 L 106,52 Q 82,60 56,50 Q 30,41 2,48 Z" fill="#ff2a7a" stroke="#ffffff" stroke-width="2" />
    <!-- White Paw Print Emblem -->
    <g fill="#ffffff" transform="translate(53, 31) scale(0.85)">
      <ellipse cx="0" cy="5" rx="9" ry="7" />
      <circle cx="-10" cy="-5" r="3.8" />
      <circle cx="-3.5" cy="-10" r="3.8" />
      <circle cx="4.5" cy="-10" r="3.8" />
      <circle cx="11" cy="-5" r="3.8" />
    </g>
  </g>

  <!-- ================= 4. FOREGROUND MOON & CRATER BOWL ================= -->
  <!-- Main Moon Horizon Curve (Sloped Like a Skate Ramp) -->
  <path d="M -100,660 Q 320,440 830,525 Q 1120,575 1380,470 L 1380,850 L -100,850 Z" fill="url(#moonSurface)" />
  <!-- Bright Rim Highlight Along Moon Horizon -->
  <path d="M -100,660 Q 320,440 830,525 Q 1120,575 1380,470" fill="none" stroke="#eef2ff" stroke-width="3" opacity="0.5" />

  <!-- Giant Skate-Bowl Crater (Right Foreground) -->
  <g transform="translate(970, 650) rotate(-6)">
    <!-- Outer Rim Highlight -->
    <ellipse cx="0" cy="0" rx="235" ry="78" fill="#d8deeb" opacity="0.55" />
    <!-- Crater Bowl Wall -->
    <ellipse cx="0" cy="4" rx="215" ry="66" fill="url(#craterInterior)" />
    <!-- Deep Lip Shadow -->
    <path d="M -215,4 A 215,66 0 0,1 215,4 A 215,52 0 0,0 -215,4 Z" fill="url(#craterRimShadow)" />
    <!-- Skate Carve Grind Marks Inside Bowl -->
    <path d="M -145,16 Q -30,52 115,8" fill="none" stroke="#eef2ff" stroke-width="2.5" stroke-dasharray="10 8" opacity="0.45" />
    <path d="M -110,30 Q 10,56 140,20" fill="none" stroke="#8df5ff" stroke-width="2" stroke-dasharray="6 10" opacity="0.35" />
  </g>

  <!-- Secondary Craters & Moon Rocks -->
  <!-- Left Mid Crater -->
  <g transform="translate(185, 675) rotate(-13)">
    <ellipse cx="0" cy="0" rx="95" ry="34" fill="#c7cfe0" opacity="0.6" />
    <ellipse cx="0" cy="3" rx="84" ry="27" fill="url(#craterInterior)" />
    <path d="M -84,3 A 84,27 0 0,1 84,3 A 84,19 0 0,0 -84,3 Z" fill="#3a4154" />
  </g>

  <!-- Center Low Crater -->
  <g transform="translate(525, 725) rotate(-4)">
    <ellipse cx="0" cy="0" rx="68" ry="22" fill="#bac2d4" opacity="0.5" />
    <ellipse cx="0" cy="2" rx="58" ry="17" fill="url(#craterInterior)" />
    <path d="M -58,2 A 58,17 0 0,1 58,2 A 58,11 0 0,0 -58,2 Z" fill="#3a4154" />
  </g>

  <!-- High Rim Small Crater -->
  <g transform="translate(430, 540) rotate(-11)">
    <ellipse cx="0" cy="2" rx="38" ry="11" fill="url(#craterInterior)" />
    <path d="M -38,2 A 38,11 0 0,1 38,2 A 38,7 0 0,0 -38,2 Z" fill="#434b5e" />
  </g>

  <!-- Surface Pebbles & Texture -->
  <g fill="#535b70" opacity="0.7">
    <ellipse cx="330" cy="610" rx="14" ry="6" transform="rotate(-10 330 610)" />
    <ellipse cx="352" cy="618" rx="6" ry="3" />
    <ellipse cx="680" cy="645" rx="18" ry="7" transform="rotate(6 680 645)" />
    <ellipse cx="708" cy="652" rx="8" ry="4" />
    <ellipse cx="1190" cy="545" rx="12" ry="5" transform="rotate(-15 1190 545)" />
  </g>

  <!-- Dynamic Shadow Cast by Cat & Skateboard on the Moon -->
  <ellipse class="moon-shadow" cx="625" cy="560" rx="145" ry="24" fill="#232838" />

  <!-- Floating Low-Gravity Moon Pebbles Kicked Up -->
  <g fill="#9aa3b8">
    <circle cx="430" cy="495" r="6" />
    <circle cx="385" cy="470" r="4" opacity="0.8" />
    <circle cx="465" cy="520" r="4.5" />
    <circle cx="775" cy="485" r="5" opacity="0.85" />
    <circle cx="820" cy="510" r="3.5" opacity="0.65" />
  </g>

  <!-- ================= 5. ASTRONAUT CAT SKATEBOARDING ================= -->
  <g class="skater-rig">

    <!-- Motion Speed Arcs / Cosmic Shred Trails -->
    <g opacity="0.75" filter="url(#neonGlow)">
      <path d="M 270,565 Q 400,520 515,470" fill="none" stroke="#00f2ff" stroke-width="3.5" stroke-linecap="round" stroke-dasharray="18 14" />
      <path d="M 320,595 Q 445,550 565,492" fill="none" stroke="#ff2a85" stroke-width="2.5" stroke-linecap="round" stroke-dasharray="10 16" />
      <path d="M 230,525 Q 350,480 465,435" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-dasharray="6 18" />
    </g>

    <!-- Center Skateboard & Cat on Pivot (650, 380) and Tilt for Ollie Jump -->
    <g transform="translate(650, 380) rotate(-19) translate(-650, -380)">

      <!-- -------- A. ROCKET THRUSTER & SKATEBOARD -------- -->
      <!-- Rocket Thruster Flame (Left / Rear of Deck) -->
      <g class="thruster-flame">
        <path d="M 492,455 C 420,432 340,444 255,460 C 340,480 420,486 492,473 Z" fill="url(#flameOuter)" filter="url(#neonGlow)" />
        <path d="M 492,459 C 445,448 395,454 345,462 C 395,471 445,474 492,469 Z" fill="#ffffff" />
        <!-- Thruster Sparks -->
        <circle cx="320" cy="445" r="3.5" fill="#00ffff" />
        <circle cx="280" cy="472" r="2.5" fill="#ff3399" />
        <circle cx="375" cy="480" r="3" fill="#ffffff" />
      </g>

      <!-- Thruster Nozzle Hardware -->
      <path d="M 508,452 L 486,446 L 486,478 L 508,470 Z" fill="#3a4154" stroke="#7c879e" stroke-width="2" stroke-linejoin="round" />
      <ellipse cx="486" cy="462" rx="4" ry="15" fill="#00ffff" opacity="0.8" />

      <!-- Skateboard Trucks (Metallic Brackets) -->
      <!-- Rear Truck -->
      <path d="M 548,472 L 568,472 L 563,493 L 553,493 Z" fill="#9ba6bd" stroke="#2c3242" stroke-width="2" />
      <rect x="543" y="468" width="30" height="6" rx="2" fill="#525b70" />
      <!-- Front Truck -->
      <path d="M 732,472 L 752,472 L 747,493 L 737,493 Z" fill="#9ba6bd" stroke="#2c3242" stroke-width="2" />
      <rect x="727" y="468" width="30" height="6" rx="2" fill="#525b70" />

      <!-- Neon Under-Glow Beneath Deck -->
      <ellipse cx="650" cy="482" rx="125" ry="12" fill="#00f2ff" opacity="0.38" filter="url(#neonGlow)" />

      <!-- Skateboard Deck -->
      <!-- Deck Bottom Graphic Layer -->
      <path d="M 482,442 Q 505,468 538,468 L 762,468 Q 795,468 818,442 L 823,449 Q 798,478 762,478 L 538,478 Q 502,478 477,449 Z" fill="url(#deckGrad)" stroke="#1e2230" stroke-width="2" />
      <!-- Deck Side Rim Stripe -->
      <path d="M 480,446 Q 503,473 538,473 L 762,473 Q 797,473 820,446" fill="none" stroke="#ffffff" stroke-width="2" opacity="0.75" />
      <!-- Dark Grip Tape Top -->
      <path d="M 482,442 Q 505,468 538,468 L 762,468 Q 795,468 818,442 Q 795,459 762,459 L 538,459 Q 505,459 482,442 Z" fill="#232736" stroke="#454d66" stroke-width="1.5" />

      <!-- Glowing Neon Wheels -->
      <!-- Rear Wheel -->
      <g transform="translate(558, 498)">
        <circle cx="0" cy="0" r="22" fill="#161924" stroke="#00f2ff" stroke-width="5" filter="url(#neonGlow)" />
        <g class="wheel-spin">
          <line x1="-15" y1="0" x2="15" y2="0" stroke="#ff2a85" stroke-width="3" />
          <line x1="0" y1="-15" x2="0" y2="15" stroke="#ff2a85" stroke-width="3" />
          <circle cx="0" cy="0" r="7" fill="#ffffff" />
        </g>
        <circle cx="0" cy="0" r="3" fill="#161924" />
      </g>

      <!-- Front Wheel -->
      <g transform="translate(742, 498)">
        <circle cx="0" cy="0" r="22" fill="#161924" stroke="#00f2ff" stroke-width="5" filter="url(#neonGlow)" />
        <g class="wheel-spin">
          <line x1="-15" y1="0" x2="15" y2="0" stroke="#ff2a85" stroke-width="3" />
          <line x1="0" y1="-15" x2="0" y2="15" stroke="#ff2a85" stroke-width="3" />
          <circle cx="0" cy="0" r="7" fill="#ffffff" />
        </g>
        <circle cx="0" cy="0" r="3" fill="#161924" />
      </g>

      <!-- -------- B. ASTRONAUT CAT SPACESUIT & BODY -------- -->
      <!-- Pressurized Cat Tail in Spacesuit Sleeve -->
      <g class="cat-tail">
        <path d="M 588,398 C 530,412 478,370 486,322 C 492,286 532,292 528,324 C 524,348 548,372 588,376 Z" fill="url(#suitMain)" stroke="#4e586e" stroke-width="3" stroke-linejoin="round" />
        <!-- Glowing Neon Stripes on Tail Tip -->
        <path d="M 487,328 Q 505,322 526,330" fill="none" stroke="#ff2a85" stroke-width="5" stroke-linecap="round" />
        <path d="M 490,312 Q 508,308 525,317" fill="none" stroke="#00e5ff" stroke-width="4" stroke-linecap="round" />
      </g>

      <!-- Space Jetpack / Life-Support Backpack -->
      <g transform="translate(556, 294) rotate(-8)">
        <rect x="0" y="0" width="56" height="92" rx="16" fill="url(#suitLimbBack)" stroke="#475166" stroke-width="3" />
        <!-- Side Oxygen Tank Cylinder -->
        <rect x="-12" y="14" width="18" height="64" rx="9" fill="#68758f" stroke="#3c4457" stroke-width="2.5" />
        <!-- Glowing Status Lights -->
        <circle cx="-3" cy="28" r="3.5" fill="#00ff88" filter="url(#neonGlow)" />
        <circle cx="-3" cy="40" r="3.5" fill="#00e5ff" filter="url(#neonGlow)" />
        <rect x="12" y="18" width="22" height="10" rx="3" fill="#ff2a85" />
      </g>

      <!-- Back Arm (Right Arm Reaching Forward for Balance) -->
      <g>
        <path d="M 678,315 Q 735,305 772,265" fill="none" stroke="url(#suitLimbBack)" stroke-width="30" stroke-linecap="round" />
        <path d="M 678,315 Q 735,305 772,265" fill="none" stroke="#566178" stroke-width="32" stroke-linecap="round" opacity="0.25" />
        <!-- Red Suit Cuff Ring -->
        <ellipse cx="762" cy="275" rx="15" ry="7" transform="rotate(42 762 275)" fill="#ff2a85" />
        <!-- Space Glove Paw -->
        <circle cx="778" cy="258" r="17" fill="#ffffff" stroke="#566178" stroke-width="2.5" />
        <circle cx="790" cy="252" r="6" fill="#ffffff" stroke="#566178" stroke-width="2" />
        <circle cx="788" cy="264" r="6" fill="#ffffff" stroke="#566178" stroke-width="2" />
        <ellipse cx="782" cy="259" rx="6" ry="5" fill="#ff85b3" />
      </g>

      <!-- Front Leg (Right Leg Planted Forward on Board) -->
      <g>
        <path d="M 672,392 Q 708,412 714,442" fill="none" stroke="url(#suitLimbBack)" stroke-width="36" stroke-linecap="round" />
        <!-- Knee Joint Ridges -->
        <path d="M 684,412 Q 704,405 716,415" fill="none" stroke="#64708a" stroke-width="3" />
        <!-- Futuristic Magnetic Space Boot (Front) -->
        <path d="M 692,435 L 732,435 C 748,435 755,448 755,461 L 688,461 Z" fill="#ffffff" stroke="#475166" stroke-width="3" stroke-linejoin="round" />
        <rect x="692" y="432" width="40" height="8" rx="4" fill="#ff2a85" />
        <rect x="686" y="456" width="71" height="7" rx="3.5" fill="#00e5ff" />
      </g>

      <!-- Back Leg (Left Leg Bent & Kicking Tail of Board) -->
      <g>
        <path d="M 608,395 Q 572,418 576,442" fill="none" stroke="url(#suitMain)" stroke-width="36" stroke-linecap="round" />
        <path d="M 564,418 Q 584,412 596,422" fill="none" stroke="#8592ad" stroke-width="3" />
        <!-- Futuristic Magnetic Space Boot (Rear) -->
        <path d="M 554,435 L 594,435 C 608,435 614,448 614,461 L 548,461 Z" fill="#ffffff" stroke="#475166" stroke-width="3" stroke-linejoin="round" />
        <rect x="554" y="432" width="40" height="8" rx="4" fill="#ff2a85" />
        <rect x="546" y="456" width="70" height="7" rx="3.5" fill="#00e5ff" />
      </g>

      <!-- Main Spacesuit Torso -->
      <path d="M 594,302 C 578,348 582,412 612,418 L 676,418 C 702,412 706,352 686,302 Z" fill="url(#suitMain)" stroke="#475166" stroke-width="3" stroke-linejoin="round" />
      <!-- Suit Ribbing / Seam Lines -->
      <path d="M 588,375 Q 642,390 694,375" fill="none" stroke="#a6b2c7" stroke-width="3" />
      <path d="M 592,392 Q 642,407 692,392" fill="none" stroke="#a6b2c7" stroke-width="3" />

      <!-- Chest Control Pack (Fish-Bone Telemetry Display) -->
      <g transform="translate(624, 326) rotate(3)">
        <rect x="0" y="0" width="48" height="36" rx="8" fill="#23293a" stroke="#8f9cb5" stroke-width="2.5" />
        <!-- Cute Neon Fish Icon on Chest Screen -->
        <path d="M 12,18 Q 22,9 32,18 Q 22,27 12,18 Z M 30,18 L 38,12 L 38,24 Z" fill="#00f2ff" />
        <circle cx="17" cy="17" r="1.5" fill="#23293a" />
        <!-- Indicator Buttons -->
        <circle cx="12" cy="30" r="2.2" fill="#ff2a85" />
        <circle cx="20" cy="30" r="2.2" fill="#ffdd00" />
        <circle cx="28" cy="30" r="2.2" fill="#00ff88" />
      </g>

      <!-- Front Arm (Left Arm Shredding Backwards) -->
      <g>
        <path d="M 604,322 Q 554,335 516,300" fill="none" stroke="url(#suitMain)" stroke-width="30" stroke-linecap="round" />
        <path d="M 604,322 Q 554,335 516,300" fill="none" stroke="#475166" stroke-width="33" stroke-linecap="round" opacity="0.2" />
        <!-- Shoulder Patch (Paw Emblem) -->
        <circle cx="585" cy="322" r="11" fill="#ff7714" stroke="#ffffff" stroke-width="1.5" />
        <circle cx="585" cy="323" r="4" fill="#ffffff" />
        <!-- Red Suit Cuff Ring -->
        <ellipse cx="526" cy="308" rx="7" ry="15" transform="rotate(-42 526 308)" fill="#ff2a85" />
        <!-- Space Glove Paw -->
        <circle cx="510" cy="292" r="17" fill="#ffffff" stroke="#475166" stroke-width="2.5" />
        <circle cx="497" cy="284" r="6" fill="#ffffff" stroke="#475166" stroke-width="2" />
        <circle cx="496" cy="296" r="6" fill="#ffffff" stroke="#475166" stroke-width="2" />
        <circle cx="503" cy="276" r="5.5" fill="#ffffff" stroke="#475166" stroke-width="2" />
        <!-- Pink Paw Pad on Glove -->
        <ellipse cx="508" cy="292" rx="6" ry="5" fill="#ff85b3" />
      </g>

      <!-- Metallic Neck Ring -->
      <ellipse cx="642" cy="298" rx="54" ry="13" fill="#8895b0" stroke="#3c4457" stroke-width="3" />
      <ellipse cx="642" cy="295" rx="48" ry="9" fill="#505b73" />
      <circle cx="604" cy="299" r="3" fill="#00f2ff" />
      <circle cx="642" cy="304" r="3" fill="#ff2a85" />
      <circle cx="680" cy="299" r="3" fill="#00f2ff" />

      <!-- -------- C. CAT HEAD & GLASS BUBBLE HELMET -------- -->
      <!-- Rear Interior of Helmet -->
      <circle cx="648" cy="212" r="92" fill="#182238" opacity="0.45" />

      <!-- Ginger Tabby Cat Head -->
      <g transform="translate(650, 222) rotate(5)">
        <!-- Left Ear -->
        <path d="M -56,-34 L -70,-92 C -70,-98 -62,-100 -56,-95 L -14,-58 Z" fill="url(#catFur)" stroke="#8f3500" stroke-width="2.5" stroke-linejoin="round" />
        <path d="M -52,-42 L -62,-82 L -25,-54 Z" fill="#ff8da1" />

        <!-- Right Ear -->
        <path d="M 18,-56 L 62,-92 C 68,-96 75,-92 73,-85 L 56,-28 Z" fill="url(#catFur)" stroke="#8f3500" stroke-width="2.5" stroke-linejoin="round" />
        <path d="M 26,-52 L 60,-80 L 50,-36 Z" fill="#ff8da1" />

        <!-- Fluffy Head Base & Cheeks -->
        <ellipse cx="0" cy="0" rx="66" ry="54" fill="url(#catFur)" stroke="#8f3500" stroke-width="2.5" />
        <!-- Cheek Fur Tufts -->
        <path d="M -62,4 L -76,-2 L -66,14 L -78,18 L -58,26" fill="url(#catFur)" stroke="#8f3500" stroke-width="2" stroke-linejoin="round" />
        <path d="M 62,4 L 76,-2 L 66,14 L 78,18 L 58,26" fill="url(#catFur)" stroke="#8f3500" stroke-width="2" stroke-linejoin="round" />

        <!-- Tabby Forehead Stripes -->
        <path d="M 0,-52 L 0,-28" stroke="#9e3b00" stroke-width="5" stroke-linecap="round" />
        <path d="M -14,-49 L -9,-30" stroke="#9e3b00" stroke-width="4.5" stroke-linecap="round" />
        <path d="M 14,-49 L 9,-30" stroke="#9e3b00" stroke-width="4.5" stroke-linecap="round" />

        <!-- Cream Muzzle Patch -->
        <ellipse cx="4" cy="16" rx="28" ry="20" fill="#fff3e6" />

        <!-- Big Expressive Eyes (Looking Forward with Stoked Energy) -->
        <!-- Left Eye -->
        <g transform="translate(-24, -6)">
          <ellipse cx="0" cy="0" rx="15" ry="16" fill="#0d1b2a" />
          <ellipse cx="1" cy="0" rx="13" ry="14" fill="#17e88f" />
          <ellipse cx="3" cy="0" rx="7" ry="10" fill="#09111c" />
          <!-- Starry Eye Catchlights -->
          <circle cx="-4" cy="-5" r="4.5" fill="#ffffff" />
          <circle cx="5" cy="5" r="2.2" fill="#ffffff" />
        </g>

        <!-- Right Eye -->
        <g transform="translate(28, -6)">
          <ellipse cx="0" cy="0" rx="15" ry="16" fill="#0d1b2a" />
          <ellipse cx="1" cy="0" rx="13" ry="14" fill="#17e88f" />
          <ellipse cx="3" cy="0" rx="7" ry="10" fill="#09111c" />
          <!-- Starry Eye Catchlights -->
          <circle cx="-4" cy="-5" r="4.5" fill="#ffffff" />
          <circle cx="5" cy="5" r="2.2" fill="#ffffff" />
        </g>

        <!-- Cute Rosy Cheeks -->
        <ellipse cx="-42" cy="14" rx="10" ry="6" fill="#ff5c8a" opacity="0.55" />
        <ellipse cx="44" cy="14" rx="10" ry="6" fill="#ff5c8a" opacity="0.55" />

        <!-- Pink Triangle Nose -->
        <path d="M -3,7 L 9,7 L 3,14 Z" fill="#ff4d79" stroke="#8f3500" stroke-width="1.5" stroke-linejoin="round" />

        <!-- Happy Excited Cat Mouth (:3 + Open Grin) -->
        <path d="M -9,17 Q -3,23 3,15 Q 9,23 15,17" fill="none" stroke="#6e2600" stroke-width="2.8" stroke-linecap="round" />
        <path d="M -5,19 Q 3,33 11,19 Z" fill="#d92b5a" stroke="#6e2600" stroke-width="2" stroke-linejoin="round" />
        <!-- Little White Fang -->
        <path d="M 7,19 L 9,24 L 11,19 Z" fill="#ffffff" />

        <!-- Whiskers -->
        <g stroke="#fff8f0" stroke-width="2" stroke-linecap="round" opacity="0.9">
          <line x1="-48" y1="10" x2="-82" y2="2" />
          <line x1="-50" y1="17" x2="-86" y2="17" />
          <line x1="-48" y1="24" x2="-80" y2="31" />
          <line x1="50" y1="10" x2="84" y2="2" />
          <line x1="52" y1="17" x2="88" y2="17" />
          <line x1="50" y1="24" x2="82" y2="31" />
        </g>
      </g>

      <!-- Helmet Radio Antenna (Left Top) -->
      <g transform="translate(575, 145) rotate(-32)">
        <rect x="-5" y="0" width="10" height="14" rx="3" fill="#8895b0" stroke="#3c4457" stroke-width="2" />
        <line x1="0" y1="0" x2="0" y2="-34" stroke="#d8dce8" stroke-width="4" stroke-linecap="round" />
        <circle cx="0" cy="-36" r="7" fill="#00f2ff" filter="url(#neonGlow)" />
        <circle cx="0" cy="-36" r="3.5" fill="#ffffff" />
      </g>

      <!-- Transparent Space Helmet Bubble -->
      <circle cx="648" cy="212" r="92" fill="url(#glassHelmet)" stroke="#b8f2ff" stroke-width="3.5" />

      <!-- Glossy Helmet Visor Highlights -->
      <path d="M 582,162 A 76,76 0 0,1 692,144" fill="none" stroke="#ffffff" stroke-width="8" stroke-linecap="round" opacity="0.65" />
      <ellipse cx="578" cy="186" rx="6" ry="13" transform="rotate(-18 578 186)" fill="#ffffff" opacity="0.55" />
      <path d="M 605,282 A 78,78 0 0,0 722,245" fill="none" stroke="#00e5ff" stroke-width="4" stroke-linecap="round" opacity="0.45" />

    </g>
  </g>

  <!-- ================= 6. FOREGROUND VIGNETTE & SPARKLES ================= -->
  <g fill="#00f2ff" opacity="0.7">
    <circle cx="485" cy="390" r="2.5" filter="url(#neonGlow)" />
    <circle cx="815" cy="360" r="3" filter="url(#neonGlow)" />
    <circle cx="745" cy="255" r="2" />
  </g>
</svg>

</body>
</html>
```