feat(docs): Quantum Cobalt v3.0 - Algorithms, theme-aware SVGs, semantic Mermaid

- Rewrite style.css as Quantum Cobalt v3.0 design system:
  - 5-layer surface system with refined OKLCH tokens
  - Subtle background grid pattern and glass morphism
  - Smooth dark/light theme transitions
  - Complete Mermaid semantic color classes (start/decision/action/complete/problem)
- Fix theme-aware SVG bugs:
  - Split logo.svg into light/dark versions for VitePress class-based switching
  - Update og-card.svg to include Algorithms in navigation label
- Add 4 new Vue components:
  - AlgorithmCard, ComplexityBadge, DiagramCanvas, ReferenceCard
- Add standalone Algorithms module (en + zh):
  - Overview, Sorting, Hashing pages with academic Citation blocks
- Upgrade Citation.vue with BibTeX copy button
- Refactor optimization-decision-tree.md:
  - Remove all hard-coded Mermaid style commands
  - Use CSS semantic classes (:::) for light/dark-aware colors
  - Wrap all diagrams in DiagramCanvas component
- Enhance Landing pages with Algorithms entry and technical specs table
- Expand Research references with algorithm literature (Knuth, Sedgewick, Celis, F14)
- Expand Related Work with hash table library comparisons

Generated with [Devin](https://cli.devin.ai/docs)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>

Author: holtwood

docs/.vitepress/config.ts

@@ -70,6 +70,12 @@ const enResearchItems = [
   { text: 'Evolution', link: '/en/research/evolution' },
 ]
 
+const enAlgorithmsItems = [
+  { text: 'Algorithms Overview', link: '/en/algorithms/' },
+  { text: 'Sorting', link: '/en/algorithms/sorting' },
+  { text: 'Hashing', link: '/en/algorithms/hashing' },
+]
+
 const enDeepDivesItems = [
   { text: 'Deep Dives Overview', link: '/en/deep-dives/' },
   { text: 'Memory Layout', link: '/en/deep-dives/memory-layout' },
@@ -132,6 +138,12 @@ const zhContributingItems = [
   { text: 'AI 开发流程', link: '/zh/contributing/ai-workflow' },
 ]
 
+const zhAlgorithmsItems = [
+  { text: '算法概览', link: '/zh/algorithms/' },
+  { text: '排序算法', link: '/zh/algorithms/sorting' },
+  { text: '哈希算法', link: '/zh/algorithms/hashing' },
+]
+
 const zhDeepDivesItems = [
   { text: '深度专题概览', link: '/zh/deep-dives/' },
   { text: '内存布局（英文）', link: '/en/deep-dives/memory-layout' },
@@ -156,39 +168,15 @@ export default withMermaid(defineConfig({
   mermaid: {
     startOnLoad: false,
     securityLevel: 'strict',
-    flowchart: { useMaxWidth: true },
+    flowchart: { useMaxWidth: true, htmlLabels: true },
     sequence: { useMaxWidth: true },
-    // Modern Geek Theme - Light Mode (Cobalt Engineering)
+    gantt: { useMaxWidth: true },
+    // Theme is fully controlled by CSS variables in style.css
+    // for seamless light/dark mode switching.
     theme: 'base',
     themeVariables: {
-      primaryColor: '#E8EDF5',
-      primaryTextColor: '#1A2A4A',
-      primaryBorderColor: '#3B6BDC',
-      secondaryColor: '#F0F4FA',
-      tertiaryColor: '#E8EDF5',
-      lineColor: '#5A6A8A',
       fontFamily: 'Inter, system-ui, sans-serif',
       fontSize: '14px',
-      nodeBorder: '#3B6BDC',
-      mainBkg: '#E8EDF5',
-      clusterBkg: '#F0F4FA',
-      clusterBorder: '#3B6BDC',
-      titleColor: '#1A2A4A',
-      edgeLabelBackground: '#F0F4FA',
-      actorBkg: '#E8EDF5',
-      actorBorder: '#3B6BDC',
-      actorTextColor: '#1A2A4A',
-      actorLineColor: '#5A6A8A',
-      signalColor: '#1A2A4A',
-      signalTextColor: '#1A2A4A',
-      labelBoxBkg: '#E8EDF5',
-      labelBoxBorderColor: '#3B6BDC',
-      labelTextColor: '#1A2A4A',
-      loopTextColor: '#1A2A4A',
-      noteBorderColor: '#5A6A8A',
-      noteBkgColor: '#F0F4FA',
-      activationBorderColor: '#3B6BDC',
-      activationBkgColor: '#E8EDF5',
     },
   },
   head: [
@@ -220,6 +208,7 @@ export default withMermaid(defineConfig({
         nav: [
           { text: 'Academy', link: '/en/academy/', activeMatch: '/en/academy/' },
           { text: 'Architecture', link: '/en/architecture/', activeMatch: '/en/architecture/' },
+          { text: 'Algorithms', link: '/en/algorithms/', activeMatch: '/en/algorithms/' },
           { text: 'Playbook', link: '/en/playbook/', activeMatch: '/en/playbook/|/en/getting-started/|/en/guides/' },
           { text: 'Deep Dives', link: '/en/deep-dives/', activeMatch: '/en/deep-dives/' },
           { text: 'Reference', link: '/en/reference/', activeMatch: '/en/reference/' },
@@ -242,6 +231,10 @@ export default withMermaid(defineConfig({
               text: 'Architecture',
               items: enArchitectureItems,
             },
+            {
+              text: 'Algorithms',
+              items: enAlgorithmsItems,
+            },
             {
               text: 'Playbook',
               items: enPlaybookItems,
@@ -296,6 +289,7 @@ export default withMermaid(defineConfig({
         nav: [
           { text: '学院', link: '/zh/academy/', activeMatch: '/zh/academy/' },
           { text: '架构', link: '/zh/architecture/', activeMatch: '/zh/architecture/' },
+          { text: '算法', link: '/zh/algorithms/', activeMatch: '/zh/algorithms/' },
           { text: '实践手册', link: '/zh/playbook/', activeMatch: '/zh/playbook/|/zh/getting-started/|/zh/guides/' },
           { text: '深度专题', link: '/zh/deep-dives/', activeMatch: '/zh/deep-dives/' },
           { text: '参考', link: '/zh/reference/', activeMatch: '/zh/reference/' },
@@ -318,6 +312,10 @@ export default withMermaid(defineConfig({
               text: '架构',
               items: zhArchitectureItems,
             },
+            {
+              text: '算法',
+              items: zhAlgorithmsItems,
+            },
             {
               text: '实践手册',
               items: zhPlaybookItems,
@@ -366,7 +364,7 @@ export default withMermaid(defineConfig({
     search: { provider: 'local' },
     logo: {
       light: '/logo.svg',
-      dark: '/logo.svg',
+      dark: '/logo-dark.svg',
     },
     editLink: {
       pattern: 'https://github.com/LessUp/cpp-high-performance-guide/edit/master/docs/:path',

docs/.vitepress/theme/AlgorithmCard.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+interface AlgorithmLink {
+  href: string
+  label: string
+}
+
+interface Props {
+  title: string
+  timeComplexity?: string
+  spaceComplexity?: string
+  description: string
+  links?: AlgorithmLink[]
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <article class="wp-algorithm-card">
+    <div class="wp-algorithm-card-header">
+      <h3 class="wp-algorithm-card-title">{{ title }}</h3>
+    </div>
+
+    <div class="wp-algorithm-card-complexity">
+      <ComplexityBadge v-if="timeComplexity" :value="timeComplexity" label="Time" />
+      <ComplexityBadge v-if="spaceComplexity" :value="spaceComplexity" label="Space" />
+    </div>
+
+    <p class="wp-algorithm-card-desc">{{ description }}</p>
+
+    <div v-if="links?.length" class="wp-algorithm-card-links">
+      <BaseAwareLink
+        v-for="link in links"
+        :key="`${link.href}:${link.label}`"
+        class="wp-pill-link"
+        :href="link.href"
+      >
+        {{ link.label }}
+      </BaseAwareLink>
+    </div>
+  </article>
+</template>

docs/.vitepress/theme/Citation.vue

@@ -1,12 +1,5 @@
 <script setup lang="ts">
-/**
- * Citation.vue - Academic citation system component
- *
- * Usage:
- * <Citation :references="[
- *   { id: 'drepper2007', author: 'Drepper, U.', title: 'What Every Programmer Should Know About Memory', year: 2007, url: '...' }
- * ]" />
- */
+import { ref } from 'vue'
 
 interface Reference {
   id: string
@@ -16,6 +9,7 @@ interface Reference {
   source?: string
   url?: string
   doi?: string
+  bibtex?: string
 }
 
 interface Props {
@@ -29,13 +23,28 @@ const props = withDefaults(defineProps<Props>(), {
   numbered: true,
 })
 
+const copiedId = ref<string | null>(null)
+
 function formatCitation(ref: Reference): string {
   const parts = [ref.author]
   if (ref.year) parts.push(`(${ref.year})`)
   parts.push(`*${ref.title}*`)
   if (ref.source) parts.push(ref.source)
   return parts.join('. ')
 }
+
+async function copyBibtex(ref: Reference) {
+  if (!ref.bibtex) return
+  try {
+    await navigator.clipboard.writeText(ref.bibtex)
+    copiedId.value = ref.id
+    setTimeout(() => {
+      if (copiedId.value === ref.id) copiedId.value = null
+    }, 2000)
+  } catch {
+    // Silent fail on clipboard errors
+  }
+}
 </script>
 
 <template>
@@ -52,6 +61,21 @@ function formatCitation(ref: Reference): string {
             {{ ref.doi ? `DOI: ${ref.doi}` : 'Link' }}
           </a>
         </span>
+        <button
+          v-if="ref.bibtex"
+          class="citation-copy-btn"
+          @click="copyBibtex(ref)"
+          :title="copiedId === ref.id ? 'Copied!' : 'Copy BibTeX'"
+        >
+          <svg v-if="copiedId === ref.id" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="20 6 9 17 4 12" />
+          </svg>
+          <svg v-else width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
+            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
+          </svg>
+          {{ copiedId === ref.id ? 'Copied' : 'BibTeX' }}
+        </button>
       </li>
     </ol>
     <ul v-else class="wp-citations-list">
@@ -65,75 +89,22 @@ function formatCitation(ref: Reference): string {
             {{ ref.doi ? `DOI: ${ref.doi}` : 'Link' }}
           </a>
         </span>
+        <button
+          v-if="ref.bibtex"
+          class="citation-copy-btn"
+          @click="copyBibtex(ref)"
+          :title="copiedId === ref.id ? 'Copied!' : 'Copy BibTeX'"
+        >
+          <svg v-if="copiedId === ref.id" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="20 6 9 17 4 12" />
+          </svg>
+          <svg v-else width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
+            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
+          </svg>
+          {{ copiedId === ref.id ? 'Copied' : 'BibTeX' }}
+        </button>
       </li>
     </ul>
   </section>
 </template>
-
-<style scoped>
-.wp-citations {
-  margin: var(--wp-space-7, 3rem) 0;
-  padding: var(--wp-space-5, 1.5rem);
-  border: 1px solid var(--wp-line-1, #e0e0e0);
-  border-radius: var(--wp-radius-2, 14px);
-  background: var(--wp-surface-1, #f8f9fa);
-}
-
-.wp-citations h3 {
-  margin-top: 0;
-  margin-bottom: var(--wp-space-4, 1rem);
-  color: var(--wp-ink-1, #1a1a2e);
-  font-size: 1.1rem;
-  font-weight: 700;
-  letter-spacing: -0.01em;
-}
-
-.wp-citations-list {
-  margin: 0;
-  padding-left: var(--wp-space-5, 1.5rem);
-}
-
-.wp-citation-item {
-  margin-bottom: var(--wp-space-3, 0.75rem);
-  color: var(--wp-ink-2, #4a4a6a);
-  font-size: 0.95rem;
-  line-height: 1.7;
-}
-
-.wp-citation-item:last-child {
-  margin-bottom: 0;
-}
-
-.citation-author {
-  font-weight: 600;
-  color: var(--wp-ink-1, #1a1a2e);
-}
-
-.citation-year {
-  color: var(--wp-ink-3, #6a6a8a);
-}
-
-.citation-title {
-  font-style: italic;
-}
-
-.citation-source {
-  color: var(--wp-ink-3, #6a6a8a);
-}
-
-.citation-link {
-  margin-left: 0.5rem;
-}
-
-.citation-link a {
-  color: var(--wp-accent-primary, #3b6bdc);
-  font-size: 0.85rem;
-  text-decoration: none;
-  transition: color 0.15s ease;
-}
-
-.citation-link a:hover {
-  color: var(--wp-accent-secondary, #5a8bfc);
-  text-decoration: underline;
-}
-</style>

docs/.vitepress/theme/ComplexityBadge.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  value: string
+  label?: string
+}
+
+const props = defineProps<Props>()
+
+const className = computed(() => {
+  const v = props.value.toLowerCase().trim()
+  if (v === 'o(1)' || v === 'o(1)') return 'wp-complexity-badge--constant'
+  if (v.includes('log')) return 'wp-complexity-badge--logarithmic'
+  if (v === 'o(n)' || v === 'o(n)') return 'wp-complexity-badge--linear'
+  if (v.includes('n log') || v.includes('nlog')) return 'wp-complexity-badge--linearithmic'
+  if (v.includes('n²') || v.includes('n^2') || v.includes('n*n')) return 'wp-complexity-badge--quadratic'
+  if (v.includes('2^n') || v.includes('exp')) return 'wp-complexity-badge--exponential'
+  return 'wp-complexity-badge--linear'
+})
+</script>
+
+<template>
+  <span class="wp-complexity-badge" :class="className" :title="label ? `${label}: ${value}` : value">
+    <template v-if="label">{{ label }}&nbsp;</template>{{ value }}
+  </span>
+</template>

docs/.vitepress/theme/DiagramCanvas.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+interface Props {
+  title?: string
+  badge?: string
+  caption?: string
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <figure class="wp-diagram-canvas">
+    <div v-if="title || badge" class="wp-diagram-canvas-header">
+      <span v-if="title" class="wp-diagram-canvas-title">{{ title }}</span>
+      <span v-if="badge" class="wp-diagram-canvas-badge">{{ badge }}</span>
+    </div>
+    <div class="wp-diagram-canvas-body">
+      <slot />
+    </div>
+    <figcaption v-if="caption" class="wp-diagram-canvas-footer">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <circle cx="12" cy="12" r="10"/>
+        <line x1="12" y1="16" x2="12" y2="12"/>
+        <line x1="12" y1="8" x2="12.01" y2="8"/>
+      </svg>
+      {{ caption }}
+    </figcaption>
+  </figure>
+</template>