/* Kader Library — explainer chapter styling (illustrated, wide reading column) */
.explainer-body { max-width: 760px; }
.explainer-body p { font-size: 1.06rem; line-height: 1.8; }

/* Lead paragraph */
.xpl-lead { font-size: 1.2rem; line-height: 1.7; color: #555; font-weight: 400; }
body.quarto-dark .xpl-lead { color: #b6b6c8; }

/* Figure with caption — big inline diagrams */
.xpl-fig { margin: 2rem 0; text-align: center; }
.xpl-fig img { max-width: 100%; border-radius: 16px; border: 1px solid rgba(255,255,255,0.65); box-shadow: 0 10px 30px rgba(76,74,152,0.13); }
body.quarto-dark .xpl-fig img { border-color: rgba(182,180,240,0.18); box-shadow: 0 10px 30px rgba(0,0,0,0.45); }
.xpl-fig figcaption { font-size: .86rem; color: #8888a0; margin-top: .6rem; font-style: italic; }

/* "Key idea" callout */
.xpl-key {
  border-left: 4px solid #4C4A98; background: rgba(255,255,255,0.5); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-radius: 0 10px 10px 0; padding: 1rem 1.2rem; margin: 1.6rem 0;
  font-size: 1.05rem;
}
.xpl-key strong { color: #4C4A98; }
body.quarto-dark .xpl-key { background: rgba(182,180,240,.1); }
body.quarto-dark .xpl-key strong { color: #b6b4f0; }

/* try-it interactive box reuse the ml-viz frame if present */
.xpl-try { margin: 1.8rem 0; }

/* section dividers */
.explainer-body h2 { margin-top: 2.6rem; font-size: 1.55rem; letter-spacing: -.01em; }
.explainer-body h3 { margin-top: 1.8rem; }

/* chapter footer nav */
.xpl-nav { display:flex; justify-content:space-between; gap:1rem; margin-top:3rem; padding-top:1.4rem; border-top:1px solid rgba(76,74,152,0.18); }
body.quarto-dark .xpl-nav { border-top-color: rgba(255,255,255,.1); }
.xpl-nav a { font-weight:600; color:#4C4A98; text-decoration:none; }
.xpl-nav a:hover { text-decoration:underline; }