:where(.input){--c:var(--primary);--on-c:var(--on-accent);--icon-c:var(--c);--lh:0;--fp:0;--ifs:0;--vp:0;--ifp:0;--pp:0%;--input-affordance-w:38px;--aff-icon:0;--aff-reveal:0;--aff-loading:0;--aff-end:calc(var(--aff-icon) + var(--aff-reveal) + var(--aff-loading));flex-direction:column;max-width:100%;display:inline-flex;position:relative}.input:has(.input__icon--after){--aff-icon:1}.input:has(.input__reveal){--aff-reveal:1}.input:has(.input__loading){--aff-loading:1}:where(.input--block){width:100%;display:flex}:where(.input--label-placeholder){margin-top:var(--space-8)}.input__progress{margin-top:var(--space-3);height:2px;margin-left:var(--space-6);margin-right:var(--space-6);background:rgb(var(--gray-2));border-radius:var(--rad-xs);position:relative;overflow:hidden}.input__progress-bar{border-radius:inherit;max-width:100%;height:100%;padding:0 var(--space-6);transition:width var(--dur) var(--ease-standard);background:rgb(var(--c))}.input__progress--danger .input__progress-bar{background:rgb(var(--danger))}.input__progress--warn .input__progress-bar{background:rgb(var(--warn))}.input__progress--success .input__progress-bar{background:rgb(var(--success))}:where(.input__field){border-radius:var(--rad-md);isolation:isolate;align-items:center;max-width:100%;display:flex;position:relative}.input__focus-bloom{z-index:1;border-radius:inherit;pointer-events:none;position:absolute;inset:0;overflow:hidden}.input__focus-bloom-fx{left:var(--bx,0);top:var(--by,0);width:var(--bsize,0);height:var(--bsize,0);border-radius:var(--rad-circle);background:radial-gradient(circle, rgb(var(--c,25 91 255) / .18) 0%, rgb(var(--c,25 91 255) / .18) 78%, color-mix(in oklab, rgb(var(--c,25 91 255) / .18), white 24%) 92%, rgb(var(--c,25 91 255) / .18) 100%);will-change:transform, opacity;contain:layout paint style;backface-visibility:hidden;transform-origin:50%;opacity:0;position:absolute}[data-theme=dark] .input__focus-bloom-fx{background:radial-gradient(circle, rgb(var(--c,25 91 255) / .24) 0%, rgb(var(--c,25 91 255) / .24) 78%, color-mix(in oklab, rgb(var(--c,25 91 255) / .24), white 30%) 92%, rgb(var(--c,25 91 255) / .24) 100%)}.input__field:has(.input__label--label){margin-top:var(--space-8)}.input:has(.input__label-block) .input__field{margin-top:var(--space-8)}.input--shape-square .input__field,.input--variant-border .input__field{border-radius:0}.input--variant-shadow .input__field{background:0 0}:is(.input__field:has(.input__icon) .input__el,.input__field:has(.input__icon) .input__mask){min-width:calc(var(--mask-len,0) * 1ch + 64px)}:is(.input:has(.input__icon:not(.input__icon--after)) .input__el,.input:has(.input__icon:not(.input__icon--after)) .input__mask){padding-inline-start:calc(var(--input-affordance-w) + 2px * var(--fp))}:is(.input:has(.input__icon--after) .input__el,.input:has(.input__icon--after) .input__mask,.input:has(.input__reveal) .input__el,.input:has(.input__reveal) .input__mask,.input:has(.input__loading) .input__el,.input:has(.input__loading) .input__mask){padding-inline-end:calc(var(--input-affordance-w) * var(--aff-end) + 2px * var(--fp))}.input__underline{background:rgb(var(--text) / .25);pointer-events:none;width:100%;height:2px;position:absolute;bottom:0;left:0}.input__underline:after{content:"";width:calc(100% * var(--fp));background:rgb(var(--c));height:100%;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.input__loading{inset-inline-end:calc(7px + (var(--aff-end) - var(--aff-loading)) * var(--input-affordance-w));pointer-events:none;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.input__shadow{border:2px solid rgb(var(--c) / calc(.45 * var(--fp)));border-radius:inherit;box-shadow:0 calc(14px + 14px * var(--fp)) calc(32px + 28px * var(--fp)) -6px rgb(0 0 0/calc(.22 + .06 * var(--fp))), 0 calc(5px + 13px * var(--fp)) calc(12px + 28px * var(--fp)) -2px rgb(var(--c) / calc(.32 * var(--fp))), 0 0 0 calc(6px * var(--fp)) rgb(var(--c) / calc(.1 * var(--fp)));pointer-events:none;z-index:0;position:absolute;inset:0}.input__el{width:200px;min-width:calc(var(--mask-len,0) * 1ch + 32px);min-height:38px;padding:var(--space-2) calc(13px + 5px * var(--fp));border-radius:inherit;background:rgb(var(--gray-2));color:rgb(var(--text));font-family:inherit;font-size:var(--fs-md);font-variant-numeric:tabular-nums;box-sizing:border-box;text-overflow:ellipsis;border:2px solid #0000;outline:none;line-height:1.2}.input--block .input__el{width:100%;min-width:0}.input__el:disabled{opacity:.5;cursor:not-allowed}@media (pointer:coarse){.input__el,.input__mask{font-size:max(16px,1em)}}.input__el:-webkit-autofill{-webkit-text-fill-color:rgb(var(--text));caret-color:rgb(var(--text));transition:background-color 100000s}.input__el:-webkit-autofill:hover{-webkit-text-fill-color:rgb(var(--text));caret-color:rgb(var(--text));transition:background-color 100000s}.input__el:-webkit-autofill:focus{-webkit-text-fill-color:rgb(var(--text));caret-color:rgb(var(--text));transition:background-color 100000s}.input__el:-webkit-autofill:active{-webkit-text-fill-color:rgb(var(--text));caret-color:rgb(var(--text));transition:background-color 100000s}.input__el:autofill{-webkit-text-fill-color:rgb(var(--text));caret-color:rgb(var(--text))}.input__el::-ms-reveal{display:none}.input__el::-ms-clear{display:none}.input__el::-webkit-credentials-auto-fill-button{visibility:hidden;pointer-events:none;width:0;margin:0;display:none!important}.input__el::-webkit-strong-password-auto-fill-button{visibility:hidden;pointer-events:none;width:0;margin:0;display:none!important}.input__el[type=password]{font-variant-numeric:normal}.input__el.input__el--slot{align-items:center;gap:var(--space-3);width:auto;min-width:200px;max-width:100%;min-height:38px;padding-top:0;padding-bottom:0;display:flex}.input--block .input__el.input__el--slot{width:100%;min-width:0}.input__mask{padding:var(--space-2) calc(13px + 5px * var(--fp));box-sizing:border-box;font:inherit;font-size:var(--fs-md);font-variant-numeric:tabular-nums;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;color:rgb(var(--text) / .4);z-index:1;border:2px solid #0000;align-items:center;display:flex;position:absolute;inset:0;overflow:hidden}.input__mask-typed{color:#0000}.input__mask-rest{color:inherit}.input__reveal{inset-inline-end:calc(4px + var(--aff-icon) * var(--input-affordance-w));border-radius:var(--rad-sm);cursor:pointer;width:32px;height:32px;color:inherit;opacity:.7;transition:opacity var(--dur) var(--ease-standard);background:0 0;border:0;justify-content:center;align-items:center;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.input__reveal:hover{opacity:1}.input--variant-border .input__el{background:0 0;border-radius:0}.input--variant-shadow .input__el{background:0 0;border:2px solid #0000;border-radius:0}.input--transparent .input__el{background:0 0!important}.input--state-primary .input__el,.input--state-success .input__el,.input--state-danger .input__el,.input--state-warn .input__el,.input--state-dark .input__el{background:rgb(var(--c) / calc(.1 + .04 * var(--fp)));color:rgb(var(--c))}.input__icon{inset-inline-start:0;-webkit-user-select:none;user-select:none;background:rgb(var(--gray-2));border-radius:inherit;width:36px;height:38px;color:color-mix(in oklab, rgb(var(--text) / .4), rgb(var(--icon-c)) calc(var(--fp) * 100%));pointer-events:none;z-index:2;border:0;justify-content:center;align-items:center;margin:auto 0;display:flex;position:absolute;top:0;bottom:0;overflow:hidden}.input__icon--after{inset-inline:auto 0}.input__icon--clickable{pointer-events:auto;cursor:pointer}.input__icon--clickable:hover{color:rgb(var(--icon-c));transform:translate(-6px,-6px);box-shadow:12px 14px 24px -4px #00000038,6px 6px 12px -2px #0000001a}.input__icon--clickable.input__icon--after:hover{transform:translate(6px,-6px);box-shadow:-12px 14px 24px -4px #00000038,-6px 6px 12px -2px #0000001a}.input__icon:not(.input__icon--after){transform:translate(calc(-6px * var(--fp)), calc(-6px * var(--fp))) scale(calc(1 + .18 * var(--ifs)));transform-origin:50%;box-shadow:calc(8px + 4px * var(--fp)) calc(4px + 10px * var(--fp)) calc(16px + 8px * var(--fp)) -4px rgb(0 0 0/calc(.16 + .06 * var(--fp))), calc(3px + 3px * var(--fp)) calc(2px + 4px * var(--fp)) calc(6px + 6px * var(--fp)) -2px rgb(0 0 0/calc(.08 + .02 * var(--fp)))}.input__icon--after{transform:translate(calc(6px * var(--fp)), calc(-6px * var(--fp))) scale(calc(1 + .18 * var(--ifs)));transform-origin:50%;box-shadow:calc(-8px - 4px * var(--fp)) calc(4px + 10px * var(--fp)) calc(16px + 8px * var(--fp)) -4px rgb(0 0 0/calc(.16 + .06 * var(--fp))), calc(-3px - 3px * var(--fp)) calc(2px + 4px * var(--fp)) calc(6px + 6px * var(--fp)) -2px rgb(0 0 0/calc(.08 + .02 * var(--fp)))}.input__icon-glyph{z-index:1;justify-content:center;align-items:center;display:flex;position:relative}.input__icon-glyph--reveal{color:rgb(var(--icon-c));clip-path:circle(calc(var(--icon-fill-size) / 2 * var(--ifp)) at var(--icon-fill-x) var(--icon-fill-y));pointer-events:none;z-index:2;position:absolute;inset:0}.input__icon-ripple{left:var(--icon-fill-x);top:var(--icon-fill-y);width:var(--icon-fill-size);height:var(--icon-fill-size);border-radius:var(--rad-circle);background:rgb(var(--icon-c));pointer-events:none;opacity:var(--ifp);transform:translate(-50%, -50%) scale(calc(.05 + .95 * var(--ifp)));z-index:0;will-change:transform, opacity;position:absolute}.input--icon-fill-bg.input--focused .input__icon,.input--icon-fill-bg .input__icon--clickable:hover{color:rgb(var(--on-icon-c,var(--on-c)))}.input--variant-border .input__icon,.input--variant-border .input__icon--after,.input--variant-border .input__icon--clickable:hover{box-shadow:none;background:0 0}.input--variant-border .input__icon,.input--variant-border .input__icon--after{color:color-mix(in oklab, rgb(var(--text) / .25), rgb(var(--c)) calc(var(--fp) * 100%));transform:scale(calc(1 + .18 * var(--fp) + .15 * var(--ifs)));transform-origin:50%}.input--variant-shadow .input__icon,.input--variant-shadow .input__icon--after{box-shadow:none;z-index:2;transform-origin:50%;transform:scale(calc(1 + .25 * var(--fp) + .15 * var(--ifs)));color:color-mix(in oklab, rgb(var(--text) / .4), rgb(var(--c) / .45) calc(var(--fp) * 100%));background:0 0}.input--state .input__icon,.input--state .input__icon--after{color:rgb(var(--c));box-shadow:none;transform-origin:50%;transform:scale(calc(1 + .18 * var(--fp) + .15 * var(--ifs)));background:0 0}.input__label{inset-inline-start:calc(13px + 7px * max(var(--fp), var(--vp)));font-size:var(--fs-md);cursor:text;-webkit-user-select:none;user-select:none;pointer-events:none;height:100%;opacity:calc(var(--placeholder-opacity) * (1 - max(var(--fp), var(--vp))));color:rgb(var(--text));transform-origin:0;align-items:center;display:flex;position:absolute;top:0}.input__label--placeholder{transform:translateY(calc(-80% * var(--lh)));font-size:calc(var(--fs-md) - .1rem * var(--lh));opacity:calc(var(--placeholder-opacity) + (1 - var(--placeholder-opacity)) * var(--lh));color:color-mix(in oklab, rgb(var(--text)), rgb(var(--c)) calc(var(--lh) * 100%));inset-inline-start:calc(13px + (.8rem - 13px) * var(--lh))}.input:has(.input__label--placeholder:not(.input__label--fallback)) .input__label--fallback{display:none}.input__label--label{inset-inline-start:.8rem;height:auto;margin-bottom:var(--space-2);opacity:1;font-size:var(--fs-sm);color:color-mix(in oklab, rgb(var(--text) / .7), rgb(var(--c)) calc(var(--fp) * 100%));top:auto;bottom:100%}:is(.input:has(.input__icon:not(.input__icon--after)) .input__label,.input:has(.input__icon:not(.input__icon--after)) .input__label--placeholder){inset-inline-start:calc(var(--input-affordance-w) + 6px)}.input:has(.input__icon:not(.input__icon--after)) .input__label--label{inset-inline-start:.8rem}.input--state-primary .input__label,.input--state-success .input__label,.input--state-danger .input__label,.input--state-warn .input__label,.input--state-dark .input__label{color:rgb(var(--c))}.input__label-block{height:var(--space-8);font-size:var(--fs-sm);-webkit-user-select:none;user-select:none;pointer-events:none;color:color-mix(in oklab, rgb(var(--text) / .7), rgb(var(--c)) calc(var(--fp) * 100%));align-items:center;display:flex;position:absolute;inset-inline-start:.8rem}.input>.input__label-block{top:0}.input__field>.input__label-block{top:calc(-1 * var(--space-8))}.input--state-primary .input__label-block,.input--state-success .input__label-block,.input--state-danger .input__label-block,.input--state-warn .input__label-block,.input--state-dark .input__label-block{color:rgb(var(--c))}.input__message{font-size:var(--fs-sm);padding:var(--space-1) var(--space-4) 0;color:rgb(var(--c))}:where(.textarea){--c:var(--primary);--on-c:var(--on-accent);--lh:0;--fp:0;--vp:0;flex-direction:column;gap:0;display:inline-flex;position:relative}:where(.textarea--block){width:100%;display:flex}:is(.textarea:has(.textarea__label-block),.textarea:has(.textarea__label--label),.textarea:has(.textarea__label--placeholder)){padding-top:var(--space-8)}.textarea__label-block{inset-inline-start:.8rem;font-size:var(--fs-sm);-webkit-user-select:none;user-select:none;color:color-mix(in oklab, rgb(var(--text) / .7), rgb(var(--c)) calc(var(--fp) * 100%));line-height:1.4;position:absolute;top:0}.textarea--state .textarea__label-block{color:rgb(var(--c))}.textarea__field-wrap{border-radius:var(--rad-md);background:rgb(var(--gray-2));display:flex;position:relative}.textarea--block .textarea__field-wrap{width:100%}.textarea__field{z-index:1;width:200px;min-height:80px;padding:var(--space-4) calc(13px + 5px * var(--fp));border-radius:inherit;color:rgb(var(--text));font:inherit;font-size:var(--fs-md);resize:vertical;box-sizing:border-box;background:0 0;border:2px solid #0000;outline:none;line-height:1.4;position:relative}.textarea--autogrow .textarea__field{resize:none;overflow:hidden}.textarea--block .textarea__field{width:100%}@media (pointer:coarse){.textarea__field{font-size:max(16px,1em)}}.textarea__label{inset-inline-start:calc(13px + 7px * max(var(--fp), var(--vp)));top:var(--space-4);max-block-size:calc(100% - 2 * var(--space-4));font-size:var(--fs-md);cursor:text;-webkit-user-select:none;user-select:none;pointer-events:none;opacity:calc(var(--placeholder-opacity) * (1 - max(var(--fp), var(--vp))));color:rgb(var(--text));transform-origin:0 0;z-index:2;line-height:1.4;position:absolute;overflow:hidden}.textarea__label--placeholder{inset-inline-start:calc(13px + (.8rem - 13px) * var(--lh));transform:translateY(calc(-30px * var(--lh)));font-size:calc(var(--fs-md) - .1rem * var(--lh));opacity:calc(var(--placeholder-opacity) + (1 - var(--placeholder-opacity)) * var(--lh));color:color-mix(in oklab, rgb(var(--text)), rgb(var(--c)) calc(var(--lh) * 100%));top:30px}.textarea__label--label{inset-inline-start:.8rem;font-size:var(--fs-sm);opacity:1;color:color-mix(in oklab, rgb(var(--text) / .7), rgb(var(--c)) calc(var(--fp) * 100%));top:0}.textarea--state .textarea__label,.textarea--state .textarea__label--label{color:rgb(var(--c))}.textarea--variant-border .textarea__field-wrap{background:0 0;border-radius:0}.textarea--variant-border .textarea__field{background:0 0;border:0;border-radius:0}.textarea__underline{background:rgb(var(--text) / .25);pointer-events:none;z-index:2;width:100%;height:2px;position:absolute;bottom:0;left:0}.textarea__underline:after{content:"";width:calc(100% * var(--fp));background:rgb(var(--c));height:100%;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.textarea--variant-shadow .textarea__field-wrap{background:0 0}.textarea--variant-shadow .textarea__field{border-radius:var(--rad-md);background:0 0;border:2px solid #0000}.textarea__shadow{border:2px solid rgb(var(--c) / calc(.45 * var(--fp)));border-radius:inherit;box-shadow:0 calc(14px + 14px * var(--fp)) calc(32px + 28px * var(--fp)) -6px rgb(0 0 0/calc(.22 + .06 * var(--fp))), 0 calc(5px + 13px * var(--fp)) calc(12px + 28px * var(--fp)) -2px rgb(var(--c) / calc(.32 * var(--fp))), 0 0 0 calc(6px * var(--fp)) rgb(var(--c) / calc(.1 * var(--fp)));pointer-events:none;z-index:0;position:absolute;inset:0}.textarea--transparent .textarea__field{background:0 0!important}.textarea--state .textarea__field{background:rgb(var(--c) / calc(.1 + .06 * var(--fp)));color:rgb(var(--c))}.textarea__field:disabled{opacity:.5;cursor:not-allowed}.textarea__message{font-size:var(--fs-sm);padding:var(--space-1) var(--space-4) 0;color:rgb(var(--c))}[dir=rtl] .input__label{transform-origin:100%}[dir=rtl] .textarea__label{transform-origin:100% 0}[dir=rtl] .input__icon--clickable:hover{transform:translate(6px,-6px);box-shadow:-12px 14px 24px -4px #00000038,-6px 6px 12px -2px #0000001a}[dir=rtl] .input__icon--clickable.input__icon--after:hover{transform:translate(-6px,-6px);box-shadow:12px 14px 24px -4px #00000038,6px 6px 12px -2px #0000001a}