/* The hero's pouch loop (assets/hero/pouch.js). */
.hero .demo{min-width:0}
/* overflow:hidden keeps the 360px design out of the grid's min-content, so the
   zoom is measured on the column and never widens the page. */
.pouch{width:100%;max-width:540px;margin:0 auto;min-width:0;overflow:hidden;padding-bottom:8px}
.pouch-root{width:360px;margin:0 auto}
.pouch-stage{position:relative;height:180px}
/* Ruby stands right of centre in both languages, so the column has a lane
   of its own on her left: physical sides, as in the app. */
.pouch-ruby{position:absolute;bottom:0;width:150px;height:150px}
.pouch-burst{position:absolute;width:60px;height:60px;border-radius:50%;opacity:0;
  background:radial-gradient(circle,var(--mg-honey) 20%,rgba(255,174,61,0) 70%)}
.pouch-msg{position:absolute;box-sizing:border-box;padding:5px 8px 5px 7px;background:var(--mg-white);
  border:1px solid var(--mg-border);border-radius:12px 12px 4px 12px;transform-origin:right center;will-change:transform,opacity}
.pm-from{display:flex;align-items:center;gap:4px;font:700 12px/1.1 var(--mg-font-body);color:var(--mg-dusk)}
.pm-from img{width:13px;height:11px;object-fit:contain;flex:none}
.pm-text{margin-top:2px;font:400 12px/1.2 var(--mg-font-body);color:var(--mg-dusk)}
.pouch-msg.matters .pm-text{font-weight:600;color:var(--mg-ink)}
.pouch-card{position:relative;margin-top:12px;padding:10px 8px 8px;background:var(--mg-white);
  border:1.5px solid var(--mg-lav-deep);border-radius:16px;box-shadow:var(--card-lift)}
.pc-head{padding-inline-start:6px;margin-bottom:6px;font:700 12px/1 var(--mg-font-body);letter-spacing:.04em;color:var(--mg-dusk)}
.pc-line{display:flex;align-items:center;gap:8px;min-height:30px;padding:2px 6px;border-radius:10px;
  font:600 14px/1.3 var(--mg-font-body);color:var(--mg-ink)}
.pc-line b{font-weight:700}
.pc-t{flex:1;min-width:0}
.pc-kids{display:flex;gap:2px;flex:none}
.pc-kids img{width:28px;height:28px;box-sizing:border-box;border:2px solid #fff;border-radius:7px;background:#fff;object-fit:cover}
.pc-emoji{flex:none;width:26px;height:26px;display:grid;place-items:center;background:var(--mg-lav);border-radius:8px;font-size:14px;line-height:1}
/* The tail, under her chest — a physical spot, as in the app. */
.pc-tail{position:absolute;top:-7px;left:calc(62% - 6px);width:12px;height:12px;background:var(--mg-white);
  border-top:1.5px solid var(--mg-lav-deep);border-left:1.5px solid var(--mg-lav-deep);transform:rotate(45deg)}