:root{color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#111e27;color:#eff5f4;font-synthesis:none;--mint:#99e4c4;--muted:#a8bcc1}
*{box-sizing:border-box}body{margin:0;min-width:280px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--mint);outline-offset:5px}[hidden]{display:none!important}
.office-app{max-width:760px;margin:auto;padding:max(22px,env(safe-area-inset-top)) 20px max(24px,env(safe-area-inset-bottom))}.topbar{display:flex;align-items:center;justify-content:space-between;margin:0 0 24px}.eyebrow{color:var(--mint);font-size:12px;letter-spacing:2.2px;font-weight:650}h1{font-weight:550;font-size:27px;letter-spacing:-.7px;margin:6px 0 0}.version{color:#79949d;font-size:12px;vertical-align:middle;letter-spacing:0;border:1px solid #38515a;border-radius:6px;padding:3px 5px;margin-left:9px}.icon-button{border:1px solid #3d525b;background:#1d3039;border-radius:14px;color:#cfe1e1;width:44px;height:44px;font-weight:650;font-size:17px}
.scene{position:relative;isolation:isolate;aspect-ratio:3/2;overflow:hidden;border-radius:22px;background:#223c43;box-shadow:0 15px 60px #0003;border:1px solid #38525a}.room{display:block;width:100%;height:100%;object-fit:cover;image-rendering:pixelated}.scene-top{position:absolute;top:15px;left:15px;right:15px;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#e4efed;font-weight:550}.live,.scene-top time{background:#10252dd9;border:1px solid #61817b55;border-radius:100px;padding:7px 10px;backdrop-filter:blur(8px)}.signal{width:6px;height:6px;border-radius:50%;background:#72d4ac;display:inline-block;margin-right:7px}.scene-caption{position:absolute;bottom:14px;left:16px;right:16px;background:#10252de8;border:1px solid #6e8d8055;border-radius:10px;padding:9px 12px;font-size:13px;display:flex;align-items:center;gap:7px}.employee{margin-left:auto;color:#a1bdbb;font-size:12px}.name-dot{width:6px;height:6px;background:var(--mint);border-radius:50%}
.workstation{position:absolute;width:51%;aspect-ratio:1;left:25%;bottom:9%;filter:drop-shadow(0 8px 5px #13261b33)}.agent-sprite{width:100%;height:100%;background-image:url('/office-agent.png');background-repeat:no-repeat;background-size:200% 200%;background-position:100% 0;image-rendering:pixelated;transform-origin:50% 85%}.activity-bubble{position:absolute;left:50%;top:36%;transform:translateX(-50%);border:1px solid #5a7c72;background:#e0f4e4;color:#1a3d35;border-radius:9px 9px 9px 1px;padding:7px 11px;font-size:12px;font-weight:650;box-shadow:0 3px 0 #18362b25;white-space:nowrap}.activity-bubble span{display:none}body[data-mode="idle"] .bubble-idle,body[data-mode="working"] .bubble-working,body[data-mode="documents"] .bubble-documents,body[data-mode="waiting"] .bubble-waiting,body[data-mode="blocked"] .bubble-blocked,body[data-mode="offline"] .bubble-offline{display:inline}
body[data-mode="working"] .agent-sprite{background-position:0 0;animation:typing .28s steps(2,end) infinite}body[data-mode="documents"] .agent-sprite{background-position:100% 100%;animation:reading 1.5s ease-in-out infinite}body[data-mode="idle"] .agent-sprite{animation:breathing 4s ease-in-out infinite}body[data-mode="waiting"] .agent-sprite,body[data-mode="blocked"] .agent-sprite{background-position:0 100%}body[data-mode="waiting"] .activity-bubble{animation:question 3s ease-in-out infinite}body[data-mode="working"] .bubble-working{letter-spacing:4px;animation:blink 1.2s steps(3) infinite}body[data-mode="offline"] .workstation{filter:grayscale(1) opacity(.6)}body[data-mode="offline"] .scene{filter:saturate(.45)}body[data-mode="offline"] .signal{background:#9aabb1}body[data-mode="blocked"] .state-dot,body[data-mode="waiting"] .state-dot{background:#ebca87}body[data-mode="offline"] .state-dot{background:#81969e}
@keyframes typing{0%{transform:translateY(0) rotate(-.4deg)}100%{transform:translateY(-1.5px) rotate(.4deg)}}@keyframes reading{0%,100%{transform:translateY(0) rotate(-.5deg)}50%{transform:translateY(-2px) rotate(.5deg)}}@keyframes breathing{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.012)}}@keyframes question{0%,85%,100%{transform:translateX(-50%) translateY(0)}90%{transform:translateX(-50%) translateY(-3px)}}@keyframes blink{50%{opacity:.45}}
.status-panel{padding:25px 2px 18px}.state-line{font-size:14px;color:var(--mint);font-weight:600;display:flex;align-items:center;gap:8px}.state-dot{width:7px;height:7px;border-radius:50%;background:var(--mint)}h2{font-size:23px;line-height:1.3;letter-spacing:-.4px;font-weight:550;margin:12px 0 9px;overflow-wrap:anywhere}.status-panel p{font-size:15px;line-height:1.55;color:var(--muted);margin:0;max-width:600px;overflow-wrap:anywhere}.status-meta{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-top:18px;color:#9cb2b9;font-size:12px}.text-button{background:none;border:0;color:var(--mint);font-size:13px;min-height:36px;padding:6px 8px}.actions{display:flex;gap:10px;align-items:stretch}.primary-button,.secondary-button{min-height:50px;padding:14px 18px;border-radius:14px;font-size:15px;font-weight:600;display:flex;justify-content:center;align-items:center;text-decoration:none;gap:16px;border:1px solid transparent}.primary-button{background:var(--mint);color:#12392e;flex:1}.primary-button:hover{background:#b4f2d7}.secondary-button{background:#20343e;border-color:#3a5360;color:#dce9e9}.last-result{margin-top:22px;border-top:1px solid #2d414b;padding-top:18px}.last-result summary{cursor:pointer;color:#b9ced2;font-size:14px;min-height:32px}.last-result summary span{float:right;color:#8aa4ae;font-size:12px}.last-result p{font-size:14px;line-height:1.5;color:#e0ebeb;margin-bottom:7px}.last-result small{font-size:12px;color:#8ca6af}footer{margin-top:25px;display:grid;gap:5px;text-align:center;color:#7f9aa5;font-size:12px;line-height:1.5}.paused *,.page-hidden *{animation-play-state:paused!important}.paused .activity-bubble{animation:none}button:disabled{opacity:.55;cursor:wait}
@media(min-width:700px){.office-app{padding-top:36px}.scene{border-radius:25px}.topbar{margin-bottom:26px}.status-panel{padding-top:27px}h2{font-size:26px}.activity-bubble{font-size:14px}.scene-top,.scene-caption{font-size:14px}.workstation{width:46%;left:27%}}
@media(max-width:360px){.office-app{padding-left:13px;padding-right:13px}h1{font-size:24px}.scene-top{left:9px;right:9px;top:9px}.actions{flex-direction:column}.activity-bubble{font-size:11px}}
.agent-sprite::after{content:"";position:absolute;inset:0;background-image:inherit;background-size:inherit;background-position:inherit;image-rendering:pixelated;pointer-events:none;opacity:0}.paused *::after,.paused *::before,.page-hidden *::after,.page-hidden *::before{animation-play-state:paused!important}
body[data-mode="working"] .agent-sprite{animation:none}body[data-mode="working"] .agent-sprite::after{opacity:1;clip-path:polygon(43% 32%,77% 32%,77% 49%,43% 49%);animation:typing .24s steps(2,end) infinite}
body[data-mode="documents"] .agent-sprite{animation:none}body[data-mode="documents"] .agent-sprite::after{opacity:1;clip-path:polygon(47% 30%,77% 30%,77% 55%,47% 55%);animation:reading 1.5s ease-in-out infinite}
body[data-mode="idle"] .agent-sprite{animation:none}body[data-mode="idle"] .agent-sprite::after{opacity:1;clip-path:polygon(53% 2%,94% 2%,94% 43%,53% 43%);animation:breathing 4s ease-in-out infinite}
/* Lighting affects artwork only: status and controls retain their contrast. */
.room{filter:var(--room-filter,none);transition:filter 20s ease}
.window-light{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated;clip-path:polygon(18.6% 16.5%,35.9% 16.5%,35.9% 37.8%,18.6% 37.8%);filter:var(--window-filter,none);pointer-events:none;transition:filter 20s ease}
.room-light{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 51% 65%,#ffcc805e 0%,#f1bb5d20 22%,transparent 52%);opacity:var(--lamp-opacity,0);transition:opacity 20s ease}
.workstation{z-index:1}.scene-top,.scene-caption,.activity-bubble{z-index:2}
body[data-period="morning"]{--room-filter:brightness(1.06) saturate(.88);--window-filter:brightness(1.12) saturate(.75);--lamp-opacity:0}
body[data-period="day"]{--room-filter:brightness(1.17) saturate(.84);--window-filter:brightness(1.2) saturate(.6);--lamp-opacity:0}
body[data-period="evening"]{--room-filter:brightness(.78) sepia(.2) saturate(1.15);--window-filter:brightness(.85) sepia(.55) saturate(1.9);--lamp-opacity:.5}
body[data-period="night"]{--room-filter:brightness(.38) saturate(.55);--window-filter:brightness(.16) sepia(1) hue-rotate(160deg) saturate(1.8);--lamp-opacity:1}
body:not([data-period]) .room,body:not([data-period]) .window-light{transition:none}
.paused .room,.paused .window-light,.paused .room-light{transition:none}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}