.swatch.numbered{counter-reset:crows 0}.swatch.numbered .crow{counter-increment:crows 1}.swatch.numbered .crow:before{content:counter(crows);color:#aaa;font-size:12px;position:absolute;margin:5px -15px}.swatch{margin:5px 0;width:fit-content;display:flex;flex-direction:column-reverse}.swatch .crow{display:flex;flex-direction:row}.swatch .crow:nth-child(2n){flex-direction:row-reverse}.swatch .stitch{border:1px solid black;width:12px;height:20px}.swatch.stacked .stitch,.swatch.ripple .stitch,.swatch.vstitchCluster .stitch{margin:1px}.swatch.moss.staggered:not(.colorSwallowed):not(.colorStretched) .crow:nth-child(2n){margin:0 15px}.swatch.moss:not(.staggered) .crow:nth-child(2n),.swatch.moss.colorSwallowed .crow:nth-child(2n),.swatch.moss.colorStretched .crow:nth-child(2n){margin-right:15px}.swatch.moss:not(.staggered) .crow:nth-child(odd),.swatch.moss.colorSwallowed .crow:nth-child(odd),.swatch.moss.colorStretched .crow:nth-child(odd){margin-left:15px}.swatch.moss .stitch{box-sizing:border-box;border:1px solid black;width:14px;height:28px;margin:1px 15px -14px 1px}.swatch.moss.numbered:not(.staggered) .crow:nth-child(odd):before,.swatch.moss.numbered.colorSwallowed .crow:nth-child(odd):before,.swatch.moss.numbered.colorStretched .crow:nth-child(odd):before{margin-left:-29px}.swatch.compact-moss.staggered:not(.colorSwallowed):not(.colorStretched) .crow:nth-child(2n){margin:0 3px}.swatch.compact-moss:not(.staggered) .crow:nth-child(2n),.swatch.compact-moss.colorSwallowed .crow:nth-child(2n),.swatch.compact-moss.colorStretched .crow:nth-child(2n){margin-right:3px}.swatch.compact-moss:not(.staggered) .crow:nth-child(odd),.swatch.compact-moss.colorSwallowed .crow:nth-child(odd),.swatch.compact-moss.colorStretched .crow:nth-child(odd){margin-left:3px}.swatch.compact-moss .stitch{box-sizing:border-box;border:1px solid black;width:3px;height:6px;margin:0 3px -3px 0}.swatch.compact-moss.numbered:not(.staggered) .crow:nth-child(odd):before,.swatch.compact-moss.numbered.colorSwallowed .crow:nth-child(odd):before,.swatch.compact-moss.numbered.colorStretched .crow:nth-child(odd):before{margin-left:-18px}.swatch.compact-moss .stitch{border-width:0}.swatch.hdc.staggered:not(.colorSwallowed):not(.colorStretched) .crow:nth-child(2n){margin:0 15px}.swatch.hdc:not(.staggered) .crow:nth-child(2n),.swatch.hdc.colorSwallowed .crow:nth-child(2n),.swatch.hdc.colorStretched .crow:nth-child(2n){margin-right:15px}.swatch.hdc:not(.staggered) .crow:nth-child(odd),.swatch.hdc.colorSwallowed .crow:nth-child(odd),.swatch.hdc.colorStretched .crow:nth-child(odd){margin-left:15px}.swatch.hdc .stitch{box-sizing:border-box;border:1px solid black;width:14px;height:28px;margin:1px 15px -8.4px 1px}.swatch.hdc.numbered:not(.staggered) .crow:nth-child(odd):before,.swatch.hdc.numbered.colorSwallowed .crow:nth-child(odd):before,.swatch.hdc.numbered.colorStretched .crow:nth-child(odd):before{margin-left:-29px}.swatch.granny.staggered:not(.colorSwallowed):not(.colorStretched) .crow:nth-child(2n){margin:0 20px}.swatch.granny:not(.staggered) .crow:nth-child(2n),.swatch.granny.colorSwallowed .crow:nth-child(2n),.swatch.granny.colorStretched .crow:nth-child(2n){margin-right:20px}.swatch.granny:not(.staggered) .crow:nth-child(odd),.swatch.granny.colorSwallowed .crow:nth-child(odd),.swatch.granny.colorStretched .crow:nth-child(odd){margin-left:20px}.swatch.granny .stitch{box-sizing:border-box;border:1px solid black;width:20px;height:20px;margin:0 20px -4px 0}.swatch.granny.numbered:not(.staggered) .crow:nth-child(odd):before,.swatch.granny.numbered.colorSwallowed .crow:nth-child(odd):before,.swatch.granny.numbered.colorStretched .crow:nth-child(odd):before{margin-left:-35px}.swatch.shell .crow:nth-child(2n){margin:0 19.5px}.swatch.shell .stitch{width:35px;height:20px;margin:-7.4px 2px 0;border:0;clip-path:polygon(0 40%,20% 15%,50% 0,80% 15%,100% 40%,50% 100%)}.swatch.v-stitch .stitch{width:20px;height:20px;border:0;clip-path:polygon(0 0,25% 0,50% 50%,75% 0,100% 0,50% 100%)}.swatch.clustered .cluster{display:flex;flex-direction:row}.swatch.clustered .crow:nth-child(2n) .cluster{flex-direction:row-reverse}.swatch.jasmine .stitch{width:30px;height:10px;border:1px solid black;border-radius:40%;position:absolute}.swatch.jasmine .cluster{position:relative;width:30px;height:30px}.swatch.jasmine .crow:nth-child(2n){margin-left:50px}.swatch.jasmine .crow:nth-child(2n) .stitch:nth-child(3n),.swatch.jasmine .crow:nth-child(2n) .stitch:only-child{transform:rotate(120deg);transform-origin:center left}.swatch.jasmine .crow:nth-child(2n) .stitch:nth-child(3n+2){transform:rotate(60deg);transform-origin:center left}.swatch.jasmine .crow:nth-child(odd) .stitch:nth-child(3n),.swatch.jasmine .crow:nth-child(odd) .stitch:only-child{transform:rotate(-120deg);transform-origin:center right}.swatch.jasmine .crow:nth-child(odd) .stitch:nth-child(3n+2){transform:rotate(-60deg);transform-origin:center right}.swatch.ripple .crow:nth-child(2n) .cluster:nth-last-child(odd),.swatch.ripple .crow:nth-child(odd) .cluster:nth-child(odd){transform:rotate(20deg)}.swatch.ripple .crow:nth-child(2n) .cluster:nth-last-child(odd) .stitch:first-child,.swatch.ripple .crow:nth-child(odd) .cluster:nth-child(odd) .stitch:first-child{transform:rotate(-20deg)}.swatch.ripple .crow:nth-child(2n) .cluster:nth-last-child(odd) .stitch:last-child,.swatch.ripple .crow:nth-child(odd) .cluster:nth-child(odd) .stitch:last-child{transform:rotate(-20deg)}.swatch.ripple .crow:nth-child(2n) .cluster:nth-last-child(2n),.swatch.ripple .crow:nth-child(odd) .cluster:nth-child(2n){transform:rotate(-20deg)}.swatch.ripple .crow:nth-child(2n) .cluster:nth-last-child(2n) .stitch:first-child,.swatch.ripple .crow:nth-child(odd) .cluster:nth-child(2n) .stitch:first-child{transform:rotate(20deg)}.swatch.ripple .crow:nth-child(2n) .cluster:nth-last-child(2n) .stitch:last-child,.swatch.ripple .crow:nth-child(odd) .cluster:nth-child(2n) .stitch:last-child{transform:rotate(20deg)}.vstitchCluster .cluster .stitch:first-child,.vstitchCluster .crow:nth-child(2n) .cluster .stitch:last-child{transform:rotate(-30deg)}.vstitchCluster .cluster .stitch:last-child,.vstitchCluster .crow:nth-child(2n) .cluster .stitch:first-child{transform:rotate(30deg)}.vstitchCluster .cluster .stitch:only-child{transform:rotate(0)!important}.ablockCluster .stitch{height:auto;width:auto;flex-grow:1}.ablockCluster .crow:nth-child(2n){margin:-13.5px 0 -13.5px 31.5px}.ablockCluster .crow:nth-child(2n) .cluster{transform:rotate(-45deg)}.ablockCluster .cluster{height:45px;width:45px;margin:0 18px 0 0;transform:rotate(45deg)}.overlapping-container{display:flex;flex-direction:column-reverse}.overlapping-container .ablockCluster{margin-bottom:-24px}.overlapping-container .ablockCluster .crow:nth-child(2n){margin:-18.9px 0 -18.9px 36.9px}.overlapping-container .ablockCluster.mirrored{transform:rotateY(180deg);margin-left:-18px}form{display:grid;grid-template-columns:max-content max-content;grid-gap:.75em;margin-bottom:.5em}form.wide-first-column{grid-template-columns:475px max-content}form.wide-first-column fieldset:first-child{width:450px}fieldset{width:max-content;border-radius:8px;border:1px solid #bbbbbb;padding:12px;margin:0}fieldset>div{margin-bottom:.5em;height:2em}fieldset>div:last-child{margin-bottom:0}fieldset .input-group,fieldset .color-segment{display:flex;align-items:center;justify-content:space-between;gap:.5em}.checkbox-input{position:relative;display:flex;align-items:center}.checkbox-input label{margin:0 .25em 0 .5em}.checkbox-input input[type=checkbox]{margin:0}.input-group{position:relative}.input-group label{display:inline-block}.integer-input .fa-circle-info{margin-left:.25em}.fa-circle-info{color:#005c70}.tooltip{background:#f0f8ff;padding:.25em;position:absolute;top:2em;left:0;z-index:2;border-radius:.5em;outline:1px solid #bbbbbb;box-shadow:#00000080 0 2px 10px;white-space:pre-line}.number-spinner{display:flex}.number-spinner input{width:3em}.number-spinner input::-webkit-outer-spin-button,.number-spinner input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.color-segment{display:flex;position:relative}.buttons{display:flex;align-items:flex-end;justify-content:left;gap:.5em}.color-preview{cursor:pointer;padding:.25em .5em;border:1px solid black;border-radius:4px;width:4em;line-height:1.5em;letter-spacing:1px}.popover{position:absolute;z-index:5;top:2em;left:4.25em}.popover.clickable-tooltip{top:0;left:0;width:100%}.cover{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1}@media (max-width: 775px){form{display:grid;grid-template-columns:1fr;grid-gap:.5em}form.wide-first-column{grid-template-columns:1fr}form.wide-first-column fieldset:first-child,fieldset{width:inherit}}footer{display:flex;align-items:center;gap:2em;background-color:#f0f8ff;border-top:1px solid #bbbbbb}footer .logo{width:100px;height:100px}.swatch-info-popover{position:fixed;top:0;right:0;background-color:#ffffffd9;padding:20px}.swatch-info-popover .info-heading{display:flex;justify-content:flex-end}.swatch-info-popover .info-heading.clickable-info-heading{cursor:pointer}.swatch-info-popover .info-heading .icon{cursor:pointer;padding:0 10px}.mini-vertical-preview{width:fit-content;height:fit-content;transform:rotate(90deg) translate(-75%,-25%)}.mini-vertical-preview .swatch.compact-moss{margin-top:0;margin-bottom:0}.mini-horizontal-preview{width:fit-content;height:fit-content}.mini-horizontal-preview .swatch.compact-moss{margin-top:0;margin-bottom:0}.flexy{display:flex;gap:10px;--fade-1-color: #9E7DB9;--fade-2-color: #CAB1E4;--fade-3-color: #E4D4F5;--fade-4-color: #F5E8FE;--fade-5-color: #CBF7FA;--fade-6-color: #7DF2E6}.flexy .marled-no-fade .stitch{background-image:linear-gradient(to bottom left,rgba(0,0,0,0) 50%,var(--fade-1-color) 50%)}.flexy .marled-no-fade .crow:nth-child(n+40) .stitch{background-image:linear-gradient(to bottom left,rgba(0,0,0,0) 50%,var(--fade-2-color) 50%)}.flexy .marled-no-fade .crow:nth-child(n+80) .stitch{background-image:linear-gradient(to bottom left,rgba(0,0,0,0) 50%,var(--fade-3-color) 50%)}.flexy .marled-no-fade .crow:nth-child(n+120) .stitch{background-image:linear-gradient(to bottom left,rgba(0,0,0,0) 50%,var(--fade-4-color) 50%)}.flexy .marled-no-fade .crow:nth-child(n+160) .stitch{background-image:linear-gradient(to bottom left,rgba(0,0,0,0) 50%,var(--fade-5-color) 50%)}.flexy .marled-no-fade .crow:nth-child(n+200) .stitch{background-image:linear-gradient(to bottom left,rgba(0,0,0,0) 50%,var(--fade-6-color) 50%)}.flexy .eight-row-color-fade .stitch{background-image:linear-gradient(to bottom left,rgba(0,0,0,0) 50%,var(--fade-1-color) 50%)}.flexy .eight-row-color-fade .crow:nth-child(36) .stitch,.flexy .eight-row-color-fade .crow:nth-child(39) .stitch,.flexy .eight-row-color-fade .crow:nth-child(41) .stitch,.flexy .eight-row-color-fade .crow:nth-child(42) .stitch,.flexy .eight-row-color-fade .crow:nth-child(n+44) .stitch{background-image:linear-gradient(to bottom left,rgba(0,0,0,0) 50%,var(--fade-2-color) 50%)}.flexy .eight-row-color-fade .crow:nth-child(76) .stitch,.flexy .eight-row-color-fade .crow:nth-child(79) .stitch,.flexy .eight-row-color-fade .crow:nth-child(81) .stitch,.flexy .eight-row-color-fade .crow:nth-child(82) .stitch,.flexy .eight-row-color-fade .crow:nth-child(n+84) .stitch{background-image:linear-gradient(to bottom left,rgba(0,0,0,0) 50%,var(--fade-3-color) 50%)}.flexy .eight-row-color-fade .crow:nth-child(116) .stitch,.flexy .eight-row-color-fade .crow:nth-child(119) .stitch,.flexy .eight-row-color-fade .crow:nth-child(121) .stitch,.flexy .eight-row-color-fade .crow:nth-child(122) .stitch,.flexy .eight-row-color-fade .crow:nth-child(n+124) .stitch{background-image:linear-gradient(to bottom left,rgba(0,0,0,0) 50%,var(--fade-4-color) 50%)}.flexy .eight-row-color-fade .crow:nth-child(156) .stitch,.flexy .eight-row-color-fade .crow:nth-child(159) .stitch,.flexy .eight-row-color-fade .crow:nth-child(161) .stitch,.flexy .eight-row-color-fade .crow:nth-child(162) .stitch,.flexy .eight-row-color-fade .crow:nth-child(n+164) .stitch{background-image:linear-gradient(to bottom left,rgba(0,0,0,0) 50%,var(--fade-5-color) 50%)}.flexy .eight-row-color-fade .crow:nth-child(196) .stitch,.flexy .eight-row-color-fade .crow:nth-child(199) .stitch,.flexy .eight-row-color-fade .crow:nth-child(201) .stitch,.flexy .eight-row-color-fade .crow:nth-child(202) .stitch,.flexy .eight-row-color-fade .crow:nth-child(n+204) .stitch{background-image:linear-gradient(to bottom left,rgba(0,0,0,0) 50%,var(--fade-6-color) 50%)}.squashed-swatch-container{display:flex}.squashed-swatch-container .swatchWrapper{cursor:pointer}.squashed-swatch-container .swatchWrapper.flip{transform:rotateY(180deg)}.squashed-swatch-container .swatchWrapper.selected{background-color:#bbf}.squashed-swatch-container .swatch.compact-moss{margin-right:-3px}body{margin:0}#root{display:grid;min-height:100dvh}main,footer{padding:24px}.container{display:flex;flex-direction:column;gap:.5em}