/* V8 (2026-10-05): calm native scroll. Loaded last; it reshapes the V7 chapters
   (shorter diary pin, circle and badge as ordinary sections) and styles the new
   parts: one pill per chapter whose detail opens in place with one small gadget
   (V8.4), one fixed bar. */

/* ---------------------------------------------------------------- chapters */
/* S2 (V8.3): the diary frame holds for a short while and shows its Grid, then
   its Calendar, then its Map (v8.js, diary); afterwards the whole block scrolls
   on. Desktop: three short text steps run past the frame. Phones: the frame is
   pinned briefly and the text cross-fades. The feed still drifts a little
   faster than the page while the grid shows (story.js, FEED_RATE). */
.collection{--shell-h:max(540px,min(calc(100svh - 140px),820px));--shell-top:calc((100svh - var(--shell-h)) / 2 + 12px);height:auto;min-height:0;overflow:clip}
.collection-pin{position:relative;top:auto;height:auto;min-height:0;padding:var(--shell-top) 0 clamp(70px,10svh,120px)}
.collection-layout{height:auto}
.diary-shell{height:var(--shell-h);min-height:0}
.diary-kicker{display:inline-flex;align-items:center;gap:9px;color:#5c6360;font-size:13px;font-weight:800;letter-spacing:.14em;line-height:1;text-transform:uppercase}
.diary-kicker svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.diary-step-title{max-width:560px;margin:18px 0 0;font-size:clamp(40px,4.3vw,64px);font-weight:700;line-height:1;letter-spacing:-.07em}
.collection-copy .diary-step-title+p{margin-top:20px}
@media(min-width:951px){
  .collection-layout{align-items:start}
  .collection-stage{position:sticky;top:var(--shell-top);align-self:start;margin-top:0}
  .collection-copy{align-self:start;margin-top:0}
  .diary-step{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;transition:opacity .5s ease}
  .diary-step:first-child{min-height:var(--shell-h)}
  .diary-step+.diary-step{justify-content:flex-start;min-height:60svh;padding-top:20svh}
  .diary-step:last-child{min-height:92svh}
  .diary-step:not(.is-active){opacity:.26}
}
@media(max-width:950px){
  .collection{height:235svh}
  .collection-pin{position:sticky;top:0;height:100svh;min-height:0;padding:clamp(66px,9svh,90px) 0 14px}
  .collection-layout{display:flex;flex-direction:column;justify-content:flex-start;gap:14px;height:100%;padding:0}
  .collection-copy{display:grid;width:min(100%,610px);align-self:center}
  .diary-step{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .4s ease,transform .55s cubic-bezier(.16,1,.3,1),visibility 0s .4s}
  .diary-step.is-active{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .collection-stage{display:flex;flex:1 1 auto;flex-direction:column;min-height:0}
  .diary-shell{flex:1 1 auto;height:auto;min-height:300px}
  .collection-stage .study-caption{display:none}
  .diary-step-title{margin-top:12px;font-size:clamp(34px,6vw,50px)}
  .collection-copy .diary-step-title+p{margin-top:12px}
  .diary-step .inline-cta{margin-top:14px}
}

/* The calendar and the map open inside the diary, over its feed, like the
   header icons in You.tsx; the active icon turns white. */
.diary-header .diary-feature-trigger.is-on{background:#fff;color:#050506}
.diary-shell .dv{position:absolute;inset:0;z-index:3;overflow:hidden;background:#050506;color:#fff;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .4s ease,transform .55s cubic-bezier(.16,1,.3,1),visibility 0s .4s}
.diary-shell[data-view=calendar] .dv-cal,.diary-shell[data-view=map] .dv-map{opacity:1;visibility:visible;transform:none;transition-delay:0s}
/* Calendar: weekdays, the month, portrait day cells with their picture. */
.dv-cal{padding:2px 14px 18px}
.dvc-wd{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;padding:4px 0 6px;color:#ffffff70;font-size:10px;font-weight:700;letter-spacing:.06em;text-align:center}
.dvc-month{display:block;margin:6px 0 10px;font-size:16px;font-weight:700;letter-spacing:-.01em;text-align:center}
.dvc-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.dvc-grid+.dvc-month{margin-top:20px}
.dvc-day{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:9px;background:#141619;opacity:0;transform:scale(.86);transition:opacity .3s ease,transform .45s cubic-bezier(.2,.9,.25,1.15)}
.diary-shell[data-view=calendar] .dvc-day{opacity:1;transform:none;transition-delay:calc(var(--i) * 14ms + 120ms)}
.dvc-day img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.6);transform-origin:85% 85%}
.dvc-day img.is-plain{object-position:center 55%;transform:none}
.dvc-day b{position:absolute;left:5px;bottom:4px;color:#ffffff6b;font-size:10px;font-weight:700;line-height:1}
.dvc-day.has b{color:#fff;text-shadow:0 1px 3px #000d}
.dvc-day::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.dvc-day.is-today::after{box-shadow:inset 0 0 0 1.5px #fff}
.dvc-day.is-new::after{box-shadow:inset 0 0 0 2px #e8be54}
/* Map (V8.5, the app's MomentsMapView): a light street map, the header's dark
   scrim on top, square photo pins on a pointer, the filter chips along the
   bottom and the tapped moment above them. */
.diary-shell .dv.dv-map{background:#f2efe8}
.dvm-bg{position:absolute;inset:0;width:100%;height:100%}
.dv-map::before{content:"";position:absolute;inset:0 0 auto;z-index:2;height:calc(var(--dh) + 64px);background:linear-gradient(to bottom,#000000eb 0%,#000000b8 48%,#00000080 72%,#0000002e 91%,transparent);pointer-events:none}
.dvm-pin{--s:48px;position:absolute;z-index:1;left:var(--x);top:var(--y);display:flex;flex-direction:column;align-items:center;width:var(--s);margin-left:calc(var(--s) / -2);translate:0 -100%;opacity:0;transform:translateY(-16px) scale(.6);transform-origin:50% 100%;transition:opacity .3s ease,transform .5s cubic-bezier(.2,.9,.25,1.3)}
.diary-shell[data-view=map] .dvm-pin{opacity:1;transform:none;transition-delay:calc(var(--i) * 60ms + 160ms)}
.dvm-pin>i{display:block;width:var(--s);height:var(--s);overflow:hidden;border:2.5px solid #fff;border-radius:12px;background:#222;box-shadow:0 8px 18px #0000004d}
.dvm-pin::after{content:"";width:0;height:0;margin-top:-1px;border-style:solid;border-width:9px 7px 0;border-color:#fff transparent transparent}
.dvm-pin img{width:100%;height:100%;object-fit:cover;transform:scale(1.6);transform-origin:85% 85%}
.dvm-pin img.is-plain{object-position:center 55%;transform:none}
.dvm-pin b{position:absolute;left:50%;top:calc(var(--s) - 10px);translate:-50% 0;min-width:24px;height:20px;padding:0 7px;border:1px solid #ffffff33;border-radius:999px;background:#000000b3;color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center}
.dvm-pin.is-new{--s:62px;z-index:2}
.dvm-pin.is-new>i{border-color:#e8be54;border-width:3px;border-radius:15px}
.dvm-pin.is-new::after{border-top-color:#e8be54}
.dvm-pin.is-new::before{content:"";position:absolute;left:0;top:0;width:var(--s);height:var(--s);box-sizing:border-box;border:2px solid #e8be54;border-radius:16px;opacity:0;pointer-events:none}
.diary-shell[data-view=map] .dvm-pin.is-new::before{animation:dvm-ping 2.4s ease-out 1.1s infinite}
@keyframes dvm-ping{0%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(1.6)}}
.dvm-you{position:absolute;z-index:1;left:var(--x);top:var(--y);width:16px;height:16px;margin:-8px 0 0 -8px;border:2px solid #fff;border-radius:50%;background:#0ea5e9;box-shadow:0 0 0 7px #38bdf833,0 0 18px #38bdf8d9;opacity:0;transition:opacity .4s ease}
.diary-shell[data-view=map] .dvm-you{opacity:1;transition-delay:.5s}
.dvm-card{position:absolute;z-index:3;left:12px;right:12px;bottom:60px;display:flex;align-items:center;gap:12px;padding:8px 14px 8px 8px;border:1px solid #ffffff24;border-radius:22px;background:#000000b8;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:0 18px 48px #00000066;color:#fff;opacity:0;transform:translateY(16px);transition:opacity .35s ease,transform .5s cubic-bezier(.16,1,.3,1)}
.diary-shell[data-view=map] .dvm-card{opacity:1;transform:none;transition-delay:.75s}
.dvm-thumb{position:relative;flex:none;width:46px;height:60px;overflow:hidden;border-radius:10px}
.dvm-thumb>img{width:100%;height:100%;object-fit:cover;object-position:center 55%}
.dvm-thumb i{position:absolute;left:6%;top:5%;width:34%;height:34%;overflow:hidden;border:1.5px solid #fff;border-radius:23%}
.dvm-thumb i img{width:100%;height:100%;object-fit:cover}
.dvm-card b{display:block;font-size:15px;line-height:19px}
.dvm-card small{display:block;color:#ffffffa0;font-size:12px;line-height:16px}
.dvm-chips{position:absolute;z-index:3;left:0;right:0;bottom:12px;display:flex;gap:8px;padding:0 12px;overflow:hidden;opacity:0;transform:translateY(10px);transition:opacity .35s ease,transform .5s cubic-bezier(.16,1,.3,1)}
.diary-shell[data-view=map] .dvm-chips{opacity:1;transform:none;transition-delay:.55s}
.dvm-chips span{display:inline-flex;flex:none;align-items:center;gap:4px;height:36px;padding:0 14px;border:1px solid #ffffff24;border-radius:999px;background:#00000099;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);color:#fff;font-size:13px;font-weight:600;line-height:1;white-space:nowrap}
.dvm-chips span.on{border-color:#fff;background:#fff;color:#000}
.dvm-chips svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dvm-chips span>svg:last-child{margin-right:-4px;opacity:.7}
.dvm-chips .is-badges>svg{margin:0 0 0 -2px;color:#e8be54;opacity:1}
.dvm-chips em{font-style:normal}
@media(max-width:540px){
  .dv-cal{padding:0 9px 12px}
  .dvc-wd,.dvc-grid{gap:3px}
  .dvc-month{margin:4px 0 7px;font-size:14px}
  .dvc-day{border-radius:7px}
  .dvc-day b{left:4px;bottom:3px;font-size:9px}
  .dvm-chips{bottom:9px;gap:6px;padding:0 9px}
  .dvm-chips span{height:30px;padding:0 11px;font-size:12px}
  .dvm-pin{--s:38px}
  .dvm-pin>i{border-width:2px;border-radius:10px}
  .dvm-pin.is-new{--s:50px}
  .dvm-pin.is-new>i{border-radius:13px}
  .dvm-card{left:9px;right:9px;bottom:47px;gap:10px;padding:6px 12px 6px 6px;border-radius:18px}
  .dvm-thumb{width:36px;height:48px;border-radius:8px}
  .dvm-card b{font-size:13px;line-height:17px}
  .dvm-card small{font-size:11px;line-height:14px}
}
@media(prefers-reduced-motion:reduce){
  .diary-step,.diary-shell .dv,.dvc-day,.dvm-pin,.dvm-card,.dvm-chips,.dvm-you{transition:none!important}
  .diary-shell[data-view=map] .dvm-pin.is-new::before{animation:none}
}

/* S3: an ordinary chapter with its own colour, no overlap, no hold. */
.sharing{height:auto;min-height:100svh;margin:0;padding:clamp(110px,15vh,170px) 0 clamp(80px,11vh,130px);overflow:clip}
.sharing-layout{position:relative;top:auto;height:auto;padding-top:0;align-items:center;will-change:auto}
.sharing-copy{will-change:auto}
.sharing-stage{height:auto;padding-top:0;overflow:visible}
.sharing-grid{max-height:min(74svh,700px);overflow:hidden;will-change:auto;mask-image:linear-gradient(to bottom,transparent 0%,#000 7%,#000 88%,transparent 100%)}
.sharing-column.circle-column{padding-top:34px}
@media(min-width:951px){.sharing-column.photo-column:first-child{padding-top:70px}.sharing-column:nth-child(3){padding-top:110px}}

/* The visitor picks the circle on the stage; the moment arrives there. */
.share-choice{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin:0 auto 6px}
.share-choice-label{margin-right:4px;color:#4b5d52;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.share-chip{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:5px 16px 5px 5px;border:1.5px solid #17241d2e;border-radius:999px;background:#f6faf7;color:#17241d;font:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:background-color .25s,color .25s,border-color .25s,transform .25s}
.share-chip:hover{transform:translateY(-1px)}
.share-chip[aria-pressed=true]{border-color:#17241d;background:#17241d;color:#fff}
.share-chip:focus-visible{outline:3px solid #d4b65a;outline-offset:3px}
.share-chip-avatar{display:block;width:32px;height:32px;flex:none;border-radius:50%;background-size:cover}
.share-chip-avatar.avatar-family{background-size:110px auto;background-position:-40px -97px}

/* One arrival: the moment lands in the circle, then the circle answers. */
.circle-view .cv-post{opacity:0;scale:.9;translate:0 26px;transition:opacity .5s ease,scale .9s var(--px-spring,cubic-bezier(.3,1.45,.5,1)),translate .9s var(--px-out,cubic-bezier(.16,1,.3,1))}
.circle-view .cv-post-label{opacity:0;translate:0 8px;transition:opacity .35s ease .55s,translate .5s var(--px-out,ease) .55s}
.circle-view .cv-reaction,.circle-view .cv-friend,.circle-view .cv-privacy{opacity:0;translate:0 14px;transition:opacity .45s ease,translate .6s var(--px-out,ease)}
.circle-view.is-arrived .cv-post{opacity:1;scale:1;translate:0 0}
.circle-view.is-arrived .cv-post-label{opacity:1;translate:0 0}
.circle-view.is-arrived .cv-reaction{opacity:1;translate:0 0;transition-delay:.75s}
.circle-view.is-arrived .cv-friend{opacity:1;translate:0 0;transition-delay:.95s}
.circle-view.is-arrived .cv-privacy{opacity:1;translate:0 0;transition-delay:1.15s}
.circle-view.is-instant .cv-post,.circle-view.is-instant .cv-post-label,.circle-view.is-instant .cv-reaction,.circle-view.is-instant .cv-friend,.circle-view.is-instant .cv-privacy{transition:none}

/* S4: an ordinary chapter; the badge turns once, then its facts arrive. */
.badge-chapter{height:auto;min-height:100svh;padding:clamp(110px,15vh,170px) 0 clamp(90px,12vh,140px);overflow:clip}
.badge-pin{position:relative;height:auto;min-height:0;overflow:visible}
.badge-copy{opacity:1;transform:none;will-change:auto}
.proof-card{opacity:1;will-change:auto}
.proof-card-rotor{transition:transform 1.1s cubic-bezier(.2,.75,.15,1)}
.proof-card[data-side=back] .proof-card-rotor{transform:rotateY(180deg)}
.proof-card.is-instant .proof-card-rotor{transition:none}
.badge-hint{opacity:1}
.badge-copy .more-pill{margin-top:30px}

/* ------------------------------------------------------------ pill + CTA */
.more-pill{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:26px;padding:0 7px 0 18px;border:1.5px solid color-mix(in srgb,currentColor 38%,transparent);border-radius:999px;background:transparent;color:inherit;font:inherit;font-size:15px;font-weight:700;line-height:1.2;text-align:left;cursor:pointer;transition:background-color .25s,border-color .25s}
.more-pill:hover{border-color:currentColor;background:color-mix(in srgb,currentColor 7%,transparent)}
.more-pill:focus-visible{outline:3px solid #d4b65a;outline-offset:3px}
.more-pill i{position:relative;display:block;width:30px;height:30px;flex:none;border-radius:50%;background:color-mix(in srgb,currentColor 12%,transparent);transition:transform .35s var(--px-spring,ease)}
.more-pill i::before,.more-pill i::after{content:"";position:absolute;top:50%;left:50%;width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:2px;background:currentColor}
.more-pill i::after{transform:rotate(90deg)}
.more-pill:hover i{transform:rotate(90deg)}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:30px}
.hero-actions .more-pill,.hero-actions .next-link{margin-top:0}
.hero-copy .more-pill{color:#f2f2ee}

.inline-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:20px}
.cta-primary{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:999px;background:#17191a;color:#f7f7f5;font-size:16px;font-weight:800;text-decoration:none;white-space:nowrap}
.cta-primary:hover{background:#000}
.cta-primary:focus-visible,.cta-secondary:focus-visible,.sticky-cta-btn:focus-visible{outline:3px solid #d4b65a;outline-offset:3px}
.cta-secondary{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:inherit;font-size:16px;font-weight:700;text-decoration:none}
.cta-secondary:hover{text-decoration:underline;text-underline-offset:4px}

/* Offers foot: the two ways on, then the brand line and the study note. */
.offers-cta{margin-top:0}
.offers .cta-primary{background:var(--b-ink);color:var(--b-solid)}
.offers .cta-primary:hover{opacity:.9}
.offers-foot .offers-brandline{padding-top:16px;border-top:1px solid currentColor}

/* Closing: the invitation is the last, single primary action. */
.cf-copy .cf-noinvite{margin-top:16px;color:#8e9893;font-size:15px}

/* ------------------------------------------------------------ fixed bar */
.sticky-cta{position:fixed;z-index:36;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:14px;padding:6px 20px 6px 6px;border-radius:999px;background:rgba(16,17,19,.84);color:#f2f2ee;box-shadow:0 18px 50px -12px #000b,inset 0 0 0 1px #ffffff1f;-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);opacity:0;transform:translate(-50%,150%);transition:transform .5s var(--px-out,ease),opacity .3s ease;pointer-events:none}
.sticky-cta.is-shown{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.sticky-cta-btn{display:inline-flex;align-items:center;min-height:46px;padding:0 22px;border-radius:999px;background:#f6f6f4;color:#111113;font-size:15px;font-weight:800;text-decoration:none;white-space:nowrap}
.sticky-cta-btn:hover{background:#fff}
.sticky-cta small{color:#c9cccb;font-size:13px;white-space:nowrap}
.hb .app-link{transition:background-color .3s,color .3s,opacity .25s}
html.has-sticky .hb .app-link{opacity:0;visibility:hidden;pointer-events:none}
@media(max-width:540px){
  .sticky-cta{left:12px;right:12px;justify-content:space-between;padding:6px 16px 6px 6px;transform:translateY(150%)}
  .sticky-cta.is-shown{transform:none}
  .sticky-cta small{font-size:12px}
}

/* ------------------------------------------------------------ details in place (V8.4)
   No pop-up: the pill turns its chapter into the detail (v8.js). The headline
   block and the detail share one slot (.dsw) whose height glides; the stage
   hands its place to a black panel with the gadget. */
.dsw{position:relative;transition:height .5s cubic-bezier(.16,1,.3,1)}
.dsw-main,.dsw-detail{display:flow-root}
.dsw-main{transition:opacity .45s ease .12s,transform .6s cubic-bezier(.16,1,.3,1) .12s,visibility 0s 0s}
.dsw-detail{position:absolute;inset:0 0 auto;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .25s ease,transform .4s ease,visibility 0s .25s}
.dsw.is-on .dsw-main{position:absolute;inset:0 0 auto;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .25s ease,transform .4s ease,visibility 0s .25s}
.dsw.is-on .dsw-detail{position:relative;opacity:1;visibility:visible;transform:none;transition:opacity .45s ease .14s,transform .6s cubic-bezier(.16,1,.3,1) .14s,visibility 0s 0s}
.dsw-title{max-width:15ch;margin:0;font-size:clamp(40px,4.1vw,60px);font-weight:700;line-height:1.02;letter-spacing:-.06em;text-wrap:balance}
.chapter-copy .dsw-lead{max-width:36ch;margin-top:18px}
.dsw-points{max-width:470px;margin:20px 0 0;padding:0;list-style:none}
.dsw-points li{position:relative;padding:11px 0 11px 20px;font-size:16px;font-weight:600;line-height:22px}
.dsw-points li+li{border-top:1px solid color-mix(in srgb,currentColor 18%,transparent)}
.dsw-points li::before{content:"";position:absolute;left:2px;top:19px;width:6px;height:6px;border-radius:50%;background:#d1a640}
.dsw-points .sheet-tag{margin-left:4px;border-color:color-mix(in srgb,currentColor 45%,transparent);color:inherit;vertical-align:1px}
.dsw-go{display:flex;flex-wrap:wrap;gap:0 28px;margin-top:8px}
.dsw-link{display:inline-flex;align-items:center;min-height:44px;color:inherit;font-size:16px;font-weight:700;text-decoration:none}
.dsw-link:hover{text-decoration:underline;text-underline-offset:4px}
.dsw-link:focus-visible{outline:3px solid #d4b65a;outline-offset:3px}
/* What belongs to the chapter's own view steps aside without moving anything. */
.dsw-hide{transition:opacity .45s ease .12s,visibility 0s 0s}
.is-detail .dsw-hide{opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s .25s}
/* The pill shows that it is open: filled, and its plus turns into a cross. */
.more-pill[aria-expanded=true]{border-color:currentColor;background:color-mix(in srgb,currentColor 11%,transparent)}
.more-pill[aria-expanded=true] i{transform:rotate(45deg)}
.more-pill[aria-expanded=true]:hover i{transform:rotate(135deg)}
/* The stage: its own scene fades out (scripts may set inline opacity, hence
   !important), the panel rises in its place. */
.is-detail .dp-stage:not(.dp-scene)>:not(.dp){opacity:0!important;visibility:hidden!important;transition:opacity .3s ease,visibility 0s .3s!important}
.is-leaving .dp-stage:not(.dp-scene)>:not(.dp){transition:opacity .45s ease .1s!important}
.dp{position:absolute;z-index:8;inset:0;visibility:hidden;pointer-events:none;transition:visibility 0s .35s}
.is-detail .dp{visibility:visible;transition-delay:0s}
.dp-card{position:absolute;left:50%;top:50%;box-sizing:border-box;width:min(480px,calc(100vw - 32px));padding:30px 26px 24px;border:1px solid #ffffff29;border-radius:32px;background:#000;color:#fff;font-family:'League Spartan',Geist,Arial,sans-serif;text-align:left;box-shadow:0 34px 90px -34px #000d;translate:-50% -50%;opacity:0;transform:translateY(18px) scale(.97);transition:opacity .3s ease,transform .5s cubic-bezier(.16,1,.3,1);pointer-events:auto}
.is-detail .dp-card{opacity:1;transform:none;transition-delay:.08s}
/* The hero stage is drawn at 80 % between 951 and 1400 px; the panel is not. */
@media(min-width:951px) and (max-width:1400px){.moment-stage .dp-card{scale:1.25}}
/* Phones: the panel sits at the top of the stage, and the stage shrinks to it
   (v8.js sets --dp-h) so no empty scene stays behind; the pinned offers also
   drop the scenario switch and the room kept for the fixed bar. */
@media(max-width:950px){
  .dp-card{top:0;translate:-50% 0}
  .is-detail .dp-stage:not(.dp-scene){height:var(--dp-h,auto)!important;min-height:0!important;padding-bottom:0!important}
  .offers.is-detail .dsw-hide{display:none}
  .offers.is-detail .offers-pin{padding-bottom:16px}
}
@media(max-width:699px){
  .dsw-points li.is-extra{display:none}
}
@media(max-width:540px){
  .dsw-title{font-size:clamp(32px,8.6vw,40px)}
  .chapter-copy .dsw-lead{margin-top:12px}
  .dsw-points{margin-top:12px}
  .dsw-points li{padding:8px 0 8px 18px;font-size:14px;line-height:19px}
  .dsw-points li::before{top:15px}
  .dp-card{width:calc(100vw - 20px);padding:20px 14px 16px;border-radius:26px}
  .dsw-link.is-brands{display:none}
  .dsw-go{margin-top:2px}
  .dsw-link{min-height:40px;font-size:15px}
}
@media(prefers-reduced-motion:reduce){
  .dsw,.dsw-main,.dsw-detail,.dsw-hide,.dp,.dp-card,.is-detail .dp-stage>:not(.dp),.is-leaving .dp-stage>:not(.dp){transition:none!important}
}
.sheet-tag{display:inline-block;padding:3px 9px 2px;border:1px solid #ffffff52;border-radius:999px;color:#ffffffd6;font-size:11px;font-weight:700;letter-spacing:.08em;line-height:1.2;text-transform:uppercase;white-space:nowrap}

/* Offers: the feature request sits under the card, not over its last line. */
@media(min-width:951px){.scenario-stage{padding-bottom:196px}}

/* ------------------------------------------------------------ mobile layout */
@media(max-width:950px){
  .sharing{padding:110px 0 70px}
  .sharing-layout{gap:26px}
  .sharing-stage{width:min(100%,610px);height:auto}
  .sharing-grid{max-height:none}
  .badge-chapter{padding:110px 0 90px}
  .badge-stage{margin-top:70px}
}
@media(max-width:540px){
  .hero-actions{gap:10px 18px;margin-top:20px}
  .more-pill{min-height:42px;margin-top:16px;padding-left:15px;font-size:14px}
  .more-pill i{width:28px;height:28px}
  .inline-cta{margin-top:12px}
  .cta-primary{min-height:48px;padding:0 22px;font-size:15px}
  .collection-copy .more-pill{margin-top:12px}
  .diary-step-title{font-size:clamp(30px,8.2vw,40px)}
  .sharing{padding:96px 0 56px}
  .sharing-copy h2{font-size:clamp(37px,9.7vw,46px)}
  .sharing-copy .future-note{margin-top:14px}
  .sharing-stage{height:auto}
  .share-chip{min-height:42px;font-size:13px}
  .share-choice-label{flex-basis:100%;text-align:center}
  .badge-chapter{padding:96px 0 80px}
  .badge-stage{margin-top:78px}
  .cf-copy .cf-noinvite{font-size:14px}
  /* Two small circle cards are enough on a phone; the reaction and the
     privacy line already say the rest. */
  .fx-cp-c,.fx-cp-d{display:none}
  /* The flip button moves to the free bottom corner of the badge. */
  .proof-flip-button{top:auto;bottom:11px;right:11px;width:38px;height:38px}
  /* The pinned offers end above the fixed bar, so no button hides behind it. */
  .offers-pin{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}
@media(prefers-reduced-motion:reduce){
  .circle-view .cv-post,.circle-view .cv-post-label,.circle-view .cv-reaction,.circle-view .cv-friend,.circle-view .cv-privacy,.proof-card-rotor,.sticky-cta{transition:none}
}

/* S2 (V8.1): the hero moment lands in the first tile with one quiet pulse. */
.first-tile.is-landed{animation:tile-land .75s cubic-bezier(.2,.9,.3,1.15) both}
@keyframes tile-land{0%{transform:scale(1.07);box-shadow:0 0 0 0 #fff0}35%{box-shadow:0 0 0 3px #ffffffd9}100%{transform:none;box-shadow:0 0 0 0 #fff0}}
@media(prefers-reduced-motion:reduce){.first-tile.is-landed{animation:none}}

/* ------------------------------------------------------------ gadgets (V8.2)
   One small object per detail that shows the idea by doing it. Shared parts: a
   segmented switch with a sliding pill, choice chips and one spoken line. */
.gx{display:flex;flex-direction:column;align-items:center;gap:14px;color:#fff}
.gx button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
.gx button:focus-visible{outline:3px solid #e8be54;outline-offset:2px}
.gx svg:not(.gxb-ring){fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.gx-seg{position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));width:min(100%,360px);padding:4px;border-radius:999px;background:#ffffff12;box-shadow:inset 0 0 0 1px #ffffff14}
.gx-seg button{position:relative;z-index:1;height:38px;padding:0 8px;border:0;border-radius:999px;background:none;color:#ffffffa8;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .25s}
.gx-seg button[aria-pressed="true"]{color:#000}
.gx-seg-ind{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / var(--n));border-radius:999px;background:#fff;transform:translateX(calc(var(--i) * 100%));transition:transform .5s cubic-bezier(.2,.9,.25,1.12)}
.gx-say{min-height:24px;margin:0;color:#ffffffd6;font-size:16px;font-weight:600;line-height:24px;text-align:center}
.gx-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.gx-chips button{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border:1px solid #ffffff2e;border-radius:999px;background:transparent;font-size:14px;font-weight:700;cursor:pointer;transition:background-color .25s,color .25s,border-color .25s}
.gx-chips button small{display:grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#ffffff1f;font-size:11px}
.gx-chips button[aria-pressed="true"]{border-color:#fff;background:#fff;color:#000}
.gx-chips button[aria-pressed="true"] small{background:#0000001a}
.gx-again{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border:1px solid #ffffff2e;border-radius:999px;background:none;color:#ffffffc0;font-size:13px;font-weight:700;cursor:pointer}
.gx-again svg{width:15px;height:15px}
.gx-again:hover{background:#ffffff12}

/* Private first (V8.3): no tabs. The moment is clear for you; then the card
   splits, and for everyone else a 3D lock drops on and the picture becomes
   ciphertext. The lock is built from thin layers, so it has real depth as it
   turns; nothing on it is blurred, so the card corners stay clean. */
.gx-privacy{gap:12px}
.gxp-stage{position:relative;width:min(100%,400px);height:250px}
.gxp-side{position:absolute;left:50%;top:0;width:150px;margin:0 0 0 -75px;transition:transform .85s cubic-bezier(.2,.85,.2,1),opacity .45s ease}
.gxp-you{z-index:2}
.gxp-others{opacity:0;transform:scale(.94)}
.gx-privacy:not([data-phase="0"]) .gxp-you{transform:translateX(-92px)}
.gx-privacy:not([data-phase="0"]) .gxp-others{opacity:1;transform:translateX(92px)}
.gxp-card{position:relative;width:150px;aspect-ratio:3/4;overflow:hidden;border-radius:20px;background:#0b0e11;box-shadow:0 20px 44px #000b;isolation:isolate}
.gxp-card::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;box-shadow:inset 0 0 0 1px #ffffff29;pointer-events:none}
.gxp-view{display:block;width:100%;height:100%;object-fit:cover;object-position:center 55%;transition:opacity .5s ease}
.gxp-inset{position:absolute;top:8px;left:8px;width:32%;aspect-ratio:3/4;overflow:hidden;border:2px solid #fff;border-radius:10px;transition:opacity .4s ease}
.gxp-inset img{display:block;width:100%;height:100%;object-fit:cover}
.gxp-cipher{position:absolute;inset:0;z-index:2;display:grid;place-items:center;background:#0b0e11;color:#62c595;font:600 11px/1.75 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em;white-space:pre;opacity:0;transition:opacity .45s ease}
.gx-privacy[data-phase="2"] .gxp-others .gxp-view,.gx-privacy[data-phase="3"] .gxp-others .gxp-view,
.gx-privacy[data-phase="2"] .gxp-others .gxp-inset,.gx-privacy[data-phase="3"] .gxp-others .gxp-inset{opacity:0}
.gx-privacy[data-phase="2"] .gxp-cipher,.gx-privacy[data-phase="3"] .gxp-cipher{opacity:.78}
.gxp-side figcaption{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:12px;color:#ffffffc7;font-size:13px;font-weight:700;line-height:18px;white-space:nowrap;opacity:0;transform:translateY(6px);transition:opacity .4s ease .35s,transform .5s ease .35s}
.gxp-side figcaption svg{width:16px;height:16px;flex:none}
.gx-privacy:not([data-phase="0"]) figcaption{opacity:1;transform:none}
/* The lock: shackle and body are stacks of layers at different depths. */
.gxp-lock{position:absolute;z-index:4;left:50%;top:100px;width:80px;height:92px;margin:-50px 0 0 -40px;perspective:520px;opacity:0;transition:opacity .2s ease;pointer-events:none}
.gxp-lock::before{content:"";position:absolute;inset:-14px;border-radius:50%;background:radial-gradient(closest-side,#f0c95f42,transparent);opacity:0;transition:opacity .6s ease .3s}
.gx-privacy[data-phase="2"] .gxp-lock,.gx-privacy[data-phase="3"] .gxp-lock{opacity:1}
.gx-privacy[data-phase="3"] .gxp-lock::before{opacity:1}
.lk-float,.lk,.lk-body,.lk-shackle{transform-style:preserve-3d}
.lk-float,.lk{position:absolute;inset:0}
.lk-body{position:absolute;left:7px;right:7px;bottom:2px;height:54px}
.lk-b{position:absolute;inset:0;border-radius:14px;background:#8a6418;transform:translateZ(var(--z))}
.lk-b:nth-child(even){background:#76530f}
.lk-face{position:absolute;inset:0;overflow:hidden;border-radius:14px;background:linear-gradient(150deg,#fff3c4 0%,#f2cc63 30%,#d9a73a 62%,#a77920 100%);transform:translateZ(9px)}
.lk-back{background:linear-gradient(150deg,#e8c565,#a77920);transform:rotateY(180deg) translateZ(9px)}
.lk-hole{position:absolute;left:50%;top:14px;width:11px;height:11px;margin-left:-5.5px;border-radius:50%;background:#3a2907;box-shadow:inset 0 1px 2px #000b}
.lk-hole::after{content:"";position:absolute;left:3.5px;top:8px;width:4px;height:13px;border-radius:0 0 2px 2px;background:#3a2907}
.lk-shine{position:absolute;inset:-30% -70%;background:linear-gradient(100deg,transparent 42%,#ffffffb8 50%,transparent 58%);transform:translateX(-55%)}
.lk-shackle{position:absolute;left:50%;top:0;width:44px;height:52px;margin-left:-22px;transform:translateY(-13px);transition:transform .3s cubic-bezier(.6,0,.8,.4)}
.lk-s{position:absolute;inset:0;border:8px solid #aeb5be;border-bottom:0;border-radius:22px 22px 0 0;transform:translateZ(var(--z))}
.lk-s:first-child,.lk-s:last-child{border-color:#eef1f4}
.lk-s:nth-child(2),.lk-s:nth-child(6){border-color:#cfd5db}
.lk-ring{position:absolute;left:50%;top:63px;width:72px;height:72px;margin:-36px 0 0 -36px;border:2px solid #f2cc63;border-radius:50%;opacity:0}
.gx-privacy[data-phase="2"] .lk-float{animation:lk-drop .8s cubic-bezier(.2,.8,.25,1) both}
.gx-privacy[data-phase="3"] .lk-float{animation:lk-jolt .4s ease-out,lk-hover 3.4s ease-in-out .45s infinite}
.gx-privacy[data-phase="3"] .lk{animation:lk-turn 6s ease-in-out .35s infinite}
.gx-privacy[data-phase="3"] .lk-shackle{transform:none}
.gx-privacy[data-phase="3"] .lk-ring{animation:lk-ring 1.1s ease-out .12s}
.gx-privacy[data-phase="3"] .lk-shine{animation:lk-shine 4s ease-in-out .5s infinite}
@keyframes lk-drop{0%{transform:translateY(-120px) rotateY(-220deg) rotateX(30deg) scale(.55)}72%{transform:translateY(5px) rotateY(10deg) rotateX(-8deg) scale(1.05)}100%{transform:none}}
@keyframes lk-jolt{0%{transform:none}35%{transform:translateY(4px) scale(1.04,.95)}100%{transform:none}}
@keyframes lk-hover{0%,100%{transform:none}50%{transform:translateY(-5px)}}
@keyframes lk-turn{0%,100%{transform:none}25%{transform:rotateY(30deg) rotateX(-6deg)}75%{transform:rotateY(-30deg) rotateX(6deg)}}
@keyframes lk-ring{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(2.1)}}
@keyframes lk-shine{0%{transform:translateX(-55%)}35%,100%{transform:translateX(55%)}}
.gx-lines{min-height:48px;text-align:center}
.gx-sub{min-height:20px;margin:2px 0 0;color:#ffffff94;font-size:14px;line-height:20px;text-align:center}

/* You choose (V8.3): the app's share step. Circles with their cover and their
   faces; the moment flies into the chosen ones, and one of them answers. */
.gx-share{position:relative;gap:16px}
.gxs-wrap{display:grid;grid-template-columns:118px minmax(0,1fr);align-items:center;gap:20px;width:min(100%,480px)}
.gxs-moment{display:flex;flex-direction:column;align-items:center;gap:10px}
.gxs-card{position:relative;display:block;width:118px;aspect-ratio:3/4;overflow:hidden;border-radius:16px;background:#111;box-shadow:0 16px 36px #000b,inset 0 0 0 1px #ffffff1f}
.gxs-card>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 55%}
.gxs-inset{position:absolute;top:7px;left:7px;width:32%;aspect-ratio:3/4;overflow:hidden;border:2px solid #fff;border-radius:8px}
.gxs-inset img{display:block;width:100%;height:100%;object-fit:cover}
.gxs-keep{display:inline-flex;align-items:center;gap:5px;color:#ffffffa6;font-size:12px;font-weight:700;line-height:16px;white-space:nowrap;transition:color .3s}
.gxs-keep svg{width:13px;height:13px;flex:none}
.gx-share[data-state="sent"] .gxs-keep{color:#fff;animation:gxs-land .5s ease .55s}
.gxs-list{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.gx .gxs-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;padding:7px 12px 7px 7px;border:0;border-radius:18px;background:#ffffff0a;text-align:left;cursor:pointer;transition:background-color .25s,box-shadow .25s,opacity .35s}
.gx .gxs-row:hover{background:#ffffff14}
.gx .gxs-row[aria-pressed="true"]{background:#ffffff17;box-shadow:inset 0 0 0 1px #ffffff47}
.gx .gxs-row:disabled{cursor:default}
.gxs-cover{display:block;width:44px;height:44px;border-radius:50%;background-color:#222;background-size:175%;background-position:85% 80%;box-shadow:0 0 0 2px #000,0 0 0 3px #ffffff38}
.gxs-txt{min-width:0}
.gxs-txt b{display:block;overflow:hidden;font-size:15px;line-height:19px;text-overflow:ellipsis;white-space:nowrap}
.gxs-faces{display:flex;align-items:center;margin-top:4px}
.gxs-faces img{width:20px;height:20px;flex:none;border:1.5px solid #17191b;border-radius:50%;object-fit:cover}
.gxs-faces img+img{margin-left:-6px}
.gxs-faces small{margin-left:7px;overflow:hidden;color:#ffffff85;font-size:12px;text-overflow:ellipsis;white-space:nowrap;transition:opacity .25s}
.gxs-end{position:relative;display:grid;place-items:center;width:26px;height:26px}
.gxs-check{display:grid;place-items:center;width:24px;height:24px;border:1.5px solid #ffffff4d;border-radius:50%;color:#000;transition:background-color .2s,border-color .2s,opacity .25s,transform .3s}
.gxs-check svg{width:13px;height:13px;stroke-width:3;opacity:0;transition:opacity .2s}
.gxs-row[aria-pressed="true"] .gxs-check{border-color:#fff;background:#fff}
.gxs-row[aria-pressed="true"] .gxs-check svg{opacity:1}
.gxs-heart{position:absolute;right:-2px;top:50%;padding:4px 9px;border-radius:999px;background:#ff5d73;color:#fff;font-size:12px;font-style:normal;font-weight:800;line-height:14px;white-space:nowrap;opacity:0;transform:translateY(-50%) scale(.4);transform-origin:right center;transition:opacity .25s,transform .45s cubic-bezier(.2,.9,.25,1.5)}
.gxs-row.is-sent .gxs-check{opacity:0;transform:scale(.4)}
.gxs-row.is-sent .gxs-heart{opacity:1;transform:translateY(-50%);transition-delay:.3s}
.gxs-row.is-sent .gxs-faces small{opacity:0}
.gxs-row.is-sent .gxs-cover{animation:gxs-land .5s cubic-bezier(.2,.9,.25,1.4)}
.gx .gxs-row.is-out{opacity:.3}
.gxs-foot{display:grid;align-items:center;width:min(100%,480px);min-height:48px}
.gxs-go,.gxs-done{grid-area:1/1;transition:opacity .3s ease,visibility 0s .3s}
/* White like the app's button; in place there is no other main action. */
.gx .gxs-go{width:100%;height:48px;border:0;border-radius:24px;background:#fff;color:#000;font-size:16px;font-weight:700;box-shadow:inset 0 0 0 1px #ffffff4d;cursor:pointer;transition:background-color .25s,color .25s,opacity .3s ease,visibility 0s .3s}
.gx .gxs-go:hover{background:#e9e9e6}
.gx .gxs-go:disabled{background:#ffffff0d;color:#ffffff73;box-shadow:inset 0 0 0 1px #ffffff1f;cursor:default}
.gxs-done{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 12px;opacity:0;visibility:hidden}
.gx-share[data-state="sent"] .gxs-go{opacity:0;visibility:hidden}
.gx-share[data-state="sent"] .gxs-done{opacity:1;visibility:visible;transition:opacity .35s ease .7s,visibility 0s .7s}
.gxs-fly{position:absolute;z-index:5;margin:0;pointer-events:none;box-shadow:0 18px 40px #000c}
@keyframes gxs-land{0%{transform:none}40%{transform:scale(1.2)}100%{transform:none}}

/* Lived together: three conditions tick off, then the badge is struck. */
.gx.gx-badge{display:grid;grid-template-columns:150px minmax(0,1fr);align-items:center;gap:8px 24px;width:min(100%,460px);margin:0 auto}
.gxb-coin{position:relative;display:grid;place-items:center;width:150px;height:150px;margin-bottom:42px}
.gxb-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.gxb-ring circle{fill:none;stroke:#ffffff1a;stroke-width:4}
.gxb-ring .gxb-fill{stroke:#e8be54;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--p) * 100);transition:stroke-dashoffset .5s ease}
.gxb-coin>img{width:98px;height:98px;object-fit:contain;filter:grayscale(1) brightness(.6);opacity:.45;transform:scale(.86);transition:filter .5s,opacity .5s,transform .7s cubic-bezier(.2,.9,.25,1.35)}
.gxb-burst{position:absolute;inset:14px;border:2px solid #e8be54;border-radius:50%;opacity:0;pointer-events:none}
.gxb-name{position:absolute;top:calc(100% + 8px);left:50%;display:flex;flex-direction:column;align-items:center;white-space:nowrap;opacity:0;transform:translate(-50%,6px);transition:opacity .4s .15s,transform .5s .15s}
.gxb-name b{font-size:17px;line-height:22px}
.gxb-name small{color:#ffffff8a;font-size:12px;line-height:16px}
.gx-badge.is-earned .gxb-coin>img{filter:none;opacity:1;transform:none}
.gx-badge.is-earned .gxb-burst{animation:gx-burst .9s ease-out}
.gx-badge.is-earned .gxb-name{opacity:1;transform:translate(-50%,0)}
.gxb-rules{display:grid;gap:8px;width:100%;margin:0;padding:0;list-style:none;text-align:left}
.gxb-rules li{display:grid;grid-template-columns:36px minmax(0,1fr) 26px;align-items:center;gap:10px;padding:9px 12px;border-radius:16px;background:#ffffff0d;box-shadow:inset 0 0 0 1px #ffffff12;transition:box-shadow .3s,background-color .3s}
.gxb-ico{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#ffffff14}
.gxb-ico svg{width:18px;height:18px}
.gxb-rules span{min-width:0}
.gxb-rules small{display:block;color:#ffffff80;font-size:11px;font-weight:700;letter-spacing:.08em;line-height:15px;text-transform:uppercase}
.gxb-rules b{display:block;overflow:hidden;font-size:15px;line-height:20px;text-overflow:ellipsis;white-space:nowrap}
.gxb-check{display:grid;place-items:center;width:26px;height:26px;border:1.5px solid #ffffff33;border-radius:50%;color:#000;transition:background-color .25s,border-color .25s}
.gxb-check svg{width:14px;height:14px;stroke-width:2.8;opacity:0;transform:scale(.4);transition:opacity .2s,transform .35s cubic-bezier(.2,.9,.25,1.5)}
.gxb-rules li.is-met{background:#7fd3a80f;box-shadow:inset 0 0 0 1px #7fd3a84d}
.gxb-rules li.is-met .gxb-check{border-color:#7fd3a8;background:#7fd3a8}
.gxb-rules li.is-met .gxb-check svg{opacity:1;transform:none}
.gxb-again{grid-column:1/-1;justify-self:center}
@keyframes gx-burst{0%{opacity:.9;transform:scale(.7)}100%{opacity:0;transform:scale(1.5)}}

/* Your call: a request for the feature right; details go with it only if switched on. */
.gxo-card{position:relative;width:min(100%,390px);padding:16px;overflow:hidden;border-radius:24px;background:#121417;box-shadow:inset 0 0 0 1px #ffffff1a,0 20px 50px #0009;text-align:left}
.gxo-head{display:flex;align-items:center;gap:10px}
.gxo-brand{display:grid;flex:none;place-items:center;width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#d9905a,#8a4f2c);font-size:18px;font-weight:800}
.gxo-who{flex:1;min-width:0}
.gxo-who b{display:block;font-size:16px;line-height:20px}
.gxo-who small{display:block;color:#ffffffa0;font-size:13px;line-height:18px}
.gxo-body{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;gap:14px;margin-top:14px}
.gxo-thumb{display:block;width:72px;aspect-ratio:3/4;overflow:hidden;border-radius:12px}
.gxo-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.gxo-body dl{margin:0}
.gxo-body dl div{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:9px 0}
.gxo-body dl div+div{border-top:1px solid #ffffff14}
.gxo-body dt{color:#ffffff8a;font-size:13px}
.gxo-body dd{margin:0;font-size:14px;font-weight:700;text-align:right}
.gxo-opts{margin-top:12px;padding:11px 12px 12px;border-radius:16px;background:#ffffff08;box-shadow:inset 0 0 0 1px #ffffff12}
.gxo-opts p{display:flex;align-items:baseline;gap:8px;margin:0 0 9px}
.gxo-opts p b{font-size:13px}
.gxo-opts p small{color:#ffffff80;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.gxo-chips{display:flex;flex-wrap:wrap;gap:6px}
.gxo-chips button{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px 0 7px;border:1px solid #ffffff2e;border-radius:999px;background:none;color:#ffffffc0;font-size:13px;font-weight:700;cursor:pointer;transition:background-color .25s,border-color .25s,color .25s}
.gxo-chips i{display:grid;place-items:center;width:18px;height:18px;border:1.5px solid #ffffff4d;border-radius:50%;color:#000;transition:background-color .2s,border-color .2s}
.gxo-chips i svg{width:11px;height:11px;stroke-width:3.2;opacity:0;transition:opacity .2s}
.gxo-chips button[aria-pressed="true"]{border-color:#7fd3a8;background:#7fd3a81a;color:#fff}
.gxo-chips button[aria-pressed="true"] i{border-color:#7fd3a8;background:#7fd3a8}
.gxo-chips button[aria-pressed="true"] i svg{opacity:1}
.gxo-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.gxo-actions button{height:46px;border-radius:23px;font-size:15px;font-weight:700;cursor:pointer}
.gxo-no{border:1px solid #ffffff40;background:none}
.gxo-no:hover{background:#ffffff12}
.gx .gxo-yes{border:0;background:#fff;color:#000}
.gxo-yes:hover{background:#e9e9e6}
.gxo-result{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:20px;background:#121417fa;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-align:center;opacity:0;visibility:hidden;transform:scale(.97);transition:opacity .3s,transform .45s cubic-bezier(.2,.9,.25,1.15),visibility 0s .3s}
.gx-offer:not([data-state="ask"]) .gxo-result{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.gxo-mark{display:grid;flex:none;place-items:center;width:56px;height:56px;margin-bottom:8px;border-radius:50%;background:#7fd3a8;color:#000}
.gxo-mark svg{width:28px;height:28px;stroke-width:2.6}
.gx-offer[data-state="no"] .gxo-mark{background:#ffffff1f;color:#fff}
.gx-offer:not([data-state="ask"]) .gxo-mark{animation:gx-pop .5s cubic-bezier(.2,.9,.25,1.4)}
.gxo-result b{font-size:19px;line-height:24px}
.gxo-result small{color:#ffffffa8;font-size:14px;line-height:20px}
.gxo-result .gxo-detail{color:#fff;font-weight:600}
.gxo-result .gxo-detail:empty{display:none}
.gxo-again{margin-top:10px}
@keyframes gx-pop{0%{transform:scale(.4)}100%{transform:none}}

@media(max-width:540px){
  .gxp-stage{height:222px}
  .gxp-side{width:128px;margin-left:-64px}
  .gxp-card{width:128px;border-radius:17px}
  .gx-privacy:not([data-phase="0"]) .gxp-you{transform:translateX(-74px)}
  .gx-privacy:not([data-phase="0"]) .gxp-others{transform:translateX(74px)}
  .gxp-cipher{font-size:9.5px}
  .gxp-lock{top:85px;transform:scale(.86)}
  .gxs-wrap{grid-template-columns:84px minmax(0,1fr);gap:12px}
  .gxs-card{width:84px;border-radius:13px}
  .gxs-inset{top:5px;left:5px;border-radius:6px}
  .gxs-keep{white-space:normal;font-size:11px;line-height:14px;text-align:center}
  .gx .gxs-row{grid-template-columns:40px minmax(0,1fr) auto;gap:10px;padding:6px 8px 6px 6px;border-radius:16px}
  .gxs-cover{width:40px;height:40px}
  .gxs-txt b{font-size:14px;line-height:18px}
  .gxs-faces img:nth-child(n+4){display:none}
  /* Phones: coin left, rules right, so the panel stays short. */
  .gx.gx-badge{grid-template-columns:96px minmax(0,1fr);gap:8px 12px}
  .gxb-coin{width:96px;height:96px;margin-bottom:40px}
  .gxb-coin>img{width:62px;height:62px}
  .gxb-burst{inset:9px}
  .gxb-name b{font-size:15px;line-height:20px}
  .gxb-name small{font-size:11px}
  .gxb-rules{gap:6px}
  .gxb-rules li{grid-template-columns:30px minmax(0,1fr) 22px;gap:8px;padding:7px 9px;border-radius:14px}
  .gxb-ico{width:30px;height:30px}
  .gxb-ico svg{width:15px;height:15px}
  .gxb-rules b{font-size:14px;line-height:18px}
  .gxb-rules small{font-size:10px;line-height:13px}
  .gxb-check{width:22px;height:22px}
  .gxb-check svg{width:12px;height:12px}
  .gxo-card{padding:14px}
  .gxo-body{grid-template-columns:62px minmax(0,1fr);margin-top:12px}
  .gxo-thumb{width:62px}
  .gxo-opts{margin-top:10px}
  .gxo-actions{margin-top:12px}
}
@media(prefers-reduced-motion:reduce){
  .gx *,.gx *::before{transition-duration:.01ms!important;transition-delay:0s!important;animation:none!important}
}

/* Short phones (iPhone SE): the pinned hero and offers keep title, points and
   panel; the lead sentence goes and the privacy cards get smaller. */
@media(max-width:540px) and (max-height:740px){
  .hero .dsw-lead,.offers .dsw-lead,.hero .dsw-go,.offers .dsw-go{display:none}
  .hero .dsw-points,.offers .dsw-points{margin-top:10px}
  .gxp-stage{height:192px}
  .gxp-side{width:110px;margin-left:-55px}
  .gxp-card{width:110px;border-radius:15px}
  .gx-privacy:not([data-phase="0"]) .gxp-you{transform:translateX(-64px)}
  .gx-privacy:not([data-phase="0"]) .gxp-others{transform:translateX(64px)}
  .gxp-side figcaption{margin-top:8px}
  .gxp-cipher{font-size:8px}
  .gxp-lock{top:72px;transform:scale(.74)}
  .gx-privacy{gap:8px}
  .gx-privacy .gx-sub{display:none}
  .gx-privacy .gx-lines{min-height:24px}
  .dp-card{padding-top:16px;padding-bottom:12px}
}

/* ---------------------------------------------------------------- diary header (V8.5) */
/* The diary wears the app's header (SharedHeader: hybrid layout, glass style).
   Row one: calendar · YOMO with BETA beside it · map; row two: the Private Diary
   pill and the icon view switch. One glass band carries it and the feed runs
   under it. On the map the band and the switch step back and the map's dark
   scrim carries the header, as in You.tsx. */
.diary-shell{--dh:100px}
.diary-shell .diary-header{position:absolute;inset:0 0 auto;z-index:8;display:grid;grid-template-columns:44px minmax(0,1fr) auto 44px;grid-template-rows:44px 34px;grid-template-areas:'left brand brand right' 'middle middle tabs tabs';align-items:center;column-gap:8px;row-gap:6px;height:var(--dh);padding:6px 12px 10px;box-sizing:border-box;background:transparent;transform:none}
.diary-shell .diary-header::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:0 0 28px 28px;background:#000000b3;-webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%);box-shadow:inset 0 -1px 0 #ffffff1a,0 10px 28px #00000038;transition:opacity .4s ease}
.diary-shell .diary-feature-trigger{position:relative;top:auto;left:auto;right:auto;width:44px;height:44px;padding:0;border-radius:50%;background:transparent;color:#ffffffb3}
.diary-shell .diary-calendar-trigger{grid-area:left;justify-self:start}
.diary-shell .diary-map-trigger{grid-area:right;justify-self:end}
.diary-shell .diary-feature-trigger svg{width:21px;height:21px}
.diary-shell .diary-feature-trigger:hover{background:transparent;color:#fff}
.diary-header .diary-feature-trigger.is-on{background:#ffffff26;color:#fff}
.diary-shell .diary-wordmark{grid-area:brand;justify-self:center;flex-direction:row;align-items:flex-start;gap:4px}
.diary-shell .diary-brand{order:0;margin:0;font-size:30px;line-height:1;text-shadow:0 1px 2px #000000f2,0 0 12px #000000b8}
.diary-shell .diary-beta{order:1;margin-top:1px;color:#d6bb8abf;font-size:9px;line-height:9px;letter-spacing:.24em}
.diary-shell .diary-title{grid-area:middle;justify-self:start;margin:0;padding:3px 12px;border:1.5px solid #fff;border-radius:999px;background:transparent;font-size:15px;line-height:22px}
.diary-shell .diary-tabs{grid-area:tabs;justify-self:end;display:inline-flex;align-items:center;gap:2px;width:auto;height:34px;margin:0;padding:2px;box-sizing:border-box;border:1px solid #ffffff47;border-radius:999px;transition:opacity .35s ease,visibility 0s}
.diary-shell .diary-tab{width:40px;height:28px;min-height:0;padding:0;gap:0;border:0;border-radius:999px;background:transparent;color:#ffffffb3;font-size:0}
.diary-shell .diary-tab svg{width:16px;height:16px}
.diary-shell .diary-tab.is-active{border:0;background:#ffffffeb;color:#000}
.diary-shell .diary-viewport{top:0}
.diary-shell .diary-grid{margin-top:calc(var(--dh) + 8px)}
.diary-shell .dv-cal{padding-top:calc(var(--dh) + 6px)}
.diary-shell[data-view=map] .diary-header::before{opacity:0}
.diary-shell[data-view=map] .diary-tabs{opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s .3s}
@media(max-width:540px){
  .diary-shell{--dh:84px}
  .diary-shell .diary-header{grid-template-columns:38px minmax(0,1fr) auto 38px;grid-template-rows:38px 30px;column-gap:6px;row-gap:4px;padding:4px 9px 8px}
  .diary-shell .diary-header::before{border-radius:0 0 22px 22px}
  .diary-shell .diary-feature-trigger{width:38px;height:38px}
  .diary-shell .diary-feature-trigger svg{width:19px;height:19px}
  .diary-shell .diary-brand{font-size:25px}
  .diary-shell .diary-beta{font-size:8px;line-height:8px}
  .diary-shell .diary-title{padding:2px 10px;font-size:13px;line-height:20px}
  .diary-shell .diary-tabs{height:30px}
  .diary-shell .diary-tab{width:34px;height:24px}
  .diary-shell .diary-tab svg{width:14px;height:14px}
}
@media(prefers-reduced-motion:reduce){.diary-shell .diary-header::before,.diary-shell .diary-tabs{transition:none}}

/* ---------------------------------------------------------------- hand-offs (V8.5) */
/* The one moment of the story travels on: diary map → circle post → badge card
   (story.js, placeHandoff). The copies are plain cards; the post and the badge
   face show the same picture, cropped the same way. */
.hand-flight{z-index:7;border:0;background:#86b2c3;box-shadow:0 22px 50px #0000004d}
.hand-flight .archive-view{width:100%;object-position:center 55%}
.cv-post-view,.proof-front>img{object-position:center 55%}
.avatar-friends{background-image:url('../selfie.jpg');background-position:center 70%}

/* V8.7: the offers chapter shows only the café. The track is the pinned stage plus a
   fixed scroll run, so phones (where the stage is taller than the screen) get the same run. */
.offers-track{height:auto}
.offers-track::after{content:'';display:block;height:90svh}
/* V8.7: the badge's back carries the gift a friend added (not live yet: "Bald"). */
.proof-gift{display:inline-flex;align-items:center;gap:7px;max-width:100%;margin-top:4px;padding:6px 12px 6px 10px;border-radius:999px;background:#ffffff10;box-shadow:inset 0 0 0 1px #d4b65a59;color:#f4efe0;font-size:12px;font-weight:600;line-height:1.2;text-align:left}
.proof-gift svg{flex:none;width:15px;height:15px;fill:none;stroke:#d4b65a;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.proof-gift em{flex:none;padding:2px 7px;border-radius:999px;background:#d4b65a;color:#16120a;font-size:9px;font-style:normal;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
@media(max-width:540px){.proof-gift{gap:5px;padding:4px 9px 4px 7px;font-size:9.5px;white-space:nowrap}.proof-gift svg{width:12px;height:12px}.proof-gift em{padding:2px 5px;font-size:7.5px}}
/* V8.7: on short phones the badge detail now shows the gift point, so its lead goes too and the title stays in view. */
@media(max-width:540px) and (max-height:740px){.badge-chapter .dsw-lead{display:none}.badge-chapter .dsw-points{margin-top:10px}}

/* Private first (V8.10): a scene on the hero moment instead of a panel. The
   card stays as it is; the lock settles on its lower edge and closes once,
   then "only you" and your decision. Nothing keeps moving afterwards. */
.dp-scene .dp-card{inset:0;left:0;top:0;width:auto;padding:0;border:0;border-radius:0;background:none;box-shadow:none;translate:none;scale:none;transform:none;pointer-events:none}
.gx-pscene{position:absolute;inset:0;display:block}
.gx-pscene .gxp-lock{left:var(--cx,50%);top:var(--cb,70%);margin:-67px 0 0 -40px;transform:none;scale:calc(var(--ls,1) / var(--k,1))}
.gx-pscene:not([data-phase="0"]) .gxp-lock{opacity:1}
.gx-pscene[data-phase="1"] .lk-float{animation:gps-drop .7s cubic-bezier(.2,.8,.25,1) both}
.gx-pscene[data-phase="2"] .lk-shackle,.gx-pscene[data-phase="3"] .lk-shackle{transform:none}
.gx-pscene[data-phase="2"] .lk-float{animation:lk-jolt .4s ease-out}
.gx-pscene[data-phase="2"] .lk-ring{animation:lk-ring 1.1s ease-out .12s}
.gx-pscene[data-phase="2"] .lk-shine{animation:lk-shine 1.6s ease-in-out .3s both}
.gx-pscene[data-phase="2"] .gxp-lock::before,.gx-pscene[data-phase="3"] .gxp-lock::before{opacity:1}
@keyframes gps-drop{0%{transform:translateY(-34px) scale(.72);opacity:0}100%{transform:none;opacity:1}}
.gps-lines{position:absolute;left:var(--cx,50%);top:calc(var(--cb,70%) + (46px * var(--ls,1) - 6px) / var(--k,1));width:min(440px,calc(100vw - 32px));translate:-50% 0;scale:calc(1 / var(--k,1));transform-origin:50% 0;text-align:center;opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.gx-pscene[data-phase="2"] .gps-lines,.gx-pscene[data-phase="3"] .gps-lines{opacity:1;transform:none}
/* a soft shade keeps the lines readable where they cross the picture (phones) */
.gps-lines::before{content:"";position:absolute;inset:-22px -30px;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,#000000b8,#0000)}
@media(max-width:950px){.gps-lines{text-shadow:0 1px 10px #000}.gps-lines::before{inset:-26px -34px;background:radial-gradient(closest-side,#000000d9,#0000)}.gps-sub{color:#ffffffe0}}
@media(max-width:540px){.gps-say{font-size:17px;line-height:23px}.gps-sub{font-size:14px;line-height:21px}}
.gps-say{margin:0;color:#fff;font-size:19px;font-weight:700;line-height:25px;letter-spacing:-.01em}
.gps-sub{margin:4px 0 0;color:#ffffffb3;font-size:15.5px;line-height:23px;opacity:0;transition:opacity .45s ease}
.gx-pscene[data-phase="3"] .gps-sub{opacity:1}
.gps-again{display:inline-grid;place-items:center;width:30px;height:30px;margin-left:8px;padding:0;vertical-align:-9px;border:1px solid #ffffff2e;border-radius:50%;background:none;color:#ffffffb0;cursor:pointer;pointer-events:auto}
.gps-again svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gps-again:hover{background:#ffffff14}
.gps-again:focus-visible{outline:3px solid #d4b65a;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.gx-pscene .lk-float,.gx-pscene .lk-ring,.gx-pscene .lk-shine{animation:none!important}.gps-lines,.gps-sub{transition:none}}
/* Circle chapter (V8.10): calmer. The moment, the photo columns, Lena's answer
   and one "only these 5" stay; the line under her picture and the list of
   other circles repeat the chapter text and the chips, so they go. */
.circle-view .cv-privacy,.cv-others{display:none}
/* Desktop: under Lena's answer, clear of the moment (its flight to the next
   chapter is drawn above this column). Phones: between the selfie and the
   "just shared" label. */
.fx-cp-a{left:auto;right:-5%;top:auto;bottom:5%}
@media(min-width:951px) and (max-width:1250px){.fx-cp-a{bottom:-5%}}
@media(max-width:950px){.fx-cp-a{left:-4%;right:auto;top:45%;bottom:auto}}
/* V8.11: the badge gadget is one example; a line names other kinds of badges */
.gxb-more{grid-column:2;margin:-2px 0 0;color:#ffffff9e;font-size:12.5px;line-height:1.45;text-align:left}
@media(max-width:540px){.gxb-more{font-size:11px}}

/* V8.19: primary diary entry, secondary demo, separate privacy disclosure. */
.hero-actions .hero-start{margin:0;font-size:16px;padding-inline:22px}
.hero-copy > .more-pill{margin-top:16px}
/* 13.10.: Kalender wie in der App – Moments/Selfies-Schalter in der Kopfleiste (nur Anzeige), Beginn des nächsten Monats */
.diary-shell .diary-side-tabs{grid-area:tabs;justify-self:end;display:inline-flex;align-items:center;gap:2px;height:34px;margin-right:96px;padding:2px;box-sizing:border-box;border:1px solid #ffffff47;border-radius:999px;white-space:nowrap;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s .35s}
.diary-shell .diary-side-tabs span{height:28px;padding:0 8px;border-radius:999px;color:#ffffffb3;font-size:13px;font-weight:700;line-height:28px}
.diary-shell .diary-side-tabs span.is-active{background:#ffffffeb;color:#000}
.diary-shell[data-view=calendar] .diary-side-tabs{opacity:1;visibility:visible;transition:opacity .35s ease,visibility 0s}
.dvc-next .dvc-day{background:#0d0e10}
@media(max-width:540px){.diary-shell .diary-side-tabs{height:30px;margin-right:82px}.diary-shell .diary-side-tabs span{height:24px;padding:0 6px;font-size:11px;line-height:24px}}
/* 13.10. abends: Karte wie in der App – kompakte, durchscheinende Kopfleiste statt großem schwarzem Verlauf */
.diary-shell[data-diary-feature=map] .diary-header,.diary-shell[data-view=map] .diary-header{background:transparent}
.diary-shell[data-view=map] .diary-header::before{opacity:1;background:#2b2b28d9}
.diary-shell[data-view=map] .diary-tabs{opacity:1;visibility:visible;transition:opacity .3s ease,visibility 0s}
/* Teilen-Fenster: Titelbilder ganz zeigen (vorher stark vergrößert) */
.gxs-cover{background-size:cover;background-position:center}
/* Karten-Pins sind jetzt reine Fotos (ohne eingebautes Selfie): ganzes Bild statt Ausschnitt unten rechts */
.dvm-pin img{transform:none;object-position:center}