html.embed-mode,
html.embed-mode body {
  width: 100%;
  height: 100%;
  min-height: 100%;
}

.embed-mode body {
  overflow: hidden !important;
}

.embed-mode .module-header,
.embed-mode .page-head {
  display: none !important;
}

.embed-mode .module-stage {
  margin-top: 0 !important;
}

.embed-mode.embed-paused *,
.embed-mode.embed-paused *::before,
.embed-mode.embed-paused *::after {
  animation-play-state: paused !important;
}

/* Curiosity keeps its hand-painted galaxy, without the duplicate page shell. */
.embed-mode .layout,
.embed-mode .content {
  width: 100% !important;
  height: 100dvh !important;
  min-height: 0 !important;
}

.embed-mode .content {
  padding: 0 !important;
}

.embed-mode .galaxy-stage {
  width: 100% !important;
  height: 100dvh !important;
  min-height: 0 !important;
  margin: 0 !important;
}

/* Soundtrack shows the shelf as the scene, while the player remains reachable. */
.embed-mode .soundtrack-page,
.embed-mode .room-shell,
.embed-mode #shelfView {
  min-height: 100dvh !important;
}

.embed-mode .room-shell {
  width: 100% !important;
  padding: 0 clamp(20px, 4vw, 54px) !important;
  display: grid;
  place-items: center;
}

.embed-mode #shelfView,
.embed-mode .shelf-stage {
  width: 100%;
}

/* The memory book receives the full constrained stage. */
.embed-mode .journal-stage {
  width: 100% !important;
  min-height: 100dvh !important;
  padding: clamp(14px, 2vh, 28px) clamp(14px, 2vw, 28px) !important;
}

/* Home allocates a narrower book column than the standalone reader. Keep the
   two-page spread proportional to its column and let every page use the same
   internal coordinate system. */
@media (min-width: 621px) {
  .embed-mode {
    --open-book-scale: 1;
  }

  .embed-mode .book-spread.memory-spread {
    width: min(100%, 124dvh, 920px);
    height: auto;
    min-height: 0;
    aspect-ratio: 1.3;
    grid-template-columns: 1fr 1fr;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
  }

  .embed-mode .book-spread.memory-spread > .page {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100%;
    overflow: hidden;
    padding: clamp(18px, 2.4vw, 28px) !important;
  }

  .embed-mode .memory-spread .entry-foot {
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 3.5%;
    margin: 0;
  }

  .embed-mode .memory-spread figure,
  .embed-mode .memory-spread img {
    max-width: 100%;
  }

  .embed-mode .memory-spread img {
    height: auto;
    object-fit: cover;
  }

  .embed-mode .memory02-photo-card,
  .embed-mode .memory02-scene-photo,
  .embed-mode .memory02-left-final-photo,
  .embed-mode .memory03-left-photo,
  .embed-mode .memory03-secondary-photo,
  .embed-mode .memory04-sea-photo,
  .embed-mode .memory04-everyday-photo,
  .embed-mode .memory04-now-photo,
  .embed-mode .memory05-cloud {
    overflow: hidden;
  }

  .embed-mode .memory02-photo-card { aspect-ratio: 1.45; }
  .embed-mode .memory02-scene-photo { aspect-ratio: 1.18; }
  .embed-mode .memory02-left-final-photo { aspect-ratio: 1.45; }
  .embed-mode .memory03-left-photo { aspect-ratio: 1.42; }
  .embed-mode .memory03-secondary-photo { aspect-ratio: 1.1; }
  .embed-mode .memory04-sea-photo { aspect-ratio: 1.7; }
  .embed-mode .memory04-everyday-photo,
  .embed-mode .memory04-now-photo { aspect-ratio: 1.05; }
  .embed-mode .memory05-cloud { aspect-ratio: 1.35; }

  .embed-mode .memory02-photo-card img,
  .embed-mode .memory02-scene-photo img,
  .embed-mode .memory02-left-final-photo img,
  .embed-mode .memory03-left-photo img,
  .embed-mode .memory03-secondary-photo img,
  .embed-mode .memory04-sea-photo img,
  .embed-mode .memory04-everyday-photo img,
  .embed-mode .memory04-now-photo img,
  .embed-mode .memory05-cloud img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Keep typography at the page's native scale; the outer spread is the only
     element that should be resized for the Home frame. */
  .embed-mode .memory02-left-photos { gap: 6px; }
  .embed-mode .memory02-left-final-photo { display: none; }

  /* Dense chapters keep their own content hierarchy, but never scale a child
     independently from the page around it. */

  .embed-mode .memory-shanghai .photo-collage {
    height: 650px;
    margin-top: .9rem;
  }

  .embed-mode .memory-shanghai > .page {
    padding: 30px 34px 28px !important;
  }

  .embed-mode .memory-shanghai h1 {
    margin-top: .65rem;
    font-size: 2.2rem;
    line-height: 1.04;
  }

  .embed-mode .memory-shanghai .moment-place {
    font-size: .9rem;
  }

  .embed-mode .memory-shanghai .entry-layout {
    grid-template-columns: minmax(0, 1.15fr) minmax(132px, .85fr);
    gap: 22px;
    margin-top: 1.2rem;
  }

  .embed-mode .memory-shanghai .story-copy {
    font-size: .82rem;
    line-height: 1.58;
  }

  .embed-mode .memory-shanghai .story-copy p + p {
    margin-top: .62rem;
  }

  .embed-mode .memory-shanghai .note + .note {
    margin-top: .85rem;
  }

  .embed-mode .memory-shanghai .note h2 {
    font-size: .96rem;
  }

  .embed-mode .memory-shanghai .note p {
    font-size: .79rem;
    line-height: 1.5;
  }

  .embed-mode .memory-shanghai .photo-page-head h2 {
    font-size: 1.25rem;
  }

  .embed-mode .memory-shanghai .photo-page-head p {
    font-size: .88rem;
  }
  .embed-mode .memory02-photo-card,
  .embed-mode .memory02-scene-photo,
  .embed-mode .memory03-left-photo,
  .embed-mode .memory03-secondary-photo,
  .embed-mode .memory04-sea-photo,
  .embed-mode .memory04-now-photo,
  .embed-mode .memory05-cloud { padding: 4px 4px 16px; }
  .embed-mode .memory02-photo-card.ticket img { max-height: 72px; }
  .embed-mode .memory02-photo-card.campus img { max-height: 96px; }
  .embed-mode .memory02-scene.plane-trees img { max-height: 98px; }
  .embed-mode .memory02-scene.music img { max-height: 72px; }
  .embed-mode .memory02-scene.closing img { max-height: 84px; }
  .embed-mode .memory03-left-photo { width: 56%; }
  .embed-mode .memory03-secondary-photo { width: 94px; }
  .embed-mode .memory04-sea-photo { width: 58%; max-width: 220px; margin-top: .8rem; }
  .embed-mode .memory04-now-photo { width: 86px; }
  .embed-mode .memory05-cloud { width: min(100%, 190px); }
  .embed-mode .memory04-core { margin-top: .7rem; padding-top: .58rem; }
  .embed-mode .memory04-core-en { font-size: .88rem; }
  .embed-mode .memory04-core-cn { font-size: .76rem; }
  .embed-mode .memory05-note { margin-top: .7rem; font-size: .76rem; line-height: 1.45; }

  .embed-mode .memory02-left-flow {
    grid-template-columns: minmax(0, 1.12fr) minmax(92px, .88fr);
    gap: 12px;
  }

  .embed-mode .memory02-left-final-photo {
    position: absolute;
    left: 8%;
    bottom: 15%;
    width: min(100%, 220px);
    margin: 0;
  }

  .embed-mode .memory02-scene {
    grid-template-columns: minmax(92px, .72fr) minmax(0, 1.28fr);
    gap: 10px;
  }

  .embed-mode .memory02-scene.music {
    grid-template-columns: minmax(92px, .78fr) minmax(0, 1.22fr);
  }

  .embed-mode .memory03-photo-note,
  .embed-mode .memory03-final-note,
  .embed-mode .memory04-final-note {
    position: relative;
    inset: auto;
    margin: .7rem 0 0;
    max-width: 100%;
    text-align: left;
  }

  .embed-mode .memory03-accent-photo,
  .embed-mode .memory04-everyday-photo {
    position: relative;
    inset: auto;
    display: inline-block;
    width: min(100%, 94px);
    margin: .8rem .5rem 0 0;
  }

  .embed-mode .memory04-right-grid {
    grid-template-columns: minmax(0, 1fr) minmax(78px, 94px);
    gap: 12px;
  }

  .embed-mode .memory05-cloud {
    width: min(100%, 250px);
  }

  .embed-mode .journal-stage.is-open .book-spread.memory-spread.is-active,
  .embed-mode .journal-stage.is-open .book-spread.memory-spread.is-turning-out,
  .embed-mode .journal-stage.is-open .book-spread.memory-spread.is-entering {
    transform: translate(-50%, -50%) scale(var(--open-book-scale)) rotateX(0);
  }
}

/* The Home iframe uses the same fixed spread as the standalone reader. Its
   script scales the complete book to the available frame without reflowing it. */
.embed-mode .book-spread.memory-spread {
  width: 1040px;
  height: 800px;
  min-height: 800px;
  aspect-ratio: auto;
  grid-template-columns: 1fr 1fr;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
}

.embed-mode .book-spread.memory-spread > .page {
  height: 800px !important;
  min-height: 800px !important;
  max-height: 800px;
  overflow: hidden;
}

@media (max-width: 620px) {
  .embed-mode .journal-stage {
    min-height: 100dvh !important;
    padding: 12px 10px !important;
    overflow: hidden;
  }
}

/* Places uses the whole fluid viewport once its duplicate header is hidden. */
.embed-mode .ring-shell {
  width: 100% !important;
  height: 100dvh !important;
}

/* Leave a Note keeps the board, not the standalone title block. */
.embed-mode .note-page {
  min-height: 100dvh !important;
  padding: clamp(12px, 2vh, 24px) 0 !important;
  display: grid;
  place-items: center;
}

.embed-mode .board-frame {
  width: min(1500px, calc(100% - clamp(24px, 7vw, 96px))) !important;
  margin: 0 auto !important;
}

.embed-mode .board {
  height: min(86dvh, 760px) !important;
  min-height: 0 !important;
}

/* Making is always rendered on one desktop coordinate system in Home. */
.embed-mode .studio-shell {
  width: 1280px !important;
  height: 720px !important;
  min-height: 720px !important;
  padding: 0 !important;
  display: block !important;
  overflow: hidden !important;
}

.embed-mode .studio-stage[data-native-canvas="1672x941"] {
  width: 1280px !important;
  height: 720px !important;
  min-height: 720px !important;
  max-height: none !important;
  aspect-ratio: 16 / 9 !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* Home keeps the studio wall's pinned-photo composition. The standalone
   studio and its embed therefore share one coordinate system. */
.embed-mode .memory-wall {
  inset: 0;
  display: block;
  pointer-events: none;
}

.embed-mode .memory-wall .wall-print {
  position: absolute;
  pointer-events: auto;
}

.embed-mode .memory-wall .wall-print:hover,
.embed-mode .memory-wall .wall-print:focus-visible {
  transform: translateY(-4px) scale(1.015);
}

.embed-mode .object-laptop {
  left: 34.2% !important;
  top: 32.1% !important;
  width: 33.5% !important;
  height: 47% !important;
}

.embed-mode .object-camera {
  left: 70.7% !important;
  top: 57.7% !important;
  width: 13% !important;
  height: 18.5% !important;
}

.embed-mode .object-sketchbook {
  left: 0 !important;
  top: 71% !important;
  width: 38.7% !important;
  height: 25.7% !important;
}

@media (prefers-reduced-motion: reduce) {
  .embed-mode *,
  .embed-mode *::before,
  .embed-mode *::after {
    scroll-behavior: auto !important;
  }
}