@keyframes fnAutoFill {
  to {
    font-family: inherit;
    font-size: inherit;
  }
}
:root {
  --site-global-shade: #1472a8;
  --inp-shade: var(--site-global-shade);
  --inp-shadow-in: inset 0 1px 3px #0000033;
  --inp-shadow-out: 0 1px 0 #ffffff33;
  --inp-shadow: var(--inp-shadow-in), var(--inp-shadow-out);
  --inp-size: 1em;
  --inp-pad: 0.9em;
  --inp-height: 2em;
  --inp-cursor: initial;
  --inp-opacity: 1;
  --inp-placeholder-color: oklch(from var(--inp-shade) 0.5 0.052 h);
  --inp-placeholder-weight: 300;
  --inp-border-color: oklch(from var(--inp-shade) 0.35 0.052 h);
  --inp-border: 1px solid var(--inp-border-color);
  --inp-border-radius: 5px;
  --inp-back: oklch(from var(--inp-shade) 0.22 0.057 h);
  --inp-color: oklch(from var(--inp-shade) 0.77 0.057 h);
  --inp-back-disabled: oklch(from var(--inp-shade) 0.3 0.035 h);
  --inp-color-disabled: oklch(from var(--inp-shade) 0.87 0.057 h);
  --inp-placeholder-color-disabled: oklch(from var(--inp-shade) 0.8 0.052 h);
  --inp-border-color-disabled: oklch(from var(--inp-shade) 0.35 0.042 h);
  --inp-back-readonly: oklch(from var(--inp-shade) 0.33 0.039 h);
  --inp-color-readonly: oklch(from var(--inp-shade) 0.83 0.005 h);
  --inp-placeholder-color-readonly: oklch(from var(--inp-shade) 0.8 0.052 h);
  --inp-border-color-readonly: oklch(from var(--inp-shade) 0.44 0.046 h);
  --inp-back-error: oklch(0.38 0.17 27.78 / 0.31);
  --inp-color-error: oklch(0.67 0.14 23.37);
  --inp-placeholder-color-error: oklch(from var(--inp-shade) 0.8 0.052 h);
  --inp-border-color-error: oklch(from var(--inp-shade) 0.44 0.046 h);
  --inp-autofill-back: oklch(from var(--inp-shade) 0.23 0.057 101);
  --inp-autofill-color: oklch(from var(--inp-shade) 0.54 0.052 83);
  --check-size: calc(var(--inp-height) * 0.7);
  --check-height: var(--check-size);
  --check-width: calc(var(--check-size) * 2);
  --check-radius: calc(var(--check-size) * 2);
  --check-back: oklch(from var(--inp-shade) 0.22 0.057 h);
  --check-back-checked: oklch(from var(--inp-shade) 0.37 0.1 h);
  --check-border-color: var(--inp-border-color);
  --check-border-color-checked: oklch(from var(--check-border-color) l c h);
  --check-knob-size: calc(var(--check-size) * 0.727);
  --check-knob-offset: calc(var(--check-size) * 0.09);
  --check-knob-color: oklch(from var(--inp-shade) 0.62 0.057 h);
  --check-knob-color-checked: oklch(from var(--inp-shade) 0.82 0.057 h);
  --check-focus-ring: oklch(from var(--inp-shade) 0.22 0.057 h);
  --label-color: oklch(from var(--inp-shade) 0.77 0 0);
  --label-letter-spacing: 0.01em;
  --label-weight: 500;
  --sel-pad: 2em;
  --sel-back: var(--inp-back-disabled);
  --sel-border-top-color: oklch(from var(--inp-shade) 0.36 0.021 h);
  --sel-option-color: var(--inp-color);
  --sel-grad-1: oklch(from var(--sel-back) l c h);
  --sel-grad-2: oklch(from var(--sel-back) 0.27 c h);
}
:where(label,.label) {
  color: var(--label-color);
  letter-spacing: var(--label-letter-spacing);
  font-weight: var(--label-weight);
}
:where(input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password], input[type=checkbox],input[type=radio],input[type='range'], select, textarea) {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  display: inline-flex;
  box-sizing: border-box;
  position: relative;
  outline: none;
}
:where(input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password], input[type=checkbox],input[type=radio],input[type='range'], select, textarea).error {
  --inp-back: var(--inp-back-error);
  --inp-color: var(--inp-color-error);
  --inp-placholder-color: var(--inp-placeholder-color-error);
  --inp-border-color: var(--inp-border-color-error);
  --check-border-color: var(--inp-border-color-error);
}
:where(input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password], select, textarea) {
  width: 100%;
  font-size: var(--inp-size);
  padding: var(--inp-pad);
  cursor: var(--inp-cursor);
  opacity: var(--inp-opacity);
  background: var(--inp-back);
  color: var(--inp-color);
  border-radius: var(--inp-border-radius);
  border: var(--inp-border);
  transition: all 0.2s ease-in-out;
  box-shadow: var(--inp-shadow);
}
:where(input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password], select, textarea):autofill,
:where(input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password], select, textarea):-webkit-autofill,
:where(input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password], select, textarea):autofill:hover,
:where(input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password], select, textarea):-webkit-autofill:hover,
:where(input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password], select, textarea):autofill:focus,
:where(input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password], select, textarea):-webkit-autofill:focus {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit !important;
  font-size: inherit !important;
  animation-name: fnAutoFill;
  animation-fill-mode: forwards;
  background: var(--inp-autofill-back) !important;
  color: var(--inp-autofill-color);
  transition: background-color 5000s ease-in-out 0s, font-family 5000s;
  -webkit-text-fill-color: var(--inp-autofill-color) !important;
  -webkit-box-shadow: 0 0 0 10em var(--inp-autofill-back) inset !important;
}
:where(input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password], select, textarea):not(textarea) {
  padding: calc(var(--inp-pad)*0.1) var(--inp-pad);
  height: var(--inp-height);
}
:where(input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password], select, textarea)::placeholder {
  color: var(--inp-placeholder-color);
  font-weight: var(--inp-placeholder-weight);
}
:where(input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password], select, textarea)[disabled=disabled] {
  --inp-back: var(--inp-back-disabled);
  --inp-color: var(--inp-color-disabled);
  --inp-border-color: var(--inp-border-color-disabled);
  --inp-placholder-color: var(--inp-placeholder-color-disabled);
  --inp-cursor: not-allowed;
  --inp-opacity: 0.8;
}
:where(input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password], select, textarea)[readonly] {
  --inp-back: var(--inp-back-readonly);
  --inp-color: var(--inp-color-readonly);
  --inp-border-color: var(--inp-border-color-readonly);
  --inp-placholder-color: var(--inp-placeholder-color-readonly);
}
:where(input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password], select, textarea):hover {
  --inp-border-color: color-mix(in srgb, var(--inp-shade), #333 30%);
}
:where(input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password], select, textarea):focus {
  --inp-shadow-in: inset 0 1px 3px rgba(0, 0, 0, 0.3);
  --inp-shadow-out: var(--inp-focus-ring);
  --inp-border-color: var(--inp-border-focus);
}
:where(select) {
  cursor: pointer;
  padding-right: var(--sel-pad);
  color: var(--inp-color);
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1em 1em" fill="none" stroke="white" opacity="0.3" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M6 9L12 15L18 9"/></svg>'), linear-gradient(to bottom, var(--sel-grad-1), var(--sel-grad-2));
  background-repeat: no-repeat;
  background-position: right 0.8em bottom -0.2em, center;
  background-size: 1.4em, contain;
  border-top-color: var(--sel-border-top-color);
  transition: all 0.5s;
}
:where(select) option {
  color: var(--sel-option-color);
  background: var(--sel-grad-2);
}
:where(input[type=checkbox],input[type=radio],input[type='range']) {
  cursor: pointer;
  align-items: center;
  vertical-align: middle;
  width: var(--check-width);
  height: var(--check-height);
  border-radius: var(--check-radius);
  background: var(--check-back);
  border: 1px solid var(--check-border-color);
  transition: all 0.2s ease-in-out;
  box-shadow: inset 1px 1px 2px #000000d6;
}
:where(input[type=checkbox],input[type=radio],input[type='range'])::before {
  content: "";
  position: absolute;
  top: var(--check-knob-offset);
  left: var(--check-knob-offset);
  width: var(--check-knob-size);
  height: var(--check-knob-size);
  background-color: var(--check-knob-color);
  border-radius: 50%;
  box-shadow: inset 0 0 2px #ffffffaa;
  transition: all 0.2s ease-in-out;
}
:where(input[type=checkbox],input[type=radio],input[type='range']):checked {
  --check-back: var(--check-back-checked);
  --check-border-color: var(--check-border-color-checked);
  --check-knob-color: var(--check-knob-color-checked);
}
:where(input[type=checkbox],input[type=radio],input[type='range']):checked::before {
  transform: translateX(calc(var(--check-width) - var(--check-knob-size) - (var(--check-knob-offset) * 2)));
}
:where(input[type=checkbox],input[type=radio],input[type='range']):focus-visible {
  box-shadow: 0 0 0 2px var(--check-focus-ring);
}
:where(input[type="number"]) {
  -moz-appearance: textfield;
}
:where(input[type="number"])::-webkit-outer-spin-button,
:where(input[type="number"])::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
:where(input[type="radio"]) {
  --check-width: var(--check-height);
  --check-knob-size: calc(var(--check-height) * 0.5);
}
:where(input[type="radio"])::before {
  top: 50%;
  left: 50%;
  width: var(--check-knob-size);
  height: var(--check-knob-size);
  transform: translate(-50%, -50%) scale(0);
  transition: all 0.5s, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  border-radius: 50%;
}
:where(input[type="radio"]):checked::before {
  transform: translate(-50%, -50%) scale(1);
}
:where(input[type="range"]) {
  --range-color: var(--site-global-shade, #1d597b);
  --range-track-h: 6px;
  --range-thumb-s: 18px;
  appearance: none;
  background: transparent;
  cursor: pointer;
  width: 100%;
  display: inline-block;
  vertical-align: middle;
}
:where(input[type="range"])::-webkit-slider-runnable-track {
  background: color-mix(in srgb, var(--range-color), #000 60%);
  height: var(--range-track-h);
  border-radius: var(--range-track-h);
  border: 1px solid color-mix(in srgb, var(--range-color), #fff 10%);
}
:where(input[type="range"])::-webkit-slider-thumb {
  appearance: none;
  margin-top: calc(var(--range-track-h) / -2 - 6px);
  height: var(--range-thumb-s);
  width: var(--range-thumb-s);
  background-color: color-mix(in srgb, #fff, var(--range-color) 25%);
  border-radius: 50%;
  border: 2px solid var(--range-color);
  box-shadow: 0 0 8px color-mix(in srgb, var(--range-color), transparent 60%);
}
:where(input[type="range"]):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--range-color), transparent 70%);
  outline-offset: 4px;
}
:root {
  --btn-back: ;
}
:where(input[type=button],input[type=submit],input[type=reset],button[type=button],.form-submit,.form-reset,.as-button) {
  font-size: var(--inp-size);
  display: inline-flex;
  flex-direction: row;
  gap: 0.6em;
}
:where(.form-item) {
  --fi-description-color: oklch(from var(--inp-shade) 0.39 0.04 243);
  --fi-description-size: 0.83em;
  --fi-description-margin: 0.7em;
  --fi-label-margin: 0.6em;
  box-sizing: border-box;
}
:where(.form-item) label,
:where(.form-item) .form-label {
  display: flex;
  box-sizing: border-box;
  margin-bottom: var(--fi-label-margin);
}
:where(.form-item) .description {
  color: var(--fi-description-color);
  font-size: var(--fi-description-size);
  margin-top: var(--fi-description-margin);
}
:where(.input-box) {
  display: inline-flex;
  position: relative;
  vertical-align: middle;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  box-sizing: border-box;
  width: auto;
}
:where(.input-box):not(:has(input[type=checkbox],input[type=radio],input[type='range'],input[type=button],input[type=submit],input[type=reset],button[type=button],.form-submit,.form-reset,.as-button)) {
  width: 100%;
}
:where(.input-box):has(input[type=checkbox],input[type=radio],input[type='range']) {
  width: auto;
}
:where(.input-box):has(input[type="number"]) input {
  width: 100%;
  padding-right: calc(var(--inp-pad) + 26px) !important;
}
:where(.input-box):has(input[type="number"]) .num-up,
:where(.input-box):has(input[type="number"]) .num-down {
  position: absolute;
  right: 0;
  width: 26px;
  height: 50%;
  z-index: 5;
}
:where(.input-box):has(input[type="number"]) .num-up {
  top: 0;
}
:where(.input-box):has(input[type="number"]) .num-down {
  bottom: 0;
}