{#-
  The end of the homepage: where to go next, as an index of the manual.
-#}
  <section class="xn-index">
    <div class="xn-rule">
      <span class="xn-label">03</span>
      <span class="xn-label">Explore</span>
    </div>
    <ol class="xn-index__list">
      <li>
        <a class="xn-index__entry" href="{{ 'learn/' | url }}">
          <span class="xn-label">01</span>
          <span class="xn-index__title"><span class="xn-underline">Getting Started</span><span class="xn-arrow" aria-hidden="true">&nearr;</span></span>
          <svg class="xn-index__figure" viewBox="0 0 140 72" aria-hidden="true">
            <rect x="6.5" y="4.5" width="92" height="50"/><line x1="6.5" y1="11.5" x2="98.5" y2="11.5"/>
            <rect class="xn-fill" x="18.5" y="11.5" width="92" height="50"/><line x1="18.5" y1="18.5" x2="110.5" y2="18.5"/>
            <rect class="xn-fill" x="30.5" y="18.5" width="92" height="50"/><line x1="30.5" y1="25.5" x2="122.5" y2="25.5"/>
            <line x1="38.5" y1="34.5" x2="78.5" y2="34.5"/><line x1="38.5" y1="41.5" x2="96.5" y2="41.5"/><line x1="38.5" y1="48.5" x2="66.5" y2="48.5"/>
          </svg>
          <span class="xn-index__text">Install xnano and draw your first terminal app.</span>
        </a>
      </li>
      <li>
        <a class="xn-index__entry" href="{{ 'api-reference/' | url }}">
          <span class="xn-label">02</span>
          <span class="xn-index__title"><span class="xn-underline">API Reference</span><span class="xn-arrow" aria-hidden="true">&nearr;</span></span>
          <svg class="xn-index__figure" viewBox="0 0 140 72" aria-hidden="true">
            <rect x="6.5" y="6.5" width="127" height="60"/><line x1="6.5" y1="18.5" x2="133.5" y2="18.5"/>
            <line x1="44.5" y1="6.5" x2="44.5" y2="66.5"/><line x1="96.5" y1="6.5" x2="96.5" y2="66.5"/>
            <line x1="6.5" y1="30.5" x2="133.5" y2="30.5"/><line x1="6.5" y1="42.5" x2="133.5" y2="42.5"/><line x1="6.5" y1="54.5" x2="133.5" y2="54.5"/>
            <line x1="12.5" y1="12.5" x2="34.5" y2="12.5"/><line x1="12.5" y1="24.5" x2="38.5" y2="24.5"/><line x1="12.5" y1="36.5" x2="30.5" y2="36.5"/>
            <line x1="50.5" y1="24.5" x2="88.5" y2="24.5"/><line x1="50.5" y1="36.5" x2="80.5" y2="36.5"/><line x1="50.5" y1="48.5" x2="86.5" y2="48.5"/>
          </svg>
          <span class="xn-index__text">Every module, class and function, generated from the source.</span>
        </a>
      </li>
      <li>
        <a class="xn-index__entry" href="{{ config.repo_url }}#core-features--examples">
          <span class="xn-label">03</span>
          <span class="xn-index__title"><span class="xn-underline">Examples</span><span class="xn-arrow" aria-hidden="true">&nearr;</span></span>
          <svg class="xn-index__figure" viewBox="0 0 140 72" aria-hidden="true">
            <rect x="6.5" y="4.5" width="127" height="62"/>
            <circle cx="112" cy="18" r="6"/>
            <g class="xn-pixels"><rect x="16" y="58" width="3" height="3"/><rect x="20" y="58" width="3" height="3"/><rect x="24" y="54" width="3" height="3"/><rect x="24" y="58" width="3" height="3"/><rect x="28" y="50" width="3" height="3"/><rect x="28" y="54" width="3" height="3"/><rect x="28" y="58" width="3" height="3"/><rect x="32" y="46" width="3" height="3"/><rect x="32" y="50" width="3" height="3"/><rect x="32" y="54" width="3" height="3"/><rect x="32" y="58" width="3" height="3"/><rect x="36" y="42" width="3" height="3"/><rect x="36" y="46" width="3" height="3"/><rect x="36" y="50" width="3" height="3"/><rect x="36" y="54" width="3" height="3"/><rect x="36" y="58" width="3" height="3"/><rect x="40" y="46" width="3" height="3"/><rect x="40" y="50" width="3" height="3"/><rect x="40" y="54" width="3" height="3"/><rect x="40" y="58" width="3" height="3"/><rect x="44" y="50" width="3" height="3"/><rect x="44" y="54" width="3" height="3"/><rect x="44" y="58" width="3" height="3"/><rect x="48" y="46" width="3" height="3"/><rect x="48" y="50" width="3" height="3"/><rect x="48" y="54" width="3" height="3"/><rect x="48" y="58" width="3" height="3"/><rect x="52" y="42" width="3" height="3"/><rect x="52" y="46" width="3" height="3"/><rect x="52" y="50" width="3" height="3"/><rect x="52" y="54" width="3" height="3"/><rect x="52" y="58" width="3" height="3"/><rect x="56" y="38" width="3" height="3"/><rect x="56" y="42" width="3" height="3"/><rect x="56" y="46" width="3" height="3"/><rect x="56" y="50" width="3" height="3"/><rect x="56" y="54" width="3" height="3"/><rect x="56" y="58" width="3" height="3"/><rect x="60" y="34" width="3" height="3"/><rect x="60" y="38" width="3" height="3"/><rect x="60" y="42" width="3" height="3"/><rect x="60" y="46" width="3" height="3"/><rect x="60" y="50" width="3" height="3"/><rect x="60" y="54" width="3" height="3"/><rect x="60" y="58" width="3" height="3"/><rect x="64" y="30" width="3" height="3"/><rect x="64" y="34" width="3" height="3"/><rect x="64" y="38" width="3" height="3"/><rect x="64" y="42" width="3" height="3"/><rect x="64" y="46" width="3" height="3"/><rect x="64" y="50" width="3" height="3"/><rect x="64" y="54" width="3" height="3"/><rect x="64" y="58" width="3" height="3"/><rect x="68" y="34" width="3" height="3"/><rect x="68" y="38" width="3" height="3"/><rect x="68" y="42" width="3" height="3"/><rect x="68" y="46" width="3" height="3"/><rect x="68" y="50" width="3" height="3"/><rect x="68" y="54" width="3" height="3"/><rect x="68" y="58" width="3" height="3"/><rect x="72" y="38" width="3" height="3"/><rect x="72" y="42" width="3" height="3"/><rect x="72" y="46" width="3" height="3"/><rect x="72" y="50" width="3" height="3"/><rect x="72" y="54" width="3" height="3"/><rect x="72" y="58" width="3" height="3"/><rect x="76" y="42" width="3" height="3"/><rect x="76" y="46" width="3" height="3"/><rect x="76" y="50" width="3" height="3"/><rect x="76" y="54" width="3" height="3"/><rect x="76" y="58" width="3" height="3"/><rect x="80" y="46" width="3" height="3"/><rect x="80" y="50" width="3" height="3"/><rect x="80" y="54" width="3" height="3"/><rect x="80" y="58" width="3" height="3"/><rect x="84" y="50" width="3" height="3"/><rect x="84" y="54" width="3" height="3"/><rect x="84" y="58" width="3" height="3"/><rect x="88" y="46" width="3" height="3"/><rect x="88" y="50" width="3" height="3"/><rect x="88" y="54" width="3" height="3"/><rect x="88" y="58" width="3" height="3"/><rect x="92" y="42" width="3" height="3"/><rect x="92" y="46" width="3" height="3"/><rect x="92" y="50" width="3" height="3"/><rect x="92" y="54" width="3" height="3"/><rect x="92" y="58" width="3" height="3"/><rect x="96" y="46" width="3" height="3"/><rect x="96" y="50" width="3" height="3"/><rect x="96" y="54" width="3" height="3"/><rect x="96" y="58" width="3" height="3"/><rect x="100" y="50" width="3" height="3"/><rect x="100" y="54" width="3" height="3"/><rect x="100" y="58" width="3" height="3"/><rect x="104" y="54" width="3" height="3"/><rect x="104" y="58" width="3" height="3"/><rect x="108" y="58" width="3" height="3"/><rect x="112" y="58" width="3" height="3"/><rect x="116" y="58" width="3" height="3"/><rect x="120" y="58" width="3" height="3"/></g>
          </svg>
          <span class="xn-index__text">Runnable examples, each rendered in a real terminal.</span>
        </a>
      </li>
      <li>
        <a class="xn-index__entry" href="{{ 'v1/' | url }}">
          <span class="xn-label">04</span>
          <span class="xn-index__title"><span class="xn-underline">Legacy v1</span><span class="xn-arrow" aria-hidden="true">&nearr;</span></span>
          <svg class="xn-index__figure" viewBox="0 0 140 72" aria-hidden="true">
            <defs><pattern id="xn-index-dots" width="5" height="5" patternUnits="userSpaceOnUse"><rect class="xn-dot" x="2" y="2" width="1" height="1"/></pattern></defs>
            <rect x="6.5" y="6.5" width="127" height="60"/>
            <rect class="xn-dots" x="24" y="20" width="30" height="32" fill="url(#xn-index-dots)"/>
            <circle cx="96" cy="36" r="15"/>
          </svg>
          <span class="xn-index__text">Guides for the grid-and-field API of xnano 1.</span>
        </a>
      </li>
    </ol>
  </section>