/* Раздел «Как устроена программа». Вкладки на радиокнопках, без JS. Анимация: только transform/opacity (translate, scale, opacity).
   Иллюстрации считаются в единице --u (4px, на десктопе 5px). Конечное состояние описано в базовых стилях, поэтому
   при prefers-reduced-motion курсор стоит у отметки без движения. Новая вкладка: см. HOWIT.md. */
.howit { --u: .25rem; --d: 9s; position: relative; }
@media (min-width: 960px) { .howit { --u: .3125rem; } }

/* радиокнопки: скрыты визуально, остаются в фокусе и слушают стрелки */
.howit__r { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }

/* вкладки-пилюли */
.howit__tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-2); margin-bottom: var(--s-2); }
.howit__tabs label {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: var(--btn-h); padding: var(--s-2) var(--s-3); border-radius: var(--r-inner); cursor: pointer;
  background: #EFE8E0; color: var(--c-ink); font-size: var(--ty-body); line-height: var(--ty-btn-lh);
  transition: background-color var(--t-fast), color var(--t-fast);
}
.howit__tabs label:hover { background: #E6DDD3; }
@media (min-width: 960px) {
  .howit__tabs { grid-template-columns: repeat(4, 1fr); gap: var(--s-3); margin-bottom: var(--s-3); }
  .howit__tabs label { min-height: 72px; font-size: var(--ty-h4); font-weight: var(--ty-fw-med); border-radius: var(--r-card); }
}
.howit__r:nth-of-type(1):checked ~ .howit__tabs > :nth-child(1),
.howit__r:nth-of-type(2):checked ~ .howit__tabs > :nth-child(2),
.howit__r:nth-of-type(3):checked ~ .howit__tabs > :nth-child(3),
.howit__r:nth-of-type(4):checked ~ .howit__tabs > :nth-child(4),
.howit__r:nth-of-type(5):checked ~ .howit__tabs > :nth-child(5) { background: var(--c-ink); color: #fff; }
.howit__r:nth-of-type(1):focus-visible ~ .howit__tabs > :nth-child(1),
.howit__r:nth-of-type(2):focus-visible ~ .howit__tabs > :nth-child(2),
.howit__r:nth-of-type(3):focus-visible ~ .howit__tabs > :nth-child(3),
.howit__r:nth-of-type(4):focus-visible ~ .howit__tabs > :nth-child(4),
.howit__r:nth-of-type(5):focus-visible ~ .howit__tabs > :nth-child(5) { outline: 3px solid var(--c-focus); outline-offset: 3px; }

/* панели: показана только отмеченная */
.howit__panel { display: none; }
.howit__r:nth-of-type(1):checked ~ .howit__panels > :nth-child(1),
.howit__r:nth-of-type(2):checked ~ .howit__panels > :nth-child(2),
.howit__r:nth-of-type(3):checked ~ .howit__panels > :nth-child(3),
.howit__r:nth-of-type(4):checked ~ .howit__panels > :nth-child(4),
.howit__r:nth-of-type(5):checked ~ .howit__panels > :nth-child(5) { display: grid; }
.howit__panel { grid-template-columns: 1fr; gap: var(--s-2); padding: var(--s-2); background: #F4EFE9; border-radius: var(--r-card); }
.howit__text { padding: var(--s-5) var(--s-4) var(--s-2); align-self: center; }
.howit__text p { margin-top: var(--ty-gap-h3-text); color: var(--c-ink-2); font-size: var(--ty-body); line-height: var(--ty-body-lh); }
.howit__points { margin-top: var(--s-4); display: grid; gap: var(--s-2); }
.howit__points li { position: relative; padding-left: var(--s-5); line-height: var(--ty-body-lh); }
.howit__points li::before { content: ""; position: absolute; left: 0; top: .8em; width: 12px; height: 2px; border-radius: 2px; background: var(--c-accent); }
@media (min-width: 960px) {
  .howit__panel { grid-template-columns: 1fr 1fr; gap: var(--s-5); padding: var(--s-5); border-radius: var(--r-panel); }
  .howit__text { padding: var(--s-5) var(--s-5) var(--s-5) var(--s-7); }
}

/* сцена справа: мягкий градиент без фото */
.howit__stage { position: relative; display: grid; place-items: center; min-height: 300px; padding: var(--s-4) var(--s-4) var(--s-7); border-radius: var(--r-card); overflow: hidden;
  background: radial-gradient(70% 60% at 85% 10%, rgba(255,255,255,.55), transparent 70%), linear-gradient(150deg, #FFD9C4, #FFC2A3); }
@media (min-width: 960px) { .howit__stage { min-height: 460px; padding: var(--s-6) var(--s-6) var(--s-7); } }
.howit__panel--rec .howit__stage { background: radial-gradient(70% 60% at 15% 10%, rgba(255,255,255,.5), transparent 70%), linear-gradient(150deg, #CFEBDD, #E6E0F2); }
.howit__panel--chat .howit__stage { background: radial-gradient(70% 60% at 85% 90%, rgba(255,255,255,.5), transparent 70%), linear-gradient(150deg, #E6E0F2, #FFD9C4); }
.howit__panel--own .howit__stage { background: radial-gradient(70% 60% at 85% 10%, rgba(255,255,255,.5), transparent 70%), linear-gradient(150deg, #FBEBB5, #CFEBDD); }
.howit__cap { position: absolute; left: var(--s-3); bottom: var(--s-3); max-width: calc(100% - 2 * var(--s-3)); padding: var(--s-1) var(--s-3); border-radius: 999px; background: rgba(255,255,255,.7); color: var(--c-ink-2); font-size: var(--ty-small); line-height: var(--ty-small-lh); }

/* окно интерфейса */
.mk { width: min(100%, calc(var(--u) * 98)); font-size: calc(var(--u) * 3.3); line-height: 1.3; color: var(--c-ink); }
.mk__win { background: #fff; border-radius: calc(var(--u) * 4); box-shadow: inset 0 1px 0 #fff, inset 0 -12px 22px -18px rgba(200,90,60,.35), 0 calc(var(--u) * 5) calc(var(--u) * 9) calc(var(--u) * -5) rgba(120,60,40,.4); }
.mk__bar { display: flex; gap: calc(var(--u) * 1.5); align-items: center; height: calc(var(--u) * 7); padding: 0 calc(var(--u) * 3); border-bottom: 1px solid var(--c-line); }
.mk__bar i { width: calc(var(--u) * 2); height: calc(var(--u) * 2); border-radius: 50%; background: var(--c-peach-2); }
.mk__body { position: relative; height: calc(var(--u) * 48); margin: calc(var(--u) * 3) calc(var(--u) * 3.5); container-type: inline-size; }
.mk__body > * { position: absolute; margin: 0; }
.mk__msg { max-width: 82%; padding: calc(var(--u) * 1.2) calc(var(--u) * 2.2); border-radius: calc(var(--u) * 2.5); font-size: calc(var(--u) * 3.1); }
.mk__msg--them { left: 0; background: #F3EEE8; }
.mk__msg--me { right: 0; background: var(--c-peach); }
.mk__people { left: 0; top: 0; display: flex; align-items: center; gap: calc(var(--u) * 1.5); height: calc(var(--u) * 5.5); }
.mk__people b { width: calc(var(--u) * 5); height: calc(var(--u) * 5); border-radius: 50%; background: var(--card-2); }
.mk__people b:nth-child(2n) { background: var(--card-3); }
.mk__people b:nth-child(3n) { background: var(--card-5); }
.mk__people b:first-child { background: var(--c-peach-2); box-shadow: 0 0 0 calc(var(--u) * .5) var(--c-accent); }
.mk__people span { margin-left: auto; padding: 0 calc(var(--u) * 2); border-radius: 99px; background: var(--c-mint); color: var(--c-mint-ink); font-size: calc(var(--u) * 2.8); }
.mk__people--s { position: static; height: auto; }
.mk__people--s b { width: calc(var(--u) * 4); height: calc(var(--u) * 4); }
.mk__chathead { left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; height: calc(var(--u) * 5.5); font-weight: 500; }
.mk__input { left: 0; right: 0; top: calc(var(--u) * 41); height: calc(var(--u) * 7); display: flex; align-items: center; padding: 0 calc(var(--u) * 2.5); border: 1px solid var(--c-line); border-radius: 99px; background: #fff; overflow: hidden; font-size: calc(var(--u) * 3.1); }
.mk__ph { color: var(--c-ink-3); }
.mk__typed { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 calc(var(--u) * 2.5); background: #fff; overflow: hidden; opacity: 0; white-space: nowrap; }
.mk__typed i { position: absolute; inset: 0; background: #fff; translate: 101% 0; }
.mk__typed--static { right: calc(var(--u) * 8.5); }
.mk__send { position: absolute; right: calc(var(--u) * 1); top: calc(var(--u) * 1); width: calc(var(--u) * 5); height: calc(var(--u) * 5); border-radius: 50%; background: var(--c-accent); color: #fff; display: grid; place-items: center; }
.mk__send svg { width: 55%; height: 55%; }
/* позиции сообщений */
.live-a { top: calc(var(--u) * 7); }
.live-q { top: calc(var(--u) * 17.5); }
.live-r { top: calc(var(--u) * 29); background: var(--c-mint); }
.chat-a { top: calc(var(--u) * 7); }
.chat-q { top: calc(var(--u) * 19); padding-right: calc(var(--u) * 6); }
.chat-r { top: calc(var(--u) * 27.5); background: var(--c-mint); }
.chat-r small { margin-right: .5em; font-size: inherit; font-weight: 600; }
.chat-q u { position: absolute; right: calc(var(--u) * 2); bottom: calc(var(--u) * 1.6); width: calc(var(--u) * 1.5); height: calc(var(--u) * 2.8); border: solid var(--c-mint-ink); border-width: 0 calc(var(--u) * .45) calc(var(--u) * .45) 0; rotate: 45deg; }
/* плеер */
.mk__video { left: 0; right: 0; top: 0; height: calc(var(--u) * 21); border-radius: calc(var(--u) * 3); background: linear-gradient(135deg, var(--card-1), var(--card-2)); display: grid; place-items: center; }
.mk__play { width: 0; height: 0; margin-left: calc(var(--u) * 1); border-style: solid; border-width: calc(var(--u) * 3) 0 calc(var(--u) * 3) calc(var(--u) * 5); border-color: transparent transparent transparent var(--c-ink); }
.mk__track { left: 0; right: 0; top: calc(var(--u) * 24); height: calc(var(--u) * 1.2); border-radius: 9px; background: #EFE8E0; }
.mk__fill, .mk__knob { position: absolute; left: 0; }
.mk__fill { top: 0; width: 100%; height: 100%; border-radius: 9px; background: var(--c-accent); transform-origin: 0 50%; scale: .68 1; }
.mk__knob { top: 50%; width: calc(var(--u) * 3.2); height: calc(var(--u) * 3.2); margin-top: calc(var(--u) * -1.6); border-radius: 50%; background: #fff; border: calc(var(--u) * .5) solid var(--c-accent); translate: calc(68cqw - var(--u) * 1.6) 0; }
.mk__lines { left: 0; top: calc(var(--u) * 28); display: grid; gap: calc(var(--u) * 1); width: 55%; }
.mk__lines i { height: calc(var(--u) * 1.4); border-radius: 9px; background: #F0E9E1; }
.mk__lines i + i { width: 60%; }
.mk__btn { left: 0; top: calc(var(--u) * 33); width: 58%; height: calc(var(--u) * 8); display: grid; place-items: center; border-radius: 99px; background: var(--c-accent); color: #fff; font-size: calc(var(--u) * 3); white-space: nowrap; }
.mk__status, .mk__done { left: 0; display: flex; align-items: center; gap: calc(var(--u) * 2); font-size: calc(var(--u) * 3); color: var(--c-mint-ink); }
.mk__status { top: calc(var(--u) * 43.5); }
.mk__status em, .mk__done em { flex: none; width: calc(var(--u) * 1); height: calc(var(--u) * 5); border-radius: 9px; background: var(--c-mint-ink); }
/* вопрос с вариантами */
.mk__q { left: 0; right: 0; top: 0; }
.mk__opt { left: 0; right: 0; height: calc(var(--u) * 7.5); display: flex; align-items: center; gap: calc(var(--u) * 2.5); padding-left: calc(var(--u) * 2.5); border: 1px solid var(--c-line); border-radius: calc(var(--u) * 2.5); overflow: hidden; }
.o1 { top: calc(var(--u) * 10.5); } .o2 { top: calc(var(--u) * 19); } .o3 { top: calc(var(--u) * 27.5); }
.mk__opt i { position: relative; flex: none; width: calc(var(--u) * 3.5); height: calc(var(--u) * 3.5); border: calc(var(--u) * .4) solid var(--c-ink-2); border-radius: 50%; }
.mk__opt s { position: absolute; inset: calc(var(--u) * .5); border-radius: 50%; background: var(--c-accent); }
.mk__fill2 { position: absolute; inset: 0; background: var(--c-peach); }
.mk__opt > :not(.mk__fill2) { position: relative; }
.o2 { border-color: var(--c-accent); }
.mk__done { top: calc(var(--u) * 38); }
/* курсор и кольцо клика: стоят у отметки в конечном состоянии */
.mk__cur { left: 0; top: 0; width: calc(var(--u) * 5.5); height: calc(var(--u) * 5.5); margin: calc(var(--u) * -.9) 0 0 calc(var(--u) * -.9); filter: drop-shadow(0 1px 1.5px rgba(42,38,35,.35)); translate: var(--p4); }
.mk__ring { left: 0; top: 0; width: calc(var(--u) * 6); height: calc(var(--u) * 6); margin: calc(var(--u) * -3) 0 0 calc(var(--u) * -3); border: calc(var(--u) * .5) solid var(--c-coral); border-radius: 50%; opacity: 0; translate: var(--rp); }
.howit__panel--own .mk__body { --p0: 72cqw calc(var(--u) * 44); --p1: calc(var(--u) * 4.25) calc(var(--u) * 22.8); --p2: var(--p1); --p3: var(--p1); --p4: 34cqw calc(var(--u) * 44); --rp: var(--p1); }
.howit__panel--live .mk__body { --p0: 78cqw calc(var(--u) * 6); --p1: 14cqw calc(var(--u) * 44.5); --p2: var(--p1); --p3: var(--p1); --p4: 56cqw calc(var(--u) * 37); --rp: var(--p1); }
.howit__panel--rec .mk__body { --p0: 82cqw calc(var(--u) * 12); --p1: 38cqw calc(var(--u) * 24.6); --p2: 68cqw calc(var(--u) * 24.6); --p3: 22cqw calc(var(--u) * 37); --p4: 80cqw calc(var(--u) * 40); --rp: var(--p3); }
.howit__panel--chat .mk__body { --p0: 70cqw calc(var(--u) * 10); --p1: calc(100cqw - var(--u) * 3.5) calc(var(--u) * 44.5); --p2: var(--p1); --p3: var(--p1); --p4: 72cqw calc(var(--u) * 24); --rp: var(--p1); }

/* движение: 9 секунд, цикл; курсор у отметки задерживается около 1,5 с */
@media (prefers-reduced-motion: no-preference) {
  .howit__panel .mk__cur { animation: cm var(--d) infinite, cc1 var(--d) infinite; }
  .howit__panel--rec .mk__cur { animation-name: cm, cc2; }
  .howit__panel .mk__ring { animation: rg30 var(--d) infinite; }
  .howit__panel--rec .mk__ring { animation-name: rg59; }
  .howit__panel--own .mk__fill2 { animation: o31 var(--d) infinite; }
  .howit__panel--own .mk__opt s { animation: d31 var(--d) infinite; }
  .howit__panel--own .mk__done { animation: s44 var(--d) infinite; }
  .howit__panel--live .mk__typed { animation: tl var(--d) infinite; }
  .howit__panel--live .mk__typed i { animation: cv var(--d) steps(26, end) infinite; }
  .howit__panel--live .live-q { animation: s57 var(--d) infinite; }
  .howit__panel--live .live-r { animation: s66 var(--d) infinite; }
  .howit__panel--chat .mk__typed--static { animation: tt var(--d) infinite; }
  .howit__panel--chat .chat-q { animation: s33 var(--d) infinite; }
  .howit__panel--chat .chat-q u { animation: s54 var(--d) infinite; }
  .howit__panel--chat .chat-r { animation: s44 var(--d) infinite; }
  .howit__panel--rec .mk__knob { animation: kn var(--d) infinite; }
  .howit__panel--rec .mk__fill { animation: kf var(--d) infinite; }
  .howit__panel--rec .mk__btn { animation: bp var(--d) infinite; }
  .howit__panel--rec .mk__status { animation: s64 var(--d) infinite; }
}
@keyframes cm { 0% { translate: var(--p0); opacity: 0; } 6% { translate: var(--p0); opacity: 1; } 28%, 34% { translate: var(--p1); } 50% { translate: var(--p2); } 58%, 64% { translate: var(--p3); } 72%, 96% { translate: var(--p4); opacity: 1; } 99%, 100% { translate: var(--p4); opacity: 0; } }
@keyframes cc1 { 0%, 28% { scale: 1; } 31% { scale: .86; } 34%, 100% { scale: 1; } }
@keyframes cc2 { 0%, 28% { scale: 1; } 30% { scale: .86; } 52% { scale: .86; } 54%, 58% { scale: 1; } 60.5% { scale: .86; } 63%, 100% { scale: 1; } }
@keyframes rg30 { 0%, 30% { opacity: 0; scale: .3; } 31% { opacity: .9; scale: .4; } 41%, 100% { opacity: 0; scale: 1.6; } }
@keyframes rg59 { 0%, 60% { opacity: 0; scale: .3; } 61% { opacity: .9; scale: .4; } 71%, 100% { opacity: 0; scale: 1.6; } }
@keyframes o31 { 0%, 30% { opacity: 0; } 36%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes d31 { 0%, 30% { scale: 0; } 36%, 96% { scale: 1; } 100% { scale: 0; } }
@keyframes s33 { 0%, 33% { opacity: 0; translate: 0 6px; } 39%, 96% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 6px; } }
@keyframes s44 { 0%, 44% { opacity: 0; translate: 0 6px; } 50%, 96% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 6px; } }
@keyframes s54 { 0%, 54% { opacity: 0; translate: 0 6px; } 58%, 96% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 6px; } }
@keyframes s57 { 0%, 57% { opacity: 0; translate: 0 6px; } 62%, 96% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 6px; } }
@keyframes s64 { 0%, 64% { opacity: 0; translate: 0 6px; } 69%, 96% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 6px; } }
@keyframes s66 { 0%, 66% { opacity: 0; translate: 0 6px; } 72%, 96% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 6px; } }
@keyframes tl { 0%, 33% { opacity: 0; } 34%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes cv { 0%, 36% { translate: 0 0; } 54%, 100% { translate: 101% 0; } }
@keyframes tt { 0%, 31% { opacity: 1; } 32%, 100% { opacity: 0; } }
@keyframes kn { 0%, 34% { translate: calc(38cqw - var(--u) * 1.6) 0; } 50%, 99% { translate: calc(68cqw - var(--u) * 1.6) 0; } 100% { translate: calc(38cqw - var(--u) * 1.6) 0; } }
@keyframes kf { 0%, 34% { scale: .38 1; } 50%, 99% { scale: .68 1; } 100% { scale: .38 1; } }
@keyframes bp { 0%, 59% { scale: 1; } 61% { scale: .95; } 63%, 100% { scale: 1; } }

/* кнопка записи под блоком вкладок */
.howit__cta { display: flex; align-items: center; justify-content: center; gap: var(--s-3); margin-top: var(--s-6); }
.howit__btn { flex: 1 1 auto; max-width: 440px; min-height: var(--btn-h); }
.howit__round { flex: none; display: grid; place-items: center; width: var(--btn-h); height: var(--btn-h); border-radius: 50%; background: var(--c-mint); color: var(--c-mint-ink); box-shadow: var(--inset-glass); transition: background-color var(--t-fast); }
.howit__round:hover { background: #BFE3D0; color: var(--c-mint-ink); }
.howit__round svg { width: 24px; height: 24px; }

/* Вкладок три или пять: нечётная последняя на всю ширину (телефон), три вкладки в ряд с 640, без сироты в двух колонках */
@media (max-width: 639px) { .howit__tabs > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 640px) { .howit__tabs:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); } }