@import "https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inclusive+Sans:ital,wght@0,300..700;1,300..700&family=Space+Grotesk:wght@300..700&display=swap";:root{--color-gray-light:#f5f5f5;--color-gray-dark:#333;--color-primary:#1a60ff;--color-accent:#ff9f19;--color-text-light:#fff;--color-text-dark:#000;--color-background:var(--color-gray-light);background:var(--color-background);color:var(--color-text-dark);font-family:Inclusive Sans,DM Sans,DM Mono,Space Grotesk,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}html,body,#app{width:100%;height:100%;margin:0;padding:0}.datagraph{-webkit-user-select:none;user-select:none;width:100%;height:100%;position:relative}.datagraph .datagraph__start-button{background:var(--color-primary);color:var(--color-text-light);cursor:pointer;z-index:10;border:none;border-radius:4px;padding:1rem 2rem;font-size:1.25rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.datagraph .datagraph__start-button:hover{background:var(--color-accent)}.node{--datagraph-node-color-bg:var(--color-primary);--datagraph-node-padding:.325rem;background:var(--datagraph-node-color-bg);color:var(--color-text-light);cursor:grab;z-index:2;border-radius:3px;font-size:12px;position:absolute}.node .node__wrapper{pointer-events:none;width:100%;height:100%;position:relative}.node .node__wrapper .node__ports{justify-content:space-around;width:100%;height:0;display:flex;position:absolute}.node .node__wrapper .node__ports.node__ports--input{top:0}.node .node__wrapper .node__ports.node__ports--input .node__port{background:var(--color-background);transform:translateY(-50%)}.node .node__wrapper .node__ports.node__ports--output{bottom:0}.node .node__wrapper .node__ports.node__ports--output .node__port{background:color-mix(in srgb, var(--datagraph-node-color-bg) 80%, var(--color-gray-dark));transform:translateY(-50%)}.node .node__wrapper .node__port{pointer-events:auto;background:0 0;border-radius:50%;width:10px;height:10px}.node .node__wrapper .node__port:hover{background:color-mix(in srgb, var(--datagraph-node-color-bg) 80%, var(--color-gray-light));outline:2px solid color-mix(in srgb, var(--datagraph-node-color-bg) 80%, var(--color-gray-light));cursor:pointer}.node .node__wrapper .node__content{padding:var(--datagraph-node-padding);gap:var(--datagraph-node-padding);flex-direction:column;display:flex}.node .node__wrapper .node__content .node__head{gap:var(--datagraph-node-padding);flex-direction:row;display:flex}.node .node__wrapper .node__content .node__body{display:flex}.node .node__wrapper .node__content .node__body input{pointer-events:auto}.node.node--selected{outline:2px solid color-mix(in srgb, var(--color-accent) 70%, var(--color-gray-light));outline-offset:1px}.edge{z-index:1;background:0 0;position:absolute;overflow:visible}.edge .edge__line{stroke:color-mix(in srgb, var(--color-primary) 60%, var(--color-gray-light));stroke-width:5px}.edge .edge__line:not(.edge__line--ghost):hover{stroke:var(--color-accent);cursor:pointer}.edge .edge__line.edge__line--ghost{stroke:color-mix(in srgb, var(--color-gray-light) 60%, var(--color-gray-dark));stroke-width:2px;stroke-dasharray:5 5}.backdrop{z-index:999;width:100%;height:100%;position:fixed;top:0;left:0}.contextmenu{z-index:1000;background:#fff;border:1px solid #ccc;border-radius:4px;flex-direction:column;gap:4px;padding:8px;display:flex;position:fixed;box-shadow:0 2px 10px #0003}.contextmenu .contextmenu__title{align-self:center}.contextview{--contextview-color-bg:var(--color-primary);--contextview-color-fg:var(--color-text-light);background-color:var(--contextview-color-bg);width:360px;height:100%;color:var(--contextview-color-fg);flex-direction:column;gap:.5rem;padding:.5rem;display:flex;position:absolute;right:0}.contextview .contextview__title .contextview__classpath{color:color-mix(in srgb, var(--contextview-color-fg) 70%, var(--contextview-color-bg))}.contextview .contextview__title .contextview__classname{font-weight:700}.contextview .contextview__title .contextview__nodeid{color:color-mix(in srgb, var(--contextview-color-bg) 40%, var(--color-text-dark));font-size:.8rem}.node[data-kind^=param]{min-width:8rem}.node[data-kind^=param] .node__value{color:color-mix(in srgb, var(--datagraph-node-color-bg) 30%, var(--color-gray-dark))}.node[data-kind^=param] .node__body{justify-content:center;align-items:stretch;height:2rem;padding:.25rem;display:flex}.node[data-kind^=param] .node__body input{--datagraph-input-accent-color:var(--color-accent);color:var(--color-text-light)}.node[data-kind^=param] .node__body input:hover{--datagraph-input-accent-color:color-mix(in srgb, var(--color-accent) 90%, var(--color-gray-light))}.node[data-kind^=param] .node__body input.node__input--active{--datagraph-input-accent-color:color-mix(in srgb, var(--color-accent) 90%, var(--color-gray-dark))}.node[data-kind^=param] .node__body input[type=button]{background:var(--datagraph-input-accent-color);border:1px solid color-mix(in srgb, var(--datagraph-input-accent-color) 70%, var(--color-gray-light));border-radius:4px;width:100%}.node[data-kind^=param] .node__body input[type=range]{background:var(--color-background);accent-color:var(--datagraph-input-accent-color)}