510「대신 답하는 동글이」 캐릭터 Q&A — 동그란 캐릭터가 손님 질문 셋에 팻말을 뒤집어 답하는 23초

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: "【이름】"
Greeting: "【인사 한 줄】" — words wrapped in *asterisks* are the emphasis words
Question 1: "【질문 1】" / Answer 1: "【답 1】"
Question 2: "【질문 2】" / Answer 2: "【답 2】"
Question 3: "【질문 3】" / Answer 3: "【답 3】"
End text: "【끝 안내】" — default: the name
Character color: "【동글이 색】"
  노랑 = body #FFD24A, background #FFF4D6, shine #FFE48C
  민트 = body #7FD8C0, background #E6F7F1, shine #B5ECDD
  분홍 = body #FF9EBB, background #FFEAF0, shine #FFC6D6
Ink #2A2233, accent #F05A2A, question badge blue #2F5BFF. Tempo: "【박자】" — default 120 BPM. Aspect ratio: Output size 1080x1920 pixels, 9:16 portrait story. Keep all text inside the central 80% of the height: compress every zone percentage below into the 10-90% range. (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 동글이" 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 "또 물어보세요!" 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), Nanum Myeongjo 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 Korean labels: text inputs for every text input, selects for color, tempo and ratio, play/pause, a scrubber, and a "설정 복사" 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: compress every zone percentage below into the 10-90% range.
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.