Problem Description — Interactive Step-by-Step Walkthroughs

Overview

Generate a self-contained HTML page that explains a technical problem using:

• Concrete data — real names, real numbers, culturally appropriate context (e.g., Thai names for Thai users)
• Manual step-through navigation — Next →, ← Previous, ↻ Reset buttons. Reader controls pace.
• Visual state changes — at each step, the right thing highlights and the reader can point at it
• Color-coded narration — info / warn / error / success / magic boxes explaining what fires + WHY

Core principle: The reader should be able to point to any specific element at each step and say "yes I understand why this is in this state right now."

Output location — REQUIRED (do this, don't default elsewhere)

The finished .html must land inside the project/workspace the user has open in their editor. Identify that project from the workspace the user is working in — not from your own current working directory, which on some harnesses (e.g. Antigravity) is an agent scratch/sandbox dir that is different from the user's project. Save it to: