:root{--base0: #0e0e0e;--base1: #1a1a1a;--base2: #2b2b2b;--base3: #3c3c3c;--base4: #4d4d4d;--base5: #5e5e5e;--base6: #6f6f6f;--base7: #8a8a8a;--base8: #9b9b9b;--base9: #a1a1a1;--base10: #b2b2b2;--base11: #c3c3c3;--base12: #d4d4d4;--base13: #e5e5e5;--accent-h: 316;--accent-s: 29%;--accent-l: 64%;--accent: hsla(var(--accent-h), var(--accent-s), var(--accent-l));--input-border: var(--base4);--input-focus-h: var(--accent-h);--input-focus-s: 60%;--input-focus-l: 42%;--text: var(--base12);--text-highlight: var(--base13);--text-accent: var(--base10);--text-inactive: var(--base7);--disabled: var(--base7);--background: var(--base2);--modal-background: var(--base3);--modal-shadow: 0 0 10px 3px #0000009e;accent-color:var(--accent);--transparency: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill-opacity=".05"><rect width="50" height="50" /><rect x="50" y="50" width="50" height="50" /></svg>') 0 0 / 20px 20px #f8f8f8}*,*:before,*:after{box-sizing:border-box}*{margin:0}html,body{margin:0;padding:0}body{background-color:var(--background);color:var(--text);-webkit-font-smoothing:antialiased}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}.scroller{scrollbar-width:thin;scrollbar-color:#1a1919 transparent}.scroller::-webkit-scrollbar{width:5px;height:5px}.scroller::-webkit-scrollbar-track{background:transparent}.scroller::-webkit-scrollbar-thumb{background-color:#000000c9;border-radius:20px;border:3px solid transparent}.form-control{font-weight:700}.form-control.toggle{display:grid;gap:1.2em;grid-template-columns:1em auto}.form-control.range{display:flex;gap:.5em;flex-direction:column;margin-bottom:.5em}.form-control--disabled{color:var(--accent);cursor:not-allowed}input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--form-background);margin:0;font:inherit;color:currentColor;width:1.15em;height:1.15em;border:.15em solid currentColor;border-radius:.15em;transform:translateY(-.075em);display:grid;place-content:center}input[type=checkbox]:before{content:"";width:.65em;height:.65em;clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%);transform:scale(0);transition:50ms transform ease-in-out;box-shadow:inset 1em 1em var(--accent)}input[type=checkbox]:checked:before{transform:scale(1)}input[type=checkbox]:focus{outline:max(2px,.15em) solid currentColor;outline-offset:max(2px,.15em)}input[type=checkbox]:disabled{--accent: var(--disabled);color:var(--disabled);cursor:not-allowed}.switch{position:relative;display:inline-block;width:60px;height:34px;flex:0 0 60px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;-webkit-transition:50ms;transition:50ms}.slider:before{position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:50ms;transition:50ms}input:checked+.slider{background-color:var(--accent)}input:focus+.slider{box-shadow:0 0 1px var(--accent)}input:checked+.slider:before{-webkit-transform:translateX(26px);-ms-transform:translateX(26px);transform:translate(26px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer;width:15rem}input[type=range]::-webkit-slider-runnable-track{background:#464646;height:.5rem;border-radius:4px}input[type=range]::-moz-range-track{background:#464646;height:.5rem;border-radius:4px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin-top:-3px;background-color:#929292;height:16px;width:16px;border-radius:4px}input[type=range]::-moz-range-thumb{border:none;border-radius:0;background-color:#929292;height:1rem;width:1rem}input[type=range]:focus{outline:none}input[type=range]:focus::-webkit-slider-thumb{border:1px solid #053a5f;outline:3px solid #053a5f;outline-offset:.125rem}input[type=range]:focus::-moz-range-thumb{border:1px solid #053a5f;outline:3px solid #053a5f;outline-offset:.125rem}a.btn{text-decoration:none}button{cursor:pointer;white-space:nowrap}button.btn{border:none;background-color:transparent;font-family:inherit;padding:0}a.btn,button.btn{display:inline-flex;justify-content:center;align-items:center;border-radius:.2em;color:var(--text-accent);line-height:1;text-align:center;padding:.3em}a.btn:hover,button.btn:hover{color:var(--text-highlight);background-color:hsla(var(--accent-h),var(--accent-s),var(--accent-l),.3)}button.btn.img{border-radius:0;border:1px solid black;padding:0}button.btn.icon-text{font-size:1em;line-height:1;gap:.5em}button.btn.icon-text>i{width:1em;height:1em}button.btn.icon{padding:.3em;font-size:1.2em}button.btn.solid{background-color:#343434;box-shadow:0 0 2px #000}button.btn:disabled{background-color:#222;box-shadow:0 0 2px #000;color:var(--disabled);cursor:not-allowed}.modal{min-width:200px;position:absolute;margin:100px;align-self:center;background-color:var(--modal-background);z-index:100;padding:.5em .6em;border-radius:10px;box-shadow:var(--modal-shadow)}.modal>h2{font-size:1.2em;margin-bottom:.5em}.modal-content{display:flex;flex-direction:column;gap:.4em}.input{font-size:16px;font-size:max(16px,1em);font-family:inherit;padding:.25em .5em;background-color:var(--base2);border:1px solid var(--input-border);border-radius:.2em;color:var(--text-inactive);transition:50ms ease-in-out}.input:not(textarea){line-height:1}.input:focus{border-color:hsl(var(--input-focus-h),var(--input-focus-s),var(--input-focus-l));color:var(--text-highlight);box-shadow:0 0 0 1px hsla(var(--input-focus-h),var(--input-focus-s),calc(var(--input-focus-l) + 60%),.8);outline:2px solid transparent}.input[type=number]::-webkit-inner-spin-button,.input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input[type=number]{text-align:center;font-family:monospace;-moz-appearance:textfield;border-radius:.3em}.has-dropdown{position:relative}.dropdown{opacity:0;position:absolute;display:flex;flex-direction:column;gap:.2em;background-color:var(--base1);padding:.3em;border-radius:.3em}.dropdown.align-right{right:0}.dropdown.above{bottom:calc(100% + .5em)}.has-dropdown:focus-within .dropdown{opacity:1;pointer-events:auto}.has-dropdown:focus-within .dropdown-toggle{background-color:#343434;box-shadow:0 0 2px #000}.radio-group{display:flex;box-shadow:0 0 3px #000;border-radius:.2em;align-items:center}.radio-group span{font-style:italic;padding:0 .4em}.radio-group button{border:none;background-color:var(--base0);font-family:inherit;padding:.2em .4em;border-radius:.2em;color:var(--text-inactive)}.radio-group button:hover{color:var(--text)}.radio-group button.selected{background-color:var(--base2)}@font-face{font-family:National Park;src:url(/blended-primitives/assets/NP-VariableVF-BTlbdYYf.woff2) format("woff2 supports variations"),url(/blended-primitives/assets/NP-VariableVF-BTlbdYYf.woff2) format("woff2-variations")}body{width:100vw;width:calc(var(--vw, 1vw) * 100);height:100vh;height:calc(var(--vh, 1vh) * 100);--font-size: 1rem;font-size:var(--font-size);font-family:National Park;display:flex;flex-direction:column;overflow:hidden}canvas{display:block}.grabbing{cursor:grabbing}.moving{cursor:move}.crosshair{cursor:crosshair}#site{flex:1;display:flex;-webkit-user-select:none;user-select:none;overflow:hidden}#view-pane{display:flex}.gutter{background-color:var(--base1);background-repeat:no-repeat;background-position:50%}.gutter.gutter-horizontal{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==);cursor:col-resize}#taskbar{display:flex;background-color:var(--base1);justify-content:space-between;align-items:center;padding:.3em;z-index:5;cursor:default}.site-title{font-size:1.2em;margin-left:.3em;cursor:default;color:var(--text-inactive)}.button-group{display:flex}.button-group>button{color:var(--text-inactive)}.button-group button.open{color:hsl(var(--accH),var(--accS),80%);background-color:hsla(var(--accH),var(--accS),var(--accL),.3)}#settings-modal{max-width:700px}.library-item{display:flex;justify-content:space-between;align-items:center}#chart-pane{display:flex;position:relative;overflow:hidden}.vector-overlay{pointer-events:none;box-shadow:inset 0 0 6px #00000080}.desktop{flex:1;position:relative;display:flex;flex-direction:column;justify-content:space-between}#svg-layer.blockMode{cursor:crosshair}.bottom-bars-container{box-shadow:0 0 6px #00000080;z-index:10;background-color:var(--base1);color:var(--text-inactive)}.chart-bottom-bar{display:flex;justify-content:space-between;align-items:center;width:100%;gap:.4em;padding:.2em 0 .2em .4em;font-size:.9em}.h-group{display:flex;align-items:center;gap:.4em}.mode-toggle{width:8em;justify-self:flex-start}.pointer-pos{font-family:monospace;font-size:.8em;width:9ch;display:flex;flex-direction:column;align-items:end}.chart-scale{font-family:monospace;font-size:.9em;display:flex;border:1px solid var(--base4);background-color:var(--base4);gap:1px}.chart-scale .input{z-index:1;font-size:1em;border:none;text-align:end;width:3em;border-radius:0}.spinners{display:flex;background-color:var(--base3);flex-direction:column}.spinners button{flex:1;border:0;outline:0;padding:0;border-radius:0;background-color:var(--base2);width:1em;line-height:0;color:var(--text-inactive)}.spinners button:hover{background-color:var(--base4);color:var(--text-highlight)}.mode-toolbar{position:relative;display:flex;align-items:center;gap:.4em;padding:.2em 0 .2em .4em;justify-content:space-between;font-size:.9em}.toolbar-message{font-style:italic}.area-size{font-family:monospace}.mode-toolbar{position:relative;display:flex;align-items:center;gap:.4em;padding:.2em 0 .2em .4em;justify-content:space-between}.mode-toolbar .dropdown{box-shadow:0 0 6px #00000080}.delete.btn{color:var(--text-inactive);display:flex;gap:.4em}.delete.btn:hover{color:#a52727;background-color:transparent}.picker-container{display:flex;align-self:flex-end;align-items:flex-start;opacity:0;margin:.4em;z-index:10;pointer-events:none}.picker-container.shown{opacity:1}.tool-picker{display:flex;align-items:center;gap:.3em;padding:.3em 0 .3em .3em;background-color:var(--base1);border-radius:.5em 0 0 .5em;pointer-events:all;z-index:1;box-shadow:0 0 6px #00000080}.block-size{font-family:monospace}.tool-picker button{width:40px;height:40px;border-radius:.4em;border:1px solid black}.tool-picker .btn.current{background-color:var(--accent);color:var(--base2)}.palette .close-picker{background-color:transparent;border:none}.palette{--color: var(--base0);display:flex;flex-direction:column;border-radius:0 .5em .5em;background-color:var(--base1);overflow:auto;padding:.3em;gap:.3em;pointer-events:all;box-shadow:0 0 6px #00000080}.palette button{flex:1 0 40px;width:40px;background-color:var(--color);padding:0;border:1px solid black;border-radius:.4em;overflow:hidden}.palette button.selected{outline:2px solid white;z-index:2}#sim-pane{display:flex;flex-direction:column;flex:1}#sim-container{position:relative;flex:1;overflow:hidden;box-shadow:inset 0 0 6px #00000080}.sim-action-bar{position:absolute;z-index:10;display:flex;gap:.3em;box-shadow:0 0 3px #00000080;border-radius:.5em;margin:.5em;padding:.4em;align-self:center;background-color:var(--base1)}.sim-action-bar button{display:flex;gap:.4em;padding:.4em}.sim-toolbar{background-color:var(--base1);color:var(--text-inactive);display:flex;justify-content:space-between;gap:.4em;padding:.2em .4em .2em 0;font-size:.9em}.panzoom-controls{display:flex}.panzoom-controls input[type=range]{width:5em}.mirrored>canvas{transform:scaleX(-1)}#canvas-container>canvas{position:absolute;top:0;left:0}#time-needle-pane{display:flex;overflow:hidden;flex:1}.time-needle-container{display:flex;gap:3px}#timeneedlebitmap{height:100%;image-rendering:pixelated}.yarn-assignments{position:absolute;z-index:2;display:flex;flex-direction:column-reverse;width:30px}.yarn-cell{display:flex;align-items:center;overflow:hidden;font-family:monospace;container-name:yarn;color:var(--base0);background-color:var(--color)}.yarn-cell div{flex:1}.yarn-cell span{position:absolute}.boundary{fill:transparent;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke:#454545}.boundaryMode.allowHover .boundary.inactive:hover{stroke:#fff;stroke-width:3;cursor:pointer}.background-path{fill:transparent;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke:#454545;filter:drop-shadow(0px 0px 2px rgba(0,0,0,.5))}.background-path-hover{fill:transparent;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke:transparent}.pathMode.allowHover .background-path-hover:hover{stroke:#fff;filter:drop-shadow(0px 0px 2px black)}.path{pointer-events:all}.path.bottom{stroke:#fff;filter:drop-shadow(0px 0px 2px black);stroke-width:4px;stroke-dasharray:10 4}.path.top{stroke:transparent;stroke-width:7px;stroke-dasharray:10 4;cursor:grab}.path.top:hover{stroke:#e0ff66;filter:drop-shadow(0px 0px 2px black)}.point{fill:#dfdfdf;stroke:#fff;r:6;stroke-width:2px;filter:drop-shadow(0px 0px 2px black);pointer-events:all;cursor:grab}.grabbing .path.top,.grabbing .point{cursor:grabbing}.point:hover{stroke:#e0ff66;fill:#e0ff66;stroke-width:3px}.showAnnotations .annotation-container,.showAnnotations .annotation{opacity:1}.annotation-container{opacity:0;stroke-width:2px;filter:drop-shadow(0px 0px 2px black)}.annotation{opacity:0;font-family:monospace;font-size:small;font-weight:700}.stitch-select-box{position:absolute;display:flex;justify-content:center}.stitch-select-box>svg{width:100%;height:100%;position:absolute}.stitch-select{stroke:#fff;stroke-width:8px;stroke-dasharray:10 4;fill:#ffffff49}.select-tools{position:absolute;display:flex;flex-direction:column;justify-content:center;gap:5px;height:100%}.add-block{z-index:1;padding:5px;line-height:1;cursor:pointer;white-space:nowrap}.block{position:absolute;display:flex;align-items:center;justify-content:center;outline:1px solid black}.block-inset-shadow{box-shadow:0 0 5px #000 inset;width:100%;height:100%;position:absolute;pointer-events:none}.block:hover .hover-overlay{opacity:1}.hover-overlay{opacity:0;display:flex;position:absolute;align-items:center;justify-content:center;width:100%;height:100%;outline:4px solid white;border:3px solid black;background-color:#ffffff3c}.move-block{cursor:grab;position:absolute;right:100%;top:100%;line-height:0;font-size:.9em;padding:.3em;border:1px solid black;border-radius:.5em}.grabbing .dragger,.grabbing .move-block{cursor:grabbing}.dragger{position:absolute;line-height:0;cursor:grab;display:inline-flex;align-items:center;border:1px solid black;justify-content:center}.dragger.up{bottom:100%;width:2em;border-radius:8px 8px 0 0}.dragger.down{top:100%;width:2em;border-radius:0 0 8px 8px}.dragger.left{right:100%;border-radius:8px 0 0 8px;height:2em}.dragger.right{left:100%;border-radius:0 8px 8px 0;height:2em}.yarn-panel{display:flex;flex-direction:column;z-index:10;padding:0 1px;background-color:var(--base1);box-sizing:content-box;justify-content:end}.yarn-row-assignments{position:absolute;bottom:0;display:flex;flex-direction:column-reverse;z-index:0}.yarn-row{position:relative;flex:1;display:flex}.yarn-row:hover:after{content:"";position:absolute;height:100%;width:100%;background-color:#ffffff49;pointer-events:none}.yarn-cell{flex:1}.yarn-panel.collapsed .yarn-cell{width:8px;max-width:8px}.yarn-panel.expanded .yarn-cell{width:25px;max-width:25px}.yarn-cell.active{background-color:var(--color)}.yarn-cell.inactive{background-color:#343434}.manage-yarns{background-color:var(--base1);z-index:2;position:relative}.yarn-btns{background-color:var(--base1);position:absolute;bottom:100%;min-width:fit-content;width:100%;display:flex;flex-direction:column;align-items:end;color:var(--text-inactive)}.yarn-btns div{padding:4px;width:25px;display:flex;align-items:center;justify-content:center;cursor:pointer}.yarn-btns div:hover{color:var(--text)}.available-yarns{display:flex;gap:1px}.edit-yarn{display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:var(--color);padding-top:8px;gap:8px}.yarn-panel.collapsed .edit-yarn{cursor:default;pointer-events:none}.yarn-panel.expanded .edit-yarn{cursor:pointer;pointer-events:all}.delete-yarn,.edit-yarn-icon{visibility:hidden;color:var(--base0)}.yarn-panel.expanded .edit-yarn:hover .delete-yarn,.yarn-panel.expanded .edit-yarn-icon{visibility:visible}.delete-yarn{background-color:var(--base0);width:100%;display:flex;justify-content:center;align-items:center;padding:4px 0}.delete-yarn button{padding:0;border:0;outline:0;color:var(--text-inactive);background-color:transparent}.delete-yarn button:hover{color:red}