diff --git a/resources.whatwg.org/bikeshed.css b/resources.whatwg.org/bikeshed.css
deleted file mode 100644
index d1b80004e..000000000
--- a/resources.whatwg.org/bikeshed.css
+++ /dev/null
@@ -1,117 +0,0 @@
-/* Self-link styles */
-li > a.self-link {
-  left: -3.5em;
-}
-dfn > a.self-link {
-  top: auto;
-  left: auto;
-  opacity: 0;
-  width: 1.5em;
-  height: 1.5em;
-  background: gray;
-  color: white;
-  font-style: normal;
-  transition: opacity .2s, background-color .2s, color .2s;
-}
-dfn:hover > a.self-link {
-  opacity: 1;
-}
-dfn > a.self-link:hover {
-  color: black;
-  background-color: #B1C99D;
-}
-dfn > a.self-link::before {
-  content: "#";
-}
-
-/* Hide dfn self-links when there's no hover, since they only otherwise show up when you click, and
-   in that case they're covered by the dfn.js popup anyway. */
-/* TODO: remove `, (hover: on-demand)` when
-   https://bugs.chromium.org/p/chromium/issues/detail?id=654861 and
-   https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/9308676/ get fixed */
-@media (hover: none), (hover: on-demand) {
-  dfn > a.self-link {
-    display: none;
-  }
-}
-
-/* Also make sure that they aren't any wider than the right margin, as this otherwise causes
-   horizontal scrollbars. (The right margin for small viewports is defined in standard.css.) */
-@media (max-width: 767px) {
-  dfn > a.self-link {
-    width: 0.625em;
-  }
-}
-
-/* Hide editor visually, but leave it for scraping tools */
-.head .editor {
-  display: none;
-}
-
-/* Floating-but-collapsible annoying warning for snapshots */
-details.annoying-warning {
-  background-color: #920800;
-  background-image: linear-gradient(transparent 40%, rgba(255, 255, 255, 0.2));
-  border: solid rgba(0, 0, 0, 0.4);
-  border-radius: 3px;
-  border-width: 1px 1px 0 1px;
-  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
-  color: rgba(255, 255, 255, 0.95);
-  opacity: .95;
-  position: fixed;
-  left: 5%;
-  margin: 0 auto;
-  right: 5%;
-  z-index: 10;
-}
-
-details.annoying-warning[open] {
-  top: 10%;
-  top: calc(5vw + 5vh);
-  max-width: 1024px;
-  outline: solid 10000px rgba(255, 255, 255, 0.6);
-}
-
-details.annoying-warning:not([open]) {
-  bottom: 0;
-  left: 0;
-  right: 0;
-  border-radius: 0;
-}
-
-details.annoying-warning > summary {
-  display: list-item; /* polyfill */
-  font-size: 0.875em;
-  font-weight: bold;
-  letter-spacing: 0.02em;
-  padding: 10px 5px;
-  text-align: center;
-  text-transform: uppercase;
-  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.85);
-  cursor: default;
-}
-
-details.annoying-warning > summary::after {
-  content: " Expand";
-  position: absolute;
-  top: 0;
-  right: 5px;
-  font-size: smaller;
-  font-weight: bold;
-}
-
-details.annoying-warning[open] > summary::after {
-  content: " Collapse";
-}
-
-details.annoying-warning p {
-  padding: 0 7.5% 1em;
-  line-height: 1.4;
-  margin: 0;
-  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.85);
-}
-
-details.annoying-warning a {
-  color: white;
-  text-decoration: underline;
-}
diff --git a/resources.whatwg.org/dfn.js b/resources.whatwg.org/dfn.js
deleted file mode 100644
index e53d9447c..000000000
--- a/resources.whatwg.org/dfn.js
+++ /dev/null
@@ -1,191 +0,0 @@
-// dfn.js
-// makes <dfn> elements link back to all uses of the term
-// no copyright is asserted on this file
-
-(function() {
-
-var dfnMapTarget = -1;
-var dfnMapDone = false;
-var dfnMap = {};
-function initDfn() {
-  var supportsIdleCallback = 'requestIdleCallback' in window;
-  var links = document.querySelectorAll('a[href*="#"]');
-  dfnMapTarget = links.length;
-  var k = 0;
-  var n = 0;
-  var initDfnInternal = function () {
-    n += 1;
-    var start = Date.now();
-    while (k < dfnMapTarget) {
-      // Don't use .href or .hash because the URL parser is relatively expensive
-      var s = links[k].getAttribute('href');
-      s = s.substring(s.indexOf('#') + 1);
-      if (!links[k].closest('.no-backref, .self-link, ul.index, #idl-index + pre, ol.toc')) {
-        if (links[k].hasAttribute('data-x-internal'))
-          s = links[k].getAttribute('data-x-internal')
-        if (!(s in dfnMap))
-          dfnMap[s] = [];
-        dfnMap[s].push(links[k]);
-      }
-      k += 1;
-      if (k % 1000 === 0) {
-        if (supportsIdleCallback) {
-            requestIdleCallback(initDfnInternal);
-            return;
-        } else {
-          if (Date.now() - start > 500) {
-            setTimeout(initDfnInternal, 500);
-            return;
-          }
-        }
-      }
-    }
-    dfnMapDone = true;
-    document.body.className += " dfnEnabled";
-  }
-  initDfnInternal();
-}
-
-var dfnPanel;
-var dfnUniqueId = 0;
-var dfnTimeout;
-document.addEventListener('click', dfnShow, false);
-function dfnShow(event) {
-  if (dfnTimeout) {
-    clearTimeout(dfnTimeout);
-    dfnTimeout = null;
-  }
-  if (dfnPanel) {
-    dfnPanel.parentNode.removeChild(dfnPanel);
-    dfnPanel = null;
-  }
-  if (dfnMapDone) {
-    var node = event.target;
-    if (node && node instanceof HTMLAnchorElement)
-      return;
-    while (node && (!node instanceof HTMLElement || !(node.localName == 'dfn' || (node instanceof HTMLHeadingElement && node.hasAttribute('data-dfn-type')))))
-      node = node.parentNode;
-    if (node) {
-      event.preventDefault();
-      var panel = document.createElement('div');
-      panel.className = 'dfnPanel';
-      if (node.id || node.parentNode.id) {
-        var permalinkP = document.createElement('p');
-        var permalinkA = document.createElement('a');
-        permalinkA.href = '#' + (node.id || node.parentNode.id);
-        permalinkA.textContent = '#' + (node.id || node.parentNode.id);
-        permalinkP.appendChild(permalinkA);
-        panel.appendChild(permalinkP);
-      }
-      if (node.firstChild instanceof HTMLAnchorElement) {
-        var realLinkP = document.createElement('p');
-        realLinkP.className = 'spec-link';
-        realLinkP.textContent = 'Spec: ';
-        var realLinkA = document.createElement('a');
-        realLinkA.href = node.firstChild.href;
-        realLinkA.textContent = node.firstChild.href;
-        realLinkP.appendChild(realLinkA);
-        panel.appendChild(realLinkP);
-      }
-      var p = document.createElement('p');
-      panel.appendChild(p);
-      if (node.id in dfnMap || node.parentNode.id in dfnMap) {
-        p.textContent = 'Referenced in:';
-        var ul = document.createElement('ul');
-        var lastHeader;
-        var lastLi;
-        var n;
-        var sourceLinks = [];
-        if (node.id in dfnMap)
-          for (var i = 0; i < dfnMap[node.id].length; i += 1)
-            sourceLinks.push(dfnMap[node.id][i]);
-        if (node.parentNode.id in dfnMap)
-          for (var i = 0; i < dfnMap[node.parentNode.id].length; i += 1)
-            sourceLinks.push(dfnMap[node.parentNode.id][i]);
-        for (var i = 0; i < sourceLinks.length; i += 1) {
-          var link = sourceLinks[i];
-          var header = dfnGetCaption(link);
-          var a = document.createElement('a');
-          var linkid = link.id;
-          if (!linkid) {
-            if (link.parentNode.id) {
-              linkid = link.parentNode.id;
-            } else {
-              link.id = 'dfnReturnLink-' + dfnUniqueId++;
-              linkid = link.id;
-            }
-          }
-          a.href = '#' + linkid;
-          a.onclick = dfnMovePanel;
-          if (header != lastHeader) {
-            lastHeader = header;
-            n = 1;
-            var li = document.createElement('li');
-            if (typeof header == 'string') {
-              a.appendChild(document.createTextNode(header));
-            } else {
-              var cloneHeader = header.cloneNode(true);
-              [].slice.call(cloneHeader.querySelectorAll('a, dfn')).forEach(replaceWithChildren);
-              while (cloneHeader.hasChildNodes())
-                a.appendChild(cloneHeader.firstChild);
-            }
-            lastLi = li;
-            li.appendChild(a);
-            ul.appendChild(li);
-          } else {
-            n += 1;
-            a.appendChild(document.createTextNode('(' + n + ')'));
-            lastLi.appendChild(document.createTextNode(' '));
-            lastLi.appendChild(a);
-          }
-        }
-        panel.appendChild(ul);
-      } else {
-        p.textContent = 'No references in this file.';
-      }
-      node.appendChild(panel);
-      dfnPanel = panel;
-    }
-  } else {
-    dfnTimeout = setTimeout(dfnShow, 250, event);
-  }
-}
-
-function replaceWithChildren(el) {
-  while (el.hasChildNodes()) {
-    el.parentNode.insertBefore(el.firstChild, el);
-  }
-  el.parentNode.removeChild(el);
-}
-
-function dfnMovePanel(event) {
-  dfnPanel.style.position = 'fixed';
-  dfnPanel.style.left = '1em';
-  dfnPanel.style.bottom = '1em';
-  dfnPanel.style.maxWidth = '20em';
-  dfnPanel.style.maxHeight = '50vh';
-  dfnPanel.style.overflow = 'auto';
-  document.body.appendChild(dfnPanel);
-  event.stopPropagation();
-}
-
-function dfnGetCaption(link) {
-  var node = link;
-  while (node) {
-    if (node instanceof HTMLHeadingElement) {
-      return node;
-    } else if (node instanceof HTMLElement && node.localName == 'nav') {
-      return 'Navigation';
-    } else if (!node.previousSibling) {
-      node = node.parentNode;
-    } else {
-      node = node.previousSibling;
-    }
-  }
-  return 'Page';
-}
-
-// setup
-initDfn();
-
-})();
diff --git a/resources.whatwg.org/review-draft.css b/resources.whatwg.org/review-draft.css
new file mode 100644
index 000000000..ba92df3f4
--- /dev/null
+++ b/resources.whatwg.org/review-draft.css
@@ -0,0 +1,11 @@
+pre.idl, pre.asn, pre.css, dl.domintro, .note, .warning, .example {
+ border: 1px solid black;
+}
+
+pre.idl::before, pre.asn::before, pre.css::before, dl.domintro::before, .note::before, .warning::before, .example::before {
+ display: block; font-weight: bold;
+}
+
+body {
+  margin-bottom: 3em; /* makes room for the .annoying-warning */
+}
diff --git a/resources.whatwg.org/spec.css b/resources.whatwg.org/spec.css
new file mode 100644
index 000000000..7583a6724
--- /dev/null
+++ b/resources.whatwg.org/spec.css
@@ -0,0 +1,12 @@
+.head .logo img { position: absolute; top: 1em; right: 1em; border: none; }
+
+.toc, .toc li { list-style: none; }
+
+pre.idl::before { content: 'IDL'; }
+pre.asn::before { content: 'ASN'; }
+pre.css::before { content: 'CSS'; }
+
+.note::before { content: 'Note'; }
+.warning::before { content: '\26A0 Warning!'; }
+.example::before { content: 'Example'; }
+dl.domintro::before { content: 'For web developers (non-normative)'; }
diff --git a/resources.whatwg.org/standard-service-worker.js b/resources.whatwg.org/standard-service-worker.js
index 657450814..6ea724329 100644
--- a/resources.whatwg.org/standard-service-worker.js
+++ b/resources.whatwg.org/standard-service-worker.js
@@ -11,9 +11,8 @@ const standardShortname = location.host.split(".")[0];
 const cacheKey = "v4";
 const toCache = [
   location.origin + "/",
+  "https://resources.whatwg.org/spec.css",
   "https://resources.whatwg.org/standard.css",
-  "https://resources.whatwg.org/bikeshed.css",
-  "https://resources.whatwg.org/dfn.js",
   "https://resources.whatwg.org/file-issue.js",
   "https://resources.whatwg.org/commit-snapshot-shortcut-key.js",
   standardShortname === "html" ? "https://resources.whatwg.org/logo.svg"
diff --git a/resources.whatwg.org/standard.css b/resources.whatwg.org/standard.css
index 80cb2c1c8..136d67293 100644
--- a/resources.whatwg.org/standard.css
+++ b/resources.whatwg.org/standard.css
@@ -88,7 +88,50 @@ h2 > a.self-link::before, h3 > a.self-link::before, h4 > a.self-link::before, h5
   h2 > a.self-link, h3 > a.self-link, h4 > a.self-link, h5 > a.self-link, h6 > a.self-link { left: auto; top: auto; margin-left: 0.5em; }
 }
 
-.toc, .toc li { list-style: none; }
+li > a.self-link {
+  left: -3.5em;
+}
+dfn > a.self-link {
+  top: auto;
+  left: auto;
+  opacity: 0;
+  width: 1.5em;
+  height: 1.5em;
+  background: gray;
+  color: white;
+  font-style: normal;
+  transition: opacity .2s, background-color .2s, color .2s;
+}
+dfn:hover > a.self-link {
+  opacity: 1;
+}
+dfn > a.self-link:hover {
+  color: black;
+  background-color: #B1C99D;
+}
+dfn > a.self-link::before {
+  content: "#";
+}
+
+/* Hide dfn self-links when there's no hover, since they only otherwise show up when you click, and
+   in that case they're covered by the dfn.js popup anyway. */
+/* TODO: remove `, (hover: on-demand)` when
+   https://bugs.chromium.org/p/chromium/issues/detail?id=654861 and
+   https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/9308676/ get fixed */
+@media (hover: none), (hover: on-demand) {
+  dfn > a.self-link {
+    display: none;
+  }
+}
+
+/* Also make sure that they aren't any wider than the right margin, as this otherwise causes
+   horizontal scrollbars. (The right margin for small viewports is defined in standard.css.) */
+@media (max-width: 767px) {
+  dfn > a.self-link {
+    width: 0.625em;
+  }
+}
+
 body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; }
 body > .toc > li { margin-top: 1.75em; margin-bottom: 2.25em; }
 body > .toc > li > * > li { margin-top: 0.4em; margin-bottom: 0.6em; }
@@ -137,12 +180,9 @@ tr.rare { background: #EEEEEE; color: #333333; }
 
 pre.idl::before, pre.asn::before, pre.css::before { font: bold 0.8rem Helvetica Neue, sans-serif; padding: 0.5em; position: absolute; top: auto; margin: -0.703125em 0 0 -3.75em /* 1em/0.8 + 1.5em + 0.5em*2 */ ; width: 1.5em; background: inherit; border: 0.078125em; border-style: solid none solid solid; border-radius: 1em 0 0 1em; }
 pre.idl { border: solid 0.0625em; background: #EEEEEE; color: black; padding: 0.5em 1em; }
-pre.idl::before { content: 'IDL'; }
 pre.asn { border: solid 0.0625em; background: #EEEEEE; color: black; padding: 0.5em 1em; }
-pre.asn::before { content: 'ASN'; }
 pre.css { border: solid 0.0625em; background: #FFFFEE; color: black; padding: 0.5em 1em; }
 pre.css:first-line { color: #AAAA50; }
-pre.css::before { content: 'CSS'; }
 @media (max-width: 767px) {
   pre.idl, pre.css { padding-left: 0.33em; }
   pre.idl::before, pre.css::before { width: 2.3em; }
@@ -153,22 +193,22 @@ hr + dl.domintro, div.impl + dl.domintro, hr + div.status + dl.domintro, div.imp
 dl.domintro dt, dl.domintro dt * { color: black; }
 dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; }
 dl.domintro dd p { margin: 0.5em 0; }
-dl.domintro::before { content: 'For web developers (non-normative)'; background: green; color: white; padding: 0.15em 0.25em; font-style: normal; position: absolute; top: -0.8em; left: -0.8em; }
+dl.domintro::before { background: green; color: white; padding: 0.15em 0.25em; font-style: normal; position: absolute; top: -0.8em; left: -0.8em; }
 
 .note { position: relative; color: green; background: #DDFFDD; font-style: italic; margin-left: 2em; padding-left: 2em; }
 .note em, .note i, .note var { font-style: normal; }
 span.note { padding: 0 2em; }
 dd > .note:first-child { margin-bottom: 0; }
-.note::before { content: 'Note'; background: green; color: white; padding: 0.15em 0.25em; font-style: normal; position: absolute; top: -0.2em; left: -1.5em; transform: rotate(-5deg); }
+.note::before { background: green; color: white; padding: 0.15em 0.25em; font-style: normal; position: absolute; top: -0.2em; left: -1.5em; transform: rotate(-5deg); }
 
 .warning { color: red; background: transparent; font: bolder italic 1em Helvetica Neue, sans-serif, Droid Sans Fallback; position: relative; margin: 2em 0 2em 6em; padding-left: 2em; }
 .warning em, .warning i, .warning var { font-style: normal; }
 .warning p:first-child { margin-top: 0; }
 .warning p:last-child { margin-bottom: 0; }
-.warning::before { font-style: normal; content: '\26A0 Warning!'; background: red; color: yellow; padding: 0.15em 0.25em; font-style: normal; position: absolute; top: -0.2em; left: -4.25em; transform: rotate(-5deg); }
+.warning::before { font-style: normal; background: red; color: yellow; padding: 0.15em 0.25em; font-style: normal; position: absolute; top: -0.2em; left: -4.25em; transform: rotate(-5deg); }
 
 .example { display: block; color: #222222; background: #EEEEEE; margin-left: 2em; padding-left: 3em; position: relative; }
-.example::before { font-style: normal; content: 'Example'; background: #222222; color: #EEEEEE; padding: 0.15em 0.25em; font: 1em Helvetica Neue, sans-serif, Droid Sans Fallback; position: absolute; top: 0.2em; left: -2.25em; transform: rotate(-5deg); }
+.example::before { font-style: normal; background: #222222; color: #EEEEEE; padding: 0.15em 0.25em; font: 1em Helvetica Neue, sans-serif, Droid Sans Fallback; position: absolute; top: 0.2em; left: -2.25em; transform: rotate(-5deg); }
 td > .example:only-child { margin: 0 0 0 0.1em; padding: 0; }
 td > .example:only-child::before { display: none; }
 /* Nudge bikeshed's self-link */
@@ -237,7 +277,6 @@ td.non-rectangular-cell-indentation { border-top-style: hidden; min-width: 2em;
 .head p { margin: 0; }
 .head h1 { margin: 0 100px 0 0; }
 .head h2 { margin-top: 0; margin-right: 100px; }
-.head .logo img { position: absolute; top: 1em; right: 1em; border: none } /* remove border from top image */
 @media (max-width: 767px) {
   .head .logo img { width: 4em; height: 4em; }
   .head h1, .head h2 { margin-right:5rem; }
@@ -371,3 +410,71 @@ ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; }
 ul.domTree .t7 code, .domTree .t8 code { color: green; }
 ul.domTree .t10 code { color: teal; }
 ul.domTree code :link, ul.domTree code :visited { color: inherit; }
+
+/* Floating-but-collapsible annoying warning for snapshots */
+details.annoying-warning {
+  background-color: #920800;
+  background-image: linear-gradient(transparent 40%, rgba(255, 255, 255, 0.2));
+  border: solid rgba(0, 0, 0, 0.4);
+  border-radius: 3px;
+  border-width: 1px 1px 0 1px;
+  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
+  color: rgba(255, 255, 255, 0.95);
+  opacity: .95;
+  position: fixed;
+  left: 5%;
+  margin: 0 auto;
+  right: 5%;
+  z-index: 10;
+}
+
+details.annoying-warning[open] {
+  top: 10%;
+  top: calc(5vw + 5vh);
+  max-width: 1024px;
+  outline: solid 10000px rgba(255, 255, 255, 0.6);
+}
+
+details.annoying-warning:not([open]) {
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border-radius: 0;
+}
+
+details.annoying-warning > summary {
+  display: list-item; /* polyfill */
+  font-size: 0.875em;
+  font-weight: bold;
+  letter-spacing: 0.02em;
+  padding: 10px 5px;
+  text-align: center;
+  text-transform: uppercase;
+  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.85);
+  cursor: default;
+}
+
+details.annoying-warning > summary::after {
+  content: " Expand";
+  position: absolute;
+  top: 0;
+  right: 5px;
+  font-size: smaller;
+  font-weight: bold;
+}
+
+details.annoying-warning[open] > summary::after {
+  content: " Collapse";
+}
+
+details.annoying-warning p {
+  padding: 0 7.5% 1em;
+  line-height: 1.4;
+  margin: 0;
+  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.85);
+}
+
+details.annoying-warning a {
+  color: white;
+  text-decoration: underline;
+}