510「代わりに答えるドングリ」キャラQ&A — 丸いキャラが札をひっくり返してお客さんの質問3つに答える約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: 出力サイズは1080×1920ピクセル、9:16の縦型にしてください。文字は中央の安全な範囲に収めてください。 (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 JP (900 for bubbles and signs), Noto Serif JP 800 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 Japanese 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]
出力サイズは1080×1920ピクセル、9:16の縦型にしてください。文字は中央の安全な範囲に収めてください。
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.