*{box-sizing:border-box}body,html{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:Arial,Helvetica,sans-serif;background:#e5e8e7;color:#fff}button{font:inherit}.office,.viewport{position:absolute;inset:0}.viewport canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}.viewport canvas:focus-visible{outline:2px solid #fff;outline-offset:-4px}.office-header{position:absolute;top:max(24px,env(safe-area-inset-top));left:28px;display:flex;flex-direction:column;gap:6px;pointer-events:none;text-shadow:0 1px 10px #0009}.brand{font-size:12px;letter-spacing:.18em;font-weight:700}.room-label{font-size:11px;opacity:.75}.loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;background:#1d2528}.loading p{font-size:14px;color:#d5ddde;margin:0;padding:0 24px;text-align:center}.spinner{width:24px;height:24px;border:2px solid #ffffff30;border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}.controls{position:absolute;bottom:max(24px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:28px;white-space:nowrap;background:#20292de6;border:1px solid #ffffff26;border-radius:12px;padding:8px 10px 8px 18px;box-shadow:0 4px 24px #0002;font-size:12px}.controls>span{color:#e1e5e7}.keyboard-hint{color:#9da9b0}button{border:1px solid #ffffff30;color:#fff;background:#ffffff10;border-radius:7px;padding:10px 12px;cursor:pointer}button:hover{background:#ffffff25}button:focus-visible{outline:2px solid white;outline-offset:3px}button span{margin-left:12px;font-size:16px}@keyframes spin{to{transform:rotate(1turn)}}@media (max-width:600px){.keyboard-hint{display:none}.controls{gap:16px;bottom:max(16px,env(safe-area-inset-bottom))}.office-header{left:20px}}@media (prefers-reduced-motion:reduce){.spinner{animation:none}}