Fix the flat drop on Linux and morph its play/pause in one shape

The kick wave in the vertex shader squared a negative number with pow(), which
GLSL leaves undefined. Mesa returns NaN there, so on Linux the drop's position
pinned to the clamp: it stayed a plain round sphere without wobble, and its
normals split it into a dark yin-yang. The squares are written out now, and the
normal comes from the slope of the displacement instead of two whole positions.

The play/pause icon is one shape whose corners move: each pause bar turns into
half of the play triangle, with a small swing in between, instead of two icons
faded over each other. It sits on a disc of frosted artwork with a lit rim, and a
ring round it shows the track's progress, or runs while the track loads, which
replaces the flat spinner. The surface calms down under the icon gradually
instead of jumping flat, a double-tap no longer flickers the icon, and a mouse
resting on the playing drop shows the pause bars faintly.

Also:
- Low-density desktop screens render the drop at twice the resolution.
- Quality steps follow the display's own frame rate and step back up again.
- A lost WebGL context brings the drop back once it is restored.
- A paused drop keeps breathing at a low frame rate on desktop.
- Without Web Audio (iOS) jumps in the waveform count as kicks, so the drop lands on drops there too.
- Artists without an image get their own colour from their name, so their drop no longer sinks into the page.
- z toggles zen mode: just the drop, bigger, and the music.

web/src/cards.ts

@@ -2,7 +2,7 @@
 // and dropped again once it is far behind, so a long session stays light.
 
 import { type Track, artistImg, artistUrl, trackUrl } from "./api";
-import { accentFor } from "./color";
+import { accentFor, accentForName } from "./color";
 
 export interface CardActions {
   like(card: Card): void;
@@ -72,6 +72,7 @@ export class Card {
       });
     } else {
       $(".initial").textContent = (t.artist_name || "?")[0].toUpperCase();
+      el.style.setProperty("--card-accent", accentForName(t.artist_name || "?"));
     }
 
     $(".why").textContent = this.whyText();