/* Desktop inherits the original artwork, typography, geometry and animation. */
html body .footer .footer-content > .footer-link-lang {
  display: none !important;
}
html body .search-input:focus,
html body .add-steps-message-input:focus {
  outline: none !important;
  box-shadow: none;
}
@media (min-width: 761px) and (min-height: 501px), (min-width: 1025px) {
  .app.revival-card-fit .post-2d-center-wrapper {
    width: calc(var(--revival-card-image-width) + 348px) !important;
    height: var(--revival-card-image-height) !important;
    top: var(--revival-card-top) !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
  }
  .app.revival-card-fit .post-2d-img {
    width: var(--revival-card-image-width) !important;
    height: var(--revival-card-image-height) !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}
.revival-menu-memory.is-expanded .revival-menu-excerpt,
.revival-menu-memory.is-expanded .revival-menu-read {
  display: none !important;
}
.revival-menu-memory.is-expanded .revival-menu-full {
  border-top: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.revival-menu-full {
  overflow-wrap: anywhere;
}
.revival-menu-full pre {
  white-space: pre;
  overflow-x: auto;
  max-width: 100%;
  padding: 12px;
  background: #151515;
}
.revival-menu-full img {
  max-width: 100%;
  height: auto;
}
.revival-menu-full ul,
.revival-menu-full ol {
  padding-left: 1.5em;
}
.revival-menu-full blockquote {
  border-left: 2px solid #777;
  padding-left: 16px;
  margin-left: 0;
}
.revival-menu-full code {
  font-family: monospace;
}
.revival-menu-full h1,
.revival-menu-full h2,
.revival-menu-full h3 {
  line-height: 1.3;
  margin: 1em 0 0.6em;
}
.revival-menu-full a {
  color: #ddd;
  text-decoration: underline;
}
@media (max-width: 760px), (max-width: 1024px) and (max-height: 500px) {
  html body .preloader-text-line-1,
  html body .preloader-text-line-2 {
    width: calc(100% - 32px) !important;
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
    text-wrap: balance;
  }
  html body .preloader-text-line-1 .font-italic {
    white-space: nowrap;
  }
  /* Keep the original globe, search, and add hit targets on the same x-axis. */
  html body .nav {
    left: 0 !important;
    width: 100px !important;
    margin-top: -102px !important;
  }
  html body .nav-map-wrapper {
    left: 26px !important;
    width: 92px !important;
    height: 92px !important;
    margin: 12px 0 !important;
  }
  html body .nav-map-btn {
    width: 92px !important;
    height: 92px !important;
  }
  html body .nav-search-wrapper,
  html body .nav-add-wrapper {
    left: 49px !important;
    width: 46px !important;
    height: 46px !important;
    margin: 12px 0 !important;
  }
  html body .nav-search-btn,
  html body .nav-add-btn {
    width: 46px !important;
  }
  html body .header-fade-container {
    top: calc(20px + env(safe-area-inset-top)) !important;
    right: max(18px, env(safe-area-inset-right)) !important;
    width: auto !important;
    height: 44px !important;
    border: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    transform: scale(0.72) !important;
    transform-origin: right top !important;
  }
  html body .header-fade-percent {
    position: static !important;
    height: 44px;
    line-height: 44px !important;
    white-space: nowrap;
  }
  html body .header-fade-percent-num {
    font-size: 40px !important;
    line-height: 44px !important;
  }
  html body .header-fade-percent-symbol {
    position: static !important;
    display: inline !important;
    font-size: 22px !important;
    line-height: 44px !important;
  }
  html body .header-fade-percent-text {
    display: none !important;
  }
  html body .footer-content {
    box-sizing: border-box;
  }
  html body .footer-content[data-managed-menu="true"] > .footer-managed-item {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin: 0 !important;
  }
  /* Keep the original 24px sprite centered inside its 44px touch target.
     Retain the source image, retina sizing, and selected/hover sprite offsets. */
  html body .footer-content[data-managed-menu="true"] > .footer-sound-btn,
  html body .footer-content[data-managed-menu="true"] > .footer-share {
    box-sizing: border-box;
    width: 44px !important;
    height: 44px !important;
    padding: 10px !important;
    background-origin: content-box;
    background-clip: content-box;
    flex-shrink: 0;
  }
  html body .revival-menu-close {
    z-index: 3;
    background-color: #0009;
  }
  html body .post-2d .post-2d-content-top {
    background: none !important;
  }
  html body .post-2d .post-2d-center-wrapper {
    position: absolute !important;
    left: 12px !important;
    right: 12px !important;
    top: 85px !important;
    width: calc(100% - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    height: auto !important;
    max-height: calc(var(--revival-visual-viewport-height, 100dvh) - 150px) !important;
    margin: 0 !important;
    transform: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    touch-action: pan-y pinch-zoom;
    -webkit-overflow-scrolling: touch;
    background: #000;
    border: 1px solid #ffffff24;
    box-sizing: border-box;
  }
  html body .post-2d .post-2d-img {
    float: none !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: var(--revival-photo-ratio, 1);
    max-height: none !important;
    background-position: center !important;
    background-size: cover !important;
  }
  html body .post-2d .post-2d-content-wrapper {
    position: static !important;
    float: none !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    transform: none !important;
    touch-action: pan-y pinch-zoom;
  }
  html body .post-2d .post-2d-content {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 30px 26px 24px !important;
    transform: none !important;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    font-size: 16px !important;
    line-height: 1.7 !important;
  }
  html body .post-2d .post-2d-content-top {
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    top: 0 !important;
    width: 100% !important;
    height: 48px !important;
    pointer-events: none;
    z-index: 5;
  }
  html body .post-2d .post-2d-close-btn {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    left: auto !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    pointer-events: auto;
    background-color: #0009;
    border-radius: 50%;
  }
  html body .post-2d .scroll-indicator-wrapper,
  html body .post-2d .post-2d-matched-wrapper {
    display: none !important;
  }
  html body .post-2d .post-2d-name {
    margin-top: 18px !important;
    font-size: 18px !important;
  }
  .post-2d-share-container {
    margin-top: 18px !important;
  }
  html body .revival-menu-memory .revival-menu-card {
    width: 100% !important;
    max-height: calc(var(--revival-visual-viewport-height, 100dvh) - 90px) !important;
    overflow-y: auto !important;
    display: block !important;
    overscroll-behavior: contain;
  }
  html body .revival-menu-memory .revival-menu-image {
    min-height: 0 !important;
    height: 180px !important;
  }
  .revival-menu-memory .revival-menu-body {
    overflow: visible !important;
    min-width: 0;
  }
  .revival-menu-memory.is-expanded .revival-menu-image {
    height: 130px !important;
  }
  html body .add-steps-message {
    width: min(290px, calc(100vw - 48px)) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-left: 0 !important;
  }
  html body .add-steps-message-items-wrapper {
    max-width: 100% !important;
  }
  .add-steps-message-input {
    overflow-wrap: anywhere;
  }
  .add-steps-message-terms {
    max-width: 100%;
    box-sizing: border-box;
  }
  html body .add-steps-back-btn {
    left: 20px !important;
    bottom: calc(75px + env(safe-area-inset-bottom)) !important;
    top: auto !important;
    margin: 0 !important;
  }
  html body .add-steps-validate-btn {
    right: 20px !important;
    left: auto !important;
    bottom: calc(75px + env(safe-area-inset-bottom)) !important;
    top: auto !important;
    margin: 0 !important;
  }
}

@media (max-width: 380px) {
  html body .footer-content {
    column-gap: 4px !important;
  }
  html body .footer-content[data-managed-menu="true"] > .footer-link-item {
    padding-inline: 2px !important;
  }
}
@media (max-width: 760px), (max-width: 1024px) and (max-height: 500px) {
  html body .post-2d {
    z-index: 30;
  }
  html body .post-2d .post-2d-message-wrapper {
    padding-top: 0 !important;
  }
  html body .post-2d .post-2d-center-wrapper {
    max-height: calc(var(--revival-visual-viewport-height, 100dvh) - 210px) !important;
  }
  html body .post-2d .post-2d-close-btn {
    z-index: 10;
  }
  html body .post-2d .post-2d-close-btn::after {
    content: "×";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #ddd;
    font:
      28px/1 Arial,
      sans-serif;
    pointer-events: none;
  }
  html body .post-2d .post-2d-close-btn .circle-btn-icon-wrapper {
    visibility: hidden;
  }
}
@media (max-width: 760px), (max-width: 1024px) and (max-height: 500px) {
  html body .add-steps-back-btn,
  html body .add-steps-validate-btn {
    width: 140px !important;
    max-width: calc(50vw - 28px) !important;
    bottom: calc(145px + env(safe-area-inset-bottom)) !important;
    transform: none !important;
    z-index: 35;
  }
  html body .add-steps-back-btn {
    right: auto !important;
  }
  html body .revival-menu-memory {
    background: rgba(0, 0, 0, 0.94) !important;
  }
  html body .revival-menu-card {
    background: #000 !important;
  }
  html.revival-keyboard-open body .add-steps-message {
    top: 12px !important;
    margin-top: 0 !important;
  }
  html.revival-keyboard-open body .add-steps-back-btn,
  html.revival-keyboard-open body .add-steps-validate-btn {
    bottom: 8px !important;
  }
}

@media (max-width: 760px), (max-width: 1024px) and (max-height: 500px) {
  html body .post-2d .post-2d-close-btn {
    position: fixed !important;
    top: 91px !important;
    right: 18px !important;
  }
  html.revival-keyboard-open body .add-steps-message {
    max-height: calc(var(--revival-visual-viewport-height, 100dvh) - 80px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    touch-action: pan-y pinch-zoom;
  }
  html.revival-keyboard-open body .add-steps-message-terms {
    margin-top: 16px !important;
  }
}

@media (max-width: 1024px) and (max-height: 500px) {
  html body .header {
    height: 64px !important;
  }
  html body .header-logo {
    top: 12px !important;
    transform: scale(0.55) !important;
  }
  html body .header-fade-container {
    top: 12px !important;
    transform: scale(0.55) !important;
  }
  html body .footer,
  html body .footer-content {
    height: calc(52px + env(safe-area-inset-bottom)) !important;
  }
  html body .footer-content {
    flex-wrap: nowrap !important;
    padding-bottom: 4px !important;
  }
  html body .post-2d .post-2d-center-wrapper {
    top: 70px !important;
    max-height: calc(var(--revival-visual-viewport-height, 100dvh) - 132px) !important;
    display: grid !important;
    grid-template-columns: minmax(140px, 35%) minmax(0, 1fr);
  }
  html body .post-2d .post-2d-img {
    height: auto !important;
    max-height: none !important;
    min-height: 0;
    align-self: start;
  }
  html body .post-2d .post-2d-content {
    padding: 24px 58px 24px 26px !important;
  }
  html body .post-2d .post-2d-close-btn {
    top: 76px !important;
  }
  html body .revival-menu-memory .revival-menu-card {
    display: grid !important;
    grid-template-columns: minmax(160px, 30%) minmax(0, 1fr);
    max-height: calc(var(--revival-visual-viewport-height, 100dvh) - 32px) !important;
  }
  html body .revival-menu-memory .revival-menu-image {
    height: 100% !important;
    min-height: 180px !important;
  }
  html body .add-steps-message {
    top: 64px !important;
    margin-top: 0 !important;
    max-height: calc(var(--revival-visual-viewport-height, 100dvh) - 180px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    touch-action: pan-y pinch-zoom;
  }
  html body .add-steps-message-terms {
    margin-top: 16px !important;
  }
  html body .add-steps-back-btn,
  html body .add-steps-validate-btn {
    bottom: calc(58px + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 760px) and (min-height: 501px) {
  /* Place the three mobile controls in a horizontal row inside the footer. */
  html body .nav {
    top: auto !important;
    left: max(26px, env(safe-area-inset-left)) !important;
    right: max(26px, env(safe-area-inset-right)) !important;
    bottom: calc(28px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    height: 92px !important;
    margin-top: 0 !important;
    z-index: 2;
  }
  html body .nav-map-wrapper,
  html body .nav-search-wrapper,
  html body .nav-add-wrapper {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 92px !important;
    height: 92px !important;
    margin: 0 !important;
  }
  html body .nav-search-wrapper {
    left: 50% !important;
    transform: translateX(-50%);
  }
  html body .nav-add-wrapper {
    left: auto !important;
    right: 0 !important;
  }
  html body .nav-search-btn,
  html body .nav-add-btn {
    position: absolute;
    left: 23px !important;
    top: 23px !important;
  }
  /* The legacy globe is drawn in WebGL behind the solid footer backdrop. Cut
     one exact circular window for it while keeping the rest of the footer black. */
  html body .footer-bg {
    -webkit-mask-image: radial-gradient(circle 48px at 72px 58px, transparent 47px, #000 48px);
    mask-image: radial-gradient(circle 48px at 72px 58px, transparent 47px, #000 48px);
    pointer-events: none;
  }
}

/* Center the complete message, including its icon, and allow narrow screens to wrap. */
html body .error-blocker-messages-wrapper {
  left: 50%; top: 50%; width: max-content; height: auto;
  max-width: min(760px, calc(100% - 40px)); margin: 0;
  transform: translate(-50%, -50%);
}
html body .error-blocker-message {
  height: auto; white-space: normal; overflow-wrap: anywhere;
  display: flex; align-items: center; justify-content: center; text-align: center;
}
html body .error-blocker-message::before { flex: 0 0 21px; top: 0; }
html body .revival-menu-image { background-size: contain; background-repeat: no-repeat; }
html body .post-2d-img { outline: none; position: relative; background-size: cover; background-repeat: no-repeat; background-position: center; cursor: zoom-in; }
.revival-photo-viewer { position: fixed; inset: 0; margin: auto; padding: 48px 12px 12px; border: 0; background: #080808; color: white; width: calc(100vw - 24px); max-width: 1600px; height: calc(100dvh - 24px); max-height: calc(100dvh - 24px); box-sizing: border-box; }
.revival-photo-viewer::backdrop { background: #000e; }
.revival-photo-viewer img { display: block; width: 100%; height: 100%; object-fit: contain; }
.revival-photo-viewer button { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #222; color: #fff; font: 28px/1 Arial,sans-serif; cursor: pointer; }

html body .post-2d-img:focus-visible { outline: none !important; box-shadow: inset 0 0 0 1px #ffffff55; }

/* Photo composition and multi-photo memories retain the quiet archive controls. */
.add-steps.photo-adjusting { z-index: 6; }
.photo-editor { --photo-editor-size: min(290px, 36dvh); width: var(--photo-editor-size) !important; height: auto !important; margin: 0 !important; transform: translate(-50%, -50%) !important; z-index: 5; }
.photo-editor canvas { display: block; width: 100%; aspect-ratio: 1; border: 1px solid #ffffff55; box-sizing: border-box; cursor: grab; touch-action: none; }
.photo-editor canvas:active { cursor: grabbing; }
.photo-editor button { min-width: 44px; height: 44px; border: 0; background: transparent; color: #ddd; font: 22px Georgia, serif; cursor: pointer; }
.photo-editor button:disabled { opacity: .25; cursor: default; }
.photo-editor button:focus-visible, .photo-editor canvas:focus-visible { outline: 1px solid #aaa !important; outline-offset: 2px !important; }
.photo-zoom-controls, .photo-edit-actions { display: flex; align-items: center; justify-content: center; gap: 4px; }
.photo-zoom-controls input { width: calc(100% - 96px); accent-color: #ccc; min-height: 44px; }
.photo-edit-actions { min-width: 180px; position: relative; left: 50%; transform: translateX(-50%); }
.photo-edit-actions span { color: #aaa; font: 13px Georgia, serif; margin-right: auto; white-space: nowrap; }
.photo-edit-strip { display: flex; gap: 6px; overflow-x: auto; overscroll-behavior: contain; touch-action: pan-x; padding: 4px 0; }
.photo-edit-strip button { flex: 0 0 44px; width: 44px; padding: 2px; opacity: .55; }
.photo-edit-strip button[aria-pressed="true"] { opacity: 1; box-shadow: inset 0 0 0 1px #aaa; }
.photo-edit-strip img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.photo-upload-status { position: absolute; bottom: 20%; left: 50%; transform: translateX(-50%); z-index: 10; color: #eee; font: 16px Georgia, serif; background: #000b; padding: 8px 16px; }
.photo-gallery-controls { position: absolute; left: 0; top: 0; width: var(--revival-card-image-width, 600px); height: var(--revival-card-image-height, 600px); pointer-events: none; }
.photo-gallery-controls[hidden], .revival-photo-viewer button[hidden] { display: none !important; }
.photo-gallery-controls button, .revival-photo-viewer .photo-gallery-prev, .revival-photo-viewer .photo-gallery-next { position: absolute; top: 50%; bottom: auto; transform: translateY(-50%); width: 44px; height: 44px; border: 0; border-radius: 50%; background: #0008; color: #eee; font: 32px Georgia, serif; pointer-events: auto; cursor: pointer; }
.photo-gallery-prev { left: 6px !important; right: auto !important; }
.photo-gallery-next { right: 6px !important; left: auto !important; }
.photo-gallery-count { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); background: #0009; border-radius: 12px; padding: 4px 9px; color: #eee; font: 12px Georgia, serif; }
@media (max-width: 760px), (max-width: 1024px) and (max-height: 500px) {
  .photo-adjusting .add-steps-back-btn, .photo-adjusting .add-steps-validate-btn { top: auto !important; bottom: calc(64px + env(safe-area-inset-bottom)) !important; margin: 0 !important; width: 120px !important; }
  .photo-adjusting .add-steps-back-btn { left: 12px !important; right: auto !important; }
  .photo-adjusting .add-steps-validate-btn { right: 12px !important; left: auto !important; }
  .photo-gallery-controls { width: 100%; height: auto; aspect-ratio: 1; }
}
@media (max-width: 1024px) and (max-height: 500px) {
  .photo-editor { --photo-editor-size: min(160px, 36dvh); top: 48% !important; }
  .photo-gallery-controls { width: 35%; }
}

@media (max-width: 760px), (max-width: 1024px) and (max-height: 500px) {
  .photo-adjusting .add-steps-back-btn, .photo-adjusting .add-steps-validate-btn { display: flex !important; align-items: center; justify-content: center; gap: 8px; height: 44px; white-space: nowrap; }
  .photo-adjusting .add-steps-back-btn { flex-direction: row-reverse; }
  .photo-adjusting .add-steps-back-btn > *, .photo-adjusting .add-steps-validate-btn > * { float: none !important; margin: 0 !important; }
}
.photo-editor input:focus-visible { outline: 1px solid #aaa !important; outline-offset: 0 !important; }

.post-2d-img { touch-action: pinch-zoom; }
.memory-navigation { position: absolute; right: 0; bottom: 12px; width: 348px; text-align: center; z-index: 4; }
.memory-navigation button { min-height: 44px; padding: 8px 16px; border: 0; background: transparent; color: #bbb; font: 16px Georgia, serif; cursor: pointer; }
.memory-navigation button:hover { color: #fff; }
.memory-navigation button:disabled { opacity: .45; cursor: progress; }
.memory-navigation button:focus-visible { outline: 1px solid #ffffff66 !important; outline-offset: -4px; }
.memory-navigation-status { display: block; color: #aaa; font: 13px Georgia, serif; }
@media (max-width: 760px), (max-width: 1024px) and (max-height: 500px) {
  .memory-navigation { position: relative; clear: both; width: 100%; bottom: auto; padding: 0 8px 12px; box-sizing: border-box; }
}