* { box-sizing: border-box; }
  .page {
    width: 800px;
    height: 1080px;
    background: #fff;
    position: relative;
    margin: 0 auto;
    padding: 40px 70px 50px 70px;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 21px;
    line-height: 1.7;
    color: #1a1a1a;
    overflow: hidden;
  }
  .runhead {
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #000;
    padding-bottom: 8px;
    transform: translateY(-10px);
  }

  .gloss-row { display: flex; margin: 0; }
  .gloss-row .gloss {
    font-size: 16px; font-style: italic; color: #333;
    width: 125px; flex: 0 0 125px;
    text-align: left; padding-right: 14px;
  }
  .gloss-row .main { flex: 1 1 auto; padding-left: 14px; border-left: 1.5px solid #000; }

  .gloss-row.mgl-right .main { order: 1; padding-left: 0; padding-right: 14px; border-left: none; border-right: 1.5px solid #000; }
  .gloss-row.mgl-right .gloss { order: 2; padding-right: 0; padding-left: 14px; text-align: left; }

  .moustache { display: flex; align-items: stretch; }
  .ms-col { display: block; }
  .ms-brace { width: 11px; flex: 0 0 11px; margin: 0 3px; align-self: stretch; transform: scaleX(-1); }
  .ms-target { display: flex; align-items: center; }

  p { margin: 12px 0; }
  .float-fig { float: right; width: 128px; margin: 4px 0 8px 16px; }
  .float-fig img { width: 100%; display: block; }
  .tree-img { display: block; margin: 0 auto 10px; width: 380px; }
  .kids-img { display: block; margin: 0 auto 10px; width: 340px; }

  .lesson-title { text-align: center; font-family: monospace; font-size: 20px; margin: 0 0 6px; }
  .lesson-sub { text-align: center; font-size: 20px; font-weight: bold; margin-bottom: 10px; }

  .item-title { font-weight: bold; margin: 18px 0 8px; }
  .word-table { margin: 6px 0; }
  .word-table .row { display: flex; padding: 2px 0; }
  .word-table .row .letter { font-weight: bold; width: 34px; flex: 0 0 34px; }
  .word-table .row span { width: 56px; flex: 0 0 56px; }
  .word-table .row.gap { margin-top: 10px; }

  .alfabeto-grid { display: grid; grid-template-columns: repeat(14, 1fr); text-align: center; font-weight: bold; font-size: 17px; row-gap: 8px; margin: 10px 0; }

  .plainlist p { margin: 8px 0; }

  .cover-label { font-weight: bold; font-size: 22px; margin-bottom: 4px; }
  .cover-title { font-size: 56px; font-weight: bold; line-height: 1.15; margin-bottom: 24px; }
  .cover-img { width: 420px; display: block; margin: 0 auto; border: 1px solid #999; }
  .cover-caption { text-align: center; margin-top: 18px; font-size: 20px; font-weight: bold; }

  .colophon { margin-top: 400px; font-weight: bold; }
  .colophon h4 { font-size: 20px; margin: 22px 0 4px; font-weight: bold; }
  .colophon .names { font-size: 17px; }
  .colophon .addr-big { font-size: 20px; }

  .titlepage { text-align: center; margin-top: 50px; }
  .titlepage .kicker { font-weight: bold; font-size: 22px; text-align: left; margin-bottom: 8px; }
  .titlepage .main { font-size: 32px; font-weight: bold; text-align: left; margin-bottom: 34px; }
  .titlepage .edition { font-size: 20px; letter-spacing: 2px; margin: 226px 0 0; }
  .titlepage .author { font-size: 22px; margin: 320px 0 8px; }
  .titlepage .pub { font-size: 19px; margin-top: 20px; }

  .hanako-img { display: block; margin: 0 auto 12px; width: 260px; }
  .house-img { display: block; margin: 0 auto 12px; width: 320px; }

  .gloss-row .gloss { position: relative; }
  .margin-hang { position: absolute; top: 1.7em; left: 0; right: 14px; }
  .gloss-row.mgl-right .margin-hang { left: 14px; right: 0; }
  .margin-fig { display: block; margin: 4px 0 8px; text-align: center; font-size: 13px; line-height: 1.3; }
  .margin-fig img { max-width: 96px; display: block; margin: 0 auto 2px; }

  .gloss .skip { display: block; height: calc(35.7px * var(--n, 1)); }
  .rd-ok { color: #2f6b3a; font-style: normal; }   /* «legu … sed ne …»: верно / неверно */
  .rd-no { color: #a33; font-style: normal; }
  .gloss .at { position: absolute; left: 0; top: calc(35.7px * var(--l, 0)); white-space: nowrap; }
  .gloss-row.mgl-right .gloss .at { left: 14px; }
  .garden-img { display: block; margin: 0 auto 10px; width: 440px; }

  /* float that starts N lines below the top of its paragraph (zero-width spacer + clear) */
  .fl-gap { float: left; width: 0; height: calc(35.7px * var(--n, 1)); }
  .fl-gap.r { float: right; }
  .fl-after { float: left; clear: left; margin: 4px 14px 0 0; }
  .fl-after.r { float: right; clear: right; margin: 4px 0 0 14px; }
  .fig-pair { display: flex; gap: 12px; align-items: flex-end; font-size: 16px; font-style: italic; line-height: 1.3; text-align: center; }
  .fig-pair img { display: block; margin: 0 auto 2px; }

  .jmap { position: relative; width: 600px; margin: 14px auto 0; border: 1.5px solid #000; font-size: 17px; line-height: 1; }
  .jmap img { display: block; width: 100%; }
  .jmap .lb { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; }
  .jmap .lb.v1 { transform: translate(-50%, -50%) rotate(-90deg); }
  .jmap .lb.v2 { transform: translate(-50%, -50%) rotate(90deg); }

  .lesson-head6 { position: relative; }
  .lesson-head6 img { display: block; width: 415px; margin-left: auto; }
  .lesson-head6 .ttl { position: absolute; left: 0; top: 0; width: 215px; text-align: center; }
  .lesson-head6 .ttl .lesson-sub { font-size: 22px; line-height: 1.5; }

  .lesson-head7 { position: relative; }
  .lesson-head7 img { display: block; width: 100%; }
  .lesson-head7 .ttl { position: absolute; right: 0; top: 4px; width: 330px; text-align: center; background: rgba(255,255,255,.85); }
  .lesson-head7 .ttl .lesson-sub { margin-bottom: 4px; }

  .lesson-head8 { position: relative; height: 420px; margin-bottom: 8px; }
  .lesson-head8 img { position: absolute; right: 0; top: 0; width: 450px; }
  .lesson-head8 .ttl { position: absolute; left: 0; top: 4px; text-align: left; }
  .lesson-head8 .ttl .lesson-title { text-align: left; }
  .lesson-head8 .ttl .lesson-sub { text-align: left; font-size: 24px; }

  .gloss .glist { line-height: 1.22; }

  .kalendaro { margin: 22px 0 0; }
  .kalendaro .k-ttl { text-align: center; font-weight: bold; margin-bottom: 4px; }
  .kalendaro .k-box { border: 1.5px solid #000; padding: 6px 10px 12px; font-family: Arial, Helvetica, sans-serif; background: #fff; }
  .kalendaro .k-month { text-align: center; font-style: italic; font-size: 22px; }
  .kalendaro .k-grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 18px; row-gap: 14px; margin-top: 8px; }
  .kalendaro .k-grid b { font-size: 16px; }

  .tablo-fig { width: 300px; margin: 4px -128px 6px 12px !important; position: relative; z-index: 1; background: #fff; font-size: 16px; line-height: 1.3; }
  .tablo-fig img { display: block; width: 100%; }
  .tablo-fig .cap { display: flex; justify-content: space-between; padding: 0 0 0 22px; }

  .gloss .brace-l { border-left: 1.5px solid #000; border-radius: 6px 0 0 6px; padding-left: 5px; line-height: 1.35; }

  .lesson-head10 { position: relative; margin: 0 0 6px; }
  .lesson-head10 img { display: block; width: 660px; }
  .lesson-head10 .ttl { position: absolute; left: 139px; right: 0; top: 0; text-align: center; }

  .lesson-head12 { position: relative; height: 436px; margin-bottom: 8px; }
  .lesson-head12 img { position: absolute; right: 0; top: 100px; width: 446px; }
  .lesson-head12 .ttl { position: absolute; left: 136px; top: 0; }

  .letter { margin: 2px 0 0; }
  .letter .l-date { text-align: right; }
  .letter .l-close { display: flex; flex-direction: column; margin-top: 2px; }
  .letter .l-close .r { padding-left: 45%; }

  .lesson-head13 { position: relative; margin-bottom: 8px; }
  .lesson-head13 img { display: block; width: 560px; margin: -6px auto 0; }

  .princino-fig { width: 230px; margin: 4px -128px 6px 12px !important; position: relative; z-index: 1; background: #fff; }
  .princino-fig img { display: block; width: 100%; }

  .lesson-head15 { position: relative; margin-bottom: 6px; }
  .lesson-head15 img { display: block; width: 520px; margin-top: -30px; }
  .lesson-head15 .ttl { position: absolute; right: 0; top: 52px; margin: 0; background: rgba(255,255,255,.85); padding: 0 4px; }
  .supersigno { display: inline-flex; align-items: flex-end; font-size: 30px; font-style: normal; line-height: 1; }

  .panel16 img { display: block; width: 100%; }
  .panel16 .labels { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 22px;
    background-color: #ececec; background-image: radial-gradient(#b0b0b0 0.7px, transparent 0.9px); background-size: 3px 3px; margin-bottom: 14px; }

  .ex { display: block; padding-left: 22px; margin: 2px 0; }
  .ex0 { display: block; padding-left: 22px; margin: 2px 0; }
  .fish-row { display: flex; align-items: center; gap: 16px; padding-left: 22px; height: 52px; }
  .tempo { display: grid; grid-template-columns: 230px 1fr; padding-left: 22px; margin: 2px 0 4px; }
  .pairs { display: grid; grid-template-columns: 1fr; padding-left: 12px; margin-top: 4px; line-height: 1.55; }
  .pairs i:nth-child(even) { padding-left: 110px; }

  .dotbg { background-color: #ececec; background-image: radial-gradient(#b0b0b0 0.7px, transparent 0.9px); background-size: 3px 3px; }
  .famchart { position: relative; width: 270px; height: 150px; margin: 6px 6px 4px 12px !important; z-index: 1; border: 1px solid #999;
    box-shadow: 5px 5px 0 #222; font-family: Arial, Helvetica, sans-serif; font-size: 17px; line-height: 1;
    background-color: #ececec; background-image: radial-gradient(#b0b0b0 0.7px, transparent 0.9px); background-size: 3px 3px; }
  .famchart .n { position: absolute; transform: translate(-50%, -50%); }
  .famchart .akio { left: 35px; top: 26px; } .famchart .satoko { left: 222px; top: 26px; }
  .famchart .makoto { left: 44px; top: 124px; } .famchart .hanako { left: 136px; top: 124px; } .famchart .tomio { left: 228px; top: 124px; }
  .famchart .l { position: absolute; background: #000; }
  .famchart .l1 { left: 70px; top: 25px; width: 115px; height: 2px; } .famchart .l2 { left: 128px; top: 25px; width: 2px; height: 80px; }
  .famchart .l3 { left: 44px; top: 64px; width: 184px; height: 2px; } .famchart .l4 { left: 44px; top: 64px; width: 2px; height: 42px; }
  .famchart .l5 { left: 227px; top: 64px; width: 2px; height: 42px; } .famchart .l6 { left: 128px; top: 64px; width: 2px; height: 42px; }

  .jmap2 { position: relative; width: 250px; margin: 6px -128px 6px 12px !important; z-index: 1; background: #fff; border: 1.5px solid #000;
    font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1; }
  .jmap2 img { display: block; width: 100%; }
  .jmap2 .lb { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; }

  .stupoj-fig { margin: 0 12px 0 -60px !important; position: relative; z-index: 1; }
  .stupoj-fig img { display: block; width: 150px; }

  .longa-fig { margin: 4px -132px 4px 10px !important; position: relative; z-index: 1; border: 1px solid #999; padding: 2px 6px 0;
    background-color: #ececec; background-image: radial-gradient(#b0b0b0 0.7px, transparent 0.9px); background-size: 3px 3px; }
  .longa-fig svg { display: block; width: 220px; height: auto; }
  .statuo-fig { margin: 4px -8px 4px 10px !important; }
  .statuo-fig img { display: block; width: 190px; }
  .poem { display: block; padding-left: 24px; }

  .muzeo-fig { margin: 4px 0 6px 12px !important; }
  .muzeo-fig img { display: block; width: 280px; }

  .lesson-head18 { position: relative; height: 345px; margin-bottom: 6px; }
  .lesson-head18 img { position: absolute; left: 70px; top: 30px; width: 380px; }
  .lesson-head18 .t1 { position: absolute; left: 0; top: 0; font-weight: bold; font-size: 26px; z-index: 1; }
  .lesson-head18 .t2 { position: absolute; right: -8px; top: 0; font-weight: bold; font-size: 26px; line-height: 1.2; z-index: 1; background: rgba(255,255,255,.9); padding: 0 4px; }

  .mantuko-fig { margin: 0 12px 4px -150px !important; position: relative; z-index: 1; }
  .mantuko-fig img { display: block; width: 190px; }

  .photo-cap { text-align: center; margin-bottom: 8px; font-size: 18px; line-height: 1.3; }
  .photo-cap img { display: block; margin: 0 auto 4px; }
  .pmap { position: relative; display: block; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1; }
  .pmap img { display: block; width: 100%; }
  .pmap .lb { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; }

  .numlist { margin: 2px 0; padding-left: 50px; }
  .numlist li { padding-left: 6px; }
  .numlist li.cont { list-style: none; }
  .sv { display: inline-flex; gap: 60px; padding-left: 10px; }
  .invitilo { width: 260px; margin: 6px 0 6px 14px !important; padding: 10px 14px; border: 4px double #000; outline: 1.5px solid #000; outline-offset: 3px;
    display: flex; flex-direction: column; text-align: center; font-size: 20px; line-height: 1.55; }
  .invitilo .r { text-align: right; }

  .lesson-head25 { position: relative; height: 400px; margin-bottom: 8px; }
  .lesson-head25 img { position: absolute; right: 0; top: 0; width: 360px; }
  .lesson-head25 .ttl { position: absolute; left: 0; top: 0; font-weight: bold; font-size: 28px; line-height: 1.5; }

  .vocab .nv { font-style: italic; font-family: Georgia, serif; font-size: 20px; }
  .vocab .v-title { font-weight: bold; font-size: 26px; margin: 10px 0 8px; }
  .vocab .vcols { list-style: none; margin: 0; padding: 0 0 0 24px; column-count: 4; column-gap: 18px; column-rule: 1.2px solid #000; column-fill: balance; font-size: 20px; line-height: 1.6; }
  .vocab .vcols li { break-inside: avoid; }

  .ftree { position: relative; float: right; width: 380px; height: 340px; margin: 0 -140px 10px 14px; background: #fff; border: 1px solid #999; box-shadow: 2px 2px 4px; font-size: 15px; line-height: 18px; }
  .ftree > * { position: absolute; }
  .ftree .ttl { left: 0; right: 0; top: 10px; text-align: center; font-style: italic; font-size: 17px; }
  .ftree .lb { transform: translate(-50%, -50%); white-space: nowrap; }
  .ftree .h { height: 2px; background: #000; }
  .ftree .v { width: 2px; background: #000; }
  .ftree .c { width: 22px; height: 22px; border: 2px solid #000; border-radius: 50%; background: #fff; }
  .ftree img { display: block; }

  .minitree { font-size: 15px; text-align: center; float: right; width: 200px; margin: 0 0 8px 14px; border: 1px solid #999; padding: 8px 10px; box-shadow: 2px 2px 4px; }
  .minitree .row1 { display: flex; justify-content: space-between; align-items: center; gap: 70px; margin-bottom: 0; position: relative; }
  .minitree .row1 span { background: #fff; z-index: 1; padding: 0 3px; width: 50px; }
  .minitree .row1::after { content: ''; position: absolute; left: 26%; right: 26%; top: 50%; border-top: 2px solid #000; z-index: 0; }
  .minitree .stem { width: 2px; height: 20px; background: #000; margin: -11px auto 0; }
  .minitree .hline { height: 2px; background: #000; margin: 0 26px; }
  .minitree .row2 { display: flex; justify-content: space-between; margin-top: 20px; }
  .minitree .row2 span { position: relative; width: 54px; }
  .minitree .row2 span::before { content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: 100%; width: 2px; height: 20px; background: #000; }
  /* v2: книжный формат */ .page{width:740px;height:1000px;padding:30px 40px;line-height:1.55} .fl-gap{height:calc(1lh * var(--n, 1))} .gloss .skip{height:calc(1lh * var(--n, 1))}