: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(--base7);--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(--base8);--disabled: var(--base8);--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:10px}.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:.5em;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}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.btn{border:none;background-color:transparent;font-family:inherit;padding:0;cursor:inherit}a.btn,button.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;color:var(--text-accent);text-align:center;align-self:start;padding:.5em;cursor:pointer}a.btn:hover,button.btn:hover{color:var(--text-highlight);background-color:hsla(var(--accent-h),var(--accent-s),var(--accent-l),.3)}a.btn:focus,button.btn:focus{outline-style:solid;outline-color:transparent;box-shadow:0 0 0 2px hsla(var(--accent-h),var(--accent-s),var(--accent-l),.8)}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{aspect-ratio:1;padding:.3em;font-size:1.5em}button.btn.solid{background-color:#343434;box-shadow:0 0 2px #000}button.btn.solid:hover{background-color:#383838;box-shadow:0 0 4px #000}.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);border:1px solid #8d8d8d}.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(--base3);border:2px solid var(--input-border);border-radius:7px;color:var(--text-inactive);transition:.1s ease-in-out}.input:not(textarea){line-height:1;height:1.5rem}.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 3px hsla(var(--input-focus-h),var(--input-focus-s),calc(var(--input-focus-l) + 40%),.8);outline:3px 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}@font-face{font-family:National Park;src:url(/knitscape-2024/assets/NP-VariableVF-BTlbdYYf.woff2) format("woff2 supports variations"),url(/knitscape-2024/assets/NP-VariableVF-BTlbdYYf.woff2) format("woff2-variations")}body{--font-size: 1rem;width:100vw;width:calc(var(--vw, 1vw) * 100);height:100vh;height:calc(var(--vh, 1vh) * 100);font-size:var(--font-size);font-family:National Park;display:flex;flex-direction:column;overflow:hidden}#site{position:relative;flex:1;display:flex;-webkit-user-select:none;user-select:none;z-index:1;overflow:hidden}#taskbar{display:flex;background-color:var(--base1);justify-content:space-between;align-items:center;padding:.3em;z-index:5;cursor:default}#taskbar button{cursor:pointer}.site-title{font-size:1.2em;margin-left:.3em;cursor:default}.taskbar-buttons>button{color:var(--text-inactive)}.taskbar-buttons button.open{color:hsl(var(--accH),var(--accS),80%);background-color:hsla(var(--accH),var(--accS),var(--accL),.3)}#sim-pane{display:flex;flex-direction:column}#sim-container{position:relative;flex:1;overflow:hidden;box-shadow:inset 0 0 6px #00000080}.top{z-index:5}.mid{z-index:2}.bottom{z-index:0;filter:brightness(.7)}.mirrored>canvas{transform:scaleX(-1)}.sim-transform-group.right-side{display:flex;flex-direction:column}.sim-transform-group.wrong-side{display:flex;flex-direction:column-reverse}#back,#mid,#front{position:absolute;top:0;left:0}#chart-pane{display:flex;flex-direction:column}#chart-layout{position:relative;flex:1;display:flex;background-color:var(--base2);overflow:hidden}#desktop-container{flex:1;display:flex;overflow:hidden;box-shadow:inset 0 0 6px #00000080}#desktop{position:relative;box-shadow:inset 0 0 6px #00000080;display:flex;overflow:hidden;flex:1;align-items:flex-start}canvas{display:block}#canvas-transform-group{display:block;outline:1px solid black}#symbol-canvas{position:relative}.grid-canvas,.outline-canvas,#yarn-color-canvas{pointer-events:none;position:absolute;left:0;top:0}#repeat-container{position:absolute;left:0;top:0}.repeat-canvas-container{position:absolute;display:flex;justify-content:center}.repeat-bounds{position:absolute;z-index:2;bottom:0;left:0;outline:2px solid white;outline-offset:-2px;border:4px solid black;pointer-events:none;display:flex;align-items:center;justify-content:center}.repeat-area-dragger{position:absolute;border:0;display:flex;align-items:center;box-shadow:0 0 1px;pointer-events:all}.repeat-area-dragger>i{pointer-events:none}.repeat-area-dragger.y-axis{bottom:calc(100% + 4px);border-radius:12px 12px 0 0;padding:.3em .7em .2em}.repeat-area-dragger.x-axis{left:calc(100% + 4px);border-radius:0 12px 12px 0;padding:.7em .3em .7em .2em}.repeat-canvas{position:relative;display:block;outline:1px solid black;outline-offset:-1px;z-index:1}.repeat-ui{position:absolute;background-color:var(--base2);box-shadow:0 0 5px #000;border-radius:8px;display:flex;padding:5px;gap:5px;z-index:2}.repeat-controls{bottom:calc(100% + 8px);right:0}.move-repeat{cursor:move}.delete-repeat{position:absolute;z-index:10;top:100%}.resize-repeat{cursor:move;bottom:100%;left:100%;position:absolute}.resize-repeat>i{pointer-events:none}.repeat-ui .btn.solid{aspect-ratio:1}.resize-repeat{cursor:unset}.tool-picker{top:8px;right:8px;position:absolute;display:flex;gap:.4em;padding:.4em;border-radius:12px;box-shadow:0 0 4px #000;background-color:var(--base1);z-index:10;font-size:larger;align-items:center}.tool-picker .btn.current{background-color:var(--accent);color:var(--base2)}#yarn-sequence{position:absolute;right:calc(100% + 10px);bottom:0;display:flex;flex-direction:column;z-index:100}#yarn-sequence>button{width:100%;position:absolute;bottom:100%;border-radius:8px 8px 0 0;color:var(--text-inactive);overflow:hidden;padding:0}#yarn-sequence>canvas{outline:1px solid black}#left-bar{z-index:3;background-color:var(--base1);display:flex;flex-direction:column;gap:1em;padding:0 .6em;overflow-y:auto}.btn.add-repeat{align-self:stretch}#symbol-picker{display:flex;flex-direction:column;gap:.3em}#symbol-picker>.btn.img{align-self:stretch;justify-content:space-between;border-radius:8px;overflow:hidden}#symbol-picker>.btn.img div{writing-mode:vertical-lr;transform:rotate(180deg);display:flex;align-items:center;line-height:0;flex:1}.btn.img.current{outline:1px solid white;background-color:hsla(var(--accH),var(--accS),var(--accL),.3);color:var(--text-highlight)}.symbol-preview{width:50px;height:50px;display:block;background-color:#fff;image-rendering:pixelated}#yarn-picker{display:flex;flex-direction:column;gap:.4em}.btn.color-select{align-self:auto;flex:0 0 50px;padding:0;border-radius:8px;border:1px solid black;overflow:hidden;justify-content:space-between}.color-preview{aspect-ratio:1;height:100%;position:relative;background:var(--current)}.color-label{font-size:larger;font-weight:900;flex:1;line-height:0}#yarn-picker .btn.selected{outline:1px solid white;color:var(--text-highlight);background-color:hsla(var(--accH),var(--accS),var(--accL),.3)}.edit-color-btn{border:0;outline:0;padding:0;cursor:pointer;background-color:transparent;height:100%;width:100%}.edit-color-icon{color:var(--text-highlight);position:absolute;line-height:1;top:5px;left:5px}.edit-color-icon>i{line-height:0;text-shadow:0px 0px 2px black}.delete-color-button{position:absolute;display:flex;padding:0;border:0;outline:0;background-color:transparent;color:#343434;font-size:x-large;line-height:1;bottom:2px;right:2px;cursor:pointer}.delete-color-button:hover{color:red;text-shadow:0px 0px 3px black}#chart-size-controls{display:flex;align-items:center;gap:.4em;font-size:1em}.panzoom-controls{position:absolute;align-items:center;display:flex;gap:.3em;right:10px;bottom:10px;background-color:var(--base1);border-radius:10px;padding:.4em;box-shadow:0 0 4px #000}.panzoom-controls button{align-self:unset;cursor:pointer}.panzoom-controls input[type=range]{width:5em}#library-modal{max-width:700px}.library-item{display:flex;justify-content:space-between;align-items:center}#settings-modal{max-width:700px}#background-color-edit{width:100%;height:30px;font-size:.9em;color:#000}#repeat-library-button{font-size:inherit;aspect-ratio:1}#repeat-library{flex-direction:column;overflow:hidden}#repeat-library>h2{font-size:1.2em;padding:.4em;display:flex;justify-content:space-between;align-items:center;gap:.5em}#repeat-library-content{display:grid;grid-template-columns:auto auto auto;grid-auto-rows:40px;grid-row-gap:1px;overflow-y:auto;height:100%;transition:.15s}#repeat-library-content.open{height:400px;min-width:150px}#repeat-library-content.closed{height:0px;width:0px}.repeat-title{font-weight:600;text-align:end;display:flex;background-color:var(--modal-background);align-items:center;justify-content:end;padding:0 5px}.repeat-size{font-family:monospace;display:flex;background-color:var(--modal-background);align-items:center;justify-content:end;padding:0 8px}.repeat-library-canvas{display:flex;justify-content:center;background-color:var(--modal-background)}.repeat-library-canvas>canvas{height:100%;image-rendering:pixelated;outline:1px solid black;cursor:grab}.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}.gutter.gutter-vertical{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=);cursor:row-resize}.grabbing{cursor:grabbing!important}.grab{cursor:grab!important}.punchcard-preview{height:15rem;position:relative}#punchcard{height:100%;background-color:#fff;border-radius:5px;padding:5px}