.du-de-film { display: flex; align-items: center; gap: 1.5rem; margin: 1.5rem 0 2rem; }
.du-de-film > a { flex: 0 0 144px; }
.du-de-film img { display: block; width: 100%; height: auto; border-radius: .5rem; }
.du-de-film figcaption { margin: 0; max-width: 36ch; font-size: 1rem; line-height: 1.6; }
.du-de-exercises { padding-left: 1.75rem; }
.du-de-exercises > li { padding-left: .5rem; margin-block: 2rem; }
.du-de-exercises > li::marker { font-weight: 700; }
.du-de-exercises > li > p { margin-block: .5rem; }
.du-de-prompt { font-size: 1.25rem; font-weight: 600; }
.du-de-answer { margin-block: .8rem 1.5rem; background: var(--surface-soft, #f3f4f6); border-radius: .5rem; padding: 0 1rem; }
.du-de-answer summary { padding-block: .85rem; cursor: pointer; font-size: 1rem; font-weight: 600; min-height: 44px; box-sizing: border-box; }
.du-de-answer[open] { padding-bottom: .7rem; }
.du-de-answer p { margin-block: .55rem; }
.du-de-answer summary:focus-visible, .du-de-film a:focus-visible { outline: 3px solid var(--brand, #c93248); outline-offset: 4px; }
@media (max-width: 480px) { .du-de-film { align-items: flex-start; gap: 1rem; } .du-de-film > a { flex-basis: 112px; } .du-de-film figcaption { font-size: .95rem; } }