.study-question-callout {
    border-left: 4px solid #007BFF; /* Change color as needed */
    padding: 10px;
    margin-bottom: 20px;
}
.study-question-callout::before {
    content: "❓ Study Question"; /* Title text */
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}
.study-question-callout .icon {
    color: #007BFF; /* Change icon color */
}
/* Pin the license notice to the bottom of the sidebar. Only from 992px up,
   where the sidebar is always shown: below that Quarto collapses it, and a
   display rule on the id would override the collapse and cover the page. */
@media (min-width: 992px) {
  #quarto-sidebar {
    display: flex;
    flex-direction: column;
  }
}
#quarto-sidebar .quarto-sidebar-footer {
  margin-top: auto;
  padding-bottom: 0.75rem;
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: left;
  text-wrap: balance;
}
#quarto-sidebar .quarto-sidebar-footer p {
  margin-bottom: 0;
}
/* Demos are built at 1280x720 slide pixels. The iframe keeps that size and
   scales down to the column width (assets/demo-embed.html sets the scale),
   so the notes show the slide layout intact. */
.demo-embed {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.demo-embed iframe {
  width: 1280px;
  height: 720px;
  border: 0;
  transform-origin: 0 0;
}
/* Below Quarto's phone breakpoint the scaled demo is too small to use, so the
   page shows a button that opens it in a new tab instead. */
.demo-button.btn {
  display: none;
}
@media (max-width: 767.98px) {
  .demo-embed {
    display: none;
  }
  .demo-button.btn {
    display: inline-block;
    margin: 0.5rem 0;
  }
}