prototype: ThothII bottom-right with arrow up to Marts; center blocks become the four challenges (volume/structure, ambiguity, ontology, reliability)

presentation/prototype/slide05-outputs.html

@@ -64,13 +64,15 @@
   .arrow { align-self: center; color: var(--line-strong); font: 700 17px/1 var(--sans); }
   .stage.hot { background: #fdf1f2; border-color: var(--bordeaux); }
 
-  .thoth-wrap { display: flex; justify-content: flex-start; margin-top: 12px; }
+  .thoth-wrap { position: relative; display: flex; justify-content: flex-end; margin-top: 16px; }
   .thoth-col { width: 500px; text-align: center; }
-  .thoth-arrow { color: var(--line-strong); font: 700 15px/1 var(--sans); margin: 1px 0; }
   .thoth-box { border: 1px solid var(--bordeaux); border-radius: 8px; padding: 9px 14px;
     background: var(--surface-alt); font: 600 11.5px/1.4 var(--sans); text-transform: uppercase; letter-spacing: .02em; }
   .thoth-box .tag { display: inline-block; margin-right: 7px; padding: 2px 9px; border-radius: 9999px;
     background: var(--bordeaux); color: #fdfcfc; font: 700 8.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
+  .t-conn { position: absolute; width: 2px; background: var(--bordeaux); }
+  .t-head { position: absolute; width: 0; height: 0; border: 5px solid transparent;
+    border-bottom: 7px solid var(--bordeaux); transform: translateX(-50%); }
 
   /* ---- deep-dive concepts (center-left) ---- */
   .midrow { display: flex; gap: 28px; margin-top: 18px; align-items: flex-start; }
@@ -122,7 +124,7 @@
           <p class="en"><span class="en-tag">EN</span>“The patient reports recurrent syncope; baseline ECG with ST-segment elevation in V1–V3; flecainide provocation test positive for a Brugada pattern.”</p>
         </div>
       </div>
-      <div class="pipeline">
+      <div class="pipeline" id="pipeline">
         <div class="stage"><b>Sources</b><span>Cardioref · Genetic data<br>Omics Portal · ECG</span></div>
         <div class="arrow">→</div>
         <div class="stage"><b>Staging</b><span>raw replica</span></div>
@@ -135,11 +137,11 @@
       </div>
       <div class="midrow">
         <div class="concepts">
-          <div class="lbl">coming up — how we read the text</div>
-          <div class="citem"><span class="n">01</span><div><b>Audited numbers</b><span class="d">58,438 letters · 73,389 pathologies · 2,307 Brugada patients</span></div></div>
-          <div class="citem"><span class="n">02</span><div><b>Hard clinical NLP</b><span class="d">negation · family attribution · two languages</span></div></div>
-          <div class="citem"><span class="n">03</span><div><b>Clinical ontology</b><span class="d">two tiers, ordered by clinical precedence</span></div></div>
-          <div class="citem"><span class="n">04</span><div><b>Trust by design</b><span class="d">quality gates on 100 manual reviews</span></div></div>
+          <div class="lbl">four challenges to face · the answers come next</div>
+          <div class="citem"><span class="n">01</span><div><b>Volume without structure</b><span class="d">twenty years of records locked in free-text columns</span></div></div>
+          <div class="citem"><span class="n">02</span><div><b>Ambiguous language</b><span class="d">negation · family history · bilingual shorthand</span></div></div>
+          <div class="citem"><span class="n">03</span><div><b>No shared ontology</b><span class="d">every system names conditions its own way</span></div></div>
+          <div class="citem"><span class="n">04</span><div><b>Proving reliability</b><span class="d">extraction must be demonstrably correct</span></div></div>
         </div>
         <div class="railwrap" id="railwrap">
           <div class="conn-drop" id="conn-drop"></div>
@@ -161,9 +163,10 @@
           </div>
         </div>
       </div>
-      <div class="thoth-wrap">
+      <div class="thoth-wrap" id="thothwrap">
+        <div class="t-conn" id="t-conn"></div>
+        <div class="t-head" id="t-head"></div>
         <div class="thoth-col">
-          <div class="thoth-arrow">↑</div>
           <div class="thoth-box"><span class="tag">AI</span>ThothII — natural-language → SQL over the DWH, builds the final datamarts</div>
         </div>
       </div>
@@ -195,6 +198,24 @@
     elbow.style.left = railLeft + 'px';
     elbow.style.width = Math.max(0, cx - railLeft) + 'px';
     elbow.style.top = (railTop - 1) + 'px';
+
+    // ThothII arrow: from the box up to the Marts stage, along the right margin
+    const pipe = document.getElementById('pipeline');
+    const twrap = document.getElementById('thothwrap');
+    const box = twrap.querySelector('.thoth-box');
+    const conn = document.getElementById('t-conn');
+    const head = document.getElementById('t-head');
+    const pr = pipe.getBoundingClientRect();
+    const tr = twrap.getBoundingClientRect();
+    const br = box.getBoundingClientRect();
+    const x = tr.width - 10;                          // right margin, under Marts
+    const top = pr.bottom - tr.top + 2;               // just under the pipeline
+    const boxTop = br.top - tr.top;
+    conn.style.left = x + 'px';
+    conn.style.top = top + 'px';
+    conn.style.height = Math.max(0, boxTop - top) + 'px';
+    head.style.left = x + 'px';
+    head.style.top = (top - 7) + 'px';
   }
   addEventListener('load', alignConnector);
   addEventListener('resize', alignConnector);