@import "https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Inclusive+Sans:ital,wght@0,300..700;1,300..700&display=swap";*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;tab-size:4;font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;line-height:1.15}body{margin:0}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{border-color:currentColor}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:100%;line-height:1.15}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}:root{--color-primary:#3454d1;--color-accent:#e56399;--color-red:#ff0026;--color-gray-light:#f5f5f5;--color-gray-dark:#1d1d2d;--color-text-light:#fff;--color-text-dark:#000;--color-background:color-mix(in srgb, var(--color-gray-light) 90%, var(--color-gray-dark));--color-surface:var(--color-background);--color-text:var(--color-text-dark);--color-text-disabled:color-mix(in srgb, var(--color-text) 50%, var(--color-surface));--shadow:drop-shadow(.25rem .25rem .5rem color-mix(in srgb, var(--color-gray-dark) 10%, transparent));background:var(--color-background);color:var(--color-text);font-family:Inclusive Sans,-apple-system,Roboto,Helvetica,Arial,sans-serif}html,body,#app{width:100%;height:100%;margin:0;padding:0}body.dragging,body.dragging *{cursor:grabbing!important}input,select,textarea,.datafield{--input-color-background:color-mix(in srgb, var(--color-gray-dark) 70%, var(--color-surface));--input-color-background-disabled:color-mix(in srgb, var(--color-gray-dark) 40%, var(--color-surface))}input,select,textarea{background:var(--input-color-background);color:var(--color-text);caret-color:var(--color-text);font-family:DM mono,monospace;font-size:inherit;border:none;border-radius:.125rem;height:1.25rem;padding:0 .25rem}:is(input,select,textarea):disabled{background-color:var(--input-color-background-disabled);color:var(--color-text-disabled)}.datagraph{-webkit-user-select:none;user-select:none;outline:none;grid-template-rows:auto 1fr;grid-template-columns:1fr 300px;width:100%;height:100%;display:grid;position:relative;overflow:hidden}@media (width<800px){.datagraph{grid-template-columns:1fr 0}}.datagraph .toolbar{grid-column:1/-2}.datagraph .datagraph__canvas{grid-area:2/1/-1/2;overflow:hidden}.datagraph .contextview{grid-area:1/2/-1/-1}.datagraph .node-selection{background:color-mix(in srgb, var(--color-primary) 20%, transparent);border:1px solid var(--color-primary);position:absolute}.datagraph__context-menu-container{z-index:20;position:absolute}.contextview{--contextview-color-bg:var(--color-primary);--contextview-padding:.75rem;--color-text:var(--color-text-light);--color-text-alternative:var(--color-text-dark);--color-text-disabled:color-mix(in srgb, var(--color-text) 50%, var(--color-surface));--color-surface:var(--contextview-color-bg);padding:var(--contextview-padding);background-color:var(--color-surface);width:100%;height:100%;color:var(--color-text);gap:var(--contextview-padding);cursor:auto;pointer-events:auto;-webkit-user-select:auto;user-select:auto;touch-action:pinch-zoom;flex-direction:column;display:flex;overflow-y:auto}.contextview .contextview__header .contextview__title{margin:0;font-size:1.25rem;font-weight:700}.contextview .contextview__header .contextview__classpath{color:color-mix(in srgb, var(--color-text) 70%, var(--color-surface))}.contextview .contextview__header .contextview__classname{font-weight:700}.contextview .contextview__header .contextview__nodeid{color:color-mix(in srgb, var(--color-surface) 40%, var(--color-text-alternative));font-family:DM Mono,monospace;font-size:.8rem}.contextview h2{text-transform:uppercase;margin-bottom:0;margin-top:var(--contextview-padding);font-size:1rem;font-weight:600}.contextview h3{text-transform:uppercase;text-align:right;width:100%;color:color-mix(in srgb, var(--color-text-alternative) 40%, var(--color-surface));margin:0 0 -.25rem;font-size:.8rem}.contextview .contextview__section{gap:calc(var(--contextview-padding) * 1 / 3);flex-direction:column;display:flex}.datafield{--datafield-height:1.25rem;--datafield-value-border-radius:.125rem;height:var(--datafield-height);background-color:var(--input-color-background-disabled);justify-content:center;align-items:center;display:flex}.datafield .datafield__label{vertical-align:bottom;flex-shrink:0;flex-basis:30%;padding:0 .25rem;font-size:.875rem}.datafield .datafield__value{height:100%;line-height:var(--datafield-height);text-align:right;-webkit-user-select:text;user-select:text;color:var(--color-text-disabled);border-radius:var(--datafield-value-border-radius);flex-grow:1;font-family:DM Mono,monospace}.datafield .datafield__value:not(:has(input,select)){padding:0 .25rem}.datafield .datafield__value input,.datafield .datafield__value select{border-radius:var(--datafield-value-border-radius);width:100%;height:100%;line-height:var(--datafield-height);border:none}.datafield .datafield__value input[type=number]{text-align:right;appearance:textfield}.datafield .datafield__value input[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}.datafield .datafield__value input[type=number]::-webkit-inner-spin-button{appearance:none;margin:0}.nodesettings{flex-direction:column;gap:.25rem;display:flex}.node-ports-settings h2{margin-bottom:-1rem}.node-ports-settings.node-ports-settings--empty h2{margin-bottom:calc(var(--contextview-padding) / -6)}.node-ports-settings .node-ports-settings__absent-text{color:var(--color-text-disabled)}.node-ports-settings .node-ports-settings__default-field{align-items:center;gap:calc(var(--contextview-padding) / 3);height:100%;color:var(--color-text);display:flex}.node-ports-settings .node-ports-settings__default-field.node-ports-settings__default-field--unmodified>input{color:var(--color-text-disabled)}.node-ports-settings .node-ports-settings__reset-btn{cursor:pointer;color:currentColor;font-size:14px;line-height:var(--datafield-height);height:100%;vertical-align:center;background:0 0;border:none;padding:0}.node-ports-settings .node-ports-settings__reset-btn:hover{opacity:1}.node-ports-settings .node-ports-settings__reset-btn:disabled{cursor:not-allowed;color:var(--color-text-disabled)}.node-ports-settings .node-ports-settings__reset-btn .node-ports-settings__reset-btn-icon{height:100%;width:unset;aspect-ratio:1;margin-right:calc(var(--contextview-padding) / 3)}.node{--node-color-bg:var(--color-primary);--node-padding:.325rem;--node-border-radius:.075rem;--color-surface:var(--node-color-bg);--color-text:var(--color-text-light);--color-disabled:color-mix(in srgb, var(--color-text) 50%, var(--color-surface));--node-input-ports:0;--node-output-ports:0;--node-port-size:10px;--node-port-hover-target-extend:.5rem;background:var(--color-surface);color:var(--color-text);border-radius:var(--node-border-radius);cursor:default;z-index:2;min-width:calc(max(var(--node-input-ports), var(--node-output-ports)) * calc(var(--node-port-size) + calc(var(--node-port-hover-target-extend) * 2)));font-size:.8rem;position:absolute;transform:translate(-50%,-50%)}.node[data-input-ports="0"]{--node-input-ports:0}.node[data-output-ports="0"]{--node-output-ports:0}.node[data-input-ports="1"]{--node-input-ports:1}.node[data-output-ports="1"]{--node-output-ports:1}.node[data-input-ports="2"]{--node-input-ports:2}.node[data-output-ports="2"]{--node-output-ports:2}.node[data-input-ports="3"]{--node-input-ports:3}.node[data-output-ports="3"]{--node-output-ports:3}.node[data-input-ports="4"]{--node-input-ports:4}.node[data-output-ports="4"]{--node-output-ports:4}.node[data-input-ports="5"]{--node-input-ports:5}.node[data-output-ports="5"]{--node-output-ports:5}.node[data-input-ports="6"]{--node-input-ports:6}.node[data-output-ports="6"]{--node-output-ports:6}.node[data-input-ports="7"]{--node-input-ports:7}.node[data-output-ports="7"]{--node-output-ports:7}.node[data-input-ports="8"]{--node-input-ports:8}.node[data-output-ports="8"]{--node-output-ports:8}.node[data-input-ports="9"]{--node-input-ports:9}.node[data-output-ports="9"]{--node-output-ports:9}.node[data-input-ports="10"]{--node-input-ports:10}.node[data-output-ports="10"]{--node-output-ports:10}.node[data-input-ports="11"]{--node-input-ports:11}.node[data-output-ports="11"]{--node-output-ports:11}.node[data-input-ports="12"]{--node-input-ports:12}.node[data-output-ports="12"]{--node-output-ports:12}.node[data-input-ports="13"]{--node-input-ports:13}.node[data-output-ports="13"]{--node-output-ports:13}.node[data-input-ports="14"]{--node-input-ports:14}.node[data-output-ports="14"]{--node-output-ports:14}.node[data-input-ports="15"]{--node-input-ports:15}.node[data-output-ports="15"]{--node-output-ports:15}.node[data-input-ports="16"]{--node-input-ports:16}.node[data-output-ports="16"]{--node-output-ports:16}.node.node--dragging{cursor:grabbing}.node .node__wrapper{pointer-events:none;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--output{bottom:0}.node .node__wrapper .node__content{padding:calc(var(--node-padding) + .125rem) var(--node-padding);gap:var(--node-padding);flex-direction:column;display:flex}.node .node__wrapper .node__content .node__head{gap:var(--node-padding);flex-direction:row;padding:0;display:flex}.node .node__wrapper .node__content .node__head .node__label{text-overflow:ellipsis;text-wrap:nowrap;flex-direction:row;gap:.25rem;display:flex;overflow:hidden}.node .node__wrapper .node__content .node__body{flex:1;display:flex}.node .node__wrapper .node__content .node__body input{pointer-events:auto}.node.node--selected{box-sizing:content-box;border:3px solid color-mix(in srgb, var(--color-accent) 70%, var(--color-gray-light))}.node.node--in-selection-range{box-sizing:content-box;border:3px solid color-mix(in srgb, var(--color-accent) 70%, var(--color-gray-dark))}.panzoomcanvas{overflow-anchor:none;touch-action:manipulation;width:100%;height:100%;overflow:auto}.panzoomcanvas.panzoomcanvas--panning{cursor:grabbing}.panzoomcanvas.panzoomcanvas--pan-disabled{cursor:default}.panzoomcanvas .panzoomcanvas__content-wrapper{overflow:hidden}.panzoomcanvas .panzoomcanvas__content-wrapper .panzoomcanvas__content{width:100%;height:100%;position:relative;transform:translate(50%,50%)}.node-port{--node-port-border-radius:var(--node-borer-radius);--node-port-color-connected:color-mix(in srgb, var(--color-surface) 80%, var(--color-gray-dark));--node-port-color-input:color-mix(in srgb, var(--color-surface) 30%, var(--color-gray-light));--node-port-color-output:color-mix(in srgb, var(--color-surface) 30%, var(--color-gray-dark));pointer-events:auto;position:relative}.node-port .node-port__indicator{height:calc(var(--node-port-size) / 2);width:calc(var(--node-port-size));position:absolute;overflow:hidden;transform:translate(-50%)}.node-port .node-port__indicator:after{width:var(--node-port-size);height:var(--node-port-size);background:var(--color-surface);border-radius:var(--node-port-border-radius);content:"";position:absolute}.node-port .node-port__hover-target{width:calc(var(--node-port-size) + calc(var(--node-port-hover-target-extend) * 2));height:calc(var(--node-port-size) + calc(var(--node-port-hover-target-extend) * 1.5));background:0 0;position:absolute}.node-port .node-port__hover-target:hover,.node-port .node-port__hover-target.node__port--drag-over{cursor:pointer}.node-port.node-port--output .node-port__indicator{bottom:0}.node-port.node-port--output .node-port__indicator:after{top:0}.node-port.node-port--output .node-port__indicator:after{background:var(--node-port-color-output)}.node-port.node-port--output .node-port__hover-target{transform:translate(-50%,-33%)}.node-port.node-port--input .node-port__indicator:after{background:var(--node-port-color-input);bottom:0}.node-port.node-port--input .node-port__hover-target{transform:translate(-50%,-66%)}.node-port.node-port--input.node-port--has-custom-default .node-port__indicator:before{z-index:1;border-radius:var(--node-port-border-radius);content:"";width:calc(var(--node-port-size) / 2);height:calc(var(--node-port-size) / 2);background:var(--node-port-color-connected);position:absolute;top:0;left:50%;transform:translate(-50%,-50%)}.node-port.node-port--connected .node-port__indicator{overflow:visible}.node-port.node-port--connected .node-port__indicator:after{background:var(--node-port-color-connected)}.node-port.node-port--dragging>.node-port__indicator{overflow:visible}.node-port .node-port__indicator:has(+.node-port__hover-target:hover){overflow:visible}.node-port .node-port__indicator:has(+.node-port__hover-target:hover):after{outline:2px solid color-mix(in srgb, var(--color-surface) 80%, var(--color-gray-light))}.node-port.node-port--dragging>.node-port__indicator:after{outline:2px solid color-mix(in srgb, var(--color-surface) 80%, var(--color-gray-light))}.node.node--activatable-input-port .node__port--active{--node-port-color-input:color-mix(in srgb, var(--color-accent) 50%, var(--color-gray-light));--node-port-color-connected:var(--color-accent)}.node[data-kind^=param]{min-width:8rem}.node[data-kind^=param][data-kind=param\:input],.node[data-kind^=param][data-kind=param\:button]{width:6rem;min-width:6rem}.node[data-kind^=param] .node__value{text-overflow:ellipsis;text-wrap:nowrap;color:color-mix(in srgb, var(--color-surface) 30%, var(--color-gray-dark));overflow:hidden}.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{--input-accent-color:var(--color-accent)}.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(--input-accent-color);border:1px solid color-mix(in srgb, var(--input-accent-color) 70%, var(--color-gray-light));border-radius:4px;flex:1}.node[data-kind^=param] .node__body input[type=range]{background:var(--color-background);accent-color:var(--input-accent-color)}.node[data-kind^=param] .node__body input[type=number]{text-align:right;appearance:textfield;width:100%;padding:0 .25rem}.node[data-kind^=param] .node__body input[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}.node[data-kind^=param] .node__body input[type=number]::-webkit-inner-spin-button{appearance:none;margin:0}.node[data-kind=visualizer\:oscilloscope] .node__body .node__canvas{width:200px;height:100px}.toolbar{--toolbar-color-bg:color-mix(in srgb, var(--color-gray-dark) 80%, var(--color-primary));--toolbar-padding:.75rem;--color-text:var(--color-text-light);--color-text-alternative:var(--color-text-dark);--color-text-disabled:color-mix(in srgb, var(--color-text) 50%, var(--color-surface));--color-surface:var(--toolbar-color-bg);background-color:var(--toolbar-color-bg);width:100%;color:var(--color-text);z-index:10;justify-content:space-between;gap:var(--toolbar-padding);cursor:default;padding:var(--toolbar-padding);display:flex;top:0;left:0}.toolbar .toolbar__section{gap:var(--toolbar-padding);display:flex}.toolbar .toolbar__button{--toolbar-button-color-bg:var(--color-primary);background:var(--toolbar-button-color-bg);width:3rem;height:3rem;color:inherit;border:none;border-radius:0;justify-content:center;align-items:center;display:flex}.toolbar .toolbar__button.toolbar__button--play{--toolbar-button-color-bg:var(--color-accent)}.toolbar .toolbar__button .toolbar__button-icon{width:2rem;height:2rem}.toolbar .toolbar__button:hover{background:color-mix(in srgb, var(--toolbar-button-color-bg) 80%, var(--color-surface))}.toolbar .toolbar__button:active{background:color-mix(in srgb, var(--toolbar-button-color-bg) 70%, var(--color-surface))}.toolbar .toolbar__menu-trigger{position:relative}.toolbar .toolbar__menu-trigger.toolbar__menu-trigger--open .toolbar__button{--toolbar-button-color-bg:var(--color-gray-light);color:var(--color-primary)}.toolbar .toolbar__menu-trigger.toolbar__menu-trigger--open .toolbar__button:hover{background:color-mix(in srgb, var(--color-primary) 15%, var(--toolbar-button-color-bg))}.toolbar .toolbar__menu-trigger.toolbar__menu-trigger--open .toolbar__button:active{background:color-mix(in srgb, var(--color-primary) 30%, var(--toolbar-button-color-bg))}.toolbar .toolbar__divider{background:color-mix(in srgb, var(--color-text) 10%, var(--color-surface));border-radius:1px;width:3px;margin:.25rem 0}.node-creation-menu{--color-background:var(--color-gray-light);--node-creation-menu-padding:.5rem;--color-hover:color-mix(in srgb, var(--color-primary) 15%, var(--color-surface));background:var(--color-background);color:var(--color-text-dark);max-height:500px;padding:calc(var(--node-creation-menu-padding) / 2);filter:var(--shadow);flex-direction:column;align-items:stretch;margin:0;display:flex;position:absolute;top:100%;left:0}.node-creation-menu .node-creation-menu__label{margin:0;font-size:1rem;font-weight:500}.node-creation-menu .node-creation-menu__items-wrapper{padding:0 var(--node-creation-menu-padding);background:0 0;display:none;position:absolute;top:0;left:100%}.node-creation-menu .node-creation-menu__items{padding:calc(var(--node-creation-menu-padding) * 1.5);background:var(--color-background);gap:var(--node-creation-menu-padding);flex-direction:column;align-items:flex-start;display:flex}.node-creation-menu .node-creation-menu__section{padding:var(--node-creation-menu-padding);flex-direction:column;flex:1;gap:.625rem;display:flex;position:relative}.node-creation-menu .node-creation-menu__section:hover{background:color-mix(in srgb, var(--color-primary) 15%, var(--color-background))}.node-creation-menu .node-creation-menu__section:hover .node-creation-menu__items-wrapper{display:block}.node-creation-menu__add-node-button{background:var(--color-primary);color:var(--color-text-light);cursor:grab;text-align:left;border:none;border-radius:0;padding:.375rem;font-size:.8rem}.edge{z-index:1;pointer-events:none;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;pointer-events:auto}.edge .edge__line:not(.edge__line--ghost):hover{stroke:var(--color-accent);cursor:pointer}.edge.edge--ghost .edge__line{stroke:color-mix(in srgb, var(--color-gray-light) 60%, var(--color-gray-dark));stroke-width:2px;stroke-dasharray:5 5}.modal{z-index:9999;width:100%;height:100%;position:absolute;top:0;left:0}.modal .modal__content-wrapper{pointer-events:none;width:100%;height:100%;position:relative;overflow:visible}.modal .modal__content-wrapper .modal__content{pointer-events:auto}.modal .modal__backdrop{background:0 0;width:100%;height:100%;position:absolute;top:0;left:0}.confirmation-dialog{--color-background:var(--color-gray-light);background:var(--color-background);color:var(--color-text);filter:var(--shadow);border-radius:.125rem;flex-direction:column;gap:1rem;width:min(75%,36rem);padding:1.5rem;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.confirmation-dialog .confirmation-dialog__title{margin:0;padding:0;font-size:1.25rem;font-weight:500}.confirmation-dialog .confirmation-dialog__buttons{justify-content:flex-end;gap:.5rem;display:flex}.button{--background-color:color-mix(in srgb, var(--color-gray-light) 90%, var(--color-gray-dark));--border-color:color-mix(in srgb, var(--color-gray-light) 50%, var(--color-gray-dark));background:var(--background-color);color:var(--color-text);border:1px solid var(--border-color);border-radius:.5rem;align-items:center;gap:.25rem;padding:.375rem .5rem;font-size:.9375rem;display:flex}.button:hover{background:color-mix(in srgb, var(--background-color) 85%, var(--color-gray-dark));border-color:color-mix(in srgb, var(--border-color) 85%, var(--color-gray-dark))}.button.button--color-red{--background-color:color-mix(in srgb, var(--color-red) 90%, var(--color-gray-dark));--border-color:color-mix(in srgb, var(--color-red) 50%, var(--color-gray-dark));--color-text:var(--color-text-light)}