/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    .IncodeComponent, .IncodeComponent *, .IncodeComponent :before, .IncodeComponent :after, .IncodeComponent ::backdrop {
      --tw-border-style: solid;
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-duration: initial;
      --tw-outline-style: solid;
    }
  }
}

@layer incode-theme, incode-utilities, incode-base, incode-components;

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes incodeToastFadeInOut {
  0% {
    opacity: 0;
    transform: translate(-50%, -20px);
  }

  15% {
    opacity: 1;
    transform: translate(-50%);
  }

  85% {
    opacity: 1;
    transform: translate(-50%);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -20px);
  }
}

.IncodeCaptureContainer {
  flex-direction: column;
  flex: 1;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.IncodeCaptureContainer .IncodeCaptureFrame {
  aspect-ratio: 1;
  width: 100%;
  max-width: var(--face-capture-frame-max-w);
  border-radius: var(--radius-full, var(--border-radius-full));
  border-style: var(--tw-border-style);
  border-width: 12px;
  border-color: #0000;
  position: relative;
}

.IncodeCaptureContainer .IncodeCaptureVideoWrapper {
  --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
  --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  border-radius: var(--radius-full, var(--border-radius-full));
  background-color: var(--color-surface-neutral-100-static, var(--surface-neutral-100-static));
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: hidden;
}

.IncodeCaptureContainer .IncodeCaptureVideo {
  z-index: 50;
  width: 100%;
  height: 100%;
  position: absolute;
}

.IncodeCaptureContainer .IncodeCaptureVideoElement {
  inset: var(--spacing-0, var(--spacing-none, 0px));
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
}

.IncodeCaptureContainer .IncodeCaptureVideoElement.IncodeMediaCoverPending {
  opacity: 0;
}

.IncodeCaptureContainer .IncodeCaptureVideoElement.IncodeCaptureVideoMirrored {
  transform: scaleX(-1);
}

.IncodeCaptureContainer .IncodeCaptureAvatarHost {
  width: 100%;
  height: 100%;
  position: absolute;
}

.IncodeCaptureContainer .IncodeCaptureAvatarElement {
  inset: var(--spacing-0, var(--spacing-none, 0px));
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
}

.IncodeCaptureContainer .IncodeCaptureAvatarElement.IncodeMediaCoverPending {
  opacity: 0;
}

.IncodeCaptureContainer .IncodeCaptureAvatarElement.IncodeCaptureAvatarMirrored {
  transform: scaleX(-1);
}

.IncodeCaptureVisuallyHidden {
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

.IncodeFaceOutline {
  width: 100%;
  height: 100%;
}

.IncodeLoadingBorder {
  aspect-ratio: 1;
  width: 100%;
  max-width: var(--face-capture-frame-max-w);
  position: absolute;
}

.IncodeLoadingBorder .IncodeLoadingBorderBase, .IncodeLoadingBorder .IncodeLoadingBorderForeground {
  inset: var(--spacing-0, var(--spacing-none, 0px));
  position: absolute;
}

.IncodeLoadingBorder .IncodeLoadingBorderForeground.IncodeLoadingBorderSpinning {
  animation: var(--animate-spin, spin 1s linear infinite);
}

.IncodeLoadingBorder .IncodeLoadingBorderPath {
  transition: all 1s ease-in-out;
}

.IncodeNotification {
  flex-direction: column;
  align-items: center;
  display: flex;
}

.IncodeNotification .IncodeNotificationText {
  text-align: center;
  font-family: var(--typography-feedback-family);
  font-size: var(--typography-feedback-l-size);
  font-weight: var(--typography-feedback-l-weight);
  line-height: var(--typography-feedback-l-line-height);
  letter-spacing: var(--typography-feedback-l-letter-spacing);
  color: var(--color-text-body-primary, var(--text-body-800-primary));
}

.IncodeCameraButton {
  justify-content: center;
  align-items: center;
  display: flex;
}

.IncodeCameraButton .IncodeCameraButtonBackground {
  fill: var(--color-icon-neutral-800-static, var(--icon-neutral-800-static));
}

.IncodeCameraButton .IncodeCameraButtonRing, .IncodeCameraButton .IncodeCameraButtonPath {
  fill: var(--color-icon-neutral-50, var(--icon-neutral-50-static));
}

.IncodePrivacyLensBanner {
  max-width: var(--privacy-lens-banner-max-w);
  text-align: center;
  color: var(--privacy-lens-banner-color);
  font-size: var(--privacy-lens-banner-font-size);
  line-height: var(--privacy-lens-banner-line-height);
  padding: var(--privacy-lens-banner-padding);
  margin-inline: auto;
}

.IncodeCaptureStatusPage .IncodeCaptureStatusContainer {
  flex-direction: column;
  flex: 1;
  align-items: center;
  display: flex;
}

.IncodeCaptureStatusPage .IncodeCaptureStatusTitle {
  text-align: center;
  font-family: var(--typography-headline-family);
  font-size: var(--typography-headline-h2-size);
  font-weight: var(--typography-headline-h2-weight);
  line-height: var(--typography-headline-h2-line-height);
  letter-spacing: var(--typography-headline-h2-letter-spacing);
  color: var(--color-text-body-primary, var(--text-body-800-primary));
}

.IncodeSelfieManualCapture {
  max-width: var(--manual-face-capture-max-w);
  flex-direction: column;
  align-items: center;
  display: flex;
}

.IncodeSelfieManualCaptureText {
  text-align: center;
  font-family: var(--typography-headline-family);
  font-size: var(--typography-headline-h5-size);
  font-weight: var(--typography-headline-h5-weight);
  line-height: var(--typography-headline-h5-line-height);
  letter-spacing: var(--typography-headline-h5-letter-spacing);
  color: var(--color-text-body-secondary, var(--text-body-500-secondary));
}

.IncodeSelfieManualCaptureButton {
  padding: var(--spacing-0, var(--spacing-none, 0px));
  color: var(--color-text-body-primary, var(--text-body-800-primary));
}

.IncodeSelfieManualUploadPage .IncodeSelfieManualUploadContainer {
  gap: var(--spacing-8, var(--spacing-8, 8px));
  width: 100%;
  padding-block: var(--spacing-24, var(--spacing-24, 24px));
  flex-direction: column;
  display: flex;
}

.IncodeSelfieManualUploadPage .IncodeSelfieManualUploadFormats {
  margin: var(--spacing-0, var(--spacing-none, 0px));
  padding-inline: var(--spacing-4, var(--spacing-4, 4px));
  font-family: var(--typography-body-family);
  font-size: var(--typography-body-m-regular-size);
  font-weight: var(--typography-body-m-regular-weight);
  line-height: var(--typography-body-m-regular-line-height);
  letter-spacing: var(--typography-body-m-regular-letter-spacing);
  color: var(--color-text-body-secondary, var(--text-body-500-secondary));
}

.IncodeSelfieManualUploadPage .IncodeSelfieManualUploadError {
  align-items: flex-start;
  gap: var(--spacing-4, var(--spacing-4, 4px));
  width: 100%;
  padding-inline: var(--spacing-4, var(--spacing-4, 4px));
  font-family: var(--typography-body-family);
  font-size: var(--typography-body-m-regular-size);
  font-weight: var(--typography-body-m-regular-weight);
  line-height: var(--typography-body-m-regular-line-height);
  letter-spacing: var(--typography-body-m-regular-letter-spacing);
  color: var(--color-input-text-helper-negative, var(--input-text-helper-negative));
  display: flex;
}

.IncodeSelfieManualUploadPage .IncodeSelfieManualUploadError p {
  margin: var(--spacing-0, var(--spacing-none, 0px));
  flex: 1;
}

.IncodeSelfieManualUploadPage .IncodeSelfieManualUploadFooter {
  margin-top: auto;
  margin-bottom: var(--spacing-16, var(--spacing-16, 16px));
  row-gap: var(--spacing-24, var(--spacing-24, 24px));
  width: 100%;
  padding-top: var(--spacing-24, var(--spacing-24, 24px));
  flex-direction: column;
  display: flex;
}

.IncodeSelfieManualUploadPage .IncodeSelfieManualUploadHintCard {
  margin: var(--spacing-0, var(--spacing-none, 0px));
  border-radius: var(--radius-x-small, var(--border-radius-x-small));
  background-color: var(--color-surface-brand-50, var(--surface-brand-50));
  width: 100%;
  padding-block: var(--spacing-16, var(--spacing-16, 16px));
  padding-right: var(--spacing-12, var(--spacing-12, 12px));
  padding-left: var(--spacing-32, var(--spacing-32, 32px));
  color: var(--color-text-body-primary, var(--text-body-800-primary));
  list-style-type: disc;
}

.IncodeSelfieManualUploadPage .IncodeSelfieManualUploadHintCard li {
  font-family: var(--typography-button-family);
  font-size: var(--typography-button-s-size);
  font-weight: var(--typography-button-s-weight);
  line-height: var(--typography-button-s-line-height);
  letter-spacing: var(--typography-button-s-letter-spacing);
  color: var(--color-text-body-primary, var(--text-body-800-primary));
}

.IncodeSelfieManualUploadPage .IncodeSelfieManualUploadHintCard li + li {
  margin-top: var(--spacing-4, var(--spacing-4, 4px));
}

.IncodeSelfieUploadSlot {
  cursor: pointer;
  align-items: center;
  gap: var(--spacing-12, var(--spacing-12, 12px));
  border-radius: var(--radius-medium, var(--border-radius-medium));
  border-style: var(--tw-border-style);
  border-width: var(--border-width-regular, var(--primitive-border-width-1));
  --tw-border-style: solid;
  border-style: solid;
  border-color: var(--color-border-neutral-100, var(--border-neutral-100));
  background-color: var(--color-surface-neutral-50, var(--surface-neutral-50));
  width: 100%;
  padding-block: var(--spacing-24, var(--spacing-24, 24px));
  padding-right: var(--spacing-24, var(--spacing-24, 24px));
  padding-left: var(--spacing-20, var(--spacing-20, 20px));
  text-align: left;
  display: flex;
}

.IncodeSelfieUploadSlot .IncodeSelfieUploadSlotIcon {
  width: var(--spacing-24, var(--spacing-24, 24px));
  height: var(--spacing-24, var(--spacing-24, 24px));
  color: var(--color-icon-neutral-500, var(--icon-neutral-500));
  flex-shrink: 0;
  justify-content: center;
  display: flex;
}

.IncodeSelfieUploadSlot .IncodeSelfieUploadSlotLabel {
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  font-family: var(--typography-headline-family);
  font-size: var(--typography-headline-h5-size);
  font-weight: var(--typography-headline-h5-weight);
  line-height: var(--typography-headline-h5-line-height);
  letter-spacing: var(--typography-headline-h5-letter-spacing);
  color: var(--color-text-body-primary, var(--text-body-800-primary));
  flex: 1;
  overflow: hidden;
}

.IncodeSelfieUploadSlot .IncodeSelfieUploadSlotAction {
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.IncodeSelfieUploadSlot .IncodeSelfieUploadSlotPill {
  align-items: center;
  gap: var(--spacing-4, var(--spacing-4, 4px));
  border-radius: var(--radius-full, var(--border-radius-full));
  background-color: var(--color-button-primary-surface-default, var(--button-primary-surface-default));
  padding-block: var(--spacing-8, var(--spacing-8, 8px));
  padding-right: var(--spacing-8, var(--spacing-8, 8px));
  padding-left: var(--spacing-16, var(--spacing-16, 16px));
  font-family: var(--typography-button-family);
  font-size: var(--typography-button-s-size);
  font-weight: var(--typography-button-s-weight);
  line-height: var(--typography-button-s-line-height);
  letter-spacing: var(--typography-button-s-letter-spacing);
  color: var(--color-button-primary-text-default, var(--button-primary-text-default));
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));
  --tw-duration: .2s;
  transition-duration: .2s;
  display: inline-flex;
}

.IncodeSelfieUploadSlot:focus-visible {
  outline-style: var(--tw-outline-style);
  outline-offset: 2px;
  outline-width: 2px;
  outline-color: var(--color-border-status-focus, var(--border-status-focus));
}

.IncodeSelfieUploadSlot:hover:not(:disabled) .IncodeSelfieUploadSlotPill {
  background-color: var(--color-button-primary-surface-hover, var(--button-primary-surface-hover));
}

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

.IncodeSelfieUploadSlot + .IncodeSelfieUploadSlotInput {
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-duration {
  syntax: "*";
  inherits: false
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}