.course-animated-diagram{margin:2rem 0;color:var(--learning-text,#202522);--diagram-control:var(--learning-panel,#f7f9f8);--diagram-line:var(--learning-border,#cbd5cf)}.course-animated-diagram__canvas{max-width:800px;margin:auto}.course-animated-diagram__canvas svg{display:block;width:100%;height:auto}.course-animated-diagram__controls{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.8rem}.course-animated-diagram__controls button{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:40px;border:1px solid var(--diagram-line);border-radius:8px;padding:.5rem .75rem;color:inherit;background:var(--diagram-control);font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;transition:background-color .15s cubic-bezier(.16,1,.3,1)}.course-animated-diagram__controls button:hover:enabled{background:var(--learning-accent-soft,#e6f3ec)}.course-animated-diagram__controls button:disabled{opacity:.45;cursor:default}.course-animated-diagram__controls a:focus-visible,.course-animated-diagram__controls button:focus-visible{outline:2px solid var(--learning-accent,#08734f);outline-offset:3px}.course-animated-diagram__controls .course-animated-diagram__play{color:var(--learning-accent,#08734f);border-color:currentColor}.course-animated-diagram__controls a{margin-left:auto;font-size:.8rem;color:var(--learning-accent,#08734f)}.course-animated-diagram figcaption{margin-top:.65rem;color:var(--learning-muted,#56615b);font-size:.875rem;line-height:1.6}.dark .course-animated-diagram .prachub-motion{--ph-ink:#ecf1ee;--ph-muted:#b2bcb6;--ph-accent:#74d7ae;--ph-bg:#1b211e;--ph-surface:#242d28;--ph-line:#58685e;--ph-wash:#203d2e;--ph-warning:#493c23}.light .course-animated-diagram .prachub-motion{--ph-ink:#202522;--ph-muted:#56615b;--ph-accent:#08734f;--ph-bg:#f6f8f7;--ph-surface:#fcfdfc;--ph-line:#cbd5cf;--ph-wash:#e5f2ec;--ph-warning:#fff2d8}@media (prefers-reduced-motion:reduce){.course-animated-diagram__controls button{transition:none}}@media (max-width:480px){.course-animated-diagram__controls{gap:.4rem}.course-animated-diagram__controls a{width:100%;margin:.3rem 0 0}}