.solid-kitx{width:100%;height:100%;overflow:hidden;position:relative;background-color:var(--bg-color, #F7F9FB);.background-grid{color:var(--dots-color, #cccccc)}.container{transform-origin:0 0;width:100%;height:100%;position:absolute;top:0;left:0;.node{background:var(--node-bg, #FFFFFF);outline-width:var(--node-outline-width, 2px);outline-style:var(--node-outline-style, solid);outline-color:var(--node-outline-color, #ebebeb);position:absolute;color:var(--node-color, black);border-radius:var(--node-radius, 10px);padding:var(--node-padding, 0px);box-shadow:var(--node-shadow, 0 2px 5px rgba(0, 0, 0, .1));font-size:var(--node-font-size, 14px);font-family:var(--node-font-family, sans-serif);display:flex;justify-content:center;align-items:center;&.unfocus :not(.node-edge):not(.node-anchor){cursor:grab!important;& *{pointer-events:none}}.node-edge{--off-v: -7px;position:absolute;z-index:1;display:flex;justify-content:center;align-items:center;cursor:var(--cursor);&:hover{.node-anchor{--opacity: 1}}}.node-anchor{opacity:var(--opacity, 0);background-color:var(--node-bg, #f2f2f2);border:2px solid var(--node-anchor-border, #b0b0b0);width:10px;height:10px;position:absolute;border-radius:100%;transition:opacity .1s;&:hover{cursor:crosshair}}.node-anchor.visible{--opacity: 1}}.node:hover{outline-color:var(--node-outline, #DBDBDB)}.node.selected{outline-color:var(--node-outline, #1a73e8)}.connection{stroke:var(--connection-color, #b1b1b8);stroke-width:var(--connection-width, 2);&:hover{stroke:var(--connection-color, #1a73e8)}}.connection.selected{stroke:var(--connection-outline, #1a73e8)}.connection-preview{stroke:var(--connection-color, #b1b1b8)}.connection-label{color:var(--label-color, black);background-color:var(--bg-color, #F7F9FB);padding-inline:2px}}.kitx-controls{position:absolute;display:flex;flex-direction:var(--flex-direction, column);height:fit-content;gap:1px;z-index:50;background:var(--controls-bg, #e4e4e4);border-radius:.3rem;box-shadow:0 0 4px 1px #0003;overflow:hidden;& button{background:var(--controls-button-bg, #ffffff);border:0;outline:none;cursor:pointer;width:2em;height:2em;display:flex;justify-content:center;align-items:center;&:hover{background-color:var(--node-outline, #DBDBDB)}& svg{color:var(--color, black);width:1.5em;height:1.5em}&.on{background-color:var(--controls-button-bg, #1a73e8);& svg{color:var(--color, white)}}}}@media (max-width: 600px){.node:focus .node-anchor{--opacity: .5}}}.dark .solid-kitx{background-color:var(--bg-color, #121212);background-image:radial-gradient(circle,var(--dots-color, #2e2e2e) var(--bg-vp-zoom),transparent 1px);.background-grid{circle,line{color:var(--dots-color, #303030)}}.container{transform-origin:0 0;width:100%;height:100%;position:absolute;top:0;left:0;.node{background:var(--node-bg, #212121);outline-width:var(--node-outline-width, 2px);outline-style:var(--node-outline-style, solid);outline-color:var(--node-outline-color, #3d3d3d);position:absolute;color:var(--node-color, #ffffff);border-radius:var(--node-radius, 10px);padding:var(--node-padding, 0px);box-shadow:var(--node-shadow, 0 2px 5px rgba(0, 0, 0, .2));font-size:var(--node-font-size, 14px);font-family:var(--node-font-family, sans-serif);cursor:var(--node-cursor, default);display:flex;justify-content:center;align-items:center;.node-edge{--off-v: -7px;position:absolute;z-index:1;display:flex;justify-content:center;align-items:center;&:hover{.node-anchor{--opacity: 1}}}.node-anchor{opacity:var(--opacity, 0);background-color:var(--node-bg, #212121);border:2px solid var(--node-anchor-border, #595858);width:10px;height:10px;position:absolute;border-radius:100%;transition:opacity .1s;&:hover{cursor:crosshair}}}.node:hover{outline-color:var(--node-outline, #595858)}.node.selected{outline-color:var(--node-outline, #4287f5)}.connection{stroke:var(--connection-color, #464647);stroke-width:var(--connection-width, 2);&:hover{stroke:var(--connection-color, #4287f5)}}.connection.selected{stroke:var(--connection-outline, #4287f5)}.connection-preview{stroke:var(--connection-color, #464647)}.connection-label{color:var(--label-color, #ffffff);background-color:var(--bg-color, #121212);padding-inline:2px}}.kitx-controls{position:absolute;bottom:10px;right:10px;display:flex;flex-direction:var(--flex-direction, column);gap:1px;z-index:10;background:var(--controls-bg, #212121);border-radius:.3rem;box-shadow:0 0 4px 1px #0009;overflow:hidden;& button{background:var(--controls-button-bg, #333333);border:0;cursor:pointer;padding:.5em;box-sizing:border-box;width:2.3em;height:2.3em;display:flex;justify-content:center;align-items:center;&:hover{background-color:var(--node-outline, #595858)}& svg{color:var(--color, white);width:1.5em;height:1.5em}&.on{background-color:var(--controls-button-bg, #4287f5);& svg{color:var(--color, white)}}}}}html,body{background-color:#000;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overscroll-behavior-y:none;overflow:hidden;height:100%;width:100%}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}#root{height:100%;width:100%}.connection-preview{--connection-color: #6D4AFF}.node-preview{position:fixed;top:0;left:0;width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;font-size:2em;font-weight:600;color:#333;background:#f7f9fbf2;border:2px dashed #ccc;border-radius:16px;box-shadow:0 8px 24px #0000001a;backdrop-filter:blur(4px);z-index:1000;pointer-events:none}.dark .node-preview{background:#1a1c1f;border-color:#555;color:#eee}.node-component :nth-child(1){box-sizing:border-box;overflow:hidden}.node-component *{outline:none;flex-shrink:0}.btn{border-radius:3px;background-color:#ccc;width:fit-content;height:fit-content;border:none}.btn:active{transform:scale(1.1)}.dark .btn{color:#fff;background-color:#2b2b2b}.fields-node{width:100%;box-sizing:border-box;height:100%;padding:12px;display:flex;flex-direction:column;gap:3px}.fields-node>div:first-child{display:flex;justify-content:space-between;align-items:center;overflow:visible;gap:3px;font-size:12px}.fields-node input[type=text]{flex:1;padding:4px 8px;border-radius:4px;border-width:1px;border-style:solid;border-color:transparent;color:#666;font-size:12px;background:transparent}.fields-node input[type=text]:focus{border-color:#ccc;outline:none}.fields-node>div:last-child{display:flex;flex-direction:column;gap:6px;margin-top:8px}.fields-node .field-item{display:flex;align-items:center;gap:8px;padding:6px 8px;background:#00000008;position:relative;border-radius:4px;font-size:12px}.fields-node .field-dot{width:6px;height:6px;border-radius:50%;background:#1a73e8;flex-shrink:0}.fields-node .field-item input[type=text]{flex:1;border:none;background:transparent;font-size:12px;color:#000;outline:none;padding:0}.dark .fields-node input[type=text]{color:#aaa}.dark .fields-node input[type=text]:focus{border-color:#555}.dark .fields-node .field-item{background:#ffffff0d}.dark .fields-node .field-dot{background:#6d9eff}.dark .fields-node .field-item input[type=text]{color:#eee}.function-node{width:100%;box-sizing:border-box;height:100%;padding:12px;display:flex;flex-direction:column;gap:12px}.function-node .section{display:flex;flex-direction:column;gap:6px}.function-node .section-header{font-size:11px;font-weight:600;text-transform:uppercase;color:#888;letter-spacing:.5px;display:flex;justify-content:space-between;align-items:center}.function-node .divider{height:1px;background:#0000001a;margin:4px 0}.function-node .input-item{display:flex;align-items:center;gap:6px;padding:4px 8px;background:#1a73e81a;border-radius:4px}.function-node .input-item .icon{font-size:1em;color:#1a73e8}.function-node .input-item input[type=text]{flex:1;border:none;background:transparent;font-size:12px;color:#000;outline:none;font-family:monospace;text-align:center}.function-node .output-item{display:flex;align-items:center;gap:6px;padding:4px 8px;background:#34a8531a;border-radius:4px}.function-node .output-item .icon{font-size:1em;color:#34a853}.function-node .output-item input[type=text]{flex:1;border:none;background:transparent;font-size:12px;color:#000;outline:none;font-family:monospace;text-align:center}.dark .function-node .section-header{color:#aaa}.dark .function-node .divider{background:#ffffff1a}.dark .function-node .input-item{background:#58a6ff26}.dark .function-node .input-item .icon{color:#6d9eff}.dark .function-node .input-item input[type=text]{color:#eee}.dark .function-node .output-item{background:#57ab5a26}.dark .function-node .output-item .icon{color:#57ab5a}.dark .function-node .output-item input[type=text]{color:#eee}.task-node{width:100%;box-sizing:border-box;height:100%;padding:12px;display:flex;flex-direction:column;gap:10px}.task-node .status-badge{width:100%;align-self:flex-start;padding:4px 10px;border-radius:5px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.task-node .status-badge.completed{background:#34a8531a;color:#34a853}.task-node .status-badge.pending{background:#ea43351a;color:#ea4335}.task-node .task-item{display:flex;gap:10px;align-items:flex-start}.task-node .checkbox{width:20px;height:20px;border-radius:4px;border:2px solid #ccc;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:all .2s ease}.task-node .checkbox.checked{border-color:#34a853;background:#34a853}.task-node .task-content{flex:1;min-width:0}.task-node .task-content>div{display:flex;flex-direction:column;gap:6px}textarea{width:100%;padding:6px 8px;border-radius:4px;font-size:12px;font-family:inherit;resize:vertical;min-height:60px;background:transparent;color:#000;border:1px solid transparent;resize:none}textarea:focus{outline:none;border-color:#ccc;resize:both}.dark .task-node .status-badge.completed{background:#57ab5a33;color:#57ab5a}.dark .task-node .status-badge.pending{background:#f8514933;color:#f85149}.dark .task-node .checkbox{border-color:#555}.dark .task-node .checkbox.checked{border-color:#57ab5a;background:#57ab5a}.dark textarea{color:#eee}.dark textarea:focus{border-color:#555}.settings-modal{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.settings-tab:hover{background:var(--controls-button-bg, rgba(255, 255, 255, .5))!important}.settings-content::-webkit-scrollbar{width:8px}.settings-content::-webkit-scrollbar-track{background:transparent}.settings-content::-webkit-scrollbar-thumb{background:var(--node-outline-color, #e0e0e0);border-radius:4px}.settings-content::-webkit-scrollbar-thumb:hover{background:var(--node-outline, #c0c0c0)}.setting-action-button:hover{background-color:var(--node-outline, #0d5fd8)!important;box-shadow:0 2px 6px #1a73e84d;transform:translateY(-1px)}.setting-action-button:active{transform:translateY(0)}.close-button:hover{background:var(--controls-bg, #f0f0f0)!important}.close-button svg{width:20px;height:20px;color:var(--node-color, #000000)}.dark .settings-modal{background-color:var(--node-bg, #1e1e1e)!important;color:var(--node-color, #ffffff)!important;box-shadow:0 10px 40px #0009}.dark .settings-sidebar{background-color:var(--controls-bg, #2b2b2b)!important;border-right:1px solid var(--node-outline-color, #404040)!important}.dark .settings-tab{color:var(--node-color, #ffffff)!important}.dark .settings-tab:hover{background:var(--controls-button-bg, rgba(255, 255, 255, .1))!important}.dark .settings-tab.active{background:var(--controls-button-bg, #333333)!important}.dark .setting-item .icon-container{background-color:var(--controls-button-bg, #333333)!important}.dark .setting-item p{color:var(--label-color, #aaaaaa)!important}.dark .setting-action-button{background-color:var(--node-outline, #4287f5)!important}.dark .setting-action-button:hover{background-color:var(--node-outline, #5a9cff)!important;box-shadow:0 2px 6px #4287f566}.dark .close-button:hover{background:var(--controls-bg, #404040)!important}.dark .close-button svg{color:var(--node-color, #ffffff)}.dark .settings-content::-webkit-scrollbar-thumb{background:var(--node-outline-color, #404040)}.dark .settings-content::-webkit-scrollbar-thumb:hover{background:var(--node-outline, #595858)}