/* Stuck in chop: the AI stops of the hero tour (blocks/_pn-aipe.html, blog-chop-ai.js).
   AiPe wears showcase/aipe-demo.css (.ap-*); this file adds the MM Exposure page beside it (pn-ai-*). The hero supplies each window. Violet --lp-* UI; Only opacity and transform animate; reduced motion shows the finished state. */
.pn-ai { --pn-mono: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace; --pn-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- AiPe + the MM Exposure page ---------- */
.pn-ai { --ap-h: var(--pn-ai-h, 520px); }
.pn-ai .ap-stage { height: var(--ap-h); }
.pn-ai .pn-ai-pg { display: flex; flex-direction: column; gap: 14px; color: var(--ap-text, #dcd9f2); }
.pn-ai .pn-ai-pgtop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.pn-ai .pn-ai-pgname { font: 700 15px/1.3 var(--lp-font); color: var(--ap-bright, #f1effc); }
.pn-ai .pn-ai-tick { font: 800 20px/1.2 var(--lp-font); color: var(--ap-bright, #f1effc); }
.pn-ai .pn-ai-exp { font-size: 12px; color: var(--ap-muted, #a29ec4); }
.pn-ai .pn-ai-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pn-ai .pn-ai-kpi { padding: 10px 12px; border-radius: 10px; background: var(--ap-card, #19162d); border: 1px solid var(--ap-line, rgba(255,255,255,.07)); }
.pn-ai .pn-ai-kpi small { display: block; font-size: 11px; color: var(--ap-muted, #a29ec4); text-transform: uppercase; letter-spacing: .05em; }
.pn-ai .pn-ai-kpi b { display: block; margin-top: 2px; font: 700 18px/1.3 var(--pn-mono); font-variant-numeric: tabular-nums; color: var(--ap-bright, #f1effc); }
.pn-ai .pn-ai-hint { margin: 0; font-size: 12px; color: var(--ap-muted, #a29ec4); }
.pn-ai .pn-ai-disc { font-size: 12px; opacity: .75; font-style: italic; }
.pn-ai .pn-ai-ph { color: var(--ap-muted, #a29ec4); opacity: .8; }
.pn-ai .pn-ai-ph[hidden] { display: none; }
.pn-ai .ap-field { position: relative; display: flex; align-items: center; min-height: 36px; padding: 0 12px; flex: 1; min-width: 0; font-size: 13px; }
.pn-ai .pn-ai-run { margin: 8px 2px 0; font: 500 11.5px/1.5 var(--pn-mono); color: var(--ap-muted, #a29ec4); }
.pn-ai img { margin: 0; }
.pn-ai [data-pn-ai-user][hidden], .pn-ai [data-pn-ai-answer][hidden] { display: none; }
@media (max-width: 760px) { .pn-ai .ap-stage { height: auto; } .pn-ai .ap-drawer { height: 480px; } }