/* generated by sync-static.mjs, do not edit: edit the sources and run node products/kadr/landing/tools/sync-static.mjs.
   The late styles of the page in one file (plan f2 K3), in this order: css/ui/reveal.css, css/ui/lqip.css, css/ui/sound.css, css/ui/segments.css, css/ui/sheet.css, css/ui/tilt.css, css/ui/ticket.css, css/ui/faq.css, css/ui/finale.css, css/b3.css, css/b4.css, css/b5.css, css/b11.css, css/b6.css, css/b7.css, css/b8.css, css/b9.css. */
/* ---- css/ui/reveal.css ---- */
.rv-arc,.rv-draw>[pathLength]{stroke-dasharray:1}.rv-wipe{position:relative}.rv-wipe:after{content:"";position:absolute;inset:0;background:var(--rv-wipe-bg,var(--paper,#fffdf8));transform-origin:100% 50%;scale:0 1;pointer-events:none}@media(prefers-reduced-motion:no-preference){:root{--rv-ease:cubic-bezier(.2,.7,.3,1);--rv-settle:linear(0,.72 60%,1.015 88%,1)}.rv-now{--rv-delay:.3s}.rv-mark:after{transform-origin:0 50%}.rv-on .rv-settle:not(.is-in,.rv-now),.rv-on .rv-draw:not(.is-in,.rv-now)>*{opacity:0}.rv-on .rv-draw:not(.is-in,.rv-now)>[pathLength]{opacity:1;stroke-dashoffset:1}.rv-on .rv-mark:not(.is-in,.rv-now):after{scale:0 1}.rv-on .rv-wipe:not(.is-in,.rv-now):after{scale:1 1}:is(.is-in,.rv-now).rv-settle{animation:rv-settle .7s var(--rv-settle) var(--rv-delay,0ms) backwards}:is(.is-in,.rv-now).rv-mark:after{animation:rv-mark .45s var(--rv-ease) var(--rv-delay,0ms) backwards}:is(.is-in,.rv-now).rv-wipe:after{animation:rv-wipe .7s var(--rv-ease) var(--rv-delay,0ms) backwards}:is(.is-in,.rv-now).rv-arc{animation:rv-stroke .45s var(--rv-ease) var(--rv-delay,0ms) backwards}:is(.is-in,.rv-now).rv-draw>*{animation:rv-pop .45s var(--rv-ease) calc(var(--i,0) * 60ms + var(--rv-delay,0ms)) backwards}:is(.is-in,.rv-now).rv-draw>[pathLength]{animation-name:rv-stroke}@supports (animation-timeline:view()){.rv-arc:not(.rv-now){animation:rv-stroke linear both;animation-timeline:view();animation-range:entry 20% cover 50%}}@supports not (animation-timeline:view()){.rv-on .rv-arc:not(.is-in,.rv-now){stroke-dashoffset:1}}.rv-done :is(.rv-settle,.rv-arc,.rv-draw>*,.rv-draw>[pathLength]),.rv-done :is(.rv-mark,.rv-wipe):after{animation:none}@keyframes rv-settle{0%{opacity:0;translate:0 10px;rotate:var(--rv-rotate,1.5deg)}}@keyframes rv-mark{0%{scale:0 1}}@keyframes rv-wipe{0%{scale:1 1}}@keyframes rv-stroke{0%{stroke-dashoffset:1}}@keyframes rv-pop{0%{opacity:0;scale:.6}}}
/* ---- css/ui/lqip.css ---- */
.lk-lqip,.lk-lqip-box{background:var(--lqip,none) 50%/cover no-repeat,var(--lqip-c,var(--world-mat,var(--cream)))}img.lk-lqip[data-lqip=done]{background:none}@media(prefers-reduced-motion:no-preference){.lk-lqip-box img[data-lqip=wait]{opacity:0}.lk-lqip-box img[data-lqip=done]{transition:opacity var(--dur-overlay,.28s) var(--ease-standard,ease)}}
/* ---- css/ui/sound.css ---- */
.lk-sound{position:relative;display:inline-flex;width:fit-content;align-items:center;gap:10px;box-sizing:border-box;min-height:44px;margin:0;padding:5px 18px 5px 5px;border:0;border-radius:999px;background:var(--raised);color:var(--ink);font:700 var(--fs-ui,15px)/1.2 var(--font-ui,sans-serif);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;-webkit-tap-highlight-color:transparent}.lk-sound[hidden]{display:none}.lk-sound:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.lk-sound__icon{position:relative;display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--world-ink,var(--ink));color:var(--paper)}.lk-sound__icon svg{width:18px;height:18px;fill:currentColor}.lk-sound__pause,.lk-sound:is([data-sound=playing],[data-sound=loading]) .lk-sound__play{display:none}.lk-sound:is([data-sound=playing],[data-sound=loading]) .lk-sound__pause{display:inline}.lk-sound__icon:before{content:"";position:absolute;inset:-5px;border:2px solid var(--world-accent,var(--marker));border-radius:50%;opacity:0}.lk-sound[data-sound=loading] .lk-sound__icon:before{opacity:.35}.lk-sound[data-sound=playing] .lk-sound__icon:before{opacity:.9}.lk-sound:after{content:"";position:absolute;left:49px;right:18px;bottom:7px;height:2px;border-radius:2px;background:var(--world-accent,var(--marker));transform:scaleX(var(--progress,0));transform-origin:0 50%;opacity:0}.lk-sound:is([data-sound=playing],[data-sound=paused]):after{opacity:.7}.lk-sound__msg{margin:8px 0 0;color:var(--ink-2);font:500 var(--fs-meta,13px)/18px var(--font-ui,sans-serif)}.lk-sound__msg:empty{display:none}@media(prefers-reduced-motion:no-preference){.lk-sound__icon:before{transform:scale(calc(.92 + var(--level,0) * .42));transition:opacity var(--dur-ui,.22s)}.lk-sound{transition:scale var(--dur-press,.12s)}.lk-sound:active{scale:.98}}
/* ---- css/ui/segments.css ---- */
.lk-seg{position:relative;display:inline-flex;width:fit-content;max-width:100%;box-sizing:border-box;padding:4px;border-radius:999px;background:var(--cream);isolation:isolate}.lk-seg--scroll{overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;scroll-padding-inline:8px}.lk-seg--scroll::-webkit-scrollbar{display:none}.lk-seg[hidden]{display:none}.lk-seg--fill{display:flex;width:100%}.lk-seg--fill>[role=tab]{flex:1 1 0}.lk-seg>:is(button,a){position:relative;z-index:1;flex:none;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;min-width:44px;min-height:44px;margin:0;padding:0 18px;border:0;border-radius:999px;background:none;color:var(--ink-2);font:600 var(--fs-ui,15px)/1.2 var(--font-ui,sans-serif);text-decoration:none;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent}.lk-seg>[role=tab]:after{content:attr(data-label);height:0;overflow:hidden;visibility:hidden;font-weight:700}.lk-seg>[aria-selected=true]{color:var(--ink);font-weight:700}.lk-seg>:is(button,a):focus-visible{outline:2px solid var(--focus);outline-offset:-2px}.lk-seg__pill{position:absolute;top:0;left:0;z-index:0;pointer-events:none;filter:drop-shadow(0 1px 1px rgb(39 46 42/.08)) drop-shadow(0 4px 10px rgb(39 46 42/.08))}.lk-seg__pill>i{position:absolute;top:0;left:0;width:var(--h);height:var(--h);border-radius:50%;background:var(--raised)}.lk-seg__pill>i:nth-child(2){width:1px;border-radius:0;transform-origin:0 0}@media(hover:hover){.lk-seg>[aria-selected=false]:hover{color:var(--ink)}}@media(prefers-reduced-motion:no-preference){.lk-seg>:is(button,a){transition:color var(--dur-hover,.2s),scale var(--dur-press,.12s)}.lk-seg>:is(button,a):active{scale:.98}}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .lk-seg__pill{filter:drop-shadow(0 1px 2px rgb(0 0 0/.35))}}:root[data-theme=dark] .lk-seg__pill{filter:drop-shadow(0 1px 2px rgb(0 0 0/.35))}
/* ---- css/ui/sheet.css ---- */
:where(.lk-sheet-host){position:relative}.lk-sheet{position:absolute;z-index:30;box-sizing:border-box;overflow:auto;overscroll-behavior:contain;outline:0;padding:20px 20px 24px;border-radius:var(--r-sheet,24px);background:var(--raised);color:var(--ink);box-shadow:var(--shadow-e2,0 32px 96px rgb(23 34 28/.22)),0 0 0 1px var(--ink-a08,rgb(39 46 42/.08))}.lk-sheet[data-mode=card]{width:min(var(--sheet-w,360px),calc(100% - 32px));max-height:calc(100% - 32px)}.lk-sheet[data-mode=bottom]{left:8px;right:8px;padding-top:0;padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}.lk-sheet__grip{display:grid;place-items:center;height:28px;margin:0 52px 4px;cursor:grab}.lk-sheet__grip:before{content:"";width:40px;height:5px;border-radius:999px;background:var(--line-contrast,#8f978d)}.lk-sheet__close{position:absolute;top:6px;right:6px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:999px;background:transparent;color:var(--ink-2);cursor:pointer}.lk-sheet__close:hover{background:var(--ink-a08,rgb(39 46 42/.08))}.lk-sheet__close:focus-visible,.lk-sheet:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.lk-sheet__body>:first-child{margin-top:0;padding-inline-end:36px}.lk-sheet__body>:last-child{margin-bottom:0}.lk-sheet__scrim{position:absolute;inset:0;z-index:29;border-radius:inherit;background:var(--ink-a16,rgb(39 46 42/.16))}@media(prefers-reduced-motion:no-preference){.lk-sheet__close{transition:background-color var(--dur-hover,.2s)}.lk-sheet__close:active{scale:.98}}
/* ---- css/ui/tilt.css ---- */
:where(.lk-tilt){position:relative}.lk-tilt{will-change:transform}.lk-tilt__glare{position:absolute;inset:0;z-index:2;overflow:hidden;border-radius:inherit;pointer-events:none;opacity:0;mix-blend-mode:soft-light}.lk-tilt__glare:before{content:"";position:absolute;inset:-50%;background:radial-gradient(circle at 50% 50%,rgb(255 255 255/var(--tilt-glare,.55)),#fff0 42%);transform:translate(var(--gx,0%),var(--gy,0%))}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .lk-tilt__glare{--tilt-glare:.22}}:root[data-theme=dark] .lk-tilt__glare{--tilt-glare:.22}
/* ---- css/ui/ticket.css ---- */
:where([class^=lk-],[class*=" lk-"]),:where([class^=lk-],[class*=" lk-"]):before,:where([class^=lk-],[class*=" lk-"]):after{box-sizing:border-box}.lk-ticket{--tk-main:var(--raised);--tk-stub:var(--world);--tk-ink:var(--world-ink);--tk-notch:13px;--tk-r:var(--r-card);--tk-perf:color-mix(in srgb,var(--tk-ink) 42%,transparent);--tk-cut-a:radial-gradient(circle at 0 100%,#0000 var(--tk-notch),#000 calc(var(--tk-notch) + .5px)) 0 0/51% 100% no-repeat,radial-gradient(circle at 100% 100%,#0000 var(--tk-notch),#000 calc(var(--tk-notch) + .5px)) 100% 0/51% 100% no-repeat;--tk-cut-b:radial-gradient(circle at 0 0,#0000 var(--tk-notch),#000 calc(var(--tk-notch) + .5px)) 0 0/51% 100% no-repeat,radial-gradient(circle at 100% 0,#0000 var(--tk-notch),#000 calc(var(--tk-notch) + .5px)) 100% 0/51% 100% no-repeat;position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr);margin:0;color:var(--ink);filter:drop-shadow(0 1px 1px color-mix(in srgb,var(--ink-press) 12%,transparent)) drop-shadow(0 18px 24px color-mix(in srgb,var(--ink-press) 14%,transparent))}.lk-ticket__main,.lk-ticket__stub{position:relative;min-width:0;padding:clamp(22px,18px + 1vw,32px)}.lk-ticket__main{border-radius:var(--tk-r) var(--tk-r) 0 0;background:var(--tk-main);-webkit-mask:var(--tk-cut-a);mask:var(--tk-cut-a)}.lk-ticket__stub{display:grid;align-content:start;gap:12px;border-radius:0 0 var(--tk-r) var(--tk-r);background:var(--tk-stub);color:var(--tk-ink);-webkit-mask:var(--tk-cut-b);mask:var(--tk-cut-b)}.lk-ticket__stub:before{content:"";position:absolute;top:-2px;left:calc(var(--tk-notch) + 5px);right:calc(var(--tk-notch) + 5px);height:4px;background:radial-gradient(circle,var(--tk-perf) 1.6px,transparent 2.1px) 0 50%/9px 4px repeat-x}.lk-ticket:not([data-variant=chest]) .lk-ticket__main:after{content:"";position:absolute;inset:8px;border:1px solid var(--world-line);border-radius:calc(var(--tk-r) - 6px);pointer-events:none}:is(.lk-ticket__main,.lk-ticket__stub)>*{position:relative}.lk-ticket__stub .lk-cta{width:100%}.lk-ticket__stamp{display:inline-grid;place-items:center;justify-self:end;width:clamp(76px,64px + 2vw,92px);aspect-ratio:1;margin:0;padding:10px;border:2px solid currentColor;border-radius:50%;box-shadow:inset 0 0 0 4px var(--tk-stub),inset 0 0 0 5.5px currentColor;color:var(--tk-ink);font:700 .75rem/1.1 var(--font-body);letter-spacing:.08em;text-align:center;text-transform:uppercase;rotate:-11deg;opacity:.92}.lk-ticket__stamp b{display:block;font:500 1.5rem/1 var(--font-display);letter-spacing:-.02em;text-transform:none}.lk-ticket__route{display:block;width:100%;height:auto;overflow:visible;fill:none;stroke:var(--tk-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.lk-ticket__route :is(path,line,polyline){stroke-dasharray:1}.lk-ticket__seal{display:grid;place-items:center;width:64px;aspect-ratio:1;margin:0;border-radius:50%;background:radial-gradient(circle at 34% 30%,color-mix(in oklab,var(--coral) 70%,var(--raised)),var(--coral-press) 58%,color-mix(in oklab,var(--coral-press) 70%,var(--ink-press)));box-shadow:inset 0 0 0 4px color-mix(in srgb,var(--ink-press) 16%,transparent),0 4px 10px -4px color-mix(in srgb,var(--ink-press) 50%,transparent);color:var(--on-cta);font:italic 600 .8125rem/1.05 var(--font-display);text-align:center;rotate:8deg}.lk-ticket .lk-tilt__glare{position:absolute;inset:0;z-index:4;border-radius:var(--tk-r);background:radial-gradient(circle at calc(50% + var(--gx,0%)) calc(50% + var(--gy,0%)),color-mix(in srgb,var(--yellow) 34%,transparent),transparent 58%);mix-blend-mode:soft-light;opacity:0;pointer-events:none}@media(min-width:768px){.lk-ticket{grid-template-columns:minmax(0,1fr) minmax(220px,.62fr);--tk-cut-a:radial-gradient(circle at 100% 0,#0000 var(--tk-notch),#000 calc(var(--tk-notch) + .5px)) 0 0/100% 51% no-repeat,radial-gradient(circle at 100% 100%,#0000 var(--tk-notch),#000 calc(var(--tk-notch) + .5px)) 0 100%/100% 51% no-repeat;--tk-cut-b:radial-gradient(circle at 0 0,#0000 var(--tk-notch),#000 calc(var(--tk-notch) + .5px)) 0 0/100% 51% no-repeat,radial-gradient(circle at 0 100%,#0000 var(--tk-notch),#000 calc(var(--tk-notch) + .5px)) 0 100%/100% 51% no-repeat}.lk-ticket__main{border-radius:var(--tk-r) 0 0 var(--tk-r)}.lk-ticket__stub{align-content:center;border-radius:0 var(--tk-r) var(--tk-r) 0}.lk-ticket__stub:before{top:calc(var(--tk-notch) + 5px);bottom:calc(var(--tk-notch) + 5px);left:-2px;right:auto;width:4px;height:auto;background:radial-gradient(circle,var(--tk-perf) 1.6px,transparent 2.1px) 50% 0/4px 9px repeat-y}}.lk-ticket[data-variant=plain]{--tk-stub:var(--cream);--tk-ink:var(--world-ink)}.lk-ticket[data-variant=cinema] .lk-ticket__main{padding-top:calc(clamp(22px,18px + 1vw,32px) + 18px);background:radial-gradient(circle,var(--world-deep) 3px,transparent 3.5px) 6px 9px/16px 18px repeat-x,linear-gradient(var(--world) 0 0) 0 0/100% 18px no-repeat,var(--tk-main)}.lk-ticket[data-variant=cinema] .lk-ticket__stub{background:radial-gradient(circle,var(--world-deep) 3px,transparent 3.5px) 6px 9px/16px 18px repeat-x,var(--tk-stub)}.lk-ticket[data-variant=level]{--tk-stub:var(--world)}.lk-ticket[data-variant=chest]{--tk-main:var(--grad-gold);--tk-stub:color-mix(in oklab,var(--world) 70%,var(--yellow));--tk-ink:var(--world-ink);--tk-perf:var(--w-skarb-gold)}.lk-ticket[data-variant=chest] .lk-ticket__main{background:var(--grad-gold),var(--world);padding-top:calc(clamp(22px,18px + 1vw,32px) + 16px)}.lk-ticket[data-variant=chest] .lk-ticket__main:before{content:"";position:absolute;inset:0 0 auto;height:16px;border-bottom:3px double var(--w-skarb-gold);background:linear-gradient(180deg,color-mix(in oklab,var(--w-skarb-gold) 46%,var(--world)),color-mix(in oklab,var(--w-skarb-gold) 22%,var(--world)));transform-origin:50% 100%}.lk-ticket[data-variant=chest] .lk-ticket__main:after{content:"";position:absolute;inset:16px 10% auto;height:10px;background:radial-gradient(50% 100% at 50% 0,color-mix(in srgb,var(--yellow) 80%,transparent),transparent);opacity:0;pointer-events:none}.lk-ticket[data-variant=chest]:is(:hover,:focus-within,:active) .lk-ticket__main:before{transform:perspective(220px) rotateX(16deg)}.lk-ticket[data-variant=chest]:is(:hover,:focus-within,:active) .lk-ticket__main:after{opacity:1}@media(prefers-reduced-motion:no-preference){.lk-ticket[data-armed]{opacity:0}.lk-ticket[data-armed] :is(.lk-ticket__stamp,.lk-ticket__seal){opacity:0}.lk-ticket[data-armed] .lk-ticket__route :is(path,line,polyline){stroke-dashoffset:1}.lk-ticket[data-play]{animation:lk-tk-settle var(--dur-settle) var(--ease-settle) backwards}.lk-ticket[data-play] .lk-ticket__stub{animation:lk-tk-snap var(--spring-paper-dur,833ms) var(--ease-out) .64s backwards}.lk-ticket[data-play] .lk-ticket__stamp{animation:lk-tk-stamp .32s var(--ease-stone) 1s backwards}.lk-ticket[data-play] .lk-ticket__seal{animation:lk-tk-stamp .32s var(--ease-stone) 1.1s backwards}.lk-ticket[data-play] .lk-ticket__route :is(path,line,polyline){animation:lk-tk-draw 1.1s var(--ease-inout) .9s backwards}.lk-ticket[data-variant=chest] .lk-ticket__main:before{transition:transform var(--spring-heavy-dur,.7s) var(--spring-heavy,var(--ease-out))}.lk-ticket[data-variant=chest] .lk-ticket__main:after{transition:opacity var(--dur-hover) var(--ease-out)}@keyframes lk-tk-settle{0%{opacity:0;translate:0 14px;rotate:1.2deg}}@keyframes lk-tk-snap{28%{translate:0 4px;rotate:.6deg}62%{translate:0 -1px;rotate:-.2deg}}@keyframes lk-tk-stamp{0%{opacity:0;scale:1.18;rotate:-4deg}}@keyframes lk-tk-draw{0%{stroke-dashoffset:1}}@media(min-width:768px){@keyframes lk-tk-snap{28%{translate:4px 0;rotate:.6deg}62%{translate:-1px 0;rotate:-.2deg}}}}
/* ---- css/ui/faq.css ---- */
:where([class^=lk-],[class*=" lk-"]),:where([class^=lk-],[class*=" lk-"]):before,:where([class^=lk-],[class*=" lk-"]):after{box-sizing:border-box}.lk-faq{margin:0;padding:0;border-top:1px solid var(--line)}.lk-faq__item{border-bottom:1px solid var(--line)}.lk-faq__q{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:14px 0;color:var(--ink);font:600 var(--fs-name)/1.35 var(--font-body);letter-spacing:var(--ls-name);list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent;text-decoration:underline 2px transparent;text-underline-offset:.32em;text-decoration-skip-ink:auto}.lk-faq__q::-webkit-details-marker{display:none}.lk-faq__q::marker{content:""}.lk-faq__q:hover{color:var(--world-ink)}.lk-faq__q:focus-visible{outline:var(--focus-ring);outline-offset:2px;border-radius:6px}.lk-faq__item[open]>.lk-faq__q{color:var(--world-ink);text-decoration-color:var(--world-accent)}:is([data-world=immersion] .lk-faq__q){text-decoration-style:dashed}:is([data-world=pronunciation] .lk-faq__q){text-decoration-style:wavy;text-decoration-thickness:1.5px}:is([data-world=steps] .lk-faq__q){text-decoration-style:dotted;text-decoration-thickness:3px}:is([data-world=skarb] .lk-faq__q){text-decoration-style:double}[data-world=skarb] .lk-faq__item[open]>.lk-faq__q{text-decoration-color:var(--w-skarb-gold)}.lk-faq__chev{flex:none;width:36px;height:36px;padding:7px;border-radius:50%;background:var(--world);color:var(--world-ink);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.lk-faq__item[open] .lk-faq__chev{rotate:180deg;background:var(--world-ink);color:var(--world)}.lk-faq__a{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:start;padding:2px 0 22px}.lk-faq__ava{width:32px;height:32px;border-radius:50%;object-fit:cover;background:var(--yellow);box-shadow:var(--sh-paper)}.lk-faq__a>:not(.lk-faq__ava){margin:0;padding:14px 18px;border-radius:4px 18px 18px;background:var(--raised);box-shadow:var(--sh-paper);color:var(--ink);font:400 var(--fs-body)/1.6 var(--font-body);text-wrap:pretty}.lk-faq__dots{display:none!important;align-items:center;gap:6px;width:max-content;min-height:52px}.lk-faq__dots i{width:7px;height:7px;border-radius:50%;background:var(--world-ink);opacity:.45}[data-typing]>.lk-faq__a>.lk-faq__dots,.lk-faq__say[data-typing]>.lk-faq__dots{display:flex!important}[data-typing]>.lk-faq__a>:not(.lk-faq__ava,.lk-faq__dots){display:none}.lk-faq__say[data-typing]>.lk-faq__words{visibility:hidden}.lk-faq__say>.lk-faq__dots{position:absolute;top:22px;left:30px;min-height:0;height:1.55em}.lk-faq__room{display:none}@media(min-width:1024px){[data-lk-faq-host]{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr;column-gap:clamp(48px,6vw,104px);align-items:start}[data-lk-faq-host]>*{grid-column:1}[data-lk-faq-host]>.lk-faq{grid-column:2;grid-row:1/span 2}.lk-faq__room{position:sticky;top:calc(var(--head-h) + 32px);display:grid;grid-template-columns:96px minmax(0,1fr);gap:20px;align-items:center;margin-top:36px}.lk-faq__me{position:relative;width:96px;height:96px;margin:0;padding:6px;border-radius:50%;background:var(--world);box-shadow:var(--sh-world);rotate:var(--turn,0deg)}.lk-faq__me:before{content:"";position:absolute;inset:0;z-index:-1;border-radius:50%;background:var(--world-deep);translate:6px 6px}.lk-faq__me img,.lk-faq__me b{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;object-fit:cover;object-position:50% 30%;background:var(--yellow);color:var(--on-yellow);font:500 2rem/1 var(--font-display)}.lk-faq__line{margin:0;color:var(--world-ink);font:italic 400 var(--fs-hand)/1.3 var(--font-display);letter-spacing:-.01em;text-wrap:balance}.lk-faq__say{position:relative;grid-column:1/-1;min-height:96px;margin:0;padding:26px 30px 28px;border-radius:6px 28px 28px;background:var(--raised);box-shadow:var(--sh-lift);color:var(--ink);font:400 var(--fs-lead)/1.55 var(--font-body);text-wrap:pretty}.lk-faq__say:before{content:"";position:absolute;top:-13px;left:34px;width:26px;height:16px;background:inherit;clip-path:polygon(0 100%,18% 0,100% 100%)}.lk-faq__say[data-hint]{color:var(--ink-2);font:italic 400 var(--fs-quote)/1.45 var(--font-display)}.lk-faq__words>*{margin:0}.lk-faq__words>*+*{margin-top:.6em}.lk-faq__words a{color:var(--link);font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.2em;cursor:pointer}.lk-faq__words [hidden]{display:none}.lk-faq[data-room] .lk-faq__a:not(:focus-within){position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.lk-faq[data-room] .lk-faq__item[open] .lk-faq__chev{rotate:90deg}.lk-faq[data-room] .lk-faq__item[open]{border-bottom-color:var(--world-accent)}}@media(prefers-reduced-motion:no-preference){.lk-faq__q{transition:color var(--dur-hover) var(--ease-out),text-decoration-color var(--dur-reveal) var(--ease-out),scale .12s var(--ease-out)}details>summary{transition:scale .12s var(--ease-out)}details>summary:active{scale:.98}.lk-faq__chev{transition:rotate var(--spring-snap-dur,458ms) var(--spring-snap,var(--ease-out)),background-color var(--dur-ui) var(--ease-out),color var(--dur-ui) var(--ease-out)}.lk-faq__item[open] .lk-faq__a{animation:lk-say var(--dur-ui) var(--ease-out) backwards}.lk-faq__dots i{animation:lk-type .45s var(--ease-inout) calc(var(--d,0) * 90ms) backwards}.lk-faq__dots i:nth-child(2){--d:1}.lk-faq__dots i:nth-child(3){--d:2}.lk-faq__me{transition:rotate var(--spring-paper-dur,833ms) var(--spring-paper,var(--ease-out))}@keyframes lk-say{0%{opacity:0;translate:0 6px}}@keyframes lk-type{0%{opacity:.2;translate:0 3px}45%{opacity:1;translate:0 -4px}}}
/* ---- css/ui/finale.css ---- */
:where([class^=lk-],[class*=" lk-"]),:where([class^=lk-],[class*=" lk-"]):before,:where([class^=lk-],[class*=" lk-"]):after{box-sizing:border-box}.lk-finale{padding-block:var(--section-y);background:var(--paper);--rv-wipe-bg:var(--paper)}.lk-finale__in{display:grid;justify-items:center;gap:32px;max-width:var(--content-max);margin-inline:auto;padding-inline:var(--gutter);text-align:center}.lk-finale__photo{position:relative;isolation:isolate;width:min(68vw,300px);margin:0 14px 14px 0;padding:12px;border-radius:50%;background:var(--finale-circle,var(--world));box-shadow:var(--sh-world)}.lk-finale__photo:before{content:"";position:absolute;inset:0;z-index:-1;border-radius:50%;background:var(--finale-back,var(--world-deep));translate:14px 12px}[data-world=home] .lk-finale__photo,.lk-finale[data-world=home] .lk-finale__photo{--finale-circle:var(--yellow);--finale-back:var(--w-home-deep)}.lk-finale__photo{display:grid;place-items:center;aspect-ratio:1}.lk-finale__photo img{display:block;width:78%;height:auto;aspect-ratio:4/5;border:5px solid var(--raised);border-radius:var(--r-card,16px);object-fit:cover;object-position:50% 50%;box-shadow:var(--sh-paper);rotate:-3deg}.lk-finale__text{display:grid;justify-items:center;gap:6px;width:100%;max-width:34rem}.lk-finale__say{margin:0;color:var(--link);font:italic 400 var(--fs-title)/1.2 var(--font-display);letter-spacing:-.02em;text-wrap:balance}.lk-finale__sign{position:relative;display:inline-block;margin:4px 0 18px;color:var(--ink);font:italic 500 clamp(2.5rem,2.2rem + 1.2vw,3.25rem)/1.42 var(--font-display);letter-spacing:-.02em}.lk-finale__sign:after{content:"";position:absolute;left:-6%;right:-10%;bottom:-.3em;height:.3em;background:var(--marker);rotate:-4deg;-webkit-mask:var(--lk-arc) center/100% 100% no-repeat;mask:var(--lk-arc) center/100% 100% no-repeat}.lk-finale__text .lk-link{margin-top:8px}@media(max-width:767px){.lk-finale__text .lk-cta{display:flex;width:100%}}@media(min-width:1024px){.lk-finale__in{grid-template-columns:auto minmax(0,34rem);justify-content:center;align-items:center;column-gap:clamp(48px,6vw,96px);text-align:start}.lk-finale__photo{width:360px}.lk-finale__text{justify-items:start}}.lk-finale__sign[data-pen]{line-height:1}.lk-finale__sign[data-pen]:after{display:none}.lk-fin__vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.lk-fin__pen{display:block;width:var(--pen-w,3.2em);height:1.42em;overflow:visible}.lk-fin__pen text{font:inherit;letter-spacing:inherit}.lk-fin__ink{fill:currentColor}.lk-fin__trace{fill:none;stroke:currentColor;stroke-width:.9px;stroke-linejoin:round;stroke-dasharray:var(--pen-len,360)}.lk-fin__trace tspan{opacity:0}.lk-fin__arc{fill:none;stroke:var(--marker);stroke-width:3.2px;stroke-linecap:round;stroke-dasharray:1}.lk-finale__photo[data-slot]{background:none;box-shadow:none}.lk-finale__photo[data-slot]:before{z-index:-2}.lk-finale__photo[data-slot]:after{content:"";position:absolute;inset:0;z-index:-1;border-radius:50%;background:var(--finale-circle,var(--world));box-shadow:var(--sh-world)}.lk-fin__slot{position:absolute;inset:-20%;z-index:1;width:140%;height:140%;overflow:visible;pointer-events:none;fill:none;stroke-linecap:round;stroke-linejoin:round}.lk-fin__slot--back{z-index:-3}.lk-fin__slot [pathLength]{stroke-dasharray:1}.lk-fin__sun{translate:0 calc((1 - var(--p)) * 54px)}.lk-fin__sun circle{fill:var(--yellow);stroke:none}.lk-fin__sun g{stroke:var(--yellow-press);stroke-width:3;opacity:calc((var(--p) - .78) * 5)}.lk-fin__heart{stroke:var(--world-accent);stroke-width:1.15;stroke-dasharray:3.4 2.5}.lk-fin__eq line{stroke:var(--world-accent);stroke-width:1.9}.lk-fin__eq line:nth-child(4n+1){stroke:var(--world-ink)}.lk-fin__string{display:block;width:min(100%,15rem);min-height:44px;margin:-14px 0 8px;padding:7px 0;border:0;border-radius:12px;background:none;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.lk-fin__string svg{display:block;width:100%;height:30px;overflow:visible}.lk-fin__string path{fill:none;stroke:var(--world-accent);stroke-width:1.6}.lk-fin__string circle{fill:var(--world-ink)}.lk-fin__string:focus-visible,.lk-finale__tap:focus-visible{outline:3px solid var(--world-ink);outline-offset:4px}.lk-finale__tap{position:absolute;z-index:2;inset:12px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}.lk-fin__day circle{fill:var(--raised);stroke:var(--world-ink);stroke-width:1.1}.lk-fin__day text{fill:var(--world-ink);stroke:none}.lk-fin__dl{font:700 6px/1 var(--font-ui,var(--font-body));letter-spacing:.06em;text-transform:uppercase}.lk-fin__num{font:500 11px/1 var(--font-display);font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.02em}.lk-fin__tick{stroke:var(--marker);stroke-width:2.2}.lk-fin__day{transform-box:fill-box;transform-origin:50% 50%}.lk-fin__ribbon{position:absolute;z-index:2;left:-9%;right:-9%;bottom:7%;margin:0;padding:9px 28px 10px;background:linear-gradient(180deg,var(--yellow),color-mix(in oklab,var(--yellow) 82%,var(--w-skarb-gold)));border-block:3px double var(--w-skarb-gold);color:var(--on-yellow);font:italic 500 clamp(.9375rem,.88rem + .25vw,1.0625rem)/1.25 var(--font-display);text-align:center;text-wrap:balance;rotate:-4deg;transform-origin:0 50%;clip-path:polygon(0 0,100% 0,96% 50%,100% 100%,0 100%,4% 50%)}.lk-fin__ribbon b{font-weight:600;font-style:normal;font-family:var(--font-body)}@media(min-width:1024px){.lk-fin__string{margin-inline:4px 0}}@media(prefers-reduced-motion:no-preference){.lk-finale[data-armed] :is(.lk-fin__ink,.lk-fin__ribbon,.lk-fin__day,.lk-fin__eq line){opacity:0}.lk-finale[data-armed] .lk-fin__tick{stroke-dashoffset:1}:is(.lk-fin__string,.lk-finale__photo:not([data-own-gesture])){transition:scale var(--dur-press) var(--ease-out)}:is(.lk-fin__string:active,.lk-finale__photo:not([data-own-gesture]):has(.lk-finale__tap:active)){scale:.98}.lk-finale[data-armed] :is(.lk-fin__arc,.lk-fin__mask){stroke-dashoffset:1}.lk-finale[data-play] .lk-fin__trace tspan{animation:lk-fin-trace .76s var(--ease-inout) calc(.56s + var(--i,0) * .17s) backwards}.lk-finale[data-play] .lk-fin__ink{animation:lk-fin-fade .52s var(--ease-out) 1.2s backwards}.lk-finale[data-play] .lk-fin__arc{animation:lk-fin-draw var(--dur-reveal) var(--ease-out) 1.5s backwards}.lk-fin__slot[data-run] .lk-fin__mask{animation:lk-fin-draw 1.5s var(--ease-inout) .26s backwards}.lk-fin__slot[data-run] .lk-fin__eq line{animation:lk-fin-rise .52s var(--spring-paper,var(--ease-out)) calc(.2s + var(--i) * 22ms) backwards}.lk-fin__slot[data-run] .lk-fin__day{animation:lk-fin-land .28s var(--ease-out) .2s backwards}.lk-fin__slot[data-run] .lk-fin__tick{animation:lk-fin-draw .42s var(--ease-out) .46s backwards}.lk-fin__ribbon[data-run]{animation:lk-fin-unroll .76s var(--spring-paper,var(--ease-out)) .65s backwards}.lk-fin__sun[data-echo]{animation:lk-fin-hop .7s var(--ease-stone)}@keyframes lk-fin-trace{0%{stroke-dashoffset:var(--pen-len,360);opacity:1}88%{stroke-dashoffset:0;opacity:1}}@keyframes lk-fin-fade{0%{opacity:0}}@keyframes lk-fin-draw{0%{stroke-dashoffset:1}}@keyframes lk-fin-rise{0%{opacity:0;stroke-dashoffset:1}}@keyframes lk-fin-land{0%{opacity:0;scale:.86}}@keyframes lk-fin-unroll{0%{opacity:0;scale:.08 1}}@keyframes lk-fin-hop{40%{translate:0 -12px}}}.lk-fin__slot[data-alt] .lk-fin__eq{transform:rotate(5.625deg)}
/* ---- css/b3.css ---- */
/* Block 3 «Один урок - один кадр» (#lesson, KL-1017-B, concept C block 3; audit s2 r2). One print and five paper luggage
   tags on one string: the steps of lesson 1 as the product runs them (lib/contracts/lesson.ts: 20 · 10 · 10 · 5 · 5
   minutes). Until f1 a tag's height was its time and each tag carried
   a small print in its step's state: latent, the darks, the colour, the line, the marker. The print's window always holds
   the lesson's photo and the steps develop it with the chemistry of #first (warm milk, the darks first, the reagent's edge
   at the lower margin). The step's object lies on the print as a slip under a clip; «Проявка» has no slip: the frame
   develops (js/b3.js: the product's shader through the kit's gl.js, the CSS layers otherwise; a held finger speeds it).
   Phone: the print with the way into lesson 1 right under it and the step's line under the link, the tags at the right.
   Desk: the words and the link at the left, the print with the step's line as its caption, the tags at the right.
   Ground «сизий туман» (kadr-board): grey-blue mount board, a little more blue since s2 r2 (OKLCH .832 / .029 / 232, day
   #B6CCD8, evening #0E1C23). ΔE ×100 (COLOR.md): to Listening #E7EDF5 11.3 (evening #1C2430 4.3), Steps 11.5 (5.1),
   Pronunciation 10.7; to its neighbours: the plate of #first 8.2, the paper of #you 16.5 (evening 4.3), the kraft of #album
   10.2. Contrast day / corner: ink 8.4, ink-2 5.6 / 5.4, muted and link 5.0 / 4.8, world ink 5.4 / 5.1; evening muted 6.3 / 5.9.
   Content is lesson 1 (content/authored/l01.json); the link leads into lesson 1. Without JS: «Проявка», the tags as a list.
   Motion only transform / opacity under prefers-reduced-motion: no-preference and html.kd-mo. 393 first.
   f1 (P2): the tags are one height (the tallest one's content, grid rows of 1fr); each carries its step's sign drawn with
   one pen in the world's ink (pencil, headphones, Mary, the developing tray, the calendar) and her action in two words;
   no small copies of the photo. Phone: the tags take ~52 % so «Розмова з Мері» stands on one line. Desk: the words, the
   link and the step's line at the left from the top of the print.
   f2 (P6): the ground is lifted to L .86 (day #BFD5E1 › corner #B8D0DE, OKLCH .860 / .029 / 232; ΔE ×100 to the paper of #you 13.8, to the kraft
   of #album 9.0, to Listening 8.6, Steps 8.8, Pronunciation 8.1; contrast day / corner: ink 9.2 / 8.7, ink-2 6.2 / 5.9,
   muted 5.5 / 5.2, link 5.5 / 5.2, world ink 5.9 / 5.6; the evening is unchanged). The step's line under «Пройти урок 1»
   is one voice at every width: the label «ПРОЯВКА · 5 ХВ» and Literata italic. On a desk the heading breaks after its
   dash («Один урок -» / «один кадр»), so the words keep 56 px and more from the print. */

/* ---------- the ground «сизий туман»: day, evening by preference, evening forced (COLOR.md method) ---------- */
.kd-b3[data-world="kadr-board"] { --world: #BFD5E1; --world-deep: #B8D0DE;
  --muted: #46504A; --link: #2E4F78; --accent-text: #2E4F78; --world-ink: #155250; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kd-b3[data-world="kadr-board"] { --world: #0E1C23; --world-deep: #12232D;
  --muted: var(--kd-muted); --link: var(--kd-link); --accent-text: var(--kd-link); --world-ink: var(--kd-world-ink); } }
:root[data-theme="dark"] .kd-b3[data-world="kadr-board"] { --world: #0E1C23; --world-deep: #12232D;
  --muted: var(--kd-muted); --link: var(--kd-link); --accent-text: var(--kd-link); --world-ink: var(--kd-world-ink); }
/* the board's fibre: the paper tile, the way the kraft band carries it */
.kd-b3.kd-band { background: var(--tex-paper) 0 0 / 260px, var(--grad-world); }

/* sizes: the print's width, one share of time, the small print on a tag */
.kd-b3 { --b3-pw: min(232px, calc((100vw - 2 * var(--gutter)) * .47)); --b3-gap: 4px; --b3-sign: #185B59; }
.kd-b3-head .kd-lead { margin-top: 10px; }

/* ---------- the scene: the print, the link and the step's line in one column, the tags on their string at the right ---------- */
.kd-b3-scene { display: grid; grid-template-columns: var(--b3-pw) minmax(0, 1fr); grid-template-rows: auto auto 1fr;
  grid-template-areas: "print tags" "nows tags" "act tags"; column-gap: var(--b3-gap); align-items: start; margin-top: 24px; }
.kd-b3-print { --pw: var(--b3-pw); grid-area: print; z-index: 3; rotate: -1.2deg; }
.kd-b3[data-js] .kd-b3-print { cursor: pointer; touch-action: pan-y; }

/* the window: the photo, its darks (a grey print of the same file) and the warm milk of the latent image with the reagent's
   edge at the lower margin (the chemistry of #first); the steps clear them */
.kd-b3-print .kd-print-win img { transform: scale(1.1); transform-origin: 50% 62%; object-position: 50% 62%; }
.kd-b3-shade { z-index: 1; filter: grayscale(1) sepia(.35) contrast(1.35) brightness(1.04) blur(.6px); opacity: 0; }
.kd-b3-milk { position: absolute; inset: 0; z-index: 2; opacity: 0;
  background: linear-gradient(to top, rgb(150 102 50 / 30%), transparent 16%), radial-gradient(95% 90% at 42% 30%, #F9EFDD, #EBD8B9); }
.kd-b3-gl { position: absolute; inset: 0; z-index: 3; display: block; width: 100%; height: 100%; pointer-events: none; opacity: 0; }
.kd-b3-scene[data-step="0"] .kd-b3-shade { opacity: 1; } .kd-b3-scene[data-step="0"] .kd-b3-milk { opacity: .8; }
.kd-b3-scene[data-step="1"] .kd-b3-shade { opacity: 1; } .kd-b3-scene[data-step="1"] .kd-b3-milk { opacity: .4; }
.kd-b3-scene[data-step="2"] .kd-b3-shade { opacity: .5; } .kd-b3-scene[data-step="2"] .kd-b3-milk { opacity: .1; }

/* the foot: the lesson's sentence is written when the frame is developed; at every other step a slip lies on it */
.kd-b3-scene:not([data-step="3"]) .kd-print-foot, .kd-b3-scene[data-dev] .kd-print-foot { opacity: 0; }
.kd-b3-scene:not([data-step="3"]) .kd-b3-line .kd-mk::after, .kd-b3-scene[data-dev] .kd-b3-line .kd-mk::after { scale: 0 1; }
/* «Урок 1 · приклад» under the line, clear of the marker */
.kd-b3-print .kd-print-cap { margin-top: 6px; }
/* a narrow print (a phone, the tags at ~52 %): the line takes two lines and the cap stands down, nothing crosses the frame */
@container (max-width: 180px) {
  .kd-b3-print .kd-b3-line { white-space: normal; }
  .kd-b3-print .kd-print-cap { display: none; }
}

/* ---------- the slips: paper on the print under a clip, sized by the print (the slips layer is their container) ---------- */
.kd-b3-slips { position: absolute; inset: 0; z-index: 7; pointer-events: none; container-type: inline-size; }
.kd-b3-slip { position: absolute; left: 5%; bottom: 4%; width: 88%; display: grid; pointer-events: auto; }
.kd-b3-slip:not([data-on]) { opacity: 0; visibility: hidden; }
.kd-b3-p4 { width: 0; height: 0; }
/* a sheet of the lesson: the print's paper, the lamp's shadow, a clip at its top edge into the print */
:is(.kd-b3-p1, .kd-b3-p2, .kd-b3-turn, .kd-b3-card) { border-radius: 2px; background: var(--print) var(--tex-paper); background-size: 160px;
  color: var(--print-ink); box-shadow: var(--print-rim), .5px 1px 1px rgb(var(--cast-rgb) / 14%), 2px 4px 8px rgb(var(--cast-rgb) / 14%), 6px 12px 22px rgb(var(--cast-rgb) / 10%); }
:is(.kd-b3-p1, .kd-b3-p2, .kd-b3-turn--mary)::before { content: ""; position: absolute; left: 12%; top: -7.5cqi; z-index: 2; width: 5.6cqi; height: 15.4cqi; min-width: 11px; min-height: 30px;
  background: linear-gradient(90deg, #7E868C, #E6E9EB 38%, #A5ACB1 62%, #6F777D); rotate: -6deg; pointer-events: none;
  filter: drop-shadow(.5px 1px .5px rgb(var(--cast-rgb) / 35%));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 44' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M11 14V34a3 3 0 0 1-6 0V8a4.5 4.5 0 0 1 9 0V36a6 6 0 0 1-12 0V12'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 44' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M11 14V34a3 3 0 0 1-6 0V8a4.5 4.5 0 0 1 9 0V36a6 6 0 0 1-12 0V12'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.kd-b3-who { color: var(--print-muted); font: 600 clamp(13px, 5.6cqi, 17px)/1.25 var(--font-body); }

/* 1 Підготовка: the rule, the answer in the learner's hand, the stamp «Перевірено» pressed unevenly in graphite */
.kd-b3-p1 { gap: 2cqi; padding: 6cqi 6cqi 15cqi; rotate: 2.2deg; }
.kd-b3-rule-t { font: 700 clamp(13px, 6.2cqi, 19px)/1.3 var(--font-body); }
.kd-b3-rule-t i { font-style: normal; }
.kd-b3-rule-x { color: var(--print-muted); font: 500 clamp(13px, 5.9cqi, 18px)/1.3 var(--font-body); }
.kd-b3-gap { margin-top: 1.4cqi; font: 600 clamp(13px, 6cqi, 20px)/1.4 var(--font-body); white-space: nowrap; }
.kd-b3-fill { display: inline-block; min-width: 2.2em; padding: 0 .2em; border-bottom: 1.5px solid var(--print-muted); color: var(--hand); text-align: center;
  font-family: var(--font-hand); font-variation-settings: var(--hand-axes); font-weight: 400; font-size: 1.12em; line-height: 1.1; }
.kd-b3-stamp { position: absolute; right: 2.4cqi; bottom: 2.4cqi; display: inline-flex; align-items: center; gap: 1.2cqi; padding: 1.2cqi 2.6cqi 1.2cqi 2cqi;
  border: 2px solid currentColor; border-radius: 6px; box-shadow: inset 0 0 0 2px var(--print), inset 0 0 0 3.5px currentColor; color: #575049;
  font: 800 clamp(13px, 5cqi, 15px)/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; rotate: -9deg; opacity: .86;
  mix-blend-mode: multiply;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='48'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3.2 2.45'/%3E%3C/filter%3E%3Crect width='160' height='48' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='48'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3.2 2.45'/%3E%3C/filter%3E%3Crect width='160' height='48' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 100% 100%; }
.kd-b3-stamp svg { flex: none; width: 1.15em; height: 1.15em; }

/* 2 Репетиція: the phrase, Mary's wave, then yours: you say it after her */
.kd-b3-p2 { gap: 3cqi; padding: 7cqi 6cqi 6cqi; rotate: -1.6deg; }
.kd-b3-phrase { margin-bottom: 1cqi; font: 700 clamp(13px, 6.8cqi, 20px)/1.3 var(--font-body); }
.kd-b3-take { display: grid; grid-template-columns: 3.1em minmax(0, 1fr); align-items: center; gap: 2.4cqi; padding: 2cqi 3cqi; border-radius: 2px;
  background: color-mix(in srgb, var(--milk-light) 70%, var(--print)); box-shadow: inset 0 0 0 1px rgb(var(--cast-rgb) / 8%); font-size: clamp(13px, 5.6cqi, 17px); }
.kd-b3-wave { display: block; width: 100%; height: 9cqi; fill: var(--print-ink); transform-origin: 0 50%; }
.kd-b3-take--mary .kd-b3-wave { opacity: .78; }
.kd-b3-take--you .kd-b3-wave { fill: var(--hand); }

/* 3 Розмова: Mary's line (her italic) and your answer (your hand), two slips of their own */
.kd-b3-p3 { gap: 3cqi; }
.kd-b3-turn { position: relative; display: grid; gap: 1cqi; padding: 3.6cqi 4.6cqi 4cqi; }
.kd-b3-turn--mary { justify-self: start; max-width: 90%; rotate: -1.6deg; }
.kd-b3-turn--you { justify-self: end; max-width: 78%; rotate: 1.6deg; }
.kd-b3-turn--mary .kd-b3-said { color: var(--print-ink); font: italic 500 clamp(14px, 7cqi, 21px)/1.3 var(--font-display); word-spacing: .08em; }
.kd-b3-turn--you .kd-b3-said { color: var(--hand); font-family: var(--font-hand); font-variation-settings: var(--hand-axes); font-weight: 400;
  font-size: clamp(14px, 7.4cqi, 22px); line-height: 1.25; }

/* 5 Повторення: the cards that come back; a tap turns the top one to the next phrase */
.kd-b3-p5 { place-items: end center; }
.kd-b3-card { position: relative; grid-area: 1 / 1; display: grid; align-content: space-between; gap: 3cqi; width: 84%; min-height: 32cqi; padding: 5cqi 5.6cqi 4.4cqi;
  color: var(--hand); font-family: var(--font-hand); font-variation-settings: var(--hand-axes); font-weight: 400; font-size: clamp(14px, 7.4cqi, 22px); line-height: 1.25;
  -webkit-user-select: none; user-select: none; }
.kd-b3-card--3 { translate: -3cqi -8cqi; rotate: -6deg; }
.kd-b3-card--2 { translate: 4cqi -4cqi; rotate: 4.5deg; }
.kd-b3-card--1 { rotate: -1.5deg; }
.kd-b3[data-js] .kd-b3-card--1 { cursor: pointer; }
.kd-b3-card-c { display: flex; justify-content: space-between; gap: 8px; color: var(--print-muted); font: 600 clamp(13px, 5cqi, 15px)/1.25 var(--font-body); }
.kd-b3-card-n { font-variant-numeric: tabular-nums; }

/* ---------- the tags: paper luggage tags hung from one string, each by a short tail through its brass eyelet; the chosen
   tag's tail is pulled taut ---------- */
.kd-b3-tags { --cx: 4px; --tp: 10px; --ex: 13px; grid-area: tags; position: relative; isolation: isolate; min-width: 0; display: grid; grid-auto-rows: 1fr; gap: 8px;
  margin: 0; padding: 4px 0 14px var(--tp); list-style: none; }
/* the one string at the tags' left: it runs from above the first tag and ends in a knot under the last */
.kd-b3-tags::before { content: ""; position: absolute; left: calc(var(--cx) - 1px); top: -14px; bottom: 2px; z-index: 0; width: 2px; border-radius: 1px;
  background: linear-gradient(90deg, #7A5C38, #A8885C 55%, #7A5C38); }
.kd-b3-tags::after { content: ""; position: absolute; left: calc(var(--cx) - 3.5px); bottom: -2px; z-index: 0; width: 7px; height: 6px; border-radius: 45% 55% 50% 50%;
  background: #8A6A44; }
/* a tag: the step's sign, its name, her action in two words and the minutes, centred on the eyelet; every tag is as tall
   as the tallest one (the list's rows are 1fr) */
.kd-b3-tag { --tr: 0deg; --sw: 0deg; position: relative; z-index: 1; isolation: isolate; display: grid; grid-template-columns: 28px minmax(0, 1fr);
  grid-template-areas: "s n" "s d" "s m"; align-content: center; align-items: center; gap: 0 6px;
  min-height: 44px; padding: 7px 6px 7px 23px;
  color: var(--paper-ink-2); rotate: calc(var(--tr) + var(--sw)); transform-origin: var(--ex) 50%; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  filter: drop-shadow(.5px 1px 1px rgb(var(--cast-rgb) / 16%)) drop-shadow(1.5px 3px 4px rgb(var(--cast-rgb) / 12%)); }
.kd-b3-tag:nth-child(1) { --tr: -1.4deg; } .kd-b3-tag:nth-child(2) { --tr: 1deg; } .kd-b3-tag:nth-child(3) { --tr: -.6deg; }
.kd-b3-tag:nth-child(4) { --tr: 1.2deg; } .kd-b3-tag:nth-child(5) { --tr: -.9deg; }
/* the tag's card: cut corners at the eyelet's end, a punched hole the string shows through */
.kd-b3-tag::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 0 7px 7px 0; background: var(--sheet-paper) var(--tex-paper);
  background-size: 160px; box-shadow: var(--print-rim); clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  -webkit-mask: radial-gradient(circle at var(--ex) 50%, transparent 3.9px, #000 4.4px); mask: radial-gradient(circle at var(--ex) 50%, transparent 3.9px, #000 4.4px); }
/* the eyelet: a brass ring around the hole */
.kd-b3-eye { position: absolute; left: calc(var(--ex) - 6.5px); top: 50%; width: 13px; height: 13px; margin-top: -6.5px; border-radius: 50%;
  background: radial-gradient(circle, transparent 3.9px, #7D6A48 4.3px, #E6D6AE 5.1px, #C2A672 5.8px, #8C7650 6.5px); }
/* the tail from the eyelet to the string sags a little; the chosen tag's tail is pulled taut */
.kd-b3-eye::before, .kd-b3-eye::after { content: ""; position: absolute; top: 50%; right: 6.5px; z-index: -1; background: #8A6A44; pointer-events: none; }
.kd-b3-eye::before { width: calc(var(--ex) + var(--tp) - var(--cx) + 1px); height: 7px; margin-top: -1.5px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 7' preserveAspectRatio='none' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M23.2 1.4C15.5 6.2 8 6.2.8 1.2'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 7' preserveAspectRatio='none' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M23.2 1.4C15.5 6.2 8 6.2.8 1.2'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.kd-b3-eye::after { width: calc(var(--ex) + var(--tp) - var(--cx) + 1px); height: 2px; margin-top: -1px; border-radius: 1px; opacity: 0;
  background: linear-gradient(90deg, #8A6A44, #A8885C 50%, #8A6A44); }
.kd-b3-tag[data-on] .kd-b3-eye::before { opacity: 0; }
.kd-b3-tag[data-on] .kd-b3-eye::after { opacity: 1; }
.kd-b3-tag b { grid-area: n; font: 700 13px/16px var(--font-body); letter-spacing: -.01em; white-space: nowrap; }
.kd-b3-do { grid-area: d; color: var(--paper-ink-2); font: 500 13px/16px var(--font-body); }
.kd-b3-min { grid-area: m; color: var(--paper-muted); font: 600 13px/16px var(--font-body); }
/* the step's sign: one pen, the world's ink on the tag's paper (the same dark teal by day and under the lamp) */
.kd-b3-sign { grid-area: s; display: block; width: 28px; height: 28px; overflow: visible; fill: none; stroke: var(--b3-sign); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; rotate: -4deg; }
.kd-b3-tag:not([data-on]) .kd-b3-sign { opacity: .82; }
.kd-b3-tag[data-on] { z-index: 2; color: var(--paper-ink); --tr: 0deg; translate: -2px 0;
  filter: drop-shadow(1px 2px 2px rgb(var(--cast-rgb) / 18%)) drop-shadow(4px 8px 12px rgb(var(--cast-rgb) / 20%)); }
.kd-b3-tag[data-on]::before { background: var(--print) var(--tex-paper); background-size: 160px; }
.kd-b3[data-js] .kd-b3-tag { cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .kd-b3[data-js] .kd-b3-tag:not([data-on]):hover { color: var(--paper-ink); } }

/* the bead that runs down the string once, the tags' invitation (js/b3.js) */
.kd-b3-bead { position: absolute; left: calc(var(--cx) - 4px); top: -10px; z-index: 3; width: 8px; height: 10px; border-radius: 45%; opacity: 0; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, #F4E6C2, #B89A62 55%, #6E5B3C); box-shadow: 0 1px 2px rgb(var(--cast-rgb) / 40%); }

/* ---------- the way into lesson 1 right under the print, and the step's line under it ---------- */
.kd-b3-act { grid-area: act; position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 12px; }
.kd-b3-act .lk-link { line-height: 1.3; }
@media (max-width: 599px) { .kd-b3-act .lk-link { font-size: 16px; letter-spacing: -.01em; } }
.kd-b3-nows { grid-area: nows; display: grid; margin-top: 16px; }
@media (max-width: 599px) { .kd-b3-now span { font-size: 16px; line-height: 22px; } .kd-b3-act { margin-top: 6px; } }
.kd-b3-now { grid-area: 1 / 1; max-width: 44ch; margin: 0; text-wrap: pretty; }
/* the chosen step under the link, one voice at every width: its name and minutes as a label, then what happens in it in
   the voice of the page's words (Literata italic) */
.kd-b3-now b { display: block; margin-bottom: 6px; color: var(--world-ink); font: 700 13px/17px var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
.kd-b3-now span { display: block; color: var(--ink); font: italic 400 17px/24px var(--font-display); letter-spacing: -.005em; text-wrap: pretty; }
.kd-b3-now:not([data-on]) { opacity: 0; visibility: hidden; }

@media (prefers-reduced-motion: no-preference) {
  /* a tag answers at once; the window develops (or goes back) over 600 ms; the slip changes */
  .kd-mo .kd-b3[data-js] .kd-b3-tag { transition: scale var(--dur-press) ease-out, translate var(--dur-ui) var(--ease-standard); }
  .kd-mo .kd-b3[data-js] .kd-b3-tag:active { scale: .98; }
  .kd-mo .kd-b3[data-js] .kd-b3-sign path { stroke-dasharray: 1 1.2; }
  .kd-mo .kd-b3[data-js] :is(.kd-b3-shade, .kd-b3-milk) { transition: opacity 600ms var(--kd-dev); }
  .kd-mo .kd-b3[data-js] .kd-b3-scene[data-dev] :is(.kd-b3-shade, .kd-b3-milk) { transition: none; }
  .kd-mo .kd-b3[data-js] .kd-b3-slip { transition: opacity 240ms var(--ease-standard), transform 280ms var(--kd-dev), visibility 0s; }
  .kd-mo .kd-b3[data-js] .kd-b3-slip:not([data-on]) { transform: translate(-6px, 14px) rotate(-2deg); }
  .kd-mo .kd-b3[data-js] .kd-b3-slip[data-off] { transform: translate(10px, -6px) rotate(2deg); transition: opacity 160ms var(--ease-standard), transform 200ms var(--ease-standard), visibility 0s linear 200ms; }
  /* a View Transition carries the slip when the browser has one (js/b3.js): the old slip slides down off the print in
     160 ms, the new one is laid on it from the tags' side (8 px, -12 px, -3°) and settles in 280 ms; the CSS changes
     stand down meanwhile. «Проявка» never rides it: its frame develops. */
  .lk-vt .kd-b3 .kd-b3-slip { transition: none; }
  .lk-vt::view-transition-group(kd-b3-slip) { animation-duration: 280ms; animation-timing-function: cubic-bezier(.2, .7, .3, 1); animation-timing-function: linear(0, .72 60%, 1.015 88%, 1); }
  .lk-vt::view-transition-old(kd-b3-slip) { animation: kd-b3-vt-out 160ms cubic-bezier(.4, 0, 1, 1) both; }
  .lk-vt::view-transition-new(kd-b3-slip) { animation: kd-b3-vt-in 280ms cubic-bezier(.2, .7, .3, 1) both; animation-timing-function: linear(0, .72 60%, 1.015 88%, 1); }
  .kd-mo .kd-b3[data-js] .kd-b3-now { transition: opacity 240ms var(--ease-standard), transform 240ms var(--ease-standard), visibility 0s; }
  .kd-mo .kd-b3[data-js] .kd-b3-now:not([data-on]) { transform: translateY(6px); transition: opacity 160ms var(--ease-standard), transform 160ms var(--ease-standard), visibility 0s linear 160ms; }
  .kd-mo .kd-b3[data-js] .kd-print-foot { transition: opacity var(--dur-ui) var(--ease-standard); }
  .kd-mo .kd-b3[data-js] .kd-b3-eye::before, .kd-mo .kd-b3[data-js] .kd-b3-eye::after { transition: opacity var(--dur-ui) var(--ease-standard) 80ms; }
  /* each object plays once when its step opens (and the frame's marker when the block wakes or the frame has developed) */
  .kd-mo .kd-b3[data-awake] .kd-b3-p1[data-on] .kd-b3-stamp { animation: kd-b3-stamp 420ms var(--ease-standard) 380ms both; }
  .kd-mo .kd-b3[data-awake] .kd-b3-p2[data-on] .kd-b3-take--mary .kd-b3-wave { animation: kd-b3-grow 620ms var(--kd-dev) 160ms both; }
  .kd-mo .kd-b3[data-awake] .kd-b3-p2[data-on] .kd-b3-take--you { animation: kd-b3-in 260ms var(--ease-standard) 1000ms both; }
  .kd-mo .kd-b3[data-awake] .kd-b3-p2[data-on] .kd-b3-take--you .kd-b3-wave { animation: kd-b3-grow 620ms var(--kd-dev) 1160ms both; }
  .kd-mo .kd-b3[data-awake] .kd-b3-p3[data-on] .kd-b3-turn--you { animation: kd-b3-in 260ms var(--ease-standard) 700ms both; }
  .kd-mo .kd-b3[data-js]:not([data-awake]) .kd-b3-line .kd-mk::after { scale: 0 1; }
  .kd-mo .kd-b3[data-awake] .kd-b3-scene[data-step="3"]:not([data-dev]) .kd-b3-line .kd-mk::after { animation: kd-b3-mark var(--dur-reveal) var(--kd-dev) 620ms both; }
  .kd-mo .kd-b3[data-awake] .kd-b3-scene[data-step="3"][data-fresh] .kd-b3-line .kd-mk::after { animation-delay: 160ms; }
  .kd-mo .kd-b3[data-awake] .kd-b3-p5[data-on] .kd-b3-card--3 { animation: kd-b3-fan 420ms var(--ease-standard) 80ms both; }
  .kd-mo .kd-b3[data-awake] .kd-b3-p5[data-on] .kd-b3-card--2 { animation: kd-b3-fan 420ms var(--ease-standard) 40ms both; }
}
@keyframes kd-b3-stamp { 0% { opacity: 0; scale: 1.5; } 70% { opacity: .86; scale: .97; } 100% { opacity: .86; scale: 1; } }
@keyframes kd-b3-grow { from { scale: 0 1; } }
@keyframes kd-b3-in { from { opacity: 0; translate: 0 6px; } }
@keyframes kd-b3-mark { from { scale: 0 1; } }
@keyframes kd-b3-fan { from { translate: 0 0; rotate: -1.5deg; } }
@keyframes kd-b3-vt-out { to { opacity: 0; transform: translateY(18px) scale(.98); } }
@keyframes kd-b3-vt-in { from { opacity: 0; transform: translate(8px, -12px) rotate(-3deg); } }

@media (min-width: 600px) and (max-width: 1023px) {
  .kd-b3 { --b3-pw: 330px; --b3-gap: 14px; }
  .kd-b3-scene { grid-template-columns: var(--b3-pw) minmax(0, 270px); }
  .kd-b3-tags { --cx: 5px; --tp: 12px; --ex: 17px; gap: 12px; padding-top: 10px; }
  .kd-b3-tag { grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; padding: 8px 10px 8px 33px; }
  .kd-b3-sign { width: 30px; height: 30px; }
  .kd-b3-tag b { font-size: 15px; line-height: 20px; }
  .kd-b3-do, .kd-b3-min { font-size: 14px; line-height: 18px; }
  .kd-b3-now span { font-size: 19px; line-height: 27px; }
  .kd-b3-act { margin-top: 16px; }
}
/* desk: the words and the link at the left, centred on the print; the print with the step's line as its caption; the tags at the right */
@media (min-width: 1024px) {
  .kd-b3 { --b3-pw: clamp(340px, 28.5vw, 410px); --b3-tw: clamp(240px, 19vw, 266px); --b3-gap: 26px; }
  .kd-b3-grid { display: grid; grid-template-columns: minmax(0, 1fr) var(--b3-pw) var(--b3-tw); column-gap: var(--b3-gap);
    grid-template-rows: minmax(0, 1fr) auto auto auto minmax(0, 1fr);
    grid-template-areas: ". print tags" "head print tags" "nows print tags" "act print tags" ". print tags"; }
  .kd-b3-scene { display: contents; }
  .kd-b3-head { grid-area: head; align-self: start; padding: 18px clamp(24px, 3.4vw, 52px) 0 0; }
  .kd-b3-print { grid-row: 1 / -1; align-self: start; margin-block: 12px; rotate: -1.6deg; }
  .kd-b3-slip { left: -9%; bottom: 9%; width: 72%; }
  .kd-b3-p5 { left: -7%; width: 74%; }
  .kd-b3-tags { --cx: 5px; --tp: 14px; --ex: 21px; grid-row: 1 / -1; align-self: center; gap: 14px; padding-top: 22px; }
  .kd-b3-tags::before { top: -22px; }
  .kd-b3-tag { grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; min-height: 60px; padding: 10px 12px 10px 40px; }
  .kd-b3-sign { width: 32px; height: 32px; }
  .kd-b3-tag b { font-size: 17px; line-height: 23px; }
  .kd-b3-do, .kd-b3-min { font-size: 15px; line-height: 20px; }
  .kd-b3-tag::before { clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 calc(100% - 14px), 0 14px); border-radius: 0 10px 10px 0;
    -webkit-mask: radial-gradient(circle at var(--ex) 50%, transparent 4.4px, #000 5px); mask: radial-gradient(circle at var(--ex) 50%, transparent 4.4px, #000 5px); }
  .kd-b3-eye { left: calc(var(--ex) - 8px); width: 16px; height: 16px; margin-top: -8px;
    background: radial-gradient(circle, transparent 4.5px, #6E5B3C 5px, #D9C59A 6.2px, #B79A63 7.2px, #7A6440 8px); }
  .kd-b3-eye::before, .kd-b3-eye::after { right: 8px; }
  .kd-b3-eye::before { height: 9px; margin-top: -2px; }
  .kd-b3-bead { left: calc(var(--cx) - 5px); width: 10px; height: 12px; }
  .kd-b3-act { grid-area: act; margin-top: 14px; padding-right: clamp(24px, 3.4vw, 52px); }
  .kd-b3-nows { grid-area: nows; margin: 26px 0 0; padding-right: clamp(24px, 3.4vw, 52px); }
  /* the chosen step under the link: its name and minutes, then what happens in it in the voice of the page's words */
  .kd-b3-now { max-width: 30ch; }
  .kd-b3-now b { margin-bottom: 8px; line-height: 18px; }
  .kd-b3-now span { font-size: 22px; line-height: 31px; letter-spacing: -.01em; }
  /* the heading in two lines: «Один урок -» / «один кадр» in the world's ink (the text of the H2 does not change) */
  .kd-b3-head .kd-h2 em { display: block; }
}
@media (min-width: 1024px) and (max-width: 1279px) { .kd-b3-tag b { font-size: 16px; } }
/* ---- css/b4.css ---- */
/* Block 4 «Альбом, який ви зберете за 40 уроків» (#album, KL-1017-B, concept F2). The album of the product in teal cloth on
   a linen table: five paper bookmarks, a cassette is two pages of four places (a phone shows one page, a desk the spread).
   A place is a nest the size of its Instax print with a pencil label under it («2 Мій ранок»).
   f1 (PLAN-f1 P1): every nest holds a print. A developed one: an album photo (assets/b4/SOURCES.md, never a photo of another
   block, no crop of l07, l08, l12, l37 in cassettes 1–2) and a sentence on the lesson's theme in the learner's hand with the
   one blue marker. A latent one: the milk of an undeveloped Instax pressed into the frame, the sepia ghost of its scene and
   the lesson's title in pencil; a tap develops it with #first's chemistry (js/b4.js: the shader through ui/gl.js, these CSS
   layers as the fallback), writes «проявиться в уроці N» under it and the lesson's own example over the milk, and the milk
   comes back. Lesson 1 is latent and carries the page's one sentence of lesson 1 (R2). A phone has one navigation: the five
   bookmarks and the swipe. The page turns under the finger on the binding: each face turns by itself, perspective() in its
   own transform with the origin on the spine, so no preserve-3d, no overflow or filter above it (WebKit never flattens it);
   scaleX is the reserve (data-flat). The turn's shadow is two layers: the leaf darkens as it leaves the lamp (.kd-b4-sh)
   and its edge casts a band on the page under it that follows the edge (.kd-b4-cast, transform and opacity; never an
   animated clip-path, R15). Without JS: cassette 1 open, no bookmarks, a latent print opens its sentence.
   Motion only transform and opacity under prefers-reduced-motion: no-preference.
   f2 (PLAN-f2 P1, S1-S8): every developed print is a fragment in the sepia of the #formats contact sheet, and in cassettes 1-2
   none shows a thing seen in #first, #you, #lesson or #finale. Cassette 1 has one latent print (lesson 1, today's); latent
   prints live in cassettes 2-5: milk, the darks of their own scene (or the shadow of the lesson's object) in developer brown
   at a third, grain, the start of their sentence in the hand, «проявиться в уроці N» in pencil under them. The growth is two
   lines with their own labels: above the album on a phone, a strip under the album from 1024. Pages out of sight are
   content-visibility: hidden, a page contains its layout and paint (the first frame after a jump into #album). */
.kd-b4 { --b4-rim: 8px 8px 10px 14px; --b4-tab: 44px; --kd-corner-in: -2px; }
/* the ground: linen (OKLCH .885 / .028 / 93), not the envelope's kraft, which stays for #meri. ΔE to «тканина» before it
   5.4, to the paper after it 11.1, to Занурення 5.7, to Скарб 6.3, to the kraft of #meri 3.5; --muted 4.9 : 1, link 4.8 : 1.
   Evening #342D21 (h 81, no olive corner): the corner is the ground's own darker tone, not a mix with the teal ink. */
.kd-b4[data-world] { --world: #DFD9C5; --world-deep: #DBD4BF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kd-b4[data-world] { --world: #342D21; --world-deep: #31291D; } }
:root[data-theme="dark"] .kd-b4[data-world] { --world: #342D21; --world-deep: #31291D; }
.kd-band.kd-b4 { background: var(--tex-paper) 0 0 / 220px, radial-gradient(120% 90% at 85% 0%, var(--world-deep), var(--world) 62%); }

.kd-b4-in { display: grid; grid-template-areas: "head" "grow" "side" "album" "foot"; }
.kd-b4-head { grid-area: head; max-width: var(--kd-col); }
.kd-b4-head .kd-lead { margin-top: 10px; }
/* the growth: before and after, two lines in the learner's hand, each with its label on its own baseline (S8); the length
   of the second line is the growth */
.kd-b4-grow { grid-area: grow; display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: baseline; gap: 4px 10px; width: 100%;
  max-width: var(--kd-col); margin: 14px 0 0; color: var(--ink); font-family: var(--font-hand); font-variation-settings: var(--hand-axes); font-weight: 400;
  font-size: 15px; line-height: 21px; }
.kd-b4-gn { color: var(--muted); font: 600 13px/21px var(--font-body); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.kd-b4-gt { min-width: 0; text-wrap: pretty; }

/* ---------- the cassette: its name pressed to the album and what it gives ---------- */
.kd-b4-side { grid-area: side; width: 100%; max-width: 440px; margin: 18px auto 0; }
.kd-b4-name { display: grid; justify-items: center; gap: 0; text-align: center; }
.kd-b4-eye { color: var(--muted); font: 700 13px/18px var(--font-body); letter-spacing: .07em; text-transform: uppercase; }
.kd-b4-nm { color: var(--ink); font: 500 22px/28px var(--font-display); letter-spacing: -.02em; text-wrap: balance; }
.kd-b4-line { max-width: 36ch; min-height: 44px; margin: 4px auto 0; color: var(--ink-2); font: 400 15px/22px var(--font-body); text-align: center; text-wrap: balance; }

/* ---------- the album: paper bookmarks over the top edge, the cloth boards with their stitch, the pages ---------- */
.kd-b4-album { grid-area: album; position: relative; width: 100%; max-width: 336px; margin: 10px auto 0; rotate: -.6deg; }
html.js .kd-b4-album { padding-top: var(--b4-tab); }
.kd-b4-tabs { position: absolute; top: 0; right: 10px; z-index: 0; display: flex; gap: 10px; }
.kd-b4-tab { position: relative; display: flex; justify-content: center; width: 44px; height: calc(var(--b4-tab) + 14px); margin: 0; padding: 9px 0 0; border: 0;
  border-radius: 5px 5px 0 0; background: color-mix(in oklab, var(--cloth) 18%, var(--sheet)) var(--tex-paper); background-size: 160px; color: var(--cloth); cursor: pointer;
  font: 500 18px/1 var(--font-display); font-variant-numeric: lining-nums; transform: translateY(6px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 45%), inset 0 -10px 10px -8px rgb(var(--cast-rgb) / 16%), 0 -1px 2px rgb(var(--cast-rgb) / 10%);
  -webkit-tap-highlight-color: transparent; }
.kd-b4-tab:is([aria-pressed="true"], [data-target]) { transform: none; }
.kd-b4-tab[aria-pressed="true"] { background: var(--sheet) var(--tex-paper); background-size: 160px; color: var(--paper-ink); font-weight: 600; }
.kd-b4-tab:focus-visible { outline-offset: 2px; }

.kd-b4-book { position: relative; z-index: 1; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
/* the album's contact shadow on the table */
.kd-b4-book::after { content: ""; position: absolute; left: 9%; right: -3%; bottom: -20px; z-index: -1; height: 42px; pointer-events: none;
  background: radial-gradient(closest-side at 58% 50%, rgb(var(--cast-rgb) / 26%), transparent); }
.kd-b4-book::before { content: ""; position: absolute; top: 4%; bottom: 2%; right: -12px; z-index: -1; width: 26px; pointer-events: none;
  background: radial-gradient(closest-side, rgb(var(--cast-rgb) / 16%), transparent); }
.kd-b4-board { position: absolute; top: 0; bottom: 0; }
.kd-b4-board.l { display: none; }
.kd-b4-book[data-shut] .kd-b4-board.l { opacity: 0; }
.kd-b4-board.r { left: 0; right: 0; border-radius: 8px 14px 14px 8px; }
.kd-b4-board.r::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 12px; border-radius: 8px 0 0 8px; pointer-events: none;
  background: linear-gradient(90deg, rgb(0 0 0 / 28%), rgb(0 0 0 / 0%) 80%, rgb(255 255 255 / 10%)); }
/* the stitch along the cloth's edge (the boards and the cover) */
.kd-b4-board::after, .kd-b4-cover::after { content: ""; position: absolute; inset: 4px; border: 1px dashed rgb(255 253 248 / 24%); border-radius: inherit; pointer-events: none; }
.kd-b4-pages { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); padding: var(--b4-rim); }

/* a page: one size for all ten (the same four places), so a turn never changes the book's height */
.kd-b4-pg, .kd-b4-blank { position: relative; grid-area: 1 / 1; min-width: 0; border-radius: 3px 8px 8px 3px; transform-origin: 0 50%;
  -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.kd-b4-pg { padding: 12px 11px 10px; container-type: inline-size; contain: layout paint; box-shadow: inset 18px 0 20px -16px rgb(var(--cast-rgb) / 28%); }
.kd-b4-pg:not([data-on]), .kd-b4-blank { visibility: hidden; }
/* a page nobody sees (not open, not warm for the next turn, not a face of a turn) skips its style and layout (tech.smooth) */
.kd-b4-pg:not([data-on], [data-warm], [data-face]) { content-visibility: hidden; }
/* the example flies in from the dock: its page lets it pass its edge */
.kd-b4-pg[data-fly] { contain: layout; }
/* the pages a turn would show next lie painted under the open one (js/b4.js warm(): no first-paint frame in the turn) */
.kd-b4-pg[data-on] { z-index: 1; }
.kd-b4-pg[data-warm]:not([data-on]) { visibility: visible; z-index: 0; }
.kd-b4-pg[data-o="r"], .kd-b4-blank[data-o="r"] { transform-origin: 100% 50%; }
@media (max-width: 1023px) { .kd-b4-pg[data-on="desk"] { visibility: hidden; } }
/* the turn's light, two layers: the leaf darkens as it leaves the lamp (.kd-b4-sh, opacity); the turning edge casts a band
   on the page under it that slides with the edge toward the binding (.kd-b4-cast, translate and opacity by the turn's progress) */
.kd-b4-sh { position: absolute; inset: 0; z-index: 7; border-radius: inherit; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgb(var(--cast-rgb) / 38%), rgb(var(--cast-rgb) / 10%) 55%, transparent 92%); }
.kd-b4-pg[data-o="r"] .kd-b4-sh { background: linear-gradient(270deg, rgb(var(--cast-rgb) / 38%), rgb(var(--cast-rgb) / 10%) 55%, transparent 92%); }
.kd-b4-cast { position: absolute; top: 0; bottom: 0; left: 0; z-index: 7; width: 34%; pointer-events: none; opacity: 0; transform-origin: 0 50%;
  background: linear-gradient(90deg, rgb(var(--cast-rgb) / 34%), rgb(var(--cast-rgb) / 12%) 30%, transparent); }
.kd-b4-pg[data-o="r"] .kd-b4-cast { left: auto; right: 0; transform-origin: 100% 50%; background: linear-gradient(270deg, rgb(var(--cast-rgb) / 34%), rgb(var(--cast-rgb) / 12%) 30%, transparent); }

/* the invitation (js/b4.js): the page's lower right corner curls up on the settle curve, its shadow grows under it on the
   page, then both lie down. The fold is paper (no filter on it), the shadow a separate layer: transform and opacity only. */
.kd-b4-curl, .kd-b4-curl-sh { position: absolute; right: 0; bottom: 0; z-index: 6; width: 17%; aspect-ratio: 1; pointer-events: none; opacity: 0; transform-origin: 100% 100%; }
.kd-b4-curl { transform: scale(.2); border-radius: 0 0 8px 0;
  background: linear-gradient(315deg, transparent 50%, color-mix(in oklab, var(--sheet) 76%, rgb(var(--cast-rgb))) 50%, var(--sheet) 70%, color-mix(in oklab, var(--sheet) 90%, #fff) 96%); }
.kd-b4-curl-sh { z-index: 5; width: 26%; transform: scale(.4); background: radial-gradient(70% 70% at 100% 100%, rgb(var(--cast-rgb) / 100%), transparent 72%); }
/* the cover lies over the book until the album wakes (only where the page moves: js/b4.js shows it) */
.kd-b4-cover { position: absolute; inset: 0; z-index: 8; display: grid; place-content: center; justify-items: center; gap: 6px; visibility: hidden;
  border-radius: 8px 14px 14px 8px; transform-origin: 0 50%; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.kd-b4-cover[data-on] { visibility: visible; }
.kd-b4-cover::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 14px; border-radius: 8px 0 0 8px;
  background: linear-gradient(90deg, rgb(0 0 0 / 30%), rgb(0 0 0 / 0%) 80%, rgb(255 255 255 / 12%)); }
.kd-b4-foil { padding-inline: 18px; color: var(--chalk); font: 500 44px/1 var(--font-display); letter-spacing: -.01em; text-align: center; text-wrap: balance; opacity: .92; text-shadow: 0 -1px 0 rgb(0 0 0 / 30%), 0 1px 0 rgb(255 255 255 / 14%); }
.kd-b4-foil-sub { color: var(--chalk); font: 600 13px/16px var(--font-body); letter-spacing: .12em; opacity: .72; }

/* ---------- four places on a page: a nest is the size of its print (Instax Square, --b4-pw by the page's width) ---------- */
.kd-b4-grid { --b4-gap: 14px; --b4-pw: calc((100cqi - var(--b4-gap)) / 2); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px var(--b4-gap); }
.kd-b4-nest { position: relative; display: grid; align-content: start; gap: 6px; min-width: 0; }
.kd-b4-slot { width: var(--b4-pw); height: calc(var(--b4-pw) * 1.194); }
.kd-b4-mount { position: absolute; inset: 0; transform: rotate(var(--tilt, 0deg)); }
.kd-b4 .kd-print { --pw: var(--b4-pw); position: absolute; left: 0; top: 0; }
.kd-b4 .kd-print-win { background: var(--milk); }
.kd-b4 .kd-print-win img { object-position: var(--op, 50% 50%); transform: scale(var(--z, 1.04)); transform-origin: var(--op, 50% 50%); }
/* the learner's sentence under the photo: one or two lines, the blue marker never breaks */
.kd-b4 .kd-print-foot { justify-content: center; padding-bottom: 4px; }
.kd-b4 .kd-print-line { white-space: normal; text-wrap: balance; font-size: clamp(13px, calc(var(--pw) * .088), 16px); line-height: 1.12; letter-spacing: -.025em; }
.kd-b4 .kd-print-line .kd-mk { white-space: nowrap; }
/* black paper corners on the print's own corners, over its border by 8–10 px (K3: the look is styles.css .kd-corner, the
   offset is --kd-corner-in; set here too, so the album holds its prints before and after the shared rule arrives) */
.kd-b4 .kd-corner { --cw: 12px; }
.kd-b4 .kd-corner.tl { left: var(--kd-corner-in); top: var(--kd-corner-in); } .kd-b4 .kd-corner.tr { right: var(--kd-corner-in); top: var(--kd-corner-in); }
.kd-b4 .kd-corner.br { right: var(--kd-corner-in); bottom: var(--kd-corner-in); } .kd-b4 .kd-corner.bl { left: var(--kd-corner-in); bottom: var(--kd-corner-in); }

/* the pencil label under a nest: the lesson's number and name; under a latent print, when it develops (S5) */
.kd-b4-lab { min-width: 0; padding-left: 2px; color: var(--paper-ink-2); font: italic 400 13px/18px var(--font-display); overflow-wrap: anywhere; }
.kd-b4-lab b { margin-right: 4px; color: var(--paper-muted); font: 600 13px/18px var(--font-body); font-style: normal; font-variant-numeric: tabular-nums lining-nums; }
.kd-b4-lt b { margin: 0; }
.kd-b4-chev { color: var(--paper-link); font-style: normal; font-weight: 600; }
.kd-b4-ln { display: none; }
.kd-b4-lt { letter-spacing: -.025em; }
.kd-b4-nest[data-lat] .kd-b4-lab { padding-left: 0; }
.kd-b4-nest[data-ex] .kd-b4-ln { display: inline; }
.kd-b4-nest[data-ex] .kd-b4-lt { display: none; }

/* ---------- a latent print: the milk of an undeveloped Instax pressed into its frame (inner shadow above, light below,
   no grey outline), the darks of its own scene in developer brown at a third (assets/b4/gNN, the product's shadowTone),
   the paper's grain, the start of its sentence in the hand on the foot ---------- */
.kd-b4-lw { background: radial-gradient(95% 90% at 42% 30%, var(--milk-light), var(--milk)); box-shadow: var(--deboss); }
.kd-b4-lw::after { z-index: 4; box-shadow: none; opacity: .16; background: url(/landing/assets/world/grain.svg) 0 0 / 120px; mix-blend-mode: multiply; }
.kd-b4-lw::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to top, rgb(150 102 50 / 18%), transparent 14%); }
.kd-b4-lg { position: absolute; inset: 0; z-index: 1; background: var(--lat) center / cover; opacity: .38; }
.kd-b4-lw canvas { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; }
/* open: the window holds the lesson's sentence, the foot its name */
.kd-b4-title { display: none; color: var(--paper-ink-2); font: italic 400 13px/15px var(--font-display); letter-spacing: -.01em; text-wrap: balance; }
.kd-b4-nest:is([data-open], :has(> .kd-b4-lat[open])) .kd-b4-topic { display: none; }
.kd-b4-nest:is([data-open], :has(> .kd-b4-lat[open])) .kd-b4-title { display: block; }
/* without motion (reduce, no JS) a tap shows the print developed at once, its sentence over it */
.kd-b4-nest:is([data-open], :has(> .kd-b4-lat[open])) .kd-b4-lg { opacity: .7; }
.kd-b4-topic { display: block; color: var(--paper-ink-2); font-family: var(--font-hand); font-variation-settings: var(--hand-axes); font-weight: 400;
  font-size: 13px; line-height: 1.14; letter-spacing: -.02em; opacity: .78; text-wrap: balance; overflow-wrap: break-word; }
.kd-b4-lat { position: absolute; inset: 0; z-index: 2; }
.kd-b4-lat > summary { position: absolute; inset: -4px; display: block; list-style: none; border-radius: 4px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.kd-b4-lat > summary::-webkit-details-marker { display: none; }
.kd-b4-lat > summary:focus-visible { outline-offset: 0; }
/* what you will say in this lesson: written in pencil over the milk of the window */
.kd-b4-ghost { position: absolute; left: calc(var(--b4-pw) * .07); top: calc(var(--b4-pw) * .07); z-index: 1; display: grid; align-content: center;
  width: calc(var(--b4-pw) * .86); height: calc(var(--b4-pw) * .86); margin: 0; padding: 6px 7px; pointer-events: none; color: var(--paper-ink);
  rotate: var(--tilt, 0deg); }
.kd-b4-gs { font-family: var(--font-hand); font-variation-settings: var(--hand-axes); font-weight: 400; font-size: clamp(13px, calc(var(--b4-pw) * .09), 16px);
  line-height: 1.16; text-wrap: pretty; overflow-wrap: break-word;
  text-shadow: 0 0 2px var(--milk-light), 0 0 6px var(--milk-light), 0 0 10px var(--milk-light); }
@media (hover: hover) and (pointer: fine) { .kd-b4-lat > summary:hover { background: rgb(var(--cast-rgb) / 4%); } }

/* the example chosen on the first screen lies in its lesson's nest (js/b4.js); its own sentence is on the foot */
.kd-b4-nest[data-ex] :is(.kd-b4-lat, .kd-b4-chev) { display: none; }
.kd-b4-nest[data-ex] .kd-b4-mount:not(.kd-b4-exm) { visibility: hidden; }
.kd-b4-ex .kd-print-cap { display: none; }

/* ---------- under the album: what the prints are, the ways on ---------- */
.kd-b4-foot { grid-area: foot; display: grid; justify-items: center; gap: 2px; width: 100%; max-width: 440px; margin: 20px auto 0; text-align: center; }
.kd-b4-cap { color: var(--muted); font: 600 13px/18px var(--font-body); }
.kd-b4-links { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 28px; margin-top: 2px; }
.kd-b4-links .lk-link { display: inline-flex; align-items: center; min-height: 44px; }

@media (prefers-reduced-motion: no-preference) {
  .kd-b4-tab { transition: transform var(--dur-ui) var(--ease-standard); }
  /* a tap on a latent print (js/b4.js marks the run): the darks of its scene rise out of the milk and sink back (the CSS
     chemistry, where the shader is not on), then the sentence is written over the milk */
  html.kd-mo .kd-b4-nest:is([data-open], :has(> .kd-b4-lat[open])) .kd-b4-lg { opacity: .38; }
  html.kd-mo .kd-b4-nest[data-run]:not([data-gl]) .kd-b4-lg { animation: kd-b4-dev var(--b4-dev, 1600ms) var(--kd-dev) both; }
  html.kd-mo .kd-b4-nest[data-run] .kd-b4-gs { animation: kd-b4-rise 420ms var(--kd-dev) 900ms both; }
  html.kd-mo .kd-b4-nest[data-run] .kd-b4-title { animation: kd-b4-rise 260ms var(--kd-dev) both; }
  /* a page not yet seen keeps its prints latent (the milk of the window) until it lies open (js/b4.js develops them) */
  html.kd-mo .kd-b4-pg[data-dim] .kd-b4-pr img { opacity: 0; }
  html.kd-mo .kd-b4-pg[data-dim] .kd-b4-pr .kd-mk::after { transform: scaleX(0); }
}
@keyframes kd-b4-rise { from { opacity: 0; transform: translateY(5px); } }
/* the CSS chemistry: the darks of the scene come up out of the milk in developer brown (a third › full) and sink back */
@keyframes kd-b4-dev { 0% { opacity: .38; } 46% { opacity: 1; } 62% { opacity: 1; } 100% { opacity: .38; } }

/* ---------- a phone: one page, one navigation (the bookmarks and the swipe), the block within one screen of 880 px:
   the growth pair takes the lead's place, the cassette's name stands in one line with its promise under it ---------- */
@media (max-width: 767px) {
  .kd-b4-head .kd-lead { display: none; }
  .kd-b4-grow { margin-top: 12px; }
  .kd-b4-side { margin-top: 14px; }
  /* f1 · the cassette's name and its line on the heading's left line, not centred (detail) */
  .kd-b4-name { display: flex; flex-wrap: wrap; justify-content: start; align-items: baseline; column-gap: 10px; text-align: left; }
  .kd-b4-nm { font-size: 21px; line-height: 26px; }
  .kd-b4-line { min-height: 0; margin: 2px 0 0; font-size: 14px; line-height: 20px; text-align: left; }
  .kd-b4-album { max-width: 322px; margin-top: 4px; }
  .kd-b4-foot { margin-top: 14px; }
  /* «проявиться в уроці 12» keeps one line in a 132 px nest: the chevron waits for a wider page (the whole print is the target) */
  .kd-b4-lt .kd-b4-chev { display: none; }
}

/* ---------- a tablet: one page, larger ---------- */
@media (min-width: 768px) {
  .kd-b4-side, .kd-b4-foot { max-width: 480px; }
  .kd-b4-album { max-width: 440px; }
  .kd-b4-nm { font-size: 28px; line-height: 34px; }
  .kd-b4-line { font-size: 17px; line-height: 26px; min-height: 52px; }
  .kd-b4-grow { font-size: 16px; line-height: 22px; }
  .kd-b4-gn { line-height: 22px; }
  .kd-b4 .kd-corner { --cw: 13px; }
}

/* ---------- a desk: the spread (a cassette's eight places) ---------- */
@media (min-width: 1024px) {
  .kd-b4 { --b4-rim: 12px; --b4-tab: 46px; --kd-corner-in: -3px; }
  .kd-b4-album { max-width: 800px; rotate: -.9deg; }
  .kd-b4-side, .kd-b4-foot { max-width: 560px; }
  .kd-b4-board.l { display: block; left: 0; right: 50%; border-radius: 14px 2px 2px 14px; }
  .kd-b4-board.r { left: 50%; border-radius: 2px 14px 14px 2px; }
  .kd-b4-board.l::before { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 10px; background: linear-gradient(270deg, rgb(0 0 0 / 22%), transparent); }
  .kd-b4-board.r::before { width: 10px; border-radius: 0; background: linear-gradient(90deg, rgb(0 0 0 / 22%), transparent); }
  .kd-b4-pages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kd-b4-pg, .kd-b4-blank { grid-area: 1 / 2; }
  .kd-b4-pg[data-cell="l"] { grid-area: 1 / 1; border-radius: 8px 3px 3px 8px; box-shadow: inset -18px 0 20px -16px rgb(var(--cast-rgb) / 28%); }
  .kd-b4-pg[data-cell="r"] { border-radius: 3px 8px 8px 3px; }
  .kd-b4-pg { padding: 16px 16px 12px; }
  .kd-b4-grid { --b4-gap: 18px; row-gap: 14px; }
  .kd-b4 .kd-corner { --cw: 13px; }
  .kd-b4-cover { left: 50%; border-radius: 2px 14px 14px 2px; }
  .kd-b4-cover::before { width: 10px; border-radius: 0; }
  .kd-b4-foil { font-size: 52px; }
  .kd-b4-tabs { right: 26px; }
  /* the growth: a strip in the hand under the album, as wide as the album (art.composition) */
  .kd-b4-in { grid-template-areas: "head" "side" "album" "grow" "foot"; }
  .kd-b4-grow { max-width: 800px; margin: 30px auto 0; padding: 14px 18px 0; border-top: 1px dashed color-mix(in oklab, var(--ink-2) 34%, transparent);
    column-gap: 16px; row-gap: 6px; font-size: 18px; line-height: 24px; rotate: -.4deg; }
  .kd-b4-gn { line-height: 24px; }
}
/* ---------- a wide desk: the words in a column beside the spread, the album one screen high ---------- */
@media (min-width: 1200px) {
  .kd-b4-in { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); grid-template-rows: auto auto 1fr auto;
    grid-template-areas: "head album" "side album" "foot album" ". grow"; column-gap: clamp(36px, 3.4vw, 56px); align-items: start; }
  .kd-b4-head { max-width: none; }
  .kd-b4-grow { justify-self: end; max-width: 900px; margin: 28px 0 0; }
  .kd-b4-side { max-width: none; margin: 32px 0 0; }
  .kd-b4-name { justify-items: start; text-align: left; gap: 4px; }
  /* f1 · a subheading under the H2, not a second H2 (art.composition) */
  .kd-b4-nm { font-size: 24px; line-height: 30px; }
  .kd-b4-line { max-width: 30ch; min-height: 0; margin: 10px 0 0; font-size: 17px; line-height: 26px; text-align: left; text-wrap: pretty; }
  .kd-b4-album { align-self: center; justify-self: end; max-width: 900px; margin: 0; }
  .kd-b4-foot { justify-items: start; max-width: none; margin: 28px 0 0; text-align: left; }
  .kd-b4-links { justify-content: flex-start; }
}
/* ---- css/b5.css ---- */
/* Block 5 «Конверт до випускного» (#envelope, KL-1017-B, concept F4; stage 3 round f2). A kraft envelope of week 1 lies on
   the desk: fibres, a flap with an edge and its own shadow, a poured teal wax seal (an uneven puddle with a gloss, a film
   frame with its perforation pressed into it), an ink stamp. Inside it is lined with the album's cloth.
   A tap on the envelope (or «Зазирнути в конверт ›») turns the flap back over its fold in 3D at every width
   (perspective() in the face's own transform, nothing preserve-3d); a finger on the seal lifts the flap by its tip 1:1
   (js/b5.js). Mary's card stands up out of it: the question, two takes, who will hear it and the way to lesson 1 (the
   block's one link). The room it rises into is a grid row above the envelope (.kd-b5-in::before); js/b5.js scrolls by
   that row in the same frame, so the envelope stays under the finger. At rest one corner of the card peeks 7 px over the
   envelope's edge (it slides out once on entry). A tap on the ink stamp re-stamps the other rhythm. Mary's card is sized by the envelope (the envelope is an inline-size
   container): type, gaps and the card's rise follow its width, so the letter fits the envelope at every width and never
   shows under a closed one.
   The road under it (tablet and desk: in the words' column beside the envelope) is a coil of postage stamps, a stamp a
   week in the envelope's kraft, perforated, 32 px tall, every fifth carrying its week number. The coil always runs the
   whole column: a stamp is flex 1 1 0 up to 28 px with 4 px between, past that the step grows, never a scale. Week 1 is a
   tiny print of lesson 1, the graduation a small sealed envelope at the column's end. Rhythm 3 lays 14 stamps, rhythm 2
   lays 20 (the coil fills up with six more). A finger on the road lifts the week: «Тиждень N · уроки a–b».
   Layout is the same before and after the script (no shift): the closed envelope is the served state wherever scripts run,
   `@media (scripting: none)` lays it open; controls that need the script hold their place, hidden.
   Night: the kraft and the stamps mix with --desk, so they sit ~15 % lower under the lamp; the paper card stays paper. */
.kd-b5 { --b5-kraft: color-mix(in srgb, #BB9256 78%, var(--desk)); --b5-kraft-in: color-mix(in srgb, #906832 78%, var(--desk));
  --b5-pale: color-mix(in srgb, var(--sheet-paper) 84%, var(--desk));
  --b5-ink: color-mix(in srgb, #34250F 80%, rgb(var(--cast-rgb))); --b5-link: #2F5480;
  /* the card: where it sits in the envelope and how far it rises (in envelope widths) */
  --b5-cx: 7%; --b5-ct: 2%; --b5-ch: 96%; --b5-k: .567;
  --b5-fibre: url(/landing/assets/world/grain.svg);
  --b5-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 134 16' preserveAspectRatio='none'%3E%3Cpath d='M0 7.2h2v1.6h-2zM4 6.5h2v3.1h-2zM8 7h2v2.1h-2zM12 6.4h2v3.3h-2zM16 5.5h2v5.1h-2zM20 4.9h2v6.1h-2zM24 6.4h2v3.3h-2zM28 2.8h2v10.4h-2zM32 3.8h2v8.4h-2zM36 4.4h2v7.2h-2zM40 4.9h2v6.2h-2zM44 2.2h2v11.6h-2zM48 2.7h2v10.6h-2zM52 5.8h2v4.5h-2zM56 3.4h2v9.2h-2zM60 4.8h2v6.4h-2zM64 2.3h2v11.3h-2zM68 5.2h2v5.5h-2zM72 3h2v10h-2zM76 3.5h2v9.1h-2zM80 5.2h2v5.6h-2zM84 6h2v4.1h-2zM88 1.4h2v13.2h-2zM92 1.5h2v13.1h-2zM96 5.8h2v4.4h-2zM100 4.4h2v7.1h-2zM104 2.5h2v11.1h-2zM108 5.9h2v4.2h-2zM112 5.3h2v5.5h-2zM116 5.1h2v5.8h-2zM120 5.2h2v5.7h-2zM124 6.6h2v2.9h-2zM128 7.1h2v1.7h-2zM132 6.8h2v2.3h-2z'/%3E%3C/svg%3E");
  /* a postage stamp's perforation: round bites on a ~4 px step along each edge, a whole number of them per edge */
  --b5-bite-t: radial-gradient(circle 1.6px at 50% 0, #0000 1.2px, #000 1.6px) 0 0 / 4px 100% round no-repeat;
  --b5-bite-b: radial-gradient(circle 1.6px at 50% 100%, #0000 1.2px, #000 1.6px) 0 0 / 4px 100% round no-repeat;
  --b5-bite-l: radial-gradient(circle 1.6px at 0 50%, #0000 1.2px, #000 1.6px) 0 0 / 100% 4px no-repeat round;
  --b5-bite-r: radial-gradient(circle 1.6px at 100% 50%, #0000 1.2px, #000 1.6px) 0 0 / 100% 4px no-repeat round;
  /* the card's corner over the envelope's edge at rest: the card turns about its middle so its top right rises 7 px and
     its top left sinks 7 px (its bottom left stays inside the pocket: the card is 96 % of the envelope's height), and its
     top's middle stands on the envelope's top edge: the right corner peeks 7 px (6 px under reduce), the left stays in */
  --b5-lift: 1.3cqi; --b5-half: 43cqi; --b5-peek-h: 7px;
  --b5-peek: translateY(calc(7px - var(--b5-peek-h) - var(--b5-lift))) rotate(-2.6deg); }
@supports (rotate: atan2(1px, 2px)) { .kd-b5 { --b5-peek: translateY(calc(7px - var(--b5-peek-h) - var(--b5-lift))) rotate(calc(-1 * atan2(7px, var(--b5-half)))); } }
@media (prefers-reduced-motion: reduce) { .kd-b5 { --b5-peek-h: 6px; } }

/* ---------- the grid, by areas (js/b5.js places nothing). Phone: the words, the room the card rises into (0 while
   closed), the envelope, «Зазирнути в конверт ›» beside «Уроків на тиждень 2 · 3», the road and its ends, all on the
   column's edges. Tablet and desk below. ---------- */
.kd-b5-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  grid-template-areas: "copy copy" "space space" "stage stage" "cue rhythm" "road road" "ends ends"; }
.kd-b5-obj, .kd-b5-plan { display: contents; }
.kd-b5-copy { grid-area: copy; max-width: var(--kd-col); }
.kd-b5-copy .kd-lead { margin-top: 10px; }
/* the room above the envelope: a share of the envelope's width (padding % of its own grid area, the envelope's column) */
.kd-b5-in::before { content: ""; grid-area: space; align-self: stretch; }
.kd-b5[data-open] .kd-b5-in::before { padding-top: calc(var(--b5-k) * 100%); }
.kd-b5-stage { grid-area: stage; margin-top: 28px; }
.kd-b5-cue { grid-area: cue; justify-self: start; margin-top: 12px; }
.kd-b5-rhythm { grid-area: rhythm; margin: 12px 0 0 12px; }
.kd-b5-road { grid-area: road; }
.kd-b5-ends { grid-area: ends; }
/* a narrow phone: the button gets its own line, the rhythm the next one */
@media (max-width: 379px) {
  .kd-b5-in { grid-template-areas: "copy copy" "space space" "stage stage" "cue cue" "rhythm rhythm" "road road" "ends ends"; }
  .kd-b5-rhythm { margin: 4px 0 0; justify-self: start; justify-content: flex-start; }
  .kd-b5-rhythm .kd-b5-rl { max-width: none; text-align: left; }
}

/* ---------- the envelope: the lined back, the lined inside of the flap, the card, the pocket, the stamp, the flap and its seal ---------- */
.kd-b5-env { position: relative; container-type: inline-size; aspect-ratio: 361 / 234; rotate: -1deg; -webkit-tap-highlight-color: transparent; }
.kd-b5[data-js] .kd-b5-env { cursor: pointer; -webkit-user-select: none; user-select: none; }
.kd-b5-back { position: absolute; inset: 0; border-radius: 4px; background: var(--cloth) var(--tex-cloth); background-size: 96px;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 18%), var(--kd-sh-print); }
.kd-b5-flap { position: absolute; left: 0; right: 0; height: 50%; -webkit-backface-visibility: hidden; backface-visibility: hidden; pointer-events: none; }
.kd-b5-flap > i { position: absolute; inset: 0; background-color: var(--b5-kraft);
  background-image: linear-gradient(180deg, rgb(255 255 255 / 12%), rgb(var(--cast-rgb) / 8%)), radial-gradient(90% 70% at 30% 10%, rgb(255 255 255 / 10%), transparent 70%), var(--tex-paper);
  background-size: auto, auto, 160px; }
.kd-b5-flap > i::after { content: ""; position: absolute; inset: 0; background: var(--b5-fibre) 0 0 / 150px; opacity: .1; mix-blend-mode: multiply; }
/* the closed flap: an edge one sheet thick, then its soft shadow on the pocket */
.kd-b5-flap-out { top: 0; z-index: 5; transform-origin: 50% 0; transform: perspective(700px) rotateX(14deg);
  filter: drop-shadow(0 1px 0 rgb(var(--cast-rgb) / 34%)) drop-shadow(0 5px 6px rgb(var(--cast-rgb) / 16%)); }
.kd-b5-flap-out > i { border-radius: 4px 4px 0 0; clip-path: polygon(0 0, 100% 0, 52% 98%, 48% 98%); }
/* the wax seal on the flap's tip, sized by the envelope. With the script it is a handle: a finger moving up lifts the flap,
   a finger moving down scrolls the page (pan-up where the browser has it, otherwise none: the seal alone, 8 px around it). */
.kd-b5-seal { --s: clamp(34px, 11.6cqi, 62px); position: absolute; left: 50%; top: 98%; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); }
.kd-b5-seal > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.kd-b5[data-js] .kd-b5-stage:not([data-open]) .kd-b5-seal { pointer-events: auto; touch-action: none; cursor: grab; }
@supports (touch-action: pan-up) { .kd-b5[data-js] .kd-b5-stage:not([data-open]) .kd-b5-seal { touch-action: pan-up; } }
.kd-b5[data-js] .kd-b5-seal::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
.kd-b5-stage[data-drag] .kd-b5-seal { cursor: grabbing; }
/* the inside of the flap: kraft with the cloth lining set in from its edges */
.kd-b5-flap-in { bottom: 100%; z-index: 1; transform-origin: 50% 100%; transform: perspective(700px) rotateX(-180deg); }
.kd-b5-flap-in > i { background-color: var(--b5-kraft-in); clip-path: polygon(0 100%, 48% 2%, 52% 2%, 100% 100%); }
.kd-b5-flap-in > i::before { content: ""; position: absolute; inset: 0; background: var(--cloth) var(--tex-cloth); background-size: 96px;
  clip-path: polygon(3.5% 100%, 49% 8%, 51% 8%, 96.5% 100%); box-shadow: inset 0 -8px 10px -6px rgb(0 0 0 / 30%); }
/* Mary's card: everything in it is measured on the envelope (cqi), and it never draws past its own edge */
.kd-b5-card { position: absolute; left: var(--b5-cx); right: var(--b5-cx); top: var(--b5-ct); height: var(--b5-ch); z-index: 2; overflow: clip;
  display: grid; align-content: start; gap: clamp(3px, 1.6cqi - 2px, 10px); margin: 0;
  padding: clamp(8px, 3.4cqi - 3px, 22px) clamp(12px, 3.6cqi, 24px) 4px; }
.kd-b5-q { color: var(--paper-ink); font: italic 500 clamp(15px, 4.4cqi, 24px) / 1.3 var(--font-display); word-spacing: .08em; text-wrap: balance; margin-bottom: 1px; }
.kd-b5-take { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(8px, 2.6cqi, 16px);
  min-height: clamp(22px, 6.6cqi, 40px); padding: 0 clamp(8px, 2.4cqi, 14px); border-radius: 2px;
  box-shadow: var(--paper-deboss); color: var(--paper-ink-2); font: 600 13px/16px var(--font-body); letter-spacing: .06em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.kd-b5-take > span:last-child { color: var(--paper-muted); }
/* the voice of week 1 drawn as a take; the graduation's take is still a dotted line */
.kd-b5-wave { display: block; height: clamp(12px, 3cqi, 18px); background: var(--cloth); -webkit-mask: var(--b5-wave) center / 100% 100% no-repeat; mask: var(--b5-wave) center / 100% 100% no-repeat; }
.kd-b5-take-2 .kd-b5-wave { height: 0; background: none; -webkit-mask: none; mask: none; border-top: 2px dotted var(--paper-control); }
.kd-b5-sealed { color: var(--paper-muted); font: 400 clamp(13px, 2.9cqi, 15px) / 1.4 var(--font-body); text-wrap: pretty; }
/* the way on, inside the open card at every width (the block's only link) */
.kd-b5-go { justify-self: start; min-height: 44px; color: var(--b5-link); font-size: clamp(14px, 3cqi, 16px); line-height: 1.3; text-wrap: balance; }
.kd-b5-pocket { position: absolute; inset: 0; z-index: 3; border-radius: 4px; background-color: var(--b5-kraft);
  background-image: linear-gradient(to top left, transparent calc(50% - 1px), rgb(var(--cast-rgb) / 18%) 50%, rgb(255 255 255 / 10%) calc(50% + 1px), transparent calc(50% + 3px)),
    linear-gradient(to top right, transparent calc(50% - 1px), rgb(var(--cast-rgb) / 18%) 50%, rgb(255 255 255 / 10%) calc(50% + 1px), transparent calc(50% + 3px)),
    radial-gradient(70% 90% at 78% 86%, rgb(255 255 255 / 9%), transparent 70%), radial-gradient(60% 70% at 12% 70%, rgb(var(--cast-rgb) / 6%), transparent 70%), var(--tex-paper);
  background-size: 50% 52%, 50% 52%, auto, auto, 160px; background-position: 0 100%, 100% 100%, 0 0, 0 0, 0 0; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  box-shadow: inset 0 -1px 0 rgb(var(--cast-rgb) / 16%), inset 1px 0 0 rgb(255 255 255 / 10%), inset -1px 0 0 rgb(var(--cast-rgb) / 10%);
  clip-path: polygon(0 0, 50% 40%, 100% 0, 100% 100%, 0 100%); }
.kd-b5-pocket::after { content: ""; position: absolute; inset: 0; background: var(--b5-fibre) 40px 20px / 150px; opacity: .1; mix-blend-mode: multiply; }
/* the ink stamp, sized by the envelope: with the sale closed «Відкриєте на випускному · 14 тижнів · від уроку 1», with it
   open the month. It lands once, and again on a new rhythm, pressing the paper under it for a moment (.kd-b5-press) */
.kd-b5-press { position: absolute; left: 50%; bottom: 2%; z-index: 4; width: 74%; height: 50%; translate: -50% 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(var(--cast-rgb) / 30%), transparent); mix-blend-mode: multiply; opacity: 0; }
.kd-b5-stamp { position: absolute; left: 50%; bottom: max(15px, 5.5%); z-index: 4; display: grid; justify-items: center; gap: 2px; margin: 0;
  padding: clamp(4px, 1.6cqi - 1px, 10px) clamp(10px, 3.4cqi, 20px) clamp(5px, 1.8cqi - 1px, 11px); border: 2px solid currentColor;
  border-radius: 4px; outline: 1px solid currentColor; outline-offset: 2px; color: var(--b5-ink); opacity: .88; mix-blend-mode: multiply; text-align: center; white-space: nowrap;
  transform: translateX(-50%) rotate(-3deg); }
.kd-b5-st1, .kd-b5-st3 { font: 700 13px/16px var(--font-body); letter-spacing: .07em; text-transform: uppercase; }
.kd-b5-st2 { font: 500 clamp(22px, 6.6cqi, 36px) / 1.15 var(--font-display); letter-spacing: -.01em; word-spacing: .08em; font-variant-numeric: lining-nums; }
/* open: the flap turns back over its fold, the lined inside rises behind the card, the card stands out */
.kd-b5-stage[data-open] .kd-b5-flap-out { transform: perspective(700px) rotateX(180deg); }
.kd-b5-stage[data-open] .kd-b5-flap-in { transform: perspective(700px) rotateX(0deg); }
.kd-b5-stage[data-open] .kd-b5-card { transform: translateY(calc(var(--b5-k) * -100cqi)) rotate(1.2deg); }
/* at rest one corner of the card stands 7 px over the envelope's top edge (6 px under reduce); paper only, no words */
.kd-b5[data-peek] .kd-b5-stage:not([data-open]) .kd-b5-card { transform: var(--b5-peek); }
.kd-b5[data-wait] .kd-b5-stamp { opacity: 0; transform: translateX(-50%) rotate(-3deg) scale(1.3); }
/* without a script the envelope lies open (the card is the whole message), and nothing that needs a script shows */
@media (scripting: none) {
  .kd-b5-in::before { padding-top: calc(var(--b5-k) * 100%); }
  .kd-b5-flap-out { transform: perspective(700px) rotateX(180deg); }
  .kd-b5-flap-in { transform: perspective(700px) rotateX(0deg); }
  .kd-b5-card { transform: translateY(calc(var(--b5-k) * -100cqi)) rotate(1.2deg); }
}

/* ---------- the way to open it and the rhythm that moves its stamp ---------- */
.kd-b5-cue { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--link);
  font: 600 15px/1.2 var(--font-body); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.kd-b5-cue:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .22em; }
.kd-b5-cue:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
/* the script shows them; until then they hold their place (no shift when it runs) */
.kd-b5 .kd-b5-cue[hidden] { display: inline-flex; visibility: hidden; }
.kd-b5 .kd-b5-seg[hidden] { display: inline-flex; visibility: hidden; }
.kd-b5-rhythm { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.kd-b5-rl { max-width: 5.4em; color: var(--muted); font: 600 13px/16px var(--font-body); text-align: right; }
.kd-b5-seg > button { min-width: 48px; font-size: 17px; }
/* the chosen segment stands off its track in both themes (by night the kit's raised is the track's own tone) */
.kd-b5 .kd-b5-seg { background: light-dark(var(--cream), #1A1712); box-shadow: inset 0 0 0 1px light-dark(transparent, var(--line)); }
.kd-b5 .kd-b5-seg .lk-seg__pill > i { background: light-dark(var(--raised), #3A342B); }

/* ---------- the road: a coil of stamps, a week each, as long as the course, across the whole column. The 20 cells of
   rhythm 2 are always in the markup, the unused ones out of the coil (display: none): the cells share the column, a stamp
   up to 28 px, and past that the step between them grows (space-between), never the stamp. ---------- */
.kd-b5-road { --cw: min(28px, (100% - (var(--n, 14) - 1) * 4px) / var(--n, 14));
  position: relative; margin-top: 16px; padding: 6px 0; rotate: -1deg; touch-action: pan-y; -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 1px 1px rgb(var(--cast-rgb) / 22%)) drop-shadow(0 3px 5px rgb(var(--cast-rgb) / 10%)); }
.kd-b5[data-js] .kd-b5-road { cursor: pointer; }
.kd-b5-road:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; border-radius: 2px; }
.kd-b5-weeks { position: relative; display: flex; justify-content: space-between; gap: 4px; }
.kd-b5-w { position: relative; flex: 1 1 0; display: grid; place-items: center; min-width: 0; max-width: 28px; height: 32px; container-type: inline-size; }
.kd-b5-w[data-off] { display: none; }
/* the stamp: kraft of the envelope, an engraved frame line, the perforation bitten out of its four edges */
.kd-b5-w > span { position: absolute; inset: 0; border-radius: 1px;
  background: linear-gradient(160deg, rgb(255 255 255 / 16%), transparent 55%), var(--b5-kraft) var(--tex-paper); background-size: auto, 120px;
  box-shadow: inset 0 0 0 3px var(--b5-kraft), inset 0 0 0 3.8px color-mix(in srgb, var(--b5-ink) 34%, transparent);
  -webkit-mask: var(--b5-bite-t), var(--b5-bite-b), var(--b5-bite-l), var(--b5-bite-r); -webkit-mask-composite: source-in;
  mask: var(--b5-bite-t), var(--b5-bite-b), var(--b5-bite-l), var(--b5-bite-r); mask-composite: intersect; }
/* every fifth stamp is a denomination: its week in ink, 13 px; on a stamp narrower than 18 px the number stands under it */
.kd-b5-w[data-no] > span { box-shadow: inset 0 0 0 3px var(--b5-kraft); }
.kd-b5-w > b { position: relative; color: var(--b5-ink); font: 700 13px/1 var(--font-body); letter-spacing: -.03em; font-variant-numeric: tabular-nums lining-nums; }
@container (max-width: 17.9px) {
  .kd-b5-w > b { position: absolute; top: calc(100% + 6px); left: 50%; translate: -50% 0; color: var(--ink-2); letter-spacing: 0; }
  /* a narrow stamp keeps a finer frame line, so it reads as a stamp and not as a rung */
  .kd-b5-w > span { box-shadow: inset 0 0 0 2.4px var(--b5-kraft), inset 0 0 0 3px color-mix(in srgb, var(--b5-ink) 28%, transparent); }
  .kd-b5-w[data-no] > span { box-shadow: inset 0 0 0 2.4px var(--b5-kraft); }
}
.kd-b5-road[data-under] { padding-bottom: 26px; }
/* week 1 is the print, the graduation is the envelope: their cells hold no stamp */
.kd-b5-w:is([data-first], [data-last]) > :is(span, b) { visibility: hidden; }
/* a finger on the road: the week rises, the weeks after it are still blank paper */
.kd-b5-w[data-after] > span { background: var(--b5-pale) var(--tex-paper); background-size: 120px; box-shadow: inset 0 0 0 3.8px color-mix(in srgb, var(--b5-ink) 16%, transparent); }
.kd-b5-w[data-after] > b { opacity: .45; }
.kd-b5-w[data-on] { translate: 0 -3px; }
/* the print of lesson 1 (latent: its sentence develops in the lesson) and the sealed envelope of the graduation, each on
   its end of the coil: the first cell's middle and the last cell's middle (--cw, the stamp's width) */
.kd-b5-mini, .kd-b5-token { position: absolute; top: 22px; z-index: 2; pointer-events: none;
  box-shadow: 0 1px 1px rgb(var(--cast-rgb) / 30%), 0 2px 5px rgb(var(--cast-rgb) / 18%); }
.kd-b5-mini { left: calc(var(--cw) / 2); width: clamp(20px, var(--cw) * 1.12, 30px); aspect-ratio: 1 / 1.194; translate: -50% -50%; rotate: -6deg;
  border-radius: 1px; background: var(--print); }
.kd-b5-mini > i { position: absolute; left: 9%; right: 9%; top: 8%; aspect-ratio: 1;
  background: radial-gradient(60% 50% at 38% 34%, color-mix(in srgb, var(--milk) 60%, var(--print)), transparent 70%), linear-gradient(180deg, var(--milk), color-mix(in srgb, var(--milk) 82%, var(--b5-ink)));
  box-shadow: inset 0 0 0 .5px rgb(0 0 0 / 16%); }
.kd-b5-mini::after { content: ""; position: absolute; left: 18%; right: 26%; bottom: 8%; height: 1.5px; border-radius: 1px; background: var(--hand); opacity: .55; }
.kd-b5-token { left: calc(100% - var(--cw) / 2); width: clamp(24px, var(--cw) * 1.36, 38px); aspect-ratio: 1.47; translate: -50% -50%; border-radius: 1.5px;
  background: radial-gradient(circle at 50% 56%, var(--cloth) 0 10%, #0000 11%), linear-gradient(to bottom right, transparent 49%, rgb(var(--cast-rgb) / 30%) 50%, transparent 56%) 0 0 / 50% 58% no-repeat,
    linear-gradient(to bottom left, transparent 49%, rgb(var(--cast-rgb) / 30%) 50%, transparent 56%) 100% 0 / 50% 58% no-repeat, var(--b5-kraft); }
/* a ring of the cloth around the print and the envelope while the envelope is open (they are its two takes) */
.kd-b5-mini::before, .kd-b5-token::before { content: ""; position: absolute; inset: -4px; border-radius: 3px; box-shadow: 0 0 0 2px var(--cloth); opacity: 0; }
.kd-b5-road[data-pick="0"] .kd-b5-mini, .kd-b5-road[data-pick="last"] .kd-b5-token,
.kd-b5-road[data-lit] :is(.kd-b5-mini, .kd-b5-token) { translate: -50% calc(-50% - 3px); }
.kd-b5-road[data-lit] :is(.kd-b5-mini, .kd-b5-token)::before { opacity: 1; }
/* the way between them: a dashed cloth line just under the coil, from the print to the envelope (never over a number) */
.kd-b5-trail { position: absolute; top: 41px; left: calc(var(--cw) / 2); width: calc(100% - var(--cw)); height: 2px; z-index: 1;
  background: repeating-linear-gradient(90deg, var(--cloth) 0 5px, transparent 5px 8px); transform-origin: 0 50%; opacity: 0; pointer-events: none; }
.kd-b5-road[data-lit] .kd-b5-trail { opacity: 1; }
/* «Тиждень N · уроки a–b» under the week it touches, in place of the two ends */
.kd-b5-tip { position: absolute; top: calc(100% + 8px); left: var(--x, 50%); z-index: 3; translate: -50% 0; padding: 5px 11px; border-radius: 999px; background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--line), var(--kd-sh-sheet); color: var(--ink); font: 600 13px/18px var(--font-body); white-space: nowrap; font-variant-numeric: tabular-nums;
  opacity: 0; transform: translateY(-4px); pointer-events: none; }
.kd-b5-tip::before { content: ""; position: absolute; top: -4px; left: var(--cx, 50%); width: 8px; height: 8px; margin-left: -4px; background: var(--raised);
  box-shadow: -1px -1px 0 var(--line); transform: rotate(45deg); }
.kd-b5-road[data-tip] .kd-b5-tip { opacity: 1; transform: none; }
.kd-b5-road[data-tip] ~ .kd-b5-ends { opacity: 0; }
/* the two ends: week 1 under the print, the graduation at the column's end, under its envelope */
.kd-b5-ends { display: flex; justify-content: space-between; gap: 12px; margin: 8px 0 0; }
.kd-b5-ends > span { display: grid; color: var(--muted); font: 600 13px/18px var(--font-body); }
.kd-b5-ends b { color: var(--ink-2); font-weight: 700; }
.kd-b5-end { text-align: right; }
.kd-b5-end i { display: inline-block; font-style: normal; font-variant-numeric: tabular-nums; }

/* Open: the flap turns back first, then the card stands up out of the envelope into the room above it; the page scrolls by
   that room in the same frame (js/b5.js), so the envelope stays where the finger is and the words above glide up. Close:
   the card goes down, the lining goes down, the flap closes last. A new rhythm re-stamps the ink and lays or lifts six
   stamps one after another (js/b5.js, FLIP of the cells). */
@media (prefers-reduced-motion: no-preference) {
  .kd-b5-flap-out, .kd-b5-flap-in { transition: transform 560ms var(--kd-turn) 280ms; }
  .kd-b5-card { transition: transform 560ms var(--ease-standard); }
  .kd-b5-stage[data-open] .kd-b5-flap-out, .kd-b5-stage[data-open] .kd-b5-flap-in { transition: transform 560ms var(--kd-turn); }
  .kd-b5-stage[data-open] .kd-b5-card { transition: transform 620ms var(--kd-settle) 160ms; }
  .kd-b5[data-peek="in"] .kd-b5-stage:not([data-open]) .kd-b5-card { transition: transform 280ms var(--kd-settle); }
  .kd-b5-stamp { transition: opacity 140ms linear, transform 300ms cubic-bezier(.3, 1.35, .5, 1); }
  .kd-b5-tip { transition: opacity 160ms linear, transform 220ms var(--ease-standard); }
  .kd-b5-ends { transition: opacity 160ms linear; }
  .kd-b5-w { transition: translate 160ms var(--ease-standard); }
  .kd-b5-mini, .kd-b5-token { transition: translate 220ms var(--ease-standard); }
  .kd-b5-mini::before, .kd-b5-token::before, .kd-b5-trail { transition: opacity 220ms linear; }
}
@media (hover: hover) and (pointer: fine) {
  /* the flap gives under the pointer, except over the stamp: the stamp answers with its ink (a click re-stamps the rhythm) */
  .kd-b5[data-js] .kd-b5-stage:not([data-open]):not([data-drag]) .kd-b5-env:hover:not(:has(.kd-b5-stamp:hover)) .kd-b5-flap-out { transform: perspective(700px) rotateX(26deg); }
  .kd-b5[data-js] .kd-b5-stamp:hover { opacity: 1; }
}

/* ---------- tablet (768-1023): the whole wrap. The words above; below them two columns, the envelope | the rhythm, the road,
   its ends and «Зазирнути в конверт ›», that column centred on the envelope by two flexible rows. The room the card rises
   into is the envelope's column only, above it. ---------- */
@media (min-width: 768px) {
  .kd-b5 { --b5-cx: 9%; --b5-ct: 2.5%; --b5-ch: 95%; --b5-k: .534; --b5-lift: 1.52cqi; --b5-half: 41cqi; }
  .kd-b5-env { aspect-ratio: 361 / 220; }
  .kd-b5-rl { max-width: none; }
  .kd-b5-in { grid-template-columns: minmax(0, 1fr) minmax(0, clamp(300px, 44%, 400px)); column-gap: 40px;
    grid-template-rows: auto auto 1fr auto auto auto auto 1fr;
    grid-template-areas: "copy copy" "space ." "stage ." "stage rhythm" "stage road" "stage ends" "stage cue" "stage ."; }
  .kd-b5-copy { margin-bottom: 32px; }
  .kd-b5-stage { margin-top: 0; }
  .kd-b5-rhythm { justify-content: flex-start; justify-self: start; margin: 0; }
  .kd-b5-rl { text-align: left; }
  .kd-b5-road { margin-top: 18px; }
  .kd-b5-cue { margin-top: 14px; font-size: 16px; }
}

/* ---------- a desk: the envelope on the left; on the right, on the page's one right-column x (K5, styles.css .kd-split:
   1fr | --kd-col; x 796 at 1440, the x of #meri's words, css/b7.css), the words, the rhythm, the road, its ends and
   «Зазирнути в конверт ›», centred on the envelope. The words' measure is 480 px (the heading's own width at 1440), and the
   coil ends there too. Opening grows only the first row, above both columns, and the page scrolls by it: nothing moves. */
@media (min-width: 1024px) {
  .kd-b5-in { grid-template-columns: minmax(0, 1fr) minmax(0, var(--kd-col)); column-gap: 72px;
    grid-template-rows: auto 1fr auto auto auto auto auto 1fr;
    grid-template-areas: "space ." "stage ." "stage copy" "stage rhythm" "stage road" "stage ends" "stage cue" "stage ."; }
  .kd-b5-copy { margin-bottom: 0; }
  .kd-b5-copy .kd-lead, .kd-b5-rhythm, .kd-b5-road, .kd-b5-ends { max-width: 480px; }
  .kd-b5-road, .kd-b5-ends { width: 100%; }
  .kd-b5-rhythm { margin-top: clamp(28px, 3vw, 40px); }
  .kd-b5-road { margin-top: 20px; }
}
/* without a script the controls that need it are not there (after the rules that hold their place) */
@media (scripting: none) { .kd-b5 .kd-b5-cue[hidden], .kd-b5 .kd-b5-rhythm { display: none; } }
/* ---- css/b11.css ---- */
/* Block 11 «Три речі, які ви забираєте» (#result), direction C (owner 17.10: «касеты мне не нравятся», «Вариант С лучше»,
   «три вещи как направление. Его развивай»; Маша: «курс-фундамент, база… все по полочкам, начинаем говорить»).
   Round nb1 (judge owner.eye 8: «a row of icons, not a still life; the detail is cut off from its object»):
   - one table: a lamp pool under the group, one light from the top left, every shadow falls to the lower right, the things
     overlap a little and share one scale; the chosen thing lifts (its shadow stays on the table), the two others step back;
   - the three things: a leporello of five paper panels between cloth boards (the grammar A2, one panel a part, three pencil
     lines = its three topics, a teal ribbon on the part the slip shows); a bundle of developed prints tied with jute, a
     sentence by hand on the top one (40 sentences; the closed album stays #album's and #finale's); the brass key with a
     paper tag «Занурення» (the next step). No cassette anywhere (owner);
   - the key is the third radio like the two others: its detail carries the block's one link to Immersion;
   - the detail is a paper slip under the things with a notch that points at the chosen thing (393 and 1440 alike);
     one grid cell holds every detail, so the height never changes.
   Everything in --u = 1/360 of the desk (container units; a vw fallback for old webviews).
   Ground: «крафт» (kadr-kraft, COLOR.md) between the paper of #envelope and the deep cloth of #formats.
   Motion: transform and opacity only, under prefers-reduced-motion: no-preference; nothing moves at rest. */

.kd-b11 {
  --b11-lit: #FBF7EF; --b11-shade: #E7DDCC; --b11-pencil: #81766A; --b11-on: var(--cloth); --b11-print: var(--print);
  --b11-slip: var(--sheet-paper); --b11-jute: #B4935F; --b11-pool: rgb(255 248 234 / 62%); --b11-cast: var(--cast-rgb);
  --b11-dim: 0%; --b11-x: 64; --b11-n: 0;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kd-b11 {
  --b11-lit: #CFC6B6; --b11-shade: #AEA391; --b11-pencil: #5A5144; --b11-print: #DCD4C6; --b11-slip: #D6CDBE; --b11-jute: #9C7F52;
  --b11-pool: rgb(255 190 120 / 13%); --b11-dim: 12%; }
  :root:not([data-theme="light"]) .kd-b11-note { --link: #2E4F78; } }
:root[data-theme="dark"] .kd-b11-note { --link: #2E4F78; }
:root[data-theme="dark"] .kd-b11 {
  --b11-lit: #CFC6B6; --b11-shade: #AEA391; --b11-pencil: #5A5144; --b11-print: #DCD4C6; --b11-slip: #D6CDBE; --b11-jute: #9C7F52;
  --b11-pool: rgb(255 190 120 / 13%); --b11-dim: 12%; }
.kd-b11[data-n="1"] { --b11-n: 1; } .kd-b11[data-n="2"] { --b11-n: 2; } .kd-b11[data-n="3"] { --b11-n: 3; } .kd-b11[data-n="4"] { --b11-n: 4; }
.kd-b11[data-t="album"] { --b11-x: 180; } .kd-b11[data-t="next"] { --b11-x: 298; }
html:not(.js) .kd-b11:has(.kd-b11-rad[value="album"]:checked) { --b11-x: 180; }
html:not(.js) .kd-b11:has(.kd-b11-rad[value="next"]:checked) { --b11-x: 298; }

/* ---------- layout: 393 first (words, the still life with its captions, the slip) ---------- */
.kd-b11-in { display: grid; grid-template-areas: "copy" "desk" "nb"; }
.kd-b11-copy { grid-area: copy; display: grid; gap: 10px; max-width: var(--kd-col); }
.kd-b11-copy .kd-h2, .kd-b11-copy .kd-lead { margin: 0; }
.kd-b11-desk, .kd-b11-nb { width: 100%; max-width: 520px; container-type: inline-size; }
.kd-b11-desk { grid-area: desk; margin-top: 18px; }
.kd-b11-nb { grid-area: nb; }
.kd-b11-price { display: none; }
/* --u: 1/360 of the desk; the vw line is the fallback for a webview without container units */
.kd-b11-row, .kd-b11-note { --u: calc(min(100vw - 32px, 520px) / 360); }
@supports (width: 1cqw) { .kd-b11-row, .kd-b11-note { --u: calc(100cqw / 360); } }
.kd-b11-row { position: relative; isolation: isolate; display: grid; grid-template-columns: 124fr 112fr 124fr; column-gap: 8px;
  padding-top: calc(var(--u) * 190); }
/* the lamp's pool on the table: the three things stand in one light */
.kd-b11-row::before { content: ""; position: absolute; z-index: -1; left: -6%; right: -6%; top: 4%; height: calc(var(--u) * 200); pointer-events: none;
  background: radial-gradient(52% 50% at 48% 62%, var(--b11-pool), transparent 72%); }

/* ---------- a thing: the object on the table and its quiet caption, one target ---------- */
.kd-b11-thing { display: grid; align-content: start; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.kd-b11-cap { display: block; min-height: 44px; padding: 10px 2px 0; color: var(--ink-2); font: 600 14px/19px var(--font-body);
  text-align: center; text-wrap: balance; }
.kd-b11-cap::after { content: ""; display: block; width: 26px; height: 2px; margin: 6px auto 0; border-radius: 2px; background: var(--world-ink); scale: 0 1; }
.kd-b11-rad:checked ~ .kd-b11-cap { color: var(--ink); font-weight: 700; }
.kd-b11-rad:checked ~ .kd-b11-cap::after { scale: 1 1; }
.kd-b11-rad:focus-visible ~ .kd-b11-cap { outline: var(--focus-ring, 3px solid var(--focus)); outline-offset: 2px; border-radius: 6px; }
.kd-b11-obj { position: absolute; display: block; }
.kd-b11-obj svg { display: block; overflow: visible; }
/* the chosen thing lifts; the two others step back a little */
.kd-b11-rad:checked ~ .kd-b11-obj { translate: 0 calc(var(--u) * -7); }
.kd-b11-rad:not(:checked) ~ .kd-b11-obj { opacity: .84; }
@media (hover: hover) {
  .kd-b11-thing:hover .kd-b11-rad:not(:checked) ~ .kd-b11-obj { translate: 0 calc(var(--u) * -3); opacity: 1; }
  .kd-b11-thing:hover .kd-b11-cap { color: var(--ink); }
}

/* shadows on the table: the contact shadow (.kd-b11-sh) and the soft one of a lifted thing (.kd-b11-lift). They stay on
   the table when their thing lifts (the opposite translate). */
.kd-b11-sh, .kd-b11-lift { position: absolute; pointer-events: none; }
.kd-b11-lift { opacity: 0; background: radial-gradient(closest-side, rgb(var(--b11-cast) / 24%), rgb(var(--b11-cast) / 8%) 60%, transparent); }
.kd-b11-rad:checked ~ .kd-b11-obj .kd-b11-lift { opacity: 1; translate: 0 calc(var(--u) * 7); }
.kd-b11-rad:checked ~ .kd-b11-obj .kd-b11-sh { opacity: .5; translate: 0 calc(var(--u) * 7); }

/* ---------- 1 · the leporello: five paper panels standing in a zigzag between two cloth boards ---------- */
.kd-b11-lep { left: calc(var(--u) * 4); top: calc(var(--u) * 40); width: calc(var(--u) * 120); height: calc(var(--u) * 132); }
.kd-b11-lep .kd-b11-sh { left: calc(var(--u) * 2); right: calc(var(--u) * -14); bottom: calc(var(--u) * -9); height: calc(var(--u) * 22);
  background: radial-gradient(closest-side, rgb(var(--b11-cast) / 30%), rgb(var(--b11-cast) / 12%) 55%, transparent); }
.kd-b11-lep .kd-b11-lift { left: calc(var(--u) * 4); right: calc(var(--u) * -22); bottom: calc(var(--u) * -18); height: calc(var(--u) * 30); }
/* a panel, 24 u wide: the even ones rise to the right and catch the lamp, the odd ones fall away into shade */
.kd-b11-pn { position: absolute; top: 0; left: calc(var(--u) * 24 * var(--k)); width: calc(var(--u) * 24 + .5px); height: calc(var(--u) * 124);
  transform-origin: 0 0; transform: skewY(18.43deg);
  background: linear-gradient(90deg, rgb(var(--b11-cast) / 16%), rgb(var(--b11-cast) / 5%) 55%, rgb(var(--b11-cast) / 11%)),
    linear-gradient(rgb(var(--b11-cast) / 4%), rgb(var(--b11-cast) / 12%)), var(--tex-paper) 0 0 / calc(var(--u) * 120), var(--b11-shade);
  box-shadow: inset 1px 0 0 rgb(var(--b11-cast) / 10%), inset 0 1px 0 rgb(255 255 255 / 30%), inset 0 -1px 0 rgb(var(--b11-cast) / 14%); }
.kd-b11-pn:is([data-k="0"], [data-k="2"], [data-k="4"]) { top: calc(var(--u) * 8); transform: skewY(-18.43deg);
  background: linear-gradient(105deg, rgb(255 255 255 / 34%), transparent 46%), linear-gradient(transparent 58%, rgb(var(--b11-cast) / 9%)),
    var(--tex-paper) 0 0 / calc(var(--u) * 120), var(--b11-lit);
  box-shadow: inset 1px 0 0 rgb(255 255 255 / 70%), inset -1.5px 0 0 rgb(var(--b11-cast) / 12%), inset 0 1px 0 rgb(255 255 255 / 60%), inset 0 -1px 0 rgb(var(--b11-cast) / 12%); }
/* f1 · the whole folded book stands on the table: one soft contact shade under its folds */
.kd-b11-lep { filter: drop-shadow(calc(var(--u) * .8) calc(var(--u) * 1.6) calc(var(--u) * 1.2) rgb(var(--b11-cast) / 16%)); }
.kd-b11-pn[data-k="0"] { --k: 0; } .kd-b11-pn[data-k="1"] { --k: 1; } .kd-b11-pn[data-k="2"] { --k: 2; } .kd-b11-pn[data-k="3"] { --k: 3; } .kd-b11-pn[data-k="4"] { --k: 4; }
/* the boards: the album's cloth seen edge-on at both ends */
.kd-b11-pn[data-k="0"]::before, .kd-b11-pn[data-k="4"]::after { content: ""; position: absolute; top: -1px; bottom: -1px; width: calc(var(--u) * 2.6);
  background: linear-gradient(90deg, rgb(255 255 255 / 12%), transparent 60%), var(--tex-cloth) 0 0 / calc(var(--u) * 60), var(--cloth); border-radius: 1px; }
.kd-b11-pn[data-k="0"]::before { left: calc(var(--u) * -2.6); }
.kd-b11-pn[data-k="4"]::after { right: calc(var(--u) * -2.6); }
.kd-b11-pn b { position: absolute; left: 0; right: 0; top: calc(var(--u) * 27); color: var(--b11-pencil);
  font: 500 calc(var(--u) * 16) / 1 var(--font-display); text-align: center; font-variant-numeric: lining-nums; }
/* f1 · one pencil word per panel (the part's first grammar) instead of three grey dashes, read down the panel; on a phone
   only the open part carries it (owner.eye: «вместо чёрточек - одна рукописная строка на страницу») */
.kd-b11-pn i { position: absolute; left: 0; right: 0; top: calc(var(--u) * 52); display: flex; justify-content: center; color: var(--b11-pencil);
  font: 400 max(13px, calc(var(--u) * 12)) / 1 var(--font-hand); font-style: normal; font-variation-settings: var(--hand-axes);
  writing-mode: vertical-rl; white-space: nowrap; opacity: 0; }
.kd-b11[data-n="0"] .kd-b11-pn[data-k="0"] i, .kd-b11[data-n="1"] .kd-b11-pn[data-k="1"] i, .kd-b11[data-n="2"] .kd-b11-pn[data-k="2"] i,
.kd-b11[data-n="3"] .kd-b11-pn[data-k="3"] i, .kd-b11[data-n="4"] .kd-b11-pn[data-k="4"] i { opacity: .9; }
@media (min-width: 600px) { .kd-b11-pn i { opacity: .62; } }
.kd-b11[data-n="0"] .kd-b11-pn[data-k="0"], .kd-b11[data-n="1"] .kd-b11-pn[data-k="1"], .kd-b11[data-n="2"] .kd-b11-pn[data-k="2"],
.kd-b11[data-n="3"] .kd-b11-pn[data-k="3"], .kd-b11[data-n="4"] .kd-b11-pn[data-k="4"] { --b11-pencil: var(--b11-on); }
/* the ribbon: teal satin over the top edge of the part the slip shows */
.kd-b11-rib { position: absolute; left: calc(var(--u) * 9); top: calc(var(--u) * 1.5); width: calc(var(--u) * 6); height: calc(var(--u) * 21);
  background: linear-gradient(90deg, rgb(0 0 0 / 12%), transparent 38%, rgb(255 255 255 / 16%) 55%, rgb(0 0 0 / 10%)), var(--cloth);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%); translate: calc(var(--u) * 24 * var(--b11-n)) 0; }

/* ---------- 2 · the bundle: developed prints tied with jute, a sentence by hand on the top one ---------- */
.kd-b11-stk { left: calc(var(--u) * 120); top: calc(var(--u) * 26); width: calc(var(--u) * 128); height: calc(var(--u) * 152); }
.kd-b11-stk .kd-b11-sh { left: calc(var(--u) * 10); right: calc(var(--u) * -8); bottom: calc(var(--u) * -8); height: calc(var(--u) * 26);
  background: radial-gradient(closest-side, rgb(var(--b11-cast) / 22%), rgb(var(--b11-cast) / 8%) 60%, transparent); }
.kd-b11-stk .kd-b11-lift { left: calc(var(--u) * 6); right: calc(var(--u) * -16); bottom: calc(var(--u) * -18); height: calc(var(--u) * 40); }
.kd-b11-sp, .kd-b11-top { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 6); width: calc(var(--u) * 116); height: calc(var(--u) * 138.5);
  border-radius: calc(var(--u) * 1.5); background: var(--tex-paper) 0 0 / calc(var(--u) * 150), var(--b11-print); }
.kd-b11-sp { box-shadow: var(--print-rim), var(--kd-sh-sheet); }
.kd-b11-sp[data-k="1"] { translate: calc(var(--u) * 5) calc(var(--u) * 2); rotate: 4deg;
  background: linear-gradient(160deg, #8A765C, #4A3C2E 72%) calc(var(--u) * 8) calc(var(--u) * 8) / calc(var(--u) * 100) calc(var(--u) * 100) no-repeat,
    var(--tex-paper) 0 0 / calc(var(--u) * 150), var(--b11-print); }
.kd-b11-sp[data-k="2"] { translate: calc(var(--u) * -2) calc(var(--u) * 6); rotate: -5deg; }
.kd-b11-sp[data-k="3"] { translate: calc(var(--u) * 9) calc(var(--u) * 9); rotate: 9deg; }
.kd-b11-top { rotate: -3deg; box-shadow: var(--print-rim), var(--kd-sh-print); }
.kd-b11-win { position: absolute; left: calc(var(--u) * 8); top: calc(var(--u) * 8); width: calc(var(--u) * 100); height: calc(var(--u) * 100); overflow: hidden;
  border-radius: 1px; background: var(--milk); }
.kd-b11-win img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kd-b11-win::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 16%);
  background: linear-gradient(115deg, transparent 38%, rgb(255 255 255 / 10%) 46%, transparent 58%), rgb(0 0 0 / var(--b11-dim)); }
.kd-b11-hand { position: absolute; left: calc(var(--u) * 8); right: calc(var(--u) * 4); bottom: calc(var(--u) * 3.5); color: var(--hand);
  font: 400 max(13px, calc(var(--u) * 12.6)) / 1.05 var(--font-hand); font-variation-settings: var(--hand-axes); letter-spacing: -.01em; white-space: nowrap; }
/* the jute: across the bundle, a bow where the two turns cross (over the photo, under the words) */
.kd-b11-twine { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 6); width: calc(var(--u) * 116); height: calc(var(--u) * 138.5); rotate: -3deg; }
.kd-b11-tw, .kd-b11-tw-u { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.kd-b11-tw { stroke: var(--b11-jute); stroke-width: 2.1; }
.kd-b11-tw-u { stroke: rgb(var(--b11-cast) / 26%); stroke-width: 2.6; transform: translate(.9px, 1.6px); }
/* chosen: the top print slides out from under the jute */
.kd-b11-rad:checked ~ .kd-b11-stk .kd-b11-top { translate: calc(var(--u) * 5) calc(var(--u) * -12); rotate: 1.5deg; }

/* ---------- 3 · the key: brass, a paper tag on a thread ---------- */
.kd-b11-key { left: calc(var(--u) * 246); top: calc(var(--u) * 8); width: calc(var(--u) * 112); height: calc(var(--u) * 182.5); }
.kd-b11-key svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.kd-b11-ksh { color: rgb(var(--b11-cast) / 30%); translate: calc(var(--u) * 2.4) calc(var(--u) * 4.2); filter: blur(1.4px); }
.kd-b11-key .kd-b11-lift { left: calc(var(--u) * 14); right: calc(var(--u) * -10); top: calc(var(--u) * 40); height: calc(var(--u) * 110); }
.kd-b11-kb { position: absolute; inset: 0; transform-origin: 62% 40%; }
.kd-b11-thread { fill: none; stroke: var(--paper-ink-2); stroke-width: 1; stroke-linecap: round; opacity: .8; }
.kd-b11-tag { position: absolute; left: calc(var(--u) * 28); top: calc(var(--u) * 116); display: grid; place-items: center;
  width: calc(var(--u) * 78); height: calc(var(--u) * 38); padding-top: calc(var(--u) * 6);
  border-radius: calc(var(--u) * 3); background: var(--tex-paper) 0 0 / calc(var(--u) * 140), var(--b11-lit); color: var(--hand);
  font: 400 max(13px, calc(var(--u) * 13.5)) / 1 var(--font-hand); font-variation-settings: var(--hand-axes); white-space: nowrap;
  box-shadow: var(--print-rim), var(--kd-sh-sheet); transform-origin: 50% calc(var(--u) * 5); rotate: -6deg; }
.kd-b11-tag::before { content: ""; position: absolute; left: 50%; top: calc(var(--u) * 4); width: calc(var(--u) * 6); height: calc(var(--u) * 6);
  margin-left: calc(var(--u) * -3); border-radius: 50%; background: var(--world); box-shadow: 0 0 0 calc(var(--u) * 1.4) #C9A45B, inset 0 1px 1px rgb(0 0 0 / 30%); }
.kd-b11-rad:checked ~ .kd-b11-key .kd-b11-kb { rotate: -7deg; }
.kd-b11-rad:checked ~ .kd-b11-key .kd-b11-ksh { translate: calc(var(--u) * 3.4) calc(var(--u) * 11); opacity: .55; }

/* ---------- the slip: one detail at a time, all in one cell (the height of the longest), a notch at the thing ---------- */
.kd-b11-note { --ink: var(--paper-ink); --ink-2: var(--paper-ink-2); --muted: var(--paper-muted); --link: #345E8D; --focus: #245DAD;
  position: relative; display: grid; margin-top: 12px; padding: 14px 16px 10px; border-radius: 3px; color: var(--ink);
  background: var(--tex-paper) 0 0 / 180px, var(--b11-slip); box-shadow: var(--print-rim), var(--kd-sh-sheet); }
.kd-b11-note::before { content: ""; position: absolute; left: -7px; top: -6px; width: 14px; height: 14px; border-radius: 2px 0 0 0;
  background: var(--tex-paper) 0 0 / 180px, var(--b11-slip); box-shadow: -1px -1px 1px rgb(var(--b11-cast) / 6%);
  translate: calc(var(--u) * var(--b11-x)) 0; rotate: 45deg; }
.kd-b11-p { grid-area: 1 / 1; display: grid; align-content: start; justify-items: start; gap: 4px; margin: 0;
  color: var(--ink-2); font: 400 15px/22px var(--font-body); visibility: hidden; opacity: 0; }
.kd-b11-p b { color: var(--ink); font-weight: 700; text-wrap: balance; }
.kd-b11-gr { font-size: 14px; line-height: 20px; text-wrap: pretty; }
.kd-b11-ex { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; color: var(--muted); font: 600 13px/22px var(--font-body);
  font-variant-numeric: tabular-nums lining-nums; }
.kd-b11-say { color: var(--hand); font: 400 16px/22px var(--font-hand); font-variation-settings: var(--hand-axes); }
.kd-b11-l { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 16px; justify-self: stretch;
  color: var(--muted); font: 600 13px/22px var(--font-body); font-variant-numeric: tabular-nums lining-nums; }
.kd-b11-more, .kd-b11-to { display: inline-flex; align-items: center; min-height: 44px; margin-block: -11px; padding: 0; border: 0; background: none;
  color: var(--link); font: 600 15px/1.25 var(--font-body); text-decoration: none; cursor: pointer; }
.kd-b11[data-t="grammar"] .kd-b11-p[data-p="g"][data-on], .kd-b11[data-t="album"] .kd-b11-p[data-p="album"],
.kd-b11[data-t="next"] .kd-b11-p[data-p="next"] { visibility: visible; opacity: 1; }
/* without JS the radios still choose (where :has is known) */
html:not(.js) .kd-b11:has(.kd-b11-rad[value="album"]:checked) .kd-b11-p[data-p="album"],
html:not(.js) .kd-b11:has(.kd-b11-rad[value="next"]:checked) .kd-b11-p[data-p="next"] { visibility: visible; opacity: 1; }
html:not(.js) .kd-b11:has(.kd-b11-rad:not([value="grammar"]):checked) .kd-b11-p[data-p="g"] { visibility: hidden; opacity: 0; }

/* ---------- 600-1023: one column still, the desk and the slip a little wider ---------- */
@media (min-width: 600px) and (max-width: 1023px) {
  .kd-b11-desk, .kd-b11-nb { max-width: 600px; }
  .kd-b11-desk { margin-top: 26px; }
  .kd-b11-row, .kd-b11-note { --u: calc(min(100vw - 64px, 600px) / 360); }
  @supports (width: 1cqw) { .kd-b11-row, .kd-b11-note { --u: calc(100cqw / 360); } }
}

/* ---------- from 1024: the words left, centred on the still life; the still life and its slip in the right column (K5:
   it starts where every block's right column starts and may reach 40 px into the wrap's margin on a wide screen) ---------- */
@media (min-width: 1024px) {
  .kd-b11-in { grid-template-areas: "copy desk" "copy nb"; }
  .kd-b11-copy { align-self: start; gap: 14px; padding-top: 30px; }
  .kd-b11-desk, .kd-b11-nb { width: 100%; max-width: none; }
  .kd-b11-desk { margin: 0; }
  .kd-b11-price { display: inline-flex; align-items: center; justify-self: start; min-height: 44px; margin-top: 10px; font-size: 16px; }
  .kd-b11-row, .kd-b11-note { --u: calc(520px / 360); }
  @supports (width: 1cqw) { .kd-b11-row, .kd-b11-note { --u: calc(100cqw / 360); } }
  .kd-b11-cap { padding-top: 12px; font-size: 15px; line-height: 21px; }
  .kd-b11-note { margin-top: 14px; padding: 18px 22px 12px; }
  .kd-b11-p { font-size: 16px; line-height: 24px; gap: 5px; }
  .kd-b11-gr { font-size: 15px; line-height: 22px; }
  .kd-b11-say { font-size: 18px; line-height: 24px; }
}

/* ---------- motion: the leporello unfolds once at entry, the other two settle in; a touch lifts; the ribbon slides ---------- */
@media (prefers-reduced-motion: no-preference) {
  .kd-mo .kd-b11[data-in="wait"] .kd-b11-pn { translate: calc(var(--u) * -24 * var(--k)) 0; opacity: 0; }
  .kd-mo .kd-b11[data-in="wait"] .kd-b11-pn[data-k="0"] { opacity: 1; }
  .kd-mo .kd-b11[data-in="wait"] .kd-b11-rib { opacity: 0; }
  .kd-mo .kd-b11[data-in="wait"] .kd-b11-stk { opacity: 0; translate: 0 calc(var(--u) * -8); }
  .kd-mo .kd-b11[data-in="wait"] .kd-b11-key { opacity: 0; }
  .kd-b11[data-in="go"] .kd-b11-pn { transition: translate 520ms var(--kd-dev) calc(var(--k) * 50ms), opacity 160ms var(--ease-standard) calc(var(--k) * 50ms); }
  .kd-b11[data-in="go"] .kd-b11-rib { transition: opacity 200ms var(--ease-standard) 420ms; }
  .kd-b11[data-in="go"] .kd-b11-stk { transition: opacity 240ms var(--ease-standard) 220ms, translate 280ms var(--kd-dev) 220ms; }
  .kd-b11[data-in="go"] .kd-b11-key { transition: opacity 280ms var(--ease-standard) 340ms, translate 320ms var(--kd-dev); }
  .kd-b11[data-in="go"] .kd-b11-tag { animation: kd-b11-swing 720ms var(--ease-standard) 340ms both; }
  .kd-b11:not([data-in="go"]) .kd-b11-obj { transition: translate 320ms var(--kd-dev), opacity 240ms var(--ease-standard), scale 120ms var(--ease-standard); }
  .kd-b11-thing:active .kd-b11-obj { scale: .98; }
  .kd-b11-sh, .kd-b11-lift, .kd-b11-ksh { transition: translate 320ms var(--kd-dev), opacity 320ms var(--ease-standard); }
  .kd-b11-rib { transition: translate 440ms var(--kd-settle); }
  .kd-b11-top { transition: translate 440ms var(--kd-dev), rotate 440ms var(--kd-dev); }
  .kd-b11-kb { transition: rotate 460ms var(--kd-settle); }
  .kd-b11-cap { transition: color var(--dur-ui, 220ms) var(--ease-standard); }
  .kd-b11-cap::after { transition: scale 280ms var(--kd-dev); }
  .kd-b11-note::before { transition: translate 380ms var(--kd-dev); }
  .kd-b11-p { transition: opacity 200ms var(--ease-standard), visibility 0s; }
  .kd-b11-p:not([data-on]), .kd-b11:not([data-t="album"]) .kd-b11-p[data-p="album"], .kd-b11:not([data-t="next"]) .kd-b11-p[data-p="next"] {
    transition: opacity 120ms var(--ease-standard), visibility 0s linear 120ms; }
  /* the tag swings once when the key is chosen or hovered (no loop) */
  .kd-b11-tag[data-swing] { animation: kd-b11-swing 720ms var(--ease-standard) both; }
  @media (hover: hover) { .kd-b11-t3:hover .kd-b11-tag { animation: kd-b11-swing 720ms var(--ease-standard) both; } }
  @keyframes kd-b11-swing { 0% { rotate: -6deg; } 22% { rotate: 5deg; } 48% { rotate: -11deg; } 72% { rotate: -3deg; } 100% { rotate: -6deg; } }
  /* the chosen panel answers a new part: up 2.5 u and back */
  .kd-b11-pn[data-bump] { animation: kd-b11-bump 240ms var(--ease-standard); }
  @keyframes kd-b11-bump { 0% { translate: 0 0; } 40% { translate: 0 calc(var(--u) * -2.5); } 100% { translate: 0 0; } }
  /* one quiet sign once the table is in sight: the top print rises a little and settles (js/b11.js invite) */
  .kd-b11-top[data-nudge] { animation: kd-b11-nudge 900ms var(--kd-dev) both; }
  @keyframes kd-b11-nudge { 0% { translate: 0 0; } 35% { translate: calc(var(--u) * 2) calc(var(--u) * -6); } 100% { translate: 0 0; } }
}
/* ---- css/b6.css ---- */
/* Block 6 «Хто почує ваш голос» (#formats, KL-1017-B, concept F3; stage 3 final polish f1). The block's object is the
   contact sheet of the course: a proof sheet on photo paper, 5 rows (a row is a cassette) of 8 small sepia prints
   (assets/b6/sheet.webp), the lesson number in pencil under each print, gold wax rings around the lessons where a person
   hears you. The ticket chooses the format and the sheet answers in wax: the mentor circles every recording, «Самостійно»
   only lesson 8, 1:1 every lesson with the teacher. A finger along the sheet carries the mentor's loupe from print to print
   (js/b6.js). Phone: the heading and its line, the sheet, the open ticket, the two folded ones in one row, the terms in one
   row. Desk: the heading and the sheet on the left, the tickets and their terms on the right, centred on them.
   Without JS (html.no-js) every ticket is open and the mentor's rings stand; html.js (set in <head>) folds the two other
   tickets from the first paint. */
.kd-b6 { --wax: #E7AE3E; --halo: rgb(122 78 20 / 46%); --pencil: #4A443D; --tk-link: #345E8D;
  --sprite: url("../assets/b6/sheet.webp");
  /* a film frame in small (14 × 14): the dark rebate with its perforation above and below, a sepia window */
  --g-frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23CBAE84'/%3E%3Cstop offset='1' stop-color='%23775436'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='14' height='14' rx='1.6' fill='%232A241D'/%3E%3Crect x='1.6' y='3.6' width='10.8' height='6.8' rx='.5' fill='url(%23s)'/%3E%3Cg fill='%23EDE5D6'%3E%3Crect x='1.6' y='1.1' width='1.9' height='1.4' rx='.35'/%3E%3Crect x='4.6' y='1.1' width='1.9' height='1.4' rx='.35'/%3E%3Crect x='7.6' y='1.1' width='1.9' height='1.4' rx='.35'/%3E%3Crect x='10.5' y='1.1' width='1.9' height='1.4' rx='.35'/%3E%3Crect x='1.6' y='11.5' width='1.9' height='1.4' rx='.35'/%3E%3Crect x='4.6' y='11.5' width='1.9' height='1.4' rx='.35'/%3E%3Crect x='7.6' y='11.5' width='1.9' height='1.4' rx='.35'/%3E%3Crect x='10.5' y='11.5' width='1.9' height='1.4' rx='.35'/%3E%3C/g%3E%3C/svg%3E");
  /* the same wax ring as on the sheet, around the small frame (the line of the person who hears you) */
  --g-ring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke-linecap='round'%3E%3Cpath stroke='%237A4E14' stroke-opacity='.42' stroke-width='12' d='M66 9C38 3 9 17 8 47C7 77 31 94 56 92C81 90 96 70 93 45C90 21 69 6 45 9C39 10 34 12 29 16'/%3E%3Cpath stroke='%23E7AE3E' stroke-width='7.5' d='M66 9C38 3 9 17 8 47C7 77 31 94 56 92C81 90 96 70 93 45C90 21 69 6 45 9C39 10 34 12 29 16'/%3E%3Cpath stroke='%23E7AE3E' stroke-width='4' opacity='.6' d='M13 62C17 83 37 96 60 93C83 89 97 67 92 40'/%3E%3C/svg%3E");
  /* a plain jump to #formats (no script yet, a link from outside): the band starts at the screen's top, with no strip of the
     envelope's paper over it. The page's only anchor offset is html's scroll-padding-top (head + 12 px, S13); this cancels
     it for the band. With the script, every way in lands on the open ticket itself (js/b6.js). */
  scroll-margin-top: calc((var(--head-h) + 12px) * -1); }
/* the paper stays light at night (the lamp): its link and pencil keep their contrast on the darker paper */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kd-b6 { --tk-link: #284A72; --pencil: #3F3932; } }
:root[data-theme="dark"] .kd-b6 { --tk-link: #284A72; --pencil: #3F3932; }

.kd-b6-grid { display: grid; gap: 12px; }
.kd-b6-head .kd-lead { margin-top: 6px; }
.kd-b6 .kd-nw { white-space: nowrap; }
.kd-b6-side { display: contents; }
.kd-b6-head { order: 1; }
.kd-b6 .kd-sheet { order: 2; }
.kd-b6 .kd-tickets { order: 3; }
.kd-b6 .kd-more { order: 4; }

/* ---------- the tickets: the family's lk-ticket, one paper, one frame (radius 12), the perforation only on the tear line ---------- */
.kd-b6 .kd-tickets { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; overflow-anchor: none; }
.kd-b6 .kd-offer { grid-column: 1 / -1; }
.kd-b6 .kd-offer.lk-ticket { --tk-r: 12px; --tk-notch: 9px; --tk-ink: var(--paper-ink-2); --tk-perf: color-mix(in srgb, var(--paper-ink-2) 45%, transparent);
  color: var(--paper-ink); filter: drop-shadow(.5px 1px 1px rgb(var(--cast-rgb) / 14%)) drop-shadow(2px 4px 6px rgb(var(--cast-rgb) / 12%)); }
.kd-b6 .kd-offer :is(.lk-ticket__main, .lk-ticket__stub) { background: var(--sheet-paper) var(--tex-paper); background-size: 160px; color: var(--paper-ink); }
.kd-b6 .kd-offer .lk-ticket__main::after { content: none; }
/* paper things on the deep cloth keep the paper's focus ring; the coral on the light paper stays the day's coral at night */
.kd-b6 :is(.kd-tickets, .kd-sheet) { --focus: #245DAD; }
.kd-b6 .kd-tickets { --cta: #BC482D; --cta-press: #A13B25; --on-cta: #FFFDF8; --sh-cta: 0 10px 24px rgb(188 72 45 / 26%); --sh-cta-hover: 0 10px 24px rgb(188 72 45 / 32%); }
@media (min-width: 768px) {
  .kd-b6 .kd-offer.lk-ticket { grid-template-columns: minmax(0, 1fr);
    --tk-cut-a: radial-gradient(circle at 0 100%, #0000 var(--tk-notch), #000 calc(var(--tk-notch) + .5px)) 0 0 / 51% 100% no-repeat, radial-gradient(circle at 100% 100%, #0000 var(--tk-notch), #000 calc(var(--tk-notch) + .5px)) 100% 0 / 51% 100% no-repeat;
    --tk-cut-b: radial-gradient(circle at 0 0, #0000 var(--tk-notch), #000 calc(var(--tk-notch) + .5px)) 0 0 / 51% 100% no-repeat, radial-gradient(circle at 100% 0, #0000 var(--tk-notch), #000 calc(var(--tk-notch) + .5px)) 100% 0 / 51% 100% no-repeat; }
  .kd-b6 .kd-offer .lk-ticket__main { border-radius: var(--tk-r) var(--tk-r) 0 0; }
  .kd-b6 .kd-offer .lk-ticket__stub { align-content: start; border-radius: 0 0 var(--tk-r) var(--tk-r); }
  .kd-b6 .kd-offer .lk-ticket__stub::before { top: -2px; bottom: auto; left: calc(var(--tk-notch) + 5px); right: calc(var(--tk-notch) + 5px); width: auto; height: 4px;
    background: radial-gradient(circle, var(--tk-perf) 1.6px, transparent 2.1px) 0 50% / 9px 4px repeat-x; }
}
/* the head: the badge, then the name and the price on one line (the price wraps under a long name) */
.kd-b6 .kd-tk-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 14px; row-gap: 0; padding: 12px 16px 10px; }
.kd-b6 .kd-offer-badge { flex-basis: 100%; margin: 0 0 2px; color: var(--paper-ink-2); font: 700 13px/16px var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
.kd-b6 .kd-offer h3 { font: 500 26px/30px var(--font-display); letter-spacing: -.01em; }
.kd-b6 .kd-pick { all: unset; cursor: pointer; }
.kd-b6 .kd-pick:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
.kd-b6 .kd-offer-price { margin: 0; font: 500 34px/38px var(--font-display); letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
/* «за курс» of 1:1: one unit, smaller, so every price reads as an amount first (R7) */
.kd-b6 .kd-per { color: var(--paper-ink-2); font: 600 15px/1 var(--font-body); letter-spacing: 0; }
/* the line under a folded ticket's price: how often a person hears you in that format */
.kd-b6 .kd-tk-hint { display: none; margin: 1px 0 0; color: var(--paper-ink-2); font: 600 13px/17px var(--font-body); text-wrap: pretty; }
.kd-b6 .kd-tk-body { display: grid; gap: 9px; padding: 12px 16px 10px; }
/* every line carries one sign: a film frame in small; the line of the person who hears you wears the sheet's gold ring */
.kd-b6 .kd-lines { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.kd-b6 .kd-lines li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; color: var(--paper-ink-2); font: 400 14px/20px var(--font-body); text-wrap: pretty; }
.kd-b6 .kd-lines li::before { content: ""; width: 22px; height: 22px; margin-top: -1px; background: var(--g-frame) 50% 50% / 14px 14px no-repeat; }
.kd-b6 .kd-lines li.kd-l-ring::before { background: var(--g-ring) 50% 50% / 22px 22px no-repeat, var(--g-frame) 50% 50% / 14px 14px no-repeat; }
.kd-b6 .kd-lines li.kd-l-ring { color: var(--paper-ink); }
/* the small print: the access note (the School's words) and the guarantee link under it, two lines on a phone */
.kd-b6 .kd-tk-small { display: grid; justify-items: start; }
@media (max-width: 599px) {
  .kd-b6 .kd-tk-small { display: block; color: var(--paper-muted); font: 400 13px/18px var(--font-body); }
  .kd-b6 .kd-tk-small .kd-offer-note { display: inline; }
  .kd-b6 .kd-tk-small .kd-tk-terms { display: inline; min-height: 0; margin: 0 0 0 4px; padding-block: 13px; }
  .kd-b6 .kd-tk-body { gap: 8px; padding-bottom: 8px; }
  .kd-b6 .kd-lines { gap: 4px; }
  .kd-b6 .kd-tk-act { gap: 6px; }
}
.kd-b6 .kd-offer-note { margin: 0; color: var(--paper-muted); font: 400 13px/18px var(--font-body); }
.kd-b6 .kd-tk-terms { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0 -12px; color: var(--tk-link); font: 600 13px/18px var(--font-body); text-decoration: none; }
.kd-b6 :is(.kd-tk-terms, .kd-tk-want):hover { text-decoration: underline; text-underline-offset: 3px; }
.kd-b6 :is(.kd-tk-terms, .kd-tk-want):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.kd-b6 .kd-tk-act { display: grid; gap: 8px; }
.kd-b6 .kd-tk-act .lk-cta { width: 100%; min-height: var(--cta-h-s); }
.kd-b6 .kd-tk-closed { color: var(--paper-ink-2); font: 600 14px/19px var(--font-body); text-wrap: pretty; }
/* the bot's request for the start: the second way on, a link under the coral (never a second coral) */
.kd-b6 .kd-tk-want { display: flex; align-items: center; justify-content: center; min-height: 44px; color: var(--tk-link); font: 700 15px/20px var(--font-body); text-decoration: none; }

/* folded (html.js, from the first paint): two tickets side by side under the open one, the name over the price and the
   line of who hears you; the whole ticket chooses it */
.js .kd-b6 .kd-offer:not([data-open]) { grid-column: auto; }
.js .kd-b6 .kd-offer:not([data-open]) .lk-ticket__stub { display: none; }
.js .kd-b6 .kd-offer:not([data-open]) .lk-ticket__main { border-radius: var(--tk-r); -webkit-mask: none; mask: none; }
.js .kd-b6 .kd-offer:not([data-open]) .kd-tk-head { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; height: 100%; padding: 9px 13px 10px; }
.js .kd-b6 .kd-offer:not([data-open]) .kd-offer-badge { display: none; }
.js .kd-b6 .kd-offer:not([data-open]) h3 { font-size: 18px; line-height: 23px; white-space: nowrap; }
/* a folded ticket says it opens: «›» after its name */
.js .kd-b6 .kd-offer:not([data-open]) h3::after { content: "\00a0›"; color: var(--paper-ink-2); font: 600 18px/1 var(--font-body); }
.js .kd-b6 .kd-offer:not([data-open]) .kd-offer-price { padding-top: 2px; font-size: 22px; line-height: 24px; letter-spacing: -.01em; }
.js .kd-b6 .kd-offer:not([data-open]) .kd-per { display: none; }
.js .kd-b6 .kd-offer:not([data-open]) .kd-tk-hint { display: block; }
.js .kd-b6 .kd-offer:not([data-open]) .kd-pick::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: var(--tk-r); }
.js .kd-b6 .kd-offer:not([data-open]) .kd-pick:focus-visible { outline: none; }
.js .kd-b6 .kd-offer:not([data-open]) .kd-pick:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 3px; }
.kd-b6[data-js] .kd-offer[data-open] .kd-pick { cursor: default; }
/* a visitor sent to the prices finds the tickets standing: no entry fade, now or when the kit's observer answers later */
.kd-b6[data-arrived] .lk-ticket { opacity: 1; animation: none; }
.kd-b6[data-arrived] .lk-ticket .lk-ticket__stub { animation: none; }
/* the wax pencil's loop round the open ticket's stub (js/b6.js wax()), inside the ticket, over its paper */
.kd-b6 .kd-b6-wax { position: absolute; z-index: 6; display: block; margin: 0; pointer-events: none; }
.kd-b6 .kd-b6-wax svg { display: block; width: 100%; height: 100%; overflow: visible; }
.kd-b6 .kd-b6-wax path { fill: none; stroke: #EDBE55; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* ---------- the contact sheet: a proof sheet on photo paper, 40 small prints with pencil numbers ---------- */
/* the padding keeps every ring on the paper (a ring is 132 % of its print, up to 109 % more by hand) */
.kd-b6 .kd-sheet { position: relative; margin: 0; padding: 8px 10px 2px; rotate: -.6deg; }
.kd-b6 .kd-sheet-grid { display: grid; row-gap: 2px; border-radius: 2px; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.kd-b6 .kd-sheet-grid:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.kd-b6 .kd-strip-film { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: 6px; }
.kd-b6 .kd-fr { position: relative; display: grid; grid-template-rows: auto 14px; }
/* a print: the sepia cell of the sprite in a narrow white border, lying on the paper */
.kd-b6 .kd-fr-img { position: relative; display: block; box-sizing: border-box; aspect-ratio: 1; border: 2px solid var(--print); border-radius: 1px;
  background: #A88A64 var(--sprite) calc(var(--c) * 100% / 7) calc(var(--w) * 100% / 4) / 800% 500% no-repeat;
  box-shadow: 0 .5px 1px rgb(var(--cast-rgb) / 30%), 0 2px 4px -1px rgb(var(--cast-rgb) / 18%); }
/* the lesson number, written in pencil under its print */
.kd-b6 .kd-fr-n { align-self: end; padding-left: 2px; color: var(--pencil); font: 400 13px/14px var(--font-hand); font-variation-settings: var(--hand-axes);
  letter-spacing: -.02em; pointer-events: none; }
/* the wax ring: a warm halo under two strokes of one pencil (the second, lighter, closes the loop), larger than the print,
   turned and pressed by hand, its edge broken by the wax's grain */
.kd-b6 .kd-fr-ring { position: absolute; z-index: 3; inset: -9%; width: 118%; height: 118%; overflow: visible; pointer-events: none;
  fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1.2; rotate: var(--r, 0deg); scale: var(--s, 1); }
.kd-b6 .kd-fr-ring use { stroke-dashoffset: 1.1; }
.kd-b6 .kd-fr-ring .kd-wh { stroke: var(--halo); stroke-width: calc(6px * var(--sw, 1)); }
.kd-b6 .kd-fr-ring .kd-wa { stroke: var(--wax); stroke-width: calc(4.2px * var(--sw, 1)); filter: url(#kd-wax-grain); }
.kd-b6 .kd-fr-ring .kd-wb { stroke: var(--wax); stroke-width: calc(2.2px * var(--sw, 1)); opacity: .7; }
/* f1 · the prints nobody hears step back (lighter sepia), so the rings give the sheet its rhythm (owner.eye: «приглушить 24 кадра») */
.kd-b6 .kd-fr:not([data-m="ring"]) .kd-fr-img { opacity: .58; }
.kd-b6 .kd-fr[data-m="ring"] .kd-fr-ring use { stroke-dashoffset: 0; }
.kd-b6[data-js] .kd-fr { cursor: pointer; }
/* the pen has not come yet (motion on, before the sheet is in view) */
.kd-b6 .kd-sheet.kd-pen .kd-fr-ring use { stroke-dashoffset: 1.1; }
/* the print under the finger (or the arrows) lifts a little from the paper */
.kd-b6 .kd-fr[data-lift] { z-index: 6; }
.kd-b6 .kd-fr[data-lift] .kd-fr-img { translate: 0 -2px; scale: 1.14; box-shadow: 0 0 0 1px rgb(var(--cast-rgb) / 30%), 0 6px 12px rgb(var(--cast-rgb) / 34%); }
/* below the first screen the sprite waits for the page's load (K1: html.kd-late) or for the block's own mount; without JS it is there */
html.kd-mo:not(.kd-late) .kd-b6:not([data-js]) :is(.kd-fr-img, .kd-loupe) { background-image: none; }

/* the mentor's loupe: the chosen print large over the sheet (js/b6.js sets --lx, --ly, --lc, --lr) */
.kd-b6 .kd-loupe { --ld: 96px; position: absolute; left: 0; top: 0; z-index: 8; width: var(--ld); height: var(--ld); border-radius: 50%; pointer-events: none;
  background: #A88A64 var(--sprite) calc(var(--lc, 0) * 100% / 7) calc(var(--lr, 0) * 100% / 4) / 800% 500% no-repeat;
  box-shadow: 0 0 0 3px #2A241D, 0 0 0 4.5px rgb(255 255 255 / 22%), 0 16px 30px -6px rgb(0 0 0 / 50%), 0 3px 6px rgb(0 0 0 / 30%);
  translate: calc(var(--lx, 0px) - 50%) calc(var(--ly, 0px) - 50%); scale: .55; opacity: 0; visibility: hidden; }
.kd-b6 .kd-loupe::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, rgb(255 255 255 / 38%), rgb(255 255 255 / 0%) 34%), radial-gradient(circle at 50% 50%, transparent 62%, rgb(20 14 8 / 38%) 100%); }
.kd-b6 .kd-loupe[data-on] { scale: 1; opacity: 1; visibility: visible; }

/* the legend under the sheet: the rings of the chosen ticket, or the note of the print under the loupe (two lines kept, so
   the page under the sheet never moves while the finger runs) */
.kd-b6 .kd-sheet-cap { display: block; min-height: 34px; margin: 4px 0 0 2px; color: var(--paper-ink-2); font: 600 13px/17px var(--font-body); }
.kd-b6 .kd-cap-set { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; }
.kd-b6 .kd-cap-set[hidden] { display: none; }
.kd-b6 .kd-cap-i { display: inline-flex; align-items: center; gap: 6px; }
.kd-b6 .kd-cap-m { color: var(--paper-muted); font-weight: 500; }
.kd-b6 .kd-cap-note { flex-wrap: nowrap; align-items: flex-start; gap: 6px; }
.kd-b6 .kd-cap-note .kd-g { margin-top: -2px; }
.kd-b6 .kd-cap-note b { color: var(--paper-ink); font-weight: 700; }
.kd-b6 .kd-g { flex: none; display: inline-block; width: 22px; height: 22px; background: var(--g-frame) 50% 50% / 14px 14px no-repeat; }
.kd-b6 .kd-g-ring { background: var(--g-ring) 50% 50% / 22px 22px no-repeat, var(--g-frame) 50% 50% / 14px 14px no-repeat; }

/* the terms: two disclosures in one row; the opened one takes the whole row */
.kd-b6 .kd-more { display: flex; flex-wrap: wrap; column-gap: 20px; border-block: 1px solid var(--line); }
.kd-b6 .kd-more .kd-dz { flex: 0 1 auto; border: 0; }
.kd-b6 .kd-more .kd-dz > summary { min-height: 44px; }
.kd-b6 .kd-more .kd-dz[open] { flex-basis: 100%; }
.kd-b6 .kd-more .refund { color: var(--ink-2); }

@media (prefers-reduced-motion: no-preference) {
  .kd-b6 .kd-fr-img { transition: scale 220ms var(--kd-settle), translate 220ms var(--kd-settle), box-shadow 220ms ease-out, opacity 280ms var(--ease-standard); }
  .kd-b6 .kd-loupe { transition: scale 280ms var(--kd-settle), opacity 140ms linear, translate 220ms cubic-bezier(.2, .7, .3, 1), visibility 0s linear 280ms; }
  .kd-b6 .kd-loupe[data-on] { transition: scale 280ms var(--kd-settle), opacity 140ms linear, translate 220ms cubic-bezier(.2, .7, .3, 1), visibility 0s; }
  /* under the finger the loupe follows closer (it glides print to print, it never lags a row behind) */
  .kd-b6 .kd-sheet[data-scrub] .kd-loupe[data-on] { transition: scale 280ms var(--kd-settle), opacity 140ms linear, translate 120ms cubic-bezier(.2, .7, .3, 1), visibility 0s; }
  .kd-b6 .kd-sheet[data-scrub] .kd-fr-img { transition-duration: 140ms; }
  /* the opened ticket repeats the answer: its signs are pressed in one after another, after the tickets have moved */
  .js .kd-b6 .kd-offer[data-open] .kd-lines li::before { animation: kd-b6-stamp 280ms var(--kd-settle) 300ms backwards; }
  .js .kd-b6 .kd-offer[data-open] .kd-lines li:nth-child(2)::before { animation-delay: 390ms; }
  .js .kd-b6 .kd-offer[data-open] .kd-lines li:nth-child(3)::before { animation-delay: 480ms; }
  @keyframes kd-b6-stamp { from { opacity: 0; scale: .55; } }
}

@media (min-width: 600px) {
  .kd-b6 .kd-lines li { font-size: 15px; line-height: 21px; }
  .kd-b6 .kd-sheet { padding: 24px 24px 10px; }
  .kd-b6 .kd-strip-film { column-gap: 8px; }
  .kd-b6 .kd-sheet-grid { row-gap: 8px; }
  .kd-b6 .kd-fr { grid-template-rows: auto 18px; }
  .kd-b6 .kd-fr-n { font-size: 14px; line-height: 16px; }
  .kd-b6 .kd-loupe { --ld: 120px; }
}
@media (min-width: 1024px) {
  /* left: the heading and the sheet; right: the tickets and their terms, centred on the left (no hole under the links) */
  .kd-b6-grid { grid-template-columns: minmax(0, 1fr) var(--kd-side); grid-template-areas: "head side" "sheet side";
    grid-template-rows: auto 1fr; column-gap: 72px; row-gap: 26px; align-items: start; }
  .kd-b6-head { grid-area: head; }
  .kd-b6-side { grid-area: side; display: grid; gap: 16px; align-content: start; align-self: center; }
  .kd-b6 .kd-sheet { grid-area: sheet; align-self: center; padding: 18px 22px 12px; rotate: -1deg; }
  .kd-b6 .kd-strip-film { column-gap: 10px; }
  .kd-b6 .kd-sheet-grid { row-gap: 10px; }
  .kd-b6 .kd-fr { grid-template-rows: auto 20px; }
  .kd-b6 .kd-fr-n { font-size: 15px; line-height: 18px; }
  .kd-b6 .kd-fr-img { border-width: 3px; }
  .kd-b6 .kd-fr-ring .kd-wh { stroke-width: calc(5px * var(--sw, 1)); }
  .kd-b6 .kd-fr-ring .kd-wa { stroke-width: calc(3.2px * var(--sw, 1)); }
  .kd-b6 .kd-fr-ring .kd-wb { stroke-width: calc(1.8px * var(--sw, 1)); }
  .kd-b6 .kd-loupe { --ld: 136px; }
  .kd-b6 .kd-sheet-cap { min-height: 24px; margin-top: 10px; }
  .kd-b6 .kd-tk-head { padding: 16px 20px 14px; }
  .kd-b6 .kd-tk-body { padding: 14px 20px 16px; }
  .kd-b6 .kd-tk-act .lk-cta { min-height: var(--cta-h); }
}
/* from 1280 (the column at its full width) the ticket stands beside the sheet, not beside the heading: the two columns
   share a top (the sheet's) and end within a few pixels of each other (art.composition f2) */
@media (min-width: 1280px) {
  .kd-b6-grid { grid-template-areas: "head ." "sheet side"; grid-template-rows: auto auto; }
  .kd-b6-side, .kd-b6 .kd-sheet { align-self: start; }
}
/* ---- css/b7.css ---- */
/* Block 7 «Мері й ті, хто вже заговорив» (#meri, KL-1017-B, concept block 7, D10, D18; audit s2 r1, s2 r2).
   Everyone here is a print. Mary's print turns over (her note, her signature, two facts on the back). Beside it, a fan of
   three learners' prints: on the face, a few of their own words in a hand (verbatim), on the back, the words themselves.
   A tap on the top print turns it over, the next tap puts it under the fan, a swipe puts it under at once; a tap on a print
   that peeks out brings it to the top. No separate «next» button.
   Ground, f1 (owner.eye «the loudest ground», creative, detail; COLOR.md rev. 3): a quiet warm rose, the pink taken out
   (hue 13 › 30) and the chroma under the album's linen (.035 › .024). f2 (creative.evenness): a step toward peach, the
   same quiet rose (ΔE 0.6 to the f1 ground): day #ECD8D1 › corner #ECD7D0 (OKLCH .896 / .024 / 42); ΔE Pronunciation
   #F0E5ED 4.3 (was 3.7), Занурення #F8E8DA 4.5 (was 4.1), Listening 5.9, Steps 5.4, Скарб 5.9, the paper of #faq 10.0,
   the deep cloth of #formats 48.9. Words on it by day (corner): ink 10.1 / ink-2 6.8 / muted 5.0 / link 4.85 / world ink 5.7. Evening #372828 › corner
   #392929 (OKLCH .294 / .023 / 19): ink 11.2 / ink-2 7.2 / muted 5.0 / link 6.4 / world ink 8.1; ΔE Pronunciation 4.2,
   Занурення 3.9 (was 2.5 / 2.5), the evening paper 10.9, the evening deep cloth 7.3.
   Mary's yellow circle peeks out from behind the print's top right corner, ~60 % of it in sight (the home's portrait),
   never as two crescents at the sides. Night: the prints keep their paper (FOUNDATION 8) but stand under the lamp: the
   light from the top left, the far side of the frame settling into --raised, the pencil words darker (≥ 4.5:1).
   Phone 393: Mary's print (196) and her line side by side, the fan of prints under them: the block is about one screen.
   From 768: the print left, the heading, the line, the fan and the ways right; from 1024 the right column starts at the
   same x as #envelope's (a 600 left column and the same gap).
   Without JS: the back of Mary's print lies under it as a note, the learners' words stand in a column.
   Motion only transform / translate / rotate / scale / opacity under prefers-reduced-motion: no-preference. */
.kd-b7 { --b7w: 196px;
  /* under 1024 (f2, owner.eye «two empty cards»): the fan fills its row; the top print is about half of it, the prints
     under it open by half their width toward the row's edges, so their last words show whole and large in what shows */
  --b7-fanw: calc(100vw - 2 * var(--gutter)); --lpw: clamp(164px, calc(var(--b7-fanw) * .48), 196px);
  --fdx: min(calc((var(--b7-fanw) - var(--lpw)) / 2 - 7px), calc(var(--lpw) * .5));
  --b7-ground: #ECD8D1; --b7-corner: #ECD7D0;
  /* the yellow circle: its diameter (share of the print) and how far its centre sits inside the print's top right corner */
  --b7-cd: .5; --b7-cx: .1; --b7-cy: .35;
  /* the learners' papers: the page's cream, the envelope's kraft, the album's linen (the lamp lies over them at night) */
  --b7-cream: #FFFBF3, #F6EEDF 66%, #ECE1CC; --b7-kraft: #F7E8CF, #ECD5B0 66%, #E0C394; --b7-linen: #F5F2E7, #E7E1CD 66%, #DAD3BC;
  --b7-lamp: linear-gradient(transparent, transparent); }
/* night under the lamp: no bright cream on the dark rose; the prints' paper a step down (--print #D6D0C5), light from the
   top left, the far side settling into --raised; pencil and hints in a dark ink that holds ≥ 4.5:1 on the darkest corner */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kd-b7 { --b7-ground: #372828; --b7-corner: #392929;
  --print: #D6D0C5; --print-muted: #2E2A25; --paper-ink-2: #2E2A25;
  --b7-cream: #E2DCD0, #D6CDBC 66%, #CBC0AC; --b7-kraft: #DCCCB1, #D0BA96 66%, #C4AB80; --b7-linen: #DAD7CC, #CDC7B5 66%, #C0B9A3;
  --b7-lamp: radial-gradient(150% 125% at 10% 0%, rgb(255 222 176 / 14%), transparent 38%, color-mix(in srgb, var(--raised) 22%, transparent) 100%); } }
:root[data-theme="dark"] .kd-b7 { --b7-ground: #372828; --b7-corner: #392929;
  --print: #D6D0C5; --print-muted: #2E2A25; --paper-ink-2: #2E2A25;
  --b7-cream: #E2DCD0, #D6CDBC 66%, #CBC0AC; --b7-kraft: #DCCCB1, #D0BA96 66%, #C4AB80; --b7-linen: #DAD7CC, #CDC7B5 66%, #C0B9A3;
  --b7-lamp: radial-gradient(150% 125% at 10% 0%, rgb(255 222 176 / 14%), transparent 38%, color-mix(in srgb, var(--raised) 22%, transparent) 100%); }
.kd-sec.kd-b7 { --world: var(--b7-ground); --world-deep: var(--b7-corner);
  background: var(--tex-paper) 0 0 / 220px, radial-gradient(120% 90% at 85% 0%, var(--b7-corner), var(--b7-ground) 62%); }

/* phone: the heading, Mary's print and her line side by side, the fan, the ways, the voice line */
.kd-b7-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px;
  grid-template-areas: "head head" "mary intro" "fan fan" "ways ways" "voice voice"; }
.kd-b7-grid > .kd-h2 { grid-area: head; margin-bottom: 26px; }
.kd-b7-words { display: contents; }
.kd-b7-mary { grid-area: mary; position: relative; isolation: isolate; display: grid; justify-items: center; align-self: center; padding: 4px 0 6px 2px; }
/* the family keeps Mary on its yellow circle (the finale, Скарб, the homepage, DESIGN.md); it does not move, the print turns over it */
/* the circle's centre sits inside the print's top right corner by (cx, cy) of its radius: ~60 % of it shows */
.kd-b7-mary::before { content: ""; position: absolute; z-index: -1; left: calc(50% + var(--b7w) / 2 - var(--b7w) * var(--b7-cd) * (.5 + var(--b7-cx) / 2));
  top: calc(var(--b7-top, 4px) - var(--b7w) * var(--b7-cd) * (.5 - var(--b7-cy) / 2)); width: calc(var(--b7w) * var(--b7-cd)); aspect-ratio: 1;
  border-radius: 50%; background: radial-gradient(120% 90% at 30% 20%, color-mix(in oklab, var(--kd-warm) 80%, #FFF8E6), var(--kd-warm));
  box-shadow: inset 0 0 0 1px rgb(60 48 36 / 10%); pointer-events: none; }
/* night (art.craft f1): the top of the circle is the canon's #E9B84C itself, its far side settles into the rose ground,
   so the circle never outshines Mary's portrait (DESIGN.md §2: the portrait's yellow no lighter than #E9B84C) */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kd-b7-mary::before {
  background: radial-gradient(120% 90% at 30% 20%, var(--kd-warm), color-mix(in oklab, var(--kd-warm) 80%, var(--b7-ground))); } }
:root[data-theme="dark"] .kd-b7-mary::before { background: radial-gradient(120% 90% at 30% 20%, var(--kd-warm), color-mix(in oklab, var(--kd-warm) 80%, var(--b7-ground))); }
.kd-b7-intro { grid-area: intro; align-self: end; min-width: 0; padding-bottom: 10px; }
.kd-b7-why { color: var(--ink-2); font: italic 400 17px/24px var(--font-display); text-wrap: pretty; }
.kd-b7-ways { grid-area: ways; display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 6px; }
.kd-b7-voice { grid-area: voice; max-width: 58ch; margin-top: 4px; color: var(--muted); font: 500 13px/18px var(--font-body); }
@media (max-width: 599px) {
  .kd-b7 { --b7w: 220px; }
  .kd-b7-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "mary" "intro" "fan" "ways" "voice"; }
  .kd-b7-intro { margin-top: 16px; padding-bottom: 0; }
}

/* ---------- Mary's print and its back ---------- */
.kd-b7-card { position: relative; width: var(--b7w); rotate: -2deg; }
.kd-b7 .kd-b7-front { --pw: var(--b7w); }
.kd-b7-front .kd-print-foot { flex-direction: row; justify-content: flex-end; align-items: center; padding: 0 2px 0 0; }
.kd-b7-ico { flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* Mary's pencil on her own print: the way to turn it, on the thing itself */
.kd-b7-hint { display: inline-flex; align-items: center; gap: 6px; color: var(--print-muted); font: italic 400 15px/1 var(--font-display); letter-spacing: .01em; }
.kd-b7-glint { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0;
  background: linear-gradient(112deg, transparent 32%, rgb(255 255 255 / 34%) 46%, rgb(255 255 255 / 12%) 53%, transparent 64%); }
/* the back of a print: grey stock with the backing's fine hatch, words in pencil-dark ink */
.kd-b7-back, .kd-b7-lp-back { position: relative; display: flex; flex-direction: column; border-radius: 2px; color: var(--print-ink);
  background: repeating-linear-gradient(135deg, rgb(28 26 23 / 3.5%) 0 1px, transparent 1px 6px), var(--tex-paper) 0 0 / 160px, color-mix(in srgb, var(--print) 74%, #BDB5A8); }
.kd-b7-back { gap: 7px; width: var(--b7w); padding: calc(var(--b7w) * .09) calc(var(--b7w) * .08) calc(var(--b7w) * .07); }
.kd-b7-back-ico { position: absolute; top: 8px; right: 8px; color: var(--print-muted); }
.kd-b7-say { padding-right: 10px; font: italic 500 14px/19px var(--font-display); word-spacing: .04em; text-wrap: pretty; }
.kd-b7-sign { align-self: flex-end; display: inline-flex; align-items: center; gap: 7px; color: var(--print-ink); font: italic 400 18px/22px var(--font-display); }
.kd-b7-sign::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--kd-cta); }
.kd-b7-facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: auto; padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--print-ink) 18%, transparent); }
.kd-b7-fact { color: var(--print-muted); font: 500 13px/16px var(--font-body); }
.kd-b7-fact b { display: block; margin-bottom: 2px; color: var(--print-ink); font: 500 19px/22px var(--font-display); letter-spacing: -.02em;
  font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.kd-b7-shadow, .kd-b7-lift { display: none; }
/* the lamp on every print of the block (transparent by day): one layer over the paper, under the words */
.kd-b7 .kd-print { background-image: var(--b7-lamp), var(--tex-paper); background-size: auto, 160px; }
.kd-b7 :is(.kd-b7-back, .kd-b7-lp-back) { background-image: var(--b7-lamp), repeating-linear-gradient(135deg, rgb(28 26 23 / 3.5%) 0 1px, transparent 1px 6px), var(--tex-paper);
  background-size: auto, auto, 160px; }

/* without JS: the print, and its back as Mary's note under it */
html:not(.js) .kd-b7-turn { display: grid; justify-items: center; gap: 18px; }
html:not(.js) .kd-b7-back { rotate: 3.8deg; box-shadow: var(--print-rim), var(--kd-sh-sheet); }
html:not(.js) :is(.kd-b7-hint, .kd-b7-back-ico) { display: none; }

/* with JS: one card with two faces; the shadow on the desk is its own layer, so it can narrow as the print turns */
.js .kd-b7-card { height: calc(var(--b7w) * 1.194); perspective: 1100px; }
.js :is(.kd-b7-shadow, .kd-b7-lift) { position: absolute; inset: 0; display: block; border-radius: 2px; pointer-events: none; transform-origin: 50% 50%; }
.kd-b7-shadow { box-shadow: var(--kd-sh-print); }
.kd-b7-lift { box-shadow: var(--kd-sh-lift); opacity: 0; }
.js .kd-b7-turn { position: absolute; inset: 0; transform-style: preserve-3d; }
.js .kd-b7-face { position: absolute; inset: 0; width: auto; height: auto; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.js .kd-b7-front { box-shadow: var(--print-rim); }
.js .kd-b7-back { transform: rotateY(180deg); box-shadow: var(--print-rim); }
/* reduce, Save-Data, 2g/3g (js/b7.js sets data-flat): the faces swap without the turn */
.kd-b7[data-flat] .kd-b7-back { transform: none; opacity: 0; }
.kd-b7[data-flat] .kd-b7-card[data-side="back"] .kd-b7-back { opacity: 1; }
.kd-b7[data-flat] .kd-b7-card[data-side="back"] .kd-b7-front { opacity: 0; }

/* the hand's target: the whole print; a horizontal finger turns it, a vertical one stays the page's scroll */
.kd-b7-hit, .kd-b7-fan-hit { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 2px;
  background: none; cursor: pointer; touch-action: pan-y; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
:is(.kd-b7-hit, .kd-b7-fan-hit):focus-visible { outline: 3px solid var(--focus); outline-offset: 6px; }
.kd-b7-card[data-turning] .kd-b7-hit { cursor: grabbing; }

/* ---------- the learners' prints ---------- */
.kd-b7-fan { grid-area: fan; position: relative; display: grid; gap: 14px; width: 100%; margin-top: 26px; }
.kd-b7-lp { position: relative; margin: 0; }
.kd-b7-lp-front { --pw: var(--lpw); }
/* the window of a learner's print: their pain and what changed, in their hand, on one of the page's papers (no mint) */
.kd-b7-lp-win { display: grid; place-items: center; padding: calc(var(--lpw) * .12) calc(var(--lpw) * .06) calc(var(--lpw) * .05); }
.kd-b7-lp[data-tone="cream"] .kd-b7-lp-win { background: var(--b7-lamp), var(--tex-paper) 0 0 / 160px, radial-gradient(120% 100% at 28% 18%, var(--b7-cream)); }
.kd-b7-lp[data-tone="kraft"] .kd-b7-lp-win { background: var(--b7-lamp), var(--tex-paper) 0 0 / 160px, radial-gradient(120% 100% at 28% 18%, var(--b7-kraft)); }
.kd-b7-lp[data-tone="linen"] .kd-b7-lp-win { background: var(--b7-lamp), var(--tex-paper) 0 0 / 160px, radial-gradient(120% 100% at 28% 18%, var(--b7-linen)); }
/* a quote mark in the corner: the print says «words» even while its words wait under the fan */
/* f1 · the page's own «: it sits at the x-height, so it is set smaller and higher than the old “ to clear the first line */
.kd-b7-lp-q { position: absolute; left: calc(var(--lpw) * .03); top: calc(var(--lpw) * -.085); z-index: 1; color: color-mix(in srgb, var(--hand) 38%, transparent);
  font: italic 500 calc(var(--lpw) * .2)/1 var(--font-display); pointer-events: none; }
.kd-b7-lp-say { position: relative; z-index: 1; display: grid; gap: calc(var(--lpw) * .028); max-width: 100%; rotate: -2deg; text-align: center; text-wrap: balance;
  font-family: var(--font-hand); font-variation-settings: var(--hand-axes); font-weight: 400; }
/* the pain in pencil, smaller; what changed in the learner's ink */
.kd-b7-lp-pain { color: var(--paper-ink-2); font-size: max(13px, calc(var(--lpw) * .066)); line-height: 1.25; }
.kd-b7-lp-gain { color: var(--hand); font-size: calc(var(--lpw) * .092); line-height: 1.16; }
/* the long faces (review-115 carries its whole sentence, S11; review-116 its long pain): a step smaller, less air
   around them, so the words never pass the window's edge (f1: review-116 ran past it from 1024) */
.kd-b7-lp[data-long] .kd-b7-lp-win { padding: calc(var(--lpw) * .085) calc(var(--lpw) * .04) calc(var(--lpw) * .04); }
.kd-b7-lp[data-long] .kd-b7-lp-gain { font-size: max(13.5px, calc(var(--lpw) * .078)); line-height: 1.14; }
/* the last words of a print that peeks out, whole, at its open edge; never on the top print. Under 1024 the last 2-3
   words (review-116 «…ясніша для мене.»), from 1024 the whole phrase */
.kd-b7-lp-side { position: absolute; top: 50%; z-index: 1; display: none; translate: 0 -50%; color: var(--hand); text-wrap: balance;
  -webkit-hyphens: manual; hyphens: manual; overflow-wrap: normal;
  font: 400 max(13px, calc(var(--lpw) * .082))/1.16 var(--font-hand); font-variation-settings: var(--hand-axes); pointer-events: none; }
.kd-b7-lp-more { display: none; }
.kd-b7-lp-front .kd-print-foot { flex-direction: row; justify-content: space-between; align-items: center; gap: 8px; padding: 0 2px 0 1px; }
/* the name under the quote, in the same hand: they signed their print (conversion.trust f1: seen without a tap) */
.kd-b7-lp-by { min-width: 0; overflow: hidden; color: var(--hand); white-space: nowrap; rotate: -1.5deg;
  font: 400 max(13px, calc(var(--lpw) * .074))/1.2 var(--font-hand); font-variation-settings: var(--hand-axes); }
.kd-b7-lp-front .kd-b7-ico { color: var(--print-muted); }
.kd-b7-lp-bk { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 16px 16px 13px; }
.kd-b7-lp-back blockquote { margin: 0; }
.kd-b7-lp-back p { font: 400 15px/21px var(--font-body); text-wrap: pretty; }
.kd-b7-lp-back .kd-b7-lp-who { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; margin-top: auto; color: var(--print-muted);
  font: 500 13px/16px var(--font-body); }
.kd-b7-lp-nm b { color: var(--print-ink); font-weight: 700; }
.kd-b7-lp-on { color: var(--print-muted); font: italic 400 15px/1 var(--font-display); letter-spacing: .01em; text-transform: none; white-space: nowrap; }

/* without JS: the words stand in a column, each on the back of its print */
html:not(.js) .kd-b7-lp-front, html:not(.js) .kd-b7-lp-on { display: none; }
html:not(.js) .kd-b7-lp-back { max-width: 520px; box-shadow: var(--print-rim), var(--kd-sh-sheet); }
html:not(.js) .kd-b7-lp:nth-child(2n) .kd-b7-lp-back { rotate: .8deg; }
html:not(.js) .kd-b7-lp:nth-child(2n + 1) .kd-b7-lp-back { rotate: -.6deg; }

/* with JS (from the first paint): the three prints lie in one cell as a fan; the top one reads whole */
.js .kd-b7-fan { gap: 0; justify-items: center; padding-bottom: 18px; -webkit-user-select: none; user-select: none; }
.js .kd-b7-lp { grid-area: 1 / 1; width: var(--lpw); height: calc(var(--lpw) * 1.194); z-index: var(--fz);
  transform: translate(var(--fx), var(--fy)) rotate(var(--fr)); perspective: 1000px; cursor: pointer; -webkit-touch-callout: none; }
.js .kd-b7-lp-turn { position: absolute; inset: 0; transform-style: preserve-3d; }
.js .kd-b7-lp-face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.js .kd-b7-lp-front { box-shadow: var(--print-rim), var(--kd-sh-print); }
.js .kd-b7-lp-back { transform: rotateY(180deg); box-shadow: var(--print-rim), var(--kd-sh-print); }
.js .kd-b7-lp[data-side="back"] .kd-b7-lp-turn { transform: rotateY(-180deg); }
.kd-b7-fan > [data-pos="0"] { --fx: 0px; --fy: 0px; --fr: -1.5deg; --fz: 3; }
.kd-b7-fan > [data-pos="1"] { --fx: var(--fdx); --fy: 10px; --fr: 3.5deg; --fz: 2; }
.kd-b7-fan > [data-pos="2"] { --fx: calc(var(--fdx) * -1); --fy: 14px; --fr: -4deg; --fz: 1; }
.js .kd-b7-lp { transform: translate(var(--fx), var(--fy)) rotate(var(--fr)) scale(var(--fs, 1)); }
/* the side words, whole, at the open edge of a print that peeks out (from 360) */
@media (min-width: 1024px) {
  .js .kd-b7-fan > :not([data-pos="0"]) .kd-b7-lp-side { display: block; max-width: calc(var(--fdx) - var(--lpw) * .095 - 4px); }
  .js .kd-b7-fan > [data-pos="1"] .kd-b7-lp-side { right: calc(var(--lpw) * .025); text-align: right; }
  .js .kd-b7-fan > [data-pos="2"] .kd-b7-lp-side { left: calc(var(--lpw) * .025); text-align: left; }
}
.js .kd-b7-fan > :not([data-pos="0"]) .kd-b7-lp-by { opacity: 0; }
@media (max-width: 1023px) {
  /* the top print lifts toward the reader as it turns (×1.14); its back is laid out at that size and set into the print
     (a still scale, never animated), so the words read at their own size, as on the old 200 px print */
  .js .kd-b7-lp[data-side="back"] { --fs: 1.14; }
  .js .kd-b7-lp-bk { position: absolute; left: 0; top: 0; width: 114%; height: 114%; transform: scale(.8772); transform-origin: 0 0; }
  .kd-b7-lp[data-long] .kd-b7-lp-back blockquote p { font-size: 14px; line-height: 19px; }
}
@media (max-width: 374px) {
  .kd-b7-lp-back p { font-size: 14px; line-height: 19px; }
  .kd-b7-lp[data-long] .kd-b7-lp-back blockquote p { font-size: 13px; line-height: 18px; }
  .kd-b7-lp[data-long] .kd-b7-lp-gain { font-size: 13px; }
  .kd-b7-lp-side { font-size: 13px; }
  .kd-b7-lp-bk { gap: 8px; }
}
/* a print that peeks out never shows a cut word: its words and its hint wait until it comes up (phone, tablet); its
   quote mark moves to the open edge */
.js .kd-b7-fan > :not([data-pos="0"]) :is(.kd-b7-lp-say, .kd-b7-lp-hint) { opacity: 0; }
.js .kd-b7-fan > :not([data-pos="0"]) .kd-b7-lp-q { opacity: 0; }
.js .kd-b7-fan > [data-pos="0"] .kd-b7-lp-side { opacity: 0; }
.js .kd-b7-fan-hit { inset: auto; grid-area: 1 / 1; width: var(--lpw); height: calc(var(--lpw) * 1.194); rotate: -1.5deg; }
/* before the fan is in sight the prints lie square on one another; in sight they fan out (opacity stays 1) */
.kd-b7-fan[data-gather] > .kd-b7-lp { --fx: 0px; --fy: 0px; --fr: -1.5deg; }
/* the hand drags the top print (js/b7.js writes translate and rotate) */
.kd-b7-lp[data-drag] { transition: none !important; }

/* ---------- motion: the entry once, the one glint, the prints settling and turning, the lift on hover ---------- */
@media (prefers-reduced-motion: no-preference) {
  .kd-mo .kd-b7-card[data-armed] { opacity: 0; }
  .kd-b7-card[data-play] { animation: kd-b7-drop 620ms var(--kd-settle) backwards; }
  .kd-b7-card[data-glint] .kd-b7-glint { animation: kd-b7-glint 650ms var(--ease-standard) both; }
  .kd-b7 .kd-print-gloss { transition: transform 160ms var(--ease-standard); }
  .kd-b7[data-flat] .kd-b7-face { transition: opacity 150ms linear; }
  .kd-b7:not([data-flat]) .kd-b7-lp { transition: transform 520ms var(--kd-settle), translate 300ms var(--kd-settle), rotate 300ms var(--kd-settle); }
  .kd-b7:not([data-flat]) .kd-b7-lp:nth-of-type(2) { transition-delay: 60ms; }
  .kd-b7:not([data-flat]) .kd-b7-lp:nth-of-type(3) { transition-delay: 110ms; }
  .kd-b7:not([data-flat]) .kd-b7-fan[data-busy] > .kd-b7-lp { transition-delay: 0ms; }
  .kd-b7:not([data-flat]) .kd-b7-lp-turn { transition: transform 560ms var(--kd-turn); }
  .kd-b7-lp :is(.kd-b7-lp-say, .kd-b7-lp-hint, .kd-b7-lp-side, .kd-b7-lp-q, .kd-b7-lp-by) { transition: opacity 180ms linear; }
  .kd-b7-fan > [data-pos="0"] :is(.kd-b7-lp-say, .kd-b7-lp-hint, .kd-b7-lp-by) { transition-delay: 160ms; }
  .kd-b7[data-flat] .kd-b7-lp-face { transition: opacity 150ms linear; }
}
/* reduce, Save-Data, 2g/3g: the learners' faces swap without the turn */
.kd-b7[data-flat] .kd-b7-lp-back { transform: none; opacity: 0; }
.kd-b7[data-flat] .kd-b7-lp[data-side="back"] .kd-b7-lp-turn { transform: none; }
.kd-b7[data-flat] .kd-b7-lp[data-side="back"] .kd-b7-lp-back { opacity: 1; }
.kd-b7[data-flat] .kd-b7-lp[data-side="back"] .kd-b7-lp-front { opacity: 0; }
@keyframes kd-b7-drop { from { opacity: 0; translate: 10px -24px; rotate: -7deg; scale: 1.05; } }
@keyframes kd-b7-glint { from { opacity: 1; translate: -105% 0; } to { opacity: 1; translate: 105% 0; } }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .kd-b7[data-js]:not([data-flat]) .kd-b7-card { transition: translate var(--dur-ui) var(--ease-standard); }
  .kd-b7[data-js]:not([data-flat]) .kd-b7-card:not([data-turning]):hover { translate: 0 -3px; }
  .kd-b7[data-js]:not([data-flat]) .kd-b7-card:not([data-turning]) .kd-b7-lift { transition: opacity var(--dur-ui) var(--ease-standard); }
  .kd-b7[data-js]:not([data-flat]) .kd-b7-card:not([data-turning]):hover .kd-b7-lift { opacity: .4; }
  .kd-b7[data-js]:not([data-flat]) .kd-b7-fan:has(.kd-b7-fan-hit:hover) > [data-pos="0"]:not([data-drag]) { translate: 0 -4px; }
  .kd-b7[data-js]:not([data-flat]) .kd-b7-fan > :is([data-pos="1"], [data-pos="2"]):hover { translate: 0 -6px; }
}

/* ---------- tablet and desk: the print left, the heading, the line, the fan and the ways right ---------- */
@media (min-width: 768px) {
  .kd-b7 { --b7w: 300px; --b7-fanw: calc(100vw - 2 * var(--gutter) - var(--b7w) - 56px); }
  .kd-b7-grid { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "mary head" "mary words";
    column-gap: 56px; row-gap: 18px; align-items: start; }
  .kd-b7-grid > .kd-h2 { margin-bottom: 0; }
  .kd-b7-words { grid-area: words; display: grid; justify-items: start; min-width: 0;
    grid-template-areas: "intro" "fan" "ways" "voice"; }
  /* the circle stays inside the 56 px gap: it never reaches the heading's column */
  .kd-b7-mary { align-self: center; padding: 6px 0 10px; --b7-top: 6px; --b7-cd: .46; --b7-cx: .4; --b7-cy: .2; }
  .kd-b7-intro { align-self: start; max-width: 36ch; padding-bottom: 0; }
  .kd-b7-why { font-size: 18px; line-height: 26px; }
  .kd-b7-fan { margin-top: 22px; }
  .kd-b7-hint { font-size: 16px; }
  .kd-b7-back { gap: 10px; padding: calc(var(--b7w) * .1) calc(var(--b7w) * .085) calc(var(--b7w) * .075); }
  .kd-b7-back-ico { top: 10px; right: 10px; }
  .kd-b7-say { padding-right: 0; font-size: 18px; line-height: 24px; word-spacing: .06em; }
  .kd-b7-sign { gap: 8px; font-size: 20px; line-height: 24px; }
  .kd-b7-sign::before { width: 7px; height: 7px; }
  .kd-b7-facts { gap: 12px; padding-top: 12px; }
  .kd-b7-fact { line-height: 17px; }
  .kd-b7-fact b { font-size: 24px; line-height: 28px; }
}
@media (min-width: 1024px) {
  .kd-b7 { --b7w: clamp(320px, 30vw, 400px); --lpw: 220px; --fdx: 150px; }
  .kd-b7-mary { --b7-cd: .52; --b7-cx: .3; }
  /* the right column on the x of #envelope's (K5): the same 1fr | --kd-col grid and the same 72 px gap */
  .kd-b7-grid { grid-template-columns: minmax(0, 1fr) minmax(0, var(--kd-col)); column-gap: 72px; row-gap: 20px; }
  /* the fan opens ±150 px: a print that peeks out shows its last words at its open edge, whole, inside what shows */
  .js .kd-b7-fan > :not([data-pos="0"]) .kd-b7-lp-side { max-width: calc(var(--fdx) - var(--lpw) * .07 - 44px); }
  .js .kd-b7-fan > [data-pos="1"] .kd-b7-lp-side { right: calc(var(--lpw) * .05); }
  .js .kd-b7-fan > [data-pos="2"] .kd-b7-lp-side { left: calc(var(--lpw) * .05); }
  .kd-b7-lp-more { display: inline; }
  .kd-b7-lp-cut { display: none; }
  .kd-b7-fan > [data-pos="1"] { --fy: 12px; }
  .kd-b7-fan > [data-pos="2"] { --fy: 16px; }
  .kd-b7-lp[data-long] .kd-b7-lp-back blockquote p { font-size: 15px; line-height: 21px; }
  .kd-b7-lp-pain { font-size: calc(var(--lpw) * .072); }
  .kd-b7-lp-gain { font-size: calc(var(--lpw) * .1); }
  .kd-b7-fan > [data-pos="1"] { --fr: 4deg; }
  .kd-b7-fan > [data-pos="2"] { --fr: -4.5deg; }
  .kd-b7-hint { font-size: 19px; }
  .kd-b7-say { font-size: 27px; line-height: 36px; }
  .kd-b7-sign { font-size: 26px; line-height: 30px; }
  .kd-b7-fact { font-size: 14px; line-height: 19px; }
  .kd-b7-fact b { font-size: 36px; line-height: 40px; }
  .kd-b7-why { font-size: 20px; line-height: 28px; }
  .kd-b7-fan { margin-top: 26px; }
  .kd-b7-lp-bk { gap: 12px; padding: 20px 20px 15px; }
  .kd-b7-lp-back p { font-size: 16px; line-height: 23px; }
  .kd-b7-lp-on { font-size: 16px; }
}
@media (min-width: 1280px) {
  .kd-b7 { --b7w: 420px; --lpw: 232px; }
  .kd-b7-say { font-size: 30px; line-height: 40px; }
  .kd-b7-lp-bk { padding: 22px 22px 16px; }
  .kd-b7-lp-back p { font-size: 17px; line-height: 25px; }
  .kd-b7-lp[data-long] .kd-b7-lp-back blockquote p { font-size: 16px; line-height: 22px; }
}
/* 1024-1279 (detail J06): the fan steps 10 px left, so the right print stays inside the field */
@media (min-width: 1024px) and (max-width: 1279px) { .js .kd-b7-fan { translate: -10px 0; } }
/* ---- css/b8.css ---- */
/* Block 8 «Мері, а підкажіть» (#faq, KL-1017-B, s2 r2): the family's FAQ (css/ui/faq.css) on the world's paper. Eight
   questions (the sale one leaves with the School's sale state). Mary answers in Literata italic on a paper slip (D18), never
   a chat bubble; the slip is held by a strip of paper tape with torn ends. One portrait of Mary per screen (R14): on a
   phone her circle under the H2 with «Без вступного тесту і без сорому.», no small avatars in the answers; every question
   served closed, so the H2 and the eight rows fit one phone screen. Desk: the heading and Mary's room stay on the left
   (sticky); her line changes with the question and the slip is changed by a view transition (the old slip lifts off
   150 ms, the new one lands 220 ms, 1°). The ladder: three steps, one row each, the sentence › the answer; its sentences
   are written by hand when it comes into sight (a paper wipe, transform only). An open row shows «−» at every width.
   Night: the slip lies under the lamp (warm light from the top), on a --raised frame, with a paper's shadow.
   Each row is its own layout and paint box (contain), so opening one never relays the page around it. */
.kd-b8-grid { display: grid; gap: 20px; }
/* a link on the slip is the paper's blue, like «Гарантія 72 години ›» on the tickets (detail H13); the slip stays light at night */
.kd-b8 { --b8-lamp: linear-gradient(transparent, transparent); --b8-frame: var(--kd-sh-sheet); --b8-link: #345E8D; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kd-b8 { --b8-link: #284A72;
  --b8-lamp: radial-gradient(120% 90% at 34% 0%, rgb(255 226 182 / 16%), transparent 58%), linear-gradient(transparent 50%, rgb(0 0 0 / 9%));
  --b8-frame: 0 0 0 5px var(--raised), 0 0 0 6px rgb(255 255 255 / 5%), 0 16px 32px -10px rgb(0 0 0 / 70%); } }
:root[data-theme="dark"] .kd-b8 { --b8-link: #284A72;
  --b8-lamp: radial-gradient(120% 90% at 34% 0%, rgb(255 226 182 / 16%), transparent 58%), linear-gradient(transparent 50%, rgb(0 0 0 / 9%));
  --b8-frame: 0 0 0 5px var(--raised), 0 0 0 6px rgb(255 255 255 / 5%), 0 16px 32px -10px rgb(0 0 0 / 70%); }
.kd-b8 .lk-faq__item { contain: layout paint; }
.kd-b8 .lk-faq__q:focus-visible { outline-offset: -3px; }
/* no avatar column: the portrait is the circle under the H2 (phone) or the room's (desk) */
.kd-b8 .lk-faq__a { grid-template-columns: minmax(0, 1fr); }
.kd-b8 .lk-faq__ava { display: none; }
.kd-b8 .lk-faq__a > :not(.lk-faq__ava, .lk-faq__dots), .kd-b8 .lk-faq__say { background: var(--b8-lamp), var(--tex-paper) 0 0 / 160px var(--sheet-paper);
  color: var(--paper-ink); border-radius: 1px; box-shadow: var(--print-rim), var(--b8-frame); }
.kd-b8 .lk-faq__a > :not(.lk-faq__ava, .lk-faq__dots) { position: relative; font: italic 500 17px/26px var(--font-display); word-spacing: .04em; }
.kd-b8 .lk-faq__say { font: italic 500 20px/30px var(--font-display); }
.kd-faq-a { display: grid; gap: 10px; }
.kd-faq-a p { margin: 0; }
.kd-faq-a a, .kd-b8 .lk-faq__say a { color: var(--b8-link); text-decoration-thickness: 1px; text-underline-offset: .18em; }
/* a way on inside an answer: a standalone link, 600, no underline, «›», 44 px */
.kd-b8 .kd-faq-a .kd-b8-go { display: inline-flex; align-items: center; min-height: 44px; margin: -6px 0 -10px; font: 600 16px/20px var(--font-body); font-style: normal;
  text-decoration: none; word-spacing: 0; }
/* the sale answer's way on: one link, the bot's paper plane before it; should it ever wrap, rows keep 8 px and no row
   reaches into another's 44 px (the paragraph, not the links, takes the negative margins) */
.kd-b8 .kd-b8-ways { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: -6px 0 -10px; }
.kd-b8 .kd-faq-a .kd-b8-ways .kd-b8-go { margin: 0; gap: 8px; }
.kd-b8 .kd-b8-tg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }

/* Mary under the heading (phone, and a desk without the room): her portrait on the family's yellow, her line in the world's ink */
.kd-b8-me { display: flex; align-items: center; gap: 14px; margin: 16px 0 0; }
.kd-b8-ring { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--kd-warm); box-shadow: var(--kd-sh-sheet); }
.kd-b8-ring img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; }
.kd-b8-me-line { color: var(--world-ink); font: italic 400 var(--fs-hand)/1.3 var(--font-display); letter-spacing: -.01em; text-wrap: balance; }

/* quiet chevrons: the envelope's kraft on paper; the open one in the world's ink (kit), the hovered one in the world.
   An open row shows «−» at every width (detail.unity); without CSS paths the chevron turns up. */
.kd-b8 .lk-faq__chev { background: color-mix(in oklab, var(--kd-kraft-bg) 46%, var(--paper)); color: var(--ink-2); }
@supports (d: path("M0 0")) {
  .kd-b8 .lk-faq__item[open] .lk-faq__chev { rotate: 0deg; }
  .kd-b8 .lk-faq__item[open] .lk-faq__chev path { d: path("M6 12l6 0 6 0"); }
}
@media (hover: hover) { .kd-b8 .lk-faq__item:not([open]) > .lk-faq__q:hover .lk-faq__chev { background: var(--world); color: var(--world-ink); } }

/* FAQ 1: the ladder of three sentences by hand, one row a step: the sentence › where it leads (bold); the error of step 2
   underlined in pencil, its fix is lesson 21; the answer wraps under the sentence as one piece when the row is narrow */
.kd-ladder { display: grid; margin: 4px 0; padding: 0; list-style: none; font: 400 15px/21px var(--font-body); font-style: normal; word-spacing: 0; }
.kd-ladder li { display: grid; gap: 2px; padding: 10px 0; border-top: 1px dashed color-mix(in srgb, var(--paper-ink-2) 40%, transparent); }
.kd-ladder li:last-child { border-bottom: 1px dashed color-mix(in srgb, var(--paper-ink-2) 40%, transparent); }
.kd-ladder li:nth-child(2) { --d: 300ms; }
.kd-ladder li:nth-child(3) { --d: 600ms; }
.kd-ladder-s { position: relative; justify-self: start; color: var(--hand); font: 400 17px/22px var(--font-hand); font-variation-settings: var(--hand-axes); }
.kd-ladder-s::after { content: ""; position: absolute; inset: -2px -8px -6px -4px; background: var(--sheet-paper); transform: scaleX(0); transform-origin: 100% 50%; pointer-events: none; }
.kd-b8-err { text-decoration: underline wavy color-mix(in srgb, var(--paper-ink-2) 80%, transparent) 1.5px; text-underline-offset: .1em; text-decoration-skip-ink: none; }
.kd-ladder-t { color: var(--paper-ink-2); }
.kd-ladder b { color: var(--paper-ink); font-weight: 700; }
.kd-b8-steps li { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 0; padding: 9px 0; }
/* the A1-B1 ladder's rungs are pencil lines (svg in the markup, in place of the dashed rules); js/b8.js rules them with a
   pen when the answer opens on a phone */
.kd-b8-steps li, .kd-b8-steps li:last-child { border-color: transparent; }
.kd-b8-rung { position: absolute; top: -2.5px; left: 0; width: 100%; height: 4px; overflow: visible; pointer-events: none;
  fill: none; stroke: color-mix(in srgb, var(--paper-ink-2) 50%, transparent); stroke-width: 1.2px; stroke-linecap: round; }
.kd-b8-rung--end { top: auto; bottom: -2.5px; }
.kd-b8-rung path { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.kd-ladder-to { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.kd-ladder-arw { color: var(--paper-ink-2); font-weight: 600; }
.kd-b8-steps a { min-height: 0; padding: 12px 0; margin: -12px 0; }
.kd-ladder a { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: none; }
/* FAQ 7: three courses as three rows of the same slip, the course's name first */
.kd-b8-path b { font: 500 19px/24px var(--font-display); letter-spacing: -.01em; }
.kd-b8-path li:first-child { padding-top: 0; border-top: 0; }
.kd-b8-path li:last-child { padding-bottom: 0; border-bottom: 0; }
.kd-b8-path a { margin-bottom: -10px; }

/* the next step under the questions: one text link into lesson 1 (the coral stays in the dock) */
.kd-b8-next { margin: 16px 0 0; }

/* paper tape: torn ends (a few millimetres of tooth), the slip's texture shows through it */
.kd-b8 .lk-faq__a > .kd-faq-a::before, .kd-b8 .lk-faq__say::before { content: ""; position: absolute; top: -11px; left: 30px; width: 84px; height: 22px;
  background: linear-gradient(180deg, rgb(255 255 255 / 22%), transparent 45%, rgb(120 96 60 / 8%)), rgb(236 225 194 / 70%) var(--tex-paper); background-size: auto, 120px;
  border-radius: 0; rotate: -3deg; pointer-events: none;
  clip-path: polygon(4px 0, calc(100% - 3px) 0, 100% 3px, calc(100% - 4px) 7px, 100% 11px, calc(100% - 3px) 15px, 100% 19px, calc(100% - 2px) 100%,
    3px 100%, 0 calc(100% - 4px), 4px 14px, 0 10px, 3px 6px, 0 3px); }
.kd-b8 .lk-faq__a > .kd-faq-a::before { left: 22px; width: 68px; height: 20px; rotate: 2deg; }

/* Mary in the room: her portrait on the yellow circle, concentric (no offset disc), a print's shadow */
.kd-b8 .lk-faq__me { background: var(--kd-warm); box-shadow: var(--kd-sh-sheet); }
.kd-b8 .lk-faq__me::before { content: none; }
.kd-b8 .lk-faq__say::before { top: -12px; left: 40px; width: 92px; height: 24px; }
.kd-b8 .lk-faq__say { padding: 24px 28px 22px; font-size: 19px; line-height: 28px; }
.kd-b8 .lk-faq__say .kd-faq-a { gap: 8px; }
.kd-b8 .lk-faq__say .kd-ladder { margin: 2px 0; font-size: 15px; line-height: 21px; }
.kd-b8 .lk-faq__say .kd-ladder li { padding: 8px 0; }
.kd-b8 .lk-faq__say .kd-ladder-s { font-size: 16px; line-height: 22px; }
.kd-b8 .lk-faq__say .kd-ladder-to { font-size: 14px; }

@media (min-width: 1024px) {
  .kd-b8-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(48px, 6vw, 104px); align-items: start; }
  .kd-b8-head { position: sticky; top: calc(var(--head-h) + 24px); }
  .kd-b8-head:has(> .lk-faq__room) > .kd-b8-me { display: none; }
  .kd-b8 .lk-faq { max-width: 760px; }
  .kd-b8 .lk-faq__room { margin-top: 24px; row-gap: 24px; }
  .kd-b8-next { margin-top: 24px; }
  .kd-ladder a { min-height: 32px; }
  /* the open row beside the room: «−» as on a phone (the kit's «‹» read as «back»); without CSS paths the chevron turns up */
  .kd-b8 .lk-faq[data-room] .lk-faq__item[open] .lk-faq__chev { rotate: 180deg; }
  @supports (d: path("M0 0")) { .kd-b8 .lk-faq[data-room] .lk-faq__item[open] .lk-faq__chev { rotate: 0deg; } }
}

@media (prefers-reduced-motion: no-preference) {
  /* the slip settles on the page (the product's «Осідання»), not a plain fade */
  .kd-b8 .lk-faq__item[open] .lk-faq__a { animation: kd-b8-settle 360ms var(--kd-settle) backwards; }
  /* the ladder is written left to right once it is in sight: a paper wipe uncovers each sentence, one after another */
  .kd-mo .kd-b8[data-b8]:not([data-ink]) .kd-ladder-s::after { transform: none; }
  .kd-mo .kd-b8[data-ink]:not([data-ink="still"]) .lk-faq__say:not([data-typing]) .kd-ladder-s::after,
  .kd-mo .kd-b8[data-ink]:not([data-ink="still"]) .lk-faq__item[open]:not([data-typing]) > .lk-faq__a .kd-ladder-s::after { animation: kd-b8-write 620ms var(--kd-dev) calc(140ms + var(--d, 0ms)) backwards; }
  /* the chevron folds into «−» */
  @supports (d: path("M0 0")) { .kd-b8 .lk-faq__chev path { transition: d 240ms cubic-bezier(.2, .7, .3, 1); } }
  /* the room's slip: the old one lifts off, the new one lands from above with a turn of 1° (vt() of the kit) */
  :root.lk-vt::view-transition-group(kd-b8-slip) { animation-duration: 300ms; }
  :root.lk-vt::view-transition-old(kd-b8-slip) { mix-blend-mode: normal; animation: kd-b8-lift 150ms cubic-bezier(.4, 0, 1, 1) both; }
  :root.lk-vt::view-transition-new(kd-b8-slip) { mix-blend-mode: normal; animation: kd-b8-lay 220ms var(--kd-settle) 110ms both; }
  @keyframes kd-b8-settle { from { opacity: 0; transform: translateY(10px); } }
  @keyframes kd-b8-write { from { transform: scaleX(1); } to { transform: scaleX(0); } }
  @keyframes kd-b8-lift { to { opacity: 0; transform: translateY(12px) rotate(1deg); } }
  @keyframes kd-b8-lay { from { opacity: 0; transform: translateY(-14px) rotate(-1deg); } }
}
/* the answer opens by its height where the browser can animate to auto (Chrome 131+); elsewhere it opens at once */
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    .kd-b8 .lk-faq { interpolate-size: allow-keywords; }
    .kd-b8 .lk-faq__item::details-content { block-size: 0; overflow: clip; overflow-clip-margin: 14px;
      transition: block-size 320ms cubic-bezier(.2, .7, .3, 1), content-visibility 320ms allow-discrete; }
    .kd-b8 .lk-faq__item[open]::details-content { block-size: auto; }
  }
}
/* ---- css/b9.css ---- */
/* Block 9, the finale (#finale, KL-1017-B, audit s2 r2): the family's finale (css/ui/finale.css) with the world's slot. The
   album rests CLOSED under the lamp, the very cover the product closes after lesson 40 (app/graduation/graduation.css
   .grad-book): a cloth board with its spine and hinge, the page block at the fore-edge and the foot, a blind frame, «Кадр»
   in warm gold foil, a die-cut window with the example and the name's line, blind until written. The visitor writes a name
   on the line (a flat field over the cover, js/b9.js): the letters stand in foil on the cloth and are pressed once, letter
   by letter; nothing is sent or stored. A tap or a drag opens the cover: the inside holds the week-1 envelope in a pocket
   and the right page one print, the example. One column on the phone; from 1024 the family's two columns: the album at
   the left, the words and the coral at the right, all in one screen; opened on a wide desk, the whole composition steps
   right so the spread never leaves the grid. The lamp lights once when the kit's entry plays (data-play) and stands lit
   under reduce, on a return and without JS.
   f1: the week-1 envelope inside is #envelope's kraft (fibres, a lit edge), as wide as its pocket, its flap the envelope's
   width, sealed with poured teal wax pressed with «1»; the pen of the name is an ink pen (a lacquer body, a gold edge);
   Mary's signature has the family's coral dot before it (BrandLockup); «Відкрити альбом ›» reads ≥ 4.5:1 at night. */
.kd-finale { position: relative; isolation: isolate; overflow: clip; background: var(--grad-world); }
.kd-lamp { position: absolute; left: 50%; top: -40px; z-index: -1; width: min(1200px, 190vw); height: 980px; transform: translateX(-50%); pointer-events: none;
  opacity: 0; background: radial-gradient(closest-side, var(--lamp-pool), transparent); }
.kd-finale:is([data-play], [data-still]) .kd-lamp, html:not(.js) .kd-lamp { opacity: 1; }
/* the closing panel stays one with the footer (#kd-foot42, COLOR.md 4.7): the lamp and the ground settle into the footer's
   cream under the last words, so the hairline sits on one ground; the lamp never runs past the page's end (overflow: clip) */
.kd-finale::after { content: ""; position: absolute; inset: auto 0 0; z-index: -1; height: 120px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--cream)); }
.kd-finale .lk-finale__in { grid-template-columns: minmax(0, 1fr); gap: 0; }
.kd-fin-line { max-width: 34ch; margin: 10px auto 0; color: var(--ink-2); text-wrap: pretty; }
/* the line breaks after the comma, never after a dash: a hyphen allows a break even before a no-break space */
.kd-fin-nb { white-space: nowrap; }
/* the materials: the envelope's kraft, the board's darker cloth (spine, back board, 8 % under the cover), the hot foil of
   the product's graduation cover (warm gold, the same in both themes, like the cloth) */
.kd-b9 { --b9-kraft: color-mix(in srgb, #BB9256 78%, var(--desk)); --b9-kraft-in: color-mix(in srgb, #906832 78%, var(--desk));
  --b9-fibre: url(/landing/assets/world/grain.svg);
  --b9-pocket: color-mix(in srgb, #C29E68 46%, var(--sheet)); --b9-board: color-mix(in srgb, var(--cloth) 92%, #000);
  --b9-foil: linear-gradient(100deg, #B98F45 0%, #F5DFA3 36%, #C9A15A 56%, #A07938 100%); }

/* the album: back cover and right page; the front cover turns over the spine (0° flat open … 180° shut). --b9-dx/-dy: the
   closed book's depth, seen from the lamp's side (the page block shows at the fore-edge and the foot) */
.kd-book { --u: .5cqi; --b9-dx: 5px; --b9-dy: 9px; position: relative; width: 100%; max-width: 324px; margin: 16px auto 0; aspect-ratio: 2 / 1.42; container-type: inline-size; }
.kd-book-inner { position: absolute; inset: 0; perspective: 1800px; perspective-origin: 50% 35%; }
.kd-book[data-closed] .kd-book-inner { transform: translateX(-25%); }
.kd-book-back { position: absolute; left: 50%; top: 0; width: 50%; height: 100%; border-radius: 0 9px 9px 0; }
/* the closed book's body under the cover (the product's .grad-block): the back board one depth down and right, the page
   block between the boards, its edges in fine lines; it carries the book's shadow on the desk and shows only while shut */
.kd-book-block { position: absolute; left: 50%; top: 0; width: 50%; height: 100%; z-index: 0; pointer-events: none; opacity: 0;
  translate: var(--b9-dx) var(--b9-dy); border-radius: 2px 9px 9px 2px; background: var(--b9-board) var(--tex-cloth); background-size: 128px;
  box-shadow: inset 0 -1px 0 rgb(0 0 0 / 28%), var(--kd-sh-album); }
.kd-book-block::before { content: ""; position: absolute; left: calc(var(--u) * 3 - var(--b9-dx)); top: calc(4px - var(--b9-dy));
  right: calc(var(--b9-dx) * .34); bottom: calc(var(--b9-dy) * .3); border-radius: 1px 4px 4px 1px;
  background: repeating-linear-gradient(90deg, var(--sheet) 0 1.5px, rgb(60 48 36 / 26%) 1.5px 2.25px) right / 10px 100% no-repeat,
    repeating-linear-gradient(0deg, var(--sheet) 0 1.5px, rgb(60 48 36 / 26%) 1.5px 2.25px) bottom / 100% 12px no-repeat, var(--sheet);
  box-shadow: inset 0 -1px 0 rgb(60 48 36 / 20%); }
.kd-book[data-closed] .kd-book-block { opacity: 1; transition-delay: .2s; }
.kd-book-page { --b9-pw: 84cqi; position: absolute; left: 50%; top: 6px; bottom: 6px; width: calc(50% - 8px); border-radius: 0 3px 3px 0; container-type: inline-size;
  box-shadow: inset 22px 0 24px -18px rgb(var(--cast-rgb) / 34%), 1px 0 0 color-mix(in srgb, var(--sheet) 82%, #000), 2px 0 0 var(--sheet), 3px 0 0 color-mix(in srgb, var(--sheet) 82%, #000); }
/* the nest is the print's size; the print lies in it, square in the middle of the page */
.kd-book-slot, .kd-book .kd-print { position: absolute; left: 50%; top: 50%; width: var(--b9-pw); height: calc(var(--b9-pw) * 1.194); translate: -50% -50%; }
.kd-book .kd-print { --pw: var(--b9-pw); rotate: -1.2deg; }
.kd-book-slot .kd-corner { --cw: 12px; z-index: 6; }
/* the learner's line: the example's sentence as plain words (no swap here), two even rows on a small print, one row on a wide
   one; the cap only where it fits (the foot is the container, styles.css) */
.kd-b9 .kd-sw-tail { display: inline; white-space: normal; }
.kd-b9 .kd-sw-old { display: none; }
.kd-book .kd-print-line { white-space: normal; text-wrap: balance; font-size: 13px; line-height: 1.14; text-align: center; }
.kd-book .kd-print-cap { display: none; }
@container (min-width: 190px) {
  .kd-book .kd-print-line { white-space: nowrap; text-align: start; line-height: 1.22; font-size: clamp(13px, calc(170cqi / var(--len, 24)), 22px); }
  .kd-book .kd-print-cap { display: flex; }
}
.kd-book-shade { position: absolute; inset: 0; z-index: 7; pointer-events: none; border-radius: inherit; opacity: 0;
  background: linear-gradient(90deg, rgb(var(--cast-rgb) / 50%), rgb(var(--cast-rgb) / 12%) 55%, transparent 85%); }
.kd-book-cover { position: absolute; left: 0; top: 0; z-index: 5; width: 50%; height: 100%; transform-origin: 100% 50%; transform-style: preserve-3d; transform: rotateY(12deg);
  touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.kd-book[data-closed] .kd-book-cover { transform: rotateY(180deg); }
.js .kd-book-cover { cursor: grab; }
.js .kd-book[data-closed] .kd-book-cover { cursor: pointer; }
.kd-face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; background: var(--cloth) var(--tex-cloth); background-size: 128px; }
.kd-face-in { border-radius: 9px 0 0 9px; box-shadow: inset 0 1px 0 rgb(255 255 255 / 9%), var(--kd-sh-album); }

/* the inside of the cover: the week-1 envelope (the kraft of #envelope: fibres, a lit top edge) tucked into a paper pocket
   of its own width, the flap as wide as the envelope, the poured wax seal with «1» on the flap's tip; its date in pencil */
.kd-endpaper { position: absolute; top: 6px; bottom: 6px; left: 8px; right: 0; border-radius: 3px 0 0 3px; box-shadow: inset -22px 0 24px -18px rgb(var(--cast-rgb) / 34%);
  container-type: inline-size; }
.kd-env { position: absolute; left: 50%; top: 20%; width: 82cqi; height: 50cqi; translate: -50% 0; rotate: -2deg; border-radius: 3px;
  background-color: var(--b9-kraft);
  background-image: linear-gradient(180deg, rgb(255 255 255 / 12%), rgb(var(--cast-rgb) / 8%)), radial-gradient(90% 70% at 30% 10%, rgb(255 255 255 / 10%), transparent 70%), var(--tex-paper);
  background-size: auto, auto, 160px; box-shadow: inset 0 1px 0 rgb(255 255 255 / 22%), var(--kd-sh-print); }
.kd-env::after, .kd-env-flap::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--b9-fibre) 0 0 / 150px; opacity: .1;
  mix-blend-mode: multiply; pointer-events: none; }
/* the flap: the envelope's width, its point a little past the middle; an edge one sheet thick, then its soft shadow */
.kd-env-flap { position: absolute; inset: 0 0 auto; height: 56%; border-radius: 3px 3px 0 0; background-color: var(--b9-kraft-in);
  background-image: linear-gradient(180deg, rgb(255 255 255 / 10%), rgb(var(--cast-rgb) / 10%)), var(--tex-paper); background-size: auto, 160px;
  clip-path: polygon(0 0, 100% 0, 52% 98%, 48% 98%); z-index: 1; }
/* the flap's edge and soft shadow on the pocket: the same point, 2 px lower, in the lamp's cast */
.kd-env::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 1; height: 56%; translate: 0 2px; background: rgb(var(--cast-rgb) / 30%);
  clip-path: polygon(0 0, 100% 0, 52% 98%, 48% 98%); pointer-events: none; }
.kd-env-seal { position: absolute; left: 50%; top: 55%; z-index: 2; display: block; width: 17cqi; aspect-ratio: 1; translate: -50% -50%; }
.kd-env-wax { display: block; width: 100%; height: 100%; overflow: visible; }
.kd-env-wax text { font: 600 24px/1 var(--font-display); }
.kd-pocket { position: absolute; left: 50%; top: 50%; bottom: 8%; width: 86cqi; translate: -50% 0; display: grid; align-content: center; justify-items: center; gap: 2px;
  padding: 18cqi 6cqi 4cqi; border-radius: 2px 2px 3px 3px; background: var(--b9-pocket) var(--tex-paper); background-size: 160px;
  box-shadow: 0 -1px 0 rgb(255 255 255 / 40%), 0 1px 2px rgb(var(--cast-rgb) / 22%), inset 0 -1px 0 rgb(var(--cast-rgb) / 12%);
  -webkit-mask: radial-gradient(circle at 50% 0, transparent 10cqi, #000 calc(10cqi + .5px)); mask: radial-gradient(circle at 50% 0, transparent 10cqi, #000 calc(10cqi + .5px)); }
.kd-pocket-hand { color: var(--hand); font: 400 max(15px, 10cqi)/1.1 var(--font-hand); font-variation-settings: var(--hand-axes); rotate: -2deg; }
.kd-pocket-note { max-width: 18ch; color: var(--paper-muted); font: italic 500 13px/16px var(--font-display); text-align: center; text-wrap: balance; }

/* the front cover. Sizes in --u: 1 % of the cover's width (the book is two covers wide on the phone, one on a wide desk).
   The spine side is at the left: the cloth turns over a rounded binding (a shade 8 % darker, lit along its crown), then the
   hinge's groove; the fore-edge corners are rounded like the board of #first. A crisp contact edge only: the book's shadow
   on the desk is the body's (.kd-book-block). */
.kd-face-out { overflow: hidden; border-radius: 2px 9px 9px 2px; transform: rotateY(180deg);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%), inset 0 -1px 0 rgb(0 0 0 / 22%), inset -1px 0 0 rgb(255 255 255 / 6%), 0 1px 1px rgb(0 0 0 / 22%); }
.kd-face-out::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; z-index: 1; width: clamp(10px, calc(var(--u) * 6.5), 18px); pointer-events: none;
  background: linear-gradient(90deg, rgb(0 0 0 / 34%), rgb(0 0 0 / 10%) 30%, rgb(255 255 255 / 7%) 58%, rgb(0 0 0 / 12%) 88%, rgb(0 0 0 / 20%)); }
.kd-face-out::after { content: ""; position: absolute; left: clamp(13px, calc(var(--u) * 9), 26px); top: 0; bottom: 0; z-index: 1; width: 2px; pointer-events: none;
  background: rgb(0 0 0 / 26%); box-shadow: 1px 0 0 rgb(255 255 255 / 9%), -1px 0 0 rgb(255 255 255 / 4%); }
/* the blind frame, pressed without foil (light from the lamp, top left) */
.kd-cover-frame { position: absolute; inset: calc(var(--u) * 6) calc(var(--u) * 6) calc(var(--u) * 6) clamp(18px, calc(var(--u) * 14), 40px); border-radius: 3px; pointer-events: none;
  box-shadow: inset 1px 1px 0 rgb(0 0 0 / 30%), inset -1px -1px 0 rgb(255 255 255 / 10%), 1px 1px 0 rgb(255 255 255 / 8%), -1px -1px 0 rgb(0 0 0 / 20%); }
.kd-cover-glint { position: absolute; left: -40%; top: -30%; width: 180%; height: 160%; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(closest-side, rgb(255 255 255 / 62%), rgb(255 255 255 / 16%) 46%, transparent 72%);
  transform: translate3d(var(--gx, 0%), calc((.5 - var(--p, .5)) * 46% + var(--gy, 0%) + var(--v, 0) * 6%), 0); }
.kd-cover-top { position: absolute; left: clamp(10px, calc(var(--u) * 6.5), 18px); right: 0; top: calc(var(--u) * 12); display: grid; justify-items: center; gap: calc(var(--u) * 5); }
/* «Кадр» in hot foil, pressed: the wall above the letters in shade, a lit lip under them; «A2» beside it in the cloth's chalk */
.kd-foil-w { position: relative; display: flex; align-items: flex-end; align-items: last baseline; gap: calc(var(--u) * 2.6); font: 500 calc(var(--u) * 14.5)/.96 var(--font-display); letter-spacing: -.01em; }
.kd-foil { text-align: center; color: transparent; -webkit-background-clip: text; background-clip: text; background-image: var(--b9-foil);
  filter: drop-shadow(0 -1px 0 rgb(0 0 0 / 42%)) drop-shadow(0 1px 0 rgb(255 255 255 / 16%)); }
/* the lamp catching the foil once: a window (.kd-foil-shine) slides over the word while its bright copy stands still in it,
   so only the letters shine; both move by transform (js/b9.js) */
.kd-foil-shine { position: absolute; left: 0; top: 0; bottom: 0; width: 1.3em; overflow: hidden; pointer-events: none; opacity: 0;
  -webkit-mask: linear-gradient(90deg, transparent, #000 42%, #000 58%, transparent); mask: linear-gradient(90deg, transparent, #000 42%, #000 58%, transparent); }
.kd-foil-shine-t { position: absolute; left: 0; top: 0; color: #FFF5DA; white-space: nowrap; text-align: center; }
.kd-foil-sub { color: var(--chalk); font: 600 max(13px, calc(var(--u) * 5.6))/1 var(--font-body); letter-spacing: .12em; opacity: .74; }
/* the cover's window: a die-cut square with the example's photo, the album's own way to show what is inside */
.kd-cover-win { display: block; width: calc(var(--u) * 54); height: calc(var(--u) * 54); padding: calc(var(--u) * 2); border-radius: 2px; background: color-mix(in srgb, var(--cloth) 66%, #000);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 60%), inset 0 -1px 0 rgb(255 255 255 / 6%), 0 1px 0 rgb(255 255 255 / 12%), 0 -1px 0 rgb(0 0 0 / 22%); }
.kd-cover-win img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 1px; box-shadow: 0 0 0 1px rgb(0 0 0 / 18%); }
/* the name: blind until written (only a pressed line and the words in chalk), then gold foil; the field over it (.kd-name)
   has the same box and type */
.kd-book { --b9-nfs: max(16px, min(calc(var(--u) * 10.8), calc(var(--u) * 150 / var(--b9-n, 9)))); }
.kd-cover-name { position: absolute; left: clamp(18px, calc(var(--u) * 14), 40px); right: calc(var(--u) * 6); bottom: calc(var(--u) * 11); height: 44px; display: grid; place-items: center; overflow: hidden; }
.kd-cover-line { position: relative; display: inline-grid; }
.kd-cover-line > * { grid-area: 1 / 1; }
.kd-cover-nm, .kd-cover-press { padding: 0 .5em 3px; white-space: nowrap; font: italic 500 var(--b9-nfs)/1.2 var(--font-display); letter-spacing: .02em; }
.kd-cover-nm { border-bottom: 1px solid rgb(255 253 248 / 34%); color: rgb(255 253 248 / 56%); box-shadow: 0 1px 0 rgb(0 0 0 / 22%);
  text-shadow: 0 -1px 0 rgb(0 0 0 / 38%), 0 1px 0 rgb(255 255 255 / 8%); }
.kd-book[data-named] .kd-cover-nm { border-bottom-color: transparent; box-shadow: none; color: transparent; text-shadow: none;
  -webkit-background-clip: text; background-clip: text; background-image: var(--b9-foil); filter: drop-shadow(0 -1px 0 rgb(0 0 0 / 42%)) drop-shadow(0 1px 0 rgb(255 255 255 / 16%)); }
/* the press: a light copy of the name, one span a letter; stamped, the letters light and settle left to right, 40 ms
   apart, so the pressing runs over the name once as the lamp's glint (only the letters shine, never a box) */
.kd-cover-press { color: #FFF5DA; pointer-events: none; }
.kd-cover-press > span { display: inline-block; opacity: 0; white-space: pre; }
/* the invitation: the pen runs once along the blind line, the line lights behind its nib */
.kd-cover-trace { align-self: end; height: 1px; background: rgb(255 253 248 / 88%); transform-origin: 0 50%; transform: scaleX(0); opacity: 0; pointer-events: none; }
.kd-cover-pen { align-self: end; justify-self: start; width: clamp(20px, calc(var(--u) * 12), 30px); height: auto; aspect-ratio: 1; margin: 0 0 -1px -2px; overflow: visible; opacity: 0; pointer-events: none;
  filter: drop-shadow(1px 2px 1.5px rgb(0 0 0 / 40%)); }
/* an ink pen, not an icon: a black lacquer body with the foil's gold edge, the nib's slit and hole in gold */
.kd-pen-body { fill: #1F1C19; stroke: #D9B66C; stroke-width: 1; stroke-linejoin: round; }
.kd-pen-slit { fill: none; stroke: #D9B66C; stroke-width: 1; stroke-linecap: round; }
.kd-pen-hole { fill: #D9B66C; }
.kd-name { position: absolute; z-index: 8; left: calc(25% + clamp(18px, calc(var(--u) * 14), 40px)); right: calc(25% + var(--u) * 6); bottom: calc(var(--u) * 11); height: 44px; display: none; }
.js .kd-book[data-rest] .kd-name:not([hidden]) { display: block; }
.kd-name-in { display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; color: transparent;
  caret-color: var(--chalk); text-align: center; font: italic 500 var(--b9-nfs)/1.2 var(--font-display); letter-spacing: .02em; cursor: text;
  -webkit-appearance: none; appearance: none; outline: none; -webkit-tap-highlight-color: transparent; }
.kd-name-in::selection { background: rgb(255 253 248 / 28%); color: transparent; }
.kd-name-in:focus-visible { outline: 2px solid var(--chalk); outline-offset: 2px; }
.kd-book:has(.kd-name-in:focus) .kd-cover-nm { border-bottom-color: rgb(255 253 248 / 85%); }

/* the way to open the album without a gesture: a text link, so the coral stays the one button */
.kd-book-link { margin-top: calc(2px + var(--b9-dy, 7px)); padding: 0 4px; border: 0; background: none; font: 600 16px/1.3 var(--font-body); cursor: pointer; }
/* night: the lamp lights the ground under the link; the family's light link holds 6.7:1 there (was 5.2, read pale) */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kd-book-link { color: #A9CBF2; } }
:root[data-theme="dark"] .kd-book-link { color: #A9CBF2; }
.kd-book-link[hidden] { display: none; }

/* the words under the album: Mary's line about today, her pen, the coral, the meta */
.kd-finale .lk-finale__text { margin-top: 6px; justify-items: center; text-align: center; }
.kd-finale .lk-finale__say { color: var(--link); font: italic 400 22px/30px var(--font-display); letter-spacing: -.01em; }
.kd-finale .lk-finale__sign { margin: 0 0 10px; }
/* f1 · the course's promise once more, in one phrase, over Mary's line (customer.want) */
.kd-finale .kd-fin-why { margin: 0 0 6px; color: var(--ink-2); font: 500 16px/24px var(--font-body); text-wrap: balance; }
/* the family's coral dot before Mary's name (BrandLockup, DESIGN.md §1): 8 px, sitting on the name's baseline */
.kd-finale .lk-finale__sign::before { content: ""; position: absolute; left: -13px; top: calc(1.08em - 8px); width: 8px; height: 8px; border-radius: 50%;
  background: var(--cta); }
.kd-finale .kd-meta { margin-top: 8px; }
@media (prefers-reduced-motion: no-preference) {
  .kd-lamp { transition: opacity var(--dur-reveal) var(--kd-settle); }
  .kd-book-inner { transition: transform var(--dur-reveal) linear(0, .72 60%, 1.015 88%, 1); }
  .kd-book-block { transition: opacity 160ms ease-out; }
  .kd-book-link { transition: transform var(--dur-press) ease-out; }
  .kd-book-link:active { transform: scale(.98); }
}
@media (min-width: 768px) {
  .kd-book { --b9-dx: 7px; --b9-dy: 11px; margin-top: 30px; max-width: 480px; }
  .kd-book-page { --b9-pw: 76cqi; }
  .kd-book-slot .kd-corner { --cw: 20px; }
  .kd-pocket-note { font-size: max(13px, 4.6cqi); line-height: 1.25; }
}
/* the desk: the family's two columns, the album at the left, the words at the right, centred against it, in one screen */
@media (min-width: 1024px) {
  .kd-finale .lk-finale__in { --b9-bh: calc(480px * .71); grid-template-columns: 480px minmax(0, 26rem); grid-template-rows: 1fr auto auto auto 1fr;
    grid-template-areas: "book ." "book head" "book line" "book text" "book ."; column-gap: 48px; justify-content: center;
    align-items: start; text-align: start; }
  .kd-finale .lk-finale__in > .kd-h2 { grid-area: head; justify-self: start; text-align: start; }
  .kd-fin-line { grid-area: line; justify-self: start; max-width: 26rem; margin: 14px 0 0; font-size: 18px; line-height: 28px; }
  .kd-book { grid-area: book; align-self: center; width: 480px; max-width: none; margin: 0; }
  /* the link stands right under the album whatever the words' height: the same area, moved down by half the album */
  .kd-book-link { grid-area: book; align-self: center; justify-self: center; margin: 0; translate: 0 calc(var(--b9-bh) / 2 + 36px); }
  .kd-finale .lk-finale__text { grid-area: text; justify-self: start; margin-top: 26px; justify-items: start; text-align: start; }
  .kd-finale .lk-finale__say { font-size: 24px; line-height: 32px; }
}
/* a wide desk: the column holds only the closed cover, next to the words; opened, the inside page swings out to the left
   (the book's inner is two covers wide and starts one cover to the left), and the whole composition steps right by
   --b9-shift (js/b9.js: what the spread needs to start on the grid's left edge), so the spread never leaves the grid */
@media (min-width: 1280px) {
  .kd-finale .lk-finale__in { --b9-w: 250px; --b9-bh: calc(var(--b9-w) * 1.42); grid-template-columns: var(--b9-w) minmax(0, 25rem); column-gap: 56px; }
  .kd-book { --u: 1cqi; --b9-dx: 8px; --b9-dy: 12px; width: var(--b9-w); aspect-ratio: 1 / 1.42; }
  .kd-book-inner { left: -100%; }
  .kd-book[data-closed] .kd-book-inner { transform: none; }
  .kd-book-page { --b9-pw: 82cqi; }
  .kd-name { left: clamp(18px, calc(var(--u) * 14), 40px); right: calc(var(--u) * 6); }
  .kd-finale .lk-finale__in > :not(.kd-book-link) { translate: var(--b9-shift, 0px) 0; }
  .kd-book-link { translate: var(--b9-shift, 0px) calc(var(--b9-bh) / 2 + 36px); }
}
@media (min-width: 1280px) and (prefers-reduced-motion: no-preference) {
  .kd-finale .lk-finale__in > :not(.kd-book-link) { transition: translate var(--dur-reveal) linear(0, .72 60%, 1.015 88%, 1); }
  .kd-book-link { transition: transform var(--dur-press) ease-out, translate var(--dur-reveal) linear(0, .72 60%, 1.015 88%, 1); }
}
@media (min-width: 1440px) { .kd-finale .lk-finale__in { --b9-w: 290px; grid-template-columns: var(--b9-w) minmax(0, 27rem); column-gap: 64px; } }

/* f1 · the signature is drawn when it is seen (js/b9.js data-sign): until then the kit's pen strokes and the arc wait */
.kd-b9[data-sign-wait]:not([data-sign]) :is(.lk-finale__sign, .lk-finale__sign *, .lk-finale__sign::after) { animation-play-state: paused; }