[{"data":1,"prerenderedAt":62},["Reactive",2],{"blog-post-markdown-anchor-links-scrollspy-navigation-complete-guide":3},{"slug":4,"title":5,"description":6,"excerpt":7,"date":8,"category":9,"author":10,"keywords":11,"readingMinutes":12,"html":13,"headings":14,"tools":37,"related":38},"markdown-anchor-links-scrollspy-navigation-complete-guide","Markdown Anchor Links and ScrollSpy Navigation: Complete Guide for Dynamic Content Navigation and Interactive Document Structure","Master Markdown anchor links and ScrollSpy navigation for creating dynamic, interactive documentation with automatic table of contents, smooth scrolling, and real-time section highlighting. Learn implementation strategies and best practices.","Advanced Markdown anchor links and ScrollSpy navigation enable sophisticated interactive documentation that automatically tracks user scroll position, highlights active sections, and provides…","2025-10-20","Tutorial","Matthew Rathbone","markdown anchor links, scrollspy navigation, markdown table of contents, dynamic navigation, anchor link generation, markdown section navigation, interactive documentation, smooth scrolling markdown",30,"\u003Cp>Advanced Markdown anchor links and ScrollSpy navigation enable sophisticated interactive documentation that automatically tracks user scroll position, highlights active sections, and provides seamless navigation through complex content structures. By implementing dynamic anchor generation, smooth scrolling behaviors, and intelligent section tracking, technical writers can create engaging documentation experiences that adapt to user behavior and provide intuitive navigation for lengthy documents and comprehensive guides.\u003C/p>\n\u003Ch2 id=\"why-master-anchor-links-and-scrollspy-navigation\">Why Master Anchor Links and ScrollSpy Navigation?\u003C/h2>\n\u003Cp>Professional anchor link systems and ScrollSpy navigation provide essential benefits for interactive documentation:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Enhanced User Experience\u003C/strong>: Provide intuitive navigation that adapts to reading progress\u003C/li>\n\u003Cli>\u003Cstrong>Improved Accessibility\u003C/strong>: Enable keyboard navigation and screen reader compatibility\u003C/li>\n\u003Cli>\u003Cstrong>Content Discovery\u003C/strong>: Help users understand document structure and find relevant sections quickly\u003C/li>\n\u003Cli>\u003Cstrong>Professional Interface\u003C/strong>: Create modern, interactive documentation that rivals commercial platforms\u003C/li>\n\u003Cli>\u003Cstrong>Analytics Integration\u003C/strong>: Track user engagement with different document sections for content optimization\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"foundation-anchor-link-generation\">Foundation Anchor Link Generation\u003C/h2>\n\u003Ch3 id=\"automatic-anchor-generation-from-headings\">Automatic Anchor Generation from Headings\u003C/h3>\n\u003Cp>Creating systematic approaches to generate anchor links from Markdown headings:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// anchor-generator.js - Comprehensive anchor link generation system\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">MarkdownAnchorGenerator\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">options = {}\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">prefix\u003C/span>: \u003Cspan class=\"hljs-string\">''\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">separator\u003C/span>: \u003Cspan class=\"hljs-string\">'-'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">lowercase\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">removeAccents\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">maxLength\u003C/span>: \u003Cspan class=\"hljs-number\">50\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">uniqueSuffix\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">allowedChars\u003C/span>: \u003Cspan class=\"hljs-regexp\">/[a-zA-Z0-9\\-_]/g\u003C/span>,\n            ...options\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">generatedAnchors\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Set\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">anchorCounter\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateAnchor\u003C/span>(\u003Cspan class=\"hljs-params\">headingText\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> anchor = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">cleanText\u003C/span>(headingText);\n        \n        \u003Cspan class=\"hljs-comment\">// Apply transformations\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">lowercase\u003C/span>) {\n            anchor = anchor.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>();\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">removeAccents\u003C/span>) {\n            anchor = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">removeAccents\u003C/span>(anchor);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Replace spaces and special characters\u003C/span>\n        anchor = anchor\n            .\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/\\s+/g\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">separator\u003C/span>)\n            .\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/[^a-zA-Z0-9\\-_]/g\u003C/span>, \u003Cspan class=\"hljs-string\">''\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Trim separators from ends\u003C/span>\n        anchor = anchor.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">RegExp\u003C/span>(\u003Cspan class=\"hljs-string\">`^\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.separator}\u003C/span>+|\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.separator}\u003C/span>+$`\u003C/span>, \u003Cspan class=\"hljs-string\">'g'\u003C/span>), \u003Cspan class=\"hljs-string\">''\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Apply length limit\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">maxLength\u003C/span> && anchor.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">maxLength\u003C/span>) {\n            anchor = anchor.\u003Cspan class=\"hljs-title function_\">substring\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">maxLength\u003C/span>);\n            anchor = anchor.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">RegExp\u003C/span>(\u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.separator}\u003C/span>+$`\u003C/span>), \u003Cspan class=\"hljs-string\">''\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Add prefix\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">prefix\u003C/span>) {\n            anchor = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.prefix}\u003C/span>\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.separator}\u003C/span>\u003Cspan class=\"hljs-subst\">${anchor}\u003C/span>`\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Ensure uniqueness\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">uniqueSuffix\u003C/span> && \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">generatedAnchors\u003C/span>.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(anchor)) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> baseAnchor = anchor;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> count = (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">anchorCounter\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(baseAnchor) || \u003Cspan class=\"hljs-number\">0\u003C/span>) + \u003Cspan class=\"hljs-number\">1\u003C/span>;\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">anchorCounter\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(baseAnchor, count);\n            anchor = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${baseAnchor}\u003C/span>\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.separator}\u003C/span>\u003Cspan class=\"hljs-subst\">${count}\u003C/span>`\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">generatedAnchors\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(anchor);\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> anchor;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">cleanText\u003C/span>(\u003Cspan class=\"hljs-params\">text\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Remove markdown syntax\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> text\n            .\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/[*_`~]/g\u003C/span>, \u003Cspan class=\"hljs-string\">''\u003C/span>)           \u003Cspan class=\"hljs-comment\">// Remove emphasis markers\u003C/span>\n            .\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/\\[([^\\]]+)\\]\\([^)]+\\)/g\u003C/span>, \u003Cspan class=\"hljs-string\">'$1'\u003C/span>)  \u003Cspan class=\"hljs-comment\">// Extract link text\u003C/span>\n            .\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/!\\[([^\\]]*)\\]\\([^)]+\\)/g\u003C/span>, \u003Cspan class=\"hljs-string\">'$1'\u003C/span>) \u003Cspan class=\"hljs-comment\">// Extract image alt text\u003C/span>\n            .\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/#{1,6}\\s*/\u003C/span>, \u003Cspan class=\"hljs-string\">''\u003C/span>)         \u003Cspan class=\"hljs-comment\">// Remove heading markers\u003C/span>\n            .\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/\\s+/g\u003C/span>, \u003Cspan class=\"hljs-string\">' '\u003C/span>)             \u003Cspan class=\"hljs-comment\">// Normalize whitespace\u003C/span>\n            .\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">removeAccents\u003C/span>(\u003Cspan class=\"hljs-params\">text\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> accentMap = {\n            \u003Cspan class=\"hljs-string\">'á'\u003C/span>: \u003Cspan class=\"hljs-string\">'a'\u003C/span>, \u003Cspan class=\"hljs-string\">'à'\u003C/span>: \u003Cspan class=\"hljs-string\">'a'\u003C/span>, \u003Cspan class=\"hljs-string\">'ä'\u003C/span>: \u003Cspan class=\"hljs-string\">'a'\u003C/span>, \u003Cspan class=\"hljs-string\">'â'\u003C/span>: \u003Cspan class=\"hljs-string\">'a'\u003C/span>, \u003Cspan class=\"hljs-string\">'ā'\u003C/span>: \u003Cspan class=\"hljs-string\">'a'\u003C/span>, \u003Cspan class=\"hljs-string\">'ã'\u003C/span>: \u003Cspan class=\"hljs-string\">'a'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'é'\u003C/span>: \u003Cspan class=\"hljs-string\">'e'\u003C/span>, \u003Cspan class=\"hljs-string\">'è'\u003C/span>: \u003Cspan class=\"hljs-string\">'e'\u003C/span>, \u003Cspan class=\"hljs-string\">'ë'\u003C/span>: \u003Cspan class=\"hljs-string\">'e'\u003C/span>, \u003Cspan class=\"hljs-string\">'ê'\u003C/span>: \u003Cspan class=\"hljs-string\">'e'\u003C/span>, \u003Cspan class=\"hljs-string\">'ē'\u003C/span>: \u003Cspan class=\"hljs-string\">'e'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'í'\u003C/span>: \u003Cspan class=\"hljs-string\">'i'\u003C/span>, \u003Cspan class=\"hljs-string\">'ì'\u003C/span>: \u003Cspan class=\"hljs-string\">'i'\u003C/span>, \u003Cspan class=\"hljs-string\">'ï'\u003C/span>: \u003Cspan class=\"hljs-string\">'i'\u003C/span>, \u003Cspan class=\"hljs-string\">'î'\u003C/span>: \u003Cspan class=\"hljs-string\">'i'\u003C/span>, \u003Cspan class=\"hljs-string\">'ī'\u003C/span>: \u003Cspan class=\"hljs-string\">'i'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'ó'\u003C/span>: \u003Cspan class=\"hljs-string\">'o'\u003C/span>, \u003Cspan class=\"hljs-string\">'ò'\u003C/span>: \u003Cspan class=\"hljs-string\">'o'\u003C/span>, \u003Cspan class=\"hljs-string\">'ö'\u003C/span>: \u003Cspan class=\"hljs-string\">'o'\u003C/span>, \u003Cspan class=\"hljs-string\">'ô'\u003C/span>: \u003Cspan class=\"hljs-string\">'o'\u003C/span>, \u003Cspan class=\"hljs-string\">'ō'\u003C/span>: \u003Cspan class=\"hljs-string\">'o'\u003C/span>, \u003Cspan class=\"hljs-string\">'õ'\u003C/span>: \u003Cspan class=\"hljs-string\">'o'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'ú'\u003C/span>: \u003Cspan class=\"hljs-string\">'u'\u003C/span>, \u003Cspan class=\"hljs-string\">'ù'\u003C/span>: \u003Cspan class=\"hljs-string\">'u'\u003C/span>, \u003Cspan class=\"hljs-string\">'ü'\u003C/span>: \u003Cspan class=\"hljs-string\">'u'\u003C/span>, \u003Cspan class=\"hljs-string\">'û'\u003C/span>: \u003Cspan class=\"hljs-string\">'u'\u003C/span>, \u003Cspan class=\"hljs-string\">'ū'\u003C/span>: \u003Cspan class=\"hljs-string\">'u'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'ñ'\u003C/span>: \u003Cspan class=\"hljs-string\">'n'\u003C/span>, \u003Cspan class=\"hljs-string\">'ç'\u003C/span>: \u003Cspan class=\"hljs-string\">'c'\u003C/span>\n        };\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> text.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/[áàäâāãéèëêēíìïîīóòöôōõúùüûūñç]/gi\u003C/span>, \u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">char\u003C/span> =>\u003C/span> \n            accentMap[char.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>()] || char\n        );\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">processMarkdownDocument\u003C/span>(\u003Cspan class=\"hljs-params\">markdownContent\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> lines = markdownContent.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> processedLines = [];\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tocEntries = [];\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = \u003Cspan class=\"hljs-number\">0\u003C/span>; i < lines.\u003Cspan class=\"hljs-property\">length\u003C/span>; i++) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> line = lines[i];\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> headingMatch = line.\u003Cspan class=\"hljs-title function_\">match\u003C/span>(\u003Cspan class=\"hljs-regexp\">/^(#{1,6})\\s+(.+)$/\u003C/span>);\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (headingMatch) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> level = headingMatch[\u003Cspan class=\"hljs-number\">1\u003C/span>].\u003Cspan class=\"hljs-property\">length\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> headingText = headingMatch[\u003Cspan class=\"hljs-number\">2\u003C/span>];\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> anchor = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateAnchor\u003C/span>(headingText);\n                \n                \u003Cspan class=\"hljs-comment\">// Create anchored heading\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> anchoredHeading = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${headingMatch[\u003Cspan class=\"hljs-number\">1\u003C/span>]}\u003C/span> \u003Cspan class=\"hljs-subst\">${headingText}\u003C/span> {#\u003Cspan class=\"hljs-subst\">${anchor}\u003C/span>}`\u003C/span>;\n                processedLines.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(anchoredHeading);\n                \n                \u003Cspan class=\"hljs-comment\">// Track for TOC generation\u003C/span>\n                tocEntries.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                    level,\n                    \u003Cspan class=\"hljs-attr\">text\u003C/span>: headingText,\n                    anchor,\n                    \u003Cspan class=\"hljs-attr\">line\u003C/span>: i\n                });\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                processedLines.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(line);\n            }\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">content\u003C/span>: processedLines.\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>),\n            \u003Cspan class=\"hljs-attr\">toc\u003C/span>: tocEntries\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateTableOfContents\u003C/span>(\u003Cspan class=\"hljs-params\">tocEntries, options = {}\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tocOptions = {\n            \u003Cspan class=\"hljs-attr\">maxDepth\u003C/span>: \u003Cspan class=\"hljs-number\">6\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">minDepth\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">ordered\u003C/span>: \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">className\u003C/span>: \u003Cspan class=\"hljs-string\">'table-of-contents'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">linkClassName\u003C/span>: \u003Cspan class=\"hljs-string\">'toc-link'\u003C/span>,\n            ...options\n        };\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> filteredEntries = tocEntries.\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">entry\u003C/span> =>\u003C/span> \n            entry.\u003Cspan class=\"hljs-property\">level\u003C/span> >= tocOptions.\u003Cspan class=\"hljs-property\">minDepth\u003C/span> && entry.\u003Cspan class=\"hljs-property\">level\u003C/span> <= tocOptions.\u003Cspan class=\"hljs-property\">maxDepth\u003C/span>\n        );\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (filteredEntries.\u003Cspan class=\"hljs-property\">length\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">''\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> listType = tocOptions.\u003Cspan class=\"hljs-property\">ordered\u003C/span> ? \u003Cspan class=\"hljs-string\">'ol'\u003C/span> : \u003Cspan class=\"hljs-string\">'ul'\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> html = \u003Cspan class=\"hljs-string\">`<\u003Cspan class=\"hljs-subst\">${listType}\u003C/span> class="\u003Cspan class=\"hljs-subst\">${tocOptions.className}\u003C/span>">`\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> currentLevel = tocOptions.\u003Cspan class=\"hljs-property\">minDepth\u003C/span>;\n        \n        filteredEntries.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">entry, index\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> nextEntry = filteredEntries[index + \u003Cspan class=\"hljs-number\">1\u003C/span>];\n            \n            \u003Cspan class=\"hljs-comment\">// Handle level changes\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">while\u003C/span> (currentLevel < entry.\u003Cspan class=\"hljs-property\">level\u003C/span>) {\n                html += \u003Cspan class=\"hljs-string\">`<\u003Cspan class=\"hljs-subst\">${listType}\u003C/span>>`\u003C/span>;\n                currentLevel++;\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">while\u003C/span> (currentLevel > entry.\u003Cspan class=\"hljs-property\">level\u003C/span>) {\n                html += \u003Cspan class=\"hljs-string\">`</\u003Cspan class=\"hljs-subst\">${listType}\u003C/span>></li>`\u003C/span>;\n                currentLevel--;\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Add list item\u003C/span>\n            html += \u003Cspan class=\"hljs-string\">`<li><a href="#\u003Cspan class=\"hljs-subst\">${entry.anchor}\u003C/span>" class="\u003Cspan class=\"hljs-subst\">${tocOptions.linkClassName}\u003C/span>" data-level="\u003Cspan class=\"hljs-subst\">${entry.level}\u003C/span>">\u003Cspan class=\"hljs-subst\">${entry.text}\u003C/span></a>`\u003C/span>;\n            \n            \u003Cspan class=\"hljs-comment\">// Close item if next is same or lower level\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!nextEntry || nextEntry.\u003Cspan class=\"hljs-property\">level\u003C/span> <= entry.\u003Cspan class=\"hljs-property\">level\u003C/span>) {\n                html += \u003Cspan class=\"hljs-string\">'</li>'\u003C/span>;\n            }\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Close remaining open lists\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">while\u003C/span> (currentLevel >= tocOptions.\u003Cspan class=\"hljs-property\">minDepth\u003C/span>) {\n            html += \u003Cspan class=\"hljs-string\">`</\u003Cspan class=\"hljs-subst\">${listType}\u003C/span>>`\u003C/span>;\n            currentLevel--;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> html;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateNavigationData\u003C/span>(\u003Cspan class=\"hljs-params\">tocEntries\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> tocEntries.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">entry\u003C/span> =>\u003C/span> ({\n            \u003Cspan class=\"hljs-attr\">id\u003C/span>: entry.\u003Cspan class=\"hljs-property\">anchor\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">title\u003C/span>: entry.\u003Cspan class=\"hljs-property\">text\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">level\u003C/span>: entry.\u003Cspan class=\"hljs-property\">level\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">href\u003C/span>: \u003Cspan class=\"hljs-string\">`#\u003Cspan class=\"hljs-subst\">${entry.anchor}\u003C/span>`\u003C/span>\n        }));\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Usage example\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> anchorGenerator = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">MarkdownAnchorGenerator\u003C/span>({\n    \u003Cspan class=\"hljs-attr\">prefix\u003C/span>: \u003Cspan class=\"hljs-string\">'section'\u003C/span>,\n    \u003Cspan class=\"hljs-attr\">maxLength\u003C/span>: \u003Cspan class=\"hljs-number\">40\u003C/span>,\n    \u003Cspan class=\"hljs-attr\">uniqueSuffix\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>\n});\n\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> markdownContent = \u003Cspan class=\"hljs-string\">`\n# Getting Started with Markdown\n\n## Installation and Setup\n\n### Prerequisites\n\nBefore you begin, ensure you have the following installed:\n\n### System Requirements\n\nYour system should meet these minimum requirements:\n\n## Basic Syntax Overview\n\n### Headings and Text Formatting\n\nLearn the fundamentals of text formatting:\n\n### Lists and Links\n\nMaster list creation and link syntax:\n`\u003C/span>;\n\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> result = anchorGenerator.\u003Cspan class=\"hljs-title function_\">processMarkdownDocument\u003C/span>(markdownContent);\n\u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'Processed Content:'\u003C/span>, result.\u003Cspan class=\"hljs-property\">content\u003C/span>);\n\u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'Table of Contents:'\u003C/span>, anchorGenerator.\u003Cspan class=\"hljs-title function_\">generateTableOfContents\u003C/span>(result.\u003Cspan class=\"hljs-property\">toc\u003C/span>));\n\u003C/code>\u003C/pre>\u003Ch3 id=\"smart-anchor-link-validation\">Smart Anchor Link Validation\u003C/h3>\n\u003Cp>Implementing comprehensive validation for anchor link integrity:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// anchor-validator.js - Anchor link validation and management system\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">AnchorLinkValidator\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">anchorRegistry\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">linkReferences\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">validationErrors\u003C/span> = [];\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">warnings\u003C/span> = [];\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">validateDocument\u003C/span>(\u003Cspan class=\"hljs-params\">markdownContent\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">reset\u003C/span>();\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> lines = markdownContent.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> currentLineNumber = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// First pass: collect all anchors and links\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> line \u003Cspan class=\"hljs-keyword\">of\u003C/span> lines) {\n            currentLineNumber++;\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">processLine\u003C/span>(line, currentLineNumber);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Second pass: validate references\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">validateReferences\u003C/span>();\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">isValid\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">validationErrors\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">errors\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">validationErrors\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">warnings\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">warnings\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">anchors\u003C/span>: \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">anchorRegistry\u003C/span>.\u003Cspan class=\"hljs-title function_\">entries\u003C/span>()),\n            \u003Cspan class=\"hljs-attr\">links\u003C/span>: \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">linkReferences\u003C/span>.\u003Cspan class=\"hljs-title function_\">entries\u003C/span>())\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">processLine\u003C/span>(\u003Cspan class=\"hljs-params\">line, lineNumber\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Find heading anchors\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">findHeadingAnchors\u003C/span>(line, lineNumber);\n        \n        \u003Cspan class=\"hljs-comment\">// Find explicit anchor definitions\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">findExplicitAnchors\u003C/span>(line, lineNumber);\n        \n        \u003Cspan class=\"hljs-comment\">// Find link references\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">findLinkReferences\u003C/span>(line, lineNumber);\n        \n        \u003Cspan class=\"hljs-comment\">// Find HTML anchor elements\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">findHtmlAnchors\u003C/span>(line, lineNumber);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">findHeadingAnchors\u003C/span>(\u003Cspan class=\"hljs-params\">line, lineNumber\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Standard heading with explicit anchor\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> explicitAnchorMatch = line.\u003Cspan class=\"hljs-title function_\">match\u003C/span>(\u003Cspan class=\"hljs-regexp\">/^(#{1,6})\\s+(.+?)\\s*\\{#([a-zA-Z0-9\\-_]+)\\}$/\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (explicitAnchorMatch) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> level = explicitAnchorMatch[\u003Cspan class=\"hljs-number\">1\u003C/span>].\u003Cspan class=\"hljs-property\">length\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> text = explicitAnchorMatch[\u003Cspan class=\"hljs-number\">2\u003C/span>];\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> anchor = explicitAnchorMatch[\u003Cspan class=\"hljs-number\">3\u003C/span>];\n            \n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerAnchor\u003C/span>(anchor, {\n                \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'heading'\u003C/span>,\n                level,\n                text,\n                lineNumber,\n                \u003Cspan class=\"hljs-attr\">explicit\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>\n            });\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Standard heading without explicit anchor\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> headingMatch = line.\u003Cspan class=\"hljs-title function_\">match\u003C/span>(\u003Cspan class=\"hljs-regexp\">/^(#{1,6})\\s+(.+)$/\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (headingMatch) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> level = headingMatch[\u003Cspan class=\"hljs-number\">1\u003C/span>].\u003Cspan class=\"hljs-property\">length\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> text = headingMatch[\u003Cspan class=\"hljs-number\">2\u003C/span>];\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> anchor = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateImplicitAnchor\u003C/span>(text);\n            \n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerAnchor\u003C/span>(anchor, {\n                \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'heading'\u003C/span>,\n                level,\n                text,\n                lineNumber,\n                \u003Cspan class=\"hljs-attr\">explicit\u003C/span>: \u003Cspan class=\"hljs-literal\">false\u003C/span>\n            });\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">findExplicitAnchors\u003C/span>(\u003Cspan class=\"hljs-params\">line, lineNumber\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// HTML anchor tags\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> anchorMatches = line.\u003Cspan class=\"hljs-title function_\">matchAll\u003C/span>(\u003Cspan class=\"hljs-regexp\">/<a\\s+(?:[^>]*\\s+)?(?:name|id)="([^"]+)"[^>]*>/gi\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> match \u003Cspan class=\"hljs-keyword\">of\u003C/span> anchorMatches) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> anchor = match[\u003Cspan class=\"hljs-number\">1\u003C/span>];\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerAnchor\u003C/span>(anchor, {\n                \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'html-anchor'\u003C/span>,\n                lineNumber,\n                \u003Cspan class=\"hljs-attr\">explicit\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>\n            });\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">findLinkReferences\u003C/span>(\u003Cspan class=\"hljs-params\">line, lineNumber\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Internal anchor links\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> anchorLinkMatches = line.\u003Cspan class=\"hljs-title function_\">matchAll\u003C/span>(\u003Cspan class=\"hljs-regexp\">/\\[([^\\]]+)\\]\\(#([^)]+)\\)/g\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> match \u003Cspan class=\"hljs-keyword\">of\u003C/span> anchorLinkMatches) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> linkText = match[\u003Cspan class=\"hljs-number\">1\u003C/span>];\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> targetAnchor = match[\u003Cspan class=\"hljs-number\">2\u003C/span>];\n            \n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerLinkReference\u003C/span>(targetAnchor, {\n                \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'internal-link'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">text\u003C/span>: linkText,\n                lineNumber,\n                \u003Cspan class=\"hljs-attr\">fullMatch\u003C/span>: match[\u003Cspan class=\"hljs-number\">0\u003C/span>]\n            });\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// HTML anchor links\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> htmlLinkMatches = line.\u003Cspan class=\"hljs-title function_\">matchAll\u003C/span>(\u003Cspan class=\"hljs-regexp\">/<a\\s+(?:[^>]*\\s+)?href="#([^"]+)"[^>]*>/gi\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> match \u003Cspan class=\"hljs-keyword\">of\u003C/span> htmlLinkMatches) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> targetAnchor = match[\u003Cspan class=\"hljs-number\">1\u003C/span>];\n            \n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerLinkReference\u003C/span>(targetAnchor, {\n                \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'html-link'\u003C/span>,\n                lineNumber,\n                \u003Cspan class=\"hljs-attr\">fullMatch\u003C/span>: match[\u003Cspan class=\"hljs-number\">0\u003C/span>]\n            });\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">findHtmlAnchors\u003C/span>(\u003Cspan class=\"hljs-params\">line, lineNumber\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Find elements with id attributes that can serve as anchors\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> idMatches = line.\u003Cspan class=\"hljs-title function_\">matchAll\u003C/span>(\u003Cspan class=\"hljs-regexp\">/<[^>]+\\s+id="([^"]+)"[^>]*>/gi\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> match \u003Cspan class=\"hljs-keyword\">of\u003C/span> idMatches) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> anchor = match[\u003Cspan class=\"hljs-number\">1\u003C/span>];\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">registerAnchor\u003C/span>(anchor, {\n                \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'html-id'\u003C/span>,\n                lineNumber,\n                \u003Cspan class=\"hljs-attr\">explicit\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>\n            });\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">registerAnchor\u003C/span>(\u003Cspan class=\"hljs-params\">anchor, metadata\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">anchorRegistry\u003C/span>.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(anchor)) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> existing = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">anchorRegistry\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(anchor);\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">validationErrors\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'duplicate-anchor'\u003C/span>,\n                anchor,\n                \u003Cspan class=\"hljs-attr\">message\u003C/span>: \u003Cspan class=\"hljs-string\">`Duplicate anchor "\u003Cspan class=\"hljs-subst\">${anchor}\u003C/span>" found`\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">locations\u003C/span>: [existing.\u003Cspan class=\"hljs-property\">lineNumber\u003C/span>, metadata.\u003Cspan class=\"hljs-property\">lineNumber\u003C/span>]\n            });\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">anchorRegistry\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(anchor, metadata);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">registerLinkReference\u003C/span>(\u003Cspan class=\"hljs-params\">targetAnchor, metadata\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">linkReferences\u003C/span>.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(targetAnchor)) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">linkReferences\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(targetAnchor, []);\n        }\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">linkReferences\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(targetAnchor).\u003Cspan class=\"hljs-title function_\">push\u003C/span>(metadata);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">validateReferences\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Check for broken internal links\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> [targetAnchor, references] \u003Cspan class=\"hljs-keyword\">of\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">linkReferences\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">anchorRegistry\u003C/span>.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(targetAnchor)) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">validationErrors\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                    \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'broken-link'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">anchor\u003C/span>: targetAnchor,\n                    \u003Cspan class=\"hljs-attr\">message\u003C/span>: \u003Cspan class=\"hljs-string\">`Link references non-existent anchor "\u003Cspan class=\"hljs-subst\">${targetAnchor}\u003C/span>"`\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">references\u003C/span>: references.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">ref\u003C/span> =>\u003C/span> ({\n                        \u003Cspan class=\"hljs-attr\">line\u003C/span>: ref.\u003Cspan class=\"hljs-property\">lineNumber\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">text\u003C/span>: ref.\u003Cspan class=\"hljs-property\">text\u003C/span> || ref.\u003Cspan class=\"hljs-property\">fullMatch\u003C/span>\n                    }))\n                });\n            }\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Check for unused anchors\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> [anchor, metadata] \u003Cspan class=\"hljs-keyword\">of\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">anchorRegistry\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">linkReferences\u003C/span>.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(anchor) && metadata.\u003Cspan class=\"hljs-property\">explicit\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">warnings\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                    \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'unused-anchor'\u003C/span>,\n                    anchor,\n                    \u003Cspan class=\"hljs-attr\">message\u003C/span>: \u003Cspan class=\"hljs-string\">`Anchor "\u003Cspan class=\"hljs-subst\">${anchor}\u003C/span>" is defined but never referenced`\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">location\u003C/span>: metadata.\u003Cspan class=\"hljs-property\">lineNumber\u003C/span>\n                });\n            }\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateImplicitAnchor\u003C/span>(\u003Cspan class=\"hljs-params\">headingText\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> headingText\n            .\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>()\n            .\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/[^\\w\\s-]/g\u003C/span>, \u003Cspan class=\"hljs-string\">''\u003C/span>)\n            .\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/\\s+/g\u003C/span>, \u003Cspan class=\"hljs-string\">'-'\u003C/span>)\n            .\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/^-+|-+$/g\u003C/span>, \u003Cspan class=\"hljs-string\">''\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateValidationReport\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> report = {\n            \u003Cspan class=\"hljs-attr\">summary\u003C/span>: {\n                \u003Cspan class=\"hljs-attr\">totalAnchors\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">anchorRegistry\u003C/span>.\u003Cspan class=\"hljs-property\">size\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">totalLinks\u003C/span>: \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">linkReferences\u003C/span>.\u003Cspan class=\"hljs-title function_\">values\u003C/span>()).\u003Cspan class=\"hljs-title function_\">reduce\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">sum, refs\u003C/span>) =>\u003C/span> sum + refs.\u003Cspan class=\"hljs-property\">length\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>),\n                \u003Cspan class=\"hljs-attr\">errors\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">validationErrors\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">warnings\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">warnings\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>\n            },\n            \u003Cspan class=\"hljs-attr\">details\u003C/span>: {\n                \u003Cspan class=\"hljs-attr\">errors\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">validationErrors\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">warnings\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">warnings\u003C/span>\n            }\n        };\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> report;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">fixCommonIssues\u003C/span>(\u003Cspan class=\"hljs-params\">markdownContent\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> fixedContent = markdownContent;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> fixes = [];\n        \n        \u003Cspan class=\"hljs-comment\">// Fix duplicate anchors by adding suffixes\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> duplicateAnchors = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">validationErrors\u003C/span>\n            .\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">error\u003C/span> =>\u003C/span> error.\u003Cspan class=\"hljs-property\">type\u003C/span> === \u003Cspan class=\"hljs-string\">'duplicate-anchor'\u003C/span>)\n            .\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">error\u003C/span> =>\u003C/span> error.\u003Cspan class=\"hljs-property\">anchor\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> anchor \u003Cspan class=\"hljs-keyword\">of\u003C/span> duplicateAnchors) {\n            fixedContent = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">fixDuplicateAnchors\u003C/span>(fixedContent, anchor);\n            fixes.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">`Fixed duplicate anchor: \u003Cspan class=\"hljs-subst\">${anchor}\u003C/span>`\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Generate missing anchors for headings\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> lines = fixedContent.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> fixedLines = lines.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">line\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> headingMatch = line.\u003Cspan class=\"hljs-title function_\">match\u003C/span>(\u003Cspan class=\"hljs-regexp\">/^(#{1,6})\\s+(.+)$/\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (headingMatch && !line.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'{#'\u003C/span>)) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> level = headingMatch[\u003Cspan class=\"hljs-number\">1\u003C/span>].\u003Cspan class=\"hljs-property\">length\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> text = headingMatch[\u003Cspan class=\"hljs-number\">2\u003C/span>];\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> anchor = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateImplicitAnchor\u003C/span>(text);\n                \n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">anchorRegistry\u003C/span>.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(anchor)) {\n                    fixes.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">`Added missing anchor: \u003Cspan class=\"hljs-subst\">${anchor}\u003C/span>`\u003C/span>);\n                    \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${line}\u003C/span> {#\u003Cspan class=\"hljs-subst\">${anchor}\u003C/span>}`\u003C/span>;\n                }\n            }\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> line;\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">content\u003C/span>: fixedLines.\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>),\n            fixes\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">fixDuplicateAnchors\u003C/span>(\u003Cspan class=\"hljs-params\">content, baseAnchor\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> lines = content.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> counter = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> fixedLines = lines.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">line\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (line.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">`{#\u003Cspan class=\"hljs-subst\">${baseAnchor}\u003C/span>}`\u003C/span>)) {\n                counter++;\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (counter > \u003Cspan class=\"hljs-number\">1\u003C/span>) {\n                    \u003Cspan class=\"hljs-keyword\">return\u003C/span> line.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-string\">`{#\u003Cspan class=\"hljs-subst\">${baseAnchor}\u003C/span>}`\u003C/span>, \u003Cspan class=\"hljs-string\">`{#\u003Cspan class=\"hljs-subst\">${baseAnchor}\u003C/span>-\u003Cspan class=\"hljs-subst\">${counter - \u003Cspan class=\"hljs-number\">1\u003C/span>}\u003C/span>}`\u003C/span>);\n                }\n            }\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> line;\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> fixedLines.\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">reset\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">anchorRegistry\u003C/span>.\u003Cspan class=\"hljs-title function_\">clear\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">linkReferences\u003C/span>.\u003Cspan class=\"hljs-title function_\">clear\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">validationErrors\u003C/span> = [];\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">warnings\u003C/span> = [];\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Usage example\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> validator = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">AnchorLinkValidator\u003C/span>();\n\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> sampleMarkdown = \u003Cspan class=\"hljs-string\">`\n# Introduction {#intro}\n\nWelcome to our guide!\n\n## Getting Started {#getting-started}\n\nHere's how to begin.\n\n### Prerequisites {#getting-started}\n\nBefore you start, check these requirements.\n\n## Advanced Topics\n\nThis section covers [getting started](#getting-started) and [prerequisites](#prereqs).\n\n[Back to introduction](#intro)\n\n<a href="#advanced-topics">Jump to advanced section</a>\n`\u003C/span>;\n\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> validationResult = validator.\u003Cspan class=\"hljs-title function_\">validateDocument\u003C/span>(sampleMarkdown);\n\u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'Validation Results:'\u003C/span>, validator.\u003Cspan class=\"hljs-title function_\">generateValidationReport\u003C/span>());\n\n\u003Cspan class=\"hljs-keyword\">if\u003C/span> (!validationResult.\u003Cspan class=\"hljs-property\">isValid\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> fixedResult = validator.\u003Cspan class=\"hljs-title function_\">fixCommonIssues\u003C/span>(sampleMarkdown);\n    \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'Fixed Content:'\u003C/span>, fixedResult.\u003Cspan class=\"hljs-property\">content\u003C/span>);\n    \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'Applied Fixes:'\u003C/span>, fixedResult.\u003Cspan class=\"hljs-property\">fixes\u003C/span>);\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"advanced-scrollspy-implementation\">Advanced ScrollSpy Implementation\u003C/h2>\n\u003Ch3 id=\"intelligent-scroll-tracking-system\">Intelligent Scroll Tracking System\u003C/h3>\n\u003Cp>Creating sophisticated ScrollSpy navigation that adapts to content structure:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// scrollspy-navigator.js - Advanced ScrollSpy navigation system\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">ScrollSpyNavigator\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">options = {}\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span> = {\n            \u003Cspan class=\"hljs-comment\">// Selector configuration\u003C/span>\n            \u003Cspan class=\"hljs-attr\">contentSelector\u003C/span>: \u003Cspan class=\"hljs-string\">'main'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">navSelector\u003C/span>: \u003Cspan class=\"hljs-string\">'.table-of-contents'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">headingSelector\u003C/span>: \u003Cspan class=\"hljs-string\">'h1, h2, h3, h4, h5, h6'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">linkSelector\u003C/span>: \u003Cspan class=\"hljs-string\">'a[href^="#"]'\u003C/span>,\n            \n            \u003Cspan class=\"hljs-comment\">// Behavior configuration\u003C/span>\n            \u003Cspan class=\"hljs-attr\">offset\u003C/span>: \u003Cspan class=\"hljs-number\">100\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">smoothScroll\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">scrollDuration\u003C/span>: \u003Cspan class=\"hljs-number\">500\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">highlightClass\u003C/span>: \u003Cspan class=\"hljs-string\">'active'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">threshold\u003C/span>: \u003Cspan class=\"hljs-number\">0.5\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">debounceDelay\u003C/span>: \u003Cspan class=\"hljs-number\">100\u003C/span>,\n            \n            \u003Cspan class=\"hljs-comment\">// Advanced features\u003C/span>\n            \u003Cspan class=\"hljs-attr\">enableHistoryApi\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">updateDocumentTitle\u003C/span>: \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">trackAnalytics\u003C/span>: \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">keyboardNavigation\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \n            \u003Cspan class=\"hljs-comment\">// Callbacks\u003C/span>\n            \u003Cspan class=\"hljs-attr\">onSectionChange\u003C/span>: \u003Cspan class=\"hljs-literal\">null\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">onScrollStart\u003C/span>: \u003Cspan class=\"hljs-literal\">null\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">onScrollComplete\u003C/span>: \u003Cspan class=\"hljs-literal\">null\u003C/span>,\n            \n            ...options\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">isScrolling\u003C/span> = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSection\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">sections\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">navigationLinks\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">intersectionObserver\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollTimeout\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">init\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">init\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">collectSections\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">collectNavigationLinks\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupIntersectionObserver\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupScrollSpy\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupSmoothScrolling\u003C/span>();\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">keyboardNavigation\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupKeyboardNavigation\u003C/span>();\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Handle initial page load with hash\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">location\u003C/span>.\u003Cspan class=\"hljs-property\">hash\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">scrollToAnchor\u003C/span>(\u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">location\u003C/span>.\u003Cspan class=\"hljs-property\">hash\u003C/span>.\u003Cspan class=\"hljs-title function_\">substring\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>));\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">`ScrollSpy initialized with \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.sections.size}\u003C/span> sections`\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">collectSections\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> content = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">contentSelector\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!content) {\n            \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">warn\u003C/span>(\u003Cspan class=\"hljs-string\">'Content container not found'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> headings = content.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">headingSelector\u003C/span>);\n        \n        headings.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">heading\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> id = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getHeadingId\u003C/span>(heading);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (id) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> level = \u003Cspan class=\"hljs-built_in\">parseInt\u003C/span>(heading.\u003Cspan class=\"hljs-property\">tagName\u003C/span>.\u003Cspan class=\"hljs-title function_\">charAt\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>));\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> rect = heading.\u003Cspan class=\"hljs-title function_\">getBoundingClientRect\u003C/span>();\n                \n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">sections\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(id, {\n                    \u003Cspan class=\"hljs-attr\">element\u003C/span>: heading,\n                    id,\n                    \u003Cspan class=\"hljs-attr\">title\u003C/span>: heading.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>(),\n                    level,\n                    \u003Cspan class=\"hljs-attr\">offsetTop\u003C/span>: heading.\u003Cspan class=\"hljs-property\">offsetTop\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">offsetHeight\u003C/span>: heading.\u003Cspan class=\"hljs-property\">offsetHeight\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">visible\u003C/span>: \u003Cspan class=\"hljs-literal\">false\u003C/span>\n                });\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">collectNavigationLinks\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> nav = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">navSelector\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!nav) {\n            \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">warn\u003C/span>(\u003Cspan class=\"hljs-string\">'Navigation container not found'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> links = nav.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">linkSelector\u003C/span>);\n        \n        links.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">link\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> href = link.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'href'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (href && href.\u003Cspan class=\"hljs-title function_\">startsWith\u003C/span>(\u003Cspan class=\"hljs-string\">'#'\u003C/span>)) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> targetId = href.\u003Cspan class=\"hljs-title function_\">substring\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>);\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">sections\u003C/span>.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(targetId)) {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">navigationLinks\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(targetId, link);\n                }\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getHeadingId\u003C/span>(\u003Cspan class=\"hljs-params\">heading\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Try to get existing ID\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> id = heading.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'id'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!id) {\n            \u003Cspan class=\"hljs-comment\">// Generate ID from heading text\u003C/span>\n            id = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateIdFromText\u003C/span>(heading.\u003Cspan class=\"hljs-property\">textContent\u003C/span>);\n            heading.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'id'\u003C/span>, id);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> id;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateIdFromText\u003C/span>(\u003Cspan class=\"hljs-params\">text\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> text\n            .\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>()\n            .\u003Cspan class=\"hljs-title function_\">trim\u003C/span>()\n            .\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/[^\\w\\s-]/g\u003C/span>, \u003Cspan class=\"hljs-string\">''\u003C/span>)\n            .\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/\\s+/g\u003C/span>, \u003Cspan class=\"hljs-string\">'-'\u003C/span>)\n            .\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/^-+|-+$/g\u003C/span>, \u003Cspan class=\"hljs-string\">''\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupIntersectionObserver\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> options = {\n            \u003Cspan class=\"hljs-attr\">root\u003C/span>: \u003Cspan class=\"hljs-literal\">null\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">rootMargin\u003C/span>: \u003Cspan class=\"hljs-string\">`-\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.offset}\u003C/span>px 0px -50% 0px`\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">threshold\u003C/span>: [\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">threshold\u003C/span>, \u003Cspan class=\"hljs-number\">1\u003C/span>]\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">intersectionObserver\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">IntersectionObserver\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">entries\u003C/span>) =>\u003C/span> {\n            entries.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">entry\u003C/span> =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> id = entry.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'id'\u003C/span>);\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">sections\u003C/span>.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(id)) {\n                    \u003Cspan class=\"hljs-keyword\">const\u003C/span> section = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">sections\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(id);\n                    section.\u003Cspan class=\"hljs-property\">visible\u003C/span> = entry.\u003Cspan class=\"hljs-property\">isIntersecting\u003C/span>;\n                    section.\u003Cspan class=\"hljs-property\">intersectionRatio\u003C/span> = entry.\u003Cspan class=\"hljs-property\">intersectionRatio\u003C/span>;\n                }\n            });\n            \n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateActiveSection\u003C/span>();\n        }, options);\n        \n        \u003Cspan class=\"hljs-comment\">// Observe all sections\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">sections\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">section\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">intersectionObserver\u003C/span>.\u003Cspan class=\"hljs-title function_\">observe\u003C/span>(section.\u003Cspan class=\"hljs-property\">element\u003C/span>);\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupScrollSpy\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> ticking = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">updateScrollSpy\u003C/span> = (\u003Cspan class=\"hljs-params\">\u003C/span>) => {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateActiveSection\u003C/span>();\n            ticking = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'scroll'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!ticking && !\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">isScrolling\u003C/span>) {\n                \u003Cspan class=\"hljs-title function_\">requestAnimationFrame\u003C/span>(updateScrollSpy);\n                ticking = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n            }\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Handle browser back/forward navigation\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'popstate'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">event\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (event.\u003Cspan class=\"hljs-property\">state\u003C/span> && event.\u003Cspan class=\"hljs-property\">state\u003C/span>.\u003Cspan class=\"hljs-property\">scrollSpySection\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">scrollToAnchor\u003C/span>(event.\u003Cspan class=\"hljs-property\">state\u003C/span>.\u003Cspan class=\"hljs-property\">scrollSpySection\u003C/span>, \u003Cspan class=\"hljs-literal\">false\u003C/span>);\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">updateActiveSection\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Find the most appropriate section to highlight\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> visibleSections = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">sections\u003C/span>.\u003Cspan class=\"hljs-title function_\">values\u003C/span>())\n            .\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">section\u003C/span> =>\u003C/span> section.\u003Cspan class=\"hljs-property\">visible\u003C/span>)\n            .\u003Cspan class=\"hljs-title function_\">sort\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">a, b\u003C/span>) =>\u003C/span> {\n                \u003Cspan class=\"hljs-comment\">// Prioritize higher intersection ratio\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (a.\u003Cspan class=\"hljs-property\">intersectionRatio\u003C/span> !== b.\u003Cspan class=\"hljs-property\">intersectionRatio\u003C/span>) {\n                    \u003Cspan class=\"hljs-keyword\">return\u003C/span> b.\u003Cspan class=\"hljs-property\">intersectionRatio\u003C/span> - a.\u003Cspan class=\"hljs-property\">intersectionRatio\u003C/span>;\n                }\n                \u003Cspan class=\"hljs-comment\">// Then by heading level (higher level = more important)\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (a.\u003Cspan class=\"hljs-property\">level\u003C/span> !== b.\u003Cspan class=\"hljs-property\">level\u003C/span>) {\n                    \u003Cspan class=\"hljs-keyword\">return\u003C/span> a.\u003Cspan class=\"hljs-property\">level\u003C/span> - b.\u003Cspan class=\"hljs-property\">level\u003C/span>;\n                }\n                \u003Cspan class=\"hljs-comment\">// Finally by document order\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> a.\u003Cspan class=\"hljs-property\">offsetTop\u003C/span> - b.\u003Cspan class=\"hljs-property\">offsetTop\u003C/span>;\n            });\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> newActiveSection = visibleSections[\u003Cspan class=\"hljs-number\">0\u003C/span>];\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (newActiveSection && newActiveSection.\u003Cspan class=\"hljs-property\">id\u003C/span> !== \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSection\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setActiveSection\u003C/span>(newActiveSection.\u003Cspan class=\"hljs-property\">id\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setActiveSection\u003C/span>(\u003Cspan class=\"hljs-params\">sectionId\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Remove previous active state\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSection\u003C/span> && \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">navigationLinks\u003C/span>.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSection\u003C/span>)) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> oldLink = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">navigationLinks\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSection\u003C/span>);\n            oldLink.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">highlightClass\u003C/span>);\n            oldLink.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-current'\u003C/span>, \u003Cspan class=\"hljs-string\">'false'\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Set new active state\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">navigationLinks\u003C/span>.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(sectionId)) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> newLink = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">navigationLinks\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(sectionId);\n            newLink.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">highlightClass\u003C/span>);\n            newLink.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-current'\u003C/span>, \u003Cspan class=\"hljs-string\">'true'\u003C/span>);\n            \n            \u003Cspan class=\"hljs-comment\">// Ensure active link is visible in navigation\u003C/span>\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">ensureLinkVisible\u003C/span>(newLink);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> section = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">sections\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(sectionId);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSection\u003C/span> = sectionId;\n        \n        \u003Cspan class=\"hljs-comment\">// Update browser history\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">enableHistoryApi\u003C/span> && !\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">isScrolling\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> newUrl = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">window\u003C/span>.location.pathname}\u003C/span>\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">window\u003C/span>.location.search}\u003C/span>#\u003Cspan class=\"hljs-subst\">${sectionId}\u003C/span>`\u003C/span>;\n            \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">history\u003C/span>.\u003Cspan class=\"hljs-title function_\">replaceState\u003C/span>(\n                { \u003Cspan class=\"hljs-attr\">scrollSpySection\u003C/span>: sectionId },\n                \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">title\u003C/span>,\n                newUrl\n            );\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Update document title\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">updateDocumentTitle\u003C/span> && section) {\n            \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">title\u003C/span> = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${section.title}\u003C/span> - \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.title.split(\u003Cspan class=\"hljs-string\">' - '\u003C/span>).slice(\u003Cspan class=\"hljs-number\">1\u003C/span>).join(\u003Cspan class=\"hljs-string\">' - '\u003C/span>)}\u003C/span>`\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Track analytics\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">trackAnalytics\u003C/span> && \u003Cspan class=\"hljs-keyword\">typeof\u003C/span> gtag !== \u003Cspan class=\"hljs-string\">'undefined'\u003C/span>) {\n            \u003Cspan class=\"hljs-title function_\">gtag\u003C/span>(\u003Cspan class=\"hljs-string\">'event'\u003C/span>, \u003Cspan class=\"hljs-string\">'scroll_to_section'\u003C/span>, {\n                \u003Cspan class=\"hljs-attr\">section_id\u003C/span>: sectionId,\n                \u003Cspan class=\"hljs-attr\">section_title\u003C/span>: section.\u003Cspan class=\"hljs-property\">title\u003C/span>\n            });\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Execute callback\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">onSectionChange\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-title function_\">onSectionChange\u003C/span>(sectionId, section);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">ensureLinkVisible\u003C/span>(\u003Cspan class=\"hljs-params\">link\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> nav = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">navSelector\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!nav) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> navRect = nav.\u003Cspan class=\"hljs-title function_\">getBoundingClientRect\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> linkRect = link.\u003Cspan class=\"hljs-title function_\">getBoundingClientRect\u003C/span>();\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (linkRect.\u003Cspan class=\"hljs-property\">top\u003C/span> < navRect.\u003Cspan class=\"hljs-property\">top\u003C/span> || linkRect.\u003Cspan class=\"hljs-property\">bottom\u003C/span> > navRect.\u003Cspan class=\"hljs-property\">bottom\u003C/span>) {\n            link.\u003Cspan class=\"hljs-title function_\">scrollIntoView\u003C/span>({\n                \u003Cspan class=\"hljs-attr\">behavior\u003C/span>: \u003Cspan class=\"hljs-string\">'smooth'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">block\u003C/span>: \u003Cspan class=\"hljs-string\">'center'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">inline\u003C/span>: \u003Cspan class=\"hljs-string\">'nearest'\u003C/span>\n            });\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupSmoothScrolling\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Handle navigation link clicks\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">navigationLinks\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">link, sectionId\u003C/span>) =>\u003C/span> {\n            link.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">event\u003C/span>) =>\u003C/span> {\n                event.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">scrollToAnchor\u003C/span>(sectionId);\n            });\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Handle any anchor link clicks in the document\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">event\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> link = event.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'a[href^="#"]'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (link && !\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">navigationLinks\u003C/span>.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(link.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'href'\u003C/span>).\u003Cspan class=\"hljs-title function_\">substring\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>))) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> targetId = link.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'href'\u003C/span>).\u003Cspan class=\"hljs-title function_\">substring\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>);\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">sections\u003C/span>.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(targetId)) {\n                    event.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">scrollToAnchor\u003C/span>(targetId);\n                }\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">scrollToAnchor\u003C/span>(\u003Cspan class=\"hljs-params\">anchorId, updateHistory = \u003Cspan class=\"hljs-literal\">true\u003C/span>\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> section = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">sections\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(anchorId);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!section) {\n            \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">warn\u003C/span>(\u003Cspan class=\"hljs-string\">`Section not found: \u003Cspan class=\"hljs-subst\">${anchorId}\u003C/span>`\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">onScrollStart\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-title function_\">onScrollStart\u003C/span>(anchorId, section);\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">isScrolling\u003C/span> = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> targetPosition = section.\u003Cspan class=\"hljs-property\">offsetTop\u003C/span> - \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">offset\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">smoothScroll\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">smoothScrollTo\u003C/span>(targetPosition, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">isScrolling\u003C/span> = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n                \n                \u003Cspan class=\"hljs-comment\">// Update history after scroll completes\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (updateHistory && \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">enableHistoryApi\u003C/span>) {\n                    \u003Cspan class=\"hljs-keyword\">const\u003C/span> newUrl = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">window\u003C/span>.location.pathname}\u003C/span>\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">window\u003C/span>.location.search}\u003C/span>#\u003Cspan class=\"hljs-subst\">${anchorId}\u003C/span>`\u003C/span>;\n                    \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">history\u003C/span>.\u003Cspan class=\"hljs-title function_\">pushState\u003C/span>(\n                        { \u003Cspan class=\"hljs-attr\">scrollSpySection\u003C/span>: anchorId },\n                        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">title\u003C/span>,\n                        newUrl\n                    );\n                }\n                \n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">onScrollComplete\u003C/span>) {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-title function_\">onScrollComplete\u003C/span>(anchorId, section);\n                }\n            });\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-title function_\">scrollTo\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, targetPosition);\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">isScrolling\u003C/span> = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (updateHistory && \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">enableHistoryApi\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> newUrl = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">window\u003C/span>.location.pathname}\u003C/span>\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">window\u003C/span>.location.search}\u003C/span>#\u003Cspan class=\"hljs-subst\">${anchorId}\u003C/span>`\u003C/span>;\n                \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">history\u003C/span>.\u003Cspan class=\"hljs-title function_\">pushState\u003C/span>(\n                    { \u003Cspan class=\"hljs-attr\">scrollSpySection\u003C/span>: anchorId },\n                    \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">title\u003C/span>,\n                    newUrl\n                );\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">onScrollComplete\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-title function_\">onScrollComplete\u003C/span>(anchorId, section);\n            }\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">smoothScrollTo\u003C/span>(\u003Cspan class=\"hljs-params\">targetPosition, callback\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> startPosition = \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">pageYOffset\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> distance = targetPosition - startPosition;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> duration = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">scrollDuration\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> startTime = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">easeInOutCubic\u003C/span> = (\u003Cspan class=\"hljs-params\">t\u003C/span>) => {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> t < \u003Cspan class=\"hljs-number\">0.5\u003C/span> ? \u003Cspan class=\"hljs-number\">4\u003C/span> * t * t * t : (t - \u003Cspan class=\"hljs-number\">1\u003C/span>) * (\u003Cspan class=\"hljs-number\">2\u003C/span> * t - \u003Cspan class=\"hljs-number\">2\u003C/span>) * (\u003Cspan class=\"hljs-number\">2\u003C/span> * t - \u003Cspan class=\"hljs-number\">2\u003C/span>) + \u003Cspan class=\"hljs-number\">1\u003C/span>;\n        };\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">step\u003C/span> = (\u003Cspan class=\"hljs-params\">currentTime\u003C/span>) => {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (startTime === \u003Cspan class=\"hljs-literal\">null\u003C/span>) startTime = currentTime;\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> timeElapsed = currentTime - startTime;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> progress = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">min\u003C/span>(timeElapsed / duration, \u003Cspan class=\"hljs-number\">1\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> ease = \u003Cspan class=\"hljs-title function_\">easeInOutCubic\u003C/span>(progress);\n            \n            \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-title function_\">scrollTo\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, startPosition + distance * ease);\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (timeElapsed < duration) {\n                \u003Cspan class=\"hljs-title function_\">requestAnimationFrame\u003C/span>(step);\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (callback) \u003Cspan class=\"hljs-title function_\">callback\u003C/span>();\n            }\n        };\n        \n        \u003Cspan class=\"hljs-title function_\">requestAnimationFrame\u003C/span>(step);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupKeyboardNavigation\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'keydown'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">event\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-comment\">// Only handle navigation if focus is not on form elements\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> ([\u003Cspan class=\"hljs-string\">'INPUT'\u003C/span>, \u003Cspan class=\"hljs-string\">'TEXTAREA'\u003C/span>, \u003Cspan class=\"hljs-string\">'SELECT'\u003C/span>].\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(event.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-property\">tagName\u003C/span>)) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">let\u003C/span> handled = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">switch\u003C/span> (event.\u003Cspan class=\"hljs-property\">key\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'j'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'ArrowDown'\u003C/span>:\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (event.\u003Cspan class=\"hljs-property\">ctrlKey\u003C/span> || event.\u003Cspan class=\"hljs-property\">metaKey\u003C/span>) {\n                        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">navigateToNext\u003C/span>();\n                        handled = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n                    }\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                \n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'k'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'ArrowUp'\u003C/span>:\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (event.\u003Cspan class=\"hljs-property\">ctrlKey\u003C/span> || event.\u003Cspan class=\"hljs-property\">metaKey\u003C/span>) {\n                        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">navigateToPrevious\u003C/span>();\n                        handled = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n                    }\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                \n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'Home'\u003C/span>:\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (event.\u003Cspan class=\"hljs-property\">ctrlKey\u003C/span> || event.\u003Cspan class=\"hljs-property\">metaKey\u003C/span>) {\n                        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">navigateToFirst\u003C/span>();\n                        handled = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n                    }\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                \n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'End'\u003C/span>:\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (event.\u003Cspan class=\"hljs-property\">ctrlKey\u003C/span> || event.\u003Cspan class=\"hljs-property\">metaKey\u003C/span>) {\n                        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">navigateToLast\u003C/span>();\n                        handled = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n                    }\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (handled) {\n                event.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">navigateToNext\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> sectionIds = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">sections\u003C/span>.\u003Cspan class=\"hljs-title function_\">keys\u003C/span>());\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentIndex = sectionIds.\u003Cspan class=\"hljs-title function_\">indexOf\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSection\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (currentIndex < sectionIds.\u003Cspan class=\"hljs-property\">length\u003C/span> - \u003Cspan class=\"hljs-number\">1\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">scrollToAnchor\u003C/span>(sectionIds[currentIndex + \u003Cspan class=\"hljs-number\">1\u003C/span>]);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">navigateToPrevious\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> sectionIds = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">sections\u003C/span>.\u003Cspan class=\"hljs-title function_\">keys\u003C/span>());\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentIndex = sectionIds.\u003Cspan class=\"hljs-title function_\">indexOf\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSection\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (currentIndex > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">scrollToAnchor\u003C/span>(sectionIds[currentIndex - \u003Cspan class=\"hljs-number\">1\u003C/span>]);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">navigateToFirst\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> sectionIds = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">sections\u003C/span>.\u003Cspan class=\"hljs-title function_\">keys\u003C/span>());\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (sectionIds.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">scrollToAnchor\u003C/span>(sectionIds[\u003Cspan class=\"hljs-number\">0\u003C/span>]);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">navigateToLast\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> sectionIds = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">sections\u003C/span>.\u003Cspan class=\"hljs-title function_\">keys\u003C/span>());\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (sectionIds.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">scrollToAnchor\u003C/span>(sectionIds[sectionIds.\u003Cspan class=\"hljs-property\">length\u003C/span> - \u003Cspan class=\"hljs-number\">1\u003C/span>]);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Public API methods\u003C/span>\n    \n    \u003Cspan class=\"hljs-title function_\">refresh\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Recalculate section positions and update observer\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">sections\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">section\u003C/span> =>\u003C/span> {\n            section.\u003Cspan class=\"hljs-property\">offsetTop\u003C/span> = section.\u003Cspan class=\"hljs-property\">element\u003C/span>.\u003Cspan class=\"hljs-property\">offsetTop\u003C/span>;\n            section.\u003Cspan class=\"hljs-property\">offsetHeight\u003C/span> = section.\u003Cspan class=\"hljs-property\">element\u003C/span>.\u003Cspan class=\"hljs-property\">offsetHeight\u003C/span>;\n        });\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateActiveSection\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addSection\u003C/span>(\u003Cspan class=\"hljs-params\">element\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> id = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getHeadingId\u003C/span>(element);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (id && !\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">sections\u003C/span>.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(id)) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> level = \u003Cspan class=\"hljs-built_in\">parseInt\u003C/span>(element.\u003Cspan class=\"hljs-property\">tagName\u003C/span>.\u003Cspan class=\"hljs-title function_\">charAt\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>));\n            \n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">sections\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(id, {\n                element,\n                id,\n                \u003Cspan class=\"hljs-attr\">title\u003C/span>: element.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>(),\n                level,\n                \u003Cspan class=\"hljs-attr\">offsetTop\u003C/span>: element.\u003Cspan class=\"hljs-property\">offsetTop\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">offsetHeight\u003C/span>: element.\u003Cspan class=\"hljs-property\">offsetHeight\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">visible\u003C/span>: \u003Cspan class=\"hljs-literal\">false\u003C/span>\n            });\n            \n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">intersectionObserver\u003C/span>.\u003Cspan class=\"hljs-title function_\">observe\u003C/span>(element);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">removeSection\u003C/span>(\u003Cspan class=\"hljs-params\">id\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">sections\u003C/span>.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(id)) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> section = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">sections\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(id);\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">intersectionObserver\u003C/span>.\u003Cspan class=\"hljs-title function_\">unobserve\u003C/span>(section.\u003Cspan class=\"hljs-property\">element\u003C/span>);\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">sections\u003C/span>.\u003Cspan class=\"hljs-title function_\">delete\u003C/span>(id);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getCurrentSection\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSection\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getAllSections\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">sections\u003C/span>.\u003Cspan class=\"hljs-title function_\">values\u003C/span>());\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">destroy\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">intersectionObserver\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">intersectionObserver\u003C/span>.\u003Cspan class=\"hljs-title function_\">disconnect\u003C/span>();\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Remove event listeners\u003C/span>\n        \u003Cspan class=\"hljs-comment\">// (In production, you'd store references to remove them properly)\u003C/span>\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Initialize ScrollSpy when DOM is ready\u003C/span>\n\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'DOMContentLoaded'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> scrollSpy = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">ScrollSpyNavigator\u003C/span>({\n        \u003Cspan class=\"hljs-attr\">contentSelector\u003C/span>: \u003Cspan class=\"hljs-string\">'.content'\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">navSelector\u003C/span>: \u003Cspan class=\"hljs-string\">'.table-of-contents'\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">offset\u003C/span>: \u003Cspan class=\"hljs-number\">80\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">smoothScroll\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">scrollDuration\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">enableHistoryApi\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">keyboardNavigation\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n        \n        \u003Cspan class=\"hljs-attr\">onSectionChange\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">sectionId, section\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">`Active section changed to: \u003Cspan class=\"hljs-subst\">${section.title}\u003C/span>`\u003C/span>);\n        }\n    });\n    \n    \u003Cspan class=\"hljs-comment\">// Make scrollSpy available globally for debugging\u003C/span>\n    \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">scrollSpy\u003C/span> = scrollSpy;\n});\n\u003C/code>\u003C/pre>\u003Ch3 id=\"progressive-enhancement-for-mobile-devices\">Progressive Enhancement for Mobile Devices\u003C/h3>\n\u003Cp>Implementing mobile-optimized navigation with touch-friendly interactions:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* scrollspy-styles.css - Comprehensive styling for ScrollSpy navigation */\u003C/span>\n\n\u003Cspan class=\"hljs-comment\">/* Base navigation styles */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.table-of-contents\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: sticky;\n    \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">max-height\u003C/span>: \u003Cspan class=\"hljs-built_in\">calc\u003C/span>(\u003Cspan class=\"hljs-number\">100vh\u003C/span> - \u003Cspan class=\"hljs-number\">40px\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">overflow-y\u003C/span>: auto;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#e0e0e0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#fff\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">2px\u003C/span> \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0.1\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-of-contents\u003C/span> \u003Cspan class=\"hljs-selector-tag\">ul\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">list-style\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-of-contents\u003C/span> \u003Cspan class=\"hljs-selector-tag\">li\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-of-contents\u003C/span> \u003Cspan class=\"hljs-selector-tag\">a\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span> \u003Cspan class=\"hljs-number\">0.75rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#666\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: all \u003Cspan class=\"hljs-number\">0.2s\u003C/span> ease;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.9rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-of-contents\u003C/span> \u003Cspan class=\"hljs-selector-tag\">a\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#f5f5f5\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#333\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-of-contents\u003C/span> \u003Cspan class=\"hljs-selector-tag\">a\u003C/span>\u003Cspan class=\"hljs-selector-class\">.active\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#007cba\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">500\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-of-contents\u003C/span> \u003Cspan class=\"hljs-selector-tag\">a\u003C/span>\u003Cspan class=\"hljs-selector-class\">.active\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::before\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">''\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n    \u003Cspan class=\"hljs-attribute\">left\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">bottom\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">3px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#005a8b\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Nested navigation levels */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.table-of-contents\u003C/span> \u003Cspan class=\"hljs-selector-tag\">ul\u003C/span> \u003Cspan class=\"hljs-selector-tag\">ul\u003C/span> \u003Cspan class=\"hljs-selector-tag\">a\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding-left\u003C/span>: \u003Cspan class=\"hljs-number\">1.5rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.85rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-of-contents\u003C/span> \u003Cspan class=\"hljs-selector-tag\">ul\u003C/span> \u003Cspan class=\"hljs-selector-tag\">ul\u003C/span> \u003Cspan class=\"hljs-selector-tag\">ul\u003C/span> \u003Cspan class=\"hljs-selector-tag\">a\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding-left\u003C/span>: \u003Cspan class=\"hljs-number\">2.25rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.8rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-of-contents\u003C/span> \u003Cspan class=\"hljs-selector-tag\">ul\u003C/span> \u003Cspan class=\"hljs-selector-tag\">ul\u003C/span> \u003Cspan class=\"hljs-selector-tag\">ul\u003C/span> \u003Cspan class=\"hljs-selector-tag\">ul\u003C/span> \u003Cspan class=\"hljs-selector-tag\">a\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding-left\u003C/span>: \u003Cspan class=\"hljs-number\">3rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.75rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Responsive design */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.table-of-contents\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">position\u003C/span>: fixed;\n        \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">left\u003C/span>: -\u003Cspan class=\"hljs-number\">100%\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">280px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">z-index\u003C/span>: \u003Cspan class=\"hljs-number\">1000\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: left \u003Cspan class=\"hljs-number\">0.3s\u003C/span> ease;\n        \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: none;\n        \u003Cspan class=\"hljs-attribute\">border-right\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#e0e0e0\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.table-of-contents\u003C/span>\u003Cspan class=\"hljs-selector-class\">.mobile-open\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">left\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.toc-overlay\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">position\u003C/span>: fixed;\n        \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">left\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0.5\u003C/span>);\n        \u003Cspan class=\"hljs-attribute\">z-index\u003C/span>: \u003Cspan class=\"hljs-number\">999\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">opacity\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">visibility\u003C/span>: hidden;\n        \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: all \u003Cspan class=\"hljs-number\">0.3s\u003C/span> ease;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.toc-overlay\u003C/span>\u003Cspan class=\"hljs-selector-class\">.active\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">opacity\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">visibility\u003C/span>: visible;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.toc-toggle\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">position\u003C/span>: fixed;\n        \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">right\u003C/span>: \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">z-index\u003C/span>: \u003Cspan class=\"hljs-number\">1001\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#007cba\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">color\u003C/span>: white;\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: none;\n        \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">50%\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">50px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">50px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">1.2rem\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">cursor\u003C/span>: pointer;\n        \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: all \u003Cspan class=\"hljs-number\">0.2s\u003C/span> ease;\n        \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">2px\u003C/span> \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0.2\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.toc-toggle\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#005a8b\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">scale\u003C/span>(\u003Cspan class=\"hljs-number\">1.1\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.toc-toggle\u003C/span>\u003Cspan class=\"hljs-selector-class\">.active\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#dc3545\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Smooth scrolling behavior */\u003C/span>\n\u003Cspan class=\"hljs-selector-tag\">html\u003C/span> {\n    scroll-behavior: smooth;\n}\n\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-reduced-motion\u003C/span>: reduce) {\n    \u003Cspan class=\"hljs-selector-tag\">html\u003C/span> {\n        scroll-behavior: auto;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Focus styles for accessibility */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.table-of-contents\u003C/span> \u003Cspan class=\"hljs-selector-tag\">a\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">outline\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#007cba\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">outline-offset\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Progress indicator */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.scroll-progress\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: fixed;\n    \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">left\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">0%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">3px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">linear-gradient\u003C/span>(to right, \u003Cspan class=\"hljs-number\">#007cba\u003C/span>, \u003Cspan class=\"hljs-number\">#28a745\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">z-index\u003C/span>: \u003Cspan class=\"hljs-number\">1000\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: width \u003Cspan class=\"hljs-number\">0.1s\u003C/span> ease;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Section highlighting */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.section-highlight\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.section-highlight\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::before\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">''\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n    \u003Cspan class=\"hljs-attribute\">left\u003C/span>: -\u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">top\u003C/span>: -\u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">bottom\u003C/span>: -\u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">3px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#007cba\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">opacity\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: opacity \u003Cspan class=\"hljs-number\">0.3s\u003C/span> ease;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.section-highlight\u003C/span>\u003Cspan class=\"hljs-selector-class\">.active\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::before\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">opacity\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Print styles */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> print {\n    \u003Cspan class=\"hljs-selector-class\">.table-of-contents\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.toc-toggle\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.scroll-progress\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* High contrast mode support */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-contrast\u003C/span>: high) {\n    \u003Cspan class=\"hljs-selector-class\">.table-of-contents\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.table-of-contents\u003C/span> \u003Cspan class=\"hljs-selector-tag\">a\u003C/span>\u003Cspan class=\"hljs-selector-class\">.active\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: ButtonText;\n        \u003Cspan class=\"hljs-attribute\">color\u003C/span>: ButtonFace;\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Dark mode support */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-color-scheme\u003C/span>: dark) {\n    \u003Cspan class=\"hljs-selector-class\">.table-of-contents\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#2d3748\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border-color\u003C/span>: \u003Cspan class=\"hljs-number\">#4a5568\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#e2e8f0\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.table-of-contents\u003C/span> \u003Cspan class=\"hljs-selector-tag\">a\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#cbd5e0\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.table-of-contents\u003C/span> \u003Cspan class=\"hljs-selector-tag\">a\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#4a5568\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#e2e8f0\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.table-of-contents\u003C/span> \u003Cspan class=\"hljs-selector-tag\">a\u003C/span>\u003Cspan class=\"hljs-selector-class\">.active\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#3182ce\u003C/span>;\n    }\n}\n\u003C/code>\u003C/pre>\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// mobile-navigation.js - Mobile-specific navigation enhancements\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">MobileNavigationEnhancer\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">scrollSpyInstance\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollSpy\u003C/span> = scrollSpyInstance;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">isMobile\u003C/span> = \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">innerWidth\u003C/span> <= \u003Cspan class=\"hljs-number\">768\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">touchStartY\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">touchEndY\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">isNavOpen\u003C/span> = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">init\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">init\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">isMobile\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createMobileControls\u003C/span>();\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupTouchGestures\u003C/span>();\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupProgressIndicator\u003C/span>();\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Handle resize events\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'resize'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> wasMobile = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">isMobile\u003C/span>;\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">isMobile\u003C/span> = \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">innerWidth\u003C/span> <= \u003Cspan class=\"hljs-number\">768\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (wasMobile !== \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">isMobile\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">handleResponsiveChange\u003C/span>();\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createMobileControls\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Create toggle button\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> toggleButton = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'button'\u003C/span>);\n        toggleButton.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'toc-toggle'\u003C/span>;\n        toggleButton.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">'☰'\u003C/span>;\n        toggleButton.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-label'\u003C/span>, \u003Cspan class=\"hljs-string\">'Toggle table of contents'\u003C/span>);\n        toggleButton.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">toggleNavigation\u003C/span>());\n        \n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(toggleButton);\n        \n        \u003Cspan class=\"hljs-comment\">// Create overlay\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> overlay = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        overlay.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'toc-overlay'\u003C/span>;\n        overlay.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">closeNavigation\u003C/span>());\n        \n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(overlay);\n        \n        \u003Cspan class=\"hljs-comment\">// Modify navigation for mobile\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> nav = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.table-of-contents'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (nav) {\n            nav.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-expanded'\u003C/span>, \u003Cspan class=\"hljs-string\">'false'\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">toggleNavigation\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">isNavOpen\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">closeNavigation\u003C/span>();\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">openNavigation\u003C/span>();\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">openNavigation\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> nav = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.table-of-contents'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> overlay = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.toc-overlay'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> toggle = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.toc-toggle'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (nav && overlay && toggle) {\n            nav.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'mobile-open'\u003C/span>);\n            nav.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-expanded'\u003C/span>, \u003Cspan class=\"hljs-string\">'true'\u003C/span>);\n            overlay.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'active'\u003C/span>);\n            toggle.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'active'\u003C/span>);\n            toggle.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">'✕'\u003C/span>;\n            toggle.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-label'\u003C/span>, \u003Cspan class=\"hljs-string\">'Close table of contents'\u003C/span>);\n            \n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">isNavOpen\u003C/span> = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n            \n            \u003Cspan class=\"hljs-comment\">// Prevent body scrolling\u003C/span>\n            \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">overflow\u003C/span> = \u003Cspan class=\"hljs-string\">'hidden'\u003C/span>;\n            \n            \u003Cspan class=\"hljs-comment\">// Focus first navigation link\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> firstLink = nav.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'a'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (firstLink) {\n                firstLink.\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n            }\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">closeNavigation\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> nav = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.table-of-contents'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> overlay = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.toc-overlay'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> toggle = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.toc-toggle'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (nav && overlay && toggle) {\n            nav.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'mobile-open'\u003C/span>);\n            nav.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-expanded'\u003C/span>, \u003Cspan class=\"hljs-string\">'false'\u003C/span>);\n            overlay.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'active'\u003C/span>);\n            toggle.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'active'\u003C/span>);\n            toggle.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">'☰'\u003C/span>;\n            toggle.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-label'\u003C/span>, \u003Cspan class=\"hljs-string\">'Toggle table of contents'\u003C/span>);\n            \n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">isNavOpen\u003C/span> = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n            \n            \u003Cspan class=\"hljs-comment\">// Restore body scrolling\u003C/span>\n            \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">overflow\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupTouchGestures\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> startX = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> startY = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'touchstart'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">event\u003C/span>) =>\u003C/span> {\n            startX = event.\u003Cspan class=\"hljs-property\">touches\u003C/span>[\u003Cspan class=\"hljs-number\">0\u003C/span>].\u003Cspan class=\"hljs-property\">clientX\u003C/span>;\n            startY = event.\u003Cspan class=\"hljs-property\">touches\u003C/span>[\u003Cspan class=\"hljs-number\">0\u003C/span>].\u003Cspan class=\"hljs-property\">clientY\u003C/span>;\n        }, { \u003Cspan class=\"hljs-attr\">passive\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span> });\n        \n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'touchend'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">event\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (startX === \u003Cspan class=\"hljs-literal\">null\u003C/span> || startY === \u003Cspan class=\"hljs-literal\">null\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> endX = event.\u003Cspan class=\"hljs-property\">changedTouches\u003C/span>[\u003Cspan class=\"hljs-number\">0\u003C/span>].\u003Cspan class=\"hljs-property\">clientX\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> endY = event.\u003Cspan class=\"hljs-property\">changedTouches\u003C/span>[\u003Cspan class=\"hljs-number\">0\u003C/span>].\u003Cspan class=\"hljs-property\">clientY\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> deltaX = endX - startX;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> deltaY = endY - startY;\n            \n            \u003Cspan class=\"hljs-comment\">// Swipe right to open navigation (from left edge)\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (startX < \u003Cspan class=\"hljs-number\">20\u003C/span> && deltaX > \u003Cspan class=\"hljs-number\">50\u003C/span> && \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">abs\u003C/span>(deltaY) < \u003Cspan class=\"hljs-number\">100\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">openNavigation\u003C/span>();\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Swipe left to close navigation\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">isNavOpen\u003C/span> && deltaX < -\u003Cspan class=\"hljs-number\">50\u003C/span> && \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">abs\u003C/span>(deltaY) < \u003Cspan class=\"hljs-number\">100\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">closeNavigation\u003C/span>();\n            }\n            \n            startX = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n            startY = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        }, { \u003Cspan class=\"hljs-attr\">passive\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span> });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupProgressIndicator\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Create progress bar\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> progressBar = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        progressBar.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'scroll-progress'\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(progressBar);\n        \n        \u003Cspan class=\"hljs-comment\">// Update progress on scroll\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'scroll'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> windowHeight = \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">innerHeight\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> documentHeight = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">documentElement\u003C/span>.\u003Cspan class=\"hljs-property\">scrollHeight\u003C/span> - windowHeight;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> scrolled = \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">scrollY\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> progress = (scrolled / documentHeight) * \u003Cspan class=\"hljs-number\">100\u003C/span>;\n            \n            progressBar.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">width\u003C/span> = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-built_in\">Math\u003C/span>.min(progress, \u003Cspan class=\"hljs-number\">100\u003C/span>)}\u003C/span>%`\u003C/span>;\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">handleResponsiveChange\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">isMobile\u003C/span>) {\n            \u003Cspan class=\"hljs-comment\">// Switching to desktop - cleanup mobile elements\u003C/span>\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">closeNavigation\u003C/span>();\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> toggle = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.toc-toggle'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> overlay = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.toc-overlay'\u003C/span>);\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (toggle) toggle.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>();\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (overlay) overlay.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>();\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-comment\">// Switching to mobile - setup mobile elements\u003C/span>\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createMobileControls\u003C/span>();\n        }\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Integration with main ScrollSpy system\u003C/span>\n\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'DOMContentLoaded'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n    \u003Cspan class=\"hljs-comment\">// Wait for ScrollSpy to initialize\u003C/span>\n    \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">scrollSpy\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> mobileEnhancer = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">MobileNavigationEnhancer\u003C/span>(\u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">scrollSpy\u003C/span>);\n            \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">mobileNav\u003C/span> = mobileEnhancer;\n        }\n    }, \u003Cspan class=\"hljs-number\">100\u003C/span>);\n});\n\u003C/code>\u003C/pre>\u003Ch2 id=\"integration-with-documentation-systems\">Integration with Documentation Systems\u003C/h2>\n\u003Cp>Advanced anchor links and ScrollSpy navigation integrate seamlessly with modern documentation workflows. When combined with \u003Ca href=\"/blog/markdown-automation-workflows-complete-guide\">automated content validation systems\u003C/a>, anchor link validation ensures that navigation remains functional as content is updated, moved, and restructured through development cycles.\u003C/p>\n\u003Cp>For comprehensive content management, ScrollSpy navigation complements \u003Ca href=\"/blog/markdown-progressive-web-app-documentation-complete-guide\">Progressive Web App documentation systems\u003C/a> by providing offline-capable navigation that maintains user position and scroll state across page loads, ensuring consistent user experience even without network connectivity.\u003C/p>\n\u003Cp>When building sophisticated content architectures, dynamic navigation works effectively with \u003Ca href=\"/blog/markdown-link-management-cross-referencing-complete-guide\">link management systems\u003C/a> to create interconnected documentation that supports both linear reading and exploratory navigation patterns, adapting to different user needs and content consumption preferences.\u003C/p>\n\u003Ch2 id=\"performance-optimization-and-analytics\">Performance Optimization and Analytics\u003C/h2>\n\u003Ch3 id=\"intelligent-performance-monitoring\">Intelligent Performance Monitoring\u003C/h3>\n\u003Cp>Implementing comprehensive performance tracking for navigation systems:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// navigation-analytics.js - Performance monitoring and user behavior tracking\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">NavigationAnalytics\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">scrollSpyInstance\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollSpy\u003C/span> = scrollSpyInstance;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">pageLoadTime\u003C/span>: \u003Cspan class=\"hljs-literal\">null\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">navigationInteractions\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">sectionViewTimes\u003C/span>: \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span>(),\n            \u003Cspan class=\"hljs-attr\">scrollBehavior\u003C/span>: {\n                \u003Cspan class=\"hljs-attr\">totalScrollDistance\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">scrollSessions\u003C/span>: [],\n                \u003Cspan class=\"hljs-attr\">averageScrollSpeed\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>\n            },\n            \u003Cspan class=\"hljs-attr\">userFlow\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">performanceMetrics\u003C/span>: {\n                \u003Cspan class=\"hljs-attr\">linkClickResponse\u003C/span>: [],\n                \u003Cspan class=\"hljs-attr\">sectionLoadTimes\u003C/span>: [],\n                \u003Cspan class=\"hljs-attr\">smoothScrollPerformance\u003C/span>: []\n            }\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSession\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">startTime\u003C/span>: \u003Cspan class=\"hljs-title class_\">Date\u003C/span>.\u003Cspan class=\"hljs-title function_\">now\u003C/span>(),\n            \u003Cspan class=\"hljs-attr\">currentSection\u003C/span>: \u003Cspan class=\"hljs-literal\">null\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">sectionStartTime\u003C/span>: \u003Cspan class=\"hljs-literal\">null\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">interactions\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">init\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">init\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">measurePageLoad\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">trackSectionViewing\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">trackNavigationInteractions\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">trackScrollBehavior\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupPerformanceMonitoring\u003C/span>();\n        \n        \u003Cspan class=\"hljs-comment\">// Send periodic reports\u003C/span>\n        \u003Cspan class=\"hljs-built_in\">setInterval\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">sendAnalytics\u003C/span>(), \u003Cspan class=\"hljs-number\">30000\u003C/span>); \u003Cspan class=\"hljs-comment\">// Every 30 seconds\u003C/span>\n        \n        \u003Cspan class=\"hljs-comment\">// Send final report on page unload\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'beforeunload'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">finalizeSession\u003C/span>());\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">measurePageLoad\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'load'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> navigation = performance.\u003Cspan class=\"hljs-title function_\">getEntriesByType\u003C/span>(\u003Cspan class=\"hljs-string\">'navigation'\u003C/span>)[\u003Cspan class=\"hljs-number\">0\u003C/span>];\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">pageLoadTime\u003C/span> = {\n                \u003Cspan class=\"hljs-attr\">domContentLoaded\u003C/span>: navigation.\u003Cspan class=\"hljs-property\">domContentLoadedEventEnd\u003C/span> - navigation.\u003Cspan class=\"hljs-property\">domContentLoadedEventStart\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">loadComplete\u003C/span>: navigation.\u003Cspan class=\"hljs-property\">loadEventEnd\u003C/span> - navigation.\u003Cspan class=\"hljs-property\">loadEventStart\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">totalTime\u003C/span>: navigation.\u003Cspan class=\"hljs-property\">loadEventEnd\u003C/span> - navigation.\u003Cspan class=\"hljs-property\">navigationStart\u003C/span>\n            };\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">trackSectionViewing\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollSpy\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">onSectionChange\u003C/span> = \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">sectionId, section\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> now = \u003Cspan class=\"hljs-title class_\">Date\u003C/span>.\u003Cspan class=\"hljs-title function_\">now\u003C/span>();\n            \n            \u003Cspan class=\"hljs-comment\">// Record time spent in previous section\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSession\u003C/span>.\u003Cspan class=\"hljs-property\">currentSection\u003C/span> && \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSession\u003C/span>.\u003Cspan class=\"hljs-property\">sectionStartTime\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> timeSpent = now - \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSession\u003C/span>.\u003Cspan class=\"hljs-property\">sectionStartTime\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> previousSection = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSession\u003C/span>.\u003Cspan class=\"hljs-property\">currentSection\u003C/span>;\n                \n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">sectionViewTimes\u003C/span>.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(previousSection)) {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">sectionViewTimes\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(previousSection, []);\n                }\n                \n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">sectionViewTimes\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(previousSection).\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                    \u003Cspan class=\"hljs-attr\">duration\u003C/span>: timeSpent,\n                    \u003Cspan class=\"hljs-attr\">timestamp\u003C/span>: now,\n                    \u003Cspan class=\"hljs-attr\">sessionId\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSession\u003C/span>.\u003Cspan class=\"hljs-property\">startTime\u003C/span>\n                });\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Start tracking new section\u003C/span>\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSession\u003C/span>.\u003Cspan class=\"hljs-property\">currentSection\u003C/span> = sectionId;\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSession\u003C/span>.\u003Cspan class=\"hljs-property\">sectionStartTime\u003C/span> = now;\n            \n            \u003Cspan class=\"hljs-comment\">// Record user flow\u003C/span>\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">userFlow\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                \u003Cspan class=\"hljs-attr\">section\u003C/span>: sectionId,\n                \u003Cspan class=\"hljs-attr\">title\u003C/span>: section.\u003Cspan class=\"hljs-property\">title\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">level\u003C/span>: section.\u003Cspan class=\"hljs-property\">level\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">timestamp\u003C/span>: now,\n                \u003Cspan class=\"hljs-attr\">method\u003C/span>: \u003Cspan class=\"hljs-string\">'scroll'\u003C/span> \u003Cspan class=\"hljs-comment\">// vs 'click'\u003C/span>\n            });\n            \n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">trackSectionEngagement\u003C/span>(sectionId, section);\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">trackNavigationInteractions\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Track navigation link clicks\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">event\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> link = event.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'.table-of-contents a'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (link) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> href = link.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'href'\u003C/span>);\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> targetSection = href.\u003Cspan class=\"hljs-title function_\">substring\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>);\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> clickTime = \u003Cspan class=\"hljs-title class_\">Date\u003C/span>.\u003Cspan class=\"hljs-title function_\">now\u003C/span>();\n                \n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">navigationInteractions\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                    \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'navigation_click'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">target\u003C/span>: targetSection,\n                    \u003Cspan class=\"hljs-attr\">timestamp\u003C/span>: clickTime,\n                    \u003Cspan class=\"hljs-attr\">linkText\u003C/span>: link.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>(),\n                    \u003Cspan class=\"hljs-attr\">currentSection\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSession\u003C/span>.\u003Cspan class=\"hljs-property\">currentSection\u003C/span>\n                });\n                \n                \u003Cspan class=\"hljs-comment\">// Track click response time\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> responseStart = performance.\u003Cspan class=\"hljs-title function_\">now\u003C/span>();\n                \n                \u003Cspan class=\"hljs-title function_\">requestAnimationFrame\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                    \u003Cspan class=\"hljs-keyword\">const\u003C/span> responseEnd = performance.\u003Cspan class=\"hljs-title function_\">now\u003C/span>();\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">performanceMetrics\u003C/span>.\u003Cspan class=\"hljs-property\">linkClickResponse\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                        \u003Cspan class=\"hljs-attr\">duration\u003C/span>: responseEnd - responseStart,\n                        targetSection,\n                        \u003Cspan class=\"hljs-attr\">timestamp\u003C/span>: clickTime\n                    });\n                });\n                \n                \u003Cspan class=\"hljs-comment\">// Update user flow\u003C/span>\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">userFlow\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                    \u003Cspan class=\"hljs-attr\">section\u003C/span>: targetSection,\n                    \u003Cspan class=\"hljs-attr\">title\u003C/span>: link.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>(),\n                    \u003Cspan class=\"hljs-attr\">timestamp\u003C/span>: clickTime,\n                    \u003Cspan class=\"hljs-attr\">method\u003C/span>: \u003Cspan class=\"hljs-string\">'click'\u003C/span>\n                });\n                \n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSession\u003C/span>.\u003Cspan class=\"hljs-property\">interactions\u003C/span>++;\n            }\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Track keyboard navigation\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'keydown'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">event\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> ([\u003Cspan class=\"hljs-string\">'j'\u003C/span>, \u003Cspan class=\"hljs-string\">'k'\u003C/span>, \u003Cspan class=\"hljs-string\">'ArrowDown'\u003C/span>, \u003Cspan class=\"hljs-string\">'ArrowUp'\u003C/span>, \u003Cspan class=\"hljs-string\">'Home'\u003C/span>, \u003Cspan class=\"hljs-string\">'End'\u003C/span>].\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(event.\u003Cspan class=\"hljs-property\">key\u003C/span>) &&\n                (event.\u003Cspan class=\"hljs-property\">ctrlKey\u003C/span> || event.\u003Cspan class=\"hljs-property\">metaKey\u003C/span>)) {\n                \n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">navigationInteractions\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                    \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'keyboard_navigation'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">key\u003C/span>: event.\u003Cspan class=\"hljs-property\">key\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">modifiers\u003C/span>: {\n                        \u003Cspan class=\"hljs-attr\">ctrl\u003C/span>: event.\u003Cspan class=\"hljs-property\">ctrlKey\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">meta\u003C/span>: event.\u003Cspan class=\"hljs-property\">metaKey\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">shift\u003C/span>: event.\u003Cspan class=\"hljs-property\">shiftKey\u003C/span>\n                    },\n                    \u003Cspan class=\"hljs-attr\">timestamp\u003C/span>: \u003Cspan class=\"hljs-title class_\">Date\u003C/span>.\u003Cspan class=\"hljs-title function_\">now\u003C/span>(),\n                    \u003Cspan class=\"hljs-attr\">currentSection\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSession\u003C/span>.\u003Cspan class=\"hljs-property\">currentSection\u003C/span>\n                });\n                \n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSession\u003C/span>.\u003Cspan class=\"hljs-property\">interactions\u003C/span>++;\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">trackScrollBehavior\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> lastScrollY = \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">scrollY\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> lastScrollTime = \u003Cspan class=\"hljs-title class_\">Date\u003C/span>.\u003Cspan class=\"hljs-title function_\">now\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> scrollStartTime = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> isScrolling = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">scrollHandler\u003C/span> = (\u003Cspan class=\"hljs-params\">\u003C/span>) => {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> now = \u003Cspan class=\"hljs-title class_\">Date\u003C/span>.\u003Cspan class=\"hljs-title function_\">now\u003C/span>();\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentScrollY = \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">scrollY\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> scrollDistance = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">abs\u003C/span>(currentScrollY - lastScrollY);\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!isScrolling) {\n                scrollStartTime = now;\n                isScrolling = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Calculate scroll speed\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> timeDiff = now - lastScrollTime;\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (timeDiff > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> speed = scrollDistance / timeDiff;\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">scrollBehavior\u003C/span>.\u003Cspan class=\"hljs-property\">totalScrollDistance\u003C/span> += scrollDistance;\n                \n                \u003Cspan class=\"hljs-comment\">// Update average scroll speed\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentAvg = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">scrollBehavior\u003C/span>.\u003Cspan class=\"hljs-property\">averageScrollSpeed\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> totalSessions = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">scrollBehavior\u003C/span>.\u003Cspan class=\"hljs-property\">scrollSessions\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> + \u003Cspan class=\"hljs-number\">1\u003C/span>;\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">scrollBehavior\u003C/span>.\u003Cspan class=\"hljs-property\">averageScrollSpeed\u003C/span> = \n                    (currentAvg * (totalSessions - \u003Cspan class=\"hljs-number\">1\u003C/span>) + speed) / totalSessions;\n            }\n            \n            lastScrollY = currentScrollY;\n            lastScrollTime = now;\n            \n            \u003Cspan class=\"hljs-comment\">// Detect scroll end\u003C/span>\n            \u003Cspan class=\"hljs-built_in\">clearTimeout\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollEndTimeout\u003C/span>);\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollEndTimeout\u003C/span> = \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (isScrolling) {\n                    \u003Cspan class=\"hljs-keyword\">const\u003C/span> sessionDuration = \u003Cspan class=\"hljs-title class_\">Date\u003C/span>.\u003Cspan class=\"hljs-title function_\">now\u003C/span>() - scrollStartTime;\n                    \n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">scrollBehavior\u003C/span>.\u003Cspan class=\"hljs-property\">scrollSessions\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                        \u003Cspan class=\"hljs-attr\">duration\u003C/span>: sessionDuration,\n                        \u003Cspan class=\"hljs-attr\">distance\u003C/span>: \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">abs\u003C/span>(\u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">scrollY\u003C/span> - (lastScrollY - scrollDistance)),\n                        \u003Cspan class=\"hljs-attr\">timestamp\u003C/span>: scrollStartTime,\n                        \u003Cspan class=\"hljs-attr\">endPosition\u003C/span>: \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">scrollY\u003C/span>\n                    });\n                    \n                    isScrolling = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n                }\n            }, \u003Cspan class=\"hljs-number\">150\u003C/span>);\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'scroll'\u003C/span>, scrollHandler, { \u003Cspan class=\"hljs-attr\">passive\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span> });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">trackSectionEngagement\u003C/span>(\u003Cspan class=\"hljs-params\">sectionId, section\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Track if user interacts with content in the section\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> sectionElement = section.\u003Cspan class=\"hljs-property\">element\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> sectionLinks = sectionElement.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'a'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> sectionButtons = sectionElement.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'button'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> sectionInputs = sectionElement.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'input, textarea, select'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> elements = [...sectionLinks, ...sectionButtons, ...sectionInputs];\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">engagementHandler\u003C/span> = (\u003Cspan class=\"hljs-params\">event\u003C/span>) => {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">navigationInteractions\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'section_engagement'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">section\u003C/span>: sectionId,\n                \u003Cspan class=\"hljs-attr\">elementType\u003C/span>: event.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-property\">tagName\u003C/span>.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>(),\n                \u003Cspan class=\"hljs-attr\">elementAction\u003C/span>: event.\u003Cspan class=\"hljs-property\">type\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">timestamp\u003C/span>: \u003Cspan class=\"hljs-title class_\">Date\u003C/span>.\u003Cspan class=\"hljs-title function_\">now\u003C/span>()\n            });\n        };\n        \n        elements.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">element\u003C/span> =>\u003C/span> {\n            element.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, engagementHandler, { \u003Cspan class=\"hljs-attr\">once\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span> });\n            element.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'focus'\u003C/span>, engagementHandler, { \u003Cspan class=\"hljs-attr\">once\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span> });\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupPerformanceMonitoring\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Monitor smooth scrolling performance\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> originalScrollTo = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollSpy\u003C/span>.\u003Cspan class=\"hljs-property\">smoothScrollTo\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollSpy\u003C/span>.\u003Cspan class=\"hljs-property\">smoothScrollTo\u003C/span> = \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">targetPosition, callback\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> performanceStart = performance.\u003Cspan class=\"hljs-title function_\">now\u003C/span>();\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">enhancedCallback\u003C/span> = (\u003Cspan class=\"hljs-params\">\u003C/span>) => {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> performanceEnd = performance.\u003Cspan class=\"hljs-title function_\">now\u003C/span>();\n                \n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">performanceMetrics\u003C/span>.\u003Cspan class=\"hljs-property\">smoothScrollPerformance\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                    \u003Cspan class=\"hljs-attr\">duration\u003C/span>: performanceEnd - performanceStart,\n                    \u003Cspan class=\"hljs-attr\">distance\u003C/span>: \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">abs\u003C/span>(targetPosition - \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">scrollY\u003C/span>),\n                    \u003Cspan class=\"hljs-attr\">timestamp\u003C/span>: \u003Cspan class=\"hljs-title class_\">Date\u003C/span>.\u003Cspan class=\"hljs-title function_\">now\u003C/span>()\n                });\n                \n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (callback) \u003Cspan class=\"hljs-title function_\">callback\u003C/span>();\n            };\n            \n            originalScrollTo.\u003Cspan class=\"hljs-title function_\">call\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollSpy\u003C/span>, targetPosition, enhancedCallback);\n        };\n        \n        \u003Cspan class=\"hljs-comment\">// Monitor section loading performance\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> observer = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">PerformanceObserver\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">list\u003C/span>) =>\u003C/span> {\n            list.\u003Cspan class=\"hljs-title function_\">getEntries\u003C/span>().\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">entry\u003C/span> =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (entry.\u003Cspan class=\"hljs-property\">entryType\u003C/span> === \u003Cspan class=\"hljs-string\">'measure'\u003C/span> && entry.\u003Cspan class=\"hljs-property\">name\u003C/span>.\u003Cspan class=\"hljs-title function_\">startsWith\u003C/span>(\u003Cspan class=\"hljs-string\">'section-'\u003C/span>)) {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">performanceMetrics\u003C/span>.\u003Cspan class=\"hljs-property\">sectionLoadTimes\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                        \u003Cspan class=\"hljs-attr\">section\u003C/span>: entry.\u003Cspan class=\"hljs-property\">name\u003C/span>.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-string\">'section-'\u003C/span>, \u003Cspan class=\"hljs-string\">''\u003C/span>),\n                        \u003Cspan class=\"hljs-attr\">duration\u003C/span>: entry.\u003Cspan class=\"hljs-property\">duration\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">timestamp\u003C/span>: entry.\u003Cspan class=\"hljs-property\">startTime\u003C/span>\n                    });\n                }\n            });\n        });\n        \n        observer.\u003Cspan class=\"hljs-title function_\">observe\u003C/span>({ \u003Cspan class=\"hljs-attr\">entryTypes\u003C/span>: [\u003Cspan class=\"hljs-string\">'measure'\u003C/span>] });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">calculateUserEngagementScore\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> session = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSession\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> metrics = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Base score components\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> timeOnPage = (\u003Cspan class=\"hljs-title class_\">Date\u003C/span>.\u003Cspan class=\"hljs-title function_\">now\u003C/span>() - session.\u003Cspan class=\"hljs-property\">startTime\u003C/span>) / \u003Cspan class=\"hljs-number\">1000\u003C/span>; \u003Cspan class=\"hljs-comment\">// seconds\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> sectionsViewed = metrics.\u003Cspan class=\"hljs-property\">sectionViewTimes\u003C/span>.\u003Cspan class=\"hljs-property\">size\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> interactions = session.\u003Cspan class=\"hljs-property\">interactions\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> scrollDistance = metrics.\u003Cspan class=\"hljs-property\">scrollBehavior\u003C/span>.\u003Cspan class=\"hljs-property\">totalScrollDistance\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Calculate engagement score (0-100)\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> score = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Time engagement (0-30 points)\u003C/span>\n        score += \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">min\u003C/span>(timeOnPage / \u003Cspan class=\"hljs-number\">60\u003C/span>, \u003Cspan class=\"hljs-number\">30\u003C/span>); \u003Cspan class=\"hljs-comment\">// 1 point per minute, max 30\u003C/span>\n        \n        \u003Cspan class=\"hljs-comment\">// Content exploration (0-25 points)\u003C/span>\n        score += \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">min\u003C/span>(sectionsViewed * \u003Cspan class=\"hljs-number\">2\u003C/span>, \u003Cspan class=\"hljs-number\">25\u003C/span>); \u003Cspan class=\"hljs-comment\">// 2 points per section, max 25\u003C/span>\n        \n        \u003Cspan class=\"hljs-comment\">// Interaction engagement (0-25 points)\u003C/span>\n        score += \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">min\u003C/span>(interactions * \u003Cspan class=\"hljs-number\">5\u003C/span>, \u003Cspan class=\"hljs-number\">25\u003C/span>); \u003Cspan class=\"hljs-comment\">// 5 points per interaction, max 25\u003C/span>\n        \n        \u003Cspan class=\"hljs-comment\">// Scroll engagement (0-20 points)\u003C/span>\n        score += \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">min\u003C/span>(scrollDistance / \u003Cspan class=\"hljs-number\">1000\u003C/span> * \u003Cspan class=\"hljs-number\">2\u003C/span>, \u003Cspan class=\"hljs-number\">20\u003C/span>); \u003Cspan class=\"hljs-comment\">// 2 points per 1000px, max 20\u003C/span>\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">min\u003C/span>(\u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">round\u003C/span>(score), \u003Cspan class=\"hljs-number\">100\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateInsights\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> insights = {\n            \u003Cspan class=\"hljs-attr\">mostViewedSections\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getMostViewedSections\u003C/span>(),\n            \u003Cspan class=\"hljs-attr\">averageSectionTime\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getAverageSectionTime\u003C/span>(),\n            \u003Cspan class=\"hljs-attr\">navigationPatterns\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getNavigationPatterns\u003C/span>(),\n            \u003Cspan class=\"hljs-attr\">performanceSummary\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getPerformanceSummary\u003C/span>(),\n            \u003Cspan class=\"hljs-attr\">userBehaviorProfile\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getUserBehaviorProfile\u003C/span>(),\n            \u003Cspan class=\"hljs-attr\">engagementScore\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">calculateUserEngagementScore\u003C/span>()\n        };\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> insights;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getMostViewedSections\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> sectionStats = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">sectionViewTimes\u003C/span>.\u003Cspan class=\"hljs-title function_\">entries\u003C/span>())\n            .\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">[section, times]\u003C/span>) =>\u003C/span> ({\n                section,\n                \u003Cspan class=\"hljs-attr\">totalTime\u003C/span>: times.\u003Cspan class=\"hljs-title function_\">reduce\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">sum, time\u003C/span>) =>\u003C/span> sum + time.\u003Cspan class=\"hljs-property\">duration\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>),\n                \u003Cspan class=\"hljs-attr\">viewCount\u003C/span>: times.\u003Cspan class=\"hljs-property\">length\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">averageTime\u003C/span>: times.\u003Cspan class=\"hljs-title function_\">reduce\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">sum, time\u003C/span>) =>\u003C/span> sum + time.\u003Cspan class=\"hljs-property\">duration\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>) / times.\u003Cspan class=\"hljs-property\">length\u003C/span>\n            }))\n            .\u003Cspan class=\"hljs-title function_\">sort\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">a, b\u003C/span>) =>\u003C/span> b.\u003Cspan class=\"hljs-property\">totalTime\u003C/span> - a.\u003Cspan class=\"hljs-property\">totalTime\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> sectionStats.\u003Cspan class=\"hljs-title function_\">slice\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">5\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getAverageSectionTime\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> allTimes = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">sectionViewTimes\u003C/span>.\u003Cspan class=\"hljs-title function_\">values\u003C/span>())\n            .\u003Cspan class=\"hljs-title function_\">flat\u003C/span>()\n            .\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">time\u003C/span> =>\u003C/span> time.\u003Cspan class=\"hljs-property\">duration\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> allTimes.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span> \n            ? allTimes.\u003Cspan class=\"hljs-title function_\">reduce\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">sum, time\u003C/span>) =>\u003C/span> sum + time, \u003Cspan class=\"hljs-number\">0\u003C/span>) / allTimes.\u003Cspan class=\"hljs-property\">length\u003C/span>\n            : \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getNavigationPatterns\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> patterns = {\n            \u003Cspan class=\"hljs-attr\">scrollVsClick\u003C/span>: { \u003Cspan class=\"hljs-attr\">scroll\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-attr\">click\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> },\n            \u003Cspan class=\"hljs-attr\">backtrackingRate\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">linearProgression\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">userFlow\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">flow\u003C/span> =>\u003C/span> {\n            patterns.\u003Cspan class=\"hljs-property\">scrollVsClick\u003C/span>[flow.\u003Cspan class=\"hljs-property\">method\u003C/span>]++;\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Calculate backtracking (returning to previously visited sections)\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> visitedSections = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Set\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> backtracks = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">userFlow\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">flow\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (visitedSections.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(flow.\u003Cspan class=\"hljs-property\">section\u003C/span>)) {\n                backtracks++;\n            }\n            visitedSections.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(flow.\u003Cspan class=\"hljs-property\">section\u003C/span>);\n        });\n        \n        patterns.\u003Cspan class=\"hljs-property\">backtrackingRate\u003C/span> = backtracks / \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">max\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">userFlow\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>, \u003Cspan class=\"hljs-number\">1\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> patterns;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getPerformanceSummary\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> { performanceMetrics } = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">averageClickResponse\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">calculateAverage\u003C/span>(\n                performanceMetrics.\u003Cspan class=\"hljs-property\">linkClickResponse\u003C/span>.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">r\u003C/span> =>\u003C/span> r.\u003Cspan class=\"hljs-property\">duration\u003C/span>)\n            ),\n            \u003Cspan class=\"hljs-attr\">averageSmoothScrollTime\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">calculateAverage\u003C/span>(\n                performanceMetrics.\u003Cspan class=\"hljs-property\">smoothScrollPerformance\u003C/span>.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">s\u003C/span> =>\u003C/span> s.\u003Cspan class=\"hljs-property\">duration\u003C/span>)\n            ),\n            \u003Cspan class=\"hljs-attr\">averageSectionLoadTime\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">calculateAverage\u003C/span>(\n                performanceMetrics.\u003Cspan class=\"hljs-property\">sectionLoadTimes\u003C/span>.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">s\u003C/span> =>\u003C/span> s.\u003Cspan class=\"hljs-property\">duration\u003C/span>)\n            )\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getUserBehaviorProfile\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> profile = {\n            \u003Cspan class=\"hljs-attr\">readingSpeed\u003C/span>: \u003Cspan class=\"hljs-string\">'unknown'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">navigationStyle\u003C/span>: \u003Cspan class=\"hljs-string\">'unknown'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">engagementLevel\u003C/span>: \u003Cspan class=\"hljs-string\">'unknown'\u003C/span>\n        };\n        \n        \u003Cspan class=\"hljs-comment\">// Determine reading speed based on section view times\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> avgTime = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getAverageSectionTime\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (avgTime < \u003Cspan class=\"hljs-number\">10000\u003C/span>) profile.\u003Cspan class=\"hljs-property\">readingSpeed\u003C/span> = \u003Cspan class=\"hljs-string\">'fast'\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (avgTime < \u003Cspan class=\"hljs-number\">30000\u003C/span>) profile.\u003Cspan class=\"hljs-property\">readingSpeed\u003C/span> = \u003Cspan class=\"hljs-string\">'medium'\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">else\u003C/span> profile.\u003Cspan class=\"hljs-property\">readingSpeed\u003C/span> = \u003Cspan class=\"hljs-string\">'slow'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Determine navigation style\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> patterns = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getNavigationPatterns\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (patterns.\u003Cspan class=\"hljs-property\">scrollVsClick\u003C/span>.\u003Cspan class=\"hljs-property\">scroll\u003C/span> > patterns.\u003Cspan class=\"hljs-property\">scrollVsClick\u003C/span>.\u003Cspan class=\"hljs-property\">click\u003C/span> * \u003Cspan class=\"hljs-number\">2\u003C/span>) {\n            profile.\u003Cspan class=\"hljs-property\">navigationStyle\u003C/span> = \u003Cspan class=\"hljs-string\">'scroll-primary'\u003C/span>;\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (patterns.\u003Cspan class=\"hljs-property\">scrollVsClick\u003C/span>.\u003Cspan class=\"hljs-property\">click\u003C/span> > patterns.\u003Cspan class=\"hljs-property\">scrollVsClick\u003C/span>.\u003Cspan class=\"hljs-property\">scroll\u003C/span>) {\n            profile.\u003Cspan class=\"hljs-property\">navigationStyle\u003C/span> = \u003Cspan class=\"hljs-string\">'click-primary'\u003C/span>;\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            profile.\u003Cspan class=\"hljs-property\">navigationStyle\u003C/span> = \u003Cspan class=\"hljs-string\">'mixed'\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Determine engagement level\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> engagementScore = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">calculateUserEngagementScore\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (engagementScore > \u003Cspan class=\"hljs-number\">70\u003C/span>) profile.\u003Cspan class=\"hljs-property\">engagementLevel\u003C/span> = \u003Cspan class=\"hljs-string\">'high'\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (engagementScore > \u003Cspan class=\"hljs-number\">40\u003C/span>) profile.\u003Cspan class=\"hljs-property\">engagementLevel\u003C/span> = \u003Cspan class=\"hljs-string\">'medium'\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">else\u003C/span> profile.\u003Cspan class=\"hljs-property\">engagementLevel\u003C/span> = \u003Cspan class=\"hljs-string\">'low'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> profile;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">calculateAverage\u003C/span>(\u003Cspan class=\"hljs-params\">numbers\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> numbers.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span> \n            ? numbers.\u003Cspan class=\"hljs-title function_\">reduce\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">sum, num\u003C/span>) =>\u003C/span> sum + num, \u003Cspan class=\"hljs-number\">0\u003C/span>) / numbers.\u003Cspan class=\"hljs-property\">length\u003C/span>\n            : \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">sendAnalytics\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> data = {\n            \u003Cspan class=\"hljs-attr\">sessionId\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSession\u003C/span>.\u003Cspan class=\"hljs-property\">startTime\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">timestamp\u003C/span>: \u003Cspan class=\"hljs-title class_\">Date\u003C/span>.\u003Cspan class=\"hljs-title function_\">now\u003C/span>(),\n            \u003Cspan class=\"hljs-attr\">metrics\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">insights\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateInsights\u003C/span>(),\n            \u003Cspan class=\"hljs-attr\">userAgent\u003C/span>: navigator.\u003Cspan class=\"hljs-property\">userAgent\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">viewport\u003C/span>: {\n                \u003Cspan class=\"hljs-attr\">width\u003C/span>: \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">innerWidth\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">height\u003C/span>: \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">innerHeight\u003C/span>\n            }\n        };\n        \n        \u003Cspan class=\"hljs-comment\">// Send to analytics service\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-keyword\">typeof\u003C/span> gtag !== \u003Cspan class=\"hljs-string\">'undefined'\u003C/span>) {\n            \u003Cspan class=\"hljs-title function_\">gtag\u003C/span>(\u003Cspan class=\"hljs-string\">'event'\u003C/span>, \u003Cspan class=\"hljs-string\">'navigation_analytics'\u003C/span>, {\n                \u003Cspan class=\"hljs-attr\">engagement_score\u003C/span>: data.\u003Cspan class=\"hljs-property\">insights\u003C/span>.\u003Cspan class=\"hljs-property\">engagementScore\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">sections_viewed\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">sectionViewTimes\u003C/span>.\u003Cspan class=\"hljs-property\">size\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">interactions\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSession\u003C/span>.\u003Cspan class=\"hljs-property\">interactions\u003C/span>\n            });\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Send detailed data to custom analytics endpoint\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">sendToAnalyticsEndpoint\u003C/span>(data);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">sendToAnalyticsEndpoint\u003C/span>(\u003Cspan class=\"hljs-params\">data\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Implementation would send data to your analytics service\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'Analytics Data:'\u003C/span>, data);\n        \n        \u003Cspan class=\"hljs-comment\">// Example implementation:\u003C/span>\n        \u003Cspan class=\"hljs-comment\">/*\n        fetch('/api/analytics/navigation', {\n            method: 'POST',\n            headers: {\n                'Content-Type': 'application/json'\n            },\n            body: JSON.stringify(data)\n        }).catch(error => console.warn('Analytics failed:', error));\n        */\u003C/span>\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">finalizeSession\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Record final section time\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSession\u003C/span>.\u003Cspan class=\"hljs-property\">currentSection\u003C/span> && \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSession\u003C/span>.\u003Cspan class=\"hljs-property\">sectionStartTime\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> timeSpent = \u003Cspan class=\"hljs-title class_\">Date\u003C/span>.\u003Cspan class=\"hljs-title function_\">now\u003C/span>() - \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSession\u003C/span>.\u003Cspan class=\"hljs-property\">sectionStartTime\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> section = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSession\u003C/span>.\u003Cspan class=\"hljs-property\">currentSection\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">sectionViewTimes\u003C/span>.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(section)) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">sectionViewTimes\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(section, []);\n            }\n            \n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">sectionViewTimes\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(section).\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                \u003Cspan class=\"hljs-attr\">duration\u003C/span>: timeSpent,\n                \u003Cspan class=\"hljs-attr\">timestamp\u003C/span>: \u003Cspan class=\"hljs-title class_\">Date\u003C/span>.\u003Cspan class=\"hljs-title function_\">now\u003C/span>(),\n                \u003Cspan class=\"hljs-attr\">sessionId\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSession\u003C/span>.\u003Cspan class=\"hljs-property\">startTime\u003C/span>\n            });\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Send final analytics\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">sendAnalytics\u003C/span>();\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Initialize analytics with ScrollSpy\u003C/span>\n\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'DOMContentLoaded'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n    \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">scrollSpy\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> analytics = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">NavigationAnalytics\u003C/span>(\u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">scrollSpy\u003C/span>);\n            \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">navigationAnalytics\u003C/span> = analytics;\n        }\n    }, \u003Cspan class=\"hljs-number\">200\u003C/span>);\n});\n\u003C/code>\u003C/pre>\u003Ch2 id=\"accessibility-and-user-experience\">Accessibility and User Experience\u003C/h2>\n\u003Ch3 id=\"comprehensive-accessibility-implementation\">Comprehensive Accessibility Implementation\u003C/h3>\n\u003Cp>Ensuring navigation systems work for all users across different abilities and technologies:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// accessibility-enhancer.js - Accessibility features for navigation systems\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">NavigationAccessibilityEnhancer\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">scrollSpyInstance\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollSpy\u003C/span> = scrollSpyInstance;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">screenReaderAnnouncements\u003C/span> = [];\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">keyboardNavActive\u003C/span> = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">reducedMotion\u003C/span> = \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-title function_\">matchMedia\u003C/span>(\u003Cspan class=\"hljs-string\">'(prefers-reduced-motion: reduce)'\u003C/span>).\u003Cspan class=\"hljs-property\">matches\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">init\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">init\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupAriaAttributes\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupScreenReaderSupport\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupKeyboardNavigation\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupFocusManagement\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupReducedMotionSupport\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupSkipLinks\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupAriaAttributes\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> nav = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.table-of-contents'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (nav) {\n            nav.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'role'\u003C/span>, \u003Cspan class=\"hljs-string\">'navigation'\u003C/span>);\n            nav.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-label'\u003C/span>, \u003Cspan class=\"hljs-string\">'Table of Contents'\u003C/span>);\n            \n            \u003Cspan class=\"hljs-comment\">// Add landmark navigation\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> tocList = nav.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'ul'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (tocList) {\n                tocList.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'role'\u003C/span>, \u003Cspan class=\"hljs-string\">'list'\u003C/span>);\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Enhance navigation links\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> links = nav.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'a'\u003C/span>);\n            links.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">link, index\u003C/span>) =>\u003C/span> {\n                link.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'role'\u003C/span>, \u003Cspan class=\"hljs-string\">'link'\u003C/span>);\n                link.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-describedby'\u003C/span>, \u003Cspan class=\"hljs-string\">'toc-description'\u003C/span>);\n                \n                \u003Cspan class=\"hljs-comment\">// Add position information\u003C/span>\n                link.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-setsize'\u003C/span>, links.\u003Cspan class=\"hljs-property\">length\u003C/span>);\n                link.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-posinset'\u003C/span>, index + \u003Cspan class=\"hljs-number\">1\u003C/span>);\n                \n                \u003Cspan class=\"hljs-comment\">// Add section level information\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> level = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getHeadingLevel\u003C/span>(link);\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (level) {\n                    link.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-level'\u003C/span>, level);\n                }\n            });\n            \n            \u003Cspan class=\"hljs-comment\">// Add description element\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'toc-description'\u003C/span>)) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> description = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n                description.\u003Cspan class=\"hljs-property\">id\u003C/span> = \u003Cspan class=\"hljs-string\">'toc-description'\u003C/span>;\n                description.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'sr-only'\u003C/span>;\n                description.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">'Navigate to different sections of this document. Use arrow keys to move between items.'\u003C/span>;\n                nav.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(description);\n            }\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupScreenReaderSupport\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Create live region for announcements\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> liveRegion = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        liveRegion.\u003Cspan class=\"hljs-property\">id\u003C/span> = \u003Cspan class=\"hljs-string\">'navigation-announcements'\u003C/span>;\n        liveRegion.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'sr-only'\u003C/span>;\n        liveRegion.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-live'\u003C/span>, \u003Cspan class=\"hljs-string\">'polite'\u003C/span>);\n        liveRegion.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-atomic'\u003C/span>, \u003Cspan class=\"hljs-string\">'true'\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(liveRegion);\n        \n        \u003Cspan class=\"hljs-comment\">// Announce section changes\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> originalOnSectionChange = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollSpy\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">onSectionChange\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollSpy\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">onSectionChange\u003C/span> = \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">sectionId, section\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">announceSection\u003C/span>(section);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (originalOnSectionChange) {\n                \u003Cspan class=\"hljs-title function_\">originalOnSectionChange\u003C/span>(sectionId, section);\n            }\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">announceSection\u003C/span>(\u003Cspan class=\"hljs-params\">section\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> liveRegion = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'navigation-announcements'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (liveRegion && !\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">keyboardNavActive\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> levelText = section.\u003Cspan class=\"hljs-property\">level\u003C/span> ? \u003Cspan class=\"hljs-string\">`Heading level \u003Cspan class=\"hljs-subst\">${section.level}\u003C/span>:`\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> announcement = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${levelText}\u003C/span> \u003Cspan class=\"hljs-subst\">${section.title}\u003C/span>`\u003C/span>;\n            \n            \u003Cspan class=\"hljs-comment\">// Clear and set new announcement\u003C/span>\n            liveRegion.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n            \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                liveRegion.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = announcement;\n            }, \u003Cspan class=\"hljs-number\">100\u003C/span>);\n            \n            \u003Cspan class=\"hljs-comment\">// Track announcements to avoid repetition\u003C/span>\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">screenReaderAnnouncements\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                \u003Cspan class=\"hljs-attr\">text\u003C/span>: announcement,\n                \u003Cspan class=\"hljs-attr\">timestamp\u003C/span>: \u003Cspan class=\"hljs-title class_\">Date\u003C/span>.\u003Cspan class=\"hljs-title function_\">now\u003C/span>()\n            });\n            \n            \u003Cspan class=\"hljs-comment\">// Clean old announcements\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> fiveMinutesAgo = \u003Cspan class=\"hljs-title class_\">Date\u003C/span>.\u003Cspan class=\"hljs-title function_\">now\u003C/span>() - \u003Cspan class=\"hljs-number\">300000\u003C/span>;\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">screenReaderAnnouncements\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">screenReaderAnnouncements\u003C/span>\n                .\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">announcement\u003C/span> =>\u003C/span> announcement.\u003Cspan class=\"hljs-property\">timestamp\u003C/span> > fiveMinutesAgo);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupKeyboardNavigation\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> nav = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.table-of-contents'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!nav) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> links = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(nav.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'a'\u003C/span>));\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> currentFocusIndex = -\u003Cspan class=\"hljs-number\">1\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Make navigation container focusable\u003C/span>\n        nav.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'tabindex'\u003C/span>, \u003Cspan class=\"hljs-string\">'0'\u003C/span>);\n        nav.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'focus'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">keyboardNavActive\u003C/span> = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (currentFocusIndex === -\u003Cspan class=\"hljs-number\">1\u003C/span> && links.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n                currentFocusIndex = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">focusLink\u003C/span>(links[currentFocusIndex]);\n            }\n        });\n        \n        nav.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'blur'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">event\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!nav.\u003Cspan class=\"hljs-title function_\">contains\u003C/span>(event.\u003Cspan class=\"hljs-property\">relatedTarget\u003C/span>)) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">keyboardNavActive\u003C/span> = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n                currentFocusIndex = -\u003Cspan class=\"hljs-number\">1\u003C/span>;\n            }\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Handle keyboard navigation\u003C/span>\n        nav.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'keydown'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">event\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">keyboardNavActive\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">let\u003C/span> handled = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">switch\u003C/span> (event.\u003Cspan class=\"hljs-property\">key\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'ArrowDown'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'j'\u003C/span>:\n                    event.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                    currentFocusIndex = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">min\u003C/span>(currentFocusIndex + \u003Cspan class=\"hljs-number\">1\u003C/span>, links.\u003Cspan class=\"hljs-property\">length\u003C/span> - \u003Cspan class=\"hljs-number\">1\u003C/span>);\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">focusLink\u003C/span>(links[currentFocusIndex]);\n                    handled = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                \n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'ArrowUp'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'k'\u003C/span>:\n                    event.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                    currentFocusIndex = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">max\u003C/span>(currentFocusIndex - \u003Cspan class=\"hljs-number\">1\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>);\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">focusLink\u003C/span>(links[currentFocusIndex]);\n                    handled = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                \n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'Home'\u003C/span>:\n                    event.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                    currentFocusIndex = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">focusLink\u003C/span>(links[currentFocusIndex]);\n                    handled = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                \n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'End'\u003C/span>:\n                    event.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                    currentFocusIndex = links.\u003Cspan class=\"hljs-property\">length\u003C/span> - \u003Cspan class=\"hljs-number\">1\u003C/span>;\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">focusLink\u003C/span>(links[currentFocusIndex]);\n                    handled = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                \n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'Enter'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">' '\u003C/span>:\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (currentFocusIndex >= \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n                        event.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                        links[currentFocusIndex].\u003Cspan class=\"hljs-title function_\">click\u003C/span>();\n                        handled = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n                    }\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                \n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'Escape'\u003C/span>:\n                    nav.\u003Cspan class=\"hljs-title function_\">blur\u003C/span>();\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">keyboardNavActive\u003C/span> = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n                    handled = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (handled) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">announceKeyboardNavigation\u003C/span>(links[currentFocusIndex]);\n            }\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Update focus index when links are clicked\u003C/span>\n        links.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">link, index\u003C/span>) =>\u003C/span> {\n            link.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'focus'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                currentFocusIndex = index;\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">keyboardNavActive\u003C/span> = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n            });\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">focusLink\u003C/span>(\u003Cspan class=\"hljs-params\">link\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (link) {\n            link.\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n            \n            \u003Cspan class=\"hljs-comment\">// Ensure focused link is visible\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> nav = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.table-of-contents'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> linkRect = link.\u003Cspan class=\"hljs-title function_\">getBoundingClientRect\u003C/span>();\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> navRect = nav.\u003Cspan class=\"hljs-title function_\">getBoundingClientRect\u003C/span>();\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (linkRect.\u003Cspan class=\"hljs-property\">top\u003C/span> < navRect.\u003Cspan class=\"hljs-property\">top\u003C/span> || linkRect.\u003Cspan class=\"hljs-property\">bottom\u003C/span> > navRect.\u003Cspan class=\"hljs-property\">bottom\u003C/span>) {\n                link.\u003Cspan class=\"hljs-title function_\">scrollIntoView\u003C/span>({\n                    \u003Cspan class=\"hljs-attr\">behavior\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">reducedMotion\u003C/span> ? \u003Cspan class=\"hljs-string\">'auto'\u003C/span> : \u003Cspan class=\"hljs-string\">'smooth'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">block\u003C/span>: \u003Cspan class=\"hljs-string\">'center'\u003C/span>\n                });\n            }\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">announceKeyboardNavigation\u003C/span>(\u003Cspan class=\"hljs-params\">link\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (link) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> level = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getHeadingLevel\u003C/span>(link);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> levelText = level ? \u003Cspan class=\"hljs-string\">` Level \u003Cspan class=\"hljs-subst\">${level}\u003C/span>.`\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> announcement = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${link.textContent.trim()}\u003C/span>.\u003Cspan class=\"hljs-subst\">${levelText}\u003C/span>`\u003C/span>;\n            \n            \u003Cspan class=\"hljs-comment\">// Use a different live region for keyboard navigation\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">let\u003C/span> keyboardLiveRegion = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'keyboard-navigation-announcements'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!keyboardLiveRegion) {\n                keyboardLiveRegion = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n                keyboardLiveRegion.\u003Cspan class=\"hljs-property\">id\u003C/span> = \u003Cspan class=\"hljs-string\">'keyboard-navigation-announcements'\u003C/span>;\n                keyboardLiveRegion.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'sr-only'\u003C/span>;\n                keyboardLiveRegion.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-live'\u003C/span>, \u003Cspan class=\"hljs-string\">'assertive'\u003C/span>);\n                keyboardLiveRegion.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-atomic'\u003C/span>, \u003Cspan class=\"hljs-string\">'true'\u003C/span>);\n                \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(keyboardLiveRegion);\n            }\n            \n            keyboardLiveRegion.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = announcement;\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupFocusManagement\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Manage focus during scrolling\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> originalScrollToAnchor = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollSpy\u003C/span>.\u003Cspan class=\"hljs-property\">scrollToAnchor\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollSpy\u003C/span>.\u003Cspan class=\"hljs-property\">scrollToAnchor\u003C/span> = \u003Cspan class=\"hljs-keyword\">function\u003C/span>(\u003Cspan class=\"hljs-params\">anchorId, updateHistory = \u003Cspan class=\"hljs-literal\">true\u003C/span>\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> section = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">sections\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(anchorId);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (section) {\n                \u003Cspan class=\"hljs-comment\">// Focus the target heading for screen readers\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> heading = section.\u003Cspan class=\"hljs-property\">element\u003C/span>;\n                \n                \u003Cspan class=\"hljs-comment\">// Make heading focusable temporarily\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> originalTabIndex = heading.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'tabindex'\u003C/span>);\n                heading.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'tabindex'\u003C/span>, \u003Cspan class=\"hljs-string\">'-1'\u003C/span>);\n                \n                originalScrollToAnchor.\u003Cspan class=\"hljs-title function_\">call\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>, anchorId, updateHistory);\n                \n                \u003Cspan class=\"hljs-comment\">// Focus after scroll completes\u003C/span>\n                \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                    heading.\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n                    \n                    \u003Cspan class=\"hljs-comment\">// Restore original tabindex\u003C/span>\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (originalTabIndex !== \u003Cspan class=\"hljs-literal\">null\u003C/span>) {\n                        heading.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'tabindex'\u003C/span>, originalTabIndex);\n                    } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                        heading.\u003Cspan class=\"hljs-title function_\">removeAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'tabindex'\u003C/span>);\n                    }\n                }, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">scrollDuration\u003C/span> + \u003Cspan class=\"hljs-number\">100\u003C/span>);\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                originalScrollToAnchor.\u003Cspan class=\"hljs-title function_\">call\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>, anchorId, updateHistory);\n            }\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupReducedMotionSupport\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> mediaQuery = \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-title function_\">matchMedia\u003C/span>(\u003Cspan class=\"hljs-string\">'(prefers-reduced-motion: reduce)'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">updateMotionPreference\u003C/span> = (\u003Cspan class=\"hljs-params\">\u003C/span>) => {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">reducedMotion\u003C/span> = mediaQuery.\u003Cspan class=\"hljs-property\">matches\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">reducedMotion\u003C/span>) {\n                \u003Cspan class=\"hljs-comment\">// Disable smooth scrolling\u003C/span>\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollSpy\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">smoothScroll\u003C/span> = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollSpy\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">scrollDuration\u003C/span> = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n                \n                \u003Cspan class=\"hljs-comment\">// Add reduced motion class to navigation\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> nav = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.table-of-contents'\u003C/span>);\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (nav) {\n                    nav.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'reduced-motion'\u003C/span>);\n                }\n            }\n        };\n        \n        mediaQuery.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'change'\u003C/span>, updateMotionPreference);\n        \u003Cspan class=\"hljs-title function_\">updateMotionPreference\u003C/span>(); \u003Cspan class=\"hljs-comment\">// Initial check\u003C/span>\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupSkipLinks\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Create skip links for major sections\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> skipLinksContainer = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'nav'\u003C/span>);\n        skipLinksContainer.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'skip-links'\u003C/span>;\n        skipLinksContainer.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-label'\u003C/span>, \u003Cspan class=\"hljs-string\">'Skip navigation'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> skipLinks = [\n            { \u003Cspan class=\"hljs-attr\">href\u003C/span>: \u003Cspan class=\"hljs-string\">'#main-content'\u003C/span>, \u003Cspan class=\"hljs-attr\">text\u003C/span>: \u003Cspan class=\"hljs-string\">'Skip to main content'\u003C/span> },\n            { \u003Cspan class=\"hljs-attr\">href\u003C/span>: \u003Cspan class=\"hljs-string\">'#table-of-contents'\u003C/span>, \u003Cspan class=\"hljs-attr\">text\u003C/span>: \u003Cspan class=\"hljs-string\">'Skip to table of contents'\u003C/span> }\n        ];\n        \n        skipLinks.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">linkData\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> link = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'a'\u003C/span>);\n            link.\u003Cspan class=\"hljs-property\">href\u003C/span> = linkData.\u003Cspan class=\"hljs-property\">href\u003C/span>;\n            link.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = linkData.\u003Cspan class=\"hljs-property\">text\u003C/span>;\n            link.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'skip-link'\u003C/span>;\n            \n            link.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">event\u003C/span>) =>\u003C/span> {\n                event.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> target = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(linkData.\u003Cspan class=\"hljs-property\">href\u003C/span>);\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (target) {\n                    target.\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n                    target.\u003Cspan class=\"hljs-title function_\">scrollIntoView\u003C/span>();\n                }\n            });\n            \n            skipLinksContainer.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(link);\n        });\n        \n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-title function_\">insertBefore\u003C/span>(skipLinksContainer, \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-property\">firstChild\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getHeadingLevel\u003C/span>(\u003Cspan class=\"hljs-params\">link\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> href = link.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'href'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (href && href.\u003Cspan class=\"hljs-title function_\">startsWith\u003C/span>(\u003Cspan class=\"hljs-string\">'#'\u003C/span>)) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> targetId = href.\u003Cspan class=\"hljs-title function_\">substring\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> section = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollSpy\u003C/span>.\u003Cspan class=\"hljs-property\">sections\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(targetId);\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> section ? section.\u003Cspan class=\"hljs-property\">level\u003C/span> : \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        }\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Public API for testing accessibility features\u003C/span>\n    \u003Cspan class=\"hljs-title function_\">testAccessibility\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> results = {\n            \u003Cspan class=\"hljs-attr\">ariaAttributes\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">validateAriaAttributes\u003C/span>(),\n            \u003Cspan class=\"hljs-attr\">keyboardNavigation\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">testKeyboardNavigation\u003C/span>(),\n            \u003Cspan class=\"hljs-attr\">screenReader\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">testScreenReaderSupport\u003C/span>(),\n            \u003Cspan class=\"hljs-attr\">colorContrast\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">checkColorContrast\u003C/span>(),\n            \u003Cspan class=\"hljs-attr\">focusManagement\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">testFocusManagement\u003C/span>()\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">table\u003C/span>(results);\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> results;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">validateAriaAttributes\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> nav = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.table-of-contents'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> issues = [];\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!nav) {\n            issues.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">'Navigation container not found'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> { \u003Cspan class=\"hljs-attr\">passed\u003C/span>: \u003Cspan class=\"hljs-literal\">false\u003C/span>, issues };\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!nav.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'role'\u003C/span>)) {\n            issues.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">'Missing role attribute on navigation'\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!nav.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-label'\u003C/span>)) {\n            issues.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">'Missing aria-label on navigation'\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> links = nav.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'a'\u003C/span>);\n        links.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">link, index\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!link.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-describedby'\u003C/span>)) {\n                issues.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">`Link \u003Cspan class=\"hljs-subst\">${index + \u003Cspan class=\"hljs-number\">1\u003C/span>}\u003C/span> missing aria-describedby`\u003C/span>);\n            }\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> { \u003Cspan class=\"hljs-attr\">passed\u003C/span>: issues.\u003Cspan class=\"hljs-property\">length\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span>, issues };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">testKeyboardNavigation\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// This would typically require automated testing tools\u003C/span>\n        \u003Cspan class=\"hljs-comment\">// For now, return a checklist\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">passed\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">features\u003C/span>: [\n                \u003Cspan class=\"hljs-string\">'Arrow key navigation implemented'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'Home/End key support implemented'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'Enter/Space key activation implemented'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'Escape key exit implemented'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'Focus indicators visible'\u003C/span>\n            ]\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">testScreenReaderSupport\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> liveRegion = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'navigation-announcements'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">passed\u003C/span>: !!liveRegion,\n            \u003Cspan class=\"hljs-attr\">features\u003C/span>: {\n                \u003Cspan class=\"hljs-attr\">liveRegion\u003C/span>: !!liveRegion,\n                \u003Cspan class=\"hljs-attr\">announcements\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">screenReaderAnnouncements\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">ariaLive\u003C/span>: liveRegion ? liveRegion.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-live'\u003C/span>) === \u003Cspan class=\"hljs-string\">'polite'\u003C/span> : \u003Cspan class=\"hljs-literal\">false\u003C/span>\n            }\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">checkColorContrast\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// This would typically require color analysis tools\u003C/span>\n        \u003Cspan class=\"hljs-comment\">// For now, return basic checks\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> nav = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.table-of-contents'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!nav) \u003Cspan class=\"hljs-keyword\">return\u003C/span> { \u003Cspan class=\"hljs-attr\">passed\u003C/span>: \u003Cspan class=\"hljs-literal\">false\u003C/span>, \u003Cspan class=\"hljs-attr\">issues\u003C/span>: [\u003Cspan class=\"hljs-string\">'Navigation not found'\u003C/span>] };\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> activeLink = nav.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.active'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> computedStyle = activeLink ? \u003Cspan class=\"hljs-title function_\">getComputedStyle\u003C/span>(activeLink) : \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">passed\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">note\u003C/span>: \u003Cspan class=\"hljs-string\">'Color contrast should be tested with specialized tools'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">activeElementFound\u003C/span>: !!activeLink,\n            \u003Cspan class=\"hljs-attr\">hasBackground\u003C/span>: computedStyle ? computedStyle.\u003Cspan class=\"hljs-property\">backgroundColor\u003C/span> !== \u003Cspan class=\"hljs-string\">'rgba(0, 0, 0, 0)'\u003C/span> : \u003Cspan class=\"hljs-literal\">false\u003C/span>\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">testFocusManagement\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">passed\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">features\u003C/span>: [\n                \u003Cspan class=\"hljs-string\">'Focus moves to target section on navigation'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'Focus indicators are visible'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'Focus is trapped in modal navigation (mobile)'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'Focus returns appropriately after interactions'\u003C/span>\n            ]\n        };\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Initialize accessibility enhancements\u003C/span>\n\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'DOMContentLoaded'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n    \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">scrollSpy\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> accessibilityEnhancer = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">NavigationAccessibilityEnhancer\u003C/span>(\u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">scrollSpy\u003C/span>);\n            \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">navigationAccessibility\u003C/span> = accessibilityEnhancer;\n        }\n    }, \u003Cspan class=\"hljs-number\">300\u003C/span>);\n});\n\u003C/code>\u003C/pre>\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* accessibility-styles.css - Accessibility-focused styles */\u003C/span>\n\n\u003Cspan class=\"hljs-comment\">/* Skip links */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.skip-links\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: fixed;\n    \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">left\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">z-index\u003C/span>: \u003Cspan class=\"hljs-number\">9999\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#000\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#fff\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.skip-link\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n    \u003Cspan class=\"hljs-attribute\">left\u003C/span>: -\u003Cspan class=\"hljs-number\">9999px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: hidden;\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span> \u003Cspan class=\"hljs-number\">1.5rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#000\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#fff\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: bold;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.skip-link\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: static;\n    \u003Cspan class=\"hljs-attribute\">left\u003C/span>: auto;\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: auto;\n    \u003Cspan class=\"hljs-attribute\">height\u003C/span>: auto;\n    \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: visible;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Screen reader only content */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.sr-only\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: -\u003Cspan class=\"hljs-number\">1px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: hidden;\n    \u003Cspan class=\"hljs-attribute\">clip\u003C/span>: \u003Cspan class=\"hljs-built_in\">rect\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">white-space\u003C/span>: nowrap;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Enhanced focus indicators */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.table-of-contents\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">outline\u003C/span>: \u003Cspan class=\"hljs-number\">3px\u003C/span> solid \u003Cspan class=\"hljs-number\">#005fcc\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">outline-offset\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-of-contents\u003C/span> \u003Cspan class=\"hljs-selector-tag\">a\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">outline\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#005fcc\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">outline-offset\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#e6f3ff\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n    \u003Cspan class=\"hljs-attribute\">z-index\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* High contrast mode support */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-contrast\u003C/span>: high) {\n    \u003Cspan class=\"hljs-selector-class\">.table-of-contents\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.table-of-contents\u003C/span> \u003Cspan class=\"hljs-selector-tag\">a\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid transparent;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.table-of-contents\u003C/span> \u003Cspan class=\"hljs-selector-tag\">a\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.table-of-contents\u003C/span> \u003Cspan class=\"hljs-selector-tag\">a\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border-color\u003C/span>: currentColor;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.table-of-contents\u003C/span> \u003Cspan class=\"hljs-selector-tag\">a\u003C/span>\u003Cspan class=\"hljs-selector-class\">.active\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">background\u003C/span>: ButtonText;\n        \u003Cspan class=\"hljs-attribute\">color\u003C/span>: ButtonFace;\n        \u003Cspan class=\"hljs-attribute\">border-color\u003C/span>: ButtonText;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Reduced motion support */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.reduced-motion\u003C/span> * {\n    \u003Cspan class=\"hljs-attribute\">animation-duration\u003C/span>: \u003Cspan class=\"hljs-number\">0.01ms\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">animation-iteration-count\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">transition-duration\u003C/span>: \u003Cspan class=\"hljs-number\">0.01ms\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-reduced-motion\u003C/span>: reduce) {\n    \u003Cspan class=\"hljs-selector-class\">.table-of-contents\u003C/span> \u003Cspan class=\"hljs-selector-tag\">a\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.scroll-progress\u003C/span>,\n    \u003Cspan class=\"hljs-selector-tag\">html\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: none;\n        scroll-behavior: auto;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.toc-toggle\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.table-of-contents\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: none;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Keyboard navigation indicators */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.table-of-contents\u003C/span>\u003Cspan class=\"hljs-selector-attr\">[data-keyboard-active=\u003Cspan class=\"hljs-string\">"true"\u003C/span>]\u003C/span> \u003Cspan class=\"hljs-selector-tag\">a\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-of-contents\u003C/span>\u003Cspan class=\"hljs-selector-attr\">[data-keyboard-active=\u003Cspan class=\"hljs-string\">"true"\u003C/span>]\u003C/span> \u003Cspan class=\"hljs-selector-tag\">a\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::before\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">'→'\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n    \u003Cspan class=\"hljs-attribute\">left\u003C/span>: -\u003Cspan class=\"hljs-number\">1.5rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#005fcc\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: bold;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Enhanced mobile accessibility */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.toc-toggle\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">outline\u003C/span>: \u003Cspan class=\"hljs-number\">3px\u003C/span> solid \u003Cspan class=\"hljs-number\">#005fcc\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">outline-offset\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.table-of-contents\u003C/span>\u003Cspan class=\"hljs-selector-class\">.mobile-open\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border-left\u003C/span>: \u003Cspan class=\"hljs-number\">5px\u003C/span> solid \u003Cspan class=\"hljs-number\">#005fcc\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.table-of-contents\u003C/span>\u003Cspan class=\"hljs-selector-class\">.mobile-open\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span>-within {\n        \u003Cspan class=\"hljs-attribute\">border-left-color\u003C/span>: \u003Cspan class=\"hljs-number\">#003d7a\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Print accessibility */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> print {\n    \u003Cspan class=\"hljs-selector-class\">.skip-links\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.toc-toggle\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.toc-overlay\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.table-of-contents\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">position\u003C/span>: static;\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#000\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#fff\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.table-of-contents\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::before\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">"Table of Contents"\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n        \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: bold;\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">1.2em\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#000\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">padding-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">0.25rem\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Color blindness support */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.table-of-contents\u003C/span> \u003Cspan class=\"hljs-selector-tag\">a\u003C/span>\u003Cspan class=\"hljs-selector-class\">.active\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-of-contents\u003C/span> \u003Cspan class=\"hljs-selector-tag\">a\u003C/span>\u003Cspan class=\"hljs-selector-class\">.active\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::after\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">'●'\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n    \u003Cspan class=\"hljs-attribute\">right\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: inherit;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Large text support */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">min-resolution\u003C/span>: \u003Cspan class=\"hljs-number\">2dppx\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.table-of-contents\u003C/span> \u003Cspan class=\"hljs-selector-tag\">a\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.6\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.75rem\u003C/span> \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Windows High Contrast Mode */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">-ms-high-contrast\u003C/span>: active) {\n    \u003Cspan class=\"hljs-selector-class\">.table-of-contents\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid WindowText;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.table-of-contents\u003C/span> \u003Cspan class=\"hljs-selector-tag\">a\u003C/span>\u003Cspan class=\"hljs-selector-class\">.active\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">background\u003C/span>: Highlight;\n        \u003Cspan class=\"hljs-attribute\">color\u003C/span>: HighlightText;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.table-of-contents\u003C/span> \u003Cspan class=\"hljs-selector-tag\">a\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">outline\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid WindowText;\n    }\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"conclusion\">Conclusion\u003C/h2>\n\u003Cp>Advanced Markdown anchor links and ScrollSpy navigation systems represent a sophisticated approach to creating interactive, accessible, and user-friendly documentation experiences that adapt to user behavior while maintaining professional standards for performance and accessibility. By implementing intelligent anchor generation, comprehensive validation systems, and sophisticated scroll tracking with mobile optimization, technical writers can create documentation platforms that rival commercial solutions in both functionality and user experience.\u003C/p>\n\u003Cp>The key to successful implementation lies in balancing advanced functionality with accessibility requirements, ensuring that interactive features enhance rather than hinder the user experience across all devices and assistive technologies. Whether you're building comprehensive API documentation, interactive tutorials, or complex technical guides, the anchor link and ScrollSpy techniques covered in this guide provide the foundation for creating navigation systems that truly serve your users' needs.\u003C/p>\n\u003Cp>Remember to implement progressive enhancement strategies that work without JavaScript, validate anchor links as part of your content workflow, and continuously monitor user behavior to optimize navigation patterns. With proper implementation of advanced anchor links and ScrollSpy navigation, your Markdown documentation can achieve the same level of interactivity and user engagement that users expect from modern web applications while maintaining the simplicity and maintainability that makes Markdown such a powerful documentation format.\u003C/p>\n",[15,19,22,25,28,31,34],{"id":16,"text":17,"level":18},"why-master-anchor-links-and-scrollspy-navigation","Why Master Anchor Links and ScrollSpy Navigation?",2,{"id":20,"text":21,"level":18},"foundation-anchor-link-generation","Foundation Anchor Link Generation",{"id":23,"text":24,"level":18},"advanced-scrollspy-implementation","Advanced ScrollSpy Implementation",{"id":26,"text":27,"level":18},"integration-with-documentation-systems","Integration with Documentation Systems",{"id":29,"text":30,"level":18},"performance-optimization-and-analytics","Performance Optimization and Analytics",{"id":32,"text":33,"level":18},"accessibility-and-user-experience","Accessibility and User Experience",{"id":35,"text":36,"level":18},"conclusion","Conclusion",[],[39,47,55],{"slug":40,"title":41,"description":42,"excerpt":43,"date":44,"category":9,"author":10,"keywords":45,"readingMinutes":46},"markdown-anchor-links-navigation-complete-guide","Markdown Anchor Links and Navigation: Complete Guide for Document Navigation and Cross-Referencing","Master anchor links, internal navigation, and cross-referencing in Markdown. Learn to create navigable documents, link to specific sections, and build comprehensive documentation with seamless navigation.","Anchor links and internal navigation transform lengthy Markdown documents into navigable, interconnected resources that readers can efficiently explore and reference. Modern Markdown processors…","2025-09-02","markdown anchor links, markdown navigation, markdown cross reference, internal links markdown, markdown table of contents, document navigation, markdown bookmarks, heading links",11,{"slug":48,"title":49,"description":50,"excerpt":51,"date":52,"category":9,"author":10,"keywords":53,"readingMinutes":54},"markdown-anchor-links-fragment-identifiers-complete-guide","Markdown Anchor Links and Fragment Identifiers: Complete Guide to Document Navigation and Cross-Referencing","Master anchor links, fragment identifiers, and document navigation in Markdown. Learn to create internal links, table of contents, smooth scrolling, and cross-document references with proper accessibility.","Markdown anchor links and fragment identifiers enable sophisticated document navigation through internal linking systems, cross-referencing capabilities, and dynamic content organization. By…","2025-12-31","markdown anchor links, fragment identifiers, internal links, table of contents, document navigation, cross references, markdown bookmarks, heading links, smooth scrolling",21,{"slug":56,"title":57,"description":58,"excerpt":59,"date":60,"category":9,"author":10,"keywords":61,"readingMinutes":12},"markdown-table-data-filtering-search-complete-guide","Markdown Table Data Filtering and Search: Complete Guide for Interactive Content Discovery and Dynamic Data Navigation","Master table data filtering and search capabilities in Markdown for enhanced content discovery. Learn JavaScript integration, advanced filtering techniques, and responsive search implementations for interactive documentation.","Table data filtering and search capabilities in Markdown enable dynamic content discovery that transforms static tabular information into interactive, searchable interfaces allowing users to…","2025-12-16","markdown table filtering, table search functionality, interactive markdown tables, data filtering markdown, table javascript integration, searchable tables markdown, dynamic table filtering, markdown table navigation",1792184943540]