.identity-open{display:flex;align-items:center;gap:8px;margin-left:auto;background:white;border:1px solid #cbd5df;border-radius:24px;padding:5px 12px;color:#011529;cursor:pointer;font:inherit}.identity-open img{width:32px;height:32px;border-radius:50%}.identity-dialog{width:min(650px,calc(100vw - 32px));max-height:90dvh;border:0;border-radius:18px;padding:24px;color:#011529;font-family:inherit}.identity-dialog::backdrop{background:#011529aa}.identity-dialog h2{margin-top:0}.identity-dialog label{display:block;margin-bottom:8px}.identity-dialog input{width:100%;box-sizing:border-box;padding:12px;border:1px solid #9baaba;border-radius:8px;font:inherit}.identity-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:16px 0;max-height:42dvh;overflow-y:auto}.identity-choice{background:white;border:2px solid transparent;border-radius:12px;padding:4px;cursor:pointer;color:inherit}.identity-choice img{width:100%;display:block}.identity-choice span{font-size:11px}.identity-choice.selected{border-color:#0072ce;background:#eaf4ff}.identity-choice:disabled{filter:grayscale(1);opacity:.35;cursor:not-allowed}.identity-error{color:#b42318;min-height:24px}.identity-hint{font-size:13px;color:#526374}@media(max-width:480px){.identity-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.identity-dialog{padding:18px}.identity-open{font-size:12px}}

.identity-choice:focus-visible{outline:3px solid #e6ab28;outline-offset:2px}.identity-choice img{aspect-ratio:1;object-fit:contain}.identity-choice{min-width:0}.identity-dialog h3{margin-bottom:8px}

.identity-dialog{box-sizing:border-box}.identity-grid{max-height:min(42dvh,calc(90dvh - 360px))}.identity-dialog h2{margin-bottom:12px}.identity-dialog p{margin:12px 0}.identity-dialog h3{margin-top:16px}

.identity-art{display:block;aspect-ratio:1;background-image:var(--avatar-sheet,none);background-size:1000% 500%;background-repeat:no-repeat;width:100%;border-radius:50%}.identity-open .identity-art{width:32px;height:32px;flex-shrink:0}
.identity-art[data-avatar="avatar-17"]{background-position:0.0% 0.0%}
.identity-art[data-avatar="avatar-23"]{background-position:11.11111111111111% 0.0%}
.identity-art[data-avatar="robot-02"]{background-position:22.22222222222222% 0.0%}
.identity-art[data-avatar="avatar-10"]{background-position:33.33333333333333% 0.0%}
.identity-art[data-avatar="avatar-05"]{background-position:44.44444444444444% 0.0%}
.identity-art[data-avatar="avatar-07"]{background-position:55.55555555555556% 0.0%}
.identity-art[data-avatar="generated-05"]{background-position:66.66666666666666% 0.0%}
.identity-art[data-avatar="avatar-21"]{background-position:77.77777777777779% 0.0%}
.identity-art[data-avatar="generated-08"]{background-position:88.88888888888889% 0.0%}
.identity-art[data-avatar="robot-12"]{background-position:100.0% 0.0%}
.identity-art[data-avatar="avatar-19"]{background-position:0.0% 25.0%}
.identity-art[data-avatar="robot-04"]{background-position:11.11111111111111% 25.0%}
.identity-art[data-avatar="avatar-16"]{background-position:22.22222222222222% 25.0%}
.identity-art[data-avatar="avatar-14"]{background-position:33.33333333333333% 25.0%}
.identity-art[data-avatar="generated-02"]{background-position:44.44444444444444% 25.0%}
.identity-art[data-avatar="avatar-09"]{background-position:55.55555555555556% 25.0%}
.identity-art[data-avatar="avatar-01"]{background-position:66.66666666666666% 25.0%}
.identity-art[data-avatar="avatar-08"]{background-position:77.77777777777779% 25.0%}
.identity-art[data-avatar="robot-07"]{background-position:88.88888888888889% 25.0%}
.identity-art[data-avatar="avatar-24"]{background-position:100.0% 25.0%}
.identity-art[data-avatar="avatar-25"]{background-position:0.0% 50.0%}
.identity-art[data-avatar="avatar-11"]{background-position:11.11111111111111% 50.0%}
.identity-art[data-avatar="avatar-22"]{background-position:22.22222222222222% 50.0%}
.identity-art[data-avatar="avatar-13"]{background-position:33.33333333333333% 50.0%}
.identity-art[data-avatar="robot-09"]{background-position:44.44444444444444% 50.0%}
.identity-art[data-avatar="avatar-12"]{background-position:55.55555555555556% 50.0%}
.identity-art[data-avatar="robot-11"]{background-position:66.66666666666666% 50.0%}
.identity-art[data-avatar="generated-04"]{background-position:77.77777777777779% 50.0%}
.identity-art[data-avatar="avatar-06"]{background-position:88.88888888888889% 50.0%}
.identity-art[data-avatar="generated-01"]{background-position:100.0% 50.0%}
.identity-art[data-avatar="robot-08"]{background-position:0.0% 75.0%}
.identity-art[data-avatar="robot-05"]{background-position:11.11111111111111% 75.0%}
.identity-art[data-avatar="avatar-03"]{background-position:22.22222222222222% 75.0%}
.identity-art[data-avatar="robot-13"]{background-position:33.33333333333333% 75.0%}
.identity-art[data-avatar="robot-01"]{background-position:44.44444444444444% 75.0%}
.identity-art[data-avatar="generated-09"]{background-position:55.55555555555556% 75.0%}
.identity-art[data-avatar="avatar-18"]{background-position:66.66666666666666% 75.0%}
.identity-art[data-avatar="robot-10"]{background-position:77.77777777777779% 75.0%}
.identity-art[data-avatar="avatar-04"]{background-position:88.88888888888889% 75.0%}
.identity-art[data-avatar="avatar-02"]{background-position:100.0% 75.0%}
.identity-art[data-avatar="avatar-27"]{background-position:0.0% 100.0%}
.identity-art[data-avatar="robot-06"]{background-position:11.11111111111111% 100.0%}
.identity-art[data-avatar="generated-07"]{background-position:22.22222222222222% 100.0%}
.identity-art[data-avatar="avatar-20"]{background-position:33.33333333333333% 100.0%}
.identity-art[data-avatar="generated-03"]{background-position:44.44444444444444% 100.0%}
.identity-art[data-avatar="avatar-15"]{background-position:55.55555555555556% 100.0%}
.identity-art[data-avatar="generated-06"]{background-position:66.66666666666666% 100.0%}
.identity-art[data-avatar="robot-14"]{background-position:77.77777777777779% 100.0%}
.identity-art[data-avatar="avatar-26"]{background-position:88.88888888888889% 100.0%}
.identity-art[data-avatar="robot-03"]{background-position:100.0% 100.0%}
.signin-dialog{width:min(600px,calc(100vw - 32px))}.signin-dialog h2{font-size:24px;line-height:1.25;text-wrap:balance}.signin-intro{text-align:center}.signin-intro>p{color:#526374;line-height:1.5}.signin-intro .button{width:100%;min-height:48px}.rotate-guide{width:160px;margin:24px auto 12px}.rotate-guide svg{display:block;width:100%;height:120px;fill:none;stroke:#0072ce;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.rotate-phone{transform-origin:80px 60px;animation:phone-landscape 3s cubic-bezier(.16,1,.3,1) infinite}.rotate-arrow{stroke:#526374;stroke-width:2}.signin-dialog.signing{width:min(960px,calc(100vw - 24px))}.signin-dialog .signin-signer{font-weight:600;margin:8px 0 16px}.signature-surface{position:relative;height:clamp(180px,34dvh,280px);background:#fff;border:1px solid #9baaba;border-radius:8px;overflow:hidden}.signature-surface canvas{display:block;width:100%;height:100%;touch-action:none;user-select:none;position:relative;z-index:1;cursor:crosshair}.signature-placeholder{position:absolute;left:24px;top:40%;color:#526374;pointer-events:none}.signature-line{position:absolute;left:24px;right:24px;bottom:24px;border-bottom:1px solid #9baaba;pointer-events:none}.signature-help{font-size:13px;color:#526374}.signin-actions{display:flex;gap:10px;flex-wrap:wrap}.signin-actions [type=submit]{margin-left:auto}.signin-dialog .button{min-height:44px}.signin-dialog .button:disabled{opacity:.5;cursor:not-allowed}.signin-dialog :focus-visible{outline:3px solid #0072ce;outline-offset:3px}.signin-dialog [hidden]{display:none!important}@keyframes phone-landscape{0%,15%{transform:rotate(0)}45%,85%{transform:rotate(-90deg)}100%{transform:rotate(0)}}@media(orientation:landscape) and (max-height:500px){.signin-dialog.signing{padding:16px;max-height:96dvh}.signin-dialog.signing h2{font-size:20px;margin:0}.signin-dialog .signin-signer{margin:4px 0 8px}.signature-surface{height:clamp(110px,38dvh,190px)}.signin-dialog .signature-help{margin:6px 0}.signin-dialog .identity-error{margin:4px 0;min-height:18px;font-size:13px}.signin-dialog .button{min-height:40px}}@media(max-width:480px){.signin-actions [type=submit]{width:100%;margin:0}.signin-dialog h2{font-size:22px}}@media(prefers-reduced-motion:reduce){.rotate-phone{animation:none;transform:rotate(-90deg)}}
.signin-dialog .button.primary,.signin-sheet-page .button.primary{background:#2f8146;border-color:#2f8146;color:#fff}.signin-dialog .button.primary:hover,.signin-sheet-page .button.primary:hover{background:#286d3b;border-color:#286d3b}

/* Signature capture fills the viewport; its two controls stay above the drawing. */
.signin-dialog.signing{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;overflow:hidden;background:#fff}
.signin-dialog.signing .signin-pad{position:relative;width:100%;height:100%;margin:0}
.signin-dialog.signing .signature-surface{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:0}
.signin-dialog.signing .signin-pad>h2,.signin-dialog.signing .signin-signer{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.signin-dialog.signing .signature-placeholder{left:max(32px,env(safe-area-inset-left));top:45%;font-size:20px}
.signin-dialog.signing .signature-line{left:max(32px,env(safe-area-inset-left));right:max(32px,env(safe-area-inset-right));bottom:100px}
.signin-dialog.signing .signin-actions{position:absolute;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:2;display:flex;flex-wrap:nowrap;gap:10px;margin:0;background:#fff;padding:4px;border-radius:8px}
.signin-dialog.signing .signin-actions .button{width:auto;min-width:84px;min-height:48px;margin:0}
.signin-dialog.signing .identity-error{position:absolute;left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));bottom:82px;z-index:2;margin:0;min-height:0;max-height:30dvh;overflow:auto;background:#fff;line-height:1.4}
.signin-dialog.signing .identity-error:empty{display:none}
.signin-complete{text-align:center}.signin-complete>p{color:#526374;line-height:1.5}.signin-complete .button{width:100%;min-height:48px}.signin-complete .rotate-phone{animation-name:phone-portrait}@keyframes phone-portrait{0%,15%{transform:rotate(-90deg)}45%,85%{transform:rotate(0)}100%{transform:rotate(-90deg)}}@media(prefers-reduced-motion:reduce){.signin-complete .rotate-phone{animation:none;transform:rotate(0)}}
.signin-dialog.await-portrait{max-height:calc(100dvh - 24px);padding:16px}.signin-dialog.await-portrait .rotate-guide{width:110px;margin:12px auto}.signin-dialog.await-portrait .rotate-guide svg{height:82px}.signin-dialog.await-portrait h2{font-size:22px;margin-bottom:12px}

/* Keep onboarding focused, without a loading message beneath the dialog. */
body:has(.identity-dialog[open],.demo-onboarding[open]) .guest-loading{visibility:hidden}

.identity-dialog .identity-match{color:#011529;font-weight:600;line-height:1.5}.identity-dialog [hidden]{display:none!important}

.identity-confirm .identity-match{font-size:22px;font-weight:600;margin:20px 0 12px}.identity-confirm .actions{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0}.identity-dialog [hidden]{display:none!important}

/* Full-page entry, confirmation, avatar selection and signature steps. */
body:has(>.onboarding-screen[open]){overflow:hidden}
body:has(>.onboarding-screen[open])>:not(.onboarding-screen){display:none!important}
.identity-dialog.onboarding-screen{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));border:0;border-radius:0;box-shadow:none;background:#f6f8fb;overflow:auto;display:flex;flex-direction:column;gap:28px;z-index:100}
.onboarding-brand{display:flex;align-items:center;gap:10px;width:100%;max-width:1120px;margin:0 auto;color:#011529;font-size:25px;flex:none}.onboarding-brand img{width:40px;height:40px}.onboarding-brand strong{font-weight:400}
.onboarding-screen>form{width:100%;max-width:600px;margin:auto;text-align:center;padding:20px 0}
.onboarding-screen h2{font-size:clamp(28px,4vw,42px);line-height:1.15;letter-spacing:-.7px;margin-bottom:20px;text-wrap:balance}
.onboarding-screen .identity-intro,.onboarding-screen>form>p:first-of-type{color:#526374;font-size:16px;line-height:1.6;margin-bottom:30px}
.onboarding-screen .identity-entry,.onboarding-screen .demo-entry{max-width:440px;margin:0 auto}
.onboarding-screen label{font-weight:600;font-size:15px;text-align:left}
.onboarding-screen input.teller-number-input{height:108px;padding:16px 20px;border:2px solid #9eafc1;border-radius:12px;background:#fff;font-size:clamp(44px,8vw,64px);font-weight:800;line-height:1.1;text-align:center;letter-spacing:.1em;font-variant-numeric:tabular-nums;color:#011529}
.onboarding-screen input.teller-number-input:focus{border-color:#0072ce;outline:3px solid #0072ce20;outline-offset:3px}
.onboarding-screen .onboarding-actions>[type=submit]{display:flex;width:100%;max-width:440px;min-height:64px;margin:12px auto 0;border-radius:10px;font-size:22px;font-weight:700;background:#2f8146;border:1px solid #2f8146;color:#fff}
.onboarding-screen .identity-confirm .identity-match{font-size:clamp(26px,5vw,38px)}.onboarding-screen .identity-confirm .actions{justify-content:center}.onboarding-screen .identity-confirm .button{min-height:58px;padding:14px 24px;font-size:18px;border-radius:10px}
.onboarding-screen .identity-grid{max-height:none;overflow:visible;margin:24px 0;grid-template-columns:repeat(5,minmax(0,1fr))}
.onboarding-screen .identity-choice{border-radius:16px}.onboarding-screen .identity-hint{line-height:1.5}
.onboarding-screen.signin-dialog:not(.signing)>.signin-intro,.onboarding-screen.signin-dialog:not(.signing)>.signin-complete{width:100%;max-width:600px;margin:auto}
.onboarding-screen.signin-dialog.signing{padding:0;gap:0;background:#fff}.onboarding-screen.signin-dialog.signing>.onboarding-brand{display:none}.onboarding-screen.signin-dialog.signing>.signin-pad{max-width:none;padding:0;text-align:left}
@media(max-width:520px){.identity-dialog.onboarding-screen{padding:20px 20px max(20px,env(safe-area-inset-bottom));gap:20px}.onboarding-brand{font-size:22px}.onboarding-brand img{width:34px;height:34px}.onboarding-screen>form{padding:12px 0}.onboarding-screen h2{font-size:30px}.onboarding-screen input.teller-number-input{height:100px;font-size:48px}.onboarding-screen .identity-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.onboarding-screen .onboarding-actions>[type=submit]{min-height:62px}.onboarding-screen.signin-dialog.signing{padding:0}}
@media(max-height:520px){.onboarding-screen>form{margin:0 auto}.onboarding-screen input.teller-number-input{height:86px}.onboarding-screen h2{font-size:28px}.onboarding-screen .identity-intro,.onboarding-screen>form>p:first-of-type{margin-bottom:16px}}

.onboarding-screen[hidden]{display:none!important}

/* Keep avatar actions available while the page of choices scrolls. */
.onboarding-screen:has(.identity-avatar-section:not([hidden]),.demo-avatar-section:not([hidden])){scroll-padding-bottom:160px}
.onboarding-screen:has(.identity-avatar-section:not([hidden]),.demo-avatar-section:not([hidden]))>form{margin:0 auto;padding-bottom:calc(160px + env(safe-area-inset-bottom))}
.onboarding-screen:has(.identity-avatar-section:not([hidden]),.demo-avatar-section:not([hidden])) .onboarding-actions{position:fixed;left:0;right:0;bottom:0;z-index:2;padding:12px max(20px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));background:#f6f8fb;border-top:1px solid #dce3eb;box-shadow:0 -6px 20px #01152908;text-align:center}
.onboarding-screen .onboarding-actions>.identity-error:empty{display:none}
.onboarding-screen .onboarding-actions>.identity-error{margin:0 auto 8px;max-width:600px;min-height:0;line-height:1.4}
.onboarding-screen .onboarding-actions>[type=submit]{margin-top:0}
.onboarding-screen:has(.onboarding-actions #identity-cancel,.onboarding-actions #demo-cancel)>form{padding-bottom:calc(210px + env(safe-area-inset-bottom))}
.onboarding-screen .onboarding-actions>#identity-cancel,.onboarding-screen .onboarding-actions>#demo-cancel{margin-top:10px}
