html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: #ffffff;
    overflow: hidden;
  }
  canvas {
    display: block;
    width: 100vw;
    height: 100vh;
  }
  #hud {
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 2;
    display: none;
    font: 11px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8a8a8a;
    white-space: pre;
    user-select: none;
    pointer-events: none;
  }
  #hud.show { display: block; }
  #ca {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 2;
    display: none;
    font: 11px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.06em;
    color: #8a8a8a;
    cursor: pointer;
    user-select: all;
  }
  #ca.show { display: block; }
  #ca span { color: #c9c9c9; margin-right: 8px; letter-spacing: 0.12em; text-transform: uppercase; }
  #ca.copied { color: #d84f3e; }
  @media (max-width: 640px) { #ca { font-size: 9px; } }
  #hud b { color: #d84f3e; font-weight: 600; }
  #hud .up { color: #2f9e5f; }
  #hud .down { color: #c9392b; }