Models 44

MiniMax M3.1 Flash

by MiniMaxReasoningClean
Open in new window

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

How it went

Total time
1 min 27 s
Cost
$0.0097
Output tokens
16,101
Spent thinking
7,518 tokens
Speed
185.9 tok/s
Console errors
0
First token after
560 ms
First visible text after
50.2 s
Prompt tokens
510
Code size
21.5 KB
Finish reason
stop
Served by
Together
Model id
minimax/minimax-m3.1-flash
Reasoning sent
model default
Max output
524,288 tokens
Generated
Nov 13, 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 · 361 lines

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1200 800" preserveAspectRatio="xMidYMid meet" role="img" aria-labelledby="title desc" style="display:block;background:#070a1a">
  <title id="title">Astronaut cat skateboarding on the moon</title>
  <desc id="desc">A cheerful orange cat in a white spacesuit rides a tilted skateboard above the lunar surface, with Earth glowing in a starry sky.</desc>

  <defs>
    <linearGradient id="space" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#050818"/>
      <stop offset=".52" stop-color="#121536"/>
      <stop offset="1" stop-color="#251b46"/>
    </linearGradient>
    <radialGradient id="nebulaPink">
      <stop offset="0" stop-color="#e862a9" stop-opacity=".38"/>
      <stop offset=".55" stop-color="#9f4ed0" stop-opacity=".13"/>
      <stop offset="1" stop-color="#9f4ed0" stop-opacity="0"/>
    </radialGradient>
    <radialGradient id="nebulaBlue">
      <stop offset="0" stop-color="#43c7ef" stop-opacity=".28"/>
      <stop offset=".55" stop-color="#3d72df" stop-opacity=".12"/>
      <stop offset="1" stop-color="#3d72df" stop-opacity="0"/>
    </radialGradient>
    <radialGradient id="earthOcean" cx=".35" cy=".3" r=".85">
      <stop offset="0" stop-color="#6de8ff"/>
      <stop offset=".45" stop-color="#278ad1"/>
      <stop offset="1" stop-color="#173e85"/>
    </radialGradient>
    <linearGradient id="earthShade" x1="0" y1="0" x2="1" y2=".4">
      <stop offset=".3" stop-color="#06143c" stop-opacity="0"/>
      <stop offset="1" stop-color="#030a24" stop-opacity=".78"/>
    </linearGradient>
    <linearGradient id="moon" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#e4ebf5"/>
      <stop offset=".32" stop-color="#b9c5d7"/>
      <stop offset="1" stop-color="#75839d"/>
    </linearGradient>
    <radialGradient id="crater" cx=".38" cy=".32" r=".72">
      <stop offset="0" stop-color="#8290a9"/>
      <stop offset=".58" stop-color="#aebbd0"/>
      <stop offset="1" stop-color="#dde5f1"/>
    </radialGradient>
    <linearGradient id="suit" x1=".15" y1="0" x2=".85" y2="1">
      <stop offset="0" stop-color="#ffffff"/>
      <stop offset=".52" stop-color="#e9f0f8"/>
      <stop offset="1" stop-color="#b9c8dc"/>
    </linearGradient>
    <linearGradient id="suitSide" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#c5d1e2"/>
      <stop offset="1" stop-color="#8fa2bd"/>
    </linearGradient>
    <linearGradient id="visor" x1=".15" y1="0" x2=".85" y2="1">
      <stop offset="0" stop-color="#294a70"/>
      <stop offset=".48" stop-color="#112a48"/>
      <stop offset="1" stop-color="#071528"/>
    </linearGradient>
    <linearGradient id="catFur" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#ffd095"/>
      <stop offset="1" stop-color="#ef9f58"/>
    </linearGradient>
    <linearGradient id="deck" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#ffffff"/>
      <stop offset="1" stop-color="#b8c8de"/>
    </linearGradient>
    <filter id="blur32" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="32"/>
    </filter>
    <filter id="glow" x="-80%" y="-80%" width="260%" height="260%">
      <feGaussianBlur stdDeviation="8" result="b"/>
      <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
    </filter>
    <filter id="softShadow" x="-30%" y="-30%" width="160%" height="170%">
      <feDropShadow dx="0" dy="10" stdDeviation="10" flood-color="#030616" flood-opacity=".4"/>
    </filter>
    <filter id="groundBlur" x="-50%" y="-100%" width="200%" height="300%">
      <feGaussianBlur stdDeviation="9"/>
    </filter>
    <clipPath id="earthClip">
      <circle cx="0" cy="0" r="90"/>
    </clipPath>
    <g id="spark">
      <path d="M0-9 2.2-2.2 9 0 2.2 2.2 0 9-2.2 2.2-9 0-2.2-2.2Z" fill="#e8f7ff"/>
    </g>
  </defs>

  <!-- Deep space -->
  <rect width="1200" height="800" fill="url(#space)"/>
  <ellipse cx="250" cy="190" rx="300" ry="205" fill="url(#nebulaPink)" filter="url(#blur32)"/>
  <ellipse cx="795" cy="165" rx="350" ry="235" fill="url(#nebulaBlue)" filter="url(#blur32)"/>
  <ellipse cx="1080" cy="520" rx="270" ry="180" fill="url(#nebulaPink)" opacity=".42" filter="url(#blur32)"/>

  <!-- Distant stars -->
  <g fill="#ffffff" opacity=".75">
    <circle cx="62" cy="188" r="2"/><circle cx="118" cy="74" r="1.6"/><circle cx="178" cy="287" r="1.8"/>
    <circle cx="229" cy="121" r="2.2"/><circle cx="287" cy="61" r="1.3"/><circle cx="334" cy="246" r="1.7"/>
    <circle cx="389" cy="143" r="2.1"/><circle cx="431" cy="331" r="1.4"/><circle cx="474" cy="86" r="1.8"/>
    <circle cx="531" cy="190" r="1.5"/><circle cx="588" cy="64" r="2.2"/><circle cx="650" cy="133" r="1.4"/>
    <circle cx="702" cy="270" r="1.9"/><circle cx="747" cy="74" r="1.6"/><circle cx="805" cy="213" r="1.3"/>
    <circle cx="848" cy="326" r="2.1"/><circle cx="903" cy="104" r="1.7"/><circle cx="1116" cy="73" r="1.6"/>
    <circle cx="1164" cy="256" r="2.3"/><circle cx="1087" cy="335" r="1.5"/><circle cx="967" cy="402" r="1.8"/>
    <circle cx="153" cy="412" r="1.5"/><circle cx="85" cy="527" r="1.9"/><circle cx="352" cy="452" r="1.4"/>
    <circle cx="1102" cy="456" r="1.7"/><circle cx="61" cy="348" r="1.2"/><circle cx="1139" cy="587" r="1.5"/>
  </g>
  <g fill="#9de8ff" opacity=".8">
    <circle cx="92" cy="132" r="2.3"/><circle cx="266" cy="201" r="2"/><circle cx="367" cy="101" r="1.7"/>
    <circle cx="518" cy="268" r="2.4"/><circle cx="673" cy="57" r="1.9"/><circle cx="815" cy="285" r="2.2"/>
    <circle cx="938" cy="34" r="1.8"/><circle cx="1052" cy="258" r="2.1"/><circle cx="1168" cy="132" r="2.4"/>
    <circle cx="208" cy="368" r="2"/><circle cx="402" cy="402" r="1.9"/><circle cx="730" cy="391" r="1.6"/>
  </g>
  <g fill="#ffd99a" opacity=".85">
    <circle cx="307" cy="321" r="2.1"/><circle cx="626" cy="218" r="1.8"/><circle cx="876" cy="57" r="2"/>
    <circle cx="1006" cy="278" r="1.7"/><circle cx="43" cy="256" r="1.9"/>
  </g>
  <g opacity=".9">
    <use href="#spark" transform="translate(154 108) scale(.85)"/>
    <use href="#spark" transform="translate(369 188) scale(.65)"/>
    <use href="#spark" transform="translate(574 118) scale(.75)"/>
    <use href="#spark" transform="translate(727 186) scale(.95)"/>
    <use href="#spark" transform="translate(889 271) scale(.6)"/>
    <use href="#spark" transform="translate(1118 196) scale(.8)"/>
    <use href="#spark" transform="translate(1024 72) scale(.55)"/>
    <use href="#spark" transform="translate(238 333) scale(.55)"/>
  </g>
  <g opacity=".5">
    <path d="M74 96 182 143" stroke="#a6eaff" stroke-width="2" stroke-linecap="round"/>
    <circle cx="74" cy="96" r="3" fill="#e7fbff"/>
  </g>

  <!-- Earth -->
  <g transform="translate(990 158)">
    <circle r="106" fill="#4ccaff" opacity=".12" filter="url(#glow)"/>
    <circle r="96" fill="none" stroke="#8be8ff" stroke-width="2" opacity=".28"/>
    <circle r="90" fill="url(#earthOcean)"/>
    <g clip-path="url(#earthClip)">
      <path d="M-73-44C-58-66-35-72-19-59L-9-43-20-31-17-13-35-1-53-7-66-23Z" fill="#46c99d"/>
      <path d="M-48-50-35-62-20-54-29-38-44-35Z" fill="#8ce2ac" opacity=".8"/>
      <path d="M13-57C35-64 62-48 78-25L67-9 59 10 42 20 27 11 22-5 3-14 5-35Z" fill="#4bd3a3"/>
      <path d="M26-41 46-48 64-34 51-23 33-24Z" fill="#99e9b7" opacity=".8"/>
      <path d="M-44 29C-25 16-3 22 7 42L1 61-20 74-41 61-51 43Z" fill="#54cfa1"/>
      <path d="M-29 39-13 32 1 44-6 58-23 56Z" fill="#a1e9ba" opacity=".72"/>
      <g fill="none" stroke="#ffffff" stroke-linecap="round" opacity=".34">
        <path d="M-84-11C-61-25-42-18-26-31S10-47 31-39 65-26 85-32" stroke-width="9"/>
        <path d="M-72 31C-49 17-30 28-12 21S29 3 50 9 70 17 89 9" stroke-width="7"/>
        <path d="M-49-57C-32-47-21-53-6-45" stroke-width="5"/>
      </g>
      <circle r="90" fill="url(#earthShade)"/>
    </g>
    <path d="M-78-32A90 90 0 0 1 18-88" fill="none" stroke="#bff6ff" stroke-width="5" opacity=".52" stroke-linecap="round"/>
  </g>
  <path d="M850 277C920 325 1042 318 1118 259" fill="none" stroke="#76dfff" stroke-width="1.5" stroke-dasharray="5 10" opacity=".18"/>

  <!-- Mission badge -->
  <g transform="translate(56 54)" opacity=".92">
    <rect width="226" height="66" rx="17" fill="#0c1532" stroke="#75ddf4" stroke-opacity=".65"/>
    <g fill="#ffc367" transform="translate(28 25)">
      <ellipse cx="7" cy="14" rx="10" ry="8"/>
      <circle cx="-6" cy="1" r="4"/><circle cx="2" cy="-4" r="4"/><circle cx="10" cy="-4" r="4"/><circle cx="17" cy="2" r="4"/>
    </g>
    <text x="58" y="28" fill="#f2fbff" font-family="Arial, Helvetica, sans-serif" font-size="15" font-weight="700" letter-spacing="2.4">MOON PATROL</text>
    <text x="58" y="47" fill="#8eb8da" font-family="Arial, Helvetica, sans-serif" font-size="10" letter-spacing="2">MEOW-1 / LUNAR UNIT</text>
  </g>

  <!-- Lunar landscape -->
  <path d="M0 620C153 588 293 594 437 614C610 639 771 618 925 592C1041 573 1120 580 1200 601V800H0Z" fill="url(#moon)"/>
  <path d="M0 620C153 588 293 594 437 614C610 639 771 618 925 592C1041 573 1120 580 1200 601" fill="none" stroke="#f4f8ff" stroke-width="4" opacity=".65"/>

  <!-- Craters -->
  <g>
    <ellipse cx="128" cy="703" rx="64" ry="23" fill="url(#crater)" opacity=".95"/>
    <path d="M72 697C88 677 150 673 180 693" fill="none" stroke="#eef4fc" stroke-width="5" opacity=".65"/>
    <ellipse cx="288" cy="759" rx="86" ry="27" fill="url(#crater)" opacity=".78"/>
    <ellipse cx="826" cy="721" rx="77" ry="25" fill="url(#crater)" opacity=".9"/>
    <path d="M759 712C782 694 850 696 884 714" fill="none" stroke="#edf4fd" stroke-width="5" opacity=".62"/>
    <ellipse cx="1021" cy="673" rx="52" ry="17" fill="url(#crater)" opacity=".82"/>
    <ellipse cx="1124" cy="751" rx="100" ry="29" fill="url(#crater)" opacity=".74"/>
    <ellipse cx="470" cy="745" rx="55" ry="17" fill="url(#crater)" opacity=".65"/>
    <ellipse cx="691" cy="770" rx="42" ry="14" fill="url(#crater)" opacity=".6"/>
    <g fill="#687693" opacity=".8">
      <path d="M221 674l15-10 16 9-4 13h-23Z"/>
      <path d="M742 663l13-8 14 8-3 11h-20Z"/>
      <path d="M946 731l19-12 21 11-5 17h-29Z"/>
      <path d="M356 716l12-8 13 7-3 11h-18Z"/>
    </g>
  </g>

  <!-- Small lunar flag -->
  <g transform="translate(954 486)" opacity=".92">
    <ellipse cx="0" cy="114" rx="28" ry="7" fill="#65728c" opacity=".55"/>
    <path d="M0 0V111" stroke="#e6eef8" stroke-width="5" stroke-linecap="round"/>
    <path d="M5 4C34-4 64 16 101 5L97 49C62 61 35 42 5 51Z" fill="#ff706b" stroke="#b74458" stroke-width="2"/>
    <path d="M8 8C35 1 62 18 96 9" fill="none" stroke="#ffb0a6" stroke-width="3" opacity=".6"/>
    <g fill="#fff7ed" transform="translate(51 28)">
      <ellipse cx="0" cy="8" rx="10" ry="8"/>
      <circle cx="-11" cy="-4" r="4"/><circle cx="-3" cy="-10" r="4"/><circle cx="7" cy="-10" r="4"/><circle cx="14" cy="-3" r="4"/>
    </g>
  </g>

  <!-- Board shadow and moon dust -->
  <ellipse cx="576" cy="688" rx="165" ry="23" fill="#33415b" opacity=".36" filter="url(#groundBlur)"/>
  <g fill="#e8f0fa" opacity=".9">
    <ellipse cx="409" cy="650" rx="54" ry="18"/>
    <ellipse cx="371" cy="660" rx="39" ry="13"/>
    <ellipse cx="431" cy="669" rx="36" ry="11" opacity=".72"/>
    <circle cx="345" cy="649" r="9"/><circle cx="392" cy="637" r="7" opacity=".7"/>
  </g>
  <g fill="none" stroke="#dce8f6" stroke-linecap="round">
    <path d="M308 628Q353 618 391 629" stroke-width="5" opacity=".5"/>
    <path d="M285 652Q343 642 383 652" stroke-width="4" opacity=".38"/>
    <path d="M340 679Q374 673 406 677" stroke-width="3" opacity=".33"/>
  </g>

  <!-- Motion streaks -->
  <g fill="none" stroke-linecap="round">
    <path d="M273 495H387" stroke="#74e6ff" stroke-width="5" opacity=".55"/>
    <path d="M222 525H341" stroke="#a8f2ff" stroke-width="4" opacity=".35"/>
    <path d="M302 562H399" stroke="#ffffff" stroke-width="3" opacity=".38"/>
    <path d="M745 549H831" stroke="#74e6ff" stroke-width="4" opacity=".32"/>
  </g>

  <!-- Astronaut cat -->
  <g filter="url(#softShadow)">
    <!-- Tail and backpack -->
    <path d="M493 541C461 569 434 549 443 522C450 500 476 499 483 516C488 527 477 535 468 527" fill="none" stroke="#d98d49" stroke-width="18" stroke-linecap="round"/>
    <path d="M458 546l12-10M444 526l14 1M474 511l-3 13" fill="none" stroke="#bb6d38" stroke-width="5" stroke-linecap="round" opacity=".75"/>
    <rect x="474" y="434" width="64" height="124" rx="22" fill="url(#suitSide)" stroke="#7488a5" stroke-width="3"/>
    <rect x="466" y="457" width="25" height="74" rx="12" fill="#6f829f"/>
    <rect x="473" y="470" width="11" height="46" rx="5" fill="#aec0d5" opacity=".8"/>
    <path d="M487 434Q505 412 523 433" fill="none" stroke="#d9e3ef" stroke-width="9" stroke-linecap="round"/>
    <path d="M510 444C471 422 474 380 507 360" fill="none" stroke="#667b98" stroke-width="12" stroke-linecap="round"/>
    <path d="M510 444C471 422 474 380 507 360" fill="none" stroke="#c7d5e6" stroke-width="6" stroke-linecap="round"/>

    <!-- Arms -->
    <path d="M523 462Q484 451 459 414Q446 391 438 363" fill="none" stroke="#91a4be" stroke-width="42" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M523 462Q484 451 459 414Q446 391 438 363" fill="none" stroke="url(#suit)" stroke-width="34" stroke-linecap="round" stroke-linejoin="round"/>
    <circle cx="459" cy="411" r="18" fill="#d7e1ed" stroke="#9fb0c7" stroke-width="3"/>
    <path d="M440 369l-7 18" fill="none" stroke="#8fa2bc" stroke-width="7"/>

    <path d="M642 461Q691 463 719 425L741 390" fill="none" stroke="#91a4be" stroke-width="42" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M642 461Q691 463 719 425L741 390" fill="none" stroke="url(#suit)" stroke-width="34" stroke-linecap="round" stroke-linejoin="round"/>
    <circle cx="717" cy="426" r="18" fill="#d7e1ed" stroke="#9fb0c7" stroke-width="3"/>
    <path d="M736 396l11 13" fill="none" stroke="#8fa2bc" stroke-width="7"/>

    <!-- Waving glove -->
    <g transform="translate(424 337) rotate(-18)">
      <path d="M-13 10C-23 4-22-9-12-14L-17-26C-20-35-12-40-7-31L-3-22L-5-39C-6-49 5-50 7-39L10-23L14-36C18-45 28-40 26-30L22-14C32-10 33 4 26 12L13 24C5 29-7 21-13 10Z" fill="url(#suit)" stroke="#8fa2bc" stroke-width="3" stroke-linejoin="round"/>
      <path d="M-6-18Q0-12 2-3M10-21Q7-13 7-7" fill="none" stroke="#a7b8cb" stroke-width="2.5" stroke-linecap="round"/>
    </g>

    <!-- Balancing glove -->
    <g transform="translate(753 372) rotate(24)">
      <path d="M-13-11C-25-7-30 6-22 16L-6 28C4 35 15 29 18 18L22 1C24-8 16-14 11-8L6-1L8-18C9-28-2-31-6-21L-9-11L-15-24C-20-32-29-25-25-17Z" fill="url(#suit)" stroke="#8fa2bc" stroke-width="3" stroke-linejoin="round"/>
      <path d="M-8 1Q0 6 4 14M8-8L6 1" fill="none" stroke="#a7b8cb" stroke-width="2.5" stroke-linecap="round"/>
    </g>

    <!-- Torso -->
    <path d="M520 431Q585 413 650 430Q666 455 662 510L655 553Q649 577 620 584H550Q521 577 515 553L508 510Q504 455 520 431Z" fill="url(#suit)" stroke="#8da0bb" stroke-width="4"/>
    <path d="M637 432Q659 456 654 512L648 551Q642 572 617 579Q637 551 638 521Z" fill="#9fb1c9" opacity=".5"/>
    <path d="M523 452Q585 433 646 452" fill="none" stroke="#ffffff" stroke-width="4" opacity=".7"/>
    <path d="M522 553Q585 566 650 553" fill="none" stroke="#8498b3" stroke-width="4"/>
    <path d="M528 567Q585 578 644 566" fill="none" stroke="#ffffff" stroke-width="3" opacity=".55"/>

    <!-- Chest control panel -->
    <rect x="546" y="468" width="76" height="51" rx="11" fill="#263c59" stroke="#8195b0" stroke-width="3"/>
    <rect x="555" y="477" width="33" height="19" rx="4" fill="#63d7e4" opacity=".85"/>
    <path d="M559 491 565 485 570 489 577 481 582 486" fill="none" stroke="#eaffff" stroke-width="2"/>
    <circle cx="603" cy="481" r="5" fill="#ffcb67"/>
    <circle cx="603" cy="497" r="5" fill="#ff7d83"/>
    <circle cx="557" cy="508" r="4" fill="#a7f1ce"/>
    <path d="M570 508h43" stroke="#607a99" stroke-width="4" stroke-linecap="round"/>

    <!-- Mission patch -->
    <circle cx="626" cy="538" r="17" fill="#ffc65f" stroke="#8d6a38" stroke-width="2"/>
    <g fill="#513e35" transform="translate(626 539)">
      <ellipse cx="0" cy="4" rx="7" ry="5"/>
      <circle cx="-7" cy="-3" r="2.7"/><circle cx="-2" cy="-7" r="2.7"/><circle cx="4" cy="-7" r="2.7"/><circle cx="8" cy="-2" r="2.7"/>
    </g>

    <!-- Skateboard -->
    <g transform="rotate(-7 590 650)">
      <path d="M500 667v10h27M680 667v10h-27" fill="none" stroke="#b8c7da" stroke-width="7" stroke-linecap="round"/>
      <circle cx="501" cy="683" r="17" fill="#25324b" stroke="#9fb1c9" stroke-width="4"/>
      <circle cx="501" cy="683" r="6" fill="#d8e4f1"/>
      <circle cx="679" cy="683" r="17" fill="#25324b" stroke="#9fb1c9" stroke-width="4"/>
      <circle cx="679" cy="683" r="6" fill="#d8e4f1"/>
      <path d="M444 650C520 670 660 670 736 650L740 661C660 685 520 685 440 661Z" fill="#8fa3bd" stroke="#637694" stroke-width="2"/>
      <path d="M444 646C520 665 660 665 736 646Q728 658 713 659C640 678 535 678 467 659Q452 658 444 646Z" fill="url(#deck)" stroke="#6e83a0" stroke-width="2"/>
      <path d="M521 657Q590 671 659 657" fill="none" stroke="#ff786b" stroke-width="8" stroke-linecap="round"/>
      <path d="M470 654Q590 673 710 654" fill="none" stroke="#ffffff" stroke-width="3" opacity=".75"/>
    </g>

    <!-- Legs -->
    <path d="M551 556Q538 585 523 610L516 632" fill="none" stroke="#8ea1bb" stroke-width="40" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M551 556Q538 585 523 610L516 632" fill="none" stroke="url(#suit)" width="32" stroke-width="32" stroke-linecap="round" stroke-linejoin="round"/>
    <circle cx="522" cy="607" r="18" fill="#d4dfec" stroke="#8fa2bc" stroke-width="3"/>
    <path d="M618 556Q657 565 676 595Q688 612 665 630" fill="none" stroke="#8ea1bb" stroke-width="40" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M618 556Q657 565 676 595Q688 612 665 630" fill="none" stroke="url(#suit)" stroke-width="32" stroke-linecap="round" stroke-linejoin="round"/>
    <circle cx="673" cy="601" r="18" fill="#d4dfec" stroke="#8fa2bc" stroke-width="3"/>

    <!-- Boots -->
    <path d="M499 632Q512 622 529 630L552 639Q558 646 551 653H498Q490 645 499 632Z" fill="url(#suit)" stroke="#879bb7" stroke-width="3"/>
    <path d="M498 649H551" stroke="#5f718d" stroke-width="5" stroke-linecap="round"/>
    <path d="M645 631Q658 622 675 630L696 639Q702 646 696 653H644Q636 644 645 631Z" fill="url(#suit)" stroke="#879bb7" stroke-width="3"/>
    <path d="M644 649H696" stroke="#5f718d" stroke-width="5" stroke-linecap="round"/>

    <!-- Helmet -->
    <ellipse cx="585" cy="433" rx="78" ry="23" fill="#8296b2" stroke="#d6e0ec" stroke-width="5"/>
    <ellipse cx="585" cy="428" rx="66" ry="15" fill="#506781"/>
    <circle cx="585" cy="328" r="112" fill="url(#suit)" stroke="#8ea1bb" stroke-width="5"/>
    <path d="M503 280A99 99 0 0 1 625 241" fill="none" stroke="#ffffff" stroke-width="10" opacity=".6" stroke-linecap="round"/>
    <circle cx="585" cy="328" r="91" fill="#172b47" stroke="#7186a5" stroke-width="8"/>
    <circle cx="585" cy="328" r="83" fill="url(#visor)"/>

    <!-- Cat ears -->
    <path d="M526 275 531 219Q532 209 541 216L573 250Z" fill="url(#catFur)" stroke="#7d4b3a" stroke-width="3" stroke-linejoin="round"/>
    <path d="M597 250 628 216Q637 209 638 219L644 275Z" fill="url(#catFur)" stroke="#7d4b3a" stroke-width="3" stroke-linejoin="round"/>
    <path d="M536 258 539 231 558 252Z" fill="#f58d9b"/>
    <path d="M612 252 631 231 635 258Z" fill="#f58d9b"/>

    <!-- Cat head -->
    <ellipse cx="585" cy="307" rx="65" ry="58" fill="url(#catFur)" stroke="#6f4438" stroke-width="3"/>
    <path d="M527 287Q540 277 552 283M618 283Q631 278 643 288" fill="none" stroke="#fbe0b5" stroke-width="5" stroke-linecap="round"/>
    <g fill="none" stroke="#c97c3f" stroke-width="5" stroke-linecap="round">
      <path d="M565 258l8 19M585 253v23M605 258l-8 19"/>
      <path d="M533 322l13 3M637 322l-13 3"/>
    </g>

    <!-- Eyes -->
    <ellipse cx="559" cy="300" rx="14" ry="17" fill="#b8ffe5" stroke="#274e49" stroke-width="2"/>
    <ellipse cx="611" cy="300" rx="14" ry="17" fill="#b8ffe5" stroke="#274e49" stroke-width="2"/>
    <ellipse cx="560" cy="301" rx="4" ry="13" fill="#153d35"/>
    <ellipse cx="610" cy="301" rx="4" ry="13" fill="#153d35"/>
    <circle cx="554" cy="294" r="4" fill="#ffffff"/>
    <circle cx="605" cy="294" r="4" fill="#ffffff"/>

    <!-- Muzzle -->
    <ellipse cx="572" cy="332" rx="19" ry="14" fill="#ffe6c2"/>
    <ellipse cx="598" cy="332" rx="19" ry="14" fill="#ffe6c2"/>
    <path d="M577 325Q585 320 593 325L585 333Z" fill="#f06f84" stroke="#a9445c" stroke-width="1.5"/>
    <path d="M585 333V338M585 338Q577 344 571 337M585 338Q593 344 599 337" fill="none" stroke="#714237" stroke-width="2.5" stroke-linecap="round"/>
    <g fill="none" stroke="#8b563d" stroke-width="2" stroke-linecap="round" opacity=".9">
      <path d="M549 326 518 318M548 334 516 334M621 326 652 318M622 334 654 334"/>
    </g>

    <!-- Visor reflections -->
    <path d="M521 289C531 260 558 244 585 242" fill="none" stroke="#ffffff" stroke-width="8" opacity=".25" stroke-linecap="round"/>
    <path d="M531 279Q539 264 554 257" fill="none" stroke="#ffffff" stroke-width="4" opacity=".38" stroke-linecap="round"/>
    <path d="M646 283Q661 308 654 336" fill="none" stroke="#84e8ff" stroke-width="5" opacity=".18" stroke-linecap="round"/>
    <circle cx="525" cy="337" r="5" fill="#9eb2ca"/>
    <circle cx="645" cy="337" r="5" fill="#9eb2ca"/>
  </g>

  <!-- Foreground glints and pebbles -->
  <g fill="#f2f7ff" opacity=".8">
    <circle cx="388" cy="710" r="3"/>
    <circle cx="412" cy="728" r="2"/>
    <circle cx="763" cy="704" r="2.5"/>
    <circle cx="785" cy="721" r="1.8"/>
  </g>
  <g fill="#53617b" opacity=".85">
    <path d="M376 744l11-7 12 6-3 10h-17Z"/>
    <path d="M768 751l13-9 15 8-4 12h-20Z"/>
    <path d="M1075 704l10-6 11 6-3 8h-15Z"/>
  </g>
</svg>
Reasoning trace (7,518 tokens)
We need create a self-contained SVG of astronaut cat skateboarding on moon. Output exactly one fenced code block containing complete file, ```svg since task asks SVG. Need make beautiful detailed vector scene, viewBox maybe 1280x800, adapt down to 375. No external resources. Must ensure no text before/after.

Need craft SVG with gradients, shapes, stars, Earth, moon surface, cat in astronaut suit on skateboard, motion lines, maybe comedic. Need meaningful visible on first paint. Static SVG fine.

We should output SVG file directly, not HTML. Need ensure valid XML-ish. Include xmlns, viewBox, role img, title desc. Maybe width=100% height=100% style background. Aspect ratio. Consider iframe 1280x800 – set width="100%" height="100%" preserveAspectRatio="xMidYMid meet". Actually SVG with viewBox 0 0 1200 800.

Let's design a gorgeous illustration:
- Deep space gradient background (navy/indigo).
- Subtle nebula radial gradients.
- Stars various circles, twinkle paths.
- Earth in upper right partially visible with glow, continents stylized in cyan.
- Moon surface bottom: big ellipse / curved horizon across lower portion, craters.
- Cat astronaut center-left riding skateboard to the right, mid-air maybe board tilted. Astronaut cat:
  - helmet round with glass visor (big oval) with reflection, cat ears peeking on top of helmet? Cat face inside visor with ears, eyes, nose, whiskers.
  - white spacesuit body with rounded rectangle, backpack, arms out for balance, legs bent with boots.
  - one arm waving, other out.
  - tail curling.
- Skateboard tilted slightly, deck with wheels/trucks, flame-ish dust trail or speed lines.
- Moon dust puff beneath.
- Motion streaks, little speed arcs.
- Flag maybe? "MOON CAT" text? Could add small mission patch. Maybe title text at bottom-left "MOON PATROL" and sub "ZERO-G FOREVER" but tasteful. Task asks draw, no need text. Could add small caption.

Need balance positions. Let's build in 1200x800 coordinate.

Background: rect.
Radial nebula ellipses with blur filter? Filters allowed inline, use feGaussianBlur. Keep performance fine.

Stars: many circles with varying opacity, cross sparkles.

Earth upper right around x=1000,y=170,r=100 partially behind edge? Actually visible circle. Add glow. Continents simplified paths in blue-green. Clouds swirls with opacity.

Moon horizon: path from 0,640 C 300,560 520,600 760,600 C 960,600 1100,540 1200,555 L1200,800 L0,800 Z fill gradient light gray. But astronaut at around x=560,y=430, board at y=590. Moon surface beneath. Horizon maybe at y=600, astronaut above. Craters as ellipses.

Maybe large Earth in upper right x=980 y=150 radius 92. Small satellite in upper left? Could add rocket in far distance maybe small. Keep focus.

Cat astronaut:
Let's detail group transform translate(480 320) maybe.

Positions:
Helmet center (600,340) r=115. Body below from x=520..690 y=430..600. Board at y=625 tilted -8deg around x=610.

Better coordinate absolute to control.

Helmet: outer circle at (585,330) r=112, fill suit gradient white with stroke #b8c6dc.
Neck ring at bottom: ellipse at (585,425) rx=78 ry=22, behind body? Layer order: backpack behind body, tail behind, helmet neck behind body.

Visor: circle/oval at (585,318) rx=86 ry=80 fill deep gradient #10233f to #2a4b73, stroke. Cat face inside:
- Ears: path M535 275 L548 225 L570 260 etc; right ear similarly.
- Head ellipse center 585,315 rx=62 ry=55 fill #f4b56a (orange tabby).
- forehead stripes.
- eyes big green circles with slit pupils and highlights.
- muzzle two ellipses white cream, nose triangle, mouth.
- whiskers lines.
- maybe face slight smirk.
- visor reflection arc and shine.

Helmet outer includes ear? Ears inside visor should look like cat ears through glass.

Suit body: path rounded torso with chest panel. Maybe body from (515,430) to (660,575), rounded. Fill white gradient. Backpack: rounded rect x=485 y=438 width 55 height 100, blue-gray; hose to helmet maybe.
Arms: Left arm extending up-left waving: shoulder at (520,455) to elbow (445,410) to hand (425,345). Use thick strokes with round caps, segmented joint circles, glove shape. Right arm extending right for balance: from (650,460) to (720,425) to (745,380). Glove.
Hands: cat paw gloves maybe with three bumps.

Legs: from torso lower (550,575) to knee (520,625) to foot (555,660)? Another leg (620,575) to (680,610) to foot (640,650)? Board around y=655. In space-ish skate pose.

Actually skateboard deck at y=655 tilted -9°. Astronaut's feet on board. Dust trail behind.

Let's map scene:
Moon horizon around y=610; skateboard hovering y=640. Craters below.

Cat:
- Backpack left x=470 y=440.
- Torso center x=585, y=500.
- Helmet center x=585,y=335.
- left arm waves at x=445.
- right arm balance to x=735.
- legs: left leg down-left to foot x=530,y=650; right leg down-right to foot x=645,y=648.
- board from x=450 to 730 around y=670.

Board group rotate(-8 590 660):
deck path M455 652 Q590 676 725 652 L727 664 Q590 692 453 668 Z perhaps deck thickness. Top deck with striped/taper shape.
trucks and wheels circles at 500,685 r=16 and 680,685 r=16, inner hubs. Since rotate.

Need draw board behind feet maybe draw after legs? Board should be behind feet but in front lower. Layer: board base first (trucks/wheels/deck) then legs over deck. Dust behind board.

Could use group transform="rotate(-8 590 655)" and draw deck then wheels. Wheels visible below.

Dust: puffs behind left of board (toward x&lt;450) in gray-white; speed streaks.

Astronaut body detail:
Torso path: M520 438 Q585 418 650 438 Q670 470 658 550 Q650 580 620 588 H552 Q520 582 512 550 Q500 470 520 438 Z. Use suit gradient. Belt? chest control panel rect x=560 y=470 w=56 h=45 rounded, dark blue, lights. Patch circle on shoulder, mission patch with tiny star/cat.
Seams lines.

Helmet neck ring at (585,430) should overlap torso top maybe draw before body? Actually draw helmet after torso so neck ring on top. Backpack behind body, arms maybe behind body, torso then helmet.

Arms draw before torso? Left arm wave: use path stroke white width 34, dark outline maybe a second stroke under. Use paths with linecap round, plus cuff and glove.
- path from (525,462) Q470,450 447,395 L430,352 with stroke #e9f0f8 width 34; under-stroke #aebfd3 width 40. Add elbow joint circle at 455,412. glove at end maybe rounded paw at (422,333) rotated, with fingers. Could draw simple mitten path.
- Right arm: from (645,462) Q700,455 725,415 L746,378. similar.

Glove details: white rounded shape with line separating fingers. The waving glove at x415,y335. Maybe mitt has three bumps.
Tail: orange striped tail curling out of backpack, behind: path M495 540 C450 570 440 530 462 510 C482 495 495 515 480 525, stroke orange width 18, darker stripes.

Helmet:
Outer rim circle r=114 fill gradient, stroke #c2cede 5. Outer side attachments? Earpads? visor circle r=88 with border 8 #8fa3bd. Reflection: top-left arc white opacity, plus ellipse shine.
Cat ears behind head within visor, orange.
Cat head large ellipse. Need eyes.

Star sparkles and decorative orbit path.

Bottom-left text maybe "MISSION: MOON MEOW" but user asked drawing; optional small badge "MEOW-1 / LUNAR PATROL" gives charm. Use system sans font inline? SVG text uses generic fonts, no external. But perhaps avoid because visual comparison to "SVG of astronaut cat" likely appreciates illustration. Could include title in lower left on moon surface but might clutter. Could add small caption "LUNAR ROVER? ABSOLUTELY NOT." No.

We want polished composition. Maybe add small flag on right with cat paw emblem planted on moon, providing depth. Flag at x=950, ground y=600 with pole to 470, flag flutter red/teal with paw. But focus center. Could add tiny rover in background left? Maybe subtle.

Let's structure:

&lt;svg xmlns viewBox="0 0 1200 800" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" role="img" aria-labelledby...&gt;
&lt;defs&gt;
linearGradient id space; radial nebulas; suit; visor; moon; earth; glow.
filter id softGlow, blur, shadow.
clipPath earthClip.
patterns? maybe.

Background rect.
Nebula groups with circles blurred.
Distant tiny planets.
Stars.
Earth group.
Orbit dashed line.
Small rocket? We can add tiny lunar lander on upper left? Hmm, Earth and stars enough.

Moon terrain:
- Horizon path fill moon grad.
- craters group: ellipses with darker rim and light inner. Place x=130,y=715 rx=60 etc. x=850,y=735. x=1010,y=630. The skateboard at 640, horizon line maybe 600.
- rocks small.

Dust and speed lines behind board.
Astronaut group.

Could add foreground moon rocks.

Let's think about scale and aesthetics. Background color #060b1e to #1b1840. Moon surface light bluish gray, contrasting dark suit shadows. Astronaut centered slightly left? Earth upper right balances. Cat at x585. Board spans 450-730. Great.

Earth group at (990,165) r=95. Glow circle r=115 opacity. Clip continents. Add continents paths. Clouds.
Maybe Earth has atmosphere arc. Add small moon? no.

Stars: many. Use white/cyan/gold circles. Twinkles as paths.

Nebula: two large blurred ellipses: pink at (280,160), cyan at (760,200). Low opacity.

Space grid? no.

Add shooting star at top-left.

Distant lunar module at x210,y515 maybe small to convey scene, but astronaut is main. Maybe tiny flag at x1000? Earth there. A small rover silhouette lower left on moon, but can distract. We can add a tiny lunar flag to right ground x=910 y=560, flag with cat paw, and a little trail. Yet the Earth occupies upper right, flag balances lower right. A flag is nice but more elements.

Let's include small flag at x930: pole from 935,620 to 935,500, red flag path to 1045,512 etc with a white paw. But moon ground starts y=600 at x930 so pole base on ground. It adds depth. Keep subtle (opacity .85).

Astronaut detailed.

Let's write SVG code with grouped elements, comments optional. Need valid XML. Avoid entities like & unescaped. Use standard.

Detailed shapes:

Defs:
- id="bg" linearGradient x1=0 y1=0 x2=1 y2=1.
- nebula radial.
- suit gradient.
- suitShade.
- visor gradient.
- glassShine maybe.
- moon gradient.
- crater radial.
- earth ocean gradient.
- earth land gradient.
- flame? no.
- glow filter with feGaussianBlur stdDeviation 6 and merge.
- blur20.
- shadow filter for astronaut drop shadow.

Stars:
~50 circles. Could write manually. Add group opacity etc.
Twinkle symbols with path lines. Use <g id="spark"> in defs and <use href="#spark" ...>. href should work. For older xlink not needed Chrome. Fine.
Maybe define star shape cross path M0 -8 L2 -2 L8 0 L2 2 L0 8 L-2 2 L-8 0 L-2 -2 Z.

Earth clip path id="earthClip" circle cx=985 cy=165 r=92.
Earth group:
circle cx=985 cy=165 r=104 fill none stroke cyan opacity .18 width 8 filter glow maybe.
circle r=92 fill url ocean.
clipped group:
  path continents e.g. "M925 78 C945 62 968 66 982 84 L1008 89 ...", but coordinates.
Could place continents relative easier with group transform translate(985 165). clipPath defined relative tricky; define clipPath with circle at 0 0 r 92, then group transform and clip path same group. <clipPath id="earthClip"><circle r="92"/></clipPath> applied to inner group inside translated group works because clip coordinates userSpaceOnUse relative to current group? clipPath userSpaceOnUse is in the coordinate system of referencing element, so yes within transformed group, circle 0 0.
Then circle and path. Continents:
 path d="M-72 -46 C-54 -68 -30 -73 -16 -57 L-6 -41 -24 -27 -19 -6 -36 3 -53 -6 -62 -25Z" etc.
 Another path "M14 -52 C38 -59 65 -42 76 -18 L60 -8 51 15 31 19 19 4 3 -6 6 -31Z".
 Another "M-35 31 C-18 18 2 25 6 44 L-4 66 -25 74 -41 59 -47 41Z"
Use fill #3fc6a7 and #6be0b5, darker overlay.
Clouds paths stroke white opacity .3, rounded.
terminator shade: circle r=92 fill url earthShade where transparent to dark at right.

Moon:
<path d="M0 620 C170 585 310 596 450 614 C640 640 790 610 930 588 C1040 570 1120 578 1200 600 L1200 800 H0Z" fill moon.
Maybe horizon stroke light.
Craters: ellipse shapes. Use radial gradient crater: from dark center? Typically shadow on one side. Define craterGrad radial with center .35 .4 #b9c5d8 to #6d7b95. ellipse fill plus inner highlight path.
Place at 140,700 r etc; 300,745; 820,710; 1010,665; 1100,745.
Distant crater ellipses near horizon.

Ground shadow under board ellipse x=590 y=680 maybe opacity .25 blur.

Dust puffs group fill #d8e3f2 opacity. Paths/ellipses behind skateboard toward left.

Speed lines stroke cyan/white.

Astronaut:
We need order and coordinates.

Let's draw board and legs separate:

Board group transform="rotate(-7 590 655)":
- wheel shadows? wheels at (500,684) and (678,684), r=16 fill #24304a stroke #8fa0bb 4; hub circle r=5.
- trucks: path from 500 670 L500 664 L515 662 etc stroke.
- deck bottom: path M448 650 Q590 674 732 650 L735 661 Q590 690 445 661 Z fill #b9c8dc stroke dark
- deck top: path M448 647 Q590 668 732 647 Q723 660 590 676 Q460 660 448 647 Z fill #f5f8ff.
Actually deck should curve ends: use path "M452 646 Q585 665 728 646 L740 652 Q728 664 712 661 Q590 682 468 661 L440 653 Q441 648 452 646Z". Complicated. Let's do:
bottom edge path M444 650 C520 670 660 670 736 650 L740 660 C660 684 520 684 440 660 Z fill #97a8c2.
top deck path M444 646 C520 665 660 665 736 646 Q728 658 713 659 C640 678 535 678 467 659 Q452 658 444 646 Z fill #eaf2ff stroke.
Add stripe in deck center: path M520 658 Q590 670 660 658 stroke #ff7a68 width 8.
Wheels under board at 500 and 680, y 682.
Since group rotates, okay.

Legs: draw after board so boots on top:
Left leg from hip (552,565) to knee (520,610) to boot at (520? board). Path with dark under stroke width 40 then white 32. Use rounded. Knee pad ellipse at 521,608. Boot shape at foot x=515-560,y=635-660 rotated -6.
Right leg from hip (620,565) to knee (665,605) to boot at 660? Actually skate stance: back foot at x=525, front foot at x=650. Right leg bent forward. Path M618 566 Q648 570 667 602 L655 628. White. Boot at 648,640. 
But board tilt, foot placements roughly. Board at y=650. Back foot boot centered 530,645; front foot centered 655,640.
Use leg paths:
Back: M548 560 Q535 590 520 618 L516 632, stroke suit.
Front: M620 560 Q666 570 680 600 Q688 615 665 632.
Add knee patches.

Boot shapes:
back: path M500 632 Q512 623 529 630 L551 639 Q556 646 550 652 L497 652 Q490 645 500 632 Z fill. Sole dark line.
front: path M646 632 Q659 623 675 630 L696 639 Q702 646 696 652 L643 652 Q636 644 646 632 Z.

Torso etc:
Tail behind at x500.
Backpack: rounded rect x=478 y=442 width 58 height 112 rx=20 fill #7f92ad stroke; inner panel x=467? maybe. Top handle.
Hose from backpack top to helmet side: path M512 448 C470 420 478 375 508 360 stroke #6f86a3 width 10, inner #c3d2e4 width 5.

Arms:
Left waving arm path under stroke and over stroke.
Could arm emerge from shoulder at (525,465): path M526 460 Q482 448 458 410 Q447 389 438 362. Under #9fb0c8 42, over suit 34. Then joint circle 458 410 r=18.
Glove: at (426,342), rotate(-18). Use path rounded mitt: M412 344 C400 337 401 323 410 317 L406 307 C404 298 412 294 417 301 L420 309 L419 296 C419 286 429 285 432 295 L435 307 L438 295 C441 286 451 290 450 300 L447 315 C457 318 460 329 454 337 L437 352 C429 357 418 353 412 344Z maybe too weird. Simpler mitten with 3 fingers. White with outline.

Right arm: path M643 462 Q692 462 719 424 L741 389. Under/over. glove at 748,372 with fingers maybe open.

Torso shape as above. Suit panel.
Shoulder circles maybe.

Helmet:
Neck ring: ellipse cx585 cy430 rx78 ry22 fill #9aabc2; rect/ellipse? path. Then helmet circle.
Outer helmet circle cx585 cy330 r=112 fill suit stroke #9aabc2 width 5.
Top subtle highlight.
Visor outer circle r=89 fill #1a2a47 stroke #7589a6 width 9.
Inner circle r=82 fill visor gradient.
Cat ears inside:
left ear path M527 280 L535 224 Q537 215 545 221 L571 252 Z fill orange stroke dark.
right M599 252 L626 221 Q634 214 636 225 L643 280.
inner ears pink.
head ellipse cx585 cy312 rx66 ry58 fill #f6b36c stroke #3b2b3a 3.
cheek fluff maybe.
Forehead stripes: paths M565 262 l8 18 etc. Dark orange.
Eyes: left at 559,306; right 611,306, ellipse rx14 ry17 fill white? Cat eyes green #7ff0c8. pupils vertical black. highlight.
Muzzle ellipses at 573,336 and 597,336 fill cream. nose path M579 327 Q585 322 591 327 L585 333 Z fill #ff7c91. mouth curves.
Whiskers.
Maybe collar under head at y=365.

Visor reflection:
path arc M520 286 C538 247 575 233 615 243 stroke white opacity .35 width 9 linecap.
ellipse at 540,270 etc.
Small screw circles around rim.

Suit patch: circle at 620,520 maybe orange with paw.
Chest control panel: rounded rect x=550 y=470 width 70 height 44 rx 10 fill #2d4261, stroke; screen small, buttons. Maybe "MOON" tiny text? Better no.

Suit shading: path on right torso.
Belt seam.

Shoulder patch on right arm maybe.

Dust behind board: big cloud puffs around x380-460 y630. use ellipse with gradient, strokes.

Add tiny moon rocks foreground.

Text? Maybe add small caption in top-left as a mission sticker:
<g transform translate(64 62)> rounded rect, small paw icon and text "LUNAR PATROL". But task says draw me an SVG, no need. However storytelling nice. Could put "MOON PATROL" in top left with letter spacing, and below "mission 01 · meow". Font generic sans. This may make it look designed. But likely the user wants drawing; adding title is acceptable but maybe unnecessary. We can add small mission label subtle. Let's include a small outlined capsule at top-left with "MOON PATROL / MEOW-1", high quality. But ensure no external font.

Could also add decorative red band around helmet? cat ears visible through visor is key.

Let's ensure scene doesn't look too small. Helmet r112 in 1200x800 ~186 px diameter. Character total height 440 from y218 to 655, good.

Let's plan exact SVG.

Potential issue filters and IDs fine. We must avoid unsupported CSS mix-blend? Chrome supports. But not necessary.

Let's craft output with around 400 lines. Need ensure fenced code block exactly.

Let's refine background:
&lt;rect width=1200 height=800 fill=url(#space)/&gt;
&lt;ellipse cx=250 cy=220 rx=250 ry=160 fill=url(#nebulaA) opacity=.55 filter=url(#blur30)/&gt;
&lt;ellipse cx=790 cy=120 rx=300 ry=180 fill=url(#nebulaB) opacity=.4 .../&gt;
Maybe radial gradient fill transparent.

Stars group.

Shooting star path from 130,95 to 250,130 gradient? Use line and small circle.

Orbit dashed ellipse around Earth maybe path stroke cyan opacity .16 dasharray.

Add small distant rocket top-left around x=170,y=250? Might be a distraction. Instead small lunar lander far left on horizon maybe at x=190,y=575. But moon horizon at x=190 ~590. Lander mini silhouette could add narrative. Draw tiny lander: legs, body, antenna. Since it's background, low contrast. Let's include at x=175, ground y=600:
g opacity .6 transform translate(160 520) scale(.55): body rect, legs, antenna. Fine. Maybe text is enough.

Actually flag at right with paw, plus distant lander could overcrowd. Choose flag.

Flag group:
g transform translate(930 500) opacity .9
 pole line x=0 y=0 to 0 105 stroke #dfe9f5 5
 flag path M4 4 C35 -2 60 14 94 4 L94 46 C60 58 35 42 4 50 Z fill #ff6b6b? with dark stroke.
 paw print in white centered 48,27: main pad ellipse and 4 toe circles.
 ground base ellipse.
Maybe flag shadows.

Earth:
Use atmosphere glow.

Moon terrain in front of flag base? Flag should draw after terrain so pole on ground.

Layer ordering:
1 bg, stars, earth.
2 moon terrain.
3 distant flag.
4 ground details, dust, speed.
5 board + astronaut (board behind astronaut).
But board wheels should be above moon; fine.
Ground shadow beneath board before board.
Flag after moon before astronaut.

Astronaut drop shadow filter maybe use filter on whole group? It could blur weird. Use ellipse ground shadow and soft dark behind.

Let's code.

Need maybe include width="1200" height="800"? To adapt, width="100%" height="100%". Good. style="display:block;max-width:100%;background:#070a18". PreserveAspectRatio xMidYMid meet.

At 375 wide, viewBox scales down, height might be 250 if preserve meet in a 375x maybe viewport 800? The iframe likely aspect 375x? They say adapt gracefully down to 375. SVG with preserveAspectRatio meet in 375x800 leaves big vertical blank. Could set preserveAspectRatio="xMidYMid slice" to fill and crop sides. Better use slice? For an illustration, at 375x800 slice would crop horizontally drastically (scale 1, width 375 from 1200) — bad. Meet scales to 0.3125 -> height 250, vertically centered in 800, lots of empty but no scroll; not ideal. Could use CSS media? Since it's an SVG document, we can use <style> with @media (max-width: 600px) { ... } but SVG root dimensions and viewBox can't easily change. Could set preserveAspectRatio="xMidYMid meet" and height 100%; scaling fine. Most iframe likely 375x667 so art is 375x250 centered with background? But root svg fills area with background? Actually viewport 375x667, viewBox 1200x800 meets at scale .3125 giving rendered art 375x250 centered vertically at y208; outside viewBox content region? The SVG viewport background via style background may fill, but our rect only covers viewBox region; outside meet letterbox shows root background. We can set style background #070a18. Still composition small. Alternative use responsive composition via CSS: set viewBox responsive using preserveAspectRatio "xMidYMid slice" and art designed central with important content within center 375? But at 375 wide, slice crop is severe.

Better set preserveAspectRatio="xMidYMid meet" and use width 100% height auto? If root svg height:100% then letterbox. The instruction says page must look right at 1280x800 and adapt gracefully down to 375. Many SVG tasks use width 100%, height 100%. The image scales down keeping aspect ratio; at 375 wide it's 375x250, which is okay-ish but lots of background. To adapt, could use a <style> inside SVG that at max-width 500px changes viewBox? CSS can't change viewBox. But we can have media query and transform groups: e.g. define main scene group with transform; for narrow, translate/scale to zoom in. preserveAspectRatio meet still scales width fully; to make character larger on narrow, we can use media query applying transform to a wrapper group: scale(1.8) about center. But then parts cropped at sides by the viewBox? Wait scaling within viewBox coordinate, content outside viewBox is clipped at viewBox bounds. If the wrapper scales 1.6 about center, at actual width 375 viewBox still full width 1200 mapped to 375, so we'd see only central 750 units. Character at center x585, board spans 440-740, fits; Earth cropped, that's fine. But height would still only be 250 in a 667 viewport letterbox? Actually the viewBox maps 1200x800 to 375x250, so scaled group still 250 tall. Letterbox remains because aspect ratio. Root background fills. The content is centered in letterbox. It won't be huge vertically. If we use preserveAspectRatio="xMidYMid slice" at 375x667, scale = max(375/1200=.3125, 667/800=.834)=.834, visible width=450 units, crop to x~375..825. Character is centered at 585; board 440-740 would be cropped edges. Could zoom to 0.9 and crop. At desktop 1280x800 slice scale=1 exactly. At 375x667, we'd see central vertical slice 450x800 viewBox units; character around 350-760 (helmet top 218) fits mostly, board cropped. Not great but could be dramatic.

Maybe root height not 100%; set width="100%" height="auto" style="height:auto; max-height:100vh". At 375, intrinsic aspect 1200:800 => 250px tall, at top. Hmm.

Maybe design art in a square-ish viewBox 1200x800 and at mobile, letterboxing isn't a huge issue. The demo requirement is mostly for web apps; SVG likely compared at 1280x800. I'll stick to meet.

Could make the SVG root style background matching space so letterbox seamless. Good.

Let's ensure no CSS text outside.

Let's write final SVG. Need be careful with path syntax and all closes.

I'll produce code now, roughly 350 lines. Include title/desc.

Let's make a mission badge top-left:
g transform="translate(58 54)" opacity .9
 rect width 210 height 62 rx 16 fill="#101a38" stroke="#7be7ff" opacity .85
 small paw icon fill orange at x=32 y=30: pad path and toe circles.
 text x=64 y=27 fill white font-size 15 font-weight 700 letter-spacing 2 "MOON PATROL"; text x=64 y=46 fill #8fb4d9 font-size 10 letter-spacing 2.4 "MEOW-1 · LUNAR UNIT"
This makes it look designed. Use &#183; maybe. Better literal "MEOW-1 / LUNAR UNIT".

Stars:
group fill #fff circles.
Add crosses.

Earth at 990,155 r=90. The flag at lower right x=960 maybe overlaps Earth vertical but okay. Earth bottom 245.

Moon horizon.

Astronaut perhaps a bit more right? x585. fine.

Cat tail visible curling left of backpack:
path M493 545 C460 566 437 548 444 522 C450 500 475 499 483 514 C489 525 477 534 469 528 stroke #f2a85e width 17; add stripes as short paths.

Body patch paw:
circle cx=625 cy=532 r=15 fill #ffc857, small dark paw.

Let's use filter "softShadow" on character group: feDropShadow dx=0 dy=8 stdDeviation=10 flood-color="#050814" flood-opacity=".35". feDropShadow supported Chrome. Fine. Use filter on outer group only, not every part.

Shadow under board ellipse.

Now exact board position and legs:

Board group rotate(-7 590 650):
wheels y=680. Deck top around y=652. After rotation, back left x~500 y~? fine.
Back foot boot around x515,y=640. Front boot x660,y=632.
Legs drawn after board:
Back leg path M551 556 Q538 585 523 610 L516 630.
Front leg path M618 556 Q658 566 676 595 Q687 612 665 628.
Knee pads circles at (521,606) and (674,600).
Boots at y628-650.

Torso bottom around y570, overlaps leg tops.

Arms start around torso.

Helmet bottom y442, neck ring at 432.

Visor center 330? Cat head at 310.

Let's adjust: helmet circle cx=585 cy=328 r=112 => bottom 440. Visor r=88. Head ellipse cy=305 maybe. Ears to 220. Cat face within.

Cat head inside visor:
ears from x524 to 570. Left ear path M526 272 L531 219 Q532 211 540 216 L572 248. Right mirrored M598 248 L629 216 Q637 211 638 220 L643 273.
head ellipse cx=585 cy=306 rx=65 ry=58.
Forehead stripes paths.
Eyes y=297.
Muzzle y=328.
Head bottom 364.

Visor reflection overlay after face, path along top-left. Good.

Suit body details:
torso path M520 430 Q585 414 650 430 Q666 455 662 510 L655 553 Q649 576 620 583 L550 583 Q521 576 515 553 L508 510 Q504 455 520 430 Z.
Actually helmet overlaps top.
Chest panel x548 y470 w74 h48.
Belt seam path M522 554 Q585 566 650 554.
Shoulder round patches.

Left arm path from 520 458 to 438 360. right.

We can add paw glove.

Let's now write.