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,.p3-input{flex-direction:column;display:flex;position:relative;left:-4vw}@media (width>=75rem){.p3-input{left:0}.p3-input input[type=text]{width:clamp(12.5rem,40vw,45rem)}.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-and-copy-button{position:relative}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}.copy-button{cursor:pointer;border:2px solid var(--black);vertical-align:middle;background:#fff;border-radius:clamp(.5rem,1vw,1rem);margin-left:.5vw;padding:.3em .6em;font-family:inherit;font-size:clamp(.6rem,1.2vw,1.2rem);transition:background-color .2s ease-in;position:absolute;top:50%;right:1vw;transform:translateY(-50%)}.copy-button:hover{background:var(--gray)}.copy-button:active{transform:scale(.95)translateY(-50%)}input[type=text][value=""]+.copy-button{display:none}.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)}