@incodetech/web 2.0.0-alpha.10 → 2.0.0-alpha.12

package/dist/flow/styles.css

@@ -46,6 +46,10 @@
 @layer incode-theme;
 
 @layer incode-utilities {
+  .visible {
+    visibility: visible;
+  }
+
   .absolute {
     position: absolute;
   }
@@ -150,6 +154,16 @@
 
 @layer incode-base, incode-components;
 
+@keyframes slideUp {
+  from {
+    transform: translateY(100%);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
 .IncodeCameraButton {
   justify-content: center;
   align-items: center;
@@ -247,6 +261,18 @@
   fill: var(--color-spinner-surface-secondary, var(--spinner-surface-secondary));
 }
 
+@keyframes fadeInScale {
+  from {
+    opacity: 0;
+    transform: scale(.95);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
 .IncodeCaptureSuccessPage .IncodeCaptureSuccessContainer {
   flex-direction: column;
   flex: 1;
@@ -328,6 +354,11 @@
 
 .IncodeErrorModalContent .IncodeErrorModalContentAttemptsText {
   text-align: center;
+  font-family: var(--primitive-typography-family-dm-sans);
+  font-size: var(--typography-body-lg-size);
+  font-weight: var(--typography-body-lg-weight);
+  line-height: var(--typography-body-lg-line-height);
+  letter-spacing: var(--typography-body-lg-letter-spacing);
   font-size: var(--text-lg, 1.125rem);
   line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
   --tw-leading: 114%;
@@ -398,6 +429,18 @@
   color: var(--color-text-body-primary, var(--text-body-primary));
 }
 
+.IncodeSelfieTutorial {
+  --brand-color: var(--surface-brand-500);
+}
+
+.IncodeSelfieTutorial .IncodeBaseTutorialAnimation svg linearGradient#__lottie_element_29 stop {
+  stop-color: var(--brand-color);
+}
+
+.IncodeSelfieTutorial .IncodeBaseTutorialAnimation svg > g > g > g:first-child > g:first-child > g > g > g:nth-child(2) > g:nth-child(3) > g > path, .IncodeSelfieTutorial .IncodeBaseTutorialAnimation svg > g > g > g:first-child > g:first-child > g > g > g:nth-child(2) > g:first-child > g > path {
+  fill: var(--brand-color);
+}
+
 .IncodePhonePage .IncodePageContent {
   padding-top: var(--spacing-32, var(--spacing-32, 32px));
   padding-bottom: var(--spacing-16, var(--spacing-16, 16px));
@@ -883,7 +926,7 @@
   display: flex;
 }
 
-.IncodeUnsupportedModuleContent {
+.IncodeUnsupportedModule .IncodeUnsupportedModuleContent, .IncodeUnsupportedModule .IncodeUnsupportedModuleContent .IncodeUnsupportedModuleContent {
   max-width: var(--container-md, 28rem);
   align-items: center;
   gap: var(--spacing-16, var(--spacing-16, 16px));
@@ -892,22 +935,2059 @@
   display: flex;
 }
 
-.IncodeUnsupportedModuleTitle {
-  font-size: var(--text-24, var(--primitive-typography-size-24));
-  --tw-font-weight: var(--font-weight-semibold, var(--primitive-typography-weight-semibold));
-  font-weight: var(--font-weight-semibold, var(--primitive-typography-weight-semibold));
+.IncodeUnsupportedModule .IncodeUnsupportedModuleContent .IncodeUnsupportedModuleTitle {
+  font-family: var(--primitive-typography-family-dm-sans);
+  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-primary));
 }
 
-.IncodeUnsupportedModuleMessage {
-  font-size: var(--text-16, var(--primitive-typography-size-16));
+.IncodeUnsupportedModule .IncodeUnsupportedModuleContent .IncodeUnsupportedModuleMessage {
+  font-family: var(--primitive-typography-family-dm-sans);
+  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-secondary));
 }
 
-.IncodeUnsupportedModuleButton {
+.IncodeUnsupportedModule .IncodeUnsupportedModuleContent .IncodeUnsupportedModuleButton {
   margin-top: var(--spacing-8, var(--spacing-8, 8px));
 }
 
+.IncodeIdTutorial {
+  --brand-color: var(--surface-brand-500);
+}
+
+.IncodeIdTutorial .IncodePageTitleContainer {
+  padding-block: var(--spacing-16, var(--spacing-16, 16px));
+}
+
+.IncodeIdTutorial .IncodeBaseTutorialContainer {
+  margin: calc(var(--spacing-24, var(--spacing-24, 24px)) * -1);
+}
+
+.IncodeIdTutorial .IncodeBaseTutorialAnimationContainer {
+  padding: var(--spacing-0, var(--spacing-none, 0px));
+}
+
+.IncodeIdTutorial.IncodeIdTutorialId .IncodeBaseTutorialAnimation svg > g > g > g:nth-child(2) > g:nth-child(5) > g > g > g:nth-child(3) > g > path, .IncodeIdTutorial.IncodeIdTutorialId .IncodeBaseTutorialAnimation svg > g > g > g:first-child > g > path, .IncodeIdTutorial.IncodeIdTutorialPassport .IncodeBaseTutorialAnimation svg > g > g:nth-child(2) > g:nth-child(2) > g:nth-child(2) > g:nth-child(2) > g > g > g > g:nth-child(4) > g > path, .IncodeIdTutorial.IncodeIdTutorialPassport .IncodeBaseTutorialAnimation svg > g > g:first-child > g > path {
+  fill: var(--brand-color);
+}
+
+.IncodeFlipAnimation {
+  background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));
+  height: 100%;
+  padding: var(--spacing-24, var(--spacing-24, 24px));
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.IncodeCommonIssuesModal {
+  inset: var(--spacing-0, var(--spacing-none, 0px));
+  z-index: 1000;
+  background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));
+  flex-direction: column;
+  display: flex;
+  position: fixed;
+}
+
+@media (min-width: 40rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 40rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 48rem;
+  }
+}
+
+@media (min-width: 64rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 64rem;
+  }
+}
+
+@media (min-width: 80rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 80rem;
+  }
+}
+
+@media (min-width: 96rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 96rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    height: 840px;
+  }
+}
+
+@media (min-width: 40rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 40rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 48rem;
+  }
+}
+
+@media (min-width: 64rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 64rem;
+  }
+}
+
+@media (min-width: 80rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 80rem;
+  }
+}
+
+@media (min-width: 96rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 96rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    height: 840px;
+  }
+}
+
+@media (min-width: 40rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 40rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 48rem;
+  }
+}
+
+@media (min-width: 64rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 64rem;
+  }
+}
+
+@media (min-width: 80rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 80rem;
+  }
+}
+
+@media (min-width: 96rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 96rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    height: 840px;
+  }
+}
+
+@media (min-width: 40rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 40rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 48rem;
+  }
+}
+
+@media (min-width: 64rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 64rem;
+  }
+}
+
+@media (min-width: 80rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 80rem;
+  }
+}
+
+@media (min-width: 96rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 96rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    height: 840px;
+  }
+}
+
+@media (min-width: 40rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 40rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 48rem;
+  }
+}
+
+@media (min-width: 64rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 64rem;
+  }
+}
+
+@media (min-width: 80rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 80rem;
+  }
+}
+
+@media (min-width: 96rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 96rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    height: 840px;
+  }
+}
+
+@media (min-width: 40rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 40rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 48rem;
+  }
+}
+
+@media (min-width: 64rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 64rem;
+  }
+}
+
+@media (min-width: 80rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 80rem;
+  }
+}
+
+@media (min-width: 96rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 96rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    height: 840px;
+  }
+}
+
+@media (min-width: 40rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 40rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 48rem;
+  }
+}
+
+@media (min-width: 64rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 64rem;
+  }
+}
+
+@media (min-width: 80rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 80rem;
+  }
+}
+
+@media (min-width: 96rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 96rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    height: 840px;
+  }
+}
+
+@media (min-width: 40rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 40rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 48rem;
+  }
+}
+
+@media (min-width: 64rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 64rem;
+  }
+}
+
+@media (min-width: 80rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 80rem;
+  }
+}
+
+@media (min-width: 96rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 96rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    height: 840px;
+  }
+}
+
+@media (min-width: 40rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 40rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 48rem;
+  }
+}
+
+@media (min-width: 64rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 64rem;
+  }
+}
+
+@media (min-width: 80rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 80rem;
+  }
+}
+
+@media (min-width: 96rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 96rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    height: 840px;
+  }
+}
+
+@media (min-width: 40rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 40rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 48rem;
+  }
+}
+
+@media (min-width: 64rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 64rem;
+  }
+}
+
+@media (min-width: 80rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 80rem;
+  }
+}
+
+@media (min-width: 96rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 96rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    height: 840px;
+  }
+}
+
+@media (min-width: 40rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 40rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 48rem;
+  }
+}
+
+@media (min-width: 64rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 64rem;
+  }
+}
+
+@media (min-width: 80rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 80rem;
+  }
+}
+
+@media (min-width: 96rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 96rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    height: 840px;
+  }
+}
+
+@media (min-width: 40rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 40rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 48rem;
+  }
+}
+
+@media (min-width: 64rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 64rem;
+  }
+}
+
+@media (min-width: 80rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 80rem;
+  }
+}
+
+@media (min-width: 96rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 96rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    height: 840px;
+  }
+}
+
+@media (min-width: 40rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 40rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 48rem;
+  }
+}
+
+@media (min-width: 64rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 64rem;
+  }
+}
+
+@media (min-width: 80rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 80rem;
+  }
+}
+
+@media (min-width: 96rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 96rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    height: 840px;
+  }
+}
+
+@media (min-width: 40rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 40rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 48rem;
+  }
+}
+
+@media (min-width: 64rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 64rem;
+  }
+}
+
+@media (min-width: 80rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 80rem;
+  }
+}
+
+@media (min-width: 96rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 96rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    height: 840px;
+  }
+}
+
+@media (min-width: 40rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 40rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 48rem;
+  }
+}
+
+@media (min-width: 64rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 64rem;
+  }
+}
+
+@media (min-width: 80rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 80rem;
+  }
+}
+
+@media (min-width: 96rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 96rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    height: 840px;
+  }
+}
+
+@media (min-width: 40rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 40rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 48rem;
+  }
+}
+
+@media (min-width: 64rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 64rem;
+  }
+}
+
+@media (min-width: 80rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 80rem;
+  }
+}
+
+@media (min-width: 96rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 96rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    height: 840px;
+  }
+}
+
+@media (min-width: 40rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 40rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 48rem;
+  }
+}
+
+@media (min-width: 64rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 64rem;
+  }
+}
+
+@media (min-width: 80rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 80rem;
+  }
+}
+
+@media (min-width: 96rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 96rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    height: 840px;
+  }
+}
+
+@media (min-width: 40rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 40rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 48rem;
+  }
+}
+
+@media (min-width: 64rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 64rem;
+  }
+}
+
+@media (min-width: 80rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 80rem;
+  }
+}
+
+@media (min-width: 96rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 96rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    height: 840px;
+  }
+}
+
+@media (min-width: 40rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 40rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 48rem;
+  }
+}
+
+@media (min-width: 64rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 64rem;
+  }
+}
+
+@media (min-width: 80rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 80rem;
+  }
+}
+
+@media (min-width: 96rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 96rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    height: 840px;
+  }
+}
+
+@media (min-width: 40rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 40rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 48rem;
+  }
+}
+
+@media (min-width: 64rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 64rem;
+  }
+}
+
+@media (min-width: 80rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 80rem;
+  }
+}
+
+@media (min-width: 96rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 96rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    height: 840px;
+  }
+}
+
+@media (min-width: 40rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 40rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 48rem;
+  }
+}
+
+@media (min-width: 64rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 64rem;
+  }
+}
+
+@media (min-width: 80rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 80rem;
+  }
+}
+
+@media (min-width: 96rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 96rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    height: 840px;
+  }
+}
+
+@media (min-width: 40rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 40rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 48rem;
+  }
+}
+
+@media (min-width: 64rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 64rem;
+  }
+}
+
+@media (min-width: 80rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 80rem;
+  }
+}
+
+@media (min-width: 96rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 96rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    height: 840px;
+  }
+}
+
+@media (min-width: 40rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 40rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 48rem;
+  }
+}
+
+@media (min-width: 64rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 64rem;
+  }
+}
+
+@media (min-width: 80rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 80rem;
+  }
+}
+
+@media (min-width: 96rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 96rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    height: 840px;
+  }
+}
+
+@media (min-width: 40rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 40rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 48rem;
+  }
+}
+
+@media (min-width: 64rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 64rem;
+  }
+}
+
+@media (min-width: 80rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 80rem;
+  }
+}
+
+@media (min-width: 96rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 96rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    height: 840px;
+  }
+}
+
+@media (min-width: 40rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 40rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 48rem;
+  }
+}
+
+@media (min-width: 64rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 64rem;
+  }
+}
+
+@media (min-width: 80rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 80rem;
+  }
+}
+
+@media (min-width: 96rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 96rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    height: 840px;
+  }
+}
+
+@media (min-width: 40rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 40rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 48rem;
+  }
+}
+
+@media (min-width: 64rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 64rem;
+  }
+}
+
+@media (min-width: 80rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 80rem;
+  }
+}
+
+@media (min-width: 96rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 96rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    height: 840px;
+  }
+}
+
+@media (min-width: 40rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 40rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 48rem;
+  }
+}
+
+@media (min-width: 64rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 64rem;
+  }
+}
+
+@media (min-width: 80rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 80rem;
+  }
+}
+
+@media (min-width: 96rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 96rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    height: 840px;
+  }
+}
+
+@media (min-width: 40rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 40rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 48rem;
+  }
+}
+
+@media (min-width: 64rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 64rem;
+  }
+}
+
+@media (min-width: 80rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 80rem;
+  }
+}
+
+@media (min-width: 96rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 96rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    height: 840px;
+  }
+}
+
+@media (min-width: 40rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 40rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 48rem;
+  }
+}
+
+@media (min-width: 64rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 64rem;
+  }
+}
+
+@media (min-width: 80rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 80rem;
+  }
+}
+
+@media (min-width: 96rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 96rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    height: 840px;
+  }
+}
+
+.IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+  width: 100%;
+}
+
+@media (min-width: 40rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 40rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 48rem;
+  }
+}
+
+@media (min-width: 64rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 64rem;
+  }
+}
+
+@media (min-width: 80rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 80rem;
+  }
+}
+
+@media (min-width: 96rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 96rem;
+  }
+}
+
+.IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+  height: 100%;
+  margin: auto;
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    height: 840px;
+  }
+}
+
+.IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+  padding: var(--spacing-24, var(--spacing-24, 24px));
+  flex-direction: column;
+  margin-inline: auto;
+  display: flex;
+}
+
+.IncodeCommonIssuesModal .IncodeCommonIssuesHeader {
+  height: 44px;
+  padding-inline: var(--spacing-20, var(--spacing-20, 20px));
+  padding-block: var(--spacing-8, var(--spacing-8, 8px));
+  flex-shrink: 0;
+  justify-content: flex-end;
+  align-items: center;
+  display: flex;
+}
+
+.IncodeCommonIssuesModal .IncodeCommonIssuesCloseButton {
+  padding: var(--spacing-0, var(--spacing-none, 0px));
+  cursor: pointer;
+  border-style: var(--tw-border-style);
+  border-width: var(--border-width-none, var(--border-none));
+  --tw-border-style: none;
+  color: var(--color-text-body-primary, var(--text-body-primary));
+  background-color: #0000;
+  border-style: none;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.IncodeCommonIssuesModal .IncodeCommonIssuesContent {
+  padding: var(--spacing-24, var(--spacing-24, 24px));
+  flex-direction: column;
+  flex: 1;
+  align-items: center;
+  margin-inline: auto;
+  display: flex;
+}
+
+.IncodeCommonIssuesModal .IncodeCommonIssuesContent .IncodeCommonIssuesQuestionIcon {
+  flex-shrink: 0;
+}
+
+.IncodeCommonIssuesModal .IncodeCommonIssuesContent .IncodeCommonIssuesTitle {
+  font-family: var(--primitive-typography-family-dm-sans);
+  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);
+}
+
+.IncodeCommonIssuesModal .IncodeCommonIssuesContent .IncodeCommonIssuesCards {
+  gap: var(--spacing-32, var(--spacing-32, 32px));
+  width: 100%;
+  padding-block: var(--spacing-16, var(--spacing-16, 16px));
+  flex-direction: column;
+  display: flex;
+}
+
+.IncodeCommonIssuesModal .IncodeCommonIssuesContent .IncodeCommonIssuesCard {
+  align-items: flex-start;
+  gap: var(--spacing-16, var(--spacing-16, 16px));
+  background-color: var(--surface-neutral-50);
+  border-radius: 12px;
+  display: flex;
+}
+
+.IncodeCommonIssuesModal .IncodeCommonIssuesContent .IncodeCommonIssuesCardIcon {
+  color: var(--color-text-body-primary, var(--text-body-primary));
+  flex-shrink: 0;
+}
+
+.IncodeCommonIssuesModal .IncodeCommonIssuesContent .IncodeCommonIssuesCardText {
+  gap: var(--spacing-4, var(--spacing-4, 4px));
+  flex-direction: column;
+  display: flex;
+}
+
+.IncodeCommonIssuesModal .IncodeCommonIssuesContent .IncodeCommonIssuesCardTitle {
+  font-family: var(--primitive-typography-family-dm-sans);
+  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);
+}
+
+.IncodeCommonIssuesModal .IncodeCommonIssuesContent .IncodeCommonIssuesCardBody {
+  font-family: var(--primitive-typography-family-dm-sans);
+  font-size: var(--typography-body-regular-size);
+  font-weight: var(--typography-body-regular-weight);
+  line-height: var(--typography-body-regular-line-height);
+  letter-spacing: var(--typography-body-regular-letter-spacing);
+  color: var(--color-text-body-secondary, var(--text-body-secondary));
+}
+
+.IncodeCommonIssuesModal .IncodeCommonIssuesContent .IncodeCommonIssuesButtons {
+  gap: var(--spacing-12, var(--spacing-12, 12px));
+  flex-direction: column;
+  width: 100%;
+  margin-top: auto;
+  display: flex;
+}
+
+.IncodeCommonIssuesModal .IncodeCommonIssuesContent .IncodeCommonIssuesTakeManually {
+  color: var(--color-text-body-primary, var(--text-body-primary));
+}
+
+.IncodeCommonIssuesModal .IncodeCommonIssuesContent .IncodeCommonIssuesTryAgain {
+  width: 100%;
+}
+
+.IncodeChooserPage .IncodePageTitle {
+  max-width: 250px;
+}
+
+.IncodeChooserPage .IncodeChooserContainer {
+  width: 100%;
+  padding-bottom: var(--spacing-32, var(--spacing-32, 32px));
+  flex-direction: column;
+  align-items: center;
+  margin-top: auto;
+  display: flex;
+}
+
+.IncodeChooserPage .IncodeChooserContainer .IncodeChooserButtons {
+  gap: var(--spacing-24, var(--spacing-24, 24px));
+  flex-direction: column;
+  width: 100%;
+  max-width: 420px;
+  display: flex;
+}
+
+.IncodeChooserPage .IncodeChooserContainer .IncodeChooserButton {
+  min-height: var(--spacing-120, var(--spacing-120, 120px));
+  cursor: pointer;
+  touch-action: manipulation;
+  border-radius: var(--radius-large, var(--border-radius-large));
+  border-style: var(--tw-border-style);
+  --tw-border-style: solid;
+  border-style: solid;
+  border-width: 1px;
+  border-color: var(--color-border-neutral-100, var(--border-neutral-100));
+  background-color: var(--color-surface-neutral-50, var(--surface-neutral-50));
+  padding-top: var(--spacing-20, var(--spacing-20, 20px));
+  padding-right: var(--spacing-24, var(--spacing-24, 24px));
+  padding-bottom: var(--spacing-20, var(--spacing-20, 20px));
+  padding-left: var(--spacing-20, var(--spacing-20, 20px));
+  text-align: right;
+  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;
+  align-items: flex-start;
+  transition-duration: .2s;
+  display: flex;
+  box-shadow: 0 2px 7px #0000000d, 0 2px 35px #21273b0d;
+}
+
+.IncodeChooserPage .IncodeChooserContainer .IncodeChooserButton:active .IncodeChooserArrowRect {
+  filter: brightness(.8);
+}
+
+.IncodeChooserPage .IncodeChooserContainer .IncodeChooserButton:focus-visible {
+  outline-width: 1px;
+  outline-style: var(--tw-outline-style);
+  outline-offset: 2px;
+  outline-width: 2px;
+  outline-color: var(--focus-ring-color);
+}
+
+.IncodeChooserPage .IncodeChooserContainer .IncodeChooserButton:disabled {
+  cursor: not-allowed;
+  opacity: .6;
+}
+
+.IncodeChooserPage .IncodeChooserContainer .IncodeChooserButton .IncodeChooserButtonIcon {
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  width: 120px;
+  display: flex;
+}
+
+.IncodeChooserPage .IncodeChooserContainer .IncodeChooserButton .IncodeChooserButtonIcon svg {
+  width: 100%;
+  height: auto;
+}
+
+.IncodeChooserPage .IncodeChooserContainer .IncodeChooserButton .IncodeChooserButtonIcon .IncodePassportIcon .IncodePassportIconFill {
+  fill: var(--color-surface-brand-500, var(--surface-brand-500-static));
+}
+
+.IncodeChooserPage .IncodeChooserContainer .IncodeChooserButton .IncodeChooserButtonContent {
+  flex-direction: column;
+  flex: 1;
+  align-self: stretch;
+  align-items: flex-end;
+  display: flex;
+}
+
+.IncodeChooserPage .IncodeChooserContainer .IncodeChooserButton .IncodeChooserButtonContent .IncodeChooserButtonTitle {
+  font-family: var(--primitive-typography-family-dm-sans);
+  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-primary));
+}
+
+.IncodeChooserPage .IncodeChooserContainer .IncodeChooserButton .IncodeChooserButtonContent .IncodeChooserButtonDescription {
+  font-family: var(--primitive-typography-family-dm-sans);
+  font-size: var(--typography-body-regular-size);
+  font-weight: var(--typography-body-regular-weight);
+  line-height: var(--typography-body-regular-line-height);
+  letter-spacing: var(--typography-body-regular-letter-spacing);
+  color: var(--color-text-body-secondary, var(--text-body-secondary));
+  max-width: 150px;
+}
+
+.IncodeChooserPage .IncodeChooserContainer .IncodeChooserButton .IncodeChooserButtonContent .IncodeChooserButtonArrow {
+  flex-shrink: 0;
+  justify-content: center;
+  align-self: flex-end;
+  align-items: center;
+  margin-top: auto;
+  display: flex;
+}
+
+.IncodeCaptureFrame {
+  border-radius: var(--radius-medium, var(--border-radius-medium));
+  --frame-border-color: var(--border-neutral-0);
+  border: 4px solid var(--frame-border-color);
+  justify-content: center;
+  align-self: center;
+  align-items: center;
+  transition: max-width .3s ease-out, border-color .3s ease-out;
+  display: flex;
+  position: relative;
+}
+
+.IncodeCaptureFrame.IncodeCaptureFrameHorizontal {
+  aspect-ratio: 35 / 22;
+  width: 100%;
+  max-width: 640px;
+}
+
+.IncodeCaptureFrame.IncodeCaptureFrameVertical {
+  aspect-ratio: 22 / 35;
+  width: 100%;
+  max-width: 274px;
+}
+
+.IncodeCaptureFrame.IncodeCaptureFramePassport {
+  aspect-ratio: 42 / 30;
+}
+
+.IncodeCaptureFrame.IncodeCaptureFrameIdle {
+  --frame-border-color: var(--border-neutral-0);
+}
+
+.IncodeCaptureFrame.IncodeCaptureFrameCapturing, .IncodeCaptureFrame.IncodeCaptureFrameFocus {
+  --frame-border-color: var(--border-status-focus);
+}
+
+.IncodeCaptureFrame.IncodeCaptureFrameAnalyzing, .IncodeCaptureFrame.IncodeCaptureFrameSuccess {
+  --frame-border-color: var(--border-status-positive);
+}
+
+.IncodeCaptureFrame.IncodeCaptureFrameError {
+  --frame-border-color: var(--border-status-negative);
+}
+
+.IncodeIdCapturePage {
+  background-color: var(--color-surface-neutral-900, var(--surface-neutral-900));
+}
+
+.IncodeIdCapturePage .IncodePageInner {
+  padding: var(--spacing-0, var(--spacing-none, 0px));
+}
+
+.IncodeIdCapturePage .IncodePageContent {
+  flex: 1;
+  position: relative;
+}
+
+.IncodeIdCapturePage .IncodeCapture {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.IncodeIdCapturePage .IncodeCapture .IncodeCaptureVideo {
+  pointer-events: none;
+  inset: var(--spacing-0, var(--spacing-none, 0px));
+  position: absolute;
+}
+
+.IncodeIdCapturePage .IncodeCapture .IncodeCaptureVideo .IncodeCaptureVideoElement {
+  inset: var(--spacing-0, var(--spacing-none, 0px));
+  object-fit: cover;
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+  position: absolute;
+}
+
+.IncodeIdCapturePage .IncodeCapture .IncodeCaptureOverlay {
+  pointer-events: none;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.IncodeIdCapturePage .IncodeCapture .IncodeCaptureButton {
+  border-radius: var(--radius-button-primary, var(--button-primary-border-radius));
+  padding-inline: var(--spacing-24, var(--spacing-24, 24px));
+  padding-block: var(--spacing-12, var(--spacing-12, 12px));
+  background-color: var(--color-button-primary-surface-default, var(--button-primary-surface-default));
+  color: var(--color-button-primary-text-default, var(--button-primary-text-default));
+}
+
+.IncodeIdCapturePage .IncodeCapture .IncodeCaptureInitializing {
+  height: 100%;
+  color: var(--color-text-body-0, var(--text-body-0-static));
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.IncodeIdCapturePage .IncodeCapture .IncodeCaptureInitializing .IncodeCaptureInitializingText {
+  margin-top: var(--spacing-16, var(--spacing-16, 16px));
+}
+
+.IncodeIdCapturePage .IncodeCapture .IncodeCaptureUploading {
+  height: 100%;
+  color: var(--color-text-body-0, var(--text-body-0-static));
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.IncodeIdCapturePage .IncodeComponent .IncodeCaptureVideoElement {
+  inset: var(--spacing-0, var(--spacing-none, 0px));
+  object-fit: cover;
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+  position: absolute;
+}
+
+.IncodeCaptureOverlay {
+  width: 100%;
+  height: 100%;
+  padding: var(--spacing-24, var(--spacing-24, 24px));
+  flex-direction: column;
+  display: flex;
+  position: relative;
+}
+
+.IncodeCaptureOverlay .IncodeCaptureTopSection {
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--spacing-24, var(--spacing-24, 24px));
+  padding-bottom: var(--spacing-40, var(--spacing-40, 40px));
+  z-index: 10;
+  flex-direction: column;
+  flex: 1;
+  display: flex;
+}
+
+.IncodeCaptureOverlay .IncodeCaptureTopSection .IncodeCaptureTopText {
+  align-items: center;
+  gap: var(--spacing-12, var(--spacing-12, 12px));
+  opacity: 1;
+  transition-property: opacity;
+  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: .3s;
+  flex-direction: column;
+  transition-duration: .3s;
+  display: flex;
+}
+
+.IncodeCaptureOverlay .IncodeCaptureTopSection .IncodeCaptureTopText.IncodeCaptureTopTextHidden {
+  opacity: 0;
+}
+
+.IncodeCaptureOverlay .IncodeCaptureTopSection .IncodeCaptureTopText .IncodeCaptureTopTextTitle {
+  font-family: var(--primitive-typography-family-dm-sans);
+  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-0, var(--text-body-0-static));
+  text-align: center;
+}
+
+.IncodeCaptureOverlay .IncodeCaptureTopSection .IncodeCaptureTopText .IncodeCaptureTopTextSubtitle {
+  font-family: var(--primitive-typography-family-dm-sans);
+  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-tertiary, var(--text-body-tertiary));
+  text-align: center;
+}
+
+.IncodeCaptureOverlay .IncodeCaptureFrame {
+  --overlay-opacity: .8;
+  box-shadow: 0 0 0 9999px rgba(0, 0, 0, var(--overlay-opacity));
+  transition: max-width .3s ease-out;
+}
+
+@media (min-width: 48rem) {
+  .IncodeCaptureOverlay .IncodeCaptureFrame {
+    --overlay-opacity: 1;
+  }
+}
+
+.IncodeCaptureOverlay .IncodeCaptureFrame .IncodeCaptureCounter {
+  border-radius: var(--radius-medium, var(--border-radius-medium));
+  background-color: var(--color-countdown-surface-default, var(--countdown-surface-default));
+  padding-inline: var(--spacing-32, var(--spacing-32, 32px));
+  padding-block: var(--spacing-20, var(--spacing-20, 20px));
+  font-family: var(--primitive-typography-family-rethink-sans);
+  font-size: var(--typography-display-d2-size);
+  font-weight: var(--typography-display-d2-weight);
+  line-height: var(--typography-display-d2-line-height);
+  letter-spacing: var(--typography-display-d2-letter-spacing);
+  color: var(--color-countdown-text-default, var(--countdown-text-default));
+}
+
+.IncodeCaptureOverlay .IncodeCaptureBottomSection {
+  z-index: 1000;
+  width: 100%;
+  padding-top: var(--spacing-8, var(--spacing-8, 8px));
+  flex-direction: column;
+  flex: 1;
+  align-items: center;
+  display: flex;
+}
+
+.IncodeCaptureOverlay .IncodeCaptureBottomSection .IncodeCaptureEncryptionLabel {
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacing-4, var(--spacing-4, 4px));
+  font-family: var(--primitive-typography-family-dm-sans);
+  font-size: var(--typography-body-regular-size);
+  font-weight: var(--typography-body-regular-weight);
+  line-height: var(--typography-body-regular-line-height);
+  letter-spacing: var(--typography-body-regular-letter-spacing);
+  white-space: nowrap;
+  color: var(--color-text-body-0, var(--text-body-0-static));
+  display: flex;
+}
+
+.IncodeCaptureOverlay .IncodeCaptureBottomSection .IncodeCaptureHelpButton {
+  right: var(--spacing-24, var(--spacing-24, 24px));
+  bottom: var(--spacing-24, var(--spacing-24, 24px));
+  z-index: 20;
+  pointer-events: auto;
+  position: absolute;
+}
+
+.IncodeCaptureOverlay .IncodeCaptureBottomSection .IncodeCaptureHelpButton .IncodeCaptureHelpButtonInner {
+  height: 100%;
+  padding: var(--spacing-0, var(--spacing-none, 0px));
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.IncodeCaptureOverlay.IncodeCaptureOverlayVertical .IncodeCaptureTopSection {
+  flex: none;
+  margin-top: auto;
+}
+
+.IncodeCaptureOverlay.IncodeCaptureOverlayVertical .IncodeCaptureBottomSection {
+  flex: none;
+  margin-bottom: auto;
+}
+
+.IncodeIdManualCaptureButton {
+  bottom: var(--spacing-24, var(--spacing-24, 24px));
+  z-index: 100;
+  --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+  width: 100%;
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacing-4, var(--spacing-4, 4px));
+  flex-direction: column;
+  animation: .5s ease-out forwards slideUp;
+  display: flex;
+  position: absolute;
+  left: 50%;
+}
+
+.IncodeIdManualCaptureButton .IncodeButtonLink {
+  height: 100%;
+}
+
+.IncodeIdManualCaptureButton .IncodeIdManualCaptureTooltipContainer .IncodeIdManualCaptureTooltip {
+  border-radius: var(--radius-medium, var(--border-radius-medium));
+  background-color: var(--color-surface-neutral-900, var(--surface-neutral-900));
+  padding: var(--spacing-16, var(--spacing-16, 16px));
+}
+
+.IncodeIdManualCaptureButton .IncodeIdManualCaptureTooltipContainer .IncodeIdManualCaptureTooltip .IncodeIdManualCaptureTooltipList {
+  margin: var(--spacing-0, var(--spacing-none, 0px));
+  padding: var(--spacing-0, var(--spacing-none, 0px));
+  flex-direction: column;
+  align-items: center;
+  list-style-type: none;
+  display: flex;
+}
+
+.IncodeIdManualCaptureButton .IncodeIdManualCaptureTooltipContainer .IncodeIdManualCaptureTooltip .IncodeIdManualCaptureTooltipList li {
+  margin: var(--spacing-0, var(--spacing-none, 0px));
+  font-family: var(--primitive-typography-family-dm-sans);
+  font-size: var(--typography-tooltip-size);
+  font-weight: var(--typography-tooltip-weight);
+  line-height: var(--typography-tooltip-line-height);
+  letter-spacing: var(--typography-tooltip-letter-spacing);
+  text-wrap: nowrap;
+  color: var(--color-text-tooltip-neutral, var(--text-tooltip-neutral));
+}
+
+.IncodeIdManualCaptureButton .IncodeIdManualCaptureButtonContent .IncodeIdManualCaptureButtonButton svg {
+  transition: filter .2s, transform .2s;
+}
+
+.IncodeIdManualCaptureButton .IncodeIdManualCaptureButtonContent:active svg {
+  filter: brightness(.8);
+  transform: scale(.95);
+}
+
+@keyframes slideUpAndDown {
+  0%, 33% {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+
+  40% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  60% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  67%, 100% {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+}
+
+.IncodeIdHint {
+  inset: var(--spacing-0, var(--spacing-none, 0px));
+  z-index: 10;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  position: absolute;
+  overflow: hidden;
+}
+
+.IncodeIdHint .IncodeIdHintAnimated {
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  animation: 9s ease-in-out infinite slideUpAndDown;
+  display: flex;
+  position: relative;
+}
+
+.IncodeIdHint .IncodeIdHintAnimated .IncodeIdHintSvg {
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+
+.IncodeIdHint .IncodeIdHintAnimated .IncodeIdHintSvg svg {
+  object-fit: contain;
+  width: 800px;
+  min-width: 800px;
+  height: 800px;
+  min-height: 800px;
+}
+
+.IncodeIdProcessingLayout {
+  width: 100%;
+  height: 100%;
+  padding: var(--spacing-24, var(--spacing-24, 24px));
+  background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent {
+  z-index: 10;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+
+.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeIdProcessingTopArea {
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--spacing-24, var(--spacing-24, 24px));
+  padding-bottom: var(--spacing-40, var(--spacing-40, 40px));
+  z-index: 10;
+  flex-direction: column;
+  flex: 1;
+  width: 100%;
+  display: flex;
+}
+
+.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame {
+  overflow: hidden;
+}
+
+.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame.IncodeCaptureFrameVertical {
+  width: clamp(180px, 30vh, 274px);
+}
+
+.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame.IncodeCaptureFrameVertical .IncodeIdProcessingOverlay {
+  left: -25%;
+  right: -25%;
+}
+
+.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame .IncodeIdProcessingImage {
+  object-fit: cover;
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+  max-height: 100%;
+}
+
+.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame .IncodeIdProcessingOverlay {
+  pointer-events: none;
+  z-index: 10;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  position: absolute;
+  inset: 0 -10%;
+}
+
+.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeIdProcessingBottomArea {
+  width: 100%;
+  max-width: 384px;
+  padding-top: var(--spacing-8, var(--spacing-8, 8px));
+  z-index: 10;
+  flex-direction: column;
+  flex: 1;
+  justify-content: space-between;
+  align-items: center;
+  display: flex;
+}
+
+.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeIdProcessingBottomArea .IncodeCaptureEncryptionLabel {
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacing-4, var(--spacing-4, 4px));
+  padding-bottom: var(--spacing-12, var(--spacing-12, 12px));
+  font-family: var(--primitive-typography-family-dm-sans);
+  font-size: var(--typography-body-regular-size);
+  font-weight: var(--typography-body-regular-weight);
+  line-height: var(--typography-body-regular-line-height);
+  letter-spacing: var(--typography-body-regular-letter-spacing);
+  white-space: nowrap;
+  color: var(--color-text-body-primary, var(--text-body-primary));
+  display: flex;
+}
+
+.IncodeIdProcessingLayout .IncodeAnalyzingContent {
+  flex-direction: column;
+  align-items: center;
+  display: flex;
+}
+
+.IncodeIdProcessingLayout .IncodeAnalyzingContent .IncodeAnalyzingProgressBar {
+  background-color: var(--color-surface-neutral-300, var(--surface-neutral-300));
+  width: 143px;
+  height: 8px;
+  margin-bottom: var(--spacing-24, var(--spacing-24, 24px));
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.IncodeIdProcessingLayout .IncodeAnalyzingContent .IncodeAnalyzingProgressBar .IncodeAnalyzingProgressFill {
+  border-radius: var(--radius-small, var(--border-radius-small));
+  background-color: var(--color-icon-status-positive, var(--icon-status-positive-static));
+  height: 100%;
+  transition-property: all;
+  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: .5s;
+  --tw-ease: var(--ease-in-out, cubic-bezier(.4, 0, .2, 1));
+  transition-duration: .5s;
+  transition-timing-function: var(--ease-in-out, cubic-bezier(.4, 0, .2, 1));
+}
+
+.IncodeIdProcessingLayout .IncodeAnalyzingContent .IncodeAnalyzingTitle {
+  font-family: var(--primitive-typography-family-dm-sans);
+  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-primary));
+  text-align: center;
+}
+
+.IncodeIdProcessingLayout .IncodeAnalyzingLottie {
+  width: 100%;
+  max-width: none;
+}
+
+.IncodeIdProcessingLayout .IncodeIdProcessingResultContent {
+  flex-direction: column;
+  align-items: center;
+  display: flex;
+}
+
+.IncodeIdProcessingLayout .IncodeIdProcessingResultTitle {
+  font-family: var(--primitive-typography-family-dm-sans);
+  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-primary));
+  text-align: center;
+}
+
+.IncodeIdProcessingLayout .IncodeIdProcessingResultSubtitle {
+  font-family: var(--primitive-typography-family-dm-sans);
+  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-secondary));
+  text-align: center;
+  max-width: 300px;
+}
+
+.IncodeIdProcessingLayout .IncodeIdProcessingResultButtonContainer {
+  margin-top: var(--spacing-24, var(--spacing-24, 24px));
+  gap: var(--spacing-16, var(--spacing-16, 16px));
+  flex-direction: column;
+  width: 100%;
+  display: flex;
+}
+
+.IncodeIdProcessingLayout .IncodeIdProcessingResultAttempts {
+  padding-block: var(--spacing-12, var(--spacing-12, 12px));
+  text-align: center;
+  font-family: var(--primitive-typography-family-dm-sans);
+  font-size: var(--typography-headline-h4-size);
+  font-weight: var(--typography-headline-h4-weight);
+  line-height: var(--typography-headline-h4-line-height);
+  letter-spacing: var(--typography-headline-h4-letter-spacing);
+  color: var(--color-text-body-secondary, var(--text-body-secondary));
+}
+
+.IncodeIdError {
+  inset: var(--spacing-0, var(--spacing-none, 0px));
+  z-index: 1000;
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacing-16, var(--spacing-16, 16px));
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  position: fixed;
+}
+
+.IncodeIdErrorMessage {
+  text-align: center;
+  font-size: var(--text-18, var(--primitive-typography-size-18));
+  --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
+  font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
+  color: var(--color-text-body-0, var(--text-body-0-static));
+  max-width: 350px;
+  margin-bottom: var(--spacing-16, var(--spacing-16, 16px));
+}
+
+.IncodeIdExpiredContent {
+  padding-inline: var(--spacing-20, var(--spacing-20, 20px));
+  flex-direction: column;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  max-width: 800px;
+  max-height: 840px;
+  margin: auto;
+  display: flex;
+}
+
+.IncodeIdExpiredIcon {
+  margin-bottom: var(--spacing-16, var(--spacing-16, 16px));
+}
+
+.IncodeIdExpiredTitle {
+  text-align: center;
+  color: var(--color-text-body-primary, var(--text-body-primary));
+}
+
+.IncodeIdExpiredSubtitle {
+  font-size: var(--text-14, var(--primitive-typography-size-14));
+  --tw-font-weight: var(--font-weight-normal, 400);
+  font-weight: var(--font-weight-normal, 400);
+  color: var(--color-text-body-secondary, var(--text-body-secondary));
+  text-align: center;
+  max-width: 350px;
+}
+
+.IncodeIdExpiredButtonContainer {
+  bottom: 34px;
+  right: var(--spacing-0, var(--spacing-none, 0px));
+  left: var(--spacing-0, var(--spacing-none, 0px));
+  padding-inline: var(--spacing-28, var(--spacing-28, 28px));
+  justify-content: center;
+  display: flex;
+  position: absolute;
+}
+
+.IncodeIdCaptureNotification {
+  top: var(--spacing-24, var(--spacing-24, 24px));
+  right: var(--spacing-24, var(--spacing-24, 24px));
+  left: var(--spacing-24, var(--spacing-24, 24px));
+  z-index: 100;
+  max-width: 420px;
+  padding-bottom: var(--spacing-32, var(--spacing-32, 32px));
+  align-items: flex-end;
+  margin: auto;
+  display: flex;
+  position: absolute;
+}
+
+.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent {
+  z-index: 100;
+  border-radius: var(--radius-large, var(--border-radius-large));
+  border-style: var(--tw-border-style);
+  border-width: 2px;
+  border-color: var(--color-border-neutral-300, var(--border-neutral-300));
+  background-color: var(--color-surface-neutral-900-80, var(--surface-neutral-900-80));
+  width: 100%;
+  padding-inline: var(--spacing-20, var(--spacing-20, 20px));
+  display: flex;
+  overflow: hidden;
+  box-shadow: 0 2.079px 36.379px #00000059;
+}
+
+.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationText {
+  justify-content: center;
+  gap: var(--spacing-8, var(--spacing-8, 8px));
+  padding-top: var(--spacing-16, var(--spacing-16, 16px));
+  padding-bottom: var(--spacing-12, var(--spacing-12, 12px));
+  text-align: center;
+  color: var(--color-white, #fff);
+  flex-direction: column;
+  display: flex;
+}
+
+.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationText .IncodeIdCaptureNotificationTitle {
+  font-family: var(--primitive-typography-family-dm-sans);
+  font-size: var(--typography-headline-h3-size);
+  font-weight: var(--typography-headline-h3-weight);
+  line-height: var(--typography-headline-h3-line-height);
+  letter-spacing: var(--typography-headline-h3-letter-spacing);
+}
+
+.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationText .IncodeIdCaptureNotificationDescription {
+  font-family: var(--primitive-typography-family-dm-sans);
+  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-tertiary, var(--text-body-tertiary));
+}
+
+.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationAnimation {
+  justify-content: center;
+  align-items: center;
+  width: auto;
+  height: 130px;
+  display: flex;
+}
+
 .IncodeFlow {
   width: 100%;
   height: 100%;