html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: rgb(250, 250, 250);
  font-family: system-ui, sans-serif;
}

/* Canvas fills the whole window. Its pixel dimensions are set in JS (sketch.js)
   to match the backing store, so the triangles stay perfectly square on mobile
   (a CSS 100vw/100vh box would stretch against iOS Safari's larger 100vh). */
canvas {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
}

/* Keyboard hint, overlaid on the canvas. */
.hint {
  position: fixed;
  left: 50%;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  margin: 0;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(4px);
  color: #333;
  font-size: 0.85rem;
  white-space: nowrap;
  pointer-events: none;       /* never blocks interaction with the canvas */
  user-select: none;
}

kbd {
  font-family: ui-monospace, monospace;
  background: #eee;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0 0.3em;
}

/* Show the keyboard hint on devices with a keyboard; on touch devices (no
   keyboard) show the tap hint instead. */
.hint-touch {
  display: none;
}

@media (hover: none) and (pointer: coarse) {
  .hint-desktop {
    display: none;
  }
  .hint-touch {
    display: block;
  }
}

/* Visually hidden: removed from view but kept in the accessibility tree so the
   <h1> page heading is available for screen-reader navigation. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}