:root{--app-top-offset: 1.5rem}*,*:before,*:after{box-sizing:border-box}html{box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin:0;padding:15px;line-height:1.6;background:#fffefe;background:linear-gradient(180deg,#fffefe,#f5f5f7);color:#333;display:flex;flex-direction:column;align-items:center;min-height:100vh}.site-header{width:100%;padding-left:15px;margin-bottom:15px;box-sizing:border-box;height:40px}h1{margin-top:0;margin-bottom:20px;color:#2c3e50;text-align:center}.intro-container,.finish-container{background-color:#fff;padding:30px 15px;border-radius:12px;box-shadow:0 4px 20px #0000001a;width:100%;max-width:480px;text-align:center;margin-top:calc(20px + var(--app-top-offset))}.intro-container h2,.finish-container h2{margin-top:0;color:#2c3e50;font-size:1.5em}.steps-list{list-style:none;padding:0;margin:30px auto;display:flex;flex-direction:column;align-items:center;gap:25px}.step-item{display:flex;align-items:center;gap:20px;max-width:350px;text-align:left}.step-item .icon{flex-shrink:0;width:48px;height:48px;background-color:#f5f5f7;border-radius:50%;display:flex;align-items:center;justify-content:center}.step-item .icon svg{width:24px;height:24px;stroke:#8e8e93;stroke-width:2}.step-item p{margin:0;color:#555;font-size:.9em;line-height:1.5}.get-started-btn{display:block;width:100%;margin:0 auto;padding:11px 40px;font-size:1.1em;font-weight:700;cursor:pointer;border:none;background-color:#1d1d1f;color:#fff;border-radius:8px;transition:background-color .3s ease;position:relative;border:2px solid rgba(0,0,0,0)}.get-started-btn:hover:not(:disabled){border:2px solid #ffbf1c;color:#ffbf1c}.get-started-btn:disabled{background-color:#bdc3c7;cursor:not-allowed}.get-started-btn.is-loading{color:transparent!important;cursor:not-allowed;background-color:#bdc3c7;background-image:linear-gradient(to right,#1d1d1f,#1d1d1f);background-repeat:no-repeat;background-size:var(--progress, 0%) 100%;transition:background-size .1s ease-out}.get-started-btn.is-loading:after{content:"";display:block;width:1.5em;height:1.5em;border:3px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:button-spin .8s linear infinite;position:absolute;left:50%;top:50%;margin-left:-.75em;margin-top:-.75em}@keyframes button-spin{to{transform:rotate(360deg)}}.desktop-intro-message{margin-top:30px;padding-top:25px;border-top:1px solid #e0e0e0;text-align:center}.desktop-intro-message p{margin:0 0 15px;font-weight:500;color:#2c3e50;font-size:1.1em}#qrCodeContainer{display:inline-block;border-radius:8px;background:#fff;padding:8px;box-shadow:0 2px 8px #0000001a;line-height:0}.unsupported-message p:first-child{color:#c0392b}.unsupported-reason{margin:0;font-size:.85em;font-weight:400;color:#7f8c8d;word-break:break-word}.unsupported-reason:empty{display:none}.finish-icon{width:80px;height:80px;border-radius:50%;margin:0 auto 20px;display:flex;align-items:center;justify-content:center}.finish-icon svg{width:40px;height:40px;stroke-width:3;display:none}#finishMessage{font-size:1.1em;color:#333;margin-bottom:5px}#finishInstruction{font-size:1em;color:#555;margin-top:0;margin-bottom:25px}#finishActions{margin-top:20px}.finish-container.status-success .finish-icon{background-color:#e4f8f0}.finish-container.status-success .finish-icon svg{stroke:#27ae60}.finish-container.status-success #successIcon{display:block}.finish-container.status-review .finish-icon{background-color:#fff8e1}.finish-container.status-review .finish-icon svg{stroke:#f39c12}.finish-container.status-review #reviewIcon{display:block}.finish-container.status-error .finish-icon{background-color:#f8e4e4}.finish-container.status-error .finish-icon svg{stroke:#e74c3c}.finish-container.status-error #errorIcon{display:block}.powered-by-veridil{margin:15px auto 20px;text-align:center;color:#8e8e93;font-size:.8em}#cameraHost{display:grid;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr);container-type:size;container-name:camera;position:relative;width:100%;max-width:640px;max-height:95%;margin-top:var(--app-top-offset);margin-bottom:0;background-color:#000;border-radius:8px;overflow:hidden;box-shadow:0 4px 12px #00000026;--camera-header-h: clamp(9rem, 28dvh, 12rem)}#cameraHost>canvas,#cameraHost>.camera-preview,#cameraHost>.camera-ui{grid-area:1 / 1;min-width:0;min-height:0}#cameraHost>canvas,#cameraHost>.camera-preview{display:none;position:relative;width:100%;height:100%;border-radius:8px;overflow:hidden}#cameraHost>canvas{object-fit:cover}#cameraHost>.camera-ui{--camera-header-h: clamp(9rem, 28dvh, 12rem);display:grid;grid-template-rows:calc(env(safe-area-inset-top) + var(--camera-header-h)) minmax(0,1fr) auto;height:100%;pointer-events:none;z-index:5}.camera-ui__header{padding:env(safe-area-inset-top) .25rem 0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.5rem;padding-bottom:.5rem;z-index:19}.camera-ui__status-icon-container{height:40px;display:flex;align-items:center;justify-content:center}@keyframes fadeInDownWithWiggle{0%{opacity:0;transform:translateY(-15px)}50%{opacity:1;transform:translateY(0)}65%{transform:translateY(0) rotate(3deg)}80%{transform:translateY(0) rotate(-3deg)}to{opacity:1;transform:translateY(0)}}#cameraHost .message-overlay-base-style{width:min(72%,360px);overflow:visible;display:none;flex:0 1 auto;flex-direction:column;align-items:center;gap:.22em;padding:0 .25rem;font-size:1.1em;font-weight:500;text-align:center;text-shadow:none;margin-top:.5rem}#cameraHost .message-overlay-base-style .message-overlay-title{width:100%;white-space:pre-line;line-height:1.2;font-size:1rem;font-weight:600}#cameraHost .message-overlay-base-style .message-overlay-title.text-wiggle{will-change:transform,opacity;animation:fadeInDownWithWiggle .7s ease-in-out forwards}#cameraHost .message-overlay-base-style .message-overlay-message{width:100%;white-space:pre-line;line-height:1.2;font-size:.86rem;font-weight:500}#cameraHost .message-overlay-base-style .message-overlay-message.text-wiggle{will-change:transform,opacity;animation:fadeInDownWithWiggle .7s ease-in-out forwards}#cameraHost .message-overlay-base-style .message-overlay-guidance{width:100%;margin-top:auto;white-space:pre-line;word-break:break-word;overflow-wrap:anywhere;line-height:1.25;font-size:.8rem;font-weight:450;color:#2c3e50e6}#cameraHost .message-overlay-base-style.ov-showing{display:flex}#cameraHost .message-overlay-base-style.message-type-info,#cameraHost .message-overlay-base-style.message-type-info .message-overlay-title,#cameraHost .message-overlay-base-style.message-type-info .message-overlay-message{color:#2c3e50}#cameraHost .message-overlay-base-style.message-type-warning,#cameraHost .message-overlay-base-style.message-type-warning .message-overlay-title,#cameraHost .message-overlay-base-style.message-type-warning .message-overlay-message,#cameraHost .message-overlay-base-style.message-type-warning .message-overlay-guidance{color:#d35400}.camera-ui__stage{display:grid;place-items:center;position:relative;min-height:0}@keyframes borderPulse{0%{border-color:#1525ff}25%{border-color:#ffbf1c}50%{border-color:#1525ff}75%{border-color:#ffbf1c}to{border-color:#1525ff}}.document-guide-overlay-style,.head-guide-overlay-style{grid-area:1 / 1;align-self:start;justify-self:center;pointer-events:none;z-index:6;display:none;box-shadow:0 0 0 1000px #ffffffe6;margin-top:.5rem;position:relative}.document-guide-overlay-style:after,.head-guide-overlay-style:after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid #1525ff;animation:borderPulse 6s ease-in-out infinite;pointer-events:none}.document-guide-overlay-style{width:76%;aspect-ratio:1.59;border-radius:16px}.head-guide-overlay-style{width:60%;border-radius:50%;aspect-ratio:.75}.document-guide-overlay-style.ov-showing,.head-guide-overlay-style.ov-showing{display:block}.document-guide-overlay-style.guide-good:after,.head-guide-overlay-style.guide-good:after{border-color:#16a34a;border-width:4px;animation:none}#cameraHost .processing-spinner-style{display:block;visibility:hidden;position:absolute;pointer-events:none}#cameraHost .processing-spinner-style.ov-showing{visibility:visible}#cameraHost .processing-spinner-icon{display:block;width:40px;height:40px}#cameraHost .processing-spinner-icon .spinner-ring{fill:#1525ff;transform-origin:50% 50%}#cameraHost .processing-spinner-style.ov-showing:not(.success) .spinner-ring{animation:button-spin .8s linear infinite}#cameraHost .processing-spinner-icon .success-bg{fill:#1525ff;transform-origin:50% 50%;transform:scale(0);opacity:0;will-change:transform,opacity;transition:all .4s cubic-bezier(.175,.885,.32,1.275)}#cameraHost .processing-spinner-icon .check{fill:none;stroke:#fff;stroke-width:80;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:700;stroke-dashoffset:700;transition:stroke-dashoffset .5s ease-out .2s}#cameraHost .processing-spinner-style.success .spinner-ring{animation:none;transform:scale(0) rotate(90deg);opacity:0;transition:transform .3s ease-in,opacity .3s ease-in}#cameraHost .processing-spinner-style.success .success-bg{transform:scale(1);opacity:1}#cameraHost .processing-spinner-style.success .check{stroke-dashoffset:0}@keyframes card-turn-around-flip{0%{transform:perspective(400px) rotateY(0)}50%{transform:perspective(400px) rotateY(180deg)}to{transform:perspective(400px) rotateY(360deg)}}#cameraHost .card-turn-around-style{display:block;visibility:hidden;position:absolute;pointer-events:none}#cameraHost .card-turn-around-style.ov-showing{visibility:visible}#cameraHost .card-turn-around-style .card-turn-around-icon{display:block;width:40px;height:40px;color:#1525ff;transform-style:preserve-3d}#cameraHost .card-turn-around-style.ov-showing .card-turn-around-icon{animation:card-turn-around-flip 2s ease-in-out infinite}@keyframes smile-mouth{0%{transform:scaleY(.1);animation-timing-function:ease-in-out}33.33%{transform:scaleY(1);animation-timing-function:linear}to{transform:scaleY(1)}}#cameraHost .smile-animation-style{display:block;visibility:hidden;position:absolute;pointer-events:none}#cameraHost .smile-animation-style.ov-showing{visibility:visible}#cameraHost .smile-animation-style .smile-animation-icon{display:block;width:44px;height:44px}#cameraHost .smile-animation-style .stroke-main{stroke:#1525ff;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;fill:none}#cameraHost .smile-animation-style .eye{fill:#1525ff}#cameraHost .smile-animation-style .mouth{d:path("M 110 165 Q 150 215 190 165");transform-origin:150px 165px;transform:scaleY(.1)}#cameraHost .smile-animation-style.ov-showing .mouth{animation:smile-mouth 4.5s infinite}.camera-ui__footer{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding-bottom:max(.75rem,env(safe-area-inset-bottom));pointer-events:none}#cameraHost .video-overlay-capture-button{width:clamp(55px,11cqw,75px);height:auto;aspect-ratio:1;z-index:11;cursor:pointer;display:none;transition:transform .2s ease;pointer-events:auto}#cameraHost .video-overlay-capture-button.ov-showing{display:block}#cameraHost .video-overlay-capture-button circle{fill:#1d1d1f;transition:all .2s ease-out}#cameraHost .video-overlay-capture-button .button-ring{stroke:#1d1d1f;fill:none}#cameraHost .video-overlay-capture-button:active{transform:scale(.95)}#cameraHost .camera-powered-by{color:#1d1d1f66;font-size:.8em;text-shadow:0 1px 2px rgba(0,0,0,.5);z-index:10;pointer-events:none;margin:0;padding:0;white-space:nowrap}@container camera (orientation: landscape){#cameraHost,.camera-ui{--camera-header-h: clamp(6.5rem, 22cqh, 9rem)}.message-overlay-base-style{width:min(68%,340px)}.document-guide-overlay-style{width:55%}.head-guide-overlay-style{width:auto;height:70cqh}.video-overlay-capture-button{width:clamp(45px,8cqw,65px)}.processing-spinner-icon,.card-turn-around-icon{width:36px;height:36px}.smile-animation-icon{width:40px;height:40px}}body.camera-active{overflow:hidden;padding:0}body.camera-active .site-header,body.camera-active h1,body.camera-active .powered-by-veridil{display:none}body.camera-active #cameraHost{position:fixed;top:0;left:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin-top:0;border-radius:0;z-index:1000}body.camera-active #cameraHost>.camera-ui{grid-template-rows:calc(env(safe-area-inset-top) + var(--app-top-offset) + var(--camera-header-h)) minmax(0,1fr) auto}body.camera-active #cameraHost>canvas,body.camera-active #cameraHost>.camera-preview{border-radius:0}#designControls{position:fixed;bottom:0;left:0;width:100%;background-color:#2c3e50e6;color:#fff;padding:15px 10px 10px;z-index:2000;box-shadow:0 -2px 10px #0003;display:none;font-size:12px;border-top-left-radius:12px;border-top-right-radius:12px;transition:transform .3s ease-in-out}#designControls.collapsed{transform:translateY(calc(100% - 40px))}#designControlsToggle{position:absolute;top:-30px;left:50%;transform:translate(-50%);width:120px;height:30px;background-color:#2c3e50e6;border-top-left-radius:8px;border-top-right-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center}#designControlsToggle svg{width:24px;height:24px;stroke:#fff;stroke-width:2;transition:transform .3s ease-in-out}#designControls.collapsed #designControlsToggle svg{transform:rotate(180deg)}#designControls fieldset{border:1px solid #7f8c8d;border-radius:4px;margin:5px;padding:8px}#designControls legend{padding:0 5px;font-weight:700}#designControls .controls-grid{display:flex;flex-wrap:wrap;gap:8px}#designControls button{padding:5px 10px;font-size:12px;border:1px solid #95a5a6;background-color:#34495e;color:#fff;border-radius:4px;cursor:pointer}#designControls button:hover{background-color:#4e6d8d}#designControls .design-nav-row{align-items:center}#designControls .design-state-label{flex:1 1 100%;min-width:140px;font-size:11px;opacity:.9;word-break:break-all}#designControls .design-select{width:100%;max-width:320px;padding:6px 8px;font-size:12px;border-radius:4px;border:1px solid #95a5a6;background:#ecf0f1;color:#2c3e50}
