…
When you talk with your AI about a page ("open the sync section", "show me that item"), ESP (also called Mind Meld) lets it take you there. You don't have to hunt for the page yourself.
+```embedhtml
+<div id="mm" role="img" aria-label="Animation: you and your AI linked by ESP (Mind Meld). As you talk, your AI takes your tab to the page you mean, with a note and a Back button.">
+<style>
+#mm{--a:var(--leaf,#2f8f6a);--b:var(--rose,#c2577a);--k:var(--ink,#1d1d1f);--c:var(--card,#fff);--l:var(--line,#d8d8dc);--s:var(--soft,#8a8a90);font-family:var(--body,system-ui,sans-serif);color:var(--k);max-width:560px;margin:0 auto;user-select:none}
+#mm .st{position:relative;border:1px solid var(--l);border-radius:14px;background:var(--c);overflow:hidden;padding:12px}
+#mm .bw{border:1px solid var(--l);border-radius:10px;overflow:hidden;background:var(--c);position:relative;height:150px}
+#mm .bar{display:flex;align-items:center;gap:6px;padding:6px 8px;border-bottom:1px solid var(--l);font-size:11px}
+#mm .addr{flex:1;padding:2px 8px;border:1px solid var(--l);border-radius:20px;color:var(--s);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s}
+#mm .pill{padding:2px 8px;border-radius:20px;border:1px solid var(--l);color:var(--s);font-weight:700;transition:all .35s}
+#mm .pill.on{background:var(--a);border-color:var(--a);color:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--a) 25%,transparent)}
+#mm .pg{position:absolute;left:0;right:0;top:31px;bottom:0;padding:10px 12px;opacity:0;transform:translateX(30px);transition:opacity .45s,transform .45s}
+#mm .pg.on{opacity:1;transform:none}#mm .pg.out{opacity:0;transform:translateX(-30px)}
+#mm .h{font-family:var(--display,inherit);font-weight:700;font-size:13px;margin-bottom:8px}
+#mm .ln{height:7px;border-radius:4px;background:var(--l);margin:6px 0}
+#mm .hl{background:color-mix(in srgb,var(--a) 22%,transparent);border-left:3px solid var(--a);border-radius:4px;padding:5px 7px;font-size:11px;margin:6px 0;animation:mmp 1.6s ease-in-out infinite}
+@keyframes mmp{50%{background:color-mix(in srgb,var(--a) 38%,transparent)}}
+#mm .tile{display:inline-block;padding:6px 9px;margin:3px 4px 0 0;border:1px solid var(--l);border-radius:8px;font-size:11px}
+#mm .toast{position:absolute;left:10px;right:10px;bottom:8px;display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:8px;background:var(--k);color:var(--c);font-size:11px;opacity:0;transform:translateY(10px);transition:all .35s}
+#mm .toast.on{opacity:.94;transform:none}#mm .toast b{margin-left:auto;padding:1px 7px;border-radius:5px;border:1px solid currentColor}
+#mm .toast b.tap{background:var(--c);color:var(--k)}
+#mm .meld{display:flex;align-items:center;justify-content:center;margin-top:12px}
+#mm .who{display:flex;flex-direction:column;align-items:center;gap:4px;width:70px;font-size:11px;color:var(--s)}
+#mm .orb{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:22px;color:#fff;transition:box-shadow .4s}
+#mm .me{background:var(--a)}#mm .ai{background:var(--b)}
+#mm.linked .orb{box-shadow:0 0 0 6px color-mix(in srgb,currentColor 0%,transparent),0 0 18px 2px color-mix(in srgb,var(--a) 55%,transparent)}
+#mm svg{width:150px;height:44px;overflow:visible}
+#mm .w{fill:none;stroke-width:2.2;stroke-linecap:round;opacity:.15;transition:opacity .5s}
+#mm.linked .w{opacity:1;stroke-dasharray:6 8;animation:mmd 1s linear infinite}#mm.linked .w2{animation-direction:reverse}
+@keyframes mmd{to{stroke-dashoffset:-28}}
+#mm .say{min-height:34px;display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:8px;font-size:12px}
+#mm .bub{padding:4px 10px;border-radius:12px;opacity:0;transition:opacity .35s;max-width:90%}
+#mm .bub.on{opacity:1}#mm .bub.u{background:color-mix(in srgb,var(--a) 18%,transparent)}#mm .bub.a{background:color-mix(in srgb,var(--b) 18%,transparent)}
+#mm .ctl{display:flex;justify-content:center;gap:6px;margin-top:8px}
+#mm .ctl button{width:9px;height:9px;padding:0;border-radius:50%;border:1px solid var(--s);background:transparent;cursor:pointer}
+#mm .ctl button.on{background:var(--k);border-color:var(--k)}
+@media (prefers-reduced-motion:reduce){#mm *{animation:none!important;transition:none!important}}
+</style>
+ <div class="bar"><span class="addr" id="mm-addr">aiheroapps.com/home</span><span class="pill" id="mm-esp">ESP</span></div>
+ <div class="pg on" data-p="0"><div class="h">My projects</div><span class="tile">Book club</span><span class="tile">Garden</span><span class="tile">Recipes</span><div class="ln" style="width:70%;margin-top:12px"></div></div>
+ <div class="pg" data-p="1"><div class="h">Garden · Rules</div><div class="ln" style="width:85%"></div><div class="hl">§3 Watering: water when it's dry for 3 days</div><div class="ln" style="width:60%"></div></div>
+ <div class="pg" data-p="2"><div class="h">Garden · To-dos</div><div class="hl">☐ Add a frost warning</div><div class="ln" style="width:75%"></div><div class="ln" style="width:50%"></div></div>
+ <div class="toast" id="mm-t"><span id="mm-tt"></span><b id="mm-back">Back</b></div>
+ </div>
+ <div class="who"><div class="orb me">🙂</div>You</div>
+ <svg viewBox="0 0 150 44" aria-hidden="true"><path class="w" stroke="var(--a)" d="M2 22 C 20 4, 38 4, 56 22 S 92 40, 110 22 S 140 4, 148 22"/><path class="w w2" stroke="var(--b)" d="M2 22 C 20 40, 38 40, 56 22 S 92 4, 110 22 S 140 40, 148 22"/></svg>
+ <div class="who"><div class="orb ai">✦</div>Your AI</div>
+ </div>
+ <div class="say"><span class="bub u" id="mm-u"></span><span class="bub a" id="mm-a"></span></div>
+ <div class="ctl" id="mm-dots"></div>
+</div>
+<script>
+(function(){
+var R=document.getElementById('mm'),$=function(i){return document.getElementById('mm-'+i)};
+var S=[
+ {p:0,esp:0,u:'',a:'',t:'',addr:'aiheroapps.com/home'},
+ {p:0,esp:1,u:'(taps ESP)',a:'Mind meld on: I can see your page now.',t:'',addr:'aiheroapps.com/home'},
+ {p:1,esp:1,u:'How does the watering rule work?',a:'Here it is, §3.',t:'Your AI moved you: the watering rule',addr:'garden.aiheroapps.com/topics/Rules#watering'},
+ {p:2,esp:1,u:'Add a frost warning to my list.',a:'Added. Showing you.',t:'Your AI moved you: your new to-do',addr:'garden.aiheroapps.com/todos'},
+ {p:1,esp:1,u:'(taps Back)',a:'',t:'Back where you were',addr:'garden.aiheroapps.com/topics/Rules#watering',back:1}
+];
+var i=0,tm=null,auto=true,cur=0,d=$('dots');
+S.forEach(function(_,k){var b=document.createElement('button');b.setAttribute('aria-label','Step '+(k+1));b.onclick=function(){auto=false;clearTimeout(tm);go(k)};d.appendChild(b)});
+function go(k){var s=S[k];i=k;
+ R.querySelectorAll('.pg').forEach(function(e){var on=+e.dataset.p===s.p;if(on&&!e.classList.contains('on')){e.classList.remove('out');e.classList.add('on')}else if(!on&&e.classList.contains('on')){e.classList.remove('on');e.classList.add('out')}});
+ $('esp').classList.toggle('on',!!s.esp);R.classList.toggle('linked',!!s.esp);$('addr').textContent=s.addr;
+ $('u').textContent=s.u;$('u').classList.toggle('on',!!s.u);
+ $('a').textContent=s.a;$('a').classList.remove('on');if(s.a)setTimeout(function(){if(i===k)$('a').classList.add('on')},700);
+ $('tt').textContent=s.t;$('t').classList.toggle('on',!!s.t);$('back').classList.toggle('tap',!!s.back);$('back').style.display=s.back?'none':'';
+ d.querySelectorAll('button').forEach(function(b,j){b.classList.toggle('on',j===k)});
+ if(auto){tm=setTimeout(function(){go((k+1)%S.length)},k===0?1600:3200)}}
+go(0);
+})();
+</script>
+</div>
+
+```
+
**What it does**
…