.flow *,.flow *:before,.flow *:after{box-sizing:border-box}.flow{--hi: #cfcfcf;max-width:640px;margin:2.4em auto 0;text-align:center;font-size:13px;line-height:1.5;white-space:normal;word-break:normal}.flow .label,.flow .note{color:var(--dim)}.flow .value{color:var(--hi);white-space:pre-wrap;word-break:break-all}.flow .browser{position:relative;border:1px dashed var(--dim);border-radius:6px;padding:2.2em 10px 0}.flow .edge{position:absolute;top:-.8em;left:12px;padding:0 6px;background:var(--bg);color:var(--dim)}.flow .cols{display:grid;grid-template-columns:1fr 1fr}.flow .col{display:flex;flex-direction:column;align-items:center;min-width:0;padding:0 6px}.flow .node{display:flex;flex-direction:column;align-items:center;gap:2px;max-width:100%;padding:.5em .6em}.flow .node.input{position:relative;border:1.5px solid var(--hi);border-radius:6px;width:100%;padding:.7em .8em}.flow .entry{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;background:transparent;color:transparent;caret-color:transparent;font-size:16px;cursor:text}.flow .caret{display:inline-block;width:.275em;height:1.1em;margin-top:-1.1em;background:var(--hi);transform:translateY(.2em);animation:caret 2.1s ease-in-out infinite}@keyframes caret{0%,to{opacity:1}50%{opacity:.08}}.flow .node.input .label{color:var(--fg);letter-spacing:.08em}.flow .node.input .value{font-size:15px}.flow .node.input .tip{color:var(--fg)}.flow .tip button{position:relative;z-index:1;color:inherit;font:inherit;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}.flow .node.made{border:1px dashed var(--dim);border-radius:6px}.flow .node.tag{padding-top:0}.flow .node.input .value,.flow .node.pad .value{word-break:normal;overflow-wrap:anywhere}.flow .glyph{width:15px;height:22px;margin:6px 0;overflow:visible}.flow .glyph path,.flow .merge path{fill:none;stroke:var(--hi);stroke-width:1.5;stroke-linecap:round}.flow .stem{width:1.5px;height:24px;background:var(--hi);flex:none;margin:0 auto;transform-origin:top}.flow .stem.fill{flex:1 0 24px}.flow .merge{display:block;width:100%;height:40px;overflow:visible}.flow .merge.split{height:96px}.flow .bar{display:flex;width:min(100%,520px);margin:6px 0;border:1.5px solid var(--hi);border-radius:6px;overflow:hidden}.flow .seg{display:flex;flex-direction:column;min-width:2.4em;padding:.3em 0;color:var(--hi)}.flow .seg+.seg{border-left:1.5px solid var(--hi)}.flow .cross{display:grid;grid-template-columns:1fr 1.5px 1fr;min-height:72px}.flow .cross .stem{grid-column:2;height:auto}.flow .cross .note{grid-column:3;align-self:center;text-align:left;padding:.8em 0 .8em 12px;color:var(--fg)}.flow .node.sent{position:relative;width:100%;border:1.5px solid var(--hi);border-radius:6px;padding:1.6em .8em .7em}.flow .node.sent .value{word-break:normal;overflow-wrap:anywhere}.flow .plate{width:92px;height:368px;margin:6px 0;border:1.5px solid var(--hi);border-radius:6px;display:flex;flex-direction:column;justify-content:center;color:var(--hi);font-size:12px;line-height:1.45;letter-spacing:.12em}.flow .film{display:block;width:92px;height:368px;margin:6px 0;object-fit:cover;background:var(--bg);border:1.5px solid var(--hi);border-radius:6px}.flow .film.spin{width:160px;height:480px;object-fit:contain;border:none;border-radius:0}@media (max-width: 480px){.flow .browser{padding-left:4px;padding-right:4px}.flow .col{padding:0 3px}.flow .node{padding-left:.2em;padding-right:.2em}.flow .node.input{padding:.6em .4em}}.flow.draw .node,.flow.draw .cross .note{opacity:0;transition:opacity .6s ease}.flow.draw .stem{transform:scaleY(0);transition:transform .35s linear}.flow.draw .merge{clip-path:inset(0 -2px 100% -2px);transition:clip-path .4s linear}.flow.draw .on.node,.flow.draw .on+.note{opacity:1}.flow.draw .on.stem{transform:none}.flow.draw .on.merge{clip-path:inset(-2px)}.flow.enter .browser{animation:flow-in 1.4s ease both}@keyframes flow-in{0%{opacity:0}}.flow.draw .node.input{transition-duration:1.2s}.flow.draw .cross .stem{transition:transform 1.4s ease-in-out}.flow.draw .cross .note{transition:opacity 1s ease .9s}.flow.draw .node.sent{transition-duration:1s}.flow.draw .merge.split{transition-duration:.6s}@property --t{syntax: "<number>"; inherits: true; initial-value: 0;}.flow.draw .on .plate{animation:engrave 6s linear .6s infinite both}@keyframes engrave{0%{--t: 0}to{--t: 6000}}.flow.draw .plate span{opacity:min(clamp(0,(var(--t) - var(--i) * 10) / 120,1),clamp(0,(5000 - var(--t)) / 1000,1))}@media (prefers-reduced-motion: reduce){.flow.draw .node,.flow.draw .cross .note,.flow.draw .plate span{opacity:1;transition:none}.flow.draw .plate,.flow .caret,.flow.enter .browser{animation:none}.flow.draw .stem{transform:none;transition:none}.flow.draw .merge{clip-path:none;transition:none}}