Add utility scripts collection with auto-generated documentation

This commit introduces a comprehensive collection of utility scripts for shell
automation, color manipulation, and documentation generation:

Core Scripts:
- artifact_github_download.sh: Download GitHub Action artifacts via CLI
- css_color_filter.sh: Generate CSS filter values using SPSA algorithm
- css_color_palette.sh: Generate comprehensive color palettes (monochromatic, triadic, etc.)
- css_json_convert.sh: Convert CSS variables to JSON/YAML formats
- doc_bash_generate.sh: Auto-generate README.md with animated GIF demos
- doc_rust_generate.sh: Generate Rust project documentation
- jinja_template_render.sh: Render Jinja2 templates from CLI
- mime_mp4_gif.sh: Convert MP4 videos to GIF format

Documentation Features:
- Comprehensive README.md with table of contents
- 8 animated GIF demos showing real command examples
- Sandboxed demo execution in temporary directories
- 15-second timeout protection for intensive computations
- Automatic example extraction from --help output

Technical Implementation:
- Pure bash color utilities using only bc for arithmetic
- tput-based color codes for portability
- IFS-safe string parsing using parameter expansion
- Stdout/stderr isolation to prevent contamination
- Base64 encoding for multi-line text preservation

All scripts include detailed --help documentation with usage examples.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

assets/doc_rust_generate/theme/header.html.jinja

@@ -0,0 +1,90 @@
+<script type="module">
+  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
+
+  mermaid.initialize({
+    startOnLoad: false,
+    theme: 'dark',
+    themeVariables: {
+      primaryColor: '{{primaryColor}}',
+      primaryTextColor: '{{primaryTextColor}}',
+      primaryBorderColor: '{{primaryBorderColor}}',
+      lineColor: '{{lineColor}}',
+      secondaryColor: '#{{secondaryColor}}',
+      tertiaryColor: '{{secondaryColor}}',
+      background: '{{background}}',
+      mainBkg: '{{mainBkg}}',
+      secondBkg: '{{secondBkg}}',
+      border1: '{{border1}}',
+      border2: '{{border2}}',
+      note: '{{note}}',
+      noteBkgColor: '{{noteBkgColor}}',
+      noteTextColor: '{{noteTextColor}}',
+      noteBorderColor: '{{noteBorderColor}}',
+      arrowheadColor: '{{arrowheadColor}}',
+      fontFamily: '{{fontFamily}}',
+      fontSize: '{{fontSize}}',
+      darkMode: '{{darkMode}}',
+      edgeLabelBackground: '{{edgeLabelBackground}}',
+      clusterBkg: '{{clusterBkg}}',
+      clusterBorder: '{{clusterBorder}}',
+      defaultLinkColor: '{{defaultLinkColor}}',
+      titleColor: '{{titleColor}}',
+      nodeTextColor: '{{nodeTextColor}}'
+    },
+    flowchart: {
+      htmlLabels: true,
+      curve: 'basis',
+      useMaxWidth: true,
+      padding: 20
+    },
+    securityLevel: 'loose'
+  });
+
+  // Use both DOMContentLoaded and load events for better compatibility
+  function initMermaid() {
+    const mermaidBlocks = document.querySelectorAll(
+      'pre.language-mermaid code'
+    );
+
+    if (mermaidBlocks.length === 0) {
+      console.log('No mermaid blocks found');
+      return;
+    }
+
+    console.log(`Found ${mermaidBlocks.length} mermaid blocks, converting...`);
+
+    mermaidBlocks.forEach((block, index) => {
+      const mermaidDiv = document.createElement('div');
+      mermaidDiv.className = 'mermaid';
+      mermaidDiv.id = `mermaid-diagram-${index}`;
+      mermaidDiv.textContent = block.textContent;
+      block.parentElement.replaceWith(mermaidDiv);
+    });
+
+    setTimeout(() => {
+      mermaid
+        .run()
+        .then(() => {
+          console.log('Mermaid diagrams rendered successfully');
+        })
+        .catch((err) => {
+          console.error('Mermaid rendering error:', err);
+        });
+    }, 100);
+  }
+
+  // Try multiple event listeners to ensure it runs
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initMermaid);
+  } else {
+    // DOM already loaded
+    initMermaid();
+  }
+
+  window.addEventListener('load', () => {
+    // Failsafe: run again on window load if diagrams still missing
+    if (document.querySelectorAll('.mermaid svg').length === 0) {
+      initMermaid();
+    }
+  });
+</script>