.ProseMirror .blog-aio-svg{width:100%;max-width:200px;height:auto;margin:0 auto;display:block}.ProseMirror .blog-aio-svg .aio-edge{fill:none;stroke:#81dba5;stroke-width:1.4px;stroke-linecap:round;stroke-dasharray:90;stroke-dashoffset:90px;animation:.85s forwards aio-draw}.ProseMirror .blog-aio-svg .aio-ring{stroke:#b2e8c5;stroke-width:1.1px}.ProseMirror .blog-aio-svg .aio-spoke-1{animation-delay:.15s}.ProseMirror .blog-aio-svg .aio-spoke-2{animation-delay:.25s}.ProseMirror .blog-aio-svg .aio-spoke-3{animation-delay:.35s}.ProseMirror .blog-aio-svg .aio-spoke-4{animation-delay:.45s}.ProseMirror .blog-aio-svg .aio-spoke-5{animation-delay:.55s}.ProseMirror .blog-aio-svg .aio-spoke-6{animation-delay:.65s}.ProseMirror .blog-aio-svg .aio-ring-1{animation-delay:.55s}.ProseMirror .blog-aio-svg .aio-ring-2{animation-delay:.62s}.ProseMirror .blog-aio-svg .aio-ring-3{animation-delay:.69s}.ProseMirror .blog-aio-svg .aio-ring-4{animation-delay:.76s}.ProseMirror .blog-aio-svg .aio-ring-5{animation-delay:.83s}.ProseMirror .blog-aio-svg .aio-ring-6{animation-delay:.9s}.ProseMirror .blog-aio-svg .aio-signal{fill:none;stroke:#0eca7b;stroke-width:2px;stroke-linecap:round;stroke-dasharray:3 34;stroke-dashoffset:0;opacity:.95;animation:2.4s linear 1.2s infinite aio-signal}.ProseMirror .blog-aio-svg .aio-signal-2{animation-delay:2s}.ProseMirror .blog-aio-svg .aio-signal-3{animation-delay:2.8s}.ProseMirror .blog-aio-svg .aio-node{fill:#fff;stroke:#0eca7b;stroke-width:1.6px;transform-box:fill-box;transform-origin:50%;opacity:0;animation:.5s forwards aio-node-in}.ProseMirror .blog-aio-svg .aio-node-1{animation-delay:.85s}.ProseMirror .blog-aio-svg .aio-node-2{animation-delay:.92s}.ProseMirror .blog-aio-svg .aio-node-3{animation-delay:.99s}.ProseMirror .blog-aio-svg .aio-node-4{animation-delay:1.06s}.ProseMirror .blog-aio-svg .aio-node-5{animation-delay:1.13s}.ProseMirror .blog-aio-svg .aio-node-6{animation-delay:1.2s}.ProseMirror .blog-aio-svg .aio-hub-glow{fill:#0eca7b29;transform-box:fill-box;transform-origin:50%;animation:3s ease-in-out 1.3s infinite aio-hub-glow}.ProseMirror .blog-aio-svg .aio-hub{fill:#0eca7b;transform-box:fill-box;transform-origin:50%;animation:3s ease-in-out 1.3s infinite aio-hub-pulse}.ProseMirror .blog-aio-svg .aio-hub-core{fill:#fff}@keyframes aio-draw{to{stroke-dashoffset:0}}@keyframes aio-node-in{0%{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}@keyframes aio-signal{to{stroke-dashoffset:-37px}}@keyframes aio-hub-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}@keyframes aio-hub-glow{0%,to{opacity:.4;transform:scale(1)}50%{opacity:.8;transform:scale(1.3)}}@media (prefers-reduced-motion:reduce){.ProseMirror .blog-aio-svg *{opacity:1!important;stroke-dashoffset:0!important;animation:none!important;transform:none!important}.ProseMirror .blog-aio-svg .aio-signal{opacity:0!important}}@media (max-width:768px){.ProseMirror table.blog-rtable{width:100%;box-shadow:none;border:none;border-radius:0;margin:1.25rem 0;font-size:.9375rem;display:block;overflow:visible}.ProseMirror table.blog-rtable thead{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.ProseMirror table.blog-rtable tbody{display:block}.ProseMirror table.blog-rtable tr{background:#fff;border:1px solid #e5e7eb;border-radius:.875rem;margin-bottom:1rem;padding:.25rem 1rem .875rem;display:block;box-shadow:0 1px 4px #0000000d}.ProseMirror table.blog-rtable td{text-align:left;padding:.55rem 0 0;display:block;background:0 0!important;border:none!important}.ProseMirror table.blog-rtable tbody tr:nth-child(2n) td{background:0 0!important}.ProseMirror table.blog-rtable td:not(:last-child){padding-bottom:.55rem;border-bottom:1px solid #f3f4f6!important}.ProseMirror table.blog-rtable td:first-child{color:#111827;padding-top:.875rem;font-size:1.0625rem;font-weight:700}.ProseMirror table.blog-rtable td[data-label]:before{content:attr(data-label);text-transform:uppercase;letter-spacing:.05em;color:#00b064;margin-bottom:.15rem;font-size:.6875rem;font-weight:700;display:block}}.ProseMirror .blog-react-svg,.ProseMirror .blog-react-badge-svg{width:100%;max-width:200px;height:auto;margin:0 auto;display:block}.ProseMirror .blog-react-svg .br-orbit,.ProseMirror .blog-react-badge-svg .br-orbit{fill:none;stroke:#61dafb;stroke-width:2px;transform-box:fill-box;transform-origin:50%;animation:10s linear infinite br-spin}.ProseMirror .blog-react-svg .br-orbit-2,.ProseMirror .blog-react-badge-svg .br-orbit-2{stroke-opacity:.75;animation-duration:12s;animation-direction:reverse}.ProseMirror .blog-react-svg .br-orbit-3,.ProseMirror .blog-react-badge-svg .br-orbit-3{stroke-opacity:.55;animation-duration:14s}.ProseMirror .blog-react-svg .br-core-glow{fill:#61dafb;fill-opacity:.12;transform-box:fill-box;transform-origin:50%;animation:3s ease-in-out infinite br-pulse}.ProseMirror .blog-react-svg .br-core,.ProseMirror .blog-react-badge-svg .br-core{fill:#61dafb;transform-box:fill-box;transform-origin:50%;animation:3s ease-in-out infinite br-pulse}.ProseMirror .blog-react-svg .br-core-dot{fill:#fff}.ProseMirror .blog-react-flow-svg{border-radius:.75rem;width:100%;height:auto;display:block}.ProseMirror .blog-react-flow-svg .brf-stage{opacity:1;animation:.55s forwards br-fade-in}.ProseMirror .blog-react-flow-svg .brf-flow{stroke:#61dafb;stroke-width:2px;stroke-linecap:round;stroke-dasharray:6 10;opacity:1;animation:1.2s linear infinite br-march}.ProseMirror .blog-react-flow-svg .brf-particle{fill:#61dafb;opacity:.85;animation:2.4s ease-in-out infinite br-particle}.ProseMirror .blog-react-flow-svg .brf-p1{animation-delay:1s}.ProseMirror .blog-react-flow-svg .brf-p2{animation-delay:1.4s}@keyframes br-spin{to{transform:rotate(360deg)}}@keyframes br-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.85;transform:scale(1.12)}}@keyframes br-fade-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes br-march{to{stroke-dashoffset:-32px}}@keyframes br-draw-flow{0%{opacity:0;stroke-dashoffset:40px}to{opacity:1;stroke-dashoffset:0}}@keyframes br-particle{0%,to{opacity:0;transform:translate(0)}20%,80%{opacity:1}to{opacity:0;transform:translate(36px)}}@media (prefers-reduced-motion:reduce){.ProseMirror .blog-react-svg *,.ProseMirror .blog-react-badge-svg *,.ProseMirror .blog-react-flow-svg *,.ProseMirror .blog-react-tree-svg *,.ProseMirror .blog-vdom-svg *,.ProseMirror .blog-react-cla-svg *{opacity:1!important;stroke-dashoffset:0!important;animation:none!important;transform:none!important}}.ProseMirror .blog-react-tree-svg{width:100%;max-width:220px;height:auto;margin:0 auto;display:block}.ProseMirror .blog-react-tree-svg .brt-node{opacity:0;transform-box:fill-box;transform-origin:50%;animation:.55s forwards brt-pop}.ProseMirror .blog-react-tree-svg .brt-app{animation-delay:.15s}.ProseMirror .blog-react-tree-svg .brt-header{animation-delay:.45s}.ProseMirror .blog-react-tree-svg .brt-main{animation-delay:.55s}.ProseMirror .blog-react-tree-svg .brt-card{animation-delay:.75s}.ProseMirror .blog-react-tree-svg .brt-form{animation-delay:.85s}.ProseMirror .blog-react-tree-svg .brt-footer{animation-delay:1.05s}.ProseMirror .blog-react-tree-svg .brt-edge{stroke-dasharray:40;stroke-dashoffset:40px;animation:.5s forwards brt-draw}.ProseMirror .blog-react-tree-svg .brt-e-root{animation-delay:.35s}.ProseMirror .blog-react-tree-svg .brt-e-split{animation-delay:.4s}.ProseMirror .blog-react-tree-svg .brt-e-h{animation-delay:.48s}.ProseMirror .blog-react-tree-svg .brt-e-m{animation-delay:.52s}.ProseMirror .blog-react-tree-svg .brt-e-m2{animation-delay:.65s}.ProseMirror .blog-react-tree-svg .brt-e-split2{animation-delay:.7s}.ProseMirror .blog-react-tree-svg .brt-e-c{animation-delay:.78s}.ProseMirror .blog-react-tree-svg .brt-e-f{animation-delay:.82s}.ProseMirror .blog-react-tree-svg .brt-e-foot{animation-delay:.95s}.ProseMirror .blog-react-tree-svg .brt-pulse{opacity:0;animation:2.4s ease-in-out 1.1s infinite brt-pulse}@keyframes brt-pop{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}@keyframes brt-draw{to{stroke-dashoffset:0}}@keyframes brt-pulse{0%,to{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.35)}}.ProseMirror .blog-vdom-panel{background:linear-gradient(#fff 0%,#f0fdf4 55%,#fafafa 100%);border:1px solid #e5e7eb;border-radius:1.25rem;margin:2rem 0 2.5rem;padding:1.25rem 1rem 1rem;overflow:hidden;box-shadow:0 4px 28px #0eca7b12}.ProseMirror .blog-vdom-svg{border-radius:.75rem;width:100%;height:auto;display:block}.ProseMirror .blog-vdom-svg .bvd-diff{animation:2s ease-in-out .8s infinite bvd-flash}.ProseMirror .blog-vdom-svg .bvd-dot{animation:2s ease-in-out .8s infinite bvd-dot}.ProseMirror .blog-vdom-svg .bvd-arrow{animation:1.2s linear infinite br-march}@keyframes bvd-flash{0%,to{fill-opacity:.15;stroke-opacity:.6}50%{fill-opacity:.45;stroke-opacity:1}}@keyframes bvd-dot{0%,to{opacity:.5}50%{opacity:1}}.ProseMirror .blog-react-cla-svg{width:100%;max-width:120px;height:auto;margin:0 auto;display:block}.ProseMirror .blog-react-cla-svg .br-cla-ring{animation:4s ease-in-out infinite br-cla-spin}.ProseMirror .blog-react-cla-svg .br-orbit{fill:none;stroke:#61dafb;stroke-width:1.5px;transform-box:fill-box;transform-origin:50%;animation:10s linear infinite br-spin}@keyframes br-cla-spin{0%,to{stroke-dashoffset:30px}50%{stroke-dashoffset:10px}}.ProseMirror .blog-react-flow--mobile{display:none}.ProseMirror .blog-react-flow--desktop{display:block}@media (max-width:639px){.ProseMirror .blog-react-flow--mobile{display:block}.ProseMirror .blog-react-flow--desktop{display:none}.ProseMirror .blog-react-flow--mobile .br-mobile-orbit{transform-box:fill-box;transform-origin:50%;animation:8s linear infinite br-spin}}@media (min-width:900px){.ProseMirror .blog-intro-visual .blog-react-tree-svg{position:sticky;top:7rem}}.ProseMirror .blog-tldr{background:linear-gradient(135deg,#edfaf1 0%,#f0fdf4 100%);border:1px solid #b2e8c5;border-radius:.875rem;margin:1.5rem 0 2rem;padding:1.25rem 1.5rem;box-shadow:0 1px 4px #0eca7b14}.ProseMirror .blog-tldr-label{letter-spacing:.08em;text-transform:uppercase;color:#008d4e;margin:0 0 .5rem;font-size:.6875rem;font-weight:800}.ProseMirror .blog-tldr p:last-child{color:#1f2937;margin-bottom:0;font-size:.9375rem;line-height:1.65}.ProseMirror .blog-code-caption{color:#6b7280;letter-spacing:.02em;margin:-.5rem 0 1.25rem;font-size:.75rem;font-weight:600}.ProseMirror pre+.blog-code-caption{margin-top:-.75rem}