/* Process diagrams, styled to fit the existing MyCyberTutor identity. */
.lesson-motion{--motion-pos:0;margin:2rem 0;border:1px solid #b8c9ba;border-radius:16px;overflow:hidden;background:#f1f6ee;container-type:inline-size;font-size:1rem;line-height:1.6}
.motion-heading{padding:1.5rem 1.5rem 1rem}.motion-kicker{font-size:.875rem;letter-spacing:.09em;font-weight:700;color:var(--green)}.motion-heading h3{font-family:var(--serif);font-size:1.75rem;line-height:1.2;margin:.65rem 0}.motion-heading p{font-size:1rem!important;color:#40594b}
.motion-stage{padding:1.5rem;background:#173e33;color:#fff}.motion-nodes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem}.motion-node{padding:1rem .65rem;border:1px solid #698579;border-radius:9px;min-width:0;transition:background-color .4s,color .4s,border-color .4s}.motion-node span{display:block;font-size:.875rem;opacity:.85;margin-bottom:.5rem}.motion-node strong{display:block;font-size:1rem;line-height:1.3;overflow-wrap:anywhere}.motion-node.is-active{background:#ddedb4;color:#193f31;border-color:#ddedb4}.motion-track{position:relative;margin-top:1.25rem;min-height:4.5rem;display:grid;align-items:start}.motion-track:before{content:"";position:absolute;top:1.2rem;left:8%;right:8%;height:1px;background:#698579}.motion-token{z-index:1;display:block;position:relative;width:33.333%;text-align:center;transform:translateX(calc(var(--motion-pos)*100%));transition:transform .85s cubic-bezier(.2,.65,.2,1);background:#fff;color:#193f31;border:1px solid #ddedb4;border-radius:8px;padding:.45rem .4rem;font-size:.875rem;font-weight:650;line-height:1.45;overflow-wrap:anywhere}
.motion-caption{padding:1.25rem 1.5rem 0;min-height:10rem}.motion-step-title{font-weight:700;font-size:1.15rem!important;margin-bottom:.5rem!important}.motion-step-copy{font-size:1rem!important}.motion-controls{display:flex;flex-wrap:wrap;align-items:center;gap:.65rem;padding:1.25rem 1.5rem}.motion-controls button{border:1px solid #647e6f;background:#fff;color:#193f31;border-radius:8px;padding:.55rem .9rem;min-height:44px;font-size:.95rem;font-weight:600}.motion-controls [data-motion=play]{background:#194a3c;color:white;border-color:#194a3c}.motion-count{margin-left:auto;font-variant-numeric:tabular-nums;font-size:.95rem;font-weight:650;color:#40594b}.motion-preference{padding:0 1.5rem 1rem;font-size:.9rem!important;color:#40594b}.motion-transcript{border-top:1px solid #bdcfbe;padding:1rem 1.5rem}.motion-transcript summary{cursor:pointer;font-weight:650;font-size:.95rem;min-height:32px}.motion-transcript ol{margin:1rem 0 0;padding-left:1.25rem}.motion-transcript li{padding:.5rem 0 .5rem .25rem;font-size:1rem}.motion-transcript li p{margin:.4rem 0!important;font-size:1rem!important}.lesson-motion [hidden]{display:none!important}.lesson-motion.is-reduced *{transition:none!important;animation:none!important}
@container(max-width:430px){.motion-heading,.motion-stage{padding:1.1rem}.motion-heading h3{font-size:1.45rem}.motion-node{padding:.75rem .4rem}.motion-node strong{font-size:.9rem}.motion-nodes{gap:.4rem}.motion-caption{padding:1rem 1.1rem 0;min-height:12rem}.motion-controls{padding:1rem 1.1rem;gap:.5rem}.motion-controls button{padding:.5rem .65rem}.motion-transcript{padding:1rem 1.1rem}.motion-preference{padding:0 1.1rem 1rem}}
@media(prefers-reduced-motion:reduce){.lesson-motion *{transition:none!important;animation:none!important}}
@media print{.motion-controls,.motion-caption,.motion-stage,.motion-preference{display:none!important}.motion-transcript>ol{display:block!important}.lesson-motion{break-inside:avoid}}