/* Homepage artwork UI uses the same purple and pale-blue palette. */
body.homepage-artwork,
body.homepage-cellular {
  --homepage-purple: #663399;
  --homepage-blue: #c9ddf5;
  --automata-frame: #c9ddf5;
  color: var(--homepage-purple);
  background-color: var(--homepage-blue);
}
.homepage-artwork .lil-gui {
  --text-color: #663399;
  --title-text-color: #663399;
  --number-color: #663399;
  --string-color: #663399;
  --background-color: #deebfa;
  --title-background-color: #c9ddf5;
  --widget-color: #c9ddf5;
  --hover-color: #d7e6f9;
  --focus-color: #c2d6ef;
  --widget-border-radius: 0;
}
.homepage-artwork #info {
  color: var(--homepage-purple);
}
/* Colour only the existing 40px padding, keeping the artwork's own background
   and cell colours intact. An inset shadow does not change its dimensions. */
.homepage-cellular .lol-two {
  box-shadow: inset 0 0 0 40px var(--automata-frame);
}
.homepage-cellular button {
  color: var(--homepage-purple);
  background-color: var(--homepage-blue);
  border-color: var(--homepage-purple);
}
.homepage-cellular button:focus-visible {
  outline: 2px solid var(--homepage-purple);
  outline-offset: 3px;
}