.color-swatch{width:28px;height:28px;border-radius:50%;outline:none;box-shadow:none;border:1px solid var(--panel-background);cursor:pointer}.color-swatch.active{outline:2px solid var(--text)}.shape-swatch{width:28px;height:28px;background:transparent;border:none;cursor:pointer;padding:4px;border-radius:4px;display:flex;align-items:center;justify-content:center}.shape-swatch:hover{background-color:rgba(0,0,0,.05)}.shape-swatch.active{background-color:rgba(0,0,0,.1)}.react-flow__node-toolbar{background-color:#ffffff;box-shadow:0 4px 6px -1px rgb(0 0 0/.1),0 2px 4px -2px rgb(0 0 0/.1);border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:8px;border:1px solid #e2e8f0}.toolbar-row{display:flex;gap:8px;flex-wrap:wrap;max-width:240px}.shape-swatch__svg{overflow:visible}.color-swatch--dynamic{background-color:var(--swatch-color)}.react-flow{--xy-background-color:#ffffff;--xy-theme-primary:#4f46e5;--xy-theme-primary-light:#818cf8;--xy-theme-selected:#6366f1;--xy-theme-hover:#cbd5e1;--xy-theme-edge-hover:#4f46e5;--xy-theme-color-focus:#e0e7ff;--xy-theme-border:#e2e8f0;--xy-theme-shadow:rgba(0,0,0,0.04);--xy-node-border-default:1px solid #e2e8f0;--xy-node-boxshadow-default:0 2px 3px 0 rgba(0,0,0,0.08),0 2px 2px 0 rgba(0,0,0,0.04);--xy-node-border-radius-default:8px;--xy-node-background-color-default:#ffffff;--xy-handle-background-color-default:#ffffff;--xy-handle-border-color-default:#94a3b8;--xy-edge-stroke-default:#cbd5e1;--xy-edge-stroke-width-default:2px;--xy-edge-label-color-default:#475569}.react-flow.dark{--xy-background-color:#0f172a;--xy-theme-border:#334155;--xy-theme-hover:#475569;--xy-theme-color-focus:#1e293b;--xy-node-background-color-default:#1e293b;--xy-node-border-default:1px solid #334155;--xy-node-boxshadow-default:0 4px 6px -1px rgba(0,0,0,0.3),0 2px 4px -1px rgba(0,0,0,0.2);--xy-edge-stroke-default:#475569}.react-flow__node{display:flex;justify-content:center;align-items:center;text-align:center;padding:3px;font-size:16px;flex-direction:column}.react-flow__node-base{background-color:#f0f9ff;box-shadow:var(--xy-node-boxshadow-default);border:2px var(--xy-theme-selected);border-radius:var(--xy-node-border-radius-default)}.react-flow__node-annotation,.react-flow__node-shape{padding:0;box-shadow:none}.react-flow__node-group{background-color:rgba(99,102,241,.05);border:2px dashed var(--xy-theme-selected);border-radius:var(--xy-node-border-radius-default)}.react-flow__node-group.active{border:3px solid red}.react-flow__edge-path{stroke:var(--xy-edge-stroke-default);stroke-width:var(--xy-edge-stroke-width-default)}.react-flow__edge.selectable.selected .react-flow__edge-path,.react-flow__edge.selectable:hover .react-flow__edge-path{stroke:var(--xy-theme-edge-hover);stroke-width:2.5px}.react-flow__edge.animated .react-flow__edge-path{stroke-dasharray:5;animation:dashdraw .5s linear infinite}.react-flow__handle{background-color:#29b6f2;border:none;width:10px;height:10px;border-radius:50%;opacity:0}.editable-flow .react-flow__node.selected .react-flow__handle,.editable-flow .react-flow__node:hover .react-flow__handle,.react-flow__handle.connecting,.react-flow__handle.connectingfrom,.react-flow__handle.connectingto,.react-flow__handle.valid{opacity:1}.react-flow__handle.connectionindicator:hover{pointer-events:all;border-color:var(--xy-theme-edge-hover);background-color:var(--xy-theme-primary-light);opacity:1}.react-flow__handle.connectingfrom,.react-flow__handle.connectingto,.react-flow__handle.connectionindicator:focus{border-color:var(--xy-theme-edge-hover);background-color:var(--xy-theme-primary)}.rotatable-node__handle{position:absolute;width:15px;height:15px;background:#3b82f6;left:50%;bottom:-30px;border-radius:100%;transform:translate(-50%,50%);cursor:crosshair;border:2px solid white;box-shadow:0 0 4px rgba(0,0,0,.2);z-index:50}.rotatable-node__handle:after{content:"";display:block;position:absolute;width:2px;height:24px;background:#3b82f6;left:50%;bottom:10px;transform:translateX(-50%);opacity:.5}.rotatable-node__handle:hover{background:#2563eb;transform:translate(-50%,50%) scale(1.5);transition:transform .1s ease}.react-flow__node-resizer{border-radius:0;border:none}.react-flow__node-resizer__line{border-color:#6366f1;border-width:2px}.react-flow__resize-control.handle{background-color:#ffffff;border:2px solid #6366f1;border-radius:4px;width:12px;height:12px}.react-flow__resize-control.line{border-color:#6366f1;border-width:2px}.react-flow__controls{box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);border:1px solid #e2e8f0;border-radius:12px;overflow:hidden}.react-flow__controls-button{background-color:#ffffff;border-bottom:1px solid #e2e8f0;transition:all .2s ease}.react-flow__controls-button:hover{background-color:#f8fafc}.react-flow__controls-button svg{fill:#64748b}.react-flow__controls-button:hover svg{fill:#4f46e5}.react-flow__minimap{background-color:#ffffff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06)}.react-flow__minimap-mask{fill:#6366f1;fill-opacity:.1;stroke:#6366f1;stroke-width:2}.react-flow__minimap-node{fill:#cbd5e1;stroke:#94a3b8;stroke-width:1}.react-flow__background{background-color:var(--xy-background-color)}:root{--color-primary:#ff0073;--color-background:#fefefe;--color-hover-bg:#f6f6f6;--color-disabled:#76797e}.xy-theme__button-group{display:flex;align-items:center;.xy-theme__button:first-child{border-radius:100px 0 0 100px}.xy-theme__button:last-child{border-radius:0 100px 100px 0;margin:0}}.xy-theme__button{display:inline-flex;align-items:center;justify-content:center;height:2.5rem;padding:0 1rem;border-radius:100px;border:1px solid var(--color-primary);background-color:var(--color-background);color:var(--color-primary);transition:background-color .2s ease,border-color .2s ease;box-shadow:var(--xy-node-boxshadow-default);cursor:pointer}.xy-theme__button.active{background-color:var(--color-primary);color:white;border-color:var(--color-primary)}.xy-theme__button.active:active,.xy-theme__button.active:hover{background-color:var(--color-primary);opacity:.9}.xy-theme__button:hover{background-color:var(--xy-controls-button-background-color-hover-default)}.xy-theme__button:active{background-color:var(--color-hover-bg)}.xy-theme__button:disabled{color:var(--color-disabled);opacity:.8;cursor:not-allowed;border:1px solid var(--color-disabled)}.xy-theme__button>span{margin-right:.2rem}.xy-theme__button+.xy-theme__button{margin-left:.3rem}.xy-theme__input{padding:.5rem .75rem;border:1px solid var(--color-primary);border-radius:7px;background-color:var(--color-background);transition:background-color .2s ease,border-color .2s ease;font-size:1rem;color:inherit}.xy-theme__input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px rgba(255,0,115,.3)}.xy-theme__checkbox{-webkit-appearance:none;appearance:none;width:1.25rem;height:1.25rem;border-radius:7px;border:2px solid var(--color-primary);background-color:var(--color-background);transition:background-color .2s ease,border-color .2s ease;cursor:pointer;display:inline-block;vertical-align:middle;margin-right:.5rem}.xy-theme__checkbox:checked{background-color:var(--color-primary);border-color:var(--color-primary)}.xy-theme__checkbox:focus{outline:none;box-shadow:0 0 0 2px rgba(255,0,115,.3)}.xy-theme__select{padding:.5rem .75rem;border:1px solid var(--color-primary);border-radius:50px;background-color:var(--color-background);transition:background-color .2s ease,border-color .2s ease;font-size:1rem;color:inherit;margin-right:.5rem;box-shadow:var(--xy-node-boxshadow-default)}.xy-theme__select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px rgba(255,0,115,.3)}.xy-theme__label{margin-top:10px;margin-bottom:3px;display:inline-block}.dndflow{flex-grow:1;height:100%}.dndflow aside{border-right:1px solid #eee;padding:15px 10px;font-size:12px;background:#fcfcfc}.dndflow aside .description{margin-bottom:10px}.dndflow .selectall{margin-top:10px}@media screen and (min-width:768px){.dndflow{flex-direction:row}.dndflow aside{width:20%;max-width:250px}}.tool-overlay{pointer-events:auto;position:absolute;top:0;left:0;z-index:4;height:100%;width:100%;transform-origin:top left;cursor:copy;touch-action:none}.rectangle-preview{position:absolute;z-index:10}.lasso-controls{display:flex;align-items:center;gap:10px}.lasso-controls button{width:150px}.lasso-controls label{display:flex;align-items:center;justify-content:center;line-height:1}.react-flow__node-freehand{background:transparent;overflow:visible;padding:0;pointer-events:none!important}.react-flow__node-freehand,.react-flow__node-freehand.draggable:hover,.react-flow__node-freehand.selectable:focus,.react-flow__node-freehand.selectable:focus:active,.react-flow__node-freehand.selectable:hover{border:none;box-shadow:none}.freehand-overlay{position:absolute;z-index:4;transform-origin:top left;cursor:crosshair;touch-action:none;pointer-events:auto}.freehand-overlay,.freehand-overlay svg{height:100%;width:100%}.freehand-drawing{cursor:crosshair}.react-flow__resize-control{pointer-events:all}.preview{display:flex;justify-content:center;align-items:center;height:100%;flex-direction:column}.preview img{width:300px;height:300px;border:1px solid #ccc}.image-container{position:relative;width:300px;height:300px}.preview button{margin-top:1rem}.image-status{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-weight:700;width:280px;text-align:center}.mobile-canvas-wrapper{display:flex;justify-content:center;align-items:center;background:linear-gradient(135deg,#f1f5f9,#e2e8f0);padding:24px}.mobile-phone-frame{position:relative;border-radius:40px;background:#1a1a1a;padding:12px;box-shadow:0 0 0 2px #333,0 25px 50px -12px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.1)}.mobile-phone-frame:before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:100px;height:28px;background:#000;border-radius:20px;z-index:10}.mobile-phone-frame:after{content:"";position:absolute;inset:12px;border-radius:32px;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.3);z-index:5}.mobile-phone-frame .react-flow{border-radius:32px;overflow:hidden}.mobile-phone-frame>div:after{content:"";position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);width:134px;height:5px;background:#fff;border-radius:3px;z-index:10}.dark .mobile-canvas-wrapper,.react-flow.dark~.mobile-canvas-wrapper{background:linear-gradient(135deg,#1e293b,#0f172a)}.dark .mobile-phone-frame{background:#0a0a0a;box-shadow:0 0 0 2px #222,0 25px 50px -12px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.05)}.note-node__body{background-color:var(--note-color,#fef3c7)}.resource-node__body{height:var(--resource-height,80px)}@keyframes slideProgress{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.rectangle-node__toolbar{display:flex;gap:.25rem;border-radius:.5rem;border:1px solid #e5e5e5;background-color:white;padding:.5rem;box-shadow:0 10px 15px -3px rgb(0 0 0/.1),0 4px 6px -4px rgb(0 0 0/.1)}.rectangle-node__color-btn{height:1.5rem;width:1.5rem;border-radius:9999px;border:none;cursor:pointer;transition:transform .15s ease-in-out;background-color:var(--rect-swatch)}.rectangle-node__color-btn:hover{transform:scale(1.1)}.rectangle-node__outer{height:100%;width:100%}.rectangle-node__inner,.rectangle-node__outer{display:flex;align-items:center;justify-content:center}.rectangle-node__inner{position:relative;height:calc(100% - 5px);width:calc(100% - 5px);background-color:var(--rect-color,white);border-radius:.375rem;box-shadow:0 1px 2px 0 rgb(0 0 0/.05);border:1px solid #e5e5e5}.rectangle-node__inner--selected{outline:2px solid #3b82f6;outline-offset:2px}