html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }
body { display: flex; align-items: center; justify-content: center; touch-action: none; }
h1 {
  margin: 0;
  color: #fff;
  font: 500 clamp(1.5rem, 6vw, 3rem) ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .02em;
}
canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
/* Read out for screen readers only; on screen the head says it all. */
#face-status {
  position: absolute; width: 1px; height: 1px; overflow: hidden; margin: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Keyboard way in to the same sign-in as tapping the period. */
.sr:not(:focus) {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.sr:focus { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 2;
  font: 14px ui-monospace, SFMono-Regular, Menlo, monospace; color: #fff; background: none;
  border: 0; border-bottom: 1px solid #fff; padding: 6px 0; }
/* Once the canvas is drawing, the heading stays for screen readers only. */
.js h1 {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}