/* Original diagram styles. */
.flow {
  position: relative; margin: 0 0 30px; padding: 24px 20px 22px;
  display: flex; flex-direction: column; align-items: stretch;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px;
}

.tier { display: flex; align-items: flex-start; justify-content: center; gap: 0; }
.tier-2 { align-items: stretch; }

.rtn { position: relative; height: 54px; margin: 14px 30.2% 2px 95px; }
.rtn-line {
  position: absolute; inset: 0; border-top: 1.5px dashed var(--line-2);
  border-left: 1.5px dashed var(--line-2); border-top-left-radius: 20px;
  border-right: 0; border-bottom: 0;
}

.rtn-up { position: absolute; right: 0; top: -12px; width: 0; height: 12px;
          border-left: 1.5px dashed var(--line-2); }
.rtn-head { position: absolute; left: -6px; bottom: 0; width: 12px; }
.rtn-cap {
  position: absolute; left: 22px; bottom: 4px; font-family: var(--mono);
  font-size: 10px; word-spacing: -.36em;
  color: var(--muted); background: var(--surface);
  padding: 0 6px;
}
.flow-defs { position: absolute; width: 0; height: 0; }

.node {
  flex: 1 1 0; min-width: 0; text-align: center; position: relative;
  border-radius: 10px; border: 1px solid transparent;
}
.nbody { display: block; padding: 6px 6px 8px; cursor: pointer; }
.node:hover, .node:focus-within {
  background: var(--sunken); border-color: var(--line);
}

.ntoggle { position: absolute; opacity: 0; width: 1px; height: 1px;
           margin: 0; pointer-events: none; }
.sk { width: 100%; max-width: 104px; height: auto; }
.ink { fill: none; stroke: var(--ink); stroke-width: 1.9;
       stroke-linecap: round; stroke-linejoin: round; }
.node b { display: block; font-size: 13.5px; margin-top: 2px; }
.node-sub { display: block; font-family: var(--mono); font-size: 10.5px;
            word-spacing: -.36em;
            color: var(--muted); margin-top: 2px; }

.tip {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  z-index: 46; width: 300px; max-width: 78vw; margin-top: 8px;
  padding: 14px 34px 14px 15px; text-align: left;

  background: var(--ink); color: var(--ground);
  border: 1px solid #000; border-radius: 10px;
  font-size: 13px; line-height: 1.5;
  box-shadow: 0 10px 28px rgba(22, 23, 26, .35);
  opacity: 0; visibility: hidden; transition: opacity .14s ease;
}
.tip b { color: var(--accent); }
.node:hover .tip, .out:hover .tip,
.ntoggle:checked ~ .tip, .ntoggle:focus-visible ~ .tip {
  opacity: 1; visibility: visible;
}

.tipscrim { display: none; position: fixed; inset: 0; z-index: 45;
            cursor: default; }
#fnone:not(:checked) ~ .tipscrim { display: block; }

.tipx {
  position: absolute; top: 6px; right: 6px; width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border-radius: 6px; font-size: 13px;
  color: var(--line-2);
}
.tipx:hover { background: rgba(255,255,255,.12); color: var(--ground); }

.tier > .node:first-child .tip,
.ours > .node:first-child .tip { left: 0; transform: none; }
.tier > .node:last-child .tip,
.ours > .node:last-child .tip { left: auto; right: 0; transform: none; }

.link { flex: 1 1 auto; min-width: 54px; display: flex; align-items: center;
        gap: 0; padding-top: 26px; position: relative; }

.ours .link { min-width: 44px; }

.tier-1 > .link { padding-right: 6px; }

.lin { flex: 1 1 auto; height: 0; margin: 0 2px;
       border-top: 1.5px dashed var(--line-2);
       animation: reveal .7s ease both; }
.tipm { flex: 0 0 10px; width: 10px; height: 10px; margin-right: 2px; }
.fill-tip { fill: var(--line-2); animation: tipin .3s ease .5s both; }

@keyframes reveal {
  from { clip-path: inset(0 100% 0 0) }
  to   { clip-path: inset(0 0 0 0) }
}
@keyframes tipin { from { opacity: 0 } to { opacity: 1 } }

.link-cap { position: absolute; left: 0; right: 0; top: 46px;
            font-family: var(--mono); font-size: 10px; color: var(--muted);
            word-spacing: -.36em; text-align: center; }

.ours {
  position: relative; flex: 3 1 0; min-width: 0;
  display: flex; align-items: flex-start; gap: 2px;
  border: 1.5px dashed var(--line-2); border-radius: 12px;
  padding: 14px 10px 10px;
}
.ours-cap {
  position: absolute; top: -8px; left: 18px; padding: 0 8px;
  background: var(--surface); font-family: var(--mono); font-size: 10px;
  color: var(--muted); letter-spacing: .04em;
}

.node.chat { flex: 0 0 190px; align-self: flex-start; }
.outs {
  position: relative; flex: 1 1 auto;
  display: grid; align-content: center; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-left: 0; padding: 16px 12px 12px;
  border: 1.5px dashed var(--line-2); border-radius: 12px;
}
.outs-cap {
  position: absolute; top: -8px; left: 16px; padding: 0 8px;
  background: var(--surface); font-family: var(--mono); font-size: 10px;
  color: var(--muted); letter-spacing: .04em;
}
.out { position: relative; }

.out .nbody {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); font-size: 13px;
}
.out:hover .nbody, .out:focus-within .nbody { border-color: var(--green);
                                              background: var(--ok-soft); }
.out b { font-weight: 600; }

.out .tip { left: auto; right: 0; transform: none; }

.oico {
  flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--ok-soft); display: flex; align-items: center;
  justify-content: center;
}
.oico svg { width: 17px; height: 17px; }
.oink { fill: none; stroke: var(--green-d); stroke-width: 1.7;
        stroke-linecap: round; stroke-linejoin: round; }
.olime { fill: none; stroke: var(--accent); stroke-width: 2.4;
         stroke-linecap: round; stroke-linejoin: round; }
circle.olime { fill: var(--accent); stroke: none; }

@media (max-width: 820px) {
  .flow { padding: 18px 14px; }

  .tier { flex-direction: column; align-items: stretch; gap: 2px; }
  .ours { flex-direction: column; align-items: stretch; padding: 16px 10px 10px; }
  .node.chat { flex: none; }

  .link { flex: 0 0 auto; width: auto; height: 34px; padding: 0;
          margin-left: 27px; flex-direction: column; align-items: flex-start;
          position: relative; }
  .lin { width: 0; height: auto; margin: 2px 0;
         border-top: 0; border-left: 1.5px dashed var(--line-2);
         animation-name: reveal-v; }
  .tipm { transform: rotate(90deg); margin: 0 0 2px; }

  .link-cap { position: absolute; left: 16px; top: 50%; right: auto;
              transform: translateY(-50%); white-space: nowrap;
              text-align: left; }
  .to-outs { flex: 0 0 auto; }

  .rtn { height: 30px; margin: 4px 0 4px 27px; }
  .rtn-line { border-top: 0; border-top-left-radius: 0; }
  .rtn-up { display: none; }
  .rtn-head { left: -6px; bottom: -2px; }
  .rtn-cap { left: 14px; bottom: 6px; }

  .nbody { display: grid; grid-template-columns: 56px 1fr; gap: 12px;
           text-align: left; align-items: center; }
  .sk { max-width: 56px; }
  .nbody b, .node-sub { grid-column: 2; }
  .nbody b { margin-top: 0; }

  .outs { grid-template-columns: 1fr; margin-left: 0; padding: 16px 10px 10px; }
  .out .nbody { display: flex; }

    .tip { position: relative; top: auto; left: auto;
         width: auto; max-width: none; transform: none;
         margin: 10px 0 4px; display: none; opacity: 1; visibility: visible; }
    .node:hover .tip, .out:hover .tip { display: none; }
  .ntoggle:checked ~ .tip { display: block; }
}

/* Compact dimensions, preserving the original icons and connections. */
.flow{margin:0;padding:22px 24px 20px;border-radius:var(--radius)}
.flow .nbody{font-family:var(--sans);color:var(--ink);border:0;background:transparent;width:100%}
.flow .node b{font-size:14px;font-weight:600;line-height:1.4;margin-top:2px}
.flow .node-sub{font-size:12px;line-height:1.45}
.flow .ours-cap,.flow .outs-cap,.flow .rtn-cap,.flow .link-cap{font-size:12px}
.flow .sk{max-width:82px}
.flow .tier-1{display:grid;grid-template-columns:155px minmax(110px,1fr) minmax(0,3.7fr)}
.flow .ours{padding:15px 12px 12px;gap:4px}
.flow .ours .link{min-width:28px}.flow .link{min-width:34px}.flow .tier-1>.link{margin-top:13px}
.flow .tier-2{display:grid;grid-template-columns:190px 90px minmax(0,1fr)}
.flow .outs{grid-template-columns:repeat(2,minmax(0,1fr));padding:16px 12px 12px;gap:7px}
.flow .out .nbody{border:1px solid var(--line);background:var(--surface);font-size:14px;min-height:43px}
.flow .out .nbody:hover{border-color:var(--green);background:var(--ok-soft)}
.flow .rtn{height:36px;margin-top:4px;margin-bottom:6px}.flow .node.chat{width:100%}
.flow .tip[hidden]{display:none!important}
.flow .node:has(.nbody:focus-visible){outline:2px solid var(--green);outline-offset:2px}
.flow .out .nbody:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.flow .node .nbody:focus-visible{outline:0}.flow *{animation:none}
@media(max-width:1050px) and (min-width:821px){
.flow{padding:22px 16px 18px}.flow .tier-1{grid-template-columns:130px minmax(85px,1fr) minmax(0,4fr)}
.flow .ours .link{min-width:15px}.flow .node b{font-size:13px}.flow .tier-2{grid-template-columns:165px 65px minmax(0,1fr)}
}
@media(max-width:820px){
.flow{padding:17px 14px}.flow .tier-1,.flow .tier-2{display:flex}
.flow .nbody{display:grid;grid-template-columns:46px 1fr;gap:0 14px;padding:7px 8px;text-align:left}
.flow .sk{max-width:46px;grid-row:1/3}.flow .nbody b{font-size:14px;margin:0}.flow .node-sub{margin:3px 0 0}
.flow .ours{padding:15px 8px 8px;gap:0}.flow .link{height:22px;margin-left:31px;padding-top:0;min-height:22px}
.flow .tier-1>.link{margin-top:0}.flow .rtn{height:23px;margin:2px 0 3px 31px}.flow .rtn-cap{bottom:4px}
.flow .node.chat{align-self:stretch}.flow .outs{grid-template-columns:repeat(2,minmax(0,1fr))}
.flow .out .nbody{display:flex}.flow .link-cap{white-space:normal}
.flow .ours-cap,.flow .outs-cap{font-size:12px}.flow .node:hover{background:transparent;border-color:transparent}
}
@media(max-width:480px){.flow .outs{grid-template-columns:1fr}.flow .node-sub{font-size:12px}.flow .rtn-cap,.flow .link-cap{font-size:12px}.flow .node b{font-size:14px}.flow .nbody{gap:0 10px}}
.flow .tier-1>.link .link-cap{line-height:1.5;padding-inline:4px}
@media(min-width:821px){.flow .tier-1{grid-template-columns:145px minmax(160px,1fr) minmax(0,3.7fr)}}
@media(max-width:820px){.flow .tier-1>.link{height:72px;min-height:72px}.flow .tier-1>.link .link-cap{right:0}}