Skateboarding astronaut catOne-line

Gemini 3.8 Flash

by GoogleReasoningClean

Open in new window

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

How it went

Total time: 3 min 51 s
Cost: $0.119
Output tokens: 31,558
Spent thinking: 9,639 tokens
Speed: 138.2 tok/s
Console errors: 0

First token after: 2.4 s
First visible text after: 1 min 37 s
Prompt tokens: 353
Code size: 47.9 KB
Finish reason: stop
Served by: Google
Model id: google/gemini-3.8-flash
Reasoning sent: {"effort":"high"}
Max output: 65,536 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 · 935 lines

Download

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800" width="100%" height="100%">
  <defs>
    <!-- Space & Nebula Gradients -->
    <linearGradient id="spaceGrad" x1="0%" y1="0%" x2="40%" y2="100%">
      <stop offset="0%" stop-color="#02020a" />
      <stop offset="35%" stop-color="#070a1e" />
      <stop offset="70%" stop-color="#120c2b" />
      <stop offset="100%" stop-color="#040612" />
    </linearGradient>

    <radialGradient id="nebula1" cx="30%" cy="25%" r="45%">
      <stop offset="0%" stop-color="#bf55ec" stop-opacity="0.22" />
      <stop offset="45%" stop-color="#22a7f0" stop-opacity="0.12" />
      <stop offset="100%" stop-color="#000000" stop-opacity="0" />
    </radialGradient>

    <radialGradient id="nebula2" cx="80%" cy="40%" r="50%">
      <stop offset="0%" stop-color="#00e5ff" stop-opacity="0.18" />
      <stop offset="40%" stop-color="#e040fb" stop-opacity="0.1" />
      <stop offset="100%" stop-color="#000000" stop-opacity="0" />
    </radialGradient>

    <!-- Earth Gradients -->
    <radialGradient id="earthAtmo" cx="50%" cy="50%" r="50%">
      <stop offset="82%" stop-color="#38bdf8" stop-opacity="0" />
      <stop offset="92%" stop-color="#38bdf8" stop-opacity="0.4" />
      <stop offset="100%" stop-color="#0284c7" stop-opacity="0.8" />
    </radialGradient>

    <radialGradient id="earthGlow" cx="40%" cy="40%" r="60%">
      <stop offset="0%" stop-color="#bae6fd" stop-opacity="0.5" />
      <stop offset="30%" stop-color="#38bdf8" stop-opacity="0.2" />
      <stop offset="100%" stop-color="#0369a1" stop-opacity="0" />
    </radialGradient>

    <linearGradient id="earthBase" x1="20%" y1="10%" x2="90%" y2="90%">
      <stop offset="0%" stop-color="#1e40af" />
      <stop offset="35%" stop-color="#0369a1" />
      <stop offset="70%" stop-color="#0284c7" />
      <stop offset="100%" stop-color="#082f49" />
    </linearGradient>

    <linearGradient id="earthShadow" x1="25%" y1="20%" x2="85%" y2="80%">
      <stop offset="0%" stop-color="#000000" stop-opacity="0" />
      <stop offset="50%" stop-color="#000000" stop-opacity="0.1" />
      <stop offset="80%" stop-color="#020617" stop-opacity="0.92" />
      <stop offset="100%" stop-color="#020617" stop-opacity="0.98" />
    </linearGradient>

    <!-- Moon Surface Gradients -->
    <linearGradient id="moonSurfGrad" x1="20%" y1="0%" x2="80%" y2="100%">
      <stop offset="0%" stop-color="#cbd5e1" />
      <stop offset="25%" stop-color="#94a3b8" />
      <stop offset="55%" stop-color="#64748b" />
      <stop offset="85%" stop-color="#334155" />
      <stop offset="100%" stop-color="#1e293b" />
    </linearGradient>

    <linearGradient id="moonRampGrad" x1="10%" y1="0%" x2="90%" y2="100%">
      <stop offset="0%" stop-color="#e2e8f0" />
      <stop offset="15%" stop-color="#cbd5e1" />
      <stop offset="45%" stop-color="#94a3b8" />
      <stop offset="75%" stop-color="#475569" />
      <stop offset="100%" stop-color="#1e293b" />
    </linearGradient>

    <linearGradient id="craterDark" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#0f172a" />
      <stop offset="60%" stop-color="#1e293b" />
      <stop offset="100%" stop-color="#475569" />
    </linearGradient>

    <linearGradient id="lipHighlight" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#ffffff" stop-opacity="0.8" />
      <stop offset="50%" stop-color="#f8fafc" stop-opacity="0.9" />
      <stop offset="100%" stop-color="#94a3b8" stop-opacity="0.3" />
    </linearGradient>

    <!-- Suit & Cat Gradients -->
    <linearGradient id="suitWhite" x1="20%" y1="0%" x2="80%" y2="100%">
      <stop offset="0%" stop-color="#ffffff" />
      <stop offset="35%" stop-color="#f1f5f9" />
      <stop offset="70%" stop-color="#cbd5e1" />
      <stop offset="100%" stop-color="#64748b" />
    </linearGradient>

    <linearGradient id="suitShadow" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#0284c7" stop-opacity="0.25" />
      <stop offset="60%" stop-color="#1e293b" stop-opacity="0.6" />
      <stop offset="100%" stop-color="#0f172a" stop-opacity="0.85" />
    </linearGradient>

    <linearGradient id="suitOrange" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#ff781f" />
      <stop offset="50%" stop-color="#ea580c" />
      <stop offset="100%" stop-color="#9a3412" />
    </linearGradient>

    <linearGradient id="suitCyan" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#22d3ee" />
      <stop offset="100%" stop-color="#0891b2" />
    </linearGradient>

    <linearGradient id="goldFoil" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#fef08a" />
      <stop offset="30%" stop-color="#eab308" />
      <stop offset="70%" stop-color="#ca8a04" />
      <stop offset="100%" stop-color="#854d0e" />
    </linearGradient>

    <!-- Fur Gradients -->
    <linearGradient id="tabbyOrange" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#fb923c" />
      <stop offset="40%" stop-color="#f97316" />
      <stop offset="85%" stop-color="#c2410c" />
      <stop offset="100%" stop-color="#7c2d12" />
    </linearGradient>

    <linearGradient id="catCream" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#ffffff" />
      <stop offset="100%" stop-color="#fed7aa" />
    </linearGradient>

    <linearGradient id="eyeGreen" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#84cc16" />
      <stop offset="40%" stop-color="#22c55e" />
      <stop offset="80%" stop-color="#15803d" />
      <stop offset="100%" stop-color="#052e16" />
    </linearGradient>

    <!-- Helmet Glass Gradients -->
    <radialGradient id="visorGlass" cx="38%" cy="32%" r="65%">
      <stop offset="0%" stop-color="#ffffff" stop-opacity="0.45" />
      <stop offset="30%" stop-color="#38bdf8" stop-opacity="0.18" />
      <stop offset="65%" stop-color="#818cf8" stop-opacity="0.12" />
      <stop offset="85%" stop-color="#0284c7" stop-opacity="0.3" />
      <stop offset="100%" stop-color="#1e1b4b" stop-opacity="0.65" />
    </radialGradient>

    <linearGradient id="visorGoldRim" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#fde047" stop-opacity="0.8" />
      <stop offset="45%" stop-color="#0284c7" stop-opacity="0.2" />
      <stop offset="80%" stop-color="#e11d48" stop-opacity="0.4" />
      <stop offset="100%" stop-color="#38bdf8" stop-opacity="0.8" />
    </linearGradient>

    <!-- Skateboard Gradients -->
    <linearGradient id="deckGraphic" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#00f2fe" />
      <stop offset="30%" stop-color="#4facfe" />
      <stop offset="65%" stop-color="#7f00ff" />
      <stop offset="100%" stop-color="#ff007f" />
    </linearGradient>

    <linearGradient id="gripTape" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#1e293b" />
      <stop offset="50%" stop-color="#0f172a" />
      <stop offset="100%" stop-color="#020617" />
    </linearGradient>

    <radialGradient id="wheelCyan" cx="35%" cy="35%" r="65%">
      <stop offset="0%" stop-color="#ffffff" />
      <stop offset="30%" stop-color="#67e8f9" />
      <stop offset="70%" stop-color="#06b6d4" />
      <stop offset="100%" stop-color="#083344" />
    </radialGradient>

    <radialGradient id="wheelGlow" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#22d3ee" stop-opacity="0.8" />
      <stop offset="50%" stop-color="#06b6d4" stop-opacity="0.3" />
      <stop offset="100%" stop-color="#0891b2" stop-opacity="0" />
    </radialGradient>

    <!-- Plasma Flame -->
    <linearGradient id="thrusterPlume" x1="0%" y1="50%" x2="100%" y2="50%">
      <stop offset="0%" stop-color="#ffffff" />
      <stop offset="20%" stop-color="#a5f3fc" />
      <stop offset="50%" stop-color="#00f2fe" />
      <stop offset="80%" stop-color="#3b82f6" />
      <stop offset="100%" stop-color="#8b5cf6" stop-opacity="0" />
    </linearGradient>

    <!-- Filters -->
    <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur stdDeviation="6" result="blur" />
      <feMerge>
        <feMergeNode in="blur" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>

    <filter id="brightGlow" x="-40%" y="-40%" width="180%" height="180%">
      <feGaussianBlur stdDeviation="12" result="blur1" />
      <feGaussianBlur stdDeviation="4" result="blur2" />
      <feMerge>
        <feMergeNode in="blur1" />
        <feMergeNode in="blur2" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>

    <filter id="shadowFilter" x="-20%" y="-20%" width="140%" height="140%">
      <feDropShadow dx="-8" dy="14" stdDeviation="12" flood-color="#030712" flood-opacity="0.75" />
    </filter>
  </defs>

  <style>
    /* CSS Animations for high visual fidelity */
    .twinkle-fast { animation: starPulse 2.2s infinite ease-in-out; }
    .twinkle-mid  { animation: starPulse 3.4s infinite ease-in-out; }
    .twinkle-slow { animation: starPulse 4.8s infinite ease-in-out; }
    
    @keyframes starPulse {
      0%, 100% { opacity: 0.3; transform: scale(0.85); }
      50% { opacity: 1; transform: scale(1.2); }
    }

    .skater-float {
      animation: floatAction 5s infinite ease-in-out;
      transform-origin: 620px 450px;
    }

    @keyframes floatAction {
      0%, 100% { transform: translateY(0px) rotate(0deg); }
      35% { transform: translateY(-16px) rotate(-1.5deg); }
      70% { transform: translateY(8px) rotate(1deg); }
    }

    .flame-flicker {
      animation: flamePulse 0.18s infinite alternate ease-in-out;
      transform-origin: 790px 530px;
    }

    @keyframes flamePulse {
      0% { transform: scaleX(0.92) scaleY(0.95); opacity: 0.85; }
      100% { transform: scaleX(1.12) scaleY(1.08); opacity: 1; }
    }

    .led-blink {
      animation: ledFlash 1.2s infinite steps(1);
    }

    @keyframes ledFlash {
      0%, 100% { opacity: 1; fill: #ef4444; filter: drop-shadow(0 0 4px #ef4444); }
      50% { opacity: 0.3; fill: #7f1d1d; filter: none; }
    }

    .dust-particle {
      animation: dustFloat 4s infinite linear;
    }

    @keyframes dustFloat {
      0% { transform: translate(0, 0); opacity: 0.8; }
      50% { opacity: 1; }
      100% { transform: translate(-35px, -50px); opacity: 0; }
    }
  </style>

  <!-- ================= BACKGROUND SPACE ================= -->
  <rect width="1200" height="800" fill="url(#spaceGrad)" />
  <rect width="1200" height="800" fill="url(#nebula1)" />
  <rect width="1200" height="800" fill="url(#nebula2)" />

  <!-- Stars & Constellations -->
  <g id="starfield">
    <!-- Tiny background stars -->
    <circle cx="80" cy="120" r="1.2" fill="#fff" opacity="0.6" />
    <circle cx="140" cy="280" r="1" fill="#bae6fd" opacity="0.5" />
    <circle cx="190" cy="90" r="1.5" fill="#fef08a" opacity="0.7" />
    <circle cx="270" cy="340" r="1.2" fill="#fff" opacity="0.6" />
    <circle cx="310" cy="110" r="1" fill="#e2e8f0" opacity="0.5" />
    <circle cx="420" cy="70" r="1.5" fill="#bae6fd" opacity="0.8" />
    <circle cx="490" cy="190" r="1.2" fill="#fff" opacity="0.5" />
    <circle cx="560" cy="80" r="1" fill="#fef08a" opacity="0.6" />
    <circle cx="640" cy="140" r="1.8" fill="#fff" opacity="0.7" />
    <circle cx="720" cy="60" r="1.2" fill="#bae6fd" opacity="0.8" />
    <circle cx="790" cy="190" r="1.5" fill="#fff" opacity="0.6" />
    <circle cx="850" cy="110" r="1.2" fill="#fbcfe8" opacity="0.7" />
    <circle cx="920" cy="240" r="1" fill="#fff" opacity="0.4" />
    <circle cx="980" cy="80" r="1.5" fill="#e2e8f0" opacity="0.6" />
    <circle cx="1060" cy="160" r="1.2" fill="#bae6fd" opacity="0.7" />
    <circle cx="1130" cy="100" r="1.8" fill="#fff" opacity="0.8" />
    <circle cx="1170" cy="220" r="1" fill="#fef08a" opacity="0.5" />
    <circle cx="60" cy="400" r="1.2" fill="#fff" opacity="0.4" />
    <circle cx="1120" cy="360" r="1.5" fill="#a5f3fc" opacity="0.6" />
    <circle cx="70" cy="220" r="1.5" fill="#fff" opacity="0.7" />

    <!-- Twinkling Cross Stars -->
    <g class="twinkle-fast" style="transform-origin: 450px 130px;">
      <path d="M 450,118 L 452,128 L 462,130 L 452,132 L 450,142 L 448,132 L 438,130 L 448,128 Z" fill="#ffffff" filter="url(#glow)" />
    </g>
    <g class="twinkle-mid" style="transform-origin: 880px 75px;">
      <path d="M 880,65 L 882,73 L 890,75 L 882,77 L 880,85 L 878,77 L 870,75 L 878,73 Z" fill="#bae6fd" filter="url(#glow)" />
    </g>
    <g class="twinkle-slow" style="transform-origin: 140px 160px;">
      <path d="M 140,150 L 142,158 L 150,160 L 142,162 L 140,170 L 138,162 L 130,160 L 138,158 Z" fill="#fef08a" filter="url(#glow)" />
    </g>
    <g class="twinkle-fast" style="transform-origin: 1040px 220px;">
      <path d="M 1040,212 L 1041.5,218.5 L 1048,220 L 1041.5,221.5 L 1040,228 L 1038.5,221.5 L 1032,220 L 1038.5,218.5 Z" fill="#a5f3fc" />
    </g>
    <g class="twinkle-mid" style="transform-origin: 670px 220px;">
      <path d="M 670,214 L 671.5,218.5 L 676,220 L 671.5,221.5 L 670,226 L 668.5,221.5 L 664,220 L 668.5,218.5 Z" fill="#fbcfe8" />
    </g>

    <!-- Shooting Star / Meteor -->
    <g opacity="0.85">
      <line x1="1020" y1="40" x2="880" y2="110" stroke="url(#thrusterPlume)" stroke-width="2.5" stroke-linecap="round" />
      <circle cx="880" cy="110" r="2.5" fill="#ffffff" filter="url(#glow)" />
    </g>
  </g>

  <!-- ================= THE EARTH ================= -->
  <g id="planet-earth" transform="translate(190, 160)">
    <!-- Atmosphere Outer Glow -->
    <circle cx="0" cy="0" r="82" fill="url(#earthGlow)" filter="url(#brightGlow)" />
    <circle cx="0" cy="0" r="74" fill="url(#earthAtmo)" />
    
    <!-- Base Planet Sphere -->
    <circle cx="0" cy="0" r="70" fill="url(#earthBase)" />

    <!-- Continents (Stylized vector landmasses) -->
    <g clip-path="url(#earthClip)">
      <clipPath id="earthClip">
        <circle cx="0" cy="0" r="70" />
      </clipPath>

      <!-- Landmasses -->
      <path d="M -45,-30 Q -30,-45 -10,-40 Q 15,-35 25,-15 Q 18,10 -5,12 Q -25,2 -35,-8 Z" fill="#15803d" opacity="0.85" />
      <path d="M -5,-25 Q 12,-30 20,-12 Q 10,5 -2,0 Z" fill="#22c55e" opacity="0.75" />
      <path d="M -30,5 Q -15,15 -10,35 Q -25,48 -35,38 Q -42,22 -30,5 Z" fill="#16a34a" opacity="0.8" />
      <path d="M 15,-45 Q 35,-42 45,-25 Q 38,-15 28,-22 Z" fill="#15803d" opacity="0.8" />
      <path d="M 22,5 Q 40,0 48,15 Q 35,30 20,22 Z" fill="#ca8a04" opacity="0.7" />

      <!-- Swirling White Clouds -->
      <path d="M -60,-20 Q -40,-30 -10,-18 Q 20,-10 50,-28 Q 20,-22 -15,-26 Q -45,-28 -60,-20 Z" fill="#ffffff" opacity="0.65" filter="url(#glow)" />
      <path d="M -50,10 Q -20,-5 15,5 Q 45,18 60,8 Q 30,12 -5,2 Q -35,-2 -50,10 Z" fill="#ffffff" opacity="0.7" filter="url(#glow)" />
      <path d="M -30,32 Q 0,22 35,38 Q 10,32 -10,26 Q -25,28 -30,32 Z" fill="#ffffff" opacity="0.6" />
      <circle cx="-15" cy="-2" r="14" fill="#ffffff" opacity="0.25" filter="url(#glow)" />

      <!-- Dark Side Shadow Terminator (Sun shines from top-right) -->
      <circle cx="0" cy="0" r="70" fill="url(#earthShadow)" />
      <!-- City lights on dark hemisphere -->
      <circle cx="-32" cy="18" r="0.8" fill="#fef08a" opacity="0.8" />
      <circle cx="-25" cy="28" r="1.1" fill="#fef08a" opacity="0.9" />
      <circle cx="-40" cy="8" r="0.7" fill="#fef08a" opacity="0.7" />
      <circle cx="-18" cy="35" r="0.9" fill="#fed7aa" opacity="0.8" />
      <circle cx="-12" cy="22" r="0.8" fill="#fef08a" opacity="0.7" />
    </g>
    <!-- Sharp atmospheric rim crescent -->
    <path d="M -49,-49 A 70 70 0 0 1 68,15 A 72 72 0 0 0 -42,-42 Z" fill="#e0f2fe" opacity="0.6" />
  </g>

  <!-- ================= MOON BACKGROUND LANDSCAPE ================= -->
  <!-- Distant Lunar Hills/Mountains -->
  <path d="M 0,560 Q 180,520 380,545 T 780,530 Q 980,500 1200,535 L 1200,800 L 0,800 Z" fill="#1e293b" opacity="0.7" />
  <path d="M 0,580 Q 220,550 480,575 T 950,560 Q 1100,545 1200,565 L 1200,800 L 0,800 Z" fill="#334155" opacity="0.85" />

  <!-- Apollo Style Lunar Lander (Cat-Lander Module) on Distant Ridge -->
  <g id="lunar-lander" transform="translate(1040, 500) scale(0.65)">
    <!-- Lander Legs -->
    <line x1="30" y1="45" x2="0" y2="75" stroke="#94a3b8" stroke-width="2.5" />
    <line x1="50" y1="45" x2="80" y2="75" stroke="#94a3b8" stroke-width="2.5" />
    <line x1="20" y1="45" x2="40" y2="70" stroke="#64748b" stroke-width="2" />
    <line x1="60" y1="45" x2="40" y2="70" stroke="#64748b" stroke-width="2" />
    <!-- Footpads -->
    <ellipse cx="0" cy="75" rx="7" ry="2" fill="#cbd5e1" />
    <ellipse cx="80" cy="75" rx="7" ry="2" fill="#cbd5e1" />
    <ellipse cx="40" cy="70" rx="6" ry="2" fill="#94a3b8" />
    <!-- Descent Stage (Gold Foil body) -->
    <polygon points="20,30 60,30 68,48 12,48" fill="url(#goldFoil)" stroke="#854d0e" stroke-width="1" />
    <rect x="28" y="34" width="24" height="14" fill="#b45309" opacity="0.6" />
    <!-- Ascent Stage -->
    <path d="M 22,30 L 26,12 L 36,6 L 44,6 L 54,12 L 58,30 Z" fill="#e2e8f0" stroke="#475569" stroke-width="1" />
    <!-- Cat Ears on Lander Pod! -->
    <polygon points="28,8 34,0 36,8" fill="#cbd5e1" />
    <polygon points="44,8 46,0 52,8" fill="#cbd5e1" />
    <!-- Windows -->
    <polygon points="30,14 36,14 34,20 28,18" fill="#0284c7" />
    <polygon points="50,14 44,14 46,20 52,18" fill="#0284c7" />
    <!-- Mini Antenna with blinking light -->
    <line x1="40" y1="6" x2="40" y2="-4" stroke="#cbd5e1" stroke-width="1.5" />
    <circle cx="40" cy="-5" r="2" fill="#22c55e" />
  </g>

  <!-- Cat Exploration Flag on Crater Rim -->
  <g id="cat-flag" transform="translate(140, 540)">
    <!-- Flagpole -->
    <line x1="0" y1="0" x2="0" y2="90" stroke="#e2e8f0" stroke-width="3" />
    <polygon points="-6,90 6,90 2,96 -2,96" fill="#64748b" />
    <circle cx="0" cy="0" r="3.5" fill="#facc15" />
    <!-- Horizontal support arm (keeping flag out in vacuum) -->
    <line x1="0" y1="2" x2="55" y2="2" stroke="#cbd5e1" stroke-width="2" />
    <!-- Flag Fabric -->
    <path d="M 0,2 L 54,2 L 54,36 L 0,36 Z" fill="#0284c7" />
    <!-- Flag Design: Cat Paw Print & Fishbone Stars -->
    <circle cx="22" cy="19" r="6" fill="#ffffff" />
    <circle cx="16" cy="11" r="2.2" fill="#ffffff" />
    <circle cx="22" cy="8" r="2.5" fill="#ffffff" />
    <circle cx="28" cy="11" r="2.2" fill="#ffffff" />
    <!-- Fish skeleton graphic on flag -->
    <path d="M 36,19 L 48,19 M 40,15 L 40,23 M 44,16 L 44,22 M 48,16 L 52,19 L 48,22 Z" stroke="#38bdf8" stroke-width="1.5" stroke-linecap="round" />
  </g>

  <!-- ================= MAIN LUNAR CRATER / SKATE RAMP ================= -->
  <!-- Foreground Lunar Surface with Natural Halfpipe Lip -->
  <g id="lunar-halfpipe">
    <!-- Base Rock Mass -->
    <path d="M -20,620 Q 150,600 340,630 T 720,610 Q 860,560 1020,530 Q 1120,510 1220,540 L 1220,820 L -20,820 Z" fill="url(#moonSurfGrad)" />

    <!-- Sweeping Crater Lip / Vert Ramp Profile -->
    <path d="M -20,670 C 180,680 320,650 510,675 C 680,700 810,640 940,580 C 1040,535 1130,530 1220,560 L 1220,820 L -20,820 Z" fill="url(#moonRampGrad)" />

    <!-- Deep Sunlit Edge / Ramp Lip Coping -->
    <path d="M 520,675 C 680,700 810,640 940,580 C 1040,535 1130,530 1220,560" fill="none" stroke="url(#lipHighlight)" stroke-width="4.5" filter="url(#glow)" />
    
    <!-- Craters -->
    <!-- Large Front Crater -->
    <g transform="translate(320, 710) rotate(-4)">
      <ellipse cx="0" cy="0" rx="110" ry="38" fill="url(#craterDark)" />
      <ellipse cx="-2" cy="-4" rx="106" ry="34" fill="#0b1120" />
      <!-- Sunlit Far Rim -->
      <path d="M -108,0 A 110 38 0 0 0 108,0 A 104 34 0 0 1 -108,0 Z" fill="#e2e8f0" opacity="0.65" />
      <!-- Crater shadow depth -->
      <path d="M -106,-2 A 106 34 0 0 1 106,-2 A 106 20 0 0 0 -106,-2 Z" fill="#020617" opacity="0.9" />
    </g>

    <!-- Medium Crater Right -->
    <g transform="translate(1080, 680) rotate(8)">
      <ellipse cx="0" cy="0" rx="65" ry="22" fill="url(#craterDark)" />
      <ellipse cx="-2" cy="-2" rx="61" ry="19" fill="#090d16" />
      <path d="M -63,0 A 65 22 0 0 0 63,0 A 60 18 0 0 1 -63,0 Z" fill="#cbd5e1" opacity="0.7" />
    </g>

    <!-- Small Crater Left Background -->
    <g transform="translate(120, 640)">
      <ellipse cx="0" cy="0" rx="38" ry="12" fill="#1e293b" />
      <path d="M -38,0 A 38 12 0 0 0 38,0 A 35 10 0 0 1 -38,0 Z" fill="#f1f5f9" opacity="0.4" />
    </g>

    <!-- Lunar Boulders / Rocks with Sharp Airless Shadows -->
    <g id="rocks">
      <!-- Rock 1 -->
      <polygon points="210,650 225,638 240,642 248,655 235,662 215,660" fill="#cbd5e1" />
      <polygon points="210,650 225,638 232,652 215,660" fill="#475569" />
      <polygon points="215,660 235,662 270,668 220,666" fill="#0f172a" opacity="0.8" />

      <!-- Rock 2 (Near ramp lip) -->
      <polygon points="860,615 872,605 885,610 882,622 865,624" fill="#e2e8f0" />
      <polygon points="860,615 872,605 870,622 865,624" fill="#334155" />
      <polygon points="865,624 882,622 910,628 870,627" fill="#020617" opacity="0.85" />
    </g>

    <!-- Cat Astronaut Boot Prints in Regolith Leading to Ramp! -->
    <g id="paw-bootprints" opacity="0.5" fill="#1e293b">
      <!-- Print 1 -->
      <g transform="translate(680, 720) rotate(-35) scale(0.7)">
        <ellipse cx="0" cy="0" rx="10" ry="7" />
        <circle cx="-10" cy="-9" r="3.5" />
        <circle cx="-3" cy="-12" r="3.8" />
        <circle cx="5" cy="-11" r="3.8" />
        <circle cx="11" cy="-7" r="3.2" />
        <!-- Boot Tread Lines -->
        <line x1="-7" y1="-2" x2="7" y2="-2" stroke="#475569" stroke-width="1.2" />
        <line x1="-7" y1="2" x2="7" y2="2" stroke="#475569" stroke-width="1.2" />
      </g>
      <!-- Print 2 -->
      <g transform="translate(730, 680) rotate(-42) scale(0.65)">
        <ellipse cx="0" cy="0" rx="10" ry="7" />
        <circle cx="-10" cy="-9" r="3.5" />
        <circle cx="-3" cy="-12" r="3.8" />
        <circle cx="5" cy="-11" r="3.8" />
        <circle cx="11" cy="-7" r="3.2" />
      </g>
      <!-- Print 3 -->
      <g transform="translate(790, 640) rotate(-48) scale(0.6)">
        <ellipse cx="0" cy="0" rx="10" ry="7" />
        <circle cx="-10" cy="-9" r="3.5" />
        <circle cx="-3" cy="-12" r="3.8" />
        <circle cx="5" cy="-11" r="3.8" />
        <circle cx="11" cy="-7" r="3.2" />
      </g>
    </g>
  </g>

  <!-- Ground Glow from Neon Skateboard Wheels -->
  <ellipse cx="740" cy="590" rx="90" ry="25" fill="url(#wheelGlow)" opacity="0.45" />

  <!-- ================= LUNAR DUST PARTICLES (ZERO-G KICK) ================= -->
  <g id="lunar-dust-spray">
    <!-- Dust arc lifted off the lip -->
    <circle cx="830" cy="565" r="3.2" fill="#e2e8f0" class="dust-particle" style="animation-delay: 0s;" />
    <circle cx="810" cy="550" r="2.2" fill="#cbd5e1" class="dust-particle" style="animation-delay: 0.4s;" />
    <circle cx="845" cy="545" r="2.5" fill="#f8fafc" class="dust-particle" style="animation-delay: 0.8s;" />
    <circle cx="820" cy="525" r="3.8" fill="#a5f3fc" class="dust-particle" style="animation-delay: 1.2s;" />
    <circle cx="860" cy="530" r="2" fill="#e2e8f0" class="dust-particle" style="animation-delay: 1.6s;" />
    <circle cx="800" cy="510" r="2.8" fill="#bae6fd" class="dust-particle" style="animation-delay: 2s;" />
    <circle cx="835" cy="500" r="1.8" fill="#ffffff" class="dust-particle" style="animation-delay: 2.3s;" />
    <circle cx="880" cy="520" r="2.4" fill="#cbd5e1" class="dust-particle" style="animation-delay: 2.7s;" />
    <circle cx="850" cy="485" r="2.2" fill="#e2e8f0" class="dust-particle" style="animation-delay: 3.1s;" />
  </g>

  <!-- ================= HERO ASTRONAUT CAT & SKATEBOARD ================= -->
  <!-- Whole hero skater group with gentle zero-g float animation -->
  <g class="skater-float" filter="url(#shadowFilter)">

    <!-- ================= THE SKATEBOARD ================= -->
    <!-- Board angled dynamically at -18 deg catching high lunar air -->
    <g id="skateboard" transform="translate(620, 520) rotate(-18)">
      
      <!-- Rocket Thrusters Mounted to Underside of Tail -->
      <g id="board-thrusters" transform="translate(140, 18)">
        <!-- Thruster Mount Brackets -->
        <rect x="-8" y="-12" width="16" height="12" fill="#475569" rx="2" />
        <polygon points="-12,0 12,0 16,16 -16,16" fill="#334155" stroke="#64748b" stroke-width="1" />
        <!-- Thruster Nozzles -->
        <ellipse cx="-7" cy="16" rx="5" ry="3" fill="#1e293b" stroke="#0ea5e9" stroke-width="1" />
        <ellipse cx="7" cy="16" rx="5" ry="3" fill="#1e293b" stroke="#0ea5e9" stroke-width="1" />
        
        <!-- Glowing Plasma Exhaust Plumes -->
        <g class="flame-flicker">
          <polygon points="-11,18 0,18 -6,65" fill="url(#thrusterPlume)" opacity="0.85" filter="url(#glow)" />
          <polygon points="-8,18 -4,18 -6,45" fill="#ffffff" opacity="0.9" />
          <polygon points="1,18 12,18 6,65" fill="url(#thrusterPlume)" opacity="0.85" filter="url(#glow)" />
          <polygon points="4,18 8,18 6,45" fill="#ffffff" opacity="0.9" />
        </g>
      </g>

      <!-- Wheels & Trucks: Back/Far Pair (Layered behind deck) -->
      <g id="rear-wheels">
        <!-- Far Rear Wheel -->
        <ellipse cx="110" cy="-6" rx="14" ry="18" fill="url(#wheelCyan)" />
        <ellipse cx="110" cy="-6" rx="5" ry="7" fill="#3b82f6" />
        <ellipse cx="110" cy="-6" rx="2" ry="3" fill="#ffffff" />
        
        <!-- Far Front Wheel -->
        <ellipse cx="-110" cy="-6" rx="14" ry="18" fill="url(#wheelCyan)" />
        <ellipse cx="-110" cy="-6" rx="5" ry="7" fill="#3b82f6" />
        <ellipse cx="-110" cy="-6" rx="2" ry="3" fill="#ffffff" />
      </g>

      <!-- Skateboard Deck: 3D Layering -->
      <!-- Edge Thickness Layer (Neon Magenta Rim) -->
      <path d="M -165,-2 C -170,14 -120,24 -80,24 L 80,24 C 120,24 170,14 165,-2 C 160,8 115,16 75,16 L -75,16 C -115,16 -160,8 -165,-2 Z" fill="#c026d3" />

      <!-- Deck Bottom Graphic (Visible in 3/4 perspective pop) -->
      <path d="M -165,-8 C -172,12 -120,20 -75,20 L 75,20 C 120,20 172,12 165,-8 C 158,-2 110,6 70,6 L -70,6 C -110,6 -158,-2 -165,-8 Z" fill="url(#deckGraphic)" />

      <!-- Deck Graphic Artwork: Fish Skeleton & Cyber Cat Stencils -->
      <g opacity="0.85" transform="translate(0, 7) scale(0.9, 0.65)">
        <!-- Fishbone Graphic -->
        <line x1="-40" y1="0" x2="40" y2="0" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" />
        <line x1="-25" y1="-8" x2="-20" y2="8" stroke="#ffffff" stroke-width="2" stroke-linecap="round" />
        <line x1="-10" y1="-10" x2="-5" y2="10" stroke="#ffffff" stroke-width="2" stroke-linecap="round" />
        <line x1="5" y1="-9" x2="10" y2="9" stroke="#ffffff" stroke-width="2" stroke-linecap="round" />
        <line x1="20" y1="-7" x2="25" y2="7" stroke="#ffffff" stroke-width="2" stroke-linecap="round" />
        <!-- Fish Head & Tail -->
        <polygon points="40,0 48,-7 48,7" fill="#ffffff" />
        <polygon points="-40,0 -48,-8 -45,0 -48,8" fill="#ffffff" />
        <text x="-65" y="3" font-family="monospace" font-size="7" font-weight="bold" fill="#00f2fe" letter-spacing="1">MEOWSA</text>
      </g>

      <!-- Deck Top Side with Grip Tape & Kicks -->
      <path d="M -175,-16 C -150,-12 -100,-10 -60,-10 L 60,-10 C 100,-10 150,-12 175,-16 C 165,-2 110,5 65,5 L -65,5 C -110,5 -165,-2 -175,-16 Z" fill="url(#gripTape)" />
      
      <!-- Top Grip Tape Inlay: Stylized Neon Cyan Center Line -->
      <path d="M -50,-3 L 50,-3" stroke="#22d3ee" stroke-width="1.8" stroke-dasharray="8,4" opacity="0.8" />

      <!-- Trucks & Baseplates (Polished Chrome / Titanium) -->
      <!-- Front Truck Assembly -->
      <g transform="translate(-100, 8)">
        <rect x="-8" y="-4" width="16" height="6" fill="#64748b" rx="2" />
        <polygon points="-12,2 12,2 6,14 -6,14" fill="#cbd5e1" stroke="#94a3b8" stroke-width="1" />
        <circle cx="0" cy="8" r="4" fill="#f97316" /> <!-- Bushing -->
        <rect x="-18" y="12" width="36" height="5" fill="#e2e8f0" rx="2" /> <!-- Hanger -->
      </g>

      <!-- Rear Truck Assembly -->
      <g transform="translate(100, 8)">
        <rect x="-8" y="-4" width="16" height="6" fill="#64748b" rx="2" />
        <polygon points="-12,2 12,2 6,14 -6,14" fill="#cbd5e1" stroke="#94a3b8" stroke-width="1" />
        <circle cx="0" cy="8" r="4" fill="#f97316" /> <!-- Bushing -->
        <rect x="-18" y="12" width="36" height="5" fill="#e2e8f0" rx="2" /> <!-- Hanger -->
      </g>

      <!-- Wheels: Front/Near Pair (Glowing Cyan/Teal) -->
      <g id="front-wheels">
        <!-- Near Front Wheel -->
        <g transform="translate(-100, 22)">
          <ellipse cx="0" cy="0" rx="16" ry="20" fill="url(#wheelCyan)" filter="url(#glow)" />
          <ellipse cx="0" cy="0" rx="13" ry="17" fill="none" stroke="#a5f3fc" stroke-width="1.5" />
          <circle cx="0" cy="0" r="7" fill="#6366f1" />
          <circle cx="0" cy="0" r="3.5" fill="#f8fafc" />
        </g>
        <!-- Near Rear Wheel -->
        <g transform="translate(100, 22)">
          <ellipse cx="0" cy="0" rx="16" ry="20" fill="url(#wheelCyan)" filter="url(#glow)" />
          <ellipse cx="0" cy="0" rx="13" ry="17" fill="none" stroke="#a5f3fc" stroke-width="1.5" />
          <circle cx="0" cy="0" r="7" fill="#6366f1" />
          <circle cx="0" cy="0" r="3.5" fill="#f8fafc" />
        </g>
      </g>
    </g>

    <!-- ================= THE SPACESUIT LOWER BODY & LEGS ================= -->
    <g id="suit-lower-body">
      <!-- Back Leg (Stepping down on the tail for sick leverage) -->
      <g id="back-leg">
        <!-- Thigh / Hip Joint -->
        <path d="M 680,420 C 720,430 745,465 735,495 C 725,520 690,515 670,490 Z" fill="url(#suitWhite)" />
        <path d="M 700,435 C 725,455 732,480 722,505" stroke="#94a3b8" stroke-width="3" fill="none" />
        <!-- Orange Mission Accent Stripe -->
        <path d="M 695,445 C 715,460 725,480 715,502" stroke="url(#suitOrange)" stroke-width="4.5" fill="none" />
        <!-- Knee Ribbed Pressure Joint -->
        <ellipse cx="725" cy="495" rx="14" ry="10" fill="#64748b" />
        <line x1="714" y1="492" x2="736" y2="492" stroke="#cbd5e1" stroke-width="1.8" />
        <line x1="714" y1="497" x2="736" y2="497" stroke="#cbd5e1" stroke-width="1.8" />
        <!-- Shin & Ankle -->
        <path d="M 725,495 L 720,535 L 748,540 L 738,500 Z" fill="url(#suitWhite)" />
        <!-- Back Lunar Boot (Pressing on tail) -->
        <g id="back-boot" transform="translate(712, 530) rotate(-15)">
          <path d="M 0,0 L 28,2 C 34,2 38,10 32,20 L -12,18 C -16,10 -10,0 0,0 Z" fill="#e2e8f0" />
          <!-- Boot Tread (Dark Lunar Lug Sole) -->
          <path d="M -14,18 L 34,20 L 32,27 L -16,25 Z" fill="#1e293b" />
          <line x1="-10" y1="25" x2="30" y2="26" stroke="#475569" stroke-width="1.5" stroke-dasharray="3,2" />
          <!-- Straps & Buckles -->
          <rect x="-2" y="4" width="22" height="4" fill="url(#suitCyan)" rx="1.5" />
          <rect x="6" y="3" width="6" height="6" fill="#f8fafc" rx="1" />
        </g>
      </g>

      <!-- Pressurized Spacesuit Tail Sleeve (Curving out gracefully!) -->
      <g id="suit-tail">
        <!-- Tail Path with Accordion Pressurization Bellows -->
        <path d="M 720,410 C 765,405 825,415 845,380 C 865,340 820,310 805,280 C 798,265 808,252 820,256 C 835,260 848,285 840,315 C 830,350 885,355 860,405 C 835,445 760,435 715,425 Z" fill="url(#suitWhite)" />
        
        <!-- Tail Joint Rings -->
        <path d="M 745,412 C 752,410 758,418 750,422" stroke="#64748b" stroke-width="3.5" fill="none" />
        <path d="M 780,412 C 788,408 795,418 786,423" stroke="url(#suitOrange)" stroke-width="4" fill="none" />
        <path d="M 815,400 C 825,392 832,402 822,410" stroke="#64748b" stroke-width="3.5" fill="none" />
        <path d="M 842,370 C 852,362 858,372 848,378" stroke="url(#suitOrange)" stroke-width="4" fill="none" />
        <path d="M 830,320 C 838,312 846,318 838,326" stroke="#64748b" stroke-width="3" fill="none" />
        <path d="M 808,285 C 814,278 822,284 815,291" stroke="url(#suitCyan)" stroke-width="3" fill="none" />
        
        <!-- Gold Sensor Ring & Tip Beacon Light -->
        <circle cx="818" cy="256" r="6.5" fill="url(#goldFoil)" />
        <circle cx="820" cy="254" r="3.2" fill="#22d3ee" filter="url(#glow)" />
      </g>

      <!-- Front Leg (Extended onto front bolts in stylish locked skate stance) -->
      <g id="front-leg">
        <!-- Thigh -->
        <path d="M 610,410 C 585,440 555,460 540,480 C 525,498 545,515 565,500 C 585,480 615,455 635,425 Z" fill="url(#suitWhite)" />
        <!-- Orange Safety Stripe -->
        <path d="M 590,430 C 570,455 550,480 540,495" stroke="url(#suitOrange)" stroke-width="4.5" fill="none" />
        <!-- Knee Joint -->
        <ellipse cx="545" cy="488" rx="13" ry="11" fill="#64748b" />
        <line x1="535" y1="486" x2="555" y2="486" stroke="#cbd5e1" stroke-width="1.8" />
        <!-- Shin -->
        <path d="M 545,492 L 515,528 L 538,542 L 560,502 Z" fill="url(#suitWhite)" />
        <!-- Front Lunar Boot (Locked over front bolts) -->
        <g id="front-boot" transform="translate(508, 526) rotate(-22)">
          <path d="M 0,0 L 32,2 C 38,2 42,10 36,22 L -10,20 C -15,12 -8,0 0,0 Z" fill="#e2e8f0" />
          <!-- Heavy Lunar Lug Sole -->
          <path d="M -12,20 L 38,22 L 35,29 L -14,27 Z" fill="#1e293b" />
          <line x1="-8" y1="27" x2="33" y2="28" stroke="#475569" stroke-width="1.5" stroke-dasharray="3,2" />
          <!-- Ankle Straps & Cyan Accents -->
          <rect x="0" y="4" width="24" height="4" fill="url(#suitCyan)" rx="1.5" />
          <rect x="8" y="3" width="6" height="6" fill="#f8fafc" rx="1" />
        </g>
      </g>
    </g>

    <!-- ================= LIFE SUPPORT BACKPACK (PLSS) ================= -->
    <g id="backpack-plss" transform="translate(640, 270)">
      <!-- Main PLSS Housing Tank -->
      <rect x="40" y="20" width="65" height="110" rx="12" fill="#e2e8f0" stroke="#94a3b8" stroke-width="2" />
      <!-- Gold Thermal Foil Side Accent -->
      <path d="M 90,28 L 100,28 C 103,28 105,30 105,33 L 105,118 C 105,121 103,123 100,123 L 90,123 Z" fill="url(#goldFoil)" />
      <!-- Top Vent Grills -->
      <line x1="50" y1="32" x2="80" y2="32" stroke="#475569" stroke-width="2.5" />
      <line x1="50" y1="38" x2="80" y2="38" stroke="#475569" stroke-width="2.5" />
      <line x1="50" y1="44" x2="80" y2="44" stroke="#475569" stroke-width="2.5" />
      <!-- Dual Oxygen Purge Valves -->
      <circle cx="56" cy="62" r="7" fill="#0284c7" />
      <circle cx="56" cy="62" r="3" fill="#ffffff" />
      <circle cx="76" cy="62" r="7" fill="#dc2626" />
      <circle cx="76" cy="62" r="3" fill="#ffffff" />
      
      <!-- Primary Comms Antenna -->
      <line x1="90" y1="20" x2="115" y2="-45" stroke="#cbd5e1" stroke-width="2.5" />
      <!-- Antenna Tip Blinking Beacon -->
      <circle cx="115" cy="-45" r="4.5" class="led-blink" />

      <!-- RCS Balance Mini-Thruster Block -->
      <rect x="95" y="80" width="14" height="18" fill="#475569" rx="2" />
      <polygon points="109,84 116,81 116,87" fill="#94a3b8" />
      <polygon points="109,94 116,91 116,97" fill="#94a3b8" />
      <!-- Tiny Cold-Gas Nitrogen Balance Puff -->
      <ellipse cx="124" cy="84" rx="7" ry="2.5" fill="#bae6fd" opacity="0.75" filter="url(#glow)" />
    </g>

    <!-- ================= SPACESUIT TORSO & ARMS ================= -->
    <g id="suit-torso">
      <!-- Main Body Core -->
      <path d="M 570,340 C 560,380 575,430 600,445 C 640,455 685,445 710,415 C 715,385 690,345 660,335 Z" fill="url(#suitWhite)" />
      
      <!-- Blue Earthlight Ambient Reflection Shadow on Shaded Side -->
      <path d="M 570,340 C 560,380 575,430 600,445 C 630,452 660,448 680,432 C 640,435 600,410 585,370 C 580,355 575,342 570,340 Z" fill="url(#suitShadow)" />

      <!-- Chest Remote Control Unit (RCU) Console Pack -->
      <g transform="translate(585, 345) rotate(-6)">
        <rect x="0" y="0" width="48" height="42" rx="5" fill="#f8fafc" stroke="#94a3b8" stroke-width="1.5" />
        <!-- Digital Pressure Gauge (1.6 m/s² Lunar G Indicator) -->
        <rect x="6" y="6" width="22" height="12" rx="2" fill="#0f172a" />
        <text x="8" y="15" font-family="monospace" font-size="6.5" font-weight="bold" fill="#22c55e">1.6G</text>
        <!-- Indicator LEDs / Knobs -->
        <circle cx="34" cy="10" r="3" fill="#0284c7" />
        <circle cx="41" cy="10" r="3" fill="#ea580c" />
        <!-- Status Switch Bars -->
        <rect x="6" y="22" width="35" height="4" rx="1.5" fill="#64748b" />
        <circle cx="12" cy="24" r="2.5" fill="#22d3ee" />
        <!-- Dual Oxygen / Cooling Connectors (Blue & Red) -->
        <circle cx="12" cy="33" r="4" fill="#0369a1" />
        <circle cx="12" cy="33" r="2" fill="#e0f2fe" />
        <circle cx="24" cy="33" r="4" fill="#b91c1c" />
        <circle cx="24" cy="33" r="2" fill="#fef2f2" />
        <!-- Mission Patch: Cat Ear Apollo Logo -->
        <circle cx="37" cy="31" r="5" fill="#1e3a8a" />
        <path d="M 34,33 L 37,28 L 40,33 Z" fill="#f59e0b" />
      </g>

      <!-- Ribbed Oxygen Umbilical Hoses curving to backpack -->
      <path d="M 595,382 C 580,405 565,420 550,425 C 540,428 535,420 542,410 C 555,395 570,380 580,370" fill="none" stroke="#0ea5e9" stroke-width="5" stroke-dasharray="4,2" />
      <path d="M 607,382 C 595,410 580,425 565,432 C 555,436 550,428 558,418 C 572,400 588,382 595,372" fill="none" stroke="#ef4444" stroke-width="5" stroke-dasharray="4,2" />

      <!-- Back / Right Arm (Swept high and back for radical skate balance) -->
      <g id="right-arm">
        <!-- Shoulder Joint Accordion Ring -->
        <ellipse cx="672" cy="342" rx="14" ry="12" fill="#64748b" />
        <!-- Upper Arm -->
        <path d="M 670,340 C 700,325 730,305 755,275 C 765,285 755,300 735,320 C 710,345 680,355 670,340 Z" fill="url(#suitWhite)" />
        <!-- Arm Safety Stripes -->
        <path d="M 695,330 C 715,315 735,295 745,285" stroke="url(#suitOrange)" stroke-width="4" fill="none" />
        <!-- Elbow Pressure Joint -->
        <circle cx="750" cy="285" r="9" fill="#64748b" />
        <!-- Forearm -->
        <path d="M 750,285 L 785,250 L 798,262 L 760,295 Z" fill="url(#suitWhite)" />
        <!-- Wrist Disconnect Ring (Red for Right Hand) -->
        <rect x="785" y="246" width="12" height="15" rx="3" fill="#dc2626" transform="rotate(-40, 785, 246)" />
        <!-- Space Glove (Paw shaped! Reaching up with spread digits for balance) -->
        <g transform="translate(795, 242) rotate(-40)">
          <path d="M 0,0 C 8,-6 18,-4 22,2 C 26,8 24,18 16,20 L 2,16 Z" fill="#f1f5f9" />
          <!-- Glove Paws / Rubberized Finger Pads -->
          <circle cx="18" cy="2" r="3.2" fill="#06b6d4" />
          <circle cx="22" cy="8" r="3.2" fill="#06b6d4" />
          <circle cx="20" cy="15" r="3.2" fill="#06b6d4" />
          <!-- Thumb -->
          <circle cx="8" cy="-3" r="3" fill="#0891b2" />
        </g>
      </g>

      <!-- Front / Left Arm (Reaching forward & out for stylish grab/counter-balance) -->
      <g id="left-arm">
        <!-- Shoulder Bellows -->
        <ellipse cx="560" cy="355" rx="14" ry="12" fill="#64748b" />
        <!-- Upper Arm -->
        <path d="M 560,355 C 530,360 495,365 465,370 C 455,355 470,345 500,342 C 530,338 555,345 560,355 Z" fill="url(#suitWhite)" />
        <!-- Safety Stripe -->
        <path d="M 540,352 C 515,356 485,360 468,362" stroke="url(#suitCyan)" stroke-width="4" fill="none" />
        <!-- Elbow Ribbed Joint -->
        <circle cx="465" cy="365" r="9" fill="#64748b" />
        <!-- Forearm -->
        <path d="M 465,365 L 420,380 L 415,364 L 460,352 Z" fill="url(#suitWhite)" />
        <!-- Wrist Disconnect Ring (Blue for Left Hand) -->
        <rect x="412" y="362" width="10" height="16" rx="3" fill="#0284c7" transform="rotate(18, 412, 362)" />
        <!-- Space Glove (Facing viewer, displaying turquoise cat toe-beans grip pads!) -->
        <g transform="translate(410, 365) rotate(18)">
          <path d="M 0,0 C -8,2 -16,8 -18,16 C -20,24 -12,28 -4,26 L 4,14 Z" fill="#f1f5f9" />
          <!-- Rubberized Teal Cat Bean Paw-Pads! (For ultimate board grab) -->
          <!-- Main Palm Pad -->
          <ellipse cx="-10" cy="14" rx="5" ry="4" fill="#06b6d4" />
          <!-- Four Toe Beans -->
          <circle cx="-16" cy="8" r="2.2" fill="#22d3ee" />
          <circle cx="-18" cy="14" r="2.2" fill="#22d3ee" />
          <circle cx="-16" cy="20" r="2.2" fill="#22d3ee" />
          <circle cx="-10" cy="23" r="2.2" fill="#22d3ee" />
        </g>
      </g>
    </g>

    <!-- ================= HELMET BASE NECK RING ================= -->
    <g id="neck-ring" transform="translate(595, 318) rotate(-4)">
      <!-- Anodized Blue Aluminum Locking Collar -->
      <ellipse cx="0" cy="0" rx="46" ry="14" fill="#0284c7" stroke="#0369a1" stroke-width="2" />
      <ellipse cx="0" cy="-2" rx="44" ry="12" fill="#e2e8f0" />
      <!-- Locking Pins & Screws -->
      <circle cx="-32" cy="0" r="2.5" fill="#dc2626" />
      <circle cx="32" cy="0" r="2.5" fill="#22c55e" />
      <circle cx="-16" cy="6" r="2" fill="#64748b" />
      <circle cx="0" cy="8" r="2" fill="#64748b" />
      <circle cx="16" cy="6" r="2" fill="#64748b" />
    </g>

    <!-- ================= THE GINGER TABBY ASTRONAUT CAT ================= -->
    <!-- Head positioned snugly inside transparent bubble helmet -->
    <g id="cat-head" transform="translate(590, 235)">
      
      <!-- Head Base Fur Shape -->
      <path d="M -42,10 C -48,32 -32,58 0,60 C 32,58 48,32 42,10 C 42,-15 30,-30 0,-30 C -30,-30 -42,-15 -42,10 Z" fill="url(#tabbyOrange)" />

      <!-- Cheeks Fluff (Cute full feline cheeks) -->
      <path d="M -42,12 C -54,20 -52,38 -38,45 C -30,50 -18,52 0,52 C 18,52 30,50 38,45 C 52,38 54,20 42,12 Z" fill="url(#tabbyOrange)" />

      <!-- Ears (Erect, alert & super happy inside ear domes!) -->
      <!-- Left Ear (Viewer's Left) -->
      <polygon points="-36,-12 -42,-52 -12,-26" fill="url(#tabbyOrange)" />
      <polygon points="-33,-14 -38,-46 -16,-26" fill="#fca5a5" /> <!-- Inner Ear Pink -->
      <!-- Ear Fluff Tuft -->
      <path d="M -28,-22 L -20,-34 L -22,-20 L -14,-28" stroke="#ffffff" stroke-width="2" stroke-linecap="round" fill="none" />

      <!-- Right Ear (Viewer's Right) -->
      <polygon points="36,-12 42,-52 12,-26" fill="url(#tabbyOrange)" />
      <polygon points="33,-14 38,-46 16,-26" fill="#fca5a5" />
      <path d="M 28,-22 L 20,-34 L 22,-20 L 14,-28" stroke="#ffffff" stroke-width="2" stroke-linecap="round" fill="none" />

      <!-- Ginger Tabby M-Marking on Forehead -->
      <path d="M -16,-20 L -10,-8 L 0,-16 L 10,-8 L 16,-20" stroke="#9a3412" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none" />
      <path d="M -22,-14 L -18,-4 M 22,-14 L 18,-4" stroke="#9a3412" stroke-width="2.5" stroke-linecap="round" />
      
      <!-- Tabby Cheek Stripes -->
      <path d="M -38,16 L -26,18 M -40,24 L -28,24 M -36,32 L -26,29" stroke="#9a3412" stroke-width="2.5" stroke-linecap="round" />
      <path d="M 38,16 L 26,18 M 40,24 L 28,24 M 36,32 L 26,29" stroke="#9a3412" stroke-width="2.5" stroke-linecap="round" />

      <!-- White Muzzle & Chin -->
      <ellipse cx="0" cy="34" rx="20" ry="14" fill="url(#catCream)" />
      <ellipse cx="-10" cy="30" rx="10" ry="8" fill="url(#catCream)" />
      <ellipse cx="10" cy="30" rx="10" ry="8" fill="url(#catCream)" />

      <!-- Adorable Cat Nose (Pink Triangle) -->
      <polygon points="0,22 -6,16 6,16" fill="#f43f5e" />
      <line x1="0" y1="22" x2="0" y2="28" stroke="#be123c" stroke-width="1.5" />

      <!-- Happy Excited Open Skate Grin (:3 with tiny fangs!) -->
      <path d="M -12,28 C -6,34 0,32 0,28 C 0,32 6,34 12,28" fill="none" stroke="#7c2d12" stroke-width="2" stroke-linecap="round" />
      <!-- Open Joyful Mouth -->
      <path d="M -6,31 C -4,42 4,42 6,31 Z" fill="#be123c" />
      <!-- Pink Tongue -->
      <path d="M -3,36 C -2,40 2,40 3,36 Z" fill="#fb7185" />
      <!-- Cute Vampire Teeth / Mini Fangs -->
      <polygon points="-7,30 -5,30 -6,34" fill="#ffffff" />
      <polygon points="5,30 7,30 6,34" fill="#ffffff" />

      <!-- Gorgeous Large Stylized Cat Eyes (Green-Gold Gradient) -->
      <!-- Left Eye -->
      <g transform="translate(-18, 4)">
        <ellipse cx="0" cy="0" rx="13" ry="15" fill="#0f172a" />
        <ellipse cx="0" cy="0" rx="11.5" ry="13.5" fill="url(#eyeGreen)" />
        <!-- Big Round Pupil (Dilated in wonder/excitement!) -->
        <ellipse cx="0" cy="0" rx="6.5" ry="10" fill="#020617" />
        <!-- Glossy Specular Highlights (Sparkle) -->
        <circle cx="-3.5" cy="-4.5" r="4" fill="#ffffff" />
        <circle cx="3" cy="3" r="1.8" fill="#ffffff" />
      </g>

      <!-- Right Eye -->
      <g transform="translate(18, 4)">
        <ellipse cx="0" cy="0" rx="13" ry="15" fill="#0f172a" />
        <ellipse cx="0" cy="0" rx="11.5" ry="13.5" fill="url(#eyeGreen)" />
        <ellipse cx="0" cy="0" rx="6.5" ry="10" fill="#020617" />
        <circle cx="-3.5" cy="-4.5" r="4" fill="#ffffff" />
        <circle cx="3" cy="3" r="1.8" fill="#ffffff" />
      </g>

      <!-- Whiskers (Crisp white whiskers spreading inside helmet) -->
      <g stroke="#ffffff" stroke-width="1.6" stroke-linecap="round" opacity="0.85">
        <path d="M -12,26 C -28,22 -44,25 -52,32" />
        <path d="M -12,29 C -30,30 -46,36 -54,44" />
        <path d="M -12,32 C -26,36 -42,44 -48,52" />
        <path d="M 12,26 C 28,22 44,25 52,32" />
        <path d="M 12,29 C 30,30 46,36 54,44" />
        <path d="M 12,32 C 26,36 42,44 48,52" />
      </g>

      <!-- Communications Mic Boom curving to mouth -->
      <path d="M 40,24 C 32,38 20,40 6,36" fill="none" stroke="#475569" stroke-width="2" />
      <circle cx="5" cy="36" r="3" fill="#1e293b" />
    </g>

    <!-- ================= THE SPECIAL CAT HELMET (WITH DUAL EAR DOMES) ================= -->
    <g id="bubble-helmet">
      <!-- Main Bubble Glass + Dual Cat Ear Bubbles Base Silhouette -->
      <!-- Smooth combined path for cat helmet dome with ear pockets! -->
      <path d="M 525,280 C 510,230 520,180 545,150 C 555,138 575,142 585,158 C 595,142 615,138 625,150 C 650,180 660,230 645,280 C 635,320 535,320 525,280 Z" fill="url(#visorGlass)" stroke="url(#visorGoldRim)" stroke-width="3" filter="url(#glow)" />

      <!-- Inner Visor Depth & 3D Glass Volume -->
      <ellipse cx="585" cy="235" rx="65" ry="68" fill="url(#visorGlass)" opacity="0.5" />

      <!-- Curved Visor Reflections (Cinematic Master Detail) -->
      <!-- 1. Distant Earth Reflection on Curved Helmet Glass -->
      <g transform="translate(545, 205) scale(0.18)" opacity="0.75" filter="url(#glow)">
        <circle cx="0" cy="0" r="40" fill="#0284c7" />
        <circle cx="-10" cy="-5" r="28" fill="#38bdf8" opacity="0.6" />
        <path d="M -25,-10 Q 0,-20 20,-5 Q 10,15 -15,10 Z" fill="#22c55e" />
      </g>

      <!-- 2. Crescent Sun Glare / Specular Highlight Sweep -->
      <path d="M 538,185 C 542,160 562,148 578,145 C 564,152 550,168 548,192 C 546,212 552,230 558,245 C 550,230 536,210 538,185 Z" fill="#ffffff" opacity="0.65" filter="url(#glow)" />

      <!-- 3. Curved Horizon of the Moon reflecting along lower rim of glass -->
      <path d="M 535,272 Q 585,295 635,272 C 615,282 555,282 535,272 Z" fill="#94a3b8" opacity="0.4" />

      <!-- 4. Ear Dome Specular Highlights -->
      <ellipse cx="560" cy="155" rx="8" ry="4" fill="#ffffff" opacity="0.7" transform="rotate(-30, 560, 155)" />
      <ellipse cx="612" cy="155" rx="8" ry="4" fill="#ffffff" opacity="0.7" transform="rotate(30, 612, 155)" />
    </g>

  </g> <!-- End Skater Float Group -->

  <!-- ================= FOREGROUND CINEMATIC LIGHTING OVERLAYS ================= -->
  <!-- Subtle Vignette & Sun Glare from Top-Right (Sun Source) -->
  <radialGradient id="sunGlare" cx="95%" cy="5%" r="70%">
    <stop offset="0%" stop-color="#ffffff" stop-opacity="0.18" />
    <stop offset="25%" stop-color="#38bdf8" stop-opacity="0.08" />
    <stop offset="60%" stop-color="#000000" stop-opacity="0" />
  </radialGradient>
  <rect width="1200" height="800" fill="url(#sunGlare)" pointer-events="none" />

  <!-- Lens Flare Hexagons / Orbs (Cosmic Photography Effect) -->
  <g id="lens-flare" pointer-events="none" opacity="0.6">
    <circle cx="920" cy="160" r="14" fill="#fef08a" opacity="0.25" filter="url(#glow)" />
    <polygon points="780,260 795,252 805,264 800,284 785,292 775,280" fill="#38bdf8" opacity="0.2" />
    <circle cx="710" cy="330" r="8" fill="#e040fb" opacity="0.2" filter="url(#glow)" />
    <circle cx="480" cy="510" r="22" fill="#00f2fe" opacity="0.12" filter="url(#glow)" />
  </g>
</svg>

Reasoning trace (9,639 tokens)

**Generating Illustrated Concepts**

I'm currently focusing on visualizing abstract ideas. My latest thoughts revolve around crafting a specific image: an astronaut cat, riding a skateboard, all set against the lunar landscape. This is intended for direct SVG output, embedded within an HTML structure.

**Defining Illustration Styles**

My current focus is on generating an SVG of an astronaut cat skateboarding on the moon. I'm considering whether to provide a standalone SVG or an HTML structure embedding interactive SVG, with the latter allowing for CSS animations. I've confirmed pure SVG supports animations and inline styles.

**Expanding Illustration Elements**

My current focus is on enriching the visual complexity. I'm exploring detailed backgrounds with cosmic gradients, nebulas, and twinkling stars, alongside a textured moonscape featuring craters and subtle shading. I'm also considering how to incorporate dramatic lighting and a distant Earth.

**Crafting Dynamic Imagery**

I'm deep into visualizing the astronaut cat's radical skate move. My focus is now on the skateboard itself, imagining high-tech designs with glowing wheels and futuristic graphics, and detailing the cat's energetic pose as it catches air or grinds.

**Adding Dynamic Detail**

My thoughts are now zeroing in on the finer points of the illustration. I'm exploring custom grip tape designs, high-tech trucks, and glowing wheels for the skateboard, while also envisioning the astronaut cat's breed, expressive eyes, and specially designed helmet with an iridescent visor.

**Detailing Suit Components**

I'm now detailing the astronaut suit, focusing on the functional yet stylistic elements. I'm envisioning ribbed accordion joints for mobility, a life support backpack with blinking LEDs and pressure gauges, and specialized paw-grip gloves for the cat. A pressurized tail sleeve with a status light is also under consideration.

**Revising Output Format**

I'm re-evaluating the output format. While pure SVG is straightforward, embedding it within HTML offers better control for full-bleed, responsive layouts, especially for potential sandbox environments. I'll prioritize the HTML structure to ensure optimal presentation across various displays and embedding scenarios.

**Clarifying Output Syntax**

I'm reviewing the output format constraints. The instructions allow for either ````html or ````svg, with ````svg being preferable when the request specifically asks for an SVG. I'm confirming that an SVG with `viewBox` and `width`/`height` attributes will render correctly in an iframe, preserving aspect ratio.

**Finalizing Output Syntax**

I'm confirming the SVG output format. The explicit instruction to use ```svg when an SVG is requested is paramount. I will ensure the SVG includes standard namespaces, a `viewBox` attribute for scaling, and precise `width`/`height` settings for optimal rendering within an iframe, adhering to the 3:2 aspect ratio.

**Defining Compositional Elements**

I'm finalizing the scene's layout. My focus is on positioning the astronaut cat and skateboard dynamically mid-air over a crater crest, making them the hero elements. I'm also detailing the placement of Earth, a lunar module, and a unique flag in the background to create a rich, narrative environment.

**Adding Atmospheric Detail**

I'm now enriching the scene with dynamic elements. My thoughts are focused on depicting lunar dust kicked up by the skateboard's rear wheels, creating zero-gravity arcs, and I'm meticulously detailing the footprints left in the moon dust, envisioning both cat-paw and boot-like treads.

**Defining Detailed Visuals**

I'm now specifying the finer visual elements. My focus has shifted to the intricate details of the astronaut cat's ginger tabby fur, the clear helmet with double-bubble ears, and the vibrant synthwave graphics on the skateboard deck, complete with neon inlay and bold typography.

**Refining Skate Details**

My current thoughts are focused on the skateboard's advanced components. I'm finalizing the neon orange bushings and semi-translucent glowing cyan wheels, ensuring they cast a subtle underglow. I'm also adding micro-nozzles under the tail to depict a low-gravity orientation thruster with faint plasma plumes.

**Crafting Final Visuals**

I'm refining the scene's atmospheric and visual details. My focus is now on creating realistic dust trails, depicting blinking antenna lights, and ensuring the visor's sheen and sweeping light are precisely rendered. I'm also detailing the subtle low-gravity dust drift and the complex paths for the stars and Earth.

**Rendering Lunar Elements**

I'm now precisely defining the background elements. My focus is on the distant moonscape with faceted peaks, a detailed lunar lander featuring gold foil and a cat-sized ladder, and a unique flag with a paw print and "MEOW" text, all positioned within the scene for narrative depth.

**Depicting Lunar Dust**

I'm focusing on the dynamic interaction of the skateboard with the lunar surface. My thoughts are now on rendering the precise spray of regolith particles, meticulously detailing their trajectory and low-gravity arc as the skateboard pops off the ramp. I am also considering the subtle drift of lunar dust.

**Simulating Lunar Dust**

I'm now focused on the interaction between the skateboard and the lunar surface. I'm visualizing the precise spray of regolith particles, detailing their low-gravity trajectories and arc as the board lifts off. I'm also considering the subtle, overall drift of dust in the scene.

**Sculpting Cat's Pose**

I'm now meticulously defining the astronaut cat's athletic stance. My focus is on its bent knees, planted rear paw, and the dynamic extension of its front paw, capturing a confident, excited posture as it balances mid-air.

**Enhancing Pose Details**

I'm now detailing the cat's mid-air posture. My thoughts are focused on its extended front paw, the counterbalancing rear paw, and the majestic, expressive S-curve of its articulated tail, complete with a golden antenna light. The suit's Apollo/Artemis hybrid style and specific decals are also being refined.

**Outfitting Astronaut Cat**

I'm now finalizing the astronaut cat's ensemble. My thoughts are focused on the pressurized white gloves with turquoise bean-shaped grips and metal wrist rings, the sturdy lunar overshoes with orange heel caps, and the angular life support backpack featuring an antenna with a blinking LED and miniature thrusters.

**Detailing Cat's Visage**

I'm now deeply focused on the astronaut cat's facial features. My current thoughts are on its expressive pink nose, wide, exhilarated smile with tiny fangs, translucent whiskers, and perked tabby ears within custom ear-domes. The helmet's iridescent visor will reflect Earth and stars.

**Drafting Coordinates**

I'm now translating visual concepts into precise SVG coordinates and paths. My current focus is on laying out the scene within a 1200x800 viewport, detailing the sky, Earth's position and atmosphere, and the initial outlines for distant lunar hills and the main action plane.

**Defining Spatial Layout**

I'm meticulously positioning all scene elements, from the grand lunar landscape and lander to the hero skateboard and cat. My focus is on translating these conceptual coordinates into precise SVG paths and group transformations for the final render.

**Detailing Pose Coordinates**

I'm now meticulously defining the astronaut cat's pose with precise coordinates. My focus is on the exact positioning of limbs, tail, and head, including the backpack, antenna, and helmet's dual ear bubbles, ensuring a dynamic and balanced mid-air stance.

**Defining Color Palettes**

I'm now specifying the precise color schemes for the cat's fur, muzzle, and nose, using gradients of pumpkin, amber, and gold, with cream for the muzzle and a soft salmon pink for the nose, aiming for rich and harmonious visual detail.

**Defining Fur and Eyes**

I'm now focusing on the astronaut cat's detailed appearance. My thoughts are centered on its vibrant ginger tabby fur with mahogany stripes, and its large, stylized anime-style eyes, complete with emerald-to-lime gradients and glossy white highlights for a lively gaze.

**Defining Visor Reflections**

I'm detailing the helmet's visor, focusing on a gradient rim with subtle transparency. I'm adding reflections of Earth as a blue crescent and the moon's horizon. The neck collar will have metallic elements and locking nodes. The spacesuit's torso is now defined with shaded folds and a chest pack.

**Defining Costume Details**

I'm finalizing the astronaut cat's attire. My focus is on the Apollo/Artemis hybrid suit, including specific decals, pressurized gloves with turquoise paw-pads, and lunar overshoes with orange heel caps. The life support backpack with its antenna and LED is also being precisely detailed.

**Defining Skate Elements**

I'm now meticulously detailing the skateboard's components. My thoughts are focused on its custom deck design, including glowing cyan tech lines and bold typography, the polished chrome trucks with glowing orange bushings, and the semi-translucent cyan wheels emitting motion and ground glow. Thrusters under the tail with plasma plumes are also being finalized.

**Detailing Scene Elements**

I'm now meticulously defining the background and foreground details. My focus includes rendering crater textures with dramatic lighting, adding astronaut cat boot prints on the ramp, and designing a unique flag featuring fishbones, a paw print, and "CAT-OLLO 11," alongside a gold-foiled lunar module.

**Applying Lighting Effects**

I'm now implementing the lighting and shading across the scene. My focus is on a primary sunlight source from the top-right, complemented by a cyan fill light from the Earth, and the distinct glow from the skateboard's wheels and thrusters, all meticulously layered within the SVG.

**Defining Color Palettes**

I'm now solidifying the color palette, aiming for high contrast. This involves precise gradients for the suit fabric, hi-vis orange accents, and rich ginger tabby fur, alongside vibrant synthwave graphics and glowing cyan wheels. I'm also implementing complex reflections for the visor and chrome details.

**Adding Animated Elements**

I'm now defining the specific animations and their implementation. My focus is on creating distinct keyframe animations for the blinking LED lights on the backpack and the sweeping sheen of the visor, ensuring these dynamic elements are seamlessly integrated into the final SVG structure.

**Finalizing Cat's Appearance**

I'm meticulously refining the astronaut cat's visual details. My current thoughts are centered on ensuring the spacesuit's lower body, torso, and arms are accurately depicted with articulated joints and paw-specific gloves, while the head features expressive eyes, whiskers, and a cheerful expression within a detailed helmet.