/* Le bureau de Mycrea, public page. Same faces and colours as Mycrea HQ.
   Shape rule: panels and tiles 22px, rows 14px, buttons and chips are pills,
   faces keep their own shapes. One colour per colleague, dark ink buttons. */
:root{
  --ground:#F4F6FB; --panel:#FFFFFF; --tint:#EEF1F8; --ink:#16203A; --muted:#56627A; --line:#E1E6F0;
  --btn:#16203A; --btn-ink:#FFFFFF; --ok:#1E9E6A; --bad:#D9483B;
  --a-claude:#E8864A; --a-mkt:#EC5B84; --a-dev:#3D7BE6; --a-qa:#23A673; --a-sec:#8163DD; --a-res:#E8AE2E; --a-arch:#2FAEC0; --a-you:#F5B83D;
  --f-open:#E6EDFB; --f-vault:#ECE6FA; --f-lounge:#FCEBDD; --f-kitchen:#E1F4EA; --f-studio:#FFF1CC;
  --wood:#D9B98F; --wood-dark:#B8946A; --metal:#9AA6BD; --screen:#16203A;
  --shadow:0 1px 2px rgba(22,32,58,.05),0 10px 30px -12px rgba(22,32,58,.18);
  --disp:"Bricolage Grotesque",ui-rounded,"Segoe UI Rounded",system-ui,sans-serif;
  --body:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  color-scheme:dark; --ground:#0F1526; --panel:#172036; --tint:#1D2842; --ink:#E9EEF8; --muted:#A3AFC6; --line:#28334E;
  --btn:#E9EEF8; --btn-ink:#0F1526;
  --f-open:#1B2540; --f-vault:#231F3F; --f-lounge:#2F2320; --f-kitchen:#17302A; --f-studio:#312A16;
  --wood:#6B5641; --wood-dark:#523F2E; --metal:#5E6A82; --screen:#0A0F1D;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px -12px rgba(0,0,0,.55);
}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--a-claude);outline-offset:3px}
h1,h2,h3{font-family:var(--disp);letter-spacing:-.02em;margin:0}
main,.top,.foot{max-width:1240px;margin:0 auto;padding-left:16px;padding-right:16px}

/* ---------- top bar ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand-txt{display:flex;flex-direction:column;line-height:1.1}
.brand-txt b{font-family:var(--disp);font-size:18px}
.brand-txt small{color:var(--muted);font-size:13px}
.links{display:flex;align-items:center;gap:18px;font-weight:600;font-size:15px}
.links a{text-decoration:none}
.links a:not(.pill-link):hover{text-decoration:underline;text-underline-offset:4px}
.pill-link{background:var(--btn);color:var(--btn-ink);padding:8px 16px;border-radius:99px}
@media (max-width:560px){.links a:not(.pill-link){display:none}}

/* ---------- intro ---------- */
.intro{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px;padding:14px 0 18px}
.intro h1{font-size:clamp(32px,4.2vw,54px);line-height:1.04;font-weight:800;max-width:24ch}
.intro h1 span{display:block;color:var(--a-claude)}
.intro p{margin:10px 0 0;color:var(--muted);font-size:18px;max-width:60ch}
.now{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.now b{font-family:var(--disp);font-size:44px;line-height:1;font-weight:800;font-variant-numeric:tabular-nums}
.now span{color:var(--muted);font-size:14px}
.now .headcount{color:var(--ink);font-weight:600}
@media (max-width:760px){.intro{grid-template-columns:1fr}.now{flex-direction:row;align-items:baseline;gap:10px;text-align:left}.now b{font-size:30px}}

/* ---------- buttons ---------- */
.btn{border:1px solid var(--line);background:var(--panel);border-radius:99px;padding:10px 18px;font-weight:600;font-size:15px;white-space:nowrap;transition:transform .15s,background .15s}
.btn:active{transform:translateY(1px) scale(.98)}
.btn.primary{background:var(--btn);color:var(--btn-ink);border-color:var(--btn)}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* ---------- office stage ---------- */
.office{position:relative}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px}
.honest{margin:0 0 0 auto;color:var(--muted);font-size:13px}
@media (max-width:760px){.honest{margin:0;width:100%}}
.stage-box{position:relative;border-radius:28px;overflow:hidden;background:var(--panel);box-shadow:var(--shadow),inset 0 0 0 1px var(--line)}
.stage{position:relative;transform-origin:0 0;user-select:none;-webkit-user-select:none}
.room{position:absolute;border-radius:22px;background:var(--floor)}
.room::after{content:"";position:absolute;inset:0;border-radius:inherit;background-image:radial-gradient(rgba(22,32,58,.06) 1.2px,transparent 1.3px);background-size:18px 18px;pointer-events:none}
.stage>.label{position:absolute;z-index:4000;pointer-events:none;font-family:var(--disp);font-weight:800;font-size:13px;color:var(--muted);letter-spacing:.01em;background:color-mix(in srgb,var(--panel) 70%,transparent);padding:1px 9px;border-radius:99px;margin:-2px 0 0 -4px}
.room.open{--floor:var(--f-open)}.room.vault{--floor:var(--f-vault)}.room.lounge{--floor:var(--f-lounge)}.room.kitchen{--floor:var(--f-kitchen)}.room.studio{--floor:var(--f-studio)}
.sprite{position:absolute;left:0;top:0}
.sprite>.in{position:absolute;left:0;top:0;transform:translate(-50%,-100%)}
.clickable{cursor:pointer}

/* desk: chair behind the agent, table and monitor in front */
.chair .in{width:54px;height:34px;border-radius:12px 12px 4px 4px;background:color-mix(in srgb,var(--c) 55%,#2A3553);box-shadow:inset 0 -6px 0 rgba(0,0,0,.15)}
.table .in{width:136px;height:36px;border-radius:10px;background:var(--wood);box-shadow:inset 0 -9px 0 var(--wood-dark),0 6px 10px -6px rgba(22,32,58,.35)}
.table .plate{position:absolute;left:50%;bottom:3px;transform:translateX(-50%);font-size:10px;font-weight:700;color:#3B2A17;background:rgba(255,255,255,.55);padding:0 7px;border-radius:99px;white-space:nowrap}
.table.boss .plate{background:var(--a-you)}
.monitor .in{width:50px;height:40px}
.monitor .scr{position:absolute;left:0;top:0;width:50px;height:34px;border-radius:7px;background:var(--screen);border:3px solid #2A3553;overflow:hidden}
.monitor .stand{position:absolute;left:21px;bottom:0;width:8px;height:7px;background:#2A3553;border-radius:2px}
.monitor .scr i{position:absolute;left:5px;height:3px;border-radius:2px;background:var(--c);opacity:.9}
.monitor .scr i:nth-child(1){top:5px;width:22px}.monitor .scr i:nth-child(2){top:11px;width:30px;opacity:.6}.monitor .scr i:nth-child(3){top:17px;width:16px;opacity:.6}
.monitor .scr b{position:absolute;left:4px;right:4px;bottom:4px;height:4px;border-radius:2px;background:rgba(255,255,255,.14)}
.monitor .scr b::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--c);transform-origin:left;transform:scaleX(0)}
.monitor.on .scr i{animation:code 1.1s steps(3) infinite}
.monitor.on .scr b::after{animation:progress var(--dur,6s) linear forwards}
.monitor.off .scr{background:#222B42}
.monitor.off .scr i,.monitor.off .scr b{display:none}
@keyframes code{0%{transform:translateX(0)}50%{transform:translateX(3px)}}
@keyframes progress{to{transform:scaleX(1)}}

/* ---------- colleagues ---------- */
.c-claude{--c:var(--a-claude)}.c-mkt{--c:var(--a-mkt)}.c-dev{--c:var(--a-dev)}.c-qa{--c:var(--a-qa)}
.c-sec{--c:var(--a-sec)}.c-res{--c:var(--a-res)}.c-arch{--c:var(--a-arch)}.c-you{--c:var(--a-you)}
.face{--s:52px;width:var(--s);height:var(--s);border-radius:calc(var(--s)*.34);background:var(--c,var(--a-claude));position:relative;flex:none;display:inline-block;box-shadow:inset 0 calc(var(--s)*-.1) 0 rgba(0,0,0,.13),inset 0 calc(var(--s)*.06) 0 rgba(255,255,255,.25)}
.face.claude{--c:var(--a-claude)}.face.mkt{--c:var(--a-mkt)}.face.dev{--c:var(--a-dev)}.face.qa{--c:var(--a-qa)}
.face.sec{--c:var(--a-sec)}.face.res{--c:var(--a-res)}.face.arch{--c:var(--a-arch)}.face.you{--c:var(--a-you)}
.face .eye{position:absolute;top:34%;width:13%;height:19%;border-radius:40%;background:#16203A;animation:blink 5s infinite}
.face .eye.l{left:27%}.face .eye.r{right:27%}
.face .mouth{position:absolute;left:50%;bottom:22%;width:28%;height:11%;transform:translateX(-50%);border-radius:0 0 99px 99px;background:#16203A;opacity:.85}
.face .cheek{position:absolute;top:56%;width:14%;height:8%;border-radius:99px;background:rgba(255,255,255,.35)}
.face .cheek.l{left:12%}.face .cheek.r{right:12%}
.face.claude{border-radius:50%}
.face.mkt{border-radius:calc(var(--s)*.42) calc(var(--s)*.42) calc(var(--s)*.18) calc(var(--s)*.42)}
.face.sec{border-radius:calc(var(--s)*.22)}
.face.res{border-radius:calc(var(--s)*.5) calc(var(--s)*.5) calc(var(--s)*.26) calc(var(--s)*.26)}
.face.arch{border-radius:50% 50% calc(var(--s)*.3) calc(var(--s)*.3)}
.face.you{border-radius:calc(var(--s)*.3) calc(var(--s)*.3) calc(var(--s)*.4) calc(var(--s)*.4)}
.face.s-xs{--s:22px}.face.s-sm{--s:34px}.face.s-md{--s:44px}.face.s-lg{--s:72px}.face.s-xl{--s:96px}
.face.s-xs .cheek,.face.s-xs .mouth{display:none}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}

.agent{z-index:5}
.agent .in{width:60px;height:86px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.agent .face{--s:42px;z-index:2;transition:transform .3s}
.agent .torso{width:34px;height:22px;margin-top:-4px;border-radius:12px 12px 8px 8px;background:var(--c);filter:brightness(.82) saturate(1.1);position:relative;z-index:1}
.agent .torso::before,.agent .torso::after{content:"";position:absolute;top:4px;width:8px;height:15px;border-radius:6px;background:var(--c);filter:brightness(.95)}
.agent .torso::before{left:-5px;transform-origin:top;}
.agent .torso::after{right:-5px;transform-origin:top}
.agent .legs{display:flex;gap:6px;height:10px}
.agent .legs i{width:8px;height:10px;border-radius:0 0 4px 4px;background:#2A3553}
.agent .tag{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:3px;font-size:11px;font-weight:700;white-space:nowrap;background:var(--panel);padding:0 7px;border-radius:99px;box-shadow:0 1px 3px rgba(22,32,58,.18)}
.agent.seated .tag{display:none}
.agent.walking .in{animation:hop .36s ease-in-out infinite}
.agent.walking .legs i:first-child{animation:stepL .36s ease-in-out infinite}
.agent.walking .legs i:last-child{animation:stepR .36s ease-in-out infinite}
.agent.working .torso::before{animation:typeL .22s ease-in-out infinite alternate}
.agent.working .torso::after{animation:typeR .22s ease-in-out infinite alternate}
.agent.working .face{animation:nod 1.4s ease-in-out infinite}
.agent.sleep .face{transform:rotate(-14deg) translateY(4px)}
.agent.sleep .face .eye{height:5%;top:44%;animation:none;border-radius:99px}
.agent.sleep .face .mouth{width:14%;height:6%;border-radius:99px}
.agent.happy .face .mouth{height:20%;width:36%}
.agent.cheer .in{animation:cheer .5s ease-out 2}
.agent.picked .face{box-shadow:0 0 0 3px var(--panel),0 0 0 6px var(--c)}
@keyframes hop{0%,100%{transform:translate(-50%,-100%)}50%{transform:translate(-50%,calc(-100% - 5px))}}
@keyframes stepL{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes stepR{0%,100%{transform:translateY(-3px)}50%{transform:translateY(0)}}
@keyframes typeL{to{transform:rotate(-18deg)}}
@keyframes typeR{to{transform:rotate(18deg)}}
@keyframes nod{0%,100%{transform:translateY(0)}50%{transform:translateY(2px)}}
@keyframes cheer{0%,100%{transform:translate(-50%,-100%)}40%{transform:translate(-50%,calc(-100% - 16px))}}

/* accessories: one per colleague so each is recognisable */
.agent .hat{position:absolute;z-index:3;pointer-events:none}
.agent.k-you .hat{top:6px;left:50%;transform:translateX(-50%);width:26px;height:12px;background:var(--a-you);filter:brightness(.9);clip-path:polygon(0 100%,0 20%,25% 60%,50% 0,75% 60%,100% 20%,100% 100%)}
.agent.k-claude .hat{top:2px;left:50%;width:3px;height:14px;background:#16203A;transform:translateX(-50%);border-radius:2px}
.agent.k-claude .hat::after{content:"";position:absolute;left:50%;top:-6px;width:10px;height:10px;transform:translateX(-50%) rotate(45deg);background:var(--a-claude);border:2px solid #16203A;border-radius:3px}
.agent.k-dev .hat{top:16px;left:50%;transform:translateX(-50%);width:50px;height:26px;border:4px solid #16203A;border-bottom:0;border-radius:26px 26px 0 0}
.agent.k-dev .hat::before,.agent.k-dev .hat::after{content:"";position:absolute;bottom:-10px;width:10px;height:14px;border-radius:5px;background:#16203A}
.agent.k-dev .hat::before{left:-7px}.agent.k-dev .hat::after{right:-7px}
.agent.k-arch .hat{top:10px;left:50%;transform:translateX(-50%);width:40px;height:14px;background:#F5C33D;border-radius:20px 20px 4px 4px;box-shadow:0 3px 0 #D9A51F}
.agent.k-sec .hat{top:12px;left:50%;transform:translateX(-50%);width:44px;height:12px;background:#3B2F7A;border-radius:10px 10px 3px 3px}
.agent.k-sec .hat::after{content:"";position:absolute;left:50%;top:3px;width:8px;height:6px;transform:translateX(-50%);background:#F5C33D;border-radius:2px}
.agent.k-res .hat{top:38px;left:50%;transform:translateX(-50%);width:34px;height:12px;background:radial-gradient(circle at 25% 50%,transparent 4px,#16203A 4.5px,#16203A 6px,transparent 6.5px),radial-gradient(circle at 75% 50%,transparent 4px,#16203A 4.5px,#16203A 6px,transparent 6.5px),linear-gradient(#16203A,#16203A) 50% 50%/6px 2px no-repeat}
.agent.k-mkt .hat{top:10px;left:62%;width:20px;height:12px;background:radial-gradient(circle at 25% 50%,#FFD2E0 4px,transparent 5px),radial-gradient(circle at 75% 50%,#FFD2E0 4px,transparent 5px),radial-gradient(circle at 50% 50%,#fff 3px,transparent 3.5px)}
.agent.k-qa .hat{top:58px;left:60%;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--a-qa)}
.agent.k-qa .hat::after{content:"";position:absolute;left:4px;top:2px;width:4px;height:7px;border:solid var(--a-qa);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* bubbles */
.bubble{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%) scale(.6);opacity:0;background:var(--panel);color:var(--ink);font-size:13px;font-weight:600;line-height:1.25;padding:7px 11px;border-radius:14px;box-shadow:0 4px 14px -4px rgba(22,32,58,.35),0 0 0 1px var(--line);width:max-content;max-width:190px;text-align:center;transition:opacity .2s,transform .25s cubic-bezier(.3,1.5,.6,1);pointer-events:none;z-index:4}
.bubble::after{content:"";position:absolute;left:50%;top:100%;width:10px;height:10px;transform:translate(-50%,-5px) rotate(45deg);background:var(--panel);box-shadow:1px 1px 0 var(--line)}
.bubble.show{opacity:1;transform:translateX(-50%) scale(1)}
.bubble .dots i{display:inline-block;width:4px;height:4px;margin-left:2px;border-radius:50%;background:currentColor;animation:dots 1.2s infinite}
.bubble .dots i:nth-child(2){animation-delay:.2s}.bubble .dots i:nth-child(3){animation-delay:.4s}
@keyframes dots{0%,60%,100%{opacity:.25}30%{opacity:1}}
.zz{position:absolute;right:-2px;top:6px;font-family:var(--disp);font-weight:800;color:var(--muted);font-size:15px;opacity:0;pointer-events:none}
.sleep .zz,.dog.sleep .zz{animation:zz 2.6s ease-out infinite}
.zz+.zz{animation-delay:1.3s!important;font-size:12px}
@keyframes zz{0%{opacity:0;transform:translate(0,0)}25%{opacity:.9}100%{opacity:0;transform:translate(12px,-22px)}}

/* guard dogs */
.dog{z-index:5}
.dog .in{width:46px;height:30px}
.dog .body{position:absolute;left:6px;bottom:3px;width:32px;height:17px;border-radius:12px 12px 9px 9px;background:#B07A4A}
.dog .head{position:absolute;right:0;bottom:12px;width:19px;height:17px;border-radius:9px 9px 8px 8px;background:#C48C58}
.dog .head::before{content:"";position:absolute;left:-2px;top:-3px;width:8px;height:11px;border-radius:5px 5px 6px 6px;background:#8A5A33;transform:rotate(-18deg)}
.dog .head::after{content:"";position:absolute;right:-3px;bottom:3px;width:7px;height:6px;border-radius:50%;background:#16203A}
.dog .eye{position:absolute;right:7px;top:6px;width:3px;height:4px;border-radius:2px;background:#16203A}
.dog .tail{position:absolute;left:0;bottom:12px;width:10px;height:4px;border-radius:3px;background:#8A5A33;transform-origin:right;animation:wag .35s ease-in-out infinite alternate}
.dog .collar{position:absolute;right:6px;bottom:11px;width:6px;height:8px;background:var(--a-sec);border-radius:2px}
.dog.flip .in{transform:translate(-50%,-100%) scaleX(-1)}
.dog.sleep .head{bottom:6px}.dog.sleep .eye{height:1px;top:8px}.dog.sleep .tail{animation:none;transform:rotate(-10deg)}
.dog.walking .body{animation:trot .3s ease-in-out infinite}
.dog .bubble{bottom:calc(100% + 2px)}
.dog .zz{right:auto;left:26px;top:-8px}
@keyframes wag{from{transform:rotate(-25deg)}to{transform:rotate(25deg)}}
@keyframes trot{50%{transform:translateY(-2px)}}

/* furniture */
.fur .in{pointer-events:none}
.fur.clickable .in{pointer-events:auto}
.bed .in{width:96px;height:44px;border-radius:14px;background:#D8D0F3;box-shadow:inset 0 -10px 0 #BDB1E8}
.bed .in::before{content:"";position:absolute;left:8px;top:6px;width:26px;height:16px;border-radius:8px;background:#fff}
.safe .in{width:62px;height:70px;border-radius:12px;background:#56627A;box-shadow:inset 0 -8px 0 #3E485D}
.safe .in::before{content:"";position:absolute;left:50%;top:22px;width:24px;height:24px;border-radius:50%;transform:translateX(-50%);border:4px solid #C8D0E0;background:#3E485D}
.safe .in::after{content:"";position:absolute;right:8px;top:30px;width:4px;height:10px;border-radius:2px;background:#C8D0E0}
.bowl .in{width:26px;height:10px;border-radius:0 0 12px 12px;background:var(--a-sec)}
.tv .in{width:128px;height:78px;border-radius:12px;background:#16203A;padding:6px}
.tv .in::after{content:"";position:absolute;left:50%;bottom:-8px;width:36px;height:8px;transform:translateX(-50%);background:#2A3553;border-radius:0 0 6px 6px}
.tv .show{position:absolute;inset:6px;border-radius:7px;overflow:hidden;background:var(--show,linear-gradient(135deg,#3D7BE6,#2FAEC0))}
.tv .show i{position:absolute;border-radius:50%;background:rgba(255,255,255,.75);animation:tvball 3s ease-in-out infinite}
.tv .show i:nth-child(1){width:12px;height:12px;left:20%;top:40%}
.tv .show i:nth-child(2){width:22px;height:22px;left:60%;top:20%;background:rgba(255,255,255,.35);animation-duration:4.5s}
.tv .show b{position:absolute;left:6px;bottom:4px;font-size:10px;color:#fff;font-weight:700;letter-spacing:.02em}
@keyframes tvball{0%,100%{transform:translate(0,0)}50%{transform:translate(28px,-10px)}}
.sofa .in{width:190px;height:50px;border-radius:18px 18px 12px 12px;background:#E57F6A;box-shadow:inset 0 -14px 0 #C9634F}
.sofa .in::before,.sofa .in::after{content:"";position:absolute;bottom:0;width:18px;height:42px;border-radius:10px;background:#D86D57}
.sofa .in::before{left:-6px}.sofa .in::after{right:-6px}
.arcade .in{width:56px;height:92px;border-radius:12px 12px 6px 6px;background:#3D7BE6;box-shadow:inset 0 -10px 0 #2C5FB8}
.arcade .scr{position:absolute;left:7px;top:9px;width:42px;height:32px;border-radius:5px;background:#0A0F1D;overflow:hidden}
.arcade .scr i{position:absolute;width:3px;height:10px;background:#8FF0C6;top:11px}
.arcade .scr i:nth-child(1){left:3px;animation:padL 1.6s ease-in-out infinite}
.arcade .scr i:nth-child(2){right:3px;animation:padR 1.6s ease-in-out infinite}
.arcade .scr b{position:absolute;width:4px;height:4px;background:#fff;top:14px;left:8px;animation:pong 1.6s linear infinite}
.arcade .pad{position:absolute;left:10px;top:50px;width:36px;height:12px;border-radius:4px;background:#2C5FB8}
.arcade .pad::before{content:"";position:absolute;left:6px;top:3px;width:6px;height:6px;border-radius:50%;background:#EC5B84}
@keyframes padL{0%,100%{transform:translateY(-8px)}50%{transform:translateY(8px)}}
@keyframes padR{0%,100%{transform:translateY(8px)}50%{transform:translateY(-8px)}}
@keyframes pong{0%{transform:translate(0,-8px)}50%{transform:translate(28px,8px)}100%{transform:translate(0,-8px)}}
.bean .in{width:40px;height:26px;border-radius:50% 50% 40% 40%;background:var(--c);opacity:.55}
.ktable .in{width:124px;height:46px;border-radius:50%;background:#fff;box-shadow:inset 0 -8px 0 #D5DCE8,0 6px 10px -6px rgba(22,32,58,.3)}
.ktable .in::before,.ktable .in::after{content:"";position:absolute;top:10px;width:22px;height:14px;border-radius:50%;background:#F4F6FB;box-shadow:inset 0 0 0 3px #E8864A}
.ktable .in::before{left:24px}.ktable .in::after{right:24px}
@media (prefers-color-scheme:dark){.ktable .in{background:#C9D2E3}}
.coffee .in{width:44px;height:62px;border-radius:10px 10px 6px 6px;background:#56627A;box-shadow:inset 0 -8px 0 #3E485D}
.coffee .in::before{content:"";position:absolute;left:14px;top:30px;width:16px;height:14px;border-radius:0 0 6px 6px;background:#fff}
.coffee .in::after{content:"";position:absolute;left:10px;top:8px;width:24px;height:6px;border-radius:3px;background:#23A673}
.coffee .steam{position:absolute;left:18px;top:14px;width:5px;height:12px;border-radius:3px;background:rgba(255,255,255,.8);opacity:0}
.coffee.brew .steam{animation:steam 1.4s ease-out 3}
.coffee .steam+.steam{left:24px;animation-delay:.5s!important}
@keyframes steam{0%{opacity:0;transform:translateY(0)}30%{opacity:.8}100%{opacity:0;transform:translateY(-18px)}}
.fridge .in{width:46px;height:86px;border-radius:10px;background:#EEF1F8;box-shadow:inset 0 -6px 0 #D5DCE8,inset 0 0 0 2px #D5DCE8}
.fridge .in::before{content:"";position:absolute;left:6px;right:6px;top:30px;height:2px;background:#D5DCE8}
.fridge .in::after{content:"";position:absolute;right:8px;top:12px;width:3px;height:12px;border-radius:2px;background:#9AA6BD}
@media (prefers-color-scheme:dark){.fridge .in{background:#C9D2E3}}
.rug .in{width:260px;height:70px;border-radius:50%;background:color-mix(in srgb,var(--a-claude) 22%,transparent);box-shadow:inset 0 0 0 6px color-mix(in srgb,var(--a-claude) 14%,transparent)}
.shelf .in{width:70px;height:84px;border-radius:8px;background:var(--wood);box-shadow:inset 0 -6px 0 var(--wood-dark);background-image:linear-gradient(var(--wood-dark),var(--wood-dark)),linear-gradient(var(--wood-dark),var(--wood-dark));background-size:100% 4px,100% 4px;background-position:0 38%,0 70%;background-repeat:no-repeat}
.shelf .in::before{content:"";position:absolute;left:8px;top:10px;width:40px;height:20px;background:linear-gradient(90deg,#3D7BE6 0 8px,transparent 8px 10px,#EC5B84 10px 17px,transparent 17px 19px,#23A673 19px 28px,transparent 28px 30px,#E8AE2E 30px 36px,transparent 36px)}
.shelf .in::after{content:"";position:absolute;left:10px;top:42px;width:44px;height:18px;background:linear-gradient(90deg,#8163DD 0 9px,transparent 9px 11px,#2FAEC0 11px 18px,transparent 18px 20px,#E8864A 20px 30px,transparent 30px)}
.plant .in{width:34px;height:52px}
.plant .in::before{content:"";position:absolute;left:5px;bottom:0;width:24px;height:18px;border-radius:4px 4px 8px 8px;background:#E8864A}
.plant .in::after{content:"";position:absolute;left:0;bottom:14px;width:34px;height:36px;border-radius:50% 50% 45% 45%;background:radial-gradient(circle at 30% 40%,#3DBE86 8px,transparent 9px),radial-gradient(circle at 70% 35%,#2FA372 9px,transparent 10px),radial-gradient(circle at 50% 70%,#23A673 11px,transparent 12px)}
.door .in{width:12px;height:70px;border-radius:6px;background:var(--wood-dark)}
.board .in{background:#fff;border-radius:14px;box-shadow:0 0 0 5px var(--wood),0 8px 16px -8px rgba(22,32,58,.4);display:flex;gap:8px;padding:8px;align-items:center;justify-content:center}
@media (prefers-color-scheme:dark){.board .in{background:#E9EEF8}}
.board .frame{flex:1;height:100%;border-radius:6px;background:var(--tint) center/cover no-repeat;position:relative;box-shadow:0 2px 4px rgba(22,32,58,.25)}
.board .frame::before{content:"";position:absolute;left:50%;top:-5px;width:8px;height:8px;border-radius:50%;background:var(--a-mkt);transform:translateX(-50%)}
.board .frame.new{animation:pin .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes pin{from{transform:scale(.2) rotate(-12deg);opacity:0}to{transform:none;opacity:1}}
.printer .in{width:58px;height:34px;border-radius:9px;background:#9AA6BD;box-shadow:inset 0 -8px 0 #7C889F}
.printer .in::before{content:"";position:absolute;left:12px;top:-8px;width:34px;height:10px;background:#fff;border-radius:2px}
.printer.busy .in::after{content:"";position:absolute;left:14px;top:26px;width:30px;height:16px;background:#fff;border-radius:2px;animation:print .8s ease-out 2}
@keyframes print{from{transform:scaleY(0);transform-origin:top}to{transform:scaleY(1)}}

/* confetti */
.confetti{position:absolute;width:7px;height:10px;border-radius:2px;pointer-events:none;z-index:6000;animation:conf 1s ease-out forwards}
@keyframes conf{from{transform:translate(0,0) rotate(0);opacity:1}to{transform:translate(var(--dx),var(--dy)) rotate(260deg);opacity:0}}

/* night */
.night-veil{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 10%,rgba(12,18,40,.38),rgba(8,12,28,.62));opacity:0;transition:opacity 1.2s;z-index:5000}
.stage.night .night-veil{opacity:1}
.stage.night .lamp-glow{opacity:1}
.lamp-glow{position:absolute;width:150px;height:110px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,214,120,.55),rgba(255,214,120,0));opacity:0;transition:opacity 1.2s;z-index:5001;pointer-events:none;transform:translate(-50%,-70%)}

/* ---------- panel (agent card) ---------- */
.panel{position:absolute;right:14px;top:14px;bottom:14px;width:360px;background:var(--panel);border-radius:22px;box-shadow:var(--shadow),0 0 0 1px var(--line);padding:18px 18px 16px;overflow-y:auto;z-index:1000;animation:slidein .28s cubic-bezier(.2,1,.3,1)}
@keyframes slidein{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.panel .switch{display:flex;gap:2px;flex-wrap:wrap;margin:-4px 40px 12px 0}
.panel .switch .face{--s:28px}
.panel .switch button{border:0;background:none;padding:2px;border-radius:12px}
.panel .switch button[aria-current="true"]{background:var(--tint);box-shadow:inset 0 0 0 2px var(--c)}
.panel .close{position:absolute;right:12px;top:12px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--panel);font-size:20px;line-height:1}
.panel .who{display:flex;gap:14px;align-items:center}
.panel .who h3{font-size:26px;line-height:1.05}
.panel .who p{margin:2px 0 0;color:var(--muted);font-size:15px}
.panel .status{margin:14px 0 0;padding:10px 12px;border-radius:14px;background:color-mix(in srgb,var(--c) 14%,var(--panel));font-weight:600;font-size:15px}
.panel h4{font-family:var(--disp);font-size:15px;margin:16px 0 6px}
.panel p.does{margin:0;font-size:15px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border-radius:99px;padding:4px 11px;font-size:13px;font-weight:600;background:color-mix(in srgb,var(--c) 16%,var(--panel));border:1px solid color-mix(in srgb,var(--c) 40%,transparent)}
.tasks{display:grid;gap:8px}
.tasks .btn{width:100%;text-align:left;display:flex;justify-content:space-between;align-items:center;white-space:normal}
.tasks .btn::after{content:"→";font-weight:700}
.never{margin-top:16px;font-size:14px;color:var(--muted);padding-left:12px;border-left:3px solid var(--c)}
.qa-list{display:flex;flex-wrap:wrap;gap:6px}
.qa-list button{border:1px solid var(--line);background:var(--panel);border-radius:99px;padding:6px 12px;font-size:13px;font-weight:600}
.answer{margin-top:10px;padding:10px 12px;border-radius:14px 14px 14px 4px;background:var(--tint);font-size:15px;animation:slidein .25s}
.panel .cta{display:inline-block;margin-top:12px}
.panel .recent{margin-top:4px}
@media (max-width:700px){
  .panel{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-height:78dvh;border-radius:24px 24px 0 0;padding-bottom:calc(16px + env(safe-area-inset-bottom));animation:sheet .3s cubic-bezier(.2,1,.3,1)}
  @keyframes sheet{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
}

/* ---------- deliveries ---------- */
.live{padding:44px 0 8px}
.live h2,.team h2,.works h2,.rules h2{font-size:clamp(28px,3.6vw,40px);font-weight:800}
.feed{list-style:none;margin:16px -16px 0;padding:4px 16px 14px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,280px);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin}
.card{scroll-snap-align:start;background:var(--panel);border-radius:22px;padding:14px;box-shadow:var(--shadow),inset 0 0 0 1px var(--line);display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--c)}
.card.new{animation:drop .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes drop{from{opacity:0;transform:translateY(-14px) scale(.96)}to{opacity:1;transform:none}}
.card header{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.card header b{color:var(--ink);font-size:14px}
.card header time{margin-left:auto;font-variant-numeric:tabular-nums}
.card h3{font-size:18px;line-height:1.15}
.pv-ads{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.pv-ads.one{grid-template-columns:1fr 1fr}
.pv-ads img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:10px;background:var(--tint)}
.pv-shot img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left;border-radius:12px;box-shadow:0 0 0 1px var(--line)}
.pv-lines{list-style:none;margin:0;padding:0;display:grid;gap:5px;font-size:14px}
.pv-lines li{padding:6px 9px;border-radius:10px;background:var(--tint)}
.pv-lines.check li{padding-left:30px;position:relative}
.pv-lines.check li::before{content:"";position:absolute;left:9px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--ok)}
.pv-lines.check li::after{content:"";position:absolute;left:14px;top:50%;width:3px;height:6px;margin-top:-5px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.pv-lines.hooks li{font-weight:600}
.pv-lines.hooks li::before{content:"« "}.pv-lines.hooks li::after{content:" »"}
.pv-diff{margin:0;padding:8px 10px;border-radius:12px;background:#16203A;color:#E9EEF8;font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap}
.pv-diff .p{color:#8FF0C6}.pv-diff .m{color:#FF9C8F}.pv-diff .c{color:#FFD58A}

/* ---------- team ---------- */
.team{padding:48px 0 8px}
.lead{margin:10px 0 0;color:var(--muted);font-size:18px;max-width:60ch}
.roster{margin-top:22px;display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.member{grid-column:span 2;border:0;text-align:left;background:color-mix(in srgb,var(--c) 13%,var(--panel));border-radius:22px;padding:18px;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-content:start;position:relative;transition:transform .25s cubic-bezier(.3,1.4,.5,1),box-shadow .2s;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 30%,transparent)}
.member:hover{transform:translateY(-4px) rotate(-.4deg);box-shadow:inset 0 0 0 2px var(--c),var(--shadow)}
.member:hover .face{animation:wiggle .5s ease-in-out}
.member.lead-row{grid-column:span 3}
.member .face{grid-row:span 2}
.member h3{font-size:22px;line-height:1.1;align-self:end}
.member .role{margin:0;color:var(--muted);font-weight:600;font-size:14px;align-self:start}
.member .does{grid-column:1 / -1;margin:8px 0 0;font-size:15px}
.member .chips{grid-column:1 / -1;margin-top:6px}
.member .go{grid-column:1 / -1;margin-top:8px;font-weight:700;font-size:14px;color:var(--ink);opacity:.8}
.member .go::after{content:" →"}
@keyframes wiggle{25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
@media (max-width:980px){.roster{grid-template-columns:repeat(2,1fr)}.member,.member.lead-row{grid-column:span 1}}
@media (max-width:560px){.roster{grid-template-columns:1fr}}

/* ---------- works (bento) ---------- */
.works{padding:52px 0 8px}
.bento{margin-top:22px;display:grid;grid-template-columns:1.3fr 1fr 1fr;grid-template-areas:'big ads self' 'big shot shot';gap:14px}
.tile.big{grid-area:big}.tile.ads{grid-area:ads}.tile.self{grid-area:self}.tile.shot{grid-area:shot}
.tile.shot img{max-height:300px}
.tile{position:relative;border-radius:22px;overflow:hidden;background:var(--panel);box-shadow:var(--shadow),inset 0 0 0 1px var(--line);text-decoration:none;display:flex;flex-direction:column;min-height:240px}
.tile img{width:100%;height:100%;object-fit:cover;object-position:top left;flex:1;min-height:0;display:block}
.tile.big img{min-height:360px}
.tile .cap{padding:14px 16px;display:flex;flex-direction:column;gap:2px;background:var(--panel)}
.tile .cap b{font-family:var(--disp);font-size:20px}
.tile .cap span{color:var(--muted);font-size:15px}
a.tile:hover img{transform:scale(1.02)}
a.tile img{transition:transform .5s cubic-bezier(.2,1,.3,1)}
.tile.ads{background:linear-gradient(160deg,color-mix(in srgb,var(--a-mkt) 22%,var(--panel)),var(--panel))}
.fan{flex:1;position:relative;min-height:250px}
.tile .cap{position:relative;z-index:2}
.fan img{position:absolute;left:50%;top:52%;width:98px;aspect-ratio:4/5;object-fit:cover;border-radius:12px;box-shadow:0 10px 24px -10px rgba(22,32,58,.5),0 0 0 3px #fff;transition:transform .45s cubic-bezier(.3,1.4,.5,1)}
.tile.ads:hover .fan img{transform:translate(-50%,-50%) translateX(calc(var(--i) * 46px)) rotate(calc(var(--i) * 9deg)) translateY(calc(var(--a) * 10px))}
.fan img{transform:translate(-50%,-50%) translateX(calc(var(--i) * 34px)) rotate(calc(var(--i) * 7deg)) translateY(calc(var(--a) * 6px))}
.tile.self{background:linear-gradient(160deg,color-mix(in srgb,var(--a-claude) 20%,var(--panel)),var(--panel))}
.mini-team{flex:1;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:10px;padding:26px 16px 8px}
.mini-team .face{animation:float 3s ease-in-out infinite;animation-delay:calc(var(--i) * -.4s)}
@keyframes float{50%{transform:translateY(-6px)}}
@media (max-width:980px){.bento{grid-template-columns:1fr 1fr;grid-template-areas:'big big' 'ads self' 'shot shot'}}
@media (max-width:620px){.bento{grid-template-columns:1fr;grid-template-areas:'big' 'ads' 'self' 'shot'}.tile.big img{min-height:220px}}

/* ---------- rules ---------- */
.rules{padding:56px 0 24px}
.rules ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.rules li{display:flex;align-items:center;gap:16px;font-family:var(--disp);font-weight:800;font-size:clamp(22px,3.2vw,36px);line-height:1.1;padding:14px 0;border-top:1px solid var(--line)}

/* ---------- footer + toast ---------- */
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:28px;padding-bottom:40px;color:var(--muted);font-size:14px}
.foot p{margin:0}
.foot nav{display:flex;gap:16px}
.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);opacity:0;background:var(--btn);color:var(--btn-ink);padding:10px 16px;border-radius:99px;font-weight:600;font-size:14px;box-shadow:var(--shadow);transition:opacity .25s,transform .3s cubic-bezier(.3,1.4,.5,1);z-index:2000;pointer-events:none;max-width:calc(100vw - 32px);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}