.app{height:100%;display:flex;overflow:hidden}.sidebar{background:#0f1219;border-right:1px solid #1a2030;flex-direction:column;flex-shrink:0;width:260px;display:flex}.sidebar-brand{border-bottom:1px solid #1a2030;align-items:center;gap:12px;padding:24px 20px;display:flex}.brand-icon{color:#7c6ff7;flex-shrink:0}.brand-title{color:#e8eaf0;letter-spacing:-.2px;font-size:15px;font-weight:600}.brand-subtitle{color:#5a637a;margin-top:2px;font-size:11px}.sidebar-nav{flex-direction:column;flex:1;gap:4px;padding:12px 10px;display:flex}.nav-item{color:#8a94a8;cursor:pointer;text-align:left;background:0 0;border:none;border-radius:8px;align-items:center;gap:12px;width:100%;padding:10px 14px;font-family:inherit;font-size:13px;font-weight:500;transition:all .15s;display:flex;position:relative}.nav-item:hover{color:#c9cdd7;background:#161b27}.nav-item.active{color:#e8eaf0;background:#1a1f2e}.nav-indicator{background:#7c6ff7;border-radius:0 3px 3px 0;width:3px;height:18px;position:absolute;top:50%;left:0;transform:translateY(-50%)}.sidebar-footer{border-top:1px solid #1a2030;flex-direction:column;gap:6px;padding:16px 20px;display:flex}.footer-meta{color:#4a5268;align-items:center;gap:6px;font-family:JetBrains Mono,monospace;font-size:11px;display:flex}.main{flex-direction:column;flex:1;min-width:0;display:flex;overflow:hidden}.topbar{background:#0f1219;border-bottom:1px solid #1a2030;flex-shrink:0;align-items:center;gap:16px;height:56px;padding:0 24px;display:flex}.mobile-menu-btn{color:#8a94a8;cursor:pointer;background:0 0;border:none;padding:4px;display:none}.topbar-title{color:#e8eaf0;flex:1;margin:0;font-size:15px;font-weight:600}.topbar-link{color:#7c6ff7;background:#161229;border:1px solid #2a2640;border-radius:6px;padding:6px 12px;font-size:12px;font-weight:500;text-decoration:none;transition:background .15s}.topbar-link:hover{background:#1e1a35}.content{flex:1;padding:24px;overflow-y:auto}@media (width<=768px){.sidebar{z-index:100;height:100%;transition:transform .2s;position:fixed;top:0;left:0;transform:translate(-100%)}.sidebar.open{transform:translate(0)}.mobile-backdrop{z-index:99;background:#00000080;position:fixed;inset:0}.mobile-menu-btn{display:block}.content{padding:16px}}.card{background:#111520;border:1px solid #1a2030;border-radius:12px;padding:20px}.card-title{color:#e8eaf0;align-items:center;gap:8px;margin:0 0 12px;font-size:13px;font-weight:600;display:flex}.card-subtitle{color:#5a637a;margin:0 0 16px;font-size:12px}.badge{text-transform:uppercase;letter-spacing:.05em;border-radius:4px;align-items:center;gap:4px;padding:3px 8px;font-family:JetBrains Mono,monospace;font-size:10px;font-weight:600;display:inline-flex}.badge-control{color:#5cdb8a;background:#1a2a20;border:1px solid #234030}.badge-data{color:#7c6ff7;background:#1a2235;border:1px solid #2a2640}.badge-network{color:#5ab8db;background:#1a2025;border:1px solid #203040}.badge-crd{color:#db5a8a;background:#2a1a20;border:1px solid #402030}.arch-wrap{max-width:1100px;margin:0 auto}.arch-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-bottom:24px;display:grid}.arch-diagram{width:100%;max-width:1100px;margin:0 auto}.topo-wrap{max-width:1200px;margin:0 auto}.topo-legend{flex-wrap:wrap;gap:16px;margin-bottom:16px;display:flex}.legend-item{color:#8a94a8;align-items:center;gap:6px;font-size:11px;display:flex}.legend-dot{border-radius:50%;width:10px;height:10px}.traffic-wrap{max-width:900px;margin:0 auto}.flow-selector{flex-wrap:wrap;gap:8px;margin-bottom:20px;display:flex}.flow-btn{color:#8a94a8;cursor:pointer;background:#111520;border:1px solid #1a2030;border-radius:8px;padding:8px 14px;font-family:inherit;font-size:12px;font-weight:500;transition:all .15s}.flow-btn:hover{color:#c9cdd7;border-color:#2a2640}.flow-btn.active{color:#e8eaf0;background:#1a1f2e;border-color:#7c6ff7}.flow-steps{flex-direction:column;gap:10px;display:flex}.flow-step{background:#111520;border:1px solid #1a2030;border-radius:10px;align-items:flex-start;gap:14px;padding:14px 16px;animation:.3s both fade-in;display:flex}.step-num{color:#7c6ff7;background:#1a1f2e;border:1px solid #2a2640;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;font-family:JetBrains Mono,monospace;font-size:12px;font-weight:600;display:flex}.step-text{color:#c9cdd7;padding-top:4px;font-size:13px;line-height:1.5}.concepts-wrap{max-width:1100px;margin:0 auto}.concept-card{cursor:pointer;background:#111520;border:1px solid #1a2030;border-radius:12px;padding:20px;transition:all .2s;animation:.3s both fade-in}.concept-card:hover{border-color:#2a2640}.concept-card.active{background:#13172a;border-color:#7c6ff7}.concept-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-bottom:24px;display:grid}.concept-detail{background:#111520;border:1px solid #1a2030;border-radius:12px;padding:24px;animation:.3s both fade-in}.concept-detail h3{color:#e8eaf0;margin:0 0 8px;font-size:16px}.concept-detail p{color:#8a94a8;margin:0 0 16px;font-size:13px;line-height:1.6}.concept-detail ul{color:#a0a8bc;margin:0 0 20px;padding-left:18px;font-size:13px;line-height:1.7}.concept-detail pre{color:#c9cdd7;background:#0b0e16;border:1px solid #1a2030;border-radius:8px;padding:14px;font-size:11px;line-height:1.6;overflow-x:auto}.version-table{border-collapse:collapse;width:100%;font-size:12px}.version-table th{text-align:left;color:#5a637a;text-transform:uppercase;border-bottom:1px solid #1a2030;padding:10px 12px;font-family:JetBrains Mono,monospace;font-size:11px;font-weight:500}.version-table td{color:#a0a8bc;border-bottom:1px solid #141a25;padding:10px 12px}.version-table td:first-child{color:#7c6ff7;font-family:JetBrains Mono,monospace;font-weight:500}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{color:#c9cdd7;-webkit-font-smoothing:antialiased;background:#0b0d12;font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.5}code,pre,.mono{font-family:JetBrains Mono,Fira Code,monospace}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#2a3040;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#3d4559}@keyframes pulse-glow{0%,to{opacity:.4}50%{opacity:1}}@keyframes flow-dash{to{stroke-dashoffset:-40px}}@keyframes packet-move{0%{offset-distance:0%;opacity:1}80%{opacity:1}to{offset-distance:100%;opacity:0}}@keyframes fade-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}