feat: add logo, PWA manifest, favicon

- Geometric Companion logo: rounded head, blue outline, green eyes,
  green antenna tip. SVG for crisp rendering at any size.
- Logo appears in header next to site name
- PWA manifest (manifest.json) with 192px and 512px PNG icons
- Favicon (favicon.ico) for browser tab
- Apple touch icon for iOS home screen
- README: logo replacement instructions for whitelabeling

To replace the logo for whitelabeling, just swap frontend/logo.svg
and the icon PNGs. Update <link> tags in index.html if filename changes.

frontend/style.css

@@ -71,6 +71,7 @@ header .breadcrumb {
 }
 header .breadcrumb .prompt { color: var(--green-bright); font-weight: normal; }
 header .breadcrumb:hover { text-decoration: none; }
+.header-logo { width: 22px; height: 26px; flex-shrink: 0; margin-right: 2px; }
 header .crumb-path {
   font-size: 11px;
   color: var(--ink-dim);
@@ -246,8 +247,8 @@ header nav a.active { color: var(--accent-bright); border-color: rgba(0,170,255,
   font-size: 13px; color: var(--ink-soft); font-family: var(--sans);
   word-break: break-word; line-height: 1.4;
 }
-.protocol-pill .meta { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); text-align: right; flex: 0 0 auto; max-width: 140px; }
-.protocol-pill .meta .steps { color: var(--accent); font-weight: bold; white-space: nowrap; }
+.protocol-pill .meta { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); text-align: right; flex-shrink: 0; white-space: nowrap; }
+.protocol-pill .meta .steps { color: var(--accent); font-weight: bold; }
 .protocol-pill.collection {
   background: var(--ink); color: #fff; border-color: var(--accent-deep);
 }