.actions-unit { margin: 2.25rem 0; color: #102d49; }
.l-reference, .l-practice { margin: 1.5rem 0; padding: clamp(1.25rem, 3vw, 2.5rem); border: 1px solid #c7e1ee; border-radius: 1.5rem; background: #fff; }
.l-heading { max-width: 58rem; }.l-heading h2 { margin-top: .3rem; }.l-callout { margin-top: 1.25rem; padding: 1rem 1.1rem; border-left: 4px solid #f3a536; border-radius: .5rem; background: #fff7e9; line-height: 1.5; }
.l-table-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.25rem; }.l-table { overflow: hidden; border: 1px solid #d3e5ed; border-radius: .9rem; background: #fbfdff; }.l-table:last-child { grid-column: 1 / -1; }.l-table h3 { margin: 0; padding: .9rem 1rem; background: #edf8fc; font-size: 1rem; }.l-scroll { overflow-x: auto; }.l-table table { width: 100%; border-collapse: collapse; font-size: .9rem; }.l-table th, .l-table td { padding: .65rem .75rem; border-top: 1px solid #dbeaf0; text-align: left; vertical-align: top; line-height: 1.38; }.l-table th { color: #49687b; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; }
.l-media { margin-top: 1.5rem; }.l-media > h3 { margin-bottom: .25rem; }.l-media > p { margin-top: 0; color: #557286; }.l-media-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }.l-media-grid figure { min-width: 0; margin: 0; overflow: hidden; border: 1px solid #d3e5ed; border-radius: 1rem; background: #fff; }.l-media-grid img { display: block; width: 100%; height: auto; max-height: 32rem; object-fit: contain; background: #f7fafc; }.l-media-grid figcaption { padding: .7rem .8rem; color: #48687a; font-size: .86rem; line-height: 1.35; }
.l-practice { background: #f7fcff; }.l-activity { margin-top: 1.5rem; padding: 1.25rem; border: 1px solid #d5e9f1; border-radius: 1rem; background: #fff; }.l-activity h3 { margin-top: 0; }.l-task-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }.l-task { display: grid; gap: .65rem; padding: 1rem; border: 1px solid #d7e6ee; border-radius: .8rem; background: #fff; line-height: 1.48; transition: background .2s, border-color .2s; }.l-select { width: 100%; min-height: 2.85rem; padding: .55rem 2.25rem .55rem .75rem; border: 1px solid #90b9ce; border-radius: .7rem; color: #12324c; background: #f9fdff; font: inherit; font-weight: 700; }.l-task.correct { border-color: #46af77; background: #edfbf2; }.l-task.incorrect { border-color: #ebac58; background: #fff8eb; }.l-check { margin-top: 1rem; }.l-score { color: #315d72; font-weight: 700; }
.l-task-grid-inline { grid-template-columns: 1fr; }
.l-task-inline > span { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.l-task-inline .l-select { width: auto; min-width: 12rem; max-width: 100%; flex: 0 1 18rem; }
@media (max-width: 900px) { .l-table-grid, .l-task-grid { grid-template-columns: 1fr; }.l-media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.l-table:last-child { grid-column: auto; } }
@media (max-width: 560px) { .l-media-grid { grid-template-columns: 1fr; } }