.everyday-scene{height:350px;background-position:center 60%;container-type:inline-size}
.scene-living-stage{position:absolute;inset:0}.scene-room{position:absolute;width:100%;height:100%;inset:0}
.scene-daylight{position:absolute;inset:0;background:#a87d46;opacity:var(--daylight,.03);pointer-events:none}
.everyday-scene .scene-weather{top:12px;z-index:6;align-items:flex-start}
.everyday-scene .scene-weather span{color:#3d6054;background:#fffbedf2;font-size:14px}
.everyday-scene .scene-cast{bottom:75px;height:182px;gap:12px}
.everyday-scene .scene-person{animation:roomBreathe 3s steps(2,end) infinite}
.everyday-scene .scene-person .life-sprite{animation:none}
.everyday-scene .protagonist .life-sprite{animation:roomHands 1.8s steps(1,end) infinite}
.everyday-scene .protagonist{width:145px;max-width:145px!important;flex-shrink:0;order:1}
.everyday-scene .protagonist>.life-sprite{width:150px;height:150px}
.everyday-scene .pixel-bubble{top:auto;bottom:155px;max-width:260px;white-space:normal;width:max-content;line-height:1.4;font-size:15px;padding:8px 12px;color:#395e4d;animation:none}
.everyday-scene .scene-person>span:not(.life-sprite):not(.activity-prop){z-index:5;font-size:14px;background:#fffceef0;color:#405e4d;bottom:0}
.routine-prop{position:absolute;bottom:13px;left:50%;width:124px;height:124px;transform:translateX(-50%);z-index:4;pointer-events:none}
.activity-code .routine-prop,.activity-work .routine-prop{height:100px;bottom:8px;filter:drop-shadow(0 2px 0 #45665530)}
.activity-code .protagonist>.life-sprite,.activity-work .protagonist>.life-sprite{left:30%}
.activity-code .routine-prop,.activity-work .routine-prop{left:80%}
.activity-read .protagonist>.life-sprite,.activity-school .protagonist>.life-sprite{left:30%}
.activity-read .routine-prop,.activity-school .routine-prop{left:80%;height:100px;bottom:8px}
.activity-application .protagonist>.life-sprite,.activity-budget .protagonist>.life-sprite{left:30%}
.activity-application .routine-prop,.activity-budget .routine-prop{left:80%;height:100px;bottom:8px}
.activity-make .routine-prop{left:90%;width:110px;height:145px;bottom:12px;transform:translateX(-50%) rotate(-2deg)}
.activity-make .protagonist>.life-sprite{left:40%}
.activity-play .routine-prop,.activity-baby .routine-prop{width:138px;height:106px;bottom:10px}
.activity-rest .protagonist>.life-sprite,.activity-babysleep .protagonist>.life-sprite{animation:none;bottom:4px}
.activity-rest .routine-prop{width:148px;height:105px;bottom:11px}
.activity-rest .scene-daylight{background:#747eaa;opacity:.12}
.activity-contact .routine-prop{width:61px;height:61px;left:75%;bottom:67px;animation:phoneNod 2.4s steps(2,end) infinite}
.everyday-scene .pet-person{align-self:flex-end;height:100px}
.everyday-scene .pet-person .life-sprite{animation:spriteWalk 1.8s steps(1,end) infinite}
.scene-caption{position:absolute;bottom:5px;left:0;right:0;z-index:7;min-height:70px;background:#fffdf1f2;border-top:2px solid #c0cfb0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 15px;color:#355e50}
.scene-caption>div{min-width:0}.scene-caption small{display:block;font-size:13px;line-height:1.4;color:#687b60}
.scene-caption strong{display:block;font-family:var(--serif);font-size:19px;line-height:1.45;font-weight:400;word-break:keep-all;overflow-wrap:anywhere}
.scene-caption button{flex:0 0 auto;background:none;border:0;color:#506b5a;font-size:14px;min-height:44px;padding:4px}
.scene-months{position:absolute;bottom:0;left:0;right:0;z-index:8;display:flex;gap:3px;background:#fffbed;padding:0 3px}
.scene-months span{height:5px;flex:1;background:#d9e3ce}.scene-months .passed{background:#83a589}.scene-months .current{background:#d9a461}
.everyday-scene.still *{animation-play-state:paused!important}
body:has(dialog[open]) .everyday-scene *{animation-play-state:paused!important}
.daily-options{margin-top:16px;border-top:1px dashed var(--line);padding-top:12px}.daily-options>summary{cursor:pointer;font-size:16px;min-height:44px;display:flex;align-items:center;color:#53725e}.daily-options>summary:before{content:'＋';margin-right:8px}.daily-options[open]>summary:before{content:'−'}
.daily-options .plan-actions{margin-top:8px}.daily-options small{display:block;line-height:1.6}
@keyframes roomHands{0%,100%{background-position-y:0}50%{background-position-y:100%}}
@keyframes roomBreathe{0%,100%{translate:0 0}50%{translate:0 -2px}}
@keyframes phoneNod{0%,100%{rotate:0deg}50%{rotate:5deg}}
@media(max-width:700px){
 .everyday-scene{height:350px}.everyday-scene .scene-cast{bottom:86px;gap:4px}
 .everyday-scene .protagonist{width:112px;max-width:112px!important;min-width:112px}
 .everyday-scene .protagonist>.life-sprite{width:136px;height:136px}
 .everyday-scene .scene-person.companion{max-width:65px;min-width:36px}
 .everyday-scene .scene-person.companion>.life-sprite{width:104px;height:104px}
 .everyday-scene .pixel-bubble{top:auto;bottom:145px;font-size:14px;max-width:220px}
 .everyday-scene .routine-prop{width:109px;height:109px}
 .everyday-scene.activity-code .routine-prop,.everyday-scene.activity-work .routine-prop{height:96px}
 .everyday-scene.activity-rest .routine-prop{width:128px;height:98px}
 .everyday-scene.activity-contact .routine-prop{width:55px;height:55px}
 .everyday-scene.activity-make .routine-prop{width:86px;height:128px;left:77%}
 .everyday-scene .scene-caption{padding:8px 10px;min-height:78px;gap:6px}
 .everyday-scene .scene-caption strong{font-size:17px}.everyday-scene .scene-caption small{font-size:13px}
 .everyday-scene .scene-caption button{font-size:13px;max-width:61px;line-height:1.4}
 .everyday-scene .scene-weather span:last-child{display:block;white-space:nowrap}
 .everyday-scene .scene-person>span:not(.life-sprite):not(.activity-prop){font-size:12px}
}
@media(prefers-reduced-motion:reduce){.everyday-scene *{animation:none!important;transition:none!important}}
.scene-room{object-fit:cover;object-position:center 58%}
.everyday-scene.activity-baby .routine-prop,.everyday-scene.activity-babysleep .routine-prop{height:78px;bottom:-4px}
.everyday-scene.activity-babyread .routine-prop{height:65px;width:80px;bottom:0}
.everyday-scene.activity-play .routine-prop,.everyday-scene.activity-babyplay .routine-prop{left:85%;height:80px}
.everyday-scene.activity-rest .routine-prop{height:80px;bottom:1px}
.everyday-scene.activity-read .routine-prop,.everyday-scene.activity-school .routine-prop{height:96px}
.everyday-scene.activity-shop .protagonist>.life-sprite{left:30%}
.everyday-scene.activity-shop .routine-prop{left:80%;height:96px;bottom:8px}
/* The neighbourhood information table stands beside the person, rather than
   covering their face. Keep it below the head even when actors shrink. */
.everyday-scene.activity-community .routine-prop{left:100%;width:92px;height:76px;bottom:10px}
@media(max-width:700px){
 .everyday-scene .scene-cast.family-cast.crowded{padding-inline:26px;gap:3px}
 .everyday-scene .scene-cast.crowded .protagonist{width:76px;min-width:76px;max-width:76px!important;margin-inline:0}
}
.everyday-scene.life-moment.tone-warm{border-color:#cfb77f}
.life-moment.tone-warm .scene-caption{background:#fff8e8f5;border-color:#dbc993}
.life-moment.tone-quiet .scene-caption{background:#f2f4eef5}
.life-moment .scene-caption [data-scene-context]{font-weight:600}
.activity-wedding .routine-prop,.activity-date .routine-prop{width:65px;height:65px;left:96%;bottom:58px}
.activity-family .routine-prop{width:65px;height:65px;bottom:0;left:78%}
.activity-moving .routine-prop,.activity-achievement .routine-prop{width:86px;height:86px;bottom:0;left:85%}
.everyday-scene{scroll-margin-top:24px}
@media(min-width:761px){.everyday-scene{scroll-margin-top:155px}}
.scene-growth{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:5px;font-size:14px;font-weight:600;color:#416c51;line-height:1.5}
.scene-growth span{white-space:nowrap}
.scene-news-controls:not([hidden]){display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;padding:8px 12px;background:#fffdf1;border:1px solid #c0cfb0;border-radius:0 0 12px 12px}
.scene-news-controls button{min-height:44px;font-size:16px;padding:8px 12px;border:1px solid #aac2a6;border-radius:8px;background:#edf4e5;color:#355e50}
.scene-news-controls small{font-size:14px;line-height:1.5;color:#536d5c}
.plan-moment .scene-growth span{white-space:normal;overflow-wrap:anywhere}
.childhood-moment .scene-caption{min-height:104px}
.childhood-moment .scene-cast{bottom:112px}
.activity-ball .routine-prop{height:72px;width:72px;left:90%;bottom:1px;animation:playBall 2.4s steps(8,end) infinite}
.activity-music .routine-prop,.activity-wave .routine-prop{width:65px;height:65px;left:90%;bottom:35px}
.activity-cloth .routine-prop,.activity-drawing .routine-prop,.activity-bus .routine-prop,.activity-leaf .routine-prop,.activity-stones .routine-prop,.activity-shadow .routine-prop,.activity-walk .routine-prop,.activity-rain .routine-prop{width:84px;height:84px;left:90%;bottom:1px}
@keyframes playBall{0%,100%{translate:0 0;rotate:0deg}50%{translate:28px 0;rotate:50deg}}
@media(max-width:480px){.play-stage .everyday-scene.childhood-moment{height:330px}.play-stage .everyday-scene.childhood-moment .scene-cast{bottom:119px}.childhood-moment .scene-caption{min-height:112px}.childhood-moment .scene-caption button{align-self:flex-start}.scene-growth{font-size:14px}}

.child-discussion .routine-prop{display:none}
.everyday-scene.activity-together .routine-prop{left:105%;width:112px;height:85px;bottom:2px}
.everyday-scene.social-moment{height:380px}
.social-moment .scene-caption{min-height:104px}
.social-moment .scene-cast{bottom:112px}
.social-moment .scene-growth span{white-space:normal;overflow-wrap:anywhere}
@media(max-width:480px){
 .play-stage .everyday-scene.social-moment{height:380px}
 .play-stage .everyday-scene.social-moment .scene-cast{bottom:145px}
 .social-moment .scene-caption{min-height:138px}
 .social-moment .scene-caption button{align-self:flex-start}
 .everyday-scene.activity-together .routine-prop{left:98%;width:84px;height:70px}
}