.possibility-unit { margin: 2.25rem 0; color: #102d49; }
.m-reference, .m-practice { margin: 1.5rem 0; padding: clamp(1.25rem, 3vw, 2.5rem); border: 1px solid #c7e1ee; border-radius: 1.5rem; background: #fff; }
.m-heading { max-width: 60rem; }.m-heading h2 { margin: .3rem 0 .65rem; }.m-heading p { line-height: 1.55; }
.m-main-visual { margin: 1.25rem 0; overflow: hidden; border: 1px solid #d3e5ed; border-radius: 1rem; background: #fff; }.m-main-visual img { display: block; width: 100%; height: auto; object-fit: contain; }.m-main-visual figcaption { padding: .7rem .8rem; color: #48687a; font-size: .86rem; line-height: 1.35; }
.m-modal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.25rem; }.m-modal-grid article { padding: 1.1rem; border: 1px solid #d5e9f1; border-radius: 1rem; background: #fbfdff; }.m-modal-grid h3 { margin: 0 0 .55rem; }.m-modal-grid p { line-height: 1.5; }.m-modal-grid article:first-child { border-top: 4px solid #39aa72; }.m-modal-grid article:nth-child(2) { border-top: 4px solid #f3a536; }.m-modal-grid article:nth-child(3) { border-top: 4px solid #2478a7; }.m-modal-grid article:nth-child(4) { border-top: 4px solid #8a68a9; }
.m-callout { margin-top: 1.25rem; padding: 1rem 1.1rem; border-left: 4px solid #f3a536; border-radius: .5rem; background: #fff7e9; line-height: 1.5; }
.m-conditions { display: grid; grid-template-columns: 1.15fr .85fr; gap: 1.25rem; align-items: stretch; margin-top: 1.5rem; }.m-conditions > div { padding: 1.25rem; border-radius: 1rem; background: #eef8fc; }.m-conditions h3 { margin: .3rem 0 .55rem; }.m-condition-examples { display: grid; gap: .5rem; }.m-condition-examples p { margin: 0; padding: .75rem; border-radius: .65rem; background: #fff; line-height: 1.45; }.m-conditions figure, .m-airfoil { min-width: 0; margin: 0; overflow: hidden; border: 1px solid #d3e5ed; border-radius: 1rem; background: #fff; }.m-conditions img, .m-airfoil img { display: block; width: 100%; height: auto; object-fit: contain; }.m-conditions figcaption, .m-airfoil figcaption { padding: .7rem .8rem; color: #48687a; font-size: .86rem; line-height: 1.35; }.m-airfoil { margin-top: 1.25rem; }.m-airfoil img { aspect-ratio: 16 / 5; object-fit: contain; background: #f7fafc; }
.m-context { margin-top: 1.5rem; }.m-context-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }.m-context-grid figure { min-width: 0; margin: 0; overflow: hidden; border: 1px solid #d3e5ed; border-radius: 1rem; background: #fff; }.m-context-grid img { display: block; width: 100%; height: auto; object-fit: contain; }.m-context-grid figcaption { padding: .7rem .8rem; color: #48687a; font-size: .86rem; line-height: 1.35; }
.m-practice { background: #f7fcff; }.m-activity { margin-top: 1.5rem; padding: 1.25rem; border: 1px solid #d5e9f1; border-radius: 1rem; background: #fff; }.m-activity h3 { margin-top: 0; }.m-task-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }.m-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; }.m-task select { display: inline-block; width: auto; min-width: 7rem; max-width: 100%; margin: .15rem; }.m-task.correct, .m-word.correct, .m-crossword-clue.correct { border-color: #46af77; background: #edfbf2; }.m-task.incorrect, .m-word.incorrect, .m-crossword-clue.incorrect { border-color: #ebac58; background: #fff8eb; }.m-task select, .m-word input, .m-crossword-clue input { min-height: 2.75rem; padding: .5rem .7rem; border: 1px solid #90b9ce; border-radius: .65rem; color: #12324c; background: #f9fdff; font: inherit; font-weight: 700; }.m-check { margin-top: 1rem; }.m-score { color: #315d72; font-weight: 700; }
.m-word-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }.m-word { display: grid; gap: .55rem; padding: .9rem; border: 1px solid #d7e6ee; border-radius: .8rem; font-weight: 700; }.m-word span { letter-spacing: .06em; }.m-word input { width: 100%; box-sizing: border-box; text-transform: lowercase; }
.m-crossword-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }.m-crossword-heading p { max-width: 58rem; line-height: 1.5; }.m-crossword-badge { flex: 0 0 auto; padding: .55rem .75rem; border-radius: 999px; background: #092d4a; color: #fff; font-weight: 700; }.m-crossword-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }.m-crossword-columns section { padding: 1rem; border: 1px solid #d3e5ed; border-radius: .9rem; background: #fbfdff; }.m-crossword-columns h4 { margin: 0 0 .75rem; color: #315d72; }.m-crossword-clue { display: grid; grid-template-columns: minmax(0, 1fr) 7rem; align-items: center; gap: .6rem; padding: .5rem; border-bottom: 1px solid #dbeaf0; line-height: 1.35; }.m-crossword-clue:last-child { border-bottom: 0; }.m-crossword-clue em { color: #658195; font-size: .86rem; }.m-crossword-clue input { min-width: 0; text-transform: lowercase; }
@media (max-width: 900px) { .m-modal-grid, .m-task-grid, .m-crossword-columns, .m-context-grid { grid-template-columns: 1fr; }.m-conditions { grid-template-columns: 1fr; }.m-word-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .m-word-grid { grid-template-columns: 1fr; }.m-crossword-heading { display: block; }.m-crossword-badge { display: inline-block; margin-bottom: 1rem; }.m-crossword-clue { grid-template-columns: 1fr; } }