Spaces:

nanotron
/

ultrascale-playbook

Running

App Files Files Community

thomwolf HF staff commited on 10 days ago

Commit

236446b

1 Parent(s): 1cbe265

testing svg

Browse files

Files changed (6) hide show

assets/svg/figure-01.svg +3 -0
assets/svg/test-svg.html +164 -0
dist/distill.bundle.js +0 -0
dist/distill.bundle.js.map +0 -0
dist/index.html +142 -2
src/distill.js +1 -1

assets/svg/figure-01.svg ADDED Viewed

assets/svg/test-svg.html ADDED Viewed

	@@ -0,0 +1,164 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Interactive SVG Hover Effect</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      margin: 20px;
+      background: #f8f9fa;
+    }
+    .svg-container {
+      border: 1px solid #ccc;
+      padding: 10px;
+      border-radius: 8px;
+      background: #fff;
+    }
+    .info {
+      margin-top: 15px;
+      font-size: 16px;
+      color: #555;
+    }
+  </style>
+</head>
+<body>
+  <div class="svg-container" id="svg-container-01">
+    <!-- The enhanced SVG will be injected here -->
+  </div>
+  <div class="info" id="info">Hover over the network elements to see their details</div>
+  <script>
+    // Function to enhance the SVG content by adding styles and data attributes
+    function enhanceSVGContent(originalContent) {
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(originalContent, 'image/svg+xml');
+      // Create a style element with hover effects and insert it as the first child of the SVG
+      const styleElement = doc.createElementNS('http://www.w3.org/2000/svg', 'style');
+      styleElement.textContent = `
+        path[data-element-type="layer"] {
+          transition: all 0.3s;
+          cursor: pointer;
+        }
+        path[data-element-type="layer"]:hover {
+          fill: #b197fc !important;
+          transform: translate(0, -2px);
+        }
+        path[data-element-type="gradient"] {
+          transition: all 0.3s;
+          cursor: pointer;
+        }
+        path[data-element-type="gradient"]:hover {
+          fill: #f06595 !important;
+          transform: translate(0, -2px);
+        }
+        path[data-element-type="forward"] {
+          transition: all 0.3s;
+          cursor: pointer;
+        }
+        path[data-element-type="forward"]:hover {
+          stroke: #0c8599 !important;
+          stroke-width: 4 !important;
+        }
+        path[data-element-type="backward"] {
+          transition: all 0.3s;
+          cursor: pointer;
+        }
+        path[data-element-type="backward"]:hover {
+          stroke: #e8590c !important;
+          stroke-width: 4 !important;
+        }
+        path[data-element-type="optimization"] {
+          transition: all 0.3s;
+          cursor: pointer;
+        }
+        path[data-element-type="optimization"]:hover {
+          stroke: #087f5b !important;
+          stroke-width: 4 !important;
+        }
+      `;
+      doc.documentElement.insertBefore(styleElement, doc.documentElement.firstChild);
+      // Process neural network layers (purple nodes)
+      doc.querySelectorAll('path[fill="#d0bfff"]').forEach((node, index) => {
+        node.setAttribute('data-element-id', `layer-${index}`);
+        node.setAttribute('data-element-type', 'layer');
+      });
+      // Process gradient nodes (pink nodes)
+      doc.querySelectorAll('path[fill="#f783ac"]').forEach((node, index) => {
+        node.setAttribute('data-element-id', `gradient-${index}`);
+        node.setAttribute('data-element-type', 'gradient');
+      });
+      // Process arrows by matching stroke colors
+      const arrowTypes = {
+        '#15aabf': 'forward',
+        '#fd7e14': 'backward',
+        '#099268': 'optimization'
+      };
+      Object.entries(arrowTypes).forEach(([color, type]) => {
+        doc.querySelectorAll(`path[stroke="${color}"]`).forEach((arrow, index) => {
+          arrow.setAttribute('data-element-id', `${type}-${index}`);
+          arrow.setAttribute('data-element-type', type);
+        });
+      });
+      // Make the SVG responsive
+      doc.documentElement.setAttribute('width', '100%');
+      doc.documentElement.setAttribute('height', 'auto');
+      doc.documentElement.setAttribute('preserveAspectRatio', 'xMidYMid meet');
+      return new XMLSerializer().serializeToString(doc);
+    }
+    // Function to load an SVG file via fetch
+    async function loadSVG(url, containerId) {
+      try {
+        const response = await fetch(url);
+        if (!response.ok) {
+          throw new Error(`HTTP error! Status: ${response.status}`);
+        }
+        const svgText = await response.text();
+        const enhancedSVG = enhanceSVGContent(svgText);
+        document.getElementById(containerId).innerHTML = enhancedSVG;
+      } catch (error) {
+        console.error('Error loading SVG:', error);
+        document.getElementById(containerId).innerHTML = '<p>Error loading SVG.</p>';
+      }
+    }
+    // Load the SVG file (adjust the path if needed)
+    loadSVG('figure-01.svg', 'svg-container-01');
+    // Set up event listeners to display a description of the hovered element
+    const svgContainer = document.getElementById('svg-container-01');
+    svgContainer.addEventListener('mouseover', function(event) {
+      const target = event.target;
+      if (target.tagName.toLowerCase() === 'path' && target.hasAttribute('data-element-id')) {
+        const elementId = target.getAttribute('data-element-id');
+        const elementType = target.getAttribute('data-element-type');
+        const descriptions = {
+          layer: 'Neural Network Layer',
+          gradient: 'Gradient Update Layer',
+          forward: 'Forward Pass Connection',
+          backward: 'Backward Pass Connection',
+          optimization: 'Optimization Step'
+        };
+        const description = descriptions[elementType] || elementType;
+        document.getElementById('info').textContent = `Hovering over: ${description} (${elementId})`;
+      }
+    });
+    svgContainer.addEventListener('mouseout', function() {
+      document.getElementById('info').textContent = 'Hover over the network elements to see their details';
+    });
+  </script>
+</body>
+</html>

dist/distill.bundle.js CHANGED Viewed

The diff for this file is too large to render. See raw diff

dist/distill.bundle.js.map CHANGED Viewed

The diff for this file is too large to render. See raw diff

dist/index.html CHANGED Viewed

@@ -51,6 +51,115 @@
     <d-article>
         <d-contents>
         </d-contents>
         <p>Fueled by the scaling laws<d-cite bibtex-key="kaplan2020scalinglaws"></d-cite><d-cite bibtex-key="hoffmann2022chinchilla"></d-cite>, the trend of training ever larger language models on vaster amounts of data has been driving progress in AI for the past couple years. Initially, the development of the largest models happened exclusively behind closed doors of a handful of research labs but recently opened up more with the release of models such as Llama 3.1 405B<d-cite bibtex-key="grattafiori2024llama3herdmodels"></d-cite> and DeepSeek R1<d-cite bibtex-key="deepseekai2024deepseekv3technicalreport"></d-cite>. While these models have <a href="https://huggingface.co/meta-llama">openly shared</a> <a href="https://huggingface.co/deepseek-ai">weights</a> and their training recipes are described in <a href="https://ai.meta.com/research/publications/the-llama-3-herd-of-models/">technical</a> <a href="https://github.com/deepseek-ai/DeepSeek-R1/blob/main/DeepSeek_R1.pdf">reports</a>, the challenging engineering to involved to train at the necessary infrastructure scale is still hidden between the lines of a handful of papers and complex training frameworks. This ~~long blog post~~ open-source book is here to open this black box!</p>
@@ -223,7 +332,37 @@
         </ol>
         <p>It looks generally like this: </p>
-        <p><img alt="image.png" src="assets/images/placeholder.png" /></p>
         <aside>As we’ll see later, these steps may be repeated or intertwined but for now we’ll start simple.</aside>
@@ -1573,7 +1712,8 @@
 }</pre>
     </d-appendix>
-    <script>
         const article = document.querySelector('d-article');
         const toc = document.querySelector('d-contents');
         if (toc) {

     <d-article>
         <d-contents>
         </d-contents>
+    <script>
+        // Function to enhance the SVG content by adding styles and data attributes
+        function enhanceSVGContent(originalContent) {
+          const parser = new DOMParser();
+          const doc = parser.parseFromString(originalContent, 'image/svg+xml');
+          // Create a style element with hover effects and insert it as the first child of the SVG
+          const styleElement = doc.createElementNS('http://www.w3.org/2000/svg', 'style');
+          styleElement.textContent = `
+            path[data-element-type="layer"] {
+              transition: all 0.3s;
+              cursor: pointer;
+            }
+            path[data-element-type="layer"]:hover {
+              fill: #b197fc !important;
+              transform: translate(0, -2px);
+            }
+            path[data-element-type="gradient"] {
+              transition: all 0.3s;
+              cursor: pointer;
+            }
+            path[data-element-type="gradient"]:hover {
+              fill: #f06595 !important;
+              transform: translate(0, -2px);
+            }
+            path[data-element-type="forward"] {
+              transition: all 0.3s;
+              cursor: pointer;
+            }
+            path[data-element-type="forward"]:hover {
+              stroke: #0c8599 !important;
+              stroke-width: 4 !important;
+            }
+            path[data-element-type="backward"] {
+              transition: all 0.3s;
+              cursor: pointer;
+            }
+            path[data-element-type="backward"]:hover {
+              stroke: #e8590c !important;
+              stroke-width: 4 !important;
+            }
+            path[data-element-type="optimization"] {
+              transition: all 0.3s;
+              cursor: pointer;
+            }
+            path[data-element-type="optimization"]:hover {
+              stroke: #087f5b !important;
+              stroke-width: 4 !important;
+            }
+          `;
+          doc.documentElement.insertBefore(styleElement, doc.documentElement.firstChild);
+          // Process neural network layers (purple nodes)
+          doc.querySelectorAll('path[fill="#d0bfff"]').forEach((node, index) => {
+            node.setAttribute('data-element-id', `layer-${index}`);
+            node.setAttribute('data-element-type', 'layer');
+          });
+          // Process gradient nodes (pink nodes)
+          doc.querySelectorAll('path[fill="#f783ac"]').forEach((node, index) => {
+            node.setAttribute('data-element-id', `gradient-${index}`);
+            node.setAttribute('data-element-type', 'gradient');
+          });
+          // Process arrows by matching stroke colors
+          const arrowTypes = {
+            '#15aabf': 'forward',
+            '#fd7e14': 'backward',
+            '#099268': 'optimization'
+          };
+          Object.entries(arrowTypes).forEach(([color, type]) => {
+            doc.querySelectorAll(`path[stroke="${color}"]`).forEach((arrow, index) => {
+              arrow.setAttribute('data-element-id', `${type}-${index}`);
+              arrow.setAttribute('data-element-type', type);
+            });
+          });
+          // Make the SVG responsive
+          doc.documentElement.setAttribute('width', '100%');
+          doc.documentElement.setAttribute('height', 'auto');
+          doc.documentElement.setAttribute('preserveAspectRatio', 'xMidYMid meet');
+          return new XMLSerializer().serializeToString(doc);
+        }
+        // Function to load an SVG file via fetch
+        async function loadSVG(url) {
+          try {
+            const response = await fetch(url);
+            if (!response.ok) {
+              throw new Error(`HTTP error! Status: ${response.status}`);
+            }
+            const svgText = await response.text();
+            const enhancedSVG = enhanceSVGContent(svgText);
+            document.getElementById('svg-container').innerHTML = enhancedSVG;
+          } catch (error) {
+            console.error('Error loading SVG:', error);
+            document.getElementById('svg-container').innerHTML = '<p>Error loading SVG.</p>';
+          }
+        }
+    </script>
         <p>Fueled by the scaling laws<d-cite bibtex-key="kaplan2020scalinglaws"></d-cite><d-cite bibtex-key="hoffmann2022chinchilla"></d-cite>, the trend of training ever larger language models on vaster amounts of data has been driving progress in AI for the past couple years. Initially, the development of the largest models happened exclusively behind closed doors of a handful of research labs but recently opened up more with the release of models such as Llama 3.1 405B<d-cite bibtex-key="grattafiori2024llama3herdmodels"></d-cite> and DeepSeek R1<d-cite bibtex-key="deepseekai2024deepseekv3technicalreport"></d-cite>. While these models have <a href="https://huggingface.co/meta-llama">openly shared</a> <a href="https://huggingface.co/deepseek-ai">weights</a> and their training recipes are described in <a href="https://ai.meta.com/research/publications/the-llama-3-herd-of-models/">technical</a> <a href="https://github.com/deepseek-ai/DeepSeek-R1/blob/main/DeepSeek_R1.pdf">reports</a>, the challenging engineering to involved to train at the necessary infrastructure scale is still hidden between the lines of a handful of papers and complex training frameworks. This ~~long blog post~~ open-source book is here to open this black box!</p>
         </ol>
         <p>It looks generally like this: </p>
+        <div class="svg-container" id="svg-container">
+        </div>
+        <div class="info" id="info">Hover over the network elements to see their details</div>
+        <script>
+                // Load the SVG file (adjust the path if needed)
+                loadSVG('../assets/svg/figure-01.svg');
+                // Set up event listeners to display a description of the hovered element
+                const svgContainer = document.getElementById('svg-container');
+                svgContainer.addEventListener('mouseover', function(event) {
+                  const target = event.target;
+                  if (target.tagName.toLowerCase() === 'path' && target.hasAttribute('data-element-id')) {
+                    const elementId = target.getAttribute('data-element-id');
+                    const elementType = target.getAttribute('data-element-type');
+                    const descriptions = {
+                      layer: 'Neural Network Layer',
+                      gradient: 'Gradient Update Layer',
+                      forward: 'Forward Pass Connection',
+                      backward: 'Backward Pass Connection',
+                      optimization: 'Optimization Step'
+                    };
+                    const description = descriptions[elementType] || elementType;
+                    document.getElementById('info').textContent = `Hovering over: ${description} (${elementId})`;
+                  }
+                });
+                svgContainer.addEventListener('mouseout', function() {
+                  document.getElementById('info').textContent = 'Hover over the network elements to see their details';
+                });
+        </script>
         <aside>As we’ll see later, these steps may be repeated or intertwined but for now we’ll start simple.</aside>
 }</pre>
     </d-appendix>
+        <script>
         const article = document.querySelector('d-article');
         const toc = document.querySelector('d-contents');
         if (toc) {

src/distill.js CHANGED Viewed

@@ -1369,7 +1369,7 @@ ${math}
   var byline = "/*\n * Copyright 2018 The Distill Template Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *      http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nd-byline {\n  contain: style;\n  overflow: hidden;\n  border-top: 1px solid rgba(0, 0, 0, 0.1);\n  font-size: 0.8rem;\n  line-height: 1.8em;\n  padding: 1.5rem 0;\n  min-height: 1.8em;\n}\n\n\nd-byline .byline {\n  grid-template-columns: 1fr 1fr;\n  grid-column: text;\n}\n\n@media(min-width: 768px) {\n  d-byline .byline {\n    grid-template-columns: 1fr 1fr 1fr 1fr;\n  }\n}\n\nd-byline .authors-affiliations {\n  grid-column-end: span 2;\n  grid-template-columns: 1fr 1fr;\n  margin-bottom: 1em;\n}\n\n@media(min-width: 768px) {\n  d-byline .authors-affiliations {\n    margin-bottom: 0;\n  }\n}\n\nd-byline h3 {\n  font-size: 0.6rem;\n  font-weight: 400;\n  color: rgba(0, 0, 0, 0.5);\n  margin: 0;\n  text-transform: uppercase;\n}\n\nd-byline p {\n  margin: 0;\n}\n\nd-byline a,\nd-article d-byline a {\n  color: rgba(0, 0, 0, 0.8);\n  text-decoration: none;\n  border-bottom: none;\n}\n\nd-article d-byline a:hover {\n  text-decoration: underline;\n  border-bottom: none;\n}\n\nd-byline p.author {\n  font-weight: 500;\n}\n\nd-byline .affiliations {\n\n}\n";
-  var article = "/*\n * Copyright 2018 The Distill Template Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *      http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nd-article {\n  contain: layout style;\n  overflow-x: hidden;\n  border-top: 1px solid rgba(0, 0, 0, 0.1);\n  padding-top: 2rem;\n  color: rgba(0, 0, 0, 0.8);\n}\n\nd-article > * {\n  grid-column: text;\n}\n\n@media(min-width: 768px) {\n  d-article {\n    font-size: 16px;\n  }\n}\n\n@media(min-width: 1024px) {\n  d-article {\n    font-size: 1.06rem;\n    line-height: 1.7em;\n  }\n}\n\n\n/* H2 */\n\n\nd-article .marker {\n  text-decoration: none;\n  border: none;\n  counter-reset: section;\n  grid-column: kicker;\n  line-height: 1.7em;\n}\n\nd-article .marker:hover {\n  border: none;\n}\n\nd-article .marker span {\n  padding: 0 3px 4px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.2);\n  position: relative;\n  top: 4px;\n}\n\nd-article .marker:hover span {\n  color: rgba(0, 0, 0, 0.7);\n  border-bottom: 1px solid rgba(0, 0, 0, 0.7);\n}\n\nd-article h2 {\n  font-weight: 600;\n  font-size: 24px;\n  line-height: 1.25em;\n  margin: 2rem 0 1.5rem 0;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n  padding-bottom: 1rem;\n}\n\n@media(min-width: 1024px) {\n  d-article h2 {\n    font-size: 36px;\n  }\n}\n\n/* H3 */\n\nd-article h3 {\n  font-weight: 700;\n  font-size: 18px;\n  line-height: 1.4em;\n  margin-bottom: 1em;\n  margin-top: 2em;\n}\n\n@media(min-width: 1024px) {\n  d-article h3 {\n    font-size: 20px;\n  }\n}\n\n/* H4 */\n\nd-article h4 {\n  font-weight: 600;\n  text-transform: uppercase;\n  font-size: 14px;\n  line-height: 1.4em;\n}\n\nd-article a {\n  color: inherit;\n}\n\nd-article p,\nd-article ul,\nd-article ol,\nd-article blockquote {\n  margin-top: 0;\n  margin-bottom: 1em;\n  margin-left: 0;\n  margin-right: 0;\n}\n\nd-article blockquote {\n  border-left: 2px solid rgba(0, 0, 0, 0.2);\n  padding-left: 2em;\n  font-style: italic;\n  color: rgba(0, 0, 0, 0.6);\n}\n\nd-article a {\n  border-bottom: 1px solid rgba(0, 0, 0, 0.4);\n  text-decoration: none;\n}\n\nd-article a:hover {\n  border-bottom: 1px solid rgba(0, 0, 0, 0.8);\n}\n\nd-article .link {\n  text-decoration: underline;\n  cursor: pointer;\n}\n\nd-article ul,\nd-article ol {\n  padding-left: 24px;\n}\n\nd-article li {\n  margin-bottom: 1em;\n  margin-left: 0;\n  padding-left: 0;\n}\n\nd-article li:last-child {\n  margin-bottom: 0;\n}\n\nd-article pre {\n  font-size: 14px;\n  margin-bottom: 20px;\n}\n\nd-article hr {\n  grid-column: screen;\n  width: 100%;\n  border: none;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n  margin-top: 60px;\n  margin-bottom: 60px;\n}\n\nd-article section {\n  margin-top: 60px;\n  margin-bottom: 60px;\n}\n\nd-article span.equation-mimic {\n  font-family: georgia;\n  font-size: 115%;\n  font-style: italic;\n}\n\nd-article > d-code,\nd-article section > d-code  {\n  display: block;\n}\n\nd-article > d-math[block],\nd-article section > d-math[block]  {\n  display: block;\n}\n\n@media (max-width: 768px) {\n  d-article > d-code,\n  d-article section > d-code,\n  d-article > d-math[block],\n  d-article section > d-math[block] {\n      overflow-x: scroll;\n      -ms-overflow-style: none;  // IE 10+\n      overflow: -moz-scrollbars-none;  // Firefox\n  }\n\n  d-article > d-code::-webkit-scrollbar,\n  d-article section > d-code::-webkit-scrollbar,\n  d-article > d-math[block]::-webkit-scrollbar,\n  d-article section > d-math[block]::-webkit-scrollbar {\n    display: none;  // Safari and Chrome\n  }\n}\n\nd-article .citation {\n  color: #668;\n  cursor: pointer;\n}\n\nd-include {\n  width: auto;\n  display: block;\n}\n\nd-figure {\n  contain: layout style;\n}\n\n/* KaTeX */\n\n.katex, .katex-prerendered {\n  contain: style;\n  display: inline-block;\n}\n\n/* Tables */\n\nd-article table {\n  border-collapse: collapse;\n  margin-bottom: 1.5rem;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.2);\n}\n\nd-article table th {\n  border-bottom: 1px solid rgba(0, 0, 0, 0.2);\n}\n\nd-article table td {\n  border-bottom: 1px solid rgba(0, 0, 0, 0.05);\n}\n\nd-article table tr:last-of-type td {\n  border-bottom: none;\n}\n\nd-article table th,\nd-article table td {\n  font-size: 15px;\n  padding: 2px 8px;\n}\n\nd-article table tbody :first-child td {\n  padding-top: 2px;\n}\n";
   var title = "/*\n * Copyright 2018 The Distill Template Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *      http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nd-title {\n  padding: 2rem 0 1.5rem;\n  contain: layout style;\n  overflow-x: hidden;\n}\n\n@media(min-width: 768px) {\n  d-title {\n    padding: 4rem 0 1.5rem;\n  }\n}\n\nd-title h1 {\n  grid-column: text;\n  font-size: 40px;\n  font-weight: 700;\n  line-height: 1.1em;\n  margin: 0 0 0.5rem;\n}\n\n@media(min-width: 768px) {\n  d-title h1 {\n    font-size: 50px;\n  }\n}\n\nd-title p {\n  font-weight: 300;\n  font-size: 1.2rem;\n  line-height: 1.55em;\n  grid-column: text;\n}\n\nd-title .status {\n  margin-top: 0px;\n  font-size: 12px;\n  color: #009688;\n  opacity: 0.8;\n  grid-column: kicker;\n}\n\nd-title .status span {\n  line-height: 1;\n  display: inline-block;\n  padding: 6px 0;\n  border-bottom: 1px solid #80cbc4;\n  font-size: 11px;\n  text-transform: uppercase;\n}\n";

   var byline = "/*\n * Copyright 2018 The Distill Template Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *      http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nd-byline {\n  contain: style;\n  overflow: hidden;\n  border-top: 1px solid rgba(0, 0, 0, 0.1);\n  font-size: 0.8rem;\n  line-height: 1.8em;\n  padding: 1.5rem 0;\n  min-height: 1.8em;\n}\n\n\nd-byline .byline {\n  grid-template-columns: 1fr 1fr;\n  grid-column: text;\n}\n\n@media(min-width: 768px) {\n  d-byline .byline {\n    grid-template-columns: 1fr 1fr 1fr 1fr;\n  }\n}\n\nd-byline .authors-affiliations {\n  grid-column-end: span 2;\n  grid-template-columns: 1fr 1fr;\n  margin-bottom: 1em;\n}\n\n@media(min-width: 768px) {\n  d-byline .authors-affiliations {\n    margin-bottom: 0;\n  }\n}\n\nd-byline h3 {\n  font-size: 0.6rem;\n  font-weight: 400;\n  color: rgba(0, 0, 0, 0.5);\n  margin: 0;\n  text-transform: uppercase;\n}\n\nd-byline p {\n  margin: 0;\n}\n\nd-byline a,\nd-article d-byline a {\n  color: rgba(0, 0, 0, 0.8);\n  text-decoration: none;\n  border-bottom: none;\n}\n\nd-article d-byline a:hover {\n  text-decoration: underline;\n  border-bottom: none;\n}\n\nd-byline p.author {\n  font-weight: 500;\n}\n\nd-byline .affiliations {\n\n}\n";
+  var article = "/*\n * Copyright 2018 The Distill Template Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *      http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nd-article {\n  contain: layout style;\n  overflow-x: hidden;\n  border-top: 1px solid rgba(0, 0, 0, 0.1);\n  padding-top: 2rem;\n  color: rgba(0, 0, 0, 0.8);\n}\n\nd-article > * {\n  grid-column: text;\n}\n\n@media(min-width: 768px) {\n  d-article {\n    font-size: 16px;\n  }\n}\n\n@media(min-width: 1024px) {\n  d-article {\n    font-size: 1.06rem;\n    line-height: 1.7em;\n  }\n}\n\n\n/* H2 */\n\n\nd-article .marker {\n  text-decoration: none;\n  border: none;\n  counter-reset: section;\n  grid-column: kicker;\n  line-height: 1.7em;\n}\n\nd-article .marker:hover {\n  border: none;\n}\n\nd-article .marker span {\n  padding: 0 3px 4px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.2);\n  position: relative;\n  top: 4px;\n}\n\nd-article .marker:hover span {\n  color: rgba(0, 0, 0, 0.7);\n  border-bottom: 1px solid rgba(0, 0, 0, 0.7);\n}\n\nd-article h2 {\n  font-weight: 600;\n  font-size: 24px;\n  line-height: 1.25em;\n  margin: 2rem 0 1.5rem 0;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n  padding-bottom: 1rem;\n}\n\n@media(min-width: 1024px) {\n  d-article h2 {\n    font-size: 36px;\n  }\n}\n\n/* H3 */\n\nd-article h3 {\n  font-weight: 700;\n  font-size: 18px;\n  line-height: 1.4em;\n  margin-bottom: 1em;\n  margin-top: 2em;\n}\n\n@media(min-width: 1024px) {\n  d-article h3 {\n    font-size: 20px;\n  }\n}\n\n/* H4 */\n\nd-article h4 {\n  font-weight: 600;\n  text-transform: uppercase;\n  font-size: 14px;\n  line-height: 1.4em;\n}\n\nd-article a {\n  color: inherit;\n}\n\nd-article p,\nd-article ul,\nd-article ol,\nd-article blockquote {\n  margin-top: 0;\n  margin-bottom: 1em;\n  margin-left: 0;\n  margin-right: 0;\n}\n\nd-article blockquote {\n  border-left: 2px solid rgba(0, 0, 0, 0.2);\n  padding-left: 2em;\n  font-style: italic;\n  color: rgba(0, 0, 0, 0.6);\n}\n\nd-article a {\n  border-bottom: 1px solid rgba(0, 0, 0, 0.4);\n  text-decoration: none;\n}\n\nd-article a:hover {\n  border-bottom: 1px solid rgba(0, 0, 0, 0.8);\n}\n\nd-article .link {\n  text-decoration: underline;\n  cursor: pointer;\n}\n\nd-article ul,\nd-article ol {\n  padding-left: 24px;\n}\n\nd-article li {\n  margin-bottom: 0.2em;\n  margin-left: 0;\n  padding-left: 0;\n}\n\nd-article li:last-child {\n  margin-bottom: 0;\n}\n\nd-article pre {\n  font-size: 14px;\n  margin-bottom: 20px;\n}\n\nd-article hr {\n  grid-column: screen;\n  width: 100%;\n  border: none;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n  margin-top: 60px;\n  margin-bottom: 60px;\n}\n\nd-article section {\n  margin-top: 60px;\n  margin-bottom: 60px;\n}\n\nd-article span.equation-mimic {\n  font-family: georgia;\n  font-size: 115%;\n  font-style: italic;\n}\n\nd-article > d-code,\nd-article section > d-code  {\n  display: block;\n}\n\nd-article > d-math[block],\nd-article section > d-math[block]  {\n  display: block;\n}\n\n@media (max-width: 768px) {\n  d-article > d-code,\n  d-article section > d-code,\n  d-article > d-math[block],\n  d-article section > d-math[block] {\n      overflow-x: scroll;\n      -ms-overflow-style: none;  // IE 10+\n      overflow: -moz-scrollbars-none;  // Firefox\n  }\n\n  d-article > d-code::-webkit-scrollbar,\n  d-article section > d-code::-webkit-scrollbar,\n  d-article > d-math[block]::-webkit-scrollbar,\n  d-article section > d-math[block]::-webkit-scrollbar {\n    display: none;  // Safari and Chrome\n  }\n}\n\nd-article .citation {\n  color: #668;\n  cursor: pointer;\n}\n\nd-include {\n  width: auto;\n  display: block;\n}\n\nd-figure {\n  contain: layout style;\n}\n\n/* KaTeX */\n\n.katex, .katex-prerendered {\n  contain: style;\n  display: inline-block;\n}\n\n/* Tables */\n\nd-article table {\n  border-collapse: collapse;\n  margin-bottom: 1.5rem;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.2);\n}\n\nd-article table th {\n  border-bottom: 1px solid rgba(0, 0, 0, 0.2);\n}\n\nd-article table td {\n  border-bottom: 1px solid rgba(0, 0, 0, 0.05);\n}\n\nd-article table tr:last-of-type td {\n  border-bottom: none;\n}\n\nd-article table th,\nd-article table td {\n  font-size: 15px;\n  padding: 2px 8px;\n}\n\nd-article table tbody :first-child td {\n  padding-top: 2px;\n}\n";
   var title = "/*\n * Copyright 2018 The Distill Template Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *      http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nd-title {\n  padding: 2rem 0 1.5rem;\n  contain: layout style;\n  overflow-x: hidden;\n}\n\n@media(min-width: 768px) {\n  d-title {\n    padding: 4rem 0 1.5rem;\n  }\n}\n\nd-title h1 {\n  grid-column: text;\n  font-size: 40px;\n  font-weight: 700;\n  line-height: 1.1em;\n  margin: 0 0 0.5rem;\n}\n\n@media(min-width: 768px) {\n  d-title h1 {\n    font-size: 50px;\n  }\n}\n\nd-title p {\n  font-weight: 300;\n  font-size: 1.2rem;\n  line-height: 1.55em;\n  grid-column: text;\n}\n\nd-title .status {\n  margin-top: 0px;\n  font-size: 12px;\n  color: #009688;\n  opacity: 0.8;\n  grid-column: kicker;\n}\n\nd-title .status span {\n  line-height: 1;\n  display: inline-block;\n  padding: 6px 0;\n  border-bottom: 1px solid #80cbc4;\n  font-size: 11px;\n  text-transform: uppercase;\n}\n";