#pix0-v9{--bg-center:#123e56;--bg-mid:#061d31;--bg-edge:#010b19; /* <- change these 3 to match your site */
  --green:#00ffa6;--cyan:#00d9ff;font-family:Arial,sans-serif;color:#f1fcff;width:100%;isolation:isolate}
#pix0-v9 *{box-sizing:border-box}
#pix0-v9 .p9-scene{position:relative;overflow:hidden;min-height:700px;padding:20px 12px 35px;background:radial-gradient(ellipse at 50% 40%,var(--bg-center),var(--bg-mid) 55%,var(--bg-edge))}
#pix0-v9 .p9-stage{position:relative;z-index:1;--W:min(360px,92vw);--D:min(250px,64vw);width:min(650px,100%);margin:auto;display:flex;flex-direction:column;align-items:center}

/* ---------- TOP: boy behind the globe ---------- */
#pix0-v9 .p9-top{position:relative;width:var(--W);aspect-ratio:1713/918;z-index:2}
#pix0-v9 .p9-boy,#pix0-v9 .p9-boyh{position:absolute;inset:0;transform-origin:50% 88%;animation:p9-peek 8s ease-in-out infinite}
#pix0-v9 .p9-boy{z-index:1}
#pix0-v9 .p9-boyh{z-index:4;pointer-events:none}
#pix0-v9 .p9-boy-in{position:relative;width:100%;transform-origin:50% 90%}
#pix0-v9 .p9-img{display:block;width:100%;height:auto;max-width:none;filter:drop-shadow(0 0 13px #00d9ff66)}
#pix0-v9 .p9-hands{filter:none;clip-path:polygon(0 76%,25.7% 76%,25.7% 100%,75.3% 100%,75.3% 76%,100% 76%,100% 100%,0 100%)}
#pix0-v9 .p9-ledge{position:absolute;z-index:3;left:7%;right:7%;top:86%;height:8.5%;min-height:12px;border-radius:8px 8px 4px 4px;
  background:linear-gradient(#0e405d,#071f33);border:1.5px solid var(--cyan);box-shadow:0 0 14px #00d9ffaa,0 -2px 12px #00d9ff55}
#pix0-v9 .p9-ledge:before{content:"";position:absolute;left:10px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:#ff5f56;box-shadow:9px 0 #ffbd2e,18px 0 #27c93f}
#pix0-v9 .p9-lid{position:absolute;top:73.9%;width:9.1%;height:11.3%;border-radius:50%;border-bottom:3px solid #1b0b08;
  background:radial-gradient(ellipse at 50% 35%,#f2a47e,#dc9068 70%,#c98059);transform-origin:50% 0;transform:scaleY(0)}
#pix0-v9 .p9-lid-l{left:38.4%;animation:p9-blink 8s ease-in-out infinite}
#pix0-v9 .p9-lid-r{left:55.1%;animation:p9-blink 8s ease-in-out infinite}
#pix0-v9 .p9-msg{transition:opacity .3s}

/* hands grip the globe rim (in front of globe) */
#pix0-v9 .p9-hand{position:absolute;bottom:2px;width:46px;height:46px;z-index:6;filter:drop-shadow(0 0 8px #00d9ffaa)}
#pix0-v9 .p9-hand svg{display:block;width:100%;height:100%;overflow:visible}
#pix0-v9 .p9-hand-l{left:7%;transform:rotate(-28deg);animation:p9-handL 4s ease-in-out infinite}
#pix0-v9 .p9-hand-r{right:7%;transform:rotate(28deg);animation:p9-handR 4s ease-in-out infinite}

/* juggled code tokens */
#pix0-v9 .p9-tok{position:absolute;z-index:0;left:0;bottom:30px;font:bold 15px monospace;color:var(--green);
  text-shadow:0 0 10px var(--green);padding:2px 6px;border:1px solid #00ffa688;border-radius:6px;background:#04243acc;
  opacity:0;animation:p9-tx 4s linear infinite,p9-ty 2s ease-out infinite alternate}
#pix0-v9 .p9-t2{color:var(--cyan);text-shadow:0 0 10px var(--cyan);border-color:#00d9ff88;animation-delay:-1s,-.5s}
#pix0-v9 .p9-t3{animation-delay:-2s,-1s}
#pix0-v9 .p9-t4{color:var(--cyan);text-shadow:0 0 10px var(--cyan);border-color:#00d9ff88;animation-delay:-3s,-1.5s}

/* wink bubble + sparkles */
#pix0-v9 .p9-wink{position:absolute;z-index:7;right:6%;top:6px;padding:4px 10px;border-radius:14px 14px 14px 2px;
  background:#eaffff;color:#073047;font:bold 15px monospace;box-shadow:0 0 14px #00d9ff;
  opacity:0;transform-origin:0 100%;animation:p9-bubble 8s ease-in-out infinite}
#pix0-v9 .p9-spark{position:absolute;z-index:7;color:var(--green);text-shadow:0 0 10px var(--green);font-size:20px;opacity:0}
#pix0-v9 .p9-spark-a{left:20%;top:20px;animation:p9-spark 8s ease-in-out infinite}
#pix0-v9 .p9-spark-b{right:22%;top:0;font-size:16px;color:var(--cyan);text-shadow:0 0 10px var(--cyan);animation:p9-spark 8s ease-in-out infinite .15s}

/* ---------- GLOBE (overlaps boy so he hides behind it) ---------- */
#pix0-v9 .p9-world{position:relative;z-index:3;width:var(--D);aspect-ratio:1;margin-top:calc(var(--W)*-.053);border-radius:50%;filter:drop-shadow(0 0 18px #00d9ff66)}
#pix0-v9 .p9-fallback{position:absolute;inset:0;overflow:hidden;border-radius:50%;border:2px solid var(--cyan);
  background:radial-gradient(circle at 28% 24%,#15516a,#08283f 50%,#010b19 92%);box-shadow:inset -35px -12px 45px #000b,0 0 28px #00d9ff55}
#pix0-v9 .p9-grid{position:absolute;inset:0;border-radius:50%;
  background:repeating-linear-gradient(0deg,transparent 0 25px,#00d9ff25 26px 27px),repeating-linear-gradient(90deg,transparent 0 25px,#00ffa622 26px 27px);
  animation:p9-gridspin 16s linear infinite}
#pix0-v9 .p9-code-text{position:absolute;top:15%;left:-80%;width:260%;color:var(--green);font:bold 15px/2 monospace;letter-spacing:8px;overflow-wrap:anywhere;opacity:.8;text-shadow:0 0 9px #00ffa6;animation:p9-codeflow 17s linear infinite}
#pix0-v9 .p9-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;border-radius:50%}
#pix0-v9 .p9-orbit{position:absolute;z-index:4;left:-12%;top:36%;width:124%;height:28%;border:2px solid var(--cyan);border-radius:50%;box-shadow:0 0 12px #00d9ff99;pointer-events:none}
#pix0-v9 .p9-orbit-a{transform:rotate(-19deg);animation:p9-orbit-a 8s ease-in-out infinite}
#pix0-v9 .p9-orbit-b{border-color:var(--green);box-shadow:0 0 12px #00ffa688;transform:rotate(19deg);animation:p9-orbit-b 9s ease-in-out infinite}

/* ---------- FLOATING CODE ---------- */
#pix0-v9 .p9-floaters{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
#pix0-v9 .p9-fl{position:absolute;font:bold 12px monospace;white-space:nowrap;opacity:0;text-shadow:0 0 8px currentColor;
  animation:p9-fl var(--t,7s) ease-in-out infinite alternate,p9-flfade var(--t2,12s) ease-in-out infinite}
#pix0-v9 .p9-fl-b{animation-timing-function:cubic-bezier(.5,-.5,.5,1.5),ease-in-out}
@keyframes p9-fl{from{transform:translate(0,0) rotate(var(--r0,0deg))}to{transform:translate(var(--dx,20px),var(--dy,-30px)) rotate(var(--r1,0deg))}}
@keyframes p9-flfade{0%,100%{opacity:0}50%{opacity:var(--o,.25)}}

/* ---------- CLOSE BUTTON ---------- */
#pix0-v9 .p9-close{position:absolute;top:12px;right:12px;z-index:20;width:36px;height:36px;padding:0;display:flex;align-items:center;justify-content:center;
  background:#04243acc;color:var(--green);border:1.5px solid var(--green);border-radius:50%;cursor:pointer;
  font:bold 24px/1 Arial,sans-serif;text-shadow:0 0 10px var(--green);box-shadow:0 0 12px #00ffa688,inset 0 0 8px #00ffa633;
  transition:transform .2s,box-shadow .2s,background .2s}
#pix0-v9 .p9-close:hover,#pix0-v9 .p9-close:focus-visible{transform:scale(1.12) rotate(90deg);background:#06384f;box-shadow:0 0 20px #00ffa6,inset 0 0 10px #00ffa655;outline:none}
#pix0-v9.p9-closing{opacity:0;transition:opacity .35s}

/* ---------- BRAND ---------- */
#pix0-v9 .p9-brand{position:relative;z-index:5;width:min(390px,95%);margin-top:25px;text-align:center}
#pix0-v9 .p9-logo{font-size:clamp(50px,8vw,68px);font-weight:900;letter-spacing:-3px;line-height:1.15;color:#f4fdff;text-shadow:0 0 18px #00d9ff55}
#pix0-v9 .p9-logo span{color:var(--green);text-shadow:0 0 18px #00ffa6}
#pix0-v9 .p9-line{width:70%;height:2px;margin:10px auto 13px;background:linear-gradient(90deg,transparent,var(--cyan),var(--green),transparent);box-shadow:0 0 12px var(--cyan)}
#pix0-v9 .p9-title{color:#a9e7f3;font:bold 12px monospace;letter-spacing:3px;margin-bottom:20px}
#pix0-v9 .p9-title span{color:var(--green)}
#pix0-v9 .p9-loader{width:100%;height:10px;overflow:hidden;border:1px solid #2b91a9;border-radius:20px;background:#09293e;box-shadow:0 0 16px #00d9ff55}
#pix0-v9 .p9-fill{height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--green),#0ce7de,var(--cyan));box-shadow:0 0 15px var(--cyan);animation:p9-progress 8s linear infinite}
#pix0-v9 .p9-status{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:13px;color:#93bed0;font:10px monospace;letter-spacing:1px}
#pix0-v9 .p9-status b{color:var(--green)}
#pix0-v9 .p9-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}
#pix0-v9 .p9-replay{margin-top:18px;padding:10px 20px;background:#0a3045;color:#eaffff;border:1px solid #218ca5;border-radius:8px;cursor:pointer;font-weight:bold}

/* ---------- KEYFRAMES ---------- */
/* boy ducks behind globe, pops up, looks around, ducks again */
@keyframes p9-peek{
  0%,100%{transform:translateY(16px)}
  14%{transform:translateY(-3px) scale(1.01,.98)}
  22%,34%{transform:translateY(0)}
  42%{transform:translate(-5px,0) rotate(-2.5deg)}
  54%{transform:translate(5px,0) rotate(2.5deg)}
  64%{transform:translateY(-3px)}
  72%,82%{transform:translateY(0)}
  92%{transform:translateY(16px)}
}
/* squish "wink" (quick head tilt + squash) at ~70% of cycle */
@keyframes p9-wink{
  0%,66%,78%,100%{transform:none}
  70%{transform:rotate(-8deg) scale(1.04,.94)}
  74%{transform:rotate(-8deg) scale(1.04,.94)}
}
@keyframes p9-bubble{
  0%,68%,82%,100%{opacity:0;transform:scale(0)}
  72%{opacity:1;transform:scale(1.15)}
  76%,79%{opacity:1;transform:scale(1)}
}
@keyframes p9-spark{
  0%,69%,84%,100%{opacity:0;transform:scale(0) rotate(0)}
  74%{opacity:1;transform:scale(1.3) rotate(90deg)}
  80%{opacity:0;transform:scale(.6) rotate(180deg)}
}
/* hands: left tosses, right catches */
@keyframes p9-handL{0%,100%{transform:rotate(-28deg)}25%{transform:translateY(-14px) rotate(-42deg)}50%{transform:translateY(2px) rotate(-28deg)}}
@keyframes p9-handR{0%,100%{transform:rotate(28deg)}50%{transform:translateY(-14px) rotate(42deg)}75%{transform:translateY(2px) rotate(28deg)}}
@keyframes p9-blink{0%,29%,33%,100%{transform:scaleY(0)}31%{transform:scaleY(1)}}
@keyframes p9-winkeye{0%,29%,33%,69%,80%,100%{transform:scaleY(0)}31%{transform:scaleY(1)}71%,77%{transform:scaleY(1)}}
@keyframes p9-look{0%,36%,60%,100%{transform:translate(0,0)}42%{transform:translate(-5px,1px)}54%{transform:translate(5px,1px)}}
@keyframes p9-brow{0%,68%,80%,100%{transform:none}72%,77%{transform:translateY(-6px) rotate(-8deg)}}
@keyframes p9-hair{from{transform:rotate(-1.5deg)}to{transform:rotate(1.5deg)}}
@keyframes p9-flick{0%{opacity:1}50%{opacity:.25}}
/* tokens fly left hand -> right hand in an arc (x linear, y bounce) */
@keyframes p9-tx{
  0%{left:6%;opacity:0}8%{opacity:1}
  50%{left:calc(94% - 34px);opacity:1}
  58%{opacity:0}
  100%{left:6%;opacity:0}
}
@keyframes p9-ty{from{bottom:14px}to{bottom:200px}}
@keyframes p9-gridspin{from{transform:translateX(0)}to{transform:translateX(-52px)}}
@keyframes p9-codeflow{from{transform:translateX(0)}to{transform:translateX(-30%)}}
@keyframes p9-orbit-a{0%,100%{transform:rotate(-19deg)}50%{transform:rotate(13deg)}}
@keyframes p9-orbit-b{0%,100%{transform:rotate(19deg)}50%{transform:rotate(-13deg)}}
@keyframes p9-progress{0%{transform:scaleX(0)}95%,100%{transform:scaleX(1)}}

@media(max-width:600px){
  #pix0-v9 .p9-scene{min-height:600px}
    #pix0-v9 .p9-title{font-size:10px;letter-spacing:2px}
  #pix0-v9 .p9-status{font-size:9px;letter-spacing:0}
}
@media(prefers-reduced-motion:reduce){
  #pix0-v9 .p9-fl{animation:none!important;opacity:.15}
  #pix0-v9 .p9-boy,#pix0-v9 .p9-boyh,#pix0-v9 .p9-boy-in,#pix0-v9 .p9-lid,#pix0-v9 .p9-iris,#pix0-v9 .p9-brow-r,#pix0-v9 .p9-hair,#pix0-v9 .p9-bin,#pix0-v9 .p9-hand,#pix0-v9 .p9-tok,#pix0-v9 .p9-wink,#pix0-v9 .p9-spark,
  #pix0-v9 .p9-grid,#pix0-v9 .p9-code-text,#pix0-v9 .p9-orbit,#pix0-v9 .p9-fill{animation:none!important}
  #pix0-v9 .p9-boy{transform:translateY(0)}
  #pix0-v9 .p9-fill{transform:scaleX(1)}
}
/* Mira integration: overlay positioning only; original PIX0 visuals unchanged. */
#pix0-v9.pix0-site-overlay{position:fixed;inset:0;z-index:2147483000;width:100%;height:100dvh;overflow:auto;background:#010b19;opacity:1;transition:opacity .35s}
#pix0-v9.pix0-site-overlay .p9-scene{min-height:100dvh;display:flex;align-items:center;justify-content:center}
#pix0-v9.pix0-site-overlay.p9-closing{opacity:0;pointer-events:none}
body.pix0-loader-active{overflow:hidden}