/* Dopetzcom Admin — Jarvis Office 3D scene (outside world, building shell, camera)
 * Loaded after jarvis-office.css. Scene is 1000 x 860 px: sky and city on top (seen through the
 * glass wall), the 620 px office floor starting at y=170, a street in front.
 */

.jof-stage.o3-stage{
  overflow:hidden;border-radius:14px;perspective:900px;perspective-origin:50% 46%;
  background:#050a16;
}
.o3-sway{position:absolute;inset:0;transform-style:preserve-3d;animation:o3-sway 16s ease-in-out infinite}
.o3-cam{
  position:absolute;inset:0;transform-style:preserve-3d;transform-origin:50% 50%;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  /* time-of-day palette, day is the base */
  --sk1:#2f6fcf;--sk2:#7db6ec;--sk3:#d4ecfa;--bFar:rgba(104,136,172,.8);--bNear:#4b6685;--bTop:#6a86a6;
  --winOn:.1;--cloud:rgba(255,255,255,.88);--starOp:0;--sunOp:1;--moonOp:0;--sunX:22%;--sunY:46px;
  --hl:0;--glow:0;--tint:rgba(255,255,255,0);--ground:#27374e;
}
.o3-cam[data-tod="dawn"]{--sk1:#27346b;--sk2:#c26b7d;--sk3:#ffc59a;--bFar:rgba(88,86,134,.85);--bNear:#3a3e68;--bTop:#6b6b99;--winOn:.55;--cloud:rgba(255,205,185,.72);--starOp:.25;--sunX:14%;--sunY:112px;--hl:.5;--glow:.35;--ground:#212c42}
.o3-cam[data-tod="dusk"]{--sk1:#141a47;--sk2:#8b4a7b;--sk3:#ff9a62;--bFar:rgba(70,68,112,.88);--bNear:#2b2a4e;--bTop:#5a5890;--winOn:.85;--cloud:rgba(255,158,140,.58);--starOp:.4;--sunX:82%;--sunY:116px;--hl:.9;--glow:.7;--ground:#1d2740}
.o3-cam[data-tod="night"]{--sk1:#040918;--sk2:#0b1d44;--sk3:#1d4175;--bFar:rgba(26,42,76,.92);--bNear:#0d1932;--bTop:#2b4570;--winOn:1;--cloud:rgba(120,150,212,.2);--starOp:1;--sunOp:0;--moonOp:1;--hl:1;--glow:1;--ground:#101a2e}
@keyframes o3-sway{0%,100%{transform:rotateY(-1deg) rotateX(.35deg)}50%{transform:rotateY(1deg) rotateX(-.25deg)}}

.o3-layer{position:absolute;left:var(--ox,0px);top:0;width:1000px;height:100%;transform:translateZ(calc(var(--z) * 1px)) scale(calc(1 - var(--z) / 900));transform-origin:50% 50%;pointer-events:none}
.o3-layer.l-bld{pointer-events:none}
.o3-layer.l-bld .jof-floor{pointer-events:auto}

/* ---------- sky ---------- */
.o3-sky{position:absolute;left:calc(-260px - var(--ox,0px));right:calc(-260px - var(--ox,0px));top:-150px;height:340px;background:linear-gradient(180deg,var(--sk1) 0%,var(--sk2) 62%,var(--sk3) 100%);overflow:hidden}
.o3-stars i{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:#fff;opacity:calc(var(--starOp) * .9);animation:o3-tw var(--d) ease-in-out infinite}
@keyframes o3-tw{50%{opacity:calc(var(--starOp) * .25)}}
.o3-stars{position:absolute;inset:0;opacity:1}
.o3-sun{position:absolute;left:var(--sunX);top:calc(var(--sunY) + 150px);width:54px;height:54px;border-radius:50%;margin:-27px 0 0 -27px;opacity:var(--sunOp);
  background:radial-gradient(circle,#fff8d6 0 38%,#ffd966 62%,rgba(255,217,102,0) 72%);box-shadow:0 0 70px 26px rgba(255,214,120,.45)}
.o3-moon{position:absolute;left:76%;top:84px;width:34px;height:34px;border-radius:50%;opacity:var(--moonOp);
  background:radial-gradient(circle at 36% 34%,#fff 0 40%,#dbe6f5 70%,#b7c6dd);box-shadow:0 0 36px 10px rgba(190,215,255,.35)}
.o3-moon::after{content:"";position:absolute;left:9px;top:10px;width:7px;height:7px;border-radius:50%;background:rgba(150,170,200,.35);box-shadow:12px 6px 0 -1px rgba(150,170,200,.3),4px 14px 0 -2px rgba(150,170,200,.3)}
.o3-cloud{position:absolute;width:150px;height:30px;border-radius:30px;background:var(--cloud);filter:blur(.6px);animation:o3-cloud var(--cd,120s) linear infinite;animation-delay:var(--cl,0s)}
.o3-cloud::before,.o3-cloud::after{content:"";position:absolute;background:inherit;border-radius:50%}
.o3-cloud::before{left:24px;top:-16px;width:56px;height:44px}
.o3-cloud::after{left:70px;top:-22px;width:64px;height:50px}
.o3-cloud.c1{top:170px;--cd:150s;--cl:-40s;transform:scale(1.1)}
.o3-cloud.c2{top:128px;--cd:190s;--cl:-120s;transform:scale(.7);opacity:.85}
.o3-cloud.c3{top:206px;--cd:130s;--cl:-90s;transform:scale(1.4);opacity:.7}
.o3-cloud.c4{top:96px;--cd:220s;--cl:-10s;transform:scale(.55);opacity:.9}
@keyframes o3-cloud{from{left:calc(-260px - var(--ox,0px))}to{left:calc(1260px + var(--ox,0px))}}

.o3-fly{position:absolute;pointer-events:none}
.o3-fly svg{display:block;width:100%;height:auto}
.o3-fly.plane{top:196px;width:112px;animation:o3-plane 52s linear infinite;animation-delay:-8s}
.o3-trail{position:absolute;right:92%;top:46%;width:230px;height:3px;background:linear-gradient(270deg,rgba(255,255,255,.7),rgba(255,255,255,0));border-radius:3px;filter:blur(.6px)}
@keyframes o3-plane{0%{left:-420px;top:206px}58%{left:1380px;top:170px}100%{left:1380px;top:170px}}
.o3-fly.heli{top:224px;width:84px;animation:o3-heli 70s ease-in-out infinite;animation-delay:-30s}
@keyframes o3-heli{0%{left:1350px;top:236px}22%{left:820px;top:214px}30%{left:790px;top:220px}46%{left:420px;top:240px}54%{left:410px;top:236px}100%{left:-300px;top:226px}}
.o3-rotor{transform-box:fill-box;transform-origin:center;animation:o3-rot .09s linear infinite}
@keyframes o3-rot{50%{transform:scaleX(.55)}}
.o3-tail{transform-box:fill-box;transform-origin:center;animation:o3-spinx .1s linear infinite}
@keyframes o3-spinx{50%{transform:scaleY(.4)}}
.o3-beam{position:absolute;left:8%;top:70%;width:120px;height:130px;background:linear-gradient(180deg,rgba(255,244,190,.6),rgba(255,244,190,0));clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);opacity:var(--glow);transform-origin:50% 0;transform:rotate(14deg)}
.o3-fly.balloon{top:224px;width:30px;animation:o3-balloon 150s ease-in-out infinite;animation-delay:-60s}
@keyframes o3-balloon{0%{left:-80px;top:250px}50%{left:560px;top:206px}100%{left:1160px;top:246px}}
.o3-fly.drone{top:250px;width:24px;animation:o3-drone 22s ease-in-out infinite}
@keyframes o3-drone{0%,100%{left:760px;top:262px}25%{left:820px;top:238px}50%{left:880px;top:268px}75%{left:800px;top:292px}}
.o3-flock{position:absolute;color:var(--bNear);width:140px;height:60px;animation:o3-flock var(--fd,34s) linear infinite}
.o3-flock svg{position:absolute;width:15px;height:auto}
.o3-flock svg:nth-child(1){left:0;top:10px}.o3-flock svg:nth-child(2){left:22px;top:0;animation-delay:.12s}.o3-flock svg:nth-child(3){left:40px;top:18px}.o3-flock svg:nth-child(4){left:64px;top:6px}
.o3-flock.f1{top:250px;--fd:38s;animation-delay:-4s}.o3-flock.f2{top:300px;--fd:52s;animation-delay:-26s;transform:scale(.8)}
@keyframes o3-flock{from{left:calc(-200px - var(--ox,0px))}to{left:calc(1260px + var(--ox,0px))}}
.o3-wing{transform-box:fill-box;transform-origin:center;animation:o3-flap .5s ease-in-out infinite}
@keyframes o3-flap{50%{transform:scaleY(.35)}}
.o3-blink{animation:o3-bl 1.1s steps(2) infinite}.o3-b2{animation-delay:.55s}
@keyframes o3-bl{50%{opacity:.1}}

/* ---------- skyline ---------- */
.o3-city{position:absolute;left:-30px;width:1060px;height:170px;top:-14px;overflow:visible}
.o3-city.far{filter:blur(.8px)}
.o3-city.far .b{fill:var(--bFar)}.o3-city.far .ant{fill:var(--bTop)}
.o3-city.near{top:-14px}
.o3-city.near .b{fill:var(--bNear)}.o3-city.near .ant{fill:var(--bTop)}
.o3-city .w{fill:#ffd27a;opacity:calc(var(--winOn) * var(--r))}
.o3-city.near .w{fill:#ffe3a0}
.o3-city.far .w{opacity:calc(var(--winOn) * var(--r) * .6)}
.l-city1 .o3-city{top:-30px}

/* ---------- construction site ---------- */
.o3-site{position:absolute;left:590px;top:-20px;width:400px;height:180px}
.o3-ground{position:absolute;left:calc(-10px - var(--ox,0px));right:calc(-30px - var(--ox,0px));bottom:0;height:7px;background:linear-gradient(#3b2f26,#241b15);border-top:1px solid #6b5642}
.o3-tower{position:absolute;left:44px;bottom:6px;width:132px;height:140px}
.o3-fl{position:absolute;left:0;width:132px;height:21px;transform-origin:50% 100%;animation-duration:84s;animation-iteration-count:infinite;animation-timing-function:linear}
.o3-fl s{position:absolute;left:-3px;right:-3px;top:0;height:4px;background:linear-gradient(#9ca3af,#6b7280);box-shadow:0 2px 0 rgba(0,0,0,.35)}
.o3-fl b{position:absolute;top:4px;width:4px;height:17px;background:linear-gradient(90deg,#7b8794,#52606d)}
.o3-fl b:nth-child(1){left:2px}.o3-fl b:nth-child(2){left:44px}.o3-fl b:nth-child(3){left:86px}.o3-fl b:nth-child(4){left:126px}
.o3-fl.f1{animation-name:o3-f1}.o3-fl.f2{animation-name:o3-f2}.o3-fl.f3{animation-name:o3-f3}.o3-fl.f4{animation-name:o3-f4}.o3-fl.f5{animation-name:o3-f5}.o3-fl.f6{animation-name:o3-f6}
@keyframes o3-f1{0%{transform:scaleY(0)}6%,92%{transform:scaleY(1)}98%,100%{transform:scaleY(0)}}
@keyframes o3-f2{0%,10%{transform:scaleY(0)}20%,92%{transform:scaleY(1)}98%,100%{transform:scaleY(0)}}
@keyframes o3-f3{0%,26%{transform:scaleY(0)}36%,92%{transform:scaleY(1)}98%,100%{transform:scaleY(0)}}
@keyframes o3-f4{0%,44%{transform:scaleY(0)}54%,92%{transform:scaleY(1)}98%,100%{transform:scaleY(0)}}
@keyframes o3-f5{0%,62%{transform:scaleY(0)}72%,92%{transform:scaleY(1)}98%,100%{transform:scaleY(0)}}
@keyframes o3-f6{0%,78%{transform:scaleY(0)}88%,92%{transform:scaleY(1)}98%,100%{transform:scaleY(0)}}
.o3-net{position:absolute;left:-6px;top:6px;bottom:0;width:11px;background:repeating-linear-gradient(135deg,rgba(250,204,21,.5) 0 2px,transparent 2px 6px),repeating-linear-gradient(45deg,rgba(250,204,21,.5) 0 2px,transparent 2px 6px);opacity:.75}
.o3-worker{position:absolute;width:9px;animation:o3-wk 5s ease-in-out infinite}
.o3-worker svg{width:100%;height:auto;display:block}
.o3-worker.w1{left:20px;bottom:90px}.o3-worker.w2{left:70px;bottom:48px;animation-duration:7s;animation-delay:-2s}
@keyframes o3-wk{0%,100%{transform:translateX(0)}50%{transform:translateX(30px)}}
.o3-legs{transform-box:fill-box;transform-origin:50% 0;animation:o3-step .5s ease-in-out infinite alternate}
@keyframes o3-step{from{transform:skewX(8deg)}to{transform:skewX(-8deg)}}
.o3-weld{position:absolute;left:94px;bottom:46px;width:4px;height:4px;background:#fff;border-radius:50%;box-shadow:0 0 8px 3px #7dd3fc,0 0 16px 6px rgba(125,211,252,.5);animation:o3-weld .35s steps(2) infinite}
@keyframes o3-weld{0%{opacity:1}50%{opacity:.15}}
.o3-crane{position:absolute;left:204px;bottom:6px;width:4px;height:160px}
.o3-mast{position:absolute;left:-4px;bottom:0;width:12px;height:150px;
  background:repeating-linear-gradient(135deg,transparent 0 4px,#d4a017 4px 6px),repeating-linear-gradient(45deg,transparent 0 4px,#d4a017 4px 6px);
  border-left:2px solid #f5c542;border-right:2px solid #f5c542}
.o3-cab{position:absolute;left:-9px;top:8px;width:22px;height:14px;background:linear-gradient(#f5c542,#c98f0a);border-radius:3px;border:1px solid #7a5400}
.o3-cab::after{content:"";position:absolute;left:4px;top:3px;width:10px;height:6px;background:#9fd4f5;border-radius:1px}
.o3-apex{position:absolute;left:-1px;top:-10px;width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-bottom:18px solid #d4a017}
.o3-beacon{position:absolute;left:-2px;top:-14px;width:6px;height:6px;border-radius:50%;background:#ff3b3b;box-shadow:0 0 10px 3px #ff3b3b;animation:o3-bc 1.4s steps(2) infinite}
@keyframes o3-bc{50%{opacity:.15;box-shadow:none}}
.o3-jib{position:absolute;left:-2px;top:18px;width:4px;height:0;transform-origin:2px 0;animation:o3-slew 26s ease-in-out infinite alternate}
@keyframes o3-slew{from{transform:scaleX(1)}to{transform:scaleX(.42)}}
.o3-jib-bar{position:absolute;right:2px;top:-5px;width:196px;height:9px;background:repeating-linear-gradient(135deg,transparent 0 4px,#d4a017 4px 6px),linear-gradient(#f5c542,#f5c542) top/100% 2px no-repeat,linear-gradient(#f5c542,#f5c542) bottom/100% 2px no-repeat}
.o3-counter{position:absolute;left:6px;top:-6px;width:48px;height:9px;background:repeating-linear-gradient(135deg,transparent 0 4px,#d4a017 4px 6px),linear-gradient(#f5c542,#f5c542) top/100% 2px no-repeat}
.o3-counter::after{content:"";position:absolute;left:30px;top:8px;width:16px;height:14px;background:linear-gradient(#6b7280,#374151)}
.o3-trolley{position:absolute;top:-2px;right:6px;width:8px;height:5px;background:#374151;animation:o3-troll 17s ease-in-out infinite alternate}
@keyframes o3-troll{from{transform:translateX(0)}to{transform:translateX(-120px)}}
.o3-cable{position:absolute;left:3px;top:4px;width:1px;height:60px;background:#222;transform-origin:50% 0;animation:o3-hook 12s ease-in-out infinite}
@keyframes o3-hook{0%,100%{height:30px}50%{height:80px}}
.o3-load{position:absolute;left:-10px;bottom:-7px;width:21px;height:7px;background:linear-gradient(#ef4444,#b91c1c);border-radius:1px;box-shadow:0 0 0 1px #5b1010}
.o3-fence{position:absolute;left:-4px;bottom:7px;width:230px;height:15px;background:repeating-linear-gradient(90deg,#f59e0b 0 14px,#1f2937 14px 28px);opacity:.92;border-top:2px solid #111;display:grid;place-items:center}
.o3-fence span{font:800 7.5px Arial,sans-serif;letter-spacing:.14em;color:#fff;background:#111827;padding:1px 6px;border-radius:2px}
.o3-truck{position:absolute;bottom:7px;width:74px;animation:o3-site-truck 46s linear infinite;animation-delay:-14s}
.o3-truck svg{display:block;width:100%;height:auto}
@keyframes o3-site-truck{0%{left:420px}40%{left:230px}55%{left:230px}100%{left:-120px;transform:scaleX(1)}}
.o3-drum{transform-box:fill-box;transform-origin:center;animation:o3-drumspin 3s linear infinite}
@keyframes o3-drumspin{from{transform:skewY(0)}50%{transform:skewY(2deg)}to{transform:skewY(0)}}

/* ---------- roads + vehicles ---------- */
.o3-farroad{position:absolute;left:calc(-120px - var(--ox,0px));right:calc(-120px - var(--ox,0px));top:152px;height:20px;background:linear-gradient(#2a3850,#161f2c);border-top:1px solid rgba(255,255,255,.12)}
.o3-lane{position:absolute;left:0;right:0;top:50%;height:2px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.65) 0 14px,transparent 14px 30px);opacity:.6;animation:o3-lane 1.2s linear infinite}
@keyframes o3-lane{to{background-position:30px 0}}
.o3-veh{position:absolute;left:0;animation:o3-drive var(--dur) linear infinite;animation-delay:var(--del)}
.o3-veh svg{display:block;width:100%;height:auto}
.o3-veh.rev{animation-name:o3-drive-rev}
.o3-veh.rev .o3-flip{transform:scaleX(-1)}
@keyframes o3-drive{from{transform:translateX(calc(-260px - var(--ox,0px)))}to{transform:translateX(calc(1260px + var(--ox,0px)))}}
@keyframes o3-drive-rev{from{transform:translateX(calc(1260px + var(--ox,0px)))}to{transform:translateX(calc(-260px - var(--ox,0px)))}}
.o3-wheel{transform-box:fill-box;transform-origin:center;animation:o3-spin .45s linear infinite}
@keyframes o3-spin{to{transform:rotate(360deg)}}
.o3-hl{opacity:calc(.5 + var(--hl) * .5);filter:drop-shadow(0 0 calc(var(--hl) * 5px) #fff2b0)}
.o3-veh{filter:drop-shadow(0 0 0 transparent)}
.o3-street .o3-veh{animation-timing-function:linear}
.o3-street .o3-veh svg{filter:drop-shadow(0 3px 2px rgba(0,0,0,.35))}
.o3-street .o3-veh:nth-of-type(3) .o3-flip,.o3-street .o3-veh:nth-of-type(5) .o3-flip{animation:o3-rider .6s ease-in-out infinite}
@keyframes o3-rider{50%{transform:translateY(-1.5px)}}
.o3-street .o3-veh.rev:nth-of-type(5) .o3-flip{transform:scaleX(-1)}

/* ---------- foreground street ---------- */
.o3-street{position:absolute;left:0;top:796px;width:1000px;height:56px;overflow:visible}
.o3-walk{position:absolute;left:-60px;right:-60px;top:0;height:10px;background:linear-gradient(#53627a,#34425a);border-top:2px solid rgba(255,255,255,.18)}
.o3-road{position:absolute;left:calc(-60px - var(--ox,0px));right:calc(-60px - var(--ox,0px));top:10px;bottom:0;background:linear-gradient(#232f43,#131b28)}
.o3-road .o3-lane{top:46%;height:3px;opacity:.55}
.o3-tree{position:absolute;top:-34px;width:34px;height:44px;margin-left:-17px}
.o3-tree::before{content:"";position:absolute;left:14px;top:26px;width:6px;height:18px;background:#5b3a22;border-radius:2px}
.o3-tree::after{content:"";position:absolute;left:0;top:0;width:34px;height:32px;border-radius:50%;background:radial-gradient(circle at 36% 32%,#4fd17a,#1f8a48 70%);box-shadow:inset -5px -6px 0 rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.2)}
.o3-lamp{position:absolute;top:-52px;width:3px;height:58px;margin-left:-1px;background:linear-gradient(#8b9bb0,#4b5a70)}
.o3-lamp::before{content:"";position:absolute;left:-9px;top:-4px;width:20px;height:5px;border-radius:3px;background:#cbd5e1}
.o3-lamp::after{content:"";position:absolute;left:-22px;top:-1px;width:46px;height:52px;background:radial-gradient(ellipse at 50% 0,rgba(255,225,150,calc(var(--glow) * .5)),rgba(255,225,150,0) 70%);clip-path:polygon(35% 0,65% 0,100% 100%,0 100%)}
.o3-ped{position:absolute;top:-30px;width:14px;animation:o3-ped var(--pd,34s) linear infinite}
.o3-ped svg{display:block;width:100%;height:auto}
.o3-ped.p1{--pd:36s;animation-delay:-5s}.o3-ped.p2{--pd:48s;animation-delay:-22s;animation-direction:reverse}.o3-ped.p3{--pd:30s;animation-delay:-14s}
@keyframes o3-ped{from{left:calc(-40px - var(--ox,0px))}to{left:calc(1040px + var(--ox,0px))}}

/* ---------- building shell ---------- */
.o3-roof{position:absolute;left:-14px;width:1028px;top:92px;height:12px;border-radius:3px 3px 0 0;background:linear-gradient(#34496a,#17243a);border-top:2px solid #7f9bc2;box-shadow:0 6px 18px rgba(0,0,0,.5)}
.o3-curtain{position:absolute;left:0;top:104px;width:1000px;height:66px}
.o3-glass{position:absolute;inset:0;background:linear-gradient(180deg,rgba(150,205,255,.16),rgba(90,160,235,.06) 70%,rgba(5,12,26,.35)),repeating-linear-gradient(115deg,rgba(255,255,255,0) 0 60px,rgba(255,255,255,.05) 60px 78px);box-shadow:inset 0 0 40px rgba(60,120,200,.15)}
.o3-glass i{position:absolute;top:0;bottom:0;width:4px;margin-left:-2px;background:linear-gradient(90deg,#9db3d1,#3c4f6b 60%,#9db3d1)}
.o3-glass::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:linear-gradient(#2a3b57,#0e1829)}
.o3-sign{position:absolute;left:50%;top:5px;transform:translateX(-50%);padding:3px 16px 4px;text-align:center;border-radius:6px;background:rgba(3,10,22,.78);border:1px solid rgba(94,234,212,.55);box-shadow:0 0 24px rgba(45,212,191,.35)}
.o3-sign b{display:block;font:900 15px Inter,Arial,sans-serif;letter-spacing:.42em;color:#5eead4;text-shadow:0 0 10px rgba(45,212,191,.9);padding-left:.42em}
.o3-sign small{display:block;font:700 7px Inter,Arial,sans-serif;letter-spacing:.22em;color:#9bbccd}
.o3-front{position:absolute;left:-10px;width:1020px;top:782px;height:14px;background:linear-gradient(#22344f,#0c1626);border-top:2px solid rgba(125,211,252,.5);box-shadow:0 -8px 20px rgba(0,0,0,.45)}
.o3-door{position:absolute;left:44%;top:-1px;width:56px;height:14px;background:linear-gradient(rgba(125,211,252,.35),rgba(125,211,252,.1));border:1px solid rgba(190,230,255,.6);border-bottom:0}
.o3-door.d2{left:calc(44% + 58px)}
.o3-vignette{position:absolute;inset:0;pointer-events:none;border-radius:14px;box-shadow:inset 0 0 60px rgba(0,0,0,.55);background:linear-gradient(180deg,rgba(0,0,0,.18),transparent 22%,transparent 80%,rgba(0,0,0,.22))}

.jof-floor{position:absolute;left:0;width:1000px;height:620px;font-family:Inter,system-ui,sans-serif;color:#d7f6ff;user-select:none;transform-origin:0 0}

@media (prefers-reduced-motion:reduce){
  .o3-sway,.o3-cloud,.o3-fly,.o3-flock,.o3-veh,.o3-ped,.o3-fl,.o3-jib,.o3-trolley,.o3-cable,.o3-truck,.o3-worker,.o3-wheel,.o3-lane,.o3-rotor,.o3-wing{animation:none!important}
}
/* nothing is drawn or animated while the Jarvis window is closed */
#aiModal:not(.open):not(.is-open) .o3-stage *{animation-play-state:paused!important}

/* =====================================================================
 *  INTERIOR  (rooms, desks, computers, props, meeting room, people)
 *  Prefixed with #jofStage so it wins over the flat 2D rules in jarvis-office.css
 * ===================================================================== */
#jofStage .jof-floor{pointer-events:auto}
#jofStage .jof-room{background:none;border:0;box-shadow:none;filter:none;border-radius:0;overflow:visible;pointer-events:none}
#jofStage .jof-room > *{pointer-events:auto}
#jofStage .jof-room.is-empty,#jofStage .jof-room.is-working{box-shadow:none;filter:none}

.o3r-floor{position:absolute;inset:0;border-radius:5px;pointer-events:none!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 10%,#22344f),color-mix(in srgb,var(--c) 6%,#16243b)),
  repeating-linear-gradient(90deg,transparent 0 38px,rgba(255,255,255,.035) 38px 39px);
  background-blend-mode:normal;box-shadow:inset 0 0 0 1px rgba(150,190,235,.16),inset 0 -14px 24px rgba(0,0,0,.28),0 10px 18px rgba(0,0,0,.35)}
.o3r-floor::after{content:"";position:absolute;inset:0;border-radius:5px;background:repeating-linear-gradient(0deg,transparent 0 29px,rgba(255,255,255,.03) 29px 30px)}
.o3r-rug{position:absolute;left:24px;top:36px;width:188px;height:96px;border-radius:10px;pointer-events:none!important;
  background:radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--c) 32%,#1b2a44),color-mix(in srgb,var(--c) 14%,#142038));
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--c) 45%,transparent),inset 0 0 0 6px rgba(0,0,0,.18)}

/* wall with the department sign and the live status card */
.o3r-wall{position:absolute;left:-3px;top:-38px;width:241px;height:52px;border-radius:6px 6px 0 0;
  background:linear-gradient(180deg,#31476a,#1f3050);border:1px solid rgba(150,190,235,.35);border-bottom:0;
  box-shadow:0 -6px 16px rgba(0,0,0,.35)}
.o3r-wall .trim{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--c);box-shadow:0 0 12px var(--c);opacity:.9}
#jofStage .o3r-wall .jof-plate{position:absolute;left:7px;top:4px;right:36px;padding:0;background:none;border:0;border-radius:0;
  font-size:11px;line-height:15px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 0 8px color-mix(in srgb,var(--c) 70%,transparent)}
#jofStage .o3r-wall .jof-plate small{display:inline;margin-left:7px;font-size:9.5px;letter-spacing:.02em;font-weight:600;color:#a9c4dc;text-transform:none;text-shadow:none}
#jofStage .o3r-wall .jof-card{position:absolute;left:6px;right:6px;top:21px;bottom:auto;height:22px;padding:2px 7px 0;border-radius:5px;
  background:rgba(4,12,26,.82);border:1px solid color-mix(in srgb,var(--c) 30%,rgba(125,211,252,.15))}
#jofStage .o3r-wall .jof-card-t{font-size:10.5px;line-height:13px}
#jofStage .o3r-wall .jof-prog{margin-top:2px;height:3px}
#jofStage .o3r-wall .jof-need{position:absolute;right:5px;top:3px;bottom:auto;height:17px;padding:0 6px 0 3px;font-size:10px;gap:1px}
#jofStage .o3r-wall .jof-need .material-icons{font-size:12px;width:12px;height:12px}

/* low glass walls toward the meeting room, with a door gap */
.o3r-half,.o3r-part{position:absolute;height:11px;border-radius:2px;pointer-events:none!important;
  background:linear-gradient(180deg,rgba(160,215,255,.5),rgba(90,150,215,.28));border:1px solid rgba(190,230,255,.55);
  box-shadow:0 5px 8px rgba(0,0,0,.4),0 0 10px color-mix(in srgb,var(--c) 30%,transparent)}
.o3r-half{top:142px}.o3r-part{top:14px}
.o3r-half.l,.o3r-part.l{left:-3px;width:90px}
.o3r-half.r,.o3r-part.r{left:148px;width:90px}
.o3r-glass{position:absolute;top:0;width:3px;height:150px;pointer-events:none!important;background:linear-gradient(180deg,rgba(160,215,255,.35),rgba(160,215,255,.1));box-shadow:0 0 8px rgba(120,190,255,.3)}
.o3r-glass.l{left:-5px}.o3r-glass.r{right:-5px}
#jofStage .jof-room .jof-door{position:absolute;left:calc(50% - 26px);width:52px;height:3px;border-radius:2px;background:color-mix(in srgb,var(--c) 85%,#fff);box-shadow:0 0 12px var(--c);pointer-events:none}
#jofStage .jof-room.A .jof-door{top:146px;bottom:auto}
#jofStage .jof-room.B .jof-door{top:-1px}

/* furniture boxes */
.o3b{position:absolute;--tp:#8da0bf;--fr:#566a8a;pointer-events:none}
.o3b .t{position:absolute;left:0;right:0;top:0;border-radius:3px 3px 0 0;background:var(--tp);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.o3b .f{position:absolute;left:0;right:0;border-radius:0 0 2px 2px;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(0,0,0,.22)),var(--fr);box-shadow:0 6px 8px rgba(0,0,0,.38)}
.o3b.desk{--tp:#e8edf4;--fr:#9aa9c0}
.o3b.desk .t{background:linear-gradient(135deg,#f3f6fb,#d6deea)}
.o3b.desk .f{border-bottom:3px solid var(--c)}
.o3b.cab{--tp:#aebdd2;--fr:#667896}
.o3b.pot{--tp:#7a5a45;--fr:#4f3827}
.o3b.server{--tp:#46526a;--fr:#1b2434}
.o3b.carton{--tp:#e0c291;--fr:#b4905c}.o3b.carton.c2{--tp:#d2b07a;--fr:#a07d4a}.o3b.carton.c3{--tp:#e8cfa3;--fr:#bf9d68}
.o3b.shelf{--tp:#5b7195;--fr:#2f4262}
.o3b.pallet{--tp:#c19a62;--fr:#8f6d3e}
.o3b.safe{--tp:#7a8394;--fr:#454d5c}
.o3b.books{--tp:#8b5cf6;--fr:#5b36b8}.o3b.books.b2{--tp:#f59e0b;--fr:#b45309}
.o3b.credenza{--tp:#d6deea;--fr:#7d8ba3}
.o3r-drawers{position:absolute;width:26px;height:30px;pointer-events:none!important}
.o3r-drawers s{display:block;height:8px;margin-bottom:2px;border-radius:2px;background:rgba(15,25,45,.35);box-shadow:inset 0 -2px 0 rgba(255,255,255,.25);position:relative}
.o3r-drawers s::after{content:"";position:absolute;left:9px;top:3px;width:8px;height:2px;border-radius:1px;background:#e8edf4}

/* chair behind the person at the desk */
.o3r-chair{position:absolute;left:99px;top:30px;width:34px;height:36px;pointer-events:none!important}
.o3r-chair .bk{position:absolute;left:3px;top:0;width:28px;height:30px;border-radius:12px 12px 4px 4px;background:linear-gradient(180deg,#46618a,#2a3d5d);box-shadow:0 3px 5px rgba(0,0,0,.4),inset 0 2px 0 rgba(255,255,255,.2)}
.o3r-chair .arm{position:absolute;top:22px;width:5px;height:14px;border-radius:3px;background:#1c2a42}
.o3r-chair .arm.l{left:-2px}.o3r-chair .arm.r{right:-2px}
.o3r-plant{position:absolute;left:3px;top:26px;width:28px;height:36px;pointer-events:none!important}
.o3r-plant i{position:absolute;left:7px;bottom:0;width:15px;height:30px;border-radius:50% 50% 8px 8px / 80% 80% 20% 20%;background:linear-gradient(90deg,#1f9d55,#43d17e 55%,#1f8a48);transform-origin:50% 100%}
.o3r-plant i.p2{left:-1px;height:22px;transform:rotate(-30deg)}.o3r-plant i.p3{left:15px;height:24px;transform:rotate(32deg)}
.o3r-plant.big{width:34px;height:50px}.o3r-plant.big i{left:10px;height:44px;width:18px}.o3r-plant.big i.p2{left:0;height:32px}.o3r-plant.big i.p3{left:20px;height:34px}

/* the folder (reports) sits on top of the filing cabinet */
#jofStage .jof-room .jof-folder{position:absolute;left:191px;right:auto;top:-9px;bottom:auto;width:36px;height:30px}
#jofStage .jof-room.A .jof-folder,#jofStage .jof-room.B .jof-folder{top:-9px;bottom:auto;right:auto}

/* desk set: monitor, keyboard, mouse, trays, lamp, mug */
.o3m{position:absolute;left:64px;top:30px;width:46px;height:40px;pointer-events:none!important}
.o3m .scr{position:absolute;left:0;top:0;width:46px;height:29px;border-radius:3px;background:#050c18;border:2px solid #1c2740;overflow:hidden;
  box-shadow:0 0 0 1px #3a4c6e,0 0 14px color-mix(in srgb,var(--c) 40%,transparent);transform:perspective(160px) rotateY(14deg);transform-origin:100% 50%}
.o3m .scr::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,color-mix(in srgb,var(--c) 22%,#06101e),#050c18)}
.o3m .ln{position:absolute;left:4px;top:5px;height:2px;width:26px;border-radius:1px;background:color-mix(in srgb,var(--c) 85%,#fff);box-shadow:0 5px 0 color-mix(in srgb,var(--c) 60%,#000),0 10px 0 color-mix(in srgb,var(--c) 70%,#000);opacity:.5}
.o3m .ln.l2{left:8px;top:8px;width:20px;opacity:.35}.o3m .ln.l3{left:12px;top:11px;width:14px;opacity:.3}
.o3m em{position:absolute;right:5px;bottom:4px;width:4px;height:6px;background:var(--c);opacity:.4}
.o3m .neck{position:absolute;left:21px;top:29px;width:5px;height:6px;background:#2a3856}
.o3m .foot{position:absolute;left:13px;top:34px;width:21px;height:4px;border-radius:2px;background:linear-gradient(#41567c,#243350)}
.jof-room.is-working .o3m .scr{box-shadow:0 0 0 1px #5b78a8,0 0 22px color-mix(in srgb,var(--c) 80%,transparent)}
.jof-room.is-working .o3m .ln{opacity:1;animation:o3-code 1.1s steps(6) infinite}
.jof-room.is-working .o3m .ln.l2{animation-delay:-.4s}.jof-room.is-working .o3m .ln.l3{animation-delay:-.7s}
.jof-room.is-working .o3m em{opacity:1;animation:o3-blink .6s steps(2) infinite}
.jof-room.is-empty .o3m .scr{box-shadow:0 0 0 1px #2a3a58}.jof-room.is-empty .o3m .scr::before{background:#050a14}.jof-room.is-empty .o3m .ln,.jof-room.is-empty .o3m em{opacity:.08}
@keyframes o3-code{0%{width:6px}50%{width:28px}100%{width:16px}}
@keyframes o3-blink{50%{opacity:0}}
.o3k{position:absolute;left:99px;top:73px;width:36px;height:8px;border-radius:2px;background:repeating-linear-gradient(90deg,#c3cddd 0 3px,#8c9ab1 3px 4px),#9aa8bf;box-shadow:0 2px 0 #5d6c85;pointer-events:none!important}
.o3mouse{position:absolute;left:140px;top:74px;width:7px;height:10px;border-radius:4px;background:#d9e1ee;box-shadow:0 2px 0 #6d7b94;pointer-events:none!important}
.o3tray{position:absolute;width:28px;height:10px;border-radius:2px;background:#6f84a6;box-shadow:0 2px 0 #3d4e6c;pointer-events:none!important}
.o3tray.in{left:114px;top:58px}.o3tray.out{left:146px;top:60px;width:14px}
.o3tray .pp{position:absolute;left:2px;top:-3px;width:22px;height:5px;background:#fff;border-radius:1px;box-shadow:0 1px 0 #cbd5e1}
.o3tray .pp.p2{top:-5px;left:3px}.o3tray .pp.p3{top:-7px;left:1px}
.o3tray.out .pp{width:10px;top:-3px}
.o3lamp{position:absolute;left:160px;top:24px;width:20px;height:44px;pointer-events:none!important}
.o3lamp .arm{position:absolute;left:8px;top:12px;width:3px;height:32px;background:#8190a8;transform:rotate(-8deg);transform-origin:50% 100%}
.o3lamp .head{position:absolute;left:0;top:7px;width:16px;height:7px;border-radius:8px 8px 3px 3px;background:#cbd5e1;transform:rotate(-14deg)}
.o3lamp .glow{position:absolute;left:-6px;top:12px;width:30px;height:30px;background:radial-gradient(ellipse at 50% 0,rgba(255,230,160,calc(.15 + var(--glow) * .35)),rgba(255,230,160,0) 70%);clip-path:polygon(30% 0,70% 0,100% 100%,0 100%)}
.o3mug{position:absolute;left:68px;top:75px;width:7px;height:8px;border-radius:1px 1px 3px 3px;background:#f8fafc;box-shadow:inset 0 0 0 1px #cbd5e1,2px 0 0 -1px #cbd5e1;pointer-events:none!important}
.o3r-dim{position:absolute;inset:0;border-radius:5px;background:rgba(2,6,14,.0);transition:background .6s;pointer-events:none!important;z-index:0}
.jof-room.is-empty .o3r-dim{background:rgba(2,6,14,.34)}
.jof-room.is-working .o3r-rug{box-shadow:inset 0 0 0 2px var(--c),inset 0 0 22px color-mix(in srgb,var(--c) 40%,transparent)}
.jof-room.is-working .o3r-floor{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 55%,transparent),inset 0 -14px 24px rgba(0,0,0,.2),0 0 22px color-mix(in srgb,var(--c) 28%,transparent)}

/* department props */
.o3p-globe{position:absolute;width:36px;height:50px;pointer-events:none!important}
.o3p-globe .core{position:absolute;left:4px;top:4px;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#a5f3fc,#0891b2 60%,#164e63);box-shadow:0 0 16px rgba(34,211,238,.7);animation:o3-spin 8s linear infinite;background-size:200% 100%}
.o3p-globe .ring{position:absolute;left:-2px;top:12px;width:40px;height:12px;border-radius:50%;border:1.5px solid rgba(165,243,252,.8);transform:rotate(-18deg);animation:o3-ring 4s ease-in-out infinite}
.o3p-globe .ring.r2{transform:rotate(24deg);animation-delay:-2s;opacity:.7}
.o3p-globe .base{position:absolute;left:8px;top:40px;width:20px;height:7px;border-radius:50%;background:#2a3a58;box-shadow:0 2px 0 #121b2d}
.o3p-globe .beam{position:absolute;left:14px;top:32px;width:8px;height:10px;background:linear-gradient(rgba(34,211,238,.6),transparent)}
@keyframes o3-spin{to{background-position:200% 0}}
@keyframes o3-ring{50%{transform:rotate(14deg) scaleX(.9)}}
.o3p-leds{position:absolute;width:20px;pointer-events:none!important}
.o3p-leds s{display:inline-block;width:4px;height:3px;margin:0 1px 3px 0;background:#22d3ee;box-shadow:0 0 5px #22d3ee;animation:o3-blink 1.3s steps(2) infinite}
.o3p-leds s:nth-child(2){animation-delay:-.3s;background:#a3e635}.o3p-leds s:nth-child(3){animation-delay:-.7s}.o3p-leds s:nth-child(4){animation-delay:-1s;background:#fbbf24}
.o3p-tape{position:absolute;width:18px;height:8px;border-radius:2px;background:#fbbf24;pointer-events:none!important}
.o3p-easel{position:absolute;width:48px;height:76px;pointer-events:none!important}
.o3p-easel .bd{position:absolute;left:2px;top:0;width:44px;height:44px;border-radius:3px;background:#f8fafc;border:2px solid #94a3b8;display:flex;align-items:flex-end;gap:3px;padding:4px 4px 5px;box-shadow:0 3px 6px rgba(0,0,0,.4)}
.o3p-easel .bd s{display:block;flex:1;background:linear-gradient(#4ade80,#16a34a);border-radius:1px 1px 0 0}
.o3p-easel .bd u{position:absolute;left:5px;right:5px;top:8px;height:2px;background:#ef4444;transform:rotate(-12deg)}
.o3p-easel .l1,.o3p-easel .l2{position:absolute;top:44px;width:3px;height:30px;background:#64748b}.o3p-easel .l1{left:8px;transform:rotate(8deg)}.o3p-easel .l2{right:8px;transform:rotate(-8deg)}
.o3p-trophy{position:absolute;width:16px;height:22px;pointer-events:none!important}
.o3p-trophy i{position:absolute;left:1px;top:0;width:14px;height:11px;border-radius:2px 2px 8px 8px;background:linear-gradient(90deg,#fde68a,#f59e0b);box-shadow:0 0 10px rgba(251,191,36,.6)}
.o3p-trophy b{position:absolute;left:6px;top:11px;width:4px;height:6px;background:#d97706}
.o3p-trophy::after{content:"";position:absolute;left:2px;top:17px;width:12px;height:4px;border-radius:1px;background:#92400e}
.o3p-ring{position:absolute;width:42px;height:76px;pointer-events:none!important}
.o3p-ring .rl{position:absolute;left:3px;top:0;width:30px;height:30px;border-radius:50%;border:5px solid #fff7d6;box-shadow:0 0 14px rgba(255,240,180,.8),inset 0 0 6px rgba(255,255,255,.7)}
.o3p-ring .ph{position:absolute;left:14px;top:9px;width:8px;height:13px;border-radius:2px;background:#0f172a;border:1px solid #94a3b8}
.o3p-ring .pole{position:absolute;left:17px;top:30px;width:3px;height:36px;background:#64748b}
.o3p-ring .tp{position:absolute;left:6px;top:64px;width:26px;height:6px;border-radius:50%;background:#334155}
.o3p-bubbles{position:absolute;width:30px;height:30px;pointer-events:none!important}
.o3p-bubbles s{position:absolute;width:11px;height:9px;border-radius:5px;background:#f472b6;animation:o3-float 3s ease-in-out infinite}
.o3p-bubbles s:nth-child(2){left:12px;top:5px;background:#38bdf8;animation-delay:-1s}.o3p-bubbles s:nth-child(3){left:4px;top:14px;background:#fbbf24;animation-delay:-2s}
@keyframes o3-float{50%{transform:translateY(-4px)}}
.o3p-boxes{position:absolute;width:44px;height:50px;pointer-events:none!important}
.o3p-boxes s{position:absolute;display:block;width:12px;height:9px;background:#d7b88a;box-shadow:inset 0 -2px 0 #a8875a}
.o3p-boxes s:nth-child(1){left:3px;top:2px}.o3p-boxes .b2{left:17px;top:3px;background:#e0c291}.o3p-boxes .b3{left:30px;top:2px}
.o3p-boxes .b4{left:6px;top:18px;width:15px}.o3p-boxes .b5{left:26px;top:19px;width:13px;background:#c9a874}
.o3p-cam{position:absolute;width:40px;height:74px;pointer-events:none!important}
.o3p-cam .body{position:absolute;left:8px;top:0;width:22px;height:14px;border-radius:3px;background:#1e293b;border:1px solid #64748b}
.o3p-cam .lens{position:absolute;left:12px;top:3px;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#7dd3fc,#1e3a8a 60%,#020617);box-shadow:0 0 0 2px #475569}
.o3p-cam .leg{position:absolute;top:15px;width:2px;height:54px;background:#64748b;transform-origin:50% 0}
.o3p-cam .leg.a{left:12px;transform:rotate(16deg)}.o3p-cam .leg.b{left:19px;height:58px}.o3p-cam .leg.c{left:26px;transform:rotate(-16deg)}
.o3p-frames{position:absolute;width:34px;height:30px;pointer-events:none!important}
.o3p-frames s{position:absolute;left:0;top:4px;width:16px;height:20px;background:linear-gradient(135deg,#7dd3fc,#a78bfa);border:2px solid #f1f5f9;box-shadow:0 2px 4px rgba(0,0,0,.4)}
.o3p-frames .f2{left:16px;top:0;width:15px;height:14px;background:linear-gradient(135deg,#fbbf24,#f472b6)}
.o3p-dial{position:absolute;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle,#e5e7eb,#6b7280);box-shadow:0 0 0 2px #374151;pointer-events:none!important}
.o3p-cash{position:absolute;width:30px;height:22px;pointer-events:none!important}
.o3p-cash s{position:absolute;display:block;width:22px;height:8px;border-radius:1px;background:linear-gradient(90deg,#86efac,#22c55e)}
.o3p-cash s:nth-child(1){left:0;top:12px}.o3p-cash s:nth-child(2){left:3px;top:8px;background:linear-gradient(90deg,#bbf7d0,#4ade80)}.o3p-cash s:nth-child(3){left:1px;top:4px}
.o3p-cash u{position:absolute;left:20px;top:2px;width:9px;height:9px;border-radius:50%;background:#fbbf24;box-shadow:0 0 6px #fbbf24}
.o3p-calc{position:absolute;width:20px;height:28px;overflow:hidden;font-size:0;line-height:0;border-radius:3px;background:#1f2937;border:1px solid #64748b;padding:3px;pointer-events:none!important}
.o3p-calc i{display:block;height:7px;margin-bottom:2px;background:#86efac}
.o3p-calc s{display:inline-block;width:4px;height:3px;margin:0 1px 1px 0;background:#cbd5e1}
.o3p-coins{position:absolute;width:20px;height:16px;pointer-events:none!important}
.o3p-coins s{position:absolute;display:block;width:11px;height:4px;border-radius:50%;background:#fbbf24;box-shadow:0 2px 0 #b45309}
.o3p-coins s:nth-child(1){left:0;top:10px}.o3p-coins s:nth-child(2){left:0;top:6px}.o3p-coins s:nth-child(3){left:6px;top:8px}

/* ---------- MEETING ROOM ---------- */
#jofStage .jof-meet{background:none;border:0;box-shadow:none;border-radius:0;pointer-events:none}
#jofStage .jof-meet > *{pointer-events:auto}
.o3t-floor{position:absolute;inset:0;border-radius:10px;pointer-events:none!important;
  background:linear-gradient(180deg,#1c2e4c,#122039),repeating-linear-gradient(90deg,transparent 0 48px,rgba(255,255,255,.03) 48px 49px);
  box-shadow:inset 0 0 0 1px rgba(150,190,235,.25),inset 0 0 50px rgba(0,0,0,.35),0 12px 22px rgba(0,0,0,.4);transition:box-shadow .6s}
.jof-meet.is-live .o3t-floor{box-shadow:inset 0 0 0 2px rgba(52,211,153,.7),inset 0 0 60px rgba(52,211,153,.14),0 0 30px rgba(52,211,153,.25)}
.o3t-rug{position:absolute;left:240px;top:44px;width:500px;height:150px;border-radius:70px;pointer-events:none!important;background:radial-gradient(ellipse,#26466f,#172b49);box-shadow:inset 0 0 0 3px rgba(125,211,252,.25),inset 0 0 0 9px rgba(0,0,0,.14)}
#jofStage .jof-meet-plate{position:absolute;left:14px;top:5px;font-size:10px;font-weight:900;letter-spacing:.2em;color:#7dd3fc;z-index:3}
#jofStage .jof-screen{position:absolute;left:14px;top:24px;width:206px;height:60px;padding:6px 10px;line-height:1.35;border-radius:5px;background:linear-gradient(180deg,#071426,#04101f);border:2px solid #243a5c;
  box-shadow:0 0 22px rgba(56,189,248,.35),inset 0 0 12px rgba(56,189,248,.15);font-size:11px;font-weight:800;letter-spacing:.06em;color:#7dd3fc;z-index:4}
#jofStage .jof-board{position:absolute;left:826px;top:26px;width:140px;padding:6px 8px;border-radius:5px;background:linear-gradient(180deg,#f8fafc,#dbe4f0);border:3px solid #64748b;color:#1e293b;z-index:4;
  box-shadow:0 5px 10px rgba(0,0,0,.4);font-size:10px;line-height:1.5}
#jofStage .jof-board b{color:#0369a1;font-size:9.5px}
#jofStage .jof-board em{color:#0f172a}
#jofStage .jof-brief{position:absolute;left:12px;top:100px;width:206px;max-height:128px;overflow:auto;padding:6px 6px 6px;border-radius:8px;z-index:400;background:rgba(3,10,22,.9);scrollbar-width:thin}
.jof-table{position:absolute;left:340px;top:78px;width:340px;height:100px;z-index:310;pointer-events:none}
.jof-table .top{position:absolute;left:0;top:0;width:340px;height:86px;border-radius:44px;background:linear-gradient(160deg,#eef3fa,#c7d3e4 60%,#aebcd2);box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.jof-table .edge{position:absolute;left:0;top:10px;width:340px;height:86px;border-radius:44px;z-index:-1;background:linear-gradient(#6c7f9d,#3b4c68);box-shadow:0 12px 16px rgba(0,0,0,.45)}
.jof-table .shine{position:absolute;left:30px;top:8px;width:150px;height:22px;border-radius:50%;background:linear-gradient(90deg,rgba(255,255,255,.75),rgba(255,255,255,0));transform:rotate(-5deg)}
.jof-table .holo{position:absolute;left:100px;top:6px;width:140px;height:60px;font-style:normal;display:grid;place-items:center}
.jof-table .holo b{position:absolute;left:30px;top:30px;width:80px;height:26px;border-radius:50%;border:2px solid rgba(34,211,238,.8);box-shadow:0 0 14px rgba(34,211,238,.7);animation:o3-ring 5s ease-in-out infinite}
.jof-table .holo b.h2{left:15px;top:22px;width:110px;height:38px;opacity:.5;animation-delay:-2.5s}
.jof-table .holo em{position:absolute;top:2px;font-style:normal;font-size:10px;font-weight:900;letter-spacing:.34em;color:#06b6d4;text-shadow:0 0 10px #22d3ee;padding-left:.34em}
.jof-table::after{content:none}
.o3c{position:absolute;width:34px;height:34px;pointer-events:none}
.o3c .bk{position:absolute;left:3px;top:0;width:28px;height:20px;border-radius:10px 10px 3px 3px;background:linear-gradient(180deg,#46618a,#2a3d5d);box-shadow:0 3px 5px rgba(0,0,0,.4),inset 0 2px 0 rgba(255,255,255,.2)}
.o3c .st{position:absolute;left:1px;top:18px;width:32px;height:11px;border-radius:5px;background:#1c2a42;box-shadow:0 4px 5px rgba(0,0,0,.4)}
.o3c.e .bk,.o3c.e .st{background:linear-gradient(180deg,#9a6b1f,#6b4710)}
.o3-coffee{position:absolute;width:30px;height:44px;pointer-events:none}
.o3-coffee .body{position:absolute;left:0;top:6px;width:30px;height:38px;border-radius:4px;background:linear-gradient(90deg,#374151,#1f2937);box-shadow:0 5px 6px rgba(0,0,0,.4)}
.o3-coffee .body::after{content:"";position:absolute;left:5px;top:5px;width:20px;height:6px;border-radius:2px;background:#22d3ee;box-shadow:0 0 6px #22d3ee}
.o3-coffee .cup{position:absolute;left:10px;top:30px;width:9px;height:9px;border-radius:1px 1px 4px 4px;background:#f8fafc}
.o3-coffee .steam{position:absolute;left:13px;top:12px;width:3px;height:12px;border-radius:2px;background:rgba(255,255,255,.4);filter:blur(1px);animation:o3-steam 2.4s ease-in-out infinite}
@keyframes o3-steam{0%{opacity:0;transform:translateY(8px)}50%{opacity:.7}100%{opacity:0;transform:translateY(-8px)}}
.o3-pcs{position:absolute;width:44px;height:30px;pointer-events:none}
.o3-pcs i{position:absolute;left:0;top:10px;width:18px;height:12px;border-radius:2px;background:#f8fafc;box-shadow:0 3px 0 #94a3b8}
.o3-pcs i.p2{left:22px;top:6px;background:#fde68a;transform:rotate(6deg)}
.o3-floorlamp{position:absolute;width:30px;height:90px;pointer-events:none}
.o3-floorlamp .pole{position:absolute;left:14px;top:20px;width:3px;height:64px;background:#8190a8}
.o3-floorlamp .shade{position:absolute;left:4px;top:8px;width:24px;height:16px;border-radius:4px 4px 12px 12px;background:#fde68a;box-shadow:0 0 18px rgba(253,230,138,.8)}
.o3-floorlamp .glow{position:absolute;left:-14px;top:22px;width:58px;height:60px;background:radial-gradient(ellipse at 50% 0,rgba(253,230,138,calc(.1 + var(--glow) * .3)),rgba(253,230,138,0) 70%)}

/* the boss seat marker */
#jofStage .jof-boss{z-index:292}

/* ---------- PEOPLE ---------- */
#jofStage .jof-a{z-index:auto}
#jofStage .jof-a.has-bubble{z-index:900!important}
#jofStage .jof-a .jof-shadow{position:absolute;left:8px;top:44px;width:28px;height:9px;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.5),rgba(0,0,0,0) 70%);pointer-events:none}
#jofStage .jof-fig{position:absolute;left:8px;top:6px;width:28px;height:42px}
#jofStage .jof-fig .jof-head{left:7px;top:0;width:14px;height:15px;border-radius:50% 50% 46% 46%;box-shadow:inset -2px -3px 0 rgba(0,0,0,.12)}
#jofStage .jof-fig .jof-head::before,#jofStage .jof-fig .jof-head::after{content:"";position:absolute;top:6px;width:2px;height:2px;border-radius:50%;background:#1b1b1f}
#jofStage .jof-fig .jof-head::before{left:3px}#jofStage .jof-fig .jof-head::after{right:3px}
#jofStage .jof-fig .jof-hair{left:6px;top:-2px;width:16px;height:9px;border-radius:9px 9px 3px 3px}
#jofStage .jof-fig .jof-body{left:2px;top:15px;width:24px;height:19px;border-radius:9px 9px 3px 3px}
#jofStage .jof-fig .jof-body::before{content:"";position:absolute;left:9px;top:0;width:6px;height:5px;border-radius:0 0 4px 4px;background:rgba(255,255,255,.85)}
#jofStage .jof-fig .jof-body .material-icons{margin-top:3px}
#jofStage .jof-fig .jof-arm{position:absolute;top:16px;width:5px;height:15px;border-radius:3px;background:color-mix(in srgb,var(--c) 70%,#000);transform-origin:50% 10%}
#jofStage .jof-fig .jof-arm.l{left:-3px}#jofStage .jof-fig .jof-arm.r{right:-3px}
#jofStage .jof-fig .jof-legs{position:absolute;left:6px;top:33px;width:16px;height:9px;background:none;border:0;border-radius:0}
#jofStage .jof-fig .jof-legs b{position:absolute;top:0;width:6px;height:9px;border-radius:0 0 3px 3px;background:#18243b;border-bottom:3px solid #e2e8f0;transform-origin:50% 0}
#jofStage .jof-fig .jof-legs b.l{left:0}#jofStage .jof-fig .jof-legs b.r{right:0}
#jofStage .jof-a.is-seated .jof-legs{display:none}
#jofStage .jof-a.is-seated .jof-fig{top:10px}
#jofStage .jof-a.is-walking .jof-fig{animation:o3-bob .62s ease-in-out infinite}
#jofStage .jof-a.is-walking .jof-legs b.l{animation:o3-step .62s ease-in-out infinite}
#jofStage .jof-a.is-walking .jof-legs b.r{animation:o3-step .62s ease-in-out infinite reverse}
#jofStage .jof-a.is-walking .jof-arm.l{animation:o3-swing .62s ease-in-out infinite}
#jofStage .jof-a.is-walking .jof-arm.r{animation:o3-swing .62s ease-in-out infinite reverse}
#jofStage .jof-a.is-typing .jof-fig{animation:none}
#jofStage .jof-a.is-typing .jof-arm{transform:rotate(-40deg)}
#jofStage .jof-a.is-typing .jof-arm.l{animation:o3-tap .26s ease-in-out infinite}
#jofStage .jof-a.is-typing .jof-arm.r{animation:o3-tap .26s ease-in-out infinite reverse}
#jofStage .jof-a.face-l .jof-fig{transform:scaleX(-1)}
#jofStage .jof-a.face-l.is-walking .jof-fig{animation:o3-bob-l .62s ease-in-out infinite}
#jofStage .jof-a.is-speaking .jof-arm.r{animation:o3-gest .5s ease-in-out infinite}
@keyframes o3-bob{50%{transform:translateY(-2px)}}
@keyframes o3-bob-l{0%,100%{transform:scaleX(-1)}50%{transform:scaleX(-1) translateY(-2px)}}
@keyframes o3-step{0%,100%{transform:rotate(-26deg)}50%{transform:rotate(26deg)}}
@keyframes o3-swing{0%,100%{transform:rotate(22deg)}50%{transform:rotate(-22deg)}}
@keyframes o3-tap{0%,100%{transform:rotate(-40deg)}50%{transform:rotate(-58deg)}}
@keyframes o3-gest{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(-70deg)}}
#jofStage .jof-fig .jof-visor{position:absolute;left:6px;top:5px;width:16px;height:4px;border-radius:2px;background:#22d3ee;box-shadow:0 0 8px #22d3ee;z-index:4}
#jofStage .jof-tag{top:-14px;font-size:10px;padding:0 6px;line-height:14px}
#jofStage .jof-bubble{bottom:auto;top:-16px;transform:translate(-50%,-100%) scale(.9);transform-origin:bottom center}
#jofStage .jof-a.has-bubble .jof-bubble{transform:translate(-50%,-100%) scale(1)}
#jofStage .jof-wave{top:-26px}
#jofStage .jof-a.is-hot .jof-tag{box-shadow:0 0 12px var(--c)}

/* ---------- effects: paper hand-offs, holo windows, puffs ---------- */
.o3-paper{position:absolute;width:20px;height:26px;margin:-13px 0 0 -10px;pointer-events:none;will-change:transform}
.o3-paper i{position:absolute;inset:0;border-radius:2px;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.4),inset 0 0 0 1px #cbd5e1}
.o3-paper i:nth-child(1){transform:rotate(-7deg);background:#e2e8f0}.o3-paper i:nth-child(2){transform:rotate(5deg)}
.o3-paper i:nth-child(3){background:repeating-linear-gradient(180deg,transparent 0 4px,var(--c) 4px 5px) 3px 5px/14px 16px no-repeat,#fff;opacity:.98}
.o3-paper em{position:absolute;left:50%;top:-16px;transform:translateX(-50%);font-style:normal;font-size:9px;font-weight:800;color:#06101c;background:#fde68a;padding:0 5px;border-radius:5px;white-space:nowrap}
.o3-holo{position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%);width:max-content;max-width:210px;padding:5px 10px;border-radius:7px;pointer-events:none;
  font-size:11px;font-weight:700;line-height:1.3;color:#e8faff;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 28%,rgba(4,14,30,.9)),rgba(4,14,30,.88));border:1px solid var(--c);box-shadow:0 0 16px color-mix(in srgb,var(--c) 60%,transparent);
  display:flex;align-items:center;gap:6px;animation:o3-holo 2.6s ease-out forwards;z-index:1200}
.o3-holo .material-icons{font-size:14px;width:14px;height:14px;overflow:hidden;color:var(--c)}
.o3-holo i{position:absolute;left:50%;bottom:-6px;width:1px;height:6px;background:var(--c)}
@keyframes o3-holo{0%{opacity:0;transform:translateX(-50%) translateY(10px) scale(.7)}12%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}85%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-8px)}}
.o3-puff{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;border:2px solid var(--c);pointer-events:none;z-index:1100;animation:o3-puff .85s ease-out forwards}
@keyframes o3-puff{from{opacity:.9;transform:scale(.4)}to{opacity:0;transform:scale(4)}}
@media (prefers-reduced-motion:reduce){#jofStage .jof-a *,.o3p-globe *,.o3m *,.o3-holo,.o3-coffee *{animation:none!important}}

/* zoom views: 2 = wider office column */
@media (min-width:981px){
  #aiModal.jarvis-hud[data-dash="office"][data-office-zoom="2"] .jarvis-deck-body{grid-template-columns:minmax(230px,.3fr) minmax(0,2.2fr)}
}
#jofZoom{white-space:nowrap}

/* ===== v11: more human people and a more real desk ===== */
#jofStage .jof-a{transform:scale(1.22);transform-origin:22px 34px}
#jofStage .jof-fig{width:28px;height:44px}
#jofStage .jof-fig *{box-sizing:border-box}
#jofStage .jof-fig .jof-hairback{position:absolute;display:none;left:4px;top:-1px;width:20px;height:24px;border-radius:10px 10px 6px 6px;background:var(--hair);z-index:0}
#jofStage .jof-fig.hs-long .jof-hairback{display:block}
#jofStage .jof-fig .jof-neck{position:absolute;left:11px;top:14px;width:6px;height:6px;background:color-mix(in srgb,var(--skin) 82%,#000);z-index:1}
#jofStage .jof-fig .jof-ear{position:absolute;top:7px;width:3px;height:5px;border-radius:50%;background:color-mix(in srgb,var(--skin) 90%,#000);z-index:1}
#jofStage .jof-fig .jof-ear.l{left:4px}#jofStage .jof-fig .jof-ear.r{left:21px}
#jofStage .jof-fig .jof-head{left:6px;top:0;width:16px;height:17px;border-radius:46% 46% 48% 48%;z-index:2;background:radial-gradient(circle at 40% 35%,var(--skin),color-mix(in srgb,var(--skin) 85%,#000))}
#jofStage .jof-fig .jof-head::before,#jofStage .jof-fig .jof-head::after{content:none}
#jofStage .jof-fig .jof-face{position:absolute;left:6px;top:0;width:16px;height:17px;z-index:3}
#jofStage .jof-fig .jof-face::before{content:"";position:absolute;left:4px;top:7px;width:2.4px;height:3px;border-radius:50%;background:#1b1b1f;box-shadow:5.6px 0 0 #1b1b1f,-.6px -3px 0 -.6px rgba(0,0,0,.55),6px -3px 0 -.6px rgba(0,0,0,.55)}
#jofStage .jof-fig .jof-face::after{content:"";position:absolute;left:5.5px;top:12px;width:5px;height:2px;border-radius:0 0 4px 4px;border-bottom:1.5px solid rgba(120,40,40,.85)}
#jofStage .jof-fig .jof-hair{left:5px;top:-2px;width:18px;height:9px;border-radius:9px 9px 3px 3px;background:var(--hair);z-index:4;box-shadow:inset 0 2px 0 rgba(255,255,255,.12)}
#jofStage .jof-fig.hs-long .jof-hair{height:11px;border-radius:9px 9px 2px 2px}
#jofStage .jof-fig.hs-bun .jof-hair::before{content:"";position:absolute;left:6px;top:-6px;width:7px;height:7px;border-radius:50%;background:var(--hair)}
#jofStage .jof-fig.hs-cap .jof-hair{background:#b45309;height:8px;border-radius:9px 9px 2px 2px;box-shadow:0 2px 0 #7c2d12}
#jofStage .jof-fig.hs-cap .jof-hair::after{content:"";position:absolute;left:1px;bottom:-3px;width:16px;height:3px;border-radius:2px;background:#7c2d12}
#jofStage .jof-fig.hs-robot .jof-hair{background:#cbd5e1;height:6px}
#jofStage .jof-fig.glasses .jof-face::before{box-shadow:5.6px 0 0 #1b1b1f}
#jofStage .jof-fig.glasses .jof-face::after{border-bottom-color:rgba(120,40,40,.85)}
#jofStage .jof-fig.glasses .jof-head::after{content:"";position:absolute;left:2px;top:6px;width:12px;height:5px;background:linear-gradient(90deg,transparent 0 3px,#0f172a 3px 4px,transparent 4px 7px,#0f172a 7px 8px,transparent 8px);border-radius:2px;box-shadow:inset 0 0 0 1px #0f172a;opacity:.9}
#jofStage .jof-fig.beard .jof-head::after{content:"";position:absolute;left:1px;top:10px;width:14px;height:7px;border-radius:0 0 8px 8px;background:#111827;opacity:.9}
#jofStage .jof-fig .jof-body{left:1px;top:18px;width:26px;height:20px;border-radius:9px 9px 3px 3px;z-index:2;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 92%,#fff),color-mix(in srgb,var(--c) 55%,#000));box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
#jofStage .jof-fig .jof-body::before{left:8px;top:0;width:10px;height:6px;border-radius:0 0 6px 6px;background:#f8fafc;clip-path:polygon(0 0,100% 0,50% 100%)}
#jofStage .jof-fig.tie .jof-body::after{content:"";position:absolute;left:12px;top:5px;width:3px;height:11px;background:#1e293b;clip-path:polygon(30% 0,70% 0,100% 80%,50% 100%,0 80%)}
#jofStage .jof-fig .jof-body .material-icons{font-size:8px;width:8px;height:8px;position:absolute;left:3px;top:9px;opacity:.85}
#jofStage .jof-fig .jof-arm{top:19px;width:6px;height:17px;border-radius:3px 3px 2px 2px;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 75%,#fff),color-mix(in srgb,var(--c) 55%,#000));z-index:3}
#jofStage .jof-fig .jof-arm::after{content:"";position:absolute;left:.5px;bottom:-3px;width:5px;height:5px;border-radius:50%;background:var(--skin)}
#jofStage .jof-fig .jof-arm.l{left:-4px}#jofStage .jof-fig .jof-arm.r{right:-4px}
#jofStage .jof-fig .jof-legs{top:37px;left:6px;width:16px;height:8px;z-index:1}
#jofStage .jof-fig .jof-legs b{width:7px;height:8px;border-radius:0 0 2px 2px;background:linear-gradient(90deg,#26354f,#18243b);border-bottom:0}
#jofStage .jof-fig .jof-legs b::after{content:"";position:absolute;left:-1px;bottom:-2px;width:9px;height:3px;border-radius:3px 3px 1px 1px;background:#0b1220;box-shadow:0 1px 0 rgba(255,255,255,.18)}
#jofStage .jof-a.is-seated .jof-fig{top:12px}
#jofStage .jof-tag{top:-12px}

/* desk: pedestal drawers, name plate, notebook, photo frame */
.o3b.desk .f::before{content:"";position:absolute;right:4px;top:0;bottom:0;width:30px;background:linear-gradient(90deg,rgba(0,0,0,.14),rgba(0,0,0,.08));border-left:1px solid rgba(0,0,0,.25);border-right:1px solid rgba(0,0,0,.18)}
.o3b.desk .f::after{content:"";position:absolute;right:13px;top:4px;width:12px;height:2px;border-radius:1px;background:#e8edf4;box-shadow:0 5px 0 #e8edf4}
.o3np{position:absolute;left:66px;top:90px;width:56px;height:9px;border-radius:1px;background:linear-gradient(#1d2a44,#0f1a30);border:1px solid #c9a35a;color:#f5d98b;font:800 6.5px/8px Inter,Arial,sans-serif;letter-spacing:.14em;text-align:center;text-transform:uppercase;overflow:hidden;pointer-events:none}
.o3pad{position:absolute;left:74px;top:72px;width:18px;height:11px;border-radius:1px;background:linear-gradient(135deg,#f8fafc 0 70%,var(--c) 70%);box-shadow:0 2px 0 #94a3b8;transform:rotate(-6deg);pointer-events:none!important}
.o3pad::after{content:"";position:absolute;left:12px;top:3px;width:9px;height:2px;border-radius:1px;background:#1e293b;transform:rotate(-24deg)}
.o3frame{position:absolute;left:130px;top:58px;width:10px;height:12px;border-radius:1px;border:2px solid #cbd5e1;background:linear-gradient(135deg,#7dd3fc,#f9a8d4);box-shadow:0 2px 0 #64748b;pointer-events:none!important}
.o3m .scr::after{content:"";position:absolute;left:0;right:0;top:0;height:9px;background:linear-gradient(180deg,rgba(255,255,255,.12),transparent)}

/* ===== v12: architect's office look + eyes that follow the speaker ===== */
/* eyes: white of the eye + a pupil that looks left or right (--gx = -1, 0, 1) */
#jofStage .jof-fig .jof-head::before{content:"";position:absolute;left:3px;top:6px;width:4.6px;height:4.2px;border-radius:50%;background:#fff;box-shadow:5.6px 0 0 #fff,inset 0 0 0 .5px rgba(0,0,0,.15)}
#jofStage .jof-fig .jof-face::before{left:calc(4.8px + var(--gx,0) * 1.1px);top:7.2px;width:2.4px;height:2.8px;background:#15151a;transition:left .35s;box-shadow:5.6px 0 0 #15151a,-.6px -3.4px 0 -.6px rgba(0,0,0,.55),6px -3.4px 0 -.6px rgba(0,0,0,.55)}
#jofStage .jof-fig .jof-head,#jofStage .jof-fig .jof-face,#jofStage .jof-fig .jof-hair,#jofStage .jof-fig .jof-ear{transform:translateX(calc(var(--gx,0) * .8px));transition:transform .35s}
#jofStage .jof-fig.glasses .jof-face::before{box-shadow:5.6px 0 0 #15151a}

/* warm oak floors, polished concrete in the meeting room */
.o3r-floor{background:
  repeating-linear-gradient(90deg,transparent 0 46px,rgba(0,0,0,.2) 46px 47px),
  repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 9px,rgba(0,0,0,.06) 9px 10px),
  linear-gradient(180deg,color-mix(in srgb,var(--c) 7%,#7a5a3c),color-mix(in srgb,var(--c) 5%,#58402b))!important;
  box-shadow:inset 0 0 0 1px rgba(255,235,200,.22),inset 0 -16px 26px rgba(0,0,0,.35),0 10px 18px rgba(0,0,0,.4)}
.o3r-floor::after{background:linear-gradient(180deg,rgba(255,240,210,.1),transparent 40%)}
.o3r-rug{background:radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--c) 18%,#d9d4c8),color-mix(in srgb,var(--c) 10%,#b9b3a4))!important;
  box-shadow:inset 0 0 0 2px #2b2b2e,inset 0 0 0 6px rgba(255,255,255,.35),0 2px 6px rgba(0,0,0,.3)}
.jof-room.is-working .o3r-rug{box-shadow:inset 0 0 0 2px var(--c),inset 0 0 0 6px rgba(255,255,255,.35),0 0 18px color-mix(in srgb,var(--c) 45%,transparent)}
.o3t-floor{background:
  repeating-linear-gradient(90deg,transparent 0 120px,rgba(255,255,255,.07) 120px 121px),
  repeating-linear-gradient(0deg,transparent 0 118px,rgba(255,255,255,.06) 118px 119px),
  linear-gradient(180deg,#5d6672,#454d58)!important}
.o3t-rug{background:radial-gradient(ellipse,#d8d3c7,#b6b0a2)!important;box-shadow:inset 0 0 0 3px #2b2b2e,inset 0 0 0 10px rgba(255,255,255,.3)!important}

/* white walls with black steel frames and glass */
.o3r-wall{background:linear-gradient(180deg,#f0f2f5,#cfd5de)!important;border:1px solid #1d2128!important;border-bottom:0!important}
#jofStage .o3r-wall .jof-plate small{color:#475569}
#jofStage .o3r-wall .jof-card{background:rgba(255,255,255,.9);border-color:color-mix(in srgb,var(--c) 55%,#94a3b8)}
#jofStage .o3r-wall .jof-card-t{color:#0f172a}
#jofStage .o3r-wall .jof-prog{background:rgba(15,23,42,.12)}
.o3r-wall .trim{height:5px;background:#16191f;box-shadow:inset 0 -2px 0 var(--c)}
.o3r-half,.o3r-part{background:linear-gradient(180deg,rgba(210,235,255,.55),rgba(130,180,230,.28))!important;border:2px solid #14171c!important;
  background-image:linear-gradient(90deg,transparent 0 28px,#14171c 28px 30px,transparent 30px 58px,#14171c 58px 60px,transparent 60px)!important}
.o3r-glass{background:linear-gradient(180deg,rgba(210,235,255,.3),rgba(210,235,255,.08))!important;border-left:2px solid #14171c;box-shadow:none!important}
.o3b.col{--tp:#c4c7cc;--fr:#9a9ea6}
.o3b.col .f{background:linear-gradient(90deg,rgba(255,255,255,.35),rgba(0,0,0,.2)),#aeb2b9;box-shadow:0 4px 8px rgba(0,0,0,.4)}
.o3b.desk{--tp:#dcc7a4;--fr:#e9edf2}
.o3b.desk .t{background:linear-gradient(135deg,#e6d3b1,#c9b088)}
.o3b.desk .f{background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(0,0,0,.08)),#f1f3f6;border-bottom:3px solid #16191f}
.o3b.cab{--tp:#d9dde3;--fr:#aab1bc}
.o3b.credenza{--tp:#c9a97a;--fr:#e9edf2}
.o3b.shelf{--tp:#c9a97a;--fr:#8a6a45}

/* hanging linear light over each desk */
.o3pend{position:absolute;left:58px;top:2px;width:118px;height:46px;pointer-events:none}
.o3pend i{position:absolute;display:block}
.o3pend .c1,.o3pend .c2{top:-30px;width:1px;height:34px;background:#222}.o3pend .c1{left:14px}.o3pend .c2{right:14px}
.o3pend .bar{left:0;right:0;top:4px;height:5px;border-radius:3px;background:linear-gradient(#fff7dd,#ffe8a8);box-shadow:0 0 12px rgba(255,236,170,calc(.4 + var(--glow) * .5)),0 1px 0 #111}
.o3pend .gl{left:-10px;right:-10px;top:8px;height:38px;background:linear-gradient(rgba(255,236,170,calc(.12 + var(--glow) * .12)),transparent);clip-path:polygon(10% 0,90% 0,100% 100%,0 100%)}

/* rolled drawing on the desk */
.o3roll{position:absolute;left:148px;top:79px;width:24px;height:5px;border-radius:3px;background:linear-gradient(#fffdf5,#d9d2bd);box-shadow:0 2px 0 #8b8369;pointer-events:none!important}
.o3roll::after{content:"";position:absolute;left:8px;top:0;width:3px;height:5px;background:#2563eb}

/* meeting room: oak slat wall, blueprint frames, architectural model on the table */
.o3t-wall{position:absolute;left:0;right:0;top:0;height:30px;border-radius:10px 10px 0 0;pointer-events:none!important;
  background:repeating-linear-gradient(90deg,#9a7448 0 9px,#7d5b36 9px 11px);box-shadow:inset 0 -6px 10px rgba(0,0,0,.35),0 2px 0 #1a1612}
.o3t-wall .bp{position:absolute;top:5px;width:84px;height:20px;background:linear-gradient(#1d4ed8,#1e40af);border:2px solid #f5f5f4;box-shadow:0 2px 4px rgba(0,0,0,.45);
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.28) 0 1px,transparent 1px 8px),repeating-linear-gradient(0deg,rgba(255,255,255,.28) 0 1px,transparent 1px 8px)}
.o3t-wall .bp::after{content:"";position:absolute;left:10px;top:4px;width:30px;height:8px;border:1.5px solid #fff;border-radius:1px;box-shadow:34px 2px 0 -1px rgba(255,255,255,.9)}
.o3t-wall .bp.b1{left:350px}.o3t-wall .bp.b2{left:446px}.o3t-wall .bp.b3{left:542px}
.jof-table .o3model{position:absolute;left:30px;top:18px;width:80px;height:46px;display:block}
.jof-table .o3model u{position:absolute;left:0;top:26px;width:80px;height:18px;border-radius:2px;background:#f4f1e8;box-shadow:0 3px 0 #a79f88,0 5px 4px rgba(0,0,0,.3)}
.jof-table .o3model s{position:absolute;display:block;background:linear-gradient(90deg,#fff,#d5dbe4);box-shadow:inset -3px 0 0 rgba(0,0,0,.12),0 -2px 0 #fff}
.jof-table .o3model .m1{left:8px;top:6px;width:14px;height:26px}.jof-table .o3model .m2{left:26px;top:14px;width:16px;height:18px;background:linear-gradient(90deg,#9fd0ff,#5ea8ee)}
.jof-table .o3model .m3{left:48px;top:2px;width:12px;height:30px}.jof-table .o3model .m4{left:64px;top:18px;width:10px;height:14px;background:linear-gradient(90deg,#c9a97a,#a78652)}
.o3pend .c1,.o3pend .c2{top:-6px;height:10px}
#jofStage .o3r-wall .jof-plate{color:color-mix(in srgb,var(--c) 68%,#000);text-shadow:none}
#jofStage .jof-card-t b{color:color-mix(in srgb,var(--c) 65%,#000)}
.o3t-wall .bp{background-color:#1d4ed8}

/* ===== v13: facing the screen, outfits, office life ===== */
.o3r-chair{top:106px}
.o3np{left:60px;width:46px}
#jofStage .jof-board{left:796px;width:136px}

/* at the desk: seen from behind, facing the monitor, sitting in a chair */
#jofStage .jof-a.is-back .jof-face,#jofStage .jof-a.is-back .jof-ear,#jofStage .jof-a.is-back .jof-visor,#jofStage .jof-a.is-back .jof-legs{display:none}
#jofStage .jof-a.is-back .jof-fig .jof-head::before,#jofStage .jof-a.is-back .jof-fig .jof-head::after{content:none!important}
#jofStage .jof-a.is-back .jof-hair{top:-1px;left:5px;width:18px;height:15px;border-radius:9px 9px 8px 8px}
#jofStage .jof-a.is-back .jof-fig.hs-long .jof-hairback{display:block;height:27px;top:-1px;z-index:3;left:4px}
#jofStage .jof-a.is-back .jof-fig.hs-long .jof-hair{height:15px}
#jofStage .jof-a.is-back .jof-fig.hs-cap .jof-hair{height:12px}
#jofStage .jof-a.is-back .jof-fig .jof-body::before,#jofStage .jof-a.is-back .jof-fig .jof-body::after{display:none}
#jofStage .jof-a.is-back .jof-fig .jof-body .material-icons{display:none}
#jofStage .jof-a.is-back .jof-fig::after{content:"";position:absolute;left:0;top:26px;width:28px;height:19px;border-radius:9px 9px 4px 4px;background:linear-gradient(180deg,#4b6890,#2a3d5d);box-shadow:inset 0 2px 0 rgba(255,255,255,.22),0 3px 4px rgba(0,0,0,.35);z-index:6}
#jofStage .jof-a.is-back .jof-arm.l{transform:rotate(-142deg)}
#jofStage .jof-a.is-back .jof-arm.r{transform:rotate(142deg)}
#jofStage .jof-a.is-back.is-typing .jof-arm.l{animation:o3-tapb-l .26s ease-in-out infinite}
#jofStage .jof-a.is-back.is-typing .jof-arm.r{animation:o3-tapb-r .26s ease-in-out infinite .1s}
@keyframes o3-tapb-l{0%,100%{transform:rotate(-142deg)}50%{transform:rotate(-128deg)}}
@keyframes o3-tapb-r{0%,100%{transform:rotate(142deg)}50%{transform:rotate(128deg)}}
#jofStage .jof-a.is-back .jof-fig{top:5px}

/* outfits */
.of-suit .jof-body{background:linear-gradient(180deg,#26324f,#101827)!important}
.of-suit .jof-arm{background:linear-gradient(90deg,#2a3656,#141c30)!important}
.of-suit.tie .jof-body::after{background:var(--c)!important}
.of-suit .jof-legs b{background:linear-gradient(90deg,#1f2a44,#101827)!important}
.of-blazer .jof-body{background:linear-gradient(90deg,transparent 12.5px,rgba(0,0,0,.3) 12.5px 13.5px,transparent 13.5px),linear-gradient(180deg,color-mix(in srgb,var(--c) 92%,#fff),color-mix(in srgb,var(--c) 50%,#000))!important}
.of-dress .jof-body::before{left:7px;width:12px;clip-path:polygon(0 0,100% 0,50% 100%)}
.of-dress .jof-legs b{background:linear-gradient(90deg,var(--skin),color-mix(in srgb,var(--skin) 80%,#000))!important}
.of-dress .jof-legs b::after{background:#7f1d1d!important}
.of-dress .jof-legs::before{content:"";position:absolute;left:-7px;top:-6px;width:30px;height:10px;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 90%,#fff),color-mix(in srgb,var(--c) 55%,#000));clip-path:polygon(18% 0,82% 0,100% 100%,0 100%);z-index:2}
.of-hoodie .jof-body::before{left:5px;width:16px;height:8px;background:color-mix(in srgb,var(--c) 65%,#000)!important;clip-path:none!important;border-radius:0 0 9px 9px}
.of-hoodie .jof-body::after{content:"";position:absolute;left:6px;top:11px;width:14px;height:6px;border-radius:2px;background:rgba(0,0,0,.2)}
.of-hoodie .jof-legs b{background:linear-gradient(90deg,#355a96,#27446f)!important}
.of-vest .jof-body{background:linear-gradient(90deg,transparent 0 4px,#f97316 4px 22px,transparent 22px),linear-gradient(180deg,#8fa0b8,#566579)!important}
.of-vest .jof-body::after{content:"";position:absolute;left:4px;top:9px;width:18px;height:2px;background:#e5e7eb;box-shadow:0 5px 0 #e5e7eb}
.of-vest .jof-legs b{background:linear-gradient(90deg,#7a6a52,#5b4d3a)!important}
.of-cardi .jof-body{background:linear-gradient(90deg,var(--c) 0 6px,#f8fafc 6px 20px,var(--c) 20px)!important}
.of-cardi .jof-body::before{background:rgba(190,24,93,.3)}
.of-apron .jof-body{background:linear-gradient(180deg,#14b8a6,#0f766e)!important}
.of-apron .jof-body::after{content:"";position:absolute;left:6px;top:6px;width:14px;height:14px;background:#f8fafc;border-radius:2px 2px 0 0}
.of-apron .jof-legs b{background:linear-gradient(90deg,#334155,#1e293b)!important}
#jofStage .jof-npc .jof-hair{background:#0d9488!important}

/* the boss and his suitcase */
#jofStage .jof-boss.jof-a{display:block;transform:scale(1.22);transform-origin:22px 34px;gap:0;flex-direction:initial}
#jofStage .jof-boss .jof-tag{color:#fde68a;border-color:rgba(251,191,36,.7)}
#jofStage .jof-boss.is-talking .jof-wave{display:flex}
.jof-case{position:absolute;left:24px;top:35px;width:14px;height:10px;border-radius:2px;background:linear-gradient(180deg,#6b3f1d,#3f2410);box-shadow:inset 0 0 0 1px #2a170a,0 2px 3px rgba(0,0,0,.4);z-index:7}
.jof-case::before{content:"";position:absolute;left:3px;top:-4px;width:8px;height:5px;border:1.5px solid #2a170a;border-bottom:0;border-radius:3px 3px 0 0}
.jof-case::after{content:"";position:absolute;left:5.5px;top:3px;width:3px;height:3px;background:#f5d98b;border-radius:1px}
#jofStage .jof-boss.is-walking .jof-arm.r{animation:none;transform:rotate(3deg)}
#jofStage .jof-boss.is-seated .jof-case{left:31px;top:46px}
#jofStage .jof-boss.is-seated.face-l .jof-case{left:31px}

/* life in the office */
#jofStage .jof-a.is-away{opacity:0;transition:opacity .25s}
#jofStage .jof-a.has-cup::after{content:"\2615";position:absolute;right:-4px;top:24px;font-size:11px;z-index:8}
#jofStage .jof-a.has-food::before{content:"\1F96A";position:absolute;left:15px;top:46px;font-size:12px;z-index:8}
#jofStage .jof-a.is-stretch .jof-arm.l{animation:o3-st-l 1.1s ease-in-out infinite}
#jofStage .jof-a.is-stretch .jof-arm.r{animation:o3-st-r 1.1s ease-in-out infinite}
@keyframes o3-st-l{0%,100%{transform:rotate(-160deg)}50%{transform:rotate(-174deg)}}
@keyframes o3-st-r{0%,100%{transform:rotate(160deg)}50%{transform:rotate(174deg)}}
.o3wc{position:absolute;left:948px;top:50px;width:26px;height:64px;pointer-events:none}
.o3wc .sign{position:absolute;left:2px;top:0;width:22px;height:14px;border-radius:3px;background:#0f172a;border:1px solid #64748b}
.o3wc .sign u{position:absolute;left:3px;top:3px;width:7px;height:7px;border-radius:50%;background:#38bdf8}
.o3wc .sign s{position:absolute;right:3px;top:3px;width:7px;height:7px;border-radius:50%;background:#f472b6}
.o3wc .dr{position:absolute;left:2px;top:16px;width:22px;height:48px;background:linear-gradient(90deg,#d6dbe3,#aab3c0);border:1px solid #14171c;border-radius:2px 2px 0 0;transform-origin:0 50%;transition:transform .4s;box-shadow:0 0 0 20px rgba(0,0,0,0)}
.o3wc::after{content:"";position:absolute;left:2px;top:16px;width:22px;height:48px;background:#05080f;z-index:-1;border-radius:2px 2px 0 0}
.o3wc .dr::after{content:"";position:absolute;right:3px;top:22px;width:3px;height:6px;background:#475569;border-radius:1px}
.o3wc.open .dr{transform:perspective(120px) rotateY(-62deg)}
.o3wet{position:absolute;width:14px;height:17px;margin:-8px 0 0 -7px;clip-path:polygon(50% 0,100% 100%,0 100%);background:#facc15;pointer-events:none}
.o3wet b{position:absolute;left:0;right:0;top:6px;text-align:center;font:900 9px/10px Arial;color:#111}
.jof-mop{position:absolute;left:27px;top:6px;width:2px;height:44px;background:#9a7448;transform-origin:50% 0;transform:rotate(6deg);z-index:7}
.jof-mop::after{content:"";position:absolute;left:-6px;bottom:-4px;width:14px;height:6px;border-radius:2px 2px 5px 5px;background:repeating-linear-gradient(90deg,#e2e8f0 0 2px,#94a3b8 2px 3px)}
#jofStage .jof-npc.is-mop .jof-mop{animation:o3-mopsw .7s ease-in-out infinite}
@keyframes o3-mopsw{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(22deg)}}
#jofStage .jof-npc .jof-tag{font-size:9px;opacity:.85}
.o3pend .c1,.o3pend .c2{display:none}
#jofStage .jof-a.is-back:not(.is-hot) .jof-tag{opacity:0}

/* ===== v14: profile view at the table, cash flow panel ===== */
#jofStage .jof-a.is-back.is-seated .jof-tag{opacity:1}
/* a person looking sideways (Jarvis and the boss at the meeting table): one eye, nose, turned head */
#jofStage .jof-a.is-profile .jof-head,#jofStage .jof-a.is-profile .jof-face,#jofStage .jof-a.is-profile .jof-hair{transform:translateX(2px)}
#jofStage .jof-a.is-profile .jof-fig .jof-head::before{left:8.5px;top:6px;box-shadow:none}
#jofStage .jof-a.is-profile .jof-fig .jof-face::before{left:10.6px;top:7.2px;box-shadow:-.4px -3.2px 0 -.6px rgba(0,0,0,.6)}
#jofStage .jof-a.is-profile .jof-fig .jof-face::after{left:9.5px;top:12.2px;width:4px}
#jofStage .jof-a.is-profile .jof-fig .jof-head::after{content:"";position:absolute;left:14.2px;top:8px;width:3px;height:4px;border-radius:0 3px 3px 0;background:color-mix(in srgb,var(--skin) 88%,#000);box-shadow:none;border:0;opacity:1}
#jofStage .jof-a.is-profile .jof-ear.r{display:none}
#jofStage .jof-a.is-profile .jof-ear.l{left:7px;transform:translateX(2px)}
#jofStage .jof-a.is-profile .jof-visor{left:12px;width:10px}
#jofStage .jof-a.is-profile .jof-body::before{left:11px}
.jof-cashbtn b{font-size:10px;padding:0 6px;border-radius:999px;background:#34d399;color:#04101f;line-height:16px}
.jof-cash{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.jof-cash-card .jof-rep-h b{display:inline-flex;align-items:center;gap:4px}
.jof-cash-card .jof-rep-h b .material-icons{font-size:16px;width:16px;height:16px;overflow:hidden}
.jof-cash-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:3px 0;border-bottom:1px dashed rgba(125,211,252,.15);font-size:12px;color:#cfeefa}
.jof-cash-row b{font-size:19px;color:var(--c);font-weight:800;letter-spacing:.02em}
.jof-cash-row.is-zero{color:#7c9db0}
.jof-cash-sub{margin:7px 0 2px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#8fb7cc}
.jof-cash-note{grid-column:1/-1;display:flex;gap:6px;align-items:center;font-size:11px;color:#8fb7cc;padding:4px 2px}
.jof-cash-note .material-icons{font-size:14px;width:14px;height:14px;overflow:hidden}

/* the scene can be wider than the building: the world around it fills the card */
.o3-tile{position:absolute;top:0;width:1000px;height:100%;pointer-events:none}
.o3-walk{left:calc(-1 * var(--ox,0px) - 20px);right:calc(-1 * var(--ox,0px) - 20px);width:auto}
.jof-viewport.is-follow{overflow:hidden}
.jof-viewport.is-follow .jof-stage{transition:transform .45s ease-out}
/* neighbouring buildings on both sides of the HQ, so a wide card is filled */
.o3-wing{position:absolute;top:96px;height:700px;pointer-events:none;
  background:
   repeating-linear-gradient(90deg,transparent 0 26px,rgba(0,0,0,.35) 26px 30px),
   repeating-linear-gradient(0deg,rgba(255,214,130,calc(var(--winOn) * .5)) 0 10px,transparent 10px 34px),
   linear-gradient(180deg,var(--bNear),color-mix(in srgb,var(--bNear) 55%,#000));
  box-shadow:inset 0 10px 0 var(--bTop)}
.o3-wing.l{left:calc(-1 * var(--ox,0px) - 40px);width:calc(var(--ox,0px) + 26px)}
.o3-wing.r{left:1014px;width:calc(var(--ox,0px) + 40px)}
/* walking away from you: back of the head, legs and arms moving (no chair) */
#jofStage .jof-a.is-back.is-walking .jof-fig::after{display:none}
#jofStage .jof-a.is-back.is-walking .jof-legs{display:block}
#jofStage .jof-a.is-back.is-walking .jof-arm.l{transform:none}
#jofStage .jof-a.is-back.is-walking .jof-arm.r{transform:none}
#jofStage .jof-a.is-back.is-walking .jof-fig{top:6px}

/* ===== v15: boss office, restroom (cut-away), clock, water cooler ===== */
.o3wc::after{content:none!important}
#jofStage .jof-board{left:640px;top:3px;width:150px;height:24px;display:flex;align-items:center;gap:7px;padding:0 7px;border-width:2px;font-size:9px;line-height:1;z-index:5}
#jofStage .jof-board b{display:none}
#jofStage .jof-board span{display:flex;flex-direction:column;align-items:center;gap:1px;justify-content:center}
#jofStage .jof-board em{font-size:11px}
.bo-floor{position:absolute;border-radius:3px;pointer-events:none;background:repeating-linear-gradient(90deg,#4a3320 0 18px,#3d2a1a 18px 19px);box-shadow:inset 0 0 0 2px #b8914d,inset 0 -10px 18px rgba(0,0,0,.35)}
.bo-rug{position:absolute;border-radius:6px;pointer-events:none;background:radial-gradient(ellipse,#7f1d2d,#4a0f1a);box-shadow:inset 0 0 0 2px #d4a62a,inset 0 0 0 6px rgba(0,0,0,.25)}
.bo-plate{position:absolute;padding:2px 9px;border-radius:2px;background:linear-gradient(#e9c46a,#b8862b);color:#2b1a05;font:900 8px/10px Inter,Arial,sans-serif;letter-spacing:.22em;box-shadow:0 1px 0 #6b4a12,0 0 10px rgba(233,196,106,.35);pointer-events:none}
.o3b.bshelf{--tp:#8a5a2c;--fr:#5b3a1b}
.bo-books{position:absolute;display:flex;gap:2px;align-items:flex-end;height:36px;width:56px;pointer-events:none}
.bo-books s{display:block;width:6px;border-radius:1px}
.bo-books s:nth-child(1){height:30px;background:#2563eb}.bo-books s:nth-child(2){height:24px;background:#dc2626}.bo-books s:nth-child(3){height:32px;background:#16a34a}
.bo-books s:nth-child(4){height:26px;background:#f59e0b}.bo-books s:nth-child(5){height:30px;background:#7c3aed}.bo-books s:nth-child(6){height:22px;background:#e5e7eb}
.bo-flag{position:absolute;width:26px;height:34px;pointer-events:none}
.bo-flag::before{content:"";position:absolute;left:12px;top:0;width:2px;height:34px;background:#cbd5e1}
.bo-flag i{position:absolute;left:14px;top:2px;width:18px;height:11px;background:linear-gradient(90deg,#14b8a6 0 50%,#0f172a 50%);animation:o3-flagw 2.4s ease-in-out infinite;transform-origin:0 50%}
@keyframes o3-flagw{50%{transform:skewY(5deg) scaleX(.92)}}
.bo-cert{position:absolute;width:26px;height:18px;background:linear-gradient(#fffdf2,#efe7c8);border:2px solid #b8914d;box-shadow:0 2px 4px rgba(0,0,0,.4);pointer-events:none}
.o3b.bdesk{--tp:#7a4a22;--fr:#4a2c12}
.o3b.bdesk .t{background:linear-gradient(135deg,#8b5a2b,#5e3a18)}
.o3b.bdesk .f{background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(0,0,0,.25)),#5a3517;border-bottom:3px solid #d4a62a}
.o3b.bdesk .f::before{background:rgba(0,0,0,.2)}
.bochair .bk{background:linear-gradient(180deg,#6b4423,#3d2410)!important}
.o3b.sofa{--tp:#7a4a22;--fr:#4c2d14}
.o3b.sofa .t{border-radius:6px 6px 0 0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 -6px 0 rgba(0,0,0,.18)}
.bo-glass{position:absolute;pointer-events:none;background:linear-gradient(180deg,rgba(210,235,255,.5),rgba(130,180,230,.25));border:2px solid #14171c;box-shadow:0 0 8px rgba(120,190,255,.25)}
.bo-glass.h{border-width:2px;background:linear-gradient(180deg,rgba(210,235,255,.4),rgba(130,180,230,.2))}
/* clock */
.o3clock{position:absolute;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle,#fffef7,#e5e7eb);border:2px solid #14171c;box-shadow:0 2px 4px rgba(0,0,0,.45);pointer-events:none}
.o3clock i{position:absolute;left:50%;bottom:50%;width:2px;margin-left:-1px;background:#111;transform-origin:50% 100%;border-radius:1px}
.o3clock .hh{height:6px}.o3clock .mm{height:9px;width:1.5px}
.o3clock::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;background:#ef4444;border-radius:50%}
/* water cooler */
.o3-cooler{position:absolute;width:22px;height:46px;pointer-events:none}
.o3-cooler .tank{position:absolute;left:3px;top:0;width:16px;height:18px;border-radius:7px 7px 3px 3px;background:linear-gradient(90deg,rgba(186,230,253,.95),rgba(56,189,248,.7));box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.o3-cooler .body{position:absolute;left:1px;top:17px;width:20px;height:29px;border-radius:2px;background:linear-gradient(90deg,#f1f5f9,#cbd5e1);box-shadow:0 3px 4px rgba(0,0,0,.35),inset 0 5px 0 #38bdf8}
/* restroom */
.o3wc{position:absolute;pointer-events:none}
.o3wc i{position:absolute;display:block}
.o3wc .fl{left:0;top:0;width:92px;height:90px;border-radius:2px;background:repeating-linear-gradient(90deg,transparent 0 11px,rgba(0,0,0,.22) 11px 12px),repeating-linear-gradient(0deg,transparent 0 11px,rgba(0,0,0,.22) 11px 12px),linear-gradient(#cfe8f5,#a9cde0);box-shadow:inset 0 0 0 2px #14171c}
.o3wc .bw{left:-3px;top:-6px;width:98px;height:26px;background:repeating-linear-gradient(90deg,transparent 0 9px,rgba(0,0,0,.12) 9px 10px),linear-gradient(#e6f4fb,#bcd9e8);border:2px solid #14171c;box-shadow:0 3px 6px rgba(0,0,0,.35)}
.o3wc .bw b{position:absolute;right:6px;top:6px;padding:1px 6px;border-radius:2px;background:#0f172a;color:#7dd3fc;font:900 9px/11px Inter,Arial,sans-serif;letter-spacing:.2em}
.o3wc .mirror{left:8px;top:0;width:24px;height:14px;background:linear-gradient(135deg,#f8fdff,#9ed3ec);border:2px solid #475569}
.o3wc .lw{left:-4px;width:5px;background:linear-gradient(180deg,rgba(210,235,255,.55),rgba(130,180,230,.3));border:2px solid #14171c}
.o3wc .lw.t{top:20px;height:28px}.o3wc .lw.b{top:80px;height:10px}
.o3wc .wdoor{left:-4px;top:48px;width:5px;height:32px;background:linear-gradient(#cbd5e1,#94a3b8);border:2px solid #14171c;transition:opacity .3s}
.o3wc.open .wdoor{opacity:0}
.o3wc .stl{left:52px;top:22px;width:4px;height:50px;background:linear-gradient(#f1f5f9,#cbd5e1);border:1px solid #14171c}
.o3wc .sdoor{left:55px;top:64px;width:36px;height:14px;display:none;background:linear-gradient(#e2e8f0,#94a3b8);border:2px solid #14171c;border-radius:2px 2px 0 0}
.o3wc .sdoor::after{content:"";position:absolute;left:4px;top:4px;width:5px;height:3px;background:#ef4444;border-radius:1px}
.o3wc.shut .sdoor{display:block}
.o3b.sink{--tp:#f8fafc;--fr:#cbd5e1}
.o3b.toilet{--tp:#ffffff;--fr:#dbe4ee}
.o3b.toilet .t{border-radius:8px}

/* v17: no side wings, no whole-scene sway (it made the edges shake) */
.o3-wing.l,.o3-wing.r{display:none!important}
.o3-sway{animation:none!important}
/* v17: calm side backdrop so the edges are not an empty black gap */
.o3-layer.l-bld::before{content:"";position:absolute;left:calc(-1 * var(--ox,0px) - 40px);right:calc(-1 * var(--ox,0px) - 40px);top:104px;bottom:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 22px,rgba(255,255,255,.035) 22px 24px),linear-gradient(var(--bNear,#1b2742),#0a1022 78%)}
.o3-roof{display:none!important}

/* v18: bright morning light, stronger 3D, no zoom */
.o3-cam[data-tod="morning"]{--sk1:#4f9bf0;--sk2:#a6d8f8;--sk3:#ffe8c2;--bFar:rgba(128,160,198,.82);--bNear:#587796;--bTop:#8ca8c8;--winOn:.04;--cloud:rgba(255,255,255,.96);--starOp:0;--sunOp:1;--moonOp:0;--sunX:14%;--sunY:60px;--hl:.55;--glow:.5;--tint:rgba(255,236,190,.12);--ground:#33465f}
.o3-layer.l-bld{filter:brightness(1.1) saturate(1.12) contrast(1.03) drop-shadow(0 22px 20px rgba(0,0,0,.5))}
.o3-layer.l-street{filter:brightness(1.1) saturate(1.1)}
.o3-stage::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:9;border-radius:14px;
  background:
   linear-gradient(112deg,rgba(255,240,200,.30) 0%,rgba(255,240,200,0) 34%),
   repeating-linear-gradient(112deg,rgba(255,244,214,0) 0 62px,rgba(255,244,214,.07) 62px 96px),
   radial-gradient(ellipse at 14% 4%,rgba(255,226,160,.38),rgba(255,226,160,0) 48%),
   radial-gradient(ellipse at 50% 120%,rgba(0,0,0,.28),rgba(0,0,0,0) 60%);
  mix-blend-mode:soft-light}
#jofZoom{display:none!important}
.o3-layer.l-bld::before{background:repeating-linear-gradient(90deg,transparent 0 22px,rgba(255,255,255,.07) 22px 24px),linear-gradient(#86a6c8,#4a6688 55%,#243650)!important}
.o3-cam[data-tod="morning"]{--sk1:#3d8cf5;--sk2:#8fd0ff;--sk3:#fff0cf;--bFar:rgba(150,184,222,.85);--bNear:#6a8cb2;--bTop:#a4bfdc}
.o3-stage::after{background:
   linear-gradient(112deg,rgba(255,240,200,.34) 0%,rgba(255,240,200,0) 38%),
   repeating-linear-gradient(112deg,rgba(255,244,214,0) 0 62px,rgba(255,244,214,.09) 62px 96px),
   radial-gradient(ellipse at 14% 4%,rgba(255,226,160,.45),rgba(255,226,160,0) 50%)!important}

/* v19 */
.jof-btn.jof-ic{padding:6px 8px}.jof-btn.jof-ic.is-on{box-shadow:0 0 0 1px #38bdf8 inset;color:#7dd3fc}
.o3-stage.no-street .o3-veh,.o3-stage.no-street .o3-ped,.o3-stage.no-street .o3-flock,.o3-stage.no-street .o3-fly{display:none!important}
.jof-restock{position:absolute;left:5px;top:44px;width:58px;padding:3px 4px;border-radius:3px;background:#fff8d6;color:#3b2f00;font:600 5px/1.5 system-ui,sans-serif;box-shadow:0 2px 4px rgba(0,0,0,.45);transform:rotate(-2deg);z-index:130;pointer-events:none}
.jof-restock b{display:block;font-size:5.5px;letter-spacing:.06em;color:#b91c1c;border-bottom:1px solid rgba(0,0,0,.2);margin-bottom:1px}
.jof-restock i{display:block;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jof-restock i.o::before{content:"● ";color:#dc2626}.jof-restock i.l::before{content:"● ";color:#d97706}
.jof-room.is-alarm{animation:jofAlarm .7s ease-in-out infinite}
@keyframes jofAlarm{50%{box-shadow:0 0 0 3px #ef4444,0 0 24px #ef4444}}
.jof-restock{left:4px!important;top:92px!important;transform:translateZ(120px) rotate(-3deg)!important}
.jof-asks{flex-wrap:wrap!important;overflow:visible!important;row-gap:5px}
.jof-restock{transform:translateZ(320px) rotate(-3deg)!important;top:78px!important}
.jof-restock{z-index:999!important}
@media (max-width:700px){
  .jof-asks{flex-wrap:nowrap!important;overflow-x:auto!important}
  .jof-bar-top{gap:6px}
}