/* Panel 1, the camera story: the canvas that shows the tower and the matrices, the caption under it, the text list of every step and the still pictures used with reduced motion. */
.zoom-view, .zoom-caption { display: none; } /* shown only once the story script runs */
.is-zoom-running .zoom-view { display: flex; flex-direction: column; } /* canvas above caption */
.is-zoom-running .zoom-plain, .is-still .zoom-plain { display: none; } /* the plain summary is only for pages without the script */
.zoom-plain { margin: 4px 0 18px; color: var(--paper-soft); font-size: 14px; line-height: 1.5; } /* the summary sentence */
.zoom-canvas { display: block; flex: 1; min-height: 0; width: 100%; background-image: radial-gradient(rgb(218 210 255 / 0.13) 1px, transparent 1.2px); background-size: 22px 22px; border-radius: 10px; } /* blueprint dots behind the drawing */
.is-zoom-running .zoom-caption { display: block; flex: none; height: 138px; overflow: hidden; padding: 10px 2px 12px; border-top: 1px solid var(--ink-line); } /* the step now playing; a fixed height so the canvas never resizes while you scroll */
.zoom-count { color: var(--world-tint); font: 500 12px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; } /* "Step 5 of 28" */
.zoom-title { margin-top: 2px; font: 700 clamp(17px, 1.5vw, 19px)/1.2 var(--display); } /* the step's name */
.zoom-formula { margin-top: 4px; color: var(--amber); font: 500 12.5px/1.35 var(--mono); } /* the formula with the true sizes */
.zoom-note { margin-top: 4px; color: var(--paper-soft); font-size: 13.5px; line-height: 1.4; } /* one plain sentence */
.is-zoom-running .zoom-steps { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* readable by screen readers, not seen */
.zoom-steps { display: grid; gap: 0; counter-reset: none; list-style: none; } /* the stepped list (still pictures with reduced motion) */
.is-still .zoom-view { display: none; } /* no live canvas */
.is-still .zoom-steps li { display: grid; gap: 4px; padding: 16px 0 18px; border-top: 1px solid var(--ink-line); } /* one step with its picture */
.is-still .zoom-steps canvas { display: block; max-width: 100%; margin-top: 8px; border-radius: 10px; background-image: radial-gradient(rgb(218 210 255 / 0.13) 1px, transparent 1.2px); background-size: 22px 22px; } /* the finished picture */
.zoom-item-title { font: 700 16px/1.25 var(--display); } /* step name in the list */
.zoom-item-formula { color: var(--amber); font: 500 12.5px/1.35 var(--mono); } /* formula in the list */
.zoom-item-note { color: var(--paper-soft); font-size: 13.5px; line-height: 1.4; } /* sentence in the list */
.zoom-stage { position: relative; } /* anchor for the hidden list */
@media (max-width: 859px) { /* phones */
  #panel-forward { --stage-height: calc(100vh - 32px); --stage-height: calc(100svh - 32px); } /* the card fills the phone screen under its top gap, so no empty strip shows beneath it */
  #panel-forward.is-scrubbing { height: calc(var(--stage-height) + var(--scroll-distance, 150vh) * 0.7); } /* a shorter scroll than the other panels get on a phone */
  .is-zoom-running .zoom-caption { height: 150px; padding-top: 8px; } /* room for a two-line name, formula and sentence */
  .zoom-title { font-size: 16.5px; } /* long names wrap to two lines at most */
  .zoom-note { font-size: 13px; } /* fits two lines */
}
.zoom-skip { display: none; } /* only phones need it */
@media (max-width: 959px) { /* phones and small tablets: the panel guide is hidden */
  .zoom-skip { display: inline-block; margin: 0 0 14px; padding: 9px 16px; border: 1px solid var(--ink-line); border-radius: 999px; color: var(--paper); font: 600 14px var(--body); text-decoration: none; } /* a pill link above the story */
  .zoom-skip::after { content: " \2193"; color: var(--amber); } /* a small arrow down */
}
@media (prefers-reduced-motion: reduce) { .panel-guide .mini-label { display: none; } } /* nothing plays, so no "scroll to play" line */