.flow-view{margin:22px 0 0;border:1px solid #d9e0e5;background:#f4f6f8;color:#283846}.flow-toolbar{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid #d9e0e5;background:#fff}.flow-toolbar>div{display:flex;gap:8px;flex-wrap:wrap}.flow-toolbar button{font-size:14px;background:#fff;color:#304455;border-color:#c5d0d9}.flow-toolbar [data-flow-play][aria-pressed=true]{background:#22384a;border-color:#22384a;color:#fff}.flow-scroll{overflow-x:auto;overscroll-behavior-x:contain}.flow-stage{position:relative;width:100%;height:600px;min-width:900px;overflow:hidden;isolation:isolate}.flow-stage>canvas{display:block;width:100%;height:100%;cursor:grab}.flow-stage>canvas:active{cursor:grabbing}.flow-loading{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:40px;color:#526777;font-size:16px;z-index:3;background:#f4f6f8}.flow-key{display:flex;gap:10px 18px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid #d9e0e5;background:#fff;font-size:13px}.flow-key span:before{content:"";display:inline-block;width:16px;height:3px;vertical-align:middle;background:var(--signal);margin-right:8px}.flow-inspector{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding:18px;background:#fff;border-top:2px solid #187daf}.flow-inspector h4{font-size:16px;font-weight:600;margin:0 0 8px}.flow-inspector p{font-size:14px;line-height:1.65;color:#526472}.flow-inspector button{font-size:13px;white-space:nowrap}.flow-help{padding:10px 16px;font-size:14px;color:#526472;border-top:1px solid #e2e8ec}.flow-descriptions{padding:10px 16px;background:#fff;border-top:1px solid #e2e8ec;font-size:14px}.flow-descriptions summary{cursor:pointer}.flow-descriptions dl{max-height:420px;overflow:auto;padding-right:12px}.flow-descriptions dt{font-weight:600;margin-top:16px}.flow-descriptions dd{margin:4px 0 0;color:#526472;line-height:1.65}#architecture-comparison{width:min(1800px,calc(100vw - 64px));position:relative;left:50%;transform:translate(-50%)}.architecture-pair{margin:22px 0;gap:20px;align-items:start}.architecture-slot{border:1px solid var(--rule);padding:18px;min-width:0;background:#fff}.architecture-slot>label{margin:0 0 12px}.architecture-detail{min-height:3.4em;margin:0 0 12px}.architecture-scores{margin-top:12px}.network-view .flow-stage{height:clamp(460px,35vw,630px);min-width:600px;background:#f4f6f8}.compact-flow{margin-top:20px}.compact-flow .flow-toolbar{padding:10px}.compact-flow .flow-toolbar button{font-size:13px;padding:7px 10px}.flow-view:fullscreen{width:100vw;height:100vh;overflow:auto;margin:0;border:0}.flow-view:fullscreen .flow-stage{height:calc(100vh - 180px);min-width:0}.flow-view:fullscreen .flow-scroll{overflow:hidden}.architecture-notes{padding:15px 0;margin:18px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}.architecture-notes summary{cursor:pointer;font-size:14px;font-weight:500}.architecture-notes p{margin-top:18px;max-width:1000px}@media(max-width:1050px){.architecture-pair{grid-template-columns:1fr}.network-view .flow-stage{height:620px}.architecture-detail{min-height:0}}@media(max-width:700px){#architecture-comparison{width:calc(100vw - 32px)}.architecture-slot{padding:12px}.flow-toolbar{padding:10px}.flow-inspector{flex-direction:column}.flow-stage{height:560px}.network-view .flow-stage{height:520px}.flow-key{gap:8px 12px}.architecture-slot>label{display:block}.architecture-slot select{margin-top:8px}}[hidden]{display:none!important}
