body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}:root{--black:#333;--swatch-size:clamp(6.25rem, 10vw, 12.5rem);--gray:#ccc;--input-width:clamp(12.5rem, 34vw, 35rem);--label-offset:clamp(4.5rem, 9vw, 9rem)}.App{text-align:center;color:var(--black);padding-inline:2vw;font-family:Work Sans,Helvetica,sans-serif}.App-header{flex-direction:column;justify-content:center;align-items:center;font-size:calc(10px + 2vmin);display:flex}h1{margin:2vw auto 0}p{margin:2vw auto}.inputs,.named-input{flex-direction:column;display:flex;position:relative;left:-4vw}@media (width>=75rem){.named-input{left:0}.inputs{columns:2;display:block;left:0}}label{font-size:clamp(1rem,2vw,2rem);display:block}.label-text{width:var(--label-offset);text-align:right;display:inline-block}input[type=text]{width:var(--input-width);border:3px solid var(--black);background:#fff;margin-bottom:2rem;margin-left:1vw;padding:1.2vw;font-family:Work Sans,Helvetica,sans-serif;font-size:clamp(1rem,2vw,2rem);transition:border-color .2s ease-in,border-radius .2s ease-in,background-color .2s ease-in}.color-input-wrapper{width:var(--input-width);text-align:left;margin-bottom:2rem;margin-left:calc(2.2vw + 16px);display:inline-block}input[type=color]{position:relative;left:-1.2vw}input:focus{background-color:#ff03;border-color:#00f;border-radius:clamp(.5rem,1vw,1rem);outline:none}.swatch-wrapper{--square-size:calc(var(--swatch-size) / 5);--half-square:calc(var(--swatch-size) / 10);--neg-half-square:calc((var(--swatch-size) / 10) * -1);width:var(--swatch-size);height:var(--swatch-size);background-image:linear-gradient(45deg, var(--gray) 25%, transparent 25%), linear-gradient(-45deg, var(--gray) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--gray) 75%), linear-gradient(-45deg, transparent 75%, var(--gray) 75%);background-size:var(--square-size) var(--square-size);background-position:0 0, 0 var(--half-square), var(--half-square) var(--neg-half-square), var(--neg-half-square) 0px;margin-bottom:3rem;display:inline-block;position:relative}.swatch-wrapper:before{content:"";background-image:linear-gradient(90deg,#fff0 0%,#fff 70%);width:100%;height:100%;display:block;position:absolute;top:0;left:0}.swatch{width:var(--swatch-size);height:var(--swatch-size);display:inline-block;position:relative}.lch-warning{text-align:center;width:100%;margin-top:-2rem;display:block;position:absolute}.gamut-warning{box-sizing:border-box;width:100%;padding-inline-start:var(--label-offset);display:inline-block;position:relative;top:-1rem}footer{padding:3vw;line-height:1.4}footer a{color:var(--black)}