.ccc-site-main .ccc-lesson .ccc-algorithmic-diagram{border-radius:var(--lesson-radius);border:1px solid #e9e4e7;min-width:0;max-width:100%;margin-block:24px;padding:16px}.ccc-site-main .ccc-lesson .ccc-algorithmic-diagram svg{width:100%;min-width:440px;height:auto;color:var(--ccc-color-ink);display:block}.ccc-site-main .ccc-lesson .ccc-algorithmic-diagram :is(rect,ellipse,.ccc-algorithmic-shape){fill:#fff;stroke:var(--ccc-color-brand);stroke-width:2px}.ccc-site-main .ccc-lesson .ccc-algorithmic-diagram text{fill:currentColor;font-family:var(--ccc-font-sans);text-anchor:middle;font-size:14px}.ccc-site-main .ccc-lesson .ccc-algorithmic-flow{fill:none;stroke:currentColor;stroke-width:1.5px}.ccc-site-main .ccc-lesson .ccc-algorithmic-diagram figcaption{color:var(--ccc-color-copy);margin:0 0 16px;font-size:.85rem}.ccc-site-main .ccc-lesson .ccc-diagram-toolbar{gap:12px;margin-bottom:16px;display:grid}.ccc-site-main .ccc-lesson .ccc-diagram-toolbar select{background:var(--ccc-color-page);width:100%;min-width:0;color:var(--ccc-color-ink);font:inherit;border:1px solid #e9e4e7;border-radius:8px;padding:10px 12px}.ccc-site-main .ccc-lesson .ccc-diagram-canvas{border-radius:8px;overflow-x:auto}.ccc-site-main .ccc-lesson .ccc-uml-symbol{color:var(--ccc-color-ink);margin-bottom:8px;display:block}.ccc-site-main .ccc-lesson [data-algorithm-diagram] [data-node][data-active=true]{filter:drop-shadow(0 0 5px color-mix(in srgb, var(--ccc-color-brand) 40%, transparent))}.ccc-site-main .ccc-lesson [data-algorithm-diagram] [data-node][data-active=true] :is(rect,ellipse,.ccc-algorithmic-shape){fill:#fff0f6;stroke-width:3px}.ccc-site-main .ccc-lesson [data-algorithm-diagram] [data-flow][data-active=true]{color:var(--ccc-color-brand);stroke-width:3px}@media (prefers-reduced-motion:no-preference){.ccc-site-main .ccc-lesson [data-playing=true] [data-flow][data-active=true]{stroke-dasharray:8 5;animation:.8s linear infinite ccc-diagram-flow}}@keyframes ccc-diagram-flow{to{stroke-dashoffset:-26px}}