Drop the chrome title, waveform and logo, the grain and the Unbounded font

Back to the plain bold title, the drawn waveform and the system font from
before the metal look. The spiky drop and its glow, the pre-blurred
backgrounds, the --energy fix, ?debug=drop and the desktop layout stay.

web/src/main.ts

@@ -1,5 +1,4 @@
 import "./style.css";
-import "@fontsource-variable/unbounded";
 
 import * as api from "./api";
 import type { Filters, Mode, Pl8Status, Stats, Track, User } from "./api";
@@ -56,8 +55,6 @@ const sheets = {
 if ("serviceWorker" in navigator && import.meta.env.PROD) {
   navigator.serviceWorker.register("/sw.js", { scope: "/" }).catch((err) => console.warn("no service worker:", err));
 }
-paintGrain();
-
 const cards: Card[] = [];
 let active = -1;
 let loading = false;
@@ -1143,24 +1140,6 @@ function signedIn(user: User, pl8list?: Pl8Status): void {
   if (!cards.length) openLinkOrFeed();
 }
 
-/// The tile of film grain the stylesheet lays under the page's content: faint
-/// specks, each a little lighter or darker than what is under it.
-function paintGrain(): void {
-  const size = 128;
-  const c = document.createElement("canvas");
-  c.width = c.height = size;
-  const ctx = c.getContext("2d");
-  if (!ctx) return;
-  const img = ctx.createImageData(size, size);
-  for (let i = 0; i < img.data.length; i += 4) {
-    const v = Math.random() < 0.5 ? 0 : 255;
-    img.data[i] = img.data[i + 1] = img.data[i + 2] = v;
-    img.data[i + 3] = Math.random() * 30;
-  }
-  ctx.putImageData(img, 0, 0);
-  document.documentElement.style.setProperty("--grain", `url(${c.toDataURL()})`);
-}
-
 /// `/?t=handle/slug` opens on that track; the feed carries on after it.
 async function openLinkOrFeed(): Promise<void> {
   const link = new URLSearchParams(location.search).get("t")?.split("/");