:where(*){box-sizing:border-box}:where(body){font-synthesis:none;-webkit-font-smoothing:antialiased}
@font-face{font-family:"Contraster";font-style:normal;font-weight:400;font-display:swap;src:url(/Contraster.714fce97-829cfe.woff2)format("woff2")}
::selection{color:var(--bg-clr);background-color:var(--txt-clr)}a{font-weight:500;color:#636bff;text-decoration:inherit;&:hover{color:#535bf2}}body{margin:0;min-width:320px;min-height:100vh;color:var(--txt-clr);background-color:var(--bg-clr);font-family:"Helvetica Neue",Arial,"Zen Kaku Gothic New",sans-serif;line-height:1.5}#app{width:clamp(64vw,90rem,90vw);margin:0 auto;padding:4lvmax}.display{font-size:clamp(4rem,14vw,10rem);font-weight:700;line-height:1.2}#contrast-result{font-weight:700;line-height:1.2;>#ratio{display:inline-block;width:6ch;font-size:clamp(2rem,12vw,6rem)}>#evaluation{font-size:clamp(1rem,6vw,4rem)}}section{margin-top:48px}.input-wrapper{display:flex;gap:32px}@media screen and (width<801px){.input-wrapper{flex-direction:column}}.color-input{position:relative;color:var(--input-txt-clr);flex:1;label{font-size:clamp(12px,2vw,16px)}>.hex{--pd:.3ex;position:relative;border-bottom:1px solid rgba(200,200,200,.4);font-family:"Contraster",monospace;font-size:clamp(2rem,4vw,4rem);&:has(input:focus):after{width:100%}&:before{content:"#";position:absolute;top:var(--pd);left:calc(3*var(--pd));font:inherit;opacity:.4;pointer-events:none}&:after{content:"";position:absolute;left:0;bottom:0;width:0%;height:2px;background-color:currentColor;transition:width.2s}>input{padding:var(--pd);padding-left:calc(1ch + 4*var(--pd));transition:background-color.2s;&:hover{background-color:rgba(73,133,224,.2)}&:focus{outline:none}}}>.hsv{margin-top:16px}input{width:100%;color:inherit;background:none;border:none;font:inherit}}.range-input{--hue-bg:linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 66%, #f0f 83%, #f00 100%);--saturation-bg:linear-gradient(to right, #fff 0%, var(--cur-clr) 100%);--brightness-bg:linear-gradient(to right, #000 0%, #fff 100%);margin-top:8px;&:has([id=foreground-saturation]){--cur-clr:var(--saturation-fg-clr)}&:has([id=background-saturation]){--cur-clr:var(--saturation-bg-clr)}>input[type=range]{--size:18px;--thumb-bg-clr:#fff;--bdr-clr:#000;appearance:none;border:1px solid var(--bdr-clr);border-radius:100vh;filter:drop-shadow(0 0 1px#fff);overflow:hidden;&::-webkit-slider-runnable-track{height:var(--size)}&.hue::-webkit-slider-runnable-track{background-image:var(--hue-bg)}&.saturation::-webkit-slider-runnable-track{background-image:var(--saturation-bg)}&.brightness::-webkit-slider-runnable-track{background-image:var(--brightness-bg)}&::-webkit-slider-thumb{appearance:none;width:var(--size);height:var(--size);background-color:var(--thumb-bg-clr);border:2px solid var(--bdr-clr);border-radius:100vh}&::-moz-range-track{height:var(--size)}&.hue::-moz-range-track{background-image:var(--hue-bg)}&.saturation::-moz-range-track{background-image:var(--saturation-bg)}&.brightness::-moz-range-track{background-image:var(--brightness-bg)}&::-moz-range-thumb{width:calc(-2px + var(--size));height:calc(-2px + var(--size));background-color:var(--thumb-bg-clr);border:2px solid var(--bdr-clr);border-radius:100vh}}}.sample-sentence{margin-top:64px;font-size:16px;>.heading{font-size:2em;font-weight:700}>.en{margin-top:32px}}p{margin:16px 0}.bold{font-size:14pt;font-weight:700}.large{font-size:24px}
/*# sourceMappingURL=index_0505.0dacaf94.css.map */