/* Parent surface; authored styles live inside an isolated frame. */
.site-body .knowledge-visual { margin: 30px 0 36px; padding: 0; border: 1px solid var(--reading-rule); border-radius: 12px; overflow: hidden; background: var(--reading-bg); }
.knowledge-visual__stage { display: none; }
.js .knowledge-visual__stage { display: block; position: relative; }
.js .knowledge-visual__stage.is-loading { min-height: var(--visual-height, 420px); }
.knowledge-visual__stage > .diagram-loader { border: 0; border-radius: 0; background: radial-gradient(ellipse at 50% 45%, var(--site-accent-fg-color--transparent), transparent 48%), var(--reading-surface); }
.knowledge-visual__stage .diagram-loader__status { padding-inline: 24px; max-width: 38em; text-align: center; font-size: 14px; letter-spacing: 0; line-height: 1.75; }
.knowledge-visual__stage.is-error { min-height: 200px; }
.knowledge-visual__stage.is-error > .diagram-loader { padding-bottom: 54px; }
.knowledge-visual__stage.is-ready > .knowledge-visual__frame { animation: diagram-content-in .35s ease both; }
.knowledge-visual__frame { display: block; width: 100%; border: 0; background: var(--reading-bg); }
.knowledge-visual[data-visual-state='loading'] .knowledge-visual__frame { visibility: hidden; }
.site-body .knowledge-visual__retry { position: absolute; z-index: 4; bottom: 22px; left: 50%; transform: translateX(-50%); min-height: 40px; padding: 8px 18px; border: 1px solid var(--reading-rule); border-radius: 7px; background: var(--reading-bg); color: var(--reading-accent); font: inherit; font-size: 14px; cursor: pointer; }
.knowledge-visual__retry[hidden] { display: none; }
.knowledge-visual__retry:focus-visible { outline: 2px solid var(--reading-accent); outline-offset: 3px; }
.site-body .knowledge-visual figcaption { padding: 16px 22px; border-top: 1px solid var(--reading-rule); background: var(--reading-surface); font-size: 14px; line-height: 1.75; text-align: start; }
.site-body .knowledge-visual figcaption strong { font-size: 14px; font-weight: 600; }
.site-body .knowledge-visual figcaption p { margin: 4px 0 0; }
@media (max-width: 600px) { .site-body .knowledge-visual figcaption { padding: 14px 16px; } }
@media (prefers-reduced-motion: reduce) { .knowledge-visual__stage.is-ready > .knowledge-visual__frame { animation: none; } }
.knowledge-visual__stage > .diagram-loader[aria-hidden='true'] { pointer-events: none; }