Monospace_Developer_TOC

<div class="font-mono bg-stone-50 text-gray-800 dark:bg-stone-900 dark:text-gray-100 p-4 sm:p-6 lg:p-8 rounded-lg shadow-xl border border-stone-200 dark:border-stone-800 transition-colors duration-300">
  <h2 class="text-xl sm:text-2xl font-bold mb-4 border-b-2 border-emerald-600 pb-2 text-emerald-700 dark:text-emerald-500 flex items-center">
    <svg class="w-6 h-6 mr-2 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
    </svg>
    Table of Contents
  </h2>
  <nav class="">
    <ul class="space-y-2 text-sm sm:text-base">
      <li class="group">
        <a href="#section-1" class="flex items-center text-emerald-700 dark:text-emerald-500 hover:text-emerald-500 dark:hover:text-emerald-300 transition-colors duration-200 py-1.5 px-2 -ml-2 rounded-md hover:bg-emerald-100 dark:hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50">
          <span class="block w-2 h-2 rounded-full bg-emerald-600 mr-3 animate-pulse group-hover:animate-none group-hover:scale-125 transition-transform"></span>
          <span class="font-semibold">1. Introduction to Project Atlas</span>
        </a>
        <ul class="ml-6 mt-1 space-y-1 text-gray-700 dark:text-gray-300 border-l border-emerald-400 dark:border-emerald-700 pl-4">
          <li><a href="#section-1-1" class="block py-1.5 hover:text-ruby-700 dark:hover:text-ruby-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-ruby-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-emerald-500">1.1. Overview and Goals</a></li>
          <li><a href="#section-1-2" class="block py-1.5 hover:text-ruby-700 dark:hover:text-ruby-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-ruby-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-emerald-500">1.2. Key Features</a></li>
        </ul>
      </li>
      <li class="group">
        <a href="#section-2" class="flex items-center text-sapphire-700 dark:text-sapphire-500 hover:text-sapphire-500 dark:hover:text-sapphire-300 transition-colors duration-200 py-1.5 px-2 -ml-2 rounded-md hover:bg-sapphire-100 dark:hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-sapphire-500 focus:ring-opacity-50">
          <span class="block w-2 h-2 rounded-full bg-sapphire-600 mr-3 animate-pulse group-hover:animate-none group-hover:scale-125 transition-transform"></span>
          <span class="font-semibold">2. Getting Started</span>
        </a>
        <ul class="ml-6 mt-1 space-y-1 text-gray-700 dark:text-gray-300 border-l border-sapphire-400 dark:border-sapphire-700 pl-4">
          <li><a href="#section-2-1" class="block py-1.5 hover:text-ruby-700 dark:hover:text-ruby-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-ruby-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-sapphire-500">2.1. Installation Guide</a></li>
          <li><a href="#section-2-2" class="block py-1.5 hover:text-ruby-700 dark:hover:text-ruby-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-ruby-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-sapphire-500">2.2. Configuration Settings</a></li>
          <li><a href="#section-2-3" class="block py-1.5 hover:text-ruby-700 dark:hover:text-ruby-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-ruby-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-sapphire-500">2.3. Running Your First Query</a></li>
        </ul>
      </li>
      <li class="group">
        <a href="#section-3" class="flex items-center text-ruby-700 dark:text-ruby-500 hover:text-ruby-500 dark:hover:text-ruby-300 transition-colors duration-200 py-1.5 px-2 -ml-2 rounded-md hover:bg-ruby-100 dark:hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-ruby-500 focus:ring-opacity-50">
          <span class="block w-2 h-2 rounded-full bg-ruby-600 mr-3 animate-pulse group-hover:animate-none group-hover:scale-125 transition-transform"></span>
          <span class="font-semibold">3. Advanced Topics</span>
        </a>
        <ul class="ml-6 mt-1 space-y-1 text-gray-700 dark:text-gray-300 border-l border-ruby-400 dark:border-ruby-700 pl-4">
          <li><a href="#section-3-1" class="block py-1.5 hover:text-emerald-700 dark:hover:text-emerald-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-ruby-500">3.1. API Reference</a></li>
          <li><a href="#section-3-2" class="block py-1.5 hover:text-emerald-700 dark:hover:text-emerald-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-ruby-500">3.2. Performance Optimization</a></li>
          <li><a href="#section-3-3" class="block py-1.5 hover:text-emerald-700 dark:hover:text-emerald-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-ruby-500">3.3. Extending Functionality</a></li>
          <li><a href="#section-3-4" class="block py-1.5 hover:text-emerald-700 dark:hover:text-emerald-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-ruby-500">3.4. Troubleshooting Common Issues</a></li>
        </ul>
      </li>
      <li class="group">
        <a href="#section-4" class="flex items-center text-purple-700 dark:text-purple-500 hover:text-purple-500 dark:hover:text-purple-300 transition-colors duration-200 py-1.5 px-2 -ml-2 rounded-md hover:bg-purple-100 dark:hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50">
          <span class="block w-2 h-2 rounded-full bg-purple-600 mr-3 animate-pulse group-hover:animate-none group-hover:scale-125 transition-transform"></span>
          <span class="font-semibold">4. Contributing</span>
        </a>
        <ul class="ml-6 mt-1 space-y-1 text-gray-700 dark:text-gray-300 border-l border-purple-400 dark:border-purple-700 pl-4">
          <li><a href="#section-4-1" class="block py-1.5 hover:text-emerald-700 dark:hover:text-emerald-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-purple-500">4.1. How to Submit a Pull Request</a></li>
          <li><a href="#section-4-2" class="block py-1.5 hover:text-emerald-700 dark:hover:text-emerald-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-purple-500">4.2. Code of Conduct</a></li>
        </ul>
      </li>
      <li class="group">
        <a href="#section-5" class="flex items-center text-teal-700 dark:text-teal-500 hover:text-teal-500 dark:hover:text-teal-300 transition-colors duration-200 py-1.5 px-2 -ml-2 rounded-md hover:bg-purple-100 dark:hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-opacity-50">
          <span class="block w-2 h-2 rounded-full bg-teal-600 mr-3 animate-pulse group-hover:animate-none group-hover:scale-125 transition-transform"></span>
          <span class="font-semibold">5. Legal & Licensing</span>
        </a>
      </li>
    </ul>
  </nav>
  <div class="mt-6 pt-4 border-t-2 border-slate-300 dark:border-slate-700 text-xs text-gray-500 dark:text-gray-400 flex items-center justify-between">
    <span>Documentation Version: <span class="text-emerald-600 dark:text-emerald-400">1.0.3</span></span>
    <a href="#top" class="inline-flex items-center hover:text-gray-700 dark:hover:text-gray-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50">
      <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path>
      </svg>
      Back to Top
    </a>
  </div>
</div>

<style>
  /* Custom Tailwind colors for jewel tones */
  .text-emerald-700 { color: #047857; } /* green-700 */
  .text-emerald-500 { color: #10B981; } /* green-500 */
  .text-emerald-300 { color: #6EE7B7; } /* green-300 */
  .bg-emerald-600 { background-color: #059669; }
  .border-emerald-600 { border-color: #059669; }
  .border-emerald-400 { border-color: #34D399; }
  .hover\:bg-emerald-100:hover { background-color: #D1FAE5; }
  .focus\:ring-emerald-500:focus { --tw-ring-color: #10B981; }

  .text-sapphire-700 { color: #1D4ED8; } /* blue-700 */
  .text-sapphire-500 { color: #3B82F6; } /* blue-500 */
  .text-sapphire-300 { color: #93C5FD; } /* blue-300 */
  .bg-sapphire-600 { background-color: #2563EB; }
  .border-sapphire-400 { border-color: #60A5FA; }
  .hover\:bg-sapphire-100:hover { background-color: #DBEAFE; }
  .focus\:ring-sapphire-500:focus { --tw-ring-color: #3B82F6; }

  .text-ruby-700 { color: #B91C1C; } /* red-700 */
  .text-ruby-500 { color: #EF4444; } /* red-500 */
  .text-ruby-300 { color: #FCA5A5; } /* red-300 */
  .bg-ruby-600 { background-color: #DC2626; }
  .border-ruby-400 { border-color: #F87171; }
  .hover\:bg-ruby-100:hover { background-color: #FEE2E2; }
  .focus\:ring-ruby-500:focus { --tw-ring-color: #EF4444; }

  .text-purple-700 { color: #6D28D9; } /* violet-700 */
  .text-purple-500 { color: #8B5CF6; } /* violet-500 */
  .text-purple-300 { color: #C4B5FD; } /* violet-300 */
  .bg-purple-600 { background-color: #7C3AED; }
  .border-purple-400 { border-color: #A78BFA; }
  .hover\:bg-purple-100:hover { background-color: #EDE9FE; }
  .focus\:ring-purple-500:focus { --tw-ring-color: #8B5CF6; }

  .text-teal-700 { color: #0F766E; } /* teal-700 */
  .text-teal-500 { color: #14B8A6; } /* teal-500 */
  .text-teal-300 { color: #5EEAD4; } /* teal-300 */
  .bg-teal-600 { background-color: #0D9488; }
  .border-teal-400 { border-color: #2DD4BF; }

  /* Dark mode custom colors adjustments (optional, but good for fine-tuning) */
  .dark\:text-emerald-500 { color: #10B981; }
  .dark\:text-emerald-300 { color: #6EE7B7; }
  .dark\:border-emerald-700 { border-color: #047857; }
  .dark\:hover\:bg-stone-800:hover { background-color: #292524; }

  .dark\:text-sapphire-500 { color: #3B82F6; }
  .dark\:text-sapphire-300 { color: #93C5FD; }
  .dark\:border-sapphire-700 { border-color: #1D4ED8; }

  .dark\:text-ruby-500 { color: #EF4444; }
  .dark\:text-ruby-300 { color: #FCA5A5; }
  .dark\:border-ruby-700 { border-color: #B91C1C; }

  .dark\:text-purple-500 { color: #8B5CF6; }
  .dark\:text-purple-300 { color: #C4B5FD; }
  .dark\:border-purple-700 { border-color: #6D28D9; }
  
  .dark\:text-teal-500 { color: #14B8A6; }

  /* Animations */
  @keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
  }
  .animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
</style>