nav: home-link glyph to inline SVG (Feather-style house)

Author: jdalton

scripts/walkthrough.mts

@@ -602,7 +602,7 @@ async function generate(
     ) {
       html = html.replace(
         '<div class="part-nav">',
-        '<div class="part-nav"><a class="wt-home-link" href="/" aria-label="Back to the walkthrough index" title="Back to index">⌂</a>',
+        '<div class="part-nav"><a class="wt-home-link" href="/" aria-label="Back to the walkthrough index" title="Back to index"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 9.5 12 3l9 6.5V20a2 2 0 0 1-2 2h-4v-7h-6v7H5a2 2 0 0 1-2-2z"/></svg></a>',
       )
     }
 

walkthrough-overrides.css

@@ -704,12 +704,16 @@ body.wt-ready .topbar-actions {
 .topbar .part-nav a.wt-home-link {
   border-color: rgba(255, 255, 255, 0.55) !important;
   margin-right: 8px;
-  /* ⌂ (U+2302) renders small at body size — bump the glyph alone so
-   * it carries the same visual weight as the numbered part pills. */
-  font-size: 18px;
-  line-height: 1;
-  padding-top: 2px;
-  padding-bottom: 2px;
+  /* Tighten padding so the inline SVG icon sits at the same visual
+   * height as the numbered pill labels — the icon's 16px square
+   * otherwise runs taller than the text row. */
+  display: inline-flex;
+  align-items: center;
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+.topbar .part-nav a.wt-home-link svg {
+  display: block;
 }
 /* "Parts:" label prepended by walkthrough-drag.js once the topbar has
  * mounted. Eight numbered pills read as repetitive "Part 1 Part 2 Part