Guides: tutorial pictures at 2x, and each tutorial's clip as a short film

[FavioVazquez]

The studio and first-video tutorials looked soft on a 2x screen: 1280 px stills, 820 px terminals, and a few-fps animated WebP clip at the top. This redoes their media.

Pictures. Each step is captured again at 2x or more and cropped to what the step is about. Full-column pictures are at least 2048 px wide, and terminals are lossless WebP. On a 1440-wide page at 2x, every picture is 2.4x to 3.8x its shown width.

Clip → film. The top of each guide now has an 18-second silent film made with showtime: 1920x1080, 30 fps, H.264, under 8 MB. It uses eased pans and zooms over the 2x pictures, a numbered label for each step, and the key line of each step marked. The films and their posters live in showtime-examples (FavioVazquez/showtime-examples#2). Merge that one first: here the guides link each poster at its raw address there.

Build. A guide marks its film with <!-- video: examples/_tutorials/<tutorial>/clip.mp4 --> over a linked poster. On GitHub you see the poster, linked to the guide's site page. site/build.py (Site.guide_videos) turns the pair into <video controls muted loop playsinline preload="metadata" poster>, with a link to the mp4 inside for a browser that plays no video. When the film is not in the build, the poster stays and links to the film.

Tests. test_site_build checks every tutorial picture's real width (at least 2048 px, or twice its shown width) and that terminal pictures are lossless. Where the examples are present, it also checks the film against the spec, read from the mp4's own boxes: 1920x1080, about 30 fps, no audio, 15-20 s, under 8 MiB. Synthetic files cover each failure case.

The old clip.webp files are removed.

Before and after, at the size a 2x screen shows them: