#office .office-toolbar, #office .office-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px; background:var(--surface); }
#office .office-stage { border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
#office .office-toolbar { border-bottom:1px solid var(--line); }
#office .office-toolbar > div { display:flex; gap:8px; }
#office .office-preview, #office .office-progress { font:11px var(--font-mono); letter-spacing:.08em; color:var(--accent); }
#office button { display:inline-flex; align-items:center; gap:9px; border:1px solid var(--line); border-radius:6px; padding:10px 12px; min-height:44px; background:var(--bg); color:var(--text); cursor:pointer; }
#office button:hover { border-color:var(--accent); }
#office button:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; }

/* The map: the concept figure's office, drawn 1:1 in its own coordinates. */
#office .office-floor { background:#12151A; padding:16px; }
#office .office-map { display:block; width:100%; height:auto; overflow:visible; font-family:"Cascadia Mono",Consolas,ui-monospace,monospace; }
#office .office-map .wall { fill:#273038; stroke:#4b5963; stroke-width:2; }
#office .office-map .room-label { font-size:10px; font-weight:700; letter-spacing:.06em; fill:#E6EBF0; }
#office .office-map .map-micro { font-size:10px; fill:#858F9D; }
#office .office-map .map-small { font-size:12px; fill:#B8C0CB; }
#office .office-map .map-name { font-size:10px; font-weight:700; fill:#F1F4F8; font-family:"Segoe UI",system-ui,sans-serif; }
#office .office-map .path { fill:none; stroke:#087F8C; stroke-width:4; stroke-dasharray:10 7; }
#office .office-map .route-node { fill:#F7F9FC; stroke:#087F8C; stroke-width:3; }

/* Members: an original 16x32 sprite anchored at the feet, a state ring, and
   a name tag; movement is one transition per story beat, walking bob only
   while on a route. */
#office .office-avatar { transition:transform 1.3s linear; --member:#2BC9D8; }
#office .office-avatar.member-instant { transition:none; }
#office .office-avatar .office-ring { fill:none; stroke:var(--member); stroke-width:2; opacity:.8; }
#office .office-avatar .office-tag { fill:#12151A; stroke:var(--member); }
#office .office-avatar .office-body { transform-origin:0 0; }
#office .office-avatar.member-moving .office-body { animation:office-walk .5s steps(2) infinite; }
@keyframes office-walk { from { transform:translateY(0); } to { transform:translateY(-3px); } }
#office .office-avatar[data-state="retired"] { opacity:0; transition:transform 1.3s linear, opacity .8s ease 1.3s; }
#office .office-avatar[data-state="waiting"] .office-ring { animation:office-blink 1.2s ease-in-out infinite; }
@keyframes office-blink { 50% { opacity:.25; } }
#office .office-avatar.member-selected .office-ring { stroke-width:4; }

/* Roster: one card per member, as in the concept's bottom roster. */
#office .office-roster { border-top:1px solid var(--line); padding:18px 22px 22px; }
#office .office-roster-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:14px; }
#office .office-roster h3 { margin:0; font:700 11px var(--font-mono); letter-spacing:.14em; color:var(--text); }
#office .office-roster-hint { font:11px var(--font-mono); color:var(--muted); }
#office .office-members { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; }
#office .office-members button { width:100%; text-align:left; align-items:flex-start; padding:12px; gap:10px; --member:#2BC9D8; }
#office .office-members button[aria-pressed="true"] { border-color:#6EA8FE; background:#161d29; }
#office .office-face { width:32px; height:64px; flex:0 0 auto; overflow:visible; }
#office .office-members button > span { display:grid; gap:4px; min-width:0; }
#office .office-members strong { display:flex; justify-content:space-between; align-items:center; gap:6px; font-size:14px; }
#office .office-members strong em { display:inline-flex; align-items:center; gap:4px; font:400 10px var(--font-mono); font-style:normal; color:var(--muted); white-space:nowrap; }
#office .office-members strong em i { width:7px; height:7px; border-radius:50%; background:var(--member); }
#office .office-member-role { color:var(--muted); font-size:11px; }
#office .office-member-task { color:var(--text); font:12px var(--font-mono); line-height:1.4; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#office .office-member-bar { display:block; height:4px; border-radius:2px; background:#2a323d; overflow:hidden; }
#office .office-member-bar i { display:block; height:100%; width:66%; background:var(--member); }
#office .office-empty { color:var(--muted); font-size:12px; margin:0; }
#office .office-footer { border-top:1px solid var(--line); }
#office .office-announcement { color:var(--muted); font:12px var(--font-mono); margin:0; }
@media(max-width:1050px) { #office .office-members { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:620px) { #office .office-toolbar { align-items:flex-start; flex-direction:column; padding:16px; } #office .office-floor { padding:4px; } #office .office-members { grid-template-columns:repeat(2,minmax(0,1fr)); } #office .office-footer { padding:16px; } #office .office-preview { font-size:10px; } }
@media(prefers-reduced-motion:reduce) { #office .office-avatar, #office .office-avatar[data-state="retired"] { transition:none; } #office .office-avatar .office-body, #office .office-avatar .office-ring { animation:none; } }