.source-flow {
  --flow-bg: #15222e;
  --flow-edge: #8499a9;
  --flow-mono: var(--mono, ui-monospace, SFMono-Regular, Consolas, monospace);
  width: 100%; min-width: 0; color: var(--ui-ink); background: var(--ui-wash);
}
.source-flow[hidden], .source-flow [hidden] { display: none !important; }
.flow-toolbar, .flow-selector, .flow-tools, .flow-footer { display: flex; align-items: center; }
.flow-toolbar {
  min-height: 41px; padding: 7px 12px; gap: 10px;
  border-block: 1px solid var(--ui-line); flex-wrap: wrap;
}
.flow-selector { min-width: 0; gap: 7px; color: var(--ui-muted); font: 600 12px var(--sans,system-ui); }
.flow-selector .flow-function {
  max-width: min(48vw,365px); min-width: 96px; padding: 4px 7px;
  border: 1px solid var(--ui-line); background: #fff; border-radius: 5px;
  color: var(--ui-navy); font: 600 12px var(--flow-mono);
}
.flow-summary { color: var(--ui-muted); font: 11px var(--flow-mono); }
.flow-tools { gap: 3px; margin-left: auto; }
.source-flow .flow-control { min-height: 27px; padding: 3px 9px; border-color: var(--ui-line); border-radius: 5px; color: var(--ui-accent); background: #fff; font-size: 12px; }
.source-flow .flow-control:hover:not(:disabled) { border-color: #8ea9bd; background: var(--ui-tint); }
.source-flow .flow-control:disabled { opacity: .45; }
.flow-scale { min-width: 47px; font-family: var(--flow-mono); }
.flow-viewport, .flow-message {
  height: clamp(380px, 56vh, 650px); container-type: inline-size;
  background-color: var(--flow-bg);
  background-image: radial-gradient(#304150 .8px, transparent .9px);
  background-size: 16px 16px;
}
.flow-viewport { overflow: auto; position: relative; cursor: grab; overscroll-behavior: contain; }
.flow-viewport.flow-grabbing { cursor: grabbing; }
.flow-viewport:focus-visible { outline: 2px solid #8cbada; outline-offset: -2px; }
.flow-stage { width: max-content; min-width: 100%; min-height: 100%; }
.flow-svg { display: block; margin: 0 auto; overflow: visible; max-width: none; }
.flow-message { display: grid; align-content: center; justify-items: center; padding: 20px; margin: 0; text-align: center; color: #cadbd7; font: 14px/1.6 var(--sans,system-ui); }
.flow-footer { min-height: 29px; padding: 5px 12px; font-size: 11px; color: #54695c; border-bottom: 1px solid #d4dfd7; }
.flow-connection { color: var(--flow-edge); }
.flow-edge { stroke: currentColor; stroke-width: 1.5; fill: none; }
.flow-arrow { stroke: currentColor; stroke-width: .6; fill: currentColor; }
.flow-edge-label { fill: #c6d6e3; font: 600 11px var(--sans,system-ui); stroke: var(--flow-bg); stroke-width: 4px; paint-order: stroke fill; }
.flow-yes { color: #80bea6; }
.flow-no { color: #bda176; }
.flow-edge-label.flow-yes { fill: #abddc6; }
.flow-edge-label.flow-no { fill: #e7c38e; }
.flow-step {
  --flow-border: #627b8c; --flow-card: #213440; --flow-accent: #b2c8d7;
  cursor: pointer; outline: none;
}
.flow-box { fill: var(--flow-card); stroke: var(--flow-border); stroke-width: 1.3; }
.flow-step:hover .flow-box, .flow-step:focus-visible .flow-box { stroke: #e8f4ef; stroke-width: 2.4; }
.flow-call { --flow-border: #527791; --flow-card: #203442; --flow-accent: #a5cde6; }
.flow-decision { --flow-border: #9b875f; --flow-card: #38372f; --flow-accent: #edd08e; }
.flow-return, .flow-jump { --flow-border: #777294; --flow-card: #302f41; --flow-accent: #d4c6ee; }
.flow-start, .flow-end { --flow-card: #203e37; --flow-border: #538b71; --flow-accent: #a5dfb9; }
.flow-terminal-dot { fill: var(--flow-accent); }
.flow-line { fill: #b6c5c9; font: 10px var(--flow-mono); }
.flow-kind { fill: var(--flow-accent); font: 600 10px var(--sans,system-ui); }
.flow-code { fill: #f0f5f4; font: 12.5px var(--flow-mono); }
.flow-terminal-label { fill: #cff1d9; font: 650 12px var(--sans,system-ui); }
.flow-glyph { stroke: var(--flow-accent); stroke-width: 1.5; fill: none; }
#benchPanel.editor-focus .flow-viewport, #benchPanel.editor-focus .flow-message { height: max(480px, 77vh); }
@media (max-width: 560px) {
  .flow-toolbar { gap: 6px; padding: 7px 8px; }
  .flow-summary { display: none; }
  .flow-selector .flow-function { max-width: 40vw; }
  .source-flow .flow-control { padding-inline: 6px; }
  .flow-viewport, .flow-message { height: max(350px,55vh); }
}