*{box-sizing:border-box}:root{--font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif}:is(input,button,select,textarea){font-family:inherit}:root{--red: hsl(18 100% 50%);--green: hsl(130 52% 46%);--yellow: hsl(44 83% 53%);--blue: hsl(215 100% 53%);--grey: hsl(0 0% 45%);--text: #adb5bd;--transition: .2s;--valid: var(--green);--invalid: var(--red);--focus: var(--yellow);--blur: #f8f9fa;--disabled: var(--grey)}:where(html){background-color:transparent;color-scheme:none}body{display:grid;min-height:100vh;place-items:center;overflow:hidden;margin:0;background-color:#212529;font-size:1rem;font-family:var(--font)}form{display:grid;grid-gap:1rem}.form-group{--color: var(--blur);display:grid;grid-auto-flow:column;align-items:center;justify-content:flex-end}label{font-family:var(--font);display:flex;font-weight:700;padding-right:1rem;transform-style:preserve-3d;transition:color var(--transition);color:var(--color);font-size:1.25rem;grid-row:1}input{grid-row:1;border:4px solid var(--color);border-radius:4px;padding:.5rem .75rem;font-size:1.1rem;font-weight:600;transition:border-color var(--transition)}input:focus-visible{outline-color:var(--color)}input::-moz-placeholder{color:transparent}input::placeholder{color:transparent}button{padding:1rem 2rem;border-radius:4px;border:0;cursor:pointer;background:var(--disabled);font-weight:700;font-size:1.25rem;color:#adb5bd;transition:color var(--transition),background var(--transition)}.form-group:has(:invalid){--color: var(--invalid)}.form-group:has(:focus){--color: var(--focus)}.form-group:has(:valid){--color: var(--valid)}@media(prefers-reduced-motion:no-preference){.form-group:has(:valid) label span{display:inline-block;animation:jump .25s calc(var(--char-index) * .05s)}@keyframes jump{50%{transform:translateY(-50%)}}.form-group:has(:invalid:not(:focus):not(:-moz-placeholder)){animation:shake .2s}.form-group:has(:invalid:not(:focus):not(:placeholder-shown)){animation:shake .2s}@keyframes shake{0%,to{transform:translate(0)}20%,40%,60%,80%{transform:translate(-2%)}10%,30%,50%,70%,90%{transform:translate(2%)}}}.form-group:has(:-moz-placeholder:not(:focus)) label span{animation:none}.form-group:has(:placeholder-shown:not(:focus)) label span{animation:none}.form-group:has(:-moz-placeholder){--color: var(--blur)}.form-group:has(:placeholder-shown){--color: var(--blur)}.form-group:has(:invalid:not(:focus):not(:-moz-placeholder)) .form-group__error{display:block}.form-group:has(:invalid:not(:focus):not(:placeholder-shown)) .form-group__error{display:block}.form-group__input{position:relative}.form-group__error{display:none;white-space:nowrap;color:var(--red);font-size:.75rem;grid-row:2;grid-column:2;padding:.5rem;text-align:center}label span{display:inline-block}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}form:valid [type=submit]{background:var(--valid);color:#f1f3f5}