/* Local concept: the memory comes before the technical choices. */
:root{background:#edeef0}
.create-shell{display:flex;flex-direction:column;justify-content:center;min-height:100svh;padding-bottom:max(22px,var(--safe-bottom));background:#edeef0}
.preview{width:100%;padding:0;flex:none}
/* One scene for all aspect ratios: no second resize of the stack or footer after a swipe. */
.preview-sticky{position:relative;top:auto;width:100%;max-width:none;height:var(--moment-scene-height,min(calc(100svh - 150px),calc((100vw - 28px) * 1.36)));min-height:238px;max-height:calc(100svh - 150px);aspect-ratio:auto}
.gallery-stage{padding:max(12px,var(--safe-top)) max(14px,var(--safe-right)) 12px max(14px,var(--safe-left))}
.configuration{width:100%;max-width:620px;align-self:center;padding:0;flex:none;background:transparent}
.moment{padding:8px max(20px,var(--safe-right)) 0 max(20px,var(--safe-left));text-align:center}
/* The action rail has one stable mobile gutter. It deliberately does not inherit the changing
   poster width, so every occasion keeps the same right edge. */
.moment-actions{width:min(100%,480px);margin:12px auto 0;display:flex;justify-content:center}
.moment-next{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:46px;padding:10px 21px;border:1px solid #111;border-radius:999px;background:#111;color:#fff;font:inherit;font-weight:600;font-size:15px;line-height:1.35;cursor:pointer;box-shadow:0 5px 16px #1111111c;transition:background .2s,transform .2s}
.moment-next:hover{background:#293044;transform:translateY(-1px)}
.moment-next:active{transform:translateY(0)}
.moment-next:focus-visible{outline:2px solid #7667b3;outline-offset:4px}
/* moment.js pins this line to the real poster width. `translate` centres that width on the page
   without sharing the `transform` property used by the title-change animation. */
.moment h1{position:relative;left:50%;translate:-50% 0;width:var(--moment-title-width,calc(100vw - 40px));max-width:calc(100vw - 20px);box-sizing:border-box;margin:0 0 4px;padding:4px;font-family:'Playfair Display',Georgia,serif;font-size:clamp(20px,5.4vw,27px);line-height:1.28;font-weight:500;background:transparent;color:#92702f;border:0;letter-spacing:-.015em;overflow-wrap:anywhere;text-shadow:0 1px 0 #ffffff90}
.moment h1.is-occasion{font-size:clamp(28px,7.4vw,34px);font-weight:500;letter-spacing:-.022em;line-height:1.12;padding-block:5px;overflow-wrap:normal;word-break:keep-all}
.moment h1{text-shadow:0 1px 0 #ffffffb0,0 0 9px #e8bf6e80,0 0 22px #e4b85f66,0 0 38px #e5bd7038}
@media(max-width:359px){.moment{padding-inline:max(14px,var(--safe-left)) max(14px,var(--safe-right))}.moment h1.is-occasion{font-size:clamp(27px,8.5vw,31px)}.moment-next{min-height:44px;padding:9px 18px;font-size:14px}}
.map-arrow{position:absolute;top:50%;z-index:6;width:44px;height:48px;margin-top:-24px;padding:0;display:flex;align-items:center;justify-content:center;border:0;background:transparent;color:#fff;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .6s ease-in;-webkit-tap-highlight-color:transparent}
.map-arrow.prev{left:max(2px,var(--safe-left))}.map-arrow.next{right:max(2px,var(--safe-right))}
.map-arrow svg{overflow:visible;filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 9px #c7bbff) drop-shadow(0 1px 2px #373346aa);transition:transform .2s ease,filter .2s ease}
.map-arrow:hover svg{transform:scale(1.15);filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 14px #bcaaff)}
.map-arrow:active svg{transform:scale(.94)}
.map-arrow:focus-visible{outline:2px solid white;outline-offset:-4px;border-radius:8px}
.gallery-stage:has(.poster:not(.intro-pending):not(.intro-sky)) .map-arrow{opacity:1;visibility:visible}
@media(prefers-reduced-motion:reduce){.moment-next,.map-arrow,.map-arrow svg{transition:none}}
/* Desktop keeps the stacked concept but gives the poster a generous, bounded scene. */
/* First step only: contain iOS page scrolling/bounce, without disabling the map's gestures.
   Remove/change data-configurator-step when entering a later step that needs document scrolling. */
@media(max-width:1023px){
  html[data-configurator-step="moment"]{height:100%;overflow:hidden;overscroll-behavior:none}
  html[data-configurator-step="moment"] body{position:fixed;inset:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
  html[data-configurator-step="moment"] .create-shell{height:100%;min-height:0;overflow:hidden;overscroll-behavior:none}
  html[data-configurator-step="moment"] .gallery-stage{touch-action:none}
  html[data-configurator-step="moment"] .preview-sticky{min-height:0;max-height:calc(100dvh - 150px)}
  html[data-configurator-step="moment"] .preview-footer{display:none}
}
@media(min-width:1024px){.create-shell{justify-content:flex-start}.preview-sticky{position:relative;height:min(calc(100svh - 150px),760px);max-height:none}.gallery-stage{padding:16px}.moment{padding-inline:20px}}