Models 44

DeepSeek V4.1 Flash 1017

by DeepSeekReasoningClean
Open in new window

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

How it went

Total time
19.1 s
Cost
$0.0042
Output tokens
5,835
Spent thinking
0 tokens
Speed
317.6 tok/s
Console errors
0
First token after
742 ms
First visible text after
742 ms
Prompt tokens
349
Code size
15.2 KB
Finish reason
stop
Served by
DigitalOcean
Model id
deepseek/deepseek-v4.1-flash-1017
Reasoning sent
{"effort":"none"}
Max output
64,000 tokens
Generated
Nov 10, 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 · 337 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>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    background: radial-gradient(ellipse at 50% 30%, #0a0a2e 0%, #05051a 60%, #000 100%);
    display: flex; justify-content: center; align-items: center;
    min-height: 100vh; overflow: hidden;
    font-family: 'Courier New', monospace;
  }
  .scene {
    width: 100%; max-width: 1100px; padding: 10px;
  }
  svg { width: 100%; height: auto; display: block; }

  /* twinkle stars */
  @keyframes twinkle {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 1; }
  }
  .star { animation: twinkle 3s ease-in-out infinite; }
  .star:nth-child(2n) { animation-delay: 0.7s; animation-duration: 4s; }
  .star:nth-child(3n) { animation-delay: 1.4s; animation-duration: 2.5s; }
  .star:nth-child(5n) { animation-delay: 2.1s; animation-duration: 3.5s; }

  /* gentle bobbing for cat+board */
  @keyframes bob {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
  }
  .rider { animation: bob 2.4s ease-in-out infinite; transform-origin: 550px 500px; }

  /* tail sway */
  @keyframes tailSway {
    0%, 100% { transform: rotate(-8deg); }
    50% { transform: rotate(10deg); }
  }
  .tail { animation: tailSway 1.6s ease-in-out infinite; transform-origin: 620px 340px; }

  /* wheel spin */
  @keyframes spinCW { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
  .wheel { animation: spinCW 1.2s linear infinite; }

  /* antenna glow */
  @keyframes glow {
    0%, 100% { r: 5; opacity: 1; }
    50% { r: 7; opacity: 0.7; }
  }
  .blinker { animation: glow 1s ease-in-out infinite; }

  /* subtle moon crater shimmer */
  @keyframes shimmer { 0%,100% { opacity: 0.35; } 50% { opacity: 0.6; } }
  .crater { animation: shimmer 4s ease-in-out infinite; }

  /* sparkle on visor */
  @keyframes sparkle {
    0%, 90%, 100% { opacity: 0; transform: scale(0.5); }
    95% { opacity: 1; transform: scale(1.2); }
  }
  .visor-sparkle { animation: sparkle 3.2s ease-in-out infinite; transform-origin: 500px 240px; }

  /* floating dust */
  @keyframes drift {
    0% { transform: translate(0,0); opacity: 0; }
    20% { opacity: 0.8; }
    100% { transform: translate(-80px, -60px); opacity: 0; }
  }
  .dust { animation: drift 4s ease-out infinite; }
  .dust:nth-child(2) { animation-delay: 1.3s; }
  .dust:nth-child(3) { animation-delay: 2.6s; }
  .dust:nth-child(4) { animation-delay: 0.7s; }
</style>
</head>
<body>
<div class="scene">
<svg viewBox="0 0 900 650" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Astronaut cat skateboarding on the moon">
  <defs>
    <radialGradient id="spaceGrad" cx="50%" cy="35%" r="80%">
      <stop offset="0%" stop-color="#12123a"/>
      <stop offset="60%" stop-color="#080820"/>
      <stop offset="100%" stop-color="#020210"/>
    </radialGradient>
    <radialGradient id="moonGrad" cx="40%" cy="30%" r="75%">
      <stop offset="0%" stop-color="#d8d3e8"/>
      <stop offset="55%" stop-color="#a8a2c0"/>
      <stop offset="100%" stop-color="#6b6588"/>
    </radialGradient>
    <radialGradient id="earthGrad" cx="35%" cy="30%" r="70%">
      <stop offset="0%" stop-color="#6fb7ff"/>
      <stop offset="55%" stop-color="#2b6bd4"/>
      <stop offset="100%" stop-color="#123a7a"/>
    </radialGradient>
    <linearGradient id="visorsGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#7ff0ff"/>
      <stop offset="50%" stop-color="#2ab8e8"/>
      <stop offset="100%" stop-color="#0a5a8a"/>
    </linearGradient>
    <linearGradient id="suitGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#f5f5f8"/>
      <stop offset="100%" stop-color="#c4c4d0"/>
    </linearGradient>
    <linearGradient id="boardGrad" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0%" stop-color="#ff5a8a"/>
      <stop offset="50%" stop-color="#ffb347"/>
      <stop offset="100%" stop-color="#ff5a8a"/>
    </linearGradient>
    <radialGradient id="glowGrad" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#7ff0ff" stop-opacity="0.8"/>
      <stop offset="100%" stop-color="#7ff0ff" stop-opacity="0"/>
    </radialGradient>
  </defs>

  <!-- Space background -->
  <rect width="900" height="650" fill="url(#spaceGrad)"/>

  <!-- Stars -->
  <g fill="#ffffff">
    <circle class="star" cx="80" cy="60" r="1.8"/>
    <circle class="star" cx="180" cy="120" r="1.2"/>
    <circle class="star" cx="260" cy="50" r="2"/>
    <circle class="star" cx="360" cy="100" r="1.4"/>
    <circle class="star" cx="460" cy="40" r="1.8"/>
    <circle class="star" cx="560" cy="90" r="1.1"/>
    <circle class="star" cx="650" cy="45" r="2.2"/>
    <circle class="star" cx="740" cy="120" r="1.5"/>
    <circle class="star" cx="820" cy="70" r="1.8"/>
    <circle class="star" cx="120" cy="200" r="1.3"/>
    <circle class="star" cx="40" cy="320" r="1.6"/>
    <circle class="star" cx="860" cy="250" r="1.4"/>
    <circle class="star" cx="810" cy="380" r="1.9"/>
    <circle class="star" cx="340" cy="180" r="1.1"/>
    <circle class="star" cx="600" cy="200" r="1.5"/>
    <circle class="star" cx="700" cy="300" r="1.2"/>
    <circle class="star" cx="150" cy="420" r="1.4"/>
    <circle class="star" cx="50" cy="140" r="1.7"/>
    <circle class="star" cx="500" cy="150" r="1.0"/>
    <circle class="star" cx="880" cy="160" r="1.6"/>
    <circle class="star" cx="420" cy="260" r="1.2"/>
    <circle class="star" cx="300" cy="300" r="1.0"/>
  </g>

  <!-- Earth in distance -->
  <g transform="translate(760, 130)">
    <circle r="42" fill="url(#earthGrad)"/>
    <path d="M -18 -8 Q -5 -18 10 -10 Q 20 -2 8 8 Q -6 14 -18 6 Z" fill="#3fbf6a" opacity="0.85"/>
    <path d="M 12 -20 Q 24 -12 22 2 Q 30 8 22 18 Q 10 20 8 8 Z" fill="#3fbf6a" opacity="0.7"/>
    <circle r="42" fill="none" stroke="#8fd0ff" stroke-width="1" opacity="0.4"/>
  </g>

  <!-- Moon surface (large circle, bottom) -->
  <g>
    <circle cx="450" cy="1050" r="560" fill="url(#moonGrad)"/>
    <circle cx="450" cy="1050" r="560" fill="none" stroke="#e8e4f5" stroke-width="2" opacity="0.3"/>
    <!-- Craters -->
    <ellipse class="crater" cx="220" cy="560" rx="46" ry="12" fill="#8a84a6" opacity="0.5"/>
    <ellipse class="crater" cx="700" cy="590" rx="60" ry="15" fill="#8a84a6" opacity="0.5"/>
    <ellipse class="crater" cx="430" cy="610" rx="38" ry="10" fill="#8a84a6" opacity="0.45"/>
    <ellipse class="crater" cx="120" cy="600" rx="30" ry="8" fill="#8a84a6" opacity="0.4"/>
    <ellipse class="crater" cx="820" cy="540" rx="25" ry="7" fill="#8a84a6" opacity="0.4"/>
    <ellipse class="crater" cx="560" cy="560" rx="20" ry="6" fill="#8a84a6" opacity="0.4"/>
  </g>

  <!-- Floating dust particles -->
  <g fill="#d8d3e8">
    <circle class="dust" cx="380" cy="540" r="3"/>
    <circle class="dust" cx="650" cy="560" r="2.5"/>
    <circle class="dust" cx="720" cy="520" r="2"/>
    <circle class="dust" cx="300" cy="570" r="2.5"/>
  </g>

  <!-- Rider group (cat + board) -->
  <g class="rider">

    <!-- Skateboard -->
    <g>
      <!-- Board deck -->
      <path d="M 320 560 Q 300 555 305 548 L 780 548 Q 800 555 785 562 L 400 585 Q 340 585 320 560 Z"
            fill="url(#boardGrad)" stroke="#8a2050" stroke-width="2"/>
      <!-- Deck top line -->
      <path d="M 320 558 Q 340 550 400 548 L 770 548" fill="none" stroke="#fff" stroke-width="1.5" opacity="0.5"/>
      <!-- Grip stripes -->
      <g stroke="#8a2050" stroke-width="1.2" opacity="0.6">
        <line x1="380" y1="552" x2="420" y2="552"/>
        <line x1="450" y1="550" x2="490" y2="550"/>
        <line x1="520" y1="549" x2="560" y2="549"/>
        <line x1="590" y1="548" x2="630" y2="548"/>
        <line x1="660" y1="548" x2="700" y2="548"/>
      </g>
      <!-- Trucks -->
      <rect x="390" y="578" width="40" height="10" rx="3" fill="#555" stroke="#333" stroke-width="1.5"/>
      <rect x="650" y="568" width="40" height="10" rx="3" fill="#555" stroke="#333" stroke-width="1.5"/>
      <!-- Wheels (spin) -->
      <g class="wheel" style="transform-origin: 410px 596px;">
        <circle cx="410" cy="596" r="16" fill="#222" stroke="#555" stroke-width="2"/>
        <circle cx="410" cy="596" r="10" fill="#444"/>
        <circle cx="410" cy="596" r="4" fill="#ffb347"/>
        <line x1="410" y1="586" x2="410" y2="606" stroke="#666" stroke-width="1.5"/>
        <line x1="400" y1="596" x2="420" y2="596" stroke="#666" stroke-width="1.5"/>
      </g>
      <g class="wheel" style="transform-origin: 670px 586px;">
        <circle cx="670" cy="586" r="16" fill="#222" stroke="#555" stroke-width="2"/>
        <circle cx="670" cy="586" r="10" fill="#444"/>
        <circle cx="670" cy="586" r="4" fill="#ffb347"/>
        <line x1="670" y1="576" x2="670" y2="596" stroke="#666" stroke-width="1.5"/>
        <line x1="660" y1="586" x2="680" y2="586" stroke="#666" stroke-width="1.5"/>
      </g>
    </g>

    <!-- Cat body in spacesuit -->
    <g>
      <!-- Backpack / life support -->
      <rect x="405" y="330" width="70" height="110" rx="18" fill="#a8a2c0" stroke="#6b6588" stroke-width="2"/>
      <rect x="415" y="345" width="50" height="20" rx="5" fill="#7ff0ff" opacity="0.5"/>
      <circle cx="440" cy="385" r="8" fill="#7ff0ff" opacity="0.6"/>

      <!-- Tail (suit-covered) -->
      <g class="tail">
        <path d="M 600 400 Q 660 390 670 340 Q 675 310 640 300"
              fill="none" stroke="#e8e4f5" stroke-width="16" stroke-linecap="round"/>
        <path d="M 600 400 Q 660 390 670 340 Q 675 310 640 300"
              fill="none" stroke="#c4c4d0" stroke-width="10" stroke-linecap="round" opacity="0.5"/>
        <!-- Tail tip -->
        <circle cx="638" cy="298" r="9" fill="#ff9ec4"/>
      </g>

      <!-- Suit torso -->
      <path d="M 430 350 Q 420 350 415 370 Q 410 420 420 480 Q 430 510 470 515 L 540 515 Q 585 510 590 470 Q 595 420 585 380 Q 580 355 560 352 Z"
            fill="url(#suitGrad)" stroke="#8a8a9a" stroke-width="2"/>
      <!-- Suit chest control panel -->
      <rect x="465" y="390" width="60" height="50" rx="6" fill="#2a2a3a" stroke="#8a8a9a" stroke-width="1.5"/>
      <circle cx="482" cy="408" r="5" fill="#ff5a5a"/>
      <circle cx="502" cy="408" r="5" fill="#5aff7a"/>
      <circle cx="482" cy="428" r="5" fill="#ffb347"/>
      <circle cx="502" cy="428" r="5" fill="#7ff0ff"/>
      <rect x="515" y="400" width="6" height="30" rx="2" fill="#7ff0ff" opacity="0.7"/>

      <!-- Cat legs (suit covered, in stance) -->
      <!-- Front leg -->
      <path d="M 480 505 Q 470 530 480 545 L 510 545 Q 518 525 515 505 Z"
            fill="#e8e4f5" stroke="#8a8a9a" stroke-width="2"/>
      <!-- Back leg -->
      <path d="M 555 505 Q 565 530 575 545 L 605 545 Q 610 525 600 500 Z"
            fill="#e8e4f5" stroke="#8a8a9a" stroke-width="2"/>
      <!-- Boots -->
      <path d="M 470 542 Q 465 555 480 558 L 520 558 Q 528 548 520 540 Z" fill="#8a84a6" stroke="#555" stroke-width="1.5"/>
      <path d="M 570 542 Q 565 555 580 558 L 618 558 Q 625 548 618 540 Z" fill="#8a84a6" stroke="#555" stroke-width="1.5"/>

      <!-- Arms -->
      <path d="M 425 380 Q 395 400 385 440 Q 380 455 395 460 Q 405 462 410 450"
            fill="none" stroke="#e8e4f5" stroke-width="20" stroke-linecap="round"/>
      <path d="M 585 380 Q 620 390 640 420 Q 650 435 638 442 Q 628 446 622 435"
            fill="none" stroke="#e8e4f5" stroke-width="20" stroke-linecap="round"/>
      <!-- Gloves -->
      <circle cx="405" cy="455" r="13" fill="#8a84a6" stroke="#555" stroke-width="1.5"/>
      <circle cx="635" cy="438" r="13" fill="#8a84a6" stroke="#555" stroke-width="1.5"/>
      <!-- Glove details -->
      <line x1="398" y1="455" x2="412" y2="455" stroke="#555" stroke-width="1.5"/>
      <line x1="628" y1="438" x2="642" y2="438" stroke="#555" stroke-width="1.5"/>

      <!-- Cat ears poking out of helmet sides -->
      <path d="M 465 240 L 448 195 L 490 225 Z" fill="#e8e4f5" stroke="#8a8a9a" stroke-width="2" stroke-linejoin="round"/>
      <path d="M 460 232 L 452 205 L 478 225 Z" fill="#ff9ec4"/>
      <path d="M 555 240 L 572 195 L 530 225 Z" fill="#e8e4f5" stroke="#8a8a9a" stroke-width="2" stroke-linejoin="round"/>
      <path d="M 560 232 L 568 205 L 542 225 Z" fill="#ff9ec4"/>
    </g>

    <!-- Helmet -->
    <g>
      <!-- Helmet ring / neck -->
      <ellipse cx="510" cy="348" rx="72" ry="22" fill="#8a84a6" stroke="#555" stroke-width="2"/>
      <ellipse cx="510" cy="342" rx="72" ry="20" fill="#b8b2cc" stroke="#555" stroke-width="2"/>

      <!-- Helmet dome -->
      <circle cx="510" cy="255" r="78" fill="#e8e4f5" stroke="#8a8a9a" stroke-width="2.5" opacity="0.35"/>
      <circle cx="510" cy="255" r="78" fill="none" stroke="#c4c4d8" stroke-width="2" opacity="0.8"/>

      <!-- Cat face inside visor -->
      <!-- Face fur -->
      <ellipse cx="510" cy="262" rx="52" ry="48" fill="#f0e6d8"/>
      <!-- Darker ear/top fur -->
      <path d="M 470 232 Q 490 218 512 220 Q 534 218 552 232 Q 545 245 512 245 Q 478 245 470 232 Z" fill="#d8c8b0"/>
      <!-- Eyes (happy/content) -->
      <ellipse cx="487" cy="255" rx="12" ry="14" fill="#fff"/>
      <ellipse cx="533" cy="255" rx="12" ry="14" fill="#fff"/>
      <circle cx="489" cy="257" r="8" fill="#3ac04a"/>
      <circle cx="535" cy="257" r="8" fill="#3ac04a"/>
      <ellipse cx="489" cy="257" rx="3" ry="7" fill="#111"/>
      <ellipse cx="535" cy="257" rx="3" ry="7" fill="#111"/>
      <circle cx="492" cy="253" r="2.5" fill="#fff"/>
      <circle cx="538" cy="253" r="2.5" fill="#fff"/>
      <!-- Blush -->
      <ellipse cx="473" cy="275" rx="7" ry="4" fill="#ff9ec4" opacity="0.6"/>
      <ellipse cx="547" cy="275" rx="7" ry="4" fill="#ff9ec4" opacity="0.6"/>
      <!-- Nose -->
      <path d="M 505 272 L 515 272 L 510 280 Z" fill="#ff9ec4"/>
      <!-- Mouth (smile) -->
      <path d="M 500 283 Q 510 292 520 283" fill="none" stroke="#8a5a4a" stroke-width="2" stroke-linecap="round"/>
      <!-- Whiskers -->
      <g stroke="#a89880" stroke-width="1.5" stroke-linecap="round" opacity="0.8">
        <line x1="455" y1="268" x2="480" y2="272"/>
        <line x1="455" y1="280" x2="480" y2="280"/>
        <line x1="565" y1="268" x2="540" y2="272"/>
        <line x1="565" y1="280" x2="540" y2="280"/>
      </g>

      <!-- Helmet visor reflection -->
      <path d="M 470 220 Q 490 205 515 208 Q 535 212 540 225 Q 520 218 500 222 Q 485 226 470 220 Z"
            fill="#7ff0ff" opacity="0.5"/>
      <ellipse cx="478" cy="230" rx="8" ry="14" fill="#ffffff" opacity="0.6" transform="rotate(-25 478 230)"/>

      <!-- Visor sparkle -->
      <g class="visor-sparkle">
        <path d="M 500 240 L 504 232 L 508 240 L 516 244 L 508 248 L 504 256 L 500 248 L 492 244 Z" fill="#ffffff"/>
      </g>

      <!-- Antenna on helmet -->
      <line x1="510" y1="180" x2="510" y2="150" stroke="#8a84a6" stroke-width="3" stroke-linecap="round"/>
      <circle class="blinker" cx="510" cy="147" r="5" fill="#ff5a8a"/>
      <circle cx="510" cy="147" r="12" fill="url(#glowGrad)" opacity="0.6"/>
    </g>
  </g>

  <!-- Subtle motion lines behind board -->
  <g stroke="#7ff0ff" stroke-width="2" stroke-linecap="round" opacity="0.35">
    <line x1="260" y1="560" x2="200" y2="562"/>
    <line x1="250" y1="575" x2="185" y2="578"/>
    <line x1="270" y1="590" x2="215" y2="592"/>
    <line x1="255" y1="545" x2="210" y2="546"/>
  </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>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    background: radial-gradient(ellipse at 50% 30%, #0a0a2e 0%, #05051a 60%, #000 100%);
    display: flex; justify-content: center; align-items: center;
    min-height: 100vh; overflow: hidden;
    font-family: 'Courier New', monospace;
  }
  .scene {
    width: 100%; max-width: 1100px; padding: 10px;
  }
  svg { width: 100%; height: auto; display: block; }

  /* twinkle stars */
  @keyframes twinkle {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 1; }
  }
  .star { animation: twinkle 3s ease-in-out infinite; }
  .star:nth-child(2n) { animation-delay: 0.7s; animation-duration: 4s; }
  .star:nth-child(3n) { animation-delay: 1.4s; animation-duration: 2.5s; }
  .star:nth-child(5n) { animation-delay: 2.1s; animation-duration: 3.5s; }

  /* gentle bobbing for cat+board */
  @keyframes bob {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
  }
  .rider { animation: bob 2.4s ease-in-out infinite; transform-origin: 550px 500px; }

  /* tail sway */
  @keyframes tailSway {
    0%, 100% { transform: rotate(-8deg); }
    50% { transform: rotate(10deg); }
  }
  .tail { animation: tailSway 1.6s ease-in-out infinite; transform-origin: 620px 340px; }

  /* wheel spin */
  @keyframes spinCW { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
  .wheel { animation: spinCW 1.2s linear infinite; }

  /* antenna glow */
  @keyframes glow {
    0%, 100% { r: 5; opacity: 1; }
    50% { r: 7; opacity: 0.7; }
  }
  .blinker { animation: glow 1s ease-in-out infinite; }

  /* subtle moon crater shimmer */
  @keyframes shimmer { 0%,100% { opacity: 0.35; } 50% { opacity: 0.6; } }
  .crater { animation: shimmer 4s ease-in-out infinite; }

  /* sparkle on visor */
  @keyframes sparkle {
    0%, 90%, 100% { opacity: 0; transform: scale(0.5); }
    95% { opacity: 1; transform: scale(1.2); }
  }
  .visor-sparkle { animation: sparkle 3.2s ease-in-out infinite; transform-origin: 500px 240px; }

  /* floating dust */
  @keyframes drift {
    0% { transform: translate(0,0); opacity: 0; }
    20% { opacity: 0.8; }
    100% { transform: translate(-80px, -60px); opacity: 0; }
  }
  .dust { animation: drift 4s ease-out infinite; }
  .dust:nth-child(2) { animation-delay: 1.3s; }
  .dust:nth-child(3) { animation-delay: 2.6s; }
  .dust:nth-child(4) { animation-delay: 0.7s; }
</style>
</head>
<body>
<div class="scene">
<svg viewBox="0 0 900 650" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Astronaut cat skateboarding on the moon">
  <defs>
    <radialGradient id="spaceGrad" cx="50%" cy="35%" r="80%">
      <stop offset="0%" stop-color="#12123a"/>
      <stop offset="60%" stop-color="#080820"/>
      <stop offset="100%" stop-color="#020210"/>
    </radialGradient>
    <radialGradient id="moonGrad" cx="40%" cy="30%" r="75%">
      <stop offset="0%" stop-color="#d8d3e8"/>
      <stop offset="55%" stop-color="#a8a2c0"/>
      <stop offset="100%" stop-color="#6b6588"/>
    </radialGradient>
    <radialGradient id="earthGrad" cx="35%" cy="30%" r="70%">
      <stop offset="0%" stop-color="#6fb7ff"/>
      <stop offset="55%" stop-color="#2b6bd4"/>
      <stop offset="100%" stop-color="#123a7a"/>
    </radialGradient>
    <linearGradient id="visorsGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#7ff0ff"/>
      <stop offset="50%" stop-color="#2ab8e8"/>
      <stop offset="100%" stop-color="#0a5a8a"/>
    </linearGradient>
    <linearGradient id="suitGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#f5f5f8"/>
      <stop offset="100%" stop-color="#c4c4d0"/>
    </linearGradient>
    <linearGradient id="boardGrad" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0%" stop-color="#ff5a8a"/>
      <stop offset="50%" stop-color="#ffb347"/>
      <stop offset="100%" stop-color="#ff5a8a"/>
    </linearGradient>
    <radialGradient id="glowGrad" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#7ff0ff" stop-opacity="0.8"/>
      <stop offset="100%" stop-color="#7ff0ff" stop-opacity="0"/>
    </radialGradient>
  </defs>

  <!-- Space background -->
  <rect width="900" height="650" fill="url(#spaceGrad)"/>

  <!-- Stars -->
  <g fill="#ffffff">
    <circle class="star" cx="80" cy="60" r="1.8"/>
    <circle class="star" cx="180" cy="120" r="1.2"/>
    <circle class="star" cx="260" cy="50" r="2"/>
    <circle class="star" cx="360" cy="100" r="1.4"/>
    <circle class="star" cx="460" cy="40" r="1.8"/>
    <circle class="star" cx="560" cy="90" r="1.1"/>
    <circle class="star" cx="650" cy="45" r="2.2"/>
    <circle class="star" cx="740" cy="120" r="1.5"/>
    <circle class="star" cx="820" cy="70" r="1.8"/>
    <circle class="star" cx="120" cy="200" r="1.3"/>
    <circle class="star" cx="40" cy="320" r="1.6"/>
    <circle class="star" cx="860" cy="250" r="1.4"/>
    <circle class="star" cx="810" cy="380" r="1.9"/>
    <circle class="star" cx="340" cy="180" r="1.1"/>
    <circle class="star" cx="600" cy="200" r="1.5"/>
    <circle class="star" cx="700" cy="300" r="1.2"/>
    <circle class="star" cx="150" cy="420" r="1.4"/>
    <circle class="star" cx="50" cy="140" r="1.7"/>
    <circle class="star" cx="500" cy="150" r="1.0"/>
    <circle class="star" cx="880" cy="160" r="1.6"/>
    <circle class="star" cx="420" cy="260" r="1.2"/>
    <circle class="star" cx="300" cy="300" r="1.0"/>
  </g>

  <!-- Earth in distance -->
  <g transform="translate(760, 130)">
    <circle r="42" fill="url(#earthGrad)"/>
    <path d="M -18 -8 Q -5 -18 10 -10 Q 20 -2 8 8 Q -6 14 -18 6 Z" fill="#3fbf6a" opacity="0.85"/>
    <path d="M 12 -20 Q 24 -12 22 2 Q 30 8 22 18 Q 10 20 8 8 Z" fill="#3fbf6a" opacity="0.7"/>
    <circle r="42" fill="none" stroke="#8fd0ff" stroke-width="1" opacity="0.4"/>
  </g>

  <!-- Moon surface (large circle, bottom) -->
  <g>
    <circle cx="450" cy="1050" r="560" fill="url(#moonGrad)"/>
    <circle cx="450" cy="1050" r="560" fill="none" stroke="#e8e4f5" stroke-width="2" opacity="0.3"/>
    <!-- Craters -->
    <ellipse class="crater" cx="220" cy="560" rx="46" ry="12" fill="#8a84a6" opacity="0.5"/>
    <ellipse class="crater" cx="700" cy="590" rx="60" ry="15" fill="#8a84a6" opacity="0.5"/>
    <ellipse class="crater" cx="430" cy="610" rx="38" ry="10" fill="#8a84a6" opacity="0.45"/>
    <ellipse class="crater" cx="120" cy="600" rx="30" ry="8" fill="#8a84a6" opacity="0.4"/>
    <ellipse class="crater" cx="820" cy="540" rx="25" ry="7" fill="#8a84a6" opacity="0.4"/>
    <ellipse class="crater" cx="560" cy="560" rx="20" ry="6" fill="#8a84a6" opacity="0.4"/>
  </g>

  <!-- Floating dust particles -->
  <g fill="#d8d3e8">
    <circle class="dust" cx="380" cy="540" r="3"/>
    <circle class="dust" cx="650" cy="560" r="2.5"/>
    <circle class="dust" cx="720" cy="520" r="2"/>
    <circle class="dust" cx="300" cy="570" r="2.5"/>
  </g>

  <!-- Rider group (cat + board) -->
  <g class="rider">

    <!-- Skateboard -->
    <g>
      <!-- Board deck -->
      <path d="M 320 560 Q 300 555 305 548 L 780 548 Q 800 555 785 562 L 400 585 Q 340 585 320 560 Z"
            fill="url(#boardGrad)" stroke="#8a2050" stroke-width="2"/>
      <!-- Deck top line -->
      <path d="M 320 558 Q 340 550 400 548 L 770 548" fill="none" stroke="#fff" stroke-width="1.5" opacity="0.5"/>
      <!-- Grip stripes -->
      <g stroke="#8a2050" stroke-width="1.2" opacity="0.6">
        <line x1="380" y1="552" x2="420" y2="552"/>
        <line x1="450" y1="550" x2="490" y2="550"/>
        <line x1="520" y1="549" x2="560" y2="549"/>
        <line x1="590" y1="548" x2="630" y2="548"/>
        <line x1="660" y1="548" x2="700" y2="548"/>
      </g>
      <!-- Trucks -->
      <rect x="390" y="578" width="40" height="10" rx="3" fill="#555" stroke="#333" stroke-width="1.5"/>
      <rect x="650" y="568" width="40" height="10" rx="3" fill="#555" stroke="#333" stroke-width="1.5"/>
      <!-- Wheels (spin) -->
      <g class="wheel" style="transform-origin: 410px 596px;">
        <circle cx="410" cy="596" r="16" fill="#222" stroke="#555" stroke-width="2"/>
        <circle cx="410" cy="596" r="10" fill="#444"/>
        <circle cx="410" cy="596" r="4" fill="#ffb347"/>
        <line x1="410" y1="586" x2="410" y2="606" stroke="#666" stroke-width="1.5"/>
        <line x1="400" y1="596" x2="420" y2="596" stroke="#666" stroke-width="1.5"/>
      </g>
      <g class="wheel" style="transform-origin: 670px 586px;">
        <circle cx="670" cy="586" r="16" fill="#222" stroke="#555" stroke-width="2"/>
        <circle cx="670" cy="586" r="10" fill="#444"/>
        <circle cx="670" cy="586" r="4" fill="#ffb347"/>
        <line x1="670" y1="576" x2="670" y2="596" stroke="#666" stroke-width="1.5"/>
        <line x1="660" y1="586" x2="680" y2="586" stroke="#666" stroke-width="1.5"/>
      </g>
    </g>

    <!-- Cat body in spacesuit -->
    <g>
      <!-- Backpack / life support -->
      <rect x="405" y="330" width="70" height="110" rx="18" fill="#a8a2c0" stroke="#6b6588" stroke-width="2"/>
      <rect x="415" y="345" width="50" height="20" rx="5" fill="#7ff0ff" opacity="0.5"/>
      <circle cx="440" cy="385" r="8" fill="#7ff0ff" opacity="0.6"/>

      <!-- Tail (suit-covered) -->
      <g class="tail">
        <path d="M 600 400 Q 660 390 670 340 Q 675 310 640 300"
              fill="none" stroke="#e8e4f5" stroke-width="16" stroke-linecap="round"/>
        <path d="M 600 400 Q 660 390 670 340 Q 675 310 640 300"
              fill="none" stroke="#c4c4d0" stroke-width="10" stroke-linecap="round" opacity="0.5"/>
        <!-- Tail tip -->
        <circle cx="638" cy="298" r="9" fill="#ff9ec4"/>
      </g>

      <!-- Suit torso -->
      <path d="M 430 350 Q 420 350 415 370 Q 410 420 420 480 Q 430 510 470 515 L 540 515 Q 585 510 590 470 Q 595 420 585 380 Q 580 355 560 352 Z"
            fill="url(#suitGrad)" stroke="#8a8a9a" stroke-width="2"/>
      <!-- Suit chest control panel -->
      <rect x="465" y="390" width="60" height="50" rx="6" fill="#2a2a3a" stroke="#8a8a9a" stroke-width="1.5"/>
      <circle cx="482" cy="408" r="5" fill="#ff5a5a"/>
      <circle cx="502" cy="408" r="5" fill="#5aff7a"/>
      <circle cx="482" cy="428" r="5" fill="#ffb347"/>
      <circle cx="502" cy="428" r="5" fill="#7ff0ff"/>
      <rect x="515" y="400" width="6" height="30" rx="2" fill="#7ff0ff" opacity="0.7"/>

      <!-- Cat legs (suit covered, in stance) -->
      <!-- Front leg -->
      <path d="M 480 505 Q 470 530 480 545 L 510 545 Q 518 525 515 505 Z"
            fill="#e8e4f5" stroke="#8a8a9a" stroke-width="2"/>
      <!-- Back leg -->
      <path d="M 555 505 Q 565 530 575 545 L 605 545 Q 610 525 600 500 Z"
            fill="#e8e4f5" stroke="#8a8a9a" stroke-width="2"/>
      <!-- Boots -->
      <path d="M 470 542 Q 465 555 480 558 L 520 558 Q 528 548 520 540 Z" fill="#8a84a6" stroke="#555" stroke-width="1.5"/>
      <path d="M 570 542 Q 565 555 580 558 L 618 558 Q 625 548 618 540 Z" fill="#8a84a6" stroke="#555" stroke-width="1.5"/>

      <!-- Arms -->
      <path d="M 425 380 Q 395 400 385 440 Q 380 455 395 460 Q 405 462 410 450"
            fill="none" stroke="#e8e4f5" stroke-width="20" stroke-linecap="round"/>
      <path d="M 585 380 Q 620 390 640 420 Q 650 435 638 442 Q 628 446 622 435"
            fill="none" stroke="#e8e4f5" stroke-width="20" stroke-linecap="round"/>
      <!-- Gloves -->
      <circle cx="405" cy="455" r="13" fill="#8a84a6" stroke="#555" stroke-width="1.5"/>
      <circle cx="635" cy="438" r="13" fill="#8a84a6" stroke="#555" stroke-width="1.5"/>
      <!-- Glove details -->
      <line x1="398" y1="455" x2="412" y2="455" stroke="#555" stroke-width="1.5"/>
      <line x1="628" y1="438" x2="642" y2="438" stroke="#555" stroke-width="1.5"/>

      <!-- Cat ears poking out of helmet sides -->
      <path d="M 465 240 L 448 195 L 490 225 Z" fill="#e8e4f5" stroke="#8a8a9a" stroke-width="2" stroke-linejoin="round"/>
      <path d="M 460 232 L 452 205 L 478 225 Z" fill="#ff9ec4"/>
      <path d="M 555 240 L 572 195 L 530 225 Z" fill="#e8e4f5" stroke="#8a8a9a" stroke-width="2" stroke-linejoin="round"/>
      <path d="M 560 232 L 568 205 L 542 225 Z" fill="#ff9ec4"/>
    </g>

    <!-- Helmet -->
    <g>
      <!-- Helmet ring / neck -->
      <ellipse cx="510" cy="348" rx="72" ry="22" fill="#8a84a6" stroke="#555" stroke-width="2"/>
      <ellipse cx="510" cy="342" rx="72" ry="20" fill="#b8b2cc" stroke="#555" stroke-width="2"/>

      <!-- Helmet dome -->
      <circle cx="510" cy="255" r="78" fill="#e8e4f5" stroke="#8a8a9a" stroke-width="2.5" opacity="0.35"/>
      <circle cx="510" cy="255" r="78" fill="none" stroke="#c4c4d8" stroke-width="2" opacity="0.8"/>

      <!-- Cat face inside visor -->
      <!-- Face fur -->
      <ellipse cx="510" cy="262" rx="52" ry="48" fill="#f0e6d8"/>
      <!-- Darker ear/top fur -->
      <path d="M 470 232 Q 490 218 512 220 Q 534 218 552 232 Q 545 245 512 245 Q 478 245 470 232 Z" fill="#d8c8b0"/>
      <!-- Eyes (happy/content) -->
      <ellipse cx="487" cy="255" rx="12" ry="14" fill="#fff"/>
      <ellipse cx="533" cy="255" rx="12" ry="14" fill="#fff"/>
      <circle cx="489" cy="257" r="8" fill="#3ac04a"/>
      <circle cx="535" cy="257" r="8" fill="#3ac04a"/>
      <ellipse cx="489" cy="257" rx="3" ry="7" fill="#111"/>
      <ellipse cx="535" cy="257" rx="3" ry="7" fill="#111"/>
      <circle cx="492" cy="253" r="2.5" fill="#fff"/>
      <circle cx="538" cy="253" r="2.5" fill="#fff"/>
      <!-- Blush -->
      <ellipse cx="473" cy="275" rx="7" ry="4" fill="#ff9ec4" opacity="0.6"/>
      <ellipse cx="547" cy="275" rx="7" ry="4" fill="#ff9ec4" opacity="0.6"/>
      <!-- Nose -->
      <path d="M 505 272 L 515 272 L 510 280 Z" fill="#ff9ec4"/>
      <!-- Mouth (smile) -->
      <path d="M 500 283 Q 510 292 520 283" fill="none" stroke="#8a5a4a" stroke-width="2" stroke-linecap="round"/>
      <!-- Whiskers -->
      <g stroke="#a89880" stroke-width="1.5" stroke-linecap="round" opacity="0.8">
        <line x1="455" y1="268" x2="480" y2="272"/>
        <line x1="455" y1="280" x2="480" y2="280"/>
        <line x1="565" y1="268" x2="540" y2="272"/>
        <line x1="565" y1="280" x2="540" y2="280"/>
      </g>

      <!-- Helmet visor reflection -->
      <path d="M 470 220 Q 490 205 515 208 Q 535 212 540 225 Q 520 218 500 222 Q 485 226 470 220 Z"
            fill="#7ff0ff" opacity="0.5"/>
      <ellipse cx="478" cy="230" rx="8" ry="14" fill="#ffffff" opacity="0.6" transform="rotate(-25 478 230)"/>

      <!-- Visor sparkle -->
      <g class="visor-sparkle">
        <path d="M 500 240 L 504 232 L 508 240 L 516 244 L 508 248 L 504 256 L 500 248 L 492 244 Z" fill="#ffffff"/>
      </g>

      <!-- Antenna on helmet -->
      <line x1="510" y1="180" x2="510" y2="150" stroke="#8a84a6" stroke-width="3" stroke-linecap="round"/>
      <circle class="blinker" cx="510" cy="147" r="5" fill="#ff5a8a"/>
      <circle cx="510" cy="147" r="12" fill="url(#glowGrad)" opacity="0.6"/>
    </g>
  </g>

  <!-- Subtle motion lines behind board -->
  <g stroke="#7ff0ff" stroke-width="2" stroke-linecap="round" opacity="0.35">
    <line x1="260" y1="560" x2="200" y2="562"/>
    <line x1="250" y1="575" x2="185" y2="578"/>
    <line x1="270" y1="590" x2="215" y2="592"/>
    <line x1="255" y1="545" x2="210" y2="546"/>
  </g>
</svg>
</div>
</body>
</html>
```