Better screenshots for CLS

**Feature request summary**

At the moment for CLS we show a tiny screenshot of the area affected and give the score and reasons:

Other tools show side by side:

DebugBear:

WebPageTest:

Often with nice animations when you hover over them, or GIFs to show them moving.

We have all the data in the Lighthouse audit to show this but don't.

**What is the motivation or use case for changing this?**

If we showed this, it would make CLS data easier to understand.

We hear complaints that Lighthouse and PSI are not useful for debugging CLS ([example](https://www.youtube.com/watch?v=O3h016znwy8&t=1701s).

**How is this beneficial to Lighthouse?**

It makes Lighthouse more useful to debug one of the three Core Web Vitals, which would also be surfaced in PageSpeed Insights, often used by less technical users than those using Performance Panel.

Start by reviewing docs/new-audits.md and the current CLS audit output described in the issue. Determine which existing CLS data can support side-by-side screenshots or animation, then define the presentation and debugging behavior before implementation. Done means the CLS audit makes layout shifts substantially easier to understand.

Written by the indexing model from the issue text.