body{margin:0;overflow:hidden}.toolbar-wrapper{z-index:100;pointer-events:none;align-items:center;display:flex;position:absolute;top:50%;left:20px;transform:translateY(-50%)}.toolbar{pointer-events:auto;background-color:#fff;border:1px solid #e2e8f0;border-radius:12px;flex-direction:column;gap:8px;padding:8px;display:flex;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.tool-btn{cursor:pointer;background-color:#0000;border:none;border-radius:8px;justify-content:center;align-items:center;width:40px;height:40px;font-size:20px;transition:all .2s;display:flex}.tool-btn:hover{background-color:#f1f5f9}.tool-btn.active{color:#3b82f6;background-color:#eff6ff;box-shadow:inset 0 0 0 1px #3b82f6}.tool-settings-panel{pointer-events:auto;background-color:#fff;border:1px solid #e2e8f0;border-radius:12px;align-items:center;gap:12px;margin-left:16px;padding:12px;animation:.2s cubic-bezier(.16,1,.3,1) forwards popRight;display:flex;box-shadow:0 10px 15px -3px #0000001a}.toolbar-divider-horizontal{background-color:#e2e8f0;border-radius:2px;width:20px;height:2px;margin:4px auto}.settings-row{align-items:center;gap:8px;display:flex}.settings-divider{background-color:#e2e8f0;width:1px;height:24px}.color-dot{cursor:pointer;border:2px solid #0000;border-radius:50%;width:24px;height:24px;padding:0;transition:transform .1s}.color-dot:hover{transform:scale(1.15)}.color-dot.active{border-color:#3b82f6;transform:scale(1.2);box-shadow:0 0 0 2px #3b82f633}.shape-icon{cursor:pointer;background:0 0;border:none;border-radius:6px;width:32px;height:32px;font-size:18px}.shape-icon.active{background-color:#dbeafe}.pen-size-btn{cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;width:32px;height:32px;display:flex}.pen-size-btn:hover{background-color:#f1f5f9}.pen-size-btn.active{background-color:#e2e8f0}@keyframes popRight{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}.note-wrapper{box-sizing:border-box;justify-content:center;align-items:center;width:100%;height:100%;padding:12px;display:flex}.note-text{text-align:center;color:#0f172a;word-break:break-all;overflow-wrap:anywhere;line-break:anywhere;white-space:pre-wrap;-webkit-user-select:none;user-select:none;cursor:default;width:100%;max-width:100%;min-height:1em;margin:0;font-family:inherit;line-height:1.2}.note-input{word-break:break-word;white-space:pre-wrap;background:0 0;border:none;outline:none;font-family:inherit;overflow:hidden}.note-input::selection{color:inherit;background:#3b82f64d}.connection-anchor{z-index:20;cursor:crosshair;background-color:#fff;border:2px solid #94a3b8;border-radius:50%;width:12px;height:12px;transition:transform .1s;position:absolute}.connection-anchor:hover{background-color:#3b82f6;border-color:#3b82f6;transform:scale(1.5)}.anchor-t{top:-6px;left:50%;transform:translate(-50%)}.anchor-r{top:50%;right:-6px;transform:translateY(-50%)}.anchor-b{bottom:-6px;left:50%;transform:translate(-50%)}.anchor-l{top:50%;left:-6px;transform:translateY(-50%)}.anchor-t:hover{transform:translate(-50%)scale(1.5)}.anchor-r:hover{transform:translateY(-50%)scale(1.5)}.anchor-b:hover{transform:translate(-50%)scale(1.5)}.anchor-l:hover{transform:translateY(-50%)scale(1.5)}.test-node:not(.is-path):before{content:"";top:calc(-40px * var(--inv-zoom,1));left:calc(-40px * var(--inv-zoom,1));right:calc(-40px * var(--inv-zoom,1));bottom:calc(-40px * var(--inv-zoom,1));z-index:-1;position:absolute}.connection-anchor:after{content:"";top:calc(-10px * var(--inv-zoom,1));left:calc(-10px * var(--inv-zoom,1));right:calc(-10px * var(--inv-zoom,1));bottom:calc(-10px * var(--inv-zoom,1));cursor:crosshair;border-radius:50%;position:absolute}.connection-anchor{transition:all .2s ease-out}.connection-anchor:hover{box-shadow:0 0 0 calc(6px * var(--inv-zoom,1)) #3b82f64d;background-color:#3b82f6}.property-menu-panel{z-index:200;transform-origin:0 100%;-webkit-user-select:none;user-select:none;background-color:#fff;border:1px solid #e2e8f0;border-radius:10px;align-items:center;gap:12px;padding:8px 12px;animation:.15s ease-out forwards menuFadeIn;display:flex;position:absolute;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.menu-section{align-items:center;gap:8px;display:flex}.menu-divider{background-color:#cbd5e1;width:1px;height:20px}.color-btn{cursor:pointer;border:2px solid #0000;border-radius:50%;width:24px;height:24px;padding:0;transition:all .15s}.color-btn:hover{transform:scale(1.15)}.color-btn.active{border-color:#3b82f6;transform:scale(1.25);box-shadow:0 0 0 2px #3b82f640}.shape-btn{cursor:pointer;background-color:#0000;border:none;border-radius:6px;justify-content:center;align-items:center;width:32px;height:32px;font-size:16px;transition:all .15s;display:flex}.shape-btn:hover{background-color:#f1f5f9}.shape-btn.active{color:#2563eb;background-color:#dbeafe}@keyframes menuFadeIn{0%{opacity:0;transform:translateY(8px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}.viewport{background-color:#f8fafc;width:100vw;height:100vh;position:relative;overflow:hidden}.viewport.grabbing{cursor:grabbing}.viewport.grab{cursor:grab}.viewport.crosshair{cursor:crosshair}.grid-bg{background-image:radial-gradient(circle,#cbd5e1 1px,#0000 1px);background-size:20px 20px;position:absolute;inset:-999999px}.test-node{-webkit-user-select:none;user-select:none;background-color:#fff;border:1px solid #e2e8f0;border-radius:8px;width:200px;height:120px;padding:16px;position:absolute;box-shadow:0 4px 6px -1px #0000001a}.test-node.selected{border:2px solid #3b82f6;outline:2px solid #0000}.node-text{background-color:#fef08a}.node-rect{background-color:#bae6fd;border-radius:4px}.node-circle{background-color:#fbcfe8;border-radius:50%}.resize-handle{z-index:10;background-color:#fff;border:2px solid #3b82f6;border-radius:2px;width:10px;height:10px;position:absolute}.handle-tl{cursor:nwse-resize;top:-6px;left:-6px}.handle-tc{cursor:ns-resize;top:-6px;left:50%;transform:translate(-50%)}.handle-tr{cursor:nesw-resize;top:-6px;right:-6px}.handle-ml{cursor:ew-resize;top:50%;left:-6px;transform:translateY(-50%)}.handle-mr{cursor:ew-resize;top:50%;right:-6px;transform:translateY(-50%)}.handle-bl{cursor:nesw-resize;bottom:-6px;left:-6px}.handle-bc{cursor:ns-resize;bottom:-6px;left:50%;transform:translate(-50%)}.handle-br{cursor:nwse-resize;bottom:-6px;right:-6px}.edge-handle{z-index:5;background-color:#0000;position:absolute}.edge-t{cursor:ns-resize;height:8px;top:-4px;left:4px;right:4px}.edge-b{cursor:ns-resize;height:8px;bottom:-4px;left:4px;right:4px}.edge-l{cursor:ew-resize;width:8px;top:4px;bottom:4px;left:-4px}.edge-r{cursor:ew-resize;width:8px;top:4px;bottom:4px;right:-4px}