.field{background-color:var(--field-bg,var(--c-light-indigo-tint));border-radius:var(--r-8);box-shadow:inset 0 0 0 1.5px var(--field-bg,var(--c-light-indigo-tint));color:var(--field-text,var(--c-indigo));font:500 var(--f-body-sm);padding:0 .75rem;transition:box-shadow .2s;display:block}.field:focus-within{outline:2px solid var(--field-line,var(--c-purple));outline-offset:2px}.field:has(:is(input,textarea,select):disabled){box-shadow:inset 0 0 0 1.5px var(--c-light-grey);color:var(--c-light-grey);cursor:not-allowed}.field:has(:is(input,textarea,select):disabled) .label{color:var(--c-light-grey)}.field:has(:is(input,textarea,select):required) .label:after{content:"*"}.field:has(:is(input,textarea,select):user-invalid){box-shadow:inset 0 0 0 1.5px var(--c-error)}.field:has(:is(input,textarea,select):user-invalid) .label{color:var(--c-error)}.field :is(input,textarea,select){color:inherit;font:inherit;background-color:#0000;border:0;width:100%;height:100%;font-size:max(1rem,1em);display:block}.field :is(input,textarea,select):focus{outline:none}.field>:is(input,textarea)::placeholder{color:#0000;opacity:1}.field>:is(input,textarea):focus::placeholder{color:color-mix(in srgb, currentcolor 60%, transparent);transition:color .15s .15s}.field .label{color:var(--field-text,var(--c-indigo));pointer-events:none;transform-origin:0 0;transition:inset-block-start .2s,translate .2s,scale .2s;position:absolute;inset-block-start:1.5rem;inset-inline-start:.8125rem;translate:0 -50%}.field:focus-within .label,.field:has(input:not(:placeholder-shown),textarea:not(:placeholder-shown),option:checked:not([value=""])) .label{translate:0 -100%;scale:.75}
