zblade.dev/src/pages/docs.astro

---
import BaseLayout from '../layouts/BaseLayout.astro';
---

<BaseLayout title="Documentation - Zaguán Blade" description="Complete user guide for Zaguán Blade, the AI-Native code editor.">
  <main>
    <!-- Hero Section -->
    <section class="docs-hero">
      <div class="container">
        <div class="hero-content">
          <div class="hero-label">// USER_GUIDE.md</div>
          <h1 class="hero-title">
            <span class="title-line-1">DOCUMENTATION</span>
            <span class="title-accent">GET_STARTED_</span>
          </h1>
          <p class="hero-description">
            Everything you need to know to work alongside your AI pair programmer.
            From setup to advanced features, this guide covers it all.
          </p>
        </div>
      </div>
    </section>

    <!-- The Concept Section -->
    <section id="concept" class="docs-section">
      <div class="container">
        <div class="section-label">[001] THE_CONCEPT</div>
        <div class="concept-card">
          <div class="concept-header">
            <h2>AI-Native Editor</h2>
            <div class="concept-tag">CORE_PRINCIPLE</div>
          </div>
          <p class="concept-lead">
            Zaguán Blade is not just a text editor with a chat sidebar. It is designed from the ground up to allow an AI agent to "live" inside your editor.
          </p>
          <p class="concept-lead">
            It supports Local AI through Ollama and any OpenAI-compatible connection, so you can run models on your own machine or point to self-hosted gateways without changing your workflow.
          </p>
          <div class="concept-grid">
            <div class="concept-item">
              <div class="concept-icon">👁</div>
              <h3>It sees what you see</h3>
              <p>The AI has access to your active files, cursor position, and project structure.</p>
            </div>
            <div class="concept-item">
              <div class="concept-icon">⚡</div>
              <h3>It acts</h3>
              <p>The AI can run terminal commands, edit files, and browse the web to find answers.</p>
            </div>
            <div class="concept-item">
              <div class="concept-icon">🤝</div>
              <h3>It collaborates</h3>
              <p>Instead of just pasting code chunks, the AI proposes changes directly in your file using "Diff Blocks" which you can review, accept, or reject.</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Getting Started Section -->
    <section id="getting-started" class="docs-section section-alt">
      <div class="container">
        <div class="section-label">[002] GETTING_STARTED</div>
        <h2 class="section-title">Quick Start Guide</h2>
        
        <div class="steps-grid">
          <div class="step-card step-highlight">
            <div class="step-num">1</div>
            <h3>Get Your API Key</h3>
            <p>Visit <a href="https://zaguanai.com/pricing" target="_blank" rel="noopener">ZaguanAI.com</a> and subscribe to get your Zaguán API Key.</p>
            <div class="step-note">Without a valid API Key, Zaguán Blade functions as a standard, high-performance text editor.</div>
          </div>
          
          <div class="step-card">
            <div class="step-num">2</div>
            <h3>Configure Account</h3>
            <p>Launch Zaguán Blade, click the <strong>Gear Icon</strong> (Settings) in the bottom-left corner, go to the <strong>Account</strong> tab, and paste your API Key.</p>
          </div>
          
          <div class="step-card">
            <div class="step-num">3</div>
            <h3>Choose Storage Mode</h3>
            <p>When opening a project for the first time, select your preferred storage mode for conversation history.</p>
            <div class="step-options">
              <span class="option-tag option-recommended">Local Storage</span>
              <span class="option-tag">Server Storage</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Interface Section -->
    <section id="interface" class="docs-section">
      <div class="container">
        <div class="section-label">[003] THE_INTERFACE</div>
        <h2 class="section-title">Interface Overview</h2>
        
        <div class="interface-grid">
          <div class="interface-card">
            <div class="interface-header">
              <span class="interface-icon">📁</span>
              <h3>Activity Bar</h3>
            </div>
            <ul class="interface-list">
              <li><strong>Files</strong> - Project file explorer</li>
              <li><strong>Git</strong> - Stage, commit, push</li>
              <li><strong>History</strong> - Browse file history</li>
              <li><strong>Settings</strong> - Preferences & account</li>
            </ul>
          </div>
          
          <div class="interface-card interface-highlight">
            <div class="interface-header">
              <span class="interface-icon">💻</span>
              <h3>Center Stage</h3>
              <span class="interface-tag">EDITOR</span>
            </div>
            <p class="interface-desc">High-performance CodeMirror 6 editor with syntax highlighting. <strong>Diff Blocks</strong> appear inline when the AI proposes changes.</p>
          </div>
          
          <div class="interface-card">
            <div class="interface-header">
              <span class="interface-icon">🤖</span>
              <h3>Right Panel</h3>
              <span class="interface-tag">AI_ASSISTANT</span>
            </div>
            <ul class="interface-list">
              <li><strong>Chat</strong> - Main communication channel</li>
              <li><strong>Model Selector</strong> - Choose AI model</li>
              <li><strong>Command Center</strong> - Type <code>@</code> for special commands</li>
            </ul>
          </div>
          
          <div class="interface-card">
            <div class="interface-header">
              <span class="interface-icon">⌨️</span>
              <h3>Bottom Panel</h3>
              <span class="interface-tag">TERMINAL</span>
            </div>
            <p class="interface-desc">Integrated terminal for running commands. The AI can see and interact with this terminal when executing commands.</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Keyboard Shortcuts Section -->
    <section id="shortcuts" class="docs-section section-alt">
      <div class="container">
        <div class="section-label">[004] KEYBOARD_SHORTCUTS</div>
        <h2 class="section-title">Master the Keys</h2>
        
        <div class="shortcuts-layout">
          <div class="shortcuts-card">
            <h3>Global Shortcuts</h3>
            <table class="shortcuts-table">
              <tr><td><kbd>F11</kbd></td><td>Toggle fullscreen mode</td></tr>
              <tr><td><kbd>Ctrl+W</kbd></td><td>Close current tab</td></tr>
              <tr><td><kbd>Ctrl+Tab</kbd></td><td>Cycle to next tab</td></tr>
              <tr><td><kbd>Ctrl+Shift+Tab</kbd></td><td>Cycle to previous tab</td></tr>
              <tr><td><kbd>Escape</kbd></td><td>Close modals/popups</td></tr>
            </table>
          </div>
          
          <div class="shortcuts-card">
            <h3>File Operations</h3>
            <table class="shortcuts-table">
              <tr><td><kbd>Ctrl+N</kbd></td><td>New File</td></tr>
              <tr><td><kbd>Ctrl+O</kbd></td><td>Open Folder</td></tr>
              <tr><td><kbd>Ctrl+S</kbd></td><td>Save current file</td></tr>
              <tr><td><kbd>Ctrl+Shift+S</kbd></td><td>Save As</td></tr>
              <tr><td><kbd>Alt+F4</kbd></td><td>Exit application</td></tr>
            </table>
          </div>
          
          <div class="shortcuts-card">
            <h3>Editor Shortcuts</h3>
            <table class="shortcuts-table">
              <tr><td><kbd>Ctrl+Z</kbd></td><td>Undo</td></tr>
              <tr><td><kbd>Ctrl+Shift+Z</kbd></td><td>Redo</td></tr>
              <tr><td><kbd>Ctrl+F</kbd></td><td>Find in file</td></tr>
              <tr><td><kbd>F2</kbd></td><td>Rename symbol</td></tr>
              <tr><td><kbd>Ctrl+E</kbd></td><td>Toggle Edit/View mode (Markdown)</td></tr>
            </table>
          </div>
          
          <div class="shortcuts-card">
            <h3>Chat Input</h3>
            <table class="shortcuts-table">
              <tr><td><kbd>Enter</kbd></td><td>Send message</td></tr>
              <tr><td><kbd>Shift+Enter</kbd></td><td>New line (without sending)</td></tr>
              <tr><td><kbd>Arrow Up/Down</kbd></td><td>Navigate command suggestions</td></tr>
              <tr><td><kbd>Tab</kbd> or <kbd>Enter</kbd></td><td>Select command from autocomplete</td></tr>
              <tr><td><kbd>Escape</kbd></td><td>Close command autocomplete</td></tr>
            </table>
          </div>
        </div>
      </div>
    </section>

    <!-- At Commands Section -->
    <section id="commands" class="docs-section">
      <div class="container">
        <div class="section-label">[005] @_COMMANDS</div>
        <h2 class="section-title">Special Commands</h2>
        <p class="section-desc">Type <code class="inline-code">@</code> in the chat input to access these special commands:</p>
        
        <div class="commands-grid">
          <div class="command-card">
            <div class="command-syntax">@web &lt;url&gt;</div>
            <p>Fetches content from a URL and uses it as context for the AI. Great for referencing documentation or articles.</p>
          </div>
          <div class="command-card">
            <div class="command-syntax">@research &lt;topic&gt;</div>
            <p>Performs deep research on a topic and displays results in a new tab. AI-powered web research at your fingertips.</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Working with AI Section -->
    <section id="ai" class="docs-section section-alt">
      <div class="container">
        <div class="section-label">[006] WORKING_WITH_AI</div>
        <h2 class="section-title">AI Collaboration</h2>
        
        <div class="ai-content">
          <div class="ai-block">
            <h3>Context is Key</h3>
            <p>The AI automatically knows about the file you are currently looking at. You don't need to copy-paste code into the chat.</p>
            <ul>
              <li><strong>Ask questions</strong> - "Explain this function", "Refactor this to be more performant", "Find the bug in this logic"</li>
              <li><strong>Tasking</strong> - "Create a new component for X", "Update the CSS to match this design", "Run the tests and fix the failure"</li>
            </ul>
          </div>
          
          <div class="ai-block ai-block-highlight">
            <h3>Reviewing Changes</h3>
            <p>When the AI writes code, it doesn't just overwrite your work. It proposes <strong>Edits</strong>.</p>
            <ol>
              <li>The AI will indicate it is writing code.</li>
              <li>You will see <span class="diff-add">Green</span> (added) and <span class="diff-remove">Red</span> (removed) lines appear directly in your editor.</li>
              <li><strong>Review</strong> the changes carefully.</li>
              <li><strong>Accept/Reject</strong>: Click Accept (✓) to apply, or Reject (✗) to discard. Use "Accept All" or "Reject All" for multiple changes.</li>
            </ol>
          </div>
        </div>
      </div>
    </section>

    <!-- Settings Section -->
    <section id="settings" class="docs-section">
      <div class="container">
        <div class="section-label">[007] SETTINGS</div>
        <h2 class="section-title">Configuration</h2>
        
        <div class="settings-grid">
          <div class="setting-card">
            <div class="setting-header">
              <span class="setting-icon">👤</span>
              <h3>Account Tab</h3>
            </div>
            <ul>
              <li><strong>API Key</strong> - Your Zaguán subscription key for AI features</li>
              <li><strong>Manage Subscription</strong> - Link to your account dashboard</li>
            </ul>
          </div>
          
          <div class="setting-card">
            <div class="setting-header">
              <span class="setting-icon">💾</span>
              <h3>Storage Tab</h3>
            </div>
            <ul>
              <li><strong>Storage Mode</strong> - Local (.zblade/ folder) or Server storage</li>
              <li><strong>Sync Metadata</strong> - Sync conversation titles to server (no code)</li>
              <li><strong>Enable Cache</strong> - Cache recent context for faster access</li>
              <li><strong>Max Cache Size</strong> - Configure cache (10-500 MB)</li>
            </ul>
          </div>
          
          <div class="setting-card">
            <div class="setting-header">
              <span class="setting-icon">🧠</span>
              <h3>Context Tab</h3>
              <span class="setting-tag">PER-PROJECT</span>
            </div>
            <ul>
              <li><strong>Max Context Tokens</strong> - Control context sent to AI (2K-32K)</li>
              <li><strong>Enable Compression</strong> - Remote (cloud) or Local compression</li>
              <li><strong>Allow .gitignored Files</strong> - Include gitignored files in AI context</li>
            </ul>
          </div>
        </div>
      </div>
    </section>

    <!-- Project Instructions Section -->
    <section id="project-instructions" class="docs-section section-alt">
      <div class="container">
        <div class="section-label">[008] PROJECT_INSTRUCTIONS</div>
        <h2 class="section-title">Customize Your AI</h2>
        
        <div class="instructions-content">
          <p class="instructions-intro">
            Zaguán Blade creates a <code class="inline-code">.zblade/</code> folder in your project with an <code class="inline-code">instructions.md</code> file. Edit this file to provide project-specific instructions to the AI.
          </p>
          
          <div class="code-block">
            <div class="code-header">
              <span class="code-filename">.zblade/instructions.md</span>
              <span class="code-lang">markdown</span>
            </div>
            <pre><code># Project Instructions

## Project Overview
&lt;!-- Describe your project briefly --&gt;

## Coding Guidelines
&lt;!-- Add any specific coding conventions or patterns to follow --&gt;

## Important Files
&lt;!-- List key files the AI should be aware of --&gt;</code></pre>
          </div>
          
          <p class="instructions-note">The AI reads this file to understand your project's conventions and requirements.</p>
        </div>
      </div>
    </section>

    <!-- Editor Features Section -->
    <section id="features" class="docs-section">
      <div class="container">
        <div class="section-label">[009] EDITOR_FEATURES</div>
        <h2 class="section-title">Additional Features</h2>
        
        <div class="features-list">
          <div class="feature-detail">
            <h3>Context Menu (Right-Click)</h3>
            <div class="feature-tags">
              <span>Cut / Copy / Paste</span>
              <span>Undo / Redo</span>
              <span>Find</span>
              <span>Rename Symbol</span>
              <span>Show Call Graph</span>
            </div>
          </div>
          
          <div class="feature-detail">
            <h3>File Explorer Context Menu</h3>
            <div class="feature-tags">
              <span>New File / Folder</span>
              <span>Rename</span>
              <span>Delete</span>
              <span>Cut / Copy / Paste</span>
              <span>Open in Terminal</span>
            </div>
          </div>
          
          <div class="feature-detail feature-detail-highlight">
            <h3>Markdown Support</h3>
            <p>Markdown files automatically enable line wrapping. Use <kbd>Ctrl+E</kbd> to toggle between Edit and View modes.</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Screenshot Capture Section -->
    <section id="screenshot" class="docs-section section-alt">
      <div class="container">
        <div class="section-label">[010] SCREENSHOT_CAPTURE</div>
        <h2 class="section-title">Screenshot Capture</h2>
        <p class="section-desc">Attach screenshots to your chat messages to give the AI visual context. Access capture options from the <strong>Feature Menu</strong> (grid icon) in the Command Center.</p>
        
        <div class="screenshot-grid">
          <div class="screenshot-card">
            <div class="screenshot-icon">🖼</div>
            <h3>Capture Window</h3>
            <p>Select a window from the picker and attach a full screenshot of it.</p>
          </div>
          <div class="screenshot-card">
            <div class="screenshot-icon">✂</div>
            <h3>Capture Region</h3>
            <p>Select a window, then drag to crop a specific region from it.</p>
          </div>
        </div>
        
        <div class="screenshot-notes">
          <h3>Platform Notes (Linux / X11)</h3>
          <p>On X11-based desktops (e.g., Openbox, i3, Fluxbox), window capture has the following limitations:</p>
          <ul>
            <li><strong>Current workspace only</strong> - The window picker only shows windows on your active workspace. Windows on other virtual desktops cannot be captured because X11 does not render off-screen windows.</li>
            <li><strong>Window must be visible</strong> - The target window must be visible and not fully obscured by another window. If a window is covered, the capture may return a black image. <strong>Click the window to bring it to the front before capturing.</strong></li>
            <li><strong>Compositors help</strong> - If you run a compositor such as <code class="inline-code">picom</code> or <code class="inline-code">compton</code>, these limitations are largely eliminated - compositors maintain off-screen buffers for all windows, enabling capture of obscured or unfocused windows.</li>
          </ul>
          <p class="screenshot-note-wayland">These limitations do not apply to <strong>Wayland</strong> desktops (GNOME, KDE Plasma 6) or <strong>macOS</strong>, which use compositing by default.</p>
        </div>
      </div>
    </section>

    <!-- Privacy Section -->
    <section id="privacy" class="docs-section">
      <div class="container">
        <div class="section-label">[011] PRIVACY_&_DATA</div>
        <h2 class="section-title">Your Data, Your Control</h2>
        
        <div class="privacy-grid">
          <div class="privacy-item">
            <div class="privacy-icon">🚫</div>
            <h3>No Telemetry</h3>
            <p>Zaguán Blade does not collect usage telemetry.</p>
          </div>
          <div class="privacy-item">
            <div class="privacy-icon">🔒</div>
            <h3>Local Storage Mode</h3>
            <p>When using local storage, your code and conversations never leave your machine.</p>
          </div>
          <div class="privacy-item">
            <div class="privacy-icon">🔐</div>
            <h3>Server Storage Mode</h3>
            <p>Conversations are encrypted on Zaguán servers.</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Local AI System Prompts Section -->
    <section id="local-ai-prompts" class="docs-section">
      <div class="container">
        <div class="section-label">[012] LOCAL_AI_SYSTEM_PROMPTS</div>
        <h2 class="section-title">Custom System Prompts</h2>
        
        <div class="instructions-content">
          <p class="instructions-intro">
            When using Local AI models (Ollama or OpenAI-compatible), you can customize the system prompt for each model by creating a file with the exact model name.
          </p>
          
          <div class="prompt-paths">
            <div class="prompt-path-item">
              <strong>Linux:</strong> <code class="inline-code">~/.config/zblade/prompts/[exact-model-name].md</code>
            </div>
            <div class="prompt-path-item">
              <strong>Windows:</strong> <code class="inline-code">%APPDATA%\zblade\prompts\[exact-model-name].md</code>
            </div>
            <div class="prompt-path-item">
              <strong>macOS:</strong> <code class="inline-code">~/Library/Application Support/zblade/prompts/[exact-model-name].md</code>
            </div>
          </div>
          
          <div class="code-block">
            <div class="code-header">
              <span class="code-filename">~/.config/zblade/prompts/glm-4.7-flash:Q4_K_M.md</span>
              <span class="code-lang">markdown</span>
            </div>
            <pre><code>You are an AI coding assistant in Zaguán Blade. Help users write, understand, and improve code efficiently.

# Core Rules

- When asked who and what you are, you are "glm-4.7-flash, an AI coding assistant in Zaguán Blade."
- Understand context before acting
- Match existing code style and conventions
- Verify libraries exist before using them (check imports, package.json, etc.)
- Use absolute file paths
- Read files before editing them
- Prefer symbol_search -> symbol_resolve -> read_file_range for code understanding
- Use grep_search when you need text-pattern search rather than symbol lookup
- Add comments sparingly - focus on "why" not "what"
- If unclear, ask for clarification

# Communication

- Be concise and direct
- Use markdown for code blocks
- No preamble ("Great!", "Certainly!")
- Jump straight to the task

# Available Tools

**get_editor_state** - Get active file, cursor position, and open files
**symbol_search** - Find functions, classes, methods, and types by name
**symbol_resolve** - Resolve a symbol to its exact file and line range
**symbol_references** - Find where a symbol is used
**read_file_range** - Read targeted line ranges from a file
**read_file** - Read full file contents when broader context is needed
**get_workspace_structure** - Get the project directory tree
**grep_search** - Search for text or regex patterns across files
**apply_patch** - Make precise edits to existing files
**write_file** - Create or overwrite a file
**run_command** - Execute shell commands
**todo_write** - Track multi-step work and show progress</code></pre>
          </div>
          
          <p class="instructions-note">
            We encourage you to try Local AI and <a href="https://github.com/ZaguanLabs/ZaguanBlade/issues" target="_blank" rel="noopener">report any bugs or issues</a> you encounter!
          </p>
        </div>
      </div>
    </section>

    <!-- Tool Calls Reference Section -->
    <section id="tool-calls" class="docs-section section-alt">
      <div class="container">
        <div class="section-label">[013] TOOL_CALLS_REFERENCE</div>
        <h2 class="section-title">Tool Calls Reference</h2>
        
        <div class="instructions-content">
          <p class="instructions-intro">
            When creating custom system prompts for Local AI models, you'll need to include definitions for the tool calls Zaguán Blade supports. This reference document describes all available tools with their parameters and usage examples.
          </p>
          
          <div class="tool-calls-cta">
            <a href="/tools" class="tool-calls-link">
              <span class="tool-calls-icon">📖</span>
              <span class="tool-calls-text">
                <strong>View Complete Tool Calls Reference</strong>
                <p class="tool-calls-subtext">Full documentation of all available tool calls for Local AI system prompts</p>
              </span>
              <span class="tool-calls-arrow">→</span>
            </a>
          </div>
        </div>
      </div>
    </section>

    <!-- Known Bugs Section -->
    <section id="known-bugs" class="docs-section section-alt">
      <div class="container">
        <div class="section-label">[014] KNOWN_BUGS</div>
        <h2 class="section-title">Known Issues</h2>
        <p class="section-desc">As an alpha release, there are some known limitations and bugs we're actively working on:</p>
        
        <div class="bugs-grid">
          <div class="bug-card">
            <div class="bug-icon">⚠️</div>
            <h3>Local AI Support</h3>
            <p>Local AI support may not work consistently in all scenarios. We're actively improving reliability.</p>
          </div>
          
          <div class="bug-card">
            <div class="bug-icon">📝</div>
            <h3>Search Functionality</h3>
            <p>Global search across project files is not yet implemented. The search icon has been hidden until this feature is ready.</p>
          </div>
          
          <div class="bug-card">
            <div class="bug-icon">📝</div>
            <h3>Diff/Patch View</h3>
            <p>The Diff/Patch view may not be 100% complete. Edge cases in code review might behave unexpectedly.</p>
          </div>
          
          <div class="bug-card">
            <div class="bug-icon">💾</div>
            <h3>Local Storage Mode</h3>
            <p>Local Storage Mode hasn't been extensively tested. Use with caution and report any issues.</p>
          </div>
        </div>
        
        <div class="bug-cta">
          <p>Found a bug not listed here? Please <a href="https://github.com/ZaguanLabs/ZaguanBlade/issues" target="_blank" rel="noopener">report it on GitHub</a>.</p>
        </div>
      </div>
    </section>

    <!-- Support Section -->
    <section id="support" class="docs-section">
      <div class="container">
        <div class="section-label">[015] SUPPORT_&_FEEDBACK</div>
        <div class="support-card">
          <div class="support-header">
            <h2>Alpha Release</h2>
            <span class="status-badge">FEATURE_INCOMPLETE</span>
          </div>
          <p class="support-lead">
            We define "Alpha" as "Feature incomplete, but good enough to be useful."
          </p>
          <p>You <em>will</em> encounter bugs. When you do:</p>
          <div class="support-actions">
            <a href="https://github.com/ZaguanLabs/ZaguanBlade/issues" target="_blank" rel="noopener" class="support-link">
              <span>🐛 Report Bugs</span>
              <span class="link-arrow">→</span>
            </a>
            <a href="https://github.com/ZaguanLabs/ZaguanBlade/issues" target="_blank" rel="noopener" class="support-link">
              <span>💡 Feature Requests</span>
              <span class="link-arrow">→</span>
            </a>
          </div>
          <p class="support-thanks">Thank you for being part of the future of coding.</p>
        </div>
      </div>
    </section>
  </main>
</BaseLayout>

<style>
  /* Docs Page Specific Styles */
  
  /* Hero */
  .docs-hero {
    min-height: 35vh;
    display: flex;
    align-items: center;
    padding-top: calc(var(--space-2xl) + 60px);
    padding-bottom: var(--space-lg);
    background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-secondary) 100%);
    border-bottom: 1px solid var(--color-border);
  }
  
  .docs-hero .hero-content {
    max-width: 800px;
  }
  
  .docs-hero .hero-title {
    margin-bottom: var(--space-md);
  }
  
  .title-line-1 {
    display: block;
    font-size: clamp(2rem, 6vw, 3.5rem);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -0.03em;
    text-transform: uppercase;
  }
  
  .title-accent {
    display: block;
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    font-weight: 700;
    color: var(--color-accent);
    font-family: var(--font-mono);
    margin-top: 0.25rem;
    letter-spacing: 0.05em;
  }
  
  /* Sections */
  .docs-section {
    padding: var(--space-3xl) 0;
  }
  
  .section-alt {
    background: var(--color-bg-secondary);
  }
  
  .section-label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--color-accent);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: var(--space-md);
  }
  
  .section-title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-xl);
  }
  
  .section-desc {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-xl);
  }
  
  /* Concept Section */
  .concept-card {
    background: linear-gradient(135deg, var(--color-bg-elevated) 0%, var(--color-bg-secondary) 100%);
    border: 2px solid var(--color-accent);
    padding: var(--space-2xl);
    position: relative;
  }
  
  .concept-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-lg);
    flex-wrap: wrap;
    gap: var(--space-sm);
  }
  
  .concept-header h2 {
    font-size: 2rem;
    font-weight: 800;
    text-transform: uppercase;
  }
  
  .concept-tag {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    padding: 0.4rem 0.8rem;
    background: var(--color-accent);
    color: var(--color-bg);
    font-weight: 700;
    letter-spacing: 0.1em;
  }
  
  .concept-lead {
    font-size: 1.25rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-xl);
    max-width: 800px;
  }
  
  .concept-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-lg);
  }
  
  .concept-item {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    padding: var(--space-lg);
    transition: all 0.3s ease;
  }
  
  .concept-item:hover {
    border-color: var(--color-accent);
    transform: translateY(-4px);
  }
  
  .concept-icon {
    font-size: 2rem;
    margin-bottom: var(--space-sm);
  }
  
  .concept-item h3 {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: var(--space-xs);
    text-transform: uppercase;
  }
  
  .concept-item p {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
  }
  
  /* Steps Grid */
  .steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-lg);
  }
  
  .step-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    padding: var(--space-xl);
    position: relative;
    transition: all 0.3s ease;
  }
  
  .step-card:hover {
    border-color: var(--color-accent);
    transform: translateX(8px);
  }
  
  .step-highlight {
    border-color: var(--color-accent);
    background: var(--color-bg-elevated);
  }
  
  .step-highlight::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--color-accent);
  }
  
  .step-num {
    font-family: var(--font-mono);
    font-size: 3rem;
    font-weight: 900;
    color: transparent;
    -webkit-text-stroke: 1px var(--color-accent);
    text-stroke: 1px var(--color-accent);
    line-height: 1;
    margin-bottom: var(--space-md);
  }
  
  .step-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
  }
  
  .step-card p {
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-sm);
  }
  
  .step-card a {
    color: var(--color-accent);
    text-decoration: underline;
  }
  
  .step-card a:hover {
    color: var(--color-text);
  }
  
  .step-note {
    font-size: 0.85rem;
    color: var(--color-text-tertiary);
    font-style: italic;
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-border);
  }
  
  .step-options {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
  }
  
  .option-tag {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    padding: 0.3rem 0.6rem;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    text-transform: uppercase;
  }
  
  .option-recommended {
    border-color: var(--color-accent);
    color: var(--color-accent);
  }
  
  /* Interface Grid */
  .interface-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-lg);
  }
  
  .interface-card {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    padding: var(--space-lg);
    transition: all 0.3s ease;
  }
  
  .interface-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-4px);
  }
  
  .interface-highlight {
    border-color: var(--color-accent);
    background: var(--color-bg-elevated);
    position: relative;
  }
  
  .interface-highlight::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--color-accent);
  }
  
  .interface-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
  }
  
  .interface-icon {
    font-size: 1.5rem;
  }
  
  .interface-header h3 {
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: uppercase;
    flex: 1;
  }
  
  .interface-tag {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    padding: 0.2rem 0.5rem;
    background: var(--color-accent);
    color: var(--color-bg);
    font-weight: 700;
    letter-spacing: 0.05em;
  }
  
  .interface-list {
    list-style: none;
  }
  
  .interface-list li {
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: 0.95rem;
  }
  
  .interface-list li:last-child {
    border-bottom: none;
  }
  
  .interface-list strong {
    color: var(--color-text);
  }
  
  .interface-desc {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
  }
  
  /* Shortcuts */
  .shortcuts-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-lg);
  }
  
  .shortcuts-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    padding: var(--space-lg);
  }
  
  .shortcuts-card h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: var(--space-md);
    text-transform: uppercase;
    color: var(--color-accent);
    font-family: var(--font-mono);
  }
  
  .shortcuts-table {
    width: 100%;
    border-collapse: collapse;
  }
  
  .shortcuts-table tr {
    border-bottom: 1px solid var(--color-border);
  }
  
  .shortcuts-table tr:last-child {
    border-bottom: none;
  }
  
  .shortcuts-table td {
    padding: var(--space-sm) 0;
    font-size: 0.9rem;
  }
  
  .shortcuts-table td:first-child {
    width: 45%;
  }
  
  kbd {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    padding: 0.2rem 0.5rem;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    color: var(--color-accent);
  }
  
  /* Commands */
  .commands-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-lg);
  }
  
  .command-card {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    padding: var(--space-lg);
    transition: all 0.3s ease;
  }
  
  .command-card:hover {
    border-color: var(--color-accent);
    transform: translateX(8px);
  }
  
  .command-syntax {
    font-family: var(--font-mono);
    font-size: 1.125rem;
    color: var(--color-accent);
    margin-bottom: var(--space-sm);
    padding: var(--space-sm);
    background: var(--color-bg);
    border-left: 3px solid var(--color-accent);
  }
  
  .command-card p {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
  }
  
  .inline-code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    padding: 0.1rem 0.3rem;
    background: var(--color-bg-elevated);
    color: var(--color-accent);
  }
  
  /* AI Section */
  .ai-content {
    display: grid;
    gap: var(--space-xl);
  }
  
  .ai-block {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    padding: var(--space-xl);
  }
  
  .ai-block h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: var(--space-md);
    text-transform: uppercase;
  }
  
  .ai-block p, .ai-block li {
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-sm);
  }
  
  .ai-block ul, .ai-block ol {
    margin-left: var(--space-lg);
    margin-top: var(--space-md);
  }
  
  .ai-block li {
    margin-bottom: var(--space-xs);
  }
  
  .ai-block strong {
    color: var(--color-text);
  }
  
  .ai-block-highlight {
    border-color: var(--color-accent);
    background: var(--color-bg-elevated);
  }
  
  .diff-add {
    color: var(--color-accent);
    font-weight: 700;
  }
  
  .diff-remove {
    color: var(--color-accent-alt);
    font-weight: 700;
  }
  
  /* Settings */
  .settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-lg);
  }
  
  .setting-card {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    padding: var(--space-lg);
    transition: all 0.3s ease;
  }
  
  .setting-card:hover {
    border-color: var(--color-accent);
  }
  
  .setting-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
  }
  
  .setting-icon {
    font-size: 1.5rem;
  }
  
  .setting-header h3 {
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: uppercase;
    flex: 1;
  }
  
  .setting-tag {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    padding: 0.2rem 0.4rem;
    background: var(--color-accent-blue);
    color: var(--color-bg);
    font-weight: 700;
    letter-spacing: 0.05em;
  }
  
  .setting-card ul {
    list-style: none;
  }
  
  .setting-card li {
    padding: var(--space-xs) 0;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    border-bottom: 1px solid var(--color-border);
  }
  
  .setting-card li:last-child {
    border-bottom: none;
  }
  
  .setting-card strong {
    color: var(--color-text);
  }
  
  /* Instructions */
  .instructions-content {
    max-width: 900px;
  }
  
  .instructions-intro {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-xl);
    line-height: 1.7;
  }
  
  .code-block {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    margin-bottom: var(--space-lg);
  }
  
  .code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-elevated);
    border-bottom: 1px solid var(--color-border);
  }
  
  .code-filename {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--color-text-secondary);
  }
  
  .code-lang {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    background: var(--color-bg-secondary);
    color: var(--color-accent);
    text-transform: uppercase;
  }
  
  .code-block pre {
    padding: var(--space-md);
    margin: 0;
    overflow-x: auto;
  }
  
  .code-block code {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
  }
  
  .instructions-note {
    color: var(--color-text-tertiary);
    font-style: italic;
  }
  
  .instructions-note a {
    color: var(--color-accent);
    text-decoration: underline;
  }
  
  .instructions-note a:hover {
    color: var(--color-text);
  }
  
  .prompt-paths {
    display: grid;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    padding: var(--space-lg);
  }
  
  .prompt-path-item {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
  }
  
  .prompt-path-item strong {
    color: var(--color-text);
    display: inline-block;
    min-width: 80px;
  }
  
  /* Known Bugs */
  .bugs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
  }
  
  .bug-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    padding: var(--space-lg);
    transition: all 0.3s ease;
  }
  
  .bug-card:hover {
    border-color: var(--color-accent-alt);
    transform: translateY(-4px);
  }
  
  .bug-icon {
    font-size: 2rem;
    margin-bottom: var(--space-sm);
  }
  
  .bug-card h3 {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
  }
  
  .bug-card p {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
  }
  
  .bug-cta {
    text-align: center;
    padding: var(--space-lg);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
  }
  
  .bug-cta p {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    margin: 0;
  }
  
  .bug-cta a {
    color: var(--color-accent);
    text-decoration: underline;
    font-weight: 600;
  }
  
  .bug-cta a:hover {
    color: var(--color-text);
  }
  
  /* Features List */
  .features-list {
    display: grid;
    gap: var(--space-xl);
  }
  
  .feature-detail {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    padding: var(--space-lg);
  }
  
  .feature-detail h3 {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: var(--space-md);
    text-transform: uppercase;
  }
  
  .feature-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
  }
  
  .feature-tags span {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    padding: 0.4rem 0.8rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
  }
  
  .feature-detail p {
    color: var(--color-text-secondary);
    line-height: 1.6;
  }
  
  .feature-detail-highlight {
    border-color: var(--color-accent);
  }
  
  /* Screenshot Capture */
  .screenshot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
  }
  
  .screenshot-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    padding: var(--space-xl);
    text-align: center;
    transition: all 0.3s ease;
  }
  
  .screenshot-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-4px);
  }
  
  .screenshot-icon {
    font-size: 2.5rem;
    margin-bottom: var(--space-md);
  }
  
  .screenshot-card h3 {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
  }
  
  .screenshot-card p {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
  }
  
  .screenshot-notes {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent-alt);
    padding: var(--space-xl);
  }
  
  .screenshot-notes h3 {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: var(--space-md);
    text-transform: uppercase;
  }
  
  .screenshot-notes p {
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-md);
  }
  
  .screenshot-notes ul {
    list-style: none;
    margin: var(--space-md) 0;
  }
  
  .screenshot-notes li {
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
  }
  
  .screenshot-notes li:last-child {
    border-bottom: none;
  }
  
  .screenshot-notes strong {
    color: var(--color-text);
  }
  
  .screenshot-note-wayland {
    font-style: italic;
    color: var(--color-text-tertiary) !important;
    margin-bottom: 0 !important;
  }
  
  /* Privacy */
  .privacy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-lg);
  }
  
  .privacy-item {
    text-align: center;
    padding: var(--space-xl);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    transition: all 0.3s ease;
  }
  
  .privacy-item:hover {
    border-color: var(--color-accent);
    transform: translateY(-4px);
  }
  
  .privacy-icon {
    font-size: 2.5rem;
    margin-bottom: var(--space-md);
  }
  
  .privacy-item h3 {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
  }
  
  .privacy-item p {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
  }
  
  /* Support */
  .support-card {
    background: linear-gradient(135deg, var(--color-bg-elevated) 0%, var(--color-bg-secondary) 100%);
    border: 2px solid var(--color-accent-alt);
    padding: var(--space-2xl);
    position: relative;
  }
  
  .support-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    flex-wrap: wrap;
  }
  
  .support-header h2 {
    font-size: 2rem;
    font-weight: 900;
    text-transform: uppercase;
  }
  
  .status-badge {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    padding: 0.4rem 0.8rem;
    background: var(--color-accent-alt);
    color: var(--color-bg);
    font-weight: 700;
    letter-spacing: 0.1em;
  }
  
  .support-lead {
    font-size: 1.25rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-md);
  }
  
  .support-card p {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-lg);
  }
  
  .support-actions {
    display: flex;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
    flex-wrap: wrap;
  }
  
  .support-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-md);
    padding: 1rem 1.5rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-weight: 600;
    transition: all 0.3s ease;
  }
  
  .support-link:hover {
    border-color: var(--color-accent);
    transform: translateX(8px);
  }
  
  .link-arrow {
    color: var(--color-accent);
    transition: transform 0.3s ease;
  }
  
  .support-link:hover .link-arrow {
    transform: translateX(4px);
  }
  
  .support-thanks {
    font-style: italic;
    color: var(--color-accent) !important;
  }
  
  /* Tool Calls Section */
  .tool-calls-cta {
    margin-top: var(--space-xl);
  }
  
  .tool-calls-link {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-xl);
    background: var(--color-bg);
    border: 2px solid var(--color-accent);
    border-radius: var(--border-radius);
    text-decoration: none;
    transition: all 0.3s ease;
  }
  
  .tool-calls-link:hover {
    background: var(--color-bg-elevated);
    transform: translateY(-4px);
  }
  
  .tool-calls-icon {
    font-size: 2.5rem;
    flex-shrink: 0;
  }
  
  .tool-calls-text {
    flex: 1;
  }
  
  .tool-calls-link strong {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--space-xs);
    text-transform: uppercase;
  }
  
  .tool-calls-subtext {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.5;
  }
  
  .tool-calls-arrow {
    font-size: 1.5rem;
    color: var(--color-accent);
    transition: transform 0.3s ease;
  }
  
  .tool-calls-link:hover .tool-calls-arrow {
    transform: translateX(4px);
  }
  
  .tool-calls-link:hover {
    border-color: var(--color-accent);
  }
  
  /* Responsive */
  @media (max-width: 768px) {
    .docs-hero {
      min-height: auto;
      padding-top: calc(var(--space-xl) + 60px);
      padding-bottom: var(--space-md);
    }
    
    .concept-header {
      flex-direction: column;
      align-items: flex-start;
    }
    
    .support-header {
      flex-direction: column;
      align-items: flex-start;
    }
    
    .support-actions {
      flex-direction: column;
    }
    
    .support-link {
      width: 100%;
      justify-content: space-between;
    }
  }
</style>