a{font-weight:500;text-decoration:inherit}body{margin:0}:root{--primary-color: #5f6caf;--secondary-color: #f3826f;--tertiary-color: #ffce76;--text-primary: #333;--text-secondary: #666;--text-light: #888;--bg-primary: #fff;--bg-secondary: #f9f9f9;--bg-tertiary: #f5f5f5;--border-color: #eee;--shadow-sm: 0 2px 5px rgba(0,0,0,.1);--shadow-md: 0 5px 15px rgba(0,0,0,.07);--border-radius: 8px;--transition: all .3s ease}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.6;color:var(--text-primary);background-color:var(--bg-primary);padding:0}header{background:linear-gradient(135deg,var(--primary-color),#7886d7);color:#fff;padding:60px 0 40px;text-align:center;position:relative;overflow:hidden;box-shadow:var(--shadow-md)}header:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='rgba(255,255,255,0.05)' fill-rule='evenodd'/%3E%3C/svg%3E");opacity:.7;z-index:0}.header-content{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:0 20px}h1{font-size:2.8rem;margin-bottom:15px;font-weight:700}.header-subtitle{font-size:1.2rem;max-width:700px;margin:0 auto 30px;opacity:.9}.container{max-width:1200px;margin:0 auto;padding:40px 20px}.tab-container{border-radius:var(--border-radius);margin:-80px auto 40px;position:relative;z-index:2;background:var(--bg-primary);box-shadow:var(--shadow-md);overflow:hidden}.tabs{display:flex;overflow-x:auto;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.tab{padding:18px 24px;background-color:transparent;border:none;cursor:pointer;font-size:1rem;font-weight:600;color:var(--text-light);white-space:nowrap;transition:var(--transition);position:relative}.tab:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:3px;background-color:var(--primary-color);transform:scaleX(0);transition:var(--transition)}.tab.active{color:var(--primary-color)}.tab.active:after{transform:scaleX(1)}.tab-content{display:none;padding:30px}.tab-content.active{display:block;animation:fadeIn .5s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}h2{font-size:1.8rem;margin-bottom:20px;color:var(--primary-color)}h3{font-size:1.4rem;margin:30px 0 15px;color:var(--text-primary)}h4{font-size:1.2rem;margin:25px 0 12px;color:var(--text-primary)}p{margin-bottom:16px;color:var(--text-secondary)}ul,ol{margin-bottom:20px;padding-left:20px}li{margin-bottom:8px;color:var(--text-secondary)}a{color:var(--primary-color);text-decoration:none;transition:var(--transition)}a:hover{color:var(--secondary-color)}.section{margin-bottom:40px}.card{background-color:var(--bg-primary);border-radius:var(--border-radius);padding:25px;margin-bottom:30px;box-shadow:var(--shadow-sm);transition:var(--transition);border:1px solid var(--border-color)}.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}.card-title{display:flex;align-items:center;font-size:1.3rem;margin-bottom:15px;color:var(--primary-color);font-weight:600}.card-title i{margin-right:12px;font-size:1.2em;color:var(--secondary-color)}.card-content{color:var(--text-secondary)}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:25px;margin-bottom:40px}.cta-section{background-color:var(--bg-tertiary);padding:60px 0;text-align:center;margin:40px 0}.cta-container{max-width:800px;margin:0 auto;padding:0 20px}.cta-title{font-size:2rem;margin-bottom:20px;color:var(--primary-color)}.btn{display:inline-block;padding:12px 24px;background-color:var(--primary-color);color:#fff;border-radius:50px;font-weight:600;transition:var(--transition);border:none;cursor:pointer;font-size:1rem}.btn:hover{background-color:#4a58a3;transform:translateY(-2px);box-shadow:0 5px 15px #5f6caf4d;color:#fff}.btn-secondary{background-color:transparent;color:var(--primary-color);border:2px solid var(--primary-color);margin-left:15px}.btn-secondary:hover{background-color:var(--primary-color);color:#fff}.feature-icon{font-size:2.5rem;color:var(--primary-color);margin-bottom:20px}pre{background-color:var(--bg-tertiary);padding:20px;border-radius:var(--border-radius);overflow-x:auto;margin-bottom:20px;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:.9rem;line-height:1.5;color:var(--text-primary)}code{font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;background-color:var(--bg-tertiary);padding:2px 5px;border-radius:3px;font-size:.9em;color:var(--primary-color)}.diagram{max-width:100%;height:auto;margin:30px 0;border-radius:var(--border-radius);box-shadow:var(--shadow-sm)}.expandable{border:1px solid var(--border-color);border-radius:var(--border-radius);margin-bottom:20px}.expandable-header{padding:15px 20px;background-color:var(--bg-secondary);cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:var(--transition)}.expandable-header:hover{background-color:#ececec}.expandable-title{font-weight:600;color:var(--text-primary)}.expandable-content{max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0 20px}.expandable.active .expandable-content{max-height:1000px;padding:20px}.expandable-icon{transition:transform .3s ease}.expandable.active .expandable-icon{transform:rotate(180deg)}.highlight-box{background-color:#5f6caf1a;border-left:4px solid var(--primary-color);padding:20px;margin:25px 0;border-radius:0 var(--border-radius) var(--border-radius) 0}.highlight-box-title{font-weight:600;margin-bottom:10px;color:var(--primary-color)}.tag{display:inline-block;padding:4px 10px;background-color:#5f6caf1a;color:var(--primary-color);border-radius:50px;font-size:.8rem;margin-right:8px;margin-bottom:8px}.step{display:flex;margin-bottom:30px}.step-number{background-color:var(--primary-color);color:#fff;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:15px;margin-top:5px;font-weight:600}.step-content{flex:1}.step-title{font-weight:600;margin-bottom:8px;color:var(--text-primary)}table{width:100%;border-collapse:collapse;margin-bottom:25px}th,td{padding:12px 15px;text-align:left;border-bottom:1px solid var(--border-color)}th{background-color:var(--bg-secondary);font-weight:600}tr:hover{background-color:var(--bg-tertiary)}.image-container{margin:25px 0;text-align:center}.image{max-width:100%;border-radius:var(--border-radius);box-shadow:var(--shadow-sm)}.caption{font-size:.9rem;color:var(--text-light);margin-top:10px;text-align:center}.tooltip{position:relative;display:inline-block;border-bottom:1px dashed var(--text-light);cursor:help}.tooltip .tooltip-text{visibility:hidden;width:200px;background-color:#333;color:#fff;text-align:center;border-radius:6px;padding:10px;position:absolute;z-index:1;bottom:125%;left:50%;transform:translate(-50%);opacity:0;transition:opacity .3s;font-size:.9rem}.tooltip .tooltip-text:after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:#333 transparent transparent transparent}.tooltip:hover .tooltip-text{visibility:visible;opacity:1}.search-container{margin-bottom:30px;position:relative}.search-input{width:100%;border-radius:50px;border:1px solid var(--border-color);font-size:1rem;transition:var(--transition);padding:12px 20px 12px 45px}.search-input:focus{border-color:var(--primary-color);outline:none;box-shadow:0 0 0 3px #5f6caf1a}.search-icon{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--text-light)}footer{background-color:var(--primary-color);color:#fff;padding:50px 0 20px;text-align:center}.footer-content{max-width:1200px;margin:0 auto;padding:0 20px}.footer-logo{font-size:1.8rem;font-weight:700;margin-bottom:20px}.footer-links{display:flex;justify-content:center;flex-wrap:wrap;margin-bottom:30px}.footer-link{color:#fff;margin:0 15px 10px;opacity:.8;transition:var(--transition)}.footer-link:hover{opacity:1;color:#fff}.social-links{margin-bottom:30px}.social-link{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background-color:#ffffff1a;color:#fff;margin:0 5px;transition:var(--transition)}.social-link:hover{background-color:#fff3;transform:translateY(-3px);color:#fff}.copyright{opacity:.7;font-size:.9rem;margin-top:20px}@media (max-width: 768px){h1{font-size:2.2rem}.header-subtitle{font-size:1rem}.tab{padding:15px 20px;font-size:.9rem}.grid{grid-template-columns:1fr}.btn-secondary{margin-left:0}}.code-diagram{position:relative;overflow:hidden;margin:30px 0;border-radius:var(--border-radius);box-shadow:var(--shadow-md)}.code-tabs{display:flex;background-color:#2d2d2d;overflow-x:auto;scrollbar-width:none}.code-tabs::-webkit-scrollbar{display:none}.code-tab{padding:12px 20px;background-color:transparent;border:none;color:#aaa;cursor:pointer;font-size:.9rem;transition:var(--transition);white-space:nowrap}.code-tab.active{background-color:#1e1e1e;color:#fff}.code-content{display:none;background-color:#1e1e1e;padding:20px;color:#e6e6e6;overflow-x:auto}.code-content.active{display:block}.code-line{margin-bottom:5px;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:.9rem;line-height:1.5}.comment{color:#6a9955}.keyword{color:#569cd6}.string{color:#ce9178}.function{color:#dcdcaa}.variable{color:#9cdcfe}.number{color:#b5cea8}.timeline{position:relative;margin:40px 0}.timeline:before{content:"";position:absolute;top:0;bottom:0;left:20px;width:2px;background-color:var(--primary-color);opacity:.3}.timeline-item{position:relative;padding-left:50px;margin-bottom:30px}.timeline-dot{position:absolute;left:16px;top:5px;width:10px;height:10px;border-radius:50%;background-color:var(--primary-color)}.timeline-date{font-size:.8rem;color:var(--text-light);margin-bottom:5px}.timeline-title{font-weight:600;margin-bottom:10px;color:var(--text-primary)}.back-to-top{position:fixed;bottom:30px;right:30px;width:50px;height:50px;border-radius:50%;background-color:var(--primary-color);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;visibility:hidden;transition:var(--transition);box-shadow:var(--shadow-md);z-index:999}.back-to-top.visible{opacity:1;visibility:visible}.back-to-top:hover{background-color:#4a58a3;transform:translateY(-3px)}.diagram-container{background-color:#fff;padding:30px;border-radius:var(--border-radius);box-shadow:var(--shadow-md);margin:40px 0;overflow:hidden}.diagram-client-server{display:flex;flex-direction:column;gap:30px;position:relative}@media (min-width: 768px){.diagram-client-server{flex-direction:row;align-items:center}}.diagram-box{border:2px solid var(--primary-color);border-radius:var(--border-radius);padding:20px;flex:1;position:relative;min-height:200px;display:flex;flex-direction:column;gap:15px}.diagram-title{text-align:center;font-weight:600;margin-bottom:10px;color:var(--primary-color)}.diagram-connection{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;background-color:#fff;padding:5px 10px;font-size:.8rem;color:var(--text-secondary);border-radius:50px;box-shadow:var(--shadow-sm);z-index:1}@media (max-width: 767px){.diagram-connection{top:auto;bottom:-15px}}.diagram-element{background-color:var(--bg-tertiary);border-radius:var(--border-radius);padding:10px 15px;display:flex;align-items:center;gap:10px}.diagram-icon{width:30px;height:30px;background-color:var(--primary-color);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.diagram-arrow{position:absolute;width:100px;height:2px;background-color:var(--text-light);top:50%;left:100%;transform:translateY(-50%);z-index:0}@media (max-width: 767px){.diagram-arrow{width:2px;height:60px;top:100%;left:50%;transform:translate(-50%)}}.diagram-arrow:after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:10px solid var(--text-light)}@media (max-width: 767px){.diagram-arrow:after{right:50%;top:100%;transform:translate(50%) rotate(90deg)}}