/* LamFia — per-perspective functional diagrams (paired with assets/diagrams.js).
   One shared, minimalist visual language; each perspective gets a layout that
   shows its real mechanic. Themed by --ac on each .pdia. Loaded only by the
   home explorer (LamFia.html); product pages are unaffected. */

/* ---- shared base + primitives -------------------------------------- */
.pdia{--lc:color-mix(in srgb, var(--strong) 13%, transparent);
  --cbg:color-mix(in srgb, var(--raised) 68%, transparent);
  width:100%;max-width:640px;margin:0 auto;position:relative;
  font-family:var(--font-body);color:var(--text-2);line-height:1.4}
.pdia *{box-sizing:border-box}
.pdia svg{width:auto;height:auto;max-width:none}            /* neutralise .tx-diagram svg{width:100%} */

.pd-ln{display:block;height:6.5px;border-radius:4px;background:var(--lc);margin:6px 0}
.pd-tag{font:600 9.5px/1.1 var(--font-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ac)}
.pd-sub{font:600 8.5px/1.2 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-4)}
.pd-card{background:var(--cbg);border:1px solid var(--line);border-radius:13px}
.pd-dotk{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ac);margin-right:8px;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 14%,transparent)}

/* bottom context rails / notes shared by several diagrams */
.pd-rail,.pd-foot{display:flex;align-items:center;gap:2px;margin-top:16px;
  font:600 11px/1.4 var(--font-body);color:var(--text-3);letter-spacing:-.003em}
.pd-rail{justify-content:center;text-align:center}
.pd-foot{justify-content:center}
.pd-md{font:600 9px/1 var(--font-mono);letter-spacing:.05em;color:var(--ac);
  border:1px solid color-mix(in srgb,var(--ac) 34%,transparent);background:color-mix(in srgb,var(--ac) 11%,transparent);
  border-radius:6px;padding:5px 7px;margin-right:9px}
.pd-md.off{color:var(--text-3);border-color:var(--line-2);background:rgba(var(--raise-rgb),.04)}

/* arrows */
.pd-arr{flex:0 0 auto;align-self:center;width:24px;height:2px;border-radius:2px;position:relative;
  background:color-mix(in srgb,var(--ac) 38%,transparent)}
.pd-arr::after{content:"";position:absolute;right:-1px;top:50%;transform:translateY(-50%);
  border-left:6px solid color-mix(in srgb,var(--ac) 60%,transparent);border-top:4px solid transparent;border-bottom:4px solid transparent}
.pd-arr.down{width:2px;height:20px}
.pd-arr.down::after{right:auto;left:50%;top:auto;bottom:-1px;transform:translateX(-50%);
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:6px solid color-mix(in srgb,var(--ac) 60%,transparent);border-bottom:0}

/* entrance — every .pr fades + rises on panel reveal, staggered by --i */
@media(prefers-reduced-motion:no-preference){
  .pdia .pr{animation:pd-rise .5s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--i,0) * .07s)}
  @keyframes pd-rise{from{opacity:0;transform:translateY(10px)}}
}

/* ==================================================================== */
/* 1 — AI CHAT                                                          */
.pd-chat .pd-flow{display:flex;align-items:stretch;justify-content:center;gap:11px}
.pd-chat .pd-stage{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:8px;text-align:left}
.pd-chat .pd-stage .pd-tag{order:0}
.pd-chat .pd-ask,.pd-chat .pd-doc,.pd-chat .pd-answer{flex:1;background:var(--cbg);border:1px solid var(--line);border-radius:12px;padding:12px 13px}
.pd-chat .pd-ask{display:flex;flex-direction:column;justify-content:center;gap:0}
.pd-chat .pd-caret{display:inline-block;width:2px;height:13px;background:var(--ac);margin-top:4px;border-radius:1px}
.pd-chat .pd-doc .hit{background:color-mix(in srgb,var(--ac) 42%,transparent);height:7px}
.pd-chat .pd-answer{border-color:color-mix(in srgb,var(--ac) 30%,transparent);background:color-mix(in srgb,var(--ac) 7%,transparent)}
.pd-chat .pd-cite{display:inline-flex;align-items:center;gap:6px;margin-top:9px;
  font:600 9.5px/1 var(--font-body);color:var(--text-2)}
.pd-chat .pd-citenum{display:grid;place-items:center;width:14px;height:14px;border-radius:4px;
  font:700 8.5px/1 var(--font-mono);color:var(--strong);
  background:color-mix(in srgb,var(--ac) 26%,transparent);border:1px solid color-mix(in srgb,var(--ac) 45%,transparent)}
.pd-chat .pd-sub{margin-top:1px}

/* ==================================================================== */
/* 2 — SMARTWRITER                                                      */
.pd-writer .pd-editor{max-width:460px;margin:0 auto;overflow:hidden}
.pd-writer .pd-ed-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 13px;border-bottom:1px solid var(--line);background:rgba(var(--raise-rgb),.03)}
.pd-writer .pd-file{font:600 11px/1 var(--font-mono);color:var(--text-2);letter-spacing:.02em}
.pd-writer .pd-tools{display:flex;gap:6px}
.pd-writer .pd-tool{font:600 9px/1 var(--font-mono);letter-spacing:.04em;color:var(--ac);
  border:1px solid color-mix(in srgb,var(--ac) 30%,transparent);background:color-mix(in srgb,var(--ac) 9%,transparent);
  border-radius:6px;padding:5px 8px;white-space:nowrap}
.pd-writer .pd-ed-body{padding:14px 15px}
.pd-writer .pd-diff{margin:9px 0;border-left:2px solid color-mix(in srgb,var(--ac) 45%,transparent);padding-left:10px;display:flex;flex-direction:column;gap:5px}
.pd-writer .pd-diffrow{display:flex;align-items:center;gap:8px}
.pd-writer .pd-sign{font:700 12px/1 var(--font-mono);width:10px;flex:0 0 auto}
.pd-writer .pd-diffrow.del .pd-sign{color:#e0727a}
.pd-writer .pd-diffrow.add .pd-sign{color:var(--ac)}
.pd-writer .pd-ln.on-del{background:color-mix(in srgb,#e0727a 38%,transparent);opacity:.65;margin:0;
  position:relative}
.pd-writer .pd-ln.on-del::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:#e0727a;opacity:.7}
.pd-writer .pd-ln.on-add{background:color-mix(in srgb,var(--ac) 55%,transparent);margin:0}
.pd-writer .pd-pii{display:flex;align-items:center;gap:8px;margin:9px 0}
.pd-writer .pd-redact{flex:1;height:9px;border-radius:4px;letter-spacing:2px;font-size:9px;color:var(--text-4);
  background:repeating-linear-gradient(90deg,var(--lc) 0 4px,transparent 4px 7px)}
.pd-writer .pd-piitag{font:600 8px/1 var(--font-mono);letter-spacing:.08em;color:var(--text-3);
  border:1px solid var(--line-2);border-radius:5px;padding:4px 6px}

/* ==================================================================== */
/* 3 — PROMPTSTUDIO                                                     */
.pd-prompt .pd-compose{display:flex;flex-direction:column;align-items:center;gap:0;max-width:440px;margin:0 auto}
.pd-prompt .pd-blocks{display:flex;flex-direction:column;gap:6px;width:100%}
.pd-prompt .pd-block{display:flex;align-items:center;gap:11px;
  background:var(--cbg);border:1px solid var(--line);border-radius:10px;padding:9px 13px}
.pd-prompt .pd-bk-h{font:600 11.5px/1 var(--font-body);color:var(--strong);white-space:nowrap;letter-spacing:-.004em}
.pd-prompt .pd-bk-l{flex:1;height:6px;border-radius:3px;background:var(--lc)}
.pd-prompt .pd-block.data{border-style:dashed;border-color:color-mix(in srgb,var(--ac) 40%,transparent);
  background:color-mix(in srgb,var(--ac) 6%,transparent)}
.pd-prompt .pd-shield{font:600 8px/1 var(--font-mono);letter-spacing:.05em;color:var(--ac);
  border:1px solid color-mix(in srgb,var(--ac) 35%,transparent);border-radius:5px;padding:3px 5px;margin-left:7px;text-transform:uppercase}
.pd-prompt .pd-arr.down{margin:8px 0}
.pd-prompt .pd-result{display:flex;align-items:center;gap:14px;width:100%;
  background:color-mix(in srgb,var(--ac) 8%,transparent);border:1px solid color-mix(in srgb,var(--ac) 32%,transparent);
  border-radius:12px;padding:13px 16px}
.pd-prompt .pd-score{position:relative;flex:0 0 auto;width:44px;height:44px;display:grid;place-items:center}
.pd-prompt .pd-ring{position:absolute;inset:0;width:44px;height:44px;transform:rotate(-90deg)}
.pd-prompt .pd-ring .bg{fill:none;stroke:color-mix(in srgb,var(--strong) 12%,transparent);stroke-width:4}
.pd-prompt .pd-ring .fg{fill:none;stroke:var(--ac);stroke-width:4;stroke-linecap:round;stroke-dasharray:113;stroke-dashoffset:7}
.pd-prompt .pd-score-n{font:700 14px/1 var(--font-body);color:var(--strong)}
.pd-prompt .pd-result-t{display:flex;flex-direction:column;gap:6px}
.pd-prompt .pd-ok{font:600 10px/1 var(--font-body);color:var(--text-3)}

/* ==================================================================== */
/* 4 — STRATARYX                                                        */
.pd-strataryx .pd-report{max-width:520px;margin:0 auto;padding:15px 17px}
.pd-strataryx .pd-rep-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:13px;padding-bottom:11px;border-bottom:1px solid var(--line)}
.pd-strataryx .pd-sec{display:flex;align-items:center;gap:12px;padding:7px 0}
.pd-strataryx .pd-sec-name{flex:0 0 38%;font:600 11.5px/1.2 var(--font-body);color:var(--strong);letter-spacing:-.004em}
.pd-strataryx .pd-bar{flex:1;height:7px;border-radius:4px;background:color-mix(in srgb,var(--strong) 9%,transparent);overflow:hidden}
.pd-strataryx .pd-fill{display:block;height:100%;width:var(--w);border-radius:4px;background:var(--ac);transform-origin:left}
.pd-strataryx .pd-agent{flex:0 0 auto;font:600 8.5px/1 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;
  color:var(--ac);border:1px solid color-mix(in srgb,var(--ac) 28%,transparent);background:color-mix(in srgb,var(--ac) 8%,transparent);
  border-radius:6px;padding:5px 7px;min-width:62px;text-align:center}
.pd-strataryx .pd-exports{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:15px;flex-wrap:wrap}
.pd-strataryx .pd-fmt{font:600 10px/1 var(--font-mono);color:var(--text-2);
  border:1px solid var(--line-2);border-radius:7px;padding:6px 11px;background:rgba(var(--raise-rgb),.03)}

/* ==================================================================== */
/* 5 — AI AGENTS                                                        */
.pd-agents .pd-reuse{display:flex;align-items:center;justify-content:center;gap:0}
.pd-agents .pd-agent-card{flex:0 0 auto;width:200px;display:flex;flex-direction:column;gap:9px;
  background:var(--cbg);border:1px solid color-mix(in srgb,var(--ac) 30%,transparent);border-radius:13px;padding:14px 15px;
  box-shadow:0 18px 40px -28px var(--ac)}
.pd-agents .pd-agent-name{display:flex;align-items:center;gap:9px;font:600 13px/1.1 var(--font-body);color:var(--strong);letter-spacing:-.006em}
.pd-agents .pd-orb{width:11px;height:11px;border-radius:50%;flex:0 0 auto;background:var(--ac);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--ac) 16%,transparent)}
.pd-agents .pd-scoped{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.pd-agents .pd-tchip{font:600 9px/1 var(--font-mono);color:var(--text-2);border:1px solid var(--line-2);border-radius:6px;padding:4px 7px;background:rgba(var(--raise-rgb),.03)}
.pd-agents .pd-life{display:flex;align-items:center;gap:5px}
.pd-agents .pd-life span:not(.pd-sub){width:8px;height:8px;border-radius:50%;border:1px solid var(--line-3);flex:0 0 auto}
.pd-agents .pd-life span.on{background:var(--ac);border-color:transparent}
.pd-agents .pd-life .pd-sub{margin-left:5px}
.pd-agents .pd-fan{flex:0 0 auto;width:54px;align-self:stretch;position:relative;min-height:120px}
.pd-agents .pd-fan i{position:absolute;left:0;right:0;height:0;border-top:1.5px dashed color-mix(in srgb,var(--ac) 38%,transparent);transform-origin:left center}
.pd-agents .pd-fan i:nth-child(1){top:28%;transform:rotate(-18deg)}
.pd-agents .pd-fan i:nth-child(2){top:50%}
.pd-agents .pd-fan i:nth-child(3){top:72%;transform:rotate(18deg)}
.pd-agents .pd-surfaces{flex:0 0 auto;width:188px;display:flex;flex-direction:column;gap:8px}
.pd-agents .pd-tag.rt{text-align:right;margin-bottom:1px}
.pd-agents .pd-surf{display:flex;flex-direction:column;gap:2px;background:var(--cbg);border:1px solid var(--line);border-radius:10px;padding:9px 12px}
.pd-agents .pd-surf-n{font:600 12px/1.1 var(--font-body);color:var(--strong)}
.pd-agents .pd-surf-note{font:600 9px/1 var(--font-mono);letter-spacing:.04em;color:var(--text-4)}

/* ==================================================================== */
/* 6 — MISSION CONTROL                                                  */
.pd-mission .pd-console{display:grid;grid-template-columns:1fr 1fr;gap:11px;max-width:520px;margin:0 auto}
.pd-mission .pd-tile{display:flex;flex-direction:column;gap:9px;background:var(--cbg);border:1px solid var(--line);border-radius:12px;padding:13px 15px}
.pd-mission .pd-tl-h{font:600 10px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.pd-mission .pd-tl-v{font:600 11.5px/1.1 var(--font-body);color:var(--strong);letter-spacing:-.004em}
.pd-mission .pd-dots{display:flex;gap:7px;align-items:center}
.pd-mission .pd-dots i{width:9px;height:9px;border-radius:50%;background:color-mix(in srgb,var(--strong) 14%,transparent)}
.pd-mission .pd-dots i.on{background:var(--ac);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 16%,transparent)}
.pd-mission .pd-meter{position:relative;display:block;height:8px;border-radius:5px;background:color-mix(in srgb,var(--strong) 10%,transparent)}
.pd-mission .pd-meter-f{position:absolute;left:0;top:0;bottom:0;width:var(--w);border-radius:5px;background:var(--ac);transform-origin:left}
.pd-mission .pd-cap{position:absolute;top:-3px;bottom:-3px;left:74%;width:2px;border-radius:2px;background:color-mix(in srgb,var(--strong) 50%,transparent)}
.pd-mission .pd-toggle{display:inline-flex;border:1px solid var(--line-2);border-radius:8px;overflow:hidden;width:max-content}
.pd-mission .pd-toggle .opt{font:600 9.5px/1 var(--font-mono);letter-spacing:.03em;color:var(--text-3);padding:6px 10px}
.pd-mission .pd-toggle .opt.on{color:var(--strong);background:color-mix(in srgb,var(--ac) 18%,transparent)}
.pd-mission .pd-peers{display:flex;gap:14px;align-items:center;position:relative;padding:2px 0}
.pd-mission .pd-peers i{width:11px;height:11px;border-radius:50%;background:color-mix(in srgb,var(--ac) 22%,transparent);border:1px solid color-mix(in srgb,var(--ac) 45%,transparent);position:relative}
.pd-mission .pd-peers i+ i::before{content:"";position:absolute;right:100%;top:50%;width:14px;height:1.5px;background:color-mix(in srgb,var(--ac) 35%,transparent)}

/* ==================================================================== */
/* 7 — SUPPORT                                                          */
.pd-support .pd-stack{display:flex;align-items:stretch;justify-content:center;gap:0;position:relative}
.pd-support .pd-workspace{flex:1 1 0;min-width:0;position:relative;background:rgba(var(--raise-rgb),.02);
  border:1px solid var(--line);border-radius:13px;padding:14px 15px;opacity:.92}
.pd-support .pd-ws-bar{display:flex;gap:5px;margin-bottom:11px}
.pd-support .pd-ws-bar i{width:8px;height:8px;border-radius:50%;background:var(--lc)}
.pd-support .pd-key{position:absolute;right:-13px;bottom:16px;z-index:3;display:grid;place-items:center;
  width:26px;height:26px;border-radius:7px;font:700 13px/1 var(--font-mono);color:var(--strong);
  background:var(--raised);border:1px solid color-mix(in srgb,var(--ac) 45%,transparent);
  box-shadow:0 8px 18px -8px var(--ac),inset 0 -2px 0 var(--line-2)}
.pd-support .pd-help{flex:0 0 50%;margin-left:-22px;z-index:2;display:flex;flex-direction:column;gap:8px;
  background:var(--cbg);border:1px solid color-mix(in srgb,var(--ac) 32%,transparent);border-radius:13px;padding:14px 16px;
  box-shadow:0 26px 56px -30px var(--ac)}
.pd-support .pd-help-h{margin-bottom:2px}
.pd-support .pd-help-row{display:flex;align-items:center;gap:10px;font:600 12px/1.2 var(--font-body);color:var(--strong);letter-spacing:-.004em}
.pd-support .pd-help-ic{flex:0 0 auto;width:18px;height:18px;border-radius:6px;
  background:color-mix(in srgb,var(--ac) 16%,transparent);border:1px solid color-mix(in srgb,var(--ac) 32%,transparent)}

/* ==================================================================== */
/* 8 — AI POWERED SEARCH                                                */
.pd-search{max-width:480px}
.pd-search .pd-searchbar{display:flex;align-items:center;gap:11px;background:var(--cbg);
  border:1px solid color-mix(in srgb,var(--ac) 30%,transparent);border-radius:11px;padding:12px 14px}
.pd-search .pd-mag{flex:0 0 auto;width:15px;height:15px;border-radius:50%;border:2px solid var(--ac);position:relative}
.pd-search .pd-mag::after{content:"";position:absolute;right:-4px;bottom:-3px;width:6px;height:2px;border-radius:2px;background:var(--ac);transform:rotate(45deg)}
.pd-search .pd-q{flex:1;font:600 12.5px/1 var(--font-body);color:var(--text-2)}
.pd-search .pd-kbd{font:600 9.5px/1 var(--font-mono);color:var(--text-3);border:1px solid var(--line-2);border-radius:6px;padding:5px 7px;background:rgba(var(--raise-rgb),.03)}
.pd-search .pd-methods{display:flex;align-items:center;justify-content:center;gap:8px;margin:13px 0;flex-wrap:wrap}
.pd-search .pd-method{font:600 10px/1 var(--font-mono);letter-spacing:.03em;color:var(--strong);
  border:1px solid var(--line-2);border-radius:7px;padding:6px 10px;background:rgba(var(--raise-rgb),.03)}
.pd-search .pd-plus{color:var(--text-4);font:600 11px/1 var(--font-mono)}
.pd-search .pd-merge{font:600 9.5px/1 var(--font-mono);letter-spacing:.03em;color:var(--ac);margin-left:3px}
.pd-search .pd-results{display:flex;flex-direction:column;gap:6px}
.pd-search .pd-res{display:flex;align-items:center;gap:11px;background:var(--cbg);border:1px solid var(--line);border-radius:9px;padding:9px 12px}
.pd-search .pd-rtype{flex:0 0 auto;min-width:64px;font:600 8.5px/1 var(--font-mono);letter-spacing:.05em;text-transform:uppercase;
  color:var(--ac);border:1px solid color-mix(in srgb,var(--ac) 28%,transparent);background:color-mix(in srgb,var(--ac) 8%,transparent);
  border-radius:6px;padding:5px 6px;text-align:center}
.pd-search .pd-rln{height:7px;border-radius:4px;background:var(--lc)}
.pd-search .pd-open{margin-left:auto;color:var(--ac);font:700 12px/1 var(--font-body)}

/* ==================================================================== */
/* 0 — STUDIO (overview): eight perspectives on one shared foundation    */
.pd-studio{max-width:604px}
.pd-studio .ps-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}
.pd-studio .ps-status{display:inline-flex;align-items:center;gap:7px;font:600 8.5px/1 var(--font-mono);letter-spacing:.1em;color:var(--text-4)}
.pd-studio .ps-live{width:7px;height:7px;border-radius:50%;background:#9BD17A;box-shadow:0 0 0 3px rgba(155,209,122,.18)}
.pd-studio .ps-persps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pd-studio .ps-chip{display:flex;align-items:center;gap:8px;text-decoration:none;
  border:1px solid color-mix(in srgb,var(--ac) 34%,transparent);border-radius:10px;padding:11px 12px;
  background:color-mix(in srgb,var(--ac) 8%,transparent);
  transition:transform .2s cubic-bezier(.2,.7,.2,1),border-color .2s ease,background .2s ease,box-shadow .2s ease}
.pd-studio .ps-chip:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--ac) 62%,transparent);
  background:color-mix(in srgb,var(--ac) 14%,transparent);box-shadow:0 12px 26px -15px color-mix(in srgb,var(--ac) 60%,transparent)}
.pd-studio .ps-dotc{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:var(--ac);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 15%,transparent)}
.pd-studio .ps-name{font:600 11.5px/1.1 var(--font-body);color:var(--strong);letter-spacing:-.004em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd-studio .ps-converge{height:24px;margin:11px auto;display:block}
.pd-studio .ps-foundation{display:flex;align-items:center;justify-content:center;gap:13px 16px;flex-wrap:wrap;
  border:1px solid color-mix(in srgb,var(--ac) 42%,transparent);border-radius:13px;padding:15px 18px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--ac) 15%,transparent),color-mix(in srgb,var(--ac) 6%,transparent));
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ac) 32%,transparent),0 18px 40px -28px color-mix(in srgb,var(--ac) 65%,transparent)}
.pd-studio .ps-f-h{display:inline-flex;align-items:center;gap:9px;font:600 13px/1.1 var(--font-body);color:var(--strong);letter-spacing:-.006em;white-space:nowrap}
.pd-studio .ps-f-ic{width:13px;height:13px;border-radius:4px;background:var(--ac);flex:0 0 auto;box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 18%,transparent)}
.pd-studio .ps-f-pills{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.pd-studio .ps-fpill{font:600 9px/1 var(--font-mono);letter-spacing:.03em;color:var(--text-2);
  border:1px solid color-mix(in srgb,var(--ac) 26%,transparent);background:rgba(var(--raise-rgb),.05);border-radius:6px;padding:5px 8px;white-space:nowrap}
.pd-studio .ps-promises{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:15px;flex-wrap:wrap}
.pd-studio .ps-promise{display:inline-flex;align-items:center;gap:8px;font:600 11px/1.3 var(--font-body);color:var(--text-3)}
.pd-studio .ps-promise::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ac);flex:0 0 auto}

/* fills + ring animate on reveal; default = filled (reduced-motion-safe) */
@media(prefers-reduced-motion:no-preference){
  .pd-strataryx .pd-fill,.pd-mission .pd-meter-f{transform:scaleX(0)}
  .tx-diagram.in .pd-strataryx .pd-fill{animation:pd-grow .8s cubic-bezier(.3,.8,.3,1) forwards;animation-delay:calc(var(--i,0)*.07s + .15s)}
  .tx-diagram.in .pd-mission .pd-meter-f{animation:pd-grow .9s cubic-bezier(.3,.8,.3,1) forwards .25s}
  @keyframes pd-grow{to{transform:scaleX(1)}}
  .pd-prompt .pd-ring .fg{stroke-dashoffset:113}
  .tx-diagram.in .pd-prompt .pd-ring .fg{animation:pd-ring .9s ease forwards .45s}
  @keyframes pd-ring{to{stroke-dashoffset:7}}
  /* a gentle caret blink keeps the chat "ask" alive without being noisy */
  .pd-chat .pd-caret{animation:pd-blink 1.15s steps(1) infinite}
  @keyframes pd-blink{50%{opacity:.25}}
  .pd-studio .ps-live{animation:pd-pulse 2.4s ease-in-out infinite}
  @keyframes pd-pulse{0%,100%{box-shadow:0 0 0 0 rgba(155,209,122,.5)}50%{box-shadow:0 0 0 5px rgba(155,209,122,0)}}
}

/* ---- responsive: stack the multi-column scenes on narrow panels ---- */
@media(max-width:600px){
  .pd-chat .pd-flow{flex-direction:column;gap:9px}
  .pd-chat .pd-arr{transform:rotate(90deg)}
  .pd-agents .pd-reuse{flex-direction:column;gap:12px}
  .pd-agents .pd-fan{display:none}
  .pd-agents .pd-agent-card,.pd-agents .pd-surfaces{width:100%;max-width:300px}
  .pd-agents .pd-tag.rt{text-align:left}
  .pd-mission .pd-console{grid-template-columns:1fr}
  .pd-support .pd-stack{flex-direction:column}
  .pd-support .pd-help{flex-basis:auto;margin-left:0;margin-top:-14px}
  .pd-support .pd-key{right:14px;bottom:-13px}
  .pd-strataryx .pd-sec-name{flex-basis:46%}
  .pd-studio .ps-persps{grid-template-columns:repeat(2,1fr)}
}