/* labelled_diagram — tap-to-explore schematic (cell, heart, neuron, …). Drawn from config;
   no external image. Matches the .lv-* dark chrome from _shared.css. */
.ld-svg { width: 100%; height: auto; display: block; }

.ld-outline { fill: rgba(255, 255, 255, 0.025); stroke: rgba(255, 255, 255, 0.22); stroke-width: 2; stroke-dasharray: 6 5; }

.ld-part {
  fill: color-mix(in srgb, var(--c, #8fa8cf) 16%, transparent);
  stroke: var(--c, #8fa8cf); stroke-width: 2; cursor: pointer;
  transition: fill .15s ease, stroke-width .12s ease;
}
.ld-part:hover { fill: color-mix(in srgb, var(--c, #8fa8cf) 30%, transparent); }
.ld-done { fill: color-mix(in srgb, var(--c, #8fa8cf) 24%, transparent); }
.ld-on { stroke-width: 3.5; filter: drop-shadow(0 0 6px var(--c, #8fa8cf)); }

.ld-badge { fill: #0b1020; stroke: rgba(255, 255, 255, 0.55); stroke-width: 1; cursor: pointer; }
.ld-bnum { fill: #e8eef6; font-size: 11px; font-weight: 700; cursor: pointer; user-select: none; }

.ld-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.7rem; }
.ld-chip {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.34rem 0.62rem; border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.04);
  color: #cbd5e1; font-size: 0.92rem; line-height: 1; cursor: pointer; transition: background .12s ease, border-color .12s ease;
}
.ld-chip:hover { background: rgba(255, 255, 255, 0.09); }
.ld-chip-on { border-color: #38bdf8; background: rgba(56, 189, 248, 0.16); color: #eaf1fb; }
.ld-cnum {
  display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem; border-radius: 999px;
  background: rgba(255, 255, 255, 0.13); font-size: 0.72rem; font-weight: 700;
}
.ld-chip-on .ld-cnum { background: rgba(56, 189, 248, 0.4); color: #06202e; }

@media (prefers-reduced-motion: reduce) {
  .ld-part { transition: none; }
  .ld-chip { transition: none; }
}