/* Block 2 «Речення ламаються на півдорозі?» (#you, KL-1017-B, concept F5, audit s2 r1). One object: the line of cassette 1
   — eight Instax prints on a twine with wooden pegs, five developed with the learner's own sentence in pencil (the
   course's model lines, lessons 2–6), three latent. Four strips of masking tape carry what people say about their English;
   a tap on a strip swings the line to its print (the print lifts into the lamp) and Mary's note under the line answers in
   one line. «Знову кину» brings the gap between prints 5 and 6 into the light and only then shows «Пропустити тиждень»:
   prints 6–8 move on along the twine, a paper slip «пауза · тиждень» is pegged into the gap, nothing fades, the count stays
   5 of 8. «Повернутися» (or a tap on print 6) wakes the latent print 6. The line follows a finger (spring.js drag).
   No sheet: the twine runs off both edges of the window. Served without JS: the first strip pressed, five prints developed.
   Motion only transform / translate / scale / rotate / opacity under prefers-reduced-motion: no-preference and html.kd-mo.
   The shadow is a static box-shadow per print, never a filter on the line. 393 first.
   s2r2: frame n = lesson n of cassette 1; the twine sags between the pegs (seven segments, transform only on the pause);
   prints 6–8 carry the latent chemistry of #first (the product's 32 px latent, sepia, milk, grain) and the first words in
   pencil; a tap on a print brings it into the lamp; on a desk the line hangs from a nail and steps by whole prints.
   f1 (P2): every print shows what its sentence says (assets/b2/SOURCES.md), frames 1-3 in the album's sepia, the latent
   ones carry their darks like the rest of #first. Under 1024 px the line steps by slots: frame 1 stands whole at the
   16 px gutter, the next one whole beside it, the third shows only 6 px of its paper edge, so the window's edge never cuts a
   sentence; the pause takes one slot. On a desk the note and its way on stand in one column. Evening tapes: warm kraft
   lit by the lamp, like Mary's note.
   f2 (P6): all five developed prints in the contact sheet's sepia (assets/b2/SOURCES.md), the latent ones warm (their
   shadows layer is drawn in sepia); print 6 develops on «Повернутися» with #first's chemistry through the kit's gl.js
   (js/b2.js, .kd-b2-gl), the CSS breath stays the fallback. This sheet becomes render-blocking (P5): no new grounds here. */

.kd-b2-grid { display: grid; gap: 16px; }
.kd-b2 .kd-h2 { margin-bottom: 14px; }

/* ---------- the strips of tape: paper tape, torn ends, a pencil line; the pressed one is pressed flat and lit ---------- */
.kd-b2-tapes { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 8px; margin: 0; padding: 0; list-style: none; }
.kd-b2-tapes li { display: block; }
.kd-b2-tapes li:nth-child(1) { --tr: -1.2deg; }
.kd-b2-tapes li:nth-child(2) { --tr: 1deg; }
.kd-b2-tapes li:nth-child(3) { --tr: -.6deg; }
.kd-b2-tapes li:nth-child(4) { --tr: .7deg; }
.kd-b2-strip { --tape: rgb(238 228 200 / 92%); position: relative; isolation: isolate; display: inline-flex; align-items: center; min-height: 44px; margin: 0;
  padding: 7px 16px 8px; border: 0; background: none; color: var(--paper-ink-2); text-align: left; cursor: pointer; rotate: var(--tr, 0deg);
  -webkit-tap-highlight-color: transparent; font-family: var(--font-hand); font-variation-settings: var(--hand-axes); font-weight: 400; font-size: 17px; line-height: 22px; }
.kd-b2-strip::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tape) var(--tex-paper); background-size: 120px;
  clip-path: polygon(0 6%, 3% 0, 6% 9%, 9% 1%, 100% 0, 97% 14%, 100% 30%, 98% 50%, 100% 72%, 97% 88%, 100% 100%, 8% 100%, 5% 92%, 2% 100%, 0 90%, 2% 70%, 0 50%, 2% 28%);
  filter: drop-shadow(.5px 1px 1px rgb(var(--cast-rgb) / 18%)); opacity: .82; }
.kd-b2-strip span { position: relative; opacity: .8; }
.kd-b2-strip[aria-pressed="true"] span { opacity: 1; }
.kd-b2-strip[aria-pressed="true"] { color: var(--paper-ink); }
.kd-b2-strip[aria-pressed="true"]::before { --tape: rgb(244 232 196); opacity: 1; filter: drop-shadow(1px 2px 2px rgb(var(--cast-rgb) / 22%)) drop-shadow(3px 6px 10px rgb(var(--cast-rgb) / 14%)); }
.kd-b2-strip:focus-visible { outline-offset: 2px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kd-b2-strip { --tape: #C7B188; --tape-on: #E8D5AA; } }
:root[data-theme="dark"] .kd-b2-strip { --tape: #C7B188; --tape-on: #E8D5AA; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kd-b2-strip::before { opacity: 1;
  background: radial-gradient(140% 170% at 24% -20%, rgb(255 238 204 / 50%), transparent 60%), var(--tape) var(--tex-paper); background-size: auto, 120px; } }
:root[data-theme="dark"] .kd-b2-strip::before { opacity: 1;
  background: radial-gradient(140% 170% at 24% -20%, rgb(255 238 204 / 50%), transparent 60%), var(--tape) var(--tex-paper); background-size: auto, 120px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kd-b2-strip[aria-pressed="true"]::before { --tape: var(--tape-on); } :root:not([data-theme="light"]) .kd-b2-strip span { opacity: 1; } }
:root[data-theme="dark"] .kd-b2-strip[aria-pressed="true"]::before { --tape: var(--tape-on); }
:root[data-theme="dark"] .kd-b2-strip span { opacity: 1; }
html:not(.js) .kd-b2-strip { cursor: default; }

/* ---------- the line: count, twine, pegs, prints, the slip; Mary's note and the way on under it ---------- */
.kd-b2-tape { --slots: 2; --pitch: calc((100vw - var(--gutter) - 6px) / var(--slots)); --pw: calc(var(--pitch) - 16px); --lead: var(--gutter); --sy: 14px;
  --gap: var(--pitch); --gapk: 2; --twine: color-mix(in srgb, var(--kd-control) 70%, var(--kd-ink) 30%);
  --ph: calc(var(--pw) * 1.194); position: relative; margin: 0; }
.kd-b2-count { color: var(--ink-2); font: 600 13px/20px var(--font-body); }
.kd-b2-count b { display: inline-block; min-width: .62em; color: var(--ink); text-align: center; font: 500 22px/20px var(--font-display); font-variant-numeric: lining-nums tabular-nums; }
/* the reel is the window onto the line: the full width of the phone, off the window's right edge on a desk */
.kd-b2-reel { position: relative; height: calc(var(--sy) + var(--ph) + 32px); margin: 6px calc(var(--gutter) * -1) 0; overflow-x: clip; touch-action: pan-y; }
/* one lamp over the middle of the line: the chosen print stands in its pool (static; warmer at night) */
.kd-b2-reel::before { content: ""; position: absolute; left: calc(var(--lead) + var(--pw) / 2); top: -6%; width: min(520px, 130%); height: 118%; translate: -50% 0; pointer-events: none;
  background: radial-gradient(closest-side, var(--lamp), transparent), radial-gradient(closest-side, var(--lamp), transparent 80%);
  /* f1 · the pool fades to nothing inside its own box, so no edge of it shows at the reel's foot or the window's edge (owner.eye, detail) */
  -webkit-mask: radial-gradient(closest-side, #000 45%, transparent 98%); mask: radial-gradient(closest-side, #000 45%, transparent 98%); }
.kd-b2-line { position: absolute; left: 0; top: 0; height: 100%; width: calc(var(--lead) * 2 + var(--pitch) * 7 + var(--pw)); cursor: grab;
  -webkit-user-select: none; user-select: none; }
.kd-b2-line[data-dragging] { cursor: grabbing; }
/* the twine: straight tails off both edges, between the pegs seven segments that sag 5-6 px (an SVG arc as a mask). On the
   pause the segment over the gap stretches (scale) and the ones after it move on with prints 6-8 (translate): the line's
   own layout never changes */
.kd-b2-line::before, .kd-b2-line::after, .kd-b2-tw { content: ""; position: absolute; top: var(--sy); height: 1.5px; border-radius: 1px; background: var(--twine); pointer-events: none; }
.kd-b2-line::before { left: -100vw; width: calc(100vw + var(--lead) + var(--pw) / 2); }
.kd-b2-line::after { left: calc(var(--lead) + var(--pw) / 2 + var(--pitch) * 7); width: 100vw; }
.kd-b2-tw { top: calc(var(--sy) - .5px); left: calc(var(--lead) + var(--pw) / 2 + var(--i) * var(--pitch)); width: var(--pitch); height: 12px; border-radius: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M0 1.25Q50 12.5 100 1.25' fill='none' stroke='%23000' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M0 1.25Q50 12.5 100 1.25' fill='none' stroke='%23000' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  transform-origin: 0 0; }
.kd-b2-tape:not([data-state="idle"]) .kd-b2-tw:nth-of-type(5) { scale: var(--gapk) 1; }
.kd-b2-tape:not([data-state="idle"]) .kd-b2-tw:nth-of-type(n+6), .kd-b2-tape:not([data-state="idle"]) .kd-b2-line::after { translate: var(--gap) 0; }
/* the nail the line hangs from (a desk only: on a phone the twine runs off both edges) */
.kd-b2-nail { display: none; }
/* a print on its peg: hangs from the peg's point, a degree or two off true */
.kd-b2-hang { position: absolute; top: calc(var(--sy) + 9px); left: calc(var(--lead) + var(--i) * var(--pitch)); width: var(--pw); height: var(--ph);
  transform-origin: 50% -10px; rotate: var(--rot, 0deg); }
.kd-b2-hang .kd-print { --pw: inherit; width: 100%; height: 100%; }
.kd-b2-hang::after { content: ""; position: absolute; inset: 10px 4px 0; z-index: -1; border-radius: 2px; box-shadow: var(--kd-sh-lift); opacity: 0; pointer-events: none; }
.kd-b2-tape:not([data-state="idle"]) .kd-b2-hang:nth-of-type(n+6) { translate: var(--gap) 0; }
/* the peg: two halves of pale wood and a steel spring */
.kd-b2-pin { position: absolute; z-index: 7; left: 50%; top: -20px; width: 10px; height: 28px; margin-left: -5px; border-radius: 2px 2px 1.5px 1.5px;
  background: linear-gradient(90deg, #B48F64, #DCC29A 42%, #C9A87C 58%, #A9845A); box-shadow: .5px 1.5px 1.5px rgb(var(--cast-rgb) / 30%), inset 0 1px 0 rgb(255 255 255 / 35%); }
.kd-b2-pin::before { content: ""; position: absolute; left: -1.5px; right: -1.5px; top: 10px; height: 3px; border-radius: 1.5px; background: linear-gradient(#8E8A84, #5E5A55); }
.kd-b2-pin::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgb(60 40 20 / 28%); }
/* the learner's sentence in pencil on the print's foot: two lines at most */
.kd-b2 .kd-print-foot { justify-content: center; padding-bottom: 2px; }
.kd-b2-say { display: block; color: var(--hand); font-family: var(--font-hand); font-variation-settings: var(--hand-axes); font-weight: 400; font-size: 13px; line-height: 15px;
  overflow-wrap: break-word; }
.kd-b2-say--wait { color: var(--hand); opacity: .46; }
.kd-b2-say .kd-mk::after { bottom: -.2em; }
/* the milk a developed print comes out of (only before the line wakes) */
.kd-b2-milk { position: absolute; inset: 0; z-index: 4; background: radial-gradient(90% 90% at 40% 35%, var(--milk-light), var(--milk)); opacity: 0; pointer-events: none; }
/* a latent print, the chemistry of #first: the product's own 32 px latent of the lesson's photo (blurred, sepia) under warm
   milk with the reagent's edge at the lower margin and a fine grain: a photograph about to come, never a grey square */
.kd-b2-latent { background: var(--milk); }
.kd-b2-ghost { position: absolute; inset: -8%; z-index: 0; display: block; width: 116%; height: 116%; max-width: none; object-fit: cover;
  filter: blur(6px) sepia(1) saturate(1.9) hue-rotate(-12deg) contrast(.84) brightness(1.14); opacity: .85; }
.kd-b2-dev { position: absolute; inset: 0; z-index: 1; opacity: .56; pointer-events: none;
  background: linear-gradient(to top, rgb(150 112 70 / 34%), transparent 16%), radial-gradient(95% 90% at 42% 30%, var(--milk-light), var(--milk)); }
.kd-b2-latent::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .16; background: url(/landing/assets/world/grain.svg) 0 0 / 120px; mix-blend-mode: multiply; }
/* print 6, the next one: the darks of its photo (the product's shadows layer of lesson 6) already show through the milk;
   after «Повернутися» they come up a step (it waits, it does not develop on the page) */
.kd-b2-shade { position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%; mix-blend-mode: multiply; opacity: .4; pointer-events: none; }
/* the shader's canvas over print 6's milk while it develops (js/b2.js); hidden at rest */
.kd-b2-gl { position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.kd-b2-hang--next .kd-b2-dev { opacity: .46; }
.kd-b2-tape[data-state="back"] .kd-b2-hang--next .kd-b2-dev { opacity: .26; }
.kd-b2-tape[data-state="back"] .kd-b2-hang--next .kd-b2-shade { opacity: .6; }
/* the chosen print: true on its peg, a little nearer, in the lamp */
.kd-b2-hang[data-on] { z-index: 2; rotate: 0deg; scale: 1.04; }
.kd-b2-hang[data-on]::after { opacity: 1; }
.kd-b2[data-js] .kd-b2-hang { cursor: pointer; }
/* the slip in the gap, pegged to the twine */
.kd-b2-pause { position: absolute; z-index: 3; top: calc(var(--sy) + 13px); left: calc(var(--lead) + var(--pitch) * 4.5 + (var(--pw) + var(--gap)) / 2); width: 84px; margin-left: -42px;
  display: grid; justify-items: center; gap: 1px; padding: 14px 8px 9px; border-radius: 1px; transform-origin: 50% -6px; rotate: -3deg;
  background: var(--sheet-paper) var(--tex-paper); background-size: 160px; box-shadow: var(--print-rim), var(--kd-sh-sheet); color: var(--paper-ink); }
.kd-b2-pause .kd-b2-pin { top: -21px; }
.kd-b2-pause b { color: var(--paper-ink-2); font: 700 13px/16px var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
.kd-b2-pause span { font: 600 13px/16px var(--font-body); }
.kd-b2-tape[data-state="idle"] .kd-b2-pause { opacity: 0; translate: 0 -9px; scale: .9; }

/* Mary's answer under the line, the catalogue's line about the pause, the way on (a link, or the chip after «Знову кину») */
.kd-b2-act { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; margin-top: 2px; }
.kd-b2-way { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.kd-b2-note { max-width: 360px; margin: 0 0 0 4px; }
.kd-b2-note p { margin: 0; }
.kd-b2-fact { max-width: 40ch; margin: 0 0 0 4px; color: var(--muted); font: 500 13px/18px var(--font-body); }
.kd-b2-link { margin-left: 4px; }
.kd-b2 .kd-chip { flex: none; margin: 0 0 0 4px; background: var(--raised); }
.kd-b2-act [hidden] { display: none; }

@media (hover: hover) and (pointer: fine) {
  .kd-b2-strip[aria-pressed="false"]:hover { translate: 0 -2px; }
  .kd-b2-strip[aria-pressed="false"]:hover span { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  .kd-mo .kd-b2[data-js] .kd-b2-strip { transition: translate var(--dur-ui) var(--ease-standard), rotate var(--dur-ui) var(--ease-standard), color var(--dur-ui) var(--ease-standard); }
  .kd-mo .kd-b2[data-js] .kd-b2-strip[aria-pressed="true"] { translate: 4px -1px; rotate: 0deg; }
  .kd-mo .kd-b2[data-js] .kd-b2-strip:active { scale: .98; }
  /* the line wakes once: the five prints come out of their milk one after another, the count follows them */
  .kd-mo .kd-b2[data-js]:not([data-awake]) .kd-b2-milk { opacity: 1; }
  .kd-mo .kd-b2[data-awake]:not([data-still]) .kd-b2-milk { transition: opacity 700ms var(--ease-standard) calc(180ms + var(--i, 0) * 150ms); }
  /* a print swings true on its peg when it is chosen; the others settle back */
  .kd-mo .kd-b2[data-js] .kd-b2-hang { transition: rotate 550ms var(--kd-settle), scale 420ms var(--ease-standard), translate 600ms linear(0, .72 60%, 1.015 88%, 1) calc((var(--i) - 5) * 40ms); }
  .kd-mo .kd-b2[data-js] .kd-b2-hang::after { transition: opacity 420ms var(--ease-standard); }
  .kd-mo .kd-b2[data-js] .kd-b2-tw, .kd-mo .kd-b2[data-js] .kd-b2-line::after { transition: translate 600ms linear(0, .72 60%, 1.015 88%, 1) calc((var(--i, 7) - 5) * 40ms + 20ms), scale 600ms linear(0, .72 60%, 1.015 88%, 1); }
  /* print 6 on «Повернутися»: one breath of the chemistry (300 ms, half the breath of #first), then the darks stay up a step */
  .kd-mo .kd-b2[data-js] :is(.kd-b2-dev, .kd-b2-shade) { transition: opacity 300ms var(--kd-dev); }
  .kd-mo .kd-b2[data-js] .kd-b2-tape[data-state="back"] .kd-b2-hang--next .kd-b2-ghost { animation: kd-b2-breath 300ms var(--ease-standard) both; }
  .kd-mo .kd-b2[data-js] .kd-b2-line { will-change: translate; }
  /* the slip falls into the gap and settles (the vocabulary of G: −9 px .9 › 3 px 1.04 › 0) */
  .kd-mo .kd-b2[data-js] .kd-b2-pause { transition: opacity var(--dur-ui) var(--ease-standard), translate var(--dur-ui) var(--ease-standard), scale var(--dur-ui) var(--ease-standard); }
  .kd-mo .kd-b2[data-js] .kd-b2-tape[data-state="paused"] .kd-b2-pause { animation: kd-b2-slip 550ms var(--ease-standard) 480ms both; }
  .kd-b2[data-inst] :is(.kd-b2-hang, .kd-b2-pause, .kd-b2-milk, .kd-b2-tw, .kd-b2-dev, .kd-b2-ghost), .kd-b2[data-inst] .kd-b2-hang::after, .kd-b2[data-inst] .kd-b2-line::after { transition: none !important; animation: none !important; }
}
@keyframes kd-b2-breath { 0% { scale: 1; opacity: .85; } 45% { scale: 1.03; opacity: 1; } 100% { scale: 1; opacity: .85; } }
@keyframes kd-b2-slip { 0% { opacity: 0; translate: 0 -9px; scale: .9; } 55% { opacity: 1; translate: 0 3px; scale: 1.04; } 100% { opacity: 1; translate: 0 0; scale: 1; } }

@media (min-width: 600px) {
  .kd-b2-strip { font-size: 21px; line-height: 27px; padding: 9px 22px 10px; }
  .kd-b2-tape { --slots: 3; }
  .kd-b2-say { font-size: 14px; line-height: 16px; }
}
@media (min-width: 768px) { .kd-b2-tape { --slots: 4; } }
@media (min-width: 960px) { .kd-b2-tape { --slots: 5; } }
/* desk: the heading and the four strips on the left; on the right the line runs off the window's edge, the note and its
   way on sit on one axis with the line's first print */
@media (min-width: 1024px) {
  .kd-b2-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; column-gap: clamp(40px, 5vw, 80px); }
  .kd-b2 .kd-h2 { margin-bottom: 26px; }
  .kd-b2-tapes { flex-direction: column; gap: 12px; }
  .kd-b2-tapes li:nth-child(2) { margin-left: 22px; }
  .kd-b2-tapes li:nth-child(3) { margin-left: 8px; }
  .kd-b2-tapes li:nth-child(4) { margin-left: 30px; }
  .kd-b2-strip { font-size: 24px; line-height: 30px; padding: 11px 26px 12px; }
  .kd-b2-tape { --pw: 184px; --pitch: 206px; --lead: 30px; --sy: 18px; --gap: 140px; --gapk: 1.6796; }
  .kd-b2-count { margin-left: 2px; font-size: 15px; }
  /* f1 · the count sits on the line, right over the nail (owner.eye: it hung apart above the twine) */
  .kd-b2-tape .kd-b2-reel { margin-top: -4px; }
  .kd-b2-count b { font-size: 30px; line-height: 24px; }
  /* the line hangs from a nail at the column's edge and steps by whole prints (js/b2.js): a whole print stands next to the
     nail, the one before it goes under a soft edge; the right end runs off the window; the reel reaches 64 px lower for the
     lamp's shadow */
  .kd-b2-reel { height: calc(var(--sy) + var(--ph) + 90px); margin: 10px -50vw -64px calc(var(--lead) * -1);
    -webkit-mask: linear-gradient(to right, transparent 12px, #000 28px); mask: linear-gradient(to right, transparent 12px, #000 28px); }
  .kd-b2-nail { position: relative; z-index: 3; display: block; width: 0; height: 0; }
  .kd-b2-nail::before { content: ""; position: absolute; left: calc(var(--lead) * -1 + 6px); top: calc(10px + var(--sy) - 5px); width: 11px; height: 11px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #EDE6DA, #9C968C 45%, #5E5A55 80%); box-shadow: 1px 2px 2px rgb(var(--cast-rgb) / 34%), 0 0 0 .5px rgb(0 0 0 / 22%); }
  .kd-b2-nail::after { content: ""; position: absolute; left: calc(var(--lead) * -1 + 10px); top: calc(10px + var(--sy) - 2.5px); width: 14px; height: 6px; border: 1.5px solid var(--twine);
    border-left: 0; border-radius: 0 4px 4px 0; }
  .kd-b2-pin { width: 12px; height: 31px; margin-left: -6px; top: -21px; }
  .kd-b2-pin::before { top: 11px; }
  .kd-b2-reel::before { left: 34%; width: 640px; }
  .kd-b2-say { font-size: 15px; line-height: 18px; }
  /* the note on the line's axis, its way on under it in the same column (the link, or the chip and the catalogue's line) */
  .kd-b2-act { gap: 14px; margin-top: 10px; }
  .kd-b2-note { max-width: 340px; margin: 0; padding: 13px 16px 15px; font-size: 18px; line-height: 24px; }
  .kd-b2-way { gap: 10px; }
  .kd-b2-fact { max-width: 36ch; margin: 0; }
  .kd-b2-link, .kd-b2 .kd-chip { margin: 0; }
  .kd-b2-pause { width: 112px; margin-left: -56px; padding: 18px 10px 12px; }
  .kd-b2-pause b { font-size: 14px; }
  .kd-b2-pause span { font-size: 15px; line-height: 20px; }
}