.example,output{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}.example:hover,a,a:hover,a:visited{text-decoration:underline}a,a:hover,a:visited{color:inherit}main{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;width:100%}footer{display:none;margin-top:auto;font-size:1.6rem}#display-alpha footer{align-self:flex-end}#display-beta footer{align-self:flex-start}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.color-display{width:100%;padding:4rem 2rem 2rem;display:flex;flex-direction:column;align-items:center;overflow-y:auto}.color-picker,.example{padding:0;cursor:pointer}@media (min-width:480px){main{flex-direction:row}.color-display{width:50%}footer{display:block}}.input-wrapper{display:flex;flex-wrap:nowrap;align-items:center;flex-shrink:0}.color-input,.color-picker{display:inline-block;outline:0}.color-input{width:100%;max-width:335px;text-align:center;margin:.2rem 1rem 1rem 4rem;font-size:3rem;line-height:4rem;background:0 0;border:none;color:#222;border-bottom:1px dotted rgba(0,0,0,.4)}.dark .color-input{color:#fff;border-bottom-color:rgba(255,255,255,.4)}.color-picker{width:3rem;height:3rem;flex-shrink:0;border:none;border-radius:100%;-webkit-appearance:none;background-color:transparent}.color-picker::-moz-color-swatch{border:1px solid rgba(0,0,0,.4)}.color-picker::-webkit-color-swatch{border:1px solid rgba(0,0,0,.4)}.dark .color-picker::-moz-color-swatch{border-color:rgba(255,255,255,.4)}.dark .color-picker::-webkit-color-swatch{border-color:rgba(255,255,255,.4)}.color-picker::-webkit-color-swatch-wrapper{padding:0}output{font-size:2.5rem;display:block}.output-additional{margin-top:1rem;text-align:center}.output-additional output{font-size:1.8rem}.contrast-ratio{background-color:#005aff;color:#000;font-size:2.2rem;font-weight:700;width:10rem;height:10rem;min-height:10rem;border-radius:100%;display:flex;align-items:center;justify-content:center}.contrast-ratio.wcag-fail{background-color:#c00;color:#fff}.contrast-ratio.wcag-aa{background-color:orange}.contrast-ratio.wcag-aaa{background-color:#d2e858}.example{border:0;color:inherit;font-size:1.7rem;font-weight:400;background-color:transparent}.light a,.light footer,.light output{color:#000}.dark a,.dark footer,.dark output{color:#fff}canvas{visibility:hidden}