/* Pixel Agents office decor: floor, wall, corridors and an office scene with the 24-character cast. */
html.od body::before{content:none}
html.od body:not(.lg){background:linear-gradient(rgb(255 255 255/.18),rgb(255 255 255/.28)),url('/img/office-decor/floor-oak.png') 0 0/88px 88px!important;background-attachment:fixed!important}
html.od body.lg{background:linear-gradient(rgb(255 255 255/.86),rgb(255 255 255/.9)),url('/img/office-decor/floor-oak.png') 0 0/48px 48px!important;background-attachment:fixed!important}
html.od body:not(.lg) :is(.hero,.page-hero,.enterprise-page,.enterprise-hero){background:transparent!important}
.od-px{position:absolute;display:block;width:calc(var(--w)*var(--s)*1px);height:calc(var(--h)*var(--s)*1px);image-rendering:pixelated;pointer-events:none;user-select:none}
img.od-px{max-width:none}
.od-char{position:absolute;bottom:0;left:0;width:calc(16*var(--s)*1px);height:calc(32*var(--s)*1px);background:var(--sheet) 0 0/calc(112*var(--s)*1px) calc(96*var(--s)*1px) no-repeat;image-rendering:pixelated;transform-origin:50% 100%}
.od-char.idle{background-position:calc(-16*var(--s)*1px) 0}
.od-char.type{animation:od-type .5s steps(1) infinite}
.od-char.read{animation:od-read 1.6s steps(1) infinite}
.od-char.walk{background-position-y:calc(-64*var(--s)*1px);animation:od-walk .56s steps(1) infinite,od-face var(--dur,24s) steps(1) infinite var(--delay,0s)}
.od-walker{position:absolute;bottom:calc(var(--y,2)*var(--s)*1px);width:calc(16*var(--s)*1px);height:calc(32*var(--s)*1px);animation:od-pace var(--dur,24s) linear infinite var(--delay,0s);z-index:4}
.od-walker::after{content:'';position:absolute;left:15%;right:15%;bottom:calc(-1*var(--s)*1px);height:calc(3*var(--s)*1px);border-radius:50%;background:rgb(0 0 0/.22);z-index:-1}
@keyframes od-walk{0%{background-position-x:0}25%{background-position-x:calc(-16*var(--s)*1px)}50%{background-position-x:calc(-32*var(--s)*1px)}75%{background-position-x:calc(-16*var(--s)*1px)}}
@keyframes od-type{0%{background-position-x:calc(-48*var(--s)*1px)}50%{background-position-x:calc(-64*var(--s)*1px)}}
@keyframes od-read{0%{background-position-x:calc(-80*var(--s)*1px)}50%{background-position-x:calc(-96*var(--s)*1px)}}
@keyframes od-face{0%{transform:none}50%{transform:scaleX(-1)}}
@keyframes od-pace{0%{left:var(--from)}50%{left:var(--to)}100%{left:var(--from)}}

/* Office wall behind the floating navigation. */
.od-wall{--s:3;position:absolute;top:0;left:0;right:0;height:calc(34*var(--s)*1px);z-index:5;pointer-events:none;overflow:hidden;background:linear-gradient(#121826 0 calc(5*var(--s)*1px),#26314a calc(5*var(--s)*1px) calc(29*var(--s)*1px),#1a2234 calc(29*var(--s)*1px) calc(31*var(--s)*1px),#6b4a2e calc(31*var(--s)*1px))}
.od-wall::after{content:'';position:absolute;left:0;right:0;bottom:0;height:calc(3*var(--s)*1px);background:url('/img/office-decor/floor-wood.png') 0 0/calc(16*var(--s)*1px) calc(16*var(--s)*1px);image-rendering:pixelated}
/* Corridor strip between sections. */
.od-lane,.od-reception{--s:2;position:relative;width:min(1120px,calc(100% - 32px));height:calc(52*var(--s)*1px);margin:28px auto;pointer-events:none}
.od-reception{margin:4px auto 8px}
.od-reception::before{content:'';position:absolute;left:4%;right:4%;bottom:0;height:calc(18*var(--s)*1px);border-radius:22px;background:url('/img/office-decor/floor-wood.png') 0 0/calc(16*var(--s)*1px) calc(16*var(--s)*1px);image-rendering:pixelated;box-shadow:0 0 0 3px #000,0 0 0 6px #c0ff72}
.od-lane::before{content:'';position:absolute;left:0;right:0;bottom:0;height:calc(12*var(--s)*1px);border-radius:999px;background:var(--floor) 0 0/calc(16*var(--s)*1px) calc(16*var(--s)*1px);image-rendering:pixelated;box-shadow:inset 0 0 0 1px rgb(0 0 0/.08),0 10px 24px -16px rgb(0 0 0/.45)}
.od-lane .od-walker{--y:3}

/* Office scene above the footer. */
.od-scene{--s:3;position:relative;width:100%;height:calc(76*var(--s)*1px);margin-top:48px;overflow:hidden;pointer-events:none;background:linear-gradient(#121826 0 calc(4*var(--s)*1px),#26314a calc(4*var(--s)*1px) calc(30*var(--s)*1px),#1a2234 calc(30*var(--s)*1px) calc(32*var(--s)*1px),transparent calc(32*var(--s)*1px))}
.od-scene::before{content:'';position:absolute;left:0;right:0;top:calc(32*var(--s)*1px);bottom:0;background:url('/img/office-decor/floor-wood.png') 0 0/calc(16*var(--s)*1px) calc(16*var(--s)*1px);image-rendering:pixelated}
.od-scene .od-rug{position:absolute;top:calc(40*var(--s)*1px);bottom:calc(6*var(--s)*1px);background:url('/img/office-decor/floor-checker.png') 0 0/calc(16*var(--s)*1px) calc(16*var(--s)*1px);image-rendering:pixelated;box-shadow:0 0 0 calc(var(--s)*1px) rgb(0 0 0/.25)}
.od-scene .od-carpet{position:absolute;top:calc(40*var(--s)*1px);bottom:calc(6*var(--s)*1px);background:url('/img/office-decor/floor-carpet.png') 0 0/calc(16*var(--s)*1px) calc(16*var(--s)*1px);image-rendering:pixelated;box-shadow:0 0 0 calc(var(--s)*1px) rgb(0 0 0/.25)}
.od-scene .od-sign{position:absolute;top:calc(10*var(--s)*1px);left:50%;transform:translateX(-50%);padding:6px 14px;border-radius:999px;background:#000;color:#c0ff72;font:800 12px/1.2 Manrope,system-ui,sans-serif;letter-spacing:.08em;white-space:nowrap;box-shadow:0 0 0 2px #c0ff72;z-index:3}
.od-scene .od-sign::before{content:'';display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:#c0ff72;animation:od-blink 1.4s ease-in-out infinite}
@keyframes od-blink{50%{opacity:.25}}
@media(max-width:700px){.od-wall,.od-scene,.od-reception{--s:2}.od-scene [data-wide],.od-reception [data-wide],.od-lane [data-wide]{display:none}.od-lane{--s:2}}
@media(prefers-reduced-motion:reduce){.od-char,.od-walker,.od-scene .od-sign::before{animation:none!important}.od-walker{left:var(--from)!important}.od-char.walk{background-position:0 0}}
@media print{.od-wall,.od-lane,.od-scene{display:none}html.od body::before{display:none}}