// scope の描き分け。どの関数も kernel が返した値をそのまま形にする。
// 計算はここに置かない。
//
// 座標と色は common_apps/joinrank/svg/draw.py と同じものを使う。
// 同じ図を同じ読み方で見せるため、別の流儀を持ち込まない。

const NS = 'http://www.w3.org/2000/svg';

function el(tag, attrs, text) {
  const n = document.createElementNS(NS, tag);
  for (const k in attrs) n.setAttribute(k, attrs[k]);
  if (text !== undefined) n.textContent = text;
  return n;
}

function svgBox(x, y, w, h) {
  const s = el('svg', { viewBox: `${x} ${y} ${w} ${h}`, width: w, height: h });
  s.style.maxWidth = '100%';
  return s;
}

function svg(w, h) { return svgBox(0, 0, w, h); }

function box(title, formula, node) {
  const d = document.createElement('div');
  d.className = 'scopebox';
  if (title) {
    const h = document.createElement('h2');
    h.textContent = title;
    d.appendChild(h);
  }
  if (formula) {
    const f = document.createElement('div');
    f.className = 'formula';
    f.textContent = formula;
    d.appendChild(f);
  }
  if (node) d.appendChild(node);
  return d;
}

function nothing(msg) {
  const p = document.createElement('p');
  p.className = 'empty';
  p.textContent = msg;
  return p;
}

function dyadText(num, d) {
  if (!d) return String(num);
  let n = num, k = d;
  while (k > 0 && n % 2 === 0) { n /= 2; k--; }
  return k === 0 ? String(n) : `${n}/${2 ** k}`;
}

// ===== 層と机（16 §2、19 §4.2）=====
//
// 層 r が行、机の位置 q が列。疎テンソル S(k,q,r) をそのまま平面へ置く。
// 箱は入口の区間 take を取り、出口の区間 give へ置く。ki は素通しの線になる。

function drawChamber(sc) {
  const rows = sc.frontier || [];
  if (!rows.length) return nothing('層がありません。');

  const COL = 46, ROW = 58, PAD = 40, TOP = 26;
  const wide = Math.max(1, ...rows.map(r => Math.max(r.in.length, r.out.length)));
  const W = PAD + wide * COL + 26, H = TOP + rows.length * ROW + 34;
  const s = svg(W, H);
  const x = q => PAD + q * COL + COL / 2;

  s.appendChild(el('text', { x: 4, y: TOP - 10, 'font-size': 9.5 }, 'q'));
  for (let q = 0; q < wide; q++) {
    s.appendChild(el('text', { x: x(q), y: TOP - 10, 'text-anchor': 'middle', 'font-size': 9.5 }, String(q)));
  }

  rows.forEach((row, i) => {
    const y0 = TOP + i * ROW, y1 = y0 + ROW;
    s.appendChild(el('line', { x1: PAD - 10, y1: y0, x2: W - 14, y2: y0, class: 'grid' }));
    s.appendChild(el('text', { x: 4, y: y0 + 16, class: 'lab', 'font-size': 10 }, 'Λ' + row.r));

    (row.put || []).forEach(p => {
      if (p.wire) {
        s.appendChild(el('path', {
          d: `M ${x(p.take[0])} ${y0} C ${x(p.take[0])} ${y0 + 22}, ${x(p.give[0])} ${y1 - 22}, ${x(p.give[0])} ${y1}`,
          class: 'wire'
        }));
        return;
      }
      const hasIn = p.take[1] > p.take[0], hasOut = p.give[1] > p.give[0];
      const xs = [];
      if (hasIn) { xs.push(x(p.take[0]), x(p.take[1] - 1)); }
      if (hasOut) { xs.push(x(p.give[0]), x(p.give[1] - 1)); }
      const bx = Math.min(...xs) - 16, bw = Math.max(...xs) - Math.min(...xs) + 32;
      const by = y0 + 21, bh = 19;
      const col = `var(--${p.cls || 'frame'})`;
      for (let q = p.take[0]; q < p.take[1]; q++) {
        s.appendChild(el('line', { x1: x(q), y1: y0, x2: x(q), y2: by, class: 'wire' }));
      }
      for (let q = p.give[0]; q < p.give[1]; q++) {
        s.appendChild(el('line', { x1: x(q), y1: by + bh, x2: x(q), y2: y1, class: 'wire' }));
      }
      const r = el('rect', { x: bx, y: by, width: bw, height: bh, class: 'box' });
      r.setAttribute('stroke', col);
      s.appendChild(r);
      const t = el('text', { x: bx + bw / 2, y: by + 13.5, 'text-anchor': 'middle', 'font-size': 11 }, p.syl);
      t.setAttribute('fill', col);
      s.appendChild(t);
    });
  });

  const last = rows[rows.length - 1];
  s.appendChild(el('text', { x: 4, y: H - 12, class: 'lab', 'font-size': 10 }, 'Γ⁺'));
  last.out.forEach((w, q) =>
    s.appendChild(el('text', { x: x(q), y: H - 12, 'text-anchor': 'middle', 'font-size': 10 }, w)));
  return s;
}

// ===== 箱の DAG（19 §4.2、§4.3）=====

const KINDCLS = {
  Cst: 'dyad', Add: 'dyad', Mul: 'dyad', Neg: 'dyad',
  Load: 'store', Store: 'store', Ok: 'report', EqBr: 'bit', LtBr: 'bit'
};

function drawDag(sc) {
  const bs = sc.boxes || [];
  if (!bs.length) return nothing('箱がありません。');
  if (bs.length > 260) {
    const p = document.createElement('div');
    p.appendChild(nothing(`箱が ${bs.length} 個。名前を省き、種類の色だけで並べます。`));
    p.appendChild(drawSwarm(bs));
    p.appendChild(kindTable(bs));
    return p;
  }

  const h = bs.map(() => 0);
  bs.forEach(b => b.in.forEach(u => { if (u < b.i) h[b.i] = Math.max(h[b.i], h[u] + 1); }));
  const rows = [];
  bs.forEach(b => { (rows[h[b.i]] = rows[h[b.i]] || []).push(b); });

  const CW = 76, RH = 48, PAD = 10;
  const wide = Math.max(...rows.map(r => r.length));
  const W = PAD * 2 + wide * CW, H = PAD * 2 + rows.length * RH;
  const s = svg(W, H);
  const at = {};
  rows.forEach((row, r) => row.forEach((b, k) => {
    at[b.i] = { x: PAD + k * CW + CW / 2, y: PAD + r * RH + 13 };
  }));

  bs.forEach(b => b.in.forEach(u => {
    if (!at[u]) return;
    s.appendChild(el('path', {
      d: `M ${at[u].x} ${at[u].y + 10} C ${at[u].x} ${at[u].y + 28}, ${at[b.i].x} ${at[b.i].y - 20}, ${at[b.i].x} ${at[b.i].y - 10}`,
      class: 'edge'
    }));
  }));
  bs.forEach(b => {
    if (b.to === undefined || !at[b.to]) return;
    const p = el('path', {
      d: `M ${at[b.i].x + 23} ${at[b.i].y} L ${at[b.i].x + 34} ${at[b.i].y} L ${at[b.to].x + 34} ${at[b.to].y} L ${at[b.to].x + 23} ${at[b.to].y}`,
      class: 'edge'
    });
    p.setAttribute('stroke', 'var(--bit)');
    p.setAttribute('stroke-dasharray', '3 2');
    s.appendChild(p);
  });
  bs.forEach(b => {
    const g = at[b.i], col = `var(--${KINDCLS[b.kind] || 'frame'})`;
    const r = el('rect', { x: g.x - 22, y: g.y - 10, width: 44, height: 20, class: 'box' });
    r.setAttribute('stroke', col);
    s.appendChild(r);
    const t = el('text', { x: g.x, y: g.y + 3.5, 'text-anchor': 'middle', 'font-size': 10.5 },
      b.kind === 'Cst' ? String(b.num) : b.kind);
    t.setAttribute('fill', col);
    s.appendChild(t);
    s.appendChild(el('text', { x: g.x, y: g.y + 17, 'text-anchor': 'middle', 'font-size': 9 },
      b.v === undefined ? `#${b.i}` : `#${b.i}  ${dyadText(b.v, b.d)}`));
  });
  return s;
}

// 大きい DAG は名前を省き、種類の色の点だけで並べる。
function drawSwarm(bs) {
  const S = 6, GAP = 1.5, PER = 48;
  const rows = Math.ceil(bs.length / PER);
  const s = svg(PER * (S + GAP) + 4, rows * (S + GAP) + 4);
  bs.forEach((b, k) => {
    const r = el('rect', {
      x: 2 + (k % PER) * (S + GAP), y: 2 + Math.floor(k / PER) * (S + GAP),
      width: S, height: S
    });
    r.setAttribute('fill', `var(--${KINDCLS[b.kind] || 'frame'})`);
    r.setAttribute('opacity', '0.8');
    s.appendChild(r);
  });
  return s;
}

function kindTable(bs) {
  const c = {};
  bs.forEach(b => { c[b.kind] = (c[b.kind] || 0) + 1; });
  const t = document.createElement('table');
  t.innerHTML = '<tr><th class="l">種類</th><th>数</th></tr>' +
    Object.keys(c).sort().map(k =>
      `<tr><td class="l" style="color:var(--${KINDCLS[k] || 'frame'})">${k}</td><td>${c[k]}</td></tr>`).join('');
  return t;
}

// ===== ツイ数平面（幾何連合論理集合 Level 3〜5、6b、6d）=====
//
// 平面は O, ±1, i, j が張る有界な正方形になる。絶対値は 1 を越えない。
//
//   実軸  ω⁻ = (−1,0)  ―  O = (0,0)  ―  ω = (1,0)
//   ω 軸  j  = (0,−1)  ―  O          ―  i = (0,1)
//   角    ij = (1,1)   −ij = (−1,1)   ji = (1,−1)   −ji = (−1,−1)
//
// 整数は等間隔に並ばない。整数 1 を得た後、残余 (O, ω) に同じ構成を再帰的に
// 当てるので、各段が残余の半分を取る（Level 3 の 1/2 漸減性）。
//
//   t_n = 1 − 2^(−n)        t_1 = 1/2, t_2 = 3/4, t_3 = 7/8, … → ω
//
// この位置づけを Z[1/2] の全部へ伸ばすと、符号について奇な単調写像になる。
//
//   π(v) = sgn(v) · (1 − 2^(−|v|))        π(n) = t_n、π(±∞) = ω, ω⁻
//
// ω の非対称性（H⁺ 側は稠密、H⁻ 側は空）が i を生み、ij 対角線反転が
// i ↔ ω を対にする（6b）。だから実軸の点を ij 対角線で折り返すと ω 軸の
// 漸減列になり、i に収束する。縦に伸びるのはこの折り返しであって、深さではない。

function tsuiPos(v) {
  if (v === 0) return 0;
  const s = v < 0 ? -1 : 1;
  return s * (1 - Math.pow(2, -Math.abs(v)));
}

function drawTsui(sc) {
  const all = (sc.boxes || []).filter(b => b.v !== undefined && b.kind !== 'Ok'
                                           && Number.isFinite(b.v / 2 ** b.d));
  if (!all.length) return nothing('値を持つ箱がありません。');

  const outs = new Set((sc.gamma || []).map(g => g.box));
  const seen = new Map();
  for (const b of all) {
    const key = b.d + ':' + b.v;
    const cur = seen.get(key);
    if (!cur) seen.set(key, { v: b.v, d: b.d, x: b.v / 2 ** b.d, out: outs.has(b.i) });
    else cur.out = cur.out || outs.has(b.i);
  }
  const pts = [...seen.values()];
  const dmax = Math.max(...pts.map(p => p.d));

  const R = 168, PAD = 46;
  const s = svgBox(-R - PAD, -R - PAD - 12, 2 * (R + PAD), 2 * (R + PAD) + 24);
  const P = (u, v) => [R * u, -R * v];

  const line = (a, b, col, w, op, dash) => {
    const e = el('line', { x1: a[0], y1: a[1], x2: b[0], y2: b[1] });
    e.setAttribute('stroke', col);
    e.setAttribute('stroke-width', w || 1);
    if (op !== undefined) e.setAttribute('opacity', op);
    if (dash) e.setAttribute('stroke-dasharray', dash);
    s.appendChild(e);
  };
  const dot = (p, r, fill, stroke) => {
    const e = el('circle', { cx: p[0], cy: p[1], r: r });
    e.setAttribute('fill', fill || 'none');
    if (stroke) { e.setAttribute('stroke', stroke); e.setAttribute('stroke-width', 1.2); }
    s.appendChild(e);
  };
  const text = (p, str, col, size, anchor) => {
    const t = el('text', { x: p[0], y: p[1], 'font-size': size || 9.5,
                           'text-anchor': anchor || 'middle' }, str);
    t.setAttribute('fill', col);
    s.appendChild(t);
  };

  // ---- 正方形 (ij, −ij, −ji, ji) ----
  const ij = P(1, 1), mij = P(-1, 1), ji = P(1, -1), mji = P(-1, -1);
  const sq = el('path', { d: `M ${ij[0]} ${ij[1]} L ${mij[0]} ${mij[1]} L ${mji[0]} ${mji[1]} L ${ji[0]} ${ji[1]} Z` });
  sq.setAttribute('fill', 'none');
  sq.setAttribute('stroke', 'var(--ring)');
  sq.setAttribute('stroke-width', 1);
  s.appendChild(sq);

  // ---- 二本の対角線 ----
  line(mji, ij, 'var(--ring)', 1, 0.8, '4 4');
  line(mij, ji, 'var(--ring)', 1, 0.8, '4 4');
  text([ij[0] + 4, ij[1] - 6], 'ij', 'var(--label)', 10, 'start');
  text([mij[0] - 4, mij[1] - 6], '−ij', 'var(--label)', 10, 'end');
  text([ji[0] + 4, ji[1] + 13], 'ji', 'var(--label)', 10, 'start');
  text([mji[0] - 4, mji[1] + 13], '−ji', 'var(--label)', 10, 'end');

  // ---- 実軸と ω 軸 ----
  line(P(-1, 0), P(1, 0), 'var(--axis)', 1.2, 0.9);
  line(P(0, -1), P(0, 1), 'var(--axis)', 1.2, 0.9);
  dot(P(1, 0), 3.6, 'var(--acc)');
  dot(P(-1, 0), 3.6, 'var(--acc)');
  dot(P(0, 1), 3.6, 'var(--label)');
  dot(P(0, -1), 3.6, 'var(--label)');
  dot(P(0, 0), 2.6, 'var(--ink)');
  text([R + 8, 4], 'ω', 'var(--acc)', 11, 'start');
  text([-R - 8, 4], 'ω⁻', 'var(--acc)', 11, 'end');
  text([6, -R - 6], 'i', 'var(--label)', 11, 'start');
  text([6, R + 14], 'j', 'var(--label)', 11, 'start');
  text([-9, 13], 'O', 'var(--ink)', 10, 'end');

  // ---- Level 3 の整数。t_n = 1 − 2^(−n) で ω へ漸近する ----
  for (let n = 1; n <= 9; n++) {
    const t = 1 - Math.pow(2, -n);
    for (const sg of [1, -1]) {
      const p = P(sg * t, 0);
      line([p[0], p[1] - 5], [p[0], p[1] + 5], 'var(--acc)', 1, 0.8);
      if (n <= 4) text([p[0], p[1] + 16], String(sg * n), 'var(--acc)', 9);
    }
  }
  text([0, R + 32], '整数 n は t_n = 1 − 2^(−n)。等間隔ではなく ω へ漸近する',
       'var(--axis)', 9);

  // ---- ij 対角線反転。実軸の列を ω 軸へ写し、i へ収束させる（6b）----
  for (let n = 1; n <= 6; n++) {
    const t = 1 - Math.pow(2, -n);
    line(P(t, 0), P(0, t), 'var(--ring)', 0.7, 0.45);
    dot(P(0, t), 2.4, 'none', 'var(--label)');
  }

  // ---- 平文が作った値 ----
  const used = [];
  pts.sort((a, b) => a.x - b.x).forEach(p => {
    const u = tsuiPos(p.x);
    const q = P(u, 0);
    const col = p.out ? 'var(--warn)' : 'var(--mark)';
    line(P(u, 0), P(0, Math.abs(u)), 'var(--ring)', 0.7, 0.35);
    dot(P(0, Math.abs(u)), 2.2, 'none', col);
    dot(q, p.out ? 5 : 3.4, col);
    const label = dyadText(p.v, p.d) + (p.d ? '  δ' + p.d : '');
    const w = label.length * 5.2 + 6;
    let row = 0;
    while (used.some(r => r.row === row && Math.abs(r.x - q[0]) < (r.w + w) / 2)) row++;
    used.push({ row: row, x: q[0], w: w });
    const t = el('text', { x: q[0], y: q[1] - 12 - row * 12, 'text-anchor': 'middle',
                           'font-size': 9.5 }, label);
    t.setAttribute('fill', col);
    if (p.out) t.setAttribute('font-weight', '700');
    s.appendChild(t);
    line([q[0], q[1] - 7], [q[0], q[1] - 9 - row * 12], col, 0.7, 0.5);
  });

  const d = document.createElement('div');
  d.appendChild(s);
  const f = document.createElement('div');
  f.className = 'formula';
  f.textContent =
    '平面は O, ±1, i, j が張る有界な正方形。実軸も ω 軸も絶対値は 1 を越えない。\n' +
    '整数 1 の後、残余 (O, ω) へ同じ構成を再帰的に当てるので各段が残余の半分を取る。\n\n' +
    '    t_n = 1 − 2^(−n)          ω は整数列の収束先の境界点（Level 3）\n' +
    '    π(v) = sgn(v)(1 − 2^(−|v|))     π(n) = t_n、π(±∞) = ω, ω⁻\n\n' +
    '橙の目盛りが整数、青が平文の作った値、赤が出口境界 Γ⁺。\n' +
    'ω 軸へ渡る細線は ij 対角線反転（6b）。実軸の漸減列はこの折り返しで i へ収束する。' +
    (dmax === 0 ? '\nこの文は δ = 0。値は整数だけになる。'
                : '\n最も深い作図は δ = ' + dmax + '。値は x/2^δ で厳密に閉じる。');
  d.appendChild(f);
  return d;
}

// ===== lane64 の image（20 §7）=====

function drawLane(sc) {
  const im = sc.image;
  if (!im) return nothing('image がありません。');
  const d = document.createElement('div');

  const t = document.createElement('table');
  t.innerHTML = '<tr><th class="l">項目</th><th>値</th></tr>' +
    `<tr><td class="l">image</td><td>${im.bytes} byte</td></tr>` +
    `<tr><td class="l">命令</td><td>${im.insns}</td></tr>` +
    `<tr><td class="l">block</td><td>${im.blocks.length}</td></tr>` +
    Object.keys(im.kinds).sort().map(k => `<tr><td class="l">${k}</td><td>${im.kinds[k]}</td></tr>`).join('');
  d.appendChild(t);

  const bl = im.blocks, RH = 16, PAD = 6, LAB = 96, BARW = 250;
  const maxw = Math.max(1, ...bl.map(b => Math.max(1, ...(b.layers.length ? b.layers : [1]))));
  const s = svg(LAB + BARW + 10, PAD * 2 + bl.length * RH);
  bl.forEach((b, i) => {
    const y = PAD + i * RH;
    s.appendChild(el('text', { x: 2, y: y + 10, 'font-size': 9.5 }, 'pc ' + b.pc));
    const term = el('text', { x: 54, y: y + 10, 'font-size': 9.5 }, b.term);
    term.setAttribute('fill', 'var(--acc)');
    s.appendChild(term);
    let x = LAB;
    for (const w of b.layers) {
      const px = Math.max(3, (w / maxw) * 44);
      if (x + px > LAB + BARW) break;
      const r = el('rect', { x: x, y: y + 3, width: px, height: 9 });
      r.setAttribute('fill', 'var(--mark)');
      r.setAttribute('opacity', '0.6');
      s.appendChild(r);
      x += px + 2;
    }
  });
  const wrap = document.createElement('div');
  wrap.style.marginTop = '8px';
  wrap.appendChild(s);
  d.appendChild(box(null, '横棒 1 本が block の中の 1 層。並んだ棒は順序を入れ替えてよい箱の束。', wrap));
  return d;
}

// ===== 接合秩（Common-Lang/2 定義 4.1、Common-Lang/1 定理 4.1）=====
//
// 座標は common_apps/joinrank/svg/draw.py と同じ。
//
//   r(T)     = 1 − 2^(−|T|)                      次数が環の番号になる
//   θ(T)     = π Σ_{k∈T} 2^(−(k+1))              二進符号が偏角になる   上半平面 Π_i
//   y の点   r = 1/2, θ = −π/2                                          下半平面 Π_j
//   カット   θ_κ = π 2^(−κ) の直径が [n] = A ⊔ B を扇へ分ける
//
// 辺は二種類（Common-Lang/2 §3）。
//
//   E_star = {(T \ max T, T)}      経路を保持する。Π_i の中の弦。直線
//   E_plus = {(T, y) : a_T = 1}    経路を忘れる。実軸を一度だけ渡る弧
//
// 分離積は p_r と q_r の台へ細線を引き、二つの集約点の間に太い弦を一本渡す。
// カットを渡る太弦はちょうど ρ 本になる。

const TAU = Math.PI;

function popcount(t) { let c = 0; while (t) { c += t & 1; t >>= 1; } return c; }
function radiusOf(t) { return 1 - 2 ** (-popcount(t)); }
function angleOf(t, n) {
  let a = 0;
  for (let k = 0; k < n; k++) if ((t >> k) & 1) a += 2 ** (-(k + 1));
  return TAU * a;
}
function polar(r, th, R) { return [R * r * Math.cos(th), -R * r * Math.sin(th)]; }
function topBit(t, n) { let m = 0; for (let k = 0; k < n; k++) if ((t >> k) & 1) m = k; return m; }

function chainClosure(support, n) {
  const seen = new Set([0]);
  for (let t of support) {
    while (t && !seen.has(t)) { seen.add(t); t &= ~(1 << topBit(t, n)); }
  }
  return [...seen].sort((a, b) => a - b);
}

function monoLabel(t, n) {
  if (!t) return '1';
  let s = '';
  for (let k = 0; k < n; k++) if ((t >> k) & 1) s += 'x' + k;
  return s;
}

// 中点を水平へ寄せた制御点。B_y が t の一次式に落ちるので実軸との交点が一意に決まる。
function midCtrl(p0, p1, h) { return [(p0[0] + p1[0]) / 2 + h, (p0[1] + p1[1]) / 2]; }

function bez(p0, c, p1, t) {
  const u = 1 - t;
  return [u * u * p0[0] + 2 * t * u * c[0] + t * t * p1[0],
          u * u * p0[1] + 2 * t * u * c[1] + t * t * p1[1]];
}

// f は線形。f(B(t)) = a t² + b t + c の [0,1] の根の像を返す。
function crossAt(p0, c, p1, f) {
  const eps = 1e-9, f0 = f(p0), fc = f(c), f1 = f(p1);
  const a = f0 - 2 * fc + f1, b = 2 * (fc - f0), c0 = f0;
  let ts = [];
  if (Math.abs(a) < eps) { if (Math.abs(b) > eps) ts = [-c0 / b]; }
  else {
    const d = b * b - 4 * a * c0;
    if (d >= 0) { const s = Math.sqrt(d); ts = [(-b - s) / (2 * a), (-b + s) / (2 * a)]; }
  }
  ts = ts.filter(t => t >= -eps && t <= 1 + eps);
  return ts.length ? bez(p0, c, p1, Math.min(Math.max(ts[0], 0), 1)) : null;
}

function fAxis(p) { return p[1]; }
function fCut(th) {
  const dx = Math.cos(th), dy = -Math.sin(th);
  return p => p[0] * dy - p[1] * dx;
}

function meanAngle(sup, n, lo, hi) {
  if (!sup || !sup.length) return (lo + hi) / 2;
  const a = sup.reduce((s, t) => s + angleOf(t, n), 0) / sup.length;
  return Math.min(Math.max(a, lo + 0.08 * (hi - lo)), lo + 0.92 * (hi - lo));
}

function drawJoint(j) {
  if (!j) return nothing('このセルは入力の語を指定していません。notebook の cell に inputs と cut を書くと出ます。');
  if (!j.ok) return nothing(j.error || '接合秩を取れません。');

  const n = j.n, cut = j.cut, rho = j.rho, R = 150, PAD = 58;
  const support = j.anf || [];
  const nodes = chainClosure(support, n);
  const thc = TAU * 2 ** (-cut);
  const s = svgBox(-R - PAD, -R - PAD, 2 * (R + PAD), 2 * (R + PAD));

  const put = (tag, at, fill, stroke, w, op) => {
    const e = el(tag, at);
    if (fill) e.setAttribute('fill', fill); else e.setAttribute('fill', 'none');
    if (stroke) { e.setAttribute('stroke', stroke); e.setAttribute('stroke-width', w || 1); }
    if (op !== undefined) e.setAttribute('opacity', op);
    s.appendChild(e);
    return e;
  };
  const line = (p, q, col, w, op, dash) => {
    const e = put('line', { x1: p[0], y1: p[1], x2: q[0], y2: q[1] }, null, col, w, op);
    e.setAttribute('stroke-linecap', 'round');
    if (dash) e.setAttribute('stroke-dasharray', dash);
  };
  const text = (p, str, col, size, anchor, op) => {
    const t = el('text', { x: p[0], y: p[1], 'font-size': size || 9.5,
                           'text-anchor': anchor || 'middle' }, str);
    t.setAttribute('fill', col);
    if (op !== undefined) t.setAttribute('opacity', op);
    s.appendChild(t);
  };
  const wedge = (a0, a1, col) => {
    const p0 = polar(1, a0, R), p1 = polar(1, a1, R);
    const big = Math.abs(a1 - a0) > TAU ? 1 : 0;
    put('path', { d: `M 0 0 L ${p0[0]} ${p0[1]} A ${R} ${R} 0 ${big} 0 ${p1[0]} ${p1[1]} Z` },
      col, null, 0, 0.06);
  };

  // カットが分ける扇
  wedge(thc, TAU, 'var(--mark)');
  wedge(0, thc, 'var(--sub)');

  // 環。r = 1 − 2^(−|T|)
  for (let k = 0; k <= n; k++) {
    put('circle', { cx: 0, cy: 0, r: R * (1 - 2 ** (-k)) }, null, 'var(--ring)', 0.7, 0.55);
  }
  const om = put('circle', { cx: 0, cy: 0, r: R }, null, 'var(--ring)', 1.1, 0.9);
  om.setAttribute('stroke-dasharray', '5 4');
  text([R + 9, -3], 'ω', 'var(--ring)', 10, 'start');

  // 実軸。Π_i と Π_j の共通境界
  line([-R - 22, 0], [R + 22, 0], 'var(--axis)', 1, 0.85);
  text([-R - 26, -7], 'Π_i', 'var(--axis)', 9.5, 'start');
  text([-R - 26, 15], 'Π_j', 'var(--axis)', 9.5, 'start');

  // カットの直径
  const cp = polar(1.1, thc, R), cq = polar(1.1, thc + TAU, R);
  line(cp, cq, 'var(--acc)', 1.3, 0.95, '7 5');
  text([cp[0], cp[1] - 9], 'κ = ' + cut, 'var(--acc)', 10);
  text(polar(1.2, (thc + TAU) / 2, R), 'A', 'var(--mark)', 11);
  text(polar(1.2, thc / 2, R), 'B', 'var(--sub)', 11);

  const fac = new Set([].concat(...(j.psup || []), ...(j.qsup || [])));
  const raw = fac.size ? 0.26 : 1.0;

  // E_star。Π_i の中の弦
  for (const t of nodes) {
    if (!t) continue;
    const a = t & ~(1 << topBit(t, n));
    line(polar(radiusOf(a), angleOf(a, n), R), polar(radiusOf(t), angleOf(t, n), R),
      'var(--mark)', 1.3, raw);
  }

  // E_plus。実軸を一度だけ渡る弧と、その交点の丸
  const yout = polar(0.5, -TAU / 2, R);
  put('circle', { cx: yout[0], cy: yout[1], r: 6 }, 'var(--label)', null, 0, raw);
  text([yout[0], yout[1] + 20], 'y', 'var(--label)', 10, 'middle', raw);
  for (const t of support) {
    const pa = polar(radiusOf(t), angleOf(t, n), R);
    const ctl = midCtrl(pa, yout, pa[0] >= 0 ? 24 : -24);
    const e = put('path', { d: `M ${pa[0]} ${pa[1]} Q ${ctl[0]} ${ctl[1]} ${yout[0]} ${yout[1]}` },
      null, 'var(--sub)', 1.5, raw);
    e.setAttribute('stroke-linecap', 'round');
    const x = crossAt(pa, ctl, yout, fAxis);
    if (x) put('circle', { cx: x[0], cy: x[1], r: 2.8 }, 'var(--sub)', null, 0, raw);
  }

  // 単項式の点
  for (const t of nodes) {
    const p = polar(radiusOf(t), angleOf(t, n), R);
    const on = support.includes(t);
    const op = fac.has(t) ? 1 : raw;
    put('circle', { cx: p[0], cy: p[1], r: on ? 4.6 : 2.8 },
      on ? 'var(--ink)' : 'var(--bg)', 'var(--ink)', 1.1, op);
    const right = angleOf(t, n) < TAU / 2;
    text([p[0] + (right ? 10 : -10), p[1] - 8], monoLabel(t, n), 'var(--label)', 9,
      right ? 'start' : 'end', op);
  }

  // 分離積。カットを渡る太弦はちょうど ρ 本
  let ncross = 0;
  const fc = fCut(thc);
  for (let r = 0; r < rho; r++) {
    const rr = 0.40 + 0.22 * (r + 1) / (rho + 1);
    const ap = meanAngle((j.psup || [])[r], n, thc, TAU);
    const aq = meanAngle((j.qsup || [])[r], n, 0, thc);
    const pp = polar(rr, ap, R), pq = polar(rr, aq, R);
    for (const t of ((j.psup || [])[r] || [])) line(polar(radiusOf(t), angleOf(t, n), R), pp, 'var(--warn)', 0.8, 0.55);
    for (const t of ((j.qsup || [])[r] || [])) line(polar(radiusOf(t), angleOf(t, n), R), pq, 'var(--warn)', 0.8, 0.55);
    line(pq, pp, 'var(--warn)', 2.3, 1);
    const x = crossAt(pq, midCtrl(pq, pp, 0), pp, fc);
    if (x) { ncross++; put('circle', { cx: x[0], cy: x[1], r: 3.6 }, 'var(--acc)', 'var(--warn)', 1.2); }
    put('circle', { cx: pp[0], cy: pp[1], r: 5 }, 'var(--warn)');
    put('circle', { cx: pq[0], cy: pq[1], r: 5 }, 'var(--warn)');
    text([pp[0], pp[1] - 10], 'p' + r, 'var(--warn)', 9);
    text([pq[0], pq[1] - 10], 'q' + r, 'var(--warn)', 9);
  }

  const d = document.createElement('div');
  d.appendChild(s);
  const f = document.createElement('div');
  f.className = 'formula';
  f.textContent =
    `n = ${n}   A = {${j.inputs.slice(0, cut).join(', ')}}   B = {${j.inputs.slice(cut).join(', ')}}\n` +
    `ρ = rank_𝔽₂ F = ${rho}        カットを渡る太弦 ${ncross} 本\n` +
    `台 ${support.length} 点        環 ${n + 1} 本`;
  d.appendChild(f);
  d.appendChild(jointLegend());
  d.appendChild(jointTable(j));
  return d;
}

function jointLegend() {
  const rows = [
    ['ring', '環  r = 1 − 2^(−|T|)', '相互作用の次数 |T|'],
    ['mark', '青い弦  E_star', '経路の保持。角度差 π2^(−k) が x_k'],
    ['sub', '緑の弧  E_plus', '実軸を渡る合算。丸が経路を忘れる一点'],
    ['acc', '橙の直径', 'カット θ_κ = π 2^(−κ)'],
    ['warn', '赤の太弦', 'カットを渡る独立影響。本数が接合秩'],
  ];
  const t = document.createElement('table');
  t.innerHTML = rows.map(([c, a, b]) =>
    `<tr><td class="l" style="color:var(--${c})">${a}</td><td class="l">${b}</td></tr>`).join('');
  return t;
}

function jointTable(j) {
  const na = 1 << j.cut, nb = 1 << (j.n - j.cut);
  const t = document.createElement('table');
  let html = '<tr><th class="l">F</th>';
  for (let b = 0; b < nb; b++) html += `<th>β${b}</th>`;
  html += '</tr>';
  for (let a = 0; a < na; a++) {
    html += `<tr><th class="l">α${a}</th>`;
    for (let b = 0; b < nb; b++) html += `<td>${j.table[a + na * b]}</td>`;
    html += '</tr>';
  }
  t.innerHTML = html;
  const d = document.createElement('div');
  d.appendChild(t);
  const f = document.createElement('div');
  f.className = 'formula';
  f.textContent = 'f(x_A, x_B) = ⊕_{r<ρ} p_r(x_A) q_r(x_B)\n' +
    j.p.map((pr, r) => `  r=${r}   p = [${pr.join('')}]   q = [${j.q[r].join('')}]`).join('\n');
  d.appendChild(f);
  return d;
}

// ===== 音節と箱の表 =====

function drawText(sc) {
  const d = document.createElement('div');
  const w = document.createElement('table');
  w.innerHTML = '<tr><th>r</th><th>q</th><th class="l">音節</th><th class="l">生成元</th><th>pin</th><th>pout</th><th>箱</th></tr>' +
    sc.words.map(x => `<tr><td>${x.r}</td><td>${x.q}</td>` +
      `<td class="l" style="color:var(--${x.cls})">${x.syl}</td>` +
      `<td class="l">${x.sym}</td><td>${x.pin}</td><td>${x.pout}</td>` +
      `<td>${x.boxes === null ? '—' : x.boxes}</td></tr>`).join('');
  d.appendChild(box('音節 → 生成元', 'idx(cv) = 5 ord(c) + ord(v)      C = (k s t n h m y r w g z d b p),  V = (a i u e o)', w));

  const b = document.createElement('table');
  b.innerHTML = '<tr><th>#</th><th class="l">種類</th><th class="l">引数</th><th>δ</th><th>語 64+w</th><th class="l">x/2^δ</th></tr>' +
    sc.boxes.slice(0, 400).map(x =>
      `<tr><td>${x.i}</td>` +
      `<td class="l" style="color:var(--${KINDCLS[x.kind] || 'frame'})">${x.kind}${x.kind === 'Cst' ? ' ' + x.num : ''}</td>` +
      `<td class="l">${x.in.join(', ')}${x.to !== undefined ? ' → ' + x.to : ''}</td>` +
      `<td>${x.d}</td><td>${x.v === undefined ? '' : x.v}</td>` +
      `<td class="l">${x.v === undefined ? '' : dyadText(x.v, x.d)}</td></tr>`).join('');
  d.appendChild(box('箱', 'commonc の OPK / OPA / OPB / OPD / OPL をそのまま（19 §3.2）', b));
  return d;
}