.mvc-container:where(.astro-n3em5mc7){max-width:1200px;margin:0 auto;padding:20px;font-family:system-ui,-apple-system,sans-serif}.mvc-container:where(.astro-n3em5mc7) h3:where(.astro-n3em5mc7){color:#1f2937;margin-bottom:10px}.mvc-container:where(.astro-n3em5mc7) p:where(.astro-n3em5mc7){color:#6b7280;margin-bottom:20px;line-height:1.6}.mvc-diagram:where(.astro-n3em5mc7){transform-origin:50%;background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;max-width:100%;height:auto;margin:0 auto 30px;padding:20px;transition:transform .3s;display:block;transform:scale(1)}.fb-fullscreen__overlay:where(.astro-n3em5mc7) .mvc-container:where(.astro-n3em5mc7){width:90vw;max-width:90vw}@media (width<=768px){.fb-fullscreen__overlay:where(.astro-n3em5mc7) .mvc-container:where(.astro-n3em5mc7){width:95vw;max-width:95vw}}@media (prefers-color-scheme:dark){.mvc-container:where(.astro-n3em5mc7) h3:where(.astro-n3em5mc7){color:#f9fafb}.mvc-container:where(.astro-n3em5mc7) p:where(.astro-n3em5mc7){color:#d1d5db}.step-explanation:where(.astro-n3em5mc7) h4:where(.astro-n3em5mc7),.benefits:where(.astro-n3em5mc7) h4:where(.astro-n3em5mc7){color:#f9fafb}.step-explanation:where(.astro-n3em5mc7) li:where(.astro-n3em5mc7),.benefits:where(.astro-n3em5mc7) li:where(.astro-n3em5mc7){color:#e5e7eb}}html[data-theme=dark] .mvc-container:where(.astro-n3em5mc7) h3:where(.astro-n3em5mc7){color:#f9fafb}html[data-theme=dark] .mvc-container:where(.astro-n3em5mc7) p:where(.astro-n3em5mc7){color:#d1d5db}html[data-theme=dark] .step-explanation:where(.astro-n3em5mc7) h4:where(.astro-n3em5mc7),html[data-theme=dark] .benefits:where(.astro-n3em5mc7) h4:where(.astro-n3em5mc7){color:#f9fafb}html[data-theme=dark] .step-explanation:where(.astro-n3em5mc7) li:where(.astro-n3em5mc7),html[data-theme=dark] .benefits:where(.astro-n3em5mc7) li:where(.astro-n3em5mc7){color:#e5e7eb}.mvc-diagram:where(.astro-n3em5mc7) line:where(.astro-n3em5mc7){stroke-dasharray:200;stroke-dashoffset:200px;animation:7s infinite drawLoop}.mvc-diagram:where(.astro-n3em5mc7) .view-to-controller:where(.astro-n3em5mc7){animation-delay:.5s}.mvc-diagram:where(.astro-n3em5mc7) .controller-to-model:where(.astro-n3em5mc7){animation-delay:2s}.mvc-diagram:where(.astro-n3em5mc7) .model-to-controller:where(.astro-n3em5mc7){animation-delay:3.5s}.mvc-diagram:where(.astro-n3em5mc7) .controller-to-view:where(.astro-n3em5mc7){animation-delay:5s}.component-box:where(.astro-n3em5mc7){filter:drop-shadow(2px 2px 4px #0003)}.step:where(.astro-n3em5mc7){opacity:0;animation:7s infinite fadeInLoop}.step-1:where(.astro-n3em5mc7){animation-delay:0s}.step-2:where(.astro-n3em5mc7){animation-delay:1.5s}.step-3:where(.astro-n3em5mc7){animation-delay:3s}.step-4:where(.astro-n3em5mc7){animation-delay:4.5s}.arrow-label:where(.astro-n3em5mc7){opacity:0;animation:7s infinite fadeInLoop}.arrow-sublabel:where(.astro-n3em5mc7){opacity:0;fill:#6b7280;animation:7s infinite fadeInLoop}.view-to-controller:where(.astro-n3em5mc7)+.arrow-label:where(.astro-n3em5mc7),.view-to-controller:where(.astro-n3em5mc7)+.arrow-label:where(.astro-n3em5mc7)+.arrow-sublabel:where(.astro-n3em5mc7){animation-delay:1s}.controller-to-model:where(.astro-n3em5mc7)+.arrow-label:where(.astro-n3em5mc7),.controller-to-model:where(.astro-n3em5mc7)+.arrow-label:where(.astro-n3em5mc7)+.arrow-sublabel:where(.astro-n3em5mc7){animation-delay:2.5s}.model-to-controller:where(.astro-n3em5mc7)+.arrow-label:where(.astro-n3em5mc7),.model-to-controller:where(.astro-n3em5mc7)+.arrow-label:where(.astro-n3em5mc7)+.arrow-sublabel:where(.astro-n3em5mc7){animation-delay:4s}.controller-to-view:where(.astro-n3em5mc7)+.arrow-label:where(.astro-n3em5mc7),.controller-to-view:where(.astro-n3em5mc7)+.arrow-label:where(.astro-n3em5mc7)+.arrow-sublabel:where(.astro-n3em5mc7){animation-delay:5.5s}.mvc-explanation:where(.astro-n3em5mc7){grid-template-columns:1fr 1fr;gap:30px;margin-top:30px;display:grid}.step-explanation:where(.astro-n3em5mc7) h4:where(.astro-n3em5mc7),.benefits:where(.astro-n3em5mc7) h4:where(.astro-n3em5mc7){color:#1f2937;border-bottom:2px solid #3b82f6;margin-bottom:15px;padding-bottom:8px}.step-explanation:where(.astro-n3em5mc7) ol:where(.astro-n3em5mc7){padding-left:20px}.step-explanation:where(.astro-n3em5mc7) li:where(.astro-n3em5mc7){color:#374151;margin-bottom:12px;line-height:1.6}.benefits:where(.astro-n3em5mc7) ul:where(.astro-n3em5mc7){padding-left:0;list-style:none}.benefits:where(.astro-n3em5mc7) li:where(.astro-n3em5mc7){color:#374151;margin-bottom:12px;padding-left:20px;line-height:1.6;position:relative}.benefits:where(.astro-n3em5mc7) li:where(.astro-n3em5mc7):before{content:"✓";color:#10b981;font-weight:700;position:absolute;left:0}@keyframes drawLoop{0%{stroke-dashoffset:200px}28.6%{stroke-dashoffset:0}85.7%{stroke-dashoffset:0}to{stroke-dashoffset:200px}}@keyframes fadeInLoop{0%{opacity:0}28.6%{opacity:1}85.7%{opacity:1}to{opacity:0}}@media (width<=768px){.mvc-container:where(.astro-n3em5mc7){padding:15px}.mvc-diagram:where(.astro-n3em5mc7){width:100%;height:auto}.desktop-layout:where(.astro-n3em5mc7){display:none!important}.mobile-layout:where(.astro-n3em5mc7){display:block!important}.mvc-explanation:where(.astro-n3em5mc7){grid-template-columns:1fr;gap:20px}.mvc-explanation:where(.astro-n3em5mc7) h4:where(.astro-n3em5mc7){font-size:16px}.step-explanation:where(.astro-n3em5mc7) li:where(.astro-n3em5mc7),.benefits:where(.astro-n3em5mc7) li:where(.astro-n3em5mc7){margin-bottom:10px;font-size:14px}}