/* Life Chapters: premium storybook shelf with unique, non-repeating media. */
html body .app-shell .map-stage.home-focus #homeJourney .home-section-heading,
html body main.app-shell section.map-stage.home-focus #homeJourney .home-section-heading {
  align-items: end !important;
  margin-bottom: 13px !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .home-section-heading > strong,
html body main.app-shell section.map-stage.home-focus #homeJourney .home-section-heading > strong {
  color: #5e777d !important;
  font-size: 0.72rem !important;
  font-weight: 650 !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-shelf,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-shelf {
  position: relative !important;
  width: 100% !important;
  padding: 0 !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-row,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-row {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(310px, 350px) !important;
  align-items: stretch !important;
  width: 100% !important;
  padding: 4px 2px 16px !important;
  gap: 16px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  scrollbar-width: none !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-row::-webkit-scrollbar,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-row::-webkit-scrollbar {
  display: none !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-card,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-card {
  position: relative !important;
  display: grid !important;
  grid-template-rows: 198px auto !important;
  align-content: start !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  scroll-snap-align: start !important;
  border: 1px solid rgba(20, 89, 94, 0.15) !important;
  border-radius: 8px !important;
  color: #123f4b !important;
  background: #fffdf8 !important;
  box-shadow: 0 14px 32px rgba(8, 66, 72, 0.11) !important;
  transform: translateZ(0) !important;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-card::before,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  z-index: 6 !important;
  width: 3px !important;
  border-radius: 8px 0 0 8px !important;
  background: var(--chapter-accent, #159879) !important;
  opacity: 0.92 !important;
  pointer-events: none !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-card::after,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-card::after {
  display: none !important;
  content: none !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-card:hover,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-card:hover {
  border-color: color-mix(in srgb, var(--chapter-accent, #159879) 36%, rgba(20, 89, 94, 0.16)) !important;
  box-shadow: 0 19px 38px rgba(8, 66, 72, 0.16) !important;
  transform: translateY(-3px) translateZ(0) !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-cover,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-cover {
  position: relative !important;
  width: 100% !important;
  height: 198px !important;
  min-height: 198px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #dcefeb !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-cover > img,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-cover > img {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  filter: saturate(0.96) contrast(1.02) !important;
  transform: scale(1.001) translateZ(0) !important;
  transition: transform 6s ease !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-fallback-art,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-fallback-art {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-content: center !important;
  justify-items: center !important;
  padding: 30px !important;
  gap: 10px !important;
  color: #0d5d64 !important;
  background: color-mix(in srgb, var(--chapter-accent, #159879) 18%, #e2f0ed) !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-fallback-art > strong,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-fallback-art > strong {
  display: grid !important;
  width: 64px !important;
  height: 64px !important;
  place-items: center !important;
  margin: 0 !important;
  border: 1px solid color-mix(in srgb, var(--chapter-accent, #159879) 35%, rgba(255, 255, 255, 0.72)) !important;
  border-radius: 8px !important;
  color: #0d5d64 !important;
  background: rgba(255, 255, 255, 0.48) !important;
  box-shadow: 0 10px 24px rgba(7, 64, 69, 0.1) !important;
  font-size: 1.35rem !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-fallback-art small,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-fallback-art small {
  max-width: 190px !important;
  overflow: hidden !important;
  color: #174d58 !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-card:hover .life-chapter-cover > img,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-card:hover .life-chapter-cover > img {
  transform: scale(1.035) translateZ(0) !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-cover::after,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-cover::after {
  content: "" !important;
  position: absolute !important;
  inset: 38% 0 0 !important;
  z-index: 1 !important;
  background: linear-gradient(180deg, transparent, rgba(2, 31, 38, 0.24) 36%, rgba(2, 31, 38, 0.88)) !important;
  pointer-events: none !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-count-badge,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-count-badge {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  z-index: 4 !important;
  display: inline-flex !important;
  align-items: baseline !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 27px !important;
  margin: 0 !important;
  padding: 5px 9px !important;
  gap: 4px !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: rgba(3, 39, 47, 0.67) !important;
  box-shadow: 0 6px 16px rgba(2, 27, 33, 0.17) !important;
  backdrop-filter: blur(9px) !important;
  -webkit-backdrop-filter: blur(9px) !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-count-badge strong,
html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-count-badge small,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-count-badge strong,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-count-badge small {
  margin: 0 !important;
  color: inherit !important;
  font-size: 0.64rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-cover-caption,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-cover-caption {
  position: absolute !important;
  right: 15px !important;
  bottom: 14px !important;
  left: 17px !important;
  z-index: 3 !important;
  display: grid !important;
  min-width: 0 !important;
  padding: 0 !important;
  gap: 4px !important;
  color: #fff !important;
  text-align: left !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-cover-caption > span,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-cover-caption > span {
  color: rgba(229, 255, 248, 0.88) !important;
  font-size: 0.58rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-cover-caption > strong,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-cover-caption > strong {
  overflow: hidden !important;
  margin: 0 !important;
  color: #fff !important;
  font-size: 1.18rem !important;
  font-weight: 820 !important;
  letter-spacing: 0 !important;
  line-height: 1.08 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-cover-caption > small,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-cover-caption > small {
  overflow: hidden !important;
  color: rgba(244, 253, 255, 0.88) !important;
  font-size: 0.69rem !important;
  font-weight: 650 !important;
  line-height: 1.1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-copy,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-copy {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas:
    "meta"
    "previews"
    "actions" !important;
  align-items: center !important;
  min-width: 0 !important;
  padding: 14px !important;
  gap: 13px 14px !important;
  background: #fffdf8 !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-meta,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-meta {
  grid-area: meta !important;
  display: grid !important;
  min-width: 0 !important;
  gap: 4px !important;
  text-align: left !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-meta > span,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-meta > span {
  overflow: hidden !important;
  color: #174d58 !important;
  font-size: 0.72rem !important;
  font-weight: 780 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-meta > small,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-meta > small {
  overflow: hidden !important;
  color: #71868b !important;
  font-size: 0.64rem !important;
  font-weight: 600 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-preview-block,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-preview-block {
  grid-area: previews !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-width: 0 !important;
  min-height: 35px !important;
  gap: 10px !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-preview-block > small,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-preview-block > small {
  color: #768b8f !important;
  font-size: 0.56rem !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-preview-row,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-preview-row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: auto !important;
  height: 35px !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 5px !important;
  overflow: visible !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-preview,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-preview {
  position: relative !important;
  display: block !important;
  width: 39px !important;
  height: 35px !important;
  min-width: 39px !important;
  min-height: 35px !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(20, 89, 94, 0.17) !important;
  border-radius: 6px !important;
  background: #e2efeb !important;
  box-shadow: 0 4px 10px rgba(5, 57, 67, 0.09) !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-preview img,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-preview img {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-actions,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-actions {
  grid-area: actions !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr) !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 12px 0 0 !important;
  gap: 8px !important;
  border-top: 1px solid rgba(19, 88, 92, 0.1) !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-actions button,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-actions button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 39px !important;
  margin: 0 !important;
  padding: 9px 10px !important;
  border-radius: 7px !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-relive,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-relive {
  border: 1px solid #0d6f6d !important;
  color: #fff !important;
  background: #0d6f6d !important;
  box-shadow: 0 7px 16px rgba(7, 85, 84, 0.18) !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-relive > em,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-relive > em {
  margin-left: 6px !important;
  color: inherit !important;
  font-style: normal !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-open,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-open {
  border: 1px solid rgba(13, 82, 96, 0.17) !important;
  color: #164d59 !important;
  background: #edf6f3 !important;
  box-shadow: none !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-actions button:hover,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-actions button:hover {
  filter: brightness(1.03) !important;
  transform: translateY(-1px) !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-scroll,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-scroll {
  z-index: 8 !important;
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border: 1px solid rgba(255, 255, 255, 0.58) !important;
  border-radius: 50% !important;
  color: #fff !important;
  background: rgba(5, 53, 66, 0.88) !important;
  box-shadow: 0 7px 18px rgba(5, 53, 66, 0.19) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
  html body .app-shell .map-stage.home-focus #homeJourney .home-section-heading,
  html body main.app-shell section.map-stage.home-focus #homeJourney .home-section-heading {
    align-items: center !important;
  }

  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-row,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-row {
    grid-auto-columns: min(84vw, 326px) !important;
    padding: 3px 1px 13px !important;
    gap: 12px !important;
  }

  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-card,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-card {
    grid-template-rows: 184px auto !important;
  }

  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-cover,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-cover {
    height: 184px !important;
    min-height: 184px !important;
  }

  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-copy,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-copy {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 12px !important;
    gap: 11px !important;
  }

  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-preview-block > small,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-preview-block > small {
    display: block !important;
  }

  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-preview,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-preview {
    width: 34px !important;
    height: 32px !important;
    min-width: 34px !important;
    min-height: 32px !important;
  }

  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-actions,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-actions {
    padding-top: 10px !important;
  }

  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-scroll,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-scroll {
    display: none !important;
  }
}

@media (max-width: 410px) {
  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-copy,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-copy {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "meta"
      "previews"
      "actions" !important;
  }

  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-preview-block,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-preview-block {
    justify-content: space-between !important;
  }

  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-preview-row,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-preview-row {
    justify-content: flex-start !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-card,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-card,
  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-cover > img,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-cover > img {
    transition: none !important;
  }
}

/* Life Chapters v3: quieter storybook cards with personal titles and covers. */
html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-row,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-row {
  scroll-padding-inline: 2px !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-card,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-card {
  grid-template-rows: 194px auto !important;
  border-color: color-mix(in srgb, var(--chapter-accent, #159879) 18%, rgba(18, 82, 89, 0.1)) !important;
  border-radius: 22px !important;
  background: linear-gradient(155deg, #fffefa, #f4faf7) !important;
  box-shadow:
    0 18px 40px rgba(7, 61, 69, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
  cursor: pointer !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-card::before,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-card::before {
  border-radius: 22px 0 0 22px !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-card:focus-visible,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-card:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--chapter-accent, #159879) 34%, transparent) !important;
  outline-offset: 3px !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-cover,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-cover {
  height: 194px !important;
  min-height: 194px !important;
  border-radius: 21px 21px 0 0 !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-cover > img,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-cover > img {
  object-position: var(--home-photo-position, center 32%) !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-edit,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-edit {
  position: absolute !important;
  top: 12px !important;
  left: 14px !important;
  z-index: 5 !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 6px 10px !important;
  gap: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.42) !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: rgba(3, 39, 47, 0.66) !important;
  box-shadow: 0 7px 17px rgba(2, 27, 33, 0.17) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  font-size: 0.62rem !important;
  font-weight: 820 !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-edit svg,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-edit svg {
  width: 13px !important;
  height: 13px !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-copy,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-copy {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas:
    "story"
    "facts"
    "actions" !important;
  padding: 16px !important;
  gap: 10px !important;
  background: transparent !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-facts,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-facts {
  grid-area: facts !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  min-width: 0 !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-facts > span,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-facts > span {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 4px !important;
  min-height: 30px !important;
  padding: 7px 10px !important;
  border: 1px solid color-mix(in srgb, var(--chapter-accent, #159879) 13%, rgba(16, 77, 84, 0.08)) !important;
  border-radius: 999px !important;
  color: #315f67 !important;
  background: color-mix(in srgb, var(--chapter-accent, #159879) 7%, #f8fcfa) !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-facts > span.is-favorite,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-facts > span.is-favorite {
  color: #a34e51 !important;
  background: #fff4f1 !important;
  border-color: rgba(205, 90, 86, 0.13) !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-facts strong,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-facts strong {
  color: inherit !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-facts small,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-facts small {
  color: inherit !important;
  font-size: 0.61rem !important;
  font-weight: 760 !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-moment-count,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-moment-count {
  grid-area: auto !important;
  display: inline-flex !important;
  align-items: baseline !important;
  justify-self: start !important;
  width: fit-content !important;
  min-height: 0 !important;
  margin: 0 !important;
  gap: 4px !important;
  border: 1px solid color-mix(in srgb, var(--chapter-accent, #159879) 13%, rgba(16, 77, 84, 0.08)) !important;
  color: color-mix(in srgb, var(--chapter-accent, #159879) 74%, #174f59) !important;
  background: color-mix(in srgb, var(--chapter-accent, #159879) 7%, #f8fcfa) !important;
  box-shadow: none !important;
  line-height: 1 !important;
  text-align: left !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-moment-count::before,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-moment-count::before {
  width: 5px !important;
  height: 5px !important;
  flex: 0 0 5px !important;
  content: "" !important;
  border-radius: 50% !important;
  background: var(--chapter-accent, #159879) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--chapter-accent, #159879) 13%, transparent) !important;
  transform: translateY(-1px) !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-moment-count > strong,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-moment-count > strong {
  color: inherit !important;
  font-size: 0.8rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-moment-count > small,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-moment-count > small {
  color: #678186 !important;
  font-size: 0.64rem !important;
  font-weight: 760 !important;
  line-height: 1 !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-story-summary,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-story-summary {
  grid-area: story !important;
  display: -webkit-box !important;
  min-height: 3.9em !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: #244f59 !important;
  font-size: 0.79rem !important;
  font-weight: 640 !important;
  line-height: 1.48 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-meta,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-meta,
html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-preview-block,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-preview-block,
html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-open,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-open {
  display: none !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-actions,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-actions {
  grid-template-columns: minmax(0, 1fr) !important;
  padding-top: 11px !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-actions .life-chapter-relive,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-actions .life-chapter-relive {
  min-height: 44px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #0a5965, color-mix(in srgb, var(--chapter-accent, #159879) 78%, #0c7b76)) !important;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--chapter-accent, #159879) 20%, transparent) !important;
  font-size: 0.75rem !important;
}

html body .app-shell .life-chapter-editor-dialog {
  width: min(520px, calc(100vw - 28px)) !important;
  max-width: 520px !important;
  max-height: min(82dvh, 720px) !important;
  margin: auto !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 26px !important;
  color: #123f4b !important;
  background: transparent !important;
  box-shadow: 0 36px 90px rgba(2, 25, 38, 0.34) !important;
}

html body .app-shell .life-chapter-editor-dialog::backdrop {
  background: rgba(3, 25, 37, 0.62) !important;
  backdrop-filter: blur(7px) !important;
  -webkit-backdrop-filter: blur(7px) !important;
}

html body .app-shell .life-chapter-editor-panel {
  display: grid !important;
  width: 100% !important;
  max-height: min(82dvh, 720px) !important;
  padding: 20px !important;
  gap: 18px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border: 1px solid rgba(220, 255, 246, 0.72) !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(134, 239, 205, 0.2), transparent 34%),
    linear-gradient(150deg, #fffefa, #eef8f5) !important;
}

html body .app-shell .life-chapter-editor-panel > header {
  display: flex !important;
  align-items: start !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

html body .app-shell .life-chapter-editor-panel > header > div {
  display: grid !important;
  gap: 4px !important;
}

html body .app-shell .life-chapter-editor-panel > header span {
  color: #438083 !important;
  font-size: 0.68rem !important;
  font-weight: 820 !important;
}

html body .app-shell .life-chapter-editor-panel h2 {
  margin: 0 !important;
  color: #0b4854 !important;
  font-size: 1.4rem !important;
  line-height: 1.1 !important;
}

html body .app-shell .life-chapter-editor-close {
  display: grid !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid rgba(16, 91, 96, 0.12) !important;
  border-radius: 50% !important;
  color: #174f5a !important;
  background: rgba(255, 255, 255, 0.66) !important;
}

html body .app-shell .life-chapter-title-field,
html body .app-shell .life-chapter-cover-field {
  display: grid !important;
  gap: 8px !important;
  color: #2c5d64 !important;
  font-size: 0.72rem !important;
  font-weight: 820 !important;
}

html body .app-shell .life-chapter-title-field input {
  width: 100% !important;
  min-height: 48px !important;
  padding: 11px 13px !important;
  border: 1px solid rgba(17, 101, 103, 0.17) !important;
  border-radius: 15px !important;
  color: #103f49 !important;
  background: rgba(255, 255, 255, 0.82) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
  font-size: 0.96rem !important;
  font-weight: 760 !important;
}

html body .app-shell .life-chapter-cover-field > div:first-child {
  display: grid !important;
  gap: 3px !important;
}

html body .app-shell .life-chapter-cover-field small {
  color: #788e92 !important;
  font-size: 0.68rem !important;
  font-weight: 620 !important;
}

html body .app-shell .life-chapter-cover-picker {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: 82px !important;
  width: 100% !important;
  padding: 3px 3px 9px !important;
  gap: 9px !important;
  overflow-x: auto !important;
  scroll-snap-type: x proximity !important;
  scrollbar-width: none !important;
}

html body .app-shell .life-chapter-cover-picker::-webkit-scrollbar {
  display: none !important;
}

html body .app-shell .life-chapter-cover-option {
  position: relative !important;
  display: grid !important;
  width: 82px !important;
  height: 82px !important;
  place-items: center !important;
  padding: 0 !important;
  overflow: hidden !important;
  scroll-snap-align: start !important;
  border: 2px solid transparent !important;
  border-radius: 16px !important;
  color: #1b5a64 !important;
  background: #e4f2ee !important;
  box-shadow: 0 7px 16px rgba(8, 65, 70, 0.09) !important;
}

html body .app-shell .life-chapter-cover-option.selected {
  border-color: #138878 !important;
  box-shadow: 0 0 0 3px rgba(19, 136, 120, 0.15), 0 9px 20px rgba(8, 65, 70, 0.13) !important;
}

html body .app-shell .life-chapter-cover-option img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: var(--home-photo-position, center 32%) !important;
}

html body .app-shell .life-chapter-cover-option.automatic {
  align-content: center !important;
  gap: 6px !important;
  padding: 8px !important;
  background: linear-gradient(145deg, #f7fffb, #dcefeb) !important;
}

html body .app-shell .life-chapter-cover-option.automatic svg {
  width: 20px !important;
  height: 20px !important;
}

html body .app-shell .life-chapter-cover-option.automatic strong {
  font-size: 0.62rem !important;
}

html body .app-shell .life-chapter-editor-panel > footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-top: 4px !important;
  gap: 10px !important;
}

html body .app-shell .life-chapter-editor-panel > footer > span {
  display: flex !important;
  gap: 8px !important;
}

html body .app-shell .life-chapter-editor-panel > footer button {
  min-height: 42px !important;
  padding: 9px 14px !important;
  border-radius: 999px !important;
  font-size: 0.72rem !important;
  font-weight: 820 !important;
}

html body .app-shell .life-chapter-editor-reset,
html body .app-shell .life-chapter-editor-cancel {
  border: 1px solid rgba(16, 91, 96, 0.13) !important;
  color: #275e66 !important;
  background: rgba(255, 255, 255, 0.64) !important;
}

html body .app-shell .life-chapter-editor-save {
  border: 1px solid #0b756d !important;
  color: #fff !important;
  background: linear-gradient(135deg, #0b5965, #138d73) !important;
  box-shadow: 0 10px 22px rgba(8, 101, 91, 0.18) !important;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-row,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-row {
    grid-auto-columns: min(88vw, 340px) !important;
    padding: 3px 12vw 14px 1px !important;
    scroll-padding-inline: 1px !important;
  }

  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-card,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-card {
    grid-template-rows: 190px auto !important;
    border-radius: 22px !important;
  }

  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-cover,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-cover {
    height: 190px !important;
    min-height: 190px !important;
  }

  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-story-summary,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-story-summary {
    min-height: 3.7em !important;
    font-size: 0.76rem !important;
    -webkit-line-clamp: 3 !important;
  }

  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-copy,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-copy {
    padding: 15px !important;
    gap: 9px !important;
  }

  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-facts,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-facts {
    gap: 6px !important;
  }

  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-facts > span,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-facts > span {
    min-height: 29px !important;
    padding: 6px 9px !important;
  }

  html body .app-shell .life-chapter-editor-dialog {
    width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 28px) !important;
  }

  html body .app-shell .life-chapter-editor-panel {
    max-height: calc(100dvh - 28px) !important;
    padding: 17px !important;
    border-radius: 23px !important;
  }

  html body .app-shell .life-chapter-editor-panel > footer {
    align-items: stretch !important;
    flex-direction: column-reverse !important;
  }

  html body .app-shell .life-chapter-editor-panel > footer > span {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) !important;
  }

  html body .app-shell .life-chapter-editor-reset {
    align-self: center !important;
  }
}

/* Build 631: the label and arrow form one centered Relive unit. */
html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-actions .life-chapter-relive,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-actions .life-chapter-relive {
  gap: 7px !important;
  text-align: center !important;
  white-space: nowrap !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-actions .life-chapter-relive > em,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-actions .life-chapter-relive > em {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  flex: 0 0 16px !important;
  width: 16px !important;
  height: 16px !important;
  margin-left: 0 !important;
  line-height: 1 !important;
}

/* Build 632: curated storybook cards use a factual cover caption, compact
   chapter facts, and one clear Open chapter action. */
html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-copy,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-copy {
  grid-template-rows: auto auto !important;
  grid-template-areas:
    "facts"
    "actions" !important;
  padding: 15px 16px 16px !important;
  gap: 11px !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-story-summary,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-story-summary {
  display: none !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-facts,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-facts {
  justify-content: flex-start !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-actions,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-actions {
  margin-top: 1px !important;
  padding-top: 11px !important;
  border-top: 1px solid color-mix(in srgb, var(--chapter-accent, #159879) 12%, rgba(18, 82, 89, 0.08)) !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-actions .life-chapter-relive,
html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-actions .life-chapter-relive {
  min-height: 45px !important;
  font-size: 0.78rem !important;
  font-weight: 860 !important;
  letter-spacing: 0.005em !important;
}