#interactive-lessons { margin: 2rem 0; padding: clamp(1rem, 3vw, 2rem); background: #f7f3ec; color: #28251f; border: 1px solid #d4c7b0; border-radius: 16px; }
#interactive-lessons h2 { color: #28251f; margin-top: 0; font-size: 1.65rem; }
#interactive-lessons a { color: #814313; }
#interactive-lessons a:hover { color: #492000; }
.lesson-library label { float: none; clear: none; display: block; margin: 0; }
.lesson-library input { box-sizing: border-box; padding: 0; }
.lesson-library select { width: auto; margin: 0; }
.lesson-library button { width: auto; margin: 0; text-transform: none; }
.lesson-library button:disabled { opacity: .5; cursor: wait; }
.lesson-library p { line-height: 1.65; }
.lesson-toolbar, .lesson-chapters, .lesson-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; margin: 1rem 0; }
.lesson-library button, .lesson-library select { font: inherit; padding: .65rem .8rem; border: 1px solid #9d8b70; border-radius: 8px; color: #28251f; background: white; cursor: pointer; max-width: 100%; }
.lesson-library button[aria-current="step"] { background: #3e523d; color: white; }
.lesson-library :focus-visible { outline: 3px solid #b85512; outline-offset: 3px; }
.lesson-stage { position: relative; overflow: hidden; background: #d8cbb8; border-radius: 10px; }
.lesson-stage iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: top left; }
.lesson-seek { width: 100%; accent-color: #3e523d; }
.lesson-transcript { margin-top: 1rem; padding: 1rem; border-left: 4px solid #a58658; background: white; }
.lesson-transcript summary { cursor: pointer; font-weight: 600; }
.lesson-transcript li { margin: 1rem 0; line-height: 1.6; }
.lesson-shot { max-width: 100%; max-height: 260px; object-fit: contain; display: block; margin: 1rem 0; }
.lesson-launch { display: inline-block; margin: .5rem 0; font-weight: 600; }
.lesson-status { min-height: 1.6em; }
.lesson-caption { font-size: .9rem; }
#interactive-lessons figcaption { color: #55442e; font-size: .9rem; }
#cardsGrid a.info-card { color: inherit; text-decoration: none; }
#cardsGrid .info-card[hidden] { display: none; }
#cardsGrid .info-card:focus-visible { outline: 3px solid #efab80; outline-offset: 4px; }
#cardsGrid .tutorial-thumbnail { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: contain; background: #141211; border-radius: 6px; margin: 12px 0; }
#cardsGrid .tutorial-summary { font-size: .9rem; line-height: 1.65; }
#cardsGrid .card-bottom { flex-wrap: wrap; gap: 8px; }
.lesson-library [hidden] { display: none !important; }
@media (max-width: 600px) {
  .lesson-chapters button { flex: 1 1 40%; }
  #interactive-lessons { padding: 12px; margin-inline: -12px; }
  .lesson-library .lesson-toolbar label { width: 100%; }
  .lesson-library select { width: 100%; }
}