*{box-sizing:border-box}html,body{margin:0;background:#02070b;color:#eef5ff;font-family:Inter,Arial,sans-serif}body{min-height:100vh;overflow-x:hidden}a{text-decoration:none;color:inherit}button,input,select{font:inherit}.app-frame{min-height:100vh;display:grid;grid-template-columns:198px 1fr;background:#02070b}.sidebar{background:linear-gradient(180deg,#03101a,#020911 72%,#06111a);border-right:1px solid #132838;padding:12px 10px;display:flex;flex-direction:column;min-height:100vh}.brand{height:72px;display:flex;gap:10px;align-items:flex-start;color:white}.brand-mark{font-size:42px;color:#ffb72b;line-height:1}.brand b{font-size:24px;letter-spacing:1px}.brand small{display:block;color:#ffba2e;font-size:9px;line-height:1.35;letter-spacing:1px}.side-nav{display:grid;gap:6px;margin-top:8px}.side-nav a,.side-nav button{height:50px;border:1px solid transparent;border-radius:10px;background:transparent;color:#b8c7d8;text-align:left;padding:0 15px;font-size:14px;cursor:pointer}.side-nav span{display:inline-block;width:31px;font-size:19px}.side-nav .active{border-color:#d68a13;background:#0b141b;color:#ffd36d;box-shadow:inset 4px 0 10px #ffb00033,0 0 12px #ff9d001a}.join-card{margin-top:auto;border:1px solid #163149;border-radius:12px;padding:16px 14px;background:radial-gradient(circle at 30% 10%,#ff9d0024,transparent 35%),#07121b;min-height:260px;color:#f8c34d}.join-agent{height:95px;display:grid;place-items:center;font-size:62px;text-shadow:0 0 25px #ff9d00}.join-card b{font-size:17px}.join-card p{font-size:11px;line-height:1.5;letter-spacing:1px}.main-area{min-width:0}.topbar{height:66px;display:flex;gap:6px;align-items:center;padding:7px 10px;background:#020b12;border-bottom:1px solid #11283a}.metric{height:52px;min-width:165px;border:1px solid #12293a;border-radius:9px;background:#06111a;display:flex;align-items:center;gap:10px;padding:8px 12px}.metric i{font-style:normal;color:#ffb72b;font-size:22px}.metric i.green{width:18px;height:18px;border-radius:50%;background:#10ee59;box-shadow:0 0 14px #10ee59}.metric span{font-size:9px;color:#a8b5c3}.metric b{display:block;font-size:17px;color:#f3f6fa;margin-top:2px}.top-spacer{flex:1}.wallet-chip,.user-chip{height:43px;border:1px solid #1a3346;border-radius:12px;background:#06111a;color:#f5f7f9;padding:0 16px;display:grid;place-items:center;font-weight:800}.user-chip{min-width:48px;padding:0;cursor:pointer}.dashboard{padding:0 10px 10px}.office-viewport{position:relative;border:1px solid #132b3c;border-radius:0 0 12px 12px;overflow:hidden;background:#03080d;box-shadow:0 18px 50px #0008}.office{position:relative;width:100%;aspect-ratio:1340/721;min-height:540px;overflow:hidden}.office-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}.agent-hotspot{position:absolute;border:0;background:transparent;cursor:pointer;border-radius:22px;z-index:5}.agent-hotspot:after{content:"";position:absolute;inset:0;border:1px solid transparent;border-radius:inherit;transition:.2s}.agent-hotspot:hover:after{border-color:#ffd05a;box-shadow:0 0 25px #ffad0066,inset 0 0 20px #ffad0022}.trading{left:12%;top:35%;width:24%;height:31%}.analytics{left:32%;top:16%;width:24%;height:31%}.marketing{left:61%;top:33%;width:24%;height:30%}.launch{left:19%;top:60%;width:25%;height:30%}.wallet{left:54%;top:62%;width:25%;height:29%}.scanner{left:79%;top:51%;width:20%;height:37%}.office-live-dot{position:absolute;width:8px;height:8px;border-radius:50%;background:#ffd03f;box-shadow:0 0 18px #ffb000;z-index:6;animation:pulse 1.5s infinite}.d1{left:47%;top:50%}.d2{left:67%;top:37%;animation-delay:.5s}.d3{left:28%;top:53%;animation-delay:1s}@keyframes pulse{50%{transform:scale(2);opacity:.25}}.bottom-panels{display:grid;grid-template-columns:1fr 1fr 1.12fr;gap:10px;margin-top:6px}.bottom-panels article{background:#06111a;border:1px solid #153047;border-radius:10px;padding:10px 12px;min-width:0}.bottom-panels header{display:flex;align-items:center;justify-content:space-between;color:#f5f7fa;font-size:11px;border-bottom:1px solid #102638;padding-bottom:8px}.bottom-panels header b:first-letter{color:#ffb72b}.bottom-panels header button{font-size:8px;border:1px solid #19374d;background:#07141e;color:#8ea0af;border-radius:6px;padding:5px 9px}.bottom-panels p{margin:7px 0;font-size:10px;color:#aebdca;display:flex;gap:8px;align-items:center}.bottom-panels strong{margin-left:auto;color:#20ef7b}.bottom-panels small{width:42px;text-align:right;color:#657888}.bottom-panels em{margin-left:auto;font-style:normal;color:#ffbf3b;background:#3b2909;border-radius:5px;padding:3px 8px}.modal{display:none;position:fixed;inset:0;background:#000d;z-index:100;place-items:center;padding:18px;backdrop-filter:blur(8px)}.modal.show{display:grid}.modalbox{position:relative;width:min(460px,100%);background:linear-gradient(145deg,#101820,#04080c);border:1px solid #8d5b12;border-radius:18px;padding:26px;text-align:center;box-shadow:0 0 70px #000}.close{position:absolute;right:14px;top:14px;width:34px;height:34px;border:0;border-radius:50%;background:#1b2228;color:white;font-size:22px}.modal-icon{font-size:45px;color:#ffb72b}.eyebrow{font-size:9px;letter-spacing:2px;color:#ffbd45}.muted{color:#87939d}.agent-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:17px 0}.agent-stats span{padding:10px;background:#05090d;border:1px solid #202a31;border-radius:9px}.agent-stats b,.agent-stats small{display:block}.agent-stats b{color:#ffbd3b}.agent-stats small{font-size:7px;color:#7c8993}.modalbox form{display:grid;gap:9px}.modalbox input,.modalbox select{padding:13px;background:#04070a;color:#fff;border:1px solid #29343c;border-radius:9px}.modalbox form button,.gold-btn{width:100%;padding:13px;border:0;border-radius:9px;background:linear-gradient(135deg,#ffc348,#d88800);color:#111;font-weight:1000}.dark-btn{display:block;width:100%;padding:12px;border:1px solid #39434a;border-radius:9px;color:#fff;margin-top:9px}.linkbtn{display:block;margin-top:9px}.micro{font-size:9px;color:#76828b}.success,.error,.processing{margin-top:12px;padding:10px;border-radius:8px}.success{background:#0c291d;color:#54e69d}.error{background:#2b1010;color:#ff7777}.processing{background:#111a21}.auth{min-height:100vh;display:grid;place-items:center;padding:24px}.auth .panel,.panel{background:#09111a;border:1px solid #1e2a35;border-radius:14px;padding:20px}.auth .panel{width:min(460px,100%)}
@media(max-width:900px){.app-frame{display:block}.sidebar{position:fixed;z-index:60;left:0;right:0;bottom:0;min-height:0;height:62px;padding:5px;background:#03101af5;border-right:0;border-top:1px solid #193248}.sidebar .brand,.join-card{display:none}.side-nav{display:flex;overflow-x:auto;margin:0;gap:2px}.side-nav a,.side-nav button{min-width:72px;height:50px;padding:4px;text-align:center;font-size:9px}.side-nav span{display:block;width:auto;font-size:17px}.topbar{height:58px;overflow-x:auto}.metric{min-width:130px;height:44px;padding:5px 8px}.metric span{font-size:7px}.metric b{font-size:13px}.wallet-chip,.user-chip{display:none}.dashboard{padding:0 0 72px}.office-viewport{overflow-x:auto;border-radius:0;touch-action:pan-x}.office{width:1100px;min-height:590px;aspect-ratio:1340/721}.bottom-panels{grid-template-columns:1fr;margin:7px}.bottom-panels article:nth-child(n+2){display:none}}
/* Living office motion layer */
.office-art{transform:scale(1.012);animation:officeBreath 8s ease-in-out infinite alternate;transform-origin:center center;will-change:transform,filter}
@keyframes officeBreath{0%{transform:scale(1.012) translate3d(0,0,0);filter:brightness(.98)}100%{transform:scale(1.028) translate3d(-.25%,.18%,0);filter:brightness(1.06)}}
.office:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(105deg,transparent 30%,#ffc23a0a 46%,#fff3bd18 50%,#ffc23a08 54%,transparent 70%);transform:translateX(-120%);animation:lightSweep 9s linear infinite}
@keyframes lightSweep{to{transform:translateX(120%)}}
.agent-hotspot{z-index:8;animation:hotspotFloat 3.6s ease-in-out infinite alternate}
.agent-hotspot:nth-of-type(2n){animation-delay:-1.4s}.agent-hotspot:nth-of-type(3n){animation-delay:-2.3s}
@keyframes hotspotFloat{from{transform:translateY(0)}to{transform:translateY(-3px)}}
.office-live-dot{z-index:9;animation:pulse 1.25s infinite,drift 6s ease-in-out infinite alternate}
@keyframes drift{to{margin-left:16px;margin-top:-10px}}
.feed-track{position:relative;overflow:hidden;max-height:112px}.feed-track p{animation:feedGlow 4s ease-in-out infinite}.feed-track p:nth-child(2){animation-delay:.5s}.feed-track p:nth-child(3){animation-delay:1s}.feed-track p:nth-child(4){animation-delay:1.5s}.feed-track p:nth-child(5){animation-delay:2s}
@keyframes feedGlow{0%,75%,100%{background:transparent}82%{background:#0d2432;transform:translateX(0)}88%{transform:translateX(3px)}}
.bottom-panels p span{color:#8fa5b5;white-space:nowrap}.bottom-panels p small{margin-left:auto;width:auto;min-width:58px}.bottom-panels p strong{margin-left:auto;white-space:nowrap}.live-feeds article{box-shadow:inset 0 0 30px #0b203055}
@media(prefers-reduced-motion:reduce){.office-art,.office:before,.agent-hotspot,.office-live-dot,.feed-track p{animation:none!important}}
/* Real game layer: the office artwork is scenery only; UI and agents are independent. */
.office{min-height:0;aspect-ratio:1597/864;background:#02070b;isolation:isolate}
.office-art{animation:none!important;transform:none!important;object-fit:cover;z-index:0}
.office:before{z-index:1}.core-glow{position:absolute;left:45%;top:43%;width:13%;aspect-ratio:1;border-radius:35%;background:#ffc3292a;filter:blur(22px);z-index:2;animation:corePulse 1.7s ease-in-out infinite alternate;pointer-events:none}
@keyframes corePulse{to{transform:scale(1.16);filter:blur(29px);opacity:.55}}
.scan-line{position:absolute;z-index:2;left:0;right:0;height:2px;top:20%;background:linear-gradient(90deg,transparent,#32d9ff88,transparent);box-shadow:0 0 15px #32d9ff;opacity:.35;animation:scanOffice 8s linear infinite;pointer-events:none}@keyframes scanOffice{0%{top:17%}50%{top:83%}100%{top:17%}}
.function-node{position:absolute;z-index:12;border:1px solid currentColor;background:#03080de8;color:#fff;border-radius:10px;padding:7px 15px;font-weight:900;font-size:12px;letter-spacing:.4px;box-shadow:0 0 18px currentColor;cursor:pointer;transition:.2s;backdrop-filter:blur(4px)}.function-node:hover{transform:translateY(-3px) scale(1.04);filter:brightness(1.2)}
.analyst{left:36%;top:21%;color:#20c9ff}.trader{left:66%;top:22%;color:#ff334e}.launch{left:17%;top:43%;color:#ffc027}.marketing{left:76%;top:43%;color:#ed4cff}.support{left:25%;top:68%;color:#21ef8a}.wallet{left:59%;top:69%;color:#23e9ff}.scanner{left:83%;top:69%;color:#f2f5ff}
.game-agent{position:absolute;z-index:10;width:48px;height:66px;background-image:url('/assets/img/agent-sprites.png?v=202609260400');background-size:256px 264px;background-position:0 0;image-rendering:pixelated;filter:drop-shadow(0 7px 6px #0009);pointer-events:none;animation-timing-function:steps(1),linear;animation-iteration-count:infinite}
.game-agent.v2{background-position-y:-88px}.game-agent.v3{background-position-y:-176px}
.route-a{animation:walkFrames .48s steps(4) infinite,routeA 16s linear infinite}.route-b{animation:walkFrames2 .48s steps(4) infinite,routeB 19s linear infinite}.route-c{animation:walkFrames3 .48s steps(4) infinite,routeC 14s linear infinite}.route-d{animation:walkFrames .48s steps(4) infinite,routeD 22s linear infinite}
.worker{animation:workBob 1.6s ease-in-out infinite alternate}.w1{left:39%;top:32%}.w2{left:70%;top:50%;animation-delay:-.7s}
@keyframes walkFrames{to{background-position-x:-256px}}@keyframes walkFrames2{to{background-position-x:-256px}}@keyframes walkFrames3{to{background-position-x:-256px}}
@keyframes routeA{0%{left:28%;top:57%;transform:scaleX(1)}24%{left:43%;top:53%;transform:scaleX(1)}48%{left:55%;top:63%;transform:scaleX(1)}52%{transform:scaleX(-1)}76%{left:43%;top:70%;transform:scaleX(-1)}100%{left:28%;top:57%;transform:scaleX(-1)}}
@keyframes routeB{0%{left:62%;top:33%;transform:scaleX(1)}35%{left:78%;top:55%;transform:scaleX(1)}50%{left:70%;top:68%;transform:scaleX(-1)}80%{left:53%;top:52%;transform:scaleX(-1)}100%{left:62%;top:33%;transform:scaleX(1)}}
@keyframes routeC{0%{left:18%;top:65%}40%{left:32%;top:46%}65%{left:44%;top:40%}100%{left:18%;top:65%}}
@keyframes routeD{0%{left:80%;top:34%;transform:scaleX(-1)}50%{left:58%;top:43%;transform:scaleX(-1)}52%{transform:scaleX(1)}100%{left:80%;top:34%;transform:scaleX(1)}}
@keyframes workBob{to{transform:translateY(-4px) rotate(-2deg)}}
@media(max-width:900px){.office{width:1100px;aspect-ratio:1597/864}.function-node{font-size:10px;padding:6px 10px}.game-agent{width:44px;height:61px;background-size:235px 242px}}
@media(prefers-reduced-motion:reduce){.game-agent,.core-glow,.scan-line{animation:none!important}}