:root{--ppl-dur:320ms;--ppl-stagger:60ms}
.ppl-wrapper{display:flex;justify-content:center;align-items:center;box-sizing:border-box}
.ppl-card{width:min(760px,100%);padding:16px;box-sizing:border-box}
.ppl-title{margin:0 0 12px;font-size:1.125rem}
.ppl-profiles{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.ppl-profile{width:120px;display:flex;flex-direction:column;align-items:center;gap:8px;padding:0;background:none;border:0;cursor:pointer;transition:transform .2s ease,opacity .2s ease}
.ppl-profile:active{transform:scale(.96)}
.ppl-profile-avatar{width:100%;aspect-ratio:1/1;border-radius:999px;object-fit:cover;display:block}
.ppl-profile-name{text-align:center;font-size:.9rem;word-break:break-word}
.ppl-back{margin-bottom:8px;background:transparent;border:none;cursor:pointer;font-size:.95rem;padding:0}
.ppl-selected{display:flex;align-items:center;gap:10px;margin:6px 0 12px}
.ppl-selected-avatar{width:48px;height:48px;border-radius:999px}
.ppl-selected-name{font-weight:600}
.ppl-pin-label{display:block;margin-bottom:8px}
.ppl-pin-input-wrap{display:flex;align-items:center;gap:6px;border:1px solid #e5e7eb;border-radius:10px;padding:6px 8px;background:#fff}
.ppl-pin-input{flex:1 1 auto;min-width:0;border:none;outline:none;font-size:1.2rem;letter-spacing:.2em;background:transparent;text-align:center}
.ppl-toggle-visibility{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;background:#eee;border:none;cursor:pointer;padding:0;border-radius:0 10px 10px 0}
.ppl-toggle-visibility i{font-size:1.1rem;line-height:1;pointer-events:none}
.ppl-submit{margin-top:10px;padding:10px 12px;border:1px solid #111827;background:#111827;color:#fff;border-radius:10px;cursor:pointer;font-size:1rem}
.ppl-error{color:#b91c1c;margin-top:10px;min-height:1.2em;display:block}
.ppl-no-avatars .ppl-profile-avatar,.ppl-no-avatars .ppl-selected-avatar{display:none}
@media (hover:hover){.ppl-profile:hover{transform:scale(1.04)}.ppl-submit:hover{filter:brightness(1.02)}}
.ppl-profiles.ppl-morphing{pointer-events:none}
.ppl-profile--selected{transform:scale(1.08)}
.ppl-profile--fade{opacity:0;transform:scale(.88)}
.ppl-pin-appear{animation:ppl-fade-in-up var(--ppl-dur) ease both}
@keyframes ppl-fade-in-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ppl-shake{animation:ppl-shake .18s ease-in-out both}
@keyframes ppl-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-2px)}40%{transform:translateX(2px)}60%{transform:translateX(-1px)}80%{transform:translateX(1px)}}
@media (prefers-reduced-motion:reduce){.ppl-pin-appear,.ppl-shake{animation:none}.ppl-profile{transition:none}}