/* Pixi entry points on the site (home block, bottom-menu item) */
#pixi-home{--red:#ea2e49;--red-d:#d9223c;--ink:#0f172a;--s1:#f1f5f9;--s2:#e2e8f0;--s4:#94a3b8;--s5:#64748b;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
#pixi-home *{box-sizing:border-box}
#pixi-home button,#pixi-home input{font-family:inherit}

/* home block */
#pixi-home{width:100%;max-width:1560px;margin:12px auto 0;padding:0 8px}
@media (min-width:640px){#pixi-home{padding:0 24px;margin-top:20px}}
@media (min-width:1024px){#pixi-home{padding:0 32px}}
.ph-card{cursor:pointer;position:relative;overflow:hidden;background:#fff;border:1px solid rgba(226,232,240,.8);border-radius:16px;padding:12px;box-shadow:0 1px 2px rgba(15,23,42,.04);display:grid;grid-template-columns:auto 1fr;gap:10px 12px;align-items:center}
.ph-card::before{content:"";position:absolute;left:-60px;top:-70px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(59,130,246,.14),rgba(59,130,246,0) 70%);pointer-events:none}
.ph-card>*{position:relative}
.ph-card img{width:56px;height:56px;filter:drop-shadow(0 6px 14px rgba(37,99,235,.35))}
.ph-txt b{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.ph-txt b em{font-style:normal;font-size:8.5px;font-weight:800;letter-spacing:.08em;background:var(--ink);color:#fff;padding:3px 6px;border-radius:6px}
.ph-txt span{display:block;margin-top:2px;font-size:12px;line-height:1.35;color:var(--s5)}
.ph-chips{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px}
.ph-chips button{background:#f8fafc;border:1px solid var(--s2);border-radius:999px;padding:5px 11px;font-size:12px;font-weight:600;color:#334155;cursor:pointer;transition:all .15s}
.ph-chips button:hover{border-color:var(--red);color:var(--red);background:#fff1f2}
@media (min-width:900px){
  .ph-card{grid-template-columns:auto 1fr;padding:14px 20px;gap:10px 18px}
  .ph-card img{width:64px;height:64px}
  .ph-txt b{font-size:17px}
  .ph-txt span{font-size:12.5px}
  .ph-chips{grid-column:2}
}

/* mobile bottom-menu item: same box model as the site's own items (p-1, 20px icon row, 10px label) */
.pixi-nav{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px;background:none;border:0;cursor:pointer;color:#64748b;font-size:10px;font-family:inherit;line-height:1.5}
.pixi-nav .pn-i{display:flex;align-items:center;justify-content:center;height:17px}
.pixi-nav img{display:block;width:28px;height:28px;margin:-5.5px 0;filter:drop-shadow(0 2px 4px rgba(37,99,235,.35))}

/* periodic speech bubble above the bottom-menu item */
.pixi-nudge{position:fixed;z-index:41;max-width:min(334px,calc(100vw - 20px));display:flex;align-items:center;gap:10px;padding:10px 28px 10px 10px;background:#fff;border:1px solid #e2e8f0;border-radius:16px;box-shadow:0 12px 32px rgba(15,23,42,.18),0 2px 6px rgba(15,23,42,.06);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:#0f172a;cursor:pointer;opacity:0;transform:translateY(12px) scale(.96);transform-origin:calc(100% - var(--tail,40px)) 100%;transition:opacity .28s ease,transform .38s cubic-bezier(.2,.9,.3,1.25);-webkit-tap-highlight-color:transparent}
.pixi-nudge.in{opacity:1;transform:none}
.pixi-nudge.out{opacity:0;transform:translateY(8px) scale(.97);transition-duration:.25s;transition-timing-function:ease-in}
.pixi-nudge::after{content:"";position:absolute;bottom:-7px;right:var(--tail,40px);width:12px;height:12px;background:#fff;border-right:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0;transform:rotate(45deg);border-radius:0 0 3px 0}
.pixi-nudge>img{width:34px;height:34px;flex:none;filter:drop-shadow(0 3px 6px rgba(37,99,235,.35))}
.pixi-nudge .pn-t{min-width:0;line-height:1.3}
.pixi-nudge .pn-t b{display:block;font-size:13px;font-weight:800;letter-spacing:-.01em}
.pixi-nudge .pn-t span{display:block;margin-top:2px;font-size:12px;color:#64748b;text-wrap:balance}
.pixi-nudge .pn-x{position:absolute;top:4px;right:4px;width:24px;height:24px;border:0;border-radius:50%;background:none;color:#94a3b8;font-size:18px;line-height:1;cursor:pointer}
.pixi-nudge .pn-x:active{background:#f1f5f9}
.pixi-nav.pn-ping .pn-i img{animation:pn-wiggle 1.1s ease-in-out 2}
@keyframes pn-wiggle{0%,100%{transform:rotate(0) scale(1)}20%{transform:rotate(-12deg) scale(1.12)}40%{transform:rotate(10deg) scale(1.12)}60%{transform:rotate(-6deg) scale(1.06)}80%{transform:rotate(3deg)}}
@media (min-width:1024px){.pixi-nudge{display:none}}
@media (prefers-reduced-motion:reduce){.pixi-nudge{transition:opacity .2s}.pixi-nav.pn-ping .pn-i img{animation:none}}
