From aa71ff9126e0ca697eb0b50173dce51d6a49825a Mon Sep 17 00:00:00 2001
From: Alexander Brandon Coles <a.coles@openproject.com>
Date: Tue, 25 Aug 2026 19:20:54 -0800
Subject: [PATCH 01/12] add skipUnchanged option to prune equal subtrees

Off by default. When enabled, morphNode returns early for a pair
of nodes that are isEqualNode-equal, after announcing the root via
beforeNodeMorphed/afterNodeMorphed. Hidden-state handling follows
in the next commits. Refs #144.
---
 src/idiomorph.js       |  48 +++++++++++++++++
 test/index.html        |   1 +
 test/skip-unchanged.js | 115 +++++++++++++++++++++++++++++++++++++++++
 3 files changed, 164 insertions(+)
 create mode 100644 test/skip-unchanged.js

diff --git a/src/idiomorph.js b/src/idiomorph.js
index 835ae9a..5eea940 100644
--- a/src/idiomorph.js
+++ b/src/idiomorph.js
@@ -29,6 +29,7 @@
  * @property {boolean} [ignoreActive]
  * @property {boolean} [ignoreActiveValue]
  * @property {boolean} [restoreFocus]
+ * @property {boolean} [skipUnchanged]
  * @property {ConfigCallbacks} [callbacks]
  * @property {ConfigHead} [head]
  */
@@ -70,6 +71,7 @@
  * @property {boolean} [ignoreActive]
  * @property {boolean} [ignoreActiveValue]
  * @property {boolean} [restoreFocus]
+ * @property {boolean} [skipUnchanged]
  * @property {ConfigCallbacksInternal} callbacks
  * @property {ConfigHeadInternal} head
  */
@@ -107,6 +109,8 @@ var Idiomorph = (function () {
    * @property {ConfigInternal['ignoreActive']} ignoreActive
    * @property {ConfigInternal['ignoreActiveValue']} ignoreActiveValue
    * @property {ConfigInternal['restoreFocus']} restoreFocus
+   * @property {boolean} skipUnchanged
+   * @property {Set<Node>} unskippableNodes
    * @property {Map<Node, Set<string>>} idMap
    * @property {Set<string>} persistentIds
    * @property {ConfigInternal['callbacks']} callbacks
@@ -143,6 +147,7 @@ var Idiomorph = (function () {
       afterHeadMorphed: noOp,
     },
     restoreFocus: true,
+    skipUnchanged: false,
   };
 
   /**
@@ -641,6 +646,20 @@ var Idiomorph = (function () {
         return oldNode;
       }
 
+      if (
+        ctx.skipUnchanged &&
+        !ctx.unskippableNodes.has(oldNode) &&
+        !ctx.unskippableNodes.has(newContent) &&
+        // re-check the pair itself: beforeNodeMorphed may have changed hidden state since the pre-scan
+        !isUnskippable(oldNode) &&
+        !isUnskippable(newContent) &&
+        oldNode.isEqualNode(newContent)
+      ) {
+        // the whole subtree is unchanged; the root has been announced, its descendants are never visited
+        ctx.callbacks.afterNodeMorphed(oldNode, newContent);
+        return oldNode;
+      }
+
       if (oldNode instanceof HTMLHeadElement && ctx.head.ignore) {
         // ignore the head element
       } else if (
@@ -993,6 +1012,30 @@ var Idiomorph = (function () {
     return promises;
   }
 
+  //=============================================================================
+  // Unchanged Subtree Skipping
+  //=============================================================================
+  const { isUnskippable, createUnskippableNodeSet } = (function () {
+    /**
+     * @param {Node} node
+     * @returns {boolean}
+     */
+    function isUnskippable(node) {
+      return false;
+    }
+
+    /**
+     * @param {Element} oldRoot
+     * @param {Element} newRoot
+     * @returns {Set<Node>}
+     */
+    function createUnskippableNodeSet(oldRoot, newRoot) {
+      return new Set();
+    }
+
+    return { isUnskippable, createUnskippableNodeSet };
+  })();
+
   //=============================================================================
   // Create Morph Context Functions
   //=============================================================================
@@ -1012,6 +1055,7 @@ var Idiomorph = (function () {
       if (!["innerHTML", "outerHTML"].includes(morphStyle)) {
         throw `Do not understand how to morph style ${morphStyle}`;
       }
+      const skipUnchanged = !!mergedConfig.skipUnchanged;
 
       return {
         target: oldNode,
@@ -1021,6 +1065,10 @@ var Idiomorph = (function () {
         ignoreActive: mergedConfig.ignoreActive,
         ignoreActiveValue: mergedConfig.ignoreActiveValue,
         restoreFocus: mergedConfig.restoreFocus,
+        skipUnchanged: skipUnchanged,
+        unskippableNodes: skipUnchanged
+          ? createUnskippableNodeSet(oldNode, newContent)
+          : new Set(),
         idMap: idMap,
         persistentIds: persistentIds,
         pantry: createPantry(),
diff --git a/test/index.html b/test/index.html
index f835d73..11e2671 100644
--- a/test/index.html
+++ b/test/index.html
@@ -48,6 +48,7 @@ <h2>Mocha Test Suite</h2>
     <script src="preserve-focus.js"></script>
     <script src="restore-focus.js"></script>
     <script src="retain-hidden-state.js"></script>
+    <script src="skip-unchanged.js"></script>
 
     <div id="mocha"></div>
 
diff --git a/test/skip-unchanged.js b/test/skip-unchanged.js
new file mode 100644
index 0000000..d6dfd05
--- /dev/null
+++ b/test/skip-unchanged.js
@@ -0,0 +1,115 @@
+describe("skipUnchanged option", function () {
+  setup();
+
+  // Records every beforeNodeMorphed/afterNodeMorphed call as [hook, oldNode.outerHTML|textContent]
+  function recordingCallbacks(calls) {
+    const label = (node) => node.outerHTML || node.textContent;
+    return {
+      beforeNodeMorphed: (oldNode) => {
+        calls.push(["before", label(oldNode)]);
+      },
+      afterNodeMorphed: (oldNode) => {
+        calls.push(["after", label(oldNode)]);
+      },
+    };
+  }
+
+  describe("off by default", function () {
+    it("still visits every node of an identical subtree", function () {
+      const calls = [];
+      const initial = make(`<div><p><b>x</b></p></div>`);
+      Idiomorph.morph(initial, `<div><p><b>x</b></p></div>`, {
+        callbacks: recordingCallbacks(calls),
+      });
+      calls.should.eql([
+        ["before", "<div><p><b>x</b></p></div>"],
+        ["before", "<p><b>x</b></p>"],
+        ["before", "<b>x</b>"],
+        ["before", "x"],
+        ["after", "x"],
+        ["after", "<b>x</b>"],
+        ["after", "<p><b>x</b></p>"],
+        ["after", "<div><p><b>x</b></p></div>"],
+      ]);
+    });
+
+    it("still clears a typed input value as before", function () {
+      const initial = make(`<div><input></div>`);
+      initial.querySelector("input").value = "typed";
+      Idiomorph.morph(initial, `<div><input></div>`);
+      initial.querySelector("input").value.should.equal("");
+    });
+  });
+
+  describe("on", function () {
+    it("skips the descendants of an equal subtree but still calls both hooks on its root", function () {
+      const calls = [];
+      const initial = make(`<div><p><b>x</b></p></div>`);
+      Idiomorph.morph(initial, `<div><p><b>x</b></p></div>`, {
+        skipUnchanged: true,
+        callbacks: recordingCallbacks(calls),
+      });
+      initial.outerHTML.should.equal(`<div><p><b>x</b></p></div>`);
+      calls.should.eql([
+        ["before", "<div><p><b>x</b></p></div>"],
+        ["after", "<div><p><b>x</b></p></div>"],
+      ]);
+    });
+
+    it("does not call beforeAttributeUpdated inside a skipped subtree", function () {
+      let attributeCalls = 0;
+      const initial = make(`<div><p class="a"><b id="b">x</b></p></div>`);
+      Idiomorph.morph(initial, `<div><p class="a"><b id="b">x</b></p></div>`, {
+        skipUnchanged: true,
+        callbacks: {
+          beforeAttributeUpdated: () => {
+            attributeCalls++;
+          },
+        },
+      });
+      attributeCalls.should.equal(0);
+    });
+
+    it("still morphs a subtree whose deepest leaf changed", function () {
+      const calls = [];
+      const initial = make(`<div><p><b>x</b></p><p><b>same</b></p></div>`);
+      Idiomorph.morph(initial, `<div><p><b>y</b></p><p><b>same</b></p></div>`, {
+        skipUnchanged: true,
+        callbacks: recordingCallbacks(calls),
+      });
+      initial.outerHTML.should.equal(
+        `<div><p><b>y</b></p><p><b>same</b></p></div>`,
+      );
+      calls.should.eql([
+        ["before", "<div><p><b>x</b></p><p><b>same</b></p></div>"],
+        ["before", "<p><b>x</b></p>"],
+        ["before", "<b>x</b>"],
+        ["before", "x"],
+        ["after", "y"],
+        ["after", "<b>y</b>"],
+        ["after", "<p><b>y</b></p>"],
+        ["before", "<p><b>same</b></p>"],
+        ["after", "<p><b>same</b></p>"],
+        ["after", "<div><p><b>y</b></p><p><b>same</b></p></div>"],
+      ]);
+    });
+
+    it("still honours beforeNodeMorphed returning false on an equal root", function () {
+      const calls = [];
+      const initial = make(`<div><p>x</p></div>`);
+      Idiomorph.morph(initial, `<div><p>x</p></div>`, {
+        skipUnchanged: true,
+        callbacks: {
+          beforeNodeMorphed: (oldNode) => {
+            calls.push(oldNode.outerHTML || oldNode.textContent);
+            return false;
+          },
+          afterNodeMorphed: () => {
+            calls.push("after");
+          },
+        },
+      });
+      calls.should.eql(["<div><p>x</p></div>"]);
+    });
+  });
+});

From 895b6442aa70201705ffd5a43610fd13bba35e3e Mon Sep 17 00:00:00 2001
From: Alexander Brandon Coles <a.coles@openproject.com>
Date: Tue, 25 Aug 2026 19:43:24 -0800
Subject: [PATCH 02/12] never skip dirty form controls, templates or heads

isEqualNode ignores the value/checked/selected properties, template
content and the side effects of head merging. Re-check the pair at
skip time so a beforeNodeMorphed callback that mutates the nodes it
was handed keeps working.
---
 src/idiomorph.js       |  63 ++++++
 test/skip-unchanged.js | 441 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 504 insertions(+)

diff --git a/src/idiomorph.js b/src/idiomorph.js
index 5eea940..25a3efb 100644
--- a/src/idiomorph.js
+++ b/src/idiomorph.js
@@ -1017,13 +1017,76 @@ var Idiomorph = (function () {
   //=============================================================================
   const { isUnskippable, createUnskippableNodeSet } = (function () {
     /**
+     * Nodes whose subtree must never be skipped under `skipUnchanged`, because
+     * `isEqualNode` either ignores state a morph would sync, or lies about them.
+     *
      * @param {Node} node
      * @returns {boolean}
      */
     function isUnskippable(node) {
+      if (node instanceof HTMLTemplateElement) {
+        // isEqualNode does not compare template .content
+        return true;
+      }
+      if (node instanceof HTMLHeadElement) {
+        // head merging has side effects (im-re-append) even when the head is unchanged
+        return true;
+      }
+      if (node instanceof HTMLInputElement) {
+        return (
+          node.type !== "file" &&
+          (node.checked !== node.defaultChecked ||
+            node.value !== defaultValueOf(node))
+        );
+      }
+      if (node instanceof HTMLTextAreaElement) {
+        return node.value !== node.defaultValue;
+      }
+      if (node instanceof HTMLOptionElement) {
+        return node.selected !== defaultSelectedOf(node);
+      }
+      return false;
+    }
+
+    /**
+     * Whether an option would be selected right after parsing its markup.
+     * In a single-select without any `selected` attribute the browser selects
+     * the first enabled option, and `defaultSelected` does not reflect that.
+     *
+     * @param {HTMLOptionElement} option
+     * @returns {boolean}
+     */
+    function defaultSelectedOf(option) {
+      const select = option.closest("select");
+      if (!select || select.multiple || select.size > 1) {
+        return option.defaultSelected;
+      }
+      const options = select.options;
+      // the last option with a selected attribute wins; otherwise the first enabled option
+      for (let i = options.length - 1; i >= 0; i--) {
+        if (options[i].defaultSelected) return options[i] === option;
+      }
+      for (let i = 0; i < options.length; i++) {
+        if (!options[i].disabled) return options[i] === option;
+      }
       return false;
     }
 
+    /**
+     * The value an input reports when its value property has not been touched.
+     * Checkbox and radio inputs report "on" when the value attribute is absent,
+     * while `defaultValue` reports "" in that case.
+     *
+     * @param {HTMLInputElement} input
+     * @returns {string}
+     */
+    function defaultValueOf(input) {
+      if (input.type === "checkbox" || input.type === "radio") {
+        return input.getAttribute("value") ?? "on";
+      }
+      return input.defaultValue;
+    }
+
     /**
      * @param {Element} oldRoot
      * @param {Element} newRoot
diff --git a/test/skip-unchanged.js b/test/skip-unchanged.js
index d6dfd05..8cf336d 100644
--- a/test/skip-unchanged.js
+++ b/test/skip-unchanged.js
@@ -111,5 +111,446 @@ describe("skipUnchanged option", function () {
       });
       calls.should.eql(["<div><p>x</p></div>"]);
     });
+
+    describe("dirty form controls are never skipped", function () {
+      // Each case morphs the control as an outerHTML root, so the pair given to
+      // morphNode is the control itself and the skip-time re-check decides.
+
+      it("text input with a typed value is reset as before", function () {
+        const input = make(`<input>`);
+        input.value = "typed";
+        Idiomorph.morph(input, `<input>`, { skipUnchanged: true });
+        input.value.should.equal("");
+      });
+
+      it("checkbox with toggled checked is reset as before", function () {
+        const input = make(`<input type="checkbox">`);
+        input.checked = true;
+        Idiomorph.morph(input, `<input type="checkbox">`, {
+          skipUnchanged: true,
+        });
+        input.checked.should.equal(false);
+      });
+
+      it("checkbox with a programmatic value and untouched checked is synced as before", function () {
+        // setting .value on a checkbox reflects to the value attribute, so this is caught by
+        // isEqualNode rather than the predicate; kept as a regression guard for the "on" default rule
+        const input = make(`<input type="checkbox" value="a">`);
+        input.value = "b";
+        Idiomorph.morph(input, `<input type="checkbox" value="a">`, {
+          skipUnchanged: true,
+        });
+        input.value.should.equal("a");
+      });
+
+      it("radio with toggled checked is reset as before", function () {
+        const input = make(`<input type="radio">`);
+        input.checked = true;
+        Idiomorph.morph(input, `<input type="radio">`, { skipUnchanged: true });
+        input.checked.should.equal(false);
+      });
+
+      it("text input with programmatic checked is synced as before", function () {
+        const input = make(`<input>`);
+        input.checked = true;
+        Idiomorph.morph(input, `<input>`, { skipUnchanged: true });
+        input.checked.should.equal(false);
+      });
+
+      it("textarea with a typed value is reset as before", function () {
+        const textarea = make(`<textarea>foo</textarea>`);
+        textarea.value = "typed";
+        Idiomorph.morph(textarea, `<textarea>foo</textarea>`, {
+          skipUnchanged: true,
+        });
+        textarea.value.should.equal("foo");
+      });
+
+      // The following five cases morph a <select>/<datalist> whose own markup is
+      // byte-for-byte unchanged, with the dirty state living on a child <option>.
+      // isEqualNode already reports the select/datalist pair as equal, so the
+      // ancestor is skipped before the option is ever visited by morphNode's
+      // skip-time re-check. Making these pass requires Task 3's pre-scan to mark
+      // the ancestor unskippable; un-skip them there.
+
+      it.skip("single select with a changed option is reset as before", function () {
+        const select = make(
+          `<select><option value="a">A</option><option value="b">B</option></select>`,
+        );
+        select.value = "b";
+        Idiomorph.morph(
+          select,
+          `<select><option value="a">A</option><option value="b">B</option></select>`,
+          { skipUnchanged: true },
+        );
+        select.value.should.equal("a");
+      });
+
+      it.skip("single select whose selected attribute is on a later option is reset as before", function () {
+        const select = make(
+          `<select><option value="a">A</option><option value="b" selected>B</option></select>`,
+        );
+        select.value = "a";
+        Idiomorph.morph(
+          select,
+          `<select><option value="a">A</option><option value="b" selected>B</option></select>`,
+          { skipUnchanged: true },
+        );
+        select.value.should.equal("b");
+      });
+
+      it.skip("multiple select with a changed option is reset as before", function () {
+        const select = make(
+          `<select multiple><option value="a" selected>A</option><option value="b">B</option></select>`,
+        );
+        select.options[1].selected = true;
+        Idiomorph.morph(
+          select,
+          `<select multiple><option value="a" selected>A</option><option value="b">B</option></select>`,
+          { skipUnchanged: true },
+        );
+        select.options[1].selected.should.equal(false);
+      });
+
+      it.skip("listbox (size > 1) select with a changed option is reset as before", function () {
+        const select = make(
+          `<select size="2"><option value="a">A</option><option value="b">B</option></select>`,
+        );
+        select.value = "b";
+        Idiomorph.morph(
+          select,
+          `<select size="2"><option value="a">A</option><option value="b">B</option></select>`,
+          { skipUnchanged: true },
+        );
+        select.selectedIndex.should.equal(-1);
+      });
+
+      it.skip("option outside a select uses defaultSelected", function () {
+        const datalist = make(
+          `<datalist><option value="a"></option></datalist>`,
+        );
+        datalist.firstChild.selected = true;
+        Idiomorph.morph(
+          datalist,
+          `<datalist><option value="a"></option></datalist>`,
+          {
+            skipUnchanged: true,
+          },
+        );
+        datalist.firstChild.selected.should.equal(false);
+      });
+
+      // The cases above morph a container whose own markup never changes, so
+      // isUnskippable is only ever asked about the container (never the option)
+      // until Task 3's pre-scan exists. Morphing the option itself as the root
+      // exercises defaultSelectedOf's branches directly today.
+
+      it("standalone option (outside any select) is reset via defaultSelected", function () {
+        const option = make(`<option value="a"></option>`);
+        option.selected = true;
+        Idiomorph.morph(option, `<option value="a"></option>`, {
+          skipUnchanged: true,
+        });
+        option.selected.should.equal(false);
+      });
+
+      it("option inside a multiple select is reset via defaultSelected", function () {
+        const select = make(
+          `<select multiple><option value="a">A</option><option value="b">B</option></select>`,
+        );
+        const option = select.options[1];
+        option.selected = true;
+        Idiomorph.morph(option, `<option value="b">B</option>`, {
+          skipUnchanged: true,
+        });
+        option.selected.should.equal(false);
+      });
+
+      it("option inside a listbox (size > 1) select is reset via defaultSelected", function () {
+        const select = make(
+          `<select size="2"><option value="a">A</option><option value="b">B</option></select>`,
+        );
+        const option = select.options[1];
+        option.selected = true;
+        Idiomorph.morph(option, `<option value="b">B</option>`, {
+          skipUnchanged: true,
+        });
+        option.selected.should.equal(false);
+      });
+
+      it("file input is never considered dirty", function () {
+        const calls = [];
+        const input = make(`<input type="file">`);
+        Idiomorph.morph(input, `<input type="file">`, {
+          skipUnchanged: true,
+          callbacks: recordingCallbacks(calls),
+        });
+        calls.should.eql([
+          ["before", `<input type="file">`],
+          ["after", `<input type="file">`],
+        ]);
+      });
+    });
+
+    describe("clean form controls are skipped", function () {
+      it("skips an attribute-less checkbox (value defaults to 'on')", function () {
+        const calls = [];
+        const initial = make(`<div><input type="checkbox"></div>`);
+        Idiomorph.morph(initial, `<div><input type="checkbox"></div>`, {
+          skipUnchanged: true,
+          callbacks: recordingCallbacks(calls),
+        });
+        calls.should.eql([
+          ["before", `<div><input type="checkbox"></div>`],
+          ["after", `<div><input type="checkbox"></div>`],
+        ]);
+      });
+
+      it("skips a single select whose selected attribute is on a later option", function () {
+        const calls = [];
+        const html = `<div><select><option>a</option><option selected="">b</option></select></div>`;
+        const initial = make(html);
+        Idiomorph.morph(initial, html, {
+          skipUnchanged: true,
+          callbacks: recordingCallbacks(calls),
+        });
+        calls.should.eql([
+          ["before", html],
+          ["after", html],
+        ]);
+      });
+
+      it("skips a single select whose first option is disabled", function () {
+        const calls = [];
+        const html = `<div><select><option disabled="">a</option><option>b</option></select></div>`;
+        const initial = make(html);
+        Idiomorph.morph(initial, html, {
+          skipUnchanged: true,
+          callbacks: recordingCallbacks(calls),
+        });
+        calls.should.eql([
+          ["before", html],
+          ["after", html],
+        ]);
+      });
+
+      it("skips a single select whose options are all disabled", function () {
+        const calls = [];
+        const html = `<div><select><option disabled="">a</option></select></div>`;
+        const initial = make(html);
+        Idiomorph.morph(initial, html, {
+          skipUnchanged: true,
+          callbacks: recordingCallbacks(calls),
+        });
+        calls.should.eql([
+          ["before", html],
+          ["after", html],
+        ]);
+      });
+
+      it("skips a checkbox with a value attribute", function () {
+        const calls = [];
+        const initial = make(`<div><input type="checkbox" value="x"></div>`);
+        Idiomorph.morph(
+          initial,
+          `<div><input type="checkbox" value="x"></div>`,
+          {
+            skipUnchanged: true,
+            callbacks: recordingCallbacks(calls),
+          },
+        );
+        calls.should.eql([
+          ["before", `<div><input type="checkbox" value="x"></div>`],
+          ["after", `<div><input type="checkbox" value="x"></div>`],
+        ]);
+      });
+
+      it("skips a clean text input, textarea and select", function () {
+        // the first option of an untouched single-select reports selected=true but
+        // defaultSelected=false; the effective-default rule must still treat it as clean
+        const calls = [];
+        const html = `<div><input value="a"><textarea>b</textarea><select><option>c</option><option>d</option></select></div>`;
+        const initial = make(html);
+        Idiomorph.morph(initial, html, {
+          skipUnchanged: true,
+          callbacks: recordingCallbacks(calls),
+        });
+        calls.should.eql([
+          ["before", html],
+          ["after", html],
+        ]);
+      });
+
+      // Same reasoning as the "option inside a ... select is reset" tests above:
+      // morphing the option itself as the root exercises defaultSelectedOf's
+      // single-select branches (explicit `selected`, implicit first option,
+      // disabled options) directly today.
+
+      it("skips a clean option that is explicitly selected", function () {
+        const calls = [];
+        const select = make(
+          `<select><option value="a">A</option><option value="b" selected="">B</option></select>`,
+        );
+        const option = select.options[1];
+        Idiomorph.morph(option, `<option value="b" selected="">B</option>`, {
+          skipUnchanged: true,
+          callbacks: recordingCallbacks(calls),
+        });
+        calls.should.eql([
+          ["before", `<option value="b" selected="">B</option>`],
+          ["after", `<option value="b" selected="">B</option>`],
+        ]);
+      });
+
+      it("skips a clean, implicitly-selected first option", function () {
+        const calls = [];
+        const select = make(
+          `<select><option value="a">A</option><option value="b">B</option></select>`,
+        );
+        const option = select.options[0];
+        Idiomorph.morph(option, `<option value="a">A</option>`, {
+          skipUnchanged: true,
+          callbacks: recordingCallbacks(calls),
+        });
+        calls.should.eql([
+          ["before", `<option value="a">A</option>`],
+          ["after", `<option value="a">A</option>`],
+        ]);
+      });
+
+      it("skips a clean option following a disabled option", function () {
+        const calls = [];
+        const select = make(
+          `<select><option value="a" disabled="">A</option><option value="b">B</option></select>`,
+        );
+        const option = select.options[1];
+        Idiomorph.morph(option, `<option value="b">B</option>`, {
+          skipUnchanged: true,
+          callbacks: recordingCallbacks(calls),
+        });
+        calls.should.eql([
+          ["before", `<option value="b">B</option>`],
+          ["after", `<option value="b">B</option>`],
+        ]);
+      });
+
+      it("skips a clean option when every option in the select is disabled", function () {
+        const calls = [];
+        const select = make(
+          `<select><option value="a" disabled="">A</option></select>`,
+        );
+        const option = select.options[0];
+        Idiomorph.morph(option, `<option value="a" disabled="">A</option>`, {
+          skipUnchanged: true,
+          callbacks: recordingCallbacks(calls),
+        });
+        calls.should.eql([
+          ["before", `<option value="a" disabled="">A</option>`],
+          ["after", `<option value="a" disabled="">A</option>`],
+        ]);
+      });
+    });
+
+    describe("templates and the head are never skipped", function () {
+      it("re-morphs template content even though the template's outerHTML looks unchanged", function () {
+        // isEqualNode does not look inside .content, so without the special case
+        // this mutation would be missed and the skip would leave "changed" in place
+        const template = make(`<template><p>x</p></template>`);
+        template.content.querySelector("p").textContent = "changed";
+        Idiomorph.morph(template, `<template><p>x</p></template>`, {
+          skipUnchanged: true,
+        });
+        template.content.querySelector("p").textContent.should.equal("x");
+      });
+
+      it("still applies head re-append side effects when the head looks unchanged", function () {
+        // im-re-append removes and re-adds a matching head element even when it's
+        // otherwise identical; isEqualNode can't see that, so without the special
+        // case the head would be skipped and the re-append would never happen
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(
+          `<html><head><meta im-re-append="true"></head></html>`,
+          "text/html",
+        );
+        const originalMeta = doc.head.firstChild;
+        Idiomorph.morph(doc.head, `<head><meta im-re-append="true"></head>`, {
+          skipUnchanged: true,
+        });
+        doc.head.firstChild.should.not.equal(originalMeta);
+      });
+    });
+
+    describe("dirty state on the new side", function () {
+      // The dirty input inside `final` is a descendant of the pair root `<div>`,
+      // not the pair itself; this only passes once Task 3 adds the pre-scan.
+      it.skip("morphs when the new input carries a programmatic value", function () {
+        const initial = make(`<div><input value="a"></div>`);
+        const final = make(`<div><input value="a"></div>`);
+        final.querySelector("input").value = "b";
+        Idiomorph.morph(initial, final, { skipUnchanged: true });
+        initial.querySelector("input").value.should.equal("b");
+      });
+    });
+
+    describe("hidden state mutated by beforeNodeMorphed", function () {
+      it("honours a callback that sets the new node's value", function () {
+        const initial = make(`<input value="a">`);
+        Idiomorph.morph(initial, `<input value="a">`, {
+          skipUnchanged: true,
+          callbacks: {
+            beforeNodeMorphed: (oldNode, newNode) => {
+              newNode.value = "x";
+            },
+          },
+        });
+        initial.value.should.equal("x");
+      });
+
+      it("keeps working for the #132 two-way-binding pattern (copy the typed value onto the new node)", function () {
+        // https://github.com/bigskysoftware/idiomorph/issues/132 — incoming markup has no
+        // value attribute; the app preserves user input from beforeNodeMorphed
+        const initial = make(`<div><input></div>`);
+        initial.querySelector("input").value = "typed";
+        Idiomorph.morph(initial, `<div><input></div>`, {
+          skipUnchanged: true,
+          callbacks: {
+            beforeNodeMorphed: (oldNode, newNode) => {
+              if (oldNode instanceof HTMLInputElement)
+                newNode.value = oldNode.value;
+            },
+          },
+        });
+        initial.querySelector("input").value.should.equal("typed");
+      });
+
+      it("honours a callback that sets the old node's value (reset to the new value, as today)", function () {
+        const initial = make(`<input value="a">`);
+        Idiomorph.morph(initial, `<input value="a">`, {
+          skipUnchanged: true,
+          callbacks: {
+            beforeNodeMorphed: (oldNode) => {
+              oldNode.value = "client";
+            },
+          },
+        });
+        initial.value.should.equal("a");
+      });
+
+      it("does not honour a callback that mutates a descendant of an equal root (documented limitation)", function () {
+        const initial = make(`<div><input value="a"></div>`);
+        Idiomorph.morph(initial, `<div><input value="a"></div>`, {
+          skipUnchanged: true,
+          callbacks: {
+            beforeNodeMorphed: (oldNode) => {
+              if (oldNode.tagName === "DIV") {
+                oldNode.querySelector("input").value = "client";
+              }
+            },
+          },
+        });
+        // the div was equal and clean at skip time, so the mutated input inside it was never visited
+        initial.querySelector("input").value.should.equal("client");
+      });
+    });
   });
 });

From de6ae8797bbcb836c84e057f26b03fad93855e3e Mon Sep 17 00:00:00 2001
From: Alexander Brandon Coles <a.coles@openproject.com>
Date: Tue, 25 Aug 2026 20:09:20 -0800
Subject: [PATCH 03/12] pre-scan unskippable nodes and their ancestors

isEqualNode reports two ancestors equal even when a nested template's
content differs or a nested input holds a typed value, so mark every
unskippable node and its ancestors up to the morph root before the
walk. Scan template content explicitly since querySelectorAll does
not enter it.

Also compare live `selected` state directly between an old/new
option pair: a single-select's implicit default selection depends on
every option in the select, so removing `selected` from one option
can silently flip an untouched sibling's effective selectedness,
which neither side's own dirtiness check alone can see. Found via
the default-flip smoke run against the full test suite.

Corrected the #132 regression test too: it set a bare `.value`
property that idiomorph's value sync never reads, so it passed only
by accident before this pre-scan existed. It now sets the "value"
attribute, as the workaround actually requires.
---
 src/idiomorph.js       | 249 +++++++++++++++++++++++++++++------------
 test/skip-unchanged.js | 199 ++++++++++++++++++++++++++++++--
 2 files changed, 367 insertions(+), 81 deletions(-)

diff --git a/src/idiomorph.js b/src/idiomorph.js
index 25a3efb..bc2364a 100644
--- a/src/idiomorph.js
+++ b/src/idiomorph.js
@@ -653,6 +653,9 @@ var Idiomorph = (function () {
         // re-check the pair itself: beforeNodeMorphed may have changed hidden state since the pre-scan
         !isUnskippable(oldNode) &&
         !isUnskippable(newContent) &&
+        // a sibling option's change can flip this option's implicit selectedness
+        // without either side's own isUnskippable check ever seeing it
+        !optionSelectionDiffers(oldNode, newContent) &&
         oldNode.isEqualNode(newContent)
       ) {
         // the whole subtree is unchanged; the root has been announced, its descendants are never visited
@@ -1015,89 +1018,189 @@ var Idiomorph = (function () {
   //=============================================================================
   // Unchanged Subtree Skipping
   //=============================================================================
-  const { isUnskippable, createUnskippableNodeSet } = (function () {
-    /**
-     * Nodes whose subtree must never be skipped under `skipUnchanged`, because
-     * `isEqualNode` either ignores state a morph would sync, or lies about them.
-     *
-     * @param {Node} node
-     * @returns {boolean}
-     */
-    function isUnskippable(node) {
-      if (node instanceof HTMLTemplateElement) {
-        // isEqualNode does not compare template .content
-        return true;
-      }
-      if (node instanceof HTMLHeadElement) {
-        // head merging has side effects (im-re-append) even when the head is unchanged
-        return true;
-      }
-      if (node instanceof HTMLInputElement) {
-        return (
-          node.type !== "file" &&
-          (node.checked !== node.defaultChecked ||
-            node.value !== defaultValueOf(node))
-        );
-      }
-      if (node instanceof HTMLTextAreaElement) {
-        return node.value !== node.defaultValue;
+  const { isUnskippable, optionSelectionDiffers, createUnskippableNodeSet } =
+    (function () {
+      const UNSKIPPABLE_SELECTOR = "input,textarea,option,template,head";
+
+      /**
+       * Nodes whose subtree must never be skipped under `skipUnchanged`, because
+       * `isEqualNode` either ignores state a morph would sync, or lies about them.
+       *
+       * @param {Node} node
+       * @returns {boolean}
+       */
+      function isUnskippable(node) {
+        if (node instanceof HTMLTemplateElement) {
+          // isEqualNode does not compare template .content
+          return true;
+        }
+        if (node instanceof HTMLHeadElement) {
+          // head merging has side effects (im-re-append) even when the head is unchanged
+          return true;
+        }
+        if (node instanceof HTMLInputElement) {
+          return (
+            node.type !== "file" &&
+            (node.checked !== node.defaultChecked ||
+              node.value !== defaultValueOf(node))
+          );
+        }
+        if (node instanceof HTMLTextAreaElement) {
+          return node.value !== node.defaultValue;
+        }
+        if (node instanceof HTMLOptionElement) {
+          return node.selected !== defaultSelectedOf(node);
+        }
+        return false;
       }
-      if (node instanceof HTMLOptionElement) {
-        return node.selected !== defaultSelectedOf(node);
+
+      /**
+       * Whether an option pair's live `selected` state has diverged even though
+       * neither side looks dirty on its own `isUnskippable` check. A
+       * single-select's implicit default selection depends on every option in
+       * the select, so removing the `selected` attribute from one option can
+       * flip another, untouched option's effective selectedness as a side
+       * effect once the morph runs — something neither side can see by
+       * comparing itself only against its own default.
+       *
+       * Only meaningful when both sides sit in a real single-select: an option
+       * morphed on its own (no `<select>` ancestor, e.g. an outerHTML root
+       * morph) reports `selected: false` for reasons unrelated to this
+       * coupling, and comparing that against the old side would misfire.
+       *
+       * @param {Node} oldNode
+       * @param {Node} newNode
+       * @returns {boolean}
+       */
+      function optionSelectionDiffers(oldNode, newNode) {
+        if (
+          !(oldNode instanceof HTMLOptionElement) ||
+          !(newNode instanceof HTMLOptionElement)
+        ) {
+          return false;
+        }
+        const oldSelect = oldNode.closest("select");
+        const newSelect = newNode.closest("select");
+        if (
+          !oldSelect ||
+          oldSelect.multiple ||
+          oldSelect.size > 1 ||
+          !newSelect ||
+          newSelect.multiple ||
+          newSelect.size > 1
+        ) {
+          return false;
+        }
+        return oldNode.selected !== newNode.selected;
       }
-      return false;
-    }
 
-    /**
-     * Whether an option would be selected right after parsing its markup.
-     * In a single-select without any `selected` attribute the browser selects
-     * the first enabled option, and `defaultSelected` does not reflect that.
-     *
-     * @param {HTMLOptionElement} option
-     * @returns {boolean}
-     */
-    function defaultSelectedOf(option) {
-      const select = option.closest("select");
-      if (!select || select.multiple || select.size > 1) {
-        return option.defaultSelected;
+      /**
+       * Whether an option would be selected right after parsing its markup.
+       * In a single-select without any `selected` attribute the browser selects
+       * the first enabled option, and `defaultSelected` does not reflect that.
+       *
+       * @param {HTMLOptionElement} option
+       * @returns {boolean}
+       */
+      function defaultSelectedOf(option) {
+        const select = option.closest("select");
+        if (!select || select.multiple || select.size > 1) {
+          return option.defaultSelected;
+        }
+        const options = select.options;
+        // the last option with a selected attribute wins; otherwise the first enabled option
+        for (let i = options.length - 1; i >= 0; i--) {
+          if (options[i].defaultSelected) return options[i] === option;
+        }
+        for (let i = 0; i < options.length; i++) {
+          if (!options[i].disabled) return options[i] === option;
+        }
+        return false;
       }
-      const options = select.options;
-      // the last option with a selected attribute wins; otherwise the first enabled option
-      for (let i = options.length - 1; i >= 0; i--) {
-        if (options[i].defaultSelected) return options[i] === option;
+
+      /**
+       * The value an input reports when its value property has not been touched.
+       * Checkbox and radio inputs report "on" when the value attribute is absent,
+       * while `defaultValue` reports "" in that case.
+       *
+       * @param {HTMLInputElement} input
+       * @returns {string}
+       */
+      function defaultValueOf(input) {
+        if (input.type === "checkbox" || input.type === "radio") {
+          return input.getAttribute("value") ?? "on";
+        }
+        return input.defaultValue;
       }
-      for (let i = 0; i < options.length; i++) {
-        if (!options[i].disabled) return options[i] === option;
+
+      /**
+       * Computes the set of nodes that must never be skipped by `skipUnchanged`:
+       * every unskippable node (see `isUnskippable`) plus all of its ancestors,
+       * from both the old and the new content. Ancestors matter because
+       * `isEqualNode` on an ancestor can report equality while ignoring a
+       * descendant's hidden state or a template's content.
+       *
+       * @param {Element} oldRoot
+       * @param {Element} newRoot
+       * @returns {Set<Node>}
+       */
+      function createUnskippableNodeSet(oldRoot, newRoot) {
+        /** @type {Set<Node>} */
+        const set = new Set();
+        collectUnskippableNodes(oldRoot, oldRoot, set);
+        // a duck-typed parent exposes its single child as the root, to halt the upward walk
+        // @ts-ignore
+        const newStopAt = newRoot.__idiomorphRoot || newRoot;
+        collectUnskippableNodes(newRoot, newStopAt, set);
+        return set;
       }
-      return false;
-    }
 
-    /**
-     * The value an input reports when its value property has not been touched.
-     * Checkbox and radio inputs report "on" when the value attribute is absent,
-     * while `defaultValue` reports "" in that case.
-     *
-     * @param {HTMLInputElement} input
-     * @returns {string}
-     */
-    function defaultValueOf(input) {
-      if (input.type === "checkbox" || input.type === "radio") {
-        return input.getAttribute("value") ?? "on";
+      /**
+       * @param {Element | DocumentFragment} root the node to scan
+       * @param {Node} stopAt the topmost node the upward walk may add
+       * @param {Set<Node>} set
+       */
+      function collectUnskippableNodes(root, stopAt, set) {
+        const candidates = Array.from(
+          root.querySelectorAll(UNSKIPPABLE_SELECTOR),
+        );
+        // querySelectorAll excludes the root, but an outerHTML morph can have a control as its root
+        if (root instanceof Element && root.matches(UNSKIPPABLE_SELECTOR)) {
+          candidates.push(root);
+        }
+        for (const candidate of candidates) {
+          if (isUnskippable(candidate)) {
+            addWithAncestors(candidate, stopAt, set);
+          }
+          if (candidate instanceof HTMLTemplateElement) {
+            // querySelectorAll does not descend into template content, but morphChildren does
+            collectUnskippableNodes(candidate.content, candidate.content, set);
+          }
+        }
       }
-      return input.defaultValue;
-    }
 
-    /**
-     * @param {Element} oldRoot
-     * @param {Element} newRoot
-     * @returns {Set<Node>}
-     */
-    function createUnskippableNodeSet(oldRoot, newRoot) {
-      return new Set();
-    }
+      /**
+       * @param {Node} node
+       * @param {Node} stopAt
+       * @param {Set<Node>} set
+       */
+      function addWithAncestors(node, stopAt, set) {
+        /** @type {Node} */
+        let current = node;
+        // every candidate is a descendant of (or is) stopAt, so the walk always terminates there
+        while (!set.has(current)) {
+          set.add(current);
+          if (current === stopAt) break;
+          current = /** @type {Node} */ (current.parentNode);
+        }
+      }
 
-    return { isUnskippable, createUnskippableNodeSet };
-  })();
+      return {
+        isUnskippable,
+        optionSelectionDiffers,
+        createUnskippableNodeSet,
+      };
+    })();
 
   //=============================================================================
   // Create Morph Context Functions
diff --git a/test/skip-unchanged.js b/test/skip-unchanged.js
index 8cf336d..dfb36cc 100644
--- a/test/skip-unchanged.js
+++ b/test/skip-unchanged.js
@@ -173,7 +173,7 @@ describe("skipUnchanged option", function () {
       // skip-time re-check. Making these pass requires Task 3's pre-scan to mark
       // the ancestor unskippable; un-skip them there.
 
-      it.skip("single select with a changed option is reset as before", function () {
+      it("single select with a changed option is reset as before", function () {
         const select = make(
           `<select><option value="a">A</option><option value="b">B</option></select>`,
         );
@@ -186,7 +186,7 @@ describe("skipUnchanged option", function () {
         select.value.should.equal("a");
       });
 
-      it.skip("single select whose selected attribute is on a later option is reset as before", function () {
+      it("single select whose selected attribute is on a later option is reset as before", function () {
         const select = make(
           `<select><option value="a">A</option><option value="b" selected>B</option></select>`,
         );
@@ -199,7 +199,7 @@ describe("skipUnchanged option", function () {
         select.value.should.equal("b");
       });
 
-      it.skip("multiple select with a changed option is reset as before", function () {
+      it("multiple select with a changed option is reset as before", function () {
         const select = make(
           `<select multiple><option value="a" selected>A</option><option value="b">B</option></select>`,
         );
@@ -212,7 +212,7 @@ describe("skipUnchanged option", function () {
         select.options[1].selected.should.equal(false);
       });
 
-      it.skip("listbox (size > 1) select with a changed option is reset as before", function () {
+      it("listbox (size > 1) select with a changed option is reset as before", function () {
         const select = make(
           `<select size="2"><option value="a">A</option><option value="b">B</option></select>`,
         );
@@ -225,7 +225,7 @@ describe("skipUnchanged option", function () {
         select.selectedIndex.should.equal(-1);
       });
 
-      it.skip("option outside a select uses defaultSelected", function () {
+      it("option outside a select uses defaultSelected", function () {
         const datalist = make(
           `<datalist><option value="a"></option></datalist>`,
         );
@@ -483,7 +483,7 @@ describe("skipUnchanged option", function () {
     describe("dirty state on the new side", function () {
       // The dirty input inside `final` is a descendant of the pair root `<div>`,
       // not the pair itself; this only passes once Task 3 adds the pre-scan.
-      it.skip("morphs when the new input carries a programmatic value", function () {
+      it("morphs when the new input carries a programmatic value", function () {
         const initial = make(`<div><input value="a"></div>`);
         const final = make(`<div><input value="a"></div>`);
         final.querySelector("input").value = "b";
@@ -508,7 +508,9 @@ describe("skipUnchanged option", function () {
 
       it("keeps working for the #132 two-way-binding pattern (copy the typed value onto the new node)", function () {
         // https://github.com/bigskysoftware/idiomorph/issues/132 — incoming markup has no
-        // value attribute; the app preserves user input from beforeNodeMorphed
+        // value attribute; the app preserves user input from beforeNodeMorphed by setting
+        // the *attribute* on newNode (syncInputValue only ever consults newNode's
+        // "value" attribute, never a bare .value property assignment)
         const initial = make(`<div><input></div>`);
         initial.querySelector("input").value = "typed";
         Idiomorph.morph(initial, `<div><input></div>`, {
@@ -516,7 +518,7 @@ describe("skipUnchanged option", function () {
           callbacks: {
             beforeNodeMorphed: (oldNode, newNode) => {
               if (oldNode instanceof HTMLInputElement)
-                newNode.value = oldNode.value;
+                newNode.setAttribute("value", oldNode.value);
             },
           },
         });
@@ -552,5 +554,186 @@ describe("skipUnchanged option", function () {
         initial.querySelector("input").value.should.equal("client");
       });
     });
+
+    describe("ancestors of unskippable nodes are not skipped", function () {
+      it("resets a typed input nested inside an otherwise equal subtree", function () {
+        const initial = make(`<div><p><input></p></div>`);
+        initial.querySelector("input").value = "typed";
+        Idiomorph.morph(initial, `<div><p><input></p></div>`, {
+          skipUnchanged: true,
+        });
+        initial.querySelector("input").value.should.equal("");
+      });
+
+      it("resets two typed inputs under the same parent", function () {
+        const initial = make(`<div><input><input></div>`);
+        const [first, second] = initial.querySelectorAll("input");
+        first.value = "one";
+        second.value = "two";
+        Idiomorph.morph(initial, `<div><input><input></div>`, {
+          skipUnchanged: true,
+        });
+        first.value.should.equal("");
+        second.value.should.equal("");
+      });
+
+      it("morphs a template whose content differs", function () {
+        const initial = make(`<div><template><b>A</b></template></div>`);
+        Idiomorph.morph(initial, `<div><template><b>B</b></template></div>`, {
+          skipUnchanged: true,
+        });
+        initial.querySelector("template").innerHTML.should.equal(`<b>B</b>`);
+      });
+
+      it("resets a typed input inside template content", function () {
+        const initial = make(`<div><template><input></template></div>`);
+        initial.querySelector("template").content.querySelector("input").value =
+          "typed";
+        Idiomorph.morph(initial, `<div><template><input></template></div>`, {
+          skipUnchanged: true,
+        });
+        initial
+          .querySelector("template")
+          .content.querySelector("input")
+          .value.should.equal("");
+      });
+
+      it("morphs a nested template inside template content", function () {
+        const initial = make(
+          `<div><template><p><template><b>A</b></template></p></template></div>`,
+        );
+        Idiomorph.morph(
+          initial,
+          `<div><template><p><template><b>B</b></template></p></template></div>`,
+          { skipUnchanged: true },
+        );
+        initial
+          .querySelector("template")
+          .content.querySelector("template")
+          .innerHTML.should.equal(`<b>B</b>`);
+      });
+    });
+
+    describe("head handling keeps its side effects", function () {
+      it("re-appends im-re-append elements in an otherwise equal document", function () {
+        const html =
+          "<html><head><title im-re-append='true'>Foo</title></head><body></body></html>";
+        const doc = parseHTML(html);
+        const originalHead = doc.head;
+        const originalTitle = originalHead.children[0];
+        Idiomorph.morph(doc, html, { skipUnchanged: true });
+        originalHead.should.equal(doc.head);
+        originalHead.children.length.should.equal(1);
+        originalHead.children[0].outerHTML.should.equal(
+          '<title im-re-append="true">Foo</title>',
+        );
+        originalHead.children[0].should.not.equal(originalTitle);
+      });
+
+      it("skips the body of an equal document while still visiting the head", function () {
+        const calls = [];
+        const html =
+          "<html><head><title>Foo</title></head><body><p><b>x</b></p></body></html>";
+        const doc = parseHTML(html);
+        Idiomorph.morph(doc, html, {
+          skipUnchanged: true,
+          callbacks: recordingCallbacks(calls),
+        });
+        calls
+          .filter(
+            ([, label]) => label.startsWith("<p>") || label.startsWith("<b>"),
+          )
+          .should.eql([]);
+        calls
+          .some(([, label]) => label.startsWith("<head>"))
+          .should.equal(true);
+      });
+    });
+
+    describe("root shapes", function () {
+      it("scans string content (template fragment root without matches)", function () {
+        // the dirty input sits under an equal <p>, so only the pre-scan of the parsed
+        // fragment can stop the <p> from being skipped
+        const initial = make(`<div><p><input></p></div>`);
+        initial.querySelector("input").value = "typed";
+        Idiomorph.morph(initial, `<p><input></p>`, {
+          morphStyle: "innerHTML",
+          skipUnchanged: true,
+        });
+        initial.querySelector("input").value.should.equal("");
+      });
+
+      it("scans a new node that has siblings (SlicedParentNode root)", function () {
+        const initial = make(`<div><input value="a"></div>`);
+        const wrapper = make(
+          `<section><div><input value="a"></div><span></span></section>`,
+        );
+        const final = wrapper.firstElementChild;
+        final.querySelector("input").value = "b";
+        Idiomorph.morph(initial, final, { skipUnchanged: true });
+        initial.querySelector("input").value.should.equal("b");
+      });
+
+      it("checks the old root itself when it is a dirty control (outerHTML morph)", function () {
+        // the pre-scan must include the root: querySelectorAll excludes it
+        const attributeCalls = [];
+        const parent = make(`<div><input></div>`);
+        const input = parent.querySelector("input");
+        input.value = "typed";
+        Idiomorph.morph(input, `<input>`, {
+          skipUnchanged: true,
+          callbacks: {
+            // neutralise the skip-time re-check so only the pre-scan can catch this
+            beforeNodeMorphed: (oldNode) => {
+              if (oldNode.tagName === "INPUT") oldNode.value = "";
+            },
+            beforeAttributeUpdated: (name, node, type) => {
+              attributeCalls.push([name, type]);
+            },
+          },
+        });
+        // syncInputValue ran (it asks before removing the value attribute); a skip would never ask
+        attributeCalls.should.eql([["value", "remove"]]);
+      });
+    });
+
+    describe("interplay with other options", function () {
+      it("ignoreActive still wins over skipUnchanged", function () {
+        getWorkArea().append(make(`<div><input id="active" class="a"></div>`));
+        const input = document.getElementById("active");
+        input.focus();
+        input.value = "typed";
+        Idiomorph.morph(
+          getWorkArea(),
+          `<div><input id="active" class="b"></div>`,
+          { morphStyle: "innerHTML", skipUnchanged: true, ignoreActive: true },
+        );
+        input.getAttribute("class").should.equal("a");
+        input.value.should.equal("typed");
+      });
+    });
+
+    describe("sibling options coupled through implicit selection", function () {
+      it("selects the first option when a later option's explicit selection is removed", function () {
+        // neither option's own markup changes match isUnskippable's per-node check: the
+        // first option was never dirty, and the second option's own selectedness (now
+        // false either way) matches its own new-side default too. Only comparing the
+        // live `selected` property across the pair reveals that the first option's
+        // effective selectedness has changed as a side effect of the second option's
+        // attribute being removed.
+        const select = make(
+          `<select><option value="a">A</option><option value="b" selected>B</option></select>`,
+        );
+        Idiomorph.morph(
+          select,
+          `<select><option value="a">A</option><option value="b">B</option></select>`,
+          { skipUnchanged: true },
+        );
+        select.value.should.equal("a");
+        select.outerHTML.should.equal(
+          `<select><option value="a" selected="">A</option><option value="b">B</option></select>`,
+        );
+      });
+    });
   });
 });

From 9ae2772f96d1acf114cc83ce67850badd1307340 Mon Sep 17 00:00:00 2001
From: Alexander Brandon Coles <a.coles@openproject.com>
Date: Tue, 25 Aug 2026 20:23:46 -0800
Subject: [PATCH 04/12] let perf runs pass morph options

Needed to benchmark opt-in options such as skipUnchanged against a
version that predates them.
---
 PERFORMANCE.md   |  7 +++++++
 perf/runner.html |  3 ++-
 perf/runner.js   | 14 ++++++++++++--
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/PERFORMANCE.md b/PERFORMANCE.md
index 9ad3326..6d37de1 100644
--- a/PERFORMANCE.md
+++ b/PERFORMANCE.md
@@ -13,6 +13,7 @@ npm run perf [versus=morphdom] [benchmarks...]
 ### Arguments
 * The optional `versus` argument can be used to compare with morphdom (the default), previous Idiomorph releases specified by the git release tag, e.g. `v0.3.0`, or a path to a local `.js` file that defines `Idiomorph`.
 * The optional `benchmarks` argument can be used to run specific benchmarks, defaulting to all of them.
+* The optional `--options='<json>'` argument passes a config object to `Idiomorph.morph` in both runs, e.g. `--options='{"skipUnchanged":true}'`. A previous version that does not know the option ignores it, which makes this the way to measure an opt-in option against the code it replaces. Pass it after `--` so npm does not swallow it.
 
 Examples:
 Running only the `table` and `checkboxes` benchmarks against morphdom:
@@ -36,6 +37,12 @@ cp src/idiomorph.js tmp/before.js  # then edit src/idiomorph.js
 npm run perf tmp/before.js
 ```
 
+Measuring an opt-in option against the current code:
+```bash
+cp src/idiomorph.js tmp/before.js
+npm run perf -- tmp/before.js --options='{"skipUnchanged":true}'
+```
+
 ## Adding Benchmarks
 You can add more benchmarks by creating new `benchmark-name.old.html` and `benchmark-name.new.html` files in the `perf/benchmarks` directory, containing the starting and final morph HTML respectively.
 
diff --git a/perf/runner.html b/perf/runner.html
index 6f0ccf0..39c10cf 100644
--- a/perf/runner.html
+++ b/perf/runner.html
@@ -24,6 +24,7 @@
   const benchmark = params.get("benchmark");
   const startUrl = `/perf/benchmarks/${benchmark}.old.html`;
   const endUrl = `/perf/benchmarks/${benchmark}.new.html`;
+  const options = JSON.parse(params.get("options") || "{}");
 
   Promise.all([
     fetch(startUrl).then((r) => r.text()),
@@ -34,7 +35,7 @@
     if (params.get("using").includes("morphdom")) {
       morphdom(document.body.firstElementChild, end);
     } else {
-      Idiomorph.morph(document.body.firstElementChild, end);
+      Idiomorph.morph(document.body.firstElementChild, end, options);
     }
     bench.stop();
   });
diff --git a/perf/runner.js b/perf/runner.js
index 5f3463c..3981206 100755
--- a/perf/runner.js
+++ b/perf/runner.js
@@ -5,6 +5,16 @@ const path = require("path");
 
 let benchmarks = process.argv.slice(2);
 let versus;
+let options = "{}";
+
+benchmarks = benchmarks.filter((arg) => {
+  const match = arg.match(/^--options=(.*)$/);
+  if (match) {
+    options = match[1];
+    return false;
+  }
+  return true;
+});
 
 if (
   benchmarks[0] === "morphdom" ||
@@ -36,12 +46,12 @@ benchmarks.forEach((benchmark) => {
     benchmarks: [
       {
         name: `${benchmark}: ${versus}`,
-        url: `../perf/runner.html?using=${versus}&benchmark=${benchmark}`,
+        url: `../perf/runner.html?using=${versus}&benchmark=${benchmark}&options=${encodeURIComponent(options)}`,
         browser,
       },
       {
         name: `${benchmark}: src/idiomorph.js`,
-        url: `../perf/runner.html?using=idiomorph&benchmark=${benchmark}`,
+        url: `../perf/runner.html?using=idiomorph&benchmark=${benchmark}&options=${encodeURIComponent(options)}`,
         browser,
       },
     ],

From 2877691e34d058beaebeae339d900d5ff7ac0004 Mon Sep 17 00:00:00 2001
From: Alexander Brandon Coles <a.coles@openproject.com>
Date: Tue, 25 Aug 2026 20:32:43 -0800
Subject: [PATCH 05/12] add deep-last-leaf worst-case perf benchmark

---
 PERFORMANCE.md                          |    2 +
 perf/benchmarks/deep-last-leaf.new.html | 2522 +++++++++++++++++++++++
 perf/benchmarks/deep-last-leaf.old.html | 2522 +++++++++++++++++++++++
 perf/generate-deep-last-leaf.js         |   34 +
 4 files changed, 5080 insertions(+)
 create mode 100644 perf/benchmarks/deep-last-leaf.new.html
 create mode 100644 perf/benchmarks/deep-last-leaf.old.html
 create mode 100644 perf/generate-deep-last-leaf.js

diff --git a/PERFORMANCE.md b/PERFORMANCE.md
index 6d37de1..9b3eaaf 100644
--- a/PERFORMANCE.md
+++ b/PERFORMANCE.md
@@ -46,3 +46,5 @@ npm run perf -- tmp/before.js --options='{"skipUnchanged":true}'
 ## Adding Benchmarks
 You can add more benchmarks by creating new `benchmark-name.old.html` and `benchmark-name.new.html` files in the `perf/benchmarks` directory, containing the starting and final morph HTML respectively.
 
+`deep-last-leaf` is generated by `node perf/generate-deep-last-leaf.js` and is the deliberate worst case for the `skipUnchanged` option: every section changes, but only in its last and deepest text node, so every `isEqualNode` call walks a whole subtree before failing.
+
diff --git a/perf/benchmarks/deep-last-leaf.new.html b/perf/benchmarks/deep-last-leaf.new.html
new file mode 100644
index 0000000..2141550
--- /dev/null
+++ b/perf/benchmarks/deep-last-leaf.new.html
@@ -0,0 +1,2522 @@
+<main id="root">
+  <section id="section-0">
+    <div class="level-1">
+      <p class="filler">section 0 level 1 item 0</p>
+      <p class="filler">section 0 level 1 item 1</p>
+      <p class="filler">section 0 level 1 item 2</p>
+      <p class="filler">section 0 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 0 level 2 item 0</p>
+        <p class="filler">section 0 level 2 item 1</p>
+        <p class="filler">section 0 level 2 item 2</p>
+        <p class="filler">section 0 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 0 level 3 item 0</p>
+          <p class="filler">section 0 level 3 item 1</p>
+          <p class="filler">section 0 level 3 item 2</p>
+          <p class="filler">section 0 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 0 level 4 item 0</p>
+            <p class="filler">section 0 level 4 item 1</p>
+            <p class="filler">section 0 level 4 item 2</p>
+            <p class="filler">section 0 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 0 level 5 item 0</p>
+              <p class="filler">section 0 level 5 item 1</p>
+              <p class="filler">section 0 level 5 item 2</p>
+              <p class="filler">section 0 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 0 level 6 item 0</p>
+                <p class="filler">section 0 level 6 item 1</p>
+                <p class="filler">section 0 level 6 item 2</p>
+                <p class="filler">section 0 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 0 level 7 item 0</p>
+                  <p class="filler">section 0 level 7 item 1</p>
+                  <p class="filler">section 0 level 7 item 2</p>
+                  <p class="filler">section 0 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 0 level 8 item 0</p>
+                    <p class="filler">section 0 level 8 item 1</p>
+                    <p class="filler">section 0 level 8 item 2</p>
+                    <p class="filler">section 0 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 0 level 9 item 0</p>
+                      <p class="filler">section 0 level 9 item 1</p>
+                      <p class="filler">section 0 level 9 item 2</p>
+                      <p class="filler">section 0 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 0 level 10 item 0</p>
+                        <p class="filler">section 0 level 10 item 1</p>
+                        <p class="filler">section 0 level 10 item 2</p>
+                        <p class="filler">section 0 level 10 item 3</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-1">
+    <div class="level-1">
+      <p class="filler">section 1 level 1 item 0</p>
+      <p class="filler">section 1 level 1 item 1</p>
+      <p class="filler">section 1 level 1 item 2</p>
+      <p class="filler">section 1 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 1 level 2 item 0</p>
+        <p class="filler">section 1 level 2 item 1</p>
+        <p class="filler">section 1 level 2 item 2</p>
+        <p class="filler">section 1 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 1 level 3 item 0</p>
+          <p class="filler">section 1 level 3 item 1</p>
+          <p class="filler">section 1 level 3 item 2</p>
+          <p class="filler">section 1 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 1 level 4 item 0</p>
+            <p class="filler">section 1 level 4 item 1</p>
+            <p class="filler">section 1 level 4 item 2</p>
+            <p class="filler">section 1 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 1 level 5 item 0</p>
+              <p class="filler">section 1 level 5 item 1</p>
+              <p class="filler">section 1 level 5 item 2</p>
+              <p class="filler">section 1 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 1 level 6 item 0</p>
+                <p class="filler">section 1 level 6 item 1</p>
+                <p class="filler">section 1 level 6 item 2</p>
+                <p class="filler">section 1 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 1 level 7 item 0</p>
+                  <p class="filler">section 1 level 7 item 1</p>
+                  <p class="filler">section 1 level 7 item 2</p>
+                  <p class="filler">section 1 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 1 level 8 item 0</p>
+                    <p class="filler">section 1 level 8 item 1</p>
+                    <p class="filler">section 1 level 8 item 2</p>
+                    <p class="filler">section 1 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 1 level 9 item 0</p>
+                      <p class="filler">section 1 level 9 item 1</p>
+                      <p class="filler">section 1 level 9 item 2</p>
+                      <p class="filler">section 1 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 1 level 10 item 0</p>
+                        <p class="filler">section 1 level 10 item 1</p>
+                        <p class="filler">section 1 level 10 item 2</p>
+                        <p class="filler">section 1 level 10 item 3</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-2">
+    <div class="level-1">
+      <p class="filler">section 2 level 1 item 0</p>
+      <p class="filler">section 2 level 1 item 1</p>
+      <p class="filler">section 2 level 1 item 2</p>
+      <p class="filler">section 2 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 2 level 2 item 0</p>
+        <p class="filler">section 2 level 2 item 1</p>
+        <p class="filler">section 2 level 2 item 2</p>
+        <p class="filler">section 2 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 2 level 3 item 0</p>
+          <p class="filler">section 2 level 3 item 1</p>
+          <p class="filler">section 2 level 3 item 2</p>
+          <p class="filler">section 2 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 2 level 4 item 0</p>
+            <p class="filler">section 2 level 4 item 1</p>
+            <p class="filler">section 2 level 4 item 2</p>
+            <p class="filler">section 2 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 2 level 5 item 0</p>
+              <p class="filler">section 2 level 5 item 1</p>
+              <p class="filler">section 2 level 5 item 2</p>
+              <p class="filler">section 2 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 2 level 6 item 0</p>
+                <p class="filler">section 2 level 6 item 1</p>
+                <p class="filler">section 2 level 6 item 2</p>
+                <p class="filler">section 2 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 2 level 7 item 0</p>
+                  <p class="filler">section 2 level 7 item 1</p>
+                  <p class="filler">section 2 level 7 item 2</p>
+                  <p class="filler">section 2 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 2 level 8 item 0</p>
+                    <p class="filler">section 2 level 8 item 1</p>
+                    <p class="filler">section 2 level 8 item 2</p>
+                    <p class="filler">section 2 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 2 level 9 item 0</p>
+                      <p class="filler">section 2 level 9 item 1</p>
+                      <p class="filler">section 2 level 9 item 2</p>
+                      <p class="filler">section 2 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 2 level 10 item 0</p>
+                        <p class="filler">section 2 level 10 item 1</p>
+                        <p class="filler">section 2 level 10 item 2</p>
+                        <p class="filler">section 2 level 10 item 3</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-3">
+    <div class="level-1">
+      <p class="filler">section 3 level 1 item 0</p>
+      <p class="filler">section 3 level 1 item 1</p>
+      <p class="filler">section 3 level 1 item 2</p>
+      <p class="filler">section 3 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 3 level 2 item 0</p>
+        <p class="filler">section 3 level 2 item 1</p>
+        <p class="filler">section 3 level 2 item 2</p>
+        <p class="filler">section 3 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 3 level 3 item 0</p>
+          <p class="filler">section 3 level 3 item 1</p>
+          <p class="filler">section 3 level 3 item 2</p>
+          <p class="filler">section 3 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 3 level 4 item 0</p>
+            <p class="filler">section 3 level 4 item 1</p>
+            <p class="filler">section 3 level 4 item 2</p>
+            <p class="filler">section 3 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 3 level 5 item 0</p>
+              <p class="filler">section 3 level 5 item 1</p>
+              <p class="filler">section 3 level 5 item 2</p>
+              <p class="filler">section 3 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 3 level 6 item 0</p>
+                <p class="filler">section 3 level 6 item 1</p>
+                <p class="filler">section 3 level 6 item 2</p>
+                <p class="filler">section 3 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 3 level 7 item 0</p>
+                  <p class="filler">section 3 level 7 item 1</p>
+                  <p class="filler">section 3 level 7 item 2</p>
+                  <p class="filler">section 3 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 3 level 8 item 0</p>
+                    <p class="filler">section 3 level 8 item 1</p>
+                    <p class="filler">section 3 level 8 item 2</p>
+                    <p class="filler">section 3 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 3 level 9 item 0</p>
+                      <p class="filler">section 3 level 9 item 1</p>
+                      <p class="filler">section 3 level 9 item 2</p>
+                      <p class="filler">section 3 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 3 level 10 item 0</p>
+                        <p class="filler">section 3 level 10 item 1</p>
+                        <p class="filler">section 3 level 10 item 2</p>
+                        <p class="filler">section 3 level 10 item 3</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-4">
+    <div class="level-1">
+      <p class="filler">section 4 level 1 item 0</p>
+      <p class="filler">section 4 level 1 item 1</p>
+      <p class="filler">section 4 level 1 item 2</p>
+      <p class="filler">section 4 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 4 level 2 item 0</p>
+        <p class="filler">section 4 level 2 item 1</p>
+        <p class="filler">section 4 level 2 item 2</p>
+        <p class="filler">section 4 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 4 level 3 item 0</p>
+          <p class="filler">section 4 level 3 item 1</p>
+          <p class="filler">section 4 level 3 item 2</p>
+          <p class="filler">section 4 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 4 level 4 item 0</p>
+            <p class="filler">section 4 level 4 item 1</p>
+            <p class="filler">section 4 level 4 item 2</p>
+            <p class="filler">section 4 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 4 level 5 item 0</p>
+              <p class="filler">section 4 level 5 item 1</p>
+              <p class="filler">section 4 level 5 item 2</p>
+              <p class="filler">section 4 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 4 level 6 item 0</p>
+                <p class="filler">section 4 level 6 item 1</p>
+                <p class="filler">section 4 level 6 item 2</p>
+                <p class="filler">section 4 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 4 level 7 item 0</p>
+                  <p class="filler">section 4 level 7 item 1</p>
+                  <p class="filler">section 4 level 7 item 2</p>
+                  <p class="filler">section 4 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 4 level 8 item 0</p>
+                    <p class="filler">section 4 level 8 item 1</p>
+                    <p class="filler">section 4 level 8 item 2</p>
+                    <p class="filler">section 4 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 4 level 9 item 0</p>
+                      <p class="filler">section 4 level 9 item 1</p>
+                      <p class="filler">section 4 level 9 item 2</p>
+                      <p class="filler">section 4 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 4 level 10 item 0</p>
+                        <p class="filler">section 4 level 10 item 1</p>
+                        <p class="filler">section 4 level 10 item 2</p>
+                        <p class="filler">section 4 level 10 item 3</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-5">
+    <div class="level-1">
+      <p class="filler">section 5 level 1 item 0</p>
+      <p class="filler">section 5 level 1 item 1</p>
+      <p class="filler">section 5 level 1 item 2</p>
+      <p class="filler">section 5 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 5 level 2 item 0</p>
+        <p class="filler">section 5 level 2 item 1</p>
+        <p class="filler">section 5 level 2 item 2</p>
+        <p class="filler">section 5 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 5 level 3 item 0</p>
+          <p class="filler">section 5 level 3 item 1</p>
+          <p class="filler">section 5 level 3 item 2</p>
+          <p class="filler">section 5 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 5 level 4 item 0</p>
+            <p class="filler">section 5 level 4 item 1</p>
+            <p class="filler">section 5 level 4 item 2</p>
+            <p class="filler">section 5 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 5 level 5 item 0</p>
+              <p class="filler">section 5 level 5 item 1</p>
+              <p class="filler">section 5 level 5 item 2</p>
+              <p class="filler">section 5 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 5 level 6 item 0</p>
+                <p class="filler">section 5 level 6 item 1</p>
+                <p class="filler">section 5 level 6 item 2</p>
+                <p class="filler">section 5 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 5 level 7 item 0</p>
+                  <p class="filler">section 5 level 7 item 1</p>
+                  <p class="filler">section 5 level 7 item 2</p>
+                  <p class="filler">section 5 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 5 level 8 item 0</p>
+                    <p class="filler">section 5 level 8 item 1</p>
+                    <p class="filler">section 5 level 8 item 2</p>
+                    <p class="filler">section 5 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 5 level 9 item 0</p>
+                      <p class="filler">section 5 level 9 item 1</p>
+                      <p class="filler">section 5 level 9 item 2</p>
+                      <p class="filler">section 5 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 5 level 10 item 0</p>
+                        <p class="filler">section 5 level 10 item 1</p>
+                        <p class="filler">section 5 level 10 item 2</p>
+                        <p class="filler">section 5 level 10 item 3</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-6">
+    <div class="level-1">
+      <p class="filler">section 6 level 1 item 0</p>
+      <p class="filler">section 6 level 1 item 1</p>
+      <p class="filler">section 6 level 1 item 2</p>
+      <p class="filler">section 6 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 6 level 2 item 0</p>
+        <p class="filler">section 6 level 2 item 1</p>
+        <p class="filler">section 6 level 2 item 2</p>
+        <p class="filler">section 6 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 6 level 3 item 0</p>
+          <p class="filler">section 6 level 3 item 1</p>
+          <p class="filler">section 6 level 3 item 2</p>
+          <p class="filler">section 6 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 6 level 4 item 0</p>
+            <p class="filler">section 6 level 4 item 1</p>
+            <p class="filler">section 6 level 4 item 2</p>
+            <p class="filler">section 6 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 6 level 5 item 0</p>
+              <p class="filler">section 6 level 5 item 1</p>
+              <p class="filler">section 6 level 5 item 2</p>
+              <p class="filler">section 6 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 6 level 6 item 0</p>
+                <p class="filler">section 6 level 6 item 1</p>
+                <p class="filler">section 6 level 6 item 2</p>
+                <p class="filler">section 6 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 6 level 7 item 0</p>
+                  <p class="filler">section 6 level 7 item 1</p>
+                  <p class="filler">section 6 level 7 item 2</p>
+                  <p class="filler">section 6 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 6 level 8 item 0</p>
+                    <p class="filler">section 6 level 8 item 1</p>
+                    <p class="filler">section 6 level 8 item 2</p>
+                    <p class="filler">section 6 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 6 level 9 item 0</p>
+                      <p class="filler">section 6 level 9 item 1</p>
+                      <p class="filler">section 6 level 9 item 2</p>
+                      <p class="filler">section 6 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 6 level 10 item 0</p>
+                        <p class="filler">section 6 level 10 item 1</p>
+                        <p class="filler">section 6 level 10 item 2</p>
+                        <p class="filler">section 6 level 10 item 3</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-7">
+    <div class="level-1">
+      <p class="filler">section 7 level 1 item 0</p>
+      <p class="filler">section 7 level 1 item 1</p>
+      <p class="filler">section 7 level 1 item 2</p>
+      <p class="filler">section 7 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 7 level 2 item 0</p>
+        <p class="filler">section 7 level 2 item 1</p>
+        <p class="filler">section 7 level 2 item 2</p>
+        <p class="filler">section 7 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 7 level 3 item 0</p>
+          <p class="filler">section 7 level 3 item 1</p>
+          <p class="filler">section 7 level 3 item 2</p>
+          <p class="filler">section 7 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 7 level 4 item 0</p>
+            <p class="filler">section 7 level 4 item 1</p>
+            <p class="filler">section 7 level 4 item 2</p>
+            <p class="filler">section 7 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 7 level 5 item 0</p>
+              <p class="filler">section 7 level 5 item 1</p>
+              <p class="filler">section 7 level 5 item 2</p>
+              <p class="filler">section 7 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 7 level 6 item 0</p>
+                <p class="filler">section 7 level 6 item 1</p>
+                <p class="filler">section 7 level 6 item 2</p>
+                <p class="filler">section 7 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 7 level 7 item 0</p>
+                  <p class="filler">section 7 level 7 item 1</p>
+                  <p class="filler">section 7 level 7 item 2</p>
+                  <p class="filler">section 7 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 7 level 8 item 0</p>
+                    <p class="filler">section 7 level 8 item 1</p>
+                    <p class="filler">section 7 level 8 item 2</p>
+                    <p class="filler">section 7 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 7 level 9 item 0</p>
+                      <p class="filler">section 7 level 9 item 1</p>
+                      <p class="filler">section 7 level 9 item 2</p>
+                      <p class="filler">section 7 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 7 level 10 item 0</p>
+                        <p class="filler">section 7 level 10 item 1</p>
+                        <p class="filler">section 7 level 10 item 2</p>
+                        <p class="filler">section 7 level 10 item 3</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-8">
+    <div class="level-1">
+      <p class="filler">section 8 level 1 item 0</p>
+      <p class="filler">section 8 level 1 item 1</p>
+      <p class="filler">section 8 level 1 item 2</p>
+      <p class="filler">section 8 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 8 level 2 item 0</p>
+        <p class="filler">section 8 level 2 item 1</p>
+        <p class="filler">section 8 level 2 item 2</p>
+        <p class="filler">section 8 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 8 level 3 item 0</p>
+          <p class="filler">section 8 level 3 item 1</p>
+          <p class="filler">section 8 level 3 item 2</p>
+          <p class="filler">section 8 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 8 level 4 item 0</p>
+            <p class="filler">section 8 level 4 item 1</p>
+            <p class="filler">section 8 level 4 item 2</p>
+            <p class="filler">section 8 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 8 level 5 item 0</p>
+              <p class="filler">section 8 level 5 item 1</p>
+              <p class="filler">section 8 level 5 item 2</p>
+              <p class="filler">section 8 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 8 level 6 item 0</p>
+                <p class="filler">section 8 level 6 item 1</p>
+                <p class="filler">section 8 level 6 item 2</p>
+                <p class="filler">section 8 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 8 level 7 item 0</p>
+                  <p class="filler">section 8 level 7 item 1</p>
+                  <p class="filler">section 8 level 7 item 2</p>
+                  <p class="filler">section 8 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 8 level 8 item 0</p>
+                    <p class="filler">section 8 level 8 item 1</p>
+                    <p class="filler">section 8 level 8 item 2</p>
+                    <p class="filler">section 8 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 8 level 9 item 0</p>
+                      <p class="filler">section 8 level 9 item 1</p>
+                      <p class="filler">section 8 level 9 item 2</p>
+                      <p class="filler">section 8 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 8 level 10 item 0</p>
+                        <p class="filler">section 8 level 10 item 1</p>
+                        <p class="filler">section 8 level 10 item 2</p>
+                        <p class="filler">section 8 level 10 item 3</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-9">
+    <div class="level-1">
+      <p class="filler">section 9 level 1 item 0</p>
+      <p class="filler">section 9 level 1 item 1</p>
+      <p class="filler">section 9 level 1 item 2</p>
+      <p class="filler">section 9 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 9 level 2 item 0</p>
+        <p class="filler">section 9 level 2 item 1</p>
+        <p class="filler">section 9 level 2 item 2</p>
+        <p class="filler">section 9 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 9 level 3 item 0</p>
+          <p class="filler">section 9 level 3 item 1</p>
+          <p class="filler">section 9 level 3 item 2</p>
+          <p class="filler">section 9 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 9 level 4 item 0</p>
+            <p class="filler">section 9 level 4 item 1</p>
+            <p class="filler">section 9 level 4 item 2</p>
+            <p class="filler">section 9 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 9 level 5 item 0</p>
+              <p class="filler">section 9 level 5 item 1</p>
+              <p class="filler">section 9 level 5 item 2</p>
+              <p class="filler">section 9 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 9 level 6 item 0</p>
+                <p class="filler">section 9 level 6 item 1</p>
+                <p class="filler">section 9 level 6 item 2</p>
+                <p class="filler">section 9 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 9 level 7 item 0</p>
+                  <p class="filler">section 9 level 7 item 1</p>
+                  <p class="filler">section 9 level 7 item 2</p>
+                  <p class="filler">section 9 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 9 level 8 item 0</p>
+                    <p class="filler">section 9 level 8 item 1</p>
+                    <p class="filler">section 9 level 8 item 2</p>
+                    <p class="filler">section 9 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 9 level 9 item 0</p>
+                      <p class="filler">section 9 level 9 item 1</p>
+                      <p class="filler">section 9 level 9 item 2</p>
+                      <p class="filler">section 9 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 9 level 10 item 0</p>
+                        <p class="filler">section 9 level 10 item 1</p>
+                        <p class="filler">section 9 level 10 item 2</p>
+                        <p class="filler">section 9 level 10 item 3</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-10">
+    <div class="level-1">
+      <p class="filler">section 10 level 1 item 0</p>
+      <p class="filler">section 10 level 1 item 1</p>
+      <p class="filler">section 10 level 1 item 2</p>
+      <p class="filler">section 10 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 10 level 2 item 0</p>
+        <p class="filler">section 10 level 2 item 1</p>
+        <p class="filler">section 10 level 2 item 2</p>
+        <p class="filler">section 10 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 10 level 3 item 0</p>
+          <p class="filler">section 10 level 3 item 1</p>
+          <p class="filler">section 10 level 3 item 2</p>
+          <p class="filler">section 10 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 10 level 4 item 0</p>
+            <p class="filler">section 10 level 4 item 1</p>
+            <p class="filler">section 10 level 4 item 2</p>
+            <p class="filler">section 10 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 10 level 5 item 0</p>
+              <p class="filler">section 10 level 5 item 1</p>
+              <p class="filler">section 10 level 5 item 2</p>
+              <p class="filler">section 10 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 10 level 6 item 0</p>
+                <p class="filler">section 10 level 6 item 1</p>
+                <p class="filler">section 10 level 6 item 2</p>
+                <p class="filler">section 10 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 10 level 7 item 0</p>
+                  <p class="filler">section 10 level 7 item 1</p>
+                  <p class="filler">section 10 level 7 item 2</p>
+                  <p class="filler">section 10 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 10 level 8 item 0</p>
+                    <p class="filler">section 10 level 8 item 1</p>
+                    <p class="filler">section 10 level 8 item 2</p>
+                    <p class="filler">section 10 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 10 level 9 item 0</p>
+                      <p class="filler">section 10 level 9 item 1</p>
+                      <p class="filler">section 10 level 9 item 2</p>
+                      <p class="filler">section 10 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 10 level 10 item 0</p>
+                        <p class="filler">section 10 level 10 item 1</p>
+                        <p class="filler">section 10 level 10 item 2</p>
+                        <p class="filler">section 10 level 10 item 3</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-11">
+    <div class="level-1">
+      <p class="filler">section 11 level 1 item 0</p>
+      <p class="filler">section 11 level 1 item 1</p>
+      <p class="filler">section 11 level 1 item 2</p>
+      <p class="filler">section 11 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 11 level 2 item 0</p>
+        <p class="filler">section 11 level 2 item 1</p>
+        <p class="filler">section 11 level 2 item 2</p>
+        <p class="filler">section 11 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 11 level 3 item 0</p>
+          <p class="filler">section 11 level 3 item 1</p>
+          <p class="filler">section 11 level 3 item 2</p>
+          <p class="filler">section 11 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 11 level 4 item 0</p>
+            <p class="filler">section 11 level 4 item 1</p>
+            <p class="filler">section 11 level 4 item 2</p>
+            <p class="filler">section 11 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 11 level 5 item 0</p>
+              <p class="filler">section 11 level 5 item 1</p>
+              <p class="filler">section 11 level 5 item 2</p>
+              <p class="filler">section 11 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 11 level 6 item 0</p>
+                <p class="filler">section 11 level 6 item 1</p>
+                <p class="filler">section 11 level 6 item 2</p>
+                <p class="filler">section 11 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 11 level 7 item 0</p>
+                  <p class="filler">section 11 level 7 item 1</p>
+                  <p class="filler">section 11 level 7 item 2</p>
+                  <p class="filler">section 11 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 11 level 8 item 0</p>
+                    <p class="filler">section 11 level 8 item 1</p>
+                    <p class="filler">section 11 level 8 item 2</p>
+                    <p class="filler">section 11 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 11 level 9 item 0</p>
+                      <p class="filler">section 11 level 9 item 1</p>
+                      <p class="filler">section 11 level 9 item 2</p>
+                      <p class="filler">section 11 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 11 level 10 item 0</p>
+                        <p class="filler">section 11 level 10 item 1</p>
+                        <p class="filler">section 11 level 10 item 2</p>
+                        <p class="filler">section 11 level 10 item 3</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-12">
+    <div class="level-1">
+      <p class="filler">section 12 level 1 item 0</p>
+      <p class="filler">section 12 level 1 item 1</p>
+      <p class="filler">section 12 level 1 item 2</p>
+      <p class="filler">section 12 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 12 level 2 item 0</p>
+        <p class="filler">section 12 level 2 item 1</p>
+        <p class="filler">section 12 level 2 item 2</p>
+        <p class="filler">section 12 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 12 level 3 item 0</p>
+          <p class="filler">section 12 level 3 item 1</p>
+          <p class="filler">section 12 level 3 item 2</p>
+          <p class="filler">section 12 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 12 level 4 item 0</p>
+            <p class="filler">section 12 level 4 item 1</p>
+            <p class="filler">section 12 level 4 item 2</p>
+            <p class="filler">section 12 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 12 level 5 item 0</p>
+              <p class="filler">section 12 level 5 item 1</p>
+              <p class="filler">section 12 level 5 item 2</p>
+              <p class="filler">section 12 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 12 level 6 item 0</p>
+                <p class="filler">section 12 level 6 item 1</p>
+                <p class="filler">section 12 level 6 item 2</p>
+                <p class="filler">section 12 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 12 level 7 item 0</p>
+                  <p class="filler">section 12 level 7 item 1</p>
+                  <p class="filler">section 12 level 7 item 2</p>
+                  <p class="filler">section 12 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 12 level 8 item 0</p>
+                    <p class="filler">section 12 level 8 item 1</p>
+                    <p class="filler">section 12 level 8 item 2</p>
+                    <p class="filler">section 12 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 12 level 9 item 0</p>
+                      <p class="filler">section 12 level 9 item 1</p>
+                      <p class="filler">section 12 level 9 item 2</p>
+                      <p class="filler">section 12 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 12 level 10 item 0</p>
+                        <p class="filler">section 12 level 10 item 1</p>
+                        <p class="filler">section 12 level 10 item 2</p>
+                        <p class="filler">section 12 level 10 item 3</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-13">
+    <div class="level-1">
+      <p class="filler">section 13 level 1 item 0</p>
+      <p class="filler">section 13 level 1 item 1</p>
+      <p class="filler">section 13 level 1 item 2</p>
+      <p class="filler">section 13 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 13 level 2 item 0</p>
+        <p class="filler">section 13 level 2 item 1</p>
+        <p class="filler">section 13 level 2 item 2</p>
+        <p class="filler">section 13 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 13 level 3 item 0</p>
+          <p class="filler">section 13 level 3 item 1</p>
+          <p class="filler">section 13 level 3 item 2</p>
+          <p class="filler">section 13 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 13 level 4 item 0</p>
+            <p class="filler">section 13 level 4 item 1</p>
+            <p class="filler">section 13 level 4 item 2</p>
+            <p class="filler">section 13 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 13 level 5 item 0</p>
+              <p class="filler">section 13 level 5 item 1</p>
+              <p class="filler">section 13 level 5 item 2</p>
+              <p class="filler">section 13 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 13 level 6 item 0</p>
+                <p class="filler">section 13 level 6 item 1</p>
+                <p class="filler">section 13 level 6 item 2</p>
+                <p class="filler">section 13 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 13 level 7 item 0</p>
+                  <p class="filler">section 13 level 7 item 1</p>
+                  <p class="filler">section 13 level 7 item 2</p>
+                  <p class="filler">section 13 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 13 level 8 item 0</p>
+                    <p class="filler">section 13 level 8 item 1</p>
+                    <p class="filler">section 13 level 8 item 2</p>
+                    <p class="filler">section 13 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 13 level 9 item 0</p>
+                      <p class="filler">section 13 level 9 item 1</p>
+                      <p class="filler">section 13 level 9 item 2</p>
+                      <p class="filler">section 13 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 13 level 10 item 0</p>
+                        <p class="filler">section 13 level 10 item 1</p>
+                        <p class="filler">section 13 level 10 item 2</p>
+                        <p class="filler">section 13 level 10 item 3</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-14">
+    <div class="level-1">
+      <p class="filler">section 14 level 1 item 0</p>
+      <p class="filler">section 14 level 1 item 1</p>
+      <p class="filler">section 14 level 1 item 2</p>
+      <p class="filler">section 14 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 14 level 2 item 0</p>
+        <p class="filler">section 14 level 2 item 1</p>
+        <p class="filler">section 14 level 2 item 2</p>
+        <p class="filler">section 14 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 14 level 3 item 0</p>
+          <p class="filler">section 14 level 3 item 1</p>
+          <p class="filler">section 14 level 3 item 2</p>
+          <p class="filler">section 14 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 14 level 4 item 0</p>
+            <p class="filler">section 14 level 4 item 1</p>
+            <p class="filler">section 14 level 4 item 2</p>
+            <p class="filler">section 14 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 14 level 5 item 0</p>
+              <p class="filler">section 14 level 5 item 1</p>
+              <p class="filler">section 14 level 5 item 2</p>
+              <p class="filler">section 14 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 14 level 6 item 0</p>
+                <p class="filler">section 14 level 6 item 1</p>
+                <p class="filler">section 14 level 6 item 2</p>
+                <p class="filler">section 14 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 14 level 7 item 0</p>
+                  <p class="filler">section 14 level 7 item 1</p>
+                  <p class="filler">section 14 level 7 item 2</p>
+                  <p class="filler">section 14 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 14 level 8 item 0</p>
+                    <p class="filler">section 14 level 8 item 1</p>
+                    <p class="filler">section 14 level 8 item 2</p>
+                    <p class="filler">section 14 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 14 level 9 item 0</p>
+                      <p class="filler">section 14 level 9 item 1</p>
+                      <p class="filler">section 14 level 9 item 2</p>
+                      <p class="filler">section 14 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 14 level 10 item 0</p>
+                        <p class="filler">section 14 level 10 item 1</p>
+                        <p class="filler">section 14 level 10 item 2</p>
+                        <p class="filler">section 14 level 10 item 3</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-15">
+    <div class="level-1">
+      <p class="filler">section 15 level 1 item 0</p>
+      <p class="filler">section 15 level 1 item 1</p>
+      <p class="filler">section 15 level 1 item 2</p>
+      <p class="filler">section 15 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 15 level 2 item 0</p>
+        <p class="filler">section 15 level 2 item 1</p>
+        <p class="filler">section 15 level 2 item 2</p>
+        <p class="filler">section 15 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 15 level 3 item 0</p>
+          <p class="filler">section 15 level 3 item 1</p>
+          <p class="filler">section 15 level 3 item 2</p>
+          <p class="filler">section 15 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 15 level 4 item 0</p>
+            <p class="filler">section 15 level 4 item 1</p>
+            <p class="filler">section 15 level 4 item 2</p>
+            <p class="filler">section 15 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 15 level 5 item 0</p>
+              <p class="filler">section 15 level 5 item 1</p>
+              <p class="filler">section 15 level 5 item 2</p>
+              <p class="filler">section 15 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 15 level 6 item 0</p>
+                <p class="filler">section 15 level 6 item 1</p>
+                <p class="filler">section 15 level 6 item 2</p>
+                <p class="filler">section 15 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 15 level 7 item 0</p>
+                  <p class="filler">section 15 level 7 item 1</p>
+                  <p class="filler">section 15 level 7 item 2</p>
+                  <p class="filler">section 15 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 15 level 8 item 0</p>
+                    <p class="filler">section 15 level 8 item 1</p>
+                    <p class="filler">section 15 level 8 item 2</p>
+                    <p class="filler">section 15 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 15 level 9 item 0</p>
+                      <p class="filler">section 15 level 9 item 1</p>
+                      <p class="filler">section 15 level 9 item 2</p>
+                      <p class="filler">section 15 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 15 level 10 item 0</p>
+                        <p class="filler">section 15 level 10 item 1</p>
+                        <p class="filler">section 15 level 10 item 2</p>
+                        <p class="filler">section 15 level 10 item 3</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-16">
+    <div class="level-1">
+      <p class="filler">section 16 level 1 item 0</p>
+      <p class="filler">section 16 level 1 item 1</p>
+      <p class="filler">section 16 level 1 item 2</p>
+      <p class="filler">section 16 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 16 level 2 item 0</p>
+        <p class="filler">section 16 level 2 item 1</p>
+        <p class="filler">section 16 level 2 item 2</p>
+        <p class="filler">section 16 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 16 level 3 item 0</p>
+          <p class="filler">section 16 level 3 item 1</p>
+          <p class="filler">section 16 level 3 item 2</p>
+          <p class="filler">section 16 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 16 level 4 item 0</p>
+            <p class="filler">section 16 level 4 item 1</p>
+            <p class="filler">section 16 level 4 item 2</p>
+            <p class="filler">section 16 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 16 level 5 item 0</p>
+              <p class="filler">section 16 level 5 item 1</p>
+              <p class="filler">section 16 level 5 item 2</p>
+              <p class="filler">section 16 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 16 level 6 item 0</p>
+                <p class="filler">section 16 level 6 item 1</p>
+                <p class="filler">section 16 level 6 item 2</p>
+                <p class="filler">section 16 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 16 level 7 item 0</p>
+                  <p class="filler">section 16 level 7 item 1</p>
+                  <p class="filler">section 16 level 7 item 2</p>
+                  <p class="filler">section 16 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 16 level 8 item 0</p>
+                    <p class="filler">section 16 level 8 item 1</p>
+                    <p class="filler">section 16 level 8 item 2</p>
+                    <p class="filler">section 16 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 16 level 9 item 0</p>
+                      <p class="filler">section 16 level 9 item 1</p>
+                      <p class="filler">section 16 level 9 item 2</p>
+                      <p class="filler">section 16 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 16 level 10 item 0</p>
+                        <p class="filler">section 16 level 10 item 1</p>
+                        <p class="filler">section 16 level 10 item 2</p>
+                        <p class="filler">section 16 level 10 item 3</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-17">
+    <div class="level-1">
+      <p class="filler">section 17 level 1 item 0</p>
+      <p class="filler">section 17 level 1 item 1</p>
+      <p class="filler">section 17 level 1 item 2</p>
+      <p class="filler">section 17 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 17 level 2 item 0</p>
+        <p class="filler">section 17 level 2 item 1</p>
+        <p class="filler">section 17 level 2 item 2</p>
+        <p class="filler">section 17 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 17 level 3 item 0</p>
+          <p class="filler">section 17 level 3 item 1</p>
+          <p class="filler">section 17 level 3 item 2</p>
+          <p class="filler">section 17 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 17 level 4 item 0</p>
+            <p class="filler">section 17 level 4 item 1</p>
+            <p class="filler">section 17 level 4 item 2</p>
+            <p class="filler">section 17 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 17 level 5 item 0</p>
+              <p class="filler">section 17 level 5 item 1</p>
+              <p class="filler">section 17 level 5 item 2</p>
+              <p class="filler">section 17 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 17 level 6 item 0</p>
+                <p class="filler">section 17 level 6 item 1</p>
+                <p class="filler">section 17 level 6 item 2</p>
+                <p class="filler">section 17 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 17 level 7 item 0</p>
+                  <p class="filler">section 17 level 7 item 1</p>
+                  <p class="filler">section 17 level 7 item 2</p>
+                  <p class="filler">section 17 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 17 level 8 item 0</p>
+                    <p class="filler">section 17 level 8 item 1</p>
+                    <p class="filler">section 17 level 8 item 2</p>
+                    <p class="filler">section 17 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 17 level 9 item 0</p>
+                      <p class="filler">section 17 level 9 item 1</p>
+                      <p class="filler">section 17 level 9 item 2</p>
+                      <p class="filler">section 17 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 17 level 10 item 0</p>
+                        <p class="filler">section 17 level 10 item 1</p>
+                        <p class="filler">section 17 level 10 item 2</p>
+                        <p class="filler">section 17 level 10 item 3</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-18">
+    <div class="level-1">
+      <p class="filler">section 18 level 1 item 0</p>
+      <p class="filler">section 18 level 1 item 1</p>
+      <p class="filler">section 18 level 1 item 2</p>
+      <p class="filler">section 18 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 18 level 2 item 0</p>
+        <p class="filler">section 18 level 2 item 1</p>
+        <p class="filler">section 18 level 2 item 2</p>
+        <p class="filler">section 18 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 18 level 3 item 0</p>
+          <p class="filler">section 18 level 3 item 1</p>
+          <p class="filler">section 18 level 3 item 2</p>
+          <p class="filler">section 18 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 18 level 4 item 0</p>
+            <p class="filler">section 18 level 4 item 1</p>
+            <p class="filler">section 18 level 4 item 2</p>
+            <p class="filler">section 18 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 18 level 5 item 0</p>
+              <p class="filler">section 18 level 5 item 1</p>
+              <p class="filler">section 18 level 5 item 2</p>
+              <p class="filler">section 18 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 18 level 6 item 0</p>
+                <p class="filler">section 18 level 6 item 1</p>
+                <p class="filler">section 18 level 6 item 2</p>
+                <p class="filler">section 18 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 18 level 7 item 0</p>
+                  <p class="filler">section 18 level 7 item 1</p>
+                  <p class="filler">section 18 level 7 item 2</p>
+                  <p class="filler">section 18 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 18 level 8 item 0</p>
+                    <p class="filler">section 18 level 8 item 1</p>
+                    <p class="filler">section 18 level 8 item 2</p>
+                    <p class="filler">section 18 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 18 level 9 item 0</p>
+                      <p class="filler">section 18 level 9 item 1</p>
+                      <p class="filler">section 18 level 9 item 2</p>
+                      <p class="filler">section 18 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 18 level 10 item 0</p>
+                        <p class="filler">section 18 level 10 item 1</p>
+                        <p class="filler">section 18 level 10 item 2</p>
+                        <p class="filler">section 18 level 10 item 3</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-19">
+    <div class="level-1">
+      <p class="filler">section 19 level 1 item 0</p>
+      <p class="filler">section 19 level 1 item 1</p>
+      <p class="filler">section 19 level 1 item 2</p>
+      <p class="filler">section 19 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 19 level 2 item 0</p>
+        <p class="filler">section 19 level 2 item 1</p>
+        <p class="filler">section 19 level 2 item 2</p>
+        <p class="filler">section 19 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 19 level 3 item 0</p>
+          <p class="filler">section 19 level 3 item 1</p>
+          <p class="filler">section 19 level 3 item 2</p>
+          <p class="filler">section 19 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 19 level 4 item 0</p>
+            <p class="filler">section 19 level 4 item 1</p>
+            <p class="filler">section 19 level 4 item 2</p>
+            <p class="filler">section 19 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 19 level 5 item 0</p>
+              <p class="filler">section 19 level 5 item 1</p>
+              <p class="filler">section 19 level 5 item 2</p>
+              <p class="filler">section 19 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 19 level 6 item 0</p>
+                <p class="filler">section 19 level 6 item 1</p>
+                <p class="filler">section 19 level 6 item 2</p>
+                <p class="filler">section 19 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 19 level 7 item 0</p>
+                  <p class="filler">section 19 level 7 item 1</p>
+                  <p class="filler">section 19 level 7 item 2</p>
+                  <p class="filler">section 19 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 19 level 8 item 0</p>
+                    <p class="filler">section 19 level 8 item 1</p>
+                    <p class="filler">section 19 level 8 item 2</p>
+                    <p class="filler">section 19 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 19 level 9 item 0</p>
+                      <p class="filler">section 19 level 9 item 1</p>
+                      <p class="filler">section 19 level 9 item 2</p>
+                      <p class="filler">section 19 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 19 level 10 item 0</p>
+                        <p class="filler">section 19 level 10 item 1</p>
+                        <p class="filler">section 19 level 10 item 2</p>
+                        <p class="filler">section 19 level 10 item 3</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-20">
+    <div class="level-1">
+      <p class="filler">section 20 level 1 item 0</p>
+      <p class="filler">section 20 level 1 item 1</p>
+      <p class="filler">section 20 level 1 item 2</p>
+      <p class="filler">section 20 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 20 level 2 item 0</p>
+        <p class="filler">section 20 level 2 item 1</p>
+        <p class="filler">section 20 level 2 item 2</p>
+        <p class="filler">section 20 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 20 level 3 item 0</p>
+          <p class="filler">section 20 level 3 item 1</p>
+          <p class="filler">section 20 level 3 item 2</p>
+          <p class="filler">section 20 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 20 level 4 item 0</p>
+            <p class="filler">section 20 level 4 item 1</p>
+            <p class="filler">section 20 level 4 item 2</p>
+            <p class="filler">section 20 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 20 level 5 item 0</p>
+              <p class="filler">section 20 level 5 item 1</p>
+              <p class="filler">section 20 level 5 item 2</p>
+              <p class="filler">section 20 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 20 level 6 item 0</p>
+                <p class="filler">section 20 level 6 item 1</p>
+                <p class="filler">section 20 level 6 item 2</p>
+                <p class="filler">section 20 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 20 level 7 item 0</p>
+                  <p class="filler">section 20 level 7 item 1</p>
+                  <p class="filler">section 20 level 7 item 2</p>
+                  <p class="filler">section 20 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 20 level 8 item 0</p>
+                    <p class="filler">section 20 level 8 item 1</p>
+                    <p class="filler">section 20 level 8 item 2</p>
+                    <p class="filler">section 20 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 20 level 9 item 0</p>
+                      <p class="filler">section 20 level 9 item 1</p>
+                      <p class="filler">section 20 level 9 item 2</p>
+                      <p class="filler">section 20 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 20 level 10 item 0</p>
+                        <p class="filler">section 20 level 10 item 1</p>
+                        <p class="filler">section 20 level 10 item 2</p>
+                        <p class="filler">section 20 level 10 item 3</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-21">
+    <div class="level-1">
+      <p class="filler">section 21 level 1 item 0</p>
+      <p class="filler">section 21 level 1 item 1</p>
+      <p class="filler">section 21 level 1 item 2</p>
+      <p class="filler">section 21 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 21 level 2 item 0</p>
+        <p class="filler">section 21 level 2 item 1</p>
+        <p class="filler">section 21 level 2 item 2</p>
+        <p class="filler">section 21 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 21 level 3 item 0</p>
+          <p class="filler">section 21 level 3 item 1</p>
+          <p class="filler">section 21 level 3 item 2</p>
+          <p class="filler">section 21 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 21 level 4 item 0</p>
+            <p class="filler">section 21 level 4 item 1</p>
+            <p class="filler">section 21 level 4 item 2</p>
+            <p class="filler">section 21 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 21 level 5 item 0</p>
+              <p class="filler">section 21 level 5 item 1</p>
+              <p class="filler">section 21 level 5 item 2</p>
+              <p class="filler">section 21 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 21 level 6 item 0</p>
+                <p class="filler">section 21 level 6 item 1</p>
+                <p class="filler">section 21 level 6 item 2</p>
+                <p class="filler">section 21 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 21 level 7 item 0</p>
+                  <p class="filler">section 21 level 7 item 1</p>
+                  <p class="filler">section 21 level 7 item 2</p>
+                  <p class="filler">section 21 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 21 level 8 item 0</p>
+                    <p class="filler">section 21 level 8 item 1</p>
+                    <p class="filler">section 21 level 8 item 2</p>
+                    <p class="filler">section 21 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 21 level 9 item 0</p>
+                      <p class="filler">section 21 level 9 item 1</p>
+                      <p class="filler">section 21 level 9 item 2</p>
+                      <p class="filler">section 21 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 21 level 10 item 0</p>
+                        <p class="filler">section 21 level 10 item 1</p>
+                        <p class="filler">section 21 level 10 item 2</p>
+                        <p class="filler">section 21 level 10 item 3</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-22">
+    <div class="level-1">
+      <p class="filler">section 22 level 1 item 0</p>
+      <p class="filler">section 22 level 1 item 1</p>
+      <p class="filler">section 22 level 1 item 2</p>
+      <p class="filler">section 22 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 22 level 2 item 0</p>
+        <p class="filler">section 22 level 2 item 1</p>
+        <p class="filler">section 22 level 2 item 2</p>
+        <p class="filler">section 22 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 22 level 3 item 0</p>
+          <p class="filler">section 22 level 3 item 1</p>
+          <p class="filler">section 22 level 3 item 2</p>
+          <p class="filler">section 22 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 22 level 4 item 0</p>
+            <p class="filler">section 22 level 4 item 1</p>
+            <p class="filler">section 22 level 4 item 2</p>
+            <p class="filler">section 22 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 22 level 5 item 0</p>
+              <p class="filler">section 22 level 5 item 1</p>
+              <p class="filler">section 22 level 5 item 2</p>
+              <p class="filler">section 22 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 22 level 6 item 0</p>
+                <p class="filler">section 22 level 6 item 1</p>
+                <p class="filler">section 22 level 6 item 2</p>
+                <p class="filler">section 22 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 22 level 7 item 0</p>
+                  <p class="filler">section 22 level 7 item 1</p>
+                  <p class="filler">section 22 level 7 item 2</p>
+                  <p class="filler">section 22 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 22 level 8 item 0</p>
+                    <p class="filler">section 22 level 8 item 1</p>
+                    <p class="filler">section 22 level 8 item 2</p>
+                    <p class="filler">section 22 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 22 level 9 item 0</p>
+                      <p class="filler">section 22 level 9 item 1</p>
+                      <p class="filler">section 22 level 9 item 2</p>
+                      <p class="filler">section 22 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 22 level 10 item 0</p>
+                        <p class="filler">section 22 level 10 item 1</p>
+                        <p class="filler">section 22 level 10 item 2</p>
+                        <p class="filler">section 22 level 10 item 3</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-23">
+    <div class="level-1">
+      <p class="filler">section 23 level 1 item 0</p>
+      <p class="filler">section 23 level 1 item 1</p>
+      <p class="filler">section 23 level 1 item 2</p>
+      <p class="filler">section 23 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 23 level 2 item 0</p>
+        <p class="filler">section 23 level 2 item 1</p>
+        <p class="filler">section 23 level 2 item 2</p>
+        <p class="filler">section 23 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 23 level 3 item 0</p>
+          <p class="filler">section 23 level 3 item 1</p>
+          <p class="filler">section 23 level 3 item 2</p>
+          <p class="filler">section 23 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 23 level 4 item 0</p>
+            <p class="filler">section 23 level 4 item 1</p>
+            <p class="filler">section 23 level 4 item 2</p>
+            <p class="filler">section 23 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 23 level 5 item 0</p>
+              <p class="filler">section 23 level 5 item 1</p>
+              <p class="filler">section 23 level 5 item 2</p>
+              <p class="filler">section 23 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 23 level 6 item 0</p>
+                <p class="filler">section 23 level 6 item 1</p>
+                <p class="filler">section 23 level 6 item 2</p>
+                <p class="filler">section 23 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 23 level 7 item 0</p>
+                  <p class="filler">section 23 level 7 item 1</p>
+                  <p class="filler">section 23 level 7 item 2</p>
+                  <p class="filler">section 23 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 23 level 8 item 0</p>
+                    <p class="filler">section 23 level 8 item 1</p>
+                    <p class="filler">section 23 level 8 item 2</p>
+                    <p class="filler">section 23 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 23 level 9 item 0</p>
+                      <p class="filler">section 23 level 9 item 1</p>
+                      <p class="filler">section 23 level 9 item 2</p>
+                      <p class="filler">section 23 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 23 level 10 item 0</p>
+                        <p class="filler">section 23 level 10 item 1</p>
+                        <p class="filler">section 23 level 10 item 2</p>
+                        <p class="filler">section 23 level 10 item 3</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-24">
+    <div class="level-1">
+      <p class="filler">section 24 level 1 item 0</p>
+      <p class="filler">section 24 level 1 item 1</p>
+      <p class="filler">section 24 level 1 item 2</p>
+      <p class="filler">section 24 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 24 level 2 item 0</p>
+        <p class="filler">section 24 level 2 item 1</p>
+        <p class="filler">section 24 level 2 item 2</p>
+        <p class="filler">section 24 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 24 level 3 item 0</p>
+          <p class="filler">section 24 level 3 item 1</p>
+          <p class="filler">section 24 level 3 item 2</p>
+          <p class="filler">section 24 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 24 level 4 item 0</p>
+            <p class="filler">section 24 level 4 item 1</p>
+            <p class="filler">section 24 level 4 item 2</p>
+            <p class="filler">section 24 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 24 level 5 item 0</p>
+              <p class="filler">section 24 level 5 item 1</p>
+              <p class="filler">section 24 level 5 item 2</p>
+              <p class="filler">section 24 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 24 level 6 item 0</p>
+                <p class="filler">section 24 level 6 item 1</p>
+                <p class="filler">section 24 level 6 item 2</p>
+                <p class="filler">section 24 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 24 level 7 item 0</p>
+                  <p class="filler">section 24 level 7 item 1</p>
+                  <p class="filler">section 24 level 7 item 2</p>
+                  <p class="filler">section 24 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 24 level 8 item 0</p>
+                    <p class="filler">section 24 level 8 item 1</p>
+                    <p class="filler">section 24 level 8 item 2</p>
+                    <p class="filler">section 24 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 24 level 9 item 0</p>
+                      <p class="filler">section 24 level 9 item 1</p>
+                      <p class="filler">section 24 level 9 item 2</p>
+                      <p class="filler">section 24 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 24 level 10 item 0</p>
+                        <p class="filler">section 24 level 10 item 1</p>
+                        <p class="filler">section 24 level 10 item 2</p>
+                        <p class="filler">section 24 level 10 item 3</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-25">
+    <div class="level-1">
+      <p class="filler">section 25 level 1 item 0</p>
+      <p class="filler">section 25 level 1 item 1</p>
+      <p class="filler">section 25 level 1 item 2</p>
+      <p class="filler">section 25 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 25 level 2 item 0</p>
+        <p class="filler">section 25 level 2 item 1</p>
+        <p class="filler">section 25 level 2 item 2</p>
+        <p class="filler">section 25 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 25 level 3 item 0</p>
+          <p class="filler">section 25 level 3 item 1</p>
+          <p class="filler">section 25 level 3 item 2</p>
+          <p class="filler">section 25 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 25 level 4 item 0</p>
+            <p class="filler">section 25 level 4 item 1</p>
+            <p class="filler">section 25 level 4 item 2</p>
+            <p class="filler">section 25 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 25 level 5 item 0</p>
+              <p class="filler">section 25 level 5 item 1</p>
+              <p class="filler">section 25 level 5 item 2</p>
+              <p class="filler">section 25 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 25 level 6 item 0</p>
+                <p class="filler">section 25 level 6 item 1</p>
+                <p class="filler">section 25 level 6 item 2</p>
+                <p class="filler">section 25 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 25 level 7 item 0</p>
+                  <p class="filler">section 25 level 7 item 1</p>
+                  <p class="filler">section 25 level 7 item 2</p>
+                  <p class="filler">section 25 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 25 level 8 item 0</p>
+                    <p class="filler">section 25 level 8 item 1</p>
+                    <p class="filler">section 25 level 8 item 2</p>
+                    <p class="filler">section 25 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 25 level 9 item 0</p>
+                      <p class="filler">section 25 level 9 item 1</p>
+                      <p class="filler">section 25 level 9 item 2</p>
+                      <p class="filler">section 25 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 25 level 10 item 0</p>
+                        <p class="filler">section 25 level 10 item 1</p>
+                        <p class="filler">section 25 level 10 item 2</p>
+                        <p class="filler">section 25 level 10 item 3</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-26">
+    <div class="level-1">
+      <p class="filler">section 26 level 1 item 0</p>
+      <p class="filler">section 26 level 1 item 1</p>
+      <p class="filler">section 26 level 1 item 2</p>
+      <p class="filler">section 26 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 26 level 2 item 0</p>
+        <p class="filler">section 26 level 2 item 1</p>
+        <p class="filler">section 26 level 2 item 2</p>
+        <p class="filler">section 26 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 26 level 3 item 0</p>
+          <p class="filler">section 26 level 3 item 1</p>
+          <p class="filler">section 26 level 3 item 2</p>
+          <p class="filler">section 26 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 26 level 4 item 0</p>
+            <p class="filler">section 26 level 4 item 1</p>
+            <p class="filler">section 26 level 4 item 2</p>
+            <p class="filler">section 26 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 26 level 5 item 0</p>
+              <p class="filler">section 26 level 5 item 1</p>
+              <p class="filler">section 26 level 5 item 2</p>
+              <p class="filler">section 26 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 26 level 6 item 0</p>
+                <p class="filler">section 26 level 6 item 1</p>
+                <p class="filler">section 26 level 6 item 2</p>
+                <p class="filler">section 26 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 26 level 7 item 0</p>
+                  <p class="filler">section 26 level 7 item 1</p>
+                  <p class="filler">section 26 level 7 item 2</p>
+                  <p class="filler">section 26 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 26 level 8 item 0</p>
+                    <p class="filler">section 26 level 8 item 1</p>
+                    <p class="filler">section 26 level 8 item 2</p>
+                    <p class="filler">section 26 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 26 level 9 item 0</p>
+                      <p class="filler">section 26 level 9 item 1</p>
+                      <p class="filler">section 26 level 9 item 2</p>
+                      <p class="filler">section 26 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 26 level 10 item 0</p>
+                        <p class="filler">section 26 level 10 item 1</p>
+                        <p class="filler">section 26 level 10 item 2</p>
+                        <p class="filler">section 26 level 10 item 3</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-27">
+    <div class="level-1">
+      <p class="filler">section 27 level 1 item 0</p>
+      <p class="filler">section 27 level 1 item 1</p>
+      <p class="filler">section 27 level 1 item 2</p>
+      <p class="filler">section 27 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 27 level 2 item 0</p>
+        <p class="filler">section 27 level 2 item 1</p>
+        <p class="filler">section 27 level 2 item 2</p>
+        <p class="filler">section 27 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 27 level 3 item 0</p>
+          <p class="filler">section 27 level 3 item 1</p>
+          <p class="filler">section 27 level 3 item 2</p>
+          <p class="filler">section 27 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 27 level 4 item 0</p>
+            <p class="filler">section 27 level 4 item 1</p>
+            <p class="filler">section 27 level 4 item 2</p>
+            <p class="filler">section 27 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 27 level 5 item 0</p>
+              <p class="filler">section 27 level 5 item 1</p>
+              <p class="filler">section 27 level 5 item 2</p>
+              <p class="filler">section 27 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 27 level 6 item 0</p>
+                <p class="filler">section 27 level 6 item 1</p>
+                <p class="filler">section 27 level 6 item 2</p>
+                <p class="filler">section 27 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 27 level 7 item 0</p>
+                  <p class="filler">section 27 level 7 item 1</p>
+                  <p class="filler">section 27 level 7 item 2</p>
+                  <p class="filler">section 27 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 27 level 8 item 0</p>
+                    <p class="filler">section 27 level 8 item 1</p>
+                    <p class="filler">section 27 level 8 item 2</p>
+                    <p class="filler">section 27 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 27 level 9 item 0</p>
+                      <p class="filler">section 27 level 9 item 1</p>
+                      <p class="filler">section 27 level 9 item 2</p>
+                      <p class="filler">section 27 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 27 level 10 item 0</p>
+                        <p class="filler">section 27 level 10 item 1</p>
+                        <p class="filler">section 27 level 10 item 2</p>
+                        <p class="filler">section 27 level 10 item 3</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-28">
+    <div class="level-1">
+      <p class="filler">section 28 level 1 item 0</p>
+      <p class="filler">section 28 level 1 item 1</p>
+      <p class="filler">section 28 level 1 item 2</p>
+      <p class="filler">section 28 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 28 level 2 item 0</p>
+        <p class="filler">section 28 level 2 item 1</p>
+        <p class="filler">section 28 level 2 item 2</p>
+        <p class="filler">section 28 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 28 level 3 item 0</p>
+          <p class="filler">section 28 level 3 item 1</p>
+          <p class="filler">section 28 level 3 item 2</p>
+          <p class="filler">section 28 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 28 level 4 item 0</p>
+            <p class="filler">section 28 level 4 item 1</p>
+            <p class="filler">section 28 level 4 item 2</p>
+            <p class="filler">section 28 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 28 level 5 item 0</p>
+              <p class="filler">section 28 level 5 item 1</p>
+              <p class="filler">section 28 level 5 item 2</p>
+              <p class="filler">section 28 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 28 level 6 item 0</p>
+                <p class="filler">section 28 level 6 item 1</p>
+                <p class="filler">section 28 level 6 item 2</p>
+                <p class="filler">section 28 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 28 level 7 item 0</p>
+                  <p class="filler">section 28 level 7 item 1</p>
+                  <p class="filler">section 28 level 7 item 2</p>
+                  <p class="filler">section 28 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 28 level 8 item 0</p>
+                    <p class="filler">section 28 level 8 item 1</p>
+                    <p class="filler">section 28 level 8 item 2</p>
+                    <p class="filler">section 28 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 28 level 9 item 0</p>
+                      <p class="filler">section 28 level 9 item 1</p>
+                      <p class="filler">section 28 level 9 item 2</p>
+                      <p class="filler">section 28 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 28 level 10 item 0</p>
+                        <p class="filler">section 28 level 10 item 1</p>
+                        <p class="filler">section 28 level 10 item 2</p>
+                        <p class="filler">section 28 level 10 item 3</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-29">
+    <div class="level-1">
+      <p class="filler">section 29 level 1 item 0</p>
+      <p class="filler">section 29 level 1 item 1</p>
+      <p class="filler">section 29 level 1 item 2</p>
+      <p class="filler">section 29 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 29 level 2 item 0</p>
+        <p class="filler">section 29 level 2 item 1</p>
+        <p class="filler">section 29 level 2 item 2</p>
+        <p class="filler">section 29 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 29 level 3 item 0</p>
+          <p class="filler">section 29 level 3 item 1</p>
+          <p class="filler">section 29 level 3 item 2</p>
+          <p class="filler">section 29 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 29 level 4 item 0</p>
+            <p class="filler">section 29 level 4 item 1</p>
+            <p class="filler">section 29 level 4 item 2</p>
+            <p class="filler">section 29 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 29 level 5 item 0</p>
+              <p class="filler">section 29 level 5 item 1</p>
+              <p class="filler">section 29 level 5 item 2</p>
+              <p class="filler">section 29 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 29 level 6 item 0</p>
+                <p class="filler">section 29 level 6 item 1</p>
+                <p class="filler">section 29 level 6 item 2</p>
+                <p class="filler">section 29 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 29 level 7 item 0</p>
+                  <p class="filler">section 29 level 7 item 1</p>
+                  <p class="filler">section 29 level 7 item 2</p>
+                  <p class="filler">section 29 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 29 level 8 item 0</p>
+                    <p class="filler">section 29 level 8 item 1</p>
+                    <p class="filler">section 29 level 8 item 2</p>
+                    <p class="filler">section 29 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 29 level 9 item 0</p>
+                      <p class="filler">section 29 level 9 item 1</p>
+                      <p class="filler">section 29 level 9 item 2</p>
+                      <p class="filler">section 29 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 29 level 10 item 0</p>
+                        <p class="filler">section 29 level 10 item 1</p>
+                        <p class="filler">section 29 level 10 item 2</p>
+                        <p class="filler">section 29 level 10 item 3</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-30">
+    <div class="level-1">
+      <p class="filler">section 30 level 1 item 0</p>
+      <p class="filler">section 30 level 1 item 1</p>
+      <p class="filler">section 30 level 1 item 2</p>
+      <p class="filler">section 30 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 30 level 2 item 0</p>
+        <p class="filler">section 30 level 2 item 1</p>
+        <p class="filler">section 30 level 2 item 2</p>
+        <p class="filler">section 30 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 30 level 3 item 0</p>
+          <p class="filler">section 30 level 3 item 1</p>
+          <p class="filler">section 30 level 3 item 2</p>
+          <p class="filler">section 30 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 30 level 4 item 0</p>
+            <p class="filler">section 30 level 4 item 1</p>
+            <p class="filler">section 30 level 4 item 2</p>
+            <p class="filler">section 30 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 30 level 5 item 0</p>
+              <p class="filler">section 30 level 5 item 1</p>
+              <p class="filler">section 30 level 5 item 2</p>
+              <p class="filler">section 30 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 30 level 6 item 0</p>
+                <p class="filler">section 30 level 6 item 1</p>
+                <p class="filler">section 30 level 6 item 2</p>
+                <p class="filler">section 30 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 30 level 7 item 0</p>
+                  <p class="filler">section 30 level 7 item 1</p>
+                  <p class="filler">section 30 level 7 item 2</p>
+                  <p class="filler">section 30 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 30 level 8 item 0</p>
+                    <p class="filler">section 30 level 8 item 1</p>
+                    <p class="filler">section 30 level 8 item 2</p>
+                    <p class="filler">section 30 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 30 level 9 item 0</p>
+                      <p class="filler">section 30 level 9 item 1</p>
+                      <p class="filler">section 30 level 9 item 2</p>
+                      <p class="filler">section 30 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 30 level 10 item 0</p>
+                        <p class="filler">section 30 level 10 item 1</p>
+                        <p class="filler">section 30 level 10 item 2</p>
+                        <p class="filler">section 30 level 10 item 3</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-31">
+    <div class="level-1">
+      <p class="filler">section 31 level 1 item 0</p>
+      <p class="filler">section 31 level 1 item 1</p>
+      <p class="filler">section 31 level 1 item 2</p>
+      <p class="filler">section 31 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 31 level 2 item 0</p>
+        <p class="filler">section 31 level 2 item 1</p>
+        <p class="filler">section 31 level 2 item 2</p>
+        <p class="filler">section 31 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 31 level 3 item 0</p>
+          <p class="filler">section 31 level 3 item 1</p>
+          <p class="filler">section 31 level 3 item 2</p>
+          <p class="filler">section 31 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 31 level 4 item 0</p>
+            <p class="filler">section 31 level 4 item 1</p>
+            <p class="filler">section 31 level 4 item 2</p>
+            <p class="filler">section 31 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 31 level 5 item 0</p>
+              <p class="filler">section 31 level 5 item 1</p>
+              <p class="filler">section 31 level 5 item 2</p>
+              <p class="filler">section 31 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 31 level 6 item 0</p>
+                <p class="filler">section 31 level 6 item 1</p>
+                <p class="filler">section 31 level 6 item 2</p>
+                <p class="filler">section 31 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 31 level 7 item 0</p>
+                  <p class="filler">section 31 level 7 item 1</p>
+                  <p class="filler">section 31 level 7 item 2</p>
+                  <p class="filler">section 31 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 31 level 8 item 0</p>
+                    <p class="filler">section 31 level 8 item 1</p>
+                    <p class="filler">section 31 level 8 item 2</p>
+                    <p class="filler">section 31 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 31 level 9 item 0</p>
+                      <p class="filler">section 31 level 9 item 1</p>
+                      <p class="filler">section 31 level 9 item 2</p>
+                      <p class="filler">section 31 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 31 level 10 item 0</p>
+                        <p class="filler">section 31 level 10 item 1</p>
+                        <p class="filler">section 31 level 10 item 2</p>
+                        <p class="filler">section 31 level 10 item 3</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-32">
+    <div class="level-1">
+      <p class="filler">section 32 level 1 item 0</p>
+      <p class="filler">section 32 level 1 item 1</p>
+      <p class="filler">section 32 level 1 item 2</p>
+      <p class="filler">section 32 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 32 level 2 item 0</p>
+        <p class="filler">section 32 level 2 item 1</p>
+        <p class="filler">section 32 level 2 item 2</p>
+        <p class="filler">section 32 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 32 level 3 item 0</p>
+          <p class="filler">section 32 level 3 item 1</p>
+          <p class="filler">section 32 level 3 item 2</p>
+          <p class="filler">section 32 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 32 level 4 item 0</p>
+            <p class="filler">section 32 level 4 item 1</p>
+            <p class="filler">section 32 level 4 item 2</p>
+            <p class="filler">section 32 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 32 level 5 item 0</p>
+              <p class="filler">section 32 level 5 item 1</p>
+              <p class="filler">section 32 level 5 item 2</p>
+              <p class="filler">section 32 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 32 level 6 item 0</p>
+                <p class="filler">section 32 level 6 item 1</p>
+                <p class="filler">section 32 level 6 item 2</p>
+                <p class="filler">section 32 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 32 level 7 item 0</p>
+                  <p class="filler">section 32 level 7 item 1</p>
+                  <p class="filler">section 32 level 7 item 2</p>
+                  <p class="filler">section 32 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 32 level 8 item 0</p>
+                    <p class="filler">section 32 level 8 item 1</p>
+                    <p class="filler">section 32 level 8 item 2</p>
+                    <p class="filler">section 32 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 32 level 9 item 0</p>
+                      <p class="filler">section 32 level 9 item 1</p>
+                      <p class="filler">section 32 level 9 item 2</p>
+                      <p class="filler">section 32 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 32 level 10 item 0</p>
+                        <p class="filler">section 32 level 10 item 1</p>
+                        <p class="filler">section 32 level 10 item 2</p>
+                        <p class="filler">section 32 level 10 item 3</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-33">
+    <div class="level-1">
+      <p class="filler">section 33 level 1 item 0</p>
+      <p class="filler">section 33 level 1 item 1</p>
+      <p class="filler">section 33 level 1 item 2</p>
+      <p class="filler">section 33 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 33 level 2 item 0</p>
+        <p class="filler">section 33 level 2 item 1</p>
+        <p class="filler">section 33 level 2 item 2</p>
+        <p class="filler">section 33 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 33 level 3 item 0</p>
+          <p class="filler">section 33 level 3 item 1</p>
+          <p class="filler">section 33 level 3 item 2</p>
+          <p class="filler">section 33 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 33 level 4 item 0</p>
+            <p class="filler">section 33 level 4 item 1</p>
+            <p class="filler">section 33 level 4 item 2</p>
+            <p class="filler">section 33 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 33 level 5 item 0</p>
+              <p class="filler">section 33 level 5 item 1</p>
+              <p class="filler">section 33 level 5 item 2</p>
+              <p class="filler">section 33 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 33 level 6 item 0</p>
+                <p class="filler">section 33 level 6 item 1</p>
+                <p class="filler">section 33 level 6 item 2</p>
+                <p class="filler">section 33 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 33 level 7 item 0</p>
+                  <p class="filler">section 33 level 7 item 1</p>
+                  <p class="filler">section 33 level 7 item 2</p>
+                  <p class="filler">section 33 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 33 level 8 item 0</p>
+                    <p class="filler">section 33 level 8 item 1</p>
+                    <p class="filler">section 33 level 8 item 2</p>
+                    <p class="filler">section 33 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 33 level 9 item 0</p>
+                      <p class="filler">section 33 level 9 item 1</p>
+                      <p class="filler">section 33 level 9 item 2</p>
+                      <p class="filler">section 33 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 33 level 10 item 0</p>
+                        <p class="filler">section 33 level 10 item 1</p>
+                        <p class="filler">section 33 level 10 item 2</p>
+                        <p class="filler">section 33 level 10 item 3</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-34">
+    <div class="level-1">
+      <p class="filler">section 34 level 1 item 0</p>
+      <p class="filler">section 34 level 1 item 1</p>
+      <p class="filler">section 34 level 1 item 2</p>
+      <p class="filler">section 34 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 34 level 2 item 0</p>
+        <p class="filler">section 34 level 2 item 1</p>
+        <p class="filler">section 34 level 2 item 2</p>
+        <p class="filler">section 34 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 34 level 3 item 0</p>
+          <p class="filler">section 34 level 3 item 1</p>
+          <p class="filler">section 34 level 3 item 2</p>
+          <p class="filler">section 34 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 34 level 4 item 0</p>
+            <p class="filler">section 34 level 4 item 1</p>
+            <p class="filler">section 34 level 4 item 2</p>
+            <p class="filler">section 34 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 34 level 5 item 0</p>
+              <p class="filler">section 34 level 5 item 1</p>
+              <p class="filler">section 34 level 5 item 2</p>
+              <p class="filler">section 34 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 34 level 6 item 0</p>
+                <p class="filler">section 34 level 6 item 1</p>
+                <p class="filler">section 34 level 6 item 2</p>
+                <p class="filler">section 34 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 34 level 7 item 0</p>
+                  <p class="filler">section 34 level 7 item 1</p>
+                  <p class="filler">section 34 level 7 item 2</p>
+                  <p class="filler">section 34 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 34 level 8 item 0</p>
+                    <p class="filler">section 34 level 8 item 1</p>
+                    <p class="filler">section 34 level 8 item 2</p>
+                    <p class="filler">section 34 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 34 level 9 item 0</p>
+                      <p class="filler">section 34 level 9 item 1</p>
+                      <p class="filler">section 34 level 9 item 2</p>
+                      <p class="filler">section 34 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 34 level 10 item 0</p>
+                        <p class="filler">section 34 level 10 item 1</p>
+                        <p class="filler">section 34 level 10 item 2</p>
+                        <p class="filler">section 34 level 10 item 3</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-35">
+    <div class="level-1">
+      <p class="filler">section 35 level 1 item 0</p>
+      <p class="filler">section 35 level 1 item 1</p>
+      <p class="filler">section 35 level 1 item 2</p>
+      <p class="filler">section 35 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 35 level 2 item 0</p>
+        <p class="filler">section 35 level 2 item 1</p>
+        <p class="filler">section 35 level 2 item 2</p>
+        <p class="filler">section 35 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 35 level 3 item 0</p>
+          <p class="filler">section 35 level 3 item 1</p>
+          <p class="filler">section 35 level 3 item 2</p>
+          <p class="filler">section 35 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 35 level 4 item 0</p>
+            <p class="filler">section 35 level 4 item 1</p>
+            <p class="filler">section 35 level 4 item 2</p>
+            <p class="filler">section 35 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 35 level 5 item 0</p>
+              <p class="filler">section 35 level 5 item 1</p>
+              <p class="filler">section 35 level 5 item 2</p>
+              <p class="filler">section 35 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 35 level 6 item 0</p>
+                <p class="filler">section 35 level 6 item 1</p>
+                <p class="filler">section 35 level 6 item 2</p>
+                <p class="filler">section 35 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 35 level 7 item 0</p>
+                  <p class="filler">section 35 level 7 item 1</p>
+                  <p class="filler">section 35 level 7 item 2</p>
+                  <p class="filler">section 35 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 35 level 8 item 0</p>
+                    <p class="filler">section 35 level 8 item 1</p>
+                    <p class="filler">section 35 level 8 item 2</p>
+                    <p class="filler">section 35 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 35 level 9 item 0</p>
+                      <p class="filler">section 35 level 9 item 1</p>
+                      <p class="filler">section 35 level 9 item 2</p>
+                      <p class="filler">section 35 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 35 level 10 item 0</p>
+                        <p class="filler">section 35 level 10 item 1</p>
+                        <p class="filler">section 35 level 10 item 2</p>
+                        <p class="filler">section 35 level 10 item 3</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-36">
+    <div class="level-1">
+      <p class="filler">section 36 level 1 item 0</p>
+      <p class="filler">section 36 level 1 item 1</p>
+      <p class="filler">section 36 level 1 item 2</p>
+      <p class="filler">section 36 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 36 level 2 item 0</p>
+        <p class="filler">section 36 level 2 item 1</p>
+        <p class="filler">section 36 level 2 item 2</p>
+        <p class="filler">section 36 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 36 level 3 item 0</p>
+          <p class="filler">section 36 level 3 item 1</p>
+          <p class="filler">section 36 level 3 item 2</p>
+          <p class="filler">section 36 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 36 level 4 item 0</p>
+            <p class="filler">section 36 level 4 item 1</p>
+            <p class="filler">section 36 level 4 item 2</p>
+            <p class="filler">section 36 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 36 level 5 item 0</p>
+              <p class="filler">section 36 level 5 item 1</p>
+              <p class="filler">section 36 level 5 item 2</p>
+              <p class="filler">section 36 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 36 level 6 item 0</p>
+                <p class="filler">section 36 level 6 item 1</p>
+                <p class="filler">section 36 level 6 item 2</p>
+                <p class="filler">section 36 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 36 level 7 item 0</p>
+                  <p class="filler">section 36 level 7 item 1</p>
+                  <p class="filler">section 36 level 7 item 2</p>
+                  <p class="filler">section 36 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 36 level 8 item 0</p>
+                    <p class="filler">section 36 level 8 item 1</p>
+                    <p class="filler">section 36 level 8 item 2</p>
+                    <p class="filler">section 36 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 36 level 9 item 0</p>
+                      <p class="filler">section 36 level 9 item 1</p>
+                      <p class="filler">section 36 level 9 item 2</p>
+                      <p class="filler">section 36 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 36 level 10 item 0</p>
+                        <p class="filler">section 36 level 10 item 1</p>
+                        <p class="filler">section 36 level 10 item 2</p>
+                        <p class="filler">section 36 level 10 item 3</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-37">
+    <div class="level-1">
+      <p class="filler">section 37 level 1 item 0</p>
+      <p class="filler">section 37 level 1 item 1</p>
+      <p class="filler">section 37 level 1 item 2</p>
+      <p class="filler">section 37 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 37 level 2 item 0</p>
+        <p class="filler">section 37 level 2 item 1</p>
+        <p class="filler">section 37 level 2 item 2</p>
+        <p class="filler">section 37 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 37 level 3 item 0</p>
+          <p class="filler">section 37 level 3 item 1</p>
+          <p class="filler">section 37 level 3 item 2</p>
+          <p class="filler">section 37 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 37 level 4 item 0</p>
+            <p class="filler">section 37 level 4 item 1</p>
+            <p class="filler">section 37 level 4 item 2</p>
+            <p class="filler">section 37 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 37 level 5 item 0</p>
+              <p class="filler">section 37 level 5 item 1</p>
+              <p class="filler">section 37 level 5 item 2</p>
+              <p class="filler">section 37 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 37 level 6 item 0</p>
+                <p class="filler">section 37 level 6 item 1</p>
+                <p class="filler">section 37 level 6 item 2</p>
+                <p class="filler">section 37 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 37 level 7 item 0</p>
+                  <p class="filler">section 37 level 7 item 1</p>
+                  <p class="filler">section 37 level 7 item 2</p>
+                  <p class="filler">section 37 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 37 level 8 item 0</p>
+                    <p class="filler">section 37 level 8 item 1</p>
+                    <p class="filler">section 37 level 8 item 2</p>
+                    <p class="filler">section 37 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 37 level 9 item 0</p>
+                      <p class="filler">section 37 level 9 item 1</p>
+                      <p class="filler">section 37 level 9 item 2</p>
+                      <p class="filler">section 37 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 37 level 10 item 0</p>
+                        <p class="filler">section 37 level 10 item 1</p>
+                        <p class="filler">section 37 level 10 item 2</p>
+                        <p class="filler">section 37 level 10 item 3</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-38">
+    <div class="level-1">
+      <p class="filler">section 38 level 1 item 0</p>
+      <p class="filler">section 38 level 1 item 1</p>
+      <p class="filler">section 38 level 1 item 2</p>
+      <p class="filler">section 38 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 38 level 2 item 0</p>
+        <p class="filler">section 38 level 2 item 1</p>
+        <p class="filler">section 38 level 2 item 2</p>
+        <p class="filler">section 38 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 38 level 3 item 0</p>
+          <p class="filler">section 38 level 3 item 1</p>
+          <p class="filler">section 38 level 3 item 2</p>
+          <p class="filler">section 38 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 38 level 4 item 0</p>
+            <p class="filler">section 38 level 4 item 1</p>
+            <p class="filler">section 38 level 4 item 2</p>
+            <p class="filler">section 38 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 38 level 5 item 0</p>
+              <p class="filler">section 38 level 5 item 1</p>
+              <p class="filler">section 38 level 5 item 2</p>
+              <p class="filler">section 38 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 38 level 6 item 0</p>
+                <p class="filler">section 38 level 6 item 1</p>
+                <p class="filler">section 38 level 6 item 2</p>
+                <p class="filler">section 38 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 38 level 7 item 0</p>
+                  <p class="filler">section 38 level 7 item 1</p>
+                  <p class="filler">section 38 level 7 item 2</p>
+                  <p class="filler">section 38 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 38 level 8 item 0</p>
+                    <p class="filler">section 38 level 8 item 1</p>
+                    <p class="filler">section 38 level 8 item 2</p>
+                    <p class="filler">section 38 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 38 level 9 item 0</p>
+                      <p class="filler">section 38 level 9 item 1</p>
+                      <p class="filler">section 38 level 9 item 2</p>
+                      <p class="filler">section 38 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 38 level 10 item 0</p>
+                        <p class="filler">section 38 level 10 item 1</p>
+                        <p class="filler">section 38 level 10 item 2</p>
+                        <p class="filler">section 38 level 10 item 3</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-39">
+    <div class="level-1">
+      <p class="filler">section 39 level 1 item 0</p>
+      <p class="filler">section 39 level 1 item 1</p>
+      <p class="filler">section 39 level 1 item 2</p>
+      <p class="filler">section 39 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 39 level 2 item 0</p>
+        <p class="filler">section 39 level 2 item 1</p>
+        <p class="filler">section 39 level 2 item 2</p>
+        <p class="filler">section 39 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 39 level 3 item 0</p>
+          <p class="filler">section 39 level 3 item 1</p>
+          <p class="filler">section 39 level 3 item 2</p>
+          <p class="filler">section 39 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 39 level 4 item 0</p>
+            <p class="filler">section 39 level 4 item 1</p>
+            <p class="filler">section 39 level 4 item 2</p>
+            <p class="filler">section 39 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 39 level 5 item 0</p>
+              <p class="filler">section 39 level 5 item 1</p>
+              <p class="filler">section 39 level 5 item 2</p>
+              <p class="filler">section 39 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 39 level 6 item 0</p>
+                <p class="filler">section 39 level 6 item 1</p>
+                <p class="filler">section 39 level 6 item 2</p>
+                <p class="filler">section 39 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 39 level 7 item 0</p>
+                  <p class="filler">section 39 level 7 item 1</p>
+                  <p class="filler">section 39 level 7 item 2</p>
+                  <p class="filler">section 39 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 39 level 8 item 0</p>
+                    <p class="filler">section 39 level 8 item 1</p>
+                    <p class="filler">section 39 level 8 item 2</p>
+                    <p class="filler">section 39 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 39 level 9 item 0</p>
+                      <p class="filler">section 39 level 9 item 1</p>
+                      <p class="filler">section 39 level 9 item 2</p>
+                      <p class="filler">section 39 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 39 level 10 item 0</p>
+                        <p class="filler">section 39 level 10 item 1</p>
+                        <p class="filler">section 39 level 10 item 2</p>
+                        <p class="filler">section 39 level 10 item 3</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</main>
diff --git a/perf/benchmarks/deep-last-leaf.old.html b/perf/benchmarks/deep-last-leaf.old.html
new file mode 100644
index 0000000..d9bea0c
--- /dev/null
+++ b/perf/benchmarks/deep-last-leaf.old.html
@@ -0,0 +1,2522 @@
+<main id="root">
+  <section id="section-0">
+    <div class="level-1">
+      <p class="filler">section 0 level 1 item 0</p>
+      <p class="filler">section 0 level 1 item 1</p>
+      <p class="filler">section 0 level 1 item 2</p>
+      <p class="filler">section 0 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 0 level 2 item 0</p>
+        <p class="filler">section 0 level 2 item 1</p>
+        <p class="filler">section 0 level 2 item 2</p>
+        <p class="filler">section 0 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 0 level 3 item 0</p>
+          <p class="filler">section 0 level 3 item 1</p>
+          <p class="filler">section 0 level 3 item 2</p>
+          <p class="filler">section 0 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 0 level 4 item 0</p>
+            <p class="filler">section 0 level 4 item 1</p>
+            <p class="filler">section 0 level 4 item 2</p>
+            <p class="filler">section 0 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 0 level 5 item 0</p>
+              <p class="filler">section 0 level 5 item 1</p>
+              <p class="filler">section 0 level 5 item 2</p>
+              <p class="filler">section 0 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 0 level 6 item 0</p>
+                <p class="filler">section 0 level 6 item 1</p>
+                <p class="filler">section 0 level 6 item 2</p>
+                <p class="filler">section 0 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 0 level 7 item 0</p>
+                  <p class="filler">section 0 level 7 item 1</p>
+                  <p class="filler">section 0 level 7 item 2</p>
+                  <p class="filler">section 0 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 0 level 8 item 0</p>
+                    <p class="filler">section 0 level 8 item 1</p>
+                    <p class="filler">section 0 level 8 item 2</p>
+                    <p class="filler">section 0 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 0 level 9 item 0</p>
+                      <p class="filler">section 0 level 9 item 1</p>
+                      <p class="filler">section 0 level 9 item 2</p>
+                      <p class="filler">section 0 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 0 level 10 item 0</p>
+                        <p class="filler">section 0 level 10 item 1</p>
+                        <p class="filler">section 0 level 10 item 2</p>
+                        <p class="filler">section 0 level 10 item 3</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-1">
+    <div class="level-1">
+      <p class="filler">section 1 level 1 item 0</p>
+      <p class="filler">section 1 level 1 item 1</p>
+      <p class="filler">section 1 level 1 item 2</p>
+      <p class="filler">section 1 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 1 level 2 item 0</p>
+        <p class="filler">section 1 level 2 item 1</p>
+        <p class="filler">section 1 level 2 item 2</p>
+        <p class="filler">section 1 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 1 level 3 item 0</p>
+          <p class="filler">section 1 level 3 item 1</p>
+          <p class="filler">section 1 level 3 item 2</p>
+          <p class="filler">section 1 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 1 level 4 item 0</p>
+            <p class="filler">section 1 level 4 item 1</p>
+            <p class="filler">section 1 level 4 item 2</p>
+            <p class="filler">section 1 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 1 level 5 item 0</p>
+              <p class="filler">section 1 level 5 item 1</p>
+              <p class="filler">section 1 level 5 item 2</p>
+              <p class="filler">section 1 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 1 level 6 item 0</p>
+                <p class="filler">section 1 level 6 item 1</p>
+                <p class="filler">section 1 level 6 item 2</p>
+                <p class="filler">section 1 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 1 level 7 item 0</p>
+                  <p class="filler">section 1 level 7 item 1</p>
+                  <p class="filler">section 1 level 7 item 2</p>
+                  <p class="filler">section 1 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 1 level 8 item 0</p>
+                    <p class="filler">section 1 level 8 item 1</p>
+                    <p class="filler">section 1 level 8 item 2</p>
+                    <p class="filler">section 1 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 1 level 9 item 0</p>
+                      <p class="filler">section 1 level 9 item 1</p>
+                      <p class="filler">section 1 level 9 item 2</p>
+                      <p class="filler">section 1 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 1 level 10 item 0</p>
+                        <p class="filler">section 1 level 10 item 1</p>
+                        <p class="filler">section 1 level 10 item 2</p>
+                        <p class="filler">section 1 level 10 item 3</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-2">
+    <div class="level-1">
+      <p class="filler">section 2 level 1 item 0</p>
+      <p class="filler">section 2 level 1 item 1</p>
+      <p class="filler">section 2 level 1 item 2</p>
+      <p class="filler">section 2 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 2 level 2 item 0</p>
+        <p class="filler">section 2 level 2 item 1</p>
+        <p class="filler">section 2 level 2 item 2</p>
+        <p class="filler">section 2 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 2 level 3 item 0</p>
+          <p class="filler">section 2 level 3 item 1</p>
+          <p class="filler">section 2 level 3 item 2</p>
+          <p class="filler">section 2 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 2 level 4 item 0</p>
+            <p class="filler">section 2 level 4 item 1</p>
+            <p class="filler">section 2 level 4 item 2</p>
+            <p class="filler">section 2 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 2 level 5 item 0</p>
+              <p class="filler">section 2 level 5 item 1</p>
+              <p class="filler">section 2 level 5 item 2</p>
+              <p class="filler">section 2 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 2 level 6 item 0</p>
+                <p class="filler">section 2 level 6 item 1</p>
+                <p class="filler">section 2 level 6 item 2</p>
+                <p class="filler">section 2 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 2 level 7 item 0</p>
+                  <p class="filler">section 2 level 7 item 1</p>
+                  <p class="filler">section 2 level 7 item 2</p>
+                  <p class="filler">section 2 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 2 level 8 item 0</p>
+                    <p class="filler">section 2 level 8 item 1</p>
+                    <p class="filler">section 2 level 8 item 2</p>
+                    <p class="filler">section 2 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 2 level 9 item 0</p>
+                      <p class="filler">section 2 level 9 item 1</p>
+                      <p class="filler">section 2 level 9 item 2</p>
+                      <p class="filler">section 2 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 2 level 10 item 0</p>
+                        <p class="filler">section 2 level 10 item 1</p>
+                        <p class="filler">section 2 level 10 item 2</p>
+                        <p class="filler">section 2 level 10 item 3</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-3">
+    <div class="level-1">
+      <p class="filler">section 3 level 1 item 0</p>
+      <p class="filler">section 3 level 1 item 1</p>
+      <p class="filler">section 3 level 1 item 2</p>
+      <p class="filler">section 3 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 3 level 2 item 0</p>
+        <p class="filler">section 3 level 2 item 1</p>
+        <p class="filler">section 3 level 2 item 2</p>
+        <p class="filler">section 3 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 3 level 3 item 0</p>
+          <p class="filler">section 3 level 3 item 1</p>
+          <p class="filler">section 3 level 3 item 2</p>
+          <p class="filler">section 3 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 3 level 4 item 0</p>
+            <p class="filler">section 3 level 4 item 1</p>
+            <p class="filler">section 3 level 4 item 2</p>
+            <p class="filler">section 3 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 3 level 5 item 0</p>
+              <p class="filler">section 3 level 5 item 1</p>
+              <p class="filler">section 3 level 5 item 2</p>
+              <p class="filler">section 3 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 3 level 6 item 0</p>
+                <p class="filler">section 3 level 6 item 1</p>
+                <p class="filler">section 3 level 6 item 2</p>
+                <p class="filler">section 3 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 3 level 7 item 0</p>
+                  <p class="filler">section 3 level 7 item 1</p>
+                  <p class="filler">section 3 level 7 item 2</p>
+                  <p class="filler">section 3 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 3 level 8 item 0</p>
+                    <p class="filler">section 3 level 8 item 1</p>
+                    <p class="filler">section 3 level 8 item 2</p>
+                    <p class="filler">section 3 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 3 level 9 item 0</p>
+                      <p class="filler">section 3 level 9 item 1</p>
+                      <p class="filler">section 3 level 9 item 2</p>
+                      <p class="filler">section 3 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 3 level 10 item 0</p>
+                        <p class="filler">section 3 level 10 item 1</p>
+                        <p class="filler">section 3 level 10 item 2</p>
+                        <p class="filler">section 3 level 10 item 3</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-4">
+    <div class="level-1">
+      <p class="filler">section 4 level 1 item 0</p>
+      <p class="filler">section 4 level 1 item 1</p>
+      <p class="filler">section 4 level 1 item 2</p>
+      <p class="filler">section 4 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 4 level 2 item 0</p>
+        <p class="filler">section 4 level 2 item 1</p>
+        <p class="filler">section 4 level 2 item 2</p>
+        <p class="filler">section 4 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 4 level 3 item 0</p>
+          <p class="filler">section 4 level 3 item 1</p>
+          <p class="filler">section 4 level 3 item 2</p>
+          <p class="filler">section 4 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 4 level 4 item 0</p>
+            <p class="filler">section 4 level 4 item 1</p>
+            <p class="filler">section 4 level 4 item 2</p>
+            <p class="filler">section 4 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 4 level 5 item 0</p>
+              <p class="filler">section 4 level 5 item 1</p>
+              <p class="filler">section 4 level 5 item 2</p>
+              <p class="filler">section 4 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 4 level 6 item 0</p>
+                <p class="filler">section 4 level 6 item 1</p>
+                <p class="filler">section 4 level 6 item 2</p>
+                <p class="filler">section 4 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 4 level 7 item 0</p>
+                  <p class="filler">section 4 level 7 item 1</p>
+                  <p class="filler">section 4 level 7 item 2</p>
+                  <p class="filler">section 4 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 4 level 8 item 0</p>
+                    <p class="filler">section 4 level 8 item 1</p>
+                    <p class="filler">section 4 level 8 item 2</p>
+                    <p class="filler">section 4 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 4 level 9 item 0</p>
+                      <p class="filler">section 4 level 9 item 1</p>
+                      <p class="filler">section 4 level 9 item 2</p>
+                      <p class="filler">section 4 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 4 level 10 item 0</p>
+                        <p class="filler">section 4 level 10 item 1</p>
+                        <p class="filler">section 4 level 10 item 2</p>
+                        <p class="filler">section 4 level 10 item 3</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-5">
+    <div class="level-1">
+      <p class="filler">section 5 level 1 item 0</p>
+      <p class="filler">section 5 level 1 item 1</p>
+      <p class="filler">section 5 level 1 item 2</p>
+      <p class="filler">section 5 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 5 level 2 item 0</p>
+        <p class="filler">section 5 level 2 item 1</p>
+        <p class="filler">section 5 level 2 item 2</p>
+        <p class="filler">section 5 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 5 level 3 item 0</p>
+          <p class="filler">section 5 level 3 item 1</p>
+          <p class="filler">section 5 level 3 item 2</p>
+          <p class="filler">section 5 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 5 level 4 item 0</p>
+            <p class="filler">section 5 level 4 item 1</p>
+            <p class="filler">section 5 level 4 item 2</p>
+            <p class="filler">section 5 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 5 level 5 item 0</p>
+              <p class="filler">section 5 level 5 item 1</p>
+              <p class="filler">section 5 level 5 item 2</p>
+              <p class="filler">section 5 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 5 level 6 item 0</p>
+                <p class="filler">section 5 level 6 item 1</p>
+                <p class="filler">section 5 level 6 item 2</p>
+                <p class="filler">section 5 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 5 level 7 item 0</p>
+                  <p class="filler">section 5 level 7 item 1</p>
+                  <p class="filler">section 5 level 7 item 2</p>
+                  <p class="filler">section 5 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 5 level 8 item 0</p>
+                    <p class="filler">section 5 level 8 item 1</p>
+                    <p class="filler">section 5 level 8 item 2</p>
+                    <p class="filler">section 5 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 5 level 9 item 0</p>
+                      <p class="filler">section 5 level 9 item 1</p>
+                      <p class="filler">section 5 level 9 item 2</p>
+                      <p class="filler">section 5 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 5 level 10 item 0</p>
+                        <p class="filler">section 5 level 10 item 1</p>
+                        <p class="filler">section 5 level 10 item 2</p>
+                        <p class="filler">section 5 level 10 item 3</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-6">
+    <div class="level-1">
+      <p class="filler">section 6 level 1 item 0</p>
+      <p class="filler">section 6 level 1 item 1</p>
+      <p class="filler">section 6 level 1 item 2</p>
+      <p class="filler">section 6 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 6 level 2 item 0</p>
+        <p class="filler">section 6 level 2 item 1</p>
+        <p class="filler">section 6 level 2 item 2</p>
+        <p class="filler">section 6 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 6 level 3 item 0</p>
+          <p class="filler">section 6 level 3 item 1</p>
+          <p class="filler">section 6 level 3 item 2</p>
+          <p class="filler">section 6 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 6 level 4 item 0</p>
+            <p class="filler">section 6 level 4 item 1</p>
+            <p class="filler">section 6 level 4 item 2</p>
+            <p class="filler">section 6 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 6 level 5 item 0</p>
+              <p class="filler">section 6 level 5 item 1</p>
+              <p class="filler">section 6 level 5 item 2</p>
+              <p class="filler">section 6 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 6 level 6 item 0</p>
+                <p class="filler">section 6 level 6 item 1</p>
+                <p class="filler">section 6 level 6 item 2</p>
+                <p class="filler">section 6 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 6 level 7 item 0</p>
+                  <p class="filler">section 6 level 7 item 1</p>
+                  <p class="filler">section 6 level 7 item 2</p>
+                  <p class="filler">section 6 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 6 level 8 item 0</p>
+                    <p class="filler">section 6 level 8 item 1</p>
+                    <p class="filler">section 6 level 8 item 2</p>
+                    <p class="filler">section 6 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 6 level 9 item 0</p>
+                      <p class="filler">section 6 level 9 item 1</p>
+                      <p class="filler">section 6 level 9 item 2</p>
+                      <p class="filler">section 6 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 6 level 10 item 0</p>
+                        <p class="filler">section 6 level 10 item 1</p>
+                        <p class="filler">section 6 level 10 item 2</p>
+                        <p class="filler">section 6 level 10 item 3</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-7">
+    <div class="level-1">
+      <p class="filler">section 7 level 1 item 0</p>
+      <p class="filler">section 7 level 1 item 1</p>
+      <p class="filler">section 7 level 1 item 2</p>
+      <p class="filler">section 7 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 7 level 2 item 0</p>
+        <p class="filler">section 7 level 2 item 1</p>
+        <p class="filler">section 7 level 2 item 2</p>
+        <p class="filler">section 7 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 7 level 3 item 0</p>
+          <p class="filler">section 7 level 3 item 1</p>
+          <p class="filler">section 7 level 3 item 2</p>
+          <p class="filler">section 7 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 7 level 4 item 0</p>
+            <p class="filler">section 7 level 4 item 1</p>
+            <p class="filler">section 7 level 4 item 2</p>
+            <p class="filler">section 7 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 7 level 5 item 0</p>
+              <p class="filler">section 7 level 5 item 1</p>
+              <p class="filler">section 7 level 5 item 2</p>
+              <p class="filler">section 7 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 7 level 6 item 0</p>
+                <p class="filler">section 7 level 6 item 1</p>
+                <p class="filler">section 7 level 6 item 2</p>
+                <p class="filler">section 7 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 7 level 7 item 0</p>
+                  <p class="filler">section 7 level 7 item 1</p>
+                  <p class="filler">section 7 level 7 item 2</p>
+                  <p class="filler">section 7 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 7 level 8 item 0</p>
+                    <p class="filler">section 7 level 8 item 1</p>
+                    <p class="filler">section 7 level 8 item 2</p>
+                    <p class="filler">section 7 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 7 level 9 item 0</p>
+                      <p class="filler">section 7 level 9 item 1</p>
+                      <p class="filler">section 7 level 9 item 2</p>
+                      <p class="filler">section 7 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 7 level 10 item 0</p>
+                        <p class="filler">section 7 level 10 item 1</p>
+                        <p class="filler">section 7 level 10 item 2</p>
+                        <p class="filler">section 7 level 10 item 3</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-8">
+    <div class="level-1">
+      <p class="filler">section 8 level 1 item 0</p>
+      <p class="filler">section 8 level 1 item 1</p>
+      <p class="filler">section 8 level 1 item 2</p>
+      <p class="filler">section 8 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 8 level 2 item 0</p>
+        <p class="filler">section 8 level 2 item 1</p>
+        <p class="filler">section 8 level 2 item 2</p>
+        <p class="filler">section 8 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 8 level 3 item 0</p>
+          <p class="filler">section 8 level 3 item 1</p>
+          <p class="filler">section 8 level 3 item 2</p>
+          <p class="filler">section 8 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 8 level 4 item 0</p>
+            <p class="filler">section 8 level 4 item 1</p>
+            <p class="filler">section 8 level 4 item 2</p>
+            <p class="filler">section 8 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 8 level 5 item 0</p>
+              <p class="filler">section 8 level 5 item 1</p>
+              <p class="filler">section 8 level 5 item 2</p>
+              <p class="filler">section 8 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 8 level 6 item 0</p>
+                <p class="filler">section 8 level 6 item 1</p>
+                <p class="filler">section 8 level 6 item 2</p>
+                <p class="filler">section 8 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 8 level 7 item 0</p>
+                  <p class="filler">section 8 level 7 item 1</p>
+                  <p class="filler">section 8 level 7 item 2</p>
+                  <p class="filler">section 8 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 8 level 8 item 0</p>
+                    <p class="filler">section 8 level 8 item 1</p>
+                    <p class="filler">section 8 level 8 item 2</p>
+                    <p class="filler">section 8 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 8 level 9 item 0</p>
+                      <p class="filler">section 8 level 9 item 1</p>
+                      <p class="filler">section 8 level 9 item 2</p>
+                      <p class="filler">section 8 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 8 level 10 item 0</p>
+                        <p class="filler">section 8 level 10 item 1</p>
+                        <p class="filler">section 8 level 10 item 2</p>
+                        <p class="filler">section 8 level 10 item 3</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-9">
+    <div class="level-1">
+      <p class="filler">section 9 level 1 item 0</p>
+      <p class="filler">section 9 level 1 item 1</p>
+      <p class="filler">section 9 level 1 item 2</p>
+      <p class="filler">section 9 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 9 level 2 item 0</p>
+        <p class="filler">section 9 level 2 item 1</p>
+        <p class="filler">section 9 level 2 item 2</p>
+        <p class="filler">section 9 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 9 level 3 item 0</p>
+          <p class="filler">section 9 level 3 item 1</p>
+          <p class="filler">section 9 level 3 item 2</p>
+          <p class="filler">section 9 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 9 level 4 item 0</p>
+            <p class="filler">section 9 level 4 item 1</p>
+            <p class="filler">section 9 level 4 item 2</p>
+            <p class="filler">section 9 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 9 level 5 item 0</p>
+              <p class="filler">section 9 level 5 item 1</p>
+              <p class="filler">section 9 level 5 item 2</p>
+              <p class="filler">section 9 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 9 level 6 item 0</p>
+                <p class="filler">section 9 level 6 item 1</p>
+                <p class="filler">section 9 level 6 item 2</p>
+                <p class="filler">section 9 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 9 level 7 item 0</p>
+                  <p class="filler">section 9 level 7 item 1</p>
+                  <p class="filler">section 9 level 7 item 2</p>
+                  <p class="filler">section 9 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 9 level 8 item 0</p>
+                    <p class="filler">section 9 level 8 item 1</p>
+                    <p class="filler">section 9 level 8 item 2</p>
+                    <p class="filler">section 9 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 9 level 9 item 0</p>
+                      <p class="filler">section 9 level 9 item 1</p>
+                      <p class="filler">section 9 level 9 item 2</p>
+                      <p class="filler">section 9 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 9 level 10 item 0</p>
+                        <p class="filler">section 9 level 10 item 1</p>
+                        <p class="filler">section 9 level 10 item 2</p>
+                        <p class="filler">section 9 level 10 item 3</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-10">
+    <div class="level-1">
+      <p class="filler">section 10 level 1 item 0</p>
+      <p class="filler">section 10 level 1 item 1</p>
+      <p class="filler">section 10 level 1 item 2</p>
+      <p class="filler">section 10 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 10 level 2 item 0</p>
+        <p class="filler">section 10 level 2 item 1</p>
+        <p class="filler">section 10 level 2 item 2</p>
+        <p class="filler">section 10 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 10 level 3 item 0</p>
+          <p class="filler">section 10 level 3 item 1</p>
+          <p class="filler">section 10 level 3 item 2</p>
+          <p class="filler">section 10 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 10 level 4 item 0</p>
+            <p class="filler">section 10 level 4 item 1</p>
+            <p class="filler">section 10 level 4 item 2</p>
+            <p class="filler">section 10 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 10 level 5 item 0</p>
+              <p class="filler">section 10 level 5 item 1</p>
+              <p class="filler">section 10 level 5 item 2</p>
+              <p class="filler">section 10 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 10 level 6 item 0</p>
+                <p class="filler">section 10 level 6 item 1</p>
+                <p class="filler">section 10 level 6 item 2</p>
+                <p class="filler">section 10 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 10 level 7 item 0</p>
+                  <p class="filler">section 10 level 7 item 1</p>
+                  <p class="filler">section 10 level 7 item 2</p>
+                  <p class="filler">section 10 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 10 level 8 item 0</p>
+                    <p class="filler">section 10 level 8 item 1</p>
+                    <p class="filler">section 10 level 8 item 2</p>
+                    <p class="filler">section 10 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 10 level 9 item 0</p>
+                      <p class="filler">section 10 level 9 item 1</p>
+                      <p class="filler">section 10 level 9 item 2</p>
+                      <p class="filler">section 10 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 10 level 10 item 0</p>
+                        <p class="filler">section 10 level 10 item 1</p>
+                        <p class="filler">section 10 level 10 item 2</p>
+                        <p class="filler">section 10 level 10 item 3</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-11">
+    <div class="level-1">
+      <p class="filler">section 11 level 1 item 0</p>
+      <p class="filler">section 11 level 1 item 1</p>
+      <p class="filler">section 11 level 1 item 2</p>
+      <p class="filler">section 11 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 11 level 2 item 0</p>
+        <p class="filler">section 11 level 2 item 1</p>
+        <p class="filler">section 11 level 2 item 2</p>
+        <p class="filler">section 11 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 11 level 3 item 0</p>
+          <p class="filler">section 11 level 3 item 1</p>
+          <p class="filler">section 11 level 3 item 2</p>
+          <p class="filler">section 11 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 11 level 4 item 0</p>
+            <p class="filler">section 11 level 4 item 1</p>
+            <p class="filler">section 11 level 4 item 2</p>
+            <p class="filler">section 11 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 11 level 5 item 0</p>
+              <p class="filler">section 11 level 5 item 1</p>
+              <p class="filler">section 11 level 5 item 2</p>
+              <p class="filler">section 11 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 11 level 6 item 0</p>
+                <p class="filler">section 11 level 6 item 1</p>
+                <p class="filler">section 11 level 6 item 2</p>
+                <p class="filler">section 11 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 11 level 7 item 0</p>
+                  <p class="filler">section 11 level 7 item 1</p>
+                  <p class="filler">section 11 level 7 item 2</p>
+                  <p class="filler">section 11 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 11 level 8 item 0</p>
+                    <p class="filler">section 11 level 8 item 1</p>
+                    <p class="filler">section 11 level 8 item 2</p>
+                    <p class="filler">section 11 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 11 level 9 item 0</p>
+                      <p class="filler">section 11 level 9 item 1</p>
+                      <p class="filler">section 11 level 9 item 2</p>
+                      <p class="filler">section 11 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 11 level 10 item 0</p>
+                        <p class="filler">section 11 level 10 item 1</p>
+                        <p class="filler">section 11 level 10 item 2</p>
+                        <p class="filler">section 11 level 10 item 3</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-12">
+    <div class="level-1">
+      <p class="filler">section 12 level 1 item 0</p>
+      <p class="filler">section 12 level 1 item 1</p>
+      <p class="filler">section 12 level 1 item 2</p>
+      <p class="filler">section 12 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 12 level 2 item 0</p>
+        <p class="filler">section 12 level 2 item 1</p>
+        <p class="filler">section 12 level 2 item 2</p>
+        <p class="filler">section 12 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 12 level 3 item 0</p>
+          <p class="filler">section 12 level 3 item 1</p>
+          <p class="filler">section 12 level 3 item 2</p>
+          <p class="filler">section 12 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 12 level 4 item 0</p>
+            <p class="filler">section 12 level 4 item 1</p>
+            <p class="filler">section 12 level 4 item 2</p>
+            <p class="filler">section 12 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 12 level 5 item 0</p>
+              <p class="filler">section 12 level 5 item 1</p>
+              <p class="filler">section 12 level 5 item 2</p>
+              <p class="filler">section 12 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 12 level 6 item 0</p>
+                <p class="filler">section 12 level 6 item 1</p>
+                <p class="filler">section 12 level 6 item 2</p>
+                <p class="filler">section 12 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 12 level 7 item 0</p>
+                  <p class="filler">section 12 level 7 item 1</p>
+                  <p class="filler">section 12 level 7 item 2</p>
+                  <p class="filler">section 12 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 12 level 8 item 0</p>
+                    <p class="filler">section 12 level 8 item 1</p>
+                    <p class="filler">section 12 level 8 item 2</p>
+                    <p class="filler">section 12 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 12 level 9 item 0</p>
+                      <p class="filler">section 12 level 9 item 1</p>
+                      <p class="filler">section 12 level 9 item 2</p>
+                      <p class="filler">section 12 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 12 level 10 item 0</p>
+                        <p class="filler">section 12 level 10 item 1</p>
+                        <p class="filler">section 12 level 10 item 2</p>
+                        <p class="filler">section 12 level 10 item 3</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-13">
+    <div class="level-1">
+      <p class="filler">section 13 level 1 item 0</p>
+      <p class="filler">section 13 level 1 item 1</p>
+      <p class="filler">section 13 level 1 item 2</p>
+      <p class="filler">section 13 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 13 level 2 item 0</p>
+        <p class="filler">section 13 level 2 item 1</p>
+        <p class="filler">section 13 level 2 item 2</p>
+        <p class="filler">section 13 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 13 level 3 item 0</p>
+          <p class="filler">section 13 level 3 item 1</p>
+          <p class="filler">section 13 level 3 item 2</p>
+          <p class="filler">section 13 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 13 level 4 item 0</p>
+            <p class="filler">section 13 level 4 item 1</p>
+            <p class="filler">section 13 level 4 item 2</p>
+            <p class="filler">section 13 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 13 level 5 item 0</p>
+              <p class="filler">section 13 level 5 item 1</p>
+              <p class="filler">section 13 level 5 item 2</p>
+              <p class="filler">section 13 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 13 level 6 item 0</p>
+                <p class="filler">section 13 level 6 item 1</p>
+                <p class="filler">section 13 level 6 item 2</p>
+                <p class="filler">section 13 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 13 level 7 item 0</p>
+                  <p class="filler">section 13 level 7 item 1</p>
+                  <p class="filler">section 13 level 7 item 2</p>
+                  <p class="filler">section 13 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 13 level 8 item 0</p>
+                    <p class="filler">section 13 level 8 item 1</p>
+                    <p class="filler">section 13 level 8 item 2</p>
+                    <p class="filler">section 13 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 13 level 9 item 0</p>
+                      <p class="filler">section 13 level 9 item 1</p>
+                      <p class="filler">section 13 level 9 item 2</p>
+                      <p class="filler">section 13 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 13 level 10 item 0</p>
+                        <p class="filler">section 13 level 10 item 1</p>
+                        <p class="filler">section 13 level 10 item 2</p>
+                        <p class="filler">section 13 level 10 item 3</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-14">
+    <div class="level-1">
+      <p class="filler">section 14 level 1 item 0</p>
+      <p class="filler">section 14 level 1 item 1</p>
+      <p class="filler">section 14 level 1 item 2</p>
+      <p class="filler">section 14 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 14 level 2 item 0</p>
+        <p class="filler">section 14 level 2 item 1</p>
+        <p class="filler">section 14 level 2 item 2</p>
+        <p class="filler">section 14 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 14 level 3 item 0</p>
+          <p class="filler">section 14 level 3 item 1</p>
+          <p class="filler">section 14 level 3 item 2</p>
+          <p class="filler">section 14 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 14 level 4 item 0</p>
+            <p class="filler">section 14 level 4 item 1</p>
+            <p class="filler">section 14 level 4 item 2</p>
+            <p class="filler">section 14 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 14 level 5 item 0</p>
+              <p class="filler">section 14 level 5 item 1</p>
+              <p class="filler">section 14 level 5 item 2</p>
+              <p class="filler">section 14 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 14 level 6 item 0</p>
+                <p class="filler">section 14 level 6 item 1</p>
+                <p class="filler">section 14 level 6 item 2</p>
+                <p class="filler">section 14 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 14 level 7 item 0</p>
+                  <p class="filler">section 14 level 7 item 1</p>
+                  <p class="filler">section 14 level 7 item 2</p>
+                  <p class="filler">section 14 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 14 level 8 item 0</p>
+                    <p class="filler">section 14 level 8 item 1</p>
+                    <p class="filler">section 14 level 8 item 2</p>
+                    <p class="filler">section 14 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 14 level 9 item 0</p>
+                      <p class="filler">section 14 level 9 item 1</p>
+                      <p class="filler">section 14 level 9 item 2</p>
+                      <p class="filler">section 14 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 14 level 10 item 0</p>
+                        <p class="filler">section 14 level 10 item 1</p>
+                        <p class="filler">section 14 level 10 item 2</p>
+                        <p class="filler">section 14 level 10 item 3</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-15">
+    <div class="level-1">
+      <p class="filler">section 15 level 1 item 0</p>
+      <p class="filler">section 15 level 1 item 1</p>
+      <p class="filler">section 15 level 1 item 2</p>
+      <p class="filler">section 15 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 15 level 2 item 0</p>
+        <p class="filler">section 15 level 2 item 1</p>
+        <p class="filler">section 15 level 2 item 2</p>
+        <p class="filler">section 15 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 15 level 3 item 0</p>
+          <p class="filler">section 15 level 3 item 1</p>
+          <p class="filler">section 15 level 3 item 2</p>
+          <p class="filler">section 15 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 15 level 4 item 0</p>
+            <p class="filler">section 15 level 4 item 1</p>
+            <p class="filler">section 15 level 4 item 2</p>
+            <p class="filler">section 15 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 15 level 5 item 0</p>
+              <p class="filler">section 15 level 5 item 1</p>
+              <p class="filler">section 15 level 5 item 2</p>
+              <p class="filler">section 15 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 15 level 6 item 0</p>
+                <p class="filler">section 15 level 6 item 1</p>
+                <p class="filler">section 15 level 6 item 2</p>
+                <p class="filler">section 15 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 15 level 7 item 0</p>
+                  <p class="filler">section 15 level 7 item 1</p>
+                  <p class="filler">section 15 level 7 item 2</p>
+                  <p class="filler">section 15 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 15 level 8 item 0</p>
+                    <p class="filler">section 15 level 8 item 1</p>
+                    <p class="filler">section 15 level 8 item 2</p>
+                    <p class="filler">section 15 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 15 level 9 item 0</p>
+                      <p class="filler">section 15 level 9 item 1</p>
+                      <p class="filler">section 15 level 9 item 2</p>
+                      <p class="filler">section 15 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 15 level 10 item 0</p>
+                        <p class="filler">section 15 level 10 item 1</p>
+                        <p class="filler">section 15 level 10 item 2</p>
+                        <p class="filler">section 15 level 10 item 3</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-16">
+    <div class="level-1">
+      <p class="filler">section 16 level 1 item 0</p>
+      <p class="filler">section 16 level 1 item 1</p>
+      <p class="filler">section 16 level 1 item 2</p>
+      <p class="filler">section 16 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 16 level 2 item 0</p>
+        <p class="filler">section 16 level 2 item 1</p>
+        <p class="filler">section 16 level 2 item 2</p>
+        <p class="filler">section 16 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 16 level 3 item 0</p>
+          <p class="filler">section 16 level 3 item 1</p>
+          <p class="filler">section 16 level 3 item 2</p>
+          <p class="filler">section 16 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 16 level 4 item 0</p>
+            <p class="filler">section 16 level 4 item 1</p>
+            <p class="filler">section 16 level 4 item 2</p>
+            <p class="filler">section 16 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 16 level 5 item 0</p>
+              <p class="filler">section 16 level 5 item 1</p>
+              <p class="filler">section 16 level 5 item 2</p>
+              <p class="filler">section 16 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 16 level 6 item 0</p>
+                <p class="filler">section 16 level 6 item 1</p>
+                <p class="filler">section 16 level 6 item 2</p>
+                <p class="filler">section 16 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 16 level 7 item 0</p>
+                  <p class="filler">section 16 level 7 item 1</p>
+                  <p class="filler">section 16 level 7 item 2</p>
+                  <p class="filler">section 16 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 16 level 8 item 0</p>
+                    <p class="filler">section 16 level 8 item 1</p>
+                    <p class="filler">section 16 level 8 item 2</p>
+                    <p class="filler">section 16 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 16 level 9 item 0</p>
+                      <p class="filler">section 16 level 9 item 1</p>
+                      <p class="filler">section 16 level 9 item 2</p>
+                      <p class="filler">section 16 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 16 level 10 item 0</p>
+                        <p class="filler">section 16 level 10 item 1</p>
+                        <p class="filler">section 16 level 10 item 2</p>
+                        <p class="filler">section 16 level 10 item 3</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-17">
+    <div class="level-1">
+      <p class="filler">section 17 level 1 item 0</p>
+      <p class="filler">section 17 level 1 item 1</p>
+      <p class="filler">section 17 level 1 item 2</p>
+      <p class="filler">section 17 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 17 level 2 item 0</p>
+        <p class="filler">section 17 level 2 item 1</p>
+        <p class="filler">section 17 level 2 item 2</p>
+        <p class="filler">section 17 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 17 level 3 item 0</p>
+          <p class="filler">section 17 level 3 item 1</p>
+          <p class="filler">section 17 level 3 item 2</p>
+          <p class="filler">section 17 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 17 level 4 item 0</p>
+            <p class="filler">section 17 level 4 item 1</p>
+            <p class="filler">section 17 level 4 item 2</p>
+            <p class="filler">section 17 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 17 level 5 item 0</p>
+              <p class="filler">section 17 level 5 item 1</p>
+              <p class="filler">section 17 level 5 item 2</p>
+              <p class="filler">section 17 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 17 level 6 item 0</p>
+                <p class="filler">section 17 level 6 item 1</p>
+                <p class="filler">section 17 level 6 item 2</p>
+                <p class="filler">section 17 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 17 level 7 item 0</p>
+                  <p class="filler">section 17 level 7 item 1</p>
+                  <p class="filler">section 17 level 7 item 2</p>
+                  <p class="filler">section 17 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 17 level 8 item 0</p>
+                    <p class="filler">section 17 level 8 item 1</p>
+                    <p class="filler">section 17 level 8 item 2</p>
+                    <p class="filler">section 17 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 17 level 9 item 0</p>
+                      <p class="filler">section 17 level 9 item 1</p>
+                      <p class="filler">section 17 level 9 item 2</p>
+                      <p class="filler">section 17 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 17 level 10 item 0</p>
+                        <p class="filler">section 17 level 10 item 1</p>
+                        <p class="filler">section 17 level 10 item 2</p>
+                        <p class="filler">section 17 level 10 item 3</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-18">
+    <div class="level-1">
+      <p class="filler">section 18 level 1 item 0</p>
+      <p class="filler">section 18 level 1 item 1</p>
+      <p class="filler">section 18 level 1 item 2</p>
+      <p class="filler">section 18 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 18 level 2 item 0</p>
+        <p class="filler">section 18 level 2 item 1</p>
+        <p class="filler">section 18 level 2 item 2</p>
+        <p class="filler">section 18 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 18 level 3 item 0</p>
+          <p class="filler">section 18 level 3 item 1</p>
+          <p class="filler">section 18 level 3 item 2</p>
+          <p class="filler">section 18 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 18 level 4 item 0</p>
+            <p class="filler">section 18 level 4 item 1</p>
+            <p class="filler">section 18 level 4 item 2</p>
+            <p class="filler">section 18 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 18 level 5 item 0</p>
+              <p class="filler">section 18 level 5 item 1</p>
+              <p class="filler">section 18 level 5 item 2</p>
+              <p class="filler">section 18 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 18 level 6 item 0</p>
+                <p class="filler">section 18 level 6 item 1</p>
+                <p class="filler">section 18 level 6 item 2</p>
+                <p class="filler">section 18 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 18 level 7 item 0</p>
+                  <p class="filler">section 18 level 7 item 1</p>
+                  <p class="filler">section 18 level 7 item 2</p>
+                  <p class="filler">section 18 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 18 level 8 item 0</p>
+                    <p class="filler">section 18 level 8 item 1</p>
+                    <p class="filler">section 18 level 8 item 2</p>
+                    <p class="filler">section 18 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 18 level 9 item 0</p>
+                      <p class="filler">section 18 level 9 item 1</p>
+                      <p class="filler">section 18 level 9 item 2</p>
+                      <p class="filler">section 18 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 18 level 10 item 0</p>
+                        <p class="filler">section 18 level 10 item 1</p>
+                        <p class="filler">section 18 level 10 item 2</p>
+                        <p class="filler">section 18 level 10 item 3</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-19">
+    <div class="level-1">
+      <p class="filler">section 19 level 1 item 0</p>
+      <p class="filler">section 19 level 1 item 1</p>
+      <p class="filler">section 19 level 1 item 2</p>
+      <p class="filler">section 19 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 19 level 2 item 0</p>
+        <p class="filler">section 19 level 2 item 1</p>
+        <p class="filler">section 19 level 2 item 2</p>
+        <p class="filler">section 19 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 19 level 3 item 0</p>
+          <p class="filler">section 19 level 3 item 1</p>
+          <p class="filler">section 19 level 3 item 2</p>
+          <p class="filler">section 19 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 19 level 4 item 0</p>
+            <p class="filler">section 19 level 4 item 1</p>
+            <p class="filler">section 19 level 4 item 2</p>
+            <p class="filler">section 19 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 19 level 5 item 0</p>
+              <p class="filler">section 19 level 5 item 1</p>
+              <p class="filler">section 19 level 5 item 2</p>
+              <p class="filler">section 19 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 19 level 6 item 0</p>
+                <p class="filler">section 19 level 6 item 1</p>
+                <p class="filler">section 19 level 6 item 2</p>
+                <p class="filler">section 19 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 19 level 7 item 0</p>
+                  <p class="filler">section 19 level 7 item 1</p>
+                  <p class="filler">section 19 level 7 item 2</p>
+                  <p class="filler">section 19 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 19 level 8 item 0</p>
+                    <p class="filler">section 19 level 8 item 1</p>
+                    <p class="filler">section 19 level 8 item 2</p>
+                    <p class="filler">section 19 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 19 level 9 item 0</p>
+                      <p class="filler">section 19 level 9 item 1</p>
+                      <p class="filler">section 19 level 9 item 2</p>
+                      <p class="filler">section 19 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 19 level 10 item 0</p>
+                        <p class="filler">section 19 level 10 item 1</p>
+                        <p class="filler">section 19 level 10 item 2</p>
+                        <p class="filler">section 19 level 10 item 3</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-20">
+    <div class="level-1">
+      <p class="filler">section 20 level 1 item 0</p>
+      <p class="filler">section 20 level 1 item 1</p>
+      <p class="filler">section 20 level 1 item 2</p>
+      <p class="filler">section 20 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 20 level 2 item 0</p>
+        <p class="filler">section 20 level 2 item 1</p>
+        <p class="filler">section 20 level 2 item 2</p>
+        <p class="filler">section 20 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 20 level 3 item 0</p>
+          <p class="filler">section 20 level 3 item 1</p>
+          <p class="filler">section 20 level 3 item 2</p>
+          <p class="filler">section 20 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 20 level 4 item 0</p>
+            <p class="filler">section 20 level 4 item 1</p>
+            <p class="filler">section 20 level 4 item 2</p>
+            <p class="filler">section 20 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 20 level 5 item 0</p>
+              <p class="filler">section 20 level 5 item 1</p>
+              <p class="filler">section 20 level 5 item 2</p>
+              <p class="filler">section 20 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 20 level 6 item 0</p>
+                <p class="filler">section 20 level 6 item 1</p>
+                <p class="filler">section 20 level 6 item 2</p>
+                <p class="filler">section 20 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 20 level 7 item 0</p>
+                  <p class="filler">section 20 level 7 item 1</p>
+                  <p class="filler">section 20 level 7 item 2</p>
+                  <p class="filler">section 20 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 20 level 8 item 0</p>
+                    <p class="filler">section 20 level 8 item 1</p>
+                    <p class="filler">section 20 level 8 item 2</p>
+                    <p class="filler">section 20 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 20 level 9 item 0</p>
+                      <p class="filler">section 20 level 9 item 1</p>
+                      <p class="filler">section 20 level 9 item 2</p>
+                      <p class="filler">section 20 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 20 level 10 item 0</p>
+                        <p class="filler">section 20 level 10 item 1</p>
+                        <p class="filler">section 20 level 10 item 2</p>
+                        <p class="filler">section 20 level 10 item 3</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-21">
+    <div class="level-1">
+      <p class="filler">section 21 level 1 item 0</p>
+      <p class="filler">section 21 level 1 item 1</p>
+      <p class="filler">section 21 level 1 item 2</p>
+      <p class="filler">section 21 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 21 level 2 item 0</p>
+        <p class="filler">section 21 level 2 item 1</p>
+        <p class="filler">section 21 level 2 item 2</p>
+        <p class="filler">section 21 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 21 level 3 item 0</p>
+          <p class="filler">section 21 level 3 item 1</p>
+          <p class="filler">section 21 level 3 item 2</p>
+          <p class="filler">section 21 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 21 level 4 item 0</p>
+            <p class="filler">section 21 level 4 item 1</p>
+            <p class="filler">section 21 level 4 item 2</p>
+            <p class="filler">section 21 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 21 level 5 item 0</p>
+              <p class="filler">section 21 level 5 item 1</p>
+              <p class="filler">section 21 level 5 item 2</p>
+              <p class="filler">section 21 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 21 level 6 item 0</p>
+                <p class="filler">section 21 level 6 item 1</p>
+                <p class="filler">section 21 level 6 item 2</p>
+                <p class="filler">section 21 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 21 level 7 item 0</p>
+                  <p class="filler">section 21 level 7 item 1</p>
+                  <p class="filler">section 21 level 7 item 2</p>
+                  <p class="filler">section 21 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 21 level 8 item 0</p>
+                    <p class="filler">section 21 level 8 item 1</p>
+                    <p class="filler">section 21 level 8 item 2</p>
+                    <p class="filler">section 21 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 21 level 9 item 0</p>
+                      <p class="filler">section 21 level 9 item 1</p>
+                      <p class="filler">section 21 level 9 item 2</p>
+                      <p class="filler">section 21 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 21 level 10 item 0</p>
+                        <p class="filler">section 21 level 10 item 1</p>
+                        <p class="filler">section 21 level 10 item 2</p>
+                        <p class="filler">section 21 level 10 item 3</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-22">
+    <div class="level-1">
+      <p class="filler">section 22 level 1 item 0</p>
+      <p class="filler">section 22 level 1 item 1</p>
+      <p class="filler">section 22 level 1 item 2</p>
+      <p class="filler">section 22 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 22 level 2 item 0</p>
+        <p class="filler">section 22 level 2 item 1</p>
+        <p class="filler">section 22 level 2 item 2</p>
+        <p class="filler">section 22 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 22 level 3 item 0</p>
+          <p class="filler">section 22 level 3 item 1</p>
+          <p class="filler">section 22 level 3 item 2</p>
+          <p class="filler">section 22 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 22 level 4 item 0</p>
+            <p class="filler">section 22 level 4 item 1</p>
+            <p class="filler">section 22 level 4 item 2</p>
+            <p class="filler">section 22 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 22 level 5 item 0</p>
+              <p class="filler">section 22 level 5 item 1</p>
+              <p class="filler">section 22 level 5 item 2</p>
+              <p class="filler">section 22 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 22 level 6 item 0</p>
+                <p class="filler">section 22 level 6 item 1</p>
+                <p class="filler">section 22 level 6 item 2</p>
+                <p class="filler">section 22 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 22 level 7 item 0</p>
+                  <p class="filler">section 22 level 7 item 1</p>
+                  <p class="filler">section 22 level 7 item 2</p>
+                  <p class="filler">section 22 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 22 level 8 item 0</p>
+                    <p class="filler">section 22 level 8 item 1</p>
+                    <p class="filler">section 22 level 8 item 2</p>
+                    <p class="filler">section 22 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 22 level 9 item 0</p>
+                      <p class="filler">section 22 level 9 item 1</p>
+                      <p class="filler">section 22 level 9 item 2</p>
+                      <p class="filler">section 22 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 22 level 10 item 0</p>
+                        <p class="filler">section 22 level 10 item 1</p>
+                        <p class="filler">section 22 level 10 item 2</p>
+                        <p class="filler">section 22 level 10 item 3</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-23">
+    <div class="level-1">
+      <p class="filler">section 23 level 1 item 0</p>
+      <p class="filler">section 23 level 1 item 1</p>
+      <p class="filler">section 23 level 1 item 2</p>
+      <p class="filler">section 23 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 23 level 2 item 0</p>
+        <p class="filler">section 23 level 2 item 1</p>
+        <p class="filler">section 23 level 2 item 2</p>
+        <p class="filler">section 23 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 23 level 3 item 0</p>
+          <p class="filler">section 23 level 3 item 1</p>
+          <p class="filler">section 23 level 3 item 2</p>
+          <p class="filler">section 23 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 23 level 4 item 0</p>
+            <p class="filler">section 23 level 4 item 1</p>
+            <p class="filler">section 23 level 4 item 2</p>
+            <p class="filler">section 23 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 23 level 5 item 0</p>
+              <p class="filler">section 23 level 5 item 1</p>
+              <p class="filler">section 23 level 5 item 2</p>
+              <p class="filler">section 23 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 23 level 6 item 0</p>
+                <p class="filler">section 23 level 6 item 1</p>
+                <p class="filler">section 23 level 6 item 2</p>
+                <p class="filler">section 23 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 23 level 7 item 0</p>
+                  <p class="filler">section 23 level 7 item 1</p>
+                  <p class="filler">section 23 level 7 item 2</p>
+                  <p class="filler">section 23 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 23 level 8 item 0</p>
+                    <p class="filler">section 23 level 8 item 1</p>
+                    <p class="filler">section 23 level 8 item 2</p>
+                    <p class="filler">section 23 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 23 level 9 item 0</p>
+                      <p class="filler">section 23 level 9 item 1</p>
+                      <p class="filler">section 23 level 9 item 2</p>
+                      <p class="filler">section 23 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 23 level 10 item 0</p>
+                        <p class="filler">section 23 level 10 item 1</p>
+                        <p class="filler">section 23 level 10 item 2</p>
+                        <p class="filler">section 23 level 10 item 3</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-24">
+    <div class="level-1">
+      <p class="filler">section 24 level 1 item 0</p>
+      <p class="filler">section 24 level 1 item 1</p>
+      <p class="filler">section 24 level 1 item 2</p>
+      <p class="filler">section 24 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 24 level 2 item 0</p>
+        <p class="filler">section 24 level 2 item 1</p>
+        <p class="filler">section 24 level 2 item 2</p>
+        <p class="filler">section 24 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 24 level 3 item 0</p>
+          <p class="filler">section 24 level 3 item 1</p>
+          <p class="filler">section 24 level 3 item 2</p>
+          <p class="filler">section 24 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 24 level 4 item 0</p>
+            <p class="filler">section 24 level 4 item 1</p>
+            <p class="filler">section 24 level 4 item 2</p>
+            <p class="filler">section 24 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 24 level 5 item 0</p>
+              <p class="filler">section 24 level 5 item 1</p>
+              <p class="filler">section 24 level 5 item 2</p>
+              <p class="filler">section 24 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 24 level 6 item 0</p>
+                <p class="filler">section 24 level 6 item 1</p>
+                <p class="filler">section 24 level 6 item 2</p>
+                <p class="filler">section 24 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 24 level 7 item 0</p>
+                  <p class="filler">section 24 level 7 item 1</p>
+                  <p class="filler">section 24 level 7 item 2</p>
+                  <p class="filler">section 24 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 24 level 8 item 0</p>
+                    <p class="filler">section 24 level 8 item 1</p>
+                    <p class="filler">section 24 level 8 item 2</p>
+                    <p class="filler">section 24 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 24 level 9 item 0</p>
+                      <p class="filler">section 24 level 9 item 1</p>
+                      <p class="filler">section 24 level 9 item 2</p>
+                      <p class="filler">section 24 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 24 level 10 item 0</p>
+                        <p class="filler">section 24 level 10 item 1</p>
+                        <p class="filler">section 24 level 10 item 2</p>
+                        <p class="filler">section 24 level 10 item 3</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-25">
+    <div class="level-1">
+      <p class="filler">section 25 level 1 item 0</p>
+      <p class="filler">section 25 level 1 item 1</p>
+      <p class="filler">section 25 level 1 item 2</p>
+      <p class="filler">section 25 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 25 level 2 item 0</p>
+        <p class="filler">section 25 level 2 item 1</p>
+        <p class="filler">section 25 level 2 item 2</p>
+        <p class="filler">section 25 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 25 level 3 item 0</p>
+          <p class="filler">section 25 level 3 item 1</p>
+          <p class="filler">section 25 level 3 item 2</p>
+          <p class="filler">section 25 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 25 level 4 item 0</p>
+            <p class="filler">section 25 level 4 item 1</p>
+            <p class="filler">section 25 level 4 item 2</p>
+            <p class="filler">section 25 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 25 level 5 item 0</p>
+              <p class="filler">section 25 level 5 item 1</p>
+              <p class="filler">section 25 level 5 item 2</p>
+              <p class="filler">section 25 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 25 level 6 item 0</p>
+                <p class="filler">section 25 level 6 item 1</p>
+                <p class="filler">section 25 level 6 item 2</p>
+                <p class="filler">section 25 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 25 level 7 item 0</p>
+                  <p class="filler">section 25 level 7 item 1</p>
+                  <p class="filler">section 25 level 7 item 2</p>
+                  <p class="filler">section 25 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 25 level 8 item 0</p>
+                    <p class="filler">section 25 level 8 item 1</p>
+                    <p class="filler">section 25 level 8 item 2</p>
+                    <p class="filler">section 25 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 25 level 9 item 0</p>
+                      <p class="filler">section 25 level 9 item 1</p>
+                      <p class="filler">section 25 level 9 item 2</p>
+                      <p class="filler">section 25 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 25 level 10 item 0</p>
+                        <p class="filler">section 25 level 10 item 1</p>
+                        <p class="filler">section 25 level 10 item 2</p>
+                        <p class="filler">section 25 level 10 item 3</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-26">
+    <div class="level-1">
+      <p class="filler">section 26 level 1 item 0</p>
+      <p class="filler">section 26 level 1 item 1</p>
+      <p class="filler">section 26 level 1 item 2</p>
+      <p class="filler">section 26 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 26 level 2 item 0</p>
+        <p class="filler">section 26 level 2 item 1</p>
+        <p class="filler">section 26 level 2 item 2</p>
+        <p class="filler">section 26 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 26 level 3 item 0</p>
+          <p class="filler">section 26 level 3 item 1</p>
+          <p class="filler">section 26 level 3 item 2</p>
+          <p class="filler">section 26 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 26 level 4 item 0</p>
+            <p class="filler">section 26 level 4 item 1</p>
+            <p class="filler">section 26 level 4 item 2</p>
+            <p class="filler">section 26 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 26 level 5 item 0</p>
+              <p class="filler">section 26 level 5 item 1</p>
+              <p class="filler">section 26 level 5 item 2</p>
+              <p class="filler">section 26 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 26 level 6 item 0</p>
+                <p class="filler">section 26 level 6 item 1</p>
+                <p class="filler">section 26 level 6 item 2</p>
+                <p class="filler">section 26 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 26 level 7 item 0</p>
+                  <p class="filler">section 26 level 7 item 1</p>
+                  <p class="filler">section 26 level 7 item 2</p>
+                  <p class="filler">section 26 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 26 level 8 item 0</p>
+                    <p class="filler">section 26 level 8 item 1</p>
+                    <p class="filler">section 26 level 8 item 2</p>
+                    <p class="filler">section 26 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 26 level 9 item 0</p>
+                      <p class="filler">section 26 level 9 item 1</p>
+                      <p class="filler">section 26 level 9 item 2</p>
+                      <p class="filler">section 26 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 26 level 10 item 0</p>
+                        <p class="filler">section 26 level 10 item 1</p>
+                        <p class="filler">section 26 level 10 item 2</p>
+                        <p class="filler">section 26 level 10 item 3</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-27">
+    <div class="level-1">
+      <p class="filler">section 27 level 1 item 0</p>
+      <p class="filler">section 27 level 1 item 1</p>
+      <p class="filler">section 27 level 1 item 2</p>
+      <p class="filler">section 27 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 27 level 2 item 0</p>
+        <p class="filler">section 27 level 2 item 1</p>
+        <p class="filler">section 27 level 2 item 2</p>
+        <p class="filler">section 27 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 27 level 3 item 0</p>
+          <p class="filler">section 27 level 3 item 1</p>
+          <p class="filler">section 27 level 3 item 2</p>
+          <p class="filler">section 27 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 27 level 4 item 0</p>
+            <p class="filler">section 27 level 4 item 1</p>
+            <p class="filler">section 27 level 4 item 2</p>
+            <p class="filler">section 27 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 27 level 5 item 0</p>
+              <p class="filler">section 27 level 5 item 1</p>
+              <p class="filler">section 27 level 5 item 2</p>
+              <p class="filler">section 27 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 27 level 6 item 0</p>
+                <p class="filler">section 27 level 6 item 1</p>
+                <p class="filler">section 27 level 6 item 2</p>
+                <p class="filler">section 27 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 27 level 7 item 0</p>
+                  <p class="filler">section 27 level 7 item 1</p>
+                  <p class="filler">section 27 level 7 item 2</p>
+                  <p class="filler">section 27 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 27 level 8 item 0</p>
+                    <p class="filler">section 27 level 8 item 1</p>
+                    <p class="filler">section 27 level 8 item 2</p>
+                    <p class="filler">section 27 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 27 level 9 item 0</p>
+                      <p class="filler">section 27 level 9 item 1</p>
+                      <p class="filler">section 27 level 9 item 2</p>
+                      <p class="filler">section 27 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 27 level 10 item 0</p>
+                        <p class="filler">section 27 level 10 item 1</p>
+                        <p class="filler">section 27 level 10 item 2</p>
+                        <p class="filler">section 27 level 10 item 3</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-28">
+    <div class="level-1">
+      <p class="filler">section 28 level 1 item 0</p>
+      <p class="filler">section 28 level 1 item 1</p>
+      <p class="filler">section 28 level 1 item 2</p>
+      <p class="filler">section 28 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 28 level 2 item 0</p>
+        <p class="filler">section 28 level 2 item 1</p>
+        <p class="filler">section 28 level 2 item 2</p>
+        <p class="filler">section 28 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 28 level 3 item 0</p>
+          <p class="filler">section 28 level 3 item 1</p>
+          <p class="filler">section 28 level 3 item 2</p>
+          <p class="filler">section 28 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 28 level 4 item 0</p>
+            <p class="filler">section 28 level 4 item 1</p>
+            <p class="filler">section 28 level 4 item 2</p>
+            <p class="filler">section 28 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 28 level 5 item 0</p>
+              <p class="filler">section 28 level 5 item 1</p>
+              <p class="filler">section 28 level 5 item 2</p>
+              <p class="filler">section 28 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 28 level 6 item 0</p>
+                <p class="filler">section 28 level 6 item 1</p>
+                <p class="filler">section 28 level 6 item 2</p>
+                <p class="filler">section 28 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 28 level 7 item 0</p>
+                  <p class="filler">section 28 level 7 item 1</p>
+                  <p class="filler">section 28 level 7 item 2</p>
+                  <p class="filler">section 28 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 28 level 8 item 0</p>
+                    <p class="filler">section 28 level 8 item 1</p>
+                    <p class="filler">section 28 level 8 item 2</p>
+                    <p class="filler">section 28 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 28 level 9 item 0</p>
+                      <p class="filler">section 28 level 9 item 1</p>
+                      <p class="filler">section 28 level 9 item 2</p>
+                      <p class="filler">section 28 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 28 level 10 item 0</p>
+                        <p class="filler">section 28 level 10 item 1</p>
+                        <p class="filler">section 28 level 10 item 2</p>
+                        <p class="filler">section 28 level 10 item 3</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-29">
+    <div class="level-1">
+      <p class="filler">section 29 level 1 item 0</p>
+      <p class="filler">section 29 level 1 item 1</p>
+      <p class="filler">section 29 level 1 item 2</p>
+      <p class="filler">section 29 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 29 level 2 item 0</p>
+        <p class="filler">section 29 level 2 item 1</p>
+        <p class="filler">section 29 level 2 item 2</p>
+        <p class="filler">section 29 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 29 level 3 item 0</p>
+          <p class="filler">section 29 level 3 item 1</p>
+          <p class="filler">section 29 level 3 item 2</p>
+          <p class="filler">section 29 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 29 level 4 item 0</p>
+            <p class="filler">section 29 level 4 item 1</p>
+            <p class="filler">section 29 level 4 item 2</p>
+            <p class="filler">section 29 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 29 level 5 item 0</p>
+              <p class="filler">section 29 level 5 item 1</p>
+              <p class="filler">section 29 level 5 item 2</p>
+              <p class="filler">section 29 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 29 level 6 item 0</p>
+                <p class="filler">section 29 level 6 item 1</p>
+                <p class="filler">section 29 level 6 item 2</p>
+                <p class="filler">section 29 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 29 level 7 item 0</p>
+                  <p class="filler">section 29 level 7 item 1</p>
+                  <p class="filler">section 29 level 7 item 2</p>
+                  <p class="filler">section 29 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 29 level 8 item 0</p>
+                    <p class="filler">section 29 level 8 item 1</p>
+                    <p class="filler">section 29 level 8 item 2</p>
+                    <p class="filler">section 29 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 29 level 9 item 0</p>
+                      <p class="filler">section 29 level 9 item 1</p>
+                      <p class="filler">section 29 level 9 item 2</p>
+                      <p class="filler">section 29 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 29 level 10 item 0</p>
+                        <p class="filler">section 29 level 10 item 1</p>
+                        <p class="filler">section 29 level 10 item 2</p>
+                        <p class="filler">section 29 level 10 item 3</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-30">
+    <div class="level-1">
+      <p class="filler">section 30 level 1 item 0</p>
+      <p class="filler">section 30 level 1 item 1</p>
+      <p class="filler">section 30 level 1 item 2</p>
+      <p class="filler">section 30 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 30 level 2 item 0</p>
+        <p class="filler">section 30 level 2 item 1</p>
+        <p class="filler">section 30 level 2 item 2</p>
+        <p class="filler">section 30 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 30 level 3 item 0</p>
+          <p class="filler">section 30 level 3 item 1</p>
+          <p class="filler">section 30 level 3 item 2</p>
+          <p class="filler">section 30 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 30 level 4 item 0</p>
+            <p class="filler">section 30 level 4 item 1</p>
+            <p class="filler">section 30 level 4 item 2</p>
+            <p class="filler">section 30 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 30 level 5 item 0</p>
+              <p class="filler">section 30 level 5 item 1</p>
+              <p class="filler">section 30 level 5 item 2</p>
+              <p class="filler">section 30 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 30 level 6 item 0</p>
+                <p class="filler">section 30 level 6 item 1</p>
+                <p class="filler">section 30 level 6 item 2</p>
+                <p class="filler">section 30 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 30 level 7 item 0</p>
+                  <p class="filler">section 30 level 7 item 1</p>
+                  <p class="filler">section 30 level 7 item 2</p>
+                  <p class="filler">section 30 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 30 level 8 item 0</p>
+                    <p class="filler">section 30 level 8 item 1</p>
+                    <p class="filler">section 30 level 8 item 2</p>
+                    <p class="filler">section 30 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 30 level 9 item 0</p>
+                      <p class="filler">section 30 level 9 item 1</p>
+                      <p class="filler">section 30 level 9 item 2</p>
+                      <p class="filler">section 30 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 30 level 10 item 0</p>
+                        <p class="filler">section 30 level 10 item 1</p>
+                        <p class="filler">section 30 level 10 item 2</p>
+                        <p class="filler">section 30 level 10 item 3</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-31">
+    <div class="level-1">
+      <p class="filler">section 31 level 1 item 0</p>
+      <p class="filler">section 31 level 1 item 1</p>
+      <p class="filler">section 31 level 1 item 2</p>
+      <p class="filler">section 31 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 31 level 2 item 0</p>
+        <p class="filler">section 31 level 2 item 1</p>
+        <p class="filler">section 31 level 2 item 2</p>
+        <p class="filler">section 31 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 31 level 3 item 0</p>
+          <p class="filler">section 31 level 3 item 1</p>
+          <p class="filler">section 31 level 3 item 2</p>
+          <p class="filler">section 31 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 31 level 4 item 0</p>
+            <p class="filler">section 31 level 4 item 1</p>
+            <p class="filler">section 31 level 4 item 2</p>
+            <p class="filler">section 31 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 31 level 5 item 0</p>
+              <p class="filler">section 31 level 5 item 1</p>
+              <p class="filler">section 31 level 5 item 2</p>
+              <p class="filler">section 31 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 31 level 6 item 0</p>
+                <p class="filler">section 31 level 6 item 1</p>
+                <p class="filler">section 31 level 6 item 2</p>
+                <p class="filler">section 31 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 31 level 7 item 0</p>
+                  <p class="filler">section 31 level 7 item 1</p>
+                  <p class="filler">section 31 level 7 item 2</p>
+                  <p class="filler">section 31 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 31 level 8 item 0</p>
+                    <p class="filler">section 31 level 8 item 1</p>
+                    <p class="filler">section 31 level 8 item 2</p>
+                    <p class="filler">section 31 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 31 level 9 item 0</p>
+                      <p class="filler">section 31 level 9 item 1</p>
+                      <p class="filler">section 31 level 9 item 2</p>
+                      <p class="filler">section 31 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 31 level 10 item 0</p>
+                        <p class="filler">section 31 level 10 item 1</p>
+                        <p class="filler">section 31 level 10 item 2</p>
+                        <p class="filler">section 31 level 10 item 3</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-32">
+    <div class="level-1">
+      <p class="filler">section 32 level 1 item 0</p>
+      <p class="filler">section 32 level 1 item 1</p>
+      <p class="filler">section 32 level 1 item 2</p>
+      <p class="filler">section 32 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 32 level 2 item 0</p>
+        <p class="filler">section 32 level 2 item 1</p>
+        <p class="filler">section 32 level 2 item 2</p>
+        <p class="filler">section 32 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 32 level 3 item 0</p>
+          <p class="filler">section 32 level 3 item 1</p>
+          <p class="filler">section 32 level 3 item 2</p>
+          <p class="filler">section 32 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 32 level 4 item 0</p>
+            <p class="filler">section 32 level 4 item 1</p>
+            <p class="filler">section 32 level 4 item 2</p>
+            <p class="filler">section 32 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 32 level 5 item 0</p>
+              <p class="filler">section 32 level 5 item 1</p>
+              <p class="filler">section 32 level 5 item 2</p>
+              <p class="filler">section 32 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 32 level 6 item 0</p>
+                <p class="filler">section 32 level 6 item 1</p>
+                <p class="filler">section 32 level 6 item 2</p>
+                <p class="filler">section 32 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 32 level 7 item 0</p>
+                  <p class="filler">section 32 level 7 item 1</p>
+                  <p class="filler">section 32 level 7 item 2</p>
+                  <p class="filler">section 32 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 32 level 8 item 0</p>
+                    <p class="filler">section 32 level 8 item 1</p>
+                    <p class="filler">section 32 level 8 item 2</p>
+                    <p class="filler">section 32 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 32 level 9 item 0</p>
+                      <p class="filler">section 32 level 9 item 1</p>
+                      <p class="filler">section 32 level 9 item 2</p>
+                      <p class="filler">section 32 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 32 level 10 item 0</p>
+                        <p class="filler">section 32 level 10 item 1</p>
+                        <p class="filler">section 32 level 10 item 2</p>
+                        <p class="filler">section 32 level 10 item 3</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-33">
+    <div class="level-1">
+      <p class="filler">section 33 level 1 item 0</p>
+      <p class="filler">section 33 level 1 item 1</p>
+      <p class="filler">section 33 level 1 item 2</p>
+      <p class="filler">section 33 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 33 level 2 item 0</p>
+        <p class="filler">section 33 level 2 item 1</p>
+        <p class="filler">section 33 level 2 item 2</p>
+        <p class="filler">section 33 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 33 level 3 item 0</p>
+          <p class="filler">section 33 level 3 item 1</p>
+          <p class="filler">section 33 level 3 item 2</p>
+          <p class="filler">section 33 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 33 level 4 item 0</p>
+            <p class="filler">section 33 level 4 item 1</p>
+            <p class="filler">section 33 level 4 item 2</p>
+            <p class="filler">section 33 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 33 level 5 item 0</p>
+              <p class="filler">section 33 level 5 item 1</p>
+              <p class="filler">section 33 level 5 item 2</p>
+              <p class="filler">section 33 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 33 level 6 item 0</p>
+                <p class="filler">section 33 level 6 item 1</p>
+                <p class="filler">section 33 level 6 item 2</p>
+                <p class="filler">section 33 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 33 level 7 item 0</p>
+                  <p class="filler">section 33 level 7 item 1</p>
+                  <p class="filler">section 33 level 7 item 2</p>
+                  <p class="filler">section 33 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 33 level 8 item 0</p>
+                    <p class="filler">section 33 level 8 item 1</p>
+                    <p class="filler">section 33 level 8 item 2</p>
+                    <p class="filler">section 33 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 33 level 9 item 0</p>
+                      <p class="filler">section 33 level 9 item 1</p>
+                      <p class="filler">section 33 level 9 item 2</p>
+                      <p class="filler">section 33 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 33 level 10 item 0</p>
+                        <p class="filler">section 33 level 10 item 1</p>
+                        <p class="filler">section 33 level 10 item 2</p>
+                        <p class="filler">section 33 level 10 item 3</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-34">
+    <div class="level-1">
+      <p class="filler">section 34 level 1 item 0</p>
+      <p class="filler">section 34 level 1 item 1</p>
+      <p class="filler">section 34 level 1 item 2</p>
+      <p class="filler">section 34 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 34 level 2 item 0</p>
+        <p class="filler">section 34 level 2 item 1</p>
+        <p class="filler">section 34 level 2 item 2</p>
+        <p class="filler">section 34 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 34 level 3 item 0</p>
+          <p class="filler">section 34 level 3 item 1</p>
+          <p class="filler">section 34 level 3 item 2</p>
+          <p class="filler">section 34 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 34 level 4 item 0</p>
+            <p class="filler">section 34 level 4 item 1</p>
+            <p class="filler">section 34 level 4 item 2</p>
+            <p class="filler">section 34 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 34 level 5 item 0</p>
+              <p class="filler">section 34 level 5 item 1</p>
+              <p class="filler">section 34 level 5 item 2</p>
+              <p class="filler">section 34 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 34 level 6 item 0</p>
+                <p class="filler">section 34 level 6 item 1</p>
+                <p class="filler">section 34 level 6 item 2</p>
+                <p class="filler">section 34 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 34 level 7 item 0</p>
+                  <p class="filler">section 34 level 7 item 1</p>
+                  <p class="filler">section 34 level 7 item 2</p>
+                  <p class="filler">section 34 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 34 level 8 item 0</p>
+                    <p class="filler">section 34 level 8 item 1</p>
+                    <p class="filler">section 34 level 8 item 2</p>
+                    <p class="filler">section 34 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 34 level 9 item 0</p>
+                      <p class="filler">section 34 level 9 item 1</p>
+                      <p class="filler">section 34 level 9 item 2</p>
+                      <p class="filler">section 34 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 34 level 10 item 0</p>
+                        <p class="filler">section 34 level 10 item 1</p>
+                        <p class="filler">section 34 level 10 item 2</p>
+                        <p class="filler">section 34 level 10 item 3</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-35">
+    <div class="level-1">
+      <p class="filler">section 35 level 1 item 0</p>
+      <p class="filler">section 35 level 1 item 1</p>
+      <p class="filler">section 35 level 1 item 2</p>
+      <p class="filler">section 35 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 35 level 2 item 0</p>
+        <p class="filler">section 35 level 2 item 1</p>
+        <p class="filler">section 35 level 2 item 2</p>
+        <p class="filler">section 35 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 35 level 3 item 0</p>
+          <p class="filler">section 35 level 3 item 1</p>
+          <p class="filler">section 35 level 3 item 2</p>
+          <p class="filler">section 35 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 35 level 4 item 0</p>
+            <p class="filler">section 35 level 4 item 1</p>
+            <p class="filler">section 35 level 4 item 2</p>
+            <p class="filler">section 35 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 35 level 5 item 0</p>
+              <p class="filler">section 35 level 5 item 1</p>
+              <p class="filler">section 35 level 5 item 2</p>
+              <p class="filler">section 35 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 35 level 6 item 0</p>
+                <p class="filler">section 35 level 6 item 1</p>
+                <p class="filler">section 35 level 6 item 2</p>
+                <p class="filler">section 35 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 35 level 7 item 0</p>
+                  <p class="filler">section 35 level 7 item 1</p>
+                  <p class="filler">section 35 level 7 item 2</p>
+                  <p class="filler">section 35 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 35 level 8 item 0</p>
+                    <p class="filler">section 35 level 8 item 1</p>
+                    <p class="filler">section 35 level 8 item 2</p>
+                    <p class="filler">section 35 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 35 level 9 item 0</p>
+                      <p class="filler">section 35 level 9 item 1</p>
+                      <p class="filler">section 35 level 9 item 2</p>
+                      <p class="filler">section 35 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 35 level 10 item 0</p>
+                        <p class="filler">section 35 level 10 item 1</p>
+                        <p class="filler">section 35 level 10 item 2</p>
+                        <p class="filler">section 35 level 10 item 3</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-36">
+    <div class="level-1">
+      <p class="filler">section 36 level 1 item 0</p>
+      <p class="filler">section 36 level 1 item 1</p>
+      <p class="filler">section 36 level 1 item 2</p>
+      <p class="filler">section 36 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 36 level 2 item 0</p>
+        <p class="filler">section 36 level 2 item 1</p>
+        <p class="filler">section 36 level 2 item 2</p>
+        <p class="filler">section 36 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 36 level 3 item 0</p>
+          <p class="filler">section 36 level 3 item 1</p>
+          <p class="filler">section 36 level 3 item 2</p>
+          <p class="filler">section 36 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 36 level 4 item 0</p>
+            <p class="filler">section 36 level 4 item 1</p>
+            <p class="filler">section 36 level 4 item 2</p>
+            <p class="filler">section 36 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 36 level 5 item 0</p>
+              <p class="filler">section 36 level 5 item 1</p>
+              <p class="filler">section 36 level 5 item 2</p>
+              <p class="filler">section 36 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 36 level 6 item 0</p>
+                <p class="filler">section 36 level 6 item 1</p>
+                <p class="filler">section 36 level 6 item 2</p>
+                <p class="filler">section 36 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 36 level 7 item 0</p>
+                  <p class="filler">section 36 level 7 item 1</p>
+                  <p class="filler">section 36 level 7 item 2</p>
+                  <p class="filler">section 36 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 36 level 8 item 0</p>
+                    <p class="filler">section 36 level 8 item 1</p>
+                    <p class="filler">section 36 level 8 item 2</p>
+                    <p class="filler">section 36 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 36 level 9 item 0</p>
+                      <p class="filler">section 36 level 9 item 1</p>
+                      <p class="filler">section 36 level 9 item 2</p>
+                      <p class="filler">section 36 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 36 level 10 item 0</p>
+                        <p class="filler">section 36 level 10 item 1</p>
+                        <p class="filler">section 36 level 10 item 2</p>
+                        <p class="filler">section 36 level 10 item 3</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-37">
+    <div class="level-1">
+      <p class="filler">section 37 level 1 item 0</p>
+      <p class="filler">section 37 level 1 item 1</p>
+      <p class="filler">section 37 level 1 item 2</p>
+      <p class="filler">section 37 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 37 level 2 item 0</p>
+        <p class="filler">section 37 level 2 item 1</p>
+        <p class="filler">section 37 level 2 item 2</p>
+        <p class="filler">section 37 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 37 level 3 item 0</p>
+          <p class="filler">section 37 level 3 item 1</p>
+          <p class="filler">section 37 level 3 item 2</p>
+          <p class="filler">section 37 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 37 level 4 item 0</p>
+            <p class="filler">section 37 level 4 item 1</p>
+            <p class="filler">section 37 level 4 item 2</p>
+            <p class="filler">section 37 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 37 level 5 item 0</p>
+              <p class="filler">section 37 level 5 item 1</p>
+              <p class="filler">section 37 level 5 item 2</p>
+              <p class="filler">section 37 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 37 level 6 item 0</p>
+                <p class="filler">section 37 level 6 item 1</p>
+                <p class="filler">section 37 level 6 item 2</p>
+                <p class="filler">section 37 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 37 level 7 item 0</p>
+                  <p class="filler">section 37 level 7 item 1</p>
+                  <p class="filler">section 37 level 7 item 2</p>
+                  <p class="filler">section 37 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 37 level 8 item 0</p>
+                    <p class="filler">section 37 level 8 item 1</p>
+                    <p class="filler">section 37 level 8 item 2</p>
+                    <p class="filler">section 37 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 37 level 9 item 0</p>
+                      <p class="filler">section 37 level 9 item 1</p>
+                      <p class="filler">section 37 level 9 item 2</p>
+                      <p class="filler">section 37 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 37 level 10 item 0</p>
+                        <p class="filler">section 37 level 10 item 1</p>
+                        <p class="filler">section 37 level 10 item 2</p>
+                        <p class="filler">section 37 level 10 item 3</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-38">
+    <div class="level-1">
+      <p class="filler">section 38 level 1 item 0</p>
+      <p class="filler">section 38 level 1 item 1</p>
+      <p class="filler">section 38 level 1 item 2</p>
+      <p class="filler">section 38 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 38 level 2 item 0</p>
+        <p class="filler">section 38 level 2 item 1</p>
+        <p class="filler">section 38 level 2 item 2</p>
+        <p class="filler">section 38 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 38 level 3 item 0</p>
+          <p class="filler">section 38 level 3 item 1</p>
+          <p class="filler">section 38 level 3 item 2</p>
+          <p class="filler">section 38 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 38 level 4 item 0</p>
+            <p class="filler">section 38 level 4 item 1</p>
+            <p class="filler">section 38 level 4 item 2</p>
+            <p class="filler">section 38 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 38 level 5 item 0</p>
+              <p class="filler">section 38 level 5 item 1</p>
+              <p class="filler">section 38 level 5 item 2</p>
+              <p class="filler">section 38 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 38 level 6 item 0</p>
+                <p class="filler">section 38 level 6 item 1</p>
+                <p class="filler">section 38 level 6 item 2</p>
+                <p class="filler">section 38 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 38 level 7 item 0</p>
+                  <p class="filler">section 38 level 7 item 1</p>
+                  <p class="filler">section 38 level 7 item 2</p>
+                  <p class="filler">section 38 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 38 level 8 item 0</p>
+                    <p class="filler">section 38 level 8 item 1</p>
+                    <p class="filler">section 38 level 8 item 2</p>
+                    <p class="filler">section 38 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 38 level 9 item 0</p>
+                      <p class="filler">section 38 level 9 item 1</p>
+                      <p class="filler">section 38 level 9 item 2</p>
+                      <p class="filler">section 38 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 38 level 10 item 0</p>
+                        <p class="filler">section 38 level 10 item 1</p>
+                        <p class="filler">section 38 level 10 item 2</p>
+                        <p class="filler">section 38 level 10 item 3</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-39">
+    <div class="level-1">
+      <p class="filler">section 39 level 1 item 0</p>
+      <p class="filler">section 39 level 1 item 1</p>
+      <p class="filler">section 39 level 1 item 2</p>
+      <p class="filler">section 39 level 1 item 3</p>
+      <div class="level-2">
+        <p class="filler">section 39 level 2 item 0</p>
+        <p class="filler">section 39 level 2 item 1</p>
+        <p class="filler">section 39 level 2 item 2</p>
+        <p class="filler">section 39 level 2 item 3</p>
+        <div class="level-3">
+          <p class="filler">section 39 level 3 item 0</p>
+          <p class="filler">section 39 level 3 item 1</p>
+          <p class="filler">section 39 level 3 item 2</p>
+          <p class="filler">section 39 level 3 item 3</p>
+          <div class="level-4">
+            <p class="filler">section 39 level 4 item 0</p>
+            <p class="filler">section 39 level 4 item 1</p>
+            <p class="filler">section 39 level 4 item 2</p>
+            <p class="filler">section 39 level 4 item 3</p>
+            <div class="level-5">
+              <p class="filler">section 39 level 5 item 0</p>
+              <p class="filler">section 39 level 5 item 1</p>
+              <p class="filler">section 39 level 5 item 2</p>
+              <p class="filler">section 39 level 5 item 3</p>
+              <div class="level-6">
+                <p class="filler">section 39 level 6 item 0</p>
+                <p class="filler">section 39 level 6 item 1</p>
+                <p class="filler">section 39 level 6 item 2</p>
+                <p class="filler">section 39 level 6 item 3</p>
+                <div class="level-7">
+                  <p class="filler">section 39 level 7 item 0</p>
+                  <p class="filler">section 39 level 7 item 1</p>
+                  <p class="filler">section 39 level 7 item 2</p>
+                  <p class="filler">section 39 level 7 item 3</p>
+                  <div class="level-8">
+                    <p class="filler">section 39 level 8 item 0</p>
+                    <p class="filler">section 39 level 8 item 1</p>
+                    <p class="filler">section 39 level 8 item 2</p>
+                    <p class="filler">section 39 level 8 item 3</p>
+                    <div class="level-9">
+                      <p class="filler">section 39 level 9 item 0</p>
+                      <p class="filler">section 39 level 9 item 1</p>
+                      <p class="filler">section 39 level 9 item 2</p>
+                      <p class="filler">section 39 level 9 item 3</p>
+                      <div class="level-10">
+                        <p class="filler">section 39 level 10 item 0</p>
+                        <p class="filler">section 39 level 10 item 1</p>
+                        <p class="filler">section 39 level 10 item 2</p>
+                        <p class="filler">section 39 level 10 item 3</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</main>
diff --git a/perf/generate-deep-last-leaf.js b/perf/generate-deep-last-leaf.js
new file mode 100644
index 0000000..668be8f
--- /dev/null
+++ b/perf/generate-deep-last-leaf.js
@@ -0,0 +1,34 @@
+// Generates the worst case for skipUnchanged: every section differs, but only
+// in its last, deepest text node, so every ancestor's isEqualNode walks its
+// whole subtree before failing. Deterministic; re-run to regenerate.
+const fs = require("fs");
+const path = require("path");
+
+const SECTIONS = 40;
+const DEPTH = 10;
+const FILLERS_PER_LEVEL = 4;
+
+function level(section, depth, changed) {
+  const fillers = Array.from(
+    { length: FILLERS_PER_LEVEL },
+    (_, i) =>
+      `<p class="filler">section ${section} level ${depth} item ${i}</p>`,
+  ).join("");
+  if (depth === DEPTH) {
+    const leaf = changed ? "changed" : "original";
+    return `<div class="level-${depth}">${fillers}<span class="leaf">${leaf}</span></div>`;
+  }
+  return `<div class="level-${depth}">${fillers}${level(section, depth + 1, changed)}</div>`;
+}
+
+function document(changed) {
+  const sections = Array.from(
+    { length: SECTIONS },
+    (_, i) => `<section id="section-${i}">${level(i, 1, changed)}</section>`,
+  ).join("\n");
+  return `<main id="root">\n${sections}\n</main>\n`;
+}
+
+const dir = path.join(__dirname, "benchmarks");
+fs.writeFileSync(path.join(dir, "deep-last-leaf.old.html"), document(false));
+fs.writeFileSync(path.join(dir, "deep-last-leaf.new.html"), document(true));

From c967f511fb8d69bd27657fc38005bf4135553a77 Mon Sep 17 00:00:00 2001
From: Alexander Brandon Coles <a.coles@openproject.com>
Date: Tue, 25 Aug 2026 20:45:32 -0800
Subject: [PATCH 06/12] shrink deep-last-leaf fixture size

---
 perf/benchmarks/deep-last-leaf.new.html | 2460 ++++-------------------
 perf/benchmarks/deep-last-leaf.old.html | 2460 ++++-------------------
 perf/generate-deep-last-leaf.js         |    7 +-
 3 files changed, 803 insertions(+), 4124 deletions(-)

diff --git a/perf/benchmarks/deep-last-leaf.new.html b/perf/benchmarks/deep-last-leaf.new.html
index 2141550..fb422d9 100644
--- a/perf/benchmarks/deep-last-leaf.new.html
+++ b/perf/benchmarks/deep-last-leaf.new.html
@@ -1,55 +1,35 @@
 <main id="root">
   <section id="section-0">
     <div class="level-1">
-      <p class="filler">section 0 level 1 item 0</p>
-      <p class="filler">section 0 level 1 item 1</p>
-      <p class="filler">section 0 level 1 item 2</p>
-      <p class="filler">section 0 level 1 item 3</p>
+      <p class="filler">s0d1i0</p>
+      <p class="filler">s0d1i1</p>
       <div class="level-2">
-        <p class="filler">section 0 level 2 item 0</p>
-        <p class="filler">section 0 level 2 item 1</p>
-        <p class="filler">section 0 level 2 item 2</p>
-        <p class="filler">section 0 level 2 item 3</p>
+        <p class="filler">s0d2i0</p>
+        <p class="filler">s0d2i1</p>
         <div class="level-3">
-          <p class="filler">section 0 level 3 item 0</p>
-          <p class="filler">section 0 level 3 item 1</p>
-          <p class="filler">section 0 level 3 item 2</p>
-          <p class="filler">section 0 level 3 item 3</p>
+          <p class="filler">s0d3i0</p>
+          <p class="filler">s0d3i1</p>
           <div class="level-4">
-            <p class="filler">section 0 level 4 item 0</p>
-            <p class="filler">section 0 level 4 item 1</p>
-            <p class="filler">section 0 level 4 item 2</p>
-            <p class="filler">section 0 level 4 item 3</p>
+            <p class="filler">s0d4i0</p>
+            <p class="filler">s0d4i1</p>
             <div class="level-5">
-              <p class="filler">section 0 level 5 item 0</p>
-              <p class="filler">section 0 level 5 item 1</p>
-              <p class="filler">section 0 level 5 item 2</p>
-              <p class="filler">section 0 level 5 item 3</p>
+              <p class="filler">s0d5i0</p>
+              <p class="filler">s0d5i1</p>
               <div class="level-6">
-                <p class="filler">section 0 level 6 item 0</p>
-                <p class="filler">section 0 level 6 item 1</p>
-                <p class="filler">section 0 level 6 item 2</p>
-                <p class="filler">section 0 level 6 item 3</p>
+                <p class="filler">s0d6i0</p>
+                <p class="filler">s0d6i1</p>
                 <div class="level-7">
-                  <p class="filler">section 0 level 7 item 0</p>
-                  <p class="filler">section 0 level 7 item 1</p>
-                  <p class="filler">section 0 level 7 item 2</p>
-                  <p class="filler">section 0 level 7 item 3</p>
+                  <p class="filler">s0d7i0</p>
+                  <p class="filler">s0d7i1</p>
                   <div class="level-8">
-                    <p class="filler">section 0 level 8 item 0</p>
-                    <p class="filler">section 0 level 8 item 1</p>
-                    <p class="filler">section 0 level 8 item 2</p>
-                    <p class="filler">section 0 level 8 item 3</p>
+                    <p class="filler">s0d8i0</p>
+                    <p class="filler">s0d8i1</p>
                     <div class="level-9">
-                      <p class="filler">section 0 level 9 item 0</p>
-                      <p class="filler">section 0 level 9 item 1</p>
-                      <p class="filler">section 0 level 9 item 2</p>
-                      <p class="filler">section 0 level 9 item 3</p>
+                      <p class="filler">s0d9i0</p>
+                      <p class="filler">s0d9i1</p>
                       <div class="level-10">
-                        <p class="filler">section 0 level 10 item 0</p>
-                        <p class="filler">section 0 level 10 item 1</p>
-                        <p class="filler">section 0 level 10 item 2</p>
-                        <p class="filler">section 0 level 10 item 3</p>
+                        <p class="filler">s0d10i0</p>
+                        <p class="filler">s0d10i1</p>
                         <span class="leaf">changed</span>
                       </div>
                     </div>
@@ -64,55 +44,35 @@
   </section>
   <section id="section-1">
     <div class="level-1">
-      <p class="filler">section 1 level 1 item 0</p>
-      <p class="filler">section 1 level 1 item 1</p>
-      <p class="filler">section 1 level 1 item 2</p>
-      <p class="filler">section 1 level 1 item 3</p>
+      <p class="filler">s1d1i0</p>
+      <p class="filler">s1d1i1</p>
       <div class="level-2">
-        <p class="filler">section 1 level 2 item 0</p>
-        <p class="filler">section 1 level 2 item 1</p>
-        <p class="filler">section 1 level 2 item 2</p>
-        <p class="filler">section 1 level 2 item 3</p>
+        <p class="filler">s1d2i0</p>
+        <p class="filler">s1d2i1</p>
         <div class="level-3">
-          <p class="filler">section 1 level 3 item 0</p>
-          <p class="filler">section 1 level 3 item 1</p>
-          <p class="filler">section 1 level 3 item 2</p>
-          <p class="filler">section 1 level 3 item 3</p>
+          <p class="filler">s1d3i0</p>
+          <p class="filler">s1d3i1</p>
           <div class="level-4">
-            <p class="filler">section 1 level 4 item 0</p>
-            <p class="filler">section 1 level 4 item 1</p>
-            <p class="filler">section 1 level 4 item 2</p>
-            <p class="filler">section 1 level 4 item 3</p>
+            <p class="filler">s1d4i0</p>
+            <p class="filler">s1d4i1</p>
             <div class="level-5">
-              <p class="filler">section 1 level 5 item 0</p>
-              <p class="filler">section 1 level 5 item 1</p>
-              <p class="filler">section 1 level 5 item 2</p>
-              <p class="filler">section 1 level 5 item 3</p>
+              <p class="filler">s1d5i0</p>
+              <p class="filler">s1d5i1</p>
               <div class="level-6">
-                <p class="filler">section 1 level 6 item 0</p>
-                <p class="filler">section 1 level 6 item 1</p>
-                <p class="filler">section 1 level 6 item 2</p>
-                <p class="filler">section 1 level 6 item 3</p>
+                <p class="filler">s1d6i0</p>
+                <p class="filler">s1d6i1</p>
                 <div class="level-7">
-                  <p class="filler">section 1 level 7 item 0</p>
-                  <p class="filler">section 1 level 7 item 1</p>
-                  <p class="filler">section 1 level 7 item 2</p>
-                  <p class="filler">section 1 level 7 item 3</p>
+                  <p class="filler">s1d7i0</p>
+                  <p class="filler">s1d7i1</p>
                   <div class="level-8">
-                    <p class="filler">section 1 level 8 item 0</p>
-                    <p class="filler">section 1 level 8 item 1</p>
-                    <p class="filler">section 1 level 8 item 2</p>
-                    <p class="filler">section 1 level 8 item 3</p>
+                    <p class="filler">s1d8i0</p>
+                    <p class="filler">s1d8i1</p>
                     <div class="level-9">
-                      <p class="filler">section 1 level 9 item 0</p>
-                      <p class="filler">section 1 level 9 item 1</p>
-                      <p class="filler">section 1 level 9 item 2</p>
-                      <p class="filler">section 1 level 9 item 3</p>
+                      <p class="filler">s1d9i0</p>
+                      <p class="filler">s1d9i1</p>
                       <div class="level-10">
-                        <p class="filler">section 1 level 10 item 0</p>
-                        <p class="filler">section 1 level 10 item 1</p>
-                        <p class="filler">section 1 level 10 item 2</p>
-                        <p class="filler">section 1 level 10 item 3</p>
+                        <p class="filler">s1d10i0</p>
+                        <p class="filler">s1d10i1</p>
                         <span class="leaf">changed</span>
                       </div>
                     </div>
@@ -127,55 +87,35 @@
   </section>
   <section id="section-2">
     <div class="level-1">
-      <p class="filler">section 2 level 1 item 0</p>
-      <p class="filler">section 2 level 1 item 1</p>
-      <p class="filler">section 2 level 1 item 2</p>
-      <p class="filler">section 2 level 1 item 3</p>
+      <p class="filler">s2d1i0</p>
+      <p class="filler">s2d1i1</p>
       <div class="level-2">
-        <p class="filler">section 2 level 2 item 0</p>
-        <p class="filler">section 2 level 2 item 1</p>
-        <p class="filler">section 2 level 2 item 2</p>
-        <p class="filler">section 2 level 2 item 3</p>
+        <p class="filler">s2d2i0</p>
+        <p class="filler">s2d2i1</p>
         <div class="level-3">
-          <p class="filler">section 2 level 3 item 0</p>
-          <p class="filler">section 2 level 3 item 1</p>
-          <p class="filler">section 2 level 3 item 2</p>
-          <p class="filler">section 2 level 3 item 3</p>
+          <p class="filler">s2d3i0</p>
+          <p class="filler">s2d3i1</p>
           <div class="level-4">
-            <p class="filler">section 2 level 4 item 0</p>
-            <p class="filler">section 2 level 4 item 1</p>
-            <p class="filler">section 2 level 4 item 2</p>
-            <p class="filler">section 2 level 4 item 3</p>
+            <p class="filler">s2d4i0</p>
+            <p class="filler">s2d4i1</p>
             <div class="level-5">
-              <p class="filler">section 2 level 5 item 0</p>
-              <p class="filler">section 2 level 5 item 1</p>
-              <p class="filler">section 2 level 5 item 2</p>
-              <p class="filler">section 2 level 5 item 3</p>
+              <p class="filler">s2d5i0</p>
+              <p class="filler">s2d5i1</p>
               <div class="level-6">
-                <p class="filler">section 2 level 6 item 0</p>
-                <p class="filler">section 2 level 6 item 1</p>
-                <p class="filler">section 2 level 6 item 2</p>
-                <p class="filler">section 2 level 6 item 3</p>
+                <p class="filler">s2d6i0</p>
+                <p class="filler">s2d6i1</p>
                 <div class="level-7">
-                  <p class="filler">section 2 level 7 item 0</p>
-                  <p class="filler">section 2 level 7 item 1</p>
-                  <p class="filler">section 2 level 7 item 2</p>
-                  <p class="filler">section 2 level 7 item 3</p>
+                  <p class="filler">s2d7i0</p>
+                  <p class="filler">s2d7i1</p>
                   <div class="level-8">
-                    <p class="filler">section 2 level 8 item 0</p>
-                    <p class="filler">section 2 level 8 item 1</p>
-                    <p class="filler">section 2 level 8 item 2</p>
-                    <p class="filler">section 2 level 8 item 3</p>
+                    <p class="filler">s2d8i0</p>
+                    <p class="filler">s2d8i1</p>
                     <div class="level-9">
-                      <p class="filler">section 2 level 9 item 0</p>
-                      <p class="filler">section 2 level 9 item 1</p>
-                      <p class="filler">section 2 level 9 item 2</p>
-                      <p class="filler">section 2 level 9 item 3</p>
+                      <p class="filler">s2d9i0</p>
+                      <p class="filler">s2d9i1</p>
                       <div class="level-10">
-                        <p class="filler">section 2 level 10 item 0</p>
-                        <p class="filler">section 2 level 10 item 1</p>
-                        <p class="filler">section 2 level 10 item 2</p>
-                        <p class="filler">section 2 level 10 item 3</p>
+                        <p class="filler">s2d10i0</p>
+                        <p class="filler">s2d10i1</p>
                         <span class="leaf">changed</span>
                       </div>
                     </div>
@@ -190,55 +130,35 @@
   </section>
   <section id="section-3">
     <div class="level-1">
-      <p class="filler">section 3 level 1 item 0</p>
-      <p class="filler">section 3 level 1 item 1</p>
-      <p class="filler">section 3 level 1 item 2</p>
-      <p class="filler">section 3 level 1 item 3</p>
+      <p class="filler">s3d1i0</p>
+      <p class="filler">s3d1i1</p>
       <div class="level-2">
-        <p class="filler">section 3 level 2 item 0</p>
-        <p class="filler">section 3 level 2 item 1</p>
-        <p class="filler">section 3 level 2 item 2</p>
-        <p class="filler">section 3 level 2 item 3</p>
+        <p class="filler">s3d2i0</p>
+        <p class="filler">s3d2i1</p>
         <div class="level-3">
-          <p class="filler">section 3 level 3 item 0</p>
-          <p class="filler">section 3 level 3 item 1</p>
-          <p class="filler">section 3 level 3 item 2</p>
-          <p class="filler">section 3 level 3 item 3</p>
+          <p class="filler">s3d3i0</p>
+          <p class="filler">s3d3i1</p>
           <div class="level-4">
-            <p class="filler">section 3 level 4 item 0</p>
-            <p class="filler">section 3 level 4 item 1</p>
-            <p class="filler">section 3 level 4 item 2</p>
-            <p class="filler">section 3 level 4 item 3</p>
+            <p class="filler">s3d4i0</p>
+            <p class="filler">s3d4i1</p>
             <div class="level-5">
-              <p class="filler">section 3 level 5 item 0</p>
-              <p class="filler">section 3 level 5 item 1</p>
-              <p class="filler">section 3 level 5 item 2</p>
-              <p class="filler">section 3 level 5 item 3</p>
+              <p class="filler">s3d5i0</p>
+              <p class="filler">s3d5i1</p>
               <div class="level-6">
-                <p class="filler">section 3 level 6 item 0</p>
-                <p class="filler">section 3 level 6 item 1</p>
-                <p class="filler">section 3 level 6 item 2</p>
-                <p class="filler">section 3 level 6 item 3</p>
+                <p class="filler">s3d6i0</p>
+                <p class="filler">s3d6i1</p>
                 <div class="level-7">
-                  <p class="filler">section 3 level 7 item 0</p>
-                  <p class="filler">section 3 level 7 item 1</p>
-                  <p class="filler">section 3 level 7 item 2</p>
-                  <p class="filler">section 3 level 7 item 3</p>
+                  <p class="filler">s3d7i0</p>
+                  <p class="filler">s3d7i1</p>
                   <div class="level-8">
-                    <p class="filler">section 3 level 8 item 0</p>
-                    <p class="filler">section 3 level 8 item 1</p>
-                    <p class="filler">section 3 level 8 item 2</p>
-                    <p class="filler">section 3 level 8 item 3</p>
+                    <p class="filler">s3d8i0</p>
+                    <p class="filler">s3d8i1</p>
                     <div class="level-9">
-                      <p class="filler">section 3 level 9 item 0</p>
-                      <p class="filler">section 3 level 9 item 1</p>
-                      <p class="filler">section 3 level 9 item 2</p>
-                      <p class="filler">section 3 level 9 item 3</p>
+                      <p class="filler">s3d9i0</p>
+                      <p class="filler">s3d9i1</p>
                       <div class="level-10">
-                        <p class="filler">section 3 level 10 item 0</p>
-                        <p class="filler">section 3 level 10 item 1</p>
-                        <p class="filler">section 3 level 10 item 2</p>
-                        <p class="filler">section 3 level 10 item 3</p>
+                        <p class="filler">s3d10i0</p>
+                        <p class="filler">s3d10i1</p>
                         <span class="leaf">changed</span>
                       </div>
                     </div>
@@ -253,55 +173,35 @@
   </section>
   <section id="section-4">
     <div class="level-1">
-      <p class="filler">section 4 level 1 item 0</p>
-      <p class="filler">section 4 level 1 item 1</p>
-      <p class="filler">section 4 level 1 item 2</p>
-      <p class="filler">section 4 level 1 item 3</p>
+      <p class="filler">s4d1i0</p>
+      <p class="filler">s4d1i1</p>
       <div class="level-2">
-        <p class="filler">section 4 level 2 item 0</p>
-        <p class="filler">section 4 level 2 item 1</p>
-        <p class="filler">section 4 level 2 item 2</p>
-        <p class="filler">section 4 level 2 item 3</p>
+        <p class="filler">s4d2i0</p>
+        <p class="filler">s4d2i1</p>
         <div class="level-3">
-          <p class="filler">section 4 level 3 item 0</p>
-          <p class="filler">section 4 level 3 item 1</p>
-          <p class="filler">section 4 level 3 item 2</p>
-          <p class="filler">section 4 level 3 item 3</p>
+          <p class="filler">s4d3i0</p>
+          <p class="filler">s4d3i1</p>
           <div class="level-4">
-            <p class="filler">section 4 level 4 item 0</p>
-            <p class="filler">section 4 level 4 item 1</p>
-            <p class="filler">section 4 level 4 item 2</p>
-            <p class="filler">section 4 level 4 item 3</p>
+            <p class="filler">s4d4i0</p>
+            <p class="filler">s4d4i1</p>
             <div class="level-5">
-              <p class="filler">section 4 level 5 item 0</p>
-              <p class="filler">section 4 level 5 item 1</p>
-              <p class="filler">section 4 level 5 item 2</p>
-              <p class="filler">section 4 level 5 item 3</p>
+              <p class="filler">s4d5i0</p>
+              <p class="filler">s4d5i1</p>
               <div class="level-6">
-                <p class="filler">section 4 level 6 item 0</p>
-                <p class="filler">section 4 level 6 item 1</p>
-                <p class="filler">section 4 level 6 item 2</p>
-                <p class="filler">section 4 level 6 item 3</p>
+                <p class="filler">s4d6i0</p>
+                <p class="filler">s4d6i1</p>
                 <div class="level-7">
-                  <p class="filler">section 4 level 7 item 0</p>
-                  <p class="filler">section 4 level 7 item 1</p>
-                  <p class="filler">section 4 level 7 item 2</p>
-                  <p class="filler">section 4 level 7 item 3</p>
+                  <p class="filler">s4d7i0</p>
+                  <p class="filler">s4d7i1</p>
                   <div class="level-8">
-                    <p class="filler">section 4 level 8 item 0</p>
-                    <p class="filler">section 4 level 8 item 1</p>
-                    <p class="filler">section 4 level 8 item 2</p>
-                    <p class="filler">section 4 level 8 item 3</p>
+                    <p class="filler">s4d8i0</p>
+                    <p class="filler">s4d8i1</p>
                     <div class="level-9">
-                      <p class="filler">section 4 level 9 item 0</p>
-                      <p class="filler">section 4 level 9 item 1</p>
-                      <p class="filler">section 4 level 9 item 2</p>
-                      <p class="filler">section 4 level 9 item 3</p>
+                      <p class="filler">s4d9i0</p>
+                      <p class="filler">s4d9i1</p>
                       <div class="level-10">
-                        <p class="filler">section 4 level 10 item 0</p>
-                        <p class="filler">section 4 level 10 item 1</p>
-                        <p class="filler">section 4 level 10 item 2</p>
-                        <p class="filler">section 4 level 10 item 3</p>
+                        <p class="filler">s4d10i0</p>
+                        <p class="filler">s4d10i1</p>
                         <span class="leaf">changed</span>
                       </div>
                     </div>
@@ -316,55 +216,35 @@
   </section>
   <section id="section-5">
     <div class="level-1">
-      <p class="filler">section 5 level 1 item 0</p>
-      <p class="filler">section 5 level 1 item 1</p>
-      <p class="filler">section 5 level 1 item 2</p>
-      <p class="filler">section 5 level 1 item 3</p>
+      <p class="filler">s5d1i0</p>
+      <p class="filler">s5d1i1</p>
       <div class="level-2">
-        <p class="filler">section 5 level 2 item 0</p>
-        <p class="filler">section 5 level 2 item 1</p>
-        <p class="filler">section 5 level 2 item 2</p>
-        <p class="filler">section 5 level 2 item 3</p>
+        <p class="filler">s5d2i0</p>
+        <p class="filler">s5d2i1</p>
         <div class="level-3">
-          <p class="filler">section 5 level 3 item 0</p>
-          <p class="filler">section 5 level 3 item 1</p>
-          <p class="filler">section 5 level 3 item 2</p>
-          <p class="filler">section 5 level 3 item 3</p>
+          <p class="filler">s5d3i0</p>
+          <p class="filler">s5d3i1</p>
           <div class="level-4">
-            <p class="filler">section 5 level 4 item 0</p>
-            <p class="filler">section 5 level 4 item 1</p>
-            <p class="filler">section 5 level 4 item 2</p>
-            <p class="filler">section 5 level 4 item 3</p>
+            <p class="filler">s5d4i0</p>
+            <p class="filler">s5d4i1</p>
             <div class="level-5">
-              <p class="filler">section 5 level 5 item 0</p>
-              <p class="filler">section 5 level 5 item 1</p>
-              <p class="filler">section 5 level 5 item 2</p>
-              <p class="filler">section 5 level 5 item 3</p>
+              <p class="filler">s5d5i0</p>
+              <p class="filler">s5d5i1</p>
               <div class="level-6">
-                <p class="filler">section 5 level 6 item 0</p>
-                <p class="filler">section 5 level 6 item 1</p>
-                <p class="filler">section 5 level 6 item 2</p>
-                <p class="filler">section 5 level 6 item 3</p>
+                <p class="filler">s5d6i0</p>
+                <p class="filler">s5d6i1</p>
                 <div class="level-7">
-                  <p class="filler">section 5 level 7 item 0</p>
-                  <p class="filler">section 5 level 7 item 1</p>
-                  <p class="filler">section 5 level 7 item 2</p>
-                  <p class="filler">section 5 level 7 item 3</p>
+                  <p class="filler">s5d7i0</p>
+                  <p class="filler">s5d7i1</p>
                   <div class="level-8">
-                    <p class="filler">section 5 level 8 item 0</p>
-                    <p class="filler">section 5 level 8 item 1</p>
-                    <p class="filler">section 5 level 8 item 2</p>
-                    <p class="filler">section 5 level 8 item 3</p>
+                    <p class="filler">s5d8i0</p>
+                    <p class="filler">s5d8i1</p>
                     <div class="level-9">
-                      <p class="filler">section 5 level 9 item 0</p>
-                      <p class="filler">section 5 level 9 item 1</p>
-                      <p class="filler">section 5 level 9 item 2</p>
-                      <p class="filler">section 5 level 9 item 3</p>
+                      <p class="filler">s5d9i0</p>
+                      <p class="filler">s5d9i1</p>
                       <div class="level-10">
-                        <p class="filler">section 5 level 10 item 0</p>
-                        <p class="filler">section 5 level 10 item 1</p>
-                        <p class="filler">section 5 level 10 item 2</p>
-                        <p class="filler">section 5 level 10 item 3</p>
+                        <p class="filler">s5d10i0</p>
+                        <p class="filler">s5d10i1</p>
                         <span class="leaf">changed</span>
                       </div>
                     </div>
@@ -379,55 +259,35 @@
   </section>
   <section id="section-6">
     <div class="level-1">
-      <p class="filler">section 6 level 1 item 0</p>
-      <p class="filler">section 6 level 1 item 1</p>
-      <p class="filler">section 6 level 1 item 2</p>
-      <p class="filler">section 6 level 1 item 3</p>
+      <p class="filler">s6d1i0</p>
+      <p class="filler">s6d1i1</p>
       <div class="level-2">
-        <p class="filler">section 6 level 2 item 0</p>
-        <p class="filler">section 6 level 2 item 1</p>
-        <p class="filler">section 6 level 2 item 2</p>
-        <p class="filler">section 6 level 2 item 3</p>
+        <p class="filler">s6d2i0</p>
+        <p class="filler">s6d2i1</p>
         <div class="level-3">
-          <p class="filler">section 6 level 3 item 0</p>
-          <p class="filler">section 6 level 3 item 1</p>
-          <p class="filler">section 6 level 3 item 2</p>
-          <p class="filler">section 6 level 3 item 3</p>
+          <p class="filler">s6d3i0</p>
+          <p class="filler">s6d3i1</p>
           <div class="level-4">
-            <p class="filler">section 6 level 4 item 0</p>
-            <p class="filler">section 6 level 4 item 1</p>
-            <p class="filler">section 6 level 4 item 2</p>
-            <p class="filler">section 6 level 4 item 3</p>
+            <p class="filler">s6d4i0</p>
+            <p class="filler">s6d4i1</p>
             <div class="level-5">
-              <p class="filler">section 6 level 5 item 0</p>
-              <p class="filler">section 6 level 5 item 1</p>
-              <p class="filler">section 6 level 5 item 2</p>
-              <p class="filler">section 6 level 5 item 3</p>
+              <p class="filler">s6d5i0</p>
+              <p class="filler">s6d5i1</p>
               <div class="level-6">
-                <p class="filler">section 6 level 6 item 0</p>
-                <p class="filler">section 6 level 6 item 1</p>
-                <p class="filler">section 6 level 6 item 2</p>
-                <p class="filler">section 6 level 6 item 3</p>
+                <p class="filler">s6d6i0</p>
+                <p class="filler">s6d6i1</p>
                 <div class="level-7">
-                  <p class="filler">section 6 level 7 item 0</p>
-                  <p class="filler">section 6 level 7 item 1</p>
-                  <p class="filler">section 6 level 7 item 2</p>
-                  <p class="filler">section 6 level 7 item 3</p>
+                  <p class="filler">s6d7i0</p>
+                  <p class="filler">s6d7i1</p>
                   <div class="level-8">
-                    <p class="filler">section 6 level 8 item 0</p>
-                    <p class="filler">section 6 level 8 item 1</p>
-                    <p class="filler">section 6 level 8 item 2</p>
-                    <p class="filler">section 6 level 8 item 3</p>
+                    <p class="filler">s6d8i0</p>
+                    <p class="filler">s6d8i1</p>
                     <div class="level-9">
-                      <p class="filler">section 6 level 9 item 0</p>
-                      <p class="filler">section 6 level 9 item 1</p>
-                      <p class="filler">section 6 level 9 item 2</p>
-                      <p class="filler">section 6 level 9 item 3</p>
+                      <p class="filler">s6d9i0</p>
+                      <p class="filler">s6d9i1</p>
                       <div class="level-10">
-                        <p class="filler">section 6 level 10 item 0</p>
-                        <p class="filler">section 6 level 10 item 1</p>
-                        <p class="filler">section 6 level 10 item 2</p>
-                        <p class="filler">section 6 level 10 item 3</p>
+                        <p class="filler">s6d10i0</p>
+                        <p class="filler">s6d10i1</p>
                         <span class="leaf">changed</span>
                       </div>
                     </div>
@@ -442,55 +302,35 @@
   </section>
   <section id="section-7">
     <div class="level-1">
-      <p class="filler">section 7 level 1 item 0</p>
-      <p class="filler">section 7 level 1 item 1</p>
-      <p class="filler">section 7 level 1 item 2</p>
-      <p class="filler">section 7 level 1 item 3</p>
+      <p class="filler">s7d1i0</p>
+      <p class="filler">s7d1i1</p>
       <div class="level-2">
-        <p class="filler">section 7 level 2 item 0</p>
-        <p class="filler">section 7 level 2 item 1</p>
-        <p class="filler">section 7 level 2 item 2</p>
-        <p class="filler">section 7 level 2 item 3</p>
+        <p class="filler">s7d2i0</p>
+        <p class="filler">s7d2i1</p>
         <div class="level-3">
-          <p class="filler">section 7 level 3 item 0</p>
-          <p class="filler">section 7 level 3 item 1</p>
-          <p class="filler">section 7 level 3 item 2</p>
-          <p class="filler">section 7 level 3 item 3</p>
+          <p class="filler">s7d3i0</p>
+          <p class="filler">s7d3i1</p>
           <div class="level-4">
-            <p class="filler">section 7 level 4 item 0</p>
-            <p class="filler">section 7 level 4 item 1</p>
-            <p class="filler">section 7 level 4 item 2</p>
-            <p class="filler">section 7 level 4 item 3</p>
+            <p class="filler">s7d4i0</p>
+            <p class="filler">s7d4i1</p>
             <div class="level-5">
-              <p class="filler">section 7 level 5 item 0</p>
-              <p class="filler">section 7 level 5 item 1</p>
-              <p class="filler">section 7 level 5 item 2</p>
-              <p class="filler">section 7 level 5 item 3</p>
+              <p class="filler">s7d5i0</p>
+              <p class="filler">s7d5i1</p>
               <div class="level-6">
-                <p class="filler">section 7 level 6 item 0</p>
-                <p class="filler">section 7 level 6 item 1</p>
-                <p class="filler">section 7 level 6 item 2</p>
-                <p class="filler">section 7 level 6 item 3</p>
+                <p class="filler">s7d6i0</p>
+                <p class="filler">s7d6i1</p>
                 <div class="level-7">
-                  <p class="filler">section 7 level 7 item 0</p>
-                  <p class="filler">section 7 level 7 item 1</p>
-                  <p class="filler">section 7 level 7 item 2</p>
-                  <p class="filler">section 7 level 7 item 3</p>
+                  <p class="filler">s7d7i0</p>
+                  <p class="filler">s7d7i1</p>
                   <div class="level-8">
-                    <p class="filler">section 7 level 8 item 0</p>
-                    <p class="filler">section 7 level 8 item 1</p>
-                    <p class="filler">section 7 level 8 item 2</p>
-                    <p class="filler">section 7 level 8 item 3</p>
+                    <p class="filler">s7d8i0</p>
+                    <p class="filler">s7d8i1</p>
                     <div class="level-9">
-                      <p class="filler">section 7 level 9 item 0</p>
-                      <p class="filler">section 7 level 9 item 1</p>
-                      <p class="filler">section 7 level 9 item 2</p>
-                      <p class="filler">section 7 level 9 item 3</p>
+                      <p class="filler">s7d9i0</p>
+                      <p class="filler">s7d9i1</p>
                       <div class="level-10">
-                        <p class="filler">section 7 level 10 item 0</p>
-                        <p class="filler">section 7 level 10 item 1</p>
-                        <p class="filler">section 7 level 10 item 2</p>
-                        <p class="filler">section 7 level 10 item 3</p>
+                        <p class="filler">s7d10i0</p>
+                        <p class="filler">s7d10i1</p>
                         <span class="leaf">changed</span>
                       </div>
                     </div>
@@ -505,55 +345,35 @@
   </section>
   <section id="section-8">
     <div class="level-1">
-      <p class="filler">section 8 level 1 item 0</p>
-      <p class="filler">section 8 level 1 item 1</p>
-      <p class="filler">section 8 level 1 item 2</p>
-      <p class="filler">section 8 level 1 item 3</p>
+      <p class="filler">s8d1i0</p>
+      <p class="filler">s8d1i1</p>
       <div class="level-2">
-        <p class="filler">section 8 level 2 item 0</p>
-        <p class="filler">section 8 level 2 item 1</p>
-        <p class="filler">section 8 level 2 item 2</p>
-        <p class="filler">section 8 level 2 item 3</p>
+        <p class="filler">s8d2i0</p>
+        <p class="filler">s8d2i1</p>
         <div class="level-3">
-          <p class="filler">section 8 level 3 item 0</p>
-          <p class="filler">section 8 level 3 item 1</p>
-          <p class="filler">section 8 level 3 item 2</p>
-          <p class="filler">section 8 level 3 item 3</p>
+          <p class="filler">s8d3i0</p>
+          <p class="filler">s8d3i1</p>
           <div class="level-4">
-            <p class="filler">section 8 level 4 item 0</p>
-            <p class="filler">section 8 level 4 item 1</p>
-            <p class="filler">section 8 level 4 item 2</p>
-            <p class="filler">section 8 level 4 item 3</p>
+            <p class="filler">s8d4i0</p>
+            <p class="filler">s8d4i1</p>
             <div class="level-5">
-              <p class="filler">section 8 level 5 item 0</p>
-              <p class="filler">section 8 level 5 item 1</p>
-              <p class="filler">section 8 level 5 item 2</p>
-              <p class="filler">section 8 level 5 item 3</p>
+              <p class="filler">s8d5i0</p>
+              <p class="filler">s8d5i1</p>
               <div class="level-6">
-                <p class="filler">section 8 level 6 item 0</p>
-                <p class="filler">section 8 level 6 item 1</p>
-                <p class="filler">section 8 level 6 item 2</p>
-                <p class="filler">section 8 level 6 item 3</p>
+                <p class="filler">s8d6i0</p>
+                <p class="filler">s8d6i1</p>
                 <div class="level-7">
-                  <p class="filler">section 8 level 7 item 0</p>
-                  <p class="filler">section 8 level 7 item 1</p>
-                  <p class="filler">section 8 level 7 item 2</p>
-                  <p class="filler">section 8 level 7 item 3</p>
+                  <p class="filler">s8d7i0</p>
+                  <p class="filler">s8d7i1</p>
                   <div class="level-8">
-                    <p class="filler">section 8 level 8 item 0</p>
-                    <p class="filler">section 8 level 8 item 1</p>
-                    <p class="filler">section 8 level 8 item 2</p>
-                    <p class="filler">section 8 level 8 item 3</p>
+                    <p class="filler">s8d8i0</p>
+                    <p class="filler">s8d8i1</p>
                     <div class="level-9">
-                      <p class="filler">section 8 level 9 item 0</p>
-                      <p class="filler">section 8 level 9 item 1</p>
-                      <p class="filler">section 8 level 9 item 2</p>
-                      <p class="filler">section 8 level 9 item 3</p>
+                      <p class="filler">s8d9i0</p>
+                      <p class="filler">s8d9i1</p>
                       <div class="level-10">
-                        <p class="filler">section 8 level 10 item 0</p>
-                        <p class="filler">section 8 level 10 item 1</p>
-                        <p class="filler">section 8 level 10 item 2</p>
-                        <p class="filler">section 8 level 10 item 3</p>
+                        <p class="filler">s8d10i0</p>
+                        <p class="filler">s8d10i1</p>
                         <span class="leaf">changed</span>
                       </div>
                     </div>
@@ -568,55 +388,35 @@
   </section>
   <section id="section-9">
     <div class="level-1">
-      <p class="filler">section 9 level 1 item 0</p>
-      <p class="filler">section 9 level 1 item 1</p>
-      <p class="filler">section 9 level 1 item 2</p>
-      <p class="filler">section 9 level 1 item 3</p>
+      <p class="filler">s9d1i0</p>
+      <p class="filler">s9d1i1</p>
       <div class="level-2">
-        <p class="filler">section 9 level 2 item 0</p>
-        <p class="filler">section 9 level 2 item 1</p>
-        <p class="filler">section 9 level 2 item 2</p>
-        <p class="filler">section 9 level 2 item 3</p>
+        <p class="filler">s9d2i0</p>
+        <p class="filler">s9d2i1</p>
         <div class="level-3">
-          <p class="filler">section 9 level 3 item 0</p>
-          <p class="filler">section 9 level 3 item 1</p>
-          <p class="filler">section 9 level 3 item 2</p>
-          <p class="filler">section 9 level 3 item 3</p>
+          <p class="filler">s9d3i0</p>
+          <p class="filler">s9d3i1</p>
           <div class="level-4">
-            <p class="filler">section 9 level 4 item 0</p>
-            <p class="filler">section 9 level 4 item 1</p>
-            <p class="filler">section 9 level 4 item 2</p>
-            <p class="filler">section 9 level 4 item 3</p>
+            <p class="filler">s9d4i0</p>
+            <p class="filler">s9d4i1</p>
             <div class="level-5">
-              <p class="filler">section 9 level 5 item 0</p>
-              <p class="filler">section 9 level 5 item 1</p>
-              <p class="filler">section 9 level 5 item 2</p>
-              <p class="filler">section 9 level 5 item 3</p>
+              <p class="filler">s9d5i0</p>
+              <p class="filler">s9d5i1</p>
               <div class="level-6">
-                <p class="filler">section 9 level 6 item 0</p>
-                <p class="filler">section 9 level 6 item 1</p>
-                <p class="filler">section 9 level 6 item 2</p>
-                <p class="filler">section 9 level 6 item 3</p>
+                <p class="filler">s9d6i0</p>
+                <p class="filler">s9d6i1</p>
                 <div class="level-7">
-                  <p class="filler">section 9 level 7 item 0</p>
-                  <p class="filler">section 9 level 7 item 1</p>
-                  <p class="filler">section 9 level 7 item 2</p>
-                  <p class="filler">section 9 level 7 item 3</p>
+                  <p class="filler">s9d7i0</p>
+                  <p class="filler">s9d7i1</p>
                   <div class="level-8">
-                    <p class="filler">section 9 level 8 item 0</p>
-                    <p class="filler">section 9 level 8 item 1</p>
-                    <p class="filler">section 9 level 8 item 2</p>
-                    <p class="filler">section 9 level 8 item 3</p>
+                    <p class="filler">s9d8i0</p>
+                    <p class="filler">s9d8i1</p>
                     <div class="level-9">
-                      <p class="filler">section 9 level 9 item 0</p>
-                      <p class="filler">section 9 level 9 item 1</p>
-                      <p class="filler">section 9 level 9 item 2</p>
-                      <p class="filler">section 9 level 9 item 3</p>
+                      <p class="filler">s9d9i0</p>
+                      <p class="filler">s9d9i1</p>
                       <div class="level-10">
-                        <p class="filler">section 9 level 10 item 0</p>
-                        <p class="filler">section 9 level 10 item 1</p>
-                        <p class="filler">section 9 level 10 item 2</p>
-                        <p class="filler">section 9 level 10 item 3</p>
+                        <p class="filler">s9d10i0</p>
+                        <p class="filler">s9d10i1</p>
                         <span class="leaf">changed</span>
                       </div>
                     </div>
@@ -631,55 +431,35 @@
   </section>
   <section id="section-10">
     <div class="level-1">
-      <p class="filler">section 10 level 1 item 0</p>
-      <p class="filler">section 10 level 1 item 1</p>
-      <p class="filler">section 10 level 1 item 2</p>
-      <p class="filler">section 10 level 1 item 3</p>
+      <p class="filler">s10d1i0</p>
+      <p class="filler">s10d1i1</p>
       <div class="level-2">
-        <p class="filler">section 10 level 2 item 0</p>
-        <p class="filler">section 10 level 2 item 1</p>
-        <p class="filler">section 10 level 2 item 2</p>
-        <p class="filler">section 10 level 2 item 3</p>
+        <p class="filler">s10d2i0</p>
+        <p class="filler">s10d2i1</p>
         <div class="level-3">
-          <p class="filler">section 10 level 3 item 0</p>
-          <p class="filler">section 10 level 3 item 1</p>
-          <p class="filler">section 10 level 3 item 2</p>
-          <p class="filler">section 10 level 3 item 3</p>
+          <p class="filler">s10d3i0</p>
+          <p class="filler">s10d3i1</p>
           <div class="level-4">
-            <p class="filler">section 10 level 4 item 0</p>
-            <p class="filler">section 10 level 4 item 1</p>
-            <p class="filler">section 10 level 4 item 2</p>
-            <p class="filler">section 10 level 4 item 3</p>
+            <p class="filler">s10d4i0</p>
+            <p class="filler">s10d4i1</p>
             <div class="level-5">
-              <p class="filler">section 10 level 5 item 0</p>
-              <p class="filler">section 10 level 5 item 1</p>
-              <p class="filler">section 10 level 5 item 2</p>
-              <p class="filler">section 10 level 5 item 3</p>
+              <p class="filler">s10d5i0</p>
+              <p class="filler">s10d5i1</p>
               <div class="level-6">
-                <p class="filler">section 10 level 6 item 0</p>
-                <p class="filler">section 10 level 6 item 1</p>
-                <p class="filler">section 10 level 6 item 2</p>
-                <p class="filler">section 10 level 6 item 3</p>
+                <p class="filler">s10d6i0</p>
+                <p class="filler">s10d6i1</p>
                 <div class="level-7">
-                  <p class="filler">section 10 level 7 item 0</p>
-                  <p class="filler">section 10 level 7 item 1</p>
-                  <p class="filler">section 10 level 7 item 2</p>
-                  <p class="filler">section 10 level 7 item 3</p>
+                  <p class="filler">s10d7i0</p>
+                  <p class="filler">s10d7i1</p>
                   <div class="level-8">
-                    <p class="filler">section 10 level 8 item 0</p>
-                    <p class="filler">section 10 level 8 item 1</p>
-                    <p class="filler">section 10 level 8 item 2</p>
-                    <p class="filler">section 10 level 8 item 3</p>
+                    <p class="filler">s10d8i0</p>
+                    <p class="filler">s10d8i1</p>
                     <div class="level-9">
-                      <p class="filler">section 10 level 9 item 0</p>
-                      <p class="filler">section 10 level 9 item 1</p>
-                      <p class="filler">section 10 level 9 item 2</p>
-                      <p class="filler">section 10 level 9 item 3</p>
+                      <p class="filler">s10d9i0</p>
+                      <p class="filler">s10d9i1</p>
                       <div class="level-10">
-                        <p class="filler">section 10 level 10 item 0</p>
-                        <p class="filler">section 10 level 10 item 1</p>
-                        <p class="filler">section 10 level 10 item 2</p>
-                        <p class="filler">section 10 level 10 item 3</p>
+                        <p class="filler">s10d10i0</p>
+                        <p class="filler">s10d10i1</p>
                         <span class="leaf">changed</span>
                       </div>
                     </div>
@@ -694,55 +474,35 @@
   </section>
   <section id="section-11">
     <div class="level-1">
-      <p class="filler">section 11 level 1 item 0</p>
-      <p class="filler">section 11 level 1 item 1</p>
-      <p class="filler">section 11 level 1 item 2</p>
-      <p class="filler">section 11 level 1 item 3</p>
+      <p class="filler">s11d1i0</p>
+      <p class="filler">s11d1i1</p>
       <div class="level-2">
-        <p class="filler">section 11 level 2 item 0</p>
-        <p class="filler">section 11 level 2 item 1</p>
-        <p class="filler">section 11 level 2 item 2</p>
-        <p class="filler">section 11 level 2 item 3</p>
+        <p class="filler">s11d2i0</p>
+        <p class="filler">s11d2i1</p>
         <div class="level-3">
-          <p class="filler">section 11 level 3 item 0</p>
-          <p class="filler">section 11 level 3 item 1</p>
-          <p class="filler">section 11 level 3 item 2</p>
-          <p class="filler">section 11 level 3 item 3</p>
+          <p class="filler">s11d3i0</p>
+          <p class="filler">s11d3i1</p>
           <div class="level-4">
-            <p class="filler">section 11 level 4 item 0</p>
-            <p class="filler">section 11 level 4 item 1</p>
-            <p class="filler">section 11 level 4 item 2</p>
-            <p class="filler">section 11 level 4 item 3</p>
+            <p class="filler">s11d4i0</p>
+            <p class="filler">s11d4i1</p>
             <div class="level-5">
-              <p class="filler">section 11 level 5 item 0</p>
-              <p class="filler">section 11 level 5 item 1</p>
-              <p class="filler">section 11 level 5 item 2</p>
-              <p class="filler">section 11 level 5 item 3</p>
+              <p class="filler">s11d5i0</p>
+              <p class="filler">s11d5i1</p>
               <div class="level-6">
-                <p class="filler">section 11 level 6 item 0</p>
-                <p class="filler">section 11 level 6 item 1</p>
-                <p class="filler">section 11 level 6 item 2</p>
-                <p class="filler">section 11 level 6 item 3</p>
+                <p class="filler">s11d6i0</p>
+                <p class="filler">s11d6i1</p>
                 <div class="level-7">
-                  <p class="filler">section 11 level 7 item 0</p>
-                  <p class="filler">section 11 level 7 item 1</p>
-                  <p class="filler">section 11 level 7 item 2</p>
-                  <p class="filler">section 11 level 7 item 3</p>
+                  <p class="filler">s11d7i0</p>
+                  <p class="filler">s11d7i1</p>
                   <div class="level-8">
-                    <p class="filler">section 11 level 8 item 0</p>
-                    <p class="filler">section 11 level 8 item 1</p>
-                    <p class="filler">section 11 level 8 item 2</p>
-                    <p class="filler">section 11 level 8 item 3</p>
+                    <p class="filler">s11d8i0</p>
+                    <p class="filler">s11d8i1</p>
                     <div class="level-9">
-                      <p class="filler">section 11 level 9 item 0</p>
-                      <p class="filler">section 11 level 9 item 1</p>
-                      <p class="filler">section 11 level 9 item 2</p>
-                      <p class="filler">section 11 level 9 item 3</p>
+                      <p class="filler">s11d9i0</p>
+                      <p class="filler">s11d9i1</p>
                       <div class="level-10">
-                        <p class="filler">section 11 level 10 item 0</p>
-                        <p class="filler">section 11 level 10 item 1</p>
-                        <p class="filler">section 11 level 10 item 2</p>
-                        <p class="filler">section 11 level 10 item 3</p>
+                        <p class="filler">s11d10i0</p>
+                        <p class="filler">s11d10i1</p>
                         <span class="leaf">changed</span>
                       </div>
                     </div>
@@ -757,55 +517,35 @@
   </section>
   <section id="section-12">
     <div class="level-1">
-      <p class="filler">section 12 level 1 item 0</p>
-      <p class="filler">section 12 level 1 item 1</p>
-      <p class="filler">section 12 level 1 item 2</p>
-      <p class="filler">section 12 level 1 item 3</p>
+      <p class="filler">s12d1i0</p>
+      <p class="filler">s12d1i1</p>
       <div class="level-2">
-        <p class="filler">section 12 level 2 item 0</p>
-        <p class="filler">section 12 level 2 item 1</p>
-        <p class="filler">section 12 level 2 item 2</p>
-        <p class="filler">section 12 level 2 item 3</p>
+        <p class="filler">s12d2i0</p>
+        <p class="filler">s12d2i1</p>
         <div class="level-3">
-          <p class="filler">section 12 level 3 item 0</p>
-          <p class="filler">section 12 level 3 item 1</p>
-          <p class="filler">section 12 level 3 item 2</p>
-          <p class="filler">section 12 level 3 item 3</p>
+          <p class="filler">s12d3i0</p>
+          <p class="filler">s12d3i1</p>
           <div class="level-4">
-            <p class="filler">section 12 level 4 item 0</p>
-            <p class="filler">section 12 level 4 item 1</p>
-            <p class="filler">section 12 level 4 item 2</p>
-            <p class="filler">section 12 level 4 item 3</p>
+            <p class="filler">s12d4i0</p>
+            <p class="filler">s12d4i1</p>
             <div class="level-5">
-              <p class="filler">section 12 level 5 item 0</p>
-              <p class="filler">section 12 level 5 item 1</p>
-              <p class="filler">section 12 level 5 item 2</p>
-              <p class="filler">section 12 level 5 item 3</p>
+              <p class="filler">s12d5i0</p>
+              <p class="filler">s12d5i1</p>
               <div class="level-6">
-                <p class="filler">section 12 level 6 item 0</p>
-                <p class="filler">section 12 level 6 item 1</p>
-                <p class="filler">section 12 level 6 item 2</p>
-                <p class="filler">section 12 level 6 item 3</p>
+                <p class="filler">s12d6i0</p>
+                <p class="filler">s12d6i1</p>
                 <div class="level-7">
-                  <p class="filler">section 12 level 7 item 0</p>
-                  <p class="filler">section 12 level 7 item 1</p>
-                  <p class="filler">section 12 level 7 item 2</p>
-                  <p class="filler">section 12 level 7 item 3</p>
+                  <p class="filler">s12d7i0</p>
+                  <p class="filler">s12d7i1</p>
                   <div class="level-8">
-                    <p class="filler">section 12 level 8 item 0</p>
-                    <p class="filler">section 12 level 8 item 1</p>
-                    <p class="filler">section 12 level 8 item 2</p>
-                    <p class="filler">section 12 level 8 item 3</p>
+                    <p class="filler">s12d8i0</p>
+                    <p class="filler">s12d8i1</p>
                     <div class="level-9">
-                      <p class="filler">section 12 level 9 item 0</p>
-                      <p class="filler">section 12 level 9 item 1</p>
-                      <p class="filler">section 12 level 9 item 2</p>
-                      <p class="filler">section 12 level 9 item 3</p>
+                      <p class="filler">s12d9i0</p>
+                      <p class="filler">s12d9i1</p>
                       <div class="level-10">
-                        <p class="filler">section 12 level 10 item 0</p>
-                        <p class="filler">section 12 level 10 item 1</p>
-                        <p class="filler">section 12 level 10 item 2</p>
-                        <p class="filler">section 12 level 10 item 3</p>
+                        <p class="filler">s12d10i0</p>
+                        <p class="filler">s12d10i1</p>
                         <span class="leaf">changed</span>
                       </div>
                     </div>
@@ -820,55 +560,35 @@
   </section>
   <section id="section-13">
     <div class="level-1">
-      <p class="filler">section 13 level 1 item 0</p>
-      <p class="filler">section 13 level 1 item 1</p>
-      <p class="filler">section 13 level 1 item 2</p>
-      <p class="filler">section 13 level 1 item 3</p>
+      <p class="filler">s13d1i0</p>
+      <p class="filler">s13d1i1</p>
       <div class="level-2">
-        <p class="filler">section 13 level 2 item 0</p>
-        <p class="filler">section 13 level 2 item 1</p>
-        <p class="filler">section 13 level 2 item 2</p>
-        <p class="filler">section 13 level 2 item 3</p>
+        <p class="filler">s13d2i0</p>
+        <p class="filler">s13d2i1</p>
         <div class="level-3">
-          <p class="filler">section 13 level 3 item 0</p>
-          <p class="filler">section 13 level 3 item 1</p>
-          <p class="filler">section 13 level 3 item 2</p>
-          <p class="filler">section 13 level 3 item 3</p>
+          <p class="filler">s13d3i0</p>
+          <p class="filler">s13d3i1</p>
           <div class="level-4">
-            <p class="filler">section 13 level 4 item 0</p>
-            <p class="filler">section 13 level 4 item 1</p>
-            <p class="filler">section 13 level 4 item 2</p>
-            <p class="filler">section 13 level 4 item 3</p>
+            <p class="filler">s13d4i0</p>
+            <p class="filler">s13d4i1</p>
             <div class="level-5">
-              <p class="filler">section 13 level 5 item 0</p>
-              <p class="filler">section 13 level 5 item 1</p>
-              <p class="filler">section 13 level 5 item 2</p>
-              <p class="filler">section 13 level 5 item 3</p>
+              <p class="filler">s13d5i0</p>
+              <p class="filler">s13d5i1</p>
               <div class="level-6">
-                <p class="filler">section 13 level 6 item 0</p>
-                <p class="filler">section 13 level 6 item 1</p>
-                <p class="filler">section 13 level 6 item 2</p>
-                <p class="filler">section 13 level 6 item 3</p>
+                <p class="filler">s13d6i0</p>
+                <p class="filler">s13d6i1</p>
                 <div class="level-7">
-                  <p class="filler">section 13 level 7 item 0</p>
-                  <p class="filler">section 13 level 7 item 1</p>
-                  <p class="filler">section 13 level 7 item 2</p>
-                  <p class="filler">section 13 level 7 item 3</p>
+                  <p class="filler">s13d7i0</p>
+                  <p class="filler">s13d7i1</p>
                   <div class="level-8">
-                    <p class="filler">section 13 level 8 item 0</p>
-                    <p class="filler">section 13 level 8 item 1</p>
-                    <p class="filler">section 13 level 8 item 2</p>
-                    <p class="filler">section 13 level 8 item 3</p>
+                    <p class="filler">s13d8i0</p>
+                    <p class="filler">s13d8i1</p>
                     <div class="level-9">
-                      <p class="filler">section 13 level 9 item 0</p>
-                      <p class="filler">section 13 level 9 item 1</p>
-                      <p class="filler">section 13 level 9 item 2</p>
-                      <p class="filler">section 13 level 9 item 3</p>
+                      <p class="filler">s13d9i0</p>
+                      <p class="filler">s13d9i1</p>
                       <div class="level-10">
-                        <p class="filler">section 13 level 10 item 0</p>
-                        <p class="filler">section 13 level 10 item 1</p>
-                        <p class="filler">section 13 level 10 item 2</p>
-                        <p class="filler">section 13 level 10 item 3</p>
+                        <p class="filler">s13d10i0</p>
+                        <p class="filler">s13d10i1</p>
                         <span class="leaf">changed</span>
                       </div>
                     </div>
@@ -883,55 +603,35 @@
   </section>
   <section id="section-14">
     <div class="level-1">
-      <p class="filler">section 14 level 1 item 0</p>
-      <p class="filler">section 14 level 1 item 1</p>
-      <p class="filler">section 14 level 1 item 2</p>
-      <p class="filler">section 14 level 1 item 3</p>
+      <p class="filler">s14d1i0</p>
+      <p class="filler">s14d1i1</p>
       <div class="level-2">
-        <p class="filler">section 14 level 2 item 0</p>
-        <p class="filler">section 14 level 2 item 1</p>
-        <p class="filler">section 14 level 2 item 2</p>
-        <p class="filler">section 14 level 2 item 3</p>
+        <p class="filler">s14d2i0</p>
+        <p class="filler">s14d2i1</p>
         <div class="level-3">
-          <p class="filler">section 14 level 3 item 0</p>
-          <p class="filler">section 14 level 3 item 1</p>
-          <p class="filler">section 14 level 3 item 2</p>
-          <p class="filler">section 14 level 3 item 3</p>
+          <p class="filler">s14d3i0</p>
+          <p class="filler">s14d3i1</p>
           <div class="level-4">
-            <p class="filler">section 14 level 4 item 0</p>
-            <p class="filler">section 14 level 4 item 1</p>
-            <p class="filler">section 14 level 4 item 2</p>
-            <p class="filler">section 14 level 4 item 3</p>
+            <p class="filler">s14d4i0</p>
+            <p class="filler">s14d4i1</p>
             <div class="level-5">
-              <p class="filler">section 14 level 5 item 0</p>
-              <p class="filler">section 14 level 5 item 1</p>
-              <p class="filler">section 14 level 5 item 2</p>
-              <p class="filler">section 14 level 5 item 3</p>
+              <p class="filler">s14d5i0</p>
+              <p class="filler">s14d5i1</p>
               <div class="level-6">
-                <p class="filler">section 14 level 6 item 0</p>
-                <p class="filler">section 14 level 6 item 1</p>
-                <p class="filler">section 14 level 6 item 2</p>
-                <p class="filler">section 14 level 6 item 3</p>
+                <p class="filler">s14d6i0</p>
+                <p class="filler">s14d6i1</p>
                 <div class="level-7">
-                  <p class="filler">section 14 level 7 item 0</p>
-                  <p class="filler">section 14 level 7 item 1</p>
-                  <p class="filler">section 14 level 7 item 2</p>
-                  <p class="filler">section 14 level 7 item 3</p>
+                  <p class="filler">s14d7i0</p>
+                  <p class="filler">s14d7i1</p>
                   <div class="level-8">
-                    <p class="filler">section 14 level 8 item 0</p>
-                    <p class="filler">section 14 level 8 item 1</p>
-                    <p class="filler">section 14 level 8 item 2</p>
-                    <p class="filler">section 14 level 8 item 3</p>
+                    <p class="filler">s14d8i0</p>
+                    <p class="filler">s14d8i1</p>
                     <div class="level-9">
-                      <p class="filler">section 14 level 9 item 0</p>
-                      <p class="filler">section 14 level 9 item 1</p>
-                      <p class="filler">section 14 level 9 item 2</p>
-                      <p class="filler">section 14 level 9 item 3</p>
+                      <p class="filler">s14d9i0</p>
+                      <p class="filler">s14d9i1</p>
                       <div class="level-10">
-                        <p class="filler">section 14 level 10 item 0</p>
-                        <p class="filler">section 14 level 10 item 1</p>
-                        <p class="filler">section 14 level 10 item 2</p>
-                        <p class="filler">section 14 level 10 item 3</p>
+                        <p class="filler">s14d10i0</p>
+                        <p class="filler">s14d10i1</p>
                         <span class="leaf">changed</span>
                       </div>
                     </div>
@@ -946,55 +646,35 @@
   </section>
   <section id="section-15">
     <div class="level-1">
-      <p class="filler">section 15 level 1 item 0</p>
-      <p class="filler">section 15 level 1 item 1</p>
-      <p class="filler">section 15 level 1 item 2</p>
-      <p class="filler">section 15 level 1 item 3</p>
+      <p class="filler">s15d1i0</p>
+      <p class="filler">s15d1i1</p>
       <div class="level-2">
-        <p class="filler">section 15 level 2 item 0</p>
-        <p class="filler">section 15 level 2 item 1</p>
-        <p class="filler">section 15 level 2 item 2</p>
-        <p class="filler">section 15 level 2 item 3</p>
+        <p class="filler">s15d2i0</p>
+        <p class="filler">s15d2i1</p>
         <div class="level-3">
-          <p class="filler">section 15 level 3 item 0</p>
-          <p class="filler">section 15 level 3 item 1</p>
-          <p class="filler">section 15 level 3 item 2</p>
-          <p class="filler">section 15 level 3 item 3</p>
+          <p class="filler">s15d3i0</p>
+          <p class="filler">s15d3i1</p>
           <div class="level-4">
-            <p class="filler">section 15 level 4 item 0</p>
-            <p class="filler">section 15 level 4 item 1</p>
-            <p class="filler">section 15 level 4 item 2</p>
-            <p class="filler">section 15 level 4 item 3</p>
+            <p class="filler">s15d4i0</p>
+            <p class="filler">s15d4i1</p>
             <div class="level-5">
-              <p class="filler">section 15 level 5 item 0</p>
-              <p class="filler">section 15 level 5 item 1</p>
-              <p class="filler">section 15 level 5 item 2</p>
-              <p class="filler">section 15 level 5 item 3</p>
+              <p class="filler">s15d5i0</p>
+              <p class="filler">s15d5i1</p>
               <div class="level-6">
-                <p class="filler">section 15 level 6 item 0</p>
-                <p class="filler">section 15 level 6 item 1</p>
-                <p class="filler">section 15 level 6 item 2</p>
-                <p class="filler">section 15 level 6 item 3</p>
+                <p class="filler">s15d6i0</p>
+                <p class="filler">s15d6i1</p>
                 <div class="level-7">
-                  <p class="filler">section 15 level 7 item 0</p>
-                  <p class="filler">section 15 level 7 item 1</p>
-                  <p class="filler">section 15 level 7 item 2</p>
-                  <p class="filler">section 15 level 7 item 3</p>
+                  <p class="filler">s15d7i0</p>
+                  <p class="filler">s15d7i1</p>
                   <div class="level-8">
-                    <p class="filler">section 15 level 8 item 0</p>
-                    <p class="filler">section 15 level 8 item 1</p>
-                    <p class="filler">section 15 level 8 item 2</p>
-                    <p class="filler">section 15 level 8 item 3</p>
+                    <p class="filler">s15d8i0</p>
+                    <p class="filler">s15d8i1</p>
                     <div class="level-9">
-                      <p class="filler">section 15 level 9 item 0</p>
-                      <p class="filler">section 15 level 9 item 1</p>
-                      <p class="filler">section 15 level 9 item 2</p>
-                      <p class="filler">section 15 level 9 item 3</p>
+                      <p class="filler">s15d9i0</p>
+                      <p class="filler">s15d9i1</p>
                       <div class="level-10">
-                        <p class="filler">section 15 level 10 item 0</p>
-                        <p class="filler">section 15 level 10 item 1</p>
-                        <p class="filler">section 15 level 10 item 2</p>
-                        <p class="filler">section 15 level 10 item 3</p>
+                        <p class="filler">s15d10i0</p>
+                        <p class="filler">s15d10i1</p>
                         <span class="leaf">changed</span>
                       </div>
                     </div>
@@ -1009,55 +689,35 @@
   </section>
   <section id="section-16">
     <div class="level-1">
-      <p class="filler">section 16 level 1 item 0</p>
-      <p class="filler">section 16 level 1 item 1</p>
-      <p class="filler">section 16 level 1 item 2</p>
-      <p class="filler">section 16 level 1 item 3</p>
+      <p class="filler">s16d1i0</p>
+      <p class="filler">s16d1i1</p>
       <div class="level-2">
-        <p class="filler">section 16 level 2 item 0</p>
-        <p class="filler">section 16 level 2 item 1</p>
-        <p class="filler">section 16 level 2 item 2</p>
-        <p class="filler">section 16 level 2 item 3</p>
+        <p class="filler">s16d2i0</p>
+        <p class="filler">s16d2i1</p>
         <div class="level-3">
-          <p class="filler">section 16 level 3 item 0</p>
-          <p class="filler">section 16 level 3 item 1</p>
-          <p class="filler">section 16 level 3 item 2</p>
-          <p class="filler">section 16 level 3 item 3</p>
+          <p class="filler">s16d3i0</p>
+          <p class="filler">s16d3i1</p>
           <div class="level-4">
-            <p class="filler">section 16 level 4 item 0</p>
-            <p class="filler">section 16 level 4 item 1</p>
-            <p class="filler">section 16 level 4 item 2</p>
-            <p class="filler">section 16 level 4 item 3</p>
+            <p class="filler">s16d4i0</p>
+            <p class="filler">s16d4i1</p>
             <div class="level-5">
-              <p class="filler">section 16 level 5 item 0</p>
-              <p class="filler">section 16 level 5 item 1</p>
-              <p class="filler">section 16 level 5 item 2</p>
-              <p class="filler">section 16 level 5 item 3</p>
+              <p class="filler">s16d5i0</p>
+              <p class="filler">s16d5i1</p>
               <div class="level-6">
-                <p class="filler">section 16 level 6 item 0</p>
-                <p class="filler">section 16 level 6 item 1</p>
-                <p class="filler">section 16 level 6 item 2</p>
-                <p class="filler">section 16 level 6 item 3</p>
+                <p class="filler">s16d6i0</p>
+                <p class="filler">s16d6i1</p>
                 <div class="level-7">
-                  <p class="filler">section 16 level 7 item 0</p>
-                  <p class="filler">section 16 level 7 item 1</p>
-                  <p class="filler">section 16 level 7 item 2</p>
-                  <p class="filler">section 16 level 7 item 3</p>
+                  <p class="filler">s16d7i0</p>
+                  <p class="filler">s16d7i1</p>
                   <div class="level-8">
-                    <p class="filler">section 16 level 8 item 0</p>
-                    <p class="filler">section 16 level 8 item 1</p>
-                    <p class="filler">section 16 level 8 item 2</p>
-                    <p class="filler">section 16 level 8 item 3</p>
+                    <p class="filler">s16d8i0</p>
+                    <p class="filler">s16d8i1</p>
                     <div class="level-9">
-                      <p class="filler">section 16 level 9 item 0</p>
-                      <p class="filler">section 16 level 9 item 1</p>
-                      <p class="filler">section 16 level 9 item 2</p>
-                      <p class="filler">section 16 level 9 item 3</p>
+                      <p class="filler">s16d9i0</p>
+                      <p class="filler">s16d9i1</p>
                       <div class="level-10">
-                        <p class="filler">section 16 level 10 item 0</p>
-                        <p class="filler">section 16 level 10 item 1</p>
-                        <p class="filler">section 16 level 10 item 2</p>
-                        <p class="filler">section 16 level 10 item 3</p>
+                        <p class="filler">s16d10i0</p>
+                        <p class="filler">s16d10i1</p>
                         <span class="leaf">changed</span>
                       </div>
                     </div>
@@ -1072,55 +732,35 @@
   </section>
   <section id="section-17">
     <div class="level-1">
-      <p class="filler">section 17 level 1 item 0</p>
-      <p class="filler">section 17 level 1 item 1</p>
-      <p class="filler">section 17 level 1 item 2</p>
-      <p class="filler">section 17 level 1 item 3</p>
+      <p class="filler">s17d1i0</p>
+      <p class="filler">s17d1i1</p>
       <div class="level-2">
-        <p class="filler">section 17 level 2 item 0</p>
-        <p class="filler">section 17 level 2 item 1</p>
-        <p class="filler">section 17 level 2 item 2</p>
-        <p class="filler">section 17 level 2 item 3</p>
+        <p class="filler">s17d2i0</p>
+        <p class="filler">s17d2i1</p>
         <div class="level-3">
-          <p class="filler">section 17 level 3 item 0</p>
-          <p class="filler">section 17 level 3 item 1</p>
-          <p class="filler">section 17 level 3 item 2</p>
-          <p class="filler">section 17 level 3 item 3</p>
+          <p class="filler">s17d3i0</p>
+          <p class="filler">s17d3i1</p>
           <div class="level-4">
-            <p class="filler">section 17 level 4 item 0</p>
-            <p class="filler">section 17 level 4 item 1</p>
-            <p class="filler">section 17 level 4 item 2</p>
-            <p class="filler">section 17 level 4 item 3</p>
+            <p class="filler">s17d4i0</p>
+            <p class="filler">s17d4i1</p>
             <div class="level-5">
-              <p class="filler">section 17 level 5 item 0</p>
-              <p class="filler">section 17 level 5 item 1</p>
-              <p class="filler">section 17 level 5 item 2</p>
-              <p class="filler">section 17 level 5 item 3</p>
+              <p class="filler">s17d5i0</p>
+              <p class="filler">s17d5i1</p>
               <div class="level-6">
-                <p class="filler">section 17 level 6 item 0</p>
-                <p class="filler">section 17 level 6 item 1</p>
-                <p class="filler">section 17 level 6 item 2</p>
-                <p class="filler">section 17 level 6 item 3</p>
+                <p class="filler">s17d6i0</p>
+                <p class="filler">s17d6i1</p>
                 <div class="level-7">
-                  <p class="filler">section 17 level 7 item 0</p>
-                  <p class="filler">section 17 level 7 item 1</p>
-                  <p class="filler">section 17 level 7 item 2</p>
-                  <p class="filler">section 17 level 7 item 3</p>
+                  <p class="filler">s17d7i0</p>
+                  <p class="filler">s17d7i1</p>
                   <div class="level-8">
-                    <p class="filler">section 17 level 8 item 0</p>
-                    <p class="filler">section 17 level 8 item 1</p>
-                    <p class="filler">section 17 level 8 item 2</p>
-                    <p class="filler">section 17 level 8 item 3</p>
+                    <p class="filler">s17d8i0</p>
+                    <p class="filler">s17d8i1</p>
                     <div class="level-9">
-                      <p class="filler">section 17 level 9 item 0</p>
-                      <p class="filler">section 17 level 9 item 1</p>
-                      <p class="filler">section 17 level 9 item 2</p>
-                      <p class="filler">section 17 level 9 item 3</p>
+                      <p class="filler">s17d9i0</p>
+                      <p class="filler">s17d9i1</p>
                       <div class="level-10">
-                        <p class="filler">section 17 level 10 item 0</p>
-                        <p class="filler">section 17 level 10 item 1</p>
-                        <p class="filler">section 17 level 10 item 2</p>
-                        <p class="filler">section 17 level 10 item 3</p>
+                        <p class="filler">s17d10i0</p>
+                        <p class="filler">s17d10i1</p>
                         <span class="leaf">changed</span>
                       </div>
                     </div>
@@ -1135,55 +775,35 @@
   </section>
   <section id="section-18">
     <div class="level-1">
-      <p class="filler">section 18 level 1 item 0</p>
-      <p class="filler">section 18 level 1 item 1</p>
-      <p class="filler">section 18 level 1 item 2</p>
-      <p class="filler">section 18 level 1 item 3</p>
+      <p class="filler">s18d1i0</p>
+      <p class="filler">s18d1i1</p>
       <div class="level-2">
-        <p class="filler">section 18 level 2 item 0</p>
-        <p class="filler">section 18 level 2 item 1</p>
-        <p class="filler">section 18 level 2 item 2</p>
-        <p class="filler">section 18 level 2 item 3</p>
+        <p class="filler">s18d2i0</p>
+        <p class="filler">s18d2i1</p>
         <div class="level-3">
-          <p class="filler">section 18 level 3 item 0</p>
-          <p class="filler">section 18 level 3 item 1</p>
-          <p class="filler">section 18 level 3 item 2</p>
-          <p class="filler">section 18 level 3 item 3</p>
+          <p class="filler">s18d3i0</p>
+          <p class="filler">s18d3i1</p>
           <div class="level-4">
-            <p class="filler">section 18 level 4 item 0</p>
-            <p class="filler">section 18 level 4 item 1</p>
-            <p class="filler">section 18 level 4 item 2</p>
-            <p class="filler">section 18 level 4 item 3</p>
+            <p class="filler">s18d4i0</p>
+            <p class="filler">s18d4i1</p>
             <div class="level-5">
-              <p class="filler">section 18 level 5 item 0</p>
-              <p class="filler">section 18 level 5 item 1</p>
-              <p class="filler">section 18 level 5 item 2</p>
-              <p class="filler">section 18 level 5 item 3</p>
+              <p class="filler">s18d5i0</p>
+              <p class="filler">s18d5i1</p>
               <div class="level-6">
-                <p class="filler">section 18 level 6 item 0</p>
-                <p class="filler">section 18 level 6 item 1</p>
-                <p class="filler">section 18 level 6 item 2</p>
-                <p class="filler">section 18 level 6 item 3</p>
+                <p class="filler">s18d6i0</p>
+                <p class="filler">s18d6i1</p>
                 <div class="level-7">
-                  <p class="filler">section 18 level 7 item 0</p>
-                  <p class="filler">section 18 level 7 item 1</p>
-                  <p class="filler">section 18 level 7 item 2</p>
-                  <p class="filler">section 18 level 7 item 3</p>
+                  <p class="filler">s18d7i0</p>
+                  <p class="filler">s18d7i1</p>
                   <div class="level-8">
-                    <p class="filler">section 18 level 8 item 0</p>
-                    <p class="filler">section 18 level 8 item 1</p>
-                    <p class="filler">section 18 level 8 item 2</p>
-                    <p class="filler">section 18 level 8 item 3</p>
+                    <p class="filler">s18d8i0</p>
+                    <p class="filler">s18d8i1</p>
                     <div class="level-9">
-                      <p class="filler">section 18 level 9 item 0</p>
-                      <p class="filler">section 18 level 9 item 1</p>
-                      <p class="filler">section 18 level 9 item 2</p>
-                      <p class="filler">section 18 level 9 item 3</p>
+                      <p class="filler">s18d9i0</p>
+                      <p class="filler">s18d9i1</p>
                       <div class="level-10">
-                        <p class="filler">section 18 level 10 item 0</p>
-                        <p class="filler">section 18 level 10 item 1</p>
-                        <p class="filler">section 18 level 10 item 2</p>
-                        <p class="filler">section 18 level 10 item 3</p>
+                        <p class="filler">s18d10i0</p>
+                        <p class="filler">s18d10i1</p>
                         <span class="leaf">changed</span>
                       </div>
                     </div>
@@ -1198,1315 +818,35 @@
   </section>
   <section id="section-19">
     <div class="level-1">
-      <p class="filler">section 19 level 1 item 0</p>
-      <p class="filler">section 19 level 1 item 1</p>
-      <p class="filler">section 19 level 1 item 2</p>
-      <p class="filler">section 19 level 1 item 3</p>
+      <p class="filler">s19d1i0</p>
+      <p class="filler">s19d1i1</p>
       <div class="level-2">
-        <p class="filler">section 19 level 2 item 0</p>
-        <p class="filler">section 19 level 2 item 1</p>
-        <p class="filler">section 19 level 2 item 2</p>
-        <p class="filler">section 19 level 2 item 3</p>
+        <p class="filler">s19d2i0</p>
+        <p class="filler">s19d2i1</p>
         <div class="level-3">
-          <p class="filler">section 19 level 3 item 0</p>
-          <p class="filler">section 19 level 3 item 1</p>
-          <p class="filler">section 19 level 3 item 2</p>
-          <p class="filler">section 19 level 3 item 3</p>
+          <p class="filler">s19d3i0</p>
+          <p class="filler">s19d3i1</p>
           <div class="level-4">
-            <p class="filler">section 19 level 4 item 0</p>
-            <p class="filler">section 19 level 4 item 1</p>
-            <p class="filler">section 19 level 4 item 2</p>
-            <p class="filler">section 19 level 4 item 3</p>
+            <p class="filler">s19d4i0</p>
+            <p class="filler">s19d4i1</p>
             <div class="level-5">
-              <p class="filler">section 19 level 5 item 0</p>
-              <p class="filler">section 19 level 5 item 1</p>
-              <p class="filler">section 19 level 5 item 2</p>
-              <p class="filler">section 19 level 5 item 3</p>
+              <p class="filler">s19d5i0</p>
+              <p class="filler">s19d5i1</p>
               <div class="level-6">
-                <p class="filler">section 19 level 6 item 0</p>
-                <p class="filler">section 19 level 6 item 1</p>
-                <p class="filler">section 19 level 6 item 2</p>
-                <p class="filler">section 19 level 6 item 3</p>
+                <p class="filler">s19d6i0</p>
+                <p class="filler">s19d6i1</p>
                 <div class="level-7">
-                  <p class="filler">section 19 level 7 item 0</p>
-                  <p class="filler">section 19 level 7 item 1</p>
-                  <p class="filler">section 19 level 7 item 2</p>
-                  <p class="filler">section 19 level 7 item 3</p>
+                  <p class="filler">s19d7i0</p>
+                  <p class="filler">s19d7i1</p>
                   <div class="level-8">
-                    <p class="filler">section 19 level 8 item 0</p>
-                    <p class="filler">section 19 level 8 item 1</p>
-                    <p class="filler">section 19 level 8 item 2</p>
-                    <p class="filler">section 19 level 8 item 3</p>
+                    <p class="filler">s19d8i0</p>
+                    <p class="filler">s19d8i1</p>
                     <div class="level-9">
-                      <p class="filler">section 19 level 9 item 0</p>
-                      <p class="filler">section 19 level 9 item 1</p>
-                      <p class="filler">section 19 level 9 item 2</p>
-                      <p class="filler">section 19 level 9 item 3</p>
+                      <p class="filler">s19d9i0</p>
+                      <p class="filler">s19d9i1</p>
                       <div class="level-10">
-                        <p class="filler">section 19 level 10 item 0</p>
-                        <p class="filler">section 19 level 10 item 1</p>
-                        <p class="filler">section 19 level 10 item 2</p>
-                        <p class="filler">section 19 level 10 item 3</p>
-                        <span class="leaf">changed</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <section id="section-20">
-    <div class="level-1">
-      <p class="filler">section 20 level 1 item 0</p>
-      <p class="filler">section 20 level 1 item 1</p>
-      <p class="filler">section 20 level 1 item 2</p>
-      <p class="filler">section 20 level 1 item 3</p>
-      <div class="level-2">
-        <p class="filler">section 20 level 2 item 0</p>
-        <p class="filler">section 20 level 2 item 1</p>
-        <p class="filler">section 20 level 2 item 2</p>
-        <p class="filler">section 20 level 2 item 3</p>
-        <div class="level-3">
-          <p class="filler">section 20 level 3 item 0</p>
-          <p class="filler">section 20 level 3 item 1</p>
-          <p class="filler">section 20 level 3 item 2</p>
-          <p class="filler">section 20 level 3 item 3</p>
-          <div class="level-4">
-            <p class="filler">section 20 level 4 item 0</p>
-            <p class="filler">section 20 level 4 item 1</p>
-            <p class="filler">section 20 level 4 item 2</p>
-            <p class="filler">section 20 level 4 item 3</p>
-            <div class="level-5">
-              <p class="filler">section 20 level 5 item 0</p>
-              <p class="filler">section 20 level 5 item 1</p>
-              <p class="filler">section 20 level 5 item 2</p>
-              <p class="filler">section 20 level 5 item 3</p>
-              <div class="level-6">
-                <p class="filler">section 20 level 6 item 0</p>
-                <p class="filler">section 20 level 6 item 1</p>
-                <p class="filler">section 20 level 6 item 2</p>
-                <p class="filler">section 20 level 6 item 3</p>
-                <div class="level-7">
-                  <p class="filler">section 20 level 7 item 0</p>
-                  <p class="filler">section 20 level 7 item 1</p>
-                  <p class="filler">section 20 level 7 item 2</p>
-                  <p class="filler">section 20 level 7 item 3</p>
-                  <div class="level-8">
-                    <p class="filler">section 20 level 8 item 0</p>
-                    <p class="filler">section 20 level 8 item 1</p>
-                    <p class="filler">section 20 level 8 item 2</p>
-                    <p class="filler">section 20 level 8 item 3</p>
-                    <div class="level-9">
-                      <p class="filler">section 20 level 9 item 0</p>
-                      <p class="filler">section 20 level 9 item 1</p>
-                      <p class="filler">section 20 level 9 item 2</p>
-                      <p class="filler">section 20 level 9 item 3</p>
-                      <div class="level-10">
-                        <p class="filler">section 20 level 10 item 0</p>
-                        <p class="filler">section 20 level 10 item 1</p>
-                        <p class="filler">section 20 level 10 item 2</p>
-                        <p class="filler">section 20 level 10 item 3</p>
-                        <span class="leaf">changed</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <section id="section-21">
-    <div class="level-1">
-      <p class="filler">section 21 level 1 item 0</p>
-      <p class="filler">section 21 level 1 item 1</p>
-      <p class="filler">section 21 level 1 item 2</p>
-      <p class="filler">section 21 level 1 item 3</p>
-      <div class="level-2">
-        <p class="filler">section 21 level 2 item 0</p>
-        <p class="filler">section 21 level 2 item 1</p>
-        <p class="filler">section 21 level 2 item 2</p>
-        <p class="filler">section 21 level 2 item 3</p>
-        <div class="level-3">
-          <p class="filler">section 21 level 3 item 0</p>
-          <p class="filler">section 21 level 3 item 1</p>
-          <p class="filler">section 21 level 3 item 2</p>
-          <p class="filler">section 21 level 3 item 3</p>
-          <div class="level-4">
-            <p class="filler">section 21 level 4 item 0</p>
-            <p class="filler">section 21 level 4 item 1</p>
-            <p class="filler">section 21 level 4 item 2</p>
-            <p class="filler">section 21 level 4 item 3</p>
-            <div class="level-5">
-              <p class="filler">section 21 level 5 item 0</p>
-              <p class="filler">section 21 level 5 item 1</p>
-              <p class="filler">section 21 level 5 item 2</p>
-              <p class="filler">section 21 level 5 item 3</p>
-              <div class="level-6">
-                <p class="filler">section 21 level 6 item 0</p>
-                <p class="filler">section 21 level 6 item 1</p>
-                <p class="filler">section 21 level 6 item 2</p>
-                <p class="filler">section 21 level 6 item 3</p>
-                <div class="level-7">
-                  <p class="filler">section 21 level 7 item 0</p>
-                  <p class="filler">section 21 level 7 item 1</p>
-                  <p class="filler">section 21 level 7 item 2</p>
-                  <p class="filler">section 21 level 7 item 3</p>
-                  <div class="level-8">
-                    <p class="filler">section 21 level 8 item 0</p>
-                    <p class="filler">section 21 level 8 item 1</p>
-                    <p class="filler">section 21 level 8 item 2</p>
-                    <p class="filler">section 21 level 8 item 3</p>
-                    <div class="level-9">
-                      <p class="filler">section 21 level 9 item 0</p>
-                      <p class="filler">section 21 level 9 item 1</p>
-                      <p class="filler">section 21 level 9 item 2</p>
-                      <p class="filler">section 21 level 9 item 3</p>
-                      <div class="level-10">
-                        <p class="filler">section 21 level 10 item 0</p>
-                        <p class="filler">section 21 level 10 item 1</p>
-                        <p class="filler">section 21 level 10 item 2</p>
-                        <p class="filler">section 21 level 10 item 3</p>
-                        <span class="leaf">changed</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <section id="section-22">
-    <div class="level-1">
-      <p class="filler">section 22 level 1 item 0</p>
-      <p class="filler">section 22 level 1 item 1</p>
-      <p class="filler">section 22 level 1 item 2</p>
-      <p class="filler">section 22 level 1 item 3</p>
-      <div class="level-2">
-        <p class="filler">section 22 level 2 item 0</p>
-        <p class="filler">section 22 level 2 item 1</p>
-        <p class="filler">section 22 level 2 item 2</p>
-        <p class="filler">section 22 level 2 item 3</p>
-        <div class="level-3">
-          <p class="filler">section 22 level 3 item 0</p>
-          <p class="filler">section 22 level 3 item 1</p>
-          <p class="filler">section 22 level 3 item 2</p>
-          <p class="filler">section 22 level 3 item 3</p>
-          <div class="level-4">
-            <p class="filler">section 22 level 4 item 0</p>
-            <p class="filler">section 22 level 4 item 1</p>
-            <p class="filler">section 22 level 4 item 2</p>
-            <p class="filler">section 22 level 4 item 3</p>
-            <div class="level-5">
-              <p class="filler">section 22 level 5 item 0</p>
-              <p class="filler">section 22 level 5 item 1</p>
-              <p class="filler">section 22 level 5 item 2</p>
-              <p class="filler">section 22 level 5 item 3</p>
-              <div class="level-6">
-                <p class="filler">section 22 level 6 item 0</p>
-                <p class="filler">section 22 level 6 item 1</p>
-                <p class="filler">section 22 level 6 item 2</p>
-                <p class="filler">section 22 level 6 item 3</p>
-                <div class="level-7">
-                  <p class="filler">section 22 level 7 item 0</p>
-                  <p class="filler">section 22 level 7 item 1</p>
-                  <p class="filler">section 22 level 7 item 2</p>
-                  <p class="filler">section 22 level 7 item 3</p>
-                  <div class="level-8">
-                    <p class="filler">section 22 level 8 item 0</p>
-                    <p class="filler">section 22 level 8 item 1</p>
-                    <p class="filler">section 22 level 8 item 2</p>
-                    <p class="filler">section 22 level 8 item 3</p>
-                    <div class="level-9">
-                      <p class="filler">section 22 level 9 item 0</p>
-                      <p class="filler">section 22 level 9 item 1</p>
-                      <p class="filler">section 22 level 9 item 2</p>
-                      <p class="filler">section 22 level 9 item 3</p>
-                      <div class="level-10">
-                        <p class="filler">section 22 level 10 item 0</p>
-                        <p class="filler">section 22 level 10 item 1</p>
-                        <p class="filler">section 22 level 10 item 2</p>
-                        <p class="filler">section 22 level 10 item 3</p>
-                        <span class="leaf">changed</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <section id="section-23">
-    <div class="level-1">
-      <p class="filler">section 23 level 1 item 0</p>
-      <p class="filler">section 23 level 1 item 1</p>
-      <p class="filler">section 23 level 1 item 2</p>
-      <p class="filler">section 23 level 1 item 3</p>
-      <div class="level-2">
-        <p class="filler">section 23 level 2 item 0</p>
-        <p class="filler">section 23 level 2 item 1</p>
-        <p class="filler">section 23 level 2 item 2</p>
-        <p class="filler">section 23 level 2 item 3</p>
-        <div class="level-3">
-          <p class="filler">section 23 level 3 item 0</p>
-          <p class="filler">section 23 level 3 item 1</p>
-          <p class="filler">section 23 level 3 item 2</p>
-          <p class="filler">section 23 level 3 item 3</p>
-          <div class="level-4">
-            <p class="filler">section 23 level 4 item 0</p>
-            <p class="filler">section 23 level 4 item 1</p>
-            <p class="filler">section 23 level 4 item 2</p>
-            <p class="filler">section 23 level 4 item 3</p>
-            <div class="level-5">
-              <p class="filler">section 23 level 5 item 0</p>
-              <p class="filler">section 23 level 5 item 1</p>
-              <p class="filler">section 23 level 5 item 2</p>
-              <p class="filler">section 23 level 5 item 3</p>
-              <div class="level-6">
-                <p class="filler">section 23 level 6 item 0</p>
-                <p class="filler">section 23 level 6 item 1</p>
-                <p class="filler">section 23 level 6 item 2</p>
-                <p class="filler">section 23 level 6 item 3</p>
-                <div class="level-7">
-                  <p class="filler">section 23 level 7 item 0</p>
-                  <p class="filler">section 23 level 7 item 1</p>
-                  <p class="filler">section 23 level 7 item 2</p>
-                  <p class="filler">section 23 level 7 item 3</p>
-                  <div class="level-8">
-                    <p class="filler">section 23 level 8 item 0</p>
-                    <p class="filler">section 23 level 8 item 1</p>
-                    <p class="filler">section 23 level 8 item 2</p>
-                    <p class="filler">section 23 level 8 item 3</p>
-                    <div class="level-9">
-                      <p class="filler">section 23 level 9 item 0</p>
-                      <p class="filler">section 23 level 9 item 1</p>
-                      <p class="filler">section 23 level 9 item 2</p>
-                      <p class="filler">section 23 level 9 item 3</p>
-                      <div class="level-10">
-                        <p class="filler">section 23 level 10 item 0</p>
-                        <p class="filler">section 23 level 10 item 1</p>
-                        <p class="filler">section 23 level 10 item 2</p>
-                        <p class="filler">section 23 level 10 item 3</p>
-                        <span class="leaf">changed</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <section id="section-24">
-    <div class="level-1">
-      <p class="filler">section 24 level 1 item 0</p>
-      <p class="filler">section 24 level 1 item 1</p>
-      <p class="filler">section 24 level 1 item 2</p>
-      <p class="filler">section 24 level 1 item 3</p>
-      <div class="level-2">
-        <p class="filler">section 24 level 2 item 0</p>
-        <p class="filler">section 24 level 2 item 1</p>
-        <p class="filler">section 24 level 2 item 2</p>
-        <p class="filler">section 24 level 2 item 3</p>
-        <div class="level-3">
-          <p class="filler">section 24 level 3 item 0</p>
-          <p class="filler">section 24 level 3 item 1</p>
-          <p class="filler">section 24 level 3 item 2</p>
-          <p class="filler">section 24 level 3 item 3</p>
-          <div class="level-4">
-            <p class="filler">section 24 level 4 item 0</p>
-            <p class="filler">section 24 level 4 item 1</p>
-            <p class="filler">section 24 level 4 item 2</p>
-            <p class="filler">section 24 level 4 item 3</p>
-            <div class="level-5">
-              <p class="filler">section 24 level 5 item 0</p>
-              <p class="filler">section 24 level 5 item 1</p>
-              <p class="filler">section 24 level 5 item 2</p>
-              <p class="filler">section 24 level 5 item 3</p>
-              <div class="level-6">
-                <p class="filler">section 24 level 6 item 0</p>
-                <p class="filler">section 24 level 6 item 1</p>
-                <p class="filler">section 24 level 6 item 2</p>
-                <p class="filler">section 24 level 6 item 3</p>
-                <div class="level-7">
-                  <p class="filler">section 24 level 7 item 0</p>
-                  <p class="filler">section 24 level 7 item 1</p>
-                  <p class="filler">section 24 level 7 item 2</p>
-                  <p class="filler">section 24 level 7 item 3</p>
-                  <div class="level-8">
-                    <p class="filler">section 24 level 8 item 0</p>
-                    <p class="filler">section 24 level 8 item 1</p>
-                    <p class="filler">section 24 level 8 item 2</p>
-                    <p class="filler">section 24 level 8 item 3</p>
-                    <div class="level-9">
-                      <p class="filler">section 24 level 9 item 0</p>
-                      <p class="filler">section 24 level 9 item 1</p>
-                      <p class="filler">section 24 level 9 item 2</p>
-                      <p class="filler">section 24 level 9 item 3</p>
-                      <div class="level-10">
-                        <p class="filler">section 24 level 10 item 0</p>
-                        <p class="filler">section 24 level 10 item 1</p>
-                        <p class="filler">section 24 level 10 item 2</p>
-                        <p class="filler">section 24 level 10 item 3</p>
-                        <span class="leaf">changed</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <section id="section-25">
-    <div class="level-1">
-      <p class="filler">section 25 level 1 item 0</p>
-      <p class="filler">section 25 level 1 item 1</p>
-      <p class="filler">section 25 level 1 item 2</p>
-      <p class="filler">section 25 level 1 item 3</p>
-      <div class="level-2">
-        <p class="filler">section 25 level 2 item 0</p>
-        <p class="filler">section 25 level 2 item 1</p>
-        <p class="filler">section 25 level 2 item 2</p>
-        <p class="filler">section 25 level 2 item 3</p>
-        <div class="level-3">
-          <p class="filler">section 25 level 3 item 0</p>
-          <p class="filler">section 25 level 3 item 1</p>
-          <p class="filler">section 25 level 3 item 2</p>
-          <p class="filler">section 25 level 3 item 3</p>
-          <div class="level-4">
-            <p class="filler">section 25 level 4 item 0</p>
-            <p class="filler">section 25 level 4 item 1</p>
-            <p class="filler">section 25 level 4 item 2</p>
-            <p class="filler">section 25 level 4 item 3</p>
-            <div class="level-5">
-              <p class="filler">section 25 level 5 item 0</p>
-              <p class="filler">section 25 level 5 item 1</p>
-              <p class="filler">section 25 level 5 item 2</p>
-              <p class="filler">section 25 level 5 item 3</p>
-              <div class="level-6">
-                <p class="filler">section 25 level 6 item 0</p>
-                <p class="filler">section 25 level 6 item 1</p>
-                <p class="filler">section 25 level 6 item 2</p>
-                <p class="filler">section 25 level 6 item 3</p>
-                <div class="level-7">
-                  <p class="filler">section 25 level 7 item 0</p>
-                  <p class="filler">section 25 level 7 item 1</p>
-                  <p class="filler">section 25 level 7 item 2</p>
-                  <p class="filler">section 25 level 7 item 3</p>
-                  <div class="level-8">
-                    <p class="filler">section 25 level 8 item 0</p>
-                    <p class="filler">section 25 level 8 item 1</p>
-                    <p class="filler">section 25 level 8 item 2</p>
-                    <p class="filler">section 25 level 8 item 3</p>
-                    <div class="level-9">
-                      <p class="filler">section 25 level 9 item 0</p>
-                      <p class="filler">section 25 level 9 item 1</p>
-                      <p class="filler">section 25 level 9 item 2</p>
-                      <p class="filler">section 25 level 9 item 3</p>
-                      <div class="level-10">
-                        <p class="filler">section 25 level 10 item 0</p>
-                        <p class="filler">section 25 level 10 item 1</p>
-                        <p class="filler">section 25 level 10 item 2</p>
-                        <p class="filler">section 25 level 10 item 3</p>
-                        <span class="leaf">changed</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <section id="section-26">
-    <div class="level-1">
-      <p class="filler">section 26 level 1 item 0</p>
-      <p class="filler">section 26 level 1 item 1</p>
-      <p class="filler">section 26 level 1 item 2</p>
-      <p class="filler">section 26 level 1 item 3</p>
-      <div class="level-2">
-        <p class="filler">section 26 level 2 item 0</p>
-        <p class="filler">section 26 level 2 item 1</p>
-        <p class="filler">section 26 level 2 item 2</p>
-        <p class="filler">section 26 level 2 item 3</p>
-        <div class="level-3">
-          <p class="filler">section 26 level 3 item 0</p>
-          <p class="filler">section 26 level 3 item 1</p>
-          <p class="filler">section 26 level 3 item 2</p>
-          <p class="filler">section 26 level 3 item 3</p>
-          <div class="level-4">
-            <p class="filler">section 26 level 4 item 0</p>
-            <p class="filler">section 26 level 4 item 1</p>
-            <p class="filler">section 26 level 4 item 2</p>
-            <p class="filler">section 26 level 4 item 3</p>
-            <div class="level-5">
-              <p class="filler">section 26 level 5 item 0</p>
-              <p class="filler">section 26 level 5 item 1</p>
-              <p class="filler">section 26 level 5 item 2</p>
-              <p class="filler">section 26 level 5 item 3</p>
-              <div class="level-6">
-                <p class="filler">section 26 level 6 item 0</p>
-                <p class="filler">section 26 level 6 item 1</p>
-                <p class="filler">section 26 level 6 item 2</p>
-                <p class="filler">section 26 level 6 item 3</p>
-                <div class="level-7">
-                  <p class="filler">section 26 level 7 item 0</p>
-                  <p class="filler">section 26 level 7 item 1</p>
-                  <p class="filler">section 26 level 7 item 2</p>
-                  <p class="filler">section 26 level 7 item 3</p>
-                  <div class="level-8">
-                    <p class="filler">section 26 level 8 item 0</p>
-                    <p class="filler">section 26 level 8 item 1</p>
-                    <p class="filler">section 26 level 8 item 2</p>
-                    <p class="filler">section 26 level 8 item 3</p>
-                    <div class="level-9">
-                      <p class="filler">section 26 level 9 item 0</p>
-                      <p class="filler">section 26 level 9 item 1</p>
-                      <p class="filler">section 26 level 9 item 2</p>
-                      <p class="filler">section 26 level 9 item 3</p>
-                      <div class="level-10">
-                        <p class="filler">section 26 level 10 item 0</p>
-                        <p class="filler">section 26 level 10 item 1</p>
-                        <p class="filler">section 26 level 10 item 2</p>
-                        <p class="filler">section 26 level 10 item 3</p>
-                        <span class="leaf">changed</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <section id="section-27">
-    <div class="level-1">
-      <p class="filler">section 27 level 1 item 0</p>
-      <p class="filler">section 27 level 1 item 1</p>
-      <p class="filler">section 27 level 1 item 2</p>
-      <p class="filler">section 27 level 1 item 3</p>
-      <div class="level-2">
-        <p class="filler">section 27 level 2 item 0</p>
-        <p class="filler">section 27 level 2 item 1</p>
-        <p class="filler">section 27 level 2 item 2</p>
-        <p class="filler">section 27 level 2 item 3</p>
-        <div class="level-3">
-          <p class="filler">section 27 level 3 item 0</p>
-          <p class="filler">section 27 level 3 item 1</p>
-          <p class="filler">section 27 level 3 item 2</p>
-          <p class="filler">section 27 level 3 item 3</p>
-          <div class="level-4">
-            <p class="filler">section 27 level 4 item 0</p>
-            <p class="filler">section 27 level 4 item 1</p>
-            <p class="filler">section 27 level 4 item 2</p>
-            <p class="filler">section 27 level 4 item 3</p>
-            <div class="level-5">
-              <p class="filler">section 27 level 5 item 0</p>
-              <p class="filler">section 27 level 5 item 1</p>
-              <p class="filler">section 27 level 5 item 2</p>
-              <p class="filler">section 27 level 5 item 3</p>
-              <div class="level-6">
-                <p class="filler">section 27 level 6 item 0</p>
-                <p class="filler">section 27 level 6 item 1</p>
-                <p class="filler">section 27 level 6 item 2</p>
-                <p class="filler">section 27 level 6 item 3</p>
-                <div class="level-7">
-                  <p class="filler">section 27 level 7 item 0</p>
-                  <p class="filler">section 27 level 7 item 1</p>
-                  <p class="filler">section 27 level 7 item 2</p>
-                  <p class="filler">section 27 level 7 item 3</p>
-                  <div class="level-8">
-                    <p class="filler">section 27 level 8 item 0</p>
-                    <p class="filler">section 27 level 8 item 1</p>
-                    <p class="filler">section 27 level 8 item 2</p>
-                    <p class="filler">section 27 level 8 item 3</p>
-                    <div class="level-9">
-                      <p class="filler">section 27 level 9 item 0</p>
-                      <p class="filler">section 27 level 9 item 1</p>
-                      <p class="filler">section 27 level 9 item 2</p>
-                      <p class="filler">section 27 level 9 item 3</p>
-                      <div class="level-10">
-                        <p class="filler">section 27 level 10 item 0</p>
-                        <p class="filler">section 27 level 10 item 1</p>
-                        <p class="filler">section 27 level 10 item 2</p>
-                        <p class="filler">section 27 level 10 item 3</p>
-                        <span class="leaf">changed</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <section id="section-28">
-    <div class="level-1">
-      <p class="filler">section 28 level 1 item 0</p>
-      <p class="filler">section 28 level 1 item 1</p>
-      <p class="filler">section 28 level 1 item 2</p>
-      <p class="filler">section 28 level 1 item 3</p>
-      <div class="level-2">
-        <p class="filler">section 28 level 2 item 0</p>
-        <p class="filler">section 28 level 2 item 1</p>
-        <p class="filler">section 28 level 2 item 2</p>
-        <p class="filler">section 28 level 2 item 3</p>
-        <div class="level-3">
-          <p class="filler">section 28 level 3 item 0</p>
-          <p class="filler">section 28 level 3 item 1</p>
-          <p class="filler">section 28 level 3 item 2</p>
-          <p class="filler">section 28 level 3 item 3</p>
-          <div class="level-4">
-            <p class="filler">section 28 level 4 item 0</p>
-            <p class="filler">section 28 level 4 item 1</p>
-            <p class="filler">section 28 level 4 item 2</p>
-            <p class="filler">section 28 level 4 item 3</p>
-            <div class="level-5">
-              <p class="filler">section 28 level 5 item 0</p>
-              <p class="filler">section 28 level 5 item 1</p>
-              <p class="filler">section 28 level 5 item 2</p>
-              <p class="filler">section 28 level 5 item 3</p>
-              <div class="level-6">
-                <p class="filler">section 28 level 6 item 0</p>
-                <p class="filler">section 28 level 6 item 1</p>
-                <p class="filler">section 28 level 6 item 2</p>
-                <p class="filler">section 28 level 6 item 3</p>
-                <div class="level-7">
-                  <p class="filler">section 28 level 7 item 0</p>
-                  <p class="filler">section 28 level 7 item 1</p>
-                  <p class="filler">section 28 level 7 item 2</p>
-                  <p class="filler">section 28 level 7 item 3</p>
-                  <div class="level-8">
-                    <p class="filler">section 28 level 8 item 0</p>
-                    <p class="filler">section 28 level 8 item 1</p>
-                    <p class="filler">section 28 level 8 item 2</p>
-                    <p class="filler">section 28 level 8 item 3</p>
-                    <div class="level-9">
-                      <p class="filler">section 28 level 9 item 0</p>
-                      <p class="filler">section 28 level 9 item 1</p>
-                      <p class="filler">section 28 level 9 item 2</p>
-                      <p class="filler">section 28 level 9 item 3</p>
-                      <div class="level-10">
-                        <p class="filler">section 28 level 10 item 0</p>
-                        <p class="filler">section 28 level 10 item 1</p>
-                        <p class="filler">section 28 level 10 item 2</p>
-                        <p class="filler">section 28 level 10 item 3</p>
-                        <span class="leaf">changed</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <section id="section-29">
-    <div class="level-1">
-      <p class="filler">section 29 level 1 item 0</p>
-      <p class="filler">section 29 level 1 item 1</p>
-      <p class="filler">section 29 level 1 item 2</p>
-      <p class="filler">section 29 level 1 item 3</p>
-      <div class="level-2">
-        <p class="filler">section 29 level 2 item 0</p>
-        <p class="filler">section 29 level 2 item 1</p>
-        <p class="filler">section 29 level 2 item 2</p>
-        <p class="filler">section 29 level 2 item 3</p>
-        <div class="level-3">
-          <p class="filler">section 29 level 3 item 0</p>
-          <p class="filler">section 29 level 3 item 1</p>
-          <p class="filler">section 29 level 3 item 2</p>
-          <p class="filler">section 29 level 3 item 3</p>
-          <div class="level-4">
-            <p class="filler">section 29 level 4 item 0</p>
-            <p class="filler">section 29 level 4 item 1</p>
-            <p class="filler">section 29 level 4 item 2</p>
-            <p class="filler">section 29 level 4 item 3</p>
-            <div class="level-5">
-              <p class="filler">section 29 level 5 item 0</p>
-              <p class="filler">section 29 level 5 item 1</p>
-              <p class="filler">section 29 level 5 item 2</p>
-              <p class="filler">section 29 level 5 item 3</p>
-              <div class="level-6">
-                <p class="filler">section 29 level 6 item 0</p>
-                <p class="filler">section 29 level 6 item 1</p>
-                <p class="filler">section 29 level 6 item 2</p>
-                <p class="filler">section 29 level 6 item 3</p>
-                <div class="level-7">
-                  <p class="filler">section 29 level 7 item 0</p>
-                  <p class="filler">section 29 level 7 item 1</p>
-                  <p class="filler">section 29 level 7 item 2</p>
-                  <p class="filler">section 29 level 7 item 3</p>
-                  <div class="level-8">
-                    <p class="filler">section 29 level 8 item 0</p>
-                    <p class="filler">section 29 level 8 item 1</p>
-                    <p class="filler">section 29 level 8 item 2</p>
-                    <p class="filler">section 29 level 8 item 3</p>
-                    <div class="level-9">
-                      <p class="filler">section 29 level 9 item 0</p>
-                      <p class="filler">section 29 level 9 item 1</p>
-                      <p class="filler">section 29 level 9 item 2</p>
-                      <p class="filler">section 29 level 9 item 3</p>
-                      <div class="level-10">
-                        <p class="filler">section 29 level 10 item 0</p>
-                        <p class="filler">section 29 level 10 item 1</p>
-                        <p class="filler">section 29 level 10 item 2</p>
-                        <p class="filler">section 29 level 10 item 3</p>
-                        <span class="leaf">changed</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <section id="section-30">
-    <div class="level-1">
-      <p class="filler">section 30 level 1 item 0</p>
-      <p class="filler">section 30 level 1 item 1</p>
-      <p class="filler">section 30 level 1 item 2</p>
-      <p class="filler">section 30 level 1 item 3</p>
-      <div class="level-2">
-        <p class="filler">section 30 level 2 item 0</p>
-        <p class="filler">section 30 level 2 item 1</p>
-        <p class="filler">section 30 level 2 item 2</p>
-        <p class="filler">section 30 level 2 item 3</p>
-        <div class="level-3">
-          <p class="filler">section 30 level 3 item 0</p>
-          <p class="filler">section 30 level 3 item 1</p>
-          <p class="filler">section 30 level 3 item 2</p>
-          <p class="filler">section 30 level 3 item 3</p>
-          <div class="level-4">
-            <p class="filler">section 30 level 4 item 0</p>
-            <p class="filler">section 30 level 4 item 1</p>
-            <p class="filler">section 30 level 4 item 2</p>
-            <p class="filler">section 30 level 4 item 3</p>
-            <div class="level-5">
-              <p class="filler">section 30 level 5 item 0</p>
-              <p class="filler">section 30 level 5 item 1</p>
-              <p class="filler">section 30 level 5 item 2</p>
-              <p class="filler">section 30 level 5 item 3</p>
-              <div class="level-6">
-                <p class="filler">section 30 level 6 item 0</p>
-                <p class="filler">section 30 level 6 item 1</p>
-                <p class="filler">section 30 level 6 item 2</p>
-                <p class="filler">section 30 level 6 item 3</p>
-                <div class="level-7">
-                  <p class="filler">section 30 level 7 item 0</p>
-                  <p class="filler">section 30 level 7 item 1</p>
-                  <p class="filler">section 30 level 7 item 2</p>
-                  <p class="filler">section 30 level 7 item 3</p>
-                  <div class="level-8">
-                    <p class="filler">section 30 level 8 item 0</p>
-                    <p class="filler">section 30 level 8 item 1</p>
-                    <p class="filler">section 30 level 8 item 2</p>
-                    <p class="filler">section 30 level 8 item 3</p>
-                    <div class="level-9">
-                      <p class="filler">section 30 level 9 item 0</p>
-                      <p class="filler">section 30 level 9 item 1</p>
-                      <p class="filler">section 30 level 9 item 2</p>
-                      <p class="filler">section 30 level 9 item 3</p>
-                      <div class="level-10">
-                        <p class="filler">section 30 level 10 item 0</p>
-                        <p class="filler">section 30 level 10 item 1</p>
-                        <p class="filler">section 30 level 10 item 2</p>
-                        <p class="filler">section 30 level 10 item 3</p>
-                        <span class="leaf">changed</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <section id="section-31">
-    <div class="level-1">
-      <p class="filler">section 31 level 1 item 0</p>
-      <p class="filler">section 31 level 1 item 1</p>
-      <p class="filler">section 31 level 1 item 2</p>
-      <p class="filler">section 31 level 1 item 3</p>
-      <div class="level-2">
-        <p class="filler">section 31 level 2 item 0</p>
-        <p class="filler">section 31 level 2 item 1</p>
-        <p class="filler">section 31 level 2 item 2</p>
-        <p class="filler">section 31 level 2 item 3</p>
-        <div class="level-3">
-          <p class="filler">section 31 level 3 item 0</p>
-          <p class="filler">section 31 level 3 item 1</p>
-          <p class="filler">section 31 level 3 item 2</p>
-          <p class="filler">section 31 level 3 item 3</p>
-          <div class="level-4">
-            <p class="filler">section 31 level 4 item 0</p>
-            <p class="filler">section 31 level 4 item 1</p>
-            <p class="filler">section 31 level 4 item 2</p>
-            <p class="filler">section 31 level 4 item 3</p>
-            <div class="level-5">
-              <p class="filler">section 31 level 5 item 0</p>
-              <p class="filler">section 31 level 5 item 1</p>
-              <p class="filler">section 31 level 5 item 2</p>
-              <p class="filler">section 31 level 5 item 3</p>
-              <div class="level-6">
-                <p class="filler">section 31 level 6 item 0</p>
-                <p class="filler">section 31 level 6 item 1</p>
-                <p class="filler">section 31 level 6 item 2</p>
-                <p class="filler">section 31 level 6 item 3</p>
-                <div class="level-7">
-                  <p class="filler">section 31 level 7 item 0</p>
-                  <p class="filler">section 31 level 7 item 1</p>
-                  <p class="filler">section 31 level 7 item 2</p>
-                  <p class="filler">section 31 level 7 item 3</p>
-                  <div class="level-8">
-                    <p class="filler">section 31 level 8 item 0</p>
-                    <p class="filler">section 31 level 8 item 1</p>
-                    <p class="filler">section 31 level 8 item 2</p>
-                    <p class="filler">section 31 level 8 item 3</p>
-                    <div class="level-9">
-                      <p class="filler">section 31 level 9 item 0</p>
-                      <p class="filler">section 31 level 9 item 1</p>
-                      <p class="filler">section 31 level 9 item 2</p>
-                      <p class="filler">section 31 level 9 item 3</p>
-                      <div class="level-10">
-                        <p class="filler">section 31 level 10 item 0</p>
-                        <p class="filler">section 31 level 10 item 1</p>
-                        <p class="filler">section 31 level 10 item 2</p>
-                        <p class="filler">section 31 level 10 item 3</p>
-                        <span class="leaf">changed</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <section id="section-32">
-    <div class="level-1">
-      <p class="filler">section 32 level 1 item 0</p>
-      <p class="filler">section 32 level 1 item 1</p>
-      <p class="filler">section 32 level 1 item 2</p>
-      <p class="filler">section 32 level 1 item 3</p>
-      <div class="level-2">
-        <p class="filler">section 32 level 2 item 0</p>
-        <p class="filler">section 32 level 2 item 1</p>
-        <p class="filler">section 32 level 2 item 2</p>
-        <p class="filler">section 32 level 2 item 3</p>
-        <div class="level-3">
-          <p class="filler">section 32 level 3 item 0</p>
-          <p class="filler">section 32 level 3 item 1</p>
-          <p class="filler">section 32 level 3 item 2</p>
-          <p class="filler">section 32 level 3 item 3</p>
-          <div class="level-4">
-            <p class="filler">section 32 level 4 item 0</p>
-            <p class="filler">section 32 level 4 item 1</p>
-            <p class="filler">section 32 level 4 item 2</p>
-            <p class="filler">section 32 level 4 item 3</p>
-            <div class="level-5">
-              <p class="filler">section 32 level 5 item 0</p>
-              <p class="filler">section 32 level 5 item 1</p>
-              <p class="filler">section 32 level 5 item 2</p>
-              <p class="filler">section 32 level 5 item 3</p>
-              <div class="level-6">
-                <p class="filler">section 32 level 6 item 0</p>
-                <p class="filler">section 32 level 6 item 1</p>
-                <p class="filler">section 32 level 6 item 2</p>
-                <p class="filler">section 32 level 6 item 3</p>
-                <div class="level-7">
-                  <p class="filler">section 32 level 7 item 0</p>
-                  <p class="filler">section 32 level 7 item 1</p>
-                  <p class="filler">section 32 level 7 item 2</p>
-                  <p class="filler">section 32 level 7 item 3</p>
-                  <div class="level-8">
-                    <p class="filler">section 32 level 8 item 0</p>
-                    <p class="filler">section 32 level 8 item 1</p>
-                    <p class="filler">section 32 level 8 item 2</p>
-                    <p class="filler">section 32 level 8 item 3</p>
-                    <div class="level-9">
-                      <p class="filler">section 32 level 9 item 0</p>
-                      <p class="filler">section 32 level 9 item 1</p>
-                      <p class="filler">section 32 level 9 item 2</p>
-                      <p class="filler">section 32 level 9 item 3</p>
-                      <div class="level-10">
-                        <p class="filler">section 32 level 10 item 0</p>
-                        <p class="filler">section 32 level 10 item 1</p>
-                        <p class="filler">section 32 level 10 item 2</p>
-                        <p class="filler">section 32 level 10 item 3</p>
-                        <span class="leaf">changed</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <section id="section-33">
-    <div class="level-1">
-      <p class="filler">section 33 level 1 item 0</p>
-      <p class="filler">section 33 level 1 item 1</p>
-      <p class="filler">section 33 level 1 item 2</p>
-      <p class="filler">section 33 level 1 item 3</p>
-      <div class="level-2">
-        <p class="filler">section 33 level 2 item 0</p>
-        <p class="filler">section 33 level 2 item 1</p>
-        <p class="filler">section 33 level 2 item 2</p>
-        <p class="filler">section 33 level 2 item 3</p>
-        <div class="level-3">
-          <p class="filler">section 33 level 3 item 0</p>
-          <p class="filler">section 33 level 3 item 1</p>
-          <p class="filler">section 33 level 3 item 2</p>
-          <p class="filler">section 33 level 3 item 3</p>
-          <div class="level-4">
-            <p class="filler">section 33 level 4 item 0</p>
-            <p class="filler">section 33 level 4 item 1</p>
-            <p class="filler">section 33 level 4 item 2</p>
-            <p class="filler">section 33 level 4 item 3</p>
-            <div class="level-5">
-              <p class="filler">section 33 level 5 item 0</p>
-              <p class="filler">section 33 level 5 item 1</p>
-              <p class="filler">section 33 level 5 item 2</p>
-              <p class="filler">section 33 level 5 item 3</p>
-              <div class="level-6">
-                <p class="filler">section 33 level 6 item 0</p>
-                <p class="filler">section 33 level 6 item 1</p>
-                <p class="filler">section 33 level 6 item 2</p>
-                <p class="filler">section 33 level 6 item 3</p>
-                <div class="level-7">
-                  <p class="filler">section 33 level 7 item 0</p>
-                  <p class="filler">section 33 level 7 item 1</p>
-                  <p class="filler">section 33 level 7 item 2</p>
-                  <p class="filler">section 33 level 7 item 3</p>
-                  <div class="level-8">
-                    <p class="filler">section 33 level 8 item 0</p>
-                    <p class="filler">section 33 level 8 item 1</p>
-                    <p class="filler">section 33 level 8 item 2</p>
-                    <p class="filler">section 33 level 8 item 3</p>
-                    <div class="level-9">
-                      <p class="filler">section 33 level 9 item 0</p>
-                      <p class="filler">section 33 level 9 item 1</p>
-                      <p class="filler">section 33 level 9 item 2</p>
-                      <p class="filler">section 33 level 9 item 3</p>
-                      <div class="level-10">
-                        <p class="filler">section 33 level 10 item 0</p>
-                        <p class="filler">section 33 level 10 item 1</p>
-                        <p class="filler">section 33 level 10 item 2</p>
-                        <p class="filler">section 33 level 10 item 3</p>
-                        <span class="leaf">changed</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <section id="section-34">
-    <div class="level-1">
-      <p class="filler">section 34 level 1 item 0</p>
-      <p class="filler">section 34 level 1 item 1</p>
-      <p class="filler">section 34 level 1 item 2</p>
-      <p class="filler">section 34 level 1 item 3</p>
-      <div class="level-2">
-        <p class="filler">section 34 level 2 item 0</p>
-        <p class="filler">section 34 level 2 item 1</p>
-        <p class="filler">section 34 level 2 item 2</p>
-        <p class="filler">section 34 level 2 item 3</p>
-        <div class="level-3">
-          <p class="filler">section 34 level 3 item 0</p>
-          <p class="filler">section 34 level 3 item 1</p>
-          <p class="filler">section 34 level 3 item 2</p>
-          <p class="filler">section 34 level 3 item 3</p>
-          <div class="level-4">
-            <p class="filler">section 34 level 4 item 0</p>
-            <p class="filler">section 34 level 4 item 1</p>
-            <p class="filler">section 34 level 4 item 2</p>
-            <p class="filler">section 34 level 4 item 3</p>
-            <div class="level-5">
-              <p class="filler">section 34 level 5 item 0</p>
-              <p class="filler">section 34 level 5 item 1</p>
-              <p class="filler">section 34 level 5 item 2</p>
-              <p class="filler">section 34 level 5 item 3</p>
-              <div class="level-6">
-                <p class="filler">section 34 level 6 item 0</p>
-                <p class="filler">section 34 level 6 item 1</p>
-                <p class="filler">section 34 level 6 item 2</p>
-                <p class="filler">section 34 level 6 item 3</p>
-                <div class="level-7">
-                  <p class="filler">section 34 level 7 item 0</p>
-                  <p class="filler">section 34 level 7 item 1</p>
-                  <p class="filler">section 34 level 7 item 2</p>
-                  <p class="filler">section 34 level 7 item 3</p>
-                  <div class="level-8">
-                    <p class="filler">section 34 level 8 item 0</p>
-                    <p class="filler">section 34 level 8 item 1</p>
-                    <p class="filler">section 34 level 8 item 2</p>
-                    <p class="filler">section 34 level 8 item 3</p>
-                    <div class="level-9">
-                      <p class="filler">section 34 level 9 item 0</p>
-                      <p class="filler">section 34 level 9 item 1</p>
-                      <p class="filler">section 34 level 9 item 2</p>
-                      <p class="filler">section 34 level 9 item 3</p>
-                      <div class="level-10">
-                        <p class="filler">section 34 level 10 item 0</p>
-                        <p class="filler">section 34 level 10 item 1</p>
-                        <p class="filler">section 34 level 10 item 2</p>
-                        <p class="filler">section 34 level 10 item 3</p>
-                        <span class="leaf">changed</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <section id="section-35">
-    <div class="level-1">
-      <p class="filler">section 35 level 1 item 0</p>
-      <p class="filler">section 35 level 1 item 1</p>
-      <p class="filler">section 35 level 1 item 2</p>
-      <p class="filler">section 35 level 1 item 3</p>
-      <div class="level-2">
-        <p class="filler">section 35 level 2 item 0</p>
-        <p class="filler">section 35 level 2 item 1</p>
-        <p class="filler">section 35 level 2 item 2</p>
-        <p class="filler">section 35 level 2 item 3</p>
-        <div class="level-3">
-          <p class="filler">section 35 level 3 item 0</p>
-          <p class="filler">section 35 level 3 item 1</p>
-          <p class="filler">section 35 level 3 item 2</p>
-          <p class="filler">section 35 level 3 item 3</p>
-          <div class="level-4">
-            <p class="filler">section 35 level 4 item 0</p>
-            <p class="filler">section 35 level 4 item 1</p>
-            <p class="filler">section 35 level 4 item 2</p>
-            <p class="filler">section 35 level 4 item 3</p>
-            <div class="level-5">
-              <p class="filler">section 35 level 5 item 0</p>
-              <p class="filler">section 35 level 5 item 1</p>
-              <p class="filler">section 35 level 5 item 2</p>
-              <p class="filler">section 35 level 5 item 3</p>
-              <div class="level-6">
-                <p class="filler">section 35 level 6 item 0</p>
-                <p class="filler">section 35 level 6 item 1</p>
-                <p class="filler">section 35 level 6 item 2</p>
-                <p class="filler">section 35 level 6 item 3</p>
-                <div class="level-7">
-                  <p class="filler">section 35 level 7 item 0</p>
-                  <p class="filler">section 35 level 7 item 1</p>
-                  <p class="filler">section 35 level 7 item 2</p>
-                  <p class="filler">section 35 level 7 item 3</p>
-                  <div class="level-8">
-                    <p class="filler">section 35 level 8 item 0</p>
-                    <p class="filler">section 35 level 8 item 1</p>
-                    <p class="filler">section 35 level 8 item 2</p>
-                    <p class="filler">section 35 level 8 item 3</p>
-                    <div class="level-9">
-                      <p class="filler">section 35 level 9 item 0</p>
-                      <p class="filler">section 35 level 9 item 1</p>
-                      <p class="filler">section 35 level 9 item 2</p>
-                      <p class="filler">section 35 level 9 item 3</p>
-                      <div class="level-10">
-                        <p class="filler">section 35 level 10 item 0</p>
-                        <p class="filler">section 35 level 10 item 1</p>
-                        <p class="filler">section 35 level 10 item 2</p>
-                        <p class="filler">section 35 level 10 item 3</p>
-                        <span class="leaf">changed</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <section id="section-36">
-    <div class="level-1">
-      <p class="filler">section 36 level 1 item 0</p>
-      <p class="filler">section 36 level 1 item 1</p>
-      <p class="filler">section 36 level 1 item 2</p>
-      <p class="filler">section 36 level 1 item 3</p>
-      <div class="level-2">
-        <p class="filler">section 36 level 2 item 0</p>
-        <p class="filler">section 36 level 2 item 1</p>
-        <p class="filler">section 36 level 2 item 2</p>
-        <p class="filler">section 36 level 2 item 3</p>
-        <div class="level-3">
-          <p class="filler">section 36 level 3 item 0</p>
-          <p class="filler">section 36 level 3 item 1</p>
-          <p class="filler">section 36 level 3 item 2</p>
-          <p class="filler">section 36 level 3 item 3</p>
-          <div class="level-4">
-            <p class="filler">section 36 level 4 item 0</p>
-            <p class="filler">section 36 level 4 item 1</p>
-            <p class="filler">section 36 level 4 item 2</p>
-            <p class="filler">section 36 level 4 item 3</p>
-            <div class="level-5">
-              <p class="filler">section 36 level 5 item 0</p>
-              <p class="filler">section 36 level 5 item 1</p>
-              <p class="filler">section 36 level 5 item 2</p>
-              <p class="filler">section 36 level 5 item 3</p>
-              <div class="level-6">
-                <p class="filler">section 36 level 6 item 0</p>
-                <p class="filler">section 36 level 6 item 1</p>
-                <p class="filler">section 36 level 6 item 2</p>
-                <p class="filler">section 36 level 6 item 3</p>
-                <div class="level-7">
-                  <p class="filler">section 36 level 7 item 0</p>
-                  <p class="filler">section 36 level 7 item 1</p>
-                  <p class="filler">section 36 level 7 item 2</p>
-                  <p class="filler">section 36 level 7 item 3</p>
-                  <div class="level-8">
-                    <p class="filler">section 36 level 8 item 0</p>
-                    <p class="filler">section 36 level 8 item 1</p>
-                    <p class="filler">section 36 level 8 item 2</p>
-                    <p class="filler">section 36 level 8 item 3</p>
-                    <div class="level-9">
-                      <p class="filler">section 36 level 9 item 0</p>
-                      <p class="filler">section 36 level 9 item 1</p>
-                      <p class="filler">section 36 level 9 item 2</p>
-                      <p class="filler">section 36 level 9 item 3</p>
-                      <div class="level-10">
-                        <p class="filler">section 36 level 10 item 0</p>
-                        <p class="filler">section 36 level 10 item 1</p>
-                        <p class="filler">section 36 level 10 item 2</p>
-                        <p class="filler">section 36 level 10 item 3</p>
-                        <span class="leaf">changed</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <section id="section-37">
-    <div class="level-1">
-      <p class="filler">section 37 level 1 item 0</p>
-      <p class="filler">section 37 level 1 item 1</p>
-      <p class="filler">section 37 level 1 item 2</p>
-      <p class="filler">section 37 level 1 item 3</p>
-      <div class="level-2">
-        <p class="filler">section 37 level 2 item 0</p>
-        <p class="filler">section 37 level 2 item 1</p>
-        <p class="filler">section 37 level 2 item 2</p>
-        <p class="filler">section 37 level 2 item 3</p>
-        <div class="level-3">
-          <p class="filler">section 37 level 3 item 0</p>
-          <p class="filler">section 37 level 3 item 1</p>
-          <p class="filler">section 37 level 3 item 2</p>
-          <p class="filler">section 37 level 3 item 3</p>
-          <div class="level-4">
-            <p class="filler">section 37 level 4 item 0</p>
-            <p class="filler">section 37 level 4 item 1</p>
-            <p class="filler">section 37 level 4 item 2</p>
-            <p class="filler">section 37 level 4 item 3</p>
-            <div class="level-5">
-              <p class="filler">section 37 level 5 item 0</p>
-              <p class="filler">section 37 level 5 item 1</p>
-              <p class="filler">section 37 level 5 item 2</p>
-              <p class="filler">section 37 level 5 item 3</p>
-              <div class="level-6">
-                <p class="filler">section 37 level 6 item 0</p>
-                <p class="filler">section 37 level 6 item 1</p>
-                <p class="filler">section 37 level 6 item 2</p>
-                <p class="filler">section 37 level 6 item 3</p>
-                <div class="level-7">
-                  <p class="filler">section 37 level 7 item 0</p>
-                  <p class="filler">section 37 level 7 item 1</p>
-                  <p class="filler">section 37 level 7 item 2</p>
-                  <p class="filler">section 37 level 7 item 3</p>
-                  <div class="level-8">
-                    <p class="filler">section 37 level 8 item 0</p>
-                    <p class="filler">section 37 level 8 item 1</p>
-                    <p class="filler">section 37 level 8 item 2</p>
-                    <p class="filler">section 37 level 8 item 3</p>
-                    <div class="level-9">
-                      <p class="filler">section 37 level 9 item 0</p>
-                      <p class="filler">section 37 level 9 item 1</p>
-                      <p class="filler">section 37 level 9 item 2</p>
-                      <p class="filler">section 37 level 9 item 3</p>
-                      <div class="level-10">
-                        <p class="filler">section 37 level 10 item 0</p>
-                        <p class="filler">section 37 level 10 item 1</p>
-                        <p class="filler">section 37 level 10 item 2</p>
-                        <p class="filler">section 37 level 10 item 3</p>
-                        <span class="leaf">changed</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <section id="section-38">
-    <div class="level-1">
-      <p class="filler">section 38 level 1 item 0</p>
-      <p class="filler">section 38 level 1 item 1</p>
-      <p class="filler">section 38 level 1 item 2</p>
-      <p class="filler">section 38 level 1 item 3</p>
-      <div class="level-2">
-        <p class="filler">section 38 level 2 item 0</p>
-        <p class="filler">section 38 level 2 item 1</p>
-        <p class="filler">section 38 level 2 item 2</p>
-        <p class="filler">section 38 level 2 item 3</p>
-        <div class="level-3">
-          <p class="filler">section 38 level 3 item 0</p>
-          <p class="filler">section 38 level 3 item 1</p>
-          <p class="filler">section 38 level 3 item 2</p>
-          <p class="filler">section 38 level 3 item 3</p>
-          <div class="level-4">
-            <p class="filler">section 38 level 4 item 0</p>
-            <p class="filler">section 38 level 4 item 1</p>
-            <p class="filler">section 38 level 4 item 2</p>
-            <p class="filler">section 38 level 4 item 3</p>
-            <div class="level-5">
-              <p class="filler">section 38 level 5 item 0</p>
-              <p class="filler">section 38 level 5 item 1</p>
-              <p class="filler">section 38 level 5 item 2</p>
-              <p class="filler">section 38 level 5 item 3</p>
-              <div class="level-6">
-                <p class="filler">section 38 level 6 item 0</p>
-                <p class="filler">section 38 level 6 item 1</p>
-                <p class="filler">section 38 level 6 item 2</p>
-                <p class="filler">section 38 level 6 item 3</p>
-                <div class="level-7">
-                  <p class="filler">section 38 level 7 item 0</p>
-                  <p class="filler">section 38 level 7 item 1</p>
-                  <p class="filler">section 38 level 7 item 2</p>
-                  <p class="filler">section 38 level 7 item 3</p>
-                  <div class="level-8">
-                    <p class="filler">section 38 level 8 item 0</p>
-                    <p class="filler">section 38 level 8 item 1</p>
-                    <p class="filler">section 38 level 8 item 2</p>
-                    <p class="filler">section 38 level 8 item 3</p>
-                    <div class="level-9">
-                      <p class="filler">section 38 level 9 item 0</p>
-                      <p class="filler">section 38 level 9 item 1</p>
-                      <p class="filler">section 38 level 9 item 2</p>
-                      <p class="filler">section 38 level 9 item 3</p>
-                      <div class="level-10">
-                        <p class="filler">section 38 level 10 item 0</p>
-                        <p class="filler">section 38 level 10 item 1</p>
-                        <p class="filler">section 38 level 10 item 2</p>
-                        <p class="filler">section 38 level 10 item 3</p>
-                        <span class="leaf">changed</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <section id="section-39">
-    <div class="level-1">
-      <p class="filler">section 39 level 1 item 0</p>
-      <p class="filler">section 39 level 1 item 1</p>
-      <p class="filler">section 39 level 1 item 2</p>
-      <p class="filler">section 39 level 1 item 3</p>
-      <div class="level-2">
-        <p class="filler">section 39 level 2 item 0</p>
-        <p class="filler">section 39 level 2 item 1</p>
-        <p class="filler">section 39 level 2 item 2</p>
-        <p class="filler">section 39 level 2 item 3</p>
-        <div class="level-3">
-          <p class="filler">section 39 level 3 item 0</p>
-          <p class="filler">section 39 level 3 item 1</p>
-          <p class="filler">section 39 level 3 item 2</p>
-          <p class="filler">section 39 level 3 item 3</p>
-          <div class="level-4">
-            <p class="filler">section 39 level 4 item 0</p>
-            <p class="filler">section 39 level 4 item 1</p>
-            <p class="filler">section 39 level 4 item 2</p>
-            <p class="filler">section 39 level 4 item 3</p>
-            <div class="level-5">
-              <p class="filler">section 39 level 5 item 0</p>
-              <p class="filler">section 39 level 5 item 1</p>
-              <p class="filler">section 39 level 5 item 2</p>
-              <p class="filler">section 39 level 5 item 3</p>
-              <div class="level-6">
-                <p class="filler">section 39 level 6 item 0</p>
-                <p class="filler">section 39 level 6 item 1</p>
-                <p class="filler">section 39 level 6 item 2</p>
-                <p class="filler">section 39 level 6 item 3</p>
-                <div class="level-7">
-                  <p class="filler">section 39 level 7 item 0</p>
-                  <p class="filler">section 39 level 7 item 1</p>
-                  <p class="filler">section 39 level 7 item 2</p>
-                  <p class="filler">section 39 level 7 item 3</p>
-                  <div class="level-8">
-                    <p class="filler">section 39 level 8 item 0</p>
-                    <p class="filler">section 39 level 8 item 1</p>
-                    <p class="filler">section 39 level 8 item 2</p>
-                    <p class="filler">section 39 level 8 item 3</p>
-                    <div class="level-9">
-                      <p class="filler">section 39 level 9 item 0</p>
-                      <p class="filler">section 39 level 9 item 1</p>
-                      <p class="filler">section 39 level 9 item 2</p>
-                      <p class="filler">section 39 level 9 item 3</p>
-                      <div class="level-10">
-                        <p class="filler">section 39 level 10 item 0</p>
-                        <p class="filler">section 39 level 10 item 1</p>
-                        <p class="filler">section 39 level 10 item 2</p>
-                        <p class="filler">section 39 level 10 item 3</p>
+                        <p class="filler">s19d10i0</p>
+                        <p class="filler">s19d10i1</p>
                         <span class="leaf">changed</span>
                       </div>
                     </div>
diff --git a/perf/benchmarks/deep-last-leaf.old.html b/perf/benchmarks/deep-last-leaf.old.html
index d9bea0c..b4abe8c 100644
--- a/perf/benchmarks/deep-last-leaf.old.html
+++ b/perf/benchmarks/deep-last-leaf.old.html
@@ -1,55 +1,35 @@
 <main id="root">
   <section id="section-0">
     <div class="level-1">
-      <p class="filler">section 0 level 1 item 0</p>
-      <p class="filler">section 0 level 1 item 1</p>
-      <p class="filler">section 0 level 1 item 2</p>
-      <p class="filler">section 0 level 1 item 3</p>
+      <p class="filler">s0d1i0</p>
+      <p class="filler">s0d1i1</p>
       <div class="level-2">
-        <p class="filler">section 0 level 2 item 0</p>
-        <p class="filler">section 0 level 2 item 1</p>
-        <p class="filler">section 0 level 2 item 2</p>
-        <p class="filler">section 0 level 2 item 3</p>
+        <p class="filler">s0d2i0</p>
+        <p class="filler">s0d2i1</p>
         <div class="level-3">
-          <p class="filler">section 0 level 3 item 0</p>
-          <p class="filler">section 0 level 3 item 1</p>
-          <p class="filler">section 0 level 3 item 2</p>
-          <p class="filler">section 0 level 3 item 3</p>
+          <p class="filler">s0d3i0</p>
+          <p class="filler">s0d3i1</p>
           <div class="level-4">
-            <p class="filler">section 0 level 4 item 0</p>
-            <p class="filler">section 0 level 4 item 1</p>
-            <p class="filler">section 0 level 4 item 2</p>
-            <p class="filler">section 0 level 4 item 3</p>
+            <p class="filler">s0d4i0</p>
+            <p class="filler">s0d4i1</p>
             <div class="level-5">
-              <p class="filler">section 0 level 5 item 0</p>
-              <p class="filler">section 0 level 5 item 1</p>
-              <p class="filler">section 0 level 5 item 2</p>
-              <p class="filler">section 0 level 5 item 3</p>
+              <p class="filler">s0d5i0</p>
+              <p class="filler">s0d5i1</p>
               <div class="level-6">
-                <p class="filler">section 0 level 6 item 0</p>
-                <p class="filler">section 0 level 6 item 1</p>
-                <p class="filler">section 0 level 6 item 2</p>
-                <p class="filler">section 0 level 6 item 3</p>
+                <p class="filler">s0d6i0</p>
+                <p class="filler">s0d6i1</p>
                 <div class="level-7">
-                  <p class="filler">section 0 level 7 item 0</p>
-                  <p class="filler">section 0 level 7 item 1</p>
-                  <p class="filler">section 0 level 7 item 2</p>
-                  <p class="filler">section 0 level 7 item 3</p>
+                  <p class="filler">s0d7i0</p>
+                  <p class="filler">s0d7i1</p>
                   <div class="level-8">
-                    <p class="filler">section 0 level 8 item 0</p>
-                    <p class="filler">section 0 level 8 item 1</p>
-                    <p class="filler">section 0 level 8 item 2</p>
-                    <p class="filler">section 0 level 8 item 3</p>
+                    <p class="filler">s0d8i0</p>
+                    <p class="filler">s0d8i1</p>
                     <div class="level-9">
-                      <p class="filler">section 0 level 9 item 0</p>
-                      <p class="filler">section 0 level 9 item 1</p>
-                      <p class="filler">section 0 level 9 item 2</p>
-                      <p class="filler">section 0 level 9 item 3</p>
+                      <p class="filler">s0d9i0</p>
+                      <p class="filler">s0d9i1</p>
                       <div class="level-10">
-                        <p class="filler">section 0 level 10 item 0</p>
-                        <p class="filler">section 0 level 10 item 1</p>
-                        <p class="filler">section 0 level 10 item 2</p>
-                        <p class="filler">section 0 level 10 item 3</p>
+                        <p class="filler">s0d10i0</p>
+                        <p class="filler">s0d10i1</p>
                         <span class="leaf">original</span>
                       </div>
                     </div>
@@ -64,55 +44,35 @@
   </section>
   <section id="section-1">
     <div class="level-1">
-      <p class="filler">section 1 level 1 item 0</p>
-      <p class="filler">section 1 level 1 item 1</p>
-      <p class="filler">section 1 level 1 item 2</p>
-      <p class="filler">section 1 level 1 item 3</p>
+      <p class="filler">s1d1i0</p>
+      <p class="filler">s1d1i1</p>
       <div class="level-2">
-        <p class="filler">section 1 level 2 item 0</p>
-        <p class="filler">section 1 level 2 item 1</p>
-        <p class="filler">section 1 level 2 item 2</p>
-        <p class="filler">section 1 level 2 item 3</p>
+        <p class="filler">s1d2i0</p>
+        <p class="filler">s1d2i1</p>
         <div class="level-3">
-          <p class="filler">section 1 level 3 item 0</p>
-          <p class="filler">section 1 level 3 item 1</p>
-          <p class="filler">section 1 level 3 item 2</p>
-          <p class="filler">section 1 level 3 item 3</p>
+          <p class="filler">s1d3i0</p>
+          <p class="filler">s1d3i1</p>
           <div class="level-4">
-            <p class="filler">section 1 level 4 item 0</p>
-            <p class="filler">section 1 level 4 item 1</p>
-            <p class="filler">section 1 level 4 item 2</p>
-            <p class="filler">section 1 level 4 item 3</p>
+            <p class="filler">s1d4i0</p>
+            <p class="filler">s1d4i1</p>
             <div class="level-5">
-              <p class="filler">section 1 level 5 item 0</p>
-              <p class="filler">section 1 level 5 item 1</p>
-              <p class="filler">section 1 level 5 item 2</p>
-              <p class="filler">section 1 level 5 item 3</p>
+              <p class="filler">s1d5i0</p>
+              <p class="filler">s1d5i1</p>
               <div class="level-6">
-                <p class="filler">section 1 level 6 item 0</p>
-                <p class="filler">section 1 level 6 item 1</p>
-                <p class="filler">section 1 level 6 item 2</p>
-                <p class="filler">section 1 level 6 item 3</p>
+                <p class="filler">s1d6i0</p>
+                <p class="filler">s1d6i1</p>
                 <div class="level-7">
-                  <p class="filler">section 1 level 7 item 0</p>
-                  <p class="filler">section 1 level 7 item 1</p>
-                  <p class="filler">section 1 level 7 item 2</p>
-                  <p class="filler">section 1 level 7 item 3</p>
+                  <p class="filler">s1d7i0</p>
+                  <p class="filler">s1d7i1</p>
                   <div class="level-8">
-                    <p class="filler">section 1 level 8 item 0</p>
-                    <p class="filler">section 1 level 8 item 1</p>
-                    <p class="filler">section 1 level 8 item 2</p>
-                    <p class="filler">section 1 level 8 item 3</p>
+                    <p class="filler">s1d8i0</p>
+                    <p class="filler">s1d8i1</p>
                     <div class="level-9">
-                      <p class="filler">section 1 level 9 item 0</p>
-                      <p class="filler">section 1 level 9 item 1</p>
-                      <p class="filler">section 1 level 9 item 2</p>
-                      <p class="filler">section 1 level 9 item 3</p>
+                      <p class="filler">s1d9i0</p>
+                      <p class="filler">s1d9i1</p>
                       <div class="level-10">
-                        <p class="filler">section 1 level 10 item 0</p>
-                        <p class="filler">section 1 level 10 item 1</p>
-                        <p class="filler">section 1 level 10 item 2</p>
-                        <p class="filler">section 1 level 10 item 3</p>
+                        <p class="filler">s1d10i0</p>
+                        <p class="filler">s1d10i1</p>
                         <span class="leaf">original</span>
                       </div>
                     </div>
@@ -127,55 +87,35 @@
   </section>
   <section id="section-2">
     <div class="level-1">
-      <p class="filler">section 2 level 1 item 0</p>
-      <p class="filler">section 2 level 1 item 1</p>
-      <p class="filler">section 2 level 1 item 2</p>
-      <p class="filler">section 2 level 1 item 3</p>
+      <p class="filler">s2d1i0</p>
+      <p class="filler">s2d1i1</p>
       <div class="level-2">
-        <p class="filler">section 2 level 2 item 0</p>
-        <p class="filler">section 2 level 2 item 1</p>
-        <p class="filler">section 2 level 2 item 2</p>
-        <p class="filler">section 2 level 2 item 3</p>
+        <p class="filler">s2d2i0</p>
+        <p class="filler">s2d2i1</p>
         <div class="level-3">
-          <p class="filler">section 2 level 3 item 0</p>
-          <p class="filler">section 2 level 3 item 1</p>
-          <p class="filler">section 2 level 3 item 2</p>
-          <p class="filler">section 2 level 3 item 3</p>
+          <p class="filler">s2d3i0</p>
+          <p class="filler">s2d3i1</p>
           <div class="level-4">
-            <p class="filler">section 2 level 4 item 0</p>
-            <p class="filler">section 2 level 4 item 1</p>
-            <p class="filler">section 2 level 4 item 2</p>
-            <p class="filler">section 2 level 4 item 3</p>
+            <p class="filler">s2d4i0</p>
+            <p class="filler">s2d4i1</p>
             <div class="level-5">
-              <p class="filler">section 2 level 5 item 0</p>
-              <p class="filler">section 2 level 5 item 1</p>
-              <p class="filler">section 2 level 5 item 2</p>
-              <p class="filler">section 2 level 5 item 3</p>
+              <p class="filler">s2d5i0</p>
+              <p class="filler">s2d5i1</p>
               <div class="level-6">
-                <p class="filler">section 2 level 6 item 0</p>
-                <p class="filler">section 2 level 6 item 1</p>
-                <p class="filler">section 2 level 6 item 2</p>
-                <p class="filler">section 2 level 6 item 3</p>
+                <p class="filler">s2d6i0</p>
+                <p class="filler">s2d6i1</p>
                 <div class="level-7">
-                  <p class="filler">section 2 level 7 item 0</p>
-                  <p class="filler">section 2 level 7 item 1</p>
-                  <p class="filler">section 2 level 7 item 2</p>
-                  <p class="filler">section 2 level 7 item 3</p>
+                  <p class="filler">s2d7i0</p>
+                  <p class="filler">s2d7i1</p>
                   <div class="level-8">
-                    <p class="filler">section 2 level 8 item 0</p>
-                    <p class="filler">section 2 level 8 item 1</p>
-                    <p class="filler">section 2 level 8 item 2</p>
-                    <p class="filler">section 2 level 8 item 3</p>
+                    <p class="filler">s2d8i0</p>
+                    <p class="filler">s2d8i1</p>
                     <div class="level-9">
-                      <p class="filler">section 2 level 9 item 0</p>
-                      <p class="filler">section 2 level 9 item 1</p>
-                      <p class="filler">section 2 level 9 item 2</p>
-                      <p class="filler">section 2 level 9 item 3</p>
+                      <p class="filler">s2d9i0</p>
+                      <p class="filler">s2d9i1</p>
                       <div class="level-10">
-                        <p class="filler">section 2 level 10 item 0</p>
-                        <p class="filler">section 2 level 10 item 1</p>
-                        <p class="filler">section 2 level 10 item 2</p>
-                        <p class="filler">section 2 level 10 item 3</p>
+                        <p class="filler">s2d10i0</p>
+                        <p class="filler">s2d10i1</p>
                         <span class="leaf">original</span>
                       </div>
                     </div>
@@ -190,55 +130,35 @@
   </section>
   <section id="section-3">
     <div class="level-1">
-      <p class="filler">section 3 level 1 item 0</p>
-      <p class="filler">section 3 level 1 item 1</p>
-      <p class="filler">section 3 level 1 item 2</p>
-      <p class="filler">section 3 level 1 item 3</p>
+      <p class="filler">s3d1i0</p>
+      <p class="filler">s3d1i1</p>
       <div class="level-2">
-        <p class="filler">section 3 level 2 item 0</p>
-        <p class="filler">section 3 level 2 item 1</p>
-        <p class="filler">section 3 level 2 item 2</p>
-        <p class="filler">section 3 level 2 item 3</p>
+        <p class="filler">s3d2i0</p>
+        <p class="filler">s3d2i1</p>
         <div class="level-3">
-          <p class="filler">section 3 level 3 item 0</p>
-          <p class="filler">section 3 level 3 item 1</p>
-          <p class="filler">section 3 level 3 item 2</p>
-          <p class="filler">section 3 level 3 item 3</p>
+          <p class="filler">s3d3i0</p>
+          <p class="filler">s3d3i1</p>
           <div class="level-4">
-            <p class="filler">section 3 level 4 item 0</p>
-            <p class="filler">section 3 level 4 item 1</p>
-            <p class="filler">section 3 level 4 item 2</p>
-            <p class="filler">section 3 level 4 item 3</p>
+            <p class="filler">s3d4i0</p>
+            <p class="filler">s3d4i1</p>
             <div class="level-5">
-              <p class="filler">section 3 level 5 item 0</p>
-              <p class="filler">section 3 level 5 item 1</p>
-              <p class="filler">section 3 level 5 item 2</p>
-              <p class="filler">section 3 level 5 item 3</p>
+              <p class="filler">s3d5i0</p>
+              <p class="filler">s3d5i1</p>
               <div class="level-6">
-                <p class="filler">section 3 level 6 item 0</p>
-                <p class="filler">section 3 level 6 item 1</p>
-                <p class="filler">section 3 level 6 item 2</p>
-                <p class="filler">section 3 level 6 item 3</p>
+                <p class="filler">s3d6i0</p>
+                <p class="filler">s3d6i1</p>
                 <div class="level-7">
-                  <p class="filler">section 3 level 7 item 0</p>
-                  <p class="filler">section 3 level 7 item 1</p>
-                  <p class="filler">section 3 level 7 item 2</p>
-                  <p class="filler">section 3 level 7 item 3</p>
+                  <p class="filler">s3d7i0</p>
+                  <p class="filler">s3d7i1</p>
                   <div class="level-8">
-                    <p class="filler">section 3 level 8 item 0</p>
-                    <p class="filler">section 3 level 8 item 1</p>
-                    <p class="filler">section 3 level 8 item 2</p>
-                    <p class="filler">section 3 level 8 item 3</p>
+                    <p class="filler">s3d8i0</p>
+                    <p class="filler">s3d8i1</p>
                     <div class="level-9">
-                      <p class="filler">section 3 level 9 item 0</p>
-                      <p class="filler">section 3 level 9 item 1</p>
-                      <p class="filler">section 3 level 9 item 2</p>
-                      <p class="filler">section 3 level 9 item 3</p>
+                      <p class="filler">s3d9i0</p>
+                      <p class="filler">s3d9i1</p>
                       <div class="level-10">
-                        <p class="filler">section 3 level 10 item 0</p>
-                        <p class="filler">section 3 level 10 item 1</p>
-                        <p class="filler">section 3 level 10 item 2</p>
-                        <p class="filler">section 3 level 10 item 3</p>
+                        <p class="filler">s3d10i0</p>
+                        <p class="filler">s3d10i1</p>
                         <span class="leaf">original</span>
                       </div>
                     </div>
@@ -253,55 +173,35 @@
   </section>
   <section id="section-4">
     <div class="level-1">
-      <p class="filler">section 4 level 1 item 0</p>
-      <p class="filler">section 4 level 1 item 1</p>
-      <p class="filler">section 4 level 1 item 2</p>
-      <p class="filler">section 4 level 1 item 3</p>
+      <p class="filler">s4d1i0</p>
+      <p class="filler">s4d1i1</p>
       <div class="level-2">
-        <p class="filler">section 4 level 2 item 0</p>
-        <p class="filler">section 4 level 2 item 1</p>
-        <p class="filler">section 4 level 2 item 2</p>
-        <p class="filler">section 4 level 2 item 3</p>
+        <p class="filler">s4d2i0</p>
+        <p class="filler">s4d2i1</p>
         <div class="level-3">
-          <p class="filler">section 4 level 3 item 0</p>
-          <p class="filler">section 4 level 3 item 1</p>
-          <p class="filler">section 4 level 3 item 2</p>
-          <p class="filler">section 4 level 3 item 3</p>
+          <p class="filler">s4d3i0</p>
+          <p class="filler">s4d3i1</p>
           <div class="level-4">
-            <p class="filler">section 4 level 4 item 0</p>
-            <p class="filler">section 4 level 4 item 1</p>
-            <p class="filler">section 4 level 4 item 2</p>
-            <p class="filler">section 4 level 4 item 3</p>
+            <p class="filler">s4d4i0</p>
+            <p class="filler">s4d4i1</p>
             <div class="level-5">
-              <p class="filler">section 4 level 5 item 0</p>
-              <p class="filler">section 4 level 5 item 1</p>
-              <p class="filler">section 4 level 5 item 2</p>
-              <p class="filler">section 4 level 5 item 3</p>
+              <p class="filler">s4d5i0</p>
+              <p class="filler">s4d5i1</p>
               <div class="level-6">
-                <p class="filler">section 4 level 6 item 0</p>
-                <p class="filler">section 4 level 6 item 1</p>
-                <p class="filler">section 4 level 6 item 2</p>
-                <p class="filler">section 4 level 6 item 3</p>
+                <p class="filler">s4d6i0</p>
+                <p class="filler">s4d6i1</p>
                 <div class="level-7">
-                  <p class="filler">section 4 level 7 item 0</p>
-                  <p class="filler">section 4 level 7 item 1</p>
-                  <p class="filler">section 4 level 7 item 2</p>
-                  <p class="filler">section 4 level 7 item 3</p>
+                  <p class="filler">s4d7i0</p>
+                  <p class="filler">s4d7i1</p>
                   <div class="level-8">
-                    <p class="filler">section 4 level 8 item 0</p>
-                    <p class="filler">section 4 level 8 item 1</p>
-                    <p class="filler">section 4 level 8 item 2</p>
-                    <p class="filler">section 4 level 8 item 3</p>
+                    <p class="filler">s4d8i0</p>
+                    <p class="filler">s4d8i1</p>
                     <div class="level-9">
-                      <p class="filler">section 4 level 9 item 0</p>
-                      <p class="filler">section 4 level 9 item 1</p>
-                      <p class="filler">section 4 level 9 item 2</p>
-                      <p class="filler">section 4 level 9 item 3</p>
+                      <p class="filler">s4d9i0</p>
+                      <p class="filler">s4d9i1</p>
                       <div class="level-10">
-                        <p class="filler">section 4 level 10 item 0</p>
-                        <p class="filler">section 4 level 10 item 1</p>
-                        <p class="filler">section 4 level 10 item 2</p>
-                        <p class="filler">section 4 level 10 item 3</p>
+                        <p class="filler">s4d10i0</p>
+                        <p class="filler">s4d10i1</p>
                         <span class="leaf">original</span>
                       </div>
                     </div>
@@ -316,55 +216,35 @@
   </section>
   <section id="section-5">
     <div class="level-1">
-      <p class="filler">section 5 level 1 item 0</p>
-      <p class="filler">section 5 level 1 item 1</p>
-      <p class="filler">section 5 level 1 item 2</p>
-      <p class="filler">section 5 level 1 item 3</p>
+      <p class="filler">s5d1i0</p>
+      <p class="filler">s5d1i1</p>
       <div class="level-2">
-        <p class="filler">section 5 level 2 item 0</p>
-        <p class="filler">section 5 level 2 item 1</p>
-        <p class="filler">section 5 level 2 item 2</p>
-        <p class="filler">section 5 level 2 item 3</p>
+        <p class="filler">s5d2i0</p>
+        <p class="filler">s5d2i1</p>
         <div class="level-3">
-          <p class="filler">section 5 level 3 item 0</p>
-          <p class="filler">section 5 level 3 item 1</p>
-          <p class="filler">section 5 level 3 item 2</p>
-          <p class="filler">section 5 level 3 item 3</p>
+          <p class="filler">s5d3i0</p>
+          <p class="filler">s5d3i1</p>
           <div class="level-4">
-            <p class="filler">section 5 level 4 item 0</p>
-            <p class="filler">section 5 level 4 item 1</p>
-            <p class="filler">section 5 level 4 item 2</p>
-            <p class="filler">section 5 level 4 item 3</p>
+            <p class="filler">s5d4i0</p>
+            <p class="filler">s5d4i1</p>
             <div class="level-5">
-              <p class="filler">section 5 level 5 item 0</p>
-              <p class="filler">section 5 level 5 item 1</p>
-              <p class="filler">section 5 level 5 item 2</p>
-              <p class="filler">section 5 level 5 item 3</p>
+              <p class="filler">s5d5i0</p>
+              <p class="filler">s5d5i1</p>
               <div class="level-6">
-                <p class="filler">section 5 level 6 item 0</p>
-                <p class="filler">section 5 level 6 item 1</p>
-                <p class="filler">section 5 level 6 item 2</p>
-                <p class="filler">section 5 level 6 item 3</p>
+                <p class="filler">s5d6i0</p>
+                <p class="filler">s5d6i1</p>
                 <div class="level-7">
-                  <p class="filler">section 5 level 7 item 0</p>
-                  <p class="filler">section 5 level 7 item 1</p>
-                  <p class="filler">section 5 level 7 item 2</p>
-                  <p class="filler">section 5 level 7 item 3</p>
+                  <p class="filler">s5d7i0</p>
+                  <p class="filler">s5d7i1</p>
                   <div class="level-8">
-                    <p class="filler">section 5 level 8 item 0</p>
-                    <p class="filler">section 5 level 8 item 1</p>
-                    <p class="filler">section 5 level 8 item 2</p>
-                    <p class="filler">section 5 level 8 item 3</p>
+                    <p class="filler">s5d8i0</p>
+                    <p class="filler">s5d8i1</p>
                     <div class="level-9">
-                      <p class="filler">section 5 level 9 item 0</p>
-                      <p class="filler">section 5 level 9 item 1</p>
-                      <p class="filler">section 5 level 9 item 2</p>
-                      <p class="filler">section 5 level 9 item 3</p>
+                      <p class="filler">s5d9i0</p>
+                      <p class="filler">s5d9i1</p>
                       <div class="level-10">
-                        <p class="filler">section 5 level 10 item 0</p>
-                        <p class="filler">section 5 level 10 item 1</p>
-                        <p class="filler">section 5 level 10 item 2</p>
-                        <p class="filler">section 5 level 10 item 3</p>
+                        <p class="filler">s5d10i0</p>
+                        <p class="filler">s5d10i1</p>
                         <span class="leaf">original</span>
                       </div>
                     </div>
@@ -379,55 +259,35 @@
   </section>
   <section id="section-6">
     <div class="level-1">
-      <p class="filler">section 6 level 1 item 0</p>
-      <p class="filler">section 6 level 1 item 1</p>
-      <p class="filler">section 6 level 1 item 2</p>
-      <p class="filler">section 6 level 1 item 3</p>
+      <p class="filler">s6d1i0</p>
+      <p class="filler">s6d1i1</p>
       <div class="level-2">
-        <p class="filler">section 6 level 2 item 0</p>
-        <p class="filler">section 6 level 2 item 1</p>
-        <p class="filler">section 6 level 2 item 2</p>
-        <p class="filler">section 6 level 2 item 3</p>
+        <p class="filler">s6d2i0</p>
+        <p class="filler">s6d2i1</p>
         <div class="level-3">
-          <p class="filler">section 6 level 3 item 0</p>
-          <p class="filler">section 6 level 3 item 1</p>
-          <p class="filler">section 6 level 3 item 2</p>
-          <p class="filler">section 6 level 3 item 3</p>
+          <p class="filler">s6d3i0</p>
+          <p class="filler">s6d3i1</p>
           <div class="level-4">
-            <p class="filler">section 6 level 4 item 0</p>
-            <p class="filler">section 6 level 4 item 1</p>
-            <p class="filler">section 6 level 4 item 2</p>
-            <p class="filler">section 6 level 4 item 3</p>
+            <p class="filler">s6d4i0</p>
+            <p class="filler">s6d4i1</p>
             <div class="level-5">
-              <p class="filler">section 6 level 5 item 0</p>
-              <p class="filler">section 6 level 5 item 1</p>
-              <p class="filler">section 6 level 5 item 2</p>
-              <p class="filler">section 6 level 5 item 3</p>
+              <p class="filler">s6d5i0</p>
+              <p class="filler">s6d5i1</p>
               <div class="level-6">
-                <p class="filler">section 6 level 6 item 0</p>
-                <p class="filler">section 6 level 6 item 1</p>
-                <p class="filler">section 6 level 6 item 2</p>
-                <p class="filler">section 6 level 6 item 3</p>
+                <p class="filler">s6d6i0</p>
+                <p class="filler">s6d6i1</p>
                 <div class="level-7">
-                  <p class="filler">section 6 level 7 item 0</p>
-                  <p class="filler">section 6 level 7 item 1</p>
-                  <p class="filler">section 6 level 7 item 2</p>
-                  <p class="filler">section 6 level 7 item 3</p>
+                  <p class="filler">s6d7i0</p>
+                  <p class="filler">s6d7i1</p>
                   <div class="level-8">
-                    <p class="filler">section 6 level 8 item 0</p>
-                    <p class="filler">section 6 level 8 item 1</p>
-                    <p class="filler">section 6 level 8 item 2</p>
-                    <p class="filler">section 6 level 8 item 3</p>
+                    <p class="filler">s6d8i0</p>
+                    <p class="filler">s6d8i1</p>
                     <div class="level-9">
-                      <p class="filler">section 6 level 9 item 0</p>
-                      <p class="filler">section 6 level 9 item 1</p>
-                      <p class="filler">section 6 level 9 item 2</p>
-                      <p class="filler">section 6 level 9 item 3</p>
+                      <p class="filler">s6d9i0</p>
+                      <p class="filler">s6d9i1</p>
                       <div class="level-10">
-                        <p class="filler">section 6 level 10 item 0</p>
-                        <p class="filler">section 6 level 10 item 1</p>
-                        <p class="filler">section 6 level 10 item 2</p>
-                        <p class="filler">section 6 level 10 item 3</p>
+                        <p class="filler">s6d10i0</p>
+                        <p class="filler">s6d10i1</p>
                         <span class="leaf">original</span>
                       </div>
                     </div>
@@ -442,55 +302,35 @@
   </section>
   <section id="section-7">
     <div class="level-1">
-      <p class="filler">section 7 level 1 item 0</p>
-      <p class="filler">section 7 level 1 item 1</p>
-      <p class="filler">section 7 level 1 item 2</p>
-      <p class="filler">section 7 level 1 item 3</p>
+      <p class="filler">s7d1i0</p>
+      <p class="filler">s7d1i1</p>
       <div class="level-2">
-        <p class="filler">section 7 level 2 item 0</p>
-        <p class="filler">section 7 level 2 item 1</p>
-        <p class="filler">section 7 level 2 item 2</p>
-        <p class="filler">section 7 level 2 item 3</p>
+        <p class="filler">s7d2i0</p>
+        <p class="filler">s7d2i1</p>
         <div class="level-3">
-          <p class="filler">section 7 level 3 item 0</p>
-          <p class="filler">section 7 level 3 item 1</p>
-          <p class="filler">section 7 level 3 item 2</p>
-          <p class="filler">section 7 level 3 item 3</p>
+          <p class="filler">s7d3i0</p>
+          <p class="filler">s7d3i1</p>
           <div class="level-4">
-            <p class="filler">section 7 level 4 item 0</p>
-            <p class="filler">section 7 level 4 item 1</p>
-            <p class="filler">section 7 level 4 item 2</p>
-            <p class="filler">section 7 level 4 item 3</p>
+            <p class="filler">s7d4i0</p>
+            <p class="filler">s7d4i1</p>
             <div class="level-5">
-              <p class="filler">section 7 level 5 item 0</p>
-              <p class="filler">section 7 level 5 item 1</p>
-              <p class="filler">section 7 level 5 item 2</p>
-              <p class="filler">section 7 level 5 item 3</p>
+              <p class="filler">s7d5i0</p>
+              <p class="filler">s7d5i1</p>
               <div class="level-6">
-                <p class="filler">section 7 level 6 item 0</p>
-                <p class="filler">section 7 level 6 item 1</p>
-                <p class="filler">section 7 level 6 item 2</p>
-                <p class="filler">section 7 level 6 item 3</p>
+                <p class="filler">s7d6i0</p>
+                <p class="filler">s7d6i1</p>
                 <div class="level-7">
-                  <p class="filler">section 7 level 7 item 0</p>
-                  <p class="filler">section 7 level 7 item 1</p>
-                  <p class="filler">section 7 level 7 item 2</p>
-                  <p class="filler">section 7 level 7 item 3</p>
+                  <p class="filler">s7d7i0</p>
+                  <p class="filler">s7d7i1</p>
                   <div class="level-8">
-                    <p class="filler">section 7 level 8 item 0</p>
-                    <p class="filler">section 7 level 8 item 1</p>
-                    <p class="filler">section 7 level 8 item 2</p>
-                    <p class="filler">section 7 level 8 item 3</p>
+                    <p class="filler">s7d8i0</p>
+                    <p class="filler">s7d8i1</p>
                     <div class="level-9">
-                      <p class="filler">section 7 level 9 item 0</p>
-                      <p class="filler">section 7 level 9 item 1</p>
-                      <p class="filler">section 7 level 9 item 2</p>
-                      <p class="filler">section 7 level 9 item 3</p>
+                      <p class="filler">s7d9i0</p>
+                      <p class="filler">s7d9i1</p>
                       <div class="level-10">
-                        <p class="filler">section 7 level 10 item 0</p>
-                        <p class="filler">section 7 level 10 item 1</p>
-                        <p class="filler">section 7 level 10 item 2</p>
-                        <p class="filler">section 7 level 10 item 3</p>
+                        <p class="filler">s7d10i0</p>
+                        <p class="filler">s7d10i1</p>
                         <span class="leaf">original</span>
                       </div>
                     </div>
@@ -505,55 +345,35 @@
   </section>
   <section id="section-8">
     <div class="level-1">
-      <p class="filler">section 8 level 1 item 0</p>
-      <p class="filler">section 8 level 1 item 1</p>
-      <p class="filler">section 8 level 1 item 2</p>
-      <p class="filler">section 8 level 1 item 3</p>
+      <p class="filler">s8d1i0</p>
+      <p class="filler">s8d1i1</p>
       <div class="level-2">
-        <p class="filler">section 8 level 2 item 0</p>
-        <p class="filler">section 8 level 2 item 1</p>
-        <p class="filler">section 8 level 2 item 2</p>
-        <p class="filler">section 8 level 2 item 3</p>
+        <p class="filler">s8d2i0</p>
+        <p class="filler">s8d2i1</p>
         <div class="level-3">
-          <p class="filler">section 8 level 3 item 0</p>
-          <p class="filler">section 8 level 3 item 1</p>
-          <p class="filler">section 8 level 3 item 2</p>
-          <p class="filler">section 8 level 3 item 3</p>
+          <p class="filler">s8d3i0</p>
+          <p class="filler">s8d3i1</p>
           <div class="level-4">
-            <p class="filler">section 8 level 4 item 0</p>
-            <p class="filler">section 8 level 4 item 1</p>
-            <p class="filler">section 8 level 4 item 2</p>
-            <p class="filler">section 8 level 4 item 3</p>
+            <p class="filler">s8d4i0</p>
+            <p class="filler">s8d4i1</p>
             <div class="level-5">
-              <p class="filler">section 8 level 5 item 0</p>
-              <p class="filler">section 8 level 5 item 1</p>
-              <p class="filler">section 8 level 5 item 2</p>
-              <p class="filler">section 8 level 5 item 3</p>
+              <p class="filler">s8d5i0</p>
+              <p class="filler">s8d5i1</p>
               <div class="level-6">
-                <p class="filler">section 8 level 6 item 0</p>
-                <p class="filler">section 8 level 6 item 1</p>
-                <p class="filler">section 8 level 6 item 2</p>
-                <p class="filler">section 8 level 6 item 3</p>
+                <p class="filler">s8d6i0</p>
+                <p class="filler">s8d6i1</p>
                 <div class="level-7">
-                  <p class="filler">section 8 level 7 item 0</p>
-                  <p class="filler">section 8 level 7 item 1</p>
-                  <p class="filler">section 8 level 7 item 2</p>
-                  <p class="filler">section 8 level 7 item 3</p>
+                  <p class="filler">s8d7i0</p>
+                  <p class="filler">s8d7i1</p>
                   <div class="level-8">
-                    <p class="filler">section 8 level 8 item 0</p>
-                    <p class="filler">section 8 level 8 item 1</p>
-                    <p class="filler">section 8 level 8 item 2</p>
-                    <p class="filler">section 8 level 8 item 3</p>
+                    <p class="filler">s8d8i0</p>
+                    <p class="filler">s8d8i1</p>
                     <div class="level-9">
-                      <p class="filler">section 8 level 9 item 0</p>
-                      <p class="filler">section 8 level 9 item 1</p>
-                      <p class="filler">section 8 level 9 item 2</p>
-                      <p class="filler">section 8 level 9 item 3</p>
+                      <p class="filler">s8d9i0</p>
+                      <p class="filler">s8d9i1</p>
                       <div class="level-10">
-                        <p class="filler">section 8 level 10 item 0</p>
-                        <p class="filler">section 8 level 10 item 1</p>
-                        <p class="filler">section 8 level 10 item 2</p>
-                        <p class="filler">section 8 level 10 item 3</p>
+                        <p class="filler">s8d10i0</p>
+                        <p class="filler">s8d10i1</p>
                         <span class="leaf">original</span>
                       </div>
                     </div>
@@ -568,55 +388,35 @@
   </section>
   <section id="section-9">
     <div class="level-1">
-      <p class="filler">section 9 level 1 item 0</p>
-      <p class="filler">section 9 level 1 item 1</p>
-      <p class="filler">section 9 level 1 item 2</p>
-      <p class="filler">section 9 level 1 item 3</p>
+      <p class="filler">s9d1i0</p>
+      <p class="filler">s9d1i1</p>
       <div class="level-2">
-        <p class="filler">section 9 level 2 item 0</p>
-        <p class="filler">section 9 level 2 item 1</p>
-        <p class="filler">section 9 level 2 item 2</p>
-        <p class="filler">section 9 level 2 item 3</p>
+        <p class="filler">s9d2i0</p>
+        <p class="filler">s9d2i1</p>
         <div class="level-3">
-          <p class="filler">section 9 level 3 item 0</p>
-          <p class="filler">section 9 level 3 item 1</p>
-          <p class="filler">section 9 level 3 item 2</p>
-          <p class="filler">section 9 level 3 item 3</p>
+          <p class="filler">s9d3i0</p>
+          <p class="filler">s9d3i1</p>
           <div class="level-4">
-            <p class="filler">section 9 level 4 item 0</p>
-            <p class="filler">section 9 level 4 item 1</p>
-            <p class="filler">section 9 level 4 item 2</p>
-            <p class="filler">section 9 level 4 item 3</p>
+            <p class="filler">s9d4i0</p>
+            <p class="filler">s9d4i1</p>
             <div class="level-5">
-              <p class="filler">section 9 level 5 item 0</p>
-              <p class="filler">section 9 level 5 item 1</p>
-              <p class="filler">section 9 level 5 item 2</p>
-              <p class="filler">section 9 level 5 item 3</p>
+              <p class="filler">s9d5i0</p>
+              <p class="filler">s9d5i1</p>
               <div class="level-6">
-                <p class="filler">section 9 level 6 item 0</p>
-                <p class="filler">section 9 level 6 item 1</p>
-                <p class="filler">section 9 level 6 item 2</p>
-                <p class="filler">section 9 level 6 item 3</p>
+                <p class="filler">s9d6i0</p>
+                <p class="filler">s9d6i1</p>
                 <div class="level-7">
-                  <p class="filler">section 9 level 7 item 0</p>
-                  <p class="filler">section 9 level 7 item 1</p>
-                  <p class="filler">section 9 level 7 item 2</p>
-                  <p class="filler">section 9 level 7 item 3</p>
+                  <p class="filler">s9d7i0</p>
+                  <p class="filler">s9d7i1</p>
                   <div class="level-8">
-                    <p class="filler">section 9 level 8 item 0</p>
-                    <p class="filler">section 9 level 8 item 1</p>
-                    <p class="filler">section 9 level 8 item 2</p>
-                    <p class="filler">section 9 level 8 item 3</p>
+                    <p class="filler">s9d8i0</p>
+                    <p class="filler">s9d8i1</p>
                     <div class="level-9">
-                      <p class="filler">section 9 level 9 item 0</p>
-                      <p class="filler">section 9 level 9 item 1</p>
-                      <p class="filler">section 9 level 9 item 2</p>
-                      <p class="filler">section 9 level 9 item 3</p>
+                      <p class="filler">s9d9i0</p>
+                      <p class="filler">s9d9i1</p>
                       <div class="level-10">
-                        <p class="filler">section 9 level 10 item 0</p>
-                        <p class="filler">section 9 level 10 item 1</p>
-                        <p class="filler">section 9 level 10 item 2</p>
-                        <p class="filler">section 9 level 10 item 3</p>
+                        <p class="filler">s9d10i0</p>
+                        <p class="filler">s9d10i1</p>
                         <span class="leaf">original</span>
                       </div>
                     </div>
@@ -631,55 +431,35 @@
   </section>
   <section id="section-10">
     <div class="level-1">
-      <p class="filler">section 10 level 1 item 0</p>
-      <p class="filler">section 10 level 1 item 1</p>
-      <p class="filler">section 10 level 1 item 2</p>
-      <p class="filler">section 10 level 1 item 3</p>
+      <p class="filler">s10d1i0</p>
+      <p class="filler">s10d1i1</p>
       <div class="level-2">
-        <p class="filler">section 10 level 2 item 0</p>
-        <p class="filler">section 10 level 2 item 1</p>
-        <p class="filler">section 10 level 2 item 2</p>
-        <p class="filler">section 10 level 2 item 3</p>
+        <p class="filler">s10d2i0</p>
+        <p class="filler">s10d2i1</p>
         <div class="level-3">
-          <p class="filler">section 10 level 3 item 0</p>
-          <p class="filler">section 10 level 3 item 1</p>
-          <p class="filler">section 10 level 3 item 2</p>
-          <p class="filler">section 10 level 3 item 3</p>
+          <p class="filler">s10d3i0</p>
+          <p class="filler">s10d3i1</p>
           <div class="level-4">
-            <p class="filler">section 10 level 4 item 0</p>
-            <p class="filler">section 10 level 4 item 1</p>
-            <p class="filler">section 10 level 4 item 2</p>
-            <p class="filler">section 10 level 4 item 3</p>
+            <p class="filler">s10d4i0</p>
+            <p class="filler">s10d4i1</p>
             <div class="level-5">
-              <p class="filler">section 10 level 5 item 0</p>
-              <p class="filler">section 10 level 5 item 1</p>
-              <p class="filler">section 10 level 5 item 2</p>
-              <p class="filler">section 10 level 5 item 3</p>
+              <p class="filler">s10d5i0</p>
+              <p class="filler">s10d5i1</p>
               <div class="level-6">
-                <p class="filler">section 10 level 6 item 0</p>
-                <p class="filler">section 10 level 6 item 1</p>
-                <p class="filler">section 10 level 6 item 2</p>
-                <p class="filler">section 10 level 6 item 3</p>
+                <p class="filler">s10d6i0</p>
+                <p class="filler">s10d6i1</p>
                 <div class="level-7">
-                  <p class="filler">section 10 level 7 item 0</p>
-                  <p class="filler">section 10 level 7 item 1</p>
-                  <p class="filler">section 10 level 7 item 2</p>
-                  <p class="filler">section 10 level 7 item 3</p>
+                  <p class="filler">s10d7i0</p>
+                  <p class="filler">s10d7i1</p>
                   <div class="level-8">
-                    <p class="filler">section 10 level 8 item 0</p>
-                    <p class="filler">section 10 level 8 item 1</p>
-                    <p class="filler">section 10 level 8 item 2</p>
-                    <p class="filler">section 10 level 8 item 3</p>
+                    <p class="filler">s10d8i0</p>
+                    <p class="filler">s10d8i1</p>
                     <div class="level-9">
-                      <p class="filler">section 10 level 9 item 0</p>
-                      <p class="filler">section 10 level 9 item 1</p>
-                      <p class="filler">section 10 level 9 item 2</p>
-                      <p class="filler">section 10 level 9 item 3</p>
+                      <p class="filler">s10d9i0</p>
+                      <p class="filler">s10d9i1</p>
                       <div class="level-10">
-                        <p class="filler">section 10 level 10 item 0</p>
-                        <p class="filler">section 10 level 10 item 1</p>
-                        <p class="filler">section 10 level 10 item 2</p>
-                        <p class="filler">section 10 level 10 item 3</p>
+                        <p class="filler">s10d10i0</p>
+                        <p class="filler">s10d10i1</p>
                         <span class="leaf">original</span>
                       </div>
                     </div>
@@ -694,55 +474,35 @@
   </section>
   <section id="section-11">
     <div class="level-1">
-      <p class="filler">section 11 level 1 item 0</p>
-      <p class="filler">section 11 level 1 item 1</p>
-      <p class="filler">section 11 level 1 item 2</p>
-      <p class="filler">section 11 level 1 item 3</p>
+      <p class="filler">s11d1i0</p>
+      <p class="filler">s11d1i1</p>
       <div class="level-2">
-        <p class="filler">section 11 level 2 item 0</p>
-        <p class="filler">section 11 level 2 item 1</p>
-        <p class="filler">section 11 level 2 item 2</p>
-        <p class="filler">section 11 level 2 item 3</p>
+        <p class="filler">s11d2i0</p>
+        <p class="filler">s11d2i1</p>
         <div class="level-3">
-          <p class="filler">section 11 level 3 item 0</p>
-          <p class="filler">section 11 level 3 item 1</p>
-          <p class="filler">section 11 level 3 item 2</p>
-          <p class="filler">section 11 level 3 item 3</p>
+          <p class="filler">s11d3i0</p>
+          <p class="filler">s11d3i1</p>
           <div class="level-4">
-            <p class="filler">section 11 level 4 item 0</p>
-            <p class="filler">section 11 level 4 item 1</p>
-            <p class="filler">section 11 level 4 item 2</p>
-            <p class="filler">section 11 level 4 item 3</p>
+            <p class="filler">s11d4i0</p>
+            <p class="filler">s11d4i1</p>
             <div class="level-5">
-              <p class="filler">section 11 level 5 item 0</p>
-              <p class="filler">section 11 level 5 item 1</p>
-              <p class="filler">section 11 level 5 item 2</p>
-              <p class="filler">section 11 level 5 item 3</p>
+              <p class="filler">s11d5i0</p>
+              <p class="filler">s11d5i1</p>
               <div class="level-6">
-                <p class="filler">section 11 level 6 item 0</p>
-                <p class="filler">section 11 level 6 item 1</p>
-                <p class="filler">section 11 level 6 item 2</p>
-                <p class="filler">section 11 level 6 item 3</p>
+                <p class="filler">s11d6i0</p>
+                <p class="filler">s11d6i1</p>
                 <div class="level-7">
-                  <p class="filler">section 11 level 7 item 0</p>
-                  <p class="filler">section 11 level 7 item 1</p>
-                  <p class="filler">section 11 level 7 item 2</p>
-                  <p class="filler">section 11 level 7 item 3</p>
+                  <p class="filler">s11d7i0</p>
+                  <p class="filler">s11d7i1</p>
                   <div class="level-8">
-                    <p class="filler">section 11 level 8 item 0</p>
-                    <p class="filler">section 11 level 8 item 1</p>
-                    <p class="filler">section 11 level 8 item 2</p>
-                    <p class="filler">section 11 level 8 item 3</p>
+                    <p class="filler">s11d8i0</p>
+                    <p class="filler">s11d8i1</p>
                     <div class="level-9">
-                      <p class="filler">section 11 level 9 item 0</p>
-                      <p class="filler">section 11 level 9 item 1</p>
-                      <p class="filler">section 11 level 9 item 2</p>
-                      <p class="filler">section 11 level 9 item 3</p>
+                      <p class="filler">s11d9i0</p>
+                      <p class="filler">s11d9i1</p>
                       <div class="level-10">
-                        <p class="filler">section 11 level 10 item 0</p>
-                        <p class="filler">section 11 level 10 item 1</p>
-                        <p class="filler">section 11 level 10 item 2</p>
-                        <p class="filler">section 11 level 10 item 3</p>
+                        <p class="filler">s11d10i0</p>
+                        <p class="filler">s11d10i1</p>
                         <span class="leaf">original</span>
                       </div>
                     </div>
@@ -757,55 +517,35 @@
   </section>
   <section id="section-12">
     <div class="level-1">
-      <p class="filler">section 12 level 1 item 0</p>
-      <p class="filler">section 12 level 1 item 1</p>
-      <p class="filler">section 12 level 1 item 2</p>
-      <p class="filler">section 12 level 1 item 3</p>
+      <p class="filler">s12d1i0</p>
+      <p class="filler">s12d1i1</p>
       <div class="level-2">
-        <p class="filler">section 12 level 2 item 0</p>
-        <p class="filler">section 12 level 2 item 1</p>
-        <p class="filler">section 12 level 2 item 2</p>
-        <p class="filler">section 12 level 2 item 3</p>
+        <p class="filler">s12d2i0</p>
+        <p class="filler">s12d2i1</p>
         <div class="level-3">
-          <p class="filler">section 12 level 3 item 0</p>
-          <p class="filler">section 12 level 3 item 1</p>
-          <p class="filler">section 12 level 3 item 2</p>
-          <p class="filler">section 12 level 3 item 3</p>
+          <p class="filler">s12d3i0</p>
+          <p class="filler">s12d3i1</p>
           <div class="level-4">
-            <p class="filler">section 12 level 4 item 0</p>
-            <p class="filler">section 12 level 4 item 1</p>
-            <p class="filler">section 12 level 4 item 2</p>
-            <p class="filler">section 12 level 4 item 3</p>
+            <p class="filler">s12d4i0</p>
+            <p class="filler">s12d4i1</p>
             <div class="level-5">
-              <p class="filler">section 12 level 5 item 0</p>
-              <p class="filler">section 12 level 5 item 1</p>
-              <p class="filler">section 12 level 5 item 2</p>
-              <p class="filler">section 12 level 5 item 3</p>
+              <p class="filler">s12d5i0</p>
+              <p class="filler">s12d5i1</p>
               <div class="level-6">
-                <p class="filler">section 12 level 6 item 0</p>
-                <p class="filler">section 12 level 6 item 1</p>
-                <p class="filler">section 12 level 6 item 2</p>
-                <p class="filler">section 12 level 6 item 3</p>
+                <p class="filler">s12d6i0</p>
+                <p class="filler">s12d6i1</p>
                 <div class="level-7">
-                  <p class="filler">section 12 level 7 item 0</p>
-                  <p class="filler">section 12 level 7 item 1</p>
-                  <p class="filler">section 12 level 7 item 2</p>
-                  <p class="filler">section 12 level 7 item 3</p>
+                  <p class="filler">s12d7i0</p>
+                  <p class="filler">s12d7i1</p>
                   <div class="level-8">
-                    <p class="filler">section 12 level 8 item 0</p>
-                    <p class="filler">section 12 level 8 item 1</p>
-                    <p class="filler">section 12 level 8 item 2</p>
-                    <p class="filler">section 12 level 8 item 3</p>
+                    <p class="filler">s12d8i0</p>
+                    <p class="filler">s12d8i1</p>
                     <div class="level-9">
-                      <p class="filler">section 12 level 9 item 0</p>
-                      <p class="filler">section 12 level 9 item 1</p>
-                      <p class="filler">section 12 level 9 item 2</p>
-                      <p class="filler">section 12 level 9 item 3</p>
+                      <p class="filler">s12d9i0</p>
+                      <p class="filler">s12d9i1</p>
                       <div class="level-10">
-                        <p class="filler">section 12 level 10 item 0</p>
-                        <p class="filler">section 12 level 10 item 1</p>
-                        <p class="filler">section 12 level 10 item 2</p>
-                        <p class="filler">section 12 level 10 item 3</p>
+                        <p class="filler">s12d10i0</p>
+                        <p class="filler">s12d10i1</p>
                         <span class="leaf">original</span>
                       </div>
                     </div>
@@ -820,55 +560,35 @@
   </section>
   <section id="section-13">
     <div class="level-1">
-      <p class="filler">section 13 level 1 item 0</p>
-      <p class="filler">section 13 level 1 item 1</p>
-      <p class="filler">section 13 level 1 item 2</p>
-      <p class="filler">section 13 level 1 item 3</p>
+      <p class="filler">s13d1i0</p>
+      <p class="filler">s13d1i1</p>
       <div class="level-2">
-        <p class="filler">section 13 level 2 item 0</p>
-        <p class="filler">section 13 level 2 item 1</p>
-        <p class="filler">section 13 level 2 item 2</p>
-        <p class="filler">section 13 level 2 item 3</p>
+        <p class="filler">s13d2i0</p>
+        <p class="filler">s13d2i1</p>
         <div class="level-3">
-          <p class="filler">section 13 level 3 item 0</p>
-          <p class="filler">section 13 level 3 item 1</p>
-          <p class="filler">section 13 level 3 item 2</p>
-          <p class="filler">section 13 level 3 item 3</p>
+          <p class="filler">s13d3i0</p>
+          <p class="filler">s13d3i1</p>
           <div class="level-4">
-            <p class="filler">section 13 level 4 item 0</p>
-            <p class="filler">section 13 level 4 item 1</p>
-            <p class="filler">section 13 level 4 item 2</p>
-            <p class="filler">section 13 level 4 item 3</p>
+            <p class="filler">s13d4i0</p>
+            <p class="filler">s13d4i1</p>
             <div class="level-5">
-              <p class="filler">section 13 level 5 item 0</p>
-              <p class="filler">section 13 level 5 item 1</p>
-              <p class="filler">section 13 level 5 item 2</p>
-              <p class="filler">section 13 level 5 item 3</p>
+              <p class="filler">s13d5i0</p>
+              <p class="filler">s13d5i1</p>
               <div class="level-6">
-                <p class="filler">section 13 level 6 item 0</p>
-                <p class="filler">section 13 level 6 item 1</p>
-                <p class="filler">section 13 level 6 item 2</p>
-                <p class="filler">section 13 level 6 item 3</p>
+                <p class="filler">s13d6i0</p>
+                <p class="filler">s13d6i1</p>
                 <div class="level-7">
-                  <p class="filler">section 13 level 7 item 0</p>
-                  <p class="filler">section 13 level 7 item 1</p>
-                  <p class="filler">section 13 level 7 item 2</p>
-                  <p class="filler">section 13 level 7 item 3</p>
+                  <p class="filler">s13d7i0</p>
+                  <p class="filler">s13d7i1</p>
                   <div class="level-8">
-                    <p class="filler">section 13 level 8 item 0</p>
-                    <p class="filler">section 13 level 8 item 1</p>
-                    <p class="filler">section 13 level 8 item 2</p>
-                    <p class="filler">section 13 level 8 item 3</p>
+                    <p class="filler">s13d8i0</p>
+                    <p class="filler">s13d8i1</p>
                     <div class="level-9">
-                      <p class="filler">section 13 level 9 item 0</p>
-                      <p class="filler">section 13 level 9 item 1</p>
-                      <p class="filler">section 13 level 9 item 2</p>
-                      <p class="filler">section 13 level 9 item 3</p>
+                      <p class="filler">s13d9i0</p>
+                      <p class="filler">s13d9i1</p>
                       <div class="level-10">
-                        <p class="filler">section 13 level 10 item 0</p>
-                        <p class="filler">section 13 level 10 item 1</p>
-                        <p class="filler">section 13 level 10 item 2</p>
-                        <p class="filler">section 13 level 10 item 3</p>
+                        <p class="filler">s13d10i0</p>
+                        <p class="filler">s13d10i1</p>
                         <span class="leaf">original</span>
                       </div>
                     </div>
@@ -883,55 +603,35 @@
   </section>
   <section id="section-14">
     <div class="level-1">
-      <p class="filler">section 14 level 1 item 0</p>
-      <p class="filler">section 14 level 1 item 1</p>
-      <p class="filler">section 14 level 1 item 2</p>
-      <p class="filler">section 14 level 1 item 3</p>
+      <p class="filler">s14d1i0</p>
+      <p class="filler">s14d1i1</p>
       <div class="level-2">
-        <p class="filler">section 14 level 2 item 0</p>
-        <p class="filler">section 14 level 2 item 1</p>
-        <p class="filler">section 14 level 2 item 2</p>
-        <p class="filler">section 14 level 2 item 3</p>
+        <p class="filler">s14d2i0</p>
+        <p class="filler">s14d2i1</p>
         <div class="level-3">
-          <p class="filler">section 14 level 3 item 0</p>
-          <p class="filler">section 14 level 3 item 1</p>
-          <p class="filler">section 14 level 3 item 2</p>
-          <p class="filler">section 14 level 3 item 3</p>
+          <p class="filler">s14d3i0</p>
+          <p class="filler">s14d3i1</p>
           <div class="level-4">
-            <p class="filler">section 14 level 4 item 0</p>
-            <p class="filler">section 14 level 4 item 1</p>
-            <p class="filler">section 14 level 4 item 2</p>
-            <p class="filler">section 14 level 4 item 3</p>
+            <p class="filler">s14d4i0</p>
+            <p class="filler">s14d4i1</p>
             <div class="level-5">
-              <p class="filler">section 14 level 5 item 0</p>
-              <p class="filler">section 14 level 5 item 1</p>
-              <p class="filler">section 14 level 5 item 2</p>
-              <p class="filler">section 14 level 5 item 3</p>
+              <p class="filler">s14d5i0</p>
+              <p class="filler">s14d5i1</p>
               <div class="level-6">
-                <p class="filler">section 14 level 6 item 0</p>
-                <p class="filler">section 14 level 6 item 1</p>
-                <p class="filler">section 14 level 6 item 2</p>
-                <p class="filler">section 14 level 6 item 3</p>
+                <p class="filler">s14d6i0</p>
+                <p class="filler">s14d6i1</p>
                 <div class="level-7">
-                  <p class="filler">section 14 level 7 item 0</p>
-                  <p class="filler">section 14 level 7 item 1</p>
-                  <p class="filler">section 14 level 7 item 2</p>
-                  <p class="filler">section 14 level 7 item 3</p>
+                  <p class="filler">s14d7i0</p>
+                  <p class="filler">s14d7i1</p>
                   <div class="level-8">
-                    <p class="filler">section 14 level 8 item 0</p>
-                    <p class="filler">section 14 level 8 item 1</p>
-                    <p class="filler">section 14 level 8 item 2</p>
-                    <p class="filler">section 14 level 8 item 3</p>
+                    <p class="filler">s14d8i0</p>
+                    <p class="filler">s14d8i1</p>
                     <div class="level-9">
-                      <p class="filler">section 14 level 9 item 0</p>
-                      <p class="filler">section 14 level 9 item 1</p>
-                      <p class="filler">section 14 level 9 item 2</p>
-                      <p class="filler">section 14 level 9 item 3</p>
+                      <p class="filler">s14d9i0</p>
+                      <p class="filler">s14d9i1</p>
                       <div class="level-10">
-                        <p class="filler">section 14 level 10 item 0</p>
-                        <p class="filler">section 14 level 10 item 1</p>
-                        <p class="filler">section 14 level 10 item 2</p>
-                        <p class="filler">section 14 level 10 item 3</p>
+                        <p class="filler">s14d10i0</p>
+                        <p class="filler">s14d10i1</p>
                         <span class="leaf">original</span>
                       </div>
                     </div>
@@ -946,55 +646,35 @@
   </section>
   <section id="section-15">
     <div class="level-1">
-      <p class="filler">section 15 level 1 item 0</p>
-      <p class="filler">section 15 level 1 item 1</p>
-      <p class="filler">section 15 level 1 item 2</p>
-      <p class="filler">section 15 level 1 item 3</p>
+      <p class="filler">s15d1i0</p>
+      <p class="filler">s15d1i1</p>
       <div class="level-2">
-        <p class="filler">section 15 level 2 item 0</p>
-        <p class="filler">section 15 level 2 item 1</p>
-        <p class="filler">section 15 level 2 item 2</p>
-        <p class="filler">section 15 level 2 item 3</p>
+        <p class="filler">s15d2i0</p>
+        <p class="filler">s15d2i1</p>
         <div class="level-3">
-          <p class="filler">section 15 level 3 item 0</p>
-          <p class="filler">section 15 level 3 item 1</p>
-          <p class="filler">section 15 level 3 item 2</p>
-          <p class="filler">section 15 level 3 item 3</p>
+          <p class="filler">s15d3i0</p>
+          <p class="filler">s15d3i1</p>
           <div class="level-4">
-            <p class="filler">section 15 level 4 item 0</p>
-            <p class="filler">section 15 level 4 item 1</p>
-            <p class="filler">section 15 level 4 item 2</p>
-            <p class="filler">section 15 level 4 item 3</p>
+            <p class="filler">s15d4i0</p>
+            <p class="filler">s15d4i1</p>
             <div class="level-5">
-              <p class="filler">section 15 level 5 item 0</p>
-              <p class="filler">section 15 level 5 item 1</p>
-              <p class="filler">section 15 level 5 item 2</p>
-              <p class="filler">section 15 level 5 item 3</p>
+              <p class="filler">s15d5i0</p>
+              <p class="filler">s15d5i1</p>
               <div class="level-6">
-                <p class="filler">section 15 level 6 item 0</p>
-                <p class="filler">section 15 level 6 item 1</p>
-                <p class="filler">section 15 level 6 item 2</p>
-                <p class="filler">section 15 level 6 item 3</p>
+                <p class="filler">s15d6i0</p>
+                <p class="filler">s15d6i1</p>
                 <div class="level-7">
-                  <p class="filler">section 15 level 7 item 0</p>
-                  <p class="filler">section 15 level 7 item 1</p>
-                  <p class="filler">section 15 level 7 item 2</p>
-                  <p class="filler">section 15 level 7 item 3</p>
+                  <p class="filler">s15d7i0</p>
+                  <p class="filler">s15d7i1</p>
                   <div class="level-8">
-                    <p class="filler">section 15 level 8 item 0</p>
-                    <p class="filler">section 15 level 8 item 1</p>
-                    <p class="filler">section 15 level 8 item 2</p>
-                    <p class="filler">section 15 level 8 item 3</p>
+                    <p class="filler">s15d8i0</p>
+                    <p class="filler">s15d8i1</p>
                     <div class="level-9">
-                      <p class="filler">section 15 level 9 item 0</p>
-                      <p class="filler">section 15 level 9 item 1</p>
-                      <p class="filler">section 15 level 9 item 2</p>
-                      <p class="filler">section 15 level 9 item 3</p>
+                      <p class="filler">s15d9i0</p>
+                      <p class="filler">s15d9i1</p>
                       <div class="level-10">
-                        <p class="filler">section 15 level 10 item 0</p>
-                        <p class="filler">section 15 level 10 item 1</p>
-                        <p class="filler">section 15 level 10 item 2</p>
-                        <p class="filler">section 15 level 10 item 3</p>
+                        <p class="filler">s15d10i0</p>
+                        <p class="filler">s15d10i1</p>
                         <span class="leaf">original</span>
                       </div>
                     </div>
@@ -1009,55 +689,35 @@
   </section>
   <section id="section-16">
     <div class="level-1">
-      <p class="filler">section 16 level 1 item 0</p>
-      <p class="filler">section 16 level 1 item 1</p>
-      <p class="filler">section 16 level 1 item 2</p>
-      <p class="filler">section 16 level 1 item 3</p>
+      <p class="filler">s16d1i0</p>
+      <p class="filler">s16d1i1</p>
       <div class="level-2">
-        <p class="filler">section 16 level 2 item 0</p>
-        <p class="filler">section 16 level 2 item 1</p>
-        <p class="filler">section 16 level 2 item 2</p>
-        <p class="filler">section 16 level 2 item 3</p>
+        <p class="filler">s16d2i0</p>
+        <p class="filler">s16d2i1</p>
         <div class="level-3">
-          <p class="filler">section 16 level 3 item 0</p>
-          <p class="filler">section 16 level 3 item 1</p>
-          <p class="filler">section 16 level 3 item 2</p>
-          <p class="filler">section 16 level 3 item 3</p>
+          <p class="filler">s16d3i0</p>
+          <p class="filler">s16d3i1</p>
           <div class="level-4">
-            <p class="filler">section 16 level 4 item 0</p>
-            <p class="filler">section 16 level 4 item 1</p>
-            <p class="filler">section 16 level 4 item 2</p>
-            <p class="filler">section 16 level 4 item 3</p>
+            <p class="filler">s16d4i0</p>
+            <p class="filler">s16d4i1</p>
             <div class="level-5">
-              <p class="filler">section 16 level 5 item 0</p>
-              <p class="filler">section 16 level 5 item 1</p>
-              <p class="filler">section 16 level 5 item 2</p>
-              <p class="filler">section 16 level 5 item 3</p>
+              <p class="filler">s16d5i0</p>
+              <p class="filler">s16d5i1</p>
               <div class="level-6">
-                <p class="filler">section 16 level 6 item 0</p>
-                <p class="filler">section 16 level 6 item 1</p>
-                <p class="filler">section 16 level 6 item 2</p>
-                <p class="filler">section 16 level 6 item 3</p>
+                <p class="filler">s16d6i0</p>
+                <p class="filler">s16d6i1</p>
                 <div class="level-7">
-                  <p class="filler">section 16 level 7 item 0</p>
-                  <p class="filler">section 16 level 7 item 1</p>
-                  <p class="filler">section 16 level 7 item 2</p>
-                  <p class="filler">section 16 level 7 item 3</p>
+                  <p class="filler">s16d7i0</p>
+                  <p class="filler">s16d7i1</p>
                   <div class="level-8">
-                    <p class="filler">section 16 level 8 item 0</p>
-                    <p class="filler">section 16 level 8 item 1</p>
-                    <p class="filler">section 16 level 8 item 2</p>
-                    <p class="filler">section 16 level 8 item 3</p>
+                    <p class="filler">s16d8i0</p>
+                    <p class="filler">s16d8i1</p>
                     <div class="level-9">
-                      <p class="filler">section 16 level 9 item 0</p>
-                      <p class="filler">section 16 level 9 item 1</p>
-                      <p class="filler">section 16 level 9 item 2</p>
-                      <p class="filler">section 16 level 9 item 3</p>
+                      <p class="filler">s16d9i0</p>
+                      <p class="filler">s16d9i1</p>
                       <div class="level-10">
-                        <p class="filler">section 16 level 10 item 0</p>
-                        <p class="filler">section 16 level 10 item 1</p>
-                        <p class="filler">section 16 level 10 item 2</p>
-                        <p class="filler">section 16 level 10 item 3</p>
+                        <p class="filler">s16d10i0</p>
+                        <p class="filler">s16d10i1</p>
                         <span class="leaf">original</span>
                       </div>
                     </div>
@@ -1072,55 +732,35 @@
   </section>
   <section id="section-17">
     <div class="level-1">
-      <p class="filler">section 17 level 1 item 0</p>
-      <p class="filler">section 17 level 1 item 1</p>
-      <p class="filler">section 17 level 1 item 2</p>
-      <p class="filler">section 17 level 1 item 3</p>
+      <p class="filler">s17d1i0</p>
+      <p class="filler">s17d1i1</p>
       <div class="level-2">
-        <p class="filler">section 17 level 2 item 0</p>
-        <p class="filler">section 17 level 2 item 1</p>
-        <p class="filler">section 17 level 2 item 2</p>
-        <p class="filler">section 17 level 2 item 3</p>
+        <p class="filler">s17d2i0</p>
+        <p class="filler">s17d2i1</p>
         <div class="level-3">
-          <p class="filler">section 17 level 3 item 0</p>
-          <p class="filler">section 17 level 3 item 1</p>
-          <p class="filler">section 17 level 3 item 2</p>
-          <p class="filler">section 17 level 3 item 3</p>
+          <p class="filler">s17d3i0</p>
+          <p class="filler">s17d3i1</p>
           <div class="level-4">
-            <p class="filler">section 17 level 4 item 0</p>
-            <p class="filler">section 17 level 4 item 1</p>
-            <p class="filler">section 17 level 4 item 2</p>
-            <p class="filler">section 17 level 4 item 3</p>
+            <p class="filler">s17d4i0</p>
+            <p class="filler">s17d4i1</p>
             <div class="level-5">
-              <p class="filler">section 17 level 5 item 0</p>
-              <p class="filler">section 17 level 5 item 1</p>
-              <p class="filler">section 17 level 5 item 2</p>
-              <p class="filler">section 17 level 5 item 3</p>
+              <p class="filler">s17d5i0</p>
+              <p class="filler">s17d5i1</p>
               <div class="level-6">
-                <p class="filler">section 17 level 6 item 0</p>
-                <p class="filler">section 17 level 6 item 1</p>
-                <p class="filler">section 17 level 6 item 2</p>
-                <p class="filler">section 17 level 6 item 3</p>
+                <p class="filler">s17d6i0</p>
+                <p class="filler">s17d6i1</p>
                 <div class="level-7">
-                  <p class="filler">section 17 level 7 item 0</p>
-                  <p class="filler">section 17 level 7 item 1</p>
-                  <p class="filler">section 17 level 7 item 2</p>
-                  <p class="filler">section 17 level 7 item 3</p>
+                  <p class="filler">s17d7i0</p>
+                  <p class="filler">s17d7i1</p>
                   <div class="level-8">
-                    <p class="filler">section 17 level 8 item 0</p>
-                    <p class="filler">section 17 level 8 item 1</p>
-                    <p class="filler">section 17 level 8 item 2</p>
-                    <p class="filler">section 17 level 8 item 3</p>
+                    <p class="filler">s17d8i0</p>
+                    <p class="filler">s17d8i1</p>
                     <div class="level-9">
-                      <p class="filler">section 17 level 9 item 0</p>
-                      <p class="filler">section 17 level 9 item 1</p>
-                      <p class="filler">section 17 level 9 item 2</p>
-                      <p class="filler">section 17 level 9 item 3</p>
+                      <p class="filler">s17d9i0</p>
+                      <p class="filler">s17d9i1</p>
                       <div class="level-10">
-                        <p class="filler">section 17 level 10 item 0</p>
-                        <p class="filler">section 17 level 10 item 1</p>
-                        <p class="filler">section 17 level 10 item 2</p>
-                        <p class="filler">section 17 level 10 item 3</p>
+                        <p class="filler">s17d10i0</p>
+                        <p class="filler">s17d10i1</p>
                         <span class="leaf">original</span>
                       </div>
                     </div>
@@ -1135,55 +775,35 @@
   </section>
   <section id="section-18">
     <div class="level-1">
-      <p class="filler">section 18 level 1 item 0</p>
-      <p class="filler">section 18 level 1 item 1</p>
-      <p class="filler">section 18 level 1 item 2</p>
-      <p class="filler">section 18 level 1 item 3</p>
+      <p class="filler">s18d1i0</p>
+      <p class="filler">s18d1i1</p>
       <div class="level-2">
-        <p class="filler">section 18 level 2 item 0</p>
-        <p class="filler">section 18 level 2 item 1</p>
-        <p class="filler">section 18 level 2 item 2</p>
-        <p class="filler">section 18 level 2 item 3</p>
+        <p class="filler">s18d2i0</p>
+        <p class="filler">s18d2i1</p>
         <div class="level-3">
-          <p class="filler">section 18 level 3 item 0</p>
-          <p class="filler">section 18 level 3 item 1</p>
-          <p class="filler">section 18 level 3 item 2</p>
-          <p class="filler">section 18 level 3 item 3</p>
+          <p class="filler">s18d3i0</p>
+          <p class="filler">s18d3i1</p>
           <div class="level-4">
-            <p class="filler">section 18 level 4 item 0</p>
-            <p class="filler">section 18 level 4 item 1</p>
-            <p class="filler">section 18 level 4 item 2</p>
-            <p class="filler">section 18 level 4 item 3</p>
+            <p class="filler">s18d4i0</p>
+            <p class="filler">s18d4i1</p>
             <div class="level-5">
-              <p class="filler">section 18 level 5 item 0</p>
-              <p class="filler">section 18 level 5 item 1</p>
-              <p class="filler">section 18 level 5 item 2</p>
-              <p class="filler">section 18 level 5 item 3</p>
+              <p class="filler">s18d5i0</p>
+              <p class="filler">s18d5i1</p>
               <div class="level-6">
-                <p class="filler">section 18 level 6 item 0</p>
-                <p class="filler">section 18 level 6 item 1</p>
-                <p class="filler">section 18 level 6 item 2</p>
-                <p class="filler">section 18 level 6 item 3</p>
+                <p class="filler">s18d6i0</p>
+                <p class="filler">s18d6i1</p>
                 <div class="level-7">
-                  <p class="filler">section 18 level 7 item 0</p>
-                  <p class="filler">section 18 level 7 item 1</p>
-                  <p class="filler">section 18 level 7 item 2</p>
-                  <p class="filler">section 18 level 7 item 3</p>
+                  <p class="filler">s18d7i0</p>
+                  <p class="filler">s18d7i1</p>
                   <div class="level-8">
-                    <p class="filler">section 18 level 8 item 0</p>
-                    <p class="filler">section 18 level 8 item 1</p>
-                    <p class="filler">section 18 level 8 item 2</p>
-                    <p class="filler">section 18 level 8 item 3</p>
+                    <p class="filler">s18d8i0</p>
+                    <p class="filler">s18d8i1</p>
                     <div class="level-9">
-                      <p class="filler">section 18 level 9 item 0</p>
-                      <p class="filler">section 18 level 9 item 1</p>
-                      <p class="filler">section 18 level 9 item 2</p>
-                      <p class="filler">section 18 level 9 item 3</p>
+                      <p class="filler">s18d9i0</p>
+                      <p class="filler">s18d9i1</p>
                       <div class="level-10">
-                        <p class="filler">section 18 level 10 item 0</p>
-                        <p class="filler">section 18 level 10 item 1</p>
-                        <p class="filler">section 18 level 10 item 2</p>
-                        <p class="filler">section 18 level 10 item 3</p>
+                        <p class="filler">s18d10i0</p>
+                        <p class="filler">s18d10i1</p>
                         <span class="leaf">original</span>
                       </div>
                     </div>
@@ -1198,1315 +818,35 @@
   </section>
   <section id="section-19">
     <div class="level-1">
-      <p class="filler">section 19 level 1 item 0</p>
-      <p class="filler">section 19 level 1 item 1</p>
-      <p class="filler">section 19 level 1 item 2</p>
-      <p class="filler">section 19 level 1 item 3</p>
+      <p class="filler">s19d1i0</p>
+      <p class="filler">s19d1i1</p>
       <div class="level-2">
-        <p class="filler">section 19 level 2 item 0</p>
-        <p class="filler">section 19 level 2 item 1</p>
-        <p class="filler">section 19 level 2 item 2</p>
-        <p class="filler">section 19 level 2 item 3</p>
+        <p class="filler">s19d2i0</p>
+        <p class="filler">s19d2i1</p>
         <div class="level-3">
-          <p class="filler">section 19 level 3 item 0</p>
-          <p class="filler">section 19 level 3 item 1</p>
-          <p class="filler">section 19 level 3 item 2</p>
-          <p class="filler">section 19 level 3 item 3</p>
+          <p class="filler">s19d3i0</p>
+          <p class="filler">s19d3i1</p>
           <div class="level-4">
-            <p class="filler">section 19 level 4 item 0</p>
-            <p class="filler">section 19 level 4 item 1</p>
-            <p class="filler">section 19 level 4 item 2</p>
-            <p class="filler">section 19 level 4 item 3</p>
+            <p class="filler">s19d4i0</p>
+            <p class="filler">s19d4i1</p>
             <div class="level-5">
-              <p class="filler">section 19 level 5 item 0</p>
-              <p class="filler">section 19 level 5 item 1</p>
-              <p class="filler">section 19 level 5 item 2</p>
-              <p class="filler">section 19 level 5 item 3</p>
+              <p class="filler">s19d5i0</p>
+              <p class="filler">s19d5i1</p>
               <div class="level-6">
-                <p class="filler">section 19 level 6 item 0</p>
-                <p class="filler">section 19 level 6 item 1</p>
-                <p class="filler">section 19 level 6 item 2</p>
-                <p class="filler">section 19 level 6 item 3</p>
+                <p class="filler">s19d6i0</p>
+                <p class="filler">s19d6i1</p>
                 <div class="level-7">
-                  <p class="filler">section 19 level 7 item 0</p>
-                  <p class="filler">section 19 level 7 item 1</p>
-                  <p class="filler">section 19 level 7 item 2</p>
-                  <p class="filler">section 19 level 7 item 3</p>
+                  <p class="filler">s19d7i0</p>
+                  <p class="filler">s19d7i1</p>
                   <div class="level-8">
-                    <p class="filler">section 19 level 8 item 0</p>
-                    <p class="filler">section 19 level 8 item 1</p>
-                    <p class="filler">section 19 level 8 item 2</p>
-                    <p class="filler">section 19 level 8 item 3</p>
+                    <p class="filler">s19d8i0</p>
+                    <p class="filler">s19d8i1</p>
                     <div class="level-9">
-                      <p class="filler">section 19 level 9 item 0</p>
-                      <p class="filler">section 19 level 9 item 1</p>
-                      <p class="filler">section 19 level 9 item 2</p>
-                      <p class="filler">section 19 level 9 item 3</p>
+                      <p class="filler">s19d9i0</p>
+                      <p class="filler">s19d9i1</p>
                       <div class="level-10">
-                        <p class="filler">section 19 level 10 item 0</p>
-                        <p class="filler">section 19 level 10 item 1</p>
-                        <p class="filler">section 19 level 10 item 2</p>
-                        <p class="filler">section 19 level 10 item 3</p>
-                        <span class="leaf">original</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <section id="section-20">
-    <div class="level-1">
-      <p class="filler">section 20 level 1 item 0</p>
-      <p class="filler">section 20 level 1 item 1</p>
-      <p class="filler">section 20 level 1 item 2</p>
-      <p class="filler">section 20 level 1 item 3</p>
-      <div class="level-2">
-        <p class="filler">section 20 level 2 item 0</p>
-        <p class="filler">section 20 level 2 item 1</p>
-        <p class="filler">section 20 level 2 item 2</p>
-        <p class="filler">section 20 level 2 item 3</p>
-        <div class="level-3">
-          <p class="filler">section 20 level 3 item 0</p>
-          <p class="filler">section 20 level 3 item 1</p>
-          <p class="filler">section 20 level 3 item 2</p>
-          <p class="filler">section 20 level 3 item 3</p>
-          <div class="level-4">
-            <p class="filler">section 20 level 4 item 0</p>
-            <p class="filler">section 20 level 4 item 1</p>
-            <p class="filler">section 20 level 4 item 2</p>
-            <p class="filler">section 20 level 4 item 3</p>
-            <div class="level-5">
-              <p class="filler">section 20 level 5 item 0</p>
-              <p class="filler">section 20 level 5 item 1</p>
-              <p class="filler">section 20 level 5 item 2</p>
-              <p class="filler">section 20 level 5 item 3</p>
-              <div class="level-6">
-                <p class="filler">section 20 level 6 item 0</p>
-                <p class="filler">section 20 level 6 item 1</p>
-                <p class="filler">section 20 level 6 item 2</p>
-                <p class="filler">section 20 level 6 item 3</p>
-                <div class="level-7">
-                  <p class="filler">section 20 level 7 item 0</p>
-                  <p class="filler">section 20 level 7 item 1</p>
-                  <p class="filler">section 20 level 7 item 2</p>
-                  <p class="filler">section 20 level 7 item 3</p>
-                  <div class="level-8">
-                    <p class="filler">section 20 level 8 item 0</p>
-                    <p class="filler">section 20 level 8 item 1</p>
-                    <p class="filler">section 20 level 8 item 2</p>
-                    <p class="filler">section 20 level 8 item 3</p>
-                    <div class="level-9">
-                      <p class="filler">section 20 level 9 item 0</p>
-                      <p class="filler">section 20 level 9 item 1</p>
-                      <p class="filler">section 20 level 9 item 2</p>
-                      <p class="filler">section 20 level 9 item 3</p>
-                      <div class="level-10">
-                        <p class="filler">section 20 level 10 item 0</p>
-                        <p class="filler">section 20 level 10 item 1</p>
-                        <p class="filler">section 20 level 10 item 2</p>
-                        <p class="filler">section 20 level 10 item 3</p>
-                        <span class="leaf">original</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <section id="section-21">
-    <div class="level-1">
-      <p class="filler">section 21 level 1 item 0</p>
-      <p class="filler">section 21 level 1 item 1</p>
-      <p class="filler">section 21 level 1 item 2</p>
-      <p class="filler">section 21 level 1 item 3</p>
-      <div class="level-2">
-        <p class="filler">section 21 level 2 item 0</p>
-        <p class="filler">section 21 level 2 item 1</p>
-        <p class="filler">section 21 level 2 item 2</p>
-        <p class="filler">section 21 level 2 item 3</p>
-        <div class="level-3">
-          <p class="filler">section 21 level 3 item 0</p>
-          <p class="filler">section 21 level 3 item 1</p>
-          <p class="filler">section 21 level 3 item 2</p>
-          <p class="filler">section 21 level 3 item 3</p>
-          <div class="level-4">
-            <p class="filler">section 21 level 4 item 0</p>
-            <p class="filler">section 21 level 4 item 1</p>
-            <p class="filler">section 21 level 4 item 2</p>
-            <p class="filler">section 21 level 4 item 3</p>
-            <div class="level-5">
-              <p class="filler">section 21 level 5 item 0</p>
-              <p class="filler">section 21 level 5 item 1</p>
-              <p class="filler">section 21 level 5 item 2</p>
-              <p class="filler">section 21 level 5 item 3</p>
-              <div class="level-6">
-                <p class="filler">section 21 level 6 item 0</p>
-                <p class="filler">section 21 level 6 item 1</p>
-                <p class="filler">section 21 level 6 item 2</p>
-                <p class="filler">section 21 level 6 item 3</p>
-                <div class="level-7">
-                  <p class="filler">section 21 level 7 item 0</p>
-                  <p class="filler">section 21 level 7 item 1</p>
-                  <p class="filler">section 21 level 7 item 2</p>
-                  <p class="filler">section 21 level 7 item 3</p>
-                  <div class="level-8">
-                    <p class="filler">section 21 level 8 item 0</p>
-                    <p class="filler">section 21 level 8 item 1</p>
-                    <p class="filler">section 21 level 8 item 2</p>
-                    <p class="filler">section 21 level 8 item 3</p>
-                    <div class="level-9">
-                      <p class="filler">section 21 level 9 item 0</p>
-                      <p class="filler">section 21 level 9 item 1</p>
-                      <p class="filler">section 21 level 9 item 2</p>
-                      <p class="filler">section 21 level 9 item 3</p>
-                      <div class="level-10">
-                        <p class="filler">section 21 level 10 item 0</p>
-                        <p class="filler">section 21 level 10 item 1</p>
-                        <p class="filler">section 21 level 10 item 2</p>
-                        <p class="filler">section 21 level 10 item 3</p>
-                        <span class="leaf">original</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <section id="section-22">
-    <div class="level-1">
-      <p class="filler">section 22 level 1 item 0</p>
-      <p class="filler">section 22 level 1 item 1</p>
-      <p class="filler">section 22 level 1 item 2</p>
-      <p class="filler">section 22 level 1 item 3</p>
-      <div class="level-2">
-        <p class="filler">section 22 level 2 item 0</p>
-        <p class="filler">section 22 level 2 item 1</p>
-        <p class="filler">section 22 level 2 item 2</p>
-        <p class="filler">section 22 level 2 item 3</p>
-        <div class="level-3">
-          <p class="filler">section 22 level 3 item 0</p>
-          <p class="filler">section 22 level 3 item 1</p>
-          <p class="filler">section 22 level 3 item 2</p>
-          <p class="filler">section 22 level 3 item 3</p>
-          <div class="level-4">
-            <p class="filler">section 22 level 4 item 0</p>
-            <p class="filler">section 22 level 4 item 1</p>
-            <p class="filler">section 22 level 4 item 2</p>
-            <p class="filler">section 22 level 4 item 3</p>
-            <div class="level-5">
-              <p class="filler">section 22 level 5 item 0</p>
-              <p class="filler">section 22 level 5 item 1</p>
-              <p class="filler">section 22 level 5 item 2</p>
-              <p class="filler">section 22 level 5 item 3</p>
-              <div class="level-6">
-                <p class="filler">section 22 level 6 item 0</p>
-                <p class="filler">section 22 level 6 item 1</p>
-                <p class="filler">section 22 level 6 item 2</p>
-                <p class="filler">section 22 level 6 item 3</p>
-                <div class="level-7">
-                  <p class="filler">section 22 level 7 item 0</p>
-                  <p class="filler">section 22 level 7 item 1</p>
-                  <p class="filler">section 22 level 7 item 2</p>
-                  <p class="filler">section 22 level 7 item 3</p>
-                  <div class="level-8">
-                    <p class="filler">section 22 level 8 item 0</p>
-                    <p class="filler">section 22 level 8 item 1</p>
-                    <p class="filler">section 22 level 8 item 2</p>
-                    <p class="filler">section 22 level 8 item 3</p>
-                    <div class="level-9">
-                      <p class="filler">section 22 level 9 item 0</p>
-                      <p class="filler">section 22 level 9 item 1</p>
-                      <p class="filler">section 22 level 9 item 2</p>
-                      <p class="filler">section 22 level 9 item 3</p>
-                      <div class="level-10">
-                        <p class="filler">section 22 level 10 item 0</p>
-                        <p class="filler">section 22 level 10 item 1</p>
-                        <p class="filler">section 22 level 10 item 2</p>
-                        <p class="filler">section 22 level 10 item 3</p>
-                        <span class="leaf">original</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <section id="section-23">
-    <div class="level-1">
-      <p class="filler">section 23 level 1 item 0</p>
-      <p class="filler">section 23 level 1 item 1</p>
-      <p class="filler">section 23 level 1 item 2</p>
-      <p class="filler">section 23 level 1 item 3</p>
-      <div class="level-2">
-        <p class="filler">section 23 level 2 item 0</p>
-        <p class="filler">section 23 level 2 item 1</p>
-        <p class="filler">section 23 level 2 item 2</p>
-        <p class="filler">section 23 level 2 item 3</p>
-        <div class="level-3">
-          <p class="filler">section 23 level 3 item 0</p>
-          <p class="filler">section 23 level 3 item 1</p>
-          <p class="filler">section 23 level 3 item 2</p>
-          <p class="filler">section 23 level 3 item 3</p>
-          <div class="level-4">
-            <p class="filler">section 23 level 4 item 0</p>
-            <p class="filler">section 23 level 4 item 1</p>
-            <p class="filler">section 23 level 4 item 2</p>
-            <p class="filler">section 23 level 4 item 3</p>
-            <div class="level-5">
-              <p class="filler">section 23 level 5 item 0</p>
-              <p class="filler">section 23 level 5 item 1</p>
-              <p class="filler">section 23 level 5 item 2</p>
-              <p class="filler">section 23 level 5 item 3</p>
-              <div class="level-6">
-                <p class="filler">section 23 level 6 item 0</p>
-                <p class="filler">section 23 level 6 item 1</p>
-                <p class="filler">section 23 level 6 item 2</p>
-                <p class="filler">section 23 level 6 item 3</p>
-                <div class="level-7">
-                  <p class="filler">section 23 level 7 item 0</p>
-                  <p class="filler">section 23 level 7 item 1</p>
-                  <p class="filler">section 23 level 7 item 2</p>
-                  <p class="filler">section 23 level 7 item 3</p>
-                  <div class="level-8">
-                    <p class="filler">section 23 level 8 item 0</p>
-                    <p class="filler">section 23 level 8 item 1</p>
-                    <p class="filler">section 23 level 8 item 2</p>
-                    <p class="filler">section 23 level 8 item 3</p>
-                    <div class="level-9">
-                      <p class="filler">section 23 level 9 item 0</p>
-                      <p class="filler">section 23 level 9 item 1</p>
-                      <p class="filler">section 23 level 9 item 2</p>
-                      <p class="filler">section 23 level 9 item 3</p>
-                      <div class="level-10">
-                        <p class="filler">section 23 level 10 item 0</p>
-                        <p class="filler">section 23 level 10 item 1</p>
-                        <p class="filler">section 23 level 10 item 2</p>
-                        <p class="filler">section 23 level 10 item 3</p>
-                        <span class="leaf">original</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <section id="section-24">
-    <div class="level-1">
-      <p class="filler">section 24 level 1 item 0</p>
-      <p class="filler">section 24 level 1 item 1</p>
-      <p class="filler">section 24 level 1 item 2</p>
-      <p class="filler">section 24 level 1 item 3</p>
-      <div class="level-2">
-        <p class="filler">section 24 level 2 item 0</p>
-        <p class="filler">section 24 level 2 item 1</p>
-        <p class="filler">section 24 level 2 item 2</p>
-        <p class="filler">section 24 level 2 item 3</p>
-        <div class="level-3">
-          <p class="filler">section 24 level 3 item 0</p>
-          <p class="filler">section 24 level 3 item 1</p>
-          <p class="filler">section 24 level 3 item 2</p>
-          <p class="filler">section 24 level 3 item 3</p>
-          <div class="level-4">
-            <p class="filler">section 24 level 4 item 0</p>
-            <p class="filler">section 24 level 4 item 1</p>
-            <p class="filler">section 24 level 4 item 2</p>
-            <p class="filler">section 24 level 4 item 3</p>
-            <div class="level-5">
-              <p class="filler">section 24 level 5 item 0</p>
-              <p class="filler">section 24 level 5 item 1</p>
-              <p class="filler">section 24 level 5 item 2</p>
-              <p class="filler">section 24 level 5 item 3</p>
-              <div class="level-6">
-                <p class="filler">section 24 level 6 item 0</p>
-                <p class="filler">section 24 level 6 item 1</p>
-                <p class="filler">section 24 level 6 item 2</p>
-                <p class="filler">section 24 level 6 item 3</p>
-                <div class="level-7">
-                  <p class="filler">section 24 level 7 item 0</p>
-                  <p class="filler">section 24 level 7 item 1</p>
-                  <p class="filler">section 24 level 7 item 2</p>
-                  <p class="filler">section 24 level 7 item 3</p>
-                  <div class="level-8">
-                    <p class="filler">section 24 level 8 item 0</p>
-                    <p class="filler">section 24 level 8 item 1</p>
-                    <p class="filler">section 24 level 8 item 2</p>
-                    <p class="filler">section 24 level 8 item 3</p>
-                    <div class="level-9">
-                      <p class="filler">section 24 level 9 item 0</p>
-                      <p class="filler">section 24 level 9 item 1</p>
-                      <p class="filler">section 24 level 9 item 2</p>
-                      <p class="filler">section 24 level 9 item 3</p>
-                      <div class="level-10">
-                        <p class="filler">section 24 level 10 item 0</p>
-                        <p class="filler">section 24 level 10 item 1</p>
-                        <p class="filler">section 24 level 10 item 2</p>
-                        <p class="filler">section 24 level 10 item 3</p>
-                        <span class="leaf">original</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <section id="section-25">
-    <div class="level-1">
-      <p class="filler">section 25 level 1 item 0</p>
-      <p class="filler">section 25 level 1 item 1</p>
-      <p class="filler">section 25 level 1 item 2</p>
-      <p class="filler">section 25 level 1 item 3</p>
-      <div class="level-2">
-        <p class="filler">section 25 level 2 item 0</p>
-        <p class="filler">section 25 level 2 item 1</p>
-        <p class="filler">section 25 level 2 item 2</p>
-        <p class="filler">section 25 level 2 item 3</p>
-        <div class="level-3">
-          <p class="filler">section 25 level 3 item 0</p>
-          <p class="filler">section 25 level 3 item 1</p>
-          <p class="filler">section 25 level 3 item 2</p>
-          <p class="filler">section 25 level 3 item 3</p>
-          <div class="level-4">
-            <p class="filler">section 25 level 4 item 0</p>
-            <p class="filler">section 25 level 4 item 1</p>
-            <p class="filler">section 25 level 4 item 2</p>
-            <p class="filler">section 25 level 4 item 3</p>
-            <div class="level-5">
-              <p class="filler">section 25 level 5 item 0</p>
-              <p class="filler">section 25 level 5 item 1</p>
-              <p class="filler">section 25 level 5 item 2</p>
-              <p class="filler">section 25 level 5 item 3</p>
-              <div class="level-6">
-                <p class="filler">section 25 level 6 item 0</p>
-                <p class="filler">section 25 level 6 item 1</p>
-                <p class="filler">section 25 level 6 item 2</p>
-                <p class="filler">section 25 level 6 item 3</p>
-                <div class="level-7">
-                  <p class="filler">section 25 level 7 item 0</p>
-                  <p class="filler">section 25 level 7 item 1</p>
-                  <p class="filler">section 25 level 7 item 2</p>
-                  <p class="filler">section 25 level 7 item 3</p>
-                  <div class="level-8">
-                    <p class="filler">section 25 level 8 item 0</p>
-                    <p class="filler">section 25 level 8 item 1</p>
-                    <p class="filler">section 25 level 8 item 2</p>
-                    <p class="filler">section 25 level 8 item 3</p>
-                    <div class="level-9">
-                      <p class="filler">section 25 level 9 item 0</p>
-                      <p class="filler">section 25 level 9 item 1</p>
-                      <p class="filler">section 25 level 9 item 2</p>
-                      <p class="filler">section 25 level 9 item 3</p>
-                      <div class="level-10">
-                        <p class="filler">section 25 level 10 item 0</p>
-                        <p class="filler">section 25 level 10 item 1</p>
-                        <p class="filler">section 25 level 10 item 2</p>
-                        <p class="filler">section 25 level 10 item 3</p>
-                        <span class="leaf">original</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <section id="section-26">
-    <div class="level-1">
-      <p class="filler">section 26 level 1 item 0</p>
-      <p class="filler">section 26 level 1 item 1</p>
-      <p class="filler">section 26 level 1 item 2</p>
-      <p class="filler">section 26 level 1 item 3</p>
-      <div class="level-2">
-        <p class="filler">section 26 level 2 item 0</p>
-        <p class="filler">section 26 level 2 item 1</p>
-        <p class="filler">section 26 level 2 item 2</p>
-        <p class="filler">section 26 level 2 item 3</p>
-        <div class="level-3">
-          <p class="filler">section 26 level 3 item 0</p>
-          <p class="filler">section 26 level 3 item 1</p>
-          <p class="filler">section 26 level 3 item 2</p>
-          <p class="filler">section 26 level 3 item 3</p>
-          <div class="level-4">
-            <p class="filler">section 26 level 4 item 0</p>
-            <p class="filler">section 26 level 4 item 1</p>
-            <p class="filler">section 26 level 4 item 2</p>
-            <p class="filler">section 26 level 4 item 3</p>
-            <div class="level-5">
-              <p class="filler">section 26 level 5 item 0</p>
-              <p class="filler">section 26 level 5 item 1</p>
-              <p class="filler">section 26 level 5 item 2</p>
-              <p class="filler">section 26 level 5 item 3</p>
-              <div class="level-6">
-                <p class="filler">section 26 level 6 item 0</p>
-                <p class="filler">section 26 level 6 item 1</p>
-                <p class="filler">section 26 level 6 item 2</p>
-                <p class="filler">section 26 level 6 item 3</p>
-                <div class="level-7">
-                  <p class="filler">section 26 level 7 item 0</p>
-                  <p class="filler">section 26 level 7 item 1</p>
-                  <p class="filler">section 26 level 7 item 2</p>
-                  <p class="filler">section 26 level 7 item 3</p>
-                  <div class="level-8">
-                    <p class="filler">section 26 level 8 item 0</p>
-                    <p class="filler">section 26 level 8 item 1</p>
-                    <p class="filler">section 26 level 8 item 2</p>
-                    <p class="filler">section 26 level 8 item 3</p>
-                    <div class="level-9">
-                      <p class="filler">section 26 level 9 item 0</p>
-                      <p class="filler">section 26 level 9 item 1</p>
-                      <p class="filler">section 26 level 9 item 2</p>
-                      <p class="filler">section 26 level 9 item 3</p>
-                      <div class="level-10">
-                        <p class="filler">section 26 level 10 item 0</p>
-                        <p class="filler">section 26 level 10 item 1</p>
-                        <p class="filler">section 26 level 10 item 2</p>
-                        <p class="filler">section 26 level 10 item 3</p>
-                        <span class="leaf">original</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <section id="section-27">
-    <div class="level-1">
-      <p class="filler">section 27 level 1 item 0</p>
-      <p class="filler">section 27 level 1 item 1</p>
-      <p class="filler">section 27 level 1 item 2</p>
-      <p class="filler">section 27 level 1 item 3</p>
-      <div class="level-2">
-        <p class="filler">section 27 level 2 item 0</p>
-        <p class="filler">section 27 level 2 item 1</p>
-        <p class="filler">section 27 level 2 item 2</p>
-        <p class="filler">section 27 level 2 item 3</p>
-        <div class="level-3">
-          <p class="filler">section 27 level 3 item 0</p>
-          <p class="filler">section 27 level 3 item 1</p>
-          <p class="filler">section 27 level 3 item 2</p>
-          <p class="filler">section 27 level 3 item 3</p>
-          <div class="level-4">
-            <p class="filler">section 27 level 4 item 0</p>
-            <p class="filler">section 27 level 4 item 1</p>
-            <p class="filler">section 27 level 4 item 2</p>
-            <p class="filler">section 27 level 4 item 3</p>
-            <div class="level-5">
-              <p class="filler">section 27 level 5 item 0</p>
-              <p class="filler">section 27 level 5 item 1</p>
-              <p class="filler">section 27 level 5 item 2</p>
-              <p class="filler">section 27 level 5 item 3</p>
-              <div class="level-6">
-                <p class="filler">section 27 level 6 item 0</p>
-                <p class="filler">section 27 level 6 item 1</p>
-                <p class="filler">section 27 level 6 item 2</p>
-                <p class="filler">section 27 level 6 item 3</p>
-                <div class="level-7">
-                  <p class="filler">section 27 level 7 item 0</p>
-                  <p class="filler">section 27 level 7 item 1</p>
-                  <p class="filler">section 27 level 7 item 2</p>
-                  <p class="filler">section 27 level 7 item 3</p>
-                  <div class="level-8">
-                    <p class="filler">section 27 level 8 item 0</p>
-                    <p class="filler">section 27 level 8 item 1</p>
-                    <p class="filler">section 27 level 8 item 2</p>
-                    <p class="filler">section 27 level 8 item 3</p>
-                    <div class="level-9">
-                      <p class="filler">section 27 level 9 item 0</p>
-                      <p class="filler">section 27 level 9 item 1</p>
-                      <p class="filler">section 27 level 9 item 2</p>
-                      <p class="filler">section 27 level 9 item 3</p>
-                      <div class="level-10">
-                        <p class="filler">section 27 level 10 item 0</p>
-                        <p class="filler">section 27 level 10 item 1</p>
-                        <p class="filler">section 27 level 10 item 2</p>
-                        <p class="filler">section 27 level 10 item 3</p>
-                        <span class="leaf">original</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <section id="section-28">
-    <div class="level-1">
-      <p class="filler">section 28 level 1 item 0</p>
-      <p class="filler">section 28 level 1 item 1</p>
-      <p class="filler">section 28 level 1 item 2</p>
-      <p class="filler">section 28 level 1 item 3</p>
-      <div class="level-2">
-        <p class="filler">section 28 level 2 item 0</p>
-        <p class="filler">section 28 level 2 item 1</p>
-        <p class="filler">section 28 level 2 item 2</p>
-        <p class="filler">section 28 level 2 item 3</p>
-        <div class="level-3">
-          <p class="filler">section 28 level 3 item 0</p>
-          <p class="filler">section 28 level 3 item 1</p>
-          <p class="filler">section 28 level 3 item 2</p>
-          <p class="filler">section 28 level 3 item 3</p>
-          <div class="level-4">
-            <p class="filler">section 28 level 4 item 0</p>
-            <p class="filler">section 28 level 4 item 1</p>
-            <p class="filler">section 28 level 4 item 2</p>
-            <p class="filler">section 28 level 4 item 3</p>
-            <div class="level-5">
-              <p class="filler">section 28 level 5 item 0</p>
-              <p class="filler">section 28 level 5 item 1</p>
-              <p class="filler">section 28 level 5 item 2</p>
-              <p class="filler">section 28 level 5 item 3</p>
-              <div class="level-6">
-                <p class="filler">section 28 level 6 item 0</p>
-                <p class="filler">section 28 level 6 item 1</p>
-                <p class="filler">section 28 level 6 item 2</p>
-                <p class="filler">section 28 level 6 item 3</p>
-                <div class="level-7">
-                  <p class="filler">section 28 level 7 item 0</p>
-                  <p class="filler">section 28 level 7 item 1</p>
-                  <p class="filler">section 28 level 7 item 2</p>
-                  <p class="filler">section 28 level 7 item 3</p>
-                  <div class="level-8">
-                    <p class="filler">section 28 level 8 item 0</p>
-                    <p class="filler">section 28 level 8 item 1</p>
-                    <p class="filler">section 28 level 8 item 2</p>
-                    <p class="filler">section 28 level 8 item 3</p>
-                    <div class="level-9">
-                      <p class="filler">section 28 level 9 item 0</p>
-                      <p class="filler">section 28 level 9 item 1</p>
-                      <p class="filler">section 28 level 9 item 2</p>
-                      <p class="filler">section 28 level 9 item 3</p>
-                      <div class="level-10">
-                        <p class="filler">section 28 level 10 item 0</p>
-                        <p class="filler">section 28 level 10 item 1</p>
-                        <p class="filler">section 28 level 10 item 2</p>
-                        <p class="filler">section 28 level 10 item 3</p>
-                        <span class="leaf">original</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <section id="section-29">
-    <div class="level-1">
-      <p class="filler">section 29 level 1 item 0</p>
-      <p class="filler">section 29 level 1 item 1</p>
-      <p class="filler">section 29 level 1 item 2</p>
-      <p class="filler">section 29 level 1 item 3</p>
-      <div class="level-2">
-        <p class="filler">section 29 level 2 item 0</p>
-        <p class="filler">section 29 level 2 item 1</p>
-        <p class="filler">section 29 level 2 item 2</p>
-        <p class="filler">section 29 level 2 item 3</p>
-        <div class="level-3">
-          <p class="filler">section 29 level 3 item 0</p>
-          <p class="filler">section 29 level 3 item 1</p>
-          <p class="filler">section 29 level 3 item 2</p>
-          <p class="filler">section 29 level 3 item 3</p>
-          <div class="level-4">
-            <p class="filler">section 29 level 4 item 0</p>
-            <p class="filler">section 29 level 4 item 1</p>
-            <p class="filler">section 29 level 4 item 2</p>
-            <p class="filler">section 29 level 4 item 3</p>
-            <div class="level-5">
-              <p class="filler">section 29 level 5 item 0</p>
-              <p class="filler">section 29 level 5 item 1</p>
-              <p class="filler">section 29 level 5 item 2</p>
-              <p class="filler">section 29 level 5 item 3</p>
-              <div class="level-6">
-                <p class="filler">section 29 level 6 item 0</p>
-                <p class="filler">section 29 level 6 item 1</p>
-                <p class="filler">section 29 level 6 item 2</p>
-                <p class="filler">section 29 level 6 item 3</p>
-                <div class="level-7">
-                  <p class="filler">section 29 level 7 item 0</p>
-                  <p class="filler">section 29 level 7 item 1</p>
-                  <p class="filler">section 29 level 7 item 2</p>
-                  <p class="filler">section 29 level 7 item 3</p>
-                  <div class="level-8">
-                    <p class="filler">section 29 level 8 item 0</p>
-                    <p class="filler">section 29 level 8 item 1</p>
-                    <p class="filler">section 29 level 8 item 2</p>
-                    <p class="filler">section 29 level 8 item 3</p>
-                    <div class="level-9">
-                      <p class="filler">section 29 level 9 item 0</p>
-                      <p class="filler">section 29 level 9 item 1</p>
-                      <p class="filler">section 29 level 9 item 2</p>
-                      <p class="filler">section 29 level 9 item 3</p>
-                      <div class="level-10">
-                        <p class="filler">section 29 level 10 item 0</p>
-                        <p class="filler">section 29 level 10 item 1</p>
-                        <p class="filler">section 29 level 10 item 2</p>
-                        <p class="filler">section 29 level 10 item 3</p>
-                        <span class="leaf">original</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <section id="section-30">
-    <div class="level-1">
-      <p class="filler">section 30 level 1 item 0</p>
-      <p class="filler">section 30 level 1 item 1</p>
-      <p class="filler">section 30 level 1 item 2</p>
-      <p class="filler">section 30 level 1 item 3</p>
-      <div class="level-2">
-        <p class="filler">section 30 level 2 item 0</p>
-        <p class="filler">section 30 level 2 item 1</p>
-        <p class="filler">section 30 level 2 item 2</p>
-        <p class="filler">section 30 level 2 item 3</p>
-        <div class="level-3">
-          <p class="filler">section 30 level 3 item 0</p>
-          <p class="filler">section 30 level 3 item 1</p>
-          <p class="filler">section 30 level 3 item 2</p>
-          <p class="filler">section 30 level 3 item 3</p>
-          <div class="level-4">
-            <p class="filler">section 30 level 4 item 0</p>
-            <p class="filler">section 30 level 4 item 1</p>
-            <p class="filler">section 30 level 4 item 2</p>
-            <p class="filler">section 30 level 4 item 3</p>
-            <div class="level-5">
-              <p class="filler">section 30 level 5 item 0</p>
-              <p class="filler">section 30 level 5 item 1</p>
-              <p class="filler">section 30 level 5 item 2</p>
-              <p class="filler">section 30 level 5 item 3</p>
-              <div class="level-6">
-                <p class="filler">section 30 level 6 item 0</p>
-                <p class="filler">section 30 level 6 item 1</p>
-                <p class="filler">section 30 level 6 item 2</p>
-                <p class="filler">section 30 level 6 item 3</p>
-                <div class="level-7">
-                  <p class="filler">section 30 level 7 item 0</p>
-                  <p class="filler">section 30 level 7 item 1</p>
-                  <p class="filler">section 30 level 7 item 2</p>
-                  <p class="filler">section 30 level 7 item 3</p>
-                  <div class="level-8">
-                    <p class="filler">section 30 level 8 item 0</p>
-                    <p class="filler">section 30 level 8 item 1</p>
-                    <p class="filler">section 30 level 8 item 2</p>
-                    <p class="filler">section 30 level 8 item 3</p>
-                    <div class="level-9">
-                      <p class="filler">section 30 level 9 item 0</p>
-                      <p class="filler">section 30 level 9 item 1</p>
-                      <p class="filler">section 30 level 9 item 2</p>
-                      <p class="filler">section 30 level 9 item 3</p>
-                      <div class="level-10">
-                        <p class="filler">section 30 level 10 item 0</p>
-                        <p class="filler">section 30 level 10 item 1</p>
-                        <p class="filler">section 30 level 10 item 2</p>
-                        <p class="filler">section 30 level 10 item 3</p>
-                        <span class="leaf">original</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <section id="section-31">
-    <div class="level-1">
-      <p class="filler">section 31 level 1 item 0</p>
-      <p class="filler">section 31 level 1 item 1</p>
-      <p class="filler">section 31 level 1 item 2</p>
-      <p class="filler">section 31 level 1 item 3</p>
-      <div class="level-2">
-        <p class="filler">section 31 level 2 item 0</p>
-        <p class="filler">section 31 level 2 item 1</p>
-        <p class="filler">section 31 level 2 item 2</p>
-        <p class="filler">section 31 level 2 item 3</p>
-        <div class="level-3">
-          <p class="filler">section 31 level 3 item 0</p>
-          <p class="filler">section 31 level 3 item 1</p>
-          <p class="filler">section 31 level 3 item 2</p>
-          <p class="filler">section 31 level 3 item 3</p>
-          <div class="level-4">
-            <p class="filler">section 31 level 4 item 0</p>
-            <p class="filler">section 31 level 4 item 1</p>
-            <p class="filler">section 31 level 4 item 2</p>
-            <p class="filler">section 31 level 4 item 3</p>
-            <div class="level-5">
-              <p class="filler">section 31 level 5 item 0</p>
-              <p class="filler">section 31 level 5 item 1</p>
-              <p class="filler">section 31 level 5 item 2</p>
-              <p class="filler">section 31 level 5 item 3</p>
-              <div class="level-6">
-                <p class="filler">section 31 level 6 item 0</p>
-                <p class="filler">section 31 level 6 item 1</p>
-                <p class="filler">section 31 level 6 item 2</p>
-                <p class="filler">section 31 level 6 item 3</p>
-                <div class="level-7">
-                  <p class="filler">section 31 level 7 item 0</p>
-                  <p class="filler">section 31 level 7 item 1</p>
-                  <p class="filler">section 31 level 7 item 2</p>
-                  <p class="filler">section 31 level 7 item 3</p>
-                  <div class="level-8">
-                    <p class="filler">section 31 level 8 item 0</p>
-                    <p class="filler">section 31 level 8 item 1</p>
-                    <p class="filler">section 31 level 8 item 2</p>
-                    <p class="filler">section 31 level 8 item 3</p>
-                    <div class="level-9">
-                      <p class="filler">section 31 level 9 item 0</p>
-                      <p class="filler">section 31 level 9 item 1</p>
-                      <p class="filler">section 31 level 9 item 2</p>
-                      <p class="filler">section 31 level 9 item 3</p>
-                      <div class="level-10">
-                        <p class="filler">section 31 level 10 item 0</p>
-                        <p class="filler">section 31 level 10 item 1</p>
-                        <p class="filler">section 31 level 10 item 2</p>
-                        <p class="filler">section 31 level 10 item 3</p>
-                        <span class="leaf">original</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <section id="section-32">
-    <div class="level-1">
-      <p class="filler">section 32 level 1 item 0</p>
-      <p class="filler">section 32 level 1 item 1</p>
-      <p class="filler">section 32 level 1 item 2</p>
-      <p class="filler">section 32 level 1 item 3</p>
-      <div class="level-2">
-        <p class="filler">section 32 level 2 item 0</p>
-        <p class="filler">section 32 level 2 item 1</p>
-        <p class="filler">section 32 level 2 item 2</p>
-        <p class="filler">section 32 level 2 item 3</p>
-        <div class="level-3">
-          <p class="filler">section 32 level 3 item 0</p>
-          <p class="filler">section 32 level 3 item 1</p>
-          <p class="filler">section 32 level 3 item 2</p>
-          <p class="filler">section 32 level 3 item 3</p>
-          <div class="level-4">
-            <p class="filler">section 32 level 4 item 0</p>
-            <p class="filler">section 32 level 4 item 1</p>
-            <p class="filler">section 32 level 4 item 2</p>
-            <p class="filler">section 32 level 4 item 3</p>
-            <div class="level-5">
-              <p class="filler">section 32 level 5 item 0</p>
-              <p class="filler">section 32 level 5 item 1</p>
-              <p class="filler">section 32 level 5 item 2</p>
-              <p class="filler">section 32 level 5 item 3</p>
-              <div class="level-6">
-                <p class="filler">section 32 level 6 item 0</p>
-                <p class="filler">section 32 level 6 item 1</p>
-                <p class="filler">section 32 level 6 item 2</p>
-                <p class="filler">section 32 level 6 item 3</p>
-                <div class="level-7">
-                  <p class="filler">section 32 level 7 item 0</p>
-                  <p class="filler">section 32 level 7 item 1</p>
-                  <p class="filler">section 32 level 7 item 2</p>
-                  <p class="filler">section 32 level 7 item 3</p>
-                  <div class="level-8">
-                    <p class="filler">section 32 level 8 item 0</p>
-                    <p class="filler">section 32 level 8 item 1</p>
-                    <p class="filler">section 32 level 8 item 2</p>
-                    <p class="filler">section 32 level 8 item 3</p>
-                    <div class="level-9">
-                      <p class="filler">section 32 level 9 item 0</p>
-                      <p class="filler">section 32 level 9 item 1</p>
-                      <p class="filler">section 32 level 9 item 2</p>
-                      <p class="filler">section 32 level 9 item 3</p>
-                      <div class="level-10">
-                        <p class="filler">section 32 level 10 item 0</p>
-                        <p class="filler">section 32 level 10 item 1</p>
-                        <p class="filler">section 32 level 10 item 2</p>
-                        <p class="filler">section 32 level 10 item 3</p>
-                        <span class="leaf">original</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <section id="section-33">
-    <div class="level-1">
-      <p class="filler">section 33 level 1 item 0</p>
-      <p class="filler">section 33 level 1 item 1</p>
-      <p class="filler">section 33 level 1 item 2</p>
-      <p class="filler">section 33 level 1 item 3</p>
-      <div class="level-2">
-        <p class="filler">section 33 level 2 item 0</p>
-        <p class="filler">section 33 level 2 item 1</p>
-        <p class="filler">section 33 level 2 item 2</p>
-        <p class="filler">section 33 level 2 item 3</p>
-        <div class="level-3">
-          <p class="filler">section 33 level 3 item 0</p>
-          <p class="filler">section 33 level 3 item 1</p>
-          <p class="filler">section 33 level 3 item 2</p>
-          <p class="filler">section 33 level 3 item 3</p>
-          <div class="level-4">
-            <p class="filler">section 33 level 4 item 0</p>
-            <p class="filler">section 33 level 4 item 1</p>
-            <p class="filler">section 33 level 4 item 2</p>
-            <p class="filler">section 33 level 4 item 3</p>
-            <div class="level-5">
-              <p class="filler">section 33 level 5 item 0</p>
-              <p class="filler">section 33 level 5 item 1</p>
-              <p class="filler">section 33 level 5 item 2</p>
-              <p class="filler">section 33 level 5 item 3</p>
-              <div class="level-6">
-                <p class="filler">section 33 level 6 item 0</p>
-                <p class="filler">section 33 level 6 item 1</p>
-                <p class="filler">section 33 level 6 item 2</p>
-                <p class="filler">section 33 level 6 item 3</p>
-                <div class="level-7">
-                  <p class="filler">section 33 level 7 item 0</p>
-                  <p class="filler">section 33 level 7 item 1</p>
-                  <p class="filler">section 33 level 7 item 2</p>
-                  <p class="filler">section 33 level 7 item 3</p>
-                  <div class="level-8">
-                    <p class="filler">section 33 level 8 item 0</p>
-                    <p class="filler">section 33 level 8 item 1</p>
-                    <p class="filler">section 33 level 8 item 2</p>
-                    <p class="filler">section 33 level 8 item 3</p>
-                    <div class="level-9">
-                      <p class="filler">section 33 level 9 item 0</p>
-                      <p class="filler">section 33 level 9 item 1</p>
-                      <p class="filler">section 33 level 9 item 2</p>
-                      <p class="filler">section 33 level 9 item 3</p>
-                      <div class="level-10">
-                        <p class="filler">section 33 level 10 item 0</p>
-                        <p class="filler">section 33 level 10 item 1</p>
-                        <p class="filler">section 33 level 10 item 2</p>
-                        <p class="filler">section 33 level 10 item 3</p>
-                        <span class="leaf">original</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <section id="section-34">
-    <div class="level-1">
-      <p class="filler">section 34 level 1 item 0</p>
-      <p class="filler">section 34 level 1 item 1</p>
-      <p class="filler">section 34 level 1 item 2</p>
-      <p class="filler">section 34 level 1 item 3</p>
-      <div class="level-2">
-        <p class="filler">section 34 level 2 item 0</p>
-        <p class="filler">section 34 level 2 item 1</p>
-        <p class="filler">section 34 level 2 item 2</p>
-        <p class="filler">section 34 level 2 item 3</p>
-        <div class="level-3">
-          <p class="filler">section 34 level 3 item 0</p>
-          <p class="filler">section 34 level 3 item 1</p>
-          <p class="filler">section 34 level 3 item 2</p>
-          <p class="filler">section 34 level 3 item 3</p>
-          <div class="level-4">
-            <p class="filler">section 34 level 4 item 0</p>
-            <p class="filler">section 34 level 4 item 1</p>
-            <p class="filler">section 34 level 4 item 2</p>
-            <p class="filler">section 34 level 4 item 3</p>
-            <div class="level-5">
-              <p class="filler">section 34 level 5 item 0</p>
-              <p class="filler">section 34 level 5 item 1</p>
-              <p class="filler">section 34 level 5 item 2</p>
-              <p class="filler">section 34 level 5 item 3</p>
-              <div class="level-6">
-                <p class="filler">section 34 level 6 item 0</p>
-                <p class="filler">section 34 level 6 item 1</p>
-                <p class="filler">section 34 level 6 item 2</p>
-                <p class="filler">section 34 level 6 item 3</p>
-                <div class="level-7">
-                  <p class="filler">section 34 level 7 item 0</p>
-                  <p class="filler">section 34 level 7 item 1</p>
-                  <p class="filler">section 34 level 7 item 2</p>
-                  <p class="filler">section 34 level 7 item 3</p>
-                  <div class="level-8">
-                    <p class="filler">section 34 level 8 item 0</p>
-                    <p class="filler">section 34 level 8 item 1</p>
-                    <p class="filler">section 34 level 8 item 2</p>
-                    <p class="filler">section 34 level 8 item 3</p>
-                    <div class="level-9">
-                      <p class="filler">section 34 level 9 item 0</p>
-                      <p class="filler">section 34 level 9 item 1</p>
-                      <p class="filler">section 34 level 9 item 2</p>
-                      <p class="filler">section 34 level 9 item 3</p>
-                      <div class="level-10">
-                        <p class="filler">section 34 level 10 item 0</p>
-                        <p class="filler">section 34 level 10 item 1</p>
-                        <p class="filler">section 34 level 10 item 2</p>
-                        <p class="filler">section 34 level 10 item 3</p>
-                        <span class="leaf">original</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <section id="section-35">
-    <div class="level-1">
-      <p class="filler">section 35 level 1 item 0</p>
-      <p class="filler">section 35 level 1 item 1</p>
-      <p class="filler">section 35 level 1 item 2</p>
-      <p class="filler">section 35 level 1 item 3</p>
-      <div class="level-2">
-        <p class="filler">section 35 level 2 item 0</p>
-        <p class="filler">section 35 level 2 item 1</p>
-        <p class="filler">section 35 level 2 item 2</p>
-        <p class="filler">section 35 level 2 item 3</p>
-        <div class="level-3">
-          <p class="filler">section 35 level 3 item 0</p>
-          <p class="filler">section 35 level 3 item 1</p>
-          <p class="filler">section 35 level 3 item 2</p>
-          <p class="filler">section 35 level 3 item 3</p>
-          <div class="level-4">
-            <p class="filler">section 35 level 4 item 0</p>
-            <p class="filler">section 35 level 4 item 1</p>
-            <p class="filler">section 35 level 4 item 2</p>
-            <p class="filler">section 35 level 4 item 3</p>
-            <div class="level-5">
-              <p class="filler">section 35 level 5 item 0</p>
-              <p class="filler">section 35 level 5 item 1</p>
-              <p class="filler">section 35 level 5 item 2</p>
-              <p class="filler">section 35 level 5 item 3</p>
-              <div class="level-6">
-                <p class="filler">section 35 level 6 item 0</p>
-                <p class="filler">section 35 level 6 item 1</p>
-                <p class="filler">section 35 level 6 item 2</p>
-                <p class="filler">section 35 level 6 item 3</p>
-                <div class="level-7">
-                  <p class="filler">section 35 level 7 item 0</p>
-                  <p class="filler">section 35 level 7 item 1</p>
-                  <p class="filler">section 35 level 7 item 2</p>
-                  <p class="filler">section 35 level 7 item 3</p>
-                  <div class="level-8">
-                    <p class="filler">section 35 level 8 item 0</p>
-                    <p class="filler">section 35 level 8 item 1</p>
-                    <p class="filler">section 35 level 8 item 2</p>
-                    <p class="filler">section 35 level 8 item 3</p>
-                    <div class="level-9">
-                      <p class="filler">section 35 level 9 item 0</p>
-                      <p class="filler">section 35 level 9 item 1</p>
-                      <p class="filler">section 35 level 9 item 2</p>
-                      <p class="filler">section 35 level 9 item 3</p>
-                      <div class="level-10">
-                        <p class="filler">section 35 level 10 item 0</p>
-                        <p class="filler">section 35 level 10 item 1</p>
-                        <p class="filler">section 35 level 10 item 2</p>
-                        <p class="filler">section 35 level 10 item 3</p>
-                        <span class="leaf">original</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <section id="section-36">
-    <div class="level-1">
-      <p class="filler">section 36 level 1 item 0</p>
-      <p class="filler">section 36 level 1 item 1</p>
-      <p class="filler">section 36 level 1 item 2</p>
-      <p class="filler">section 36 level 1 item 3</p>
-      <div class="level-2">
-        <p class="filler">section 36 level 2 item 0</p>
-        <p class="filler">section 36 level 2 item 1</p>
-        <p class="filler">section 36 level 2 item 2</p>
-        <p class="filler">section 36 level 2 item 3</p>
-        <div class="level-3">
-          <p class="filler">section 36 level 3 item 0</p>
-          <p class="filler">section 36 level 3 item 1</p>
-          <p class="filler">section 36 level 3 item 2</p>
-          <p class="filler">section 36 level 3 item 3</p>
-          <div class="level-4">
-            <p class="filler">section 36 level 4 item 0</p>
-            <p class="filler">section 36 level 4 item 1</p>
-            <p class="filler">section 36 level 4 item 2</p>
-            <p class="filler">section 36 level 4 item 3</p>
-            <div class="level-5">
-              <p class="filler">section 36 level 5 item 0</p>
-              <p class="filler">section 36 level 5 item 1</p>
-              <p class="filler">section 36 level 5 item 2</p>
-              <p class="filler">section 36 level 5 item 3</p>
-              <div class="level-6">
-                <p class="filler">section 36 level 6 item 0</p>
-                <p class="filler">section 36 level 6 item 1</p>
-                <p class="filler">section 36 level 6 item 2</p>
-                <p class="filler">section 36 level 6 item 3</p>
-                <div class="level-7">
-                  <p class="filler">section 36 level 7 item 0</p>
-                  <p class="filler">section 36 level 7 item 1</p>
-                  <p class="filler">section 36 level 7 item 2</p>
-                  <p class="filler">section 36 level 7 item 3</p>
-                  <div class="level-8">
-                    <p class="filler">section 36 level 8 item 0</p>
-                    <p class="filler">section 36 level 8 item 1</p>
-                    <p class="filler">section 36 level 8 item 2</p>
-                    <p class="filler">section 36 level 8 item 3</p>
-                    <div class="level-9">
-                      <p class="filler">section 36 level 9 item 0</p>
-                      <p class="filler">section 36 level 9 item 1</p>
-                      <p class="filler">section 36 level 9 item 2</p>
-                      <p class="filler">section 36 level 9 item 3</p>
-                      <div class="level-10">
-                        <p class="filler">section 36 level 10 item 0</p>
-                        <p class="filler">section 36 level 10 item 1</p>
-                        <p class="filler">section 36 level 10 item 2</p>
-                        <p class="filler">section 36 level 10 item 3</p>
-                        <span class="leaf">original</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <section id="section-37">
-    <div class="level-1">
-      <p class="filler">section 37 level 1 item 0</p>
-      <p class="filler">section 37 level 1 item 1</p>
-      <p class="filler">section 37 level 1 item 2</p>
-      <p class="filler">section 37 level 1 item 3</p>
-      <div class="level-2">
-        <p class="filler">section 37 level 2 item 0</p>
-        <p class="filler">section 37 level 2 item 1</p>
-        <p class="filler">section 37 level 2 item 2</p>
-        <p class="filler">section 37 level 2 item 3</p>
-        <div class="level-3">
-          <p class="filler">section 37 level 3 item 0</p>
-          <p class="filler">section 37 level 3 item 1</p>
-          <p class="filler">section 37 level 3 item 2</p>
-          <p class="filler">section 37 level 3 item 3</p>
-          <div class="level-4">
-            <p class="filler">section 37 level 4 item 0</p>
-            <p class="filler">section 37 level 4 item 1</p>
-            <p class="filler">section 37 level 4 item 2</p>
-            <p class="filler">section 37 level 4 item 3</p>
-            <div class="level-5">
-              <p class="filler">section 37 level 5 item 0</p>
-              <p class="filler">section 37 level 5 item 1</p>
-              <p class="filler">section 37 level 5 item 2</p>
-              <p class="filler">section 37 level 5 item 3</p>
-              <div class="level-6">
-                <p class="filler">section 37 level 6 item 0</p>
-                <p class="filler">section 37 level 6 item 1</p>
-                <p class="filler">section 37 level 6 item 2</p>
-                <p class="filler">section 37 level 6 item 3</p>
-                <div class="level-7">
-                  <p class="filler">section 37 level 7 item 0</p>
-                  <p class="filler">section 37 level 7 item 1</p>
-                  <p class="filler">section 37 level 7 item 2</p>
-                  <p class="filler">section 37 level 7 item 3</p>
-                  <div class="level-8">
-                    <p class="filler">section 37 level 8 item 0</p>
-                    <p class="filler">section 37 level 8 item 1</p>
-                    <p class="filler">section 37 level 8 item 2</p>
-                    <p class="filler">section 37 level 8 item 3</p>
-                    <div class="level-9">
-                      <p class="filler">section 37 level 9 item 0</p>
-                      <p class="filler">section 37 level 9 item 1</p>
-                      <p class="filler">section 37 level 9 item 2</p>
-                      <p class="filler">section 37 level 9 item 3</p>
-                      <div class="level-10">
-                        <p class="filler">section 37 level 10 item 0</p>
-                        <p class="filler">section 37 level 10 item 1</p>
-                        <p class="filler">section 37 level 10 item 2</p>
-                        <p class="filler">section 37 level 10 item 3</p>
-                        <span class="leaf">original</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <section id="section-38">
-    <div class="level-1">
-      <p class="filler">section 38 level 1 item 0</p>
-      <p class="filler">section 38 level 1 item 1</p>
-      <p class="filler">section 38 level 1 item 2</p>
-      <p class="filler">section 38 level 1 item 3</p>
-      <div class="level-2">
-        <p class="filler">section 38 level 2 item 0</p>
-        <p class="filler">section 38 level 2 item 1</p>
-        <p class="filler">section 38 level 2 item 2</p>
-        <p class="filler">section 38 level 2 item 3</p>
-        <div class="level-3">
-          <p class="filler">section 38 level 3 item 0</p>
-          <p class="filler">section 38 level 3 item 1</p>
-          <p class="filler">section 38 level 3 item 2</p>
-          <p class="filler">section 38 level 3 item 3</p>
-          <div class="level-4">
-            <p class="filler">section 38 level 4 item 0</p>
-            <p class="filler">section 38 level 4 item 1</p>
-            <p class="filler">section 38 level 4 item 2</p>
-            <p class="filler">section 38 level 4 item 3</p>
-            <div class="level-5">
-              <p class="filler">section 38 level 5 item 0</p>
-              <p class="filler">section 38 level 5 item 1</p>
-              <p class="filler">section 38 level 5 item 2</p>
-              <p class="filler">section 38 level 5 item 3</p>
-              <div class="level-6">
-                <p class="filler">section 38 level 6 item 0</p>
-                <p class="filler">section 38 level 6 item 1</p>
-                <p class="filler">section 38 level 6 item 2</p>
-                <p class="filler">section 38 level 6 item 3</p>
-                <div class="level-7">
-                  <p class="filler">section 38 level 7 item 0</p>
-                  <p class="filler">section 38 level 7 item 1</p>
-                  <p class="filler">section 38 level 7 item 2</p>
-                  <p class="filler">section 38 level 7 item 3</p>
-                  <div class="level-8">
-                    <p class="filler">section 38 level 8 item 0</p>
-                    <p class="filler">section 38 level 8 item 1</p>
-                    <p class="filler">section 38 level 8 item 2</p>
-                    <p class="filler">section 38 level 8 item 3</p>
-                    <div class="level-9">
-                      <p class="filler">section 38 level 9 item 0</p>
-                      <p class="filler">section 38 level 9 item 1</p>
-                      <p class="filler">section 38 level 9 item 2</p>
-                      <p class="filler">section 38 level 9 item 3</p>
-                      <div class="level-10">
-                        <p class="filler">section 38 level 10 item 0</p>
-                        <p class="filler">section 38 level 10 item 1</p>
-                        <p class="filler">section 38 level 10 item 2</p>
-                        <p class="filler">section 38 level 10 item 3</p>
-                        <span class="leaf">original</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <section id="section-39">
-    <div class="level-1">
-      <p class="filler">section 39 level 1 item 0</p>
-      <p class="filler">section 39 level 1 item 1</p>
-      <p class="filler">section 39 level 1 item 2</p>
-      <p class="filler">section 39 level 1 item 3</p>
-      <div class="level-2">
-        <p class="filler">section 39 level 2 item 0</p>
-        <p class="filler">section 39 level 2 item 1</p>
-        <p class="filler">section 39 level 2 item 2</p>
-        <p class="filler">section 39 level 2 item 3</p>
-        <div class="level-3">
-          <p class="filler">section 39 level 3 item 0</p>
-          <p class="filler">section 39 level 3 item 1</p>
-          <p class="filler">section 39 level 3 item 2</p>
-          <p class="filler">section 39 level 3 item 3</p>
-          <div class="level-4">
-            <p class="filler">section 39 level 4 item 0</p>
-            <p class="filler">section 39 level 4 item 1</p>
-            <p class="filler">section 39 level 4 item 2</p>
-            <p class="filler">section 39 level 4 item 3</p>
-            <div class="level-5">
-              <p class="filler">section 39 level 5 item 0</p>
-              <p class="filler">section 39 level 5 item 1</p>
-              <p class="filler">section 39 level 5 item 2</p>
-              <p class="filler">section 39 level 5 item 3</p>
-              <div class="level-6">
-                <p class="filler">section 39 level 6 item 0</p>
-                <p class="filler">section 39 level 6 item 1</p>
-                <p class="filler">section 39 level 6 item 2</p>
-                <p class="filler">section 39 level 6 item 3</p>
-                <div class="level-7">
-                  <p class="filler">section 39 level 7 item 0</p>
-                  <p class="filler">section 39 level 7 item 1</p>
-                  <p class="filler">section 39 level 7 item 2</p>
-                  <p class="filler">section 39 level 7 item 3</p>
-                  <div class="level-8">
-                    <p class="filler">section 39 level 8 item 0</p>
-                    <p class="filler">section 39 level 8 item 1</p>
-                    <p class="filler">section 39 level 8 item 2</p>
-                    <p class="filler">section 39 level 8 item 3</p>
-                    <div class="level-9">
-                      <p class="filler">section 39 level 9 item 0</p>
-                      <p class="filler">section 39 level 9 item 1</p>
-                      <p class="filler">section 39 level 9 item 2</p>
-                      <p class="filler">section 39 level 9 item 3</p>
-                      <div class="level-10">
-                        <p class="filler">section 39 level 10 item 0</p>
-                        <p class="filler">section 39 level 10 item 1</p>
-                        <p class="filler">section 39 level 10 item 2</p>
-                        <p class="filler">section 39 level 10 item 3</p>
+                        <p class="filler">s19d10i0</p>
+                        <p class="filler">s19d10i1</p>
                         <span class="leaf">original</span>
                       </div>
                     </div>
diff --git a/perf/generate-deep-last-leaf.js b/perf/generate-deep-last-leaf.js
index 668be8f..38d126e 100644
--- a/perf/generate-deep-last-leaf.js
+++ b/perf/generate-deep-last-leaf.js
@@ -4,15 +4,14 @@
 const fs = require("fs");
 const path = require("path");
 
-const SECTIONS = 40;
+const SECTIONS = 20;
 const DEPTH = 10;
-const FILLERS_PER_LEVEL = 4;
+const FILLERS_PER_LEVEL = 2;
 
 function level(section, depth, changed) {
   const fillers = Array.from(
     { length: FILLERS_PER_LEVEL },
-    (_, i) =>
-      `<p class="filler">section ${section} level ${depth} item ${i}</p>`,
+    (_, i) => `<p class="filler">s${section}d${depth}i${i}</p>`,
   ).join("");
   if (depth === DEPTH) {
     const leaf = changed ? "changed" : "original";

From abe63ef565a6cb1abd977fc81ddb3bf6a32bff69 Mon Sep 17 00:00:00 2001
From: Alexander Brandon Coles <a.coles@openproject.com>
Date: Tue, 25 Aug 2026 21:00:31 -0800
Subject: [PATCH 07/12] add backlogs perf benchmark from a real page morph

Trimmed from a real OpenProject backlogs_container capture (a
Backlog/Foobar list plus one Sprint list). "new" is the same tree
with one work-package card moved between lists, synthesised rather
than a server re-render, so most of the tree is unchanged.
---
 perf/benchmarks/backlogs.new.html | 947 ++++++++++++++++++++++++++++++
 perf/benchmarks/backlogs.old.html | 947 ++++++++++++++++++++++++++++++
 2 files changed, 1894 insertions(+)
 create mode 100644 perf/benchmarks/backlogs.new.html
 create mode 100644 perf/benchmarks/backlogs.old.html

diff --git a/perf/benchmarks/backlogs.new.html b/perf/benchmarks/backlogs.new.html
new file mode 100644
index 0000000..2acdf31
--- /dev/null
+++ b/perf/benchmarks/backlogs.new.html
@@ -0,0 +1,947 @@
+<!-- Trimmed from a real OpenProject backlogs_container render; new = old with one card moved between lists (synthesised, not a server re-render). Session tokens scrubbed. -->
+<turbo-frame id="backlogs_container">
+  <div class="op-sprint-planning-container">
+    <div
+      id="owner_backlogs_container"
+      class="op-sprint-planning-lists"
+      data-controller="sortable-lists--scrollable"
+    >
+      <turbo-frame
+        id="backlogs-backlog-component-21"
+        refresh="morph"
+        style="display: contents"
+      >
+        <div
+          data-view-component="true"
+          class="Subhead border-bottom-0 pb-0 tmp-pb-0 mb-0 tmp-mb-0"
+        >
+          <h3
+            data-view-component="true"
+            class="gap-2 Subhead-heading Subhead-heading--medium text-bold d-inline-flex flex-items-center"
+          >
+            Backlog<span
+              title="283"
+              data-view-component="true"
+              class="Counter Counter--primary"
+              >283</span
+            >
+          </h3>
+        </div>
+
+        <div
+          data-view-component="true"
+          class="flex-justify-between flex-items-center d-flex flex-row"
+        >
+          <div data-view-component="true">
+            <form
+              id="backlog_bucket-clear-form"
+              data-turbo-frame="backlogs_container"
+              data-turbo-action="advance"
+              action="/projects/MYPN2/backlogs/backlog"
+              accept-charset="UTF-8"
+              method="get"
+            ></form>
+            <form
+              data-turbo-frame="backlogs_container"
+              data-turbo-action="advance"
+              action="/projects/MYPN2/backlogs/backlog"
+              accept-charset="UTF-8"
+              method="get"
+            ></form>
+          </div>
+          <div data-view-component="true">
+            <a
+              href="/projects/MYPN2/backlogs/buckets/new_dialog"
+              aria-label="New backlog bucket"
+              data-controller="async-dialog"
+              data-test-selector="op-backlog-buckets--new-backlog-bucket-button"
+              data-view-component="true"
+              class="Button--secondary Button--medium Button"
+            >
+              <span class="Button-content">
+                <span class="Button-visual Button-leadingVisual">
+                  <svg
+                    aria-hidden="true"
+                    data-component="Octicon"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    version="1.1"
+                    width="16"
+                    data-view-component="true"
+                    class="octicon octicon-plus"
+                  >
+                    <path
+                      d="M7.75 2a.75.75 0 0 1 .75.75V7h4.25a.75.75 0 0 1 0 1.5H8.5v4.25a.75.75 0 0 1-1.5 0V8.5H2.75a.75.75 0 0 1 0-1.5H7V2.75A.75.75 0 0 1 7.75 2"
+                    ></path>
+                  </svg>
+                </span>
+                <span class="Button-label">Backlog bucket</span>
+              </span>
+            </a>
+          </div>
+        </div>
+
+        <section id="backlogs-bucket-component-7">
+          <div data-controller="border-box-list" data-view-component="true">
+            <div
+              data-controller="sortable-lists--list"
+              data-sortable-lists--list-type-value="backlog_bucket"
+              data-sortable-lists--list-accepted-type-value="work_package"
+              data-sortable-lists--list-id-value="7"
+              data-sortable-lists--list-drop-position-value="start"
+              data-sortable-lists--list-name-value="Foobar"
+              data-test-selector="backlog-bucket-7"
+              id="backlog_bucket_7"
+              data-view-component="true"
+              class="Box Box--condensed op-border-box-list op-border-box-list_transparent op-border-box-list_header-padding-condensed"
+            >
+              <div
+                id="backlog_bucket_7_header"
+                data-view-component="true"
+                class="Box-header"
+              >
+                <div
+                  data-view-component="true"
+                  class="op-border-box-list-header"
+                >
+                  <div
+                    style="grid-area: heading"
+                    data-view-component="true"
+                    class="op-border-box-list-header--heading"
+                  >
+                    <div
+                      data-view-component="true"
+                      class="op-border-box-list-header--heading-line"
+                    >
+                      <h4
+                        data-view-component="true"
+                        class="Truncate Box-title f4"
+                      >
+                        <span data-view-component="true" class="Truncate-text">
+                          Foobar
+                        </span>
+                      </h4>
+                      <span
+                        aria-label="2 work packages"
+                        aria-live="polite"
+                        title="2"
+                        data-view-component="true"
+                        class="Counter Counter--secondary"
+                        >2</span
+                      >
+                    </div>
+                  </div>
+                  <div
+                    style="grid-area: menu"
+                    data-view-component="true"
+                    class="op-border-box-list-header--menu"
+                  ></div>
+                </div>
+              </div>
+
+              <ul
+                id="backlog_bucket_7_list"
+                data-border-box-list-target="list"
+                aria-labelledby="backlog_bucket_7_header"
+                data-view-component="true"
+                class="Box-list"
+              >
+                <li
+                  id="work_package_100"
+                  data-controller="sortable-lists--item"
+                  data-sortable-lists--item-id-value="100"
+                  data-sortable-lists--item-label-value="Feature: Story 0 (MYPN2-1)"
+                  data-sortable-lists--item-type-value="work_package"
+                  data-sortable-lists--item-confined-value="false"
+                  data-sortable-lists--item-external-url-value="http://localhost:3000/work_packages/MYPN2-1"
+                  data-test-selector="work-package-100"
+                  draggable="true"
+                  data-view-component="true"
+                  class="Box-row"
+                >
+                  <article
+                    tabindex="0"
+                    data-story="true"
+                    data-controller="backlogs--work-package contextual-action-menu"
+                    data-backlogs--work-package-id-value="100"
+                    data-backlogs--work-package-display-id-value="MYPN2-1"
+                    data-backlogs--work-package-split-url-value="/projects/MYPN2/backlogs/backlog/details/MYPN2-1"
+                    data-backlogs--work-package-full-url-value="/work_packages/MYPN2-1"
+                    data-sortable-lists--item-target="preview handle"
+                    aria-keyshortcuts="Enter Shift+F10"
+                    aria-label="Feature: Story 0 (MYPN2-1)"
+                    data-view-component="true"
+                    class="Box-card Box-card--clickable Box-card--draggable op-work-package-card_with-menu op-work-package-card_with-metric op-work-package-card"
+                  >
+                    <div
+                      style="grid-area: info_line"
+                      data-view-component="true"
+                      class="op-work-package-card--info_line"
+                    >
+                      <div
+                        data-view-component="true"
+                        class="op-wp-info-line flex-nowrap flex-items-center overflow-hidden d-flex flex-row"
+                      >
+                        <div
+                          data-view-component="true"
+                          class="op-wp-info-line--type mr-2 tmp-mr-2"
+                        >
+                          <span
+                            data-view-component="true"
+                            class="__hl_inline_type_4 text-small"
+                            >FEATURE</span
+                          >
+                        </div>
+                        <div
+                          data-view-component="true"
+                          class="op-wp-info-line--id"
+                        >
+                          <a
+                            title="Story 0"
+                            href="/projects/MYPN2/work_packages/MYPN2-1"
+                            data-view-component="true"
+                            class="Link text-small color-fg-muted"
+                            >MYPN2-1</a
+                          >
+                        </div>
+                        <div
+                          data-view-component="true"
+                          class="op-wp-info-line--status ml-2 tmp-ml-2"
+                        >
+                          <span
+                            data-view-component="true"
+                            class="Label op-status-badge Label--secondary Label--inline"
+                          >
+                            <span
+                              data-view-component="true"
+                              class="op-status-badge--name"
+                              >New</span
+                            ></span
+                          >
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      style="grid-area: actions"
+                      data-view-component="true"
+                      class="op-work-package-card--actions"
+                    >
+                      <span class="op-work-package-card--metric">
+                        <span
+                          data-view-component="true"
+                          class="color-fg-subtle position-relative"
+                        >
+                          <span aria-hidden="true">0</span>
+                          <span class="sr-only">0 story points</span>
+                        </span></span
+                      >
+
+                      <span
+                        data-view-component="true"
+                        class="op-work-package-card--priority __hl_inline_priority_8 __hl_inline__small_dot no-wrap"
+                      >
+                        <span class="op-work-package-card--priority-name"
+                          >Normal</span
+                        >
+                      </span>
+
+                      <action-menu
+                        data-select-variant="none"
+                        data-view-component="true"
+                        class="op-work-package-card--menu hide-when-print"
+                      >
+                        <button
+                          id="work_package_100_menu-button"
+                          popovertarget="work_package_100_menu-overlay"
+                          aria-controls="work_package_100_menu-list"
+                          aria-haspopup="true"
+                          aria-labelledby="tooltip-b83e2f5b-334f-4ac2-af6f-2be3783b6467"
+                          type="button"
+                          data-view-component="true"
+                          class="Button Button--iconOnly Button--invisible Button--medium"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            data-component="Octicon"
+                            height="16"
+                            viewBox="0 0 16 16"
+                            version="1.1"
+                            width="16"
+                            data-view-component="true"
+                            class="octicon octicon-kebab-horizontal Button-visual"
+                          >
+                            <path
+                              d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"
+                            ></path>
+                          </svg>
+                        </button>
+                      </action-menu>
+                    </div>
+                    <div
+                      style="grid-area: subject"
+                      data-view-component="true"
+                      class="op-work-package-card--subject"
+                    >
+                      <a
+                        draggable="false"
+                        href="/work_packages/MYPN2-1"
+                        data-view-component="true"
+                        class="Link text-semibold"
+                        >Story 0</a
+                      >
+                    </div>
+                  </article>
+                </li>
+              </ul>
+            </div>
+            <template data-border-box-list-target="emptyStateTemplate">
+              <li class="Box-row" data-empty-list-item="true">
+                <!-- BEGIN app/components/open_project/common/border_box_list_component/empty_state.html.erb
+-->
+                <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/box.rb --><!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                <div
+                  data-view-component="true"
+                  class="op-border-box-list-empty-state"
+                >
+                  <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/beta/blankslate.html.erb
+-->
+                  <div class="blankslate-container">
+                    <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                    <div
+                      role="status"
+                      aria-live="polite"
+                      data-view-component="true"
+                      class="blankslate"
+                    >
+                      <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/beta/heading.rb --><!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                      <h4 data-view-component="true" class="blankslate-heading">
+                        Backlog bucket is empty
+                      </h4>
+                      <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb --><!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/beta/heading.rb -->
+                      <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                      <p
+                        data-view-component="true"
+                        class="blankslate-description"
+                      >
+                        Drag items here to add them
+                      </p>
+                      <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                    </div>
+                    <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                  </div>
+                  <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/beta/blankslate.html.erb -->
+
+                  <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/box.rb --><!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                  <div
+                    aria-hidden="true"
+                    data-view-component="true"
+                    class="op-border-box-list-empty-state--drop-overlay"
+                  >
+                    <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/beta/text.rb --><!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                    <p data-view-component="true" class="color-fg-muted f4">
+                      Drop here to add this item
+                    </p>
+                    <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb --><!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/beta/text.rb -->
+                  </div>
+                  <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb --><!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/box.rb -->
+                </div>
+                <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb --><!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/box.rb --><!-- END app/components/open_project/common/border_box_list_component/empty_state.html.erb -->
+              </li>
+            </template>
+          </div>
+        </section>
+
+        <section id="backlogs-inbox-component-21"></section>
+      </turbo-frame>
+    </div>
+    <div
+      id="sprint_backlogs_container"
+      class="op-sprint-planning-lists"
+      data-controller="sortable-lists--scrollable"
+    >
+      <turbo-frame
+        id="backlogs-sprints-component-21"
+        refresh="morph"
+        style="display: contents"
+      >
+        <div
+          data-view-component="true"
+          class="Subhead border-bottom-0 pb-0 tmp-pb-0 mb-0 tmp-mb-0"
+        >
+          <h3
+            data-view-component="true"
+            class="gap-2 Subhead-heading Subhead-heading--medium text-bold d-inline-flex flex-items-center"
+          >
+            Sprints<span
+              data-test-selector="op-sprints--total-counter"
+              title="17"
+              data-view-component="true"
+              class="Counter Counter--primary"
+              >17</span
+            >
+          </h3>
+        </div>
+
+        <div
+          data-view-component="true"
+          class="flex-justify-between flex-items-center d-flex flex-row"
+        >
+          <div data-view-component="true">
+            <form
+              id="sprint-clear-form"
+              data-turbo-frame="backlogs_container"
+              data-turbo-action="advance"
+              action="/projects/MYPN2/backlogs/backlog"
+              accept-charset="UTF-8"
+              method="get"
+            ></form>
+            <form
+              data-turbo-frame="backlogs_container"
+              data-turbo-action="advance"
+              action="/projects/MYPN2/backlogs/backlog"
+              accept-charset="UTF-8"
+              method="get"
+            ></form>
+          </div>
+          <div data-view-component="true">
+            <a
+              href="/projects/MYPN2/backlogs/sprints/new_dialog"
+              aria-label="New sprint"
+              data-controller="async-dialog"
+              data-test-selector="op-sprints--new-sprint-button"
+              data-view-component="true"
+              class="Button--secondary Button--medium Button"
+            >
+              <span class="Button-content">
+                <span class="Button-visual Button-leadingVisual">
+                  <svg
+                    aria-hidden="true"
+                    data-component="Octicon"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    version="1.1"
+                    width="16"
+                    data-view-component="true"
+                    class="octicon octicon-plus"
+                  >
+                    <path
+                      d="M7.75 2a.75.75 0 0 1 .75.75V7h4.25a.75.75 0 0 1 0 1.5H8.5v4.25a.75.75 0 0 1-1.5 0V8.5H2.75a.75.75 0 0 1 0-1.5H7V2.75A.75.75 0 0 1 7.75 2"
+                    ></path>
+                  </svg>
+                </span>
+                <span class="Button-label">Sprint</span>
+              </span>
+            </a>
+          </div>
+        </div>
+
+        <section id="backlogs-sprint-component-18">
+          <div data-controller="border-box-list" data-view-component="true">
+            <div
+              data-controller="sortable-lists--list"
+              data-sortable-lists--list-type-value="sprint"
+              data-sortable-lists--list-accepted-type-value="work_package"
+              data-sortable-lists--list-id-value="18"
+              data-sortable-lists--list-drop-position-value="start"
+              data-sortable-lists--list-name-value="Sprint 1"
+              data-test-selector="sprint-18"
+              id="sprint_18"
+              data-view-component="true"
+              class="Box Box--condensed op-border-box-list op-border-box-list_transparent op-border-box-list_header-padding-condensed"
+            >
+              <div
+                id="sprint_18_header"
+                data-view-component="true"
+                class="Box-header"
+              >
+                <div
+                  data-view-component="true"
+                  class="op-border-box-list-header"
+                >
+                  <div
+                    style="grid-area: heading"
+                    data-view-component="true"
+                    class="op-border-box-list-header--heading"
+                  >
+                    <div
+                      data-view-component="true"
+                      class="op-border-box-list-header--heading-line"
+                    >
+                      <h4
+                        data-view-component="true"
+                        class="Truncate Box-title f4"
+                      >
+                        <span data-view-component="true" class="Truncate-text">
+                          Sprint 1
+                        </span>
+                      </h4>
+                      <span
+                        aria-label="8 work packages"
+                        aria-live="polite"
+                        title="8"
+                        data-view-component="true"
+                        class="Counter Counter--secondary"
+                        >8</span
+                      >
+                    </div>
+                  </div>
+                  <div
+                    style="grid-area: description"
+                    data-view-component="true"
+                    class="op-border-box-list-header--description"
+                  >
+                    <span
+                      data-view-component="true"
+                      class="row-gap-2 d-flex flex-column color-fg-muted"
+                    >
+                      <div
+                        data-justify="start"
+                        data-direction="horizontal"
+                        data-align="center"
+                        data-wrap="nowrap"
+                        data-padding="none"
+                        data-view-component="true"
+                        class="Stack"
+                      >
+                        <span
+                          data-view-component="true"
+                          class="Label text-bold color-bg-default"
+                          >In planning</span
+                        >
+
+                        <span
+                          aria-live="polite"
+                          data-view-component="true"
+                          class="velocity"
+                        >
+                          0&nbsp;points
+                        </span>
+                        <span
+                          role="group"
+                          data-view-component="true"
+                          class="ml-auto tmp-ml-auto mr-2 tmp-mr-2"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            data-component="Octicon"
+                            height="16"
+                            viewBox="0 0 16 16"
+                            version="1.1"
+                            width="16"
+                            data-view-component="true"
+                            class="octicon octicon-calendar mr-1 tmp-mr-1"
+                          >
+                            <path
+                              d="M4.75 0a.75.75 0 0 1 .75.75V2h5V.75a.75.75 0 0 1 1.5 0V2h1.25c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25V3.75C1 2.784 1.784 2 2.75 2H4V.75A.75.75 0 0 1 4.75 0M2.5 7.5v6.75c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V7.5Zm10.75-4H2.75a.25.25 0 0 0-.25.25V6h11V3.75a.25.25 0 0 0-.25-.25"
+                            ></path>
+                          </svg>
+                          <time datetime="2026-04-13">04/13/2026</time
+                          >&nbsp;–&nbsp;<time datetime="2026-04-27"
+                            >04/27/2026</time
+                          >
+                        </span>
+                      </div></span
+                    >
+                  </div>
+                  <div
+                    style="grid-area: actions"
+                    data-view-component="true"
+                    class="op-border-box-list-header--actions"
+                  >
+                    <a
+                      id="sprint_18_start_button"
+                      href="/projects/MYPN2/backlogs/sprints/18/start"
+                      data-turbo-method="post"
+                      data-view-component="true"
+                      class="Button--secondary Button--medium Button"
+                    >
+                      <span class="Button-content">
+                        <span class="Button-visual Button-leadingVisual">
+                          <svg
+                            aria-hidden="true"
+                            data-component="Octicon"
+                            height="16"
+                            viewBox="0 0 16 16"
+                            version="1.1"
+                            width="16"
+                            data-view-component="true"
+                            class="octicon octicon-rocket"
+                          >
+                            <path
+                              d="M14.064 0h.186C15.216 0 16 .784 16 1.75v.186a8.75 8.75 0 0 1-2.564 6.186l-.458.459q-.472.471-.979.904v3.207c0 .608-.315 1.172-.833 1.49l-2.774 1.707a.75.75 0 0 1-1.11-.418l-.954-3.102a1 1 0 0 1-.145-.125L3.754 9.816a1 1 0 0 1-.124-.145L.528 8.717a.75.75 0 0 1-.418-1.11l1.71-2.774A1.75 1.75 0 0 1 3.31 4h3.204q.433-.508.904-.979l.459-.458A8.75 8.75 0 0 1 14.064 0M8.938 3.623h-.002l-.458.458c-.76.76-1.437 1.598-2.02 2.5l-1.5 2.317 2.143 2.143 2.317-1.5c.902-.583 1.74-1.26 2.499-2.02l.459-.458a7.25 7.25 0 0 0 2.123-5.127V1.75a.25.25 0 0 0-.25-.25h-.186a7.25 7.25 0 0 0-5.125 2.123M3.56 14.56c-.732.732-2.334 1.045-3.005 1.148a.23.23 0 0 1-.201-.064.23.23 0 0 1-.064-.201c.103-.671.416-2.273 1.15-3.003a1.502 1.502 0 1 1 2.12 2.12m6.94-3.935q-.132.09-.266.175l-2.35 1.521.548 1.783 1.949-1.2a.25.25 0 0 0 .119-.213ZM3.678 8.116 5.2 5.766q.087-.135.176-.266H3.309a.25.25 0 0 0-.213.119l-1.2 1.95ZM12 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0"
+                            ></path>
+                          </svg>
+                        </span>
+                        <span class="Button-label">Start sprint</span>
+                      </span>
+                    </a>
+                  </div>
+                  <div
+                    style="grid-area: menu"
+                    data-view-component="true"
+                    class="op-border-box-list-header--menu"
+                  ></div>
+                </div>
+              </div>
+
+              <ul
+                id="sprint_18_list"
+                data-border-box-list-target="list"
+                aria-labelledby="sprint_18_header"
+                data-view-component="true"
+                class="Box-list"
+              >
+                <li
+                  id="work_package_104"
+                  data-controller="sortable-lists--item"
+                  data-sortable-lists--item-id-value="104"
+                  data-sortable-lists--item-label-value="Feature: Story 4 (MYPN2-5)"
+                  data-sortable-lists--item-type-value="work_package"
+                  data-sortable-lists--item-confined-value="false"
+                  data-sortable-lists--item-external-url-value="http://localhost:3000/work_packages/MYPN2-5"
+                  data-test-selector="work-package-104"
+                  draggable="true"
+                  data-view-component="true"
+                  class="Box-row"
+                >
+                  <article
+                    tabindex="0"
+                    data-story="true"
+                    data-controller="backlogs--work-package contextual-action-menu"
+                    data-backlogs--work-package-id-value="104"
+                    data-backlogs--work-package-display-id-value="MYPN2-5"
+                    data-backlogs--work-package-split-url-value="/projects/MYPN2/backlogs/backlog/details/MYPN2-5"
+                    data-backlogs--work-package-full-url-value="/work_packages/MYPN2-5"
+                    data-sortable-lists--item-target="preview handle"
+                    aria-keyshortcuts="Enter Shift+F10"
+                    aria-label="Feature: Story 4 (MYPN2-5)"
+                    data-view-component="true"
+                    class="Box-card Box-card--clickable Box-card--draggable op-work-package-card_with-menu op-work-package-card_with-metric op-work-package-card"
+                  >
+                    <div
+                      style="grid-area: info_line"
+                      data-view-component="true"
+                      class="op-work-package-card--info_line"
+                    >
+                      <div
+                        data-view-component="true"
+                        class="op-wp-info-line flex-nowrap flex-items-center overflow-hidden d-flex flex-row"
+                      >
+                        <div
+                          data-view-component="true"
+                          class="op-wp-info-line--type mr-2 tmp-mr-2"
+                        >
+                          <span
+                            data-view-component="true"
+                            class="__hl_inline_type_4 text-small"
+                            >FEATURE</span
+                          >
+                        </div>
+                        <div
+                          data-view-component="true"
+                          class="op-wp-info-line--id"
+                        >
+                          <a
+                            title="Story 4"
+                            href="/projects/MYPN2/work_packages/MYPN2-5"
+                            data-view-component="true"
+                            class="Link text-small color-fg-muted"
+                            >MYPN2-5</a
+                          >
+                        </div>
+                        <div
+                          data-view-component="true"
+                          class="op-wp-info-line--status ml-2 tmp-ml-2"
+                        >
+                          <span
+                            data-view-component="true"
+                            class="Label op-status-badge Label--secondary Label--inline"
+                          >
+                            <span
+                              data-view-component="true"
+                              class="op-status-badge--name"
+                              >New</span
+                            ></span
+                          >
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      style="grid-area: actions"
+                      data-view-component="true"
+                      class="op-work-package-card--actions"
+                    >
+                      <span class="op-work-package-card--metric">
+                        <span
+                          data-view-component="true"
+                          class="color-fg-subtle position-relative"
+                        >
+                          <span aria-hidden="true">0</span>
+                          <span class="sr-only">0 story points</span>
+                        </span></span
+                      >
+
+                      <span
+                        data-view-component="true"
+                        class="op-work-package-card--priority __hl_inline_priority_8 __hl_inline__small_dot no-wrap"
+                      >
+                        <span class="op-work-package-card--priority-name"
+                          >Normal</span
+                        >
+                      </span>
+
+                      <action-menu
+                        data-select-variant="none"
+                        data-view-component="true"
+                        class="op-work-package-card--menu hide-when-print"
+                      >
+                        <button
+                          id="work_package_104_menu-button"
+                          popovertarget="work_package_104_menu-overlay"
+                          aria-controls="work_package_104_menu-list"
+                          aria-haspopup="true"
+                          aria-labelledby="tooltip-6ed074da-2170-4618-ba12-470a1254cd16"
+                          type="button"
+                          data-view-component="true"
+                          class="Button Button--iconOnly Button--invisible Button--medium"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            data-component="Octicon"
+                            height="16"
+                            viewBox="0 0 16 16"
+                            version="1.1"
+                            width="16"
+                            data-view-component="true"
+                            class="octicon octicon-kebab-horizontal Button-visual"
+                          >
+                            <path
+                              d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"
+                            ></path>
+                          </svg>
+                        </button>
+                      </action-menu>
+                    </div>
+                    <div
+                      style="grid-area: subject"
+                      data-view-component="true"
+                      class="op-work-package-card--subject"
+                    >
+                      <a
+                        draggable="false"
+                        href="/work_packages/MYPN2-5"
+                        data-view-component="true"
+                        class="Link text-semibold"
+                        >Story 4</a
+                      >
+                    </div>
+                  </article>
+                </li>
+                <li
+                  id="work_package_105"
+                  data-controller="sortable-lists--item"
+                  data-sortable-lists--item-id-value="105"
+                  data-sortable-lists--item-label-value="Feature: Story 5 (MYPN2-6)"
+                  data-sortable-lists--item-type-value="work_package"
+                  data-sortable-lists--item-confined-value="false"
+                  data-sortable-lists--item-external-url-value="http://localhost:3000/work_packages/MYPN2-6"
+                  data-test-selector="work-package-105"
+                  draggable="true"
+                  data-view-component="true"
+                  class="Box-row"
+                >
+                  <article
+                    tabindex="0"
+                    data-story="true"
+                    data-controller="backlogs--work-package contextual-action-menu"
+                    data-backlogs--work-package-id-value="105"
+                    data-backlogs--work-package-display-id-value="MYPN2-6"
+                    data-backlogs--work-package-split-url-value="/projects/MYPN2/backlogs/backlog/details/MYPN2-6"
+                    data-backlogs--work-package-full-url-value="/work_packages/MYPN2-6"
+                    data-sortable-lists--item-target="preview handle"
+                    aria-keyshortcuts="Enter Shift+F10"
+                    aria-label="Feature: Story 5 (MYPN2-6)"
+                    data-view-component="true"
+                    class="Box-card Box-card--clickable Box-card--draggable op-work-package-card_with-menu op-work-package-card_with-metric op-work-package-card"
+                  >
+                    <div
+                      style="grid-area: info_line"
+                      data-view-component="true"
+                      class="op-work-package-card--info_line"
+                    >
+                      <div
+                        data-view-component="true"
+                        class="op-wp-info-line flex-nowrap flex-items-center overflow-hidden d-flex flex-row"
+                      >
+                        <div
+                          data-view-component="true"
+                          class="op-wp-info-line--type mr-2 tmp-mr-2"
+                        >
+                          <span
+                            data-view-component="true"
+                            class="__hl_inline_type_4 text-small"
+                            >FEATURE</span
+                          >
+                        </div>
+                        <div
+                          data-view-component="true"
+                          class="op-wp-info-line--id"
+                        >
+                          <a
+                            title="Story 5"
+                            href="/projects/MYPN2/work_packages/MYPN2-6"
+                            data-view-component="true"
+                            class="Link text-small color-fg-muted"
+                            >MYPN2-6</a
+                          >
+                        </div>
+                        <div
+                          data-view-component="true"
+                          class="op-wp-info-line--status ml-2 tmp-ml-2"
+                        >
+                          <span
+                            data-view-component="true"
+                            class="Label op-status-badge Label--secondary Label--inline"
+                          >
+                            <span
+                              data-view-component="true"
+                              class="op-status-badge--name"
+                              >New</span
+                            ></span
+                          >
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      style="grid-area: actions"
+                      data-view-component="true"
+                      class="op-work-package-card--actions"
+                    >
+                      <span class="op-work-package-card--metric">
+                        <span
+                          data-view-component="true"
+                          class="color-fg-subtle position-relative"
+                        >
+                          <span aria-hidden="true">0</span>
+                          <span class="sr-only">0 story points</span>
+                        </span></span
+                      >
+
+                      <span
+                        data-view-component="true"
+                        class="op-work-package-card--priority __hl_inline_priority_8 __hl_inline__small_dot no-wrap"
+                      >
+                        <span class="op-work-package-card--priority-name"
+                          >Normal</span
+                        >
+                      </span>
+
+                      <action-menu
+                        data-select-variant="none"
+                        data-view-component="true"
+                        class="op-work-package-card--menu hide-when-print"
+                      >
+                        <button
+                          id="work_package_105_menu-button"
+                          popovertarget="work_package_105_menu-overlay"
+                          aria-controls="work_package_105_menu-list"
+                          aria-haspopup="true"
+                          aria-labelledby="tooltip-874b9b93-09fe-45af-8e50-74545b4a362a"
+                          type="button"
+                          data-view-component="true"
+                          class="Button Button--iconOnly Button--invisible Button--medium"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            data-component="Octicon"
+                            height="16"
+                            viewBox="0 0 16 16"
+                            version="1.1"
+                            width="16"
+                            data-view-component="true"
+                            class="octicon octicon-kebab-horizontal Button-visual"
+                          >
+                            <path
+                              d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"
+                            ></path>
+                          </svg>
+                        </button>
+                      </action-menu>
+                    </div>
+                    <div
+                      style="grid-area: subject"
+                      data-view-component="true"
+                      class="op-work-package-card--subject"
+                    >
+                      <a
+                        draggable="false"
+                        href="/work_packages/MYPN2-6"
+                        data-view-component="true"
+                        class="Link text-semibold"
+                        >Story 5</a
+                      >
+                    </div>
+                  </article>
+                </li>
+              </ul>
+            </div>
+            <template data-border-box-list-target="emptyStateTemplate">
+              <li class="Box-row" data-empty-list-item="true">
+                <!-- BEGIN app/components/open_project/common/border_box_list_component/empty_state.html.erb
+-->
+                <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/box.rb --><!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                <div
+                  data-view-component="true"
+                  class="op-border-box-list-empty-state"
+                >
+                  <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/beta/blankslate.html.erb
+-->
+                  <div class="blankslate-container">
+                    <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                    <div
+                      role="status"
+                      aria-live="polite"
+                      data-view-component="true"
+                      class="blankslate"
+                    >
+                      <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/beta/heading.rb --><!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                      <h4 data-view-component="true" class="blankslate-heading">
+                        Sprint 1 is empty
+                      </h4>
+                      <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb --><!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/beta/heading.rb -->
+                      <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                      <p
+                        data-view-component="true"
+                        class="blankslate-description"
+                      >
+                        No items planned yet. Drag items here to add them.
+                      </p>
+                      <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                    </div>
+                    <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                  </div>
+                  <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/beta/blankslate.html.erb -->
+
+                  <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/box.rb --><!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                  <div
+                    aria-hidden="true"
+                    data-view-component="true"
+                    class="op-border-box-list-empty-state--drop-overlay"
+                  >
+                    <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/beta/text.rb --><!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                    <p data-view-component="true" class="color-fg-muted f4">
+                      Drop here to add this item
+                    </p>
+                    <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb --><!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/beta/text.rb -->
+                  </div>
+                  <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb --><!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/box.rb -->
+                </div>
+                <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb --><!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/box.rb --><!-- END app/components/open_project/common/border_box_list_component/empty_state.html.erb -->
+              </li>
+            </template>
+          </div>
+        </section>
+      </turbo-frame>
+    </div>
+  </div>
+</turbo-frame>
diff --git a/perf/benchmarks/backlogs.old.html b/perf/benchmarks/backlogs.old.html
new file mode 100644
index 0000000..f9ba3b0
--- /dev/null
+++ b/perf/benchmarks/backlogs.old.html
@@ -0,0 +1,947 @@
+<!-- Trimmed from a real OpenProject backlogs_container render; new = old with one card moved between lists (synthesised, not a server re-render). Session tokens scrubbed. -->
+<turbo-frame id="backlogs_container">
+  <div class="op-sprint-planning-container">
+    <div
+      id="owner_backlogs_container"
+      class="op-sprint-planning-lists"
+      data-controller="sortable-lists--scrollable"
+    >
+      <turbo-frame
+        id="backlogs-backlog-component-21"
+        refresh="morph"
+        style="display: contents"
+      >
+        <div
+          data-view-component="true"
+          class="Subhead border-bottom-0 pb-0 tmp-pb-0 mb-0 tmp-mb-0"
+        >
+          <h3
+            data-view-component="true"
+            class="gap-2 Subhead-heading Subhead-heading--medium text-bold d-inline-flex flex-items-center"
+          >
+            Backlog<span
+              title="283"
+              data-view-component="true"
+              class="Counter Counter--primary"
+              >283</span
+            >
+          </h3>
+        </div>
+
+        <div
+          data-view-component="true"
+          class="flex-justify-between flex-items-center d-flex flex-row"
+        >
+          <div data-view-component="true">
+            <form
+              id="backlog_bucket-clear-form"
+              data-turbo-frame="backlogs_container"
+              data-turbo-action="advance"
+              action="/projects/MYPN2/backlogs/backlog"
+              accept-charset="UTF-8"
+              method="get"
+            ></form>
+            <form
+              data-turbo-frame="backlogs_container"
+              data-turbo-action="advance"
+              action="/projects/MYPN2/backlogs/backlog"
+              accept-charset="UTF-8"
+              method="get"
+            ></form>
+          </div>
+          <div data-view-component="true">
+            <a
+              href="/projects/MYPN2/backlogs/buckets/new_dialog"
+              aria-label="New backlog bucket"
+              data-controller="async-dialog"
+              data-test-selector="op-backlog-buckets--new-backlog-bucket-button"
+              data-view-component="true"
+              class="Button--secondary Button--medium Button"
+            >
+              <span class="Button-content">
+                <span class="Button-visual Button-leadingVisual">
+                  <svg
+                    aria-hidden="true"
+                    data-component="Octicon"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    version="1.1"
+                    width="16"
+                    data-view-component="true"
+                    class="octicon octicon-plus"
+                  >
+                    <path
+                      d="M7.75 2a.75.75 0 0 1 .75.75V7h4.25a.75.75 0 0 1 0 1.5H8.5v4.25a.75.75 0 0 1-1.5 0V8.5H2.75a.75.75 0 0 1 0-1.5H7V2.75A.75.75 0 0 1 7.75 2"
+                    ></path>
+                  </svg>
+                </span>
+                <span class="Button-label">Backlog bucket</span>
+              </span>
+            </a>
+          </div>
+        </div>
+
+        <section id="backlogs-bucket-component-7">
+          <div data-controller="border-box-list" data-view-component="true">
+            <div
+              data-controller="sortable-lists--list"
+              data-sortable-lists--list-type-value="backlog_bucket"
+              data-sortable-lists--list-accepted-type-value="work_package"
+              data-sortable-lists--list-id-value="7"
+              data-sortable-lists--list-drop-position-value="start"
+              data-sortable-lists--list-name-value="Foobar"
+              data-test-selector="backlog-bucket-7"
+              id="backlog_bucket_7"
+              data-view-component="true"
+              class="Box Box--condensed op-border-box-list op-border-box-list_transparent op-border-box-list_header-padding-condensed"
+            >
+              <div
+                id="backlog_bucket_7_header"
+                data-view-component="true"
+                class="Box-header"
+              >
+                <div
+                  data-view-component="true"
+                  class="op-border-box-list-header"
+                >
+                  <div
+                    style="grid-area: heading"
+                    data-view-component="true"
+                    class="op-border-box-list-header--heading"
+                  >
+                    <div
+                      data-view-component="true"
+                      class="op-border-box-list-header--heading-line"
+                    >
+                      <h4
+                        data-view-component="true"
+                        class="Truncate Box-title f4"
+                      >
+                        <span data-view-component="true" class="Truncate-text">
+                          Foobar
+                        </span>
+                      </h4>
+                      <span
+                        aria-label="2 work packages"
+                        aria-live="polite"
+                        title="2"
+                        data-view-component="true"
+                        class="Counter Counter--secondary"
+                        >2</span
+                      >
+                    </div>
+                  </div>
+                  <div
+                    style="grid-area: menu"
+                    data-view-component="true"
+                    class="op-border-box-list-header--menu"
+                  ></div>
+                </div>
+              </div>
+
+              <ul
+                id="backlog_bucket_7_list"
+                data-border-box-list-target="list"
+                aria-labelledby="backlog_bucket_7_header"
+                data-view-component="true"
+                class="Box-list"
+              >
+                <li
+                  id="work_package_104"
+                  data-controller="sortable-lists--item"
+                  data-sortable-lists--item-id-value="104"
+                  data-sortable-lists--item-label-value="Feature: Story 4 (MYPN2-5)"
+                  data-sortable-lists--item-type-value="work_package"
+                  data-sortable-lists--item-confined-value="false"
+                  data-sortable-lists--item-external-url-value="http://localhost:3000/work_packages/MYPN2-5"
+                  data-test-selector="work-package-104"
+                  draggable="true"
+                  data-view-component="true"
+                  class="Box-row"
+                >
+                  <article
+                    tabindex="0"
+                    data-story="true"
+                    data-controller="backlogs--work-package contextual-action-menu"
+                    data-backlogs--work-package-id-value="104"
+                    data-backlogs--work-package-display-id-value="MYPN2-5"
+                    data-backlogs--work-package-split-url-value="/projects/MYPN2/backlogs/backlog/details/MYPN2-5"
+                    data-backlogs--work-package-full-url-value="/work_packages/MYPN2-5"
+                    data-sortable-lists--item-target="preview handle"
+                    aria-keyshortcuts="Enter Shift+F10"
+                    aria-label="Feature: Story 4 (MYPN2-5)"
+                    data-view-component="true"
+                    class="Box-card Box-card--clickable Box-card--draggable op-work-package-card_with-menu op-work-package-card_with-metric op-work-package-card"
+                  >
+                    <div
+                      style="grid-area: info_line"
+                      data-view-component="true"
+                      class="op-work-package-card--info_line"
+                    >
+                      <div
+                        data-view-component="true"
+                        class="op-wp-info-line flex-nowrap flex-items-center overflow-hidden d-flex flex-row"
+                      >
+                        <div
+                          data-view-component="true"
+                          class="op-wp-info-line--type mr-2 tmp-mr-2"
+                        >
+                          <span
+                            data-view-component="true"
+                            class="__hl_inline_type_4 text-small"
+                            >FEATURE</span
+                          >
+                        </div>
+                        <div
+                          data-view-component="true"
+                          class="op-wp-info-line--id"
+                        >
+                          <a
+                            title="Story 4"
+                            href="/projects/MYPN2/work_packages/MYPN2-5"
+                            data-view-component="true"
+                            class="Link text-small color-fg-muted"
+                            >MYPN2-5</a
+                          >
+                        </div>
+                        <div
+                          data-view-component="true"
+                          class="op-wp-info-line--status ml-2 tmp-ml-2"
+                        >
+                          <span
+                            data-view-component="true"
+                            class="Label op-status-badge Label--secondary Label--inline"
+                          >
+                            <span
+                              data-view-component="true"
+                              class="op-status-badge--name"
+                              >New</span
+                            ></span
+                          >
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      style="grid-area: actions"
+                      data-view-component="true"
+                      class="op-work-package-card--actions"
+                    >
+                      <span class="op-work-package-card--metric">
+                        <span
+                          data-view-component="true"
+                          class="color-fg-subtle position-relative"
+                        >
+                          <span aria-hidden="true">0</span>
+                          <span class="sr-only">0 story points</span>
+                        </span></span
+                      >
+
+                      <span
+                        data-view-component="true"
+                        class="op-work-package-card--priority __hl_inline_priority_8 __hl_inline__small_dot no-wrap"
+                      >
+                        <span class="op-work-package-card--priority-name"
+                          >Normal</span
+                        >
+                      </span>
+
+                      <action-menu
+                        data-select-variant="none"
+                        data-view-component="true"
+                        class="op-work-package-card--menu hide-when-print"
+                      >
+                        <button
+                          id="work_package_104_menu-button"
+                          popovertarget="work_package_104_menu-overlay"
+                          aria-controls="work_package_104_menu-list"
+                          aria-haspopup="true"
+                          aria-labelledby="tooltip-6ed074da-2170-4618-ba12-470a1254cd16"
+                          type="button"
+                          data-view-component="true"
+                          class="Button Button--iconOnly Button--invisible Button--medium"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            data-component="Octicon"
+                            height="16"
+                            viewBox="0 0 16 16"
+                            version="1.1"
+                            width="16"
+                            data-view-component="true"
+                            class="octicon octicon-kebab-horizontal Button-visual"
+                          >
+                            <path
+                              d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"
+                            ></path>
+                          </svg>
+                        </button>
+                      </action-menu>
+                    </div>
+                    <div
+                      style="grid-area: subject"
+                      data-view-component="true"
+                      class="op-work-package-card--subject"
+                    >
+                      <a
+                        draggable="false"
+                        href="/work_packages/MYPN2-5"
+                        data-view-component="true"
+                        class="Link text-semibold"
+                        >Story 4</a
+                      >
+                    </div>
+                  </article>
+                </li>
+                <li
+                  id="work_package_100"
+                  data-controller="sortable-lists--item"
+                  data-sortable-lists--item-id-value="100"
+                  data-sortable-lists--item-label-value="Feature: Story 0 (MYPN2-1)"
+                  data-sortable-lists--item-type-value="work_package"
+                  data-sortable-lists--item-confined-value="false"
+                  data-sortable-lists--item-external-url-value="http://localhost:3000/work_packages/MYPN2-1"
+                  data-test-selector="work-package-100"
+                  draggable="true"
+                  data-view-component="true"
+                  class="Box-row"
+                >
+                  <article
+                    tabindex="0"
+                    data-story="true"
+                    data-controller="backlogs--work-package contextual-action-menu"
+                    data-backlogs--work-package-id-value="100"
+                    data-backlogs--work-package-display-id-value="MYPN2-1"
+                    data-backlogs--work-package-split-url-value="/projects/MYPN2/backlogs/backlog/details/MYPN2-1"
+                    data-backlogs--work-package-full-url-value="/work_packages/MYPN2-1"
+                    data-sortable-lists--item-target="preview handle"
+                    aria-keyshortcuts="Enter Shift+F10"
+                    aria-label="Feature: Story 0 (MYPN2-1)"
+                    data-view-component="true"
+                    class="Box-card Box-card--clickable Box-card--draggable op-work-package-card_with-menu op-work-package-card_with-metric op-work-package-card"
+                  >
+                    <div
+                      style="grid-area: info_line"
+                      data-view-component="true"
+                      class="op-work-package-card--info_line"
+                    >
+                      <div
+                        data-view-component="true"
+                        class="op-wp-info-line flex-nowrap flex-items-center overflow-hidden d-flex flex-row"
+                      >
+                        <div
+                          data-view-component="true"
+                          class="op-wp-info-line--type mr-2 tmp-mr-2"
+                        >
+                          <span
+                            data-view-component="true"
+                            class="__hl_inline_type_4 text-small"
+                            >FEATURE</span
+                          >
+                        </div>
+                        <div
+                          data-view-component="true"
+                          class="op-wp-info-line--id"
+                        >
+                          <a
+                            title="Story 0"
+                            href="/projects/MYPN2/work_packages/MYPN2-1"
+                            data-view-component="true"
+                            class="Link text-small color-fg-muted"
+                            >MYPN2-1</a
+                          >
+                        </div>
+                        <div
+                          data-view-component="true"
+                          class="op-wp-info-line--status ml-2 tmp-ml-2"
+                        >
+                          <span
+                            data-view-component="true"
+                            class="Label op-status-badge Label--secondary Label--inline"
+                          >
+                            <span
+                              data-view-component="true"
+                              class="op-status-badge--name"
+                              >New</span
+                            ></span
+                          >
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      style="grid-area: actions"
+                      data-view-component="true"
+                      class="op-work-package-card--actions"
+                    >
+                      <span class="op-work-package-card--metric">
+                        <span
+                          data-view-component="true"
+                          class="color-fg-subtle position-relative"
+                        >
+                          <span aria-hidden="true">0</span>
+                          <span class="sr-only">0 story points</span>
+                        </span></span
+                      >
+
+                      <span
+                        data-view-component="true"
+                        class="op-work-package-card--priority __hl_inline_priority_8 __hl_inline__small_dot no-wrap"
+                      >
+                        <span class="op-work-package-card--priority-name"
+                          >Normal</span
+                        >
+                      </span>
+
+                      <action-menu
+                        data-select-variant="none"
+                        data-view-component="true"
+                        class="op-work-package-card--menu hide-when-print"
+                      >
+                        <button
+                          id="work_package_100_menu-button"
+                          popovertarget="work_package_100_menu-overlay"
+                          aria-controls="work_package_100_menu-list"
+                          aria-haspopup="true"
+                          aria-labelledby="tooltip-b83e2f5b-334f-4ac2-af6f-2be3783b6467"
+                          type="button"
+                          data-view-component="true"
+                          class="Button Button--iconOnly Button--invisible Button--medium"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            data-component="Octicon"
+                            height="16"
+                            viewBox="0 0 16 16"
+                            version="1.1"
+                            width="16"
+                            data-view-component="true"
+                            class="octicon octicon-kebab-horizontal Button-visual"
+                          >
+                            <path
+                              d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"
+                            ></path>
+                          </svg>
+                        </button>
+                      </action-menu>
+                    </div>
+                    <div
+                      style="grid-area: subject"
+                      data-view-component="true"
+                      class="op-work-package-card--subject"
+                    >
+                      <a
+                        draggable="false"
+                        href="/work_packages/MYPN2-1"
+                        data-view-component="true"
+                        class="Link text-semibold"
+                        >Story 0</a
+                      >
+                    </div>
+                  </article>
+                </li>
+              </ul>
+            </div>
+            <template data-border-box-list-target="emptyStateTemplate">
+              <li class="Box-row" data-empty-list-item="true">
+                <!-- BEGIN app/components/open_project/common/border_box_list_component/empty_state.html.erb
+-->
+                <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/box.rb --><!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                <div
+                  data-view-component="true"
+                  class="op-border-box-list-empty-state"
+                >
+                  <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/beta/blankslate.html.erb
+-->
+                  <div class="blankslate-container">
+                    <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                    <div
+                      role="status"
+                      aria-live="polite"
+                      data-view-component="true"
+                      class="blankslate"
+                    >
+                      <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/beta/heading.rb --><!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                      <h4 data-view-component="true" class="blankslate-heading">
+                        Backlog bucket is empty
+                      </h4>
+                      <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb --><!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/beta/heading.rb -->
+                      <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                      <p
+                        data-view-component="true"
+                        class="blankslate-description"
+                      >
+                        Drag items here to add them
+                      </p>
+                      <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                    </div>
+                    <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                  </div>
+                  <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/beta/blankslate.html.erb -->
+
+                  <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/box.rb --><!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                  <div
+                    aria-hidden="true"
+                    data-view-component="true"
+                    class="op-border-box-list-empty-state--drop-overlay"
+                  >
+                    <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/beta/text.rb --><!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                    <p data-view-component="true" class="color-fg-muted f4">
+                      Drop here to add this item
+                    </p>
+                    <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb --><!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/beta/text.rb -->
+                  </div>
+                  <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb --><!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/box.rb -->
+                </div>
+                <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb --><!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/box.rb --><!-- END app/components/open_project/common/border_box_list_component/empty_state.html.erb -->
+              </li>
+            </template>
+          </div>
+        </section>
+
+        <section id="backlogs-inbox-component-21"></section>
+      </turbo-frame>
+    </div>
+    <div
+      id="sprint_backlogs_container"
+      class="op-sprint-planning-lists"
+      data-controller="sortable-lists--scrollable"
+    >
+      <turbo-frame
+        id="backlogs-sprints-component-21"
+        refresh="morph"
+        style="display: contents"
+      >
+        <div
+          data-view-component="true"
+          class="Subhead border-bottom-0 pb-0 tmp-pb-0 mb-0 tmp-mb-0"
+        >
+          <h3
+            data-view-component="true"
+            class="gap-2 Subhead-heading Subhead-heading--medium text-bold d-inline-flex flex-items-center"
+          >
+            Sprints<span
+              data-test-selector="op-sprints--total-counter"
+              title="17"
+              data-view-component="true"
+              class="Counter Counter--primary"
+              >17</span
+            >
+          </h3>
+        </div>
+
+        <div
+          data-view-component="true"
+          class="flex-justify-between flex-items-center d-flex flex-row"
+        >
+          <div data-view-component="true">
+            <form
+              id="sprint-clear-form"
+              data-turbo-frame="backlogs_container"
+              data-turbo-action="advance"
+              action="/projects/MYPN2/backlogs/backlog"
+              accept-charset="UTF-8"
+              method="get"
+            ></form>
+            <form
+              data-turbo-frame="backlogs_container"
+              data-turbo-action="advance"
+              action="/projects/MYPN2/backlogs/backlog"
+              accept-charset="UTF-8"
+              method="get"
+            ></form>
+          </div>
+          <div data-view-component="true">
+            <a
+              href="/projects/MYPN2/backlogs/sprints/new_dialog"
+              aria-label="New sprint"
+              data-controller="async-dialog"
+              data-test-selector="op-sprints--new-sprint-button"
+              data-view-component="true"
+              class="Button--secondary Button--medium Button"
+            >
+              <span class="Button-content">
+                <span class="Button-visual Button-leadingVisual">
+                  <svg
+                    aria-hidden="true"
+                    data-component="Octicon"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    version="1.1"
+                    width="16"
+                    data-view-component="true"
+                    class="octicon octicon-plus"
+                  >
+                    <path
+                      d="M7.75 2a.75.75 0 0 1 .75.75V7h4.25a.75.75 0 0 1 0 1.5H8.5v4.25a.75.75 0 0 1-1.5 0V8.5H2.75a.75.75 0 0 1 0-1.5H7V2.75A.75.75 0 0 1 7.75 2"
+                    ></path>
+                  </svg>
+                </span>
+                <span class="Button-label">Sprint</span>
+              </span>
+            </a>
+          </div>
+        </div>
+
+        <section id="backlogs-sprint-component-18">
+          <div data-controller="border-box-list" data-view-component="true">
+            <div
+              data-controller="sortable-lists--list"
+              data-sortable-lists--list-type-value="sprint"
+              data-sortable-lists--list-accepted-type-value="work_package"
+              data-sortable-lists--list-id-value="18"
+              data-sortable-lists--list-drop-position-value="start"
+              data-sortable-lists--list-name-value="Sprint 1"
+              data-test-selector="sprint-18"
+              id="sprint_18"
+              data-view-component="true"
+              class="Box Box--condensed op-border-box-list op-border-box-list_transparent op-border-box-list_header-padding-condensed"
+            >
+              <div
+                id="sprint_18_header"
+                data-view-component="true"
+                class="Box-header"
+              >
+                <div
+                  data-view-component="true"
+                  class="op-border-box-list-header"
+                >
+                  <div
+                    style="grid-area: heading"
+                    data-view-component="true"
+                    class="op-border-box-list-header--heading"
+                  >
+                    <div
+                      data-view-component="true"
+                      class="op-border-box-list-header--heading-line"
+                    >
+                      <h4
+                        data-view-component="true"
+                        class="Truncate Box-title f4"
+                      >
+                        <span data-view-component="true" class="Truncate-text">
+                          Sprint 1
+                        </span>
+                      </h4>
+                      <span
+                        aria-label="8 work packages"
+                        aria-live="polite"
+                        title="8"
+                        data-view-component="true"
+                        class="Counter Counter--secondary"
+                        >8</span
+                      >
+                    </div>
+                  </div>
+                  <div
+                    style="grid-area: description"
+                    data-view-component="true"
+                    class="op-border-box-list-header--description"
+                  >
+                    <span
+                      data-view-component="true"
+                      class="row-gap-2 d-flex flex-column color-fg-muted"
+                    >
+                      <div
+                        data-justify="start"
+                        data-direction="horizontal"
+                        data-align="center"
+                        data-wrap="nowrap"
+                        data-padding="none"
+                        data-view-component="true"
+                        class="Stack"
+                      >
+                        <span
+                          data-view-component="true"
+                          class="Label text-bold color-bg-default"
+                          >In planning</span
+                        >
+
+                        <span
+                          aria-live="polite"
+                          data-view-component="true"
+                          class="velocity"
+                        >
+                          0&nbsp;points
+                        </span>
+                        <span
+                          role="group"
+                          data-view-component="true"
+                          class="ml-auto tmp-ml-auto mr-2 tmp-mr-2"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            data-component="Octicon"
+                            height="16"
+                            viewBox="0 0 16 16"
+                            version="1.1"
+                            width="16"
+                            data-view-component="true"
+                            class="octicon octicon-calendar mr-1 tmp-mr-1"
+                          >
+                            <path
+                              d="M4.75 0a.75.75 0 0 1 .75.75V2h5V.75a.75.75 0 0 1 1.5 0V2h1.25c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25V3.75C1 2.784 1.784 2 2.75 2H4V.75A.75.75 0 0 1 4.75 0M2.5 7.5v6.75c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V7.5Zm10.75-4H2.75a.25.25 0 0 0-.25.25V6h11V3.75a.25.25 0 0 0-.25-.25"
+                            ></path>
+                          </svg>
+                          <time datetime="2026-04-13">04/13/2026</time
+                          >&nbsp;–&nbsp;<time datetime="2026-04-27"
+                            >04/27/2026</time
+                          >
+                        </span>
+                      </div></span
+                    >
+                  </div>
+                  <div
+                    style="grid-area: actions"
+                    data-view-component="true"
+                    class="op-border-box-list-header--actions"
+                  >
+                    <a
+                      id="sprint_18_start_button"
+                      href="/projects/MYPN2/backlogs/sprints/18/start"
+                      data-turbo-method="post"
+                      data-view-component="true"
+                      class="Button--secondary Button--medium Button"
+                    >
+                      <span class="Button-content">
+                        <span class="Button-visual Button-leadingVisual">
+                          <svg
+                            aria-hidden="true"
+                            data-component="Octicon"
+                            height="16"
+                            viewBox="0 0 16 16"
+                            version="1.1"
+                            width="16"
+                            data-view-component="true"
+                            class="octicon octicon-rocket"
+                          >
+                            <path
+                              d="M14.064 0h.186C15.216 0 16 .784 16 1.75v.186a8.75 8.75 0 0 1-2.564 6.186l-.458.459q-.472.471-.979.904v3.207c0 .608-.315 1.172-.833 1.49l-2.774 1.707a.75.75 0 0 1-1.11-.418l-.954-3.102a1 1 0 0 1-.145-.125L3.754 9.816a1 1 0 0 1-.124-.145L.528 8.717a.75.75 0 0 1-.418-1.11l1.71-2.774A1.75 1.75 0 0 1 3.31 4h3.204q.433-.508.904-.979l.459-.458A8.75 8.75 0 0 1 14.064 0M8.938 3.623h-.002l-.458.458c-.76.76-1.437 1.598-2.02 2.5l-1.5 2.317 2.143 2.143 2.317-1.5c.902-.583 1.74-1.26 2.499-2.02l.459-.458a7.25 7.25 0 0 0 2.123-5.127V1.75a.25.25 0 0 0-.25-.25h-.186a7.25 7.25 0 0 0-5.125 2.123M3.56 14.56c-.732.732-2.334 1.045-3.005 1.148a.23.23 0 0 1-.201-.064.23.23 0 0 1-.064-.201c.103-.671.416-2.273 1.15-3.003a1.502 1.502 0 1 1 2.12 2.12m6.94-3.935q-.132.09-.266.175l-2.35 1.521.548 1.783 1.949-1.2a.25.25 0 0 0 .119-.213ZM3.678 8.116 5.2 5.766q.087-.135.176-.266H3.309a.25.25 0 0 0-.213.119l-1.2 1.95ZM12 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0"
+                            ></path>
+                          </svg>
+                        </span>
+                        <span class="Button-label">Start sprint</span>
+                      </span>
+                    </a>
+                  </div>
+                  <div
+                    style="grid-area: menu"
+                    data-view-component="true"
+                    class="op-border-box-list-header--menu"
+                  ></div>
+                </div>
+              </div>
+
+              <ul
+                id="sprint_18_list"
+                data-border-box-list-target="list"
+                aria-labelledby="sprint_18_header"
+                data-view-component="true"
+                class="Box-list"
+              >
+                <li
+                  id="work_package_105"
+                  data-controller="sortable-lists--item"
+                  data-sortable-lists--item-id-value="105"
+                  data-sortable-lists--item-label-value="Feature: Story 5 (MYPN2-6)"
+                  data-sortable-lists--item-type-value="work_package"
+                  data-sortable-lists--item-confined-value="false"
+                  data-sortable-lists--item-external-url-value="http://localhost:3000/work_packages/MYPN2-6"
+                  data-test-selector="work-package-105"
+                  draggable="true"
+                  data-view-component="true"
+                  class="Box-row"
+                >
+                  <article
+                    tabindex="0"
+                    data-story="true"
+                    data-controller="backlogs--work-package contextual-action-menu"
+                    data-backlogs--work-package-id-value="105"
+                    data-backlogs--work-package-display-id-value="MYPN2-6"
+                    data-backlogs--work-package-split-url-value="/projects/MYPN2/backlogs/backlog/details/MYPN2-6"
+                    data-backlogs--work-package-full-url-value="/work_packages/MYPN2-6"
+                    data-sortable-lists--item-target="preview handle"
+                    aria-keyshortcuts="Enter Shift+F10"
+                    aria-label="Feature: Story 5 (MYPN2-6)"
+                    data-view-component="true"
+                    class="Box-card Box-card--clickable Box-card--draggable op-work-package-card_with-menu op-work-package-card_with-metric op-work-package-card"
+                  >
+                    <div
+                      style="grid-area: info_line"
+                      data-view-component="true"
+                      class="op-work-package-card--info_line"
+                    >
+                      <div
+                        data-view-component="true"
+                        class="op-wp-info-line flex-nowrap flex-items-center overflow-hidden d-flex flex-row"
+                      >
+                        <div
+                          data-view-component="true"
+                          class="op-wp-info-line--type mr-2 tmp-mr-2"
+                        >
+                          <span
+                            data-view-component="true"
+                            class="__hl_inline_type_4 text-small"
+                            >FEATURE</span
+                          >
+                        </div>
+                        <div
+                          data-view-component="true"
+                          class="op-wp-info-line--id"
+                        >
+                          <a
+                            title="Story 5"
+                            href="/projects/MYPN2/work_packages/MYPN2-6"
+                            data-view-component="true"
+                            class="Link text-small color-fg-muted"
+                            >MYPN2-6</a
+                          >
+                        </div>
+                        <div
+                          data-view-component="true"
+                          class="op-wp-info-line--status ml-2 tmp-ml-2"
+                        >
+                          <span
+                            data-view-component="true"
+                            class="Label op-status-badge Label--secondary Label--inline"
+                          >
+                            <span
+                              data-view-component="true"
+                              class="op-status-badge--name"
+                              >New</span
+                            ></span
+                          >
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      style="grid-area: actions"
+                      data-view-component="true"
+                      class="op-work-package-card--actions"
+                    >
+                      <span class="op-work-package-card--metric">
+                        <span
+                          data-view-component="true"
+                          class="color-fg-subtle position-relative"
+                        >
+                          <span aria-hidden="true">0</span>
+                          <span class="sr-only">0 story points</span>
+                        </span></span
+                      >
+
+                      <span
+                        data-view-component="true"
+                        class="op-work-package-card--priority __hl_inline_priority_8 __hl_inline__small_dot no-wrap"
+                      >
+                        <span class="op-work-package-card--priority-name"
+                          >Normal</span
+                        >
+                      </span>
+
+                      <action-menu
+                        data-select-variant="none"
+                        data-view-component="true"
+                        class="op-work-package-card--menu hide-when-print"
+                      >
+                        <button
+                          id="work_package_105_menu-button"
+                          popovertarget="work_package_105_menu-overlay"
+                          aria-controls="work_package_105_menu-list"
+                          aria-haspopup="true"
+                          aria-labelledby="tooltip-874b9b93-09fe-45af-8e50-74545b4a362a"
+                          type="button"
+                          data-view-component="true"
+                          class="Button Button--iconOnly Button--invisible Button--medium"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            data-component="Octicon"
+                            height="16"
+                            viewBox="0 0 16 16"
+                            version="1.1"
+                            width="16"
+                            data-view-component="true"
+                            class="octicon octicon-kebab-horizontal Button-visual"
+                          >
+                            <path
+                              d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"
+                            ></path>
+                          </svg>
+                        </button>
+                      </action-menu>
+                    </div>
+                    <div
+                      style="grid-area: subject"
+                      data-view-component="true"
+                      class="op-work-package-card--subject"
+                    >
+                      <a
+                        draggable="false"
+                        href="/work_packages/MYPN2-6"
+                        data-view-component="true"
+                        class="Link text-semibold"
+                        >Story 5</a
+                      >
+                    </div>
+                  </article>
+                </li>
+              </ul>
+            </div>
+            <template data-border-box-list-target="emptyStateTemplate">
+              <li class="Box-row" data-empty-list-item="true">
+                <!-- BEGIN app/components/open_project/common/border_box_list_component/empty_state.html.erb
+-->
+                <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/box.rb --><!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                <div
+                  data-view-component="true"
+                  class="op-border-box-list-empty-state"
+                >
+                  <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/beta/blankslate.html.erb
+-->
+                  <div class="blankslate-container">
+                    <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                    <div
+                      role="status"
+                      aria-live="polite"
+                      data-view-component="true"
+                      class="blankslate"
+                    >
+                      <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/beta/heading.rb --><!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                      <h4 data-view-component="true" class="blankslate-heading">
+                        Sprint 1 is empty
+                      </h4>
+                      <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb --><!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/beta/heading.rb -->
+                      <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                      <p
+                        data-view-component="true"
+                        class="blankslate-description"
+                      >
+                        No items planned yet. Drag items here to add them.
+                      </p>
+                      <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                    </div>
+                    <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                  </div>
+                  <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/beta/blankslate.html.erb -->
+
+                  <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/box.rb --><!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                  <div
+                    aria-hidden="true"
+                    data-view-component="true"
+                    class="op-border-box-list-empty-state--drop-overlay"
+                  >
+                    <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/beta/text.rb --><!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                    <p data-view-component="true" class="color-fg-muted f4">
+                      Drop here to add this item
+                    </p>
+                    <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb --><!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/beta/text.rb -->
+                  </div>
+                  <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb --><!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/box.rb -->
+                </div>
+                <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb --><!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/box.rb --><!-- END app/components/open_project/common/border_box_list_component/empty_state.html.erb -->
+              </li>
+            </template>
+          </div>
+        </section>
+      </turbo-frame>
+    </div>
+  </div>
+</turbo-frame>

From bf1348a6f5c6f0bb520aea67da83c39e80d4966e Mon Sep 17 00:00:00 2001
From: Alexander Brandon Coles <a.coles@openproject.com>
Date: Tue, 25 Aug 2026 21:52:13 -0800
Subject: [PATCH 08/12] document the skipUnchanged option

---
 CHANGELOG.md |  1 +
 README.md    | 13 +++++++++++++
 2 files changed, 14 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b176dbb..96f43bb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@
 
 * Added:
   * Warn in the console when duplicate ids are detected during a morph, since they can cause subtle state loss (@botandrose) #142
+  * New off-by-default `skipUnchanged` option that skips morphing subtrees whose old and new content are already identical, for large speedups on mostly-unchanged pages (@alexbcoles) #144
 
 * Fixed:
   * Fix TypeError when restoring focus to an element that doesn't support text selection (@emaia) #150
diff --git a/README.md b/README.md
index 422d520..af36ef2 100644
--- a/README.md
+++ b/README.md
@@ -89,6 +89,7 @@ Idiomorph supports the following options:
 | `ignoreActive: false`         | If `true`, idiomorph will skip the active element                                                          | `Idiomorph.morph(..., {ignoreActive:true})`                              |
 | `ignoreActiveValue: false`    | If `true`, idiomorph will not update the active element's value                                            | `Idiomorph.morph(..., {ignoreActiveValue:true})`                         |
 | `restoreFocus: true`          | If `true`, idiomorph will attempt to restore any lost focus and selection state after the morph.           | `Idiomorph.morph(..., {restoreFocus:true})`                              |
+| `skipUnchanged: false`        | If `true`, idiomorph will not descend into subtrees that are already identical. See the [skipping unchanged content](#skipping-unchanged-content) section | `Idiomorph.morph(..., {skipUnchanged:true})`                             |
 | `head: {style: 'merge', ...}` | Allows you to control how the `head` tag is merged. See the [head](#the-head-tag) section for more details | `Idiomorph.morph(..., {head:{style:'merge'}})`                           |
 | `callbacks: {...}`            | Allows you to insert callbacks when events occur in the morph lifecycle. See the callback table below      | `Idiomorph.morph(..., {callbacks:{beforeNodeAdded:function(node){...}})` |
 
@@ -107,6 +108,18 @@ of the algorithm.
 | afterNodeRemoved(node)                                    | Called after a node is removed from the DOM                                                                    | none                                               |
 | beforeAttributeUpdated(attributeName, node, mutationType) | Called before an attribute on an element is updated or removed (`mutationType` is either "update" or "remove") | return false to not update or remove the attribute |
 
+### Skipping unchanged content
+
+Most real-world morphs change only a small part of a large page. With `skipUnchanged: true`, idiomorph compares each pair of old and new elements with [`isEqualNode`](https://developer.mozilla.org/en-US/docs/Web/API/Node/isEqualNode) and, when they are identical, leaves the whole subtree alone instead of walking into it. On pages that mostly stay the same this makes morphs many times faster. On pages where most of the content changes between morphs, though, the extra comparisons can cost slightly more than they save, so the option is best suited to mostly-unchanged pages.
+
+Idiomorph's own morphing produces the same DOM with or without the option. What changes is what your callbacks see, and callbacks that rely on being called for every node can therefore behave differently:
+
+* `beforeNodeMorphed` and `afterNodeMorphed` are still called for the root of an unchanged subtree, so you can still veto it, but they are **not** called for its descendants. `beforeAttributeUpdated` is never called inside it either, since nothing changes.
+* Hidden state is respected: an `<input>`, `<textarea>` or `<option>` whose `value`, `checked` or `selected` property differs from its effective default (what parsing its markup would produce — an attribute-less checkbox legitimately has the value `on`, an untouched single-select has its first enabled option selected) is never skipped, nor are its ancestors, so it is synced exactly as without the option. `<template>` and `<head>` elements are never skipped either.
+* If a `beforeNodeMorphed` callback changes such hidden state on the two nodes it was handed, that is honoured. Changes it makes to *descendants* of those nodes are not: an unchanged subtree may already have been skipped by the time they would be visited, so such side effects can leave the DOM different from a morph without the option.
+
+The option is off by default in this release.
+
 ### The `head` tag
 
 The head tag is treated specially by idiomorph because:

From 8a82d69a721d61a1273a8fea8b768a4aab56de9b Mon Sep 17 00:00:00 2001
From: Alexander Brandon Coles <a.coles@openproject.com>
Date: Tue, 25 Aug 2026 21:53:41 -0800
Subject: [PATCH 09/12] fix GitHub handle attribution to @myabc

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 96f43bb..13a7fca 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,7 +8,7 @@
 
 * Added:
   * Warn in the console when duplicate ids are detected during a morph, since they can cause subtle state loss (@botandrose) #142
-  * New off-by-default `skipUnchanged` option that skips morphing subtrees whose old and new content are already identical, for large speedups on mostly-unchanged pages (@alexbcoles) #144
+  * New off-by-default `skipUnchanged` option that skips morphing subtrees whose old and new content are already identical, for large speedups on mostly-unchanged pages (@myabc) #144
 
 * Fixed:
   * Fix TypeError when restoring focus to an element that doesn't support text selection (@emaia) #150

From 5f3fdd1ff37ab773fbfd095ab2a01e3c656eabab Mon Sep 17 00:00:00 2001
From: Alexander Brandon Coles <a.coles@openproject.com>
Date: Tue, 25 Aug 2026 22:06:24 -0800
Subject: [PATCH 10/12] fix skipUnchanged select handling across browsers

The select/option skip predicate relied on HTMLSelectElement.options and
on live .selected reflecting a select's implicit default selection. Both
assumptions break on WebKit for a select parsed in a detached fragment:

- select.options stays empty (querySelectorAll("option") still works), so
  defaultSelectedOf computed a false default for every option, wrongly
  flagging clean selects as dirty.
- WebKit does not apply the implicit first-option selection that Chromium
  and Firefox do, so a clean first option reports selected=false there and
  selected=true elsewhere; and when every option is disabled WebKit's
  template parse selects the first option anyway (selected=true) while the
  others select nothing.

Scan options with querySelectorAll instead of .options, treat the first
option as the effective default when none is enabled, and mark an option
dirty only when its live selected disagrees with BOTH the effective
default and its own selected attribute. Either agreement means a fresh
parse reproduces the live state, so the skip stays DOM-correct on every
engine.

The tests addressed options through select.options too; read them through
querySelectorAll so the fixtures work under WebKit.
---
 src/idiomorph.js       | 26 +++++++++++++++++++++++---
 test/skip-unchanged.js | 19 +++++++++++--------
 2 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/src/idiomorph.js b/src/idiomorph.js
index bc2364a..d3a4da9 100644
--- a/src/idiomorph.js
+++ b/src/idiomorph.js
@@ -1049,7 +1049,19 @@ var Idiomorph = (function () {
           return node.value !== node.defaultValue;
         }
         if (node instanceof HTMLOptionElement) {
-          return node.selected !== defaultSelectedOf(node);
+          // An option is dirty only when its live `selected` disagrees with
+          // BOTH the effective default of its select AND its own `selected`
+          // attribute (`defaultSelected`). Either agreement means a fresh parse
+          // of the markup would reproduce the live state, so a skip stays
+          // DOM-correct. This straddles a browser difference: a detached
+          // single-select applies its implicit first-option selection on
+          // Chromium/Firefox (a clean first option reports selected=true, which
+          // matches the effective default) but not on WebKit (it reports
+          // selected=false, which instead matches defaultSelected).
+          return (
+            node.selected !== defaultSelectedOf(node) &&
+            node.selected !== node.defaultSelected
+          );
         }
         return false;
       }
@@ -1107,7 +1119,9 @@ var Idiomorph = (function () {
         if (!select || select.multiple || select.size > 1) {
           return option.defaultSelected;
         }
-        const options = select.options;
+        // WebKit leaves `select.options` empty for a select that was parsed in
+        // a detached fragment, so scan the DOM directly instead.
+        const options = select.querySelectorAll("option");
         // the last option with a selected attribute wins; otherwise the first enabled option
         for (let i = options.length - 1; i >= 0; i--) {
           if (options[i].defaultSelected) return options[i] === option;
@@ -1115,7 +1129,13 @@ var Idiomorph = (function () {
         for (let i = 0; i < options.length; i++) {
           if (!options[i].disabled) return options[i] === option;
         }
-        return false;
+        // No enabled option: browsers disagree on what a fresh parse selects
+        // (WebKit selects the first option even though it is disabled, others
+        // select nothing), so treat the first option as the effective default.
+        // Paired with the `selected !== defaultSelected` escape hatch in
+        // isUnskippable, this reads a clean all-disabled select as clean on
+        // every engine.
+        return options.length > 0 && options[0] === option;
       }
 
       /**
diff --git a/test/skip-unchanged.js b/test/skip-unchanged.js
index dfb36cc..7e85022 100644
--- a/test/skip-unchanged.js
+++ b/test/skip-unchanged.js
@@ -203,13 +203,16 @@ describe("skipUnchanged option", function () {
         const select = make(
           `<select multiple><option value="a" selected>A</option><option value="b">B</option></select>`,
         );
-        select.options[1].selected = true;
+        // WebKit leaves select.options empty for a detached-fragment select,
+        // so address the option through the DOM instead.
+        const options = select.querySelectorAll("option");
+        options[1].selected = true;
         Idiomorph.morph(
           select,
           `<select multiple><option value="a" selected>A</option><option value="b">B</option></select>`,
           { skipUnchanged: true },
         );
-        select.options[1].selected.should.equal(false);
+        options[1].selected.should.equal(false);
       });
 
       it("listbox (size > 1) select with a changed option is reset as before", function () {
@@ -258,7 +261,7 @@ describe("skipUnchanged option", function () {
         const select = make(
           `<select multiple><option value="a">A</option><option value="b">B</option></select>`,
         );
-        const option = select.options[1];
+        const option = select.querySelectorAll("option")[1];
         option.selected = true;
         Idiomorph.morph(option, `<option value="b">B</option>`, {
           skipUnchanged: true,
@@ -270,7 +273,7 @@ describe("skipUnchanged option", function () {
         const select = make(
           `<select size="2"><option value="a">A</option><option value="b">B</option></select>`,
         );
-        const option = select.options[1];
+        const option = select.querySelectorAll("option")[1];
         option.selected = true;
         Idiomorph.morph(option, `<option value="b">B</option>`, {
           skipUnchanged: true,
@@ -391,7 +394,7 @@ describe("skipUnchanged option", function () {
         const select = make(
           `<select><option value="a">A</option><option value="b" selected="">B</option></select>`,
         );
-        const option = select.options[1];
+        const option = select.querySelectorAll("option")[1];
         Idiomorph.morph(option, `<option value="b" selected="">B</option>`, {
           skipUnchanged: true,
           callbacks: recordingCallbacks(calls),
@@ -407,7 +410,7 @@ describe("skipUnchanged option", function () {
         const select = make(
           `<select><option value="a">A</option><option value="b">B</option></select>`,
         );
-        const option = select.options[0];
+        const option = select.querySelectorAll("option")[0];
         Idiomorph.morph(option, `<option value="a">A</option>`, {
           skipUnchanged: true,
           callbacks: recordingCallbacks(calls),
@@ -423,7 +426,7 @@ describe("skipUnchanged option", function () {
         const select = make(
           `<select><option value="a" disabled="">A</option><option value="b">B</option></select>`,
         );
-        const option = select.options[1];
+        const option = select.querySelectorAll("option")[1];
         Idiomorph.morph(option, `<option value="b">B</option>`, {
           skipUnchanged: true,
           callbacks: recordingCallbacks(calls),
@@ -439,7 +442,7 @@ describe("skipUnchanged option", function () {
         const select = make(
           `<select><option value="a" disabled="">A</option></select>`,
         );
-        const option = select.options[0];
+        const option = select.querySelectorAll("option")[0];
         Idiomorph.morph(option, `<option value="a" disabled="">A</option>`, {
           skipUnchanged: true,
           callbacks: recordingCallbacks(calls),

From c88b71a1033fcd5c5b92460b89d152ae74ce368f Mon Sep 17 00:00:00 2001
From: Alexander Brandon Coles <a.coles@openproject.com>
Date: Tue, 25 Aug 2026 22:44:38 -0800
Subject: [PATCH 11/12] back selection dirtiness at the select level

The per-option skip check could not see a single-select whose selection
was cleared (selectedIndex = -1) or coupled through a sibling option: no
option's own `selected` differed from its own default, so the select was
reported equal by isEqualNode and skipped wholesale before any option was
visited. Morphing with skipUnchanged off re-applies the implicit
first-option selection, so the option-on and option-off DOM diverged on
all three engines.

Add `select` to the unskippable pre-scan and give isUnskippable an
HTMLSelectElement branch. For a single-select, compare the live
selectedIndex against the effective parse-default index (last option with
a `selected` attribute, else first enabled option, else none). selectedIndex
is reliable across engines even where select.options is not, and an
all-disabled select yields no definitive default, so it is left clean.
A multiple/size>1 select has no single selectedIndex; its options remain
individually dirty-checked by the option branch.
---
 src/idiomorph.js       | 37 ++++++++++++++++++++++++++-
 test/skip-unchanged.js | 57 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 93 insertions(+), 1 deletion(-)

diff --git a/src/idiomorph.js b/src/idiomorph.js
index d3a4da9..93463dd 100644
--- a/src/idiomorph.js
+++ b/src/idiomorph.js
@@ -1020,7 +1020,7 @@ var Idiomorph = (function () {
   //=============================================================================
   const { isUnskippable, optionSelectionDiffers, createUnskippableNodeSet } =
     (function () {
-      const UNSKIPPABLE_SELECTOR = "input,textarea,option,template,head";
+      const UNSKIPPABLE_SELECTOR = "input,textarea,select,option,template,head";
 
       /**
        * Nodes whose subtree must never be skipped under `skipUnchanged`, because
@@ -1048,6 +1048,20 @@ var Idiomorph = (function () {
         if (node instanceof HTMLTextAreaElement) {
           return node.value !== node.defaultValue;
         }
+        if (node instanceof HTMLSelectElement) {
+          // A single-select's overall selection can be dirty (e.g. cleared to
+          // selectedIndex -1, or coupled through a sibling option) without any
+          // option's own `selected` differing from its own default, so compare
+          // the live selectedIndex against what a fresh parse would select.
+          // selectedIndex is reliable across engines even where select.options
+          // is not. A multiple/size>1 select has no single selectedIndex; each
+          // of its options is dirty-checked individually by the option branch.
+          if (node.multiple || node.size > 1) {
+            return false;
+          }
+          const index = effectiveDefaultIndex(node.querySelectorAll("option"));
+          return index !== -1 && node.selectedIndex !== index;
+        }
         if (node instanceof HTMLOptionElement) {
           // An option is dirty only when its live `selected` disagrees with
           // BOTH the effective default of its select AND its own `selected`
@@ -1106,6 +1120,27 @@ var Idiomorph = (function () {
         return oldNode.selected !== newNode.selected;
       }
 
+      /**
+       * The option index a fresh parse of a single-select's markup would leave
+       * selected: the last option carrying a `selected` attribute, else the
+       * first enabled option, else -1 when no option is enabled. Browsers
+       * disagree on what an all-disabled select selects (WebKit picks the first
+       * option, others select nothing), so -1 signals "no definitive default"
+       * and callers treat such a select as clean.
+       *
+       * @param {NodeListOf<HTMLOptionElement>} options
+       * @returns {number}
+       */
+      function effectiveDefaultIndex(options) {
+        for (let i = options.length - 1; i >= 0; i--) {
+          if (options[i].defaultSelected) return i;
+        }
+        for (let i = 0; i < options.length; i++) {
+          if (!options[i].disabled) return i;
+        }
+        return -1;
+      }
+
       /**
        * Whether an option would be selected right after parsing its markup.
        * In a single-select without any `selected` attribute the browser selects
diff --git a/test/skip-unchanged.js b/test/skip-unchanged.js
index 7e85022..f855702 100644
--- a/test/skip-unchanged.js
+++ b/test/skip-unchanged.js
@@ -738,5 +738,62 @@ describe("skipUnchanged option", function () {
         );
       });
     });
+
+    describe("a cleared single-select is backed at the select level", function () {
+      // A single-select whose selection was cleared (selectedIndex = -1) has no
+      // option whose own `selected` differs from its own default, so the
+      // per-option check cannot see it; only comparing the select's live
+      // selectedIndex against the effective parse default reveals the dirtiness.
+      // The invariant: morphing with skipUnchanged on must produce the same DOM
+      // as morphing with it off, which re-applies the implicit selection.
+      // Built with DOM APIs so the fixtures are portable to WebKit (which
+      // leaves select.options empty for markup parsed in a detached fragment).
+      function buildDivSelect(specs) {
+        const div = document.createElement("div");
+        const select = document.createElement("select");
+        for (const spec of specs) {
+          const option = document.createElement("option");
+          option.textContent = spec.text;
+          if (spec.disabled) option.disabled = true;
+          if (spec.selectedAttr) option.setAttribute("selected", "");
+          select.appendChild(option);
+        }
+        div.appendChild(select);
+        return div;
+      }
+
+      it("re-selects the implicit first option of a cleared single-select", function () {
+        const div = buildDivSelect([{ text: "a" }, { text: "b" }]);
+        const html = div.outerHTML;
+        div.querySelector("select").selectedIndex = -1;
+        Idiomorph.morph(div, html, { skipUnchanged: true });
+        div.querySelector("select").selectedIndex.should.equal(0);
+      });
+
+      it("re-selects the first enabled option of a cleared single-select whose first option is disabled", function () {
+        const div = buildDivSelect([
+          { text: "a", disabled: true },
+          { text: "b" },
+        ]);
+        const html = div.outerHTML;
+        div.querySelector("select").selectedIndex = -1;
+        Idiomorph.morph(div, html, { skipUnchanged: true });
+        div.querySelector("select").selectedIndex.should.equal(1);
+      });
+
+      it("still skips a genuinely clean single-select", function () {
+        const calls = [];
+        const div = buildDivSelect([{ text: "a" }, { text: "b" }]);
+        const html = div.outerHTML;
+        Idiomorph.morph(div, html, {
+          skipUnchanged: true,
+          callbacks: recordingCallbacks(calls),
+        });
+        calls.should.eql([
+          ["before", html],
+          ["after", html],
+        ]);
+      });
+    });
   });
 });

From 92907f6037847f67b851adac50048c6ab4bd2646 Mon Sep 17 00:00:00 2001
From: Alexander Brandon Coles <a.coles@openproject.com>
Date: Tue, 25 Aug 2026 23:45:51 -0800
Subject: [PATCH 12/12] clarify skip-predicate comments and perf wording

---
 PERFORMANCE.md   |  2 +-
 src/idiomorph.js | 12 ++++++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/PERFORMANCE.md b/PERFORMANCE.md
index 9b3eaaf..3f01f01 100644
--- a/PERFORMANCE.md
+++ b/PERFORMANCE.md
@@ -46,5 +46,5 @@ npm run perf -- tmp/before.js --options='{"skipUnchanged":true}'
 ## Adding Benchmarks
 You can add more benchmarks by creating new `benchmark-name.old.html` and `benchmark-name.new.html` files in the `perf/benchmarks` directory, containing the starting and final morph HTML respectively.
 
-`deep-last-leaf` is generated by `node perf/generate-deep-last-leaf.js` and is the deliberate worst case for the `skipUnchanged` option: every section changes, but only in its last and deepest text node, so every `isEqualNode` call walks a whole subtree before failing.
+`deep-last-leaf` is generated by `node perf/generate-deep-last-leaf.js` and is the worst case among the committed benchmarks for the `skipUnchanged` option: every section changes, but only in its last and deepest text node, so every `isEqualNode` call walks a whole subtree before failing. Its equal filler siblings at each level are still individually skippable, so in practice it measures near-parity rather than a large regression.
 
diff --git a/src/idiomorph.js b/src/idiomorph.js
index 93463dd..b31841c 100644
--- a/src/idiomorph.js
+++ b/src/idiomorph.js
@@ -1020,6 +1020,9 @@ var Idiomorph = (function () {
   //=============================================================================
   const { isUnskippable, optionSelectionDiffers, createUnskippableNodeSet } =
     (function () {
+      // Must stay in lockstep with the `instanceof` branches in `isUnskippable`
+      // below: adding a node type to one without the other silently under- or
+      // over-scans.
       const UNSKIPPABLE_SELECTOR = "input,textarea,select,option,template,head";
 
       /**
@@ -1081,13 +1084,14 @@ var Idiomorph = (function () {
       }
 
       /**
-       * Whether an option pair's live `selected` state has diverged even though
-       * neither side looks dirty on its own `isUnskippable` check. A
+       * Whether an option pair's live `selected` state has diverged. This
+       * exists to catch a coupling `isUnskippable` cannot see on its own: a
        * single-select's implicit default selection depends on every option in
        * the select, so removing the `selected` attribute from one option can
        * flip another, untouched option's effective selectedness as a side
-       * effect once the morph runs — something neither side can see by
-       * comparing itself only against its own default.
+       * effect once the morph runs — so the motivating case is exactly the one
+       * where neither option looks dirty on its own `isUnskippable` check,
+       * because each still agrees with its own default in isolation.
        *
        * Only meaningful when both sides sit in a real single-select: an option
        * morphed on its own (no `<select>` ancestor, e.g. an outerHTML root