<x-tab.content selected="3">
  <x-section-head header="The Cockpit">
    <djot>
      ## Fact:

      In Myrtle Beach South Carolina, Richard and Isaac counted 100 Chrysler Pacificas in the span of a week.
    </djot>
  </x-section-head>
  <div id="cockpit-canvas" style="height: 80vh;  margin: 8px; background-color: #232323;">
  </div>
</x-tab.content>
<script type="module">
  const firaCodeFace = new FontFace('Fira Code', `url(${new URL('/assets/FiraCode-Regular.woff2', import.meta.url)})`, {style: "normal", weight: "normal"});
  const firaCodeBoldFace = new FontFace('Fira Code', `url(${new URL('/assets/FiraCode-Bold.woff2', import.meta.url)})`, {style: "normal", weight: "bold"});
  Promise.all([firaCodeFace.load(), firaCodeBoldFace.load()]).then((faces) => {
    document.fonts.add(faces[0]);
    document.fonts.add(faces[1]);
    var interval = setInterval(function () {
      if (typeof window.runCockpit === 'function') {
        clearInterval(interval);
        window.runCockpit();
      }
    }, 50);
  });
</script>