.family-reaction {
  display: block;
  width: 100%;
  max-width: 240px;
  height: auto;
  min-width: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 18px;
  user-select: none;
}

.family-clap-left,
.family-clap-right,
.family-listen-hand,
.family-star-hands {
  transform-box: fill-box;
  transform-origin: center center;
}

.family-clap-left {
  transform-origin: 25% 65%;
}

.family-clap-right {
  transform-origin: 75% 65%;
}

.family-listen-hand {
  transform-origin: 35% 75%;
}

.family-star-hands {
  transform-origin: 50% 65%;
}

@media (prefers-reduced-motion: no-preference) {
  html[data-motion="true"] .scene-playing .family-clap-left {
    animation: family-clap-left-pulse 680ms ease-in-out 2;
    animation-delay: var(--scene-offset, 0ms);
  }

  html[data-motion="true"] .scene-playing .family-clap-right {
    animation: family-clap-right-pulse 680ms ease-in-out 2;
    animation-delay: var(--scene-offset, 0ms);
  }

  html[data-motion="true"] .scene-playing .family-listen-hand {
    animation: family-listen-tilt 1250ms ease-in-out 1;
    animation-delay: var(--scene-offset, 0ms);
  }

  html[data-motion="true"] .scene-playing .family-star-hands {
    animation: family-star-lift 1150ms ease-in-out 1;
    animation-delay: var(--scene-offset, 0ms);
  }
}

@keyframes family-clap-left-pulse {
  0%, 100% {
    transform: translate3d(-4px, 1px, 0) rotate(-5deg);
  }
  50% {
    transform: translate3d(3px, -2px, 0) rotate(4deg);
  }
}

@keyframes family-clap-right-pulse {
  0%, 100% {
    transform: translate3d(4px, 1px, 0) rotate(5deg);
  }
  50% {
    transform: translate3d(-3px, -2px, 0) rotate(-4deg);
  }
}

@keyframes family-listen-tilt {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(2px, -3px, 0) rotate(-4deg);
  }
}

@keyframes family-star-lift {
  0%, 100% {
    transform: translate3d(0, 1px, 0) scale(0.98);
  }
  50% {
    transform: translate3d(0, -4px, 0) scale(1.04);
  }
}

@media(prefers-reduced-motion:no-preference) {
 html[data-motion="true"] .scene-playing .recall-grip {
  animation:recall-bookmark-in 1350ms ease-in-out var(--scene-offset,0ms) 1 both;
 }
}
@keyframes recall-bookmark-in {
 0%,100% { transform:translate(0,0); }
 32% { transform:translate(-2px,-8px); }
 72% { transform:translate(1px,2px); }
}
.lesson-project { display:grid; grid-template-columns:minmax(120px,185px) minmax(0,1fr); gap:.15rem .75rem; align-items:center; margin:.7rem 0; padding:.65rem; border:1px solid #cfbea4; border-radius:14px; background:#fff9ec; color:#3b3e32; }
.lesson-project .lesson-project-picture { grid-row:span 2; }
.lesson-project-art { display:block; width:100%; height:auto; }
.lesson-project figcaption strong,.lesson-project figcaption span { display:block; }
.lesson-project figcaption span { margin-top:.25em; font-size:.86rem; line-height:1.5; }
.lesson-project .scene-motion-control { justify-self:start; min-height:48px; margin:0; }
.project-album summary { cursor:pointer; font-weight:700; padding:.65em 0; min-height:50px; }
@media(max-width:480px){
 .lesson-project { grid-template-columns:1fr; gap:.3rem; }
 .lesson-project .lesson-project-picture { grid-row:auto; width:min(80%,210px); margin:auto; }
 .lesson-project .scene-motion-control { justify-self:center; }
}
html[data-size="2"] .lesson-project { grid-template-columns:1fr; }
html[data-size="2"] .lesson-project-picture { width:min(100%,245px); margin:auto; }
@media(prefers-reduced-motion:no-preference){
 html[data-motion="true"] .scene-playing .project-place { animation:project-tap 1150ms ease-in-out var(--scene-offset,0ms) 1 both; }
 html[data-motion="true"] .scene-playing .project-new-piece { animation:project-imprint 1150ms ease-out var(--scene-offset,0ms) 1 both; }
 html[data-motion="true"] .scene-playing .project-lift { transform-origin:125px 118px; animation:project-show 1300ms ease-in-out var(--scene-offset,0ms) 1 both; }
}
@keyframes project-tap { 0%,100%{transform:translate(0,0)} 30%{transform:translate(1px,-5px)} 60%{transform:translate(-1px,3px)} }
@keyframes project-imprint { 0%,35%{opacity:.25} 70%,100%{opacity:1} }
@keyframes project-show { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px) rotate(-1deg)} }
@media(prefers-reduced-motion:no-preference){
 .project-album [data-piece="1"] { --piece-wait:0ms; }
 .project-album [data-piece="2"] { --piece-wait:180ms; }
 .project-album [data-piece="3"] { --piece-wait:360ms; }
 .project-album [data-piece="4"] { --piece-wait:540ms; }
 .project-album [data-piece="5"] { --piece-wait:720ms; }
 html[data-motion="true"] .project-album .scene-playing [data-piece] { animation:project-recall-piece 320ms ease-out calc(var(--scene-offset,0ms) + var(--piece-wait,0ms)) 1 both; }
}
@keyframes project-recall-piece { from {opacity:0} to {opacity:1} }

.shared-activity { margin:.85rem 0; padding:.8rem; background:#f7f4e9; border:1px solid #cfbe9d; border-radius:16px; color:#343e32; }
.shared-activity h3,.shared-activity p { margin:.2rem 0 .55rem; }
.shared-activity summary { min-height:48px; cursor:pointer; font-weight:700; align-content:center; }
.shared-options { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr)); gap:.55rem; }
.shared-option { display:flex; align-items:center; justify-content:flex-start; gap:.5rem; min-height:64px; padding:.35rem .5rem; border:2px solid #417764; border-radius:12px; background:#fff; color:#184e3c; font:inherit; font-weight:700; text-align:start; cursor:pointer; }
.shared-preview { flex:0 0 68px; width:68px; }
.shared-preview svg,.study-memory-picture svg { display:block; width:100%; height:auto; }
.study-memory-picture { margin:.3rem 0 0; }
.study-memory-picture>div { max-width:360px; margin:0 auto .45rem; }
.study-memory-picture figcaption strong { display:block; }
.study-memory-picture .scene-motion-control { min-height:48px; }
.shared-activity .prior-activity { margin:.65rem 0 0; font-size:.9em; }

.growth-story-page .memory-place { display:inline-block; font-weight:700; color:#40594d; margin-top:.45rem; }
.memory-question { margin:.7rem 0; }
.memory-question summary { min-height:48px; align-content:center; cursor:pointer; font-weight:700; }
.memory-question p { margin:.3rem 0; }
@media(prefers-reduced-motion:no-preference) {
 html[data-motion="true"] .scene-playing .learning-place-stamp { transform-origin:17px 17px; animation:learning-place-arrival 900ms ease-out var(--scene-offset,0ms) 1 both; }
}
@keyframes learning-place-arrival { from{opacity:.1;transform:translateY(-3px) rotate(-5deg)} 65%{opacity:1;transform:translateY(1px)} to{opacity:1;transform:none} }

.learning-photo figcaption,.learning-photo .memory-question p { word-break:keep-all; overflow-wrap:anywhere; }