Upload viewer

index.html

@@ -93,6 +93,12 @@
   .judge-expl { font-size: 13px; background: var(--panel2, rgba(127,127,127,.06));
     border: 1px solid var(--line); border-left: 3px solid var(--warn, #eda100);
     border-radius: 8px; padding: 10px 14px; margin-top: 4px; }
+  /* divider before the MR/E exploration section */
+  .section-div { display: flex; align-items: center; gap: 12px; margin: 26px 0 4px;
+    font-family: var(--mono, ui-monospace, monospace); font-size: 11px;
+    text-transform: uppercase; letter-spacing: 1px; color: var(--text-2, #8a8880); }
+  .section-div::before, .section-div::after { content: ""; flex: 1; height: 1px;
+    background: var(--line); }
 
   /* layers */
   .layer { margin: 26px 0; }
@@ -372,14 +378,20 @@ function renderTraj() {
     content.appendChild(gt);
   }
 
-  // layers
-  for (const L of t.layers) content.appendChild(renderLayer(L));
-
-  // final answers
+  // final answers + judgement first (the outcome), then the MR/E exploration
   if (t.final_answers && t.final_answers.length) {
     content.appendChild(renderFinals(t.final_answers));
   }
 
+  // MR/E exploration
+  if (t.layers && t.layers.length) {
+    const sep = document.createElement("div");
+    sep.className = "section-div";
+    sep.innerHTML = `<span>MR / E exploration — ${t.layers.length} layer(s)</span>`;
+    content.appendChild(sep);
+    for (const L of t.layers) content.appendChild(renderLayer(L));
+  }
+
   applyViews();
   renderMath(content);
 }