Mistral Large 4

The user wants an SVG of an astronaut cat skateboarding on the moon. I should create a self-contained HTML file with an inline SVG. Let me make it detailed and charming: moon surface, stars, Earth in the background, astronaut cat with helmet, riding a skateboard, maybe some motion lines, craters.

I need to output exactly one fenced code block with ```html. No text before or after.

Let me design the SVG:
- viewBox 0 0 1280 800 or similar, responsive.
- Dark space background with stars, a planet (Earth) in corner, moon surface at bottom with craters.
- Astronaut cat: white/orange cat with helmet (glass dome), spacesuit, riding skateboard tilted, motion lines, maybe a jetpack or scarf flowing.
- Add subtle animation via CSS (stars twinkle, cat bobbing, board moving) — allowed since inline. Keep it simple but lively. Actually it's an SVG inside HTML; CSS animations inline are fine.

Let me craft the cat:
- Body: spacesuit torso (rounded rect), chest panel with buttons.
- Head: cat head inside helmet — circle with ears, whiskers, eyes, nose.
- Helmet: big glass circle with highlight, ring around neck.
- Arms: one arm out for balance.
- Legs: bent, feet on skateboard.
- Skateboard: deck with wheels, tilted.
- Tail: flowing behind.
- Moon: gray ground with craters, low gravity bounce arc maybe dashed line.

Add stars as circles with twinkle animation, Earth top-left or right with blue/green, maybe a small flag? Keep focus.

Let me write coordinates. viewBox="0 0 1200 800".

Background: rect fill gradient dark navy. Stars scattered.

Earth: circle at (1020, 140) r=70, gradient blue, with some green blobs and white clouds, subtle.

Moon ground: path covering bottom, fill #c9c9d1 gradient, craters ellipses darker.

Cat on skateboard around center (600, 480) area, maybe doing a trick with board tilted, dashed motion arc.

Let me build the cat group with transform translate(600,430) rotate(-8):

Skateboard at local (0, 150): deck path, wheels circles.

Actually easier: draw skateboard first, then cat standing on it.

Skateboard deck: rounded path from (-110, 0) to (110, 0) with curved ends: 
M -120 -6 Q -120 -18 -100 -18 L 100 -18 Q 120 -18 120 -6 Q 120 4 100 6 L -100 6 Q -120 4 -120 -6 Z — hmm simpler: use path with slight curve. Wheels at (-70, 18) and (70, 18) r=14, with trucks.

Cat legs from hips at (-15, -70) and (25, -70) down to board at y=-10. Feet ellipses on deck.

Body: rounded rect x=-55 y=-160 w=110 h=100 rx=30, white suit with gray shading. Chest panel rect with colored buttons.

Arms: left arm extended back, right arm forward for balance: paths with round linecaps, stroke white thick, gloves circles.

Head: center (0, -200): cat head circle r=45 fill orange (#f5a83d) with stripes, ears triangles, inner ears pink, eyes, nose, whiskers. Helmet: circle r=62 fill rgba(180,220,255,0.25) stroke #dfe9f5 stroke-width 6, highlight arc. Neck ring rect.

Tail: path curving behind from body.

Add scarf flowing? Maybe a little red scarf flowing to show motion.

Motion lines behind board, dashed arc showing jump, small dust/pebbles.

Shadow ellipse under board on moon.

Add title text? Maybe small caption "Astro Cat on the Moon" — optional; could add playful text at bottom. Keep minimal; maybe not needed. I'll add a small badge "LUNAR SKATE PARK" on a flag? A flag planted in moon with text could be cute. Let's add a small flag to the left with "MEOW" on it. Fun.

Animations: 
- @keyframes twinkle for stars (opacity).
- cat group float/bob: translateY slight + rotate.
- board wheels rotate? Could animate rotation of wheel spokes.
- scarf wave via transform.
Keep animations subtle, CSS inside <style> targeting SVG elements by class.

Ensure it looks good at 1280x800 and scales down to 375 width: SVG width 100%, height auto, with preserveAspectRatio. Body margin 0, background dark.

Let me write the code carefully.

Colors:
- Space: #0b1026 to #1b2340 gradient.
- Stars: white with varying opacity.
- Earth: radial gradient #4aa8ff to #1b5fd9, land #3fbf6f, clouds white opacity .8.
- Moon ground: gradient #d8d8e0 to #a9a9b8; craters #b5b5c4 with inner shadow ellipse darker #8f8fa0.
- Suit: #f4f6fb with shading #d7dce8, outline #9aa3b8.
- Cat fur: #f6a83c, stripes #d9822b, inner ear #f7b8c4.
- Helmet glass: fill #bfe3ff opacity .22, stroke #e8f2ff width 6, highlight white opacity .6.
- Board deck: gradient #ff5d73 to #c2264f? Or teal. Let's do purple-pink: #7a5cff deck top, grip dark. Wheels #ffd23f with hub.
- Accent: chest panel #2b3a67 with buttons red/green/yellow.

Draw order: bg, stars, earth, moon ground, craters, flag, shadow, motion arc, skateboard+cat group (cat above board), dust particles, foreground craters.

Cat details with local coords: group translate(600 400) rotate(-6).

Let me define:
Board group at translate(0,120) rotate(-4):
- shadow? separate ellipse at (600, 560) in scene.
- deck: path M -130 -8 C -130 -22 -110 -26 -95 -26 L 95 -26 C 110 -26 130 -22 130 -8 C 130 6 110 10 95 10 L -95 10 C -110 10 -130 6 -130 -8 Z fill url(#deckGrad) stroke #5b2a86? Let's stroke #3d2b63 width 3.
- grip tape top line: path M -120 -22 L 120 -22 stroke rgba(0,0,0,.25) width 4? Actually deck top at y=-26; add inner line.
- trucks: rects at (-70,-26..-12) and (70,...): rect x=-76 y=-26 w=12 h=14 fill #8f96a8; same at 64.
- wheels: circle cx=-70 cy=0 r=16 fill #ffd23f stroke #b8860b? with hub circle r=6 fill #fff; spokes group class="wheel" with lines for rotation animation: lines from center. Put wheel groups at (-70,2) and (70,2).

Wait deck bottom at y=10, trucks from -26 to -12? Wheels should be below deck: deck occupies y -26..10; trucks attach under deck at y 10 down to 20; wheels center at y ~ 24. Let me set: trucks rect x=-76 y=8 w=12 h=10; wheels cy=26 r=16. Board local origin at deck center. Then cat feet at y=-26 (top of deck).

Cat group (same parent as board, so standing on board): feet at y=-30.
- back foot ellipse at (-40,-32) rx 18 ry 8 fill suit-dark; front foot (35,-32).
- legs: paths from hips to feet: back leg M -20 -70 C -35 -55 -42 -45 -40 -34 ; front leg M 20 -70 C 30 -55 34 -45 35 -34. stroke #f4f6fb width 22 linecap round, with outline? Use stroke suit color; add boot circles? Keep simple: thick strokes with round caps, plus boot ellipses at feet fill #d7dce8 stroke #9aa3b8.
- torso: rounded rect x=-52 y=-168 w=104 h=104 rx=34 fill url(#suitGrad) stroke #9aa3b8 sw 3.
- chest panel: rect x=-30 y=-150 w=60 h=44 rx=10 fill #22315e stroke #9aa3b8; buttons circles: (-14,-136) r5 #ff5d5d, (2,-136) r5 #ffd23f, (18,-136) r5 #4ade80; small lines.
- belt: rect x=-52 y=-78 w=104 h=12 fill #c9d2e4.
- arms: back arm (left, extended behind-up): path M -45 -150 C -75 -160 -95 -175 -105 -195 stroke suit width 20 round; glove circle at (-108,-198) r 13 fill #fff stroke #9aa3b8. Front arm: M 45 -150 C 75 -140 90 -125 100 -105; glove at (102,-102) r13.
- Actually arms should be behind/above torso; draw arms before torso? Arms attach at shoulders; draw after torso is fine with round caps, but shoulder joints: start points inside torso.
- neck ring: rect x=-26 y=-196 w=52 h=16 rx=8 fill #c9d2e4 stroke #9aa3b8 — but head at y around -230. Let me place head center (0,-240) r=44.
- head: circle r=44 fill #f6a83c stroke #c97a1e? outline maybe #b56a17 width 3.
- ears: path left: M -34 -268 L -44 -302 L -12 -282 Z fill #f6a83c stroke; inner ear smaller pink. Right mirrored: M 34 -268 L 44 -302 L 12 -282 Z. But helmet circle r=62 centered (0,-240) extends to y -302; ears at -302 poke to helmet edge; helmet drawn over head, ears may be clipped by helmet? Helmet glass is translucent so ears visible through. Draw ears before helmet, helmet circle over everything translucent — ears will show through glass. Good: draw head+ears, then helmet glass on top.
- face: eyes: two ellipses at (-15,-246) and (15,-246) rx 5 ry 7 fill #2b2b2b with white highlight dots. Nose: small triangle/path at (0,-232) fill #e26d8f. Mouth: path M 0 -230 q -6 8 -12 4 M 0 -230 q 6 8 12 4 stroke #7a4a12. Whiskers: lines from cheeks: (-38,-236) to (-58,-240) etc., stroke #fff opacity .8 width 2. Stripes on forehead: three short paths at top of head stroke #d9822b.
- helmet: circle cx 0 cy -240 r 62 fill rgba(190,225,255,0.18) stroke #eaf4ff sw 6 opacity... stroke solid #dfeeff. Highlight: path arc M -38 -278 A 48 48 0 0 1 -8 -300 stroke white opacity .7 width 6 linecap round fill none. Small antenna? maybe a tiny light on top: circle at (0,-306) r5 fill #ffd23f — on helmet top.
- neck ring under head: rect x=-24 y=-186 w=48 h=14 rx=7.
- tail: from behind body: path M 52 -90 C 95 -80 115 -50 108 -20 stroke #f6a83c width 16 fill none linecap round, with suit cuff? Cat tail orange with darker tip: add tip circle. Draw before torso so it emerges behind.
- scarf: red scarf around neck flowing: path at neck: ellipse band + flowing tail: M -20 -186 C -50 -180 -80 -190 -105 -175 stroke #ff4d5e width 12 fill none linecap round, class scarf for animation. Plus knot circle at (0,-184) r 8.

Hmm neck area: head bottom at -196; ring at -186..-172; torso top at -168. Scarf at -180 flows back-left.

Motion: dashed arc behind board: path M 380 560 Q 480 380 640 420? Something showing jump trajectory: M 360 540 C 430 430 520 400 610 430 stroke #ffffff opacity .25 dasharray 2 10 linecap round width 4. Place in scene coords behind cat. Since cat at translate(600,400), board at local y=120 → scene y=520, deck top ~494. Ground at y ~ 560-600. Shadow ellipse at (600, 585) rx 150 ry 18 fill #000 opacity .25.

Ground: path M 0 600 Q 300 560 600 590 T 1200 570 L 1200 800 L 0 800 Z fill url(#moonGrad). Craters: ellipses with darker fill and rim: e.g., ellipse (180, 700) rx 70 ry 20 fill #a7a7b8; inner ellipse (180,703) rx 55 ry 14 fill #8f8fa0 opacity .8; rim highlight path. A few craters: (950, 680) rx 90 ry 26; (420, 740) rx 50 ry 14; (1100, 760) rx 60 ry 16. Also small pebbles circles.

Flag: pole line x=250 from y=600 to y=430 stroke #c9d2e4 width 6; flag path M 250 432 L 360 452 L 250 476 Z fill #ff4d5e; text "MEOW" on flag? Text in SVG fine: <text x="262" y="462" fill="#fff" font-size="20" font-weight="bold" font-family="sans-serif" transform="rotate(9 262 462)">MEOW</text>. Rotation to match flag slope: flag from (250,432) to (360,452): slope ~10.9°. ok rotate(11).

Earth at (1010,150) r 75: circle fill url(#earthGrad); land blobs: paths fill #43c06b opacity .9; clouds: white ellipses opacity .7; atmosphere: circle r 82 fill none stroke rgba(120,180,255,.35) width 8; maybe glow.

Stars: generate ~40 circles manually with class star and varying r (1-2.5) and opacity; some with twinkle animation and animation-delay via style attr. Also a few 4-point sparkle paths. Shooting star: line with gradient? Could animate a small comet: group with line and circle, animation translating across, infinite with delay. Nice touch.

Also small floating astronaut helmet? Keep focused.

Text caption bottom-left? Maybe "ASTRO CAT // LUNAR OLYMPICS" small letter-spaced text at bottom in white opacity .6, font monospace. Cute. Place at (60, 770).

Animations:
```
.star{animation:tw 3s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:.25}50%{opacity:1}}
.cat{animation:bob 3s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(600px,400px) rotate(-6deg)}50%{transform:translate(600px,388px) rotate(-3deg)}}
```
Careful: CSS transform on SVG group overrides attribute transform; so set transform in CSS only (use transform-box? For SVG elements, CSS transforms work with px units in user space). Use `transform-origin` appropriately; simpler: wrap cat in outer group with attribute transform for position, inner group class cat for animation translateY only: `.bob{animation:bob 3s ...}` `@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}` and rotate handled by outer. Good.

Wheels spin: `.wheel{animation:spin 1.2s linear infinite; transform-origin:center; transform-box:fill-box}` with spokes. transform-box: fill-box makes origin the wheel's bbox center. Good.

Scarf wave: `.scarf{animation:wave 1.6s ease-in-out infinite; transform-box:fill-box; transform-origin:0% 50%}` keyframes rotate ±6deg.

Comet: `.comet{animation:shoot 7s linear infinite; opacity:0}` keyframes: 0%{transform:translate(0,0);opacity:0} 5%{opacity:1} 15%{transform:translate(-500px,260px);opacity:0} 100%{transform:translate(-500px,260px);opacity:0}. Start position top-right.

Board slight tilt animation synced with bob: give board group class tilt rotate. Maybe combine: put board+cat in one group .rider that bobs and rotates slightly: keyframes translateY and rotate. Outer group positions at (600,400); inner .rider animates `transform: translateY(...) rotate(...)`. transform-origin default 0 0 of user space — rotate around origin (0,0 local) which is above the cat; rotating around local origin (0,0) which is near cat's chest? Local origin at scene (600,400) — that's mid-air above board; rotation around that point fine, small angles.

Let me set keyframes: 
```
@keyframes ride{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-12px) rotate(2deg)}}
.rider{animation:ride 2.8s ease-in-out infinite}
```
This makes whole cat+board hover slightly (low gravity bounce) — cute, like moon bounce. Shadow scales inversely: `.shadow{animation:sh 2.8s ease-in-out infinite; transform-box:fill-box; transform-origin:center}` keyframes scale(1)→scale(.85) opacity .25→.15.

Dust particles near board: few small circles class puff with animation rising & fading, delays.

Now write all coordinates concretely. Scene viewBox 0 0 1200 800.

Background rect 1200x800 fill url(#spaceGrad) (linear y: #070b1d → #141b3a → maybe #1d2450).

Stars list (x,y,r,opacity,delay): I'll scatter: (60,80,2),(140,200,1.5),(220,60,2.2),(320,140,1.4),(420,90,2),(520,50,1.5),(640,110,2.4),(760,60,1.6),(860,150,2),(1120,90,1.8),(1160,220,1.4),(980,60,1.6),(60,320,1.6),(180,380,1.2),(1120,340,2),(1050,300,1.3),(40,520,1.5),(300,260,1.2),(480,220,1.6),(700,240,1.3),(900,300,1.5),(1150,460,1.6),(380,320,1.2),(580,300,1.4),(240,300,1.8),(140,120,1.2)... plus sparkles: 4-point star path at (500,160) and (1080,240): path M0,-8 L2,-2 L8,0 L2,2 L0,8 L-2,2 L-8,0 L-2,-2 Z fill white.

Comet group at translate(1150,60): line from (0,0) to (70,-35)? Actually moving left-down: gradient line stroke url(#cometGrad) width 3 linecap round from (60,-30) to (0,0), circle at (0,0) r 4 fill white. Animation translate(-600, 300).

Earth group translate(1010,150): glow circle r 95 fill url(#glow) radial; circle r 72 fill url(#earthGrad); land: path blobs: M -30 -40 C -10 -55 20 -50 25 -30 C 40 -25 35 -5 15 -5 C 5 10 -25 5 -30 -15 Z fill #3fbf6f opacity .85; another blob at (30,25): M 10 20 C 25 10 45 20 40 35 C 25 45 5 35 10 20 Z; small at (-45,25). Clouds: ellipses white opacity .75: (-20,10) rx 26 ry 8 rotate(-15); (25,-25) rx 20 ry 7 rotate(10); (0,40) rx 24 ry 7. Atmosphere ring: circle r 72 fill none stroke rgba(140,190,255,.5) width 3; outer stroke r 80 rgba(.15) width 10.

Moon ground path: M 0 610 C 200 575 380 600 600 585 C 820 570 1000 595 1200 575 L 1200 800 L 0 800 Z fill url(#moonGrad). Add subtle darker undulation line? ok.

Craters:
1. (170,690) rx 78 ry 22: outer fill #b3b3c2; inner offset (170,694) rx 60 ry 15 fill #9898ab; rim arc: path M 92 690 A 78 22 0 0 1 248 690 stroke #e2e2ec width 4 fill none opacity .6 (top rim highlight). Simpler: draw outer ellipse fill #a2a2b5, then inner ellipse fill #8d8da1 slightly lower, then top arc stroke light.
2. (930,670) rx 95 ry 26 similar.
3. (430,750) rx 55 ry 15.
4. (1120,760) rx 60 ry 17.
5. small (700,640) rx 26 ry 8.
Pebbles: circles (300,640,5),(520,630,4),(80,740,6),(820,720,5),(1040,700,4) fill #b9b9c8.

Flag at x=230: pole line (230,605)-(230,425) stroke #cfd6e4 width 6 linecap round; base: small ellipse (230,607) rx 14 ry 5 fill #9898ab; flag path M 230 428 L 345 450 L 230 478 Z fill #ff4d5e stroke #d63a4c width 2; text MEOW at (243,462) font-size 19 rotate(10.5). Compute slope: dy=22 over dx=115 → angle ≈ 10.8°. Text along flag: place at (245,460) rotate(10.8 245 460). Fine.

Motion arc: path M 330 560 C 400 450 500 415 600 428 stroke #cfe0ff opacity .3 width 5 dasharray 1 14 linecap round fill none. Also second arc smaller. Maybe arrowhead? skip.

Shadow: ellipse cx 600 cy 592 rx 140 ry 16 fill #1a1a2e opacity .3 class shadow.

Rider outer group transform translate(600,400):
 inner g class rider:
  board g transform translate(0,120) rotate(-4):
    trucks: rect x -78 y 6 w 14 h 12 rx 3 fill #7f8798; rect x 64 y 6 w 14 h 12 rx 3.
    wheels groups: g class wheel transform translate(-71,26): circle r 16 fill #ffd23f stroke #c98f1b sw 3; spokes: path M 0 -12 L 0 12 M -12 0 L 12 0 M -8.5 -8.5 L 8.5 8.5 M -8.5 8.5 L 8.5 -8.5 stroke #c98f1b sw 3 linecap round; hub circle r 5 fill #fff8e1 stroke #c98f1b sw 2. Same at (71,26).
    deck: path M -132 -6 C -132 -20 -116 -26 -98 -26 L 98 -26 C 116 -26 132 -20 132 -6 C 132 8 116 14 98 14 L -98 14 C -116 14 -132 8 -132 -6 Z fill url(#deckGrad) stroke #4a2a7a sw 3.5. Top grip line: path M -120 -20 L 120 -20 stroke rgba(255,255,255,.25) sw 5 linecap round. Deck stripe: path M -132 -6 ... maybe two bolt circles at trucks: circles (-71,-18) r 3, (71,-18) r 3 fill #4a2a7a.
    underside glow? skip.
  cat g:
    tail: path M 50 -92 C 92 -84 116 -58 112 -26 stroke #f6a83c sw 17 fill none linecap round; tip: circle (112,-26) r 9 fill #d9822b. Tail stripe? skip.
    back arm: path M -42 -148 C -74 -158 -94 -172 -104 -192 stroke #eef1f8 sw 20 linecap round fill none; glove circle (-106,-195) r 13 fill #ffffff stroke #9aa3b8 sw 3.
    back leg: path M -18 -76 C -34 -60 -40 -46 -38 -34 stroke #eef1f8 sw 22 linecap round; boot ellipse (-38,-30) rx 17 ry 9 fill #d7dce8 stroke #9aa3b8 sw 3.
    front leg: path M 22 -76 C 32 -60 36 -46 36 -34 stroke #eef1f8 sw 22 linecap round; boot ellipse (36,-30) rx 17 ry 9 fill #d7dce8 stroke #9aa3b8 sw 3.
    torso: rect x -52 y -170 w 104 h 100 rx 32 fill url(#suitGrad) stroke #9aa3b8 sw 3.5.
    torso shading: path? skip.
    belt: rect x -52 y -82 w 104 h 14 rx 7 fill #c6cfe0 stroke #9aa3b8 sw 2.
    chest panel: rect x -30 y -152 w 60 h 46 rx 10 fill #232f5c stroke #9aa3b8 sw 3; buttons: circle (-15,-138) r 5 fill #ff5d5d; (0,-138) r 5 fill #ffd23f; (15,-138) r 5 fill #4ade80; lines: path M -22 -122 L 22 -122 stroke #5b6b9e sw 3 linecap round; small screen: rect (-22,-148,?) maybe skip; add tiny rect (-22,-146) w 12 h 8 rx 2 fill #7fd4ff opacity .8.
    front arm: path M 42 -148 C 72 -140 90 -124 100 -104 stroke #f4f6fb sw 20 linecap round; glove circle (103,-101) r 13 fill #fff stroke #9aa3b8 sw 3.
    scarf tail: path class scarf d M -18 -184 C -48 -176 -76 -188 -102 -172 stroke #ff4d5e sw 13 linecap round fill none; knot circle ( -14,-184) r 9 fill #ff4d5e stroke #d63a4c sw 2. Scarf band: ellipse? rect x -22 y -192 w 44 h 14 rx 7 fill #ff4d5e stroke #d63a4c sw 2 — around neck.
    neck ring: rect x -24 y -176 w 48 h 12 rx 6 fill #c6cfe0 stroke #9aa3b8 sw 2.5.
    head group:
      ears: path M -36 -266 L -48 -304 L -14 -284 Z fill #f6a83c stroke #c97a1e sw 3 linejoin round; inner: path M -34 -272 L -41 -294 L -20 -281 Z fill #f8b8c8. Right: M 36 -266 L 48 -304 L 14 -284 Z; inner M 34 -272 L 41 -294 L 20 -281 Z.
      head circle (0,-238) r 45 fill #f6a83c stroke #c97a1e sw 3.5.
      stripes: paths on forehead: M -14 -276 q 3 8 0 14? Actually vertical stripes: M -16 -278 L -16 -266 stroke #d9822b sw 5 linecap round; M 0 -282 L 0 -268; M 16 -278 L 16 -266. Also cheek stripes: M -40 -244 l 10 3? skip, keep forehead.
      eyes: ellipse (-16,-242) rx 5.5 ry 7 fill #26221f; highlight circle (-14.5,-245) r 1.8 fill #fff. Right (16,-242) same.
      nose: path M -6 -230 L 6 -230 L 0 -222 Z fill #e26d8f.
      mouth: path M 0 -222 q -5 7 -11 4 M 0 -222 q 5 7 11 4 stroke #8a4b12 sw 2.5 fill none linecap round.
      whiskers: stroke #ffffff opacity .85 sw 2 linecap round: M -34 -234 L -58 -238; M -34 -228 L -58 -226; M 34 -234 L 58 -238; M 34 -228 L 58 -226.
      helmet glass: circle (0,-238) r 64 fill rgba(185,225,255,0.16) stroke #e6f2ff sw 6.5; inner rim: circle r 64 stroke rgba(255,255,255,.35)? skip. Highlight arc: path M -40 -276 A 52 52 0 0 1 -6 -301 stroke #fff sw 7 linecap round opacity .65 fill none. Top light: circle (0,-306) r 5.5 fill #ffd23f stroke #c98f1b sw 2 — on helmet top (helmet top at y=-302); place at (0,-304).
      helmet side bolt: circles (-62,-238) r 4 and (62,-238) r 4 fill #c6cfe0 stroke #9aa3b8 sw 2.
  Dust puffs: circles near board rear: ( -150, 90) etc. In rider local coords: circles class puff at (-160,100) r 6, (-185,110) r 4, (-140,115) r 3 fill #cfcfe0 opacity .5. Animation: rise & fade. transform-box fill-box.

Order within rider: board first then cat? Cat feet overlap deck top; draw board then cat (cat on top). But tail behind torso — draw tail first within cat. Arms: back arm behind torso (draw before torso), front arm after torso. Legs before torso? Legs attach under torso; draw legs before torso so torso overlaps hips. Boots after legs. Order: board, tail, back arm+glove, legs+boots, torso, belt, chest panel, front arm+glove, scarf band+knot+scarf tail, neck ring, head(ears, face), helmet.

Wait scarf tail flows behind; draw before torso? It flows from neck backward — draw after torso but behind head; fine anywhere before helmet.

Feet should be on deck top y=-26 (board local y=-26, but board group is at translate(0,120) within rider; cat drawn in rider coords with boots at y=-30 → scene 400-30=370; board deck top scene = 400+120-26=494. Mismatch! I mixed coordinate systems. Fix: draw cat in board-local coords? Simpler: put board at rider-local y=120 and draw cat feet at rider-local y = 120-26 = 94? That means cat body extends from y≈94 up to y≈94-300 = -206. Let me instead define cat relative to feet: feet at rider y=94 (on deck top 94). Then hips at 94-58=36? Hmm let me recompute: previously I designed cat with boots at y=-30 and head center -238, i.e., total height ~ 300 from boots(-30) to helmet top(-302). If boots should sit at rider-local y = 94 (deck top), shift cat design down by 124: boots at 94, torso y from -46 to 54? Let me just wrap cat in g transform translate(0,124) keeping my original local coords (boots -30 → 94). So structure: rider g > [board g translate(0,120), cat g translate(0,124)]. Boots at 124-30=94 = board top (120-26=94). 

Deck bottom at 120+14=134, wheels bottom at 120+26+16=162. Shadow at scene y = 400+162 ≈ 562... but I placed shadow at 592 in scene. Move shadow to cy 585? With bob animation rider goes up 12px; shadow at 400+162=562 when rider at 0. Put shadow ellipse cy 566 rx 140 ry 15. Ground top around 585 at x=600 (path: at 600 y=585). Wheels bottom 562 → floats 23px above ground — good for jump feel, shadow below at 566? Shadow should be on ground ~588. Put shadow cy 590. During bob, rider rises, shadow shrinks — reads as hovering. OK: shadow (600,590).

Motion arc from (330,560) to near cat: M 320 555 C 390 445 500 410 595 425 — ends behind cat. good.

Puffs in rider coords near (-150..-190, 100..120) — scene (410..450, 500..520), near board rear-left. ok.

Caption text bottom-left: x 48 y 762: "ASTRO CAT · LUNAR SKATE SESSION" font-family monospace size 16 letter-spacing 4 fill #aab4d4 opacity .8. Also top-left small "☄ MOON PARK 7" ? skip, keep one caption. Maybe top-right "GRAVITY: 1/6" fun label near Earth? Add text at (80,60): "LUNAR SKATE PARK" big? Could add playful headline top-left: font 28 bold fill #e8eeff letter-spacing 6: "ASTRO CAT" and below smaller "on the moon 🛹" — no emoji maybe. Keep: text (70,70) "ASTRO CAT" font-size 30 font-weight 800 fill #f2f6ff letter-spacing 8; text (72,98) font-size 14 fill #9fb0d8 letter-spacing 4 "SKATEBOARDING ON THE MOON". Nice.

Fonts: use generic sans-serif / monospace — allowed (no external fonts).

Gradients defs:
- spaceGrad linear x1=0 y1=0 x2=0 y2=1: #060a1c, #101736 55%, #1a2150.
- moonGrad linear vertical: #d9d9e3 → #b9b9c9 → #9d9dae.
- earthGrad radial cx .35 cy .3: #7cc4ff, #3f8ef7 60%, #1e56c8.
- glow radial: rgba(110,170,255,.35) → transparent.
- suitGrad linear vertical: #ffffff → #dde3f0.
- deckGrad linear vertical: #8a63ff → #ff5d8f? deck top to bottom: top #b388ff? Let's do #9b6bff top, #ff5d8f bottom? Might look candy; fine: stops #a78bfa, #f472b6. Stroke darker #6d28d9.
- cometGrad linear: white → transparent.

Check no external requests. All inline. No JS needed; pure SVG+CSS. The task says SVG; deliver html with inline svg (allowed: ```html). Could also output ```svg directly, but self-contained web demo → html with svg is fine and renders in iframe. The instruction: "Reply with exactly ONE fenced code block containing the complete file: ```html (or ```svg when the task asks for an SVG)". Task asks for SVG — I could use ```svg with a standalone svg file. But "self-contained web demo... rendered in iframe" suggests html. Either acceptable; I'll use html wrapping the svg, since CSS animations inside svg need style — can include <style> inside svg too. A standalone .svg with embedded <style> works in browsers when opened directly, and in iframe too. But HTML wrapper is safer for viewport scaling. I'll do html with svg width 100% height 100vh.

Set svg preserveAspectRatio="xMidYMid slice"? For 1280x800 the viewBox 1200x800 ratio 1.5; 1280/800=1.6 → with meet there'd be letterbox. Use width:100vw;height:100vh and preserveAspectRatio="xMidYMid slice" to fill, cropping sides on narrow. At 375 wide, slice would crop heavily vertically? slice scales to cover: scale = max(375/1200, 800/800)=1 → width 1200 > 375 crops sides, shows center 375px wide — cat at center visible. That's okay-ish but headline cropped. Alternative: meet with dark body background — letterboxing blends since bg is dark space. Body background #060a1c matching space top; with meet, at 375x800? The iframe height unknown; likely 800 or viewport. Use width 100%, height 100%, meet, body bg gradient same as space so letterbox invisible. Simpler: html,body height 100%, margin 0, background #070b1d; svg width 100% height 100% display block preserveAspectRatio xMidYMid meet. At 1280x800, viewBox 1200x800 scales to 1200x800 centered with 40px side bars of same dark color — barely noticeable. Could set viewBox 0 0 1280 800 to match exactly! Then at 1280x800 perfect fill; at 375 width meet scales down keeping all visible (height becomes 234px, centered vertically with dark bg). That's graceful. Let me use viewBox 0 0 1280 800 and adjust coords: shift everything +40 in x from my 1200 design? Easier: keep drawing in 1200-wide coordinates but set viewBox="0 0 1200 800" and accept tiny side bars at 1280 — or set viewBox "-40 0 1280 800". Yes! viewBox="-40 0 1280 800" makes it exactly 1280 wide. At 375px viewport, meet scales whole thing: 375/1280 → height 234; page shows it centered. Good, no horizontal scroll.

Actually simpler: viewBox="0 0 1280 800" and just place elements with +40 offset mentally... using -40 is fine and valid.

Body: display flex center; background #070b1d. svg max dimensions 100%.

Let me also add a subtle vignette? skip.

Twinkle delays: style="animation-delay:-1.2s" etc.

Wheel spin: transform-box: fill-box; transform-origin: center; animation spin 0.9s linear infinite. But wheel group also has transform attribute translate(-71,26) — CSS animation transform would override attribute transform, breaking position! In SVG2/Chrome, CSS transform overrides the transform attribute. So nest: outer g transform="translate(-71 26)", inner g class="wheel" containing spokes only (circle static, spokes rotate). Spokes rotating around their own center: transform-box fill-box origin center works on inner g. Good.

Similarly scarf: path with class scarf — CSS transform rotate would override nothing (no attribute transform on it), but transform-origin: use transform-box: fill-box; transform-origin: right center? The scarf path from (-18,-184) to (-102,-172): origin at knot end (right side). transform-box fill-box origin "100% 50%". rotate keyframes ±8deg. Since no attribute transform, safe.

Rider bob: .rider has no attribute transform (outer g has translate(600,400)); CSS animation transform on .rider overrides nothing. rotate around local origin (0,0) which is scene (600,400) — fine.

Shadow pulse: .shadow no attribute transform; ellipse has cx/cy; animation transform scale with transform-box fill-box origin center. Safe.

Puffs: animate transform translate up + opacity, each with delay; they're circles with cx cy attributes, no transform attribute — safe.

Comet: g class comet with attribute transform translate(1150,60)? CSS animation overrides it → comet would lose position. Nest: outer g transform translate, inner g class comet animates translate. Good.

Stars twinkle: animate opacity only — safe.

Write keyframes:
```
@keyframes tw{0%,100%{opacity:.2}50%{opacity:1}}
@keyframes ride{0%,100%{transform:translateY(0) rotate(-2.5deg)}50%{transform:translateY(-14px) rotate(2deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes wave{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-9deg)}}
@keyframes sh{0%,100%{transform:scale(1);opacity:.32}50%{transform:scale(.82);opacity:.18}}
@keyframes puff{0%{transform:translate(0,0);opacity:0}25%{opacity:.55}100%{transform:translate(-26px,-34px);opacity:0}}
@keyframes shoot{0%{transform:translate(0,0);opacity:0}4%{opacity:1}14%{transform:translate(-560px,280px);opacity:0}100%{transform:translate(-560px,280px);opacity:0}}
```

Puff circles: place 3 with animation delays 0/.4/.8s, duration 1.6s infinite.

Now assemble full SVG. Also add a few distant tiny stars as rects? circles fine.

Earth details finalize: group transform="translate(1035,140)".
- circle r=98 fill url(#glow)
- circle r=72 fill url(#earthGrad)
- land paths fill #46c172:
  path d="M -34 -38 C -18 -56 14 -58 26 -42 C 44 -38 40 -16 22 -14 C 14 2 -18 0 -26 -18 C -32 -28 -32 -32 -34 -38 Z" opacity .9
  path d="M 18 22 C 34 12 52 24 44 40 C 30 50 12 38 18 22 Z"
  path d="M -52 18 C -42 12 -30 20 -36 30 C -46 36 -56 26 -52 18 Z"
- clouds fill #fff opacity .7: ellipse (-18,8) rx 28 ry 8 transform rotate(-12 -18 8); ellipse (22,-28) rx 22 ry 7 rotate(14 22 -28); ellipse (6,42) rx 26 ry 7 rotate(-6 6 42); small ellipse (-44,-12) rx 14 ry 5.
- ring: circle r 72 fill none stroke rgba(150,200,255,.55) sw 3; circle r 80 fill none stroke rgba(150,200,255,.18) sw 10.

Moon ground & craters as above but shifted? viewBox -40 → x range -40..1240; my scene coords 0..1200 fine.

Ground path: M -40 612 C 180 578 380 602 600 586 C 820 570 1020 596 1240 576 L 1240 800 L -40 800 Z.

Craters:
- g: ellipse (170,692) rx 80 ry 22 fill #a6a6b8; ellipse (170,697) rx 62 ry 15 fill #8f8fa2; path M 92 690 A 80 22 0 0 1 248 688 stroke #e4e4ee sw 4 fill none opacity .7 linecap round.
- (935,672) rx 98 ry 27; inner (935,678) rx 76 ry 19; rim arc M 839 669 A 98 27 0 0 1 1031 667.
- (430,752) rx 56 ry 15; inner (430,756) rx 42 ry 10.
- (1125,758) rx 62 ry 17; inner rx 46 ry 11 at y 762.
- (700,646) rx 28 ry 8; inner (700,649) rx 20 ry 5.
Pebbles fill #b7b7c6: (300,648,5),(520,636,4),(90,742,6),(820,726,5),(1045,706,4),(610,700,3).

Flag at 230 as planned. Ground at x=230: y ≈ interpolate ~ 600. Pole from (230,602) to (230,428).

Caption texts top-left at (64,72) and (66,100). Bottom caption maybe skip to avoid clutter — keep bottom-left small: (64,764) "LUNAR SKATE PARK · GRAVITY 1/6" size 13 letter-spacing 3 fill #8f9cc4 opacity .85.

Hmm headline + caption both left; fine.

Rider group: <g transform="translate(600,400)"><g class="rider"> board + cat </g></g>.

Board g transform="translate(0,120) rotate(-4)". Cat g transform="translate(0,124)".

Deck coordinates as defined. Wheels outer translate.

Let me also add board motion streaks: three lines behind board: path M -170 20 h -40 etc stroke #cfe0ff opacity .5 linecap round sw 4, in board local coords: lines at y 0, 14, -12 from x -140 to -180. class? static fine, maybe animate opacity. Keep static.

Cat head at local (0,-238) in cat coords → rider y = 124-238 = -114 → scene y=286. Helmet top -302 → scene 122. Fine within view.

Front glove at (103,-101) cat → scene (703, 423). ok.

Now double-check board/cat alignment: deck top y local -26 → rider y 94; boots ellipses cy -30 ry 9 → bottom at -21 → rider 103, slightly below deck top 94? Boot bottom 103 > 94 means boot overlaps deck by 9px — looks like standing on it (feet on deck surface). Good since deck spans -26..14 → rider 94..134; boot bottom 103 sits within deck thickness, visually on top. Fine.

Arms shoulder at (±42,-148) cat → inside torso (torso y -170..-70, x -52..52). Good.

Neck ring y -176..-164; torso top -170 — ring overlaps top. Head bottom: -238+45=-193; helmet bottom -238+64=-174. Ring at -176 sits right under helmet. Good.

Scarf band rect y -192..-178 around neck under helmet bottom -174. ok.

Chest panel y -152..-106 within torso. Belt y -82..-68; torso bottom -70. ok.

Legs from (±20,-76) hips to boots (±37,-30). stroke width 22 — chunky suit legs. Good.

Tail from (50,-92): torso right edge x=52 — tail starts at edge. Good.

Now stars: I'll write ~30 circle elements with class star and inline animation-delay styles. To reduce verbosity, some without class (static). Mix.

Sparkle paths: <path class="star" d="M0 -9 L2.2 -2.2 L9 0 L2.2 2.2 L0 9 L-2.2 2.2 L-9 0 L-2.2 -2.2 Z" transform="translate(505,165)" fill="#fff"/> etc at (1085,250) scale .7, (760,180) scale .55. transform attribute + CSS opacity animation only — safe (opacity not transform).

Comet: outer g transform="translate(1180,70)" inner g class="comet": line x1=0 y1=0 x2=64 y2=-32 stroke url(#cometGrad) sw 4 linecap round; circle r 4.5 fill #fff. cometGrad linear x1=0 y1=0 x2=1 y2=0? Gradient along line direction: use gradientUnits userSpaceOnUse x1=0 y1=0 x2=64 y2=-32: stops white → transparent. But line drawn from (0,0) to (64,-32); head at (0,0) bright, tail fades. Animation moves inner g by translate(-560,280): head travels to (620,350)... passes through scene diagonally down-left. ok.

Wait direction: head at (0,0) moving toward (-560,280) i.e., down-left; tail behind at (+64,-32) up-right. Correct.

Earth partially behind? At (1035,140) with r 98 glow → up to y 238, x up to 1133 < 1240. Good.

Headline might overlap comet path — fine.

Check text font: font-family="ui-monospace, Menlo, Consolas, monospace" for caption; headline font-family="Arial, Helvetica, sans-serif" weight 800.

Everything inline, no scripts needed. Console errors: none.

One more check: CSS `transform-box: fill-box` supported in Chrome — yes.

For .rider animation with rotate: transform-origin default for SVG elements is 0 0 of... with CSS transforms on SVG, default transform-origin is 0 0 of the element's reference box (view-box origin?) Actually for SVG without transform-box, transform-origin default is 0 0 of the user space? Per spec, default transform-box is view-box for SVG elements, and transform-origin default 50% 50%? Hmm: CSS Transforms spec: for SVG elements, initial transform-origin is 0 0 (not 50% 50%) unless transform-box changed? Let me recall: The initial value of transform-origin is 50% 50%, but for SVG elements without associated CSS layout box, the reference box is the view-box (transform-box: view-box initial), so 50% 50% would be center of viewBox! That would make rotate pivot at viewBox center — bad for .rider.

Actually spec: "transform-box initial: view-box" for SVG? The initial value of transform-box is view-box? No — initial is `view-box`? Let me recall precisely: transform-box initial value is `view-box`? MDN: transform-box initial value is `view-box`. Hmm, MDN says initial value: view-box. And transform-origin initial 50% 50% (for CSS box) but for SVG the used origin... There was a change: originally SVG transform-origin default 0 0. CSS Transforms Module: "For SVG elements without associated CSS layout box the initial used value for transform-origin is 0 0" — yes, that's the rule: transform-origin initial 50% 50% applies to elements with CSS layout box; for SVG elements the initial used value is 0 0. Chrome implements: SVG elements default transform-origin 0 0 (the user space origin). So .rider rotates around local (0,0) → scene (600,400). That's what I want. But to be safe, explicitly set `transform-origin: 0 0` on .rider? With transform-box view-box, origin 0 0 = viewBox origin (top-left of viewBox, i.e., (-40,0))... ugh. If transform-box is view-box, percentages/keywords resolve against viewBox; but `0 0` absolute is just point (0,0) in local user space — for .rider, local user space is the coordinate system established by ancestor transforms (translate(600,400)), so (0,0) is scene (600,400). Good — set transform-origin: 0px 0px explicitly? That's the local origin. I'll set `transform-origin:0 0;` explicitly on .rider to be deterministic. For .shadow and .puff and .wheel and .scarf I use transform-box: fill-box which makes origin relative to element bbox — robust. For .comet inner g: translate animation, origin irrelevant.

For .rider, alternatively use transform-box: fill-box with origin "50% 80%" to pivot near board. fill-box of rider group = bbox of all children ≈ x -190..132, y -306..162 → pivot at center-x, 80% height (near board). That's nicer: rotate around board. Set .rider{transform-box:fill-box; transform-origin:50% 85%; animation:ride...}. Good, deterministic.

Shadow: fill-box scale origin center — set transform-origin:center with fill-box.

Puffs: fill-box, origin center, translate animation — translation independent of origin. fine.

Scarf: fill-box, transform-origin: 100% 50% (right end = knot). The scarf path bbox: x -102..-18, y ~-188..-172. Right end is knot at (-18,-184). rotate around right center. good.

Wheel spokes inner g: fill-box origin center. The inner g contains spokes path spanning -12..12 → center (0,0). good. Note: circle hub outside the rotating group? Put spokes only in rotating g; circle + hub static siblings. 

Let me now also consider: CSS in <style> inside svg vs in html head — put in html <style> targeting svg classes; works.

Font sizes for flag text: 19px within scene scales fine.

Write final HTML. Also <title> for accessibility. Add role="img" aria-label.

Let me write out all star circles concisely. I'll produce them.

Stars (x,y,r): 
60 80 2; 140 200 1.5; 225 62 2.2; 320 140 1.4; 420 92 2; 520 52 1.5; 645 112 2.4; 760 62 1.6; 862 152 2; 1120 92 1.8; 1168 222 1.4; 982 58 1.6; 58 322 1.6; 178 382 1.2; 1128 342 2; 1052 302 1.3; 38 522 1.5; 302 262 1.2; 482 222 1.6; 702 242 1.3; 902 302 1.5; 1150 462 1.6; 382 322 1.2; 582 302 1.4; 242 302 1.8; 142 122 1.2; 1210 120 1.6; 900 60 1.4; 690 40 1.3; 30 160 1.4; 350 60 1.2; 560 160 1.3; 80 440 1.3; 1180 520 1.5.
Give every ~3rd class star with delay.

Fill #fff; base opacity attr .7 etc.

OK write it.

Also add tiny moon-bounce dashed second arc: skip, one arc enough. Maybe add small "speed lines" behind rider at scene level: three short lines left of board: at (400..460, 480..520) stroke #cfe0ff opacity .4 sw 5 linecap round: M 452 486 h -46; M 462 506 h -60; M 448 526 h -38. These are static in scene coords; rider bobs so lines static ok.

Actually board rear at rider local x≈-132-? board group translate(0,120) rotate(-4): rear-left deck around x -132 → scene 468, y ~ 400+120=520ish. Lines near (400-460, 500-530) good.

Final check on helmet stroke color #e6f2ff width 6.5, glass fill rgba(190,225,255,.18). Ears inside helmet visible through glass — since helmet drawn after ears/head, translucent fill lets them show. Helmet stroke solid ring on top — ears at -304 may cross the ring; ear tips at y -304 vs helmet top -302: tips poke slightly outside glass ring — looks like ears touching helmet, cute. Fine.

Add little star reflection in helmet: small white 4-point at (28,-262)? Add path scaled .4 fill #fff opacity .8. Nice.

Compose now. Also ensure no horizontal scrollbar: body overflow hidden? Set html,body{margin:0;height:100%;background:#060a1c;overflow:hidden} and svg display block width 100% height 100%. With meet, no scroll anyway. Set overflow hidden to be safe.

Write the code.

Deck gradient: id deckGrad x1 0 y1 0 x2 0 y2 1 stops #b18cff, #ff5d8f. Stroke #5b2a86.

Suit gradient: #ffffff → #d9e0ee.

Space gradient stops: #05081a, #0e1531 50%, #1b2352.

Moon gradient: #dcdce6, #bcbccb 60%, #9d9dae.

Earth radial: cx .38 cy .32 r .9: #8fd0ff, #4a90f0 55%, #1d4fc0.

Glow radial: stop0 rgba(120,175,255,.4), stop1 rgba(120,175,255,0).

cometGrad userSpaceOnUse x1 0 y1 0 x2 64 y2 -32: #fff → rgba(255,255,255,0).

Now the full file. Also include <meta viewport>. Title "Astronaut Cat Skateboarding on the Moon".

Counting size — fine.

One more: "Something meaningful visible on first paint" — yes, full scene static + animations.

Let me write it all out carefully with matching tags.

Puffs inside rider (so they bob with rider) — place at board rear: circles ( -150, 96) r 6; (-178, 108) r 4.5; (-136, 112) r 3.5 fill #d5d5e2. class puff, delays 0s/.5s/1s, animation puff 1.6s ease-out infinite.

Shadow: ellipse cx 600 cy 590 rx 135 ry 15 fill #10142a class shadow.

Motion arc: path d="M 318 556 C 392 448 498 412 596 424" stroke #cfe0ff sw 5 dasharray "0.1 15" linecap round fill none opacity .35. dasharray "0.1 15" with round caps gives dots. Good.

Also small arc near start: skip.

Flag text rotate: transform="rotate(11 246 462)" x 246 y 462 font-size 18 letter-spacing 1.

Headline: text x 64 y 74 font-size 30 font-weight 800 letter-spacing 8 fill #f2f6ff font-family "Arial, Helvetica, sans-serif": "ASTRO CAT". Sub: x 67 y 102 font-size 13 letter-spacing 4 fill #9fb0d8 font-family monospace: "SKATEBOARDING ON THE MOON".

Bottom: x 64 y 762 font-size 12 letter-spacing 3 fill #8f9cc4 opacity .9 monospace: "LUNAR SKATE PARK — GRAVITY 1/6". Avoid em dash? fine.

Now produce final answer: single ```html 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 Skateboarding on the Moon</title>
<style>
  html, body { margin:0; padding:0; height:100%; background:#05081a; overflow:hidden; }
  svg { display:block; width:100%; height:100%; }
  .star { animation: tw 3.2s ease-in-out infinite; }
  @keyframes tw { 0%,100% { opacity:.2; } 50% { opacity:1; } }
  .rider { transform-box: fill-box; transform-origin:50% 85%; animation: ride 2.8s ease-in-out infinite; }
  @keyframes ride { 0%,100% { transform: translateY(0) rotate(-2.5deg); } 50% { transform: translateY(-14px) rotate(2deg); } }
  .wheel { transform-box: fill-box; transform-origin: center; animation: spin .9s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .scarf { transform-box: fill-box; transform-origin: 100% 50%; animation: wave 1.6s ease-in-out infinite; }
  @keyframes wave { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(-9deg); } }
  .shadow { transform-box: fill-box; transform-origin: center; animation: sh 2.8s ease-in-out infinite; }
  @keyframes sh { 0%,100% { transform: scale(1); opacity:.32; } 50% { transform: scale(.82); opacity:.16; } }
  .puff { transform-box: fill-box; transform-origin: center; animation: puff 1.6s ease-out infinite; }
  @keyframes puff { 0% { transform: translate(0,0); opacity:0; } 25% { opacity:.55; } 100% { transform: translate(-26px,-34px); opacity:0; } }
  .comet { animation: shoot 7s linear infinite; }
  @keyframes shoot { 0% { transform: translate(0,0); opacity:0; } 4% { opacity:1; } 14% { transform: translate(-560px,280px); opacity:0; } 100% { transform: translate(-560px,280px); opacity:0; } }
</style>
</head>
<body>
<svg viewBox="-40 0 1280 800" preserveAspectRatio="xMidYMid meet" role="img" aria-label="An astronaut cat skateboarding on the moon">
  <defs>
    <linearGradient id="spaceGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#05081a"/>
      <stop offset=".5" stop-color="#0e1531"/>
      <stop offset="1" stop-color="#1b2352"/>
    </linearGradient>
    <linearGradient id="moonGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#dcdce6"/>
      <stop offset=".6" stop-color="#bcbccb"/>
      <stop offset="1" stop-color="#9d9dae"/>
    </linearGradient>
    <radialGradient id="earthGrad" cx=".38" cy=".32" r=".95">
      <stop offset="0" stop-color="#8fd0ff"/>
      <stop offset=".55" stop-color="#4a90f0"/>
      <stop offset="1" stop-color="#1d4fc0"/>
    </radialGradient>
    <radialGradient id="glow">
      <stop offset="0" stop-color="#78afff" stop-opacity=".4"/>
      <stop offset="1" stop-color="#78afff" stop-opacity="0"/>
    </radialGradient>
    <linearGradient id="suitGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#ffffff"/>
      <stop offset="1" stop-color="#d9e0ee"/>
    </linearGradient>
    <linearGradient id="deckGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#b18cff"/>
      <stop offset="1" stop-color="#ff5d8f"/>
    </linearGradient>
    <linearGradient id="cometGrad" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="64" y2="-32">
      <stop offset="0" stop-color="#ffffff"/>
      <stop offset="1" stop-color="#ffffff" stop-opacity="0"/>
    </linearGradient>
  </defs>

  <!-- space -->
  <rect x="-40" y="0" width="1280" height="800" fill="url(#spaceGrad)"/>

  <!-- stars -->
  <g fill="#ffffff">
    <circle cx="60" cy="80" r="2" opacity=".8"/>
    <circle class="star" cx="140" cy="200" r="1.5" opacity=".7" style="animation-delay:-1s"/>
    <circle cx="225" cy="62" r="2.2" opacity=".9"/>
    <circle class="star" cx="320" cy="140" r="1.4" opacity=".6" style="animation-delay:-2.2s"/>
    <circle cx="420" cy="92" r="2" opacity=".8"/>
    <circle class="star" cx="520" cy="52" r="1.5" opacity=".7" style="animation-delay:-.6s"/>
    <circle cx="645" cy="112" r="2.4" opacity=".9"/>
    <circle class="star" cx="760" cy="62" r="1.6" opacity=".6" style="animation-delay:-1.7s"/>
    <circle cx="862" cy="152" r="2" opacity=".8"/>
    <circle class="star" cx="1120" cy="92" r="1.8" opacity=".7" style="animation-delay:-2.6s"/>
    <circle cx="1168" cy="222" r="1.4" opacity=".6"/>
    <circle class="star" cx="982" cy="58" r="1.6" opacity=".7" style="animation-delay:-.3s"/>
    <circle cx="58" cy="322" r="1.6" opacity=".7"/>
    <circle class="star" cx="178" cy="382" r="1.2" opacity=".5" style="animation-delay:-1.4s"/>
    <circle cx="1128" cy="342" r="2" opacity=".8"/>
    <circle cx="1052" cy="302" r="1.3" opacity=".6"/>
    <circle class="star" cx="38" cy="522" r="1.5" opacity=".6" style="animation-delay:-2s"/>
    <circle cx="302" cy="262" r="1.2" opacity=".5"/>
    <circle class="star" cx="482" cy="222" r="1.6" opacity=".7" style="animation-delay:-.9s"/>
    <circle cx="702" cy="242" r="1.3" opacity=".5"/>
    <circle class="star" cx="902" cy="302" r="1.5" opacity=".6" style="animation-delay:-2.9s"/>
    <circle cx="1150" cy="462" r="1.6" opacity=".7"/>
    <circle cx="382" cy="322" r="1.2" opacity=".5"/>
    <circle class="star" cx="582" cy="302" r="1.4" opacity=".6" style="animation-delay:-1.1s"/>
    <circle cx="242" cy="302" r="1.8" opacity=".7"/>
    <circle cx="142" cy="122" r="1.2" opacity=".5"/>
    <circle cx="1210" cy="120" r="1.6" opacity=".7"/>
    <circle class="star" cx="900" cy="60" r="1.4" opacity=".6" style="animation-delay:-.2s"/>
    <circle cx="690" cy="40" r="1.3" opacity=".5"/>
    <circle cx="30" cy="160" r="1.4" opacity=".6"/>
    <circle class="star" cx="350" cy="60" r="1.2" opacity=".5" style="animation-delay:-2.4s"/>
    <circle cx="560" cy="160" r="1.3" opacity=".6"/>
    <circle cx="80" cy="440" r="1.3" opacity=".5"/>
    <circle class="star" cx="1180" cy="520" r="1.5" opacity=".6" style="animation-delay:-1.9s"/>
    <path class="star" d="M0 -9 L2.2 -2.2 L9 0 L2.2 2.2 L0 9 L-2.2 2.2 L-9 0 L-2.2 -2.2 Z" transform="translate(505,165)" style="animation-delay:-.7s"/>
    <path class="star" d="M0 -9 L2.2 -2.2 L9 0 L2.2 2.2 L0 9 L-2.2 2.2 L-9 0 L-2.2 -2.2 Z" transform="translate(1085,250) scale(.7)" style="animation-delay:-2.1s"/>
    <path class="star" d="M0 -9 L2.2 -2.2 L9 0 L2.2 2.2 L0 9 L-2.2 2.2 L-9 0 L-2.2 -2.2 Z" transform="translate(760,180) scale(.55)" style="animation-delay:-1.3s"/>
  </g>

  <!-- shooting star -->
  <g transform="translate(1180,70)">
    <g class="comet">
      <line x1="0" y1="0" x2="64" y2="-32" stroke="url(#cometGrad)" stroke-width="4" stroke-linecap="round"/>
      <circle r="4.5" fill="#ffffff"/>
    </g>
  </g>

  <!-- Earth -->
  <g transform="translate(1035,140)">
    <circle r="98" fill="url(#glow)"/>
    <circle r="72" fill="url(#earthGrad)"/>
    <path d="M -34 -38 C -18 -56 14 -58 26 -42 C 44 -38 40 -16 22 -14 C 14 2 -18 0 -26 -18 C -32 -28 -32 -32 -34 -38 Z" fill="#46c172" opacity=".9"/>
    <path d="M 18 22 C 34 12 52 24 44 40 C 30 50 12 38 18 22 Z" fill="#46c172" opacity=".9"/>
    <path d="M -52 18 C -42 12 -30 20 -36 30 C -46 36 -56 26 -52 18 Z" fill="#46c172" opacity=".85"/>
    <ellipse cx="-18" cy="8" rx="28" ry="8" fill="#ffffff" opacity=".7" transform="rotate(-12 -18 8)"/>
    <ellipse cx="22" cy="-28" rx="22" ry="7" fill="#ffffff" opacity=".7" transform="rotate(14 22 -28)"/>
    <ellipse cx="6" cy="42" rx="26" ry="7" fill="#ffffff" opacity=".65" transform="rotate(-6 6 42)"/>
    <ellipse cx="-44" cy="-12" rx="14" ry="5" fill="#ffffff" opacity=".6"/>
    <circle r="72" fill="none" stroke="#96c8ff" stroke-opacity=".55" stroke-width="3"/>
    <circle r="80" fill="none" stroke="#96c8ff" stroke-opacity=".18" stroke-width="10"/>
  </g>

  <!-- headline -->
  <text x="64" y="74" font-family="Arial, Helvetica, sans-serif" font-size="30" font-weight="800" letter-spacing="8" fill="#f2f6ff">ASTRO CAT</text>
  <text x="67" y="102" font-family="ui-monospace, Menlo, Consolas, monospace" font-size="13" letter-spacing="4" fill="#9fb0d8">SKATEBOARDING ON THE MOON</text>

  <!-- moon surface -->
  <path d="M -40 612 C 180 578 380 602 600 586 C 820 570 1020 596 1240 576 L 1240 800 L -40 800 Z" fill="url(#moonGrad)"/>
  <g>
    <ellipse cx="170" cy="692" rx="80" ry="22" fill="#a6a6b8"/>
    <ellipse cx="170" cy="697" rx="62" ry="15" fill="#8f8fa2"/>
    <path d="M 92 690 A 80 22 0 0 1 248 688" stroke="#e4e4ee" stroke-width="4" fill="none" opacity=".7" stroke-linecap="round"/>
    <ellipse cx="935" cy="672" rx="98" ry="27" fill="#a6a6b8"/>
    <ellipse cx="935" cy="678" rx="76" ry="19" fill="#8f8fa2"/>
    <path d="M 839 669 A 98 27 0 0 1 1031 667" stroke="#e4e4ee" stroke-width="4" fill="none" opacity=".7" stroke-linecap="round"/>
    <ellipse cx="430" cy="752" rx="56" ry="15" fill="#a6a6b8"/>
    <ellipse cx="430" cy="756" rx="42" ry="10" fill="#8f8fa2"/>
    <ellipse cx="1125" cy="758" rx="62" ry="17" fill="#a6a6b8"/>
    <ellipse cx="1125" cy="762" rx="46" ry="11" fill="#8f8fa2"/>
    <ellipse cx="700" cy="646" rx="28" ry="8" fill="#a6a6b8"/>
    <ellipse cx="700" cy="649" rx="20" ry="5" fill="#8f8fa2"/>
    <circle cx="300" cy="648" r="5" fill="#b7b7c6"/>
    <circle cx="520" cy="636" r="4" fill="#b7b7c6"/>
    <circle cx="90" cy="742" r="6" fill="#b7b7c6"/>
    <circle cx="820" cy="726" r="5" fill="#b7b7c6"/>
    <circle cx="1045" cy="706" r="4" fill="#b7b7c6"/>
    <circle cx="610" cy="700" r="3" fill="#b7b7c6"/>
  </g>

  <!-- flag -->
  <g>
    <line x1="230" y1="602" x2="230" y2="428" stroke="#cfd6e4" stroke-width="6" stroke-linecap="round"/>
    <ellipse cx="230" cy="604" rx="14" ry="5" fill="#9898ab"/>
    <path d="M 230 428 L 345 450 L 230 478 Z" fill="#ff4d5e" stroke="#d63a4c" stroke-width="2"/>
    <text x="246" y="462" font-family="Arial, Helvetica, sans-serif" font-size="18" font-weight="bold" letter-spacing="1" fill="#ffffff" transform="rotate(11 246 462)">MEOW</text>
  </g>

  <!-- jump trajectory dots -->
  <path d="M 318 556 C 392 448 498 412 596 424" stroke="#cfe0ff" stroke-width="5" stroke-dasharray="0.1 15" stroke-linecap="round" fill="none" opacity=".35"/>

  <!-- shadow -->
  <ellipse class="shadow" cx="600" cy="590" rx="135" ry="15" fill="#10142a"/>

  <!-- speed lines -->
  <g stroke="#cfe0ff" stroke-width="5" stroke-linecap="round" opacity=".4">
    <line x1="452" y1="486" x2="406" y2="486"/>
    <line x1="462" y1="506" x2="402" y2="506"/>
    <line x1="448" y1="526" x2="410" y2="526"/>
  </g>

  <!-- rider: skateboard + astronaut cat -->
  <g transform="translate(600,400)">
    <g class="rider">
      <!-- skateboard -->
      <g transform="translate(0,120) rotate(-4)">
        <rect x="-78" y="6" width="14" height="12" rx="3" fill="#7f8798"/>
        <rect x="64" y="6" width="14" height="12" rx="3" fill="#7f8798"/>
        <g transform="translate(-71,26)">
          <circle r="16" fill="#ffd23f" stroke="#c98f1b" stroke-width="3"/>
          <g class="wheel">
            <path d="M0 -12 L0 12 M-12 0 L12 0 M-8.5 -8.5 L8.5 8.5 M-8.5 8.5 L8.5 -8.5" stroke="#c98f1b" stroke-width="3" stroke-linecap="round"/>
          </g>
          <circle r="5" fill="#fff8e1" stroke="#c98f1b" stroke-width="2"/>
        </g>
        <g transform="translate(71,26)">
          <circle r="16" fill="#ffd23f" stroke="#c98f1b" stroke-width="3"/>
          <g class="wheel">
            <path d="M0 -12 L0 12 M-12 0 L12 0 M-8.5 -8.5 L8.5 8.5 M-8.5 8.5 L8.5 -8.5" stroke="#c98f1b" stroke-width="3" stroke-linecap="round"/>
          </g>
          <circle r="5" fill="#fff8e1" stroke="#c98f1b" stroke-width="2"/>
        </g>
        <path d="M -132 -6 C -132 -20 -116 -26 -98 -26 L 98 -26 C 116 -26 132 -20 132 -6 C 132 8 116 14 98 14 L -98 14 C -116 14 -132 8 -132 -6 Z" fill="url(#deckGrad)" stroke="#5b2a86" stroke-width="3.5"/>
        <path d="M -120 -20 L 120 -20" stroke="#ffffff" stroke-opacity=".25" stroke-width="5" stroke-linecap="round"/>
        <circle cx="-71" cy="-18" r="3" fill="#5b2a86"/>
        <circle cx="71" cy="-18" r="3" fill="#5b2a86"/>
      </g>

      <!-- cat (shifted so boots rest on deck) -->
      <g transform="translate(0,124)">
        <!-- tail -->
        <path d="M 50 -92 C 92 -84 116 -58 112 -26" stroke="#f6a83c" stroke-width="17" fill="none" stroke-linecap="round"/>
        <circle cx="112" cy="-26" r="9" fill="#d9822b"/>
        <!-- back arm -->
        <path d="M -42 -148 C -74 -158 -94 -172 -104 -192" stroke="#eef1f8" stroke-width="20" fill="none" stroke-linecap="round"/>
        <circle cx="-106" cy="-195" r="13" fill="#ffffff" stroke="#9aa3b8" stroke-width="3"/>
        <!-- legs -->
        <path d="M -18 -76 C -34 -60 -40 -46 -38 -34" stroke="#eef1f8" stroke-width="22" fill="none" stroke-linecap="round"/>
        <ellipse cx="-38" cy="-30" rx="17" ry="9" fill="#d7dce8" stroke="#9aa3b8" stroke-width="3"/>
        <path d="M 22 -76 C 32 -60 36 -46 36 -34" stroke="#eef1f8" stroke-width="22" fill="none" stroke-linecap="round"/>
        <ellipse cx="36" cy="-30" rx="17" ry="9" fill="#d7dce8" stroke="#9aa3b8" stroke-width="3"/>
        <!-- torso -->
        <rect x="-52" y="-170" width="104" height="100" rx="32" fill="url(#suitGrad)" stroke="#9aa3b8" stroke-width="3.5"/>
        <rect x="-52" y="-82" width="104" height="14" rx="7" fill="#c6cfe0" stroke="#9aa3b8" stroke-width="2"/>
        <!-- chest panel -->
        <rect x="-30" y="-152" width="60" height="46" rx="10" fill="#232f5c" stroke="#9aa3b8" stroke-width="3"/>
        <rect x="-22" y="-148" width="12" height="8" rx="2" fill="#7fd4ff" opacity=".85"/>
        <circle cx="-15" cy="-136" r="5" fill="#ff5d5d"/>
        <circle cx="0" cy="-136" r="5" fill="#ffd23f"/>
        <circle cx="15" cy="-136" r="5" fill="#4ade80"/>
        <path d="M -22 -122 L 22 -122" stroke="#5b6b9e" stroke-width="3" stroke-linecap="round"/>
        <!-- front arm -->
        <path d="M 42 -148 C 72 -140 90 -124 100 -104" stroke="#f4f6fb" stroke-width="20" fill="none" stroke-linecap="round"/>
        <circle cx="103" cy="-101" r="13" fill="#ffffff" stroke="#9aa3b8" stroke-width="3"/>
        <!-- scarf -->
        <path class="scarf" d="M -18 -184 C -48 -176 -76 -188 -102 -172" stroke="#ff4d5e" stroke-width="13" fill="none" stroke-linecap="round"/>
        <rect x="-22" y="-192" width="44" height="14" rx="7" fill="#ff4d5e" stroke="#d63a4c" stroke-width="2"/>
        <circle cx="-14" cy="-184" r="9" fill="#ff4d5e" stroke="#d63a4c" stroke-width="2"/>
        <!-- neck ring -->
        <rect x="-24" y="-176" width="48" height="12" rx="6" fill="#c6cfe0" stroke="#9aa3b8" stroke-width="2.5"/>
        <!-- head -->
        <path d="M -36 -266 L -48 -304 L -14 -284 Z" fill="#f6a83c" stroke="#c97a1e" stroke-width="3" stroke-linejoin="round"/>
        <path d="M -34 -272 L -41 -294 L -20 -281 Z" fill="#f8b8c8"/>
        <path d="M 36 -266 L 48 -304 L 14 -284 Z" fill="#f6a83c" stroke="#c97a1e" stroke-width="3" stroke-linejoin="round"/>
        <path d="M 34 -272 L 41 -294 L 20 -281 Z" fill="#f8b8c8"/>
        <circle cx="0" cy="-238" r="45" fill="#f6a83c" stroke="#c97a1e" stroke-width="3.5"/>
        <path d="M -16 -278 L -16 -266 M 0 -282 L 0 -268 M 16 -278 L 16 -266" stroke="#d9822b" stroke-width="5" stroke-linecap="round"/>
        <ellipse cx="-16" cy="-242" rx="5.5" ry="7" fill="#26221f"/>
        <circle cx="-14.5" cy="-245" r="1.8" fill="#ffffff"/>
        <ellipse cx="16" cy="-242" rx="5.5" ry="7" fill="#26221f"/>
        <circle cx="17.5" cy="-245" r="1.8" fill="#ffffff"/>
        <path d="M -6 -230 L 6 -230 L 0 -222 Z" fill="#e26d8f"/>
        <path d="M 0 -222 q -5 7 -11 4 M 0 -222 q 5 7 11 4" stroke="#8a4b12" stroke-width="2.5" fill="none" stroke-linecap="round"/>
        <g stroke="#ffffff" stroke-opacity=".85" stroke-width="2" stroke-linecap="round">
          <line x1="-34" y1="-234" x2="-58" y2="-238"/>
          <line x1="-34" y1="-228" x2="-58" y2="-226"/>
          <line x1="34" y1="-234" x2="58" y2="-238"/>
          <line x1="34" y1="-228" x2="58" y2="-226"/>
        </g>
        <!-- helmet -->
        <circle cx="0" cy="-238" r="64" fill="#bee1ff" fill-opacity=".16" stroke="#e6f2ff" stroke-width="6.5"/>
        <path d="M -40 -276 A 52 52 0 0 1 -6 -301" stroke="#ffffff" stroke-width="7" stroke-linecap="round" fill="none" opacity=".65"/>
        <path d="M0 -6 L1.3 -1.3 L6 0 L1.3 1.3 L0 6 L-1.3 1.3 L-6 0 L-1.3 -1.3 Z" transform="translate(30,-262)" fill="#ffffff" opacity=".8"/>
        <circle cx="0" cy="-304" r="5.5" fill="#ffd23f" stroke="#c98f1b" stroke-width="2"/>
        <circle cx="-62" cy="-238" r="4" fill="#c6cfe0" stroke="#9aa3b8" stroke-width="2"/>
        <circle cx="62" cy="-238" r="4" fill="#c6cfe0" stroke="#9aa3b8" stroke-width="2"/>
      </g>

      <!-- dust puffs -->
      <circle class="puff" cx="-150" cy="96" r="6" fill="#d5d5e2"/>
      <circle class="puff" cx="-178" cy="108" r="4.5" fill="#d5d5e2" style="animation-delay:.5s"/>
      <circle class="puff" cx="-136" cy="112" r="3.5" fill="#d5d5e2" style="animation-delay:1s"/>
    </g>
  </g>

  <!-- footer caption -->
  <text x="64" y="762" font-family="ui-monospace, Menlo, Consolas, monospace" font-size="12" letter-spacing="3" fill="#8f9cc4" opacity=".9">LUNAR SKATE PARK — GRAVITY 1/6</text>
</svg>
</body>
</html>
```