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" />
    <meta name="theme-color" content="#171c18" />
    <title>Soybert 3D</title>
  </head>
  <body>
    <main id="app" data-mode="intro" tabindex="0" aria-label="Soybert 3D character showcase">
      <canvas id="stage" aria-label="soybert. napplet.soy. Interactive 3D Soybert. Enter the stage to walk, jump, shoot, and celebrate."></canvas>
      <div class="top-controls">
        <div class="mode-pill"><span class="live-dot"></span><span id="mode-label">Turntable</span></div>
        <div class="tools">
          <button id="return" class="icon-button play-only" title="Return to turntable" aria-label="Return to turntable">↶</button>
          <button id="reset" class="icon-button play-only" title="Reset position and camera (R)" aria-label="Reset position and camera">⟲</button>
          <button id="sound" class="icon-button" title="Toggle sound" aria-label="Sound" aria-pressed="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M11 5 6 9H3v6h3l5 4z"/><path class="sound-waves" d="M15 8c2 2 2 6 0 8m3-11c4 4 4 10 0 14"/></svg></button>
          <button id="motion" class="icon-button" title="Pause automatic motion" aria-label="Reduce automatic motion" aria-pressed="false">◴</button>
          <button id="settings" class="icon-button" title="Stage settings" aria-label="Stage settings" hidden>⚙</button>
          <button id="help-toggle" class="icon-button play-only" title="Controls" aria-label="Show controls" aria-expanded="false">?</button>
        </div>
      </div>
      <output id="status" class="status" aria-live="polite">Preparing the stage…</output>
      <section class="intro-panel intro-only" aria-label="Enter the interactive stage">
        <button id="enter" class="enter-button" disabled>Enter stage <span aria-hidden="true">↗</span></button>
        <p class="orbit-hint">Drag to orbit <span>·</span> Scroll to zoom</p>
      </section>
      <div id="play-controls" class="play-only">
        <div id="joystick" class="joystick" role="group" aria-label="Movement pad; drag to walk">
          <span class="pad-mark up">⌃</span><span class="pad-mark left">‹</span><span class="pad-mark right">›</span><span class="pad-mark down">⌄</span><span id="stick" class="stick"></span>
        </div>
        <div class="keyboard-hint"><kbd>W</kbd><kbd>A</kbd><kbd>S</kbd><kbd>D</kbd><span>move</span><i></i><span>drag to orbit</span></div>
        <div class="actions">
          <button id="jump" class="action-button" title="Jump (Space)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M12 18V4m-5 5 5-5 5 5M5 20h14"/></svg><span>Jump</span><kbd>Space</kbd></button>
          <button id="shoot" class="action-button fire-button" title="Shoot (F)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="12" cy="12" r="6"/><path d="M12 2v6m0 8v6M2 12h6m8 0h6"/></svg><span>Shoot</span><kbd>F</kbd></button>
          <button id="celebrate" class="action-button" title="Celebrate (C)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="m12 3 2.7 5.5 6.1.9-4.4 4.3 1 6.1-5.4-2.9-5.4 2.9 1-6.1-4.4-4.3 6.1-.9z"/></svg><span>Celebrate</span><kbd>C</kbd></button>
        </div>
      </div>
      <div id="help" class="help-panel" hidden>
        <strong>Take him for a spin.</strong>
        <dl><dt>WASD / arrows</dt><dd>Walk</dd><dt>Space</dt><dd>Jump</dd><dt>F</dt><dd>Shoot shotgun</dd><dt>C</dt><dd>Celebrate</dd><dt>Drag / scroll</dt><dd>Orbit / zoom</dd><dt>R / Esc</dt><dd>Reset / pause</dd></dl>
        <p>On touch screens, drag the pad and tap an action.</p>
      </div>
      <div id="pause" class="pause-overlay" hidden><button id="resume" class="enter-button">Resume <span aria-hidden="true">▷</span></button></div>
      <div id="error" class="error-panel" hidden><strong>3D rendering is unavailable.</strong><p>Open this napplet in a browser with WebGL 2 enabled.</p></div>
    </main>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>