/* MyMappi Memory Capsule v5: one continuous keepsake, not nested cards. */

html body .app-shell .memory-bottom-sheet.open,
html body main.app-shell .memory-bottom-sheet.open {
  place-items: center !important;
  padding: clamp(10px, 2.5vw, 26px) !important;
  background: rgba(3, 28, 36, 0.3) !important;
  backdrop-filter: blur(14px) saturate(0.9) !important;
  -webkit-backdrop-filter: blur(14px) saturate(0.9) !important;
}

html body .app-shell .memory-bottom-sheet.open #memorySheetContent,
html body main.app-shell .memory-bottom-sheet.open #memorySheetContent {
  width: min(790px, calc(100vw - 24px)) !important;
  max-width: min(790px, calc(100vw - 24px)) !important;
  max-height: calc(100dvh - 24px) !important;
  overflow: visible !important;
}

html body .app-shell .memory-bottom-sheet.open .memory-sheet-card.full-memory-capsule,
html body main.app-shell .memory-bottom-sheet.open .memory-sheet-card.full-memory-capsule,
html body .app-shell .memory-bottom-sheet.open .memory-sheet-card.memory-capsule-card.full-memory-capsule,
html body main.app-shell .memory-bottom-sheet.open .memory-sheet-card.memory-capsule-card.full-memory-capsule {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 790px !important;
  max-height: calc(100dvh - 24px) !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  contain: none !important;
  border: 1px solid rgba(255, 255, 255, 0.82) !important;
  border-radius: 30px !important;
  color: #073f52 !important;
  background: linear-gradient(180deg, #fffdf8 0%, #f7fbf8 100%) !important;
  box-shadow:
    0 38px 96px rgba(2, 27, 36, 0.32),
    0 12px 28px rgba(6, 68, 73, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(10, 103, 104, 0.22) transparent;
}

html body .app-shell .memory-sheet-card.memory-capsule-card.full-memory-capsule::before,
html body main.app-shell .memory-sheet-card.memory-capsule-card.full-memory-capsule::before,
html body .app-shell .memory-sheet-card.memory-capsule-card.full-memory-capsule::after,
html body main.app-shell .memory-sheet-card.memory-capsule-card.full-memory-capsule::after {
  display: none !important;
  content: none !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-visual,
html body main.app-shell .full-memory-capsule .memory-capsule-visual {
  position: relative !important;
  isolation: isolate !important;
  display: block !important;
  width: 100% !important;
  min-height: clamp(360px, 56vh, 500px) !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 29px 29px 0 0 !important;
  background:
    radial-gradient(circle at 84% 4%, color-mix(in srgb, var(--sheet-accent) 38%, transparent), transparent 38%),
    radial-gradient(circle at 12% 96%, rgba(40, 188, 146, 0.26), transparent 40%),
    linear-gradient(140deg, #073a48, #086366 58%, #0d7d70) !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-cover-media,
html body main.app-shell .full-memory-capsule .memory-capsule-cover-media {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-cover-button,
html body main.app-shell .full-memory-capsule .memory-capsule-cover-button {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #dcece8 !important;
  box-shadow: none !important;
  cursor: zoom-in !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-cover-button > img,
html body main.app-shell .full-memory-capsule .memory-capsule-cover-button > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: var(--home-photo-position, center 32%) !important;
  filter: saturate(0.96) contrast(1.01) !important;
  transition: transform 420ms ease, filter 260ms ease !important;
}

@media (hover: hover) {
  html body .app-shell .full-memory-capsule .memory-capsule-cover-button:hover > img,
  html body main.app-shell .full-memory-capsule .memory-capsule-cover-button:hover > img {
    filter: saturate(1.01) contrast(1.025) !important;
    transform: scale(1.018) !important;
  }
}

html body .app-shell .full-memory-capsule .memory-capsule-cover-placeholder,
html body main.app-shell .full-memory-capsule .memory-capsule-cover-placeholder {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--sheet-accent) 34%, transparent), transparent 28%),
    linear-gradient(145deg, #063744, #086166 58%, #0a776d) !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-cover-placeholder > span,
html body main.app-shell .full-memory-capsule .memory-capsule-cover-placeholder > span {
  color: rgba(255, 255, 255, 0.22) !important;
  font-size: clamp(6rem, 20vw, 10rem) !important;
  filter: grayscale(0.15) drop-shadow(0 20px 40px rgba(2, 29, 37, 0.2)) !important;
  transform: translateY(-8px) !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-visual-shade,
html body main.app-shell .full-memory-capsule .memory-capsule-visual-shade {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background:
    linear-gradient(180deg, rgba(2, 27, 35, 0.34) 0%, rgba(2, 27, 35, 0.03) 32%, rgba(2, 27, 35, 0.13) 54%, rgba(2, 27, 35, 0.88) 100%),
    linear-gradient(90deg, rgba(2, 27, 35, 0.18), transparent 52%) !important;
  pointer-events: none !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-topbar,
html body main.app-shell .full-memory-capsule .memory-capsule-topbar {
  position: absolute !important;
  inset: 0 0 auto !important;
  z-index: 4 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-height: 66px !important;
  margin: 0 !important;
  padding: 14px 16px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-brand,
html body main.app-shell .full-memory-capsule .memory-capsule-brand {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: rgba(255, 255, 255, 0.86) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 0.66rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.1em !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.28) !important;
  text-transform: uppercase !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-top-actions,
html body main.app-shell .full-memory-capsule .memory-capsule-top-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-heart-mark,
html body main.app-shell .full-memory-capsule .memory-capsule-heart-mark,
html body .app-shell .full-memory-capsule .memory-capsule-close,
html body main.app-shell .full-memory-capsule .memory-capsule-close {
  display: grid !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 50% !important;
  color: #ffffff !important;
  background: rgba(3, 31, 40, 0.34) !important;
  box-shadow: 0 8px 22px rgba(2, 21, 29, 0.16) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-heart-mark.is-hearted,
html body main.app-shell .full-memory-capsule .memory-capsule-heart-mark.is-hearted {
  color: #ff8b9e !important;
  border-color: rgba(255, 196, 205, 0.34) !important;
  background: rgba(80, 20, 35, 0.38) !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-close,
html body main.app-shell .full-memory-capsule .memory-capsule-close {
  padding-bottom: 2px !important;
  font-size: 1.3rem !important;
  font-weight: 500 !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-hero,
html body main.app-shell .full-memory-capsule .memory-capsule-hero {
  position: relative !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: flex-end !important;
  width: 100% !important;
  min-height: clamp(360px, 56vh, 500px) !important;
  margin: 0 !important;
  padding: clamp(94px, 14vw, 124px) clamp(22px, 4vw, 34px) clamp(24px, 4vw, 34px) !important;
  gap: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #ffffff !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-title-block,
html body main.app-shell .full-memory-capsule .memory-capsule-title-block {
  display: grid !important;
  width: min(100%, 650px) !important;
  gap: 9px !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-context,
html body main.app-shell .full-memory-capsule .memory-capsule-context {
  color: rgba(240, 255, 250, 0.78) !important;
  font-size: 0.66rem !important;
  font-weight: 820 !important;
  letter-spacing: 0.08em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-title-block h2,
html body main.app-shell .full-memory-capsule .memory-capsule-title-block h2 {
  max-width: 18ch !important;
  margin: 0 !important;
  color: #ffffff !important;
  font-size: clamp(2rem, 5.6vw, 3.7rem) !important;
  font-weight: 880 !important;
  letter-spacing: -0.035em !important;
  line-height: 0.98 !important;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.3) !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-hero-meta,
html body main.app-shell .full-memory-capsule .memory-capsule-hero-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 7px 15px !important;
  margin-top: 2px !important;
  color: rgba(245, 255, 252, 0.84) !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-hero-meta > span,
html body main.app-shell .full-memory-capsule .memory-capsule-hero-meta > span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  font-size: 0.78rem !important;
  font-weight: 720 !important;
  line-height: 1.3 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-hero-meta svg,
html body main.app-shell .full-memory-capsule .memory-capsule-hero-meta svg {
  width: 15px !important;
  height: 15px !important;
  flex: 0 0 15px !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-photo-count,
html body main.app-shell .full-memory-capsule .memory-capsule-photo-count {
  position: absolute !important;
  right: 18px !important;
  top: 72px !important;
  bottom: auto !important;
  z-index: 5 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 32px !important;
  padding: 7px 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  background: rgba(3, 31, 40, 0.42) !important;
  box-shadow: 0 8px 22px rgba(2, 21, 29, 0.14) !important;
  font-size: 0.66rem !important;
  font-weight: 820 !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-photo-count svg,
html body main.app-shell .full-memory-capsule .memory-capsule-photo-count svg {
  width: 14px !important;
  height: 14px !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-body,
html body main.app-shell .full-memory-capsule .memory-capsule-body {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
  gap: 0 !important;
  padding: 0 clamp(22px, 4vw, 34px) !important;
  background: transparent !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-video-band,
html body main.app-shell .full-memory-capsule .memory-capsule-video-band {
  width: 100% !important;
  margin: clamp(22px, 3vw, 28px) 0 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 22px !important;
  background: #eaf4f0 !important;
  box-shadow: none !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-video-band .sheet-video-wrap,
html body main.app-shell .full-memory-capsule .memory-capsule-video-band .sheet-video-wrap,
html body .app-shell .full-memory-capsule .memory-capsule-video-band .memory-video-player,
html body main.app-shell .full-memory-capsule .memory-capsule-video-band .memory-video-player {
  margin: 0 !important;
  border: 0 !important;
  border-radius: inherit !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-voice-row,
html body main.app-shell .full-memory-capsule .memory-capsule-voice-row {
  display: grid !important;
  grid-template-columns: minmax(150px, 0.72fr) minmax(210px, 1.28fr) !important;
  align-items: center !important;
  width: 100% !important;
  padding: 19px 2px !important;
  gap: 18px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(7, 63, 82, 0.075) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-voice-heading,
html body main.app-shell .full-memory-capsule .memory-capsule-voice-heading {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  gap: 10px !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-voice-icon,
html body main.app-shell .full-memory-capsule .memory-capsule-voice-icon {
  display: grid !important;
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  place-items: center !important;
  border-radius: 50% !important;
  color: #0d7b78 !important;
  background: rgba(18, 143, 133, 0.09) !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-voice-icon svg,
html body main.app-shell .full-memory-capsule .memory-capsule-voice-icon svg {
  width: 16px !important;
  height: 16px !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-voice-heading > span:last-child,
html body main.app-shell .full-memory-capsule .memory-capsule-voice-heading > span:last-child {
  display: grid !important;
  min-width: 0 !important;
  gap: 3px !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-voice-heading strong,
html body main.app-shell .full-memory-capsule .memory-capsule-voice-heading strong {
  color: #184f59 !important;
  font-size: 0.76rem !important;
  font-weight: 850 !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-voice-heading small,
html body main.app-shell .full-memory-capsule .memory-capsule-voice-heading small {
  color: rgba(7, 63, 82, 0.52) !important;
  font-size: 0.62rem !important;
  font-weight: 680 !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-voice-row audio,
html body main.app-shell .full-memory-capsule .memory-capsule-voice-row audio {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 38px !important;
  border-radius: 999px !important;
  color-scheme: light !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-story,
html body main.app-shell .full-memory-capsule .memory-capsule-story {
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
  padding: clamp(28px, 4vw, 38px) 4px clamp(24px, 3.5vw, 34px) 19px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-story::before,
html body main.app-shell .full-memory-capsule .memory-capsule-story::before {
  position: absolute !important;
  top: clamp(29px, 4vw, 39px) !important;
  bottom: clamp(25px, 3.5vw, 35px) !important;
  left: 0 !important;
  width: 3px !important;
  height: auto !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--sheet-accent) 76%, #18a978), rgba(24, 169, 120, 0.25)) !important;
  content: "" !important;
  opacity: 0.9 !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-story > span,
html body main.app-shell .full-memory-capsule .memory-capsule-story > span {
  color: rgba(7, 63, 82, 0.52) !important;
  font-size: 0.64rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-story p,
html body main.app-shell .full-memory-capsule .memory-capsule-story p {
  max-width: 62ch !important;
  margin: 9px 0 0 !important;
  color: #244850 !important;
  font-size: clamp(0.94rem, 1.7vw, 1.08rem) !important;
  font-weight: 580 !important;
  line-height: 1.68 !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-detail-line,
html body main.app-shell .full-memory-capsule .memory-capsule-detail-line {
  width: 100% !important;
  padding: 14px 2px 18px !important;
  overflow-x: auto !important;
  border-top: 1px solid rgba(7, 63, 82, 0.075) !important;
  color: rgba(7, 63, 82, 0.62) !important;
  background: transparent !important;
  scrollbar-width: none;
}

html body .app-shell .full-memory-capsule .memory-capsule-detail-line::-webkit-scrollbar,
html body main.app-shell .full-memory-capsule .memory-capsule-detail-line::-webkit-scrollbar {
  display: none !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-detail-line > span,
html body main.app-shell .full-memory-capsule .memory-capsule-detail-line > span {
  font-size: 0.72rem !important;
  font-weight: 740 !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-action-dock,
html body main.app-shell .full-memory-capsule .memory-capsule-action-dock {
  position: sticky !important;
  right: auto !important;
  bottom: 0 !important;
  left: auto !important;
  z-index: 12 !important;
  display: grid !important;
  grid-template-columns: minmax(220px, 1.4fr) minmax(88px, 0.55fr) minmax(78px, 0.48fr) 46px !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 12px clamp(16px, 3vw, 24px) max(14px, env(safe-area-inset-bottom)) !important;
  gap: 8px !important;
  overflow: visible !important;
  border: 0 !important;
  border-top: 1px solid rgba(7, 63, 82, 0.085) !important;
  border-radius: 0 !important;
  background: rgba(255, 253, 248, 0.93) !important;
  box-shadow: 0 -10px 28px rgba(7, 63, 82, 0.045) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-direction-actions,
html body main.app-shell .full-memory-capsule .memory-capsule-direction-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 72px !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-dock-action,
html body main.app-shell .full-memory-capsule .memory-capsule-dock-action {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  gap: 7px !important;
  border: 1px solid rgba(7, 63, 82, 0.09) !important;
  border-radius: 15px !important;
  color: #184f59 !important;
  background: rgba(255, 255, 255, 0.66) !important;
  box-shadow: none !important;
  font-size: 0.72rem !important;
  font-weight: 820 !important;
  line-height: 1 !important;
  transform: none !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-dock-action svg,
html body main.app-shell .full-memory-capsule .memory-capsule-dock-action svg {
  width: 17px !important;
  height: 17px !important;
  flex: 0 0 17px !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-direction-primary,
html body main.app-shell .full-memory-capsule .memory-capsule-direction-primary {
  justify-content: flex-start !important;
  min-height: 52px !important;
  padding-inline: 15px !important;
  border-color: rgba(220, 255, 247, 0.22) !important;
  color: #ffffff !important;
  background: linear-gradient(140deg, #128f85, #0f7e88 58%, #0b697f) !important;
  box-shadow:
    0 10px 22px rgba(10, 112, 122, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-direction-primary > span:last-child,
html body main.app-shell .full-memory-capsule .memory-capsule-direction-primary > span:last-child {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
  text-align: left !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-direction-primary strong,
html body main.app-shell .full-memory-capsule .memory-capsule-direction-primary strong {
  color: inherit !important;
  font-size: 0.76rem !important;
  font-weight: 880 !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-direction-primary small,
html body main.app-shell .full-memory-capsule .memory-capsule-direction-primary small {
  color: rgba(239, 255, 251, 0.7) !important;
  font-size: 0.58rem !important;
  font-weight: 720 !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-walk-action,
html body main.app-shell .full-memory-capsule .memory-capsule-walk-action {
  padding-inline: 9px !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-heart-action,
html body main.app-shell .full-memory-capsule .memory-capsule-heart-action,
html body .app-shell .full-memory-capsule .memory-capsule-edit-action,
html body main.app-shell .full-memory-capsule .memory-capsule-edit-action {
  min-height: 48px !important;
  padding-inline: 10px !important;
  border-radius: 15px !important;
  color: #184f59 !important;
  text-align: center !important;
  background: rgba(255, 255, 255, 0.66) !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-heart-icon,
html body main.app-shell .full-memory-capsule .memory-capsule-heart-icon {
  display: grid !important;
  width: auto !important;
  height: auto !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #6e898e !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-heart-action.is-hearted,
html body main.app-shell .full-memory-capsule .memory-capsule-heart-action.is-hearted {
  border-color: rgba(228, 72, 103, 0.18) !important;
  color: #aa304b !important;
  background: rgba(255, 238, 242, 0.76) !important;
  box-shadow: none !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-heart-action.is-hearted .memory-capsule-heart-icon,
html body main.app-shell .full-memory-capsule .memory-capsule-heart-action.is-hearted .memory-capsule-heart-icon {
  color: #e84867 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-more {
  position: relative !important;
  min-width: 0 !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-more-action,
html body main.app-shell .full-memory-capsule .memory-capsule-more-action {
  width: 46px !important;
  min-width: 46px !important;
  padding: 0 !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-more-menu,
html body main.app-shell .full-memory-capsule .memory-capsule-more-menu {
  position: absolute !important;
  right: 0 !important;
  bottom: calc(100% + 10px) !important;
  z-index: 20 !important;
  width: 190px !important;
  padding: 7px !important;
  overflow: hidden !important;
  border: 1px solid rgba(7, 63, 82, 0.11) !important;
  border-radius: 17px !important;
  background: rgba(255, 253, 248, 0.98) !important;
  box-shadow: 0 18px 44px rgba(3, 37, 47, 0.18) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-more-menu[hidden],
html body main.app-shell .full-memory-capsule .memory-capsule-more-menu[hidden] {
  display: none !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-delete-action,
html body main.app-shell .full-memory-capsule .memory-capsule-delete-action {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-height: 44px !important;
  padding: 0 11px !important;
  gap: 9px !important;
  border: 0 !important;
  border-radius: 12px !important;
  color: #a13b43 !important;
  background: rgba(213, 63, 71, 0.065) !important;
  box-shadow: none !important;
  font-size: 0.72rem !important;
  font-weight: 820 !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-heart-confirmation,
html body main.app-shell .full-memory-capsule .memory-capsule-heart-confirmation {
  position: absolute !important;
  right: clamp(16px, 3vw, 24px) !important;
  bottom: calc(100% + 8px) !important;
  z-index: 22 !important;
}

@media (hover: hover) {
  html body .app-shell .full-memory-capsule .memory-capsule-dock-action:hover,
  html body main.app-shell .full-memory-capsule .memory-capsule-dock-action:hover,
  html body .app-shell .full-memory-capsule .memory-capsule-delete-action:hover,
  html body main.app-shell .full-memory-capsule .memory-capsule-delete-action:hover {
    filter: brightness(1.02) !important;
    transform: translateY(-1px) !important;
  }
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
  html body .app-shell .memory-bottom-sheet.open,
  html body main.app-shell .memory-bottom-sheet.open {
    place-items: end center !important;
    padding: max(7px, env(safe-area-inset-top)) 7px max(7px, env(safe-area-inset-bottom)) !important;
  }

  html body .app-shell .memory-bottom-sheet.open #memorySheetContent,
  html body main.app-shell .memory-bottom-sheet.open #memorySheetContent {
    width: 100% !important;
    max-width: none !important;
    max-height: calc(100dvh - max(14px, env(safe-area-inset-top)) - max(14px, env(safe-area-inset-bottom))) !important;
  }

  html body .app-shell .memory-bottom-sheet.open .memory-sheet-card.full-memory-capsule,
  html body main.app-shell .memory-bottom-sheet.open .memory-sheet-card.full-memory-capsule,
  html body .app-shell .memory-bottom-sheet.open .memory-sheet-card.memory-capsule-card.full-memory-capsule,
  html body main.app-shell .memory-bottom-sheet.open .memory-sheet-card.memory-capsule-card.full-memory-capsule {
    max-width: none !important;
    max-height: calc(100dvh - max(14px, env(safe-area-inset-top)) - max(14px, env(safe-area-inset-bottom))) !important;
    border-radius: 26px !important;
  }

  html body .app-shell .full-memory-capsule .memory-capsule-visual,
  html body main.app-shell .full-memory-capsule .memory-capsule-visual,
  html body .app-shell .full-memory-capsule .memory-capsule-hero,
  html body main.app-shell .full-memory-capsule .memory-capsule-hero {
    min-height: clamp(340px, 52dvh, 460px) !important;
    border-radius: 25px 25px 0 0 !important;
  }

  html body .app-shell .full-memory-capsule .memory-capsule-hero,
  html body main.app-shell .full-memory-capsule .memory-capsule-hero {
    padding: 88px 20px 22px !important;
    border-radius: 0 !important;
  }

  html body .app-shell .full-memory-capsule .memory-capsule-title-block h2,
  html body main.app-shell .full-memory-capsule .memory-capsule-title-block h2 {
    max-width: 100% !important;
    font-size: clamp(1.85rem, 9.2vw, 2.8rem) !important;
  }

  html body .app-shell .full-memory-capsule .memory-capsule-photo-count,
  html body main.app-shell .full-memory-capsule .memory-capsule-photo-count {
    right: 14px !important;
    top: 70px !important;
    bottom: auto !important;
  }

  html body .app-shell .full-memory-capsule .memory-capsule-body,
  html body main.app-shell .full-memory-capsule .memory-capsule-body {
    padding-inline: 20px !important;
  }

  html body .app-shell .full-memory-capsule .memory-capsule-story,
  html body main.app-shell .full-memory-capsule .memory-capsule-story {
    padding: 27px 2px 24px 16px !important;
  }

  html body .app-shell .full-memory-capsule .memory-capsule-voice-row,
  html body main.app-shell .full-memory-capsule .memory-capsule-voice-row {
    grid-template-columns: 1fr !important;
    padding-block: 18px !important;
    gap: 11px !important;
  }

  html body .app-shell .full-memory-capsule .memory-capsule-action-dock,
  html body main.app-shell .full-memory-capsule .memory-capsule-action-dock {
    grid-template-columns: minmax(0, 1fr) 58px 54px 46px !important;
    padding: 10px 12px max(12px, env(safe-area-inset-bottom)) !important;
    gap: 6px !important;
  }

  html body .app-shell .full-memory-capsule .memory-capsule-direction-actions,
  html body main.app-shell .full-memory-capsule .memory-capsule-direction-actions {
    grid-template-columns: minmax(0, 1fr) 48px !important;
    gap: 5px !important;
  }

  html body .app-shell .full-memory-capsule .memory-capsule-direction-primary,
  html body main.app-shell .full-memory-capsule .memory-capsule-direction-primary {
    min-height: 50px !important;
    padding-inline: 9px !important;
  }

  html body .app-shell .full-memory-capsule .memory-capsule-walk-action,
  html body main.app-shell .full-memory-capsule .memory-capsule-walk-action {
    width: 48px !important;
    min-width: 48px !important;
    padding: 0 !important;
  }

  html body .app-shell .full-memory-capsule .memory-capsule-walk-action > span:last-child,
  html body main.app-shell .full-memory-capsule .memory-capsule-walk-action > span:last-child {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
  }

  html body .app-shell .full-memory-capsule .memory-capsule-heart-action,
  html body main.app-shell .full-memory-capsule .memory-capsule-heart-action,
  html body .app-shell .full-memory-capsule .memory-capsule-edit-action,
  html body main.app-shell .full-memory-capsule .memory-capsule-edit-action {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 18px 11px !important;
    place-items: center !important;
    justify-content: center !important;
    min-height: 50px !important;
    padding: 6px 2px !important;
    gap: 4px !important;
    font-size: 0.58rem !important;
  }

  html body .app-shell .full-memory-capsule .memory-capsule-heart-icon,
  html body main.app-shell .full-memory-capsule .memory-capsule-heart-icon {
    width: 18px !important;
    height: 18px !important;
  }

  html body .app-shell .full-memory-capsule .memory-capsule-more-action,
  html body main.app-shell .full-memory-capsule .memory-capsule-more-action {
    min-height: 50px !important;
  }
}

@media (max-width: 370px) {
  html body .app-shell .full-memory-capsule .memory-capsule-action-dock,
  html body main.app-shell .full-memory-capsule .memory-capsule-action-dock {
    grid-template-columns: minmax(0, 1fr) 50px 48px 42px !important;
    padding-inline: 8px !important;
    gap: 4px !important;
  }

  html body .app-shell .full-memory-capsule .memory-capsule-direction-primary small,
  html body main.app-shell .full-memory-capsule .memory-capsule-direction-primary small {
    display: none !important;
  }

  html body .app-shell .full-memory-capsule .memory-capsule-more-action,
  html body main.app-shell .full-memory-capsule .memory-capsule-more-action {
    width: 42px !important;
    min-width: 42px !important;
  }
}

@media (max-width: 340px) {
  html body .app-shell .full-memory-capsule .memory-capsule-direction-primary,
  html body main.app-shell .full-memory-capsule .memory-capsule-direction-primary {
    justify-content: center !important;
    padding-inline: 0 !important;
  }

  html body .app-shell .full-memory-capsule .memory-capsule-direction-primary > span:last-child,
  html body main.app-shell .full-memory-capsule .memory-capsule-direction-primary > span:last-child {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .app-shell .full-memory-capsule .memory-capsule-cover-button > img,
  html body main.app-shell .full-memory-capsule .memory-capsule-cover-button > img,
  html body .app-shell .full-memory-capsule .memory-capsule-dock-action,
  html body main.app-shell .full-memory-capsule .memory-capsule-dock-action {
    transition: none !important;
  }
}