.fd{border:1px solid var(--line);background-color:#fafafa;background-image:linear-gradient(90deg,#ececec 1px,#0000 1px),linear-gradient(#ececec 1px,#0000 1px);background-size:22px 22px;border-radius:14px;padding:18px 14px 12px;position:relative}.fd-scroll{overflow-x:auto}.fd svg{width:100%;min-width:620px;height:auto;display:block;overflow:visible}.fd text{font-family:var(--font-mono), ui-monospace, monospace;fill:#111;font-size:12px}.fd-zone rect{fill:#fff9;stroke:#b8b8b8;stroke-width:1.2px;stroke-dasharray:5 5}.fd-zone text{letter-spacing:.06em;fill:#6e6e6e;font-size:10.5px}.fd-node rect,.fd-node polygon{fill:#fff;stroke:#111;stroke-width:1.6px}.fd-key rect{fill:#111}.fd-key text{fill:#fff;font-weight:600}.fd-end rect{fill:#fff;stroke-dasharray:none}.fd-manual rect{fill:#fff1f0;stroke:#ff3b30}.fd-auto rect{fill:#ebfaef;stroke:#1f9d55}.fd-hot polygon{fill:#ffd60a;stroke-width:2px}.fd-hot text{font-weight:600}.fd-edge path{fill:none;stroke:#111;stroke-width:1.6px;stroke-linejoin:round}.fd-edge.is-red path{stroke:#ff3b30;stroke-width:2px;stroke-dasharray:5 4}.fd-edge text{fill:#6e6e6e;paint-order:stroke;stroke:#fafafa;stroke-width:4px;font-size:10.5px}.fd-head{fill:#111}.fd-head-red{fill:#ff3b30}.fd-head-blue{fill:#0a84ff}.fd-edge.is-blue path{stroke:#0a84ff;stroke-width:1.8px}.fd-note{font-size:11.5px}.fd-note.is-red{fill:#ff3b30;font-weight:600}.fd-note.is-green{fill:#1f9d55;font-weight:600}.fd-note.is-muted{fill:#6e6e6e}.fd-mark{fill:none;stroke-linecap:round;stroke-linejoin:round}.fd-mark-red{stroke:#ff3b30;stroke-width:3.5px}.fd-mark-green{stroke:#1f9d55;stroke-width:3.5px}.fd-mark-yellow{stroke:#ffd60a;stroke-width:12px;opacity:.9}.fd-replay{font:500 11.5px var(--font-mono), ui-monospace, monospace;color:#6e6e6e;border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:999px;padding:4px 10px;position:absolute;top:8px;right:10px}.fd-replay:hover{color:#111;border-color:#111}.fd-replay:focus-visible{outline-offset:2px;outline:2px solid #111}.fd-is-armed :is(.fd-node,.fd-zone,.fd-note){opacity:0}.fd-is-armed :is(.fd-edge path,.fd-mark){stroke-dashoffset:1px;stroke-dasharray:1}.fd-is-armed .fd-edge text{opacity:0}.fd-is-armed .fd-edge path{marker-end:none}.fd-is-in .fd-node{animation:.45s cubic-bezier(.34,1.56,.64,1) both fd-pop;animation-delay:calc(var(--s) * var(--step-ms));transform-box:fill-box;transform-origin:50%}.fd-is-in :is(.fd-zone,.fd-note,.fd-edge text){animation:.4s both fd-fade;animation-delay:calc(var(--s) * var(--step-ms))}.fd-is-in .fd-edge text{animation-delay:calc(var(--s) * var(--step-ms) + .2s)}.fd-is-in :is(.fd-edge path,.fd-mark){stroke-dasharray:1;animation:.5s ease-out both fd-draw;animation-delay:calc(var(--s) * var(--step-ms) - .15s)}.fd-is-in .fd-edge.is-red path{animation-name:fd-draw}.fd-is-in .fd-mark{animation-duration:.7s;animation-delay:calc(var(--s) * var(--step-ms) + .1s)}@keyframes fd-pop{0%{opacity:0;transform:scale(.7)}}@keyframes fd-fade{0%{opacity:0}}@keyframes fd-draw{0%{stroke-dashoffset:1px}to{stroke-dashoffset:0}}.fd-is-in .fd-edge.is-red path{animation:.5s ease-out both fd-draw-red;animation-delay:calc(var(--s) * var(--step-ms) - .15s)}@keyframes fd-draw-red{0%{stroke-dasharray:1;stroke-dashoffset:1px}99%{stroke-dasharray:1;stroke-dashoffset:0}to{stroke-dasharray:5 4;stroke-dashoffset:0}}@media (max-width:640px){.fd{padding:40px 8px 12px}}