/* Labels are outside the illustration at every viewport width. */
.scene-top{position:static;gap:8px;margin-bottom:10px;font-size:12px}
.scene-caption{position:static;margin-top:10px;min-height:44px;padding:10px 12px;align-items:flex-start;font-size:14px;line-height:1.4}
.scene-caption .name-dot{flex:none;margin-top:7px}
#life-label{min-width:0;overflow-wrap:anywhere}
.employee{flex:none;margin-top:2px;font-size:12px}
.topbar{margin-bottom:16px}.status-panel{padding-top:20px}
.workstation{bottom:6%;width:54%;left:23%}
.agent-sprite{position:relative}
.agent-sprite::after{backface-visibility:hidden;transform-origin:68% 30%}
body[data-mode="idle"] .agent-sprite::after{clip-path:polygon(51% 1%,96% 1%,96% 45%,51% 45%);animation:calm-breath 3.8s ease-in-out infinite}
body[data-mode="waiting"] .agent-sprite::after,body[data-mode="blocked"] .agent-sprite::after{opacity:1;clip-path:polygon(47% 0,83% 0,83% 46%,47% 46%);animation:calm-breath 4.5s ease-in-out infinite}
body[data-mode="working"] .agent-sprite::after{animation:gentle-typing .7s ease-in-out infinite}
body[data-mode="documents"] .agent-sprite::after{animation:page-check 2.8s ease-in-out infinite}
body[data-life="eat"] .agent-sprite,body[data-life="sleep"] .agent-sprite,
body[data-life="walkSmoke"] .agent-sprite,body[data-life="smoke"] .agent-sprite,
body[data-life="walkToilet"] .agent-sprite,body[data-life="toilet"] .agent-sprite,
body[data-life="returning"] .agent-sprite{background-image:url('/office-life.png');background-size:200% 200%;background-position:0 100%;animation:none}
body[data-life="eat"] .agent-sprite{background-position:0 0}
body[data-life="sleep"] .agent-sprite{background-position:100% 0}
body[data-life="walkSmoke"] .agent-sprite::after,body[data-life="smoke"] .agent-sprite::after,
body[data-life="walkToilet"] .agent-sprite::after,body[data-life="toilet"] .agent-sprite::after,
body[data-life="returning"] .agent-sprite::after{display:none}
body[data-life="eat"] .agent-sprite::after,body[data-life="sleep"] .agent-sprite::after{display:block;opacity:1;clip-path:polygon(43% 1%,88% 1%,88% 46%,43% 46%)}
body[data-life="eat"] .agent-sprite::after{animation:small-bite 2.6s ease-in-out infinite}
body[data-life="sleep"] .agent-sprite::after{animation:calm-breath 4.6s ease-in-out infinite}
.life-actor{display:none;position:absolute;width:34%;aspect-ratio:1;left:35%;bottom:14%;z-index:3;pointer-events:none;transition:left .1s linear,bottom .1s linear,opacity .1s linear}
.life-person{width:100%;height:100%;background:url('/office-life.png') 100% 100%/200% 200% no-repeat;image-rendering:pixelated;transform-origin:50% 85%}
body[data-life="walkSmoke"] .life-actor,body[data-life="smoke"] .life-actor,
body[data-life="walkToilet"] .life-actor,body[data-life="toilet"] .life-actor,body[data-life="returning"] .life-actor{display:block}
body[data-life="smoke"] .life-person{animation:calm-breath 4s ease-in-out infinite}
body[data-life="walkSmoke"] .life-person,body[data-life="walkToilet"] .life-person,body[data-life="returning"] .life-person{animation:soft-step .52s ease-in-out infinite}
body[data-life="attention"] .agent-sprite{background-position:0 100%}
body[data-mode="offline"] .agent-sprite::after{display:none}
@keyframes calm-breath{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-.6px) scaleY(1.014)}}
@keyframes gentle-typing{0%,100%{transform:translateY(0)}25%,65%{transform:translateY(-1px)}45%,85%{transform:translateY(.2px)}}
@keyframes page-check{0%,70%,100%{transform:translateY(0)}35%{transform:translate(-.7px,-1px)}}
@keyframes small-bite{0%,65%,100%{transform:translateY(0)}30%{transform:translate(.5px,-1.2px)}}
@keyframes soft-step{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-2px) rotate(.6deg)}}
.paused .life-actor,.page-hidden .life-actor{transition:none}
@media(min-width:700px){.workstation{width:49%;left:25.5%}.topbar{margin-bottom:18px}}
@media(max-width:360px){.scene-top{font-size:12px}.scene-caption{font-size:14px}.scene-top .live,.scene-top time{padding:7px 8px}}
@media(prefers-reduced-motion:reduce){.life-actor,.life-person,.agent-sprite::after{animation:none!important;transition:none!important}}