npm - @incodetech/web - Versions diffs - 0.0.0-dev-20260922-46015ab9 → 0.0.0-dev-20260922-5cf5589c - Mend

@incodetech/web 0.0.0-dev-20260922-46015ab9 → 0.0.0-dev-20260922-5cf5589c

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/base.css CHANGED Viewed

@@ -5676,7 +5676,7 @@
 .IncodeCameraFrame .IncodeCaptureResultImage {
   inset: var(--spacing-0, var(--spacing-none, 0px));
   background-color: var(--color-surface-neutral-900, var(--surface-neutral-900));
-  object-fit: fill;
+  object-fit: cover;
   z-index: 10;
   border-radius: inherit;
   width: 100%;

package/dist/flow/styles.css CHANGED Viewed

@@ -1949,7 +1949,7 @@
 .IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame .IncodeIdProcessingImage {
   background-color: var(--color-surface-neutral-900, var(--surface-neutral-900));
-  object-fit: fill;
+  object-fit: cover;
   width: 100%;
   max-width: 100%;
   height: 100%;

package/dist/id/styles.css CHANGED Viewed

@@ -1020,7 +1020,7 @@
 .IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame .IncodeIdProcessingImage {
   background-color: var(--color-surface-neutral-900, var(--surface-neutral-900));
-  object-fit: fill;
+  object-fit: cover;
   width: 100%;
   max-width: 100%;
   height: 100%;

package/dist/id/styles.css.js CHANGED Viewed

	@@ -1 +1 @@
1	- export default "/! tailwindcss v4.2.2 \| MIT License \| https://tailwindcss.com /\n@layer properties {\n @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {\n .IncodeComponent, .IncodeComponent , .IncodeComponent :before, .IncodeComponent :after, .IncodeComponent ::backdrop {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-translate-z: 0;\n --tw-border-style: solid;\n }\n }\n}\n\n.IncodeSrOnly {\n clip-path: inset(50%);\n white-space: nowrap;\n border-width: 0;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n position: absolute;\n overflow: hidden;\n}\n\n.IncodeAgeVerificationPage .IncodePageInner {\n padding-top: var(--spacing-8, var(--spacing-8, 8px));\n padding-bottom: var(--spacing-16, var(--spacing-16, 16px));\n}\n\n.IncodeAgeVerificationPage .IncodePageHeader {\n height: var(--page-header-height);\n min-height: var(--page-header-height);\n}\n\n.IncodeAgeVerificationPage .IncodePageLogo {\n height: var(--age-verification-logo-height);\n}\n\n.IncodeAgeVerificationPage .IncodePageTitleContainer {\n max-width: none;\n}\n\n.IncodeAgeVerificationPage .IncodePageContent {\n justify-content: center;\n}\n\n.IncodeAgeVerificationPage .IncodePageFooter {\n padding-top: var(--spacing-12, var(--spacing-12, 12px));\n padding-bottom: var(--spacing-0, var(--spacing-none, 0px));\n}\n\n.IncodeAgeVerificationPage .IncodeAgeVerificationContent {\n justify-content: space-between;\n align-items: center;\n gap: var(--spacing-16, var(--spacing-16, 16px));\n flex-direction: column;\n flex: 1;\n display: flex;\n}\n\n.IncodeAgeVerificationPage .IncodeAgeVerificationList {\n width: 100%;\n max-width: var(--incode-form-max-w);\n justify-content: center;\n gap: var(--spacing-16, var(--spacing-16, 16px));\n padding: var(--spacing-0, var(--spacing-none, 0px));\n flex-direction: column;\n flex: 1;\n margin-inline: auto;\n list-style-type: none;\n display: flex;\n}\n\n.IncodeAgeVerificationPage .IncodeAgeVerificationItem {\n align-items: center;\n gap: var(--spacing-16, var(--spacing-16, 16px));\n display: flex;\n}\n\n.IncodeAgeVerificationPage .IncodeAgeVerificationIcon {\n height: var(--spacing-64, var(--spacing-64, 64px));\n width: var(--spacing-96, var(--spacing-96, 96px));\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.IncodeAgeVerificationPage .IncodeAgeVerificationIcon img {\n width: 100%;\n height: 100%;\n}\n\n.IncodeAgeVerificationPage .IncodeAgeVerificationText {\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h5-size);\n font-weight: var(--typography-headline-h5-weight);\n line-height: var(--typography-headline-h5-line-height);\n letter-spacing: var(--typography-headline-h5-letter-spacing);\n color: var(--color-text-body-primary, var(--text-body-800-primary));\n flex: 1;\n}\n\n.IncodeAgeVerificationPage .IncodeAgeVerificationButton {\n width: 100%;\n max-width: var(--incode-form-max-w);\n margin-inline: auto;\n}\n\n.IncodeIdTutorial .IncodePageTitleContainer {\n padding-block: var(--spacing-16, var(--spacing-16, 16px));\n}\n\n.IncodeIdTutorial .IncodeBaseTutorialContainer {\n margin: calc(var(--spacing-24, var(--spacing-24, 24px)) -1);\n}\n\n.IncodeIdTutorial .IncodeBaseTutorialAnimationContainer {\n padding: var(--spacing-0, var(--spacing-none, 0px));\n}\n\n.IncodeFlipAnimation {\n background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));\n height: 100%;\n padding: var(--spacing-24, var(--spacing-24, 24px));\n flex-direction: column;\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.IncodeIdFlipCardPage .IncodePageInner {\n padding: var(--spacing-0, var(--spacing-none, 0px));\n}\n\n.IncodeIdFlipCardLayout {\n width: 100%;\n height: 100%;\n padding: var(--spacing-24, var(--spacing-24, 24px));\n background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));\n flex-direction: column;\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent {\n z-index: 10;\n flex-direction: column;\n align-items: center;\n width: 100%;\n height: 100%;\n display: flex;\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardTopArea {\n justify-content: flex-end;\n align-items: center;\n gap: var(--spacing-24, var(--spacing-24, 24px));\n padding-bottom: var(--spacing-40, var(--spacing-40, 40px));\n z-index: 10;\n flex-direction: column;\n flex: 1;\n width: 100%;\n display: flex;\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardCopy {\n opacity: 0;\n flex-direction: column;\n align-items: center;\n animation: .3s ease-out forwards incodeIdFlipCardFadeIn;\n display: flex;\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardTitle {\n text-align: center;\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h2-size);\n font-weight: var(--typography-headline-h2-weight);\n line-height: var(--typography-headline-h2-line-height);\n letter-spacing: var(--typography-headline-h2-letter-spacing);\n color: var(--color-text-body-primary, var(--text-body-800-primary));\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardSubtitle {\n max-width: var(--id-capture-flip-card-subtitle-max-w);\n text-align: center;\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h5-size);\n font-weight: var(--typography-headline-h5-weight);\n line-height: var(--typography-headline-h5-line-height);\n letter-spacing: var(--typography-headline-h5-letter-spacing);\n color: var(--color-text-body-secondary, var(--text-body-500-secondary));\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeCaptureFrame {\n overflow: hidden;\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeCaptureFrame.IncodeCaptureFrameVertical {\n width: var(--id-capture-frame-vertical-width);\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeCaptureFrame.IncodeIdFlipCardFrameFlipping {\n --frame-border-color: var(--border-neutral-100);\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardScene {\n perspective: 1200px;\n width: 100%;\n height: 100%;\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardCard {\n width: 100%;\n height: 100%;\n transform-style: preserve-3d;\n animation: 1s ease-in-out .6s forwards incodeIdFlipCardRotate;\n position: relative;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardCard {\n animation: none;\n }\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardFace {\n inset: var(--spacing-0, var(--spacing-none, 0px));\n backface-visibility: hidden;\n width: 100%;\n height: 100%;\n position: absolute;\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardFace.IncodeIdFlipCardFaceBack {\n transform: rotateY(180deg);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardFace.IncodeIdFlipCardFaceBack {\n opacity: 0;\n animation: 1s ease-in-out .6s forwards incodeIdFlipCardReducedMotionFadeIn;\n transform: none;\n }\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardImage {\n object-fit: cover;\n width: 100%;\n height: 100%;\n animation: 1s ease-in-out .6s forwards incodeIdFlipCardFrontFade;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardImage {\n animation: 1s ease-in-out .6s forwards incodeIdFlipCardReducedMotionFadeOut;\n }\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardAsset {\n object-fit: cover;\n width: 100%;\n height: 100%;\n padding: var(--spacing-4, var(--spacing-4, 4px));\n display: block;\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardBottomArea {\n z-index: 10;\n width: 100%;\n max-width: var(--id-capture-bottom-area-max-w);\n padding-top: var(--spacing-8, var(--spacing-8, 8px));\n flex-direction: column;\n flex: 1;\n align-items: center;\n display: flex;\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardBottomArea .IncodeCaptureEncryptionLabel {\n justify-content: center;\n align-items: center;\n gap: var(--spacing-4, var(--spacing-4, 4px));\n font-family: var(--typography-body-family);\n font-size: var(--typography-body-m-regular-size);\n font-weight: var(--typography-body-m-regular-weight);\n line-height: var(--typography-body-m-regular-line-height);\n letter-spacing: var(--typography-body-m-regular-letter-spacing);\n white-space: nowrap;\n color: var(--color-text-body-primary, var(--text-body-800-primary));\n display: flex;\n}\n\n@keyframes incodeIdFlipCardFadeIn {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n@keyframes incodeIdFlipCardRotate {\n from {\n transform: rotateY(0);\n }\n\n to {\n transform: rotateY(180deg);\n }\n}\n\n@keyframes incodeIdFlipCardFrontFade {\n 0%, 20% {\n opacity: 1;\n }\n\n 50%, 100% {\n opacity: 0;\n }\n}\n\n@keyframes incodeIdFlipCardReducedMotionFadeIn {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n@keyframes incodeIdFlipCardReducedMotionFadeOut {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n }\n}\n\n.IncodeCommonIssuesFullScreen .IncodeModalDialog {\n max-width: none;\n height: 100%;\n max-height: none;\n}\n\n.IncodeCommonIssuesFullScreen .IncodeModalContent {\n border-radius: var(--radius-none, var(--border-radius-none));\n max-width: none;\n height: 100%;\n margin: auto;\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesQuestionIcon {\n flex-shrink: 0;\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesTitle {\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h2-size);\n font-weight: var(--typography-headline-h2-weight);\n line-height: var(--typography-headline-h2-line-height);\n letter-spacing: var(--typography-headline-h2-letter-spacing);\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesCards {\n width: 100%;\n max-width: var(--incode-form-max-w);\n gap: var(--spacing-32, var(--spacing-32, 32px));\n padding-block: var(--spacing-16, var(--spacing-16, 16px));\n flex-direction: column;\n display: flex;\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesCard {\n align-items: flex-start;\n gap: var(--spacing-16, var(--spacing-16, 16px));\n display: flex;\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesCardIcon {\n color: var(--color-text-body-primary, var(--text-body-800-primary));\n flex-shrink: 0;\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesCardText {\n gap: var(--spacing-4, var(--spacing-4, 4px));\n flex-direction: column;\n display: flex;\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesCardTitle {\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h5-size);\n font-weight: var(--typography-headline-h5-weight);\n line-height: var(--typography-headline-h5-line-height);\n letter-spacing: var(--typography-headline-h5-letter-spacing);\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesCardBody {\n font-family: var(--typography-body-family);\n font-size: var(--typography-body-m-regular-size);\n font-weight: var(--typography-body-m-regular-weight);\n line-height: var(--typography-body-m-regular-line-height);\n letter-spacing: var(--typography-body-m-regular-letter-spacing);\n color: var(--color-text-body-secondary, var(--text-body-500-secondary));\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesButtons {\n margin-top: auto;\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesTakeManually {\n color: var(--color-text-body-primary, var(--text-body-800-primary));\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesTryAgain {\n width: 100%;\n}\n\n.IncodeChooserPage .IncodePageContent {\n padding-bottom: var(--spacing-16, var(--spacing-16, 16px));\n}\n\n.IncodeChooserPage .IncodePageTitle {\n max-width: var(--incode-form-max);\n}\n\n.IncodeChooserPage .IncodeChooserContainer {\n flex-direction: column;\n align-items: center;\n width: 100%;\n margin-top: auto;\n display: flex;\n}\n\n.IncodeCaptureFrame {\n border-radius: var(--radius-medium, var(--border-radius-medium));\n --frame-border-color: var(--border-neutral-100);\n border: var(--id-capture-frame-border-width) solid var(--frame-border-color);\n justify-content: center;\n align-self: center;\n align-items: center;\n transition: max-width .3s ease-out, border-color .3s ease-out;\n display: flex;\n position: relative;\n}\n\n.IncodeCaptureFrame.IncodeCaptureFrameHorizontal {\n width: 100%;\n max-width: var(--id-capture-frame-horizontal-max-width);\n aspect-ratio: 35 / 22;\n}\n\n.IncodeCaptureFrame.IncodeCaptureFrameVertical {\n width: 100%;\n max-width: var(--id-capture-frame-vertical-max-width);\n aspect-ratio: 22 / 35;\n}\n\n.IncodeCaptureFrame.IncodeCaptureFramePassport.IncodeCaptureFrameHorizontal {\n aspect-ratio: 42 / 30;\n}\n\n.IncodeCaptureFrame.IncodeCaptureFramePassport.IncodeCaptureFrameVertical {\n aspect-ratio: 30 / 42;\n}\n\n.IncodeCaptureFrame.IncodeCaptureFrameIdle {\n --frame-border-color: var(--border-neutral-100);\n}\n\n.IncodeCaptureFrame.IncodeCaptureFrameCapturing, .IncodeCaptureFrame.IncodeCaptureFrameFocus {\n --frame-border-color: var(--border-brand-500);\n}\n\n.IncodeCaptureFrame.IncodeCaptureFrameAnalyzing, .IncodeCaptureFrame.IncodeCaptureFrameSuccess {\n --frame-border-color: var(--border-status-positive-static);\n}\n\n.IncodeCaptureFrame.IncodeCaptureFrameError {\n --frame-border-color: var(--border-status-negative);\n}\n\n.IncodeIdCaptureStage {\n width: 100%;\n height: 100%;\n position: relative;\n}\n\n.IncodeIdCaptureStage > * {\n inset: var(--spacing-0, var(--spacing-none, 0px));\n position: absolute;\n}\n\n.IncodeIdCaptureStage > .IncodeIdCaptureStageResultExiting {\n animation: incodeIdCaptureResultCrossfadeOut var(--id-capture-result-crossfade-duration) linear forwards;\n pointer-events: none;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .IncodeIdCaptureStage > .IncodeIdCaptureStageResultExiting {\n animation-duration: 1ms;\n }\n}\n\n.IncodeIdCaptureStage > .IncodeIdCaptureStageResultEntering {\n animation: incodeIdCaptureResultCrossfadeIn var(--id-capture-result-crossfade-duration) linear forwards;\n pointer-events: none;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .IncodeIdCaptureStage > .IncodeIdCaptureStageResultEntering {\n animation-duration: 1ms;\n }\n}\n\n.IncodeIdCapturePage {\n background-color: var(--color-surface-neutral-900, var(--surface-neutral-900));\n}\n\n@media (min-width: 48rem) {\n .IncodeIdCapturePage {\n background-color: var(--capture-page-backdrop-color);\n }\n}\n\n.IncodeIdCapturePage .IncodePageInner {\n padding: var(--spacing-0, var(--spacing-none, 0px));\n}\n\n.IncodeIdCapturePage .IncodePageContent {\n flex: 1;\n position: relative;\n}\n\n.IncodeIdCapturePage .IncodeCaptureInitializing {\n height: 100%;\n color: var(--color-text-body-0, var(--text-body-0-static));\n flex-direction: column;\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.IncodeIdCapturePage .IncodeCaptureInitializing .IncodeCaptureVideo {\n pointer-events: none;\n inset: var(--spacing-0, var(--spacing-none, 0px));\n position: absolute;\n}\n\n.IncodeIdCapturePage .IncodeCaptureInitializing .IncodeCaptureVideo.IncodeCaptureVideoLoading {\n opacity: 0;\n}\n\n.IncodeIdCapturePage .IncodeCaptureInitializing .IncodeCaptureVideo .IncodeCaptureVideoElement {\n inset: var(--spacing-0, var(--spacing-none, 0px));\n object-fit: cover;\n width: 100%;\n max-width: 100%;\n height: 100%;\n position: absolute;\n}\n\n.IncodeIdCapturePage .IncodeCaptureInitializing .IncodeCaptureOverlay {\n pointer-events: none;\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.IncodeIdCapturePage .IncodeCaptureInitializing .IncodeCaptureButton {\n border-radius: var(--radius-button-primary, var(--button-primary-border-radius));\n padding-inline: var(--spacing-24, var(--spacing-24, 24px));\n padding-block: var(--spacing-12, var(--spacing-12, 12px));\n background-color: var(--color-button-primary-surface-default, var(--button-primary-surface-default));\n color: var(--color-button-primary-text-default, var(--button-primary-text-default));\n}\n\n.IncodeIdCapturePage .IncodeCaptureInitializing .IncodeCaptureInitializing {\n height: 100%;\n color: var(--color-text-body-0, var(--text-body-0-static));\n flex-direction: column;\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.IncodeIdCapturePage .IncodeCaptureInitializing .IncodeCaptureInitializing .IncodeCaptureInitializingText {\n margin-top: var(--spacing-16, var(--spacing-16, 16px));\n}\n\n.IncodeIdCapturePage .IncodeCaptureInitializing .IncodeCaptureUploading, .IncodeIdCapturePage .IncodeCaptureUploading {\n height: 100%;\n color: var(--color-text-body-0, var(--text-body-0-static));\n flex-direction: column;\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n@keyframes incodeIdCaptureResultCrossfadeOut {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n }\n}\n\n@keyframes incodeIdCaptureResultCrossfadeIn {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n.IncodeCaptureOverlayId {\n padding: var(--spacing-24, var(--spacing-24, 24px));\n align-items: center;\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureTopSection {\n justify-content: flex-end;\n align-items: center;\n gap: var(--spacing-24, var(--spacing-24, 24px));\n padding-bottom: var(--spacing-40, var(--spacing-40, 40px));\n z-index: 10;\n flex-direction: column;\n flex: 1;\n display: flex;\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureTopSection .IncodeCameraOverlayHeader {\n padding-inline: var(--spacing-16, var(--spacing-16, 16px));\n padding-top: var(--spacing-16, var(--spacing-16, 16px));\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureFooter {\n flex: 1;\n justify-content: space-between;\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeCaptureFooterCaptureSection {\n position: relative;\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer {\n pointer-events: none;\n z-index: 1000;\n --manual-capture-tooltip-button-gap: var(--spacing-4);\n --manual-capture-tooltip-button-top-offset: var(--spacing-12);\n --manual-capture-tooltip-button-center-offset: calc(var(--spacing-32) + var(--manual-capture-tooltip-button-gap));\n width: max-content;\n left: 50%;\n bottom: calc(100% - ( var(--manual-capture-tooltip-button-top-offset) - var(--manual-capture-tooltip-button-gap) ));\n animation: manualCaptureTooltipExit .35s ease-in var(--manual-capture-tooltip-dismiss-delay, 3.5s) forwards;\n justify-content: center;\n display: flex;\n position: absolute;\n transform: translateX(-50%);\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer .IncodeIdManualCaptureTooltip {\n border-radius: var(--radius-medium, var(--border-radius-medium));\n background-color: var(--color-surface-neutral-900, var(--surface-neutral-900));\n padding: var(--spacing-16, var(--spacing-16, 16px));\n animation: .5s ease-out forwards slideUp;\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer .IncodeIdManualCaptureTooltip .IncodeIdManualCaptureTooltipList {\n margin: var(--spacing-0, var(--spacing-none, 0px));\n padding: var(--spacing-0, var(--spacing-none, 0px));\n flex-direction: column;\n align-items: center;\n list-style-type: none;\n display: flex;\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer .IncodeIdManualCaptureTooltip .IncodeIdManualCaptureTooltipList li {\n margin: var(--spacing-0, var(--spacing-none, 0px));\n font-family: var(--typography-tooltip-family);\n font-size: var(--typography-tooltip-m-size);\n font-weight: var(--typography-tooltip-m-weight);\n line-height: var(--typography-tooltip-m-line-height);\n letter-spacing: var(--typography-tooltip-m-letter-spacing);\n text-wrap: nowrap;\n color: var(--color-text-body-0-static, var(--text-body-0-static));\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer.IncodeIdManualCaptureTooltipContainerSrOnly {\n clip-path: inset(50%);\n white-space: nowrap;\n border-width: 0;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n animation: none;\n position: absolute;\n overflow: hidden;\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer.IncodeIdManualCaptureTooltipContainerSrOnly .IncodeIdManualCaptureTooltip {\n animation: none;\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer.IncodeIdManualCaptureTooltipContainerAutoDismiss {\n animation-name: manualCaptureTooltipExitAutoDismiss;\n}\n\n.IncodeCaptureOverlayId .IncodeCameraFrameHorizontal.IncodeCaptureFramePassport {\n aspect-ratio: 42 / 30;\n}\n\n.IncodeCaptureOverlayId .IncodeCameraFrameVertical.IncodeCaptureFramePassport {\n aspect-ratio: 30 / 42;\n}\n\n@keyframes manualCaptureTooltipExit {\n from {\n opacity: 1;\n transform: translateX(-50%);\n }\n\n to {\n opacity: 0;\n transform: translate(-50%, calc(50% + var(--manual-capture-tooltip-button-center-offset)));\n }\n}\n\n@keyframes manualCaptureTooltipExitAutoDismiss {\n from {\n opacity: 1;\n transform: translateX(-50%) scale(1);\n }\n\n to {\n opacity: .5;\n transform: translate(-50%, calc(25% + var(--manual-capture-tooltip-button-center-offset))) scale(.5);\n }\n}\n\n.IncodeIdManualCaptureButton {\n bottom: var(--spacing-24, var(--spacing-24, 24px));\n z-index: 100;\n --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n width: 100%;\n translate: var(--tw-translate-x) var(--tw-translate-y);\n justify-content: center;\n align-items: center;\n gap: var(--spacing-4, var(--spacing-4, 4px));\n flex-direction: column;\n animation: .5s ease-out forwards slideUp;\n display: flex;\n position: absolute;\n left: 50%;\n}\n\n.IncodeIdManualCaptureButton .IncodeButtonLink {\n height: 100%;\n padding: var(--spacing-0, var(--spacing-none, 0px));\n color: var(--color-text-body-primary, var(--text-body-800-primary));\n}\n\n.IncodeIdManualCaptureButton .IncodeIdManualCaptureTooltipContainer .IncodeIdManualCaptureTooltip {\n border-radius: var(--radius-medium, var(--border-radius-medium));\n background-color: var(--color-surface-neutral-900, var(--surface-neutral-900));\n padding: var(--spacing-16, var(--spacing-16, 16px));\n}\n\n.IncodeIdManualCaptureButton .IncodeIdManualCaptureTooltipContainer .IncodeIdManualCaptureTooltip .IncodeIdManualCaptureTooltipList {\n margin: var(--spacing-0, var(--spacing-none, 0px));\n padding: var(--spacing-0, var(--spacing-none, 0px));\n flex-direction: column;\n align-items: center;\n list-style-type: none;\n display: flex;\n}\n\n.IncodeIdManualCaptureButton .IncodeIdManualCaptureTooltipContainer .IncodeIdManualCaptureTooltip .IncodeIdManualCaptureTooltipList li {\n margin: var(--spacing-0, var(--spacing-none, 0px));\n font-family: var(--typography-tooltip-family);\n font-size: var(--typography-tooltip-m-size);\n font-weight: var(--typography-tooltip-m-weight);\n line-height: var(--typography-tooltip-m-line-height);\n letter-spacing: var(--typography-tooltip-m-letter-spacing);\n text-wrap: nowrap;\n color: var(--color-text-body-0-static, var(--text-body-0-static));\n}\n\n.IncodeIdManualCaptureButton .IncodeIdManualCaptureButtonContent .IncodeIdManualCaptureButtonButton svg {\n transition: filter .2s, transform .2s;\n}\n\n.IncodeIdManualCaptureButton .IncodeIdManualCaptureButtonContent:active svg {\n filter: brightness(.8);\n transform: scale(.95);\n}\n\n@keyframes slideUpAndDown {\n 0%, 12% {\n opacity: 0;\n transform: translateY(100%);\n }\n\n 24% {\n opacity: 1;\n transform: translateY(0);\n }\n\n 76% {\n opacity: 1;\n transform: translateY(0);\n }\n\n 88%, 100% {\n opacity: 0;\n transform: translateY(100%);\n }\n}\n\n.IncodeIdHint {\n inset: var(--spacing-0, var(--spacing-none, 0px));\n z-index: 10;\n justify-content: center;\n align-items: center;\n display: flex;\n position: absolute;\n}\n\n.IncodeIdHint .IncodeIdHintAnimated {\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n animation: 3s ease-in-out forwards slideUpAndDown;\n display: flex;\n position: relative;\n}\n\n.IncodeIdHint .IncodeIdHintAnimated .IncodeIdHintSvg {\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.IncodeIdHint .IncodeIdHintAnimated .IncodeIdHintSvg svg {\n width: var(--id-capture-hint-svg-size);\n height: var(--id-capture-hint-svg-size);\n min-width: var(--id-capture-hint-svg-size);\n min-height: var(--id-capture-hint-svg-size);\n}\n\n.IncodeComponent .IncodePermissionInCameraPage .IncodePermissionInCameraContent {\n opacity: 0;\n width: 100%;\n height: 100%;\n animation: incodePermissionInCameraReveal var(--id-tutorial-to-permission-transition-duration) ease-out var(--id-permission-in-camera-reveal-delay) forwards;\n flex-direction: column;\n align-items: center;\n display: flex;\n}\n\n.IncodeComponent .IncodePermissionInCameraPage .IncodePermissionInCameraReservedFooter {\n visibility: hidden;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .IncodeComponent .IncodePermissionInCameraPage .IncodePermissionInCameraContent {\n animation-duration: 1ms;\n animation-delay: 0s;\n }\n}\n\n@keyframes incodePermissionInCameraReveal {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n.IncodeComponent .IncodePermissionInCameraFlowStage {\n width: 100%;\n height: 100%;\n position: relative;\n}\n\n.IncodeComponent .IncodePermissionInCameraFlowStage > .IncodePermissionInCameraFlowCaptureLayer, .IncodeComponent .IncodePermissionInCameraFlowStage > .IncodePermissionInCameraFlowPermissionLayer, .IncodeComponent .IncodePermissionInCameraFlowStage > .IncodePermissionInCameraFlowTutorialLayer {\n inset: var(--spacing-0, var(--spacing-none, 0px));\n position: absolute;\n}\n\n.IncodeComponent .IncodePermissionInCameraFlowStage > .IncodePermissionInCameraFlowCaptureLayer {\n z-index: 10;\n}\n\n.IncodeComponent .IncodePermissionInCameraFlowStage > .IncodePermissionInCameraFlowPermissionLayer {\n z-index: 20;\n}\n\n.IncodeComponent .IncodePermissionInCameraFlowStage > .IncodePermissionInCameraFlowTutorialLayer {\n z-index: 30;\n}\n\n.IncodeComponent .IncodePermissionInCameraFlowStage > .IncodePermissionInCameraFlowPermissionLayerExiting {\n pointer-events: none;\n animation: incodePermissionInCameraToCaptureExit var(--id-permission-in-camera-to-capture-transition-duration) ease-in var(--id-permission-in-camera-to-capture-transition-duration) forwards;\n}\n\n.IncodeComponent .IncodePermissionInCameraFlowStage > .IncodePermissionInCameraFlowPermissionLayerExiting .IncodePermissionInCameraHeading {\n animation: incodePermissionInCameraHeadingExit var(--id-permission-in-camera-to-capture-transition-duration) ease-in forwards;\n}\n\n.IncodeComponent .IncodePermissionInCameraFlowStage > .IncodePermissionInCameraFlowTutorialLayerExiting {\n pointer-events: none;\n animation: incodeTutorialToPermissionInCameraExit var(--id-tutorial-to-permission-transition-duration) ease-in forwards;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .IncodeComponent .IncodePermissionInCameraFlowPermissionLayerExiting {\n animation-duration: 1ms;\n animation-delay: 0s;\n }\n\n .IncodeComponent .IncodePermissionInCameraFlowPermissionLayerExiting .IncodePermissionInCameraHeading, .IncodeComponent .IncodePermissionInCameraFlowTutorialLayerExiting {\n animation-duration: 1ms;\n }\n}\n\n@keyframes incodeTutorialToPermissionInCameraExit {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n }\n}\n\n@keyframes incodePermissionInCameraHeadingExit {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n }\n}\n\n@keyframes incodePermissionInCameraToCaptureExit {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n }\n}\n\n.IncodeIdProcessingPage .IncodePageInner {\n padding: var(--spacing-0, var(--spacing-none, 0px));\n}\n\n.IncodeIdProcessingLayout {\n width: 100%;\n height: 100%;\n padding: var(--spacing-24, var(--spacing-24, 24px));\n background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));\n flex-direction: column;\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent {\n z-index: 10;\n flex-direction: column;\n align-items: center;\n width: 100%;\n height: 100%;\n display: flex;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeIdProcessingTopArea {\n justify-content: flex-end;\n align-items: center;\n gap: var(--spacing-24, var(--spacing-24, 24px));\n padding-bottom: var(--spacing-40, var(--spacing-40, 40px));\n z-index: 10;\n flex-direction: column;\n flex: 1;\n width: 100%;\n display: flex;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame {\n overflow: hidden;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame.IncodeCaptureFrameVertical {\n width: var(--id-capture-frame-vertical-width);\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame.IncodeCaptureFrameVertical .IncodeIdProcessingOverlay {\n left: -25%;\n right: -25%;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame .IncodeIdProcessingImage {\n background-color: var(--color-surface-neutral-900, var(--surface-neutral-900));\n object-fit: fill;\n width: 100%;\n max-width: 100%;\n height: 100%;\n max-height: 100%;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame .IncodeIdProcessingImage.IncodeIdProcessingImageBlurred {\n filter: blur(var(--id-processing-image-blur-radius));\n -webkit-backdrop-filter: blur(var(--id-processing-image-blur-radius));\n backdrop-filter: blur(var(--id-processing-image-blur-radius));\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame .IncodeIdProcessingOverlay {\n pointer-events: none;\n z-index: 10;\n justify-content: center;\n align-items: center;\n display: flex;\n position: absolute;\n inset: 0 -10%;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeIdProcessingBottomArea {\n width: 100%;\n max-width: var(--id-capture-bottom-area-max-w);\n padding-top: var(--spacing-8, var(--spacing-8, 8px));\n z-index: 10;\n flex-direction: column;\n flex: 1;\n justify-content: space-between;\n align-items: center;\n display: flex;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeIdProcessingBottomArea .IncodeCaptureEncryptionLabel {\n justify-content: center;\n align-items: center;\n gap: var(--spacing-4, var(--spacing-4, 4px));\n padding-bottom: var(--spacing-12, var(--spacing-12, 12px));\n font-family: var(--typography-body-family);\n font-size: var(--typography-body-m-regular-size);\n font-weight: var(--typography-body-m-regular-weight);\n line-height: var(--typography-body-m-regular-line-height);\n letter-spacing: var(--typography-body-m-regular-letter-spacing);\n white-space: nowrap;\n color: var(--color-text-body-primary, var(--text-body-800-primary));\n display: flex;\n}\n\n.IncodeIdProcessingLayout.IncodeIdProcessingLayoutNoImage .IncodeIdProcessingBottomArea {\n justify-content: flex-end;\n}\n\n.IncodeIdProcessingLayout .IncodeAnalyzingContent {\n flex-direction: column;\n align-items: center;\n display: flex;\n}\n\n.IncodeIdProcessingLayout .IncodeAnalyzingContent .IncodeProgressBarContainer {\n margin-bottom: var(--spacing-24, var(--spacing-24, 24px));\n}\n\n.IncodeIdProcessingLayout .IncodeAnalyzingContent .IncodeAnalyzingTitle {\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h2-size);\n font-weight: var(--typography-headline-h2-weight);\n line-height: var(--typography-headline-h2-line-height);\n letter-spacing: var(--typography-headline-h2-letter-spacing);\n color: var(--color-text-body-primary, var(--text-body-800-primary));\n text-align: center;\n min-height: var(--typography-headline-h2-line-height);\n}\n\n.IncodeIdProcessingLayout .IncodeAnalyzingContent .IncodeAnalyzingTitle .IncodeAnalyzingTitleText {\n animation: IncodeAnalyzingTitleFade var(--id-capture-analyzing-title-fade-duration) ease-out both;\n display: inline-block;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .IncodeIdProcessingLayout .IncodeAnalyzingContent .IncodeAnalyzingTitle .IncodeAnalyzingTitleText {\n animation-duration: 1ms;\n }\n}\n\n.IncodeIdProcessingLayout .IncodeAnalyzingLottie {\n width: 100%;\n max-width: none;\n}\n\n@keyframes IncodeAnalyzingTitleFade {\n from {\n opacity: 0;\n transform: translateY(var(--id-capture-analyzing-title-fade-offset));\n }\n\n to {\n opacity: 1;\n transform: none;\n }\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingResultContent, .IncodeIdProcessingLayout .IncodeIdProcessingResultStatus {\n flex-direction: column;\n align-items: center;\n width: 100%;\n display: flex;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingResultTitle {\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h2-size);\n font-weight: var(--typography-headline-h2-weight);\n line-height: var(--typography-headline-h2-line-height);\n letter-spacing: var(--typography-headline-h2-letter-spacing);\n color: var(--color-text-body-primary, var(--text-body-800-primary));\n text-align: center;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingResultSubtitle {\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h5-size);\n font-weight: var(--typography-headline-h5-weight);\n line-height: var(--typography-headline-h5-line-height);\n letter-spacing: var(--typography-headline-h5-letter-spacing);\n color: var(--color-text-body-secondary, var(--text-body-500-secondary));\n text-align: center;\n max-width: var(--incode-form-max-w);\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingResultButtonContainer {\n margin-top: var(--spacing-24, var(--spacing-24, 24px));\n gap: var(--spacing-16, var(--spacing-16, 16px));\n flex-direction: column;\n width: 100%;\n display: flex;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingResultAttempts {\n padding-block: var(--spacing-12, var(--spacing-12, 12px));\n text-align: center;\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h4-size);\n font-weight: var(--typography-headline-h4-weight);\n line-height: var(--typography-headline-h4-line-height);\n letter-spacing: var(--typography-headline-h4-letter-spacing);\n color: var(--color-text-body-secondary, var(--text-body-500-secondary));\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingResultContentExiting, .IncodeIdProcessingLayout .IncodeIdProcessingResultButtonContainerExiting {\n animation: .3s ease-out forwards incodeIdProcessingResultFadeOut;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .IncodeIdProcessingLayout .IncodeIdProcessingResultContentExiting, .IncodeIdProcessingLayout .IncodeIdProcessingResultButtonContainerExiting {\n animation-duration: 1ms;\n }\n}\n\n@keyframes incodeIdProcessingResultFadeOut {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n }\n}\n\n.IncodeIdError {\n inset: var(--spacing-0, var(--spacing-none, 0px));\n z-index: 1000;\n justify-content: center;\n align-items: center;\n gap: var(--spacing-16, var(--spacing-16, 16px));\n flex-direction: column;\n width: 100%;\n height: 100%;\n display: flex;\n position: fixed;\n}\n\n.IncodeIdError .IncodeIdErrorMessage {\n text-align: center;\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h4-size);\n font-weight: var(--typography-headline-h4-weight);\n line-height: var(--typography-headline-h4-line-height);\n letter-spacing: var(--typography-headline-h4-letter-spacing);\n color: var(--color-text-body-0, var(--text-body-0-static));\n max-width: var(--incode-form-max-w);\n margin-bottom: var(--spacing-16, var(--spacing-16, 16px));\n}\n\n.IncodeIdNoAttemptsContent {\n padding-inline: var(--spacing-20, var(--spacing-20, 20px));\n max-height: var(--id-no-attempts-content-max-h);\n max-width: var(--id-no-attempts-content-max-w);\n flex-direction: column;\n flex: 1;\n justify-content: center;\n align-items: center;\n margin: auto;\n display: flex;\n}\n\n.IncodeIdNoAttemptsContent .IncodeIdNoAttemptsIcon {\n margin-bottom: var(--spacing-16, var(--spacing-16, 16px));\n}\n\n.IncodeIdNoAttemptsContent .IncodeIdNoAttemptsTitle {\n text-align: center;\n color: var(--color-text-body-primary, var(--text-body-800-primary));\n}\n\n.IncodeIdNoAttemptsContent .IncodeIdNoAttemptsSubtitle {\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h5-size);\n font-weight: var(--typography-headline-h5-weight);\n line-height: var(--typography-headline-h5-line-height);\n letter-spacing: var(--typography-headline-h5-letter-spacing);\n color: var(--color-text-body-secondary, var(--text-body-500-secondary));\n text-align: center;\n max-width: var(--incode-form-max-w);\n}\n\n.IncodeIdNoAttemptsContent .IncodeIdNoAttemptsButtonContainer {\n bottom: var(--spacing-32, var(--spacing-32, 32px));\n right: var(--spacing-0, var(--spacing-none, 0px));\n left: var(--spacing-0, var(--spacing-none, 0px));\n padding-inline: var(--spacing-24, var(--spacing-24, 24px));\n justify-content: center;\n display: flex;\n position: absolute;\n}\n\n.IncodeUnacceptedIdDocuments {\n margin-top: var(--spacing-32, var(--spacing-32, 32px));\n flex-direction: column;\n align-items: center;\n width: 100%;\n display: flex;\n}\n\n.IncodeUnacceptedIdDocuments .IncodeUnacceptedIdDocumentsCountry {\n margin-bottom: var(--spacing-32, var(--spacing-32, 32px));\n align-items: center;\n gap: var(--spacing-8, var(--spacing-8, 8px));\n flex-direction: column;\n display: flex;\n}\n\n.IncodeUnacceptedIdDocuments .IncodeUnacceptedIdDocumentsCountryHeading {\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h4-size);\n font-weight: var(--typography-headline-h4-weight);\n line-height: var(--typography-headline-h4-line-height);\n letter-spacing: var(--typography-headline-h4-letter-spacing);\n}\n\n.IncodeUnacceptedIdDocuments .IncodeUnacceptedIdDocumentsCountryLabel {\n align-items: center;\n gap: var(--spacing-8, var(--spacing-8, 8px));\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h3-size);\n font-weight: var(--typography-headline-h3-weight);\n line-height: var(--typography-headline-h3-line-height);\n letter-spacing: var(--typography-headline-h3-letter-spacing);\n color: var(--color-text-body-primary, var(--text-body-800-primary));\n display: inline-flex;\n}\n\n.IncodeIdCaptureNotification {\n right: var(--spacing-24, var(--spacing-24, 24px));\n left: var(--spacing-24, var(--spacing-24, 24px));\n z-index: 100;\n max-width: var(--incode-form-max-w);\n padding-bottom: var(--spacing-32, var(--spacing-32, 32px));\n top: var(--incode-overlay-top-inset, var(--spacing-24));\n align-items: flex-end;\n margin: auto;\n display: flex;\n position: absolute;\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent {\n z-index: 100;\n border-radius: var(--radius-large, var(--border-radius-large));\n border-style: var(--tw-border-style);\n border-width: 2px;\n border-color: var(--color-border-neutral-300, var(--border-neutral-300));\n background-color: var(--color-surface-neutral-900-80, var(--surface-neutral-900-80));\n width: 100%;\n padding-inline: var(--spacing-20, var(--spacing-20, 20px));\n box-shadow: var(--id-capture-notification-content-shadow);\n display: flex;\n overflow: hidden;\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent.IncodeIdCaptureNotificationContent--minimal {\n justify-content: center;\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationText {\n justify-content: center;\n gap: var(--spacing-8, var(--spacing-8, 8px));\n padding-top: var(--spacing-16, var(--spacing-16, 16px));\n padding-bottom: var(--spacing-12, var(--spacing-12, 12px));\n text-align: center;\n color: var(--color-text-body-0-static, var(--text-body-0-static));\n flex-direction: column;\n display: flex;\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationText .IncodeIdCaptureNotificationTitle {\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h3-size);\n font-weight: var(--typography-headline-h3-weight);\n line-height: var(--typography-headline-h3-line-height);\n letter-spacing: var(--typography-headline-h3-letter-spacing);\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationText .IncodeIdCaptureNotificationDescription {\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h5-size);\n font-weight: var(--typography-headline-h5-weight);\n line-height: var(--typography-headline-h5-line-height);\n letter-spacing: var(--typography-headline-h5-letter-spacing);\n color: var(--color-text-body-tertiary-static, var(--text-body-300-tertiary-static));\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent.IncodeIdCaptureNotificationContent--minimal .IncodeIdCaptureNotificationText {\n gap: var(--spacing-4, var(--spacing-4, 4px));\n padding-block: var(--spacing-16, var(--spacing-16, 16px));\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent.IncodeIdCaptureNotificationContent--minimal .IncodeIdCaptureNotificationText .IncodeIdCaptureNotificationTitle {\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h5-size);\n font-weight: var(--typography-headline-h5-weight);\n line-height: var(--typography-headline-h5-line-height);\n letter-spacing: var(--typography-headline-h5-letter-spacing);\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent.IncodeIdCaptureNotificationContent--minimal .IncodeIdCaptureNotificationText .IncodeIdCaptureNotificationDescription {\n font-family: var(--typography-body-family);\n font-size: var(--typography-body-m-regular-size);\n font-weight: var(--typography-body-m-regular-weight);\n line-height: var(--typography-body-m-regular-line-height);\n letter-spacing: var(--typography-body-m-regular-letter-spacing);\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationAnimation {\n height: var(--id-capture-notification-animation-height);\n justify-content: center;\n align-items: center;\n width: auto;\n display: flex;\n}\n\n.IncodeDigitalIdUploadPage {\n height: 100%;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadBody {\n justify-content: center;\n align-items: center;\n row-gap: var(--spacing-16, var(--spacing-16, 16px));\n width: 100%;\n height: 100%;\n max-width: var(--digital-id-content-max-w);\n flex-direction: column;\n margin-inline: auto;\n display: flex;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadPreviewBody {\n row-gap: var(--spacing-16, var(--spacing-16, 16px));\n grid-template-columns: 1fr;\n grid-template-rows: var(--spacing-24) var(--digital-id-preview-h) var(--spacing-24);\n width: 100%;\n height: 100%;\n max-width: var(--digital-id-content-max-w);\n align-content: center;\n justify-items: center;\n margin-inline: auto;\n display: grid;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadPreStatusZone {\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n display: flex;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadPostCaptionZone {\n justify-content: center;\n align-items: flex-start;\n width: 100%;\n height: 100%;\n display: flex;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadFooter {\n width: 100%;\n margin-inline: auto;\n margin-top: var(--spacing-24, var(--spacing-24, 24px));\n margin-bottom: var(--spacing-8, var(--spacing-8, 8px));\n justify-content: flex-end;\n row-gap: var(--spacing-16, var(--spacing-16, 16px));\n max-width: var(--digital-id-content-max-w);\n min-height: var(--digital-id-footer-min-h);\n flex-direction: column;\n display: flex;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadHiddenInput {\n display: none;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadTutorialIllustration {\n width: 100%;\n max-height: var(--digital-id-tutorial-illustration-max-h);\n flex: 1;\n justify-content: center;\n align-items: center;\n display: flex;\n overflow: hidden;\n}\n\n.IncodeDigitalIdUploadPage .IncodeUploadIdScreenImage {\n height: var(--digital-id-illustration-max-h);\n aspect-ratio: 191 / 266;\n width: auto;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadPreviewCard {\n border-radius: var(--radius-medium, var(--border-radius-medium));\n border-style: var(--tw-border-style);\n --tw-border-style: solid;\n border-style: solid;\n border-width: 1px;\n border-color: var(--color-border-neutral-100, var(--border-neutral-100));\n background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));\n width: var(--digital-id-preview-w);\n height: var(--digital-id-preview-h);\n justify-content: center;\n align-items: center;\n display: flex;\n overflow: hidden;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadDocumentPreview {\n width: var(--digital-id-preview-w);\n height: var(--digital-id-preview-h);\n justify-content: center;\n align-items: center;\n display: flex;\n position: relative;\n overflow: visible;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadDocumentPreviewPdf {\n border-radius: var(--radius-medium, var(--border-radius-medium));\n border-style: var(--tw-border-style);\n border-width: var(--border-width-bold, var(--primitive-border-width-2));\n --tw-border-style: solid;\n border-style: solid;\n border-color: var(--color-border-status-positive, var(--border-status-positive-static));\n object-fit: contain;\n width: 100%;\n height: 100%;\n overflow: hidden;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadPreviewPdf {\n object-fit: contain;\n width: 100%;\n height: 100%;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadFileName {\n text-align: center;\n font-family: var(--typography-body-family);\n font-size: var(--typography-body-m-regular-size);\n font-weight: var(--typography-body-m-regular-weight);\n line-height: var(--typography-body-m-regular-line-height);\n letter-spacing: var(--typography-body-m-regular-letter-spacing);\n color: var(--color-text-body-primary, var(--text-body-800-primary));\n max-width: var(--digital-id-file-name-max-w);\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadProgressBar .IncodeProgressBar {\n border-radius: var(--radius-full, var(--border-radius-full));\n background-color: var(--color-surface-neutral-200, var(--surface-neutral-200));\n width: var(--digital-id-progress-bar-w);\n height: var(--digital-id-progress-bar-h);\n overflow: hidden;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadProgressBar .IncodeProgressBarFill {\n border-radius: var(--radius-full, var(--border-radius-full));\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadLaserOverlay {\n pointer-events: none;\n width: var(--digital-id-preview-w);\n height: var(--digital-id-laser-h);\n transform: translateX(-50%) scale(var(--digital-id-laser-scale));\n position: absolute;\n top: -2px;\n left: 50%;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .IncodeDigitalIdUploadPage .IncodeDigitalIdUploadLaserOverlay {\n display: none;\n }\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadSuccessIcon {\n color: var(--color-icon-status-positive, var(--icon-status-positive));\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadErrorIcon {\n margin-bottom: var(--spacing-8, var(--spacing-8, 8px));\n color: var(--color-icon-status-negative, var(--icon-status-negative));\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadErrorPreview {\n margin-top: var(--spacing-8, var(--spacing-8, 8px));\n border-radius: var(--radius-medium, var(--border-radius-medium));\n border-style: var(--tw-border-style);\n --tw-border-style: solid;\n border-style: solid;\n border-width: 1px;\n border-color: var(--color-border-status-negative, var(--border-status-negative));\n padding: var(--spacing-4);\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadAttempts {\n margin-top: var(--spacing-8, var(--spacing-8, 8px));\n font-family: var(--typography-body-family);\n font-size: var(--typography-body-s-regular-size);\n font-weight: var(--typography-body-s-regular-weight);\n line-height: var(--typography-body-s-regular-line-height);\n letter-spacing: var(--typography-body-s-regular-letter-spacing);\n color: var(--color-text-body-secondary, var(--text-body-500-secondary));\n}\n\n@property --tw-translate-x {\n syntax: \"\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-translate-y {\n syntax: \"\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-translate-z {\n syntax: \"\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-border-style {\n syntax: \"\";\n inherits: false;\n initial-value: solid;\n}\n";
1	+ export default "/! tailwindcss v4.2.2 \| MIT License \| https://tailwindcss.com /\n@layer properties {\n @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {\n .IncodeComponent, .IncodeComponent , .IncodeComponent :before, .IncodeComponent :after, .IncodeComponent ::backdrop {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-translate-z: 0;\n --tw-border-style: solid;\n }\n }\n}\n\n.IncodeSrOnly {\n clip-path: inset(50%);\n white-space: nowrap;\n border-width: 0;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n position: absolute;\n overflow: hidden;\n}\n\n.IncodeAgeVerificationPage .IncodePageInner {\n padding-top: var(--spacing-8, var(--spacing-8, 8px));\n padding-bottom: var(--spacing-16, var(--spacing-16, 16px));\n}\n\n.IncodeAgeVerificationPage .IncodePageHeader {\n height: var(--page-header-height);\n min-height: var(--page-header-height);\n}\n\n.IncodeAgeVerificationPage .IncodePageLogo {\n height: var(--age-verification-logo-height);\n}\n\n.IncodeAgeVerificationPage .IncodePageTitleContainer {\n max-width: none;\n}\n\n.IncodeAgeVerificationPage .IncodePageContent {\n justify-content: center;\n}\n\n.IncodeAgeVerificationPage .IncodePageFooter {\n padding-top: var(--spacing-12, var(--spacing-12, 12px));\n padding-bottom: var(--spacing-0, var(--spacing-none, 0px));\n}\n\n.IncodeAgeVerificationPage .IncodeAgeVerificationContent {\n justify-content: space-between;\n align-items: center;\n gap: var(--spacing-16, var(--spacing-16, 16px));\n flex-direction: column;\n flex: 1;\n display: flex;\n}\n\n.IncodeAgeVerificationPage .IncodeAgeVerificationList {\n width: 100%;\n max-width: var(--incode-form-max-w);\n justify-content: center;\n gap: var(--spacing-16, var(--spacing-16, 16px));\n padding: var(--spacing-0, var(--spacing-none, 0px));\n flex-direction: column;\n flex: 1;\n margin-inline: auto;\n list-style-type: none;\n display: flex;\n}\n\n.IncodeAgeVerificationPage .IncodeAgeVerificationItem {\n align-items: center;\n gap: var(--spacing-16, var(--spacing-16, 16px));\n display: flex;\n}\n\n.IncodeAgeVerificationPage .IncodeAgeVerificationIcon {\n height: var(--spacing-64, var(--spacing-64, 64px));\n width: var(--spacing-96, var(--spacing-96, 96px));\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.IncodeAgeVerificationPage .IncodeAgeVerificationIcon img {\n width: 100%;\n height: 100%;\n}\n\n.IncodeAgeVerificationPage .IncodeAgeVerificationText {\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h5-size);\n font-weight: var(--typography-headline-h5-weight);\n line-height: var(--typography-headline-h5-line-height);\n letter-spacing: var(--typography-headline-h5-letter-spacing);\n color: var(--color-text-body-primary, var(--text-body-800-primary));\n flex: 1;\n}\n\n.IncodeAgeVerificationPage .IncodeAgeVerificationButton {\n width: 100%;\n max-width: var(--incode-form-max-w);\n margin-inline: auto;\n}\n\n.IncodeIdTutorial .IncodePageTitleContainer {\n padding-block: var(--spacing-16, var(--spacing-16, 16px));\n}\n\n.IncodeIdTutorial .IncodeBaseTutorialContainer {\n margin: calc(var(--spacing-24, var(--spacing-24, 24px)) -1);\n}\n\n.IncodeIdTutorial .IncodeBaseTutorialAnimationContainer {\n padding: var(--spacing-0, var(--spacing-none, 0px));\n}\n\n.IncodeFlipAnimation {\n background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));\n height: 100%;\n padding: var(--spacing-24, var(--spacing-24, 24px));\n flex-direction: column;\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.IncodeIdFlipCardPage .IncodePageInner {\n padding: var(--spacing-0, var(--spacing-none, 0px));\n}\n\n.IncodeIdFlipCardLayout {\n width: 100%;\n height: 100%;\n padding: var(--spacing-24, var(--spacing-24, 24px));\n background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));\n flex-direction: column;\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent {\n z-index: 10;\n flex-direction: column;\n align-items: center;\n width: 100%;\n height: 100%;\n display: flex;\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardTopArea {\n justify-content: flex-end;\n align-items: center;\n gap: var(--spacing-24, var(--spacing-24, 24px));\n padding-bottom: var(--spacing-40, var(--spacing-40, 40px));\n z-index: 10;\n flex-direction: column;\n flex: 1;\n width: 100%;\n display: flex;\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardCopy {\n opacity: 0;\n flex-direction: column;\n align-items: center;\n animation: .3s ease-out forwards incodeIdFlipCardFadeIn;\n display: flex;\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardTitle {\n text-align: center;\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h2-size);\n font-weight: var(--typography-headline-h2-weight);\n line-height: var(--typography-headline-h2-line-height);\n letter-spacing: var(--typography-headline-h2-letter-spacing);\n color: var(--color-text-body-primary, var(--text-body-800-primary));\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardSubtitle {\n max-width: var(--id-capture-flip-card-subtitle-max-w);\n text-align: center;\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h5-size);\n font-weight: var(--typography-headline-h5-weight);\n line-height: var(--typography-headline-h5-line-height);\n letter-spacing: var(--typography-headline-h5-letter-spacing);\n color: var(--color-text-body-secondary, var(--text-body-500-secondary));\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeCaptureFrame {\n overflow: hidden;\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeCaptureFrame.IncodeCaptureFrameVertical {\n width: var(--id-capture-frame-vertical-width);\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeCaptureFrame.IncodeIdFlipCardFrameFlipping {\n --frame-border-color: var(--border-neutral-100);\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardScene {\n perspective: 1200px;\n width: 100%;\n height: 100%;\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardCard {\n width: 100%;\n height: 100%;\n transform-style: preserve-3d;\n animation: 1s ease-in-out .6s forwards incodeIdFlipCardRotate;\n position: relative;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardCard {\n animation: none;\n }\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardFace {\n inset: var(--spacing-0, var(--spacing-none, 0px));\n backface-visibility: hidden;\n width: 100%;\n height: 100%;\n position: absolute;\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardFace.IncodeIdFlipCardFaceBack {\n transform: rotateY(180deg);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardFace.IncodeIdFlipCardFaceBack {\n opacity: 0;\n animation: 1s ease-in-out .6s forwards incodeIdFlipCardReducedMotionFadeIn;\n transform: none;\n }\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardImage {\n object-fit: cover;\n width: 100%;\n height: 100%;\n animation: 1s ease-in-out .6s forwards incodeIdFlipCardFrontFade;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardImage {\n animation: 1s ease-in-out .6s forwards incodeIdFlipCardReducedMotionFadeOut;\n }\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardAsset {\n object-fit: cover;\n width: 100%;\n height: 100%;\n padding: var(--spacing-4, var(--spacing-4, 4px));\n display: block;\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardBottomArea {\n z-index: 10;\n width: 100%;\n max-width: var(--id-capture-bottom-area-max-w);\n padding-top: var(--spacing-8, var(--spacing-8, 8px));\n flex-direction: column;\n flex: 1;\n align-items: center;\n display: flex;\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardBottomArea .IncodeCaptureEncryptionLabel {\n justify-content: center;\n align-items: center;\n gap: var(--spacing-4, var(--spacing-4, 4px));\n font-family: var(--typography-body-family);\n font-size: var(--typography-body-m-regular-size);\n font-weight: var(--typography-body-m-regular-weight);\n line-height: var(--typography-body-m-regular-line-height);\n letter-spacing: var(--typography-body-m-regular-letter-spacing);\n white-space: nowrap;\n color: var(--color-text-body-primary, var(--text-body-800-primary));\n display: flex;\n}\n\n@keyframes incodeIdFlipCardFadeIn {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n@keyframes incodeIdFlipCardRotate {\n from {\n transform: rotateY(0);\n }\n\n to {\n transform: rotateY(180deg);\n }\n}\n\n@keyframes incodeIdFlipCardFrontFade {\n 0%, 20% {\n opacity: 1;\n }\n\n 50%, 100% {\n opacity: 0;\n }\n}\n\n@keyframes incodeIdFlipCardReducedMotionFadeIn {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n@keyframes incodeIdFlipCardReducedMotionFadeOut {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n }\n}\n\n.IncodeCommonIssuesFullScreen .IncodeModalDialog {\n max-width: none;\n height: 100%;\n max-height: none;\n}\n\n.IncodeCommonIssuesFullScreen .IncodeModalContent {\n border-radius: var(--radius-none, var(--border-radius-none));\n max-width: none;\n height: 100%;\n margin: auto;\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesQuestionIcon {\n flex-shrink: 0;\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesTitle {\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h2-size);\n font-weight: var(--typography-headline-h2-weight);\n line-height: var(--typography-headline-h2-line-height);\n letter-spacing: var(--typography-headline-h2-letter-spacing);\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesCards {\n width: 100%;\n max-width: var(--incode-form-max-w);\n gap: var(--spacing-32, var(--spacing-32, 32px));\n padding-block: var(--spacing-16, var(--spacing-16, 16px));\n flex-direction: column;\n display: flex;\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesCard {\n align-items: flex-start;\n gap: var(--spacing-16, var(--spacing-16, 16px));\n display: flex;\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesCardIcon {\n color: var(--color-text-body-primary, var(--text-body-800-primary));\n flex-shrink: 0;\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesCardText {\n gap: var(--spacing-4, var(--spacing-4, 4px));\n flex-direction: column;\n display: flex;\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesCardTitle {\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h5-size);\n font-weight: var(--typography-headline-h5-weight);\n line-height: var(--typography-headline-h5-line-height);\n letter-spacing: var(--typography-headline-h5-letter-spacing);\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesCardBody {\n font-family: var(--typography-body-family);\n font-size: var(--typography-body-m-regular-size);\n font-weight: var(--typography-body-m-regular-weight);\n line-height: var(--typography-body-m-regular-line-height);\n letter-spacing: var(--typography-body-m-regular-letter-spacing);\n color: var(--color-text-body-secondary, var(--text-body-500-secondary));\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesButtons {\n margin-top: auto;\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesTakeManually {\n color: var(--color-text-body-primary, var(--text-body-800-primary));\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesTryAgain {\n width: 100%;\n}\n\n.IncodeChooserPage .IncodePageContent {\n padding-bottom: var(--spacing-16, var(--spacing-16, 16px));\n}\n\n.IncodeChooserPage .IncodePageTitle {\n max-width: var(--incode-form-max);\n}\n\n.IncodeChooserPage .IncodeChooserContainer {\n flex-direction: column;\n align-items: center;\n width: 100%;\n margin-top: auto;\n display: flex;\n}\n\n.IncodeCaptureFrame {\n border-radius: var(--radius-medium, var(--border-radius-medium));\n --frame-border-color: var(--border-neutral-100);\n border: var(--id-capture-frame-border-width) solid var(--frame-border-color);\n justify-content: center;\n align-self: center;\n align-items: center;\n transition: max-width .3s ease-out, border-color .3s ease-out;\n display: flex;\n position: relative;\n}\n\n.IncodeCaptureFrame.IncodeCaptureFrameHorizontal {\n width: 100%;\n max-width: var(--id-capture-frame-horizontal-max-width);\n aspect-ratio: 35 / 22;\n}\n\n.IncodeCaptureFrame.IncodeCaptureFrameVertical {\n width: 100%;\n max-width: var(--id-capture-frame-vertical-max-width);\n aspect-ratio: 22 / 35;\n}\n\n.IncodeCaptureFrame.IncodeCaptureFramePassport.IncodeCaptureFrameHorizontal {\n aspect-ratio: 42 / 30;\n}\n\n.IncodeCaptureFrame.IncodeCaptureFramePassport.IncodeCaptureFrameVertical {\n aspect-ratio: 30 / 42;\n}\n\n.IncodeCaptureFrame.IncodeCaptureFrameIdle {\n --frame-border-color: var(--border-neutral-100);\n}\n\n.IncodeCaptureFrame.IncodeCaptureFrameCapturing, .IncodeCaptureFrame.IncodeCaptureFrameFocus {\n --frame-border-color: var(--border-brand-500);\n}\n\n.IncodeCaptureFrame.IncodeCaptureFrameAnalyzing, .IncodeCaptureFrame.IncodeCaptureFrameSuccess {\n --frame-border-color: var(--border-status-positive-static);\n}\n\n.IncodeCaptureFrame.IncodeCaptureFrameError {\n --frame-border-color: var(--border-status-negative);\n}\n\n.IncodeIdCaptureStage {\n width: 100%;\n height: 100%;\n position: relative;\n}\n\n.IncodeIdCaptureStage > * {\n inset: var(--spacing-0, var(--spacing-none, 0px));\n position: absolute;\n}\n\n.IncodeIdCaptureStage > .IncodeIdCaptureStageResultExiting {\n animation: incodeIdCaptureResultCrossfadeOut var(--id-capture-result-crossfade-duration) linear forwards;\n pointer-events: none;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .IncodeIdCaptureStage > .IncodeIdCaptureStageResultExiting {\n animation-duration: 1ms;\n }\n}\n\n.IncodeIdCaptureStage > .IncodeIdCaptureStageResultEntering {\n animation: incodeIdCaptureResultCrossfadeIn var(--id-capture-result-crossfade-duration) linear forwards;\n pointer-events: none;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .IncodeIdCaptureStage > .IncodeIdCaptureStageResultEntering {\n animation-duration: 1ms;\n }\n}\n\n.IncodeIdCapturePage {\n background-color: var(--color-surface-neutral-900, var(--surface-neutral-900));\n}\n\n@media (min-width: 48rem) {\n .IncodeIdCapturePage {\n background-color: var(--capture-page-backdrop-color);\n }\n}\n\n.IncodeIdCapturePage .IncodePageInner {\n padding: var(--spacing-0, var(--spacing-none, 0px));\n}\n\n.IncodeIdCapturePage .IncodePageContent {\n flex: 1;\n position: relative;\n}\n\n.IncodeIdCapturePage .IncodeCaptureInitializing {\n height: 100%;\n color: var(--color-text-body-0, var(--text-body-0-static));\n flex-direction: column;\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.IncodeIdCapturePage .IncodeCaptureInitializing .IncodeCaptureVideo {\n pointer-events: none;\n inset: var(--spacing-0, var(--spacing-none, 0px));\n position: absolute;\n}\n\n.IncodeIdCapturePage .IncodeCaptureInitializing .IncodeCaptureVideo.IncodeCaptureVideoLoading {\n opacity: 0;\n}\n\n.IncodeIdCapturePage .IncodeCaptureInitializing .IncodeCaptureVideo .IncodeCaptureVideoElement {\n inset: var(--spacing-0, var(--spacing-none, 0px));\n object-fit: cover;\n width: 100%;\n max-width: 100%;\n height: 100%;\n position: absolute;\n}\n\n.IncodeIdCapturePage .IncodeCaptureInitializing .IncodeCaptureOverlay {\n pointer-events: none;\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.IncodeIdCapturePage .IncodeCaptureInitializing .IncodeCaptureButton {\n border-radius: var(--radius-button-primary, var(--button-primary-border-radius));\n padding-inline: var(--spacing-24, var(--spacing-24, 24px));\n padding-block: var(--spacing-12, var(--spacing-12, 12px));\n background-color: var(--color-button-primary-surface-default, var(--button-primary-surface-default));\n color: var(--color-button-primary-text-default, var(--button-primary-text-default));\n}\n\n.IncodeIdCapturePage .IncodeCaptureInitializing .IncodeCaptureInitializing {\n height: 100%;\n color: var(--color-text-body-0, var(--text-body-0-static));\n flex-direction: column;\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.IncodeIdCapturePage .IncodeCaptureInitializing .IncodeCaptureInitializing .IncodeCaptureInitializingText {\n margin-top: var(--spacing-16, var(--spacing-16, 16px));\n}\n\n.IncodeIdCapturePage .IncodeCaptureInitializing .IncodeCaptureUploading, .IncodeIdCapturePage .IncodeCaptureUploading {\n height: 100%;\n color: var(--color-text-body-0, var(--text-body-0-static));\n flex-direction: column;\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n@keyframes incodeIdCaptureResultCrossfadeOut {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n }\n}\n\n@keyframes incodeIdCaptureResultCrossfadeIn {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n.IncodeCaptureOverlayId {\n padding: var(--spacing-24, var(--spacing-24, 24px));\n align-items: center;\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureTopSection {\n justify-content: flex-end;\n align-items: center;\n gap: var(--spacing-24, var(--spacing-24, 24px));\n padding-bottom: var(--spacing-40, var(--spacing-40, 40px));\n z-index: 10;\n flex-direction: column;\n flex: 1;\n display: flex;\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureTopSection .IncodeCameraOverlayHeader {\n padding-inline: var(--spacing-16, var(--spacing-16, 16px));\n padding-top: var(--spacing-16, var(--spacing-16, 16px));\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureFooter {\n flex: 1;\n justify-content: space-between;\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeCaptureFooterCaptureSection {\n position: relative;\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer {\n pointer-events: none;\n z-index: 1000;\n --manual-capture-tooltip-button-gap: var(--spacing-4);\n --manual-capture-tooltip-button-top-offset: var(--spacing-12);\n --manual-capture-tooltip-button-center-offset: calc(var(--spacing-32) + var(--manual-capture-tooltip-button-gap));\n width: max-content;\n left: 50%;\n bottom: calc(100% - ( var(--manual-capture-tooltip-button-top-offset) - var(--manual-capture-tooltip-button-gap) ));\n animation: manualCaptureTooltipExit .35s ease-in var(--manual-capture-tooltip-dismiss-delay, 3.5s) forwards;\n justify-content: center;\n display: flex;\n position: absolute;\n transform: translateX(-50%);\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer .IncodeIdManualCaptureTooltip {\n border-radius: var(--radius-medium, var(--border-radius-medium));\n background-color: var(--color-surface-neutral-900, var(--surface-neutral-900));\n padding: var(--spacing-16, var(--spacing-16, 16px));\n animation: .5s ease-out forwards slideUp;\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer .IncodeIdManualCaptureTooltip .IncodeIdManualCaptureTooltipList {\n margin: var(--spacing-0, var(--spacing-none, 0px));\n padding: var(--spacing-0, var(--spacing-none, 0px));\n flex-direction: column;\n align-items: center;\n list-style-type: none;\n display: flex;\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer .IncodeIdManualCaptureTooltip .IncodeIdManualCaptureTooltipList li {\n margin: var(--spacing-0, var(--spacing-none, 0px));\n font-family: var(--typography-tooltip-family);\n font-size: var(--typography-tooltip-m-size);\n font-weight: var(--typography-tooltip-m-weight);\n line-height: var(--typography-tooltip-m-line-height);\n letter-spacing: var(--typography-tooltip-m-letter-spacing);\n text-wrap: nowrap;\n color: var(--color-text-body-0-static, var(--text-body-0-static));\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer.IncodeIdManualCaptureTooltipContainerSrOnly {\n clip-path: inset(50%);\n white-space: nowrap;\n border-width: 0;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n animation: none;\n position: absolute;\n overflow: hidden;\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer.IncodeIdManualCaptureTooltipContainerSrOnly .IncodeIdManualCaptureTooltip {\n animation: none;\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer.IncodeIdManualCaptureTooltipContainerAutoDismiss {\n animation-name: manualCaptureTooltipExitAutoDismiss;\n}\n\n.IncodeCaptureOverlayId .IncodeCameraFrameHorizontal.IncodeCaptureFramePassport {\n aspect-ratio: 42 / 30;\n}\n\n.IncodeCaptureOverlayId .IncodeCameraFrameVertical.IncodeCaptureFramePassport {\n aspect-ratio: 30 / 42;\n}\n\n@keyframes manualCaptureTooltipExit {\n from {\n opacity: 1;\n transform: translateX(-50%);\n }\n\n to {\n opacity: 0;\n transform: translate(-50%, calc(50% + var(--manual-capture-tooltip-button-center-offset)));\n }\n}\n\n@keyframes manualCaptureTooltipExitAutoDismiss {\n from {\n opacity: 1;\n transform: translateX(-50%) scale(1);\n }\n\n to {\n opacity: .5;\n transform: translate(-50%, calc(25% + var(--manual-capture-tooltip-button-center-offset))) scale(.5);\n }\n}\n\n.IncodeIdManualCaptureButton {\n bottom: var(--spacing-24, var(--spacing-24, 24px));\n z-index: 100;\n --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n width: 100%;\n translate: var(--tw-translate-x) var(--tw-translate-y);\n justify-content: center;\n align-items: center;\n gap: var(--spacing-4, var(--spacing-4, 4px));\n flex-direction: column;\n animation: .5s ease-out forwards slideUp;\n display: flex;\n position: absolute;\n left: 50%;\n}\n\n.IncodeIdManualCaptureButton .IncodeButtonLink {\n height: 100%;\n padding: var(--spacing-0, var(--spacing-none, 0px));\n color: var(--color-text-body-primary, var(--text-body-800-primary));\n}\n\n.IncodeIdManualCaptureButton .IncodeIdManualCaptureTooltipContainer .IncodeIdManualCaptureTooltip {\n border-radius: var(--radius-medium, var(--border-radius-medium));\n background-color: var(--color-surface-neutral-900, var(--surface-neutral-900));\n padding: var(--spacing-16, var(--spacing-16, 16px));\n}\n\n.IncodeIdManualCaptureButton .IncodeIdManualCaptureTooltipContainer .IncodeIdManualCaptureTooltip .IncodeIdManualCaptureTooltipList {\n margin: var(--spacing-0, var(--spacing-none, 0px));\n padding: var(--spacing-0, var(--spacing-none, 0px));\n flex-direction: column;\n align-items: center;\n list-style-type: none;\n display: flex;\n}\n\n.IncodeIdManualCaptureButton .IncodeIdManualCaptureTooltipContainer .IncodeIdManualCaptureTooltip .IncodeIdManualCaptureTooltipList li {\n margin: var(--spacing-0, var(--spacing-none, 0px));\n font-family: var(--typography-tooltip-family);\n font-size: var(--typography-tooltip-m-size);\n font-weight: var(--typography-tooltip-m-weight);\n line-height: var(--typography-tooltip-m-line-height);\n letter-spacing: var(--typography-tooltip-m-letter-spacing);\n text-wrap: nowrap;\n color: var(--color-text-body-0-static, var(--text-body-0-static));\n}\n\n.IncodeIdManualCaptureButton .IncodeIdManualCaptureButtonContent .IncodeIdManualCaptureButtonButton svg {\n transition: filter .2s, transform .2s;\n}\n\n.IncodeIdManualCaptureButton .IncodeIdManualCaptureButtonContent:active svg {\n filter: brightness(.8);\n transform: scale(.95);\n}\n\n@keyframes slideUpAndDown {\n 0%, 12% {\n opacity: 0;\n transform: translateY(100%);\n }\n\n 24% {\n opacity: 1;\n transform: translateY(0);\n }\n\n 76% {\n opacity: 1;\n transform: translateY(0);\n }\n\n 88%, 100% {\n opacity: 0;\n transform: translateY(100%);\n }\n}\n\n.IncodeIdHint {\n inset: var(--spacing-0, var(--spacing-none, 0px));\n z-index: 10;\n justify-content: center;\n align-items: center;\n display: flex;\n position: absolute;\n}\n\n.IncodeIdHint .IncodeIdHintAnimated {\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n animation: 3s ease-in-out forwards slideUpAndDown;\n display: flex;\n position: relative;\n}\n\n.IncodeIdHint .IncodeIdHintAnimated .IncodeIdHintSvg {\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.IncodeIdHint .IncodeIdHintAnimated .IncodeIdHintSvg svg {\n width: var(--id-capture-hint-svg-size);\n height: var(--id-capture-hint-svg-size);\n min-width: var(--id-capture-hint-svg-size);\n min-height: var(--id-capture-hint-svg-size);\n}\n\n.IncodeComponent .IncodePermissionInCameraPage .IncodePermissionInCameraContent {\n opacity: 0;\n width: 100%;\n height: 100%;\n animation: incodePermissionInCameraReveal var(--id-tutorial-to-permission-transition-duration) ease-out var(--id-permission-in-camera-reveal-delay) forwards;\n flex-direction: column;\n align-items: center;\n display: flex;\n}\n\n.IncodeComponent .IncodePermissionInCameraPage .IncodePermissionInCameraReservedFooter {\n visibility: hidden;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .IncodeComponent .IncodePermissionInCameraPage .IncodePermissionInCameraContent {\n animation-duration: 1ms;\n animation-delay: 0s;\n }\n}\n\n@keyframes incodePermissionInCameraReveal {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n.IncodeComponent .IncodePermissionInCameraFlowStage {\n width: 100%;\n height: 100%;\n position: relative;\n}\n\n.IncodeComponent .IncodePermissionInCameraFlowStage > .IncodePermissionInCameraFlowCaptureLayer, .IncodeComponent .IncodePermissionInCameraFlowStage > .IncodePermissionInCameraFlowPermissionLayer, .IncodeComponent .IncodePermissionInCameraFlowStage > .IncodePermissionInCameraFlowTutorialLayer {\n inset: var(--spacing-0, var(--spacing-none, 0px));\n position: absolute;\n}\n\n.IncodeComponent .IncodePermissionInCameraFlowStage > .IncodePermissionInCameraFlowCaptureLayer {\n z-index: 10;\n}\n\n.IncodeComponent .IncodePermissionInCameraFlowStage > .IncodePermissionInCameraFlowPermissionLayer {\n z-index: 20;\n}\n\n.IncodeComponent .IncodePermissionInCameraFlowStage > .IncodePermissionInCameraFlowTutorialLayer {\n z-index: 30;\n}\n\n.IncodeComponent .IncodePermissionInCameraFlowStage > .IncodePermissionInCameraFlowPermissionLayerExiting {\n pointer-events: none;\n animation: incodePermissionInCameraToCaptureExit var(--id-permission-in-camera-to-capture-transition-duration) ease-in var(--id-permission-in-camera-to-capture-transition-duration) forwards;\n}\n\n.IncodeComponent .IncodePermissionInCameraFlowStage > .IncodePermissionInCameraFlowPermissionLayerExiting .IncodePermissionInCameraHeading {\n animation: incodePermissionInCameraHeadingExit var(--id-permission-in-camera-to-capture-transition-duration) ease-in forwards;\n}\n\n.IncodeComponent .IncodePermissionInCameraFlowStage > .IncodePermissionInCameraFlowTutorialLayerExiting {\n pointer-events: none;\n animation: incodeTutorialToPermissionInCameraExit var(--id-tutorial-to-permission-transition-duration) ease-in forwards;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .IncodeComponent .IncodePermissionInCameraFlowPermissionLayerExiting {\n animation-duration: 1ms;\n animation-delay: 0s;\n }\n\n .IncodeComponent .IncodePermissionInCameraFlowPermissionLayerExiting .IncodePermissionInCameraHeading, .IncodeComponent .IncodePermissionInCameraFlowTutorialLayerExiting {\n animation-duration: 1ms;\n }\n}\n\n@keyframes incodeTutorialToPermissionInCameraExit {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n }\n}\n\n@keyframes incodePermissionInCameraHeadingExit {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n }\n}\n\n@keyframes incodePermissionInCameraToCaptureExit {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n }\n}\n\n.IncodeIdProcessingPage .IncodePageInner {\n padding: var(--spacing-0, var(--spacing-none, 0px));\n}\n\n.IncodeIdProcessingLayout {\n width: 100%;\n height: 100%;\n padding: var(--spacing-24, var(--spacing-24, 24px));\n background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));\n flex-direction: column;\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent {\n z-index: 10;\n flex-direction: column;\n align-items: center;\n width: 100%;\n height: 100%;\n display: flex;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeIdProcessingTopArea {\n justify-content: flex-end;\n align-items: center;\n gap: var(--spacing-24, var(--spacing-24, 24px));\n padding-bottom: var(--spacing-40, var(--spacing-40, 40px));\n z-index: 10;\n flex-direction: column;\n flex: 1;\n width: 100%;\n display: flex;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame {\n overflow: hidden;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame.IncodeCaptureFrameVertical {\n width: var(--id-capture-frame-vertical-width);\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame.IncodeCaptureFrameVertical .IncodeIdProcessingOverlay {\n left: -25%;\n right: -25%;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame .IncodeIdProcessingImage {\n background-color: var(--color-surface-neutral-900, var(--surface-neutral-900));\n object-fit: cover;\n width: 100%;\n max-width: 100%;\n height: 100%;\n max-height: 100%;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame .IncodeIdProcessingImage.IncodeIdProcessingImageBlurred {\n filter: blur(var(--id-processing-image-blur-radius));\n -webkit-backdrop-filter: blur(var(--id-processing-image-blur-radius));\n backdrop-filter: blur(var(--id-processing-image-blur-radius));\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame .IncodeIdProcessingOverlay {\n pointer-events: none;\n z-index: 10;\n justify-content: center;\n align-items: center;\n display: flex;\n position: absolute;\n inset: 0 -10%;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeIdProcessingBottomArea {\n width: 100%;\n max-width: var(--id-capture-bottom-area-max-w);\n padding-top: var(--spacing-8, var(--spacing-8, 8px));\n z-index: 10;\n flex-direction: column;\n flex: 1;\n justify-content: space-between;\n align-items: center;\n display: flex;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeIdProcessingBottomArea .IncodeCaptureEncryptionLabel {\n justify-content: center;\n align-items: center;\n gap: var(--spacing-4, var(--spacing-4, 4px));\n padding-bottom: var(--spacing-12, var(--spacing-12, 12px));\n font-family: var(--typography-body-family);\n font-size: var(--typography-body-m-regular-size);\n font-weight: var(--typography-body-m-regular-weight);\n line-height: var(--typography-body-m-regular-line-height);\n letter-spacing: var(--typography-body-m-regular-letter-spacing);\n white-space: nowrap;\n color: var(--color-text-body-primary, var(--text-body-800-primary));\n display: flex;\n}\n\n.IncodeIdProcessingLayout.IncodeIdProcessingLayoutNoImage .IncodeIdProcessingBottomArea {\n justify-content: flex-end;\n}\n\n.IncodeIdProcessingLayout .IncodeAnalyzingContent {\n flex-direction: column;\n align-items: center;\n display: flex;\n}\n\n.IncodeIdProcessingLayout .IncodeAnalyzingContent .IncodeProgressBarContainer {\n margin-bottom: var(--spacing-24, var(--spacing-24, 24px));\n}\n\n.IncodeIdProcessingLayout .IncodeAnalyzingContent .IncodeAnalyzingTitle {\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h2-size);\n font-weight: var(--typography-headline-h2-weight);\n line-height: var(--typography-headline-h2-line-height);\n letter-spacing: var(--typography-headline-h2-letter-spacing);\n color: var(--color-text-body-primary, var(--text-body-800-primary));\n text-align: center;\n min-height: var(--typography-headline-h2-line-height);\n}\n\n.IncodeIdProcessingLayout .IncodeAnalyzingContent .IncodeAnalyzingTitle .IncodeAnalyzingTitleText {\n animation: IncodeAnalyzingTitleFade var(--id-capture-analyzing-title-fade-duration) ease-out both;\n display: inline-block;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .IncodeIdProcessingLayout .IncodeAnalyzingContent .IncodeAnalyzingTitle .IncodeAnalyzingTitleText {\n animation-duration: 1ms;\n }\n}\n\n.IncodeIdProcessingLayout .IncodeAnalyzingLottie {\n width: 100%;\n max-width: none;\n}\n\n@keyframes IncodeAnalyzingTitleFade {\n from {\n opacity: 0;\n transform: translateY(var(--id-capture-analyzing-title-fade-offset));\n }\n\n to {\n opacity: 1;\n transform: none;\n }\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingResultContent, .IncodeIdProcessingLayout .IncodeIdProcessingResultStatus {\n flex-direction: column;\n align-items: center;\n width: 100%;\n display: flex;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingResultTitle {\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h2-size);\n font-weight: var(--typography-headline-h2-weight);\n line-height: var(--typography-headline-h2-line-height);\n letter-spacing: var(--typography-headline-h2-letter-spacing);\n color: var(--color-text-body-primary, var(--text-body-800-primary));\n text-align: center;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingResultSubtitle {\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h5-size);\n font-weight: var(--typography-headline-h5-weight);\n line-height: var(--typography-headline-h5-line-height);\n letter-spacing: var(--typography-headline-h5-letter-spacing);\n color: var(--color-text-body-secondary, var(--text-body-500-secondary));\n text-align: center;\n max-width: var(--incode-form-max-w);\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingResultButtonContainer {\n margin-top: var(--spacing-24, var(--spacing-24, 24px));\n gap: var(--spacing-16, var(--spacing-16, 16px));\n flex-direction: column;\n width: 100%;\n display: flex;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingResultAttempts {\n padding-block: var(--spacing-12, var(--spacing-12, 12px));\n text-align: center;\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h4-size);\n font-weight: var(--typography-headline-h4-weight);\n line-height: var(--typography-headline-h4-line-height);\n letter-spacing: var(--typography-headline-h4-letter-spacing);\n color: var(--color-text-body-secondary, var(--text-body-500-secondary));\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingResultContentExiting, .IncodeIdProcessingLayout .IncodeIdProcessingResultButtonContainerExiting {\n animation: .3s ease-out forwards incodeIdProcessingResultFadeOut;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .IncodeIdProcessingLayout .IncodeIdProcessingResultContentExiting, .IncodeIdProcessingLayout .IncodeIdProcessingResultButtonContainerExiting {\n animation-duration: 1ms;\n }\n}\n\n@keyframes incodeIdProcessingResultFadeOut {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n }\n}\n\n.IncodeIdError {\n inset: var(--spacing-0, var(--spacing-none, 0px));\n z-index: 1000;\n justify-content: center;\n align-items: center;\n gap: var(--spacing-16, var(--spacing-16, 16px));\n flex-direction: column;\n width: 100%;\n height: 100%;\n display: flex;\n position: fixed;\n}\n\n.IncodeIdError .IncodeIdErrorMessage {\n text-align: center;\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h4-size);\n font-weight: var(--typography-headline-h4-weight);\n line-height: var(--typography-headline-h4-line-height);\n letter-spacing: var(--typography-headline-h4-letter-spacing);\n color: var(--color-text-body-0, var(--text-body-0-static));\n max-width: var(--incode-form-max-w);\n margin-bottom: var(--spacing-16, var(--spacing-16, 16px));\n}\n\n.IncodeIdNoAttemptsContent {\n padding-inline: var(--spacing-20, var(--spacing-20, 20px));\n max-height: var(--id-no-attempts-content-max-h);\n max-width: var(--id-no-attempts-content-max-w);\n flex-direction: column;\n flex: 1;\n justify-content: center;\n align-items: center;\n margin: auto;\n display: flex;\n}\n\n.IncodeIdNoAttemptsContent .IncodeIdNoAttemptsIcon {\n margin-bottom: var(--spacing-16, var(--spacing-16, 16px));\n}\n\n.IncodeIdNoAttemptsContent .IncodeIdNoAttemptsTitle {\n text-align: center;\n color: var(--color-text-body-primary, var(--text-body-800-primary));\n}\n\n.IncodeIdNoAttemptsContent .IncodeIdNoAttemptsSubtitle {\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h5-size);\n font-weight: var(--typography-headline-h5-weight);\n line-height: var(--typography-headline-h5-line-height);\n letter-spacing: var(--typography-headline-h5-letter-spacing);\n color: var(--color-text-body-secondary, var(--text-body-500-secondary));\n text-align: center;\n max-width: var(--incode-form-max-w);\n}\n\n.IncodeIdNoAttemptsContent .IncodeIdNoAttemptsButtonContainer {\n bottom: var(--spacing-32, var(--spacing-32, 32px));\n right: var(--spacing-0, var(--spacing-none, 0px));\n left: var(--spacing-0, var(--spacing-none, 0px));\n padding-inline: var(--spacing-24, var(--spacing-24, 24px));\n justify-content: center;\n display: flex;\n position: absolute;\n}\n\n.IncodeUnacceptedIdDocuments {\n margin-top: var(--spacing-32, var(--spacing-32, 32px));\n flex-direction: column;\n align-items: center;\n width: 100%;\n display: flex;\n}\n\n.IncodeUnacceptedIdDocuments .IncodeUnacceptedIdDocumentsCountry {\n margin-bottom: var(--spacing-32, var(--spacing-32, 32px));\n align-items: center;\n gap: var(--spacing-8, var(--spacing-8, 8px));\n flex-direction: column;\n display: flex;\n}\n\n.IncodeUnacceptedIdDocuments .IncodeUnacceptedIdDocumentsCountryHeading {\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h4-size);\n font-weight: var(--typography-headline-h4-weight);\n line-height: var(--typography-headline-h4-line-height);\n letter-spacing: var(--typography-headline-h4-letter-spacing);\n}\n\n.IncodeUnacceptedIdDocuments .IncodeUnacceptedIdDocumentsCountryLabel {\n align-items: center;\n gap: var(--spacing-8, var(--spacing-8, 8px));\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h3-size);\n font-weight: var(--typography-headline-h3-weight);\n line-height: var(--typography-headline-h3-line-height);\n letter-spacing: var(--typography-headline-h3-letter-spacing);\n color: var(--color-text-body-primary, var(--text-body-800-primary));\n display: inline-flex;\n}\n\n.IncodeIdCaptureNotification {\n right: var(--spacing-24, var(--spacing-24, 24px));\n left: var(--spacing-24, var(--spacing-24, 24px));\n z-index: 100;\n max-width: var(--incode-form-max-w);\n padding-bottom: var(--spacing-32, var(--spacing-32, 32px));\n top: var(--incode-overlay-top-inset, var(--spacing-24));\n align-items: flex-end;\n margin: auto;\n display: flex;\n position: absolute;\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent {\n z-index: 100;\n border-radius: var(--radius-large, var(--border-radius-large));\n border-style: var(--tw-border-style);\n border-width: 2px;\n border-color: var(--color-border-neutral-300, var(--border-neutral-300));\n background-color: var(--color-surface-neutral-900-80, var(--surface-neutral-900-80));\n width: 100%;\n padding-inline: var(--spacing-20, var(--spacing-20, 20px));\n box-shadow: var(--id-capture-notification-content-shadow);\n display: flex;\n overflow: hidden;\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent.IncodeIdCaptureNotificationContent--minimal {\n justify-content: center;\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationText {\n justify-content: center;\n gap: var(--spacing-8, var(--spacing-8, 8px));\n padding-top: var(--spacing-16, var(--spacing-16, 16px));\n padding-bottom: var(--spacing-12, var(--spacing-12, 12px));\n text-align: center;\n color: var(--color-text-body-0-static, var(--text-body-0-static));\n flex-direction: column;\n display: flex;\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationText .IncodeIdCaptureNotificationTitle {\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h3-size);\n font-weight: var(--typography-headline-h3-weight);\n line-height: var(--typography-headline-h3-line-height);\n letter-spacing: var(--typography-headline-h3-letter-spacing);\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationText .IncodeIdCaptureNotificationDescription {\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h5-size);\n font-weight: var(--typography-headline-h5-weight);\n line-height: var(--typography-headline-h5-line-height);\n letter-spacing: var(--typography-headline-h5-letter-spacing);\n color: var(--color-text-body-tertiary-static, var(--text-body-300-tertiary-static));\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent.IncodeIdCaptureNotificationContent--minimal .IncodeIdCaptureNotificationText {\n gap: var(--spacing-4, var(--spacing-4, 4px));\n padding-block: var(--spacing-16, var(--spacing-16, 16px));\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent.IncodeIdCaptureNotificationContent--minimal .IncodeIdCaptureNotificationText .IncodeIdCaptureNotificationTitle {\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h5-size);\n font-weight: var(--typography-headline-h5-weight);\n line-height: var(--typography-headline-h5-line-height);\n letter-spacing: var(--typography-headline-h5-letter-spacing);\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent.IncodeIdCaptureNotificationContent--minimal .IncodeIdCaptureNotificationText .IncodeIdCaptureNotificationDescription {\n font-family: var(--typography-body-family);\n font-size: var(--typography-body-m-regular-size);\n font-weight: var(--typography-body-m-regular-weight);\n line-height: var(--typography-body-m-regular-line-height);\n letter-spacing: var(--typography-body-m-regular-letter-spacing);\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationAnimation {\n height: var(--id-capture-notification-animation-height);\n justify-content: center;\n align-items: center;\n width: auto;\n display: flex;\n}\n\n.IncodeDigitalIdUploadPage {\n height: 100%;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadBody {\n justify-content: center;\n align-items: center;\n row-gap: var(--spacing-16, var(--spacing-16, 16px));\n width: 100%;\n height: 100%;\n max-width: var(--digital-id-content-max-w);\n flex-direction: column;\n margin-inline: auto;\n display: flex;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadPreviewBody {\n row-gap: var(--spacing-16, var(--spacing-16, 16px));\n grid-template-columns: 1fr;\n grid-template-rows: var(--spacing-24) var(--digital-id-preview-h) var(--spacing-24);\n width: 100%;\n height: 100%;\n max-width: var(--digital-id-content-max-w);\n align-content: center;\n justify-items: center;\n margin-inline: auto;\n display: grid;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadPreStatusZone {\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n display: flex;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadPostCaptionZone {\n justify-content: center;\n align-items: flex-start;\n width: 100%;\n height: 100%;\n display: flex;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadFooter {\n width: 100%;\n margin-inline: auto;\n margin-top: var(--spacing-24, var(--spacing-24, 24px));\n margin-bottom: var(--spacing-8, var(--spacing-8, 8px));\n justify-content: flex-end;\n row-gap: var(--spacing-16, var(--spacing-16, 16px));\n max-width: var(--digital-id-content-max-w);\n min-height: var(--digital-id-footer-min-h);\n flex-direction: column;\n display: flex;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadHiddenInput {\n display: none;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadTutorialIllustration {\n width: 100%;\n max-height: var(--digital-id-tutorial-illustration-max-h);\n flex: 1;\n justify-content: center;\n align-items: center;\n display: flex;\n overflow: hidden;\n}\n\n.IncodeDigitalIdUploadPage .IncodeUploadIdScreenImage {\n height: var(--digital-id-illustration-max-h);\n aspect-ratio: 191 / 266;\n width: auto;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadPreviewCard {\n border-radius: var(--radius-medium, var(--border-radius-medium));\n border-style: var(--tw-border-style);\n --tw-border-style: solid;\n border-style: solid;\n border-width: 1px;\n border-color: var(--color-border-neutral-100, var(--border-neutral-100));\n background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));\n width: var(--digital-id-preview-w);\n height: var(--digital-id-preview-h);\n justify-content: center;\n align-items: center;\n display: flex;\n overflow: hidden;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadDocumentPreview {\n width: var(--digital-id-preview-w);\n height: var(--digital-id-preview-h);\n justify-content: center;\n align-items: center;\n display: flex;\n position: relative;\n overflow: visible;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadDocumentPreviewPdf {\n border-radius: var(--radius-medium, var(--border-radius-medium));\n border-style: var(--tw-border-style);\n border-width: var(--border-width-bold, var(--primitive-border-width-2));\n --tw-border-style: solid;\n border-style: solid;\n border-color: var(--color-border-status-positive, var(--border-status-positive-static));\n object-fit: contain;\n width: 100%;\n height: 100%;\n overflow: hidden;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadPreviewPdf {\n object-fit: contain;\n width: 100%;\n height: 100%;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadFileName {\n text-align: center;\n font-family: var(--typography-body-family);\n font-size: var(--typography-body-m-regular-size);\n font-weight: var(--typography-body-m-regular-weight);\n line-height: var(--typography-body-m-regular-line-height);\n letter-spacing: var(--typography-body-m-regular-letter-spacing);\n color: var(--color-text-body-primary, var(--text-body-800-primary));\n max-width: var(--digital-id-file-name-max-w);\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadProgressBar .IncodeProgressBar {\n border-radius: var(--radius-full, var(--border-radius-full));\n background-color: var(--color-surface-neutral-200, var(--surface-neutral-200));\n width: var(--digital-id-progress-bar-w);\n height: var(--digital-id-progress-bar-h);\n overflow: hidden;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadProgressBar .IncodeProgressBarFill {\n border-radius: var(--radius-full, var(--border-radius-full));\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadLaserOverlay {\n pointer-events: none;\n width: var(--digital-id-preview-w);\n height: var(--digital-id-laser-h);\n transform: translateX(-50%) scale(var(--digital-id-laser-scale));\n position: absolute;\n top: -2px;\n left: 50%;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .IncodeDigitalIdUploadPage .IncodeDigitalIdUploadLaserOverlay {\n display: none;\n }\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadSuccessIcon {\n color: var(--color-icon-status-positive, var(--icon-status-positive));\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadErrorIcon {\n margin-bottom: var(--spacing-8, var(--spacing-8, 8px));\n color: var(--color-icon-status-negative, var(--icon-status-negative));\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadErrorPreview {\n margin-top: var(--spacing-8, var(--spacing-8, 8px));\n border-radius: var(--radius-medium, var(--border-radius-medium));\n border-style: var(--tw-border-style);\n --tw-border-style: solid;\n border-style: solid;\n border-width: 1px;\n border-color: var(--color-border-status-negative, var(--border-status-negative));\n padding: var(--spacing-4);\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadAttempts {\n margin-top: var(--spacing-8, var(--spacing-8, 8px));\n font-family: var(--typography-body-family);\n font-size: var(--typography-body-s-regular-size);\n font-weight: var(--typography-body-s-regular-weight);\n line-height: var(--typography-body-s-regular-line-height);\n letter-spacing: var(--typography-body-s-regular-letter-spacing);\n color: var(--color-text-body-secondary, var(--text-body-500-secondary));\n}\n\n@property --tw-translate-x {\n syntax: \"\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-translate-y {\n syntax: \"\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-translate-z {\n syntax: \"\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-border-style {\n syntax: \"\";\n inherits: false;\n initial-value: solid;\n}\n";

package/dist/workflow/styles.css CHANGED Viewed

@@ -2324,7 +2324,7 @@
 .IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame .IncodeIdProcessingImage {
   background-color: var(--color-surface-neutral-900, var(--surface-neutral-900));
-  object-fit: fill;
+  object-fit: cover;
   width: 100%;
   max-width: 100%;
   height: 100%;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@incodetech/web",
-  "version": "0.0.0-dev-20260922-46015ab9",
+  "version": "0.0.0-dev-20260922-5cf5589c",
   "license": "ISC",
   "repository": {
     "type": "git",
@@ -287,7 +287,7 @@
   ],
   "dependencies": {
     "preact": "^10.27.2",
-    "@incodetech/core": "0.0.0-dev-20260922-46015ab9"
+    "@incodetech/core": "0.0.0-dev-20260922-5cf5589c"
   },
   "devDependencies": {
     "@fontsource/dm-sans": "^5.2.8",