.chapter { padding-top: 40px; }
.hero { padding-bottom: 40px; }
.has-view { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); align-items: center; gap: 40px; }
.intro > * + * { margin-top: 20px; }
.intro .cap { padding-left: 14px; border-left: 6px solid var(--green); }
.lead { font-size: 21px; line-height: 1.55; max-width: 62ch; }
.frame { border: 2px solid var(--line); border-radius: 16px; padding: 16px 20px; font-size: 18px; line-height: 1.45; max-width: 52ch; }
.view { border: 2px solid var(--line); border-radius: 40px 40px 24px 40px; padding: 10px; background: var(--paper); }
.scene { border-radius: 30px 30px 16px 30px; background: var(--tile); overflow: hidden; }
.scene img { width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; color: var(--ink); font-size: 16px; line-height: 1.4; }
.lesson { display: grid; grid-template-columns: minmax(0, 275px) minmax(0, 1fr); gap: 50px; border-top: 2px solid var(--line); padding-top: 28px; }
.answers { min-width: 0; }
.answer { padding-block: 28px 36px; border-bottom: 2px solid var(--line); }
.answer:first-child { padding-top: 4px; }
.answer h2 { margin-bottom: 20px; }
.answer p { max-width: 68ch; }
.answer p + p { margin-top: 16px; }
.checks { padding: 0; list-style: none; margin-top: 22px; display: grid; gap: 10px; }
.checks li { position: relative; background: var(--tile); padding: 17px 18px 17px 52px; border-radius: 16px; min-height: 56px; font-size: 18px; }
.checks li::before { content: ""; position: absolute; width: 18px; height: 18px; left: 18px; top: 23px; border: 2px solid var(--ink); background: var(--paper); border-radius: 5px; }
.next { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-block: 44px 60px; padding: 26px; border: 2px solid var(--line); border-radius: 24px; }
.next .cap { width: 100%; }
#urgent { border: 2px solid var(--red); border-left-width: 8px; border-radius: 20px; padding: 24px; margin-block: 16px 24px; }
@media (max-width: 919px) {
  .lesson { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .has-view { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .view { max-width: 560px; }
  .hero { padding-bottom: 32px; }
}
@media (max-width: 640px) {
  .chapter { padding-top: 26px; }
  .lead { font-size: 20px; }
  .view { border-radius: 28px; }
  .scene { border-radius: 20px; }
  .scene img { aspect-ratio: 8 / 5; }
  .next { padding: 22px 18px; margin-bottom: 40px; }
  .answer { padding-block: 24px 30px; }
  #urgent { padding: 20px 16px; }
}
@media print {
  .w { max-width: none; padding: 0; }
  .lesson, .has-view { display: block; }
  .skip, .jump, .view, .next, .foot nav { display: none; }
  .chapter, .hero { padding-top: 0; }
  body { font-size: 16px; }
  .answer, .checks li { break-inside: avoid; }
  .btn, .node { box-shadow: none; }
}