@layer modules {
  /* Spot illustrations: Open Doodles (Pablo Stanley, CC0) in the page's ink, their accent in one screen kind's colour. */
  .spot { --spot: var(--router); display: block; width: 100%; height: auto; background: color-mix(in srgb, var(--spot) 7%, transparent); }
  .spot.is-menu { --spot: var(--menu); }
  .spot.is-input { --spot: var(--input); }
  .spot.is-router { --spot: var(--router); }
  .spot.is-end { --spot: var(--end); }
  .spot.is-message { --spot: var(--message); }
  .spot.is-form { --spot: var(--form); }
  .spot-ink { fill: var(--ink); }
  .spot-accent { fill: var(--spot); }
  .spot-deep { fill: color-mix(in srgb, var(--spot) 78%, #000); }

  /* Scribbles: hand-drawn objects (doodle pack by @bxcmuse) for small placements, one element in the kind's colour. */
  .scribble { --spot: var(--router); display: block; width: 100%; height: auto; }
  .scribble.is-menu { --spot: var(--menu); }
  .scribble.is-input { --spot: var(--input); }
  .scribble.is-router { --spot: var(--router); }
  .scribble.is-end { --spot: var(--end); }
  .scribble.is-message { --spot: var(--message); }
  .scribble.is-form { --spot: var(--form); }
  .scribble-ink { fill: var(--ink); }
  .scribble-paper { fill: var(--scribble-paper, var(--surface)); }
  .scribble-accent { fill: var(--spot); }

  /* Empty states: a modest scribble centred over the text on the surface it draws on. */
  .empty-state { --scribble-paper: var(--surface); display: grid; justify-items: center; gap: .4rem; padding: 2.4rem 1.6rem 2.8rem; border: 1px dashed var(--line-strong); border-radius: var(--r-card); background: var(--surface); text-align: center; }
  .empty-state .scribble { width: auto; height: 9rem; margin-bottom: .8rem; }
  .empty-state p { max-width: 52ch; margin: 0; }
  .empty-state-action { margin-top: 1.2rem; }

  /* Carbon pictograms: single-weight drawings for dense grids, taking the text colour. */
  .pictogram { display: block; width: 4.8rem; height: 4.8rem; flex: none; }

  /* The styleguide's sheets of both. */
  .spot-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr)); gap: 1.2rem; margin: 0 0 1.2rem; padding: 0; list-style: none; }
  .spot-sheet.is-small { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
  .spot-sheet li { border: 1px solid var(--line); background: var(--surface); }
  .spot-sheet span { display: block; padding: .8rem 1rem; font-size: 1.2rem; color: var(--ink-2); }
  .pictogram-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 1.6rem; margin: 0; padding: 0; list-style: none; }
  .pictogram-sheet li { display: grid; gap: .8rem; padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: 1.2rem; color: var(--ink-2); }
  .pictogram-sheet .pictogram { color: var(--ink); }
}