:root{--font:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;--font-mono:"Andale Mono","Monaco","Lucida Console",monospace;--color:#333;--background:#fff}html{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-family:var(--font);color:#333;color:var(--color);background:#fff;background:var(--background)}code,pre{font-family:Andale Mono,Monaco,Lucida Console,monospace;font-family:var(--font-mono)}body,html{margin:0;padding:0}body{padding:4rem 2rem}h1{font-weight:900;margin:0;text-align:center}h2{font-weight:300}#app{margin:3rem auto}.tagline{margin:1rem 0;color:#5e5e5e;font-size:1.25em;text-align:center}.tagline strong{font-weight:300}.by a{display:flex;justify-content:center;align-items:center;text-decoration:none}.by span{font-weight:700;background-image:linear-gradient(90deg,#6165ea,#5e4ff0);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.by svg{margin-left:.25em;width:1em;height:1em;color:#5e4ff0}.intro,.outro{color:#5e5e5e;margin:3rem 0;text-align:center;font-weight:300;line-height:1.5}.intro p+p,.outro p+p{margin-top:1rem}.intro p>code,.outro p>code{font-size:.875em;background:#eee;padding:.125em .25em;border-radius:.35em}.intro:after,.intro:before{content:"";width:2em;height:4px;background:#ddd;margin:3rem auto 2.5rem;display:block;border-radius:9999em}.intro .equals,.intro .plus{display:block;text-align:center;font-weight:300;background:linear-gradient(130deg,#2196f3,#9013ee);border-radius:.5rem;min-width:1.5rem;height:1.5rem;padding-top:.25rem;padding-left:.25rem;box-sizing:border-box;margin:1rem;color:#fff}.intro .equals svg,.intro .plus svg{display:block;width:1rem;height:1rem}.intro img{margin:0}.intro pre{margin:0;display:flex;justify-content:center}.outro a{color:inherit;-webkit-text-decoration-color:rgba(0,0,0,.15);text-decoration-color:rgba(0,0,0,.15)}.outro p{max-width:38em;margin:0 auto}.outro:after{content:"";width:2em;height:4px;background:#ddd;margin:3rem auto 2.5rem;display:block;border-radius:9999em}.example{display:flex;align-items:center;flex-direction:column;justify-content:center;max-width:30em;margin:2rem auto;text-align:left}.example>*{margin:.5rem 0}@media (min-width:47em){.example{flex-direction:row}.example>*{margin:0 .5rem}}.ingredients{text-align:left;display:flex;flex-direction:column;align-items:center}.ingredients,.ingredients>*{margin:1rem 0}.code pre{margin:0;font-size:.875em}.code pre+pre{margin-top:1rem}.original,.result{text-align:center}.original p,.result p{margin-top:2rem;font-size:1.25em}.original img,.result img{border-radius:1em;width:9rem;height:9rem}.image-tiles{display:flex;list-style:none;justify-content:center}.image-tiles,.image-tiles li{padding:0;margin:0}.image-tiles{margin-bottom:1.5rem}.image-tiles li{position:relative;margin:0 .25rem}.image-tiles input[type=radio]{display:none}.image-tiles label{cursor:pointer;display:block;border:0;padding:0;margin:0;width:3rem;height:3rem;background:transparent;border-radius:.5em}.image-tiles input:checked+label:after{border-radius:.75em;content:"";pointer-events:none;position:absolute;z-index:-1;left:-2px;right:-2px;bottom:-2px;top:-2px;background-image:linear-gradient(90deg,#2196f3,#9013ee)}.image-tiles input:checked+label:before{border-radius:.63125em;content:"";pointer-events:none;position:absolute;z-index:1;left:0;right:0;bottom:0;top:0;box-shadow:inset 0 0 0 1px hsla(0,0%,100%,.75)}.image-tiles img{display:block;width:3rem;height:3rem;-o-object-fit:cover;object-fit:cover;border-radius:.63125em;filter:url(#filter)}.image-tiles input[type=file]{opacity:0}.image-tiles .custom,.image-tiles input[type=file]{display:block;width:3rem;height:3rem}.image-tiles input[type=file]{position:absolute;left:0;top:0}.image-tiles .custom{display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.5rem;font-weight:200;color:#ccc;border-radius:.63125rem;box-shadow:inset 0 0 0 1px #ddd}.color-matrix-mixer{width:-webkit-fit-content!important;width:-moz-fit-content!important;width:fit-content!important;max-width:60em;margin-left:auto;margin-right:auto;--cmm-button-cta-background-image:linear-gradient(130deg,#2196f3,#9013ee)}.copied{position:fixed;left:50%;top:1em;background:#fff;font-weight:400;font-size:.875em;padding:.3125em 1.5em;border-radius:999em;box-shadow:0 .125em .25em rgba(0,0,0,.25);pointer-events:none;opacity:0;transition:transform .1s,opacity .1s;transform:translateY(-1em) translateX(-50%)}.copied[data-state=visible]{opacity:1;transform:translateY(0) translateX(-50%)}.powered{display:flex;justify-content:center;align-items:top;margin:2rem 0 0;font-weight:400;text-align:center;color:#404147}.powered a{text-decoration:none;margin-left:.25rem;color:inherit}code[class*=language]{color:#212121}code[class*=language] .comment{color:#9398a2}.language-html .punctuation,code[class*=language] .string{color:#d86a1b}.language-html .attr-name{color:#8d30b5}.language-html .attr-value{color:#d86a1b}.language-html .attr-equals{color:#212121}.language-html .punctuation{color:#88a6d7}.language-html .doctype,.language-html .tag{color:#245fc0}.attr-value .language-css{color:#212121}.language-css .rule{color:#8d30b5}.language-css .punctuation{color:#777}.language-css .property{color:#245fc0}.language-css .selector{color:#d72a65}