[{"data":1,"prerenderedAt":54},["Reactive",2],{"blog-post-markdown-responsive-design-patterns-mobile-optimization-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":28,"related":29},"markdown-responsive-design-patterns-mobile-optimization-complete-guide","Markdown Responsive Design Patterns and Mobile Optimization: Complete Guide to Adaptive Content Layouts and Cross-Device Compatibility","Master responsive design patterns in Markdown documents. Learn to create mobile-optimized content, implement adaptive layouts, handle viewport considerations, and build cross-device compatible documentation that works seamlessly across all screen sizes.","Markdown responsive design patterns and mobile optimization enable sophisticated content adaptation through device-aware layout systems, adaptive typography strategies, and cross-platform…","2026-01-02","Tutorial","Matthew Rathbone","markdown responsive design, mobile optimization, adaptive layouts, cross-device compatibility, responsive tables, mobile markdown, viewport optimization, device-specific content, responsive typography",20,"\u003Cp>Markdown responsive design patterns and mobile optimization enable sophisticated content adaptation through device-aware layout systems, adaptive typography strategies, and cross-platform compatibility frameworks. By implementing viewport-conscious design principles, mobile-first content architectures, and responsive component systems, technical writers and developers can create comprehensive documentation that delivers optimal user experiences across desktop computers, tablets, smartphones, and emerging device categories while maintaining content integrity and accessibility standards.\u003C/p>\n\u003Ch2 id=\"why-master-responsive-design-in-markdown\">Why Master Responsive Design in Markdown?\u003C/h2>\n\u003Cp>Advanced responsive design provides essential capabilities for modern content delivery:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Universal Accessibility\u003C/strong>: Ensure content works seamlessly across all device types and screen sizes\u003C/li>\n\u003Cli>\u003Cstrong>Enhanced User Experience\u003C/strong>: Optimize reading flow and navigation for different interaction patterns\u003C/li>\n\u003Cli>\u003Cstrong>Performance Optimization\u003C/strong>: Implement device-specific content loading and rendering strategies\u003C/li>\n\u003Cli>\u003Cstrong>Future-Proof Architecture\u003C/strong>: Create adaptive systems that work with emerging devices and form factors\u003C/li>\n\u003Cli>\u003Cstrong>Content Consistency\u003C/strong>: Maintain design integrity while adapting to different display constraints\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"foundation-responsive-design-principles\">Foundation Responsive Design Principles\u003C/h2>\n\u003Ch3 id=\"css-media-queries-for-markdown-content\">CSS Media Queries for Markdown Content\u003C/h3>\n\u003Cp>Understanding how to implement responsive design patterns within Markdown-generated content:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* responsive-markdown.css - Comprehensive responsive design for Markdown content */\u003C/span>\n\n\u003Cspan class=\"hljs-comment\">/* Base responsive typography system */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.markdown-content\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> auto;\n    \u003Cspan class=\"hljs-attribute\">padding\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\">font-family\u003C/span>: -apple-system, BlinkMacSystemFont, \u003Cspan class=\"hljs-string\">'Segoe UI'\u003C/span>, Roboto, sans-serif;\n    \n    \u003Cspan class=\"hljs-comment\">/* Fluid typography using clamp() */\u003C/span>\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-built_in\">clamp\u003C/span>(\u003Cspan class=\"hljs-number\">1rem\u003C/span>, \u003Cspan class=\"hljs-number\">2.5vw\u003C/span>, \u003Cspan class=\"hljs-number\">1.125rem\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-comment\">/* Desktop-first responsive breakpoints */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.markdown-content\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">1200px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">2rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Tablet landscape */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">1024px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.markdown-content\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1.5rem\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-built_in\">clamp\u003C/span>(\u003Cspan class=\"hljs-number\">0.95rem\u003C/span>, \u003Cspan class=\"hljs-number\">2.2vw\u003C/span>, \u003Cspan class=\"hljs-number\">1.1rem\u003C/span>);\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Tablet portrait */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.markdown-content\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-built_in\">clamp\u003C/span>(\u003Cspan class=\"hljs-number\">0.9rem\u003C/span>, \u003Cspan class=\"hljs-number\">2vw\u003C/span>, \u003Cspan class=\"hljs-number\">1.05rem\u003C/span>);\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Mobile devices */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">480px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.markdown-content\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.75rem\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-built_in\">clamp\u003C/span>(\u003Cspan class=\"hljs-number\">0.875rem\u003C/span>, \u003Cspan class=\"hljs-number\">1.8vw\u003C/span>, \u003Cspan class=\"hljs-number\">1rem\u003C/span>);\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Small mobile devices */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">320px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.markdown-content\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.875rem\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Responsive heading hierarchy */\u003C/span>\n\u003Cspan class=\"hljs-selector-tag\">h1\u003C/span>, \u003Cspan class=\"hljs-selector-tag\">h2\u003C/span>, \u003Cspan class=\"hljs-selector-tag\">h3\u003C/span>, \u003Cspan class=\"hljs-selector-tag\">h4\u003C/span>, \u003Cspan class=\"hljs-selector-tag\">h5\u003C/span>, \u003Cspan class=\"hljs-selector-tag\">h6\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.2\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1.5em\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0.75em\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">word-wrap\u003C/span>: break-word;\n    \u003Cspan class=\"hljs-attribute\">hyphens\u003C/span>: auto;\n}\n\n\u003Cspan class=\"hljs-selector-tag\">h1\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-built_in\">clamp\u003C/span>(\u003Cspan class=\"hljs-number\">1.75rem\u003C/span>, \u003Cspan class=\"hljs-number\">4vw\u003C/span>, \u003Cspan class=\"hljs-number\">2.5rem\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">margin-top\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-tag\">h2\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-built_in\">clamp\u003C/span>(\u003Cspan class=\"hljs-number\">1.5rem\u003C/span>, \u003Cspan class=\"hljs-number\">3.5vw\u003C/span>, \u003Cspan class=\"hljs-number\">2rem\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-selector-tag\">h3\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-built_in\">clamp\u003C/span>(\u003Cspan class=\"hljs-number\">1.25rem\u003C/span>, \u003Cspan class=\"hljs-number\">3vw\u003C/span>, \u003Cspan class=\"hljs-number\">1.75rem\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-selector-tag\">h4\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-built_in\">clamp\u003C/span>(\u003Cspan class=\"hljs-number\">1.125rem\u003C/span>, \u003Cspan class=\"hljs-number\">2.5vw\u003C/span>, \u003Cspan class=\"hljs-number\">1.5rem\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-selector-tag\">h5\u003C/span>, \u003Cspan class=\"hljs-selector-tag\">h6\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-built_in\">clamp\u003C/span>(\u003Cspan class=\"hljs-number\">1rem\u003C/span>, \u003Cspan class=\"hljs-number\">2vw\u003C/span>, \u003Cspan class=\"hljs-number\">1.25rem\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-comment\">/* Responsive paragraph spacing */\u003C/span>\n\u003Cspan class=\"hljs-selector-tag\">p\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1em\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left;\n    \u003Cspan class=\"hljs-attribute\">orphans\u003C/span>: \u003Cspan class=\"hljs-number\">3\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">widows\u003C/span>: \u003Cspan class=\"hljs-number\">3\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Mobile-specific paragraph adjustments */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">480px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-tag\">p\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0.8em\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Responsive list styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-tag\">ul\u003C/span>, \u003Cspan class=\"hljs-selector-tag\">ol\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1em\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding-left\u003C/span>: \u003Cspan class=\"hljs-number\">2em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">480px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-tag\">ul\u003C/span>, \u003Cspan class=\"hljs-selector-tag\">ol\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">padding-left\u003C/span>: \u003Cspan class=\"hljs-number\">1.5em\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0.8em\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-selector-tag\">li\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0.5em\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Nested list adjustments */\u003C/span>\n\u003Cspan class=\"hljs-selector-tag\">li\u003C/span> \u003Cspan class=\"hljs-selector-tag\">ul\u003C/span>, \u003Cspan class=\"hljs-selector-tag\">li\u003C/span> \u003Cspan class=\"hljs-selector-tag\">ol\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0.25em\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Responsive blockquote styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-tag\">blockquote\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">2em\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1em\u003C/span> \u003Cspan class=\"hljs-number\">1.5em\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-left\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span> solid \u003Cspan class=\"hljs-number\">#007bff\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n    \u003Cspan class=\"hljs-attribute\">overflow-wrap\u003C/span>: break-word;\n}\n\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-tag\">blockquote\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1.5em\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.8em\u003C/span> \u003Cspan class=\"hljs-number\">1em\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border-left-width\u003C/span>: \u003Cspan class=\"hljs-number\">3px\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">480px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-tag\">blockquote\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1em\u003C/span> -\u003Cspan class=\"hljs-number\">0.75rem\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.75em\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border-left-width\u003C/span>: \u003Cspan class=\"hljs-number\">3px\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Responsive code block styling */\u003C/span>\npre {\n    \u003Cspan class=\"hljs-attribute\">overflow-x\u003C/span>: auto;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1.5em\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#e9ecef\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1.5em\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n}\n\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n    pre {\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1em\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1em\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.9em\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">480px\u003C/span>) {\n    pre {\n        \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1em\u003C/span> -\u003Cspan class=\"hljs-number\">0.75rem\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.75em\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border-left\u003C/span>: none;\n        \u003Cspan class=\"hljs-attribute\">border-right\u003C/span>: none;\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.85em\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Inline code responsive styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-tag\">code\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f1f3f4\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.2em\u003C/span> \u003Cspan class=\"hljs-number\">0.4em\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">3px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-string\">'Fira Code'\u003C/span>, \u003Cspan class=\"hljs-string\">'Monaco'\u003C/span>, \u003Cspan class=\"hljs-string\">'Menlo'\u003C/span>, monospace;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.9em\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">word-break\u003C/span>: break-all;\n}\n\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">480px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-tag\">code\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.85em\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.15em\u003C/span> \u003Cspan class=\"hljs-number\">0.3em\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">word-break\u003C/span>: break-word;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Responsive image handling */\u003C/span>\n\u003Cspan class=\"hljs-selector-tag\">img\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">height\u003C/span>: auto;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1em\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n}\n\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-tag\">img\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0.8em\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">480px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-tag\">img\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0.75em\u003C/span> -\u003Cspan class=\"hljs-number\">0.75rem\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-built_in\">calc\u003C/span>(\u003Cspan class=\"hljs-number\">100%\u003C/span> + \u003Cspan class=\"hljs-number\">1.5rem\u003C/span>);\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Responsive figure handling */\u003C/span>\n\u003Cspan class=\"hljs-selector-tag\">figure\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">2em\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n}\n\n\u003Cspan class=\"hljs-selector-tag\">figcaption\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.9em\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#6c757d\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin-top\u003C/span>: \u003Cspan class=\"hljs-number\">0.5em\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-style\u003C/span>: italic;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">1em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-tag\">figure\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1.5em\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-tag\">figcaption\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.85em\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0.5em\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">480px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-tag\">figure\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1em\u003C/span> -\u003Cspan class=\"hljs-number\">0.75rem\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-tag\">figcaption\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.8em\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.5em\u003C/span> \u003Cspan class=\"hljs-number\">0.75rem\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left;\n    }\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"responsive-table-design-patterns\">Responsive Table Design Patterns\u003C/h3>\n\u003Cp>Advanced table handling for mobile-first Markdown content:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* responsive-markdown-tables.css - Comprehensive responsive table handling */\u003C/span>\n\n\u003Cspan class=\"hljs-comment\">/* Base table styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-tag\">table\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-collapse\u003C/span>: collapse;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1.5em\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#dee2e6\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: hidden;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.95em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-tag\">th\u003C/span>, \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.75em\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left;\n    \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#dee2e6\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">word-wrap\u003C/span>: break-word;\n    \u003Cspan class=\"hljs-attribute\">hyphens\u003C/span>: auto;\n}\n\n\u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#495057\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: sticky;\n    \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">z-index\u003C/span>: \u003Cspan class=\"hljs-number\">10\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Responsive table wrapper */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.table-wrapper\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">overflow-x\u003C/span>: auto;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1.5em\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#dee2e6\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>: white;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-wrapper\u003C/span> \u003Cspan class=\"hljs-selector-tag\">table\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Desktop table styling */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.table-wrapper\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">overflow-x\u003C/span>: visible;\n    }\n    \n    \u003Cspan class=\"hljs-selector-tag\">table\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">1em\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>, \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1em\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Tablet responsive tables */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.table-wrapper\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1em\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-tag\">table\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">600px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.9em\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>, \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.6em\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.9em\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-comment\">/* Add scroll indicator */\u003C/span>\n    \u003Cspan class=\"hljs-selector-class\">.table-wrapper\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::after\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">'← Scroll horizontally to see more →'\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n        \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.8em\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#6c757d\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.5em\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border-top\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#dee2e6\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Mobile table transformations */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">480px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.table-wrapper\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1em\u003C/span> -\u003Cspan class=\"hljs-number\">0.75rem\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border-left\u003C/span>: none;\n        \u003Cspan class=\"hljs-attribute\">border-right\u003C/span>: none;\n    }\n    \n    \u003Cspan class=\"hljs-comment\">/* Stack table approach */\u003C/span>\n    \u003Cspan class=\"hljs-selector-class\">.table-responsive-stack\u003C/span> \u003Cspan class=\"hljs-selector-tag\">table\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.table-responsive-stack\u003C/span> \u003Cspan class=\"hljs-selector-tag\">thead\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.table-responsive-stack\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tbody\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.table-responsive-stack\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.table-responsive-stack\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.table-responsive-stack\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.table-responsive-stack\u003C/span> \u003Cspan class=\"hljs-selector-tag\">thead\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n        \u003Cspan class=\"hljs-attribute\">top\u003C/span>: -\u003Cspan class=\"hljs-number\">9999px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">left\u003C/span>: -\u003Cspan class=\"hljs-number\">9999px\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.table-responsive-stack\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">background\u003C/span>: white;\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#dee2e6\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1em\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1em\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\">4px\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-responsive-stack\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:last-child\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.table-responsive-stack\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: none;\n        \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#dee2e6\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.75em\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0.75em\u003C/span> \u003Cspan class=\"hljs-number\">45%\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">background\u003C/span>: white;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.table-responsive-stack\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:last-child\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: none;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.table-responsive-stack\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:before\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-built_in\">attr\u003C/span>(data-label) \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\">width\u003C/span>: \u003Cspan class=\"hljs-number\">40%\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">padding-right\u003C/span>: \u003Cspan class=\"hljs-number\">10px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">white-space\u003C/span>: nowrap;\n        \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#495057\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">0.75em\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-comment\">/* Card-style table approach */\u003C/span>\n    \u003Cspan class=\"hljs-selector-class\">.table-responsive-cards\u003C/span> \u003Cspan class=\"hljs-selector-tag\">table\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: none;\n        \u003Cspan class=\"hljs-attribute\">background\u003C/span>: transparent;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.table-responsive-cards\u003C/span> \u003Cspan class=\"hljs-selector-tag\">thead\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.table-responsive-cards\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tbody\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.table-responsive-cards\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n        \u003Cspan class=\"hljs-attribute\">background\u003C/span>: white;\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#dee2e6\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1em\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1em\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-responsive-cards\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: none;\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.5em\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.table-responsive-cards\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:last-child\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: none;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.table-responsive-cards\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:before\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-built_in\">attr\u003C/span>(data-label);\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n        \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#495057\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">0.25em\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.9em\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-comment\">/* Horizontal scroll table */\u003C/span>\n    \u003Cspan class=\"hljs-selector-class\">.table-responsive-scroll\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">overflow-x\u003C/span>: auto;\n        -webkit-\u003Cspan class=\"hljs-attribute\">overflow\u003C/span>-scrolling: touch;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.table-responsive-scroll\u003C/span> \u003Cspan class=\"hljs-selector-tag\">table\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">600px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.85em\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.table-responsive-scroll\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.table-responsive-scroll\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.5em\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">120px\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-comment\">/* Priority columns system */\u003C/span>\n    \u003Cspan class=\"hljs-selector-class\">.table-responsive-priority\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>\u003Cspan class=\"hljs-selector-class\">.priority-low\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.table-responsive-priority\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>\u003Cspan class=\"hljs-selector-class\">.priority-low\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Extra small mobile devices */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">320px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.table-responsive-priority\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>\u003Cspan class=\"hljs-selector-class\">.priority-medium\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.table-responsive-priority\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>\u003Cspan class=\"hljs-selector-class\">.priority-medium\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.table-responsive-stack\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.5em\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0.5em\u003C/span> \u003Cspan class=\"hljs-number\">50%\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.9em\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.table-responsive-stack\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:before\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">45%\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.85em\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">0.5em\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Print-specific table adjustments */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> print {\n    \u003Cspan class=\"hljs-selector-class\">.table-wrapper\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: visible;\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#000\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">page-break-inside\u003C/span>: avoid;\n    }\n    \n    \u003Cspan class=\"hljs-selector-tag\">table\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.8em\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">page-break-inside\u003C/span>: auto;\n    }\n    \n    \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">page-break-inside\u003C/span>: avoid;\n        \u003Cspan class=\"hljs-attribute\">page-break-after\u003C/span>: auto;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.table-wrapper\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::after\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none;\n    }\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"advanced-mobile-content-patterns\">Advanced Mobile Content Patterns\u003C/h3>\n\u003Cp>Implementing sophisticated mobile-first content strategies:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Mobile-Optimized Markdown Content Patterns\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Device-Aware Content Structure\u003C/span>\n\n\u003Cspan class=\"hljs-section\">### Information Hierarchy for Mobile\u003C/span>\nStructure content with mobile consumption patterns in mind:\n\n\u003Cspan class=\"hljs-section\">#### Primary Content (Always Visible)\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Essential information that appears on all devices\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Core concepts and key takeaways  \n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Primary navigation elements\n\n\u003Cspan class=\"hljs-section\">#### Secondary Content (Tablet+)\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"content-tablet-plus"\u003C/span>>\u003C/span>\u003C/span>\nAdditional context and supplementary information that enhances \nunderstanding but isn't critical for basic comprehension.\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\u003C/span>\n\n\u003Cspan class=\"hljs-section\">#### Extended Content (Desktop+)\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"content-desktop-plus"\u003C/span>>\u003C/span>\u003C/span>\nDetailed explanations, advanced examples, and comprehensive \nreference materials that benefit from larger screen real estate.\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Touch-Friendly Interactive Elements\u003C/span>\n\n\u003Cspan class=\"hljs-section\">### Expandable Content Sections\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">details\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"mobile-expandable"\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">summary\u003C/span>>\u003C/span>\u003C/span>Tap to expand additional information\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">summary\u003C/span>>\u003C/span>\u003C/span>\n\nThis content is hidden by default on mobile devices to reduce \ncognitive load, but easily accessible when needed.\n\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Additional details\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Extended examples\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Supplementary resources\n\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">details\u003C/span>>\u003C/span>\u003C/span>\n\n\u003Cspan class=\"hljs-section\">### Progressive Disclosure Patterns\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"progressive-disclosure"\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">h4\u003C/span>>\u003C/span>\u003C/span>Basic Information\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">h4\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\u003C/span>Essential content visible by default.\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\u003C/span>\n\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"disclosure-toggle"\u003C/span> \u003Cspan class=\"hljs-attr\">data-target\u003C/span>=\u003Cspan class=\"hljs-string\">"advanced-info"\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">button\u003C/span>>\u003C/span>\u003C/span>Show Advanced Information\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">button\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\u003C/span>\n\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"advanced-info"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"disclosure-content"\u003C/span> \u003Cspan class=\"hljs-attr\">hidden\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">h4\u003C/span>>\u003C/span>\u003C/span>Advanced Information\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">h4\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\u003C/span>Additional technical details revealed on demand.\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Responsive Content Blocks\u003C/span>\n\n\u003Cspan class=\"hljs-section\">### Feature Comparison Cards\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"feature-cards responsive-grid"\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"feature-card"\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">h4\u003C/span>>\u003C/span>\u003C/span>Mobile Features\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">h4\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">ul\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\u003C/span>Touch optimization\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\u003C/span>Gesture support\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\u003C/span>Offline capability\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">ul\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\u003C/span>\n\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"feature-card"\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">h4\u003C/span>>\u003C/span>\u003C/span>Desktop Features\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">h4\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">ul\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\u003C/span>Multi-window support\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\u003C/span>Keyboard shortcuts\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\u003C/span>Advanced toolbars\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">ul\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\u003C/span>\n\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"feature-card"\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">h4\u003C/span>>\u003C/span>\u003C/span>Cross-Platform\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">h4\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">ul\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\u003C/span>Synchronized settings\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\u003C/span>Cloud storage\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\u003C/span>Universal search\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">ul\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\u003C/span>\n\n\u003Cspan class=\"hljs-section\">### Adaptive Media Gallery\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"media-gallery responsive"\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figure\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"media-item"\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"example-1.jpg"\u003C/span> \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Mobile interface example"\u003C/span> \n     \u003Cspan class=\"hljs-attr\">sizes\u003C/span>=\u003Cspan class=\"hljs-string\">"(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figcaption\u003C/span>>\u003C/span>\u003C/span>Mobile interface design\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">figcaption\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">figure\u003C/span>>\u003C/span>\u003C/span>\n\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figure\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"media-item"\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"example-2.jpg"\u003C/span> \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Tablet interface example"\u003C/span>\n     \u003Cspan class=\"hljs-attr\">sizes\u003C/span>=\u003Cspan class=\"hljs-string\">"(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figcaption\u003C/span>>\u003C/span>\u003C/span>Tablet interface design\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">figcaption\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">figure\u003C/span>>\u003C/span>\u003C/span>\n\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figure\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"media-item"\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"example-3.jpg"\u003C/span> \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Desktop interface example"\u003C/span>\n     \u003Cspan class=\"hljs-attr\">sizes\u003C/span>=\u003Cspan class=\"hljs-string\">"(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figcaption\u003C/span>>\u003C/span>\u003C/span>Desktop interface design\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">figcaption\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">figure\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"javascript-enhancement-for-mobile-experience\">JavaScript Enhancement for Mobile Experience\u003C/h3>\n\u003Cp>Dynamic content adaptation based on device capabilities:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// mobile-markdown-enhancer.js - Advanced mobile optimization\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">MobileMarkdownEnhancer\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\">enableTouchGestures\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">optimizeImages\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enhanceNavigation\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">adaptiveTables\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">progressiveContent\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">performanceMode\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            ...options\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">deviceInfo\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">detectDevice\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">performanceMetrics\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">loadTime\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">renderTime\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">interactionTime\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_\">initialize\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">detectDevice\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> userAgent = navigator.\u003Cspan class=\"hljs-property\">userAgent\u003C/span>.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> screenWidth = \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">innerWidth\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> hasTouch = \u003Cspan class=\"hljs-string\">'ontouchstart'\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> \u003Cspan class=\"hljs-variable language_\">window\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> devicePixelRatio = \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">devicePixelRatio\u003C/span> || \u003Cspan class=\"hljs-number\">1\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">isMobile\u003C/span>: screenWidth <= \u003Cspan class=\"hljs-number\">480\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">isTablet\u003C/span>: screenWidth > \u003Cspan class=\"hljs-number\">480\u003C/span> && screenWidth <= \u003Cspan class=\"hljs-number\">768\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">isDesktop\u003C/span>: screenWidth > \u003Cspan class=\"hljs-number\">768\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">hasTouch\u003C/span>: hasTouch,\n            \u003Cspan class=\"hljs-attr\">isRetina\u003C/span>: devicePixelRatio > \u003Cspan class=\"hljs-number\">1\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">connectionSpeed\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getConnectionSpeed\u003C/span>(),\n            \u003Cspan class=\"hljs-attr\">orientation\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getOrientation\u003C/span>(),\n            \u003Cspan class=\"hljs-attr\">supportsCSSGrid\u003C/span>: \u003Cspan class=\"hljs-variable constant_\">CSS\u003C/span>.\u003Cspan class=\"hljs-title function_\">supports\u003C/span>(\u003Cspan class=\"hljs-string\">'display'\u003C/span>, \u003Cspan class=\"hljs-string\">'grid'\u003C/span>),\n            \u003Cspan class=\"hljs-attr\">supportsFlexbox\u003C/span>: \u003Cspan class=\"hljs-variable constant_\">CSS\u003C/span>.\u003Cspan class=\"hljs-title function_\">supports\u003C/span>(\u003Cspan class=\"hljs-string\">'display'\u003C/span>, \u003Cspan class=\"hljs-string\">'flex'\u003C/span>)\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getConnectionSpeed\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> connection = navigator.\u003Cspan class=\"hljs-property\">connection\u003C/span> || navigator.\u003Cspan class=\"hljs-property\">mozConnection\u003C/span> || navigator.\u003Cspan class=\"hljs-property\">webkitConnection\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (connection) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> effectiveType = connection.\u003Cspan class=\"hljs-property\">effectiveType\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> downlink = connection.\u003Cspan class=\"hljs-property\">downlink\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (effectiveType === \u003Cspan class=\"hljs-string\">'4g'\u003C/span> && downlink > \u003Cspan class=\"hljs-number\">10\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'fast'\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (effectiveType === \u003Cspan class=\"hljs-string\">'4g'\u003C/span> || effectiveType === \u003Cspan class=\"hljs-string\">'3g'\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'medium'\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'slow'\u003C/span>;\n        }\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'unknown'\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getOrientation\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">innerHeight\u003C/span> > \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">innerWidth\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'portrait'\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'landscape'\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">initialize\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\">'DOMContentLoaded'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">startPerformanceTracking\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\">adaptiveTables\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">enhanceTables\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\">optimizeImages\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">optimizeImages\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\">enhanceNavigation\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">enhanceNavigation\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\">enableTouchGestures\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">enableTouchGestures\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\">progressiveContent\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupProgressiveContent\u003C/span>();\n            }\n            \n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupResponsiveListeners\u003C/span>();\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">finishPerformanceTracking\u003C/span>();\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">startPerformanceTracking\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">performanceMetrics\u003C/span>.\u003Cspan class=\"hljs-property\">startTime\u003C/span> = performance.\u003Cspan class=\"hljs-title function_\">now\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">finishPerformanceTracking\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">performanceMetrics\u003C/span>.\u003Cspan class=\"hljs-property\">loadTime\u003C/span> = performance.\u003Cspan class=\"hljs-title function_\">now\u003C/span>() - \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">performanceMetrics\u003C/span>.\u003Cspan class=\"hljs-property\">startTime\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\">performanceMode\u003C/span> && \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">performanceMetrics\u003C/span>.\u003Cspan class=\"hljs-property\">loadTime\u003C/span> > \u003Cspan class=\"hljs-number\">1000\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">enablePerformanceMode\u003C/span>();\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">enhanceTables\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tables = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'table'\u003C/span>);\n        \n        tables.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">table\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">makeTableResponsive\u003C/span>(table);\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">makeTableResponsive\u003C/span>(\u003Cspan class=\"hljs-params\">table\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Wrap table for horizontal scrolling\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!table.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'.table-wrapper'\u003C/span>)) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> wrapper = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n            wrapper.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'table-wrapper'\u003C/span>;\n            table.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>.\u003Cspan class=\"hljs-title function_\">insertBefore\u003C/span>(wrapper, table);\n            wrapper.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(table);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Add data labels for mobile stacking\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> headers = table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'th'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rows = table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody tr'\u003C/span>);\n        \n        rows.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> cells = row.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'td'\u003C/span>);\n            cells.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">cell, index\u003C/span>) =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (headers[index]) {\n                    cell.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'data-label'\u003C/span>, headers[index].\u003Cspan class=\"hljs-property\">textContent\u003C/span>);\n                }\n            });\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Determine best responsive strategy\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> columnCount = headers.\u003Cspan class=\"hljs-property\">length\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> wrapper = table.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'.table-wrapper'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">deviceInfo\u003C/span>.\u003Cspan class=\"hljs-property\">isMobile\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (columnCount > \u003Cspan class=\"hljs-number\">4\u003C/span>) {\n                wrapper.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'table-responsive-stack'\u003C/span>);\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (columnCount > \u003Cspan class=\"hljs-number\">2\u003C/span>) {\n                wrapper.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'table-responsive-cards'\u003C/span>);\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                wrapper.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'table-responsive-scroll'\u003C/span>);\n            }\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Add priority columns for progressive enhancement\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setPriorityColumns\u003C/span>(table);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setPriorityColumns\u003C/span>(\u003Cspan class=\"hljs-params\">table\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> headers = table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'th'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rows = table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>);\n        \n        headers.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">header, index\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> headerText = header.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>();\n            \u003Cspan class=\"hljs-keyword\">let\u003C/span> priority = \u003Cspan class=\"hljs-string\">'high'\u003C/span>;\n            \n            \u003Cspan class=\"hljs-comment\">// Determine priority based on common patterns\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (headerText.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'description'\u003C/span>) || \n                headerText.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'detail'\u003C/span>) ||\n                headerText.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'example'\u003C/span>)) {\n                priority = \u003Cspan class=\"hljs-string\">'low'\u003C/span>;\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (headerText.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'type'\u003C/span>) ||\n                      headerText.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'status'\u003C/span>) ||\n                      headerText.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'category'\u003C/span>)) {\n                priority = \u003Cspan class=\"hljs-string\">'medium'\u003C/span>;\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Apply priority class to header and all cells in column\u003C/span>\n            header.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">`priority-\u003Cspan class=\"hljs-subst\">${priority}\u003C/span>`\u003C/span>);\n            rows.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> cell = row.\u003Cspan class=\"hljs-property\">children\u003C/span>[index];\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (cell) {\n                    cell.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">`priority-\u003Cspan class=\"hljs-subst\">${priority}\u003C/span>`\u003C/span>);\n                }\n            });\n        });\n        \n        table.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'.table-wrapper'\u003C/span>).\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'table-responsive-priority'\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">optimizeImages\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> images = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'img'\u003C/span>);\n        \n        images.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">img\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">optimizeImage\u003C/span>(img);\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Set up lazy loading for below-the-fold images\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupLazyLoading\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">optimizeImage\u003C/span>(\u003Cspan class=\"hljs-params\">img\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Add responsive image attributes if not present\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!img.\u003Cspan class=\"hljs-title function_\">hasAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'sizes'\u003C/span>)) {\n            img.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'sizes'\u003C/span>, \n                \u003Cspan class=\"hljs-string\">'(max-width: 480px) 100vw, '\u003C/span> +\n                \u003Cspan class=\"hljs-string\">'(max-width: 768px) 90vw, '\u003C/span> +\n                \u003Cspan class=\"hljs-string\">'(max-width: 1200px) 80vw, '\u003C/span> +\n                \u003Cspan class=\"hljs-string\">'1200px'\u003C/span>\n            );\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Add loading attribute for modern browsers\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!img.\u003Cspan class=\"hljs-title function_\">hasAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'loading'\u003C/span>)) {\n            img.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'loading'\u003C/span>, \u003Cspan class=\"hljs-string\">'lazy'\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Add responsive wrapper\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!img.\u003Cspan class=\"hljs-property\">parentElement\u003C/span>.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">contains\u003C/span>(\u003Cspan class=\"hljs-string\">'responsive-image'\u003C/span>)) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> wrapper = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n            wrapper.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'responsive-image'\u003C/span>;\n            img.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>.\u003Cspan class=\"hljs-title function_\">insertBefore\u003C/span>(wrapper, img);\n            wrapper.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(img);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Optimize for slow connections\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">deviceInfo\u003C/span>.\u003Cspan class=\"hljs-property\">connectionSpeed\u003C/span> === \u003Cspan class=\"hljs-string\">'slow'\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addImagePlaceholder\u003C/span>(img);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addImagePlaceholder\u003C/span>(\u003Cspan class=\"hljs-params\">img\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> placeholder = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        placeholder.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'image-placeholder'\u003C/span>;\n        placeholder.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            <div class="placeholder-content">\n                <span class="placeholder-icon">🖼️</span>\n                <p>Image loading...</p>\n                <button class="load-image-btn">Load Image</button>\n            </div>\n        `\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> originalSrc = img.\u003Cspan class=\"hljs-property\">src\u003C/span>;\n        img.\u003Cspan class=\"hljs-property\">src\u003C/span> = \u003Cspan class=\"hljs-string\">'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9IiNlZWUiLz48L3N2Zz4='\u003C/span>;\n        \n        img.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>.\u003Cspan class=\"hljs-title function_\">insertBefore\u003C/span>(placeholder, img);\n        img.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n        \n        placeholder.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.load-image-btn'\u003C/span>).\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            img.\u003Cspan class=\"hljs-property\">src\u003C/span> = originalSrc;\n            img.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">'block'\u003C/span>;\n            placeholder.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>();\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupLazyLoading\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-string\">'IntersectionObserver'\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> \u003Cspan class=\"hljs-variable language_\">window\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> imageObserver = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">IntersectionObserver\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">entries, observer\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\">if\u003C/span> (entry.\u003Cspan class=\"hljs-property\">isIntersecting\u003C/span>) {\n                        \u003Cspan class=\"hljs-keyword\">const\u003C/span> img = entry.\u003Cspan class=\"hljs-property\">target\u003C/span>;\n                        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (img.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">src\u003C/span>) {\n                            img.\u003Cspan class=\"hljs-property\">src\u003C/span> = img.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">src\u003C/span>;\n                            img.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'lazy'\u003C/span>);\n                            observer.\u003Cspan class=\"hljs-title function_\">unobserve\u003C/span>(img);\n                        }\n                    }\n                });\n            });\n            \n            \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'img[data-src]'\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">img\u003C/span> =>\u003C/span> {\n                img.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'lazy'\u003C/span>);\n                imageObserver.\u003Cspan class=\"hljs-title function_\">observe\u003C/span>(img);\n            });\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">enhanceNavigation\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createMobileNavigation\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">enhanceScrolling\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addNavigationGestures\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createMobileNavigation\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> headings = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'h1, h2, h3, h4, h5, h6'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (headings.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">3\u003C/span> && \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">deviceInfo\u003C/span>.\u003Cspan class=\"hljs-property\">isMobile\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> navToggle = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'button'\u003C/span>);\n            navToggle.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'mobile-nav-toggle'\u003C/span>;\n            navToggle.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">'📱 Navigation'\u003C/span>;\n            navToggle.\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            \u003Cspan class=\"hljs-keyword\">const\u003C/span> navPanel = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n            navPanel.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'mobile-nav-panel'\u003C/span>;\n            navPanel.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-hidden'\u003C/span>, \u003Cspan class=\"hljs-string\">'true'\u003C/span>);\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> navList = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'ul'\u003C/span>);\n            navList.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'mobile-nav-list'\u003C/span>;\n            \n            headings.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">heading, index\u003C/span>) =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!heading.\u003Cspan class=\"hljs-property\">id\u003C/span>) {\n                    heading.\u003Cspan class=\"hljs-property\">id\u003C/span> = \u003Cspan class=\"hljs-string\">`heading-\u003Cspan class=\"hljs-subst\">${index}\u003C/span>`\u003C/span>;\n                }\n                \n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> listItem = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'li'\u003C/span>);\n                listItem.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">`nav-level-\u003Cspan class=\"hljs-subst\">${heading.tagName.charAt(\u003Cspan class=\"hljs-number\">1\u003C/span>)}\u003C/span>`\u003C/span>;\n                \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> = \u003Cspan class=\"hljs-string\">`#\u003Cspan class=\"hljs-subst\">${heading.id}\u003C/span>`\u003C/span>;\n                link.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = heading.\u003Cspan class=\"hljs-property\">textContent\u003C/span>;\n                link.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">closeMobileNav\u003C/span>();\n                });\n                \n                listItem.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(link);\n                navList.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(listItem);\n            });\n            \n            navPanel.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(navList);\n            \n            navToggle.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">toggleMobileNav\u003C/span>();\n            });\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>(navToggle);\n            \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(navPanel);\n            \n            \u003Cspan class=\"hljs-comment\">// Store references\u003C/span>\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">mobileNavToggle\u003C/span> = navToggle;\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">mobileNavPanel\u003C/span> = navPanel;\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">toggleMobileNav\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> isExpanded = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">mobileNavToggle\u003C/span>.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-expanded'\u003C/span>) === \u003Cspan class=\"hljs-string\">'true'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">mobileNavToggle\u003C/span>.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-expanded'\u003C/span>, !isExpanded);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">mobileNavPanel\u003C/span>.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-hidden'\u003C/span>, isExpanded);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">mobileNavPanel\u003C/span>.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">toggle\u003C/span>(\u003Cspan class=\"hljs-string\">'open'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!isExpanded) {\n            \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'nav-open'\u003C/span>);\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'nav-open'\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">closeMobileNav\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">mobileNavToggle\u003C/span>.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-expanded'\u003C/span>, \u003Cspan class=\"hljs-string\">'false'\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">mobileNavPanel\u003C/span>.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-hidden'\u003C/span>, \u003Cspan class=\"hljs-string\">'true'\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">mobileNavPanel\u003C/span>.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'open'\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'nav-open'\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">enhanceScrolling\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Add smooth scrolling for anchor links\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\">e\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (e.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-property\">tagName\u003C/span> === \u003Cspan class=\"hljs-string\">'A'\u003C/span> && e.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'href'\u003C/span>).\u003Cspan class=\"hljs-title function_\">startsWith\u003C/span>(\u003Cspan class=\"hljs-string\">'#'\u003C/span>)) {\n                e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> targetId = e.\u003Cspan class=\"hljs-property\">target\u003C/span>.\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> targetElement = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(targetId);\n                \n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (targetElement) {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">smoothScrollTo\u003C/span>(targetElement);\n                }\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">smoothScrollTo\u003C/span>(\u003Cspan class=\"hljs-params\">element\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> offsetTop = element.\u003Cspan class=\"hljs-title function_\">getBoundingClientRect\u003C/span>().\u003Cspan class=\"hljs-property\">top\u003C/span> + \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">pageYOffset\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> navHeight = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">mobileNavToggle\u003C/span> ? \u003Cspan class=\"hljs-number\">60\u003C/span> : \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> targetPosition = offsetTop - navHeight;\n        \n        \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-title function_\">scrollTo\u003C/span>({\n            \u003Cspan class=\"hljs-attr\">top\u003C/span>: targetPosition,\n            \u003Cspan class=\"hljs-attr\">behavior\u003C/span>: \u003Cspan class=\"hljs-string\">'smooth'\u003C/span>\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addNavigationGestures\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\">deviceInfo\u003C/span>.\u003Cspan class=\"hljs-property\">hasTouch\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> touchStartX = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> touchStartY = \u003Cspan class=\"hljs-number\">0\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\">e\u003C/span>) =>\u003C/span> {\n            touchStartX = e.\u003Cspan class=\"hljs-property\">touches\u003C/span>[\u003Cspan class=\"hljs-number\">0\u003C/span>].\u003Cspan class=\"hljs-property\">clientX\u003C/span>;\n            touchStartY = e.\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\">e\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> touchEndX = e.\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> touchEndY = e.\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 = touchEndX - touchStartX;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> deltaY = touchEndY - touchStartY;\n            \n            \u003Cspan class=\"hljs-comment\">// Swipe from left edge to open navigation\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (touchStartX < \u003Cspan class=\"hljs-number\">50\u003C/span> && deltaX > \u003Cspan class=\"hljs-number\">100\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-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">mobileNavPanel\u003C/span>) {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">toggleMobileNav\u003C/span>();\n                }\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Swipe right 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\">mobileNavPanel\u003C/span> && \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">mobileNavPanel\u003C/span>.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">contains\u003C/span>(\u003Cspan class=\"hljs-string\">'open'\u003C/span>)) {\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (deltaX > \u003Cspan class=\"hljs-number\">100\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_\">closeMobileNav\u003C/span>();\n                }\n            }\n        }, { \u003Cspan class=\"hljs-attr\">passive\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span> });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">enableTouchGestures\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Add touch feedback to interactive elements\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> interactiveElements = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'button, a, [role="button"], .interactive'\u003C/span>);\n        \n        interactiveElements.\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\">'touchstart'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                element.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'touch-active'\u003C/span>);\n            }, { \u003Cspan class=\"hljs-attr\">passive\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span> });\n            \n            element.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'touchend'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                    element.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'touch-active'\u003C/span>);\n                }, \u003Cspan class=\"hljs-number\">150\u003C/span>);\n            }, { \u003Cspan class=\"hljs-attr\">passive\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span> });\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupProgressiveContent\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Set up expandable content sections\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> details = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'details'\u003C/span>);\n        details.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">detail\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">enhanceDetailsElement\u003C/span>(detail);\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Set up progressive disclosure\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> disclosureToggles = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.disclosure-toggle'\u003C/span>);\n        disclosureToggles.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">toggle\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupProgressiveDisclosure\u003C/span>(toggle);\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">enhanceDetailsElement\u003C/span>(\u003Cspan class=\"hljs-params\">details\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> summary = details.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'summary'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (summary) {\n            summary.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n                \u003Cspan class=\"hljs-comment\">// Add animation class\u003C/span>\n                details.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">toggle\u003C/span>(\u003Cspan class=\"hljs-string\">'expanding'\u003C/span>);\n                \n                \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                    details.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'expanding'\u003C/span>);\n                }, \u003Cspan class=\"hljs-number\">300\u003C/span>);\n            });\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupProgressiveDisclosure\u003C/span>(\u003Cspan class=\"hljs-params\">toggle\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> button = toggle.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'button'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> targetId = toggle.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">target\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> targetElement = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(targetId);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (button && targetElement) {\n            button.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> isHidden = targetElement.\u003Cspan class=\"hljs-title function_\">hasAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'hidden'\u003C/span>);\n                \n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (isHidden) {\n                    targetElement.\u003Cspan class=\"hljs-title function_\">removeAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'hidden'\u003C/span>);\n                    targetElement.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'disclosure-enter'\u003C/span>);\n                    button.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = button.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-string\">'Show'\u003C/span>, \u003Cspan class=\"hljs-string\">'Hide'\u003C/span>);\n                } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                    targetElement.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'hidden'\u003C/span>, \u003Cspan class=\"hljs-string\">''\u003C/span>);\n                    targetElement.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'disclosure-enter'\u003C/span>);\n                    button.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = button.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-string\">'Hide'\u003C/span>, \u003Cspan class=\"hljs-string\">'Show'\u003C/span>);\n                }\n            });\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">enablePerformanceMode\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'Enabling performance mode due to slow loading...'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Disable non-essential animations\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'reduce-motion'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Lazy load more aggressively\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupAggressiveLazyLoading\u003C/span>();\n        \n        \u003Cspan class=\"hljs-comment\">// Simplify complex components\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">simplifyComplexComponents\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupAggressiveLazyLoading\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Convert all images to lazy loading\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> images = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'img:not([data-src])'\u003C/span>);\n        images.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">img\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (img.\u003Cspan class=\"hljs-title function_\">getBoundingClientRect\u003C/span>().\u003Cspan class=\"hljs-property\">top\u003C/span> > \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">innerHeight\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> src = img.\u003Cspan class=\"hljs-property\">src\u003C/span>;\n                img.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">src\u003C/span> = src;\n                img.\u003Cspan class=\"hljs-property\">src\u003C/span> = \u003Cspan class=\"hljs-string\">'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9IiNlZWUiLz48L3N2Zz4='\u003C/span>;\n            }\n        });\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupLazyLoading\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">simplifyComplexComponents\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Simplify tables for better performance\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> complexTables = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'table'\u003C/span>);\n        complexTables.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">table\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (table.\u003Cspan class=\"hljs-property\">rows\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">20\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">paginateTable\u003C/span>(table);\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">paginateTable\u003C/span>(\u003Cspan class=\"hljs-params\">table\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rowsPerPage = \u003Cspan class=\"hljs-number\">10\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tbody = table.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rows = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(tbody.\u003Cspan class=\"hljs-property\">rows\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (rows.\u003Cspan class=\"hljs-property\">length\u003C/span> > rowsPerPage) {\n            \u003Cspan class=\"hljs-comment\">// Hide excess rows\u003C/span>\n            rows.\u003Cspan class=\"hljs-title function_\">slice\u003C/span>(rowsPerPage).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> {\n                row.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n                row.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'paginated-row'\u003C/span>);\n            });\n            \n            \u003Cspan class=\"hljs-comment\">// Add load more button\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> loadMoreBtn = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'button'\u003C/span>);\n            loadMoreBtn.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">`Load More Rows (\u003Cspan class=\"hljs-subst\">${rows.length - rowsPerPage}\u003C/span> remaining)`\u003C/span>;\n            loadMoreBtn.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'load-more-btn'\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">let\u003C/span> currentPage = \u003Cspan class=\"hljs-number\">1\u003C/span>;\n            loadMoreBtn.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> startIndex = currentPage * rowsPerPage;\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> endIndex = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">min\u003C/span>(startIndex + rowsPerPage, rows.\u003Cspan class=\"hljs-property\">length\u003C/span>);\n                \n                \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = startIndex; i < endIndex; i++) {\n                    rows[i].\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n                }\n                \n                currentPage++;\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> remaining = rows.\u003Cspan class=\"hljs-property\">length\u003C/span> - (currentPage * rowsPerPage);\n                \n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (remaining <= \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n                    loadMoreBtn.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>();\n                } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                    loadMoreBtn.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">`Load More Rows (\u003Cspan class=\"hljs-subst\">${remaining}\u003C/span> remaining)`\u003C/span>;\n                }\n            });\n            \n            table.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>.\u003Cspan class=\"hljs-title function_\">insertBefore\u003C/span>(loadMoreBtn, table.\u003Cspan class=\"hljs-property\">nextSibling\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupResponsiveListeners\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Listen for orientation changes\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'orientationchange'\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-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">deviceInfo\u003C/span>.\u003Cspan class=\"hljs-property\">orientation\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getOrientation\u003C/span>();\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">handleOrientationChange\u003C/span>();\n            }, \u003Cspan class=\"hljs-number\">100\u003C/span>);\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Listen for viewport changes\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-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">throttle\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">handleViewportChange\u003C/span>();\n        }, \u003Cspan class=\"hljs-number\">250\u003C/span>));\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">handleOrientationChange\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Update layout for orientation change\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">deviceInfo\u003C/span>.\u003Cspan class=\"hljs-property\">isMobile\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> tables = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.table-wrapper'\u003C/span>);\n            tables.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">wrapper\u003C/span> =>\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateTableOrientation\u003C/span>(wrapper);\n            });\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">updateTableOrientation\u003C/span>(\u003Cspan class=\"hljs-params\">wrapper\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> table = wrapper.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'table'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> columnCount = table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'th'\u003C/span>).\u003Cspan class=\"hljs-property\">length\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">deviceInfo\u003C/span>.\u003Cspan class=\"hljs-property\">orientation\u003C/span> === \u003Cspan class=\"hljs-string\">'landscape'\u003C/span> && columnCount <= \u003Cspan class=\"hljs-number\">3\u003C/span>) {\n            wrapper.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'table-responsive-stack'\u003C/span>, \u003Cspan class=\"hljs-string\">'table-responsive-cards'\u003C/span>);\n            wrapper.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'table-responsive-scroll'\u003C/span>);\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">deviceInfo\u003C/span>.\u003Cspan class=\"hljs-property\">orientation\u003C/span> === \u003Cspan class=\"hljs-string\">'portrait'\u003C/span> && columnCount > \u003Cspan class=\"hljs-number\">2\u003C/span>) {\n            wrapper.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'table-responsive-scroll'\u003C/span>);\n            wrapper.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'table-responsive-stack'\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">handleViewportChange\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Update device info\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">deviceInfo\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">detectDevice\u003C/span>();\n        \n        \u003Cspan class=\"hljs-comment\">// Re-evaluate responsive strategies\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\">adaptiveTables\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">enhanceTables\u003C/span>();\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Update navigation\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">mobileNavToggle\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">deviceInfo\u003C/span>.\u003Cspan class=\"hljs-property\">isMobile\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">mobileNavToggle\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">closeMobileNav\u003C/span>();\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">mobileNavToggle\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">'block'\u003C/span>;\n            }\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">throttle\u003C/span>(\u003Cspan class=\"hljs-params\">func, limit\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> inThrottle;\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-keyword\">function\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> args = \u003Cspan class=\"hljs-variable language_\">arguments\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> context = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!inThrottle) {\n                func.\u003Cspan class=\"hljs-title function_\">apply\u003C/span>(context, args);\n                inThrottle = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n                \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> inThrottle = \u003Cspan class=\"hljs-literal\">false\u003C/span>, limit);\n            }\n        };\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Public API methods\u003C/span>\n    \u003Cspan class=\"hljs-title function_\">getPerformanceMetrics\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\">performanceMetrics\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getDeviceInfo\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\">deviceInfo\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">refresh\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Re-initialize all enhancements\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">initialize\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">destroy\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Clean up event listeners and restore original state\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">mobileNavToggle\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">mobileNavToggle\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>();\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">mobileNavPanel\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">mobileNavPanel\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>();\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'nav-open'\u003C/span>, \u003Cspan class=\"hljs-string\">'reduce-motion'\u003C/span>);\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Auto-initialize mobile enhancement\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-keyword\">function\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">mobileMarkdownEnhancer\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">MobileMarkdownEnhancer\u003C/span>({\n        \u003Cspan class=\"hljs-attr\">enableTouchGestures\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">optimizeImages\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">enhanceNavigation\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">adaptiveTables\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">progressiveContent\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">performanceMode\u003C/span>: navigator.\u003Cspan class=\"hljs-property\">connection\u003C/span> && \n                         (navigator.\u003Cspan class=\"hljs-property\">connection\u003C/span>.\u003Cspan class=\"hljs-property\">effectiveType\u003C/span> === \u003Cspan class=\"hljs-string\">'2g'\u003C/span> || \n                          navigator.\u003Cspan class=\"hljs-property\">connection\u003C/span>.\u003Cspan class=\"hljs-property\">effectiveType\u003C/span> === \u003Cspan class=\"hljs-string\">'slow-2g'\u003C/span>)\n    });\n});\n\u003C/code>\u003C/pre>\u003Ch3 id=\"advanced-responsive-layout-components\">Advanced Responsive Layout Components\u003C/h3>\n\u003Cp>CSS framework for sophisticated responsive Markdown layouts:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* responsive-layout-components.css - Advanced responsive layout system */\u003C/span>\n\n\u003Cspan class=\"hljs-comment\">/* Responsive grid system for content */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.responsive-grid\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: grid;\n    \u003Cspan class=\"hljs-attribute\">gap\u003C/span>: \u003Cspan class=\"hljs-number\">1.5rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">2rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">grid-template-columns\u003C/span>: \u003Cspan class=\"hljs-built_in\">repeat\u003C/span>(auto-fit, \u003Cspan class=\"hljs-built_in\">minmax\u003C/span>(\u003Cspan class=\"hljs-number\">280px\u003C/span>, \u003Cspan class=\"hljs-number\">1\u003C/span>fr));\n}\n\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.responsive-grid\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">grid-template-columns\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>fr;\n        \u003Cspan class=\"hljs-attribute\">gap\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1.5rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">480px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.responsive-grid\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span> -\u003Cspan class=\"hljs-number\">0.75rem\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">gap\u003C/span>: \u003Cspan class=\"hljs-number\">0.75rem\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.responsive-grid\u003C/span> > * {\n        \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0.75rem\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Feature cards responsive layout */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.feature-cards\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: grid;\n    \u003Cspan class=\"hljs-attribute\">grid-template-columns\u003C/span>: \u003Cspan class=\"hljs-built_in\">repeat\u003C/span>(auto-fit, \u003Cspan class=\"hljs-built_in\">minmax\u003C/span>(\u003Cspan class=\"hljs-number\">250px\u003C/span>, \u003Cspan class=\"hljs-number\">1\u003C/span>fr));\n    \u003Cspan class=\"hljs-attribute\">gap\u003C/span>: \u003Cspan class=\"hljs-number\">1.5rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">2rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.feature-card\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#e9ecef\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1.5rem\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    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: transform \u003Cspan class=\"hljs-number\">0.2s\u003C/span>, box-shadow \u003Cspan class=\"hljs-number\">0.2s\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.feature-card\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">translateY\u003C/span>(-\u003Cspan class=\"hljs-number\">2px\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">4px\u003C/span> \u003Cspan class=\"hljs-number\">16px\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.15\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.feature-card\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h4\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">margin-top\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#495057\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#007bff\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.feature-cards\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">grid-template-columns\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>fr;\n        \u003Cspan class=\"hljs-attribute\">gap\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.feature-card\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">480px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.feature-cards\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span> -\u003Cspan class=\"hljs-number\">0.75rem\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.feature-card\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0.75rem\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border-left\u003C/span>: none;\n        \u003Cspan class=\"hljs-attribute\">border-right\u003C/span>: none;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Media gallery responsive layout */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.media-gallery\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: grid;\n    \u003Cspan class=\"hljs-attribute\">gap\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">2rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.media-gallery\u003C/span>\u003Cspan class=\"hljs-selector-class\">.responsive\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">grid-template-columns\u003C/span>: \u003Cspan class=\"hljs-built_in\">repeat\u003C/span>(auto-fit, \u003Cspan class=\"hljs-built_in\">minmax\u003C/span>(\u003Cspan class=\"hljs-number\">200px\u003C/span>, \u003Cspan class=\"hljs-number\">1\u003C/span>fr));\n}\n\n\u003Cspan class=\"hljs-selector-class\">.media-item\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: hidden;\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\">.media-item\u003C/span> \u003Cspan class=\"hljs-selector-tag\">img\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\">200px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">object-fit\u003C/span>: cover;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.media-item\u003C/span> \u003Cspan class=\"hljs-selector-tag\">figcaption\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.9rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#495057\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.media-gallery\u003C/span>\u003Cspan class=\"hljs-selector-class\">.responsive\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">grid-template-columns\u003C/span>: \u003Cspan class=\"hljs-built_in\">repeat\u003C/span>(auto-fit, \u003Cspan class=\"hljs-built_in\">minmax\u003C/span>(\u003Cspan class=\"hljs-number\">150px\u003C/span>, \u003Cspan class=\"hljs-number\">1\u003C/span>fr));\n        \u003Cspan class=\"hljs-attribute\">gap\u003C/span>: \u003Cspan class=\"hljs-number\">0.75rem\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.media-item\u003C/span> \u003Cspan class=\"hljs-selector-tag\">img\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">150px\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.media-item\u003C/span> \u003Cspan class=\"hljs-selector-tag\">figcaption\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.75rem\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.85rem\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">480px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.media-gallery\u003C/span>\u003Cspan class=\"hljs-selector-class\">.responsive\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">grid-template-columns\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>fr;\n        \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span> -\u003Cspan class=\"hljs-number\">0.75rem\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.media-item\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0.75rem\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.media-item\u003C/span> \u003Cspan class=\"hljs-selector-tag\">img\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">200px\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Content disclosure components */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.progressive-disclosure\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">2rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#e9ecef\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: hidden;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.progressive-disclosure\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h4\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\">1rem\u003C/span> \u003Cspan class=\"hljs-number\">1.5rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#e9ecef\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.progressive-disclosure\u003C/span> \u003Cspan class=\"hljs-selector-tag\">p\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\">1rem\u003C/span> \u003Cspan class=\"hljs-number\">1.5rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.disclosure-toggle\u003C/span> {\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\">border-top\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#e9ecef\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.disclosure-toggle\u003C/span> \u003Cspan class=\"hljs-selector-tag\">button\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#007bff\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\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span> \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">cursor\u003C/span>: pointer;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.9rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: background-color \u003Cspan class=\"hljs-number\">0.2s\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.disclosure-toggle\u003C/span> \u003Cspan class=\"hljs-selector-tag\">button\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#0056b3\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.disclosure-content\u003C/span> {\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>: white;\n    \u003Cspan class=\"hljs-attribute\">border-top\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#e9ecef\u003C/span>;\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\">.disclosure-content\u003C/span>\u003Cspan class=\"hljs-selector-attr\">[hidden]\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.disclosure-content\u003C/span>\u003Cspan class=\"hljs-selector-class\">.disclosure-enter\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">animation\u003C/span>: slideDown \u003Cspan class=\"hljs-number\">0.3s\u003C/span> ease;\n}\n\n\u003Cspan class=\"hljs-keyword\">@keyframes\u003C/span> slideDown {\n    \u003Cspan class=\"hljs-selector-tag\">from\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">max-height\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">opacity\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    }\n    \u003Cspan class=\"hljs-selector-tag\">to\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">max-height\u003C/span>: \u003Cspan class=\"hljs-number\">1000px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">opacity\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.progressive-disclosure\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1.5rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.progressive-disclosure\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h4\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.progressive-disclosure\u003C/span> \u003Cspan class=\"hljs-selector-tag\">p\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.disclosure-toggle\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.disclosure-content\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-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">480px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.progressive-disclosure\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span> -\u003Cspan class=\"hljs-number\">0.75rem\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border-left\u003C/span>: none;\n        \u003Cspan class=\"hljs-attribute\">border-right\u003C/span>: none;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.progressive-disclosure\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h4\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.progressive-disclosure\u003C/span> \u003Cspan class=\"hljs-selector-tag\">p\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.disclosure-toggle\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.disclosure-content\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.75rem\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Mobile expandable content */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.mobile-expandable\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1.5rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#e9ecef\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: hidden;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.mobile-expandable\u003C/span> \u003Cspan class=\"hljs-selector-tag\">summary\u003C/span> {\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\">#f8f9fa\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">cursor\u003C/span>: pointer;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">list-style\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n    user-select: none;\n    \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#e9ecef\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.mobile-expandable\u003C/span> \u003Cspan class=\"hljs-selector-tag\">summary\u003C/span>::-webkit-details-marker {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.mobile-expandable\u003C/span> \u003Cspan class=\"hljs-selector-tag\">summary\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\">1.5rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">50%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">translateY\u003C/span>(-\u003Cspan class=\"hljs-number\">50%\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">1.2rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: bold;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#007bff\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: transform \u003Cspan class=\"hljs-number\">0.2s\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.mobile-expandable\u003C/span>\u003Cspan class=\"hljs-selector-attr\">[open]\u003C/span> \u003Cspan class=\"hljs-selector-tag\">summary\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\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">translateY\u003C/span>(-\u003Cspan class=\"hljs-number\">50%\u003C/span>) \u003Cspan class=\"hljs-built_in\">rotate\u003C/span>(\u003Cspan class=\"hljs-number\">0deg\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.mobile-expandable\u003C/span> \u003Cspan class=\"hljs-selector-tag\">summary\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#e9ecef\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.mobile-expandable\u003C/span> > *\u003Cspan class=\"hljs-selector-pseudo\">:not\u003C/span>(\u003Cspan class=\"hljs-selector-tag\">summary\u003C/span>) {\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\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.mobile-expandable\u003C/span>\u003Cspan class=\"hljs-selector-class\">.expanding\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: all \u003Cspan class=\"hljs-number\">0.3s\u003C/span> ease;\n}\n\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.mobile-expandable\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.mobile-expandable\u003C/span> \u003Cspan class=\"hljs-selector-tag\">summary\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.mobile-expandable\u003C/span> > *\u003Cspan class=\"hljs-selector-pseudo\">:not\u003C/span>(\u003Cspan class=\"hljs-selector-tag\">summary\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    \u003Cspan class=\"hljs-selector-class\">.mobile-expandable\u003C/span> \u003Cspan class=\"hljs-selector-tag\">summary\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::after\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">right\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">480px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.mobile-expandable\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span> -\u003Cspan class=\"hljs-number\">0.75rem\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border-left\u003C/span>: none;\n        \u003Cspan class=\"hljs-attribute\">border-right\u003C/span>: none;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.mobile-expandable\u003C/span> \u003Cspan class=\"hljs-selector-tag\">summary\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.mobile-expandable\u003C/span> > *\u003Cspan class=\"hljs-selector-pseudo\">:not\u003C/span>(\u003Cspan class=\"hljs-selector-tag\">summary\u003C/span>) {\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.75rem\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.mobile-expandable\u003C/span> \u003Cspan class=\"hljs-selector-tag\">summary\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::after\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">right\u003C/span>: \u003Cspan class=\"hljs-number\">0.75rem\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Device-specific content visibility */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.content-mobile-only\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.content-tablet-plus\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.content-desktop-plus\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n}\n\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.content-desktop-plus\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none;\n    }\n}\n\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">480px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.content-mobile-only\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.content-tablet-plus\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Mobile navigation components */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.mobile-nav-toggle\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: fixed;\n    \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">right\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#007bff\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\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.75rem\u003C/span> \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.9rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\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.2\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">z-index\u003C/span>: \u003Cspan class=\"hljs-number\">1000\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">cursor\u003C/span>: pointer;\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: background-color \u003Cspan class=\"hljs-number\">0.2s\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.mobile-nav-toggle\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#0056b3\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">769px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.mobile-nav-toggle\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none;\n    }\n}\n\n\u003Cspan class=\"hljs-selector-class\">.mobile-nav-panel\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\">right\u003C/span>: -\u003Cspan class=\"hljs-number\">100%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">80%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">300px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">100vh\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: -\u003Cspan class=\"hljs-number\">2px\u003C/span> \u003Cspan class=\"hljs-number\">0\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    \u003Cspan class=\"hljs-attribute\">z-index\u003C/span>: \u003Cspan class=\"hljs-number\">999\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: right \u003Cspan class=\"hljs-number\">0.3s\u003C/span> ease;\n    \u003Cspan class=\"hljs-attribute\">overflow-y\u003C/span>: auto;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.mobile-nav-panel\u003C/span>\u003Cspan class=\"hljs-selector-class\">.open\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">right\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.mobile-nav-list\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\">4rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">2rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.mobile-nav-list\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}\n\n\u003Cspan class=\"hljs-selector-class\">.mobile-nav-list\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.75rem\u003C/span> \u003Cspan class=\"hljs-number\">1.5rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#495057\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: background-color \u003Cspan class=\"hljs-number\">0.2s\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.mobile-nav-list\u003C/span> \u003Cspan class=\"hljs-selector-tag\">a\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#007bff\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.nav-level-1\u003C/span> \u003Cspan class=\"hljs-selector-tag\">a\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">1.1rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.nav-level-2\u003C/span> \u003Cspan class=\"hljs-selector-tag\">a\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding-left\u003C/span>: \u003Cspan class=\"hljs-number\">2rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">500\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.nav-level-3\u003C/span> \u003Cspan class=\"hljs-selector-tag\">a\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding-left\u003C/span>: \u003Cspan class=\"hljs-number\">2.5rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.nav-level-4\u003C/span> \u003Cspan class=\"hljs-selector-tag\">a\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.nav-level-5\u003C/span> \u003Cspan class=\"hljs-selector-tag\">a\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.nav-level-6\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.9rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">opacity\u003C/span>: \u003Cspan class=\"hljs-number\">0.8\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Body overlay when nav is open */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.nav-open\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>: 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\">998\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Touch feedback */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.touch-active\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#e9ecef\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">scale\u003C/span>(\u003Cspan class=\"hljs-number\">0.98\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-comment\">/* Performance mode adjustments */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.reduce-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    scroll-behavior: auto \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Image optimization styles */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.responsive-image\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n    \u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.image-placeholder\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> dashed \u003Cspan class=\"hljs-number\">#dee2e6\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">2rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.placeholder-content\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: flex;\n    \u003Cspan class=\"hljs-attribute\">flex-direction\u003C/span>: column;\n    \u003Cspan class=\"hljs-attribute\">align-items\u003C/span>: center;\n    \u003Cspan class=\"hljs-attribute\">gap\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.placeholder-icon\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">3rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">opacity\u003C/span>: \u003Cspan class=\"hljs-number\">0.5\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.load-image-btn\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#007bff\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\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span> \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">cursor\u003C/span>: pointer;\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\">.load-image-btn\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#0056b3\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Lazy loading image states */\u003C/span>\n\u003Cspan class=\"hljs-selector-tag\">img\u003C/span>\u003Cspan class=\"hljs-selector-class\">.lazy\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>;\n}\n\n\u003Cspan class=\"hljs-selector-tag\">img\u003C/span>\u003Cspan class=\"hljs-selector-class\">.lazy\u003C/span>\u003Cspan class=\"hljs-selector-class\">.loaded\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">opacity\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Table pagination styles */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.load-more-btn\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#495057\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#dee2e6\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-top\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">cursor\u003C/span>: pointer;\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: background-color \u003Cspan class=\"hljs-number\">0.2s\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.load-more-btn\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#e9ecef\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Print optimizations */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> print {\n    \u003Cspan class=\"hljs-selector-class\">.mobile-nav-toggle\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.mobile-nav-panel\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.disclosure-toggle\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.load-more-btn\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.load-image-btn\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.disclosure-content\u003C/span>\u003Cspan class=\"hljs-selector-attr\">[hidden]\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.mobile-expandable\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#000\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">page-break-inside\u003C/span>: avoid;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.mobile-expandable\u003C/span> \u003Cspan class=\"hljs-selector-tag\">summary\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">background\u003C/span>: white;\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: none;\n        \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: bold;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.mobile-expandable\u003C/span> \u003Cspan class=\"hljs-selector-tag\">summary\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::after\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none;\n    }\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"integration-with-modern-documentation-systems\">Integration with Modern Documentation Systems\u003C/h2>\n\u003Cp>Responsive design patterns integrate seamlessly with comprehensive content management platforms. When combined with \u003Ca href=\"/blog/markdown-content-validation-automated-quality-assurance-complete-guide\">automated content validation and quality assurance\u003C/a>, responsive systems enable device-specific content testing, cross-platform validation, and consistent user experience verification across different viewport sizes and device capabilities.\u003C/p>\n\u003Cp>For enhanced content presentation, responsive design works effectively with \u003Ca href=\"/blog/markdown-table-performance-optimization-large-datasets-guide\">advanced table systems and data visualization\u003C/a> to create adaptive data presentation interfaces that automatically adjust table layouts, implement mobile-friendly data viewing patterns, and maintain information hierarchy across different screen sizes.\u003C/p>\n\u003Cp>When developing comprehensive documentation platforms, responsive design patterns complement \u003Ca href=\"/blog/markdown-progressive-web-app-documentation-complete-guide\">Progressive Web App documentation systems\u003C/a> by providing offline-optimized layouts, touch-friendly navigation interfaces, and device-appropriate content delivery that maintains functionality across varying network conditions and device capabilities.\u003C/p>\n\u003Ch2 id=\"conclusion\">Conclusion\u003C/h2>\n\u003Cp>Markdown responsive design patterns and mobile optimization transform static documentation into adaptive, device-aware content systems that provide optimal user experiences across the full spectrum of modern devices and screen sizes. By implementing comprehensive responsive frameworks, mobile-first design principles, and performance-conscious optimization strategies, technical teams can create documentation that serves users effectively regardless of their chosen device or browsing context.\u003C/p>\n\u003Cp>The key to successful responsive Markdown implementation lies in understanding device capabilities, implementing progressive enhancement strategies, and maintaining content accessibility across all interaction patterns. Whether you're creating technical documentation, educational content, or complex reference materials, the responsive design techniques covered in this guide provide the foundation for building truly universal content experiences that adapt intelligently to user needs.\u003C/p>\n\u003Cp>Remember to test responsive designs across real devices and network conditions, implement performance optimization strategies for mobile users, and establish clear design systems that maintain consistency while adapting to different constraints. With proper implementation of responsive design patterns, your Markdown documentation can achieve new levels of accessibility and usability that enhance user engagement across all device categories and usage contexts.\u003C/p>\n",[15,19,22,25],{"id":16,"text":17,"level":18},"why-master-responsive-design-in-markdown","Why Master Responsive Design in Markdown?",2,{"id":20,"text":21,"level":18},"foundation-responsive-design-principles","Foundation Responsive Design Principles",{"id":23,"text":24,"level":18},"integration-with-modern-documentation-systems","Integration with Modern Documentation Systems",{"id":26,"text":27,"level":18},"conclusion","Conclusion",[],[30,38,46],{"slug":31,"title":32,"description":33,"excerpt":34,"date":35,"category":9,"author":10,"keywords":36,"readingMinutes":37},"markdown-table-responsive-design-mobile-optimization-complete-guide","Markdown Table Responsive Design and Mobile Optimization: Complete Guide for Cross-Device Table Display and Accessibility","Master responsive Markdown table design, mobile optimization techniques, and cross-device accessibility strategies. Learn adaptive layouts, breakpoint management, and user experience optimization for tables on all screen sizes.","Advanced Markdown table responsive design and mobile optimization techniques enable sophisticated data presentation that maintains readability, usability, and accessibility across diverse screen…","2025-12-14","markdown table responsive design, mobile markdown tables, responsive table optimization, markdown table accessibility, adaptive table layouts, mobile-first table design, table breakpoints, responsive markdown",22,{"slug":39,"title":40,"description":41,"excerpt":42,"date":43,"category":9,"author":10,"keywords":44,"readingMinutes":45},"markdown-table-responsive-design-complete-guide","Markdown Table Responsive Design: Complete Guide for Mobile-Friendly Documentation and Adaptive Table Layouts","Master responsive Markdown table design techniques for creating mobile-friendly documentation with adaptive layouts, CSS Grid integration, and cross-device compatibility. Learn advanced table styling, breakpoint management, and accessibility optimization.","Advanced responsive Markdown table design enables sophisticated documentation systems that adapt seamlessly across all device types, screen sizes, and user contexts while maintaining data…","2025-11-01","markdown table responsive design, mobile-friendly markdown tables, adaptive table layouts, responsive documentation tables, markdown table css grid, mobile table optimization, responsive web design markdown",29,{"slug":47,"title":48,"description":49,"excerpt":50,"date":51,"category":9,"author":10,"keywords":52,"readingMinutes":53},"markdown-multi-column-layouts-complete-guide","Markdown Multi-Column Layouts: Complete Guide for Professional Documentation and Responsive Design","Master multi-column layouts in Markdown using CSS Grid, Flexbox, and HTML techniques. Learn responsive design, content organization, and platform-specific implementations for professional documentation.","Multi-column layouts in Markdown enable sophisticated content organization that transforms standard linear documentation into visually engaging, space-efficient presentations. While basic Markdown…","2025-08-26","markdown multi-column, markdown columns, markdown layout, css grid markdown, flexbox markdown, responsive markdown design, multi-column documentation",14,1792184946415]