/* Two small sprites, with interaction confined to their own hit targets. */
.people-play{position:fixed;inset:0;z-index:40;pointer-events:none;overflow:clip;contain:layout style}
.people-play[hidden],.people-character[hidden]{display:none!important}
.people-play-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.people-character{position:absolute;top:0;left:0;width:76px;height:76px;pointer-events:none;will-change:transform}
.people-character-button{position:relative;display:block;width:100%;height:100%;min-width:0;min-height:0;padding:0;border:0;border-radius:0;background:none;color:#111;text-decoration:none;cursor:pointer;pointer-events:auto;touch-action:none;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.people-character-button:focus-visible{outline:1px dashed #111;outline-offset:2px;box-shadow:0 0 0 3px #fff}
.people-sprite{display:block;width:100%;height:100%;background-image:url('assets/people-pixel-sprites-v3.webp');background-repeat:no-repeat;background-size:400% 200%;image-rendering:pixelated;transform-origin:50% 88%;scale:var(--people-facing,1) 1;filter:drop-shadow(0 1px 0 #ffffffa6) drop-shadow(0 1px 1px #0005);pointer-events:none}
.people-character-label{position:absolute;left:50%;bottom:calc(100% + 4px);width:max-content;max-width:120px;padding:5px 7px;background:#fff;color:#111;border:1px solid #dedede;font:500 10px/1.6 var(--body);letter-spacing:.025em;white-space:nowrap;opacity:0;transform:translate(-50%,3px);transition:opacity 180ms ease,transform 180ms ease;pointer-events:none}
.people-character:hover .people-character-label,.people-character:focus-within .people-character-label,.people-character.is-nearby .people-character-label{opacity:1;transform:translate(-50%,0)}
.people-character-close{position:absolute;right:-2px;top:-6px;display:grid;place-items:center;width:24px;height:24px;min-width:0;min-height:0;padding:0;border:1px solid #dedede;border-radius:50%;background:#fff;color:#111;opacity:0;pointer-events:none;cursor:pointer;transition:opacity 180ms ease,background 180ms ease}
.people-character:hover .people-character-close,.people-character:focus-within .people-character-close{opacity:1;pointer-events:auto}
.people-character-close:hover,.people-character-close:active{background:#eee}
.people-character-close:focus-visible{opacity:1;outline:1px solid #111;outline-offset:2px;pointer-events:auto}
.people-character.is-dragging .people-character-button{cursor:grabbing}
.people-character.is-dragging .people-sprite{transform:translateY(-3px) rotate(-7deg)}
.people-character.is-dragging .people-character-label,.people-character.is-dragging .people-character-close{opacity:0;pointer-events:none}
.people-character[data-pose=celebrate] .people-sprite{animation:people-celebrate 440ms steps(2,end) 3}
.people-character[data-pose=land] .people-sprite{animation:people-land 240ms cubic-bezier(.22,1,.36,1) both}
@keyframes people-celebrate{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-5px) rotate(3deg)}}
@keyframes people-land{0%{transform:scale(1.06,.93)}100%{transform:scale(1)}}
@media(max-width:680px){.people-character{width:64px;height:64px}.people-character-label{font-size:9px}}
@media(prefers-reduced-motion:reduce){.people-character .people-sprite{animation:none!important}.people-character-label,.people-character-close{transition:none}}
@media print{.people-play{display:none!important}}