/* 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 fills the page and has no out-of-flow child to compensate
      for: its settings panel is not mounted 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 a glyph to be genuinely painted, not for a fixed
      delay (see _mesures/10-vignette.mjs). */

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

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

body > .ascii-fluid {
  width: 100vw;
  height: 100vh;
  /* With no ceiling: the composition is then the same at every size, so a
     single constant is enough to frame it. 100vw / 64 comes to 16 px at the
     reference width of the mock-up, and shrinks with the frame. */
  --af-glyph-size: calc(100vw / 64);
  --af-mask-size: 88%;
}