.motionpath-article{--mp-bg:#050b14;--mp-panel:#0a1725;--mp-panel-2:#0e2234;--mp-line:#294861;--mp-text:#eaf4fb;--mp-muted:#9bb0c2;--mp-lime:#c9ff36;--mp-cyan:#35def2;--mp-violet:#a876ff;--mp-danger:#ff927d;color:var(--mp-text);overflow-x:clip}.motionpath-article .article-featured,.motion-poster img{display:block;width:100%;height:auto}.motionpath-article .article-featured{max-width:1200px;margin:clamp(1.5rem,4vw,3rem) auto;border-radius:24px;box-shadow:0 24px 80px rgba(0,0,0,.42)}.motionpath-article .article-content h2,.motionpath-article .article-content h3{scroll-margin-top:110px}.motionpath-article .article-content h2{margin-top:3.2rem}.motionpath-article code{color:#dcff7d}.motionpath-article button,.motionpath-article select,.motionpath-article input{font:inherit}.motionpath-article button:focus-visible,.motionpath-article a:focus-visible,.motionpath-article select:focus-visible,.motionpath-article input:focus-visible,.motionpath-article summary:focus-visible{outline:3px solid var(--mp-cyan);outline-offset:3px}.motionpath-article svg{display:block;max-width:100%;height:auto}.motionpath-article .code-block{margin:1.35rem 0;border:1px solid var(--mp-line);border-radius:18px;background:#030810;overflow:auto}.motionpath-article pre{min-width:max-content;margin:0;padding:1.2rem;color:#e6f2fb;font-size:.9rem;line-height:1.7}.motion-toc{margin:2rem 0;padding:1.35rem;border:1px solid var(--mp-line);border-radius:20px;background:rgba(10,23,37,.8)}.motion-toc strong{display:block;margin-bottom:.7rem}.motion-toc ol{columns:2;gap:2rem;margin:0;padding-left:1.25rem}.motion-toc li{break-inside:avoid;margin:.35rem 0}.motion-toc a{color:var(--mp-text)}
.motion-poster{margin:2rem 0;padding:10px;border-radius:24px;background:linear-gradient(135deg,rgba(201,255,54,.3),rgba(53,222,242,.08),rgba(168,118,255,.27))}.motion-poster img{border-radius:17px}.motion-poster figcaption{padding:.8rem .75rem .3rem;color:var(--mp-muted);font-size:.92rem}.mental-model,.final-model,.responsive-model,.architecture-map,.checkpoint-model{display:flex;align-items:center;justify-content:center;gap:clamp(.55rem,2vw,1.2rem);flex-wrap:wrap;margin:1.5rem 0;padding:1.4rem;border:1px solid var(--mp-line);border-radius:20px;background:linear-gradient(135deg,#07131f,#0c1f30)}.mental-model span,.mental-model strong,.final-model span,.final-model strong,.responsive-model span,.architecture-map span,.checkpoint-model span{padding:.8rem 1rem;border:1px solid rgba(53,222,242,.35);border-radius:12px;background:#07101a;text-align:center}.mental-model small,.final-model small,.responsive-model small{display:block;margin-top:.3rem;color:var(--mp-muted);font-size:.67rem;letter-spacing:.08em}.mental-model strong,.final-model strong{background:var(--mp-lime);color:#061018}.mental-model b,.final-model i,.responsive-model i,.architecture-map i{color:var(--mp-cyan);font-size:1.35rem}.compare-grid,.system-compare{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.5rem 0}.compare-grid article,.system-compare article{padding:1.2rem;border:1px solid var(--mp-line);border-radius:17px;background:var(--mp-panel)}.compare-grid b,.system-compare b{color:var(--mp-lime);font-size:1.05rem}.compare-grid i{position:relative;display:block;height:70px;margin:.8rem 0}.draw-line,.move-line,.both-line{border-bottom:4px dashed #416482}.draw-line:after,.both-line:after{content:"";position:absolute;bottom:-4px;left:0;width:72%;border-bottom:4px solid var(--mp-cyan);filter:drop-shadow(0 0 6px var(--mp-cyan))}.move-line em,.both-line em{position:absolute;right:18%;bottom:-15px;color:var(--mp-lime);font-style:normal;font-size:1.8rem}.both-line:after{width:82%;border-color:var(--mp-violet)}
.route-demo,.selector-demo,.ease-demo,.workflow-demo,.convoy-demo,.api-demo,.scroll-route,.motion-lab,.journey-project{position:relative;margin:1.5rem 0;padding:clamp(1rem,3vw,1.6rem);border:1px solid var(--mp-line);border-radius:22px;background:radial-gradient(circle at 50% 25%,rgba(53,222,242,.08),transparent 45%),var(--mp-panel);overflow:hidden}.route-demo svg,.selector-demo svg,.ease-demo svg,.workflow-demo svg,.convoy-demo svg,.api-demo svg,.scroll-route svg,.motion-lab>svg,.journey-project>svg{width:100%;overflow:visible}.route-demo path,.selector-demo path,.ease-demo path,.workflow-demo path,.convoy-demo path,.api-demo path,.scroll-route path,.motion-lab>svg path,.journey-project>svg path{fill:none;stroke:#4b7291;stroke-width:4;stroke-linecap:round;stroke-dasharray:9 8}.route-demo circle:not([data-traveler]){fill:var(--mp-bg);stroke:var(--mp-cyan);stroke-width:4}.route-demo [data-traveler],.selector-demo [data-traveler],.ease-demo [data-traveler],.workflow-demo [data-traveler],.scroll-route [data-traveler],.motion-lab [data-lab-traveler],.journey-project [data-traveler]{fill:var(--mp-lime);stroke:#fff;stroke-width:2;filter:drop-shadow(0 0 9px rgba(201,255,54,.8));transform-box:fill-box;transform-origin:center}.compact{padding-bottom:1rem}.demo-controls,.choice-row{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1rem}.demo-controls button,.choice-row button,.workflow-demo button,.api-demo button{min-height:44px;padding:.65rem 1rem;border:1px solid #47708d;border-radius:10px;background:#0b2031;color:var(--mp-text);cursor:pointer}.demo-controls button:hover,.choice-row button:hover,.choice-row button.is-active,.workflow-demo button:hover,.api-demo button:hover{border-color:var(--mp-lime);background:rgba(201,255,54,.11);color:var(--mp-lime)}.choice-row small{display:block;font-size:.68rem}.selector-demo [data-path],.motion-lab [data-lab-path]{display:none}.selector-demo [data-path].is-active,.motion-lab [data-lab-path].is-active{display:block}.rotate-model,.origin-grid,.progress-model,.loop-model,.scrub-model{display:flex;align-items:center;justify-content:center;gap:1rem;margin:1.4rem 0;padding:1.3rem;border:1px solid var(--mp-line);border-radius:18px;background:#07131f}.rotate-model span{flex:1;text-align:center}.rotate-model b{display:block;margin-top:.7rem;color:var(--mp-lime);font-size:1.6rem;letter-spacing:.25em}.origin-grid span{position:relative;width:150px;height:100px;border:2px solid #4c708b;border-radius:11px}.origin-grid i{position:absolute;left:var(--x);top:var(--y);width:18px;height:18px;border-radius:50%;background:var(--mp-lime);box-shadow:0 0 12px var(--mp-lime);transform:translate(-50%,-50%)}.origin-grid b{position:absolute;right:8px;bottom:7px}.progress-model{position:relative;justify-content:space-between;padding-top:2.3rem}.progress-model i{position:absolute;top:1.2rem;left:5%;right:5%;height:6px;border-radius:10px;background:linear-gradient(90deg,var(--mp-cyan),var(--mp-lime),var(--mp-violet))}.loop-model i{color:var(--mp-lime);font-size:2rem}.checkpoint-model span{position:relative}.checkpoint-model span:not(:last-child):after{content:"→";position:absolute;right:-1.2rem;color:var(--mp-cyan)}.stage-row{display:grid;grid-template-columns:repeat(5,1fr);gap:.6rem}.stage-row span,.journey-stages span{padding:.65rem .3rem;border:1px solid var(--mp-line);border-radius:10px;text-align:center;font-size:.78rem;font-weight:800}.stage-row span.is-active,.journey-stages span.is-active{border-color:var(--mp-lime);background:rgba(201,255,54,.16);color:var(--mp-lime);box-shadow:0 0 18px rgba(201,255,54,.12)}
.scroll-route{min-height:360px}.scroll-route>p{text-align:center;color:var(--mp-lime);font-size:.8rem;font-weight:900;letter-spacing:.12em}.scroll-route text{fill:var(--mp-muted);font-size:17px;font-weight:800}.scrub-model{flex-direction:column}.scrub-model span{display:grid;grid-template-columns:155px minmax(100px,1fr) 45px;align-items:center;gap:.7rem;width:100%;font-size:.8rem;font-weight:800}.scrub-model i{height:7px;border-radius:10px;background:linear-gradient(90deg,var(--mp-cyan),var(--mp-violet))}.system-compare{grid-template-columns:1fr 1fr}.system-compare code{display:block;margin:1rem 0}.convoy-demo [data-traveler] circle{fill:#0e2132;stroke:var(--mp-lime);stroke-width:3}.convoy-demo [data-traveler] text{fill:#fff;font-size:13px;font-weight:900}.architecture-map{justify-content:space-between}.api-demo [data-request]{fill:var(--mp-lime);filter:drop-shadow(0 0 8px var(--mp-lime))}.api-demo [data-response]{fill:var(--mp-violet);filter:drop-shadow(0 0 8px var(--mp-violet))}
.motion-lab,.journey-project{padding:clamp(1rem,3vw,2rem);background:radial-gradient(circle at 50% 18%,rgba(168,118,255,.12),transparent 45%),#06111c}.motion-lab header,.journey-project header{text-align:center}.motion-lab header span,.journey-project header span,.next-preview>span,.motion-series-nav small{color:var(--mp-lime);font-size:.72rem;font-weight:900;letter-spacing:.12em}.motion-lab header h3,.journey-project header h3{margin:.4rem 0 1rem}.lab-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-top:1rem}.lab-controls fieldset,.lab-controls>label{min-width:0;margin:0;padding:.8rem;border:1px solid var(--mp-line);border-radius:12px;background:#081725}.lab-controls legend{float:none;width:auto;margin:0 0 .35rem;padding:0;color:var(--mp-muted);font-size:.72rem;text-transform:uppercase}.lab-controls fieldset label{display:inline-flex;align-items:center;gap:.3rem;margin-right:.65rem}.lab-controls>label{display:flex;flex-direction:column;gap:.4rem;color:var(--mp-muted);font-size:.72rem;text-transform:uppercase}.lab-controls select{width:100%;min-height:40px;border:1px solid #3a617d;border-radius:8px;background:#07111c;color:var(--mp-text)}.lab-status{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin:1.2rem 0}.lab-status div{padding:.85rem;border:1px solid var(--mp-line);border-radius:11px;background:#07131f}.lab-status dt{color:var(--mp-muted);font-size:.68rem;text-transform:uppercase}.lab-status dd{margin:.25rem 0 0;color:var(--mp-lime);font-family:monospace}.journey-stages{display:grid;grid-template-columns:repeat(6,1fr);gap:.55rem;margin:1rem 0}.responsive-model{justify-content:space-between}
.mistake-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;margin:1.5rem 0}.mistake-grid span{padding:.75rem;border:1px solid rgba(255,146,125,.25);border-radius:11px;background:rgba(255,146,125,.055)}.debug-list{columns:2;gap:2rem}.debug-list li{break-inside:avoid;margin:.5rem 0}.reference-wrap{overflow:auto}.reference-wrap table{width:100%;border-collapse:collapse}.reference-wrap th,.reference-wrap td{padding:.8rem;border:1px solid var(--mp-line);text-align:left}.reference-wrap th{color:var(--mp-lime);background:#0a1b29}.next-preview{margin:1.5rem 0;padding:1.5rem;border:1px solid rgba(168,118,255,.4);border-radius:20px;background:linear-gradient(135deg,rgba(168,118,255,.13),rgba(53,222,242,.05))}.next-preview h3{margin:.45rem 0}.motion-faq details{margin:.8rem 0;border:1px solid var(--mp-line);border-radius:14px;background:var(--mp-panel)}.motion-faq summary{padding:1rem 1.15rem;cursor:pointer;font-weight:800}.motion-faq details p{padding:0 1.15rem 1rem;color:var(--mp-muted)}.motion-series-nav{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:3rem 0}.motion-series-nav a,.motion-series-nav span{padding:1.2rem;border:1px solid var(--mp-line);border-radius:16px;color:var(--mp-text)}.motionpath-ready [data-traveler],.motionpath-ready [data-lab-traveler],.motionpath-ready [data-request],.motionpath-ready [data-response]{will-change:transform}
@media(max-width:991px){.compare-grid{grid-template-columns:1fr}.lab-controls{grid-template-columns:repeat(2,1fr)}.lab-status{grid-template-columns:repeat(2,1fr)}.journey-stages{grid-template-columns:repeat(3,1fr)}.architecture-map{justify-content:center}}
@media(max-width:767px){.motion-toc ol{columns:1}.stage-row{grid-template-columns:repeat(5,minmax(75px,1fr));overflow:auto}.checkpoint-model span:not(:last-child):after{display:none}.origin-grid{flex-direction:column}.motionpath-article .article-featured{border-radius:14px}.motion-poster{padding:6px;border-radius:16px}.motion-poster img{border-radius:11px}}
@media(max-width:575px){.system-compare,.mistake-grid,.motion-series-nav{grid-template-columns:1fr}.lab-controls,.lab-status{grid-template-columns:1fr}.journey-stages{grid-template-columns:repeat(2,1fr)}.scrub-model span{grid-template-columns:105px 1fr 32px}.mental-model,.final-model,.responsive-model,.architecture-map{flex-direction:column}.rotate-model{flex-direction:column}.route-demo,.selector-demo,.ease-demo,.workflow-demo,.convoy-demo,.api-demo,.scroll-route,.motion-lab,.journey-project{border-radius:15px}.motionpath-article pre{font-size:.78rem}.demo-controls button,.choice-row button{flex:1 1 calc(50% - .7rem)}}
@media(prefers-reduced-motion:reduce){.motionpath-article *{scroll-behavior:auto!important}.motionpath-article [data-traveler],.motionpath-article [data-lab-traveler],.motionpath-article [data-request],.motionpath-article [data-response]{filter:none}}