:root {
  color-scheme: dark;
  --midnight: #061327;
  --midnight-soft: #0d203a;
  --paper: #e6cfaa;
  --graphite: #3b454d;
  --indigo: #123f83;
  --coral: #cf7167;
  --brass: #a77a3c;
  /* HanziPen remains the intended notebook face wherever the platform has it.
     Latin and Han text diverge only when that preferred face is unavailable. */
  --about-handwritten-en: "HanziPen SC", "HanziPenSC-W3", "Caveat", "Kaiti SC", STKaiti, cursive;
  --about-handwritten-zh: "HanziPen SC", "HanziPenSC-W3", "LXGW WenKai", "Kaiti SC", STKaiti, "Noto Serif CJK SC", "Noto Serif SC", serif;
  --about-handwritten: var(--about-handwritten-en);
}

html[lang="zh"] { --about-handwritten: var(--about-handwritten-zh); }
html[lang="en"] { --about-handwritten: var(--about-handwritten-en); }

* { box-sizing: border-box; }

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background: var(--midnight);
  color: var(--paper);
  font-family: Georgia, "Times New Roman", serif;
}

button,
a { -webkit-tap-highlight-color: transparent; }

.about-demo {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(14px, 2vw, 34px);
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 46%, rgba(30, 63, 96, .2), transparent 54%),
    var(--midnight);
}

/* Story Mode supplies the map-grade dark scrim and global chrome. The book
   itself keeps the exact standalone geometry and scales as one 1672:941 unit. */
html.is-storymode-embed,
html.is-storymode-embed body,
html.is-storymode-embed .about-demo {
  color-scheme: normal;
  background: rgba(0, 0, 0, 0) !important;
}

html.is-storymode-embed .demo-controls,
html.is-storymode-embed .demo-caption,
html.is-storymode-embed .layout-test-controls {
  display: none !important;
}

/* The parent mobile shell is 844×390. Fit the complete 1672:941 book against
   the short edge as a single authored composition; all internal cqw geometry
   then scales proportionally with it. */
@media (max-height: 500px) {
  html.is-storymode-embed .about-demo { padding:8px; }
  html.is-storymode-embed .book-stage {
    width:min(100%,calc((100svh - 16px) * 1672 / 941));
  }
}

.book-stage {
  width: min(100%, 1672px);
  display: grid;
  place-items: center;
}

.book-composite {
  width: 100%;
  aspect-ratio: 1672 / 941;
  position: relative;
  container-type: inline-size;
  transform-origin: 50% 54%;
  animation: book-arrive 720ms cubic-bezier(.2, .8, .2, 1) both;
}

.about-chapter-tabs {
  position: absolute;
  z-index: 20;
  left: 50%;
  top: .35%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .15cqw;
  transform: translateX(-50%);
  white-space: nowrap;
}

.about-chapter-tabs button {
  width: 4.05cqw;
  height: 5.42cqw;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: transform 150ms ease, filter 150ms ease;
}

.about-chapter-tabs button:hover:not(:disabled),
.about-chapter-tabs button:focus-visible {
  transform: translateY(-.2cqw);
  filter: drop-shadow(0 .24cqw .18cqw rgba(0, 0, 0, .28));
  outline: none;
}

.about-chapter-tabs button[aria-current="page"] {
  transform: translateY(-.2cqw);
  filter: drop-shadow(0 .3cqw .2cqw rgba(0, 0, 0, .32));
}

.about-chapter-tabs button:disabled {
  cursor: default;
  opacity: .58;
}

.about-chapter-tabs img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

/* One direct jump still turns exactly one duplex leaf. These two generic
 * stationary halves are the only surfaces allowed to show beneath it -- and
 * this rule is what makes that true. Showing the two was never the same as
 * hiding the rest: a spread the source's own thread had left visible sat at the
 * same z-index, clipped to the same half, later in the DOM, and won. */
.book-composite.is-direct-jumping .is-direct-hidden {
  visibility: hidden !important;
  opacity: 0 !important;
}

.book-composite.is-direct-jumping .is-direct-stationary-left {
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 3 !important;
  clip-path: inset(0 50% 0 0) !important;
  pointer-events: none !important;
}

.book-composite.is-direct-jumping .is-direct-stationary-right {
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 2 !important;
  clip-path: inset(0 0 0 50%) !important;
  pointer-events: none !important;
}

.book-shell,
.placeholder-spread,
.spread-decor {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.book-shell { z-index: 0; }
.placeholder-spread {
  z-index: 1;
  transform: scale(.792);
  transform-origin: 50% 50%;
}

.spread-sheet {
  position: absolute;
  z-index: 2;
  inset: 0;
  opacity: 1;
}

.book-composite.is-page-illustrated .spread-sheet,
.book-composite.is-page-two .spread-sheet,
.book-composite.is-page-three .spread-sheet,
.book-composite.is-page-four .spread-sheet,
.book-composite.is-page-five .spread-sheet,
.book-composite.is-page-six .spread-sheet {
  visibility: hidden;
}

.book-composite.is-scene-page .spread-sheet {
  visibility: hidden;
  pointer-events: none;
}

.book-composite.is-page-illustrated.is-preparing-prev .spread-sheet {
  visibility: visible;
  z-index: 3;
  clip-path: inset(0 50% 0 0);
}

.illustrated-spread-sheet {
  position: absolute;
  z-index: 2;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
}

.illustrated-spread-paper {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(.792);
  transform-origin: 50% 50%;
  pointer-events: none;
  user-select: none;
}

.book-composite.is-page-illustrated .illustrated-spread-sheet {
  visibility: visible;
  pointer-events: auto;
}

.illustrated-flight-polaroid {
  position: absolute;
  z-index: 4;
  left: 4%;
  top: 67%;
  display: block;
  width: 16%;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: rotate(-5deg);
  transform-origin: 50% 50%;
  filter: drop-shadow(0 .72cqw .62cqw rgba(41, 29, 18, .25));
  transition: opacity 140ms ease-out;
}

.illustrated-flight-polaroid > img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.book-composite.is-page-illustrated .illustrated-flight-polaroid {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.book-composite.is-turning-forward .illustrated-flight-polaroid,
.book-composite.is-turning-back .illustrated-flight-polaroid {
  opacity: 0;
  pointer-events: none;
}

.book-composite.is-preparing-next .illustrated-spread-sheet,
.book-composite.is-page-illustrated.is-preparing-prev .illustrated-spread-sheet {
  visibility: visible;
  z-index: 3;
  clip-path: inset(0 0 0 50%);
}

.book-composite.is-page-illustrated.is-preparing-third .illustrated-spread-sheet,
.book-composite.is-page-two.is-preparing-second .illustrated-spread-sheet {
  visibility: visible;
  z-index: 3;
  clip-path: inset(0 50% 0 0);
}

.second-spread-sheet {
  position: absolute;
  z-index: 2;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
}

.second-spread-paper {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(.792);
  transform-origin: 50% 50%;
  pointer-events: none;
  user-select: none;
}

.second-spread-content {
  position: absolute;
  z-index: 1;
  inset: 10.4%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  color: var(--graphite);
  font-family: var(--about-handwritten);
}

.book-composite.is-page-two .second-spread-sheet {
  visibility: visible;
  pointer-events: auto;
}

.book-composite.is-page-illustrated.is-preparing-third .second-spread-sheet,
.book-composite.is-page-two.is-preparing-second .second-spread-sheet {
  visibility: visible;
  z-index: 2;
  clip-path: inset(0 0 0 50%);
}

.book-composite.is-page-three .second-spread-sheet {
  visibility: hidden;
}

.about-prologue-polaroid {
  position: absolute;
  z-index: 4;
  left: 51.5%;
  top: 55%;
  width: 15.5%;
  display: block;
  transform: rotate(-3deg);
  transform-origin: 50% 50%;
  filter: drop-shadow(0 .58cqw .48cqw rgba(47, 31, 18, .22));
  transition: opacity 140ms ease-out;
  pointer-events: none;
}

.about-prologue-polaroid img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.book-composite.is-turning-forward .about-prologue-polaroid,
.book-composite.is-turning-back .about-prologue-polaroid {
  opacity: 0;
  visibility: hidden;
}

.book-composite.is-page-two.is-preparing-fourth .second-spread-sheet,
.book-composite.is-page-three.is-preparing-third-back .second-spread-sheet {
  visibility: visible;
  z-index: 3;
  clip-path: inset(0 50% 0 0);
}

.third-spread-sheet {
  position: absolute;
  z-index: 2;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
}

.third-spread-paper {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(.792);
  transform-origin: 50% 50%;
  pointer-events: none;
  user-select: none;
}

.third-spread-content {
  position: absolute;
  z-index: 1;
  inset: 10.4%;
  color: var(--graphite);
  font-family: var(--about-handwritten);
  pointer-events: none;
}

.third-spread-polaroids {
  position: absolute;
  z-index: 3;
  inset: 10.4%;
  pointer-events: none;
}

.third-spread-polaroid-bubble {
  position: absolute;
  left: -16%;
  top: 55%;
  display: block;
  width: 27%;
  height: auto;
  filter: drop-shadow(0 .9cqw .75cqw rgba(41, 29, 18, .28));
  transform: rotate(-8deg);
  transform-origin: 50% 18%;
}

.third-spread-polaroid-bubble > img,
.fourth-spread-polaroid > img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.book-composite.is-turning-forward .third-spread-polaroids,
.book-composite.is-turning-back .third-spread-polaroids {
  visibility: hidden;
}

.book-composite.is-page-three .third-spread-sheet {
  visibility: visible;
  pointer-events: auto;
}

.book-composite.is-page-two.is-preparing-fourth .third-spread-sheet,
.book-composite.is-page-three.is-preparing-third-back .third-spread-sheet {
  visibility: visible;
  z-index: 2;
  clip-path: inset(0 0 0 50%);
}

.book-composite.is-page-three.is-preparing-fifth .third-spread-sheet,
.book-composite.is-page-four.is-preparing-fourth-back .third-spread-sheet {
  visibility: visible;
  z-index: 3;
  clip-path: inset(0 50% 0 0);
}

.fourth-spread-sheet {
  position: absolute;
  z-index: 2;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
}

.fourth-spread-paper {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(.792);
  transform-origin: 50% 50%;
  pointer-events: none;
  user-select: none;
}

.fourth-spread-content {
  position: absolute;
  z-index: 1;
  inset: 10.4%;
  color: var(--graphite);
  font-family: var(--about-handwritten);
  pointer-events: none;
}

.fourth-spread-polaroids {
  position: absolute;
  z-index: 3;
  inset: 10.4%;
  pointer-events: none;
}

.fourth-spread-polaroid {
  position: absolute;
  display: block;
  height: auto;
  filter: drop-shadow(0 .8cqw .7cqw rgba(41, 29, 18, .24));
  transform-origin: 50% 50%;
}

.fourth-spread-polaroid-worlds {
  left: 57.25%;
  top: -1%;
  width: 23.5%;
  transform: rotate(-2.3deg);
}

.fourth-spread-polaroid-theatre {
  left: 59%;
  top: 51%;
  width: 23%;
  transform: rotate(4deg);
}

.book-composite.is-turning-forward .fourth-spread-polaroids,
.book-composite.is-turning-back .fourth-spread-polaroids {
  visibility: hidden;
}

.book-composite.is-page-four .fourth-spread-sheet {
  visibility: visible;
  pointer-events: auto;
}

.book-composite.is-page-three.is-preparing-fifth .fourth-spread-sheet,
.book-composite.is-page-four.is-preparing-fourth-back .fourth-spread-sheet {
  visibility: visible;
  z-index: 2;
  clip-path: inset(0 0 0 50%);
}

.book-composite.is-page-four.is-preparing-sixth .fourth-spread-sheet,
.book-composite.is-page-five.is-preparing-fifth-back .fourth-spread-sheet {
  visibility: visible;
  z-index: 3;
  clip-path: inset(0 50% 0 0);
}

.book-composite.is-page-five.is-preparing-fifth-back .fourth-spread-sheet {
  z-index: 3;
  clip-path: inset(0 50% 0 0);
}

/* A chapter jump is one explicit duplex edge, not several sequential turns.
 * For 05|06 -> 11|12, keep 05 still and reveal 12 behind the moving leaf. */
.book-composite.is-page-two.is-preparing-worlds-jump .second-spread-sheet {
  visibility: visible;
  z-index: 3;
  clip-path: inset(0 50% 0 0);
}

.book-composite.is-page-two.is-preparing-worlds-jump .worlds-spread-sheet {
  visibility: visible;
  z-index: 2;
  clip-path: inset(0 0 0 50%);
}

.worlds-spread-sheet {
  position: absolute;
  z-index: 2;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
}

.worlds-spread-paper {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(.792);
  transform-origin: 50% 50%;
  pointer-events: none;
  user-select: none;
}

.book-composite.is-page-five .worlds-spread-sheet {
  visibility: visible;
  pointer-events: auto;
}

.book-composite.is-page-four.is-preparing-sixth .worlds-spread-sheet,
.book-composite.is-page-five.is-preparing-fifth-back .worlds-spread-sheet {
  visibility: visible;
  z-index: 2;
  clip-path: inset(0 0 0 50%);
}

.book-composite.is-turning-forward .worlds-polaroids,
.book-composite.is-turning-back .worlds-polaroids {
  visibility: hidden;
}

.sunnys-looks-spread-sheet {
  position: absolute;
  z-index: 2;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
}

.sunnys-looks-spread-paper {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(.792);
  transform-origin: 50% 50%;
  pointer-events: none;
  user-select: none;
}

.sunnys-looks-polaroids {
  position: absolute;
  z-index: 3;
  inset: 10.4%;
  pointer-events: none;
  transition: opacity 140ms ease-out;
}

.sunnys-looks-polaroids > span {
  position: absolute;
  display: block;
  width: 18%;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 .55cqw .48cqw rgba(47, 31, 18, .2));
  pointer-events: auto;
  cursor: pointer;
}

.sunnys-looks-polaroids > span:focus-visible {
  z-index: 50;
  outline: .16cqw dashed rgba(33, 79, 122, .82);
  outline-offset: .18cqw;
}

.sunnys-looks-polaroids > span:focus-visible img {
  transform: rotate(2deg) scale(1.12);
  filter: drop-shadow(0 .7cqw .55cqw rgba(34, 25, 17, .28));
}

.sunnys-looks-polaroids img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  transform-origin: 50% 50%;
  transition: transform 180ms cubic-bezier(.2, .8, .2, 1), filter 180ms ease;
}

.sunnys-looks-polaroids > [data-sunnys-look="college"] { left: -9%; top: 6%; width: 17%; transform: rotate(-1deg); }
.sunnys-looks-polaroids > [data-sunnys-look="airbnb-sf"] { left: 17%; top: 36%; width: 17.6%; transform: rotate(-1deg); }
.sunnys-looks-polaroids > [data-sunnys-look="google"] { left: -2.7%; top: 59%; width: 20.3%; transform: rotate(-9deg); }
.sunnys-looks-polaroids > [data-sunnys-look="airbnb-beijing"] { left: 30%; top: 67.5%; width: 17.6%; transform: rotate(1deg); }
.sunnys-looks-polaroids > [data-sunnys-look="art-jewelry"] { left: 41%; top: 15%; width: 18.5%; transform: rotate(-8deg); }
.sunnys-looks-polaroids > [data-sunnys-look="trulia"] { left: 58.7%; top: -3%; width: 16%; transform: rotate(-2deg); }
.sunnys-looks-polaroids > [data-sunnys-look="paper-flight"] { left: 73.2%; top: 19.5%; width: 17%; transform: rotate(6deg); }
.sunnys-looks-polaroids > [data-sunnys-look="cmu"] { left: 52.3%; top: 54%; width: 16.7%; transform: rotate(2deg); }
.sunnys-looks-polaroids > [data-sunnys-look="ai-lab"] { left: 66.8%; top: 64%; width: 16.6%; transform: rotate(-7deg); }
.sunnys-looks-polaroids > [data-sunnys-look="thoughts"] { left: 84.4%; top: 64.7%; width: 17.6%; transform: rotate(4deg); }

.book-composite.is-sunnys-looks-page .sunnys-looks-spread-sheet {
  visibility: visible;
  pointer-events: auto;
}

/* S16 <-> S17: Reflection.left and Looks.right remain stationary. */
.book-composite.is-preparing-looks-next .sunnys-looks-spread-sheet,
.book-composite.is-preparing-looks-back .sunnys-looks-spread-sheet,
.book-composite.is-page-two.is-preparing-looks-jump .sunnys-looks-spread-sheet {
  visibility: visible;
  z-index: 2;
  clip-path: inset(0 0 0 50%);
}

.book-composite.is-page-two.is-preparing-looks-jump .second-spread-sheet {
  visibility: visible;
  z-index: 3;
  clip-path: inset(0 50% 0 0);
}

.book-composite.is-turning-forward .sunnys-looks-polaroids,
.book-composite.is-turning-back .sunnys-looks-polaroids {
  opacity: 0;
  visibility: hidden;
}

.turning-leaf .sunnys-looks-polaroids {
  display: none !important;
}

/* S17 is its own resting surface; no earlier spread may bleed through it. */
.book-composite.is-sunnys-looks-page .spread-sheet,
.book-composite.is-sunnys-looks-page .illustrated-spread-sheet,
.book-composite.is-sunnys-looks-page .second-spread-sheet,
.book-composite.is-sunnys-looks-page .third-spread-sheet,
.book-composite.is-sunnys-looks-page .fourth-spread-sheet,
.book-composite.is-sunnys-looks-page .worlds-spread-sheet,
.book-composite.is-sunnys-looks-page .scene-spread-sheet {
  visibility: hidden;
  pointer-events: none;
}

.book-composite.is-sunnys-looks-page.is-preparing-looks-back .scene-spread-sheet.is-scene-turn-left {
  visibility: visible;
  z-index: 3;
  clip-path: inset(0 50% 0 0);
}

.looks-thread-spread-sheet {
  position: absolute;
  z-index: 2;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
}

.looks-thread-spread-paper {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(.792);
  transform-origin: 50% 50%;
  pointer-events: none;
  user-select: none;
}

.looks-thread-caption {
  position: absolute;
  z-index: 5;
  width: 21%;
  margin: 0;
  color: #31516c;
  font-family: var(--about-handwritten);
  font-size: 1.28cqw;
  line-height: 1.42;
  letter-spacing: .012em;
  text-wrap: balance;
  white-space: normal;
  transform: rotate(-1deg);
}

.looks-thread-caption-copy {
  display: block;
  min-width: 100%;
  min-height: 1.42em;
  outline: 0;
  white-space: pre-line;
}

.looks-thread-college .looks-thread-caption { left: 53.5%; top: 62%; width: 14.5%; transform: rotate(-1.5deg); }
.looks-thread-paper-flight .looks-thread-caption { left: 55%; top: 69%; width: 22%; transform: rotate(.8deg); }
.looks-thread-cmu .looks-thread-caption { left: 54%; top: 65%; width: 21%; transform: rotate(-1.2deg); }
.looks-thread-trulia .looks-thread-caption { left: 56%; top: 68%; width: 20%; transform: rotate(.7deg); }
.looks-thread-google .looks-thread-caption { left: 57%; top: 69%; width: 20%; transform: rotate(-1deg); }
.looks-thread-airbnb-sf .looks-thread-caption { left: 57%; top: 68%; width: 20%; transform: rotate(.9deg); }
.looks-thread-airbnb-beijing .looks-thread-caption { left: 57%; top: 68%; width: 21%; transform: rotate(-1.1deg); }
.looks-thread-art .looks-thread-caption { left: 56%; top: 69%; width: 21%; transform: rotate(.8deg); }
.looks-thread-ai-lab .looks-thread-caption { left: 50%; top: 68%; width: 18%; transform: rotate(-.8deg); }
.looks-thread-thoughts .looks-thread-caption { left: 60%; top: 58%; width: 14%; transform: rotate(1deg); }

.looks-thread-spread-sheet.is-looks-thread-current {
  visibility: visible;
}

.sunnys-looks-spread-sheet.is-looks-turn-left,
.looks-thread-spread-sheet.is-looks-turn-left {
  visibility: visible;
  z-index: 3;
  clip-path: inset(0 50% 0 0);
}

.looks-thread-spread-sheet.is-looks-turn-right {
  visibility: visible;
  z-index: 2;
  clip-path: inset(0 0 0 50%);
}

.book-composite.is-looks-thread-page :is(
  .spread-sheet,
  .illustrated-spread-sheet,
  .second-spread-sheet,
  .third-spread-sheet,
  .fourth-spread-sheet,
  .worlds-spread-sheet,
  .scene-spread-sheet,
  .sunnys-looks-spread-sheet
) {
  visibility: hidden;
  pointer-events: none;
}

.book-composite.is-looks-thread-page .looks-thread-spread-sheet.is-looks-turn-left,
.book-composite.is-looks-thread-page .looks-thread-spread-sheet.is-looks-turn-right {
  visibility: visible;
}

.elements-props-cover-sheet,
.elements-props-thread-sheet {
  position: absolute;
  z-index: 2;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
}

.elements-props-spread-paper {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(.792);
  transform-origin: 50% 50%;
  pointer-events: none;
  user-select: none;
}

.elements-props-polaroids {
  position: absolute;
  z-index: 3;
  inset: 10.4%;
  pointer-events: none;
  transition: opacity 140ms ease-out;
}

.elements-props-polaroids button {
  position: absolute;
  width: 20%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 .55cqw .48cqw rgba(47, 31, 18, .2));
  transition: transform 180ms cubic-bezier(.2, .8, .2, 1), filter 180ms ease;
}

.elements-props-polaroids button:nth-child(1) { left: 10%; top: 44%; transform: rotate(-5deg); }
.elements-props-polaroids button:nth-child(2) { left: 49%; top: 10%; transform: rotate(4deg); }
.elements-props-polaroids button:nth-child(3) { left: 69%; top: 48%; transform: rotate(-3deg); }

.elements-props-polaroids img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.elements-props-polaroids button:hover,
.elements-props-polaroids button:focus-visible {
  z-index: 5;
  outline: none;
  transform: translateY(-.4cqw) rotate(0deg) scale(1.12);
  filter: drop-shadow(0 .8cqw .6cqw rgba(34, 25, 17, .3));
}

.book-composite.is-elements-props-cover-page .elements-props-cover-sheet,
.elements-props-thread-sheet.is-elements-props-thread-current {
  visibility: visible;
  pointer-events: auto;
}

.book-composite.is-turning-forward .elements-props-polaroids,
.book-composite.is-turning-back .elements-props-polaroids {
  opacity: 0;
  visibility: hidden;
}

.turning-leaf .elements-props-polaroids {
  display: none !important;
}

.elements-props-cover-sheet.is-elements-props-turn-left,
.elements-props-thread-sheet.is-elements-props-turn-left {
  visibility: visible;
  z-index: 3;
  clip-path: inset(0 50% 0 0);
}

.elements-props-cover-sheet.is-elements-props-turn-right,
.elements-props-thread-sheet.is-elements-props-turn-right {
  visibility: visible;
  z-index: 2;
  clip-path: inset(0 0 0 50%);
}

.book-composite.is-elements-props-cover-page :is(
  .spread-sheet, .illustrated-spread-sheet, .second-spread-sheet,
  .third-spread-sheet, .fourth-spread-sheet, .worlds-spread-sheet,
  .scene-spread-sheet, .sunnys-looks-spread-sheet, .looks-thread-spread-sheet
),
.book-composite.is-elements-props-thread-page :is(
  .spread-sheet, .illustrated-spread-sheet, .second-spread-sheet,
  .third-spread-sheet, .fourth-spread-sheet, .worlds-spread-sheet,
  .scene-spread-sheet, .sunnys-looks-spread-sheet, .looks-thread-spread-sheet,
  .elements-props-cover-sheet
) {
  visibility: hidden;
  pointer-events: none;
}

.book-composite.is-elements-props-cover-page .elements-props-cover-sheet.is-elements-props-turn-left,
.book-composite.is-elements-props-cover-page .elements-props-cover-sheet.is-elements-props-turn-right,
.book-composite.is-elements-props-cover-page .looks-thread-spread-sheet.is-looks-turn-left,
.book-composite.is-elements-props-cover-page .looks-thread-spread-sheet.is-looks-turn-right,
.book-composite.is-elements-props-thread-page .elements-props-thread-sheet.is-elements-props-turn-left,
.book-composite.is-elements-props-thread-page .elements-props-thread-sheet.is-elements-props-turn-right,
.book-composite.is-elements-props-thread-page .elements-props-cover-sheet.is-elements-props-turn-left,
.book-composite.is-elements-props-thread-page .elements-props-cover-sheet.is-elements-props-turn-right {
  visibility: visible;
}

.skills-atlas-cover-sheet {
  position: absolute;
  z-index: 2;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
}

.skills-atlas-spread-paper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(.792);
  transform-origin: 50% 50%;
  pointer-events: none;
  user-select: none;
}

.book-composite.is-skills-atlas-page .skills-atlas-cover-sheet {
  visibility: visible;
  pointer-events: auto;
}

.skills-atlas-cover-sheet.is-skills-atlas-turn-left {
  visibility: visible;
  z-index: 3;
  clip-path: inset(0 50% 0 0);
}

.skills-atlas-cover-sheet.is-skills-atlas-turn-right {
  visibility: visible;
  z-index: 2;
  clip-path: inset(0 0 0 50%);
}

.book-composite.is-skills-atlas-page :is(
  .spread-sheet, .illustrated-spread-sheet, .second-spread-sheet,
  .third-spread-sheet, .fourth-spread-sheet, .worlds-spread-sheet,
  .scene-spread-sheet, .sunnys-looks-spread-sheet, .looks-thread-spread-sheet,
  .elements-props-cover-sheet, .elements-props-thread-sheet
) {
  visibility: hidden;
  pointer-events: none;
}

.book-composite.is-skills-atlas-page .skills-atlas-cover-sheet.is-skills-atlas-turn-left,
.book-composite.is-skills-atlas-page .skills-atlas-cover-sheet.is-skills-atlas-turn-right,
.book-composite.is-skills-atlas-page .elements-props-thread-sheet.is-elements-props-turn-left,
.book-composite.is-skills-atlas-page .elements-props-thread-sheet.is-elements-props-turn-right {
  visibility: visible;
}

.music-ost-cover-sheet,
.music-ost-thread-sheet {
  position: absolute;
  z-index: 2;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
}

.music-ost-spread-paper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(.792);
  transform-origin: 50% 50%;
  pointer-events: none;
  user-select: none;
}

.book-composite.is-music-ost-page .music-ost-cover-sheet.is-music-ost-current,
.book-composite.is-music-ost-page .music-ost-thread-sheet.is-music-ost-current {
  visibility: visible;
  pointer-events: auto;
}

.music-ost-cover-sheet.is-music-ost-turn-left,
.music-ost-thread-sheet.is-music-ost-turn-left {
  visibility: visible;
  z-index: 3;
  clip-path: inset(0 50% 0 0);
}

.music-ost-cover-sheet.is-music-ost-turn-right,
.music-ost-thread-sheet.is-music-ost-turn-right {
  visibility: visible;
  z-index: 2;
  clip-path: inset(0 0 0 50%);
}

.book-composite.is-music-ost-page :is(
  .spread-sheet, .illustrated-spread-sheet, .second-spread-sheet,
  .third-spread-sheet, .fourth-spread-sheet, .worlds-spread-sheet,
  .scene-spread-sheet, .sunnys-looks-spread-sheet, .looks-thread-spread-sheet,
  .elements-props-cover-sheet, .elements-props-thread-sheet, .skills-atlas-cover-sheet
) {
  visibility: hidden;
  pointer-events: none;
}

.book-composite.is-music-ost-page .music-ost-cover-sheet.is-music-ost-turn-left,
.book-composite.is-music-ost-page .music-ost-cover-sheet.is-music-ost-turn-right,
.book-composite.is-music-ost-page .music-ost-thread-sheet.is-music-ost-turn-left,
.book-composite.is-music-ost-page .music-ost-thread-sheet.is-music-ost-turn-right,
.book-composite.is-music-ost-page .skills-atlas-cover-sheet.is-skills-atlas-turn-left,
.book-composite.is-music-ost-page .skills-atlas-cover-sheet.is-skills-atlas-turn-right {
  visibility: visible;
}

.credits-cover-sheet {
  position: absolute;
  z-index: 2;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
}

.credits-spread-paper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(.792);
  transform-origin: 50% 50%;
  pointer-events: none;
  user-select: none;
}

.credits-copy {
  position: absolute;
  z-index: 5;
  left: 13.5%;
  top: 30%;
  width: 33.5%;
  color: var(--graphite);
  font-family: var(--about-handwritten);
  font-size: 1.08cqw;
  line-height: 1.38;
  text-wrap: pretty;
  transform: rotate(-.35deg);
}

.credits-emphasis {
  color: var(--indigo);
  font-weight: 600;
}

.credits-copy p {
  margin: 0 0 .72em;
}

[data-credits-body].has-saved-copy,
[data-credits-footnote-copy] {
  white-space: pre-line;
}

.credits-footnote {
  position: absolute;
  top: 28.55cqw;
  left: 0;
  width: 100%;
  margin: 0 !important;
  color: var(--graphite);
  font-size: .9em;
  line-height: 1.45;
}

.turning-back-content.is-full-spread-copy .credits-copy,
.turning-back-content.is-full-spread-copy .credits-main-copy,
.turning-back-content.is-full-spread-copy .credits-footnote,
.turning-back-content.is-full-spread-copy [data-credits-body],
.turning-back-content.is-full-spread-copy [data-credits-footnote-copy] {
  opacity: 1 !important;
  transition: none !important;
  animation: none !important;
  filter: none !important;
}

html[lang="zh"] .credits-copy {
  line-height: 1.45;
}

.book-composite.is-credits-page .credits-cover-sheet {
  visibility: visible;
  pointer-events: auto;
}

.credits-cover-sheet.is-credits-turn-left {
  visibility: visible;
  z-index: 3;
  clip-path: inset(0 50% 0 0);
}

.credits-cover-sheet.is-credits-turn-right {
  visibility: visible;
  z-index: 2;
  clip-path: inset(0 0 0 50%);
}

.book-composite.is-credits-page :is(
  .spread-sheet, .illustrated-spread-sheet, .second-spread-sheet,
  .third-spread-sheet, .fourth-spread-sheet, .worlds-spread-sheet,
  .scene-spread-sheet, .sunnys-looks-spread-sheet, .looks-thread-spread-sheet,
  .elements-props-cover-sheet, .elements-props-thread-sheet, .skills-atlas-cover-sheet,
  .music-ost-cover-sheet, .music-ost-thread-sheet
) {
  visibility: hidden;
  pointer-events: none;
}

.book-composite.is-credits-page .credits-cover-sheet.is-credits-turn-left,
.book-composite.is-credits-page .credits-cover-sheet.is-credits-turn-right,
.book-composite.is-credits-page .music-ost-thread-sheet.is-music-ost-turn-left,
.book-composite.is-credits-page .music-ost-thread-sheet.is-music-ost-turn-right {
  visibility: visible;
}

.ending-spread-sheet {
  position: absolute;
  z-index: 2;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
}

.ending-spread-paper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(.792);
  transform-origin: 50% 50%;
  pointer-events: none;
  user-select: none;
}

.book-composite.is-ending-page .ending-spread-sheet {
  visibility: visible;
  pointer-events: auto;
}

.ending-spread-sheet.is-ending-turn-left {
  visibility: visible;
  z-index: 3;
  clip-path: inset(0 50% 0 0);
}

.ending-spread-sheet.is-ending-turn-right {
  visibility: visible;
  z-index: 2;
  clip-path: inset(0 0 0 50%);
}

.book-composite.is-ending-page :is(
  .spread-sheet, .illustrated-spread-sheet, .second-spread-sheet,
  .third-spread-sheet, .fourth-spread-sheet, .worlds-spread-sheet,
  .scene-spread-sheet, .sunnys-looks-spread-sheet, .looks-thread-spread-sheet,
  .elements-props-cover-sheet, .elements-props-thread-sheet, .skills-atlas-cover-sheet,
  .music-ost-cover-sheet, .music-ost-thread-sheet, .credits-cover-sheet
) {
  visibility: hidden;
  pointer-events: none;
}

.book-composite.is-ending-page .ending-spread-sheet.is-ending-turn-left,
.book-composite.is-ending-page .ending-spread-sheet.is-ending-turn-right,
.book-composite.is-ending-page .credits-cover-sheet.is-credits-turn-left,
.book-composite.is-ending-page .credits-cover-sheet.is-credits-turn-right {
  visibility: visible;
}

.sunnys-looks-polaroids > span:hover {
  z-index: 50;
}

.sunnys-looks-polaroids > span:hover img {
  transform: rotate(2deg) scale(1.16);
  filter: drop-shadow(0 .7cqw .55cqw rgba(34, 25, 17, .28));
}

.book-composite.is-layout-editing .sunnys-looks-polaroids > span:hover img {
  transform: none;
  filter: none;
}

.scene-spread-sheet {
  position: absolute;
  z-index: 2;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
}

.scene-spread-paper {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(.792);
  transform-origin: 50% 50%;
  pointer-events: none;
  user-select: none;
}

.scene-spread-overlays {
  position: absolute;
  z-index: 3;
  inset: 10.4%;
  pointer-events: none;
}

.scene-overlay-paper {
  position: absolute;
  display: block;
  filter: drop-shadow(0 .58cqw .48cqw rgba(47, 31, 18, .22));
  transform-origin: 50% 50%;
  transition: opacity 140ms ease-out;
}

.scene-overlay-paper > img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* Director rule: loose cards sit above the binding and never become ink on a
 * moving leaf. Existing page topology stays untouched; only their visibility
 * follows the already-authoritative turn classes. */
.turning-leaf .scene-overlay-paper {
  display: none !important;
}

.book-composite.is-turning-forward .scene-spread-sheet .scene-overlay-paper,
.book-composite.is-turning-back .scene-spread-sheet .scene-overlay-paper {
  opacity: 0;
}

.start-overlay-architecture {
  left: 19.5%;
  top: 8.5%;
  width: 24%;
  transform: rotate(-2.4deg);
}

.start-overlay-objects {
  left: 38%;
  top: 58%;
  width: 22%;
  transform: rotate(3.8deg);
}

.start-scene-line {
  position: absolute;
  z-index: 5;
  left: 8.2%;
  top: 22.5%;
  width: 18%;
  margin: 0;
  color: #31516c;
  font-family: var(--about-handwritten);
  font-size: 1.28cqw;
  line-height: 1.42;
  letter-spacing: .015em;
  transform: rotate(-1.6deg);
  text-wrap: balance;
}

.scene-spread-sheet.is-scene-current {
  visibility: visible;
  pointer-events: auto;
}

.scene-spread-sheet.is-scene-turn-left {
  visibility: visible;
  z-index: 3;
  clip-path: inset(0 50% 0 0);
}

.scene-spread-sheet.is-scene-turn-right {
  visibility: visible;
  z-index: 2;
  clip-path: inset(0 0 0 50%);
}

.scene-spread-sheet:not(.start-spread-sheet) .scene-overlay-architecture {
  left: -12%;
  top: 34%;
  width: 22%;
  transform: rotate(-3deg);
}

.scene-spread-sheet:not(.start-spread-sheet) .scene-overlay-objects {
  left: 84%;
  top: 59%;
  width: 21%;
  transform: rotate(4deg);
}

.scene-spread-line {
  position: absolute;
  z-index: 5;
  left: 16%;
  top: 25%;
  width: 20%;
  margin: 0;
  color: #31516c;
  font-family: var(--about-handwritten);
  font-size: 1.28cqw;
  line-height: 1.42;
  letter-spacing: .015em;
  transform: rotate(-1deg);
  text-wrap: balance;
  white-space: pre-line;
  opacity: 1;
  transition: none !important;
  animation: none !important;
}

.scene-spread-line-copy {
  display: block;
  min-width: 100%;
  min-height: 1.42em;
  outline: 0;
}

.turning-leaf .scene-spread-line,
.turning-leaf .scene-spread-line-copy {
  opacity: 1 !important;
  transition: none !important;
  animation: none !important;
}

.start-scene-line {
  left: 8.2%;
  top: 22.5%;
  width: 18%;
  transform: rotate(-1.6deg);
}

.scene-spread-college .scene-spread-line,
.scene-spread-trulia .scene-spread-line {
  left: 58%;
  top: 68%;
  width: 24%;
}

.scene-spread-cmu .scene-spread-line {
  left: 27%;
  top: 69%;
  width: 22%;
}

.scene-spread-google .scene-spread-line,
.scene-spread-airbnb .scene-spread-line,
.scene-spread-ai-lab .scene-spread-line,
.scene-spread-thoughts .scene-spread-line,
.scene-spread-reflection .scene-spread-line {
  left: 11%;
  top: 22%;
  width: 23%;
}

.scene-spread-art .scene-spread-line {
  left: 18%;
  top: 20%;
  width: 23%;
}

.book-composite.is-page-six .start-spread-sheet {
  visibility: visible;
  pointer-events: auto;
}

.book-composite.is-page-five.is-preparing-seventh .worlds-spread-sheet,
.book-composite.is-page-five.is-preparing-scene-jump .worlds-spread-sheet,
.book-composite.is-page-six.is-preparing-sixth-back .worlds-spread-sheet {
  visibility: visible;
  z-index: 3;
  clip-path: inset(0 50% 0 0);
}

.book-composite.is-page-five.is-preparing-seventh .start-spread-sheet,
.book-composite.is-page-six.is-preparing-sixth-back .start-spread-sheet {
  visibility: visible;
  z-index: 2;
  clip-path: inset(0 0 0 50%);
}


.worlds-intro-copy {
  position: absolute;
  z-index: 2;
  left: calc(19% + 5px);
  top: calc(39.5% - 5px);
  width: 17%;
  margin: 0;
  color: var(--graphite);
  font-family: var(--about-handwritten);
  font-size: 1.28cqw;
  line-height: 1.52;
  transform: rotate(-.6deg);
}

.worlds-polaroids {
  position: absolute;
  z-index: 3;
  inset: 10.4%;
  pointer-events: none;
}

.worlds-polaroids button {
  --polaroid-tilt: 0deg;
  --polaroid-x: 0px;
  --polaroid-y: 0px;
  position: absolute;
  width: 15.2%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  touch-action: none;
  pointer-events: auto;
  transform: translate(var(--polaroid-x), var(--polaroid-y)) rotate(var(--polaroid-tilt));
  transform-origin: 50% 58%;
  transition: filter 180ms ease, transform 220ms cubic-bezier(.2, .8, .2, 1);
}

.layout-test-controls {
  position: absolute;
  z-index: 40;
  top: 7.2%;
  right: 8.4%;
  display: flex;
  gap: .45cqw;
  align-items: center;
}

.layout-test-controls button {
  min-height: 2.15cqw;
  padding: .34cqw .72cqw;
  border: 1px solid rgba(49, 71, 94, .42);
  border-radius: 999px;
  background: rgba(244, 230, 199, .92);
  color: #29435f;
  box-shadow: 0 .22cqw .38cqw rgba(31, 25, 19, .18);
  font: 600 .74cqw/1.1 Georgia, "Times New Roman", serif;
  letter-spacing: .02em;
  cursor: pointer;
}

.layout-test-controls button:hover,
.layout-test-controls button:focus-visible {
  background: #fff5d9;
  outline: 2px solid rgba(38, 74, 116, .42);
  outline-offset: 2px;
}

.book-composite.is-layout-editing [data-layout-editor-layer] {
  cursor: move !important;
  outline: 1px dashed rgba(30, 92, 145, .62);
  outline-offset: .18cqw;
  pointer-events: auto !important;
  touch-action: none;
}

.book-composite.is-layout-editing [data-layout-editor-layer].is-layout-dragging,
.book-composite.is-layout-editing [data-layout-editor-layer].is-layout-rotating,
.book-composite.is-layout-editing [data-layout-editor-layer].is-layout-resizing {
  z-index: 30 !important;
  outline: 2px solid rgba(211, 93, 75, .86);
  transition: none !important;
}

.book-composite.is-layout-editing [data-layout-editor-layer].is-layout-dragging {
  cursor: grabbing !important;
}

.layout-rotate-handle {
  display: none;
  position: absolute;
  z-index: 50;
  top: -.72cqw;
  right: -.72cqw;
  width: 1.18cqw;
  height: 1.18cqw;
  border: .12cqw solid rgba(255, 250, 232, .96);
  border-radius: 50%;
  background: #315d86;
  box-shadow: 0 .12cqw .28cqw rgba(30, 28, 25, .35);
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
}

.layout-rotate-handle::before {
  content: "↻";
  position: absolute;
  inset: 0;
  color: #fff9e8;
  font: 700 .86cqw/1.05 Georgia, serif;
  text-align: center;
}

.book-composite.is-layout-editing .layout-rotate-handle {
  display: block;
}

.book-composite.is-layout-editing .layout-rotate-handle:active {
  cursor: grabbing;
  background: #bf5f50;
}

.layout-resize-handle {
  display: none;
  position: absolute;
  z-index: 50;
  right: -.72cqw;
  bottom: -.72cqw;
  width: 1.18cqw;
  height: 1.18cqw;
  border: .12cqw solid rgba(255, 250, 232, .96);
  border-radius: 50%;
  background: #4f8a72;
  box-shadow: 0 .12cqw .28cqw rgba(30, 28, 25, .35);
  cursor: nwse-resize;
  pointer-events: auto;
  touch-action: none;
}

.layout-resize-handle::before {
  content: "↘";
  position: absolute;
  inset: 0;
  color: #fff9e8;
  font: 700 .78cqw/1.08 Georgia, serif;
  text-align: center;
}

.book-composite.is-layout-editing .layout-resize-handle {
  display: block;
}

.book-composite.is-layout-editing .layout-resize-handle:active {
  background: #bf5f50;
}

.layout-text-handle {
  display: none;
  position: absolute;
  z-index: 51;
  top: -.72cqw;
  left: -.72cqw;
  width: 1.18cqw;
  height: 1.18cqw;
  border: .12cqw solid rgba(255, 250, 232, .96);
  border-radius: 50%;
  background: #8a5c3d;
  color: #fff9e8;
  box-shadow: 0 .12cqw .28cqw rgba(30, 28, 25, .35);
  font: 700 .76cqw/1 Georgia, serif;
  text-align: center;
  cursor: text;
  pointer-events: auto;
  touch-action: none;
}

.book-composite.is-layout-editing .scene-spread-line .layout-text-handle {
  display: grid;
  place-items: center;
}

.book-composite.is-layout-editing .looks-thread-caption .layout-text-handle {
  display: grid;
  place-items: center;
}

.book-composite.is-layout-editing :is(.credits-main-copy, .credits-footnote) .layout-text-handle {
  display: grid;
  place-items: center;
}

.book-composite.is-layout-editing .scene-spread-line.is-text-editing {
  cursor: text !important;
  outline: 2px dashed rgba(138, 92, 61, .9);
  background: rgba(255, 248, 226, .72);
  user-select: text;
}

.book-composite.is-layout-editing .looks-thread-caption.is-text-editing {
  cursor: text !important;
  outline: 2px dashed rgba(138, 92, 61, .9);
  background: rgba(255, 248, 226, .72);
  user-select: text;
}

.book-composite.is-layout-editing :is(.credits-main-copy, .credits-footnote).is-text-editing {
  cursor: text !important;
  outline: 2px dashed rgba(138, 92, 61, .9);
  background: rgba(255, 248, 226, .72);
  user-select: text;
}

.book-composite.is-layout-editing .worlds-polaroids button:hover,
.book-composite.is-layout-editing .worlds-polaroids button:focus-visible {
  filter: drop-shadow(0 .7cqw .55cqw rgba(34, 25, 17, .28));
  transform: translate(var(--polaroid-x), var(--polaroid-y)) rotate(var(--polaroid-tilt));
}

.worlds-polaroids button:hover,
.worlds-polaroids button:focus-visible {
  z-index: 5;
  filter: drop-shadow(0 .7cqw .55cqw rgba(34, 25, 17, .28));
  outline: none;
  transform: translate(var(--polaroid-x), var(--polaroid-y)) rotate(0deg) scale(1.16);
}

.worlds-polaroids img {
  display: block;
  width: 100%;
  pointer-events: none;
}

.worlds-polaroids button:nth-child(1) { --polaroid-tilt: -5deg; --polaroid-x: 60px; --polaroid-y: 20px; left: 1.7%; top: 54.5%; }
.worlds-polaroids button:nth-child(2) { --polaroid-tilt: 2.4deg; --polaroid-x: 0px; --polaroid-y: 0px; left: 16.2%; top: 57%; }
.worlds-polaroids button:nth-child(3) { --polaroid-tilt: 4.2deg; --polaroid-x: 40px; --polaroid-y: 15px; left: 29.5%; top: 66%; }
.worlds-polaroids button:nth-child(4) { --polaroid-tilt: -4.3deg; --polaroid-x: 20px; --polaroid-y: 8px; left: 35.4%; top: 33%; }
.worlds-polaroids button:nth-child(5) { --polaroid-tilt: 1.4deg; --polaroid-x: 0px; --polaroid-y: 0px; left: 57.5%; top: 0%; }
.worlds-polaroids button:nth-child(6) { --polaroid-tilt: 4deg; --polaroid-x: -75px; --polaroid-y: 45px; left: 86%; top: 2.5%; }
.worlds-polaroids button:nth-child(7) { --polaroid-tilt: 3.5deg; --polaroid-x: 0px; --polaroid-y: 0px; left: 84.7%; top: 39%; }
.worlds-polaroids button:nth-child(8) { --polaroid-tilt: 4.2deg; --polaroid-x: 0px; --polaroid-y: 0px; left: 65.3%; top: 45.5%; }
.worlds-polaroids button:nth-child(9) { --polaroid-tilt: -2deg; --polaroid-x: 0px; --polaroid-y: 0px; left: 58.2%; top: 71%; }
.worlds-polaroids button:nth-child(10) { --polaroid-tilt: 2.4deg; --polaroid-x: -60px; --polaroid-y: 5px; left: 85.5%; top: 69%; }

.spark-origin-copy,
.spark-question-copy,
.spark-answer-copy,
.spark-route-lead {
  position: absolute;
  margin: 0;
}

.spark-origin-copy {
  left: 16%;
  top: 38.1%;
  width: 31.5%;
  font-size: 1.38cqw;
  line-height: 1.42;
}

.spark-origin-copy p,
.spark-question-copy p,
.spark-answer-copy p,
.spark-route-lead p {
  margin: 0;
}

.spark-question-copy,
.spark-answer-copy {
  width: 20.5%;
  color: #34444f;
  font-size: 1.5cqw;
  line-height: 1.38;
  text-wrap: pretty;
}

.spark-question-copy {
  left: 65.8%;
  top: 18.8%;
  transform: rotate(-.85deg);
  transform-origin: 0 0;
}

.spark-answer-copy {
  left: 70.4%;
  top: 58.4%;
  width: 21%;
  transform: rotate(4.4deg);
  transform-origin: 0 0;
}

.spark-question-copy strong,
.spark-answer-copy strong {
  display: block;
  margin-bottom: .2em;
  color: var(--indigo);
  font-size: 1.14em;
  font-weight: 600;
}

.spark-answer-copy strong { color: var(--coral); }

.spark-stanza {
  display: block;
}

.spark-stanza + .spark-stanza {
  margin-top: 1.15em;
  margin-left: 8%;
}

.spark-emphasis {
  color: var(--indigo);
  font-weight: 600;
}

.spark-route-lead {
  left: 15.9%;
  top: 15.5%;
  width: 34%;
  color: var(--indigo);
  font-size: 1.62cqw;
  line-height: 1.38;
  text-wrap: balance;
  transform: rotate(-.45deg);
}

html[lang="zh"] .spark-origin-copy { line-height: 1.5; }
html[lang="zh"] .spark-question-copy,
html[lang="zh"] .spark-answer-copy { line-height: 1.48; }
html[lang="zh"] .spark-route-lead {
  line-height: 1.42;
}

.contents-page,
.dedication-page {
  position: relative;
  min-width: 0;
  padding: 9% 12% 8%;
}

.contents-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 8% 12% 10%;
}

.contents-page h2 {
  width: 100%;
  margin: 0;
  color: var(--indigo);
  font-size: 2.85cqw;
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.035em;
  text-align: center;
  transform: rotate(-1.2deg);
}

.contents-page h2::after {
  content: "";
  display: block;
  width: 70%;
  height: .12em;
  margin: .12em auto 0;
  border-radius: 50%;
  background: var(--indigo);
  opacity: .88;
  transform: rotate(-1deg) skewX(-13deg);
}

/* The English chapter title is painted directly into the approved spread art. */
.book-composite.has-baked-second-title .contents-page h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.book-composite.has-baked-second-title .contents-kicker {
  margin-top: 0;
}

.book-composite.has-baked-second-title .contents-page {
  transform: translate(3.5%, 4.5%);
}

html[lang="zh"] .book-composite.has-baked-second-title .contents-page {
  transform: translate(3.5%, 7%);
}

.contents-kicker {
  width: 82%;
  margin: 1.15em 0 .55em;
  color: rgba(59, 69, 77, .72);
  font-size: 1.22cqw;
  letter-spacing: .12em;
  text-align: center;
}

.chapter-list {
  display: grid;
  width: 82%;
  margin: 0 auto;
  gap: .45cqw;
}

.chapter-list button {
  display: grid;
  grid-template-columns: 2.1em minmax(0, 1fr) auto;
  align-items: baseline;
  width: 100%;
  padding: .34em .15em .36em;
  border: 0;
  border-bottom: 1px solid rgba(59, 69, 77, .18);
  color: var(--graphite);
  background: transparent;
  font: inherit;
  font-size: 1.18cqw;
  text-align: left;
  cursor: pointer;
  transform-origin: left center;
  transition: color 160ms ease, transform 160ms ease;
}

.chapter-list button:nth-child(even) { transform: translateX(.45em) rotate(.2deg); }
.chapter-list button:hover,
.chapter-list button:focus-visible {
  color: var(--indigo);
  transform: translateX(.7em) rotate(-.35deg);
  outline: none;
}

.chapter-list span {
  color: var(--coral);
  font-size: .82em;
}

.chapter-list b { font-weight: 400; }

.chapter-list em {
  color: rgba(59, 69, 77, .58);
  font-size: .68em;
  font-style: normal;
  text-align: right;
  white-space: nowrap;
}

.dedication-page {
  display: grid;
  place-items: center;
  padding: 12% 12% 14%;
}

.dedication-page p {
  max-width: 78%;
  margin: 0;
  color: #34444f;
  font-size: 1.72cqw;
  line-height: 1.72;
  text-align: center;
  text-wrap: balance;
  transform: rotate(-.55deg);
}

.dedication-highlight {
  color: var(--indigo);
  /* Never split. It is one phrase, and the whole point of the line.
     A deliberate break puts it here; nothing else may put a break
     inside it. */
  white-space: nowrap;
}

html[lang="zh"] .dedication-page p {
  max-width: 88%;
  line-height: 1.66;
  white-space: nowrap;
}

.journey-plane-link {
  position: absolute;
  z-index: 6;
  left: 65%;
  top: 17.3%;
  width: 6.4%;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform: rotate(-8deg);
  filter: drop-shadow(1px 3px 2px rgba(38, 31, 24, .24));
  animation: journey-plane-ready 3.6s ease-in-out infinite;
}

.journey-plane-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.journey-plane-tip {
  position: absolute;
  left: 52%;
  bottom: 82%;
  min-width: max-content;
  padding: .34em .7em .4em;
  border: 1px solid rgba(29, 67, 119, .32);
  border-radius: 999px;
  color: #173f79;
  background: rgba(245, 226, 190, .96);
  box-shadow: 1px 2px 2px rgba(41, 31, 22, .18);
  font-family: var(--about-handwritten);
  font-size: .92cqw;
  line-height: 1;
  white-space: nowrap;
  opacity: 1;
  transform: translate(-50%, 0) rotate(1deg) scale(1);
  pointer-events: none;
  transition: opacity 160ms ease, transform 180ms ease;
}

.journey-plane-link:hover .journey-plane-tip,
.journey-plane-link:focus-visible .journey-plane-tip {
  opacity: 1;
  transform: translate(-50%, 0) rotate(1deg) scale(1);
}

.journey-plane-link:focus-visible {
  outline: 2px dashed rgba(25, 70, 129, .72);
  outline-offset: 4px;
}

@keyframes journey-plane-ready {
  0%, 100% { transform: translate(0, 0) rotate(-8deg); }
  50% { transform: translate(8%, -7%) rotate(-5deg); }
}

.dedication-mark {
  position: absolute;
  right: 15%;
  bottom: 20%;
  color: var(--brass);
  font-size: 1.7cqw;
  transform: rotate(12deg);
}

.spread-decor {
  z-index: 0;
  transform: scale(.792);
  transform-origin: 50% 50%;
}

.turning-leaf {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 10.4%;
  width: 39.6%;
  height: 79.2%;
  transform-origin: 0 50%;
  transform-style: preserve-3d;
  opacity: 0;
  pointer-events: none;
}

.turning-leaf-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform-style: preserve-3d;
  opacity: 1;
}

.turning-leaf-face img {
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  max-width: none;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.turning-leaf-back > img {
  left: 0;
}

.turning-front-copy {
  position: absolute;
  z-index: 2;
  left: 4cqw;
  top: 22%;
  width: 15.5cqw;
  max-height: 46.7%;
  overflow: hidden;
  color: var(--graphite);
  font-family: var(--about-handwritten);
  font-size: 1.25cqw;
  font-weight: 400;
  line-height: 1.43;
  text-wrap: pretty;
  opacity: 1;
}

.turning-front-copy p {
  margin: 0 0 .72em;
}

.turning-copy-frozen-line {
  position: absolute;
  display: block;
  width: max-content;
  margin: 0;
  white-space: nowrap;
}

.turning-leaf-back {
  transform: rotateY(180deg);
  visibility: hidden;
}

.turning-back-content {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  color: var(--graphite);
  background-image: url("assets/storymode-production/about/spreads/about-blank-placeholder-spread-v1.webp");
  background-size: 200% 100%;
  background-position: left center;
  background-repeat: no-repeat;
  font-family: var(--about-handwritten);
}

.turning-back-content.is-full-spread-copy {
  right: auto;
  width: 200%;
  background-image: none !important;
}

.turning-back-content.is-full-spread-copy .third-spread-content,
.turning-back-content.is-full-spread-copy .fourth-spread-content {
  inset: 0;
}

/* Resting Credits uses outer-book percentages. The duplex back face spans
 * only the inset 79.2% paper rectangle, beginning 10.4% into the book. Map
 * the authored box into that coordinate system once so the moving ink and
 * the resting ink occupy the exact same geometry at leaf touchdown. */
.turning-back-content.is-full-spread-copy .credits-copy {
  left: 3.9141%;       /* (13.5 - 10.4) / 79.2 */
  top: 24.7475%;       /* (30 - 10.4) / 79.2 */
  width: 42.298%;      /* 33.5 / 79.2 */
}

/*
 * The resting Worlds intro is positioned in full-book coordinates while the
 * duplex back face already occupies the book's inner 79.2% paper rectangle.
 * Convert the same geometry once; never let percentage widths reflow on turn.
 */
.turning-back-content.is-full-spread-copy .worlds-intro-copy {
  left: calc(10.8586% + 5px);
  top: calc(36.7424% - 5px);
  width: 21.4646%;
  min-width: 21.4646%;
  max-width: 21.4646%;
}

.turning-back-content.is-full-spread-copy .scene-spread-overlays {
  inset: 0;
}

.turning-front-copy.is-full-spread-copy {
  left: -100%;
  top: 0;
  width: 200%;
  min-width: 200%;
  max-width: 200%;
  height: 100%;
  max-height: none;
  overflow: hidden;
}

.turning-front-copy.is-full-spread-copy .scene-spread-overlays {
  inset: 0;
}

/* The same stretch the back face has always given these two. Without it the
   copy keeps its own book-relative box inside a face that is already the full
   spread, lands at 79.2% of the width it was written for, and rewraps: Spark's
   sticky notes went from three lines to four, mid-turn, and back again on
   landing. Printed ink does not reflow.

   This is why jumping from the contents page looked right and jumping from a
   chapter tab did not. Contents is spread 3, so Spark is reached forward and
   rides the back face, which had the rule. A tab reaches it backward from
   later in the book, putting it on the front face, which did not. The bug was
   never in the jump -- it was in which face the jump happened to use. */
.turning-front-copy.is-full-spread-copy .third-spread-content,
.turning-front-copy.is-full-spread-copy .fourth-spread-content {
  inset: 0;
}

.book-composite.has-baked-second-title .turning-back-content {
  background-image: url("assets/storymode-production/about/spreads/about-second-spread-decor-en-v1.webp");
}

.turning-back-content .contents-page {
  position: absolute;
  inset: 0;
  padding: 8% 12% 10%;
}

.book-composite.is-turning-forward .turning-leaf {
  animation: turn-leaf-forward 900ms cubic-bezier(.48, .02, .2, 1) both;
}

.book-composite.is-turning-back .turning-leaf {
  animation: turn-leaf-back 900ms cubic-bezier(.48, .02, .2, 1) both;
}

.book-composite.is-page-hinting .turning-leaf {
  animation: page-turn-hint 1250ms cubic-bezier(.42, 0, .22, 1) both;
}

/* 02 and 03 are the two printed sides of one sheet. Switch ink sides at 90°. */
.book-composite.is-turning-forward .turning-leaf-front,
.book-composite.is-turning-back .turning-leaf-back {
  animation: hide-duplex-side 1ms linear 449ms both;
}

.book-composite.is-turning-forward .turning-leaf-back,
.book-composite.is-turning-back .turning-leaf-front {
  animation: show-duplex-side 1ms linear 449ms both;
}

.page-copy {
  position: absolute;
  z-index: 2;
  color: var(--graphite);
  font-family: var(--about-handwritten);
  font-weight: 400;
  font-size: 1.25cqw;
  line-height: 1.48;
  text-wrap: pretty;
  filter: url("#none");
}

.page-copy-profile {
  left: 36.2%;
  top: 31.5%;
  width: 12.2%;
  max-height: 29%;
}

.page-copy-story {
  left: 54%;
  top: 27.8%;
  width: 15.5%;
  max-height: 37%;
  line-height: 1.43;
}

.page-copy p { margin: 0 0 .72em; }

.profile-greeting {
  font-size: 1.08em;
  line-height: 1.38;
  text-wrap: balance;
}

.magic-identity {
  display: flex;
  align-items: baseline;
  gap: .34em;
  min-height: 1.8em;
  margin: .9em 0 1em !important;
  color: var(--indigo);
  font-size: 1.18em;
  line-height: 1.25;
  white-space: nowrap;
}

.magic-identity-prefix {
  flex: none;
  opacity: .82;
}

.magic-identity-word {
  display: inline-block;
  min-width: 6.8em;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  filter: blur(.8px);
  transform: translateY(.08em);
  transform-origin: left center;
  text-shadow: 0 0 0 rgba(18, 63, 131, 0);
  transition:
    clip-path 1050ms cubic-bezier(.22, .75, .18, 1),
    opacity 440ms ease,
    filter 520ms ease,
    transform 520ms ease,
    text-shadow 900ms ease;
}

.magic-identity-word.is-writing {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  filter: blur(0);
  transform: translateY(0);
}

.magic-identity-word.is-writing.is-soaking {
  opacity: 0;
  filter: blur(2.2px);
  transform: translateY(.06em) scale(1.018);
  text-shadow: 0 0 7px rgba(18, 63, 131, .5);
  transition-duration: 900ms;
}

.profile-belief {
  font-size: 1em;
  line-height: 1.42;
  text-wrap: balance;
}

.page-copy p::first-line {
  color: #2f3d48;
}

.quick-links {
  position: absolute;
  z-index: 4;
  left: 11.2%;
  top: 65%;
  width: 40.6%;
  height: 24.5%;
  display: grid;
  grid-template-columns: .94fr .96fr 1.16fr;
  align-items: end;
  gap: .8%;
}

.folio-numbers {
  position: absolute;
  z-index: 8;
  inset: 8.8% 19% auto;
  display: flex;
  justify-content: space-between;
  color: rgba(35, 57, 76, .88);
  font-family: var(--about-handwritten);
  font-size: 1.55cqw;
  letter-spacing: .08em;
  pointer-events: none;
}

.page-turn-control {
  position: absolute;
  z-index: 9;
  top: 45%;
  width: 10cqw;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(1px 3px 2px rgba(35, 25, 17, .28));
  transition: transform 180ms ease, filter 180ms ease, opacity 180ms ease;
}

.page-turn-control img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.page-turn-prev {
  left: 5.8%;
  transform: rotate(-2deg) scaleX(-1);
}

.page-turn-next {
  right: 5.8%;
  transform: rotate(2deg);
}

.page-turn-prev:hover:not(:disabled),
.page-turn-prev:focus-visible:not(:disabled) {
  transform: rotate(-6deg) scaleX(-1) scale(1.08);
}

.page-turn-next:hover:not(:disabled),
.page-turn-next:focus-visible:not(:disabled) {
  transform: rotate(6deg) scale(1.08);
}

.page-turn-control:disabled {
  opacity: .22;
  cursor: default;
  filter: grayscale(.25) drop-shadow(1px 2px 1px rgba(35, 25, 17, .16));
}

.paper-card {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  border-radius: 14%;
  transform-origin: 50% 78%;
  filter: drop-shadow(1px 4px 2px rgba(52, 35, 20, .30));
  transition: transform 220ms cubic-bezier(.2, .8, .2, 1), filter 180ms ease;
  outline: none;
}

.paper-card:nth-child(1) { transform: translate(5%, 2.5%) rotate(-3.1deg); }
.paper-card:nth-child(2) { transform: translateY(-4.5%) rotate(1.8deg); }
.paper-card:nth-child(3) { transform: translate(-12%, -7%) rotate(-1.5deg); }

.paper-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.paper-card:nth-child(1):hover,
.paper-card:nth-child(1):focus-visible { transform: translate(5%, 2.5%) rotate(-5.3deg) scale(1.075); }

.paper-card:nth-child(2):hover,
.paper-card:nth-child(2):focus-visible { transform: translateY(-4.5%) rotate(4deg) scale(1.075); }

.paper-card:nth-child(3):hover,
.paper-card:nth-child(3):focus-visible { transform: translate(-12%, -7%) rotate(-3.8deg) scale(1.075); }

.paper-card:hover,
.paper-card:focus-visible {
  filter: drop-shadow(1px 4px 2px rgba(52, 35, 20, .34));
}

.paper-card:active {
  filter: drop-shadow(0 2px 1px rgba(52, 35, 20, .28));
}

.demo-controls {
  position: fixed;
  z-index: 20;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  display: flex;
  gap: 10px;
}

.control-button {
  min-width: 48px;
  min-height: 48px;
  padding: 8px 16px;
  border: 1px solid rgba(215, 185, 126, .72);
  border-radius: 999px;
  color: #f4dfb7;
  background: rgba(15, 36, 64, .88);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .3);
  font: 700 15px/1 system-ui, sans-serif;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease;
}

.control-button:hover,
.control-button:focus-visible {
  transform: translateY(-2px);
  background: #17365d;
  outline: 2px solid rgba(244, 223, 183, .75);
  outline-offset: 2px;
}

.close-button {
  width: 48px;
  padding: 0;
  font-size: 30px;
  font-weight: 400;
}

.demo-caption {
  position: fixed;
  left: 50%;
  bottom: max(8px, env(safe-area-inset-bottom));
  z-index: 20;
  margin: 0;
  transform: translateX(-50%);
  color: rgba(234, 213, 178, .72);
  font: 12px/1.2 system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.demo-toast {
  position: absolute;
  z-index: 10;
  left: 50%;
  bottom: 6%;
  transform: translate(-50%, 10px);
  padding: 9px 16px;
  border: 1px solid rgba(183, 143, 76, .6);
  border-radius: 999px;
  color: #3b352d;
  background: rgba(239, 218, 180, .95);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  font: 600 13px/1.2 system-ui, sans-serif;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.demo-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.demo-toast:has(.demo-toast-action) {
  pointer-events: auto;
}

.demo-toast-action {
  display: inline-block;
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid rgba(83, 65, 42, .28);
  color: #163f65;
  text-decoration: none;
  white-space: nowrap;
}

.demo-toast-action:hover,
.demo-toast-action:focus-visible {
  color: #0d6d86;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes book-arrive {
  from { opacity: 0; transform: translateY(2.6%) scale(.965); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes turn-leaf-forward {
  0% { opacity: 1; transform: perspective(1500px) rotateY(0deg); }
  48% { opacity: 1; transform: perspective(1500px) rotateY(-86deg) skewY(-1deg); filter: brightness(.88); }
  52% { opacity: 1; transform: perspective(1500px) rotateY(-94deg) skewY(1deg); filter: brightness(.9); }
  96% { opacity: 1; transform: perspective(1500px) rotateY(-176deg); }
  100% { opacity: 1; transform: perspective(1500px) rotateY(-180deg); }
}

@keyframes turn-leaf-back {
  0% { opacity: 1; transform: perspective(1500px) rotateY(-180deg); }
  48% { opacity: 1; transform: perspective(1500px) rotateY(-94deg) skewY(1deg); filter: brightness(.9); }
  52% { opacity: 1; transform: perspective(1500px) rotateY(-86deg) skewY(-1deg); filter: brightness(.88); }
  96% { opacity: 1; transform: perspective(1500px) rotateY(-4deg); }
  100% { opacity: 1; transform: perspective(1500px) rotateY(0deg); }
}

@keyframes page-turn-hint {
  0%, 100% {
    opacity: 1;
    transform: perspective(1500px) rotateY(0deg);
    filter: brightness(1) drop-shadow(0 0 0 rgba(38, 28, 18, 0));
  }
  36%, 58% {
    opacity: 1;
    transform: perspective(1500px) rotateY(-24deg) skewY(-.4deg);
    filter: brightness(.95) drop-shadow(-16px 4px 10px rgba(38, 28, 18, .24));
  }
}

@keyframes hide-duplex-side {
  from { visibility: visible; opacity: 1; }
  to { visibility: hidden; opacity: 1; }
}

@keyframes show-duplex-side {
  from { visibility: hidden; opacity: 1; }
  to { visibility: visible; opacity: 1; }
}

@media (max-aspect-ratio: 1 / 1) {
  html,
  body { overflow-x: auto; overflow-y: hidden; }
  .about-demo {
    width: 1124px;
    min-width: 1124px;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 72px 12px 42px;
  }
  .book-stage { width: 1100px; max-width: none; }
  .book-composite { transform: none; }
  .demo-caption { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}

/* A picture that has not arrived yet.

   An <img> carrying only a data-src has no source, and a source-less image
   paints its own alt text as page copy -- which is how "Blank handmade paper
   spread reserved for a future chapter" came to be written across an open book.
   Hiding that text is the part that must never be skipped, so it lives on the
   still class that every waiting picture wears.

   font-size rather than colour alone, because alt text is laid out before it is
   painted: at zero it cannot push the spread around it out of shape either. */
.is-awaiting-art {
  font-size: 0;
  color: transparent;
  background-color: rgba(230, 207, 170, .07);
  border-radius: 6px;
}

/* The moving version, added only to the spread being turned to and the two
   beside it. Every spread in this book sits at inset:0 and is hidden by
   visibility rather than by being anywhere else, so shimmering all of them
   would leave dozens of animations running on paper nobody can see -- frames
   asked for and thrown away, for the whole visit. Three at most, and only where
   someone is waiting on that picture. */
.is-awaiting-art--live {
  background-image: linear-gradient(
    100deg,
    rgba(230, 207, 170, .04) 0%,
    rgba(230, 207, 170, .17) 45%,
    rgba(230, 207, 170, .04) 90%
  );
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: about-art-shimmer 1.5s ease-in-out infinite;
}
@keyframes about-art-shimmer {
  from { background-position: 140% 0; }
  to { background-position: -40% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .is-awaiting-art--live { animation: none; }
}

/* A picture that is not coming. Quiet, not broken: the shimmer would keep
   promising something that will never arrive, and the browser's own broken
   icon announces the failure to the reader in the middle of a page. The paper
   underneath is a better answer than either. */
.is-missing-art {
  font-size: 0;
  color: transparent;
  background: none;
  animation: none;
}