/* zen-keyloop.js companion styles — the kitchen key-search sense/interpret/act
 * animation. Dark palette is bound to the site's data-theme toggle (not
 * prefers-color-scheme) so it flips with the rest of the page. */
.keyfig{
  --fg:#2c2c2a;--fg2:#5f5e5a;--fg3:#8a8981;--line:#d8d6cd;--line2:#bcbab1;
  --surf:#f6f4ee;--card:#ffffff;--cab:#d6e3f0;
  --pp:#534AB7;--pf:#EEEDFE;--pt:#26215C;
  --aa:#0F6E56;--af:#E1F5EE;--at:#04342C;
  --gk:#BA7517;--qc:#E24B4A;
  --ff:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  max-width:680px;margin:1.75rem auto;line-height:1.5;color:var(--fg);
  font-family:var(--ff);
  background:var(--card);
  border:0.5px solid var(--line);
  border-radius:18px;
  padding:clamp(16px,3.2vw,26px);
  box-sizing:border-box;
  box-shadow:0 1px 2px rgba(0,0,0,.05),0 10px 26px rgba(0,0,0,.045);
}
html[data-theme="dark"] .keyfig{
  --fg:#ECEAE1;--fg2:#b4b2a9;--fg3:#8a8981;--line:#403f3a;--line2:#5a5954;
  --surf:#2b2a25;--card:#38362f;--cab:#37485a;
  --pp:#AFA9EC;--pf:#3C3489;--pt:#EEEDFE;
  --aa:#5DCAA5;--af:#0F6E56;--at:#E1F5EE;
  --gk:#EF9F27;--qc:#F09595;
}
.keyfig svg{display:block;width:100%;height:auto}
.keyfig text{font-family:var(--ff)}
.keyfig .k-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.keyfig #k-ret{transition:transform .68s cubic-bezier(.45,.05,.3,1)}
.keyfig #k-rpulse{opacity:0}
.keyfig #k-rpulse.on circle{animation:kpng 1.2s ease-out infinite}
.keyfig #k-rpulse.on circle:nth-child(2){animation-delay:.6s}
@keyframes kpng{from{transform:scale(1);opacity:.5}to{transform:scale(1.9);opacity:0}}
.keyfig #k-rx{opacity:0;transition:opacity .25s}
.keyfig #k-bubble{transform-box:fill-box;transform-origin:center;opacity:0;transform:scale(.85);transition:opacity .35s ease,transform .4s cubic-bezier(.34,1.35,.5,1)}
.keyfig #k-bubble.on{opacity:1;transform:scale(1)}
.keyfig .belief{transition:r .4s ease,fill-opacity .4s ease}
.keyfig .belief.ruled{stroke:var(--fg3)}
.keyfig #k-mhi,.keyfig #k-qmark,.keyfig #k-povkey,.keyfig #k-mapkey{opacity:0;transition:opacity .3s ease}
.keyfig .controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.keyfig .ctl{display:inline-flex;align-items:center;gap:6px;font-family:var(--ff);font-size:13px;color:var(--fg);background:transparent;border:.5px solid var(--line2);border-radius:8px;padding:6px 12px;cursor:pointer;line-height:1}
.keyfig .ctl:hover{background:var(--surf)}
.keyfig .ctl:active{transform:scale(.98)}
.keyfig #k-pp{padding:6px 9px}
.keyfig .chips{display:flex;gap:6px;margin-left:auto}
.keyfig .chip{font-size:12px;padding:4px 11px;border-radius:999px;border:.5px solid var(--line);color:var(--fg2)}
.keyfig .chip.active[data-ph=sense]{background:var(--surf);color:var(--fg);border-color:var(--line2)}
.keyfig .chip.active[data-ph=interpret]{background:var(--pf);color:var(--pt);border-color:var(--pp)}
.keyfig .chip.active[data-ph=act]{background:var(--af);color:var(--at);border-color:var(--aa)}
.keyfig #k-phlabel{font-size:15px;font-weight:500;color:var(--fg);margin-top:10px}
.keyfig #k-phdesc{font-size:13px;color:var(--fg2);margin-top:2px}
.keyfig figcaption{font-size:13px;color:var(--fg2);line-height:1.55;margin-top:14px}
.keyfig.reduce #k-ret,.keyfig.reduce #k-bubble,.keyfig.reduce .belief,.keyfig.reduce #k-mhi,.keyfig.reduce #k-qmark,.keyfig.reduce #k-povkey,.keyfig.reduce #k-mapkey{transition-duration:.01ms}
.keyfig.reduce #k-rpulse.on circle{animation:none;opacity:.35}