/* Block 1 «Перший кадр» (KL-1017-B, direction A «Тепло пальця», D1). An open album in teal cloth; three latent prints lie
   stacked on its left page with Mary's note. A touch develops the chosen one with the product's chemistry (js/b1.js,
   products/kadr/app/world/develop-gl.tsx), the right word is written in its place, the marker settles under it and the print
   drops into its nest. Without JS, under reduce, on Save-Data or a slow network the three prints lie developed with the right
   word marked (the latent look needs html.kd-mo).
   s2r1: the latent print is warm milk with the ghost of its darks and the reagent's edge (an Instax a minute out of the
   camera), the wrong word carries the pen's wavy mark, «приклад» is written once (on the developed print), the album shows
   its spine on a phone and runs to the window's edge on a desk (as the strip of #you does), the lamp lies on it at night.
   s2r2: at rest one sentence reads (the two prints under it show their paper edges only); on a desk the whole spread lies
   inside the plate and its right page holds the empty nest of frame 2 with Mary's note in it; the chips are paper pills;
   the lamp warms the spread at night; the hero's own light texture tiles (assets/b1, 3-5 KB) paint with the first frame. */
.kd-b1 {
  /* the chemistry's own colours (the print never inverts at night) */
  --b1-milk: #EBD8B9; --b1-milk-hi: #F9EFDD; --b1-reagent: rgb(150 102 50 / 34%);
  /* the lamp: at night a warm pool on the cloth under the album and the page falls off away from it; by day the same lamp,
     faint, on the paper only (f1: the right page is paper under a light, not a flat plate) */
  --b1-lamp: transparent; --b1-fall: rgb(var(--cast-rgb) / 7%); --b1-glow: rgb(255 226 180 / 30%); --b1-lx: 34%; --b1-ly: 72%; --b1-gx: 40%;
  position: relative; overflow-x: clip; padding: 4px 0 0;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kd-b1 { --b1-lamp: var(--lamp-pool); --b1-fall: rgb(0 0 0 / 24%); --b1-glow: var(--lamp); } }
:root[data-theme="dark"] .kd-b1 { --b1-lamp: var(--lamp-pool); --b1-fall: rgb(0 0 0 / 24%); --b1-glow: var(--lamp); }
/* the first screen's paper and cloth: the same tooth and weave as the shared tiles, in tiles small enough to paint with the
   first frame (the LCP is the H1, not a 40 KB texture) */
.kd-b1 :is(.kd-scene-page, .kd-stack .kd-print, .kd-hero-note) { background-image: url(/landing/assets/b1/paper-160.webp); }
.kd-b1 .kd-scene-album { background-image: url(/landing/assets/b1/cloth-128.webp); }

/* the family's hero plate (frame.css .lk-plate: the world's light, grain, r 22-28) in the cloth's aqua; on a phone the album is
   cut by the plate's bottom edge and shows its spine at the right */
.kd-b1 .kd-hero-in.lk-plate { overflow: clip; padding: 8px 14px 0; }
.kd-b1 .kd-hero-in::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(56% 46% at var(--b1-lx) var(--b1-ly), var(--b1-lamp), transparent 74%); }
@media (max-width: 599px) { .kd-b1 > .lk-wrap { padding-inline: 10px; } }
.kd-b1 .kd-h1 { max-width: 13em; }
/* the eyebrow: the world's mark (a corner of the teal cloth with one print on it), the name, the level */
.kd-eyebrow { margin: 0 0 6px; gap: 10px; }
.kd-eyebrow > span:last-child { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; color: var(--ink-2); font-weight: 600; }
.kd-eyebrow b { color: var(--ink); font: 700 15px/18px var(--font-body); }
.kd-eyebrow-mark { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--cloth) var(--tex-cloth); background-size: 96px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%), var(--sh-paper); }
.kd-eyebrow-mark i { position: absolute; left: 9px; top: 6px; width: 13px; height: 16px; padding: 1.5px 1.5px 0; border-radius: 1px; background: var(--print); rotate: -6deg;
  box-shadow: .5px 1px 2px rgb(0 0 0 / 30%); }
.kd-eyebrow-mark i::before { content: ""; display: block; height: 10px; background: linear-gradient(160deg, #C9B79C, #7E6A55); }
.kd-sub { margin-top: 6px; max-width: 36ch; color: var(--ink-2); font: 400 15px/21px var(--font-body); }
/* one proof on the phone's first screen (the desk carries it under the coral) */
.kd-b1 .kd-trust-m { margin: 6px 0 0; color: var(--muted); font-weight: 500; }
.kd-hero-act { display: none; }

/* the scene, phone sizes; the print is Instax Square. f1: the spread ends inside the plate: the left page, the spine and a
   36 px strip of the right page (the page turned up towards the eye), then the cloth's edge and the plate. --ax is the
   album's left edge in the scene; --rw the right page's width (the whole page from 600) */
.kd-scene { --spw: min(176px, 45vw); --cb: 8px; --ax: 8px; --rw: 36px; --lw: calc(100vw - 52px - var(--rw)); --sx: 22px; --sy: 4px;
  --sph: calc(var(--spw) * 1.194); position: relative; z-index: 0; height: 290px; margin: 14px -14px 0; }
.kd-scene .kd-print { --pw: var(--spw); }
.kd-scene-album { position: absolute; left: var(--ax); top: -4px; width: calc(var(--cb) * 2 + var(--lw) + var(--rw)); height: 370px; border-radius: 9px; }
.kd-scene-page { position: absolute; top: var(--cb); bottom: var(--cb); width: var(--lw); }
/* the fold: each page darkens towards the spine (a paper that curves into the gutter), by day and under the lamp */
.kd-scene-page.l { left: var(--cb); border-radius: 3px 0 0 3px; box-shadow: inset -26px 0 26px -18px rgb(var(--cast-rgb) / 32%), inset 0 1px 0 rgb(255 255 255 / 30%);
  background-image: linear-gradient(to left, rgb(var(--cast-rgb) / 11%), rgb(var(--cast-rgb) / 3%) 14px, transparent 40px), url(/landing/assets/b1/paper-160.webp); }
.kd-scene-page.r { left: calc(var(--cb) + var(--lw)); width: var(--rw); border-radius: 0 3px 3px 0; box-shadow: inset 26px 0 26px -18px rgb(var(--cast-rgb) / 32%);
  background-image: linear-gradient(to right, rgb(var(--cast-rgb) / 13%), rgb(var(--cast-rgb) / 4%) 16px, transparent 44px), url(/landing/assets/b1/paper-160.webp); }
/* the spine: the fold between the pages, one line of shade */
.kd-scene-page.r::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: rgb(var(--cast-rgb) / 16%); }
.kd-scene-page::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 95% at var(--fx, 38%) 34%, transparent 46%, var(--b1-fall)); }
.kd-scene-page.r { --fx: 0%; }
/* on a phone the right page is a strip seen edgewise: lighter at its outer edge, where it turns to the light */
@media (max-width: 599px) { .kd-scene-page.r::after { background: linear-gradient(to right, transparent 30%, rgb(255 255 255 / 22%) 86%, rgb(var(--cast-rgb) / 10%)); } }
/* one lamp over the spread: a warm pool on the paper, the edges fall off (the stack lies above it); faint by day */
.kd-scene-album::after { content: ""; position: absolute; inset: var(--cb); border-radius: 3px; pointer-events: none;
  background: radial-gradient(58% 52% at var(--b1-gx, 40%) 38%, var(--b1-glow), transparent 74%); }
/* f2: on a phone the left page goes on under the stack: the nest of the next frame, its two top corners and the top edge of
   the print waiting in it (warm milk), cut by the plate, so under the stack lies at most 18 px of bare paper. It steps aside
   once a print has developed and the chips take its place. */
.kd-scene-next { position: absolute; left: calc(var(--sx) - var(--ax) - var(--cb)); top: calc(var(--sy) - var(--cb) + 4px + var(--sph) + 31px);
  width: var(--spw); height: var(--sph); }
.kd-scene-next-print { position: absolute; inset: 0; border-radius: 2px; rotate: .7deg; background: var(--print) url(/landing/assets/b1/paper-160.webp);
  box-shadow: var(--print-rim), var(--kd-sh-print); }
.kd-scene-next-print::before { content: ""; position: absolute; left: 7%; top: calc(var(--spw) * .07); width: 86%; height: calc(var(--spw) * .86); border-radius: 1px;
  background: linear-gradient(to bottom, rgb(150 102 50 / 16%), transparent 40%), radial-gradient(95% 90% at 42% 30%, var(--b1-milk-hi), var(--b1-milk));
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 14%); }
.kd-scene:has(.kd-stack[data-stage="done"]) .kd-scene-next { opacity: 0; }
@media (prefers-reduced-motion: no-preference) { .kd-mo .kd-scene-next { transition: opacity var(--dur-ui) var(--ease-standard); } }
/* ?kd-probe=gl only (js/b1.js): the context's state and the development's frames, one line in the hero's corner */
.kd-b1 .kd-probe { position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 9; margin: 0; padding: 3px 8px; border-radius: 6px;
  background: rgb(255 253 248 / 90%); color: #272E2A; font: 600 13px/18px var(--font-body); pointer-events: none; }
/* the right page's nest of frame 2 (from 600): debossed, four black corners, its number in pencil; a second latent print
   lies in it at rest (the stack's data-pos="1"), Mary's note over its corner */
.kd-scene-nest { display: none; }
.kd-hero-side { position: absolute; z-index: 6; left: calc(var(--sx) + var(--spw) + 10px); top: 14px; width: max(15ch, min(150px, calc(100vw - 46px - var(--sx) - var(--spw))));
  min-height: calc(var(--sy) + var(--sph) - 18px); display: flex; flex-direction: column; justify-content: space-between; gap: 12px; font: italic 500 15px/20px var(--font-display); }

.kd-stack { position: absolute; left: var(--sx); top: var(--sy); width: var(--spw); height: calc(var(--sph) + 16px); touch-action: pan-y; }
.kd-stack-slot { position: absolute; left: 0; top: 8px; width: var(--spw); height: var(--sph); }
.kd-stack-slot .kd-corner { opacity: 0; --cs: 1.18; }
.kd-stack[data-stage="done"] .kd-stack-slot .kd-corner { opacity: 1; --cs: 1; }
/* the black-paper corners are the page's own (styles.css .kd-corner, K3); here they hold the print 2 px over its edge */
.kd-b1 { --kd-corner-in: -2px; }
.kd-b1 .kd-corner { --cw: 17px; }

/* the print in the stack: the front whole; the two under it show only their paper edges (one sentence on the screen,
   never three mistakes in a row); «Інше речення ›» brings the next one to the front */
.kd-stack .kd-print { position: absolute; left: 0; top: 0; z-index: 1; cursor: pointer; touch-action: pan-y; --x: 0px; --y: 0px; --hy: 0px; --r: 0deg;
  transform: translate3d(var(--x), calc(var(--y) + var(--hy)), 0) rotate(var(--r)); }
.kd-stack .kd-print[data-pos="0"] { --r: -1.2deg; z-index: 3; }
.kd-stack .kd-print[data-pos="1"] { --x: -5px; --y: 6px; --r: 2.4deg; z-index: 2; }
.kd-stack .kd-print[data-pos="2"] { --x: 6px; --y: 12px; --r: -3.3deg; z-index: 1; }
.kd-stack .kd-print:is([data-pos="1"], [data-pos="2"]) :is(.kd-print-win, .kd-print-foot) { visibility: hidden; }
.kd-stack .kd-print[data-pos="slot"] { --y: 8px; --r: 0deg; z-index: 3; }
.kd-stack .kd-print[data-pos="out"] { --x: 112vw; z-index: 1; }
.kd-stack .kd-print:focus-visible { outline-offset: 4px; }
.kd-print::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--kd-sh-lift); opacity: 0; pointer-events: none; }
.kd-print[data-lift]::before { opacity: 1; }
/* «приклад» is written once: on the print that lies developed in its nest (and on the front one where the page lies still) */
.kd-b1 .kd-print-cap > :last-child { visibility: hidden; }
.kd-b1 .kd-print[data-pos="slot"] .kd-print-cap > :last-child, html:not(.kd-mo) .kd-b1 .kd-print[data-pos="0"] .kd-print-cap > :last-child { visibility: visible; }
/* the learner's hand keeps its full stop on the print (on a phone the line sits at the 13 px floor, so the hand writes tighter) */
.kd-b1 .kd-print-foot { padding-right: 2px; }
@media (max-width: 599px) { .kd-b1 .kd-print-line { letter-spacing: -.035em; } }
@media (max-width: 379px) { .kd-b1 .kd-print-line { letter-spacing: -.06em; word-spacing: -.12em; } }

/* the chemistry's layers (the GL canvas lies over them while it develops) */
.kd-print-latent { z-index: 0; filter: blur(6px) sepia(1) saturate(1.9) hue-rotate(-12deg) contrast(.84) brightness(1.14); opacity: 0; }
.kd-print-milk { position: absolute; inset: 0; z-index: 1; opacity: 0;
  background: linear-gradient(to top, var(--b1-reagent), transparent 15%), radial-gradient(95% 90% at 42% 30%, var(--b1-milk-hi), var(--b1-milk)); }
.kd-print-win .kd-print-layer { z-index: 2; opacity: 0; }
.kd-print-win .kd-print-shadows { mix-blend-mode: multiply; }
.kd-print-win .kd-print-sharp { z-index: 2; opacity: 1; }
.kd-print-gl { position: absolute; inset: 0; z-index: 3; display: block; width: 100%; height: 100%; pointer-events: none; opacity: 0; }
.kd-print-halo { position: absolute; left: 0; top: 0; z-index: 4; width: 84%; aspect-ratio: 1; margin: -42% 0 0 -42%; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgb(255 214 160 / 75%), rgb(255 178 112 / 30%) 55%, transparent); mix-blend-mode: screen; }
.kd-print[data-hot] .kd-print-halo { opacity: 1; }
/* f1: the one warm sign of life at rest. The front print has begun to develop at its lower edge the way the product's
   chemistry does (develop-gl: the darks first, patches from the lower edge): 10-15 % of the window in warm colour, an
   uneven top line. It rises once after the first paint (opacity only) and stays; the halo glows once over it (js/b1.js).
   Its photo is the print's own 160 px colour layer, already loaded. */
.kd-print-edge { position: absolute; inset: 0; z-index: 1; opacity: 0; pointer-events: none;
  background: linear-gradient(to top, rgb(255 172 104 / 44%), rgb(255 202 146 / 20%) 58%, transparent 86%), var(--b1-edge) 50% 0 / 104% auto no-repeat;
  -webkit-mask: radial-gradient(19% 9% at 20% 90%, #000 40%, transparent), radial-gradient(14% 8% at 51% 88%, #000 40%, transparent),
    radial-gradient(22% 8% at 83% 91%, #000 40%, transparent), linear-gradient(to top, #000 6%, transparent 14%);
  mask: radial-gradient(19% 9% at 20% 90%, #000 40%, transparent), radial-gradient(14% 8% at 51% 88%, #000 40%, transparent),
    radial-gradient(22% 8% at 83% 91%, #000 40%, transparent), linear-gradient(to top, #000 6%, transparent 14%); }
.kd-b1 .kd-print[data-i="0"] { --b1-edge: url(/landing/assets/covers/l37-color.webp); }
.kd-b1 .kd-print[data-i="1"] { --b1-edge: url(/landing/assets/covers/l06-color.webp); }
.kd-b1 .kd-print[data-i="2"] { --b1-edge: url(/landing/assets/covers/l14-color.webp); }
.kd-mo:not([data-kd-restore]) .kd-stack .kd-print[data-pos="0"]:not([data-dev]) .kd-print-edge { opacity: 1; }

/* the sentence: at rest the wrong word stands alone (one space either side, no room kept for the right one); on the fix
   the right word takes its place, a paper wipe uncovers it left to right and the tail of the line slides over by FLIP
   (js/b1.js, transform only: the motion contract never animates clip-path or width) */
.kd-sw { position: relative; display: inline-block; }
.kd-sw-old { display: none; white-space: pre; }
.kd-sw-new { position: relative; display: inline-block; white-space: pre; }
.kd-sw-new::before { content: ""; position: absolute; inset: -.1em -.14em -.06em -.08em; z-index: 1; background: var(--print); transform: scaleX(0); transform-origin: 100% 50%; }
.kd-sw-tail { display: inline-block; white-space: pre; }
/* the wrong word is marked, the way a teacher's pen marks it: a mistake to fix, never Mary's English */
.kd-err { text-decoration: underline wavy var(--print-marker); text-decoration-thickness: 1.2px; text-underline-offset: .2em; text-decoration-skip-ink: none; }

/* the latent look, only where the page can move: an Instax a minute out of the camera. Warm milk over the photo's darks
   (the shadows layer), the reagent's edge at the lower margin, a fine grain: a photograph about to come, never a grey square.
   f2 (S4): the rest is the first frame of the development at 10-15 %: the darks in the contact sheet's warm sepia (the
   shadows layer is drawn in sepia, assets/covers/SOURCES.md), the scene's colour seen through the milk is toned to the same
   sepia (a static filter on the 160 px layer), the soft blur of the latent; nothing loops, the same frame under reduce
   wherever the latent look shows. */
.kd-print-grain { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: url(/landing/assets/world/grain.svg) 0 0 / 120px; mix-blend-mode: multiply; }
.kd-mo:not([data-kd-restore]) .kd-print:not([data-dev]) .kd-print-latent { opacity: .5; }
.kd-mo:not([data-kd-restore]) .kd-print:not([data-dev]) .kd-print-milk { opacity: .6; }
.kd-mo:not([data-kd-restore]) .kd-print:not([data-dev]) .kd-print-shadows { opacity: .66; }
/* f1: through the milk the scene shows at about a sixth of its strength (hands, a cup, a guitar), never a flat blot */
.kd-mo:not([data-kd-restore]) .kd-print:not([data-dev]) .kd-print-color { opacity: .14; filter: sepia(1) saturate(1.6) hue-rotate(-10deg) brightness(1.04); }
.kd-mo:not([data-kd-restore]) .kd-print:not([data-dev]) .kd-print-grain { opacity: .16; }
.kd-mo:not([data-kd-restore]) .kd-print:not([data-dev]) .kd-print-sharp { opacity: 0; }
.kd-mo .kd-print[data-ph="wrong"] .kd-sw-old { display: inline; }
.kd-mo .kd-print[data-ph="wrong"] .kd-sw-new { display: none; }
.kd-mo .kd-print[data-ph="fix"] .kd-sw-old { display: inline; position: absolute; left: 0; top: 0; z-index: 3; opacity: 0; }
.kd-mo .kd-print:is([data-ph="wrong"], [data-ph="fix"]) .kd-mk::after { transform: scaleX(0); }

/* Mary's note and the album's count (40 places, then «1 з 40»): on a phone one column at the print's right, the note at
   its top (it may lie across the spine, as a loose card does), the count at the print's foot, never closer than 8 px;
   from 600 both lie on the right page (the note over the corner of frame 2, the count under its nest) */
.kd-hero-note { position: relative; margin: 0; }
.kd-hero-note p { margin: 0; }
/* the one touch cue, in pencil under her question; it leaves once a print has developed (js/b1.js) */
.kd-hero-note .kd-hero-note-tap { margin-top: 6px; color: var(--paper-muted); font: 600 13px/17px var(--font-body); }
html:not(.kd-mo) .kd-hero-note-tap { display: none; }
.kd-count { display: grid; gap: 2px; max-width: 112px; margin: 0 0 0 12px;
  color: var(--paper-muted); font: 600 13px/17px var(--font-body); text-shadow: var(--emboss); }
.kd-count b { color: var(--paper-ink-2); font: 500 40px/40px var(--font-display); letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; }
.kd-chips { position: absolute; left: 0; top: calc(var(--sph) + 16px); z-index: 4; display: flex; flex-wrap: wrap; gap: 8px; width: max-content;
  max-width: calc(100vw - 52px); opacity: 0; visibility: hidden; }
.kd-stack[data-stage="done"] .kd-chips { opacity: 1; visibility: visible; }
/* the chips lie on the album's paper: paper pills with the paper's ink, by day and under the lamp */
.kd-b1 .kd-chip { border-color: var(--paper-control); background: color-mix(in srgb, var(--print) 70%, transparent); color: var(--paper-ink); }
.kd-b1 .kd-chip:hover { border-color: var(--paper-ink-2); }
.kd-b1 .kd-chip[data-on] { border-color: var(--print-marker); }
html:not(.js) .kd-chips { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .kd-mo .kd-stack .kd-print { transition: transform var(--dur-ui) var(--ease-standard); }
  .kd-mo .kd-stack .kd-print[data-pos="slot"] { transition: transform 550ms var(--kd-settle); }
  .kd-mo .kd-stack .kd-print[data-pos="out"] { transition: transform var(--dur-overlay) var(--ease-standard); }
  .kd-mo .kd-print::before { transition: opacity var(--dur-ui) var(--ease-standard); }
  .kd-mo .kd-print-halo { transition: opacity var(--dur-reveal) var(--kd-settle); }
  .kd-mo .kd-print[data-hot] .kd-print-halo { transition-duration: 120ms; }
  .kd-mo .kd-print[data-ph="fix"] .kd-sw-old { animation: kd-sw-out 180ms var(--ease-standard) both; }
  .kd-mo .kd-print[data-ph="fix"] .kd-sw-new::before { animation: kd-sw-wipe 500ms var(--kd-dev) 120ms both; }
  .kd-mo .kd-print[data-ph="done"] .kd-mk::after { transition: transform var(--dur-reveal) var(--kd-dev); }
  .kd-mo .kd-stack-slot .kd-corner { transition: opacity var(--dur-ui) var(--ease-standard) 300ms, transform 550ms var(--kd-settle) 300ms; }
  .kd-mo .kd-chips { transition: opacity var(--dur-ui) var(--ease-standard), visibility 0s linear var(--dur-ui); }
  .kd-mo .kd-stack[data-stage="done"] .kd-chips { transition: opacity var(--dur-ui) var(--ease-standard) 160ms, visibility 0s; }
  .kd-print-gloss { transition: transform var(--dur-press) linear; }
}
/* the warm edge rises once after the first paint (and once more on a print «Інше речення ›» brings to the front) */
@media (prefers-reduced-motion: no-preference) {
  .kd-mo:not([data-kd-restore]) .kd-stack .kd-print[data-pos="0"]:not([data-dev]) .kd-print-edge { animation: kd-edge 1500ms var(--kd-dev) 900ms both; }
}
@keyframes kd-edge { from { opacity: 0; } }
@keyframes kd-sw-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes kd-sw-wipe { from { transform: none; } to { transform: scaleX(0); } }
@media (hover: hover) and (pointer: fine) { .kd-mo .kd-stack[data-stage="choose"] .kd-print:hover { --hy: -4px; } }
/* a restored example lands without its flight */
.kd-stack.kd-inst .kd-print, .kd-stack.kd-inst .kd-corner, .kd-stack.kd-inst .kd-chips { transition: none !important; }

/* from 600: the whole spread lies inside the plate, a page each side of the spine. Tablet: under the words, centred, at
   most 620 px; desk: at their right. The left page holds the stack (and, developed, the print in its nest); the right page
   the nest of frame 2 with the second latent print in it, Mary's note over its corner and the count under it. The plate is
   the container (cqi): no 100vw, so a desktop scrollbar never pushes the spread out of it. */
@media (min-width: 600px) {
  .kd-b1 .kd-hero-in.lk-plate { container-type: inline-size; padding: 24px 24px 0; }
  .kd-hero-copy { max-width: 600px; }
  .kd-scene { --aw: min(100cqi, 620px); --ax: calc((100cqi + 48px - var(--aw)) / 2); --cb: 12px; --pm: 22px;
    --lw: calc((var(--aw) - var(--cb) * 2) / 2); --rw: var(--lw); --spw: calc(var(--lw) - var(--pm) * 2); --rp: calc(var(--ax) + var(--cb) + var(--lw));
    --sx: calc(var(--ax) + var(--cb) + var(--pm)); --sy: calc(var(--cb) + 26px); --ah: calc(var(--sph) + 154px);
    --nw: max(15ch, calc(var(--spw) * .66));
    height: var(--ah); margin: 28px -24px 32px; }
  .kd-scene-album { top: 0; height: var(--ah); border-radius: 12px; --b1-gx: 58%; }
  .kd-b1 .kd-corner { --cw: 22px; }
  .kd-scene-next { display: none; }
  .kd-scene-nest { display: block; position: absolute; left: var(--pm); top: calc(var(--sy) + 8px - var(--cb)); width: var(--spw); height: var(--sph); }
  /* the nest's number in pencil, top left: seen when the nest is empty (after a print has developed) */
  .kd-scene-nest-n { position: absolute; left: 7%; top: 16px; color: var(--paper-muted); font: 400 17px/1 var(--font-hand); font-variation-settings: var(--hand-axes); opacity: .8; rotate: -1.5deg; }
  /* the second print lies in the nest of frame 2, whole (its sentence reads: the choice is visible before a tap) */
  .kd-stack .kd-print[data-pos="1"] { --x: var(--lw); --y: 8px; --r: 0deg; }
  .kd-stack .kd-print[data-pos="1"] :is(.kd-print-win, .kd-print-foot) { visibility: visible; }
  .kd-hero-side { display: contents; }
  .kd-hero-note { position: absolute; z-index: 6; left: calc(var(--rp) + var(--pm) + var(--spw) + 12px - var(--nw)); top: calc(var(--sy) - 6px); width: var(--nw);
    padding: 12px 14px 14px; font-size: 17px; line-height: 22px; }
  .kd-hero-note .kd-hero-note-tap { margin-top: 8px; }
  /* once a print lies in its nest the nest of frame 2 is empty: the note settles into its lower half */
  .kd-stack[data-stage="done"] ~ .kd-hero-side .kd-hero-note { translate: 0 calc(var(--sph) * .52); }
  .kd-count { position: absolute; z-index: 1; left: calc(var(--rp) + var(--pm) + 2px); top: calc(var(--sy) + 8px + var(--sph) + 14px);
    display: flex; align-items: flex-end; gap: 12px; max-width: none; margin: 0; }
  .kd-count b { font-size: 48px; line-height: 44px; }
  .kd-count-l { max-width: 128px; padding-bottom: 2px; }
  .kd-chips { top: calc(var(--sph) + 30px); }
  .kd-b1 .kd-chip { min-height: 44px; padding: 0 14px; font-size: 14px; }
  .kd-scene .kd-print-foot { padding-bottom: 4px; }
  .kd-scene .kd-print-line { line-height: 1.12; }
  .kd-scene .kd-print-cap { margin-top: 6px; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 600px) {
  .kd-mo .kd-hero-note { transition: translate 550ms var(--kd-settle); }
  .kd-stack.kd-inst ~ .kd-hero-side .kd-hero-note { transition: none; }
}
/* desk: words left, centred on the plate's height; the spread right, inside the plate */
@media (min-width: 1024px) {
  .kd-b1 { padding-top: 8px; --b1-lx: 72%; --b1-ly: 52%; --aw: clamp(520px, 45vw, 660px); }
  .kd-b1 .kd-hero-in.lk-plate { display: grid; grid-template-columns: minmax(0, 1fr) var(--aw); align-items: center; column-gap: 32px;
    padding: 0 40px 0 var(--card-pad-x); overflow: visible; }
  .kd-hero-copy { align-self: center; max-width: none; padding-block: 56px; }
  .kd-b1 .kd-trust-m { display: none; }
  .kd-eyebrow { margin-bottom: 18px; }
  .kd-eyebrow > span:last-child { display: grid; }
  .kd-eyebrow-mark { width: 40px; height: 40px; }
  .kd-eyebrow-mark i { left: 12px; top: 9px; width: 16px; height: 20px; }
  .kd-eyebrow-mark i::before { height: 13px; }
  .kd-sub { margin-top: 20px; font-size: 18px; line-height: 28px; }
  .kd-hero-act { display: grid; justify-items: start; gap: 10px; margin-top: 32px; }
  .kd-hero-act .kd-meta { padding-left: 4px; }
  .kd-hero-act .kd-trust { margin-top: -2px; color: var(--ink-2); font-size: 15px; line-height: 20px; font-weight: 500; }
  .kd-scene { --aw: clamp(520px, 45vw, 660px); --ax: 0px; --cb: 14px; margin: 40px 0; }
  .kd-b1 .kd-corner { --cw: 24px; }
  .kd-hero-note { font-size: 18px; line-height: 24px; padding: 14px 16px 16px; }
  .kd-count b { font-size: 56px; line-height: 50px; }
  /* a desk needs 24 px targets; the chips stay 40 px, short of the spine */
  .kd-b1 .kd-chip { min-height: 40px; padding: 0 13px; }
}

/* f1 · the hint names the gesture of the pointer in hand: a finger on a phone, a click with a mouse (editor.language) */
.kd-tap-m { display: none; }
@media (hover: hover) and (pointer: fine) { .kd-tap-t { display: none; } .kd-tap-m { display: inline; } }