Generate interactive HTML notes to help developers UNDERSTAND complex concepts, processes, or technical details. This is a NOTE-TAKING tool (like Markdown notes, but richer HTML format) — NOT for building websites. Creates self-contained, single-file HTML explanations stored in database (private, noindex). LAYOUT SELECTION (choose based on content): (1) CENTERED NAVIGATION: Use when steps ≤ 5 OR content is simple/focused (quick tutorials, concept explanations, bug fixes). Features: pure black background, horizontal step indicators, center content. (2) SIDEBAR NAVIGATION: Use when steps ≥ 6 OR content is comprehensive (long docs, complete workflows, architecture deep-dives). Features: dark slate background, fixed left sidebar navigation. VISUAL BASELINE: Tailwind CSS (CDN), Inter/JetBrains Mono fonts, dark theme, responsive design. ENCOURAGE: animations, step indicators, code comparisons (before/after), interactive demos, smooth transitions, keyboard navigation. FOR SIDEBAR LAYOUTS: Prefer using 'App Shell' pattern (flex h-screen overflow-hidden) over 'position: fixed' to ensure stability in sandboxed environments. MERMAID SAFETY: Write in <div class="mermaid">sequenceDiagram...</div> (NO code blocks). Use dark theme - ensure text/line colors are visible on dark background. CRITICAL: participants must be ACTIVE entities (services/users) that send/receive messages - NOT passive data (Params/Payload/Config). Quote labels with spaces/CJK. Match diagram complexity to text focus. Connect multiple subgraphs with edges. CODE FORMATTING (CRITICAL): For ANY multi-line code (Python/JS/TypeScript/etc), file trees, directory structures, ALWAYS use <pre><code> tags together OR add style="white-space: pre-wrap; display: block;" to <code>. Plain <code> alone compresses whitespace and newlines causing code to display as single line. ANCHOR NAVIGATION (CRITICAL for SPA): MUST add JavaScript at end of <body>: capture all anchor clicks with preventDefault/stopPropagation, use element.scrollIntoView({behavior:'smooth'}), update URL with history.replaceState. Add scroll-margin-top to sections. Implement active state switching on nav links. Use when explaining: OAuth flows, rendering pipelines, architecture, API workflows, algorithm logic. Required: title, html_content (complete <!DOCTYPE html>), projectName. Optional: description, tags, icon_name.