/* Text is the diagram. CSS owns layout; the SVG adapter only measures its ports. */
.flow-plate {
  --map-ink:#eee9df;
  --map-muted:#bdc8c2;
  --map-command:#c5a16f;
  --map-data:#94b0aa;
  --map-rule:#a6b9ae26;
  container-name:diagram;
  padding:0;
  border:0;
  background:#111b1b;
  color:var(--map-ink);
  box-shadow:none;
}
.flow-plate--nfz { background:#131d18; }
.flow-plate--giftme { background:#1a1c1d; }
.flow-plate--welinks { background:#131c22; }
.flow-heading { padding:28px 40px;margin:0;border-bottom:1px solid var(--map-rule);gap:16px; }
.flow-heading>img { width:30px;height:30px;object-fit:contain; }
.flow-heading>p { color:var(--map-command);font:12px/1.5 var(--mono); }
.flow-heading span { color:var(--map-muted);font:14px/1.5 var(--sans); }
.flow-plate :is(.flow-sequence,.gift-map,.nfz-diagram) { --diagram-layout:narrow;position:relative;isolation:isolate; }
.flow-plate :is(.flow-sequence,.gift-map,.nfz-map) { display:grid;grid-template-columns:minmax(0,1fr);gap:52px;padding:40px;margin:0; }
.flow-plate .flow-step { display:block;align-self:stretch;position:static;min-height:0;grid-area:auto; }
.flow-plate .flow-node,
.flow-plate .gift-map .flow-node {
  position:relative;
  z-index:1;
  padding:0;
  min-height:0;
  border:0;
  margin:0;
  background:none!important;
  text-align:left;
}
.flow-plate .flow-node::before { content:none; }
.flow-plate :is(.flow-node h4,.nfz-console h4) { font:500 20px/1.25 var(--sans);letter-spacing:-.025em;color:var(--map-ink);margin:0 0 12px; }
.flow-plate .flow-node>h4,
.flow-plate .diagram-station { display:flex;align-items:center;min-height:68px;padding:16px 18px;margin:0 0 12px;border:1px solid #adc2b82e;border-radius:4px;background:#b6c9c60b; }
.flow-plate .diagram-station { min-height:84px;flex-direction:column;justify-content:center;align-items:start;gap:4px;padding:10px 18px; }
.flow-plate .diagram-station>h4 { margin:0;line-height:1.2; }
.flow-plate .flow-node p { padding-inline:2px;font:14px/1.55 var(--sans);color:var(--map-muted);margin:0; }
.flow-plate .flow-node :is(.flow-output,.eyebrow) { color:var(--map-command);font:14px/1.5 var(--mono);margin:14px 0 0; }
.flow-plate .flow-node .gift-return { font:14px/1.6 var(--sans)!important;color:var(--map-muted)!important;margin:14px 0 0!important; }
.flow-plate .flow-node .diagram-station>.eyebrow { margin:0;padding:0;font:14px/1.4 var(--mono); }
.flow-plate .flow-transfer { position:relative;z-index:1;display:block;min-height:0;max-width:none;padding:10px 2px 0;margin:0;color:var(--map-command); }
.flow-plate .flow-transfer>span { display:block;max-width:none;font:14px/1.5 var(--mono); }
.flow-plate .flow-down .flow-transfer::before,
.flow-plate .flow-down .flow-transfer::after { content:none;animation:none!important; }
.flow-plate :is(.actor-outline,.clock-outline,.speaker-field,.signature-line) { display:none; }
.flow-plate :is(.nfz-lane,.nfz-clock)::after { content:none; }
.flow-return { margin:8px 0 0;padding:26px 40px;border-color:var(--map-rule);gap:16px; }
.flow-return p { font:14px/1.6 var(--sans);color:var(--map-muted); }
.flow-return p>span { color:var(--map-command); }
.flow-caption { padding:26px 40px;margin:0;border-top:1px solid var(--map-rule);max-width:none;font:12px/1.7 var(--mono);color:var(--map-muted); }
.flow-node p:has(>.review-pair) { display:flex;flex-direction:column-reverse; }
.review-pair { position:relative;display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px 14px;margin:18px 0 0;padding:0; }
.review-pair>span { grid-column:2;position:relative;border:1px solid var(--map-rule);border-radius:4px;padding:12px 14px;font:14px/1.4 var(--mono);color:var(--map-ink);background:#a6b9ae05; }
.review-join { grid-column:1;grid-row:1/3;place-self:center;width:6px;height:6px;border-radius:50%;background:var(--map-data); }
.flow-plate :is(.nfz-inputs,.nfz-lane) { display:contents; }
.nfz-clock small { color:var(--map-muted);font:14px/1.6 var(--sans);margin-top:10px; }
.flow-plate .sound-buses { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:18px 0; }
.flow-plate .sound-buses span { border:0;border-bottom:1px solid var(--map-rule);padding:0 0 8px;color:var(--map-data);font:14px/1.4 var(--mono); }
.nfz-console { position:relative;z-index:1;margin:0 40px;padding:40px 0;gap:28px;border-top:1px solid var(--map-rule); }
.nfz-console .universe-device { padding:6px;border:1px solid var(--map-rule);background:#0b1210;box-shadow:none; }
.nfz-console p { font:14px/1.7 var(--sans);color:var(--map-muted); }
.nfz-console p>strong,
.nfz-console a { color:var(--map-command); }
.diagram-routes { position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible; }
.diagram-underlay { fill:none;stroke:#111b1b;stroke-width:3;vector-effect:non-scaling-stroke; }
.diagram-route { fill:none;stroke:var(--map-command);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.65; }
.diagram-route--observed { stroke:var(--map-data);opacity:.55; }
.diagram-route--conditional { stroke:var(--map-muted);stroke-dasharray:.5 1.5;opacity:.35; }
.diagram-tail,
.diagram-pin { fill:none;stroke:#f0d9b4;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:0; }
.diagram-tail { stroke-width:1.8;stroke-dasharray:var(--diagram-tail-length) 196; }
.diagram-pin { stroke-width:2.8;stroke-dasharray:.1 199.9;filter:drop-shadow(0 0 3px #e0b67a88); }
.flow-plate :is(.flow-heading,.flow-sequence,.gift-map,.nfz-diagram,.flow-return,.flow-caption) { width:100%;max-width:1160px;margin-inline:auto; }
.flow-heading { justify-content:start; }
.flow-plate .flow-sequence { gap:64px 56px; }
.flow-plate--om .flow-step:first-child h4,
.flow-plate--welinks .flow-step:nth-child(5) h4,
.flow-plate--giftme .gift-wallet .diagram-station { border-color:#c5a16f63;background:#c5a16f0e;color:#f1e0c6; }
.flow-plate--nfz .diagram-station { min-height:96px; }
.flow-plate .nfz-map { align-items:stretch; }
.flow-plate--nfz .nfz-lane>.flow-input,
.flow-plate--nfz .nfz-lane>.flow-node,
.flow-plate--nfz :is(.nfz-clock,.nfz-engine,.nfz-room) { grid-area:auto; }
@container diagram (min-width:760px) {
  .flow-plate :is(.flow-sequence,.gift-map) { --diagram-layout:wide; }
  .flow-plate .flow-sequence { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .flow-plate--om .flow-step:nth-child(4) { grid-area:2/3; }
  .flow-plate--om .flow-step:nth-child(5) { grid-area:2/2; }
  .flow-plate--om .flow-step:nth-child(6) { grid-area:2/1; }
  .flow-plate .gift-map { grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 64px; }
  .flow-plate .gift-map>.gift-app { grid-area:1/1; }
  .flow-plate .gift-map>.gift-wallet { grid-area:1/2; }
  .flow-plate .gift-map>.gift-chain { grid-area:1/3; }
  .flow-plate .gift-map>.gift-signing { grid-area:2/1; }
  .flow-plate .gift-map>.gift-submit { grid-area:2/2; }
  .flow-plate .gift-map>.gift-api { grid-area:3/1; }
  .flow-plate .gift-map>.gift-model { grid-area:3/2; }
  .flow-plate .gift-map>.gift-observe { grid-area:3/3; }
  .flow-plate .gift-map>.gift-read { grid-area:4/2; }
  .flow-plate .gift-map>.gift-index { grid-area:4/3; }
  .flow-plate--welinks .flow-step:nth-child(1) { grid-area:1/1; }
  .flow-plate--welinks .flow-step:nth-child(2) { grid-area:2/1; }
  .flow-plate--welinks .flow-step:nth-child(3) { grid-area:1/2; }
  .flow-plate--welinks .flow-step:nth-child(4) { grid-area:2/2; }
  .flow-plate--welinks .flow-step:nth-child(5) { grid-area:1/3; }
  .flow-plate--welinks .flow-step:nth-child(6) { grid-area:2/3; }
  .flow-return { grid-template-columns:1fr 1.5fr; }
}
@container diagram (min-width:1000px) {
  .flow-plate .nfz-diagram { --diagram-layout:wide; }
  .nfz-console { grid-template-columns:1.2fr 1fr; }
  .flow-plate .nfz-map { grid-template-columns:repeat(12,minmax(0,1fr));gap:64px 40px; }
  .flow-plate .nfz-lane>.flow-input,
  .flow-plate .nfz-lane>.flow-node { grid-column:span 3; }
  .flow-plate :is(.nfz-clock,.nfz-engine,.nfz-room) { grid-column:span 4; }
}
@media (prefers-reduced-motion:no-preference) {
  #showcase[open]:not([data-still]) .universe-window:not([hidden]) :is(.diagram-tail,.diagram-pin) { animation:var(--diagram-animation) var(--diagram-cycle) linear infinite; }
}