Qwen3.8 Max (0902)

The user is asking for an SVG of an astronaut cat riding a skateboard on the moon. The output rules say to reply with exactly one fenced code block containing the complete file — ```svg if the task asks for SVG. The task explicitly asks "draw me an SVG", so I should output ```svg containing a complete standalone SVG file.

Wait — the rules say "```html (or ```svg if the task asks for SVG)". The task asks for SVG, so output ```svg ... ```.

But wait — this is a web demo environment where the output is rendered in an iframe and compared. An SVG file can contain inline <style> and <script>. SVG supports SMIL animation, CSS animation, and scripts. To make it rich and lively, I can create an animated SVG: twinkling stars, drifting comet, gently bobbing cat, dust particles, Earth glowing in the sky, animated skateboard wheels, drifting lunar dust, cat's tail flicking, jetpack thruster puffs, etc.

Since it's SVG I can use CSS animations inside a <style> tag within the SVG. That's allowed (inline). Interactivity too: hover effects, or on click the cat jumps (a CSS animation toggle with a tiny script might work — but SVG inside an iframe: if it's loaded as a document, scripts inside SVG execute; in an iframe srcdoc, script runs). Maybe I could add a small script for parallax on pointer movement and an "ollie" on click. That would be fun. But keep it robust: SMIL or CSS animation needs no JS. Add pointer-based parallax (mousemove) and click to trigger a trick (cat leaps and spins the board — an ollie) with JS-driven CSS class toggle.

Design goals: richly detailed, layered background, motion, micro-interactions, strong typographic contrast. But this is an SVG image — typography only matters if I add text. Maybe I can add a small caption like a mission patch / badge: "MOON PATROL" or "LUNAR WHISKER MISSION" in a display-style font. Since external fonts aren't allowed, use a generic font stack with heavy styling (letter-spacing, weight). Use font-family="Impact, 'Arial Black', sans-serif" for display, monospace for small telemetry text. That gives type contrast.

What's the most distinctive opening for "an astronaut cat skateboarding on the moon"? The scene itself: lunar surface with craters, black space with stars, Earth, cat in helmet and suit on a skateboard, kicking up moon dust. Make that the center. Composition: wide viewBox 1200x800.

Let me plan the scene layers:

1. Deep space background: dark navy-black gradient, subtle nebula blobs (radial gradients, low opacity), twinkling stars (many small circles with CSS animation delays), a shooting star crossing periodically.
2. Earth in the upper left/top: blue-green with swirling clouds, subtle glow, maybe slowly rotating highlight.
3. Distant moon hills / crater-rimmed horizon.
4. Lunar surface: gray gradient with craters (ellipses with inner shadow), small rocks, American-flag-like? Or a little flag planted (a fish-shaped flag — cute: a cat flag with a fish emblem). A fun detail.
5. Cat astronaut on skateboard, positioned center-right, mid-ride, slightly tilted as if going down a ramp or doing a trick. Helmet glass with reflections, white suit with orange accents, tail visible through the suit? Cat: helmet with visible face (ears slightly compressed inside the dome), eyes, whiskers inside helmet, paws. One arm out for balance. Suit details: chest panel with buttons, oxygen hose/tube, mission patch.
6. Skateboard: deck with grip tape, maybe glowing wheels (hoverboard-ish? No, keep classic skate wheels, but add neon underglow). Wheels spin (spoke rotation animation).
7. Moon dust: puffs of dust trailing behind the wheels, drifting particles, animated.
8. Motion: whole cat+board group bobs/tilts gently (as if riding over terrain) — CSS keyframes translate/rotate. Dust particles loop. Stars twinkle. Earth slowly pulses. Occasional shooting star. Little "rover" in the distance? Maybe too much; or a distant little rover with blinking lights — a nice background detail.
9. Telemetry HUD corner: small monospace text like "LUNAR GRAVITY: 0.166 g" "SPEED: 12 km/h", blinking cursor — adds character.
10. Micro-interactions: hover on cat makes the tail wag faster / helmet glint; click anywhere makes the cat ollie (class toggles a jump animation); pointer move causes parallax of star layer.

The demo must show motion within the first few seconds without interaction — all ambient animations are automatic (CSS). Good. Also "game must begin in autoplay demo mode" applies to games; this isn't a game so it's fine. But the keyboard note: "if the demo uses keyboard, display a clear message". I could support Space/arrow for a trick; then should display a small hint. Keep it light: hint text inside the SVG: "click / tap for an ollie — space for a kickflip". The iframe receives keyboard only after a click — fine, the hint is there. Implement: click/tap or Space triggers ollie (cat + board jump, board spins). Could also be a toggle for "boost" that emits thruster puffs. Keep it simple: one trick, replayable.

Implementation details:

- Standalone SVG with xmlns, viewBox="0 0 1200 800", width 100%.
- <style> inside <defs> or directly. Use CSS keyframes. Caveat: inside SVG, transform-origin behavior: for reliable rotation use transform-box: fill-box; transform-origin: center;. Apply transform-box where I animate transforms.
- Script: <script><![CDATA[ ... ]]></script> at end. Add parallax: on pointermove, shift layers slightly using style.transform. Also click → add class "ollie" to #catRig, remove after animation ends (animationend event). Also keydown Space/ArrowUp to do the same. Add a small "kickflip" variant on double-click? Keep it simple.

Note: In SVG, CSS class toggles work. Animation via keyframes defined in style.

Let me build the cat carefully. Draw a side-view cat astronaut facing right, crouched on the board, knees bent, arms spread. Coordinates: build the rig in local coordinates then position via transform.

Maybe simpler: draw everything in absolute coordinates inside a group #rider translated to its position; the bob animation applied to inner group.

Cat design (facing right):
- Board: deck ~ x -90..90, y 0 (top surface). Slightly concave, nose and tail kick up. Wheels under trucks at x=-55 and 55, radius 12, with hub and spoke lines for rotation. Deck underside gradient maybe glow neon cyan; add a soft elliptical glow under board.
- Cat body: rounded suit torso, tilted ~ -8 degrees forward.
- Legs: back leg bent on tail side, front leg near nose.
- Helmet: big glass dome with cat head inside: ears, eyes (happy closed ^ ^ or open), whiskers, muzzle, cheek blush. Glass reflection streaks. Collar ring connecting to suit.
- Backpack life-support behind, antenna with blinking red light (nice background detail!).
- Tail: suit tail? Cat tail visible through rear suit opening? Usually astronaut cat suits enclose tail; draw a bulgy tail with bend, animated flick.
- Oxygen hose curving from helmet to chest pack.

Colors: suit off-white #F4F1E8 with shading, accents coral/orange #FF6B4A and teal #35D0BA, patches. Helmet glass: deep blue with transparency over face. Cat: orange tabby #F5A05A with stripes, cream muzzle.

Lunar surface: horizon curve at y ~ 560. Ground gradient #cfd3dd to #8a8f9e? Moon is gray. Craters: ellipses with darker fills and rim highlights. A ramp! If cat is skateboarding, maybe rolling off a small ramp/kicker built from lunar regolith — dynamic. Or a curved crater rim acting as a ramp with cat on it. Simpler: cat mid-glide on flat ground slightly tilted, dust behind; periodic ollie from animation loop? Could add subtle looping hop into idle bob? Might conflict with click ollie. Keep idle bob as terrain roll; that's fine.

Add flag: pole with flag showing a fish icon, waving animation (skew). Position left in middle ground.

Distant rover: small box with wheels and blinking beacon at x~200 near horizon. Cute.

Footprint trail behind board: small ellipse pairs — distinctive nice detail showing cat walked before skating.

Earth: upper left, radius ~70, gradient blue, white cloud swirls, subtle glow. Maybe rotating cloud layer slowly (a rotating group with clipping).

Stars: generate ~40 circles with class twinkle and different animation-delays via nth-of-type, or via inline style attributes. Can hand-write ~30 with varying delays. Plus 4-point star sparkles (paths) for a few bigger stars.

Shooting star: line with gradient moving diagonally with keyframes, loop every 7s with a delay.

HUD: top-right monospace text lines: "MARE TRANQUILLITATIS / SKATE PARK", "GRAV 0.166g", "O2 ██████ 98%". Blinking underscore. Bottom-left: title in display font: big "LUNAR SHRED" — hmm the task is a picture; typography adds character: stamp-like label "MOON SESSION — EST. SEA OF SERENITY" could work. Add a mission-patch-style caption lower-left: big condensed display "MOON CAT" and small monospace "MISSION 07 · SKATE ORBIT". Use font stack: display: font-family: 'Arial Black', 'Impact', sans-serif; monospace: 'Courier New', monospace. Fine offline.

Reduced motion: @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } good habit.

Now, click trick: keyframes for ollie: rider translateY up ~ -70px, board rotate 360deg separately? For a kickflip, spin the board group while the cat stays. Structure: #rider contains #cat and #board separately, so during trick board can spin (class added to root). Trick animates translateY on #rider via a keyframe and 360 rotation on #board via its own keyframes, plus tilt on cat. Duration 900ms, then remove class on animationend.

Also add a thruster puff: when trick active, show a burst of gas below? Could add: opacity animation of a puff circle class-triggered. Simple: small jet on the backpack emits puff during trick (class .ollie .puff animation).

Parallax: layers #starsFar, #starsNear, #earth, #hills shift based on pointer, via transform translate; keep small (±8px). Use requestAnimationFrame with lerp for smoothness. Ensure pointermove on window works in iframe.

Cursor: crosshair? Maybe custom.

Sound? No.

Let me write the coordinates concretely.

viewBox 0 0 1200 800.

Sky: rect fill url(#skyGrad): vertical from #050510 top to #0d1030 near horizon? Moon has black sky; keep deep space #030308 to #10142e. Add nebula: 2 radial gradient ellipses (purple #4b2a8a 8% opacity, teal).

Horizon: lunar ground takes from y=540 to 800. Large hill arc behind ground at left/right: hill path with top around y=505.

Ground path: M0,585 Q300,545 600,565 T1200,560 L1200,800 L0,800 Z fill url(#moonGrad) (#d8dbe4 -> #7d8291). Add subtle noise with speckles: scatter small darker dots (group of circles opacity .15).

Craters:
- Big crater foreground-left: ellipse cx=180 cy=730 rx=110 ry=26 fill #9aa0ae; inner shadow ellipse darker top; rim highlight stroke.
- Medium crater right: cx=980 cy=690 rx=80 ry=20.
- Small craters scatter.
Crater shading: use radialGradient craterGrad with offset dark center.

Ramp? Maybe a gentle mound under cat: an ellipse mound with top y=610 that cat rides down? Simpler: cat rides on ground near y=610 line; dust behind.

Position cat rig: translate(640, 560) so board top sits around y=560 and ground is ~585 at that x? Ground top curve near x=640 is y≈565. Let me set ground top around y=570 middle. Board deck at y=0 in rig local; rig origin at (640, 566). Shadow ellipse below rig on ground: cx 640 cy 588 rx 110 ry 14 fill black .35, animate scale in sync with bob (opposite phase). Use a separate animation.

Rider idle animation: transform translateY(0..-6px) rotate(-1.2deg..1.5deg) alternate ease-in-out 1.6s. Use transform-box fill-box origin center.

Board details (local):
- Deck path: nose up: from (-92,-2) curve down to (-70,4) linear to (70,4) tail up (92,-6), thickness ~6: draw as closed shape: M-92,-4 Q-70,6 -40,6 L40,6 Q70,6 92,-4 L92,2 Q70,12 40,12 L-40,12 Q-70,12 -92,4 Z? Make a clean deck with kick: top line with raised ends. Use path:
M-96,-14 C-84,-2 -70,4 -48,5 L48,5 C70,4 84,-2 96,-14 L96,-8 C84,4 70,10 48,11 L-48,11 C-70,10 -84,4 -96,-8 Z — approximating concave kicks. Simpler: two stacked curves. Fine-tune numerically later; acceptable stylization.
- Deck top fill #2E2A3A (grip) with subtle stripes; underside edge color #FF6B4A stripe; a graphic under deck: cyan glow line.
- Trucks: small rects at x=±52, y 11..20, fill #cfd3dc.
- Wheels: circles cx=±58 cy=24 r=11 fill url(#wheelGrad) (#FFD166), hub circle r=4 #2E2A3A, spoke lines group with class spin (rotate 0.6s linear infinite). transform-box fill-box origin center.
- Underglow: ellipse cx0 cy30 rx100 ry10 fill url(#glowGrad) teal opacity .5, pulse animation.

Cat (local, standing on deck y≈5):
Rear leg (left / tail side): hip (-28,-60) to knee (-40,-30) ankle back to foot (-46,2). Draw as thick rounded path, stroke width 16, color suit white with shading; boot: rounded rect at foot (-54,-4 to -34,6) fill #FF6B4A.
Front leg: hip (6,-58) knee (20,-30) foot (30,2), boot similar.
Torso: rounded blob path from waist (-34,-52) to shoulders (0,-110): rotated ellipse-ish. Use path: M-36,-46 C-44,-86 -20,-112 6,-112 C34,-112 44,-86 34,-52 C20,-38 -20,-38 -36,-46 Z fill suit white; shading path on lower side (#d9d4c6). Chest panel: rounded rect (-6,-96,26,20) fill #2E2A3A with small colored buttons (teal, coral, yellow) and small gauge circle.
Backpack: rounded rect behind torso (-58,-104,20,46) fill #E8E4D8 stroke; antenna line up (-52,-104) to (-52,-136), tip circle r3 red, class blink.
Tail: emerges from lower back (-34,-48): path M-34,-46 C-58,-40 -70,-52 -66,-72 with rounded cap stroke width 12 white; tip circle coral; group class tailFlick rotation animation around base: transform-origin at (-34,-46). Flick -8..8deg 2.2s.
Arms:
- Back arm reaching behind-up: shoulder (-26,-96) to hand (-64,-118): stroke 14 white, glove circle r8 #FF6B4A.
- Front arm extended forward: shoulder (22,-98) to hand (70,-84), glove coral.
Helmet: center (10,-132), r 34 glass circle fill url(#glassGrad) (radial deep blue to lighter, opacity .55) stroke #cfd6e4 3. Collar ring: ellipse (10,-100) rx 24 ry 8 fill #cfd3dc stroke.
Head inside: circle (10,-130) r 24 fill #F6A54C (orange tabby). Stripes small paths on top. Ears: since inside helmet, ears slightly flattened: triangle left path M-6,-150 L-2,-166? Need to fit within glass r34: ear tips at radius ~30. Ear triangles at (-4,-152) and (24,-152) with pink inner. Muzzle cream ellipse (12,-122) rx 12 ry 9. Nose small rounded triangle #E2704F at (12,-126). Mouth: smiley "w" path. Eyes: happy arcs or big shiny eyes: two circles at (0,-134) and (24,-134) r4 #2E2A3A with white glints r1.3. Cheek blush circles opacity .5. Whiskers: three lines each side inside helmet white opacity .8 — whiskers inside helmet is adorable.
Glass shine: arc path top-left white opacity .5, plus small circle highlight; class glint (subtle opacity shift).
Oxygen hose: path from helmet right-lower (28,-112) curving down to chest (8,-92): stroke #35D0BA width 5, dashed? Plus small connector.
Suit details: belt line, small arm patch circle with fish icon on front arm upper? Keep fish emblem on chest instead: circle (0,-70) r 8 teal with fish path white.

Dust: behind board left side: several circles class puff at (-110, 20..30), animation: translate x -40 and fade, staggered delays, looping 1.4s. Color #cfd3dc opacity .6. Plus 3 small particle dots with arc.

Flag: at x=210, ground y=600: pole line up to y=470, flag rect path from top of pole waving right, waving class skew: flag 70x44 fill #FF6B4A? Maybe teal flag with white fish icon and paw. Waving via CSS rotate small or path morph — simpler: apply a gentle skewY animation. Pole shadow.

Rover at x=980? Ground top y=575 or so: small body rect 60x26 #cfd3dc, 4 wheels circles dark, antenna with blinking teal light, small panel. Slight bob? Stationary except blink.

Footprints: from flag to cat: pairs of small ellipses rotated, opacity .25, along y≈600..610 curve. ~8 of them.

Earth: cx=190 cy=150 r=64: base radial gradient #7fd0ff to #1b5fd9; land blobs paths green #3fae6a opacity .9 clipped in circle; clouds: group of white blobs opacity .8 rotating slowly (60s) clipped in circle; atmosphere glow: outer circle stroke gradient / radial glow ellipse behind. Terminating shadow: crescent overlay dark opacity .35 on right side.

Stars: three-layer groups: far (tiny 1r circles, opacity .7 twinkle 3s various delays), near (1.6r, twinkle 2s), plus 3 sparkle crosses (paths) pulsing scale. Shooting star: line with gradient stroke, keyframes from (1100,80) to (700,260) opacity in/out, duration 6s, infinite, delay 2s. A second one offset 7.5s? Reuse one with 9s loop with different keyframe stops.

HUD: top-right monospace text lines, fill #9fe8dc opacity .8, font 13 letter-spacing 2:
"TRANQUILLITY SKATE BASIN"
"GRAV 0.166 G · O₂ 98%"
"VEL 12.4 KM/H ▸" with blinking caret (tspan class caret opacity steps).
And top-left small: "MISSION LOG 07".
Bottom-left title block:
Big display: "MOON CAT" font-size 64 weight 900 fill #F4F1E8 letter-spacing 6, with subtle drop shadow; second line monospace 14 fill #FFB59F: "ASTRO-TABBY · FIRST LUNAR SHRED SESSION". Small hint under bottom-right monospace 12: "CLICK / SPACE — OLLIE" blinking gently.

A rounded frame border? An inset thin stroke rect opacity .2 teal as a viewfinder-like, with corner ticks — camera HUD feel. Nice.

Animations list (CSS):
@keyframes twinkle {0,100%{opacity:.25}50%{opacity:1}}
.spin rotate 360.
.bob { animation: bob 1.7s ease-in-out infinite alternate } keyframes translateY -6 rotate .8deg.
.shadowPulse scale 1->0.92 opacity .35->.28 sync 1.7s alt.
.tailFlick rotate.
.blink {animation blink 1.2s steps(2) infinite} on/off.
.puffs: translateX(-46px) scale(1.4) opacity 0 -> 1 ->0.
.wheel? already spin.
.glowPulse opacity .35->.6.
.flagWave skewY(-3..3deg) origin left.
.driftClouds rotate 360 60s linear.
.shoot: keyframes translate + opacity.
.glare: translateX small? Keep static.
.ollie keyframes:
#rig.ollie .riderInner? Let me define: on ollie: #riderJump (a group wrapping cat+board) animation jump .95s cubic-bezier(.3,.7,.3,1): 0%{translateY(0) rotate(0)} 30%{ translateY(-78px) rotate(-6deg)} 55%{ translateY(-84px) rotate(-3deg)} 100%{translateY(0) rotate(0)}. Board spin: .ollie #board { animation flip .95s ease } 0%{rotate(0)} 70%{rotate(360deg)} 100%{360}. transform-box fill-box origin center. Dust burst: .ollie .burst {animation burst .9s} scaling up fade. Plus during ollie, shadow shrink: .ollie #shadow {animation shadowTuck .95s} scale .5 opacity .15 at 40%.

But note: idle bob also animates transform on the same group? Put bob on inner group #bobber, jump on outer #jumper — avoid conflict. Shadow is separate element with its own animation; when .ollie added, override animation property (later rule wins with same specificity? .ollie #shadow has higher specificity, ok).

JS:
const svg = document.documentElement (if standalone SVG) — but may embed inline; use closest root of document.querySelector('svg')? In iframe srcdoc with pure SVG, document root is svg. Write code robustly: const root = document.querySelector('svg');
On pointermove: compute nx,ny (−1..1), target offsets; rAF lerp; apply to layers via style.transform = translate. Save layer list with depth factors: far .4? Layers: #starsFar depth 6, #starsNear 12, #earth 8, #hills 5, HUD 0. Maybe skip ground.
On pointerdown or keydown (Space/ArrowUp/KeyW) trigger trick: if not playing: root.classList.add('ollie'); listen animationend on #jumper once to remove class. Also spawn extra dust? The burst elements handle.
Prevent default on Space scroll.
Keyboard caveat in iframe needs focus/click — hint displayed.

Also hover on cat: #rig:hover .tail faster? CSS: #rig:hover .tail{animation-duration:.6s} plus helmet glint brighter. cursor pointer on rig.

Reduced motion media query kills animations.

Text: ensure O₂ subscript is fine.

Font stack: display: "Arial Black","Avenir Next Condensed",Impact,sans-serif; mono: "Courier New", ui-monospace, monospace.

Let me write out the SVG structure order:
<svg viewBox="0 0 1200 800">
 <title>, <desc>
 <style>
 <defs> gradients: skyGrad, neb1, neb2, earthGrad, earthGlow, moonGrad, craterGrad, wheelGrad, glowGrad, glassGrad, shootGrad, deckGraphic maybe.
 clipPath earthClip circle.
 Background rect, nebulas, #starsFar, #starsNear, shoot group, #earth group, hills, ground group (surface, craters, speckle), flag, rover, footprints, shadow (ellipse id=shadow), #rig (translate) > #jumper > (#dustBack group, #board group, #cat group, burst), foreground small rocks near bottom corners, HUD group.
 <script>.

Note: shadow should be under the rig, place before rig.

Let me define the gradients:

skyGrad: y1 0 y2 1: #04040c, 55% #0a0e24, 100% #141a3a.
nebA radial: #6a3fb8 op .35 -> transparent.
nebB radial: #1f8f8a op .25 -> transparent.
earthGrad radial cx .35 cy .35: #bfeaff, 40% #57b8ff, 75% #1f6fe0, 100% #123f9e.
earthGlow radial: rgba(120,200,255,.55) center -> transparent.
moonGrad linear: #e6e8ef top -> #b9bec9 40% -> #8b90a0.
craterGrad radial fx .5 fy .35: rim lighter #f0f2f6 to #7c8190 with inner shadow: maybe two overlapping ellipses instead.
glassGrad radial: rgba(190,230,255,.28) center, 60% rgba(90,140,220,.25), 100% rgba(20,40,90,.5).
wheelGrad radial: #ffe9a8 -> #ffc94d -> edge #e09a2b.
glowGrad radial teal: #35e0c8 .55 -> transparent.
shootGrad linear: white -> transparent.

Hills: back hills path fill #565b6e opacity? Moon distant hills gray darker than sky: #3c4053 with rim light stroke #9aa0b4 thin top. Two humps.

Ground speckles: 14 small circles fill #6d7280 opacity .35 scattered; plus lighter dots.

Let me lay out numbers for crater placement to avoid overlapping cat (cat at x 540..760, y up to 380). Foreground craters at x 150 and 1000 fine; small craters at (420,660) rx26, (760,700) rx34? Cat dust flows left; ok.

Footprints path from flag (215,600) toward (520,600)? Cat at 640; footprints fade near board start ~560. Pairs offset vertically.

Rover on the right x 1000 y ~ 566 top? Ground y ~ 572 at x=1000. Place wheel bottom at 578.

Flag at x=205 base y=604; but ground near x=205 top is ~ y=575? My ground path: M0,585 Q300,545 600,565 T1200,560 — at x=205 y≈?  Quadratic from (0,585) ctrl (300,545) to (600,565): t≈0.34 at x≈205 y≈(1-t)^2*585+2t(1-t)*545+t^2*565 ≈ .435*585 + .449*545 + .115*565 ≈ 254+244+65 = 563. Hmm flag base y=604 would be underground ~ fine (ground surface ~563, base 604 means planted into surface area visible, surface is top of fill; fill continues down, so an object at y 604 is on the ground in front. Good; flag base at y=610.

Cat rig at (640, ~572): ground y at x=640: second quadratic (600,565) ctrl? T1200,560 smooth: control = reflection of (300,545) about (600,565) => (900,585); end (1200,560). At x≈640 t small: y≈565+ rising? y ≈ 566. Set rig origin y=566; wheels cy local 24 -> 590, wheel bottom 601 — bit below surface start but visually okay (wheels bite in ~ shadow). Maybe raise rig to y=560: wheel bottom 595. Shadow ellipse cy 596.

Board local x -96..96 => global 544..736.

Helmet top: -132-34= -166 local => global y 394. Good, plenty of sky above with Earth on left.

Earth at (190,150) r64 — upper left; title text lower-left won't clash.

HUD frame corner ticks: four L-paths stroke #7fe8d8 opacity .5.

Title placement: x=48, y=742 big text; sub below y=766. Hint lower right x=1152 anchor end y=766.

Shooting star: group translate animation: start (1050,60) → (620,220). Use CSS transform translate on group containing line rotated. Set keyframes shoot: 0%{transform:translate(1120px,40px); opacity:0} 5%{opacity:1} 18%{transform:translate(560px,240px);opacity:0} 100%{same end, opacity 0}. duration 9s infinite. Draw line as gradient stroke width 3 length ~90 rotated to match direction: dx=-560 dy=200 angle ≈ 160deg. Rotate line group by 19.6deg? Direction vector (-560,200) angle = atan2(200,-560)= 160.3° from +x. Draw line from (0,0) to (-90, 32) roughly same direction, no need to rotate.

Twinkling stars: write ~26 circles. Use style="animation-delay:..s". Also vary duration classes tw1 (2.4s), tw2 (3.2s), tw3 (4s).

Sparkle cross path shape: M0,-6 L1.4,-1.4 L6,0 L1.4,1.4 L0,6 L-1.4,1.4 L-6,0 L-1.4,-1.4 Z.

Dust puffs behind wheels: circles at local (-100..-140, 18..30) various r 5-9, class puff with delays; animation: from translate(0,0) scale(.6) opacity .7 to translate(-60px,-6px) scale(1.6) opacity 0, 1.5s infinite linear. Plus tiny grains.

Burst (on ollie): two ellipses at wheels, class burst initial opacity 0; .ollie .burst animation burst .8s: 0 opacity .8 scale .4; 100 scale 2 opacity 0.

Now CSS transform-box: for groups animated by rotation (tail, wheels, board flip, flag), set: transform-box: fill-box; transform-origin: center; except tail needs origin at base: use transform-origin: 100% 100%? Tail path drawn from body outward-left upward; base is bottom-right of bbox: transform-origin: right bottom. With fill-box okay.

Jumper translate doesn't need origin.
Bobber rotate small: origin center fill-box.

Board flip origin center.

One more nice thing: helmet reflection of the moon curve? A tiny white arc glint is enough.

Cat's eyes: big excited eyes looking right (direction of travel): pupils shifted right.

Also add speedlines behind cat: two thin curved strokes left of cat opacity .3 animate dash motion? class speed with stroke-dasharray 14 18 with dashoffset animation. Adds motion feel. Position at local (-140..-260) y -60/-20. Draw path M-140,-70 q-60,6 -120,2 etc. Animate stroke-dashoffset from 0 to -64 linear .5s infinite. Color #9fe8dc opacity .35.

OK script: guard with try/catch? Ensure no errors.

classList on SVG root works. Animationend event name 'animationend'.

Implement trick():
function trick(){ if(rig.classList.contains('ollie')) return; rig.classList.add('ollie'); }
jumper.addEventListener('animationend', e=>{ if(e.animationName==='jump') rig.classList.remove('ollie'); });
Keyframes name jump defined; careful with CSS @keyframes jump.

Parallax:
layers = [['starsFar',6],['starsNear',12],['nebulae',4],['earthG',9],['hillsG',5]]
onpointermove on svg: nx=(e.clientX/innerWidth-0.5)*2 ... but iframe coordinates: use e.clientX relative to window's bounding — okay.
targetX = nx*depth. In rAF: cur += (t-cur)*0.06; el.style.transform = translate(x px, y*0.6 px).
Note: earthG also has children with animation (cloud rotate) — only transform parent, fine.

Hover on #rig via CSS to change cursor.

Also add <a>? No.

Accessibility: role="img" aria-label.

Let me carefully write out the final code with correct syntax. Ensure CDATA on style/script.

Potential gotcha: CSS with '>' selectors inside CDATA is fine. Animation names with same prefix fine.

Deck shape final version:
Path for deck (top grip):
M-97,-16 C-88,-6 -72,2 -50,4 L50,4 C72,2 88,-6 97,-16 L97,-9 C88,1 72,9 50,11 L-50,11 C-72,9 -88,1 -97,-9 Z
This forms a deck of thickness ~7 with kicks. Fill for underside edge? Fill whole with grip #332f42 then a thin top highlight path stroke #ff6b4a along top: reuse top curve: M-97,-16 C-88,-6 -72,2 -50,4 L50,4 C72,2 88,-6 97,-16 stroke #FF6B4A width 3 fill none. Underside glow line: bottom curve stroke #35e0c8 width 2 opacity .8.

Trucks: rect x -62..-44 (w18,h8, y 11) and 44..62, fill #b9bfcc rx2; axle lines.

Wheel spin group: wheels each: group class wheel translate(±58,26): circle r 11 fill wheelGrad stroke #b97a1f? plus spokes: two lines through center class spokes spin. Actually rotate a group containing 3 spoke lines.

Cat z-order: back arm behind torso; tail behind body; helmet over head.

Let me write cat's shapes specifically (local coords):

tail g class tail: path M-32,-46 C-56,-42 -68,-56 -62,-78 stroke #EDE9DC width 13 linecap round fill none; tip circle at (-62,-78) r 7 fill #FF6B4A. Origin right bottom approx at bbox of path: bbox x -69..-32 y -85..-40; base at (-32,-46) is bottom-right of bbox: transform-origin: 100% 100% good.

backArm: path M-24,-96 C-44,-104 -58,-112 -66,-122 stroke #EDE9DC w 13 round; glove circle (-68,-124) r 8 fill #FF6B4A stroke #d9553a? Simpler.

Back leg: path M-26,-56 C-38,-44 -44,-28 -46,-8 stroke suit w 15; boot: rounded rect x-58,y-10,w26,h12 rx6 fill #FF6B4A with sole line #332f42.
Front leg: path M4,-56 C12,-42 20,-26 26,-8 stroke w 15; boot rect x16,y-10,w26,h12 rx6.
Boots rest on deck top y=4: boot bottom y=2 approx OK (deck top 4). Fine-tune y=-2..10.

Torso path: M-34,-44 C-46,-78 -30,-112 2,-114 C32,-112 44,-84 34,-48 C18,-34 -16,-34 -34,-44 Z fill #F4F1E8 stroke #d8d2c2 1.5. Shading: path along right: M20,-108 C36,-96 40,-72 33,-50 fill #E2DCCB opacity .8? Use path fill.

Chest panel: rect x-2 y-98 w 26 h 20 rx4 fill #332f42; buttons: circle (4,-92) r2.6 #35e0c8; (12,-92) r2.6 #ffd166; (20,-92) r2.6 #ff6b4a; gauge rect (2,-88,20,6 rx2) fill #1c1930 with tick lines teal.

Fish patch: circle (-18,-84) r 9 fill #35d0ba; fish path: M-24,-84 q4,-5 9,0 q-4,5 -9,0 Z with tail triangle: M-15,-84 l5,-3 l0,6 z fill #fff... tiny; plus eye dot. Keep rough.

Belt: path M-30,-52 C-12,-44 12,-44 32,-50 stroke #cfc9b8 w5.

Backpack: rect x-58 y-108 w 22 h 48 rx8 fill #E8E4D6 stroke #cfc9b8; straps line to torso; antenna: line (-50,-108)-(-50,-140) stroke #9aa0ae w3; tip circle r3.5 fill #ff4d5e class blink; small dish? Skip.

frontArm: path M22,-96 C40,-96 58,-90 70,-84 stroke #F4F1E8 w13; glove circle (73,-83) r8 #FF6B4A.

Collar: ellipse (8,-104) rx22 ry8 fill #cfd3dc stroke #9aa0ae.

Head group translate maybe none: head circle (8,-132) r 23 fill #F6A54C stroke #d9863c? Subtle. Stripes: three short arcs on top: path stroke #d9863c w3: M-2,-150 q4,-4 8,-1 etc. Place stripes on top of forehead.
Ears: left path M-8,-146 L-14,-164 L2,-152 Z fill #F6A54C stroke; inner M-8,-150 L-11,-160 L-2,-152 Z fill #ff9d8a. Right: M18,-152 L30,-162 L26,-146 Z; inner similar. Ensure inside glass r34 around (8,-132): ear tip (-14,-164): distance from center: dx-22 dy-32 → 38.8 >34 outside glass! Reduce: glass r 36 and ears closer: tip (-10,-158): distance sqrt(18²+26²)=31.6 OK. Adjust: left ear M-6,-146 L-12,-159 L2,-150 Z; right M20,-150 L30,-158 L26,-144 Z tip (30,-158): dx22 dy26 distance 34 — glass r 36 OK.

Eyes: white? Cartoony: sclera optional. Two big dark eyes: circles (0,-136) r 4.6 and (20,-136) r4.6 fill #33241c? Dark #2b2118 with white glint r1.6 offset (-1.4,-1.4). Look forward: shift pupils +1.5x: (1.5,-136),(21.5,-136).
Blush: circles (-6,-126) r3.4 and (26,-126) fill #ff8f7a op .55.
Muzzle: ellipse (10,-124) rx11 ry8 fill #ffe9d2. Nose: path M7,-128 l6,0 l-3,4 z fill #e2704f rounded? Add stroke-linejoin. Mouth: path M10,-124 q-3,4 -6,2 M10,-124 q3,4 6,2 stroke #b9713a w1.6 fill none. Whiskers: lines from muzzle sides: (0,-126) to (-14,-128); (0,-123) to (-14,-121); (20,-126) to (34,-128)? But glass r36 around (8,-132): point (34,-128) distance sqrt(26²+4²)=26 OK; (-14,-128): dx -22 dy4 => 22 OK. stroke #fff op .75 w1.3.

Glass: circle (8,-132) r 36 fill url(#glassGrad) stroke #dfe6f2 sw2.5 opacity? Fill gradient includes alpha. Rim ring: circle r36 stroke only. Helmet base ring bolts: small circles.
Glint: path M-16,-152 a30,30 0 0 1 22,-14 stroke #fff w5 opacity .5 linecap round fill none; plus dot circle (24,-152) r3 fill #fff op .6. Class glint with subtle pulse.

Oxygen hose: path M30,-110 C38,-100 30,-92 18,-90 stroke #35d0ba w5 fill none opacity .9; connector circle (30,-110) r4 #cfd3dc.

Jet puff (on ollie): circles under backpack (-52,-58) r6 and (-52,-46) r4 fill #9fe8dc class jetpuff opacity 0; on .ollie animation jet .9s: scale/translate down fade. Keep simple: rise opacity then fade.

OK ground group includes speckles + crater + rocks. Small foreground rocks bottom-right: a couple of polygonal pebbles.

Speed lines group behind cat, inside rig but outside jumper (they remain at ground level? Better to attach to rig, so they bob with): place inside rig but before jumper.

Rover details: group translate(1010,552): body rect -28,-20,56,20 rx4 fill #c9cede stroke #8f95a5; panel lines; wheels circles (-18,4)(0,4)(18,4) r6 fill #3a3f52 stroke #22263a; antenna line (-22,-20)-(-22,-38) light circle r3 #35e0c8 class blink delay 0.6s; small camera box. Scale maybe .9.

Verify position vs ground: ground top y=563 at x=1010 → wheels bottom 552+4+6=562 good.

Flag: group translate(212,612): pole line (0,0)-(0,-128) stroke #dfe3ec w4 cap round; pole base small mound ellipse. Flag path: M2,-126 q30,-8 62,-2 l0,40 q-32,-6 -62,2 z fill #35d0ba? Teal flag with white fish + paw icon: fish ellipse + triangle; tiny. Class flagWave rotate skew: apply on flag path group transform-origin left: animation flagWave 3s ease-in-out infinite alternate: rotate(-2deg)→(2.5deg) plus skewY? Just rotate is enough, plus a subtle second wave path overlay darker stripe. Add shadow of flag on ground ellipse.

Footprints: group along (240,612) to (540,600): pairs: ellipses rx4 ry7 rotated -20°, spacing 38px alternating vertical offsets ±6, fill #565b6e opacity .35, decreasing opacity with distance? Uniform .3 fine. 8 pairs.

Stars far circles ~20: coords spread in upper area y<420, avoid text? Overlaps behind but fine.
Add tiny star dot color mix (#fff, #cfe6ff, #ffe9c9).

Sparkles 3: (320,90),(760,140),(1080,300)? Plus (520,60).

HUD upper-left: text "LUNAR SURF REPORT" 12px mono letter-spacing 3 fill #7fe8d8 opacity .85 at (48,56); small line under.
Upper-right telemetry block anchor end x=1152 y=56..: three lines.

Corner ticks: at (24,24),(1176,24),(24,776),(1176,776): path like M24,44 V24 H44 stroke.

Title: x48 y738: MOON CAT — maybe split colors: "MOON" fill #F4F1E8, "CAT" fill #FF6B4A via tspan. font-size 66 letter-spacing 4 font-weight 900 font-family stack. Add slight text shadow via filter? Use paint-order stroke: add stroke #04040c stroke-width 8 paint-order stroke for chunky sticker look? Might look good against the sky at bottom-left on ground. Subtitle mono 15 fill #9fe8dc letter-spacing 3: "FIRST SKATE SESSION · MARE TRANQUILLITATIS".
Hint text anchor end (1152, 764) fill #ffd166 opacity .9 class hintBlink gentle pulse: "TAP OR PRESS SPACE TO OLLIE ▸".

Maybe put a tiny "01" patch on the deck? Skip.

Let me write out CSS keyframes names: twinkle, spin, bob, tailflick, blink, puffMove, glowPulse, flagWave, cloudSpin, shoot, jump, flip, burstA, shadowTuck, dashMove, glintPulse, hintPulse, jetPuff.

Define .ollie rules keyed by #rig.ollie.

CSS structure carefully; set transform-box fill-box on: .spinG, .tail, .flagCloth, #bobber, #boardG, .burst, .glow? (glow pulse opacity only). #jumper translate only.

Board flip origin center: boardG contains wheels + deck: its bbox center approx (0, ~8): fine.

Note: wheels spin within board flip nested transforms OK.

Bobber wraps cat+board? Bob should include both rider and board (they ride together) => bobber wraps boardG + cat. Jumper wraps bobber + dust? Dust should not jump... dust attaches to ground under wheels; when ollie dust burst happens on ground. Put dustPuffs inside rig but outside jumper. Bursts same.

Shadow is separate static element id shadow under rig in scene with its own class.

Speed lines outside jumper too.

OK let me finalize numbers for jump keyframes:
@keyframes jump {0%{transform:translateY(0) rotate(0)} 32%{transform:translateY(-86px) rotate(-7deg)} 60%{transform:translateY(-92px) rotate(-4deg)} 100%{transform:translateY(0) rotate(0)}} duration 1s cubic-bezier(.34,.6,.34,1). Flip: 0 rotate 0; 20% -20deg windup? Kickflip: 0%{0} 25%{-30deg} 80%{360deg} 100%{360deg}. But end 360 = 0 so removing class resets without snap.

Hmm, flip rotates board around its center — but visually the board rotates under cat which remains; cat stays, acceptable stylization.

shadowTuck: 0{transform:scale(1);opacity:.35} 40%{transform:scale(.55);opacity:.15} 100%{scale 1 opacity .35} 1s. transform-origin center; transform-box fill-box.

Burst elements: two ellipses at (±58, 28) rx14 ry6 fill #dfe3ec opacity 0; on .ollie animation burstA .9s ease-out: 0%{opacity:.85; transform:scale(.4)} 100%{opacity:0; transform:scale(2.4)}.

jetPuff on ollie: circles (-54,-52) etc animation jetP .9s: 0{opacity:0 transform:translateY(0) scale(.6)} 25%{opacity:.9} 100%{opacity:0; transform:translateY(26px) scale(1.6)}.

Hint pulse: opacity .5↔1 2s.

twinkle uses opacity only.

CloudSpin rotate 360 80s linear infinite; group of cloud blobs clipped in earth; transform-origin center fill-box (group bbox = circle area center matches earth center if blobs distributed around center — safer to wrap in a group with transparent circle bounds that match earth center? transform-origin fill-box uses bbox of group content; a blob biased one side would offset origin. Add invisible circle r64 in group to make bbox symmetric: circle r 64 fill none stroke none — does fill none affect bbox? Geometry bbox includes it regardless of paint. Yes, geometry counts. Good trick.)

Similarly for spin spokes group: include invisible circle r 9.

flagCloth origin at left middle: transform-origin: 0% 50%.

Dust puff circles each need transform-box fill-box individually.

Shooting star: use line with gradient stroke url(#shootGrad) — gradient along bounding box: line from (0,0) to (-90,32): gradient x1 0 x2 -? Use gradientUnits userSpaceOnUse x1 0 y1 0 x2 -90 y2 32 stops white→transparent. Also small circle at tip.

OK script: pointerdown should ignore if target is? anywhere fine. Prevent long-press too? No.

Also add document.addEventListener('keydown') on window.

Edge: iframe focuses only after click; click already triggers ollie — good first interaction.

Let me write final SVG now, being careful with syntax. Use 2-space indentation, keep it organized with comments <!-- -->.

Star field list — write ~24 circles with classes tw a/b/c and inline delays.

Let me define star positions (x,y,r,class,delay):
Far small r .9-1.2:
(60,60),(150,220),(240,120),(330,40),(410,180),(500,90),(590,40),(660,150),(730,70),(820,120),(900,50),(980,170),(1060,90),(1130,210),(1180,60),(390,260),(720,240),(940,260),(540,300),(80,330),(1160,330),(270,320),(640,330)? Keep y<400 above hills (hill tops ~500). Fine.
Near r1.6-2.2 ~10 stars: (120,140),(300,200),(450,60),(560,210),(700,110),(850,220),(1000,60),(1120,150),(200,60),(760,300).
Colors alternate #ffffff, #cfe4ff, #ffe6bf.

Class: .tw{animation:twinkle var(--d,3s) ease-in-out infinite} with style="--d:2.6s;animation-delay:.4s".

CSS custom property inside svg style supported by Chrome.

Also nebula ellipses: (850,180) rx 300 ry 160 fill url(#nebA) opacity? Gradient already has alpha; add class drift slow? Subtle scale pulse maybe skip; add slow float animation translate 20px 20s alt for living background.

OK write the file. <svg> attributes also: xmlns, viewBox, width="100%" height="100%"? In iframe srcdoc, ensure svg fills: set svg { width:100%; height:100% } via style? Include inline style attribute on svg width/height 100% plus default no CSS for html/body in SVG document: background of root. Set preserveAspectRatio="xMidYMid meet". Background of page behind svg: sky color — fine because svg covers. Set background on root svg via CSS background:#04040c.

Script runs after DOM: place at end; no need to wrap in try.

Note: for classList on svg element: root.classList works (SVGElement has classList). Use document.documentElement? Since standalone svg, querySelector('svg') returns root.

Let me finalize the ground path and hill details:

Hills behind: path M0,560 C120,505 260,505 380,548 C470,520 560,522 640,552 C760,512 900,516 1010,552 C1080,532 1140,536 1200,552 L1200,600 L0,600 Z fill #454a5f; top rim highlight: same top path stroke #8f96ad opacity .5 w2 fill none? Draw separately.

Actually simpler: two hill layers: distant darker #3a3f52, near #4a5066.

Ground front: path M0,588 C200,558 380,560 560,566 C740,572 920,556 1200,564 L1200,800 L0,800 Z fill url(#moonGrad).

Surface highlight: stroke along top: same curve stroke #f2f4f8 opacity .5 w 2.

Then craters (drawn after ground):
Big crater (170,720) rx 118 ry 30: base ellipse fill #a7adbb; inner shadow: ellipse (170,714) rx 100 ry 22 fill #7f8595; deeper floor ellipse (170,718) rx 84 ry 16 fill #98a0ae? Plus rim highlight top arc stroke #eef0f5: path M60,714 A110,26 0 0 1 280,714 stroke... approximate with ellipse stroke dashed? Use ellipse stroke #e8ebf2 opacity .7 w 3 fill none clip lower half? Simplify: two ellipses + one lighter rim ellipse offset -4.

Medium (985,688) rx 78 ry 20 similar.
Small (420,652) rx 26 ry 8; (755,708) rx 34 ry 10; (585,640) rx 16 ry 5? Near cat front maybe under board? y 640 below ground line OK.

Speckle dots ~16 circles r 1.5-3 fill #767c8c opacity .5 scatter y 590-780, plus lighter dots #eef0f5 few.

Rocks: three polygon pebbles bottom-left (70,780) etc, and near (1120,760).

Shadow under rig: ellipse cx640 cy596 rx105 ry13 fill #1a1c2a opacity .38 class shadowE.

Speed lines inside rig local: path M-120,-84 h-90; M-140,-52 h-70; M-115,-20 h-60 stroke #9fe8dc opacity .3 w 3 dasharray 16 14 class dashy animation dash .6s linear infinite (stroke-dashoffset to -60).

Rig translate(640,566).

Global positions check: helmet center at y 566-132=434, top 398. Earth at (190,150) — no overlap.

Title text at lower-left on ground — good contrast with dark stroke.

Now writing CSS:

svg{background:...}
text{user-select:none}
.fontD { font-family:'Arial Black','Arial Bold',Impact,sans-serif; font-weight:900; }
.fontM { font-family:'Courier New',ui-monospace,monospace; }

Keyframes and classes as planned.

Reduced motion query.

Hover: #rig{cursor:pointer} #rig:hover .tail{animation-duration:.5s} #rig:hover .glint{opacity:.9}

One concern: CSS animation on SVG child transforms is broadly supported in Chrome. Good.

Script:

(function(){
 var root=document.querySelector('svg');
 var rig=document.getElementById('rig');
 var jumper=document.getElementById('jumper');
 var layers=[['lfar',6],['lnear',13],['neb',4],['earthG',9],['hills',5]].map(function(p){return [document.getElementById(p[0]),p[1]];});
 var tx=0,ty=0,cx=0,cy=0;
 addEventListener('pointermove',function(e){tx=(e.clientX/innerWidth-.5)*2;ty=(e.clientY/innerHeight-.5)*2;});
 function loop(){cx+=(tx-cx)*.06;cy+=(ty-cy)*.06;layers.forEach(function(L){if(L[0])L[0].style.transform='translate('+(cx*L[1]).toFixed(2)+'px,'+(cy*L[1]*.55).toFixed(2)+'px)';});requestAnimationFrame(loop);} loop();
 function trick(){ if(rig.classList.contains('ollie'))return; rig.classList.add('ollie'); }
 jumper.addEventListener('animationend',function(e){ if(e.animationName==='jump'){ rig.classList.remove('ollie'); } });
 addEventListener('pointerdown',trick);
 addEventListener('keydown',function(e){ if(e.code==='Space'||e.code==='ArrowUp'||e.code==='KeyW'){ e.preventDefault(); trick(); } });
})();

animationName check: keyframes named 'jump'. Good.

Set ids: lfar, lnear, neb, earthG, hills.

Ensure group wrapping has id and no conflicting transform attributes with style.transform (parallax sets style transform; if element has attribute transform, style overrides). So layers must not have transform attribute — put translate on inner child instead. earthG group positioned via children's coordinates (absolute). hills absolute. stars group absolute. Fine.

For rig with attribute transform translate(640,566) — parallax doesn't touch rig. OK.

Board flip: id boardG with no attribute transform (drawn in rig local coords) good.

Tail class with transform-origin fill-box right bottom; initial CSS transform none; animation tailflick 2.4s ease-in-out infinite alternate? keyframes from rotate -6 to 10? alternate.

@keyframes tailflick{from{transform:rotate(-7deg)}to{transform:rotate(9deg)}}

Wheels: group .wheelG translate attribute? Wheels are children of boardG with absolute local coords; spin group inside each wheel: <g class="spokes" ...> with invisible circle r9 for bbox origin center.

@keyframes spin{to{transform:rotate(360deg)}} .spokes{animation:spin .7s linear infinite; transform-box:fill-box;transform-origin:center}

Deck underside glow ellipse class glowE pulse opacity.

Flag cloth group class flagCloth.

Cloud group class clouds inside earth clip: wrap with invisible circle cx190 cy150 r64 to center bbox; rotation origin center fill-box.

ClipPath earthClip: circle cx190 cy150 r62.

Earth land masses: rough blobs paths within circle: e.g., path M150,120 q30,-18 55,-4 q18,12 6,26 q-24,10 -44,2 q-22,-10 -17,-24 z fill #3fae6a opacity .95; a second at (210,180) smaller; ice cap ellipse near top (190,96) rx 20 ry 8 #eaf6ff op .9.

Cloud blobs: 5 white ellipses at various angles r ~ (28,8) etc opacity .85.

Terminator shadow: path covering right half: circle overlay: use path? Simpler: circle cx190 cy150 r62 fill url(#term) where term is linear gradient transparent 55% → rgba(4,6,20,.55) 100%, gradient x direction. OK.

Atmosphere: circle r66 stroke rgba(140,200,255,.35) w6? Plus glow ellipse behind r 84 fill url(#earthGlow).

Shooting star group id shoot1 with class shoot.

Now compose everything. Also add <desc>.

HUD divider line under title maybe not needed.

Potential text overflow at 375px: svg scales down uniformly (viewBox meet) — text scales, still fine.

Also ensure no horizontal scrollbar: svg width 100% height 100vh? Body margin 0. In standalone SVG document, root svg will size to viewport automatically? Set width="100%" height="100%". Plus CSS html,body{margin:0;height:100%} — CSS rules apply to body/html in SVG doc. background via svg selector.

Deliver only ```svg code block. No extra text.

Also double-check trick retrigger: after class removal, animation becomes re-eligible.

Edge: pointerdown triggers on any click including HUD fine.

Let me write it out.

Also include a subtle vignette: large rect fill radial dark edge opacity .35 pointer-events none — use radialGradient vign center transparent → rgba(0,0,10,.4).

Also add tiny twinkle stars reflection? No.

Time to write the final. Extreme care with quotes/tag balance.

Font sizes: title 64 with letter-spacing 6, width approx: MOON CAT 8 chars ~ 64*0.75*8 + spacing ≈ 420px OK.

Upper-right telemetry anchor end x 1150:
line1 y 58: "GRAV 0.166 G · O₂ 98%"
line2 y 76: "VEL 12.4 KM/H ▸" tspan caret "▸" class caret blink? Use rect caret: after text separate rect, width 8 height 14 fill #9fe8dc class caret at estimated x: hard to know width of text; instead use tspan "_" with class caret (opacity blink). Monospace font approx width: 12px * 0.6 * length. "VEL 12.4 KM/H " ~ 14 chars ≈ 100px; anchor end so caret is on right end ... anchor end means text ends at x; place trailing caret tspan inside same text: "VEL 12.4 KM/H " + tspan "_" blink — since anchor end includes caret, fine.
line1 similarly; upper-left line: "LUNAR SURF REPORT" y 58; smaller "CAM 02 · LIVE" y 76 with red dot circle blinking before text at x 48: circle cx 52 cy 72 r 4 fill #ff4d5e class blink; text x 62.

Add crosshair in center? No.

Corner ticks stroke #7fe8d8 opacity .45 w 2: paths M24,48 V24 H48; M1152,24 H1176 V48; M1176,752 V776 H1152; M48,776 H24 V752.

Title block:
text x48 y730 class fontD size 68 fill #f4f1e8 stroke #0a0c18 stroke-width 10 paint-order stroke letter-spacing 4: tspan MOON fill inherit, tspan CAT fill #ff6b4a dx 8.
Sub: x50 y760 fontM 14 letter-spacing 4 fill #9fe8dc opacity .9: "FIRST SKATE SESSION · MARE TRANQUILLITATIS"
Hint anchor end x1150 y760 fontM 13 fill #ffd166 letter-spacing 2 class hintP: "TAP / SPACE = OLLIE ▲"

Now dust puff coords in rig local behind wheels: circles (-105,22) r7, (-118,26) r5, (-130,20) r6, (-98,30) r4, grains r2 (-140,24)(-150,28). Class puff with delays .0/.25/.5/.75 duration 1.4s.

puffMove keyframes: 0%{opacity:0; transform:translate(6px,0) scale(.5)} 15%{opacity:.75} 100%{opacity:0; transform:translate(-58px,-10px) scale(1.7)}.

Set transform-box fill-box on .puff.

Grain class grain faster translate further.

Burst ellipses (0? two separate at (-58,26) and (58,26)) class burst.

Jet puffs: two circles class jet at (-52,-60) r5 and (-52,-50) r3.5 fill #9fe8dc.

@keyframes jetP{0%{opacity:0;transform:translateY(0) scale(.5)}20%{opacity:.95}100%{opacity:0;transform:translateY(30px) scale(1.5)}} with fill-box.

Shadow id shadow class shadowE: base animation shadowIdle 1.7s alt subtle (scale 1↔0.94 opacity .38↔.3) sync with bob; on ollie override with shadowTuck 1s.

Bob keyframes: from translateY(0) rotate(-1deg) to translateY(-7px) rotate(1.4deg) alternate 1.7s ease-in-out infinite. transform-box fill-box origin 50% 90%.

Bob duration and shadow same to feel coherent.

Hills parallax group id hills includes both hill layers.

groundG static (no parallax) with flag rover footprints craters.

Rig also static (no parallax) — slight mismatch acceptable.

OK let me write the final code. Ensure ids referenced exist.

Also note: style selectors like #rig.ollie ... fine.

Add pointer-events none on vignette and HUD so clicks pass through to window (any click triggers trick via window listener anyway).

Let me produce the final file now. It'll be lengthy but that's fine.

Double-check gradient ids used: skyGrad, nebA, nebB, earthGrad, earthGlow, termGrad, moonGrad, glassGrad, wheelGrad, glowGrad, shootGrad, vignGrad, craterFloor maybe simple fills.

deckGrad? Use flat.

OK go. Also include preserveAspectRatio.

One more: <style> inside SVG is subject to CDATA for '>' etc — CSS contains '>' but inside CDATA is fine.

I'll write out star circles compactly, one per line.

Also class names: tw with custom prop: style="--d:2.8s;animation-delay:.3s". CSS: .tw{animation:twinkle var(--d,3s) ease-in-out infinite}.

Delivering.