:root{--primary-color:#3498db;--primary-dark:#2980b9;--secondary-color:#2ecc71;--accent-color:#f39c12;--text-color:#333;--text-light:#666;--background-color:#f5f7fa;--card-bg:#fff;--border-color:#ddd;--code-bg:#f8f9fa;--code-border:#e9ecef;--header-height:60px;--sidebar-width:280px;--footer-height:60px;--transition-speed:0.3s}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.6;color:var(--text-color);background-color:var(--background-color)}.app{display:flex;flex-direction:column;min-height:100vh}.header{background-color:var(--primary-color);color:white;height:var(--header-height);position:fixed;top:0;left:0;right:0;z-index:100;box-shadow:0 2px 4px rgba(0,0,0,.1)}.header-container{display:flex;justify-content:space-between;align-items:center;height:100%;padding:0 20px;max-width:1400px;margin:0 auto}.logo-container h1{font-size:1.5rem;font-weight:600}.menu-toggle{display:none;background:none;border:none;cursor:pointer;width:30px;height:30px;position:relative}.menu-icon{display:block;width:100%;height:2px;background-color:white;position:relative;transition:background-color var(--transition-speed)}.menu-icon:after,.menu-icon:before{content:"";position:absolute;width:100%;height:2px;background-color:white;transition:transform var(--transition-speed)}.menu-icon:before{top:-8px}.menu-icon:after{bottom:-8px}.menu-icon.open{background-color:transparent}.menu-icon.open:before{transform:rotate(45deg);top:0}.menu-icon.open:after{transform:rotate(-45deg);bottom:0}.main-container{display:flex;flex:1 1;margin-top:var(--header-height);margin-bottom:var(--footer-height)}.sidebar{width:var(--sidebar-width);background-color:var(--card-bg);border-right:1px solid var(--border-color);overflow-y:auto;position:fixed;top:var(--header-height);bottom:var(--footer-height);left:0;transition:transform var(--transition-speed);z-index:90}.sidebar-nav{padding:20px 0}.sidebar-nav ul{list-style:none}.sidebar-nav button{display:block;width:100%;padding:10px 20px;text-align:left;background:none;border:none;cursor:pointer;color:var(--text-color);font-size:.95rem;transition:background-color var(--transition-speed)}.sidebar-nav button:hover{background-color:rgba(0,0,0,.05)}.sidebar-nav button.active{background-color:rgba(52,152,219,.1);color:var(--primary-color);font-weight:600;border-left:3px solid var(--primary-color)}.content{flex:1 1;margin-left:var(--sidebar-width);padding:20px;overflow-y:auto;max-height:calc(100vh - var(--header-height) - var(--footer-height))}.content-container{max-width:900px;margin:0 auto;padding:20px}.footer{background-color:var(--primary-color);color:white;height:var(--footer-height);position:fixed;bottom:0;left:0;right:0;z-index:100}.footer-container{display:flex;justify-content:center;align-items:center;height:100%;padding:0 20px}.doc-section{margin-bottom:40px}.doc-section h2{font-size:2rem;margin-bottom:20px;color:var(--primary-color);border-bottom:2px solid var(--border-color);padding-bottom:10px}.doc-section h3{font-size:1.5rem;margin:30px 0 15px;color:var(--primary-dark)}.doc-section h4{font-size:1.2rem;margin:20px 0 10px;color:var(--text-color)}.doc-section p{margin-bottom:15px}.doc-section ol,.doc-section ul{margin:15px 0;padding-left:25px}.doc-section li{margin-bottom:8px}.doc-section code{background-color:var(--code-bg);padding:2px 5px;border-radius:3px;font-family:Courier New,Courier,monospace;font-size:.9em;color:#e74c3c}.code-block-container{margin:20px 0;border:1px solid var(--code-border);border-radius:5px;overflow:hidden}.code-header{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;background-color:#f1f1f1;border-bottom:1px solid var(--code-border)}.code-language{font-size:.85rem;color:var(--text-light);font-weight:600}.copy-button{background-color:var(--primary-color);color:white;border:none;border-radius:3px;padding:5px 10px;font-size:.85rem;cursor:pointer;transition:background-color var(--transition-speed)}.copy-button:hover{background-color:var(--primary-dark)}.code-block{margin:0;padding:15px;background-color:var(--code-bg);overflow-x:auto;font-family:Courier New,Courier,monospace;font-size:.9rem;line-height:1.5}.info-box,.note-box{margin:20px 0;padding:15px;border-left:4px solid var(--accent-color);background-color:rgba(243,156,18,.1);border-radius:3px}.info-box h4,.note-box h4{color:var(--accent-color);margin-top:0;margin-bottom:10px}.architecture-diagram{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;margin:30px 0;gap:10px}.architecture-box{background-color:var(--card-bg);border:1px solid var(--border-color);border-radius:5px;padding:15px;min-width:200px;text-align:center;box-shadow:0 2px 4px rgba(0,0,0,.05)}.architecture-box.utilities{margin-top:20px;width:100%}.architecture-arrow{font-size:1.5rem;color:var(--text-light)}.issue-solution{margin:20px 0;padding:15px;border:1px solid var(--border-color);border-radius:5px;background-color:var(--card-bg)}.issue-solution h4{color:var(--primary-color);margin-top:0;margin-bottom:10px;border-bottom:1px solid var(--border-color);padding-bottom:5px}.code-snippet{background-color:var(--code-bg);border:1px solid var(--code-border);border-radius:5px;padding:15px;margin:15px 0;overflow-x:auto}.code-snippet pre{margin:0}.code-snippet code{background:none;padding:0;font-family:Courier New,Courier,monospace;font-size:.9rem;color:var(--text-color)}@media (max-width:768px){.menu-toggle{display:block}.sidebar{transform:translateX(-100%);box-shadow:2px 0 5px rgba(0,0,0,.1)}.sidebar.open{transform:translateX(0)}.content{margin-left:0}.architecture-diagram{flex-direction:column}.architecture-arrow{transform:rotate(90deg)}}@media (max-width:480px){.header-container h1{font-size:1.2rem}.content-container{padding:10px}.doc-section h2{font-size:1.5rem}.doc-section h3{font-size:1.3rem}}