/* Block 10 «Курс-фундамент для рівня A2» (#for; Masha 17.10: «для кого курс - непонятно», «курс-фундамент, база»,
   «все по полочкам, начинаем говорить»; owner.eye nb r1: one «по поличках» in the lead, traces of old study, not pain;
   the filed state an album object; the same pill both ways; off the kraft and out of the plate).
   A band of its own ground, «стіл» (the birch desk the album lies on: day #F0E2C2, night #241E15 under the lamp). On the
   desk one object: an album page with three empty nests in black photo corners, and on it what is left of the years of
   study - a cut-out textbook rule (Present Simple), a tense table on squared paper with a pencil «?», an aqua sticky note
   with words. «Розкласти ›» (or a tap on the pile) files each into its nest: the papers square up in the corners and the
   page names its place in the course (Present Simple · урок 2, Present Perfect · уроки 19–21, Ваше речення вголос ·
   кожен урок; content/generated/course.json, #lesson). Mary's one line answers. Under the desk, a paper ruler of levels
   with Mary's pencil ring round A2: «З нуля? Steps ›», «English Core», «Вже говорите? Занурення ›».
   The desk keeps one height in both states. Motion only transform / translate / rotate / opacity / stroke-dashoffset, under
   no-preference and html.kd-mo. 393 first. This sheet is render-blocking (the block stands in the first scroll). */

.kd-b10 {
  /* the papers (w × h), the nests' column x, the gap between shelves, the page's top and bottom air */
  --b10-w0: 156px; --b10-h0: 74px; --b10-w1: 180px; --b10-h1: 86px; --b10-w2: 100px; --b10-h2: 92px;
  --b10-nx: 26px; --b10-g: 12px; --b10-pt: 14px;
  /* the captions stand in one column right of the widest paper (the shelves read as one order) */
  --b10-capx: calc(max(var(--b10-w0), var(--b10-w1), var(--b10-w2)) + 14px);
  --b10-y0: var(--b10-pt);
  --b10-y1: calc(var(--b10-y0) + var(--b10-h0) + var(--b10-g));
  --b10-y2: calc(var(--b10-y1) + var(--b10-h1) + var(--b10-g));
  --b10-h: calc(var(--b10-y2) + var(--b10-h2) + var(--b10-pt));
  /* loose on the page's right half: offsets from each nest and the turn (read from the top) */
  --b10-0x: 150px; --b10-0y: 20px; --b10-0r: -8deg;
  --b10-1x: 56px; --b10-1y: 40px; --b10-1r: 6deg;
  --b10-2x: 212px; --b10-2y: -12px; --b10-2r: -5deg;
  /* filed: a breath of a turn, as a hand leaves paper in its corners */
  --b10-0f: -.6deg; --b10-1f: .5deg; --b10-2f: -.8deg;
  /* the papers: a textbook's white, squared paper, the aqua of the album's world for the sticky note; graphite and pen */
  --b10-pa: #FBF8F1; --b10-pb: #F7F4EC; --b10-stick: #D4ECE9; --b10-lead: #4A443D; --b10-pen: #23324F; --b10-grid: rgb(52 94 141 / 14%);
  --b10-teal: #185B59; --b10-tick: #4A443D;
  --b10-fly: .62s; --b10-ease: var(--kd-dev);
}
/* the desk's ground (a world of this block, not a new :root token): light birch by day, the desk under the lamp at night */
.kd-b10[data-world] { --world: #F0E2C2; --world-deep: #EDDCB8; }
.kd-band.kd-b10 { background: var(--tex-desk) 0 0 / 128px, var(--tex-paper) 0 0 / 220px, radial-gradient(120% 90% at 85% 0%, var(--world-deep), var(--world) 62%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kd-b10 { --b10-pa: #D6CEBF; --b10-pb: #D2CBBD; --b10-stick: #A9C6C2; --b10-grid: rgb(52 94 141 / 12%); }
  :root:not([data-theme="light"]) .kd-b10[data-world] { --world: #241E15; --world-deep: #2C2418; }
  :root:not([data-theme="light"]) .kd-band.kd-b10 { background: radial-gradient(80% 70% at 86% 4%, rgb(255 196 128 / 13%), transparent 70%),
    var(--tex-desk) 0 0 / 128px, radial-gradient(120% 90% at 85% 0%, var(--world-deep), var(--world) 62%); }
}
:root[data-theme="dark"] .kd-b10 { --b10-pa: #D6CEBF; --b10-pb: #D2CBBD; --b10-stick: #A9C6C2; --b10-grid: rgb(52 94 141 / 12%); }
:root[data-theme="dark"] .kd-b10[data-world] { --world: #241E15; --world-deep: #2C2418; }
:root[data-theme="dark"] .kd-band.kd-b10 { background: radial-gradient(80% 70% at 86% 4%, rgb(255 196 128 / 13%), transparent 70%),
  var(--tex-desk) 0 0 / 128px, radial-gradient(120% 90% at 85% 0%, var(--world-deep), var(--world) 62%); }

/* the paper air between the first screen's plate and this band (#first ends at its plate) */
/* f1 · the page step under the first screen's plate: 48 px on a desk (owner.eye: ~100 px of dead paper), 24 on a phone */
.kd-sec.kd-b10 { margin-top: clamp(24px, 12px + 2.5vw, 48px); }
.kd-b10 .kd-h2 { margin: 0 0 10px; text-wrap: balance; }
.kd-b10 .kd-lead { margin: 0; max-width: 36ch; text-wrap: pretty; }

/* ---------- the desk: one held height; the album page under, the papers over it, each placed by transform only ---------- */
.kd-b10-desk { position: relative; height: var(--b10-h); margin-top: 20px; }
.kd-b10-page { position: absolute; inset: 0; border-radius: 2px 5px 5px 2px; background: var(--sheet) var(--tex-paper); background-size: 160px;
  box-shadow: var(--print-rim), var(--kd-sh-sheet), 6px 14px 28px -10px rgb(var(--cast-rgb) / 22%); }
/* the album's cloth at the page's spine and the gutter's shade beside it */
.kd-b10-page::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 10px; border-radius: 2px 0 0 2px;
  background: var(--cloth) var(--tex-cloth); background-size: 96px; box-shadow: inset -1px 0 0 rgb(0 0 0 / 22%); }
.kd-b10-page::after { content: ""; position: absolute; top: 0; bottom: 0; left: 10px; width: 14px; pointer-events: none;
  background: linear-gradient(90deg, rgb(var(--cast-rgb) / 16%), transparent); }
/* the nests: debossed, the size of their paper, four black corners waiting */
.kd-b10-nest { position: absolute; left: var(--b10-nx); border-radius: 2px; box-shadow: var(--paper-deboss); }
.kd-b10-nest:nth-child(1) { top: var(--b10-y0); width: var(--b10-w0); height: var(--b10-h0); }
.kd-b10-nest:nth-child(2) { top: var(--b10-y1); width: var(--b10-w1); height: var(--b10-h1); }
.kd-b10-nest:nth-child(3) { top: var(--b10-y2); width: var(--b10-w2); height: var(--b10-h2); }
.kd-b10 .kd-corner { --cw: 11px; --kd-corner-in: -2px; z-index: 0; }
.kd-b10-desk[data-state="mess"] .kd-corner { opacity: .5; }
/* f1 · the empty nests at rest say what waits for them: a pale pencil name in each (owner.eye: «три пустые рамки… недоделка») */
.kd-b10-ghost { position: absolute; left: 9px; top: 7px; right: 8px; color: var(--b10-lead); font: 400 14px/1.15 var(--font-hand);
  font-variation-settings: var(--hand-axes); opacity: .4; rotate: -1.5deg; pointer-events: none; }
.kd-b10-nest:nth-child(3) .kd-b10-ghost { top: auto; bottom: 8px; }
.kd-b10-desk[data-state="order"] .kd-b10-ghost { opacity: 0; }

/* the papers: each sits on its nest, moved off it while loose */
.kd-b10-pile { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.kd-b10-bit { position: absolute; left: var(--b10-nx); display: block; transform: translate(var(--x, 0px), var(--y, 0px)); }
.kd-b10-bit:nth-child(1) { top: var(--b10-y0); --x: var(--b10-0x); --y: var(--b10-0y); --r: var(--b10-0r); --w: var(--b10-w0); --h: var(--b10-h0); }
.kd-b10-bit:nth-child(2) { top: var(--b10-y1); --x: var(--b10-1x); --y: var(--b10-1y); --r: var(--b10-1r); --w: var(--b10-w1); --h: var(--b10-h1); }
.kd-b10-bit:nth-child(3) { top: var(--b10-y2); --x: var(--b10-2x); --y: var(--b10-2y); --r: var(--b10-2r); --w: var(--b10-w2); --h: var(--b10-h2); }
.kd-b10-desk[data-state="order"] .kd-b10-bit { --x: 0px; --y: 0px; }
.kd-b10-desk[data-state="order"] .kd-b10-bit:nth-child(1) { --r: var(--b10-0f); }
.kd-b10-desk[data-state="order"] .kd-b10-bit:nth-child(2) { --r: var(--b10-1f); }
.kd-b10-desk[data-state="order"] .kd-b10-bit:nth-child(3) { --r: var(--b10-2f); }
/* filed, the corners hold the papers: they come over them */
.kd-b10-desk[data-state="order"] .kd-corner { z-index: 1; }

.kd-b10-p { position: relative; display: block; box-sizing: border-box; width: var(--w); height: var(--h); overflow: hidden; color: var(--paper-ink);
  border-radius: 1px; rotate: var(--r, 0deg); transform-origin: 30% 60%; box-shadow: var(--print-rim), var(--kd-sh-sheet); }
/* the lift of a loose paper: a second shadow that fades when it lies in its corners (opacity only) */
.kd-b10-bit::before { content: ""; position: absolute; left: 0; top: 0; width: var(--w); height: var(--h); rotate: var(--r, 0deg); transform-origin: 30% 60%;
  box-shadow: var(--kd-sh-print); pointer-events: none; }
.kd-b10-desk[data-state="order"] .kd-b10-bit::before { opacity: 0; }

/* 1 · the cut-out rule of a school textbook: a printed heading and the rule's tinted box, the -s ringed in pencil */
.kd-b10-rule { display: grid; align-content: start; gap: 6px; padding: 9px 11px 0; background: var(--tex-paper) 0 0 / 160px, var(--b10-pa); }
.kd-b10-rule b { font: 600 15px/18px var(--font-display); letter-spacing: -.01em; }
.kd-b10-box { justify-self: start; padding: 4px 7px 5px; border-left: 3px solid rgb(52 94 141 / 55%); background: rgb(52 94 141 / 9%);
  font: 500 13px/17px var(--font-body); white-space: nowrap; }
.kd-b10-pen { position: relative; margin-left: 5px; font-weight: 700; }
.kd-b10-pen::after { content: ""; position: absolute; left: -4px; right: -5px; top: -3px; bottom: -3px; border: 1.3px solid var(--b10-lead);
  border-radius: 48% 52% 45% 55%; opacity: .7; rotate: -8deg; }

/* 2 · a tense table drawn in pencil on squared paper; one cell is a «?» */
.kd-b10-tbl { padding: 7px 8px; background: linear-gradient(var(--b10-grid) 1px, transparent 1px) 0 0 / 100% 10px,
  linear-gradient(90deg, var(--b10-grid) 1px, transparent 1px) 0 0 / 10px 100%, var(--b10-pb); }
.kd-b10-grid3 { display: grid; grid-template-columns: auto 1fr 1fr; grid-template-rows: repeat(3, 1fr); height: 100%; color: var(--b10-lead);
  font: 400 13px/16px var(--font-hand); font-variation-settings: var(--hand-axes); }
.kd-b10-grid3 i { display: flex; align-items: center; justify-content: center; padding: 0 3px; font-style: normal; border: 0 solid rgb(74 68 61 / 62%); }
.kd-b10-grid3 i:nth-child(n+4) { border-top-width: 1.2px; }
.kd-b10-grid3 i:not(:nth-child(3n+1)) { border-left-width: 1.2px; }
.kd-b10-grid3 i:nth-child(3n+1) { justify-content: start; padding-left: 0; }
.kd-b10-q { display: block; color: var(--b10-pen); font-size: 22px; font-weight: 600; line-height: 1; rotate: 8deg; }

/* 3 · an aqua sticky note with three words in the learner's pen; its glue strip a shade darker */
.kd-b10-note { display: grid; align-content: center; gap: 1px; padding: 8px 10px 6px; color: var(--b10-pen);
  background: linear-gradient(rgb(0 0 0 / 5%), transparent 16px), var(--tex-paper) 0 0 / 160px, var(--b10-stick);
  font: 400 15px/20px var(--font-hand); font-variation-settings: var(--hand-axes); }

/* the page's caption beside each nest: the place of that paper in the course (shown once filed) */
.kd-b10-cap { position: absolute; top: 50%; left: var(--b10-capx); display: grid; gap: 1px; width: max-content; max-width: var(--b10-cw, 140px);
  color: var(--paper-ink); opacity: 0; transform: translate(-8px, -50%); pointer-events: none; }
.kd-b10-cap b { font: 500 16px/19px var(--font-display); letter-spacing: -.01em; text-wrap: balance; }
.kd-b10-cap span:not(.kd-vh) { color: var(--paper-muted); font: 600 13px/16px var(--font-body); }
.kd-b10-desk[data-state="order"] .kd-b10-cap { opacity: 1; transform: translate(0, -50%); }
/* f1 · a touched paper keeps its lesson's sentence beside it, in the learner's pen, until the next touch (interaction.touch) */
.kd-b10-say { display: none; margin-top: 1px; color: var(--b10-pen); font: 400 14px/17px var(--font-hand); font-style: normal;
  font-variation-settings: var(--hand-axes); text-wrap: pretty; }
.kd-b10-bit[data-peek] .kd-b10-cap span:not(.kd-vh) { display: none; }
.kd-b10-bit[data-peek] .kd-b10-say { display: block; }
.kd-b10-desk[data-state="order"] .kd-b10-bit { cursor: pointer; }
.kd-b10-bit:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

/* ---------- the way to file them: one pill for both words, and Mary's line once they are filed ---------- */
.kd-b10-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-height: 64px; margin-top: 12px; }
.kd-b10-go { display: inline-grid; justify-items: center; flex: none; }
.kd-b10-go[hidden] { display: none; }
.kd-b10-go > span { grid-area: 1 / 1; }
.kd-b10-go-b, .kd-b10-desk[data-state="order"] ~ .kd-b10-act .kd-b10-go-a { visibility: hidden; }
.kd-b10-desk[data-state="order"] ~ .kd-b10-act .kd-b10-go-b { visibility: visible; }
.kd-b10-mary { flex: 1 1 170px; margin: 0; color: var(--ink-2); font: italic 400 15px/20px var(--font-display); text-wrap: pretty; opacity: .82; }
.kd-b10-desk[data-state="order"] ~ .kd-b10-act .kd-b10-mary { opacity: 1; color: var(--ink); }
.kd-b10[data-js] .kd-b10-pile { cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* ---------- the ruler of levels: a paper ruler on the desk, the ways under it in words ---------- */
.kd-b10-foot { display: grid; justify-items: center; margin-top: 18px; }
.kd-b10-scale { position: relative; width: 100%; padding: 13px 0 6px; border-radius: 3px; background: var(--tex-paper) 0 0 / 160px, var(--b10-pa);
  box-shadow: var(--print-rim), var(--kd-sh-sheet), 3px 8px 14px -8px rgb(var(--cast-rgb) / 24%); }
/* its ticks: small ones every 4 %, the five levels' long ones are their own marks */
.kd-b10-scale::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; opacity: .55;
  background: linear-gradient(90deg, var(--b10-tick) 1px, transparent 1px) 2% 0 / 4% 100% repeat-x; }
.kd-b10-marks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; text-align: center;
  color: var(--b10-lead); font: 700 13px/18px var(--font-body); letter-spacing: .04em; }
.kd-b10-marks li { position: relative; }
.kd-b10-marks li::before { content: ""; position: absolute; top: -13px; left: 50%; width: 1.2px; height: 10px; background: var(--b10-tick); }
.kd-b10-marks .kd-b10-here { color: var(--b10-teal); }
/* Mary's pencil ring round A2 (drawn once when the ruler stands clear of the dock) */
.kd-b10-ring { position: absolute; top: -9px; left: 50%; width: 58px; height: 34px; overflow: visible; fill: none; stroke: var(--b10-teal); stroke-width: 1.6;
  stroke-linecap: round; opacity: .85; translate: -50% 0; pointer-events: none; }
/* under non-scaling-stroke Chrome measures the dash on screen, longer than pathLength 1: a pattern of 2 covers the whole ring */
.kd-b10-ring path { stroke-dasharray: 2; vector-effect: non-scaling-stroke; }

/* the ways: under A0-A1 and under B1-B2, the course itself under the ring */
.kd-b10-ways { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 1.4fr); width: 100%; margin: 6px 0 0; padding: 0;
  list-style: none; text-align: center; }
.kd-b10-ways li { display: flex; flex-direction: column; align-items: center; }
.kd-b10-who { margin-top: 4px; color: var(--ink-2); font: 500 13px/18px var(--font-body); white-space: nowrap; }
.kd-b10-to, .kd-b10-lvl { display: inline-flex; align-items: center; min-height: 44px; color: var(--link); font: 600 15px/20px var(--font-body);
  text-decoration: none; white-space: nowrap; }
.kd-b10-core b { display: flex; align-items: center; min-height: 66px; color: var(--world-ink); font: italic 500 18px/22px var(--font-display);
  letter-spacing: -.01em; white-space: nowrap; }
.kd-b10-to:hover, .kd-b10-lvl:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .22em; }
.kd-b10-to:focus-visible, .kd-b10-go:focus-visible, .kd-b10-lvl:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 8px; }
.kd-b10-lvl { margin-top: 2px; }

/* ---------- motion: the papers land one by one; filed they fly into their corners, the page names them ---------- */
@media (prefers-reduced-motion: no-preference) {
  .kd-mo .kd-b10[data-js] .kd-b10-bit { transition: transform var(--b10-fly) var(--b10-ease) calc(var(--i, 0) * 70ms), translate .3s var(--ease-out),
    rotate .3s var(--ease-out); }
  .kd-mo .kd-b10[data-js] .kd-b10-desk[data-state="mess"] .kd-b10-bit { transition-delay: calc((2 - var(--i, 0)) * 50ms), 0s, 0s; }
  .kd-mo .kd-b10[data-js] .kd-b10-p { transition: rotate var(--b10-fly) var(--b10-ease) calc(var(--i, 0) * 70ms); }
  .kd-mo .kd-b10[data-js] .kd-b10-bit::before { transition: rotate var(--b10-fly) var(--b10-ease) calc(var(--i, 0) * 70ms), opacity .3s var(--ease-out) .2s; }
  .kd-mo .kd-b10[data-js] .kd-b10-desk[data-state="mess"] .kd-b10-bit::before { transition-delay: 0s, 0s; }
  /* the corners close over a paper as it arrives */
  .kd-mo .kd-b10[data-js] .kd-b10-desk[data-state="order"] .kd-corner { transition: z-index 0s linear calc(.32s + var(--i, 0) * 70ms); }
  .kd-mo .kd-b10[data-js] .kd-b10-cap { transition: opacity .16s var(--ease-out), transform .2s var(--ease-out); }
  .kd-mo .kd-b10[data-js] .kd-b10-desk[data-state="order"] .kd-b10-cap { transition: opacity .3s var(--ease-out) calc(.42s + var(--i, 0) * 90ms),
    transform .45s var(--kd-dev) calc(.42s + var(--i, 0) * 90ms); }
  .kd-mo .kd-b10[data-js] .kd-b10-mary { transition: opacity .16s var(--ease-out); }
  .kd-mo .kd-b10[data-js] .kd-b10-desk[data-state="order"] ~ .kd-b10-act .kd-b10-mary { animation: kd-b10-say .5s var(--kd-dev) .9s both; }
  @keyframes kd-b10-say { from { opacity: .82; translate: 0 4px; } to { opacity: 1; translate: 0 0; } }
  .kd-mo .kd-b10[data-js] .kd-b10-ghost { transition: opacity .2s var(--ease-out); }
  /* the landing: from a hand above the desk, one after another, settling without a bounce (js/b10.js through enter()) */
  .kd-mo .kd-b10[data-in="wait"] .kd-b10-bit { opacity: 0; translate: 0 -30px; rotate: 6deg; }
  .kd-mo .kd-b10[data-in="go"] .kd-b10-desk[data-state] .kd-b10-bit { transition: opacity .3s var(--ease-out) calc(var(--i, 0) * 110ms),
    translate .62s var(--kd-dev) calc(var(--i, 0) * 110ms), rotate .62s var(--kd-dev) calc(var(--i, 0) * 110ms), transform var(--b10-fly) var(--b10-ease); }
  /* one invitation after the landing: the top paper lifts its corner (kit invite(), once) */
  .kd-mo .kd-b10 .kd-b10-desk[data-state="mess"][data-nudge] .kd-b10-bit:nth-child(3) { translate: -12px 5px; rotate: -2deg;
    transition: translate .3s var(--kd-dev), rotate .3s var(--kd-dev); }
  /* a press on the pile answers under the finger */
  .kd-mo .kd-b10[data-js] .kd-b10-desk[data-state="mess"] .kd-b10-pile:active .kd-b10-bit { translate: 0 2px; transition: translate .12s var(--ease-out); }
  /* a filed paper, touched, slides a little out of its corners and back */
  .kd-mo .kd-b10[data-js] .kd-b10-desk[data-state="order"] .kd-b10-bit[data-peek] { translate: 0 -8px; transition: translate .28s var(--kd-dev); }
  .kd-mo .kd-b10[data-ink="wait"] .kd-b10-ring path { stroke-dashoffset: 2; }
  .kd-mo .kd-b10[data-ink="go"] .kd-b10-ring path { transition: stroke-dashoffset .8s var(--ease-out) .1s; }
  @media (hover: hover) {
    .kd-mo .kd-b10[data-js] .kd-b10-desk[data-state="mess"] .kd-b10-pile:hover .kd-b10-bit { translate: 0 -4px; }
  }
}

/* ---------- ≤ 375: narrower papers so the loose ones stay on the page ---------- */
@media (max-width: 375px) {
  .kd-b10 { --b10-w0: 146px; --b10-w1: 168px; --b10-w2: 94px; --b10-nx: 22px; --b10-0x: 138px; --b10-1x: 54px; --b10-2x: 192px; --b10-cw: 124px; }
  .kd-b10-cap b { font-size: 15px; line-height: 18px; }
}

/* ---------- 600+: larger papers, the object and the ruler in the middle under the words ---------- */
@media (min-width: 600px) {
  .kd-b10 { --b10-w0: 214px; --b10-h0: 100px; --b10-w1: 214px; --b10-h1: 118px; --b10-w2: 136px; --b10-h2: 124px;
    --b10-nx: 40px; --b10-g: 18px; --b10-pt: 24px; --b10-cw: 230px;
    --b10-capx: calc(max(var(--b10-w0), var(--b10-w1), var(--b10-w2)) + 20px);
    --b10-0x: 226px; --b10-0y: 26px; --b10-1x: 80px; --b10-1y: 104px; --b10-2x: 282px; --b10-2y: -44px; }
  .kd-b10 .kd-corner { --cw: 15px; }
  .kd-b10-ghost { left: 12px; top: 10px; font-size: 17px; }
  .kd-b10-nest:nth-child(3) .kd-b10-ghost { bottom: 10px; }
  .kd-b10-rule { gap: 9px; padding: 13px 15px 0; }
  .kd-b10-rule b { font-size: 19px; line-height: 23px; }
  .kd-b10-box { padding: 6px 10px 7px; font-size: 17px; line-height: 22px; }
  .kd-b10-tbl { padding: 10px 12px; background-size: 100% 13px, 13px 100%, auto; }
  .kd-b10-grid3 { font-size: 15px; line-height: 18px; }
  .kd-b10-q { font-size: 28px; }
  .kd-b10-note { gap: 2px; padding: 12px 14px 8px; font-size: 18px; line-height: 24px; }
  .kd-b10-cap b { font-size: 19px; line-height: 23px; }
  .kd-b10-desk, .kd-b10-act, .kd-b10-foot { width: 100%; max-width: 520px; margin-inline: auto; }
  .kd-b10-desk { margin-top: 28px; }
  .kd-b10-marks { font-size: 14px; }
  .kd-b10-ring { top: -10px; width: 64px; height: 36px; }
}

/* ---------- 1024+: words and the ruler at the left, the desk in the right column (K5: x 796 at 1440) ---------- */
@media (min-width: 1024px) {
  .kd-b10-grid { grid-template-rows: auto auto 1fr auto; grid-template-areas: "head desk" "foot desk" ". desk" ". act"; }
  .kd-b10-head { grid-area: head; }
  .kd-b10 .kd-lead { max-width: 48ch; font-size: 18px; line-height: 28px; }
  .kd-b10-desk { grid-area: desk; max-width: none; margin: 4px 0 0; }
  .kd-b10-act { grid-area: act; flex-wrap: nowrap; max-width: none; min-height: 48px; margin: 16px 0 0; }
  .kd-b10-mary { font-size: 16px; line-height: 22px; }
  .kd-b10-foot { grid-area: foot; align-self: start; justify-items: start; max-width: 440px; margin: 40px 0 0; }
  .kd-b10-ways { margin-top: 8px; }
  .kd-b10-lvl { justify-self: center; }
  .kd-b10-marks { font-size: 15px; }
  .kd-b10-who { font-size: 14px; }
  .kd-b10-core b { font-size: 20px; line-height: 24px; }
}