.figure figcaption{padding:16px 18px;color:#565851;font-size:13px;border-top:1px solid var(--line)}.figure figcaption strong{color:var(--ink)}.code{overflow:auto;padding:19px;border-radius:16px;background:#171817;color:#f4f2ec;font-size:13px;line-height:1.62}.join-demo{padding:24px;background:#f7f7f4;border:1px solid var(--line);border-radius:21px}.controls{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}.controls button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 13px;cursor:pointer}.controls button:hover,.controls button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}.nodes{display:flex;flex-wrap:wrap;gap:10px;min-height:66px;align-items:center}.node{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font-weight:750;border:2px solid transparent;transition:transform .35s ease,background .35s ease,opacity .35s ease}.node.enter{background:#dcecf7;border-color:#5b91b8}.node.update{background:#f2dfd6;border-color:#d77957}.node.exit{background:#ecebe7;border-color:#a6a59e;opacity:.42;text-decoration:line-through}.legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:15px;font-size:12px;color:var(--muted)}