Made of little things.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SuperSonic RC</title>
  </head>
  <body>
    <main id="app" class="app">
      <div id="stage" class="stage" aria-label="Race view"></div>
      <section id="packPanel" class="pack-panel" hidden aria-labelledby="packTitle">
        <h1 id="packTitle" class="pack-title">Game data</h1>
        <p id="packMessage" class="pack-message" role="status"></p>
        <div id="packLevels" class="pack-levels" hidden>
          <span class="pack-link-label" id="packLevelsLabel">Levels</span>
          <div id="packLevelList" class="pack-actions" role="group" aria-labelledby="packLevelsLabel"></div>
        </div>
        <div id="packLinkForm" class="pack-link" hidden>
          <label for="packLink" class="pack-link-label">Blossom link or SHA-256 hash</label>
          <div class="pack-link-row">
            <input id="packLink" class="pack-link-input" type="text" inputmode="url" autocomplete="off" autocapitalize="off" spellcheck="false" placeholder="https://…/<hash>.ssrcpack" />
            <button id="packLinkLoad" class="pack-button primary" type="button">Load</button>
          </div>
        </div>
        <div class="pack-actions">
          <button id="packRetry" class="pack-button" type="button" hidden>Try again</button>
          <button id="packFile" class="pack-button primary" type="button" hidden>Load asset pack…</button>
          <button id="packCancel" class="pack-button" type="button" hidden>Cancel</button>
        </div>
      </section>
      <div class="hud" aria-live="polite">
        <output id="status" class="status">Loading…</output>
        <span id="assetBadge" class="badge" hidden>original assets · local only</span>
      </div>
    </main>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>