Repaint to jet-black + atomic-tangerine skin, add consultant-special 2×2

Why: the default skin was too warm/neutral and the pyramid + venn never
quite read the way they should. Also prepping for public sharing, so the
example diagrams needed to drop the littlemight-specific copy.

Changes:
- New five-color palette: jet-black ink, atomic-tangerine accent,
  white-smoke paper, blue-slate muted, silver hairlines. Replaces
  warm-stone + rust across every variant + dark-mode tokens.
- Default background is clean paper; dot grid + framed container are
  now opt-in variants (uncomment in template to enable).
- New consultant-special quadrant variant (example-quadrant-consultant.html)
  — 2×2 scenario matrix with named cells, double-ended axes, one focal
  quadrant; house skin, not a separate visual language.
- Pyramid redrawn as a true triangular silhouette with shared edges on
  one slope (stacked polygons on a single triangle outline, no kinks).
- Venn redesigned: dark-fill triple-intersection with white text,
  circle labels moved inside non-overlap lobes, pair-overlap labels
  removed, legend dropped.
- Example content genericized (content site / product timeline /
  content platform instead of littlemight-branded copy).
- Screenshots regenerated at 2× DPI; added quadrant-consultant.png
  (14th diagram in the gallery).
- README: hero-first opener, preserved Why-I-built-it section, UTM
  tags on littlemight + bestself links, palette description updated.

assets/template-dark.html

@@ -8,10 +8,10 @@
   <style>
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
     :root {
-      --color-paper:   #1c1a17;   /* deep warm charcoal */
-      --color-ink:     #f1efe7;   /* warm off-white */
-      --color-muted:   #a8a69d;
-      --color-accent:  #ff6a30;
+      --color-paper:   #2d3142;   /* deep warm charcoal */
+      --color-ink:     #f5f5f5;   /* warm off-white */
+      --color-muted:   #bfc0c0;
+      --color-accent:  #f08a59;
       --font-sans:     'Geist', system-ui, sans-serif;
       --font-serif:    'Instrument Serif', serif;
       --font-mono:     'Geist Mono', ui-monospace, monospace;
@@ -60,16 +60,19 @@
 
     <svg viewBox="0 0 1000 600" xmlns="http://www.w3.org/2000/svg">
       <defs>
+        <marker id="arrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#bfc0c0"/></marker>
+        <marker id="arrow-accent" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#f08a59"/></marker>
+        <marker id="arrow-link" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#6a95d8"/></marker>
+
+        <!-- OPTIONAL: dot-pattern background. Uncomment and add <rect fill="url(#dots)"/> after the paper rect to enable. -->
+        <!--
         <pattern id="dots" width="22" height="22" patternUnits="userSpaceOnUse">
-          <circle cx="1" cy="1" r="0.9" fill="rgba(241,239,231,0.08)"/>
+          <circle cx="1" cy="1" r="0.9" fill="rgba(245,245,245,0.08)"/>
         </pattern>
-        <marker id="arrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#a8a69d"/></marker>
-        <marker id="arrow-accent" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#ff6a30"/></marker>
-        <marker id="arrow-link" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#5ba8eb"/></marker>
+        -->
       </defs>
 
-      <rect width="100%" height="100%" fill="#1c1a17"/>
-      <rect width="100%" height="100%" fill="url(#dots)" opacity="0.6"/>
+      <rect width="100%" height="100%" fill="#2d3142"/>
 
       <!-- Draw arrows first, then nodes. Replace with your content. -->