/* Dedicated architecture view; the operational V1 styles remain intact. */
.flow-tabs{display:flex;gap:8px;padding:6px;background:#151e22;border:1px solid var(--line);border-radius:10px;margin-bottom:22px;width:fit-content;max-width:100%}.flow-tabs button{display:flex;align-items:center;justify-content:center;gap:14px;background:none;color:#aebec5;padding:13px 20px;border-radius:6px;font-size:13px;min-height:46px}.flow-tabs button>span{font-size:10px;opacity:.6}.flow-tabs button[aria-selected=true]{background:#2b3932;color:#d4ecc4}.flow-tabs button[data-mode=data][aria-selected=true]{background:#223943;color:#b3e4f4}.flow-tabs .icon{width:18px}.flow-workspace{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;align-items:start}.flow-main{min-width:0;background:#141d21;border:1px solid #304048;border-radius:12px;overflow:hidden}.flow-principle{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line)}.flow-principle>span{display:flex;gap:10px;align-items:center;font-size:12px;color:var(--flow-color)}.flow-principle small{font-size:9px;color:var(--muted)}.flow-controls{display:flex;gap:7px;align-items:center;flex-wrap:wrap;padding:16px 18px}.flow-controls .button{font-size:10px;min-height:42px;padding:9px 11px}.flow-controls .primary{background:var(--flow-color);border-color:var(--flow-color)}.flow-speed{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:10px;color:var(--muted)}.flow-speed select{border:1px solid #3c5059;color:var(--text);background:#202c32;border-radius:6px;padding:9px 5px;min-height:42px}.flow-scroll{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-color:#506872 #131b20;scrollbar-width:thin;width:100%;background-color:#111a1e;background-image:radial-gradient(#30414977 .7px,transparent .7px);background-size:18px 18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.flow-canvas{width:880px;position:relative;margin:auto}.flow-wires{position:absolute;inset:0;width:880px;height:100%;overflow:visible;color:#69848f}.flow-wire{fill:none;stroke:#3d555f;stroke-width:1.6}.flow-wire.branch{stroke-dasharray:5 4}.flow-wire.visited{stroke:var(--flow-color);opacity:.65}.flow-wire.active{stroke:var(--flow-color);stroke-width:2.2}.flow-pulse{fill:var(--flow-color);filter:drop-shadow(0 0 4px var(--flow-color));pointer-events:none}.flow-node{position:absolute;width:176px;height:76px;text-align:left;border:1px solid #40525b;border-radius:8px;background:#1c282e;padding:9px 11px;display:flex;flex-direction:column;justify-content:space-between;transition:border-color .15s,background .15s}.flow-node:hover{background:#28383f;border-color:#89a4b1}.flow-node.selected{border-color:var(--flow-color);background:#263b3f;box-shadow:0 0 0 2px color-mix(in srgb,var(--flow-color) 16%,transparent)}.flow-node.traversed{border-color:#536e62}.flow-node strong{font-size:12px;font-weight:600;line-height:1.2}.flow-node-top{display:flex;align-items:center;gap:8px}.flow-number{font-size:8px;color:#a3b7be}.flow-node .icon{width:15px;height:15px;color:#acc3cb}.flow-done{margin-left:auto;visibility:hidden;color:var(--flow-color);font-size:11px}.traversed .flow-done{visibility:visible}.flow-node-bottom{display:flex;align-items:center;justify-content:space-between}.flow-node .badge{font-size:8px;padding:0;line-height:1;background:none;border:0}.flow-active-dot{width:5px;height:5px;background:var(--flow-color);border-radius:50%;visibility:hidden}.current-stage .flow-active-dot{visibility:visible}.is-playing .current-stage .flow-active-dot{animation:flow-breathe 1.8s ease-in-out infinite}.flow-lane{position:absolute;left:20px;color:#90a7b0;font-size:8px;letter-spacing:1.5px;pointer-events:none}.flow-branch-note{position:absolute;left:245px;top:565px;font-size:12px;color:#a6bec8;line-height:1.7}.flow-caption{display:flex;gap:14px;align-items:center;padding:14px 18px;min-height:67px;font-size:11px;line-height:1.6}#flow-counter{color:var(--flow-color);font-family:monospace;white-space:nowrap;font-size:12px}#flow-caption{flex:1}.flow-playstate{color:#91a5ad;white-space:nowrap;font-size:9px}.flow-progress{height:3px;background:#28383f}.flow-progress>span{display:block;height:100%;background:var(--flow-color)}.flow-inspector{position:sticky;top:20px;max-height:calc(100vh - 40px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#506872 #171f23;padding:22px}.detail-title{display:flex;align-items:center;gap:12px;margin:18px 0}.detail-title .icon{color:var(--flow-color);width:25px;height:25px}.detail-title h2{font-size:21px}.flow-inspector .detail-fields{margin-top:10px}.flow-inspector dd,.flow-inspector p{font-size:12px;line-height:1.65}.flow-inspector .eyebrow{font-size:9px}.detail-footnote{margin-top:20px;color:var(--muted);font-size:10px!important}.connection-result{display:flex;gap:16px;padding:22px;color:var(--flow-color)}.connection-result>.icon{width:30px;height:30px}.connection-result strong{font-size:14px;font-weight:500}.connection-result p{color:#a5b9c1;font-size:11px;line-height:1.7;margin-top:6px}.packet-teaching{padding:22px 20px 16px}.packet-teaching h3{font-size:14px}.packet-teaching>p:last-child{font-size:11px;color:#a9bdc6;line-height:1.7}.packet-stack{display:flex;margin:18px 0;gap:5px;min-height:59px}.packet-layer{padding:12px 14px;background:#2a443c;border:1px solid #689776;border-radius:5px;display:flex;flex-direction:column;justify-content:center;gap:5px;flex:1;color:#d2ebd5;font-size:12px;animation:layer-appear .4s ease-out}.packet-layer small{font-size:9px;color:inherit;opacity:.85}.tcp-layer{background:#273f58;border-color:#6b93b7;color:#c3e1ff}.ip-layer{background:#493c5d;border-color:#9c80be;color:#e8d8fa}.example-code{margin:0 20px 18px;color:#b4c6ce;font-size:11px}.example-code summary,.architecture-future summary{cursor:pointer;min-height:44px;padding:14px 0}.example-code pre{background:#0e171b;border:1px solid #31454f;white-space:pre-wrap;overflow-wrap:anywhere;padding:14px;line-height:1.7;border-radius:6px;font-size:11px}.example-code p{font-size:10px}.flow-help{padding:0 20px 16px;color:#9fb2bc;font-size:10px;line-height:1.8}.flow-legend{display:flex;flex-wrap:wrap;gap:15px;padding:15px 20px;border-top:1px solid var(--line);align-items:center}.flow-legend>span:last-child{font-size:9px;color:var(--muted)}.flow-legend .badge{font-size:9px}.result-map{position:relative;overflow:hidden;padding:20px;margin:20px;background:#203435;border:1px solid #43625b;border-radius:7px;min-height:108px}.result-map svg{position:absolute;inset:0;height:100%;width:100%;opacity:.4}.result-map svg path{fill:none;stroke:#779a97;stroke-width:4}.result-map svg circle{fill:#b1e192}.result-map svg .result-pin{stroke:#152d20;stroke-width:2}.result-map>div{position:relative;background:#162c25e8;width:fit-content;padding:10px;border-radius:5px}.result-map p{font-size:10px;margin:6px 0 12px;color:#b5c9c4}.architecture-future{margin-top:25px;border-top:1px solid var(--line);color:#c6d6db}.architecture-future>summary{font-size:12px}.architecture-future .roadmap{margin-top:20px}.architecture-future .production-grid{margin-top:14px}.fault-flow-selector{margin-top:15px}.fault-impact-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:15px}.fault-impact-list span{font-size:10px;padding:6px 8px;border:1px solid #42565d;border-radius:5px}.fault-impact-list .blocked{border-color:#997654;color:#e8c1a0}.fault-impact-list .failed{border-color:#c47571;color:#ffb7b1}.fault-impact-list .available{color:#abc4b7}.fault-lab button{margin-top:15px}.fault-lab .notice{font-size:11px}.shell,main{min-width:0}.sidebar{overflow-y:auto}
@keyframes flow-breathe{50%{opacity:.35}}@keyframes layer-appear{from{opacity:.3;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(min-width:1550px){.flow-workspace{grid-template-columns:minmax(0,1fr) 320px}}
@media(max-width:1200px){.flow-workspace{grid-template-columns:minmax(0,1fr)}.flow-inspector{position:static;max-height:none;display:block}.flow-inspector .detail-fields{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}.flow-principle small{display:none}}
@media(max-width:760px){.flow-tabs{width:100%}.flow-tabs button{flex:1;font-size:11px;padding:11px 10px;gap:8px}.flow-tabs .icon{display:none}.flow-controls{padding:12px;gap:6px}.flow-controls .button{flex:1;min-height:44px;font-size:10px}.flow-speed{margin-left:0;flex:1;justify-content:center}.flow-principle{padding:15px 12px}.flow-principle>span{font-size:11px}.flow-caption{flex-wrap:wrap;padding:12px;gap:8px}.flow-playstate{width:100%;padding-left:54px}.flow-inspector .detail-fields{grid-template-columns:1fr}.flow-legend{gap:12px}.packet-teaching{padding:18px 12px}.packet-layer{padding:10px 8px;font-size:11px}.packet-layer small{font-size:8px}.flow-help{padding:0 12px 14px}.flow-inspector{padding:20px}.flow-tabs button>span{display:none}}
@media(prefers-reduced-motion:reduce){.flow-pulse{display:none!important}.flow-node,.packet-layer,.flow-active-dot{animation:none!important;transition:none!important}}
.packet-before{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:18px;color:#9eb2bb;font-size:9px}.packet-before code{font-size:12px;color:#c8dfcf;padding:6px 12px;border:1px solid #486455;border-radius:4px}.packet-before>span{width:100%;color:#9eb2bb;font-size:11px}