/* One physical world: a table, three chairs, and two people who begin using it. */
.community-illustration {
  --community-paper: var(--background-color, #f6f5f9);
  --community-soft: color-mix(in srgb, var(--accent-color, #77618c) 6%, var(--community-paper));
  --community-cloth: color-mix(in srgb, var(--accent-color, #77618c) 12%, var(--community-paper));
  --community-wood: color-mix(in srgb, var(--leaf-color, #89967c) 10%, var(--community-paper));
}
.community-illustration .community-surface,
.community-illustration .community-chair-back,
.community-illustration .community-paper-surface { fill: var(--community-paper); }
.community-illustration .community-spool-body { fill: var(--community-paper); stroke: none; }
.community-illustration .community-surface-stroke { stroke: var(--community-paper); }
.community-illustration .community-shirt { fill: var(--community-cloth); }
.community-illustration .community-shirt-stroke { stroke: var(--community-cloth); }
.community-illustration .community-trouser-stroke { stroke: var(--community-soft); }
.community-illustration .community-hair { fill: var(--community-cloth); }
.community-illustration .community-table-top { fill: var(--community-soft); }
.community-illustration .community-table-edge,
.community-illustration .community-table-leg { fill: var(--community-paper); }
.community-illustration .community-chair { stroke: var(--muted-color, #8a7d99); stroke-width: 1.25; }
.community-illustration .community-wood,
.community-illustration .community-model { fill: var(--community-wood); }
.community-illustration .community-materials { stroke-width: 1.2; }
.community-illustration .community-person,
.community-illustration .community-first-work,
.community-illustration .community-shared-work { opacity: 0; transition: opacity 1600ms ease-in-out; }
[data-stage="1"] .community-illustration .community-person-first,
[data-stage="2"] .community-illustration .community-person-first,
[data-stage="1"] .community-illustration .community-first-work,
[data-stage="2"] .community-illustration .community-first-work,
[data-stage="2"] .community-illustration .community-person-second,
[data-stage="2"] .community-illustration .community-shared-work { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .community-illustration * { transition: none !important; }
}