/* Preview — bare page meant for a 16/9 frame. Not a file of the component.

   Four traps, all of them checked:
   1. box-sizing on html and body, otherwise the inner padding adds to the
      100 % height and the content drifts down;
   2. the component is an in-flow block: it weighs its real height in the
      centring, nothing to compensate for here;
   3. the scale follows the width, with no ceiling — no min(), which would
      break the invariance of the layout from one size to another;
   4. the capture waits for the end of the entry transitions, on the script
      side. */

html,
body {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #fff;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

.apercu {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 4vmin;
}

.apercu .dot-matrix {
  /* With no ceiling: the layout is then the same at every size, so a single
     constant is enough to centre it. */
  width: calc(100vw - 8vmin);
  --dm-ratio: 54 / 25;
  /* The veil fades into the background of the page, not into an assumed white. */
  --dm-veil: #fff;
}