* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

:root {
  --base-black: #000;
  --base-white: #fff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;
  --blue-900: #1e3a8a;
  --blue-950: #172554;
  --cyan-400: #22d3ee;
  --cyan-600: #0891b2;
  --emerald-400: #34d399;
  --emerald-600: #059669;
  --green-100: #dcfce7;
  --green-200: #bbf7d0;
  --green-300: #86efac;
  --green-400: #4ade80;
  --green-500: #22c55e;
  --green-600: #16a34a;
  --green-700: #16a34a;
  --green-800: #15803d;
  --green-900: #166534;
  --green-950: #052e16;
  --orange-100: #ffedd5;
  --orange-200: #fed7aa;
  --orange-300: #fdba74;
  --orange-400: #fb923c;
  --orange-500: #f97316;
  --orange-600: #ea580c;
  --orange-700: #c2410c;
  --orange-800: #9a3412;
  --orange-900: #7c2d12;
  --orange-950: #431407;
  --red-100: #fee2e2;
  --red-200: #fecaca;
  --red-300: #fca5a5;
  --red-400: #f87171;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --red-700: #b91c1c;
  --red-800: #991b1b;
  --red-900: #7f1d1d;
  --red-950: #450a0a;
  --rose-400: #f472b6;
  --rose-600: #db2777;
  --slate-100: #fcfcfc;
  --slate-200: #f5f5f5;
  --slate-300: #f0f0f0;
  --slate-400: #d3d3d3;
  --slate-500: #909090;
  --slate-600: #606060;
  --slate-700: #444;
  --slate-800: #2a2a2a;
  --slate-900: #212121;
  --slate-950: #151515;
  --violet-400: #a78bfa;
  --violet-600: #9333ea;
  --yellow-100: #fef9c3;
  --yellow-200: #fef08a;
  --yellow-300: #fde047;
  --yellow-400: #facc15;
  --yellow-50: #fefce8;
  --yellow-500: #eab308;
  --yellow-600: #d0a807;
  --yellow-700: #a18207;
  --yellow-800: #856d0e;
  --yellow-900: #715812;
  --yellow-950: #4d3f01
}

:root {
  --background-accent: var(--yellow-300);
  --background-inverse: var(--slate-950);
  --background-muted: var(--slate-300);
  --background-primary: var(--base-white);
  --background-subtle: var(--slate-200);
  --border-default: var(--slate-300);
  --border-muted: var(--slate-200);
  --icon-disabled: var(--slate-400);
  --icon-inverse: var(--base-white);
  --icon-primary: var(--slate-950);
  --icon-secondary: var(--slate-500);
  --logo-primary: #7c7c7c;
  --logo-secondary: #e2c136;
  --status-error: var(--red-500);
  --status-info: var(--blue-500);
  --status-success: var(--green-500);
  --status-warning: var(--orange-500);
  --text-accent: var(--orange-950);
  --text-disabled: var(--slate-500);
  --text-inverse: var(--base-white);
  --text-primary: var(--slate-950);
  --text-secondary: var(--slate-600);
  --text-tertiary: var(--slate-500)
}

:root .dark {
  --background-accent: var(--yellow-300);
  --background-inverse: var(--slate-100);
  --background-muted: var(--slate-800);
  --background-primary: var(--slate-950);
  --background-subtle: var(--slate-600);
  --border-default: var(--slate-700);
  --border-muted: var(--slate-800);
  --icon-disabled: var(--slate-700);
  --icon-inverse: var(--slate-950);
  --icon-primary: var(--base-white);
  --icon-secondary: var(--slate-600);
  --logo-primary: #fff;
  --logo-secondary: #e2c136;
  --status-error: var(--red-500);
  --status-info: var(--blue-500);
  --status-success: var(--green-500);
  --status-warning: var(--orange-500);
  --text-accent: var(--orange-950);
  --text-disabled: var(--slate-700);
  --text-inverse: var(--base-white);
  --text-primary: var(--base-white);
  --text-secondary: var(--slate-400);
  --text-tertiary: var(--slate-500)
}

:root {
  --spacing-05: .125rem;
  --spacing-1: .25rem;
  --spacing-2: .5rem;
  --spacing-3: .75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-14: 3.5rem;
  --spacing-20: 5rem;
  --spacing-30: 7.5rem
}

@font-face {
  font-family: Inter;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-400-normal-7c9140a2.woff2")format("woff2")
}

@font-face {
  font-family: Inter;
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-500-normal-79af5d1f.woff2")format("woff2")
}

@font-face {
  font-family: Inter;
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-600-normal-943cdcc5.woff2")format("woff2")
}

@font-face {
  font-family: Inter;
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-700-normal-48e5a320.woff2")format("woff2")
}

:root {
  --font-family-primary: "Inter", sans-serif;
  --color-neutral-200: #e5e5e5;
  --color-neutral-600: #737373;
  --color-neutral-950: #000;
  --color-gold-400: #ffc01d;
  --color-amber-500: #f4e046;
  --color-red-500: #e40014;
  --color-blue-500: #4f4ad8;
  --color-green-500: #00a24a;
  --color-orange-500: #f89401;
  --color-gold-500: #fddf49;
  --border-input: var(--color-neutral-200);
  --background-input-disabled: color-mix(in lab, var(--color-neutral-200) 50%, transparent);
  --text-muted: var(--color-neutral-600);
  --text-link: var(--color-neutral-950);
  --border-focus: var(--color-gold-400);
  --shadow-focus: color-mix(in lab, var(--color-gold-400) 25%, transparent);
  --border-error: var(--color-red-500);
  --shadow-error: color-mix(in lab, var(--color-red-500) 25%, transparent);
  --text-error: var(--color-red-500);
  --background-button-primary: var(--color-amber-500);
  --text-button-primary: var(--color-neutral-950);
  --background-button-secondary: color-mix(in lab, var(--color-neutral-200) 50%, transparent);
  --text-button-secondary: var(--color-neutral-950);
  --background-button-destructive: color-mix(in lab, var(--color-red-500) 10%, transparent);
  --text-button-destructive: var(--color-red-500);
  --background-checkbox-checked: var(--color-gold-500);
  --border-checkbox-checked: var(--color-gold-500);
  --icon-checkbox-checked: var(--color-neutral-950);
  --background-alert-info: color-mix(in lab, var(--color-blue-500) 7.5%, transparent);
  --text-alert-info: var(--color-blue-500);
  --background-alert-success: color-mix(in lab, var(--color-green-500) 7.5%, transparent);
  --text-alert-success: var(--color-green-500);
  --background-alert-warning: color-mix(in lab, var(--color-orange-500) 7.5%, transparent);
  --text-alert-warning: var(--color-orange-500);
  --background-alert-error: color-mix(in lab, var(--color-red-500) 10%, transparent);
  --text-alert-error: var(--color-red-500)
}

@supports (color:lab(0% 0 0)) {
  :root {
    --color-neutral-200: lab(90.952% 0 -.0000119209);
    --color-neutral-600: lab(48.496% 0 0);
    --color-neutral-950: lab(0% 0 0);
    --color-gold-400: lab(82% 14.57 81.43);
    --color-amber-500: lab(89% -5.08 73.26);
    --color-red-500: lab(48.4493% 77.4328 61.5452);
    --color-blue-500: lab(39.17% 35.76 -73.75);
    --color-green-500: lab(58.5% -54.25 36.29);
    --color-orange-500: lab(70.97% 33.3 75.78)
  }
}

.alert {
  font-family: var(--font-family-primary);
  border-radius: .5rem;
  gap: .75rem;
  padding: .75rem;
  font-size: .875rem;
  display: flex
}

.alert .alert__icon-container {
  justify-content: center;
  align-items: center;
  min-width: 1.125rem;
  max-width: 1.125rem;
  min-height: 1.125rem;
  max-height: 1.125rem;
  display: flex
}

.alert .alert__icon-container .alert__icon {
  width: 1.125rem;
  height: 1.125rem;
  display: inline-flex
}

.alert .alert__icon-container .alert__icon svg {
  stroke-width: 2.25px;
  width: 100%;
  height: 100%
}

.alert .alert__content {
  align-items: center;
  display: flex
}

.alert .alert__content .alert__description {
  flex-direction: column;
  gap: .5rem;
  display: flex
}

.alert .alert__content .alert__description>p:first-child {
  align-items: center;
  min-height: 1.125rem;
  line-height: 100%;
  display: flex
}

.alert .alert__content .alert__description ul {
  flex-direction: column;
  gap: .25rem;
  margin: 0;
  padding-left: 1.25rem;
  display: flex
}

.alert--info {
  background-color: var(--background-alert-info);
  color: var(--text-alert-info)
}

.alert--success {
  background-color: var(--background-alert-success);
  color: var(--text-alert-success)
}

.alert--warning {
  background-color: var(--background-alert-warning);
  color: var(--text-alert-warning)
}

.alert--error {
  background-color: var(--background-alert-error);
  color: var(--text-alert-error)
}

.button {
  background: var(--background-button-primary);
  color: var(--text-button-primary);
  cursor: pointer;
  font-family: var(--font-family-primary);
  text-align: center;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid transparent;
  border-radius: .5rem;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  min-height: 2.25rem;
  padding: 0 1rem;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1;
  display: inline-flex;
  text-decoration: none;
}

.button:focus-visible {
  outline-offset: 2px;
  outline: 2px solid
}

.button:disabled {
  cursor: not-allowed;
  opacity: .5
}

.button>div {
  flex-shrink: 0;
  display: flex
}

.button svg {
  width: 1rem;
  min-width: 1rem;
  max-width: 1rem;
  height: 1rem;
  min-height: 1rem;
  max-height: 1rem
}

.button.button--secondary {
  background: var(--background-button-secondary);
  color: var(--text-button-secondary)
}

.button.button--destructive {
  background: var(--background-button-destructive);
  color: var(--text-button-destructive)
}

.checkbox-input {
  flex-shrink: 0;
  display: inline-flex;
  position: relative
}

.checkbox-input:has(.checkbox:disabled) {
  cursor: not-allowed;
  pointer-events: none;
  opacity: .5
}

.checkbox {
  -ms-appearance: none;
  appearance: none;
  border: 1px solid var(--border-input);
  cursor: pointer;
  background-color: transparent;
  border-radius: .25rem;
  outline: none;
  width: 1rem;
  height: 1rem;
  margin: 0
}

.checkbox:focus-visible {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--shadow-focus)
}

.checkbox:checked {
  background-color: var(--background-checkbox-checked);
  border-color: var(--border-checkbox-checked)
}

.checkbox-input__icon {
  color: var(--icon-checkbox-checked);
  opacity: 0;
  pointer-events: none;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0
}

.checkbox-input__icon svg {
  stroke-width: 3px;
  width: .75rem;
  height: .75rem
}

.checkbox:checked~.checkbox-input__icon {
  opacity: 1
}

.input {
  border: 1px solid var(--border-input);
  background-color: transparent;
  border-radius: .5rem;
  outline: none;
  width: 100%;
  min-height: 2.25rem;
  padding: .25rem .75rem;
  font-size: .875rem;
  line-height: 1.42857;
  transition-property: border-color, box-shadow;
  transition-duration: .2s
}

.input::-ms-input-placeholder {
  color: var(--text-muted)
}

.input::placeholder {
  color: var(--text-muted)
}

.input:focus-visible:not(.input--error) {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--shadow-focus)
}

.input:disabled {
  background-color: var(--background-input-disabled);
  cursor: not-allowed;
  pointer-events: none;
  opacity: .5
}

.input--error {
  border-color: var(--border-error);
  box-shadow: 0 0 0 3px var(--shadow-error)
}

.password-field {
  display: flex;
  position: relative
}

.password-field .input {
  padding-right: 2.25rem !important
}

.password-field>div {
  width: 100%
}

.password-field .password-field__toggle {
  cursor: pointer;
  width: 2.25rem;
  height: 2.25rem;
  color: inherit;
  background: 0 0;
  border: none;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: inline-flex;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%)
}

.password-field .password-field__icon {
  pointer-events: none;
  width: 1.25rem;
  height: 1.25rem;
  display: inline-flex
}

.password-field .password-field__icon[hidden] {
  display: none
}

.password-field .password-field__icon svg {
  stroke-width: 1.875px;
  stroke-color: currentColor;
  width: 100%;
  height: 100%
}

.input-group {
  flex-direction: column;
  gap: .75rem;
  width: 100%;
  display: flex
}

.input-group .input-group-label {
  font-family: var(--font-family-primary);
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-items: center;
  gap: .5rem;
  width: 100%;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1;
  display: flex
}

.input-group .input-group-message {
  font-family: var(--font-family-primary);
  color: var(--text-muted);
  font-size: .75rem;
  line-height: 1.33333
}

.input-group .input-group-head {
  justify-content: space-between;
  align-items: center;
  display: flex
}

.input-group .input-group-head .link-container {
  justify-content: flex-end;
  width: 100%;
  display: flex
}

.input-group:has(.input:disabled) .input-group-label {
  color: var(--text-muted);
  pointer-events: none;
  opacity: .5;
  cursor: not-allowed
}

.input-group:has(.input--error) * {
  color: var(--text-error)
}

.checkbox-group {
  cursor: pointer;
  align-items: center;
  gap: .5rem;
  width: fit-content;
  display: flex
}

.checkbox-group .checkbox-group-label {
  font-family: var(--font-family-primary);
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: fit-content;
  cursor: inherit;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1;
  display: flex
}

.checkbox-group:has(.checkbox:disabled) .checkbox-group-label {
  pointer-events: none;
  opacity: .5;
  cursor: not-allowed
}

.link-container {
  font-family: var(--font-family-primary);
  color: var(--text-muted);
  text-wrap: balance;
  gap: .25rem;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1;
  display: flex
}

.link-container a {
  font: inherit;
  color: var(--text-link);
  text-underline-offset: 2px
}