---
layout: layouts/diffuse.vto
base: ../
title: Diffuse

styles:
  - styles/base.css
  - styles/diffuse/page.css
  - styles/diffuse/code-editor.css
  - vendor/@phosphor-icons/web/bold/style.css
  - vendor/@phosphor-icons/web/fill/style.css

scripts:
  - common/pages/ppr.js
  - common/pages/version-upgrade.js
---

<style>
  .construct, h2 {
    color: var(--accent);
  }
</style>

<header style="overflow: hidden">
  <div>
    <div class="diffuse-logo-container diffuse-logo-container--condensed">
      <a href="./" style="display: inline-block;">
        {{ await comp.diffuse.logo() }}
      </a>
    </div>
  </div>
  <div class="dither-mask filler">
    <div id="status--filler-container">
      {{ await comp.diffuse.status() }}
    </div>
  </div>
</header>

<main>
  {{ await comp.nav({ url, facets }) }}

  {{ content }}
</main>