/* The reference's open keypad, scaled within the usable iPhone viewport. */
body[data-pin=locked]>main,body[data-pin=locked]>.sidebar,body[data-pin=locked]>.mobile-tabs{visibility:hidden}
#pin-screen{
 --pin-safe-top:env(safe-area-inset-top,0px);
 --pin-safe-right:env(safe-area-inset-right,0px);
 --pin-safe-bottom:env(safe-area-inset-bottom,0px);
 --pin-safe-left:env(safe-area-inset-left,0px);
 --pin-usable-height:calc(100vh - var(--pin-safe-top) - var(--pin-safe-bottom));
 --pin-stage-height:clamp(75px,calc(42.5vh - 166px),195px);
 --pin-art-gap:clamp(6px,calc(23.8vh - 162px),40px);
 --pin-form-gap:clamp(16px,calc(33.1vh - 192px),94px);
 --pin-forget-gap:clamp(10px,calc(5.9vh - 24px),28px);
 --pin-keypad-gap:clamp(8px,calc(2.6vh - 7px),16px);
 --pin-key-height:clamp(44px,calc(6.5vh + 4.5px),62px);
 --pin-row-gap:0px;
 position:fixed;inset:0;box-sizing:border-box;width:100%;height:100vh;height:100dvh;
 max-width:none;max-height:none;margin:0;border:0;
 padding:max(var(--pin-safe-top),clamp(12px,calc(20.27vh - 102px),75px)) var(--pin-safe-right) var(--pin-safe-bottom) var(--pin-safe-left);
 background:#fff;color:#202124;font-family:var(--font,sans-serif);overflow:auto;
 overscroll-behavior:contain;color-scheme:light;scroll-padding-block:16px;-webkit-overflow-scrolling:touch;
}
@supports(height:100dvh){
 #pin-screen{
  --pin-usable-height:calc(100dvh - var(--pin-safe-top) - var(--pin-safe-bottom));
  --pin-stage-height:clamp(75px,calc(42.5dvh - 166px),195px);
  --pin-art-gap:clamp(6px,calc(23.8dvh - 162px),40px);
  --pin-form-gap:clamp(16px,calc(33.1dvh - 192px),94px);
  --pin-forget-gap:clamp(10px,calc(5.9dvh - 24px),28px);
  --pin-keypad-gap:clamp(8px,calc(2.6dvh - 7px),16px);
  --pin-key-height:clamp(44px,calc(6.5dvh + 4.5px),62px);
  padding-top:max(var(--pin-safe-top),clamp(12px,calc(20.27dvh - 102px),75px));
 }
}
#pin-screen[open]{display:flex;flex-direction:column;align-items:center}
#pin-screen::backdrop{background:#fff}
#pin-screen [hidden]{display:none!important}
#pin-screen button{font-family:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#pin-screen .pin-shell{flex:0 0 auto;display:block;width:min(402px,100%);min-width:0;min-height:0;margin:0 auto;padding:0;border:0;border-radius:0;background:#fff;box-shadow:none;overflow:visible}
#pin-screen .pin-panel{display:block;min-width:0;padding:0;background:transparent}
.pin-topbar{position:relative;min-height:0}
.pin-back{position:absolute;top:4px;left:8px;z-index:1;display:flex;align-items:center;gap:5px;min-height:44px;padding:8px;color:#5a626b;background:transparent;border:0;font-size:13px}
.pin-back .icon{width:16px;height:16px}
#pin-screen .pin-content{position:relative;width:100%;margin:0;text-align:center}
.pin-illustration{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:var(--pin-stage-height);margin:0 auto var(--pin-art-gap)}
.pin-artwork{display:block;width:min(220px,70vw);height:100%;max-width:100%;margin:0;object-fit:contain}
.pin-walk{display:none;position:absolute;top:0;left:50%;width:min(220px,70vw);height:100%;transform:translateX(-50%);overflow:visible;pointer-events:none}
#pin-screen .pin-content h2{margin:0;padding:0 16px;font-size:21px;font-weight:600;line-height:1.25;letter-spacing:-.25px;color:#202124}

#pin-form{margin:var(--pin-form-gap) auto 0}
#pin-description{max-width:350px;margin:0 auto;padding:0 16px;font-size:15px;line-height:1.5;color:#73777d;text-wrap:balance}
.pin-steps{display:flex;align-items:center;justify-content:center;gap:24px;margin:16px 0;padding:0 12px;list-style:none;font-size:11px;color:#6b727c}
.pin-steps li{display:flex;align-items:center;gap:7px}
.pin-steps li>span{display:grid;place-items:center;width:20px;height:20px;border:1px solid #a2a8b0;border-radius:50%;font-size:10px}
.pin-steps [aria-current=step]{color:#17263a}
.pin-steps [aria-current=step]>span,.pin-steps [data-complete=true]>span{color:#fff;background:#17263a;border-color:#17263a}
.pin-entry{position:relative;width:max-content;max-width:calc(100% - 32px);margin:16px auto 0;padding:2px;border-radius:5px}
.pin-value{position:absolute;inset:0;width:100%;height:100%;min-height:24px;margin:0;padding:0;border:0;background:transparent;color:transparent;caret-color:transparent;opacity:0;font-size:16px!important;cursor:text}
.pin-digits{display:flex;justify-content:center;gap:8px;pointer-events:none}
.pin-digits>span{display:block;flex:0 0 24px;width:24px;height:24px;border:1px solid #90969c;border-radius:50%;background:#fff;transition:background 140ms ease,border-color 140ms ease,transform 140ms ease}
.pin-digits [data-filled=true]{background:#17263a;border-color:#17263a;transform:scale(.96)}
.pin-entry:focus-within{outline:2px solid #496780;outline-offset:6px}
.pin-entry[data-invalid=true] .pin-digits>span{border-color:#963f30}
.pin-notice{max-width:350px;margin:12px auto 0;padding:0 16px;font-size:13px;line-height:1.5;color:#963f30;text-wrap:balance;overflow-wrap:anywhere}
.pin-notice:empty{display:none}
.pin-notice[data-tone=info]{color:#5a6571}
.pin-link{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:6px 10px;border:0;border-radius:6px;background:transparent;color:#5c636b;font-size:12px;text-underline-offset:4px}
.pin-link:hover:not(:disabled){color:#17263a;text-decoration:underline}
.pin-forget{margin:var(--pin-forget-gap) auto 0;font-size:16px;font-weight:500;color:#3f454c}
.pin-forget .icon{width:16px;height:16px;stroke-width:1.6;color:var(--navy,#17263a)}
.pin-keypad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:0;row-gap:var(--pin-row-gap);width:100%;margin:var(--pin-keypad-gap) auto 0}
.pin-keypad button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:44px;height:var(--pin-key-height);min-height:44px;margin:0;padding:4px;border:0;border-radius:16px;background:transparent;box-shadow:none;font-size:25px;font-weight:600;line-height:1;color:var(--navy,#17263a);transition:background 120ms ease,transform 100ms ease}
.pin-keypad button small{font-size:13px;font-weight:400;line-height:1.2;color:#5c6066;letter-spacing:.015em}
.pin-keypad button .icon{width:24px;height:24px;stroke-width:1.5}
.pin-keypad button:hover:not(:disabled){background:#f4f5f7}
.pin-keypad button:active:not(:disabled){background:#e8ebee;transform:scale(.95)}
.pin-keypad button:disabled{opacity:1;color:#9aa2ac;cursor:default}
.pin-keypad button:disabled small{color:#9aa2ac}
.pin-submit[aria-busy=true] .icon{opacity:0}
.pin-submit[aria-busy=true]::after{content:'';position:absolute;top:50%;left:50%;width:21px;height:21px;margin:-10.5px 0 0 -10.5px;border:1.5px solid #d0d5dc;border-top-color:#17263a;border-radius:50%;animation:pin-wait .85s linear infinite}
.pin-alternatives{display:flex;justify-content:center;align-items:center;gap:8px;margin:8px auto 0;padding:0 16px}
.pin-footer{flex:0 0 auto;margin:16px auto 0;padding:0 16px;font-size:9px;line-height:1.5;color:#777f89}
.pin-screen button:focus-visible{outline:2px solid #496780;outline-offset:3px}
#pin-title:focus{outline:none}
/* The actual password fallback occupies the reference's lower-left key. */
#pin-screen[data-mode=login] #pin-submit{visibility:hidden}
#pin-screen[data-mode=login] .pin-alternatives{position:relative;width:100%;height:0;margin:0;padding:0}
#pin-screen[data-mode=login] #pin-password{position:absolute;bottom:0;left:0;width:calc(100%/3);height:var(--pin-key-height);min-height:44px;padding:0;color:var(--navy,#17263a);font-size:0;transition:background 120ms ease,transform 100ms ease}
#pin-screen[data-mode=login] #pin-password::before{content:'';display:block;width:24px;height:24px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='4.5'/%3E%3Cpath d='m11.2 11.2 9.3 9.3m-3-3 2-2m-5 0 2-2'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='4.5'/%3E%3Cpath d='m11.2 11.2 9.3 9.3m-3-3 2-2m-5 0 2-2'/%3E%3C/svg%3E") center/contain no-repeat}
#pin-screen[data-mode=login] #pin-password:hover:not(:disabled){background:#f4f5f7}
#pin-screen[data-mode=login] #pin-password:active:not(:disabled){background:#e8ebee;transform:scale(.95)}
#pin-screen[data-mode=choose] .pin-illustration,#pin-screen[data-mode=confirm] .pin-illustration,#pin-screen[data-mode=checking] .pin-illustration,#pin-screen[data-mode=reauth] .pin-illustration{height:min(132px,var(--pin-stage-height))}
#pin-screen[data-mode=choose] .pin-artwork,#pin-screen[data-mode=confirm] .pin-artwork,#pin-screen[data-mode=checking] .pin-artwork,#pin-screen[data-mode=reauth] .pin-artwork{height:min(108px,calc(var(--pin-stage-height) - 12px))}
#pin-screen[data-mode=choose] #pin-form,#pin-screen[data-mode=confirm] #pin-form{margin-top:20px}
#pin-screen[data-mode=checking] #pin-form,#pin-screen[data-mode=reauth] #pin-form{margin-top:28px}
#pin-screen[data-mode=reauth] #pin-password{min-width:220px;min-height:48px;margin-top:12px;background:#17263a;color:#fff;font-size:14px}
@media(max-width:760px){.pin-footer{display:none}}
@media(max-width:360px){.pin-digits{gap:8px}}
@media(orientation:landscape) and (max-height:500px) and (min-width:600px){
 #pin-screen{--pin-key-height:44px;--pin-row-gap:2px;padding-top:calc(8px + var(--pin-safe-top));padding-bottom:calc(8px + var(--pin-safe-bottom))}
 #pin-screen .pin-shell{width:min(760px,100%)}
 #pin-screen .pin-content{display:grid;grid-template-columns:minmax(160px,.8fr) minmax(280px,1.2fr);column-gap:24px;align-items:center}
 .pin-illustration{grid-column:1;grid-row:1;height:140px!important;margin:12px auto 0}
 .pin-artwork{height:124px!important}
 #pin-screen .pin-content h2{grid-column:1;grid-row:2;align-self:start;margin-top:12px}
 #pin-form{grid-column:2;grid-row:1/span 2;align-self:start;margin:12px 0 0}
 #pin-description{font-size:14px;line-height:1.4}
 .pin-entry{margin-top:12px}
 .pin-forget{margin-top:8px;font-size:14px}
 .pin-keypad{margin-top:8px}
 .pin-keypad button{font-size:27px}
 .pin-alternatives{grid-column:2;grid-row:2;align-self:end}
 #pin-screen[data-mode=login] .pin-alternatives{grid-column:2;grid-row:2;align-self:end}
 #pin-screen[data-mode=choose] #pin-form,#pin-screen[data-mode=confirm] #pin-form,#pin-screen[data-mode=checking] #pin-form,#pin-screen[data-mode=reauth] #pin-form{margin-top:12px}
 .pin-footer{display:none}
}
@keyframes pin-wait{to{transform:rotate(360deg)}}
@keyframes pin-identity-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
#pin-screen[open] .pin-artwork{animation:pin-identity-in 600ms cubic-bezier(.2,.7,.2,1) both}
#pin-screen[open] .pin-content h2{animation:pin-identity-in 300ms 50ms cubic-bezier(.2,.7,.2,1) both}
/* Keep one crisp illustration. Transitions continue from the current computed
   pose if verification finishes before the initial movement has settled. */
#pin-screen .pin-artwork{transform-origin:50% 88%;transition:transform 1.4s cubic-bezier(.2,.65,.25,1)}
#pin-screen[data-mode=login][data-attempt=pin][data-phase=authenticating] .pin-artwork{
 animation:none;transform:translateY(-3px) rotate(-1.1deg) scale(1.02)
}
body[data-auth=ready][data-access-phase=unlocking] #pin-screen .pin-artwork{
 animation:none;transform:translateY(-6px) rotate(1.5deg) scale(1.04);transition-duration:520ms;transition-timing-function:cubic-bezier(.2,.7,.2,1)
}
body[data-auth=ready][data-access-phase=unlocking] :is(#pin-form,.pin-alternatives,#pin-title){animation:pin-form-away 520ms ease both}
body[data-auth=ready][data-access-phase=unlocking] #pin-screen{animation:pin-surface-away 520ms ease both}
@keyframes pin-form-away{0%,30%{opacity:1}100%{opacity:0}}
@keyframes pin-surface-away{0%,78%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){#pin-screen,#pin-screen *,#pin-screen *::before,#pin-screen *::after{animation:none!important;transition:none!important}}


/* The prior sprite shows four different silhouettes and creates double horns
   when blended. Do not use it until a continuous character animation exists. */
.pin-sequence{display:none!important}