/* Realistic office plates + live, editable props. No external runtime dependencies. */
.office-screen{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;color:var(--ink)}
.office-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:66px;padding:10px 26px;border-bottom:1px solid var(--line)}
.office-topbar h2{font-size:13px;font-weight:500;color:var(--text-muted);margin:0}
.office-topbar h2:focus{outline:none}
.office-stage{position:relative;isolation:isolate;overflow:hidden;min-height:180px;background:#263333}
.office-world,.pov-world{position:relative;width:100%;aspect-ratio:1672/941;transform-origin:50% 50%;will-change:transform,opacity}
/* The invitation is always a full establishing shot, never a retained camera close-up. */
.office-stage[data-camera-state=ready] .office-world{transform:none!important;translate:none!important;scale:none!important;opacity:1!important}
.office-plate{width:100%;height:100%;object-fit:fill;display:block;user-select:none;pointer-events:none}
.office-speech{position:absolute;z-index:9;left:32%;top:3%;width:40%;padding:18px 23px;background:#fffffff5;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-card)}
.office-speech:after{content:'';position:absolute;left:-11px;bottom:21px;width:20px;height:20px;background:var(--surface);border-left:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg)}
.office-speech .speech-lead{font-size:clamp(16px,1.6vw,22px);color:#a45e21}
.office-speech .speech-line{font-size:clamp(14px,1.35vw,19px);line-height:1.45}
.office-speech .speech-speaker{margin-bottom:7px}
.office-screen[data-mode=debrief] .office-speech{background:#fff}
.office-screen[data-mode=debrief] .office-actions button{min-height:44px}
.office-screen[data-mode=debrief] .speech-speaker,.office-screen[data-mode=debrief] .office-topbar h2,
.office-screen[data-mode=debrief] .office-footer>p,.office-screen[data-mode=debrief] .scene-replay,
.office-screen[data-mode=debrief] .scene-motion-button{color:var(--text-muted)}
.wall-clock{position:absolute;aspect-ratio:1;transform:perspective(650px) rotateY(39deg) rotateZ(7deg);transform-origin:50% 50%;filter:drop-shadow(-2px 3px 2px #352f263d);color:#34494e;z-index:1}
.wall-clock>img{position:absolute;inset:0;width:100%;height:100%}
.wall-clock svg{position:relative}
.wall-clock .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.office-person{position:absolute;pointer-events:none;will-change:left,top,transform}
.office-person canvas{display:block;width:100%;height:100%}
/* Contact shadows track the soles within each transparent sprite cell.
   They share the actor's positioning so rotation/resizing cannot detach them. */
.office-person::before,.office-person::after{content:'';position:absolute;pointer-events:none;height:3%;background:radial-gradient(ellipse,#30271dcc 0%,#30271c70 33%,#30271c00 72%);transform:rotate(-5deg)}
.office-person canvas{position:relative}
/* Contact under the palm of the observing sprite (right 768×1024 cell).
   Kept inside the actor so the contact follows the same scale and camera transform. */
.office-palm-shadow{display:none;position:absolute;left:74%;top:54.7%;width:15.5%;height:1.1%;border-radius:50%;background:radial-gradient(ellipse,#49301c8c 0%,#49301c4d 38%,#49301c00 74%);transform:rotate(3deg);pointer-events:none}
.office-stage:is([data-actors-state=seated-preview],[data-actors-state=camera]) .office-palm-shadow{display:block}
.office-mentor-layer::before{left:28%;top:94.5%;width:18%}
.office-mentor-layer::after{left:51%;top:94%;width:26%}
.office-stage:is([data-actors-state=seated-preview],[data-actors-state=camera]) .office-mentor-layer::before{left:20%;width:18%}
.office-stage:is([data-actors-state=seated-preview],[data-actors-state=camera]) .office-mentor-layer::after{left:48%;width:27%}
.office-worker-layer::before{left:25%;top:91.5%;width:34%}
.office-worker-layer::after{left:62%;top:93.5%;width:24%}
.office-worker-layer{z-index:3}
.wide-mug-brand{z-index:7}
.office-mentor-layer{z-index:5}
.office-chair-layer,.office-seated-worker-layer{position:absolute;z-index:6;object-fit:contain;pointer-events:none}
/* Visitor-side chair and seated worker must cover the desk, not disappear behind it. */
.office-seated-worker-layer{filter:drop-shadow(2px 5px 3px #17232820)}
.desk-occlusion{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;clip-path:polygon(26.4% 51%,45% 48.5%,73.5% 52.5%,73.5% 57%,66% 62%,66% 94%,62.5% 94%,62.5% 64%,45% 81%,27.5% 82%,27.5% 58%)}

.wall-clock svg{display:block;width:100%;height:auto}

.mug-brand{position:absolute;display:grid;place-items:center;pointer-events:none;overflow:hidden;color:var(--brand-hover);transform:rotate(-2deg);mix-blend-mode:multiply;container-type:inline-size}
.mug-logo{width:100%;height:100%;object-fit:contain}
.mug-monogram{font:bold clamp(4px,.65vw,10px)/1 Arial,sans-serif;font-size:58cqw;letter-spacing:-.05em}
.office-monitor{position:absolute;z-index:6;display:grid;place-items:center;background:linear-gradient(145deg,#17343c,#0c171c);padding:0;color:#bddfe4;clip-path:polygon(4% 0,100% 1%,96% 100%,0 96%);cursor:pointer;border:0;transition:filter .2s}
.office-monitor:enabled:hover{filter:brightness(1.5)}
.office-monitor:focus-visible{outline:5px solid #f9c84e;outline-offset:-6px}
.monitor-idle{font-size:clamp(5px,.65vw,10px);letter-spacing:.06em}
.monitor-idle>span{display:block;font-size:clamp(12px,2vw,26px);margin-bottom:6px}
.monitor-hand{position:absolute;left:57%;top:44%;z-index:6;display:flex;align-items:center;gap:7px;pointer-events:none;animation:hand-arrive .6s ease-out both,hand-tap 1.7s .6s ease-in-out infinite}
.monitor-hand svg{width:clamp(28px,4vw,55px);height:auto;filter:drop-shadow(1px 3px 3px #0004);transform:rotate(-30deg)}
.monitor-hand>span{background:#ffffffef;box-shadow:var(--shadow-card);padding:8px 11px;border-radius:20px;font-size:clamp(12px,.9vw,12px);color:var(--ink);white-space:nowrap}
.office-loading{padding:100px 25px;text-align:center;color:#e4eef1;font-size:14px}
.office-retry{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:7}
.office-world.is-transition-out{position:absolute;inset:0}
.pov-world.is-transition{position:relative;z-index:8}
.pov-display{position:absolute;overflow:hidden;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);background:#12232b}
.camera-feed{width:100%;height:100%;position:relative;overflow:hidden;background:#142c35;color:#e9f8fb;font-family:monospace}
.site-camera-image{display:block;width:100%;height:100%;object-fit:cover;animation:site-drift 24s ease-in-out infinite alternate;filter:saturate(.8) contrast(.95)}
.camera-feed:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(transparent 0 3px,#13334309 3px 4px);pointer-events:none}
.camera-label{position:absolute;left:3%;top:5%;font-size:clamp(6px,1.2vw,17px);letter-spacing:.06em;text-shadow:0 1px 3px #000}
.camera-label>span:last-child{margin-left:8px;border:1px solid #ffffff90;border-radius:3px;padding:2px 5px;font-size:.75em}
.camera-dot{display:inline-block;background:#9cdebf;width:6px;height:6px;border-radius:50%;margin-right:5px;vertical-align:middle}
.camera-time{position:absolute;right:3%;top:5%;font-size:clamp(6px,1vw,14px);text-shadow:0 1px 3px #000}
.camera-bottom-label{position:absolute;left:3%;bottom:5%;font-size:clamp(5px,.9vw,13px);text-shadow:0 1px 3px #000}
.camera-full{position:absolute;inset:0;z-index:10;background:#152b34}
.skip-camera{position:absolute;right:18px;bottom:16px;z-index:12;border:1px solid var(--line);background:#fffffff2;color:var(--brand-hover);border-radius:30px;padding:12px 18px;min-height:44px;font-size:12px}
.office-footer{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;padding:15px 25px;background:var(--surface)}
.office-footer>p{font-size:12px;line-height:1.5;max-width:530px;color:var(--text-muted);margin:0}
.office-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;flex-shrink:0;max-width:100%}
.office-actions button{min-height:44px}
.office-actions .primary-button,.office-actions .secondary-button{font-size:12px;padding:12px 18px}
.office-paused .site-camera-image,.office-paused .monitor-hand{animation-play-state:paused}
.office-stage[data-enlarged=true] .pov-world{transform:scale(2.08);transform-origin:50% 40%}
.office-stage[data-enlarged=true] .pov-mug-brand{visibility:hidden}
.learner-view .office-screen{min-height:100svh;border-radius:0}
@keyframes hand-arrive{from{opacity:0;transform:translate(35px,25px) scale(.7)}to{opacity:1;transform:translate(0) scale(1)}}
@keyframes hand-tap{0%,100%{opacity:1;transform:translate(0)}50%{opacity:.45;transform:translate(-5px,-7px)}}
@keyframes site-drift{from{transform:scale(1.015) translateX(-.2%)}to{transform:scale(1.04) translateX(.4%)}}
@media(max-width:700px) and (orientation:portrait){
  .office-topbar{padding:10px 15px;gap:8px;flex-wrap:wrap}
  .office-topbar h2{order:3;width:100%;font-size:11px}
  .office-topbar .intro-back{font-size:11px}
  .office-topbar .scene-motion-button{font-size:10px;padding:6px 0}
  .office-speech{position:relative;left:auto;top:auto;width:auto;margin:16px 16px 21px;padding:16px 18px;border-radius:14px}
  .office-speech:after{left:20%;bottom:-11px;transform:rotate(-45deg)}
  .office-speech .speech-line{font-size:16px;line-height:1.55}
  .office-speech .speech-lead{font-size:18px}
  .office-stage:has(.office-speech:not([hidden])){background:#edf2ef}
  .office-monitor{min-width:44px;min-height:44px}
  .monitor-hand>span{display:none}
  .monitor-hand svg{width:32px}
  .office-footer{padding:16px;display:block}
  .office-footer>p{font-size:12px;margin-bottom:12px}
  .office-actions{gap:8px;justify-content:space-between;flex-wrap:wrap}
  .office-actions .primary-button,.office-actions .secondary-button{padding:12px;font-size:11px}
  .pov-world{min-height:260px;aspect-ratio:1672/941}
  .pov-world .office-plate{object-fit:fill}
  .camera-label{font-size:8px}.camera-time{font-size:7px}
  .office-stage[data-camera-state=moving] .office-world{margin-top:0}
}
@media(max-height:600px) and (orientation:landscape){
 .office-topbar{min-height:48px;padding:5px 18px}
 .office-speech{padding:10px 15px;top:2%;width:42%;left:30%}
 .office-speech .speech-lead{font-size:15px}.office-speech .speech-line{font-size:13px}
 .office-speech .speech-speaker{font-size:8px;margin-bottom:4px}
 .office-footer{padding:10px 18px}
 .office-footer>p{font-size:10px}
 .office-actions{gap:5px}.office-actions .primary-button,.office-actions .secondary-button{font-size:10px;padding:9px 12px}
}
@media(prefers-reduced-motion:reduce){.monitor-hand,.site-camera-image{animation:none!important}}
@media(min-width:900px) and (orientation:landscape) and (max-height:950px){
  .office-screen[data-mode=monitor] .office-stage{--office-fit-width:calc((100svh - 245px) * 1672 / 941);display:grid;justify-items:center;padding-inline:24px;background:#edf2ef}
  .office-screen[data-mode=monitor] .pov-world{max-width:var(--office-fit-width)}
  .learner-view .office-screen[data-mode=monitor] .office-stage{--office-fit-width:calc((100svh - 170px) * 1672 / 941)}
}
@media(min-width:900px) and (max-width:1200px) and (orientation:landscape) and (max-height:950px){
  .office-screen[data-mode=monitor] .office-stage{--office-fit-width:calc((100svh - 305px) * 1672 / 941)}
  .learner-view .office-screen[data-mode=monitor] .office-stage{--office-fit-width:calc((100svh - 230px) * 1672 / 941)}
}