Nemotron 3.5 Lightning (free)

Here's a thinking process:

1.  **Analyze User Request:**
   - User wants: "draw me an SVG of an astronaut cat skateboarding on the moon"
   - Output must be in a single fenced code block starting with ```html (or ```svg)
   - Everything must be inline: CSS in <style>, JavaScript in <script>
   - No external files, images, fonts, or network requests except CDN URLs explicitly allowed (none specified here, but I should keep it self-contained)
   - No localStorage, sessionStorage, cookies, IndexedDB, alert, confirm, prompt, window.open
   - Must look right in 1280×800 viewport, adapt down to 375px wide, no horizontal scrollbar
   - Something meaningful visible on first paint (screenshot taken ~3s after load)
   - Interesting stuff visible within first seconds
   - If game: must start in self-playing demo mode behind "Click or press a key to start" message (but this is an SVG illustration, not a game)
   - If uses keyboard: display "Click or press a key to start" (but this is static SVG)
   - Must run with zero errors in latest Chrome console

   Wait, the task says "draw me an SVG of an astronaut cat skateboarding on the moon". This is an illustration request. The output format constraints are for a web demo, but the core request is just an SVG drawing.

   Let me re-read the system prompt carefully:
   - "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."
   - "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."

   The user wants an SVG of an astronaut cat skateboarding on the moon. This is an illustration, not a game. But the output format requires a complete HTML file with inline CSS/JS, self-contained, responsive, etc. I need to produce an SVG illustration within an HTML page that meets all the criteria.

   Since it's not a game, I don't need the "Click or press a key to start" message unless I make it interactive. But the criteria say "if the demo uses the keyboard, display a clear 'Click or press a key to start' message." Since it's just an SVG illustration, I might not need keyboard interaction. However, the "something meaningful must be visible on first paint" and "adapt gracefully down to 375px wide" apply.

   I'll create a simple, cute SVG illustration of an astronaut cat skateboarding on the moon. I'll make it responsive (viewBox scaling). I'll include minimal inline CSS for styling the page background maybe. I won't include JavaScript since there's no interactivity needed, but the format requires a <script> tag? The rule says "Everything must be inline: CSS in <style>, JavaScript in <script>." It doesn't say JS must be present, but I should include a <script> tag possibly empty or with minimal code that doesn't cause errors. Actually, I can include `<script></script>` or maybe just omit it? The rule says "Reply with exactly ONE fenced code block containing the complete file: ```html (or ```svg when the task asks for an SVG)." So I should output a complete HTML file.

   Let me structure it:
   ```html
   <!DOCTYPE html>
   <html>
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Astronaut Cat on the Moon</title>
     <style>
       body { margin: 0; padding: 0; background: #0a0a2e; display: flex; justify-content: center; align-items: center; height: 100vh; }
       svg { width: 100%; height: auto; max-width: min(800px, 100%); height: auto; }
     </style>
   </head>
   <body>
     <svg viewBox="0 0 400 300" preserveAspectRatio="xMidYMid meet">
       <!-- SVG content here -->
     </svg>
   </body>
   </html>
   ```

   But wait, the responsive requirement: "The page must look right in a 1280×800 viewport and adapt gracefully down to 375px wide. No horizontal scrollbar." Using `viewBox` and `preserveAspectRatio` with `width: 100%` and `max-width` should handle that. I'll set `height: auto` on the SVG.

   Also, "Something meaningful must be visible on first paint: a screenshot is taken automatically about 3 seconds after load, without any interaction." This is about the demo rendering, not something I code actively. I just need to ensure the SVG is visible on load.

   "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." - OK, the illustration itself is visible immediately.

   "Games must start in a self-playing demo mode..." - This is not a game, so I'll skip the demo mode message, but I need to be careful. The rule says "if the demo uses the keyboard, display a clear 'Click or press a key to start' message." My demo doesn't use keyboard, so I can omit it, or maybe add it gently. To be safe, I could add a tiny instruction, but it might clutter the illustration. I'll skip it since it's not a game.

   "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." - Again, no keyboard usage.

   I need to make sure zero console errors in Chrome. So no JS that errors. I'll keep JS minimal or empty.

   Let me design the SVG: astronaut cat skateboarding on the moon. I'll create a simple but recognizable scene. Components:
   - Moon surface: a big circle, maybe with some craters
   - Astronaut suit: white with details, red accent maybe
   - Cat: astronaut cat, maybe tabby, in a suit
   - Skateboard: simple shape
   - Some stars/dust

   I'll keep it vector, simple paths. Since I'm generating SVG code inline, I'll sketch it mentally and use basic shapes.

   Let me think of a simple SVG structure:
   - Background: dark space gradient or solid dark blue/black
   - Moon: large grey circle, with some craters
   - Cat astronaut: sitting on skateboard
   - Skateboard: on moon surface
   - Maybe a flag or footprints

   Actually, I can use `<path>` for the cat and suit, or use `<g>` groups. To keep it simple and error-free, I'll use basic shapes and a few paths. I'm not an SVG artist, but I can make a cute simplistic version.

   Let me draft the SVG content:

   ```svg
   <svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
     <defs>
       <radialGradient id="moonGrad" cx="50%" cy="50%" r="50%">
         <stop offset="0%" stop-color="#f5f5f5"/>
         <stop offset="100%" stop-color="#e0e0e0"/>
       </radialGradient>
       <linearGradient id="suitGrad" x1="0%" y1="0%" x2="0%" y2="100%">
         <stop offset="0%" stop-color="#ffffff"/>
         <stop offset="100%" stop-color="#e0e0e0"/>
       </linearGradient>
     </defs>
     
     <!-- Moon -->
     <circle cx="200" cy="150" r="120" fill="url(#moonGrad)" />
     <!-- Craters -->
     <circle cx="250" cy="100" r="25" fill="#d0d0d0" />
     <circle cx="300" cy="180" r="20" fill="#d0d0d0" />
     
     <!-- Astronaut Cat -->
     <g transform="translate(180, 200)">
       <!-- Suit helmet -->
       <circle cx="0" cy="-30" r="30" fill="url(#suitGrad)" />
       <!-- Suit body -->
       <ellipse cx="0" cy="20" rx="40" ry="50" fill="url(#suitGrad)" />
       <!-- Cat head inside helmet -->
       <circle cx="0" cy="-35" r="20" fill="#e07a5f" />
       <!-- Cat ears -->
       <polygon points="-25,-45 -15,-10 0,-45" fill="#e07a5f" />
       <polygon points="25,-45 15,-10 0,-45" fill="#e07a5f" />
       <!-- Eyes -->
       <circle cx="-10" cy="-35" r="4" fill="black" />
       <circle cx="10" cy="-35" r="4" fill="black" />
       <!-- Nose -->
       <circle cx="0" cy="-30" r="2" fill="black" />
       <!-- Skateboard -->
       <rect cx="0" cy="50" width="80" height="15" fill="#2c3e50" />
       <rect cx="0" cy="45" width="70" height="5" fill="#ecf0f1" />
       <!-- Trucks/wheels -->
       <circle cx="-35" cy="65" r="12" fill="#5d6d7e" />
       <circle cx="35" cy="65" r="12" fill="#5d6d7e" />
     </g>
   </svg>
   ```

   I need to make sure the SVG is self-contained within the HTML. I'll put the SVG directly in the body.

   Let me think about responsiveness. Setting `svg { max-width: 100%; height: auto; }` will make it scale. The `viewBox="0 0 400 300"` will preserve aspect ratio. In a 375px wide viewport, the SVG will scale down proportionally. No horizontal scrollbar if I set `body { overflow-x: hidden; }` and `html { overflow-x: hidden; }`.

   I'll also add a dark space background behind the SVG, maybe a gradient or just solid color. To keep it simple and avoid scrollbars, I'll set body background to very dark, and the SVG centered.

   Let me write the complete HTML:

   ```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 on the Moon</title>
     <style>
       html, body {
         margin: 0;
         padding: 0;
         overflow-x: hidden;
         width: 100%;
         height: 100%;
         background: #050518;
         display: flex;
         justify-content: center;
         align-items: center;
       }
       svg {
         width: 100%;
         max-width: min(800px, 100%);
         height: auto;
         display: block;
       }
     </style>
   </head>
   <body>
     <svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
       <defs>
         <radialGradient id="moonGrad" cx="50%" cy="50%" r="50%">
           <stop offset="0%" stop-color="#f8f8f8"/>
           <stop offset="100%" stop-color="#e0e0e0"/>
         </radialGradient>
         <linearGradient id="suitGrad" x1="0%" y1="0%" x2="0%" y2="100%">
           <stop offset="0%" stop-color="#fff"/>
           <stop offset="100%" stop-color="#e0e0e0"/>
         </linearGradient>
         <linearGradient id="boardGrad" x1="0%" y1="0%" x2="0%" y2="100%">
           <stop offset="0%" stop-color="#2c3e50"/>
           <stop offset="100%" stop-color="#1a1a2e"/>
         </linearGradient>
       </defs>
       
       <!-- Moon -->
       <circle cx="200" cy="150" r="120" fill="url(#moonGrad)"/>
       <!-- Craters -->
       <circle cx="260" cy="110" r="22" fill="#d5d5d5"/>
       <circle cx="320" cy="170" r="18" fill="#d5d5d5"/>
       
       <!-- Astronaut Cat -->
       <g transform="translate(180, 210)">
         <!-- Suit helmet -->
         <circle cx="0" cy="-35" r="32" fill="url(#suitGrad)"/>
         <!-- Suit body -->
         <ellipse cx="0" cy="25" rx="42" ry="55" fill="url(#suitGrad)"/>
         <!-- Cat head -->
         <circle cx="0" cy="-40" r="22" fill="#f5a5a5"/>
         <!-- Ears -->
         <polygon points="-28,-50 -18,-12 0,-50" fill="#f5a5a5"/>
         <polygon points="28,-50 18,-12 0,-50" fill="#f5a5a5"/>
         <!-- Eyes -->
         <circle cx="-12" cy="-42" r="4" fill="black"/>
         <circle cx="12" cy="-42" r="4" fill="black"/>
         <!-- Nose -->
         <circle cx="0" cy="-38" r="2.5" fill="black"/>
         <!-- Whiskers -->
         <line x1="-30" y1="-35" x2="-55" y2="-25" stroke="#555" stroke-width="2"/>
         <line x1="30" y1="-35" x2="55" y2="-25" stroke="#555" stroke-width="2"/>
         
         <!-- Skateboard -->
         <rect cx="0" cy="55" width="90" height="20" fill="url(#boardGrad)"/>
         <rect cx="0" cy="50" width="80" height="10" fill="#ecf0f1"/>
         <circle cx="-40" cy="75" r="14" fill="#5d6d7e"/>
         <circle cx="40" cy="75" r="14" fill="#5d6d7e"/>
         <!-- Grip tape dots -->
         <circle cx="-30" cy="58" r="1.5" fill="#7f8c8d"/>
         <circle cx="-10" cy="58" r="1.5" fill="#7f8c8d"/>
         <circle cx="10" cy="58" r="1.5" fill="#7f8c8d"/>
         <circle cx="30" cy="58" r="1.5" fill="#7f8c8d"/>
       </g>
       
       <!-- Stars -->
       <circle cx="50" cy="80" r="1.5" fill="#fff" />
       <circle cx="350" cy="120" r="1" fill="#fff" />
       <circle cx="200" cy="50" r="2" fill="#fff" />
     </svg>
   </body>
   </html>
   ```

   Wait, I need to check the rules again:
   - "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."
   - My code has inline CSS in <style>, no external files, no JS. But the rule says "JavaScript in <script>". It might imply I need a <script> tag, but it could also mean if there is JS, it must be inline. I'll include an empty <script></script> just to be safe, or maybe not. The rule: "Everything must be inline: CSS in <style>, JavaScript in <script>." I think it's describing where to put them if present. I'll include a <script> tag with minimal code that doesn't error, or just leave it without <script>? HTML5 allows omitting <script> if no JS. But to strictly follow "JavaScript in <script>", maybe I should include `<script></script>`. However, adding a <script> tag with nothing might be fine. I'll include `<script></script>` at the end of body, but it might be unnecessary. Let me re-read: "Everything must be inline: CSS in <style>, JavaScript in <script>." This is a constraint on formatting, not a requirement to have JS. I'll include it anyway to be safe, but ensure it's empty or just a comment that doesn't error.

   Actually, empty `<script></script>` is fine. But I'll put it after the SVG, maybe with a comment `// no javascript`. But comments inside script are fine. I'll just do `<script></script>`.

   Wait, the rule also says: "No localStorage, sessionStorage, cookies, IndexedDB, alert(), confirm(), prompt(), or window.open(): they are blocked in the sandbox and will throw." My code doesn't use any of those.

   "The page must look right in a 1280×800 viewport and adapt gracefully down to 375px wide. No horizontal scrollbar." My CSS sets `overflow-x: hidden` on html/body, and `max-width: min(800px, 100%)` on svg with `width: 100%`. That should handle it. The body is a flex container centering the SVG. The background is dark. No horizontal scrollbar.

   "Something meaningful must be visible on first paint: a screenshot is taken automatically about 3 seconds after load, without any interaction." The SVG is visible immediately on load. Good.

   "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." The illustration is there immediately.

   "Games must start in a self-playing demo mode..." - Not a game, so I'll skip the "Click or press a key to start" message. But the rule says "if the demo uses the keyboard, display a clear 'Click or press a key to start' message." My demo doesn't use keyboard, so it's fine. However, to be extra safe, maybe I should add a tiny instructional text? But it might clutter the SVG. I'll skip it.

   "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." Again, no keyboard.

   "The code must run with zero errors in the console of the latest Chrome." My code is clean HTML/CSS/SVG, no JS, so zero errors.

   One thing: the viewport meta tag. I have `<meta name="viewport" content="width=device-width, initial-scale=1.0">`. That's fine for responsiveness.

   Let me double-check the SVG for any potential issues. The `viewBox="0 0 400 300"` centers at 200, 150. The cat is at transform(180, 210), which is near the bottom right of the moon. The skateboard is under it. The moon circle is at (200, 150) r=120, so it spans x 80 to 320, y 30 to 270. The cat at (180, 210) is within the moon's lower part. That's fine.

   I'll make sure all colors are valid, all attributes are correct. The `<circle>` and `<polygon>` and `<line>` and `<ellipse>` are all valid SVG.

   Let me also ensure the gradients are defined correctly and referenced properly. They are inside `<defs>` which is inside the SVG.

   One potential issue: the `min()` function in CSS. `max-width: min(800px, 100%)` is valid CSS? Yes, `min()` is supported in modern browsers. But to be safe for an old Chrome in sandbox maybe? Actually, the task says "latest Chrome", so `min()` is fine. Alternatively, I could just use `max-width: 800px;` but it needs to adapt down to 375px. `width: 100%` and `max-width: 800px` would scale down to 375px but not exceed 800px. That's simpler and definitely compatible. Let me use `max-width: 800px;` instead of `min()`. Actually, `width: 100%; max-width: 800px;` will make it 100% of container up to 800px. In a 375px viewport, it'll be 375px. In 1280px, it'll be 800px. That's perfect and simpler.

   I'll adjust the CSS:
   ```css
   svg {
     width: 100%;
     max-width: 800px;
     height: auto;
     display: block;
   }
   ```

   That's better.

   Now, the HTML structure. I'll output exactly one fenced code block with ```html at the start. No text before or after.

   Let me write the final code block.

   I'll also consider if I need a `<script>` tag. The rule "Everything must be inline: CSS in <style>, JavaScript in <script>." I think it's fine to not have a <script> tag if there's no JS. But to be absolutely compliant, I might add `<script></script>`. However, the rule says "No external files, images, fonts or network requests, except the CDN URLs explicitly allowed by the task." It doesn't say I must include a script tag. I'll omit it to keep the code clean, but if the evaluator expects a script tag, it might fail. Let me include a minimal empty script tag just in case. Actually, many HTML validators complain about `<script></script>` being empty but it's valid. I'll just not include it. The rule is descriptive, not prescriptive requiring JS.

   Wait, re-reading: "Everything must be inline: CSS in <style>, JavaScript in <script>." This could be interpreted as "if you have CSS, put it in <style>; if you have JavaScript, put it in <script>." It doesn't say you must have both. I'll skip the script tag.

   Let me finalize the SVG content. I want to make sure the cat is recognizable as an astronaut cat. I'll add a visor or something. Maybe a small American flag on the suit? I'll keep it simple.

   Also, the moon: I'll make it a simple grey circle with a crater. The space background can be just the dark body background. I already have body background #050518.

   Let me produce the final HTML.

   One more check on responsiveness: In 375px width, the SVG will be 375px wide (since width: 100%, max-width: 800px, and container is 375px). The height will scale automatically via `height: auto` and the viewBox aspect ratio 400:300 = 4:3. So 375 wide => 281.25 high. In 1280 wide => 800 high. The body is a flex column? I have `display: flex; justify-content: center; align-items: center; height: 100%;`. That will center the SVG vertically and horizontally. No horizontal scrollbar because body has `overflow-x: hidden` and width: 100%. The SVG max-width 800px won't cause overflow in 375px viewport.

   Everything seems solid.

   Let me write the code. I'll make sure the SVG doesn't have any relative URLs or external references. All gradients are inline-defined.

   Final output: just the fenced code block.

```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 on the Moon</title>
<style>
html, body {
  margin: 0; padding: 0; overflow-x: hidden; width: 100%; height: 100%;
  background: #050518; display: flex; justify-content: center; align-items: center;
}
svg {
  width: 100%; max-width: 800px; height: auto; display: block;
}
</style>
</head>
<body>
<svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="moonGrad" cx="50%" cy="50%" r="50%">
  <stop offset="0%" stop-color="#f8f8f8"/>
  <stop offset="100%" stop-color="#e0e0e0"/>
</radialGradient>
<linearGradient id="suitGrad" x1="0%" y1="0%" x2="0%" y2="100%">
  <stop offset="0%" stop-color="#fff"/>
  <stop offset="100%" stop-color="#e0e0e0"/>
</linearGradient>
<linearGradient id="boardGrad" x1="0%" y1="0%" x2="0%" y2="100%">
  <stop offset="0%" stop-color="#2c3e50"/>
  <stop offset="100%" stop-color="#1a1a2e"/>
</linearGradient>
</defs>

<!-- Moon -->
<circle cx="200" cy="150" r="120" fill="url(#moonGrad)"/>
<circle cx="260" cy="110" r="22" fill="#d5d5d5"/>
<circle cx="320" cy="170" r="18" fill="#d5d5d5"/>

<!-- Astronaut Cat -->
<g transform="translate(180, 210)">
  <!-- Suit helmet -->
  <circle cx="0" cy="-35" r="32" fill="url(#suitGrad)"/>
  <!-- Suit body -->
  <ellipse cx="0" cy="25" rx="42" ry="55" fill="url(#suitGrad)"/>
  <!-- Cat head -->
  <circle cx="0" cy="-40" r="22" fill="#f5a5a5"/>
  <!-- Ears -->
  <polygon points="-28,-50 -18,-12 0,-50" fill="#f5a5a5"/>
  <polygon points="28,-50 18,-12 0,-50" fill="#f5a5a5"/>
  <!-- Eyes -->
  <circle cx="-12" cy="-42" r="4" fill="black"/>
  <circle cx="12" cy="-42" r="4" fill="black"/>
  <!-- Nose -->
  <circle cx="0" cy="-38" r="2.5" fill="black"/>
  <!-- Whiskers -->
  <line x1="-30" y1="-35" x2="-55" y2="-25" stroke="#555" stroke-width="2"/>
  <line x1="30" y1="-35" x2="55" y2="-25" stroke="#555" stroke-width="2"/>

  <!-- Skateboard -->
  <rect cx="0" cy="55" width="90" height="20" fill="url(#boardGrad)"/>
  <rect cx="0" cy="50" width="80" height="10" fill="#ecf0f1"/>
  <circle cx="-40" cy="75" r="14" fill="#5d6d7e"/>
  <circle cx="40" cy="75" r="14" fill="#5d6d7e"/>
  <!-- Grip tape dots -->
  <circle cx="-30" cy="58" r="1.5" fill="#7f8c8d"/>
  <circle cx="-10" cy="58" r="1.5" fill="#7f8c8d"/>
  <circle cx="10" cy="58" r="1.5" fill="#7f8c8d"/>
  <circle cx="30" cy="58" r="1.5" fill="#7f8c8d"/>
</g>

<!-- Stars -->
<circle cx="50" cy="80" r="1.5" fill="#fff" />
<circle cx="350" cy="120" r="1" fill="#fff" />
<circle cx="200" cy="50" r="2" fill="#fff" />
</svg>
</body>
</html>
```