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: 1 min 55 s
Cost: $0.078
Output tokens: 20,701
Spent thinking: 1,069 tokens
Speed: 183.1 tok/s
Console errors: 0

First token after: 2.3 s
First visible text after: 9.7 s
Prompt tokens: 353
Code size: 42.4 KB
Finish reason: stop
Served by: Google
Model id: google/gemini-3.8-flash
Reasoning sent: {"effort":"medium"}
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 · 824 lines

Download

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800" width="100%" height="100%">
  <defs>
    <!-- Space Background Gradients -->
    <radialGradient id="spaceBg" cx="50%" cy="30%" r="80%" fx="60%" fy="20%">
      <stop offset="0%" stop-color="#0f0c29" />
      <stop offset="40%" stop-color="#1b1035" />
      <stop offset="75%" stop-color="#080710" />
      <stop offset="100%" stop-color="#020107" />
    </radialGradient>

    <!-- Nebula Glows -->
    <radialGradient id="nebulaPink" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#ff2a8d" stop-opacity="0.35" />
      <stop offset="50%" stop-color="#9a1f6e" stop-opacity="0.15" />
      <stop offset="100%" stop-color="#000000" stop-opacity="0" />
    </radialGradient>

    <radialGradient id="nebulaCyan" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#00f0ff" stop-opacity="0.25" />
      <stop offset="60%" stop-color="#0051a8" stop-opacity="0.08" />
      <stop offset="100%" stop-color="#000000" stop-opacity="0" />
    </radialGradient>

    <!-- Earth Gradients -->
    <radialGradient id="earthAtmosphere" cx="40%" cy="40%" r="50%">
      <stop offset="0%" stop-color="#80d0ff" />
      <stop offset="60%" stop-color="#1a66cc" />
      <stop offset="90%" stop-color="#0b226b" />
      <stop offset="100%" stop-color="#030820" />
    </radialGradient>
    <radialGradient id="earthGlow" cx="50%" cy="50%" r="50%">
      <stop offset="70%" stop-color="#4dc3ff" stop-opacity="0.5" />
      <stop offset="100%" stop-color="#4dc3ff" stop-opacity="0" />
    </radialGradient>
    <clipPath id="earthClip">
      <circle cx="980" cy="180" r="85" />
    </clipPath>

    <!-- Moon Surface Gradients -->
    <linearGradient id="moonGrad" x1="0%" y1="0%" x2="20%" y2="100%">
      <stop offset="0%" stop-color="#9ea4b5" />
      <stop offset="25%" stop-color="#73798c" />
      <stop offset="60%" stop-color="#434856" />
      <stop offset="100%" stop-color="#181a24" />
    </linearGradient>

    <linearGradient id="moonHillFar" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#4f5466" />
      <stop offset="100%" stop-color="#1c1e29" />
    </linearGradient>

    <radialGradient id="craterShade" cx="40%" cy="40%" r="60%">
      <stop offset="0%" stop-color="#1e2029" stop-opacity="0.9" />
      <stop offset="70%" stop-color="#343947" stop-opacity="0.8" />
      <stop offset="95%" stop-color="#697082" stop-opacity="0.4" />
      <stop offset="100%" stop-color="#8c95ab" stop-opacity="0" />
    </radialGradient>

    <!-- Suit & Shading Gradients -->
    <linearGradient id="suitWhite" x1="0%" y1="0%" x2="70%" y2="100%">
      <stop offset="0%" stop-color="#ffffff" />
      <stop offset="50%" stop-color="#e3e7f2" />
      <stop offset="85%" stop-color="#a4adbe" />
      <stop offset="100%" stop-color="#6e778a" />
    </linearGradient>

    <linearGradient id="suitShadow" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#7b8496" />
      <stop offset="100%" stop-color="#3b404d" />
    </linearGradient>

    <linearGradient id="orangeAccent" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#ff7b00" />
      <stop offset="100%" stop-color="#e64600" />
    </linearGradient>

    <linearGradient id="tealAccent" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#00f0ff" />
      <stop offset="100%" stop-color="#0080a8" />
    </linearGradient>

    <linearGradient id="goldBrass" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#ffd56b" />
      <stop offset="60%" stop-color="#cc8818" />
      <stop offset="100%" stop-color="#633b00" />
    </linearGradient>

    <!-- Visor Gradients -->
    <radialGradient id="visorGlass" cx="35%" cy="30%" r="70%">
      <stop offset="0%" stop-color="#ffeaa7" stop-opacity="0.95" />
      <stop offset="35%" stop-color="#fab1a0" stop-opacity="0.8" />
      <stop offset="70%" stop-color="#0984e3" stop-opacity="0.75" />
      <stop offset="100%" stop-color="#130cb7" stop-opacity="0.9" />
    </radialGradient>

    <linearGradient id="visorGleam" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#ffffff" stop-opacity="0.8" />
      <stop offset="30%" stop-color="#ffffff" stop-opacity="0.3" />
      <stop offset="60%" stop-color="#ffffff" stop-opacity="0" />
    </linearGradient>

    <!-- Skateboard Deck Gradient -->
    <linearGradient id="deckTop" x1="0%" y1="0%" x2="100%" y2="40%">
      <stop offset="0%" stop-color="#ff0077" />
      <stop offset="30%" stop-color="#9900ee" />
      <stop offset="70%" stop-color="#240090" />
      <stop offset="100%" stop-color="#00f5d4" />
    </linearGradient>

    <linearGradient id="deckWood" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#eed8b1" />
      <stop offset="50%" stop-color="#b88d57" />
      <stop offset="100%" stop-color="#543719" />
    </linearGradient>

    <!-- Glow & Shadow Filters -->
    <filter id="neonGlow" x="-30%" y="-30%" width="160%" height="160%">
      <feGaussianBlur stdDeviation="6" result="blur" />
      <feMerge>
        <feMergeNode in="blur" />
        <feMergeNode in="blur" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>

    <filter id="softGlow" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur stdDeviation="4" result="blur" />
      <feMerge>
        <feMergeNode in="blur" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>

    <filter id="lunarDust" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur stdDeviation="2.5" result="blur" />
      <feMerge>
        <feMergeNode in="blur" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>

    <filter id="shadowFilter" x="-10%" y="-10%" width="130%" height="130%">
      <feGaussianBlur stdDeviation="8" result="blur" />
      <feColorMatrix type="matrix" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.6 0"/>
      <feMerge>
        <feMergeNode />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
  </defs>

  <style>
    /* Subtle animations that make the scene feel atmospheric and alive */
    @keyframes floatCat {
      0%, 100% { transform: translateY(0px) rotate(0deg); }
      50% { transform: translateY(-12px) rotate(-1.5deg); }
    }
    @keyframes wheelSpin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    @keyframes twinkle {
      0%, 100% { opacity: 0.3; transform: scale(0.8); }
      50% { opacity: 1; transform: scale(1.2); }
    }
    @keyframes thrusterGlow {
      0%, 100% { opacity: 0.7; transform: scale(0.95); }
      50% { opacity: 1; transform: scale(1.12); }
    }
    @keyframes earthFloat {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(6px); }
    }
    @keyframes dustFloat {
      0% { transform: translate(0, 0) scale(1); opacity: 0.8; }
      50% { opacity: 0.4; }
      100% { transform: translate(-25px, -35px) scale(0.3); opacity: 0; }
    }

    .skater-group {
      animation: floatCat 5s ease-in-out infinite;
      transform-origin: 520px 480px;
    }
    .star-twinkle-1 { animation: twinkle 3s ease-in-out infinite; transform-origin: center; }
    .star-twinkle-2 { animation: twinkle 4.5s ease-in-out infinite 1.5s; transform-origin: center; }
    .star-twinkle-3 { animation: twinkle 2.2s ease-in-out infinite 0.7s; transform-origin: center; }
    .plume { animation: thrusterGlow 1.2s ease-in-out infinite; transform-origin: 350px 380px; }
    .earth-group { animation: earthFloat 8s ease-in-out infinite; }
    .particle-1 { animation: dustFloat 2.5s ease-out infinite; }
    .particle-2 { animation: dustFloat 2s ease-out infinite 0.8s; }
    .particle-3 { animation: dustFloat 3s ease-out infinite 1.4s; }
  </style>

  <!-- ================= BACKGROUND SPACE ================= -->
  <rect x="0" y="0" width="1200" height="800" fill="url(#spaceBg)" />

  <!-- Nebulae -->
  <ellipse cx="250" cy="200" rx="420" ry="250" fill="url(#nebulaPink)" transform="rotate(-15, 250, 200)" />
  <ellipse cx="850" cy="300" rx="500" ry="220" fill="url(#nebulaCyan)" transform="rotate(10, 850, 300)" />
  <ellipse cx="550" cy="150" rx="280" ry="140" fill="url(#nebulaPink)" style="opacity: 0.4;" />

  <!-- Distant Stars (Varied sizes & brightness) -->
  <g fill="#ffffff">
    <!-- Static Crisp Stars -->
    <circle cx="65" cy="80" r="1" opacity="0.6" />
    <circle cx="120" cy="220" r="1.5" opacity="0.8" />
    <circle cx="180" cy="95" r="1" opacity="0.5" />
    <circle cx="280" cy="70" r="2" opacity="0.9" />
    <circle cx="340" cy="190" r="1" opacity="0.4" />
    <circle cx="430" cy="85" r="1.5" opacity="0.7" />
    <circle cx="510" cy="210" r="1" opacity="0.5" />
    <circle cx="590" cy="60" r="2" opacity="0.8" />
    <circle cx="680" cy="140" r="1.5" opacity="0.6" />
    <circle cx="750" cy="50" r="1" opacity="0.4" />
    <circle cx="820" cy="115" r="2.5" opacity="0.85" />
    <circle cx="890" cy="45" r="1" opacity="0.5" />
    <circle cx="950" cy="120" r="1.5" opacity="0.7" />
    <circle cx="1060" cy="75" r="1" opacity="0.6" />
    <circle cx="1130" cy="160" r="2" opacity="0.8" />
    <circle cx="1170" cy="90" r="1" opacity="0.5" />
    <circle cx="90" cy="340" r="1.2" opacity="0.5" />
    <circle cx="210" cy="290" r="1" opacity="0.4" />
    <circle cx="390" cy="300" r="1.5" opacity="0.6" />
    <circle cx="710" cy="270" r="1" opacity="0.4" />
    <circle cx="1110" cy="280" r="1.2" opacity="0.5" />

    <!-- 4-Point Cross Stars (Twinkling) -->
    <g class="star-twinkle-1" transform="translate(180, 140)">
      <path d="M0,-8 Q0,0 8,0 Q0,0 0,8 Q0,0 -8,0 Q0,0 0,-8 Z" fill="#ffffff" />
    </g>
    <g class="star-twinkle-2" transform="translate(480, 90)">
      <path d="M0,-11 Q0,0 11,0 Q0,0 0,11 Q0,0 -11,0 Q0,0 0,-11 Z" fill="#d8f8ff" />
      <circle cx="0" cy="0" r="2" fill="#fff" />
    </g>
    <g class="star-twinkle-3" transform="translate(780, 160)">
      <path d="M0,-7 Q0,0 7,0 Q0,0 0,7 Q0,0 -7,0 Q0,0 0,-7 Z" fill="#ffd9fa" />
    </g>
    <g class="star-twinkle-1" transform="translate(1090, 110)">
      <path d="M0,-10 Q0,0 10,0 Q0,0 0,10 Q0,0 -10,0 Q0,0 0,-10 Z" fill="#ffffff" />
      <circle cx="0" cy="0" r="1.5" fill="#fff" />
    </g>
    <g class="star-twinkle-2" transform="translate(320, 240)">
      <path d="M0,-6 Q0,0 6,0 Q0,0 0,6 Q0,0 -6,0 Q0,0 0,-6 Z" fill="#ffffff" opacity="0.7"/>
    </g>
  </g>

  <!-- Distant Galaxy -->
  <g transform="translate(140, 100) rotate(-28) scale(0.6)" opacity="0.65">
    <ellipse cx="0" cy="0" rx="45" ry="12" fill="url(#nebulaCyan)" filter="url(#softGlow)" />
    <ellipse cx="0" cy="0" rx="18" ry="5" fill="#ffffff" opacity="0.8" />
  </g>

  <!-- ================= THE EARTH ================= -->
  <g class="earth-group">
    <!-- Atmosphere Outer Glow -->
    <circle cx="980" cy="180" r="110" fill="url(#earthGlow)" filter="url(#softGlow)" />

    <!-- Planet Sphere -->
    <circle cx="980" cy="180" r="85" fill="url(#earthAtmosphere)" />

    <!-- Continents & Weather (Clipped inside earth) -->
    <g clip-path="url(#earthClip)">
      <!-- Landmasses (Stylized turquoise/green-blue) -->
      <path d="M 940,115 C 960,110 975,125 990,120 C 1005,115 1025,128 1020,145 C 1015,160 990,165 980,180 C 970,195 950,190 940,175 C 930,160 925,130 940,115 Z" fill="#2eb872" opacity="0.75" />
      <path d="M 985,190 C 1005,185 1020,200 1030,225 C 1025,245 1000,250 990,235 C 980,220 970,200 985,190 Z" fill="#2eb872" opacity="0.7" />
      <path d="M 920,180 C 935,175 940,190 935,205 C 928,215 918,205 920,180 Z" fill="#38c984" opacity="0.6" />

      <!-- Swirling White Cloud Belts -->
      <path d="M 910,130 Q 940,145 980,135 T 1050,145 C 1035,155 1000,148 970,150 C 940,152 920,140 910,130 Z" fill="#ffffff" opacity="0.65" />
      <path d="M 925,165 Q 965,155 1000,170 T 1065,180 C 1045,190 1010,180 985,185 C 955,190 935,175 925,165 Z" fill="#ffffff" opacity="0.6" />
      <path d="M 940,210 Q 975,225 1020,215 T 1060,235 C 1040,240 1000,235 975,230 C 950,225 935,220 940,210 Z" fill="#ffffff" opacity="0.5" />

      <!-- Shadow on Dark Side of Earth -->
      <path d="M 980,95 A 85,85 0 0,1 1065,180 A 85,85 0 0,1 980,265 C 1015,240 1035,210 1035,180 C 1035,150 1015,120 980,95 Z" fill="#030717" opacity="0.75" />
      <path d="M 980,95 A 85,85 0 0,1 1065,180 A 85,85 0 0,1 980,265 C 995,240 1005,210 1005,180 C 1005,150 995,120 980,95 Z" fill="#02030a" opacity="0.7" />
    </g>

    <!-- Atmophere Edge Specular Ring -->
    <circle cx="980" cy="180" r="85" fill="none" stroke="#a2e3ff" stroke-width="2.5" opacity="0.7" />
  </g>

  <!-- ================= MOON LANDSCAPE ================= -->
  <!-- Distant Crater Ridge Hills -->
  <path d="M-50,620 Q 180,520 480,560 T 1020,530 Q 1150,545 1250,580 L 1250,850 L -50,850 Z" fill="url(#moonHillFar)" opacity="0.9" />

  <!-- Stars/Earth Light reflecting on distant hill rim -->
  <path d="M-50,620 Q 180,520 480,560 T 1020,530 Q 1150,545 1250,580" fill="none" stroke="#7e879e" stroke-width="2" opacity="0.4" />

  <!-- Apollo-Style Lunar Lander & Flag Silhouette in distant background -->
  <g transform="translate(1040, 505) scale(0.55)" opacity="0.6">
    <!-- Mini Lander -->
    <rect x="-20" y="-20" width="40" height="25" rx="3" fill="#2d303b" />
    <polygon points="-25,5 25,5 15,20 -15,20" fill="#cca43b" />
    <line x1="-20" y1="20" x2="-35" y2="40" stroke="#8c95a6" stroke-width="3" />
    <line x1="20" y1="20" x2="35" y2="40" stroke="#8c95a6" stroke-width="3" />
    <line x1="0" y1="20" x2="0" y2="38" stroke="#8c95a6" stroke-width="2.5" />
    <circle cx="-35" cy="40" r="5" fill="#727987" />
    <circle cx="35" cy="40" r="5" fill="#727987" />
    <circle cx="0" cy="38" r="4" fill="#727987" />
    <!-- Mini Flag with Cat Paw -->
    <line x1="-55" y1="40" x2="-55" y2="0" stroke="#ffffff" stroke-width="2" />
    <polygon points="-55,0 -30,-8 -55,-16" fill="#ff4a79" />
    <circle cx="-42" cy="-8" r="2.5" fill="#ffffff" />
  </g>

  <!-- Foreground Main Lunar Horizon & Skate Ramp / Crater Lip -->
  <!-- Swooping dynamic lunar hill acting as a natural skate bowl / launch quarterpipe! -->
  <path d="M -50,680 Q 200,680 380,630 C 520,590 640,550 780,630 C 920,710 1080,670 1250,610 L 1250,850 L -50,850 Z" fill="url(#moonGrad)" />

  <!-- Bright Lunar Edge Highlight Rim (Sun/Earth Reflection) -->
  <path d="M -50,680 Q 200,680 380,630 C 520,590 640,550 780,630 C 920,710 1080,670 1250,610" fill="none" stroke="#d5dced" stroke-width="3.5" />
  <path d="M 340,642 C 480,600 620,565 760,632" fill="none" stroke="#ffffff" stroke-width="2" opacity="0.7" filter="url(#softGlow)" />

  <!-- Craters on Lunar Surface -->
  <!-- Crater 1 (Foreground Large Oval) -->
  <g transform="translate(260, 710) rotate(-5)">
    <ellipse cx="0" cy="0" rx="90" ry="32" fill="#20222a" />
    <ellipse cx="-4" cy="-3" rx="86" ry="29" fill="url(#craterShade)" />
    <!-- Crater bright rim -->
    <path d="M -85,4 C -50,33 50,33 85,4 C 65,22 -65,22 -85,4 Z" fill="#9ea7ba" opacity="0.6" />
    <path d="M -88,-2 C -50,-24 50,-24 88,-2" fill="none" stroke="#121317" stroke-width="5" opacity="0.8" />
  </g>

  <!-- Crater 2 (Mid ground near launch point) -->
  <g transform="translate(680, 685) rotate(12)">
    <ellipse cx="0" cy="0" rx="55" ry="18" fill="#1b1d24" />
    <ellipse cx="-2" cy="-2" rx="52" ry="16" fill="url(#craterShade)" />
    <path d="M -53,2 C -30,19 30,19 53,2" fill="none" stroke="#828a9c" stroke-width="2" opacity="0.7" />
  </g>

  <!-- Crater 3 (Right foreground) -->
  <g transform="translate(980, 720) rotate(-8)">
    <ellipse cx="0" cy="0" rx="120" ry="38" fill="#1b1c24" />
    <ellipse cx="-6" cy="-4" rx="112" ry="34" fill="url(#craterShade)" />
    <path d="M -115,5 C -70,40 70,40 115,5" fill="none" stroke="#8d96a8" stroke-width="3" opacity="0.6" />
  </g>

  <!-- Small Moon Rocks & Regolith Pebbles -->
  <g fill="#7d8699" stroke="#3b3f4a" stroke-width="1.5">
    <!-- Rock Cluster 1 -->
    <polygon points="150,750 162,742 175,748 170,758 155,760" />
    <polygon points="182,752 188,748 195,751 192,756" fill="#585e6b" />
    <!-- Rock Cluster 2 (Near ramp lip) -->
    <polygon points="560,610 572,602 585,607 580,618 565,617" />
    <polygon points="590,613 596,609 603,612 599,617" fill="#9aa3b5" />
    <!-- Small stones -->
    <circle cx="440" cy="670" r="3.5" fill="#656c7d" stroke="none" />
    <circle cx="455" cy="678" r="2" fill="#8b94a6" stroke="none" />
    <circle cx="820" cy="740" r="4.5" fill="#525866" stroke="none" />
    <circle cx="835" cy="746" r="2.5" fill="#8b94a6" stroke="none" />
    <circle cx="310" cy="660" r="3" fill="#8b94a6" stroke="none" />
  </g>

  <!-- Skateboard Wheel Moon Tracks on ground -->
  <path d="M 430,640 C 470,625 500,612 540,600" fill="none" stroke="#333742" stroke-width="4" stroke-dasharray="6,4" opacity="0.7" />
  <path d="M 442,648 C 482,633 512,620 552,608" fill="none" stroke="#252830" stroke-width="4" stroke-dasharray="6,4" opacity="0.6" />

  <!-- Lunar Dust Particles Ejected into Space (Low Gravity Float!) -->
  <g fill="#d8e1f5" filter="url(#lunarDust)">
    <circle cx="530" cy="580" r="4" class="particle-1" />
    <circle cx="515" cy="570" r="2.5" class="particle-2" />
    <circle cx="545" cy="565" r="3.5" class="particle-3" />
    <circle cx="500" cy="555" r="2" class="particle-1" />
    <circle cx="485" cy="575" r="3" class="particle-2" />
    <circle cx="470" cy="560" r="1.8" class="particle-3" />
    <circle cx="560" cy="550" r="2.2" class="particle-1" />
    <circle cx="525" cy="540" r="3.2" class="particle-2" opacity="0.7"/>
    <circle cx="495" cy="530" r="1.5" class="particle-3" opacity="0.5"/>
  </g>

  <!-- Skateboard Cast Shadow on Moon (Soft, offset low-gravity shadow) -->
  <ellipse cx="610" cy="605" rx="95" ry="16" fill="#0c0e14" opacity="0.5" filter="url(#softGlow)" transform="rotate(-6, 610, 605)" />


  <!-- ================= THE ASTRONAUT CAT & SKATEBOARD ================= -->
  <!-- Entire Character Rig Wrapped in Dynamic Floating/Riding Animation Group -->
  <g class="skater-group" id="astronaut-cat">

    <!-- === JETPACK / LIFE SUPPORT BACKPACK (PLSS) === -->
    <g id="backpack" transform="translate(390, 260) rotate(-18)">
      <!-- Main Life Support Tank Box -->
      <rect x="0" y="20" width="80" height="135" rx="18" fill="url(#suitShadow)" stroke="#2b2f3a" stroke-width="3" />
      <rect x="5" y="25" width="70" height="125" rx="14" fill="url(#suitWhite)" />

      <!-- Tank Details & Status Indicators -->
      <rect x="15" y="38" width="50" height="28" rx="6" fill="#1b1f2b" />
      <!-- LED Battery / O2 Bar Meter -->
      <rect x="22" y="45" width="8" height="14" rx="2" fill="#00ff88" filter="url(#softGlow)" />
      <rect x="33" y="45" width="8" height="14" rx="2" fill="#00ff88" filter="url(#softGlow)" />
      <rect x="44" y="45" width="8" height="14" rx="2" fill="#00ff88" filter="url(#softGlow)" />
      <rect x="55" y="45" width="8" height="14" rx="2" fill="#00e1ff" filter="url(#softGlow)" />

      <!-- Pressure Gauges (Circular dials) -->
      <circle cx="30" cy="90" r="11" fill="#ffffff" stroke="#ff7b00" stroke-width="2.5" />
      <line x1="30" y1="90" x2="35" y2="85" stroke="#ff0044" stroke-width="2" stroke-linecap="round" />
      <circle cx="30" cy="90" r="2" fill="#000" />

      <circle cx="55" cy="90" r="9" fill="#ffffff" stroke="#3b4354" stroke-width="2" />
      <line x1="55" y1="90" x2="52" y2="86" stroke="#0088ff" stroke-width="1.8" stroke-linecap="round" />

      <!-- Dual Oxygen Cylinder Caps on Top -->
      <rect x="12" y="6" width="24" height="18" rx="6" fill="url(#goldBrass)" />
      <rect x="44" y="6" width="24" height="18" rx="6" fill="url(#goldBrass)" />

      <!-- Emergency Mini RCS Thruster on Backpack Top Corner -->
      <polygon points="5,35 -15,25 -12,45" fill="#444b5c" />
      <!-- Thruster Plume (animated blue flame puff) -->
      <g class="plume" transform="translate(-14, 35)">
        <polygon points="0,0 -35,-8 -20,6" fill="#00f0ff" filter="url(#neonGlow)" />
        <polygon points="0,0 -20,-4 -12,3" fill="#ffffff" />
      </g>
    </g>

    <!-- Corrugated O2 Ribbed Hoses connecting backpack to suit -->
    <path d="M 410,380 C 370,410 390,460 450,455" fill="none" stroke="#2a2e3d" stroke-width="14" stroke-linecap="round" />
    <path d="M 410,380 C 370,410 390,460 450,455" fill="none" stroke="#00f0ff" stroke-width="10" stroke-linecap="round" />
    <path d="M 410,380 C 370,410 390,460 450,455" fill="none" stroke="#ffffff" stroke-width="10" stroke-dasharray="4,6" stroke-linecap="round" />

    <!-- === CAT SPACESUIT TAIL (Flexible segmented pressurized tail) === -->
    <g id="spacesuit-tail">
      <!-- Shadow tail base -->
      <path d="M 440,460 C 380,480 300,470 270,400 C 245,340 310,290 325,250 C 330,235 320,225 305,235 C 280,255 235,320 250,390 C 270,480 360,525 455,485 Z" fill="#202430" opacity="0.6" />

      <!-- Main Tail Body -->
      <path id="tailCurve" d="M 445,465 C 380,490 310,475 280,410 C 255,350 315,300 330,260 C 338,240 318,230 305,245 C 285,270 240,335 260,400 C 285,485 370,515 460,480 Z" fill="url(#suitWhite)" stroke="#7d879c" stroke-width="2.5" />

      <!-- Segmented Pressure Rings along Tail -->
      <path d="M 410,483 C 395,465 410,450 422,460" fill="none" stroke="#ff7b00" stroke-width="4" stroke-linecap="round" />
      <path d="M 360,483 C 345,460 360,440 375,455" fill="none" stroke="#00d9ff" stroke-width="4" stroke-linecap="round" />
      <path d="M 315,453 C 295,435 315,410 330,430" fill="none" stroke="#ff7b00" stroke-width="4" stroke-linecap="round" />
      <path d="M 280,395 C 265,380 290,360 302,378" fill="none" stroke="#00d9ff" stroke-width="4" stroke-linecap="round" />
      <path d="M 285,335 C 280,315 308,310 315,328" fill="none" stroke="#ff7b00" stroke-width="4" stroke-linecap="round" />

      <!-- Gold Tip on Suit Tail with Antenna / Beacon -->
      <circle cx="318" cy="245" r="10" fill="url(#goldBrass)" stroke="#422500" stroke-width="1.5" />
      <line x1="318" y1="235" x2="318" y2="215" stroke="#e0e6ed" stroke-width="2" />
      <circle cx="318" cy="213" r="3.5" fill="#ff0055" filter="url(#neonGlow)" />
    </g>

    <!-- === REAR LEG & PAW (Grip on Board) === -->
    <g id="back-leg">
      <!-- Upper Thigh -->
      <ellipse cx="465" cy="455" rx="36" ry="46" fill="url(#suitShadow)" transform="rotate(-15, 465, 455)" />
      <ellipse cx="463" cy="453" rx="34" ry="43" fill="url(#suitWhite)" transform="rotate(-15, 463, 453)" />

      <!-- Knee Joint Ring Accordion Band -->
      <path d="M 445,480 Q 470,490 495,475" fill="none" stroke="#485061" stroke-width="8" stroke-linecap="round" />
      <path d="M 445,480 Q 470,490 495,475" fill="none" stroke="#ff7b00" stroke-width="4" stroke-linecap="round" />

      <!-- Lower Shin & Space Boot -->
      <path d="M 455,485 L 450,545 C 450,560 465,570 485,570 C 505,570 515,560 512,545 L 495,480 Z" fill="url(#suitWhite)" stroke="#677185" stroke-width="2" />

      <!-- Chunky Lunar Skate Boot Sole (Back foot) -->
      <!-- Tilted slightly to show skate stance -->
      <g transform="translate(440, 535) rotate(8)">
        <path d="M 0,15 L 10,12 L 55,18 L 62,32 L -5,30 Z" fill="#252936" />
        <!-- Neon Grip Tread -->
        <path d="M -5,28 L 62,30 L 60,36 L -7,34 Z" fill="#00f0ff" filter="url(#softGlow)" />
        <!-- Boot Straps / Buckles -->
        <rect x="8" y="10" width="10" height="16" rx="2" fill="url(#goldBrass)" />
        <rect x="30" y="12" width="10" height="16" rx="2" fill="url(#goldBrass)" />
      </g>
    </g>

    <!-- === TORSO & SPACESUIT BODY === -->
    <g id="torso">
      <!-- Main Suit Bulk (Chunky, low gravity marshmallow suit) -->
      <path d="M 440,320 C 420,380 430,470 490,475 C 560,480 600,430 595,350 C 590,290 530,270 460,300 Z" fill="url(#suitShadow)" />
      <path d="M 445,320 C 430,375 440,460 495,465 C 555,470 590,425 585,350 C 580,295 530,275 465,305 Z" fill="url(#suitWhite)" />

      <!-- Chest Rig & Mission Patch -->
      <rect x="475" y="325" width="75" height="65" rx="10" fill="#313745" stroke="#1d2029" stroke-width="2" />
      <rect x="480" y="330" width="65" height="55" rx="7" fill="#eaf0fa" />

      <!-- Cute "MEOW-SA" / Cat Space Mission Patch -->
      <ellipse cx="512" cy="355" rx="24" ry="18" fill="#0b226b" />
      <!-- Vector Fish Skeleton / Orbit inside patch -->
      <path d="M 495,356 Q 512,342 530,356 Q 512,370 495,356 Z" fill="none" stroke="#ff0055" stroke-width="2" />
      <circle cx="512" cy="355" r="4" fill="#ffd56b" />
      <!-- Patch Star -->
      <polygon points="525,345 527,350 532,350 528,353 530,358 525,355 521,358 523,353 519,350 524,350" fill="#fff" />
      <!-- Red NASA-style swoosh Vector -->
      <path d="M 492,362 Q 515,348 532,342" fill="none" stroke="#ff2a55" stroke-width="2.5" stroke-linecap="round" />

      <!-- Torso Utility Seams & Segment Lines -->
      <path d="M 465,420 Q 515,440 565,410" fill="none" stroke="#8792a6" stroke-width="3" />
      <path d="M 470,428 Q 515,448 560,418" fill="none" stroke="#ff7b00" stroke-width="2" />

      <!-- Anodized Blue Suit Control Knobs -->
      <circle cx="495" cy="405" r="5" fill="#00d9ff" stroke="#007799" stroke-width="1.5" />
      <circle cx="515" cy="407" r="5" fill="#ff7b00" stroke="#994400" stroke-width="1.5" />
      <circle cx="535" cy="405" r="5" fill="#ffd56b" stroke="#997700" stroke-width="1.5" />
    </g>

    <!-- === FRONT LEG & FOOT (Posed dynamically forward over front bolts) === -->
    <g id="front-leg">
      <!-- Upper Leg extending forward -->
      <path d="M 535,420 C 565,425 615,440 645,490 C 625,505 595,500 565,475 C 545,455 530,435 535,420 Z" fill="url(#suitShadow)" />
      <path d="M 540,420 C 570,425 615,445 640,485 C 625,498 598,492 570,470 C 550,450 538,435 540,420 Z" fill="url(#suitWhite)" />

      <!-- Front Knee Joint Ribs -->
      <path d="M 605,460 Q 625,475 635,495" fill="none" stroke="#ff7b00" stroke-width="4" stroke-linecap="round" />
      <path d="M 598,468 Q 618,483 628,503" fill="none" stroke="#4a5263" stroke-width="4" stroke-linecap="round" />

      <!-- Front Boot -->
      <g transform="translate(610, 480) rotate(-12)">
        <path d="M 10,10 L 25,2 L 60,30 C 65,45 55,60 30,60 L 5,55 Z" fill="url(#suitWhite)" stroke="#7a8599" stroke-width="2" />
        <!-- Boot Sole gripping front of board (Ollie / Kickflip catch angle) -->
        <path d="M 20,48 L 75,44 L 80,58 L 18,62 Z" fill="#252936" />
        <path d="M 18,58 L 80,54 L 78,63 L 16,65 Z" fill="#00f0ff" filter="url(#softGlow)" />
        <!-- Front Buckles -->
        <rect x="30" y="28" width="9" height="15" rx="2" fill="url(#goldBrass)" transform="rotate(15, 30, 28)" />
      </g>
    </g>

    <!-- === FRONT ARM (Balanced in the air, cat claws in glove) === -->
    <g id="front-arm">
      <!-- Shoulder Bell / Joint -->
      <ellipse cx="560" cy="325" rx="24" ry="20" fill="url(#suitWhite)" stroke="#7a8599" stroke-width="2" transform="rotate(25, 560, 325)" />
      <path d="M 550,312 Q 570,325 572,342" fill="none" stroke="#ff7b00" stroke-width="3.5" stroke-linecap="round" />

      <!-- Bicep & Forearm stretched out for stylish balance -->
      <path d="M 570,325 C 620,330 675,305 710,265 C 720,275 715,295 680,330 C 640,365 590,360 565,345 Z" fill="url(#suitShadow)" />
      <path d="M 575,325 C 620,330 670,305 705,270 C 713,278 708,293 675,325 C 638,358 595,352 570,342 Z" fill="url(#suitWhite)" stroke="#7a8599" stroke-width="1.5" />

      <!-- Wrist Pressure Ring Band -->
      <ellipse cx="695" cy="285" rx="8" ry="16" fill="url(#tealAccent)" transform="rotate(-35, 695, 285)" />

      <!-- Space Glove Puffed Paw (Front Right Paw) -->
      <g transform="translate(695, 265) rotate(-30)">
        <path d="M 0,10 C 5,-2 20,-5 28,5 C 35,15 30,30 20,35 C 10,40 -2,25 0,10 Z" fill="url(#suitWhite)" stroke="#6d7687" stroke-width="2" />
        <!-- Cat Glove Finger Pads (Cute Rubberized Grip Pads) -->
        <ellipse cx="26" cy="10" rx="4.5" ry="3.5" fill="#ff557f" />
        <ellipse cx="28" cy="20" rx="4" ry="3" fill="#ff557f" />
        <ellipse cx="22" cy="28" rx="4" ry="3" fill="#ff557f" />
        <!-- Glove Palm Main Pad -->
        <ellipse cx="14" cy="18" rx="7" ry="6" fill="#ff557f" />
      </g>
    </g>

    <!-- === BACK ARM (Trailing back for sick balance pose) === -->
    <g id="back-arm">
      <!-- Upper Arm stretching back -->
      <path d="M 445,315 C 410,295 365,280 320,270 C 315,285 330,305 360,318 C 395,335 430,340 445,335 Z" fill="url(#suitShadow)" />
      <path d="M 445,315 C 412,298 370,285 325,275 C 322,286 333,303 365,315 C 400,332 432,336 445,332 Z" fill="url(#suitWhite)" stroke="#7a8599" stroke-width="1.5" />

      <!-- Wrist Ring -->
      <ellipse cx="330" cy="280" rx="6" ry="13" fill="url(#orangeAccent)" transform="rotate(15, 330, 280)" />

      <!-- Back Glove Paw -->
      <g transform="translate(325, 265) rotate(20)">
        <path d="M 0,10 C -5,-2 -18,-2 -25,8 C -30,18 -22,30 -12,32 C -2,34 6,22 0,10 Z" fill="url(#suitWhite)" stroke="#677080" stroke-width="2" />
        <!-- Rubberized Grip Pods on glove -->
        <circle cx="-18" cy="8" r="3.5" fill="#ff557f" />
        <circle cx="-23" cy="16" r="3" fill="#ff557f" />
        <circle cx="-18" cy="24" r="3" fill="#ff557f" />
        <ellipse cx="-10" cy="16" rx="5.5" ry="5" fill="#ff557f" />
      </g>
    </g>

    <!-- === HELMET & CAT HEAD === -->
    <!-- Heavy Padded Neck Collar / Helmet Neck Ring -->
    <g id="neck-ring" transform="translate(495, 290) rotate(-10)">
      <ellipse cx="0" cy="0" rx="66" ry="22" fill="#2d3340" />
      <ellipse cx="0" cy="-2" rx="62" ry="19" fill="url(#goldBrass)" />
      <ellipse cx="0" cy="-5" rx="56" ry="16" fill="#1b1d24" />
      <!-- Locking Latches on collar -->
      <rect x="-45" y="-12" width="8" height="14" rx="2" fill="#00f0ff" />
      <rect x="37" y="-12" width="8" height="14" rx="2" fill="#ff7b00" />
    </g>

    <!-- Giant Spherical Glass Space Helmet Dome (Base Backing) -->
    <g id="helmet-sphere">
      <!-- Dark Interior of helmet behind cat -->
      <circle cx="505" cy="205" r="105" fill="#0a0914" stroke="#485163" stroke-width="4" />

      <!-- Inside Helmet: Star & Earth reflection on inner glass -->
      <circle cx="505" cy="205" r="102" fill="#121324" />

      <!-- ================= THE CAT INSIDE ================= -->
      <g id="cat-face">
        <!-- CAT EARS (Spicking up inside the roomy helmet dome) -->
        <!-- Left Ear (Cat's Right) -->
        <g id="ear-left">
          <polygon points="435,160 410,75 470,120" fill="#f39c12" stroke="#d35400" stroke-width="2" />
          <polygon points="432,150 422,95 460,125" fill="#ffccd5" />
          <!-- Fluffy Ear Hair Tuft -->
          <path d="M 430,135 L 445,128 L 435,122 L 452,115" stroke="#ffffff" stroke-width="2.5" fill="none" stroke-linecap="round" />
        </g>
        <!-- Right Ear (Cat's Left) -->
        <g id="ear-right">
          <polygon points="535,125 595,78 575,165" fill="#e67e22" stroke="#d35400" stroke-width="2" />
          <polygon points="545,130 582,98 570,152" fill="#ffccd5" />
          <!-- Fluffy Ear Hair Tuft -->
          <path d="M 565,135 L 550,130 L 562,122 L 548,118" stroke="#ffffff" stroke-width="2.5" fill="none" stroke-linecap="round" />
        </g>

        <!-- Head Base Shape (Warm Ginger Tabby with White Cheeks) -->
        <ellipse cx="505" cy="188" rx="68" ry="60" fill="#f39c12" />

        <!-- Tabby Stripes on Forehead -->
        <path d="M 505,132 L 505,152" stroke="#ba4a00" stroke-width="4" stroke-linecap="round" />
        <path d="M 488,136 L 494,154" stroke="#ba4a00" stroke-width="3.5" stroke-linecap="round" />
        <path d="M 522,136 L 516,154" stroke="#ba4a00" stroke-width="3.5" stroke-linecap="round" />

        <!-- Chubby White Muzzle / Cheeks -->
        <path d="M 450,205 C 445,175 480,170 505,185 C 530,170 565,175 560,205 C 558,228 535,236 505,230 C 475,236 452,228 450,205 Z" fill="#ffffff" />

        <!-- Cute Space Headset with Mic (Comms to Houston / Meowston) -->
        <path d="M 436,170 C 428,210 445,238 480,242" fill="none" stroke="#333844" stroke-width="4" stroke-linecap="round" />
        <!-- Headset Mic Tip with green voice LED -->
        <rect x="478" y="237" width="10" height="8" rx="3" fill="#1b1c21" />
        <circle cx="486" cy="241" r="2" fill="#00ff66" filter="url(#softGlow)" />
        <ellipse cx="436" cy="172" rx="7" ry="12" fill="#ff7b00" />

        <!-- CAT EYES (Big, Bright, Determined & Happy Astronaut Eyes) -->
        <!-- Left Eye -->
        <g id="eye-left">
          <ellipse cx="476" cy="176" rx="15" ry="17" fill="#1abc9c" />
          <ellipse cx="476" cy="176" rx="12" ry="15" fill="#2ecc71" />
          <!-- Big Glossy Pupil -->
          <ellipse cx="478" cy="175" rx="8" ry="12" fill="#0c1017" />
          <!-- Star Specular Sparkle Highlight -->
          <circle cx="474" cy="170" r="4.5" fill="#ffffff" />
          <circle cx="482" cy="180" r="2" fill="#ffffff" />
        </g>

        <!-- Right Eye (Slightly winking / confident squint) -->
        <g id="eye-right">
          <ellipse cx="534" cy="176" rx="15" ry="17" fill="#1abc9c" />
          <ellipse cx="534" cy="176" rx="12" ry="15" fill="#2ecc71" />
          <!-- Pupil -->
          <ellipse cx="532" cy="175" rx="8" ry="12" fill="#0c1017" />
          <!-- Star Specular Sparkle Highlight -->
          <circle cx="528" cy="170" r="4.5" fill="#ffffff" />
          <circle cx="536" cy="180" r="2" fill="#ffffff" />
        </g>

        <!-- Cute Determined Eyebrow Angles -->
        <path d="M 462,156 Q 478,150 492,158" fill="none" stroke="#ba4a00" stroke-width="3" stroke-linecap="round" />
        <path d="M 548,156 Q 532,150 518,158" fill="none" stroke="#ba4a00" stroke-width="3" stroke-linecap="round" />

        <!-- Cute Pink Nose -->
        <polygon points="505,195 497,186 513,186" fill="#ff6b81" />

        <!-- Cat Mouth: Happy Confident Grin / Smirk -->
        <path d="M 505,195 L 505,204 M 505,204 Q 492,208 484,201 M 505,204 Q 518,208 528,200" fill="none" stroke="#4a2810" stroke-width="2.5" stroke-linecap="round" />

        <!-- Little Pink Tongue Peeking Out in Excitement -->
        <path d="M 501,205 C 501,213 511,213 511,205 Z" fill="#ff4757" />

        <!-- Whiskers (Crisp white cat whiskers flowing in the helmet) -->
        <g stroke="#ffffff" stroke-width="2" stroke-linecap="round" opacity="0.9">
          <!-- Left Whiskers -->
          <line x1="460" y1="198" x2="415" y2="190" />
          <line x1="458" y1="205" x2="410" y2="208" />
          <line x1="462" y1="212" x2="420" y2="224" />
          <!-- Right Whiskers -->
          <line x1="550" y1="198" x2="595" y2="190" />
          <line x1="552" y1="205" x2="600" y2="208" />
          <line x1="548" y1="212" x2="590" y2="224" />
        </g>

        <!-- Rosy Cheek Blush -->
        <ellipse cx="458" cy="200" rx="9" ry="5" fill="#ff3860" opacity="0.25" />
        <ellipse cx="552" cy="200" rx="9" ry="5" fill="#ff3860" opacity="0.25" />
      </g>

      <!-- Glass Visor Front Bubble (Curved Specular Gleams & Reflections) -->
      <!-- Gold-Iridescent Visor Gradient Overlay with high transparency so cat is beautifully visible -->
      <circle cx="505" cy="205" r="102" fill="url(#visorGlass)" opacity="0.28" style="mix-blend-mode: screen;" />

      <!-- Curved Glossy Reflection Curves on Helmet Glass Outer Surface -->
      <path d="M 430,135 A 95,95 0 0,1 575,135 A 82,82 0 0,0 445,145 Z" fill="url(#visorGleam)" opacity="0.8" />
      <ellipse cx="560" cy="160" rx="28" ry="12" fill="#ffffff" opacity="0.4" transform="rotate(-35, 560, 160)" />

      <!-- Reflection of Earth visible on the curved helmet surface! -->
      <g transform="translate(440, 150) scale(0.18)" opacity="0.75" filter="url(#softGlow)">
        <circle cx="0" cy="0" r="45" fill="#00f0ff" />
        <circle cx="-5" cy="-5" r="40" fill="#0066cc" />
        <path d="M -20,-10 Q 0,-5 10,-20 Q 20,5 5,20 Z" fill="#2ed573" />
      </g>

      <!-- Helmet Outer Rim Ring -->
      <circle cx="505" cy="205" r="105" fill="none" stroke="#8c97ad" stroke-width="5" opacity="0.5" />
      <circle cx="505" cy="205" r="103" fill="none" stroke="#ffffff" stroke-width="2" opacity="0.8" />
    </g>

    <!-- === THE HIGH-TECH LUNAR SKATEBOARD === -->
    <!-- Positioned dynamically under paws: doing a lunar kickflip / rocket air! -->
    <g id="skateboard" transform="translate(565, 545) rotate(-14)">

      <!-- Drop Shadow of Board Layers -->
      <path d="M -160,-5 C -80,-3 80,-3 160,-15 C 190,-20 205,-4 185,15 C 130,28 -70,28 -145,16 C -185,10 -185,-7 -160,-5 Z" fill="#08090f" opacity="0.7" filter="url(#softGlow)" />

      <!-- Skateboard Deck Core (Multi-ply Canadian Maple + Carbon Fiber) -->
      <!-- Thick Edge Profile -->
      <path d="M -155,2 C -80,4 80,4 165,-8 C 192,-12 202,3 182,18 C 120,28 -80,28 -148,18 C -180,12 -180,-1 -155,2 Z" fill="url(#deckWood)" />

      <!-- Deck Top Surface (Grip Tape with Vibrant Synthwave Neon Graphic) -->
      <path d="M -158,-2 C -80,0 80,0 162,-12 C 188,-16 198,-2 178,12 C 120,22 -80,22 -145,12 C -175,7 -178,-5 -158,-2 Z" fill="#15171e" stroke="#2d323f" stroke-width="1" />

      <!-- Deck Neon Top Stripe & Artwork -->
      <path d="M -150,0 C -75,2 75,2 155,-10 C 172,-13 180,-3 165,8 C 115,17 -75,17 -135,9 C -160,5 -162,-3 -150,0 Z" fill="url(#deckTop)" />

      <!-- Grip Tape Center Seam Graphic: Laser Fish Bone Skeleton -->
      <g stroke="#ffffff" stroke-width="1.8" stroke-linecap="round" opacity="0.9">
        <line x1="-70" y1="7" x2="70" y2="0" />
        <!-- Ribs -->
        <line x1="-50" y1="4" x2="-45" y2="-2" />
        <line x1="-50" y1="8" x2="-45" y2="13" />
        <line x1="-25" y1="3" x2="-20" y2="-4" />
        <line x1="-25" y1="7" x2="-20" y2="14" />
        <line x1="0" y1="2" x2="5" y2="-5" />
        <line x1="0" y1="6" x2="5" y2="14" />
        <line x1="25" y1="1" x2="30" y2="-6" />
        <line x1="25" y1="5" x2="30" y2="13" />
        <line x1="50" y1="0" x2="55" y2="-7" />
        <line x1="50" y1="4" x2="55" y2="12" />
        <!-- Fish Head Triangle -->
        <polygon points="70,0 82,-3 82,3" fill="#ffffff" stroke="none" />
      </g>

      <!-- Skateboard Hardware (Bolts on Deck) -->
      <!-- Back Bolts -->
      <circle cx="-95" cy="4" r="2" fill="#ffd56b" />
      <circle cx="-83" cy="4" r="2" fill="#ffd56b" />
      <circle cx="-95" cy="11" r="2" fill="#ffd56b" />
      <circle cx="-83" cy="11" r="2" fill="#ffd56b" />
      <!-- Front Bolts -->
      <circle cx="85" cy="-2" r="2" fill="#ffd56b" />
      <circle cx="97" cy="-3" r="2" fill="#ffd56b" />
      <circle cx="85" cy="5" r="2" fill="#ffd56b" />
      <circle cx="97" cy="4" r="2" fill="#ffd56b" />

      <!-- Underside Skateboard Trucks (Magnesium Alloy Hanger & Baseplate) -->
      <!-- Back Truck -->
      <g transform="translate(-89, 14)">
        <rect x="-10" y="0" width="20" height="7" fill="#444b59" rx="2" />
        <polygon points="-8,7 8,7 12,20 -12,20" fill="#717a8c" />
        <!-- Kingpin Nut -->
        <ellipse cx="0" cy="15" rx="5" ry="3" fill="url(#goldBrass)" />
        <line x1="-26" y1="20" x2="26" y2="20" stroke="#a0aab8" stroke-width="7" stroke-linecap="round" />
      </g>

      <!-- Front Truck -->
      <g transform="translate(91, 5)">
        <rect x="-10" y="0" width="20" height="7" fill="#444b59" rx="2" />
        <polygon points="-8,7 8,7 12,20 -12,20" fill="#717a8c" />
        <!-- Kingpin Nut -->
        <ellipse cx="0" cy="15" rx="5" ry="3" fill="url(#goldBrass)" />
        <line x1="-26" y1="20" x2="26" y2="20" stroke="#a0aab8" stroke-width="7" stroke-linecap="round" />
      </g>

      <!-- Rocket Thruster Boosters Mounted Under Deck Center! -->
      <g transform="translate(0, 16)">
        <rect x="-30" y="0" width="60" height="12" rx="4" fill="#252936" stroke="#3d4354" stroke-width="1.5" />
        <!-- Twin Thruster Nozzles -->
        <polygon points="-24,12 -12,12 -8,22 -28,22" fill="#1b1c24" stroke="#ff7b00" stroke-width="1.5" />
        <polygon points="12,12 24,12 28,22 8,22" fill="#1b1c24" stroke="#ff7b00" stroke-width="1.5" />
        <!-- Twin Neon Blue Plasma Flames Erupting Downward -->
        <polygon points="-26,22 -10,22 -18,48" fill="#00f0ff" filter="url(#neonGlow)" />
        <polygon points="-23,22 -13,22 -18,36" fill="#ffffff" />

        <polygon points="10,22 26,22 18,48" fill="#00f0ff" filter="url(#neonGlow)" />
        <polygon points="13,22 23,22 18,36" fill="#ffffff" />
      </g>

      <!-- WHEELS (Glowing Polyurethane Translucent Lunar Wheels) -->
      <!-- Back-Left Wheel (In background depth) -->
      <g transform="translate(-112, 30)">
        <ellipse cx="0" cy="0" rx="11" ry="16" fill="#0099aa" opacity="0.6" />
        <ellipse cx="0" cy="0" rx="6" ry="10" fill="#004455" />
      </g>

      <!-- Back-Right Wheel (Foreground) -->
      <g transform="translate(-66, 36)">
        <!-- Outer Glowing Wheel Body -->
        <ellipse cx="0" cy="0" rx="13" ry="19" fill="#00f0ff" filter="url(#softGlow)" />
        <ellipse cx="0" cy="0" rx="11" ry="17" fill="#bafffd" />
        <!-- High-Speed Precision Ceramic Bearing & Core -->
        <ellipse cx="0" cy="0" rx="6" ry="9" fill="#ff0077" />
        <ellipse cx="0" cy="0" rx="3" ry="5" fill="#ffffff" />
        <!-- Speed Motion Blur Lines -->
        <line x1="-12" y1="-5" x2="-18" y2="-12" stroke="#00f0ff" stroke-width="2" opacity="0.7" />
        <line x1="-10" y1="10" x2="-16" y2="16" stroke="#00f0ff" stroke-width="2" opacity="0.7" />
      </g>

      <!-- Front-Left Wheel (In background depth) -->
      <g transform="translate(68, 21)">
        <ellipse cx="0" cy="0" rx="11" ry="16" fill="#cc0066" opacity="0.6" />
        <ellipse cx="0" cy="0" rx="6" ry="10" fill="#660033" />
      </g>

      <!-- Front-Right Wheel (Foreground) -->
      <g transform="translate(114, 27)">
        <!-- Outer Glowing Wheel Body -->
        <ellipse cx="0" cy="0" rx="13" ry="19" fill="#ff0077" filter="url(#softGlow)" />
        <ellipse cx="0" cy="0" rx="11" ry="17" fill="#ffc2df" />
        <!-- High-Speed Precision Ceramic Bearing & Core -->
        <ellipse cx="0" cy="0" rx="6" ry="9" fill="#00f0ff" />
        <ellipse cx="0" cy="0" rx="3" ry="5" fill="#ffffff" />
        <!-- Speed Motion Blur Lines -->
        <line x1="12" y1="-5" x2="18" y2="-12" stroke="#ff0077" stroke-width="2" opacity="0.7" />
        <line x1="10" y1="10" x2="16" y2="16" stroke="#ff0077" stroke-width="2" opacity="0.7" />
      </g>

      <!-- Speed Trail Under Wheels -->
      <path d="M -160,25 C -100,28 40,24 140,15" fill="none" stroke="#00f0ff" stroke-width="1.5" stroke-dasharray="8,6" opacity="0.6" filter="url(#softGlow)" />
    </g>
  </g>

  <!-- ================= FOREGROUND DUST & SPARKLES ================= -->
  <!-- Ambient floating moon dust specs catching sunlight in extreme foreground -->
  <g fill="#ffffff" opacity="0.75" filter="url(#softGlow)">
    <circle cx="210" cy="620" r="1.5" />
    <circle cx="260" cy="590" r="2.5" />
    <circle cx="680" cy="520" r="1.5" />
    <circle cx="740" cy="550" r="2" />
    <circle cx="890" cy="610" r="3" />
    <circle cx="920" cy="580" r="1" />
    <circle cx="1140" cy="670" r="2" />
  </g>
</svg>

Reasoning trace (1,069 tokens)

**Designing Unique Cat-stronaut**

I'm focusing on crafting a whimsical SVG of a cat in an astronaut suit, expertly skateboarding across the lunar surface. The challenge lies in encapsulating this entire visual concept within a single, clean code block, ensuring the final output is precisely as requested.

**Refining SVG Structure**

I'm zeroing in on the precise SVG markup. The primary question is whether to use a pure ` ```svg ` block or an ` ```html ` block that includes the SVG. My current inclination leans towards a pure SVG for direct rendering, but I'm confirming the implications for sandboxed environments.

**Creating Detailed Visuals**

I'm embracing the full potential of SVG, exploring embedded CSS for gradients, animations, and filters. My current plan involves a rich, detailed background of deep space with a vibrant Earth, and a dynamic lunar surface featuring craters and dust kick-up. I'm also considering advanced skateboard designs with thrusters.

**Detailing Cat-stronaut's Attire**

I'm now detailing the cat-stronaut's spacesuit, aiming for a retro-modern lunar aesthetic with vibrant mission patches and a personalized "MEOWSA" badge. The helmet's bubble dome will feature a reflective gold visor, yet remain transparent enough to showcase the determined, adorable cat face within, complete with expressive eyes and a cute nose.