/* ==========================================================================
   Infinite Canvas — preview page only
   --------------------------------------------------------------------------
   Four things this file exists to get right. They are the four ways a preview
   normally goes wrong inside a 16/9 frame.

   1. box-sizing on html and body. Without it the padding adds itself to the
      100% height and the content walks off the bottom edge.
   2. The pill is position:absolute, so it weighs nothing in the layout. Here
      the wall fills the frame edge to edge and the pill is measured from the
      wall's own bottom edge, so there is nothing to give back — but that is a
      property of this composition, not a licence to forget the rule.
   3. Scale is tied to the width with no ceiling: --ic-font-size is a plain
      division of 100vw. No min(), no clamp(). With no ceiling the layout is
      the same at every size, so one constant frames it at 700x350 and at
      1920x1080 alike.
   4. Motion is off. The wall drifts by default and would never settle, so a
      capture would race it. Drift, inertia and the thumb transition are all
      pinned to zero here.
   ========================================================================== */

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

.infinite-canvas {
  width: 100%;
  height: 100%;

  /* No ceiling. 45 puts a little over three columns across the frame, which
     is enough to read the masonry as a wall rather than a row. */
  --ic-font-size: calc(100vw / 45);

  /* Still, dead still: the capture has to be reproducible. */
  --ic-drift: 0;
  --ic-friction: 0;
  --ic-thumb-duration: 0ms;
}

/* The wall has no responsive breakpoints to neutralise — it is the same layout
   at every width by construction — but the pill offset is an em, so it scales
   with the frame on its own. Nothing to override. */