@font-face{font-family:Geist Sans;src:url(https://assets.codepen.io/605876/GeistVF.ttf) format("truetype")}:root{--success: hsl(140 80% 40%);--error: hsl(10 80% 40%);--input: hsl(0 0% 0%);--outline: hsl(0 0% 20%);color-scheme:dark only}*{box-sizing:border-box}body{min-height:100vh;display:grid;place-items:center;font-family:Geist Sans,SF Pro,sans-serif;font-weight:100;color:#fafafa}.form-group{--active: 0;container-type:inline-size;flex:1}form{width:40ch;display:flex}input{--valid: 0;--invalid: 0;background-image:linear-gradient(var(--input),var(--input)),linear-gradient(var(--success),var(--success)),linear-gradient(var(--error),var(--error));background-color:var(--outline);background-origin:padding-box,border-box,border-box;background-clip:padding-box,border-box,border-box;background-position:50% 50%,calc((1 - var(--valid, 0)) * 100cqi) 0,calc(-100cqi + (var(--invalid) * -100cqi)) 0;background-repeat:no-repeat;border:3px solid transparent;font-size:2rem;padding:1rem 2rem;max-width:100%;width:100cqi;color:#ccc;font-family:Geist Sans,SF Pro,sans-serif;font-weight:40;border-radius:12px;outline:none;box-shadow:0 .5px #ffffffbf inset}label{margin-bottom:.5rem;display:inline-block;padding-left:2rem;opacity:calc(var(--active) + .45);transition:opacity .5s}.form-group:focus-within{--active: 1}input:user-invalid{--invalid: -1}input:valid{--valid: 1}input::-moz-placeholder{color:transparent}input::placeholder{color:transparent}@media(prefers-reduced-motion:no-preference){input{transition:background-position .5s}}