Cleanup and Optimisations

[jamesb93]

This is a PR that has been on my mind for years now :) In some places in the codebase, I've noticed we repeat ourselves or diverge slightly in style. We have no consistent radius values and it makes the design feel noisy. I've felt like the design could be systematised using a conventional CSS variable approach to help mitigate against this and to make it easier for people to author content without having to think about what the "correct" value are to use. They should just be implicit. Having all of these style variables: colour, radii, margins, etc., located in a single location can help eliminate small discrepancies across the numerous widgets and components we have. This is part of a longer term vision to harmonise the styles of the demonstrative widgets and to make them accessible.

So, this PR is the start of that work with some minor adjustments and improvements along the way.

The first big change is to lazy-load the heavy JS libraries we depend on for ML-tasks that run on the client (7a6933c). This is orthogonal, but I noticed while testing styling that loading could be much faster with dynamic imports which create smaller and more fragmented chunks at build time.

There is a design-tokens.css file which defines the style variables. Everything else pulls from this now where it makes sense. Still a few gaps here and adjustments, but overall much easier to change things.

I've also made an effort to update the style of things that were feeling a bit out of date. For example, the table of contents now moves as you scroll, rather than sticking to the top of the page (which is kind of useless).

The related resources component has a more bold style and distinct boundary. Lists of these were quite hard to parse, visually, but are demarcated more clearly now:

Podcast chapters are vertically more compacted. It is contentious that we should even have these, given YouTube provides it as part of their UI. Often you cannot see the video while clicking these because there are so many:

The link pills are a bit more exciting to look at, and because of the design system are harmonised with all other round looking things, like cards on the front page: