index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <meta name="theme-color" content="#05070a">
    <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='%68%74%74%70://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' fill='%2305070a'/%3E%3Cpath d='M32 5 59 32 32 59 5 32Z' fill='none' stroke='%23f1bd49' stroke-width='4'/%3E%3Cpath d='M22 32h20M32 22v20' stroke='%236fe8ee' stroke-width='3'/%3E%3C/svg%3E">
    <meta
      name="description"
      content="SnapKitty Universe: a persistent orbital station, spaceflight, and planetary simulation."
    >
    <title>SnapKitty Universe</title>
    <link rel="stylesheet" href="./universe/styles.css">
  </head>
  <body>
    <noscript>
      <p class="fatal-message">SnapKitty Universe requires JavaScript.</p>
    </noscript>

    <div id="app" class="universe-shell" data-game-state="booting">
      <main
        id="viewport"
        class="viewport"
        tabindex="0"
        role="application"
        aria-label="SnapKitty Universe simulation viewport"
      >
        <div id="canvas-mount" class="canvas-mount" aria-hidden="true"></div>
      </main>

      <div id="loading-screen" class="loading-screen" role="status" aria-live="polite">
        <div class="loading-core" aria-hidden="true"><span>SK</span></div>
        <div class="loading-copy">
          <strong>SNAPKITTY UNIVERSE</strong>
          <span id="loading-status">Initializing persistent world</span>
        </div>
        <div class="loading-meter" aria-hidden="true"><span id="loading-progress"></span></div>
      </div>
    </div>

    <script type="module" src="./universe/app.ts"></script>
  </body>
</html>