@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gaegu:wght@700&display=swap');
:root{--paper:#f5f3ec;--ink:#202a26;--muted:#737b73;--green:#275843;--line:#dedfd5}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Noto Sans KR',sans-serif}button,input,textarea,select{font:inherit}button{cursor:pointer}header{max-width:1240px;margin:auto;padding:25px 36px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{font-size:25px;font-weight:800;letter-spacing:-1.5px;text-decoration:none;color:var(--ink)}.brand span{background:var(--green);color:white;border-radius:6px;font-size:16px;padding:1px 6px;margin-right:7px}header a.small{color:var(--muted);font-size:12px;text-decoration:none}main{max-width:1240px;margin:auto;padding:55px 36px}.hero{display:grid;grid-template-columns:1fr;gap:48px;align-items:center}.eyebrow{color:var(--green);font-size:11px;font-weight:700;letter-spacing:2px}h1{font-size:52px;line-height:1.35;letter-spacing:-2.5px;margin:17px 0 20px;font-weight:700}h1 em{font-style:normal;color:var(--green)}.intro{color:var(--muted);font-size:15px;line-height:1.9;margin:0}.study{background:#e7ebdf;border-radius:12px;padding:27px 28px}.study .tag{font-size:11px;letter-spacing:2px;color:var(--green)}.study strong{display:block;font-size:44px;margin:16px 0 8px}.study strong span{font-size:14px;color:var(--muted);font-weight:400}.progress{background:#d0d8c8;height:5px;border-radius:10px;overflow:hidden}.progress div{height:100%;background:var(--green);transition:width .3s}.study p{font-size:12px;line-height:1.8;color:#65715f;margin:14px 0 0}.search{margin-top:45px;position:relative}.search svg{position:absolute;left:20px;top:21px;color:var(--green)}input,textarea,select{width:100%;border:1px solid #cdd1c5;border-radius:8px;padding:14px;background:#fffef9;color:var(--ink);outline:none}#search{height:64px;padding-left:54px;font-size:16px}input:focus,textarea:focus,select:focus{border-color:var(--green);box-shadow:0 0 0 3px #27584312}.filters{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0}.filters button{border:1px solid var(--line);background:transparent;padding:9px 15px;border-radius:25px;font-size:12px;color:#60685f}.filters button.active,.primary{background:var(--green);border-color:var(--green);color:white}.bar{display:flex;justify-content:space-between;align-items:center;margin:36px 0 18px;font-size:12px;color:var(--muted)}.views{display:flex;gap:17px}.views button{background:none;border:0;color:var(--muted);padding:5px 0;font-size:12px}.views button.active{color:var(--green);border-bottom:2px solid var(--green);font-weight:700}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.card{background:#fffef9;border:1px solid var(--line);border-radius:10px;padding:23px;min-height:209px;display:flex;flex-direction:column;transition:transform .2s,border-color .2s}.card:hover{transform:translateY(-3px);border-color:#9aa996}.cardtop{display:flex;justify-content:space-between;align-items:center}.category{font-size:10px;font-weight:600;color:var(--green)}.star{border:0;background:none;font-size:24px;color:#8b9388;padding:0 2px;line-height:1}.star.saved{color:#b57c24}.card h2{font-size:21px;letter-spacing:-.8px;margin:14px 0 10px;line-height:1.5}.card p{margin:0;color:#697068;font-size:13px;line-height:1.8;flex:1;white-space:pre-wrap;overflow-wrap:anywhere}.cardfoot{border-top:1px solid #ecece3;padding-top:14px;margin-top:20px;display:flex;justify-content:space-between;align-items:center}.num{font-size:10px;color:#9b9f94;letter-spacing:1px}.learn{border:0;background:none;color:#838b7d;font-size:11px;padding:3px}.learn.done{color:var(--green);font-weight:700}.card.done{background:#f0f4ea}.empty{grid-column:1/-1;text-align:center;padding:65px 10px;color:var(--muted)}footer{max-width:1168px;margin:25px auto 0;padding:26px 0 35px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:11px;line-height:1.8}footer b{color:var(--green)}:focus-visible{outline:2px solid var(--green);outline-offset:4px}.panel{max-width:550px;background:#fffef9;padding:30px;border:1px solid var(--line);border-radius:12px;margin:30px auto}.panel h2{margin-top:0}label{display:block;font-size:13px;margin:20px 0 7px}.primary,.secondary{border:1px solid var(--line);border-radius:7px;padding:11px 18px;font-size:13px}.secondary{background:transparent;color:var(--green)}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}.notice{font-size:13px;line-height:1.8;color:var(--muted);white-space:pre-wrap}#message{color:#884326;min-height:24px}dialog{border:1px solid var(--line);border-radius:12px;width:min(540px,90vw);padding:30px;background:var(--paper)}dialog::backdrop{background:#152c2580}[hidden]{display:none!important}@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}.hero{grid-template-columns:1fr 240px;gap:25px}h1{font-size:40px}}@media(max-width:620px){header{padding:20px}main{padding:35px 20px}.hero{display:block}h1{font-size:37px}.intro{font-size:13px}.study{margin-top:25px;padding:20px}.study strong{font-size:32px;margin:8px 0}.study p{margin-top:8px}.search{margin-top:28px}.grid{grid-template-columns:1fr}.bar{gap:10px;align-items:start}.views{gap:10px}.filters{gap:6px}.filters button{padding:8px 11px;font-size:11px}footer{margin:20px;flex-direction:column}.card{min-height:190px}.panel{padding:22px}}

.danger{color:#a23b32;border-color:#d9b9b3}.danger:hover{background:#f9ebe7}button:disabled{cursor:wait;opacity:.55}

/* Chapter-first navigation */
#categoryHome{margin-top:48px}.section-heading h2{font-size:26px;letter-spacing:-1px;margin:12px 0}.section-heading p,.chapter-heading p{color:var(--muted);font-size:14px;line-height:1.8}.category-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:25px}.chapter-card{display:flex;flex-direction:column;padding:28px;background:#fffef9;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--ink);transition:transform .2s,border-color .2s}.chapter-card:hover{transform:translateY(-3px);border-color:var(--green)}.chapter-index{font-size:13px;letter-spacing:2px;color:var(--green);font-weight:700}.chapter-card h3{font-size:22px;letter-spacing:-.8px;margin:16px 0 10px}.chapter-card p{color:var(--muted);font-size:13px;line-height:1.8;margin:0 0 24px;flex:1}.chapter-meta{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--green);border-top:1px solid var(--line);padding-top:15px}.chapter-arrow{font-size:22px}.back-link{display:inline-block;color:var(--green);text-decoration:none;padding:12px 0;margin-bottom:20px;font-size:14px}.back-link:hover{text-decoration:underline}#termPage{margin-top:40px;scroll-margin-top:20px}.chapter-heading h2{font-size:34px;letter-spacing:-1px;margin:12px 0}.chapter-heading h2:focus{outline:none}#termPage .search{margin-top:28px}.section-heading h2:focus{outline:none}@media(max-width:620px){.category-grid{grid-template-columns:1fr;gap:12px}.chapter-card{padding:22px}.chapter-card h3{font-size:20px}.chapter-heading h2{font-size:27px}.bar{flex-direction:column;gap:14px}#categoryHome{margin-top:35px}}

/* Show one original pen illustration per term; clip its surrounding sheet. */
.term-pictogram{background:#fff;border-radius:12px;margin:4px 0 18px;padding:8px;overflow:hidden}
.term-pictogram svg{display:block;width:100%;height:210px;overflow:hidden}
@media(max-width:620px){.term-pictogram svg{height:230px}}

select{width:100%;padding:12px;border:1px solid #d5d8ce;border-radius:8px;background:white;color:inherit;font:inherit}.category-editor-row{border:1px solid #d5d8ce;border-radius:12px;padding:16px;margin:20px 0}#categoriesDialog{max-height:90vh;overflow:auto;width:min(640px,90vw)}

header .brand{font-size:clamp(16px,3vw,23px);line-height:1.4;max-width:70%}header>.small{flex-shrink:0}.card .actions{flex-wrap:wrap}

.brand .attribution{display:inline-block;margin-left:12px;font-size:11px;font-weight:400;letter-spacing:0;color:var(--muted)}@media(max-width:620px){.brand .attribution{display:block;margin:4px 0 0;font-size:10px}}

body{min-height:100vh;display:flex;flex-direction:column}body>header,body>main{width:100%}body>main{flex:1}.site-credit{display:block;width:100%;max-width:1240px;margin:0 auto;padding:24px 36px;text-align:right;color:var(--muted);font-size:11px}@media(max-width:620px){.site-credit{padding:20px}}

@media(min-width:1100px){.category-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* 웹과 개발 · 기본 모션 픽토그램 (7초 반복, 슬롯마다 0.42초) */
.mp svg *{transform-box:fill-box;transform-origin:center}
.m-all{animation:mp-fade 14s infinite}
@keyframes mp-fade{0%,90%{opacity:1}96%,100%{opacity:0}}
.d0{stroke-dasharray:1;stroke-dashoffset:1;animation:mp-d0 14s infinite ease-out}
@keyframes mp-d0{0%,0.0%{stroke-dashoffset:1}9.0%,100%{stroke-dashoffset:0}}
.p0{opacity:0;animation:mp-p0 14s infinite}
@keyframes mp-p0{0%,0.0%{opacity:0;transform:scale(.3)}3.5%{opacity:1;transform:scale(1.15)}6.0%,100%{opacity:1;transform:scale(1)}}
.f0{opacity:0;animation:mp-f0 14s infinite}
@keyframes mp-f0{0%,0.0%{opacity:0}5.0%,100%{opacity:1}}
.g0{transform-origin:left center;transform:scaleX(0);animation:mp-g0 14s infinite ease-out}
@keyframes mp-g0{0%,0.0%{transform:scaleX(0)}6.0%,100%{transform:scaleX(1)}}
.m0{opacity:0;animation:mp-m0 14s infinite cubic-bezier(.45,.05,.3,1)}
@keyframes mp-m0{0%,0.0%{opacity:0;transform:translate(var(--dx),var(--dy))}2.0%{opacity:1}13.0%,100%{opacity:1;transform:translate(0,0)}}
.press0{animation:mp-press0 14s infinite}
@keyframes mp-press0{0%,0.0%,5.0%,100%{transform:scale(1)}2.0%{transform:scale(.88)}}
.fill0{fill:#fff;animation:mp-fill0 14s infinite}
@keyframes mp-fill0{0%,1.0%{fill:#fff}3.0%,100%{fill:#e7ebdf}}
.d1{stroke-dasharray:1;stroke-dashoffset:1;animation:mp-d1 14s infinite ease-out}
@keyframes mp-d1{0%,6.0%{stroke-dashoffset:1}15.0%,100%{stroke-dashoffset:0}}
.p1{opacity:0;animation:mp-p1 14s infinite}
@keyframes mp-p1{0%,6.0%{opacity:0;transform:scale(.3)}9.5%{opacity:1;transform:scale(1.15)}12.0%,100%{opacity:1;transform:scale(1)}}
.f1{opacity:0;animation:mp-f1 14s infinite}
@keyframes mp-f1{0%,6.0%{opacity:0}11.0%,100%{opacity:1}}
.g1{transform-origin:left center;transform:scaleX(0);animation:mp-g1 14s infinite ease-out}
@keyframes mp-g1{0%,6.0%{transform:scaleX(0)}12.0%,100%{transform:scaleX(1)}}
.m1{opacity:0;animation:mp-m1 14s infinite cubic-bezier(.45,.05,.3,1)}
@keyframes mp-m1{0%,6.0%{opacity:0;transform:translate(var(--dx),var(--dy))}8.0%{opacity:1}19.0%,100%{opacity:1;transform:translate(0,0)}}
.press1{animation:mp-press1 14s infinite}
@keyframes mp-press1{0%,6.0%,11.0%,100%{transform:scale(1)}8.0%{transform:scale(.88)}}
.fill1{fill:#fff;animation:mp-fill1 14s infinite}
@keyframes mp-fill1{0%,7.0%{fill:#fff}9.0%,100%{fill:#e7ebdf}}
.d2{stroke-dasharray:1;stroke-dashoffset:1;animation:mp-d2 14s infinite ease-out}
@keyframes mp-d2{0%,12.0%{stroke-dashoffset:1}21.0%,100%{stroke-dashoffset:0}}
.p2{opacity:0;animation:mp-p2 14s infinite}
@keyframes mp-p2{0%,12.0%{opacity:0;transform:scale(.3)}15.5%{opacity:1;transform:scale(1.15)}18.0%,100%{opacity:1;transform:scale(1)}}
.f2{opacity:0;animation:mp-f2 14s infinite}
@keyframes mp-f2{0%,12.0%{opacity:0}17.0%,100%{opacity:1}}
.g2{transform-origin:left center;transform:scaleX(0);animation:mp-g2 14s infinite ease-out}
@keyframes mp-g2{0%,12.0%{transform:scaleX(0)}18.0%,100%{transform:scaleX(1)}}
.m2{opacity:0;animation:mp-m2 14s infinite cubic-bezier(.45,.05,.3,1)}
@keyframes mp-m2{0%,12.0%{opacity:0;transform:translate(var(--dx),var(--dy))}14.0%{opacity:1}25.0%,100%{opacity:1;transform:translate(0,0)}}
.press2{animation:mp-press2 14s infinite}
@keyframes mp-press2{0%,12.0%,17.0%,100%{transform:scale(1)}14.0%{transform:scale(.88)}}
.fill2{fill:#fff;animation:mp-fill2 14s infinite}
@keyframes mp-fill2{0%,13.0%{fill:#fff}15.0%,100%{fill:#e7ebdf}}
.d3{stroke-dasharray:1;stroke-dashoffset:1;animation:mp-d3 14s infinite ease-out}
@keyframes mp-d3{0%,18.0%{stroke-dashoffset:1}27.0%,100%{stroke-dashoffset:0}}
.p3{opacity:0;animation:mp-p3 14s infinite}
@keyframes mp-p3{0%,18.0%{opacity:0;transform:scale(.3)}21.5%{opacity:1;transform:scale(1.15)}24.0%,100%{opacity:1;transform:scale(1)}}
.f3{opacity:0;animation:mp-f3 14s infinite}
@keyframes mp-f3{0%,18.0%{opacity:0}23.0%,100%{opacity:1}}
.g3{transform-origin:left center;transform:scaleX(0);animation:mp-g3 14s infinite ease-out}
@keyframes mp-g3{0%,18.0%{transform:scaleX(0)}24.0%,100%{transform:scaleX(1)}}
.m3{opacity:0;animation:mp-m3 14s infinite cubic-bezier(.45,.05,.3,1)}
@keyframes mp-m3{0%,18.0%{opacity:0;transform:translate(var(--dx),var(--dy))}20.0%{opacity:1}31.0%,100%{opacity:1;transform:translate(0,0)}}
.press3{animation:mp-press3 14s infinite}
@keyframes mp-press3{0%,18.0%,23.0%,100%{transform:scale(1)}20.0%{transform:scale(.88)}}
.fill3{fill:#fff;animation:mp-fill3 14s infinite}
@keyframes mp-fill3{0%,19.0%{fill:#fff}21.0%,100%{fill:#e7ebdf}}
.d4{stroke-dasharray:1;stroke-dashoffset:1;animation:mp-d4 14s infinite ease-out}
@keyframes mp-d4{0%,24.0%{stroke-dashoffset:1}33.0%,100%{stroke-dashoffset:0}}
.p4{opacity:0;animation:mp-p4 14s infinite}
@keyframes mp-p4{0%,24.0%{opacity:0;transform:scale(.3)}27.5%{opacity:1;transform:scale(1.15)}30.0%,100%{opacity:1;transform:scale(1)}}
.f4{opacity:0;animation:mp-f4 14s infinite}
@keyframes mp-f4{0%,24.0%{opacity:0}29.0%,100%{opacity:1}}
.g4{transform-origin:left center;transform:scaleX(0);animation:mp-g4 14s infinite ease-out}
@keyframes mp-g4{0%,24.0%{transform:scaleX(0)}30.0%,100%{transform:scaleX(1)}}
.m4{opacity:0;animation:mp-m4 14s infinite cubic-bezier(.45,.05,.3,1)}
@keyframes mp-m4{0%,24.0%{opacity:0;transform:translate(var(--dx),var(--dy))}26.0%{opacity:1}37.0%,100%{opacity:1;transform:translate(0,0)}}
.press4{animation:mp-press4 14s infinite}
@keyframes mp-press4{0%,24.0%,29.0%,100%{transform:scale(1)}26.0%{transform:scale(.88)}}
.fill4{fill:#fff;animation:mp-fill4 14s infinite}
@keyframes mp-fill4{0%,25.0%{fill:#fff}27.0%,100%{fill:#e7ebdf}}
.d5{stroke-dasharray:1;stroke-dashoffset:1;animation:mp-d5 14s infinite ease-out}
@keyframes mp-d5{0%,30.0%{stroke-dashoffset:1}39.0%,100%{stroke-dashoffset:0}}
.p5{opacity:0;animation:mp-p5 14s infinite}
@keyframes mp-p5{0%,30.0%{opacity:0;transform:scale(.3)}33.5%{opacity:1;transform:scale(1.15)}36.0%,100%{opacity:1;transform:scale(1)}}
.f5{opacity:0;animation:mp-f5 14s infinite}
@keyframes mp-f5{0%,30.0%{opacity:0}35.0%,100%{opacity:1}}
.g5{transform-origin:left center;transform:scaleX(0);animation:mp-g5 14s infinite ease-out}
@keyframes mp-g5{0%,30.0%{transform:scaleX(0)}36.0%,100%{transform:scaleX(1)}}
.m5{opacity:0;animation:mp-m5 14s infinite cubic-bezier(.45,.05,.3,1)}
@keyframes mp-m5{0%,30.0%{opacity:0;transform:translate(var(--dx),var(--dy))}32.0%{opacity:1}43.0%,100%{opacity:1;transform:translate(0,0)}}
.press5{animation:mp-press5 14s infinite}
@keyframes mp-press5{0%,30.0%,35.0%,100%{transform:scale(1)}32.0%{transform:scale(.88)}}
.fill5{fill:#fff;animation:mp-fill5 14s infinite}
@keyframes mp-fill5{0%,31.0%{fill:#fff}33.0%,100%{fill:#e7ebdf}}
.d6{stroke-dasharray:1;stroke-dashoffset:1;animation:mp-d6 14s infinite ease-out}
@keyframes mp-d6{0%,36.0%{stroke-dashoffset:1}45.0%,100%{stroke-dashoffset:0}}
.p6{opacity:0;animation:mp-p6 14s infinite}
@keyframes mp-p6{0%,36.0%{opacity:0;transform:scale(.3)}39.5%{opacity:1;transform:scale(1.15)}42.0%,100%{opacity:1;transform:scale(1)}}
.f6{opacity:0;animation:mp-f6 14s infinite}
@keyframes mp-f6{0%,36.0%{opacity:0}41.0%,100%{opacity:1}}
.g6{transform-origin:left center;transform:scaleX(0);animation:mp-g6 14s infinite ease-out}
@keyframes mp-g6{0%,36.0%{transform:scaleX(0)}42.0%,100%{transform:scaleX(1)}}
.m6{opacity:0;animation:mp-m6 14s infinite cubic-bezier(.45,.05,.3,1)}
@keyframes mp-m6{0%,36.0%{opacity:0;transform:translate(var(--dx),var(--dy))}38.0%{opacity:1}49.0%,100%{opacity:1;transform:translate(0,0)}}
.press6{animation:mp-press6 14s infinite}
@keyframes mp-press6{0%,36.0%,41.0%,100%{transform:scale(1)}38.0%{transform:scale(.88)}}
.fill6{fill:#fff;animation:mp-fill6 14s infinite}
@keyframes mp-fill6{0%,37.0%{fill:#fff}39.0%,100%{fill:#e7ebdf}}
.d7{stroke-dasharray:1;stroke-dashoffset:1;animation:mp-d7 14s infinite ease-out}
@keyframes mp-d7{0%,42.0%{stroke-dashoffset:1}51.0%,100%{stroke-dashoffset:0}}
.p7{opacity:0;animation:mp-p7 14s infinite}
@keyframes mp-p7{0%,42.0%{opacity:0;transform:scale(.3)}45.5%{opacity:1;transform:scale(1.15)}48.0%,100%{opacity:1;transform:scale(1)}}
.f7{opacity:0;animation:mp-f7 14s infinite}
@keyframes mp-f7{0%,42.0%{opacity:0}47.0%,100%{opacity:1}}
.g7{transform-origin:left center;transform:scaleX(0);animation:mp-g7 14s infinite ease-out}
@keyframes mp-g7{0%,42.0%{transform:scaleX(0)}48.0%,100%{transform:scaleX(1)}}
.m7{opacity:0;animation:mp-m7 14s infinite cubic-bezier(.45,.05,.3,1)}
@keyframes mp-m7{0%,42.0%{opacity:0;transform:translate(var(--dx),var(--dy))}44.0%{opacity:1}55.0%,100%{opacity:1;transform:translate(0,0)}}
.press7{animation:mp-press7 14s infinite}
@keyframes mp-press7{0%,42.0%,47.0%,100%{transform:scale(1)}44.0%{transform:scale(.88)}}
.fill7{fill:#fff;animation:mp-fill7 14s infinite}
@keyframes mp-fill7{0%,43.0%{fill:#fff}45.0%,100%{fill:#e7ebdf}}
.d8{stroke-dasharray:1;stroke-dashoffset:1;animation:mp-d8 14s infinite ease-out}
@keyframes mp-d8{0%,48.0%{stroke-dashoffset:1}57.0%,100%{stroke-dashoffset:0}}
.p8{opacity:0;animation:mp-p8 14s infinite}
@keyframes mp-p8{0%,48.0%{opacity:0;transform:scale(.3)}51.5%{opacity:1;transform:scale(1.15)}54.0%,100%{opacity:1;transform:scale(1)}}
.f8{opacity:0;animation:mp-f8 14s infinite}
@keyframes mp-f8{0%,48.0%{opacity:0}53.0%,100%{opacity:1}}
.g8{transform-origin:left center;transform:scaleX(0);animation:mp-g8 14s infinite ease-out}
@keyframes mp-g8{0%,48.0%{transform:scaleX(0)}54.0%,100%{transform:scaleX(1)}}
.m8{opacity:0;animation:mp-m8 14s infinite cubic-bezier(.45,.05,.3,1)}
@keyframes mp-m8{0%,48.0%{opacity:0;transform:translate(var(--dx),var(--dy))}50.0%{opacity:1}61.0%,100%{opacity:1;transform:translate(0,0)}}
.press8{animation:mp-press8 14s infinite}
@keyframes mp-press8{0%,48.0%,53.0%,100%{transform:scale(1)}50.0%{transform:scale(.88)}}
.fill8{fill:#fff;animation:mp-fill8 14s infinite}
@keyframes mp-fill8{0%,49.0%{fill:#fff}51.0%,100%{fill:#e7ebdf}}
.d9{stroke-dasharray:1;stroke-dashoffset:1;animation:mp-d9 14s infinite ease-out}
@keyframes mp-d9{0%,54.0%{stroke-dashoffset:1}63.0%,100%{stroke-dashoffset:0}}
.p9{opacity:0;animation:mp-p9 14s infinite}
@keyframes mp-p9{0%,54.0%{opacity:0;transform:scale(.3)}57.5%{opacity:1;transform:scale(1.15)}60.0%,100%{opacity:1;transform:scale(1)}}
.f9{opacity:0;animation:mp-f9 14s infinite}
@keyframes mp-f9{0%,54.0%{opacity:0}59.0%,100%{opacity:1}}
.g9{transform-origin:left center;transform:scaleX(0);animation:mp-g9 14s infinite ease-out}
@keyframes mp-g9{0%,54.0%{transform:scaleX(0)}60.0%,100%{transform:scaleX(1)}}
.m9{opacity:0;animation:mp-m9 14s infinite cubic-bezier(.45,.05,.3,1)}
@keyframes mp-m9{0%,54.0%{opacity:0;transform:translate(var(--dx),var(--dy))}56.0%{opacity:1}67.0%,100%{opacity:1;transform:translate(0,0)}}
.press9{animation:mp-press9 14s infinite}
@keyframes mp-press9{0%,54.0%,59.0%,100%{transform:scale(1)}56.0%{transform:scale(.88)}}
.fill9{fill:#fff;animation:mp-fill9 14s infinite}
@keyframes mp-fill9{0%,55.0%{fill:#fff}57.0%,100%{fill:#e7ebdf}}
.d10{stroke-dasharray:1;stroke-dashoffset:1;animation:mp-d10 14s infinite ease-out}
@keyframes mp-d10{0%,60.0%{stroke-dashoffset:1}69.0%,100%{stroke-dashoffset:0}}
.p10{opacity:0;animation:mp-p10 14s infinite}
@keyframes mp-p10{0%,60.0%{opacity:0;transform:scale(.3)}63.5%{opacity:1;transform:scale(1.15)}66.0%,100%{opacity:1;transform:scale(1)}}
.f10{opacity:0;animation:mp-f10 14s infinite}
@keyframes mp-f10{0%,60.0%{opacity:0}65.0%,100%{opacity:1}}
.g10{transform-origin:left center;transform:scaleX(0);animation:mp-g10 14s infinite ease-out}
@keyframes mp-g10{0%,60.0%{transform:scaleX(0)}66.0%,100%{transform:scaleX(1)}}
.m10{opacity:0;animation:mp-m10 14s infinite cubic-bezier(.45,.05,.3,1)}
@keyframes mp-m10{0%,60.0%{opacity:0;transform:translate(var(--dx),var(--dy))}62.0%{opacity:1}73.0%,100%{opacity:1;transform:translate(0,0)}}
.press10{animation:mp-press10 14s infinite}
@keyframes mp-press10{0%,60.0%,65.0%,100%{transform:scale(1)}62.0%{transform:scale(.88)}}
.fill10{fill:#fff;animation:mp-fill10 14s infinite}
@keyframes mp-fill10{0%,61.0%{fill:#fff}63.0%,100%{fill:#e7ebdf}}
.d11{stroke-dasharray:1;stroke-dashoffset:1;animation:mp-d11 14s infinite ease-out}
@keyframes mp-d11{0%,66.0%{stroke-dashoffset:1}75.0%,100%{stroke-dashoffset:0}}
.p11{opacity:0;animation:mp-p11 14s infinite}
@keyframes mp-p11{0%,66.0%{opacity:0;transform:scale(.3)}69.5%{opacity:1;transform:scale(1.15)}72.0%,100%{opacity:1;transform:scale(1)}}
.f11{opacity:0;animation:mp-f11 14s infinite}
@keyframes mp-f11{0%,66.0%{opacity:0}71.0%,100%{opacity:1}}
.g11{transform-origin:left center;transform:scaleX(0);animation:mp-g11 14s infinite ease-out}
@keyframes mp-g11{0%,66.0%{transform:scaleX(0)}72.0%,100%{transform:scaleX(1)}}
.m11{opacity:0;animation:mp-m11 14s infinite cubic-bezier(.45,.05,.3,1)}
@keyframes mp-m11{0%,66.0%{opacity:0;transform:translate(var(--dx),var(--dy))}68.0%{opacity:1}79.0%,100%{opacity:1;transform:translate(0,0)}}
.press11{animation:mp-press11 14s infinite}
@keyframes mp-press11{0%,66.0%,71.0%,100%{transform:scale(1)}68.0%{transform:scale(.88)}}
.fill11{fill:#fff;animation:mp-fill11 14s infinite}
@keyframes mp-fill11{0%,67.0%{fill:#fff}69.0%,100%{fill:#e7ebdf}}
.spin{animation:mp-spin 10s linear infinite}.spinr{animation:mp-spin 7.2s linear infinite reverse}
@keyframes mp-spin{to{transform:rotate(360deg)}}
.blink{animation:mp-blink 1.8s ease-in-out infinite alternate}
@keyframes mp-blink{from{opacity:1}to{opacity:.25}}
.bob{animation:mp-bob 2.8s ease-in-out infinite alternate}
@keyframes mp-bob{from{transform:translateY(0)}to{transform:translateY(-5px)}}
.wiggle{transform-origin:right top;animation:mp-wiggle 2.4s ease-in-out infinite alternate}
@keyframes mp-wiggle{from{transform:rotate(-4deg)}to{transform:rotate(5deg)}}
.flow{animation:mp-flow 3.2s ease-in-out infinite}
@keyframes mp-flow{0%{transform:translateX(var(--fx));opacity:0}15%,85%{opacity:1}100%{transform:translateX(var(--tx));opacity:0}}

.mp svg.mp-wipe image{filter:brightness(1.07)}
.mp svg.mp-wipe{animation:mp-wipe 14s infinite cubic-bezier(.4,0,.2,1)}@keyframes mp-wipe{0%{clip-path:inset(0 100% 0 0)}32%,100%{clip-path:inset(0 0 0 0)}}
.ping{transform-origin:center;animation:mp-ping 4.8s ease-out infinite}@keyframes mp-ping{0%{transform:scale(1);opacity:.9}100%{transform:scale(3.4);opacity:0}}
.orbit{animation:mp-spin 12s linear infinite}
.t0{transform-box:fill-box;transform-origin:left center;transform:scaleX(0);animation:mp-t0 14s infinite}@keyframes mp-t0{0%,0.0%{transform:scaleX(0);animation-timing-function:steps(6,end)}9.0%,100%{transform:scaleX(1)}}
.t1{transform-box:fill-box;transform-origin:left center;transform:scaleX(0);animation:mp-t1 14s infinite}@keyframes mp-t1{0%,6.0%{transform:scaleX(0);animation-timing-function:steps(6,end)}15.0%,100%{transform:scaleX(1)}}
.t2{transform-box:fill-box;transform-origin:left center;transform:scaleX(0);animation:mp-t2 14s infinite}@keyframes mp-t2{0%,12.0%{transform:scaleX(0);animation-timing-function:steps(6,end)}21.0%,100%{transform:scaleX(1)}}
.t3{transform-box:fill-box;transform-origin:left center;transform:scaleX(0);animation:mp-t3 14s infinite}@keyframes mp-t3{0%,18.0%{transform:scaleX(0);animation-timing-function:steps(6,end)}27.0%,100%{transform:scaleX(1)}}
.t4{transform-box:fill-box;transform-origin:left center;transform:scaleX(0);animation:mp-t4 14s infinite}@keyframes mp-t4{0%,24.0%{transform:scaleX(0);animation-timing-function:steps(6,end)}33.0%,100%{transform:scaleX(1)}}
.t5{transform-box:fill-box;transform-origin:left center;transform:scaleX(0);animation:mp-t5 14s infinite}@keyframes mp-t5{0%,30.0%{transform:scaleX(0);animation-timing-function:steps(6,end)}39.0%,100%{transform:scaleX(1)}}
.t6{transform-box:fill-box;transform-origin:left center;transform:scaleX(0);animation:mp-t6 14s infinite}@keyframes mp-t6{0%,36.0%{transform:scaleX(0);animation-timing-function:steps(6,end)}45.0%,100%{transform:scaleX(1)}}
.t7{transform-box:fill-box;transform-origin:left center;transform:scaleX(0);animation:mp-t7 14s infinite}@keyframes mp-t7{0%,42.0%{transform:scaleX(0);animation-timing-function:steps(6,end)}51.0%,100%{transform:scaleX(1)}}
.t8{transform-box:fill-box;transform-origin:left center;transform:scaleX(0);animation:mp-t8 14s infinite}@keyframes mp-t8{0%,48.0%{transform:scaleX(0);animation-timing-function:steps(6,end)}57.0%,100%{transform:scaleX(1)}}
.t9{transform-box:fill-box;transform-origin:left center;transform:scaleX(0);animation:mp-t9 14s infinite}@keyframes mp-t9{0%,54.0%{transform:scaleX(0);animation-timing-function:steps(6,end)}63.0%,100%{transform:scaleX(1)}}
.t10{transform-box:fill-box;transform-origin:left center;transform:scaleX(0);animation:mp-t10 14s infinite}@keyframes mp-t10{0%,60.0%{transform:scaleX(0);animation-timing-function:steps(6,end)}69.0%,100%{transform:scaleX(1)}}
.t11{transform-box:fill-box;transform-origin:left center;transform:scaleX(0);animation:mp-t11 14s infinite}@keyframes mp-t11{0%,66.0%{transform:scaleX(0);animation-timing-function:steps(6,end)}75.0%,100%{transform:scaleX(1)}}
.beat{animation:mp-beat 6s ease-in-out infinite}@keyframes mp-beat{0%,30%,100%{transform:scale(1)}12%{transform:scale(1.15)}}
.flash{animation:mp-flash 6s infinite}@keyframes mp-flash{0%,45%,100%{opacity:.5}8%,33%{opacity:1}}
.nudge{animation:mp-nudge 2.4s ease-in-out infinite alternate}@keyframes mp-nudge{from{transform:translateX(0)}to{transform:translateX(9px)}}
.pulse{animation:mp-pulse 2s ease-in-out infinite alternate}@keyframes mp-pulse{from{transform:scaleX(1)}to{transform:scaleX(1.12)}}
.scan{animation:mp-scan 4.8s ease-in-out infinite alternate}@keyframes mp-scan{from{transform:translate(-14px,4px)}to{transform:translate(12px,-6px)}}
@media (prefers-reduced-motion:reduce){.mp svg *{animation:none!important;stroke-dashoffset:0!important;transform:none!important;opacity:1!important}.mp .flow,.mp .ping{opacity:0!important}.mp svg.mp-wipe{clip-path:none!important}}

.motion-caption{font-size:12px!important;line-height:1.6!important;color:#526357!important;text-align:center;margin:10px 4px 0!important;min-height:38px}.motion-controls{display:flex;justify-content:center;margin:6px 0 2px}.motion-toggle{border:1px solid var(--line);border-radius:20px;padding:5px 12px;background:white;color:var(--green);font-size:11px}.motion-toggle:focus-visible{outline:2px solid var(--green);outline-offset:3px}
/* 웹과 개발 · 연결과 방법 모션 */
.mp svg .c12-req{animation:c12-req 14s infinite ease-in-out;}@keyframes c12-req{0%,30%{transform:translate(0px,0px) scale(1);opacity:0}32%{transform:translate(0px,0px) scale(1);opacity:1}40%{transform:translate(62px,0px) scale(1);opacity:1}44%{transform:translate(62px,0px) scale(1);opacity:1}51%{transform:translate(150px,0px) scale(1);opacity:1}53%{transform:translate(150px,0px) scale(1);opacity:0}100%{transform:translate(150px,0px) scale(1);opacity:0}}
.mp svg .c12-res{animation:c12-res 14s infinite ease-in-out;}@keyframes c12-res{0%,55%{transform:translate(0px,0px) scale(1);opacity:0}57%{transform:translate(0px,0px) scale(1);opacity:1}63%{transform:translate(-78px,0px) scale(1);opacity:1}66%{transform:translate(-78px,0px) scale(1);opacity:1}73%{transform:translate(-150px,0px) scale(1);opacity:1}75%{transform:translate(-150px,0px) scale(1);opacity:0}100%{transform:translate(-150px,0px) scale(1);opacity:0}}
.mp svg .c12-api-bg{opacity:0;animation:c12-api-bg 14s infinite}@keyframes c12-api-bg{0%{opacity:0}39%{opacity:0}40.5%{opacity:1}44.5%{opacity:1}46%{opacity:0}62%{opacity:0}63.5%{opacity:1}66.5%{opacity:1}68%{opacity:0}100%{opacity:0}}
.mp svg .c12-srv{opacity:0;animation:c12-srv 14s infinite}@keyframes c12-srv{0%{opacity:0}50%{opacity:0}51.5%{opacity:0.7}55.5%{opacity:0.7}57%{opacity:0}100%{opacity:0}}
.mp svg .c12-sun{animation:c12-sun 14s infinite ease-in-out;}@keyframes c12-sun{0%,73%{opacity:0;transform:scale(.3)}76%{opacity:1;transform:scale(1.18)}78%,100%{opacity:1;transform:scale(1)}}
.mp svg .c13-get{animation:c13-get 14s infinite ease-in-out;}@keyframes c13-get{0%,30%{transform:translate(0px,0px) scale(1);opacity:0}32%{transform:translate(0px,0px) scale(1);opacity:1}41%{transform:translate(92px,0px) scale(1);opacity:1}43%{transform:translate(92px,0px) scale(1);opacity:0}100%{transform:translate(92px,0px) scale(1);opacity:0}}
.mp svg .c13-hl{opacity:0;animation:c13-hl 14s infinite}@keyframes c13-hl{0%{opacity:0}42%{opacity:0}43.5%{opacity:1}48.5%{opacity:1}50%{opacity:0}100%{opacity:0}}
.mp svg .c13-copy{animation:c13-copy 14s infinite ease-in-out;}@keyframes c13-copy{0%,46%{transform:translate(0px,0px) scale(1);opacity:0}48%{transform:translate(0px,0px) scale(1);opacity:1}57%{transform:translate(-180px,-6px) scale(1);opacity:1}59%{transform:translate(-180px,-6px) scale(1);opacity:0}100%{transform:translate(-180px,-6px) scale(1);opacity:0}}
.mp svg .c13-post{animation:c13-post 14s infinite ease-in-out;}@keyframes c13-post{0%,61%{transform:translate(0px,0px) scale(1);opacity:0}63%{transform:translate(0px,0px) scale(1);opacity:1}73%{transform:translate(96px,0px) scale(1);opacity:1}75%{transform:translate(96px,0px) scale(1);opacity:0}100%{transform:translate(96px,0px) scale(1);opacity:0}}
.mp svg .c13-new{animation:c13-new 14s infinite ease-in-out;}@keyframes c13-new{0%,74%{transform:translate(-30px,0px) scale(1);opacity:0}79%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c14-v1{animation:c14-v1 14s infinite ease-in-out;}@keyframes c14-v1{0%,44%{opacity:0}47%,100%{opacity:1}}
.mp svg .c14-v2{animation:c14-v2 14s infinite ease-in-out;}@keyframes c14-v2{0%,50%{opacity:0}53%,100%{opacity:1}}
.mp svg .c14-k1{animation:c14-k1 14s infinite ease-in-out;}@keyframes c14-k1{0%,58%{opacity:1}62%,70%{opacity:.35}74%,100%{opacity:1}}
.mp svg .c14-k2{animation:c14-k2 14s infinite ease-in-out;}@keyframes c14-k2{0%,66%{opacity:1}70%,78%{opacity:.35}82%,100%{opacity:1}}
.mp svg .c42-q{animation:c42-q 14s infinite ease-in-out;}@keyframes c42-q{0%,28%{transform:translate(0px,0px) scale(1);opacity:0}30%{transform:translate(0px,0px) scale(1);opacity:1}37%{transform:translate(0px,44px) scale(1);opacity:1}38%{transform:translate(0px,44px) scale(1);opacity:0}100%{transform:translate(0px,44px) scale(1);opacity:0}}
.mp svg .c42-mag{animation:c42-mag 14s infinite ease-in-out;}@keyframes c42-mag{0%,37%{transform:translate(0px,0px) scale(1);opacity:0}39%{transform:translate(0px,0px) scale(1);opacity:1}44%{transform:translate(70px,0px) scale(1);opacity:1}47%{transform:translate(40px,0px) scale(1);opacity:1}49%{transform:translate(40px,0px) scale(1);opacity:0}100%{transform:translate(40px,0px) scale(1);opacity:0}}
.mp svg .c42-row{opacity:0;animation:c42-row 14s infinite}@keyframes c42-row{0%{opacity:0}44%{opacity:0}45.5%{opacity:1}52.5%{opacity:1}54%{opacity:0}100%{opacity:0}}
.mp svg .c42-ip{animation:c42-ip 14s infinite ease-in-out;}@keyframes c42-ip{0%,51%{transform:translate(-40px,0px) scale(1);opacity:0}54%{transform:translate(0px,0px) scale(1);opacity:1}61%{transform:translate(0px,-84px) scale(1);opacity:1}100%{transform:translate(0px,-84px) scale(1);opacity:1}}
.mp svg .c42-arr{animation:c42-arr 14s infinite ease-out;transform-origin:center top}@keyframes c42-arr{0%,62%{opacity:0;transform:scaleY(0)}67%,100%{opacity:1;transform:scaleY(1)}}
.mp svg .c42-ok{opacity:0;animation:c42-ok 14s infinite}@keyframes c42-ok{0%{opacity:0}67%{opacity:0}68.5%{opacity:0.7}73.5%{opacity:0.7}75%{opacity:0}100%{opacity:0}}
.mp svg .c42-chk{animation:c42-chk 14s infinite ease-in-out;}@keyframes c42-chk{0%,70%{opacity:0;transform:scale(.3)}73%{opacity:1;transform:scale(1.18)}75%,100%{opacity:1;transform:scale(1)}}
.mp svg .c43-pkt{animation:c43-pkt 14s infinite ease-in-out;}@keyframes c43-pkt{0%,38%{transform:translate(0px,0px) scale(1);opacity:0}40%{transform:translate(0px,0px) scale(1);opacity:1}47%{transform:translate(40px,0px) scale(1);opacity:1}50%{transform:translate(40px,0px) scale(1);opacity:1}58%{transform:translate(40px,74px) scale(1);opacity:1}66%{transform:translate(90px,74px) scale(1);opacity:1}68%{transform:translate(90px,74px) scale(1);opacity:0}100%{transform:translate(90px,74px) scale(1);opacity:0}}
.mp svg .c43-hit{opacity:0;animation:c43-hit 14s infinite}@keyframes c43-hit{0%{opacity:0}66%{opacity:0}67.5%{opacity:1}78.5%{opacity:1}80%{opacity:0}100%{opacity:0}}
.mp svg .c43-chk{animation:c43-chk 14s infinite ease-in-out;}@keyframes c43-chk{0%,68%{opacity:0;transform:scale(.3)}71%{opacity:1;transform:scale(1.18)}73%,100%{opacity:1;transform:scale(1)}}
.mp svg .c43-tag3{animation:c43-tag3 14s infinite ease-in-out;}@keyframes c43-tag3{}
.mp svg .c44-p1{animation:c44-p1 14s infinite ease-in-out;}@keyframes c44-p1{0%,30%{transform:translate(0px,0px) scale(1);opacity:0}32%{transform:translate(0px,0px) scale(1);opacity:1}44%{transform:translate(170px,0px) scale(1);opacity:1}49%{transform:translate(205px,-58px) scale(1);opacity:1}100%{transform:translate(205px,-58px) scale(1);opacity:1}}
.mp svg .c44-p2{animation:c44-p2 14s infinite ease-in-out;}@keyframes c44-p2{0%,34%{transform:translate(0px,0px) scale(1);opacity:0}36%{transform:translate(0px,0px) scale(1);opacity:1}50%{transform:translate(80px,0px) scale(1);opacity:1}54%{transform:translate(80px,0px) scale(1);opacity:1}62%{transform:translate(170px,0px) scale(1);opacity:1}65%{transform:translate(205px,0px) scale(1);opacity:1}100%{transform:translate(205px,0px) scale(1);opacity:1}}
.mp svg .c44-p3{animation:c44-p3 14s infinite ease-in-out;}@keyframes c44-p3{0%,38%{transform:translate(0px,0px) scale(1);opacity:0}40%{transform:translate(0px,0px) scale(1);opacity:1}49%{transform:translate(170px,0px) scale(1);opacity:1}54%{transform:translate(205px,58px) scale(1);opacity:1}100%{transform:translate(205px,58px) scale(1);opacity:1}}
.mp svg .c44-doc{animation:c44-doc 14s infinite ease-in-out;}@keyframes c44-doc{0%,66%{opacity:0}69%,100%{opacity:1}}
.mp svg .c44-ack{animation:c44-ack 14s infinite ease-in-out;}@keyframes c44-ack{0%,68%{transform:translate(0px,0px) scale(1);opacity:0}70%{transform:translate(0px,0px) scale(1);opacity:1}80%{transform:translate(-140px,0px) scale(1);opacity:1}82%{transform:translate(-140px,0px) scale(1);opacity:0}100%{transform:translate(-140px,0px) scale(1);opacity:0}}
.mp svg .c44-chk{animation:c44-chk 14s infinite ease-in-out;}@keyframes c44-chk{0%,67%{opacity:0;transform:scale(.3)}70%{opacity:1;transform:scale(1.18)}72%,100%{opacity:1;transform:scale(1)}}
.mp svg .c45-b1{animation:c45-b 4.8s ease-in-out infinite}.mp svg .c45-b2{animation:c45-b 4.8s ease-in-out infinite;animation-delay:-2.4s}@keyframes c45-b{0%,55%,100%{transform:scale(.6);opacity:0}15%,40%{transform:scale(1);opacity:1}}
.mp svg .c46-lid{animation:c46-lid 14s infinite ease-in-out;}@keyframes c46-lid{0%,22%{transform:translate(0px,0px) scale(1);opacity:1}30%{transform:translate(0px,-34px) scale(1);opacity:0}100%{transform:translate(0px,-34px) scale(1);opacity:0}}
.mp svg .c46-i1{animation:c46-i1 14s infinite ease-in-out;}@keyframes c46-i1{0%,28%{transform:translate(0px,84px) scale(1);opacity:0}34%{transform:translate(0px,0px) scale(1);opacity:1}50%{transform:translate(0px,0px) scale(1);opacity:1}59%{transform:translate(245px,25px) scale(0.55);opacity:1}61%{transform:translate(245px,25px) scale(0.55);opacity:0}100%{transform:translate(245px,25px) scale(0.55);opacity:0}}
.mp svg .c46-i2{animation:c46-i2 14s infinite ease-in-out;}@keyframes c46-i2{0%,31%{transform:translate(0px,84px) scale(1);opacity:0}37%{transform:translate(0px,0px) scale(1);opacity:1}53%{transform:translate(0px,0px) scale(1);opacity:1}62%{transform:translate(228px,25px) scale(0.55);opacity:1}64%{transform:translate(228px,25px) scale(0.55);opacity:0}100%{transform:translate(228px,25px) scale(0.55);opacity:0}}
.mp svg .c46-i3{animation:c46-i3 14s infinite ease-in-out;}@keyframes c46-i3{0%,34%{transform:translate(0px,84px) scale(1);opacity:0}40%{transform:translate(0px,0px) scale(1);opacity:1}56%{transform:translate(0px,0px) scale(1);opacity:1}65%{transform:translate(152px,53px) scale(0.55);opacity:1}67%{transform:translate(152px,53px) scale(0.55);opacity:0}100%{transform:translate(152px,53px) scale(0.55);opacity:0}}
.mp svg .c46-i4{animation:c46-i4 14s infinite ease-in-out;}@keyframes c46-i4{0%,37%{transform:translate(0px,84px) scale(1);opacity:0}43%{transform:translate(0px,0px) scale(1);opacity:1}59%{transform:translate(0px,0px) scale(1);opacity:1}68%{transform:translate(135px,49px) scale(0.55);opacity:1}70%{transform:translate(135px,49px) scale(0.55);opacity:0}100%{transform:translate(135px,49px) scale(0.55);opacity:0}}
.mp svg .c46-app{animation:c46-app 14s infinite ease-in-out;}@keyframes c46-app{0%,66%{opacity:0}69%,100%{opacity:1}}
.mp svg .c46-done{animation:c46-done 14s infinite ease-in-out;}@keyframes c46-done{0%,72%{opacity:0;transform:scale(.3)}75%{opacity:1;transform:scale(1.18)}77%,100%{opacity:1;transform:scale(1)}}
.mp svg .c78-a{animation:c78-a 14s infinite linear;transform-origin:left center}@keyframes c78-a{0%,30%{transform:scaleX(0)}80%,100%{transform:scaleX(1)}}
.mp svg .c78-b{animation:c78-b 14s infinite ease-out;transform-origin:left center}@keyframes c78-b{0%,32%{transform:scaleX(0)}48%,100%{transform:scaleX(1)}}
.mp svg .c78-cb{animation:c78-cb 14s infinite ease-in-out;}@keyframes c78-cb{0%,48%{opacity:0;transform:scale(.3)}51%{opacity:1;transform:scale(1.18)}53%,100%{opacity:1;transform:scale(1)}}
.mp svg .c78-ca{animation:c78-ca 14s infinite ease-in-out;}@keyframes c78-ca{0%,80%{opacity:0;transform:scale(.3)}83%{opacity:1;transform:scale(1.18)}85%,100%{opacity:1;transform:scale(1)}}
.mp svg .c78-spin{animation:c78-spin 14s infinite ease-in-out;}@keyframes c78-spin{0%,28%{opacity:0}31%,79%{opacity:1}80%,100%{opacity:0}}
.mp svg .c78-now{animation:c78-now 14s infinite linear;}@keyframes c78-now{0%,29%{transform:translate(0px,0px) scale(1);opacity:0}30%{transform:translate(0px,0px) scale(1);opacity:1}80%{transform:translate(210px,0px) scale(1);opacity:1}100%{transform:translate(210px,0px) scale(1);opacity:1}}
.mp svg .c78-note{animation:c78-note 14s infinite ease-in-out;}@keyframes c78-note{0%,50%{opacity:0}53%,100%{opacity:1}}
.mp svg .c79-orb{animation:c79-orb 14s infinite linear;transform-box:view-box;transform-origin:140px 124px}@keyframes c79-orb{0%,22%{opacity:0;transform:rotate(0deg)}24%{opacity:1;transform:rotate(0deg)}54%{opacity:1;transform:rotate(360deg)}86%{opacity:1;transform:rotate(720deg)}100%{opacity:1;transform:rotate(720deg)}}
.mp svg .c79-b1{animation:c79-b1 14s infinite ease-in-out;}@keyframes c79-b1{0%,24%{transform:translate(0px,-20px) scale(1);opacity:0}28%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c79-b2{animation:c79-b2 14s infinite ease-in-out;}@keyframes c79-b2{0%,53%{transform:translate(0px,-20px) scale(1);opacity:0}57%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c79-b3{animation:c79-b3 14s infinite ease-in-out;}@keyframes c79-b3{0%,84%{transform:translate(0px,-20px) scale(1);opacity:0}88%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c80-mag{animation:c80-mag 14s infinite ease-in-out;}@keyframes c80-mag{0%,26%{transform:translate(0px,0px) scale(1);opacity:0}28%{transform:translate(0px,0px) scale(1);opacity:1}34%{transform:translate(70px,10px) scale(1);opacity:1}40%{transform:translate(20px,30px) scale(1);opacity:1}45%{transform:translate(60px,0px) scale(1);opacity:1}47%{transform:translate(60px,0px) scale(1);opacity:0}100%{transform:translate(60px,0px) scale(1);opacity:0}}
.mp svg .c80-cover{animation:c80-cover 14s infinite ease-in-out;}@keyframes c80-cover{0%,47%{transform:translate(0px,0px) scale(1);opacity:1}53%{transform:translate(0px,-40px) scale(1);opacity:0}100%{transform:translate(0px,-40px) scale(1);opacity:0}}
.mp svg .c80-chip{animation:c80-chip 14s infinite ease-in-out;}@keyframes c80-chip{0%,52%{transform:translate(0px,0px) scale(1);opacity:1}62%{transform:translate(214px,-36px) scale(1);opacity:1}100%{transform:translate(214px,-36px) scale(1);opacity:1}}
.mp svg .c80-gear{animation:c80-gear 14s infinite ease-in-out;}@keyframes c80-gear{0%,54%{transform:translate(0px,0px) scale(1);opacity:1}64%{transform:translate(214px,-36px) scale(1);opacity:1}100%{transform:translate(214px,-36px) scale(1);opacity:1}}
.mp svg .c80-bat{animation:c80-bat 14s infinite ease-in-out;}@keyframes c80-bat{0%,56%{transform:translate(0px,0px) scale(1);opacity:1}66%{transform:translate(174px,18px) scale(1);opacity:1}100%{transform:translate(174px,18px) scale(1);opacity:1}}
.mp svg .c80-l{animation:c80-l 14s infinite ease-in-out;}@keyframes c80-l{0%,66%{opacity:0}72%,100%{opacity:1}}
.mp svg .c80-lab{animation:c80-lab 14s infinite ease-in-out;}@keyframes c80-lab{0%,70%{opacity:0}75%,100%{opacity:1}}
.mp svg .c80-chk{animation:c80-chk 14s infinite ease-in-out;}@keyframes c80-chk{0%,76%{opacity:0;transform:scale(.3)}79%{opacity:1;transform:scale(1.18)}81%,100%{opacity:1;transform:scale(1)}}
.mp.paused *{animation-play-state:paused!important}
/* 데이터 모션 */
.mp svg .c15-r1{animation:c15-r1 14s infinite ease-in-out;}@keyframes c15-r1{0%,26%{transform:translate(0px,0px) scale(1);opacity:0}29%{transform:translate(0px,0px) scale(1);opacity:1}36%{transform:translate(0px,0px) scale(1);opacity:1}44%{transform:translate(216px,22px) scale(0.82);opacity:1}100%{transform:translate(216px,22px) scale(0.82);opacity:1}}
.mp svg .c15-r2{animation:c15-r2 14s infinite ease-in-out;}@keyframes c15-r2{0%,29%{transform:translate(0px,0px) scale(1);opacity:0}32%{transform:translate(0px,0px) scale(1);opacity:1}40%{transform:translate(0px,0px) scale(1);opacity:1}48%{transform:translate(216px,30px) scale(0.82);opacity:1}100%{transform:translate(216px,30px) scale(0.82);opacity:1}}
.mp svg .c15-r3{animation:c15-r3 14s infinite ease-in-out;}@keyframes c15-r3{0%,32%{transform:translate(0px,0px) scale(1);opacity:0}35%{transform:translate(0px,0px) scale(1);opacity:1}44%{transform:translate(0px,0px) scale(1);opacity:1}52%{transform:translate(216px,38px) scale(0.82);opacity:1}100%{transform:translate(216px,38px) scale(0.82);opacity:1}}
.mp svg .c15-mag{animation:c15-mag 14s infinite ease-in-out;}@keyframes c15-mag{0%,54%{transform:translate(0px,-40px) scale(1);opacity:0}57%{transform:translate(0px,-40px) scale(1);opacity:1}62%{transform:translate(60px,0px) scale(1);opacity:1}66%{transform:translate(30px,0px) scale(1);opacity:1}68%{transform:translate(30px,0px) scale(1);opacity:0}100%{transform:translate(30px,0px) scale(1);opacity:0}}
.mp svg .c15-hl{opacity:0;animation:c15-hl 14s infinite}@keyframes c15-hl{0%{opacity:0}62%{opacity:0}63.5%{opacity:1}72.5%{opacity:1}74%{opacity:0}100%{opacity:0}}
.mp svg .c15-out{animation:c15-out 14s infinite ease-in-out;}@keyframes c15-out{0%,68%{transform:translate(196px,0px) scale(1);opacity:0}70%{transform:translate(196px,0px) scale(1);opacity:1}78%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c15-chk{animation:c15-chk 14s infinite ease-in-out;}@keyframes c15-chk{0%,78%{opacity:0;transform:scale(.3)}81%{opacity:1;transform:scale(1.18)}83%,100%{opacity:1;transform:scale(1)}}
.mp svg .c16-scan{animation:c16-scan 14s infinite ease-in-out;}@keyframes c16-scan{0%,34%{transform:translate(0px,0px) scale(1);opacity:0}36%{transform:translate(0px,0px) scale(1);opacity:1}44%{transform:translate(0px,0px) scale(1);opacity:1}48%{transform:translate(0px,40px) scale(1);opacity:1}54%{transform:translate(0px,40px) scale(1);opacity:1}58%{transform:translate(0px,80px) scale(1);opacity:1}63%{transform:translate(0px,80px) scale(1);opacity:1}65%{transform:translate(0px,80px) scale(1);opacity:0}100%{transform:translate(0px,80px) scale(1);opacity:0}}
.mp svg .c16-m1{animation:c16-m1 14s infinite ease-in-out;}@keyframes c16-m1{0%,42%{opacity:0}45%,100%{opacity:1}}
.mp svg .c16-m3{animation:c16-m3 14s infinite ease-in-out;}@keyframes c16-m3{0%,60%{opacity:0}63%,100%{opacity:1}}
.mp svg .c16-dim{animation:c16-dim 14s infinite ease-in-out;}@keyframes c16-dim{0%,52%{opacity:1}56%,100%{opacity:.3}}
.mp svg .c16-res{animation:c16-res 14s infinite ease-in-out;}@keyframes c16-res{0%,66%{opacity:0;transform:scale(.3)}69%{opacity:1;transform:scale(1.18)}71%,100%{opacity:1;transform:scale(1)}}
.mp svg .c16-arr{animation:c16-arr 14s infinite ease-in-out;}@keyframes c16-arr{0%,64%{opacity:0}67%,100%{opacity:1}}
.mp svg .c81-a{animation:c81-a 14s infinite ease-in-out;}@keyframes c81-a{0%,24%{transform:translate(0px,-20px) scale(1);opacity:0}28%{transform:translate(0px,0px) scale(1);opacity:1}36%{transform:translate(0px,0px) scale(1);opacity:1}44%{transform:translate(0px,104px) scale(1);opacity:1}47%{transform:translate(0px,96px) scale(1);opacity:1}49%{transform:translate(0px,100px) scale(1);opacity:1}100%{transform:translate(0px,100px) scale(1);opacity:1}}
.mp svg .c81-b{animation:c81-b 14s infinite ease-in-out;}@keyframes c81-b{0%,28%{transform:translate(0px,-20px) scale(1);opacity:0}32%{transform:translate(0px,0px) scale(1);opacity:1}42%{transform:translate(0px,0px) scale(1);opacity:1}50%{transform:translate(0px,126px) scale(1);opacity:1}53%{transform:translate(0px,118px) scale(1);opacity:1}55%{transform:translate(0px,122px) scale(1);opacity:1}100%{transform:translate(0px,122px) scale(1);opacity:1}}
.mp svg .c81-c{animation:c81-c 14s infinite ease-in-out;}@keyframes c81-c{0%,32%{transform:translate(0px,-20px) scale(1);opacity:0}36%{transform:translate(0px,0px) scale(1);opacity:1}48%{transform:translate(0px,0px) scale(1);opacity:1}56%{transform:translate(0px,82px) scale(1);opacity:1}59%{transform:translate(0px,74px) scale(1);opacity:1}61%{transform:translate(0px,78px) scale(1);opacity:1}100%{transform:translate(0px,78px) scale(1);opacity:1}}
.mp svg .c81-lab{animation:c81-lab 14s infinite ease-in-out;}@keyframes c81-lab{0%,64%{opacity:0;transform:scale(.3)}67%{opacity:1;transform:scale(1.18)}69%,100%{opacity:1;transform:scale(1)}}
.mp svg .c17-q1{animation:c17-q1 14s infinite linear;}@keyframes c17-q1{0%,28%{transform:translate(0px,0px) scale(1);opacity:0}30%{transform:translate(0px,0px) scale(1);opacity:1}44%{transform:translate(166px,0px) scale(1);opacity:1}46%{transform:translate(166px,0px) scale(1);opacity:0}100%{transform:translate(166px,0px) scale(1);opacity:0}}
.mp svg .c17-slow{opacity:0;animation:c17-slow 14s infinite}@keyframes c17-slow{0%{opacity:0}30%{opacity:0}31.5%{opacity:1}56.5%{opacity:1}58%{opacity:0}100%{opacity:0}}
.mp svg .c17-a1{animation:c17-a1 14s infinite linear;}@keyframes c17-a1{0%,46%{transform:translate(0px,0px) scale(1);opacity:0}48%{transform:translate(0px,0px) scale(1);opacity:1}58%{transform:translate(-150px,0px) scale(1);opacity:1}60%{transform:translate(-150px,0px) scale(1);opacity:0}100%{transform:translate(-150px,0px) scale(1);opacity:0}}
.mp svg .c17-copy{animation:c17-copy 14s infinite ease-in-out;}@keyframes c17-copy{0%,48%{transform:translate(0px,0px) scale(1);opacity:0}50%{transform:translate(0px,0px) scale(1);opacity:1}58%{transform:translate(-92px,112px) scale(1);opacity:1}100%{transform:translate(-92px,112px) scale(1);opacity:1}}
.mp svg .c17-q2{animation:c17-q2 14s infinite ease-in-out;}@keyframes c17-q2{0%,63%{transform:translate(0px,0px) scale(1);opacity:0}65%{transform:translate(0px,0px) scale(1);opacity:1}68%{transform:translate(30px,22px) scale(1);opacity:1}69%{transform:translate(30px,22px) scale(1);opacity:0}100%{transform:translate(30px,22px) scale(1);opacity:0}}
.mp svg .c17-a2{animation:c17-a2 14s infinite ease-in-out;}@keyframes c17-a2{0%,68%{transform:translate(0px,0px) scale(1);opacity:0}69%{transform:translate(0px,0px) scale(1);opacity:1}73%{transform:translate(-86px,-64px) scale(1);opacity:1}75%{transform:translate(-86px,-64px) scale(1);opacity:0}100%{transform:translate(-86px,-64px) scale(1);opacity:0}}
.mp svg .c17-fast{animation:c17-fast 14s infinite ease-in-out;}@keyframes c17-fast{0%,70%{opacity:0;transform:scale(.3)}73%{opacity:1;transform:scale(1.18)}75%,100%{opacity:1;transform:scale(1)}}
.mp svg .c48-l1{opacity:0;animation:c48-l1 14s infinite}@keyframes c48-l1{0%{opacity:0}30%{opacity:0}31.5%{opacity:1}40.5%{opacity:1}42%{opacity:0}100%{opacity:0}}
.mp svg .c48-l2{opacity:0;animation:c48-l2 14s infinite}@keyframes c48-l2{0%{opacity:0}44%{opacity:0}45.5%{opacity:1}53.5%{opacity:1}55%{opacity:0}100%{opacity:0}}
.mp svg .c48-l3{opacity:0;animation:c48-l3 14s infinite}@keyframes c48-l3{0%{opacity:0}57%{opacity:0}58.5%{opacity:1}66.5%{opacity:1}68%{opacity:0}100%{opacity:0}}
.mp svg .c48-l4{opacity:0;animation:c48-l4 14s infinite}@keyframes c48-l4{0%{opacity:0}70%{opacity:0}71.5%{opacity:1}82.5%{opacity:1}84%{opacity:0}100%{opacity:0}}
.mp svg .c48-card{animation:c48-card 14s infinite ease-in-out;}@keyframes c48-card{0%,30%{opacity:0;transform:translate(0,0) scale(.3)}34%{opacity:1;transform:translate(0,0) scale(1.06)}36%,72%{opacity:1;transform:translate(0,0) scale(1)}80%{opacity:1;transform:translate(150px,30px) scale(.2)}82%,100%{opacity:0;transform:translate(150px,30px) scale(.2)}}
.mp svg .c48-plus{animation:c48-plus 14s infinite ease-in-out;}@keyframes c48-plus{0%,31%{opacity:0}33%,40%{opacity:1}43%,100%{opacity:0}}
.mp svg .c48-mag{animation:c48-mag 14s infinite ease-in-out;}@keyframes c48-mag{0%,44%{transform:translate(-30px,0px) scale(1);opacity:0}46%{transform:translate(-30px,0px) scale(1);opacity:1}52%{transform:translate(60px,30px) scale(1);opacity:1}55%{transform:translate(60px,30px) scale(1);opacity:0}100%{transform:translate(60px,30px) scale(1);opacity:0}}
.mp svg .c48-pen{animation:c48-pen 14s infinite ease-in-out;}@keyframes c48-pen{0%,57%{transform:translate(40px,-20px) scale(1);opacity:0}59%{transform:translate(40px,-20px) scale(1);opacity:1}62%{transform:translate(0px,0px) scale(1);opacity:1}64%{transform:translate(-4px,4px) scale(1);opacity:1}66%{transform:translate(0px,0px) scale(1);opacity:1}69%{transform:translate(20px,-20px) scale(1);opacity:0}100%{transform:translate(20px,-20px) scale(1);opacity:0}}
.mp svg .c48-v20{animation:c48-v20 14s infinite ease-in-out;}@keyframes c48-v20{0%,62%{opacity:1}64%,100%{opacity:0}}
.mp svg .c48-v21{animation:c48-v21 14s infinite ease-in-out;}@keyframes c48-v21{0%,62%{opacity:0}65%,100%{opacity:1}}
.mp svg .c48-lid{animation:c48-lid 14s infinite ease-in-out;transform-box:view-box;transform-origin:316px 80px}@keyframes c48-lid{0%,72%,86%,100%{transform:rotate(0)}76%,80%{transform:rotate(-24deg)}}
.mp svg .c49-ok{animation:c49-ok 14s infinite ease-in-out;}@keyframes c49-ok{0%,30%{transform:translate(-60px,0px) scale(1);opacity:0}33%{transform:translate(-60px,0px) scale(1);opacity:1}40%{transform:translate(0px,0px) scale(1);opacity:1}52%{transform:translate(0px,0px) scale(1);opacity:1}55%{transform:translate(0px,0px) scale(1);opacity:0}100%{transform:translate(0px,0px) scale(1);opacity:0}}
.mp svg .c49-okc{animation:c49-okc 14s infinite ease-in-out;}@keyframes c49-okc{0%,40%{opacity:0;transform:scale(.3)}43%{opacity:1;transform:scale(1.15)}45%,52%{opacity:1;transform:scale(1)}55%,100%{opacity:0}}
.mp svg .c49-bad{animation:c49-bad 14s infinite ease-in-out;}@keyframes c49-bad{0%,56%{transform:translate(-60px,0px) scale(1);opacity:0}59%{transform:translate(-60px,0px) scale(1);opacity:1}65%{transform:translate(0px,0px) scale(1);opacity:1}68%{transform:translate(-14px,0px) scale(1);opacity:1}74%{transform:translate(-90px,0px) scale(1);opacity:1}78%{transform:translate(-90px,0px) scale(1);opacity:0}100%{transform:translate(-90px,0px) scale(1);opacity:0}}
.mp svg .c49-x{animation:c49-x 14s infinite ease-in-out;}@keyframes c49-x{0%,67%{opacity:0;transform:scale(.3)}70%{opacity:1;transform:scale(1.18)}72%,100%{opacity:1;transform:scale(1)}}
.mp svg .c50-s0{animation:c50-s0 14s infinite linear;}@keyframes c50-s0{0%,30%{transform:translate(0px,0px) scale(1);opacity:0}32%{transform:translate(0px,0px) scale(1);opacity:1}39%{transform:translate(126px,10px) scale(1);opacity:1}40%{transform:translate(126px,10px) scale(1);opacity:0}100%{transform:translate(126px,10px) scale(1);opacity:0}}
.mp svg .c50-c0{animation:c50-c0 14s infinite linear;}@keyframes c50-c0{0%,39%{transform:translate(0px,0px) scale(1);opacity:0}40%{transform:translate(0px,0px) scale(1);opacity:1}48%{transform:translate(140px,-34px) scale(1);opacity:1}100%{transform:translate(140px,-34px) scale(1);opacity:1}}
.mp svg .c50-s1{animation:c50-s1 14s infinite linear;}@keyframes c50-s1{0%,40%{transform:translate(0px,0px) scale(1);opacity:0}42%{transform:translate(0px,0px) scale(1);opacity:1}49%{transform:translate(126px,10px) scale(1);opacity:1}50%{transform:translate(126px,10px) scale(1);opacity:0}100%{transform:translate(126px,10px) scale(1);opacity:0}}
.mp svg .c50-c1{animation:c50-c1 14s infinite linear;}@keyframes c50-c1{0%,49%{transform:translate(0px,0px) scale(1);opacity:0}50%{transform:translate(0px,0px) scale(1);opacity:1}58%{transform:translate(140px,0px) scale(1);opacity:1}100%{transform:translate(140px,0px) scale(1);opacity:1}}
.mp svg .c50-s2{animation:c50-s2 14s infinite linear;}@keyframes c50-s2{0%,50%{transform:translate(0px,0px) scale(1);opacity:0}52%{transform:translate(0px,0px) scale(1);opacity:1}59%{transform:translate(126px,10px) scale(1);opacity:1}60%{transform:translate(126px,10px) scale(1);opacity:0}100%{transform:translate(126px,10px) scale(1);opacity:0}}
.mp svg .c50-c2{animation:c50-c2 14s infinite linear;}@keyframes c50-c2{0%,59%{transform:translate(0px,0px) scale(1);opacity:0}60%{transform:translate(0px,0px) scale(1);opacity:1}68%{transform:translate(140px,34px) scale(1);opacity:1}100%{transform:translate(140px,34px) scale(1);opacity:1}}
.mp svg .c50-bar{animation:c50-bar 14s infinite linear;transform-origin:left center}@keyframes c50-bar{0%,30%{transform:scaleX(0)}70%,100%{transform:scaleX(1)}}
.mp svg .c50-chk{animation:c50-chk 14s infinite ease-in-out;}@keyframes c50-chk{0%,72%{opacity:0;transform:scale(.3)}75%{opacity:1;transform:scale(1.18)}77%,100%{opacity:1;transform:scale(1)}}
.mp svg .c50-old{animation:c50-old 14s infinite ease-in-out;}@keyframes c50-old{0%,74%{opacity:0}80%,100%{opacity:1}}
.mp svg .c51-i1{animation:c51-i1 14s infinite ease-in-out;}@keyframes c51-i1{0%,24%{transform:translate(0px,0px) scale(1);opacity:0}27%{transform:translate(0px,0px) scale(1);opacity:1}30%{transform:translate(0px,0px) scale(1);opacity:1}36%{transform:translate(104px,40px) scale(0.5);opacity:1}37%{transform:translate(104px,40px) scale(0.3);opacity:0}100%{transform:translate(104px,40px) scale(0.3);opacity:0}}
.mp svg .c51-x1{animation:c51-x1 14s infinite ease-in-out;}@keyframes c51-x1{0%,36%{transform:translate(0px,0px) scale(1);opacity:0}38%{transform:translate(0px,0px) scale(1);opacity:1}46%{transform:translate(92px,-34px) scale(1);opacity:1}100%{transform:translate(92px,-34px) scale(1);opacity:1}}
.mp svg .c51-i2{animation:c51-i2 14s infinite ease-in-out;}@keyframes c51-i2{0%,30%{transform:translate(0px,0px) scale(1);opacity:0}33%{transform:translate(0px,0px) scale(1);opacity:1}36%{transform:translate(0px,0px) scale(1);opacity:1}42%{transform:translate(100px,-20px) scale(0.5);opacity:1}43%{transform:translate(100px,-20px) scale(0.3);opacity:0}100%{transform:translate(100px,-20px) scale(0.3);opacity:0}}
.mp svg .c51-x2{animation:c51-x2 14s infinite ease-in-out;}@keyframes c51-x2{0%,42%{transform:translate(0px,0px) scale(1);opacity:0}44%{transform:translate(0px,0px) scale(1);opacity:1}52%{transform:translate(126px,-34px) scale(1);opacity:1}100%{transform:translate(126px,-34px) scale(1);opacity:1}}
.mp svg .c51-i3{animation:c51-i3 14s infinite ease-in-out;}@keyframes c51-i3{0%,36%{transform:translate(0px,0px) scale(1);opacity:0}39%{transform:translate(0px,0px) scale(1);opacity:1}42%{transform:translate(0px,0px) scale(1);opacity:1}48%{transform:translate(98px,-90px) scale(0.5);opacity:1}49%{transform:translate(98px,-90px) scale(0.3);opacity:0}100%{transform:translate(98px,-90px) scale(0.3);opacity:0}}
.mp svg .c51-x3{animation:c51-x3 14s infinite ease-in-out;}@keyframes c51-x3{0%,48%{transform:translate(0px,0px) scale(1);opacity:0}50%{transform:translate(0px,0px) scale(1);opacity:1}58%{transform:translate(160px,10px) scale(1);opacity:1}100%{transform:translate(160px,10px) scale(1);opacity:1}}
.mp svg .c51-b1{animation:c51-b1 14s infinite ease-out;transform-origin:center bottom}@keyframes c51-b1{0%,66%{transform:scaleY(0)}71%,100%{transform:scaleY(1)}}
.mp svg .c51-b2{animation:c51-b2 14s infinite ease-out;transform-origin:center bottom}@keyframes c51-b2{0%,69%{transform:scaleY(0)}74%,100%{transform:scaleY(1)}}
.mp svg .c51-b3{animation:c51-b3 14s infinite ease-out;transform-origin:center bottom}@keyframes c51-b3{0%,72%{transform:scaleY(0)}77%,100%{transform:scaleY(1)}}
.mp svg .c51-fast{animation:c51-fast 14s infinite ease-in-out;}@keyframes c51-fast{0%,76%{opacity:0;transform:scale(.3)}79%{opacity:1;transform:scale(1.18)}81%,100%{opacity:1;transform:scale(1)}}
.mp svg .wave{animation:mp-wave 5.2s linear infinite}.mp svg .wave2{animation:mp-wave 6.8s linear infinite reverse}@keyframes mp-wave{from{transform:translateX(0)}to{transform:translateX(40px)}}.mp svg .bob2{animation:mp-bob 3.4s ease-in-out infinite alternate-reverse}
.mp svg .c52-i1{animation:c52-i1 14s infinite ease-in;}@keyframes c52-i1{0%,28%{transform:translate(0px,-40px) scale(1);opacity:0}30%{transform:translate(0px,-40px) scale(1);opacity:1}37%{transform:translate(30px,106px) scale(1);opacity:1}100%{transform:translate(30px,106px) scale(1);opacity:1}}
.mp svg .c52-i3{animation:c52-i3 14s infinite ease-in;}@keyframes c52-i3{0%,38%{transform:translate(0px,-40px) scale(1);opacity:0}40%{transform:translate(0px,-40px) scale(1);opacity:1}47%{transform:translate(-10px,108px) scale(1);opacity:1}100%{transform:translate(-10px,108px) scale(1);opacity:1}}
.mp svg .c52-i4{animation:c52-i4 14s infinite ease-in;}@keyframes c52-i4{0%,43%{transform:translate(0px,-40px) scale(1);opacity:0}45%{transform:translate(0px,-40px) scale(1);opacity:1}52%{transform:translate(0px,110px) scale(1);opacity:1}100%{transform:translate(0px,110px) scale(1);opacity:1}}
.mp svg .c52-i2{animation:c52-i2 14s infinite ease-in-out;}@keyframes c52-i2{0%,33%{transform:translate(0px,-40px) scale(1);opacity:0}35%{transform:translate(0px,-40px) scale(1);opacity:1}42%{transform:translate(0px,116px) scale(1);opacity:1}62%{transform:translate(0px,116px) scale(1);opacity:1}70%{transform:translate(0px,20px) scale(1);opacity:1}80%{transform:translate(214px,-10px) scale(0.7);opacity:1}82%{transform:translate(214px,-10px) scale(0.7);opacity:0}100%{transform:translate(214px,-10px) scale(0.7);opacity:0}}
.mp svg .c52-hook{animation:c52-hook 14s infinite ease-in-out;}@keyframes c52-hook{0%,54%{transform:translate(0px,-60px) scale(1);opacity:0}56%{transform:translate(0px,-60px) scale(1);opacity:1}62%{transform:translate(0px,96px) scale(1);opacity:1}70%{transform:translate(0px,0px) scale(1);opacity:1}80%{transform:translate(214px,-30px) scale(1);opacity:1}82%{transform:translate(214px,-30px) scale(1);opacity:0}100%{transform:translate(214px,-30px) scale(1);opacity:0}}
.mp svg .c52-ai{animation:c52-ai 14s infinite ease-in-out;}@keyframes c52-ai{0%,58%{opacity:0;transform:scale(.3)}61%{opacity:1;transform:scale(1.18)}63%,100%{opacity:1;transform:scale(1)}}
/* 웹과 개발 · 기본 모션 */
.mp svg .c1-btn{animation:c1-btn 14s infinite ease-in-out;}@keyframes c1-btn{0%,50%{opacity:0}53%,100%{opacity:1}}
.mp svg .c1-fly{animation:c1-fly 14s infinite ease-in-out;}@keyframes c1-fly{0%,50%{transform:translate(0px,0px) scale(1);opacity:0}52%{transform:translate(0px,0px) scale(1);opacity:1}62%{transform:translate(146px,-104px) scale(0.5);opacity:1}64%{transform:translate(146px,-104px) scale(0.5);opacity:0}100%{transform:translate(146px,-104px) scale(0.5);opacity:0}}
.mp svg .c1-badge{animation:c1-badge 14s infinite ease-in-out;}@keyframes c1-badge{0%,62%{transform:scale(1)}65%{transform:scale(1.45)}68%,100%{transform:scale(1)}}
.mp svg .c1-n0{animation:c1-n0 14s infinite ease-in-out;}@keyframes c1-n0{0%,63%{opacity:1}64%,100%{opacity:0}}
.mp svg .c1-n1{animation:c1-n1 14s infinite ease-in-out;}@keyframes c1-n1{0%,63%{opacity:0}64%,100%{opacity:1}}
.mp svg .c2-req{animation:c2-req 14s infinite ease-in-out;}@keyframes c2-req{0%,30%{transform:translate(0px,0px) scale(1);opacity:0}32%{transform:translate(0px,0px) scale(1);opacity:1}42%{transform:translate(118px,-30px) scale(1);opacity:1}44%{transform:translate(118px,-30px) scale(1);opacity:0}100%{transform:translate(118px,-30px) scale(1);opacity:0}}
.mp svg .c2-k1{animation:c2-k1 14s infinite ease-in-out;}@keyframes c2-k1{0%,46%{opacity:0;transform:scale(.3)}49%{opacity:1;transform:scale(1.18)}51%,100%{opacity:1;transform:scale(1)}}
.mp svg .c2-k2{animation:c2-k2 14s infinite ease-in-out;}@keyframes c2-k2{0%,58%{opacity:0;transform:scale(.3)}61%{opacity:1;transform:scale(1.18)}63%,100%{opacity:1;transform:scale(1)}}
.mp svg .c2-res{animation:c2-res 14s infinite ease-in-out;}@keyframes c2-res{0%,62%{transform:translate(0px,0px) scale(1);opacity:0}64%{transform:translate(0px,0px) scale(1);opacity:1}74%{transform:translate(-98px,-42px) scale(1);opacity:1}76%{transform:translate(-98px,-42px) scale(1);opacity:0}100%{transform:translate(-98px,-42px) scale(1);opacity:0}}
.mp svg .c2-done{animation:c2-done 14s infinite ease-in-out;}@keyframes c2-done{0%,75%{opacity:0;transform:scale(.3)}78%{opacity:1;transform:scale(1.18)}80%,100%{opacity:1;transform:scale(1)}}
.mp svg .c3-tool{animation:c3-tool 14s infinite ease-in-out;}@keyframes c3-tool{0%,30%{transform:translate(0px,0px) scale(1);opacity:0}32%{transform:translate(-60px,20px) scale(1);opacity:1}38%{transform:translate(-64px,26px) scale(1);opacity:1}42%{transform:translate(-60px,20px) scale(1);opacity:1}48%{transform:translate(0px,0px) scale(1);opacity:1}54%{transform:translate(74px,12px) scale(1);opacity:1}60%{transform:translate(78px,18px) scale(1);opacity:1}64%{transform:translate(74px,12px) scale(1);opacity:1}70%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c3-fb{animation:c3-fb 14s infinite ease-in-out;}@keyframes c3-fb{0%,38%{opacity:0;transform:scale(.3)}41%{opacity:1;transform:scale(1.18)}43%,100%{opacity:1;transform:scale(1)}}
.mp svg .c3-bg{animation:c3-bg 14s infinite ease-in-out;}@keyframes c3-bg{0%,58%{opacity:0;transform:scale(.3)}61%{opacity:1;transform:scale(1.18)}63%,100%{opacity:1;transform:scale(1)}}
.mp svg .c3-flow{animation:c3-flow 14s infinite ease-in-out;}@keyframes c3-flow{0%,68%{opacity:0}71%,100%{opacity:1}}
.mp svg .c3-lab{animation:c3-lab 14s infinite ease-in-out;}@keyframes c3-lab{0%,72%{opacity:0}75%,100%{opacity:1}}
.mp svg .c4-h1{animation:c4-h1 14s infinite ease-in-out;}@keyframes c4-h1{0%,28%{opacity:0;transform:translateY(20px) rotate(0)}32%{opacity:1;transform:translateY(0) rotate(-10deg)}35%{transform:rotate(10deg)}38%{transform:rotate(-8deg)}41%,100%{opacity:1;transform:rotate(0)}}
.mp svg .c4-h2{animation:c4-h2 14s infinite ease-in-out;}@keyframes c4-h2{0%,31%{opacity:0;transform:translateY(20px) rotate(0)}35%{opacity:1;transform:translateY(0) rotate(-10deg)}38%{transform:rotate(10deg)}41%{transform:rotate(-8deg)}44%,100%{opacity:1;transform:rotate(0)}}
.mp svg .c4-q{animation:c4-q 14s infinite ease-in-out;}@keyframes c4-q{0%,38%{opacity:0;transform:scale(.3)}41%{opacity:1;transform:scale(1.18)}43%,100%{opacity:1;transform:scale(1)}}
.mp svg .c4-r1{animation:c4-r1 14s infinite ease-in-out;}@keyframes c4-r1{0%,50%{transform:translate(0px,0px) scale(1);opacity:0}52%{transform:translate(0px,0px) scale(1);opacity:1}62%{transform:translate(-168px,30px) scale(1);opacity:1}64%{transform:translate(-168px,30px) scale(1);opacity:0}100%{transform:translate(-168px,30px) scale(1);opacity:0}}
.mp svg .c4-r2{animation:c4-r2 14s infinite ease-in-out;}@keyframes c4-r2{0%,54%{transform:translate(0px,0px) scale(1);opacity:0}56%{transform:translate(0px,0px) scale(1);opacity:1}66%{transform:translate(-62px,0px) scale(1);opacity:1}68%{transform:translate(-62px,0px) scale(1);opacity:0}100%{transform:translate(-62px,0px) scale(1);opacity:0}}
.mp svg .c4-s1{animation:c4-s1 14s infinite ease-out;transform-origin:left center}@keyframes c4-s1{0%,63%{transform:scaleX(0)}70%,100%{transform:scaleX(1)}}
.mp svg .c4-s2{animation:c4-s2 14s infinite ease-out;transform-origin:left center}@keyframes c4-s2{0%,67%{transform:scaleX(0)}74%,100%{transform:scaleX(1)}}
.mp svg .c5-q1{animation:c5-q1 14s infinite ease-in-out;}@keyframes c5-q1{0%,28%{transform:translate(0px,0px) scale(1);opacity:0}30%{transform:translate(0px,0px) scale(1);opacity:1}38%{transform:translate(124px,50px) scale(1);opacity:1}40%{transform:translate(124px,50px) scale(1);opacity:0}100%{transform:translate(124px,50px) scale(1);opacity:0}}
.mp svg .c5-h2{opacity:0;animation:c5-h2 14s infinite}@keyframes c5-h2{0%{opacity:0}40%{opacity:0}41.5%{opacity:1}48.5%{opacity:1}50%{opacity:0}100%{opacity:0}}
.mp svg .c5-a1{animation:c5-a1 14s infinite ease-in-out;}@keyframes c5-a1{0%,48%{transform:translate(0px,0px) scale(1);opacity:0}50%{transform:translate(0px,0px) scale(1);opacity:1}58%{transform:translate(-118px,0px) scale(1);opacity:1}60%{transform:translate(-118px,0px) scale(1);opacity:0}100%{transform:translate(-118px,0px) scale(1);opacity:0}}
.mp svg .c5-q2{animation:c5-q2 14s infinite ease-in-out;}@keyframes c5-q2{0%,52%{transform:translate(0px,0px) scale(1);opacity:0}54%{transform:translate(0px,0px) scale(1);opacity:1}62%{transform:translate(140px,50px) scale(1);opacity:1}64%{transform:translate(140px,50px) scale(1);opacity:0}100%{transform:translate(140px,50px) scale(1);opacity:0}}
.mp svg .c5-h3{opacity:0;animation:c5-h3 14s infinite}@keyframes c5-h3{0%{opacity:0}64%{opacity:0}65.5%{opacity:1}72.5%{opacity:1}74%{opacity:0}100%{opacity:0}}
.mp svg .c5-a2{animation:c5-a2 14s infinite ease-in-out;}@keyframes c5-a2{0%,72%{transform:translate(0px,50px) scale(1);opacity:0}74%{transform:translate(0px,50px) scale(1);opacity:1}82%{transform:translate(-124px,0px) scale(1);opacity:1}84%{transform:translate(-124px,0px) scale(1);opacity:0}100%{transform:translate(-124px,0px) scale(1);opacity:0}}
.mp svg .c5-led{animation:c5-led 14s infinite ease-in-out;}@keyframes c5-led{0%,28%{opacity:0}30%,100%{opacity:1}}
.mp svg .c7-r1{animation:c7-r1 14s infinite ease-in-out;}@keyframes c7-r1{0%,32%{opacity:.35}34%,42%{opacity:1;font-weight:900}44%,100%{opacity:1}}
.mp svg .c7-r2{animation:c7-r2 14s infinite ease-in-out;}@keyframes c7-r2{0%,44%{opacity:.35}46%,54%{opacity:1;font-weight:900}56%,100%{opacity:1}}
.mp svg .c7-r3{animation:c7-r3 14s infinite ease-in-out;}@keyframes c7-r3{0%,56%{opacity:.35}58%,66%{opacity:1;font-weight:900}68%,100%{opacity:1}}
.mp svg .c7-r4{animation:c7-r4 14s infinite ease-in-out;}@keyframes c7-r4{0%,68%{opacity:.35}70%,78%{opacity:1;font-weight:900}80%,100%{opacity:1}}
.mp svg .c7-t0{animation:c7-t0 14s infinite ease-in-out;}@keyframes c7-t0{0%,36%{opacity:1}39%,100%{opacity:0}}
.mp svg .c7-t1{animation:c7-t1 14s infinite ease-in-out;}@keyframes c7-t1{0%,36%{opacity:0}39%,100%{opacity:1}}
.mp svg .c7-i{animation:c7-i 14s infinite ease-in-out;}@keyframes c7-i{0%,58%{opacity:1}61%,100%{opacity:0}}
.mp svg .c7-i1{animation:c7-i1 14s infinite ease-in-out;}@keyframes c7-i1{0%,58%{opacity:0}61%,100%{opacity:1}}
.mp svg .c7-p{animation:c7-p 14s infinite ease-in-out;}@keyframes c7-p{0%,60%{opacity:1}63%,100%{opacity:0}}
.mp svg .c7-p1{animation:c7-p1 14s infinite ease-in-out;}@keyframes c7-p1{0%,60%{opacity:0}63%,100%{opacity:1}}
.mp svg .c7-b{animation:c7-b 14s infinite ease-in-out;}@keyframes c7-b{0%,72%{opacity:1}75%,100%{opacity:0}}
.mp svg .c7-b1{animation:c7-b1 14s infinite ease-in-out;}@keyframes c7-b1{0%,72%{opacity:0}75%,100%{opacity:1}}
.mp svg .c7-brush{animation:c7-brush 14s infinite ease-in-out;}@keyframes c7-brush{0%,30%{transform:translate(0px,0px) scale(1);opacity:0}33%{transform:translate(-40px,20px) scale(1);opacity:1}40%{transform:translate(-170px,30px) scale(1);opacity:1}50%{transform:translate(-90px,80px) scale(1);opacity:1}60%{transform:translate(-120px,110px) scale(1);opacity:1}72%{transform:translate(-100px,160px) scale(1);opacity:1}78%{transform:translate(-60px,150px) scale(1);opacity:0}100%{transform:translate(-60px,150px) scale(1);opacity:0}}
.mp svg .c8-cur{animation:c8-cur 14s infinite ease-in-out;}@keyframes c8-cur{0%,30%{transform:translate(140px,40px) scale(1);opacity:0}34%{transform:translate(140px,40px) scale(1);opacity:1}44%{transform:translate(0px,0px) scale(1);opacity:1}47%{transform:translate(0px,0px) scale(0.85);opacity:1}50%{transform:translate(0px,0px) scale(1);opacity:1}70%{transform:translate(0px,0px) scale(1);opacity:1}76%{transform:translate(60px,40px) scale(1);opacity:0}100%{transform:translate(60px,40px) scale(1);opacity:0}}
.mp svg .c8-h0{animation:c8-h0 14s infinite ease-in-out;}@keyframes c8-h0{0%,46%{opacity:1}49%,100%{opacity:0}}
.mp svg .c8-h1{animation:c8-h1 14s infinite ease-in-out;}@keyframes c8-h1{0%,46%{opacity:0}49%,100%{opacity:1}}
.mp svg .c8-n0{animation:c8-n0 14s infinite ease-in-out;}@keyframes c8-n0{0%,48%{opacity:1}51%,100%{opacity:0}}
.mp svg .c8-n1{animation:c8-n1 14s infinite ease-in-out;}@keyframes c8-n1{0%,48%{opacity:0}51%,100%{opacity:1}}
.mp svg .c8-h1{animation:c8-h1 14s infinite ease-in-out;}@keyframes c8-h1{0%,46%{opacity:0;transform:scale(1)}49%{opacity:1;transform:scale(1.4)}53%,100%{opacity:1;transform:scale(1)}}
.mp svg .c8-pop{animation:c8-pop 14s infinite ease-in-out;}@keyframes c8-pop{0%,48%{opacity:0}50%,60%{opacity:1}64%,100%{opacity:0}}
.mp svg .c8-code{animation:c8-code 14s infinite ease-in-out;}@keyframes c8-code{0%,24%{opacity:0}28%,44%{opacity:.5}47%,58%{opacity:1;transform:scale(1.08)}62%,100%{opacity:1;transform:scale(1)}}
.mp svg .c9-w0{animation:c9-w0 14s infinite ease-in-out;}@keyframes c9-w0{0%,34%{opacity:0}37%,100%{opacity:1}}
.mp svg .c9-f0{animation:c9-f0 14s infinite ease-in-out;}@keyframes c9-f0{0%,37%{opacity:0;transform:scale(.3)}40%{opacity:1;transform:scale(1.18)}42%,100%{opacity:1;transform:scale(1)}}
.mp svg .c9-w1{animation:c9-w1 14s infinite ease-in-out;}@keyframes c9-w1{0%,43%{opacity:0}46%,100%{opacity:1}}
.mp svg .c9-f1{animation:c9-f1 14s infinite ease-in-out;}@keyframes c9-f1{0%,46%{opacity:0;transform:scale(.3)}49%{opacity:1;transform:scale(1.18)}51%,100%{opacity:1;transform:scale(1)}}
.mp svg .c9-w2{animation:c9-w2 14s infinite ease-in-out;}@keyframes c9-w2{0%,52%{opacity:0}55%,100%{opacity:1}}
.mp svg .c9-f2{animation:c9-f2 14s infinite ease-in-out;}@keyframes c9-f2{0%,55%{opacity:0;transform:scale(.3)}58%{opacity:1;transform:scale(1.18)}60%,100%{opacity:1;transform:scale(1)}}
.mp svg .c9-w3{animation:c9-w3 14s infinite ease-in-out;}@keyframes c9-w3{0%,61%{opacity:0}64%,100%{opacity:1}}
.mp svg .c9-f3{animation:c9-f3 14s infinite ease-in-out;}@keyframes c9-f3{0%,64%{opacity:0;transform:scale(.3)}67%{opacity:1;transform:scale(1.18)}69%,100%{opacity:1;transform:scale(1)}}
.mp svg .c9-w4{animation:c9-w4 14s infinite ease-in-out;}@keyframes c9-w4{0%,70%{opacity:0}73%,100%{opacity:1}}
.mp svg .c9-f4{animation:c9-f4 14s infinite ease-in-out;}@keyframes c9-f4{0%,73%{opacity:0;transform:scale(.3)}76%{opacity:1;transform:scale(1.18)}78%,100%{opacity:1;transform:scale(1)}}
.mp svg .c9-lab{animation:c9-lab 14s infinite ease-in-out;}@keyframes c9-lab{0%,80%{opacity:0;transform:scale(.3)}83%{opacity:1;transform:scale(1.18)}85%,100%{opacity:1;transform:scale(1)}}
.mp svg .c10-plan{animation:c10-plan 14s infinite ease-in-out;}@keyframes c10-plan{0%,26%{opacity:0}40%,100%{opacity:1}}
.mp svg .c10-pen{animation:c10-pen 14s infinite ease-in-out;}@keyframes c10-pen{0%,24%{transform:translate(0px,0px) scale(1);opacity:0}26%{transform:translate(-120px,160px) scale(1);opacity:1}30%{transform:translate(-120px,70px) scale(1);opacity:1}34%{transform:translate(-60px,20px) scale(1);opacity:1}38%{transform:translate(0px,70px) scale(1);opacity:1}41%{transform:translate(0px,150px) scale(1);opacity:1}44%{transform:translate(40px,150px) scale(1);opacity:0}100%{transform:translate(40px,150px) scale(1);opacity:0}}
.mp svg .c10-lab{animation:c10-lab 14s infinite ease-in-out;}@keyframes c10-lab{0%,40%{opacity:0}43%,100%{opacity:1}}
.mp svg .c10-b0{animation:c10-b0 14s infinite ease-in-out;}@keyframes c10-b0{0%,44.0%{transform:translate(-146px,-64px) scale(1);opacity:0}45.0%{transform:translate(-146px,-64px) scale(1);opacity:1}48.0%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c10-b1{animation:c10-b1 14s infinite ease-in-out;}@keyframes c10-b1{0%,46.6%{transform:translate(-180px,-64px) scale(1);opacity:0}47.6%{transform:translate(-180px,-64px) scale(1);opacity:1}50.6%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c10-b2{animation:c10-b2 14s infinite ease-in-out;}@keyframes c10-b2{0%,49.2%{transform:translate(-214px,-64px) scale(1);opacity:0}50.2%{transform:translate(-214px,-64px) scale(1);opacity:1}53.2%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c10-b3{animation:c10-b3 14s infinite ease-in-out;}@keyframes c10-b3{0%,51.8%{transform:translate(-248px,-64px) scale(1);opacity:0}52.8%{transform:translate(-248px,-64px) scale(1);opacity:1}55.8%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c10-b4{animation:c10-b4 14s infinite ease-in-out;}@keyframes c10-b4{0%,54.4%{transform:translate(-146px,-48px) scale(1);opacity:0}55.4%{transform:translate(-146px,-48px) scale(1);opacity:1}58.4%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c10-b5{animation:c10-b5 14s infinite ease-in-out;}@keyframes c10-b5{0%,57.0%{transform:translate(-180px,-48px) scale(1);opacity:0}58.0%{transform:translate(-180px,-48px) scale(1);opacity:1}61.0%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c10-b6{animation:c10-b6 14s infinite ease-in-out;}@keyframes c10-b6{0%,59.6%{transform:translate(-214px,-48px) scale(1);opacity:0}60.6%{transform:translate(-214px,-48px) scale(1);opacity:1}63.6%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c10-b7{animation:c10-b7 14s infinite ease-in-out;}@keyframes c10-b7{0%,62.2%{transform:translate(-248px,-48px) scale(1);opacity:0}63.2%{transform:translate(-248px,-48px) scale(1);opacity:1}66.2%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c10-b8{animation:c10-b8 14s infinite ease-in-out;}@keyframes c10-b8{0%,64.8%{transform:translate(-163px,-32px) scale(1);opacity:0}65.8%{transform:translate(-163px,-32px) scale(1);opacity:1}68.8%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c10-b9{animation:c10-b9 14s infinite ease-in-out;}@keyframes c10-b9{0%,67.4%{transform:translate(-197px,-32px) scale(1);opacity:0}68.4%{transform:translate(-197px,-32px) scale(1);opacity:1}71.4%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c10-b10{animation:c10-b10 14s infinite ease-in-out;}@keyframes c10-b10{0%,70.0%{transform:translate(-231px,-32px) scale(1);opacity:0}71.0%{transform:translate(-231px,-32px) scale(1);opacity:1}74.0%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c10-b11{animation:c10-b11 14s infinite ease-in-out;}@keyframes c10-b11{0%,72.6%{transform:translate(-180px,-16px) scale(1);opacity:0}73.6%{transform:translate(-180px,-16px) scale(1);opacity:1}76.6%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c10-b12{animation:c10-b12 14s infinite ease-in-out;}@keyframes c10-b12{0%,75.2%{transform:translate(-214px,-16px) scale(1);opacity:0}76.2%{transform:translate(-214px,-16px) scale(1);opacity:1}79.2%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c10-ham{animation:c10-ham 14s infinite ease-in-out;}@keyframes c10-ham{0%,40%{opacity:0;transform:translate(0,0) rotate(0)}44%{opacity:1;transform:translate(150px,40px) rotate(0)}50%,62%,74%{opacity:1;transform:translate(150px,40px) rotate(-25deg)}56%,68%,80%{opacity:1;transform:translate(150px,40px) rotate(10deg)}84%,100%{opacity:0;transform:translate(150px,40px) rotate(0)}}
.mp svg .c10-done{animation:c10-done 14s infinite ease-in-out;}@keyframes c10-done{0%,82%{opacity:0;transform:scale(.3)}85%{opacity:1;transform:scale(1.18)}87%,100%{opacity:1;transform:scale(1)}}
.mp svg .c11-post{animation:c11-post 14s infinite linear;}@keyframes c11-post{0%,28%{transform:translate(0px,0px) scale(1);opacity:0}30%{transform:translate(0px,0px) scale(1);opacity:1}52%{transform:translate(160px,0px) scale(1);opacity:1}54%{transform:translate(160px,0px) scale(1);opacity:0}100%{transform:translate(160px,0px) scale(1);opacity:0}}
.mp svg .c11-eye1{animation:c11-eye1 14s infinite ease-in-out;}@keyframes c11-eye1{0%,34%{opacity:0;transform:scale(.3)}37%{opacity:1;transform:scale(1.18)}39%,100%{opacity:1;transform:scale(1)}}
.mp svg .c11-see{animation:c11-see 14s infinite ease-in-out;}@keyframes c11-see{0%,40%{opacity:0;transform:scale(.3)}43%{opacity:1;transform:scale(1.18)}45%,100%{opacity:1;transform:scale(1)}}
.mp svg .c11-env{animation:c11-env 14s infinite linear;}@keyframes c11-env{0%,52%{transform:translate(0px,0px) scale(1);opacity:0}54%{transform:translate(0px,0px) scale(1);opacity:1}76%{transform:translate(176px,0px) scale(1);opacity:1}78%{transform:translate(176px,0px) scale(1);opacity:0}100%{transform:translate(176px,0px) scale(1);opacity:0}}
.mp svg .c11-eye2{animation:c11-eye2 14s infinite ease-in-out;}@keyframes c11-eye2{0%,58%{opacity:0;transform:scale(.3)}61%{opacity:1;transform:scale(1.18)}63%,100%{opacity:1;transform:scale(1)}}
.mp svg .c11-no{animation:c11-no 14s infinite ease-in-out;}@keyframes c11-no{0%,64%{opacity:0;transform:scale(.3)}67%{opacity:1;transform:scale(1.18)}69%,100%{opacity:1;transform:scale(1)}}
.mp svg .c11-tls{animation:c11-tls 14s infinite ease-in-out;}@keyframes c11-tls{0%,60%{opacity:0}63%,100%{opacity:1}}
.mp svg .c11-ok{animation:c11-ok 14s infinite ease-in-out;}@keyframes c11-ok{0%,77%{opacity:0;transform:scale(.3)}80%{opacity:1;transform:scale(1.18)}82%,100%{opacity:1;transform:scale(1)}}

/* chapter 4 — infra & ops concept motion */
.mp svg .c19-l3{animation:c19-l3 14s infinite ease-in-out;}@keyframes c19-l3{0%,36%{opacity:0}39%,100%{opacity:1}}
.mp svg .c19-c2{animation:c19-c2 14s infinite ease-in-out;}@keyframes c19-c2{0%,40%{opacity:0;transform:scale(.3)}43%{opacity:1;transform:scale(1.18)}45%,100%{opacity:1;transform:scale(1)}}
.mp svg .c19-t2{animation:c19-t2 14s infinite ease-in-out;}@keyframes c19-t2{0%,42%{opacity:0}45%,100%{opacity:1}}
.mp svg .c19-br{animation:c19-br 14s infinite ease-in-out;}@keyframes c19-br{0%,46%{opacity:0}50%,100%{opacity:1}}
.mp svg .c19-l4{animation:c19-l4 14s infinite ease-in-out;}@keyframes c19-l4{0%,50%{opacity:0}53%,100%{opacity:1}}
.mp svg .c19-c3{animation:c19-c3 14s infinite ease-in-out;}@keyframes c19-c3{0%,52%{opacity:0;transform:scale(.3)}55%{opacity:1;transform:scale(1.18)}57%,100%{opacity:1;transform:scale(1)}}
.mp svg .c19-t3{animation:c19-t3 14s infinite ease-in-out;}@keyframes c19-t3{0%,54%{opacity:0}57%,100%{opacity:1}}
.mp svg .c19-c4{animation:c19-c4 14s infinite ease-in-out;}@keyframes c19-c4{0%,62%{opacity:0;transform:scale(.3)}65%{opacity:1;transform:scale(1.18)}67%,100%{opacity:1;transform:scale(1)}}
.mp svg .c19-t4{animation:c19-t4 14s infinite ease-in-out;}@keyframes c19-t4{0%,64%{opacity:0}67%,100%{opacity:1}}
.mp svg .c19-head{animation:c19-head 14s infinite ease-in-out;}@keyframes c19-head{0%,30%{transform:translate(0px,0px) scale(1);opacity:0}33%{transform:translate(0px,0px) scale(1);opacity:1}40%{transform:translate(100px,0px) scale(1);opacity:1}52%{transform:translate(170px,-46px) scale(1);opacity:1}62%{transform:translate(240px,0px) scale(1);opacity:1}72%{transform:translate(240px,0px) scale(1);opacity:1}80%{transform:translate(100px,0px) scale(1);opacity:1}100%{transform:translate(100px,0px) scale(1);opacity:1}}
.mp svg .c19-back{animation:c19-back 14s infinite ease-in-out;}@keyframes c19-back{0%,70%{opacity:0}73%,100%{opacity:1}}
.mp svg .c19-l4{animation:c19-l4 14s infinite ease-in-out;}@keyframes c19-l4{0%,50%{opacity:0}53%,78%{opacity:1}81%,100%{opacity:0}}
.mp svg .c20-up{animation:c20-up 14s infinite ease-in-out;}@keyframes c20-up{0%,30%{transform:translate(0px,0px) scale(1);opacity:0}32%{transform:translate(0px,0px) scale(1);opacity:1}42%{transform:translate(52px,-116px) scale(0.6);opacity:1}44%{transform:translate(52px,-116px) scale(0.6);opacity:0}100%{transform:translate(52px,-116px) scale(0.6);opacity:0}}
.mp svg .c20-slot{animation:c20-slot 14s infinite ease-in-out;}@keyframes c20-slot{0%,44%{opacity:0}47%,100%{opacity:1}}
.mp svg .c20-dn{animation:c20-dn 14s infinite ease-in-out;}@keyframes c20-dn{0%,54%{opacity:0;transform:translate(0,0)}56%{opacity:1;transform:translate(0,0)}68%{opacity:1;transform:translate(-150px,52px)}70%,100%{opacity:0;transform:translate(-150px,52px)}}
.mp svg .c20-meter{animation:c20-meter 14s infinite ease-in-out;}@keyframes c20-meter{0%,40%{opacity:0}44%,100%{opacity:1}}
.mp svg .c20-fill{animation:c20-fill 14s infinite linear;transform-origin:left center}@keyframes c20-fill{0%,44%{transform:scaleX(0)}80%,100%{transform:scaleX(1)}}
.mp svg .c21-box{animation:c21-box 14s infinite ease-in-out;}@keyframes c21-box{0%,30%{transform:translate(0px,-30px) scale(1);opacity:0}34%{transform:translate(0px,0px) scale(1);opacity:1}40%{transform:translate(0px,0px) scale(1);opacity:1}50%{transform:translate(136px,-6px) scale(0.7);opacity:1}52%{transform:translate(136px,-6px) scale(0.7);opacity:0}100%{transform:translate(136px,-6px) scale(0.7);opacity:0}}
.mp svg .c21-v1{animation:c21-v1 14s infinite ease-in-out;}@keyframes c21-v1{0%,26%{opacity:0}30%,58%{opacity:1}70%,100%{opacity:0}}
.mp svg .c21-v2a{animation:c21-v2a 14s infinite ease-in-out;}@keyframes c21-v2a{0%,56%{opacity:0;transform:scale(.3)}59%{opacity:1;transform:scale(1.18)}61%,100%{opacity:1;transform:scale(1)}}
.mp svg .c21-v2b{animation:c21-v2b 14s infinite ease-in-out;}@keyframes c21-v2b{0%,60%{opacity:0;transform:scale(.3)}63%{opacity:1;transform:scale(1.18)}65%,100%{opacity:1;transform:scale(1)}}
.mp svg .c21-v2c{animation:c21-v2c 14s infinite ease-in-out;}@keyframes c21-v2c{0%,64%{opacity:0;transform:scale(.3)}67%{opacity:1;transform:scale(1.18)}69%,100%{opacity:1;transform:scale(1)}}
.mp svg .c21-users{animation:c21-users 14s infinite ease-in-out;}@keyframes c21-users{0%,34%{opacity:0}37%,100%{opacity:1}}
.mp svg .c22-fail{animation:c22-fail 14s infinite ease-in-out;}@keyframes c22-fail{0%,28%{transform:translate(0px,0px) scale(1);opacity:0}30%{transform:translate(0px,0px) scale(1);opacity:1}36%{transform:translate(100px,0px) scale(1);opacity:1}42%{transform:translate(100px,0px) scale(1);opacity:1}48%{transform:translate(204px,0px) scale(1);opacity:1}54%{transform:translate(204px,0px) scale(1);opacity:1}58%{transform:translate(204px,20px) scale(1);opacity:0}100%{transform:translate(204px,20px) scale(1);opacity:0}}
.mp svg .c22-x{animation:c22-x 14s infinite ease-in-out;}@keyframes c22-x{0%,51%{opacity:0;transform:scale(.3)}54%{opacity:1;transform:scale(1.18)}56%,100%{opacity:1;transform:scale(1)}}
.mp svg .c22-x{animation:c22-x 14s infinite ease-in-out;}@keyframes c22-x{0%,51%{opacity:0;transform:scale(.3)}54%{opacity:1;transform:scale(1.15)}56%,62%{opacity:1;transform:scale(1)}65%,100%{opacity:0}}
.mp svg .c22-pass{animation:c22-pass 14s infinite ease-in-out;}@keyframes c22-pass{0%,56%{transform:translate(0px,0px) scale(1);opacity:0}58%{transform:translate(0px,0px) scale(1);opacity:1}63%{transform:translate(100px,0px) scale(1);opacity:1}68%{transform:translate(204px,0px) scale(1);opacity:1}73%{transform:translate(300px,0px) scale(1);opacity:1}77%{transform:translate(300px,-20px) scale(1);opacity:0}100%{transform:translate(300px,-20px) scale(1);opacity:0}}
.mp svg .c22-ok{animation:c22-ok 14s infinite ease-in-out;}@keyframes c22-ok{0%,74%{opacity:0;transform:scale(.3)}77%{opacity:1;transform:scale(1.18)}79%,100%{opacity:1;transform:scale(1)}}
.mp svg .c22-ci{animation:c22-ci 14s infinite ease-in-out;}@keyframes c22-ci{0%,54%{opacity:0}57%,100%{opacity:1}}
.mp svg .c22-cd{animation:c22-cd 14s infinite ease-in-out;}@keyframes c22-cd{0%,76%{opacity:0}79%,100%{opacity:1}}
.mp svg .c23-a{animation:c23-a 14s infinite ease-in-out;}@keyframes c23-a{0%,26%{transform:translate(0px,-20px) scale(1);opacity:0}29%{transform:translate(0px,0px) scale(1);opacity:1}34%{transform:translate(0px,0px) scale(1);opacity:1}40%{transform:translate(20px,74px) scale(1);opacity:1}100%{transform:translate(20px,74px) scale(1);opacity:1}}
.mp svg .c23-b{animation:c23-b 14s infinite ease-in-out;}@keyframes c23-b{0%,28%{transform:translate(0px,-20px) scale(1);opacity:0}31%{transform:translate(0px,0px) scale(1);opacity:1}36%{transform:translate(0px,0px) scale(1);opacity:1}42%{transform:translate(0px,74px) scale(1);opacity:1}100%{transform:translate(0px,74px) scale(1);opacity:1}}
.mp svg .c23-c{animation:c23-c 14s infinite ease-in-out;}@keyframes c23-c{0%,30%{transform:translate(0px,-20px) scale(1);opacity:0}33%{transform:translate(0px,0px) scale(1);opacity:1}38%{transform:translate(0px,0px) scale(1);opacity:1}44%{transform:translate(-16px,74px) scale(1);opacity:1}100%{transform:translate(-16px,74px) scale(1);opacity:1}}
.mp svg .c23-lid{animation:c23-lid 14s infinite ease-in-out;}@keyframes c23-lid{0%,44%{opacity:0;transform:translateY(-24px)}48%,100%{opacity:1;transform:translateY(0)}}
.mp svg .c23-k1{animation:c23-k1 14s infinite ease-in-out;}@keyframes c23-k1{0%,50%{transform:translate(-228px,-2px) scale(1);opacity:0}52%{transform:translate(-228px,-2px) scale(0.9);opacity:1}60%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c23-k2{animation:c23-k2 14s infinite ease-in-out;}@keyframes c23-k2{0%,54%{transform:translate(-228px,-112px) scale(1);opacity:0}56%{transform:translate(-228px,-112px) scale(0.9);opacity:1}64%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c23-r1{animation:c23-r1 14s infinite ease-in-out;}@keyframes c23-r1{0%,62%{opacity:0;transform:scale(.3)}65%{opacity:1;transform:scale(1.18)}67%,100%{opacity:1;transform:scale(1)}}
.mp svg .c23-r2{animation:c23-r2 14s infinite ease-in-out;}@keyframes c23-r2{0%,66%{opacity:0;transform:scale(.3)}69%{opacity:1;transform:scale(1.18)}71%,100%{opacity:1;transform:scale(1)}}
.mp svg .c23-same{animation:c23-same 14s infinite ease-in-out;}@keyframes c23-same{0%,70%{opacity:0}73%,100%{opacity:1}}
.mp svg .c24-k1{animation:c24-k1 14s infinite ease-in-out;}@keyframes c24-k1{0%,36%{transform:translate(200px,-60px) scale(1);opacity:0}38%{transform:translate(200px,-60px) scale(0.6);opacity:1}43%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c24-k2{animation:c24-k2 14s infinite ease-in-out;}@keyframes c24-k2{0%,41%{transform:translate(144px,-60px) scale(1);opacity:0}43%{transform:translate(144px,-60px) scale(0.6);opacity:1}48%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c24-k3{animation:c24-k3 14s infinite ease-in-out;}@keyframes c24-k3{0%,46%{transform:translate(88px,-60px) scale(1);opacity:0}48%{transform:translate(88px,-60px) scale(0.6);opacity:1}53%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c24-cmd2{animation:c24-cmd2 14s infinite ease-in-out;}@keyframes c24-cmd2{0%,56%{opacity:0}58%,100%{opacity:1}}
.mp svg .c24-run1{animation:c24-run1 14s infinite ease-in-out;}@keyframes c24-run1{0%,64%{opacity:0;transform:scale(.3)}67%{opacity:1;transform:scale(1.18)}69%,100%{opacity:1;transform:scale(1)}}
.mp svg .c24-run2{animation:c24-run2 14s infinite ease-in-out;}@keyframes c24-run2{0%,68%{opacity:0;transform:scale(.3)}71%{opacity:1;transform:scale(1.18)}73%,100%{opacity:1;transform:scale(1)}}
.mp svg .c24-run3{animation:c24-run3 14s infinite ease-in-out;}@keyframes c24-run3{0%,72%{opacity:0;transform:scale(.3)}75%{opacity:1;transform:scale(1.18)}77%,100%{opacity:1;transform:scale(1)}}
.mp svg .c53-r0{animation:c53-r0 14s infinite linear;}@keyframes c53-r0{0%,28.0%{transform:translate(0px,0px) scale(1);opacity:0}29.0%{transform:translate(0px,0px) scale(1);opacity:1}32.0%{transform:translate(130px,0px) scale(1);opacity:1}36.0%{transform:translate(250px,-86px) scale(1);opacity:1}37.0%{transform:translate(250px,-86px) scale(1);opacity:0}100%{transform:translate(250px,-86px) scale(1);opacity:0}}
.mp svg .c53-r1{animation:c53-r1 14s infinite linear;}@keyframes c53-r1{0%,34.2%{transform:translate(0px,0px) scale(1);opacity:0}35.2%{transform:translate(0px,0px) scale(1);opacity:1}38.2%{transform:translate(130px,0px) scale(1);opacity:1}42.2%{transform:translate(250px,0px) scale(1);opacity:1}43.2%{transform:translate(250px,0px) scale(1);opacity:0}100%{transform:translate(250px,0px) scale(1);opacity:0}}
.mp svg .c53-r2{animation:c53-r2 14s infinite linear;}@keyframes c53-r2{0%,40.4%{transform:translate(0px,0px) scale(1);opacity:0}41.4%{transform:translate(0px,0px) scale(1);opacity:1}44.4%{transform:translate(130px,0px) scale(1);opacity:1}48.4%{transform:translate(250px,86px) scale(1);opacity:1}49.4%{transform:translate(250px,86px) scale(1);opacity:0}100%{transform:translate(250px,86px) scale(1);opacity:0}}
.mp svg .c53-r3{animation:c53-r3 14s infinite linear;}@keyframes c53-r3{0%,46.6%{transform:translate(0px,0px) scale(1);opacity:0}47.6%{transform:translate(0px,0px) scale(1);opacity:1}50.6%{transform:translate(130px,0px) scale(1);opacity:1}54.6%{transform:translate(250px,-86px) scale(1);opacity:1}55.6%{transform:translate(250px,-86px) scale(1);opacity:0}100%{transform:translate(250px,-86px) scale(1);opacity:0}}
.mp svg .c53-r4{animation:c53-r4 14s infinite linear;}@keyframes c53-r4{0%,52.8%{transform:translate(0px,0px) scale(1);opacity:0}53.8%{transform:translate(0px,0px) scale(1);opacity:1}56.8%{transform:translate(130px,0px) scale(1);opacity:1}60.8%{transform:translate(250px,0px) scale(1);opacity:1}61.8%{transform:translate(250px,0px) scale(1);opacity:0}100%{transform:translate(250px,0px) scale(1);opacity:0}}
.mp svg .c53-r5{animation:c53-r5 14s infinite linear;}@keyframes c53-r5{0%,59.0%{transform:translate(0px,0px) scale(1);opacity:0}60.0%{transform:translate(0px,0px) scale(1);opacity:1}63.0%{transform:translate(130px,0px) scale(1);opacity:1}67.0%{transform:translate(250px,86px) scale(1);opacity:1}68.0%{transform:translate(250px,86px) scale(1);opacity:0}100%{transform:translate(250px,86px) scale(1);opacity:0}}
.mp svg .c53-r6{animation:c53-r6 14s infinite linear;}@keyframes c53-r6{0%,65.2%{transform:translate(0px,0px) scale(1);opacity:0}66.2%{transform:translate(0px,0px) scale(1);opacity:1}69.2%{transform:translate(130px,0px) scale(1);opacity:1}73.2%{transform:translate(250px,-86px) scale(1);opacity:1}74.2%{transform:translate(250px,-86px) scale(1);opacity:0}100%{transform:translate(250px,-86px) scale(1);opacity:0}}
.mp svg .c53-r7{animation:c53-r7 14s infinite linear;}@keyframes c53-r7{0%,71.4%{transform:translate(0px,0px) scale(1);opacity:0}72.4%{transform:translate(0px,0px) scale(1);opacity:1}75.4%{transform:translate(130px,0px) scale(1);opacity:1}79.4%{transform:translate(250px,86px) scale(1);opacity:1}80.4%{transform:translate(250px,86px) scale(1);opacity:0}100%{transform:translate(250px,86px) scale(1);opacity:0}}
.mp svg .c53-r8{animation:c53-r8 14s infinite linear;}@keyframes c53-r8{0%,77.6%{transform:translate(0px,0px) scale(1);opacity:0}78.6%{transform:translate(0px,0px) scale(1);opacity:1}81.6%{transform:translate(130px,0px) scale(1);opacity:1}85.6%{transform:translate(250px,-86px) scale(1);opacity:1}86.6%{transform:translate(250px,-86px) scale(1);opacity:0}100%{transform:translate(250px,-86px) scale(1);opacity:0}}
.mp svg .c53-r9{animation:c53-r9 14s infinite linear;}@keyframes c53-r9{0%,83.8%{transform:translate(0px,0px) scale(1);opacity:0}84.8%{transform:translate(0px,0px) scale(1);opacity:1}87.8%{transform:translate(130px,0px) scale(1);opacity:1}91.8%{transform:translate(250px,86px) scale(1);opacity:1}92.8%{transform:translate(250px,86px) scale(1);opacity:0}100%{transform:translate(250px,86px) scale(1);opacity:0}}
.mp svg .c53-down{animation:c53-down 14s infinite ease-in-out;}@keyframes c53-down{0%,58%{opacity:0}62%,100%{opacity:1}}
.mp svg .c53-hc{animation:c53-hc 14s infinite ease-in-out;}@keyframes c53-hc{0%,64%{opacity:0}67%,100%{opacity:1}}
.mp svg .c54-u0{animation:c54-u0 14s infinite ease-in-out;}@keyframes c54-u0{0%,28%{opacity:0}31%,100%{opacity:1}}
.mp svg .c54-u1{animation:c54-u1 14s infinite ease-in-out;}@keyframes c54-u1{0%,32%{opacity:0;transform:scale(.4)}35%,78%{opacity:1;transform:scale(1)}81%,100%{opacity:0;transform:scale(.4)}}
.mp svg .c54-u2{animation:c54-u2 14s infinite ease-in-out;}@keyframes c54-u2{0%,36%{opacity:0;transform:scale(.4)}39%,76%{opacity:1;transform:scale(1)}79%,100%{opacity:0;transform:scale(.4)}}
.mp svg .c54-u3{animation:c54-u3 14s infinite ease-in-out;}@keyframes c54-u3{0%,40%{opacity:0;transform:scale(.4)}43%,74%{opacity:1;transform:scale(1)}77%,100%{opacity:0;transform:scale(.4)}}
.mp svg .c54-u4{animation:c54-u4 14s infinite ease-in-out;}@keyframes c54-u4{0%,44%{opacity:0;transform:scale(.4)}47%,72%{opacity:1;transform:scale(1)}75%,100%{opacity:0;transform:scale(.4)}}
.mp svg .c54-u5{animation:c54-u5 14s infinite ease-in-out;}@keyframes c54-u5{0%,48%{opacity:0;transform:scale(.4)}51%,70%{opacity:1;transform:scale(1)}73%,100%{opacity:0;transform:scale(.4)}}
.mp svg .c54-lvl{animation:c54-lvl 14s infinite ease-in-out;transform-origin:center bottom}@keyframes c54-lvl{0%,28%{transform:scaleY(.1)}50%{transform:scaleY(1)}68%{transform:scaleY(.9)}82%,100%{transform:scaleY(.2)}}
.mp svg .c54-s2{animation:c54-s2 14s infinite ease-in-out;}@keyframes c54-s2{0%,40%{opacity:0;transform:scale(.4)}44%,76%{opacity:1;transform:scale(1)}80%,100%{opacity:0;transform:scale(.4)}}
.mp svg .c54-s3{animation:c54-s3 14s infinite ease-in-out;}@keyframes c54-s3{0%,46%{opacity:0;transform:scale(.4)}50%,72%{opacity:1;transform:scale(1)}76%,100%{opacity:0;transform:scale(.4)}}
.mp svg .c54-lab{animation:c54-lab 14s infinite ease-in-out;}@keyframes c54-lab{0%,46%{opacity:0}49%,100%{opacity:1}}
.mp svg .c55-k0{animation:c55-k0 14s infinite ease-in-out;}@keyframes c55-k0{0%,30%{transform:translate(0px,-80px) scale(1);opacity:0}35%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c55-k1{animation:c55-k1 14s infinite ease-in-out;}@keyframes c55-k1{0%,33%{transform:translate(0px,-80px) scale(1);opacity:0}38%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c55-k2{animation:c55-k2 14s infinite ease-in-out;}@keyframes c55-k2{0%,36%{opacity:0;transform:translate(0,-80px)}41%,52%{opacity:1;transform:translate(0,0)}56%,100%{opacity:0;transform:translate(0,0)}}
.mp svg .c55-k3{animation:c55-k3 14s infinite ease-in-out;}@keyframes c55-k3{0%,39%{transform:translate(0px,-80px) scale(1);opacity:0}44%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c55-k4{animation:c55-k4 14s infinite ease-in-out;}@keyframes c55-k4{0%,42%{transform:translate(0px,-80px) scale(1);opacity:0}47%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c55-crash{animation:c55-crash 14s infinite ease-in-out;}@keyframes c55-crash{0%,52%{opacity:0}54%,62%{opacity:1}66%,100%{opacity:0}}
.mp svg .c55-new{animation:c55-new 14s infinite ease-in-out;}@keyframes c55-new{0%,62%{transform:translate(0px,-120px) scale(1);opacity:0}68%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c55-heal{animation:c55-heal 14s infinite ease-in-out;}@keyframes c55-heal{0%,68%{opacity:0}71%,100%{opacity:1}}
.mp svg .c55-more{animation:c55-more 14s infinite ease-in-out;}@keyframes c55-more{0%,74%{transform:translate(0px,-120px) scale(1);opacity:0}80%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c55-scale{animation:c55-scale 14s infinite ease-in-out;}@keyframes c55-scale{0%,80%{opacity:0}83%,100%{opacity:1}}
.mp svg .c61-mess{animation:c61-mess 14s infinite ease-in-out;}@keyframes c61-mess{0%,36%{opacity:1}48%,100%{opacity:0}}
.mp svg .c61-b1{animation:c61-b1 14s infinite ease-in-out;}@keyframes c61-b1{0%,40%{transform:translate(0px,40px) scale(0.6);opacity:0}46%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c61-b2{animation:c61-b2 14s infinite ease-in-out;}@keyframes c61-b2{0%,46%{transform:translate(0px,-10px) scale(0.6);opacity:0}52%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c61-b3{animation:c61-b3 14s infinite ease-in-out;}@keyframes c61-b3{0%,52%{transform:translate(0px,-50px) scale(0.6);opacity:0}58%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c61-res{animation:c61r 3.2s ease-in-out infinite}@keyframes c61r{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.mp svg .c25-g0{animation:c25-g0 14s infinite ease-in-out;}@keyframes c25-g0{0%,22%{opacity:0}25%,100%{opacity:1}}
.mp svg .c25-g1{animation:c25-g1 14s infinite ease-in-out;}@keyframes c25-g1{0%,32%{opacity:0}35%,100%{opacity:1}}
.mp svg .c25-g2{animation:c25-g2 14s infinite ease-in-out;}@keyframes c25-g2{0%,42%{opacity:0}45%,100%{opacity:1}}
.mp svg .c25-g3{animation:c25-g3 14s infinite ease-in-out;}@keyframes c25-g3{0%,52%{opacity:0}55%,100%{opacity:1}}
.mp svg .c25-ln{animation:c25-ln 14s infinite linear;}@keyframes c25-ln{0%,24%{stroke-dasharray:1;stroke-dashoffset:1}62%,100%{stroke-dasharray:1;stroke-dashoffset:0}}
.mp svg .c25-bell{animation:c25-bell 14s infinite ease-in-out;transform-origin:center top}@keyframes c25-bell{0%,62%{transform:rotate(0)}64%{transform:rotate(-14deg)}66%{transform:rotate(12deg)}68%{transform:rotate(-10deg)}70%{transform:rotate(8deg)}72%,100%{transform:rotate(0)}}
.mp svg .c25-alert{animation:c25-alert 14s infinite ease-in-out;}@keyframes c25-alert{0%,64%{opacity:0;transform:scale(.3)}67%{opacity:1;transform:scale(1.18)}69%,100%{opacity:1;transform:scale(1)}}
.mp svg .c60-u0{animation:c60-u0 14s infinite ease-in-out;}@keyframes c60-u0{0%,22%{opacity:0;transform:scale(.3)}25%{opacity:1;transform:scale(1.18)}27%,100%{opacity:1;transform:scale(1)}}
.mp svg .c60-u1{animation:c60-u1 14s infinite ease-in-out;}@keyframes c60-u1{0%,27%{opacity:0;transform:scale(.3)}30%{opacity:1;transform:scale(1.18)}32%,100%{opacity:1;transform:scale(1)}}
.mp svg .c60-u2{animation:c60-u2 14s infinite ease-in-out;}@keyframes c60-u2{0%,32%{opacity:0;transform:scale(.3)}35%{opacity:1;transform:scale(1.18)}37%,100%{opacity:1;transform:scale(1)}}
.mp svg .c60-each{animation:c60-each 14s infinite ease-in-out;}@keyframes c60-each{0%,34%{opacity:0}37%,100%{opacity:1}}
.mp svg .c60-tok{animation:c60-tok 14s infinite ease-in-out;}@keyframes c60-tok{0%,46%{transform:translate(0px,0px) scale(1);opacity:0}48%{transform:translate(0px,0px) scale(1);opacity:1}58%{transform:translate(130px,0px) scale(1);opacity:1}68%{transform:translate(260px,0px) scale(1);opacity:1}72%{transform:translate(260px,0px) scale(1);opacity:0}100%{transform:translate(260px,0px) scale(1);opacity:0}}
.mp svg .c60-all{animation:c60-all 14s infinite ease-in-out;}@keyframes c60-all{0%,72%{opacity:0;transform:scale(.3)}75%{opacity:1;transform:scale(1.18)}77%,100%{opacity:1;transform:scale(1)}}
.mp svg .c60-lab{animation:c60-lab 14s infinite ease-in-out;}@keyframes c60-lab{0%,74%{opacity:0}77%,100%{opacity:1}}

/* chapter 5 — AI basics concept motion */
.mp svg .nn0,.mp svg .nn1,.mp svg .nn2{animation:nnp 2.8s ease-in-out infinite}.mp svg .nn1{animation-delay:0.9s}.mp svg .nn2{animation-delay:1.8s}@keyframes nnp{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
.mp svg .c26-o{animation:c26-o 14s infinite ease-in-out;}@keyframes c26-o{0%,24%{opacity:0;transform:scale(.6)}30%,100%{opacity:1;transform:scale(1)}}
.mp svg .c26-oL{animation:c26-oL 14s infinite ease-in-out;}@keyframes c26-oL{0%,30%{opacity:0}33%,100%{opacity:1}}
.mp svg .c26-m{animation:c26-m 14s infinite ease-in-out;}@keyframes c26-m{0%,36%{opacity:0;transform:scale(.4)}42%,100%{opacity:1;transform:scale(1)}}
.mp svg .c26-mL{animation:c26-mL 14s infinite ease-in-out;}@keyframes c26-mL{0%,42%{opacity:0}45%,100%{opacity:1}}
.mp svg .c26-d{animation:c26-d 14s infinite ease-in-out;}@keyframes c26-d{0%,48%{opacity:0;transform:scale(.3)}54%,100%{opacity:1;transform:scale(1)}}
.mp svg .c26-dL{animation:c26-dL 14s infinite ease-in-out;}@keyframes c26-dL{0%,54%{opacity:0}57%,100%{opacity:1}}
.mp svg .c26-n{animation:c26-n 14s infinite ease-in-out;}@keyframes c26-n{0%,58%{opacity:0}61%,100%{opacity:1}}
.mp svg .c26-g{animation:c26-g 14s infinite ease-in-out;}@keyframes c26-g{0%,70%{opacity:0}73%,100%{opacity:1}}
.mp svg .c26-ga{animation:c26-ga 14s infinite ease-in-out;}@keyframes c26-ga{0%,70%{opacity:0}73%,100%{opacity:1}}
.mp svg .c28-noise{animation:c28-noise 14s infinite linear;}@keyframes c28-noise{0%,30%{opacity:0}36%,46%{opacity:1}70%,100%{opacity:0}}
.mp svg .c28-cat{animation:c28-cat 14s infinite linear;}@keyframes c28-cat{0%,44%{opacity:0;filter:blur(6px)}72%,100%{opacity:1;filter:blur(0)}}
.mp svg .c29-b1{animation:c29-b1 14s infinite ease-out;transform-origin:left center}@keyframes c29-b1{0%,34%{transform:scaleX(0)}42%,100%{transform:scaleX(1)}}
.mp svg .c29-b2{animation:c29-b2 14s infinite ease-out;transform-origin:left center}@keyframes c29-b2{0%,37%{transform:scaleX(0)}45%,100%{transform:scaleX(1)}}
.mp svg .c29-b3{animation:c29-b3 14s infinite ease-out;transform-origin:left center}@keyframes c29-b3{0%,40%{transform:scaleX(0)}48%,100%{transform:scaleX(1)}}
.mp svg .c29-bars{animation:c29-bars 14s infinite ease-in-out;}@keyframes c29-bars{0%,28%{opacity:0}32%,100%{opacity:1}}
.mp svg .c29-hl{animation:c29-hl 14s infinite ease-in-out;}@keyframes c29-hl{0%,52%{opacity:0}55%,100%{opacity:1}}
.mp svg .c29-pick{animation:c29-pick 14s infinite ease-in-out;}@keyframes c29-pick{0%,56%{transform:translate(-110px,72px) scale(1);opacity:0}58%{transform:translate(-110px,72px) scale(1);opacity:1}66%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c29-warn{animation:c29-warn 14s infinite ease-in-out;}@keyframes c29-warn{0%,72%{opacity:0}75%,100%{opacity:1}}
.mp svg .c30-m0{animation:c30-m0 14s infinite ease-in-out;}@keyframes c30-m0{0%,20%{transform:translate(0px,-16px) scale(1);opacity:0}24%{transform:translate(0px,0px) scale(1);opacity:1}32%{transform:translate(0px,0px) scale(1);opacity:1}37%{transform:translate(56px,70px) scale(0.5);opacity:1}38%{transform:translate(56px,70px) scale(0.5);opacity:0}100%{transform:translate(56px,70px) scale(1);opacity:0}}
.mp svg .c30-m1{animation:c30-m1 14s infinite ease-in-out;}@keyframes c30-m1{0%,20%{transform:translate(0px,-16px) scale(1);opacity:0}24%{transform:translate(0px,0px) scale(1);opacity:1}39%{transform:translate(0px,0px) scale(1);opacity:1}44%{transform:translate(0px,70px) scale(0.5);opacity:1}45%{transform:translate(0px,70px) scale(0.5);opacity:0}100%{transform:translate(0px,70px) scale(1);opacity:0}}
.mp svg .c30-m2{animation:c30-m2 14s infinite ease-in-out;}@keyframes c30-m2{0%,20%{transform:translate(0px,-16px) scale(1);opacity:0}24%{transform:translate(0px,0px) scale(1);opacity:1}46%{transform:translate(0px,0px) scale(1);opacity:1}51%{transform:translate(-56px,70px) scale(0.5);opacity:1}52%{transform:translate(-56px,70px) scale(0.5);opacity:0}100%{transform:translate(-56px,70px) scale(1);opacity:0}}
.mp svg .c30-dial{animation:c30-dial 14s infinite ease-in-out;}@keyframes c30-dial{0%,28%{transform:rotate(0)}36%{transform:rotate(40deg)}44%{transform:rotate(20deg)}52%,100%{transform:rotate(52deg)}}
.mp svg .c30-new{animation:c30-new 14s infinite ease-in-out;}@keyframes c30-new{0%,56%{transform:translate(0px,-20px) scale(1);opacity:0}58%{transform:translate(0px,0px) scale(1);opacity:1}64%{transform:translate(0px,56px) scale(0.6);opacity:1}66%{transform:translate(0px,56px) scale(0.6);opacity:0}100%{transform:translate(0px,56px) scale(1);opacity:0}}
.mp svg .c30-out{animation:c30-out 14s infinite ease-in-out;}@keyframes c30-out{0%,68%{opacity:0;transform:scale(.3)}71%{opacity:1;transform:scale(1.18)}73%,100%{opacity:1;transform:scale(1)}}
.mp svg .c31-p0{animation:c31-p0 14s infinite ease-in-out;}@keyframes c31-p0{0%,34%{transform:translate(0px,-80px) scale(1);opacity:0}36%{transform:translate(0px,-80px) scale(1);opacity:1}44%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c31-p1{animation:c31-p1 14s infinite ease-in-out;}@keyframes c31-p1{0%,34%{transform:translate(0px,-80px) scale(1);opacity:0}36%{transform:translate(0px,-80px) scale(1);opacity:1}46%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c31-p2{animation:c31-p2 14s infinite ease-in-out;}@keyframes c31-p2{0%,34%{transform:translate(0px,-80px) scale(1);opacity:0}36%{transform:translate(0px,-80px) scale(1);opacity:1}48%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c31-p3{animation:c31-p3 14s infinite ease-in-out;}@keyframes c31-p3{0%,34%{transform:translate(0px,-80px) scale(1);opacity:0}36%{transform:translate(0px,-80px) scale(1);opacity:1}50%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c31-p4{animation:c31-p4 14s infinite ease-in-out;}@keyframes c31-p4{0%,34%{transform:translate(0px,-80px) scale(1);opacity:0}36%{transform:translate(0px,-80px) scale(1);opacity:1}52%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c31-p5{animation:c31-p5 14s infinite ease-in-out;}@keyframes c31-p5{0%,34%{transform:translate(0px,-80px) scale(1);opacity:0}36%{transform:translate(0px,-80px) scale(1);opacity:1}54%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c31-whole{animation:c31-whole 14s infinite ease-in-out;}@keyframes c31-whole{0%,24%{opacity:0}28%,36%{opacity:1}42%,100%{opacity:.25}}
.mp svg .c31-cut{animation:c31-cut 14s infinite ease-in-out;}@keyframes c31-cut{0%,27%{opacity:0}30%,36%{opacity:1}40%,100%{opacity:0}}
.mp svg .c31-n1{animation:c31-n1 14s infinite ease-in-out;}@keyframes c31-n1{0%,58%{opacity:0}61%,100%{opacity:1}}
.mp svg .c31-n2{animation:c31-n2 14s infinite ease-in-out;}@keyframes c31-n2{0%,64%{opacity:0}67%,100%{opacity:1}}
.mp svg .c31-note{animation:c31-note 14s infinite ease-in-out;}@keyframes c31-note{0%,70%{opacity:0}73%,100%{opacity:1}}
.mp svg .c32-t4{animation:c32-t4 14s infinite ease-in-out;}@keyframes c32-t4{0%,30%{opacity:0;transform:translateY(-30px)}35%,100%{opacity:1;transform:translateY(0)}}
.mp svg .c32-t5{animation:c32-t5 14s infinite ease-in-out;}@keyframes c32-t5{0%,42%{opacity:0;transform:translateY(-30px)}47%,100%{opacity:1;transform:translateY(0)}}
.mp svg .c32-t6{animation:c32-t6 14s infinite ease-in-out;}@keyframes c32-t6{0%,54%{opacity:0;transform:translateY(-30px)}59%,100%{opacity:1;transform:translateY(0)}}
.mp svg .c32-t7{animation:c32-t7 14s infinite ease-in-out;}@keyframes c32-t7{0%,66%{opacity:0;transform:translateY(-30px)}71%,100%{opacity:1;transform:translateY(0)}}
.mp svg .c32-t0{animation:c32-t0 14s infinite ease-in-out;}@keyframes c32-t0{0%,55%{opacity:1}59%,100%{opacity:0}}
.mp svg .c32-t1{animation:c32-t1 14s infinite ease-in-out;}@keyframes c32-t1{0%,67%{opacity:1}71%,100%{opacity:0}}
.mp svg .c32-strip{animation:c32-strip 14s infinite ease-in-out;}@keyframes c32-strip{0%,30%{transform:translateX(0)}35%,42%{transform:translateX(-62px)}47%,54%{transform:translateX(-124px)}59%,66%{transform:translateX(-186px)}71%,100%{transform:translateX(-248px)}}
.mp svg .c32-out{animation:c32-out 14s infinite ease-in-out;}@keyframes c32-out{0%,40%{opacity:0}43%,100%{opacity:1}}
.mp svg .c32-in{animation:c32-in 14s infinite ease-in-out;}@keyframes c32-in{0%,46%{opacity:0}49%,100%{opacity:1}}
.mp svg .c33-vague{animation:c33-vague 14s infinite ease-in-out;}@keyframes c33-vague{0%,26%{opacity:0}30%,44%{opacity:1}48%,100%{opacity:0}}
.mp svg .c33-q{animation:c33-q 14s infinite ease-in-out;}@keyframes c33-q{0%,30%{opacity:0}33%,44%{opacity:1}48%,100%{opacity:0}}
.mp svg .c33-l1{animation:c33-l1 14s infinite ease-in-out;}@keyframes c33-l1{0%,46%{opacity:0}49%,100%{opacity:1}}
.mp svg .c33-l2{animation:c33-l2 14s infinite ease-in-out;}@keyframes c33-l2{0%,52%{opacity:0}55%,100%{opacity:1}}
.mp svg .c33-l3{animation:c33-l3 14s infinite ease-in-out;}@keyframes c33-l3{0%,58%{opacity:0}61%,100%{opacity:1}}
.mp svg .c33-good{animation:c33-good 14s infinite ease-in-out;}@keyframes c33-good{0%,64%{opacity:0}67%,100%{opacity:1}}
.mp svg .c33-loop{animation:c33-loop 14s infinite ease-in-out;}@keyframes c33-loop{0%,70%{opacity:0}73%,100%{opacity:1}}
.mp svg .c34-w0{animation:c34-w0 14s infinite ease-in-out;}@keyframes c34-w0{0%,24%{opacity:0}27%,100%{opacity:1}}
.mp svg .c34-v0{animation:c34-v0 14s infinite ease-in-out;}@keyframes c34-v0{0%,32%{opacity:0}35%,100%{opacity:1}}
.mp svg .c34-d0{animation:c34-d0 14s infinite ease-in-out;}@keyframes c34-d0{0%,38%{transform:translate(-130px,-15px) scale(0.5);opacity:0}40%{transform:translate(-130px,-15px) scale(0.5);opacity:1}48%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c34-w1{animation:c34-w1 14s infinite ease-in-out;}@keyframes c34-w1{0%,30%{opacity:0}33%,100%{opacity:1}}
.mp svg .c34-v1{animation:c34-v1 14s infinite ease-in-out;}@keyframes c34-v1{0%,38%{opacity:0}41%,100%{opacity:1}}
.mp svg .c34-d1{animation:c34-d1 14s infinite ease-in-out;}@keyframes c34-d1{0%,44%{transform:translate(-156px,41px) scale(0.5);opacity:0}46%{transform:translate(-156px,41px) scale(0.5);opacity:1}54%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c34-w2{animation:c34-w2 14s infinite ease-in-out;}@keyframes c34-w2{0%,36%{opacity:0}39%,100%{opacity:1}}
.mp svg .c34-v2{animation:c34-v2 14s infinite ease-in-out;}@keyframes c34-v2{0%,44%{opacity:0}47%,100%{opacity:1}}
.mp svg .c34-d2{animation:c34-d2 14s infinite ease-in-out;}@keyframes c34-d2{0%,50%{transform:translate(-70px,7px) scale(0.5);opacity:0}52%{transform:translate(-70px,7px) scale(0.5);opacity:1}60%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c34-near{animation:c34-near 14s infinite ease-in-out;}@keyframes c34-near{0%,64%{opacity:0;transform:scale(.3)}67%{opacity:1;transform:scale(1.18)}69%,100%{opacity:1;transform:scale(1)}}
.mp svg .c35-q{animation:c35-q 14s infinite ease-in-out;}@keyframes c35-q{0%,28%{transform:translate(-196px,-69px) scale(1);opacity:0}30%{transform:translate(-196px,-69px) scale(1);opacity:1}40%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c35-ql{animation:c35-ql 14s infinite ease-in-out;}@keyframes c35-ql{0%,26%{opacity:0}29%,100%{opacity:1}}
.mp svg .c35-ring{animation:c35-ring 14s infinite ease-in-out;}@keyframes c35-ring{0%,42%{opacity:0;transform:scale(.2)}52%,100%{opacity:1;transform:scale(1)}}
.mp svg .c35-r0{animation:c35-r0 14s infinite ease-in-out;}@keyframes c35-r0{0%,56%{transform:translate(196px,-9px) scale(0.3);opacity:0}58%{transform:translate(196px,-9px) scale(0.3);opacity:1}66%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c35-r1{animation:c35-r1 14s infinite ease-in-out;}@keyframes c35-r1{0%,60%{transform:translate(216px,-33px) scale(0.3);opacity:0}62%{transform:translate(216px,-33px) scale(0.3);opacity:1}70%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c35-r2{animation:c35-r2 14s infinite ease-in-out;}@keyframes c35-r2{0%,64%{transform:translate(184px,-67px) scale(0.3);opacity:0}66%{transform:translate(184px,-67px) scale(0.3);opacity:1}74%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c35-note{animation:c35-note 14s infinite ease-in-out;}@keyframes c35-note{0%,72%{opacity:0}75%,100%{opacity:1}}

/* chapter 6 — AI applications & structure concept motion */
.mp svg .c36-hit{animation:c36-hit 14s infinite ease-in-out;}@keyframes c36-hit{0%,32%{opacity:0}35%,100%{opacity:1}}
.mp svg .c36-hit{animation:c36-hit 14s infinite ease-in-out;}@keyframes c36-hit{0%,30%{opacity:0}33%,40%{opacity:1}43%,100%{opacity:0}}
.mp svg .c36-doc{animation:c36-doc 14s infinite ease-in-out;}@keyframes c36-doc{0%,38%{transform:translate(0px,0px) scale(1);opacity:0}40%{transform:translate(0px,0px) scale(1);opacity:1}50%{transform:translate(0px,120px) scale(0.8);opacity:1}54%{transform:translate(0px,130px) scale(0.6);opacity:0}100%{transform:translate(0px,130px) scale(1);opacity:0}}
.mp svg .c36-q{animation:c36-q 14s infinite ease-in-out;}@keyframes c36-q{0%,40%{transform:translate(0px,0px) scale(1);opacity:0}42%{transform:translate(0px,0px) scale(1);opacity:1}52%{transform:translate(148px,140px) scale(0.7);opacity:1}56%{transform:translate(150px,150px) scale(0.5);opacity:0}100%{transform:translate(150px,150px) scale(1);opacity:0}}
.mp svg .c36-ans{animation:c36-ans 14s infinite ease-in-out;}@keyframes c36-ans{0%,62%{opacity:0;transform:scale(.3)}65%{opacity:1;transform:scale(1.18)}67%,100%{opacity:1;transform:scale(1)}}
.mp svg .c36-note{animation:c36-note 14s infinite ease-in-out;}@keyframes c36-note{0%,66%{opacity:0}69%,100%{opacity:1}}
.mp svg .c37-d0{animation:c37-d0 14s infinite ease-in-out;}@keyframes c37-d0{0%,28%{transform:translate(0px,0px) scale(1);opacity:0}29%{transform:translate(0px,0px) scale(1);opacity:1}34%{transform:translate(120px,0px) scale(0.6);opacity:1}35%{transform:translate(120px,0px) scale(0.6);opacity:0}100%{transform:translate(120px,0px) scale(1);opacity:0}}
.mp svg .c37-d1{animation:c37-d1 14s infinite ease-in-out;}@keyframes c37-d1{0%,34%{transform:translate(0px,0px) scale(1);opacity:0}35%{transform:translate(0px,0px) scale(1);opacity:1}40%{transform:translate(120px,0px) scale(0.6);opacity:1}41%{transform:translate(120px,0px) scale(0.6);opacity:0}100%{transform:translate(120px,0px) scale(1);opacity:0}}
.mp svg .c37-d2{animation:c37-d2 14s infinite ease-in-out;}@keyframes c37-d2{0%,40%{transform:translate(0px,0px) scale(1);opacity:0}41%{transform:translate(0px,0px) scale(1);opacity:1}46%{transform:translate(120px,0px) scale(0.6);opacity:1}47%{transform:translate(120px,0px) scale(0.6);opacity:0}100%{transform:translate(120px,0px) scale(1);opacity:0}}
.mp svg .c37-k1{animation:c37-k1 14s infinite ease-in-out;}@keyframes c37-k1{0%,30%{transform:translateX(0)}52%,100%{transform:translateX(30px)}}
.mp svg .c37-k2{animation:c37-k2 14s infinite ease-in-out;}@keyframes c37-k2{0%,30%{transform:translateX(0)}52%,100%{transform:translateX(-26px)}}
.mp svg .c37-k3{animation:c37-k3 14s infinite ease-in-out;}@keyframes c37-k3{0%,30%{transform:translateX(0)}52%,100%{transform:translateX(18px)}}
.mp svg .c37-b1{animation:c37-b1 14s infinite ease-in-out;}@keyframes c37-b1{0%,22%{opacity:0}25%,52%{opacity:1}56%,100%{opacity:0}}
.mp svg .c37-b2{animation:c37-b2 14s infinite ease-in-out;}@keyframes c37-b2{0%,56%{opacity:0;transform:scale(.3)}59%{opacity:1;transform:scale(1.18)}61%,100%{opacity:1;transform:scale(1)}}
.mp svg .c37-badge{animation:c37-badge 14s infinite ease-in-out;}@keyframes c37-badge{0%,54%{opacity:0;transform:scale(.3)}57%{opacity:1;transform:scale(1.18)}59%,100%{opacity:1;transform:scale(1)}}
.mp svg .c37-note{animation:c37-note 14s infinite ease-in-out;}@keyframes c37-note{0%,64%{opacity:0}67%,100%{opacity:1}}
.mp svg .c38-i1{animation:c38-i1 14s infinite ease-in-out;}@keyframes c38-i1{0%,24%{opacity:0;transform:scale(.4)}28%{opacity:1;transform:scale(1.1)}30%,100%{opacity:1;transform:scale(1)}}
.mp svg .c38-i2{animation:c38-i2 14s infinite ease-in-out;}@keyframes c38-i2{0%,30%{opacity:0;transform:scale(.4)}34%{opacity:1;transform:scale(1.1)}36%,100%{opacity:1;transform:scale(1)}}
.mp svg .c38-i3{animation:c38-i3 14s infinite ease-in-out;}@keyframes c38-i3{0%,36%{opacity:0;transform:scale(.4)}40%{opacity:1;transform:scale(1.1)}42%,100%{opacity:1;transform:scale(1)}}
.mp svg .c39-req{animation:c39-req 14s infinite ease-in-out;}@keyframes c39-req{0%,26%{opacity:0}29%,100%{opacity:1}}
.mp svg .c39-req{animation:c39-req 14s infinite ease-in-out;}@keyframes c39-req{0%,24%{opacity:0}28%,50%{opacity:1}54%,100%{opacity:0}}
.mp svg .c39-go{animation:c39-go 14s infinite ease-in-out;}@keyframes c39-go{0%,32%{transform:translate(-110px,60px) scale(1);opacity:0}34%{transform:translate(-110px,60px) scale(0.7);opacity:1}40%{transform:translate(0px,70px) scale(1);opacity:1}48%{transform:translate(136px,0px) scale(1);opacity:1}50%{transform:translate(136px,0px) scale(1);opacity:0}100%{transform:translate(136px,0px) scale(1);opacity:0}}
.mp svg .c39-hl{animation:c39-hl 14s infinite ease-in-out;}@keyframes c39-hl{0%,48%{opacity:0}51%,100%{opacity:1}}
.mp svg .c39-back{animation:c39-back 14s infinite ease-in-out;}@keyframes c39-back{0%,52%{transform:translate(70px,0px) scale(1);opacity:0}54%{transform:translate(70px,0px) scale(1);opacity:1}62%{transform:translate(-40px,70px) scale(1);opacity:1}70%{transform:translate(-190px,70px) scale(1);opacity:1}72%{transform:translate(-190px,70px) scale(1);opacity:0}100%{transform:translate(-190px,70px) scale(1);opacity:0}}
.mp svg .c39-ans{animation:c39-ans 14s infinite ease-in-out;}@keyframes c39-ans{0%,72%{opacity:0;transform:scale(.3)}75%{opacity:1;transform:scale(1.18)}77%,100%{opacity:1;transform:scale(1)}}
.mp svg .c39-lock{animation:c39-lock 14s infinite ease-in-out;}@keyframes c39-lock{0%,40%{opacity:0}43%,100%{opacity:1}}
.mp svg .c40-agent{animation:c40-agent 14s infinite ease-in-out;}@keyframes c40-agent{0%,26%{transform:translate(0px,0px) scale(1);opacity:0}28%{transform:translate(0px,0px) scale(1);opacity:1}36%{transform:translate(0px,0px) scale(1);opacity:1}44%{transform:translate(100px,0px) scale(1);opacity:1}52%{transform:translate(100px,0px) scale(1);opacity:1}60%{transform:translate(200px,0px) scale(1);opacity:1}74%{transform:translate(200px,0px) scale(1);opacity:1}82%{transform:translate(282px,0px) scale(1);opacity:1}100%{transform:translate(282px,0px) scale(1);opacity:1}}
.mp svg .c40-loop{animation:c40-loop 14s infinite ease-in-out;}@keyframes c40-loop{0%,40%{opacity:0}43%,100%{opacity:1}}
.mp svg .c40-ok{animation:c40-ok 14s infinite ease-in-out;}@keyframes c40-ok{0%,64%{opacity:0}67%,100%{opacity:1}}
.mp svg .c40-chk{animation:c40-chk 14s infinite ease-in-out;}@keyframes c40-chk{0%,70%{opacity:0;transform:scale(.3)}73%{opacity:1;transform:scale(1.18)}75%,100%{opacity:1;transform:scale(1)}}
.mp svg .c41-conf{animation:c41-conf 14s infinite ease-in-out;}@keyframes c41-conf{0%,30%{opacity:0;transform:scale(.3)}33%{opacity:1;transform:scale(1.18)}35%,100%{opacity:1;transform:scale(1)}}
.mp svg .c41-mag{animation:c41-mag 14s infinite ease-in-out;}@keyframes c41-mag{0%,34%{transform:translate(0px,0px) scale(1);opacity:0}36%{transform:translate(0px,0px) scale(1);opacity:1}44%{transform:translate(40px,-120px) scale(1);opacity:1}52%{transform:translate(0px,-60px) scale(1);opacity:1}60%{transform:translate(50px,-30px) scale(1);opacity:1}100%{transform:translate(50px,-30px) scale(1);opacity:1}}
.mp svg .c41-x{animation:c41-x 14s infinite ease-in-out;}@keyframes c41-x{0%,64%{opacity:0;transform:scale(.3)}67%{opacity:1;transform:scale(1.18)}69%,100%{opacity:1;transform:scale(1)}}
.mp svg .c62-w0{animation:c62-w0 14s infinite ease-in-out;}@keyframes c62-w0{0%,30%{opacity:0}33%,38%{opacity:1}41%,100%{opacity:.25}}
.mp svg .c62-t00{animation:c62-t00 14s infinite linear;}@keyframes c62-t00{0%,26%{transform:translate(0px,0px) scale(1);opacity:0}27%{transform:translate(0px,0px) scale(1);opacity:1}32%{transform:translate(0px,-44px) scale(1);opacity:1}33%{transform:translate(0px,-44px) scale(1);opacity:0}100%{transform:translate(0px,-44px) scale(1);opacity:0}}
.mp svg .c62-t01{animation:c62-t01 14s infinite linear;}@keyframes c62-t01{0%,26%{transform:translate(0px,0px) scale(1);opacity:0}27%{transform:translate(0px,0px) scale(1);opacity:1}32%{transform:translate(0px,-44px) scale(1);opacity:1}33%{transform:translate(0px,-44px) scale(1);opacity:0}100%{transform:translate(0px,-44px) scale(1);opacity:0}}
.mp svg .c62-t02{animation:c62-t02 14s infinite linear;}@keyframes c62-t02{0%,26%{transform:translate(0px,0px) scale(1);opacity:0}27%{transform:translate(0px,0px) scale(1);opacity:1}32%{transform:translate(0px,-44px) scale(1);opacity:1}33%{transform:translate(0px,-44px) scale(1);opacity:0}100%{transform:translate(0px,-44px) scale(1);opacity:0}}
.mp svg .c62-t03{animation:c62-t03 14s infinite linear;}@keyframes c62-t03{0%,26%{transform:translate(0px,0px) scale(1);opacity:0}27%{transform:translate(0px,0px) scale(1);opacity:1}32%{transform:translate(0px,-44px) scale(1);opacity:1}33%{transform:translate(0px,-44px) scale(1);opacity:0}100%{transform:translate(0px,-44px) scale(1);opacity:0}}
.mp svg .c62-w1{animation:c62-w1 14s infinite ease-in-out;}@keyframes c62-w1{0%,42%{opacity:0}45%,50%{opacity:1}53%,100%{opacity:.25}}
.mp svg .c62-t10{animation:c62-t10 14s infinite linear;}@keyframes c62-t10{0%,38%{transform:translate(0px,0px) scale(1);opacity:0}39%{transform:translate(0px,0px) scale(1);opacity:1}44%{transform:translate(0px,-44px) scale(1);opacity:1}45%{transform:translate(0px,-44px) scale(1);opacity:0}100%{transform:translate(0px,-44px) scale(1);opacity:0}}
.mp svg .c62-t11{animation:c62-t11 14s infinite linear;}@keyframes c62-t11{0%,38%{transform:translate(0px,0px) scale(1);opacity:0}39%{transform:translate(0px,0px) scale(1);opacity:1}44%{transform:translate(0px,-44px) scale(1);opacity:1}45%{transform:translate(0px,-44px) scale(1);opacity:0}100%{transform:translate(0px,-44px) scale(1);opacity:0}}
.mp svg .c62-t12{animation:c62-t12 14s infinite linear;}@keyframes c62-t12{0%,38%{transform:translate(0px,0px) scale(1);opacity:0}39%{transform:translate(0px,0px) scale(1);opacity:1}44%{transform:translate(0px,-44px) scale(1);opacity:1}45%{transform:translate(0px,-44px) scale(1);opacity:0}100%{transform:translate(0px,-44px) scale(1);opacity:0}}
.mp svg .c62-t13{animation:c62-t13 14s infinite linear;}@keyframes c62-t13{0%,38%{transform:translate(0px,0px) scale(1);opacity:0}39%{transform:translate(0px,0px) scale(1);opacity:1}44%{transform:translate(0px,-44px) scale(1);opacity:1}45%{transform:translate(0px,-44px) scale(1);opacity:0}100%{transform:translate(0px,-44px) scale(1);opacity:0}}
.mp svg .c62-w2{animation:c62-w2 14s infinite ease-in-out;}@keyframes c62-w2{0%,54%{opacity:0}57%,62%{opacity:1}65%,100%{opacity:.25}}
.mp svg .c62-t20{animation:c62-t20 14s infinite linear;}@keyframes c62-t20{0%,50%{transform:translate(0px,0px) scale(1);opacity:0}51%{transform:translate(0px,0px) scale(1);opacity:1}56%{transform:translate(0px,-44px) scale(1);opacity:1}57%{transform:translate(0px,-44px) scale(1);opacity:0}100%{transform:translate(0px,-44px) scale(1);opacity:0}}
.mp svg .c62-t21{animation:c62-t21 14s infinite linear;}@keyframes c62-t21{0%,50%{transform:translate(0px,0px) scale(1);opacity:0}51%{transform:translate(0px,0px) scale(1);opacity:1}56%{transform:translate(0px,-44px) scale(1);opacity:1}57%{transform:translate(0px,-44px) scale(1);opacity:0}100%{transform:translate(0px,-44px) scale(1);opacity:0}}
.mp svg .c62-t22{animation:c62-t22 14s infinite linear;}@keyframes c62-t22{0%,50%{transform:translate(0px,0px) scale(1);opacity:0}51%{transform:translate(0px,0px) scale(1);opacity:1}56%{transform:translate(0px,-44px) scale(1);opacity:1}57%{transform:translate(0px,-44px) scale(1);opacity:0}100%{transform:translate(0px,-44px) scale(1);opacity:0}}
.mp svg .c62-t23{animation:c62-t23 14s infinite linear;}@keyframes c62-t23{0%,50%{transform:translate(0px,0px) scale(1);opacity:0}51%{transform:translate(0px,0px) scale(1);opacity:1}56%{transform:translate(0px,-44px) scale(1);opacity:1}57%{transform:translate(0px,-44px) scale(1);opacity:0}100%{transform:translate(0px,-44px) scale(1);opacity:0}}
.mp svg .c62-out{animation:c62-out 14s infinite ease-in-out;}@keyframes c62-out{0%,68%{opacity:0;transform:scale(.3)}71%{opacity:1;transform:scale(1.18)}73%,100%{opacity:1;transform:scale(1)}}
.mp svg .c62-note{animation:c62-note 14s infinite ease-in-out;}@keyframes c62-note{0%,72%{opacity:0}75%,100%{opacity:1}}
.mp svg .c63-a0{animation:c63-a0 14s infinite ease-in-out;}@keyframes c63-a0{0%,34%{opacity:0}40%,100%{opacity:1}}
.mp svg .c63-b0{animation:c63-b0 14s infinite ease-out;transform-origin:left center}@keyframes c63-b0{0%,52%{transform:scaleX(0)}62%,100%{transform:scaleX(1)}}
.mp svg .c63-a1{animation:c63-a1 14s infinite ease-in-out;}@keyframes c63-a1{0%,37%{opacity:0}43%,100%{opacity:1}}
.mp svg .c63-b1{animation:c63-b1 14s infinite ease-out;transform-origin:left center}@keyframes c63-b1{0%,52%{transform:scaleX(0)}62%,100%{transform:scaleX(1)}}
.mp svg .c63-a2{animation:c63-a2 14s infinite ease-in-out;}@keyframes c63-a2{0%,40%{opacity:0}46%,100%{opacity:1}}
.mp svg .c63-b2{animation:c63-b2 14s infinite ease-out;transform-origin:left center}@keyframes c63-b2{0%,52%{transform:scaleX(0)}62%,100%{transform:scaleX(1)}}
.mp svg .c63-a4{animation:c63-a4 14s infinite ease-in-out;}@keyframes c63-a4{0%,46%{opacity:0}52%,100%{opacity:1}}
.mp svg .c63-b4{animation:c63-b4 14s infinite ease-out;transform-origin:left center}@keyframes c63-b4{0%,52%{transform:scaleX(0)}62%,100%{transform:scaleX(1)}}
.mp svg .c63-w{animation:c63-w 14s infinite ease-in-out;}@keyframes c63-w{0%,64%{opacity:0}67%,100%{opacity:1}}
.mp svg .c63-me{animation:c63m 2.8s ease-in-out infinite}@keyframes c63m{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.mp svg .c64-e0{animation:c64-e0 14s infinite ease-in-out;}@keyframes c64-e0{0%,28%{stroke-width:3}40%{stroke-width:8}56%,100%{stroke-width:2}}
.mp svg .c64-e1{animation:c64-e1 14s infinite ease-in-out;}@keyframes c64-e1{0%,28%{stroke-width:3}45%{stroke-width:1.5}59%,100%{stroke-width:7}}
.mp svg .c64-e2{animation:c64-e2 14s infinite ease-in-out;}@keyframes c64-e2{0%,28%{stroke-width:3}50%{stroke-width:6}62%,100%{stroke-width:3}}
.mp svg .c64-e3{animation:c64-e3 14s infinite ease-in-out;}@keyframes c64-e3{0%,28%{stroke-width:3}55%{stroke-width:2}65%,100%{stroke-width:5}}
.mp svg .c64-n1{animation:c64-n1 14s infinite ease-in-out;}@keyframes c64-n1{0%,32%{opacity:0}36%,100%{opacity:1}}
.mp svg .c64-n2{animation:c64-n2 14s infinite ease-in-out;}@keyframes c64-n2{0%,40%{opacity:0}44%,100%{opacity:1}}
.mp svg .c65-p0{animation:c65-p0 14s infinite ease-in-out;}@keyframes c65-p0{0%,26%{transform:translate(0px,0px) scale(1);opacity:0}27%{transform:translate(0px,0px) scale(1);opacity:1}32%{transform:translate(100px,12px) scale(0.6);opacity:1}33%{transform:translate(100px,12px) scale(1);opacity:0}100%{transform:translate(100px,12px) scale(1);opacity:0}}
.mp svg .c65-p1{animation:c65-p1 14s infinite ease-in-out;}@keyframes c65-p1{0%,32%{transform:translate(0px,0px) scale(1);opacity:0}33%{transform:translate(0px,0px) scale(1);opacity:1}38%{transform:translate(100px,12px) scale(0.6);opacity:1}39%{transform:translate(100px,12px) scale(1);opacity:0}100%{transform:translate(100px,12px) scale(1);opacity:0}}
.mp svg .c65-p2{animation:c65-p2 14s infinite ease-in-out;}@keyframes c65-p2{0%,38%{transform:translate(0px,0px) scale(1);opacity:0}39%{transform:translate(0px,0px) scale(1);opacity:1}44%{transform:translate(100px,12px) scale(0.6);opacity:1}45%{transform:translate(100px,12px) scale(1);opacity:0}100%{transform:translate(100px,12px) scale(1);opacity:0}}
.mp svg .c65-lvl{animation:c65-lvl 14s infinite ease-out;transform-origin:center bottom}@keyframes c65-lvl{0%,28%{transform:scaleY(0)}50%,100%{transform:scaleY(1)}}
.mp svg .c65-lab{animation:c65-lab 14s infinite ease-in-out;}@keyframes c65-lab{0%,50%{opacity:0}53%,100%{opacity:1}}
.mp svg .c65-stage{animation:c65-stage 14s infinite ease-in-out;}@keyframes c65-stage{0%,30%{opacity:0}33%,100%{opacity:1}}
.mp svg .c65-f{animation:c65-f 14s infinite ease-in-out;}@keyframes c65-f{0%,56%{opacity:0}60%,100%{opacity:1}}
.mp svg .c65-t1{animation:c65-t1 14s infinite ease-in-out;}@keyframes c65-t1{0%,62%{opacity:0;transform:scale(.3)}65%{opacity:1;transform:scale(1.18)}67%,100%{opacity:1;transform:scale(1)}}
.mp svg .c65-t2{animation:c65-t2 14s infinite ease-in-out;}@keyframes c65-t2{0%,66%{opacity:0;transform:scale(.3)}69%{opacity:1;transform:scale(1.18)}71%,100%{opacity:1;transform:scale(1)}}
.mp svg .c65-t3{animation:c65-t3 14s infinite ease-in-out;}@keyframes c65-t3{0%,70%{opacity:0;transform:scale(.3)}73%{opacity:1;transform:scale(1.18)}75%,100%{opacity:1;transform:scale(1)}}
.mp svg .c65-ft{animation:c65-ft 14s infinite ease-in-out;}@keyframes c65-ft{0%,74%{opacity:0}77%,100%{opacity:1}}

/* chapter 7 — AI training & operations concept motion */
.mp svg .c67-a{animation:c67-a 14s infinite ease-in-out;}@keyframes c67-a{0%,24%{transform:translate(0px,0px) scale(1);opacity:0}26%{transform:translate(0px,0px) scale(1);opacity:1}32%{transform:translate(58px,0px) scale(1);opacity:1}38%{transform:translate(116px,0px) scale(1);opacity:1}44%{transform:translate(116px,58px) scale(1);opacity:1}48%{transform:translate(116px,58px) scale(1);opacity:1}50%{transform:translate(0px,0px) scale(1);opacity:0}52%{transform:translate(0px,0px) scale(1);opacity:1}57%{transform:translate(0px,58px) scale(1);opacity:1}62%{transform:translate(0px,116px) scale(1);opacity:1}67%{transform:translate(58px,116px) scale(1);opacity:1}72%{transform:translate(116px,116px) scale(1);opacity:1}77%{transform:translate(174px,116px) scale(1);opacity:1}100%{transform:translate(174px,116px) scale(1);opacity:1}}
.mp svg .c67-m{animation:c67-m 14s infinite ease-in-out;}@keyframes c67-m{0%,44%{opacity:0}46%,50%{opacity:1}53%,100%{opacity:0}}
.mp svg .c67-s1{animation:c67-s1 14s infinite ease-in-out;}@keyframes c67-s1{0%,44%{opacity:0}46%,74%{opacity:1}77%,100%{opacity:0}}
.mp svg .c67-p{animation:c67-p 14s infinite ease-in-out;}@keyframes c67-p{0%,77%{opacity:0;transform:scale(.3)}80%{opacity:1;transform:scale(1.18)}82%,100%{opacity:1;transform:scale(1)}}
.mp svg .c67-s2{animation:c67-s2 14s infinite ease-in-out;}@keyframes c67-s2{0%,78%{opacity:0;transform:scale(.3)}81%{opacity:1;transform:scale(1.18)}83%,100%{opacity:1;transform:scale(1)}}
.mp svg .c67-path{animation:c67-path 14s infinite ease-in-out;}@keyframes c67-path{0%,82%{opacity:0}85%,100%{opacity:1}}
.mp svg .c67-note{animation:c67-note 14s infinite ease-in-out;}@keyframes c67-note{0%,82%{opacity:0}85%,100%{opacity:1}}
.mp svg .c68-pick{animation:c68-pick 14s infinite ease-in-out;}@keyframes c68-pick{0%,32%{opacity:0;transform:scale(.3)}35%{opacity:1;transform:scale(1.18)}37%,100%{opacity:1;transform:scale(1)}}
.mp svg .c68-pref{animation:c68-pref 14s infinite ease-in-out;}@keyframes c68-pref{0%,38%{transform:translate(0px,-20px) scale(1);opacity:0}40%{transform:translate(0px,0px) scale(1);opacity:1}48%{transform:translate(30px,60px) scale(0.6);opacity:1}50%{transform:translate(30px,60px) scale(0.6);opacity:0}100%{transform:translate(30px,60px) scale(1);opacity:0}}
.mp svg .c68-score{animation:c68-score 14s infinite ease-in-out;}@keyframes c68-score{0%,52%{transform:translate(110px,0px) scale(1);opacity:0}54%{transform:translate(110px,0px) scale(1);opacity:1}62%{transform:translate(0px,0px) scale(1);opacity:1}68%{transform:translate(-70px,-40px) scale(0.5);opacity:1}70%{transform:translate(-70px,-40px) scale(0.5);opacity:0}100%{transform:translate(-70px,-40px) scale(1);opacity:0}}
.mp svg .c68-knob{animation:c68-knob 14s infinite ease-in-out;}@keyframes c68-knob{0%,68%{transform:rotate(0)}78%,100%{transform:rotate(70deg)}}
.mp svg .c68-note{animation:c68-note 14s infinite ease-in-out;}@keyframes c68-note{0%,72%{opacity:0}75%,100%{opacity:1}}
.mp svg .c70-fly{animation:c70-fly 14s infinite ease-in-out;}@keyframes c70-fly{0%,34%{transform:translate(0px,0px) scale(1);opacity:0}36%{transform:translate(0px,0px) scale(1);opacity:1}48%{transform:translate(110px,30px) scale(0.6);opacity:1}50%{transform:translate(110px,30px) scale(0.6);opacity:0}100%{transform:translate(110px,30px) scale(1);opacity:0}}
.mp svg .c70-s0{animation:c70-s0 14s infinite ease-out;transform-origin:center bottom}@keyframes c70-s0{0%,48%{transform:scaleY(0)}58%,100%{transform:scaleY(0.89)}}
.mp svg .c70-s1{animation:c70-s1 14s infinite ease-out;transform-origin:center bottom}@keyframes c70-s1{0%,48%{transform:scaleY(0)}61%,100%{transform:scaleY(1.17)}}
.mp svg .c70-s2{animation:c70-s2 14s infinite ease-out;transform-origin:center bottom}@keyframes c70-s2{0%,48%{transform:scaleY(0)}64%,100%{transform:scaleY(1.50)}}
.mp svg .c70-cost{animation:c70-cost 14s infinite ease-in-out;}@keyframes c70-cost{0%,66%{opacity:0}69%,100%{opacity:1}}
.mp svg .c70-note{animation:c70-note 14s infinite ease-in-out;}@keyframes c70-note{0%,70%{opacity:0}73%,100%{opacity:1}}
.mp svg .c71-r8{animation:c71-r8 14s infinite ease-in-out;}@keyframes c71-r8{0%,34%{opacity:0}37%,100%{opacity:1}}
.mp svg .c71-sq{animation:c71-sq 14s infinite ease-in-out;}@keyframes c71-sq{0%,32%{opacity:0}35%,100%{opacity:1}}
.mp svg .c71-r4{animation:c71-r4 14s infinite ease-in-out;}@keyframes c71-r4{0%,52%{opacity:0}55%,100%{opacity:1}}
.mp svg .c71-mem{animation:c71-mem 14s infinite ease-in-out;transform-origin:center bottom}@keyframes c71-mem{0%,34%{transform:scaleY(1)}44%{transform:scaleY(.25)}52%{transform:scaleY(.25)}62%,100%{transform:scaleY(.13)}}
.mp svg .c71-acc{animation:c71-acc 14s infinite ease-in-out;}@keyframes c71-acc{0%,64%{opacity:0}67%,100%{opacity:1}}
.mp svg .c72-c0{animation:c72-c0 14s infinite linear;}@keyframes c72-c0{0%{opacity:0}30%{opacity:0}32%{opacity:1}35%{opacity:0}54%{opacity:0}56%{opacity:1}59%,100%{opacity:0}}
.mp svg .c72-c1{animation:c72-c1 14s infinite linear;}@keyframes c72-c1{0%{opacity:0}36%{opacity:0}38%{opacity:1}41%{opacity:0}60%{opacity:0}62%{opacity:1}65%,100%{opacity:0}}
.mp svg .c72-c2{animation:c72-c2 14s infinite linear;}@keyframes c72-c2{0%{opacity:0}42%{opacity:0}44%{opacity:1}47%{opacity:0}66%{opacity:0}68%{opacity:1}71%,100%{opacity:0}}
.mp svg .c72-c3{animation:c72-c3 14s infinite linear;}@keyframes c72-c3{0%{opacity:0}48%{opacity:0}50%{opacity:1}53%{opacity:0}72%{opacity:0}74%{opacity:1}77%,100%{opacity:0}}
.mp svg .c72-g{animation:c72-g 14s infinite linear;}@keyframes c72-g{0%,30%{opacity:0}32%,38%{opacity:1}40%,46%{opacity:0}48%,54%{opacity:1}56%,62%{opacity:0}64%,70%{opacity:1}72%,100%{opacity:0}}
.mp svg .c72-pc{animation:c72-pc 14s infinite linear;transform-origin:left center}@keyframes c72-pc{0%,30%{transform:scaleX(0)}84%,100%{transform:scaleX(.55)}}
.mp svg .c72-pg{animation:c72-pg 14s infinite linear;transform-origin:left center}@keyframes c72-pg{0%,30%{transform:scaleX(0)}46%,100%{transform:scaleX(1)}}
.mp svg .c72-done{animation:c72-done 14s infinite ease-in-out;}@keyframes c72-done{0%,47%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.18)}52%,100%{opacity:1;transform:scale(1)}}
.mp svg .c73-orb{animation:c73o 7s linear infinite;transform-origin:130px 128px;transform-box:view-box}@keyframes c73o{to{transform:rotate(360deg)}}
.mp svg .c73-ln{animation:c73-ln 14s infinite linear;}@keyframes c73-ln{0%,26%{stroke-dasharray:1;stroke-dashoffset:1}52%,100%{stroke-dasharray:1;stroke-dashoffset:0}}
.mp svg .c73-alert{animation:c73-alert 14s infinite ease-in-out;}@keyframes c73-alert{0%,52%{opacity:0;transform:scale(.3)}55%{opacity:1;transform:scale(1.18)}57%,100%{opacity:1;transform:scale(1)}}
.mp svg .c73-v1{animation:c73-v1 14s infinite ease-in-out;}@keyframes c73-v1{0%,26%{opacity:0}30%,58%{opacity:1}62%,100%{opacity:0}}
.mp svg .c73-v2{animation:c73-v2 14s infinite ease-in-out;}@keyframes c73-v2{0%,62%{opacity:0;transform:scale(.3)}65%{opacity:1;transform:scale(1.18)}67%,100%{opacity:1;transform:scale(1)}}
.mp svg .c73-rt{animation:c73-rt 14s infinite ease-in-out;}@keyframes c73-rt{0%,60%{opacity:0;transform:scale(.3)}63%{opacity:1;transform:scale(1.18)}65%,100%{opacity:1;transform:scale(1)}}
.mp svg .c77-res{animation:c77-res 14s infinite ease-in-out;}@keyframes c77-res{0%,44%{opacity:0}47%,100%{opacity:1}}
.mp svg .c77-fast{animation:c77-fast 14s infinite ease-in-out;}@keyframes c77-fast{0%,48%{opacity:0}51%,100%{opacity:1}}
.mp svg .c77-no{animation:c77-no 14s infinite ease-in-out;}@keyframes c77-no{0%,54%{opacity:0}57%,100%{opacity:1}}
.mp svg .c77-priv{animation:c77-priv 14s infinite ease-in-out;}@keyframes c77-priv{0%,58%{opacity:0}61%,100%{opacity:1}}
.mp svg .c77-bat{animation:c77-bat 14s infinite linear;transform-origin:left center}@keyframes c77-bat{0%,36%{transform:scaleX(1)}70%,100%{transform:scaleX(.55)}}
.mp svg .c77-opt{animation:c77-opt 14s infinite ease-in-out;}@keyframes c77-opt{0%,72%{opacity:0}75%,100%{opacity:1}}
.mp svg .c77-scan{animation:c77-scan 14s infinite linear;}@keyframes c77-scan{0%,28%{opacity:0;transform:translateY(0)}30%{opacity:1;transform:translateY(0)}42%{opacity:1;transform:translateY(36px)}44%,100%{opacity:0;transform:translateY(36px)}}

/* chapter 8 — security & trust concept motion */
.mp svg .c59-k1{animation:c59-k1 14s infinite ease-in-out;}@keyframes c59-k1{0%,26%{transform:translate(0px,0px) scale(1);opacity:0}28%{transform:translate(0px,0px) scale(1);opacity:1}36%{transform:translate(90px,36px) scale(1);opacity:1}40%{transform:translate(90px,36px) scale(1);opacity:0}100%{transform:translate(90px,36px) scale(1);opacity:0}}
.mp svg .c59-lock{animation:c59-lock 14s infinite ease-in-out;}@keyframes c59-lock{0%,36%{opacity:0;transform:scale(.4)}40%,46%{opacity:1;transform:scale(1)}50%,100%{opacity:0;transform:scale(.4)}}
.mp svg .c59-spy{animation:c59-spy 14s infinite ease-in-out;}@keyframes c59-spy{0%,50%{opacity:0}53%,100%{opacity:1}}
.mp svg .c59-spyl{animation:c59-spyl 14s infinite ease-in-out;}@keyframes c59-spyl{0%,54%{opacity:0}57%,100%{opacity:1}}
.mp svg .c59-k2{animation:c59-k2 14s infinite ease-in-out;}@keyframes c59-k2{0%,60%{opacity:0}63%,100%{opacity:1}}
.mp svg .c59-out{animation:c59-out 14s infinite ease-in-out;}@keyframes c59-out{0%,66%{opacity:0;transform:scale(.3)}69%{opacity:1;transform:scale(1.18)}71%,100%{opacity:1;transform:scale(1)}}
.mp svg .c59-ol{animation:c59-ol 14s infinite ease-in-out;}@keyframes c59-ol{0%,68%{opacity:0}71%,100%{opacity:1}}
.mp svg .c59-note{animation:c59-note 14s infinite ease-in-out;}@keyframes c59-note{0%,74%{opacity:0}77%,100%{opacity:1}}
.mp svg .c74-mag{animation:c74-mag 14s infinite ease-in-out;}@keyframes c74-mag{0%,26%{transform:translate(0px,0px) scale(1);opacity:0}28%{transform:translate(0px,0px) scale(1);opacity:1}34%{transform:translate(-40px,30px) scale(1);opacity:1}40%{transform:translate(-100px,40px) scale(1);opacity:1}46%{transform:translate(-100px,40px) scale(1);opacity:0}100%{transform:translate(-100px,40px) scale(1);opacity:0}}
.mp svg .c74-rev{animation:c74-rev 14s infinite ease-in-out;}@keyframes c74-rev{0%,36%{opacity:0}40%,100%{opacity:1}}
.mp svg .c74-strike{animation:c74-strike 14s infinite ease-in-out;}@keyframes c74-strike{0%,52%{opacity:0}55%,100%{opacity:1}}
.mp svg .c74-atk{animation:c74-atk 14s infinite ease-in-out;}@keyframes c74-atk{0%,56%{opacity:0}59%,100%{opacity:1}}
.mp svg .c74-env{animation:c74-env 14s infinite ease-in-out;}@keyframes c74-env{0%,58%{transform:translate(0px,0px) scale(1);opacity:0}60%{transform:translate(0px,0px) scale(1);opacity:1}72%{transform:translate(80px,-100px) scale(0.6);opacity:1}74%{transform:translate(80px,-100px) scale(0.6);opacity:0}100%{transform:translate(80px,-100px) scale(1);opacity:0}}
.mp svg .c74-note{animation:c74-note 14s infinite ease-in-out;}@keyframes c74-note{0%,74%{opacity:0}77%,100%{opacity:1}}
.mp svg .c75-in0{animation:c75-in0 14s infinite ease-in-out;}@keyframes c75-in0{0%,26%{transform:translate(0px,0px) scale(1);opacity:0}28%{transform:translate(0px,0px) scale(1);opacity:1}32%{transform:translate(70px,0px) scale(1);opacity:1}35%{transform:translate(150px,0px) scale(0.5);opacity:1}36%{transform:translate(150px,0px) scale(0.5);opacity:0}100%{transform:translate(150px,0px) scale(1);opacity:0}}
.mp svg .c75-in1{animation:c75-in1 14s infinite ease-in-out;}@keyframes c75-in1{0%,36%{transform:translate(0px,0px) scale(1);opacity:0}38%{transform:translate(0px,0px) scale(1);opacity:1}42%{transform:translate(14px,0px) scale(1);opacity:1}44%{transform:translate(0px,0px) scale(1);opacity:1}50%{transform:translate(0px,10px) scale(1);opacity:0}100%{transform:translate(0px,10px) scale(1);opacity:0}}
.mp svg .c75-bx{opacity:0;animation:c75-bx 14s infinite}@keyframes c75-bx{0%{opacity:0}42%{opacity:0}43.5%{opacity:1}48.5%{opacity:1}50%{opacity:0}100%{opacity:0}}
.mp svg .c75-pii{animation:c75-pii 14s infinite ease-in-out;}@keyframes c75-pii{0%,52%{transform:translate(0px,0px) scale(1);opacity:0}54%{transform:translate(0px,0px) scale(1);opacity:1}60%{transform:translate(68px,0px) scale(1);opacity:1}62%{transform:translate(68px,0px) scale(1);opacity:0}100%{transform:translate(68px,0px) scale(1);opacity:0}}
.mp svg .c75-out{animation:c75-out 14s infinite ease-in-out;}@keyframes c75-out{0%,62%{opacity:0}65%,100%{opacity:1}}
.mp svg .c75-t1{animation:c75-t1 14s infinite ease-in-out;}@keyframes c75-t1{0%,68%{opacity:0;transform:scale(.3)}71%{opacity:1;transform:scale(1.18)}73%,100%{opacity:1;transform:scale(1)}}
.mp svg .c75-t2{animation:c75-t2 14s infinite ease-in-out;}@keyframes c75-t2{0%,70%{opacity:0;transform:scale(.3)}73%{opacity:1;transform:scale(1.18)}75%,100%{opacity:1;transform:scale(1)}}
.mp svg .c75-t3{animation:c75-t3 14s infinite ease-in-out;}@keyframes c75-t3{0%,72%{opacity:0;transform:scale(.3)}75%{opacity:1;transform:scale(1.18)}77%,100%{opacity:1;transform:scale(1)}}
.mp svg .c75-note{animation:c75-note 14s infinite ease-in-out;}@keyframes c75-note{0%,76%{opacity:0}79%,100%{opacity:1}}

/* chapter 9 — computer concept motion */
.mp svg .c82-pred{animation:c82-pred 14s infinite ease-in-out;}@keyframes c82-pred{0%,30%{opacity:0}33%,100%{opacity:1}}
.mp svg .c82-predl{animation:c82-predl 14s infinite ease-in-out;}@keyframes c82-predl{0%,30%{opacity:0}33%,100%{opacity:1}}
.mp svg .c82-t1{animation:c82-t1 14s infinite ease-in-out;}@keyframes c82-t1{0%,36%{transform:translateX(0)}46%,100%{transform:translateX(40px)}}
.mp svg .c82-t2{animation:c82-t2 14s infinite ease-in-out;}@keyframes c82-t2{0%,36%{transform:translateX(0)}46%,100%{transform:translateX(-40px)}}
.mp svg .c82-ool{animation:c82-ool 14s infinite ease-in-out;}@keyframes c82-ool{0%,46%{opacity:0}49%,100%{opacity:1}}
.mp svg .c82-x0{animation:c82-x0 14s infinite linear;}@keyframes c82-x0{0%,28%{opacity:0}30%,36%{opacity:1}39%,43%{opacity:.15}46%,52%{opacity:1}55%,59%{opacity:.15}62%,70%{opacity:1}74%,100%{opacity:.15}}
.mp svg .c82-x1{animation:c82-x1 14s infinite linear;}@keyframes c82-x1{0%,28%{opacity:0}33%,39%{opacity:1}42%,46%{opacity:.15}49%,55%{opacity:1}58%,62%{opacity:.15}65%,73%{opacity:1}77%,100%{opacity:.15}}
.mp svg .c82-cnt{animation:c82-cnt 14s infinite linear;transform-origin:left center}@keyframes c82-cnt{0%,30%{transform:scaleX(0)}74%,100%{transform:scaleX(1)}}

/* on-premise (contrast to cloud) concept motion */
.mp svg .c83-tag{animation:c83-tag 14s infinite ease-in-out;}@keyframes c83-tag{0%,26%{opacity:0}29%,100%{opacity:1}}
.mp svg .c83-box{animation:c83-box 14s infinite ease-in-out;}@keyframes c83-box{0%,26%{transform:translate(0px,0px) scale(1);opacity:0}28%{transform:translate(0px,0px) scale(1);opacity:1}34%{transform:translate(0px,0px) scale(1);opacity:1}44%{transform:translate(-262px,104px) scale(0.7);opacity:1}46%{transform:translate(-262px,104px) scale(0.7);opacity:0}100%{transform:translate(-262px,104px) scale(1);opacity:0}}
.mp svg .c83-wr{animation:c83-wr 14s infinite ease-in-out;transform-origin:left top}@keyframes c83-wr{0%,46%{transform:rotate(0)}49%{transform:rotate(-25deg)}52%{transform:rotate(10deg)}55%{transform:rotate(-25deg)}58%,100%{transform:rotate(0)}}
.mp svg .c83-cal{animation:c83-cal 14s infinite ease-in-out;}@keyframes c83-cal{0%,56%{opacity:0}59%,100%{opacity:1}}
.mp svg .c83-w1{animation:c83-w1 14s infinite ease-in-out;}@keyframes c83-w1{0%,59%{opacity:0}61%,64%{opacity:1}65%,100%{opacity:0}}
.mp svg .c83-w2{animation:c83-w2 14s infinite ease-in-out;}@keyframes c83-w2{0%,64%{opacity:0}66%,69%{opacity:1}70%,100%{opacity:0}}
.mp svg .c83-w3{animation:c83-w3 14s infinite ease-in-out;}@keyframes c83-w3{0%,69%{opacity:0}71%,100%{opacity:1}}
.mp svg .c83-more{animation:c83-more 14s infinite ease-in-out;}@keyframes c83-more{0%,60%{opacity:0}63%,100%{opacity:1}}
.mp svg .c83-new{animation:c83-new 14s infinite ease-in-out;}@keyframes c83-new{0%,74%{opacity:0;transform:scale(.4)}78%,100%{opacity:1;transform:scale(1)}}

/* HTTP request/response redraw, responsive website, OAuth concept motion */
.mp svg .c11-l1{animation:c11-l1 14s infinite ease-in-out;}@keyframes c11-l1{0%,26%{opacity:0}29%,100%{opacity:1}}
.mp svg .c11-req{animation:c11-req 14s infinite ease-in-out;}@keyframes c11-req{0%,28%{transform:translate(0px,0px) scale(1);opacity:0}30%{transform:translate(0px,0px) scale(1);opacity:1}40%{transform:translate(60px,0px) scale(1);opacity:1}42%{transform:translate(60px,0px) scale(1);opacity:0}100%{transform:translate(60px,0px) scale(1);opacity:0}}
.mp svg .c11-led{opacity:0;animation:c11-led 14s infinite}@keyframes c11-led{0%{opacity:0}42%{opacity:0}43.5%{opacity:1}48.5%{opacity:1}50%{opacity:0}100%{opacity:0}}
.mp svg .c11-l2{animation:c11-l2 14s infinite ease-in-out;}@keyframes c11-l2{0%,50%{opacity:0}53%,100%{opacity:1}}
.mp svg .c11-res{animation:c11-res 14s infinite ease-in-out;}@keyframes c11-res{0%,50%{transform:translate(0px,0px) scale(1);opacity:0}52%{transform:translate(0px,0px) scale(1);opacity:1}62%{transform:translate(-58px,0px) scale(1);opacity:1}64%{transform:translate(-58px,0px) scale(1);opacity:0}100%{transform:translate(-58px,0px) scale(1);opacity:0}}
.mp svg .c11-page{animation:c11-page 14s infinite ease-in-out;}@keyframes c11-page{0%,64%{opacity:0}67%,100%{opacity:1}}
.mp svg .c11-s{animation:c11-s 14s infinite ease-in-out;}@keyframes c11-s{0%,74%{opacity:0}77%,100%{opacity:1}}
.mp svg .c85-d{animation:c85-d 14s infinite ease-in-out;}@keyframes c85-d{0%,22%{opacity:0;transform:scale(.9)}26%,42%{opacity:1;transform:scale(1)}46%,100%{opacity:0;transform:scale(.6,.9)}}
.mp svg .c85-t{animation:c85-t 14s infinite ease-in-out;}@keyframes c85-t{0%,44%{opacity:0;transform:scale(1.3,1)}48%,62%{opacity:1;transform:scale(1)}66%,100%{opacity:0;transform:scale(.6,1)}}
.mp svg .c85-p{animation:c85-p 14s infinite ease-in-out;}@keyframes c85-p{0%,64%{opacity:0;transform:scale(1.6,1)}68%,100%{opacity:1;transform:scale(1)}}
.mp svg .c85-l1{animation:c85-l1 14s infinite ease-in-out;}@keyframes c85-l1{0%,24%{opacity:0}26%,42%{opacity:1}46%,100%{opacity:0}}
.mp svg .c85-l2{animation:c85-l2 14s infinite ease-in-out;}@keyframes c85-l2{0%,46%{opacity:0}48%,62%{opacity:1}66%,100%{opacity:0}}
.mp svg .c85-l3{animation:c85-l3 14s infinite ease-in-out;}@keyframes c85-l3{0%,66%{opacity:0}68%,100%{opacity:1}}
.mp svg .c85-menu{animation:c85-menu 14s infinite ease-in-out;}@keyframes c85-menu{0%,70%{opacity:0}73%,100%{opacity:1}}
.mp svg .c85-note{animation:c85-note 14s infinite ease-in-out;}@keyframes c85-note{0%,74%{opacity:0}77%,100%{opacity:1}}
.mp svg .c86-btn{animation:c86-btn 14s infinite ease-in-out;}@keyframes c86-btn{0%,24%{opacity:0}27%,100%{opacity:1}}
.mp svg .c86-arr{animation:c86-arr 14s infinite ease-in-out;}@keyframes c86-arr{0%,30%{opacity:0}33%,100%{opacity:1}}
.mp svg .c86-tap{animation:c86-tap 14s infinite ease-in-out;}@keyframes c86-tap{0%,40%{opacity:0;transform:scale(.3)}43%{opacity:1;transform:scale(1.18)}45%,100%{opacity:1;transform:scale(1)}}
.mp svg .c86-tap{animation:c86-tap 14s infinite ease-in-out;}@keyframes c86-tap{0%,38%{opacity:0;transform:scale(.3)}41%{opacity:1;transform:scale(1)}46%,100%{opacity:0;transform:scale(1.6)}}
.mp svg .c86-ok{animation:c86-ok 14s infinite ease-in-out;}@keyframes c86-ok{0%,41%{opacity:0}44%,100%{opacity:1}}
.mp svg .c86-tok{animation:c86-tok 14s infinite ease-in-out;}@keyframes c86-tok{0%,46%{transform:translate(0px,0px) scale(1);opacity:0}48%{transform:translate(0px,0px) scale(1);opacity:1}56%{transform:translate(-138px,0px) scale(1);opacity:1}60%{transform:translate(-138px,0px) scale(1);opacity:1}68%{transform:translate(150px,0px) scale(1);opacity:1}70%{transform:translate(150px,0px) scale(1);opacity:0}100%{transform:translate(150px,0px) scale(1);opacity:0}}
.mp svg .c86-data{animation:c86-data 14s infinite ease-in-out;}@keyframes c86-data{0%,70%{transform:translate(0px,0px) scale(1);opacity:0}72%{transform:translate(0px,0px) scale(1);opacity:1}80%{transform:translate(-282px,-78px) scale(1);opacity:1}82%{transform:translate(-282px,-78px) scale(1);opacity:0}100%{transform:translate(-282px,-78px) scale(1);opacity:0}}
.mp svg .c86-x{animation:c86-x 14s infinite ease-in-out;}@keyframes c86-x{0%,80%{opacity:0;transform:scale(.3)}83%{opacity:1;transform:scale(1.18)}85%,100%{opacity:1;transform:scale(1)}}
.mp svg .c86-note{animation:c86-note 14s infinite ease-in-out;}@keyframes c86-note{0%,82%{opacity:0}85%,100%{opacity:1}}

/* harness concept motion */
.mp svg .c84-goal{animation:c84-goal 14s infinite ease-in-out;}@keyframes c84-goal{0%,22%{transform:translate(0px,0px) scale(1);opacity:0}24%{transform:translate(0px,0px) scale(1);opacity:1}30%{transform:translate(0px,0px) scale(1);opacity:1}36%{transform:translate(160px,-8px) scale(0.5);opacity:1}38%{transform:translate(160px,-8px) scale(0.5);opacity:0}100%{transform:translate(160px,-8px) scale(1);opacity:0}}
.mp svg .c84-ctx{animation:c84-ctx 14s infinite ease-in-out;}@keyframes c84-ctx{0%,34%{transform:translate(0px,0px) scale(1);opacity:0}36%{transform:translate(0px,0px) scale(1);opacity:1}42%{transform:translate(60px,48px) scale(0.5);opacity:1}44%{transform:translate(60px,48px) scale(0.5);opacity:0}100%{transform:translate(60px,48px) scale(1);opacity:0}}
.mp svg .c84-req{animation:c84-req 14s infinite ease-in-out;}@keyframes c84-req{0%,44%{transform:translate(0px,0px) scale(1);opacity:0}46%{transform:translate(0px,0px) scale(1);opacity:1}52%{transform:translate(104px,26px) scale(0.7);opacity:1}54%{transform:translate(104px,26px) scale(0.7);opacity:0}100%{transform:translate(104px,26px) scale(1);opacity:0}}
.mp svg .c84-h1{opacity:0;animation:c84-h1 14s infinite}@keyframes c84-h1{0%{opacity:0}52%{opacity:0}53.5%{opacity:1}56.5%{opacity:1}58%{opacity:0}100%{opacity:0}}
.mp svg .c84-res{animation:c84-res 14s infinite ease-in-out;}@keyframes c84-res{0%,56%{transform:translate(0px,0px) scale(1);opacity:0}58%{transform:translate(0px,0px) scale(1);opacity:1}64%{transform:translate(-132px,0px) scale(1);opacity:1}66%{transform:translate(-132px,0px) scale(1);opacity:0}100%{transform:translate(-132px,0px) scale(1);opacity:0}}
.mp svg .c84-h2{opacity:0;animation:c84-h2 14s infinite}@keyframes c84-h2{0%{opacity:0}66%{opacity:0}67.5%{opacity:1}70.5%{opacity:1}72%{opacity:0}100%{opacity:0}}
.mp svg .c84-n1{animation:c84-n1 14s infinite ease-in-out;}@keyframes c84-n1{0%,36%{opacity:0}38%,52%{opacity:1}54%,100%{opacity:0}}
.mp svg .c84-n2{animation:c84-n2 14s infinite ease-in-out;}@keyframes c84-n2{0%,54%{opacity:0}56%,66%{opacity:1}68%,100%{opacity:0}}
.mp svg .c84-n3{animation:c84-n3 14s infinite ease-in-out;}@keyframes c84-n3{0%,68%{opacity:0}70%,100%{opacity:1}}
.mp svg .c84-done{animation:c84-done 14s infinite ease-in-out;}@keyframes c84-done{0%,76%{opacity:0;transform:scale(.3)}79%{opacity:1;transform:scale(1.18)}81%,100%{opacity:1;transform:scale(1)}}
.mp svg .c84-ring{animation:c84r 6s linear infinite;transform-origin:190px 128px;transform-box:view-box}@keyframes c84r{to{transform:rotate(360deg)}}

/* RAG redraw with embedding vectors */
.mp svg .c36-r0{animation:c36-r0 14s infinite ease-in-out;}@keyframes c36-r0{0%,28%{opacity:0}31%,100%{opacity:1}}
.mp svg .c36-s0{animation:c36-s0 14s infinite ease-in-out;}@keyframes c36-s0{0%,54%{opacity:0}57%,100%{opacity:1}}
.mp svg .c36-r1{animation:c36-r1 14s infinite ease-in-out;}@keyframes c36-r1{0%,32%{opacity:0}35%,100%{opacity:1}}
.mp svg .c36-s1{animation:c36-s1 14s infinite ease-in-out;}@keyframes c36-s1{0%,56%{opacity:0}59%,100%{opacity:1}}
.mp svg .c36-r2{animation:c36-r2 14s infinite ease-in-out;}@keyframes c36-r2{0%,36%{opacity:0}39%,100%{opacity:1}}
.mp svg .c36-s2{animation:c36-s2 14s infinite ease-in-out;}@keyframes c36-s2{0%,58%{opacity:0}61%,100%{opacity:1}}
.mp svg .c36-pre{animation:c36-pre 14s infinite ease-in-out;}@keyframes c36-pre{0%,26%{opacity:0}29%,100%{opacity:1}}
.mp svg .c36-qa{animation:c36-qa 14s infinite ease-in-out;}@keyframes c36-qa{0%,38%{opacity:0}41%,100%{opacity:1}}
.mp svg .c36-qv{animation:c36-qv 14s infinite ease-in-out;}@keyframes c36-qv{0%,40%{opacity:0}43%,100%{opacity:1}}
.mp svg .c36-fly{animation:c36-fly 14s infinite ease-in-out;}@keyframes c36-fly{0%,44%{transform:translate(0px,0px) scale(1);opacity:0}46%{transform:translate(0px,0px) scale(1);opacity:1}52%{transform:translate(168px,-24px) scale(0.6);opacity:1}54%{transform:translate(168px,-24px) scale(0.6);opacity:0}100%{transform:translate(168px,-24px) scale(1);opacity:0}}
.mp svg .c36-hl{animation:c36-hl 14s infinite ease-in-out;}@keyframes c36-hl{0%,54%{opacity:0}57%,100%{opacity:1}}
.mp svg .c36-chunk{animation:c36-chunk 14s infinite ease-in-out;}@keyframes c36-chunk{0%,60%{transform:translate(0px,0px) scale(1);opacity:0}62%{transform:translate(0px,0px) scale(1);opacity:1}70%{transform:translate(-6px,150px) scale(0.7);opacity:1}72%{transform:translate(-6px,150px) scale(0.7);opacity:0}100%{transform:translate(-6px,150px) scale(1);opacity:0}}
.mp svg .c36-q2{animation:c36-q2 14s infinite ease-in-out;}@keyframes c36-q2{0%,60%{transform:translate(0px,0px) scale(1);opacity:0}62%{transform:translate(0px,0px) scale(1);opacity:1}70%{transform:translate(150px,184px) scale(0.6);opacity:1}72%{transform:translate(150px,184px) scale(0.6);opacity:0}100%{transform:translate(150px,184px) scale(1);opacity:0}}
.mp svg .c36-ans{animation:c36-ans 14s infinite ease-in-out;}@keyframes c36-ans{0%,74%{opacity:0;transform:scale(.3)}77%{opacity:1;transform:scale(1.18)}79%,100%{opacity:1;transform:scale(1)}}
.mp svg .c36-note{animation:c36-note 14s infinite ease-in-out;}@keyframes c36-note{0%,76%{opacity:0}79%,100%{opacity:1}}

/* model parameters: one labelled weight changing as it learns */
.mp svg .c64-tag{animation:c64-tag 14s infinite ease-in-out;}@keyframes c64-tag{0%,26%{opacity:0}29%,100%{opacity:1}}
.mp svg .c64-hw{animation:c64-hw 14s infinite ease-in-out;}@keyframes c64-hw{0%,24%{opacity:0;stroke-width:3}28%,36%{opacity:1;stroke-width:3}44%,50%{opacity:1;stroke-width:5.5}58%,100%{opacity:1;stroke-width:8}}
.mp svg .c64-v1{animation:c64-v1 14s infinite ease-in-out;}@keyframes c64-v1{0%,26%{opacity:0}28%,38%{opacity:1}41%,100%{opacity:0}}
.mp svg .c64-v2{animation:c64-v2 14s infinite ease-in-out;}@keyframes c64-v2{0%,40%{opacity:0}43%,51%{opacity:1}54%,100%{opacity:0}}
.mp svg .c64-v3{animation:c64-v3 14s infinite ease-in-out;}@keyframes c64-v3{0%,53%{opacity:0}56%,100%{opacity:1}}

/* container redraw: image -> container on dev PC and on server */
.mp svg .c23-it0{animation:c23-it0 14s infinite ease-in-out;}@keyframes c23-it0{0%,24%{transform:translate(0px,0px) scale(1);opacity:0}26%{transform:translate(0px,0px) scale(1);opacity:1}30%{transform:translate(0px,0px) scale(1);opacity:1}34%{transform:translate(0px,76px) scale(0.5);opacity:1}35%{transform:translate(0px,76px) scale(0.5);opacity:0}100%{transform:translate(0px,76px) scale(1);opacity:0}}
.mp svg .c23-it1{animation:c23-it1 14s infinite ease-in-out;}@keyframes c23-it1{0%,27%{transform:translate(0px,0px) scale(1);opacity:0}29%{transform:translate(0px,0px) scale(1);opacity:1}33%{transform:translate(0px,0px) scale(1);opacity:1}37%{transform:translate(0px,76px) scale(0.5);opacity:1}38%{transform:translate(0px,76px) scale(0.5);opacity:0}100%{transform:translate(0px,76px) scale(1);opacity:0}}
.mp svg .c23-it2{animation:c23-it2 14s infinite ease-in-out;}@keyframes c23-it2{0%,30%{transform:translate(0px,0px) scale(1);opacity:0}32%{transform:translate(0px,0px) scale(1);opacity:1}36%{transform:translate(0px,0px) scale(1);opacity:1}40%{transform:translate(0px,76px) scale(0.5);opacity:1}41%{transform:translate(0px,76px) scale(0.5);opacity:0}100%{transform:translate(0px,76px) scale(1);opacity:0}}
.mp svg .c23-it3{animation:c23-it3 14s infinite ease-in-out;}@keyframes c23-it3{0%,33%{transform:translate(0px,0px) scale(1);opacity:0}35%{transform:translate(0px,0px) scale(1);opacity:1}39%{transform:translate(0px,0px) scale(1);opacity:1}43%{transform:translate(0px,76px) scale(0.5);opacity:1}44%{transform:translate(0px,76px) scale(0.5);opacity:0}100%{transform:translate(0px,76px) scale(1);opacity:0}}
.mp svg .c23-i1{animation:c23-i1 14s infinite ease-in-out;}@keyframes c23-i1{0%,40%{transform:translate(0px,0px) scale(1);opacity:0}42%{transform:translate(0px,0px) scale(0.6);opacity:1}50%{transform:translate(230px,-52px) scale(0.45);opacity:1}52%{transform:translate(230px,-52px) scale(0.45);opacity:0}100%{transform:translate(230px,-52px) scale(1);opacity:0}}
.mp svg .c23-ct1{animation:c23-ct1 14s infinite ease-in-out;}@keyframes c23-ct1{0%,52%{opacity:0;transform:scale(.3)}55%{opacity:1;transform:scale(1.18)}57%,100%{opacity:1;transform:scale(1)}}
.mp svg .c23-i2{animation:c23-i2 14s infinite ease-in-out;}@keyframes c23-i2{0%,58%{transform:translate(0px,0px) scale(1);opacity:0}60%{transform:translate(0px,0px) scale(0.6);opacity:1}68%{transform:translate(230px,74px) scale(0.45);opacity:1}70%{transform:translate(230px,74px) scale(0.45);opacity:0}100%{transform:translate(230px,74px) scale(1);opacity:0}}
.mp svg .c23-ct2{animation:c23-ct2 14s infinite ease-in-out;}@keyframes c23-ct2{0%,70%{opacity:0;transform:scale(.3)}73%{opacity:1;transform:scale(1.18)}75%,100%{opacity:1;transform:scale(1)}}
.mp svg .c23-n1{animation:c23-n1 14s infinite ease-in-out;}@keyframes c23-n1{0%,62%{opacity:0}65%,100%{opacity:1}}
.mp svg .c23-n2{animation:c23-n2 14s infinite ease-in-out;}@keyframes c23-n2{0%,74%{opacity:0}77%,100%{opacity:1}}

/* image/container/docker: docker builds the image and runs containers */
.mp svg .c23x-m0{animation:c23x-m0 14s infinite ease-in-out;}@keyframes c23x-m0{0%,24%{transform:translate(0px,0px) scale(1);opacity:0}26%{transform:translate(0px,0px) scale(1);opacity:1}30%{transform:translate(0px,0px) scale(1);opacity:1}35%{transform:translate(3.0px,116px) scale(0.4);opacity:1}36%{transform:translate(3.0px,116px) scale(0.4);opacity:0}100%{transform:translate(3.0px,116px) scale(1);opacity:0}}
.mp svg .c23x-m1{animation:c23x-m1 14s infinite ease-in-out;}@keyframes c23x-m1{0%,27%{transform:translate(0px,0px) scale(1);opacity:0}29%{transform:translate(0px,0px) scale(1);opacity:1}33%{transform:translate(0px,0px) scale(1);opacity:1}38%{transform:translate(-84.0px,116px) scale(0.4);opacity:1}39%{transform:translate(-84.0px,116px) scale(0.4);opacity:0}100%{transform:translate(-84.0px,116px) scale(1);opacity:0}}
.mp svg .c23x-m2{animation:c23x-m2 14s infinite ease-in-out;}@keyframes c23x-m2{0%,30%{transform:translate(0px,0px) scale(1);opacity:0}32%{transform:translate(0px,0px) scale(1);opacity:1}36%{transform:translate(0px,0px) scale(1);opacity:1}41%{transform:translate(3.0px,88px) scale(0.4);opacity:1}42%{transform:translate(3.0px,88px) scale(0.4);opacity:0}100%{transform:translate(3.0px,88px) scale(1);opacity:0}}
.mp svg .c23x-m3{animation:c23x-m3 14s infinite ease-in-out;}@keyframes c23x-m3{0%,33%{transform:translate(0px,0px) scale(1);opacity:0}35%{transform:translate(0px,0px) scale(1);opacity:1}39%{transform:translate(0px,0px) scale(1);opacity:1}44%{transform:translate(-84.0px,88px) scale(0.4);opacity:1}45%{transform:translate(-84.0px,88px) scale(0.4);opacity:0}100%{transform:translate(-84.0px,88px) scale(1);opacity:0}}
.mp svg .c23x-b{animation:c23x-b 14s infinite ease-in-out;}@keyframes c23x-b{0%,30%{opacity:0}33%,100%{opacity:1}}
.mp svg .c23x-img{animation:c23x-img 14s infinite ease-in-out;}@keyframes c23x-img{0%,44%{opacity:0;transform:scale(.3)}47%{opacity:1;transform:scale(1.18)}49%,100%{opacity:1;transform:scale(1)}}
.mp svg .c23x-imgl{animation:c23x-imgl 14s infinite ease-in-out;}@keyframes c23x-imgl{0%,44%{opacity:0}47%,100%{opacity:1}}
.mp svg .c23x-fly{animation:c23x-fly 14s infinite ease-in-out;}@keyframes c23x-fly{0%,48%{transform:translate(0px,0px) scale(1);opacity:0}50%{transform:translate(0px,0px) scale(1);opacity:1}58%{transform:translate(102px,-82px) scale(0.7);opacity:1}100%{transform:translate(102px,-82px) scale(0.7);opacity:1}}
.mp svg .c23x-same{animation:c23x-same 14s infinite ease-in-out;}@keyframes c23x-same{0%,58%{opacity:0}61%,100%{opacity:1}}
.mp svg .c23x-r{animation:c23x-r 14s infinite ease-in-out;}@keyframes c23x-r{0%,60%{opacity:0}63%,100%{opacity:1}}
.mp svg .c23x-cA{animation:c23x-cA 14s infinite ease-in-out;}@keyframes c23x-cA{0%,62%{opacity:0;transform:translate(-30px,-50px) scale(.5)}68%,100%{opacity:1;transform:translate(0,0) scale(1)}}
.mp svg .c23x-cB{animation:c23x-cB 14s infinite ease-in-out;}@keyframes c23x-cB{0%,68%{opacity:0;transform:translate(-80px,-50px) scale(.5)}74%,100%{opacity:1;transform:translate(0,0) scale(1)}}
.mp svg .c23x-cl{animation:c23x-cl 14s infinite ease-in-out;}@keyframes c23x-cl{0%,70%{opacity:0}73%,100%{opacity:1}}
.mp svg .c23x-note{animation:c23x-note 14s infinite ease-in-out;}@keyframes c23x-note{0%,78%{opacity:0}81%,100%{opacity:1}}

/* image/container/docker: docker as a harbour crane */
.mp svg .c23y-m0{animation:c23y-m0 14s infinite ease-in-out;}@keyframes c23y-m0{0%,24%{transform:translate(0px,-10px) scale(1);opacity:0}25%{transform:translate(0px,-10px) scale(1);opacity:1}26%{transform:translate(0px,0px) scale(1);opacity:1}28%{transform:translate(0px,50px) scale(0.7);opacity:1}29%{transform:translate(0px,52px) scale(0.6);opacity:0}100%{transform:translate(0px,52px) scale(1);opacity:0}}
.mp svg .c23y-m1{animation:c23y-m1 14s infinite ease-in-out;}@keyframes c23y-m1{0%,28%{transform:translate(0px,-10px) scale(1);opacity:0}29%{transform:translate(0px,-10px) scale(1);opacity:1}30%{transform:translate(0px,0px) scale(1);opacity:1}32%{transform:translate(0px,50px) scale(0.7);opacity:1}33%{transform:translate(0px,52px) scale(0.6);opacity:0}100%{transform:translate(0px,52px) scale(1);opacity:0}}
.mp svg .c23y-m2{animation:c23y-m2 14s infinite ease-in-out;}@keyframes c23y-m2{0%,32%{transform:translate(0px,-10px) scale(1);opacity:0}33%{transform:translate(0px,-10px) scale(1);opacity:1}34%{transform:translate(0px,0px) scale(1);opacity:1}36%{transform:translate(0px,50px) scale(0.7);opacity:1}37%{transform:translate(0px,52px) scale(0.6);opacity:0}100%{transform:translate(0px,52px) scale(1);opacity:0}}
.mp svg .c23y-m3{animation:c23y-m3 14s infinite ease-in-out;}@keyframes c23y-m3{0%,36%{transform:translate(0px,-10px) scale(1);opacity:0}37%{transform:translate(0px,-10px) scale(1);opacity:1}38%{transform:translate(0px,0px) scale(1);opacity:1}40%{transform:translate(0px,50px) scale(0.7);opacity:1}41%{transform:translate(0px,52px) scale(0.6);opacity:0}100%{transform:translate(0px,52px) scale(1);opacity:0}}
.mp svg .c23y-b{animation:c23y-b 14s infinite ease-in-out;}@keyframes c23y-b{0%,24%{opacity:0}27%,100%{opacity:1}}
.mp svg .c23y-img{animation:c23y-img 14s infinite ease-in-out;}@keyframes c23y-img{0%,42%{opacity:0;transform:scale(.3)}45%{opacity:1;transform:scale(1.18)}47%,100%{opacity:1;transform:scale(1)}}
.mp svg .c23y-imgl{animation:c23y-imgl 14s infinite ease-in-out;}@keyframes c23y-imgl{0%,42%{opacity:0}45%,100%{opacity:1}}
.mp svg .c23y-fly{animation:c23y-fly 14s infinite ease-in-out;}@keyframes c23y-fly{0%,46%{transform:translate(0px,0px) scale(1);opacity:0}48%{transform:translate(0px,0px) scale(1);opacity:1}56%{transform:translate(104px,-88px) scale(0.6);opacity:1}100%{transform:translate(104px,-88px) scale(0.6);opacity:1}}
.mp svg .c23y-same{animation:c23y-same 14s infinite ease-in-out;}@keyframes c23y-same{0%,56%{opacity:0}59%,100%{opacity:1}}
.mp svg .c23y-r{animation:c23y-r 14s infinite ease-in-out;}@keyframes c23y-r{0%,58%{opacity:0}61%,100%{opacity:1}}
.mp svg .c23y-hk{animation:c23y-hk 14s infinite ease-in-out;}@keyframes c23y-hk{0%,62%{transform:translate(0px,0px) scale(1);opacity:1}68%{transform:translate(0px,0px) scale(1);opacity:1}72%{transform:translate(52px,0px) scale(1);opacity:1}100%{transform:translate(52px,0px) scale(1);opacity:1}}
.mp svg .c23y-cA{animation:c23y-cA 14s infinite ease-in-out;}@keyframes c23y-cA{0%,58%{opacity:0;transform:translateY(-58px)}60%{opacity:1;transform:translateY(-58px)}66%,100%{opacity:1;transform:translateY(0)}}
.mp svg .c23y-cB{animation:c23y-cB 14s infinite ease-in-out;}@keyframes c23y-cB{0%,72%{opacity:0;transform:translateY(-58px)}74%{opacity:1;transform:translateY(-58px)}80%,100%{opacity:1;transform:translateY(0)}}
.mp svg .c23y-cl{animation:c23y-cl 14s infinite ease-in-out;}@keyframes c23y-cl{0%,80%{opacity:0}83%,100%{opacity:1}}
.mp svg .c23y-note{animation:c23y-note 14s infinite ease-in-out;}@keyframes c23y-note{0%,82%{opacity:0}85%,100%{opacity:1}}

/* image/container/docker: whales above the computers, build/run labels */
.mp svg .c23x-m0{animation:c23x-m0 14s infinite ease-in-out;}@keyframes c23x-m0{0%,24%{transform:translate(0px,0px) scale(1);opacity:0}26%{transform:translate(0px,0px) scale(1);opacity:1}30%{transform:translate(0px,0px) scale(1);opacity:1}35%{transform:translate(43.0px,-72px) scale(0.4);opacity:1}36%{transform:translate(43.0px,-72px) scale(0.4);opacity:0}100%{transform:translate(43.0px,-72px) scale(1);opacity:0}}
.mp svg .c23x-m1{animation:c23x-m1 14s infinite ease-in-out;}@keyframes c23x-m1{0%,27%{transform:translate(0px,0px) scale(1);opacity:0}29%{transform:translate(0px,0px) scale(1);opacity:1}33%{transform:translate(0px,0px) scale(1);opacity:1}38%{transform:translate(-44.0px,-72px) scale(0.4);opacity:1}39%{transform:translate(-44.0px,-72px) scale(0.4);opacity:0}100%{transform:translate(-44.0px,-72px) scale(1);opacity:0}}
.mp svg .c23x-m2{animation:c23x-m2 14s infinite ease-in-out;}@keyframes c23x-m2{0%,30%{transform:translate(0px,0px) scale(1);opacity:0}32%{transform:translate(0px,0px) scale(1);opacity:1}36%{transform:translate(0px,0px) scale(1);opacity:1}41%{transform:translate(43.0px,-100px) scale(0.4);opacity:1}42%{transform:translate(43.0px,-100px) scale(0.4);opacity:0}100%{transform:translate(43.0px,-100px) scale(1);opacity:0}}
.mp svg .c23x-m3{animation:c23x-m3 14s infinite ease-in-out;}@keyframes c23x-m3{0%,33%{transform:translate(0px,0px) scale(1);opacity:0}35%{transform:translate(0px,0px) scale(1);opacity:1}39%{transform:translate(0px,0px) scale(1);opacity:1}44%{transform:translate(-44.0px,-100px) scale(0.4);opacity:1}45%{transform:translate(-44.0px,-100px) scale(0.4);opacity:0}100%{transform:translate(-44.0px,-100px) scale(1);opacity:0}}
.mp svg .c23x-b{opacity:0;animation:c23x-b 14s infinite}@keyframes c23x-b{0%{opacity:0}32%{opacity:0}33.5%{opacity:1}40.5%{opacity:1}42%{opacity:0}100%{opacity:0}}
.mp svg .c23x-img{animation:c23x-img 14s infinite ease-in-out;}@keyframes c23x-img{0%,44%{opacity:0;transform:scale(.3)}47%{opacity:1;transform:scale(1.18)}49%,100%{opacity:1;transform:scale(1)}}
.mp svg .c23x-imgl{animation:c23x-imgl 14s infinite ease-in-out;}@keyframes c23x-imgl{0%,44%{opacity:0}47%,100%{opacity:1}}
.mp svg .c23x-fly{animation:c23x-fly 14s infinite ease-in-out;}@keyframes c23x-fly{0%,48%{transform:translate(0px,0px) scale(1);opacity:0}50%{transform:translate(0px,0px) scale(1);opacity:1}58%{transform:translate(150px,-50px) scale(0.75);opacity:1}100%{transform:translate(150px,-50px) scale(0.75);opacity:1}}
.mp svg .c23x-same{animation:c23x-same 14s infinite ease-in-out;}@keyframes c23x-same{0%,58%{opacity:0}61%,100%{opacity:1}}
.mp svg .c23x-r{opacity:0;animation:c23x-r 14s infinite}@keyframes c23x-r{0%{opacity:0}60%{opacity:0}61.5%{opacity:1}68.5%{opacity:1}70%{opacity:0}100%{opacity:0}}
.mp svg .c23x-cA{animation:c23x-cA 14s infinite ease-in-out;}@keyframes c23x-cA{0%,62%{opacity:0;transform:translate(10px,-130px) scale(.4)}68%,100%{opacity:1;transform:translate(0,0) scale(1)}}
.mp svg .c23x-cB{animation:c23x-cB 14s infinite ease-in-out;}@keyframes c23x-cB{0%,68%{opacity:0;transform:translate(-40px,-130px) scale(.4)}74%,100%{opacity:1;transform:translate(0,0) scale(1)}}
.mp svg .c23x-cl{animation:c23x-cl 14s infinite ease-in-out;}@keyframes c23x-cl{0%,70%{opacity:0}73%,100%{opacity:1}}
.mp svg .c23x-note{animation:c23x-note 14s infinite ease-in-out;}@keyframes c23x-note{0%,78%{opacity:0}81%,100%{opacity:1}}

/* image/container/docker: Docker-BUILD / Docker-RUN panels */
.mp svg .c23y-m0{animation:c23y-m0 14s infinite ease-in-out;}@keyframes c23y-m0{0%,24%{transform:translate(0px,0px) scale(1);opacity:0}26%{transform:translate(0px,0px) scale(1);opacity:1}30%{transform:translate(0px,0px) scale(1);opacity:1}35%{transform:translate(43.0px,62px) scale(0.4);opacity:1}36%{transform:translate(43.0px,62px) scale(0.4);opacity:0}100%{transform:translate(43.0px,62px) scale(1);opacity:0}}
.mp svg .c23y-m1{animation:c23y-m1 14s infinite ease-in-out;}@keyframes c23y-m1{0%,27%{transform:translate(0px,0px) scale(1);opacity:0}29%{transform:translate(0px,0px) scale(1);opacity:1}33%{transform:translate(0px,0px) scale(1);opacity:1}38%{transform:translate(-44.0px,62px) scale(0.4);opacity:1}39%{transform:translate(-44.0px,62px) scale(0.4);opacity:0}100%{transform:translate(-44.0px,62px) scale(1);opacity:0}}
.mp svg .c23y-m2{animation:c23y-m2 14s infinite ease-in-out;}@keyframes c23y-m2{0%,30%{transform:translate(0px,0px) scale(1);opacity:0}32%{transform:translate(0px,0px) scale(1);opacity:1}36%{transform:translate(0px,0px) scale(1);opacity:1}41%{transform:translate(43.0px,34px) scale(0.4);opacity:1}42%{transform:translate(43.0px,34px) scale(0.4);opacity:0}100%{transform:translate(43.0px,34px) scale(1);opacity:0}}
.mp svg .c23y-m3{animation:c23y-m3 14s infinite ease-in-out;}@keyframes c23y-m3{0%,33%{transform:translate(0px,0px) scale(1);opacity:0}35%{transform:translate(0px,0px) scale(1);opacity:1}39%{transform:translate(0px,0px) scale(1);opacity:1}44%{transform:translate(-44.0px,34px) scale(0.4);opacity:1}45%{transform:translate(-44.0px,34px) scale(0.4);opacity:0}100%{transform:translate(-44.0px,34px) scale(1);opacity:0}}
.mp svg .c23y-img{animation:c23y-img 14s infinite ease-in-out;}@keyframes c23y-img{0%,44%{opacity:0;transform:scale(.3)}47%{opacity:1;transform:scale(1.18)}49%,100%{opacity:1;transform:scale(1)}}
.mp svg .c23y-imgl{animation:c23y-imgl 14s infinite ease-in-out;}@keyframes c23y-imgl{0%,44%{opacity:0}47%,100%{opacity:1}}
.mp svg .c23y-fly{animation:c23y-fly 14s infinite ease-in-out;}@keyframes c23y-fly{0%,48%{transform:translate(0px,0px) scale(1);opacity:0}50%{transform:translate(0px,0px) scale(1);opacity:1}58%{transform:translate(178px,-66px) scale(0.7);opacity:1}100%{transform:translate(178px,-66px) scale(0.7);opacity:1}}
.mp svg .c23y-same{animation:c23y-same 14s infinite ease-in-out;}@keyframes c23y-same{0%,58%{opacity:0}61%,100%{opacity:1}}
.mp svg .c23y-cA{animation:c23y-cA 14s infinite ease-in-out;}@keyframes c23y-cA{0%,62%{opacity:0;transform:translate(-6px,-50px) scale(.5)}68%,100%{opacity:1;transform:translate(0,0) scale(1)}}
.mp svg .c23y-cB{animation:c23y-cB 14s infinite ease-in-out;}@keyframes c23y-cB{0%,68%{opacity:0;transform:translate(-60px,-50px) scale(.5)}74%,100%{opacity:1;transform:translate(0,0) scale(1)}}
.mp svg .c23y-cl{animation:c23y-cl 14s infinite ease-in-out;}@keyframes c23y-cl{0%,70%{opacity:0}73%,100%{opacity:1}}
.mp svg .c23y-note{animation:c23y-note 14s infinite ease-in-out;}@keyframes c23y-note{0%,78%{opacity:0}81%,100%{opacity:1}}

/* client·server merged card */
.mp svg .c4x-q1{animation:c4x-q1 14s infinite ease-in-out;}@keyframes c4x-q1{0%,24%{transform:translate(0px,0px) scale(1);opacity:0}26%{transform:translate(0px,0px) scale(1);opacity:1}34%{transform:translate(82px,30px) scale(0.7);opacity:1}36%{transform:translate(82px,30px) scale(0.7);opacity:0}100%{transform:translate(82px,30px) scale(1);opacity:0}}
.mp svg .c4x-led{opacity:0;animation:c4x-led 14s infinite}@keyframes c4x-led{0%{opacity:0}34%{opacity:0}35.5%{opacity:1}38.5%{opacity:1}40%{opacity:0}54%{opacity:0}55.5%{opacity:1}58.5%{opacity:1}60%{opacity:0}100%{opacity:0}}
.mp svg .c4x-a1{animation:c4x-a1 14s infinite ease-in-out;}@keyframes c4x-a1{0%,38%{transform:translate(70px,10px) scale(1);opacity:0}40%{transform:translate(70px,10px) scale(1);opacity:1}48%{transform:translate(-20px,-20px) scale(0.8);opacity:1}50%{transform:translate(-20px,-20px) scale(0.8);opacity:0}100%{transform:translate(-20px,-20px) scale(1);opacity:0}}
.mp svg .c4x-pg{animation:c4x-pg 14s infinite ease-in-out;}@keyframes c4x-pg{0%,50%{opacity:0}53%,100%{opacity:1}}
.mp svg .c4x-q2{animation:c4x-q2 14s infinite ease-in-out;}@keyframes c4x-q2{0%,44%{transform:translate(0px,0px) scale(1);opacity:0}46%{transform:translate(0px,0px) scale(1);opacity:1}54%{transform:translate(112px,-24px) scale(0.7);opacity:1}56%{transform:translate(112px,-24px) scale(0.7);opacity:0}100%{transform:translate(112px,-24px) scale(1);opacity:0}}
.mp svg .c4x-a2{animation:c4x-a2 14s infinite ease-in-out;}@keyframes c4x-a2{0%,58%{transform:translate(70px,-6px) scale(1);opacity:0}60%{transform:translate(70px,-6px) scale(1);opacity:1}66%{transform:translate(-50px,18px) scale(0.7);opacity:1}68%{transform:translate(-50px,18px) scale(0.7);opacity:0}100%{transform:translate(-50px,18px) scale(1);opacity:0}}
.mp svg .c4x-ap{animation:c4x-ap 14s infinite ease-in-out;}@keyframes c4x-ap{0%,68%{opacity:0}71%,100%{opacity:1}}
.mp svg .c4x-q3{animation:c4x-q3 14s infinite ease-in-out;}@keyframes c4x-q3{0%,56%{transform:translate(0px,0px) scale(1);opacity:0}57%{transform:translate(0px,0px) scale(1);opacity:1}61%{transform:translate(36px,4px) scale(0.7);opacity:1}62%{transform:translate(36px,4px) scale(0.7);opacity:0}100%{transform:translate(36px,4px) scale(1);opacity:0}}
.mp svg .c4x-a3{animation:c4x-a3 14s infinite ease-in-out;}@keyframes c4x-a3{0%,62%{transform:translate(30px,0px) scale(1);opacity:0}63%{transform:translate(30px,0px) scale(1);opacity:1}67%{transform:translate(-10px,-10px) scale(0.7);opacity:1}68%{transform:translate(-10px,-10px) scale(0.7);opacity:0}100%{transform:translate(-10px,-10px) scale(1);opacity:0}}
.mp svg .c4x-role{animation:c4x-role 14s infinite ease-in-out;}@keyframes c4x-role{0%,64%{opacity:0}67%,100%{opacity:1}}

/* front-end·back-end merged card */
.mp svg .c1x-cur{animation:c1x-cur 14s infinite ease-in-out;}@keyframes c1x-cur{0%,22%{transform:translate(40px,40px) scale(1);opacity:0}24%{transform:translate(40px,40px) scale(1);opacity:1}30%{transform:translate(0px,0px) scale(1);opacity:1}34%{transform:translate(0px,0px) scale(1);opacity:1}38%{transform:translate(0px,0px) scale(1);opacity:0}100%{transform:translate(0px,0px) scale(1);opacity:0}}
.mp svg .c1x-btn{animation:c1x-btn 14s infinite ease-in-out;}@keyframes c1x-btn{0%,30%{opacity:0}31%,36%{opacity:1}39%,100%{opacity:0}}
.mp svg .c1x-q{animation:c1x-q 14s infinite ease-in-out;}@keyframes c1x-q{0%,34%{transform:translate(0px,0px) scale(1);opacity:0}36%{transform:translate(0px,0px) scale(1);opacity:1}44%{transform:translate(126px,-40px) scale(0.7);opacity:1}46%{transform:translate(126px,-40px) scale(0.7);opacity:0}100%{transform:translate(126px,-40px) scale(1);opacity:0}}
.mp svg .c1x-led{opacity:0;animation:c1x-led 14s infinite}@keyframes c1x-led{0%{opacity:0}44%{opacity:0}45.5%{opacity:1}48.5%{opacity:1}50%{opacity:0}58%{opacity:0}59.5%{opacity:1}62.5%{opacity:1}64%{opacity:0}100%{opacity:0}}
.mp svg .c1x-q2{animation:c1x-q2 14s infinite ease-in-out;}@keyframes c1x-q2{0%,46%{transform:translate(0px,0px) scale(1);opacity:0}47%{transform:translate(0px,0px) scale(1);opacity:1}51%{transform:translate(36px,4px) scale(0.7);opacity:1}52%{transform:translate(36px,4px) scale(0.7);opacity:0}100%{transform:translate(36px,4px) scale(1);opacity:0}}
.mp svg .c1x-a2{animation:c1x-a2 14s infinite ease-in-out;}@keyframes c1x-a2{0%,52%{transform:translate(30px,0px) scale(1);opacity:0}53%{transform:translate(30px,0px) scale(1);opacity:1}57%{transform:translate(-10px,-10px) scale(0.7);opacity:1}58%{transform:translate(-10px,-10px) scale(0.7);opacity:0}100%{transform:translate(-10px,-10px) scale(1);opacity:0}}
.mp svg .c1x-a{animation:c1x-a 14s infinite ease-in-out;}@keyframes c1x-a{0%,58%{transform:translate(0px,0px) scale(1);opacity:0}60%{transform:translate(0px,0px) scale(1);opacity:1}68%{transform:translate(-96px,-22px) scale(0.7);opacity:1}70%{transform:translate(-96px,-22px) scale(0.7);opacity:0}100%{transform:translate(-96px,-22px) scale(1);opacity:0}}
.mp svg .c1x-bd{animation:c1x-bd 14s infinite ease-in-out;}@keyframes c1x-bd{0%,70%{opacity:0;transform:scale(.3)}73%{opacity:1;transform:scale(1.18)}75%,100%{opacity:1;transform:scale(1)}}
.mp svg .c1x-note{animation:c1x-note 14s infinite ease-in-out;}@keyframes c1x-note{0%,74%{opacity:0}77%,100%{opacity:1}}

/* HTML · CSS · JavaScript: code (left) → browser (right) */
.mp svg .c6h-l0{animation:c6h-l0 14s infinite ease-in-out;}@keyframes c6h-l0{0%,26%{opacity:0}29%,100%{opacity:1}}
.mp svg .c6h-l1{animation:c6h-l1 14s infinite ease-in-out;}@keyframes c6h-l1{0%,35%{opacity:0}38%,100%{opacity:1}}
.mp svg .c6h-l2{animation:c6h-l2 14s infinite ease-in-out;}@keyframes c6h-l2{0%,44%{opacity:0}47%,100%{opacity:1}}
.mp svg .c6h-l3{animation:c6h-l3 14s infinite ease-in-out;}@keyframes c6h-l3{0%,53%{opacity:0}56%,100%{opacity:1}}
.mp svg .c6h-e0{animation:c6h-e0 14s infinite ease-in-out;}@keyframes c6h-e0{0%,28%{opacity:0;transform:scale(.3)}31%{opacity:1;transform:scale(1.18)}33%,100%{opacity:1;transform:scale(1)}}
.mp svg .c6h-e1{animation:c6h-e1 14s infinite ease-in-out;}@keyframes c6h-e1{0%,37%{opacity:0;transform:scale(.3)}40%{opacity:1;transform:scale(1.18)}42%,100%{opacity:1;transform:scale(1)}}
.mp svg .c6h-e2{animation:c6h-e2 14s infinite ease-in-out;}@keyframes c6h-e2{0%,46%{opacity:0;transform:scale(.3)}49%{opacity:1;transform:scale(1.18)}51%,100%{opacity:1;transform:scale(1)}}
.mp svg .c6h-e3{animation:c6h-e3 14s infinite ease-in-out;}@keyframes c6h-e3{0%,55%{opacity:0;transform:scale(.3)}58%{opacity:1;transform:scale(1.18)}60%,100%{opacity:1;transform:scale(1)}}
.mp svg .c6h-n{animation:c6h-n 14s infinite ease-in-out;}@keyframes c6h-n{0%,66%{opacity:0}69%,100%{opacity:1}}
.mp svg .c7c-l0{animation:c7c-l0 14s infinite ease-in-out;}@keyframes c7c-l0{0%,26%{opacity:0}29%,100%{opacity:1}}
.mp svg .c7c-l1{animation:c7c-l1 14s infinite ease-in-out;}@keyframes c7c-l1{0%,34%{opacity:0}37%,100%{opacity:1}}
.mp svg .c7c-l2{animation:c7c-l2 14s infinite ease-in-out;}@keyframes c7c-l2{0%,42%{opacity:0}45%,100%{opacity:1}}
.mp svg .c7c-l3{animation:c7c-l3 14s infinite ease-in-out;}@keyframes c7c-l3{0%,50%{opacity:0}53%,100%{opacity:1}}
.mp svg .c7c-l4{animation:c7c-l4 14s infinite ease-in-out;}@keyframes c7c-l4{0%,58%{opacity:0}61%,100%{opacity:1}}
.mp svg .c7c-h0{animation:c7c-h0 14s infinite ease-in-out;}@keyframes c7c-h0{0%,34%{opacity:1}37%,100%{opacity:0}}
.mp svg .c7c-h1{animation:c7c-h1 14s infinite ease-in-out;}@keyframes c7c-h1{0%,34%{opacity:0;transform:scale(.85)}37%,100%{opacity:1;transform:scale(1)}}
.mp svg .c7c-i0{animation:c7c-i0 14s infinite ease-in-out;}@keyframes c7c-i0{0%,44%{opacity:1}47%,100%{opacity:0}}
.mp svg .c7c-i1{animation:c7c-i1 14s infinite ease-in-out;}@keyframes c7c-i1{0%,44%{opacity:0;transform:scale(.85)}47%,100%{opacity:1;transform:scale(1)}}
.mp svg .c7c-b0{animation:c7c-b0 14s infinite ease-in-out;}@keyframes c7c-b0{0%,52%{opacity:1}55%,100%{opacity:0}}
.mp svg .c7c-b1{animation:c7c-b1 14s infinite ease-in-out;}@keyframes c7c-b1{0%,52%{opacity:0;transform:scale(.85)}55%,100%{opacity:1;transform:scale(1)}}
.mp svg .c7c-tx{animation:c7c-tx 14s infinite ease-in-out;transform-origin:left top}@keyframes c7c-tx{0%,58%{transform:translate(0,0)}64%,100%{transform:translate(84px,-62px) scale(.55,1)}}
.mp svg .c7c-n{animation:c7c-n 14s infinite ease-in-out;}@keyframes c7c-n{0%,68%{opacity:0}71%,100%{opacity:1}}
.mp svg .c8j-hl{animation:c8j-hl 14s infinite steps(1,end);}@keyframes c8j-hl{0%,32%{opacity:0;transform:translateY(-32px)}33%{opacity:1;transform:translateY(-32px)}38%{opacity:1;transform:translateY(0)}44%{opacity:1;transform:translateY(32px)}49%,58%{opacity:0;transform:translateY(32px)}60%{opacity:1;transform:translateY(-32px)}64%{opacity:1;transform:translateY(0)}68%{opacity:1;transform:translateY(32px)}72%,100%{opacity:0;transform:translateY(32px)}}
.mp svg .c8j-cur{animation:c8j-cur 14s infinite ease-in-out;}@keyframes c8j-cur{0%,24%{transform:translate(60px,40px) scale(1);opacity:0}26%{transform:translate(60px,40px) scale(1);opacity:1}31%{transform:translate(0px,0px) scale(1);opacity:1}33%{transform:translate(0px,0px) scale(0.85);opacity:1}35%{transform:translate(0px,0px) scale(1);opacity:1}57%{transform:translate(0px,0px) scale(1);opacity:1}59%{transform:translate(0px,0px) scale(0.85);opacity:1}61%{transform:translate(0px,0px) scale(1);opacity:1}80%{transform:translate(0px,0px) scale(1);opacity:1}84%,100%{transform:translate(0px,0px) scale(1);opacity:0}}
.mp svg .c8j-hf{animation:c8j-hf 14s infinite ease-in-out;}@keyframes c8j-hf{0%,46%{opacity:0;transform:scale(.6)}48%{opacity:1;transform:scale(1.35)}52%,100%{opacity:1;transform:scale(1)}}
.mp svg .c8j-n0{animation:c8j-n0 14s infinite ease-in-out;}@keyframes c8j-n0{0%,46%{opacity:1}47%,100%{opacity:0}}
.mp svg .c8j-n1{animation:c8j-n1 14s infinite ease-in-out;}@keyframes c8j-n1{0%,46%{opacity:0}47%,69%{opacity:1}70%,100%{opacity:0}}
.mp svg .c8j-n2{animation:c8j-n2 14s infinite ease-in-out;}@keyframes c8j-n2{0%,69%{opacity:0}70%{opacity:1;transform:scale(1.3)}74%,100%{opacity:1;transform:scale(1)}}
.mp svg .c8j-n{animation:c8j-n 14s infinite ease-in-out;}@keyframes c8j-n{0%,76%{opacity:0}79%,100%{opacity:1}}

/* API·REST API merged card */
.mp svg .c13x-m0{animation:c13x-m0 14s infinite ease-in-out;}@keyframes c13x-m0{0%,56%{opacity:0}57%,61%{opacity:1}62%,100%{opacity:0}}
.mp svg .c13x-m1{animation:c13x-m1 14s infinite ease-in-out;}@keyframes c13x-m1{0%,62%{opacity:0}63%,67%{opacity:1}68%,100%{opacity:0}}
.mp svg .c13x-m2{animation:c13x-m2 14s infinite ease-in-out;}@keyframes c13x-m2{0%,68%{opacity:0}69%,73%{opacity:1}74%,100%{opacity:0}}
.mp svg .c13x-m3{animation:c13x-m3 14s infinite ease-in-out;}@keyframes c13x-m3{0%,74%{opacity:0}75%,79%{opacity:1}80%,100%{opacity:0}}
.mp svg .c13x-q{animation:c13x-q 14s infinite ease-in-out;}@keyframes c13x-q{0%,24%{transform:translate(0px,0px) scale(1);opacity:0}26%{transform:translate(0px,0px) scale(1);opacity:1}34%{transform:translate(94px,0px) scale(1);opacity:1}36%{transform:translate(94px,0px) scale(1);opacity:1}42%{transform:translate(186px,0px) scale(0.7);opacity:1}44%{transform:translate(186px,0px) scale(0.7);opacity:0}100%{transform:translate(186px,0px) scale(1);opacity:0}}
.mp svg .c13x-a{animation:c13x-a 14s infinite ease-in-out;}@keyframes c13x-a{0%,44%{transform:translate(60px,0px) scale(1);opacity:0}46%{transform:translate(60px,0px) scale(1);opacity:1}50%{transform:translate(0px,0px) scale(1);opacity:1}52%{transform:translate(0px,0px) scale(1);opacity:1}58%{transform:translate(-184px,0px) scale(0.7);opacity:1}60%{transform:translate(-184px,0px) scale(0.7);opacity:0}100%{transform:translate(-184px,0px) scale(1);opacity:0}}
.mp svg .c13x-sun{animation:c13x-sun 14s infinite ease-in-out;}@keyframes c13x-sun{0%,60%{opacity:0;transform:scale(.3)}63%{opacity:1;transform:scale(1.18)}65%,100%{opacity:1;transform:scale(1)}}

/* 13 API 창구 v2 */
.mp svg .c13x-m0{animation:c13x-m0 14s infinite ease-in-out;}@keyframes c13x-m0{0%,56%{opacity:0}57%,61%{opacity:1}62%,100%{opacity:0}}
.mp svg .c13x-m1{animation:c13x-m1 14s infinite ease-in-out;}@keyframes c13x-m1{0%,62%{opacity:0}63%,67%{opacity:1}68%,100%{opacity:0}}
.mp svg .c13x-m2{animation:c13x-m2 14s infinite ease-in-out;}@keyframes c13x-m2{0%,68%{opacity:0}69%,73%{opacity:1}74%,100%{opacity:0}}
.mp svg .c13x-m3{animation:c13x-m3 14s infinite ease-in-out;}@keyframes c13x-m3{0%,74%{opacity:0}75%,79%{opacity:1}80%,100%{opacity:0}}
.mp svg .c13x-q{animation:c13x-q 14s infinite ease-in-out;}@keyframes c13x-q{0%,24%{transform:translate(0px,0px) scale(1);opacity:0}26%{transform:translate(0px,0px) scale(1);opacity:1}34%{transform:translate(50px,0px) scale(0.6);opacity:1}36%{transform:translate(50px,0px) scale(0.6);opacity:0}100%{transform:translate(50px,0px) scale(1);opacity:0}}
.mp svg .c13x-dot{animation:c13x-dot 14s infinite ease-in-out;}@keyframes c13x-dot{0%,36%{transform:translate(0px,0px) scale(1);opacity:0}37%{transform:translate(0px,0px) scale(1);opacity:1}42%{transform:translate(77px,0px) scale(1);opacity:1}45%{transform:translate(77px,0px) scale(1);opacity:1}49%{transform:translate(187px,0px) scale(1);opacity:1}51%{transform:translate(187px,0px) scale(1);opacity:1}55%{transform:translate(77px,0px) scale(1);opacity:1}58%{transform:translate(0px,0px) scale(1);opacity:1}59%{transform:translate(0px,0px) scale(1);opacity:0}100%{transform:translate(0px,0px) scale(1);opacity:0}}
.mp svg .c13x-a{animation:c13x-a 14s infinite ease-in-out;}@keyframes c13x-a{0%,58%{transform:translate(30px,0px) scale(1);opacity:0}60%{transform:translate(30px,0px) scale(1);opacity:1}68%{transform:translate(-56px,-6px) scale(0.7);opacity:1}70%{transform:translate(-56px,-6px) scale(0.7);opacity:0}100%{transform:translate(-56px,-6px) scale(1);opacity:0}}
.mp svg .c13x-sun{animation:c13x-sun 14s infinite ease-in-out;}@keyframes c13x-sun{0%,70%{opacity:0;transform:scale(.3)}73%{opacity:1;transform:scale(1.18)}75%,100%{opacity:1;transform:scale(1)}}

/* 78 ASYNC: async/await + fetch */
.mp svg .c78x-hl{animation:c78x-hl 14s infinite ease-in-out;}@keyframes c78x-hl{0%,18%{transform:translate(0px,0px) scale(1);opacity:1}22%,30%{transform:translate(0px,-72px) scale(1);opacity:1}34%,60%{transform:translate(0px,24px) scale(1);opacity:1}64%,80%{transform:translate(0px,-48px) scale(1);opacity:1}86%,100%{transform:translate(0px,0px) scale(1);opacity:0}}
.mp svg .c78x-wait{animation:c78x-wait 14s infinite ease-in-out;}@keyframes c78x-wait{0%,31%{opacity:0}33%,62%{opacity:1}64%,100%{opacity:0}}
.mp svg .c78x-q{animation:c78x-q 14s infinite ease-in-out;}@keyframes c78x-q{0%,24%{transform:translate(0px,0px) scale(1);opacity:0}26%{transform:translate(0px,0px) scale(1);opacity:1}34%{transform:translate(0px,-96px) scale(0.7);opacity:1}36%{transform:translate(0px,-96px) scale(0.7);opacity:0}100%{transform:translate(0px,-96px) scale(1);opacity:0}}
.mp svg .c78x-sp{animation:c78x-sp 14s infinite ease-in-out;}@keyframes c78x-sp{0%,30%{opacity:0}33%,60%{opacity:1}62%,100%{opacity:0}}
.mp svg .c78x-ld{animation:c78x-ld 14s infinite ease-in-out;}@keyframes c78x-ld{0%,30%{opacity:0}33%,60%{opacity:1}62%,100%{opacity:0}}
.mp svg .c78x-cur{animation:c78x-cur 14s infinite ease-in-out;}@keyframes c78x-cur{0%,36%{transform:translate(50px,30px) scale(1);opacity:0}38%{transform:translate(50px,30px) scale(1);opacity:1}44%{transform:translate(0px,0px) scale(1);opacity:1}47%{transform:translate(0px,0px) scale(0.85);opacity:1}49%{transform:translate(0px,0px) scale(1);opacity:1}54%{transform:translate(0px,0px) scale(1);opacity:0}100%{transform:translate(0px,0px) scale(1);opacity:0}}
.mp svg .c78x-h{animation:c78x-h 14s infinite ease-in-out;}@keyframes c78x-h{0%,46%{opacity:0}48%,100%{opacity:1}}
.mp svg .c78x-c0{animation:c78x-c0 14s infinite ease-in-out;}@keyframes c78x-c0{0%,46%{opacity:1}48%,100%{opacity:0}}
.mp svg .c78x-c1{animation:c78x-c1 14s infinite ease-in-out;}@keyframes c78x-c1{0%,46%{opacity:0}48%,100%{opacity:1}}
.mp svg .c78x-ok{animation:c78x-ok 14s infinite ease-in-out;}@keyframes c78x-ok{0%,49%{opacity:0}52%,100%{opacity:1}}
.mp svg .c78x-a{animation:c78x-a 14s infinite ease-in-out;}@keyframes c78x-a{0%,56%{transform:translate(0px,-96px) scale(0.7);opacity:0}58%{transform:translate(0px,-96px) scale(0.7);opacity:1}64%{transform:translate(0px,0px) scale(1);opacity:1}66%{transform:translate(0px,0px) scale(1);opacity:0}100%{transform:translate(0px,0px) scale(1);opacity:0}}
.mp svg .c78x-sun{animation:c78x-sun 14s infinite ease-in-out;}@keyframes c78x-sun{0%,68%{opacity:0;transform:scale(.3)}71%{opacity:1;transform:scale(1.18)}73%,100%{opacity:1;transform:scale(1)}}
.mp svg .c78x-n{animation:c78x-n 14s infinite ease-in-out;}@keyframes c78x-n{0%,72%{opacity:0}75%,100%{opacity:1}}

/* 16 SQL · 81 NoSQL: 같은 회원 데이터 비교 */
.mp svg .c16x-hd{animation:c16x-hd 14s infinite ease-in-out;}@keyframes c16x-hd{0%,10%{opacity:0}13%,100%{opacity:1}}
.mp svg .c16x-tag{animation:c16x-tag 14s infinite ease-in-out;}@keyframes c16x-tag{0%,16%{opacity:0;transform:scale(.3)}19%{opacity:1;transform:scale(1.18)}21%,100%{opacity:1;transform:scale(1)}}
.mp svg .c16x-r0{animation:c16x-r0 14s infinite ease-in-out;}@keyframes c16x-r0{0%{transform:translate(0px,-16px) scale(1);opacity:0}26%{transform:translate(0px,-16px) scale(1);opacity:0}31%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c16x-r1{animation:c16x-r1 14s infinite ease-in-out;}@keyframes c16x-r1{0%{transform:translate(0px,-16px) scale(1);opacity:0}36%{transform:translate(0px,-16px) scale(1);opacity:0}41%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c16x-r2{animation:c16x-r2 14s infinite ease-in-out;}@keyframes c16x-r2{0%{transform:translate(0px,-16px) scale(1);opacity:0}46%{transform:translate(0px,-16px) scale(1);opacity:0}51%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c16x-new{animation:c16x-new 14s infinite ease-in-out;}@keyframes c16x-new{0%,56%{transform:translate(-20px,0px) scale(1);opacity:0}59%{transform:translate(0px,0px) scale(1);opacity:1}64%{transform:translate(16px,0px) scale(1);opacity:1}66%{transform:translate(10px,0px) scale(1);opacity:1}74%{transform:translate(10px,0px) scale(1);opacity:1}78%{transform:translate(10px,0px) scale(1);opacity:0}100%{transform:translate(10px,0px) scale(1);opacity:0}}
.mp svg .c16x-no{animation:c16x-no 14s infinite ease-in-out;}@keyframes c16x-no{0%,65%{opacity:0;transform:scale(.3)}68%{opacity:1;transform:scale(1.18)}70%,100%{opacity:1;transform:scale(1)}}
.mp svg .c16x-no{animation:c16x-no 14s infinite ease-in-out;}@keyframes c16x-no{0%,64%{opacity:0}66%,76%{opacity:1}79%,100%{opacity:0}}
.mp svg .c16x-n{animation:c16x-n 14s infinite ease-in-out;}@keyframes c16x-n{0%,70%{opacity:0}73%,100%{opacity:1}}
.mp svg .c81x-hd{animation:c81x-hd 14s infinite ease-in-out;}@keyframes c81x-hd{0%,10%{opacity:0}13%,100%{opacity:1}}
.mp svg .c81x-tag{animation:c81x-tag 14s infinite ease-in-out;}@keyframes c81x-tag{0%,16%{opacity:0;transform:scale(.3)}19%{opacity:1;transform:scale(1.18)}21%,100%{opacity:1;transform:scale(1)}}
.mp svg .c81x-r0{animation:c81x-r0 14s infinite ease-in-out;}@keyframes c81x-r0{0%{transform:translate(0px,-16px) scale(1);opacity:0}26%{transform:translate(0px,-16px) scale(1);opacity:0}31%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c81x-r1{animation:c81x-r1 14s infinite ease-in-out;}@keyframes c81x-r1{0%{transform:translate(0px,-16px) scale(1);opacity:0}36%{transform:translate(0px,-16px) scale(1);opacity:0}41%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c81x-r2{animation:c81x-r2 14s infinite ease-in-out;}@keyframes c81x-r2{0%{transform:translate(0px,-16px) scale(1);opacity:0}46%{transform:translate(0px,-16px) scale(1);opacity:0}51%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c81x-n{animation:c81x-n 14s infinite ease-in-out;}@keyframes c81x-n{0%,64%{opacity:0}67%,100%{opacity:1}}

/* 29 LLM 학습: 다음 단어 예측 → 가중치 업데이트 */
.mp svg .c29x-k0{animation:c29x-k0 14s infinite ease-in-out;}@keyframes c29x-k0{0%,6%{opacity:0}7.5%,33%{opacity:1}34.5%,100%{opacity:0}}
.mp svg .c29x-p0{animation:c29x-p0 14s infinite ease-in-out;}@keyframes c29x-p0{0%,11%{opacity:0}12.5%,33%{opacity:1}34.5%,100%{opacity:0}}
.mp svg .c29x-a0{animation:c29x-a0 14s infinite ease-in-out;}@keyframes c29x-a0{0%,18%{opacity:0}19.5%,33%{opacity:1}34.5%,100%{opacity:0}}
.mp svg .c29x-m0{animation:c29x-m0 14s infinite ease-in-out;}@keyframes c29x-m0{0%,19%{opacity:0}20.5%,33%{opacity:1}34.5%,100%{opacity:0}}
.mp svg .c29x-e0{animation:c29x-e0 14s infinite ease-in-out;}@keyframes c29x-e0{0%,19%{opacity:0}20.5%,33%{opacity:1}34.5%,100%{opacity:0}}
.mp svg .c29x-c1{animation:c29x-c1 14s infinite ease-in-out;}@keyframes c29x-c1{0%,18%{opacity:0}20%,100%{opacity:1}}
.mp svg .c29x-k1{animation:c29x-k1 14s infinite ease-in-out;}@keyframes c29x-k1{0%,36%{opacity:0}37.5%,63%{opacity:1}64.5%,100%{opacity:0}}
.mp svg .c29x-p1{animation:c29x-p1 14s infinite ease-in-out;}@keyframes c29x-p1{0%,41%{opacity:0}42.5%,63%{opacity:1}64.5%,100%{opacity:0}}
.mp svg .c29x-a1{animation:c29x-a1 14s infinite ease-in-out;}@keyframes c29x-a1{0%,48%{opacity:0}49.5%,63%{opacity:1}64.5%,100%{opacity:0}}
.mp svg .c29x-m1{animation:c29x-m1 14s infinite ease-in-out;}@keyframes c29x-m1{0%,49%{opacity:0}50.5%,63%{opacity:1}64.5%,100%{opacity:0}}
.mp svg .c29x-e1{animation:c29x-e1 14s infinite ease-in-out;}@keyframes c29x-e1{0%,49%{opacity:0}50.5%,63%{opacity:1}64.5%,100%{opacity:0}}
.mp svg .c29x-c2{animation:c29x-c2 14s infinite ease-in-out;}@keyframes c29x-c2{0%,48%{opacity:0}50%,100%{opacity:1}}
.mp svg .c29x-k2{animation:c29x-k2 14s infinite ease-in-out;}@keyframes c29x-k2{0%,66%{opacity:0}67.5%,93%{opacity:1}94.5%,100%{opacity:0}}
.mp svg .c29x-p2{animation:c29x-p2 14s infinite ease-in-out;}@keyframes c29x-p2{0%,71%{opacity:0}72.5%,93%{opacity:1}94.5%,100%{opacity:0}}
.mp svg .c29x-a2{animation:c29x-a2 14s infinite ease-in-out;}@keyframes c29x-a2{0%,78%{opacity:0}79.5%,93%{opacity:1}94.5%,100%{opacity:0}}
.mp svg .c29x-m2{animation:c29x-m2 14s infinite ease-in-out;}@keyframes c29x-m2{0%,79%{opacity:0}80.5%,93%{opacity:1}94.5%,100%{opacity:0}}
.mp svg .c29x-e2{animation:c29x-e2 14s infinite ease-in-out;}@keyframes c29x-e2{0%,79%{opacity:0}80.5%,93%{opacity:1}94.5%,100%{opacity:0}}
.mp svg .c29x-c3{animation:c29x-c3 14s infinite ease-in-out;}@keyframes c29x-c3{0%,78%{opacity:0}80%,100%{opacity:1}}
.mp svg .c29x-w0{animation:c29x-w0 14s infinite ease-in-out;}@keyframes c29x-w0{0%,23%{opacity:1}25%,100%{opacity:0}}
.mp svg .c29x-w1{animation:c29x-w1 14s infinite ease-in-out;}@keyframes c29x-w1{0%,23%{opacity:0}25%,53%{opacity:1}55%,100%{opacity:0}}
.mp svg .c29x-w2{animation:c29x-w2 14s infinite ease-in-out;}@keyframes c29x-w2{0%,53%{opacity:0}55%,83%{opacity:1}85%,100%{opacity:0}}
.mp svg .c29x-w3{animation:c29x-w3 14s infinite ease-in-out;}@keyframes c29x-w3{0%,83%{opacity:0}85%,100%{opacity:1}}
.mp svg .c29x-glow{opacity:0;animation:c29x-glow 14s infinite}@keyframes c29x-glow{0%{opacity:0}22%{opacity:0}23.5%{opacity:1}26.5%{opacity:1}28%{opacity:0}52%{opacity:0}53.5%{opacity:1}56.5%{opacity:1}58%{opacity:0}82%{opacity:0}83.5%{opacity:1}86.5%{opacity:1}88%{opacity:0}100%{opacity:0}}
.mp svg .c29x-up{opacity:0;animation:c29x-up 14s infinite}@keyframes c29x-up{0%{opacity:0}22%{opacity:0}23.5%{opacity:1}29.5%{opacity:1}31%{opacity:0}52%{opacity:0}53.5%{opacity:1}59.5%{opacity:1}61%{opacity:0}82%{opacity:0}83.5%{opacity:1}89.5%{opacity:1}91%{opacity:0}100%{opacity:0}}
.mp svg .c29x-n{animation:c29x-n 14s infinite ease-in-out;}@keyframes c29x-n{0%,90%{opacity:0}93%,100%{opacity:1}}

/* 30 LLM 추론: 가중치 고정, 다음 단어를 골라 이어 붙임 */
.mp svg .c30x-k0{animation:c30x-k0 14s infinite ease-in-out;}@keyframes c30x-k0{0%,8%{opacity:0}9.5%,38%{opacity:1}39.5%,100%{opacity:0}}
.mp svg .c30x-c0{animation:c30x-c0 14s infinite ease-in-out;}@keyframes c30x-c0{0%,16%{opacity:0}17.5%,38%{opacity:1}39.5%,100%{opacity:0}}
.mp svg .c30x-b00{animation:c30x-b00 14s infinite ease-out;transform-origin:left center}@keyframes c30x-b00{0%,16%{transform:scaleX(0)}23%,100%{transform:scaleX(1)}}
.mp svg .c30x-b01{animation:c30x-b01 14s infinite ease-out;transform-origin:left center}@keyframes c30x-b01{0%,16%{transform:scaleX(0)}23%,100%{transform:scaleX(1)}}
.mp svg .c30x-b02{animation:c30x-b02 14s infinite ease-out;transform-origin:left center}@keyframes c30x-b02{0%,16%{transform:scaleX(0)}23%,100%{transform:scaleX(1)}}
.mp svg .c30x-h0{animation:c30x-h0 14s infinite ease-in-out;}@keyframes c30x-h0{0%,25%{opacity:0}26.5%,38%{opacity:1}39.5%,100%{opacity:0}}
.mp svg .c30x-w0{animation:c30x-w0 14s infinite ease-in-out;}@keyframes c30x-w0{0%{transform:translate(144px,70px) scale(1);opacity:0}28%{transform:translate(144px,70px) scale(1);opacity:0}29%{transform:translate(144px,70px) scale(1);opacity:1}36%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c30x-k1{animation:c30x-k1 14s infinite ease-in-out;}@keyframes c30x-k1{0%,46%{opacity:0}47.5%,76%{opacity:1}77.5%,100%{opacity:0}}
.mp svg .c30x-c1{animation:c30x-c1 14s infinite ease-in-out;}@keyframes c30x-c1{0%,54%{opacity:0}55.5%,76%{opacity:1}77.5%,100%{opacity:0}}
.mp svg .c30x-b10{animation:c30x-b10 14s infinite ease-out;transform-origin:left center}@keyframes c30x-b10{0%,54%{transform:scaleX(0)}61%,100%{transform:scaleX(1)}}
.mp svg .c30x-b11{animation:c30x-b11 14s infinite ease-out;transform-origin:left center}@keyframes c30x-b11{0%,54%{transform:scaleX(0)}61%,100%{transform:scaleX(1)}}
.mp svg .c30x-b12{animation:c30x-b12 14s infinite ease-out;transform-origin:left center}@keyframes c30x-b12{0%,54%{transform:scaleX(0)}61%,100%{transform:scaleX(1)}}
.mp svg .c30x-h1{animation:c30x-h1 14s infinite ease-in-out;}@keyframes c30x-h1{0%,63%{opacity:0}64.5%,76%{opacity:1}77.5%,100%{opacity:0}}
.mp svg .c30x-w1{animation:c30x-w1 14s infinite ease-in-out;}@keyframes c30x-w1{0%{transform:translate(74px,70px) scale(1);opacity:0}66%{transform:translate(74px,70px) scale(1);opacity:0}67%{transform:translate(74px,70px) scale(1);opacity:1}74%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c30x-glow{opacity:0;animation:c30x-glow 14s infinite}@keyframes c30x-glow{0%{opacity:0}10%{opacity:0}11.5%{opacity:1}15.5%{opacity:1}17%{opacity:0}48%{opacity:0}49.5%{opacity:1}53.5%{opacity:1}55%{opacity:0}100%{opacity:0}}
.mp svg .c30x-n{animation:c30x-n 14s infinite ease-in-out;}@keyframes c30x-n{0%,84%{opacity:0}87%,100%{opacity:1}}

/* 35 벡터 DB: 질문이 들어간 뒤 3개 선택 */
.mp svg .c35-ql{animation:c35-ql 14s infinite ease-in-out;}@keyframes c35-ql{0%,26%{opacity:0}29%,100%{opacity:1}}
.mp svg .c35-q{animation:c35-q 14s infinite ease-in-out;}@keyframes c35-q{0%,28%{transform:translate(-196px,-69px) scale(1);opacity:0}30%{transform:translate(-196px,-69px) scale(1);opacity:1}40%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c35-ring{animation:c35-ring 14s infinite ease-in-out;}@keyframes c35-ring{0%,42%{opacity:0;transform:scale(.2)}52%,100%{opacity:1;transform:scale(1)}}
.mp svg .c35y-n0{animation:c35y-n0 14s infinite ease-in-out;}@keyframes c35y-n0{0%,52%{opacity:0;transform:scale(.4)}54%{opacity:1;transform:scale(1.5)}57%,100%{opacity:1;transform:scale(1)}}
.mp svg .c35y-n1{animation:c35y-n1 14s infinite ease-in-out;}@keyframes c35y-n1{0%,55%{opacity:0;transform:scale(.4)}57%{opacity:1;transform:scale(1.5)}60%,100%{opacity:1;transform:scale(1)}}
.mp svg .c35y-n2{animation:c35y-n2 14s infinite ease-in-out;}@keyframes c35y-n2{0%,58%{opacity:0;transform:scale(.4)}60%{opacity:1;transform:scale(1.5)}63%,100%{opacity:1;transform:scale(1)}}
.mp svg .c35y-t{animation:c35y-t 14s infinite ease-in-out;}@keyframes c35y-t{0%,60%{opacity:0}63%,100%{opacity:1}}
.mp svg .c35-r0{animation:c35-r0 14s infinite ease-in-out;}@keyframes c35-r0{0%,64%{transform:translate(196px,-9px) scale(0.3);opacity:0}66%{transform:translate(196px,-9px) scale(0.3);opacity:1}74%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c35-r1{animation:c35-r1 14s infinite ease-in-out;}@keyframes c35-r1{0%,68%{transform:translate(216px,-33px) scale(0.3);opacity:0}70%{transform:translate(216px,-33px) scale(0.3);opacity:1}78%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c35-r2{animation:c35-r2 14s infinite ease-in-out;}@keyframes c35-r2{0%,72%{transform:translate(184px,-67px) scale(0.3);opacity:0}74%{transform:translate(184px,-67px) scale(0.3);opacity:1}82%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c35-note{animation:c35-note 14s infinite ease-in-out;}@keyframes c35-note{0%,80%{opacity:0}83%,100%{opacity:1}}

/* 70 모델 증류: 교사 입출력 데이터로 학생 학습 */
.mp svg .c70x-in0{animation:c70x-in0 14s infinite ease-in-out;}@keyframes c70x-in0{0%{transform:translate(-10px,0px) scale(1);opacity:0}6%{transform:translate(-10px,0px) scale(1);opacity:0}7%{transform:translate(0px,0px) scale(1);opacity:1}11%{transform:translate(96px,0px) scale(0.6);opacity:1}12%{transform:translate(96px,0px) scale(0.6);opacity:0}100%{transform:translate(96px,0px) scale(1);opacity:0}}
.mp svg .c70x-in1{animation:c70x-in1 14s infinite ease-in-out;}@keyframes c70x-in1{0%{transform:translate(-10px,0px) scale(1);opacity:0}13%{transform:translate(-10px,0px) scale(1);opacity:0}14%{transform:translate(0px,0px) scale(1);opacity:1}18%{transform:translate(96px,0px) scale(0.6);opacity:1}19%{transform:translate(96px,0px) scale(0.6);opacity:0}100%{transform:translate(96px,0px) scale(1);opacity:0}}
.mp svg .c70x-in2{animation:c70x-in2 14s infinite ease-in-out;}@keyframes c70x-in2{0%{transform:translate(-10px,0px) scale(1);opacity:0}20%{transform:translate(-10px,0px) scale(1);opacity:0}21%{transform:translate(0px,0px) scale(1);opacity:1}25%{transform:translate(96px,0px) scale(0.6);opacity:1}26%{transform:translate(96px,0px) scale(0.6);opacity:0}100%{transform:translate(96px,0px) scale(1);opacity:0}}
.mp svg .c70x-row0{animation:c70x-row0 14s infinite ease-in-out;}@keyframes c70x-row0{0%{transform:translate(-20px,0px) scale(1);opacity:0}12%{transform:translate(-20px,0px) scale(1);opacity:0}14%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c70x-row1{animation:c70x-row1 14s infinite ease-in-out;}@keyframes c70x-row1{0%{transform:translate(-20px,0px) scale(1);opacity:0}19%{transform:translate(-20px,0px) scale(1);opacity:0}21%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c70x-row2{animation:c70x-row2 14s infinite ease-in-out;}@keyframes c70x-row2{0%{transform:translate(-20px,0px) scale(1);opacity:0}26%{transform:translate(-20px,0px) scale(1);opacity:0}28%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c70x-row3{animation:c70x-row3 14s infinite ease-in-out;}@keyframes c70x-row3{0%{transform:translate(-20px,0px) scale(1);opacity:0}29%{transform:translate(-20px,0px) scale(1);opacity:0}31%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c70x-row4{animation:c70x-row4 14s infinite ease-in-out;}@keyframes c70x-row4{0%{transform:translate(-20px,0px) scale(1);opacity:0}31%{transform:translate(-20px,0px) scale(1);opacity:0}33%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c70x-tg{opacity:0;animation:c70x-tg 14s infinite}@keyframes c70x-tg{0%{opacity:0}10%{opacity:0}11.5%{opacity:1}11.5%{opacity:1}13%{opacity:0}17%{opacity:0}18.5%{opacity:1}18.5%{opacity:1}20%{opacity:0}24%{opacity:0}25.5%{opacity:1}25.5%{opacity:1}27%{opacity:0}100%{opacity:0}}
.mp svg .c70x-many{animation:c70x-many 14s infinite ease-in-out;}@keyframes c70x-many{0%,34%{opacity:0}37%,100%{opacity:1}}
.mp svg .c70x-fd0{animation:c70x-fd0 14s infinite ease-in-out;}@keyframes c70x-fd0{0%{transform:translate(0px,0px) scale(1);opacity:0}40%{transform:translate(0px,0px) scale(1);opacity:0}41%{transform:translate(0px,0px) scale(1);opacity:1}45%{transform:translate(120px,24px) scale(0.5);opacity:1}46%{transform:translate(120px,24px) scale(0.5);opacity:0}100%{transform:translate(120px,24px) scale(1);opacity:0}}
.mp svg .c70x-fd1{animation:c70x-fd1 14s infinite ease-in-out;}@keyframes c70x-fd1{0%{transform:translate(0px,0px) scale(1);opacity:0}45%{transform:translate(0px,0px) scale(1);opacity:0}46%{transform:translate(0px,0px) scale(1);opacity:1}50%{transform:translate(120px,24px) scale(0.5);opacity:1}51%{transform:translate(120px,24px) scale(0.5);opacity:0}100%{transform:translate(120px,24px) scale(1);opacity:0}}
.mp svg .c70x-fd2{animation:c70x-fd2 14s infinite ease-in-out;}@keyframes c70x-fd2{0%{transform:translate(0px,0px) scale(1);opacity:0}50%{transform:translate(0px,0px) scale(1);opacity:0}51%{transform:translate(0px,0px) scale(1);opacity:1}55%{transform:translate(120px,24px) scale(0.5);opacity:1}56%{transform:translate(120px,24px) scale(0.5);opacity:0}100%{transform:translate(120px,24px) scale(1);opacity:0}}
.mp svg .c70x-sg{opacity:0;animation:c70x-sg 14s infinite}@keyframes c70x-sg{0%{opacity:0}45%{opacity:0}46.5%{opacity:1}46.5%{opacity:1}48%{opacity:0}50%{opacity:0}51.5%{opacity:1}51.5%{opacity:1}53%{opacity:0}55%{opacity:0}56.5%{opacity:1}56.5%{opacity:1}58%{opacity:0}100%{opacity:0}}
.mp svg .c70x-lr{animation:c70x-lr 14s infinite ease-in-out;}@keyframes c70x-lr{0%,38%{opacity:0}41%,100%{opacity:1}}
.mp svg .c70x-q{animation:c70x-q 14s infinite ease-in-out;}@keyframes c70x-q{0%,62%{opacity:0}65%,100%{opacity:1}}
.mp svg .c70x-at{animation:c70x-at 14s infinite ease-in-out;}@keyframes c70x-at{0%,66%{opacity:0;transform:scale(.3)}69%{opacity:1;transform:scale(1.18)}71%,100%{opacity:1;transform:scale(1)}}
.mp svg .c70x-as{animation:c70x-as 14s infinite ease-in-out;}@keyframes c70x-as{0%,70%{opacity:0;transform:scale(.3)}73%{opacity:1;transform:scale(1.18)}75%,100%{opacity:1;transform:scale(1)}}
.mp svg .c70x-eq{animation:c70x-eq 14s infinite ease-in-out;}@keyframes c70x-eq{0%,74%{opacity:0;transform:scale(.3)}77%{opacity:1;transform:scale(1.18)}79%,100%{opacity:1;transform:scale(1)}}
.mp svg .c70x-n{animation:c70x-n 14s infinite ease-in-out;}@keyframes c70x-n{0%,80%{opacity:0}83%,100%{opacity:1}}

/* 68 RLHF: 두 답 → 사람 선호(보상) → 같은 LLM 재훈련 */
.mp svg .c68x-A{animation:c68x-A 14s infinite ease-in-out;}@keyframes c68x-A{0%,12%{opacity:0;transform:scale(.3)}15%{opacity:1;transform:scale(1.18)}17%,100%{opacity:1;transform:scale(1)}}
.mp svg .c68x-B{animation:c68x-B 14s infinite ease-in-out;}@keyframes c68x-B{0%,16%{opacity:0;transform:scale(.3)}19%{opacity:1;transform:scale(1.18)}21%,100%{opacity:1;transform:scale(1)}}
.mp svg .c68x-v0{animation:c68x-v0 14s infinite ease-in-out;}@keyframes c68x-v0{0%{transform:translate(0px,0px) scale(1);opacity:0}24%{transform:translate(0px,0px) scale(1);opacity:0}25%{transform:translate(0px,0px) scale(1);opacity:1}30%{transform:translate(-88px,59px) scale(0.6);opacity:1}31%{transform:translate(-88px,59px) scale(0.6);opacity:0}100%{transform:translate(-88px,59px) scale(1);opacity:0}}
.mp svg .c68x-v1{animation:c68x-v1 14s infinite ease-in-out;}@keyframes c68x-v1{0%{transform:translate(0px,0px) scale(1);opacity:0}27%{transform:translate(0px,0px) scale(1);opacity:0}28%{transform:translate(0px,0px) scale(1);opacity:1}33%{transform:translate(-116px,59px) scale(0.6);opacity:1}34%{transform:translate(-116px,59px) scale(0.6);opacity:0}100%{transform:translate(-116px,59px) scale(1);opacity:0}}
.mp svg .c68x-v2{animation:c68x-v2 14s infinite ease-in-out;}@keyframes c68x-v2{0%{transform:translate(0px,0px) scale(1);opacity:0}30%{transform:translate(0px,0px) scale(1);opacity:0}31%{transform:translate(0px,0px) scale(1);opacity:1}36%{transform:translate(-144px,59px) scale(0.6);opacity:1}37%{transform:translate(-144px,59px) scale(0.6);opacity:0}100%{transform:translate(-144px,59px) scale(1);opacity:0}}
.mp svg .c68x-Bsel{animation:c68x-Bsel 14s infinite ease-in-out;}@keyframes c68x-Bsel{0%,37%{opacity:0}40%,100%{opacity:1}}
.mp svg .c68x-Adim{animation:c68x-Adim 14s infinite ease-in-out;}@keyframes c68x-Adim{0%,37%{opacity:0}40%,100%{opacity:1}}
.mp svg .c68x-pref{animation:c68x-pref 14s infinite ease-in-out;}@keyframes c68x-pref{0%,38%{opacity:0;transform:scale(.3)}41%{opacity:1;transform:scale(1.18)}43%,100%{opacity:1;transform:scale(1)}}
.mp svg .c68x-d0{animation:c68x-d0 14s infinite ease-in-out;}@keyframes c68x-d0{0%{transform:translate(140px,-56px) scale(1);opacity:0}44%{transform:translate(140px,-56px) scale(1);opacity:0}45%{transform:translate(140px,-56px) scale(1);opacity:1}51%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c68x-d1{animation:c68x-d1 14s infinite ease-in-out;}@keyframes c68x-d1{0%,52%{opacity:0;transform:scale(.3)}55%{opacity:1;transform:scale(1.18)}57%,100%{opacity:1;transform:scale(1)}}
.mp svg .c68x-d2{animation:c68x-d2 14s infinite ease-in-out;}@keyframes c68x-d2{0%,54%{opacity:0;transform:scale(.3)}57%{opacity:1;transform:scale(1.18)}59%,100%{opacity:1;transform:scale(1)}}
.mp svg .c68x-d3{animation:c68x-d3 14s infinite ease-in-out;}@keyframes c68x-d3{0%,56%{opacity:0;transform:scale(.3)}59%{opacity:1;transform:scale(1.18)}61%,100%{opacity:1;transform:scale(1)}}
.mp svg .c68x-d4{animation:c68x-d4 14s infinite ease-in-out;}@keyframes c68x-d4{0%,58%{opacity:0;transform:scale(.3)}61%{opacity:1;transform:scale(1.18)}63%,100%{opacity:1;transform:scale(1)}}
.mp svg .c68x-many{animation:c68x-many 14s infinite ease-in-out;}@keyframes c68x-many{0%,60%{opacity:0}63%,100%{opacity:1}}
.mp svg .c68x-w0{animation:c68x-w0 14s infinite ease-in-out;}@keyframes c68x-w0{0%,70%{opacity:1}73%,100%{opacity:0}}
.mp svg .c68x-w3{animation:c68x-w3 14s infinite ease-in-out;}@keyframes c68x-w3{0%,70%{opacity:0}73%,100%{opacity:1}}
.mp svg .c68x-glow{opacity:0;animation:c68x-glow 14s infinite}@keyframes c68x-glow{0%{opacity:0}66%{opacity:0}67.5%{opacity:1}74.5%{opacity:1}76%{opacity:0}100%{opacity:0}}
.mp svg .c68x-up{opacity:0;animation:c68x-up 14s infinite}@keyframes c68x-up{0%{opacity:0}66%{opacity:0}67.5%{opacity:1}78.5%{opacity:1}80%{opacity:0}100%{opacity:0}}
.mp svg .c68x-n{animation:c68x-n 14s infinite ease-in-out;}@keyframes c68x-n{0%,68%{opacity:0}71%,100%{opacity:1}}

/* 68 RLHF v2: 질문마다 다른 선호 */
.mp svg .c68x-A{animation:c68x-A 14s infinite ease-in-out;}@keyframes c68x-A{0%,12%{opacity:0;transform:scale(.3)}15%{opacity:1;transform:scale(1.18)}17%,100%{opacity:1;transform:scale(1)}}
.mp svg .c68x-B{animation:c68x-B 14s infinite ease-in-out;}@keyframes c68x-B{0%,16%{opacity:0;transform:scale(.3)}19%{opacity:1;transform:scale(1.18)}21%,100%{opacity:1;transform:scale(1)}}
.mp svg .c68x-v0{animation:c68x-v0 14s infinite ease-in-out;}@keyframes c68x-v0{0%{transform:translate(0px,0px) scale(1);opacity:0}24%{transform:translate(0px,0px) scale(1);opacity:0}25%{transform:translate(0px,0px) scale(1);opacity:1}30%{transform:translate(-88px,59px) scale(0.6);opacity:1}31%{transform:translate(-88px,59px) scale(0.6);opacity:0}100%{transform:translate(-88px,59px) scale(1);opacity:0}}
.mp svg .c68x-v1{animation:c68x-v1 14s infinite ease-in-out;}@keyframes c68x-v1{0%{transform:translate(0px,0px) scale(1);opacity:0}27%{transform:translate(0px,0px) scale(1);opacity:0}28%{transform:translate(0px,0px) scale(1);opacity:1}33%{transform:translate(-116px,59px) scale(0.6);opacity:1}34%{transform:translate(-116px,59px) scale(0.6);opacity:0}100%{transform:translate(-116px,59px) scale(1);opacity:0}}
.mp svg .c68x-v2{animation:c68x-v2 14s infinite ease-in-out;}@keyframes c68x-v2{0%{transform:translate(0px,0px) scale(1);opacity:0}30%{transform:translate(0px,0px) scale(1);opacity:0}31%{transform:translate(0px,0px) scale(1);opacity:1}36%{transform:translate(-144px,59px) scale(0.6);opacity:1}37%{transform:translate(-144px,59px) scale(0.6);opacity:0}100%{transform:translate(-144px,59px) scale(1);opacity:0}}
.mp svg .c68x-Bsel{animation:c68x-Bsel 14s infinite ease-in-out;}@keyframes c68x-Bsel{0%,37%{opacity:0}40%,100%{opacity:1}}
.mp svg .c68x-Adim{animation:c68x-Adim 14s infinite ease-in-out;}@keyframes c68x-Adim{0%,37%{opacity:0}40%,100%{opacity:1}}
.mp svg .c68x-pref{animation:c68x-pref 14s infinite ease-in-out;}@keyframes c68x-pref{0%,38%{opacity:0;transform:scale(.3)}41%{opacity:1;transform:scale(1.18)}43%,100%{opacity:1;transform:scale(1)}}
.mp svg .c68x-d0{animation:c68x-d0 14s infinite ease-in-out;}@keyframes c68x-d0{0%{transform:translate(150px,-56px) scale(1);opacity:0}44%{transform:translate(150px,-56px) scale(1);opacity:0}45%{transform:translate(150px,-56px) scale(1);opacity:1}51%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c68x-d1{animation:c68x-d1 14s infinite ease-in-out;}@keyframes c68x-d1{0%,52%{opacity:0;transform:scale(.3)}55%{opacity:1;transform:scale(1.18)}57%,100%{opacity:1;transform:scale(1)}}
.mp svg .c68x-d2{animation:c68x-d2 14s infinite ease-in-out;}@keyframes c68x-d2{0%,54%{opacity:0;transform:scale(.3)}57%{opacity:1;transform:scale(1.18)}59%,100%{opacity:1;transform:scale(1)}}
.mp svg .c68x-d3{animation:c68x-d3 14s infinite ease-in-out;}@keyframes c68x-d3{0%,56%{opacity:0;transform:scale(.3)}59%{opacity:1;transform:scale(1.18)}61%,100%{opacity:1;transform:scale(1)}}
.mp svg .c68x-d4{animation:c68x-d4 14s infinite ease-in-out;}@keyframes c68x-d4{0%,58%{opacity:0;transform:scale(.3)}61%{opacity:1;transform:scale(1.18)}63%,100%{opacity:1;transform:scale(1)}}
.mp svg .c68x-many{animation:c68x-many 14s infinite ease-in-out;}@keyframes c68x-many{0%,60%{opacity:0}63%,100%{opacity:1}}
.mp svg .c68x-w0{animation:c68x-w0 14s infinite ease-in-out;}@keyframes c68x-w0{0%,70%{opacity:1}73%,100%{opacity:0}}
.mp svg .c68x-w3{animation:c68x-w3 14s infinite ease-in-out;}@keyframes c68x-w3{0%,70%{opacity:0}73%,100%{opacity:1}}
.mp svg .c68x-glow{opacity:0;animation:c68x-glow 14s infinite}@keyframes c68x-glow{0%{opacity:0}66%{opacity:0}67.5%{opacity:1}74.5%{opacity:1}76%{opacity:0}100%{opacity:0}}
.mp svg .c68x-up{opacity:0;animation:c68x-up 14s infinite}@keyframes c68x-up{0%{opacity:0}66%{opacity:0}67.5%{opacity:1}78.5%{opacity:1}80%{opacity:0}100%{opacity:0}}
.mp svg .c68x-n{animation:c68x-n 14s infinite ease-in-out;}@keyframes c68x-n{0%,68%{opacity:0}71%,100%{opacity:1}}

/* 70 모델 증류 v2: 교사 가중치 고정, 학생만 학습 후 변화 */
.mp svg .c70x-in0{animation:c70x-in0 14s infinite ease-in-out;}@keyframes c70x-in0{0%{transform:translate(-10px,0px) scale(1);opacity:0}6%{transform:translate(-10px,0px) scale(1);opacity:0}7%{transform:translate(0px,0px) scale(1);opacity:1}11%{transform:translate(96px,0px) scale(0.6);opacity:1}12%{transform:translate(96px,0px) scale(0.6);opacity:0}100%{transform:translate(96px,0px) scale(1);opacity:0}}
.mp svg .c70x-in1{animation:c70x-in1 14s infinite ease-in-out;}@keyframes c70x-in1{0%{transform:translate(-10px,0px) scale(1);opacity:0}13%{transform:translate(-10px,0px) scale(1);opacity:0}14%{transform:translate(0px,0px) scale(1);opacity:1}18%{transform:translate(96px,0px) scale(0.6);opacity:1}19%{transform:translate(96px,0px) scale(0.6);opacity:0}100%{transform:translate(96px,0px) scale(1);opacity:0}}
.mp svg .c70x-in2{animation:c70x-in2 14s infinite ease-in-out;}@keyframes c70x-in2{0%{transform:translate(-10px,0px) scale(1);opacity:0}20%{transform:translate(-10px,0px) scale(1);opacity:0}21%{transform:translate(0px,0px) scale(1);opacity:1}25%{transform:translate(96px,0px) scale(0.6);opacity:1}26%{transform:translate(96px,0px) scale(0.6);opacity:0}100%{transform:translate(96px,0px) scale(1);opacity:0}}
.mp svg .c70x-row0{animation:c70x-row0 14s infinite ease-in-out;}@keyframes c70x-row0{0%{transform:translate(-20px,0px) scale(1);opacity:0}12%{transform:translate(-20px,0px) scale(1);opacity:0}14%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c70x-row1{animation:c70x-row1 14s infinite ease-in-out;}@keyframes c70x-row1{0%{transform:translate(-20px,0px) scale(1);opacity:0}19%{transform:translate(-20px,0px) scale(1);opacity:0}21%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c70x-row2{animation:c70x-row2 14s infinite ease-in-out;}@keyframes c70x-row2{0%{transform:translate(-20px,0px) scale(1);opacity:0}26%{transform:translate(-20px,0px) scale(1);opacity:0}28%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c70x-row3{animation:c70x-row3 14s infinite ease-in-out;}@keyframes c70x-row3{0%{transform:translate(-20px,0px) scale(1);opacity:0}29%{transform:translate(-20px,0px) scale(1);opacity:0}31%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c70x-row4{animation:c70x-row4 14s infinite ease-in-out;}@keyframes c70x-row4{0%{transform:translate(-20px,0px) scale(1);opacity:0}31%{transform:translate(-20px,0px) scale(1);opacity:0}33%{transform:translate(0px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c70x-tg{opacity:0;animation:c70x-tg 14s infinite}@keyframes c70x-tg{0%{opacity:0}10%{opacity:0}11.5%{opacity:1}11.5%{opacity:1}13%{opacity:0}17%{opacity:0}18.5%{opacity:1}18.5%{opacity:1}20%{opacity:0}24%{opacity:0}25.5%{opacity:1}25.5%{opacity:1}27%{opacity:0}100%{opacity:0}}
.mp svg .c70x-many{animation:c70x-many 14s infinite ease-in-out;}@keyframes c70x-many{0%,34%{opacity:0}37%,100%{opacity:1}}
.mp svg .c70x-fd0{animation:c70x-fd0 14s infinite ease-in-out;}@keyframes c70x-fd0{0%{transform:translate(0px,0px) scale(1);opacity:0}40%{transform:translate(0px,0px) scale(1);opacity:0}41%{transform:translate(0px,0px) scale(1);opacity:1}45%{transform:translate(120px,24px) scale(0.5);opacity:1}46%{transform:translate(120px,24px) scale(0.5);opacity:0}100%{transform:translate(120px,24px) scale(1);opacity:0}}
.mp svg .c70x-fd1{animation:c70x-fd1 14s infinite ease-in-out;}@keyframes c70x-fd1{0%{transform:translate(0px,0px) scale(1);opacity:0}45%{transform:translate(0px,0px) scale(1);opacity:0}46%{transform:translate(0px,0px) scale(1);opacity:1}50%{transform:translate(120px,24px) scale(0.5);opacity:1}51%{transform:translate(120px,24px) scale(0.5);opacity:0}100%{transform:translate(120px,24px) scale(1);opacity:0}}
.mp svg .c70x-fd2{animation:c70x-fd2 14s infinite ease-in-out;}@keyframes c70x-fd2{0%{transform:translate(0px,0px) scale(1);opacity:0}50%{transform:translate(0px,0px) scale(1);opacity:0}51%{transform:translate(0px,0px) scale(1);opacity:1}55%{transform:translate(120px,24px) scale(0.5);opacity:1}56%{transform:translate(120px,24px) scale(0.5);opacity:0}100%{transform:translate(120px,24px) scale(1);opacity:0}}
.mp svg .c70x-sg{opacity:0;animation:c70x-sg 14s infinite}@keyframes c70x-sg{0%{opacity:0}56%{opacity:0}57.5%{opacity:1}60.5%{opacity:1}62%{opacity:0}100%{opacity:0}}
.mp svg .c70x-s0{animation:c70x-s0 14s infinite ease-in-out;}@keyframes c70x-s0{0%,57%{opacity:1}60%,100%{opacity:0}}
.mp svg .c70x-s1{animation:c70x-s1 14s infinite ease-in-out;}@keyframes c70x-s1{0%,57%{opacity:0}60%,100%{opacity:1}}
.mp svg .c70x-up{animation:none}
.mp svg .c70x-lr{animation:c70x-lr 14s infinite ease-in-out;}@keyframes c70x-lr{0%,38%{opacity:0}41%,100%{opacity:1}}
.mp svg .c70x-wu{animation:c70x-wu 14s infinite ease-in-out;}@keyframes c70x-wu{0%,58%{opacity:0}61%,100%{opacity:1}}
.mp svg .c70x-q{animation:c70x-q 14s infinite ease-in-out;}@keyframes c70x-q{0%,62%{opacity:0}65%,100%{opacity:1}}
.mp svg .c70x-at{animation:c70x-at 14s infinite ease-in-out;}@keyframes c70x-at{0%,66%{opacity:0;transform:scale(.3)}69%{opacity:1;transform:scale(1.18)}71%,100%{opacity:1;transform:scale(1)}}
.mp svg .c70x-as{animation:c70x-as 14s infinite ease-in-out;}@keyframes c70x-as{0%,70%{opacity:0;transform:scale(.3)}73%{opacity:1;transform:scale(1.18)}75%,100%{opacity:1;transform:scale(1)}}
.mp svg .c70x-eq{animation:c70x-eq 14s infinite ease-in-out;}@keyframes c70x-eq{0%,74%{opacity:0;transform:scale(.3)}77%{opacity:1;transform:scale(1.18)}79%,100%{opacity:1;transform:scale(1)}}
.mp svg .c70x-n{animation:c70x-n 14s infinite ease-in-out;}@keyframes c70x-n{0%,80%{opacity:0}83%,100%{opacity:1}}

/* 67 강화학습: 막대 세우기·길찾기·벽돌깨기 */
.mp svg .c67x-cart{animation:c67x-cart 14s infinite ease-in-out;}@keyframes c67x-cart{0%{transform:translate(0px,0px) scale(1);opacity:1}20%{transform:translate(-16px,0px) scale(1);opacity:1}40%{transform:translate(12px,0px) scale(1);opacity:1}60%{transform:translate(-8px,0px) scale(1);opacity:1}80%{transform:translate(6px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c67x-pole{animation:c67x-pole 14s infinite ease-in-out;transform-origin:center bottom}@keyframes c67x-pole{0%{transform:rotate(0deg)}10%{transform:rotate(-14deg)}20%{transform:rotate(4deg)}30%{transform:rotate(14deg)}40%{transform:rotate(-4deg)}50%{transform:rotate(-10deg)}60%{transform:rotate(2deg)}70%{transform:rotate(8deg)}80%{transform:rotate(-2deg)}100%{transform:rotate(0deg)}}
.mp svg .c67x-p1{opacity:0;animation:c67x-p1 14s infinite}@keyframes c67x-p1{0%{opacity:0}18%{opacity:0}19.5%{opacity:1}22.5%{opacity:1}24%{opacity:0}38%{opacity:0}39.5%{opacity:1}42.5%{opacity:1}44%{opacity:0}58%{opacity:0}59.5%{opacity:1}62.5%{opacity:1}64%{opacity:0}78%{opacity:0}79.5%{opacity:1}82.5%{opacity:1}84%{opacity:0}100%{opacity:0}}
.mp svg .c67x-ag{animation:c67x-ag 14s infinite linear;}@keyframes c67x-ag{0%,3%{transform:translate(0px,0px) scale(1);opacity:1}9%{transform:translate(24px,0px) scale(1);opacity:1}13%{transform:translate(24px,8.399999999999999px) scale(1);opacity:1}16%,22%{transform:translate(24px,0px) scale(1);opacity:1}24%{transform:translate(24px,0px) scale(1);opacity:0}27%{transform:translate(0px,0px) scale(1);opacity:0}30%{transform:translate(0px,0px) scale(1);opacity:1}36%{transform:translate(0px,24px) scale(1);opacity:1}42%{transform:translate(0px,48px) scale(1);opacity:1}48%{transform:translate(24px,48px) scale(1);opacity:1}54%{transform:translate(48px,48px) scale(1);opacity:1}60%{transform:translate(72px,48px) scale(1);opacity:1}66%,92%{transform:translate(72px,72px) scale(1);opacity:1}95%{transform:translate(72px,72px) scale(1);opacity:0}100%{transform:translate(0px,0px) scale(1);opacity:0}}
.mp svg .c67x-x{animation:c67x-x 14s infinite ease-in-out;}@keyframes c67x-x{0%,13%{opacity:0}14%,22%{opacity:1}23%,100%{opacity:0}}
.mp svg .c67x-e1{animation:c67x-e1 14s infinite ease-in-out;}@keyframes c67x-e1{0%,2%{opacity:0}3%,24%{opacity:1}25%,100%{opacity:0}}
.mp svg .c67x-e2{animation:c67x-e2 14s infinite ease-in-out;}@keyframes c67x-e2{0%,30%{opacity:0}31%,92%{opacity:1}93%,100%{opacity:0}}
.mp svg .c67x-tr{animation:c67x-tr 14s infinite ease-in-out;}@keyframes c67x-tr{0%,30%{opacity:0}34%,92%{opacity:.8}95%,100%{opacity:0}}
.mp svg .c67x-ball{animation:c67x-ball 14s infinite linear;}@keyframes c67x-ball{0%{transform:translate(0px,0px) scale(1);opacity:1}15%{transform:translate(-30px,-72px) scale(1);opacity:1}32%{transform:translate(14px,0px) scale(1);opacity:1}47%{transform:translate(36px,-72px) scale(1);opacity:1}62%{transform:translate(-12px,0px) scale(1);opacity:1}80%{transform:translate(4px,-40px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c67x-pad{animation:c67x-pad 14s infinite ease-in-out;}@keyframes c67x-pad{0%{transform:translate(0px,0px) scale(1);opacity:1}32%{transform:translate(14px,0px) scale(1);opacity:1}62%{transform:translate(-12px,0px) scale(1);opacity:1}100%{transform:translate(0px,0px) scale(1);opacity:1}}
.mp svg .c67x-b0{animation:c67x-b0 14s infinite ease-in-out;}@keyframes c67x-b0{0%,15%{opacity:1}17%,98%{opacity:0}100%{opacity:1}}
.mp svg .c67x-b1{animation:c67x-b1 14s infinite ease-in-out;}@keyframes c67x-b1{0%,47%{opacity:1}49%,98%{opacity:0}100%{opacity:1}}
.mp svg .c67x-s0{animation:c67x-s0 14s infinite ease-in-out;}@keyframes c67x-s0{0%,15%{opacity:0}16%,26%{opacity:1}27%,100%{opacity:0}}
.mp svg .c67x-s1{animation:c67x-s1 14s infinite ease-in-out;}@keyframes c67x-s1{0%,47%{opacity:0}48%,58%{opacity:1}59%,100%{opacity:0}}
.mp svg .c67x-l0{animation:c67x-l0 14s infinite ease-in-out;}@keyframes c67x-l0{0%,20%{opacity:0}23%,100%{opacity:1}}
.mp svg .c67x-l1{animation:c67x-l1 14s infinite ease-in-out;}@keyframes c67x-l1{0%,40%{opacity:0}43%,100%{opacity:1}}
.mp svg .c67x-l2{animation:c67x-l2 14s infinite ease-in-out;}@keyframes c67x-l2{0%,60%{opacity:0}63%,100%{opacity:1}}

/* 87 신경망·파라미터·가중치행렬 */
.mp svg .c87-e0{animation:c87-e0 14s infinite ease-in-out;}@keyframes c87-e0{0%,8%{opacity:0}9%,16%{opacity:1}17%,100%{opacity:0}}
.mp svg .c87-l0{animation:c87-l0 14s infinite ease-in-out;}@keyframes c87-l0{0%,8%{opacity:0}9%,16%{opacity:1}17%,100%{opacity:0}}
.mp svg .c87-m0{animation:c87-m0 14s infinite ease-in-out;}@keyframes c87-m0{0%,8%{opacity:0}9%,16%{opacity:1}17%,100%{opacity:0}}
.mp svg .c87-e1{animation:c87-e1 14s infinite ease-in-out;}@keyframes c87-e1{0%,18%{opacity:0}19%,26%{opacity:1}27%,100%{opacity:0}}
.mp svg .c87-l1{animation:c87-l1 14s infinite ease-in-out;}@keyframes c87-l1{0%,18%{opacity:0}19%,26%{opacity:1}27%,100%{opacity:0}}
.mp svg .c87-m1{animation:c87-m1 14s infinite ease-in-out;}@keyframes c87-m1{0%,18%{opacity:0}19%,26%{opacity:1}27%,100%{opacity:0}}
.mp svg .c87-e2{animation:c87-e2 14s infinite ease-in-out;}@keyframes c87-e2{0%,28%{opacity:0}29%,36%{opacity:1}37%,100%{opacity:0}}
.mp svg .c87-l2{animation:c87-l2 14s infinite ease-in-out;}@keyframes c87-l2{0%,28%{opacity:0}29%,36%{opacity:1}37%,100%{opacity:0}}
.mp svg .c87-m2{animation:c87-m2 14s infinite ease-in-out;}@keyframes c87-m2{0%,28%{opacity:0}29%,36%{opacity:1}37%,100%{opacity:0}}
.mp svg .c87-e3{animation:c87-e3 14s infinite ease-in-out;}@keyframes c87-e3{0%,38%{opacity:0}39%,46%{opacity:1}47%,100%{opacity:0}}
.mp svg .c87-l3{animation:c87-l3 14s infinite ease-in-out;}@keyframes c87-l3{0%,38%{opacity:0}39%,46%{opacity:1}47%,100%{opacity:0}}
.mp svg .c87-m3{animation:c87-m3 14s infinite ease-in-out;}@keyframes c87-m3{0%,38%{opacity:0}39%,46%{opacity:1}47%,100%{opacity:0}}
.mp svg .c87-e4{animation:c87-e4 14s infinite ease-in-out;}@keyframes c87-e4{0%,48%{opacity:0}49%,56%{opacity:1}57%,100%{opacity:0}}
.mp svg .c87-l4{animation:c87-l4 14s infinite ease-in-out;}@keyframes c87-l4{0%,48%{opacity:0}49%,56%{opacity:1}57%,100%{opacity:0}}
.mp svg .c87-m4{animation:c87-m4 14s infinite ease-in-out;}@keyframes c87-m4{0%,48%{opacity:0}49%,56%{opacity:1}57%,100%{opacity:0}}
.mp svg .c87-e5{animation:c87-e5 14s infinite ease-in-out;}@keyframes c87-e5{0%,58%{opacity:0}59%,66%{opacity:1}67%,100%{opacity:0}}
.mp svg .c87-l5{animation:c87-l5 14s infinite ease-in-out;}@keyframes c87-l5{0%,58%{opacity:0}59%,66%{opacity:1}67%,100%{opacity:0}}
.mp svg .c87-m5{animation:c87-m5 14s infinite ease-in-out;}@keyframes c87-m5{0%,58%{opacity:0}59%,66%{opacity:1}67%,100%{opacity:0}}
.mp svg .c87-eq{animation:c87-eq 14s infinite ease-in-out;}@keyframes c87-eq{0%,70%{opacity:0;transform:scale(.3)}73%{opacity:1;transform:scale(1.18)}75%,100%{opacity:1;transform:scale(1)}}
.mp svg .c87-n1{animation:c87-n1 14s infinite ease-in-out;}@keyframes c87-n1{0%,72%{opacity:0}75%,100%{opacity:1}}
.mp svg .c87-n2{animation:c87-n2 14s infinite ease-in-out;}@keyframes c87-n2{0%,78%{opacity:0}81%,100%{opacity:1}}
.mp svg .c87-n3{animation:c87-n3 14s infinite ease-in-out;}@keyframes c87-n3{0%,82%{opacity:0}85%,100%{opacity:1}}

/* 40 AI 에이전트: 목표 → 생각·행동·관찰 반복 → 할 일 완료 */
.mp svg .c40x-dot{animation:c40x-dot 14s infinite ease-in-out;}@keyframes c40x-dot{0%{transform:translate(0px,0px) scale(1);opacity:0}4%{transform:translate(0px,0px) scale(1);opacity:1}6%{transform:translate(0px,0px) scale(1);opacity:1}10%{transform:translate(50px,104px) scale(1);opacity:1}15%{transform:translate(50px,104px) scale(1);opacity:1}18%{transform:translate(-50px,104px) scale(1);opacity:1}22%{transform:translate(0px,0px) scale(1);opacity:1}26%{transform:translate(50px,104px) scale(1);opacity:1}31%{transform:translate(50px,104px) scale(1);opacity:1}34%{transform:translate(-50px,104px) scale(1);opacity:1}38%{transform:translate(0px,0px) scale(1);opacity:1}42%{transform:translate(50px,104px) scale(1);opacity:1}47%{transform:translate(50px,104px) scale(1);opacity:1}50%{transform:translate(-50px,104px) scale(1);opacity:1}54%{transform:translate(0px,0px) scale(1);opacity:1}58%{transform:translate(50px,104px) scale(1);opacity:1}63%{transform:translate(50px,104px) scale(1);opacity:1}66%{transform:translate(-50px,104px) scale(1);opacity:1}72%{transform:translate(0px,0px) scale(1);opacity:1}76%{transform:translate(50px,104px) scale(1);opacity:1}81%{transform:translate(50px,104px) scale(1);opacity:1}84%{transform:translate(-50px,104px) scale(1);opacity:1}86%{transform:translate(0px,0px) scale(1);opacity:1}90%,100%{transform:translate(0px,0px) scale(1);opacity:0}}
.mp svg .c40x-th0{animation:c40x-th0 14s infinite ease-in-out;}@keyframes c40x-th0{0%,10%{opacity:0}11%,16%{opacity:1}17%,100%{opacity:0}}
.mp svg .c40x-c0{animation:c40x-c0 14s infinite ease-in-out;}@keyframes c40x-c0{0%,10%{opacity:0}11%,16%{opacity:1}17%,100%{opacity:0}}
.mp svg .c40x-k0{animation:c40x-k0 14s infinite ease-in-out;}@keyframes c40x-k0{0%,19%{opacity:0}20%,100%{opacity:1}}
.mp svg .c40x-th1{animation:c40x-th1 14s infinite ease-in-out;}@keyframes c40x-th1{0%,26%{opacity:0}27%,32%{opacity:1}33%,100%{opacity:0}}
.mp svg .c40x-c1{animation:c40x-c1 14s infinite ease-in-out;}@keyframes c40x-c1{0%,26%{opacity:0}27%,32%{opacity:1}33%,100%{opacity:0}}
.mp svg .c40x-k1{animation:c40x-k1 14s infinite ease-in-out;}@keyframes c40x-k1{0%,35%{opacity:0}36%,100%{opacity:1}}
.mp svg .c40x-k2{animation:c40x-k2 14s infinite ease-in-out;}@keyframes c40x-k2{0%,51%{opacity:0}52%,100%{opacity:1}}
.mp svg .c40x-th2{animation:c40x-th2 14s infinite ease-in-out;}@keyframes c40x-th2{0%,58%{opacity:0}59%,64%{opacity:1}65%,100%{opacity:0}}
.mp svg .c40x-c2{animation:c40x-c2 14s infinite ease-in-out;}@keyframes c40x-c2{0%,58%{opacity:0}59%,64%{opacity:1}65%,100%{opacity:0}}
.mp svg .c40x-k3{animation:c40x-k3 14s infinite ease-in-out;}@keyframes c40x-k3{0%,69%{opacity:0}70%,100%{opacity:1}}
.mp svg .c40x-th3{animation:c40x-th3 14s infinite ease-in-out;}@keyframes c40x-th3{0%,76%{opacity:0}77%,82%{opacity:1}83%,100%{opacity:0}}
.mp svg .c40x-c3{animation:c40x-c3 14s infinite ease-in-out;}@keyframes c40x-c3{0%,76%{opacity:0}77%,82%{opacity:1}83%,100%{opacity:0}}
.mp svg .c40x-k4{animation:c40x-k4 14s infinite ease-in-out;}@keyframes c40x-k4{0%,85%{opacity:0}86%,100%{opacity:1}}
.mp svg .c40x-o0{animation:c40x-o0 14s infinite ease-in-out;}@keyframes c40x-o0{0%,17%{opacity:0}18%,32%{opacity:1}33%,100%{opacity:0}}
.mp svg .c40x-o1{animation:c40x-o1 14s infinite ease-in-out;}@keyframes c40x-o1{0%,33%{opacity:0}34%,48%{opacity:1}49%,100%{opacity:0}}
.mp svg .c40x-o2{animation:c40x-o2 14s infinite ease-in-out;}@keyframes c40x-o2{0%,49%{opacity:0}50%,64%{opacity:1}65%,100%{opacity:0}}
.mp svg .c40x-o3{animation:c40x-o3 14s infinite ease-in-out;}@keyframes c40x-o3{0%,65%{opacity:0}66%,82%{opacity:1}83%,100%{opacity:0}}
.mp svg .c40x-o4{animation:c40x-o4 14s infinite ease-in-out;}@keyframes c40x-o4{0%,83%{opacity:0}84%,92%{opacity:1}93%,100%{opacity:0}}
.mp svg .c40x-ok{animation:c40x-ok 14s infinite ease-in-out;}@keyframes c40x-ok{0%,60%{opacity:0}61%,69%{opacity:1}70%,100%{opacity:0}}
.mp svg .c40x-done{animation:c40x-done 14s infinite ease-in-out;}@keyframes c40x-done{0%,88%{opacity:0}91%,100%{opacity:1}}
.mp svg .c40x-n{animation:c40x-n 14s infinite ease-in-out;}@keyframes c40x-n{0%,90%{opacity:0}93%,100%{opacity:1}}

/* 퀴즈 링크 */
.head-links{display:flex;gap:16px;align-items:center}.quiz-link{color:var(--green);font-size:13px;font-weight:700;text-decoration:none}.quiz-link:hover,.chapter-quiz:hover{text-decoration:underline}.chapter-quiz{float:right;color:var(--green);font-size:13px;font-weight:700;text-decoration:none}

/* 한 페이지 전체 용어 */
.all-terms .search{margin-top:28px}
.chapter-nav{position:sticky;top:0;z-index:5;display:flex;gap:8px;overflow-x:auto;padding:14px 0;margin:18px 0 0;background:var(--paper);border-bottom:1px solid var(--line);scrollbar-width:thin}
.chapter-nav .chip{flex:none;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fffef9;border-radius:22px;padding:8px 14px;font-size:13px;color:var(--ink);text-decoration:none;white-space:nowrap}
.chapter-nav .chip:hover,.chapter-nav .chip:focus-visible{border-color:var(--green);color:var(--green);outline:none}
.chapter-nav .chip-n{font-size:11px;color:var(--muted);background:#eef0e8;border-radius:10px;padding:1px 7px}
.chapter-section{margin-top:56px;scroll-margin-top:76px}
.chapter-section .chapter-heading{margin-bottom:22px}
.chapter-section .chapter-heading h2{font-size:28px;letter-spacing:-1px;margin:10px 0 6px;outline:none}
.chapter-section .chapter-heading p{margin:0}

/* 88 프로그래밍 언어 */
.mp svg .c88-l0{animation:c88-l0 14s infinite cubic-bezier(.3,1.3,.5,1);}@keyframes c88-l0{0%,3%{opacity:0;transform:translateX(-12px)}5%,100%{opacity:1;transform:none}}
.mp svg .c88-h0{animation:c88-h0 14s infinite ease-in-out;}@keyframes c88-h0{0%,3%{opacity:0}4%,17%{opacity:1}18%,100%{opacity:0}}
.mp svg .c88-l1{animation:c88-l1 14s infinite cubic-bezier(.3,1.3,.5,1);}@keyframes c88-l1{0%,18%{opacity:0;transform:translateX(-12px)}20%,100%{opacity:1;transform:none}}
.mp svg .c88-h1{animation:c88-h1 14s infinite ease-in-out;}@keyframes c88-h1{0%,18%{opacity:0}19%,32%{opacity:1}33%,100%{opacity:0}}
.mp svg .c88-l2{animation:c88-l2 14s infinite cubic-bezier(.3,1.3,.5,1);}@keyframes c88-l2{0%,33%{opacity:0;transform:translateX(-12px)}35%,100%{opacity:1;transform:none}}
.mp svg .c88-h2{animation:c88-h2 14s infinite ease-in-out;}@keyframes c88-h2{0%,33%{opacity:0}34%,47%{opacity:1}48%,100%{opacity:0}}
.mp svg .c88-l3{animation:c88-l3 14s infinite cubic-bezier(.3,1.3,.5,1);}@keyframes c88-l3{0%,48%{opacity:0;transform:translateX(-12px)}50%,100%{opacity:1;transform:none}}
.mp svg .c88-h3{animation:c88-h3 14s infinite ease-in-out;}@keyframes c88-h3{0%,48%{opacity:0}49%,62%{opacity:1}63%,100%{opacity:0}}
.mp svg .c88-l4{animation:c88-l4 14s infinite cubic-bezier(.3,1.3,.5,1);}@keyframes c88-l4{0%,63%{opacity:0;transform:translateX(-12px)}65%,100%{opacity:1;transform:none}}
.mp svg .c88-h4{animation:c88-h4 14s infinite ease-in-out;}@keyframes c88-h4{0%,63%{opacity:0}64%,77%{opacity:1}78%,100%{opacity:0}}
.mp svg .c88-pan{animation:c88-pan 14s infinite cubic-bezier(.3,1.3,.5,1);}@keyframes c88-pan{0%,0%{opacity:0;transform:scale(.6)}2%,100%{opacity:1;transform:none}}
.mp svg .c88-r0{animation:c88-r0 14s infinite ease-in-out;}@keyframes c88-r0{0%,3%{opacity:0}4%,17%{opacity:1}18%,100%{opacity:0}}
.mp svg .c88-v{animation:c88-v 14s infinite cubic-bezier(.5,0,.4,1.4);}@keyframes c88-v{0%,6%{opacity:0;transform:translateY(-34px)}7%{opacity:1}10%,100%{opacity:1;transform:none}}
.mp svg .c88-r1{animation:c88-r1 14s infinite ease-in-out;}@keyframes c88-r1{0%,18%{opacity:0}19%,32%{opacity:1}33%,100%{opacity:0}}
.mp svg .c88-fo{animation:c88-fo 14s infinite cubic-bezier(.3,1.3,.5,1);}@keyframes c88-fo{0%,25%{opacity:0;transform:scale(.6)}27%,100%{opacity:1;transform:none}}
.mp svg .c88-fb{animation:c88-fb 14s infinite ease-in-out;}@keyframes c88-fb{0%,22%{transform:scale(1)}23%{transform:scale(.9)}24.5%,100%{transform:scale(1)}}
.mp svg .c88-r2{animation:c88-r2 14s infinite ease-in-out;}@keyframes c88-r2{0%,33%{opacity:0}34%,47%{opacity:1}48%,100%{opacity:0}}
.mp svg .c88-cy{animation:c88-cy 14s infinite cubic-bezier(.3,1.3,.5,1);}@keyframes c88-cy{0%,39%{opacity:0;transform:scale(.6)}41%,100%{opacity:1;transform:none}}
.mp svg .c88-cn{animation:c88-cn 14s infinite ease-in-out;}@keyframes c88-cn{0%,100%{opacity:.45}}
.mp svg .c88-r3{animation:c88-r3 14s infinite ease-in-out;}@keyframes c88-r3{0%,48%{opacity:0}49%,62%{opacity:1}63%,100%{opacity:0}}
.mp svg .c88-k0{animation:c88-k0 14s infinite cubic-bezier(.3,1.3,.5,1);}@keyframes c88-k0{0%,51%{opacity:0;transform:scale(.6)}53%,100%{opacity:1;transform:none}}
.mp svg .c88-k1{animation:c88-k1 14s infinite cubic-bezier(.3,1.3,.5,1);}@keyframes c88-k1{0%,54%{opacity:0;transform:scale(.6)}56%,100%{opacity:1;transform:none}}
.mp svg .c88-k2{animation:c88-k2 14s infinite cubic-bezier(.3,1.3,.5,1);}@keyframes c88-k2{0%,57%{opacity:0;transform:scale(.6)}59%,100%{opacity:1;transform:none}}
.mp svg .c88-r4{animation:c88-r4 14s infinite ease-in-out;}@keyframes c88-r4{0%,63%{opacity:0}64%,77%{opacity:1}78%,100%{opacity:0}}
.mp svg .c88-lb{animation:c88-lb 14s infinite ease-in-out;}@keyframes c88-lb{0%,64%{opacity:0;transform:translateY(-22px)}66%{opacity:1}69%,100%{opacity:1;transform:none}}
.mp svg .c88-ok{animation:c88-ok 14s infinite cubic-bezier(.3,1.3,.5,1);}@keyframes c88-ok{0%,71%{opacity:0;transform:scale(.6)}73%,100%{opacity:1;transform:none}}
.mp svg .c88-fin{animation:c88-fin 14s infinite ease-in-out;}@keyframes c88-fin{0%,78%{opacity:0}79%,100%{opacity:1}101%,100%{opacity:0}}
.mp svg .c88-lang{animation:c88-lang 14s infinite cubic-bezier(.3,1.3,.5,1);}@keyframes c88-lang{0%,80%{opacity:0;transform:translateY(6px)}82%,100%{opacity:1;transform:none}}