/* Couple moments — the widgets (client/core/momentCards.js) and the Home section
   (app/homeMoments.js), 2026-10-16. Self-contained: no app.css, no tokens required.

   The widgets live in a night-to-sunset world (violet → magenta → coral → peach) and are
   GLASS over it: white at 14%, a 28% hairline, a 24px blur. On the preview page the phone's
   wallpaper is that world; anywhere else (Home) a widget carries its own copy of it —
   `.mw` paints the world under its glass unless it sits inside `.mw-world` (`.mw-world.is-light`:
   a pale wallpaper, so the glass turns smoky to keep white words readable).
   A button's words never wrap: a `.mw-fit` row steps its type down (--fit), then drops its
   icons (.is-tight) — momentCards.js measures it. Every animation is transform/opacity and
   sits under prefers-reduced-motion: no-preference.
   .mw-*  the widgets + the compose sheets    .hm-*  the Home section */

:root {
  --mw-world: linear-gradient(135deg, #5B2A86 0%, #A23B8F 38%, #E8795A 76%, #F2A07B 100%);
  --mw-glass: rgba(255, 255, 255, 0.14);
  --mw-glass-2: rgba(255, 255, 255, 0.18);
  --mw-hair: rgba(255, 255, 255, 0.28);
  --mw-soft: rgba(255, 255, 255, 0.72);
  --mw-pink: #FF4F8B;
  --mw-her: #FF9EC4;
  --mw-him: #8DB8FF;
  --mw-flame: #FFB067;
  --mw-go: #34C759;
  --mw-stop: #FF3B30;
  --mw-spring: cubic-bezier(0.34, 1.45, 0.5, 1);
  --mw-font: var(--font-body, "Pretendard", system-ui, -apple-system, "Segoe UI", sans-serif);
}

/* ---- the base ------------------------------------------------------------------------ */
.mw {
  --mw-me: var(--mw-her);
  --mw-them: var(--mw-him);
  position: relative; box-sizing: border-box; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column;
  margin: 0; padding: 16px; border-radius: 26px;
  color: #fff; font-family: var(--mw-font); text-align: left;
  -webkit-font-smoothing: antialiased;
  border: 1px solid var(--mw-hair);
  /* its own world under the glass (Home); inside .mw-world only the glass */
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, 0.12), transparent 55%),
    radial-gradient(90% 70% at 100% 100%, rgba(255, 214, 170, 0.22), transparent 60%),
    linear-gradient(var(--mw-glass), var(--mw-glass)),
    var(--mw-world);
  box-shadow: 0 14px 34px -14px rgba(60, 14, 70, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.mw *, .mw *::before, .mw *::after { box-sizing: border-box; }
.mw-world .mw:not(.mw-island):not(.mw-lock):not(.mw-banner) {
  background: var(--mw-glass);
  -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%);
  box-shadow: 0 10px 28px -12px rgba(40, 8, 50, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.mw-world.is-light .mw:not(.mw-island):not(.mw-lock):not(.mw-banner) {
  background: rgba(46, 16, 64, 0.34);
  border-color: rgba(255, 255, 255, 0.34);
  -webkit-backdrop-filter: blur(26px) saturate(160%); backdrop-filter: blur(26px) saturate(160%);
}
.mw-world.is-light .mw { text-shadow: 0 1px 3px rgba(40, 10, 50, 0.28); }
button.mw { cursor: pointer; font: inherit; -webkit-tap-highlight-color: transparent; }

.mw.me-blue { --mw-me: var(--mw-him); }
.mw.them-pink { --mw-them: var(--mw-her); }
.mw.them-blue { --mw-them: var(--mw-him); }
.mw.is-same.them-pink { --mw-them: #FFD0E3; }
.mw.is-same.them-blue { --mw-them: #C9DCFF; }

.mw-ic { display: inline-flex; flex: none; line-height: 0; }
.mw-ic svg { display: block; }
.mw-title { margin: 0; font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; text-wrap: balance; }
.mw-label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mw-soft); line-height: 1.2; }

/* an initial in the person's colour, white letter, white ring */
.mw-ini {
  --sz: 28px;
  display: inline-grid; place-items: center; flex: none;
  width: var(--sz); height: var(--sz); border-radius: 50%;
  border: 2px solid #fff; color: #fff;
  font: 800 calc(var(--sz) * 0.44) / 1 var(--mw-font);
  text-shadow: 0 1px 2px rgba(80, 20, 60, 0.35);
  box-shadow: 0 2px 6px rgba(40, 8, 50, 0.25);
}
.mw-ini.is-pink { background: linear-gradient(135deg, #FFB3D2 0%, #FF6FA5 100%); }
.mw-ini.is-blue { background: linear-gradient(135deg, #A9C9FF 0%, #5C8FF0 100%); }

/* "A  Angie · 2m" */
.mw-chip {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
  padding: 4px 11px 4px 4px; border-radius: 999px;
  background: rgba(24, 8, 34, 0.38);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-size: 13px; font-weight: 600; line-height: 1;
}
.mw-chip-t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-chip.is-compact { gap: 5px; padding: 3px 9px 3px 3px; font-size: 12px; }
.mw-top { position: relative; z-index: 2; display: flex; align-items: flex-start; min-width: 0; }

/* buttons: glass by default, the pink one with a heart, a white pill.
   --bfs / --bpx are a button's own type size and side padding; a .mw-fit row scales both. */
.mw-btn {
  --bfs: 14px; --bpx: 12px; --bgap: 7px;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--bgap); min-width: 0;
  min-height: 44px; padding: 6px var(--bpx); margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 14px;
  background: var(--mw-glass-2); color: #fff;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  font: 700 var(--bfs) / 1.15 var(--mw-font); text-align: center; white-space: nowrap;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, background-color 0.15s ease, opacity 0.15s ease;
}
.mw-btn:hover { background: rgba(255, 255, 255, 0.24); }
.mw-btn:active { transform: scale(0.96); }
.mw-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.mw-btn-l { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-fit .mw-btn {
  font-size: calc(var(--bfs) * var(--fit, 1));
  padding-left: calc(var(--bpx) * var(--fit, 1)); padding-right: calc(var(--bpx) * var(--fit, 1));
  gap: calc(var(--bgap) * var(--fit, 1));
}
.mw-fit.is-tight .mw-btn > .mw-ic { display: none; }
.mw-btn.is-primary {
  border-color: transparent; background: var(--mw-pink);
  box-shadow: 0 8px 18px -8px rgba(255, 50, 120, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.mw-btn.is-primary:hover { background: #FF6399; }
.mw-btn.is-white { border-color: transparent; background: #fff; color: var(--mw-pink); box-shadow: 0 6px 14px -8px rgba(40, 8, 50, 0.5); text-shadow: none; }
.mw-btn.is-white:hover { background: #FFF3F8; }
.mw-btn.is-accept { border-color: transparent; background: var(--mw-go); box-shadow: 0 8px 18px -10px rgba(30, 160, 70, 0.9); }
.mw-btn.is-accept:hover { background: #45D468; }
.mw-btn.is-decline { border-color: transparent; background: var(--mw-stop); box-shadow: 0 8px 18px -10px rgba(220, 40, 30, 0.9); }
.mw-btn.is-decline:hover { background: #FF5247; }
.mw-ic.is-hangup svg { transform: rotate(135deg); }
.mw-btn.is-busy { opacity: 0.6; pointer-events: none; }

/* the card itself opens the moments page: a real button under the words */
.mw-open {
  position: absolute; inset: 0; z-index: 1; margin: 0; padding: 0; border: 0; border-radius: inherit;
  background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mw-open:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.mw.is-openable > :not(.mw-open):not(.mw-photo):not(.mw-shade):not(.mw-hero) { position: relative; z-index: 2; pointer-events: none; }
.mw.is-openable .mw-btn, .mw.is-openable .mw-invite { pointer-events: auto; }
.mw.is-openable:has(.mw-open:active):not(:has(.mw-btn:active)) { transform: scale(0.985); }
.mw.is-openable { transition: transform 0.15s ease; }

/* the photo full-bleed, a dark fade at the foot so the words stay readable */
.mw-photo { position: absolute; inset: 0; z-index: 0; }
.mw-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mw-shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 6, 30, 0.28) 0%, transparent 26%, transparent 38%, rgba(20, 6, 30, 0.78) 100%);
}
.mw-shade.is-top { background: linear-gradient(180deg, rgba(20, 6, 30, 0.42) 0%, transparent 42%); }
.mw.mw-moment-large.is-doodle .mw-shade { background: linear-gradient(180deg, transparent 40%, rgba(20, 6, 30, 0.45) 100%); }

/* ---- moment-large ------------------------------------------------------------------ */
.mw-moment-large { min-height: 354px; justify-content: space-between; gap: 12px; }
.mw-hero {
  position: absolute; z-index: 0; left: 50%; top: 40%; translate: -50% -50%;
  width: 116px; height: 116px; border-radius: 50%; pointer-events: none;
  display: grid; place-items: center; color: var(--mw-pink);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.78) 58%, rgba(255, 255, 255, 0) 72%);
  filter: drop-shadow(0 10px 22px rgba(255, 60, 130, 0.45));
}
.mw-hero .mw-ic svg { width: 64px; height: 64px; }
.mw.has-photo .mw-hero { display: none; }
.mw-foot { position: relative; z-index: 2; display: grid; gap: 12px; margin-top: auto; }
.mw-moment-large .mw-title { font-size: 30px; text-shadow: 0 2px 12px rgba(30, 6, 40, 0.35); }
.mw-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.mw-grid2 .mw-btn { --bfs: 13.5px; --bpx: 10px; }

/* ---- moment-medium ----------------------------------------------------------------- */
.mw-moment-medium { flex-direction: row; gap: 12px; min-height: 158px; padding: 14px; }
.mw-thumb { flex: none; width: 112px; align-self: stretch; border-radius: 16px; overflow: hidden; background: rgba(255, 255, 255, 0.12); }
.mw-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mw-mm-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.mw-mm-body .mw-chip { align-self: flex-start; }
.mw-moment-medium .mw-title { font-size: 21px; margin-top: auto; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mw-row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.mw-row2 .mw-btn { --bfs: 13px; --bpx: 9px; --bgap: 5px; min-height: 40px; padding-top: 4px; padding-bottom: 4px; }

/* ---- couple-large ------------------------------------------------------------------ */
.mw-couple-large { min-height: 354px; gap: 10px; }
.mw-cl-head {
  display: flex; align-items: center; gap: 10px; min-width: 0; width: 100%;
  margin: -4px 0 0; padding: 4px 0; border: 0; border-radius: 14px; background: none; color: inherit;
  font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, opacity 0.12s ease;
}
.mw-cl-head:active { transform: scale(0.98); opacity: 0.85; }
.mw-cl-head:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.mw-pair { display: inline-flex; flex: none; }
.mw-pair .mw-ini + .mw-ini { margin-left: -10px; }
.mw-names { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-streak { display: inline-flex; align-items: center; gap: 3px; flex: none; color: var(--mw-flame); }
.mw-streak img { display: block; width: 22px; height: 22px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(255, 120, 40, 0.45)); }
.mw-streak b { display: inline-block; font-size: 16px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.mw-score { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; margin-top: 4px; }
.mw-side { display: grid; gap: 2px; min-width: 0; }
.mw-side.is-them { justify-items: end; text-align: right; }
.mw-num { display: inline-block; font-size: 46px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.mw-side.is-me .mw-num, .mw-side.is-me .mw-who { color: var(--mw-me); }
.mw-side.is-them .mw-num, .mw-side.is-them .mw-who { color: var(--mw-them); }
.mw-who { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mw-side .mw-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mw-btn.mw-turn {
  --bfs: 12.5px;
  min-height: 30px; padding: 0 8px 0 12px; gap: 2px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.22); white-space: nowrap;
}
.mw-turn-gap { width: 6px; }
.mw-bars { display: flex; gap: 3px; height: 8px; }
.mw-bars i { display: block; min-width: 4px; flex-basis: 0; border-radius: 99px; transition: flex-grow 0.6s cubic-bezier(0.2, 1, 0.3, 1); }
.mw-bars i.is-me { background: var(--mw-me); }
.mw-bars i.is-them { background: var(--mw-them); }
.mw-big-row { display: flex; margin-top: 4px; }
.mw-btn.is-big { --bfs: 16px; flex: 1; min-height: 50px; border-radius: 16px; }
/* three chips, each as wide as its words: "Goodnight" never breaks in two */
.mw-chips3 { display: flex; gap: 8px; min-width: 0; }
.mw-chips3 .mw-btn { flex: 1 1 auto; }
.mw-btn.is-chip { --bfs: 13px; --bpx: 8px; --bgap: 5px; min-height: 38px; padding-top: 4px; padding-bottom: 4px; border-radius: 12px; }
.mw-invite {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  margin-top: auto; padding: 6px 8px 6px 6px; border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.24); background: rgba(255, 255, 255, 0.12); color: #fff;
  font-family: var(--mw-font); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease;
}
.mw-invite:active { transform: scale(0.98); }
.mw-coin { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, 0.22); overflow: hidden; }
.mw-coin img { display: block; width: 38px; height: 38px; object-fit: contain; }
.mw-invite-t { display: grid; gap: 2px; min-width: 0; }
.mw-invite-t b { font-size: calc(14px * var(--fit, 1)); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-invite-t span { font-size: 12px; color: var(--mw-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-invite-go { color: var(--mw-soft); }

/* ---- week-medium ------------------------------------------------------------------- */
.mw-week-medium { flex-direction: row; gap: 12px; min-height: 158px; padding: 14px; }
.mw-wk { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; justify-content: space-between; }
.mw-wk-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mw-wk-top .mw-streak img { width: 18px; height: 18px; }
.mw-wk-top .mw-streak b { font-size: 14px; }
.mw-wk-score { display: flex; align-items: baseline; gap: 6px; font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.mw-wk-score b { display: inline-block; }
.mw-wk-score .is-me { color: var(--mw-me); }
.mw-wk-score .is-them { color: var(--mw-them); }
.mw-colon { color: rgba(255, 255, 255, 0.55); font-weight: 700; translate: 0 -3px; }
.mw-wk-names { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; font-weight: 700; min-width: 0; }
.mw-wk-names > span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.mw-wk-names > span > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-wk-names .is-me { color: var(--mw-me); }
.mw-wk-names .is-them { color: var(--mw-them); }
.mw-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: currentColor; }
.mw-wk-btns { flex: none; width: 116px; display: grid; grid-template-rows: 1fr 1fr; gap: 8px; }
.mw-wk-btns .mw-btn { --bfs: 14px; --bpx: 8px; border-radius: 16px; padding-top: 4px; padding-bottom: 4px; }

/* ---- photo-small / reply-small ----------------------------------------------------- */
.mw-photo-small, .mw-reply-small { aspect-ratio: 1; min-height: 0; border-radius: 22px; padding: 12px; }
.mw-photo-small { width: 100%; transition: transform 0.15s ease; }
.mw-empty {
  position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 30px 10px 12px;
}
.mw-empty img { width: 64%; max-width: 110px; height: auto; filter: drop-shadow(0 8px 12px rgba(40, 8, 50, 0.3)); }
.mw-empty span { font-size: 13px; font-weight: 700; color: var(--mw-soft); white-space: nowrap; }
.mw-photo-small.has-photo .mw-empty { display: none; }
.mw-photo-small:active { transform: scale(0.97); }
.mw-photo-small:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.mw-photo-small::after { content: ""; position: absolute; inset: 0; z-index: 3; background: #fff; opacity: 0; pointer-events: none; }
.mw-reply-small { justify-content: space-between; gap: 6px; }
.mw-reply-small .mw-title { font-size: 22px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: auto; }
.mw-one { display: flex; min-width: 0; }
.mw-one .mw-btn { flex: 1; }
.mw-reply-small .mw-btn { --bfs: 13.5px; --bpx: 10px; --bgap: 5px; min-height: 36px; border-radius: 999px; }

/* ---- lock screen: white, as iOS tints them --------------------------------------------- */
.mw.mw-lock {
  padding: 0; border: 0; box-shadow: none; overflow: visible;
  background: none; color: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
button.mw-lock { cursor: pointer; }
.mw.mw-lock-circ {
  width: 72px; height: 72px; border-radius: 50%; align-items: center; justify-content: center; gap: 0;
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.mw-lock-circ .mw-ring {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.92);
}
.mw-lock-circ .mw-ring b { font-size: 26px; font-weight: 700; line-height: 1; }
.mw-badge {
  position: absolute; right: 2px; bottom: 2px; display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%; background: #fff; color: #2A1838;
  box-shadow: 0 0 0 2px rgba(40, 14, 50, 0.35);
}
.mw-lock-circ.is-streak b { font-size: 19px; font-weight: 700; line-height: 1; margin-top: 2px; }
.mw.mw-lock-rect {
  width: 160px; height: 72px; justify-content: center; gap: 3px; padding: 6px 10px;
  border-radius: 16px; text-align: left; font-family: var(--mw-font);
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.mw-lr-1 { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 15px; font-weight: 700; line-height: 1.15; }
.mw-lr-1 span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-lr-2 { display: flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 500; line-height: 1.2; color: rgba(255, 255, 255, 0.78); }
span.mw-lr-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mw-lock-inline { flex-direction: row; align-items: center; gap: 5px; font-size: 16px; font-weight: 600; line-height: 1.2; white-space: nowrap; }

/* ---- the Dynamic Island + the Live Activity --------------------------------------------- */
.mw.mw-island {
  padding: 0; border: 0; overflow: hidden; background: #000; color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.mw-island.is-compact {
  flex-direction: row; align-items: center; justify-content: space-between;
  width: 250px; height: 37px; border-radius: 999px; padding: 0 12px 0 6px;
}
.mw-is-lead { display: inline-flex; align-items: center; }
.mw-is-lead .mw-ini { border-width: 1.5px; box-shadow: none; }
.mw-is-gap { flex: 1; }
.mw-is-trail { display: inline-flex; align-items: center; gap: 4px; color: var(--mw-pink); font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.mw-is-trail.is-done { color: #7BE3A6; }
.mw-is-calling { color: var(--mw-go); }
.mw-is-flame-t { color: var(--mw-flame); }
.mw-island.is-minimal {
  width: 37px; height: 37px; border-radius: 50%; align-items: center; justify-content: center; color: var(--mw-pink);
}
.mw-island.is-minimal.is-done { color: #7BE3A6; }
.mw-island.is-expanded {
  width: 370px; max-width: 100%; border-radius: 44px; padding: 14px 18px 18px; gap: 10px;
}
.mw-ie-top { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.mw-ie-top .mw-ini { box-shadow: none; }
.mw-ie-time { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.6); padding-right: 4px; white-space: nowrap; }
.mw-ie-title { display: block; text-align: center; font-size: 18px; font-weight: 700; line-height: 1.2; margin-top: -6px; text-wrap: balance; }
.mw-ie-sub { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 18px; color: rgba(255, 255, 255, 0.62); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.mw-ie-sub.is-done { color: #7BE3A6; }
.mw-island .mw-btn:not(.is-primary):not(.is-accept):not(.is-decline) { background: rgba(255, 255, 255, 0.14); border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.mw-island .mw-row2 .mw-btn { --bfs: 14px; --bpx: 12px; min-height: 44px; border-radius: 999px; }
.mw-banner { width: 100%; max-width: 380px; border-radius: 24px; padding: 14px; gap: 12px; }
.mw-world .mw.mw-banner {
  background: rgba(40, 14, 54, 0.32);
  -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%);
}
.mw-bn-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mw-bn-t { flex: 1; min-width: 0; display: grid; gap: 3px; }
.mw-bn-t > b { display: block; font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-bn-t > span { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; color: var(--mw-soft); }
.mw-bn-t > span > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-bn-t > span.is-done { color: #9EEDBE; }
.mw-bn-time { flex: none; align-self: flex-start; font-size: 12.5px; color: var(--mw-soft); white-space: nowrap; }
.mw-banner .mw-row2 .mw-btn { min-height: 40px; border-radius: 999px; }

/* the pictures a Live Activity leads with */
.mw-ini-wrap { position: relative; display: inline-flex; flex: none; }
.mw-ini-badge {
  position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center;
  width: 21px; height: 21px; border-radius: 50%; background: #fff; color: var(--mw-pink);
  box-shadow: 0 0 0 2px #000;
}
.mw-banner .mw-ini-badge { box-shadow: 0 0 0 2px rgba(40, 14, 54, 0.5); }
.mw-is-photo {
  --sz: 40px;
  position: relative; display: block; flex: none; width: var(--sz); height: var(--sz); border-radius: 50%; overflow: hidden;
  background: rgba(255, 255, 255, 0.14); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85);
}
.mw-island.is-expanded .mw-is-photo, .mw-banner .mw-is-photo { border-radius: 14px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.5); }
.mw-is-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mw-shutter-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.mw-ringing { --sz: 44px; position: relative; display: inline-grid; place-items: center; flex: none; width: var(--sz); height: var(--sz); }
.mw-ringing > i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(52, 199, 89, 0.9); opacity: 0; }
.mw-ringing > .mw-ini { position: relative; z-index: 1; box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.35); }
.mw-call-badge {
  --sz: 24px; position: relative; display: inline-grid; place-items: center; flex: none;
  width: var(--sz); height: var(--sz); border-radius: 50%; background: var(--mw-go); color: #fff;
}
.mw-call-badge > i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(52, 199, 89, 0.9); opacity: 0; }
.mw-call-badge > .mw-ic { position: relative; z-index: 1; }
.mw-cam-badge {
  --sz: 44px; position: relative; display: inline-grid; place-items: center; flex: none;
  width: var(--sz); height: var(--sz); border-radius: 50%; color: #fff;
  background: linear-gradient(135deg, #FF9CC2 0%, #FF4F8B 100%);
}
.mw-cam-badge > .mw-ic { position: relative; z-index: 1; }
.mw-cam-flash { position: absolute; inset: -35%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.4) 30%, rgba(255, 255, 255, 0) 62%); opacity: 0; pointer-events: none; }
.mw-hug { --sz: 36px; position: relative; display: inline-flex; align-items: center; flex: none; height: var(--sz); }
.mw-hug-a, .mw-hug-b { display: inline-flex; position: relative; }
.mw-hug-a { z-index: 1; }
.mw-hug-b { margin-left: calc(var(--sz) * -0.3); }
.mw-hug .mw-ini { box-shadow: none; }
.mw-hug-hearts { position: absolute; left: 50%; top: 0; width: 0; height: 0; z-index: 2; }
.mw-float { position: absolute; left: -6px; top: -4px; color: var(--mw-pink); opacity: 0; line-height: 0; }
.mw-float svg { display: block; }
.mw-flame { --sz: 40px; position: relative; display: inline-grid; place-items: center; flex: none; width: var(--sz); height: var(--sz); }
.mw-flame::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 176, 103, 0.55), rgba(255, 176, 103, 0) 70%); }
.mw-flame img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; transform-origin: 50% 88%; }
.mw-count { display: inline-block; font-variant-numeric: tabular-nums; color: var(--mw-flame); }
.mw-wave { display: inline-flex; align-items: center; gap: 2px; height: 14px; flex: none; }
.mw-wave i { display: block; width: 3px; height: 100%; border-radius: 2px; background: var(--mw-go); transform: scaleY(0.35); }
.mw-island.is-ringing .mw-ie-sub, .mw-banner.is-ringing .mw-bn-t > span { color: #8EE6A8; }
.mw-island.is-minimal.is-ringing { background: #000; }

/* ---- connect --------------------------------------------------------------------------- */
.mw-connect { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 12px 14px; padding: 16px; }
.mw-cn-art { flex: none; width: 92px; height: auto; filter: drop-shadow(0 8px 14px rgba(40, 8, 50, 0.35)); }
.mw-cn-copy { flex: 1 1 160px; min-width: 0; display: grid; gap: 3px; }
.mw-cn-copy b { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }
.mw-cn-copy span { font-size: 13.5px; line-height: 1.35; color: var(--mw-soft); }
.mw-connect .mw-one { flex: 1 1 100%; }
.mw-connect .mw-btn { --bfs: 15px; min-height: 46px; border-radius: 999px; }

/* ---- a little life ----------------------------------------------------------------------- */
/* hearts out of a button that sent something (momentCards.js burst) */
.mw-burst { position: fixed; z-index: 99; width: 0; height: 0; pointer-events: none; }
.mw-burst i { position: absolute; left: -8px; top: -8px; color: var(--mw-pink); line-height: 0; opacity: 0; filter: drop-shadow(0 2px 3px rgba(60, 10, 40, 0.25)); }
.mw-burst i.is-white { color: #fff; }
.mw-burst svg { display: block; }

@media (prefers-reduced-motion: no-preference) {
  .mw-hero .mw-ic, .mw-ic.is-beat { animation: mw-beat 2.4s ease-in-out infinite; }
  .mw-turn { animation: mw-nudge 2.8s ease-in-out infinite; }
  .mw-btn.is-hello { animation: mw-hello 0.9s var(--mw-spring) var(--hello, 0ms) both; }
  .mw-btn.is-hello::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    border: 2px solid rgba(255, 255, 255, 0.75);
    animation: mw-ripple 1s ease-out calc(var(--hello, 0ms) + 120ms) both;
  }
  .mw-burst i { animation: mw-fly 0.95s cubic-bezier(0.2, 0.7, 0.3, 1) var(--t, 0ms) both; }
  .is-counting { animation: mw-tick 0.65s ease-out; }
  .mw-photo-small.is-arrived::after { animation: mw-flash-out 0.75s ease-out var(--hello, 0ms) both; }
  .mw-photo-small.is-arrived .mw-photo img { animation: mw-settle 1.1s cubic-bezier(0.2, 1, 0.3, 1) var(--hello, 0ms) both; }
  .mw-is-photo.is-arrived .mw-shutter-flash { animation: mw-flash-out 0.8s ease-out calc(var(--hello, 0ms) + 0.18s) both; }
  .mw-is-photo.is-arrived img { animation: mw-settle 1s cubic-bezier(0.2, 1, 0.3, 1) calc(var(--hello, 0ms) + 0.18s) both; }
  .mw-ringing > i { animation: mw-ring 1.8s ease-out infinite; }
  .mw-call-badge > i { animation: mw-ring-sm 1.8s ease-out infinite; }
  .mw-ringing > i + i, .mw-call-badge > i + i { animation-delay: 0.9s; }
  .mw-call-badge > .mw-ic { animation: mw-shake 1.8s ease-in-out infinite; }
  .mw-wave i { animation: mw-wave 1.1s ease-in-out infinite; }
  .mw-wave i.is-1 { animation-delay: -0.15s; }
  .mw-wave i.is-2 { animation-delay: -0.45s; }
  .mw-wave i.is-3 { animation-delay: -0.3s; }
  .mw-wave i.is-4 { animation-delay: -0.7s; }
  .mw-wave i.is-5 { animation-delay: -0.55s; }
  .mw-wave i.is-6 { animation-delay: -0.9s; }
  .mw-cam-badge.is-pop .mw-cam-flash { animation: mw-cam-flash 2.6s ease-out infinite; }
  .mw-cam-badge.is-pop > .mw-ic { animation: mw-cam-pop 2.6s ease-out infinite; }
  .mw-hug-a { animation: mw-hug-a 3.2s var(--mw-spring) infinite; }
  .mw-hug-b { animation: mw-hug-b 3.2s var(--mw-spring) infinite; }
  .mw-float { animation: mw-float 3.2s ease-out infinite; }
  .mw-float.is-0 { --x: -14px; animation-delay: 0.05s; }
  .mw-float.is-1 { --x: 2px; animation-delay: 0.2s; }
  .mw-float.is-2 { --x: 15px; animation-delay: 0.35s; }
  .mw-flame img { animation: mw-flicker 1.7s ease-in-out infinite; }
  .mw-flame::before { animation: mw-glow 1.7s ease-in-out infinite; }
}
@keyframes mw-beat { 0%, 60%, 100% { transform: scale(1); } 15% { transform: scale(1.14); } 30% { transform: scale(0.97); } 45% { transform: scale(1.07); } }
@keyframes mw-nudge { 0%, 70%, 100% { transform: none; } 80% { transform: translateX(2px); } 90% { transform: translateX(-1px); } }
@keyframes mw-hello { 0% { transform: scale(1); } 35% { transform: scale(1.045); } 100% { transform: scale(1); } }
@keyframes mw-ripple { 0% { opacity: 0.85; transform: scale(1); } 100% { opacity: 0; transform: scale(1.08, 1.3); } }
@keyframes mw-fly {
  0% { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(0.3); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) scale(var(--s)); }
}
@keyframes mw-tick { 0% { transform: scale(1); } 30% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes mw-flash-out { 0% { opacity: 0.92; } 100% { opacity: 0; } }
@keyframes mw-settle { 0% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes mw-ring { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.75); } }
@keyframes mw-ring-sm { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.32); } }
@keyframes mw-shake { 0%, 50%, 100% { transform: rotate(0); } 8%, 24%, 40% { transform: rotate(-14deg); } 16%, 32% { transform: rotate(14deg); } }
@keyframes mw-wave { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
@keyframes mw-cam-flash { 0%, 62% { opacity: 0; transform: scale(0.4); } 68% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes mw-cam-pop { 0%, 60%, 100% { transform: scale(1); } 66% { transform: scale(0.86); } 74% { transform: scale(1.1); } }
@keyframes mw-hug-a { 0%, 92%, 100% { transform: translateX(-38%); } 26% { transform: translateX(6%); } 34%, 80% { transform: translateX(0); } }
@keyframes mw-hug-b { 0%, 92%, 100% { transform: translateX(38%); } 26% { transform: translateX(-6%) scale(1.06); } 34%, 80% { transform: translateX(0) scale(1); } }
@keyframes mw-float {
  0%, 30% { opacity: 0; transform: translate(0, 4px) scale(0.4); }
  40% { opacity: 1; }
  78%, 100% { opacity: 0; transform: translate(var(--x, 0), -30px) scale(1); }
}
@keyframes mw-flicker {
  0%, 100% { transform: scale(1, 1) rotate(0); }
  25% { transform: scale(0.96, 1.06) rotate(-2deg); }
  50% { transform: scale(1.03, 0.97) rotate(1.5deg); }
  75% { transform: scale(0.98, 1.04) rotate(-1deg); }
}
@keyframes mw-glow { 0%, 100% { opacity: 0.75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) {
  .mw-burst { display: none; }
  .mw-bars i, .mw-btn, .mw.is-openable, .mw-photo-small, .mw-cl-head { transition: none; }
}

/* ---- the compose sheets (client/core/momentCompose.js) --------------------------------- */
.mw-sheet {
  position: fixed; inset: 0; z-index: 96; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(20, 8, 30, 0.55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-family: var(--mw-font); color: #fff;
  animation: mw-fade 0.2s ease both;
}
.mw-sheet.is-leaving { animation: mw-fade 0.18s ease reverse both; }
@keyframes mw-fade { from { opacity: 0; } }
.mw-panel {
  position: relative; width: 100%; max-width: 460px; max-height: 100%; overflow: auto;
  display: flex; flex-direction: column; gap: 14px;
  padding: 14px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  border-radius: 28px 28px 0 0;
  background: radial-gradient(120% 70% at 0% 0%, rgba(255, 255, 255, 0.1), transparent 60%), var(--mw-world);
  box-shadow: 0 -12px 40px rgba(20, 6, 30, 0.4);
  animation: mw-rise 0.32s cubic-bezier(0.2, 1, 0.3, 1) both;
}
@keyframes mw-rise { from { transform: translateY(40px); opacity: 0; } }
@media (min-width: 640px) {
  .mw-sheet { align-items: center; padding: 24px; }
  .mw-panel { border-radius: 28px; padding-bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) { .mw-sheet, .mw-panel { animation: none; } }
.mw-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: env(safe-area-inset-top, 0px); }
.mw-sheet-head h2 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -0.01em; }
.mw-x {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.16); color: #fff; cursor: pointer;
}
.mw-stage {
  position: relative; width: 100%; aspect-ratio: 1; border-radius: 22px; overflow: hidden;
  background: rgba(20, 6, 30, 0.35); border: 1px solid rgba(255, 255, 255, 0.24);
}
/* In a sheet `hidden` means hidden: the parts below set a display of their own, which beats the
   browser's [hidden] — that is how the no-camera card, an empty still and Retake / Send all showed
   over a live camera. */
.mw-panel [hidden] { display: none !important; }
/* The sheets' stage is not the widgets' art stage of the same name (momentWidgets.css, loaded
   after this file wherever a widget is drawn, would let it shrink and drop every tap): a square
   that takes the pen. */
.mw-panel > .mw-stage { flex: none; display: block; pointer-events: auto; }
.mw-stage video, .mw-stage .mw-still {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.mw-stage video { transform: scaleX(-1); }
.mw-count {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  font-size: 110px; font-weight: 800; color: #fff; text-shadow: 0 6px 30px rgba(20, 6, 30, 0.5);
}
.mw-count:empty { display: none; }
.mw-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.mw-flash.is-on { animation: mw-flash 0.35s ease-out; }
@keyframes mw-flash { 0% { opacity: 0.9; } 100% { opacity: 0; } }
/* no camera (none here, or no permission): a camera-off mark, the reason, Choose a photo */
.mw-fallback {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 20px; text-align: center;
}
.mw-fallback-mark {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.9);
}
.mw-fallback p { margin: 0; max-width: 300px; font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, 0.85); }
.mw-controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; min-height: 76px; }
.mw-controls > :first-child { justify-self: start; }
.mw-controls > :last-child { justify-self: end; }
.mw-shutter {
  width: 74px; height: 74px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 4px solid #fff; background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 6px 18px rgba(20, 6, 30, 0.35);
  transition: transform 0.12s ease;
}
.mw-shutter::after { content: ""; display: block; width: 56px; height: 56px; margin: 5px; border-radius: 50%; background: #fff; }
.mw-shutter:active { transform: scale(0.92); }
.mw-shutter:disabled { opacity: 0.45; cursor: default; }
.mw-pill {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.16); color: #fff;
  font: 700 14px / 1 var(--mw-font); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mw-pill.is-on { background: #fff; color: var(--mw-pink); border-color: transparent; }
.mw-pill:disabled { opacity: 0.45; cursor: default; }
.mw-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.mw-actions .mw-btn { min-height: 50px; border-radius: 16px; font-size: 15.5px; }
.mw-note { margin: 0; min-height: 18px; font-size: 13px; line-height: 1.35; text-align: center; color: rgba(255, 255, 255, 0.85); }
.mw-note.is-err { color: #FFE1E9; font-weight: 600; }
.mw-sent {
  position: absolute; inset: 0; z-index: 5; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: rgba(30, 10, 44, 0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: 20px; font-weight: 800;
}
.mw-sent .mw-sent-mark { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #fff; color: var(--mw-pink); }
.mw-panel.is-sent .mw-sent { display: flex; animation: mw-fade 0.25s ease both; }
/* the pen — the doodle pad, and over a selfie (momentCompose.js inkPad): the canvas lies on the
   stage's own box, the picture's; the pens and sizes on one line, Undo / Clear at the end */
.mw-pad {
  position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.mw-pad-back { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.95; }
.mw-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px 8px; flex-wrap: wrap; }
.mw-tools.is-busy { opacity: 0.55; pointer-events: none; }
.mw-pens, .mw-widths, .mw-edit { display: flex; align-items: center; gap: 6px; }
.mw-edit { margin-left: auto; gap: 8px; }
.mw-pen {
  width: 36px; height: 36px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.5); background: var(--c);
  box-shadow: 0 2px 6px rgba(20, 6, 30, 0.3);
  -webkit-tap-highlight-color: transparent;
}
.mw-pen.is-on { border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45); }
.mw-width {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.14);
  -webkit-tap-highlight-color: transparent;
}
.mw-width i { display: block; width: var(--d); height: var(--d); border-radius: 50%; background: #fff; }
.mw-width.is-on { background: rgba(255, 255, 255, 0.4); }
.mw-icon-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.14); color: #fff;
  font: 700 14px / 1 var(--mw-font); white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.mw-icon-btn:disabled { opacity: 0.4; cursor: default; }
.mw-pen:focus-visible, .mw-width:focus-visible, .mw-icon-btn:focus-visible, .mw-pill:focus-visible, .mw-shutter:focus-visible {
  outline: 2px solid #fff; outline-offset: 2px;
}

/* ---- the Home section (app/homeMoments.js) --------------------------------------------- */
.home-moments { display: block; }
.home-moments[hidden] { display: none; } /* not linked: no section at all */
.hm-stack { display: grid; gap: 12px; padding: 0 20px; }
.hm-stack .mw { width: 100%; }
.hm-toast {
  position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 95;
  translate: -50% 0; display: inline-flex; align-items: center; gap: 7px; max-width: calc(100vw - 40px);
  padding: 10px 16px; border-radius: 999px; background: #2A1838; color: #fff;
  font: 700 14px / 1.2 var(--mw-font); box-shadow: 0 10px 24px rgba(40, 14, 54, 0.35);
  opacity: 0; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none;
}
.hm-toast.is-on { opacity: 1; transform: none; }
.hm-toast .mw-ic { color: #FF9EC4; }
@media (prefers-reduced-motion: no-preference) {
  .hm-stack > .mw { animation: hm-in 0.42s cubic-bezier(0.2, 1, 0.4, 1) backwards; }
  .hm-stack > .mw + .mw { animation-delay: 60ms; }
  .hm-stack.is-settled > .mw { animation: none; }
}
@keyframes hm-in { from { opacity: 0; transform: translateY(10px); } }
/* a narrow phone (320–360): the cards keep Home's gutter, their insides tighten a little */
@media (max-width: 370px) {
  .hm-stack .mw:not(.mw-lock):not(.mw-island) { padding: 13px; }
  .hm-stack .mw-photo-small, .hm-stack .mw-reply-small { padding: 10px; }
  .hm-stack .mw-reply-small .mw-btn { --bpx: 8px; }
  .hm-stack .mw-chips3, .hm-stack .mw-grid2 { gap: 6px; }
  .hm-stack .mw-moment-large .mw-title { font-size: 27px; }
  .hm-stack .mw-num { font-size: 42px; }
}