.missions-page {
  --missions-ink: color-mix(in oklab, var(--color-base-content) 90%, var(--color-primary));
  --missions-line: color-mix(in oklab, var(--color-base-content) 14%, transparent);
  --missions-accent: var(--color-secondary);
  color: var(--missions-ink);
}

.missions-card--reading-quest,
.missions-page--reading-quest {
  --missions-accent: var(--color-primary);
}

.missions-card__mark {
  background: color-mix(in oklab, var(--missions-accent) 16%, var(--color-base-100));
  color: var(--missions-accent);
}

.missions-card__audience {
  color: color-mix(in oklab, var(--missions-accent) 72%, var(--missions-ink));
}

.missions-mission-card {
  border-color: color-mix(in oklab, var(--missions-accent) 22%, var(--missions-line));
}

.missions-mission-card__number {
  background: color-mix(in oklab, var(--missions-accent) 14%, var(--color-base-100));
  color: var(--missions-accent);
}

.missions-prompt {
  border-color: var(--missions-accent);
  background: color-mix(in oklab, var(--missions-accent) 7%, var(--color-base-100));
}

.missions-art {
  aspect-ratio: 720/420;
  overflow: hidden;
  background: color-mix(in oklab, var(--missions-accent) 6%, var(--color-base-100));
}

.missions-art svg {
  display: block;
  width: 100%;
  height: auto;
}