#root{width:100vw;height:100vh;overflow-x:hidden;display:flex;flex-direction:column;align-items:center}#root>*{min-width:350px;box-sizing:border-box}.flex-fill{flex-grow:1}.btn-panel{display:flex;justify-content:space-between}.btn-panel.btn-panel-right{justify-content:flex-end}body{--color-background-default: #1a1a1a;--color-danger-background: hsl(0, 100%, 5%);--color-danger-foreground: hsl(0, 100%, 90%);--color-success-background: hsl(100, 100%, 5%);--color-success-foreground: hsl(100, 100%, 90%)}@media only screen and (min-width: 1000px){#root>*{min-width:1000px}#root>* .process-throughput-row{grid-template-columns:1fr 240px 160px 80px;gap:20px}#root>* .process-throughput-row>:nth-child(2){order:4}#root>* .process-throughput-row>:nth-child(3){order:2;grid-column:1 span}#root>* .process-throughput-row>:nth-child(4){order:3;grid-column:1 span}#root>* .item-input>:first-child{flex-grow:0}#root>* .process-stage-head{grid-template-columns:1fr 1fr 1fr 200px}#root>* .process-stage-head>:nth-child(1){grid-column:3 span}#root>* .process-stage-head>:nth-child(2){order:3}#root>* .process-stage-head>:nth-child(3){order:4}#root>* .process-stage-head>:nth-child(4){order:5}#root>* .process-stage-head>:nth-child(5){order:6}#root>* .process-stage-head>:nth-child(6){order:2;grid-column:1 span}#root>* .process-stage-head form>:first-child{flex-grow:0}#root>* .process-stage-head>:nth-child(5){justify-content:flex-end}#root>* .process-stage-body{flex-direction:row}}.dialog{position:fixed;top:0;left:0;width:100vw;height:100vh;padding:20px;z-index:100;background-color:#1a1a1a99;box-sizing:border-box;overflow:none;display:flex;flex-direction:column;justify-content:center;align-items:center}.dialog>.dialog-content{box-shadow:0 0 50px #fff6;background-color:var(--color-background-default);width:350px;min-height:400px;padding:20px;display:flex;flex-direction:column;gap:40px}.process-overview{flex-grow:1;padding:10px;max-width:1920px;display:flex;flex-direction:column;gap:40px}.process-overview ul{padding:0;display:flex;flex-direction:column;align-items:stretch;gap:20px}.process-overview li{list-style:none;display:flex;gap:10px}.process-overview li>:first-child{flex-grow:1}.icon{overflow:hidden;position:relative;box-sizing:border-box}.icon img{position:absolute}.icon-sm{height:16px;width:16px}.icon-md{height:32px;width:32px}.icon-lg{height:64px;width:64px}.icon-lg img{left:0}.icon-md img{left:-64px}.icon-sm img{left:-96px}.ips-input{display:flex;align-items:center;gap:20px}.ips-input>span{display:flex;align-items:center;gap:10px}.ips-input>span>:first-child{font-weight:700}.ips-input form{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:20px}.alert{padding:20px;display:flex;align-items:center;gap:20px;border-radius:10px}.alert>:nth-child(2){flex-grow:1}.alert.alert-hidden{opacity:0}.alert-warn{background-color:var(--color-warn-background);color:var(--color-warn-foreground);border-left:2px solid var(--color-warn-foreground)}.alert-danger{background-color:var(--color-danger-background);color:var(--color-danger-foreground);border-left:2px solid var(--color-danger-foreground)}.alert-success{background-color:var(--color-success-background);color:var(--color-success-foreground);border-left:2px solid var(--color-success-foreground)}.alert-info{background-color:var(--color-info-background);color:var(--color-info-foreground);border-left:2px solid var(--color-info-foreground)}.item-input{display:flex;align-items:center;gap:20px}.item-input>span{display:flex;align-items:center;gap:10px}.item-input form{display:flex;flex-direction:column;align-items:stretch}.item-input input{display:block}.item-input ul{overflow-y:scroll;padding:0}.item-input li{list-style:none;display:flex;padding:0;margin:0}.item-input li>button{flex-grow:1;display:flex;align-items:center;gap:20px}.item-input li>button>:nth-child(2){flex-grow:1;text-align:left}.recipe-select form{display:flex;flex-direction:column;align-items:stretch}.recipe-select input{display:block}.recipe-select ul{overflow-y:scroll;padding:0}.recipe-select li{list-style:none;display:flex;padding:0;margin:0}.recipe-select li>button{flex-grow:1;display:flex;align-items:center;gap:20px}.recipe-select li>button>:nth-child(2){flex-grow:1;text-align:left}.dividers button{padding:2px}.dividers button.active{color:green}.process{flex-grow:1;padding:10px;max-width:100vw;overflow-x:hidden;display:flex;flex-direction:column;gap:40px}.process h1{display:flex;gap:20px}.process h1 button{font-size:1.2rem}.process .string-input{flex-grow:1;flex-shrink:1;display:flex;align-items:stretch;gap:20px;overflow:hidden}.process .string-input>span{flex-grow:1;flex-shrink:1;font-size:2.2rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.process .string-input input{flex-grow:1;font-size:2.2rem;width:100px}.process-stages{flex-grow:1}.process-stages>div{display:flex;flex-direction:column;gap:20px}.process-throughput-row{border:1px solid gray;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px}.process-throughput-row>*{grid-column:1 span}.process-throughput-row .item-input>span{flex-grow:1}.process-throughput-row .item-input>span>span{flex-grow:1}.process-throughput-row>:nth-child(2),.process-throughput-row>:nth-child(4){display:flex;justify-content:flex-end;align-items:center;gap:20px}.process-throughput-row>:nth-child(3),.process-throughput-row>:nth-child(4){grid-column:2 span}.process-input,.process-output,.process-stages{display:flex;gap:5px;flex-direction:column}.process-stage{padding:10px;border:1px solid gray}.process-stage .process-stage-head{display:grid;gap:20px;grid-template-columns:1fr 1fr;margin-bottom:40px}.process-stage .process-stage-head>div:nth-child(1){grid-column:span 2}.process-stage .process-stage-head>div:nth-child(6){grid-column:span 2}.process-stage .process-stage-head>div:nth-child(6)>button{flex-grow:1}.process-stage .process-stage-head>div{display:flex;align-items:center;gap:20px}.process-stage .process-stage-head form{display:flex;gap:10px}.process-stage .process-stage-head form>span{flex-grow:1}.process-stage .process-stage-head form input{width:50px}.process-stage .process-stage-body{display:flex;gap:20px;flex-direction:column;align-items:stretch}.process-stage .process-stage-body>*{display:flex;flex-direction:column}.process-stage .process-stage-body .inputs,.process-stage .process-stage-body .outputs{flex-grow:1;padding:0;margin:0;justify-content:flex-start}.process-stage .process-stage-body .inputs li.head,.process-stage .process-stage-body .outputs li.head{border-bottom:1px solid gray}.process-stage .process-stage-body .inputs li,.process-stage .process-stage-body .outputs li{padding:0;margin:0;list-style:none;display:flex;align-items:center;gap:20px}.process-stage .process-stage-body .inputs li>:nth-child(1),.process-stage .process-stage-body .outputs li>:nth-child(1){width:32px}.process-stage .process-stage-body .inputs li>:nth-child(2),.process-stage .process-stage-body .outputs li>:nth-child(2){width:20px;flex-grow:1}.process-stage .process-stage-body .inputs li>:nth-child(3),.process-stage .process-stage-body .outputs li>:nth-child(3){width:60px}.process-stage .process-stage-body .between{justify-content:center}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}