refactor: Add new V2.0 logo with dark/light mode support to all markdown files

- Update all main markdown files (INDEX.md, LEARNING-ROADMAP.md, QUICK_REFERENCE.md, CONTRIBUTING.md, claude_concepts_guide.md, resources.md) with new responsive picture element
- Add logo to all subdirectory README files in feature folders (01-10) and plugins
- Replace old markdown image syntax with HTML picture element for dark/light mode adaptation
- Logo automatically displays dark mode version when system prefers dark mode
- Maintain correct relative paths for all nesting levels (../, ../../, etc.)
- Update README.md with new logo syntax

All markdown files now use the new V2.0 starburst logo design with professional dark/light mode support.

resources/logos/claude-howto-logo-dark.svg

@@ -0,0 +1,126 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="800" height="200" viewBox="0 0 800 200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <!-- Emerald gradient -->
+    <linearGradient id="emeraldGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#10b981"/>
+      <stop offset="100%" style="stop-color:#059669"/>
+    </linearGradient>
+
+    <!-- Mint gradient -->
+    <linearGradient id="mintGrad" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" style="stop-color:#6ee7b7"/>
+      <stop offset="100%" style="stop-color:#34d399"/>
+    </linearGradient>
+
+    <!-- Text gradient dark -->
+    <linearGradient id="textDark" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#d1fae5"/>
+      <stop offset="100%" style="stop-color:#a7f3d0"/>
+    </linearGradient>
+
+    <!-- Dark background -->
+    <linearGradient id="bgDark" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#0d1f0d"/>
+      <stop offset="50%" style="stop-color:#132813"/>
+      <stop offset="100%" style="stop-color:#0a1a0a"/>
+    </linearGradient>
+
+    <!-- Glow filter dark -->
+    <filter id="glowDark" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feFlood flood-color="#10b981" flood-opacity="0.5"/>
+      <feComposite in2="blur" operator="in"/>
+      <feMerge>
+        <feMergeNode/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+  </defs>
+
+  <!-- Dark gradient background -->
+  <rect width="800" height="200" fill="url(#bgDark)"/>
+
+  <!-- Subtle grid overlay -->
+  <g opacity="0.02">
+    <line x1="0" y1="50" x2="800" y2="50" stroke="#10b981" stroke-width="1"/>
+    <line x1="0" y1="100" x2="800" y2="100" stroke="#10b981" stroke-width="1"/>
+    <line x1="0" y1="150" x2="800" y2="150" stroke="#10b981" stroke-width="1"/>
+  </g>
+
+  <!-- Icon: Claude-inspired rounded starburst -->
+  <g transform="translate(70, 100)">
+    <!-- Central circle with glow -->
+    <circle cx="0" cy="0" r="14" fill="#10b981" filter="url(#glowDark)"/>
+    <circle cx="0" cy="0" r="10" fill="url(#mintGrad)"/>
+
+    <!-- 12 rounded rays -->
+    <!-- Ray 1 (top, 0°) -->
+    <path d="M 0,-15 Q -5,-32 0,-48 Q 5,-32 0,-15" fill="url(#emeraldGrad)" opacity="1" filter="url(#glowDark)"/>
+
+    <!-- Ray 2 (30°) -->
+    <path d="M 13,-8 Q 18,-22 28,-35 Q 23,-20 13,-8" fill="url(#emeraldGrad)" opacity="0.95"/>
+
+    <!-- Ray 3 (60°) -->
+    <path d="M 22,7 Q 30,15 42,28 Q 28,18 22,7" fill="url(#emeraldGrad)" opacity="1" filter="url(#glowDark)"/>
+
+    <!-- Ray 4 (90°, right) -->
+    <path d="M 15,0 Q 32,-5 48,0 Q 32,5 15,0" fill="url(#emeraldGrad)" opacity="0.98"/>
+
+    <!-- Ray 5 (120°) -->
+    <path d="M 22,-7 Q 30,-15 42,-28 Q 28,-18 22,-7" fill="url(#emeraldGrad)" opacity="0.95"/>
+
+    <!-- Ray 6 (150°) -->
+    <path d="M 13,8 Q 18,22 28,35 Q 23,20 13,8" fill="url(#emeraldGrad)" opacity="1" filter="url(#glowDark)"/>
+
+    <!-- Ray 7 (180°, left) -->
+    <path d="M 0,15 Q -5,32 0,48 Q 5,32 0,15" fill="url(#emeraldGrad)" opacity="0.98"/>
+
+    <!-- Ray 8 (210°) -->
+    <path d="M -13,8 Q -18,22 -28,35 Q -23,20 -13,8" fill="url(#emeraldGrad)" opacity="0.95"/>
+
+    <!-- Ray 9 (240°) -->
+    <path d="M -22,-7 Q -30,-15 -42,-28 Q -28,-18 -22,-7" fill="url(#emeraldGrad)" opacity="1" filter="url(#glowDark)"/>
+
+    <!-- Ray 10 (270°, bottom-left) -->
+    <path d="M -15,0 Q -32,-5 -48,0 Q -32,5 -15,0" fill="url(#emeraldGrad)" opacity="0.98"/>
+
+    <!-- Ray 11 (300°) -->
+    <path d="M -22,7 Q -30,15 -42,28 Q -28,18 -22,7" fill="url(#emeraldGrad)" opacity="0.95"/>
+
+    <!-- Ray 12 (330°) -->
+    <path d="M -13,-8 Q -18,-22 -28,-35 Q -23,-20 -13,-8" fill="url(#emeraldGrad)" opacity="1" filter="url(#glowDark)"/>
+
+    <!-- Inner detail lines -->
+    <g opacity="0.8">
+      <rect x="-3.5" y="-3" width="7" height="1.2" fill="#0d1f0d" rx="0.6"/>
+      <rect x="-3.5" y="-0.2" width="7" height="1.2" fill="#0d1f0d" rx="0.6"/>
+      <rect x="-3.5" y="2.6" width="7" height="1.2" fill="#0d1f0d" rx="0.6"/>
+    </g>
+  </g>
+
+  <!-- Text: "Claude" -->
+  <text x="160" y="98" font-family="'Segoe UI', 'Trebuchet MS', '-apple-system', sans-serif" font-size="58" font-weight="600" fill="url(#textDark)" letter-spacing="-1">
+    Claude
+  </text>
+
+  <!-- Text: "How-To" -->
+  <text x="160" y="138" font-family="'Segoe UI', 'Trebuchet MS', '-apple-system', sans-serif" font-size="44" font-weight="400" fill="#6ee7b7" letter-spacing="0.5">
+    How-To
+  </text>
+
+  <!-- Subtitle -->
+  <text x="520" y="75" font-family="'Segoe UI', 'Trebuchet MS', '-apple-system', sans-serif" font-size="12" fill="#6ee7b7" letter-spacing="0.5" font-weight="500" opacity="0.85">
+    VISUAL GUIDE TO CLAUDE CODE
+  </text>
+
+  <!-- Accent line with glow -->
+  <line x1="160" y1="153" x2="400" y2="153" stroke="url(#emeraldGrad)" stroke-width="2.5" stroke-linecap="round" opacity="0.8"/>
+
+  <!-- Three dots -->
+  <g fill="#6ee7b7" opacity="0.8">
+    <circle cx="420" cy="158" r="2.5"/>
+    <circle cx="435" cy="158" r="2.5"/>
+    <circle cx="450" cy="158" r="2.5"/>
+  </g>
+</svg>