/* Soften the example-gallery cards: rounder corners, gentle shadow, clipped image. */
.mkd-glr-thumbcontainer {
  border: none;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.mkd-glr-thumbcontainer:hover {
  border: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  transform: translateY(-2px);
}

.mkd-glr-thumbcontainer img {
  border-radius: 8px;
}

/* center the card titles */
.mkd-glr-thumbcontainer a.internal,
.mkd-glr-thumbcontainer p {
  text-align: center;
}

/* mkdocs-gallery "Out:" output blocks: sg_gallery.css hardcodes a pale-cream
   (#fafae2) background, which leaves the text unreadable in the dark (slate)
   scheme. Use Material's theme-aware code colors so the captured output stays
   legible in both light and dark modes. Pygments syntax spans keep their own
   colors (their rules are more specific). */
.mkd-glr-script-out-disp,
.mkd-glr-script-out-disp pre,
.mkd-glr-script-out-disp code {
  background-color: var(--md-code-bg-color) !important;
  color: var(--md-code-fg-color) !important;
}