I want to build a self-contained html/js/css file explainer page as close as possible to this explainer: https://explainers.blog/posts/why-is-the-sky-blue/

What I want you to do is this: - Install playwright and chromium headless to take screenshots of https://explainers.blog/posts/why-is-the-sky-blue/ and interact with the page to deeply understand its style, aesthetics, tone, interactivity, visuals, fonts, etc. - Make comprehensive notes of what you observe so you can implement EXACTLY that when building your explainer - Then on the topic provided below plan to build an explainer with similar length, quality, interactivity, writing style, fun, informative as the article given - produce animations in svg (or otherwise) and interactions as necessary. Similar colour scheme but fun/vibrant/happy. Be very very creative. Act like an expert UI/UX designer who can build stunning explainers. Target it for intelligent hacker-news reader. - Get your plan verified by codex - Produce page one small change at a time. Don't output big chunks in one go. But pay extra attention to number of sections and length of the explained. I want it to be as comprehensive as possible (don't skimp on length) - Keep testing what you produce via playwright on chromium headless.

After you’re finished with index.html, can you check via chromium that all animations, diagrams and interactions that they match with their captions and are visually ok (not too small, large, overlapping, etc.). Sometimes there are factual errors in what the caption or text says and what the diagram suggests.

Topic: diffusion models from first principles

# Codex Verification Skill

Use OpenAI Codex as an independent reviewer via `codex exec`.

## How to Call Codex

*Standard pattern with answer extraction:* ```bash CODEX_OUTPUT=$(timeout 120 codex exec '<your prompt here>. Put your complete analysis inside <answer></answer> tags.' 2>/dev/null)

One can always give it the CLI and keys to any service, chat bot or otherwise