/* Representación común de iconos ilustrados y adaptación a forced colors. */
/* Friendly, device-independent pictures. Keep text nodes for lesson semantics. */
.illustrated-icon {
  overflow: hidden;
  color: transparent !important;
  text-shadow: none !important;
  background-repeat: no-repeat;
  background-size: contain;
  image-rendering: auto;
}
:is(
  .category-icon,
  .hub-card-icon,
  .area-icon,
  .hub-title-icon,
  .character-option-icon,
  .album-tile-icon
).illustrated-icon {
  flex-shrink: 0;
}
@media (forced-colors: active) {
  .illustrated-icon {
    color: CanvasText !important;
    background-image: none !important;
    filter: none;
  }
}
/* Pale objects (cloud, milk, white/grey) keep a visible silhouette on both themes. */
body:is(
    [data-learning-category="weather"],
    [data-learning-category="colors"],
    [data-learning-category="home"],
    [data-learning-category="body"]
  )
  .panel
  .illustrated-icon {
  background-color: var(--ad-soft-keep);
  border-radius: 12px;
}
html[data-appearance="dark"]
  body:is(
    [data-learning-category="weather"],
    [data-learning-category="colors"],
    [data-learning-category="home"],
    [data-learning-category="body"]
  )
  .panel
  .illustrated-icon {
  background-color: #dceaf7;
}