.office-demo-section,.office-stage{position:relative}.office-stage{width:100%;aspect-ratio:16/10;border-radius:1rem;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:#e9e4db}@media (max-width:767px){.office-stage{aspect-ratio:4/5}}.office-poster{-o-object-fit:cover;object-fit:cover}.office-canvas-wrap,.office-poster{position:absolute;inset:0;width:100%;height:100%}.office-canvas-wrap canvas{display:block;width:100%!important;height:100%!important}.office-fps{position:absolute;top:.5rem;right:.75rem;z-index:2;font-family:var(--font-mono,ui-monospace,monospace);font-size:.7rem;color:rgba(201,184,255,.9);background:rgba(0,0,0,.4);padding:.15rem .5rem;border-radius:.5rem;pointer-events:none}.office-card{top:.75rem;left:50%;transform:translateX(-50%);max-width:85%;text-align:center;font-size:.8rem;background:rgba(14,18,30,.82);border:1px solid rgba(124,92,255,.35);padding:.4rem .9rem;border-radius:999px;backdrop-filter:blur(6px);animation:office-fade .4s ease}.office-balloon,.office-card{position:absolute;z-index:3;color:#fff}.office-balloon{top:0;left:0;max-width:180px;font-size:.72rem;line-height:1.25;background:rgba(14,18,30,.9);border:1px solid rgba(255,255,255,.14);padding:.35rem .6rem;border-radius:.6rem;pointer-events:none;transition:opacity .25s ease;will-change:transform}.office-balloon:after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;background:inherit;border-right:inherit;border-bottom:inherit;transform:translateX(-50%) rotate(45deg)}.office-balloon-role{display:block;font-family:var(--font-mono,ui-monospace,monospace);font-size:.58rem;text-transform:uppercase;letter-spacing:.05em;color:rgba(201,184,255,.95);margin-bottom:.1rem}.office-hover{top:0;left:0;font-family:var(--font-mono,ui-monospace,monospace);font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;background:rgba(124,92,255,.9);padding:.2rem .55rem;border-radius:999px;pointer-events:none;transition:opacity .2s ease;will-change:transform}.office-control,.office-hover{position:absolute;z-index:4;color:#fff}.office-control{top:.75rem;right:.75rem;font-size:.72rem;font-weight:600;background:rgba(14,18,30,.8);border:1px solid rgba(255,255,255,.16);padding:.35rem .75rem;border-radius:999px;cursor:pointer;transition:background .2s ease,border-color .2s ease;min-height:2rem}.office-control:hover{background:rgba(124,92,255,.35)}.office-control:focus-visible{outline:2px solid #7c5cff;outline-offset:2px}.office-command{position:absolute;bottom:.75rem;left:50%;transform:translateX(-50%);z-index:4;display:flex;gap:.4rem;width:min(80%,26rem)}.office-command input{flex:1;min-width:0;font-size:.78rem;color:#fff;background:rgba(14,18,30,.85);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:.4rem .9rem;outline:none}.office-command input:focus-visible{border-color:#7c5cff;box-shadow:0 0 0 2px rgba(124,92,255,.35)}.office-command input::-moz-placeholder{color:rgba(201,207,221,.6)}.office-command input::placeholder{color:rgba(201,207,221,.6)}.office-command button{flex-shrink:0;font-size:.78rem;font-weight:600;color:#fff;background:#7c5cff;border:none;border-radius:999px;padding:.4rem .9rem;cursor:pointer}.office-command button:hover{background:#8d70ff}@keyframes office-fade{0%{opacity:0;transform:translateX(-50%) translateY(-4px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}.office-badge{top:.75rem;left:.75rem;z-index:2;font-family:var(--font-mono,ui-monospace,monospace);font-size:.65rem;text-transform:uppercase;letter-spacing:.06em;color:rgba(201,184,255,.9);background:rgba(0,0,0,.45);padding:.2rem .6rem;border-radius:999px;border:1px solid rgba(255,255,255,.12)}.office-badge,.office-loading{position:absolute;pointer-events:none}.office-loading{inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;background:rgba(17,19,26,.55);backdrop-filter:blur(2px);color:#e8ecf5;font-size:.85rem;letter-spacing:.02em;z-index:5}.office-loading-spinner{width:30px;height:30px;border-radius:50%;border:3px solid rgba(255,255,255,.18);border-top-color:rgba(173,150,255,.95);animation:office-spin .8s linear infinite}@keyframes office-spin{to{transform:rotate(1turn)}}@media (prefers-reduced-motion:reduce){.office-loading-spinner{animation-duration:2s}}