/* The containing tutorial page owns scrolling; the frame follows its content. */
html.tutorial-page-embed,
html.tutorial-page-embed body {
  height: auto;
  overflow: visible;
}

html.tutorial-page-embed .main-content {
  overflow: visible;
  min-height: var(--tutorial-page-min-height, 0px);
}

html.tutorial-page-embed .training-layout {
  height: auto;
  min-height: 0;
}

/* Fixed overlays use the visible part of the frame, below the site header. */
html.tutorial-page-embed .modal-overlay {
  top: var(--tutorial-page-visible-top, 0px);
  height: var(--tutorial-page-visible-height, 100%);
  padding: 16px 0;
  transition: opacity 0.4s ease;
}

html.tutorial-page-embed .tutorial-box {
  max-height: calc(var(--tutorial-page-visible-height, 100dvh) - 24px);
}