/* The usher protects a code while the user focuses its field. */
.mfa-guardian .password-guardian__portrait {width:58px}
.mfa-mascot {position:relative;display:block;width:160px;height:160px;margin-inline:auto;flex:none}
.mfa-mascot__frame {position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity 180ms ease,transform 180ms ease}
.mfa-mascot__frame--covered {opacity:0}
.mfa-shell:has(input[type=password]:focus) .mfa-mascot__frame--covered,body:has(.auth-form input[name=code]:focus) .mfa-challenge-mascot .mfa-mascot__frame--covered {opacity:1}
.mfa-shell:has(input[type=password]:focus) .mfa-mascot__frame--attentive,body:has(.auth-form input[name=code]:focus) .mfa-challenge-mascot .mfa-mascot__frame--attentive {opacity:0}
.mfa-challenge-mascot {width:100px;height:100px;margin:-.25rem auto .75rem}
@media(hover:hover) and (pointer:fine) {.mfa-mascot:hover .mfa-mascot__frame {transform:rotate(-3deg)}}
@media(prefers-reduced-motion:reduce) {.mfa-mascot__frame {transition:none}.mfa-mascot:hover .mfa-mascot__frame {transform:none}}
@media(forced-colors:active) {.mfa-mascot{display:none}}
/* On sign-in the guardian rests on the right edge of the code panel; the
   configuration screen keeps its separate, centred composition. */
.mfa-access-guardian{position:relative;isolation:isolate;height:110px;margin:-9px 0 17px;pointer-events:none}
.mfa-access-guardian__halo{position:absolute;right:-13px;top:-19px;width:168px;height:137px;border-radius:50%;background:radial-gradient(ellipse,#bc9fec21,transparent 68%)}
.mfa-access-guardian__ledge{position:absolute;inset:auto 0 12px;height:19px;border-top:1px solid #b7a4f544;border-radius:5px 5px 0 0;background:linear-gradient(180deg,#b7a4f514,transparent);box-shadow:0 -4px 18px #0002}
.mfa-access-guardian__ledge::after{content:'';position:absolute;top:0;right:16px;width:85px;height:4px;border-radius:50%;background:#0007;filter:blur(2px)}
.mfa-access-guardian>img{position:absolute;right:-3px;bottom:-5px;z-index:2;width:144px;height:144px;max-width:none;object-fit:contain;filter:drop-shadow(0 4px 4px #0004);transform:rotate(-4deg);transform-origin:55% 82%;animation:mfa-access-peek .55s cubic-bezier(.2,.7,.3,1) both}
.mfa-access-guardian__seal{position:absolute;bottom:34px;left:0;display:flex;align-items:center;gap:7px;max-width:calc(100% - 137px);font-size:10px;line-height:1.45;color:var(--muted)}
.mfa-access-guardian__seal>.icon{position:static;width:17px;height:17px;flex:none;color:var(--primary)}
@keyframes mfa-access-peek{from{opacity:0;transform:translateY(8px) rotate(-1deg)}to{opacity:1;transform:translateY(0) rotate(-4deg)}}
@media(max-width:360px){.mfa-access-guardian{height:99px}.mfa-access-guardian>img{width:128px;height:128px;bottom:-3px}.mfa-access-guardian__seal{max-width:calc(100% - 116px);font-size:9px}}
@media(prefers-reduced-motion:reduce){.mfa-access-guardian>img{animation:none}}
@media(forced-colors:active){.mfa-access-guardian{display:none}}