/* A wider page: the tutorial is mostly screenshots of a wide app. */
.md-grid { max-width: 1440px; }

/* Screenshots: a thin frame so light UI captures stand out from the page, in both themes. */
.md-typeset img.shot,
.md-typeset figure img {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}
.md-typeset figure { margin: 1.2em auto; }
.md-typeset figcaption { max-width: 46rem; font-size: .72rem; color: var(--md-default-fg-color--light); }
.md-typeset figcaption em { font-style: normal; font-weight: 600; }

/* Numbered callouts in the text that match the orange badges drawn on screenshots. */
.md-typeset .callout {
  display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; border-radius: 50%;
  background: #e8590c; color: #fff; font-size: .8em; font-weight: 700; line-height: 1; vertical-align: .05em;
}

/* Home page: the "where do I start" cards. */
.md-typeset .grid.cards > ul > li { border-radius: 8px; }