.exchange-flow.transport-diagram { display:block; max-width:none; margin:28px 0; }
.exchange-flow h3 { margin-bottom:8px; }
.exchange-flow .flow-explanation { max-width:80ch; font-size:16px; color:#becbde; }
.flow-console { margin:24px 0 18px; padding:22px 26px 18px; border:1px solid #2a415e; border-radius:20px; background:radial-gradient(ellipse at 61% 38%,#10294190,transparent 55%),#0a1423; box-shadow:0 18px 60px #02071135,inset 0 1px #ffffff05; }
.flow-toolbar { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.flow-key { display:flex; gap:22px; flex-wrap:wrap; font-size:13px; font-weight:700; letter-spacing:.02em; }
.exchange-flow .flow-key-request { color:#ffaaa4; }
.exchange-flow .flow-key-reply { color:#79d9c5; }
.flow-controls { display:flex; gap:8px; flex-wrap:wrap; }
.flow-controls[hidden] { display:none; }
.flow-controls .btn { margin:0; font:700 14px var(--body); min-height:44px; padding:10px 15px; cursor:pointer; border-radius:8px; }
.flow-controls .btn.primary { color:#e6f2ff; background:#153756; border-color:#3985bd; box-shadow:inset 0 1px #ffffff12; }
.flow-controls .btn:not(:disabled):hover { background:#1c456a; }
.flow-controls .btn:disabled { opacity:.4; cursor:default; }
.flow-controls .btn[hidden] { display:none; }
.flow-controls .btn:focus-visible,.flow-station:focus-visible { outline:2px solid #a3d6ff; outline-offset:4px; }
.flow-stage { position:relative; isolation:isolate; display:grid; grid-template-columns:174px minmax(0,1fr); gap:62px; margin:26px 0 28px; }
.flow-wires { position:absolute; inset:0; width:100%; height:100%; max-width:none; z-index:1; overflow:visible; pointer-events:none; }
.flow-wires path { fill:none; stroke:#497599; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.flow-wires .flow-branch { stroke:#70403e; stroke-dasharray:2 6; opacity:.65; }
.flow-wires [data-path="request"] { stroke:#a25c57; }
.flow-wires [data-path="reply"] { stroke:#39786f; stroke-dasharray:4 6; }
.flow-wires [data-path="trace"] { stroke:#ff9188; stroke-width:2.5; filter:drop-shadow(0 0 4px #ff817a50); }
.flow-wires [data-path="trace"].is-reply { stroke:#87e5d0; filter:drop-shadow(0 0 4px #79d9c550); }
.flow-packet { fill:#fff1ef; stroke:#ffaaa4; stroke-width:2; filter:drop-shadow(0 0 4px #ff817a); }
.flow-packet.is-reply { stroke:#87e5d0; filter:drop-shadow(0 0 4px #79d9c5); }
.flow-packet-halo { fill:#ff817a; opacity:.15; }
.flow-packet-halo.is-reply { fill:#79d9c5; }
.flow-stations { display:flex; flex-direction:column; justify-content:space-between; gap:18px; padding:26px 0 10px; }
.flow-station { position:relative; display:grid; grid-template-columns:30px minmax(0,1fr); gap:4px 10px; align-content:center; align-items:center; width:100%; min-height:70px; text-align:left; background:#0e1b2c; color:var(--ink); border:1px solid #293e57; border-radius:11px; padding:11px 12px; font:inherit; cursor:pointer; transition:border-color .2s,background .2s,box-shadow .2s; }
.flow-station strong { font-size:15px; line-height:1.3; }
.flow-station .flow-station-mark { grid-row:1 / 4; display:grid; place-items:center; width:28px; height:28px; border:1px solid #3d5a7b; border-radius:50%; font:12px var(--mono); color:#aac5e3; }
.exchange-flow .flow-station .flow-software { grid-column:2; color:#d3dfeb; font-size:12px; line-height:1.4; }
.exchange-flow .flow-station .flow-mode { grid-column:2; color:#a9c1d9; font-size:12px; line-height:1.4; }
.flow-station:hover { background:#152940; border-color:#608cb9; }
.flow-station[aria-pressed="true"] { border-color:#5caaff; background:#142b44; box-shadow:0 0 20px #287ac113,inset 0 0 0 1px #5caaff20; }
.flow-station[aria-pressed="true"] .flow-station-mark { color:#c9e6ff; background:#204e78; border-color:#5caaff; }
.flow-station.has-reply { border-color:#79d9c5; }
.flow-station.has-reply .flow-station-mark { background:#16483f; border-color:#79d9c5; color:#b8f1e5; }
.flow-local { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(140px,1.15fr) minmax(0,1fr); grid-template-rows:100px 100px; gap:34px 32px; padding:42px 0 0; }
.flow-local-caption { position:absolute; top:0; left:0; margin:0; font:12px/1.5 var(--mono); color:#a9c1d9; letter-spacing:.03em; }
.flow-node { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-width:0; padding:12px 8px; background:#0f1f32; border:1px solid #2e4966; border-radius:12px; transition:background .25s,border-color .25s,box-shadow .25s; }
.flow-node strong { font-size:17px; line-height:1.3; }
.exchange-flow .flow-node > span { font-size:13px; line-height:1.5; margin-top:9px; color:#b0c7df; }
.flow-node[data-node="decoder"] { grid-area:1 / 1; }
.flow-node[data-node="transmitter"] { grid-area:2 / 1; }
.flow-node[data-node="transport"] { grid-area:1 / 2 / 3; align-self:center; justify-self:center; width:164px; height:164px; max-width:100%; padding:16px; border-radius:50%; border-color:#366e9d; background:radial-gradient(circle at 45% 40%,#1a3b5a,#0b192a 75%); box-shadow:0 0 0 8px #4da3ff04,0 0 0 9px #4da3ff12; }
.flow-node[data-node="transport"]::before { content:""; position:absolute; inset:8px; border:1px solid #477ca038; border-radius:50%; }
.flow-node[data-node="transport"] strong { font-size:34px; letter-spacing:-.03em; }
.exchange-flow .flow-node[data-node="transport"] > span { max-width:12ch; }
.flow-node[data-node="action"] { grid-area:1 / 3 / 3; align-self:center; min-height:120px; }
.flow-node.is-active { border-color:#67b3ff; background-color:#162f4a; box-shadow:0 0 24px #4da3ff18,inset 0 0 0 1px #67b3ff24; }
.flow-node[data-node="transport"].is-active { box-shadow:0 0 0 8px #4da3ff0a,0 0 0 9px #4da3ff30,0 0 38px #4da3ff22; }
.exchange-flow[data-phase="reply"] .flow-node[data-node="transmitter"] { border-color:#79d9c5; background:#102d2b; box-shadow:0 0 24px #79d9c518; }
.flow-progress { display:grid; grid-template-columns:repeat(6,1fr); gap:5px; margin-top:4px; }
.flow-progress i { height:3px; border-radius:2px; background:#253b54; transition:background .2s; }
.flow-progress i.is-complete { background:#527da7; }
.flow-progress i.is-current { background:#80c2ff; box-shadow:0 0 8px #4da3ff40; }
.exchange-flow[data-phase="reply"] .flow-progress i.is-current,.exchange-flow[data-phase="done"] .flow-progress i.is-current { background:#79d9c5; }
.flow-status { display:grid; grid-template-columns:100px minmax(0,1fr); gap:12px 20px; padding:22px 0 16px; min-height:124px; }
.exchange-flow .flow-step-number { padding-top:4px; color:#8eb9e4; font:12px/1.5 var(--mono); }
.flow-status-title { font-size:20px; margin:0 0 8px; }
.flow-status-detail { margin:0; max-width:76ch; color:#bdcfe1; font-size:15px; line-height:1.6; }
.flow-radio-state { display:flex; align-items:center; gap:9px; color:#a9c1d9; font-size:13px; margin:0; padding-top:14px; border-top:1px solid #263c53; }
.flow-radio-state::before { content:""; flex:none; width:6px; height:6px; border-radius:50%; background:#79a6ce; box-shadow:0 0 0 3px #79a6ce12; }
.exchange-flow[data-phase="reply"] .flow-radio-state::before { background:#79d9c5; box-shadow:0 0 0 3px #79d9c512; }
.flow-manual-choice { color:#becbde; font-size:14px; margin-bottom:0; }
@media(max-width:1000px) {
  .flow-console { padding-inline:20px; }
  .flow-toolbar { align-items:stretch; flex-direction:column; }
  .flow-controls { justify-content:flex-end; }
  .flow-stage { gap:34px; grid-template-columns:150px minmax(0,1fr); }
  .flow-local { column-gap:22px; grid-template-columns:minmax(0,1fr) minmax(114px,1.1fr) minmax(0,1fr); }
  .flow-node[data-node="transport"] { width:130px; height:130px; }
  .flow-node strong { font-size:15px; }
}
@media(max-width:700px) {
  .flow-console { padding:18px 14px 16px; border-radius:15px; }
  .flow-toolbar { align-items:flex-start; flex-direction:column; gap:16px; }
  .flow-key { gap:18px; font-size:12px; }
  .flow-controls { display:grid; grid-template-columns:1fr 1fr; width:100%; }
  .flow-controls [data-play] { grid-column:1 / -1; }
  .flow-stage { grid-template-columns:1fr; gap:45px; margin:24px 0; }
  .flow-stations { flex-direction:row; gap:8px; padding:0; }
  .flow-station { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; flex:1 1 0; min-width:0; padding:10px 8px; min-height:74px; border-radius:8px; gap:5px; }
  .flow-station .flow-station-mark { display:none; }
  .flow-station strong { font-size:13px; }
  .exchange-flow .flow-station .flow-mode { font-size:11px; overflow-wrap:anywhere; }
  .exchange-flow .flow-station .flow-software { font-size:11px; }
  .flow-local { grid-template-columns:minmax(0,1fr) minmax(85px,1.08fr) minmax(0,1fr); grid-template-rows:91px 91px; gap:28px 12px; padding:35px 8px 0; }
  .flow-local-caption { left:8px; font-size:11px; }
  .flow-node { padding:8px 3px; border-radius:8px; }
  .flow-node strong { font-size:13px; }
  .flow-node[data-node="transport"] { width:100px; height:auto; aspect-ratio:1; padding:6px; box-shadow:0 0 0 4px #4da3ff05,0 0 0 5px #4da3ff18; }
  .flow-node[data-node="transport"] strong { font-size:26px; }
  .flow-node[data-node="action"] { min-height:106px; }
  .exchange-flow .flow-node > span { font-size:11px; overflow-wrap:anywhere; margin-top:8px; }
  .flow-status { grid-template-columns:1fr; gap:8px; min-height:192px; padding-top:18px; }
  .flow-status-title { font-size:18px; }
  .flow-status-detail { font-size:14px; }
  .flow-radio-state { font-size:12px; align-items:flex-start; }
  .flow-radio-state::before { margin-top:6px; }
}
@media(max-width:380px) {
  .flow-console { padding-inline:10px; }
  .flow-local { padding-inline:4px; column-gap:8px; }
  .flow-local-caption { left:4px; }
  .exchange-flow .flow-node[data-node="transport"] > span { margin-top:5px; line-height:1.35; }
  .flow-status { min-height:212px; }
}
@media(prefers-reduced-motion:reduce) {
  .exchange-flow *, .exchange-flow *::before { transition:none; }
  .flow-wires [data-path="trace"],.flow-packet { filter:none; }
}