Models 44

Muse Ember

Open in new window

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

How it went

Total time
32.9 s
Cost
$0.0064
Output tokens
12,817
Spent thinking
4,443 tokens
Speed
419.5 tok/s
Console errors
0
First token after
2.3 s
First visible text after
16.8 s
Prompt tokens
365
Code size
23.0 KB
Finish reason
stop
Served by
Meta
Model id
meta/muse-ember
Reasoning sent
{"effort":"xhigh"}
Max output
943,718 tokens
Generated
Nov 12, 2026

What it was asked

The prompt
“draw me an SVG of an astronaut cat skateboarding on the moon”
System prompt, sent with every prompt
You are generating a self-contained web demo. It will be rendered automatically in a sandboxed iframe and compared side by side with the output of other AI models given the exact same task.

Output rules:
- Reply with exactly ONE fenced code block containing the complete file: ```html (or ```svg when the task asks for an SVG). No text before or after the code block.
- Everything must be inline: CSS in <style>, JavaScript in <script>. No external files, images, fonts or network requests, except the CDN URLs explicitly allowed by the task.
- Do not use localStorage, sessionStorage, cookies, IndexedDB, alert(), confirm(), prompt() or window.open(): they are blocked in the sandbox and will throw.
- The page must look right in a 1280×800 viewport and adapt gracefully down to 375px wide. No horizontal scrollbar.
- Something meaningful must be visible on first paint: a screenshot is taken automatically about 3 seconds after load, without any interaction.
- Everything that makes the demo interesting must be visible within the first seconds: nothing hidden behind a high score, a later level or a long play session.
- Games must start in a self-playing demo mode (a simple AI plays) behind a "Click or press a key to start" message, so the game can be judged in action without playing.
- The iframe only receives keyboard events after the user clicks it: if the demo uses the keyboard, display a clear "Click or press a key to start" message.
- The code must run with zero errors in the console of the latest Chrome.

Code run-1.svg · 382 lines

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cosmo — Astronaut Cat Skateboarding on the Moon</title>
<style>
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    min-height:100vh;
    font-family:ui-rounded,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    color:#eef2ff;
    background:
      radial-gradient(circle at 15% 20%, rgba(255,255,255,.9) 1.2px, transparent 1.3px),
      radial-gradient(circle at 82% 12%, rgba(255,255,255,.7) 1px, transparent 1.2px),
      radial-gradient(circle at 65% 75%, rgba(255,255,255,.5) 1px, transparent 1.2px),
      radial-gradient(circle at 30% 85%, rgba(255,255,255,.6) 1px, transparent 1.2px),
      linear-gradient(180deg,#070a1d 0%, #0f1533 55%, #1a1440 100%);
    background-size:220px 220px, 180px 180px, 260px 260px, 200px 200px, 100% 100%;
    display:flex; flex-direction:column; align-items:center;
    padding:18px 14px 28px;
    overflow-x:hidden;
  }
  .wrap{width:min(1060px,97vw)}
  header{text-align:center;margin-bottom:12px}
  .badge{
    display:inline-block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
    padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.22);
    background:rgba(255,255,255,.08);backdrop-filter:blur(6px);color:#c7d2fe;font-weight:800
  }
  h1{margin:10px 0 6px;font-size:clamp(28px,4.5vw,48px);line-height:1.05;letter-spacing:-.02em}
  h1 span{color:#ffd166}
  .sub{margin:0 auto;max-width:680px;color:#cbd5e1;font-size:clamp(13px,1.8vw,15px);line-height:1.5}
  .stage{
    margin-top:14px;
    border-radius:28px;
    padding:6px;
    background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.05));
    box-shadow:0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.12);
  }
  svg{display:block;width:100%;height:auto;border-radius:22px;background:#0b1026}
  .controls{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;margin-top:14px}
  button{
    appearance:none;border:0;cursor:pointer;font:inherit;font-weight:900;letter-spacing:.02em;
    color:#111827;background:#ffd166;padding:11px 18px;border-radius:999px;
    box-shadow:0 8px 20px rgba(255,210,102,.35), inset 0 -3px 0 rgba(0,0,0,.15);
    transition:transform .15s ease, filter .15s ease;
  }
  button:hover{transform:translateY(-1px) scale(1.02);filter:brightness(1.05)}
  button:active{transform:translateY(1px) scale(.98)}
  button.secondary{background:#e0e7ff;color:#1e3a8a;box-shadow:0 8px 20px rgba(224,231,255,.25)}
  button.tertiary{background:#5eead4;color:#134e4a;box-shadow:0 8px 20px rgba(94,234,212,.25)}
  .hint{width:100%;text-align:center;color:#94a3b8;font-size:13px;margin-top:2px}
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
  .card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:12px 14px}
  .card b{font-size:15px}
  .card p{margin:5px 0 0;color:#cbd5e1;font-size:13px;line-height:1.45}
  @media(max-width:640px){.cards{grid-template-columns:1fr} .hint{font-size:12px}}

  /* SVG Animations */
  .star{animation:twinkle 2.2s ease-in-out infinite alternate}
  @keyframes twinkle{from{opacity:.25}to{opacity:1}}
  .earthFloat{transform-box:fill-box;transform-origin:center;animation:floaty 7s ease-in-out infinite}
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
  .groundScroll{animation:scrollGround 2.6s linear infinite}
  @keyframes scrollGround{to{transform:translateX(-300px)}}
  .cat-bob{transform-box:fill-box;transform-origin:50% 55%;animation:bob 1.35s ease-in-out infinite}
  @keyframes bob{0%,100%{transform:translateY(0) rotate(-.8deg)}50%{transform:translateY(-9px) rotate(1deg)}}
  .tail{transform-box:fill-box;transform-origin:10% 90%;animation:wag 1.5s ease-in-out infinite}
  @keyframes wag{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(10deg)}}
  .wheel{transform-box:fill-box;transform-origin:center;animation:wheelSpin .45s linear infinite}
  @keyframes wheelSpin{to{transform:rotate(360deg)}}
  .speed{stroke-dasharray:46 18;animation:dash 0.7s linear infinite}
  @keyframes dash{to{stroke-dashoffset:-64}}
  .dust{animation:dustMove 1s ease-out infinite}
  @keyframes dustMove{0%{transform:translate(0,0) scale(.6);opacity:.9}100%{transform:translate(-70px,-18px) scale(1.4);opacity:0}}
  .shoot{animation:shoot 5s linear infinite}
  @keyframes shoot{0%{transform:translate(0,0);opacity:0}8%{opacity:1}22%{transform:translate(-260px,90px);opacity:0}100%{transform:translate(-260px,90px);opacity:0}}
  #catSkater{transform-box:fill-box;transform-origin:50% 88%;cursor:pointer}
  #catSkater.ollie{animation:ollie .68s cubic-bezier(.28,.84,.42,1)}
  @keyframes ollie{0%{transform:translateY(0) rotate(0)}28%{transform:translateY(-14px) rotate(-6deg)}55%{transform:translateY(-118px) rotate(5deg)}82%{transform:translateY(-16px) rotate(1deg)}100%{transform:translateY(0) rotate(0)}}
  #catSkater.spin{animation:spin360 .72s ease-in-out}
  @keyframes spin360{0%{transform:rotate(0) translateY(0)}45%{transform:rotate(175deg) translateY(-55px)}100%{transform:rotate(360deg) translateY(0)}}
  #beam{opacity:0;transition:opacity .35s ease}
  svg.lights-on #beam{opacity:.82}
  svg.lights-on #lampGlow{opacity:1}
  #lampGlow{opacity:0;transition:opacity .35s ease}
</style>
</head>
<body>
<div class="wrap">
  <header>
    <div class="badge">✦ Hand-drawn SVG • Zero gravity • 100% Cute</div>
    <h1>Cosmo the <span>Astronaut Cat</span><br>Skateboarding on the Moon 🌙</h1>
    <p class="sub">One small skate for a cat, one giant ollie for cat-kind. Cosmo is cruising the lunar surface at 1/6 gravity — where every jump is floaty and every landing is soft.</p>
  </header>

  <div class="stage">
  <svg id="scene" viewBox="0 0 1200 700" role="img" aria-label="An astronaut cat in a spacesuit and helmet riding a skateboard on the moon, with Earth in the sky">
    <title>Astronaut cat skateboarding on the moon</title>
    <defs>
      <linearGradient id="space" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stop-color="#070b24"/><stop offset="55%" stop-color="#141d3f"/><stop offset="100%" stop-color="#2b1d52"/>
      </linearGradient>
      <radialGradient id="earthGrad" cx="35%" cy="30%" r="75%">
        <stop offset="0%" stop-color="#7dd3fc"/><stop offset="55%" stop-color="#38bdf8"/><stop offset="100%" stop-color="#0369a1"/>
      </radialGradient>
      <linearGradient id="moonGrad" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stop-color="#e6ebf2"/><stop offset="35%" stop-color="#cbd5e1"/><stop offset="100%" stop-color="#94a3b8"/>
      </linearGradient>
      <radialGradient id="helmetGrad" cx="35%" cy="28%" r="72%">
        <stop offset="0%" stop-color="#ffffff" stop-opacity=".85"/><stop offset="45%" stop-color="#bae6fd" stop-opacity=".35"/><stop offset="100%" stop-color="#7dd3fc" stop-opacity=".18"/>
      </radialGradient>
      <linearGradient id="suitGrad" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stop-color="#ffffff"/><stop offset="100%" stop-color="#dbeafe"/>
      </linearGradient>
      <linearGradient id="furGrad" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stop-color="#ffb86b"/><stop offset="100%" stop-color="#ff8a3d"/>
      </linearGradient>
      <linearGradient id="boardGrad" x1="0" y1="0" x2="1" y2="0">
        <stop offset="0%" stop-color="#14b8a6"/><stop offset="50%" stop-color="#2dd4bf"/><stop offset="100%" stop-color="#f97316"/>
      </linearGradient>
      <radialGradient id="glow" cx="50%" cy="50%" r="50%">
        <stop offset="0%" stop-color="#fef08a" stop-opacity=".9"/><stop offset="100%" stop-color="#fef08a" stop-opacity="0"/>
      </radialGradient>
    </defs>

    <rect width="1200" height="700" fill="url(#space)"/>

    <!-- STARS -->
    <g fill="#ffffff">
      <circle class="star" cx="48" cy="52" r="2.2"/><circle class="star" style="animation-delay:.4s" cx="120" cy="110" r="1.6"/>
      <circle class="star" style="animation-delay:.9s" cx="200" cy="46" r="2.4"/><circle class="star" style="animation-delay:.2s" cx="285" cy="140" r="1.5"/>
      <circle class="star" style="animation-delay:1.1s" cx="340" cy="70" r="1.8"/><circle class="star" cx="430" cy="40" r="2"/>
      <circle class="star" style="animation-delay:.6s" cx="520" cy="115" r="1.4"/><circle class="star" style="animation-delay:1.4s" cx="610" cy="52" r="2.1"/>
      <circle class="star" cx="690" cy="130" r="1.6"/><circle class="star" style="animation-delay:.3s" cx="760" cy="48" r="2.3"/>
      <circle class="star" style="animation-delay:1s" cx="850" cy="92" r="1.5"/><circle class="star" cx="1120" cy="300" r="1.8"/>
      <circle class="star" style="animation-delay:.7s" cx="1080" cy="380" r="1.4"/><circle class="star" cx="60" cy="260" r="1.6"/>
      <circle class="star" style="animation-delay:1.2s" cx="140" cy="340" r="1.3"/><circle class="star" cx="90" cy="440" r="1.5"/>
      <circle class="star" style="animation-delay:.5s" cx="1100" cy="480" r="1.4"/><circle class="star" cx="1020" cy="260" r="1.2"/>
      <circle class="star" style="animation-delay:1.6s" cx="30" cy="380" r="1.4"/><circle class="star" cx="1150" cy="80" r="2"/>
    </g>
    <g fill="#fde68a">
      <path d="M180 180 l4 12 12 4 -12 4 -4 12 -4-12 -12-4 12-4z"/>
      <path d="M880 170 l3 9 9 3 -9 3 -3 9 -3-9 -9-3 9-3z" opacity=".9"/>
      <path d="M620 200 l3 9 9 3 -9 3 -3 9 -3-9 -9-3 9-3z" opacity=".8"/>
    </g>
    <g class="shoot" stroke="#fff" stroke-width="3" stroke-linecap="round" opacity="0">
      <line x1="420" y1="70" x2="500" y2="42"/>
    </g>

    <!-- EARTH -->
    <g class="earthFloat">
      <circle cx="985" cy="132" r="86" fill="url(#glow)" opacity=".55"/>
      <circle cx="985" cy="132" r="68" fill="url(#earthGrad)" stroke="#e0f2fe" stroke-width="3"/>
      <path d="M945 98 q22-18 40 4 q12 14 -4 26 q-18 12 -34 -2 q-14 -14 -2 -28z" fill="#4ade80"/>
      <path d="M1005 138 q20 6 14 20 q-6 14 -22 8 q-14 -6 -8 -18 q5 -12 16 -10z" fill="#4ade80"/>
      <path d="M960 158 q14 10 26 2 q10 -6 2 -14 q-14 -8 -24 2 q-6 6 -4 10z" fill="#22c55e"/>
      <ellipse cx="962" cy="118" rx="22" ry="7" fill="#fff" opacity=".85"/>
      <ellipse cx="1002" cy="148" rx="18" ry="6" fill="#fff" opacity=".7"/>
      <ellipse cx="985" cy="132" rx="68" ry="68" fill="#0f172a" opacity=".18"/>
      <circle cx="1018" cy="108" r="9" fill="#fff" opacity=".5"/>
    </g>
    <text x="985" y="225" text-anchor="middle" fill="#bae6fd" font-size="13" font-weight="800" letter-spacing="3">EARTH</text>

    <!-- distant hills -->
    <path d="M0 470 Q180 430 360 462 T720 450 T1200 470 L1200 560 L0 560 Z" fill="#1e293b" opacity=".85"/>
    <path d="M0 495 Q220 460 460 485 T900 480 T1200 495 L1200 580 L0 580 Z" fill="#334155" opacity=".9"/>

    <!-- MOON SURFACE -->
    <path d="M0 530 Q300 485 600 512 T1200 505 L1200 700 L0 700 Z" fill="url(#moonGrad)"/>
    <path d="M0 530 Q300 485 600 512 T1200 505" fill="none" stroke="#f8fafc" stroke-width="4" opacity=".8"/>
    <ellipse cx="170" cy="600" rx="62" ry="18" fill="#94a3b8" opacity=".55"/>
    <ellipse cx="170" cy="595" rx="62" ry="16" fill="#cbd5e1"/>
    <ellipse cx="1020" cy="610" rx="78" ry="20" fill="#94a3b8" opacity=".5"/>
    <ellipse cx="1020" cy="605" rx="78" ry="18" fill="#d1d5db"/>
    <ellipse cx="860" cy="570" rx="30" ry="9" fill="#94a3b8" opacity=".6"/>
    <ellipse cx="300" cy="560" rx="24" ry="7" fill="#94a3b8" opacity=".55"/>

    <!-- scrolling ground details -->
    <g class="groundScroll" fill="#64748b">
      <g>
        <circle cx="80" cy="625" r="7"/><circle cx="380" cy="640" r="9"/><circle cx="680" cy="622" r="6"/>
        <circle cx="980" cy="645" r="8"/><circle cx="1280" cy="625" r="7"/>
        <path d="M180 615 l18 0 6 10 -30 0z"/><path d="M780 630 l20 0 7 11 -34 0z"/><path d="M1080 615 l18 0 6 10 -30 0z"/>
        <ellipse cx="240" cy="585" rx="18" ry="5" fill="#94a3b8"/><ellipse cx="540" cy="590" rx="22" ry="6" fill="#94a3b8"/><ellipse cx="1140" cy="588" rx="20" ry="5" fill="#94a3b8"/>
      </g>
    </g>

    <!-- footprints / dust trail -->
    <g fill="#cbd5e1" opacity=".8">
      <ellipse cx="330" cy="595" rx="16" ry="6"/><ellipse cx="285" cy="605" rx="13" ry="5"/><ellipse cx="240" cy="618" rx="11" ry="4"/>
    </g>

    <!-- speed lines -->
    <g stroke="#e0f2fe" stroke-width="6" stroke-linecap="round" opacity=".85">
      <line class="speed" x1="180" y1="360" x2="310" y2="360"/>
      <line class="speed" x1="140" y1="410" x2="300" y2="410"/>
      <line class="speed" x1="200" y1="460" x2="320" y2="460"/>
    </g>
    <g fill="#e2e8f0">
      <circle class="dust" cx="385" cy="575" r="7"/><circle class="dust" style="animation-delay:.25s" cx="395" cy="590" r="5"/>
      <circle class="dust" style="animation-delay:.5s" cx="380" cy="560" r="4"/>
    </g>

    <!-- shadow -->
    <ellipse cx="600" cy="612" rx="250" ry="24" fill="#0f172a" opacity=".28"/>

    <!-- CAT SKATER -->
    <g id="catSkater">
      <g class="cat-bob">
        <!-- tail -->
        <g class="tail">
          <path d="M700 430 Q800 430 815 355 Q822 315 785 310" fill="none" stroke="#ff9f43" stroke-width="34" stroke-linecap="round"/>
          <path d="M785 310 q-18 18 -6 36" stroke="#e07a1f" stroke-width="34" fill="none" stroke-linecap="round"/>
        </g>

        <!-- backpack -->
        <g>
          <rect x="462" y="288" width="68" height="138" rx="22" fill="#cbd5e1" stroke="#94a3b8" stroke-width="3"/>
          <rect x="476" y="262" width="18" height="42" rx="9" fill="#e2e8f0" stroke="#94a3b8" stroke-width="3"/>
          <rect x="500" y="262" width="18" height="42" rx="9" fill="#f1f5f9" stroke="#94a3b8" stroke-width="3"/>
          <circle cx="496" cy="330" r="12" fill="#ffffff" stroke="#94a3b8" stroke-width="3"/>
          <path d="M520 300 Q560 250 565 200" fill="none" stroke="#64748b" stroke-width="8" stroke-linecap="round"/>
        </g>

        <!-- skateboard -->
        <g>
          <rect x="455" y="555" width="28" height="16" rx="4" fill="#475569"/>
          <rect x="715" y="555" width="28" height="16" rx="4" fill="#475569"/>
          <path d="M365 540 Q365 522 390 522 L810 522 Q835 522 835 540 Q835 558 810 558 L390 558 Q365 558 365 540Z" fill="url(#boardGrad)" stroke="#0f172a" stroke-width="3"/>
          <rect x="390" y="528" width="420" height="7" rx="3" fill="#0f172a" opacity=".85"/>
          <text x="600" y="552" text-anchor="middle" font-size="15" font-weight="900" fill="#ffffff" letter-spacing="2">MOON RIDER ★</text>
          <g class="wheel" style="transform-origin:470px 585px">
            <circle cx="470" cy="585" r="27" fill="#ffd166" stroke="#111827" stroke-width="4"/>
            <circle cx="470" cy="585" r="10" fill="#fff" stroke="#111827" stroke-width="3"/>
            <line x1="470" y1="562" x2="470" y2="608" stroke="#111827" stroke-width="3"/><line x1="447" y1="585" x2="493" y2="585" stroke="#111827" stroke-width="3"/>
          </g>
          <g class="wheel" style="transform-origin:730px 585px">
            <circle cx="730" cy="585" r="27" fill="#ffd166" stroke="#111827" stroke-width="4"/>
            <circle cx="730" cy="585" r="10" fill="#fff" stroke="#111827" stroke-width="3"/>
            <line x1="730" y1="562" x2="730" y2="608" stroke="#111827" stroke-width="3"/><line x1="707" y1="585" x2="753" y2="585" stroke="#111827" stroke-width="3"/>
          </g>
        </g>

        <!-- legs -->
        <path d="M545 420 L520 530" stroke="#f8fafc" stroke-width="52" stroke-linecap="round"/>
        <path d="M655 420 L685 530" stroke="#f8fafc" stroke-width="52" stroke-linecap="round"/>
        <path d="M545 420 L520 530" stroke="#cbd5e1" stroke-width="52" stroke-linecap="round" opacity=".25"/>
        <!-- boots -->
        <g>
          <ellipse cx="505" cy="538" rx="52" ry="20" fill="#ffffff" stroke="#cbd5e1" stroke-width="3"/>
          <rect x="455" y="540" width="100" height="12" rx="6" fill="#f97316"/>
          <ellipse cx="695" cy="538" rx="52" ry="20" fill="#ffffff" stroke="#cbd5e1" stroke-width="3"/>
          <rect x="645" y="540" width="100" height="12" rx="6" fill="#f97316"/>
        </g>

        <!-- arms -->
        <path d="M505 365 L405 425" stroke="#f8fafc" stroke-width="44" stroke-linecap="round"/>
        <path d="M695 365 L805 335" stroke="#f8fafc" stroke-width="44" stroke-linecap="round"/>
        <circle cx="400" cy="432" r="34" fill="#ffffff" stroke="#cbd5e1" stroke-width="3"/>
        <circle cx="812" cy="330" r="34" fill="#ffffff" stroke="#cbd5e1" stroke-width="3"/>
        <path d="M382 422 q10 12 24 6 M794 320 q12 10 24 2" stroke="#cbd5e1" stroke-width="3" fill="none" stroke-linecap="round"/>

        <!-- body suit -->
        <ellipse cx="600" cy="395" rx="122" ry="108" fill="url(#suitGrad)" stroke="#cbd5e1" stroke-width="4"/>
        <ellipse cx="600" cy="425" rx="68" ry="52" fill="#eff6ff"/>
        <line x1="600" y1="298" x2="600" y2="490" stroke="#cbd5e1" stroke-width="3" stroke-dasharray="8 6"/>
        <!-- chest panel -->
        <rect x="552" y="332" width="96" height="74" rx="14" fill="#e2e8f0" stroke="#94a3b8" stroke-width="3"/>
        <circle cx="575" cy="355" r="10" fill="#ef4444"/><circle cx="600" cy="355" r="10" fill="#22c55e"/><circle cx="625" cy="355" r="10" fill="#3b82f6"/>
        <rect x="565" y="375" width="70" height="10" rx="5" fill="#94a3b8"/>
        <circle cx="575" cy="392" r="6" fill="#facc15"/><circle cx="625" cy="392" r="6" fill="#f97316"/>
        <!-- patches -->
        <circle cx="540" cy="335" r="16" fill="#1e3a8a"/><text x="540" y="341" text-anchor="middle" fill="#fff" font-size="14">★</text>
        <rect x="648" y="330" width="44" height="16" rx="4" fill="#fff" stroke="#cbd5e1"/><text x="670" y="342" text-anchor="middle" font-size="9" font-weight="900" fill="#334155">COSMO</text>

        <!-- HEAD -->
        <g>
          <!-- ears -->
          <path d="M515 165 L530 95 L575 140 Z" fill="#ff9f43" stroke="#e07a1f" stroke-width="3" stroke-linejoin="round"/>
          <path d="M685 165 L670 95 L625 140 Z" fill="#ff9f43" stroke="#e07a1f" stroke-width="3" stroke-linejoin="round"/>
          <path d="M530 140 L538 115 L558 135 Z" fill="#fda4af"/>
          <path d="M670 140 L662 115 L642 135 Z" fill="#fda4af"/>
          <!-- face -->
          <circle cx="600" cy="215" r="96" fill="url(#furGrad)"/>
          <ellipse cx="600" cy="250" rx="52" ry="34" fill="#fff7ed" opacity=".9"/>
          <!-- stripes -->
          <g stroke="#e07a1f" stroke-width="7" stroke-linecap="round">
            <line x1="575" y1="138" x2="575" y2="162"/><line x1="600" y1="132" x2="600" y2="158"/><line x1="625" y1="138" x2="625" y2="162"/>
          </g>
          <!-- eyes -->
          <ellipse cx="562" cy="218" rx="15" ry="19" fill="#14532d"/><ellipse cx="638" cy="218" rx="15" ry="19" fill="#14532d"/>
          <circle cx="567" cy="210" r="5" fill="#fff"/><circle cx="643" cy="210" r="5" fill="#fff"/>
          <circle cx="558" cy="226" r="3" fill="#fff" opacity=".9"/><circle cx="634" cy="226" r="3" fill="#fff" opacity=".9"/>
          <!-- nose & mouth -->
          <path d="M588 242 L612 242 L600 256 Z" fill="#f472b6" stroke="#db2777" stroke-width="2" stroke-linejoin="round"/>
          <path d="M600 256 Q600 268 586 268 M600 256 Q600 268 614 268" fill="none" stroke="#7c2d12" stroke-width="3" stroke-linecap="round"/>
          <path d="M582 272 Q600 286 618 272" fill="#7c2d12" stroke="#7c2d12" stroke-width="3" stroke-linecap="round"/>
          <!-- whiskers -->
          <g stroke="#fff" stroke-width="3" stroke-linecap="round" opacity=".95">
            <line x1="540" y1="240" x2="505" y2="232"/><line x1="540" y1="252" x2="508" y2="254"/><line x1="540" y1="264" x2="512" y2="274"/>
            <line x1="660" y1="240" x2="695" y2="232"/><line x1="660" y1="252" x2="692" y2="254"/><line x1="660" y1="264" x2="688" y2="274"/>
          </g>
          <ellipse cx="538" cy="252" rx="14" ry="8" fill="#fda4af" opacity=".7"/>
          <ellipse cx="662" cy="252" rx="14" ry="8" fill="#fda4af" opacity=".7"/>
          <!-- tongue -->
          <ellipse cx="600" cy="280" rx="10" ry="6" fill="#f472b6"/>
        </g>

        <!-- helmet -->
        <circle cx="600" cy="210" r="124" fill="url(#helmetGrad)"/>
        <circle cx="600" cy="210" r="124" fill="none" stroke="#f8fafc" stroke-width="14"/>
        <circle cx="600" cy="210" r="124" fill="none" stroke="#cbd5e1" stroke-width="3" opacity=".7"/>
        <ellipse cx="552" cy="132" rx="42" ry="18" fill="#fff" opacity=".65" transform="rotate(-28 552 132)"/>
        <circle cx="510" cy="168" r="10" fill="#fff" opacity=".55"/>
        <circle cx="660" cy="120" r="7" fill="#fff" opacity=".45"/>
        <!-- helmet lamp -->
        <circle cx="688" cy="138" r="16" fill="#facc15" stroke="#ca8a04" stroke-width="3"/>
        <circle id="lampGlow" cx="688" cy="138" r="34" fill="url(#glow)"/>
        <polygon id="beam" points="695,145 940,230 940,310 695,165" fill="#fef08a" opacity=".0"/>
      </g>
    </g>

    <!-- moon flag -->
    <g transform="translate(118 420)">
      <line x1="0" y1="0" x2="0" y2="95" stroke="#e2e8f0" stroke-width="4" stroke-linecap="round"/>
      <rect x="0" y="0" width="62" height="38" rx="4" fill="#f472b6"/>
      <text x="31" y="25" text-anchor="middle" fill="#fff" font-size="11" font-weight="900">COSMO</text>
    </g>
  </svg>
  </div>

  <div class="controls">
    <button id="ollieBtn">🛹 Moon Ollie!</button>
    <button id="spinBtn" class="secondary">🌀 360° Flip</button>
    <button id="lightBtn" class="tertiary">💡 Helmet Light</button>
    <div class="hint">Tip: Click Cosmo himself — or press <b>Space</b> for an ollie, <b>L</b> for the light. Low gravity = super floaty jumps!</div>
  </div>

  <div class="cards">
    <div class="card"><b>🌕 1/6 Gravity</b><p>Cosmo weighs almost nothing here, so his skateboard ollie floats for ages. Perfect for first-time space skaters.</p></div>
    <div class="card"><b>🌍 Earthrise</b><p>That blue marble in the sky is home. From the Moon, Earth always hangs in almost the same place.</p></div>
    <div class="card"><b>🐱 0% Air, 100% Fluff</b><p>No air resistance — but the helmet keeps Cosmo's whiskers perfectly safe and wonderfully floaty.</p></div>
  </div>
</div>

<script>
  const skater = document.getElementById('catSkater');
  const scene = document.getElementById('scene');
  const ollieBtn = document.getElementById('ollieBtn');
  const spinBtn = document.getElementById('spinBtn');
  const lightBtn = document.getElementById('lightBtn');

  function doOllie(){
    skater.classList.remove('ollie','spin');
    void skater.getBoundingClientRect();
    skater.classList.add('ollie');
  }
  function doSpin(){
    skater.classList.remove('ollie','spin');
    void skater.getBoundingClientRect();
    skater.classList.add('spin');
  }
  function toggleLight(){
    scene.classList.toggle('lights-on');
  }
  ollieBtn.addEventListener('click', doOllie);
  spinBtn.addEventListener('click', doSpin);
  lightBtn.addEventListener('click', toggleLight);
  skater.addEventListener('click', doOllie);
  document.addEventListener('keydown', (e)=>{
    if(e.code === 'Space'){ e.preventDefault(); doOllie(); }
    if(e.key.toLowerCase() === 'l') toggleLight();
    if(e.key.toLowerCase() === 's') doSpin();
  });
  // gentle welcome ollie after load so it's alive in the screenshot window
  setTimeout(doOllie, 900);
</script>
</body>
</html>
Reasoning trace (4,443 tokens)
Generating an inline animated SVG scene with responsive 1280x800 to 375px layout for first-paint display.Adding SVG elements and CSS animations for stars, earth, moon, and astronaut cat with skateboard.Extending the SVG with grouped elements, CSS keyframes, and interactive controls for motion and parallax.Adding SVG gradients, filters, star generation, and CSS keyframes for motion and interactions.Adding Earth, moon, cat skater, board, wheels, and scrolling ground elements with shapes and transforms.Adding whiskers, blush, muzzle, helmet reflection, backpack with hose, shadows, dust, speed lines, and scrolling ground animation plus JS ollie and spin interactions.
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>Cosmo — Astronaut Cat Skateboarding on the Moon</title>
<style>
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    min-height:100vh;
    font-family:ui-rounded,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    color:#eef2ff;
    background:
      radial-gradient(circle at 15% 20%, rgba(255,255,255,.9) 1.2px, transparent 1.3px),
      radial-gradient(circle at 82% 12%, rgba(255,255,255,.7) 1px, transparent 1.2px),
      radial-gradient(circle at 65% 75%, rgba(255,255,255,.5) 1px, transparent 1.2px),
      radial-gradient(circle at 30% 85%, rgba(255,255,255,.6) 1px, transparent 1.2px),
      linear-gradient(180deg,#070a1d 0%, #0f1533 55%, #1a1440 100%);
    background-size:220px 220px, 180px 180px, 260px 260px, 200px 200px, 100% 100%;
    display:flex; flex-direction:column; align-items:center;
    padding:18px 14px 28px;
    overflow-x:hidden;
  }
  .wrap{width:min(1060px,97vw)}
  header{text-align:center;margin-bottom:12px}
  .badge{
    display:inline-block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
    padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.22);
    background:rgba(255,255,255,.08);backdrop-filter:blur(6px);color:#c7d2fe;font-weight:800
  }
  h1{margin:10px 0 6px;font-size:clamp(28px,4.5vw,48px);line-height:1.05;letter-spacing:-.02em}
  h1 span{color:#ffd166}
  .sub{margin:0 auto;max-width:680px;color:#cbd5e1;font-size:clamp(13px,1.8vw,15px);line-height:1.5}
  .stage{
    margin-top:14px;
    border-radius:28px;
    padding:6px;
    background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.05));
    box-shadow:0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.12);
  }
  svg{display:block;width:100%;height:auto;border-radius:22px;background:#0b1026}
  .controls{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;margin-top:14px}
  button{
    appearance:none;border:0;cursor:pointer;font:inherit;font-weight:900;letter-spacing:.02em;
    color:#111827;background:#ffd166;padding:11px 18px;border-radius:999px;
    box-shadow:0 8px 20px rgba(255,210,102,.35), inset 0 -3px 0 rgba(0,0,0,.15);
    transition:transform .15s ease, filter .15s ease;
  }
  button:hover{transform:translateY(-1px) scale(1.02);filter:brightness(1.05)}
  button:active{transform:translateY(1px) scale(.98)}
  button.secondary{background:#e0e7ff;color:#1e3a8a;box-shadow:0 8px 20px rgba(224,231,255,.25)}
  button.tertiary{background:#5eead4;color:#134e4a;box-shadow:0 8px 20px rgba(94,234,212,.25)}
  .hint{width:100%;text-align:center;color:#94a3b8;font-size:13px;margin-top:2px}
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
  .card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:12px 14px}
  .card b{font-size:15px}
  .card p{margin:5px 0 0;color:#cbd5e1;font-size:13px;line-height:1.45}
  @media(max-width:640px){.cards{grid-template-columns:1fr} .hint{font-size:12px}}

  /* SVG Animations */
  .star{animation:twinkle 2.2s ease-in-out infinite alternate}
  @keyframes twinkle{from{opacity:.25}to{opacity:1}}
  .earthFloat{transform-box:fill-box;transform-origin:center;animation:floaty 7s ease-in-out infinite}
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
  .groundScroll{animation:scrollGround 2.6s linear infinite}
  @keyframes scrollGround{to{transform:translateX(-300px)}}
  .cat-bob{transform-box:fill-box;transform-origin:50% 55%;animation:bob 1.35s ease-in-out infinite}
  @keyframes bob{0%,100%{transform:translateY(0) rotate(-.8deg)}50%{transform:translateY(-9px) rotate(1deg)}}
  .tail{transform-box:fill-box;transform-origin:10% 90%;animation:wag 1.5s ease-in-out infinite}
  @keyframes wag{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(10deg)}}
  .wheel{transform-box:fill-box;transform-origin:center;animation:wheelSpin .45s linear infinite}
  @keyframes wheelSpin{to{transform:rotate(360deg)}}
  .speed{stroke-dasharray:46 18;animation:dash 0.7s linear infinite}
  @keyframes dash{to{stroke-dashoffset:-64}}
  .dust{animation:dustMove 1s ease-out infinite}
  @keyframes dustMove{0%{transform:translate(0,0) scale(.6);opacity:.9}100%{transform:translate(-70px,-18px) scale(1.4);opacity:0}}
  .shoot{animation:shoot 5s linear infinite}
  @keyframes shoot{0%{transform:translate(0,0);opacity:0}8%{opacity:1}22%{transform:translate(-260px,90px);opacity:0}100%{transform:translate(-260px,90px);opacity:0}}
  #catSkater{transform-box:fill-box;transform-origin:50% 88%;cursor:pointer}
  #catSkater.ollie{animation:ollie .68s cubic-bezier(.28,.84,.42,1)}
  @keyframes ollie{0%{transform:translateY(0) rotate(0)}28%{transform:translateY(-14px) rotate(-6deg)}55%{transform:translateY(-118px) rotate(5deg)}82%{transform:translateY(-16px) rotate(1deg)}100%{transform:translateY(0) rotate(0)}}
  #catSkater.spin{animation:spin360 .72s ease-in-out}
  @keyframes spin360{0%{transform:rotate(0) translateY(0)}45%{transform:rotate(175deg) translateY(-55px)}100%{transform:rotate(360deg) translateY(0)}}
  #beam{opacity:0;transition:opacity .35s ease}
  svg.lights-on #beam{opacity:.82}
  svg.lights-on #lampGlow{opacity:1}
  #lampGlow{opacity:0;transition:opacity .35s ease}
</style>
</head>
<body>
<div class="wrap">
  <header>
    <div class="badge">✦ Hand-drawn SVG • Zero gravity • 100% Cute</div>
    <h1>Cosmo the <span>Astronaut Cat</span><br>Skateboarding on the Moon 🌙</h1>
    <p class="sub">One small skate for a cat, one giant ollie for cat-kind. Cosmo is cruising the lunar surface at 1/6 gravity — where every jump is floaty and every landing is soft.</p>
  </header>

  <div class="stage">
  <svg id="scene" viewBox="0 0 1200 700" role="img" aria-label="An astronaut cat in a spacesuit and helmet riding a skateboard on the moon, with Earth in the sky">
    <title>Astronaut cat skateboarding on the moon</title>
    <defs>
      <linearGradient id="space" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stop-color="#070b24"/><stop offset="55%" stop-color="#141d3f"/><stop offset="100%" stop-color="#2b1d52"/>
      </linearGradient>
      <radialGradient id="earthGrad" cx="35%" cy="30%" r="75%">
        <stop offset="0%" stop-color="#7dd3fc"/><stop offset="55%" stop-color="#38bdf8"/><stop offset="100%" stop-color="#0369a1"/>
      </radialGradient>
      <linearGradient id="moonGrad" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stop-color="#e6ebf2"/><stop offset="35%" stop-color="#cbd5e1"/><stop offset="100%" stop-color="#94a3b8"/>
      </linearGradient>
      <radialGradient id="helmetGrad" cx="35%" cy="28%" r="72%">
        <stop offset="0%" stop-color="#ffffff" stop-opacity=".85"/><stop offset="45%" stop-color="#bae6fd" stop-opacity=".35"/><stop offset="100%" stop-color="#7dd3fc" stop-opacity=".18"/>
      </radialGradient>
      <linearGradient id="suitGrad" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stop-color="#ffffff"/><stop offset="100%" stop-color="#dbeafe"/>
      </linearGradient>
      <linearGradient id="furGrad" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stop-color="#ffb86b"/><stop offset="100%" stop-color="#ff8a3d"/>
      </linearGradient>
      <linearGradient id="boardGrad" x1="0" y1="0" x2="1" y2="0">
        <stop offset="0%" stop-color="#14b8a6"/><stop offset="50%" stop-color="#2dd4bf"/><stop offset="100%" stop-color="#f97316"/>
      </linearGradient>
      <radialGradient id="glow" cx="50%" cy="50%" r="50%">
        <stop offset="0%" stop-color="#fef08a" stop-opacity=".9"/><stop offset="100%" stop-color="#fef08a" stop-opacity="0"/>
      </radialGradient>
    </defs>

    <rect width="1200" height="700" fill="url(#space)"/>

    <!-- STARS -->
    <g fill="#ffffff">
      <circle class="star" cx="48" cy="52" r="2.2"/><circle class="star" style="animation-delay:.4s" cx="120" cy="110" r="1.6"/>
      <circle class="star" style="animation-delay:.9s" cx="200" cy="46" r="2.4"/><circle class="star" style="animation-delay:.2s" cx="285" cy="140" r="1.5"/>
      <circle class="star" style="animation-delay:1.1s" cx="340" cy="70" r="1.8"/><circle class="star" cx="430" cy="40" r="2"/>
      <circle class="star" style="animation-delay:.6s" cx="520" cy="115" r="1.4"/><circle class="star" style="animation-delay:1.4s" cx="610" cy="52" r="2.1"/>
      <circle class="star" cx="690" cy="130" r="1.6"/><circle class="star" style="animation-delay:.3s" cx="760" cy="48" r="2.3"/>
      <circle class="star" style="animation-delay:1s" cx="850" cy="92" r="1.5"/><circle class="star" cx="1120" cy="300" r="1.8"/>
      <circle class="star" style="animation-delay:.7s" cx="1080" cy="380" r="1.4"/><circle class="star" cx="60" cy="260" r="1.6"/>
      <circle class="star" style="animation-delay:1.2s" cx="140" cy="340" r="1.3"/><circle class="star" cx="90" cy="440" r="1.5"/>
      <circle class="star" style="animation-delay:.5s" cx="1100" cy="480" r="1.4"/><circle class="star" cx="1020" cy="260" r="1.2"/>
      <circle class="star" style="animation-delay:1.6s" cx="30" cy="380" r="1.4"/><circle class="star" cx="1150" cy="80" r="2"/>
    </g>
    <g fill="#fde68a">
      <path d="M180 180 l4 12 12 4 -12 4 -4 12 -4-12 -12-4 12-4z"/>
      <path d="M880 170 l3 9 9 3 -9 3 -3 9 -3-9 -9-3 9-3z" opacity=".9"/>
      <path d="M620 200 l3 9 9 3 -9 3 -3 9 -3-9 -9-3 9-3z" opacity=".8"/>
    </g>
    <g class="shoot" stroke="#fff" stroke-width="3" stroke-linecap="round" opacity="0">
      <line x1="420" y1="70" x2="500" y2="42"/>
    </g>

    <!-- EARTH -->
    <g class="earthFloat">
      <circle cx="985" cy="132" r="86" fill="url(#glow)" opacity=".55"/>
      <circle cx="985" cy="132" r="68" fill="url(#earthGrad)" stroke="#e0f2fe" stroke-width="3"/>
      <path d="M945 98 q22-18 40 4 q12 14 -4 26 q-18 12 -34 -2 q-14 -14 -2 -28z" fill="#4ade80"/>
      <path d="M1005 138 q20 6 14 20 q-6 14 -22 8 q-14 -6 -8 -18 q5 -12 16 -10z" fill="#4ade80"/>
      <path d="M960 158 q14 10 26 2 q10 -6 2 -14 q-14 -8 -24 2 q-6 6 -4 10z" fill="#22c55e"/>
      <ellipse cx="962" cy="118" rx="22" ry="7" fill="#fff" opacity=".85"/>
      <ellipse cx="1002" cy="148" rx="18" ry="6" fill="#fff" opacity=".7"/>
      <ellipse cx="985" cy="132" rx="68" ry="68" fill="#0f172a" opacity=".18"/>
      <circle cx="1018" cy="108" r="9" fill="#fff" opacity=".5"/>
    </g>
    <text x="985" y="225" text-anchor="middle" fill="#bae6fd" font-size="13" font-weight="800" letter-spacing="3">EARTH</text>

    <!-- distant hills -->
    <path d="M0 470 Q180 430 360 462 T720 450 T1200 470 L1200 560 L0 560 Z" fill="#1e293b" opacity=".85"/>
    <path d="M0 495 Q220 460 460 485 T900 480 T1200 495 L1200 580 L0 580 Z" fill="#334155" opacity=".9"/>

    <!-- MOON SURFACE -->
    <path d="M0 530 Q300 485 600 512 T1200 505 L1200 700 L0 700 Z" fill="url(#moonGrad)"/>
    <path d="M0 530 Q300 485 600 512 T1200 505" fill="none" stroke="#f8fafc" stroke-width="4" opacity=".8"/>
    <ellipse cx="170" cy="600" rx="62" ry="18" fill="#94a3b8" opacity=".55"/>
    <ellipse cx="170" cy="595" rx="62" ry="16" fill="#cbd5e1"/>
    <ellipse cx="1020" cy="610" rx="78" ry="20" fill="#94a3b8" opacity=".5"/>
    <ellipse cx="1020" cy="605" rx="78" ry="18" fill="#d1d5db"/>
    <ellipse cx="860" cy="570" rx="30" ry="9" fill="#94a3b8" opacity=".6"/>
    <ellipse cx="300" cy="560" rx="24" ry="7" fill="#94a3b8" opacity=".55"/>

    <!-- scrolling ground details -->
    <g class="groundScroll" fill="#64748b">
      <g>
        <circle cx="80" cy="625" r="7"/><circle cx="380" cy="640" r="9"/><circle cx="680" cy="622" r="6"/>
        <circle cx="980" cy="645" r="8"/><circle cx="1280" cy="625" r="7"/>
        <path d="M180 615 l18 0 6 10 -30 0z"/><path d="M780 630 l20 0 7 11 -34 0z"/><path d="M1080 615 l18 0 6 10 -30 0z"/>
        <ellipse cx="240" cy="585" rx="18" ry="5" fill="#94a3b8"/><ellipse cx="540" cy="590" rx="22" ry="6" fill="#94a3b8"/><ellipse cx="1140" cy="588" rx="20" ry="5" fill="#94a3b8"/>
      </g>
    </g>

    <!-- footprints / dust trail -->
    <g fill="#cbd5e1" opacity=".8">
      <ellipse cx="330" cy="595" rx="16" ry="6"/><ellipse cx="285" cy="605" rx="13" ry="5"/><ellipse cx="240" cy="618" rx="11" ry="4"/>
    </g>

    <!-- speed lines -->
    <g stroke="#e0f2fe" stroke-width="6" stroke-linecap="round" opacity=".85">
      <line class="speed" x1="180" y1="360" x2="310" y2="360"/>
      <line class="speed" x1="140" y1="410" x2="300" y2="410"/>
      <line class="speed" x1="200" y1="460" x2="320" y2="460"/>
    </g>
    <g fill="#e2e8f0">
      <circle class="dust" cx="385" cy="575" r="7"/><circle class="dust" style="animation-delay:.25s" cx="395" cy="590" r="5"/>
      <circle class="dust" style="animation-delay:.5s" cx="380" cy="560" r="4"/>
    </g>

    <!-- shadow -->
    <ellipse cx="600" cy="612" rx="250" ry="24" fill="#0f172a" opacity=".28"/>

    <!-- CAT SKATER -->
    <g id="catSkater">
      <g class="cat-bob">
        <!-- tail -->
        <g class="tail">
          <path d="M700 430 Q800 430 815 355 Q822 315 785 310" fill="none" stroke="#ff9f43" stroke-width="34" stroke-linecap="round"/>
          <path d="M785 310 q-18 18 -6 36" stroke="#e07a1f" stroke-width="34" fill="none" stroke-linecap="round"/>
        </g>

        <!-- backpack -->
        <g>
          <rect x="462" y="288" width="68" height="138" rx="22" fill="#cbd5e1" stroke="#94a3b8" stroke-width="3"/>
          <rect x="476" y="262" width="18" height="42" rx="9" fill="#e2e8f0" stroke="#94a3b8" stroke-width="3"/>
          <rect x="500" y="262" width="18" height="42" rx="9" fill="#f1f5f9" stroke="#94a3b8" stroke-width="3"/>
          <circle cx="496" cy="330" r="12" fill="#ffffff" stroke="#94a3b8" stroke-width="3"/>
          <path d="M520 300 Q560 250 565 200" fill="none" stroke="#64748b" stroke-width="8" stroke-linecap="round"/>
        </g>

        <!-- skateboard -->
        <g>
          <rect x="455" y="555" width="28" height="16" rx="4" fill="#475569"/>
          <rect x="715" y="555" width="28" height="16" rx="4" fill="#475569"/>
          <path d="M365 540 Q365 522 390 522 L810 522 Q835 522 835 540 Q835 558 810 558 L390 558 Q365 558 365 540Z" fill="url(#boardGrad)" stroke="#0f172a" stroke-width="3"/>
          <rect x="390" y="528" width="420" height="7" rx="3" fill="#0f172a" opacity=".85"/>
          <text x="600" y="552" text-anchor="middle" font-size="15" font-weight="900" fill="#ffffff" letter-spacing="2">MOON RIDER ★</text>
          <g class="wheel" style="transform-origin:470px 585px">
            <circle cx="470" cy="585" r="27" fill="#ffd166" stroke="#111827" stroke-width="4"/>
            <circle cx="470" cy="585" r="10" fill="#fff" stroke="#111827" stroke-width="3"/>
            <line x1="470" y1="562" x2="470" y2="608" stroke="#111827" stroke-width="3"/><line x1="447" y1="585" x2="493" y2="585" stroke="#111827" stroke-width="3"/>
          </g>
          <g class="wheel" style="transform-origin:730px 585px">
            <circle cx="730" cy="585" r="27" fill="#ffd166" stroke="#111827" stroke-width="4"/>
            <circle cx="730" cy="585" r="10" fill="#fff" stroke="#111827" stroke-width="3"/>
            <line x1="730" y1="562" x2="730" y2="608" stroke="#111827" stroke-width="3"/><line x1="707" y1="585" x2="753" y2="585" stroke="#111827" stroke-width="3"/>
          </g>
        </g>

        <!-- legs -->
        <path d="M545 420 L520 530" stroke="#f8fafc" stroke-width="52" stroke-linecap="round"/>
        <path d="M655 420 L685 530" stroke="#f8fafc" stroke-width="52" stroke-linecap="round"/>
        <path d="M545 420 L520 530" stroke="#cbd5e1" stroke-width="52" stroke-linecap="round" opacity=".25"/>
        <!-- boots -->
        <g>
          <ellipse cx="505" cy="538" rx="52" ry="20" fill="#ffffff" stroke="#cbd5e1" stroke-width="3"/>
          <rect x="455" y="540" width="100" height="12" rx="6" fill="#f97316"/>
          <ellipse cx="695" cy="538" rx="52" ry="20" fill="#ffffff" stroke="#cbd5e1" stroke-width="3"/>
          <rect x="645" y="540" width="100" height="12" rx="6" fill="#f97316"/>
        </g>

        <!-- arms -->
        <path d="M505 365 L405 425" stroke="#f8fafc" stroke-width="44" stroke-linecap="round"/>
        <path d="M695 365 L805 335" stroke="#f8fafc" stroke-width="44" stroke-linecap="round"/>
        <circle cx="400" cy="432" r="34" fill="#ffffff" stroke="#cbd5e1" stroke-width="3"/>
        <circle cx="812" cy="330" r="34" fill="#ffffff" stroke="#cbd5e1" stroke-width="3"/>
        <path d="M382 422 q10 12 24 6 M794 320 q12 10 24 2" stroke="#cbd5e1" stroke-width="3" fill="none" stroke-linecap="round"/>

        <!-- body suit -->
        <ellipse cx="600" cy="395" rx="122" ry="108" fill="url(#suitGrad)" stroke="#cbd5e1" stroke-width="4"/>
        <ellipse cx="600" cy="425" rx="68" ry="52" fill="#eff6ff"/>
        <line x1="600" y1="298" x2="600" y2="490" stroke="#cbd5e1" stroke-width="3" stroke-dasharray="8 6"/>
        <!-- chest panel -->
        <rect x="552" y="332" width="96" height="74" rx="14" fill="#e2e8f0" stroke="#94a3b8" stroke-width="3"/>
        <circle cx="575" cy="355" r="10" fill="#ef4444"/><circle cx="600" cy="355" r="10" fill="#22c55e"/><circle cx="625" cy="355" r="10" fill="#3b82f6"/>
        <rect x="565" y="375" width="70" height="10" rx="5" fill="#94a3b8"/>
        <circle cx="575" cy="392" r="6" fill="#facc15"/><circle cx="625" cy="392" r="6" fill="#f97316"/>
        <!-- patches -->
        <circle cx="540" cy="335" r="16" fill="#1e3a8a"/><text x="540" y="341" text-anchor="middle" fill="#fff" font-size="14">★</text>
        <rect x="648" y="330" width="44" height="16" rx="4" fill="#fff" stroke="#cbd5e1"/><text x="670" y="342" text-anchor="middle" font-size="9" font-weight="900" fill="#334155">COSMO</text>

        <!-- HEAD -->
        <g>
          <!-- ears -->
          <path d="M515 165 L530 95 L575 140 Z" fill="#ff9f43" stroke="#e07a1f" stroke-width="3" stroke-linejoin="round"/>
          <path d="M685 165 L670 95 L625 140 Z" fill="#ff9f43" stroke="#e07a1f" stroke-width="3" stroke-linejoin="round"/>
          <path d="M530 140 L538 115 L558 135 Z" fill="#fda4af"/>
          <path d="M670 140 L662 115 L642 135 Z" fill="#fda4af"/>
          <!-- face -->
          <circle cx="600" cy="215" r="96" fill="url(#furGrad)"/>
          <ellipse cx="600" cy="250" rx="52" ry="34" fill="#fff7ed" opacity=".9"/>
          <!-- stripes -->
          <g stroke="#e07a1f" stroke-width="7" stroke-linecap="round">
            <line x1="575" y1="138" x2="575" y2="162"/><line x1="600" y1="132" x2="600" y2="158"/><line x1="625" y1="138" x2="625" y2="162"/>
          </g>
          <!-- eyes -->
          <ellipse cx="562" cy="218" rx="15" ry="19" fill="#14532d"/><ellipse cx="638" cy="218" rx="15" ry="19" fill="#14532d"/>
          <circle cx="567" cy="210" r="5" fill="#fff"/><circle cx="643" cy="210" r="5" fill="#fff"/>
          <circle cx="558" cy="226" r="3" fill="#fff" opacity=".9"/><circle cx="634" cy="226" r="3" fill="#fff" opacity=".9"/>
          <!-- nose & mouth -->
          <path d="M588 242 L612 242 L600 256 Z" fill="#f472b6" stroke="#db2777" stroke-width="2" stroke-linejoin="round"/>
          <path d="M600 256 Q600 268 586 268 M600 256 Q600 268 614 268" fill="none" stroke="#7c2d12" stroke-width="3" stroke-linecap="round"/>
          <path d="M582 272 Q600 286 618 272" fill="#7c2d12" stroke="#7c2d12" stroke-width="3" stroke-linecap="round"/>
          <!-- whiskers -->
          <g stroke="#fff" stroke-width="3" stroke-linecap="round" opacity=".95">
            <line x1="540" y1="240" x2="505" y2="232"/><line x1="540" y1="252" x2="508" y2="254"/><line x1="540" y1="264" x2="512" y2="274"/>
            <line x1="660" y1="240" x2="695" y2="232"/><line x1="660" y1="252" x2="692" y2="254"/><line x1="660" y1="264" x2="688" y2="274"/>
          </g>
          <ellipse cx="538" cy="252" rx="14" ry="8" fill="#fda4af" opacity=".7"/>
          <ellipse cx="662" cy="252" rx="14" ry="8" fill="#fda4af" opacity=".7"/>
          <!-- tongue -->
          <ellipse cx="600" cy="280" rx="10" ry="6" fill="#f472b6"/>
        </g>

        <!-- helmet -->
        <circle cx="600" cy="210" r="124" fill="url(#helmetGrad)"/>
        <circle cx="600" cy="210" r="124" fill="none" stroke="#f8fafc" stroke-width="14"/>
        <circle cx="600" cy="210" r="124" fill="none" stroke="#cbd5e1" stroke-width="3" opacity=".7"/>
        <ellipse cx="552" cy="132" rx="42" ry="18" fill="#fff" opacity=".65" transform="rotate(-28 552 132)"/>
        <circle cx="510" cy="168" r="10" fill="#fff" opacity=".55"/>
        <circle cx="660" cy="120" r="7" fill="#fff" opacity=".45"/>
        <!-- helmet lamp -->
        <circle cx="688" cy="138" r="16" fill="#facc15" stroke="#ca8a04" stroke-width="3"/>
        <circle id="lampGlow" cx="688" cy="138" r="34" fill="url(#glow)"/>
        <polygon id="beam" points="695,145 940,230 940,310 695,165" fill="#fef08a" opacity=".0"/>
      </g>
    </g>

    <!-- moon flag -->
    <g transform="translate(118 420)">
      <line x1="0" y1="0" x2="0" y2="95" stroke="#e2e8f0" stroke-width="4" stroke-linecap="round"/>
      <rect x="0" y="0" width="62" height="38" rx="4" fill="#f472b6"/>
      <text x="31" y="25" text-anchor="middle" fill="#fff" font-size="11" font-weight="900">COSMO</text>
    </g>
  </svg>
  </div>

  <div class="controls">
    <button id="ollieBtn">🛹 Moon Ollie!</button>
    <button id="spinBtn" class="secondary">🌀 360° Flip</button>
    <button id="lightBtn" class="tertiary">💡 Helmet Light</button>
    <div class="hint">Tip: Click Cosmo himself — or press <b>Space</b> for an ollie, <b>L</b> for the light. Low gravity = super floaty jumps!</div>
  </div>

  <div class="cards">
    <div class="card"><b>🌕 1/6 Gravity</b><p>Cosmo weighs almost nothing here, so his skateboard ollie floats for ages. Perfect for first-time space skaters.</p></div>
    <div class="card"><b>🌍 Earthrise</b><p>That blue marble in the sky is home. From the Moon, Earth always hangs in almost the same place.</p></div>
    <div class="card"><b>🐱 0% Air, 100% Fluff</b><p>No air resistance — but the helmet keeps Cosmo's whiskers perfectly safe and wonderfully floaty.</p></div>
  </div>
</div>

<script>
  const skater = document.getElementById('catSkater');
  const scene = document.getElementById('scene');
  const ollieBtn = document.getElementById('ollieBtn');
  const spinBtn = document.getElementById('spinBtn');
  const lightBtn = document.getElementById('lightBtn');

  function doOllie(){
    skater.classList.remove('ollie','spin');
    void skater.getBoundingClientRect();
    skater.classList.add('ollie');
  }
  function doSpin(){
    skater.classList.remove('ollie','spin');
    void skater.getBoundingClientRect();
    skater.classList.add('spin');
  }
  function toggleLight(){
    scene.classList.toggle('lights-on');
  }
  ollieBtn.addEventListener('click', doOllie);
  spinBtn.addEventListener('click', doSpin);
  lightBtn.addEventListener('click', toggleLight);
  skater.addEventListener('click', doOllie);
  document.addEventListener('keydown', (e)=>{
    if(e.code === 'Space'){ e.preventDefault(); doOllie(); }
    if(e.key.toLowerCase() === 'l') toggleLight();
    if(e.key.toLowerCase() === 's') doSpin();
  });
  // gentle welcome ollie after load so it's alive in the screenshot window
  setTimeout(doOllie, 900);
</script>
</body>
</html>
```