.rf-pro-example[data-example=copy-paste]{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}.rf-pro-example[data-example=copy-paste],.rf-pro-example[data-example=copy-paste],.rf-pro-example[data-example=copy-paste]{height:100%;margin:0}@media (prefers-color-scheme:dark){.rf-pro-example[data-example=copy-paste],.rf-pro-example[data-example=copy-paste]{background-color:#101012}}
.rf-pro-example[data-example=selection-grouping]{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}.rf-pro-example[data-example=selection-grouping],.rf-pro-example[data-example=selection-grouping],.rf-pro-example[data-example=selection-grouping]{height:100%;margin:0}@media (prefers-color-scheme:dark){.rf-pro-example[data-example=selection-grouping],.rf-pro-example[data-example=selection-grouping]{background-color:#101012}}
.rf-pro-example[data-example=parent-child-relation]{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}.rf-pro-example[data-example=parent-child-relation],.rf-pro-example[data-example=parent-child-relation],.rf-pro-example[data-example=parent-child-relation]{height:100%;margin:0}.rf-pro-example[data-example=parent-child-relation] .react-flow__node-group.active{border:3px solid red}@media (prefers-color-scheme:dark){.rf-pro-example[data-example=parent-child-relation],.rf-pro-example[data-example=parent-child-relation]{background-color:#101012}}
.rf-pro-example[data-example=expand-collapse]{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}.rf-pro-example[data-example=expand-collapse],.rf-pro-example[data-example=expand-collapse],.rf-pro-example[data-example=expand-collapse]{height:100%;margin:0}.rf-pro-example[data-example=expand-collapse] .react-flow__node{width:120px}.rf-pro-example[data-example=expand-collapse] .react-flow__handle{visibility:hidden}.rf-pro-example[data-example=expand-collapse] .react-flow__node button{text-align:center;width:90px;color:var(--xy-edge-label-color-default);background-color:color-mix(in srgb, var(--color-hover-bg) 55%, transparent);cursor:pointer;border:none;border-radius:6px;font-size:9px;position:absolute;bottom:-20px;left:50%;transform:translate(-50%)}.rf-pro-example[data-example=expand-collapse] .react-flow__node button:hover{color:var(--xy-theme-edge-hover)}@media (prefers-color-scheme:dark){.rf-pro-example[data-example=expand-collapse],.rf-pro-example[data-example=expand-collapse]{background-color:#101012}}
.rf-pro-example[data-example=auto-layout]{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif}.rf-pro-example[data-example=auto-layout],.rf-pro-example[data-example=auto-layout],.rf-pro-example[data-example=auto-layout]{height:100%;margin:0}@media (prefers-color-scheme:dark){.rf-pro-example[data-example=auto-layout],.rf-pro-example[data-example=auto-layout]{background-color:#101012}}
.rf-pro-example[data-example=force-layout]{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}.rf-pro-example[data-example=force-layout],.rf-pro-example[data-example=force-layout],.rf-pro-example[data-example=force-layout]{height:100%;margin:0}.rf-pro-example[data-example=force-layout] .react-flow__node{width:30px;height:30px}.rf-pro-example[data-example=force-layout] .react-flow__handle{opacity:0;pointer-events:none;top:50%;left:50%;transform:translate(-50%,-50%)}.rf-pro-example[data-example=force-layout] .panel-description{color:#1a1a1a}.rf-pro-example[data-example=force-layout] .react-flow.dark .panel-description{color:#e6e7ea}@media (prefers-color-scheme:dark){.rf-pro-example[data-example=force-layout],.rf-pro-example[data-example=force-layout]{background-color:#101012}}
.rf-pro-example[data-example=dynamic-layouting]{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}.rf-pro-example[data-example=dynamic-layouting],.rf-pro-example[data-example=dynamic-layouting],.rf-pro-example[data-example=dynamic-layouting]{height:100%;margin:0}.rf-pro-example[data-example=dynamic-layouting] .react-flow__handle{visibility:hidden}.rf-pro-example[data-example=dynamic-layouting] .react-flow__node{width:160px;height:40px;padding:0}.rf-pro-example[data-example=dynamic-layouting] .react-flow__node-placeholder{color:#bbb;border:1px dashed #bbb}.rf-pro-example[data-example=dynamic-layouting] .react-flow__node-placeholder:hover{color:#bbb;border:1px dashed #bbb;box-shadow:1px 2px 4px #0000001a}.rf-pro-example[data-example=dynamic-layouting] .react-flow__node>div{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.rf-pro-example[data-example=dynamic-layouting] .react-flow__edge-placeholder{stroke-dasharray:3 3;stroke:#bbb;pointer-events:none}.rf-pro-example[data-example=dynamic-layouting] .edge-button{pointer-events:all;cursor:pointer;color:#777;background:#fff;border:1px solid #eee;border-radius:4px;position:absolute}.rf-pro-example[data-example=dynamic-layouting] .edge-button:hover{box-shadow:1px 2px 4px #0000001a}@media (prefers-color-scheme:dark){.rf-pro-example[data-example=dynamic-layouting],.rf-pro-example[data-example=dynamic-layouting]{background-color:#101012}}
.rf-pro-example[data-example=freehand-draw]{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}.rf-pro-example[data-example=freehand-draw],.rf-pro-example[data-example=freehand-draw],.rf-pro-example[data-example=freehand-draw]{height:100%;margin:0}.rf-pro-example[data-example=freehand-draw] .react-flow__node-freehand path,.rf-pro-example[data-example=freehand-draw] .freehand-overlay path{fill:currentColor}.rf-pro-example[data-example=freehand-draw] .react-flow__node-freehand{box-shadow:none;background:0 0;border:none;padding:0;overflow:visible;pointer-events:none!important}.rf-pro-example[data-example=freehand-draw] .react-flow__node-freehand.selectable:focus,.rf-pro-example[data-example=freehand-draw] .react-flow__node-freehand.selectable:focus:active,.rf-pro-example[data-example=freehand-draw] .react-flow__node-freehand.selectable:hover,.rf-pro-example[data-example=freehand-draw] .react-flow__node-freehand.draggable:hover{box-shadow:none;border:none}.rf-pro-example[data-example=freehand-draw] .freehand-overlay{z-index:4;transform-origin:0 0;cursor:crosshair;touch-action:none;pointer-events:auto;width:100%;height:100%;color:var(--xy-node-color,var(--xy-node-color-default));position:absolute;top:0;left:0}.rf-pro-example[data-example=freehand-draw] .freehand-overlay svg{width:100%;height:100%}.rf-pro-example[data-example=freehand-draw] .freehand-drawing{cursor:crosshair}.rf-pro-example[data-example=freehand-draw] .react-flow__resize-control{pointer-events:all}@media (prefers-color-scheme:dark){.rf-pro-example[data-example=freehand-draw],.rf-pro-example[data-example=freehand-draw]{background-color:#101012}}.rf-pro-example[data-example=freehand-draw] .react-flow{--xy-theme-selected:#f57dbd;--xy-theme-hover:#c5c5c5;--xy-theme-edge-hover:black;--xy-theme-color-focus:#e8e8e8;--xy-node-border-default:1px solid #ededed;--xy-node-boxshadow-default:0px 3.54px 4.55px 0px #00000005, 0px 3.54px 4.55px 0px #0000000d, 0px .51px 1.01px 0px #0000001a;--xy-node-border-radius-default:8px;--xy-handle-background-color-default:#fff;--xy-handle-border-color-default:#aaa;--xy-edge-label-color-default:#505050}.rf-pro-example[data-example=freehand-draw] .react-flow.dark{--xy-background-color:#101012;--xy-node-background-color-default:#1a1b1e;--xy-node-border-default:1px solid #303238;--xy-handle-background-color-default:#141519;--xy-handle-border-color-default:#5a5d66;--xy-edge-label-color-default:#e6e7ea;--xy-theme-hover:#7a7d86;--xy-theme-edge-hover:#f3f4f6;--xy-theme-panel-bg:#141519;--xy-theme-panel-text:#f3f4f6;--xy-theme-resize-handle-bg:#141519;--xy-theme-focus-border:#5f6470;--xy-theme-muted-bg:#24262c;--xy-theme-subtle-border:#3f434c;--xy-node-boxshadow-default:0px 6px 18px 0px #00000059, 0px 2px 6px 0px #0000004d, 0px 1px 2px 0px #00000059;--xy-theme-color-focus:#4b4e57;--color-background:#1a1b1e;--color-hover-bg:#24262c;--color-disabled:#8b9099}.rf-pro-example[data-example=freehand-draw] .xy-theme__button-group{align-items:center;display:flex}.rf-pro-example[data-example=freehand-draw] .xy-theme__button-group .xy-theme__button:first-child{border-radius:100px 0 0 100px}.rf-pro-example[data-example=freehand-draw] .xy-theme__button-group .xy-theme__button:last-child{border-radius:0 100px 100px 0;margin:0}.rf-pro-example[data-example=freehand-draw] .react-flow__node{box-shadow:var(--xy-node-boxshadow-default);border-radius:var(--xy-node-border-radius-default);background-color:var(--xy-node-background-color-default);text-align:center;border:var(--xy-node-border-default);color:var(--xy-node-color,var(--xy-node-color-default));flex-direction:column;justify-content:center;align-items:center;padding:10px;font-size:12px;display:flex}.rf-pro-example[data-example=freehand-draw] .react-flow__node.selectable:focus{box-shadow:0px 0px 0px 4px var(--xy-theme-color-focus);border-color:#d9d9d9}.rf-pro-example[data-example=freehand-draw] .react-flow__node.selectable:focus:active{box-shadow:var(--xy-node-boxshadow-default)}.rf-pro-example[data-example=freehand-draw] .react-flow__node.selectable:hover,.rf-pro-example[data-example=freehand-draw] .react-flow__node.draggable:hover{border-color:var(--xy-theme-hover)}.rf-pro-example[data-example=freehand-draw] .react-flow__node.selectable.selected{border-color:var(--xy-theme-selected);box-shadow:var(--xy-node-boxshadow-default)}.rf-pro-example[data-example=freehand-draw] .react-flow__node-group{background-color:#cfb6ff66;border-color:#9e86ed}.rf-pro-example[data-example=freehand-draw] .react-flow__edge.selectable:hover .react-flow__edge-path,.rf-pro-example[data-example=freehand-draw] .react-flow__edge.selectable.selected .react-flow__edge-path{stroke:var(--xy-theme-edge-hover)}.rf-pro-example[data-example=freehand-draw] .react-flow__handle{background-color:var(--xy-handle-background-color-default)}.rf-pro-example[data-example=freehand-draw] .react-flow__handle.connectionindicator:hover{pointer-events:all;border-color:var(--xy-theme-edge-hover);background-color:#fff}.rf-pro-example[data-example=freehand-draw] .react-flow__handle.connectionindicator:focus,.rf-pro-example[data-example=freehand-draw] .react-flow__handle.connectingfrom,.rf-pro-example[data-example=freehand-draw] .react-flow__handle.connectingto{border-color:var(--xy-theme-edge-hover)}.rf-pro-example[data-example=freehand-draw] .react-flow__node-resizer{border:none;border-radius:0}.rf-pro-example[data-example=freehand-draw] .react-flow__resize-control.handle{background-color:#fff;border-color:#9e86ed;border-radius:0;width:5px;height:5px}.rf-pro-example[data-example=freehand-draw]{--color-primary:#ff0073;--color-background:#fefefe;--color-hover-bg:#f6f6f6;--color-disabled:#76797e}.rf-pro-example[data-example=freehand-draw] .xy-theme__button{border:1px solid var(--color-primary);background-color:var(--color-background);height:2.5rem;color:var(--color-primary);box-shadow:var(--xy-node-boxshadow-default);border-radius:100px;justify-content:center;align-items:center;padding:0 1rem;transition:background-color .2s,border-color .2s;display:inline-flex}.rf-pro-example[data-example=freehand-draw] .xy-theme__button.active{background-color:var(--color-primary);color:#fff;border-color:var(--color-primary)}.rf-pro-example[data-example=freehand-draw] .xy-theme__button.active:hover,.rf-pro-example[data-example=freehand-draw] .xy-theme__button.active:active{background-color:var(--color-primary);opacity:.9}.rf-pro-example[data-example=freehand-draw] .xy-theme__button:hover{background-color:var(--xy-controls-button-background-color-hover-default)}.rf-pro-example[data-example=freehand-draw] .xy-theme__button:active{background-color:var(--color-hover-bg)}.rf-pro-example[data-example=freehand-draw] .xy-theme__button:disabled{color:var(--color-disabled);opacity:.8;cursor:not-allowed;border:1px solid var(--color-disabled)}.rf-pro-example[data-example=freehand-draw] .xy-theme__button>span{margin-right:.2rem}.rf-pro-example[data-example=freehand-draw] .xy-theme__button+.xy-theme__button{margin-left:.3rem}.rf-pro-example[data-example=freehand-draw] .xy-theme__input{border:1px solid var(--color-primary);background-color:var(--color-background);color:inherit;border-radius:7px;padding:.5rem .75rem;font-size:1rem;transition:background-color .2s,border-color .2s}.rf-pro-example[data-example=freehand-draw] .xy-theme__input:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 2px #ff00734d}.rf-pro-example[data-example=freehand-draw] .xy-theme__checkbox{appearance:none;border:2px solid var(--color-primary);background-color:var(--color-background);cursor:pointer;vertical-align:middle;border-radius:7px;width:1.25rem;height:1.25rem;margin-right:.5rem;transition:background-color .2s,border-color .2s;display:inline-block}.rf-pro-example[data-example=freehand-draw] .xy-theme__checkbox:checked{background-color:var(--color-primary);border-color:var(--color-primary)}.rf-pro-example[data-example=freehand-draw] .xy-theme__checkbox:focus{outline:none;box-shadow:0 0 0 2px #ff00734d}.rf-pro-example[data-example=freehand-draw] .xy-theme__select{border:1px solid var(--color-primary);background-color:var(--color-background);color:inherit;box-shadow:var(--xy-node-boxshadow-default);border-radius:50px;margin-right:.5rem;padding:.5rem .75rem;font-size:1rem;transition:background-color .2s,border-color .2s}.rf-pro-example[data-example=freehand-draw] .xy-theme__select:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 2px #ff00734d}.rf-pro-example[data-example=freehand-draw] .xy-theme__label{margin-top:10px;margin-bottom:3px;display:inline-block}