Models 44

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 38 s
Cost
$0.063
Output tokens
16,700
Spent thinking
0 tokens
Speed
173.3 tok/s
Console errors
0
First token after
1.1 s
First visible text after
1.1 s
Prompt tokens
353
Code size
35.9 KB
Finish reason
stop
Served by
Google
Model id
google/gemini-3.8-flash
Reasoning sent
{"effort":"low"}
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 · 667 lines

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Astronaut Cat Skateboarding on the Moon</title>
<style>
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  body {
    background: #060713;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  }
  .container {
    width: 100vw;
    height: 100vh;
    max-width: 1280px;
    max-height: 800px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  svg {
    width: 100%;
    height: 100%;
    max-height: 100vh;
    box-shadow: 0 10px 40px rgba(0,0,0,0.8);
  }
</style>
</head>
<body>
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800" width="100%" height="100%">
  <defs>
    <!-- Background Space Gradients -->
    <radialGradient id="spaceGlow" cx="50%" cy="30%" r="75%">
      <stop offset="0%" stop-color="#181336" />
      <stop offset="45%" stop-color="#0d0a21" />
      <stop offset="100%" stop-color="#04020a" />
    </radialGradient>

    <!-- Nebula Glows -->
    <radialGradient id="nebulaPink" cx="20%" cy="25%" r="40%">
      <stop offset="0%" stop-color="#ff2a8d" stop-opacity="0.25" />
      <stop offset="60%" stop-color="#9b11e0" stop-opacity="0.08" />
      <stop offset="100%" stop-color="#000" stop-opacity="0" />
    </radialGradient>
    
    <radialGradient id="nebulaCyan" cx="80%" cy="35%" r="45%">
      <stop offset="0%" stop-color="#00f0ff" stop-opacity="0.22" />
      <stop offset="50%" stop-color="#0051ff" stop-opacity="0.06" />
      <stop offset="100%" stop-color="#000" stop-opacity="0" />
    </radialGradient>

    <!-- Earth Gradients -->
    <radialGradient id="earthGrad" cx="35%" cy="35%" r="65%">
      <stop offset="0%" stop-color="#7be5ff" />
      <stop offset="25%" stop-color="#1b7fe2" />
      <stop offset="70%" stop-color="#0b2b6b" />
      <stop offset="100%" stop-color="#020a1c" />
    </radialGradient>

    <radialGradient id="earthAtmo" cx="50%" cy="50%" r="50%">
      <stop offset="80%" stop-color="#00e1ff" stop-opacity="0" />
      <stop offset="95%" stop-color="#4de8ff" stop-opacity="0.5" />
      <stop offset="100%" stop-color="#a8f5ff" stop-opacity="0.9" />
    </radialGradient>

    <!-- Moon Gradients -->
    <linearGradient id="moonGrad" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#e2e8f0" />
      <stop offset="20%" stop-color="#cbd5e1" />
      <stop offset="50%" stop-color="#94a3b8" />
      <stop offset="85%" stop-color="#475569" />
      <stop offset="100%" stop-color="#1e293b" />
    </linearGradient>

    <radialGradient id="craterDark" cx="40%" cy="40%" r="60%">
      <stop offset="0%" stop-color="#334155" />
      <stop offset="70%" stop-color="#1e293b" />
      <stop offset="100%" stop-color="#0f172a" />
    </radialGradient>

    <radialGradient id="craterShallow" cx="35%" cy="35%" r="60%">
      <stop offset="0%" stop-color="#64748b" />
      <stop offset="80%" stop-color="#475569" />
      <stop offset="100%" stop-color="#334155" />
    </radialGradient>

    <!-- Suit & Helmet Gradients -->
    <linearGradient id="suitWhite" x1="20%" y1="0%" x2="80%" y2="100%">
      <stop offset="0%" stop-color="#ffffff" />
      <stop offset="45%" stop-color="#f1f5f9" />
      <stop offset="80%" stop-color="#cbd5e1" />
      <stop offset="100%" stop-color="#94a3b8" />
    </linearGradient>

    <linearGradient id="suitShadow" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#64748b" />
      <stop offset="100%" stop-color="#334155" />
    </linearGradient>

    <linearGradient id="suitOrange" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#ff7e1d" />
      <stop offset="50%" stop-color="#ff521d" />
      <stop offset="100%" stop-color="#d93806" />
    </linearGradient>

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

    <!-- Golden/Rainbow Iridescent Visor -->
    <linearGradient id="visorGrad" x1="15%" y1="10%" x2="85%" y2="90%">
      <stop offset="0%" stop-color="#ffd21f" />
      <stop offset="25%" stop-color="#ff3b8d" />
      <stop offset="55%" stop-color="#9b2cfa" />
      <stop offset="80%" stop-color="#18227c" />
      <stop offset="100%" stop-color="#081033" />
    </linearGradient>

    <linearGradient id="visorGleam" x1="0%" y1="0%" x2="100%" y2="80%">
      <stop offset="0%" stop-color="#ffffff" stop-opacity="0.8" />
      <stop offset="25%" stop-color="#ffffff" stop-opacity="0.2" />
      <stop offset="50%" stop-color="#ffffff" stop-opacity="0" />
    </linearGradient>

    <!-- Skateboard Gradients -->
    <linearGradient id="deckGrad" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#ec4899" />
      <stop offset="30%" stop-color="#8b5cf6" />
      <stop offset="70%" stop-color="#3b82f6" />
      <stop offset="100%" stop-color="#06b6d4" />
    </linearGradient>

    <linearGradient id="deckEdge" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#222" />
      <stop offset="100%" stop-color="#111" />
    </linearGradient>

    <radialGradient id="neonWheel" cx="35%" cy="35%" r="60%">
      <stop offset="0%" stop-color="#a7f3d0" />
      <stop offset="40%" stop-color="#10b981" />
      <stop offset="80%" stop-color="#047857" />
      <stop offset="100%" stop-color="#064e3b" />
    </radialGradient>

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

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

    <filter id="sunflare" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="12" result="blur" />
      <feMerge>
        <feMergeNode in="blur" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
  </defs>

  <!-- ==================== BACKGROUND ==================== -->
  <!-- Deep Space Canvas -->
  <rect width="1200" height="800" fill="url(#spaceGlow)" />
  <rect width="1200" height="800" fill="url(#nebulaPink)" />
  <rect width="1200" height="800" fill="url(#nebulaCyan)" />

  <!-- Starfield (Distant small, bright medium, twinkling large) -->
  <g id="stars" fill="#fff">
    <!-- Small subtle stars -->
    <circle cx="80" cy="120" r="1" opacity="0.6" />
    <circle cx="140" cy="280" r="1.5" opacity="0.8" />
    <circle cx="210" cy="90" r="1" opacity="0.5" />
    <circle cx="290" cy="190" r="2" opacity="0.9" />
    <circle cx="340" cy="80" r="1" opacity="0.4" />
    <circle cx="430" cy="220" r="1.5" opacity="0.7" />
    <circle cx="560" cy="70" r="2.5" opacity="0.9" />
    <circle cx="680" cy="140" r="1" opacity="0.5" />
    <circle cx="730" cy="60" r="1.5" opacity="0.8" />
    <circle cx="810" cy="210" r="2" opacity="0.85" />
    <circle cx="950" cy="90" r="1" opacity="0.6" />
    <circle cx="1020" cy="240" r="1.5" opacity="0.7" />
    <circle cx="1110" cy="130" r="2" opacity="0.9" />
    <circle cx="1160" cy="300" r="1" opacity="0.5" />
    <circle cx="90" cy="400" r="1.5" opacity="0.7" />
    <circle cx="1130" cy="450" r="1" opacity="0.6" />
    <circle cx="60" cy="220" r="2" opacity="0.8" />
    <circle cx="480" cy="160" r="1" opacity="0.5" />
    <circle cx="870" cy="120" r="1.5" opacity="0.6" />
    <circle cx="1040" cy="70" r="2.5" opacity="0.8" />
    <circle cx="20" cy="80" r="1" opacity="0.4" />
    <circle cx="610" cy="230" r="1" opacity="0.4" />
    <circle cx="390" cy="290" r="1.5" opacity="0.6" />
    <!-- Tinted glowing stars -->
    <circle cx="180" cy="160" r="2" fill="#7bf0ff" opacity="0.9" />
    <circle cx="510" cy="110" r="2" fill="#ffb8eb" opacity="0.9" />
    <circle cx="770" cy="170" r="2.5" fill="#ffe17d" opacity="0.9" />
    <circle cx="890" cy="260" r="1.5" fill="#7bf0ff" opacity="0.8" />
    <!-- 4-Point Star Twinkles -->
    <path d="M290,190 Q290,180 290,175 Q290,180 290,190 Q295,190 305,190 Q295,190 290,190 Q290,195 290,205 Q290,195 290,190 Q285,190 275,190 Q285,190 290,190 Z" fill="#ffffff" opacity="0.8"/>
    <path d="M770,170 Q770,158 770,150 Q770,158 770,170 Q778,170 790,170 Q778,170 770,170 Q770,178 770,190 Q770,178 770,170 Q762,170 750,170 Q762,170 770,170 Z" fill="#ffeaa7" opacity="0.85"/>
    <path d="M1110,130 Q1110,122 1110,115 Q1110,122 1110,130 Q1115,130 1125,130 Q1115,130 1110,130 Q1110,135 1110,145 Q1110,135 1110,130 Q1105,130 1095,130 Q1105,130 1110,130 Z" fill="#a8f5ff" opacity="0.9"/>
  </g>

  <!-- Distant Planet / Earth with Atmosphere Glow -->
  <g id="distant-earth" transform="translate(920, 130)">
    <!-- Atmospheric outer bloom -->
    <circle cx="70" cy="70" r="82" fill="#38bdf8" opacity="0.15" filter="url(#sunflare)" />
    <!-- Main Planet Sphere -->
    <circle cx="70" cy="70" r="70" fill="url(#earthGrad)" />
    <!-- Earth Continents (Stylized vector swirls) -->
    <path d="M45,25 C55,18 70,22 80,30 C90,38 88,52 98,58 C108,64 122,50 128,62 C134,74 125,88 115,92 C105,96 100,110 88,118 C78,124 62,130 52,125 C45,115 50,102 46,92 C42,82 30,80 25,70 C18,58 20,42 32,32 C38,28 40,28 45,25 Z" fill="#22c55e" opacity="0.6" />
    <path d="M72,40 C85,38 95,48 90,62 C85,72 72,78 68,90 C62,88 58,78 62,68 C65,58 68,48 72,40 Z" fill="#15803d" opacity="0.7" />
    <path d="M100,85 C112,82 120,95 114,105 C108,112 98,110 96,100 C95,92 98,88 100,85 Z" fill="#22c55e" opacity="0.5" />
    <!-- Swirling Clouds -->
    <path d="M22,55 Q50,45 75,58 T125,65 Q135,70 130,80 Q115,75 90,70 T35,75 Q20,70 22,55 Z" fill="#ffffff" opacity="0.4" />
    <path d="M40,95 Q70,82 95,95 T132,102 Q125,112 105,108 T55,105 Q35,110 40,95 Z" fill="#ffffff" opacity="0.35" />
    <circle cx="70" cy="70" r="70" fill="url(#earthAtmo)" />
    <!-- Shadow side of Earth for 3D sphere look -->
    <path d="M70,0 A70,70 0 0,1 140,70 A70,70 0 0,1 70,140 A70,75 0 0,0 70,0 Z" fill="#030712" opacity="0.55" />
  </g>

  <!-- Distant Constellation/Milkyway particles -->
  <g opacity="0.3" stroke="#a5b4fc" stroke-width="0.5" stroke-dasharray="3,6" fill="none">
    <polyline points="120,180 180,160 290,190 340,240 430,220" />
    <polyline points="680,140 730,60 770,170 810,210" />
  </g>

  <!-- ==================== MOON SURFACE (LUNAR LANDSCAPE) ==================== -->
  <!-- Dynamic, curved moon horizon functioning as a skate halfpipe/bowl -->
  <g id="moon-ground">
    <!-- Deep Moon Base Horizon -->
    <path d="M-50,480 Q250,560 550,520 T1150,460 Q1220,450 1280,440 L1280,850 L-50,850 Z" fill="url(#moonGrad)" />

    <!-- Foreground Skate Crater Lip (Smooth curved transition) -->
    <path d="M-20,530 C180,520 320,630 620,590 C880,555 1020,490 1250,540 L1250,850 L-20,850 Z" fill="#64748b" opacity="0.6" />
    <path d="M-20,580 C220,570 380,680 680,630 C920,590 1060,540 1250,600 L1250,850 L-20,850 Z" fill="#334155" opacity="0.8" />
    <path d="M-20,640 C280,630 450,730 750,670 C980,620 1100,600 1250,660 L1250,850 L-20,850 Z" fill="#1e293b" />

    <!-- Detailed Moon Craters (Cast realistic ellipse shadows) -->
    <!-- Large Crater Left Background -->
    <g transform="translate(180, 530) rotate(-8)">
      <ellipse cx="60" cy="22" rx="60" ry="22" fill="#475569" />
      <ellipse cx="60" cy="24" rx="56" ry="19" fill="url(#craterDark)" />
      <ellipse cx="54" cy="26" rx="46" ry="14" fill="#0f172a" />
      <path d="M10,22 A54,18 0 0,0 112,24 A58,20 0 0,1 8,22 Z" fill="#94a3b8" opacity="0.7" />
    </g>

    <!-- Medium Crater Right -->
    <g transform="translate(860, 510) rotate(6)">
      <ellipse cx="45" cy="16" rx="45" ry="16" fill="#475569" />
      <ellipse cx="45" cy="18" rx="42" ry="14" fill="url(#craterDark)" />
      <ellipse cx="40" cy="20" rx="34" ry="10" fill="#0f172a" />
      <path d="M6,17 A40,13 0 0,0 84,18 A44,15 0 0,1 6,17 Z" fill="#94a3b8" opacity="0.6" />
    </g>

    <!-- Small Craters scattered along the skate slope -->
    <g transform="translate(420, 560) scale(0.65) rotate(-3)">
      <ellipse cx="30" cy="10" rx="30" ry="10" fill="#334155" />
      <ellipse cx="28" cy="11" rx="26" ry="8" fill="#0f172a" />
      <path d="M4,10 A26,8 0 0,0 54,11 A28,9 0 0,1 4,10 Z" fill="#cbd5e1" opacity="0.6" />
    </g>
    <g transform="translate(680, 580) scale(0.8) rotate(4)">
      <ellipse cx="30" cy="10" rx="30" ry="10" fill="#334155" />
      <ellipse cx="28" cy="11" rx="26" ry="8" fill="#0f172a" />
      <path d="M4,10 A26,8 0 0,0 54,11 A28,9 0 0,1 4,10 Z" fill="#94a3b8" opacity="0.5" />
    </g>
    <g transform="translate(1040, 590) scale(1) rotate(12)">
      <ellipse cx="35" cy="12" rx="35" ry="12" fill="#1e293b" />
      <ellipse cx="33" cy="13" rx="30" ry="9" fill="#020617" />
      <path d="M5,12 A30,9 0 0,0 62,13 A33,10 0 0,1 5,12 Z" fill="#64748b" opacity="0.5" />
    </g>

    <!-- Foreground Crater Bottom Left -->
    <g transform="translate(120, 690) scale(1.4) rotate(-5)">
      <ellipse cx="50" cy="16" rx="50" ry="16" fill="#1e293b" />
      <ellipse cx="48" cy="18" rx="45" ry="13" fill="#020617" />
      <path d="M5,17 A45,13 0 0,0 92,18 A48,15 0 0,1 5,17 Z" fill="#475569" opacity="0.6" />
    </g>

    <!-- Apollo Style Lunar Flag planted in the background (Cat-themed!) -->
    <g id="cat-flag" transform="translate(260, 430)">
      <!-- Flagpole -->
      <line x1="0" y1="0" x2="0" y2="110" stroke="#cbd5e1" stroke-width="3" />
      <line x1="0" y1="1" x2="65" y2="1" stroke="#cbd5e1" stroke-width="2.5" />
      <!-- Gold Finial Sphere -->
      <circle cx="0" cy="0" r="3.5" fill="#facc15" />
      <!-- Flag Fabric (Slight lunar wave) -->
      <path d="M0,2 Q18,-3 35,3 T70,1 Q70,25 70,42 Q52,38 35,44 T0,40 Z" fill="#f43f5e" />
      <!-- Fish Bone / Paw Print Icon on flag -->
      <path d="M28,21 C28,17 38,17 38,21 C38,25 28,25 28,21 Z" fill="#ffffff" />
      <circle cx="27" cy="16" r="2.5" fill="#ffffff" />
      <circle cx="33" cy="14" r="2.5" fill="#ffffff" />
      <circle cx="39" cy="16" r="2.5" fill="#ffffff" />
      <!-- Flag shadow on ground -->
      <ellipse cx="15" cy="112" rx="20" ry="4" fill="#0f172a" opacity="0.6" />
    </g>

    <!-- Moon Dust Spray / Particles kicked up by board -->
    <g id="moon-dust" fill="#cbd5e1">
      <ellipse cx="380" cy="550" rx="8" ry="4" opacity="0.4" transform="rotate(-15, 380, 550)" />
      <ellipse cx="350" cy="535" rx="14" ry="6" opacity="0.3" transform="rotate(-25, 350, 535)" />
      <circle cx="320" cy="510" r="3.5" opacity="0.5" />
      <circle cx="335" cy="490" r="2" opacity="0.6" />
      <circle cx="300" cy="480" r="1.5" opacity="0.4" />
      <circle cx="280" cy="520" r="3" opacity="0.3" />
      <circle cx="360" cy="470" r="2.5" opacity="0.4" />
      <circle cx="410" cy="530" r="2" opacity="0.5" />
      <ellipse cx="440" cy="565" rx="25" ry="7" opacity="0.25" transform="rotate(-10, 440, 565)" />
    </g>

    <!-- Skate Action Shadow cast onto lunar surface -->
    <ellipse cx="580" cy="560" rx="140" ry="26" fill="#080c16" opacity="0.65" filter="url(#softGlow)" transform="rotate(-10, 580, 560)" />
  </g>

  <!-- ==================== SKATEBOARDING ASTRONAUT CAT ==================== -->
  <!-- Entire Character Assembly tilted dynamically mid-air / carving a turn -->
  <g id="skater-cat" transform="translate(380, 80) rotate(-11 250 350)">

    <!-- ========== JETPACK / LIFE SUPPORT BACKPACK ========== -->
    <g id="backpack" transform="translate(185, 235)">
      <!-- Main Oxygen Tank Frame -->
      <rect x="0" y="0" width="75" height="135" rx="20" fill="#94a3b8" stroke="#475569" stroke-width="3" />
      <rect x="5" y="5" width="65" height="125" rx="16" fill="url(#suitWhite)" />
      <!-- Twin Pressure Cylinders -->
      <rect x="12" y="15" width="22" height="95" rx="11" fill="#e2e8f0" stroke="#cbd5e1" stroke-width="2" />
      <rect x="40" y="15" width="22" height="95" rx="11" fill="#e2e8f0" stroke="#cbd5e1" stroke-width="2" />
      <!-- Cyberpunk Status Gauges & Neon Lights -->
      <circle cx="23" cy="30" r="5" fill="#22c55e" filter="url(#softGlow)" />
      <circle cx="51" cy="30" r="5" fill="#00f0ff" filter="url(#softGlow)" />
      <rect x="16" y="50" width="14" height="40" rx="3" fill="#0284c7" opacity="0.7" />
      <rect x="44" y="50" width="14" height="40" rx="3" fill="#0284c7" opacity="0.7" />
      <!-- Hazard Stripes Accent Bar -->
      <rect x="14" y="102" width="46" height="8" fill="url(#suitOrange)" rx="2" />
      <!-- Thruster Nozzle at Base (Puffing cool thruster flame!) -->
      <path d="M22,135 L16,148 L32,148 Z" fill="#475569" />
      <path d="M52,135 L46,148 L62,148 Z" fill="#475569" />
      <!-- Jet Thruster Particle Plume -->
      <ellipse cx="24" cy="158" rx="6" ry="12" fill="#38bdf8" opacity="0.8" filter="url(#softGlow)" />
      <ellipse cx="24" cy="155" rx="3" ry="7" fill="#ffffff" />
      <ellipse cx="54" cy="158" rx="6" ry="12" fill="#38bdf8" opacity="0.8" filter="url(#softGlow)" />
      <ellipse cx="54" cy="155" rx="3" ry="7" fill="#ffffff" />
    </g>

    <!-- Flexible Tail in Articulated Space Suit Sleeve (Flowing behind with cat balance) -->
    <g id="suit-tail">
      <!-- Tail Shadow/Underlayer -->
      <path d="M200,340 C140,350 90,320 60,250 C40,200 70,150 110,140 C125,135 135,145 125,160 C95,170 80,205 95,240 C115,285 150,295 195,305 Z" fill="#64748b" opacity="0.4" />
      <!-- Main Segmented White Tail Suit -->
      <path d="M205,335 C145,345 95,315 65,245 C45,195 75,145 115,135 C125,132 133,142 124,152 C98,162 82,198 98,235 C118,280 155,290 200,300 Z" fill="url(#suitWhite)" stroke="#94a3b8" stroke-width="2.5" />
      <!-- Ribbed Articulation Joint Rings on Tail -->
      <path d="M165,307 Q175,322 170,332" stroke="url(#suitOrange)" stroke-width="4" stroke-linecap="round" fill="none" />
      <path d="M125,280 Q138,292 128,307" stroke="#0284c7" stroke-width="4" stroke-linecap="round" fill="none" />
      <path d="M92,238 Q108,245 102,262" stroke="url(#suitOrange)" stroke-width="4" stroke-linecap="round" fill="none" />
      <path d="M72,192 Q90,195 86,212" stroke="#0284c7" stroke-width="4" stroke-linecap="round" fill="none" />
      <!-- Golden Tip Ring / Thruster Node -->
      <circle cx="120" cy="142" r="8" fill="#f59e0b" stroke="#d97706" stroke-width="2" />
      <circle cx="120" cy="142" r="3.5" fill="#fef08a" />
    </g>

    <!-- ========== BACK LEG & PAW (Deep Stance on Board) ========== -->
    <g id="back-leg" transform="translate(195, 330)">
      <!-- Upper Thigh -->
      <ellipse cx="40" cy="30" rx="36" ry="24" fill="url(#suitWhite)" transform="rotate(35 40 30)" stroke="#94a3b8" stroke-width="1.5" />
      <!-- Lower Leg & Knee Patch -->
      <path d="M35,40 L15,100 L45,105 L65,48 Z" fill="url(#suitWhite)" />
      <!-- Ribbed Joint Rings -->
      <line x1="28" y1="62" x2="52" y2="67" stroke="url(#suitOrange)" stroke-width="4" stroke-linecap="round" />
      <line x1="23" y1="75" x2="47" y2="80" stroke="#0284c7" stroke-width="4" stroke-linecap="round" />
      <line x1="18" y1="88" x2="42" y2="93" stroke="url(#suitOrange)" stroke-width="4" stroke-linecap="round" />
      <!-- Back Space Boot (Gripping the Kicktail) -->
      <g transform="translate(5, 95) rotate(-5)">
        <path d="M-8,12 C-8,5 2,0 15,0 L38,3 C48,4 52,12 50,22 L-2,22 C-6,22 -8,18 -8,12 Z" fill="#334155" />
        <!-- Cyan Neon Magnetic Sole -->
        <rect x="-6" y="20" width="56" height="7" rx="3" fill="#22d3ee" filter="url(#softGlow)" />
        <rect x="-4" y="22" width="52" height="3" rx="1.5" fill="#ffffff" />
        <!-- Boot Fastener Buckles -->
        <rect x="8" y="4" width="8" height="12" rx="2" fill="#cbd5e1" />
        <rect x="24" y="5" width="8" height="12" rx="2" fill="#cbd5e1" />
      </g>
    </g>

    <!-- ========== SUIT TORSO (Puffy Astronaut Body) ========== -->
    <g id="torso">
      <!-- Main Pressure Suit Body -->
      <ellipse cx="280" cy="285" rx="72" ry="85" fill="url(#suitWhite)" stroke="#94a3b8" stroke-width="2" />
      <!-- Torso Side Shading for Roundness -->
      <path d="M225,250 C215,285 225,325 245,350 C230,320 225,275 235,240 Z" fill="#64748b" opacity="0.3" />
      <!-- Blue & Red Mission Chest Straps -->
      <path d="M245,215 Q285,250 310,340" stroke="#0284c7" stroke-width="7" fill="none" stroke-linecap="round" opacity="0.9" />
      <path d="M315,220 Q280,265 250,345" stroke="#0284c7" stroke-width="7" fill="none" stroke-linecap="round" opacity="0.9" />
      <!-- Horizontal Harness Band -->
      <path d="M220,290 Q275,310 340,285" stroke="#0369a1" stroke-width="6" fill="none" />
      <!-- Chest Control Module (Life Support Console) -->
      <rect x="255" y="250" width="50" height="42" rx="7" fill="#334155" stroke="#475569" stroke-width="2" />
      <circle cx="270" cy="265" r="5" fill="#ef4444" filter="url(#softGlow)" />
      <circle cx="288" cy="265" r="5" fill="#22c55e" filter="url(#softGlow)" />
      <!-- Digital Interface / Gauge Meter -->
      <rect x="264" y="276" width="32" height="8" rx="2" fill="#0f172a" />
      <rect x="266" y="278" width="18" height="4" rx="1" fill="#38bdf8" />
      <!-- NASA / Apollo Style Cat Mission Patch on Shoulder -->
      <g transform="translate(318, 235) rotate(15) scale(0.85)">
        <ellipse cx="16" cy="16" rx="16" ry="14" fill="#1e3a8a" stroke="#ffffff" stroke-width="1.5" />
        <circle cx="16" cy="16" r="10" fill="#dc2626" />
        <!-- Vector Cat Head Silhouette on patch -->
        <polygon points="11,18 13,11 16,14 19,11 21,18" fill="#ffffff" />
        <path d="M6,14 Q16,8 26,14" stroke="#facc15" stroke-width="1.5" fill="none" />
      </g>
    </g>

    <!-- ========== FRONT LEG & PAW (Forward Stance, Shock Absorbed) ========== -->
    <g id="front-leg" transform="translate(290, 310)">
      <!-- Thigh -->
      <ellipse cx="35" cy="25" rx="34" ry="22" fill="url(#suitWhite)" transform="rotate(-15 35 25)" stroke="#94a3b8" stroke-width="1.5" />
      <!-- Shin -->
      <path d="M25,35 L48,110 L80,105 L58,30 Z" fill="url(#suitWhite)" />
      <!-- Ribbed Joint Accordion Bands -->
      <line x1="33" y1="58" x2="59" y2="52" stroke="url(#suitOrange)" stroke-width="4" stroke-linecap="round" />
      <line x1="38" y1="72" x2="64" y2="66" stroke="#0284c7" stroke-width="4" stroke-linecap="round" />
      <line x1="43" y1="86" x2="69" y2="80" stroke="url(#suitOrange)" stroke-width="4" stroke-linecap="round" />
      <!-- Front Space Boot (Locked onto front bolts) -->
      <g transform="translate(42, 102) rotate(12)">
        <path d="M-6,14 C-6,6 4,0 18,0 L42,2 C52,4 56,12 53,24 L-2,24 C-5,24 -6,19 -6,14 Z" fill="#334155" />
        <!-- Cyan Glowing Magnetic Grip Sole -->
        <rect x="-4" y="21" width="58" height="7" rx="3" fill="#22d3ee" filter="url(#softGlow)" />
        <rect x="-2" y="23" width="54" height="3" rx="1.5" fill="#ffffff" />
        <!-- Boot Buckles -->
        <rect x="12" y="5" width="8" height="12" rx="2" fill="#cbd5e1" />
        <rect x="28" y="6" width="8" height="12" rx="2" fill="#cbd5e1" />
      </g>
    </g>

    <!-- ========== BACK ARM (Carving balance, held backwards) ========== -->
    <g id="back-arm">
      <!-- Upper Arm & Shoulder -->
      <path d="M230,240 C185,245 155,210 130,195 C120,188 128,175 140,180 C165,190 190,215 225,222 Z" fill="url(#suitWhite)" stroke="#94a3b8" stroke-width="2" />
      <!-- Glove Cuff Ring -->
      <ellipse cx="132" cy="188" rx="8" ry="14" fill="url(#suitOrange)" transform="rotate(-30 132 188)" />
      <!-- Spacesuit Padded Cat Glove (4 padded claw fingers spread for balance) -->
      <g transform="translate(120, 178) rotate(-25)">
        <path d="M-2,6 C-10,2 -18,-4 -15,-12 C-13,-18 -4,-12 2,-6 L12,4 Z" fill="#475569" />
        <ellipse cx="-14" cy="-10" rx="4.5" ry="3" fill="#94a3b8" />
        <ellipse cx="-8" cy="-15" rx="4.5" ry="3" fill="#94a3b8" />
        <ellipse cx="-1" cy="-17" rx="4" ry="3" fill="#94a3b8" />
        <ellipse cx="6" cy="-13" rx="4" ry="3" fill="#94a3b8" />
      </g>
    </g>

    <!-- ========== ASTRONAUT CAT HELMET & HEAD ========== -->
    <g id="helmet-assembly" transform="translate(295, 150)">
      <!-- Oxygen Supply Tubes connected to Helmet Base -->
      <path d="M-85,110 C-110,130 -80,180 -55,140" fill="none" stroke="#0284c7" stroke-width="9" stroke-linecap="round" />
      <path d="M-85,110 C-110,130 -80,180 -55,140" fill="none" stroke="#38bdf8" stroke-width="4" stroke-linecap="round" />
      <path d="M-70,125 C-90,145 -65,190 -40,150" fill="none" stroke="#f97316" stroke-width="7" stroke-linecap="round" />

      <!-- Helmet Neck Collar Ring (Heavy-duty anodized metal) -->
      <ellipse cx="0" cy="70" rx="68" ry="20" fill="#475569" stroke="#334155" stroke-width="2" />
      <ellipse cx="0" cy="68" rx="62" ry="16" fill="#94a3b8" />
      <ellipse cx="0" cy="66" rx="58" ry="13" fill="#0f172a" />
      <rect x="-25" y="66" width="50" height="9" rx="3" fill="url(#suitOrange)" />

      <!-- Giant Spherical Fishbowl Helmet Base -->
      <circle cx="0" cy="0" r="82" fill="#0f172a" />

      <!-- Cat Helmet Outer Shell with Sculpted Cat-Ear Enclosures -->
      <!-- Left Ear Pod (Outer Space Helmet Ear) -->
      <path d="M-68,-32 C-85,-75 -78,-108 -58,-122 C-38,-135 -24,-112 -18,-72 Z" fill="url(#suitWhite)" stroke="#94a3b8" stroke-width="2" />
      <path d="M-60,-38 C-74,-72 -68,-98 -52,-110 C-38,-120 -28,-102 -24,-70 Z" fill="#64748b" opacity="0.4" />
      <!-- Right Ear Pod -->
      <path d="M18,-72 C24,-112 38,-135 58,-122 C78,-108 85,-75 68,-32 Z" fill="url(#suitWhite)" stroke="#94a3b8" stroke-width="2" />
      <path d="M24,-70 C28,-102 38,-120 52,-110 C68,-98 74,-72 60,-38 Z" fill="#475569" opacity="0.3" />

      <!-- Main Outer White Helmet Contour -->
      <circle cx="0" cy="0" r="82" fill="none" stroke="url(#suitWhite)" stroke-width="8" />

      <!-- Helmet Interior: Cute Cool Cat Face Visible Behind Visor Glass! -->
      <g id="cat-face-inside">
        <!-- Fluffy Ginger/Golden Cat Head -->
        <ellipse cx="0" cy="8" rx="56" ry="48" fill="#f59e0b" />
        <!-- White Fur Cheeks and Muzzle -->
        <path d="M-38,20 C-42,38 -15,48 0,44 C15,48 42,38 38,20 C32,6 18,12 0,14 C-18,12 -32,6 -38,20 Z" fill="#ffffff" />
        <!-- Cat Inner Ears with Pink Fluff -->
        <polygon points="-46,-35 -38,-75 -18,-40" fill="#fb7185" />
        <polygon points="46,-35 38,-75 18,-40" fill="#fb7185" />
        <path d="M-36,-42 L-33,-62 L-24,-44" stroke="#ffffff" stroke-width="2" fill="none" />
        <path d="M36,-42 L33,-62 L24,-44" stroke="#ffffff" stroke-width="2" fill="none" />
        <!-- Forehead Tabby Stripes -->
        <path d="M0,-24 L0,-10 M-12,-20 L-6,-8 M12,-20 L6,-8" stroke="#b45309" stroke-width="3" stroke-linecap="round" />
        <!-- Big Joyful Expressive Anime Cat Eyes -->
        <!-- Left Eye (Winking joyfully in zero-G thrill!) -->
        <path d="M-32,0 Q-22,-14 -12,-1" stroke="#0f172a" stroke-width="5" stroke-linecap="round" fill="none" />
        <path d="M-34,-3 L-38,-8 M-12,-4 L-8,-10" stroke="#0f172a" stroke-width="2.5" stroke-linecap="round" />
        <!-- Right Eye (Wide, excited, reflecting outer space!) -->
        <ellipse cx="22" cy="-2" rx="14" ry="16" fill="#0f172a" />
        <ellipse cx="22" cy="-2" rx="12" ry="14" fill="#0284c7" />
        <ellipse cx="22" cy="-2" rx="7" ry="12" fill="#082f49" />
        <!-- Eye Star/Sparkle Highlights -->
        <circle cx="18" cy="-8" r="4.5" fill="#ffffff" />
        <circle cx="26" cy="4" r="2" fill="#ffffff" />
        <polygon points="24,-4 26,-1 29,-1 27,2 28,5 25,3 23,5 24,2 22,-1" fill="#7dd3fc" />
        <!-- Cute Pink Nose & Confident Smile -->
        <polygon points="-4,18 4,18 0,23" fill="#f43f5e" />
        <path d="M0,23 C-5,28 -12,28 -16,24 M0,23 C5,28 12,28 16,24" stroke="#0f172a" stroke-width="2.5" stroke-linecap="round" fill="none" />
        <!-- Whiskers poking out -->
        <line x1="-22" y1="20" x2="-48" y2="15" stroke="#ffffff" stroke-width="2" stroke-linecap="round" />
        <line x1="-24" y1="25" x2="-46" y2="28" stroke="#ffffff" stroke-width="2" stroke-linecap="round" />
        <line x1="22" y1="20" x2="48" y2="15" stroke="#ffffff" stroke-width="2" stroke-linecap="round" />
        <line x1="24" y1="25" x2="46" y2="28" stroke="#ffffff" stroke-width="2" stroke-linecap="round" />
        <!-- Cheerful Kawaii Blush -->
        <ellipse cx="-28" cy="14" rx="7" ry="4" fill="#fb7185" opacity="0.6" />
        <ellipse cx="28" cy="14" rx="7" ry="4" fill="#fb7185" opacity="0.6" />
        <!-- Little Astronaut Headset Mic -->
        <path d="M-40,8 Q-35,32 -10,32" stroke="#475569" stroke-width="3" fill="none" stroke-linecap="round" />
        <circle cx="-8" cy="32" r="3.5" fill="#22c55e" filter="url(#softGlow)" />
      </g>

      <!-- Iridescent Gold/Chrome Spherical Visor Overlay (Transparent reflective glass) -->
      <circle cx="0" cy="0" r="76" fill="url(#visorGrad)" opacity="0.4" style="mix-blend-mode: screen;" />

      <!-- Curved Sun Glare & Cosmic Horizon Reflection on Visor Glass -->
      <path d="M-52,-48 C-18,-72 25,-70 54,-42 C40,-56 10,-60 -25,-48 C-42,-40 -48,-32 -52,-48 Z" fill="#ffffff" opacity="0.75" />
      <ellipse cx="-35" cy="-25" rx="14" ry="7" fill="#ffffff" opacity="0.5" transform="rotate(-30 -35 -25)" />
      <!-- Curved bottom rim reflection of moon & skateboard deck neon -->
      <path d="M-48,42 C-20,62 25,60 52,38 C32,48 -5,48 -35,36 C-42,32 -45,36 -48,42 Z" fill="#00f0ff" opacity="0.45" filter="url(#softGlow)" />
    </g>

    <!-- ========== FRONT ARM (Posed forward in classic skate style) ========== -->
    <g id="front-arm">
      <!-- Upper Arm & Shoulder Joint -->
      <path d="M335,245 C380,250 415,225 440,210 C452,202 445,188 430,192 C400,202 375,220 330,225 Z" fill="url(#suitWhite)" stroke="#94a3b8" stroke-width="2" />
      <!-- Orange Anodized Wrist Cuff Ring -->
      <ellipse cx="438" cy="204" rx="8" ry="14" fill="url(#suitOrange)" transform="rotate(25 438 204)" />
      <!-- Padded Spacesuit Cat Paw (Making 'Peace' / Cool Skate Gesture) -->
      <g transform="translate(444, 196) rotate(18)">
        <path d="M0,0 C8,-6 18,-4 22,2 C24,6 20,12 14,14 L2,10 Z" fill="#475569" />
        <!-- Padded Glove Finger Segments -->
        <rect x="18" y="-6" width="12" height="6" rx="3" fill="#cbd5e1" transform="rotate(-30 18 -6)" />
        <rect x="20" y="2" width="14" height="6" rx="3" fill="#cbd5e1" transform="rotate(-5 20 2)" />
        <rect x="14" y="8" width="11" height="5" rx="2.5" fill="#94a3b8" transform="rotate(15 14 8)" />
        <!-- Palm Grip Pad -->
        <circle cx="8" cy="4" r="5" fill="#1e293b" />
      </g>
    </g>

    <!-- ==================== THE SKATEBOARD (CYBERPUNK MOON CRUISER) ==================== -->
    <g id="skateboard" transform="translate(140, 440) rotate(8)">
      <!-- Board Top Grip Tape (Perforated space-grip texture with laser pattern) -->
      <!-- Skateboard Deck Side Edge Profile -->
      <path d="M-25,12 C20,10 70,22 170,22 C270,22 330,10 375,-8 L378,2 C330,20 270,32 170,32 C70,32 20,20 -22,22 Z" fill="url(#deckEdge)" />

      <!-- Deck Main Graphic Bottom / Face -->
      <path d="M-28,8 C20,6 70,18 170,18 C270,18 330,6 380,-12 C384,-8 382,2 374,6 C328,24 268,36 170,36 C72,36 22,24 -24,18 C-30,14 -32,10 -28,8 Z" fill="url(#deckGrad)" stroke="#ec4899" stroke-width="1.5" />

      <!-- Skateboard Top Deck Surface (Where paws stand) -->
      <path d="M-25,6 C20,4 70,16 170,16 C270,16 330,4 375,-14 C365,-18 340,-12 280,-4 C190,8 120,4 -10,-8 C-20,-6 -25,0 -25,6 Z" fill="#18181b" />

      <!-- Griptape Laser Grid / Graphic Accent Lines (Synthwave styling) -->
      <path d="M30,7 L70,14 M120,15 L180,15 M220,14 L270,8 M310,2 L340,-5" stroke="#00f0ff" stroke-width="2" stroke-linecap="round" opacity="0.8" />
      <!-- Iconic Neon Cat Paw Logo on center of deck grip -->
      <ellipse cx="170" cy="14" rx="8" ry="5" fill="#ff2a8d" filter="url(#softGlow)" />
      <circle cx="163" cy="7" r="2" fill="#ff2a8d" />
      <circle cx="168" cy="5" r="2.2" fill="#ff2a8d" />
      <circle cx="174" cy="6" r="2.2" fill="#ff2a8d" />
      <circle cx="178" cy="8" r="1.8" fill="#ff2a8d" />

      <!-- Underglow Neon Light Tube Beneath Deck -->
      <path d="M0,24 C60,26 120,34 180,34 C240,34 300,24 350,12" stroke="#00f0ff" stroke-width="6" fill="none" opacity="0.8" filter="url(#neonGlow)" />
      <path d="M0,24 C60,26 120,34 180,34 C240,34 300,24 350,12" stroke="#ffffff" stroke-width="2" fill="none" opacity="0.9" />

      <!-- Skateboard Trucks (Polished chrome metal suspension) -->
      <!-- Back Truck -->
      <g transform="translate(50, 26)">
        <polygon points="0,0 24,0 18,16 6,16" fill="#475569" />
        <rect x="2" y="14" width="20" height="6" rx="2" fill="#94a3b8" />
        <circle cx="12" cy="17" r="3.5" fill="#f59e0b" /> <!-- Kingpin & Bushing -->
        <rect x="-8" y="18" width="40" height="4" rx="2" fill="#cbd5e1" /> <!-- Axle -->
      </g>
      <!-- Front Truck -->
      <g transform="translate(280, 20)">
        <polygon points="0,0 24,0 18,16 6,16" fill="#475569" />
        <rect x="2" y="14" width="20" height="6" rx="2" fill="#94a3b8" />
        <circle cx="12" cy="17" r="3.5" fill="#f59e0b" />
        <rect x="-8" y="18" width="40" height="4" rx="2" fill="#cbd5e1" />
      </g>

      <!-- Wheels (High-speed translucent luminous neon green urethane) -->
      <!-- Back Wheel Pair -->
      <g transform="translate(42, 38)">
        <!-- Outer Left Wheel -->
        <ellipse cx="0" cy="8" rx="14" ry="18" fill="url(#neonWheel)" filter="url(#softGlow)" />
        <ellipse cx="0" cy="8" rx="7" ry="10" fill="#064e3b" />
        <!-- Chrome High-Speed ABEC Bearing Core -->
        <ellipse cx="0" cy="8" rx="4" ry="5" fill="#f8fafc" />
        <!-- Inner Right Wheel (Offset 3D perspective) -->
        <ellipse cx="32" cy="14" rx="12" ry="15" fill="url(#neonWheel)" opacity="0.8" />
        <ellipse cx="32" cy="14" rx="6" ry="8" fill="#064e3b" />
      </g>

      <!-- Front Wheel Pair -->
      <g transform="translate(272, 32)">
        <!-- Outer Left Wheel -->
        <ellipse cx="0" cy="8" rx="14" ry="18" fill="url(#neonWheel)" filter="url(#softGlow)" />
        <ellipse cx="0" cy="8" rx="7" ry="10" fill="#064e3b" />
        <ellipse cx="0" cy="8" rx="4" ry="5" fill="#f8fafc" />
        <!-- Inner Right Wheel -->
        <ellipse cx="32" cy="14" rx="12" ry="15" fill="url(#neonWheel)" opacity="0.8" />
        <ellipse cx="32" cy="14" rx="6" ry="8" fill="#064e3b" />
      </g>

      <!-- Wheel Speed Blur Sparks (Low gravity kinetic motion!) -->
      <line x1="30" y1="52" x2="-10" y2="48" stroke="#34d399" stroke-width="2.5" stroke-linecap="round" opacity="0.7" />
      <line x1="260" y1="46" x2="210" y2="44" stroke="#34d399" stroke-width="2.5" stroke-linecap="round" opacity="0.7" />
      <line x1="40" y1="42" x2="0" y2="40" stroke="#00f0ff" stroke-width="1.5" stroke-linecap="round" opacity="0.6" />
    </g>
  </g>

  <!-- ==================== FLOATING PROPS & ATMOSPHERE ==================== -->
  <!-- Cute Astronaut Accessories in Zero-G (Floating Fish Treat in Bubble) -->
  <g transform="translate(860, 360)">
    <!-- Liquid bubble -->
    <circle cx="0" cy="0" r="28" fill="#38bdf8" opacity="0.2" filter="url(#softGlow)" />
    <circle cx="0" cy="0" r="26" fill="none" stroke="#7dd3fc" stroke-width="2" opacity="0.6" />
    <ellipse cx="-8" cy="-10" rx="8" ry="4" fill="#ffffff" opacity="0.5" transform="rotate(-30 -8 -10)" />
    <!-- Golden Fish Floating Inside -->
    <g transform="rotate(15) scale(0.9)">
      <path d="M-14,0 C-8,-10 10,-8 16,0 C10,8 -8,10 -14,0 Z" fill="#fb923c" />
      <polygon points="14,0 24,-8 22,0 24,8" fill="#f97316" />
      <circle cx="-6" cy="-2" r="2" fill="#0f172a" />
      <circle cx="-7" cy="-3" r="0.7" fill="#ffffff" />
    </g>
  </g>

  <!-- A small floating crater pebble in low gravity -->
  <g transform="translate(240, 480) rotate(45)">
    <polygon points="0,0 12,3 18,14 8,20 -2,12" fill="#64748b" />
    <polygon points="0,0 12,3 8,10 -2,12" fill="#94a3b8" />
  </g>
  <g transform="translate(790, 440) rotate(20) scale(0.7)">
    <polygon points="0,0 10,2 14,10 6,15 -1,9" fill="#475569" />
    <polygon points="0,0 10,2 6,7 -1,9" fill="#64748b" />
  </g>
</svg>
</div>
</body>
</html>
Raw response
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Astronaut Cat Skateboarding on the Moon</title>
<style>
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  body {
    background: #060713;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  }
  .container {
    width: 100vw;
    height: 100vh;
    max-width: 1280px;
    max-height: 800px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  svg {
    width: 100%;
    height: 100%;
    max-height: 100vh;
    box-shadow: 0 10px 40px rgba(0,0,0,0.8);
  }
</style>
</head>
<body>
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800" width="100%" height="100%">
  <defs>
    <!-- Background Space Gradients -->
    <radialGradient id="spaceGlow" cx="50%" cy="30%" r="75%">
      <stop offset="0%" stop-color="#181336" />
      <stop offset="45%" stop-color="#0d0a21" />
      <stop offset="100%" stop-color="#04020a" />
    </radialGradient>

    <!-- Nebula Glows -->
    <radialGradient id="nebulaPink" cx="20%" cy="25%" r="40%">
      <stop offset="0%" stop-color="#ff2a8d" stop-opacity="0.25" />
      <stop offset="60%" stop-color="#9b11e0" stop-opacity="0.08" />
      <stop offset="100%" stop-color="#000" stop-opacity="0" />
    </radialGradient>
    
    <radialGradient id="nebulaCyan" cx="80%" cy="35%" r="45%">
      <stop offset="0%" stop-color="#00f0ff" stop-opacity="0.22" />
      <stop offset="50%" stop-color="#0051ff" stop-opacity="0.06" />
      <stop offset="100%" stop-color="#000" stop-opacity="0" />
    </radialGradient>

    <!-- Earth Gradients -->
    <radialGradient id="earthGrad" cx="35%" cy="35%" r="65%">
      <stop offset="0%" stop-color="#7be5ff" />
      <stop offset="25%" stop-color="#1b7fe2" />
      <stop offset="70%" stop-color="#0b2b6b" />
      <stop offset="100%" stop-color="#020a1c" />
    </radialGradient>

    <radialGradient id="earthAtmo" cx="50%" cy="50%" r="50%">
      <stop offset="80%" stop-color="#00e1ff" stop-opacity="0" />
      <stop offset="95%" stop-color="#4de8ff" stop-opacity="0.5" />
      <stop offset="100%" stop-color="#a8f5ff" stop-opacity="0.9" />
    </radialGradient>

    <!-- Moon Gradients -->
    <linearGradient id="moonGrad" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#e2e8f0" />
      <stop offset="20%" stop-color="#cbd5e1" />
      <stop offset="50%" stop-color="#94a3b8" />
      <stop offset="85%" stop-color="#475569" />
      <stop offset="100%" stop-color="#1e293b" />
    </linearGradient>

    <radialGradient id="craterDark" cx="40%" cy="40%" r="60%">
      <stop offset="0%" stop-color="#334155" />
      <stop offset="70%" stop-color="#1e293b" />
      <stop offset="100%" stop-color="#0f172a" />
    </radialGradient>

    <radialGradient id="craterShallow" cx="35%" cy="35%" r="60%">
      <stop offset="0%" stop-color="#64748b" />
      <stop offset="80%" stop-color="#475569" />
      <stop offset="100%" stop-color="#334155" />
    </radialGradient>

    <!-- Suit & Helmet Gradients -->
    <linearGradient id="suitWhite" x1="20%" y1="0%" x2="80%" y2="100%">
      <stop offset="0%" stop-color="#ffffff" />
      <stop offset="45%" stop-color="#f1f5f9" />
      <stop offset="80%" stop-color="#cbd5e1" />
      <stop offset="100%" stop-color="#94a3b8" />
    </linearGradient>

    <linearGradient id="suitShadow" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#64748b" />
      <stop offset="100%" stop-color="#334155" />
    </linearGradient>

    <linearGradient id="suitOrange" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#ff7e1d" />
      <stop offset="50%" stop-color="#ff521d" />
      <stop offset="100%" stop-color="#d93806" />
    </linearGradient>

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

    <!-- Golden/Rainbow Iridescent Visor -->
    <linearGradient id="visorGrad" x1="15%" y1="10%" x2="85%" y2="90%">
      <stop offset="0%" stop-color="#ffd21f" />
      <stop offset="25%" stop-color="#ff3b8d" />
      <stop offset="55%" stop-color="#9b2cfa" />
      <stop offset="80%" stop-color="#18227c" />
      <stop offset="100%" stop-color="#081033" />
    </linearGradient>

    <linearGradient id="visorGleam" x1="0%" y1="0%" x2="100%" y2="80%">
      <stop offset="0%" stop-color="#ffffff" stop-opacity="0.8" />
      <stop offset="25%" stop-color="#ffffff" stop-opacity="0.2" />
      <stop offset="50%" stop-color="#ffffff" stop-opacity="0" />
    </linearGradient>

    <!-- Skateboard Gradients -->
    <linearGradient id="deckGrad" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#ec4899" />
      <stop offset="30%" stop-color="#8b5cf6" />
      <stop offset="70%" stop-color="#3b82f6" />
      <stop offset="100%" stop-color="#06b6d4" />
    </linearGradient>

    <linearGradient id="deckEdge" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#222" />
      <stop offset="100%" stop-color="#111" />
    </linearGradient>

    <radialGradient id="neonWheel" cx="35%" cy="35%" r="60%">
      <stop offset="0%" stop-color="#a7f3d0" />
      <stop offset="40%" stop-color="#10b981" />
      <stop offset="80%" stop-color="#047857" />
      <stop offset="100%" stop-color="#064e3b" />
    </radialGradient>

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

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

    <filter id="sunflare" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="12" result="blur" />
      <feMerge>
        <feMergeNode in="blur" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
  </defs>

  <!-- ==================== BACKGROUND ==================== -->
  <!-- Deep Space Canvas -->
  <rect width="1200" height="800" fill="url(#spaceGlow)" />
  <rect width="1200" height="800" fill="url(#nebulaPink)" />
  <rect width="1200" height="800" fill="url(#nebulaCyan)" />

  <!-- Starfield (Distant small, bright medium, twinkling large) -->
  <g id="stars" fill="#fff">
    <!-- Small subtle stars -->
    <circle cx="80" cy="120" r="1" opacity="0.6" />
    <circle cx="140" cy="280" r="1.5" opacity="0.8" />
    <circle cx="210" cy="90" r="1" opacity="0.5" />
    <circle cx="290" cy="190" r="2" opacity="0.9" />
    <circle cx="340" cy="80" r="1" opacity="0.4" />
    <circle cx="430" cy="220" r="1.5" opacity="0.7" />
    <circle cx="560" cy="70" r="2.5" opacity="0.9" />
    <circle cx="680" cy="140" r="1" opacity="0.5" />
    <circle cx="730" cy="60" r="1.5" opacity="0.8" />
    <circle cx="810" cy="210" r="2" opacity="0.85" />
    <circle cx="950" cy="90" r="1" opacity="0.6" />
    <circle cx="1020" cy="240" r="1.5" opacity="0.7" />
    <circle cx="1110" cy="130" r="2" opacity="0.9" />
    <circle cx="1160" cy="300" r="1" opacity="0.5" />
    <circle cx="90" cy="400" r="1.5" opacity="0.7" />
    <circle cx="1130" cy="450" r="1" opacity="0.6" />
    <circle cx="60" cy="220" r="2" opacity="0.8" />
    <circle cx="480" cy="160" r="1" opacity="0.5" />
    <circle cx="870" cy="120" r="1.5" opacity="0.6" />
    <circle cx="1040" cy="70" r="2.5" opacity="0.8" />
    <circle cx="20" cy="80" r="1" opacity="0.4" />
    <circle cx="610" cy="230" r="1" opacity="0.4" />
    <circle cx="390" cy="290" r="1.5" opacity="0.6" />
    <!-- Tinted glowing stars -->
    <circle cx="180" cy="160" r="2" fill="#7bf0ff" opacity="0.9" />
    <circle cx="510" cy="110" r="2" fill="#ffb8eb" opacity="0.9" />
    <circle cx="770" cy="170" r="2.5" fill="#ffe17d" opacity="0.9" />
    <circle cx="890" cy="260" r="1.5" fill="#7bf0ff" opacity="0.8" />
    <!-- 4-Point Star Twinkles -->
    <path d="M290,190 Q290,180 290,175 Q290,180 290,190 Q295,190 305,190 Q295,190 290,190 Q290,195 290,205 Q290,195 290,190 Q285,190 275,190 Q285,190 290,190 Z" fill="#ffffff" opacity="0.8"/>
    <path d="M770,170 Q770,158 770,150 Q770,158 770,170 Q778,170 790,170 Q778,170 770,170 Q770,178 770,190 Q770,178 770,170 Q762,170 750,170 Q762,170 770,170 Z" fill="#ffeaa7" opacity="0.85"/>
    <path d="M1110,130 Q1110,122 1110,115 Q1110,122 1110,130 Q1115,130 1125,130 Q1115,130 1110,130 Q1110,135 1110,145 Q1110,135 1110,130 Q1105,130 1095,130 Q1105,130 1110,130 Z" fill="#a8f5ff" opacity="0.9"/>
  </g>

  <!-- Distant Planet / Earth with Atmosphere Glow -->
  <g id="distant-earth" transform="translate(920, 130)">
    <!-- Atmospheric outer bloom -->
    <circle cx="70" cy="70" r="82" fill="#38bdf8" opacity="0.15" filter="url(#sunflare)" />
    <!-- Main Planet Sphere -->
    <circle cx="70" cy="70" r="70" fill="url(#earthGrad)" />
    <!-- Earth Continents (Stylized vector swirls) -->
    <path d="M45,25 C55,18 70,22 80,30 C90,38 88,52 98,58 C108,64 122,50 128,62 C134,74 125,88 115,92 C105,96 100,110 88,118 C78,124 62,130 52,125 C45,115 50,102 46,92 C42,82 30,80 25,70 C18,58 20,42 32,32 C38,28 40,28 45,25 Z" fill="#22c55e" opacity="0.6" />
    <path d="M72,40 C85,38 95,48 90,62 C85,72 72,78 68,90 C62,88 58,78 62,68 C65,58 68,48 72,40 Z" fill="#15803d" opacity="0.7" />
    <path d="M100,85 C112,82 120,95 114,105 C108,112 98,110 96,100 C95,92 98,88 100,85 Z" fill="#22c55e" opacity="0.5" />
    <!-- Swirling Clouds -->
    <path d="M22,55 Q50,45 75,58 T125,65 Q135,70 130,80 Q115,75 90,70 T35,75 Q20,70 22,55 Z" fill="#ffffff" opacity="0.4" />
    <path d="M40,95 Q70,82 95,95 T132,102 Q125,112 105,108 T55,105 Q35,110 40,95 Z" fill="#ffffff" opacity="0.35" />
    <circle cx="70" cy="70" r="70" fill="url(#earthAtmo)" />
    <!-- Shadow side of Earth for 3D sphere look -->
    <path d="M70,0 A70,70 0 0,1 140,70 A70,70 0 0,1 70,140 A70,75 0 0,0 70,0 Z" fill="#030712" opacity="0.55" />
  </g>

  <!-- Distant Constellation/Milkyway particles -->
  <g opacity="0.3" stroke="#a5b4fc" stroke-width="0.5" stroke-dasharray="3,6" fill="none">
    <polyline points="120,180 180,160 290,190 340,240 430,220" />
    <polyline points="680,140 730,60 770,170 810,210" />
  </g>

  <!-- ==================== MOON SURFACE (LUNAR LANDSCAPE) ==================== -->
  <!-- Dynamic, curved moon horizon functioning as a skate halfpipe/bowl -->
  <g id="moon-ground">
    <!-- Deep Moon Base Horizon -->
    <path d="M-50,480 Q250,560 550,520 T1150,460 Q1220,450 1280,440 L1280,850 L-50,850 Z" fill="url(#moonGrad)" />

    <!-- Foreground Skate Crater Lip (Smooth curved transition) -->
    <path d="M-20,530 C180,520 320,630 620,590 C880,555 1020,490 1250,540 L1250,850 L-20,850 Z" fill="#64748b" opacity="0.6" />
    <path d="M-20,580 C220,570 380,680 680,630 C920,590 1060,540 1250,600 L1250,850 L-20,850 Z" fill="#334155" opacity="0.8" />
    <path d="M-20,640 C280,630 450,730 750,670 C980,620 1100,600 1250,660 L1250,850 L-20,850 Z" fill="#1e293b" />

    <!-- Detailed Moon Craters (Cast realistic ellipse shadows) -->
    <!-- Large Crater Left Background -->
    <g transform="translate(180, 530) rotate(-8)">
      <ellipse cx="60" cy="22" rx="60" ry="22" fill="#475569" />
      <ellipse cx="60" cy="24" rx="56" ry="19" fill="url(#craterDark)" />
      <ellipse cx="54" cy="26" rx="46" ry="14" fill="#0f172a" />
      <path d="M10,22 A54,18 0 0,0 112,24 A58,20 0 0,1 8,22 Z" fill="#94a3b8" opacity="0.7" />
    </g>

    <!-- Medium Crater Right -->
    <g transform="translate(860, 510) rotate(6)">
      <ellipse cx="45" cy="16" rx="45" ry="16" fill="#475569" />
      <ellipse cx="45" cy="18" rx="42" ry="14" fill="url(#craterDark)" />
      <ellipse cx="40" cy="20" rx="34" ry="10" fill="#0f172a" />
      <path d="M6,17 A40,13 0 0,0 84,18 A44,15 0 0,1 6,17 Z" fill="#94a3b8" opacity="0.6" />
    </g>

    <!-- Small Craters scattered along the skate slope -->
    <g transform="translate(420, 560) scale(0.65) rotate(-3)">
      <ellipse cx="30" cy="10" rx="30" ry="10" fill="#334155" />
      <ellipse cx="28" cy="11" rx="26" ry="8" fill="#0f172a" />
      <path d="M4,10 A26,8 0 0,0 54,11 A28,9 0 0,1 4,10 Z" fill="#cbd5e1" opacity="0.6" />
    </g>
    <g transform="translate(680, 580) scale(0.8) rotate(4)">
      <ellipse cx="30" cy="10" rx="30" ry="10" fill="#334155" />
      <ellipse cx="28" cy="11" rx="26" ry="8" fill="#0f172a" />
      <path d="M4,10 A26,8 0 0,0 54,11 A28,9 0 0,1 4,10 Z" fill="#94a3b8" opacity="0.5" />
    </g>
    <g transform="translate(1040, 590) scale(1) rotate(12)">
      <ellipse cx="35" cy="12" rx="35" ry="12" fill="#1e293b" />
      <ellipse cx="33" cy="13" rx="30" ry="9" fill="#020617" />
      <path d="M5,12 A30,9 0 0,0 62,13 A33,10 0 0,1 5,12 Z" fill="#64748b" opacity="0.5" />
    </g>

    <!-- Foreground Crater Bottom Left -->
    <g transform="translate(120, 690) scale(1.4) rotate(-5)">
      <ellipse cx="50" cy="16" rx="50" ry="16" fill="#1e293b" />
      <ellipse cx="48" cy="18" rx="45" ry="13" fill="#020617" />
      <path d="M5,17 A45,13 0 0,0 92,18 A48,15 0 0,1 5,17 Z" fill="#475569" opacity="0.6" />
    </g>

    <!-- Apollo Style Lunar Flag planted in the background (Cat-themed!) -->
    <g id="cat-flag" transform="translate(260, 430)">
      <!-- Flagpole -->
      <line x1="0" y1="0" x2="0" y2="110" stroke="#cbd5e1" stroke-width="3" />
      <line x1="0" y1="1" x2="65" y2="1" stroke="#cbd5e1" stroke-width="2.5" />
      <!-- Gold Finial Sphere -->
      <circle cx="0" cy="0" r="3.5" fill="#facc15" />
      <!-- Flag Fabric (Slight lunar wave) -->
      <path d="M0,2 Q18,-3 35,3 T70,1 Q70,25 70,42 Q52,38 35,44 T0,40 Z" fill="#f43f5e" />
      <!-- Fish Bone / Paw Print Icon on flag -->
      <path d="M28,21 C28,17 38,17 38,21 C38,25 28,25 28,21 Z" fill="#ffffff" />
      <circle cx="27" cy="16" r="2.5" fill="#ffffff" />
      <circle cx="33" cy="14" r="2.5" fill="#ffffff" />
      <circle cx="39" cy="16" r="2.5" fill="#ffffff" />
      <!-- Flag shadow on ground -->
      <ellipse cx="15" cy="112" rx="20" ry="4" fill="#0f172a" opacity="0.6" />
    </g>

    <!-- Moon Dust Spray / Particles kicked up by board -->
    <g id="moon-dust" fill="#cbd5e1">
      <ellipse cx="380" cy="550" rx="8" ry="4" opacity="0.4" transform="rotate(-15, 380, 550)" />
      <ellipse cx="350" cy="535" rx="14" ry="6" opacity="0.3" transform="rotate(-25, 350, 535)" />
      <circle cx="320" cy="510" r="3.5" opacity="0.5" />
      <circle cx="335" cy="490" r="2" opacity="0.6" />
      <circle cx="300" cy="480" r="1.5" opacity="0.4" />
      <circle cx="280" cy="520" r="3" opacity="0.3" />
      <circle cx="360" cy="470" r="2.5" opacity="0.4" />
      <circle cx="410" cy="530" r="2" opacity="0.5" />
      <ellipse cx="440" cy="565" rx="25" ry="7" opacity="0.25" transform="rotate(-10, 440, 565)" />
    </g>

    <!-- Skate Action Shadow cast onto lunar surface -->
    <ellipse cx="580" cy="560" rx="140" ry="26" fill="#080c16" opacity="0.65" filter="url(#softGlow)" transform="rotate(-10, 580, 560)" />
  </g>

  <!-- ==================== SKATEBOARDING ASTRONAUT CAT ==================== -->
  <!-- Entire Character Assembly tilted dynamically mid-air / carving a turn -->
  <g id="skater-cat" transform="translate(380, 80) rotate(-11 250 350)">

    <!-- ========== JETPACK / LIFE SUPPORT BACKPACK ========== -->
    <g id="backpack" transform="translate(185, 235)">
      <!-- Main Oxygen Tank Frame -->
      <rect x="0" y="0" width="75" height="135" rx="20" fill="#94a3b8" stroke="#475569" stroke-width="3" />
      <rect x="5" y="5" width="65" height="125" rx="16" fill="url(#suitWhite)" />
      <!-- Twin Pressure Cylinders -->
      <rect x="12" y="15" width="22" height="95" rx="11" fill="#e2e8f0" stroke="#cbd5e1" stroke-width="2" />
      <rect x="40" y="15" width="22" height="95" rx="11" fill="#e2e8f0" stroke="#cbd5e1" stroke-width="2" />
      <!-- Cyberpunk Status Gauges & Neon Lights -->
      <circle cx="23" cy="30" r="5" fill="#22c55e" filter="url(#softGlow)" />
      <circle cx="51" cy="30" r="5" fill="#00f0ff" filter="url(#softGlow)" />
      <rect x="16" y="50" width="14" height="40" rx="3" fill="#0284c7" opacity="0.7" />
      <rect x="44" y="50" width="14" height="40" rx="3" fill="#0284c7" opacity="0.7" />
      <!-- Hazard Stripes Accent Bar -->
      <rect x="14" y="102" width="46" height="8" fill="url(#suitOrange)" rx="2" />
      <!-- Thruster Nozzle at Base (Puffing cool thruster flame!) -->
      <path d="M22,135 L16,148 L32,148 Z" fill="#475569" />
      <path d="M52,135 L46,148 L62,148 Z" fill="#475569" />
      <!-- Jet Thruster Particle Plume -->
      <ellipse cx="24" cy="158" rx="6" ry="12" fill="#38bdf8" opacity="0.8" filter="url(#softGlow)" />
      <ellipse cx="24" cy="155" rx="3" ry="7" fill="#ffffff" />
      <ellipse cx="54" cy="158" rx="6" ry="12" fill="#38bdf8" opacity="0.8" filter="url(#softGlow)" />
      <ellipse cx="54" cy="155" rx="3" ry="7" fill="#ffffff" />
    </g>

    <!-- Flexible Tail in Articulated Space Suit Sleeve (Flowing behind with cat balance) -->
    <g id="suit-tail">
      <!-- Tail Shadow/Underlayer -->
      <path d="M200,340 C140,350 90,320 60,250 C40,200 70,150 110,140 C125,135 135,145 125,160 C95,170 80,205 95,240 C115,285 150,295 195,305 Z" fill="#64748b" opacity="0.4" />
      <!-- Main Segmented White Tail Suit -->
      <path d="M205,335 C145,345 95,315 65,245 C45,195 75,145 115,135 C125,132 133,142 124,152 C98,162 82,198 98,235 C118,280 155,290 200,300 Z" fill="url(#suitWhite)" stroke="#94a3b8" stroke-width="2.5" />
      <!-- Ribbed Articulation Joint Rings on Tail -->
      <path d="M165,307 Q175,322 170,332" stroke="url(#suitOrange)" stroke-width="4" stroke-linecap="round" fill="none" />
      <path d="M125,280 Q138,292 128,307" stroke="#0284c7" stroke-width="4" stroke-linecap="round" fill="none" />
      <path d="M92,238 Q108,245 102,262" stroke="url(#suitOrange)" stroke-width="4" stroke-linecap="round" fill="none" />
      <path d="M72,192 Q90,195 86,212" stroke="#0284c7" stroke-width="4" stroke-linecap="round" fill="none" />
      <!-- Golden Tip Ring / Thruster Node -->
      <circle cx="120" cy="142" r="8" fill="#f59e0b" stroke="#d97706" stroke-width="2" />
      <circle cx="120" cy="142" r="3.5" fill="#fef08a" />
    </g>

    <!-- ========== BACK LEG & PAW (Deep Stance on Board) ========== -->
    <g id="back-leg" transform="translate(195, 330)">
      <!-- Upper Thigh -->
      <ellipse cx="40" cy="30" rx="36" ry="24" fill="url(#suitWhite)" transform="rotate(35 40 30)" stroke="#94a3b8" stroke-width="1.5" />
      <!-- Lower Leg & Knee Patch -->
      <path d="M35,40 L15,100 L45,105 L65,48 Z" fill="url(#suitWhite)" />
      <!-- Ribbed Joint Rings -->
      <line x1="28" y1="62" x2="52" y2="67" stroke="url(#suitOrange)" stroke-width="4" stroke-linecap="round" />
      <line x1="23" y1="75" x2="47" y2="80" stroke="#0284c7" stroke-width="4" stroke-linecap="round" />
      <line x1="18" y1="88" x2="42" y2="93" stroke="url(#suitOrange)" stroke-width="4" stroke-linecap="round" />
      <!-- Back Space Boot (Gripping the Kicktail) -->
      <g transform="translate(5, 95) rotate(-5)">
        <path d="M-8,12 C-8,5 2,0 15,0 L38,3 C48,4 52,12 50,22 L-2,22 C-6,22 -8,18 -8,12 Z" fill="#334155" />
        <!-- Cyan Neon Magnetic Sole -->
        <rect x="-6" y="20" width="56" height="7" rx="3" fill="#22d3ee" filter="url(#softGlow)" />
        <rect x="-4" y="22" width="52" height="3" rx="1.5" fill="#ffffff" />
        <!-- Boot Fastener Buckles -->
        <rect x="8" y="4" width="8" height="12" rx="2" fill="#cbd5e1" />
        <rect x="24" y="5" width="8" height="12" rx="2" fill="#cbd5e1" />
      </g>
    </g>

    <!-- ========== SUIT TORSO (Puffy Astronaut Body) ========== -->
    <g id="torso">
      <!-- Main Pressure Suit Body -->
      <ellipse cx="280" cy="285" rx="72" ry="85" fill="url(#suitWhite)" stroke="#94a3b8" stroke-width="2" />
      <!-- Torso Side Shading for Roundness -->
      <path d="M225,250 C215,285 225,325 245,350 C230,320 225,275 235,240 Z" fill="#64748b" opacity="0.3" />
      <!-- Blue & Red Mission Chest Straps -->
      <path d="M245,215 Q285,250 310,340" stroke="#0284c7" stroke-width="7" fill="none" stroke-linecap="round" opacity="0.9" />
      <path d="M315,220 Q280,265 250,345" stroke="#0284c7" stroke-width="7" fill="none" stroke-linecap="round" opacity="0.9" />
      <!-- Horizontal Harness Band -->
      <path d="M220,290 Q275,310 340,285" stroke="#0369a1" stroke-width="6" fill="none" />
      <!-- Chest Control Module (Life Support Console) -->
      <rect x="255" y="250" width="50" height="42" rx="7" fill="#334155" stroke="#475569" stroke-width="2" />
      <circle cx="270" cy="265" r="5" fill="#ef4444" filter="url(#softGlow)" />
      <circle cx="288" cy="265" r="5" fill="#22c55e" filter="url(#softGlow)" />
      <!-- Digital Interface / Gauge Meter -->
      <rect x="264" y="276" width="32" height="8" rx="2" fill="#0f172a" />
      <rect x="266" y="278" width="18" height="4" rx="1" fill="#38bdf8" />
      <!-- NASA / Apollo Style Cat Mission Patch on Shoulder -->
      <g transform="translate(318, 235) rotate(15) scale(0.85)">
        <ellipse cx="16" cy="16" rx="16" ry="14" fill="#1e3a8a" stroke="#ffffff" stroke-width="1.5" />
        <circle cx="16" cy="16" r="10" fill="#dc2626" />
        <!-- Vector Cat Head Silhouette on patch -->
        <polygon points="11,18 13,11 16,14 19,11 21,18" fill="#ffffff" />
        <path d="M6,14 Q16,8 26,14" stroke="#facc15" stroke-width="1.5" fill="none" />
      </g>
    </g>

    <!-- ========== FRONT LEG & PAW (Forward Stance, Shock Absorbed) ========== -->
    <g id="front-leg" transform="translate(290, 310)">
      <!-- Thigh -->
      <ellipse cx="35" cy="25" rx="34" ry="22" fill="url(#suitWhite)" transform="rotate(-15 35 25)" stroke="#94a3b8" stroke-width="1.5" />
      <!-- Shin -->
      <path d="M25,35 L48,110 L80,105 L58,30 Z" fill="url(#suitWhite)" />
      <!-- Ribbed Joint Accordion Bands -->
      <line x1="33" y1="58" x2="59" y2="52" stroke="url(#suitOrange)" stroke-width="4" stroke-linecap="round" />
      <line x1="38" y1="72" x2="64" y2="66" stroke="#0284c7" stroke-width="4" stroke-linecap="round" />
      <line x1="43" y1="86" x2="69" y2="80" stroke="url(#suitOrange)" stroke-width="4" stroke-linecap="round" />
      <!-- Front Space Boot (Locked onto front bolts) -->
      <g transform="translate(42, 102) rotate(12)">
        <path d="M-6,14 C-6,6 4,0 18,0 L42,2 C52,4 56,12 53,24 L-2,24 C-5,24 -6,19 -6,14 Z" fill="#334155" />
        <!-- Cyan Glowing Magnetic Grip Sole -->
        <rect x="-4" y="21" width="58" height="7" rx="3" fill="#22d3ee" filter="url(#softGlow)" />
        <rect x="-2" y="23" width="54" height="3" rx="1.5" fill="#ffffff" />
        <!-- Boot Buckles -->
        <rect x="12" y="5" width="8" height="12" rx="2" fill="#cbd5e1" />
        <rect x="28" y="6" width="8" height="12" rx="2" fill="#cbd5e1" />
      </g>
    </g>

    <!-- ========== BACK ARM (Carving balance, held backwards) ========== -->
    <g id="back-arm">
      <!-- Upper Arm & Shoulder -->
      <path d="M230,240 C185,245 155,210 130,195 C120,188 128,175 140,180 C165,190 190,215 225,222 Z" fill="url(#suitWhite)" stroke="#94a3b8" stroke-width="2" />
      <!-- Glove Cuff Ring -->
      <ellipse cx="132" cy="188" rx="8" ry="14" fill="url(#suitOrange)" transform="rotate(-30 132 188)" />
      <!-- Spacesuit Padded Cat Glove (4 padded claw fingers spread for balance) -->
      <g transform="translate(120, 178) rotate(-25)">
        <path d="M-2,6 C-10,2 -18,-4 -15,-12 C-13,-18 -4,-12 2,-6 L12,4 Z" fill="#475569" />
        <ellipse cx="-14" cy="-10" rx="4.5" ry="3" fill="#94a3b8" />
        <ellipse cx="-8" cy="-15" rx="4.5" ry="3" fill="#94a3b8" />
        <ellipse cx="-1" cy="-17" rx="4" ry="3" fill="#94a3b8" />
        <ellipse cx="6" cy="-13" rx="4" ry="3" fill="#94a3b8" />
      </g>
    </g>

    <!-- ========== ASTRONAUT CAT HELMET & HEAD ========== -->
    <g id="helmet-assembly" transform="translate(295, 150)">
      <!-- Oxygen Supply Tubes connected to Helmet Base -->
      <path d="M-85,110 C-110,130 -80,180 -55,140" fill="none" stroke="#0284c7" stroke-width="9" stroke-linecap="round" />
      <path d="M-85,110 C-110,130 -80,180 -55,140" fill="none" stroke="#38bdf8" stroke-width="4" stroke-linecap="round" />
      <path d="M-70,125 C-90,145 -65,190 -40,150" fill="none" stroke="#f97316" stroke-width="7" stroke-linecap="round" />

      <!-- Helmet Neck Collar Ring (Heavy-duty anodized metal) -->
      <ellipse cx="0" cy="70" rx="68" ry="20" fill="#475569" stroke="#334155" stroke-width="2" />
      <ellipse cx="0" cy="68" rx="62" ry="16" fill="#94a3b8" />
      <ellipse cx="0" cy="66" rx="58" ry="13" fill="#0f172a" />
      <rect x="-25" y="66" width="50" height="9" rx="3" fill="url(#suitOrange)" />

      <!-- Giant Spherical Fishbowl Helmet Base -->
      <circle cx="0" cy="0" r="82" fill="#0f172a" />

      <!-- Cat Helmet Outer Shell with Sculpted Cat-Ear Enclosures -->
      <!-- Left Ear Pod (Outer Space Helmet Ear) -->
      <path d="M-68,-32 C-85,-75 -78,-108 -58,-122 C-38,-135 -24,-112 -18,-72 Z" fill="url(#suitWhite)" stroke="#94a3b8" stroke-width="2" />
      <path d="M-60,-38 C-74,-72 -68,-98 -52,-110 C-38,-120 -28,-102 -24,-70 Z" fill="#64748b" opacity="0.4" />
      <!-- Right Ear Pod -->
      <path d="M18,-72 C24,-112 38,-135 58,-122 C78,-108 85,-75 68,-32 Z" fill="url(#suitWhite)" stroke="#94a3b8" stroke-width="2" />
      <path d="M24,-70 C28,-102 38,-120 52,-110 C68,-98 74,-72 60,-38 Z" fill="#475569" opacity="0.3" />

      <!-- Main Outer White Helmet Contour -->
      <circle cx="0" cy="0" r="82" fill="none" stroke="url(#suitWhite)" stroke-width="8" />

      <!-- Helmet Interior: Cute Cool Cat Face Visible Behind Visor Glass! -->
      <g id="cat-face-inside">
        <!-- Fluffy Ginger/Golden Cat Head -->
        <ellipse cx="0" cy="8" rx="56" ry="48" fill="#f59e0b" />
        <!-- White Fur Cheeks and Muzzle -->
        <path d="M-38,20 C-42,38 -15,48 0,44 C15,48 42,38 38,20 C32,6 18,12 0,14 C-18,12 -32,6 -38,20 Z" fill="#ffffff" />
        <!-- Cat Inner Ears with Pink Fluff -->
        <polygon points="-46,-35 -38,-75 -18,-40" fill="#fb7185" />
        <polygon points="46,-35 38,-75 18,-40" fill="#fb7185" />
        <path d="M-36,-42 L-33,-62 L-24,-44" stroke="#ffffff" stroke-width="2" fill="none" />
        <path d="M36,-42 L33,-62 L24,-44" stroke="#ffffff" stroke-width="2" fill="none" />
        <!-- Forehead Tabby Stripes -->
        <path d="M0,-24 L0,-10 M-12,-20 L-6,-8 M12,-20 L6,-8" stroke="#b45309" stroke-width="3" stroke-linecap="round" />
        <!-- Big Joyful Expressive Anime Cat Eyes -->
        <!-- Left Eye (Winking joyfully in zero-G thrill!) -->
        <path d="M-32,0 Q-22,-14 -12,-1" stroke="#0f172a" stroke-width="5" stroke-linecap="round" fill="none" />
        <path d="M-34,-3 L-38,-8 M-12,-4 L-8,-10" stroke="#0f172a" stroke-width="2.5" stroke-linecap="round" />
        <!-- Right Eye (Wide, excited, reflecting outer space!) -->
        <ellipse cx="22" cy="-2" rx="14" ry="16" fill="#0f172a" />
        <ellipse cx="22" cy="-2" rx="12" ry="14" fill="#0284c7" />
        <ellipse cx="22" cy="-2" rx="7" ry="12" fill="#082f49" />
        <!-- Eye Star/Sparkle Highlights -->
        <circle cx="18" cy="-8" r="4.5" fill="#ffffff" />
        <circle cx="26" cy="4" r="2" fill="#ffffff" />
        <polygon points="24,-4 26,-1 29,-1 27,2 28,5 25,3 23,5 24,2 22,-1" fill="#7dd3fc" />
        <!-- Cute Pink Nose & Confident Smile -->
        <polygon points="-4,18 4,18 0,23" fill="#f43f5e" />
        <path d="M0,23 C-5,28 -12,28 -16,24 M0,23 C5,28 12,28 16,24" stroke="#0f172a" stroke-width="2.5" stroke-linecap="round" fill="none" />
        <!-- Whiskers poking out -->
        <line x1="-22" y1="20" x2="-48" y2="15" stroke="#ffffff" stroke-width="2" stroke-linecap="round" />
        <line x1="-24" y1="25" x2="-46" y2="28" stroke="#ffffff" stroke-width="2" stroke-linecap="round" />
        <line x1="22" y1="20" x2="48" y2="15" stroke="#ffffff" stroke-width="2" stroke-linecap="round" />
        <line x1="24" y1="25" x2="46" y2="28" stroke="#ffffff" stroke-width="2" stroke-linecap="round" />
        <!-- Cheerful Kawaii Blush -->
        <ellipse cx="-28" cy="14" rx="7" ry="4" fill="#fb7185" opacity="0.6" />
        <ellipse cx="28" cy="14" rx="7" ry="4" fill="#fb7185" opacity="0.6" />
        <!-- Little Astronaut Headset Mic -->
        <path d="M-40,8 Q-35,32 -10,32" stroke="#475569" stroke-width="3" fill="none" stroke-linecap="round" />
        <circle cx="-8" cy="32" r="3.5" fill="#22c55e" filter="url(#softGlow)" />
      </g>

      <!-- Iridescent Gold/Chrome Spherical Visor Overlay (Transparent reflective glass) -->
      <circle cx="0" cy="0" r="76" fill="url(#visorGrad)" opacity="0.4" style="mix-blend-mode: screen;" />

      <!-- Curved Sun Glare & Cosmic Horizon Reflection on Visor Glass -->
      <path d="M-52,-48 C-18,-72 25,-70 54,-42 C40,-56 10,-60 -25,-48 C-42,-40 -48,-32 -52,-48 Z" fill="#ffffff" opacity="0.75" />
      <ellipse cx="-35" cy="-25" rx="14" ry="7" fill="#ffffff" opacity="0.5" transform="rotate(-30 -35 -25)" />
      <!-- Curved bottom rim reflection of moon & skateboard deck neon -->
      <path d="M-48,42 C-20,62 25,60 52,38 C32,48 -5,48 -35,36 C-42,32 -45,36 -48,42 Z" fill="#00f0ff" opacity="0.45" filter="url(#softGlow)" />
    </g>

    <!-- ========== FRONT ARM (Posed forward in classic skate style) ========== -->
    <g id="front-arm">
      <!-- Upper Arm & Shoulder Joint -->
      <path d="M335,245 C380,250 415,225 440,210 C452,202 445,188 430,192 C400,202 375,220 330,225 Z" fill="url(#suitWhite)" stroke="#94a3b8" stroke-width="2" />
      <!-- Orange Anodized Wrist Cuff Ring -->
      <ellipse cx="438" cy="204" rx="8" ry="14" fill="url(#suitOrange)" transform="rotate(25 438 204)" />
      <!-- Padded Spacesuit Cat Paw (Making 'Peace' / Cool Skate Gesture) -->
      <g transform="translate(444, 196) rotate(18)">
        <path d="M0,0 C8,-6 18,-4 22,2 C24,6 20,12 14,14 L2,10 Z" fill="#475569" />
        <!-- Padded Glove Finger Segments -->
        <rect x="18" y="-6" width="12" height="6" rx="3" fill="#cbd5e1" transform="rotate(-30 18 -6)" />
        <rect x="20" y="2" width="14" height="6" rx="3" fill="#cbd5e1" transform="rotate(-5 20 2)" />
        <rect x="14" y="8" width="11" height="5" rx="2.5" fill="#94a3b8" transform="rotate(15 14 8)" />
        <!-- Palm Grip Pad -->
        <circle cx="8" cy="4" r="5" fill="#1e293b" />
      </g>
    </g>

    <!-- ==================== THE SKATEBOARD (CYBERPUNK MOON CRUISER) ==================== -->
    <g id="skateboard" transform="translate(140, 440) rotate(8)">
      <!-- Board Top Grip Tape (Perforated space-grip texture with laser pattern) -->
      <!-- Skateboard Deck Side Edge Profile -->
      <path d="M-25,12 C20,10 70,22 170,22 C270,22 330,10 375,-8 L378,2 C330,20 270,32 170,32 C70,32 20,20 -22,22 Z" fill="url(#deckEdge)" />

      <!-- Deck Main Graphic Bottom / Face -->
      <path d="M-28,8 C20,6 70,18 170,18 C270,18 330,6 380,-12 C384,-8 382,2 374,6 C328,24 268,36 170,36 C72,36 22,24 -24,18 C-30,14 -32,10 -28,8 Z" fill="url(#deckGrad)" stroke="#ec4899" stroke-width="1.5" />

      <!-- Skateboard Top Deck Surface (Where paws stand) -->
      <path d="M-25,6 C20,4 70,16 170,16 C270,16 330,4 375,-14 C365,-18 340,-12 280,-4 C190,8 120,4 -10,-8 C-20,-6 -25,0 -25,6 Z" fill="#18181b" />

      <!-- Griptape Laser Grid / Graphic Accent Lines (Synthwave styling) -->
      <path d="M30,7 L70,14 M120,15 L180,15 M220,14 L270,8 M310,2 L340,-5" stroke="#00f0ff" stroke-width="2" stroke-linecap="round" opacity="0.8" />
      <!-- Iconic Neon Cat Paw Logo on center of deck grip -->
      <ellipse cx="170" cy="14" rx="8" ry="5" fill="#ff2a8d" filter="url(#softGlow)" />
      <circle cx="163" cy="7" r="2" fill="#ff2a8d" />
      <circle cx="168" cy="5" r="2.2" fill="#ff2a8d" />
      <circle cx="174" cy="6" r="2.2" fill="#ff2a8d" />
      <circle cx="178" cy="8" r="1.8" fill="#ff2a8d" />

      <!-- Underglow Neon Light Tube Beneath Deck -->
      <path d="M0,24 C60,26 120,34 180,34 C240,34 300,24 350,12" stroke="#00f0ff" stroke-width="6" fill="none" opacity="0.8" filter="url(#neonGlow)" />
      <path d="M0,24 C60,26 120,34 180,34 C240,34 300,24 350,12" stroke="#ffffff" stroke-width="2" fill="none" opacity="0.9" />

      <!-- Skateboard Trucks (Polished chrome metal suspension) -->
      <!-- Back Truck -->
      <g transform="translate(50, 26)">
        <polygon points="0,0 24,0 18,16 6,16" fill="#475569" />
        <rect x="2" y="14" width="20" height="6" rx="2" fill="#94a3b8" />
        <circle cx="12" cy="17" r="3.5" fill="#f59e0b" /> <!-- Kingpin & Bushing -->
        <rect x="-8" y="18" width="40" height="4" rx="2" fill="#cbd5e1" /> <!-- Axle -->
      </g>
      <!-- Front Truck -->
      <g transform="translate(280, 20)">
        <polygon points="0,0 24,0 18,16 6,16" fill="#475569" />
        <rect x="2" y="14" width="20" height="6" rx="2" fill="#94a3b8" />
        <circle cx="12" cy="17" r="3.5" fill="#f59e0b" />
        <rect x="-8" y="18" width="40" height="4" rx="2" fill="#cbd5e1" />
      </g>

      <!-- Wheels (High-speed translucent luminous neon green urethane) -->
      <!-- Back Wheel Pair -->
      <g transform="translate(42, 38)">
        <!-- Outer Left Wheel -->
        <ellipse cx="0" cy="8" rx="14" ry="18" fill="url(#neonWheel)" filter="url(#softGlow)" />
        <ellipse cx="0" cy="8" rx="7" ry="10" fill="#064e3b" />
        <!-- Chrome High-Speed ABEC Bearing Core -->
        <ellipse cx="0" cy="8" rx="4" ry="5" fill="#f8fafc" />
        <!-- Inner Right Wheel (Offset 3D perspective) -->
        <ellipse cx="32" cy="14" rx="12" ry="15" fill="url(#neonWheel)" opacity="0.8" />
        <ellipse cx="32" cy="14" rx="6" ry="8" fill="#064e3b" />
      </g>

      <!-- Front Wheel Pair -->
      <g transform="translate(272, 32)">
        <!-- Outer Left Wheel -->
        <ellipse cx="0" cy="8" rx="14" ry="18" fill="url(#neonWheel)" filter="url(#softGlow)" />
        <ellipse cx="0" cy="8" rx="7" ry="10" fill="#064e3b" />
        <ellipse cx="0" cy="8" rx="4" ry="5" fill="#f8fafc" />
        <!-- Inner Right Wheel -->
        <ellipse cx="32" cy="14" rx="12" ry="15" fill="url(#neonWheel)" opacity="0.8" />
        <ellipse cx="32" cy="14" rx="6" ry="8" fill="#064e3b" />
      </g>

      <!-- Wheel Speed Blur Sparks (Low gravity kinetic motion!) -->
      <line x1="30" y1="52" x2="-10" y2="48" stroke="#34d399" stroke-width="2.5" stroke-linecap="round" opacity="0.7" />
      <line x1="260" y1="46" x2="210" y2="44" stroke="#34d399" stroke-width="2.5" stroke-linecap="round" opacity="0.7" />
      <line x1="40" y1="42" x2="0" y2="40" stroke="#00f0ff" stroke-width="1.5" stroke-linecap="round" opacity="0.6" />
    </g>
  </g>

  <!-- ==================== FLOATING PROPS & ATMOSPHERE ==================== -->
  <!-- Cute Astronaut Accessories in Zero-G (Floating Fish Treat in Bubble) -->
  <g transform="translate(860, 360)">
    <!-- Liquid bubble -->
    <circle cx="0" cy="0" r="28" fill="#38bdf8" opacity="0.2" filter="url(#softGlow)" />
    <circle cx="0" cy="0" r="26" fill="none" stroke="#7dd3fc" stroke-width="2" opacity="0.6" />
    <ellipse cx="-8" cy="-10" rx="8" ry="4" fill="#ffffff" opacity="0.5" transform="rotate(-30 -8 -10)" />
    <!-- Golden Fish Floating Inside -->
    <g transform="rotate(15) scale(0.9)">
      <path d="M-14,0 C-8,-10 10,-8 16,0 C10,8 -8,10 -14,0 Z" fill="#fb923c" />
      <polygon points="14,0 24,-8 22,0 24,8" fill="#f97316" />
      <circle cx="-6" cy="-2" r="2" fill="#0f172a" />
      <circle cx="-7" cy="-3" r="0.7" fill="#ffffff" />
    </g>
  </g>

  <!-- A small floating crater pebble in low gravity -->
  <g transform="translate(240, 480) rotate(45)">
    <polygon points="0,0 12,3 18,14 8,20 -2,12" fill="#64748b" />
    <polygon points="0,0 12,3 8,10 -2,12" fill="#94a3b8" />
  </g>
  <g transform="translate(790, 440) rotate(20) scale(0.7)">
    <polygon points="0,0 10,2 14,10 6,15 -1,9" fill="#475569" />
    <polygon points="0,0 10,2 6,7 -1,9" fill="#64748b" />
  </g>
</svg>
</div>
</body>
</html>
```