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>Freeze Frame Response</title>
  </head>
  <body>
    <main id="app" class="app">
      <header class="hud">
        <div class="case">
          <span id="caseNo" class="case-no">CASE 01 / 05</span>
          <strong id="caseName" class="case-name">The Kettle Incident</strong>
        </div>
        <div class="stats" aria-label="Incident status">
          <span class="stat"><span class="stat-k">PEDS</span><b id="pedStat">0/1</b></span>
          <span class="stat"><span class="stat-k">SORTED</span><b id="debrisStat">0/3</b></span>
          <span class="stat"><span class="stat-k">KIT</span><b id="kitStat">4</b></span>
        </div>
        <div class="hud-actions">
          <button id="briefButton" class="icon-btn" type="button" title="Case brief" aria-label="Show case brief">?</button>
          <button id="retryButton" class="icon-btn" type="button" title="Retry incident" aria-label="Retry incident">↺</button>
        </div>
      </header>

      <section class="stage" aria-label="Frozen incident scene">
        <canvas id="scene" aria-label="A frozen city cross-section with airborne pedestrians and debris. Select equipment below, then tap the scene to place it."></canvas>
        <div id="freezeBadge" class="freeze-badge" aria-hidden="true">
          <span class="freeze-dot"></span><span id="freezeLabel">TIME SUSPENDED</span><span id="freezeClock">T+0.80</span>
        </div>
        <div id="toast" class="toast" role="status" aria-live="polite"></div>
        <div id="overlay" class="overlay" hidden></div>
      </section>

      <footer class="dock">
        <div class="tools" role="group" aria-label="Equipment">
          <button class="tool" data-tool="trampoline" type="button" aria-pressed="true" title="Trampoline: lively bounce (1)">
            <span class="tool-icon" aria-hidden="true">═</span>
            <span class="tool-text"><span class="tool-name">Trampoline</span><span class="tool-key">1</span></span>
            <span class="tool-count" data-count="trampoline">2</span>
          </button>
          <button class="tool" data-tool="funnel" type="button" aria-pressed="false" title="Funnel chute: smooth redirect (2)">
            <span class="tool-icon" aria-hidden="true">╱</span>
            <span class="tool-text"><span class="tool-name">Funnel</span><span class="tool-key">2</span></span>
            <span class="tool-count" data-count="funnel">1</span>
          </button>
          <button class="tool" data-tool="cushion" type="button" aria-pressed="false" title="Sticky cushion: dead stop (3)">
            <span class="tool-icon" aria-hidden="true">▬</span>
            <span class="tool-text"><span class="tool-name">Cushion</span><span class="tool-key">3</span></span>
            <span class="tool-count" data-count="cushion">1</span>
          </button>
        </div>
        <div class="dock-actions">
          <button id="tiltButton" class="small-btn" type="button" title="Rotate placement (R)">Tilt <span id="tiltValue">0°</span></button>
          <button id="undoButton" class="small-btn" type="button" title="Undo last placement (Z)">Undo</button>
          <button id="resumeButton" class="resume-btn" type="button" title="Resume time (Space)">Resume time</button>
        </div>
      </footer>

      <p id="live" class="sr-only" aria-live="polite"></p>
    </main>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>