How Monte Carlo Tree Search turns single-pass reasoning into a branching exploration of ideas.

/* =========================================================

CSS CUSTOM PROPERTIES (scoped to container)

========================================================= */

mcts-explorable {

--bg: #1a1a2e;

--bg-dark: #0d0d1a;

--accent: #e94560;

--accent2: #4a9eff;

--text: #e0e0e0;

--text-dim: #888;

/* Base styles (were on body) */

background: var(--bg);

color: var(--text);

font-family: 'Courier New', Courier, monospace;

/* Break out of Hugo's article container to go full-width */

width: 100vw;

position: relative;

left: 50%;

right: 50%;

margin-left: -50vw;

margin-right: -50vw;

}

mcts-explorable *, #mcts-explorable *::before, #mcts-explorable *::after {

box-sizing: border-box;

}

/* =========================================================

HERO SECTION

========================================================= */

mcts-explorable #hero {

background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg) 100%);

text-align: center;

padding: 80px 24px 60px;

}

mcts-explorable #hero .subtitle {

font-size: 11px;

letter-spacing: 4px;

color: var(--accent);

text-transform: uppercase;

margin: 0 0 16px 0;

font-variant: small-caps;

}

mcts-explorable .scroll-indicator {

margin-top: 30px;

color: var(--text-dim);

font-size: 1.5rem;

animation: bounce 2s ease infinite;

}

@keyframes bounce {

0%, 100% { transform: translateY(0); }

50% { transform: translateY(8px); }

}

mcts-explorable #hero h1 {

font-size: 2.5rem;

color: #ffffff;

font-weight: bold;

margin: 0 0 20px 0;

line-height: 1.2;

}

mcts-explorable #hero .description {

color: var(--text-dim);

font-size: 1rem;

max-width: 600px;

margin: 0 auto;

line-height: 1.6;

}

/* =========================================================

TWO-PANEL SCROLLYTELLING LAYOUT

========================================================= */

mcts-explorable #scrollytelling {

display: flex;

align-items: flex-start;

}

/* Left: narrative column */

mcts-explorable #narrative {

width: 40%;

padding: 24px;

overflow-y: auto;

line-height: 1.7;

font-size: 0.95rem;

}

mcts-explorable #narrative p {

max-width: 45ch;

margin-bottom: 16px;

}

mcts-explorable #narrative h2 {

margin-top: 40px;

margin-bottom: 16px;

}

/* Right: sticky tree panel */

mcts-explorable #tree-panel {

width: 60%;

position: sticky;

top: 0;

height: 100vh;

background: var(--bg-dark);

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

}

mcts-explorable #tree-svg {

width: 100%;

height: 80%;

}

/* Node detail inspector */

mcts-explorable #node-detail {

width: 100%;

padding: 12px 20px;

font-family: 'Courier New', Courier, monospace;

font-size: 0.8rem;

color: var(--text-dim);

border-left: 3px solid var(--accent);

background: rgba(233, 69, 96, 0.05);

min-height: 60px;

margin: 0 20px;

max-width: calc(100% - 40px);

white-space: pre-wrap;

word-break: break-word;

}

/* =========================================================

NARRATIVE SECTIONS

========================================================= */

mcts-explorable #narrative section {

min-height: 80vh;

padding: 40px 0;

border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}

mcts-explorable #narrative section:last-child {

border-bottom: none;

}

mcts-explorable #narrative section h2 {

color: var(--accent);

letter-spacing: 1px;

text-transform: uppercase;

font-size: 0.9rem;

margin: 0 0 20px 0;

font-weight: bold;

}

mcts-explorable #narrative section p {

color: var(--text);

line-height: 1.7;

font-size: 0.9rem;

margin: 0 0 16px 0;

}

/* =========================================================

NODE & EDGE ANIMATIONS

========================================================= */

mcts-explorable .node-group {

transition: opacity 300ms ease, transform 300ms ease;

}

mcts-explorable .node-group.entering {

opacity: 0;

transform-origin: center;

}

@keyframes pulse {

0% { transform: scale(1); }

50% { transform: scale(1.15); }

100% { transform: scale(1); }

}

mcts-explorable .node-group.pulsing circle {

stroke: var(--accent);

transition: stroke 300ms ease;

}

mcts-explorable .edge {

transition: stroke 400ms ease, stroke-width 400ms ease;

}

mcts-explorable .edge.pulsing {

stroke: var(--accent) !important;

stroke-width: 3 !important;

}

@keyframes glow-pulse {

0%, 100% { opacity: 1; }

50% { opacity: 0.7; }

}

mcts-explorable .node-group.highlighted circle {

animation: glow-pulse 1.5s ease infinite;

}

/* =========================================================

NARRATIVE CONTENT STYLES

========================================================= */

mcts-explorable .puzzle-box {

border: 1px solid var(--accent);

padding: 16px 20px;

margin: 16px 0;

border-radius: 4px;

background: rgba(233, 69, 96, 0.05);

}

mcts-explorable .puzzle-box p { margin: 4px 0; }

mcts-explorable .puzzle-hint {

color: var(--text-dim);

font-size: 0.85rem;

font-style: italic;

margin-top: 8px !important;

}

mcts-explorable .llm-output {

background: var(--bg-dark);

border-left: 3px solid var(--accent);

padding: 16px;

margin: 16px 0;

font-size: 0.85rem;

line-height: 1.6;

white-space: pre-wrap;

}

mcts-explorable .flaw-annotation {

color: #ff6b6b;

font-size: 0.85rem;

font-style: italic;

}

mcts-explorable .transition-text {

color: var(--accent);

font-style: italic;

font-size: 1.1rem;

margin-top: 24px;

line-height: 1.6;

}

mcts-explorable .formula-box {

background: var(--bg-dark);

padding: 12px 20px;

margin: 16px 0;

border-radius: 4px;

font-size: 1.1rem;

text-align: center;

letter-spacing: 1px;

}

mcts-explorable .accent { color: var(--accent); }

mcts-explorable .accent2 { color: var(--accent2); }

mcts-explorable .branch-comparison {

margin: 16px 0;

}

mcts-explorable .branch-example {

background: var(--bg-dark);

padding: 10px 16px;

margin: 8px 0;

border-radius: 4px;

font-size: 0.9rem;

}

mcts-explorable .branch-label {

color: var(--accent);

font-weight: bold;

margin-right: 8px;

}

mcts-explorable .hint-text {

color: var(--text-dim);

font-size: 0.85rem;

font-style: italic;

}

mcts-explorable .score-high { color: #4ade80; font-weight: bold; }

mcts-explorable .score-low { color: #f87171; font-weight: bold; }

/* =========================================================

INTERACTIVE CONTROLS: UCB1, ROLLOUT, BACKPROP

========================================================= */

mcts-explorable .ucb1-slider { margin: 16px 0; }

mcts-explorable .ucb1-slider label { display: block; color: var(--text-dim); font-size: 0.8rem; margin-bottom: 6px; }

mcts-explorable .ucb1-slider input[type="range"] { width: 100%; accent-color: var(--accent); }

mcts-explorable .slider-labels { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--text-dim); margin-top: 4px; }

mcts-explorable .slider-labels .current-value { color: var(--accent); font-weight: bold; }

mcts-explorable .rollout-controls,

mcts-explorable .backprop-controls { margin: 16px 0; display: flex; align-items: center; gap: 12px; }

mcts-explorable .control-btn { background: var(--bg-dark); border: 1px solid var(--accent); color: var(--accent); padding: 6px 16px; cursor: pointer; font-family: inherit; font-size: 0.85rem; border-radius: 3px; }

mcts-explorable .control-btn:hover { background: rgba(233, 69, 96, 0.1); }

mcts-explorable .speed-buttons { display: flex; gap: 4px; }

mcts-explorable .speed-btn { background: var(--bg-dark); border: 1px solid #ffffff20; color: var(--text-dim); padding: 4px 10px; cursor: pointer; font-family: inherit; font-size: 0.8rem; border-radius: 3px; }

mcts-explorable .speed-btn.active { border-color: var(--accent); color: var(--accent); }

mcts-explorable .math-display {

background: var(--bg-dark);

padding: 12px 16px;

margin: 12px 0;

border-radius: 4px;

font-size: 0.85rem;

line-height: 1.6;

min-height: 40px;

border-left: 2px solid var(--accent2);

}

/* =========================================================

ASIDE / COLLAPSIBLE

========================================================= */

mcts-explorable .aside { margin: 20px 0; border: 1px solid #ffffff15; border-radius: 4px; }

mcts-explorable .aside summary { padding: 10px 16px; cursor: pointer; color: var(--accent2); font-size: 0.9rem; }

mcts-explorable .aside summary:hover { background: rgba(74, 158, 255, 0.05); }

mcts-explorable .aside-content { padding: 0 16px 16px; }

mcts-explorable .split-comparison { display: flex; gap: 16px; margin: 12px 0; }

mcts-explorable .comparison-panel { flex: 1; background: var(--bg-dark); padding: 12px; border-radius: 4px; text-align: center; }

mcts-explorable .comparison-panel h4 { margin: 0 0 8px; font-size: 0.8rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; }

/* =========================================================

SAMPLING CONTROLS

========================================================= */

mcts-explorable .sampling-controls,

mcts-explorable .voting-controls { margin: 12px 0; }

mcts-explorable .strategy-toggles,

mcts-explorable .voting-controls { display: flex; gap: 6px; flex-wrap: wrap; }

mcts-explorable .strategy-btn { background: var(--bg-dark); border: 1px solid #ffffff20; color: var(--text-dim); padding: 5px 12px; cursor: pointer; font-family: inherit; font-size: 0.8rem; border-radius: 3px; }

mcts-explorable .strategy-btn.active { border-color: var(--accent); color: var(--accent); }

mcts-explorable .strategy-btn:hover { background: rgba(233, 69, 96, 0.05); }

mcts-explorable #answer-histogram { margin: 16px 0; min-height: 80px; }

/* =========================================================

UCB1 TOOLTIP

========================================================= */

mcts-explorable #ucb1-tooltip {

position: fixed;

display: none;

background: var(--bg-dark);

border: 1px solid var(--accent);

padding: 8px 12px;

font-family: 'Courier New', Courier, monospace;

font-size: 11px;

color: var(--text);

line-height: 1.5;

z-index: 1000;

pointer-events: none;

white-space: pre;

border-radius: 4px;

box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);

}

/* =========================================================

RESPONSIVE BREAKPOINT — STACKED LAYOUT

========================================================= */

instance to run live MCTS searches.

Connect Ollama at localhost:11434 to try this.

Click a node to inspect it.

"use strict";(()=>{var f=" is a knight":"#4ade80","A is a knave":"#f87171"};e.textContent="";let r=document.createElementNS(a,"svg");r.setAttribute("width","100%"),r.setAttribute("height","80"),r.setAttribute("viewBox","0 0 300 80");let u=Math.min(120,280/l.length);return l.forEach((h,m)=>{let c=10+m*(u+10),o=t[h]/n*50,p=v[h]||"#888",A=document.createElementNS(a,"rect");A.setAttribute("x",String(c)),A.setAttribute("y",String(60-o)),A.setAttribute("width",String(u-5)),A.setAttribute("height",String(o)),A.setAttribute("fill",p),A.setAttribute("opacity","0.7"),A.setAttribute("rx","2"),r.appendChild(A);let k=document.createElementNS(a,"text");k.setAttribute("x",String(c+(u-5)/2)),k.setAttribute("y","74"),k.setAttribute("text-anchor","middle"),k.setAttribute("fill",p),k.setAttribute("font-size","9"),k.setAttribute("font-family","monospace"),k.textContent=h.replace("A is a ",""),r.appendChild(k);let g=document.createElementNS(a,"text");g.setAttribute("x",String(c+(u-5)/2)),g.setAttribute("y",String(56-o)),g.setAttribute("text-anchor","middle"),g.setAttribute("fill",p),g.setAttribute("font-size","10"),g.setAttribute("font-family","monospace"),g.textContent=String(t[h]),r.appendChild(g)}),e.appendChild(r),{counts:t,weightedScores:i}}function N(d,e,s){let t=document.getElementById("confidence-display");if(!t)return;let i,a,n=Object.values(d).reduce((r,u)=>r+u,0);if(s==="majority"){let r=Object.entries(d).sort((u,h)=>h[1]-u[1]);i=r[0]?.[0]??"unknown",a=r[0]?(r[0][1]/n*100).toFixed(0):"0"}else{let r=Object.entries(e).sort((h,m)=>m[1]-h[1]),u=Object.values(e).reduce((h,m)=>h+m,0);i=r[0]?.[0]??"unknown",a=r[0]?(r[0][1]/u*100).toFixed(0):"0"}t.textContent="";let l=document.createElement("strong");l.textContent="Answer: ";let v=document.createElement("span");v.style.color="var(--accent)",v.textContent=i,l.appendChild(v),t.appendChild(l),t.appendChild(document.createTextNode((${a}% confidence, ${s} vote)))}function I(d,e){let s=document.querySelectorAll(".strategy-btn[data-strategy]"),t=document.querySelectorAll(".strategy-btn[data-vote]"),i=document.getElementById("answer-histogram"),a=document.getElementById("strategy-description");if(s.length===0)return;let n="value",l="majority",v=null;function r(){let u=d.currentTree;if(!u)return;let h=V(u,n,5);if(d.clearHighlights(),h.length>0){let m=new Set;h.forEach(c=>Q(u,c.id).forEach(o=>m.add(o))),d.highlightPath([...m],"#e94560")}a&&(a.textContent=M[n]||""),i&&(v=P(u,i)),v&&N(v.counts,v.weightedScores,l)}s.forEach(u=>{u.addEventListener("click",()=>{s.forEach(h=>h.classList.remove("active")),u.classList.add("active"),n=u.dataset.strategy||"value",r()})}),t.forEach(u=>{u.addEventListener("click",()=>{t.forEach(h=>h.classList.remove("active")),u.classList.add("active"),l=u.dataset.vote||"majority",v&&N(v.counts,v.weightedScores,l)})})}function R(d,e){let s=" r=document.createElement("div");r.className="comparison-panel";let u=document.createElement("h4");u.textContent=n,r.appendChild(u);let h=document.createElementNS(s,"svg");h.setAttribute("id",l),h.setAttribute("width","100%"),h.setAttribute("height","120"),h.setAttribute("viewBox","0 0 200 120"),r.appendChild(h);let m=document.createElement("p");return m.style.fontSize="0.75rem",m.style.color="var(--text-dim)",m.style.marginTop="8px",m.textContent=v,r.appendChild(m),r};e.appendChild(t("Classical MCTS","classical-tree","Rollout nodes fade away")),e.appendChild(t("Tree-Building (this implementation)","treebuild-tree","Rollout nodes stay in the tree"));let i=document.getElementById("classical-tree"),a=document.getElementById("treebuild-tree");i&&R(i,!0),a&&R(a,!1)})}function W(){let d=document.getElementById("tree-svg");if(!d)return;let e=new B(d);new w(e,y).init(),L(e),C(e,y),T(e,y),I(e,y),x();let t=document.getElementById("single-pass-output");t&&y.puzzle.single_pass_wrong&&(t.textContent=y.puzzle.single_pass_wrong)}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",W):W();})();