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>Impossible Machine</title>
  </head>
  <body>
    <div class="too-small">
      A little more room to tinker?<br />Enlarge this pane to at least 280 ×
      360.
    </div>
    <div id="app">
      <div class="topbar">
        <select id="level" aria-label="Choose puzzle">
          <option value="0">01 · A gentle nudge</option>
          <option value="1">02 · Across the gap</option>
          <option value="2">03 · The long way</option>
          <option value="3">∞ · Free play</option></select
        ><span id="solved" title="Solved puzzles">0 / 3</span
        ><button
          id="reset"
          title="Reset the entire arrangement"
          aria-label="Reset arrangement"
        >
          ↺
        </button>
      </div>
      <main>
        <div class="board-wrap">
          <canvas
            id="board"
            aria-label="Physics workbench. Drag ramps and bumpers. Use the piece selector and movement buttons as an alternative."
          ></canvas>
          <div class="board-caption">
            <span id="phase">YOUR WORKBENCH</span
            ><span id="attempt">TAKE 01</span>
          </div>
          <div id="celebration" hidden>
            <strong>Beautifully done.</strong
            ><span>One small marble. One brilliant machine.</span
            ><button id="next">Next puzzle →</button>
          </div>
        </div>
        <aside>
          <div class="shelf-title">MAKE IT MOVE</div>
          <div class="add-row">
            <button id="ramp">
              <span class="ramp-icon">╱</span> Ramp <small>+</small></button
            ><button id="bumper">
              <span class="bumper-icon">◉</span> Bumper <small>+</small>
            </button>
          </div>
          <div class="edit-row">
            <select id="piece" aria-label="Selected piece"></select
            ><button id="left" aria-label="Rotate ramp counterclockwise">
              ↶</button
            ><button id="right" aria-label="Rotate ramp clockwise">↷</button
            ><button id="remove" aria-label="Remove selected piece">×</button>
          </div>
          <div class="nudges" aria-label="Move selected piece">
            <span>Move</span
            ><button data-dx="-10" aria-label="Move left">←</button
            ><button data-dy="-10" aria-label="Move up">↑</button
            ><button data-dy="10" aria-label="Move down">↓</button
            ><button data-dx="10" aria-label="Move right">→</button>
          </div>
          <p id="hint">
            Drag a piece. Give it a tilt.<br />See where the marble goes.
          </p>
          <div class="run-row">
            <button id="drop">▶ <span>Drop marble</span></button
            ><button
              id="retry"
              aria-label="Retry keeping arrangement"
              title="Retry keeping arrangement"
            >
              ↺ Retry
            </button>
          </div>
          <output id="status" aria-live="polite"
            >A little trial. A little error. A little magic.</output
          ><button id="save">Save progress</button>
        </aside>
      </main>
    </div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>