/* Existing explanatory figures are fixed content in the CMS preview. */
article > .concept-figure,
article > .process-figure {
  width: min(860px, calc(100vw - var(--side) - 84px));
  max-width: none;
  margin: 72px 50% 80px;
  transform: translateX(-50%);
}

article .concept-figure.is-active .diagram-items li,
article .concept-figure.is-active .diagram-framework li,
article .concept-figure.is-active .diagram-framework > p,
article .concept-figure.is-active .diagram-funnel > div span,
article .concept-figure.is-active .diagram-funnel > i,
article .concept-figure.is-active .diagram-funnel > strong,
article .concept-figure.is-active .intersection-circle,
article .concept-figure.is-active .diagram-intersection > strong,
article .concept-figure.is-active .orbit-item,
article .concept-figure.is-active .equation-token,
article .concept-figure.is-active .diagram-bridge > span,
article .concept-figure.is-active .diagram-rings span {
  opacity: 1;
}


@supports (corner-shape: squircle) {
  article > .concept-figure,
  article > .process-figure,
  article .concept-canvas,
  article .process-panel,
  article .diagram-items li,
  article .diagram-framework li {
    corner-shape: squircle;
  }
}

@media (max-width: 860px) {
  article > .concept-figure,
  article > .process-figure {
    width: calc(100vw - 32px);
  }
}

/* Book Diagram Design System: editable SVGs without page-level decoration. */
article > .book-diagram {
  width: 100%;
  max-width: 100%;
  margin: 64px 0 72px;
  padding: clamp(12px, 2vw, 24px);
  border: 1px solid #e4e9e0;
  border-radius: 24px;
  background: #fffefb;
  box-shadow: 0 18px 42px rgba(49, 75, 56, .055);
  transform: none;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
}
.book-diagram svg { display: block; width: 100%; height: auto; }
.book-diagram--12-03 { padding: 0; overflow: hidden; box-shadow: none; }
.book-diagram--12-03 img { display: block; width: 100%; height: auto; }
.book-diagram--12-03 figcaption { padding: 12px 20px 18px; color: #4b6554; font-size: clamp(12px, 1.3vw, 14px); line-height: 1.65; text-align: center; }
.book-diagram--12-03 figcaption h3 { margin: 0 0 4px; color: #253b2d; font-size: 16px; }
.book-diagram--12-03 figcaption p { margin: 0; }
.book-diagram__mobile { display: none; }
@supports (corner-shape: squircle) { article > .book-diagram { corner-shape: squircle; } }
@media (max-width: 600px) {
  article > .book-diagram { margin-top: 48px; margin-bottom: 56px; padding: 10px; }
  .book-diagram__desktop:has(+ .book-diagram__mobile) { display: none; }
  .book-diagram__mobile { display: block; }
}