Eye favicon, dark-mode hero outline, compact badges

- Favicon/small mark: replace with a simple blue gradient tile + centered
  octopus eye (octopus-icon.svg). Reads clearly down to 16px while still
  echoing the hero mascot; PNG fallbacks regenerated to match
- Hero: in dark mode, add a white sticker outline so the octopus and its
  tentacles separate from the dark background
- Badges: smaller padding/font/icons so they fit on one or two lines

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: SharonHart

public/apple-touch-icon.png

@@ -669,6 +669,16 @@ const posts = (await getCollection("docs"))
         height: auto;
         filter: drop-shadow(0 16px 38px rgba(13, 17, 23, 0.28));
       }
+      /* Dark mode: a white sticker outline so the octopus (and its tentacles)
+         separate cleanly from the dark background */
+      :root[data-theme="dark"] .hero-logo {
+        filter:
+          drop-shadow(1.4px 0 0 #fff) drop-shadow(-1.4px 0 0 #fff)
+          drop-shadow(0 1.4px 0 #fff) drop-shadow(0 -1.4px 0 #fff)
+          drop-shadow(1px 1px 0 #fff) drop-shadow(-1px -1px 0 #fff)
+          drop-shadow(1px -1px 0 #fff) drop-shadow(-1px 1px 0 #fff)
+          drop-shadow(0 18px 34px rgba(0, 0, 0, 0.55));
+      }
       /* Inky gently breathes — decorative, disabled under reduced motion */
       @media (prefers-reduced-motion: no-preference) {
         .hero-logo { animation: float 8s var(--ease-in-out) infinite; }
@@ -715,28 +725,28 @@ const posts = (await getCollection("docs"))
         padding: 0;
         display: flex;
         flex-wrap: wrap;
-        gap: 0.5rem;
+        gap: 0.4rem;
       }
       @media (max-width: 880px) { .badges { justify-content: center; } }
       .badges li {
         display: inline-flex;
         align-items: center;
-        gap: 0.4rem;
-        padding: 0.34rem 0.72rem;
+        gap: 0.32rem;
+        padding: 0.28rem 0.62rem;
         border: 1px solid var(--card-border);
         border-radius: 999px;
         background: var(--card-bg);
         color: var(--text-muted);
         font-family: var(--dps-font-display);
         font-weight: 600;
-        font-size: 0.8rem;
+        font-size: 0.72rem;
         line-height: 1;
         transition:
           color 200ms var(--ease-out),
           border-color 200ms var(--ease-out),
           background 200ms var(--ease-out);
       }
-      .badges li svg { color: var(--accent); flex-shrink: 0; }
+      .badges li svg { color: var(--accent); flex-shrink: 0; width: 14px; height: 14px; }
       @media (hover: hover) and (pointer: fine) {
         .badges li:hover { color: var(--text); border-color: var(--accent); }
       }