@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-light:oklch(70.1% .196 267.592);--color-primary:oklch(50.1% .196 267.592);--color-primary-dark:oklch(30.1% .196 267.592);--color-25:oklch(23% .07 267.592);--color-50:oklch(37% .07 267.592);--color-100:oklch(46.5% .066 267.592);--color-200:oklch(57.2% .058 267.592);--color-300:oklch(61.9% .051 267.592);--color-400:oklch(66.6% .044 267.592);--color-500:oklch(71.4% .037 267.592);--color-600:oklch(76.1% .03 267.592);--color-700:oklch(80.8% .024 267.592);--color-800:oklch(85.5% .018 267.592);--color-900:oklch(90.3% .012 267.592);--color-950:oklch(95% .006 267.592);--color-accent:#e56399;--color-red:#ff0026;--color-white:#fff;--color-black:#000;--color-text-light:#fff;--color-text-dark:#000;--color-canvas-background:var(--color-950);--color-sidebar-background:var(--color-800);--color-surface:var(--color-white);--color-text:var(--color-text-dark);--shadow:drop-shadow(.25rem .25rem 0 color-mix(in srgb, var(--color-gray-dark) 10%, transparent));--border:1px solid var(--color-primary);--border-radius:.125rem;--spacing-base:.25rem;--spacing-half:calc(var(--spacing-base) * .5);--spacing-1:calc(var(--spacing-base) * 1);--spacing-2:calc(var(--spacing-base) * 2);--spacing-3:calc(var(--spacing-base) * 3);--spacing-4:calc(var(--spacing-base) * 4);--spacing-6:calc(var(--spacing-base) * 6);--spacing-8:calc(var(--spacing-base) * 8);background:var(--color-canvas-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}.datagraph{-webkit-user-select:none;user-select:none;outline:none;grid-template:"toolbar toolbar""canvas sidebar"1fr/1fr 300px;width:100%;height:100%;display:grid;position:relative;overflow:hidden}@media (width<800px){.datagraph{grid-template-columns:1fr 0}}.datagraph .toolbar{grid-area:toolbar}.datagraph .datagraph__canvas{grid-area:canvas;overflow:hidden}.datagraph .datagraph__sidebar{padding:var(--spacing-2);grid-area:sidebar;width:100%;height:100%;padding-left:0;overflow:hidden}.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-padding:var(--spacing-6);padding:var(--contextview-padding);background-color:var(--color-sidebar-background);width:100%;height:100%;color:var(--color-text-dark);gap:var(--spacing-6);cursor:auto;pointer-events:auto;-webkit-user-select:auto;user-select:auto;touch-action:pinch-zoom;border-radius:8px;flex-direction:column;display:flex;overflow:hidden auto}.contextview .contextview__title{margin:0;font-size:1.25rem;font-weight:700}.contextview h2{margin:0;font-size:1rem;font-weight:600}.contextview .contextview__section{gap:var(--spacing-4);flex-direction:column;display:flex}.contextview .contextview__divider{width:calc(100% + calc(var(--contextview-padding) * 2));height:var(--spacing-1);background-color:var(--color-canvas-background);margin-left:calc(0px - var(--contextview-padding));flex-shrink:0}.datafield{--datafield-value-border-radius:.125rem;justify-content:center;align-items:center;display:flex}.datafield .datafield__label{vertical-align:bottom;flex-shrink:0;flex-basis:30%;font-size:.875rem}.datafield .datafield__value{width:100%;height:100%;line-height:var(--datafield-height);text-align:right;-webkit-user-select:text;user-select:text;flex-grow:1;font-family:DM Mono,monospace}.datafield.datafield--disabled .datafield__label{opacity:.3}.number-input{background-color:var(--color-950);padding:var(--spacing-1);height:2rem;color:var(--color-text-dark);border-radius:1px;flex-direction:row;align-items:stretch;display:flex}.number-input:focus-within{outline:2px solid var(--color-primary)}.number-input.number-input--disabled{opacity:.3}.number-input .number-input__input{text-align:right;color:currentColor;width:100%;height:100%;margin:0 var(--spacing-1);appearance:textfield;background-color:#0000;border:none;flex:1}.number-input .number-input__input::-webkit-outer-spin-button{appearance:none;margin:0}.number-input .number-input__input::-webkit-inner-spin-button{appearance:none;margin:0}.number-input .number-input__input:focus{outline:none}.number-input .number-input__input::placeholder{color:var(--color-500)}.number-input .number-input__reset-btn{color:currentColor;background:0 0;background-color:var(--color-800);border:none;border-radius:4px;justify-content:center;align-items:center;width:2rem;padding:0;display:inline-flex}.number-input .number-input__reset-btn:hover:not(:disabled){background-color:var(--color-700)}.number-input .number-input__reset-btn:disabled{opacity:.3}.node-settings{flex-direction:column;gap:.25rem;display:flex}.node-settings select{width:100%}.node-ports-settings{gap:var(--spacing-4);flex-direction:column;display:flex}.node-ports-settings .node-ports-settings__port{gap:var(--spacing-1);flex-direction:column;display:flex}.node-ports-settings .node-ports-settings__port .node-ports-settings__datafields{gap:var(--spacing-half);flex-direction:column;display:flex}.node-ports-settings h3{text-transform:uppercase;text-align:right;width:100%;color:var(--color-100);margin:0;font-size:.8rem}.node-ports-settings .node-ports-settings__live-data{color:var(--color-200)}.node-ports-settings .node-ports-settings__absent-text{color:var(--color-300)}.node{--node-input-ports:0;--node-output-ports:0;--node-port-size:var(--spacing-3);--node-port-hover-target-extend:var(--spacing-2);background:var(--color-primary);color:var(--color-text-light);border-radius:var(--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:var(--spacing-2) var(--spacing-3);gap:var(--spacing-2);flex-direction:column;display:flex}.node .node__wrapper .node__content .node__head{gap:var(--spacing-2);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{display:flex}.node .node__wrapper .node__content .node__body input{pointer-events:auto}.node.node--selected,.node.node--in-selection-range{box-sizing:content-box;border:3px solid var(--color-accent)}.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:var(--color-25);--node-port-color-input:var(--color-primary-light);--node-port-color-output:var(--color-primary-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 var(--color-800)}.node-port.node-port--dragging>.node-port__indicator:after{outline:2px solid var(--color-800)}.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)}.slider{--thumb-height:12px;--thumb-width:48px;height:128px;width:var(--thumb-width);position:relative}.slider .slider__track{width:var(--spacing-1);background:var(--color-25);height:100%;position:absolute;top:0;left:50%;transform:translate(-50%)}.slider .slider__thumb{pointer-events:all;background:var(--color-accent);width:100%;height:12px;left:50%;bottom:calc(var(--percentage) * (100% - var(--thumb-height)));border-radius:var(--border-radius);position:absolute;transform:translate(-50%)}.slider .slider__thumb:active{cursor:grabbing}.slider .slider__thumb:after{content:" ";background:var(--color-white);width:100%;height:2px;position:absolute;top:50%;left:0;transform:translateY(-50%)}.slider input[type=range]{opacity:0;pointer-events:none;width:0;height:0}.slider--horizontal{height:var(--thumb-width);width:128px}.slider--horizontal .slider__track{width:100%;height:var(--spacing-1);top:50%;left:0;transform:translateY(-50%)}.slider--horizontal .slider__thumb{width:var(--thumb-height);height:100%;left:calc(var(--percentage) * (100% - var(--thumb-height)));top:50%;bottom:auto;transform:translateY(-50%)}.slider--horizontal .slider__thumb:after{width:2px;height:100%;top:0;left:50%;transform:translate(-50%)}.node[data-kind^=param] .node__value{text-overflow:ellipsis;text-wrap:nowrap;color:color-mix(in srgb, var(--color-accent) 70%, var(--color-gray-light));overflow:hidden}.node[data-kind^=param] .node__body{justify-content:center;align-items:center;gap:var(--spacing-2);padding:var(--spacing-2) 0;flex-direction:column;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;width:4rem;height:2rem}.node[data-kind^=param] .node__body .number-input{width:100%;height:1.5rem}.node[data-kind=visualizer\:oscilloscope] .node__body .node__canvas{width:200px;height:100px}.toolbar{--toolbar-color-bg:var(--color-25);--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));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;text-decoration:none;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(--toolbar-color-bg))}.toolbar .toolbar__button:active{background:color-mix(in srgb, var(--toolbar-button-color-bg) 70%, var(--toolbar-color-bg))}.toolbar .toolbar__menu-trigger{position:relative}.toolbar .toolbar__menu-trigger.toolbar__menu-trigger--open .toolbar__button{--toolbar-button-color-bg:var(--color-950);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(--toolbar-color-bg));border-radius:1px;width:3px;margin:.25rem 0}.node-creation-menu{--color-background:var(--color-white);--node-creation-menu-spacing-md:.5rem;--node-creation-menu-spacing-sm:.25rem;--node-creation-menu-spacing-xs:.125rem;--color-hover:color-mix(in srgb, var(--color-primary) 15%, var(--color-surface));margin:0;margin-top:var(--node-creation-menu-spacing-sm);background:var(--color-background);color:var(--color-text-dark);max-height:500px;padding:var(--node-creation-menu-spacing-sm) 0;border:var(--border);border-radius:var(--border-radius);filter:var(--shadow);flex-direction:column;align-items:stretch;display:flex;position:absolute;top:100%;left:0}.node-creation-menu .node-creation-menu__label{justify-content:space-between;align-items:center;width:100%;margin:0;font-size:1rem;display:inline-flex}.node-creation-menu .node-creation-menu__label svg{margin-left:1rem}.node-creation-menu .node-creation-menu__items-wrapper{margin-left:calc(0px - var(--node-creation-menu-spacing-xs));display:none;position:absolute;top:0;left:100%}.node-creation-menu .node-creation-menu__items{padding:calc(var(--node-creation-menu-spacing-md) * 1.5);background:var(--color-background);gap:var(--node-creation-menu-spacing-md);border:var(--border);border-radius:var(--border-radius);filter:var(--shadow);flex-direction:column;align-items:flex-start;display:flex}.node-creation-menu .node-creation-menu__section{padding:var(--node-creation-menu-spacing-sm) var(--node-creation-menu-spacing-sm) var(--node-creation-menu-spacing-sm) var(--node-creation-menu-spacing-md);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;white-space:nowrap;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-950));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:var(--color-200);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-white);color:var(--color-text);border:var(--border);border-radius:var(--border-radius);width:min(75%,36rem);filter:var(--shadow);flex-direction:column;gap:1rem;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-950) 90%, var(--color-25));--border-color:color-mix(in srgb, var(--color-950) 50%, var(--color-25));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-25));border-color:color-mix(in srgb, var(--border-color) 85%, var(--color-25))}.button.button--color-red{--background-color:color-mix(in srgb, var(--color-red) 90%, var(--color-25));--border-color:color-mix(in srgb, var(--color-red) 50%, var(--color-25));--color-text:var(--color-text-light)}