/* Детский тест на IQ (/test-iq-dlya-detey): задания-картинки (.kd-*) и детские элементы лендинга (.kdl-*).
   Подключается только на странице теста. Цвета — токены сайта; яркие цвета картинок заданы в самих SVG. */

/* ---------- общее: картинки ---------- */
.kd-pic { display: block; width: 100%; height: auto; }
.kd-card-q { text-align: center; }
.kd-card-q .play-eyebrow { justify-content: center; }
.kd-prompt { margin: 10px auto 0; max-width: 560px; font: 700 clamp(20px, 4.6vw, 26px)/1.25 var(--font-head); color: var(--dark); letter-spacing: -.01em; }
.kd-stim { margin: 18px auto 0; max-width: 100%; }
.kd-cell { display: grid; place-items: center; background: #fff; border: 2px solid var(--line); border-radius: 14px; padding: 4px; aspect-ratio: 1; }
.kd-q { color: var(--coral); font: 700 clamp(22px, 6vw, 32px) var(--font-head); border: 2px dashed var(--coral); background: rgba(251, 114, 95, .06); }
.kd-arrow { font: 700 22px var(--font-head); color: var(--ink-soft); flex: none; }
.kd-bigpic { position: relative; width: min(220px, 60vw); margin: 0 auto; background: #fff; border: 2px solid var(--line); border-radius: 22px; padding: 12px; }
.kd-bigpic--sm { width: min(150px, 42vw); margin-top: 14px; }
.kd-bigpic--pyr { width: min(250px, 70vw); padding: 10px 16px; }
.kd-bigpic--scene { width: min(340px, 100%); padding: 8px; }
.kd-bigpic--ol { width: min(260px, 100%); }
.kd-bigpic--bear, .kd-bigpic--table { width: min(380px, 100%); padding: 10px 12px 8px; }
/* 11–12 лет, «Чего не хватает фигуре»: фигура с шестью лучами — крупнее, чтобы мелкие детали было видно */
.kd-bigpic.kd-bigpic--arms { width: min(260px, 74vw); padding: 8px; }
.kd-ask { position: absolute; right: -6px; top: -10px; min-width: 38px; height: 38px; padding: 0 8px; border-radius: 999px; background: var(--coral); color: #fff; font: 700 17px/38px var(--font-head); box-shadow: 0 6px 14px rgba(251, 114, 95, .35); white-space: nowrap; }
.kd-you { display: block; margin-top: 4px; color: var(--muted); font-size: 12.5px; }
.kd-land, .kd-bearpic, .kd-tablepic, .kd-olpic, .kd-pyr-side { display: block; width: 100%; height: auto; }

/* ---------- варианты ответа ---------- */
/* style.css задаёт .opt-btn svg {60×60} — картинкам заданий нужен размер по ширине кнопки */
.kd-card-q .opt-btn svg, .kdl-demo .opt-btn svg { width: 100%; height: auto; }
.kd-opts { display: grid; gap: 12px; margin: 22px auto 0; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 640px; }
.kd-opts--pics3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 480px; }
.kd-opts--pics6 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 480px; }
.kd-opts--rows { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 680px; }
.kd-opts--big { max-width: 680px; }                                   /* варианты-карточки «поверни картинку» */
.kd-opts--lr { max-width: 640px; }                                    /* «что видит мишка» 11–12: пары с подписями */
.lt-live .kd-opts .opt-btn, .kd-opts .opt-btn { min-width: 0; min-height: 64px; padding: 10px; border-radius: 18px; background: #fff; }
.kd-opts .opt-btn .kd-pic { max-width: 118px; margin: 0 auto; }
.kd-opts--rows .opt-btn { padding: 10px 8px; }
/* телефон: картинка задания и ВСЕ варианты должны помещаться на экране без прокрутки (проверка на 375×667) —
   простые варианты-картинки в один ряд по 4, карточки поворота и пары «слева/справа» — 2×2 */
@media (max-width: 640px) {
    .kd-opts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 420px; margin-top: 16px; }
    .kd-opts--pics3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 330px; }
    .kd-opts--pics6 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 330px; }
    .kd-opts--rows { grid-template-columns: 1fr; max-width: 380px; }
    .kd-opts--big, .kd-opts--lr { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 320px; }
    .lt-live .kd-opts .opt-btn, .kd-opts .opt-btn { min-height: 48px; padding: 5px; border-radius: 14px; }
    .kd-opts--rows .opt-btn { padding: 6px 8px; }
    .kd-opts--rows .kd-seq__c { max-width: 50px; }
    .kd-stim { margin-top: 12px; }
    .kd-prompt { margin-top: 8px; }
    .kd-bigpic { width: min(170px, 48vw); padding: 8px; border-radius: 18px; }
    .kd-bigpic--sm { width: min(110px, 30vw); margin-top: 10px; }
    .kd-bigpic--pyr { width: min(210px, 60vw); }
    .kd-bigpic--scene { width: min(250px, 100%); }
    .kd-bigpic--ol { width: min(230px, 100%); }
    .kd-bigpic--bear { width: min(250px, 100%); }
    .kd-bigpic--table { width: min(220px, 100%); }
    .kd-ask { min-width: 32px; height: 32px; font-size: 15px; line-height: 32px; }
}
@media (max-width: 480px) {
    .lt-live .play-card.kd-card-q { padding: 16px 12px 18px; }        /* шире поле для картинок и вариантов */
    /* варианты с мелкими деталями (половинка, машина, кусочек, тень, пирамидка, таблица, небылица из 4) — крупно, 2×2 */
    .kd-opts--k_half, .kd-opts--k_machine, .kd-opts--k_jigsaw, .kd-opts--k_shadow, .kd-opts--k_pyramid, .kd-opts--k_matrix, .kd-opts--k_nonsense.kd-opts--pics {
        grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 300px; gap: 10px;
    }
    .kd-opts--k_half .opt-btn .kd-pic, .kd-opts--k_machine .opt-btn .kd-pic, .kd-opts--k_jigsaw .opt-btn .kd-pic, .kd-opts--k_shadow .opt-btn .kd-pic,
    .kd-opts--k_pyramid .opt-btn .kd-pic, .kd-opts--k_matrix .opt-btn .kd-pic, .kd-opts--k_nonsense .opt-btn .kd-pic { max-width: 118px; }
    .kd-opts--k_half .kd-half { max-width: 74px; }
    /* стимул этих заданий чуть компактнее, чтобы крупные варианты поместились ближе к экрану */
    .kd-card--k_machine .kd-mrow { grid-template-columns: minmax(0, 64px) 16px minmax(0, 42px) 16px minmax(0, 64px); }
    .kd-card--k_machine .kd-machine-wrap { gap: 6px; }
    .kd-card--k_machine .kd-mrow + .kd-mrow { padding-top: 6px; }
    .kd-opts--k_machine .opt-btn .kd-pic { max-width: 104px; }
    .kd-card--k_houses .kd-zoo__a { width: 36px; padding: 2px; }
    .kd-card--k_houses .kd-zoo { margin-top: 8px; }
    .kd-card--k_matrix .kd-matrix--3 { width: min(220px, 100%); }
    .kd-card--k_matrix .kd-matrix--2 { width: min(180px, 52vw); }
    .kd-card--k_jigsaw .kd-bigpic--scene { width: min(210px, 100%); }
    .kd-card--k_half .kd-halfwrap { width: min(190px, 100%); }
}

/* ---------- ряд (продолжи ряд) ---------- */
.kd-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 620px; margin: 0 auto; }
.kd-row .kd-cell { width: clamp(54px, 16vw, 72px); }                  /* на телефоне длинный ряд переносится, картинки не мельчат */

/* ---------- таблица-матрица ---------- */
.kd-matrix { display: grid; gap: 6px; margin: 0 auto; padding: 6px; background: var(--dark); border-radius: 16px; }
.kd-matrix--2 { grid-template-columns: repeat(2, 1fr); width: min(250px, 60vw); }
.kd-matrix--3 { grid-template-columns: repeat(3, 1fr); width: min(300px, 100%); }
@media (max-width: 640px) { .kd-matrix--2 { width: min(210px, 56vw); } .kd-matrix--3 { width: min(250px, 100%); } }
.kd-mx { display: grid; place-items: center; aspect-ratio: 1; background: #fff; border-radius: 10px; padding: 4px; }
.kd-mx.kd-q { border: none; background: var(--bg-alt); }

/* ---------- половинка ---------- */
.kd-halfwrap { display: flex; align-items: stretch; justify-content: center; gap: 0; width: min(280px, 100%); margin: 0 auto; }
.kd-half { display: block; width: 100%; height: auto; }
.kd-halfwrap > .kd-half--l { flex: 1 1 0; min-width: 0; }
.kd-axis { flex: none; width: 0; border-left: 3px dashed var(--coral); margin: 0 6px; }
.kd-half--q { flex: 1 1 0; min-width: 0; display: grid; place-items: center; border: 2px dashed var(--line-strong); border-radius: 10px; color: var(--coral); font: 700 30px var(--font-head); background: rgba(255, 255, 255, .6); }
.kd-opts .kd-half { max-width: 96px; margin: 0 auto; }

/* ---------- полка (что изменилось / найди отличие) ---------- */
.kd-shelf { display: grid; gap: 8px; margin: 0 auto; padding: 10px; background: var(--bg-alt); border: 2px solid var(--line); border-radius: 18px; }
.kd-shelf--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(330px, 100%); }
.kd-shelf--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(400px, 100%); }
.kd-slot { display: grid; place-items: center; aspect-ratio: 1; background: #fff; border-radius: 12px; padding: 6px; }
.lt-live .kd-shelf .opt-btn.kd-slot, .kd-shelf .opt-btn.kd-slot { min-height: 0; padding: 6px; border-radius: 12px; border-width: 2px; }
.kd-shelf--sm { width: min(300px, 100%); }
/* «Что изменилось»: шторка на 1,5 с между показом полки и вопросом */
.kd-curtain { position: relative; width: min(360px, 100%); height: 210px; margin: 0 auto; overflow: hidden; border: 2px solid var(--line); border-radius: 18px; background: var(--bg-alt); }
.kd-curtain i { position: absolute; top: 0; bottom: 0; left: 0; width: 50%; background: repeating-linear-gradient(90deg, var(--coral) 0 18px, var(--rust) 18px 22px); animation: kdCurtL .5s ease-out both; }
.kd-curtain i + i { left: auto; right: 0; animation-name: kdCurtR; }
@keyframes kdCurtL { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes kdCurtR { from { transform: translateX(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .kd-curtain i { animation: none; } }
/* «Найди отличие»: «Было» и «Стало» всегда рядом (видны обе без прокрутки); только на самых узких экранах — друг под другом,
   иначе клетки «Стало» стали бы меньше 44 px */
.kd-diff { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; grid-auto-flow: column; column-gap: 22px; row-gap: 4px; justify-items: center; max-width: 660px; margin: 0 auto; }
.kd-diff__lab { font: 700 12px var(--font-head); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.kd-diff .kd-shelf--sm { width: 100%; max-width: 300px; }
@media (max-width: 640px) {
    .kd-diff { column-gap: 6px; margin-inline: -8px; }
    .kd-diff .kd-shelf--sm { padding: 4px; gap: 3px; border-radius: 14px; }
    .kd-diff .kd-slot, .lt-live .kd-diff .kd-shelf .opt-btn.kd-slot { padding: 3px; border-radius: 9px; }
}
/* узкие телефоны: «Было» и «Стало» остаются рядом (сравнивать без прокрутки) — карточка задания шире за счёт полей
   контейнера, полочки плотнее; клетки 9 картинок ≈ 44 px на 320 */
@media (max-width: 400px) {
    .lt-live .play-card.kd-card--k_diff { margin-inline: -12px; padding-inline: 4px; }
    .kd-diff { margin-inline: 0; column-gap: 5px; }
    .kd-diff .kd-shelf--sm { padding: 2px; gap: 2px; border-width: 1px; border-radius: 12px; }
    .kd-diff .kd-slot, .lt-live .kd-diff .kd-shelf .opt-btn.kd-slot { padding: 2px; border-radius: 8px; }
}

/* ---------- волшебная машина ---------- */
.kd-machine-wrap { display: grid; gap: 10px; justify-items: center; }
.kd-mrow { display: grid; grid-template-columns: minmax(0, 100px) 22px minmax(0, 70px) 22px minmax(0, 100px); align-items: center; gap: 6px; }
@media (max-width: 640px) { .kd-mrow { grid-template-columns: minmax(0, 86px) 18px minmax(0, 54px) 18px minmax(0, 86px); gap: 4px; } .kd-mcell { padding: 2px; } }
.kd-mrow + .kd-mrow { padding-top: 10px; border-top: 1px dashed var(--line-strong); }
.kd-mrow:last-child { border-top: 2px solid var(--line-strong); }
.kd-mcell { width: 100%; }
.kd-machine { width: 100%; }

/* ---------- аналогии ---------- */
.kd-analogy { display: grid; gap: 10px; justify-items: center; }
.kd-an-row { display: grid; grid-template-columns: minmax(0, 96px) 30px minmax(0, 96px); align-items: center; gap: 8px; }
.kd-an-row + .kd-an-row { padding-top: 10px; border-top: 2px dashed var(--line-strong); }

/* телефон: шапка сайта не липкая, поэтому общий отступ .lt-mount при прокрутке (90 px под липкую шапку) здесь не
   нужен — задание встаёт к самому верху экрана. На 320×568 так весь объёмный кубик (27 клеток) виден во время показа. */
@media (max-width: 767px) { #kidstest.lt-mount { scroll-margin-top: 6px; } }

/* ---------- кубик ---------- */
.kd-cubebox { display: grid; justify-items: center; gap: 12px; }
.kd-cube { display: block; height: auto; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; }
.kd-cube--one { width: min(340px, 100%); }
.kd-cubectl { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.kd-st { stroke: rgba(0, 0, 0, .18); stroke-width: 1.5; transition: fill .12s, stroke .12s, stroke-width .12s; }
.kd-cf--l .kd-st { filter: brightness(.9); }
.kd-cf--r .kd-st { filter: brightness(.8); }
.kd-cf--off .kd-st { filter: brightness(.7); }
.kd-st.on { fill: #fff !important; stroke: var(--coral); stroke-width: 8; filter: none !important; }
.kd-hit { cursor: default; }
.kd-cube.is-input .kd-hit { cursor: pointer; }
.kd-cubestatus { min-height: 26px; font: 700 16px var(--font-head); color: var(--ink-soft); }
.kd-cubestatus.go { color: var(--teal-deep); }
.kd-dots { display: flex; gap: 8px; justify-content: center; }
.kd-dots i { width: 14px; height: 14px; border-radius: 999px; background: var(--line); border: 2px solid var(--line-strong); }
.kd-dots i.on { background: var(--teal); border-color: var(--teal-deep); }
.kd-undo { min-height: 44px; padding: 10px 18px; border-radius: 999px; border: 2px solid var(--line-strong); background: #fff; color: var(--dark); font: 700 14px var(--font-body); cursor: pointer; }
.kd-undo:disabled { opacity: .45; cursor: default; }

/* ---------- тень, пирамидка, поворот ---------- */
.kd-sil { max-width: 110px; }
.kd-turn { display: flex; align-items: center; justify-content: center; gap: 12px; }
.kd-turn > .kd-card { width: min(170px, 42vw); min-width: 0; }
.kd-turnarrow { display: grid; justify-items: center; flex: none; width: 66px; color: var(--coral); font: 700 13px var(--font-head); }
.kd-turnarrow svg { width: 60px; height: auto; }
.kd-opts .kd-card { max-width: 150px; margin: 0 auto; }
@media (max-width: 640px) { .kd-turn > .kd-card { width: min(124px, 36vw); } .kd-opts .kd-card { max-width: 128px; } }

/* ---------- весы ---------- */
.kd-scales { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 12px; }
.kd-scale { width: min(210px, calc(50% - 6px)); height: auto; background: #fff; border: 2px solid var(--line); border-radius: 16px; padding: 2px; }

/* ---------- кто где живёт ---------- */
.kd-street { display: flex; justify-content: center; gap: 8px; max-width: 100%; }
.kd-street .kd-cell { flex: 0 1 86px; min-width: 0; }
.kd-clues { display: grid; gap: 8px; width: min(380px, 100%); margin: 14px auto 0; }
.kd-clue { display: grid; grid-template-columns: 50px 30px minmax(0, 1fr) 50px; align-items: center; gap: 8px; padding: 6px 12px; background: #fff; border: 2px solid var(--line); border-radius: 14px; text-align: left; }
.kd-clue__pic { display: block; }
.kd-clue__mark { width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; }
.kd-clue__mark svg { width: 20px; height: 20px; }
.kd-clue__mark.yes { background: var(--teal-deep); }
.kd-clue__mark.no { background: var(--coral); }
.kd-clue__txt { font: 700 15px var(--font-body); color: var(--dark); }
.kd-opts--k_houses { max-width: 480px; }
/* компьютер: зверёк-вопрос справа от домиков и подсказок — задание целиком помещается на экране */
@media (min-width: 641px) {
    .kd-houses--who { display: grid; grid-template-columns: minmax(0, 380px) auto; column-gap: 26px; justify-content: center; align-items: center; }
    .kd-houses--who .kd-street, .kd-houses--who .kd-clues { grid-column: 1; }
    .kd-houses--who .kd-clues { margin-top: 12px; }
    .kd-houses--who .kd-bigpic--who { grid-column: 2; grid-row: 1 / span 2; margin: 0; width: 130px; }
}

/* ---------- найди две одинаковые ---------- */
.kd-twins { display: grid; gap: 8px; margin: 0 auto; }
.kd-twins--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(360px, 100%); }
.kd-twins--8 { grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(440px, 100%); }
.kd-twins--9 { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(360px, 100%); }
.lt-live .kd-twins .opt-btn.kd-twin, .kd-twins .opt-btn.kd-twin { min-height: 0; aspect-ratio: 1; padding: 6px; border-radius: 14px; background: #fff; }
.kd-twins .opt-btn.kd-twin.sel { border-color: var(--teal-deep); background: rgba(45, 178, 188, .16); box-shadow: 0 0 0 3px rgba(45, 178, 188, .25); }
.kd-pairhint { margin-top: 10px; min-height: 22px; color: var(--muted); font-size: 14px; }

/* ---------- у кого что ---------- */
.kd-holds { display: grid; gap: 10px; margin: 0 auto; }
.kd-holds--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(390px, 100%); }
.kd-holds--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(500px, 100%); }
.kd-holds--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); width: min(600px, 100%); }
@media (max-width: 560px) { .kd-holds--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(260px, 100%); } .kd-holds--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kd-hold { display: grid; justify-items: center; gap: 4px; padding: 8px 6px; background: #fff; border: 2px solid var(--line); border-radius: 16px; }
.kd-hold__who { width: 88%; }
.kd-hold__what { width: 62%; padding: 4px; border-radius: 12px; background: var(--bg-alt); }

/* ---------- ряды картинок в вариантах (по порядку, мишка) ---------- */
.kd-seq { display: flex; align-items: center; justify-content: center; gap: 2px; width: 100%; }
.kd-seq__c { flex: 1 1 0; min-width: 0; max-width: 64px; }
.kd-seq__ar { font-style: normal; font: 700 16px var(--font-head); color: var(--muted); flex: none; }
.kd-seq--row { gap: 6px; }
.kd-seq--lr { gap: 8px; }
.kd-seq--lr .kd-seq__c { max-width: 70px; }
.kd-lr { display: grid; justify-items: center; gap: 2px; }
.kd-lr__pic { display: block; width: 100%; }
.kd-lr__cap { font: 700 12px/1.2 var(--font-body); color: var(--ink-soft); }

/* ---------- чего не хватает ---------- */
.kd-part { display: grid; justify-items: center; gap: 2px; width: 100%; }
.kd-part .kd-pic { max-width: 84px; }
.kd-cap { font: 700 13px var(--font-body); color: var(--ink-soft); }

/* ---------- спрятанные контуры ---------- */
.kd-ol path, .kd-ol circle, .kd-ol ellipse, .kd-ol rect, .kd-ol polygon { fill: none !important; stroke: var(--dark) !important; stroke-width: 2.6 !important; opacity: 1 !important; }

/* ---------- корзинка ---------- */
.kd-basket { display: grid; justify-items: center; gap: 8px; }
/* длительность анимации = показ одной картинки (задаётся инлайном из it.seq.stepMs); целиком видна с 10% до 85% */
.kd-basket__item { width: min(150px, 42vw); height: min(150px, 42vw); animation: kdDrop 2s ease-in both; }
.kd-basket__bin { width: min(210px, 60vw); }
.kd-basket__n { font: 700 14px var(--font-head); color: var(--muted); }
@keyframes kdDrop { 0% { transform: translateY(-24px) scale(.9); opacity: 0; } 10% { transform: translateY(0) scale(1); opacity: 1; } 85% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(70px) scale(.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .kd-basket__item { animation: none; } }
/* 11–12 лет — «Фигуры по очереди»: фигура появляется в рамке и гаснет, без корзинки */
.kd-basket--plain .kd-basket__item { box-sizing: border-box; padding: 14px; background: #fff; border: 2px solid var(--line); border-radius: 22px; animation-name: kdShowFig; animation-timing-function: ease-out; }
@keyframes kdShowFig { 0% { transform: scale(.9); opacity: 0; } 10% { transform: scale(1); opacity: 1; } 85% { transform: scale(1); opacity: 1; } 100% { transform: scale(.96); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .kd-basket--plain .kd-basket__item { animation: none; } }

/* ---------- экраны: возраст, предупреждение, показ ---------- */
.kd-age h2 { margin-top: 10px; }
.kd-age__lead { max-width: 480px; margin: 10px auto 0; color: var(--ink-soft); line-height: 1.55; }
.kd-age__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; max-width: 560px; margin: 22px auto 0; }
.kd-agebtn { display: grid; place-items: center; gap: 0; min-height: 84px; padding: 10px 4px; border: 3px solid var(--line-strong); border-radius: 20px; background: #fff; color: var(--dark); cursor: pointer; transition: transform .12s, border-color .15s, background .15s; }
.kd-agebtn b { font: 700 34px/1 var(--font-head); }
.kd-agebtn span { font-size: 13px; color: var(--ink-soft); }
.kd-agebtn:hover { transform: translateY(-2px); border-color: var(--dark); }
.kd-agebtn.on { border-color: var(--teal-deep); background: rgba(45, 178, 188, .16); box-shadow: 0 0 0 4px rgba(45, 178, 188, .2); }
@media (max-width: 560px) { .kd-age__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kd-rules { display: grid; gap: 8px; max-width: 470px; margin: 20px auto 0; padding: 0; list-style: none; text-align: left; }
.kd-rules li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; color: var(--ink-soft); font-size: 15px; line-height: 1.45; }
.kd-rules li .iq-ic, .kd-rules li svg { width: 24px; height: 24px; color: var(--teal-deep); }
.kd-go[disabled] { opacity: .45; cursor: default; transform: none; box-shadow: none; }
.kd-agehint { margin-top: 10px; min-height: 20px; color: var(--muted); font-size: 13.5px; }
.kd-warnpic { width: 88px; margin: 0 auto 4px; }
.kd-flash { margin-top: 12px; }
.kd-flash .iq-flashbar { margin-top: 16px; }

/* ---------- результат ---------- */
.kd-res .lt-eyebrow { color: var(--teal-deep); }
.kd-res__iq { margin-top: 10px; font: 700 clamp(46px, 11vw, 72px)/1 var(--font-head); color: var(--dark); letter-spacing: -.03em; }
.kd-res__iq small { display: block; margin-top: 6px; font: 600 14px var(--font-body); color: var(--muted); letter-spacing: 0; }
.kd-res__band { display: inline-block; margin-top: 12px; padding: 7px 16px; border-radius: 999px; background: var(--dark); color: var(--cream); font: 700 15px var(--font-head); }
.kd-res__meta { margin-top: 10px; color: var(--ink-soft); font-size: 14.5px; }
.kd-res .ey-block { max-width: 560px; }
.kd-sph { margin-top: 14px; text-align: left; }
.kd-sph__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kd-sph__head b { font: 700 16px var(--font-head); color: var(--dark); }
.kd-sph__head .ey-cat-score { margin-left: auto; }
.kd-sph p { margin: 6px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.kd-list { margin: 0; padding-left: 20px; color: var(--ink-soft); font-size: 14.5px; line-height: 1.55; text-align: left; }
.kd-list li { margin-top: 7px; }
.kd-list b { color: var(--dark); }
.kd-tipcard { margin-top: 12px; padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--line); text-align: left; }
.kd-tipcard h4 { margin: 0; font: 700 16px var(--font-head); color: var(--dark); }
.kd-tipcard p { margin: 6px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.kd-tipcard ul { margin: 8px 0 0; padding-left: 18px; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.kd-tipcard li { margin-top: 4px; }
.kd-tipcard--up { border-left: 5px solid var(--teal); }
.kd-tipcard--grow { border-left: 5px solid var(--coral); }
.kd-res .ey-block > .ey-interp + .kd-tipcard { margin-top: 10px; }
.kd-trainer { display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: center; max-width: 560px; margin: 26px auto 0; padding: 20px; border-radius: 22px; background: var(--dark); color: var(--cream); text-align: left; box-shadow: 0 18px 36px rgba(32, 33, 63, .22); }
.kd-trainer__ic { width: 72px; height: 72px; border-radius: 20px; background: var(--teal); display: grid; place-items: center; color: var(--dark); }
.kd-trainer__ic svg { width: 44px; height: 44px; }
.kd-trainer h3 { margin: 0; font: 700 20px var(--font-head); color: #fff; }
.kd-trainer p { margin: 6px 0 0; color: rgba(255, 251, 231, .82); font-size: 14.5px; line-height: 1.5; }
.kd-trainer .kd-trainer__btn { grid-column: 1 / -1; display: block; text-align: center; min-height: 48px; padding: 14px 18px; border-radius: 999px; background: var(--coral); color: #fff; font: 700 16px var(--font-body); text-decoration: none; }
.kd-trainer .kd-trainer__btn:hover { background: var(--rust); }
@media (max-width: 480px) { .kd-trainer { grid-template-columns: 1fr; justify-items: start; } .kd-trainer__ic { width: 56px; height: 56px; } }
.kd-review { max-width: 560px; margin: 22px auto 0; text-align: left; }
/* спойлер разбора: своя стрелка (display:flex у summary убирает стандартный маркер) и вид кнопки */
.kd-review summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; gap: 12px; padding: 10px 16px; list-style: none; border: 2px solid var(--line-strong); border-radius: 16px; background: #fff; font: 700 15px var(--font-head); color: var(--dark); }
.kd-review summary::-webkit-details-marker { display: none; }
.kd-review summary::before { content: ''; flex: none; width: 9px; height: 9px; margin-left: 2px; border-right: 3px solid var(--teal-deep); border-bottom: 3px solid var(--teal-deep); transform: rotate(-45deg); transition: transform .15s; }
.kd-review[open] summary::before { transform: rotate(45deg); }
.kd-review summary span { flex: 1; }
.kd-review summary em { font: 600 13px var(--font-body); font-style: normal; color: var(--teal-deep); }
.kd-review[open] summary em { display: none; }
.kd-review summary:hover { border-color: var(--dark); }
.kd-res .lt-retake, .kd-retake-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 12px 18px; }
.kd-retake-link { display: flex; margin-top: 12px; text-decoration: none; }
.kd-review ol { margin: 6px 0 0; padding-left: 0; list-style: none; }
.kd-review li { display: grid; grid-template-columns: 26px 1fr; gap: 8px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
.kd-review li b { color: var(--dark); }
.kd-mark { width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; color: #fff; font: 700 13px var(--font-head); }
.kd-mark.ok { background: var(--teal-deep); }
.kd-mark.no { background: var(--coral); }
.kd-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.kd-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border-radius: 999px; border: 2px solid var(--line-strong); color: var(--dark); font: 700 14px var(--font-body); text-decoration: none; background: #fff; }
.kd-links a:hover { border-color: var(--dark); }
/* «А теперь — тест для вас» (IQNEXT, 27.09) — под разбором, той же ширины, что и разбор */
.kd-next { max-width: 640px; margin: 0 auto; }

/* =================== ЛЕНДИНГ (детский вид) =================== */
.kdl-hero { --tl-glow: rgba(251, 114, 95, .16); background: radial-gradient(120% 90% at 85% 20%, rgba(251, 114, 95, .16), transparent 60%), radial-gradient(80% 60% at 10% 100%, rgba(45, 178, 188, .12), transparent 60%); }
.kdl-hero .tl-fact { background: #fff; }
.kdl-art { position: relative; width: min(420px, 100%); margin-top: 60px; }
.kdl-art__card { position: relative; padding: 18px 18px 16px; background: #fff; border: 3px solid var(--dark); border-radius: 28px; box-shadow: 0 26px 50px rgba(32, 33, 63, .16); transform: rotate(-2deg); }
.kdl-art__q { font: 700 17px var(--font-head); color: var(--dark); text-align: center; }
.kdl-art__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.kdl-art__row span { display: grid; place-items: center; aspect-ratio: 1; background: var(--bg); border: 2px solid var(--line); border-radius: 14px; padding: 4px; }
.kdl-art__row span.hit { border-color: var(--teal-deep); background: rgba(45, 178, 188, .14); }
.kdl-art__cube { position: absolute; left: -64px; bottom: -58px; width: 110px; transform: rotate(-8deg); filter: drop-shadow(0 14px 18px rgba(32, 33, 63, .22)); }
.kdl-art__cube svg { width: 100%; height: auto; display: block; }
.kdl-owl { position: absolute; right: -30px; top: -104px; width: 104px; transform: rotate(6deg); filter: drop-shadow(0 12px 16px rgba(32, 33, 63, .18)); }
.kdl-owl svg { width: 100%; height: auto; display: block; }
.kdl-bubble { position: absolute; right: 84px; top: -72px; padding: 8px 14px; border-radius: 18px 18px 4px 18px; background: var(--dark); color: var(--cream); font: 700 14px var(--font-head); white-space: nowrap; }
.kdl-hero .tl-hero__badge { background: var(--coral); color: #fff; right: 4%; bottom: -30px; transform: rotate(3deg); letter-spacing: .04em; }
.kdl-hero h1 .accent { display: inline-block; }
.kdl-art__row--6 { grid-template-columns: repeat(6, 1fr); gap: 6px; }
.kdl-art__row--6 span { border-radius: 12px; }
.kdl-art__row span.q { color: var(--coral); font: 700 26px var(--font-head); border: 2px dashed var(--coral); background: rgba(251, 114, 95, .06); }
.kdl-art__row + .kdl-art__row { padding-top: 12px; border-top: 2px dashed var(--line); }
.kdl-art__row .kd-pic { width: 100%; height: auto; }
.kdl-eyebrow { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.kdl-eyebrow .section-eyebrow { margin: 0; }
.kdl-mascot-inline { display: none; }
@media (max-width: 767px) {
    .kdl-mascot-inline { display: block; flex: none; width: 40px; }
    .kdl-mascot-inline svg { display: block; width: 100%; height: auto; }
    .kdl-eyebrow { margin-top: 10px; }
}
@media (max-width: 767px) and (max-height: 600px) { .kdl-mascot-inline { width: 32px; } }
/* 320–374: три плашки фактов в одну строку */
@media (max-width: 374px) {
    .kdl-hero .tl-facts { gap: 6px; }
    .kdl-hero .tl-fact { gap: 5px; padding: 6px 9px; }
    .kdl-hero .tl-fact b { font-size: 15px; }
    .kdl-hero .tl-fact span { font-size: 11.5px; }
}
/* 1000–1199: колонка картинки у самого края экрана (у .container на десктопе нет боковых полей) — сова не выходит за край */
@media (max-width: 1199px) { .kdl-owl { right: 0; } .kdl-bubble { right: 110px; } }
/* ≤999: картинка под текстом — кубик и плашка должны уместиться в хиро (у .tl-hero overflow:hidden) */
@media (max-width: 999px) {
    .kdl-hero .tl-hero__art { padding-bottom: 44px; }
    .kdl-owl { right: -8px; }
    .kdl-art__cube { left: -122px; bottom: -26px; }                    /* слева от карточки: варианты ответа остаются видны */
    .kdl-hero .tl-hero__badge { bottom: 6px; }
}

.kdl-cards .tl-card__art { background: var(--bg); margin: 12px 12px 0; border-radius: 18px; padding: 12px; }
.kdl-cards .tl-card__art svg { max-width: 150px; }
.kdl-cards .tl-card { border-radius: 26px; }
.kdl-cards .tl-card__tag { background: var(--coral); }
.kdl-sphere-ex { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; max-width: 170px; }
.kdl-sphere-ex span { display: grid; place-items: center; aspect-ratio: 1; background: #fff; border: 2px solid var(--line); border-radius: 10px; padding: 3px; }
.kdl-sphere-ex span.q { color: var(--coral); font: 700 22px var(--font-head); border: 2px dashed var(--coral); }
.kdl-sphere-ex span.q .kd-pic { opacity: 1; }
.kdl-sphere-ex span.rot .kd-pic { transform: rotate(180deg); }
.kdl-sphere-ex span.wide { grid-column: 1 / -1; aspect-ratio: auto; border: 0; background: none; padding: 0; }
.kdl-sphere-ex span.wide .kd-pic { width: auto; height: 68px; }
.kdl-sphere-ex .kd-pic { width: 100%; height: auto; }
.kdl-cards .tl-card__art { min-height: 96px; }
.kdl-cta { background: linear-gradient(135deg, rgba(251, 114, 95, .24) 0%, var(--bg) 55%, rgba(45, 178, 188, .22) 100%); }

.kdl-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 26px; counter-reset: kdl; }
.kdl-step { position: relative; padding: 22px 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow-soft); }
.kdl-step::before { counter-increment: kdl; content: counter(kdl); display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: var(--teal); color: var(--dark); font: 700 20px var(--font-head); }
.kdl-step h3 { margin-top: 12px; font: 700 18px var(--font-head); }
.kdl-step__pic { position: absolute; right: 14px; top: 12px; width: 58px; height: 58px; padding: 6px; border-radius: 18px; background: var(--bg); border: 2px solid var(--line); transform: rotate(4deg); }
.kdl-step:nth-child(even) .kdl-step__pic { transform: rotate(-4deg); background: rgba(45, 178, 188, .12); }
.kdl-step__pic svg { display: block; width: 100%; height: auto; }
.kdl-step:nth-child(1)::before { background: var(--teal); }
.kdl-step:nth-child(2)::before { background: var(--coral); color: #fff; }
.kdl-step:nth-child(3)::before { background: var(--dark); color: var(--cream); }
.kdl-step:nth-child(4)::before { background: var(--teal-deep); color: #fff; }
.kdl-step p { margin-top: 6px; color: var(--ink-soft); font-size: 14.5px; line-height: 1.5; }
@media (max-width: 999px) { .kdl-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .kdl-steps { grid-template-columns: 1fr; } }

.kdl-demo .tl-demo__task { border-radius: 28px; }
.kdl-demo__task { position: relative; }
.kdl-demo__owl { position: absolute; right: -14px; top: -58px; width: 74px; transform: rotate(6deg); filter: drop-shadow(0 10px 14px rgba(32, 33, 63, .16)); pointer-events: none; }
.kdl-demo__owl svg { display: block; width: 100%; height: auto; }
.kdl-demo__say { position: absolute; right: 70px; top: 10px; padding: 6px 12px; border-radius: 16px 16px 4px 16px; background: var(--coral); color: #fff; font: 700 13px var(--font-head); white-space: nowrap; transform: rotate(-6deg); }
/* до 1240 у колонки примера нет запаса справа (у .container на десктопе нет боковых полей) — сова не выходит за край */
@media (max-width: 1239px) { .kdl-demo__owl { right: 0; } }
@media (max-width: 999px) { .kdl-demo .tl-demo__task { margin-top: 44px; } .kdl-demo__owl { right: 0; top: -54px; width: 64px; } .kdl-demo__say { right: 60px; } }
.kdl-cta__owl { position: absolute; left: clamp(10px, 4vw, 48px); bottom: -10px; width: clamp(70px, 9vw, 116px); transform: rotate(-6deg); z-index: 1; pointer-events: none; }
.kdl-cta__owl svg { display: block; width: 100%; height: auto; }
@media (max-width: 767px) { .kdl-cta__owl { position: relative; left: auto; bottom: auto; margin: 0 auto 6px; width: 72px; } }
.kdl-demo .kd-row { flex-wrap: nowrap; gap: 5px; }
.kdl-demo .kd-row .kd-cell { flex: 1 1 0; min-width: 0; width: auto; max-width: 58px; padding: 3px; border-radius: 10px; }
.kdl-demo .kd-row .kd-q { font-size: 20px; }
.kdl-demo .kd-opts { max-width: 380px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.kdl-demo .kd-opts .opt-btn { min-height: 0; padding: 6px; }
.kdl-demo .opt-btn.tl-ok { border-color: var(--teal-deep); background: rgba(45, 178, 188, .14); }
.kdl-demo .opt-btn.tl-no { border-color: var(--coral); background: rgba(251, 114, 95, .1); }
.kdl-ages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.kdl-age { padding: 20px; border-radius: 26px; background: #fff; border: 2px solid var(--line); box-shadow: var(--shadow-soft); }
.kdl-age--1 { background: rgba(45, 178, 188, .13); border-color: rgba(45, 178, 188, .35); }
.kdl-age--2 { background: rgba(251, 114, 95, .11); border-color: rgba(251, 114, 95, .35); }
.kdl-age--3 { background: var(--bg-alt); border-color: var(--line-strong); }
.kdl-age__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kdl-age__stars { display: flex; gap: 2px; }
.kdl-age__stars svg { width: 30px; height: 30px; display: block; }
.kdl-age b { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--dark); color: var(--cream); font: 700 15px var(--font-head); }
.kdl-age p { margin-top: 10px; color: var(--ink-soft); font-size: 14.5px; line-height: 1.5; }
@media (max-width: 760px) { .kdl-ages { grid-template-columns: 1fr; } }
.kdl-safe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.kdl-safe span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 14px; color: var(--ink-soft); }
.kdl-safe .iq-ic { width: 18px; height: 18px; color: var(--teal-deep); }
@media (max-width: 767px) and (max-height: 720px) { .kdl-hero .tl-hero__cta { padding-bottom: 26px; } }   /* кнопка на низких телефонах — на 10+ px выше сгиба */
/* высокие телефоны: в свободное место первого экрана — пример задания с совой (на низких — только сова у надзаголовка) */
.kdl-mob-art { display: none; }
@media (max-width: 767px) and (min-height: 740px) {
    .kdl-mob-art { display: block; position: relative; width: min(330px, 100%); margin: 26px auto 0; }
    .kdl-mob-art__card { padding: 14px 12px 12px; background: #fff; border: 3px solid var(--dark); border-radius: 22px; box-shadow: 0 18px 36px rgba(32, 33, 63, .14); transform: rotate(-2deg); }
    .kdl-mob-art__card .kdl-art__q { font-size: 15px; }
    .kdl-mob-art__card .kdl-art__row { margin-top: 10px; gap: 5px; }
    .kdl-mob-art__card .kdl-art__row span.q { font-size: 20px; }
    .kdl-mob-art__owl { position: absolute; right: -8px; top: -58px; width: 62px; transform: rotate(6deg); }
    .kdl-mob-art__owl svg { display: block; width: 100%; height: auto; }
    .kdl-mascot-inline { display: none; }
}
/* телефоны средней высоты (360×640, 375×667): компактный пример — одна строка картинок и маленькая сова */
@media (max-width: 767px) and (min-height: 600px) and (max-height: 739px) {
    .kdl-mob-art { display: block; position: relative; width: min(300px, 100%); margin: 14px auto 0; }
    .kdl-mob-art__card { padding: 10px 10px 9px; background: #fff; border: 3px solid var(--dark); border-radius: 18px; box-shadow: 0 14px 28px rgba(32, 33, 63, .13); transform: rotate(-2deg); }
    .kdl-mob-art__card .kdl-art__q { font-size: 13.5px; text-align: left; padding-right: 44px; }
    .kdl-mob-art__card .kdl-art__row { margin-top: 7px; gap: 4px; }
    .kdl-mob-art__card .kdl-art__row span { border-radius: 9px; padding: 2px; }
    .kdl-mob-art__card .kdl-art__row span.q { font-size: 17px; }
    .kdl-mob-art__owl { position: absolute; right: -4px; top: -26px; width: 46px; transform: rotate(6deg); }
    .kdl-mob-art__owl svg { display: block; width: 100%; height: auto; }
    .kdl-mascot-inline { display: none; }
}

@media (max-width: 640px) {
    .kd-street .kd-cell { flex-basis: 58px; }
    .kd-street + .kd-clues + .kd-bigpic--who.kd-bigpic--sm { width: min(76px, 24vw); }
    .kd-dots { gap: 6px; }
    .kd-dots i { width: 12px; height: 12px; }
    .kd-undo { padding: 10px 14px; }
    .kd-clues { gap: 6px; margin-top: 10px; }
    .kd-clue { grid-template-columns: 38px 24px minmax(0, 1fr) 38px; gap: 8px; padding: 3px 10px; border-radius: 12px; }
    .kd-clue__mark { width: 24px; height: 24px; }
    .kd-clue__mark svg { width: 16px; height: 16px; }
    .kd-clue__txt { font-size: 14px; }
    .kd-bigpic--who.kd-bigpic--sm { width: min(86px, 26vw); padding: 6px; }
    .kd-bigpic--bear { width: min(210px, 100%); padding: 6px 8px 4px; }
    .kd-bigpic--table { width: min(250px, 100%); }
    .kd-opts--rows .kd-seq__c { max-width: 58px; }
    .kd-opts--rows .opt-btn { padding: 4px 8px; }
    .kd-seq--lr .kd-seq__c { max-width: 52px; }
    .kd-opts--big .kd-card, .kd-opts--big .opt-btn .kd-pic { max-width: 150px; }
    .kd-opts--big { max-width: 340px; }
    .lt-live .kd-opts--big .opt-btn { padding: 4px; }
}

/* ---------- кто где живёт: все зверьки и правило ---------- */
.kd-zoo { display: flex; justify-content: center; gap: 6px; margin: 10px auto 0; }
.kd-zoo__a { display: block; width: 46px; padding: 3px; background: #fff; border: 2px solid var(--line); border-radius: 12px; }
.kd-hrule { margin-top: 6px; font: 700 15px var(--font-body); color: var(--teal-deep); }
@media (max-width: 640px) { .kd-zoo__a { width: 40px; } .kd-hrule { font-size: 14px; } }
@media (min-width: 641px) {
    .kd-houses--who > * { grid-column: 1; }
    .kd-houses--who > .kd-bigpic--who { grid-column: 2; grid-row: 1 / span 4; }
}

/* ---------- мелочи результата и экрана возраста ---------- */
.kd-nw { white-space: nowrap; }
.kd-note { margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; text-align: left; }
.kd-sph p.kd-sph__span { margin-top: 4px; color: var(--dark); }
.kd-age .kd-agehint { margin-top: 14px; }
.kd-age__go { margin-top: 8px; }

/* ---------- где шарик (стаканчики) ---------- */
/* сцена показа и вопрос — одна и та же сетка без зазоров: сдвиг стаканчика на translateX(100%) = ровно одна клетка */
.kd-cups { display: grid; margin: 0 auto; width: min(420px, 100%); }
.kd-cups--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kd-cups--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(480px, 100%); }
.kd-cupstage { padding: 17% 0 5%; }
.kd-cupstage .kd-cups { border-bottom: 8px solid var(--bg-alt); border-radius: 0 0 10px 10px; }
.kd-cupcell { position: relative; }
.kd-cup { position: relative; z-index: 2; display: block; padding: 0 9%; will-change: transform; }
.kd-cup.is-top { z-index: 3; }
.kd-cupball { position: absolute; z-index: 1; left: 31%; right: 31%; bottom: 4%; }
.kd-cupcount { min-height: 22px; margin-top: 4px; color: var(--muted); font: 700 14px var(--font-head); }
.kd-cups .kd-cupsvg { width: 100%; height: auto; }
.lt-live .kd-cups .opt-btn.kd-cupbtn, .kd-cups .opt-btn.kd-cupbtn { min-width: 0; min-height: 0; margin: 0 4px; padding: 8px 7%; border-radius: 16px; background: #fff; }
/* ---------- «Как отвечать» (перед первым заданием) ---------- */
.kd-howto__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 640px; margin: 18px auto 0; }
.kd-howto__card { display: grid; justify-items: center; align-content: start; gap: 8px; padding: 14px 10px 12px; background: #fff; border: 2px solid var(--line); border-radius: 18px; }
.kd-howto__card p { margin: 0; font-size: 14.5px; line-height: 1.4; color: var(--ink-soft); }
.kd-howto__pics { position: relative; display: grid; grid-template-columns: repeat(3, 40px); gap: 6px; height: 64px; align-items: start; }
.kd-howto__pics span { display: block; padding: 3px; border: 2px solid var(--line); border-radius: 10px; background: #fff; }
.kd-howto__pics span.t { animation: kdHowPick 3s ease-in-out infinite; }
.kd-howto__hand { position: absolute; left: 50%; top: 22px; width: 26px; margin-left: -4px; animation: kdHowHand 3s ease-in-out infinite; }
@keyframes kdHowHand { 0%, 15% { transform: translate(34px, 18px); } 45%, 60% { transform: translate(0, 0); } 52% { transform: translate(0, 3px) scale(.92); } 100% { transform: translate(34px, 18px); } }
@keyframes kdHowPick { 0%, 50% { border-color: var(--line); background: #fff; } 55%, 90% { border-color: var(--teal-deep); background: rgba(45, 178, 188, .16); } 100% { border-color: var(--line); background: #fff; } }
.kd-howto__cube { display: grid; grid-template-columns: repeat(3, 18px); gap: 4px; padding: 6px; height: 64px; align-content: center; background: var(--dark); border-radius: 10px; }
.kd-howto__cube i { width: 18px; height: 18px; border-radius: 4px; background: var(--teal); }
.kd-howto__cube i:nth-child(2n) { background: var(--coral); }
.kd-howto__cube i.s1, .kd-howto__cube i.s2, .kd-howto__cube i.s3 { animation: kdHowLit 3s linear infinite; }
.kd-howto__cube i.s2 { animation-delay: .6s; }
.kd-howto__cube i.s3 { animation-delay: 1.2s; }
@keyframes kdHowLit { 0%, 18% { background: #fff; box-shadow: 0 0 0 2px var(--coral); } 22%, 100% { box-shadow: none; } }
.kd-howto__clock { display: grid; place-items: center; height: 64px; color: var(--teal-deep); }
.kd-howto__clock svg { width: 46px; height: 46px; }
@media (max-width: 560px) {
    .kd-howto__row { grid-template-columns: 1fr; gap: 8px; }
    .kd-howto__card { grid-template-columns: 108px minmax(0, 1fr); justify-items: start; align-items: center; column-gap: 10px; text-align: left; padding: 10px 12px; }
    .kd-howto__card > div { justify-self: center; transform: scale(.76); margin-inline: -16px; }
}
@media (prefers-reduced-motion: reduce) { .kd-howto__hand, .kd-howto__pics span.t, .kd-howto__cube i { animation: none; } }
/* ---------- где что лежало (память) ---------- */
.kd-where { display: grid; justify-items: center; gap: 12px; }
.kd-where .kd-bigpic--sm { margin-top: 0; }
.kd-wgrid { display: grid; gap: 8px; margin: 0 auto; padding: 10px; background: var(--bg-alt); border: 2px solid var(--line); border-radius: 18px; }
.kd-wgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(330px, 100%); }
.kd-wgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(400px, 100%); }
.kd-wcell { display: grid; place-items: center; aspect-ratio: 1; background: #fff; border-radius: 12px; padding: 8px; }
.lt-live .kd-wgrid .opt-btn.kd-wcell, .kd-wgrid .opt-btn.kd-wcell { min-width: 0; min-height: 0; padding: 6px; border-radius: 12px; border-width: 2px; }
@media (max-width: 640px) { .kd-wgrid { gap: 6px; padding: 8px; } .kd-wcell { padding: 5px; } }

/* ---------- ошибка в узоре (11–12 лет) ---------- */
.kd-pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: min(340px, 100%); margin: 0 auto; padding: 8px; background: var(--dark); border-radius: 16px; }
.kd-pcell { display: grid; place-items: center; aspect-ratio: 1; background: #fff; border-radius: 10px; padding: 8px; }
.lt-live .kd-pgrid .opt-btn.kd-pcell, .kd-pgrid .opt-btn.kd-pcell { min-width: 0; min-height: 0; padding: 7px; border-radius: 10px; border-width: 2px; }
@media (max-width: 640px) { .kd-pgrid { gap: 4px; padding: 6px; } .kd-pcell, .lt-live .kd-pgrid .opt-btn.kd-pcell { padding: 5px; } }

/* ---------- варианты-фигуры (11–12 лет: лишняя фигура, аналогия фигур) ---------- */
@media (max-width: 480px) {
    .kd-opts--fig { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 280px; gap: 10px; }
    .kd-opts--fig .opt-btn .kd-pic { max-width: 110px; }
}

/* ---------- профиль: задания сферы ---------- */
.kd-sph p.kd-sph__tasks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.kd-sph__tasks span { display: inline-flex; align-items: center; min-height: 26px; padding: 3px 10px; border-radius: 999px; font: 600 12.5px/1.2 var(--font-body); border: 1px solid; }
.kd-sph__tasks span.ok { color: var(--teal-deep); border-color: rgba(45, 178, 188, .45); background: rgba(45, 178, 188, .1); }
.kd-sph__tasks span.no { color: var(--rust); border-color: rgba(251, 114, 95, .45); background: rgba(251, 114, 95, .08); }

/* ---------- разбор заданий (IQREVIEW) в отчёте детского теста ---------- */
.kd-rv { max-width: 640px; margin: 26px auto 0; }
.kd-rv .iqr-stim { max-width: 100%; }
.kd-rv .iqr-stim > * + * { margin-top: 8px; }
.kd-rv-cap { margin: 10px 0 6px; font: 700 12px/1.3 var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: left; }
.kd-rv .iqr-stim > .kd-rv-cap:first-child { margin-top: 0; }
.kd-rv .kd-bigpic { width: min(170px, 50%); margin-inline: 0; }
.kd-rv .kd-bigpic--scene, .kd-rv .kd-bigpic--bear, .kd-rv .kd-bigpic--table { width: min(300px, 100%); }
.kd-rv .kd-bigpic--sm { width: min(96px, 30%); margin-top: 0; }
.kd-rv .kd-row, .kd-rv .kd-analogy, .kd-rv .kd-machine-wrap, .kd-rv .kd-matrix, .kd-rv .kd-halfwrap, .kd-rv .kd-turn, .kd-rv .kd-scales, .kd-rv .kd-street, .kd-rv .kd-shelf, .kd-rv .kd-wgrid, .kd-rv .kd-pgrid, .kd-rv .kd-twins, .kd-rv .kd-holds { margin-inline: 0; justify-content: flex-start; }
.kd-rv .kd-row .kd-cell { width: clamp(44px, 12vw, 58px); }
.kd-rv .kd-houses--who { display: block; }
.kd-rv .kd-diff { margin-inline: 0; max-width: 520px; }
.kd-rv .iqr-opts--pic .iqr-opt .kd-pic, .kd-rv .iqr-opts--pic .iqr-opt .kd-half { max-width: 96px; margin: 0 auto; }
.kd-rv .iqr-opt .kd-seq__c { max-width: 52px; }
.kd-rv .iqr-opt .kd-card { max-width: 120px; }
/* отметки прямо на картинке: верный ответ — бирюзовая рамка, ответ ребёнка — коралловая */
.kd-rv .iqr-stim .is-right { box-shadow: 0 0 0 3px var(--teal-deep); background: rgba(45, 178, 188, .14); }
.kd-rv .iqr-stim .is-picked { box-shadow: 0 0 0 3px var(--coral); background: rgba(251, 114, 95, .12); }
.kd-rv-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; color: var(--ink-soft); font-size: 13px; }
.kd-rv-key { display: inline-block; width: 16px; height: 16px; border-radius: 5px; background: #fff; }
.kd-rv-key.is-right { box-shadow: 0 0 0 3px var(--teal-deep); }
.kd-rv-key.is-picked { box-shadow: 0 0 0 3px var(--coral); margin-left: 6px; }
.kd-rv-cell { position: relative; display: grid; place-items: center; aspect-ratio: 1; padding: 6px; background: #fff; border: 2px solid var(--line); border-radius: 14px; }
.kd-rv-cell > i, .kd-rv-seq .kd-cell > i { position: absolute; left: 5px; top: 3px; font: 700 11px var(--font-head); font-style: normal; color: var(--muted); }
.kd-rv-seq .kd-cell { position: relative; }
.kd-rv-trace { display: block; width: min(260px, 100%); height: auto; }
.kd-rv-cup { display: grid; justify-items: center; gap: 2px; width: 100%; }
.kd-rv-cup .kd-cupsvg { width: 100%; max-width: 64px; height: auto; }
.kd-rv-cup b { font: 700 12.5px var(--font-head); color: var(--dark); }
.kd-rv-cuberow { display: grid; grid-template-columns: repeat(2, minmax(0, 170px)); gap: 12px; }
.kd-rv-cuberow + .kd-rv-cuberow { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line-strong); }
.kd-rv-cuberow .kd-rv-cap { margin-top: 0; }
.kd-cubenum { display: block; width: 100%; height: auto; }
.kd-rv-note { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
@media (max-width: 480px) {
    .kd-rv .kd-bigpic { width: min(150px, 60%); }
    .kd-rv-cuberow { gap: 8px; }
    .kd-rv .kd-diff { column-gap: 8px; }
}

/* 11–12 лет: фигура с лучами в разборе — чуть крупнее обычной картинки условия */
.kd-rv .kd-bigpic.kd-bigpic--arms { width: min(210px, 72%); }
.kd-rv .kd-cap { font-size: 12px; overflow-wrap: normal; word-break: normal; -webkit-hyphens: auto; hyphens: auto; }

/* ---------- 11–12 лет: «Следи за фишкой», «Вид по стрелке», «Кусочек схемы», «Найди отличие» (знаки) ---------- */
/* фишки выше стаканчика — ромб под поднятой фишкой виден так же, как шарик */
.kd-cups--fig .kd-cupball { left: 30%; right: 30%; bottom: 8%; }
/* «Вид по стрелке» — обратная задача: условие — вид постройки, варианты — планы 3×3 со стрелкой и глазом */
.kd-vp-plan { display: block; width: 100%; height: auto; }
.kd-vp-opt { display: block; width: 100%; }
.kd-rv .iqr-opts--pic:has(.kd-vp-opt) { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }