html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,menu,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,main,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}*[hidden]{display:none}body{line-height:1}menu,ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}body{font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;background:#def;color:#124;overflow-y:scroll}*{-webkit-box-sizing:border-box;box-sizing:border-box}pre{font-family:monospace;padding:0.125rem}
.app{margin:0 auto;padding:2.5rem 0.625rem 0.625rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:1.25rem;width:24.688rem}.app__headline{font-size:1.25rem}.app__doc-link{font-size:0.75rem;margin-left:1.25rem;color:inherit}.app__doc-link:hover{opacity:.3}

.image-preview{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:23.438rem;margin-bottom:1.25rem}.image-preview__arrow{height:1.875rem;line-height:1.875rem;font-size:1.625rem}.image-preview .canvas-container{position:relative;display:inline-block}.image-preview .canvas-container__download-btn{position:absolute;right:0.125rem;bottom:0.25rem;padding:0.25rem 0.25rem;background:rgba(255,255,255,.8);color:#000;border:1px solid #000;border-radius:5px;opacity:.5;-webkit-transition:opacity .3s ease;transition:opacity .3s ease;cursor:pointer;font-size:1rem}.image-preview .canvas-container__download-btn:hover{opacity:1;background:rgba(255,255,255,.9)}

.base-values{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:0.625rem}.base-values__values{margin-bottom:0.625rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.base-values__value{font-family:monospace;font-size:1.125rem;background:rgba(17,34,68,.2);padding:0.625rem 1.25rem}
.order-values{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;width:23.438rem;margin:1.25rem auto}.order-values__value{width:4.875rem;height:2.5rem;font-size:1.25rem;font-family:monospace;text-align:right;padding:0;margin:0.25rem 0;border:1px solid #124;-webkit-transition:height 300ms ease-in-out,margin 300ms ease-in-out,font-size 300ms ease-in-out;transition:height 300ms ease-in-out,margin 300ms ease-in-out,font-size 300ms ease-in-out}.order-values__value--disabled{height:0.75rem;margin:0 0 -1px 0;font-size:0.688rem;border:1px solid rgba(17,34,68,.2)}
.order-values{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;width:23.438rem}.order-values__value{width:4.875rem;height:2.5rem;font-size:1.25rem;font-family:monospace;text-align:right;padding:0;margin:0.25rem 0;border:1px solid #124;-webkit-transition:height 300ms ease-in-out,margin 300ms ease-in-out,font-size 300ms ease-in-out;transition:height 300ms ease-in-out,margin 300ms ease-in-out,font-size 300ms ease-in-out}.order-values__value--disabled{height:0.75rem;margin:0 0 -1px 0;font-size:0.688rem;border:1px solid rgba(17,34,68,.2)}
.single-code-preview__pattern{font-family:monospace;width:23.438rem;display:block;margin-bottom:1.25rem}
.images-preview{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;width:23.438rem;margin-bottom:1.25rem}.images-preview__buttons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;gap:1px;margin-bottom:1.25rem}.images-preview__button{border:none;-webkit-box-flex:1;-ms-flex:auto 1 1;flex:auto 1 1;-ms-flex-preferred-size:1.375rem;flex-basis:1.375rem;height:1.375rem;padding:0.125rem;background-color:#124;color:#def}.images-preview__button--active{opacity:.6}
.pattern-preview{position:relative;height:12.5rem}.pattern-preview__canvas{position:absolute;left:50%;-webkit-transform:translate(-50%);transform:translate(-50%);-webkit-box-shadow:rgba(17,34,68,.4) 0.125rem 0.125rem 0.188rem 1px;box-shadow:rgba(17,34,68,.4) 0.125rem 0.125rem 0.188rem 1px;margin:0 auto 0.625rem;width:65rem;-ms-interpolation-mode:nearest-neighbor;image-rendering:-webkit-optimize-contrast;image-rendering:pixelated}
.cubic-curve{-webkit-box-flex:15rem;-ms-flex:15rem 1 1;flex:15rem 1 1;margin-bottom:1.25rem}.cubic-curve__values{margin:0.625rem 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:0.5rem;border-top-style:solid;border-top-width:6px;border-top-left-radius:6px;border-top-right-radius:6px}.cubic-curve__slider{display:-webkit-box;display:-ms-flexbox;display:flex;gap:0.25rem;background-color:rgba(17,34,68,.2);padding-left:0.25rem}.cubic-curve__slider-input{-webkit-box-flex:1;-ms-flex:auto 1 1;flex:auto 1 1}.cubic-curve__slider-value{-webkit-box-flex:4.5rem;-ms-flex:4.5rem 0 0px;flex:4.5rem 0 0;width:4.5rem;text-align:right;font-family:monospace;background-color:#124;color:#def;padding:0.25rem 0 0.25rem 0.25rem;line-height:1.313rem;border:none}
.group-code-preview{overflow-x:scroll;padding:0.625rem 0;margin-bottom:2.5rem}.group-code-preview__pattern{font-family:monospace;width:23.438rem;display:block;margin-bottom:1.25rem}
.edit-group-pattern__curves{width:64rem;margin:0 -20.313rem;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;gap:0.5rem}
.tabs{width:23.438rem}.tabs__buttons{display:-webkit-box;display:-ms-flexbox;display:flex;gap:0.375rem}.tabs__button{display:block;background-color:#def;border:1px solid #000;text-align:left;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;padding:0.625rem;cursor:pointer}.tabs__button--active{background:#124;color:#def}.tabs__tabs{margin-top:1.25rem}.tabs__tab{display:none}.tabs__tab--active{display:block}