/* The little residents are drawn locally, with soft clay colours and real feet. */
#residents-button { position: relative; gap: 6px; }
#residents-button.residents-on { color: #517b67; background: #eff5e9; }
.residents-indicator { position: absolute; right: 5px; top: 4px; width: 5px; height: 5px; background: #8cb889; border-radius: 50%; opacity: 0; }
.residents-on .residents-indicator { opacity: 1; }
.residents-panel { position: absolute; top: 58px; right: 20px; width: 354px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 174px); padding: 23px; overflow: auto; scrollbar-width: thin; border: 1px solid #dde6d6; border-radius: 18px; background: #fffef9; box-shadow: 0 20px 64px #33492922, 0 3px 10px #3349290c; z-index: 84; color: #354b3c; }
.residents-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.residents-eyebrow { display: block; color: #8e9d7c; letter-spacing: 1.8px; font-size: 8px; font-weight: 650; margin-bottom: 7px; }
.residents-heading h2 { margin: 0; color: #354b3c; font: 25px/1.2 var(--serif); letter-spacing: -.7px; }
.residents-close { border-radius: 8px; width: 26px; height: 26px; color: #8b9b82; font: 24px/1 var(--sans); }
.residents-close:hover { background: #eef3e8; }
.residents-intro { margin: 11px 0 20px; color: #8c9885; font-size: 11px; line-height: 1.7; }
.residents-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; position: relative; cursor: pointer; }
.residents-toggle strong { display: block; font-size: 11px; font-weight: 600; }
.residents-toggle small { display: block; color: #9ba38f; font-size: 9px; line-height: 1.6; margin-top: 3px; }
.residents-toggle input { position: absolute; opacity: 0; right: 0; width: 34px; height: 20px; }
.residents-toggle > i { position: relative; display: block; width: 34px; height: 20px; flex-shrink: 0; background: #e1e5da; border-radius: 15px; transition: background .2s; }
.residents-toggle > i::after { content: ''; position: absolute; width: 14px; height: 14px; top: 3px; left: 3px; background: #fffef9; border-radius: 50%; box-shadow: 0 1px 3px #354e3322; transition: transform .2s; }
.residents-toggle input:checked + i { background: #739b78; }
.residents-toggle input:checked + i::after { transform: translateX(14px); }
.residents-toggle input:focus-visible + i { outline: 2px solid #78934f; outline-offset: 4px; }
.residents-cast { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; margin: 20px 0 9px; }
.residents-character { display: flex; flex-direction: column; align-items: center; padding: 8px 3px 12px; border: 1px solid #e6e9df; border-radius: 12px; background: #fafbf6; transition: transform .2s, background .2s, border-color .2s; }
.residents-character:nth-child(2) { background: #fdf9f1; }
.residents-character:nth-child(3) { background: #f7f5fb; }
.residents-character:hover { transform: translateY(-3px); border-color: #b8cdaa; }
.residents-character[aria-pressed="true"] { border-color: #90ad7d; box-shadow: 0 0 0 2px #dceacd; }
.residents-character .resident-svg { width: 74px; height: 80px; overflow: visible; }
.residents-character strong { margin: 3px 0 4px; font-size: 11px; font-weight: 650; }
.residents-character small { color: #9c9f8e; font-size: 8px; line-height: 1.4; min-height: 22px; max-width: 76px; }
.residents-all { display: flex; align-items: center; gap: 7px; width: 100%; padding: 10px 12px; border-radius: 9px; border: 1px solid #e1e7d7; color: #738566; font-size: 10px; }
.residents-all[aria-pressed="true"] { background: #edf3e3; border-color: #aabe8e; color: #526847; }
.residents-all > span:first-child { font-size: 14px; color: #94b26c; }
.residents-all-count { margin-left: auto; color: #9aac89; font-size: 9px; }
.residents-option { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 19px; font-size: 10px; }
.residents-segment { display: flex; background: #f0f2e9; border-radius: 7px; padding: 3px; }
.residents-segment button { padding: 6px 9px; font-size: 9px; color: #98a18a; border-radius: 5px; }
.residents-segment button[aria-pressed="true"] { color: #56754c; background: #fffefa; box-shadow: 0 1px 4px #3346260e; }
.residents-bubbles-option { padding: 18px 0; margin-top: 3px; border-bottom: 1px solid #e8ebdf; }
.residents-bubbles-option strong { font-weight: 500; font-size: 10px; }
.residents-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 15px; }
.residents-actions button { padding: 9px 6px; border: 1px solid #e0e6d6; border-radius: 8px; font-size: 10px; color: #728466; }
.residents-actions button:hover:not(:disabled) { background: #f0f4e8; border-color: #b5c6a2; }
.residents-actions button[aria-pressed="true"] { color: #557a49; background: #edf3e3; }
.residents-tip { margin: 16px 0 0; text-align: center; font-size: 9px; line-height: 1.9; color: #a3ac97; }
.residents-tip kbd { display: inline-block; padding: 0 4px; margin-top: 4px; border: 1px solid #e3e8da; border-radius: 3px; font: 8px/1.5 var(--sans); }
.residents-layer { position: absolute; inset: 0; pointer-events: none; z-index: 11; overflow: clip; }
.resident-actor { --look-x: 0px; --look-y: 0px; --resident-lean: 0deg; position: absolute; top: 0; left: 0; width: 80px; height: 88px; padding: 0; margin: 0; border: 0; background: none; pointer-events: auto; cursor: pointer; outline-offset: 0; border-radius: 35px; user-select: none; -webkit-user-select: none; will-change: transform; transition: opacity .3s; }
.resident-actor:focus-visible { outline: 1.5px dashed #92ac7e; }
.resident-figure { display: block; width: 100%; height: 100%; }
.resident-actor .resident-svg { width: 80px; height: 88px; overflow: visible; filter: drop-shadow(0 2px 1px #263d3512); }
.resident-body { transform-origin: 48px 82px; transform: rotate(var(--resident-lean, 0deg)); }
.resident-actor .resident-body { animation: resident-breathe 3.6s ease-in-out infinite; animation-delay: var(--resident-delay); }
.resident-pupils { transform: translate(var(--look-x, 0px), var(--look-y, 0px)); transition: transform .3s ease-out; }
.resident-eyes { transform-origin: 48px 51px; animation: resident-blink 5.7s infinite; animation-delay: var(--resident-delay, 0s); }
.resident-arm-left { transform-origin: 20px 59px; }
.resident-arm-right { transform-origin: 76px 59px; }
.resident-foot { transform-origin: 48px 87px; }
.resident-actor.is-walking .resident-body { animation: resident-walk var(--resident-step, .58s) ease-in-out infinite; }
.resident-actor.is-walking .resident-foot-left { animation: resident-step var(--resident-step, .58s) ease-in-out infinite; }
.resident-actor.is-walking .resident-foot-right { animation: resident-step var(--resident-step, .58s) ease-in-out infinite; animation-delay: calc(var(--resident-step, .58s) * -.5); }
.resident-actor.is-walking .resident-arm-left { animation: resident-arm var(--resident-step, .58s) ease-in-out infinite; }
.resident-actor.is-walking .resident-arm-right { animation: resident-arm var(--resident-step, .58s) ease-in-out infinite; animation-delay: calc(var(--resident-step, .58s) * -.5); }
.resident-actor[data-state="greeting"] .resident-arm-right { animation: resident-wave .45s ease-in-out infinite alternate; }
.resident-actor[data-state="greeting"] .resident-body { animation: resident-hello .7s ease-in-out infinite; }
.resident-actor[data-state="observing"] .resident-body { animation: resident-peek 3s ease-in-out infinite; }
.resident-thought { position: absolute; bottom: 85px; left: 50%; width: max-content; max-width: 188px; padding: 9px 12px; border: 1px solid #dce6d3; border-radius: 13px 13px 13px 4px; background: #fffef9f5; color: #647857; box-shadow: 0 4px 14px #28382b0a; font: 10px/1.5 var(--sans); letter-spacing: 0; text-align: center; pointer-events: none; opacity: 0; transform: translate(calc(-50% + var(--thought-shift, 0px)), 5px) scale(.95); transition: opacity .25s, transform .25s; }
.resident-actor.has-thought .resident-thought { opacity: 1; transform: translate(calc(-50% + var(--thought-shift, 0px)), 0) scale(1); }
.resident-actor.thought-below .resident-thought { top: 90px; bottom: auto; border-radius: 4px 13px 13px; }
.residents-quiet .resident-thought { display: none; }
.residents-busy .resident-actor { opacity: .3; pointer-events: none; }
.residents-paused .resident-actor * { animation-play-state: paused !important; transition-duration: 0s; }
.residents-paused .resident-actor[data-state="greeting"] .resident-arm-right { animation-play-state: running !important; }
.residents-paused .resident-actor[data-state="greeting"] .resident-body { animation-play-state: running !important; }
@keyframes resident-blink { 0%, 41%, 45%, 100% { transform: scaleY(1); } 43% { transform: scaleY(.08); } }
@keyframes resident-breathe { 0%, 100% { transform: translateY(0) rotate(var(--resident-lean)); } 50% { transform: translateY(-1.6px) rotate(var(--resident-lean)); } }
@keyframes resident-walk { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-3px) rotate(3deg); } }
@keyframes resident-step { 0%, 100% { transform: translate(-2px, -3px) rotate(-6deg); } 50% { transform: translate(2px, 1px) rotate(6deg); } }
@keyframes resident-arm { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } }
@keyframes resident-wave { from { transform: rotate(-115deg); } to { transform: rotate(-155deg); } }
@keyframes resident-hello { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-6px) rotate(3deg); } }
@keyframes resident-peek { 0%, 100% { transform: translateY(0) rotate(var(--resident-lean)); } 50% { transform: translateY(-3px) rotate(var(--resident-lean)); } }
@media (max-width: 1440px) { .residents-button-label { display: none; } }
@media (max-width: 720px) { .residents-panel { top: 50px; right: 12px; padding: 20px; max-height: calc(100dvh - 147px); } }
@media (prefers-reduced-motion: reduce) { .residents-panel *, .residents-layer * { animation: none !important; transition: none !important; } }

/* A whole household, with individual costumes and tiny everyday rituals. */
.residents-panel{width:420px;padding:24px}.residents-roster-meta{display:flex;align-items:center;gap:10px;margin-top:22px;color:#93a17f;font-size:9px}.residents-roster-meta>span{margin-right:auto}.residents-roster-meta button{font-size:8px;text-decoration:underline;text-underline-offset:3px;color:#91a179}
.residents-roster{max-height:375px;overflow:auto;padding:4px;margin:10px -4px 15px;scrollbar-width:thin;gap:8px}.residents-roster .residents-character{position:relative;padding:3px 4px 9px;background:#fafbf5;min-width:0}.residents-roster .residents-character.chosen{background:#f0f5e9;border-color:#a8bd8e;box-shadow:0 0 0 1px #dce8cb}.residents-roster .residents-character:hover{transform:none;border-color:#b2c39e}.residents-character>label{display:flex;align-items:center;flex-direction:column;width:100%;cursor:pointer}.residents-character>label>input{position:absolute;top:7px;right:7px;accent-color:#87a267;width:13px;height:13px;cursor:pointer}.residents-roster .resident-svg{width:69px;height:78px;margin-top:7px}.residents-roster strong{font-size:11px;margin-top:0}.residents-roster small{font-size:8px;min-height:22px;max-width:95px;text-align:center}.resident-quantity{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:5px}.resident-quantity button{display:grid;place-items:center;width:21px;height:21px;border:1px solid #dce5d0;border-radius:6px;background:#fffdf6;color:#8ba071;font-size:15px}.resident-quantity button:disabled{opacity:.35;cursor:default}.resident-quantity output{font-size:10px;color:#789260;min-width:8px;text-align:center}.residents-select{display:flex;align-items:center;justify-content:space-between;margin-top:18px;color:#849572;font-size:10px}.residents-select select{font:10px var(--sans);padding:7px;border:1px solid #dce5d1;border-radius:6px;color:#849572;background:#fcfdf7}.residents-home-option{margin-top:22px}.residents-home-option strong{font-size:10px;font-weight:500}.residents-living .resident-thought{max-width:245px;padding:12px 15px;font:11px/1.65 var(--sans);border-radius:16px 16px 16px 5px;text-align:left;box-shadow:0 5px 20px #34482f12;z-index:8}.resident-effects{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}.residents-living .resident-actor{z-index:3}.resident-prop{position:absolute;inset:0;display:block;pointer-events:none;z-index:4}.resident-prop svg{display:block;width:80px;height:88px;overflow:visible}.resident-house{position:absolute;top:0;left:0;width:96px;height:80px;pointer-events:none;opacity:.9;z-index:0}.resident-house svg{width:100%;height:100%}.resident-actor[data-kind=ghost] .resident-body{animation:resident-float 4.5s ease-in-out infinite}.resident-actor[data-state=leaning] .resident-arm,.resident-actor[data-state=tugging] .resident-arm{opacity:0}.resident-actor[data-state=leaning] .resident-body{animation:resident-inspect 4s ease-in-out infinite}.resident-actor[data-state=tugging] .resident-body{animation:resident-tug 1.25s ease-in-out infinite}.resident-actor[data-state=sitting] .resident-body,.resident-actor[data-state=reading] .resident-body,.resident-actor[data-state=tea] .resident-body,.resident-actor[data-state=sleeping] .resident-body,.resident-actor[data-state=tinkering] .resident-body,.resident-actor[data-state=mending] .resident-body,.resident-actor[data-state=sketching] .resident-body,.resident-actor[data-state=gardening] .resident-body{animation:resident-seated 4s ease-in-out infinite;animation-delay:var(--activity-delay)}.resident-actor:is([data-state=sitting],[data-state=reading],[data-state=tea],[data-state=sleeping],[data-state=tinkering],[data-state=mending],[data-state=sketching],[data-state=gardening]) .resident-foot-left{transform:translate(-4px,1px) rotate(-15deg)}.resident-actor:is([data-state=sitting],[data-state=reading],[data-state=tea],[data-state=sleeping],[data-state=tinkering],[data-state=mending],[data-state=sketching],[data-state=gardening]) .resident-foot-right{transform:translate(4px,1px) rotate(15deg)}.resident-actor[data-state=reading] .resident-arm-left{transform:rotate(-48deg)}.resident-actor[data-state=reading] .resident-arm-right{transform:rotate(48deg)}.resident-actor[data-state=tea] .resident-arm-right{animation:resident-sip 5s ease-in-out infinite}.resident-actor[data-state=tea] .resident-prop{animation:resident-teacup 5s ease-in-out infinite}.resident-actor:is([data-state=tinkering],[data-state=mending],[data-state=sketching]) .resident-arm-right{animation:resident-fiddle .9s ease-in-out infinite alternate}.resident-actor:is([data-state=tinkering],[data-state=mending],[data-state=sketching]) .resident-prop{animation:resident-tools 1.8s ease-in-out infinite}.resident-actor[data-state=gardening] .resident-arm-left{animation:resident-fiddle 2s ease-in-out infinite alternate}.resident-actor[data-state=sleeping] .resident-eyes{transform:scaleY(.12);animation:none}.resident-actor[data-state=sleeping] .resident-prop{animation:resident-dream 4s ease-out infinite}.resident-actor[data-state=stretching] .resident-arm-left{animation:resident-stretch-left 5s ease-in-out infinite}.resident-actor[data-state=stretching] .resident-arm-right{animation:resident-stretch-right 5s ease-in-out infinite}.resident-actor:is([data-state=dancing],[data-state=celebrating]) .resident-body{animation:resident-dance 1.2s ease-in-out infinite}.resident-actor:is([data-state=dancing],[data-state=celebrating]) .resident-arm-right{animation:resident-wave .6s ease-in-out infinite alternate}.resident-actor[data-state=magic] .resident-arm-right{animation:resident-wave 2s ease-in-out infinite alternate}.resident-actor[data-state=magic] .resident-prop{animation:resident-spark 2s ease-in-out infinite}.resident-actor[data-state=compass] .resident-body{animation:resident-inspect 6s ease-in-out infinite}.resident-actor[data-state=stargazing] .resident-prop{animation:resident-spark 3.5s ease-in-out infinite}.resident-actor[data-state=peekaboo] .resident-body{animation:resident-hide 4s ease-in-out infinite}.resident-actor[data-state=chatting] .resident-arm-right{animation:resident-gesture 2s ease-in-out infinite}.resident-actor[data-state=listening] .resident-body{animation:resident-nod 3s ease-in-out infinite}.resident-actor[data-state=highfive] .resident-arm-left{animation:resident-five-left 1.8s ease-in-out infinite}.resident-actor[data-state=highfive] .resident-arm-right{animation:resident-five-right 1.8s ease-in-out infinite}.residents-paused .resident-effects{opacity:.7}
@keyframes resident-inspect{0%,100%{transform:rotate(var(--resident-lean)) translateY(1px)}45%,65%{transform:rotate(var(--resident-lean)) translateY(-3px) scale(1.02)}}
@keyframes resident-tug{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(4deg) translateY(3px) scaleY(.95)}}
@keyframes resident-seated{0%,100%{transform:translateY(6px) scaleY(.89)}50%{transform:translateY(5px) scaleY(.91)}}
@keyframes resident-float{0%,100%{transform:translateY(-1px)}50%{transform:translateY(-7px)}}
@keyframes resident-sip{0%,70%,100%{transform:rotate(12deg)}25%,45%{transform:rotate(-40deg)}}
@keyframes resident-teacup{0%,70%,100%{transform:translate(0,0)}25%,45%{transform:translate(-3px,-8px) rotate(-5deg)}}
@keyframes resident-fiddle{from{transform:rotate(24deg)}to{transform:rotate(-18deg)}}
@keyframes resident-tools{0%,100%{transform:rotate(-1deg) translateY(1px)}50%{transform:rotate(1deg) translateY(-1px)}}
@keyframes resident-dream{0%{opacity:0;transform:translateY(2px)}30%,70%{opacity:.8}100%{opacity:0;transform:translateY(-12px)}}
@keyframes resident-stretch-left{0%,100%{transform:rotate(0)}45%,70%{transform:rotate(125deg)}}
@keyframes resident-stretch-right{0%,100%{transform:rotate(0)}45%,70%{transform:rotate(-125deg)}}
@keyframes resident-dance{0%,100%{transform:rotate(-9deg) translateY(0)}50%{transform:rotate(9deg) translateY(-6px)}}
@keyframes resident-spark{0%,100%{transform:translateY(0);filter:drop-shadow(0 0 1px #f8dc91)}50%{transform:translateY(-3px);filter:drop-shadow(0 0 5px #f8dc91)}}
@keyframes resident-hide{0%,100%{transform:translateY(0) scaleY(1)}40%,65%{transform:translateY(9px) scaleY(.8)}}
@keyframes resident-gesture{0%,100%{transform:rotate(-15deg)}50%{transform:rotate(-52deg)}}
@keyframes resident-nod{0%,100%{transform:rotate(var(--resident-lean))}35%,60%{transform:translateY(3px) rotate(var(--resident-lean)) scaleY(.96)}}
@keyframes resident-five-left{0%,100%{transform:rotate(5deg)}40%,65%{transform:rotate(125deg)}}
@keyframes resident-five-right{0%,100%{transform:rotate(-5deg)}40%,65%{transform:rotate(-125deg)}}
@media(max-width:720px){.residents-panel{width:375px;padding:18px}.residents-roster{max-height:280px}.residents-living .resident-thought{max-width:210px;font-size:10px}}
@media(prefers-reduced-motion:reduce){.residents-panel *, .residents-layer *{animation:none!important;transition:none!important}}
.residents-living .resident-actor.has-thought{z-index:6}.resident-actor[data-state=highfive] .resident-arm{opacity:.25}