/* Typography follows Fragments' Markdown component: the text inherits its size from where it is
   shown, and only the spacing, lists, headings, links and images are set here. */
._markdown_1lxpr_3 {
  color: var(--fr-color-text-icon-primary);
  overflow-wrap: anywhere;
}

._markdown_1lxpr_3 p {
  margin: 0 0 var(--fr-margin-8, 0.5rem);
}

._markdown_1lxpr_3 p:last-child {
  margin-bottom: 0;
}

/* The renderer draws every heading as an h2 or an h3, the tutorial format's two levels. */
._markdown_1lxpr_3 h2,
._markdown_1lxpr_3 h3 {
  margin: var(--fr-margin-16, 1rem) 0 var(--fr-margin-8, 0.5rem);
  line-height: 1.4;
}

._markdown_1lxpr_3 h2:first-child,
._markdown_1lxpr_3 h3:first-child {
  margin-top: 0;
}

._markdown_1lxpr_3 h2 {
  font-size: 1.25em;
  font-weight: 600;
}

._markdown_1lxpr_3 h3 {
  font-size: 1.0625em;
  font-weight: 600;
}

._markdown_1lxpr_3 strong {
  font-weight: 600;
}

._markdown_1lxpr_3 ul,
._markdown_1lxpr_3 ol {
  margin: 0 0 var(--fr-size-8, 0.5rem);
  padding-left: var(--fr-size-24, 1.5rem);
}

._markdown_1lxpr_3 li {
  margin-bottom: var(--fr-size-4, 0.25rem);
}

._markdown_1lxpr_3 li:last-child {
  margin-bottom: 0;
}

._markdown_1lxpr_3 a {
  color: var(--fr-color-text-icon-highlighted);
  font-weight: 600;
  text-decoration: underline;
}

/* A text colour token, as text links elsewhere in CMT keep on hover; the link is underlined already. */
._markdown_1lxpr_3 a:hover {
  color: var(--fr-color-text-icon-highlighted);
}

/* A link in a preview: drawn like the real one, but it goes nowhere. */
._inertLink_1lxpr_68 {
  color: var(--fr-color-text-icon-highlighted);
  font-weight: 600;
  text-decoration: underline;
  cursor: default;
}

/* At its own size capped at the column, or at a stored share of the column (an inline width). */
._image_1lxpr_76 {
  display: block;
  max-width: 100%;
  height: auto;
  margin: var(--fr-size-4, 0.25rem) 0;
  border-radius: var(--fr-border-radius-8, 0.5rem);
}

/* Shown while an image loads, and instead of it when it cannot be shown. The same height keeps
   the page from jumping when the image arrives. */
._placeholder_1lxpr_86 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--fr-size-4, 0.25rem);
  box-sizing: border-box;
  width: 100%;
  min-height: 120px;
  margin: var(--fr-size-4, 0.25rem) 0;
  padding: var(--fr-size-12, 0.75rem);
  border: 1px dashed var(--fr-color-border-default-medium);
  border-radius: var(--fr-border-radius-8, 0.5rem);
  background-color: var(--fr-color-bg-surface-faint);
  color: var(--fr-color-text-icon-secondary);
  text-align: center;
}

._placeholderNote_1lxpr_104 {
  font-size: 0.875em;
}

/* A centered image, or the box shown in its place, as a block in the middle of the column. */
._image_1lxpr_76._centered_1lxpr_109,
._placeholder_1lxpr_86._centered_1lxpr_109 {
  margin-right: auto;
  margin-left: auto;
}
/* Fragments' Backdrop sets its own background as an inline style, so dimming it for just this
   modal needs !important - there is no prop to pass a backdrop color through Modal itself. The
   default overlay barely dims the page, too subtle for pages that show screenshots of the app.
   The id is wrapped in :global because a CSS module would otherwise rename it, and the rule
   would no longer match the Modal's id attribute. */
#tutorial-modal [data-testid="fr-modal-backdrop"] {
  /* biome-ignore lint/complexity/noImportantStyles: overriding fragments' inline backdrop style, see comment above */
  background-color: rgba(15, 23, 42, 0.5) !important;
}

/* A long page scrolls inside the modal body's own box. The box is rebuilt on every page (it is
   keyed by page), so each page starts at its top. */
._content_3sj0s_13 {
  max-height: 60vh;
  overflow-y: auto;
}

._footer_3sj0s_18 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.75rem;
}

._footerActions_3sj0s_26 {
  display: flex;
  gap: 0.5rem;
}