*,:after,:before{box-sizing:border-box}*{margin:0}body{line-height:1.5;-webkit-font-smoothing:antialiased}canvas,img,picture,video{display:block;max-width:100%}svg{display:inline-block;max-width:100%}button,input,select,textarea{font:inherit}button{cursor:pointer}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}#__next,#root{isolation:isolate}:root{--font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;--font-size:1.3rem;--background:#fff;--primary:#333;--ui-border:#595959;--ui-btn:#eee;--ui-hover:#e0e0e0;--ui-link:#00478f;--ui-shadow:rgba(0,0,0,.15);--ui-focus:rgba(0,208,255,.75);--pip-border:#595959;--alert-background:#ccf3ff;--preview-border:#9c9c9c}[data-theme=dark]{--background:#0a2051;--primary:#dde8ff;--ui-border:#bfbfbf;--ui-btn:#0b255d;--ui-hover:#093698;--ui-link:#94d3ff;--ui-shadow:rgba(0,73,255,.4);--pip-border:#093698;--preview-border:#2151b6}@media(display-mode:picture-in-picture)and (prefers-color-scheme:dark){[data-theme=dark]{--background:#0a2051;--primary:#dde8ff;--ui-btn:#0b255d;--ui-border:#bfbfbf;--ui-hover:#093698;--ui-shadow:rgba(0,73,255,.4);--pip-border:#093698;--preview-border:#2151b6}}@media(display-mode:picture-in-picture){:root{--font-size:1.1rem}}#unsupported-warning{background:var(--alert-background);border:2px solid #57caff;border-radius:4px;color:#000;margin-bottom:15px;max-width:80ch;padding:10px}#unsupported-warning h2{font-size:var(--font-size);line-height:1.2}body{background:var(--background);color:var(--primary);font-family:var(--font-family);margin:0}#app{margin:0 auto;max-width:80rem}main{padding:10px 50px}footer{padding:30px 50px 60px}p{max-width:80ch}a:not(.skip){color:var(--ui-link);font-weight:500;text-decoration:underline}a:not(.skip):focus,a:not(.skip):hover{text-decoration:none}#color-tools,#settings,#toolbar{align-items:center;display:flex;flex-wrap:wrap;gap:10px;padding:5px 0}:is(#color-tools,#settings,#toolbar) button svg{margin-inline-start:.4rem}@media(max-width:480px){#settings,#toolbar{grid-template-columns:1fr}}#save svg{height:16px;width:16px}ul#swatch-container{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding-inline-start:0;padding:10px 0}a.swatch{align-items:center;border-radius:10px;cursor:pointer;display:flex;flex-shrink:0;height:50px;justify-content:center;padding:5px;position:relative;text-decoration:none;width:50px}a.swatch svg{height:20px;width:20px}a.swatch:after{background:#0000004d;border-radius:5px;content:"";height:100%;left:0;opacity:0;position:absolute;top:0;transition:opacity .3s ease;width:100%}a.swatch:focus:after,a.swatch:hover:after{opacity:1}#color-tools button,#preview-area button,#toolbar button,select{align-items:center;background-color:var(--ui-btn);border:2px solid var(--ui-border);border-radius:4px;color:var(--ui-border);display:inline-flex;font-size:calc(var(--font-size) - .2rem);font-weight:600;height:35px;justify-content:center;padding:1px 6px;white-space:nowrap}:is(select,#preview-area button,#color-tools button,#toolbar button):focus,:is(select,#preview-area button,#color-tools button,#toolbar button):hover{background:var(--ui-hover)}:is(select,#preview-area button,#color-tools button,#toolbar button) svg{flex-shrink:0}h1{font-size:2rem;font-weight:700;line-height:1.1;margin-bottom:10px;margin-top:20px}h3{margin-bottom:5px}.flex-container{align-items:stretch;display:flex;flex-wrap:wrap;gap:24px}.flex-item{display:flex;flex:1 1 calc(33.333% - 16px);flex-direction:column;min-width:200px}@media(max-width:1000px){.flex-item{flex:1 1 calc(50% - 16px)}}@media(max-width:800px){.flex-item{flex:1 1 100%}#large-ratio{align-items:center}}.color-format{display:flex;justify-content:space-between}.color-picker-field{align-items:center;display:inline-flex}input[type=text]{background:var(--background);border:2px solid var(--ui-border);box-shadow:0 0 20px var(--ui-shadow);box-sizing:border-box;color:var(--primary);display:inline-block;font:inherit;font-size:var(--font-size);height:44px;padding:6px 12px;width:100%}button#bg-btn,button#fg-btn{position:relative}:is(button#fg-btn,button#bg-btn):after{background:#0000004d;content:"";height:100%;left:0;opacity:0;position:absolute;top:0;transition:opacity .3s ease;width:100%}:is(button#fg-btn,button#bg-btn):focus:after,:is(button#fg-btn,button#bg-btn):hover:after{opacity:1}#bg-eyedropper,#fg-eyedropper{align-items:center;background-color:var(--ui-btn);border:2px;border-left:0;border-color:var(--ui-border);border-radius:0 4px 4px 0;border-style:solid;display:flex;height:44px;justify-content:center;max-width:44px;min-width:44px;padding:0;width:44px}:is(#fg-eyedropper,#bg-eyedropper):focus,:is(#fg-eyedropper,#bg-eyedropper):hover{background-color:var(--ui-hover)}:is(#fg-eyedropper,#bg-eyedropper) svg path{fill:var(--ui-border)}.eyedropper-not-supported{border-radius:0 4px 4px 0}.color-picker-btn,input[type=color]{border:2px;border-bottom-left-radius:5px;border-right:0;border-color:var(--ui-border);border-style:solid;border-top-left-radius:5px;cursor:pointer;height:44px;min-height:44px;min-width:44px;padding:0;width:44px}input[type=color i]::-webkit-color-swatch-wrapper{border:0;padding:0}input[type=color i]::-webkit-color-swatch{border:0;border-radius:0}input[type=color i]::-moz-color-swatch{border:0;border-radius:0}.get-ratio{display:inline-block}#large-ratio .large-ratio-wrapper{text-align:center;width:180px}#large-ratio .get-ratio{font-size:2.3rem;font-weight:800}#results .get-ratio{font-size:calc(var(--font-size) + .1rem);font-weight:600;margin-inline-start:5px}#mini-preview{border-radius:5px;box-shadow:0 0 15px 0 var(--ui-shadow);display:inline-block;font-size:calc(var(--font-size) - .1rem);font-weight:600;padding:3px 6px}.divider{margin-inline-end:2px;margin-inline-start:2px}.header{align-items:baseline;display:flex;flex-wrap:wrap;margin-bottom:5px}.header h3{margin-inline-end:10px;white-space:nowrap}.header div{align-items:center;display:inline-flex;gap:6px}.header svg{flex-shrink:0;margin-inline-start:.4rem}.card{align-items:center;border-radius:6px;box-shadow:0 0 20px 0 var(--ui-shadow);display:flex;flex-direction:column;height:100%;justify-content:center;min-height:130px;overflow:visible;padding:20px;transition:background .2s}section{padding-top:20px}#saved-colors{padding-top:10px}.preview-border{border:2px dashed var(--preview-border);border-radius:7px;height:100%;padding:2px}#normal-preview{font-size:17px;line-height:1.1}#large-preview{font-size:24px;font-weight:600;line-height:1.1}#graphics-preview{display:flex;line-height:1}#graphics-preview #graphics-text{font-size:17px;line-height:1.1;padding-top:15px}#graphics-preview .icons{display:flex;flex-direction:row;justify-content:space-around;line-height:0;width:100%}#results{width:100%}#results .result{align-items:center;display:flex;font-size:var(--font-size);font-weight:500;justify-content:space-between;line-height:1.4;padding:3px 0}.aaagraphics,.aaalarge,.aaanormal,.badge,.graphics,.large,.normal{align-items:center;border-radius:6px;display:inline-flex;font-size:calc(var(--font-size) - .2rem);font-weight:700;line-height:1;padding:3px 5px}:is(.aaagraphics,.aaanormal,.aaalarge,.normal,.large,.graphics,.badge) svg{flex-shrink:0;margin-inline-start:5px}.pass{background-color:#36844e;color:#fff}.fail{background-color:#d30017;color:#fff}.select-dropdown{align-items:center;display:flex;position:relative}.select-dropdown:after{border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid var(--ui-border);content:" ";inset-inline-end:14px;position:absolute}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;min-width:220px;width:100%}details{background-color:var(--ui-btn);border:2px solid var(--ui-border);border-radius:4px;margin-bottom:10px;max-width:80ch;padding:0 1rem}details h3{padding-top:15px}summary{background:var(--ui-btn);cursor:pointer;margin:0 -1rem;padding:.6rem .9rem}summary:focus,summary:hover{background-color:var(--ui-hover)}summary h2{color:var(--ui-border);display:inline;font-size:calc(var(--font-size) - .2rem);font-weight:600;line-height:1}summary::marker{color:var(--ui-border)}details[open]>:last-child{margin-bottom:1rem;margin-top:.5rem}.unsupported,[hidden]{display:none!important}.sr-only{display:block;height:1px;overflow:hidden;padding:0;width:1px;clip:rect(1px,1px,1px,1px);border:0;clip-path:inset(50%);white-space:nowrap}.skip,.sr-only{position:absolute}.skip{top:-1000em}.skip:focus{background:var(--ui-hover);border:2px solid var(--ui-border);color:var(--text);display:block;font-size:1.2rem;font-weight:700;height:auto;left:10px;padding:.75rem 1rem;text-decoration:none;top:12px;width:auto;z-index:100000}[contenteditable],a.swatch,button,select{outline:0}:is(select,a.swatch,[contenteditable],button):focus-visible{outline:solid var(--ui-focus) 5px}#bg-eyedropper,#fg-eyedropper,a.skip,input,summary{outline:0}:is(summary,a.skip,#fg-eyedropper,#bg-eyedropper,input):focus-visible{outline:solid var(--ui-focus) 5px;outline-offset:-4px}p.alert{background:#ccf3ff;border-left:6px solid #2f7388;border-radius:4px;color:#000;font-weight:500;justify-content:space-between;line-height:1.1;margin-bottom:5px;max-width:50ch;padding:5px 10px 5px 20px}.close-btn,p.alert{align-items:center;display:flex}.close-btn{background:none;border:0;color:#2f7388;cursor:pointer;font-size:2rem;height:44px;justify-content:center;line-height:0;margin:0;width:44px}.close-btn:focus,.close-btn:hover{color:#16424f}html:is([lang=en],[lang=en-US]) p.improve-translation{display:none}p.improve-translation{align-items:center;display:flex;padding-top:2rem}p.improve-translation svg{margin-inline-end:5px}.non-pip{display:inline-block}.show-in-pip-only{display:none}.hide-in-pip{display:block}@media(display-mode:picture-in-picture){html{box-shadow:inset 0 0 0 3px var(--background);height:100%}#color-tools{max-width:250px}#color-tools button{flex:1 1 auto}#color-tools button svg{margin-inline-start:0}.show-in-pip-only{display:block}#large-ratio{display:none}.hide-in-pip{display:none!important}#pip-only{border-radius:4px;height:100%;padding:10px 15px 15px}.flex-container{align-items:flex-start;flex-direction:column;gap:10px}.lg-only{display:block;height:1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(1px,1px,1px,1px);border:0;clip-path:inset(50%);white-space:nowrap}section{padding-top:0}#ratio-label{font-size:1.1rem;font-weight:700}#results{margin-top:8px;max-width:250px}h3{font-size:1.05rem;margin-bottom:0}input[type=text].eyedropper-not-supported{max-width:210px}input[type=text]{font-size:var(--font-size);max-width:160px}}.popover{background:var(--background);border:2px solid var(--ui-shadow);border-radius:4px;box-shadow:0 20px 50px 0 var(--ui-shadow);padding:20px;position:absolute;transition:opacity .3s ease-out,transform .3s ease-out;z-index:99}hex-alpha-color-picker,hex-color-picker,hsl-string-color-picker,hsla-string-color-picker,rgb-string-color-picker,rgba-string-color-picker{height:225px;width:295px}.glow{border-radius:8px;box-shadow:0 0 0 1px #00000003;position:relative}.glow:after{animation:animateGlow 5s linear;animation-iteration-count:1;background:linear-gradient(270deg,#ff5770,#e4428d,#c42da8,#9e16c3,#6501de,#9e16c3,#c42da8,#e4428d,#ff5770);background-size:200% 200%;content:"";filter:blur(15px);height:100%;left:0;opacity:0;position:absolute;right:0;top:3px;transform:scale(.9) translateZ(0);width:100%;z-index:-1}@keyframes animateGlow{0%{background-position:0 50%;opacity:0}50%{background-position:100% 50%;opacity:1}to{background-position:200% 50%;opacity:0}}