/* ==========================================================================
   Preview — the page embedded in the 16:9 frame of the component sheet.

   The component is 100% of its parent, so the framing comes down to three
   things: giving the page a height, keying the text scale to the width, and
   stopping demo.css from changing that scale halfway through.
   ========================================================================== */

/* box-sizing on html and body: without it, the slightest padding would add to
   the 100% height and push the component downwards. */
html,
body {
  box-sizing: border-box;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #0f0f10;
  overflow: hidden;
}

.apercu .snap-sections {
  height: 100%;
}

/* The scale follows the width, with no cap: the layout is then the same at
   every size, and a single constant is enough to frame it. A min() or a clamp()
   would break that property — the frame on the component sheet and the 700 px
   thumbnail would no longer show the same thing.

   It is the component's module that is scaled, not only the text's: the bar
   derives from it, so it grows with the rest instead of staying a 6 px line in
   the middle of 58 px text.

   Same specificity as the rule in demo.css, but loaded after it: it wins,
   including over its 1247 px media query. Otherwise the preview would change
   proportions in the middle of its range. */
.apercu .snap-sections {
  --ss-font-size: calc(100vw / 24);

  /* The colours of the bar are the reference's, as in the demo. */
  --ss-thumb-color: #5a616e;
  --ss-focus-color: #fff;
}