.. raw:: html

   <style>
   #language-content { display: none; }
   #language-content.active { display: block; }
   </style>
   <script>
   (function() {
     function initLanguageSwitcher() {
       const lang = document.documentElement.getAttribute('data-language') || 'en';

       function showContent(language) {
         document.querySelectorAll('[data-lang-content]').forEach(el => {
           el.classList.remove('active');
         });
         const element = document.querySelector(`[data-lang-content="${language}"]`);
         if (element) {
           element.classList.add('active');
         }
       }

       // Show content on initial load
       showContent(lang);

       // Listen for language changes
       window.addEventListener('language-changed', function(e) {
         showContent(e.detail.language);
       });
     }

     // Run immediately if DOM is ready, otherwise wait
     if (document.readyState === 'loading') {
       document.addEventListener('DOMContentLoaded', initLanguageSwitcher);
     } else {
       initLanguageSwitcher();
     }
   })();
   </script>

API Documentation
=================

Welcome to our modern API documentation system with multi-language support.

.. note::
   This documentation features:

   - 🌍 **Multi-language Support**: English, Chinese (中文), Japanese (日本語)
   - 🎨 **Dark/Light Mode**: Seamless theme switching with warm colors in light mode
   - ✨ **Modern Design**: Clean, professional interface inspired by Godot Engine docs
   - 📱 **Responsive Layout**: Works on all devices
   - ⚡ **Smooth Animations**: Delightful interactions


.. raw:: html

   <div data-lang-content="en" class="active language-section">
      <h2>English Documentation</h2>

.. toctree::
   :maxdepth: 2
   :caption: English

   en/index
   en/getting-started
   en/api-reference

.. raw:: html

   </div>
   <div data-lang-content="zh" class="language-section">
      <h2>中文文档</h2>

.. toctree::
   :maxdepth: 2
   :caption: 中文

   zh/index
   zh/getting-started
   zh/api-reference

.. raw:: html

   </div>
   <div data-lang-content="ja" class="language-section">
      <h2>日本語ドキュメント</h2>

.. toctree::
   :maxdepth: 2
   :caption: 日本語

   ja/index
   ja/getting-started
   ja/api-reference

.. raw:: html

   </div>

Getting Started
===============

Choose your language and explore the documentation using the language selector in the top-right corner.

Key Features
============

**Multi-language Documentation**
  Access documentation in English, Chinese, or Japanese. Your language preference is automatically saved.

**Theme Customization**
  Switch between light and dark modes. Light mode uses warm, neutral colors that are easy on the eyes.

**Responsive Design**
  Works seamlessly on desktop, tablet, and mobile devices.

Feedback & Support
==================

If you encounter any issues or have suggestions for improvement, please let us know.