docs: redesign README with custom visuals (#19)

sofq · web-flow · commit 2f98a533ec38 · 2026-04-07T22:12:02.000+07:00
Hand-crafted SVG banner (light + dark), logo, and divider built around
a conduit/compression metaphor. Adds a Mermaid mental-model diagram,
6-icon feature grid, install matrix, and a unified structure for
commands, configuration, security, and agent integration.
diff --git a/.github/readme/banner-dark.svg b/.github/readme/banner-dark.svg
@@ -0,0 +1,142 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 260" width="900" height="260">
+  <defs>
+    <!-- Deep background gradient: ink with a cool violet tint at the entry, cooler at exit -->
+    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1" color-interpolation="linearRGB">
+      <stop offset="0" stop-color="#0b0f1a"/>
+      <stop offset="0.55" stop-color="#0d1322"/>
+      <stop offset="1" stop-color="#0b0f1a"/>
+    </linearGradient>
+
+    <!-- Violet diffuse stream (entry) - wide and soft -->
+    <linearGradient id="streamIn" x1="0" y1="0.5" x2="1" y2="0.5" color-interpolation="linearRGB">
+      <stop offset="0" stop-color="#7c5cff" stop-opacity="0"/>
+      <stop offset="0.25" stop-color="#7c5cff" stop-opacity="0.35"/>
+      <stop offset="0.75" stop-color="#8f6fff" stop-opacity="0.55"/>
+      <stop offset="1" stop-color="#a188ff" stop-opacity="0.7"/>
+    </linearGradient>
+
+    <!-- Compression transition gradient: violet -> teal -> green, with hue shifts -->
+    <linearGradient id="compress" x1="0" y1="0" x2="1" y2="0" color-interpolation="linearRGB">
+      <stop offset="0" stop-color="#7c5cff"/>
+      <stop offset="0.35" stop-color="#6a7dff"/>
+      <stop offset="0.6" stop-color="#4cc9b0"/>
+      <stop offset="1" stop-color="#3ddc97"/>
+    </linearGradient>
+
+    <!-- Output beam - tight green -->
+    <linearGradient id="beam" x1="0" y1="0.5" x2="1" y2="0.5" color-interpolation="linearRGB">
+      <stop offset="0" stop-color="#3ddc97" stop-opacity="0.0"/>
+      <stop offset="0.2" stop-color="#3ddc97" stop-opacity="0.9"/>
+      <stop offset="1" stop-color="#6bf0b4" stop-opacity="1"/>
+    </linearGradient>
+
+    <!-- Aperture slate fill -->
+    <linearGradient id="aperture" x1="0" y1="0" x2="0" y2="1" color-interpolation="linearRGB">
+      <stop offset="0" stop-color="#1a2236"/>
+      <stop offset="0.5" stop-color="#202a42"/>
+      <stop offset="1" stop-color="#141b2c"/>
+    </linearGradient>
+
+    <!-- Restrained glow for the green beam -->
+    <filter id="beamGlow" color-interpolation-filters="linearRGB" x="-20%" y="-20%" width="140%" height="140%">
+      <feGaussianBlur stdDeviation="4" result="b1"/>
+      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="b2"/>
+      <feMerge>
+        <feMergeNode in="b2"/>
+        <feMergeNode in="b1"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+
+    <!-- Soft blur for the diffuse entry stream -->
+    <filter id="softBlur" color-interpolation-filters="linearRGB" x="-20%" y="-20%" width="140%" height="140%">
+      <feGaussianBlur stdDeviation="18"/>
+    </filter>
+
+    <!-- Background mesh stroke gradient -->
+    <linearGradient id="mesh" x1="0" y1="0" x2="1" y2="0" color-interpolation="linearRGB">
+      <stop offset="0" stop-color="#1a2236" stop-opacity="0.0"/>
+      <stop offset="0.5" stop-color="#2b3450" stop-opacity="1"/>
+      <stop offset="1" stop-color="#1a2236" stop-opacity="0.0"/>
+    </linearGradient>
+  </defs>
+
+  <!-- Base -->
+  <rect width="900" height="260" fill="url(#bg)"/>
+
+  <!-- Distant mesh: diagonal strokes at varied opacity -->
+  <g stroke="url(#mesh)" stroke-width="1" fill="none">
+    <line x1="-40" y1="40" x2="940" y2="10" opacity="0.08"/>
+    <line x1="-40" y1="90" x2="940" y2="58" opacity="0.05"/>
+    <line x1="-40" y1="140" x2="940" y2="108" opacity="0.09"/>
+    <line x1="-40" y1="190" x2="940" y2="160" opacity="0.04"/>
+    <line x1="-40" y1="230" x2="940" y2="208" opacity="0.07"/>
+  </g>
+  <!-- A few counter diagonals for irregularity -->
+  <g stroke="#2b3450" stroke-width="1" fill="none" opacity="0.06">
+    <line x1="360" y1="-20" x2="520" y2="280"/>
+    <line x1="600" y1="-20" x2="720" y2="280"/>
+  </g>
+
+  <!-- Wide diffuse violet stream entering from the left -->
+  <g filter="url(#softBlur)" opacity="0.9">
+    <ellipse cx="460" cy="130" rx="240" ry="72" fill="url(#streamIn)"/>
+  </g>
+
+  <!-- Conduit core: a narrowing trapezoid carrying the compressed gradient -->
+  <path d="M 340,92 L 860,124 L 860,136 L 340,168 Z" fill="url(#compress)" opacity="0.22"/>
+
+  <!-- Aperture 1 (widest) -->
+  <g transform="translate(400,130) rotate(-8)">
+    <rect x="-14" y="-70" width="22" height="140" rx="2" fill="url(#aperture)" stroke="#2d3a5a" stroke-width="1"/>
+    <rect x="-14" y="-70" width="22" height="6" fill="#7c5cff" opacity="0.35"/>
+    <rect x="-14" y="64" width="22" height="6" fill="#7c5cff" opacity="0.35"/>
+  </g>
+
+  <!-- Aperture 2 -->
+  <g transform="translate(520,130) rotate(6)">
+    <rect x="-12" y="-54" width="20" height="108" rx="2" fill="url(#aperture)" stroke="#34406a" stroke-width="1"/>
+    <rect x="-12" y="-54" width="20" height="5" fill="#8a73ff" opacity="0.45"/>
+    <rect x="-12" y="49" width="20" height="5" fill="#8a73ff" opacity="0.45"/>
+  </g>
+
+  <!-- Aperture 3 -->
+  <g transform="translate(640,130) rotate(-5)">
+    <rect x="-10" y="-38" width="18" height="76" rx="2" fill="url(#aperture)" stroke="#3c4a78" stroke-width="1"/>
+    <rect x="-10" y="-38" width="18" height="4" fill="#5dd3b3" opacity="0.55"/>
+    <rect x="-10" y="34" width="18" height="4" fill="#5dd3b3" opacity="0.55"/>
+  </g>
+
+  <!-- Aperture 4 (tightest) -->
+  <g transform="translate(740,130) rotate(4)">
+    <rect x="-8" y="-22" width="16" height="44" rx="2" fill="url(#aperture)" stroke="#3f5376" stroke-width="1"/>
+    <rect x="-8" y="-22" width="16" height="3" fill="#3ddc97" opacity="0.8"/>
+    <rect x="-8" y="19" width="16" height="3" fill="#3ddc97" opacity="0.8"/>
+  </g>
+
+  <!-- Output crystalline beam -->
+  <g filter="url(#beamGlow)">
+    <path d="M 750,128 L 860,125 L 860,135 L 750,132 Z" fill="url(#beam)"/>
+  </g>
+  <!-- Tiny crystalline facets at exit -->
+  <g fill="#3ddc97" opacity="0.95">
+    <polygon points="852,118 866,130 852,142 844,130"/>
+  </g>
+  <g fill="#6bf0b4" opacity="0.8">
+    <polygon points="838,124 846,130 838,136 832,130"/>
+  </g>
+
+  <!-- "cf" wordmark -->
+  <g font-family="'Segoe UI', system-ui, -apple-system, sans-serif">
+    <text x="80" y="147" font-size="96" font-weight="700" fill="#e8e9f3" letter-spacing="-4">cf</text>
+    <text x="82" y="180" font-size="14" font-weight="400" fill="#9aa0b8" letter-spacing="2.4">the confluence cli that speaks json</text>
+  </g>
+
+  <!-- Subtle tick marks near the output, hinting at "determinism" -->
+  <g stroke="#3ddc97" stroke-width="1" opacity="0.45">
+    <line x1="710" y1="98" x2="720" y2="98"/>
+    <line x1="722" y1="98" x2="736" y2="98"/>
+    <line x1="710" y1="164" x2="728" y2="164"/>
+    <line x1="732" y1="164" x2="742" y2="164"/>
+  </g>
+</svg>
diff --git a/.github/readme/banner.svg b/.github/readme/banner.svg
@@ -0,0 +1,142 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 260" width="900" height="260">
+  <defs>
+    <!-- Light bone background with very subtle warm/cool gradient -->
+    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1" color-interpolation="linearRGB">
+      <stop offset="0" stop-color="#f7f8fc"/>
+      <stop offset="0.55" stop-color="#f1f3fb"/>
+      <stop offset="1" stop-color="#f7f8fc"/>
+    </linearGradient>
+
+    <!-- Violet diffuse stream (entry) - wide and soft -->
+    <linearGradient id="streamIn" x1="0" y1="0.5" x2="1" y2="0.5" color-interpolation="linearRGB">
+      <stop offset="0" stop-color="#7c5cff" stop-opacity="0"/>
+      <stop offset="0.25" stop-color="#7c5cff" stop-opacity="0.30"/>
+      <stop offset="0.75" stop-color="#8f6fff" stop-opacity="0.45"/>
+      <stop offset="1" stop-color="#a188ff" stop-opacity="0.55"/>
+    </linearGradient>
+
+    <!-- Compression transition gradient: violet -> teal -> green, with hue shifts -->
+    <linearGradient id="compress" x1="0" y1="0" x2="1" y2="0" color-interpolation="linearRGB">
+      <stop offset="0" stop-color="#7c5cff"/>
+      <stop offset="0.35" stop-color="#6a7dff"/>
+      <stop offset="0.6" stop-color="#4cc9b0"/>
+      <stop offset="1" stop-color="#3ddc97"/>
+    </linearGradient>
+
+    <!-- Output beam - tight green -->
+    <linearGradient id="beam" x1="0" y1="0.5" x2="1" y2="0.5" color-interpolation="linearRGB">
+      <stop offset="0" stop-color="#3ddc97" stop-opacity="0.0"/>
+      <stop offset="0.2" stop-color="#3ddc97" stop-opacity="0.95"/>
+      <stop offset="1" stop-color="#1da76b" stop-opacity="1"/>
+    </linearGradient>
+
+    <!-- Aperture slate fill (mid-tone for light bg, still slate-feel) -->
+    <linearGradient id="aperture" x1="0" y1="0" x2="0" y2="1" color-interpolation="linearRGB">
+      <stop offset="0" stop-color="#2a3550"/>
+      <stop offset="0.5" stop-color="#1a2236"/>
+      <stop offset="1" stop-color="#0f1626"/>
+    </linearGradient>
+
+    <!-- Restrained glow for the green beam -->
+    <filter id="beamGlow" color-interpolation-filters="linearRGB" x="-20%" y="-20%" width="140%" height="140%">
+      <feGaussianBlur stdDeviation="4" result="b1"/>
+      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="b2"/>
+      <feMerge>
+        <feMergeNode in="b2"/>
+        <feMergeNode in="b1"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+
+    <!-- Soft blur for the diffuse entry stream -->
+    <filter id="softBlur" color-interpolation-filters="linearRGB" x="-20%" y="-20%" width="140%" height="140%">
+      <feGaussianBlur stdDeviation="18"/>
+    </filter>
+
+    <!-- Background mesh stroke gradient -->
+    <linearGradient id="mesh" x1="0" y1="0" x2="1" y2="0" color-interpolation="linearRGB">
+      <stop offset="0" stop-color="#c8cfe4" stop-opacity="0.0"/>
+      <stop offset="0.5" stop-color="#b3bcd6" stop-opacity="1"/>
+      <stop offset="1" stop-color="#c8cfe4" stop-opacity="0.0"/>
+    </linearGradient>
+  </defs>
+
+  <!-- Base -->
+  <rect width="900" height="260" fill="url(#bg)"/>
+
+  <!-- Distant mesh: diagonal strokes at varied opacity -->
+  <g stroke="url(#mesh)" stroke-width="1" fill="none">
+    <line x1="-40" y1="40" x2="940" y2="10" opacity="0.30"/>
+    <line x1="-40" y1="90" x2="940" y2="58" opacity="0.18"/>
+    <line x1="-40" y1="140" x2="940" y2="108" opacity="0.32"/>
+    <line x1="-40" y1="190" x2="940" y2="160" opacity="0.14"/>
+    <line x1="-40" y1="230" x2="940" y2="208" opacity="0.24"/>
+  </g>
+  <!-- A few counter diagonals for irregularity -->
+  <g stroke="#aab3cf" stroke-width="1" fill="none" opacity="0.22">
+    <line x1="360" y1="-20" x2="520" y2="280"/>
+    <line x1="600" y1="-20" x2="720" y2="280"/>
+  </g>
+
+  <!-- Wide diffuse violet stream entering from the left -->
+  <g filter="url(#softBlur)" opacity="0.85">
+    <ellipse cx="460" cy="130" rx="240" ry="72" fill="url(#streamIn)"/>
+  </g>
+
+  <!-- Conduit core: a narrowing trapezoid carrying the compressed gradient -->
+  <path d="M 340,92 L 860,124 L 860,136 L 340,168 Z" fill="url(#compress)" opacity="0.30"/>
+
+  <!-- Aperture 1 (widest) -->
+  <g transform="translate(400,130) rotate(-8)">
+    <rect x="-14" y="-70" width="22" height="140" rx="2" fill="url(#aperture)" stroke="#1a2236" stroke-width="1"/>
+    <rect x="-14" y="-70" width="22" height="6" fill="#7c5cff" opacity="0.55"/>
+    <rect x="-14" y="64" width="22" height="6" fill="#7c5cff" opacity="0.55"/>
+  </g>
+
+  <!-- Aperture 2 -->
+  <g transform="translate(520,130) rotate(6)">
+    <rect x="-12" y="-54" width="20" height="108" rx="2" fill="url(#aperture)" stroke="#1a2236" stroke-width="1"/>
+    <rect x="-12" y="-54" width="20" height="5" fill="#8a73ff" opacity="0.65"/>
+    <rect x="-12" y="49" width="20" height="5" fill="#8a73ff" opacity="0.65"/>
+  </g>
+
+  <!-- Aperture 3 -->
+  <g transform="translate(640,130) rotate(-5)">
+    <rect x="-10" y="-38" width="18" height="76" rx="2" fill="url(#aperture)" stroke="#1a2236" stroke-width="1"/>
+    <rect x="-10" y="-38" width="18" height="4" fill="#5dd3b3" opacity="0.75"/>
+    <rect x="-10" y="34" width="18" height="4" fill="#5dd3b3" opacity="0.75"/>
+  </g>
+
+  <!-- Aperture 4 (tightest) -->
+  <g transform="translate(740,130) rotate(4)">
+    <rect x="-8" y="-22" width="16" height="44" rx="2" fill="url(#aperture)" stroke="#1a2236" stroke-width="1"/>
+    <rect x="-8" y="-22" width="16" height="3" fill="#3ddc97" opacity="0.95"/>
+    <rect x="-8" y="19" width="16" height="3" fill="#3ddc97" opacity="0.95"/>
+  </g>
+
+  <!-- Output crystalline beam -->
+  <g filter="url(#beamGlow)">
+    <path d="M 750,128 L 860,125 L 860,135 L 750,132 Z" fill="url(#beam)"/>
+  </g>
+  <!-- Tiny crystalline facets at exit -->
+  <g fill="#1da76b" opacity="0.95">
+    <polygon points="852,118 866,130 852,142 844,130"/>
+  </g>
+  <g fill="#3ddc97" opacity="0.85">
+    <polygon points="838,124 846,130 838,136 832,130"/>
+  </g>
+
+  <!-- "cf" wordmark -->
+  <g font-family="'Segoe UI', system-ui, -apple-system, sans-serif">
+    <text x="80" y="147" font-size="96" font-weight="700" fill="#0b0f1a" letter-spacing="-4">cf</text>
+    <text x="82" y="180" font-size="14" font-weight="400" fill="#5b6280" letter-spacing="2.4">the confluence cli that speaks json</text>
+  </g>
+
+  <!-- Subtle tick marks near the output, hinting at "determinism" -->
+  <g stroke="#1da76b" stroke-width="1" opacity="0.55">
+    <line x1="710" y1="98" x2="720" y2="98"/>
+    <line x1="722" y1="98" x2="736" y2="98"/>
+    <line x1="710" y1="164" x2="728" y2="164"/>
+    <line x1="732" y1="164" x2="742" y2="164"/>
+  </g>
+</svg>
diff --git a/.github/readme/divider.svg b/.github/readme/divider.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 12" width="900" height="12">
+  <defs>
+    <linearGradient id="seg" x1="320" y1="0" x2="720" y2="0" gradientUnits="userSpaceOnUse" color-interpolation="linearRGB">
+      <stop offset="0" stop-color="#7c5cff" stop-opacity="0"/>
+      <stop offset="0.18" stop-color="#7c5cff" stop-opacity="1"/>
+      <stop offset="0.55" stop-color="#5fb6c8" stop-opacity="1"/>
+      <stop offset="0.85" stop-color="#3ddc97" stop-opacity="1"/>
+      <stop offset="1" stop-color="#3ddc97" stop-opacity="0"/>
+    </linearGradient>
+  </defs>
+  <!-- Slate baseline running full width -->
+  <line x1="0" y1="6" x2="900" y2="6" stroke="#1a2236" stroke-width="1" opacity="0.35"/>
+  <!-- Bright violet→green segment, asymmetric (offset right of center) -->
+  <line x1="320" y1="6" x2="720" y2="6" stroke="url(#seg)" stroke-width="2.5"/>
+</svg>
diff --git a/.github/readme/icon-batch.svg b/.github/readme/icon-batch.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="#7c5cff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"/><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"/><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"/></g></svg>
diff --git a/.github/readme/icon-jq.svg b/.github/readme/icon-jq.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="#3ddc97" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/></svg>
diff --git a/.github/readme/icon-package.svg b/.github/readme/icon-package.svg
@@ -0,0 +1 @@
+<svg fill="#7c5cff" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>npm</title><path d="M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z"/></svg>
diff --git a/.github/readme/icon-search.svg b/.github/readme/icon-search.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="#7c5cff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M3 7V5a2 2 0 0 1 2-2h2m10 0h2a2 2 0 0 1 2 2v2m0 10v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2"/><circle cx="12" cy="12" r="3"/><path d="m16 16l-1.9-1.9"/></g></svg>
diff --git a/.github/readme/icon-security.svg b/.github/readme/icon-security.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="#3ddc97" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="m9 12l2 2l4-4"/></g></svg>
diff --git a/.github/readme/icon-watch.svg b/.github/readme/icon-watch.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="#3ddc97" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M16.247 7.761a6 6 0 0 1 0 8.478m2.828-11.306a10 10 0 0 1 0 14.134m-14.15 0a10 10 0 0 1 0-14.134m2.828 11.306a6 6 0 0 1 0-8.478"/><circle cx="12" cy="12" r="2"/></g></svg>
diff --git a/.github/readme/logo.svg b/.github/readme/logo.svg
@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
+  <defs>
+    <linearGradient id="lg" x1="0" y1="0" x2="64" y2="64" gradientUnits="userSpaceOnUse" color-interpolation="linearRGB">
+      <stop offset="0" stop-color="#7c5cff"/>
+      <stop offset="0.55" stop-color="#5fb6c8"/>
+      <stop offset="1" stop-color="#3ddc97"/>
+    </linearGradient>
+    <linearGradient id="lgFade" x1="10" y1="0" x2="26" y2="0" gradientUnits="userSpaceOnUse" color-interpolation="linearRGB">
+      <stop offset="0" stop-color="#7c5cff" stop-opacity="0.0"/>
+      <stop offset="0.5" stop-color="#7c5cff" stop-opacity="0.55"/>
+      <stop offset="1" stop-color="#3ddc97" stop-opacity="0.55"/>
+    </linearGradient>
+  </defs>
+
+  <!-- The 'c' — an open arc representing the wide intake -->
+  <path d="M 36 14
+           A 18 18 0 1 0 36 50"
+        fill="none"
+        stroke="url(#lg)"
+        stroke-width="6"
+        stroke-linecap="round"/>
+
+  <!-- The 'f' — a tight vertical stroke + crossbar, the compressed output -->
+  <line x1="46" y1="10" x2="46" y2="56"
+        stroke="url(#lg)"
+        stroke-width="6"
+        stroke-linecap="round"/>
+  <line x1="38" y1="28" x2="54" y2="28"
+        stroke="url(#lg)"
+        stroke-width="6"
+        stroke-linecap="round"/>
+
+  <!-- A tiny narrowing accent below, echoing the banner apertures -->
+  <line x1="12" y1="56" x2="22" y2="56"
+        stroke="url(#lgFade)"
+        stroke-width="2"
+        stroke-linecap="round"/>
+</svg>
diff --git a/.gitignore b/.gitignore
@@ -31,3 +31,6 @@ coverage.out
 
 # Planning
 .planning/
+
+# README Craft
+.readme-craft/
diff --git a/README.md b/README.md
