/* PeekO — лендинг листа ожидания.
   Свод правил: AI-RULES v3 + наш утверждённый стиль (кот, пиксели, Classic Console, лаванда).
   Осознанные отступления от AI-RULES (решение пользователя «сохранить наш стиль»):
   TYP-01/02 — заголовки Classic Console Neue, логотип Unbounded; TYP-04 — без отрицательного трекинга (пиксельная сетка 8×16);
   §8 пастель и >3 цветов — палитра из макета; CTA-01/02 — игровые кнопки с обводкой и кромкой; §5 IMG — вместо фото пиксельная сцена;
   §8 «заливка + обводка» — окна программы как часть стиля. */

@font-face { font-family: 'Classic Console'; src: url('assets/fonts/clacon2.woff2') format('woff2'); font-display: swap; }

/* ===== токены ===== */
:root {
  /* цвет: 3 основных + 2 служебных (кот/логотип, «верно») */
  --ink: #2B1B4A;
  --paper: #F7F2FF;
  --accent: #7C5CE0;
  --blush: #FF8CC6;
  --ok: #1F7A44;
  /* производные — только прозрачностью/оттенком основных */
  --surface: #EFE6FF;          /* тонированная поверхность панели и карточек */
  --surface-2: #E4D8FF;
  --line: #9A85DB;             /* рамки полей, 3,1:1 к белому */
  --accent-text: #5B3FC4;      /* фиолетовый текст на лаванде, 5,9:1 */
  --t1: 1; --t2: .76; --t3: .58; /* иерархия прозрачностью (TYP-06) */
  /* движение: одна кривая (MOT-03) */
  --ease: cubic-bezier(.22, 1, .36, 1);
  /* скругления */
  --r-pill: 999px; --r-win: 10px; --r-field: 12px;
  /* отступы */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px; --s6: 96px;
  --side: max(20px, calc((100vw - 1240px) / 2));   /* один контейнер 1240 px на всю страницу */
  --hero-side: var(--side);
}

* { box-sizing: border-box; }
html { scroll-padding-bottom: 120px; overflow-anchor: none; }   /* без «якоря» прокрутки: после перезагрузки страница не сдвигается, когда догружаются шрифты */
html, body { margin: 0; }
/* полоса прокрутки в стиле сайта: лавандовая дорожка, фиолетовый ползунок с тёмной обводкой, как у кнопок */
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: var(--surface); border-left: 2px solid var(--surface-2); }
::-webkit-scrollbar-thumb { background: var(--accent); border: 3px solid var(--ink); border-radius: var(--r-pill); box-shadow: inset 0 -3px 0 rgb(43 27 74 / .35); }
::-webkit-scrollbar-thumb:hover { background: var(--accent-text); }
::-webkit-scrollbar-thumb:active { background: var(--blush); }
::-webkit-scrollbar-corner { background: var(--surface); }
/* Firefox не понимает ::-webkit-scrollbar: там только цвета */
@supports not selector(::-webkit-scrollbar) { html { scrollbar-color: var(--accent) var(--surface); scrollbar-width: auto; } }
body { font: 400 17px/1.6 Rubik, "Segoe UI", system-ui, sans-serif; color: var(--ink); overflow-x: hidden;
  /* «обои рабочего стола»: сетка бледных пиксельных точек и редкие крестики; узор-картинка, не градиент */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' shape-rendering='crispEdges'%3E%3Cg fill='%237C5CE0' fill-opacity='.11'%3E%3Crect x='15' y='15' width='2' height='2'/%3E%3Crect x='47' y='15' width='2' height='2'/%3E%3Crect x='79' y='15' width='2' height='2'/%3E%3Crect x='111' y='15' width='2' height='2'/%3E%3Crect x='15' y='47' width='2' height='2'/%3E%3Crect x='79' y='47' width='2' height='2'/%3E%3Crect x='111' y='47' width='2' height='2'/%3E%3Crect x='15' y='79' width='2' height='2'/%3E%3Crect x='47' y='79' width='2' height='2'/%3E%3Crect x='79' y='79' width='2' height='2'/%3E%3Crect x='15' y='111' width='2' height='2'/%3E%3Crect x='47' y='111' width='2' height='2'/%3E%3Crect x='111' y='111' width='2' height='2'/%3E%3C/g%3E%3Cg fill='%23FF8CC6' fill-opacity='.2'%3E%3Crect x='46' y='44' width='4' height='10'/%3E%3Crect x='43' y='47' width='10' height='4'/%3E%3Crect x='110' y='76' width='4' height='10'/%3E%3Crect x='107' y='79' width='10' height='4'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 128px 128px, var(--paper); }
img, svg, canvas { display: block; }
.pixel { image-rendering: pixelated; image-rendering: crisp-edges; shape-rendering: crispEdges; }
p { text-wrap: pretty; max-width: 56ch; }
/* BRK-01: блоки в 2–4 строки выравниваем в «прямоугольник» */
.lead, .mini__body p, .cta__note, .bubble, .pop__q, .help, .props__list dd, .privacy__col p { text-wrap: balance; }
h1, h2, h3 { text-wrap: balance; hyphens: none; margin: 0; font-weight: 400; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible + span { outline: 3px solid var(--blush); outline-offset: 3px; }

/* ===== типографика ===== */
.display { font-family: 'Classic Console', 'Tiny5', monospace; -webkit-font-smoothing: none; letter-spacing: 0; }
h1.display { font-size: 48px; line-height: .95; }
@media (min-width: 1500px) { h1.display { font-size: 64px; } .lead { font-size: 20px; } }   /* 4× сетки шрифта на больших экранах */
h2.display { font-size: 32px; line-height: 1; }
h3.display { font-size: 16px; line-height: 1.1; }
.lead { font-size: clamp(17px, 1.3vw, 19px); color: rgb(43 27 74 / var(--t2)); max-width: 40ch; }
.muted { color: rgb(43 27 74 / var(--t2)); }
.quiet { color: rgb(43 27 74 / var(--t3)); font-size: 13px; }

/* ===== кнопки (игровые: заливка, обводка, кромка; заливка при наведении выезжает слева) ===== */
.btn { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 12px 28px; border: 3px solid var(--ink); border-radius: var(--r-pill);
  font: 500 18px/1.2 Rubik, sans-serif; text-decoration: none; cursor: pointer; touch-action: manipulation;
  background: var(--accent); color: #fff; box-shadow: 0 5px 0 var(--ink);
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease); }
.btn__fill { position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--ease); }
.btn__label { position: relative; transition: color 320ms var(--ease); }
.btn__icon { flex: none; transition: transform 520ms var(--ease); }
.btn:hover .btn__fill { transform: scaleX(1); }
.btn:hover .btn__icon { transform: translateX(3px) rotate(-8deg); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost .btn__fill { background: var(--surface-2); }
.btn--sm { min-height: 44px; padding: 8px 18px; font-size: 16px; box-shadow: 0 4px 0 var(--ink); }
.btn--wide { width: 100%; }

/* ===== первый экран: «рабочий стол» на всю ширину ===== */
/* Отступление от CMP-03 (текст в нижней трети) по просьбе пользователя: текст и кнопки ближе к центру, без пустоты. */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; background: var(--surface); overflow: hidden; }
.hero__top { position: relative; z-index: 5; display: flex; justify-content: space-between; align-items: flex-start; padding: var(--s3) var(--hero-side) 0; }
.brand { display: inline-flex; align-items: flex-end; font: 800 34px/1 Unbounded, sans-serif; letter-spacing: -1px; color: var(--ink); text-decoration: none; padding-top: .7em; }
.brand__o { position: relative; display: inline-block; margin-left: .02em; color: var(--accent); }   /* без градиента: сплошной фирменный фиолетовый */
.brand__cat { position: absolute; left: 50%; margin-left: -.792em; top: -.674em; width: 1.584em; height: 1.368em; }
.hero__nav { margin-top: 12px; display: flex; gap: var(--s1); }
.hero__grid { position: relative; z-index: 2; flex: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: var(--s5);
  padding: 0 var(--hero-side); pointer-events: none; }               /* сетка пропускает мышь к облакам; живые блоки ниже включают её обратно */
.hero__text, .scene { pointer-events: auto; }
.hero__text { align-self: center; padding: var(--s4) 0 calc(22px + var(--s5)); }
.hero__text h1 { margin-bottom: var(--s3); }
.hero__text .lead { margin: 0 0 var(--s4); }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.cta .btn { min-height: 62px; padding: 14px 30px; font-size: 20px; }
.cta__note { width: 100%; margin: 0; font-size: 14px; }
/* сцена: кот сидит на крыше окна (лапы на рамке), облачко слева от его головы; окно стоит по центру рядом с текстом */
.scene { --cat-w: 240px; --cat-h: 160px; --perch-r: 40px;
  position: relative; align-self: center; padding: calc(var(--cat-h) - 3px) 0 calc(var(--cat-h) + 19px); }   /* снизу на 22 px больше, как у текста: центр окна = центр текста */
.edge { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; background: var(--ink); z-index: 3; }

/* облака: плывут сами, на ПК их можно схватить и перетащить — после отпускания возвращаются */
.clouds { position: absolute; inset: 0; z-index: 1; }
.cloud { position: absolute; left: 0; top: 0; cursor: grab; touch-action: none; user-select: none; will-change: transform; }
.cloud svg { width: 100%; height: 100%; pointer-events: none; }
.cloud.is-drag { cursor: grabbing; z-index: 6; filter: drop-shadow(0 10px 12px rgb(43 27 74 / .18)); }
.spark { position: absolute; width: 20px; height: 20px; pointer-events: none; }
/* окно-демо: три шага в одном окне, сцены лежат в одной ячейке сетки, поэтому высота окна не прыгает */
.win { position: relative; background: #FBF8FF; border: 3px solid var(--ink); border-radius: var(--r-win); box-shadow: 6px 6px 0 var(--surface-2); }
.win__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 5px 8px 5px 6px; border-bottom: 3px solid var(--ink); background: var(--surface-2); border-radius: 7px 7px 0 0; }   /* полоса заголовка повторяет скругление рамки окна */
.win__ctl { display: flex; gap: 14px; padding-right: 4px; }
.win__ctl svg, .win__bar > svg { width: 12px; height: 12px; flex: none; }
.steps { display: flex; gap: 4px; }
.step { font: 500 13px/1 Rubik, sans-serif; color: var(--ink); background: transparent; border: 2px solid transparent; border-radius: var(--r-pill); padding: 5px 10px; cursor: pointer;
  transition: background-color 320ms var(--ease), border-color 320ms var(--ease), color 320ms var(--ease); }
.step:hover { border-color: var(--line); }
.step.is-on { background: #fff; border-color: var(--ink); }
.step:focus-visible, .opt:focus-visible, .next:focus-visible, .phrase:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.stage { display: grid; }
.slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateX(28px); filter: blur(8px); pointer-events: none;
  transition: opacity 520ms var(--ease), transform 520ms var(--ease), filter 520ms var(--ease), visibility 0s linear 520ms; }
.slide.is-gone { transform: translateX(-28px); }
.slide.is-on { opacity: 1; visibility: visible; transform: none; filter: none; pointer-events: auto; transition-delay: 0s; }
.win__body { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px; }
/* левая половина: «программа» на экране человека */
.app { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.app__name { display: flex; align-items: center; gap: 6px; font: 500 16px 'Segoe UI', sans-serif; }
.ico { width: 26px; height: 18px; border-radius: 5px; display: grid; place-items: center; flex: none; }
.ico--yt { background: #F03; }
.ico--web { width: 18px; border-radius: 50%; border: 2px solid var(--ink); background: var(--surface); }
.ico--word { width: 20px; height: 20px; border-radius: 4px; background: #2B579A; color: #fff; font: 700 12px/1 'Segoe UI', sans-serif; }
.app__h { margin: 4px 0 0; font: 600 17px/1.25 'Segoe UI', sans-serif; }
.app__text { margin: 0; font: 400 15px/1.5 'Segoe UI', sans-serif; text-wrap: pretty; }
.app__text b { background: #FFF1A8; font-weight: 600; padding: 0 2px; }
.app__text mark { background: #E4D8FF; color: inherit; padding: 0 2px; }
.caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 1px; vertical-align: -.15em; background: var(--ink); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
/* выделенная фраза: на неё можно нажать */
.phrase { font: inherit; color: inherit; background: #FFF1A8; border: 0; border-bottom: 2px dashed var(--accent); padding: 0 2px; cursor: pointer; transition: background-color 320ms var(--ease); }
.phrase:hover { background: #FFE76B; }
.phrase.is-done { background: #E8F8EE; border-bottom-color: #2E9E5B; border-bottom-style: solid; }
.player { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #8F78D4; }
.player > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.player__bar { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 10px; }
.player__track { flex: 1; height: 4px; background: rgb(255 255 255 / .5); position: relative; }
.player__track i { position: absolute; inset: 0 62% 0 0; background: #fff; }
/* правая половина: карточка PeekO */
.pop { display: flex; flex-direction: column; background: #fff; border: 3px solid var(--ink); border-radius: var(--r-win); padding: 12px; min-width: 0; }
.pop__head { display: flex; align-items: center; gap: 8px; }
.pop__head canvas { width: 36px; height: 24px; }
.pop__head .display { font-size: 16px; }
.pop__q { font: 500 17px/1.3 Rubik, sans-serif; margin: 10px 0; }
.pop__note { font: 400 14px/1.4 Rubik, sans-serif; margin: 0; opacity: .76; }
.swap, .quiz { margin-bottom: 10px; }
/* серые строки: остальной текст статьи или отчёта */
.lines { display: grid; gap: 7px; margin-top: 4px; }
.lines i { height: 7px; border-radius: 4px; background: rgb(43 27 74 / .1); }
.lines i:nth-child(2) { width: 86%; } .lines i:nth-child(3) { width: 64%; }
.swap { display: grid; flex: 1; align-content: center; }   /* подсказка и ответ по центру свободного места карточки */
.swap > * { grid-area: 1 / 1; opacity: 0; transform: translateY(8px); filter: blur(6px); visibility: hidden; transition: opacity 480ms var(--ease), transform 480ms var(--ease), filter 480ms var(--ease), visibility 0s linear 480ms; }
.swap > .is-on { opacity: 1; transform: none; filter: none; visibility: visible; transition-delay: 0s; }
.opt { display: flex; width: 100%; justify-content: space-between; align-items: center; min-height: 36px; border: 2px solid var(--line); border-radius: var(--r-field); padding: 6px 12px; margin-top: 7px;
  font: 400 14px/1.2 Rubik, sans-serif; color: var(--ink); text-align: left; background: #fff; cursor: pointer;
  transition: background-color 320ms var(--ease), border-color 320ms var(--ease), transform 320ms var(--ease); }
.opt:hover:not(:disabled) { border-color: var(--accent); background: var(--surface); transform: translateX(3px); }
.opt:disabled { cursor: default; }
.mark { width: 14px; height: 14px; flex: none; opacity: 0; background: center / contain no-repeat; transition: opacity 320ms var(--ease); }
.opt.is-right { border-color: #2E9E5B; background: #E8F8EE; }
.opt.is-right .mark { opacity: 1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%231F7A44' stroke-width='2.4' stroke-linecap='square'/%3E%3C/svg%3E"); }
.opt.is-wrong { border-color: #D9468A; background: #FFEAF4; }
.opt.is-wrong .mark { opacity: 1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' fill='none' stroke='%23B3256A' stroke-width='2.4' stroke-linecap='square'/%3E%3C/svg%3E"); }
/* «Дальше» появляется после ответа; место под ним занято заранее, чтобы карточка не прыгала */
.next { align-self: flex-end; margin-top: auto; font: 500 14px/1 Rubik, sans-serif; color: #fff; background: var(--accent); border: 2px solid var(--ink); border-radius: var(--r-pill); padding: 8px 16px; cursor: pointer;
  box-shadow: 0 3px 0 var(--ink); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 420ms var(--ease), transform 420ms var(--ease), visibility 0s linear 420ms, background-color 320ms var(--ease); }
.next.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.next:hover { background: var(--accent-text); }

/* «насест»: обрезает кота по крыше окна, поэтому при загрузке он выглядывает из-за окна */
.perch { position: absolute; top: 0; right: var(--perch-r); width: var(--cat-w); height: var(--cat-h); overflow: hidden; z-index: 3; pointer-events: none; }
.hero-cat { display: block; width: 100%; height: 100%; }
.scene.is-explain .perch { pointer-events: auto; cursor: pointer; }   /* на шаге «Объясни» на кота можно нажать, как в программе */
.say { position: absolute; z-index: 4; top: calc(var(--cat-h) * .52); right: calc(var(--perch-r) + var(--cat-w) * .7 + 10px); max-width: 230px; pointer-events: none;
  filter: drop-shadow(0 8px 14px rgb(124 92 224 / .35));
  opacity: 0; transform: translate(-10px, -50%); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.say.is-on { opacity: 1; transform: translate(0, -50%); }
.say__tail { position: absolute; right: -9px; top: 50%; width: 9px; height: 18px; margin-top: -9px; }
.bubble { margin: 0; padding: 12px 16px; background: #fff; font: 500 15px/1.35 Rubik, sans-serif;
  /* пиксельная рамка: четыре тени-стороны, в углах ступенька — рамка сплошная, без дыр */
  box-shadow: -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink), 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink); }

/* ===== «Как это работает»: три окна, разные по высоте и смещению ===== */
.section { padding: var(--s6) var(--side) var(--s5); }
.section h2 { margin-bottom: var(--s4); }
/* окна одной ширины и высоты, в одну линию (по просьбе пользователя; отступление от §8 «разные карточки») */
.desk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); align-items: stretch; }
.mini { background: #fff; border: 3px solid var(--ink); border-radius: var(--r-win); box-shadow: 6px 6px 0 var(--surface-2); overflow: hidden; }
.mini__bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--surface); border-bottom: 3px solid var(--ink); }
.mini__bar h3 { flex: 1; }
.mini__bar .ic { width: 26px; height: 22px; }
.mini__dots { display: flex; gap: 4px; } .mini__dots i { width: 8px; height: 8px; background: var(--ink); }
.mini__body { padding: var(--s2) var(--s2) 20px; }
.mini__body p { margin: 0 0 var(--s2); font-size: 16px; }
.sample { font-size: 15px; } .sample mark { background: #FFD3EA; color: var(--ink); padding: 0 3px; }
.reply { display: inline-block; margin-top: 10px; background: var(--surface); padding: 8px 12px; border-radius: 10px 10px 10px 2px; font-weight: 500; }
.reply b { font-weight: 500; color: var(--accent-text); }
.qa div { display: flex; justify-content: space-between; align-items: center; border: 2px solid var(--line); border-radius: 8px; padding: 6px 10px; margin-top: 6px; font-size: 15px; }
.qa .is-right { border-color: #2E9E5B; background: #E8F8EE; font-weight: 500; }
.qa svg { width: 14px; height: 14px; }
.tl { display: flex; justify-content: space-between; position: relative; padding-top: 4px; font-size: 14px; }
.tl::before { content: ""; position: absolute; left: 12px; right: 12px; top: 13px; border-top: 3px dotted var(--accent); }
.tl div { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tl i { width: 18px; height: 18px; background: #A98BFF; border: 2.5px solid var(--ink); }
.tl div:last-child i { background: var(--blush); }

/* ===== «Знакомься, Peeko»: окно «Свойства» ===== */
.props { background: #fff; border: 3px solid var(--ink); border-radius: var(--r-win); box-shadow: 8px 8px 0 var(--surface-2); overflow: hidden; }
.props__bar { justify-content: flex-start; align-items: center; }
.props__title { flex: 1; font-size: 16px; }
.props__body { display: grid; grid-template-columns: 300px 1fr; }
.props__cat { display: grid; place-items: end center; background: var(--surface); border-right: 3px solid var(--ink); padding: var(--s4) var(--s3) 0; }
#meetCat { width: 240px; height: 160px; }
.props__yarn { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.props__list { margin: 0; padding: var(--s2) var(--s4); }
.props__list div { display: grid; grid-template-columns: 120px 1fr; gap: var(--s2); padding: 12px 0; border-bottom: 1px solid rgb(43 27 74 / .15); }
.props__list div:last-child { border-bottom: 0; }
.props__list dt { color: rgb(43 27 74 / var(--t3)); }
.props__list dd { margin: 0; font-weight: 500; }

/* ===== «Что видит Peeko»: три колонки на тонированной поверхности, разделены линиями, без карточек ===== */
.privacy__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--surface); }
.privacy__col { padding: var(--s4) var(--s3); border-left: 1px solid rgb(43 27 74 / .18); }
.privacy__col:first-child { border-left: 0; }
.privacy__col:nth-child(3) { background: var(--ink); color: #fff; }
.privacy__col:nth-child(3) p { color: rgb(255 255 255 / .78); }
.privacy__ic { width: 40px; height: 40px; margin-bottom: var(--s2); }
.privacy__col h3 { font-size: 16px; margin-bottom: var(--s1); }
.privacy__col p { margin: 0; color: rgb(43 27 74 / var(--t2)); }
/* ===== заявка в бету: окно как «Свойства» — слева «комната» с котом на подушке, справа форма по одной сетке ===== */
.beta { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin: 0 var(--side); background: #fff; border: 3px solid var(--ink); border-radius: var(--r-win); box-shadow: 8px 8px 0 var(--surface-2); overflow: hidden; }
/* фон «комнаты»: пиксельная сетка из точек (картинка, не градиент) */
.beta__stage { display: grid; place-items: center; padding: var(--s5) var(--s3); border-right: 3px solid var(--ink);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' shape-rendering='crispEdges'%3E%3Crect x='11' y='11' width='3' height='3' fill='%237C5CE0' fill-opacity='.18'/%3E%3C/svg%3E") 0 0 / 24px 24px, var(--surface); }
.beta__cat { width: 264px; height: 228px; }
.beta__form { padding: var(--s5); }
.beta h2 { margin-bottom: var(--s2); }
.beta .lead { margin: 0 0 var(--s3); max-width: none; text-wrap: pretty; }
.field-label { display: block; font-weight: 500; margin-bottom: var(--s1); }
.req { color: #C0306B; }
.field { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px; border: 2px solid var(--line); border-radius: var(--r-field); background: transparent;
  transition: border-color 320ms var(--ease); }
.field:focus-within { border-color: var(--accent); }
.field.is-bad { border-color: #C0306B; }
.field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 16px Rubik, sans-serif; color: var(--ink); padding: 12px 0; }
.help { font-size: 14px; margin: 6px 0 0; }
.err { color: #C0306B; font-size: 14px; font-weight: 500; margin: 6px 0 0; }
.err:empty { display: none; }
.groups { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin: var(--s3) 0; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; margin-bottom: var(--s1); font-weight: 500; white-space: nowrap; }
/* в каждой группе сетка 2×2 из одинаковых плашек: края совпадают с полем ввода и кнопкой */
.chips { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s1); }
.chips label { position: relative; display: grid; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips span { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 52px; padding: 6px 10px;
  border: 2px solid var(--line); border-radius: var(--r-field); font-size: 14px; line-height: 1.15; text-align: center; cursor: pointer;
  transition: background-color 320ms var(--ease), border-color 320ms var(--ease); }
.chips small { font-size: 12px; color: rgb(43 27 74 / var(--t2)); }
.chips input:checked + span { background: #fff; border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }
.done { display: none; }
.done.is-on { display: block; }
.done h3 { font-size: 32px; margin-bottom: var(--s2); }
.hp { position: absolute; left: -9999px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: #fff; padding: 10px 14px; text-decoration: none; }
.skip:focus { top: 12px; }

/* ===== вопросы: без рамок, разделены линией на всю ширину ===== */
/* ширину ограничиваем у содержимого, а не у секции: иначе боковые отступы съедают ширину на широких экранах */
.faq > * { max-width: none; }
.faq details { border-top: 1px solid rgb(43 27 74 / .2); }
.faq details:last-child { border-bottom: 1px solid rgb(43 27 74 / .2); }
.faq summary { display: flex; align-items: center; gap: var(--s2); min-height: 60px; padding: 12px 0; font-size: 18px; font-weight: 500; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { margin-left: auto; transition: transform 520ms var(--ease); }
.faq details[open] .chev { transform: rotate(180deg); }
.faq details p { margin: 0 0 20px 42px; max-width: 72ch; text-wrap: pretty; color: rgb(43 27 74 / var(--t2)); }   /* ответы шире и без «балансировки», чтобы не было узкой колонки */

/* ===== подвал и липкая кнопка ===== */
.footer { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3); padding: var(--s4) var(--side) 120px; }
.footer .brand { font-size: 22px; padding-top: 0; }
.footer__links { margin-left: auto; display: flex; gap: var(--s3); }
.footer__links a { display: flex; align-items: center; gap: 8px; min-height: 44px; color: rgb(43 27 74 / var(--t2)); text-decoration: none; }
.sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: none; justify-content: center; padding: 14px 16px 16px;
  background: linear-gradient(180deg, rgb(247 242 255 / 0), rgb(247 242 255 / .95) 40%); transition: transform 500ms var(--ease); }
.sticky .btn { width: min(440px, 100%); }
.sticky.is-hidden { transform: translateY(120%); }

/* ===== первый экран: пиксельные холмы у нижней полосы, падающая звезда ===== */
.hills { position: absolute; left: 0; right: 0; bottom: 22px; height: 96px; z-index: 1; overflow: hidden; pointer-events: none; }
.hills svg { display: block; }
.star { position: absolute; left: 0; top: 0; z-index: 1; width: 64px; height: 12px; opacity: 0; transform-origin: 0 50%; pointer-events: none; }
.star svg { width: 100%; height: 100%; }

/* ===== «Знакомься»: клубок на нитке, реплика кота ===== */
.props__cat { position: relative; overflow: hidden; }
.props__pet { display: block; padding: 0; background: none; border: 0; border-radius: var(--r-win); }
.props__pet:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.props__say { position: absolute; left: var(--s2); top: var(--s3); z-index: 2; max-width: 170px; margin: 0; padding: 8px 12px; background: #fff; border: 3px solid var(--ink); border-radius: var(--r-field);
  font: 500 14px/1.3 Rubik, sans-serif; opacity: 0; transform: translateY(6px); transition: opacity 420ms var(--ease), transform 420ms var(--ease); pointer-events: none; }
.props__say.is-on { opacity: 1; transform: none; }

/* ===== «Что видит Peeko»: значки оживают при наведении ===== */
.privacy__col:hover .privacy__ic[data-px="pc"] { animation: icBlink 640ms steps(1) 2; }
.privacy__col:hover .privacy__ic[data-px="send"] { animation: icSend 700ms steps(4) 1; }
.privacy__col:hover .privacy__ic[data-px="lock"] { animation: icShake 480ms steps(4) 1; }
@keyframes icBlink { 50% { opacity: .35; } }
@keyframes icSend { 50% { transform: translateY(-8px); } }   /* облако «улетает» вверх */
@keyframes icShake { 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }

/* ===== подвал: пиксельная трава, по ней иногда проходит кот ===== */
.footer { position: relative; overflow: hidden; }
.grass { position: absolute; left: 0; right: 0; bottom: 0; height: 24px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='24' viewBox='0 0 8 6' shape-rendering='crispEdges'%3E%3Cg fill='%23D3C0FF'%3E%3Crect x='2' y='0' width='1' height='1'/%3E%3Crect x='1' y='1' width='2' height='1'/%3E%3Crect x='5' y='1' width='1' height='1'/%3E%3Crect x='0' y='2' width='4' height='1'/%3E%3Crect x='5' y='2' width='2' height='1'/%3E%3Crect x='0' y='3' width='8' height='1'/%3E%3C/g%3E%3Crect x='0' y='4' width='8' height='2' fill='%23B79BFF'/%3E%3C/svg%3E") 0 100% / 32px 24px repeat-x; }
.walk-cat { position: absolute; left: 0; bottom: -1px; width: 132px; height: 114px; opacity: 0; transform-origin: 50% 50%; }

/* ===== появление: по очереди и с размытием (MOT-01/02) ===== */
/* CSS-анимация, без зависимости от JS: если скрипт не загрузится, текст всё равно появится */
@keyframes rise { from { opacity: 0; transform: translateY(28px); filter: blur(14px); } to { opacity: 1; transform: none; filter: blur(0); } }
.rise { animation: rise 900ms var(--ease) var(--d, 0ms) both; }
.d-logo { --d: 300ms; } .d-nav { --d: 420ms; } .d-h1 { --d: 900ms; } .d-sub { --d: 1040ms; } .d-cta { --d: 1200ms; } .d-scene { --d: 1300ms; }

/* ===== адаптив ===== */
/* средние экраны ПК: окно в две колонки, но без картинки плеера и серых строк; кот и облачко компактнее */
@media (max-width: 1280px) and (min-width: 961px) {
  .cta .btn { min-height: 58px; padding: 12px 24px; font-size: 18px; }
  .win__body { gap: 10px; padding: 12px; }
  .player, .lines { display: none; }
  .app__text { font-size: 14px; }
  .steps .step { padding: 5px 8px; }
  .scene { --cat-w: 192px; --cat-h: 128px; --perch-r: 24px; }
  .say { max-width: 190px; }
  .bubble { font-size: 14px; }
}
/* узкие ПК: в колонке формы две группы рядом не помещаются — ставим друг под другом, плашки в один ряд по 4 */
@media (max-width: 1140px) and (min-width: 961px) {
  .groups { grid-template-columns: 1fr; }
  .chips { grid-template-columns: repeat(4, 1fr); }
}
/* низкие экраны (ноутбук с панелями браузера): облака не помещаются над окном */
@media (max-width: 960px) {
  .props__body { grid-template-columns: 1fr; }
  .props__cat { border-right: 0; border-bottom: 3px solid var(--ink); }
  .privacy__cols { grid-template-columns: 1fr; }
  .privacy__col { border-left: 0; border-top: 1px solid rgb(43 27 74 / .18); }
  .privacy__col:first-child { border-top: 0; }
  .spark, .cloud:nth-child(n+7) { display: none; }
  .cloud { opacity: .6; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__text { padding: var(--s4) 0 var(--s4); }
  .scene { padding-bottom: calc(22px + var(--s4)); }   /* окно под текстом, центровать не с чем */
  .cta .btn { min-height: 56px; font-size: 18px; padding: 12px 26px; }
  .desk { grid-template-columns: 1fr; }
  .beta { grid-template-columns: 1fr; }
  .beta__stage { border-right: 0; border-bottom: 3px solid var(--ink); padding: var(--s4) var(--s3) var(--s3); }
  .beta__cat { width: 220px; height: 190px; }
  .beta__form { padding: var(--s4) var(--s3); }
  legend { white-space: normal; }
  .sticky { display: flex; }
}
@media (max-width: 560px) {
  .props__list { padding: var(--s1) var(--s2); }
  .props__list div { grid-template-columns: 1fr; gap: 2px; }
  h1.display { font-size: 32px; line-height: 1; }
  .brand { font-size: 28px; }
  .win__body { grid-template-columns: 1fr; gap: 10px; }
  .player { display: none; }
  .app { gap: 6px; }
  .app__h, .lines { display: none; }
  .scene { --cat-w: 192px; --cat-h: 128px; --perch-r: 12px; }
  .say { max-width: 170px; }
  .bubble { font-size: 14px; padding: 10px 12px; }
  .groups { grid-template-columns: 1fr; }
  .section { padding-top: var(--s5); }
}
@media (prefers-reduced-motion: reduce) {
  .rise { animation: none; }
  * { transition-duration: 0ms !important; transition-delay: 0ms !important; }
}

/* курсор-лапка на всём, что нажимается (--paw задаёт script.js; без скрипта обычная рука) */
a, button, summary, .btn, .step, .opt:not(:disabled), .next, .phrase, .chips span, .faq summary, .scene.is-explain .perch, .props__pet { cursor: var(--paw, pointer); }
@media (max-width: 960px) {
  .props__cat { min-height: 300px; }
}
/* ===== мини-игра «Поиграй с котом» ===== */
.play-btn .btn__icon { width: 20px; height: 20px; }
html.is-gaming { overflow: hidden; }
html.is-gaming .sticky { display: none; }
/* во время игры кот «выпрыгивает» из окна в игру: на странице его и облачко прячем, кнопки шапки тоже, чтобы не спорили с «Выйти» */
html.is-gaming .perch, html.is-gaming .say, html.is-gaming .hero__nav { visibility: hidden; }
.game { position: fixed; inset: 0; z-index: 60; background: transparent; }   /* сайт под игрой виден как есть, без дымки и размытия */
.game[hidden] { display: none; }
.game__cv { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: var(--paw, pointer); }
.game__hud { position: absolute; left: var(--side); top: var(--s3); max-width: 420px; padding: 12px 16px; background: #fff; border: 3px solid var(--ink); border-radius: var(--r-win); box-shadow: 6px 6px 0 var(--surface-2); pointer-events: none; }   /* подпись в своём окошке, чтобы читалась поверх сайта */
.game__title { margin: 0; font-size: 26px; }
.game__hint { margin: 6px 0 0; color: rgb(43 27 74 / var(--t2)); }
.game__score { margin: 6px 0 0; font-weight: 500; }
.game__score b { font-family: 'Classic Console', Tiny5, monospace; font-weight: 400; font-size: 22px; color: var(--accent); }
.game__close { position: absolute; top: var(--s3); right: var(--side); }
@media (max-width: 700px) {
  .play-btn .btn__label { display: none; }           /* на телефоне кнопка — один клубок */
  .play-btn { padding: 8px 12px; }
  .game__hud { left: 16px; right: 110px; top: 16px; padding: 10px 12px; }
  .game__title { font-size: 24px; }
  .game__hint { font-size: 14px; }
  .game__close { top: 16px; right: 20px; }
}

/* ===== шаг «Игра»: кот смотрит на экран игры и выделяет предмет, о котором спросит ===== */
.ico--game { background: var(--ink); }
.scan { position: absolute; left: 39%; top: 26%; width: 22%; height: 52%; border: 2px dashed #FFD166; pointer-events: none;
  opacity: 0; transform: scale(1.3); transition: opacity 420ms var(--ease) 500ms, transform 520ms var(--ease) 500ms; }
.slide.is-on .scan { opacity: 1; transform: none; }
.scan::after { content: ''; position: absolute; inset: -6px; border: 2px solid rgb(255 209 102 / .35); animation: scanPulse 1.6s steps(4) infinite; }
@keyframes scanPulse { 50% { inset: -10px; opacity: .2; } }
@media (max-width: 1280px) {
  .player.player--game { display: block; max-height: 120px; }   /* в узком окне сцену игры не прячем: по ней задаётся вопрос */
}
@media (max-width: 560px) {
  .steps { gap: 0; }
  .steps .step { padding: 5px 7px; font-size: 12px; }
  .win__ctl { display: none; }
}