510Donggeuli answers" character Q&A — a round mascot flips a sign to answer three customer questions, about 23 seconds

Make a vertical character Q&A video (about 23 seconds) as one self-contained HTML file, and render it to MP4 with sound. It must look like a premium mascot animation from a top motion studio: a round, flat, sticker-style character named Donggeuli answers three customer questions by flipping a sign on a stick. Do the whole job now without asking questions.

[Inputs (use the default when empty)]
Name: "【Name】"
Greeting: "【Greeting】" — words wrapped in *asterisks* are the emphasis words
Question 1: "【Question 1】" / Answer 1: "【Answer 1】"
Question 2: "【Question 2】" / Answer 2: "【Answer 2】"
Question 3: "【Question 3】" / Answer 3: "【Answer 3】"
End text: "【End text】" — default: the name
Character color: "【Character color】"
  Yellow = body #FFD24A, background #FFF4D6, shine #FFE48C
  Mint = body #7FD8C0, background #E6F7F1, shine #B5ECDD
  Pink = body #FF9EBB, background #FFEAF0, shine #FFC6D6
Ink #2A2233, accent #F05A2A, question badge blue #2F5BFF. Tempo: "【Tempo】" — default 120 BPM. Aspect ratio: Output size 1080x1920 pixels, 9:16 portrait story. Keep all text inside the central 80% of the height. (default 9:16).

[The character — drawn only with shapes]
A circle body with a thick ink outline and a soft shine, two big black oval eyes with two white highlights each, pink cheeks, a small mouth, short rounded arms with round hands (outlined), two dark oval feet, a soft floor shadow. Expressions: blink (eyes close to a line) every few seconds, smile, small "o" mouth when thinking, open happy mouth with a pink tongue, happy closed eyes (∩) when delighted. It squashes on landing and stretches on jumps. Background: the pale color with slowly drifting dots and a soft floor ellipse.

[Structure — 5 scenes; each Q&A scene is long enough to read both lines]
1. Hello: the character drops from the top and bounces in (bounce ease, squash on landing), waves its left arm, a small mono label "name Donggeuli" and a speech bubble with the greeting pop in.
2–4. Q&A: a white speech bubble with a blue "Q" badge pops in at the top and the question types in; the character looks aside and tilts its head with a blue "?" above; then it raises a wooden stick with a sign — the sign shows its blank back first, flips like a card (horizontal scale through zero) and reveals the answer in heavy sans with the emphasis words in the accent serif, a small "A1/A2/A3" label in the corner; the character jumps with happy eyes and sparks burst around the sign.
5. End: the character raises the sign with the end text, waves goodbye with its left arm, a small line "Ask us anytime!" at the top.
A thin progress bar of 5 segments runs along the top.

[Sound]
If you can generate music, make a cheerful instrumental at the tempo. If you cannot, write the backing track yourself in code — synthesize an original instrumental sample by sample into a WAV (bright major pop: kick on every beat, snare on 2 and 4, eighth-note hi-hats, a bouncy bass on the chord roots, a soft chord pad that ducks on the kick, a light sixteenth-note arpeggio, a short echo), four chords looping, with only pad and hats during the hello and the full band from the first question. Never use a placeholder or someone else's recording.

[Build]
One HTML file, everything on a single canvas, fonts Noto Sans KR (900 for bubbles and signs, it also covers Latin), a serif 800 italic-style emphasis, IBM Plex Mono (labels). The script starts with a `const CONFIG` object holding every input plus fps 60 and a seed. All drawing comes from a pure `seek(t)` — no timers, no CSS animation, randomness only from the seed — so any frame renders identically. Scene lengths follow reading time (about 7 Korean characters per second plus a short pause). A settings panel above the preview (hidden with ?render=1) with English labels: text inputs for every text input, selects for color, tempo and ratio, play/pause, a scrubber, and a "Copy settings" button that copies CONFIG as code. Edits re-render instantly.
Write render.mjs: open the page with ?render=1 in headless Chromium (Playwright), wait for document.fonts.ready, step seek(frame / 60) through every frame with a light motion blur, screenshot the canvas at 1080 px on the short side, pipe into ffmpeg (libx264, yuv420p, crf 18), then mux the audio as AAC into motion.mp4. Close the browser at the end. Accept an optional JSON file argument that overrides CONFIG.

[Check before finishing]
Render, export two frames from every scene into a contact sheet and look at it, and confirm the MP4 has an audio stream with sensible loudness: the sign never covers the question bubble, every answer fits on the sign in one or two lines, the character's face stays readable in every expression. Fix and re-render if anything fails. Finish with the file paths and the single command to re-render after editing settings.

[Final output format]
Output size 1080x1920 pixels, 9:16 portrait story. Keep all text inside the central 80% of the height.
This selected output format takes priority over any fixed canvas size or aspect ratio elsewhere in this template. Adapt the composition, text zones and margins to the selected canvas without stretching or cropping essential content. Device safe areas apply only when a device is selected. Never print these format instructions on the image.