/* generated by tools/site/build_guide.py: the printed rows' places on the book's contents page */
.book-page .s1 { left: 53.18%; top: 26.25%; width: 26.80%; height: 6.43%; }
.book-page .s2 { left: 53.18%; top: 32.98%; width: 26.80%; height: 6.43%; }
.book-page .s3 { left: 53.18%; top: 39.72%; width: 26.80%; height: 6.43%; }
.book-page .s4 { left: 53.18%; top: 46.45%; width: 26.80%; height: 6.43%; }
.book-page .s5 { left: 53.18%; top: 53.18%; width: 26.80%; height: 6.43%; }
.book-page .s6 { left: 53.18%; top: 59.91%; width: 26.80%; height: 6.43%; }
.book-page .s7 { left: 53.18%; top: 66.64%; width: 26.80%; height: 6.43%; }
.book-page .sall { left: 57.86%; top: 75.15%; width: 17.44%; height: 7.00%; }

/* On a phone the open book would shrink until a printed row is 13 px tall. So the scene plays at full width as on
   a desktop, and once the book is open the page grows to fill the screen (the frame's right page, x 48-86 % and
   y 6-94 %, at 263 % of the width), with each row a real tap target. All in vw so the stage and the page move
   together; CSS only. 56.25vw = the 16:9 frame; 130.25vw = the zoomed stage; the page 263.16 x 148vw, shifted
   -126.32vw, -8.88vw. */
@media (max-width: 720px) {
  .book-stage { aspect-ratio: auto; height: 56.25vw; animation: book-grow 1.1s ease-in-out 6s forwards; }
  .book-open { inset: 0 0 auto 0; height: 56.25vw; }
  .book-page { inset: auto; left: 0; top: 0; width: 100vw; height: 56.25vw;
    animation: book-page 0.5s ease-out 5.4s forwards, book-zoom 1.1s ease-in-out 6s forwards; }
}
@keyframes book-grow { to { height: 130.25vw; } }
@keyframes book-zoom { to { left: -126.32vw; top: -8.88vw; width: 263.16vw; height: 148vw; } }
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .book-stage { animation: none; height: 130.25vw; }
  .book-open { display: none; }
  .book-page { animation: none; opacity: 1; left: -126.32vw; top: -8.88vw; width: 263.16vw; height: 148vw; }
}