From 86defc54e365b2c303f8d651eb8abbc574408f81 Mon Sep 17 00:00:00 2001
From: Bot <bot@tc39>
Date: Mon, 3 Jul 2023 20:57:09 +0000
Subject: [PATCH] Update gh-pages

---
 ecmarkup.js  | 1422 ++++++++++++++++++++++++++++++++++++++++++++++++++
 elements.css | 1263 ++++++++++++++++++++++++++++++++++++++++++++
 index.html   |  855 ++++++++++++++++++++++++++++++
 3 files changed, 3540 insertions(+)
 create mode 100644 ecmarkup.js
 create mode 100644 elements.css
 create mode 100644 index.html

diff --git a/ecmarkup.js b/ecmarkup.js
new file mode 100644
index 00000000..47f5a542
--- /dev/null
+++ b/ecmarkup.js
@@ -0,0 +1,1422 @@
+'use strict';
+let sdoBox = {
+  init() {
+    this.$alternativeId = null;
+    this.$outer = document.createElement('div');
+    this.$outer.classList.add('toolbox-container');
+    this.$container = document.createElement('div');
+    this.$container.classList.add('toolbox');
+    this.$displayLink = document.createElement('a');
+    this.$displayLink.setAttribute('href', '#');
+    this.$displayLink.textContent = 'Syntax-Directed Operations';
+    this.$displayLink.addEventListener('click', e => {
+      e.preventDefault();
+      e.stopPropagation();
+      referencePane.showSDOs(sdoMap[this.$alternativeId] || {}, this.$alternativeId);
+    });
+    this.$container.appendChild(this.$displayLink);
+    this.$outer.appendChild(this.$container);
+    document.body.appendChild(this.$outer);
+  },
+
+  activate(el) {
+    clearTimeout(this.deactiveTimeout);
+    Toolbox.deactivate();
+    this.$alternativeId = el.id;
+    let numSdos = Object.keys(sdoMap[this.$alternativeId] || {}).length;
+    this.$displayLink.textContent = 'Syntax-Directed Operations (' + numSdos + ')';
+    this.$outer.classList.add('active');
+    let top = el.offsetTop - this.$outer.offsetHeight;
+    let left = el.offsetLeft + 50 - 10; // 50px = padding-left(=75px) + text-indent(=-25px)
+    this.$outer.setAttribute('style', 'left: ' + left + 'px; top: ' + top + 'px');
+    if (top < document.body.scrollTop) {
+      this.$container.scrollIntoView();
+    }
+  },
+
+  deactivate() {
+    clearTimeout(this.deactiveTimeout);
+    this.$outer.classList.remove('active');
+  },
+};
+
+document.addEventListener('DOMContentLoaded', () => {
+  if (typeof sdoMap == 'undefined') {
+    console.error('could not find sdo map');
+    return;
+  }
+  sdoBox.init();
+
+  let insideTooltip = false;
+  sdoBox.$outer.addEventListener('pointerenter', () => {
+    insideTooltip = true;
+  });
+  sdoBox.$outer.addEventListener('pointerleave', () => {
+    insideTooltip = false;
+    sdoBox.deactivate();
+  });
+
+  sdoBox.deactiveTimeout = null;
+  [].forEach.call(document.querySelectorAll('emu-grammar[type=definition] emu-rhs'), node => {
+    node.addEventListener('pointerenter', function () {
+      sdoBox.activate(this);
+    });
+
+    node.addEventListener('pointerleave', () => {
+      sdoBox.deactiveTimeout = setTimeout(() => {
+        if (!insideTooltip) {
+          sdoBox.deactivate();
+        }
+      }, 500);
+    });
+  });
+
+  document.addEventListener(
+    'keydown',
+    debounce(e => {
+      if (e.code === 'Escape') {
+        sdoBox.deactivate();
+      }
+    })
+  );
+});
+
+'use strict';
+function Search(menu) {
+  this.menu = menu;
+  this.$search = document.getElementById('menu-search');
+  this.$searchBox = document.getElementById('menu-search-box');
+  this.$searchResults = document.getElementById('menu-search-results');
+
+  this.loadBiblio();
+
+  document.addEventListener('keydown', this.documentKeydown.bind(this));
+
+  this.$searchBox.addEventListener(
+    'keydown',
+    debounce(this.searchBoxKeydown.bind(this), { stopPropagation: true })
+  );
+  this.$searchBox.addEventListener(
+    'keyup',
+    debounce(this.searchBoxKeyup.bind(this), { stopPropagation: true })
+  );
+
+  // Perform an initial search if the box is not empty.
+  if (this.$searchBox.value) {
+    this.search(this.$searchBox.value);
+  }
+}
+
+Search.prototype.loadBiblio = function () {
+  if (typeof biblio === 'undefined') {
+    console.error('could not find biblio');
+    this.biblio = { refToClause: {}, entries: [] };
+  } else {
+    this.biblio = biblio;
+    this.biblio.clauses = this.biblio.entries.filter(e => e.type === 'clause');
+    this.biblio.byId = this.biblio.entries.reduce((map, entry) => {
+      map[entry.id] = entry;
+      return map;
+    }, {});
+    let refParentClause = Object.create(null);
+    this.biblio.refParentClause = refParentClause;
+    let refsByClause = this.biblio.refsByClause;
+    Object.keys(refsByClause).forEach(clause => {
+      refsByClause[clause].forEach(ref => {
+        refParentClause[ref] = clause;
+      });
+    });
+  }
+};
+
+Search.prototype.documentKeydown = function (e) {
+  if (e.key === '/') {
+    e.preventDefault();
+    e.stopPropagation();
+    this.triggerSearch();
+  }
+};
+
+Search.prototype.searchBoxKeydown = function (e) {
+  e.stopPropagation();
+  e.preventDefault();
+  if (e.keyCode === 191 && e.target.value.length === 0) {
+    e.preventDefault();
+  } else if (e.keyCode === 13) {
+    e.preventDefault();
+    this.selectResult();
+  }
+};
+
+Search.prototype.searchBoxKeyup = function (e) {
+  if (e.keyCode === 13 || e.keyCode === 9) {
+    return;
+  }
+
+  this.search(e.target.value);
+};
+
+Search.prototype.triggerSearch = function () {
+  if (this.menu.isVisible()) {
+    this._closeAfterSearch = false;
+  } else {
+    this._closeAfterSearch = true;
+    this.menu.show();
+  }
+
+  this.$searchBox.focus();
+  this.$searchBox.select();
+};
+// bit 12 - Set if the result starts with searchString
+// bits 8-11: 8 - number of chunks multiplied by 2 if cases match, otherwise 1.
+// bits 1-7: 127 - length of the entry
+// General scheme: prefer case sensitive matches with fewer chunks, and otherwise
+// prefer shorter matches.
+function relevance(result) {
+  let relevance = 0;
+
+  relevance = Math.max(0, 8 - result.match.chunks) << 7;
+
+  if (result.match.caseMatch) {
+    relevance *= 2;
+  }
+
+  if (result.match.prefix) {
+    relevance += 2048;
+  }
+
+  relevance += Math.max(0, 255 - result.key.length);
+
+  return relevance;
+}
+
+Search.prototype.search = function (searchString) {
+  if (searchString === '') {
+    this.displayResults([]);
+    this.hideSearch();
+    return;
+  } else {
+    this.showSearch();
+  }
+
+  if (searchString.length === 1) {
+    this.displayResults([]);
+    return;
+  }
+
+  let results;
+
+  if (/^[\d.]*$/.test(searchString)) {
+    results = this.biblio.clauses
+      .filter(clause => clause.number.substring(0, searchString.length) === searchString)
+      .map(clause => ({ key: getKey(clause), entry: clause }));
+  } else {
+    results = [];
+
+    for (let i = 0; i < this.biblio.entries.length; i++) {
+      let entry = this.biblio.entries[i];
+      let key = getKey(entry);
+      if (!key) {
+        // biblio entries without a key aren't searchable
+        continue;
+      }
+
+      let match = fuzzysearch(searchString, key);
+      if (match) {
+        results.push({ key, entry, match });
+      }
+    }
+
+    results.forEach(result => {
+      result.relevance = relevance(result, searchString);
+    });
+
+    results = results.sort((a, b) => b.relevance - a.relevance);
+  }
+
+  if (results.length > 50) {
+    results = results.slice(0, 50);
+  }
+
+  this.displayResults(results);
+};
+Search.prototype.hideSearch = function () {
+  this.$search.classList.remove('active');
+};
+
+Search.prototype.showSearch = function () {
+  this.$search.classList.add('active');
+};
+
+Search.prototype.selectResult = function () {
+  let $first = this.$searchResults.querySelector('li:first-child a');
+
+  if ($first) {
+    document.location = $first.getAttribute('href');
+  }
+
+  this.$searchBox.value = '';
+  this.$searchBox.blur();
+  this.displayResults([]);
+  this.hideSearch();
+
+  if (this._closeAfterSearch) {
+    this.menu.hide();
+  }
+};
+
+Search.prototype.displayResults = function (results) {
+  if (results.length > 0) {
+    this.$searchResults.classList.remove('no-results');
+
+    let html = '<ul>';
+
+    results.forEach(result => {
+      let key = result.key;
+      let entry = result.entry;
+      let id = entry.id;
+      let cssClass = '';
+      let text = '';
+
+      if (entry.type === 'clause') {
+        let number = entry.number ? entry.number + ' ' : '';
+        text = number + key;
+        cssClass = 'clause';
+        id = entry.id;
+      } else if (entry.type === 'production') {
+        text = key;
+        cssClass = 'prod';
+        id = entry.id;
+      } else if (entry.type === 'op') {
+        text = key;
+        cssClass = 'op';
+        id = entry.id || entry.refId;
+      } else if (entry.type === 'term') {
+        text = key;
+        cssClass = 'term';
+        id = entry.id || entry.refId;
+      }
+
+      if (text) {
+        // prettier-ignore
+        html += `<li class=menu-search-result-${cssClass}><a href="${makeLinkToId(id)}">${text}</a></li>`;
+      }
+    });
+
+    html += '</ul>';
+
+    this.$searchResults.innerHTML = html;
+  } else {
+    this.$searchResults.innerHTML = '';
+    this.$searchResults.classList.add('no-results');
+  }
+};
+
+function getKey(item) {
+  if (item.key) {
+    return item.key;
+  }
+  switch (item.type) {
+    case 'clause':
+      return item.title || item.titleHTML;
+    case 'production':
+      return item.name;
+    case 'op':
+      return item.aoid;
+    case 'term':
+      return item.term;
+    case 'table':
+    case 'figure':
+    case 'example':
+    case 'note':
+      return item.caption;
+    case 'step':
+      return item.id;
+    default:
+      throw new Error("Can't get key for " + item.type);
+  }
+}
+
+function Menu() {
+  this.$toggle = document.getElementById('menu-toggle');
+  this.$menu = document.getElementById('menu');
+  this.$toc = document.querySelector('menu-toc > ol');
+  this.$pins = document.querySelector('#menu-pins');
+  this.$pinList = document.getElementById('menu-pins-list');
+  this.$toc = document.querySelector('#menu-toc > ol');
+  this.$specContainer = document.getElementById('spec-container');
+  this.search = new Search(this);
+
+  this._pinnedIds = {};
+  this.loadPinEntries();
+
+  // toggle menu
+  this.$toggle.addEventListener('click', this.toggle.bind(this));
+
+  // keydown events for pinned clauses
+  document.addEventListener('keydown', this.documentKeydown.bind(this));
+
+  // toc expansion
+  let tocItems = this.$menu.querySelectorAll('#menu-toc li');
+  for (let i = 0; i < tocItems.length; i++) {
+    let $item = tocItems[i];
+    $item.addEventListener('click', event => {
+      $item.classList.toggle('active');
+      event.stopPropagation();
+    });
+  }
+
+  // close toc on toc item selection
+  let tocLinks = this.$menu.querySelectorAll('#menu-toc li > a');
+  for (let i = 0; i < tocLinks.length; i++) {
+    let $link = tocLinks[i];
+    $link.addEventListener('click', event => {
+      this.toggle();
+      event.stopPropagation();
+    });
+  }
+
+  // update active clause on scroll
+  window.addEventListener('scroll', debounce(this.updateActiveClause.bind(this)));
+  this.updateActiveClause();
+
+  // prevent menu scrolling from scrolling the body
+  this.$toc.addEventListener('wheel', e => {
+    let target = e.currentTarget;
+    let offTop = e.deltaY < 0 && target.scrollTop === 0;
+    if (offTop) {
+      e.preventDefault();
+    }
+    let offBottom = e.deltaY > 0 && target.offsetHeight + target.scrollTop >= target.scrollHeight;
+
+    if (offBottom) {
+      e.preventDefault();
+    }
+  });
+}
+
+Menu.prototype.documentKeydown = function (e) {
+  e.stopPropagation();
+  if (e.keyCode === 80) {
+    this.togglePinEntry();
+  } else if (e.keyCode > 48 && e.keyCode < 58) {
+    this.selectPin(e.keyCode - 49);
+  }
+};
+
+Menu.prototype.updateActiveClause = function () {
+  this.setActiveClause(findActiveClause(this.$specContainer));
+};
+
+Menu.prototype.setActiveClause = function (clause) {
+  this.$activeClause = clause;
+  this.revealInToc(this.$activeClause);
+};
+
+Menu.prototype.revealInToc = function (path) {
+  let current = this.$toc.querySelectorAll('li.revealed');
+  for (let i = 0; i < current.length; i++) {
+    current[i].classList.remove('revealed');
+    current[i].classList.remove('revealed-leaf');
+  }
+
+  current = this.$toc;
+  let index = 0;
+  outer: while (index < path.length) {
+    let children = current.children;
+    for (let i = 0; i < children.length; i++) {
+      if ('#' + path[index].id === children[i].children[1].hash) {
+        children[i].classList.add('revealed');
+        if (index === path.length - 1) {
+          children[i].classList.add('revealed-leaf');
+          let rect = children[i].getBoundingClientRect();
+          // this.$toc.getBoundingClientRect().top;
+          let tocRect = this.$toc.getBoundingClientRect();
+          if (rect.top + 10 > tocRect.bottom) {
+            this.$toc.scrollTop =
+              this.$toc.scrollTop + (rect.top - tocRect.bottom) + (rect.bottom - rect.top);
+          } else if (rect.top < tocRect.top) {
+            this.$toc.scrollTop = this.$toc.scrollTop - (tocRect.top - rect.top);
+          }
+        }
+        current = children[i].querySelector('ol');
+        index++;
+        continue outer;
+      }
+    }
+    console.log('could not find location in table of contents', path);
+    break;
+  }
+};
+
+function findActiveClause(root, path) {
+  path = path || [];
+
+  let visibleClauses = getVisibleClauses(root, path);
+  let midpoint = Math.floor(window.innerHeight / 2);
+
+  for (let [$clause, path] of visibleClauses) {
+    let { top: clauseTop, bottom: clauseBottom } = $clause.getBoundingClientRect();
+    let isFullyVisibleAboveTheFold =
+      clauseTop > 0 && clauseTop < midpoint && clauseBottom < window.innerHeight;
+    if (isFullyVisibleAboveTheFold) {
+      return path;
+    }
+  }
+
+  visibleClauses.sort(([, pathA], [, pathB]) => pathB.length - pathA.length);
+  for (let [$clause, path] of visibleClauses) {
+    let { top: clauseTop, bottom: clauseBottom } = $clause.getBoundingClientRect();
+    let $header = $clause.querySelector('h1');
+    let clauseStyles = getComputedStyle($clause);
+    let marginTop = Math.max(
+      0,
+      parseInt(clauseStyles['margin-top']),
+      parseInt(getComputedStyle($header)['margin-top'])
+    );
+    let marginBottom = Math.max(0, parseInt(clauseStyles['margin-bottom']));
+    let crossesMidpoint =
+      clauseTop - marginTop <= midpoint && clauseBottom + marginBottom >= midpoint;
+    if (crossesMidpoint) {
+      return path;
+    }
+  }
+
+  return path;
+}
+
+function getVisibleClauses(root, path) {
+  let childClauses = getChildClauses(root);
+  path = path || [];
+
+  let result = [];
+
+  let seenVisibleClause = false;
+  for (let $clause of childClauses) {
+    let { top: clauseTop, bottom: clauseBottom } = $clause.getBoundingClientRect();
+    let isPartiallyVisible =
+      (clauseTop > 0 && clauseTop < window.innerHeight) ||
+      (clauseBottom > 0 && clauseBottom < window.innerHeight) ||
+      (clauseTop < 0 && clauseBottom > window.innerHeight);
+
+    if (isPartiallyVisible) {
+      seenVisibleClause = true;
+      let innerPath = path.concat($clause);
+      result.push([$clause, innerPath]);
+      result.push(...getVisibleClauses($clause, innerPath));
+    } else if (seenVisibleClause) {
+      break;
+    }
+  }
+
+  return result;
+}
+
+function* getChildClauses(root) {
+  for (let el of root.children) {
+    switch (el.nodeName) {
+      // descend into <emu-import>
+      case 'EMU-IMPORT':
+        yield* getChildClauses(el);
+        break;
+
+      // accept <emu-clause>, <emu-intro>, and <emu-annex>
+      case 'EMU-CLAUSE':
+      case 'EMU-INTRO':
+      case 'EMU-ANNEX':
+        yield el;
+    }
+  }
+}
+
+Menu.prototype.toggle = function () {
+  this.$menu.classList.toggle('active');
+};
+
+Menu.prototype.show = function () {
+  this.$menu.classList.add('active');
+};
+
+Menu.prototype.hide = function () {
+  this.$menu.classList.remove('active');
+};
+
+Menu.prototype.isVisible = function () {
+  return this.$menu.classList.contains('active');
+};
+
+Menu.prototype.showPins = function () {
+  this.$pins.classList.add('active');
+};
+
+Menu.prototype.hidePins = function () {
+  this.$pins.classList.remove('active');
+};
+
+Menu.prototype.addPinEntry = function (id) {
+  let entry = this.search.biblio.byId[id];
+  if (!entry) {
+    // id was deleted after pin (or something) so remove it
+    delete this._pinnedIds[id];
+    this.persistPinEntries();
+    return;
+  }
+
+  if (entry.type === 'clause') {
+    let prefix;
+    if (entry.number) {
+      prefix = entry.number + ' ';
+    } else {
+      prefix = '';
+    }
+    // prettier-ignore
+    this.$pinList.innerHTML += `<li><a href="${makeLinkToId(entry.id)}">${prefix}${entry.titleHTML}</a></li>`;
+  } else {
+    this.$pinList.innerHTML += `<li><a href="${makeLinkToId(entry.id)}">${getKey(entry)}</a></li>`;
+  }
+
+  if (Object.keys(this._pinnedIds).length === 0) {
+    this.showPins();
+  }
+  this._pinnedIds[id] = true;
+  this.persistPinEntries();
+};
+
+Menu.prototype.removePinEntry = function (id) {
+  let item = this.$pinList.querySelector(`a[href="${makeLinkToId(id)}"]`).parentNode;
+  this.$pinList.removeChild(item);
+  delete this._pinnedIds[id];
+  if (Object.keys(this._pinnedIds).length === 0) {
+    this.hidePins();
+  }
+
+  this.persistPinEntries();
+};
+
+Menu.prototype.persistPinEntries = function () {
+  try {
+    if (!window.localStorage) return;
+  } catch (e) {
+    return;
+  }
+
+  localStorage.pinEntries = JSON.stringify(Object.keys(this._pinnedIds));
+};
+
+Menu.prototype.loadPinEntries = function () {
+  try {
+    if (!window.localStorage) return;
+  } catch (e) {
+    return;
+  }
+
+  let pinsString = window.localStorage.pinEntries;
+  if (!pinsString) return;
+  let pins = JSON.parse(pinsString);
+  for (let i = 0; i < pins.length; i++) {
+    this.addPinEntry(pins[i]);
+  }
+};
+
+Menu.prototype.togglePinEntry = function (id) {
+  if (!id) {
+    id = this.$activeClause[this.$activeClause.length - 1].id;
+  }
+
+  if (this._pinnedIds[id]) {
+    this.removePinEntry(id);
+  } else {
+    this.addPinEntry(id);
+  }
+};
+
+Menu.prototype.selectPin = function (num) {
+  document.location = this.$pinList.children[num].children[0].href;
+};
+
+let menu;
+
+document.addEventListener('DOMContentLoaded', init);
+
+function debounce(fn, opts) {
+  opts = opts || {};
+  let timeout;
+  return function (e) {
+    if (opts.stopPropagation) {
+      e.stopPropagation();
+    }
+    let args = arguments;
+    if (timeout) {
+      clearTimeout(timeout);
+    }
+    timeout = setTimeout(() => {
+      timeout = null;
+      fn.apply(this, args);
+    }, 150);
+  };
+}
+
+let CLAUSE_NODES = ['EMU-CLAUSE', 'EMU-INTRO', 'EMU-ANNEX'];
+function findContainer($elem) {
+  let parentClause = $elem.parentNode;
+  while (parentClause && CLAUSE_NODES.indexOf(parentClause.nodeName) === -1) {
+    parentClause = parentClause.parentNode;
+  }
+  return parentClause;
+}
+
+function findLocalReferences(parentClause, name) {
+  let vars = parentClause.querySelectorAll('var');
+  let references = [];
+
+  for (let i = 0; i < vars.length; i++) {
+    let $var = vars[i];
+
+    if ($var.innerHTML === name) {
+      references.push($var);
+    }
+  }
+
+  return references;
+}
+
+let REFERENCED_CLASSES = Array.from({ length: 7 }, (x, i) => `referenced${i}`);
+function chooseHighlightIndex(parentClause) {
+  let counts = REFERENCED_CLASSES.map($class => parentClause.getElementsByClassName($class).length);
+  // Find the earliest index with the lowest count.
+  let minCount = Infinity;
+  let index = null;
+  for (let i = 0; i < counts.length; i++) {
+    if (counts[i] < minCount) {
+      minCount = counts[i];
+      index = i;
+    }
+  }
+  return index;
+}
+
+function toggleFindLocalReferences($elem) {
+  let parentClause = findContainer($elem);
+  let references = findLocalReferences(parentClause, $elem.innerHTML);
+  if ($elem.classList.contains('referenced')) {
+    references.forEach($reference => {
+      $reference.classList.remove('referenced', ...REFERENCED_CLASSES);
+    });
+  } else {
+    let index = chooseHighlightIndex(parentClause);
+    references.forEach($reference => {
+      $reference.classList.add('referenced', `referenced${index}`);
+    });
+  }
+}
+
+function installFindLocalReferences() {
+  document.addEventListener('click', e => {
+    if (e.target.nodeName === 'VAR') {
+      toggleFindLocalReferences(e.target);
+    }
+  });
+}
+
+document.addEventListener('DOMContentLoaded', installFindLocalReferences);
+
+// The following license applies to the fuzzysearch function
+// The MIT License (MIT)
+// Copyright © 2015 Nicolas Bevacqua
+// Copyright © 2016 Brian Terlson
+// Permission is hereby granted, free of charge, to any person obtaining a copy of
+// this software and associated documentation files (the "Software"), to deal in
+// the Software without restriction, including without limitation the rights to
+// use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+// the Software, and to permit persons to whom the Software is furnished to do so,
+// subject to the following conditions:
+
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+// FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+// COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+// IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+function fuzzysearch(searchString, haystack, caseInsensitive) {
+  let tlen = haystack.length;
+  let qlen = searchString.length;
+  let chunks = 1;
+  let finding = false;
+
+  if (qlen > tlen) {
+    return false;
+  }
+
+  if (qlen === tlen) {
+    if (searchString === haystack) {
+      return { caseMatch: true, chunks: 1, prefix: true };
+    } else if (searchString.toLowerCase() === haystack.toLowerCase()) {
+      return { caseMatch: false, chunks: 1, prefix: true };
+    } else {
+      return false;
+    }
+  }
+
+  let j = 0;
+  outer: for (let i = 0; i < qlen; i++) {
+    let nch = searchString[i];
+    while (j < tlen) {
+      let targetChar = haystack[j++];
+      if (targetChar === nch) {
+        finding = true;
+        continue outer;
+      }
+      if (finding) {
+        chunks++;
+        finding = false;
+      }
+    }
+
+    if (caseInsensitive) {
+      return false;
+    }
+
+    return fuzzysearch(searchString.toLowerCase(), haystack.toLowerCase(), true);
+  }
+
+  return { caseMatch: !caseInsensitive, chunks, prefix: j <= qlen };
+}
+
+let referencePane = {
+  init() {
+    this.$container = document.createElement('div');
+    this.$container.setAttribute('id', 'references-pane-container');
+
+    let $spacer = document.createElement('div');
+    $spacer.setAttribute('id', 'references-pane-spacer');
+    $spacer.classList.add('menu-spacer');
+
+    this.$pane = document.createElement('div');
+    this.$pane.setAttribute('id', 'references-pane');
+
+    this.$container.appendChild($spacer);
+    this.$container.appendChild(this.$pane);
+
+    this.$header = document.createElement('div');
+    this.$header.classList.add('menu-pane-header');
+    this.$headerText = document.createElement('span');
+    this.$header.appendChild(this.$headerText);
+    this.$headerRefId = document.createElement('a');
+    this.$header.appendChild(this.$headerRefId);
+    this.$closeButton = document.createElement('span');
+    this.$closeButton.setAttribute('id', 'references-pane-close');
+    this.$closeButton.addEventListener('click', () => {
+      this.deactivate();
+    });
+    this.$header.appendChild(this.$closeButton);
+
+    this.$pane.appendChild(this.$header);
+    let tableContainer = document.createElement('div');
+    tableContainer.setAttribute('id', 'references-pane-table-container');
+
+    this.$table = document.createElement('table');
+    this.$table.setAttribute('id', 'references-pane-table');
+
+    this.$tableBody = this.$table.createTBody();
+
+    tableContainer.appendChild(this.$table);
+    this.$pane.appendChild(tableContainer);
+
+    menu.$specContainer.appendChild(this.$container);
+  },
+
+  activate() {
+    this.$container.classList.add('active');
+  },
+
+  deactivate() {
+    this.$container.classList.remove('active');
+    this.state = null;
+  },
+
+  showReferencesFor(entry) {
+    this.activate();
+    this.state = { type: 'ref', id: entry.id };
+    this.$headerText.textContent = 'References to ';
+    let newBody = document.createElement('tbody');
+    let previousId;
+    let previousCell;
+    let dupCount = 0;
+    this.$headerRefId.textContent = '#' + entry.id;
+    this.$headerRefId.setAttribute('href', makeLinkToId(entry.id));
+    this.$headerRefId.style.display = 'inline';
+    (entry.referencingIds || [])
+      .map(id => {
+        let cid = menu.search.biblio.refParentClause[id];
+        let clause = menu.search.biblio.byId[cid];
+        if (clause == null) {
+          throw new Error('could not find clause for id ' + cid);
+        }
+        return { id, clause };
+      })
+      .sort((a, b) => sortByClauseNumber(a.clause, b.clause))
+      .forEach(record => {
+        if (previousId === record.clause.id) {
+          previousCell.innerHTML += ` (<a href="${makeLinkToId(record.id)}">${dupCount + 2}</a>)`;
+          dupCount++;
+        } else {
+          let row = newBody.insertRow();
+          let cell = row.insertCell();
+          cell.innerHTML = record.clause.number;
+          cell = row.insertCell();
+          cell.innerHTML = `<a href="${makeLinkToId(record.id)}">${record.clause.titleHTML}</a>`;
+          previousCell = cell;
+          previousId = record.clause.id;
+          dupCount = 0;
+        }
+      }, this);
+    this.$table.removeChild(this.$tableBody);
+    this.$tableBody = newBody;
+    this.$table.appendChild(this.$tableBody);
+  },
+
+  showSDOs(sdos, alternativeId) {
+    let rhs = document.getElementById(alternativeId);
+    let parentName = rhs.parentNode.getAttribute('name');
+    let colons = rhs.parentNode.querySelector('emu-geq');
+    rhs = rhs.cloneNode(true);
+    rhs.querySelectorAll('emu-params,emu-constraints').forEach(e => {
+      e.remove();
+    });
+    rhs.querySelectorAll('[id]').forEach(e => {
+      e.removeAttribute('id');
+    });
+    rhs.querySelectorAll('a').forEach(e => {
+      e.parentNode.replaceChild(document.createTextNode(e.textContent), e);
+    });
+
+    // prettier-ignore
+    this.$headerText.innerHTML = `Syntax-Directed Operations for<br><a href="${makeLinkToId(alternativeId)}" class="menu-pane-header-production"><emu-nt>${parentName}</emu-nt> ${colons.outerHTML} </a>`;
+    this.$headerText.querySelector('a').append(rhs);
+    this.showSDOsBody(sdos, alternativeId);
+  },
+
+  showSDOsBody(sdos, alternativeId) {
+    this.activate();
+    this.state = { type: 'sdo', id: alternativeId, html: this.$headerText.innerHTML };
+    this.$headerRefId.style.display = 'none';
+    let newBody = document.createElement('tbody');
+    Object.keys(sdos).forEach(sdoName => {
+      let pair = sdos[sdoName];
+      let clause = pair.clause;
+      let ids = pair.ids;
+      let first = ids[0];
+      let row = newBody.insertRow();
+      let cell = row.insertCell();
+      cell.innerHTML = clause;
+      cell = row.insertCell();
+      let html = '<a href="' + makeLinkToId(first) + '">' + sdoName + '</a>';
+      for (let i = 1; i < ids.length; ++i) {
+        html += ' (<a href="' + makeLinkToId(ids[i]) + '">' + (i + 1) + '</a>)';
+      }
+      cell.innerHTML = html;
+    });
+    this.$table.removeChild(this.$tableBody);
+    this.$tableBody = newBody;
+    this.$table.appendChild(this.$tableBody);
+  },
+};
+
+let Toolbox = {
+  init() {
+    this.$outer = document.createElement('div');
+    this.$outer.classList.add('toolbox-container');
+    this.$container = document.createElement('div');
+    this.$container.classList.add('toolbox');
+    this.$outer.appendChild(this.$container);
+    this.$permalink = document.createElement('a');
+    this.$permalink.textContent = 'Permalink';
+    this.$pinLink = document.createElement('a');
+    this.$pinLink.textContent = 'Pin';
+    this.$pinLink.setAttribute('href', '#');
+    this.$pinLink.addEventListener('click', e => {
+      e.preventDefault();
+      e.stopPropagation();
+      menu.togglePinEntry(this.entry.id);
+      this.$pinLink.textContent = menu._pinnedIds[this.entry.id] ? 'Unpin' : 'Pin';
+    });
+
+    this.$refsLink = document.createElement('a');
+    this.$refsLink.setAttribute('href', '#');
+    this.$refsLink.addEventListener('click', e => {
+      e.preventDefault();
+      e.stopPropagation();
+      referencePane.showReferencesFor(this.entry);
+    });
+    this.$container.appendChild(this.$permalink);
+    this.$container.appendChild(this.$pinLink);
+    this.$container.appendChild(this.$refsLink);
+    document.body.appendChild(this.$outer);
+  },
+
+  activate(el, entry, target) {
+    if (el === this._activeEl) return;
+    sdoBox.deactivate();
+    this.active = true;
+    this.entry = entry;
+    this.$pinLink.textContent = menu._pinnedIds[entry.id] ? 'Unpin' : 'Pin';
+    this.$outer.classList.add('active');
+    this.top = el.offsetTop - this.$outer.offsetHeight;
+    this.left = el.offsetLeft - 10;
+    this.$outer.setAttribute('style', 'left: ' + this.left + 'px; top: ' + this.top + 'px');
+    this.updatePermalink();
+    this.updateReferences();
+    this._activeEl = el;
+    if (this.top < document.body.scrollTop && el === target) {
+      // don't scroll unless it's a small thing (< 200px)
+      this.$outer.scrollIntoView();
+    }
+  },
+
+  updatePermalink() {
+    this.$permalink.setAttribute('href', makeLinkToId(this.entry.id));
+  },
+
+  updateReferences() {
+    this.$refsLink.textContent = `References (${(this.entry.referencingIds || []).length})`;
+  },
+
+  activateIfMouseOver(e) {
+    let ref = this.findReferenceUnder(e.target);
+    if (ref && (!this.active || e.pageY > this._activeEl.offsetTop)) {
+      let entry = menu.search.biblio.byId[ref.id];
+      this.activate(ref.element, entry, e.target);
+    } else if (
+      this.active &&
+      (e.pageY < this.top || e.pageY > this._activeEl.offsetTop + this._activeEl.offsetHeight)
+    ) {
+      this.deactivate();
+    }
+  },
+
+  findReferenceUnder(el) {
+    while (el) {
+      let parent = el.parentNode;
+      if (el.nodeName === 'EMU-RHS' || el.nodeName === 'EMU-PRODUCTION') {
+        return null;
+      }
+      if (
+        el.nodeName === 'H1' &&
+        parent.nodeName.match(/EMU-CLAUSE|EMU-ANNEX|EMU-INTRO/) &&
+        parent.id
+      ) {
+        return { element: el, id: parent.id };
+      } else if (el.nodeName === 'EMU-NT') {
+        if (
+          parent.nodeName === 'EMU-PRODUCTION' &&
+          parent.id &&
+          parent.id[0] !== '_' &&
+          parent.firstElementChild === el
+        ) {
+          // return the LHS non-terminal element
+          return { element: el, id: parent.id };
+        }
+        return null;
+      } else if (
+        el.nodeName.match(/EMU-(?!CLAUSE|XREF|ANNEX|INTRO)|DFN/) &&
+        el.id &&
+        el.id[0] !== '_'
+      ) {
+        if (
+          el.nodeName === 'EMU-FIGURE' ||
+          el.nodeName === 'EMU-TABLE' ||
+          el.nodeName === 'EMU-EXAMPLE'
+        ) {
+          // return the figcaption element
+          return { element: el.children[0].children[0], id: el.id };
+        } else {
+          return { element: el, id: el.id };
+        }
+      }
+      el = parent;
+    }
+  },
+
+  deactivate() {
+    this.$outer.classList.remove('active');
+    this._activeEl = null;
+    this.active = false;
+  },
+};
+
+function sortByClauseNumber(clause1, clause2) {
+  let c1c = clause1.number.split('.');
+  let c2c = clause2.number.split('.');
+
+  for (let i = 0; i < c1c.length; i++) {
+    if (i >= c2c.length) {
+      return 1;
+    }
+
+    let c1 = c1c[i];
+    let c2 = c2c[i];
+    let c1cn = Number(c1);
+    let c2cn = Number(c2);
+
+    if (Number.isNaN(c1cn) && Number.isNaN(c2cn)) {
+      if (c1 > c2) {
+        return 1;
+      } else if (c1 < c2) {
+        return -1;
+      }
+    } else if (!Number.isNaN(c1cn) && Number.isNaN(c2cn)) {
+      return -1;
+    } else if (Number.isNaN(c1cn) && !Number.isNaN(c2cn)) {
+      return 1;
+    } else if (c1cn > c2cn) {
+      return 1;
+    } else if (c1cn < c2cn) {
+      return -1;
+    }
+  }
+
+  if (c1c.length === c2c.length) {
+    return 0;
+  }
+  return -1;
+}
+
+function makeLinkToId(id) {
+  let hash = '#' + id;
+  if (typeof idToSection === 'undefined' || !idToSection[id]) {
+    return hash;
+  }
+  let targetSec = idToSection[id];
+  return (targetSec === 'index' ? './' : targetSec + '.html') + hash;
+}
+
+function doShortcut(e) {
+  if (!(e.target instanceof HTMLElement)) {
+    return;
+  }
+  let target = e.target;
+  let name = target.nodeName.toLowerCase();
+  if (name === 'textarea' || name === 'input' || name === 'select' || target.isContentEditable) {
+    return;
+  }
+  if (e.altKey || e.ctrlKey || e.metaKey) {
+    return;
+  }
+  if (e.key === 'm' && usesMultipage) {
+    let pathParts = location.pathname.split('/');
+    let hash = location.hash;
+    if (pathParts[pathParts.length - 2] === 'multipage') {
+      if (hash === '') {
+        let sectionName = pathParts[pathParts.length - 1];
+        if (sectionName.endsWith('.html')) {
+          sectionName = sectionName.slice(0, -5);
+        }
+        if (idToSection['sec-' + sectionName] !== undefined) {
+          hash = '#sec-' + sectionName;
+        }
+      }
+      location = pathParts.slice(0, -2).join('/') + '/' + hash;
+    } else {
+      location = 'multipage/' + hash;
+    }
+  } else if (e.key === 'u') {
+    document.documentElement.classList.toggle('show-ao-annotations');
+  } else if (e.key === '?') {
+    document.getElementById('shortcuts-help').classList.toggle('active');
+  }
+}
+
+function init() {
+  menu = new Menu();
+  let $container = document.getElementById('spec-container');
+  $container.addEventListener(
+    'mouseover',
+    debounce(e => {
+      Toolbox.activateIfMouseOver(e);
+    })
+  );
+  document.addEventListener(
+    'keydown',
+    debounce(e => {
+      if (e.code === 'Escape') {
+        if (Toolbox.active) {
+          Toolbox.deactivate();
+        }
+        document.getElementById('shortcuts-help').classList.remove('active');
+      }
+    })
+  );
+}
+
+document.addEventListener('keypress', doShortcut);
+
+document.addEventListener('DOMContentLoaded', () => {
+  Toolbox.init();
+  referencePane.init();
+});
+
+// preserve state during navigation
+
+function getTocPath(li) {
+  let path = [];
+  let pointer = li;
+  while (true) {
+    let parent = pointer.parentElement;
+    if (parent == null) {
+      return null;
+    }
+    let index = [].indexOf.call(parent.children, pointer);
+    if (index == -1) {
+      return null;
+    }
+    path.unshift(index);
+    pointer = parent.parentElement;
+    if (pointer == null) {
+      return null;
+    }
+    if (pointer.id === 'menu-toc') {
+      break;
+    }
+    if (pointer.tagName !== 'LI') {
+      return null;
+    }
+  }
+  return path;
+}
+
+function activateTocPath(path) {
+  try {
+    let pointer = document.getElementById('menu-toc');
+    for (let index of path) {
+      pointer = pointer.querySelector('ol').children[index];
+    }
+    pointer.classList.add('active');
+  } catch (e) {
+    // pass
+  }
+}
+
+function getActiveTocPaths() {
+  return [...menu.$menu.querySelectorAll('.active')].map(getTocPath).filter(p => p != null);
+}
+
+function initTOCExpansion(visibleItemLimit) {
+  // Initialize to a reasonable amount of TOC expansion:
+  // * Expand any full-breadth nesting level up to visibleItemLimit.
+  // * Expand any *single-item* level while under visibleItemLimit (even if that pushes over it).
+
+  // Limit to initialization by bailing out if any parent item is already expanded.
+  const tocItems = Array.from(document.querySelectorAll('#menu-toc li'));
+  if (tocItems.some(li => li.classList.contains('active') && li.querySelector('li'))) {
+    return;
+  }
+
+  const selfAndSiblings = maybe => Array.from(maybe?.parentNode.children ?? []);
+  let currentLevelItems = selfAndSiblings(tocItems[0]);
+  let availableCount = visibleItemLimit - currentLevelItems.length;
+  while (availableCount > 0 && currentLevelItems.length) {
+    const nextLevelItems = currentLevelItems.flatMap(li => selfAndSiblings(li.querySelector('li')));
+    availableCount -= nextLevelItems.length;
+    if (availableCount > 0 || currentLevelItems.length === 1) {
+      // Expand parent items of the next level down (i.e., current-level items with children).
+      for (const ol of new Set(nextLevelItems.map(li => li.parentNode))) {
+        ol.closest('li').classList.add('active');
+      }
+    }
+    currentLevelItems = nextLevelItems;
+  }
+}
+
+function initState() {
+  if (typeof menu === 'undefined' || window.navigating) {
+    return;
+  }
+  const storage = typeof sessionStorage !== 'undefined' ? sessionStorage : Object.create(null);
+  if (storage.referencePaneState != null) {
+    let state = JSON.parse(storage.referencePaneState);
+    if (state != null) {
+      if (state.type === 'ref') {
+        let entry = menu.search.biblio.byId[state.id];
+        if (entry != null) {
+          referencePane.showReferencesFor(entry);
+        }
+      } else if (state.type === 'sdo') {
+        let sdos = sdoMap[state.id];
+        if (sdos != null) {
+          referencePane.$headerText.innerHTML = state.html;
+          referencePane.showSDOsBody(sdos, state.id);
+        }
+      }
+      delete storage.referencePaneState;
+    }
+  }
+
+  if (storage.activeTocPaths != null) {
+    document.querySelectorAll('#menu-toc li.active').forEach(li => li.classList.remove('active'));
+    let active = JSON.parse(storage.activeTocPaths);
+    active.forEach(activateTocPath);
+    delete storage.activeTocPaths;
+  } else {
+    initTOCExpansion(20);
+  }
+
+  if (storage.searchValue != null) {
+    let value = JSON.parse(storage.searchValue);
+    menu.search.$searchBox.value = value;
+    menu.search.search(value);
+    delete storage.searchValue;
+  }
+
+  if (storage.tocScroll != null) {
+    let tocScroll = JSON.parse(storage.tocScroll);
+    menu.$toc.scrollTop = tocScroll;
+    delete storage.tocScroll;
+  }
+}
+
+document.addEventListener('DOMContentLoaded', initState);
+
+window.addEventListener('pageshow', initState);
+
+window.addEventListener('beforeunload', () => {
+  if (!window.sessionStorage || typeof menu === 'undefined') {
+    return;
+  }
+  sessionStorage.referencePaneState = JSON.stringify(referencePane.state || null);
+  sessionStorage.activeTocPaths = JSON.stringify(getActiveTocPaths());
+  sessionStorage.searchValue = JSON.stringify(menu.search.$searchBox.value);
+  sessionStorage.tocScroll = JSON.stringify(menu.$toc.scrollTop);
+});
+
+'use strict';
+
+// Manually prefix algorithm step list items with hidden counter representations
+// corresponding with their markers so they get selected and copied with content.
+// We read list-style-type to avoid divergence with the style sheet, but
+// for efficiency assume that all lists at the same nesting depth use the same
+// style (except for those associated with replacement steps).
+// We also precompute some initial items for each supported style type.
+// https://w3c.github.io/csswg-drafts/css-counter-styles/
+
+const lowerLetters = Array.from({ length: 26 }, (_, i) =>
+  String.fromCharCode('a'.charCodeAt(0) + i)
+);
+// Implement the lower-alpha 'alphabetic' algorithm,
+// adjusting for indexing from 0 rather than 1.
+// https://w3c.github.io/csswg-drafts/css-counter-styles/#simple-alphabetic
+// https://w3c.github.io/csswg-drafts/css-counter-styles/#alphabetic-system
+const lowerAlphaTextForIndex = i => {
+  let S = '';
+  for (const N = lowerLetters.length; i >= 0; i--) {
+    S = lowerLetters[i % N] + S;
+    i = Math.floor(i / N);
+  }
+  return S;
+};
+
+const weightedLowerRomanSymbols = Object.entries({
+  m: 1000,
+  cm: 900,
+  d: 500,
+  cd: 400,
+  c: 100,
+  xc: 90,
+  l: 50,
+  xl: 40,
+  x: 10,
+  ix: 9,
+  v: 5,
+  iv: 4,
+  i: 1,
+});
+// Implement the lower-roman 'additive' algorithm,
+// adjusting for indexing from 0 rather than 1.
+// https://w3c.github.io/csswg-drafts/css-counter-styles/#simple-numeric
+// https://w3c.github.io/csswg-drafts/css-counter-styles/#additive-system
+const lowerRomanTextForIndex = i => {
+  let value = i + 1;
+  let S = '';
+  for (const [symbol, weight] of weightedLowerRomanSymbols) {
+    if (!value) break;
+    if (weight > value) continue;
+    const reps = Math.floor(value / weight);
+    S += symbol.repeat(reps);
+    value -= weight * reps;
+  }
+  return S;
+};
+
+// Memoize pure index-to-text functions with an exposed cache for fast retrieval.
+const makeCounter = (pureGetTextForIndex, precomputeCount = 30) => {
+  const cache = Array.from({ length: precomputeCount }, (_, i) => pureGetTextForIndex(i));
+  const getTextForIndex = i => {
+    if (i >= cache.length) cache[i] = pureGetTextForIndex(i);
+    return cache[i];
+  };
+  return { getTextForIndex, cache };
+};
+
+const counterByStyle = {
+  __proto__: null,
+  decimal: makeCounter(i => String(i + 1)),
+  'lower-alpha': makeCounter(lowerAlphaTextForIndex),
+  'upper-alpha': makeCounter(i => lowerAlphaTextForIndex(i).toUpperCase()),
+  'lower-roman': makeCounter(lowerRomanTextForIndex),
+  'upper-roman': makeCounter(i => lowerRomanTextForIndex(i).toUpperCase()),
+};
+const fallbackCounter = makeCounter(() => '?');
+const counterByDepth = [];
+
+function addStepNumberText(
+  ol,
+  depth = 0,
+  special = [...ol.classList].some(c => c.startsWith('nested-'))
+) {
+  let counter = !special && counterByDepth[depth];
+  if (!counter) {
+    const counterStyle = getComputedStyle(ol)['list-style-type'];
+    counter = counterByStyle[counterStyle];
+    if (!counter) {
+      console.warn('unsupported list-style-type', {
+        ol,
+        counterStyle,
+        id: ol.closest('[id]')?.getAttribute('id'),
+      });
+      counterByStyle[counterStyle] = fallbackCounter;
+      counter = fallbackCounter;
+    }
+    if (!special) {
+      counterByDepth[depth] = counter;
+    }
+  }
+  const { cache, getTextForIndex } = counter;
+  let i = (Number(ol.getAttribute('start')) || 1) - 1;
+  for (const li of ol.children) {
+    const marker = document.createElement('span');
+    marker.textContent = `${i < cache.length ? cache[i] : getTextForIndex(i)}. `;
+    marker.setAttribute('aria-hidden', 'true');
+    const attributesContainer = li.querySelector('.attributes-tag');
+    if (attributesContainer == null) {
+      li.prepend(marker);
+    } else {
+      attributesContainer.insertAdjacentElement('afterend', marker);
+    }
+    for (const sublist of li.querySelectorAll(':scope > ol')) {
+      addStepNumberText(sublist, depth + 1, special);
+    }
+    i++;
+  }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  document.querySelectorAll('emu-alg > ol').forEach(ol => {
+    addStepNumberText(ol);
+  });
+});
+
+let sdoMap = JSON.parse(`{}`);
+let biblio = JSON.parse(`{"refsByClause":{"useful-options":["_ref_0","_ref_1"],"editorial-conventions":["_ref_2","_ref_3","_ref_4","_ref_5","_ref_6","_ref_7","_ref_8","_ref_9","_ref_10","_ref_11","_ref_12","_ref_13","_ref_14"],"metadata":["_ref_15","_ref_16"],"emu-alg":["_ref_17","_ref_18","_ref_19","_ref_20","_ref_21","_ref_22","_ref_23","_ref_47","_ref_48"],"labeled-steps":["_ref_24"],"emu-xref":["_ref_25","_ref_26","_ref_27","_ref_28"],"emu-figure":["_ref_29"],"emu-table":["_ref_30"],"emu-example":["_ref_31"],"emu-production":["_ref_32","_ref_33","_ref_34"],"emu-rhs":["_ref_35","_ref_36","_ref_37","_ref_51","_ref_52"],"emu-nt":["_ref_38","_ref_53"],"emu-gmod":["_ref_39"],"emu-gann":["_ref_40"],"emu-gprose":["_ref_41"],"emu-clause-legacy-attributes":["_ref_42","_ref_43"],"definitions":["_ref_44","_ref_45"],"sec-transitive-effect":["_ref_46"],"emu-grammar":["_ref_49","_ref_50"],"emu-prodref":["_ref_54","_ref_55","_ref_56"],"emu-not-ref":["_ref_57"],"grammar":["_ref_58"]},"entries":[{"type":"clause","id":"intro","titleHTML":"Ecmarkup","number":""},{"type":"clause","id":"getting-started","titleHTML":"Getting Started","number":"1"},{"type":"table","id":"build-options","number":1,"caption":"Table 1: Build options","referencingIds":["_ref_15"]},{"type":"table","id":"document-options","number":2,"caption":"Table 2: Document options","referencingIds":["_ref_16"]},{"type":"clause","id":"useful-options","titleHTML":"Options","number":"2"},{"type":"clause","id":"stylesheets-and-scripts","titleHTML":"Stylesheets and Scripts","number":"3"},{"type":"table","id":"emd-overview","number":4,"caption":"Table 4: Inline styles/conventions","referencingIds":["_ref_6"]},{"type":"clause","id":"editorial-conventions","titleHTML":"Editorial Conventions","number":"4"},{"type":"clause","id":"metadata","titleHTML":"Metadata","number":"5","referencingIds":["_ref_0"]},{"type":"clause","id":"emu-intro","titleHTML":"emu-intro","number":"6.1","referencingIds":["_ref_3"]},{"type":"clause","id":"emu-clause-legacy-attributes","titleHTML":"Legacy Attributes","number":"6.2.1"},{"type":"term","term":"structured header","refId":"emu-clause-structured-headers"},{"type":"clause","id":"emu-clause-structured-headers","titleHTML":"Structured Headers","number":"6.2.2","referencingIds":["_ref_42","_ref_43"]},{"type":"op","aoid":"ExampleOperation","refId":"example-normative-optional"},{"type":"clause","id":"example-normative-optional","title":"ExampleOperation ( S [ , length ] )","titleHTML":"ExampleOperation ( <var>S</var> [ , <var>length</var> ] )","number":"6.2.3"},{"type":"clause","id":"emu-clause","titleHTML":"emu-clause","number":"6.2","referencingIds":["_ref_2","_ref_25"]},{"type":"clause","id":"emu-annex","titleHTML":"emu-annex","number":"6.3","referencingIds":["_ref_1","_ref_4"]},{"type":"clause","id":"clauses","titleHTML":"Clauses","number":"6"},{"type":"term","term":"swordfish","id":"swordfish","referencingIds":["_ref_44","_ref_45"]},{"type":"clause","id":"definitions","titleHTML":"Definitions","number":"7"},{"type":"op","aoid":"Effect","refId":"sec-effect"},{"type":"clause","id":"sec-effect","titleHTML":"Effect ( )","number":"8.1","referencingIds":["_ref_46"]},{"type":"op","aoid":"TransitiveEffect","refId":"sec-transitive-effect"},{"type":"clause","id":"sec-transitive-effect","titleHTML":"TransitiveEffect ( )","number":"8.2"},{"type":"clause","id":"effects","titleHTML":"Effects","number":"8","referencingIds":["_ref_23"]},{"type":"step","id":"step-example-label","referencingIds":["_ref_20"]},{"type":"table","id":"algorithm-step-annotation","number":5,"caption":"Table 5: Algorithm Step Annotation","referencingIds":["_ref_17"]},{"type":"clause","id":"labeled-steps","titleHTML":"Step Labels","number":"9.1","referencingIds":["_ref_18","_ref_21"]},{"type":"clause","id":"variable-declarations","titleHTML":"Variable Declarations","number":"9.2","referencingIds":["_ref_22"]},{"type":"op","aoid":"EmuAlg","refId":"emu-alg"},{"type":"clause","id":"emu-alg","titleHTML":"emu-alg","number":"9","referencingIds":["_ref_5","_ref_19","_ref_47","_ref_48"]},{"type":"clause","id":"emu-eqn","titleHTML":"emu-eqn","number":"10","referencingIds":["_ref_7"]},{"type":"clause","id":"emu-note","titleHTML":"emu-note","number":"11","referencingIds":["_ref_8","_ref_26"]},{"type":"step","id":"step-label-example","referencingIds":["_ref_28"]},{"type":"clause","id":"emu-xref","titleHTML":"emu-xref","number":"12","referencingIds":["_ref_14","_ref_24","_ref_29","_ref_30","_ref_31"]},{"type":"clause","id":"emu-not-ref","titleHTML":"emu-not-ref","number":"13","referencingIds":["_ref_57"]},{"type":"clause","id":"emu-figure","titleHTML":"emu-figure","number":"14","referencingIds":["_ref_9"]},{"type":"clause","id":"emu-table","titleHTML":"emu-table","number":"15","referencingIds":["_ref_10"]},{"type":"clause","id":"emu-example","titleHTML":"emu-example","number":"16","referencingIds":["_ref_11"]},{"type":"clause","id":"emu-biblio","titleHTML":"emu-biblio","number":"17","referencingIds":["_ref_27"]},{"type":"production","id":"prod-HexIntegerLiteral","name":"HexIntegerLiteral"},{"type":"production","id":"prod-HexIntegerLiteral","name":"HexIntegerLiteral"},{"type":"clause","id":"emu-grammar","titleHTML":"emu-grammar","number":"18","referencingIds":["_ref_12"]},{"type":"production","id":"prod-DecimalDigit","name":"DecimalDigit"},{"type":"production","id":"prod-Identifier","name":"Identifier"},{"type":"production","id":"prod-SourceCharacter","name":"SourceCharacter"},{"type":"production","id":"prod-ExpressionStatement","name":"ExpressionStatement","referencingIds":["_ref_58"]},{"type":"production","id":"prod-IterationStatement","name":"IterationStatement"},{"type":"production","id":"prod-StatementList","name":"StatementList"},{"type":"term","term":"LHS","refId":"emu-production"},{"type":"term","term":"RHS","refId":"emu-production"},{"type":"clause","id":"emu-production","titleHTML":"emu-production","number":"19.1","referencingIds":["_ref_13","_ref_37","_ref_38","_ref_49","_ref_50","_ref_51","_ref_52","_ref_53","_ref_54","_ref_55","_ref_56"]},{"type":"clause","id":"emu-rhs","titleHTML":"emu-rhs","number":"19.2","referencingIds":["_ref_33"]},{"type":"clause","id":"emu-nt","titleHTML":"emu-nt","number":"19.3","referencingIds":["_ref_32"]},{"type":"clause","id":"emu-t","titleHTML":"emu-t","number":"19.4"},{"type":"clause","id":"emu-gmod","titleHTML":"emu-gmod","number":"19.5"},{"type":"clause","id":"emu-gann","titleHTML":"emu-gann","number":"19.6"},{"type":"clause","id":"emu-gprose","titleHTML":"emu-gprose","number":"19.7"},{"type":"clause","id":"emu-prodref","titleHTML":"emu-prodref","number":"19.8","referencingIds":["_ref_36"]},{"type":"clause","id":"grammar","titleHTML":"Directly Specifying Grammar","number":"19","referencingIds":["_ref_34","_ref_35","_ref_39","_ref_40","_ref_41"]},{"type":"clause","id":"emu-import","titleHTML":"emu-import","number":"20"},{"type":"clause","id":"oldids","titleHTML":"Old IDs","number":"21.1"},{"type":"clause","id":"ins-del","titleHTML":"Indicating Changes","number":"21.2"},{"type":"clause","id":"pre-code","titleHTML":"Code Listings","number":"21.3"},{"type":"clause","id":"miscellaneous","title":"Other Styles & Conventions","titleHTML":"Other Styles &amp; Conventions","number":"21"},{"type":"term","term":"example","refId":"emu-not-ref"}]}`);
+;let usesMultipage = false
\ No newline at end of file
diff --git a/elements.css b/elements.css
new file mode 100644
index 00000000..41156ffe
--- /dev/null
+++ b/elements.css
@@ -0,0 +1,1263 @@
+body {
+  display: flex;
+  word-wrap: break-word;
+  font-size: 18px;
+  line-height: 1.5;
+  font-family: Cambria, Palatino Linotype, Palatino, Liberation Serif, serif;
+  padding: 0;
+  margin: 0;
+  color: #111;
+}
+
+#spec-container {
+  padding: 0 20px;
+  flex-grow: 1;
+  flex-basis: 66%;
+  box-sizing: border-box;
+  overflow: hidden;
+  padding-bottom: 1em;
+}
+
+body.oldtoc {
+  margin: 0 auto;
+}
+
+a {
+  text-decoration: none;
+  color: #206ca7;
+}
+
+a:visited {
+  color: #206ca7;
+}
+
+a:hover {
+  text-decoration: underline;
+  color: #239dee;
+}
+
+a.e-user-code,
+span.e-user-code {
+  white-space: nowrap;
+}
+
+a.e-user-code::before,
+span.e-user-code::before {
+  display: none;
+  color: brown;
+  background-color: white;
+  border: 2pt solid brown;
+  padding: 0.3ex;
+  margin: 0 0.25em 0 0;
+  line-height: 1;
+  vertical-align: text-top;
+  text-transform: uppercase;
+  font-family: 'Comic Code', sans-serif;
+  font-weight: 900;
+  font-size: x-small;
+}
+
+a.e-user-code:hover::before,
+span.e-user-code:hover::before {
+  background-color: brown;
+  color: white;
+}
+
+html.show-ao-annotations a.e-user-code::before,
+html.show-ao-annotations span.e-user-code::before {
+  display: inline-block;
+}
+
+a.e-user-code::before,
+span.e-user-code::before {
+  content: 'UC';
+}
+
+code {
+  font-weight: bold;
+  font-family: Consolas, Monaco, monospace;
+  white-space: pre;
+}
+
+pre code {
+  font-weight: inherit;
+}
+
+pre code.hljs {
+  background-color: #fff;
+  margin: 0;
+  padding: 0;
+}
+
+ol.toc {
+  list-style: none;
+  padding-left: 0;
+}
+
+ol.toc ol.toc {
+  padding-left: 2ex;
+  list-style: none;
+}
+
+var {
+  color: #2aa198;
+  transition: background-color 0.25s ease;
+  cursor: pointer;
+}
+var.field {
+  font: inherit;
+  color: inherit;
+}
+
+var.referenced0 {
+  color: inherit;
+  background-color: #ffff33;
+  box-shadow: 0 0 0 2px #ffff33;
+}
+var.referenced1 {
+  color: inherit;
+  background-color: #ff87a2;
+  box-shadow: 0 0 0 2px #ff87a2;
+}
+var.referenced2 {
+  color: inherit;
+  background-color: #96e885;
+  box-shadow: 0 0 0 2px #96e885;
+}
+var.referenced3 {
+  color: inherit;
+  background-color: #3eeed2;
+  box-shadow: 0 0 0 2px #3eeed2;
+}
+var.referenced4 {
+  color: inherit;
+  background-color: #eacfb6;
+  box-shadow: 0 0 0 2px #eacfb6;
+}
+var.referenced5 {
+  color: inherit;
+  background-color: #82ddff;
+  box-shadow: 0 0 0 2px #82ddff;
+}
+var.referenced6 {
+  color: inherit;
+  background-color: #ffbcf2;
+  box-shadow: 0 0 0 2px #ffbcf2;
+}
+
+emu-const {
+  font-family: sans-serif;
+}
+
+emu-val {
+  font-weight: bold;
+}
+
+/* depth 1 */
+emu-alg ol,
+/* depth 4 */
+emu-alg ol ol ol ol,
+emu-alg ol.nested-thrice,
+emu-alg ol.nested-twice ol,
+emu-alg ol.nested-once ol ol {
+  list-style-type: decimal;
+}
+
+/* depth 2 */
+emu-alg ol ol,
+emu-alg ol.nested-once,
+/* depth 5 */
+emu-alg ol ol ol ol ol,
+emu-alg ol.nested-four-times,
+emu-alg ol.nested-thrice ol,
+emu-alg ol.nested-twice ol ol,
+emu-alg ol.nested-once ol ol ol {
+  list-style-type: lower-alpha;
+}
+
+/* depth 3 */
+emu-alg ol ol ol,
+emu-alg ol.nested-twice,
+emu-alg ol.nested-once ol,
+/* depth 6 */
+emu-alg ol ol ol ol ol ol,
+emu-alg ol.nested-lots,
+emu-alg ol.nested-four-times ol,
+emu-alg ol.nested-thrice ol ol,
+emu-alg ol.nested-twice ol ol ol,
+emu-alg ol.nested-once ol ol ol ol,
+/* depth 7+ */
+emu-alg ol.nested-lots ol {
+  list-style-type: lower-roman;
+}
+
+emu-alg [aria-hidden='true'] {
+  font-size: 0;
+}
+
+emu-eqn {
+  display: block;
+  margin-left: 4em;
+}
+
+emu-eqn.inline {
+  display: inline;
+  margin: 0;
+}
+
+emu-eqn div:first-child {
+  margin-left: -2em;
+}
+
+emu-note {
+  margin: 1em 0;
+  display: flex;
+  flex-direction: row;
+  color: inherit;
+  border-left: 5px solid #52e052;
+  background: #e9fbe9;
+  padding: 10px 10px 10px 0;
+}
+
+emu-note > span.note {
+  flex-basis: 100px;
+  min-width: 100px;
+  flex-grow: 0;
+  flex-shrink: 1;
+  text-transform: uppercase;
+  padding-left: 5px;
+}
+
+emu-note[type='editor'] {
+  border-left-color: #faa;
+}
+
+emu-note > div.note-contents {
+  flex-grow: 1;
+  flex-shrink: 1;
+  overflow: auto;
+}
+
+emu-note > div.note-contents > p:first-of-type {
+  margin-top: 0;
+}
+
+emu-note > div.note-contents > p:last-of-type {
+  margin-bottom: 0;
+}
+
+emu-table:not(.code) td code {
+  white-space: normal;
+}
+
+emu-figure {
+  display: block;
+}
+
+emu-example {
+  display: block;
+  margin: 1em 3em;
+}
+
+emu-example figure figcaption {
+  margin-top: 0.5em;
+  text-align: left;
+}
+
+emu-figure figure,
+emu-example figure,
+emu-table figure {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+emu-production {
+  display: block;
+}
+
+emu-grammar[type='example'] emu-production,
+emu-grammar[type='definition'] emu-production {
+  margin-top: 1em;
+  margin-bottom: 1em;
+  margin-left: 5ex;
+}
+
+emu-grammar.inline,
+emu-production.inline,
+emu-grammar.inline emu-production emu-rhs,
+emu-production.inline emu-rhs,
+emu-grammar[collapsed] emu-production emu-rhs {
+  display: inline;
+  padding-left: 1ex;
+  margin-left: 0;
+}
+
+emu-production[collapsed] emu-rhs {
+  display: inline;
+  padding-left: 0.5ex;
+  margin-left: 0;
+}
+
+emu-grammar[collapsed] emu-production,
+emu-production[collapsed] {
+  margin: 0;
+}
+
+emu-constraints {
+  font-size: 0.75em;
+  margin-right: 0.5ex;
+}
+
+emu-gann {
+  margin-right: 0.5ex;
+}
+
+emu-gann emu-t:last-child,
+emu-gann emu-gprose:last-child,
+emu-gann emu-nt:last-child {
+  margin-right: 0;
+}
+
+emu-geq {
+  margin-left: 0.5ex;
+  font-weight: bold;
+}
+
+emu-oneof {
+  font-weight: bold;
+  margin-left: 0.5ex;
+}
+
+emu-nt {
+  display: inline-block;
+  font-style: italic;
+  white-space: nowrap;
+  text-indent: 0;
+}
+
+emu-nt a,
+emu-nt a:visited {
+  color: #333;
+}
+
+emu-rhs emu-nt {
+  margin-right: 0.5ex;
+}
+
+emu-t {
+  display: inline-block;
+  font-family: monospace;
+  font-weight: bold;
+  white-space: nowrap;
+  text-indent: 0;
+}
+
+emu-production emu-t {
+  margin-right: 0.5ex;
+}
+
+emu-rhs {
+  display: block;
+  padding-left: 75px;
+  text-indent: -25px;
+}
+
+emu-production:not([collapsed]) emu-rhs {
+  border: 0.2ex dashed transparent;
+}
+
+emu-production:not([collapsed]) emu-rhs:hover {
+  border-color: #888;
+  background-color: #f0f0f0;
+}
+
+emu-mods {
+  font-size: 0.85em;
+  vertical-align: sub;
+  font-style: normal;
+  font-weight: normal;
+}
+
+emu-params,
+emu-opt {
+  margin-right: 1ex;
+  font-family: monospace;
+}
+
+emu-params,
+emu-constraints {
+  color: #2aa198;
+}
+
+emu-opt {
+  color: #b58900;
+}
+
+emu-gprose {
+  font-size: 0.9em;
+  font-family: Helvetica, Arial, sans-serif;
+}
+
+emu-production emu-gprose {
+  margin-right: 1ex;
+}
+
+h1.shortname {
+  color: #f60;
+  font-size: 1.5em;
+  margin: 0;
+}
+
+h1.version {
+  color: #f60;
+  font-size: 1.5em;
+}
+
+h1.title {
+  color: #f60;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  position: relative;
+}
+
+h1 .secnum {
+  text-decoration: none;
+  margin-right: 5px;
+}
+
+h1 span.title {
+  order: 2;
+}
+
+h1 {
+  font-size: 2.67em;
+  margin-bottom: 0;
+  line-height: 1em;
+}
+h2 {
+  font-size: 2em;
+}
+h3 {
+  font-size: 1.56em;
+}
+h4 {
+  font-size: 1.25em;
+}
+h5 {
+  font-size: 1.11em;
+}
+h6 {
+  font-size: 1em;
+}
+
+pre code.hljs {
+  background: transparent;
+}
+
+emu-clause[id],
+emu-annex[id],
+emu-intro[id] {
+  scroll-margin-top: 2ex;
+}
+
+emu-intro h1,
+emu-clause h1,
+emu-annex h1 {
+  font-size: 2em;
+}
+emu-intro h2,
+emu-clause h2,
+emu-annex h2 {
+  font-size: 1.56em;
+}
+emu-intro h3,
+emu-clause h3,
+emu-annex h3 {
+  font-size: 1.25em;
+}
+emu-intro h4,
+emu-clause h4,
+emu-annex h4 {
+  font-size: 1.11em;
+}
+emu-intro h5,
+emu-clause h5,
+emu-annex h5 {
+  font-size: 1em;
+}
+emu-intro h6,
+emu-clause h6,
+emu-annex h6 {
+  font-size: 0.9em;
+}
+emu-intro emu-intro h1,
+emu-clause emu-clause h1,
+emu-annex emu-annex h1 {
+  font-size: 1.56em;
+}
+emu-intro emu-intro h2,
+emu-clause emu-clause h2,
+emu-annex emu-annex h2 {
+  font-size: 1.25em;
+}
+emu-intro emu-intro h3,
+emu-clause emu-clause h3,
+emu-annex emu-annex h3 {
+  font-size: 1.11em;
+}
+emu-intro emu-intro h4,
+emu-clause emu-clause h4,
+emu-annex emu-annex h4 {
+  font-size: 1em;
+}
+emu-intro emu-intro h5,
+emu-clause emu-clause h5,
+emu-annex emu-annex h5 {
+  font-size: 0.9em;
+}
+emu-intro emu-intro emu-intro h1,
+emu-clause emu-clause emu-clause h1,
+emu-annex emu-annex emu-annex h1 {
+  font-size: 1.25em;
+}
+emu-intro emu-intro emu-intro h2,
+emu-clause emu-clause emu-clause h2,
+emu-annex emu-annex emu-annex h2 {
+  font-size: 1.11em;
+}
+emu-intro emu-intro emu-intro h3,
+emu-clause emu-clause emu-clause h3,
+emu-annex emu-annex emu-annex h3 {
+  font-size: 1em;
+}
+emu-intro emu-intro emu-intro h4,
+emu-clause emu-clause emu-clause h4,
+emu-annex emu-annex emu-annex h4 {
+  font-size: 0.9em;
+}
+emu-intro emu-intro emu-intro emu-intro h1,
+emu-clause emu-clause emu-clause emu-clause h1,
+emu-annex emu-annex emu-annex emu-annex h1 {
+  font-size: 1.11em;
+}
+emu-intro emu-intro emu-intro emu-intro h2,
+emu-clause emu-clause emu-clause emu-clause h2,
+emu-annex emu-annex emu-annex emu-annex h2 {
+  font-size: 1em;
+}
+emu-intro emu-intro emu-intro emu-intro h3,
+emu-clause emu-clause emu-clause emu-clause h3,
+emu-annex emu-annex emu-annex emu-annex h3 {
+  font-size: 0.9em;
+}
+emu-intro emu-intro emu-intro emu-intro emu-intro h1,
+emu-clause emu-clause emu-clause emu-clause emu-clause h1,
+emu-annex emu-annex emu-annex emu-annex emu-annex h1 {
+  font-size: 1em;
+}
+emu-intro emu-intro emu-intro emu-intro emu-intro h2,
+emu-clause emu-clause emu-clause emu-clause emu-clause h2,
+emu-annex emu-annex emu-annex emu-annex emu-annex h2 {
+  font-size: 0.9em;
+}
+emu-intro emu-intro emu-intro emu-intro emu-intro emu-intro h1,
+emu-clause emu-clause emu-clause emu-clause emu-clause emu-clause h1,
+emu-annex emu-annex emu-annex emu-annex emu-annex emu-annex h1 {
+  font-size: 0.9em;
+}
+
+emu-clause,
+emu-intro,
+emu-annex {
+  display: block;
+}
+
+/* these values are twice the font-size for the <h1> titles for clauses */
+emu-intro,
+emu-clause,
+emu-annex {
+  margin-top: 4em;
+}
+emu-intro emu-intro,
+emu-clause emu-clause,
+emu-annex emu-annex {
+  margin-top: 3.12em;
+}
+emu-intro emu-intro emu-intro,
+emu-clause emu-clause emu-clause,
+emu-annex emu-annex emu-annex {
+  margin-top: 2.5em;
+}
+emu-intro emu-intro emu-intro emu-intro,
+emu-clause emu-clause emu-clause emu-clause,
+emu-annex emu-annex emu-annex emu-annex {
+  margin-top: 2.22em;
+}
+emu-intro emu-intro emu-intro emu-intro emu-intro,
+emu-clause emu-clause emu-clause emu-clause emu-clause,
+emu-annex emu-annex emu-annex emu-annex emu-annex {
+  margin-top: 2em;
+}
+emu-intro emu-intro emu-intro emu-intro emu-intro emu-intro,
+emu-clause emu-clause emu-clause emu-clause emu-clause emu-clause,
+emu-annex emu-annex emu-annex emu-annex emu-annex emu-annex {
+  margin-top: 1.8em;
+}
+
+#spec-container > emu-intro:first-of-type,
+#spec-container > emu-clause:first-of-type,
+#spec-container > emu-annex:first-of-type {
+  margin-top: 0;
+}
+
+/* Figures and tables */
+figure {
+  display: block;
+  margin: 1em 0 3em 0;
+}
+figure object {
+  display: block;
+  margin: 0 auto;
+}
+figure table.real-table {
+  margin: 0 auto;
+}
+figure figcaption {
+  display: block;
+  color: #555555;
+  font-weight: bold;
+  text-align: center;
+}
+
+emu-table table {
+  margin: 0 auto;
+}
+
+emu-table table,
+table.real-table {
+  border-collapse: collapse;
+}
+
+emu-table td,
+emu-table th,
+table.real-table td,
+table.real-table th {
+  border: 1px solid black;
+  padding: 0.4em;
+  vertical-align: baseline;
+}
+emu-table th,
+emu-table thead td,
+table.real-table th {
+  background-color: #eeeeee;
+}
+
+emu-table td {
+  background: #fff;
+}
+
+/* Note: the left content edges of table.lightweight-table >tbody >tr >td
+   and div.display line up. */
+table.lightweight-table {
+  border-collapse: collapse;
+  margin: 0 0 0 1.5em;
+}
+table.lightweight-table td,
+table.lightweight-table th {
+  border: none;
+  padding: 0 0.5em;
+  vertical-align: baseline;
+}
+
+/* diff styles */
+ins {
+  background-color: #e0f8e0;
+  text-decoration: none;
+  border-bottom: 1px solid #396;
+}
+
+del {
+  background-color: #fee;
+}
+
+ins.block,
+del.block,
+emu-production > ins,
+emu-production > del,
+emu-grammar > ins,
+emu-grammar > del {
+  display: block;
+}
+emu-rhs > ins,
+emu-rhs > del {
+  display: inline;
+}
+
+tr.ins > td > ins {
+  border-bottom: none;
+}
+
+tr.ins > td {
+  background-color: #e0f8e0;
+}
+
+tr.del > td {
+  background-color: #fee;
+}
+
+/* Menu Styles */
+#menu-toggle {
+  font-size: 2em;
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 1.5em;
+  height: 1.5em;
+  z-index: 3;
+  visibility: hidden;
+  color: #1567a2;
+  background-color: #fff;
+
+  line-height: 1.5em;
+  text-align: center;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  cursor: pointer;
+}
+
+#menu {
+  display: flex;
+  flex-direction: column;
+  width: 33%;
+  height: 100vh;
+  max-width: 500px;
+  box-sizing: border-box;
+  background-color: #ddd;
+  overflow: hidden;
+  transition: opacity 0.1s linear;
+  padding: 0 5px;
+  position: fixed;
+  left: 0;
+  top: 0;
+  border-right: 2px solid #bbb;
+
+  z-index: 2;
+}
+
+.menu-spacer {
+  flex-basis: 33%;
+  max-width: 500px;
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+#menu a {
+  color: #1567a2;
+}
+
+#menu.active {
+  display: flex;
+  opacity: 1;
+  z-index: 2;
+}
+
+#menu-pins {
+  flex-grow: 1;
+  display: none;
+}
+
+#menu-pins.active {
+  display: block;
+}
+
+#menu-pins-list {
+  margin: 0;
+  padding: 0;
+  counter-reset: pins-counter;
+}
+
+#menu-pins-list > li:before {
+  content: counter(pins-counter);
+  counter-increment: pins-counter;
+  display: inline-block;
+  width: 25px;
+  text-align: center;
+  border: 1px solid #bbb;
+  padding: 2px;
+  margin: 4px;
+  box-sizing: border-box;
+  line-height: 1em;
+  background-color: #ccc;
+  border-radius: 4px;
+}
+#menu-toc > ol {
+  padding: 0;
+  flex-grow: 1;
+}
+
+#menu-toc > ol li {
+  padding: 0;
+}
+
+#menu-toc > ol,
+#menu-toc > ol ol {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+#menu-toc > ol ol {
+  padding-left: 0.75em;
+}
+
+#menu-toc li {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+#menu-toc .item-toggle {
+  display: inline-block;
+  transform: rotate(-45deg) translate(-5px, -5px);
+  transition: transform 0.1s ease;
+  text-align: center;
+  width: 20px;
+
+  color: #aab;
+
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  cursor: pointer;
+}
+
+#menu-toc .item-toggle-none {
+  display: inline-block;
+  width: 20px;
+}
+
+#menu-toc li.active > .item-toggle {
+  transform: rotate(45deg) translate(-5px, -5px);
+}
+
+#menu-toc li > ol {
+  display: none;
+}
+
+#menu-toc li.active > ol {
+  display: block;
+}
+
+#menu-toc li.revealed > a {
+  background-color: #bbb;
+  font-weight: bold;
+  /*
+  background-color: #222;
+  color: #c6d8e4;
+  */
+}
+
+#menu-toc li.revealed-leaf > a {
+  color: #206ca7;
+  /*
+  background-color: #222;
+  color: #c6d8e4;
+  */
+}
+
+#menu-toc li.revealed > .item-toggle {
+  transform: rotate(45deg) translate(-5px, -5px);
+}
+
+#menu-toc li.revealed > ol {
+  display: block;
+}
+
+#menu-toc li > a {
+  padding: 2px 5px;
+}
+
+#menu > * {
+  margin-bottom: 5px;
+}
+
+.menu-pane-header {
+  padding: 0 5px;
+  text-transform: uppercase;
+  background-color: #aaa;
+  color: #335;
+  font-weight: bold;
+  letter-spacing: 2px;
+  flex-grow: 0;
+  flex-shrink: 0;
+  font-size: 0.8em;
+}
+
+.menu-pane-header emu-opt,
+.menu-pane-header emu-t,
+.menu-pane-header emu-nt {
+  margin-right: 0px;
+  display: inline;
+  color: inherit;
+}
+
+.menu-pane-header emu-rhs {
+  display: inline;
+  padding-left: 0px;
+  text-indent: 0px;
+}
+
+.menu-pane-header emu-geq {
+  margin-left: 0px;
+}
+
+a.menu-pane-header-production {
+  color: inherit;
+}
+
+.menu-pane-header-production {
+  text-transform: none;
+  letter-spacing: 1.5px;
+  padding-left: 0.5em;
+}
+
+#menu-toc {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  overflow: hidden;
+  flex-grow: 1;
+}
+
+#menu-toc ol.toc {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+#menu-search {
+  position: relative;
+  flex-grow: 0;
+  flex-shrink: 0;
+  width: 100%;
+
+  display: flex;
+  flex-direction: column;
+
+  max-height: 300px;
+}
+
+#menu-trace-list {
+  display: none;
+}
+
+#menu-search-box {
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  margin: 5px 0 0 0;
+  font-size: 1em;
+  padding: 2px;
+  background-color: #bbb;
+  border: 1px solid #999;
+}
+
+#menu-search-results {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+li.menu-search-result-clause:before {
+  content: 'clause';
+  width: 40px;
+  display: inline-block;
+  text-align: right;
+  padding-right: 1ex;
+  color: #666;
+  font-size: 75%;
+}
+li.menu-search-result-op:before {
+  content: 'op';
+  width: 40px;
+  display: inline-block;
+  text-align: right;
+  padding-right: 1ex;
+  color: #666;
+  font-size: 75%;
+}
+
+li.menu-search-result-prod:before {
+  content: 'prod';
+  width: 40px;
+  display: inline-block;
+  text-align: right;
+  padding-right: 1ex;
+  color: #666;
+  font-size: 75%;
+}
+
+li.menu-search-result-term:before {
+  content: 'term';
+  width: 40px;
+  display: inline-block;
+  text-align: right;
+  padding-right: 1ex;
+  color: #666;
+  font-size: 75%;
+}
+
+#menu-search-results ul {
+  padding: 0 5px;
+  margin: 0;
+}
+
+#menu-search-results li {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+#menu-trace-list {
+  counter-reset: item;
+  margin: 0 0 0 20px;
+  padding: 0;
+}
+#menu-trace-list li {
+  display: block;
+  white-space: nowrap;
+}
+
+#menu-trace-list li .secnum:after {
+  content: ' ';
+}
+#menu-trace-list li:before {
+  content: counter(item) ' ';
+  background-color: #222;
+  counter-increment: item;
+  color: #999;
+  width: 20px;
+  height: 20px;
+  line-height: 20px;
+  display: inline-block;
+  text-align: center;
+  margin: 2px 4px 2px 0;
+}
+
+@media (max-width: 1000px) {
+  body {
+    margin: 0;
+    display: block;
+  }
+
+  #menu {
+    display: none;
+    padding-top: 3em;
+    width: 450px;
+  }
+
+  #menu.active {
+    position: fixed;
+    height: 100%;
+    left: 0;
+    top: 0;
+    right: 300px;
+  }
+
+  #menu-toggle {
+    visibility: visible;
+  }
+
+  #spec-container {
+    padding: 0 5px;
+  }
+
+  #references-pane-spacer {
+    display: none;
+  }
+}
+
+@media only screen and (max-width: 800px) {
+  #menu {
+    width: 100%;
+  }
+
+  h1 .secnum:empty {
+    margin: 0;
+    padding: 0;
+  }
+}
+
+/* Toolbox */
+.toolbox-container {
+  position: absolute;
+  display: none;
+  padding-bottom: 7px;
+}
+
+.toolbox-container.active {
+  display: inline-block;
+}
+
+.toolbox {
+  position: relative;
+  background: #ddd;
+  border: 1px solid #aaa;
+  color: #eee;
+  padding: 5px;
+  border-radius: 3px;
+}
+
+.toolbox a {
+  text-decoration: none;
+  padding: 0 5px;
+}
+
+.toolbox a:hover {
+  text-decoration: underline;
+}
+
+.toolbox:after,
+.toolbox:before {
+  top: 100%;
+  left: 15px;
+  border: solid transparent;
+  content: ' ';
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+}
+
+.toolbox:after {
+  border-color: rgba(0, 0, 0, 0);
+  border-top-color: #ddd;
+  border-width: 10px;
+  margin-left: -10px;
+}
+.toolbox:before {
+  border-color: rgba(204, 204, 204, 0);
+  border-top-color: #aaa;
+  border-width: 12px;
+  margin-left: -12px;
+}
+
+#references-pane-container {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 250px;
+  display: none;
+  background-color: #ddd;
+  z-index: 1;
+}
+
+#references-pane-table-container {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+#references-pane {
+  flex-grow: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+#references-pane-container.active {
+  display: flex;
+}
+
+#references-pane-close:after {
+  content: '✖';
+  float: right;
+  cursor: pointer;
+}
+
+#references-pane table tbody {
+  vertical-align: baseline;
+}
+
+#references-pane table tr td:first-child {
+  text-align: right;
+  padding-right: 5px;
+}
+
+@media print {
+  #menu-toggle {
+    display: none;
+  }
+}
+
+[normative-optional],
+[deprecated],
+[legacy] {
+  border-left: 5px solid #ff6600;
+  padding: 0.5em;
+  background: #ffeedd;
+}
+
+.attributes-tag {
+  text-transform: uppercase;
+  color: #884400;
+}
+
+.attributes-tag a {
+  color: #884400;
+}
+
+/* Shortcuts help dialog */
+
+#shortcuts-help {
+  position: fixed;
+  left: 5%;
+  margin: 0 auto;
+  right: 5%;
+  z-index: 10;
+  top: 10%;
+  top: calc(5vw + 5vh);
+  padding: 30px 90px;
+  max-width: 500px;
+  outline: solid 10000px rgba(255, 255, 255, 0.6);
+  border-radius: 5px;
+  border-width: 1px 1px 0 1px;
+  background-color: #ddd;
+  display: none;
+}
+
+#shortcuts-help.active {
+  display: block;
+}
+
+#shortcuts-help ul {
+  padding: 0;
+}
+
+#shortcuts-help li {
+  display: flex;
+  justify-content: space-between;
+}
+
+#shortcuts-help code {
+  padding: 3px 10px;
+  border-radius: 3px;
+  border-width: 1px 1px 0 1px;
+  border-color: #bbb;
+  background-color: #eee;
+  box-shadow: inset 0 -1px 0 #ccc;
+}
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..37e7d378
--- /dev/null
+++ b/index.html
@@ -0,0 +1,855 @@
+<!doctype html>
+<head><meta charset="utf-8">
+<title>Ecmarkup</title>
+<script src="ecmarkup.js?cache=TxFVP5tb" defer=""></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/styles/base16/solarized-light.min.css"><link rel="stylesheet" href="elements.css"></head><body><div id="shortcuts-help">
+<ul>
+  <li><span>Toggle shortcuts help</span><code>?</code></li>
+  <li><span>Toggle "can call user code" annotations</span><code>u</code></li>
+
+  <li><span>Jump to search box</span><code>/</code></li>
+</ul></div><div id="menu-toggle"><svg xmlns="http://www.w3.org/2000/svg" style="width:100%; height:100%; stroke:currentColor" viewBox="0 0 120 120">
+      <title>Menu</title>
+      <path stroke-width="10" stroke-linecap="round" d="M30,60 h60  M30,30 m0,5 h60  M30,90 m0,-5 h60"></path>
+    </svg></div><div id="menu-spacer" class="menu-spacer"></div><div id="menu"><div id="menu-search"><input type="text" id="menu-search-box" placeholder="Search..."><div id="menu-search-results" class="inactive"></div></div><div id="menu-pins"><div class="menu-pane-header">Pins</div><ul id="menu-pins-list"></ul></div><div class="menu-pane-header">Table of Contents</div><div id="menu-toc"><ol class="toc"><li><span class="item-toggle-none"></span><a href="#intro" title="Ecmarkup">Ecmarkup</a></li><li><span class="item-toggle-none"></span><a href="#getting-started" title="Getting Started"><span class="secnum">1</span> Getting Started</a></li><li><span class="item-toggle-none"></span><a href="#useful-options" title="Options"><span class="secnum">2</span> Options</a></li><li><span class="item-toggle-none"></span><a href="#stylesheets-and-scripts" title="Stylesheets and Scripts"><span class="secnum">3</span> Stylesheets and Scripts</a></li><li><span class="item-toggle-none"></span><a href="#editorial-conventions" title="Editorial Conventions"><span class="secnum">4</span> Editorial Conventions</a></li><li><span class="item-toggle-none"></span><a href="#metadata" title="Metadata"><span class="secnum">5</span> Metadata</a></li><li><span class="item-toggle">◢</span><a href="#clauses" title="Clauses"><span class="secnum">6</span> Clauses</a><ol class="toc"><li><span class="item-toggle-none"></span><a href="#emu-intro" title="emu-intro"><span class="secnum">6.1</span> emu-intro</a></li><li><span class="item-toggle">◢</span><a href="#emu-clause" title="emu-clause"><span class="secnum">6.2</span> emu-clause</a><ol class="toc"><li><span class="item-toggle-none"></span><a href="#emu-clause-legacy-attributes" title="Legacy Attributes"><span class="secnum">6.2.1</span> Legacy Attributes</a></li><li><span class="item-toggle-none"></span><a href="#emu-clause-structured-headers" title="Structured Headers"><span class="secnum">6.2.2</span> Structured Headers</a></li><li><span class="item-toggle-none"></span><a href="#example-normative-optional" title="ExampleOperation ( S [ , length ] )"><span class="secnum">6.2.3</span> ExampleOperation ( <var>S</var> [ , <var>length</var> ] )</a></li></ol></li><li><span class="item-toggle-none"></span><a href="#emu-annex" title="emu-annex"><span class="secnum">6.3</span> emu-annex</a></li></ol></li><li><span class="item-toggle-none"></span><a href="#definitions" title="Definitions"><span class="secnum">7</span> Definitions</a></li><li><span class="item-toggle">◢</span><a href="#effects" title="Effects"><span class="secnum">8</span> Effects</a><ol class="toc"><li><span class="item-toggle-none"></span><a href="#sec-effect" title="Effect ( )"><span class="secnum">8.1</span> Effect ( )</a></li><li><span class="item-toggle-none"></span><a href="#sec-transitive-effect" title="TransitiveEffect ( )"><span class="secnum">8.2</span> TransitiveEffect ( )</a></li></ol></li><li><span class="item-toggle">◢</span><a href="#emu-alg" title="emu-alg"><span class="secnum">9</span> emu-alg</a><ol class="toc"><li><span class="item-toggle-none"></span><a href="#labeled-steps" title="Step Labels"><span class="secnum">9.1</span> Step Labels</a></li><li><span class="item-toggle-none"></span><a href="#variable-declarations" title="Variable Declarations"><span class="secnum">9.2</span> Variable Declarations</a></li></ol></li><li><span class="item-toggle-none"></span><a href="#emu-eqn" title="emu-eqn"><span class="secnum">10</span> emu-eqn</a></li><li><span class="item-toggle-none"></span><a href="#emu-note" title="emu-note"><span class="secnum">11</span> emu-note</a></li><li><span class="item-toggle-none"></span><a href="#emu-xref" title="emu-xref"><span class="secnum">12</span> emu-xref</a></li><li><span class="item-toggle-none"></span><a href="#emu-not-ref" title="emu-not-ref"><span class="secnum">13</span> emu-not-ref</a></li><li><span class="item-toggle-none"></span><a href="#emu-figure" title="emu-figure"><span class="secnum">14</span> emu-figure</a></li><li><span class="item-toggle-none"></span><a href="#emu-table" title="emu-table"><span class="secnum">15</span> emu-table</a></li><li><span class="item-toggle-none"></span><a href="#emu-example" title="emu-example"><span class="secnum">16</span> emu-example</a></li><li><span class="item-toggle-none"></span><a href="#emu-biblio" title="emu-biblio"><span class="secnum">17</span> emu-biblio</a></li><li><span class="item-toggle-none"></span><a href="#emu-grammar" title="emu-grammar"><span class="secnum">18</span> emu-grammar</a></li><li><span class="item-toggle">◢</span><a href="#grammar" title="Directly Specifying Grammar"><span class="secnum">19</span> Directly Specifying Grammar</a><ol class="toc"><li><span class="item-toggle-none"></span><a href="#emu-production" title="emu-production"><span class="secnum">19.1</span> emu-production</a></li><li><span class="item-toggle-none"></span><a href="#emu-rhs" title="emu-rhs"><span class="secnum">19.2</span> emu-rhs</a></li><li><span class="item-toggle-none"></span><a href="#emu-nt" title="emu-nt"><span class="secnum">19.3</span> emu-nt</a></li><li><span class="item-toggle-none"></span><a href="#emu-t" title="emu-t"><span class="secnum">19.4</span> emu-t</a></li><li><span class="item-toggle-none"></span><a href="#emu-gmod" title="emu-gmod"><span class="secnum">19.5</span> emu-gmod</a></li><li><span class="item-toggle-none"></span><a href="#emu-gann" title="emu-gann"><span class="secnum">19.6</span> emu-gann</a></li><li><span class="item-toggle-none"></span><a href="#emu-gprose" title="emu-gprose"><span class="secnum">19.7</span> emu-gprose</a></li><li><span class="item-toggle-none"></span><a href="#emu-prodref" title="emu-prodref"><span class="secnum">19.8</span> emu-prodref</a></li></ol></li><li><span class="item-toggle-none"></span><a href="#emu-import" title="emu-import"><span class="secnum">20</span> emu-import</a></li><li><span class="item-toggle">◢</span><a href="#miscellaneous" title="Other Styles &amp; Conventions"><span class="secnum">21</span> Other Styles &amp; Conventions</a><ol class="toc"><li><span class="item-toggle-none"></span><a href="#oldids" title="Old IDs"><span class="secnum">21.1</span> Old IDs</a></li><li><span class="item-toggle-none"></span><a href="#ins-del" title="Indicating Changes"><span class="secnum">21.2</span> Indicating Changes</a></li><li><span class="item-toggle-none"></span><a href="#pre-code" title="Code Listings"><span class="secnum">21.3</span> Code Listings</a></li></ol></li></ol></div></div><div id="spec-container">
+<style>
+  .result {
+    padding-left: 0.5em;
+    border-left: 5px solid #dadada;
+  }
+</style>
+<emu-biblio href="./biblio.json"></emu-biblio>
+
+<emu-intro id="intro">
+  <h1>Ecmarkup</h1>
+  <p><a href="https://github.com/tc39/ecmarkup">Ecmarkup</a> is a number of custom elements and a toolchain suitable for specifying semantics for ECMAScript and other programming languages.</p>
+  <p>Ecmarkup offers the following conveniences (among many others):</p>
+  <ul>
+    <li><a href="https://github.com/tc39/ecmarkdown">Ecmarkdown</a> syntax for paragraphs and algorithms</li>
+    <li><a href="https://github.com/rbuckton/grammarkdown">Grammarkdown</a> for specifying grammar</li>
+    <li>Terse markup for the authoring conventions used in ECMAScript specifications including clauses, notes, examples, figures, tables, and more.</li>
+    <li>Easy cross-references by element ID to clauses, abstract operations, examples, figures, tables, and etc. in the current document, ES6, and other specs.</li>
+    <li>Generates table of contents</li>
+    <li>Generates clause ids based on document position</li>
+    <li>Auto-links abstract operations and terms based on name with support for external bibliographies for cross-referencing between specs</li>
+    <li>Source code syntax highlighting inside pre code blocks</li>
+  </ul>
+  <p>This document is itself written using Ecmarkup. Its source can be viewed <a href="https://github.com/tc39/ecmarkup/blob/HEAD/spec/index.html">on github</a>.</p>
+</emu-intro>
+
+<emu-clause id="getting-started">
+  <h1><span class="secnum">1</span> Getting Started</h1>
+  <pre><code class="language-shell hljs"><span class="hljs-meta">$ </span><span class="language-bash">npm install -g ecmarkup</span>
+<span class="hljs-meta">$ </span><span class="language-bash">ecmarkup --<span class="hljs-built_in">help</span></span>
+<span class="hljs-meta">$ </span><span class="language-bash">ecmarkup spec.html out.html</span></code></pre>
+</emu-clause>
+
+<emu-clause id="useful-options">
+  <h1><span class="secnum">2</span> Options</h1>
+  <p>Build options and document options can be passed in via the command line or specified in the <emu-xref href="#metadata" id="_ref_0"><a href="#metadata">front-matter</a></emu-xref> of your document. There is no bright line separating the two categories, but for purposes of organization, document options are defined as those affecting the observable rendered output content.</p>
+  <emu-table id="build-options" class="code"><figure><figcaption>Table 1: Build options</figcaption>
+    
+    <table>
+      <tbody><tr><th>Command Line Option</th><th>Front-Matter Key</th><th>Description</th></tr>
+      <tr><td><code>--watch</code></td><td></td><td>Rebuild when files change.</td></tr>
+      <tr><td><code>--verbose</code></td><td></td><td>Print verbose logging info.</td></tr>
+      <tr><td><code>--write-biblio</code></td><td></td><td>Emit a biblio file to the specified path.</td></tr>
+      <tr><td><code>--assets</code></td><td><code>assets</code></td><td>"none" for no CSS/JS, "inline" for inline CSS/JS.</td></tr>
+      <tr><td><code>--css-out</code></td><td><code>cssOut</code></td><td>Emit the Ecmarkup CSS file to the specified path.</td></tr>
+      <tr><td><code>--js-out</code></td><td><code>jsOut</code></td><td>Emit the Ecmarkup JS file to the specified path.</td></tr>
+      <tr><td><code>--lint-spec</code></td><td><code>lintSpec</code></td><td>Enforce some style and correctness checks.</td></tr>
+      <tr><td><code>--error-formatter</code></td><td></td><td>The <a href="https://eslint.org/docs/user-guide/formatters/">eslint formatter</a> to be used for printing warnings and errors when using <code>--verbose</code>. Either the name of a built-in eslint formatter or the package name of an installed eslint compatible formatter.</td></tr>
+      <tr><td><code>--strict</code></td><td></td><td>Exit with an error if there are warnings. Cannot be used with <code>--watch</code>.</td></tr>
+      <tr><td><code>--multipage</code></td><td></td><td>Emit a distinct page for each top-level clause.</td></tr>
+    </tbody></table>
+  </figure></emu-table>
+
+  <emu-table id="document-options" class="code"><figure><figcaption>Table 2: Document options</figcaption>
+    
+    <table>
+      <tbody><tr><th>Command Line Option</th><th>Front-Matter Key</th><th>Description</th></tr>
+      <tr><td></td><td><code>title</code></td><td>Document title, for example "ECMAScript 2016" or "Async Functions".</td></tr>
+      <tr><td></td><td><code>status</code></td><td>Document status. Can be "proposal", "draft", or "standard". Defaults to "proposal".</td></tr>
+      <tr><td></td><td><code>stage</code></td><td><a href="https://tc39.es/process-document/">TC39 proposal stage</a>. If present and <code>status</code> is "proposal", <code>version</code> defaults to "Stage <var>stage</var> Draft".</td></tr>
+      <tr><td></td><td><code>version</code></td><td>Document version, for example "6&lt;sup&gt;th&lt;/sup&gt; Edition" or "Draft 1".</td></tr>
+      <tr><td></td><td><code>date</code></td><td>Timestamp of document rendering, used for various pieces of boilerplate. Defaults to the value of <a href="https://reproducible-builds.org/docs/source-date-epoch/">the <code>SOURCE_DATE_EPOCH</code> environment variable</a> (as a number of second since the POSIX epoch) if it exists, otherwise to the current date and time.</td></tr>
+      <tr><td></td><td><code>shortname</code></td><td>Document shortname, for example "ECMA-262". If present and <code>status</code> is "draft", <code>version</code> defaults to "Draft <var>shortname</var>".</td></tr>
+      <tr><td></td><td><code>location</code></td><td>URL of this document. Used in conjunction with the biblio file to support inbound references from other documents.</td></tr>
+      <tr><td></td><td><code>copyright</code></td><td>Emit copyright and software license information. Boolean, default true.</td></tr>
+      <tr><td></td><td><code>contributors</code></td><td>Contributors to this specification, i.e. those who own the copyright. If your proposal includes text from any Ecma specification, this should include "Ecma International".</td></tr>
+      <tr><td><code>--no-toc</code></td><td><code>toc</code></td><td>Emit table of contents. Boolean, default true.</td></tr>
+      <tr><td><code>--old-toc</code></td><td><code>oldToc</code></td><td>Emit the table of contents at the top of the document rather than as a side pane. Boolean, default false.</td></tr>
+      <tr><td><code>--load-biblio</code></td><td><code>extraBiblios</code></td><td>Extra biblio.json file(s) to load. This should contain either an object as exported by <code>--write-biblio</code> or an array of such objects.</td></tr>
+      <tr><td></td><td><code>boilerplate</code></td><td>An object with <code>address</code> and/or <code>copyright</code> and/or <code>license</code> fields containing paths to files containing the corresponding content for populating an element with class "copyright-and-software-license" (or if not found, an appended <emu-xref href="#emu-annex" title="" id="_ref_1"><a href="#emu-annex">emu-annex</a></emu-xref> with that id) when <code>copyright</code> is true. Absent fields are assumed to reference files in a "boilerplate" directory sibling of the directory containing the ecmarkup executable.</td></tr>
+      <tr><td><code>--mark-effects</code></td><td><code>markEffects</code></td><td>Propagate and render <a href="#effects">effects</a> like "user code".</td></tr>
+    </tbody></table>
+  </figure></emu-table>
+</emu-clause>
+
+<emu-clause id="stylesheets-and-scripts">
+  <h1><span class="secnum">3</span> Stylesheets and Scripts</h1>
+  <p>Ecmarkup requires CSS styles and, if you're using the sidebar table of contents, javascript as well. By default CSS and JS dependencies are inlined into the document. You can override this by setting assets to "none" (for example if you want to manually link to external assets). Passing cssOut and jsOut will write the respective files to disk at the given path.</p>
+</emu-clause>
+
+<emu-clause id="editorial-conventions">
+  <h1><span class="secnum">4</span> Editorial Conventions</h1>
+  <p>There are a large number of features in Ecmarkup. Detailed documentation can be found in later sections. This section provides a high-level overview of what capabilities are available and when to use them.</p>
+
+  <emu-table><figure><figcaption>Table 3: Structuring your Ecmarkup document</figcaption>
+    
+    <table>
+      <tbody><tr><th>Notational Convention</th><th>Ecmarkup Functionality</th></tr>
+      <tr><td>Clauses</td><td><emu-xref href="#emu-clause" title="" id="_ref_2"><a href="#emu-clause">emu-clause</a></emu-xref>, <emu-xref href="#emu-intro" title="" id="_ref_3"><a href="#emu-intro">emu-intro</a></emu-xref>, and <emu-xref href="#emu-annex" title="" id="_ref_4"><a href="#emu-annex">emu-annex</a></emu-xref></td></tr>
+      <tr><td>Algorithms</td><td><emu-xref href="#emu-alg" title="" id="_ref_5"><a href="#emu-alg">emu-alg</a></emu-xref> with Ecmarkdown (see also <emu-xref href="#emd-overview" id="_ref_6"><a href="#emd-overview">Table 4</a></emu-xref>)</td></tr>
+      <tr><td>Mathematical expressions</td><td><emu-xref href="#emu-eqn" title="" id="_ref_7"><a href="#emu-eqn">emu-eqn</a></emu-xref></td></tr>
+      <tr><td>Notes</td><td><emu-xref href="#emu-note" title="" id="_ref_8"><a href="#emu-note">emu-note</a></emu-xref></td></tr>
+      <tr><td>Figures (such as images)</td><td><emu-xref href="#emu-figure" title="" id="_ref_9"><a href="#emu-figure">emu-figure</a></emu-xref></td></tr>
+      <tr><td>Tables</td><td><emu-xref href="#emu-table" title="" id="_ref_10"><a href="#emu-table">emu-table</a></emu-xref></td></tr>
+      <tr><td>Examples</td><td><emu-xref href="#emu-example" title="" id="_ref_11"><a href="#emu-example">emu-example</a></emu-xref></td></tr>
+      <tr><td>Grammar</td><td><emu-xref href="#emu-grammar" title="" id="_ref_12"><a href="#emu-grammar">emu-grammar</a></emu-xref> using <a href="https://github.com/rbuckton/grammarkdown">Grammarkdown syntax</a> or <emu-xref href="#emu-production" title="" id="_ref_13"><a href="#emu-production">emu-production</a></emu-xref> and child elements</td></tr>
+      <tr><td>Cross-references</td><td><emu-xref href="#emu-xref" title="" id="_ref_14"><a href="#emu-xref">emu-xref</a></emu-xref> (can reference clauses, productions, abstract operations, tables, figuers, and examples)</td></tr>
+    </tbody></table>
+  </figure></emu-table>
+
+  <p>There are also a number of elements and corresponding Ecmarkdown syntax to give inline styles to various parts of your document in accordance with ECMAScript conventions. More detail on Ecmarkdown syntax can be found <a href="https://github.com/tc39/ecmarkdown">on its readme</a>.</p>
+  <emu-table id="emd-overview"><figure><figcaption>Table 4: Inline styles/conventions</figcaption>
+    
+    <table>
+      <tbody><tr>
+        <th>Notational Convention</th>
+        <th>Ecmarkdown Syntax</th>
+        <th>Ecmarkup Functionality</th>
+      </tr>
+      <tr>
+        <td>Variables, such as those in defined in algorithms, parameters in abstract operations, etc.</td>
+        <td><code>_variable_</code></td>
+        <td><code>&lt;var&gt;variable&lt;/var&gt;</code></td>
+      </tr>
+      <tr>
+        <td>ECMAScript Language Type Values, eg. <emu-val>undefined</emu-val>, <emu-val>true</emu-val>, <emu-val>1</emu-val><sub>𝔽</sub>, <emu-val>"string"</emu-val>, <emu-val>TypeError</emu-val>, etc.</td>
+        <td><code>*TypeError*</code></td>
+        <td><code>&lt;emu-val&gt;TypeError&lt;/emu-val&gt;</code></td>
+      </tr>
+      <tr>
+        <td>Specification types and their instances, eg. <emu-const>throw</emu-const> and <emu-const>empty</emu-const>.</td>
+        <td><code>~throw~</code></td>
+        <td><code>&lt;emu-const&gt;throw&lt;emu-const&gt;</code></td>
+      </tr>
+      <tr>
+        <td>Source Code, eg. <code>Function.prototype</code>.</td>
+        <td><code>`code`</code></td>
+        <td><code>&lt;code&gt;code&lt;/code&gt;</code></td>
+      </tr>
+      <tr>
+        <td>Non-terminal references, eg. as <emu-nt>FunctionDeclaration</emu-nt> and <emu-nt>FunctionExpression</emu-nt>.</td>
+        <td><code>|FunctionExpression|</code></td>
+        <td><code>&lt;emu-nt&gt;FunctionExpression&lt;/emu-nt&gt;</code></td>
+      </tr>
+    </tbody></table>
+  </figure></emu-table>
+</emu-clause>
+
+<emu-clause id="metadata">
+  <h1><span class="secnum">5</span> Metadata</h1>
+  <p>There are a number of settings that allow customizations or enable generation of boilerplate. To add metadata to your document, use yaml syntax inside a <code>&lt;pre class="metadata"&gt;</code> element somewhere in the root of your document. See <emu-xref href="#build-options" id="_ref_15"><a href="#build-options">Table 1</a></emu-xref> and <emu-xref href="#document-options" id="_ref_16"><a href="#document-options">Table 2</a></emu-xref> for a list (or consult <code>--help</code>).</p>
+  <p>Some metadata can also be passed on the command line, for example <code>--no-toc</code>. Such options take precedence over embedded metadata.</p>
+
+  <h2>Example</h2>
+  <pre><code class="language-html hljs"><span class="hljs-tag">&lt;<span class="hljs-name">pre</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"metadata"</span>&gt;</span>
+title: Document 1
+toc: false
+<span class="hljs-tag">&lt;/<span class="hljs-name">pre</span>&gt;</span></code></pre>
+</emu-clause>
+
+<emu-clause id="clauses">
+  <h1><span class="secnum">6</span> Clauses</h1>
+  <p>Clauses are referenced using their id and are numbered automatically based on document position. Ecmarkdown syntax can be used in descendent text nodes as well. Text nodes are parsed as Ecmarkdown Fragments.</p>
+
+  <emu-clause id="emu-intro">
+    <h1><span class="secnum">6.1</span> emu-intro</h1>
+    <p>Non-normative introductory information.</p>
+
+    <h2>Attributes</h2>
+    <p><b>id:</b> Clause id. Must be unique.</p>
+    <p><b>aoid:</b> Abstract operation ID. A unique name identifying this clause as an abstract operation. Algorithm steps will auto-link calls to this abstract operation to this clause. If left blank, the aoid will be set to the id of this clause.</p>
+  </emu-clause>
+
+  <emu-clause id="emu-clause">
+    <h1><span class="secnum">6.2</span> emu-clause</h1>
+    <p>Normative clause.</p>
+
+    <h2>Attributes</h2>
+    <p><b>id:</b> Clause id. Must be unique.</p>
+    <p><b>example:</b> If present, the clause is an example.</p>
+    <p><b>legacy:</b> If present, the clause is Legacy.</p>
+    <p><b>normative-optional:</b> If present, the clause is Normative Optional.</p>
+    <p><b>number:</b> Optional: An explicit clause number, overriding the default auto-incrementing number. Can be a nested number, as in <code>number="2.1"</code>.</p>
+    <p><b>type:</b> Optional: Type of feature described by the clause.</p>
+    <ul>
+      <li>"abstract operation"</li>
+      <li>"concrete method"</li>
+      <li>"host-defined abstract operation"</li>
+      <li>"implementation-defined abstract operation"</li>
+      <li>"internal method"</li>
+      <li>"numeric method"</li>
+      <li>"sdo" or "syntax-directed operation"</li>
+    </ul>
+
+    <emu-clause id="emu-clause-legacy-attributes" legacy=""><div class="attributes-tag">Legacy</div>
+      <h1><span class="secnum">6.2.1</span> Legacy Attributes</h1>
+      <p><b>aoid:</b> Abstract operation ID. A unique name identifying this clause as an abstract operation. Algorithm steps will auto-link calls to this abstract operation to this clause. If left blank, the aoid will be set to the id of this clause. When a <emu-xref href="#emu-clause-structured-headers" id="_ref_42"><a href="#emu-clause-structured-headers">structured header</a></emu-xref> is present the aoid will be inferred, but this attribute may be set explicitly when not using a <emu-xref href="#emu-clause-structured-headers" id="_ref_43"><a href="#emu-clause-structured-headers">structured header</a></emu-xref>.</p>
+    </emu-clause>
+
+    <emu-clause id="emu-clause-structured-headers">
+      <h1><span class="secnum">6.2.2</span> Structured Headers</h1>
+      <p>A clause describing an operation or method may have a <dfn>structured header</dfn> to document its signature and metadata. Such a structure consists of:</p>
+      <ol>
+        <li>an <code>&lt;h1&gt;</code> element containing the name of the operation followed by a parenthesized list of parameters, each appearing on a comma-terminated line of its own and consisting of a name and value constraints separated by a colon and optionally preceded with "optional"</li>
+        <li>
+          a <code>&lt;dl&gt;</code> element with class "header" and a collection of optional key-value pairs expressed using <code>&lt;dt&gt;</code> and <code>&lt;dd&gt;</code> elements:
+          <ul>
+            <li><b>description:</b> An explanation of the operation's behaviour.</li>
+            <li><b>effects:</b> A list of "effects" associated with the clause (and transitively with those referencing it), separated by commas with optional whitespace. The only currently-known effect is "user-code", which indicates that the operation or method can evaluate non-implementation code (such as custom getters).</li>
+            <li><b>for:</b> The type of value to which a clause of type "concrete method" or "internal method" applies.</li>
+            <li><b>redefinition:</b> If "true", the name of the operation will not automatically link (i.e., it will not automatically be given an aoid).</li>
+          </ul>
+        </li>
+      </ol>
+    </emu-clause>
+
+    <h2>Example</h2>
+    <pre><code class="language-html hljs"><span class="hljs-tag">&lt;<span class="hljs-name">emu-clause</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example-normative-optional"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"abstract operation"</span> <span class="hljs-attr">normative-optional</span> <span class="hljs-attr">example</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>
+    ExampleOperation (
+      _S_: a String,
+      optional _length_: a non-negative integer,
+    )
+  <span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">dl</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"header"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">dt</span>&gt;</span>description<span class="hljs-tag">&lt;/<span class="hljs-name">dt</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">dd</span>&gt;</span>It returns a List of the code points of the first _length_ grapheme clusters of _S_ using the host environment's current locale, or all code points when _length_ is not present.<span class="hljs-tag">&lt;/<span class="hljs-name">dd</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">dl</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>This clause is normative optional.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">emu-clause</span>&gt;</span></code></pre>
+
+    <h3>Result</h3>
+    <aside class="result">
+
+      <emu-clause id="example-normative-optional" type="abstract operation" normative-optional="" example="" aoid="ExampleOperation"><div class="attributes-tag">Normative Optional</div>
+        <h1><span class="secnum">6.2.3</span> ExampleOperation ( <var>S</var> [ , <var>length</var> ] )</h1>
+        <p>The abstract operation ExampleOperation takes argument <var>S</var> (a String) and optional argument <var>length</var> (a non-negative integer). It returns a List of the code points of the first <var>length</var> grapheme clusters of <var>S</var> using the host environment's current locale, or all code points when <var>length</var> is not present.</p>
+        <p>This clause is normative optional.</p>
+      </emu-clause>
+    </aside>
+  </emu-clause>
+
+  <emu-clause id="emu-annex">
+    <h1><span class="secnum">6.3</span> emu-annex</h1>
+    <p>Annex clause.</p>
+
+    <h2>Attributes</h2>
+    <p><b>normative:</b> If present, annex is normative. Default is non-normative.</p>
+    <p><b>id:</b> Clause id. Must be unique.</p>
+    <p><b>aoid:</b> Abstract operation ID. A unique name identifying this clause as an abstract operation. Algorithm steps will auto-link calls to this abstract operation to this clause. If left blank, the aoid will be set to the id of this clause.</p>
+  </emu-clause>
+</emu-clause>
+
+<emu-clause id="definitions">
+  <h1><span class="secnum">7</span> Definitions</h1>
+  <p>Terms can be defined using the <code>&lt;dfn&gt;</code> element. Any uses of that term will be automatically linked to the clause containing the definition, or, if the <code>&lt;dfn&gt;</code> element has an <code>id</code>, to the <code>&lt;dfn&gt;</code> itself. This can be suppressed with the <a href="#emu-not-ref"><code>emu-not-ref</code></a> element.</p>
+  <p>When the term starts with a lowercase English letter, usages of the term with the first letter capitalized will also link.</p>
+
+  <h2>Attributes</h2>
+  <p><b>variants:</b> If present, specifies other variants of the term (such as plural forms). Multiple variants are separated by commas with optional whitespace.</p>
+
+  <h2>Example</h2>
+  <pre><code class="language-html hljs"><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>A <span class="hljs-tag">&lt;<span class="hljs-name">dfn</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"swordfish"</span> <span class="hljs-attr">variants</span>=<span class="hljs-string">"swordfishes,broadbill,broadbills,Xiphias gladius"</span>&gt;</span>swordfish<span class="hljs-tag">&lt;/<span class="hljs-name">dfn</span>&gt;</span> is a large fish characterized by a long, pointed bill.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>The Latin name for swordfishes, <span class="hljs-tag">&lt;<span class="hljs-name">em</span>&gt;</span>Xiphias gladius<span class="hljs-tag">&lt;/<span class="hljs-name">em</span>&gt;</span>, comes from the Greek word "ξίφος" (xiphos, "sword") and from the Latin word "gladius" ("sword").<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></code></pre>
+
+  <h3>Result</h3>
+  <aside class="result">
+    <p>A <dfn id="swordfish" variants="swordfishes,Xiphias gladius">swordfish</dfn> is large fish characterized by a long, pointed bill.</p>
+    <p>The Latin name for <emu-xref href="#swordfish" id="_ref_44"><a href="#swordfish">swordfishes</a></emu-xref>, <em><emu-xref href="#swordfish" id="_ref_45"><a href="#swordfish">Xiphias gladius</a></emu-xref></em>, comes from the Greek word "ξίφος" (xiphos, "sword") and from the Latin word "gladius" ("sword").</p>
+  </aside>
+</emu-clause>
+
+<emu-clause id="effects">
+  <h1><span class="secnum">8</span> Effects</h1>
+  <p>Abstract operations can be marked as having effects that propagate to their invocation sites. Subject to the following rules, calls to such operations are given a class of the effect name prefixed with “e-”. When using <code>markEffects</code>, the CSS includes styling for the "user-code" effect via class name <code>e-user-code</code> that is off by default but can be togged by pressing <kbd>u</kbd>.</p>
+
+  <p>Within an algorithm, an <code>emu-meta</code> element enclosing an operation invocation can be used to indicate either the origination of effects or the absence of effects using a list of effect names separated by commas with optional whitespace in an <b>effects</b> or <b>suppress-effects</b> attribute (respectively).</p>
+  <pre><code class="language-html hljs">1. Let _value_ be ? <span class="hljs-tag">&lt;<span class="hljs-name">emu-meta</span> <span class="hljs-attr">effects</span>=<span class="hljs-string">"user-code"</span>&gt;</span>_O_.[[Get]]<span class="hljs-tag">&lt;/<span class="hljs-name">emu-meta</span>&gt;</span>(_P_, _O_).
+1. Let _primValue_ be ? ToPrimitive(_value_, ~number~).
+1. Let _stringValue_ be ? <span class="hljs-tag">&lt;<span class="hljs-name">emu-meta</span> <span class="hljs-attr">suppress-effects</span>=<span class="hljs-string">"user-code"</span>&gt;</span>ToString(_primValue_)<span class="hljs-tag">&lt;/<span class="hljs-name">emu-meta</span>&gt;</span>.</code></pre>
+
+  <p>Effects do not normally propagate to callsites marked as infallibly non-abrupt with <code>!</code>. Such sites must be manually marked with <code>emu-meta</code>.</p>
+
+  <p>When a step or its substeps have effects but those effects should not imply that the containing algorithm has the same effects, propagation may be prevented using a <code>[fence-effects="user-code"]</code> annotation at the begining of the step. This implicitly applies to steps which define abstract closures.</p>
+
+  <p>It is also possible to associate effects at the level of an entire operation (for example, because it is not defined with algorithm steps) by adding to its <a href="#emu-clause-structured-headers">structured header</a> an <b>effects</b> entry.</p>
+
+  <h2>Example</h2>
+  <pre><code class="language-html hljs"><span class="hljs-tag">&lt;<span class="hljs-name">emu-clause</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sec-effect"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"abstract operation"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>Effect ()<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">dl</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"header"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">dl</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">emu-alg</span>&gt;</span>
+    1. <span class="hljs-tag">&lt;<span class="hljs-name">emu-meta</span> <span class="hljs-attr">effects</span>=<span class="hljs-string">"user-code"</span>&gt;</span>Call user code.<span class="hljs-tag">&lt;/<span class="hljs-name">emu-meta</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">emu-alg</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">emu-clause</span>&gt;</span>
+
+<span class="hljs-tag">&lt;<span class="hljs-name">emu-clause</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sec-transitive-effect"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"abstract operation"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>TransitiveEffect ()<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">dl</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"header"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">dl</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">emu-alg</span>&gt;</span>
+    1. Perform Effect().
+  <span class="hljs-tag">&lt;/<span class="hljs-name">emu-alg</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">emu-clause</span>&gt;</span></code></pre>
+
+  <h3>Result</h3>
+  <em>Press <kbd>u</kbd> to toggle annotation visibility.</em>
+  <aside class="result">
+
+    <emu-clause id="sec-effect" type="abstract operation" aoid="Effect">
+      <h1><span class="secnum">8.1</span> Effect ( )</h1>
+      <p>The abstract operation Effect takes no arguments. It performs the following steps when called:</p>
+      <emu-alg><ol><li><span class="e-user-code">Call user code.</span></li></ol></emu-alg>
+    </emu-clause>
+
+    <emu-clause id="sec-transitive-effect" type="abstract operation" aoid="TransitiveEffect">
+      <h1><span class="secnum">8.2</span> TransitiveEffect ( )</h1>
+      <p>The abstract operation TransitiveEffect takes no arguments. It performs the following steps when called:</p>
+      <emu-alg><ol><li>Perform <emu-xref aoid="Effect" id="_ref_46"><a href="#sec-effect" class="e-user-code">Effect</a></emu-xref>().</li></ol></emu-alg>
+    </emu-clause>
+  </aside>
+</emu-clause>
+
+<emu-clause id="emu-alg" aoid="EmuAlg">
+  <h1><span class="secnum">9</span> emu-alg</h1>
+  <p>Algorithm steps. Should not contain any HTML. The node's textContent is parsed as an Ecmarkdown document. Additionally, calls to abstract operations inside algorithm steps are automatically linked to their definitions by first checking for any clauses or algorithms with the appropriate <b>aoid</b> in the current spec, and afterwards checking any linked <a href="#emu-biblio">bibliography files</a>.</p>
+  <p>Algorithm steps can be annotated with additional metadata as summarized in <emu-xref href="#algorithm-step-annotation" id="_ref_17"><a href="#algorithm-step-annotation">Table 5</a></emu-xref>.</p>
+
+  <h2>Attributes</h2>
+  <p><b>example:</b> If present, the element is an example.</p>
+  <p><b>replaces-step:</b> If present, references a step to replace by its <emu-xref href="#labeled-steps" id="_ref_18"><a href="#labeled-steps"><b>id</b></a></emu-xref> (whose numbering the algorithm adopts).</p>
+
+  <h2>Example</h2>
+  <emu-note><span class="note">Note</span><div class="note-contents">The <emu-xref href="#emu-alg" title="" id="_ref_19"><a href="#emu-alg">emu-alg</a></emu-xref> clause has an aoid of "EmuAlg".</div></emu-note>
+  <pre><code class="language-html hljs"><span class="hljs-tag">&lt;<span class="hljs-name">emu-alg</span>&gt;</span>
+  1. Let _clauseAbstractOp_ be the result of calling EmuAlg().
+  1. If *false* is *true*, then
+    1. [id="step-example-label"] Let _recurse_ be the result of calling EmuAlg(*true*).
+    1. Return the result of evaluating this |NonTerminalProduction|.
+<span class="hljs-tag">&lt;/<span class="hljs-name">emu-alg</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>The following is an alernative definition of step <span class="hljs-tag">&lt;<span class="hljs-name">emu-xref</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#step-example-label"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">emu-xref</span>&gt;</span>.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">emu-alg</span> <span class="hljs-attr">replaces-step</span>=<span class="hljs-string">"step-example-label"</span>&gt;</span>
+  1. Replacement.
+    1. Substep.
+<span class="hljs-tag">&lt;/<span class="hljs-name">emu-alg</span>&gt;</span></code></pre>
+
+  <h3>Result</h3>
+  <aside class="result">
+    <emu-alg><ol><li>Let <var>clauseAbstractOp</var> be the result of calling <emu-xref aoid="EmuAlg" id="_ref_47"><a href="#emu-alg">EmuAlg</a></emu-xref>().</li><li>If <emu-val>false</emu-val> is <emu-val>true</emu-val>, then<ol><li id="step-example-label">Let <var>recurse</var> be the result of calling <emu-xref aoid="EmuAlg" id="_ref_48"><a href="#emu-alg">EmuAlg</a></emu-xref>(<emu-val>true</emu-val>).</li><li>Return the result of evaluating this <emu-nt>NonTerminalProduction</emu-nt>.</li></ol></li></ol></emu-alg>
+    <p>The following is an alernative definition of step <emu-xref href="#step-example-label" id="_ref_20"><a href="#step-example-label">2.a</a></emu-xref>.</p>
+    <emu-alg replaces-step="step-example-label"><ol start="1" class="nested-once"><li>Replacement.<ol><li>Substep.</li></ol></li></ol></emu-alg>
+  </aside>
+
+  <emu-table id="algorithm-step-annotation"><figure><figcaption>Table 5: Algorithm Step Annotation</figcaption>
+    
+    <table>
+      <tbody><tr><th>Data</th><th>Description</th><th>Example Syntax</th></tr>
+      <tr>
+        <td><emu-xref href="#labeled-steps" id="_ref_21"><a href="#labeled-steps">Step labels</a></emu-xref></td>
+        <td>Provide an id for referencing an individual step.</td>
+        <td><code>[id="step-label"]</code></td>
+      </tr>
+      <tr>
+        <td><emu-xref href="#variable-declarations" title="" id="_ref_22"><a href="#variable-declarations">Variable Declarations</a></emu-xref></td>
+        <td>Inform the linter of the existence of a variable.</td>
+        <td><code>[declared="x"]</code></td>
+      </tr>
+      <tr>
+        <td><emu-xref href="#effects" id="_ref_23"><a href="#effects">Effect propagation control</a></emu-xref></td>
+        <td>Originate, suppress, or constrain the scope of effects.</td>
+        <td><code>&lt;emu-meta&gt;</code>, <code>[fence-effects="user-code"]</code></td>
+      </tr>
+      <tr>
+        <td>Step optionality</td>
+        <td>Mark a step as deprecated, normative-optional, or legacy.</td>
+        <td><code>[normative-optional]</code></td>
+      </tr>
+    </tbody></table>
+  </figure></emu-table>
+
+  <emu-clause id="labeled-steps">
+    <h1><span class="secnum">9.1</span> Step Labels</h1>
+    <p>Each step can be given an id for reference by <emu-xref href="#emu-xref" title="" id="_ref_24"><a href="#emu-xref">emu-xref</a></emu-xref> or <b>replaces-step</b>.</p>
+
+    <h2>Example</h2>
+    <pre><code class="language-html hljs"><span class="hljs-tag">&lt;<span class="hljs-name">emu-alg</span>&gt;</span>
+  1. [id="step-example-internal"] Let _obj_ be OrdinaryObjectCreate(*null*).
+<span class="hljs-tag">&lt;/<span class="hljs-name">emu-alg</span>&gt;</span></code></pre>
+  </emu-clause>
+
+  <emu-clause id="variable-declarations">
+    <h1><span class="secnum">9.2</span> Variable Declarations</h1>
+    <p>The linter checks that each used variable in an algorithm step is declared earlier. It recognizes most common forms of declaration automatically, but in case there is a declaration which is not automatically inferred, a variable can be marked as declared for the purposes of this analysis by adding a <code>[declared="v"]</code> attribute at the start of the step. Multiple variables can be separated by commas with optional whitespace.</p>
+    <p>Note that the <code>[declared="v"]</code> attribute must be at the beginning of the step, including before any <code>&lt;ins&gt;</code> tags.</p>
+
+    <h2>Example</h2>
+    <pre><code class="language-html hljs"><span class="hljs-tag">&lt;<span class="hljs-name">emu-alg</span>&gt;</span>
+  1. [declared="x"] Suppose the existence of _x_.
+<span class="hljs-tag">&lt;/<span class="hljs-name">emu-alg</span>&gt;</span></code></pre>
+  </emu-clause>
+</emu-clause>
+
+<emu-clause id="emu-eqn">
+  <h1><span class="secnum">10</span> emu-eqn</h1>
+  <p>An equation, similar to those found in ES6 <a href="https://tc39.es/ecma262/#sec-year-number">Year Number</a>.</p>
+
+  <h2>Attributes</h2>
+  <p><b>aoid:</b> If present, an abstract operation id defined by this equation.</p>
+  <p><b>id:</b> If present, links will go directly to the eqn definition. Otherwise, links go to the parent clause.</p>
+</emu-clause>
+
+<emu-clause id="emu-note">
+  <h1><span class="secnum">11</span> emu-note</h1>
+  <p>Non-normative explanatory text. Comes in two types - regular notes and Editor's notes. Regular notes are intended for the implementers and end users of this specification. Editor's notes are notes to and from the Editors and will generally be removed prior to a specification being finalized and ratified.</p>
+
+  <h2>Attributes</h2>
+  <p><b>type:</b> The type of note, either blank or "editor".</p>
+
+  <h2>Example</h2>
+  <pre><code class="language-html hljs"><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>For authentication only, servers and clients MUST support SASL Salted Challenge Response Authentication Mechanism [SCRAM].<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">emu-note</span>&gt;</span>But we know you won't.<span class="hljs-tag">&lt;/<span class="hljs-name">emu-note</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">emu-note</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"editor"</span>&gt;</span>This joke brought to you by RFC6919.<span class="hljs-tag">&lt;/<span class="hljs-name">emu-note</span>&gt;</span></code></pre>
+
+  <h3>Result</h3>
+  <aside class="result">
+    <p>For authentication only, servers and clients MUST support SASL Salted Challenge Response Authentication Mechanism [SCRAM].</p>
+    <emu-note><span class="note">Note</span><div class="note-contents">But we know you won't.</div></emu-note>
+    <emu-note type="editor"><span class="note">Editor's Note</span><div class="note-contents">This joke brought to you by RFC6919.</div></emu-note>
+  </aside>
+</emu-clause>
+
+<emu-clause id="emu-xref">
+  <h1><span class="secnum">12</span> emu-xref</h1>
+  <p>Cross-reference another clause, production, note, example, abstract operation, or labeled step. If the text content of this element is empty, a suitable default is used. The <code>title</code> attribute controls this default - when present, clauses are referred to using their title rather than number. This also applies to examples which are indexed first by their containing clause and then their example number.</p>
+  <p>Cross-references to an id check for clauses, productions, examples, and steps in this order. For each type, the local document is consulted before looking for external sources.</p>
+
+  <h2>Attributes</h2>
+  <p><b>href:</b> Optional: URL of the target clause, production, or example to cross-reference, interpreted relative to the containing document.</p>
+  <p><b>title:</b> Optional: If present, xref will be filled in with the referenced clause's title. Otherwise, the clause's section number is used.</p>
+  <p><b>aoid:</b> Optional: aoid of an abstract operation to reference.</p>
+
+  <p>One of aoid or href must be specified.</p>
+
+  <h2>Example</h2>
+  <pre><code class="language-html hljs"><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>The clause element is specified in <span class="hljs-tag">&lt;<span class="hljs-name">emu-xref</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#emu-clause"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">emu-xref</span>&gt;</span>.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>See <span class="hljs-tag">&lt;<span class="hljs-name">emu-xref</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#emu-note"</span> <span class="hljs-attr">title</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">emu-xref</span>&gt;</span> for information on the emu-note element.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>The <span class="hljs-tag">&lt;<span class="hljs-name">emu-xref</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#emu-biblio"</span>&gt;</span>biblio element<span class="hljs-tag">&lt;/<span class="hljs-name">emu-xref</span>&gt;</span> supports xref to external specs.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">emu-xref</span> <span class="hljs-attr">aoid</span>=<span class="hljs-string">"Get"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">emu-xref</span>&gt;</span> is an abstract operation from ES6<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">emu-alg</span>&gt;</span>1. [id="step-label-example"] Example labeled step.<span class="hljs-tag">&lt;/<span class="hljs-name">emu-alg</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>You can reference step <span class="hljs-tag">&lt;<span class="hljs-name">emu-xref</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#step-label-example"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">emu-xref</span>&gt;</span> like this<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></code></pre>
+
+  <h3>Result</h3>
+  <aside class="result">
+    <p>The clause element is specified in <emu-xref href="#emu-clause" id="_ref_25"><a href="#emu-clause">6.2</a></emu-xref>.</p>
+    <p>See <emu-xref href="#emu-note" title="" id="_ref_26"><a href="#emu-note">emu-note</a></emu-xref> for information on the emu-note element.</p>
+    <p>The <emu-xref href="#emu-biblio" id="_ref_27"><a href="#emu-biblio">biblio element</a></emu-xref> will eventually support xref to external specs.</p>
+    <p><emu-xref aoid="Get"><a href="https://tc39.es/ecma262/#sec-get-o-p">Get</a></emu-xref> is an abstract operation from ES6</p>
+    <p>
+      <emu-alg><ol><li id="step-label-example">Example labeled step.</li></ol></emu-alg>
+    </p>
+    <p>You can reference step <emu-xref href="#step-label-example" id="_ref_28"><a href="#step-label-example">1</a></emu-xref> like this</p>
+  </aside>
+</emu-clause>
+
+<emu-clause id="emu-not-ref" namespace="emu-not-ref">
+  <h1><span class="secnum">13</span> emu-not-ref</h1>
+  <p>Suppresses automatic linking to definitions.</p>
+
+  <h2>Example</h2>
+  <pre><code class="language-html hljs"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"not-ref-section-1"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>An <span class="hljs-tag">&lt;<span class="hljs-name">dfn</span>&gt;</span>example<span class="hljs-tag">&lt;/<span class="hljs-name">dfn</span>&gt;</span> is used for illustrative purposes.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"not-ref-section-2"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>When a word defined in another section (or algorithm step) is used, as in this example, it is normally automatically linked to the section containing the definition.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>When such a word should not be automatically linked, for <span class="hljs-tag">&lt;<span class="hljs-name">emu-not-ref</span>&gt;</span>example<span class="hljs-tag">&lt;/<span class="hljs-name">emu-not-ref</span>&gt;</span> when using its colloquial definition, it can be wrapped with this tag to surpress the automatic linking.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
+
+  <h3>Result</h3>
+  <aside class="result">
+    <div id="not-ref-section-1">
+      <p>An <dfn>example</dfn> is used for illustrative purposes.</p>
+    </div>
+    <div id="not-ref-section-2">
+      <p>When a word defined in another section (or algorithm step) is used, as in this <emu-xref href="#emu-not-ref" id="_ref_57"><a href="#emu-not-ref">example</a></emu-xref>, it is normally automatically linked to the section containing the definition.</p>
+      <p>When such a word should not be automatically linked, for <emu-not-ref>example</emu-not-ref> when using its colloquial definition, it can be wrapped with this tag to surpress the automatic linking.</p>
+    </div>
+  </aside>
+</emu-clause>
+
+<emu-clause id="emu-figure">
+  <h1><span class="secnum">14</span> emu-figure</h1>
+  <p>Creates a figure that can be referenced by <emu-xref href="#emu-xref" title="" id="_ref_29"><a href="#emu-xref">emu-xref</a></emu-xref>. Add a caption using a child <code>emu-caption</code> element.</p>
+
+  <h2>Attributes</h2>
+  <p><b>informative:</b> Optional: If present, the figure is informative. Otherwise it is normative.</p>
+
+  <h2>Example</h2>
+  <pre><code class="language-html hljs"><span class="hljs-tag">&lt;<span class="hljs-name">emu-figure</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">emu-caption</span>&gt;</span>Example figure<span class="hljs-tag">&lt;<span class="hljs-name">emu-caption</span>&gt;</span>
+  [[insert some awesome graphic here, maybe something like figure 2]]
+<span class="hljs-tag">&lt;/<span class="hljs-name">emu-figure</span>&gt;</span></code></pre>
+
+  <h3>Result</h3>
+  <aside class="result">
+    <emu-figure><figure><figcaption>Figure 1: Example figure</figcaption>
+      
+      [[insert some awesome graphic here, maybe something like figure 2]]
+    </figure></emu-figure>
+  </aside>
+</emu-clause>
+
+<emu-clause id="emu-table">
+  <h1><span class="secnum">15</span> emu-table</h1>
+  <p>Creates a table that can be referenced by <emu-xref href="#emu-xref" title="" id="_ref_30"><a href="#emu-xref">emu-xref</a></emu-xref>. Add a caption using a child <code>emu-caption</code> element.</p>
+
+  <h2>Attributes</h2>
+  <p><b>caption:</b> Optional: Caption for the example</p>
+  <p><b>informative:</b> Optional: If present, the table is informative. Otherwise it is normative.</p>
+
+  <h2>Example</h2>
+  <pre><code class="language-html hljs"><span class="hljs-tag">&lt;<span class="hljs-name">emu-table</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">emu-caption</span>&gt;</span>Example table<span class="hljs-tag">&lt;<span class="hljs-name">emu-caption</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">table</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>Column 1<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>Column 2<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>Value<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>Value 2<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>Value<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>Value 2<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>Value<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>Value 2<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>Value<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>Value 2<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">table</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">emu-table</span>&gt;</span></code></pre>
+
+  <h3>Result</h3>
+  <aside class="result">
+    <emu-table><figure><figcaption>Table 6: Example table</figcaption>
+      
+      <table>
+        <tbody><tr><th>Column 1</th><th>Column 2</th></tr>
+        <tr><td>Value</td><td>Value 2</td></tr>
+        <tr><td>Value</td><td>Value 2</td></tr>
+        <tr><td>Value</td><td>Value 2</td></tr>
+        <tr><td>Value</td><td>Value 2</td></tr>
+      </tbody></table>
+    </figure></emu-table>
+  </aside>
+</emu-clause>
+
+<emu-clause id="emu-example">
+  <h1><span class="secnum">16</span> emu-example</h1>
+  <p>Creates an informative example that can be referenced by <emu-xref href="#emu-xref" title="" id="_ref_31"><a href="#emu-xref">emu-xref</a></emu-xref>. Examples are numbered based on how many are present in the example's containing clause.</p>
+
+  <h2>Attributes</h2>
+  <p><b>caption:</b> Optional: Caption for the example</p>
+
+  <h2>Example</h2>
+  <pre><code class="language-html hljs"><span class="hljs-tag">&lt;<span class="hljs-name">emu-example</span> <span class="hljs-attr">caption</span>=<span class="hljs-string">"Example Example"</span>&gt;</span>
+  This is an example.
+<span class="hljs-tag">&lt;/<span class="hljs-name">emu-example</span>&gt;</span>
+
+<span class="hljs-tag">&lt;<span class="hljs-name">emu-example</span> <span class="hljs-attr">caption</span>=<span class="hljs-string">"Another Example Example"</span>&gt;</span>
+  This is also an example.
+<span class="hljs-tag">&lt;/<span class="hljs-name">emu-example</span>&gt;</span></code></pre>
+
+  <h3>Result</h3>
+  <aside class="result">
+    <emu-example caption="Example Example"><figure><figcaption>Example 1 (Informative): Example Example</figcaption>
+      This is an example.
+    </figure></emu-example>
+
+    <emu-example caption="Another Example Example"><figure><figcaption>Example 2 (Informative): Another Example Example</figcaption>
+      This is also an example.
+    </figure></emu-example>
+  </aside>
+</emu-clause>
+
+<emu-clause id="emu-biblio">
+  <h1><span class="secnum">17</span> emu-biblio</h1>
+  <p>Links a bibliography file. The bibliography file is a JSON document containing URLs for referenced documents along with any algorithms they define.</p>
+
+  <h2>Attributes</h2>
+  <p><b>href:</b> Required: URL of the biblio file, interpreted relative to the containing document.</p>
+
+  <h2>Example</h2>
+  <b>biblio.json</b>
+  <pre><code class="language-json hljs"><span class="hljs-punctuation">{</span>
+  <span class="hljs-attr">"https://tc39.github.io/ecma262/"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span>
+    <span class="hljs-punctuation">{</span>
+      <span class="hljs-attr">"type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"op"</span><span class="hljs-punctuation">,</span>
+      <span class="hljs-attr">"id"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"sec-returnifabrupt"</span><span class="hljs-punctuation">,</span>
+      <span class="hljs-attr">"aoid"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"ReturnIfAbrupt"</span>
+    <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span>
+    <span class="hljs-punctuation">{</span>
+      <span class="hljs-attr">"type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"op"</span><span class="hljs-punctuation">,</span>
+      <span class="hljs-attr">"id"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"sec-get-o-p"</span><span class="hljs-punctuation">,</span>
+      <span class="hljs-attr">"aoid"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"Get"</span>
+    <span class="hljs-punctuation">}</span>
+  <span class="hljs-punctuation">]</span>
+<span class="hljs-punctuation">}</span></code></pre>
+  <b>spec.emu</b>
+  <pre><code class="language-html hljs"><span class="hljs-tag">&lt;<span class="hljs-name">emu-biblio</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"./biblio.json"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">emu-biblio</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">emu-alg</span>&gt;</span>
+1. Let _res_ be Get(_obj_, _key_).
+1. ReturnIfAbrupt(_res_).
+<span class="hljs-tag">&lt;/<span class="hljs-name">emu-alg</span>&gt;</span></code></pre>
+
+  <h3>Result</h3>
+  <aside class="result">
+    <emu-alg><ol><li>Let <var>res</var> be <emu-xref aoid="Get"><a href="https://tc39.es/ecma262/#sec-get-o-p">Get</a></emu-xref>(<var>obj</var>, <var>key</var>).</li><li><emu-xref aoid="ReturnIfAbrupt"><a href="https://tc39.es/ecma262/#sec-returnifabrupt">ReturnIfAbrupt</a></emu-xref>(<var>res</var>).</li></ol></emu-alg>
+  </aside>
+</emu-clause>
+
+<emu-clause id="emu-grammar">
+  <h1><span class="secnum">18</span> emu-grammar</h1>
+  <p>Text inside emu-grammar elements is parsed using <a href="https://github.com/rbuckton/grammarkdown">Grammarkdown</a>. The syntax is essentially identical to the notational conventions in ECMAScript (minus formatting). See the <a href="https://github.com/rbuckton/grammarkdown">Grammarkdown readme</a>.</p>
+  <p>Grammar will be displayed as an inline element flowing with text unless it is the immediate child of an emu-clause-like element.</p>
+
+  <h2>Attributes</h2>
+  <p><b>collapsed:</b> If present, productions are displayed in collapsed format with <emu-xref href="#emu-production" id="_ref_49"><a href="#emu-production">LHS</a></emu-xref> and <emu-xref href="#emu-production" id="_ref_50"><a href="#emu-production">RHS</a></emu-xref> on the same line.</p>
+  <p><b>example:</b> If present, the element is an example.</p>
+  <p><b>primary:</b> Optional: Deprecated in favor of type="definition".</p>
+  <p><b>type:</b> Optional: Disposition of the grammar. If absent, it is considered to reference productions defined elsewhere.</p>
+  <ul>
+    <li>"definition": The grammar is an authoritative source for productions which should be the target of references.</li>
+    <li>"example": Deprecated in favor of the <b>example</b> attribute.</li>
+  </ul>
+
+  <h2>Example</h2>
+  <pre><code class="language-html hljs"><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">emu-grammar</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"definition"</span> <span class="hljs-attr">collapsed</span> <span class="hljs-attr">example</span>&gt;</span>
+    HexIntegerLiteral :: `0x` HexDigits
+  <span class="hljs-tag">&lt;/<span class="hljs-name">emu-grammar</span>&gt;</span>
+  is a shorthand for:
+<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">emu-grammar</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"definition"</span> <span class="hljs-attr">example</span>&gt;</span>
+  HexIntegerLiteral :: `0` `x` HexDigits
+<span class="hljs-tag">&lt;/<span class="hljs-name">emu-grammar</span>&gt;</span></code></pre>
+
+  <h3>Result</h3>
+  <aside class="result">
+    <p>
+      <emu-grammar type="definition" collapsed="" example=""><emu-production name="HexIntegerLiteral" type="lexical" collapsed="" class=" inline">
+    <emu-nt><a href="#prod-HexIntegerLiteral">HexIntegerLiteral</a></emu-nt> <emu-geq>::</emu-geq> <emu-rhs a="zxvbgn4l">
+        <emu-t>0x</emu-t>
+        <emu-nt>HexDigits</emu-nt>
+    </emu-rhs>
+</emu-production>
+</emu-grammar>
+      is a shorthand for:
+    </p>
+    <emu-grammar type="definition" example=""><emu-production name="HexIntegerLiteral" type="lexical" collapsed="" id="prod-HexIntegerLiteral" class=" inline">
+    <emu-nt><a href="#prod-HexIntegerLiteral">HexIntegerLiteral</a></emu-nt> <emu-geq>::</emu-geq> <emu-rhs a="tu0pitdu">
+        <emu-t>0</emu-t>
+        <emu-t>x</emu-t>
+        <emu-nt>HexDigits</emu-nt>
+    </emu-rhs>
+</emu-production>
+</emu-grammar>
+  </aside>
+</emu-clause>
+
+<emu-clause id="grammar">
+  <h1><span class="secnum">19</span> Directly Specifying Grammar</h1>
+  <p>Although discouraged, it is possible to directly specify grammar using the <a href="#emu-production">emu-production</a> element and related elements emitted by <a href="https://github.com/rbuckton/grammarkdown">Grammarkdown</a>.</p>
+
+  <h2>Lexical Grammar Examples</h2>
+  <pre><code class="language-html hljs"><span class="hljs-tag">&lt;<span class="hljs-name">emu-production</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"DecimalDigit"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"lexical"</span> <span class="hljs-attr">oneof</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">emu-rhs</span>&gt;</span>0 1 2 3 4 5 6 7 8 9<span class="hljs-tag">&lt;/<span class="hljs-name">emu-rhs</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">emu-production</span>&gt;</span>
+
+<span class="hljs-tag">&lt;<span class="hljs-name">emu-production</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"Identifier"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"lexical"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">emu-rhs</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">emu-nt</span>&gt;</span>IdentifierName<span class="hljs-tag">&lt;/<span class="hljs-name">emu-nt</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">emu-gmod</span>&gt;</span>but not
+      <span class="hljs-tag">&lt;<span class="hljs-name">emu-nt</span>&gt;</span>ReservedWord<span class="hljs-tag">&lt;/<span class="hljs-name">emu-nt</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">emu-gmod</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">emu-rhs</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">emu-production</span>&gt;</span>
+
+<span class="hljs-tag">&lt;<span class="hljs-name">emu-production</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"SourceCharacter"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"lexical"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">emu-rhs</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">emu-gprose</span>&gt;</span>any Unicode code point<span class="hljs-tag">&lt;/<span class="hljs-name">emu-gprose</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">emu-rhs</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">emu-production</span>&gt;</span></code></pre>
+
+  <h3>Result</h3>
+  <aside class="result" data-simulate-tagname="emu-clause">
+    <emu-production name="DecimalDigit" type="lexical" oneof="" primary="" id="prod-DecimalDigit">
+      <emu-nt><a href="#prod-DecimalDigit">DecimalDigit</a></emu-nt> <emu-geq>::</emu-geq> <emu-oneof>one of</emu-oneof> <emu-rhs><emu-t>0</emu-t> <emu-t>1</emu-t> <emu-t>2</emu-t> <emu-t>3</emu-t> <emu-t>4</emu-t> <emu-t>5</emu-t> <emu-t>6</emu-t> <emu-t>7</emu-t> <emu-t>8</emu-t> <emu-t>9</emu-t></emu-rhs>
+    </emu-production>
+
+    <emu-production name="Identifier" type="lexical" primary="" id="prod-Identifier">
+      <emu-nt><a href="#prod-Identifier">Identifier</a></emu-nt> <emu-geq>::</emu-geq> <emu-rhs><emu-nt>IdentifierName</emu-nt> <emu-gmod>but not
+          <emu-nt>ReservedWord</emu-nt></emu-gmod></emu-rhs>
+    </emu-production>
+
+    <emu-production name="SourceCharacter" type="lexical" primary="" id="prod-SourceCharacter">
+      <emu-nt><a href="#prod-SourceCharacter">SourceCharacter</a></emu-nt> <emu-geq>::</emu-geq> <emu-rhs><emu-gprose>any Unicode code point</emu-gprose></emu-rhs>
+    </emu-production>
+  </aside>
+
+  <h2>Syntactic Grammar Examples</h2>
+  <pre><code class="language-html hljs"><span class="hljs-tag">&lt;<span class="hljs-name">emu-production</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"ExpressionStatement"</span> <span class="hljs-attr">params</span>=<span class="hljs-string">"Yield"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">emu-rhs</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">emu-gann</span>&gt;</span>lookahead ∉ { <span class="hljs-tag">&lt;<span class="hljs-name">emu-t</span>&gt;</span>{<span class="hljs-tag">&lt;/<span class="hljs-name">emu-t</span>&gt;</span>, <span class="hljs-tag">&lt;<span class="hljs-name">emu-t</span>&gt;</span>function<span class="hljs-tag">&lt;/<span class="hljs-name">emu-t</span>&gt;</span>,
+        <span class="hljs-tag">&lt;<span class="hljs-name">emu-t</span>&gt;</span>class<span class="hljs-tag">&lt;/<span class="hljs-name">emu-t</span>&gt;</span>, <span class="hljs-tag">&lt;<span class="hljs-name">emu-t</span>&gt;</span>let [<span class="hljs-tag">&lt;/<span class="hljs-name">emu-t</span>&gt;</span> }<span class="hljs-tag">&lt;/<span class="hljs-name">emu-gann</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">emu-rhs</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">emu-production</span>&gt;</span>
+
+<span class="hljs-tag">&lt;<span class="hljs-name">emu-production</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"IterationStatement"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">emu-rhs</span>&gt;</span>for ( <span class="hljs-tag">&lt;<span class="hljs-name">emu-nt</span>&gt;</span>LexicalDeclaration<span class="hljs-tag">&lt;/<span class="hljs-name">emu-nt</span>&gt;</span> ; <span class="hljs-tag">&lt;<span class="hljs-name">emu-nt</span> <span class="hljs-attr">optional</span>&gt;</span>Expression<span class="hljs-tag">&lt;/<span class="hljs-name">emu-nt</span>&gt;</span> ;
+  <span class="hljs-tag">&lt;<span class="hljs-name">emu-nt</span> <span class="hljs-attr">optional</span>&gt;</span>Expression<span class="hljs-tag">&lt;/<span class="hljs-name">emu-nt</span>&gt;</span> ) <span class="hljs-tag">&lt;<span class="hljs-name">emu-nt</span>&gt;</span>Statement<span class="hljs-tag">&lt;/<span class="hljs-name">emu-nt</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">emu-rhs</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">emu-production</span>&gt;</span>
+
+<span class="hljs-tag">&lt;<span class="hljs-name">emu-production</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"StatementList"</span> <span class="hljs-attr">params</span>=<span class="hljs-string">"Return, In"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">emu-rhs</span> <span class="hljs-attr">constraints</span>=<span class="hljs-string">"~Return"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">emu-nt</span>&gt;</span>ReturnStatement<span class="hljs-tag">&lt;/<span class="hljs-name">emu-nt</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">emu-rhs</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">emu-rhs</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">emu-nt</span>&gt;</span>ExpressionStatement<span class="hljs-tag">&lt;/<span class="hljs-name">emu-nt</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">emu-rhs</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">emu-production</span>&gt;</span></code></pre>
+
+  <h3>Result</h3>
+  <aside class="result" data-simulate-tagname="emu-clause">
+    <emu-production name="ExpressionStatement" params="Yield" primary="" id="prod-ExpressionStatement">
+      <emu-nt params="Yield"><a href="#prod-ExpressionStatement">ExpressionStatement</a><emu-mods><emu-params>[Yield]</emu-params></emu-mods></emu-nt> <emu-geq>:</emu-geq> <emu-rhs>
+        <emu-gann>[lookahead ∉ { <emu-t>{</emu-t>, <emu-t>function</emu-t>,
+          <emu-t>class</emu-t>, <emu-t>let [</emu-t> }]</emu-gann>
+      </emu-rhs>
+    </emu-production>
+
+    <emu-production name="IterationStatement" primary="" id="prod-IterationStatement">
+      <emu-nt><a href="#prod-IterationStatement">IterationStatement</a></emu-nt> <emu-geq>:</emu-geq> <emu-rhs><emu-t>for</emu-t> <emu-t>(</emu-t><emu-nt>LexicalDeclaration</emu-nt> <emu-t>;</emu-t><emu-nt optional="">Expression<emu-mods><emu-opt>opt</emu-opt></emu-mods></emu-nt> <emu-t>;</emu-t><emu-nt optional="">Expression<emu-mods><emu-opt>opt</emu-opt></emu-mods></emu-nt> <emu-t>)</emu-t><emu-nt>Statement</emu-nt></emu-rhs>
+    </emu-production>
+
+    <emu-production name="StatementList" params="Return, In" primary="" id="prod-StatementList">
+      <emu-nt params="Return, In"><a href="#prod-StatementList">StatementList</a><emu-mods><emu-params>[Return, In]</emu-params></emu-mods></emu-nt> <emu-geq>:</emu-geq> <emu-rhs constraints="~Return"><emu-constraints>[~Return]</emu-constraints><emu-nt>ReturnStatement</emu-nt></emu-rhs>
+      <emu-rhs><emu-nt id="_ref_58"><a href="#prod-ExpressionStatement">ExpressionStatement</a></emu-nt></emu-rhs>
+    </emu-production>
+  </aside>
+
+  <emu-clause id="emu-production">
+    <h1><span class="secnum">19.1</span> emu-production</h1>
+    <p>This is the top level element that contains a grammar production associating a shared <dfn>LHS</dfn> (left-hand side) <emu-xref href="#emu-nt" title="" id="_ref_32"><a href="#emu-nt">emu-nt</a></emu-xref> non-terminal symbol with one or more <emu-xref href="#emu-rhs" title="" id="_ref_33"><a href="#emu-rhs">emu-rhs</a></emu-xref> elements containing arbitrary <dfn>RHS</dfn> (right-hand side) sequences of terminal and non-terminal symbols.</p>
+    <p>The production will be displayed as an inline element flowing with text unless it is the immediate child of an emu-clause-like element or if its containing emu-grammar element is an immediate child of an emu-clause-like element.</p>
+
+    <h2>Attributes</h2>
+    <p><b>name:</b> Required: Name of the production (i.e. the LHS). Should conform with the syntax of <a href="https://www.unicode.org/reports/tr31/#D1">Unicode Standard Annex #31, UAX31-D1 Default Identifier Syntax</a> and not include any underscore (U+005F LOW LINE “<b>_</b>”).</p>
+    <p><b>collapsed:</b> If present, the production is displayed in collapsed format with LHS and RHS on the same line.</p>
+    <p><b>oneof:</b> If present, the production is a one-of production. See the DecimalDigit example <emu-xref href="#grammar" id="_ref_34"><a href="#grammar">above</a></emu-xref>.</p>
+    <!-- what does it even mean for a LHS to be optional??? -->
+    <p><b>optional:</b> If present, the LHS is marked as optional.</p>
+    <p><b>params:</b> Parameters for this production. Multiple parameters are separated by commas with optional whitespace.</p>
+    <p><b>primary:</b> Optional: The production is authoritative and should be the target of references.</p>
+    <p><b>type:</b> Optional: Type of production. If absent, the production is considered syntactic.</p>
+    <ul>
+      <li>"lexical": The production is part of a lexical grammar, and should render with the LHS and RHS separated by two colons “<b>::</b>”.</li>
+      <li>"regexp": Deprecated because the ECMAScript regular expression grammar is considered to be lexical. Productions with this type render with the LHS and RHS separated by three colons “<b>:::</b>”.</li>
+    </ul>
+  </emu-clause>
+
+  <emu-clause id="emu-rhs">
+    <h1><span class="secnum">19.2</span> emu-rhs</h1>
+    <p>Describes one right-hand-side alternative of a production. Interior text nodes are split on each space and turned into terminal symbols. For example, the following elements are semantically equivalent:</p>
+    <pre><code class="language-html hljs"><span class="hljs-tag">&lt;<span class="hljs-name">emu-rhs</span>&gt;</span>a b c<span class="hljs-tag">&lt;/<span class="hljs-name">emu-rhs</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">emu-rhs</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">emu-t</span>&gt;</span>a<span class="hljs-tag">&lt;/<span class="hljs-name">emu-t</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">emu-t</span>&gt;</span>b<span class="hljs-tag">&lt;/<span class="hljs-name">emu-t</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">emu-t</span>&gt;</span>c<span class="hljs-tag">&lt;/<span class="hljs-name">emu-t</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">emu-rhs</span>&gt;</span></code></pre>
+
+    <h2>Attributes</h2>
+    <p><b>constraints:</b> any constraints for this <emu-xref href="#emu-production" id="_ref_51"><a href="#emu-production">RHS</a></emu-xref>. Multiple constraints are separated by commas with optional whitespace. See the StatementList example <emu-xref href="#grammar" id="_ref_35"><a href="#grammar">above</a></emu-xref>.</p>
+    <p><b>a:</b> Optional: alternative id used to reference a particular <emu-xref href="#emu-production" id="_ref_52"><a href="#emu-production">RHS</a></emu-xref> from an <emu-xref href="#emu-prodref" title="" id="_ref_36"><a href="#emu-prodref">emu-prodref</a></emu-xref>. Must be unique for all <code>emu-rhs</code> elements inside an <emu-xref href="#emu-production" title="" id="_ref_37"><a href="#emu-production">emu-production</a></emu-xref>.</p>
+  </emu-clause>
+
+  <emu-clause id="emu-nt">
+    <h1><span class="secnum">19.3</span> emu-nt</h1>
+    <p>References a non-terminal symbol by the <b>name</b> attribute of its <emu-xref href="#emu-production" title="" id="_ref_38"><a href="#emu-production">emu-production</a></emu-xref>.</p>
+
+    <h2>Attributes</h2>
+    <p><b>example:</b> If present, the element is an example.</p>
+    <p><b>optional:</b> If present, the non-terminal is optional in its containing <emu-xref href="#emu-production" id="_ref_53"><a href="#emu-production">RHS</a></emu-xref>.</p>
+    <p><b>params:</b> Parameters for this non-terminal. Multiple parameters are separated by commas with optional whitespace.</p>
+  </emu-clause>
+
+  <emu-clause id="emu-t">
+    <h1><span class="secnum">19.4</span> emu-t</h1>
+    <p>References a terminal symbol. No attributes are available. Manual creation of these elements should be unnecessary as <a href="#emu-rhs">they are created automatically inside emu-rhs elements</a>.</p>
+  </emu-clause>
+
+  <emu-clause id="emu-gmod">
+    <h1><span class="secnum">19.5</span> emu-gmod</h1>
+
+    <p>Contains well-known modifiers to a right-hand side of a production. The only well-known modifier at present is the "but not" modifier. See the Identifier example <emu-xref href="#grammar" id="_ref_39"><a href="#grammar">above</a></emu-xref>.</p>
+  </emu-clause>
+
+  <emu-clause id="emu-gann">
+    <h1><span class="secnum">19.6</span> emu-gann</h1>
+
+    <p>Contains well-known annotations to to a right-hand side of a production. The only well-known modifiers at present are "lookahead" and "empty". See the ExpressionStatement example <emu-xref href="#grammar" id="_ref_40"><a href="#grammar">above</a></emu-xref>. Any text inside a gann element is wrapped in square brackets.</p>
+  </emu-clause>
+
+  <emu-clause id="emu-gprose">
+    <h1><span class="secnum">19.7</span> emu-gprose</h1>
+    <p>Contains any prose text that describes a production. See the SourceCharacter example <emu-xref href="#grammar" id="_ref_41"><a href="#grammar">above</a></emu-xref>.</p>
+  </emu-clause>
+
+  <emu-clause id="emu-prodref">
+    <h1><span class="secnum">19.8</span> emu-prodref</h1>
+    <p>References a production or <emu-xref href="#emu-production" id="_ref_54"><a href="#emu-production">RHS</a></emu-xref> defined elsewhere. Ecmarkup will insert either the entire production or a particular <emu-xref href="#emu-production" id="_ref_55"><a href="#emu-production">RHS</a></emu-xref> depending on attributes.</p>
+
+    <h2>Attributes</h2>
+    <p><b>name:</b> Required: Name of the production to reference.</p>
+    <p><b>a:</b> Optional. If present, references a particular <emu-xref href="#emu-production" id="_ref_56"><a href="#emu-production">RHS</a></emu-xref> with the specified alternative id in its <b>a</b> attribute.</p>
+  </emu-clause>
+</emu-clause>
+
+<emu-clause id="emu-import" oldids="imports"><span id="imports"></span>
+  <h1><span class="secnum">20</span> emu-import</h1>
+  <p>Imports are treated specially in an ecmarkup document. Every import is inlined into its parent document at the location of the import tag. This is useful for breaking your spec document up into many smaller pieces.</p>
+
+  <h2>Attributes</h2>
+  <p><b>href:</b> Required: URL of the document to import, interpreted relative to the document containing the <code>emu-import</code>.</p>
+</emu-clause>
+
+<emu-clause id="miscellaneous" oldids="css"><span id="css"></span>
+  <h1><span class="secnum">21</span> Other Styles &amp; Conventions</h1>
+
+  <emu-clause id="oldids">
+    <h1><span class="secnum">21.1</span> Old IDs</h1>
+    <p>Old IDs for any element can be stored separated by commas with optional whitespace inside an <b>oldids</b> attribute, allowing links using them to continue working as expected.</p>
+  </emu-clause>
+
+  <emu-clause id="ins-del">
+    <h1><span class="secnum">21.2</span> Indicating Changes</h1>
+    <p>The <code>ins</code> and <code>del</code> HTML elements can be used to mark insertions and deletions respectively. When adding or removing block content (such as entire list items, paragrpahs, clauses, grammar RHSes, etc.), use a class of "block".</p>
+
+    <h2>Inline Example</h2>
+    <pre><code class="language-html hljs">ECMAScript <span class="hljs-tag">&lt;<span class="hljs-name">del</span>&gt;</span>6<span class="hljs-tag">&lt;/<span class="hljs-name">del</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">ins</span>&gt;</span>2015<span class="hljs-tag">&lt;/<span class="hljs-name">ins</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">del</span>&gt;</span>will be ratified<span class="hljs-tag">&lt;/<span class="hljs-name">del</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">ins</span>&gt;</span>was ratified<span class="hljs-tag">&lt;/<span class="hljs-name">ins</span>&gt;</span> in June, 2015.</code></pre>
+
+    <h3>Result</h3>
+    <aside class="result">
+      <p>ECMAScript <del>6</del><ins>2015</ins> <del>will be ratified</del><ins>was ratified</ins> in June, 2015.</p>
+    </aside>
+
+    <h2>Block Example</h2>
+    <pre><code class="language-html hljs"><span class="hljs-tag">&lt;<span class="hljs-name">emu-production</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"HoistableDeclaration"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">emu-rhs</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">emu-nt</span>&gt;</span>FunctionDeclaration<span class="hljs-tag">&lt;/<span class="hljs-name">emu-nt</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">emu-rhs</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">emu-rhs</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">emu-nt</span>&gt;</span>GeneratorDeclaration<span class="hljs-tag">&lt;/<span class="hljs-name">emu-nt</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">emu-rhs</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">ins</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"block"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">emu-rhs</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">emu-nt</span>&gt;</span>AsyncFunctionDeclaration<span class="hljs-tag">&lt;/<span class="hljs-name">emu-nt</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">emu-rhs</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">ins</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">emu-production</span>&gt;</span></code></pre>
+
+    <h3>Result</h3>
+    <aside class="result" data-simulate-tagname="emu-clause">
+      <emu-production name="HoistableDeclaration">
+        <emu-nt>HoistableDeclaration</emu-nt> <emu-geq>:</emu-geq> <emu-rhs><emu-nt>FunctionDeclaration</emu-nt></emu-rhs>
+        <emu-rhs><emu-nt>GeneratorDeclaration</emu-nt></emu-rhs>
+        <ins class="block"><emu-rhs><emu-nt>AsyncFunctionDeclaration</emu-nt></emu-rhs></ins>
+      </emu-production>
+    </aside>
+  </emu-clause>
+
+  <emu-clause id="pre-code">
+    <h1><span class="secnum">21.3</span> Code Listings</h1>
+    <p>Create a code listing using <code>&lt;pre&gt;&lt;code&gt;</code>. The <code>code</code> element takes a class of <code>javascript</code>, <code>html</code>, or any other language provided by <a href="https://highlightjs.org/">highlightjs</a>. Ecmarkup will trim any leading blank lines and also normalize the indentation based on the indentation of the first line.</p>
+  </emu-clause>
+</emu-clause>
+</div></body>
\ No newline at end of file