.motion-mark { position: relative; overflow: hidden; contain: layout paint; pointer-events: none; }
.composition-mark { height: 112px; margin: 0 0 32px; color: #22584e; }
.composition-axis { position: absolute; top: 55px; inset-inline: 0; height: 1px; background: #22584e25; transform-origin: left; }
.composition-frames { position: relative; width: min(390px,80%); height: 100%; margin-inline: auto; }
.composition-frames i { position: absolute; width: 150px; height: 84px; top: 14px; border: 1px solid currentColor; background: #fafbfc; transform-origin: center; }
.composition-frames i::before { content: ""; position: absolute; inset: 10px; border: 1px solid currentColor; opacity: .18; }
.composition-frames i:nth-child(1) { left: 0; color: #96675f; }
.composition-frames i:nth-child(2) { left: calc(50% - 75px); color: #567168; }
.composition-frames i:nth-child(3) { right: 0; color: #22584e; }
.composition-register { position: absolute; width: 18px; height: 18px; left: calc(50% - 9px); top: 47px; }
.composition-register::before,.composition-register::after { content: ""; position: absolute; background: #22584e; }
.composition-register::before { width: 18px; height: 1px; top: 8px; }
.composition-register::after { width: 1px; height: 18px; left: 8px; }
.composition-mark.has-played .composition-axis { animation: composition-axis 3.8s ease both; }
.composition-mark.has-played .composition-frames i:nth-child(1) { animation: compose-left 3.8s cubic-bezier(.22,.7,.2,1) both; }
.composition-mark.has-played .composition-frames i:nth-child(2) { animation: compose-center 3.8s cubic-bezier(.22,.7,.2,1) both; }
.composition-mark.has-played .composition-frames i:nth-child(3) { animation: compose-right 3.8s cubic-bezier(.22,.7,.2,1) both; }
.composition-mark.has-played .composition-register { animation: compose-register 3.8s ease both; }
@keyframes composition-axis { 0% { transform: scaleX(.15); opacity: 0; } 45%,100% { transform: scaleX(1); opacity: 1; } }
@keyframes compose-left { 0% { opacity: 0; transform: translate(-28px,9px) rotate(-8deg); } 35% { opacity: 1; transform: translate(22px,0) rotate(-3deg); } 100% { opacity: 1; transform: none; } }
@keyframes compose-center { 0% { opacity: 0; transform: translateY(-14px) scale(.8); } 45% { opacity: 1; transform: scale(.95); } 100% { opacity: 1; transform: none; } }
@keyframes compose-right { 0% { opacity: 0; transform: translate(28px,9px) rotate(8deg); } 35% { opacity: 1; transform: translate(-22px,0) rotate(3deg); } 100% { opacity: 1; transform: none; } }
@keyframes compose-register { 0%,45% { opacity: 0; transform: scale(1.7); } 80%,100% { opacity: .65; transform: scale(1); } }

.learning-mark { height: 74px; margin-bottom: 28px; --motion-line: #8da098; }
.learning-path { position: absolute; inset-inline: 12.5%; top: 12px; height: 1px; background: var(--motion-line); transform-origin: left; }
.learning-stations,.learning-clips { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); }
.learning-stations { position: relative; height: 26px; }
.learning-stations > i { display: block; margin: 8px auto; width: 9px; height: 9px; background: #f2f5f3; border: 1px solid #45665a; transform: rotate(45deg); }
.learning-stations > i:nth-child(2) { border-color: #976f5c; }
.learning-stations > i:nth-child(3) { border-color: #676f87; }
.learning-clips > span { display: grid; grid-template-columns: .8fr 1.5fr 1fr; gap: 3px; width: 65%; height: 24px; margin: 8px auto 0; }
.learning-clips i { display: block; border: 1px solid #45665a60; background: #45665a0a; transform-origin: left; }
.learning-clips > span:nth-child(2) i { border-color: #976f5c70; background: #976f5c0d; }
.learning-clips > span:nth-child(3) i { border-color: #676f8770; background: #676f870d; }
.learning-clips > span:nth-child(4) { gap: 0; }
.learning-clips > span:nth-child(4) i { background: #45665a24; }
.learning-mark.has-played .learning-path { animation: learning-connect 3.8s cubic-bezier(.25,.5,.35,1) both; }
.learning-mark.has-played .learning-stations > i { animation: learning-arrive .75s var(--stage-delay,0s) ease both; }
.learning-mark.has-played .learning-clips > span { animation: learning-assemble 1s var(--stage-delay,0s) cubic-bezier(.2,.7,.2,1) both; }
.learning-stations > :nth-child(2),.learning-clips > :nth-child(2) { --stage-delay: .85s; }
.learning-stations > :nth-child(3),.learning-clips > :nth-child(3) { --stage-delay: 1.75s; }
.learning-stations > :nth-child(4),.learning-clips > :nth-child(4) { --stage-delay: 2.65s; }
@keyframes learning-connect { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes learning-arrive { from { opacity: .2; transform: rotate(45deg) scale(.5); } to { opacity: 1; transform: rotate(45deg) scale(1); } }
@keyframes learning-assemble { from { opacity: 0; transform: translateY(7px) scaleX(.65); } to { opacity: 1; transform: none; } }
.motion-mark.is-paused * { animation-play-state: paused !important; }
@media (max-width: 540px) {
  .composition-mark { height: 90px; margin-bottom: 24px; }
  .composition-axis { top: 44px; }
  .composition-frames i { width: 110px; height: 62px; }
  .composition-frames i:nth-child(2) { left: calc(50% - 55px); }
  .composition-register { top: 36px; }
  .learning-mark { height: 64px; margin-bottom: 20px; }
  .learning-clips > span { width: 78%; height: 19px; }
}
@media (prefers-reduced-motion: reduce) { .motion-mark * { animation: none !important; } }