.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;
}

.missions-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
}

.missions-crumbs li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: color-mix(in oklab, var(--color-base-content) 30%, transparent);
}

.missions-crumbs a {
  color: inherit;
  text-decoration: none;
}

.missions-crumbs a:hover,
.missions-crumbs a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.missions-crumbs [aria-current=page] {
  font-weight: 600;
  color: color-mix(in oklab, var(--color-base-content) 80%, transparent);
}