/* ═══ САЙТ АВТОРА · ОБЩЕЕ ВСЕМ СТРАНИЦАМ ══════════════════════════
   Стиль-основа (stil-osnova.css) — общая двум сайтам; здесь то, что
   у сайта автора своё и одно на все его страницы: оттенок, запись,
   меню внизу, меню страниц, плитки разделов, вопросы. Страница несёт
   в своём <style> только своё — обложку главной. */

/* ── шрифт главного заголовка ─────────────────────────────────────
   Слово автора 09.10 «давай Софию»: главный заголовок страницы — Sofia
   Sans Extra Condensed 900 заглавными; всё остальное — Manrope.
   Шрифт — исходная София из saity/shrifty/, но Д, Ц, Щ и стебель Ф
   вписаны в высоту букв, а хвост запятой укорочен (слово автора 09.10
   «чтобы они не торчали лишними»): его выводит saity/sobrat-shrifta.py.
   Заглавная у Софии — 0,655 кегля против 0,81 у прежнего Освальда, и
   кегль заголовков поднят в ту же меру (×1,24). Межстрочие — 1 кегль:
   точки Ё и дужка Й стоят на 0,86 кегля над строкой, хвост запятой —
   на 0,07 под ней, и при меньшем межстрочии точки ложились на буквы
   и запятые строки выше (слово автора 09.10: «Ё там, точки… налезли
   на… межстрочное расстояние, выравнивай»). */
@font-face{font-family:'Sofia Sans Extra Condensed';font-style:normal;font-weight:900;font-display:swap;
  src:url(shrifty/sofia-vpisannaya-cyrillic-900.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Sofia Sans Extra Condensed';font-style:normal;font-weight:900;font-display:swap;
  src:url(shrifty/sofia-vpisannaya-latin-900.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
.geroy-oblozhka h1,.stranica-zag h1{text-wrap:balance}
.geroy-oblozhka h1,.stranica-zag h1{font-family:'Sofia Sans Extra Condensed','Manrope',system-ui,sans-serif;
  font-weight:900;text-transform:uppercase;letter-spacing:.005em;line-height:1}
/* межстрочие плотнее буквы с надстрочным знаком: точки Ё и дужка Й
   встают выше строки, а заливка заголовка градиентом (ниже) красит
   только поле заголовка — без запаса над и под ним точки срезает */
.stranica-zag h1{padding-block:.2em;margin-block:-.2em}

/* оттенок этого сайта: синий → фиолетовый, промежуточный к СТАФИРу */
:root{
  --a:#6AA7FF; --a2:#705FFB;
  --grad:linear-gradient(120deg,#A8D4FF,#6AA7FF,#A99BFF);
}
.printsip{margin-top:30px;display:inline-block;font-weight:800;
  font-size:clamp(18px,2.4vw,23px);letter-spacing:-.01em;
  border:1px solid color-mix(in srgb,var(--a) 45%,var(--line));
  border-radius:14px;padding:.6em 1.2em;
  background:color-mix(in srgb,var(--sur) 82%,transparent)}
main > section:first-child{border-top:none}

/* ── шапка: знак и имя ведут на главную, справа запись и меню ──── */
.domoy{display:flex;align-items:center;gap:12px;color:var(--t1);min-width:0}
/* ── ШАПКА КАК В ПРИЛОЖЕНИИ: в гостях — стрелка назад ─────────────
   Стрелка та же, что в шапке приложения (shapka.js, «назад-шапка»):
   шеврон 26 точек линией 1,8, круглая подсветка нажатия. На главной
   её нет: главная — дом. */
.strelka-nazad{flex:none;display:grid;place-items:center;width:40px;height:40px;
  margin-left:-8px;border-radius:50%;color:var(--t1)}
.strelka-nazad svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.strelka-nazad:hover,.strelka-nazad:active{background:var(--sur2)}
body:has(.geroy-oblozhka) .strelka-nazad{display:none}
.shapka:has(.strelka-nazad) .domoy{gap:10px}
/* живой знак: холст ложится поверх картинки; встал — картинка уходит */
.znak-mesto{position:relative;display:block;flex:none;width:33px;height:30px}
.znak-mesto img{display:block;width:100%;height:100%}
.znak-mesto[data-живой] img{visibility:hidden}
.znak-mesto .znak-holst{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
/* узкий телефон: стрелка, знак, имя, «Записаться» и меню — в одну
   строку; на самом узком в гостях имя уступает место стрелке (знак
   остаётся, дома имя на месте) */
@media(max-width:400px){
  .shapka{gap:8px}
  .strelka-nazad{width:34px;height:40px;margin-left:-6px}
  .shapka:has(.strelka-nazad) .domoy{gap:8px}
  .shapka .knopka{padding:0 12px;font-size:.84em}
}
@media(max-width:340px){
  body:not(:has(.geroy-oblozhka)) .domoy .imya{display:none}
}
.shapka nav{margin-left:auto}
.menyu{position:relative;flex:none}
.menyu summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  gap:6px;min-height:40px;padding:0 12px;border-radius:12px;
  border:1px solid var(--line);background:var(--sur2);color:var(--t1);
  font-weight:600;font-size:.88em;user-select:none}
.menyu summary::-webkit-details-marker{display:none}
.menyu summary svg{width:20px;height:20px;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round}
.menyu[open] summary{border-color:var(--a)}
/* меню не выше экрана и докручивается само: шапка липкая, меню едет с
   ней, и прокрутка страницы его низ не открывает — запасные страницы и
   оговорка лежали за краем на 360×740 и 1280×720 (проба ЭКРАНЫ, «низ
   меню не достать»). На низком экране строки плотнее — чаще влезает
   целиком, без прокрутки; касание строки остаётся выше 44. */
.menyu-okno{position:absolute;right:0;top:calc(100% + 10px);z-index:20;
  width:min(300px,calc(100vw - 32px));display:flex;flex-direction:column;
  padding:8px;border-radius:16px;background:var(--sur);
  border:1px solid var(--line);box-shadow:0 18px 50px rgba(0,0,0,.55);
  max-height:calc(100svh - 80px);overflow-y:auto;overscroll-behavior:contain}
.menyu-okno a{padding:11px 14px;border-radius:10px;color:var(--t1);font-weight:700}
/* меню открывается целиком, без прокрутки внутри (слово автора 10.10
   «у тебя появилась в меню прокрутка»; прокрутка внутри прокрутки —
   ошибка по HIG и Material): чем ниже экран, тем плотнее строки; на
   совсем низком (360×640) подписи под пунктами прячутся, а касание
   остаётся не меньше 44 точек */
@media(max-height:860px){.menyu-okno a{padding-block:6px}}
@media(max-height:760px){.menyu-okno a{padding-block:4px}}
@media(max-height:680px){.menyu .menyu-okno > a small{display:none}
  .menyu .menyu-okno > a{display:flex;align-items:center;min-height:44px}}
.menyu-okno a:hover{background:var(--sur2)}
.menyu-okno a small{display:block;margin-top:2px;color:var(--t3);
  font-weight:500;font-size:.8em}
/* на узком меню — только значком: имя, запись и меню вместе не влезали */
@media(max-width:480px){.menyu summary span{display:none}
  .menyu summary{padding:0 9px}}

/* ── страница раздела: заголовок, «на главную», «дальше» ─────────── */
/* поля заголовка и строк разделов ужаты 12.10: нижняя панель с
   исполнителем (11.10) съела высоту, и страницы из пяти разделов
   переросли экран на 8–40 точек (замер экранов, финальный прогон 12.10) */
.stranica-zag{padding:clamp(10px,2svh,44px) 0 clamp(12px,1.8svh,24px)}
.stranica-zag h1{font-size:clamp(35px,4.2vw,57px);max-width:16em}
/* самый узкий телефон: заголовок держится в три строки рядом с «дальше» */
@media(max-width:380px){.stranica-zag h1{font-size:32px}}
@media(max-width:880px){.stranica-zag .podzag{font-size:15.5px;line-height:1.55}}
.stranica-zag .podzag{margin-top:12px;margin-bottom:0;max-width:36em}
.stranica-zag .tsena{margin-top:12px}
/* на большом экране кнопка записи — справа от вступления, в ту же
   строку: под ним она съедала высоту списка разделов */
@media(min-width:881px){
  .stranica-zag{display:grid;grid-template-columns:minmax(0,1fr) auto;
    column-gap:28px;align-items:end}
  .stranica-zag > *{grid-column:1}
  .stranica-zag > .deystviya{grid-column:2;grid-row:auto / span 1;margin-top:0 !important;
    align-self:end;justify-self:end}
  .stranica-zag > h1{grid-column:1}
  .stranica-zag > .dalee{grid-column:2;grid-row:1;align-self:start;margin:0}
}
/* «дальше» — справа от заголовка, а не под гармошкой: слово автора
   09.10 «не видно кнопки дальше… от заголовка справа место… туда
   можешь поставить стрелку… чтобы не было прокрутки». На телефоне —
   плашкой справа, заголовок обтекает её; куда ведёт — словом в ней. */
.stranica-zag > .dalee{float:right;margin:2px 0 8px 12px;min-height:40px;
  padding:0 14px;border-radius:12px;align-items:center;gap:8px;
  font-size:.88em;font-weight:600;background:var(--sur2)}
.stranica-zag > .dalee b{white-space:nowrap}
/* плашка над заголовком по слою: у заголовка фильтр-ореол, а фильтр
   поднимает его поле над обтекаемой плашкой — палец попадал в
   заголовок, и «дальше» не нажималась (слово автора 09.10: «почему у
   тебя ссылки-то, переходы-то не работают?») */
.stranica-zag > .dalee{position:relative;z-index:1}
/* на телефоне — одна строка «Раздел →»: слово «дальше» над ней делало
   плашку в два этажа, и заголовок обтекал её тремя строками */
@media(max-width:880px){.stranica-zag > .dalee small{display:none}}
/* текст страницы лежит на шаре из точек — тёмный ореол вокруг букв
   держит его читаемым (слово автора 09.10: «точки крутятся… текст…
   перекрывается»). У заголовка буквы залиты градиентом, тень под ними
   легла бы на заливку — ему ореол фильтром. */
.stranica-zag .podzag,.razdel-zag,.razdel-telo{
  text-shadow:0 0 3px var(--bg),0 0 8px var(--bg)}
/* ореола мало: точки идут между букв. За заголовком с пояснением шар
   притемнён плотной подложкой; шар виден, буквы лежат на ровном. Края
   подложки растушёваны — рамки нет. Размытия (backdrop-filter) здесь
   нет и быть не должно: шар живой, и размытие поверх него браузер
   пересчитывает каждый кадр — слово автора 10.10 «нету плавности,
   подвисает»; замер на среднем телефоне: с размытиями 14 кадров в
   секунду, без них 22. */
.stranica-zag{position:relative;isolation:isolate}
.stranica-zag::after{content:'';position:absolute;z-index:-1;top:-8px;bottom:0;
  left:calc(50% - 50vw);right:calc(50% - 50vw);
  pointer-events:none;background:color-mix(in srgb,var(--bg) 80%,transparent);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 16px,#000 calc(100% - 16px),transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 16px,#000 calc(100% - 16px),transparent)}
/* надписи, залитые градиентом, — без ореола: тень легла бы поверх
   заливки и затемнила её */
.razdel-telo .gradientom,.razdel-telo .summa,.razdel-telo .shag::before{text-shadow:none}
.stranica-zag .podzag{text-wrap:pretty}
/* ── СИСТЕМА: КНОПКИ, ШАГ, ВЫСОТА СТРАНИЦЫ ────────────────────────
   Слово автора 09.10: «ты можешь как-то равномерно всё раскидать? У
   тебя теперь внизу пустое место… отступы внутри кнопок, кнопки
   относительно друг друга… гармонично, лаконично… равномерно
   распределено, отступы правильные, выверенные… выравнивание…
   эргономика, дизайн».
   · кнопки шапки и плашка «дальше» — одной высоты 40 и скругления 12;
   · страница раздела — колонка во весь экран: заголовок страницы на
     своём отступе сверху, подвал — над меню внизу, гармошка — посредине
     оставшегося места; свободная высота не копится внизу;
   · строки гармошки и промежутки между ними растут с высотой экрана
     (строка до 64): на высоком телефоне в строку увереннее попадает
     палец, и список занимает свою долю экрана. */
@media (max-width:1100px){.shapka .knopka{min-height:40px}}
body:has(.stranica-zag){display:flex;flex-direction:column;min-height:100svh}
body:has(.stranica-zag) > main{flex:1 0 auto;display:flex;flex-direction:column}
body:has(.stranica-zag) .garmoshka{margin-block:auto}
/* над заголовком страницы — своя доля свободной высоты, но не больше
   40: иначе заголовок прижат к шапке, когда ниже просторно, а на
   короткой странице не уплывает к середине экрана. Растущий отступ
   разбирает свободное место первым, остаток делят поля гармошки. */
body:has(.stranica-zag) > main::before{content:'';flex:1 1 0;max-height:clamp(0px,4svh,40px)}
/* слово с дефисом не рвётся на строки («по-/старому») */
.cel{white-space:nowrap}
@media(max-width:400px){footer .razd{display:none}footer .cel{display:block}}
/* двойная тень-фильтр у заголовка снята 10.10: за ним плотная подложка,
   а фильтр перерисовывался с бликом каждый кадр */

/* ── гармошка разделов: открыл один — остальные закрылись ──────────
   Слово автора 08.10: «как гармошка… один нажал, он открывается…
   следующий открываешь, верхний закрывается», «чтобы всё было на
   одном экране». <details name> закрывает соседей сам; скрипт в шапке
   — то же для браузеров постарше и раскрытие по адресу #раздела. */
/* колонка не шире экрана: иначе сетка растягивается под самую длинную
   однострочную подпись, и страница уезжает вбок на узком телефоне */
.garmoshka{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(7px,1.1svh,12px);margin-top:14px}
.razdel{min-width:0}
/* плашки полупрозрачны: за ними крутится шар из точек знака (слово
   автора 08.10: «на фоне… когда у нас идут плашки меню… пусть
   вращается сфера»); текст на плашке остаётся светлым по тёмному */
.razdel{border:1px solid var(--line);border-radius:16px;
  background:color-mix(in srgb,var(--sur) 70%,transparent)}
.razdel[open]{border-color:color-mix(in srgb,var(--a) 45%,var(--line))}
.razdel > summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  gap:12px;padding:3px 44px 3px 14px;position:relative;min-height:clamp(42px,6svh,64px)}
.razdel > summary::-webkit-details-marker{display:none}
.razdel > summary::after{content:'';position:absolute;right:18px;top:50%;
  width:9px;height:9px;border-right:2px solid var(--a);border-bottom:2px solid var(--a);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.razdel[open] > summary::after{transform:translateY(-30%) rotate(-135deg)}
.razdel-nomer{flex:none;width:30px;height:30px;border-radius:9px;display:grid;
  place-items:center;font-weight:800;font-size:.9em;color:var(--a);
  background:color-mix(in srgb,var(--a) 14%,transparent)}
/* flex:1 и min-width:0 — иначе однострочный заголовок мерится по
   всей своей длине и толкает страницу вбок на узком телефоне */
.razdel-zag{display:flex;flex-direction:column;flex:1;min-width:0}
/* в строке: крупно короткое название раздела, мелко — его заголовок
   одной строкой; раскрыл — заголовок виден целиком */
.razdel-zag b{font-size:1.02em;line-height:1.3;letter-spacing:-.01em}
.razdel-zag small{color:var(--t2);font-size:.82em;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.razdel[open] .razdel-zag small{white-space:normal;color:var(--t1)}
.razdel-telo{padding:2px 14px 16px}
.razdel-telo > .podzag:first-child{margin-top:0}
.razdel-telo .setka,.razdel-telo .shagi,.razdel-telo .stroki,.razdel-telo .tsep,
.razdel-telo .voprosy,.razdel-telo .uznat{margin-top:12px}
/* ── ОТКРЫТЫЙ РАЗДЕЛ — ОДИН ЭКРАН И ТРИ РАЗМЕРА ───────────────────
   Слово автора 08.10: «огромные портянки, которые нужно прокручивать.
   Ничего мы не прокручиваем. Нахрена ты в один размер пишешь? Зачем
   тебе аккордеон тогда?» и «сверху единица стоит, справа от неё пусто,
   потом заголовок… вниз».
   Поэтому внутри раздела не карточки-коробки, а строки, и у текста три
   ступени: вступление — крупно и светло, название пункта — жирно,
   пояснение — мелко и приглушённо. Номер шага стоит в строку с его
   названием, а не над ним. Открытый раздел целиком помещается между
   шапкой и меню внизу (проба ЭКРАНЫ открывает каждый и мерит), а
   скрипт в шапке ставит его под шапку — листать не нужно. */
.razdel-telo .podzag{font-size:1em;line-height:1.5;color:var(--t1);margin-bottom:0}
.razdel-telo .podzag b{color:var(--t1)}
.razdel-telo .setka{gap:10px}
.razdel-telo .kartochka{background:none;border:none;border-radius:0;
  border-left:2px solid color-mix(in srgb,var(--a) 55%,transparent);padding:1px 0 1px 12px}
.razdel-telo .kartochka:hover{transform:none;border-color:var(--a)}
.razdel-telo .kartochka h3{font-size:.97em;line-height:1.3;margin-bottom:.1em}
.razdel-telo .kartochka p{font-size:.85em;line-height:1.45}
.razdel-telo .kartochka p+p{margin-top:.35em}
.razdel-telo .kartochka .yarlyk{font-size:.62em;margin-bottom:2px}
.razdel-telo .kartochka .summa{margin:0 0 .1em}
.razdel-telo .kartochka .knopka{margin-top:10px}
.razdel-telo .shag p,.razdel-telo .stroki li,.razdel-telo .uznat li{font-size:.86em;line-height:1.45}
.razdel-telo .uznat{gap:6px}
.razdel-telo .uznat li{padding:8px 12px}
/* шаг: номер в строку с названием, пояснение под названием */
.razdel-telo .shagi{gap:8px 18px}
.razdel-telo .shag{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:10px;
  padding:0;border:none;border-radius:0;background:none}
.razdel-telo .shag::before{grid-row:1 / span 2;margin:0;font-size:1.05em;line-height:1.3}
.razdel-telo .shag b{font-size:.97em;line-height:1.3;margin:0}
.razdel-telo .shag p{grid-column:2}
.razdel-telo .stroki{gap:0}
/* строка — одним абзацем: жирное слово и пояснение идут подряд, а не
   столбиком (во флексе пояснение уезжало под слово, и справа от слова
   оставалась пустота — ровно то, на что автор показал 08.10) */
.razdel-telo .stroki li{display:block;position:relative;background:none;border:none;
  border-radius:0;padding:5px 0 5px 16px}
.razdel-telo .stroki li::before{position:absolute;left:0;top:.42em}
.razdel-telo .stroki li b{font-size:1.1em}
.razdel-telo .printsip{margin-top:12px !important;font-size:clamp(16px,2vw,19px)}
.razdel-telo .tsep{gap:6px}
.razdel-telo .tsep .zveno{padding:4px 11px;font-size:.86em}
.razdel-telo .tsep .strelka{font-size:.86em}
/* поля вопросов ужаты 12.10: ответ «Кому разбор не подойдёт?» получил слова
   оферты 5.2 о переносе и полном возврате, и раскрытые «Вопросы» должны
   по-прежнему стоять целиком между шапкой и меню */
.razdel-telo .voprosy{gap:5px}
.razdel-telo .vopros summary{padding:8px 40px 8px 14px;font-size:.93em;min-height:44px;display:flex;align-items:center}
.razdel-telo .vopros > div{padding:0 14px 11px;font-size:.88em}
.nazad{display:flex;width:max-content;align-items:center;gap:6px;color:var(--t3);
  font-size:.86em;font-weight:600;margin-bottom:10px}
/* надзаголовок на страницах разделов не нужен: что за страница, говорит
   заголовок, а строка надзаголовка слипалась с «На главную» и ела высоту */
.stranica-zag .nadzag{display:none}
/* на большом экране «На главную» не нужна — туда ведут знак в шапке и
   меню, а строка съедала высоту списка разделов. Стоит ПОСЛЕ правила
   .nazad: раньше него оно перебивалось и не работало вовсе. */
@media(min-width:881px){.nazad{display:none}}
.nazad:hover{color:var(--t1)}
/* «дальше» — плашка-ссылка на следующую страницу */
.dalee{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-top:8px;
  padding:12px 16px;border-radius:14px;border:1px solid
  color-mix(in srgb,var(--a) 40%,var(--line));color:var(--t1);
  background:color-mix(in srgb,var(--sur) 82%,transparent)}
.dalee small{color:var(--t3);font-weight:700;font-size:.72em;
  letter-spacing:.12em;text-transform:uppercase}
.dalee b{font-size:1em}
.dalee:hover{border-color:var(--a)}

/* ── плитки разделов на главной — как экран приложения ──────────── */
.plitki{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
/* под главной плиткой четыре — ровно: две в ряд, на широком четыре */
@media(min-width:1000px){.plitki{grid-template-columns:repeat(4,minmax(0,1fr))}}
.plitka{display:flex;flex-direction:column;gap:6px;padding:18px 18px 20px;
  border-radius:var(--r);border:1px solid var(--line);color:var(--t1);
  background:color-mix(in srgb,var(--sur) 82%,transparent);
  transition:border-color .2s,transform .2s}
.plitka:hover{border-color:color-mix(in srgb,var(--a) 55%,var(--line));
  transform:translateY(-2px)}
.plitka svg{width:24px;height:24px;stroke:var(--a);fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:4px}
.plitka b{font-size:1.02em;letter-spacing:-.01em}
.plitka span{color:var(--t2);font-size:.88em}
.plitka.glavnaya{grid-column:1/-1;border-color:color-mix(in srgb,var(--a) 45%,var(--line))}

/* ── «узнаёте себя?» — короткие строки, человек находит своё ────── */
.uznat{display:grid;gap:10px;margin-top:6px}
@media(min-width:760px){.uznat{grid-template-columns:repeat(2,minmax(0,1fr))}}
.uznat li{list-style:none;padding:14px 16px;border-radius:14px;
  border:1px solid var(--line);color:var(--t1);
  background:color-mix(in srgb,var(--sur) 82%,transparent)}
.uznat li::before{content:'—';color:var(--a);margin-right:8px}

/* ── вопросы: раскрываются нажатием, без скрипта ────────────────── */
.voprosy{display:grid;gap:10px}
.vopros{border:1px solid var(--line);border-radius:14px;
  background:color-mix(in srgb,var(--sur) 82%,transparent)}
.vopros summary{list-style:none;cursor:pointer;padding:16px 44px 16px 18px;
  font-weight:700;position:relative}
.vopros summary::-webkit-details-marker{display:none}
.vopros summary::after{content:'+';position:absolute;right:18px;top:50%;
  transform:translateY(-50%);color:var(--a);font-size:1.3em;font-weight:500}
.vopros[open] summary::after{content:'−'}
.vopros > div{padding:0 18px 18px;color:var(--t2)}
.vopros > div p+p{margin-top:.6em}

/* цена разбора: одна на сайте, видна с первого экрана */
.tsena{margin-top:22px;font-size:clamp(17px,2vw,20px);color:var(--t2)}
.tsena b{font-size:1.25em;font-weight:800;color:var(--t1)}
.tsena-kartochka .summa{font-size:clamp(40px,6vw,56px);font-weight:800;
  letter-spacing:-.03em;line-height:1;margin:.15em 0 .3em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent}
.tsena-kartochka .knopka{margin-top:22px}

/* дороги записи: четыре равные кнопки, на телефоне — два ряда.
   Цвета мессенджеров не берутся: палитра сайта сине-фиолетовая. */
.svyaz{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
  max-width:640px}
@media(min-width:760px){.svyaz{grid-template-columns:repeat(4,minmax(0,1fr))}}
.svyaz a{flex-direction:column;gap:2px;min-height:68px;padding:10px 12px;
  text-align:center}
.svyaz a span{color:var(--t1);font-weight:700}
.svyaz a small{color:var(--t3);font-weight:500;font-size:.78em;
  overflow-wrap:anywhere}
.smotret{display:flex;flex-wrap:wrap;gap:12px}
.zapasnye{margin-top:18px;color:var(--t3);font-size:.88em}
.zapasnye a{color:var(--t2);text-decoration:underline;text-underline-offset:3px}

/* меню контактов внизу — на всех ширинах, как на анонсе: слово автора
   08.10 «надо, чтобы всё помещалось сразу в одном экране» — главная
   больше не несёт раздела записи, и связь всегда под рукой. Низу
   страницы — отступ под полосу, иначе она закроет подвал. */
/* высота нижней панели: кнопки и строка исполнителя под ними (11.10) */
:root{--polosa:120px}
body{padding-bottom:calc(var(--polosa) + env(safe-area-inset-bottom))}
/* подвал — одна строка (слово автора 09.10 «чтобы прокрутки не было…
   в подвал… какой-то определённой строчкой»); на узком телефоне — две
   ровные: оговорка и подпись, а не обрывок «· 18+» в начале строки */
footer{padding:10px 0 0;font-size:.7em;line-height:1.35;border-top:none}
footer p{margin:0}
/* строка продавца — только на страницах для России (sobrat-stran.py): Робокасса
   требует в подвале ИП, ИНН или ОГРНИП, город, телефон, почту и свой знак */
.prodavec{margin-top:6px;color:var(--t2)}
/* справа у подвала висит кнопка «наверх» (44px и отступ 16px): длинная
   строка продавца под неё не заходит */
@media(max-width:880px){footer .prodavec{padding-right:60px}}
.menyu-okno .menyu-pravo.prodavec{margin-top:6px}
.prodavec .robokassa,.menyu-okno .menyu-pravo .robokassa{display:inline-flex;vertical-align:middle;
  margin:0 0 0 4px;padding:3px 6px;border-radius:6px;background:#fff;line-height:0}
.prodavec .robokassa:hover,.menyu-okno .menyu-pravo .robokassa:hover{background:#fff}
.prodavec .robokassa img{display:block;height:12px;width:auto}

/* ── меню: внизу — смотреть бесплатно и оговорка ───────────────── */
.menyu-niz{margin-top:6px;padding:12px 14px 6px;border-top:1px solid var(--line)}
.menyu-niz > span{display:block;color:var(--t3);font-size:.74em;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}
/* площадки значками в стиле меню внизу: линия 1,9, скругление 12;
   меню открылось — значки прорисовываются волной слева направо */
.menyu-soc{display:flex;flex-wrap:wrap;gap:8px}
.menyu-okno .menyu-soc a{display:grid;place-items:center;
  width:44px;height:44px;padding:0;border-radius:12px;color:var(--t1);
  background:var(--sur2);border:1px solid var(--line);transition:border-color .2s,box-shadow .2s}
.menyu-okno .menyu-soc a:hover:hover{border-color:var(--a);
  box-shadow:0 0 16px color-mix(in srgb,var(--a) 40%,transparent)}
.menyu-soc svg{width:22px;height:22px;stroke:currentColor;fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.menyu-soc a:nth-child(1){--i:0}
.menyu-soc a:nth-child(2){--i:1}
.menyu-soc a:nth-child(3){--i:2}
.menyu-soc a:nth-child(4){--i:3}
.menyu-soc a:nth-child(5){--i:4}
.menyu[open] .menyu-soc svg *{stroke-dasharray:1;
  animation:znak-risuetsya .9s cubic-bezier(.55,0,.25,1) both;
  animation-delay:calc(.08s + var(--i) * .09s)}
.menyu-niz small{display:block;margin-top:10px;color:var(--t3);font-size:.74em}
/* низ меню — одна строка мелким шрифтом: оговорка, документы, cookie.
   Ссылки выглядят ссылками в строке, а поле нажатия у них — 44 точки
   (норма касания), строка от этого не раздвигается */
.menyu-okno .menyu-pravo{margin:12px 0 0;color:var(--t3);font-size:.74em;line-height:1.5}
.menyu-okno .menyu-pravo a{display:inline-block;padding:12px 0;margin:-12px 0;line-height:1.5;
  color:var(--t2);font-weight:600;text-decoration:underline;text-underline-offset:2px;border-radius:0}
.menyu-okno .menyu-pravo a:hover{background:none;color:var(--t1)}
footer a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.okno-dok{margin:10px 0 0;font-size:.74em;line-height:1.45;color:var(--t3)}
.okno-dok a{color:var(--t2);text-decoration:underline;text-underline-offset:2px;white-space:nowrap}

/* ── окно записи: снизу на телефоне, по центру на большом экране ──── */
.okno-zapisi{border:none;padding:0;background:transparent;color:var(--t1);
  width:100%;max-width:100vw;max-height:100dvh;margin:auto auto 0}
.okno-zapisi::backdrop{background:rgba(0,0,0,.62);backdrop-filter:blur(4px)}
.okno-telo{position:relative;max-width:560px;margin:0 auto;
  padding:26px 20px calc(22px + env(safe-area-inset-bottom));
  background:var(--sur);border:1px solid var(--line);border-bottom:none;
  border-radius:22px 22px 0 0;box-shadow:0 -18px 50px rgba(0,0,0,.5)}
@media(min-width:881px){.okno-zapisi{margin:auto}
  .okno-telo{border-radius:22px;border-bottom:1px solid var(--line);padding-bottom:26px}}
.okno-telo h2{font-size:clamp(24px,6vw,30px);margin:6px 0 8px}
.okno-telo > p{color:var(--t2);margin-bottom:18px;max-width:30em}
.okno-zakryt{position:absolute;right:12px;top:12px;width:40px;height:40px;
  border-radius:12px;border:1px solid var(--line);background:var(--sur2);
  color:var(--t1);font-size:22px;line-height:1;cursor:pointer}
.okno-podrobnee{display:inline-block;margin-top:16px;color:var(--t2);font-weight:600}

/* ── меню контактов внизу ЖИВОЕ ─────────────────────────────────
   Слово автора 08.10: «зачем тогда контакты внизу?… сделай так, чтобы
   анимация контактов, чтобы они как-то светились, переливались…
   волну пусти… отрисовка значков, чтобы привлечь внимание». Раздел
   записи со страниц снят — дорога к разбору теперь только здесь и в
   окне, и полоса должна звать сама.
   Три движения, одним тактом в 4,8 с:
   · при входе значки прорисовываются линией, один за другим;
   · волна — как рукой провели (слово автора 09.10: «как лампочки…
     тык-тык-тык… плавно… вспыхивает и потухает таким затуханием…
     как будто я рукой провёл, и момент касания чтобы с каждым был
     свой»): значок разгорается плавно — целую секунду, по мягкой
     кривой без рывка в середине (за 0,55 с по крутой кривой выходила
     вспышка — слово автора 09.10: «появление резкое как вспышка,
     затухание более-менее»), — приподнимается и подрастает, а гаснет
     за 1,55 с; следующий начинает разгораться через 0,28 с, пока
     предыдущий ещё не дошёл до пика, — переход, а не вспышки по
     очереди;
   · с той же скоростью, что рука, по полосе идёт блик — проходит
     над значком в миг, когда тот ярче всего. Рамка полосы не
     подсвечивается — слово автора 09.10: «и рамку не подсвечивай».
   Контур значков полосы тоньше общего (1,4 против 1,9) — слово автора
   09.10: «мне не нравится толщина контура иконок».
   Задержка ячейки — --i: волна, а не мигание всех разом (проба
   ЭКРАНЫ сверяет, что задержки растут слева направо, что значок
   разгорается не вспышкой — долго и без крутого рывка, — гаснет не
   быстрее, чем разгорался, и что соседние перекрываются).
   Скрыто в покое ничего не остаётся: прорисовка кончается полной
   линией. Движение идёт при любых настройках телефона — слово автора
   09.10: «почему ты анимацию убрал с нижней плашки… и сверху логотип
   не крутится» (у автора на телефоне включено «убрать анимацию», и
   при нём всё стояло). */
.polosa-svyazi .tab:nth-child(1){--i:0}
.polosa-svyazi .tab:nth-child(2){--i:1}
.polosa-svyazi .tab:nth-child(3){--i:2}
.polosa-svyazi .tab:nth-child(4){--i:3}
.polosa-svyazi .tabs{position:relative;isolation:isolate}
/* ── ПАНЕЛЬ: кнопки и строка исполнителя одним блоком (11.10) ─────
   Кнопки сверху, под тонкой чертой одна строка: кто продаёт и где его
   оферта, данные, реквизиты. Кегль 11 — норма вёрстки; ссылки в строке —
   ссылки в предложении (исключение касания WCAG). На широком экране в ту
   же строку встаёт номер (ИИН): места хватает. */
.polosa-svyazi .polosa-panel{pointer-events:auto;max-width:520px;margin:0 auto;
  background:var(--sur);border:1px solid var(--line);border-radius:18px;
  box-shadow:0 12px 40px rgba(0,0,0,.45);overflow:hidden}
.polosa-svyazi .polosa-panel .tabs{max-width:none;border:none;border-radius:0;box-shadow:none;background:none}
.polosa-svyazi .yur{margin:0;padding:4px 12px 6px;border-top:1px solid var(--line);
  font-size:11px;line-height:1.45;color:var(--t3);text-align:center}
.polosa-svyazi .yur b{font-weight:600;color:var(--t2)}
.polosa-svyazi .yur a{color:var(--t2);text-decoration:underline;text-underline-offset:2px}
.polosa-svyazi .yur .robokassa{display:inline-flex;vertical-align:middle;margin-left:2px;padding:2px 5px;
  border-radius:5px;background:#fff;line-height:0;text-decoration:none}
.polosa-svyazi .yur .robokassa img{display:block;height:10px;width:auto}
.polosa-svyazi .yur .yur-nomer{display:none}
@media(min-width:600px){.polosa-svyazi .yur .yur-nomer{display:inline}}
@media(min-width:881px){.polosa-svyazi .polosa-panel{max-width:640px}}
.polosa-svyazi .tabs::before{content:'';position:absolute;inset:0;z-index:-1;
  border-radius:inherit;pointer-events:none;
  background:linear-gradient(100deg,transparent 38%,
    color-mix(in srgb,var(--a) 26%,transparent) 47%,
    color-mix(in srgb,var(--a2) 20%,transparent) 53%,transparent 62%)
    100% 0/300% 100% no-repeat;
  animation:blik-polosa 4.8s linear 1.9s infinite}
.polosa-svyazi .tab{position:relative;isolation:isolate}
.polosa-svyazi .tab > span{animation:podpis-volna 4.8s infinite;
  animation-delay:calc(1.6s + var(--i) * .28s)}
.polosa-svyazi .tab::before{content:'';position:absolute;z-index:-1;
  left:50%;top:1px;width:46px;height:46px;margin-left:-23px;
  border-radius:50%;pointer-events:none;opacity:0;will-change:opacity;
  background:radial-gradient(circle,color-mix(in srgb,var(--a) 55%,transparent) 0,
    color-mix(in srgb,var(--a2) 30%,transparent) 34%,transparent 68%);
  animation:svet-volna 4.8s infinite;
  animation-delay:calc(1.6s + var(--i) * .28s)}
.polosa-svyazi .tab svg{overflow:visible;stroke-width:1.4;
  animation:znak-volna 4.8s infinite;
  animation-delay:calc(1.6s + var(--i) * .28s)}
.polosa-svyazi .tab svg *{stroke-dasharray:1;
  animation:znak-risuetsya 1.1s cubic-bezier(.55,0,.25,1) both;
  animation-delay:calc(.25s + var(--i) * .16s)}
@keyframes znak-risuetsya{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
/* кривая касания: разгорается мягко и долго (0 → 20,8% такта = 1 с,
   кривая «синус»: медленно трогается, ровно набирает, мягко доходит),
   гаснет плавно (20,8% → 53,1% = 1,55 с); в покое каждое свойство
   названо явно, чтобы затухание приходило ровно в покой, а не тянулось
   до конца такта */
/* Значок и подпись светлеют яркостью (filter:brightness), а не сменой
   цвета: цвет браузер перекрашивает на главном потоке каждый кадр, и
   волна брала пятую часть его времени на телефоне — страница от этого
   шла рывками (слово автора 10.10 «нету плавности»). Яркость, как сдвиг
   и прозрачность, считает видеокарта. Тот же вид: серый --t3 ×1,68 —
   светло-сиреневый пик значка, ×1,9 — белая подпись. */
@keyframes znak-volna{
  0%{transform:translateY(0) scale(1);filter:brightness(1);
    animation-timing-function:cubic-bezier(.37,0,.63,1)}
  53.1%,100%{transform:translateY(0) scale(1);filter:brightness(1)}
  20.8%{transform:translateY(-3px) scale(1.16);filter:brightness(1.68);
    animation-timing-function:cubic-bezier(.45,0,.3,1)}}
/* свечение за значком — не тенью-фильтром (она перерисовывается
   каждый кадр и стоила 8–10 кадров в секунду на телефоне), а готовым
   пятном света, у которого меняется только прозрачность: это видеокарта
   делает даром. Тот же такт и та же кривая, что у значка. */
@keyframes svet-volna{
  0%{opacity:0;animation-timing-function:cubic-bezier(.37,0,.63,1)}
  53.1%,100%{opacity:0}
  20.8%{opacity:1;animation-timing-function:cubic-bezier(.45,0,.3,1)}}
@keyframes podpis-volna{
  0%{filter:brightness(1);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  53.1%,100%{filter:brightness(1)}
  20.8%{filter:brightness(1.9);animation-timing-function:cubic-bezier(.45,0,.3,1)}}
/* блик идёт ровно, со скоростью руки: над первым значком — в его пик
   (1 с), над последним — в его пик (1,84 с) */
@keyframes blik-polosa{0%{background-position:100% 0}46.7%,100%{background-position:0 0}}

/* ── САЙТ ЖИВОЙ ─────────────────────────────────────────────────────
   Слово автора 08.10: «какую-то анимацию добавить, такую интересную
   графику… чтобы там переливалось что-то… чтобы не мёртвый сайт».
   · позади текста — сеть связей с бегущими сигналами (zhivoe.js);
   · СТАФИР в заголовке главной переливается сине-фиолетовым;
   · заголовки страниц раз в несколько секунд проходит блик;
   · по главной кнопке пробегает отблеск;
   · плитки главной: значки прорисовываются при входе, по плиткам —
     волна света слева направо, как по меню внизу;
   · портрет медленно дышит — приближается и отходит;
   · открытый раздел гармошки светится кромкой.
   Ничего не прячется и не ждёт движения: без анимации всё стоит на
   своих местах. Движение — при любых настройках (слово автора 09.10). */
/* ФОН — утверждённая заставка 3D модуля СТАФИРа (zastavka-fon.js):
   россыпь → шар → объёмный глаз-знак из точек, моргает → шар → россыпь.
   Слово автора 08.10: «её чуть приглушить, чтобы она не выбивалась» —
   приглушает прозрачность здесь. Фон — страниц разделов: стоит за всем
   экраном и не едет с текстом. На обложке главной его нет — слово
   автора 08.10: «это фон для страницы… я же тебя не в фон фотографии
   просил его вставить. Это обложка». */
.fon-znak{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.7}
.fon-znak canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* шар крутят рукой — текст под пальцем не выделяется */
.kruchu-shar,.kruchu-shar *{cursor:grabbing !important;user-select:none;-webkit-user-select:none}

@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .geroy-oblozhka h1 .gradientom{
    background:linear-gradient(90deg,#7FB2FF,var(--a),var(--a2),#D7D0FF,#7FB2FF) 0 0/300% 100%;
    -webkit-background-clip:text;background-clip:text;color:transparent;
    animation:perelivy 7s linear infinite}
  .stranica-zag h1{
    background:linear-gradient(100deg,var(--t1) 42%,#D7D0FF 48%,#B9A8FF 50%,var(--t1) 56%) 100% 0/300% 100%;
    -webkit-background-clip:text;background-clip:text;color:transparent;
    animation:zag-blik 6.5s ease-in-out 1.2s infinite}
}
@keyframes perelivy{to{background-position:-300% 0}}
@keyframes zag-blik{0%{background-position:100% 0}35%,100%{background-position:0 0}}

/* отблеск по кнопке «Записаться» в шапке: косая полоса света раз в
   4,5 с. Большой кнопки с ценой на страницах нет (слово автора 08.10:
   «сразу с людей деньги просим… сверху в шапке есть же записаться») —
   звать должна она. */
.shapka .knopka{position:relative;overflow:hidden;isolation:isolate}
.shapka .knopka::after{content:'';position:absolute;
  top:0;bottom:0;left:0;width:40%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);
  transform:translateX(-160%) skewX(-18deg);
  animation:otblesk 4.5s ease-in-out 2s infinite}
@keyframes otblesk{0%{transform:translateX(-160%) skewX(-18deg)}35%,100%{transform:translateX(330%) skewX(-18deg)}}

/* плитки главной: значки прорисовываются, затем волна света. Плавная
   кривая касания меню внизу (09.10) сюда не перенесена — слово автора
   09.10: «это только по меню касается… это только исправь». */
.geroy-oblozhka .plitka:nth-child(1){--i:0}
.geroy-oblozhka .plitka:nth-child(2){--i:1}
.geroy-oblozhka .plitka:nth-child(3){--i:2}
.geroy-oblozhka .plitka:nth-child(4){--i:3}
/* Волна света по плиткам — только сдвигом и прозрачностью: их видеокарта
   двигает готовым слоем, без перерисовки. Прежде кромка мигала тенью и
   цветом рамки, а блик ехал фоном — браузер перерисовывал плитки каждый
   кадр: замер на среднем телефоне 20 кадров в секунду, без них 51
   (слово автора 10.10 «нету плавности, подвисает»). */
.geroy-oblozhka .plitka{position:relative;isolation:isolate;overflow:hidden}
.geroy-oblozhka .plitka::before{content:'';position:absolute;top:0;bottom:0;left:0;width:60%;
  z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent,color-mix(in srgb,var(--a) 22%,transparent),transparent);
  transform:translateX(-110%);will-change:transform;
  animation:blik-sdvig 5.4s ease-in-out infinite;
  animation-delay:calc(2.2s + var(--i) * .22s)}
.geroy-oblozhka .plitka::after{content:'';position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;opacity:0;will-change:opacity;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a) 75%,var(--line)),
    inset 0 0 18px color-mix(in srgb,var(--a) 26%,transparent);
  animation:plitka-svet 5.4s ease-in-out infinite;
  animation-delay:calc(2.2s + var(--i) * .22s)}
.geroy-oblozhka .plitka svg{overflow:visible}
.geroy-oblozhka .plitka svg *{stroke-dasharray:1;
  animation:znak-risuetsya 1.2s cubic-bezier(.55,0,.25,1) both;
  animation-delay:calc(.6s + var(--i) * .15s)}
@keyframes plitka-svet{0%,24%,100%{opacity:0}9%{opacity:1}}
@keyframes blik-sdvig{0%{transform:translateX(-110%)}38%,100%{transform:translateX(190%)}}

/* портрет дышит: фон перенесён на слой внутри, слой медленно
   приближается и отходит; рамка портрета (и маска) стоят */
.geroy-oblozhka .kartina{overflow:hidden}
.geroy-oblozhka .kartina::before{content:'';position:absolute;inset:0;
  background:inherit;-webkit-mask-image:none;mask-image:none;
  transform-origin:50% 22%;animation:portret 16s ease-in-out infinite alternate;
  will-change:transform}   /* слой на видеокарте: дыхание без перерисовки */
@keyframes portret{from{transform:scale(1)}to{transform:scale(1.06)}}

/* открытый раздел гармошки — кромка светится ровно, номер переливается.
   Мигание кромки (10.10 снято) перерисовывало весь раздел каждый кадр —
   и как раз пока он раскрывался. */
.razdel[open]{box-shadow:0 0 18px color-mix(in srgb,var(--a) 16%,transparent)}
.razdel[open] .razdel-nomer{color:#fff;
  background:linear-gradient(120deg,var(--a),var(--a2),#7FB2FF,var(--a)) 0 0/300% 100%;
  animation:perelivy 5s linear infinite}


/* ═══ ДВИЖЕНИЕ — ОДНО НА ВЕСЬ САЙТ ═══════════════════════════════════
   Слово автора 09.10: «нажал, какой-то там прямоугольник появляется,
   подсвечивается и резко открывается… сделай плавно, человек должен
   расслабляться, мы же работаем на спокойствие человека… все движения
   плавные, достаточно быстрые… через проявление… если ты задаёшь
   какую-то анимацию кнопкам, она везде должна быть единая».
   Нормы (они же в пробе экранов):
   · кривая одна — cubic-bezier(.2,.7,.2,1): быстро трогается, мягко
     доходит (как «замедление» в Material Design);
   · отклик на касание — 0,16 с; появление меню и окна — 0,28 с, уход —
     0,22 с; раскрытие и закрытие раздела — 0,32 с; смена страницы — 0,3 с;
   · нажатие у всех кнопок и плашек одно — мягкое сжатие до 0,97;
   · системная подсветка касания (синий прямоугольник Android) снята,
     рамка фокуса — только для клавиатуры. */
:root{--plavno:cubic-bezier(.2,.7,.2,1);--kasanie:.16s;--poyavlenie:.28s;--raskrytie:.32s}
*{-webkit-tap-highlight-color:transparent}
/* вес правила поднят «html body»: прежние правила шапки («.shapka nav a»)
   иначе перебивали единое нажатие у «Записаться» */
html body :is(.knopka,.prizrak,.dalee,.plitka,.menyu summary,.strelka-nazad,.domoy,.razdel > summary,
.vopros > summary,.polosa-svyazi .tab,.okno-zakryt,.okno-podrobnee,.menyu-okno a,.naverh){
  transition:transform var(--kasanie) var(--plavno),background-color .2s var(--plavno),
    border-color .2s var(--plavno),box-shadow .2s var(--plavno),color .2s var(--plavno),
    opacity .2s var(--plavno)}
html body :is(.knopka,.prizrak,.dalee,.plitka,.menyu summary,.strelka-nazad,.domoy,.razdel > summary,
.vopros > summary,.polosa-svyazi .tab,.okno-zakryt,.okno-podrobnee,.menyu-okno a,.naverh):active{
  transform:scale(.97);opacity:1}
:is(a,button,summary):focus{outline:none}
:is(a,button,summary):focus-visible{outline:2px solid var(--a);outline-offset:3px;border-radius:12px}
/* наведение мышью — у всех одно: светлеет рамка, ничего не прыгает */
.plitka:hover{transform:none}
/* стрелка раздела поворачивается вместе с раскрытием и закрытием */
.razdel > summary::after{transition:transform var(--raskrytie) var(--plavno)}
.razdel.zakryvaetsya > summary::after{transform:translateY(-70%) rotate(45deg)}
/* меню и окно записи проявляются; уходят — скрипт в шапке */
.menyu[open] .menyu-okno{transform-origin:top right;
  animation:poyavlenie-menyu var(--poyavlenie) var(--plavno)}
@keyframes poyavlenie-menyu{from{opacity:0;transform:translateY(-6px) scale(.98)}}
.okno-zapisi[open]{animation:poyavlenie-okna var(--poyavlenie) var(--plavno)}
.okno-zapisi[open]::backdrop{animation:poyavlenie-fona var(--poyavlenie) var(--plavno)}
.okno-zapisi.zakryvaetsya::backdrop{opacity:0;transition:opacity .22s var(--plavno)}
@keyframes poyavlenie-okna{from{opacity:0;transform:translateY(24px)}}
@keyframes poyavlenie-fona{from{opacity:0}}
/* смена страницы — плавная, а не резкая (переход между страницами
   одного сайта, браузеры с View Transitions; прочие — как раньше) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){
  animation-duration:.3s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
/* кнопка «наверх»: появляется, когда страница прокручена (на 240 точек или треть экрана)
   (слово автора 09.10: «если есть какая-то прокрутка… вернуться к
   началу одной кнопкой») — справа над меню внизу */
.naverh{position:fixed;right:16px;z-index:8;width:44px;height:44px;
  bottom:calc(var(--polosa) + env(safe-area-inset-bottom) + 12px);
  display:grid;place-items:center;border-radius:12px;cursor:pointer;
  color:var(--t1);background:var(--sur2);border:1px solid var(--line);
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  opacity:0;pointer-events:none;translate:0 8px;
  transition:opacity var(--poyavlenie) var(--plavno),translate var(--poyavlenie) var(--plavno),
    transform var(--kasanie) var(--plavno)}
.naverh.vidna{opacity:1;pointer-events:auto;translate:0 0}
.naverh svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
@media(min-width:881px){.naverh{right:calc(50% - 520px)}}

/* ═══ КАСАНИЕ — НЕ МЕНЬШЕ 44 ═════════════════════════════════════════
   Норма размера касания: 44×44 (Apple Human Interface Guidelines, WCAG
   2.5.5). Кнопки шапки и «дальше» были 40. */
.shapka .knopka,.menyu summary,.strelka-nazad,.stranica-zag > .dalee{min-height:44px}
.menyu summary{min-width:44px}
.strelka-nazad{width:44px;height:44px}
/* шапка той же высоты, что до кнопок 44: поля 11 вместо 13 */
.shapka{padding-block:11px}
.shapka .knopka{border-radius:12px}

/* ═══ НОРМЫ ВЁРСТКИ ══════════════════════════════════════════════════
   Слово автора 09.10: «есть же чёткие правила… как книгу пишут — поля,
   шрифт, отступ, кегль… для построения сайтов… базовые же должны быть
   нормы проверок». Нормы и откуда они:
   · касание — не меньше 44×44 (Apple Human Interface Guidelines; WCAG
     2.5.5); ссылка внутри предложения — исключение WCAG;
   · кегль — не меньше 11 (нижняя граница подписей у Apple);
   · контраст текста — не меньше 4,5:1, крупного — 3:1 (WCAG 1.4.3, AA);
   · строка текста — не шире 42 кеглей, около 75 знаков (удобочитаемая
     строка — 45–75 знаков);
   · кнопки одного ряда — одной высоты и одного скругления; шаг отступов —
     4 и 8; движение — одно (блок «Движение» выше).
   Мерит saity/proba-ekranov.js («нормы вёрстки»). */
.domoy{min-height:44px}
.polosa-svyazi .tab{flex:1 1 0;min-width:44px;font-size:clamp(11px,3vw,11.5px)}
.menyu-okno .menyu-soc a{width:44px;height:44px;flex:none}
.okno-zakryt{width:44px;height:44px}
.okno-podrobnee{display:inline-flex;align-items:center;min-height:44px}
.kartochka .yarlyk,.razdel-telo .kartochka .yarlyk{font-size:max(11px,.68em)}
.razdel-telo :is(p,li){max-width:42em}

/* ── ПЛАВНОСТЬ · шапка без размытия ────────────────────────────────
   Шапка липкая и лежит над живым шаром: размытие под ней браузер
   пересчитывал каждый кадр шара. Подложка плотнее — размытие не нужно. */
header{-webkit-backdrop-filter:none;backdrop-filter:none;
  background:color-mix(in srgb,var(--bg) 92%,transparent)}