/* «Кадр» landing · the foundation (KL-1017-B, canvas pass 17.10). The page stands in the family of the school's landings
   (tools/landing-kit: tokens, frame, motion; Literata and Manrope, paper and bands, the header, the dock, FAQ, finale,
   footer) and keeps the world of «Кадр» (products/kadr/DESIGN.md «Альбом на столі»: the teal cloth, the cream print, the
   kraft envelope, the lamp, the blue marker) in its objects and in the colour of its sections. The rhythm of the grounds
   is outputs/kadr-landing-1017/COLOR.md: paper, «тканина» (aqua of the cloth), «крафт», «відбиток під лампою».
   A block's own rules live in css/bN.css (build/FOUNDATION.md). Motion: only transform, opacity, stroke-dashoffset,
   always under prefers-reduced-motion: no-preference. */

/* the family's faces (the same files and fallbacks as Скарб, Steps, Занурення); Shantell stays the learner's hand */
@font-face { font-family: Literata; font-style: normal; font-weight: 200 900; font-display: swap; src: url(assets/fonts/literata-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Literata; font-style: normal; font-weight: 200 900; font-display: swap; src: url(assets/fonts/literata-cyrillic.woff2) format('woff2'); unicode-range: U+0400-052F; }
@font-face { font-family: Literata; font-style: italic; font-weight: 400 500; font-display: swap; src: url(assets/fonts/literata-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Literata; font-style: italic; font-weight: 400 500; font-display: swap; src: url(assets/fonts/literata-italic-cyrillic.woff2) format('woff2'); unicode-range: U+0400-052F; }
@font-face { font-family: Manrope; font-style: normal; font-weight: 200 800; font-display: swap; src: url(assets/fonts/manrope-latin.woff2) format('woff2'); unicode-range: U+0000-024F, U+1E00-1EFF, U+2000-206F; }
@font-face { font-family: Manrope; font-style: normal; font-weight: 200 800; font-display: swap; src: url(assets/fonts/manrope-cyrillic.woff2) format('woff2'); unicode-range: U+0400-052F, U+2DE0-2DFF, U+A640-A69F; }
@font-face { font-family: 'Shantell Sans'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(assets/fonts/shantell-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Shantell Sans'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(assets/fonts/shantell-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Literata FB'; src: local('Georgia'); font-weight: 200 549; size-adjust: 108.6%; ascent-override: 108.4%; descent-override: 28.4%; line-gap-override: 0%; unicode-range: U+0020-007E, U+00A0-00FF, U+0400-045F, U+0490-0491, U+2018-201E, U+2026; }
@font-face { font-family: 'Literata FB'; src: local('Georgia Italic'), local('Georgia-Italic'); font-style: italic; size-adjust: 97.1%; ascent-override: 121.2%; descent-override: 31.7%; line-gap-override: 0%; unicode-range: U+0020-007E, U+00A0-00FF, U+0400-045F, U+0490-0491, U+2018-201E, U+2026; }
@font-face { font-family: 'Manrope FB'; src: local('Arial'), local('ArialMT'); font-weight: 200 549; size-adjust: 100.1%; ascent-override: 106.5%; descent-override: 30%; line-gap-override: 0%; unicode-range: U+0020-007E, U+00A0-00FF, U+0400-045F, U+0490-0491, U+2018-201E, U+2026; }
@font-face { font-family: 'Manrope FB'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 550 900; size-adjust: 99.9%; ascent-override: 106.7%; descent-override: 30%; line-gap-override: 0%; unicode-range: U+0020-007E, U+00A0-00FF, U+0400-045F, U+0490-0491, U+2018-201E, U+2026; }
@font-face { font-family: 'Shantell Fallback'; src: local('Arial'), local('Helvetica'), local('Roboto'); size-adjust: 114.1%; ascent-override: 89.4%; descent-override: 28%; line-gap-override: 0%; }

/* ---------- 1. the world's palette, day (these names are the world's own; the kit never declares them) ---------- */
:root {
  color-scheme: light;
  /* the materials of the world: the desk (the album's table, the eyelet holes), the lamp, the cast of one light */
  --desk: #ECE7DE; --desk-edge: #D1CABF; --lamp: rgb(255 238 208 / 80%); --lamp-pool: rgb(242 199 102 / 34%); --cast-rgb: 60 48 36;
  /* paper things: the album page, the note, the contact sheet, the tickets */
  --sheet: #F7F3EC; --sheet-paper: #F7F3EC; --paper-ink: #1C1A17; --paper-ink-2: #4A443D; --paper-muted: #68615A; --paper-control: #857B6E;
  --paper-link: #6A3B22; /* a link on paper: paper stays light at night, so does its ink */
  /* the print never inverts at night */
  --print: #FBF8F1; --milk: #E3DACB; --milk-light: #F7F2E8; --print-ink: #1C1A17; --print-muted: #6B6359; --hand: #23324F; --print-marker: #2F63A8;
  --cloth: #1D5650; --cloth-ground: #D5EAEA; --chalk: #FFFDF8; --corner: #2B2721;
  /* the grounds of the sections (COLOR.md): paper, «тканина» (the cloth's aqua), «крафт» (the envelope), «відбиток» under the lamp */
  --kd-page: #FFFDF8;
  --kd-cloth-bg: #D5EAEA; --kd-cloth-deep: #CAE2E3;
  --kd-kraft-bg: #F1D4AE; --kd-kraft-deep: #F1CFA6;
  /* «тканина в глибині»: the album's own cloth as a ground, once on the page (the price), light words on it */
  --kd-deep-bg: #1D5650; --kd-deep-deep: #174641;
  --kd-lamp-bg: #F8F1E5; --kd-lamp-deep: #F7EBD2;
  --kd-world-ink: #185B59; --kd-world-accent: #2F63A8; --kd-world-decor: #6E9E99;
  /* words on the grounds: the family's ink, a muted that holds 4.9:1 on every ground, the family's link and coral */
  --kd-ink: #272E2A; --kd-ink-2: #3D4943; --kd-muted: #545C55; --kd-link: #345E8D; --kd-marker: #2F63A8;
  /* controls */
  --kd-control: #776E62; --kd-line: #DCDCD0; --kd-raised: #FFFDF8; --kd-track: #E4DDD0; --kd-focus: #245DAD;
  --kd-cta: #BC482D; --kd-cta-press: #A13B25; --kd-on-cta: #FFFDF8; --kd-warm: #F2C766;
  /* one light, one angle (x = y / 2), the desk's hue */
  --print-rim: 0 0 0 transparent;
  --kd-sh-print: .5px 1px 1px rgb(60 48 36 / 8%), 1px 2px 2px rgb(60 48 36 / 8%), 2px 4px 4px rgb(60 48 36 / 8%), 4px 8px 8px rgb(60 48 36 / 8%), 8px 16px 16px rgb(60 48 36 / 8%);
  --kd-sh-sheet: .5px 1px 1px rgb(60 48 36 / 7%), 1px 2px 2px rgb(60 48 36 / 7%), 2px 4px 4px rgb(60 48 36 / 7%);
  --kd-sh-lift: 2px 4px 6px rgb(60 48 36 / 10%), 8px 16px 24px rgb(60 48 36 / 12%), 24px 44px 64px rgb(60 48 36 / 18%);
  --kd-sh-album: 1px 2px 2px rgb(60 48 36 / 10%), 3px 6px 8px rgb(60 48 36 / 10%), 8px 16px 24px rgb(60 48 36 / 12%), 18px 36px 56px rgb(60 48 36 / 14%);
  --kd-sh-cta: 0 10px 24px color-mix(in srgb, var(--kd-cta) 28%, transparent);
  --deboss: inset 1px 1.5px 2px rgb(60 48 36 / 20%), inset -1px -1px 0 rgb(255 255 255 / 70%);
  --paper-deboss: inset 1px 1.5px 2px rgb(60 48 36 / 22%), inset -1px -1px 0 rgb(255 255 255 / 60%);
  --emboss: 0 1px 0 rgb(255 255 255 / 45%);
  /* CC0 textures (assets/textures/SOURCES.md): alpha tiles over a token colour */
  --tex-paper: url(/landing/assets/textures/paper.webp); --tex-cloth: url(/landing/assets/textures/cloth.webp); --tex-desk: url(/landing/assets/textures/desk.webp);
  --font-hand: 'Shantell Sans', 'Shantell Fallback', 'Segoe Print', 'Comic Neue', cursive; --hand-axes: "INFM" 70, "BNCE" 0;
  /* motion «Осідання» of the product */
  --kd-settle: cubic-bezier(.34, 1.56, .64, 1); --kd-turn: cubic-bezier(.65, 0, .35, 1); --kd-dev: cubic-bezier(.16, 1, .3, 1);
  --marker-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8.2C20 5.6 41 4.4 61 4.9c19 .5 38 1.9 57 3.6' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --ring-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23000' stroke-width='5.5' stroke-linecap='round'%3E%3Cpath d='M57 8C81 10 94 28 92 52C90 77 70 93 47 92C23 91 7 74 8 50C9 27 27 9 51 9C57 9 62 11 66 15'/%3E%3C/svg%3E");
  /* layout of the world on top of the family's grid (--gutter, --section-y, --content-max, --head-h, --cta-h) */
  --kd-col: 520px; --kd-side: 440px;
}
/* ---------- evening under the lamp: declared twice, as every family page does ---------- */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark;
  --desk: #17140F; --desk-edge: #100E0A; --lamp: rgb(255 190 120 / 20%); --lamp-pool: rgb(255 184 110 / 18%); --cast-rgb: 0 0 0;
  --sheet: #D3C9B7; --sheet-paper: #D9D0C1; --paper-ink: #1C1A17; --paper-ink-2: #463F37; --paper-muted: #574F47; --paper-control: #6F665B;
  --print: #F4EEE3; --corner: #4A4136; --cloth-ground: #182929;
  --kd-page: #15130F;
  --kd-cloth-bg: #182929; --kd-cloth-deep: #1F3232;
  --kd-kraft-bg: #3F301B; --kd-kraft-deep: #41311C;
  --kd-deep-bg: #0E3A38; --kd-deep-deep: #0A302F;
  --kd-lamp-bg: #1F1B15; --kd-lamp-deep: #1B1813;
  --kd-world-ink: #8ED3CE; --kd-world-accent: #8FB8EA; --kd-world-decor: #4F8C86;
  --kd-ink: #ECE7DE; --kd-ink-2: #C2BAB0; --kd-muted: #A39B91; --kd-link: #8DB4E5; --kd-marker: #8FB8EA;
  --kd-control: #8A8174; --kd-line: #39352E; --kd-raised: #221E18; --kd-track: #2C261E; --kd-focus: #8FB3FF;
  --kd-cta: #EC8B71; --kd-cta-press: #E07A5F; --kd-on-cta: #1B1410; --kd-warm: #E9B84C;
  --print-rim: inset 0 1px 0 rgb(255 255 255 / 6%);
  --kd-sh-print: 1px 2px 3px rgb(0 0 0 / 40%), 6px 12px 22px rgb(0 0 0 / 38%);
  --kd-sh-sheet: 1px 2px 8px rgb(0 0 0 / 35%);
  --kd-sh-lift: 8px 18px 30px rgb(0 0 0 / 50%), 24px 44px 80px rgb(0 0 0 / 55%);
  --kd-sh-album: 4px 10px 18px rgb(0 0 0 / 45%), 16px 32px 60px rgb(0 0 0 / 50%);
  --kd-sh-cta: 0 10px 24px rgb(0 0 0 / 40%);
  --deboss: inset 1px 1.5px 3px rgb(0 0 0 / 55%), inset -1px -1px 0 rgb(255 255 255 / 5%);
  --emboss: 0 -1px 0 rgb(0 0 0 / 55%); } }
:root[data-theme="dark"] { color-scheme: dark;
  --desk: #17140F; --desk-edge: #100E0A; --lamp: rgb(255 190 120 / 20%); --lamp-pool: rgb(255 184 110 / 18%); --cast-rgb: 0 0 0;
  --sheet: #D3C9B7; --sheet-paper: #D9D0C1; --paper-ink: #1C1A17; --paper-ink-2: #463F37; --paper-muted: #574F47; --paper-control: #6F665B;
  --print: #F4EEE3; --corner: #4A4136; --cloth-ground: #182929;
  --kd-page: #15130F;
  --kd-cloth-bg: #182929; --kd-cloth-deep: #1F3232;
  --kd-kraft-bg: #3F301B; --kd-kraft-deep: #41311C;
  --kd-deep-bg: #0E3A38; --kd-deep-deep: #0A302F;
  --kd-lamp-bg: #1F1B15; --kd-lamp-deep: #1B1813;
  --kd-world-ink: #8ED3CE; --kd-world-accent: #8FB8EA; --kd-world-decor: #4F8C86;
  --kd-ink: #ECE7DE; --kd-ink-2: #C2BAB0; --kd-muted: #A39B91; --kd-link: #8DB4E5; --kd-marker: #8FB8EA;
  --kd-control: #8A8174; --kd-line: #39352E; --kd-raised: #221E18; --kd-track: #2C261E; --kd-focus: #8FB3FF;
  --kd-cta: #EC8B71; --kd-cta-press: #E07A5F; --kd-on-cta: #1B1410; --kd-warm: #E9B84C;
  --print-rim: inset 0 1px 0 rgb(255 255 255 / 6%);
  --kd-sh-print: 1px 2px 3px rgb(0 0 0 / 40%), 6px 12px 22px rgb(0 0 0 / 38%);
  --kd-sh-sheet: 1px 2px 8px rgb(0 0 0 / 35%);
  --kd-sh-lift: 8px 18px 30px rgb(0 0 0 / 50%), 24px 44px 80px rgb(0 0 0 / 55%);
  --kd-sh-album: 4px 10px 18px rgb(0 0 0 / 45%), 16px 32px 60px rgb(0 0 0 / 50%);
  --kd-sh-cta: 0 10px 24px rgb(0 0 0 / 40%);
  --deboss: inset 1px 1.5px 3px rgb(0 0 0 / 55%), inset -1px -1px 0 rgb(255 255 255 / 5%);
  --emboss: 0 -1px 0 rgb(0 0 0 / 55%); }

/* ---------- 2. the kit in the world's colours: the family's names resolve to the palette above in both themes.
   (0,2,0) and after tokens.css: it wins over the kit's day (:root) and evening (:root:not([data-theme=light])) blocks.
   The page is the family's paper; the faces are the kit's own (--font-display Literata, --font-body Manrope). ---------- */
:root:not([data-kd-off]) {
  --paper: var(--kd-page); --raised: var(--kd-raised); --surface-page: var(--kd-page); --surface-raised: var(--kd-raised);
  --ink: var(--kd-ink); --ink-2: var(--kd-ink-2); --muted: var(--kd-muted); --text-primary: var(--kd-ink); --text-secondary: var(--kd-ink-2);
  --line: var(--kd-line); --line-contrast: var(--kd-control); --line-control: var(--kd-control);
  --coral: var(--kd-cta); --coral-press: var(--kd-cta-press); --cta: var(--kd-cta); --cta-press: var(--kd-cta-press); --on-cta: var(--kd-on-cta);
  --link: var(--kd-link); --accent-text: var(--kd-link);
  --focus: var(--kd-focus); --yellow: var(--kd-warm); --yellow-press: color-mix(in oklab, var(--kd-warm) 88%, #000); --on-yellow: #272E2A;
  --sh-cta: var(--kd-sh-cta); --sh-cta-hover: var(--kd-sh-cta);
  --rv-wipe-bg: var(--kd-page);
}
/* the world of a section (data-world): its ground and the deep corner of its light. The ink, the accent and the mat are the
   same at every ground (one product, one ink: the cloth's teal), the way each family world keeps one ink (ui/tokens.css). */
:root, [data-world^="kadr"] { --world-ink: var(--kd-world-ink); --world-accent: var(--kd-world-accent); --world-decor: var(--kd-world-decor); --world-mat: var(--kd-raised); }
:root, [data-world="kadr-cloth"] { --world: var(--kd-cloth-bg); --world-deep: var(--kd-cloth-deep); }
[data-world="kadr-kraft"] { --world: var(--kd-kraft-bg); --world-deep: var(--kd-kraft-deep); }
[data-world="kadr-lamp"] { --world: var(--kd-lamp-bg); --world-deep: var(--kd-lamp-deep); }
[data-world="kadr-deep"] { --world: var(--kd-deep-bg); --world-deep: var(--kd-deep-deep); }
/* the deep cloth by day: the words on the ground turn light (paper things on it keep the paper's own ink) */
:root:not([data-theme="dark"]) [data-world="kadr-deep"] { --ink: #F4EEE3; --ink-2: #D3E3DF; --muted: #B4CDC8; --link: #A9CBF2; --accent-text: #A9CBF2;
  --line: rgb(244 238 227 / 22%); --kd-control: #8FB3AE; --line-contrast: #8FB3AE; --world-ink: #9FE0DA; --focus: #8FB3FF; color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) [data-world="kadr-deep"] { --ink: var(--kd-ink); --ink-2: var(--kd-ink-2); --muted: var(--kd-muted);
  --link: var(--kd-link); --accent-text: var(--kd-link); --line: var(--kd-line); --kd-control: #8A8174; --line-contrast: #8A8174; --world-ink: var(--kd-world-ink); --focus: var(--kd-focus); } }
/* an album page is paper in both themes: its words are the paper's ink */
.kd-page { --ink: var(--paper-ink); --ink-2: var(--paper-ink-2); --muted: var(--paper-muted); }

/* ---------- 3. base ---------- */
/* f2 P5 · the dock writes --dock-h on <html> each time it shows or steps aside (frame.js mountDock). Not inherited, its
   change restyles <html> alone instead of the whole document (tech s3f1 M4-M5: 205-243 ms frames on a phone, 8 > 1 long
   frames with this rule). Its readers sit on <html> itself: frame.css scroll-padding-bottom, js/b2.js. Never on body. */
@property --dock-h { syntax: "<length>"; inherits: false; initial-value: 0px; }
*, *::before, *::after { box-sizing: border-box; }
/* S13 · an anchor lands at head-h + 12 px: the offset is the html's scroll-padding alone (the kit's own scroll-margin of
   main [id] added a second one: 140 px instead of 68 on a phone, ux s3f1) */
html { -webkit-text-size-adjust: 100%; background-color: var(--paper); overflow-x: clip; scroll-padding-top: calc(var(--head-h) + 12px); }
:where(main [id]) { scroll-margin-top: 0; }
/* a section reached by keyboard from an in-page link takes the focus (app.js) without a frame round the whole block */
main section[tabindex="-1"]:focus { outline: none; }
body { position: relative; z-index: 0; margin: 0; min-height: 100%; background: var(--paper); color: var(--ink);
  font: 400 17px/26px var(--font-body); font-variant-numeric: lining-nums; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 500; letter-spacing: -.01em; line-height: 1.15; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
button { font: inherit; color: inherit; }
button, a, summary, [role="button"] { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
img { max-width: 100%; }
[hidden] { display: none !important; }
main[tabindex] { outline: none; }
.kd-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.kd-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.kd-skip { position: absolute; left: 16px; top: -64px; z-index: 70; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border-radius: 999px; background: var(--raised); color: var(--ink); font: 600 15px/1 var(--font-body); text-decoration: none; }
.kd-skip:focus { top: 8px; }

/* ---------- 4. the grid of a block (the family's: --gutter 16 › 44, --section-y 64 › 112, .lk-wrap 1280) ---------- */
.kd-sec { --kd-sy: clamp(46px, 28px + 5.6vw, 112px); position: relative; overflow-x: clip; padding-block: var(--kd-sy); }
.kd-sec:not(.kd-band) { padding-block: calc(var(--kd-sy) - 12px); }
/* a band of the world (the family's .lk-band--light): the section's ground with the light of its deep corner, full width.
   The paper sections between the bands are the page itself (COLOR.md: paper, cloth, kraft and the lamp take turns). */
.kd-band { background: var(--grad-world); }
/* the kraft band has a fibre: the paper tile, darker, so the envelope's ground reads as paper, not as a flat colour */
.kd-band[data-world="kadr-kraft"] { background: var(--tex-paper) 0 0 / 220px, var(--grad-world); }
.kd-band[data-world="kadr-deep"] { background: var(--tex-cloth) 0 0 / 140px, var(--grad-world); }
.kd-head-row { display: grid; gap: 10px; max-width: var(--kd-col); margin-bottom: clamp(20px, 14px + 1.6vw, 40px); }
/* K5 · the page's two columns from 1024: whatever the left holds, the right column starts at one x on every block (the
   wrap's right edge minus --kd-col, 520: x 796 at 1440, where #envelope's words already stand). A block puts .kd-split
   on its grid and its two parts in it; it may narrow the right part inside the column, never move its start. */
@media (min-width: 1024px) {
  .kd-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--kd-col)); column-gap: clamp(40px, 5vw, 80px); align-items: start; }
}
/* f2 P5 · K2 · until the late styles apply (html.kd-css: css/late.css onload), sections 3-9 are held: they stand at their
   styled height and show only their ground (their parts are display: none, so nothing in them is styled, laid out or
   painted; content-visibility: hidden was tried and reports its whole box as a layout shift when it opens). A jump before
   the styles («Ціни» at 3 s on a slow line) lands where the page will stay, and nothing that is drawn moves when the
   styles arrive (load CLS). After the styles, app.js (html.kd-stage) opens them one per idle period ([data-kd-in]), so the
   one late file never restyles the whole page in one frame. Without JS (html.no-js) nothing is held.
   #you is styled from the first paint (css/b2.css blocks it) and is not held.
   K9 · the heights are the blocks' own before their mount, measured on the preview host (Chrome, fonts loaded): one line
   per width range, exact at 360, 393, 412, 430, 599, 600, 767, 768, 1023, 1024, 1199, 1200, 1279, 1280, 1440, 1600; the
   merge re-measures them after every block's round (last: the s3f2 merge, P1-P6; #result: block 11, re-measured at the merge nb0 of direction C, the three things;
   solo f1 18.10: 375-419 and 1440+ re-measured at 393 and 1440 for #lesson, #formats, #meri, #faq, #finale, #result). */
html.js:not(.kd-css) :is(#lesson, #album, #envelope, #result, #formats, #meri, #faq, #finale), html.kd-stage :is(#lesson, #album, #envelope, #result, #formats, #meri, #faq, #finale):not([data-kd-in]) { height: var(--kd-hold, auto); overflow: clip; }
html.js:not(.kd-css) :is(#lesson, #album, #envelope, #result, #formats, #meri, #faq, #finale) > *, html.kd-stage :is(#lesson, #album, #envelope, #result, #formats, #meri, #faq, #finale):not([data-kd-in]) > * { display: none; }
/* the kit's reveal tokens (css/ui/reveal.css :root), declared here too with the same values: when css/late.css applies, <html>
   keeps its custom properties and the first screen is not restyled from the root down (one 160 ms frame, CPU 4x) */
:root { --rv-ease: cubic-bezier(.2,.7,.3,1); --rv-settle: linear(0,.72 60%,1.015 88%,1); }
#lesson { --kd-hold: var(--kd-hold-3); } #album { --kd-hold: var(--kd-hold-4); } #envelope { --kd-hold: var(--kd-hold-5); } #result { --kd-hold: var(--kd-hold-11); }
#formats { --kd-hold: var(--kd-hold-6); } #meri { --kd-hold: var(--kd-hold-7); } #faq { --kd-hold: var(--kd-hold-8); } #finale { --kd-hold: var(--kd-hold-9); }
@media (max-width: 374px) { html.js { --kd-hold-3: 684px; --kd-hold-4: 870px; --kd-hold-5: 561px; --kd-hold-6: 1074px; --kd-hold-7: 829px; --kd-hold-8: 794px; --kd-hold-9: 738px; --kd-hold-11: 618px; } }
@media (min-width: 375px) and (max-width: 419px) { html.js { --kd-hold-3: calc(365.6px + 66.32vw); --kd-hold-4: calc(815.6px + 14.74vw); --kd-hold-5: calc(315.9px + 74.74vw); --kd-hold-6: calc(1318.7px - 58.95vw); --kd-hold-7: calc(622.2px + 68.95vw); --kd-hold-8: calc(758.5px + 13.16vw); --kd-hold-9: calc(743.3px + 13.68vw); --kd-hold-11: calc(1176.4px - 127.89vw); } }
@media (min-width: 420px) and (max-width: 599px) { html.js { --kd-hold-3: calc(552.6px + 20.95vw); --kd-hold-4: calc(869.9px + 2.07vw); --kd-hold-5: calc(318.4px + 74.14vw); --kd-hold-6: calc(887.3px + 49.41vw); --kd-hold-7: calc(983.0px - 30.53vw); --kd-hold-8: calc(778.8px + 5.38vw); --kd-hold-9: calc(751.6px - 8.93vw); --kd-hold-11: calc(387.4px + 49.05vw); } }
@media (min-width: 600px) and (max-width: 767px) { html.js { --kd-hold-3: calc(704.4px + 12.81vw); --kd-hold-4: calc(795.6px + 14.49vw); --kd-hold-5: calc(318.5px + 74.13vw); --kd-hold-6: calc(870.4px + 59.34vw); --kd-hold-7: calc(723.4px + 12.81vw); --kd-hold-8: calc(734.4px + 12.81vw); --kd-hold-9: calc(623.1px + 12.51vw); --kd-hold-11: calc(552.2px + 25.57vw); } }
@media (min-width: 768px) and (max-width: 1023px) { html.js { --kd-hold-3: calc(704.0px + 12.86vw); --kd-hold-4: calc(1080.7px + 14.47vw); --kd-hold-5: calc(114.6px + 50.16vw); --kd-hold-6: calc(773.9px + 71.92vw); --kd-hold-7: calc(752.1px - 9.92vw); --kd-hold-8: calc(734.0px + 12.86vw); --kd-hold-9: calc(747.9px + 12.51vw); --kd-hold-11: calc(649.7px + 12.86vw); } }
@media (min-width: 1024px) and (max-width: 1199px) { html.js { --kd-hold-3: calc(563.0px + 11.20vw); --kd-hold-4: calc(1066.7px + 14.51vw); --kd-hold-5: calc(-35.3px + 43.83vw); --kd-hold-6: calc(365.4px + 37.43vw); --kd-hold-7: calc(587.5px + 14.46vw); --kd-hold-8: calc(621.0px + 11.20vw); --kd-hold-9: calc(436.2px + 14.17vw); --kd-hold-11: calc(641.2px - 11.66vw); } }
@media (min-width: 1200px) and (max-width: 1279px) { html.js { --kd-hold-3: calc(563.7px + 11.14vw); --kd-hold-4: calc(32.5px + 65.57vw); --kd-hold-5: calc(-335.5px + 68.86vw); --kd-hold-6: calc(-47.9px + 71.90vw); --kd-hold-7: calc(587.8px + 14.43vw); --kd-hold-8: calc(621.7px + 11.14vw); --kd-hold-9: calc(436.1px + 14.18vw); --kd-hold-11: calc(-367.4px + 72.41vw); } }
@media (min-width: 1280px) and (max-width: 1439px) { html.js { --kd-hold-3: calc(510.3px + 15.31vw); --kd-hold-4: calc(793.4px + 6.13vw); --kd-hold-5: calc(441.9px + 8.13vw); --kd-hold-6: calc(723.6px + 12.81vw); --kd-hold-7: calc(602.1px + 14.44vw); --kd-hold-8: calc(620.3px + 11.25vw); --kd-hold-9: calc(441.5px + 13.75vw); --kd-hold-11: calc(374.1px + 14.44vw); } }
@media (min-width: 1440px) { html.js { --kd-hold-3: min(738px, calc(670.5px + 4.19vw)); --kd-hold-4: min(885px, calc(850.1px + 2.19vw)); --kd-hold-5: min(566px, calc(498.6px + 4.19vw)); --kd-hold-6: min(915px, calc(846.9px + 4.25vw)); --kd-hold-7: min(817px, calc(748.8px + 4.25vw)); --kd-hold-8: min(789px, calc(722.0px + 4.19vw)); --kd-hold-9: 675px; --kd-hold-11: min(712px, calc(643.8px + 4.25vw)); } }
/* K1 · html.kd-late (app.js: after load and one idle tick). A block's background below the first screen loads only under
   it: html.kd-mo:not(.kd-late) .kd-bN .x { background-image: none; } (without JS there is no .kd-mo and the image is there). */

/* ---------- 5. type: one face per voice ---------- */
.kd-h1 { font: 500 30px/34px var(--font-display); letter-spacing: -.025em; }
/* the family's two-voice heading: Literata 500, the second part in italic in the world's ink (frame.css .lk-h2 em) */
.kd-h2 { font: 500 var(--fs-title)/var(--lh-title) var(--font-display); letter-spacing: var(--ls-title); }
:is(.kd-h1, .kd-h2) em { font-style: italic; font-weight: 400; color: var(--world-ink); }
.kd-lead { color: var(--ink-2); font: 400 17px/26px var(--font-body); max-width: 36ch; }
.kd-meta { color: var(--ink-2); font: 600 13px/18px var(--font-body); font-variant-numeric: tabular-nums; }
.kd-mary { font: italic 400 20px/28px var(--font-display); }
.kd-hand { color: var(--hand); font-family: var(--font-hand); font-variation-settings: var(--hand-axes); font-weight: 400; }
.kd-num { font: 500 40px/44px var(--font-display); letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; }
@media (min-width: 1024px) {
  .kd-h1 { font-size: clamp(42px, 4.17vw, 60px); line-height: 1.04; letter-spacing: -.035em; }
  .kd-lead { font-size: 18px; line-height: 28px; }
  .kd-mary { font-size: 24px; line-height: 32px; }
  .kd-num { font-size: 56px; line-height: 60px; }
}

/* ---------- 6. controls: the family's coral pill (.lk-cta, 54 · .lk-cta--s 48), one per screen; the paper pill; links; chips ---------- */
.lk-cta { min-height: var(--cta-h); font-size: 17px; white-space: nowrap; }
.lk-cta--s { min-height: var(--cta-h-s); }
.kd-button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--cta-h-s); padding: 0 22px; border: 1.5px solid var(--paper-ink-2);
  border-radius: 999px; background: transparent; color: var(--paper-ink); font: 700 16px/1.25 var(--font-body); text-decoration: none; white-space: nowrap; cursor: pointer; }
.kd-button:hover { background: color-mix(in srgb, var(--paper-ink) 6%, transparent); }
.lk-link { font-size: 17px; }
.kd-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--kd-control); border-radius: 999px;
  background: var(--raised); color: var(--ink); font: 600 15px/1 var(--font-body); cursor: pointer; white-space: nowrap; }
.kd-chip:hover { border-color: var(--ink-2); }
.kd-chip[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
/* a disclosure row: 48 px, «›» turns, no native marker */
.kd-dz { border-top: 1px solid var(--line); }
.kd-dz:last-child { border-bottom: 1px solid var(--line); }
.kd-dz > summary { display: flex; align-items: center; min-height: 48px; list-style: none; cursor: pointer; color: var(--link); font: 600 15px/20px var(--font-body); }
.kd-dz > summary::-webkit-details-marker { display: none; }
.kd-dz > summary .kd-chev { display: inline-block; margin-left: .3em; }
.kd-dz[open] > summary .kd-chev { transform: rotate(90deg); }
.kd-dz-in { display: grid; gap: 8px; padding: 2px 0 16px; color: var(--ink-2); font: 400 15px/22px var(--font-body); max-width: 60ch; }
@media (prefers-reduced-motion: no-preference) {
  .kd-button, .kd-chip { transition: transform var(--dur-press) ease-out, background-color var(--dur-ui) var(--ease-standard), border-color var(--dur-ui) var(--ease-standard); }
  .kd-button:active, .kd-chip:active { transform: scale(.98); }
  .kd-dz > summary .kd-chev { transition: transform var(--dur-ui) var(--ease-standard); }
  .kd-dz[open] .kd-dz-in { animation: kd-dz-in 260ms var(--ease-standard) both; }
}
@keyframes kd-dz-in { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- 7. header: the family's .lk-head (paper, sticky, hides on the way down): «english with Mary» on the left, the
   yellow pill on the right («Ціни ›» on a phone, «Урок 1 безкоштовно ›» from 1024, where the dock is gone), the sections between ---------- */
.kd-head .lk-head__in { gap: 12px; }
.kd-head .lk-mark { margin-right: auto; }
.kd-nav { display: none; }
.kd-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); font: 600 15px/1 var(--font-body); text-decoration: none; white-space: nowrap; }
.kd-nav a:hover { color: var(--ink); }
.kd-head-free { display: none; }
/* R13: the yellow pill is the family's canon and stays yellow; under the lamp it is the same yellow dimmed (lower light,
   less chroma, no glow), so the dock's coral is the loudest thing on the evening screen. On the dimmed yellow the dark
   label keeps 6.3:1. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kd-head { --yellow: #B8934A; --yellow-press: #A9863F; } }
:root[data-theme="dark"] .kd-head { --yellow: #B8934A; --yellow-press: #A9863F; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kd-head .lk-pill { box-shadow: none; } }
:root[data-theme="dark"] .kd-head .lk-pill { box-shadow: none; }
@media (min-width: 1024px) {
  .kd-head .lk-head__in { gap: 28px; }
  .kd-nav { display: flex; gap: 24px; }
  .kd-head-price { display: none; }
  .kd-head-free { display: inline-flex; }
}
/* f2 P5 · K1: an in-page link whose block or styles are not there yet answers at once: the link is aria-busy and a stroke
   of the family's hand-drawn arc (frame.css .lk-progress) runs along the header's lower edge until the page has landed.
   When the header steps away on the way down, the stroke stays in sight at the top of the screen (the trail's place). */
.kd-busy { position: absolute; left: 0; right: 0; bottom: -7px; height: 7px; overflow: hidden; pointer-events: none; opacity: 0; }
.kd-busy::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 36%; background: var(--marker);
  -webkit-mask: var(--lk-arc) 0 50% / 100% 100% no-repeat; mask: var(--lk-arc) 0 50% / 100% 100% no-repeat; }
.kd-busy[data-on] { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .kd-busy::before { width: 100%; opacity: .5; } }
@media (prefers-reduced-motion: no-preference) {
  .kd-busy[data-on]::before { animation: kd-busy 900ms var(--ease-standard) infinite; }
}
@keyframes kd-busy { from { transform: translateX(-100%); } to { transform: translateX(280%); } }

/* ---------- 8. dock (the family's .lk-dock on a phone: paper, its handle, the coral; from 1024 the header does its work) ---------- */
.kd-dock { display: grid; gap: 4px; padding-top: 14px; }
.kd-dock-line { text-align: center; color: var(--ink-2); font: 600 13px/18px var(--font-body); }
.kd-dock-row { display: flex; align-items: center; gap: 10px; }
.kd-dock .lk-cta { flex: 1 1 auto; min-width: 0; width: auto; }
.kd-dock-thumb { flex: none; display: block; width: 40px; height: 48px; padding: 3px 3px 0; border-radius: 1px; background: var(--print) var(--tex-paper); background-size: 120px;
  box-shadow: var(--print-rim), var(--kd-sh-print); }
.kd-dock-thumb img { display: block; width: 34px; height: 34px; object-fit: cover; }

/* ---------- 9. footer #kd-foot42 (the family's .lk-foot; one closing panel with the finale, COLOR.md 4.7) ----------
   The homepage's colophon: a hairline at the width of the words parts it from the finale, no second band and no line
   over the copyright. «Mary» keeps the header's arc, drawn and still (the kit's scroll-drawn arc never finishes at the
   page's end). The product's name is in the world's ink. Phone: one column, every link its own 44 px row. From 600: the
   team and the school side by side. From 1024: three columns over the container (mark and copyright, team, school). */
.kd-foot { position: relative; padding-top: 0; padding-bottom: max(32px, env(safe-area-inset-bottom)); }
.kd-foot .lk-foot__in { gap: 0; grid-template-areas: "rule" "brand" "help" "school" "copy"; }
.kd-foot .lk-foot__in::before { content: ""; grid-area: rule; height: 1px; margin-bottom: 28px; background: var(--line); }
.kd-foot-brand { grid-area: brand; margin-bottom: 24px; }
.kd-foot .kd-foot-col { display: grid; justify-items: start; align-content: start; gap: 0; }
.kd-foot-help { grid-area: help; margin-bottom: 20px; }
.kd-foot-school { grid-area: school; margin-bottom: 24px; }
.kd-foot .lk-foot__place { font-style: italic; }
.kd-foot .lk-foot__place em { color: var(--world-ink); }
.lk-foot.kd-foot .lk-mark strong::after { animation: none; }
.kd-foot .kd-foot-h { margin: 0 0 2px; color: var(--ink); font: 500 var(--fs-small)/1.4 var(--font-body); }
.kd-foot .kd-foot-list { display: grid; justify-items: start; gap: 0; }
.kd-foot .kd-foot-list a { min-height: 44px; }
.kd-foot a:not(.lk-mark):hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .22em; }
.kd-foot a:not(.lk-mark):focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: 4px; }
.kd-foot-go { display: inline-block; }
.kd-foot .lk-foot__copy { grid-area: copy; margin: 0; padding-top: 0; border-top: 0; color: var(--muted); text-wrap: balance; }
@media (prefers-reduced-motion: no-preference) {
  .kd-foot-go { transition: translate var(--dur-ui) var(--ease-out); }
  .kd-foot a:hover .kd-foot-go { translate: 3px 0; }
}
@media (min-width: 600px) {
  .kd-foot .lk-foot__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px;
    grid-template-areas: "rule rule" "brand brand" "help school" "copy copy"; }
  .kd-foot-help { margin-bottom: 24px; }
}
@media (min-width: 1024px) {
  .kd-foot { padding-bottom: max(48px, env(safe-area-inset-bottom)); }
  .kd-foot .lk-foot__in { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px;
    grid-template-areas: "rule rule rule" "brand help school" "copy help school"; }
  .kd-foot .lk-foot__in::before { margin-bottom: 44px; }
  .kd-foot-brand, .kd-foot-help, .kd-foot-school { margin-bottom: 0; }
  .kd-foot .kd-foot-h { margin-bottom: 10px; }
  .kd-foot .kd-foot-list { gap: 8px; }
  .kd-foot .kd-foot-list a { min-height: 24px; }
  .kd-foot .lk-foot__copy { align-self: end; padding-top: 24px; }
}

/* ---------- 10. paper things every block shares ---------- */
/* paper on the desk: Mary's note, the contact sheet, the learners' sheet, the review slips (light at night too) */
.kd-paper { background: var(--sheet-paper) var(--tex-paper); background-size: 160px; color: var(--paper-ink); border-radius: 1px; box-shadow: var(--print-rim), var(--kd-sh-sheet); }
.kd-note { padding: 11px 12px 13px; background: var(--sheet-paper) var(--tex-paper); background-size: 160px; border-radius: 1px; box-shadow: var(--print-rim), var(--kd-sh-sheet);
  color: var(--paper-ink); font: italic 500 15px/20px var(--font-display); rotate: 2.2deg; }
/* the album: cloth, a page with its tooth, a debossed nest the size of its print, black photo corners */
.kd-cloth { background: var(--cloth) var(--tex-cloth); background-size: 128px; box-shadow: inset 0 1px 0 rgb(255 255 255 / 9%), var(--kd-sh-album); }
.kd-page { background: var(--sheet) var(--tex-paper); background-size: 160px; }
.kd-slot { position: relative; display: block; border-radius: 2px; box-shadow: var(--deboss); }
/* K3 · the black-paper photo corner, one for the page (#first, #album, #finale): a triangle of black paper (::before) with
   its cut lit along the hypotenuse (1 px, the paper's lighter core), lifted off the print by a contact shadow that lies
   on the print in the page's one light (top left: every corner casts down-right, so the triangles are drawn, not rotated).
   A block sizes it with --cw and places it with --kd-corner-in (the offset over the print's corner, default -3px).
   The element carries only the shadow: a block's own background on .kd-corner would paint an unclipped square, so it is
   switched off here. */
.kd-corner { --cw: 18px; --kd-corner-in: -3px; position: absolute; z-index: 5; width: var(--cw); height: var(--cw); pointer-events: none;
  background: none !important; transform: scale(var(--cs, 1));
  filter: drop-shadow(0 .6px .4px rgb(var(--cast-rgb) / 42%)) drop-shadow(.7px 1.5px 1.4px rgb(var(--cast-rgb) / 24%)); }
.kd-corner::before { content: ""; position: absolute; inset: 0; clip-path: var(--kd-corner-cut);
  background: linear-gradient(var(--kd-corner-a), rgb(255 255 255 / 9%), transparent 34%, transparent calc(50% - 1.6px), rgb(255 255 255 / 30%) calc(50% - .9px), rgb(255 255 255 / 12%) calc(50% - .2px), transparent 50%) var(--corner); }
.kd-corner.tl { left: var(--kd-corner-in); top: var(--kd-corner-in); --kd-corner-cut: polygon(0 0, 100% 0, 0 100%); --kd-corner-a: 135deg; transform-origin: 0 0; }
.kd-corner.tr { right: var(--kd-corner-in); top: var(--kd-corner-in); --kd-corner-cut: polygon(0 0, 100% 0, 100% 100%); --kd-corner-a: 225deg; transform-origin: 100% 0; }
.kd-corner.br { right: var(--kd-corner-in); bottom: var(--kd-corner-in); --kd-corner-cut: polygon(100% 0, 100% 100%, 0 100%); --kd-corner-a: 315deg; transform-origin: 100% 100%; }
.kd-corner.bl { left: var(--kd-corner-in); bottom: var(--kd-corner-in); --kd-corner-cut: polygon(0 0, 100% 100%, 0 100%); --kd-corner-a: 45deg; transform-origin: 0 100%; }
@media (min-width: 1024px) { .kd-corner { --cw: 28px; } }
/* the print: Instax Square (paper 7 % at the sides and top, the foot under the window), a glossy window, the lamp's shadow.
   Size it with --pw (its width); --ph follows. Parts: .kd-print-win (the photo), .kd-print-gloss, .kd-print-foot with
   .kd-print-line (the learner's hand) and .kd-print-cap («Урок 3» · «приклад»). */
.kd-print { --pw: 208px; --ph: calc(var(--pw) * 1.194); position: relative; display: block; width: var(--pw); height: var(--ph); margin: 0; padding: 0; border: 0;
  border-radius: 2px; background: var(--print) var(--tex-paper); background-size: 160px; box-shadow: var(--print-rim), var(--kd-sh-print);
  color: var(--print-ink); text-align: left; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-appearance: none; appearance: none; }
.kd-print img { -webkit-user-drag: none; }
.kd-print-win { position: absolute; left: calc(var(--pw) * .07); top: calc(var(--pw) * .07); width: calc(var(--pw) * .86); height: calc(var(--pw) * .86);
  overflow: hidden; background: var(--milk); border-radius: 1px; }
.kd-print-win::after { content: ""; position: absolute; inset: 0; z-index: 6; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 18%); pointer-events: none; }
.kd-print-win img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transform-origin: 50% 0; }
.kd-print-gloss { position: absolute; inset: -14px; z-index: 5; pointer-events: none;
  background: linear-gradient(115deg, transparent 36%, rgb(255 255 255 / 10%) 45%, rgb(255 255 255 / 3%) 52%, transparent 60%); }
.kd-print-foot { position: absolute; left: calc(var(--pw) * .07); right: calc(var(--pw) * .07); bottom: 0; height: calc(var(--ph) - var(--pw) * .93);
  display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 5px; container-type: inline-size; }
.kd-print-line { display: block; color: var(--hand); font-family: var(--font-hand); font-variation-settings: var(--hand-axes); font-weight: 400; white-space: nowrap;
  font-size: 16px; font-size: clamp(13px, calc(196cqi / var(--len, 22)), 28px); line-height: 1.22; }
.kd-print-cap { display: flex; justify-content: space-between; gap: 8px; margin-top: 2px; color: var(--print-muted); font: 600 13px/16px var(--font-body);
  letter-spacing: .06em; text-transform: uppercase; }
/* the one blue marker under the corrected word (never on headings or marks) */
.kd-mk { position: relative; }
.kd-mk::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: -.12em; z-index: 2; height: .3em; background: var(--print-marker); opacity: .92;
  -webkit-mask: var(--marker-mask) center / 100% 100% no-repeat; mask: var(--marker-mask) center / 100% 100% no-repeat; transform-origin: left center; }

/* ---------- 11. motion of the shared parts ---------- */
@media (prefers-reduced-motion: no-preference) {
  .kd-corner { transition: opacity var(--dur-ui) var(--ease-standard), transform 550ms var(--kd-settle); }
}