/* ==========================================================================
   Preview — the page embedded in the 16/9 frame of the component's reference
   page.

   The hero is more "square" than the frame: 1440 × 939, that is 1.533, while
   the frame is 1.778. Setting the scale from the width would push the last row
   of cards out; it is therefore set from the height, and the component keeps
   its proportions. The bands left on the left and on the right take the
   background colour of the component: they cannot be seen.

   The four framing traps, and what deals with them here:

   1. box-sizing on html and body, otherwise the inner padding would add to the
      100 % height and the content would drift downwards.
   2. No absolutely positioned child carries the height: it is the in-flow grid
      that gives it, the grid background is decorative and deliberately
      overflows under overflow: hidden.
   3. The scale follows the height, with no ceiling: 939.28 / 16 = 58.705, so
      --tb-font-size = 100vh / 58.705 falls exactly back onto the 16 px of the
      original when the frame is 939 px tall.
   3 bis. The breakpoints of the component are neutralised, and in a single
      line: they query a container named "dashboard-bento", so renaming this one
      is enough for none of them to find its target any more. Without that, a
      frame 1116 px wide would give the block 963 real px — below the first
      breakpoint — and the preview would reorganise into two columns even though
      the scale has already put everything at the right size.
   4. The entrance animations are played by the script; the capture waits for
      the computed opacity of every block to be 1, not for a fixed delay.
   ========================================================================== */

html,
body {
  box-sizing: border-box;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  /* The same colour as the section: the side bands disappear. */
  background: #0f0f0f;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dashboard-bento {
  /* 939.28 px tall for a 16 px body copy: the ratio is 58.705. */
  --tb-font-size: calc(100vh / 58.705);
  width: calc(90 * var(--tb-font-size));
  flex: none;
  /* No @container targets this name any more: the breakpoints are out of play. */
  container-name: apercu;
}