Name each install, fix the notification badge, switch to Archivo

- Settings > General: an App name (super admin) for the installed app.
  The manifest's name/short_name, the iOS head tags and the loading
  page's title use it, so two installs on one phone can be told apart.
- Notifications get a real badge (white stone silhouette): Android masks
  the badge by alpha, so the opaque app icon showed as a square.
- The loading and offline pages load the app's font.
- The font is now Archivo (variable, one request for every weight),
  matching the marketing site.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

public/loading.html

@@ -5,8 +5,11 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
 <meta name="theme-color" content="#fbfaf7" />
 <meta name="robots" content="noindex" />
-<title>cobble</title>
+<title>{{name}}</title>
 <link rel="manifest" href="/manifest.webmanifest" />
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo:[email protected]&display=swap" />
 <style>
 :root {
     --paper: #fbfaf7;
@@ -33,7 +36,7 @@ body {
     padding: calc(24px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));
     background: var(--paper);
     color: var(--ink);
-    font-family: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
+    font-family: "Archivo", "Liberation Sans", system-ui, -apple-system, sans-serif;
     -webkit-font-smoothing: antialiased;
 }
 main {