/* system.css */
/* =====================================================================
CROSS ENGLISH · system.css · v4 (S0, ночь 13, 21.10.2026) — v4: красного нет (--act, --lang), пульт цветов html[data-btn|data-acc|data-num]. v3 (прогон 11): v3: номера разделов светлые, мелкий текст ≥ 14 px, касание ≥ 44 px, data-dir. v2: — v1: clip/.stage/:where; v2: запись в 1 поле (.qform), без «дока», текст ≥16, без глифов у заголовков
Система «Скрипторий»: лист (бумага) · плита (коробка одного цвета) ·
миниатюра (живопись на всю коробку + бумажная панель).
Подключение из папки раздела:
Шрифты лежат в ../fonts/ (пути ниже — от этого файла).
Все размеры — числа в «единицах макета» × var(--u):
ПК (≥1024): макет 1440, --u = max(1px, calc(100vw * var(--vwk,1))/1440) → на 1710/1920 всё растёт пропорционально, как у Вирджинии
тел (<1024): макет 390, --u = clamp(1px, calc(100vw * var(--vwk,1))/390, 1.35px)
Пример: width: calc(444 * var(--u)); Токены шрифтов — тоже числа.
===================================================================== */
/* ---------- 0. Шрифты (variable woff2, подмножества v2.2: кириллица / латиница+знаки, ось wght урезана: Garamond 400–600, Vollkorn 400–700; ≈ 182 КБ на все 8 файлов вместо 290) ---------- */
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400 600;font-display:swap;
src:url(/fonts/sub/eb-garamond-cyrillic-wght-normal.woff2) format("woff2");
unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400 600;font-display:swap;
src:url(/fonts/sub/eb-garamond-latin-wght-normal.woff2) format("woff2");
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+271B,U+FEFF,U+FFFD}
@font-face{font-family:"EB Garamond";font-style:italic;font-weight:400 600;font-display:swap;
src:url(/fonts/sub/eb-garamond-cyrillic-wght-italic.woff2) format("woff2");
unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"EB Garamond";font-style:italic;font-weight:400 600;font-display:swap;
src:url(/fonts/sub/eb-garamond-latin-wght-italic.woff2) format("woff2");
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Vollkorn";font-style:normal;font-weight:400 700;font-display:swap;
src:url(/fonts/sub/vollkorn-cyrillic-wght-normal.woff2) format("woff2");
unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Vollkorn";font-style:normal;font-weight:400 700;font-display:swap;
src:url(/fonts/sub/vollkorn-latin-wght-normal.woff2) format("woff2");
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Vollkorn";font-style:italic;font-weight:400 700;font-display:swap;
src:url(/fonts/sub/vollkorn-cyrillic-wght-italic.woff2) format("woff2");
unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Vollkorn";font-style:italic;font-weight:400 700;font-display:swap;
src:url(/fonts/sub/vollkorn-latin-wght-italic.woff2) format("woff2");
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* ---------- 1. Токены ---------- */
:root{
/* палитра сайта (COMMON) — других цветов нет */
--paper:#f7f3ea; /* лист: фон страницы */
--bone:#fbf8f1; /* кость: светлая плита, бумажная панель, карточка */
--azure:#29466f; /* лазурь */
--verd:#2c5a4e; /* ярь */
--ink:#24262b; /* тушь */
--gold:#c9a84c; /* золото: знаки, цифры, ✛ (на бумаге только ≥ 40px — контраст 2,1) */
--gold-l:#e9cf8e; /* светлое золото: акцент на тёмных плитах (≥ 5,1:1) */
--gold-d:#8a6a1f; /* тёмное золото: мелкий золотой текст на бумаге (4,6:1) */
/* ночь 13: КРАСНОГО НЕТ (Роман 20.10: «мне не нравится красный текст и кнопки»). Киноварь заменена двумя ролями из цветов сайта,
обе переключаются пультом (html[data-btn], html[data-acc]):
--act — главная кнопка: тушь / лазурь / ярь; --lang — «языковой», буквица, рубрики: лазурь / тёмное золото / ярь */
--act:var(--ink);
--lang-light:var(--azure); --lang:var(--lang-light); /* по умолчанию лазурь (совет H: синяя рубрика рукописи, 9,1:1 на бумаге) */
--red:var(--lang); /* устаревшее имя для старых разделов: значение больше не красное */
--muted:#55524b; /* вторичный текст на бумаге (6,2:1) */
--hair:rgba(36,38,43,.16); /* контур карточки/поля (не разделитель!) */
/* роли (переопределяются внутри тёмных плит) */
--fg:var(--ink); --fg-soft:var(--muted); --accent:var(--gold-d);
/* номер раздела (пульт html[data-num]): золото как в черновике 1 / лазурь как в лабе / светлый как в прогоне 11 */
--num-light:var(--gold); --num-dark:rgba(233,207,142,.62); --num:var(--num-light);
--cta-bg:var(--act); --cta-fg:var(--bone);
/* шрифты */
--f-head:"EB Garamond",Georgia,"Times New Roman",serif;
--f-text:"Vollkorn",Georgia,"Times New Roman",serif;
/* единица макета */
--u:max(.711px, calc(calc(100vw * var(--vwk,1)) / 1440)); /* 20.10 дирижёр: 1024–1439 px — макет 1440 сжимается пропорционально (было 1px — шапка и правая колонка обрезались, на 1024 была прокрутка вбок) */
/* шкала шрифтов ПК (px в макете 1440) */
--fs-display:112; --lh-display:.92; /* h1 шапки */
--fs-h2:52; --lh-h2:1.04; /* заголовок раздела */
--fs-lead:40; --lh-lead:1.12; /* крупное утверждение в плите */
--fs-h3:32; --lh-h3:1.08; /* название карточки */
--fs-h4:24; --lh-h4:1.15; /* подзаголовок, вопрос аккордеона */
--fs-body:18; --lh-body:1.5; /* текст (кириллица) */
--fs-small:16; --lh-small:1.45; /* v2: мельче 16 на ПК только юридические сноски (.t-micro) */
--fs-micro:14; /* v3: мельче 14 px на странице ничего нет (J2 п. 5) */
--fs-num:136; /* номер раздела */
--fs-stat:76; /* крупная цифра (60, 2 000 ₽, C2) */
--fs-btn:20;
/* сетка и коробки ПК */
--gut:36; /* поле страницы (плита от края окна) */
--gap:20; /* зазор между коробками внутри раздела */
--sec:64; /* зазор между разделами */
--pad:48; /* внутреннее поле плиты */
--r:10; /* радиус плиты */
--r-s:6; /* радиус карточки/панели/кнопки */
--bar:72; /* верхняя панель */
--rubric:140; /* полоса-заголовок раздела */
--row:282; /* низкая клетка бенто; высокая = 2*row+gap = 584 */
--btn-h:58;
}
@media (max-width:1023.98px){
:root{
--u:clamp(.8px, calc(calc(100vw * var(--vwk,1)) / 390), 1.35px); /* 20.10 дирижёр: на 360–389 px страница сжимается пропорционально (было 1px — шапка и форма вылезали за плиту) */
--fs-display:54; --lh-display:.95;
--fs-h2:36; --lh-h2:1.06;
--fs-lead:26; --lh-lead:1.16;
--fs-h3:24; --lh-h3:1.1;
--fs-h4:19;
--fs-body:17; --lh-body:1.5;
--fs-small:15.2; --fs-micro:15.2; /* v3: при --u = 0,923 (360 px) даёт 14 px даже там, где разделы пишут calc без max() */
--fs-num:64; --fs-stat:48; --fs-btn:18;
--gut:12; --gap:10; --sec:40; --pad:22; --r:8; --r-s:6;
--bar:58; --rubric:92; --row:170; --btn-h:54;
}
}
/* ---------- 2. База ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--bar) * var(--u) + 12px)}
body{margin:0;background:var(--paper);color:var(--fg);
font:400 max(14px, calc(var(--fs-body) * var(--u)))/var(--lh-body) var(--f-text); /* ночь 13: на 1024–1150 px (--u 0,71) текст был 12,8 px */
font-variant-numeric:lining-nums;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.18em}
h1,h2,h3,h4{font-family:var(--f-head);font-weight:500;margin:0;letter-spacing:-.005em;text-wrap:balance}
p{margin:0 0 .7em}p:last-child{margin-bottom:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* типографские классы */
.t-display{font:500 calc(var(--fs-display) * var(--u))/var(--lh-display) var(--f-head);letter-spacing:-.015em}
.t-h2{font:500 calc(var(--fs-h2) * var(--u))/var(--lh-h2) var(--f-head)}
.t-lead{font:400 calc(var(--fs-lead) * var(--u))/var(--lh-lead) var(--f-head)}
.t-h3{font:500 calc(var(--fs-h3) * var(--u))/var(--lh-h3) var(--f-head)}
.t-h4{font:500 italic calc(var(--fs-h4) * var(--u))/var(--lh-h4) var(--f-head)}
.t-body{font-size:max(14px, calc(var(--fs-body) * var(--u)))}
.t-small{font-size:max(14px, calc(var(--fs-small) * var(--u)));line-height:var(--lh-small)}
.t-micro{font-size:max(14px, calc(var(--fs-micro) * var(--u)));line-height:1.4;letter-spacing:.02em}
/* метка-капитель: не больше одной на экран (жюри 10: «капитель в каждой коробке теряет вес»); в карточках — .t-h4 курсивом */
.t-kicker{font:500 max(14px, calc(var(--fs-small) * var(--u)))/1.3 var(--f-text);letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
.t-ital{font-family:var(--f-head);font-style:italic}
.t-soft{color:var(--fg-soft)}
.t-red,.t-lang{color:var(--lang)} /* .t-red — старое имя, цвет теперь акцент сайта */
.t-gold{color:var(--accent)}
.onum{font-variant-numeric:oldstyle-nums}
/* буквица — акцент (--lang), 3 строки; не больше 3 на странице */
.drop::first-letter{float:left;font:500 calc(var(--fs-body) * var(--u) * 4.3)/.8 var(--f-head);color:var(--lang);padding:.06em .08em 0 0}
/* ---------- 3. Каркас страницы ---------- */
.wrap{padding-inline:calc(var(--gut) * var(--u))}
.sec{margin-top:calc(var(--sec) * var(--u))}
.sec > * + *{margin-top:calc(var(--gap) * var(--u))}
/* полоса-заголовок раздела: h2 слева, номер справа. Без линейки (REJECTED 22). */
.rubric{display:grid;grid-template-columns:1fr auto;align-items:end;gap:calc(24 * var(--u));
min-height:calc(var(--rubric) * var(--u));padding:0 calc(var(--pad) * .5 * var(--u)) calc(14 * var(--u))}
.rubric h2{font:500 calc(var(--fs-h2) * var(--u))/var(--lh-h2) var(--f-head);max-width:16em}
.rubric .rubric-sub{grid-column:1;font-size:calc(var(--fs-body) * var(--u));color:var(--fg-soft);max-width:38em;margin-top:calc(8 * var(--u))}
.num{font:italic 400 calc(var(--fs-num) * var(--u))/.72 var(--f-head);color:var(--num);font-variant-numeric:oldstyle-nums;
letter-spacing:-.03em;user-select:none;grid-row:1 / span 2;grid-column:2;align-self:end}
@media (max-width:1023.98px){
.rubric{grid-template-columns:auto 1fr;padding-inline:calc(6 * var(--u));gap:calc(12 * var(--u))}
.rubric .num{grid-column:1;grid-row:1}
.rubric h2{grid-column:2}
.rubric .rubric-sub{grid-column:1 / -1}
}
/* ---------- 4. Коробки ---------- */
/* ПЛИТА: коробка одного цвета, внутри слои. Модификатор = цвет. */
.plate{position:relative;isolation:isolate;overflow:hidden;overflow:clip;border-radius:calc(var(--r) * var(--u));
padding:calc(var(--pad) * var(--u));background:var(--bone);color:var(--fg)}
.plate--bone{background:var(--bone)}
.plate--paper{background:var(--paper);box-shadow:inset 0 0 0 1px var(--hair)}
.plate--azure,.plate--verd,.plate--ink,.on-dark{
--fg:var(--bone);--fg-soft:rgba(251,248,241,.8);--accent:var(--gold-l);--num:var(--num-dark);--lang:var(--gold-l);
--cta-bg:var(--bone);--cta-fg:var(--ink);--hair:rgba(251,248,241,.22);color:var(--fg)}
.plate--azure{background:var(--azure)}
.plate--verd{background:var(--verd)}
.plate--ink{background:var(--ink)}
/* на всю ширину окна (только тушь; не больше 2 на странице) */
.plate--bleed{margin-inline:calc(var(--gut) * -1 * var(--u));border-radius:calc(var(--r) * .7 * var(--u));
padding-inline:calc((var(--gut) + var(--pad)) * var(--u))}
/* все слои плиты — над фоном-сценой */
/* v1: нулевая специфичность — любой класс дизайнера (position:absolute и т.п.) перебивает это правило без !important.
Служебные слои исключены: .scene .stage .cutout .layer .abs .ph .ph-scene */
:where(.plate) > :where(:not(.scene, .stage, .cutout, .layer, .abs, .ph-scene, .ph)){position:relative;z-index:2}
:where(.plate) > :where(.ph){z-index:1}
.abs{position:absolute}
/* МИНИАТЮРА: живопись на всю коробку, текст только на бумажной панели (≤ 3 на странице) */
.mini{position:relative;isolation:isolate;overflow:hidden;overflow:clip;border-radius:calc(var(--r) * var(--u));
padding:calc(var(--pad) * var(--u));display:flex;align-items:flex-start;background:var(--ink)}
.mini > .paint{position:absolute;inset:0;z-index:0}
.mini > .paint img{width:100%;height:100%;object-fit:cover}
.panel{position:relative;z-index:2;background:var(--bone);color:var(--ink);border-radius:calc(var(--r-s) * var(--u));
padding:calc(28 * var(--u)) calc(30 * var(--u));box-shadow:0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(20,18,14,.28);
--fg:var(--ink);--fg-soft:var(--muted);--accent:var(--gold-d);--cta-bg:var(--act);--cta-fg:var(--bone);--lang:var(--lang-light);--num:var(--num-light)}
/* КАРТОЧКА-лист: кость, тонкий контур */
.card{position:relative;isolation:isolate;overflow:hidden;overflow:clip;background:var(--bone);border-radius:calc(var(--r-s) * var(--u));
box-shadow:inset 0 0 0 1px var(--hair);padding:calc(28 * var(--u))}
/* ---------- 5. Сетки ---------- */
/* БЕНТО: 3 колонки; .tall = 2 ряда (584), обычная клетка = 282; .w2 = 2 колонки */
.bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:calc(var(--row) * var(--u));gap:calc(var(--gap) * var(--u))}
.bento > *{min-width:0}
.bento .tall{grid-row:span 2}
.bento .w2{grid-column:span 2}
.bento .w3{grid-column:1 / -1}
@media (max-width:1023.98px){
.bento{grid-template-columns:repeat(2,1fr)}
.bento .w2,.bento .w3,.bento .m-wide{grid-column:1 / -1}
.bento .m-tall{grid-row:span 2}
.bento .m-short{grid-row:span 1}
}
.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--gap) * var(--u))}
.cols-3{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--gap) * var(--u))}
.cols-4{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--gap) * var(--u))}
.split{display:grid;grid-template-columns:7fr 5fr;gap:calc(40 * var(--u));align-items:start}
@media (max-width:1023.98px){
.cols-2,.cols-3,.split{grid-template-columns:1fr}
.cols-4{grid-template-columns:1fr 1fr}
/* лента вместо столбика: карточки уезжают вбок, видна следующая */
.m-rail{display:grid;grid-auto-flow:column;grid-auto-columns:82%;grid-template-columns:none;overflow-x:auto;
scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;
margin-inline:calc(var(--gut) * -1 * var(--u));padding-inline:calc(var(--gut) * var(--u));scroll-padding-inline:calc(var(--gut) * var(--u))}
.m-rail::-webkit-scrollbar{display:none}
.m-rail > *{scroll-snap-align:start}
}
/* ---------- 6. Картинки: одна техника ---------- */
/* ФОН-СЦЕНА: гравюра тушью на белом (PNG/AVIF без цвета). Цвет и прозрачность — в CSS.
Всегда «окном» на всю плиту, низ сцены = пол плиты. Метод «После пробного». */
.scene{position:absolute;inset:0;pointer-events:none} /* v3: без z-index — иначе своя группа наложения, и .scene--light (screen) на тёмной плите темнит (S5) */
.scene img{width:100%;height:100%;object-fit:cover;object-position:var(--focus,50% 100%)}
.scene--ink img{mix-blend-mode:multiply;opacity:var(--scene-o,.34)} /* светлые плиты: тушь умножением */
.scene--light img{filter:invert(1);mix-blend-mode:screen;opacity:var(--scene-o,.2)} /* тёмные плиты: светлый штрих */
/* уход в прозрачность там, где текст */
.fade-top{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 62%);mask-image:linear-gradient(180deg,transparent 0,#000 62%)}
.fade-bottom{-webkit-mask-image:linear-gradient(0deg,transparent 0,#000 55%);mask-image:linear-gradient(0deg,transparent 0,#000 55%)}
.fade-left{-webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 30%,#000 70%);mask-image:linear-gradient(90deg,transparent 0,transparent 30%,#000 70%)}
.fade-right{-webkit-mask-image:linear-gradient(270deg,transparent 0,transparent 30%,#000 70%);mask-image:linear-gradient(270deg,transparent 0,transparent 30%,#000 70%)}
/* ВЫРЕЗКА: персонаж или предмет, подкрашенная гравюра на прозрачном.
Ставится НОГАМИ на пол: bottom = --floor (по умолчанию низ плиты). Тень — контактная, под опорой. */
.cutout{position:absolute;z-index:1;bottom:calc(var(--floor,0) * var(--u));pointer-events:none}
.cutout img{width:100%;height:auto}
.cutout.shadow::after{content:"";position:absolute;left:12%;right:12%;bottom:calc(-6 * var(--u));height:calc(14 * var(--u));z-index:-1;
background:radial-gradient(closest-side,rgba(28,24,18,.42),rgba(28,24,18,0));transform:translateX(calc(6 * var(--u)))} /* свет слева сверху */
.on-dark .cutout.shadow::after,.plate--azure .cutout.shadow::after,.plate--verd .cutout.shadow::after,.plate--ink .cutout.shadow::after{
background:radial-gradient(closest-side,rgba(0,0,0,.5),rgba(0,0,0,0))}
/* СЦЕНА С ГЕРОЯМИ (v1): фон + вырезки одним слоем — пол не уезжает из-под ног.
Двигать можно только всю .stage целиком (.stage.window-scene); .window-scene на одной .scene — только если на её полу никто не стоит. */
.stage{position:absolute;inset:0;z-index:0;pointer-events:none}
.stage > .scene{z-index:auto}
.stage > .cutout{z-index:1}
.stage.window-scene,.scene.window-scene{top:calc(var(--lift,0) * -1);bottom:auto;height:calc(100% + var(--lift,0px))}
/* «выход на кромку»: предмет пересекает край коробки (виден целиком, коробка overflow:visible) */
.edge{overflow:visible}
/* ПРОЯВЛЕНИЕ КРАСКИ (наш знак): штриховая версия сверху, цветная под ней.
ПК — при наведении на коробку; телефон — при входе в экран (класс .is-in от JS). Только opacity. */
.tint{position:relative;display:block}
.tint > img{width:100%;height:auto}
.tint > .tint-line{position:absolute;inset:0;transition:opacity .9s ease}
@media (hover:hover){ .tint-host:hover .tint-line{opacity:0} }
@media (hover:none){ .tint-host.is-in .tint-line{opacity:0;transition-delay:.4s} }
/* МЕСТО ПОД КАРТИНКУ (каркас): подписанный прямоугольник */
.ph,.ph-scene{display:grid;place-items:center;text-align:center;color:rgba(36,38,43,.55);
font:500 calc(12 * var(--u))/1.35 var(--f-text);letter-spacing:.03em;
background:repeating-linear-gradient(135deg,rgba(36,38,43,.045) 0 10px,rgba(36,38,43,0) 10px 20px);
box-shadow:inset 0 0 0 1px rgba(36,38,43,.28);border-radius:calc(4 * var(--u));padding:8px}
.ph-scene{position:absolute;inset:0;z-index:0;border-radius:0;place-items:end start;padding:calc(10 * var(--u)) calc(14 * var(--u))}
.on-dark .ph,.on-dark .ph-scene,.plate--azure .ph,.plate--verd .ph,.plate--ink .ph,
.plate--azure .ph-scene,.plate--verd .ph-scene,.plate--ink .ph-scene{color:rgba(251,248,241,.62);
background:repeating-linear-gradient(135deg,rgba(251,248,241,.06) 0 10px,rgba(251,248,241,0) 10px 20px);box-shadow:inset 0 0 0 1px rgba(251,248,241,.3)}
.ph b{display:block;font-weight:700;letter-spacing:.06em}
/* ---------- 7. Элементы ---------- */
/* кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:calc(var(--btn-h) * var(--u));
padding:0 calc(28 * var(--u));border-radius:calc(var(--r-s) * var(--u));border:0;cursor:pointer;text-decoration:none;
font:500 calc(var(--fs-btn) * var(--u))/1.1 var(--f-head);letter-spacing:.01em;
background:var(--cta-bg);color:var(--cta-fg);transition:transform .2s ease,opacity .2s ease;white-space:nowrap}
.btn::after{content:"→";font-family:var(--f-text);transition:transform .2s ease}
.btn:hover::after{transform:translateX(calc(4 * var(--u)))}
.btn:active{transform:translateY(1px)}
.btn--ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1.5px currentColor}
.btn--ink{--cta-bg:var(--ink);--cta-fg:var(--bone)}
.btn--plain::after{content:none}
.btn--block{display:flex;width:100%}
.btn-note{display:block;margin-top:calc(8 * var(--u));font-size:max(14px, calc(var(--fs-small) * var(--u)));color:var(--fg-soft)}
/* ссылка-стрелка */
.go{font:500 italic calc(var(--fs-body) * var(--u))/1.3 var(--f-head);color:var(--fg);text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;min-height:44px}
.go::after{content:" →";font-style:normal;display:inline-block;transition:transform .2s ease}
.go:hover::after{transform:translateX(calc(4 * var(--u)))}
/* крупная цифра + подпись */
.stat{display:flex;flex-direction:column;gap:calc(4 * var(--u))}
.stat b{font:400 calc(var(--fs-stat) * var(--u))/.9 var(--f-head);letter-spacing:-.02em;font-variant-numeric:lining-nums}
.stat span{font-size:max(14px, calc(var(--fs-small) * var(--u)));color:var(--fg-soft);line-height:1.3}
/* таблица цен (без линий-разделителей: ряды разделены кремовой подложкой) */
.price{display:grid;grid-template-columns:auto 1fr auto;gap:calc(6 * var(--u)) calc(24 * var(--u));align-items:baseline}
.price dt{font:500 calc(var(--fs-h4) * var(--u))/1.2 var(--f-head)}
.price dd{margin:0}
.price .val{font:500 calc(var(--fs-h3) * var(--u))/1.1 var(--f-head);text-align:right;white-space:nowrap}
/* список с ✛ */
.list-x{list-style:none;padding:0;margin:0;display:grid;gap:calc(12 * var(--u))}
.list-x li{position:relative;padding-left:1.5em}
.list-x li::before{content:"✛";position:absolute;left:0;top:0;color:var(--accent);font-family:var(--f-text)}
/* шкала уровней — один раз на странице, не в каждой карточке */
.levels{display:flex;gap:calc(6 * var(--u));font:500 max(14px, calc(var(--fs-micro) * var(--u)))/1 var(--f-text);letter-spacing:.06em}
.levels i{font-style:normal;padding:.45em .6em;border-radius:99px;box-shadow:inset 0 0 0 1px var(--hair)}
.levels i.on{background:var(--fg);color:var(--paper);box-shadow:none}
/* аккордеон: знак — плющевой лист ❧, поворот при раскрытии (не крест — ROMAN-7 п.9) */
.acc{background:var(--bone);border-radius:calc(var(--r-s) * var(--u));box-shadow:inset 0 0 0 1px var(--hair)}
.acc + .acc{margin-top:calc(10 * var(--u))}
.acc summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;
min-height:calc(68 * var(--u));padding:0 calc(26 * var(--u));font:500 calc(var(--fs-h4) * var(--u))/1.2 var(--f-head)}
.acc summary::-webkit-details-marker{display:none}
/* v2: знак раскрытия — CSS-уголок, не глиф и не крест */
.acc summary::after{content:"";width:.5em;height:.5em;border-right:2px solid var(--gold-d);border-bottom:2px solid var(--gold-d);transform:translateY(-25%) rotate(45deg);transition:transform .3s ease}
.acc[open] summary::after{transform:translateY(15%) rotate(225deg)}
.acc .acc-body{padding:0 calc(26 * var(--u)) calc(22 * var(--u));max-width:46em;color:var(--fg-soft)}
/* формы */
.field{display:flex;flex-direction:column;gap:calc(6 * var(--u))}
.field label{font-size:max(14px, calc(var(--fs-small) * var(--u)));color:var(--fg-soft)}
.input{height:calc(var(--btn-h) * var(--u));padding:0 calc(18 * var(--u));border-radius:calc(var(--r-s) * var(--u));border:0;
background:var(--bone);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(36,38,43,.28);font:inherit;font-size:max(16px, calc(var(--fs-body) * var(--u)))} /* ≥16 px: iPhone не увеличивает страницу при вводе */
.on-dark .input,.plate--ink .input,.plate--azure .input,.plate--verd .input{box-shadow:none}
select.input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
background-position:calc(100% - 22px) 52%,calc(100% - 16px) 52%;background-size:6px 6px;background-repeat:no-repeat}
.seg{display:inline-flex;padding:4px;border-radius:calc(var(--r-s) * var(--u));box-shadow:inset 0 0 0 1px var(--hair)}
.seg label{padding:.45em 1em;border-radius:4px;cursor:pointer;font-size:max(14px, calc(var(--fs-small) * var(--u)))}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg input:checked + span{color:var(--ink)}
.seg label:has(input:checked){background:var(--bone);color:var(--ink)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:max(14px, calc(var(--fs-small) * var(--u)));color:var(--fg-soft)}
.check input{width:18px;height:18px;margin-top:.2em;accent-color:var(--gold)}
/* ---------- 8. Верхняя панель и нижний «док» телефона ---------- */
.bar{position:sticky;top:0;z-index:50;height:calc(var(--bar) * var(--u));display:flex;align-items:center;gap:calc(28 * var(--u));
padding-inline:calc((var(--gut) + 12) * var(--u));background:rgba(247,243,234,.9);-webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1)}
.brand{display:flex;align-items:center;gap:calc(12 * var(--u));text-decoration:none;color:var(--ink)}
.emblem{display:inline-block;width:calc(44 * var(--u));height:calc(44 * var(--u));background:var(--emblem-c,var(--azure));
-webkit-mask:url(/s0/emblem-mask-128.png) center/contain no-repeat;mask:url(/s0/emblem-mask-128.png) center/contain no-repeat}
.wordmark{font:600 calc(22 * var(--u))/1 var(--f-head);letter-spacing:.14em;text-transform:uppercase}
.nav{display:flex;gap:calc(26 * var(--u));margin-left:auto;font:500 calc(18 * var(--u))/1 var(--f-head)}
.nav a{text-decoration:none;opacity:.86;display:inline-flex;align-items:center;min-height:44px;padding:0 calc(4 * var(--u))}.nav a:hover{opacity:1}
.nav{gap:calc(22 * var(--u))}
.bar .btn{min-height:max(44px, calc(44 * var(--u)));padding:0 calc(20 * var(--u));font-size:calc(18 * var(--u))}
.bar .btn::after{content:none}
@media (max-width:1023.98px){
.bar{gap:10px;padding-inline:calc(14 * var(--u))}
.nav{display:none}
.emblem{width:calc(36 * var(--u));height:calc(36 * var(--u))}
.wordmark{font-size:calc(17 * var(--u));letter-spacing:.12em}
.bar .btn{margin-left:auto;min-height:44px;font-size:calc(16 * var(--u));padding:0 calc(14 * var(--u))}
}
/* v2: нижнего «дока» нет — кнопка «Записаться» всегда в липкой верхней панели (жюри 10: док закрывал текст). Старая разметка .dock в макетах просто скрыта. */
.dock{display:none!important}
/* ---------- 9. Движение (только transform/opacity) ---------- */
/* одно появление на весь сайт: снизу 32px, 0,5 с, один раз */
.js .rise{opacity:0;transform:translateY(calc(32 * var(--u)));transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 70ms)}
.js .rise.is-in{opacity:1;transform:none}
/* «окно»: сцена внутри коробки отстаёт от прокрутки (JS ставит --py), коробка уезжает — как фикс-фото Вирджинии, но без background-attachment */
.window-scene{will-change:transform;transform:translate3d(0,var(--py,0px),0)}
/* ✛ поворачивается от прокрутки (360° на 800px) */
.spin-scroll{display:inline-block;transform:rotate(var(--rot,0deg))}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.js .rise{opacity:1;transform:none;transition:none}
.window-scene,.spin-scroll{transform:none!important}
.tint > .tint-line{transition:none}
*{animation:none!important}
}
/* ---------- 10. Подвал ---------- */
.foot{background:var(--ink);color:var(--bone);--fg:var(--bone);--fg-soft:rgba(251,248,241,.7);--accent:var(--gold-l);--lang:var(--gold-l);--num:var(--num-dark)}
/* ---------- 11. Запись в одно поле (v2) ---------- */
/* .qform — короткая запись: одно поле + кнопка + согласие строкой + «сразу в бот».
Ставится 3 раза: под шапкой (#quick), в «Цены» (карточка «Пробный урок»), полная форма в «Записи».
Все формы помечены data-book — к ним ведут кнопки a[data-book] (system.js выбирает ближайшую ниже). */
.qform{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:calc(10 * var(--u));align-items:start}
.qform .input{width:100%}
.qform .btn{height:calc(var(--btn-h) * var(--u))}
.qform .q-note{grid-column:1 / -1;margin:0;font-size:max(14px, calc(var(--fs-micro) * var(--u)));line-height:1.45;color:var(--fg-soft)}
.qform .q-note a{color:inherit}
.qform .q-bot{grid-column:1 / -1;justify-self:start;display:inline-flex;align-items:center;min-height:44px;font:500 italic calc(var(--fs-body) * var(--u))/1.3 var(--f-head);text-decoration:none}
.qform .q-bot::after{content:" →";font-style:normal}
.qform--stack{grid-template-columns:1fr}
@media (max-width:1023.98px){ .qform{grid-template-columns:1fr} .qform .btn{width:100%} }
/* ---------- 12. Отзыв «было → стало» (v2) ---------- */
.rev{display:flex;flex-direction:column;gap:calc(14 * var(--u))}
.rev .who{display:grid;grid-template-columns:auto 1fr;gap:calc(4 * var(--u)) calc(14 * var(--u));align-items:center}
.rev .face{grid-row:span 2;width:calc(64 * var(--u));height:calc(64 * var(--u));border-radius:50%;overflow:hidden;background:var(--paper);
display:grid;place-items:center;font:500 calc(26 * var(--u))/1 var(--f-head);color:var(--gold-d);box-shadow:inset 0 0 0 1px var(--hair)}
.rev .name{font:600 calc(var(--fs-body) * var(--u))/1.2 var(--f-text)}
.rev .dir{font-size:max(14px, calc(var(--fs-small) * var(--u)));color:var(--fg-soft)}
.rev .shift{font:500 calc(var(--fs-h3) * var(--u))/1 var(--f-head);letter-spacing:-.01em}
.rev .shift i{font-style:normal;color:var(--gold-d);margin:0 .25em}
.rev blockquote{margin:0;font:400 italic calc(21 * var(--u))/1.35 var(--f-head)}
@media (max-width:1023.98px){ .rev blockquote{font-size:calc(19 * var(--u))} }
/* ---------- 13. Указатель (список-оглавление внутри раздела, v2) ---------- */
.idx{list-style:none;margin:0;padding:0;display:grid}
.idx > li > a,.idx > li > button{display:grid;grid-template-columns:calc(44 * var(--u)) minmax(0,1fr) auto;gap:calc(14 * var(--u));align-items:baseline;width:100%;
padding:calc(14 * var(--u)) calc(16 * var(--u));border:0;border-radius:calc(var(--r-s) * var(--u));background:transparent;color:inherit;font:inherit;text-align:left;text-decoration:none;cursor:pointer;
transition:background-color .2s ease}
.idx > li > a:hover,.idx > li > button:hover,.idx > li > [aria-current]{background:var(--bone)}
.idx .rn{font:italic 400 calc(26 * var(--u))/1 var(--f-head);color:var(--gold-d)}
.idx b{font:500 calc(26 * var(--u))/1.15 var(--f-head);display:block}
.idx .l{display:block;font-size:max(14px, calc(var(--fs-small) * var(--u)));color:var(--fg-soft);margin-top:2px}
.idx em{font:500 italic calc(19 * var(--u))/1.2 var(--f-head);color:var(--fg);white-space:nowrap}
@media (max-width:1023.98px){
.idx > li > a,.idx > li > button{grid-template-columns:calc(30 * var(--u)) minmax(0,1fr) auto;padding:calc(10 * var(--u)) calc(8 * var(--u))}
.idx b{font-size:calc(21 * var(--u))} .idx .rn{font-size:calc(20 * var(--u))} .idx em{font-size:calc(16 * var(--u))}
}
/* v3: РФ по часовому поясу (класс tz-ru ставит инлайн-скрипт в ) — WhatsApp и др. скрыты */
.tz-ru .hide-ru{display:none!important}
/* 20.10 дирижёр по жюри J2: ссылки внутри текста на сенсорных экранах — зона касания выше строки (padding у строчной ссылки не двигает строки) */
@media (pointer:coarse){ main p a:not([class]), main li a:not([class]), main dd a:not([class]), .q-note a, .z-note a, footer p a:not([class]) { padding-block:max(.62em, calc((44px - 1.25em) / 2)); } } /* ночь 13: зона касания ≥ 44 px при любом кегле; только строчные ссылки без класса — у строк-ссылок с классом свой размер (P: отступ раздувал строки списка) */
.bar .brand{min-height:44px} /* ночь 13: логотип в панели — цель касания ≥ 44 px */
/* ---------- 14. Ночь 13: цвета из пульта (html[data-btn|data-acc|data-num]); красного в системе нет ---------- */
html[data-btn="azure"]{--act:var(--azure)}
html[data-btn="verd"]{--act:var(--verd)}
html[data-acc="gold"]{--lang-light:var(--gold-d)}
html[data-acc="verd"]{--lang-light:var(--verd)}
html[data-num="azure"]{--num-light:var(--azure);--num-dark:rgba(251,248,241,.34)}
html[data-num="r11"]{--num-light:#d9d2c4;--num-dark:rgba(251,248,241,.26)}
/* скрытый вариант раздела (пульт): не занимает места и не грузит картинки */
[data-sec][hidden]{display:none!important}
/* ---------- 15. Ночь 13: общий выключатель «Остановить анимацию» (html[data-theatre=off] или html.still — ставит подвал, помнит браузер) ----------
Все CSS-анимации и переходы доигрывают мгновенно (до конечного кадра: ничего не пропадает), окна и ✛ стоят, проявление — сразу.
Движение по таймерам в JS разделы гасят сами по этому же атрибуту. */
html[data-theatre="off"] *,html[data-theatre="off"] *::before,html[data-theatre="off"] *::after,
html.still *,html.still *::before,html.still *::after{animation-duration:.001s!important;animation-delay:0s!important;animation-iteration-count:1!important;
transition-duration:.001s!important;transition-delay:0s!important;scroll-behavior:auto!important}
html[data-theatre="off"] .window-scene,html[data-theatre="off"] .spin-scroll,html.still .window-scene,html.still .spin-scroll{transform:none!important}
html[data-theatre="off"].js .rise,html.still.js .rise{opacity:1;transform:none}
/* ---------- 16. День 14: номер раздела — своё, из рукописи (пульт html[data-nst]) ----------
Роман 21.10: «нумерация страниц как у Вирджинии по всему сайту не то — это их фишка и это прям копия один в один».
Номер теперь у всех разделов в одном месте — в начале заголовка h2 (знак .fol ставит сборка; римская цифра из data-r).
cap — инициал: лазурное поле, золотая римская цифра (как расписная версалия рукописи; на тёмной плите — золотое поле, цифра тушью);
folio — «Глава III» капителью тёмным золотом над заголовком (как колонтитул-фолио рукописи);
pil — знак главы ¶ лазурью и римская цифра тёмным золотом перед заголовком (капитулум рубрикатора — синий вместо киновари);
n13 — как в ночи 13: крупная курсивная цифра справа (.num). Красного нет. */
.fol{display:none}
html:not([data-nst="n13"]) .num{display:none!important}
html:not([data-nst="n13"]) .rubric{grid-template-columns:1fr}
html:not([data-nst="n13"]) .rubric h2,html:not([data-nst="n13"]) .rubric .rubric-sub{grid-column:1}
html[data-nst="cap"] .fol,html[data-nst="pil"] .fol{display:inline-block}
html[data-nst="folio"] .fol{display:block}
/* cap · инициал */
html[data-nst="cap"] .fol{min-width:1.32em;height:1.32em;padding:0 .22em;margin:0 .3em 0 0;vertical-align:-.17em;box-sizing:border-box;
background:var(--azure);color:var(--gold-l);border-radius:calc(3 * var(--u));box-shadow:inset 0 0 0 .05em rgba(233,207,142,.55);
font:500 .8em/1.32 var(--f-head);letter-spacing:.02em;text-align:center;font-style:normal;font-variant:normal;text-transform:none}
html[data-nst="cap"] .fol::before{content:attr(data-r)}
html[data-nst="cap"] :is(.plate--azure,.plate--verd,.plate--ink,.on-dark,.foot) .fol{background:var(--gold);color:var(--ink);box-shadow:none}
/* folio · колонтитул */
html[data-nst="folio"] .fol{font:500 max(14px, .3em)/1.2 var(--f-head);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-d);
margin:0 0 .5em;font-style:normal}
html[data-nst="folio"] .fol::before{content:"Глава\00a0" attr(data-r)}
html[data-nst="folio"] :is(.plate--azure,.plate--verd,.plate--ink,.on-dark,.foot) .fol{color:var(--gold-l)}
/* pil · знак главы */
html[data-nst="pil"] .fol{font:500 .74em/1 var(--f-head);color:var(--gold-d);margin-right:.36em;letter-spacing:.02em;font-style:normal;vertical-align:.04em}
html[data-nst="pil"] .fol::before{content:"¶";color:var(--azure);margin-right:.14em}
html[data-nst="pil"] .fol::after{content:attr(data-r)}
html[data-nst="pil"] :is(.plate--azure,.plate--verd,.plate--ink,.on-dark,.foot) .fol{color:var(--gold-l)}
html[data-nst="pil"] :is(.plate--azure,.plate--verd,.plate--ink,.on-dark,.foot) .fol::before{color:var(--bone)}
/* ---------- 17. День 14: одна «Записаться» в поле зрения ----------
Роман 21.10: «2 две кнопки записаться на пробный урок рядом — криво». Строка записи ушла после «Направлений» (qk=low);
кнопка панели прячется, пока в экране есть другая кнопка записи (html.cta-near ставит system.js); qk=lvl — строка под шапкой,
а в шапке вместо тёмной кнопки остаётся «Узнать свой уровень». Только opacity/transform. */
/* FIX14 (жюри UX/motion): видима ⇔ нажимается — переключение мгновенное, без прозрачных кликабельных и видимых некликабельных кадров,
без сдвига (reduced-motion тоже) */
html.cta-near .bar .btn{visibility:hidden}
html[data-qk="lvl"] .hero-cta{display:none!important}
/* ---------- 18. FIX14 (жюри дня 14): номер раздела — золотая римская цифра-инициал, единственная римская на странице ----------
gold — цифра золотом тем же кеглем и начертанием, что h2, на его базовой линии, без плашки и рамки; стоит в «поле» одной ширины
(висячий отступ h2 = 2,1em: самая широкая VIII — 1,71em), поэтому текст всех заголовков начинается с одной вертикали, а перенос h2 идёт под текст, не под цифру
(телефон: «V Как / проходит обучение» больше не рвётся на цифре). На бумаге ПК — --gold (кегль ≥ 40 px); на телефоне h2 36 px —
--gold-d (правило системы: золото на бумаге только ≥ 40 px). На тёмных плитах — --gold-l. */
html[data-nst="gold"] .fol{display:inline}
html[data-nst="gold"] h2:has(> .fol){position:relative;padding-left:2.1em;text-wrap:balance}
html[data-nst="gold"] .fol{position:absolute;left:0;top:0;width:1.8em;text-align:right;font:inherit;font-style:normal;font-weight:500;
line-height:inherit;letter-spacing:.01em;color:var(--gold);font-variant-numeric:normal;text-transform:none}
html[data-nst="gold"] .fol::before{content:attr(data-r)}
html[data-nst="gold"] .rubric h2:has(> .fol){max-width:18.1em} /* висячий отступ не съедает меру заголовка (16em системы) */
@media (min-width:1024px){ html[data-nst="gold"] .rubric:has(h2 > .fol) .rubric-sub{padding-left:calc(2.1 * var(--fs-h2) * var(--u))} } /* подзаголовок — с той же вертикали, что текст заголовка */
html[data-nst="gold"] :is(.plate--azure,.plate--verd,.plate--ink,.on-dark,.foot) .fol{color:var(--gold-l)}
@media (max-width:1023.98px){
html[data-nst="gold"] .fol{color:var(--gold-d)}
html[data-nst="gold"] :is(.plate--azure,.plate--verd,.plate--ink,.on-dark,.foot) .fol{color:var(--gold-l)}
/* cap на телефоне — поле над заголовком, h2 переносится сам */
html[data-nst="cap"] .fol{display:table;margin:0 0 .3em}
html[data-nst="cap"] h2:has(> .fol){text-wrap:balance}
}
/* ---------- 19. Ночь 15 · ритм страницы (rh) ----------
Роман 21.10: «Все стало каким-то прямоугольно-коробочным..», «между секциями 6 и 7 должен быть пробел или что-то другое»,
«у них между тяжелыми секциями есть разгружающие визуал пробелы … и легкие секции с текстом и легким фоновым изображением».
FRAME-15 «A-лёгкая» + RHYTHM-15 §3: земля страницы — лист; коробка — событие. rh=sheet (по умолчанию) · rh=d14 (коробки дня 14).
Заливка снятых коробок = цвет листа (var(--paper)), а не none: у плит isolation:isolate, и гравюры с multiply без своей подложки светлели бы до белого прямоугольника.
Всё ниже — только под html[data-rh="sheet"] и только для вариантов по умолчанию ([data-sec][data-key]); d14 = день 14 без изменений.
Рисунки «Тестов» и крестьяне Дюрера не тронуты: снята коробка (заливка, рамка, небо-подложка), фигуры и гравюры на месте. */
/* Р3 · строка записи под «Направлениями» — на бумаге: без заливки и контура, книга лежит на базовой линии */
html[data-rh="sheet"] [data-sec="quick"][data-key="one"] .zq{background:var(--paper);box-shadow:none;border-radius:0}
/* Р3 · VI «Тесты» — лёгкий лист. «Тест уровня»: снято небо-коробка (градиент, облака, свечение) — студент на лестнице и куча книг
стоят на бумаге со своей тенью; текст без панели. «Какой ты студент»: без плиты кости, площадь — бледной гравюрой, края гаснут в бумагу */
html[data-rh="sheet"] [data-sec="tests"][data-key="split"] .tt-lv{background:var(--paper);border-radius:0;overflow:visible}
html[data-rh="sheet"] [data-sec="tests"][data-key="split"] :is(.tt-far,.tt-near,.tt-glow,.tt-cap){display:none}
html[data-rh="sheet"] [data-sec="tests"][data-key="split"] .tt-lvp{background:none;box-shadow:none;border-radius:0}
html[data-rh="sheet"] [data-sec="tests"][data-key="split"] .tt-ty{background:var(--paper);border-radius:0}
html[data-rh="sheet"] [data-sec="tests"][data-key="split"] .tt-bg{
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 80%,transparent 100%),linear-gradient(90deg,#000 88%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 80%,transparent 100%),linear-gradient(90deg,#000 88%,transparent 100%);mask-composite:intersect}
html[data-rh="sheet"] [data-sec="tests"][data-key="split"] .tt-card{background:none;box-shadow:inset 0 0 0 1px var(--hair)}
/* Р3 · IX «Канал» — окно канала без коробки: посты в рамках 1 px прямо на бумаге, площадь — бледной гравюрой, верх, низ и правый край гаснут в бумагу */
html[data-rh="sheet"] [data-sec="channel"]:is([data-key="ear"],[data-key="d14"]) .pz-box{background:var(--paper);box-shadow:none;border-radius:0}
html[data-rh="sheet"] [data-sec="channel"]:is([data-key="ear"],[data-key="d14"]) .pz-vl{border-radius:0;
-webkit-mask:linear-gradient(to right,transparent var(--pz-vm0),#000 var(--pz-vm1),#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 24%,#000 84%,transparent 100%);-webkit-mask-composite:source-in;
mask:linear-gradient(to right,transparent var(--pz-vm0),#000 var(--pz-vm1),#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 24%,#000 84%,transparent 100%);mask-composite:intersect}
html[data-rh="sheet"] [data-sec="channel"]:is([data-key="ear"],[data-key="d14"]) .pz-post{background:var(--paper)}
/* Р2 · знак ✛: один, золотом, 20u (тел 16u), в блоке 120u (тел 80u) — перед «Направлениями» и перед «Ценами». Без линий, пары и вращения (REJECTED 22, 26) */
html[data-rh="sheet"] :is([data-sec="courses"],[data-sec="prices"]):not([hidden])::before{content:"\271B";display:flex;align-items:center;justify-content:center;
height:calc(120 * var(--u));margin-top:calc(var(--sec) * var(--u));margin-bottom:calc(var(--sec) * -1 * var(--u));
font:400 calc(20 * var(--u))/1 var(--f-head);color:var(--gold);speak:never}
@media (max-width:1023.98px){
html[data-rh="sheet"] :is([data-sec="courses"],[data-sec="prices"]):not([hidden])::before{height:calc(80 * var(--u));font-size:calc(16 * var(--u));color:var(--gold-d)}
}
/* Р1 · воздух: V→VI и VIII→«Запись» — +96u (тел +56u) сверх обычного шага */
html[data-rh="sheet"] :is([data-sec="tests"],[data-sec="zapis"]):not([hidden]) > .sec{margin-top:calc((var(--sec) + 96) * var(--u))}
@media (max-width:1023.98px){
html[data-rh="sheet"] :is([data-sec="tests"],[data-sec="zapis"]):not([hidden]) > .sec{margin-top:calc((var(--sec) + 56) * var(--u))}
}
/* Р5 · «Запись» во всю ширину: лазурь от края до края, без скругления; содержимое стоит где стояло (поле плиты + поле страницы) */
/* раздел ship режет по горизонтали (overflow-x:clip — мачты не дают прокрутки вбок), поэтому вширь раздвигается сам раздел, а плита занимает его целиком */
html[data-rh="sheet"] [data-sec="zapis"][data-key="ship"] > .sec{margin-inline:calc(var(--gut) * -1 * var(--u))}
html[data-rh="sheet"] [data-sec="zapis"][data-key="ship"] .zm-plate{border-radius:0;padding-inline:calc((var(--gut) + var(--pad)) * var(--u))}
html[data-rh="sheet"] [data-sec="zapis"][data-key="ship"] :is(.zm-marine,.zm-sea){border-radius:0}
/* rh=sheet · телефон: без коробки края гравюр не режутся кромкой — гаснут в бумагу (REJECTED 5: обрезанные фоны) */
@media (max-width:1023.98px){
html[data-rh="sheet"] [data-sec="tests"][data-key="split"] .tt-sky{
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
html[data-rh="sheet"] [data-sec="tests"][data-key="split"] .tt-sqm{
-webkit-mask-image:linear-gradient(transparent 0,#000 26%,#000 82%,transparent 100%),linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);-webkit-mask-composite:source-in;
mask-image:linear-gradient(transparent 0,#000 26%,#000 82%,transparent 100%),linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-composite:intersect}
html[data-rh="sheet"] [data-sec="channel"]:is([data-key="ear"],[data-key="d14"]) .pz-vl{
-webkit-mask:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0,#000 24%,#000 84%,transparent 100%);-webkit-mask-composite:source-in;
mask:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0,#000 24%,#000 84%,transparent 100%);mask-composite:intersect}
}
/* FIX15 (жюри UX): на телефоне бледная площадь шла от заголовка канала до низа — под постами ~300 px «пустой» гравюры, пока крестьяне не проявились.
Площадь сжата до полосы за крестьянами: под текстом и постами её нет (маска: ноль до 52 % высоты окна, полная с 68 %) */
@media (max-width:1023.98px){
html[data-rh="sheet"] [data-sec="channel"]:is([data-key="ear"],[data-key="d14"]) .pz-vl{
-webkit-mask:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0,transparent 52%,#000 68%,#000 86%,transparent 100%);-webkit-mask-composite:source-in;
mask:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0,transparent 52%,#000 68%,#000 86%,transparent 100%);mask-composite:intersect}
}
/* rh=sheet · два теста без коробок стоят дальше друг от друга: без рамки 20u между ними читались одной картинкой */
html[data-rh="sheet"] [data-sec="tests"][data-key="split"] .tt-rows{gap:calc(64 * var(--u))}
@media (max-width:1023.98px){ html[data-rh="sheet"] [data-sec="tests"][data-key="split"] .tt-rows{gap:calc(40 * var(--u))} }
/* ---------- 20. FIX15 (жюри ночи 15) ---------- */
/* UX J15: золотая подпись роли на фото преподавателей — 3,6:1 на 390 (нужно ≥ 4,5). Градиент под подписью плотнее там, где стоит строка роли
(было .72 на 46 % высоты подписи, стало .88 на 50 % и .72 на 70 %); фото выше подписи не тронуто. Для всех ритмов: это доступность, а не вид. */
html [data-sec="teachers"] .v-r10 .t10-cap{background:linear-gradient(0deg,rgba(24,22,20,.92) 0,rgba(24,22,20,.88) 50%,rgba(24,22,20,.72) 70%,rgba(24,22,20,0) 100%)}
/* жюри: книга у строки записи «голой линией» — в листе книга сразу в краске (линия-гравюра была только до наведения/входа в экран) */
html[data-rh="sheet"] [data-sec="quick"][data-key="one"] .zq-obj .tint-line{opacity:0}
/* жюри: на телефоне ✛ сразу после шапки лишний (шапка и «Направления» и так разведены полем); ✛ перед «Ценами» остаётся */
@media (max-width:1023.98px){
html[data-rh="sheet"] [data-sec="courses"]:not([hidden])::before{content:none}
}
/* =====================================================================
НОЧЬ 16 · S0 (25→26.10.2026) — §21 кнопки · §22 плиты прозрачнее · §23 масштаб
Пульт: btn = n16 (по умолчанию) | ink («Как в ночи 15» — тушь, правила §7 как были);
(zm, btn, pl — системные ключи build-index.py SYS; zm по умолчанию 100 — поле def)
pl = soft (по умолчанию) | solid («Как в ночи 15» — сплошной цвет); zm = 80 | 90 | 100 (по умолчанию) | 110.
Страницы разделов (v<ключ>.html) атрибутов не ставят — на них сразу видна система ночи 16.
===================================================================== */
/* ---------- 21. Кнопки — одна система на всю страницу ----------
Образец — прогон 25 («запасная v25», build3/lab/_src/p20.css §2 + p15.css «Кайма»): прозрачная кнопка с каймой пигмента,
при наведении наливается краской. Роман: 09.10 «оставь вот такой вариант кнопки (прозрачный) изначально и чтобы он наполнялся краской
при наведении мышки»; 12.10 «старые кнопки лучше в этой секции» (выбор «как v25», p33 DEF28); 05.10 «в стиле бумаги, не цветная почти»;
01.10 «заполнение цветом … более нежным»; 08.10 «чёрные кнопки не нравятся»; 20.10 «не нравится красный текст и кнопки».
РОЛИ (классы — для всех разделов; свои кнопки не изобретать):
.btn основная «Записаться на бесплатный урок»: прозрачная, кайма 1,5 px пигментом, Garamond 600 прямыми строчными
(в v25 — Vollkorn 600; он шире на 10 %, и «Записаться на бесплатный урок» в «Ценах» переносилась в две строки);
наведение / фокус / нажатие — краска наливается слева направо (только transform), текст становится костью
.btn--ghost вторая кнопка рядом с основной («Пройти тест»): кайма 1 px на 60 %, без заливки; наведение — кайма полная
.btn--fill и кнопка отправки формы (form .btn[type=submit]) — финальное действие: залита мягкой краской, наведение — снова кайма (как v25)
.btn-bot / .q-bot вторичная «или в бот →»: курсив Garamond, волосяное подчёркивание, стрелка; стоит рядом с основной (ПК) или под ней (телефон)
.go ссылка-действие: курсив, лазурь (на тёмном — кость), волосяное подчёркивание, стрелка
.btn-row ряд «основная + вторичная»: ПК — в строку, телефон — столбиком, основная во всю ширину
ПИГМЕНТ — от поверхности: на бумаге, кости и бумажной панели — лазурь (--bt-c), текст на заливке — кость (--bt-t);
на тёмной плите (лазурь, ярь, тушь, .on-dark, подвал) — кость, текст на заливке — цвет плиты. Красного и туши в кнопках нет.
Касание ≥ 44 px везде. Контраст: лазурь на бумаге 8,6:1, на кости 9,0:1; кость на заливке лазурью 88 % 6,6:1; на прозрачной плите кайма-кость 5,5–9,4:1,
цвет плиты на заливке костью 6,8–13:1 (s0/R16-S0.md «Замеры»). */
:root{--bt-c:var(--azure);--bt-t:var(--bone);--bt-link:var(--azure);--bt-mix:88%}
.plate--azure,.plate--verd,.plate--ink,.on-dark,.foot{--bt-c:var(--bone);--bt-t:var(--ink);--bt-link:var(--bone);--bt-mix:94%}
.plate--azure{--bt-t:var(--azure)}
.plate--verd{--bt-t:var(--verd)}
.panel,.plate--bone,.plate--paper,.card{--bt-c:var(--azure);--bt-t:var(--bone);--bt-link:var(--azure);--bt-mix:88%}
html:not([data-btn="ink"]) .btn{position:relative;isolation:isolate;overflow:hidden;
min-height:max(44px, calc(var(--btn-h) * var(--u)));padding:0 calc(30 * var(--u));border-radius:calc(var(--r-s) * var(--u));
font:600 max(16px, calc(var(--fs-btn) * var(--u)))/1.1 var(--f-head);letter-spacing:.01em;font-variant-numeric:lining-nums;white-space:nowrap;
background:transparent;color:var(--bt-c);box-shadow:inset 0 0 0 1.5px var(--bt-c);
-webkit-tap-highlight-color:transparent;touch-action:manipulation;
transition:color 0s linear .13s,transform .2s ease}
html:not([data-btn="ink"]) .btn:not(.p10-btn)::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
background:color-mix(in srgb,var(--bt-c) var(--bt-mix),transparent);
transform:scaleX(0);transform-origin:0 50%;transition:transform .34s cubic-bezier(.55,.05,.25,1)}
html:not([data-btn="ink"]) .btn::after{font-weight:400}
@media (hover:hover){
html:not([data-btn="ink"]) .btn:hover{color:var(--bt-t)}
html:not([data-btn="ink"]) .btn:not(.p10-btn):hover::before{transform:none}
}
html:not([data-btn="ink"]) .btn:is(:focus-visible,:active){color:var(--bt-t)}
html:not([data-btn="ink"]) .btn:not(.p10-btn):is(:focus-visible,:active)::before{transform:none}
html:not([data-btn="ink"]) .btn:focus-visible{outline:2px solid var(--bt-c);outline-offset:3px}
html:not([data-btn="ink"]) .btn:active{transform:translateY(1px);transition-duration:0s,.06s}
html:not([data-btn="ink"]) .btn:is(:disabled,[aria-disabled="true"]){opacity:.5;cursor:not-allowed;transform:none}
/* туши в кнопках нет: старое «.btn--ink» в ночи 16 — обычная основная кнопка (правила выше его перекрывают) */
/* вторая кнопка рядом с основной */
html:not([data-btn="ink"]) .btn--ghost{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bt-c) 60%,transparent);color:var(--bt-c)}
html:not([data-btn="ink"]) .btn--ghost::before{content:none!important}
@media (hover:hover){ html:not([data-btn="ink"]) .btn--ghost:hover{color:var(--bt-c);box-shadow:inset 0 0 0 1.5px var(--bt-c)} }
html:not([data-btn="ink"]) .btn--ghost:is(:focus-visible,:active){color:var(--bt-c);box-shadow:inset 0 0 0 1.5px var(--bt-c)}
/* отправка формы — залита мягкой краской; наведение — снова кайма (как v25) */
html:not([data-btn="ink"]) :is(form .btn[type="submit"],.btn--fill){color:var(--bt-t)}
html:not([data-btn="ink"]) :is(form .btn[type="submit"],.btn--fill)::before{transform:none}
@media (hover:hover){
html:not([data-btn="ink"]) :is(form .btn[type="submit"],.btn--fill):hover{color:var(--bt-c)}
html:not([data-btn="ink"]) :is(form .btn[type="submit"],.btn--fill):hover::before{transform:scaleX(0);transform-origin:100% 50%}
}
html:not([data-btn="ink"]) :is(form .btn[type="submit"],.btn--fill):is(:focus-visible,:active){color:var(--bt-t)}
html:not([data-btn="ink"]) :is(form .btn[type="submit"],.btn--fill):is(:focus-visible,:active)::before{transform:none}
/* телефон: поля кнопки уже (Garamond 600 шире 500 на ≈ 2 %, «Записаться на бесплатный урок» на 360–390 должна стоять в одну строку) */
@media (max-width:1023.98px){ html:not([data-btn="ink"]) .btn{padding:0 calc(16 * var(--u))} }
/* панель сайта: та же кнопка, малая */
html:not([data-btn="ink"]) .bar .btn{font-size:max(15px, calc(17 * var(--u)));padding:0 calc(18 * var(--u))}
/* вторичная «или в бот →» */
html:not([data-btn="ink"]) :is(.btn-bot,.q-bot){display:inline-flex;align-items:center;min-height:44px;gap:.3em;
font:500 italic max(16px, calc(var(--fs-body) * var(--u)))/1.3 var(--f-head);color:var(--fg);
text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.24em;text-decoration-color:color-mix(in srgb,currentColor 38%,transparent)}
html:not([data-btn="ink"]) .btn-bot::after{content:"\2009→";font-style:normal;display:inline-block;transition:transform .2s ease}
@media (hover:hover){
html:not([data-btn="ink"]) :is(.btn-bot,.q-bot):hover{color:var(--bt-c);text-decoration-color:currentColor}
html:not([data-btn="ink"]) .btn-bot:hover::after{transform:translateX(calc(4 * var(--u)))}
}
/* ссылка-действие */
html:not([data-btn="ink"]) .go{color:var(--bt-link)}
html:not([data-btn="ink"]) .go:not(:has(small,b,strong)){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.24em;
text-decoration-color:color-mix(in srgb,currentColor 38%,transparent)}
@media (hover:hover){ html:not([data-btn="ink"]) .go:hover{text-decoration-color:currentColor} }
/* .btn-bot — новый класс ночи 16: и при «Как в ночи 15» (btn=ink) у него касание 44 px и вид ссылки-«go» тех дней */
html[data-btn="ink"] .btn-bot{display:inline-flex;align-items:center;min-height:44px;font:500 italic calc(var(--fs-body) * var(--u))/1.3 var(--f-head);color:var(--fg);text-decoration:none}
html[data-btn="ink"] .btn-bot::after{content:" →";font-style:normal}
/* ряд «основная + вторичная» */
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:calc(14 * var(--u)) calc(28 * var(--u))}
@media (max-width:1023.98px){
.btn-row{flex-direction:column;align-items:stretch;gap:calc(6 * var(--u))}
.btn-row > .btn{width:100%}
.btn-row > :is(.btn-bot,.q-bot,.go){align-self:center}
}
@media (forced-colors:active){ html:not([data-btn="ink"]) .btn{border:2px solid ButtonText} html:not([data-btn="ink"]) .btn::before{display:none} }
@media (prefers-reduced-motion:reduce){ html:not([data-btn="ink"]) .btn,html:not([data-btn="ink"]) .btn::before,html:not([data-btn="ink"]) .btn-bot::after{transition:none!important} }
/* ---------- 22. Плиты прозрачнее: краска 84–88 % по фактуре бумаги, а не плоский цвет ----------
Роман 22.10: «синяя коробка внутри выглядит тяжело — очень тяжело — мне кажется эти тяжелые сплошные зеленые секции надо сделать прозрачнее»;
«секция с кораблем … слишком сине-тяжелая — попозрачнее?».
Фактура — одна на страницу (одна рука): тайлы O how/img/grain16-d.webp (тёмные волокна, α ≤ 0,12) и grain16-w.webp (светлые, α ≤ 0,085), 512 px, бесшовные.
Слои снизу вверх: лист → тёмные волокна → краска плиты 84–88 % → светлые волокна (рецепт O, REQ-O п. 1; так же у B в записи и у R).
Системные плиты (.plate--azure/--verd/--ink) переводятся сами (pl=soft), с нулевой добавкой специфичности: если раздел красит плиту сам (градиент,
картинка), его правило сильнее — тогда владелец берёт классы ниже. Сплошной цвет одной плите — .plate--solid; всей странице — пульт pl=solid.
Контраст замерен по всем пикселям фактуры (2-й перцентиль — «худшая точка» под буквой; s0/R16-S0.md «Замеры»):
кость на лазури 86 % 5,5:1 · на яри 88 % 4,9:1 · на туши 86 % 8,1:1;
вторичный текст (--fg-soft) поднят до 4,5:1 (лазурь .90, ярь .95); мелкий золотой акцент (--accent): лазурь #f1e1bb 4,6:1, ярь #f6eed8 4,5:1;
светлое золото #e9cf8e на прозрачной плите — только кегль ≥ 24 px (3,9 / 3,4 ≥ 3:1).
КЛАССЫ ДЛЯ СВОИХ КОРОБОК: .veil16 + .veil16--azure | --verd | --ink (фон целиком, на светлом листе), .veil16--bone-base (то же поверх кости).
Текстовые роли внутри (--fg, --fg-soft, --accent, кнопки) классы ставят сами. Фактура грузится сразу (два тайла на всю страницу, 76 КБ, кэш). */
.plate--azure:where(:not(.plate--solid)):where(html:not([data-pl="solid"]) *),.veil16--azure{
background:url(/how/img/grain16-w.webp) 160px 90px/512px 512px repeat,linear-gradient(rgba(41,70,111,var(--veil-a,.86)),rgba(41,70,111,var(--veil-a,.86))),url(/how/img/grain16-d.webp) 0 0/512px 512px repeat,var(--veil-base,var(--paper));
--fg-soft:rgba(251,248,241,.9);--accent:#f1e1bb}
.plate--verd:where(:not(.plate--solid)):where(html:not([data-pl="solid"]) *),.veil16--verd{
background:url(/how/img/grain16-w.webp) 160px 90px/512px 512px repeat,linear-gradient(rgba(44,90,78,var(--veil-a-v,.88)),rgba(44,90,78,var(--veil-a-v,.88))),url(/how/img/grain16-d.webp) 0 0/512px 512px repeat,var(--veil-base,var(--paper));
--fg-soft:rgba(251,248,241,.95);--accent:#f6eed8}
.plate--ink:where(:not(.plate--solid)):where(html:not([data-pl="solid"]) *),.veil16--ink{
background:url(/how/img/grain16-w.webp) 160px 90px/512px 512px repeat,linear-gradient(rgba(36,38,43,var(--veil-a,.86)),rgba(36,38,43,var(--veil-a,.86))),url(/how/img/grain16-d.webp) 0 0/512px 512px repeat,var(--veil-base,var(--paper))}
.veil16--bone-base{--veil-base:var(--bone)}
.veil16{--fg:var(--bone);--lang:var(--gold-l);--cta-bg:var(--bone);--cta-fg:var(--ink);--hair:rgba(251,248,241,.22);color:var(--fg);
--bt-c:var(--bone);--bt-link:var(--bone);--bt-mix:94%}
.veil16--azure{--bt-t:var(--azure)} .veil16--verd{--bt-t:var(--verd)} .veil16--ink{--bt-t:var(--ink)}
/* ---------- 23. Масштаб на пульте (zm): вся страница 80 · 90 · 100 · 110 % ----------
Роман 22.10: «надо сделать возможность уменьшать масштаб сайта … чтобы я мог видеть как выглядел бы сайт при увеличении и уменьшении всех пропорций».
Обычное Cmd ± на этой странице почти ничего не меняет: все размеры — доли ширины окна (--u). zoom на html меняет все пропорции при той же ширине окна.
Выбор помнит браузер (вместе с пультом). Пульт сам остаётся в 100 %. */
/* только на ПК (≥ 1024 px): на телефоне zoom 110 % даёт прокрутку вбок (15 px на 390), а 80 % — цели касания < 44 px (smoke ночи 16) */
@media (min-width:1024px){
html[data-zm="80"]{zoom:.8} html[data-zm="90"]{zoom:.9} html[data-zm="110"]{zoom:1.1}
html[data-zm="80"] #pult{zoom:1.25} html[data-zm="90"] #pult{zoom:1.1111} html[data-zm="110"] #pult{zoom:.90909}
}
/* =====================================================================
ПРОГОН 17 · S1 (26.10.2026) — §24 масштаб ужимает всё · §25 живой разделитель · §26 коробка или слитно
===================================================================== */
/* ---------- 24. Масштаб: «секции во всю ширину тоже ужимаются» (Роман 26.10: «привязаны к краям») ----------
§23 ставил zoom на html: содержимое (в --u) сжималось, а ширина разделов оставалась во всё окно — фон и плиты «прибиты к краям».
Теперь при 80/90 % страница — лист шириной calc(100vw * var(--vwk,1)) в единицах zoom (= 80/90 % окна), по центру; вокруг та же бумага.
Так масштаб — честное «отойти на шаг»: все пропорции, включая разделы во всю ширину, меньше на 10–20 %. 110 % — как в §23. */
@media (min-width:1024px){
html:is([data-zm="80"],[data-zm="90"]) body{width:calc(100vw * var(--vwk,1));margin-inline:auto;overflow-x:clip}
}
/* ---------- 25. Разделитель: живой (Роман 26.10: «вместо золотого ✛ — живой разделитель… крутится»; Вирджиния — механика, не вид; дирижёр: от прокрутки, 360° за ≈ 450 px) ----------
rh=live — ✛ на всех разгрузках: перед «Направлениями», «Тестами», «Ценами», «Записью»; поворот от прокрутки (system.js пишет --s17-r на обёртку),
соседние — в разные стороны; при reduced-motion и «Остановить анимацию» стоит. Воздух прежний (§19): знак стоит в нём, шаг почти тот же (+24u). */
html:is([data-rh="live"],[data-rh="big"],[data-rh="glow"]) :is([data-sec="courses"],[data-sec="tests"],[data-sec="prices"],[data-sec="zapis"]):not([hidden])::before{content:"\271B";display:flex;align-items:center;justify-content:center;
width:calc(120 * var(--u));height:calc(120 * var(--u));margin:calc(var(--sec) * var(--u)) auto calc(var(--sec) * -1 * var(--u));
font:400 calc(26 * var(--u))/1 var(--f-head);color:var(--gold);speak:never;transform:rotate(var(--s17-r,0deg));will-change:transform}
@media (max-width:1023.98px){
html:is([data-rh="live"],[data-rh="big"],[data-rh="glow"]) :is([data-sec="courses"],[data-sec="tests"],[data-sec="prices"],[data-sec="zapis"]):not([hidden])::before{width:calc(80 * var(--u));height:calc(80 * var(--u));font-size:calc(20 * var(--u));color:var(--gold-d)}
}
@media (prefers-reduced-motion:reduce){ html:is([data-rh="live"],[data-rh="big"],[data-rh="glow"]) [data-sec]::before{transform:none!important} }
html:is([data-rh="live"],[data-rh="big"],[data-rh="glow"]) :is([data-sec="tests"],[data-sec="zapis"]):not([hidden]) > .sec{margin-top:calc((var(--sec) + 24) * var(--u))}
@media (max-width:1023.98px){
html:is([data-rh="live"],[data-rh="big"],[data-rh="glow"]) :is([data-sec="tests"],[data-sec="zapis"]):not([hidden]) > .sec{margin-top:calc((var(--sec) + 16) * var(--u))}
}
/* прежние снятые коробки §19 (строка записи one, тесты split, канал ear/d14) — и при live, как при sheet */
html:is([data-rh="live"],[data-rh="big"],[data-rh="glow"]) [data-sec="quick"][data-key="one"] .zq{background:var(--paper);box-shadow:none;border-radius:0}
/* ---------- 26. Коробка или слитно — «Какой ты студент» и «Между уроками» (пульт bx; Роман 26.10: «не знаю, что лучше») ----------
bx=as — как сделал раздел (по умолчанию); flat — без заливки, рамок, теней и скруглений, на листе; box — светлая кость, рамка 1 px, мягкая тень.
Договор для разделов: коробке, которая должна слушаться пульта, дать класс .bx17 (и свои внутренние поля в обоих видах).
Известные коробки нынешних вариантов: тесты .tt-ty (ночь 16), .d7-box (обе коробки duo17 T2 — пара, слитно обе); канал .pz-box, .nw-club, .nw-soon. Заливка «слитно» — цвет листа, не none (гравюры с multiply). */
html[data-bx="flat"] [data-sec="tests"] :is(.tt-ty,.d7-box,.bx17),
html[data-bx="flat"] [data-sec="channel"] :is(.pz-box,.nw-soon,.nw-club,.bx17){background:var(--paper)!important;background-image:none!important;box-shadow:none!important;border-color:transparent!important;border-radius:0!important;outline:0!important}
html[data-bx="flat"] [data-sec="tests"] :is(.tt-ty,.d7-box,.bx17)::before,html[data-bx="flat"] [data-sec="channel"] :is(.pz-box,.nw-soon,.nw-club,.bx17)::before{background:none!important;box-shadow:none!important}
html[data-bx="box"] [data-sec="tests"] :is(.tt-ty,.d7-box,.bx17),
html[data-bx="box"] [data-sec="channel"] :is(.pz-box,.nw-soon,.nw-club,.bx17){background-color:var(--bone)!important;box-shadow:0 0 0 1px var(--hair),0 calc(14 * var(--u)) calc(36 * var(--u)) rgba(36,38,43,.10)!important;border-radius:calc(var(--r) * var(--u))!important}
/* ---------- 27. Блеклость — системные причины (S1, п. 8; замеры — R17-S1.md «Блеклость») ----------
1) «Тушь → цвет» у предметов (.tint-host: сова «Вопросов», предметы «Обучения» и «Записи»): на ПК в покое лежит штрих тушью поверх цветной картинки,
цвет виден только при наведении мыши — на экране это серый рисунок. tn=col (по умолчанию) — сразу в цвете; tn=ink — как в ночи 16.
Шапка (ангел «тушь → цвет» при прокрутке) — своя механика H2, не трогается.
2) Плиты §22: краска 86 % по бумаге снимает 20 % насыщенности лазури (C* 27 → 22) и светлит её (L* 29 → 39). pl=p17 — краска 95/96 %
(C* 26 / 19 — почти как сплошная), фактура остаётся; pl=soft — как в ночи 16; pl=solid — сплошной цвет. Контраст при 95 % только выше. */
html[data-tn="col"] .tint > .tint-line{opacity:0!important;transition:none}
html[data-pl="p17"]{--veil-a:.95;--veil-a-v:.96}
/* ---------- 28. Телефон: прокрутка вбок 2–4 px от листьев у края коробки канала (row17, .r17-leaf) — режем по краю раздела (S1, smoke 26.10) ---------- */
@media (max-width:1023.98px){ [data-sec="channel"] > section{overflow-x:clip} }
/* =====================================================================
ПРОГОН 18 · S2 (26.10.2026, ночь) — §29 фон страницы · §30 разделитель крупнее · §31 масштаб 110 без прокрутки вбок · §32 фоновые рисунки (слой B3)
===================================================================== */
/* ---------- 29. Фон страницы (пульт pg): кость (как сейчас, лист #f7f3ea) | Прогон 18 · белый ----------
Роман 26.10 вечер: «посмотреть вариант сайта с белым фоном» — сравнить рядом. Меняется только лист (--paper); кость карточек и панелей (--bone) остаётся.
Риск (Claude): картинки со своим тоном бумаги на белом читаются прямоугольниками-вырезками. */
html[data-pg="white"]{--paper:#ffffff}
html[data-pg="white"] body{background:#ffffff}
/* ---------- 30. Разделитель крупнее (rh=big): тот же живой ✛, в 1,8 раза крупнее; поворот от прокрутки — тот же (system.js) ---------- */
html[data-rh="big"] :is([data-sec="courses"],[data-sec="tests"],[data-sec="prices"],[data-sec="zapis"]):not([hidden])::before{
width:calc(180 * var(--u));height:calc(180 * var(--u));font-size:calc(47 * var(--u));
margin:calc((var(--sec) - 20) * var(--u)) auto calc((var(--sec) + 20) * -1 * var(--u))}
@media (max-width:1023.98px){
html[data-rh="big"] :is([data-sec="courses"],[data-sec="tests"],[data-sec="prices"],[data-sec="zapis"]):not([hidden])::before{
width:calc(120 * var(--u));height:calc(120 * var(--u));font-size:calc(36 * var(--u))}
}
/* ---------- 31. Масштаб 110 % без прокрутки вбок (J17-ux: 1745 px при окне 1710) ---------- */
@media (min-width:1024px){
html[data-zm="110"]{overflow-x:clip}
html[data-zm="110"] body{width:calc(calc(100vw * var(--vwk,1)) / 1.1);overflow-x:clip}
}
/* ---------- 32. Фоновые рисунки (пульт bgl): слой B3 — s0/bg18.css, все его правила под html[data-bgl="on"]; «нет» — слоя нет ---------- */
html[data-bgl="off"] :is(.bg18,[class^="bg18-"],[class*=" bg18-"]){display:none!important}
/* ---------- 33. Разделитель «живее» (rh=glow, записка B3): тот же живой ✛ в золотом сиянии (s0/bg18/star-glow.webp), поворот — тот же; знак в 1,9 раза крупнее live ---------- */
html[data-rh="glow"] :is([data-sec="courses"],[data-sec="tests"],[data-sec="prices"],[data-sec="zapis"]):not([hidden])::before{
width:calc(150 * var(--u));height:calc(150 * var(--u));font-size:calc(50 * var(--u));color:var(--gold-d,#a3802f);
background:url(/s0/bg18/star-glow.webp) center/calc(140 * var(--u)) no-repeat;
margin:calc((var(--sec) - 15) * var(--u)) auto calc((var(--sec) + 15) * -1 * var(--u))}
@media (max-width:1023.98px){
html[data-rh="glow"] :is([data-sec="courses"],[data-sec="tests"],[data-sec="prices"],[data-sec="zapis"]):not([hidden])::before{
width:calc(112 * var(--u));height:calc(112 * var(--u));font-size:calc(38 * var(--u));background-size:calc(104 * var(--u))}
}
/* s0/bg18.css */
/* B3 · прогон 18 · фоновые рисунки (пульт «Фоновые рисунки»: html[data-bgl="on"|"off"]).
Роман 26.10 вечер: «полупрозрачные фоновые элементы, как у Вирджинии — едва заметные, но красиво заполняют визуальную пустоту».
Рисунки — настоящие гравюры общественного достояния (вырезка и тон, не раскраска): перо — «Энциклопедия», Art d'écrire, pl. II (1760-е);
раскрытая книга — Дюрер, «Эразм Роттердамский» (1526); колокол — Дюрер, «Меланхолия I» (1514); дубовая ветвь — Мастер W с ключом (ок. 1470);
знаки ✛ и звезда-вспышка — свои (знак бренда). Файлы — маски (только альфа), цвет даёт CSS: тушь на бумаге, золото/кость на плитах.
Крупные (не «наклейки», REJECTED п. 24), 7–14 %, за текстом не стоят; движутся только предметы и знаки (вращение 90 с на оборот,
колокол качается). prefers-reduced-motion — стоят. Источники — council48/pd/SOURCES-18.md (строки B3). */
html:is([data-bgl="on"],[data-bgl="more"]) .b18h{isolation:isolate}
html:is([data-bgl="on"],[data-bgl="more"]) .bg18{position:absolute;z-index:-1;display:block;pointer-events:none;user-select:none}
html:is([data-bgl="on"],[data-bgl="more"]) .bg18>i{display:block;width:100%;height:100%;background:var(--b18c,#24262b);opacity:var(--b18o,.08);
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
/* маски */
html:is([data-bgl="on"],[data-bgl="more"]) .bg18--star>i {-webkit-mask-image:url(/s0/bg18/star.webp);mask-image:url(/s0/bg18/star.webp)}
html:is([data-bgl="on"],[data-bgl="more"]) .bg18--cross>i{-webkit-mask-image:url(/s0/bg18/cross.webp);mask-image:url(/s0/bg18/cross.webp)}
html:is([data-bgl="on"],[data-bgl="more"]) .bg18--quill>i{-webkit-mask-image:url(/s0/bg18/quill.webp);mask-image:url(/s0/bg18/quill.webp)}
html:is([data-bgl="on"],[data-bgl="more"]) .bg18--book>i {-webkit-mask-image:url(/s0/bg18/book.webp);mask-image:url(/s0/bg18/book.webp)}
html:is([data-bgl="on"],[data-bgl="more"]) .bg18--bell>i {-webkit-mask-image:url(/s0/bg18/bell.webp);mask-image:url(/s0/bg18/bell.webp)}
html:is([data-bgl="on"],[data-bgl="more"]) .bg18--oak>i {-webkit-mask-image:url(/s0/bg18/oak.webp);mask-image:url(/s0/bg18/oak.webp)}
/* движение: знаки — медленный оборот (соседние в разные стороны), колокол — качание от ушка */
@keyframes bg18-turn{to{transform:rotate(360deg)}}
@keyframes bg18-swing{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
@media (prefers-reduced-motion:no-preference){
html:is([data-bgl="on"],[data-bgl="more"]) .bg18--star>i{animation:bg18-turn 90s linear infinite}
html:is([data-bgl="on"],[data-bgl="more"]) .bg18--cross>i{animation:bg18-turn 120s linear infinite reverse}
html:is([data-bgl="on"],[data-bgl="more"]) .bg18--bell>i{transform-origin:50% 4%;animation:bg18-swing 4.6s ease-in-out infinite alternate}
}
/* ---------- ПК ---------- */
@media (min-width:1024px){
/* шапка: пустая бумага справа от ангела (≈ 270 px на 1710) — золотая звезда-вспышка у крыла */
html:is([data-bgl="on"],[data-bgl="more"]) .hero>.bg18--star{right:2.2%;top:12%;width:clamp(170px,calc(15.5vw * var(--vwk,1)),290px);aspect-ratio:1;--b18c:#c9a84c;--b18o:.16}
/* отзывы: пустота между подзаголовком и стрелками — перо наискось */
html:is([data-bgl="on"],[data-bgl="more"]) .bg18--quill{right:21%;top:2.5%;width:min(calc(34vw * var(--vwk,1)),580px);aspect-ratio:900/164;transform:rotate(-4deg);--b18o:.1}
/* цены, строка «Учим на совесть»: пустота между заголовком и примером — ✛ золотом */
html:is([data-bgl="on"],[data-bgl="more"]) .x10-sc>.bg18--cross{left:41%;top:50%;width:clamp(130px,calc(10vw * var(--vwk,1)),180px);aspect-ratio:1;margin-top:calc(clamp(130px,calc(10vw * var(--vwk,1)),180px) / -2);--b18c:#c9a84c;--b18o:.2}
/* вопросы: дубовая ветвь — правый верх раздела (пустота справа от подзаголовка; вниз уходит под коробку совы) */
html:is([data-bgl="on"],[data-bgl="more"]) [data-vid="faq"]>.bg18--oak,html:is([data-bgl="on"],[data-bgl="more"]) section#faq>.bg18--oak{right:1.5%;top:1%;width:min(calc(36vw * var(--vwk,1)),600px);aspect-ratio:900/1156;--b18o:.09}
/* вопросы: раскрытая книга — под списком вопросов, над ссылкой «Задать свой вопрос» */
html:is([data-bgl="on"],[data-bgl="more"]) [data-vid="faq"]>.bg18--book,html:is([data-bgl="on"],[data-bgl="more"]) section#faq>.bg18--book{left:3%;bottom:12%;width:min(calc(25vw * var(--vwk,1)),400px);aspect-ratio:800/318;--b18o:.1}
/* запись: колокол-звонок на урок — костью по лазури, под «Когда платить?», покачивается */
html:is([data-bgl="on"],[data-bgl="more"]) .zm-plate>.bg18--bell{left:2.5%;top:69%;width:clamp(140px,calc(11vw * var(--vwk,1)),190px);aspect-ratio:204/232;--b18c:#fbf8f1;--b18o:.2}
}
/* ---------- телефон: только там, где есть пустота не за текстом (на 390 её почти нет: перо лежало под стрелками отзывов — снято) ---------- */
@media (max-width:1023.98px){
html:is([data-bgl="on"],[data-bgl="more"]) :is(.bg18--oak,.bg18--book,.bg18--cross,.bg18--bell,.bg18--quill){display:none}
/* шапка: звезда над правым крылом, в пустоте между вводными и ангелом — проверить кадром */
html:is([data-bgl="on"],[data-bgl="more"]) .hero>.bg18--star{right:1.5%;top:41%;width:calc(36vw * var(--vwk,1));aspect-ratio:1;--b18c:#c9a84c;--b18o:.16}
}
/* S2 (по слову дирижёра): «Прогон 18 · заметнее» — та же разметка, непрозрачность ×2, не больше 25 % */
html[data-bgl="more"] .bg18>i{opacity:min(calc(var(--b18o,.08) * 2),.25)}
/* s0/leaf20.css */
/* прогон 20 · голос Романа 27.10 (council49/roman/NOTES-2710-voice.md). Правила — под :root[data-look=leaf]; data-look=l19 показывает лист ночи 19. */
/* шапка: без «Перевода свитка» и «Узнать свой уровень»; каллиграфия, плита и знаки — только в листе 19 (leaf19.css) */
:root[data-look=leaf] #hero .pv-btn, :root[data-look=leaf] #hero .gloss, :root[data-look=leaf] #hero .acts .go{display:none!important}
/* свои рисунки сняты (правило 27.10: без своих векторов): звезда и ✛ слоя B3; ветвь дуба у совы обрезалась коробкой */
:root[data-look=leaf] .bg18--star, :root[data-look=leaf] .bg18--cross, :root[data-look=leaf] section#faq>.bg18--oak{display:none!important}
/* отзывы: стрелки по центру под карточками */
:root[data-look=leaf] .v-sheet17 .rv17-main .rv17-nav{position:static;justify-content:center;margin:calc(22 * var(--u)) auto 0;grid-area:auto;grid-column:1/-1;align-self:auto}
/* направления: одно окно на все шесть сцен (Роман 27.10: «должны быть одинакового размера»); без гравюры за гравюрой */
:root[data-look=leaf] .v-paint18 .d18-plate{height:auto;width:min(100%, calc(330 * var(--u)));aspect-ratio:5/4;min-height:0;overflow:hidden;margin-inline:auto}
:root[data-look=leaf] .v-paint18 .d18-plate img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
@media (max-width:1023.98px){ :root[data-look=leaf] .v-paint18 .d18-plate{width:min(100%, calc(340 * var(--u)))} }
/* контакты + подвал — одна тёмная плита (Роман 27.10): ярь сверху перетекает в тушь подвала; без Констебла и голубя; без второй «Записи» в бот */
:root[data-look=leaf] .v-arch18 .r17-main, :root[data-look=leaf] .v-arch18 .r17-arch, :root[data-look=leaf] .v-arch18 .r17-dove{display:none!important}
:root[data-look=leaf] .v-arch18 .r17-box{border-radius:calc(var(--r) * var(--u)) calc(var(--r) * var(--u)) 0 0;margin-bottom:0;padding-bottom:calc(64 * var(--u))}
:root[data-look=leaf] .v-arch18 .r17-fig{height:calc(300 * var(--u))}
:root[data-look=leaf] #foot.v-moon18{margin-top:0!important;border-radius:0 0 calc(var(--r) * var(--u)) calc(var(--r) * var(--u));
background:linear-gradient(180deg,#2c5a4e 0,#28403b calc(120 * var(--u)),#24262b calc(320 * var(--u)))}
:root[data-look=leaf] #contacts{padding-bottom:0!important;margin-bottom:0!important}
:root[data-look=leaf] .v-arch18 .r17-box.rise{transform:none!important}
@media (max-width:1023.98px){ :root[data-look=leaf] .v-arch18 .r17-box{padding-bottom:calc(36 * var(--u))} }
@media (max-width:1023.98px){ :root[data-look=leaf] .v-arch18 .r17-fig:not(:has(.lf20-obj)){display:none} }
/* «Учим на совесть» (Роман 27.10: фон размазан и тёмный, справа перегружено, слева пусто; «чтобы хотелось потыкать»):
без тёмного окна-картины; игра «Где ошибка?» — главное событие слева, крупно; справа фигура примера стоит на листе с тенью; счёт найденных */
:root[data-look=leaf] .v-hon18 .h18{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);column-gap:calc(48 * var(--u));align-items:end;
padding:calc(52 * var(--u)) calc(56 * var(--u)) calc(44 * var(--u))}
:root[data-look=leaf] .v-hon18 .h18-win{display:none}
:root[data-look=leaf] .v-hon18 .h18-h{font-size:calc(56 * var(--u))}
:root[data-look=leaf] .v-hon18 .lf20-lede{margin:calc(14 * var(--u)) 0 0;max-width:34em;font:400 max(15px,calc(19 * var(--u)))/1.45 var(--f-text);color:var(--muted)}
:root[data-look=leaf] .v-hon18 .h18-err{margin-top:calc(26 * var(--u));padding:calc(24 * var(--u)) calc(28 * var(--u)) calc(14 * var(--u));background:#fffdf8;border-radius:calc(var(--r-s) * var(--u))}
:root[data-look=leaf] .v-hon18 .err-k{font:italic 500 max(15px,calc(20 * var(--u)))/1.2 var(--f-head);color:var(--muted)}
:root[data-look=leaf] .v-hon18 .err-l{font:500 calc(40 * var(--u))/1.25 var(--f-head);font-style:normal;margin-top:calc(10 * var(--u));column-gap:.28em;row-gap:calc(4 * var(--u))}
:root[data-look=leaf] .v-hon18 .err-w{padding:0 .12em;border-radius:calc(6 * var(--u));text-decoration:underline dotted rgba(41,70,111,.55);text-decoration-thickness:2px;text-underline-offset:.2em;transition:background-color .2s,translate .2s}
:root[data-look=leaf] .v-hon18 .err-w:hover{background:rgba(41,70,111,.09);translate:0 -2px}
:root[data-look=leaf] .v-hon18 .err-w.is-bad{text-decoration:line-through 3px var(--azure);color:var(--azure)}
:root[data-look=leaf] .v-hon18 .err-ok{font-style:italic;color:#2c5a4e;padding:0 .1em;border-bottom:2px solid rgba(201,168,76,.8)}
:root[data-look=leaf] .v-hon18 .err-say{font-size:max(15px,calc(18 * var(--u)));min-height:calc(54 * var(--u))}
:root[data-look=leaf] .v-hon18 .lf20-score{margin:calc(4 * var(--u)) 0 0;font:italic 500 max(14px,calc(17 * var(--u)))/1.2 var(--f-head);color:var(--gold-d,#8a7230)}
:root[data-look=leaf] .v-hon18 .err-nav button.is-found i{background:#2c5a4e;color:var(--bone);box-shadow:none}
:root[data-look=leaf] .v-hon18 .h18-scene{height:calc(470 * var(--u));align-self:stretch;min-height:calc(420 * var(--u))}
:root[data-look=leaf] .v-hon18 .h18-scene::after{content:"";position:absolute;z-index:1;left:12%;right:12%;bottom:calc(-2 * var(--u));height:calc(26 * var(--u));border-radius:50%;
background:radial-gradient(closest-side,rgba(36,38,43,.20),rgba(36,38,43,0))}
:root[data-look=leaf] .v-hon18 .h18-fig{left:0!important;right:0;margin-inline:auto;bottom:0;height:var(--fh,100%);max-width:100%;object-fit:contain;filter:none}
:root[data-look=leaf] .v-hon18 .h18-f0{--fh:66%}
@media (max-width:1023.98px){
:root[data-look=leaf] .v-hon18 .h18{grid-template-columns:minmax(0,1fr);padding:calc(22 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u))}
:root[data-look=leaf] .v-hon18 .h18-h{font-size:calc(34 * var(--u))}
:root[data-look=leaf] .v-hon18 .h18-scene{order:0;height:calc(250 * var(--u));min-height:0;aspect-ratio:auto;margin-top:calc(8 * var(--u))}
:root[data-look=leaf] .v-hon18 .err-l{font-size:calc(28 * var(--u))}
:root[data-look=leaf] .v-hon18 .h18-err{padding:calc(18 * var(--u)) calc(16 * var(--u)) calc(10 * var(--u))}
}
/* настоящие предметы поверх коробок (Роман 27.10 13:01, по образцу beowulf.school, но свои — музейные фото PD): s0/obj20/*.webp, JS — leaf20.js OBJ.
edge — целиком, лежит на краю плиты и заходит за неё; bleed — срезан краем плиты; off — нет. Тень — двойная, «живая»: близкая плотная + дальняя мягкая. */
.lf20-obj{display:none}
:root[data-look=leaf]:not([data-ob=off]) .lf20-obj{display:block;position:absolute;z-index:5;pointer-events:none;width:var(--w);height:auto;rotate:var(--rot,0deg);
filter:drop-shadow(0 calc(3 * var(--u)) calc(3 * var(--u)) rgba(15,18,16,.38)) drop-shadow(calc(6 * var(--u)) calc(22 * var(--u)) calc(26 * var(--u)) rgba(15,18,16,.30))}
.lf20-clip{display:none}
:root[data-look=leaf][data-ob=bleed] .lf20-clip{display:block;position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;z-index:5}
@media (max-width:1023.98px){ :root[data-look=leaf]:not([data-ob=off]) .lf20-obj{width:var(--wm,var(--w))} }
:root[data-look=leaf][data-ob=bleed] .lf20-obj[data-ob=edge]{display:none}
/* люди — одной рукой «Какой ты студент?» (Роман 27.10): новые фигуры художника G (council50/gen, R20-gen.md) вместо плотной рисовки ночи 19 */
:root[data-look=leaf] .v-sheet17 .rv17-fig img{content:url(/s0/img20/nun-520.webp);object-fit:contain;object-position:50% 100%}
:root[data-look=leaf] .v-row18 .nw-monks img{content:url(/s0/img20/novice-560.webp)!important;object-fit:contain;object-position:50% 100%}
:root[data-look=leaf] .v-row18 .r18-walker img{content:url(/s0/img20/pilgrim-420.webp)!important;object-fit:contain;object-position:50% 100%}
:root[data-look=leaf] #prices .t18-fig img{content:url(/s0/img20/purse-400.webp);object-fit:contain;object-position:50% 100%}
/* «Обучение»: пара стоит на полу комнаты (Роман 27.10: лавка висела в воздухе, у фона другой горизонт) — комната и пара художника G в одной руке;
горизонт комнаты ≈ 45 % высоты = глаза сидящего; ноги и ножки лавки — на её полу. Края комнаты растворены в лист (маски talk18) */
:root[data-look=leaf] .v-talk18 .ho-bg18{content:url(/s0/img20/room-1500.webp);opacity:.62;mix-blend-mode:normal;height:calc(470 * var(--u));right:calc(-10 * var(--u));bottom:calc(-34 * var(--u))}
:root[data-look=leaf] .v-talk18 .ho-pair{content:url(/s0/img20/pair-1300.webp);height:calc(360 * var(--u));right:calc(150 * var(--u));bottom:calc(-14 * var(--u))}
@media (max-width:1023.98px){
:root[data-look=leaf] .v-talk18 .ho-bg18{height:auto;width:108%;left:-4%;bottom:2%;opacity:.5}
:root[data-look=leaf] .v-talk18 .ho-pair{width:82%;height:auto;right:auto;bottom:auto;margin:0 auto calc(4 * var(--u))}
}
/* «Тесты»: студент на лестнице, весь пол из книг (G, n20-tests-climber) */
:root[data-look=leaf] .v-duo18 .d7-lv .d7-climb{background:url(/s0/img20/climber-1400.webp) 50% 100%/contain no-repeat!important}
/* «Учим на совесть»: шесть фигур примеров — рука «Какой ты студент?» (G, n20-hon-1…6) */
:root[data-look=leaf] .v-hon18 .h18-f0{content:url(/s0/img20/hon1-880.webp)}
:root[data-look=leaf] .v-hon18 .h18-f1{content:url(/s0/img20/hon2-880.webp)}
:root[data-look=leaf] .v-hon18 .h18-f2{content:url(/s0/img20/hon3-880.webp)}
:root[data-look=leaf] .v-hon18 .h18-f3{content:url(/s0/img20/hon4-880.webp);display:block!important}
:root[data-look=leaf] .v-hon18 .h18-f4{content:url(/s0/img20/hon5-880.webp)}
:root[data-look=leaf] .v-hon18 .h18-f5{content:url(/s0/img20/hon6-880.webp)}
/* подарочный сертификат: свиток с лилиями снят (Роман 27.10), вместо него — настоящий ларец (слой предметов) */
:root[data-look=leaf] #prices .x10-gift .x10-gobj{display:none}
:root[data-look=leaf]:not([data-ob=off]) #prices .x10-gift{padding-top:calc(150 * var(--u))}
:root[data-look=leaf] #prices .x10-gift{overflow:visible}
@media (max-width:1023.98px){ :root[data-look=leaf]:not([data-ob=off]) #prices .x10-gift{padding-top:calc(110 * var(--u))} }
/* контакты: справа — письменный ларец (слой предметов); на телефоне — над плитой */
@media (max-width:1023.98px){
}
/* Лёйкен / Аманн на всю секцию: подлинный оттиск целиком (без обрезки фигур) в одном окне-паспарту цвета бумаги */
:root[data-look=leaf] :is(.v-luy20,.v-amm20) .d18-plate{background:#f4efe3;padding:calc(10 * var(--u));box-shadow:0 0 0 1px rgba(36,38,43,.12),0 calc(8 * var(--u)) calc(18 * var(--u)) calc(-10 * var(--u)) rgba(15,18,16,.35);border-radius:calc(3 * var(--u))}
:root[data-look=leaf] :is(.v-luy20,.v-amm20) .d18-plate img{object-fit:contain;object-position:50% 50%;box-shadow:none!important;border-radius:0;mix-blend-mode:multiply}
:root[data-look=leaf] .v-luy20 .d18-plate{aspect-ratio:1/1;width:min(100%, calc(300 * var(--u)));padding:calc(8 * var(--u))}
:root[data-look=leaf] .v-amm20 .d18-plate{aspect-ratio:4/5;width:min(100%, calc(270 * var(--u)));padding:calc(8 * var(--u))}
/* YouTube-карточка (Роман 27.10: фонарь-проектор не дошёл — продумать заново): подлинный офорт «показчик картинок» — рассказчик с указкой
перед доской картинок и толпа слушателей (Рейксмузеум RP-P-2015-26-323, CC0): разборы «по картинкам», живая речь. Без анимации. */
:root[data-look=leaf] .v-row18 .r17-yt .r17-proj{display:none}
:root[data-look=leaf] .v-row18 .r17-yt{position:relative;display:block;min-height:calc(230 * var(--u))}
:root[data-look=leaf] .v-row18 .r17-yt::after{content:"";position:absolute;right:calc(14 * var(--u));bottom:calc(10 * var(--u));width:40%;aspect-ratio:1691/1388;
background:url(/s0/img20/yt-show-760.webp) 50% 100%/contain no-repeat;mix-blend-mode:multiply;pointer-events:none}
:root[data-look=leaf] .v-row18 .r17-yt .r17-txt{max-width:56%;position:relative;z-index:1}
@media (max-width:1023.98px){
:root[data-look=leaf] .v-row18 .r17-yt::after{position:static;display:block;width:100%;max-width:420px;margin:calc(10 * var(--u)) auto 0}
:root[data-look=leaf] .v-row18 .r17-yt .r17-txt{max-width:none}
}
/* ===== прогон 21 · контакты + подвал (Роман 27.10 вечер): на всю ширину экрана; без ларца и без кнопки записи;
шесть значков в один ряд без подписей — наведение показывает адрес (он и есть ссылка), клик по значку — переход; секция ниже ===== */
:root[data-look=leaf] #foot.v-moon18{margin-inline:0!important;width:auto;border-radius:0!important}
:root[data-look=leaf] .v-arch18 .r17-box{border-radius:0!important;padding:calc(54 * var(--u)) calc(64 * var(--u)) calc(46 * var(--u));min-height:0;
grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"list"!important}
:root[data-look=leaf] .v-arch18 .r17-fig, :root[data-look=leaf] .v-arch18 .a18-cta{display:none!important}
:root[data-look=leaf] .v-arch18 .r17-list{display:flex!important;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:calc(18 * var(--u)) calc(28 * var(--u))}
:root[data-look=leaf] .v-arch18 .r17-r{position:relative;padding:0;background:none!important}
:root[data-look=leaf] .v-arch18 .r17-r:not(.r17-h) .r17-k{display:none}
:root[data-look=leaf] .v-arch18 .r17-r:not(.r17-h) .r17-a{display:block;min-height:0}
:root[data-look=leaf] .v-arch18 .r17-r:not(.r17-h) .r17-i{width:calc(68 * var(--u));height:calc(68 * var(--u));min-width:44px;min-height:44px}
:root[data-look=leaf] .v-arch18 .r17-r:not(.r17-h) .r17-v{position:absolute;left:50%;top:calc(100% + 12 * var(--u));translate:-50% 0;z-index:3;white-space:nowrap;
padding:calc(8 * var(--u)) calc(14 * var(--u));border-radius:calc(var(--r-s) * var(--u));background:#fbf8f1;color:#24262b;font-size:max(15px,calc(18 * var(--u)));
box-shadow:0 calc(8 * var(--u)) calc(20 * var(--u)) rgba(10,20,16,.35);opacity:0;visibility:hidden;transition:opacity .18s,visibility 0s .18s;background-image:none}
:root[data-look=leaf] .v-arch18 .r17-r:not(.r17-h) .r17-v::before{content:"";position:absolute;left:50%;top:-6px;margin-left:-6px;border:6px solid transparent;border-top:0;border-bottom-color:#fbf8f1}
:root[data-look=leaf] .v-arch18 .r17-r:not(.r17-h):is(:hover,:focus-within) .r17-v{opacity:1;visibility:visible;transition:opacity .18s}
:root[data-look=leaf] .v-arch18 .r17-r:not(.r17-h) .r17-s{display:none}
:root[data-look=leaf] .v-arch18 .r17-r .r17-v::after{content:none}
:root[data-look=leaf] .v-arch18 .r17-h{display:flex;flex-direction:column;align-items:flex-end;gap:calc(4 * var(--u))}
:root[data-look=leaf] .v-arch18 .r17-h .r17-k{display:none}
@media (max-width:1023.98px){
:root[data-look=leaf] .v-arch18 .r17-box{padding:calc(28 * var(--u)) calc(16 * var(--u)) calc(24 * var(--u))}
:root[data-look=leaf] .v-arch18 .r17-list{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(16 * var(--u)) calc(8 * var(--u));justify-items:center}
:root[data-look=leaf] .v-arch18 .r17-r:not(.r17-h) .r17-a{display:flex;flex-direction:column;align-items:center;gap:calc(6 * var(--u))}
:root[data-look=leaf] .v-arch18 .r17-r:not(.r17-h) .r17-v{position:static;translate:none;opacity:1;visibility:visible;padding:0;background:none;box-shadow:none;color:#c8ddd3;font-size:max(12px,calc(13 * var(--u)));white-space:normal;text-align:center;overflow-wrap:anywhere}
:root[data-look=leaf] .v-arch18 .r17-r:not(.r17-h) .r17-v::before{content:none}
:root[data-look=leaf] .v-arch18 .r17-h{grid-column:1/-1;margin:calc(4 * var(--u)) 0 0;align-items:center}
}
/* прогон 21 · «Учим на совесть»: фон примера на всю секцию, светлый, сменяется вместе с примером */
.lf21-hbg{display:none}
:root[data-look=leaf] .v-hon18 .h18{position:relative;overflow:hidden;isolation:isolate}
:root[data-look=leaf] .v-hon18 .lf21-hbg{display:block;position:absolute;inset:0;z-index:-1;pointer-events:none}
:root[data-look=leaf] .v-hon18 .lf21-hbg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 55%;opacity:0;transition:opacity .9s ease}
:root[data-look=leaf] .v-hon18 .lf21-hbg img.is-on{opacity:.9}
:root[data-look=leaf] .v-hon18 .lf21-hbg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(251,248,241,.94) 0,rgba(251,248,241,.82) 40%,rgba(251,248,241,.1) 70%,rgba(251,248,241,0) 100%)}
@media (max-width:1023.98px){ :root[data-look=leaf] .v-hon18 .lf21-hbg::after{background:linear-gradient(180deg,rgba(251,248,241,.92) 0,rgba(251,248,241,.85) 55%,rgba(251,248,241,.2) 80%,rgba(251,248,241,0) 100%)} }
@media (prefers-reduced-motion:reduce){ :root[data-look=leaf] .v-hon18 .lf21-hbg img{transition:none} }
/* прогон 21 · отзывы «коробкой» (Роман 27.10 вечер): тихая плита на тон светлее листа, без рамки; нижний край — пол, монахиня стоит на нём */
.v-sheet21 .rv17{position:relative;padding:calc(40 * var(--u)) calc(40 * var(--u)) 0 calc(28 * var(--u));border-radius:calc(var(--r) * var(--u));
background:linear-gradient(180deg,rgba(255,253,248,.0) 0,rgba(255,253,248,.85) 22%,#fffdf8 100%);box-shadow:inset 0 -1px 0 rgba(36,38,43,.10);align-items:end}
.v-sheet21 .rv17-fig{margin-bottom:0;align-self:end}
.v-sheet21 .rv17-main{padding-bottom:calc(34 * var(--u))}
.v-sheet21 .rv17-sh{bottom:calc(-5 * var(--u))}
@media (max-width:1023.98px){ .v-sheet21 .rv17{padding:calc(20 * var(--u)) calc(14 * var(--u)) 0} .v-sheet21 .rv17-main{padding-bottom:calc(18 * var(--u))} }
/* прогон 21 · «Обучение»: комната на всю коробку (Роман 27.10 вечер: картинка только справа сверху — всё внимание туда) */
.v-talk21 .ho{position:relative;isolation:isolate;overflow:hidden}
.v-talk21 .ho::before{content:"";position:absolute;inset:0;z-index:-2;background:url(/s0/img20/room-1500.webp) 50% 38%/cover no-repeat;opacity:.6}
.v-talk21 .ho::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(251,248,241,.78) 0,rgba(251,248,241,.35) 38%,rgba(251,248,241,0) 62%),linear-gradient(0deg,rgba(251,248,241,.92) 0,rgba(251,248,241,.75) 30%,rgba(251,248,241,0) 55%)}
:root[data-look=leaf] .v-talk21 .ho-bg18{display:none}
.v-talk21 .ho-panel{background:rgba(251,248,241,.9)}
@media (max-width:1023.98px){ .v-talk21 .ho::before{background-position:60% 0;background-size:auto 46%;background-repeat:no-repeat} .v-talk21 .ho::after{background:linear-gradient(0deg,#fbf8f1 0,#fbf8f1 58%,rgba(251,248,241,0) 70%)} }
/* прогон 21 · направления A: раскрашенный Лёйкен на всю карточку, текст поверх на вуали цвета карточки */
:root .v-luyc21 .d18-cd{position:relative;overflow:hidden;min-height:calc(430 * var(--u))!important;padding:0!important;display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate;--vel:36,38,43}
:root .v-luyc21 .d18-cd[data-dir="ielts"]{--vel:41,70,111} :root .v-luyc21 .d18-cd[data-dir="business"]{--vel:44,90,78} :root .v-luyc21 .d18-cd[data-dir="immigration"]{--vel:31,54,88}
:root[data-look] .v-luyc21 .d18-plate{position:absolute!important;inset:0;width:100%!important;height:100%!important;max-width:none;aspect-ratio:auto!important;margin:0!important;padding:0!important;z-index:-1;background:none!important;box-shadow:none!important}
:root[data-look] .v-luyc21 .d18-plate img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:50% 35%;border-radius:0!important;box-shadow:none!important;mix-blend-mode:normal!important}
:root .v-luyc21 .d18-hang{display:none}
:root .v-luyc21 .d18-panel{position:relative;background:linear-gradient(0deg,rgba(var(--vel),.94) 0,rgba(var(--vel),.86) 55%,rgba(var(--vel),0) 100%)!important;box-shadow:none!important;border-radius:0!important;
padding:calc(70 * var(--u)) calc(22 * var(--u)) calc(20 * var(--u))!important;color:#fbf8f1;--fg:#fbf8f1}
:root .v-luyc21 .d18-panel :is(h3,p){color:#fbf8f1!important;text-shadow:0 1px 2px rgba(0,0,0,.25)}
:root .v-luyc21 .d18-panel a{color:#e9cf8e!important}
@media (max-width:1023.98px){ :root .v-luyc21 .d18-cd{min-height:calc(380 * var(--u))!important} }
/* прогон 21 · направления B: одна большая раскрашенная гравюра под всеми шестью, карточки — полупрозрачная бумага поверх */
:root .v-luyw21{--wide:url(/s0/img21/luy-wide-1600.webp)}
:root .v-luyw21 .d16-grid{position:relative;isolation:isolate;padding:calc(300 * var(--u)) calc(28 * var(--u)) calc(28 * var(--u));border-radius:calc(var(--r) * var(--u));overflow:hidden}
:root .v-luyw21 .d16-grid::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--wide) 50% 30%/cover no-repeat}
:root[data-look] .v-luyw21 .d18-plate, :root .v-luyw21 .d18-hang{display:none!important}
:root .v-luyw21 .d18-cd{background:rgba(251,248,241,.9)!important;backdrop-filter:blur(2px);min-height:0;padding:0!important}
:root .v-luyw21 .d18-panel{background:none!important;box-shadow:none!important}
@media (max-width:1023.98px){ :root .v-luyw21 .d16-grid{padding:calc(200 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u))} :root .v-luyw21 .d16-grid::before{background-size:auto 260px;background-position:50% 0;background-color:#fbf8f1} }
:root .v-luyw21 .d18-cd, :root .v-luyw21 .d18-cd *{--fg:#24262b}
:root .v-luyw21 .d18-panel :is(h3,p){color:#24262b!important;text-shadow:none!important}
:root .v-luyw21 .d18-panel a{color:#29466f!important}
:root .v-luyw21 .d18-cd{border-radius:calc(var(--r-s) * var(--u));box-shadow:0 calc(8 * var(--u)) calc(20 * var(--u)) calc(-10 * var(--u)) rgba(15,18,16,.35)!important}
/* прогон 21 · «Подслушники»: одна сцена одной рукой — осенний дуб, за ним послушник подслушивает двух учеников (G n21-slush-oak); ухо и Босх сняты */
:root[data-look=leaf] .v-row18 .nw-club .paint > span{display:none!important}
:root[data-look=leaf] .v-row18 .nw-club .paint{background:url(/s0/img21/slush-1100.webp) 62% 50%/cover no-repeat!important}
/* «Путешествие пилигрима»: пейзаж и пилигрим в манере Райша (G n21-pilgrim-reisch) — пилигрим идёт по тропинке, не по воде */
:root[data-look=leaf] .v-row18 .r18-walker{display:none!important}
:root[data-look=leaf] .v-row18 .r17-land img{content:url(/s0/img21/pilg-1100.webp)!important;object-fit:cover!important;object-position:40% 60%;opacity:1!important;filter:none!important;-webkit-mask-image:none!important;mask-image:none!important;mix-blend-mode:normal!important}
/* крестьяне Дюрера: ноги дорисованы целиком (слово Романа 27.10) */
:root[data-look=leaf] .q39-near .pz-pair .pz-sw img{content:url(/s0/img21/peas-900.webp)}
/* «Тесты»: лестница уходит в облака, студент ростом с типов справа (G n21-climber-sky) */
:root[data-look=leaf] .v-duo18 .d7-lv .d7-climb{background:url(/s0/img21/climb-700.webp) 50% 100%/auto 100% no-repeat!important}
:root[data-look=leaf] .v-row18 .nw-club{display:flex!important;flex-direction:column;padding:0!important;overflow:hidden}
:root[data-look=leaf] .v-row18 .nw-club .paint{position:relative!important;inset:auto!important;width:100%!important;height:auto!important;aspect-ratio:3/2;flex:none;order:-1}
:root[data-look=leaf] .v-row18 .nw-club .ea-text{position:relative!important;inset:auto!important;max-width:none!important;width:auto!important;background:#fbf8f1!important;box-shadow:none!important;border-radius:0!important;color:#24262b;flex:1;padding:calc(18 * var(--u)) calc(24 * var(--u)) calc(20 * var(--u))!important}
/* прогон 21 · сезон «осень» */
.lf21-aut{display:none}
:root[data-look=leaf][data-season=autumn] .lf21-aut{display:block;position:absolute;z-index:4;height:auto;pointer-events:none;filter:drop-shadow(0 calc(6 * var(--u)) calc(8 * var(--u)) rgba(15,18,16,.28))}
@media (max-width:1023.98px){ :root[data-look=leaf][data-season=autumn] .lf21-aut{width:calc(130 * var(--u))!important} }
/* s0/leaf19.css */
/* ночь 19 · основная линия «лист», выжатая по разбору J-BASE и аудиту A2. Действует во всех обликах, кроме «Прогон 18 · как было» (html[data-look="r18"]).
Файлы разделов не трогаются: правила — поверх выбранных Романом вариантов (пульт 23:25). Пути картинок — от s0. */
/* ---------- I Направления (paint18): разные «кожи», одна рамка вместо двух, одна главная кнопка ---------- */
:root:not([data-look=r18]) .v-paint18 .d18-cd{--sk-bg:#f3eee3;background:var(--sk-bg);transition:transform .35s ease, box-shadow .35s ease}
:root:not([data-look=r18]) .v-paint18 .d18-cd:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(36,38,43,.16)}
:root:not([data-look=r18]) .v-paint18 .d18-panel{background:transparent;box-shadow:none;padding-left:calc(6 * var(--u));padding-right:calc(6 * var(--u))}
:root:not([data-look=r18]) .v-paint18 .d18-cd[data-dir="ielts"]{--sk-bg:#29466f}
:root:not([data-look=r18]) .v-paint18 .d18-cd[data-dir="business"]{--sk-bg:#2c5a4e}
:root:not([data-look=r18]) .v-paint18 .d18-cd[data-dir="immigration"]{--sk-bg:#1f3658}
:root:not([data-look=r18]) .v-paint18 .d18-cd:is([data-dir="ielts"],[data-dir="business"],[data-dir="immigration"]) .d18-panel{
--fg:#fbf8f1;--fg-soft:rgba(251,248,241,.82);--accent:#e9cf8e;color:#fbf8f1}
:root:not([data-look=r18]) .v-paint18 .d18-cd:is([data-dir="ielts"],[data-dir="business"],[data-dir="immigration"]) :is(.d16-h,.d16-ln){color:#fbf8f1}
:root:not([data-look=r18]) .v-paint18 .d18-cd:is([data-dir="ielts"],[data-dir="business"],[data-dir="immigration"]) .d18-plate img{box-shadow:0 0 0 1px rgba(233,207,142,.35),0 10px 26px rgba(0,0,0,.35)}
/* тон-в-тон: та же гравюра крупно за картой (Вирджиния m05) */
:root[data-look=l19] .v-paint18 .d18-cd .lf19-ton{position:absolute;inset:-8%;z-index:-1;background:center/cover no-repeat;opacity:.13;mix-blend-mode:luminosity;filter:grayscale(1) contrast(1.3);pointer-events:none}
:root[data-look=l19] .v-paint18 .d18-cd:not([data-dir="ielts"]):not([data-dir="business"]):not([data-dir="immigration"]) .lf19-ton{mix-blend-mode:multiply;opacity:.07}
/* кнопки карточек → ссылка; одна главная кнопка под сеткой */
:root:not([data-look=r18]) .v-paint18 .d16-act .btn{all:unset;cursor:pointer;font:600 max(15px, calc(16 * var(--u)))/1.3 var(--f-body, Georgia, serif);
color:var(--azure);border-bottom:1px solid currentColor;padding-bottom:1px}
:root:not([data-look=r18]) .v-paint18 .d16-act .btn::after{content:" →"}
:root:not([data-look=r18]) .v-paint18 .d18-cd:is([data-dir="ielts"],[data-dir="business"],[data-dir="immigration"]) .d16-act .btn{color:#e9cf8e}
:root:not([data-look=r18]) .v-paint18 .d16-act .btn-bot{display:none}
:root:not([data-look=r18]) .v-paint18 .d16-act .btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.lf19-main{display:none}
:root:not([data-look=r18]) .lf19-main{display:flex;justify-content:center;align-items:center;gap:calc(22 * var(--u));margin-top:calc(34 * var(--u))}
:root:not([data-look=r18]) .lf19-main .btn{--btn-h:58;font-size:max(16px, calc(18 * var(--u)));padding:0 calc(30 * var(--u))}
:root:not([data-look=r18]) .lf19-main a.bot{color:var(--fg-soft);font-size:max(15px, calc(16 * var(--u)))}
@media (max-width:1023.98px){:root:not([data-look=r18]) .lf19-main{flex-direction:column;gap:12px;padding:0 16px}:root:not([data-look=r18]) .lf19-main .btn{width:100%;box-sizing:border-box;justify-content:center;white-space:normal;text-align:center}}
/* живой знак на шве раздела (Вирджиния: один медленный знак на секцию, 17–20 с) */
.lf19-sign{display:none}
:root[data-look=l19] .lf19-sign{display:block;position:absolute;z-index:2;width:calc(var(--s,64) * var(--u));aspect-ratio:1;pointer-events:none;
background:center/contain no-repeat;animation:lf19-spin var(--t,19s) linear infinite;opacity:var(--o,.9)}
:root[data-look=l19] .lf19-sign.ccw{animation-direction:reverse}
@media (max-width:1023.98px){:root:not([data-look=r18]) .lf19-sign{display:none}}
@keyframes lf19-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){:root .lf19-sign{animation:none}}
/* ---------- II Преподаватели: плашка имени лазурью, регалии свёрнуты, знак на шве ---------- */
:root:not([data-look=r18]) .v-r10 .t10-cap{background:linear-gradient(0deg,rgba(41,70,111,.94) 0,rgba(41,70,111,.82) 55%,rgba(41,70,111,0) 100%)}
:root:not([data-look=r18]) .v-r10 .t10-acc > summary{display:inline-flex;align-items:center;gap:.55em;min-height:44px;list-style:none;cursor:pointer;
font:italic 500 max(16px, calc(18 * var(--u)))/1.2 var(--f-head);color:var(--azure)}
:root:not([data-look=r18]) .v-r10 .t10-acc > summary::-webkit-details-marker{display:none}
:root:not([data-look=r18]) .v-r10 .t10-acc > summary::after{content:"";width:.42em;height:.42em;border-right:1.5px solid var(--gold-d);border-bottom:1.5px solid var(--gold-d);transform:translateY(-25%) rotate(45deg);transition:transform .3s ease}
:root:not([data-look=r18]) .v-r10 .t10-acc[open] > summary::after{transform:translateY(15%) rotate(225deg)}
:root:not([data-look=r18]) .v-r10 .t10-st b{color:var(--azure)}
/* ---------- Запись одной строкой: из бумажной строки — плита яри (цвет в первой половине страницы, J-BASE п. 1) ---------- */
:root:not([data-look=r18]) #quick .zq{background:#2c5a4e!important;box-shadow:none!important;
--fg:#fbf8f1;--fg-soft:rgba(251,248,241,.82);--accent:#e9cf8e;--lang:#e9cf8e;--cta-bg:#fbf8f1;--cta-fg:#24262b;color:#fbf8f1;position:relative;overflow:hidden}
:root:not([data-look=r18]) #quick .zq :is(.zq-h,.zq-sub,.q-note){color:#fbf8f1}
:root:not([data-look=r18]) #quick .zq .zq-h em{color:#e9cf8e}
:root:not([data-look=r18]) #quick .zq a{color:#e9cf8e}
:root:not([data-look=r18]) #quick .zq .input{background:#fbf8f1;color:#24262b;border-color:transparent}
:root:not([data-look=r18]) #quick .zq .qform .btn.btn{background:#fbf8f1!important;color:#24262b!important;border-color:#fbf8f1!important}
:root:not([data-look=r18]) #quick .zq .qform .btn.btn:hover{background:#e9cf8e!important;border-color:#e9cf8e!important}
:root:not([data-look=r18]) #quick .zq .lf19-ton{position:absolute;z-index:0;pointer-events:none;background:#173a31!important;-webkit-mask:var(--mk) center/contain no-repeat;mask:var(--mk) center/contain no-repeat;opacity:.9}
:root:not([data-look=r18]) #quick .zq > *:not(.lf19-ton):not(.lf19-perch){position:relative;z-index:1}
/* ---------- IV Отзывы: ровно три окна, одинаковая высота и итог на одной линии, цветные карточки, плашка-бенто ---------- */
@media (min-width:1024px){ :root:not([data-look=r18]) .v-sheet17 .rv17-track{grid-auto-columns:calc((100% - 2 * var(--g)) / 3)} }
:root:not([data-look=r18]) .v-sheet17 .rv17-txt{flex:0 0 auto;height:calc(20 * 1.36 * 7 * var(--u));max-height:none}
:root:not([data-look=r18]) .v-sheet17 .rv17-foot{margin-top:auto}
:root:not([data-look=r18]) .v-sheet17 .rv17-card:is([data-tone="az"],[data-tone="vd"]){color:#fbf8f1;--fg:#fbf8f1;--fg-soft:rgba(251,248,241,.8);--hair:rgba(251,248,241,.2)}
:root:not([data-look=r18]) .v-sheet17 .rv17-card[data-tone="az"]{background:#29466f}
:root:not([data-look=r18]) .v-sheet17 .rv17-card[data-tone="vd"]{background:#2c5a4e}
:root:not([data-look=r18]) .v-sheet17 .rv17-card:is([data-tone="az"],[data-tone="vd"]) :is(.rv17-q,.rv17-who,.rv17-who b,.rv17-stat,.rv17-more){color:#fbf8f1}
:root:not([data-look=r18]) .v-sheet17 .rv17-card:is([data-tone="az"],[data-tone="vd"]) .rv17-stat{color:#e9cf8e}
:root:not([data-look=r18]) .v-sheet17 .rv17-card:is([data-tone="az"],[data-tone="vd"]) .rv17-cap{background:#fbf8f1;color:var(--ink)}
:root:not([data-look=r18]) .v-sheet17 .rv17-card:is([data-tone="az"],[data-tone="vd"]) .rv17-txt::-webkit-scrollbar-thumb{background:#e9cf8e}
:root:not([data-look=r18]) .v-sheet17 .rv17-card:is([data-tone="az"],[data-tone="vd"]) .rv17-txt.is-long:not(.at-end){-webkit-mask-image:linear-gradient(#000 calc(100% - 2.2em),transparent)}
.lf19-badge{display:none}
:root[data-look=l19] .lf19-badge{display:inline-flex;justify-self:start;width:max-content;max-width:100%;grid-column:1;align-items:baseline;gap:.5em;margin-top:calc(10 * var(--u));padding:calc(10 * var(--u)) calc(18 * var(--u));border-radius:calc(var(--r-s) * var(--u));
background:#29466f;color:#fbf8f1;font:500 max(15px, calc(17 * var(--u)))/1.3 var(--f-head)}
:root[data-look=l19] .lf19-badge b{font:500 calc(30 * var(--u))/1 var(--f-head);color:#e9cf8e}
/* ---------- V Как проходит обучение: панель — бумага (Роман 22.10: «синяя коробка тяжело»), «60–70 %» лазурью; шаги без второй рамки и без линеек ---------- */
:root:not([data-look=r18]) .v-talk18{--o-big:#29466f}
:root:not([data-look=r18]) .v-talk18 .ho-steps li:not(.ho-key){background:transparent;box-shadow:none}
/* ---------- VII Цены: кнопка в одну строку, лилии со свитком живут; «Учим на совесть» отделён воздухом и знаком ---------- */
:root:not([data-look=r18]) #prices .x10-trial .x10-btn{white-space:nowrap}
:root:not([data-look=r18]) #prices .x10-gobj img{transform-origin:30% 85%;animation:lf19-sway 6.5s ease-in-out infinite}
@keyframes lf19-sway{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg) translateY(-2px)}}
@media (prefers-reduced-motion:reduce){:root #prices .x10-gobj img{animation:none}}
:root:not([data-look=r18]) #prices .h18{margin-top:calc(150 * var(--u))!important;position:relative}
:root:not([data-look=r18]):not([data-look=leaf]) #prices .h18::before{content:"";position:absolute;left:50%;top:calc(-96 * var(--u));width:calc(52 * var(--u));aspect-ratio:1;margin-left:calc(-26 * var(--u));
background:url(/s0/leaf19/sign-cross.svg) center/contain no-repeat;animation:lf19-spin 21s linear infinite}
@media (max-width:1023.98px){:root:not([data-look=r18]) #prices .h18{margin-top:calc(110 * var(--u))!important}}
/* ---------- Ритм: тяжёлые подряд разведены воздухом (J-BASE п. 5) ---------- */
:root:not([data-look=r18]) :is(#channel,#contacts){margin-top:calc(130 * var(--u))}
:root:not([data-look=r18]):not([data-look=leaf]) #foot{margin-top:calc(150 * var(--u))!important;position:relative}
:root:not([data-look=r18]):not([data-look=leaf]) #foot::before{content:"";position:absolute;left:50%;top:calc(-100 * var(--u));width:calc(52 * var(--u));aspect-ratio:1;margin-left:calc(-26 * var(--u));
background:url(/s0/leaf19/sign-rose.svg) center/contain no-repeat;animation:lf19-spin 23s linear infinite reverse}
@media (max-width:1023.98px){:root:not([data-look=r18]) :is(#channel,#contacts){margin-top:calc(96 * var(--u))} :root:not([data-look=r18]):not([data-look=leaf]) #foot{margin-top:calc(110 * var(--u))!important}}
/* ---------- Фоновые рисунки слоя B3: крупно или никак (J-BASE: мелкое бледное = запрет REJECTED п. 24) ---------- */
@media (min-width:1024px){
:root:not([data-look=r18])[data-bgl] section#faq>.bg18--book{display:none}
:root:not([data-look=r18])[data-bgl] section#faq>.bg18--oak{width:min(calc(52vw * var(--vwk,1)),900px);right:-4%;top:-6%;--b18o:.13}
:root:not([data-look=r18])[data-bgl] .bg18--quill{display:none}
:root:not([data-look=r18])[data-bgl] .zm-plate>.bg18--bell{left:auto;right:2%;top:auto;bottom:3%;width:clamp(170px,calc(13vw * var(--vwk,1)),230px);--b18o:.22}
}
/* ---------- IX Между уроками: у канала — имя и кнопка, клуб «Подслушники» на плите яри ---------- */
.lf19-chbtn{display:none}
:root:not([data-look=r18]) .lf19-chbtn{display:inline-flex;margin-top:calc(14 * var(--u))}
:root[data-look=l19] .v-row18 .nw-club .ea-text{background:#2c5a4e;padding:calc(22 * var(--u)) calc(22 * var(--u)) calc(20 * var(--u));border-radius:calc(var(--r-s) * var(--u));color:#fbf8f1;--fg:#fbf8f1;--fg-soft:rgba(251,248,241,.84);--accent:#e9cf8e}
:root[data-look=l19] .v-row18 .nw-club .ea-text :is(h3,.nw-d,.nw-facts b,.nw-facts span){color:#fbf8f1}
:root[data-look=l19] .v-row18 .nw-club .ea-text :is(.nw-k){color:#e9cf8e}
:root[data-look=l19] .v-row18 .nw-club .ea-text a{color:#e9cf8e}
:root[data-look=l19] .v-row18 .nw-club .ea-text .btn{background:#fbf8f1;color:#24262b;border-color:#fbf8f1}
/* ---------- Шапка: звезда — насыщенное золото, вдвое меньше, вращается 18 с; ответный малый знак у «Узнать свой уровень» ---------- */
@media (min-width:1024px){ :root:not([data-look=r18]):not([data-look=glass])[data-bgl] .hero>.bg18--star{display:none} }
/* ---------- Телефон плотнее: цены (три карточки) — лента со свайпом, выглядывает следующая ---------- */
.lf19-sw{display:contents}
@media (max-width:1023.98px){
:root:not([data-look=r18]) .lf19-sw{display:grid;grid-auto-flow:column;grid-auto-columns:86%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
margin:0;padding:0 0 8px;align-items:start}
:root:not([data-look=r18]) .lf19-sw::-webkit-scrollbar{display:none}
:root:not([data-look=r18]) .lf19-sw > article{scroll-snap-align:start;border-radius:calc(8 * var(--u));min-width:0}
:root:not([data-look=r18]) .lf19-sw .x10-trial :is(.x10-t,.x10-k){padding-right:calc(86 * var(--u))}
:root:not([data-look=r18]) .lf19-swhint{display:block;text-align:center;font:italic 15px/1.3 var(--f-head);color:var(--fg-soft);margin-top:6px}
}
.lf19-swhint{display:none}
/* ---------- Тон-в-тон: крупные гравюры за текстом (приём Вирджинии m02/m05; Роман 26.10: «едва заметные, но заполняют пустоту») ---------- */
.lf19-bgt{display:none}
:root[data-look=l19]:not([data-look=glass]) .lf19-bgt{display:block;position:absolute;z-index:-1;pointer-events:none;background:var(--c,#24262b);-webkit-mask:var(--mk) center/contain no-repeat;mask:var(--mk) center/contain no-repeat;opacity:var(--o,.1)}
@media (max-width:1023.98px){:root:not([data-look=r18]) .lf19-bgt{opacity:calc(var(--o,.1) * .7)}}
:root:not([data-look=r18]) #quick .zq .qform .btn::before{background:transparent!important}
:root:not([data-look=r18]) #quick .zq .qform .btn:hover::before{background:rgba(233,207,142,.35)!important}
/* ---------- Живые маргиналии на кромках коробок (пульт «mg»): зверёк из рукописи сидит на краю плиты (предмет поверх шва, Вирджиния m08) ---------- */
.lf19-perch{display:none}
:root[data-mg="on"] .lf19-perch{display:block;position:absolute;z-index:4;width:var(--w,140px);pointer-events:auto;cursor:pointer;transform-origin:50% 100%}
.lf19-perch img{display:block;width:100%;height:auto;transform-origin:50% 100%;filter:drop-shadow(0 4px 5px rgba(36,38,43,.18))}
.lf19-perch:hover img{animation:lf19-hop .7s ease-in-out 1}
.lf19-perch.hop img{animation:lf19-hop .7s ease-in-out 1}
@keyframes lf19-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes lf19-sw2{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
@keyframes lf19-crawl{0%,100%{transform:translateX(0)}50%{transform:translateX(-36px)}}
@keyframes lf19-hop{0%,100%{transform:translateY(0) rotate(0)}40%{transform:translateY(-14px) rotate(-5deg)}70%{transform:translateY(-3px) rotate(2deg)}}
@media (max-width:1023.98px){:root:not([data-look=r18]) .lf19-perch{--w:84px!important}}
@media (prefers-reduced-motion:reduce){.lf19-perch img{animation:none!important}}
html[data-look="glass"] .lf19-perch{display:none!important}
/* телефон: форма записи сразу после текста, башня — после формы (J-BASE: форма слишком глубоко) */
@media (max-width:1023.98px){
:root:not([data-look=r18]) .v-tw18 .zz > .zz-form, :root:not([data-look=r18]) .v-tw18 .zz .zz-form{order:1}
:root:not([data-look=r18]) .v-tw18 .zt-scene{order:3}
}
/* ---------- III Доска: цитата под заголовком; у стены — земля и тень, фигуры стоят ---------- */
:root:not([data-look=r18]) #board .rubric .dr-lead{grid-column:1 / -1;margin:calc(6 * var(--u)) 0 0;font:italic 400 max(16px, calc(19 * var(--u)))/1.4 var(--f-head);color:var(--azure);max-width:36em}
:root:not([data-look=r18]) #board .d18-wall::after{content:"";position:absolute;left:-6%;right:-4%;bottom:calc(-26 * var(--u));height:calc(46 * var(--u));pointer-events:none;
background:radial-gradient(60% 60% at 50% 40%, rgba(36,38,43,.20), rgba(36,38,43,0) 70%)}
:root:not([data-look=r18]) #board .dr-fig::after{content:"";position:absolute;left:8%;right:12%;bottom:calc(-6 * var(--u));height:calc(22 * var(--u));pointer-events:none;background:radial-gradient(50% 50% at 50% 50%, rgba(36,38,43,.26), transparent 72%);z-index:-1}
html[data-look="glass"] #board .rubric .dr-lead{color:#8fb3e6}
@media (min-width:1024px){ :root:not([data-look=r18])[data-nst="gold"] #board .rubric .dr-lead{padding-left:calc(2.1 * var(--fs-h2) * var(--u));grid-column:1} }
/* ---------- X Контакты: голубь живёт (предмет, не фигура: покачивание ±2°, 6 с) ---------- */
:root:not([data-look=r18]) .s18-dove{transform-origin:40% 60%;animation:lf19-dove 6.5s ease-in-out infinite}
@keyframes lf19-dove{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(2deg) translateY(-6px)}}
@media (prefers-reduced-motion:reduce){:root .s18-dove{animation:none}}
/* телефон: посты канала — одна карточка и край следующей (24 px), «Скоро» (пилигрим, YouTube) — лентой */
@media (max-width:1023.98px){
:root:not([data-look=r18]) .v-row18 .pz-posts{grid-auto-columns:calc(100% - 34px)}
:root:not([data-look=r18]) .v-row18 .r17-stack{grid-auto-flow:column;grid-auto-columns:88%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;align-items:stretch}
:root:not([data-look=r18]) .v-row18 .r17-stack > *{scroll-snap-align:start;min-width:0}
}
/* ---------- Шапка (пульт «hp»): лазурная плита за ангелом — цвет на первом экране, ангел перекрывает край плиты (Вирджиния m01) ---------- */
.lf19-hplate{display:none}
@media (min-width:1024px){
:root:not([data-look=r18]):not([data-look=glass])[data-hp="on"] .v-angel18 .lf19-hplate{display:block;position:absolute;z-index:1;left:calc(706 * var(--u) + var(--x,0px) * .85 - 70 * var(--u));top:calc(96 * var(--u));
width:calc(660 * var(--u));height:calc(560 * var(--u));border-radius:calc(var(--r) * var(--u));background:#29466f;overflow:hidden;
box-shadow:inset 0 0 0 calc(3 * var(--u)) #c9a84c,inset 0 0 0 calc(5 * var(--u)) #29466f,inset 0 0 0 calc(6 * var(--u)) rgba(233,207,142,.6),0 calc(24 * var(--u)) calc(60 * var(--u)) calc(-24 * var(--u)) rgba(20,32,55,.45)}
.v-angel18 .lf19-hplate i{position:absolute;inset:-6%;background:#3a5a88;-webkit-mask:url(/s0/leaf19/mk-callig-1200.webp) 60% 40%/120% auto no-repeat;mask:url(/s0/leaf19/mk-callig-1200.webp) 60% 40%/120% auto no-repeat;opacity:.55}
.v-angel18 .lf19-hplate b{position:absolute;right:calc(34 * var(--u));top:calc(30 * var(--u));width:calc(96 * var(--u));aspect-ratio:1;background:url(/s0/leaf19/sign-star.svg) center/contain no-repeat;animation:lf19-spin 18s linear infinite}
:root:not([data-look=r18]):not([data-hp="off"]) .v-angel18 .lf19-hplate ~ .lf19-sign{display:none}
}
/* ---------- «Подслушники»: один послушник слушает, в руке Райша (художник G; жюри 17: пара объёмная и кремовая) ---------- */
:root:not([data-look=r18]):not([data-look=glass]) .v-row18 .nw-monks img{content:url(/s0/leaf19/novice-520.webp);object-fit:contain}
:root[data-look=l19] .v-row18 .nw-club .ea-text h3{font-size:calc(32 * var(--u));overflow-wrap:anywhere}
:root:not([data-look=r18]) .v-row18 .nw-club .ea-text .nw-facts{flex-wrap:wrap;row-gap:calc(8 * var(--u))}
/* ---------- VI Тесты: лестница на книгах — в руке Райша (художник G; J-BASE: глянцевая генерация выпадала из гравюры) ---------- */
:root:not([data-look=r18]):not([data-look=glass]) .v-duo18 .d7-lv .d7-books, :root:not([data-look=r18]):not([data-look=glass]) .v-duo18 .d7-lv .d7-stud, :root:not([data-look=r18]):not([data-look=glass]) .v-duo18 .d7-lv .d7-psh{visibility:hidden}
:root:not([data-look=r18]):not([data-look=glass]) .v-duo18 .d7-lv .d7-climb{background:url(/s0/leaf19/climber-900.webp) 50% 100%/auto 96% no-repeat}
/* Вопросы: подчёркивание открытого вопроса — лазурью (киноварь только на букве, закон 26.10) */
:root:not([data-look=r18]) .v-owl18 [aria-expanded="true"]{text-decoration-color:#29466f!important;border-bottom-color:#29466f!important}
/* «Подслушники»: фон Босха заметнее (A2: «почти не виден») */
:root:not([data-look=r18]):not([data-look=glass]) .v-row18 .r18-wood{opacity:.62}
/* телефон: листки доски — две строки лентой со свайпом (A2 п. 18); меньше пустой бумаги под ангелом (A2 п. 17) */
@media (max-width:1023.98px){
:root:not([data-look=r18]) #board.v-door18 .lf-notes{display:grid!important;grid-template-rows:auto auto;grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:46%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:8px}
:root:not([data-look=r18]) #board.v-door18 .lf-notes > li{scroll-snap-align:start}
}
/* ---------- Шкала пустот (рецензент «после», японская вёрстка): лёгкие разделы — 96, тяжёлые плиты — 150–160, со знаком ✛ — как было (≈200) ---------- */
:root:not([data-look=r18]) :is([data-sec="teachers"],[data-sec="quick"],[data-sec="board"],[data-sec="reviews"],[data-sec="faq"]):not([hidden]) > .sec{margin-top:calc(96 * var(--u))}
:root:not([data-look=r18]) [data-sec="how"]:not([hidden]) > .sec{margin-top:calc(150 * var(--u))}
:root:not([data-look=r18]) :is(#channel,#contacts){margin-top:calc(156 * var(--u))}
@media (max-width:1023.98px){
:root:not([data-look=r18]) :is([data-sec="teachers"],[data-sec="quick"],[data-sec="board"],[data-sec="reviews"],[data-sec="faq"]):not([hidden]) > .sec{margin-top:calc(56 * var(--u))}
:root:not([data-look=r18]) [data-sec="how"]:not([hidden]) > .sec, :root:not([data-look=r18]) :is(#channel,#contacts){margin-top:calc(96 * var(--u))}
}
/* s0/leaf22.css */
/* прогон 22 · слой поверх leaf20 (голос Романа 27.10 ночь) */
/* осень: старые ветки внутри коробок сняты — новые лежат верхним слоем страницы (leaf22.js) */
.lf21-aut{display:none!important}
#lf22-aut{position:absolute;left:0;top:0;width:0;height:0;z-index:40;pointer-events:none}
#lf22-aut .lf22-sprig{position:absolute;max-width:none;pointer-events:none;filter:drop-shadow(0 calc(6 * var(--u)) calc(8 * var(--u)) rgba(15,18,16,.28))}
:root:not([data-look=leaf]) #lf22-aut{display:none}
/* углы (Роман 27.10 ночь): у всех плит и карточек одно скругление — плита 10u, карточка 6u */
:root[data-look=leaf] #quick .zq,
:root[data-look=leaf] #faq .fm-page,
:root[data-look=leaf] #tests .d7-climb{border-radius:calc(10 * var(--u))}
:root[data-look=leaf] #prices .x10-after,
:root[data-look=leaf] #teachers .t10-cap,
:root[data-look=leaf] #channel .ea-text,
:root[data-look=leaf] #faq .fq-a{border-radius:calc(6 * var(--u))!important}
/* «Учим на совесть» (Роман 27.10 ночь): раскраска фона гуще влево; окошко игры — полупрозрачное (пульт hg) */
:root[data-look=leaf]:not([data-hg=r21]) .v-hon18 .lf21-hbg::after{background:linear-gradient(90deg,rgba(251,248,241,.80) 0,rgba(251,248,241,.58) 38%,rgba(251,248,241,.08) 66%,rgba(251,248,241,0) 100%)}
@media (max-width:1023.98px){ :root[data-look=leaf]:not([data-hg=r21]) .v-hon18 .lf21-hbg::after{background:linear-gradient(180deg,rgba(251,248,241,.84) 0,rgba(251,248,241,.66) 55%,rgba(251,248,241,.15) 82%,rgba(251,248,241,0) 100%)} }
:root[data-look=leaf][data-hg=glass] .v-hon18 .h18-err{background:rgba(255,253,248,.62)!important;-webkit-backdrop-filter:blur(6px) saturate(1.1);backdrop-filter:blur(6px) saturate(1.1);box-shadow:0 0 0 1px rgba(255,253,248,.7),0 calc(10 * var(--u)) calc(26 * var(--u)) rgba(36,38,43,.12)!important}
/* YouTube (Роман 27.10 ночь: «пусто, не по теме, буквы на белом»): кадр видео 16:9 — Брекеленкам «Беседа» (Мет 435772, PD), кнопка ▶ и двуязычные субтитры (идея дизайнера B1) */
:root[data-look=leaf] .v-row18 .r17-yt::after{display:none}
:root[data-look=leaf] .v-row18 .r17-yt{display:grid;grid-template-columns:1fr 1.05fr;gap:calc(22 * var(--u));align-items:center}
:root[data-look=leaf] .v-row18 .r17-yt .r17-txt{max-width:none}
.lf22-yt{display:none}
:root[data-look=leaf] .lf22-yt{display:block;position:relative;aspect-ratio:16/9;border-radius:calc(6 * var(--u));overflow:hidden;background:#24262b;box-shadow:0 calc(10 * var(--u)) calc(24 * var(--u)) rgba(36,38,43,.22)}
.lf22-yt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lf22-yt .pl{position:absolute;left:50%;top:44%;width:calc(56 * var(--u));height:calc(56 * var(--u));margin:calc(-28 * var(--u)) 0 0 calc(-28 * var(--u));border-radius:50%;background:rgba(251,248,241,.92);box-shadow:0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(0,0,0,.35)}
.lf22-yt .pl::after{content:"";position:absolute;left:39%;top:30%;border-style:solid;border-width:calc(11 * var(--u)) 0 calc(11 * var(--u)) calc(17 * var(--u));border-color:transparent transparent transparent #29466f}
.lf22-yt .sub{position:absolute;left:0;right:0;bottom:calc(14 * var(--u));text-align:center;font:italic calc(14 * var(--u))/1.35 var(--f-text,Vollkorn,Georgia,serif);color:#fbf8f1;text-shadow:0 1px 3px rgba(0,0,0,.9)}
.lf22-yt .sub b{display:block;font-weight:400;font-style:normal;color:#e9cf8e}
.lf22-yt .bar{position:absolute;left:calc(12 * var(--u));right:calc(12 * var(--u));bottom:calc(6 * var(--u));height:2px;background:rgba(251,248,241,.35)}
.lf22-yt .bar::before{content:"";position:absolute;left:0;top:0;bottom:0;width:34%;background:#c9a84c}
@media (max-width:1023.98px){ :root[data-look=leaf] .v-row18 .r17-yt{grid-template-columns:1fr} :root[data-look=leaf] .lf22-yt{order:-1} .lf22-yt .pl{width:44px;height:44px;margin:-22px 0 0 -22px} .lf22-yt .pl::after{border-width:9px 0 9px 14px} .lf22-yt .sub{font-size:13px;bottom:10px} }
/* «Между уроками» · два этажа (прогон 22, сходный вывод трёх дизайнеров): клуб 7/12 + YouTube 5/12; пилигрим — панорама на всю ширину.
Пилигрим больше не стоит против «Подслушников» в том же размере. */
:root[data-look=leaf] .v-two22 .nw-row{display:grid!important;grid-template-columns:7fr 5fr;gap:calc(24 * var(--u));align-items:stretch}
:root[data-look=leaf] .v-two22 .nw-soonrow{display:contents!important}
:root[data-look=leaf] .v-two22 .nw-club{grid-column:1;grid-row:1}
:root[data-look=leaf] .v-two22 .r17-yt{grid-column:2;grid-row:1;display:flex!important;flex-direction:column;justify-content:center;align-items:stretch!important;gap:calc(22 * var(--u));padding:calc(26 * var(--u))!important}
:root[data-look=leaf] .v-two22 .lf22-yt{width:100%;margin:0}
:root[data-look=leaf] .v-row18 .r17-yt::after{display:none!important}
:root[data-look=leaf] .v-two22 .r17-yt .lf22-yt{order:-1}
:root[data-look=leaf] .v-two22 .r17-pil{grid-column:1 / -1;grid-row:2;position:relative;min-height:calc(470 * var(--u))!important;height:calc(470 * var(--u));overflow:hidden;padding:0!important;display:block!important}
:root[data-look=leaf] .v-two22 .r17-pil .r17-land{position:absolute!important;inset:0!important;width:auto!important;height:auto!important;display:block}
:root[data-look=leaf] .v-two22 .r17-pil{background:#fdf3dd!important}
:root[data-look=leaf] .v-two22 .r17-pil::before,:root[data-look=leaf] .v-two22 .r17-pil::after,:root[data-look=leaf] .v-two22 .r17-land::before,:root[data-look=leaf] .v-two22 .r17-land::after{display:none!important}
:root[data-look=leaf] .v-two22 .r17-land img{content:url(/s0/img22/pilg22-1600.webp)!important;position:absolute;left:0;top:0;bottom:0;height:100%!important;width:auto!important;aspect-ratio:3/2;max-width:none;object-fit:cover!important;
-webkit-mask-image:linear-gradient(90deg,#000 78%,transparent 100%)!important;mask-image:linear-gradient(90deg,#000 78%,transparent 100%)!important}
:root[data-look=leaf] .v-two22 .r17-pil .r17-txt{position:absolute!important;right:calc(90 * var(--u));top:50%;transform:translateY(-50%);width:calc(380 * var(--u));max-width:none!important;padding:0;background:none;z-index:2}
:root[data-look=leaf] .v-two22 .r17-pil h3{font-size:calc(40 * var(--u))}
/* клуб слоями: луг · дуб · послушник за стволом · двое учеников; при наведении слои расходятся на разную глубину */
:root[data-look=leaf] .v-two22 .nw-club .paint{background:none!important;aspect-ratio:16/10;overflow:hidden}
.lf22-sl{display:none}
:root[data-look=leaf] .v-two22 .lf22-sl{display:block;position:absolute;inset:0;overflow:hidden}
.lf22-sl img{position:absolute!important;max-width:none!important;min-width:0!important;transition:transform .5s cubic-bezier(.2,.7,.2,1);will-change:transform;opacity:1!important;filter:none;margin:0!important}
.lf22-sl .l-bg{left:-3%!important;top:-3%!important;width:106%!important;height:106%!important;object-fit:cover!important;object-position:50% 60%}
.lf22-sl .l-oak{right:7%!important;left:auto!important;top:auto!important;bottom:1%!important;height:95%!important;width:auto!important}
.lf22-sl .l-nov{right:4.5%!important;left:auto!important;top:auto!important;bottom:3%!important;height:56%!important;width:auto!important;filter:drop-shadow(0 4px 6px rgba(20,24,16,.25))}
.lf22-sl .l-pair{left:7%!important;right:auto!important;top:auto!important;bottom:2%!important;height:66%!important;width:auto!important;filter:drop-shadow(0 6px 8px rgba(20,24,16,.28))}
.lf22-sl .l-sh{position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(transparent,rgba(30,40,20,.12))}
@media (prefers-reduced-motion:reduce){ .lf22-sl img{transition:none} }
@media (max-width:1023.98px){
:root[data-look=leaf] .v-two22 .nw-row{grid-template-columns:1fr}
:root[data-look=leaf] .v-two22 .r17-yt{grid-column:1;grid-row:auto}
:root[data-look=leaf] .v-two22 .nw-club{grid-row:auto}
:root[data-look=leaf] .v-two22 .r17-pil{grid-column:1;grid-row:auto;min-height:0!important;height:auto;display:flex!important;flex-direction:column}
:root[data-look=leaf] .v-two22 .r17-pil .r17-land{position:relative!important;inset:auto!important;aspect-ratio:3/2;display:block!important;width:100%!important}
:root[data-look=leaf] .v-two22 .r17-land img{width:100%!important;height:100%!important;-webkit-mask-image:none!important;mask-image:none!important}
:root[data-look=leaf] .v-two22 .r17-pil .r17-txt{position:relative!important;right:auto;top:auto;transform:none;width:auto;box-shadow:none;border-radius:0;background:#fbf8f1}
}
/* отзывы-коробка: за монахиней лёгкая аркада (художник G n22-nun-bg) — пол аркады = нижний край коробки, чтобы монахиня стояла в пространстве */
.lf22-nunbg{display:none}
:root[data-look=leaf] .v-sheet21 .lf22-nunbg{display:block;position:absolute;left:0;bottom:0;top:0;width:44%;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:0;
background:url(/s0/img22/nunbg-1400.webp) 30% 100%/auto 100% no-repeat;opacity:.5;
-webkit-mask-image:linear-gradient(90deg,#000 0,#000 45%,transparent 100%),linear-gradient(0deg,#000 70%,transparent 100%);-webkit-mask-composite:source-in;
mask-image:linear-gradient(90deg,#000 0,#000 45%,transparent 100%),linear-gradient(0deg,#000 70%,transparent 100%);mask-composite:intersect}
:root[data-look=leaf] .v-sheet21 .rv17-fig,:root[data-look=leaf] .v-sheet21 .rv17-main{position:relative;z-index:1}
@media (max-width:1023.98px){ :root[data-look=leaf] .v-sheet21 .lf22-nunbg{width:100%;opacity:.4} }
/* «Тесты» · пол из голландских изразцов под типами (вариант tiles22) */
:root[data-look=leaf] .v-tiles22 .lf22-tiles{display:block;position:absolute;left:0;right:0;bottom:0;height:24%;z-index:0;pointer-events:none;
background:url(/s0/img22/tiles-1300.webp) 50% 100%/cover no-repeat;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%);mask-image:linear-gradient(180deg,transparent 0,#000 12%);opacity:1;filter:saturate(1.15) contrast(1.05);border-radius:0 0 calc(10 * var(--u)) calc(10 * var(--u))}
:root[data-look=leaf] .v-tiles22 .d7-ty .d7-figs{z-index:1}
:root[data-look=leaf] .v-tiles22 .d7-ty .d7-lab{background:rgba(251,248,241,.92);border-radius:calc(4 * var(--u));padding:calc(2 * var(--u)) calc(8 * var(--u));box-shadow:0 1px 3px rgba(36,38,43,.15)}
/* полоса «одной строки» · вариант pen22: светлый лист (разгрузка после тяжёлых «Направлений»), серебряное перо на краю */
:root:not([data-look=r18]) #quick.v-pen22 .zq{background:#fffdf8!important;background-image:none!important;color:#24262b!important;border-radius:calc(10 * var(--u))!important;overflow:visible!important;
box-shadow:0 0 0 1px rgba(36,38,43,.08),0 calc(10 * var(--u)) calc(28 * var(--u)) rgba(36,38,43,.07)!important;position:relative}
:root:not([data-look=r18]) #quick.v-pen22 .zq::before,:root:not([data-look=r18]) #quick.v-pen22 .zq::after,:root:not([data-look=r18]) #quick.v-pen22 .lf19-ton,:root:not([data-look=r18]) #quick.v-pen22 .zq .tint,:root:not([data-look=r18]) #quick.v-pen22 .zq > figure,:root:not([data-look=r18]) #quick.v-pen22 .zq .zq-obj{display:none!important}
:root:not([data-look=r18]) #quick.v-pen22 .zq *{--fg:#24262b}
:root:not([data-look=r18]) #quick.v-pen22 .zq-h,:root:not([data-look=r18]) #quick.v-pen22 .zq-sub,:root:not([data-look=r18]) #quick.v-pen22 .q-note,:root:not([data-look=r18]) #quick.v-pen22 .q-bot{color:#24262b!important}
:root:not([data-look=r18]) #quick.v-pen22 .zq-h em{color:#29466f!important}
:root:not([data-look=r18]) #quick.v-pen22 .q-note,:root:not([data-look=r18]) #quick.v-pen22 .q-bot{color:#5b5a55!important}
:root:not([data-look=r18]) #quick.v-pen22 .q-note a,:root:not([data-look=r18]) #quick.v-pen22 .q-bot a{color:#29466f!important}
:root:not([data-look=r18]) #quick.v-pen22 .zq .input{background:#fff!important;color:#24262b!important;border:0!important;border-bottom:1.5px solid #24262b!important;border-radius:0!important}
:root:not([data-look=r18]) #quick.v-pen22 .zq .qform .btn.btn{background:#29466f!important;color:#fbf8f1!important;border-color:#29466f!important}
:root:not([data-look=r18]) #quick.v-pen22 .pen22{position:absolute;left:calc(560 * var(--u));top:calc(-58 * var(--u));width:calc(190 * var(--u));height:auto;rotate:-14deg;z-index:3;pointer-events:none;filter:drop-shadow(0 calc(8 * var(--u)) calc(10 * var(--u)) rgba(36,38,43,.28))}
@media (max-width:1023.98px){ :root:not([data-look=r18]) #quick.v-pen22 .pen22{display:none} }
.v-clean22.v-clean22{padding-bottom:calc(40 * var(--u))!important;padding-top:calc(40 * var(--u))!important}
/* «С чего начать» на телефоне (Роман: в вертикали коробки портятся): Грамматика крупнее и стоит на раме доски, ножки доски короче */
@media (max-width:1023.98px){
:root[data-look=leaf] .v-door18c .dr-fig{width:calc(160 * var(--u))!important;height:calc(160 * var(--u))!important;margin-bottom:calc(-4 * var(--u))}
:root[data-look=leaf] .v-door18c .lf-notes{padding-bottom:calc(64 * var(--u))!important}
}
/* фон сайта · пергамент (Роман 27.10: новые форматы фона — пробовать) */
html[data-pg="vellum"] body{background:#fbf8f1 url(/s0/img22/vellum-tile.webp) 0 0/1400px auto repeat}
/* шапка коробкой (пункт пульта hb) */
:root[data-look=leaf][data-hb=parch] #hero,:root[data-look=leaf][data-hb=azure] #hero{border-radius:calc(10 * var(--u));overflow:visible;position:relative;isolation:isolate}
:root[data-look=leaf][data-hb=parch] #hero::before,:root[data-look=leaf][data-hb=azure] #hero::before{content:"";position:absolute;inset:calc(40 * var(--u)) 0 calc(20 * var(--u));border-radius:calc(10 * var(--u));z-index:-1;pointer-events:none}
:root[data-look=leaf][data-hb=parch] #hero::before{background:#f3ead6 url(/s0/img22/vellum-tile.webp) 0 0/1400px auto;box-shadow:inset 0 0 0 1px rgba(36,38,43,.07),0 calc(14 * var(--u)) calc(34 * var(--u)) rgba(36,38,43,.08)}
:root[data-look=leaf][data-hb=azure] #hero::before{background:linear-gradient(rgba(41,70,111,.94),rgba(41,70,111,.94)),url(/s0/img22/vellum-tile.webp) 0 0/1400px auto;box-shadow:0 calc(14 * var(--u)) calc(34 * var(--u)) rgba(20,30,50,.18)}
:root[data-look=leaf][data-hb=azure] #hero .copy,:root[data-look=leaf][data-hb=azure] #hero .copy *{color:#fbf8f1!important}
:root[data-look=leaf][data-hb=azure] #hero .copy em,:root[data-look=leaf][data-hb=azure] #hero .copy .l3,:root[data-look=leaf][data-hb=azure] #hero .copy .cap{color:#e9cf8e!important}
:root[data-look=leaf][data-hb=azure] #hero .hero-cta{border-color:#fbf8f1!important;color:#fbf8f1!important;background:transparent!important}
:root[data-look=leaf][data-hb=azure] #hero .veil{opacity:0!important}
:root[data-look=leaf][data-hb=azure] #hero .tint-color{opacity:1!important;visibility:visible!important}
:root[data-look=leaf][data-hb=parch] #hero .copy,:root[data-look=leaf][data-hb=azure] #hero .copy{padding-left:calc(30 * var(--u))}
@media (max-width:1023.98px){ :root[data-look=leaf][data-hb=parch] #hero::before,:root[data-look=leaf][data-hb=azure] #hero::before{inset:calc(10 * var(--u)) calc(-6 * var(--u)) 0} :root[data-look=leaf][data-hb=parch] #hero .copy,:root[data-look=leaf][data-hb=azure] #hero .copy{padding-left:calc(10 * var(--u))} }
/* ритм: разгрузки (пункт пульта air) */
:root[data-look=leaf][data-air=on] #prices{margin-top:calc(70 * var(--u))!important}
:root[data-look=leaf][data-air=on] .v-hon18 .h18{margin-top:calc(110 * var(--u))!important;position:relative}
:root[data-look=leaf][data-air=on] #prices::before,:root[data-look=leaf][data-air=on] .v-hon18 .h18::before{content:"✛";position:absolute;left:50%;transform:translateX(-50%);color:#c9a84c;font:calc(22 * var(--u))/1 serif;pointer-events:none}
:root[data-look=leaf][data-air=on] #prices{position:relative} :root[data-look=leaf][data-air=on] #prices::before{top:calc(-56 * var(--u))}
:root[data-look=leaf][data-air=on] .v-hon18 .h18::before{top:calc(-66 * var(--u))}
/* «Вопросы» · точечно (вариант owl22): одна главная кнопка + две тихие ссылки; буквицы одного кегля */
.v-owl22 .fq-next{display:flex!important;flex-wrap:wrap;align-items:center;gap:calc(14 * var(--u)) calc(28 * var(--u))!important;background:none!important}
.v-owl22 .fq-next a{background:none!important;box-shadow:none!important;border:0!important;padding:0!important;min-height:44px;display:inline-flex!important;align-items:center;gap:calc(8 * var(--u));flex:none!important;width:auto!important}
.v-owl22 .fq-next a span{font-size:calc(14 * var(--u));color:#6b675e;font-style:italic}
.v-owl22 .fq-next a b{font-weight:500;color:#29466f;text-decoration:underline;text-underline-offset:.2em;text-decoration-color:rgba(41,70,111,.35)}
.v-owl22 .fq-next a:first-child{background:#24262b!important;border-radius:calc(6 * var(--u))!important;padding:calc(12 * var(--u)) calc(22 * var(--u))!important}
.v-owl22 .fq-next a:first-child span{display:none}
.v-owl22 .fq-next a:first-child b{color:#fbf8f1;text-decoration:none}
.v-owl22 .ini{font-size:1.32em!important;line-height:1!important}
/* светлые коробки · «листы-коллаж» (пункт пульта pf) */
:root[data-look=leaf][data-pf=paper] :is(#faq .fm-page,#prices .x10-after,#tests .d7-box,#channel .nw-club,#channel .r17-yt,#channel .pz-box,#quick.v-pen22 .zq,.v-sheet21 .rv17){
background-image:url(/s0/img22/vellum-tile.webp)!important;background-size:1400px auto!important;background-color:#fdfaf3!important;
box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 calc(2 * var(--u)) calc(3 * var(--u)) rgba(36,38,43,.10),0 calc(18 * var(--u)) calc(36 * var(--u)) calc(-10 * var(--u)) rgba(36,38,43,.22)!important}
:root[data-look=leaf][data-pf=paper] #reviews .rv17-card:nth-child(odd),:root[data-look=leaf][data-pf=paper] #prices .x10-opt:nth-child(odd){rotate:-.6deg}
:root[data-look=leaf][data-pf=paper] #reviews .rv17-card:nth-child(even),:root[data-look=leaf][data-pf=paper] #prices .x10-opt:nth-child(even){rotate:.5deg}
:root[data-look=leaf][data-pf=paper] #channel .ea-text,:root[data-look=leaf][data-pf=paper] #channel .r17-yt .r17-txt{background:transparent!important}
/* телефон: цели касания ≥ 44 px (кнопки карточек направлений, адреса и документы в подвале) */
@media (max-width:1023.98px){
:root[data-look=leaf] #courses .d16-cd .btn{min-height:44px;display:inline-flex!important;align-items:center}
.v-line22 .ft-list a,.v-line22 .ft-small nav a{display:inline-flex;align-items:center;min-height:44px}
.v-line22 .ft-list{row-gap:0!important}
}
/* по рецензенту R (28.10 00:40) */
/* пустоты: под героем и перед контактами */
:root[data-look=leaf] #courses{margin-top:calc(-60 * var(--u))!important}
:root[data-look=leaf] #contacts.v-line22{padding-top:0!important;margin-top:calc(-50 * var(--u))!important}
@media (max-width:1023.98px){ :root[data-look=leaf] #courses{margin-top:0!important} :root[data-look=leaf] #contacts.v-line22{margin-top:0!important} }
/* «Вопросы» owl22: главная кнопка лазурью, как все; на телефоне сова не наезжает на кнопки */
.v-owl22 .fq-next a:first-child{background:#29466f!important}
@media (max-width:1023.98px){ .v-owl22 .ow17{display:none!important} }
/* разгрузка: «Цены» → «Учим на совесть» воздух всегда (не только по пункту air) */
:root[data-look=leaf] .v-hon18 .h18{margin-top:calc(96 * var(--u))!important}
/* IX: пилигрим — полоса прямо на листе, без коробки */
:root[data-look=leaf] .v-two22 .r17-pil{background:transparent!important;box-shadow:none!important;border:0!important;border-radius:0!important}
:root[data-look=leaf] .v-two22 .r17-land img{-webkit-mask-image:linear-gradient(90deg,#000 70%,transparent 100%),linear-gradient(0deg,transparent 0,#000 14%,#000 86%,transparent 100%)!important;-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,#000 70%,transparent 100%),linear-gradient(0deg,transparent 0,#000 14%,#000 86%,transparent 100%)!important;mask-composite:intersect}
/* направления: заголовки на одной линии — описание резервирует две строки */
@media (min-width:1024px){ :root[data-look=leaf] .v-luyc21 .d16-cd p{min-height:2.7em} }
/* телефон: цены — текст «Пробного» не жмётся; отзывы — стрелки не на монахине */
@media (max-width:1023.98px){
.v-p22 .x10-trial{padding-right:calc(18 * var(--u))!important}
.v-p22 .x10-trial :is(.x10-t,.x10-s,.x10-free){max-width:none!important;width:auto!important}
:root[data-look=leaf] .v-sheet21 .rv17-nav{position:relative;z-index:2;justify-content:flex-end}
}
/* направления · светлые карточки (вариант luyc22l): картина сверху, текст на кости */
:root .v-luyc22l .d18-cd{min-height:0!important;justify-content:flex-start;background:#fffdf8!important;box-shadow:0 0 0 1px rgba(36,38,43,.08),0 calc(8 * var(--u)) calc(20 * var(--u)) rgba(36,38,43,.07)!important;border-radius:calc(6 * var(--u))!important}
:root[data-look] .v-luyc22l .d18-plate{position:relative!important;inset:auto;height:auto!important;aspect-ratio:4/3!important;z-index:0}
:root .v-luyc22l .d18-panel{background:none!important;padding:calc(16 * var(--u)) calc(20 * var(--u)) calc(18 * var(--u))!important}
:root .v-luyc22l .d18-panel :is(h3,p){color:#24262b!important;text-shadow:none!important}
:root .v-luyc22l .d18-panel p.d16-ln{color:#4a4a48!important}
:root .v-luyc22l .d18-panel a{color:#29466f!important}
/* s0/leaf23.css */
/* прогон 23 · слой поверх leaf22 (голос Романа 28.10 вечер) */
/* шапка прячется при прокрутке вниз (leaf23.js) */
header.bar{transition:transform .28s ease}
header.bar.lf23-hide{transform:translateY(-110%)}
@media (prefers-reduced-motion:reduce){ header.bar{transition:none} }
/* «Вопросы» (owl22): главная кнопка лёгкая, контуром — как остальные кнопки сайта (Роман 28.10) */
.v-owl22 .fq-next a:first-child{background:transparent!important;border:1px solid #29466f!important;border-radius:calc(6 * var(--u))!important}
.v-owl22 .fq-next a:first-child b{color:#29466f!important}
.v-owl22 .fq-next a:first-child:hover{background:rgba(41,70,111,.08)!important}
/* «Тесты» · одно небо на обе коробки (вариант sky23): небо — одна картинка, левая коробка показывает её левую половину, правая — правую; город справа убран */
:root[data-look=leaf] .v-sky23 .d7-row{--g23:calc(18 * var(--u))}
:root[data-look=leaf] .v-sky23 .d7-ty .d7-sq{display:none!important}
:root[data-look=leaf] .v-sky23 .d7-sky,:root[data-look=leaf] .v-sky23 .d7-sky--sq{height:100%!important;-webkit-mask-image:none!important;mask-image:none!important}
:root[data-look=leaf] .v-sky23 .d7-sky img{animation:none!important;width:calc(200% + var(--g23))!important;height:100%!important;object-fit:cover!important;object-position:50% 30%!important}
:root[data-look=leaf] .v-sky23 .d7-lv .d7-sky img{left:0!important}
:root[data-look=leaf] .v-sky23 .d7-ty .d7-sky img{left:calc(-100% - var(--g23))!important}
:root[data-look=leaf] .v-sky23 .d7-sky img{content:url(/s0/img23/sky-ruisdael-2400.webp)}
:root[data-look=leaf] .v-sky23 .d7-lv .d7-climb{background-blend-mode:normal}
/* общая земля: изразцы справа поднимаются до уровня книг слева */
:root[data-look=leaf] .v-sky23 .lf22-tiles{height:20%!important}
@media (max-width:1023.98px){ :root[data-look=leaf] .v-sky23 .d7-sky img{width:100%!important;left:0!important} }
/* «Учим на совесть» (Роман 28.10): фон 4 зеркально — дорога оказывается под бегущим юношей, река уходит влево, под текст */
:root[data-look=leaf] .v-hon18 .lf21-hbg img[data-sc="3"]{transform:scaleX(-1);object-position:40% 60%}
/* подвалы дизайнеров: эмблема — наш файл; рубрика скрыта (как в line22) */
.v-ft23 .rubric{display:none}
.v-ft23 .emb23{width:100%;height:100%;object-fit:contain;display:block}
.v-ft23 :is(.ft-emb,.emb){border:0!important;background:transparent!important;overflow:hidden}
.v-ft23 footer{border-radius:0!important}
#contacts.v-ft23{padding-top:0!important;margin-top:calc(-50 * var(--u))!important}
@media (max-width:1023.98px){ #contacts.v-ft23{margin-top:0!important} }
#contacts.v-ft23{min-height:0!important;display:block!important}
/* подвалы дизайнера 3: своя обёртка .wrap (из их базы) */
:is(.v-ft23b3a,.v-ft23b3b) footer .wrap{width:calc(1280 * var(--u))!important;max-width:none!important;margin-inline:auto!important;padding-left:0!important;padding-right:0!important}
@media (max-width:1023.98px){ :is(.v-ft23b3a,.v-ft23b3b) footer .wrap{width:auto!important;margin-inline:16px!important} }
:is(.v-ct23b3) footer .wrap{width:calc(1280 * var(--u))!important;max-width:none!important;margin-inline:auto!important;padding-left:0!important;padding-right:0!important}
@media (max-width:1023.98px){ .v-ct23b3 footer .wrap{width:auto!important;margin-inline:16px!important} }
.v-ft23 :is(.b2emb){border:0!important;background:transparent!important;overflow:hidden}
.v-ft23 .rubric + footer h2{display:block}
/* цвет плиты подвала (пункт пульта fc): как у дизайнера / светлая лазурь / ярь / кость */
:root[data-fc=az] #contacts.v-ft23 footer,:root[data-fc=az] #contacts.v-line22 footer{background:#dbe4f0!important;background-image:none!important}
:root[data-fc=verd] #contacts.v-ft23 footer,:root[data-fc=verd] #contacts.v-line22 footer{background:#d9e6df!important;background-image:none!important}
:root[data-fc=bone] #contacts.v-ft23 footer,:root[data-fc=bone] #contacts.v-line22 footer{background:#f3ecdc!important;background-image:none!important}
:root:is([data-fc=az],[data-fc=verd],[data-fc=bone]) #contacts footer::before{display:none!important}
:root:is([data-fc=az],[data-fc=verd],[data-fc=bone]) #contacts footer,:root:is([data-fc=az],[data-fc=verd],[data-fc=bone]) #contacts footer :is(h2,b,i,span,p,small,a){color:#24262b!important}
/* эмблема (пункт пульта emb): золото / тушью, как в шапке / лазурью */
:root[data-emb=ink] #contacts .emb23,:root[data-emb=ink] #contacts .ft-emb img{filter:grayscale(1) brightness(.35) contrast(1.4)}
:root[data-emb=az] #contacts .emb23,:root[data-emb=az] #contacts .ft-emb img{filter:grayscale(1) brightness(.55) sepia(1) hue-rotate(185deg) saturate(2.2)}
/* значки при наведении — в родных цветах приложений (пункт пульта ic) */
:root[data-ic=brand] #contacts a[href*="t.me"]:hover,:root[data-ic=brand] #contacts a[href*="t.me"]:focus-visible{background:#229ED9!important;color:#fff!important;box-shadow:none!important}
:root[data-ic=brand] #contacts a[href*="instagram"]:hover,:root[data-ic=brand] #contacts a[href*="instagram"]:focus-visible{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285AEB 90%)!important;color:#fff!important;box-shadow:none!important}
:root[data-ic=brand] #contacts a[href*="threads"]:hover,:root[data-ic=brand] #contacts a[href*="threads"]:focus-visible{background:#000!important;color:#fff!important;box-shadow:none!important}
:root[data-ic=brand] #contacts a[href^="mailto"]:hover,:root[data-ic=brand] #contacts a[href^="mailto"]:focus-visible{background:#EA4335!important;color:#fff!important;box-shadow:none!important}
:root[data-ic=brand] #contacts a[href*="vk.com"]:hover,:root[data-ic=brand] #contacts a[href*="vk.com"]:focus-visible{background:#0077FF!important;color:#fff!important;box-shadow:none!important}
:root[data-ic=brand] #contacts a[href*="wa.me"]:hover,:root[data-ic=brand] #contacts a[href*="wa.me"]:focus-visible{background:#25D366!important;color:#fff!important;box-shadow:none!important}
:root[data-ic=brand] #contacts :is(.pop,.tip) a:hover{background:none!important;color:inherit!important}
/* дизайнер 3 (волна 1) назвал блок .foot — гасим общий стиль подвала сайта */
.v-ct23b3 footer .foot{background:none!important;box-shadow:none!important;margin:0!important;border-radius:0!important;min-height:0!important;color:inherit!important}
.v-ct23b3 footer .foot::before,.v-ct23b3 footer .foot::after{display:none!important}
.v-ct23b3 footer .foot span{color:rgba(251,248,241,.78)!important}
/* пульт: заметка к разделу */
#pult .pu-note{display:block;width:100%;box-sizing:border-box;margin-top:8px;padding:8px 10px;font:14px/1.4 Vollkorn,Georgia,serif;border:1px solid rgba(36,38,43,.25);border-radius:6px;background:#fffdf8;color:#24262b;resize:vertical;min-height:52px}
#pult .pu-note:focus{outline:2px solid #29466f;outline-offset:1px}
/* картинки художника (прогон 23) */
:root[data-look=leaf] .q39-near .pz-pair .pz-sw img{content:url(/s0/img23/peas-foot-900.webp)}
.lf22-sl .l-bg{content:url(/s0/img23/slush-bg-1400.webp)}
.lf22-sl .l-oak{content:url(/s0/img23/slush-oak-800.webp)}
.lf22-sl .l-nov{right:2.5%!important;height:62%!important;bottom:2%!important}
:root[data-look=leaf] .v-hon18 .lf21-hbg img[data-sc="0"]{content:url(/s0/img23/hon-room-1500.webp)}
/* «Обучение»: новый фон-комната — чёткий, в масштабе, пол внизу; пара стоит на полу */
.v-talk21 .ho::before{background-image:url(/s0/img23/how-room-1500.webp)!important;background-position:50% 78%!important;opacity:.7!important}
:root[data-look=leaf] .v-talk21 .ho::before{inset:auto 0 30% 0!important;width:100%!important;height:auto!important;aspect-ratio:1536/1024;background-size:100% 100%!important;background-position:0 0!important;
-webkit-mask-image:linear-gradient(0deg,transparent 0,#000 6%);mask-image:linear-gradient(0deg,transparent 0,#000 6%)}
@media (max-width:1023.98px){ :root[data-look=leaf] .v-talk21 .ho::before{inset:0 0 auto 0!important;background-size:100% 100%!important} }
/* «Путешествие пилигрима» (пункт пульта pil) */
:root[data-look=leaf]:is([data-pil=box],[data-pil=ty]) .v-two22 .r17-pil{background:#fbf6ea!important;border-radius:calc(10 * var(--u))!important;box-shadow:0 0 0 1px rgba(36,38,43,.10),0 calc(10 * var(--u)) calc(26 * var(--u)) rgba(36,38,43,.10)!important;overflow:hidden!important}
:root[data-look=leaf][data-pil=box] .v-two22 .r17-land img:not(.lf23-monk){-webkit-mask-image:linear-gradient(90deg,#000 72%,transparent 100%)!important;mask-image:linear-gradient(90deg,#000 72%,transparent 100%)!important}
:root[data-look=leaf][data-pil=wide] .v-two22 .r17-pil{border-radius:0!important;background:#fdf3dd!important}
:root[data-look=leaf][data-pil=wide] .v-two22 .r17-land img:not(.lf23-monk){content:url(/s0/img23/pilgrim-wide-1600.webp)!important;width:100%!important;aspect-ratio:auto!important;object-fit:cover!important;object-position:50% 70%!important;-webkit-mask-image:linear-gradient(90deg,#000 62%,rgba(0,0,0,.25) 80%,rgba(0,0,0,.15) 100%)!important;mask-image:linear-gradient(90deg,#000 62%,rgba(0,0,0,.25) 80%,rgba(0,0,0,.15) 100%)!important}
:root[data-look=leaf][data-pil=ty] .v-two22 .r17-land img:not(.lf23-monk){content:url(/s0/img23/pilgrim-land-1600.webp)!important;width:100%!important;aspect-ratio:auto!important;object-fit:cover!important;object-position:50% 60%!important;-webkit-mask-image:none!important;mask-image:none!important}
.lf23-monk{display:none}
:root[data-look=leaf] .v-two22 .r17-land img.lf23-monk{display:none!important}
:root[data-look=leaf][data-pil=ty] .v-two22 .r17-land img.lf23-monk{content:url(/s0/img23/pilgrim-ty-520.webp)!important;display:block!important;position:absolute!important;left:30%!important;top:auto!important;bottom:6%!important;height:78%!important;width:auto!important;aspect-ratio:auto!important;-webkit-mask-image:none!important;mask-image:none!important;object-fit:contain!important;z-index:1;pointer-events:none;filter:drop-shadow(0 calc(6 * var(--u)) calc(6 * var(--u)) rgba(30,40,20,.25))}
@media (max-width:1023.98px){ :root[data-look=leaf][data-pil=ty] .v-two22 .r17-land img.lf23-monk{left:34%!important;height:84%!important;bottom:4%!important} :root[data-look=leaf]:is([data-pil=wide],[data-pil=ty]) .v-two22 .r17-land img{height:100%!important} }
/* прогон 23 · волынщик: стопа дорисована целиком (G, Роман 28.10: «низ стопы обрезан») */
:root[data-look=leaf] .q39-near .pz-pipe .pz-sw img{content:url(/s0/img23/pz-bagpiper-foot-900.webp)}
/* прогон 23 · пилигрим теперь в коробке: подвал больше не наезжает на неё (было −50u под полосу без коробки) */
:root[data-look=leaf] #contacts.v-line22,:root[data-look=leaf] #contacts.v-ft23,#contacts.v-ft23{margin-top:calc(44 * var(--u))!important}
#pult .pu-done{margin:10px 0 0;padding:8px 10px;font:14px/1.45 Vollkorn,Georgia,serif;color:#24262b;background:rgba(201,168,76,.12);border-left:3px solid #c9a84c;border-radius:0 6px 6px 0}
#pult .pu-done::before{content:"Прогон 23 · ";font-weight:600;color:#7a5d17}
/* s0/leaf24.css */
/* прогон 24 · ночь 28→29.10: телефон, пропорции, механики; шапки */
/* ── «Тесты» одно небо (sky23) на телефоне: правое небо уезжало за левый край (специфичность), теперь каждая коробка — своя половина той же картины */
@media (max-width:1023.98px){
:root[data-look=leaf] .v-sky23 .d7-lv .d7-sky img,:root[data-look=leaf] .v-sky23 .d7-ty .d7-sky img{width:200%!important;height:100%!important;object-fit:cover!important}
:root[data-look=leaf] .v-sky23 .d7-lv .d7-sky img{left:0!important}
:root[data-look=leaf] .v-sky23 .d7-ty .d7-sky img{left:-100%!important;opacity:1!important}
}
/* ── «Пилигрим» в коробке на телефоне: текст прилипал к краю коробки */
@media (max-width:1023.98px){
:root[data-look=leaf] .v-two22 .r17-pil .r17-txt{padding:calc(16 * var(--u)) calc(20 * var(--u)) calc(22 * var(--u))!important;box-sizing:border-box}
}
/* ── «Между уроками» на телефоне: крестьяне Дюрера были ростом с сцену «Подслушников» — меньше, площадь ниже */
@media (max-width:760px){
:root[data-look=leaf] .v-two22 .pz-box{--pz-fh:min(250px,calc(64vw * var(--vwk,1)))!important;--pz-dh1:min(232px,calc((var(--pz-fw) - 20px) / 1.3))!important}
}
/* ── ✛-разделитель на телефоне: знак лежал на заголовке раздела («I Направления») и стоял в большой пустоте — ближе к верху, с отступом от заголовка */
@media (max-width:1023.98px){
html:is([data-rh="live"],[data-rh="big"],[data-rh="glow"]) :is([data-sec="courses"],[data-sec="tests"],[data-sec="prices"],[data-sec="zapis"]):not([hidden])::before{height:calc(48 * var(--u))!important;margin:calc((var(--sec) - 28) * var(--u)) auto calc((var(--sec) * -1 + 30) * var(--u))!important}
}
/* ── «С чего начать» на телефоне: Грамматика (193 px) стояла в рамке 160 px и ногами заходила на раму доски — фигура целиком над доской, с тенью под ногами */
@media (max-width:1023.98px){
:root[data-look=leaf] .v-door18c .dr-fig{height:auto!important;margin-bottom:calc(14 * var(--u))!important;position:relative}
:root[data-look=leaf] .v-door18c .dr-fig::after{content:"";position:absolute;left:18%;right:22%;bottom:calc(-5 * var(--u));height:calc(10 * var(--u));border-radius:50%;background:radial-gradient(closest-side,rgba(36,38,43,.22),transparent);z-index:-1}
}
/* ── «Цены» на телефоне (листается вбок): карточки разной высоты оставляли под «Пробным» пустоту ≈ 200 px — одна высота у всех трёх */
@media (max-width:1023.98px){ :root[data-look=leaf] [data-sec=prices] .lf19-sw{align-items:stretch!important} }
/* ── гладкость: живой ✛ крутится от прокрутки силами CSS (scroll-driven animation) — раньше скрипт на каждом кадре пересчитывал стили всей страницы (на телефоне ≈ 1 с работы на одну прокрутку) */
@supports (animation-timeline: view()){
html:is([data-rh="live"],[data-rh="big"],[data-rh="glow"]) :is([data-sec="courses"],[data-sec="prices"]):not([hidden])::before{animation:s24-cw linear both;animation-timeline:view()}
html:is([data-rh="live"],[data-rh="big"],[data-rh="glow"]) :is([data-sec="tests"],[data-sec="zapis"]):not([hidden])::before{animation:s24-ccw linear both;animation-timeline:view()}
@keyframes s24-cw{from{transform:rotate(330deg)}to{transform:rotate(-330deg)}}
@keyframes s24-ccw{from{transform:rotate(-330deg)}to{transform:rotate(330deg)}}
@media (prefers-reduced-motion:reduce){ html [data-sec]::before{animation:none!important} }
html[data-theatre="off"] [data-sec]::before{animation:none!important}
}
/* ── подвал на телефоне: ссылки на документы были 20 px в высоту — палец промахивается */
@media (max-width:1023.98px){ :root[data-look=leaf] #contacts a[href*="privacy"],:root[data-look=leaf] #contacts a[href*="consent"],:root[data-look=leaf] #contacts a[href*="polit"],:root[data-look=leaf] #contacts a[href*="soglas"]{display:inline-block;padding-block:12px} }
#pult .pu-done::before{content:"Ночь 24 · "}
/* ── ✛ на телефоне: от знака до заголовка было 38 / 94 / 118 / 158 px — один шаг */
@media (max-width:1023.98px){ html:is([data-rh="live"],[data-rh="big"],[data-rh="glow"]) :is([data-sec="tests"],[data-sec="prices"],[data-sec="zapis"]):not([hidden]) > .sec{margin-top:0!important} }
/* ── телефон: кнопка «Меню» в шапке и выпадающий список разделов (рецензент R, п. 1) */
.lf24-mb,.lf24-nav{display:none}
@media (max-width:1023.98px){
header.bar .lf24-mb{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:64px;padding:0 14px;margin-left:8px;border:1px solid rgba(36,38,43,.35);border-radius:8px;background:transparent;color:#24262b;font:500 15px/1 var(--f-text,Vollkorn,Georgia,serif);cursor:pointer}
header.bar .lf24-mb[aria-expanded=true]{background:#24262b;color:#fbf8f1}
header.bar > .btn{margin-left:auto}
header.bar .lf24-nav:not([hidden]){display:grid;position:absolute;top:100%;left:0;right:0;padding:6px 16px 14px;background:#fbf8f1;box-shadow:0 14px 30px rgba(36,38,43,.14);border-top:1px solid rgba(36,38,43,.08)}
header.bar .lf24-nav a{display:flex;align-items:center;min-height:48px;border-bottom:1px solid rgba(36,38,43,.07);text-decoration:none;color:#24262b;font:400 19px/1.2 var(--f-head,"EB Garamond",Georgia,serif)}
header.bar .lf24-nav a:last-child{border-bottom:0}
}
/* ── телефон: «Цены» — общая высота карточек давала 550 px пустого зелёного под «Пробным» (R, п. 3) — вернула как было */
@media (max-width:1023.98px){ :root[data-look=leaf] [data-sec=prices] .lf19-sw{align-items:start!important} }
/* ── телефон, первый экран: между кнопкой и крыльями было ≈ 125 px пустоты — ангел (вместе с облаками) выше на 80 px, шапка короче (R, п. 2) */
@media (max-width:1023.98px){ :root[data-look=leaf] .v-angel17.hero{height:calc(1040 * var(--u))!important} :root[data-look=leaf] .v-angel17 .angel{top:calc(400 * var(--u))!important} header.bar .wordmark{white-space:nowrap} }
/* ── «Запись одной строкой»: подсказка ошибки была бледным золотом по кости и ломала ряд «поле + кнопка» (R, п. 5) — тёмная охра, строкой под рядом */
:root:not([data-look=r18]) #quick.v-pen22 .z-err{order:9;flex:1 0 100%;margin:8px 0 0;color:#6b4a12!important;font:italic 500 max(15px, calc(16 * var(--u)))/1.35 var(--f-text,Vollkorn,Georgia,serif)}
:root:not([data-look=r18]) #quick.v-pen22 [aria-invalid=true]{outline:2px solid #8a6a1f;outline-offset:1px}
:root:not([data-look=r18]) #quick.v-pen22 .qform > .q-note,:root:not([data-look=r18]) #quick.v-pen22 .qform > .q-bot{order:10}
/* ── «Учим на совесть» на телефоне: под карточкой игры был пустой пол — сцена ниже, фигуры ближе к карточке (R, п. 6) */
@media (max-width:1023.98px){ :root[data-look=leaf] .v-hon18 .h18-scene{height:calc(200 * var(--u))!important;margin-top:0!important} }
/* ── «Подслушники» на телефоне: сцена выше (16:10 → 4:3), люди крупнее и ближе к росту крестьян Дюрера рядом (R, п. 7) */
@media (max-width:760px){ :root[data-look=leaf] .v-two22 .nw-club .paint{aspect-ratio:4/3!important} }
/* ── «Отзывы»: стрелка «B1 → B2» почти не видна (R, п. 8) */
:root[data-look=leaf] .rv17-stat i{color:#e9cf8e!important;opacity:1!important}
/* ── мелкий листок на углу «Подслушников» торчал обрезком (R, п. 9; правило «мелкие рисунки — нет») */
:root[data-look=leaf] .v-two22 .r17-leaf{display:none!important}
/* ── ритм на телефоне: между разделами было 96–136 px пустоты — ровный шаг ≈ 64 px (R, п. 4) */
@media (max-width:1023.98px){
:root[data-look=leaf] main > [data-sec="reviews"]:not([hidden]){margin-top:-52px}
:root[data-look=leaf] main > [data-sec="how"]:not([hidden]){margin-top:-34px}
:root[data-look=leaf] main > [data-sec="faq"]:not([hidden]){margin-top:-32px}
:root[data-look=leaf] main > [data-sec="channel"]:not([hidden]){margin-top:-60px}
}
/* s0/leaf25.css */
/* прогон 25 · 29.10: голос Романа по прогону 24 */
/* ── «Учим на совесть» (Роман 29.10): каждый стоит на земле и идёт туда, куда ведёт картинка — сцена (фигура + её тень) сдвигается целиком */
@media (min-width:1024px){
:root[data-look=leaf] .v-hon18 .h18-scene{transition:translate .6s ease}
:root[data-look=leaf] .v-hon18 .h18-scene:has(.h18-f2.is-on){translate:calc(-130 * var(--u)) 0} /* 3 · путник: не в забор, а по дороге */
:root[data-look=leaf] .v-hon18 .h18-scene:has(.h18-f4.is-on){translate:calc(-120 * var(--u)) calc(16 * var(--u))} /* 5 · торговка: с табуретки — на мостовую */
:root[data-look=leaf] .v-hon18 .h18-scene:has(.h18-f5.is-on){translate:calc(-190 * var(--u)) calc(6 * var(--u))} /* 6 · девушка с гусем: из травы — на дорогу */
}
/* ── окошко игры ещё прозрачнее, заголовок светлым по затемнению (пульт «Учим на совесть: окошко игры» → glass25) */
:root[data-look=leaf][data-hg=glass25] .v-hon18 .lf21-hbg::after{background:linear-gradient(90deg,rgba(24,28,34,.62) 0,rgba(24,28,34,.42) 36%,rgba(24,28,34,.08) 62%,rgba(24,28,34,0) 78%)!important}
:root[data-look=leaf][data-hg=glass25] .v-hon18 .h18-h{color:#fbf8f1!important;text-shadow:0 1px 18px rgba(10,12,16,.45)}
:root[data-look=leaf][data-hg=glass25] .v-hon18 .h18-h em{color:#e9cf8e!important}
:root[data-look=leaf][data-hg=glass25] .v-hon18 .h18-txt > p,:root[data-look=leaf][data-hg=glass25] .v-hon18 .lf20-lede,:root[data-look=leaf][data-hg=glass25] .v-hon18 .h18-txt .lead{color:rgba(251,248,241,.9)!important;text-shadow:0 1px 12px rgba(10,12,16,.4)}
:root[data-look=leaf][data-hg=glass25] .v-hon18 .h18-err{background:rgba(255,253,248,.48)!important;-webkit-backdrop-filter:blur(8px) saturate(1.15);backdrop-filter:blur(8px) saturate(1.15);box-shadow:0 0 0 1px rgba(255,253,248,.55),0 calc(10 * var(--u)) calc(26 * var(--u)) rgba(10,12,16,.18)!important}
@media (max-width:1023.98px){ :root[data-look=leaf][data-hg=glass25] .v-hon18 .lf21-hbg::after{background:linear-gradient(180deg,rgba(24,28,34,.62) 0,rgba(24,28,34,.42) 40%,rgba(24,28,34,.1) 70%,rgba(24,28,34,0) 85%)!important} }
/* ── подвал: эмблема ярью (пульт «Подвал: эмблема») */
:root[data-emb=verd] #contacts .emb23,:root[data-emb=verd] #contacts .ft-emb img{filter:grayscale(1) brightness(.5) sepia(1) hue-rotate(110deg) saturate(1.6) brightness(.8)}
/* ── фон страницы: пергамент светлее; при пергаменте верхнее меню — пергаментом в тон (Роман 29.10) */
html[data-pg="vellum2"] body{background:#fbf8f1 url(/s0/img22/vellum-tile.webp) 0 0/1400px auto repeat}
html[data-pg="vellum2"] body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:rgba(251,248,241,.55)}
html:is([data-pg="vellum"],[data-pg="vellum2"]) header.bar{background:#fbf8f1 url(/s0/img22/vellum-tile.webp) 0 0/1400px auto repeat!important}
html[data-pg="vellum2"] header.bar{background-blend-mode:normal!important;box-shadow:inset 0 0 0 calc(100vmax * var(--vwk,1)) rgba(251,248,241,.55)}
/* телефон 390: кнопка «Записаться» в шапке не влезала («аписатьс») — уже поля, меньше разрядка знака */
@media (max-width:440px){
header.bar .btn{padding-inline:10px!important;min-width:0!important;width:auto!important;white-space:nowrap;font-size:14px!important}
header.bar .wordmark{letter-spacing:.1em!important;font-size:15px!important}
header.bar{column-gap:8px!important}
}
/* прогон 25 · сияние ангела (Роман 29.10: «нимб, золото крыльев и ободок на шее перестали сиять — раньше было красивее»).
Маска золотых мест снята с самой картинки ангела (angel17-gold-900 / angel17m-gold-700); поверх — тёплый подсвет и медленный блик; за нимбом — свет. */
.g25-glint,.g25-halo{position:absolute;pointer-events:none;display:block}
.g25-glint{inset:0;z-index:auto;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;mix-blend-mode:screen;
background:linear-gradient(104deg,rgba(255,240,190,0) 0,rgba(255,240,190,0) 40%,rgba(255,248,222,.95) 49%,rgba(255,240,190,0) 58%,rgba(255,240,190,0) 100%) 130% 0/300% 100% no-repeat,rgba(255,206,110,.42);
animation:g25-sweep 7.5s ease-in-out infinite}
@keyframes g25-sweep{0%,25%{background-position:130% 0,0 0}75%,100%{background-position:-30% 0,0 0}}
.g25-halo{z-index:-1;left:var(--hx,40.4%);top:var(--hy,13.2%);width:62%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;
background:radial-gradient(closest-side,rgba(255,238,170,.85) 0,rgba(255,226,140,.5) 38%,rgba(255,216,120,.18) 66%,rgba(255,216,120,0) 100%);
animation:g25-breath 5s ease-in-out infinite alternate}
@keyframes g25-breath{from{opacity:.78;scale:.96}to{opacity:1;scale:1.04}}
@media (prefers-reduced-motion:reduce){ .g25-glint,.g25-halo{animation:none} }
/* ── прогон 25 · rh=mix25: разделители из настоящих гравюр (Роман 29.10: «несколько вариаций, как у Вирджинии»), каждый на своём месте, качается от прокрутки.
Лоза, можжевельник, самшит («Gart der Gesundheit», 1485, Мет) · марка Эгенольфа с горящим сердцем (1536, Рейкс). По рецензенту R25: IHS в лучах снят (читается как печать),
«узел» Дюрера снят (в мелком — тёмный диск); знаки крупные и плотные, не «мелкие полупрозрачные» */
html[data-rh="mix25"] :is([data-sec="courses"],[data-sec="how"],[data-sec="prices"],[data-sec="zapis"]):not([hidden])::before{content:"";display:block;
width:calc(132 * var(--u));height:calc(132 * var(--u));margin:calc(var(--sec) * .5 * var(--u)) auto calc(var(--sec) * -.5 * var(--u) + 92 * var(--u));
background:var(--rh25) 50% 50%/contain no-repeat;opacity:1;will-change:transform}
html[data-rh="mix25"] [data-sec="courses"]{--rh25:url(/s0/img25/rh-vine-300.webp)}
html[data-rh="mix25"] [data-sec="how"]{--rh25:url(/s0/img25/rh-juniper-300.webp)}
html[data-rh="mix25"] [data-sec="prices"]{--rh25:url(/s0/img25/rh-box-300.webp)}
html[data-rh="mix25"] [data-sec="zapis"]{--rh25:url(/s0/img25/rh-heart-300.webp)}
@supports (animation-timeline: view()){
html[data-rh="mix25"] :is([data-sec="courses"],[data-sec="prices"]):not([hidden])::before{animation:s25-sway linear both;animation-timeline:view()}
html[data-rh="mix25"] :is([data-sec="how"],[data-sec="zapis"]):not([hidden])::before{animation:s25-sway linear both reverse;animation-timeline:view()}
@keyframes s25-sway{from{transform:rotate(-20deg)}50%{transform:rotate(0)}to{transform:rotate(20deg)}}
}
@media (max-width:1023.98px){
html[data-rh="mix25"] :is([data-sec="courses"],[data-sec="how"],[data-sec="prices"],[data-sec="zapis"]):not([hidden])::before{width:calc(84 * var(--u));height:calc(84 * var(--u));margin:calc(var(--sec) * .5 * var(--u)) auto calc(var(--sec) * -.5 * var(--u) + 40 * var(--u))}
}
@media (prefers-reduced-motion:reduce){ html[data-rh="mix25"] [data-sec]::before{animation:none!important} }
/* ── прогон 25 · «Обучение» talk25: фон за парой — подлинная гравюра (Маро, библиотека, 1703) тонким контуром тон в тон; цвет только на людях */
:root[data-look=leaf] .v-talk21.v-talk25 .ho::before{background-image:url(/s0/img25/marot-line-1200.webp)!important;opacity:1!important;inset:0!important;aspect-ratio:auto!important;height:auto!important;background-size:cover!important;background-position:50% 30%!important}
:root[data-look=leaf] .v-talk21.v-talk25 .ho::after{background:linear-gradient(90deg,rgba(251,248,241,.55) 0,rgba(251,248,241,0) 46%),linear-gradient(0deg,rgba(251,248,241,.96) 0,rgba(251,248,241,.6) 26%,rgba(251,248,241,0) 44%)!important}
:root[data-look=leaf] .v-talk21.v-talk25 .ho{background:#f6f1e4!important}
@media (max-width:1023.98px){ :root[data-look=leaf] .v-talk21.v-talk25 .ho::before{inset:0 0 auto 0!important;height:56%!important;background-size:cover!important} }
/* ── прогон 25 · «секция в один экран» (Роман 29.10): на широком, но невысоком экране (1710×838) макет больше не растёт по ширине выше роста экрана —
единица --u = меньшее из «ширина/1440» и «высота/838»; на 1440×838 ничего не меняется, на 1710×838 — макет 1440 с полями, на высоких экранах — крупнее, как было */
@media (min-width:1024px){ :root{--u:max(.711px, min(calc(calc(100vw * var(--vwk,1)) / 1440), calc(calc(100vh * var(--vwk,1)) / 838)))} }
#pult .pu-done::before{content:"Прогон 25 · "}
/* ── телефон: зоны касания ≥ 44 px — ссылки Telegram/WhatsApp под «Тремя вопросами», разделы и документы в подвале */
@media (max-width:1023.98px){
#zapis.v-tri25 .t3-foot a,#zapis .v-tri25 .t3-foot a{display:inline-block;padding-block:12px;margin-block:-8px}
:root #contacts nav a,:root #contacts .ft-nav a,:root #contacts [class*="nav"] a{display:inline-block;padding-block:13px}
}
/* R25: подписи картин и предметов — не меньше 14 px; «ЕГЭ» на светлом Дюсарте — затемнение плотнее */
.k25-src,.r25-src,.p25-src,.k25-verm figcaption,.c25-cr{font-size:max(14px,calc(13 * var(--u)))!important}
.v-gal25 .g23-card[data-dir="ege"]::after{background:linear-gradient(to top,rgba(28,30,34,.92) 0%,rgba(28,30,34,.74) 30%,rgba(28,30,34,.2) 54%,rgba(28,30,34,0) 66%)!important}
.v-gal25 .g23-card[data-dir="conversational"] img{object-position:58% 0!important}
@media (max-width:1023.98px){
.v-k25a .lf-stub{font-size:14px!important}
:root #contacts nav a,:root #contacts .ft-small a{display:inline-block;padding-block:14px!important;min-width:44px}
}
/* s0/leaf26.css */
/* прогон 26 — слой поверх leaf25 */
/* ── размеры прогона 24 (Роман 29.10: «секции сплющили зря»): единица снова от ширины, как в system.css.
Формула прогона 25 min(ширина/1440, высота/838) на 1710×838 уменьшала всё на 16 %. Не влезающие разделы ужимаются по одному, на 3–5 %. */
@media (min-width:1024px){ :root{--u:max(.711px, calc(calc(100vw * var(--vwk,1)) / 1440))} }
/* ── разделитель «горящее сердце на алтаре» снят: на алтаре бычий череп — языческий жертвенник (Роман 29.10). Новый — круглый, из подлинника */
html[data-rh="mix25"] [data-sec="zapis"]:not([hidden])::before{content:none!important}
/* ── разделы, которые при размерах прогона 24 выше экрана 1710×838: «Направления» (Роман выбрал раскладку «Прогон 23 · та же галерея» так, как видел её в прогоне 25)
и «Обучение» — для них одних единица остаётся «меньшее из ширины и высоты», как в прогоне 25. Остальные разделы — размеры прогона 24 */
@media (min-width:1024px){ :is([data-sec="courses"],[data-sec="how"],[data-sec="prices"]){--u:max(.711px, min(calc(calc(100vw * var(--vwk,1)) / 1440), calc(calc(100vh * var(--vwk,1)) / 838)))} }
/* ── шапка в один экран (замер R26: на 1710×838 шапка 854 + меню): высота 920u → 860u, облака гаснут в лист, а не срезаются кромкой (R26-стили) */
@media (min-width:1024px){
:root[data-look] .v-angel17.hero{height:calc(860 * var(--u))!important;-webkit-mask-image:linear-gradient(#000 calc(100% - 90 * var(--u)),transparent);mask-image:linear-gradient(#000 calc(100% - 90 * var(--u)),transparent)}
}
/* шапка + меню = ровно экран: единица шапки = меньшее из «ширина/1440» и «(высота экрана − меню)/774» (774 = 860u × 0,9) */
@media (min-width:1024px){ :root[data-look] #hero.v-angel17{--u:max(.6px, min(calc(calc(100vw * var(--vwk,1)) / 1440), calc((calc(100vh * var(--vwk,1)) - 64.8 * (calc(100vw * var(--vwk,1)) / 1440)) / 774)))} }
/* s0/leaf27.css */
/* прогон 27 — слой поверх leaf26 */
/* ── прогон 27 · «Учим на совесть» hg=light27 (Роман 31.10): люди крупнее относительно комнаты («как хоббиты»), секция светлее, текст слева читается — тёмный по светлому */
:root[data-look=leaf][data-hg=light27] .v-hon18 .lf21-hbg img{filter:brightness(1.1) saturate(.95)}
:root[data-look=leaf][data-hg=light27] .v-hon18 .lf21-hbg::after{background:linear-gradient(90deg,rgba(251,248,241,.9) 0,rgba(251,248,241,.78) 38%,rgba(251,248,241,.18) 58%,rgba(251,248,241,0) 70%)!important}
:root[data-look=leaf][data-hg=light27] .v-hon18 .h18-h{color:#24262b!important;text-shadow:none!important;font-size:calc(46 * var(--u))!important}
:root[data-look=leaf][data-hg=light27] .v-hon18 .h18-h em{color:#2c5a4e!important}
:root[data-look=leaf][data-hg=light27] .v-hon18 .h18-txt > p,:root[data-look=leaf][data-hg=light27] .v-hon18 .lf20-lede,:root[data-look=leaf][data-hg=light27] .v-hon18 .h18-txt .lead{color:#33363c!important;text-shadow:none!important;font-size:max(17px, calc(20 * var(--u)))!important;line-height:1.4!important}
:root[data-look=leaf][data-hg=light27] .v-hon18 .h18-err{background:rgba(255,253,248,.82)!important;box-shadow:0 0 0 1px rgba(36,38,43,.10),0 calc(10 * var(--u)) calc(26 * var(--u)) calc(-14 * var(--u)) rgba(36,38,43,.25)!important}
@media (min-width:1024px){ :root[data-look=leaf][data-hg=light27] .v-hon18 .h18-scene{transform:scale(1.28) translateX(-3%);transform-origin:50% 100%} }
@media (max-width:1023.98px){ :root[data-look=leaf][data-hg=light27] .v-hon18 .lf21-hbg::after{background:linear-gradient(180deg,rgba(251,248,241,.9) 0,rgba(251,248,241,.7) 45%,rgba(251,248,241,0) 75%)!important} :root[data-look=leaf][data-hg=light27] .v-hon18 .h18-scene{transform:scale(1.15);transform-origin:50% 100%} }
/* студия 31.10 (UI/UX): */
/* 1. быстрая форма: «Записала» на светлой карточке — текст тушью (был цвета кости) */
.plate--paper .z-done-t,.plate--paper .z-again{color:rgba(36,38,43,.78)!important}
.plate--paper .z-done-t b{color:#24262b!important}
/* 2. фокус клавиатуры виден на пергаменте (было золото 1px, 2,15:1) */
:root[data-look] :is(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid #29466f!important;outline-offset:3px!important}
/* 3. контраст: подсказки в полях и строка согласия ≥ 4,5:1 */
:root[data-look] .input::placeholder{color:rgba(36,38,43,.66)!important;opacity:1}
:root[data-look] :is(.q-note,.z-consent){color:rgba(36,38,43,.74)!important}
/* s0/leaf28.css */
/* ── прогон 28 · «Учим на совесть» (Роман 31.10 вечер): головы срезаны после увеличения — сцена без общего масштаба; каждая фигура — по своей высоте, голова целиком с запасом */
@media (min-width:1024px){
:root[data-look=leaf] .v-hon18 .h18-scene{transform:none!important}
:root[data-look=leaf] .v-hon18 .h18-fig{--fh:93%!important;bottom:calc(-4 * var(--u))!important}
:root[data-look=leaf] .v-hon18 .h18-f0{--fh:84%!important;transform:scale(1.22);transform-origin:50% 100%}
}
@media (max-width:1023.98px){ :root[data-look=leaf] .v-hon18 .h18-scene{transform:none!important} }
/* «Учим на совесть»: текст легче читать — плотнее светлая подложка под текстом, крупнее и темнее подзаголовок и подсказка, заголовок весомее */
:root[data-look=leaf][data-hg] .v-hon18 .lf21-hbg::after{background:linear-gradient(90deg,rgba(251,248,241,.96) 0,rgba(251,248,241,.9) 40%,rgba(251,248,241,.3) 60%,rgba(251,248,241,0) 72%)!important}
:root[data-look=leaf][data-hg] .v-hon18 .h18-h{font-size:calc(52 * var(--u))!important;font-weight:500!important;letter-spacing:-.005em;color:#1d1f24!important}
:root[data-look=leaf][data-hg] .v-hon18 .lf20-lede,:root[data-look=leaf][data-hg] .v-hon18 .h18-txt > p{font:400 max(18px, calc(21 * var(--u)))/1.42 "EB Garamond",Georgia,serif!important;color:#24262b!important;max-width:30em}
:root[data-look=leaf][data-hg] .v-hon18 .err-k{font-size:max(16px, calc(18 * var(--u)))!important;color:#3d4046!important}
:root[data-look=leaf][data-hg] .v-hon18 .h18-err{background:rgba(255,253,248,.95)!important}
:root[data-look=leaf][data-hg] .v-hon18 .err-say{font-size:max(17px, calc(19 * var(--u)))!important;color:#24262b!important}
@media (max-width:1023.98px){ :root[data-look=leaf] .v-hon18 .h18-h{font-size:calc(34 * var(--u))!important} }
/* s0/leaf29.css */
/* прогон 29 — слой поверх leaf28 */
/* ── прогон 29 · «Вопросы» (Роман 31.10): фон под совой цветной — по цвету буквицы открытого вопроса (идея дизайнера C «Цветная ниша»); киноварь даёт тёплое золото, не розовый */
:root[data-look] .v-owl22 .fm-page{transition:background .4s ease}
:root[data-look] .v-owl22 .fm[data-nc] .fm-page{background:radial-gradient(110% 80% at 15% 8%,rgba(255,255,255,.55),transparent 60%),radial-gradient(90% 110% at 85% 100%,color-mix(in srgb,var(--nc) 19%,transparent),transparent 70%),color-mix(in srgb,var(--nc) 8%,#fbf8f1)!important}
/* ── прогон 29 · «Отзывы» (Роман 31.10): буквицы разного цвета — лазурь, ярь, золото, тушь по кругу */
:root[data-look] .v-k26n .rv17-card:nth-child(4n+1) .rv17-cap{background:#29466f!important;color:#fbf8f1!important}
:root[data-look] .v-k26n .rv17-card:nth-child(4n+2) .rv17-cap{background:#2c5a4e!important;color:#fbf8f1!important}
:root[data-look] .v-k26n .rv17-card:nth-child(4n+3) .rv17-cap{background:#c9a84c!important;color:#24262b!important}
:root[data-look] .v-k26n .rv17-card:nth-child(4n+4) .rv17-cap{background:#24262b!important;color:#e6c77a!important}
/* ── прогон 29 · «Направления»: Иммиграция светлее (Роман 31.10) */
:root[data-look] .g23-card[data-dir="immigration"] img{filter:brightness(1.36) saturate(1.05) contrast(.94)!important}
/* ── прогон 29 · rh=gen29: разделители-виньетки от ChatGPT (Роман 31.10: «голые веточки — сделать разнообразными, посмотреть идеи ChatGPT»):
перо из руки в руку, раскрытая книга, свеча зажигает свечу, птица над книгой, письмо из окна в окно; лоза с цветами вокруг */
html[data-rh="gen29"] :is([data-sec="courses"],[data-sec="how"],[data-sec="tests"],[data-sec="prices"],[data-sec="zapis"]):not([hidden])::before{content:"";display:block;
width:calc(460 * var(--u));height:calc(110 * var(--u));margin:calc(var(--sec) * .5 * var(--u)) auto calc(var(--sec) * -.5 * var(--u) + 70 * var(--u));
background:var(--rh29) 50% 50%/contain no-repeat}
html[data-rh="gen29"] [data-sec="courses"]{--rh29:url(/s0/img29/rh29-2.webp)}
html[data-rh="gen29"] [data-sec="how"]{--rh29:url(/s0/img29/rh29-1.webp)}
html[data-rh="gen29"] [data-sec="tests"]{--rh29:url(/s0/img29/rh29-4.webp)}
html[data-rh="gen29"] [data-sec="prices"]{--rh29:url(/s0/img29/rh29-5.webp)}
html[data-rh="gen29"] [data-sec="zapis"]{--rh29:url(/s0/img29/rh29-6.webp)}
html[data-rh="gen29"] [data-sec="zapis"]:not([hidden])::before{content:""}
@media (max-width:1023.98px){ html[data-rh="gen29"] :is([data-sec="courses"],[data-sec="how"],[data-sec="tests"],[data-sec="prices"],[data-sec="zapis"]):not([hidden])::before{width:86%;height:calc(70 * var(--u));margin:calc(var(--sec) * .5 * var(--u)) auto calc(var(--sec) * -.5 * var(--u) + 30 * var(--u))} }
/* s0/leaf30.css */
/* прогон 30 — слой поверх leaf29 */
/* прогон 30 */
/* ══ Z30: общий слой студии (дизайнер Z). Каждый пункт — на пульте с «как сейчас» рядом. ══ */
/* ── Z30: шрифт текста (html[data-ft]) — грани подменяются в leaf30.js (переопределяет и жёстко прописанный "Vollkorn" в разделах).
Здесь — только поправки кегля/ритма под каждую гарнитуру. */
html[data-ft="sans"] body{letter-spacing:-.003em}
html[data-ft="sans"] .rubric .rubric-sub{letter-spacing:0}
/* ── Z30: заголовок раздела по сетке (html[data-zh="grid"]) — номер в строке, заголовок и подзаголовок с левого края содержимого,
у всех разделов один кегль и один шаг до содержимого (AUDIT-Z п.1; X просил «одну левую линию» — то же) */
html[data-zh="grid"] .rubric{min-height:0!important;padding:0 0 calc(30 * var(--u))!important;display:block!important;margin-left:0!important}
html[data-zh="grid"] .rubric h2{font-size:calc(54 * var(--u))!important;line-height:1.06!important;max-width:22em!important;letter-spacing:-.012em}
html[data-zh="grid"][data-nst="gold"] .rubric h2:has(> .fol){padding-left:0!important}
html[data-zh="grid"][data-nst="gold"] .rubric h2 > .fol{position:static!important;display:inline!important;width:auto!important;text-align:left!important;margin-right:.26em!important}
html[data-zh="grid"] .rubric .rubric-sub{padding-left:0!important;margin:calc(12 * var(--u)) 0 0!important;max-width:40em!important;color:#3b3d43!important;
font-size:calc(19 * var(--u))!important;line-height:1.45!important}
@media (max-width:1023.98px){
html[data-zh="grid"] .rubric{padding:0 0 calc(18 * var(--u))!important}
html[data-zh="grid"] .rubric h2{font-size:calc(36 * var(--u))!important}
html[data-zh="grid"] .rubric .rubric-sub{font-size:max(16px, calc(17 * var(--u)))!important}
}
/* ── Z30: ровный шаг между разделами (html[data-zg="even"]) — один зазор на каждом стыке; виньетка-разделитель
встаёт в середину этого же зазора, а не добавляет свой (было 86 / 140 / 185 / 263 px) */
html[data-zg="even"]{--zg:132}
html[data-zg="even"] main.wrap > [data-sec]:not([data-sec="hero"]):not([data-sec="contacts"]):not([data-sec="foot"]) > section:is(#courses,#teachers,#board,#reviews,#how,#tests,#prices,#faq,#zapis,#channel,[id]){margin-top:calc(var(--zg) * var(--u))!important}
html[data-zg="even"] main.wrap > [data-sec]:not([hidden]){margin-top:0!important} /* leaf24 тянул «Между уроками» вверх на 60 px */
html[data-zg="even"][data-rh="gen29"] main.wrap > [data-sec]:not([hidden])::before{height:calc(84 * var(--u))!important;width:calc(380 * var(--u))!important;
margin:calc((var(--zg) - 84) * .5 * var(--u)) auto calc((var(--zg) - 84) * -.5 * var(--u) - 84 * var(--u))!important}
html[data-zg="even"] main.wrap > [data-sec="contacts"] > section:is(#contacts,[id]){margin-top:calc(var(--zg) * var(--u))!important}
/* разделы с внутренним верхним полем (секция начинается не с заголовка) — поле снимаем, чтобы шаг был виден одинаковым */
html[data-zg="even"] main.wrap > [data-sec] > section:is(#how,#prices,#zapis,#channel){padding-top:0!important}
@media (max-width:1023.98px){
html[data-zg="even"]{--zg:72}
html[data-zg="even"][data-rh="gen29"] main.wrap > [data-sec]:not([hidden])::before{height:calc(56 * var(--u))!important;width:72%!important;
margin:calc((var(--zg) - 56) * .5 * var(--u)) auto calc((var(--zg) - 56) * -.5 * var(--u) - 56 * var(--u))!important}
}
/* ── Z30: карточки (html[data-zc="crisp"]) — белее листа и с чёткой каймой тушью вместо размытой тени (X: «серость: светлая коробка
с мягкой тенью на светлом пергаменте, разница 3–5 %»). Переменные --z-card-bg / --z-card-line — для новых вариантов X и Y. */
:root{--z-card-bg:#fffdf8;--z-card-line:rgba(36,38,43,.15);--z-card-lift:0 1px 0 rgba(36,38,43,.05)} /* без размытой тени: кайма + тонкая нижняя черта (договорились с X) */
html[data-zc="crisp"] :is(.t10,.rv17-card,.d7-box,.x10-after,.h18,.pz-post,.zd1-formbox,.fm-page){
background-color:var(--z-card-bg)!important;box-shadow:inset 0 0 0 1px var(--z-card-line),var(--z-card-lift)!important}
html[data-zc="crisp"] .pz-box{box-shadow:inset 0 0 0 1px var(--z-card-line)!important}
html[data-zc="crisp"] .rubric .rubric-sub, html[data-zc="crisp"] .t-soft{color:#3b3d43}
/* ══ Z30 · круг 2 (по REVIEW30) ══ */
/* ── Z30 круг 2: один h2 на всех ширинах (REVIEW30 п.7: «на 1710 у #courses, #how и #prices h2 по 54, у остальных 64»).
Причина — эти разделы держат высоту единицей, урезанной высотой экрана (--u = min(ширина, высота)). Заголовок берёт единицу страницы
--uh: она вычисляется на и наследуется готовым значением, переопределение --u внутри раздела её не трогает. */
html{--uh:var(--u)}
html[data-zh="grid"] .rubric h2{font-size:calc(54 * var(--uh))!important}
html[data-zh="grid"] .rubric .rubric-sub{font-size:calc(19 * var(--uh))!important;margin-top:calc(12 * var(--uh))!important}
html[data-zh="grid"] .rubric{padding-bottom:calc(30 * var(--uh))!important}
@media (max-width:1023.98px){
html[data-zh="grid"] .rubric h2{font-size:calc(36 * var(--uh))!important}
html[data-zh="grid"] .rubric .rubric-sub{font-size:max(16px, calc(17 * var(--uh)))!important}
html[data-zh="grid"] .rubric{padding-bottom:calc(18 * var(--uh))!important}
/* поле страницы на телефоне 16 px (было 12; у «С чего начать» и «Записи» 26–31) — одна левая линия на 390 */
html[data-zh="grid"]{--gut:16}
}
/* ── Z30 круг 2: разделители (REVIEW30 п.8: «мелкие виньетки = мелкие полупрозрачные рисунки из REJECTED; пять подряд — скрапбук»).
rh=air30 — виньеток нет совсем, стык держит один ровный шаг (zg) и смена плит; ✛ тоже не ставлю: мелкий знак — тот же мелкий рисунок. */
html[data-rh="air30"] main.wrap > [data-sec]::before{content:none!important;display:none!important}
/* ── Z30 круг 2: подписи ≥ 16 px CSS (REVIEW30 п.6). Капитель с разрядкой — не меньше 15. Здесь — общие места; свои разделы X и Y правят у себя. */
html[data-zh="grid"] .t26t-tab .nw-pill{font-size:15px!important;letter-spacing:.1em}
/* ── Z30 круг 2: h2 одним кеглем и для заголовков вне .rubric — через общий токен --fs-h2 (Y: «Запись» берёт calc(var(--fs-h2) * var(--u))) */
html[data-zh="grid"]{--fs-h2:54}
@media (max-width:1023.98px){ html[data-zh="grid"]{--fs-h2:36} }
/* ── Z30 круг 2: ритм плит (html[data-zr="bleed"]) — REVIEW30: «11 почти одинаковых белых коробок, нет ни одной ударной секции».
Светлые цветные плиты-события идут до краёв окна: «Отзывы» (плита y30g/y30m), «Запись» (y30k у Y уже такая), «Контакты» (z30f).
Между ними — лист. Содержимое плиты стоит на общей левой линии (внутреннее поле плиты по горизонтали снято). Ширина — тенью псевдоэлемента, обрезанной сверху/снизу: в прокрутку вбок не идёт. */
html[data-zr="bleed"] .y30g-plate{border-radius:0!important;box-shadow:none!important;background:none!important;z-index:0;padding-inline:0!important}
html[data-zr="bleed"] .y30g-plate::before{content:"";position:absolute;z-index:-1;inset:0;background:var(--tt);
box-shadow:0 0 0 calc(100vmax * var(--vwk,1)) var(--tt);clip-path:inset(0 -100vmax);transition:background .45s ease,box-shadow .45s ease} /* тень вместо ширины: в прокрутку вбок не идёт */
html[data-zr="bleed"] .y30c-plate{border-radius:0!important;box-shadow:none!important;background:none!important;z-index:0;padding-inline:0!important}
html[data-zr="bleed"] .y30c-plate::before{content:"";position:absolute;z-index:-1;inset:0;background:#e8eef6;box-shadow:0 0 0 calc(100vmax * var(--vwk,1)) #e8eef6;clip-path:inset(0 -100vmax)}
@media (max-width:1023.98px){ html[data-zr="bleed"] :is(.y30g-plate,.y30c-plate){padding-inline:0!important} }
/* ── Z30 круг 2: формула заголовка (html[data-zt="acc"], разметку ставит leaf30.js) — одно слово курсивом лазурью, остальное тушью прямым.
Тот же приём, что у шапки и у «С чего начать»: на всей странице одна система. Курсив — Garamond заголовков, вес тот же. */
html[data-zt="acc"] :is(.rubric h2, .zd1-h, .y30k-h) em{font-style:italic;font-weight:500;color:var(--azure,#29466f);letter-spacing:-.005em}
/* ── Z30 круг 2: «паспорт» обработки картинок (направление Романа 01.11, bookclub): у всех одна обработка, а не разная.
Картина — в бумажном паспарту (поле листа + кайма тушью 1 px); фигура или вещь — без фона, с одной и той же бумажной тенью.
Переменные для X и Y: --z-mat (поле паспарту), --z-mat-line, --z-obj-shadow. CSS-тонировки картинок нет. */
:root{--z-mat:calc(12 * var(--u));--z-mat-line:rgba(36,38,43,.15);--z-obj-shadow:drop-shadow(calc(6 * var(--u)) calc(12 * var(--u)) calc(11 * var(--u)) rgba(40,34,22,.24))}
/* ── Z30 круг 2: не больше трёх цветных плит на страницу (bookclub: «цветных плиток только 3»). При zr=bleed цветные — «Отзывы», «Запись», «Контакты»;
окно канала в «Между уроками» из бежевой плиты становится листом с каймой (Y в круге 1: «плита канала бежево-серая»). */
html[data-zr="bleed"] #channel .pz-box{background-color:var(--z-card-bg,#fffdf8)!important;box-shadow:inset 0 0 0 1px var(--z-card-line)!important}
/* s0/leaf31.css */
/* прогон 31 — слой поверх leaf30 */
/* ── прогон 31 · rh=d31a / d31c: ОДНА виньетка художника на весь сайт (рецензент 30: «пять разных микросюжетов — скрапбук; оставить один знак»;
Роман 31.10: разделители — от ChatGPT, в тематике сайта). Те же пять стыков, что у gen29, одна картинка. Встаёт в середину ровного шага zg=even. */
html:is([data-rh="d31a"],[data-rh="d31c"]) :is([data-sec="courses"],[data-sec="how"],[data-sec="tests"],[data-sec="prices"],[data-sec="zapis"]):not([hidden])::before{content:"";display:block;
width:calc(420 * var(--u));height:calc(64 * var(--u));margin:calc(var(--sec) * .5 * var(--u)) auto calc(var(--sec) * -.5 * var(--u) + 40 * var(--u));
background:var(--rh31) 50% 50%/contain no-repeat}
html[data-rh="d31a"]{--rh31:url(/s0/img31/rh31-a.webp)}
html[data-rh="d31c"]{--rh31:url(/s0/img31/rh31-c.webp)}
html[data-zg="even"]:is([data-rh="d31a"],[data-rh="d31c"]) main.wrap > [data-sec]:is([data-sec="courses"],[data-sec="how"],[data-sec="tests"],[data-sec="prices"],[data-sec="zapis"]):not([hidden])::before{
height:calc(64 * var(--u))!important;width:calc(420 * var(--u))!important; /* рецензент 31: при 84 виньетка почти касалась стрелок карусели, хвост ленты торчал из-под шапки при переходе к разделу */
margin:calc((var(--zg) - 64) * .5 * var(--u)) auto calc((var(--zg) - 64) * -.5 * var(--u) - 64 * var(--u))!important}
@media (max-width:1023.98px){
html:is([data-rh="d31a"],[data-rh="d31c"]) :is([data-sec="courses"],[data-sec="how"],[data-sec="tests"],[data-sec="prices"],[data-sec="zapis"]):not([hidden])::before{width:80%;height:calc(52 * var(--u))}
html[data-zg="even"]:is([data-rh="d31a"],[data-rh="d31c"]) main.wrap > [data-sec]:is([data-sec="courses"],[data-sec="how"],[data-sec="tests"],[data-sec="prices"],[data-sec="zapis"]):not([hidden])::before{
height:calc(52 * var(--u))!important;width:80%!important;margin:calc((var(--zg) - 52) * .5 * var(--u)) auto calc((var(--zg) - 52) * -.5 * var(--u) - 52 * var(--u))!important}
}
/* ── прогон 31 · заголовки разделов одним кеглем и при zh=as (выбор Романа на пульте 30: номер висит слева).
Раньше при zh=as разделы с урезанной по высоте единицей (--u в «Направлениях», «Преподавателях», «Обучении», «Ценах») давали 52 против 62 на 1710 (REVIEW30 п. 7).
Раскладку «как сейчас» не трогаю — только кегль от единицы страницы --uh. */
html[data-zh="as"] .rubric h2{font-size:calc(var(--fs-h2) * var(--uh))!important}
/* при zh=as заголовок длиннее 16em переносился на вторую строку («Два теста — и весь час на практику», «Английский между уроками» с висячим номером) →
на 1710 «Тесты», «Вопросы», «Между уроками» выходили за экран (806 / 795 / 822). Строка шире, как в zh=grid; раскладка с висячим номером — прежняя. */
html[data-zh="as"] .rubric h2{max-width:22em}
html[data-zh="as"] .rubric .rubric-sub{max-width:48em}
@media (min-width:1024px){ html[data-zh="as"] .rubric{min-height:0!important} }
/* ── прогон 31 · smoke 390: кнопки-названия «Витрины» (courses z30g) 27 px высотой — цель касания < 44 (строка кликабельна целиком через ::after, но сама кнопка мала) */
@media (max-width:1023.98px){ .v-z30g .zv-nm{display:inline-flex!important;align-items:center;min-height:44px!important} }
/* smoke 360: надпись «✛ Запись на пробный урок» над заголовком «Записи» 13,8 px — не меньше 16 */
.v-y31d .zd1-kick{font-size:max(16px, calc(15 * var(--u)))!important}
/* s0/leaf32.css */
/* прогон 32 — слой поверх leaf31 */
/* ── прогон 32 · «Тест уровня»: пол из книг был той же кучей, повторённой вдоль всей картинки (repeat-x) — Роман 01.11: «опять одинаковые кучи книг, слева и справа одна и та же текстура».
Повтор снят: остаётся одна куча под лестницей (своя картинка), без копий. */
:root[data-look=leaf] :is(.v-car25,.v-tiles25) .d7-lv .d7-stage::after{content:none!important;display:none!important}
/* ── прогон 32 · больше воздуха вокруг виньетки (Роман 01.11: «чуть больше расстояния от разделителя до верхней и нижней секции»). Высоты разделов не меняются — растёт только шаг. */
html[data-zg="even"]:is([data-rh="d31a"],[data-rh="d31c"]){--zg:184}
@media (max-width:1023.98px){ html[data-zg="even"]:is([data-rh="d31a"],[data-rh="d31c"]){--zg:104} }
/* ══ T32: таблица ролей текста (редактор-типограф T, прогон 32) ══════════════════════════════════════════════════════
Рецензенты 30–31: «кегли скачут, курсивы-ссылки трёх видов, подписи мелкие, серый текст». Одна таблица — council62/studio/TYPO-32.md.
Переменные — для всех разделов и новых вариантов: font-size: calc(var(--t-body) * var(--ut)).
Пункт пульта «Текст: таблица ролей» (html[data-tt]): t32 — по таблице; t32e — по таблице и «ровно» (на 1710 весь текст как на 1440); as — как было. Цвет текста — тушь; серого нет (состояния
«не выбрано» у вкладок и строк — свои, не трогаю). Шрифты и характер разделов не меняю: только кегль, интерлиньяж, цвет, один вид ссылок. */
/* главная сессия: капитель 16, а не 15 — закон «подписи не мельче 16 px CSS» (ОТК: противоречие таблицы T и COMMON32) */
:root{--t-h2:52; --t-sub:19; --t-h3:40; --t-h3s:30; --t-lead:24; --t-body:18; --t-cap:16; --t-kick:16; --t-link:19; --t-num:46; --t-btn:20;
--t-ink:#24262b; --t-kick-c:#8a6a1f; --t-link-c:#29466f}
@media (max-width:1023.98px){ :root{--t-h2:36; --t-sub:17; --t-h3:30; --t-h3s:24; --t-lead:20; --t-body:17; --t-cap:16; --t-kick:16; --t-link:17; --t-num:36; --t-btn:18} }
/* --ut — единица текста. По умолчанию (tt=t32) — единица самого раздела (--u): на 1710 текст растёт вместе с разделом, а в разделах,
урезанных по высоте экрана, остаётся как на 1440 — высоты не меняются. tt=t32e («ровно») — одна единица на всю страницу,
min(ширина/1440, высота/838): на 1710×838 весь текст как на 1440, заголовки разделов растут (--uh). */
body *{--ut:var(--u)}
html[data-tt="t32e"] body *{--ut:max(.711px, min(calc(calc(100vw * var(--vwk,1)) / 1440), calc(calc(100vh * var(--vwk,1)) / 838)))}
@media (max-width:1023.98px){ html[data-tt="t32e"] body *{--ut:var(--u)} }
/* T32 · подзаголовок раздела: один кегль на всех ширинах (было 18 и 21,4 на 1710 — по разделам), тушь (было #3b3d43) */
html:not([data-tt="as"]) .rubric .rubric-sub{font-size:max(16px, calc(var(--t-sub) * var(--ut)))!important;line-height:1.45!important;color:var(--t-ink)!important}
/* T32 · h3 коробки — 40 (было 40 / 42 / 44: «Тест уровня», «Подарочный сертификат», ответ «Вопросов», «Канал @Cross_Eng», имена преподавателей) */
html:not([data-tt="as"]) :is(.v-x30k .d7-h, .y30a-gift-a > h3, .fq-a .fq-h, .pz-hn, .zf-nm){font-size:calc(var(--t-h3) * var(--ut))!important;line-height:1.08!important}
/* T32 · h3 карточки в ряду — 30 (было 31 / 33: шесть направлений, «Витрина») */
html:not([data-tt="as"]) :is(.zd-card .zd-txt > h3, .zv-nm){font-size:calc(var(--t-h3s) * var(--ut))!important;line-height:1.1!important}
/* T32 · лид — Garamond курсив 24, тушь («Запись»: «Пробный урок – бесплатно…», было 22 серым) */
html:not([data-tt="as"]) .zd1-sub{font-size:calc(var(--t-lead) * var(--ut))!important;line-height:1.3!important;color:var(--t-ink)!important}
/* T32 · основной текст — Brygada 18, тушь (было 16,5 / 17 / 19 / 20 и серым #3b3d43, #3d3f45, #1b1611) */
html:not([data-tt="as"]) :is(.zd-card .zd-txt > p, .zv-p, .v-x30k .d7-p, .fq-t, .y30a-gift-a > p, .pz-lead, .x30h-bx, .h30-steps .h30-s, .y30a-s){
font-size:calc(var(--t-body) * var(--ut))!important;line-height:1.45!important;color:var(--t-ink)!important;text-wrap:pretty}
/* T32 · подпись — Brygada 16, тушь, не меньше 16 px CSS нигде (было 14 / 14,5 / 15 и серым #55524b, #4a4c52) */
html:not([data-tt="as"]) :is(.rv17-who, .b30-note, .zf-st p > span, .v-x30k .d7-st span, .fq-next a > span, .z-consent, .y30d-form .hint, .zd1-meta, .y30a-row dt > i, .ft-small, .ft-small a, .ft-small .since, .ft-hours .st, .ft-slog){
font-size:max(16px, calc(var(--t-cap) * var(--ut)))!important;line-height:1.4!important;color:var(--t-ink)!important}
/* подписи курсивом Garamond — кегль свой (16–18 Garamond = 15–16 Brygada на глаз), только тушь вместо серого */
html:not([data-tt="as"]) :is(.d7-note, .rv17-cnt, .b30-k2, .zf-role, .err-k, .y30a-row dd > small){color:var(--t-ink)!important}
html:not([data-tt="as"]) .nw-pill{font-size:max(16px, calc(16 * var(--ut)))!important}
html:not([data-tt="as"]) .ft-hours .st b{white-space:nowrap} /* «ответим утром» не рвётся: было одно «утром» третьей строкой */
/* T32 · капитель-рубрика — Brygada 500, прописные, разрядка .14em, 15; цвет — тёмное золото или цвет раздела (ярь в «Ценах», лазурь в «Записи») */
html:not([data-tt="as"]) :is(.h30-k, .b30-k > span:not(.b30-k2), .y30-k, .zd1-kick, .pz-k){font-family:var(--f-text)!important;font-weight:500!important;
font-size:max(15px, calc(var(--t-kick) * var(--ut)))!important;line-height:1.3!important;letter-spacing:.14em!important;text-transform:uppercase!important}
html:not([data-tt="as"]) .pz-k{color:var(--t-kick-c)!important}
@media (max-width:1023.98px){ html:not([data-tt="as"]) [data-sec="hero"] .kick{font-size:15px!important} }
/* T32 · курсив-ссылка — один вид на весь сайт: EB Garamond 500 курсив 19, волосяное подчёркивание.
Действие — лазурь (со стрелкой, если она есть в тексте или у .go); «или в Telegram» рядом с кнопкой — тушь, без стрелки.
Было три вида: Brygada 600 прямой лазурью («Записаться бесплатно →»), Brygada курсив серым («или в бот»), Garamond курсив тушью («читать в канале →», «Задать свой вопрос»). */
html:not([data-tt="as"]) :is(.zd-go, .zv-go, .y30a-act > a.go, .y30a-go, .y30a-opts a.go, .fq-a a.go, .fq-ask a.go, .pz-pa, .pz-pa > span, .err-more, .zd-bot){
font-family:var(--f-head)!important;font-style:italic!important;font-weight:500!important;font-size:calc(var(--t-link) * var(--ut))!important;line-height:1.3!important;letter-spacing:0!important}
html:not([data-tt="as"]) :is(.zd-go, .zv-go, .y30a-go, .y30a-opts a.go, .fq-a a.go, .fq-ask a.go, .pz-pa, .err-more){color:var(--t-link-c)!important;
text-decoration:underline!important;text-decoration-thickness:1px!important;text-underline-offset:.24em!important;text-decoration-color:rgba(41,70,111,.42)!important}
html:not([data-tt="as"]) .pz-pa{text-decoration:none!important}
html:not([data-tt="as"]) .pz-pa > span{color:inherit!important}
html:not([data-tt="as"]) .pz-pa > span:first-child{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.24em;text-decoration-color:rgba(41,70,111,.42)}
/* «или в Telegram» — та же ссылка, но тише: тушь, прямой вес 400, без стрелки (рядом с главной кнопкой или ссылкой-действием) */
html:not([data-tt="as"]) :is(.zd-bot, .y30a-act > a.go){color:var(--t-ink)!important;font-weight:400!important;
text-decoration:underline!important;text-decoration-thickness:1px!important;text-underline-offset:.24em!important;text-decoration-color:rgba(36,38,43,.3)!important}
html:not([data-tt="as"]) .y30a-act > a.go::after{content:none!important}
/* стрелка .go («Как устроено обучение →») прилипала к слову: в inline-flex пробел в начале content съедается — отступ полем */
html:not([data-tt="as"]) .go::after{margin-left:.28em}
@media (hover:hover){ html:not([data-tt="as"]) :is(.zd-go, .zv-go, .y30a-go, .y30a-opts a.go, .fq-a a.go, .fq-ask a.go, .pz-pa, .err-more, .zd-bot, .y30a-act > a.go):hover{color:var(--t-link-c)!important;text-decoration-color:currentColor!important} }
/* T32 · заголовок «Записи» — роль h2 раздела: 52 от ширины, как у всех (было 46; рецензент 30 п. 7) */
html:not([data-tt="as"]) .zd1-h{font-size:calc(var(--t-h2) * var(--uh))!important}
/* T32 · «Контакты» на телефоне: список контактов был 13 px серым в две колонки с обрезкой «…» — 16 px тушью в одну колонку, номер телефона целиком */
@media (max-width:1023.98px){ html:not([data-tt="as"]) .v-ft23b1a .ft-list{font-size:max(16px, calc(var(--t-cap) * var(--ut)))!important;grid-template-columns:1fr!important;color:var(--t-ink)!important} }
/* S32 · главная сессия: WhatsApp для РФ скрыт (слово Романа, SYSTEM-17). В ft23b1a класс tz-ru ставился, а правила не было (нашёл инженер выпуска). */
html.tz-ru #contacts li:has(> a[href^="https://wa.me/"]){display:none!important}
/* ══ M32: движение сайта (моушн-дизайнер M, прогон 32) ═════════════════════════════════════════════════════════════════
Одна система для всего движения: токены времени (--m-fast .2s наведение, --m-mid .5s появление, --m-slow .9s), кривых (--m-ease – выход, --m-ease-io – качание), подъёма (--m-rise 14u) и шага (--m-step 70 мс). Пункт пульта «Движение» (html[data-mo]): m32 – по системе, as – как было (без стрелок и проявления).
Только transform/opacity; при prefers-reduced-motion и «Остановить анимацию» (html.still, data-theatre=off) ничего не движется.
Персонажи не парят; ангел не двигается (в шапках с небом отстаёт только фон – подблок «шапки с небом» ниже, свой пункт пульта hm). */
:root{--m-fast:.2s;--m-mid:.5s;--m-slow:.9s;--m-ease:cubic-bezier(.2,.7,.2,1);--m-ease-io:cubic-bezier(.45,0,.55,1);--m-rise:14;--m-step:70ms;--m-bob-t:2.4s}
/* M32 · шапки с небом (sk-tab Фавор, sk-msmw, sk-yar, m32d): пункт пульта «Шапка: углы и фон при прокрутке» (html[data-hm]): m32 (фон отстаёт) / fix (фон стоит, как у Вирджинии) / как сейчас.
Роман 01.11: «Фавор прям сильно сплошной… посмотри шапку Вирджинии: фоновый элемент коробки при прокрутке поднимается и опускается, а основные
изображения и текст остаются сверху» + «в шапке слишком резкие углы – закруглить, как у остальных коробок».
Коробка: углы токеном --box-r (Z; запас – 10u страницы, как у .plate, «Тестов», «Вопросов», «Записи», «Канала»; на телефоне 8u), кромка чёткая (без маски-растворения снизу).
Стоят ангел, облака, текст и кнопка (едут с коробкой). Отстаёт только фон: небо k = 0,55, гора / аббатство k = 0,3 – на сколько коробка ушла вверх,
столько × k фон опускается внутри неё; слои ниже текста по z и уходят прочь от него, на текст и кнопки не заезжают.
Запас неба сверху 14 % коробки (ярь – 24 %): верх коробки уходит из экрана быстрее, чем опускается небо, кромки неба не видно (замер – REPORT-M).
Туман у подножия (Фавор, Мон-Сен-Мишель): под колонкой текста земля светлеет, низ коробки не сплошной; стоит вместе с коробкой.
Только transform; движение от 1024 px; при reduced-motion и «Остановить анимацию» фон стоит. CSS scroll-timeline, без поддержки – leaf32.js (rAF).
«Голая» angel18 без коробки и фона – её не трогает (рядом новая m32d «светлое небо»). */
html:is([data-hm="m32"],[data-hm="fix"]) [data-sec="hero"] .v-sky28{--m-R:calc(120vh * var(--vwk,1));--m-ks:.55;--m-kl:.3}
/* «как у Вирджинии»: небо стоит на экране (k = 1), гора почти стоит (k = 0,6) – коробка с ангелом и текстом едет поверх */
html[data-hm="fix"] [data-sec="hero"] .v-sky28{--m-ks:1;--m-kl:.6}
html:is([data-hm="m32"],[data-hm="fix"]) [data-sec="hero"] .v-sky28.v-angel17.hero{border-radius:var(--box-r, calc(var(--r) * max(.711px, calc(calc(100vw * var(--vwk,1)) / 1440))))!important;
-webkit-mask-image:none!important;mask-image:none!important;overflow:hidden;overflow:clip;isolation:isolate}
html:is([data-hm="m32"],[data-hm="fix"]) [data-sec="hero"] .v-sky28 > :is(.sky28,.land28,.m32-mist){border-radius:inherit}
@media (max-width:1023.98px){
html:is([data-hm="m32"],[data-hm="fix"]) [data-sec="hero"] .v-sky28.v-angel17.hero{border-radius:var(--box-r, calc(var(--r) * clamp(.8px, calc(calc(100vw * var(--vwk,1)) / 390), 1.35px)))!important}
}
@media (min-width:1024px){
html:is([data-hm="m32"],[data-hm="fix"]) [data-sec="hero"] .v-sky28 .sky28{overflow:visible}
html:is([data-hm="m32"],[data-hm="fix"]) [data-sec="hero"] .v-sky28:not(.sky28-yar) .sky28 img{top:-14%;height:128%}
html:is([data-hm="m32"],[data-hm="fix"]) [data-sec="hero"] .v-sky28.sky28-yar .sky28 img{top:-24%!important;height:125%!important}
}
.m32-mist{display:none}
@media (min-width:1024px){
html:is([data-hm="m32"],[data-hm="fix"]) [data-sec="hero"] .m32-mist{display:block;position:absolute;z-index:-1;left:0;right:0;bottom:0;height:58%;pointer-events:none;
background:radial-gradient(64% 78% at 20% 100%, rgba(251,248,241,.8) 0, rgba(251,248,241,.58) 42%, rgba(251,248,241,0) 76%)}
}
@keyframes m32-par{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,calc(var(--m-R,calc(120vh * var(--vwk,1))) * var(--m-k,.5)),0)}}
@supports (animation-timeline: scroll()){
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){
html:is([data-hm="m32"],[data-hm="fix"]):not(.still):not([data-theatre="off"]) [data-sec="hero"] .v-sky28 .sky28 img{--m-k:var(--m-ks);animation:m32-par linear both;animation-timeline:scroll(root);animation-range:0 var(--m-R);will-change:transform}
html:is([data-hm="m32"],[data-hm="fix"]):not(.still):not([data-theatre="off"]) [data-sec="hero"] .v-sky28 .land28{--m-k:var(--m-kl);animation:m32-par linear both;animation-timeline:scroll(root);animation-range:0 var(--m-R);will-change:transform}
}
}
@media (prefers-reduced-motion:reduce){ [data-sec="hero"] .v-sky28 :is(.sky28 img,.land28){animation:none!important;transform:none!important} }
html:is(.still,[data-theatre="off"]) [data-sec="hero"] .v-sky28 :is(.sky28 img,.land28){animation:none!important;transform:none!important}
@media (max-width:1023.98px){ [data-sec="hero"] .v-sky28 :is(.sky28 img,.land28){animation:none!important;transform:none!important} }
/* M32 · стрелка у главных кнопок записи (Роман 01.11: «стрелка-треугольник под “Записаться”: шевелится и показывает на следующую секцию»).
Свой знак: плотный раскрытый шеврон тёмным золотом, две грани по 3 px (у Вирджинии – тонкая белая галочка-GIF 51×26); без стержня – линия не читается как разделитель.
Качается на 9u за 2,4 с; при наведении на кнопку опускается и чуть растёт. Два места:
шапка – под кнопкой, ведёт к следующему разделу; «Вопросы» – в самой кнопке «Записаться на пробный» вместо «→» (ниже сразу «Запись»; под кнопкой места нет).
Вставляет leaf32.js; разметку разделов не меняет. */
.m32-arr{display:inline-block;position:relative;vertical-align:middle;width:calc(var(--m-aw,26) * var(--u));height:calc(var(--m-aw,26) * var(--u) * .5 + var(--m-sw,3px));
min-width:14px;min-height:9px;color:inherit;font-style:normal;animation:m32-bob var(--m-bob-t) var(--m-ease-io) infinite}
.m32-arr::after{content:"";position:absolute;left:50%;top:0;box-sizing:border-box;width:calc(var(--m-aw,26) * var(--u) * .7071);height:calc(var(--m-aw,26) * var(--u) * .7071);
min-width:10px;min-height:10px;border-right:var(--m-sw,3px) solid currentColor;border-bottom:var(--m-sw,3px) solid currentColor;border-radius:0 0 2px 0;translate:-50% -50%;rotate:45deg}
@keyframes m32-bob{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,calc(var(--m-amp,9) * var(--u)),0)}}
.m32-chev{position:absolute;z-index:5;left:var(--m-cx,50%);top:calc(var(--m-cy,100%) + var(--m-cg,14) * var(--u));width:48px;height:max(44px, calc(var(--m-aw,26) * var(--u) * .5 + var(--m-amp,9) * var(--u) + 14px));margin-left:-24px;
display:flex;justify-content:center;align-items:flex-start;padding-top:4px;box-sizing:border-box;color:var(--m-chev-c,#8a6a1f);cursor:pointer;border-radius:8px;
transition:transform var(--m-fast) var(--m-ease),color var(--m-fast) var(--m-ease);-webkit-tap-highlight-color:transparent}
.m32-chev:hover,.m32-cta-host:has([data-m32-cta]:hover) .m32-chev{transform:translate3d(0,calc(4 * var(--u)),0) scale(1.16);color:var(--m-chev-h,#29466f)}
.m32-chev:focus-visible{outline:2px solid #29466f;outline-offset:2px}
.sky28-yar .m32-chev{--m-chev-c:#e6c77a;--m-chev-h:#fbf8f1}
/* «Вопросы»: в кнопке вместо «→» та же стрелка, что у соседних ссылок «Пройди тест уровня →», только вниз – стержень и наконечник
(шеврон внутри кнопки читался бы как «раскрыть список»); цвет кнопки, на заливке при наведении – кость */
html[data-mo="m32"] [data-sec="faq"] [data-m32-cta] b::after{content:none!important}
.m32-arr.m32-arr-s{width:calc(10 * var(--u));height:calc(17 * var(--u));min-width:9px;min-height:15px;margin-left:.42em;margin-top:-.12em;--m-amp:3}
.m32-arr.m32-arr-s::before{content:"";position:absolute;left:50%;top:0;bottom:1px;width:2px;margin-left:-1px;background:currentColor;border-radius:1px}
.m32-arr.m32-arr-s::after{top:auto;bottom:calc(10 * var(--u) * .2 + 1px);width:calc(10 * var(--u) * .72);height:calc(10 * var(--u) * .72);min-width:7px;min-height:7px;
border-width:0 2px 2px 0;border-radius:0;translate:-50% 0}
html:not([data-mo="m32"]) :is(.m32-chev,.m32-arr){display:none}
@media (max-width:1023.98px){ .m32-chev{--m-cg:10;--m-aw:22;--m-amp:6} }
/* M32 · проявление разделов: один раз, тихо – рубрика, затем содержимое (шаг --m-step), подъём 14u + прозрачность за 0,5 с (X: «Тесты» на 1710 ровно 778 – сдвиг малый).
Коробки, где уже есть своё появление (.rise в «Тестах» и «Ценах»), не трогаются; шапка и подвал – без проявления.
Классы ставит leaf32.js и снимает после показа; что в экране при загрузке – показано сразу. */
html[data-mo="m32"].m32-rv-on .m32-rv:not(.m32-in){opacity:0;transform:translate3d(0,calc(var(--m-rise) * var(--u)),0)}
html[data-mo="m32"].m32-rv-on .m32-rv{transition:opacity var(--m-mid) var(--m-ease),transform var(--m-mid) var(--m-ease);transition-delay:calc(var(--m-i,0) * var(--m-step))}
/* прежнее появление .rise («Тесты», «Цены», system.js) – на те же токены: подъём 14u вместо 32u, время, кривая и шаг – общие */
@media (prefers-reduced-motion:no-preference){
html[data-mo="m32"].js:not(.still):not([data-theatre="off"]) .rise:not(.is-in){transform:translate3d(0,calc(var(--m-rise) * var(--u)),0)}
html[data-mo="m32"].js .rise{transition-duration:var(--m-mid);transition-timing-function:var(--m-ease);transition-delay:calc(var(--i,0) * var(--m-step))}
}
@media print{ .m32-rv{opacity:1!important;transform:none!important} }
/* M32 · блик ангела (прогон 25, g25-glint; Роман 29.10: «нимб, золото крыльев… раньше сияли»): тот же медленный блик по золоту,
но только прозрачностью – две мягкие полосы света вспыхивают по очереди справа налево (было: background-position, замечание ОТК Ч17).
Ничего внутри ангела не едет (Ч18): ангел и его свет стоят, меняется только яркость. */
.g25-glint{background:rgba(255,206,110,.42)!important;animation:none!important}
.g25-glint::before,.g25-glint::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
background:linear-gradient(104deg,rgba(255,240,190,0) 0,rgba(255,240,190,0) var(--ga),rgba(255,248,222,.95) var(--gb),rgba(255,240,190,0) var(--gc),rgba(255,240,190,0) 100%)}
.g25-glint::before{--ga:46%;--gb:60%;--gc:74%;animation:m32-glint-a 7.5s ease-in-out infinite}
.g25-glint::after{--ga:20%;--gb:34%;--gc:48%;animation:m32-glint-b 7.5s ease-in-out infinite}
@keyframes m32-glint-a{0%,24%{opacity:0}38%{opacity:1}54%,100%{opacity:0}}
@keyframes m32-glint-b{0%,40%{opacity:0}56%{opacity:1}72%,100%{opacity:0}}
/* M32 · крючки движения от прокрутки для разделителей и предметов (P): CSS view-timeline, без JS (Ж24).
[data-m-spin] – поворот на --m-spin (90° по умолчанию) за проход через экран, в середине экрана стоит прямо;
[data-m-sway] – качание ±--m-sway (6°); [data-m-in] – тихий вход: из прозрачности и на 14u ниже, пока входит в экран.
Для ::before / ::after – те же ключевые кадры: animation: m32-spin linear both; animation-timeline: view(); animation-range: cover 0% cover 100%.
Свойства rotate / translate отдельные – не спорят с transform, которым предмет поставлен на место. */
@keyframes m32-spin{from{rotate:calc(var(--m-spin,90deg) * -.5)}to{rotate:calc(var(--m-spin,90deg) * .5)}}
@keyframes m32-sway{0%,100%{rotate:calc(var(--m-sway,6deg) * -1)}50%{rotate:var(--m-sway,6deg)}}
@keyframes m32-in{from{opacity:0;translate:0 calc(14 * var(--u))}to{opacity:1;translate:0 0}}
@supports (animation-timeline: view()){
@media (prefers-reduced-motion:no-preference){
html[data-mo="m32"]:not(.still):not([data-theatre="off"]) [data-m-spin]{animation:m32-spin linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
html[data-mo="m32"]:not(.still):not([data-theatre="off"]) [data-m-sway]{animation:m32-sway linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
html[data-mo="m32"]:not(.still):not([data-theatre="off"]) [data-m-in]{animation:m32-in linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
/* виньетки d31a / d31c (выбор Романа – одна на пяти стыках) и семья p32 (P): тихо входят снизу, пока стык входит в экран */
html[data-mo="m32"]:is([data-rh="d31a"],[data-rh="d31c"]):not(.still):not([data-theatre="off"]) :is([data-sec="courses"],[data-sec="how"],[data-sec="tests"],[data-sec="prices"],[data-sec="zapis"]):not([hidden])::before,
html[data-mo="m32"][data-rh="p32"]:not(.still):not([data-theatre="off"]) main.wrap > [data-sec]:not([hidden])::before{
animation:m32-in linear both;animation-timeline:view();animation-range:entry 10% entry 90%}
}
}
@media (prefers-reduced-motion:reduce){ .m32-arr,.g25-glint::before,.g25-glint::after{animation:none} .m32-rv{opacity:1!important;transform:none!important;transition:none!important} }
html:is(.still,[data-theatre="off"]) :is(.m32-arr,.g25-glint::before,.g25-glint::after){animation:none}
html:is(.still,[data-theatre="off"]) .m32-rv{opacity:1!important;transform:none!important;transition:none!important}
/* ══ P32: художник-постановщик P (прогон 32) – семья виньеток (rh=p32) и крупные предметы (html[data-po]) ══════════════════════════ */
/* P32 · rh=p32 – семья виньеток одной руки (художник: g30-divider-a/b/c, g32-divider-d/e-a): на каждом стыке своя, повторов нет
(Роман 01.11: «их нужно побольше сделать, чтобы не повторялись»; «больше расстояния от разделителя до соседних секций»).
Те же пять стыков, что у d31a, – сравнение подобного с подобным. Один размер = один «вес»: площадь каждой ≈ 32 000 u², ширина и высота
по её пропорции (узкая книга с ключом шире и ниже, фонарь и глобус выше и уже). Одна обработка: рисунок художника как есть, без тени и фильтров.
Шаг 240u (было 184): воздух до и после виньетки 77–89u (у Вирджинии 65–80 px).
Смысл стыка: «Направления» – книга с ключом (ключ к знанию, начало), «Обучение» – глобус с лентой (урок онлайн из любой точки мира),
«Тесты» – фонарь (тест освещает уровень), «Цены» – книга с лозой (притча о работниках в винограднике: честная плата),
«Запись» – свиток с пером и чернильницей (вписать себя). */
html[data-rh="p32"]{--zg:240}
html[data-rh="p32"] [data-sec="courses"]{--p-rh:url(/s0/img32/p32-rh-c.webp);--p-rw:516;--p-rhh:62}
html[data-rh="p32"] [data-sec="how"]{--p-rh:url(/s0/img32/p32-rh-f.webp);--p-rw:388;--p-rhh:82} /* главная сессия: глобус заново (художник, круг 2: XVI век, Старый Свет, лента уже) */
html[data-rh="p32"] [data-sec="channel"]{--p-rh:url(/s0/img32/p32-rh-g.webp);--p-rw:474;--p-rhh:68} /* шестая: колокольчик — звонок между уроками */
html[data-rh="p32"] [data-sec="tests"]{--p-rh:url(/s0/img32/p32-rh-d.webp);--p-rw:422;--p-rhh:76}
html[data-rh="p32"] [data-sec="prices"]{--p-rh:url(/s0/img32/p32-rh-a.webp);--p-rw:447;--p-rhh:72}
html[data-rh="p32"] [data-sec="zapis"]{--p-rh:url(/s0/img32/p32-rh-b.webp);--p-rw:482;--p-rhh:66}
html[data-rh="p32"] main.wrap > [data-sec]:is([data-sec="courses"],[data-sec="how"],[data-sec="tests"],[data-sec="prices"],[data-sec="zapis"],[data-sec="channel"]):not([hidden])::before{
content:"";display:block;width:calc(var(--p-rw) * var(--u));height:calc(var(--p-rhh) * var(--u));max-width:92%;
margin:calc((var(--zg) - var(--p-rhh)) * .5 * var(--u)) auto calc((var(--zg) - var(--p-rhh)) * -.5 * var(--u) - var(--p-rhh) * var(--u));
background:var(--p-rh) 50% 50%/contain no-repeat;pointer-events:none}
/* при шаге «как сейчас» (zg=as) виньетка берёт место сама: 48u до и после (у d31a в этом режиме она наезжала на заголовок «Направлений») */
html[data-rh="p32"]:not([data-zg="even"]) main.wrap > [data-sec]:is([data-sec="courses"],[data-sec="how"],[data-sec="tests"],[data-sec="prices"],[data-sec="zapis"],[data-sec="channel"]):not([hidden])::before{
margin:calc(48 * var(--u)) auto calc(48 * var(--u))}
html[data-rh="p32"]:not([data-zg="even"]) main.wrap > [data-sec="courses"]:is([data-sec]):not([hidden])::before{margin-bottom:calc(108 * var(--u))} /* «Направления» в этом режиме подтянуты к шапке на −60 px */
@media (max-width:1023.98px){
/* телефон: та же семья, площадь ≈ 13 000 u² (u = 1 px на 390) – самая широкая книга с ключом 329 px, самый высокий глобус 55 px; воздух ≥ 44 px */
html[data-rh="p32"]{--zg:144}
html[data-rh="p32"] [data-sec="courses"]{--p-rw:329;--p-rhh:40}
html[data-rh="p32"] [data-sec="how"]{--p-rw:247;--p-rhh:53}
html[data-rh="p32"] [data-sec="channel"]{--p-rw:302;--p-rhh:43}
html[data-rh="p32"] [data-sec="tests"]{--p-rw:269;--p-rhh:48}
html[data-rh="p32"] [data-sec="prices"]{--p-rw:285;--p-rhh:46}
html[data-rh="p32"] [data-sec="zapis"]{--p-rw:307;--p-rhh:42}
}
/* P32 · крупные предметы (пункт пульта «Фоновые предметы», html[data-po]: on – есть, off – нет). Роман 01.11: «у нас мало крутых 2D-элементов
на фоне сайта… нам нужно это догнать». Настоящие PD-вещи (Мет, Рейксмузеум), вырезка начисто (IS-Net + ажур вручную по фону), одна обработка:
без фона, живая тень бумаги (drop-shadow, без смены цвета). Только в разделах без своей крупной картинки; целиком видны; на текст и кнопки
не ложатся; лежат через кромку коробки. Стоячие вещи – только на кромке (не висят в воздухе), плоские (перо) лежат на листе.
Элементы вставляет leaf32.js (блок P32) во все варианты раздела; место – переменные --p-x/--p-y/--p-w (в u от раздела), выключить в своём
варианте – .v-<ключ> .p32-obj{display:none}. Крючки M: вход (data-m-in) – на обёртке, качание (data-m-sway, --m-sway) – на картинке. На телефоне предметов нет (Роман: «мобильная версия… резать нещадно», REJ В). */
.p32-obj{position:absolute;z-index:3;left:calc(var(--p-x) * var(--u));top:calc(var(--p-y) * var(--u));width:calc(var(--p-w) * var(--u));
pointer-events:none;line-height:0;user-select:none;-webkit-user-select:none}
.p32-obj img{display:block;width:100%;height:auto;filter:drop-shadow(0 calc(5 * var(--u)) calc(6 * var(--u)) rgba(36,38,43,.20)) drop-shadow(0 calc(1 * var(--u)) calc(1 * var(--u)) rgba(36,38,43,.18))}
html:not([data-po="on"]) .p32-obj{display:none}
@media (max-width:1023.98px){ .p32-obj{display:none!important} }
/* «Отзывы» (k26n): наградное перо (серебро, Амстердам 1730; Рейксмузеум NG-NM-12264, PD) лежит над лентой, кончик пера – на кромке третьей карточки
(отзывы пишут). Длина 470u = 81 % высоты раздела; на заголовок, подзаголовок и текст карточек не заходит. */
[data-sec="reviews"] .p32-o-quill{--p-x:780;--p-y:-16;--p-w:470}
[data-sec="reviews"] .p32-o-quill img{transform-origin:97% 94%;--m-sway:2deg}
/* «Тесты» (x30k): весы (латунь, сталь, мрамор, ок. 1845–1855; Мет 2013.960.2a–f, CC0) стоят на верхней кромке коробки у правого угла –
тест как мерило уровня. Высота 300u = 41 % высоты раздела; основание чуть заходит на коробку, правая чаша – за её кромку;
в полосе заголовка справа (заголовок кончается на 857u), до «Тест уровня» и до виньетки стыка не доходят. Качание ±3° от прокрутки (M). */
[data-sec="tests"] .p32-o-scale{--p-x:1060;--p-y:-151;--p-w:320}
[data-sec="tests"] .p32-o-scale img{transform-origin:50% 100%;--m-sway:3deg}
/* ══ Z32: общий слой дизайнера Z (прогон 32) ═════════════════════════════════════════════════════════════════════════
(б) единый радиус углов коробок — токен (Роман 01.11: «в шапке слишком острые углы, остальные коробки круглые»).
10u на ПК, 8u на телефоне — как у .plate, «Тестов», «Вопросов», «Записи», «Канала». Шапку закругляет M этим токеном. */
:root{--box-r:calc(var(--r) * var(--u))}
/* Z32 · (а) цветные плиты (Роман 01.11: «красивую зелёную ярь с классным фоном сзади – как ангел с ярью – попробовать по секциям… чтобы по стилю вписывалось»).
Пункт пульта «Цветные плиты» (html[data-zp]): yar – ярь, az – лазурь, as – как сейчас (плит нет). Не больше трёх на страницу; сейчас две:
«Отзывы» – густая полупрозрачная краска поверх гравюры тоном (приём шапки «Ярь»: гравюра под краской 88 %), окошки отзывов – кость на плите;
второй экран «Между уроками» (z32d) и «Запись» – светлая краска по пергаменту страницы (18 %), коробки – лист. Плита до краёв окна (как выбранный тобой zr=bleed):
краска – тенью псевдоэлемента, обрезанной сверху и снизу, в прокрутку вбок не идёт; гравюра – только в пределах сетки, края растворяются в краску.
Плит три: «Отзывы», «Запись», второй экран «Между уроками» – не подряд (между «Записью» и тремя коробками – окно канала на листе). Высоты разделов не меняются – плита рисуется вокруг. */
html[data-zp="yar"]{--zp-deep:rgba(44,90,78,.88);--zp-light:rgba(44,90,78,.18);--zp-acc:#e6c77a}
html[data-zp="az"]{--zp-deep:rgba(41,70,111,.88);--zp-light:rgba(41,70,111,.13);--zp-acc:#e6c77a}
html[data-zp="mix"]{--zp-deep:rgba(44,90,78,.88);--zp-light:rgba(44,90,78,.18);--zp-acc:#e6c77a;--zp-deep2:rgba(41,70,111,.9)}
html:is([data-zp="yar"],[data-zp="az"],[data-zp="mix"]) [data-sec="reviews"] > section{position:relative;isolation:isolate}
html:is([data-zp="yar"],[data-zp="az"],[data-zp="mix"]) [data-sec="reviews"] > section::before{content:"";position:absolute;z-index:-2;left:calc(-36 * var(--u));right:calc(-36 * var(--u));
top:calc(-84 * var(--u));bottom:calc(-56 * var(--u));background:url(/s0/img32/zp-bodleian-2000.webp) 50% 0 / auto 150% no-repeat;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
html:is([data-zp="yar"],[data-zp="az"],[data-zp="mix"]) [data-sec="reviews"] > section::after{content:"";position:absolute;z-index:-1;left:0;right:0;top:calc(-84 * var(--u));bottom:calc(-56 * var(--u));
background:var(--zp-deep);box-shadow:0 0 0 calc(100vmax * var(--vwk,1)) var(--zp-deep);clip-path:inset(0 -100vmax);pointer-events:none}
/* текст на густой плите – кость, слово-акцент заголовка и номер – золото (как на шапке «Ярь») */
html:is([data-zp="yar"],[data-zp="az"],[data-zp="mix"]) [data-sec="reviews"] .rubric h2{color:#fbf8f1!important}
html:is([data-zp="yar"],[data-zp="az"],[data-zp="mix"]) [data-sec="reviews"] .rubric h2 em{color:var(--zp-acc)!important}
html:is([data-zp="yar"],[data-zp="az"],[data-zp="mix"]) [data-sec="reviews"] .rubric :is(.num,.fol,.fol::before){color:var(--zp-acc)!important}
html:is([data-zp="yar"],[data-zp="az"],[data-zp="mix"]) [data-sec="reviews"] .rubric .rubric-sub{color:#fbf8f1!important}
html:is([data-zp="yar"],[data-zp="az"],[data-zp="mix"]) [data-sec="reviews"] .rv17-cnt{color:#fbf8f1!important}
html:is([data-zp="yar"],[data-zp="az"],[data-zp="mix"]) [data-sec="reviews"] .rv17-ar{color:#fbf8f1!important;border-color:rgba(251,248,241,.7)!important;background:transparent!important}
@media (hover:hover){ html:is([data-zp="yar"],[data-zp="az"],[data-zp="mix"]) [data-sec="reviews"] .rv17-ar:hover:not([aria-disabled="true"]){background:#fbf8f1!important;color:#24262b!important} }
html:is([data-zp="yar"],[data-zp="az"],[data-zp="mix"]) [data-sec="reviews"] .rv17-ar:focus-visible{outline-color:#fbf8f1!important}
/* окошки отзывов на краске: чище бумага, тень мягче, чтобы не «плавали» */
html:is([data-zp="yar"],[data-zp="az"],[data-zp="mix"]) [data-sec="reviews"] .rv17-card{background:#fffdf8!important;box-shadow:0 1px 0 rgba(0,0,0,.06),0 10px 24px rgba(10,24,20,.16)!important}
/* второй экран «Между уроками» (z32d): светлая краска по пергаменту, до краёв окна */
html:is([data-zp="yar"],[data-zp="az"],[data-zp="mix"]) #channel .z32-tri{isolation:isolate}
html:is([data-zp="yar"],[data-zp="az"]) #channel .z32-tri::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:calc(-44 * var(--u));bottom:calc(-44 * var(--u));
background:var(--zp-light);box-shadow:0 0 0 calc(100vmax * var(--vwk,1)) var(--zp-light);clip-path:inset(0 -100vmax);pointer-events:none}
/* «Запись» (третья плита, по просьбе Y): светлая краска по пергаменту, как второй экран «Между уроками»; текст и «Ч» остаются тёмными – варианты Y проверяет на ней сам */
html:is([data-zp="yar"],[data-zp="az"],[data-zp="mix"]) [data-sec="zapis"] > section{position:relative;isolation:isolate}
html:is([data-zp="yar"],[data-zp="az"],[data-zp="mix"]) [data-sec="zapis"] > section::after{content:"";position:absolute;z-index:-1;left:0;right:0;top:calc(-48 * var(--u));bottom:calc(-48 * var(--u));
background:var(--zp-light);box-shadow:0 0 0 calc(100vmax * var(--vwk,1)) var(--zp-light);clip-path:inset(0 -100vmax);pointer-events:none}
@media (max-width:1023.98px){
html:is([data-zp="yar"],[data-zp="az"],[data-zp="mix"]) [data-sec="reviews"] > section::before{left:calc(var(--gut) * -1 * var(--u));right:calc(var(--gut) * -1 * var(--u));top:-44px;bottom:-40px;
-webkit-mask-image:none;mask-image:none;background-size:auto 100%;background-position:30% 0}
html:is([data-zp="yar"],[data-zp="az"],[data-zp="mix"]) [data-sec="reviews"] > section::after{top:-44px;bottom:-40px}
html:is([data-zp="yar"],[data-zp="az"]) #channel .z32-tri::before{top:-28px;bottom:-28px}
html:is([data-zp="yar"],[data-zp="az"],[data-zp="mix"]) [data-sec="zapis"] > section::after{top:-28px;bottom:-28px}
}
/* Z32 · (в) пропорции: поле страницы на телефоне 16 px (было 12 при zh=as; закон «текст не ближе 16 px к краю», ОТК Ч11: «Преподаватели», «Обучение» и др.).
Разделы считают ширину от --gut – подстраиваются сами; на ПК поле не меняется. */
@media (max-width:1023.98px){ :root{--gut:16} }
/* Z32 · «Цветные плиты» – значение mix (дозадание 02.11: «светлая ярь серо-зелёная и без фактуры, все три плиты зелёные; Роман: «поиграться с другими цветами»»).
«Отзывы» – густая ярь поверх Бодлианской библиотеки (как yar), «Запись» – светлая ярь (как yar), второй экран «Между уроками» – густая лазурь 90 %
поверх гравюры Вредемана де Фриса «Аркада» (ок. 1560, Рейксмузеум, PD: галерея с колоннами – «между уроками» гуляют по галерее) – коробки-листы на синей плите.
Две густые плиты не подряд (IV и IX), между ними – лист. Гравюра – в пределах сетки, края растворяются в краску. Старые значения yar/az не меняются. */
html[data-zp="mix"] #channel .z32-tri{isolation:isolate}
html[data-zp="mix"] #channel .z32-tri::before{content:"";position:absolute;z-index:-2;left:calc(-36 * var(--u));right:calc(-36 * var(--u));top:calc(-56 * var(--u));bottom:calc(-56 * var(--u));
background:url(/s0/img32/zp-arcade-1200.webp) 50% 58% / cover no-repeat;pointer-events:none;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
html[data-zp="mix"] #channel .z32-tri::after{content:"";position:absolute;z-index:-1;left:0;right:0;top:calc(-56 * var(--u));bottom:calc(-56 * var(--u));
background:var(--zp-deep2);box-shadow:0 0 0 calc(100vmax * var(--vwk,1)) var(--zp-deep2);clip-path:inset(0 -100vmax);pointer-events:none}
html[data-zp="mix"] #channel .z32-box{box-shadow:0 1px 0 rgba(0,0,0,.06),0 12px 28px rgba(10,18,36,.22)}
@media (max-width:1023.98px){
html[data-zp="mix"] #channel .z32-tri::before{left:calc(var(--gut) * -1 * var(--u));right:calc(var(--gut) * -1 * var(--u));top:-32px;bottom:-32px;-webkit-mask-image:none;mask-image:none;background-size:auto 60%;background-repeat:no-repeat;background-position:50% 0}
html[data-zp="mix"] #channel .z32-tri::after{top:-32px;bottom:-32px}
}
/* S32 · знак перехода «роза» (художник, круг 2; заказ P; Роман 29.10: «венок, розетка… крутится»): тюдоровская роза на верхней кромке
цветной плиты «Отзывов» – переход из листа в цвет. Только при семье виньеток p32 и включённых плитах. Поворачивается от прокрутки
(ключевые кадры M m32-spin, ±45°), при reduced-motion / «Остановить анимацию» – стоит. На телефоне меньше. */
html[data-rh="p32"]:is([data-zp="yar"],[data-zp="az"]) main.wrap > [data-sec="reviews"]{position:relative}
html[data-rh="p32"]:is([data-zp="yar"],[data-zp="az"]) main.wrap > [data-sec="reviews"]:not([hidden])::before{
content:"";position:absolute;z-index:4;left:50%;top:calc(-84 * var(--u));width:calc(104 * var(--u));height:calc(104 * var(--u));
margin:calc(-52 * var(--u)) 0 0 calc(-52 * var(--u));background:url(/s0/img32/p32-rose-600.webp) 50% 50%/contain no-repeat;pointer-events:none;
filter:drop-shadow(0 calc(3 * var(--u)) calc(5 * var(--u)) rgba(16,32,26,.28))}
@media (max-width:1023.98px){
html[data-rh="p32"]:is([data-zp="yar"],[data-zp="az"]) main.wrap > [data-sec="reviews"]:not([hidden])::before{top:-44px;width:64px;height:64px;margin:-32px 0 0 -32px}
}
@supports (animation-timeline: view()){ @media (prefers-reduced-motion:no-preference){
html[data-mo="m32"][data-rh="p32"]:is([data-zp="yar"],[data-zp="az"]):not(.still):not([data-theatre="off"]) main.wrap > [data-sec="reviews"]:not([hidden])::before{
--m-spin:90deg;animation:m32-spin linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
} }
/* S32 · серебряное перо на густой плите «Отзывов» читается серым призраком (кадр главной сессии 02.11) – при включённых плитах перо не ставим; без плит – как у P */
html:is([data-zp="yar"],[data-zp="az"]) [data-sec="reviews"] .p32-o-quill{display:none!important}
/* S32 · надзаголовок шапки «Онлайн-школа английского · с 2019 года» – 16 px, как все капители (ОТК фаза 2: было 15) */
html:not([data-tt="as"]) #hero :is(.t-kicker, .t-kicker .y){font-size:max(16px, calc(var(--t-kick, 16) * var(--ut, var(--u))))!important}
/* S32 · надзаголовок «Онлайн-школа английского» на небе читался слабо (рецензент: контраст ≈ 3,1 на ПК, 2,4 на телефоне) – мягкий ореол цвета кости
вокруг букв, цвет и кегль те же. Не на яри (там надзаголовок светлый по тёмному). */
[data-sec="hero"]:not([data-key="sk-yar"]) #hero .t-kicker{text-shadow:0 0 calc(7 * var(--u)) rgba(251,248,241,.95),0 0 2px rgba(251,248,241,.95)}
/* S32 · фокус с клавиатуры виден везде: не тоньше 3 px (рецензент: местами ≈ 1 px); цвет – как задал раздел */
html :focus-visible{outline-width:3px!important;outline-offset:2px}
/* s0/leaf33.css */
/* прогон 33 — слой поверх leaf32 */
/* S33 · главная сессия: подвал на телефоне без дубля контактов текстом (Роман 02.11: «у нас есть кнопки, зачем нам дублировать ссылки текстом… дублируем то, что на сайте, просто аккуратно, без лишнего»).
Остаются круглые кнопки, часы, разделы и документы — как на ПК. */
@media (max-width:1023.98px){ #contacts .ft-list:has(a[href^="https://t.me/Cross_Eng"]){display:none!important} }
/* S33 · глобус Nano Banana 2 (приложение Gemini, 02.11) на стыке «Отзывы → Обучение» — пункт пульта «Глобус» (Роман: «как один из вариантов в пульт, и я сравню»).
Полоса 9,6:1 одним куском; фон бумаги снят (цвет не трогали). Тот же «вес», что у семьи p32: площадь ≈ 32 000 u², на телефоне ≈ 13 000. */
html[data-rh="p32"][data-gb="nb"] [data-sec="how"]{--p-rh:url(/s0/img33/p32-rh-nb.webp);--p-rw:554;--p-rhh:58}
@media (max-width:1023.98px){ html[data-rh="p32"][data-gb="nb"] [data-sec="how"]{--p-rw:353;--p-rhh:37} }
/* ══ H33: шапка (дизайнер H, прогон 33) ════════════════════════════════════════════════════════════════════════════════
Роман 02.11 по шапке: (1) «облака под ангелом гуще – там, где у ангела продолжение тела, не должно быть видно ничего» (скрин 0-hero-clouds);
(2) «когда опускаем, ангел с облаками вверх уходят» – новое значение h33 пункта hm; (3) «шапка на телефоне – в один экран» – пункт «Шапка на телефоне» (ht).
Действует на шапки с небом (.v-sky28: Фавор, светлое небо m32d, Мон-Сен-Мишель, ярь); «голая» angel18 не меняется. Ангел не двигается. */
/* H33 · (1) облака под ангелом гуще – пункт «Облака под ангелом» (html[data-hc]): h33 (по умолчанию) / as – как было.
Было: гряда облаков гасла маской на 40–64 % своей высоты – плотная середина рисунка облака исчезала, сквозь неё проступали холмы; подол ангела гас ещё выше.
Стало: гряда не гаснет к днищу – плотная середина облака стоит до нижней кромки коробки (кромка её и срезает, как раму); подол уходит в плотную часть облака;
к боковым краям гряда тает своим краем рисунка. Свои рисунки не добавлены – тот же слой облаков img/angel-clouds. */
@media (min-width:1024px){
html:not([data-hc="as"]) [data-sec="hero"] .v-sky28 .cl-bed.b1{-webkit-mask-image:none;mask-image:none}
html:not([data-hc="as"]) [data-sec="hero"] .v-sky28 .cl-bed.b2{-webkit-mask-image:none;mask-image:none;opacity:1}
html:not([data-hc="as"]) [data-sec="hero"] .v-sky28 .angel .fig{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 71%,transparent 78%);mask-image:linear-gradient(180deg,#000 0,#000 71%,transparent 78%)}
}
/* H33 · (2) пункт hm, новое значение h33 «отстаёт только небо» (Роман 02.11: «когда опускаем, ангел с облаками вверх уходят»).
Было (m32): небо k 0,55 и гора k 0,3 отставали – гора уезжала вниз из-под облаков, ангел с облаками «взлетал» с неё.
Стало: гора, холмы и туман у подножия едут вместе с коробкой, ангелом и облаками (земля под ангелом не уходит); отстаёт только небо – оно дальше всего.
Углы, чёткая кромка, запас неба – как m32 (правила M32 повторены для h33). Только transform, от 1024 px; reduced-motion и «Остановить анимацию» – стоит. */
html[data-hm="h33"] [data-sec="hero"] .v-sky28{--m-R:calc(120vh * var(--vwk,1));--m-ks:.5;--m-kl:0}
html[data-hm="h33"] [data-sec="hero"] .v-sky28.v-angel17.hero{border-radius:var(--box-r, calc(var(--r) * max(.711px, calc(calc(100vw * var(--vwk,1)) / 1440))))!important;
-webkit-mask-image:none!important;mask-image:none!important;overflow:hidden;overflow:clip;isolation:isolate}
html[data-hm="h33"] [data-sec="hero"] .v-sky28 > :is(.sky28,.land28,.m32-mist){border-radius:inherit}
@media (max-width:1023.98px){
html[data-hm="h33"] [data-sec="hero"] .v-sky28.v-angel17.hero{border-radius:var(--box-r, calc(var(--r) * clamp(.8px, calc(calc(100vw * var(--vwk,1)) / 390), 1.35px)))!important}
}
@media (min-width:1024px){
html[data-hm="h33"] [data-sec="hero"] .v-sky28 .sky28{overflow:visible}
html[data-hm="h33"] [data-sec="hero"] .v-sky28:not(.sky28-yar) .sky28 img{top:-14%;height:128%}
html[data-hm="h33"] [data-sec="hero"] .v-sky28.sky28-yar .sky28 img{top:-24%!important;height:125%!important}
html[data-hm="h33"] [data-sec="hero"] .m32-mist{display:block;position:absolute;z-index:-1;left:0;right:0;bottom:0;height:58%;pointer-events:none;
background:radial-gradient(64% 78% at 20% 100%, rgba(251,248,241,.8) 0, rgba(251,248,241,.58) 42%, rgba(251,248,241,0) 76%)}
}
@supports (animation-timeline: scroll()){
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){
html[data-hm="h33"]:not(.still):not([data-theatre="off"]) [data-sec="hero"] .v-sky28 .sky28 img{--m-k:var(--m-ks);animation:m32-par linear both;animation-timeline:scroll(root);animation-range:0 var(--m-R);will-change:transform}
}
}
/* H33 · (3) шапка на телефоне – в один экран вместе с верхней панелью сайта (Роман 02.11: «слишком вытянутая… нужно, чтобы помещалась в один телефонный экран…
ангела можно уменьшить или поменять его расположение»). Пункт пульта «Шапка на телефоне» (html[data-ht]): h33a / h33b / h33c / as – как было (1040 px).
Общее: высота коробки = экран минус панель (58 px) и 12 px воздуха – по svh, поэтому и в окне артефакта в приложении Claude (≈ 393×723), и в Safari с его панелями
шапка целиком на экране; на 390×844 – ровно макет (u = 1). Всё внутри – в единице шапки u = min(ширина/390, высота/макет 772): на низком экране композиция
уменьшается целиком. Текст не мельче 16 px, поэтому на низком экране он выше макета на --exk (надзаголовок) и --exb (подзаголовок, кнопка) – на столько же
сдвигаются ангел и облака (или укорачивается картина), чтобы ничего не наехало. Ангел не двигается; текст и кнопка не лежат на рисунке; облака под ангелом плотные. ПК не меняется. */
@media (max-width:1023.98px){
html[data-ht^="h33"] [data-sec="hero"] .v-sky28.v-angel17.hero{--hd:772;--pu:clamp(.8px, calc(calc(100vw * var(--vwk,1)) / 390), 1.35px);--avh:calc(100vh * var(--vwk,1));
--u:max(.66px, min(var(--pu), calc((var(--avh) - 58 * var(--pu) - 12px) / var(--hd))));
--exk:max(0px, 41.6px - 41.6 * var(--u));
--exb:calc(2.6 * max(0px, 16px - 19 * var(--u)) + max(0px, 44px - 52 * var(--u)));
--sh0:0px;--Ph:calc(var(--hd) * var(--u));
height:calc(var(--hd) * var(--u))!important;margin-top:0!important}
/* поля текста – в единице страницы (не шапки): на низком экране кегль заголовка уменьшается, а строка остаётся во всю ширину – надзаголовок и подзаголовок не добавляют строк */
html[data-ht^="h33"] [data-sec="hero"] .v-sky28 .copy{left:calc(14 * var(--pu));right:calc(14 * var(--pu));top:calc(18 * var(--u));width:auto!important}
html[data-ht^="h33"] [data-sec="hero"] .v-sky28 h1{font-size:calc(56 * var(--u))!important;line-height:.88;margin:calc(12 * var(--u)) 0 calc(14 * var(--u))!important}
html[data-ht^="h33"] [data-sec="hero"] .v-sky28 .lede{font-size:max(16px, calc(19 * var(--u)))!important;line-height:1.3;max-width:none}
html[data-ht^="h33"] [data-sec="hero"] .v-sky28 .acts{margin-top:calc(18 * var(--u))!important}
html[data-ht^="h33"] [data-sec="hero"] .v-sky28 .acts .btn{min-height:max(44px, calc(52 * var(--u)))!important;font-size:max(16px, calc(18 * var(--u)))}
html[data-ht^="h33"] [data-sec="hero"] .v-sky28 .angel{width:calc(var(--aw) * var(--u))!important;left:calc(50% - var(--aw) * var(--u) / 2)!important;top:calc(var(--ay) * var(--u) + var(--sh0))!important}
html[data-ht^="h33"] [data-sec="hero"] .v-sky28 .angel .fig{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 var(--fm0,74%),transparent var(--fm1,80%))!important;mask-image:linear-gradient(180deg,#000 0,#000 var(--fm0,74%),transparent var(--fm1,80%))!important}
html[data-ht^="h33"] [data-sec="hero"] .v-sky28 .cl-bed{-webkit-mask-image:none!important;mask-image:none!important;opacity:1!important}
html[data-ht^="h33"] [data-sec="hero"] .v-sky28 .cl-bed.b1{width:calc(var(--c1w) * var(--u))!important;left:calc(50% - var(--c1w) * var(--u) / 2)!important;top:calc(var(--c1y) * var(--u) + var(--sh0))!important}
html[data-ht^="h33"] [data-sec="hero"] .v-sky28 .cl-bed.b2{width:calc(var(--c2w) * var(--u))!important;left:calc(50% + var(--c2x) * var(--u))!important;top:calc(var(--c2y) * var(--u) + var(--sh0))!important}
/* свиток: поле надписи – по бумаге свитка (шире и ниже, чем было); кегль от ширины ангела (не мельче 11,5 px); стих виден, пока ангел шире 225 px (раньше уже при 280 px оставалась одна ссылка «Prov. 9:10» – свиток смотрелся пустым) */
html[data-ht^="h33"] [data-sec="hero"] .v-sky28 .angel .sheet{left:49.8%!important;width:31.6%!important;height:18.6%!important}
html[data-ht^="h33"] [data-sec="hero"] .v-sky28 .angel .pv{font-size:max(11.5px, 4.9cqw)!important;line-height:1.12}
html[data-ht^="h33"] [data-sec="hero"] .v-sky28 .angel .pv .t{display:inline!important}
/* Prov 4:7 на телефонном свитке не помещается (на 10 px ниже листа) – на телефоне свиток меняет только 9:10, 15:1, 18:21 (длинные и так скрыты) */
html[data-ht^="h33"] [data-sec="hero"] .v-sky28 .angel .pv[data-ref="Proverbs 4:7"]{display:none!important}
html[data-ht^="h33"] [data-sec="hero"] .v-sky28 .angel .pv cite{font-size:max(11.5px, 4.3cqw)!important;margin-top:.45em!important;line-height:1.1!important}
/* стрелка M32 на телефоне не помещается между кнопкой и ангелом (легла бы на нимб) – на телефоне её нет; шапка и так в один экран, ниже сразу следующий раздел */
html[data-ht^="h33"] [data-sec="hero"] .v-sky28 .m32-chev{display:none!important}
/* небо: только верх акварели Гэнди (лучи и облака) – берег с руинами и деревьями уходит ниже облаков, за ангелом спокойное небо без «пятен» */
html[data-ht^="h33"] [data-sec="hero"] .v-sky28 .sky28{top:0;bottom:auto;height:calc(var(--sh) * var(--u))}
html[data-ht^="h33"] [data-sec="hero"] .v-sky28:not(.sky28-yar) .sky28 img{object-position:50% 0}
/* гора (Фавор, Мон-Сен-Мишель) на телефоне была бы закрыта облаками и торчала обрывками по краям – на телефоне её нет: небо, ангел, облака */
html[data-ht^="h33"] [data-sec="hero"] .v-sky28 .land28{display:none!important}
}
@supports (height:calc(100svh * var(--vwk,1))){ @media (max-width:1023.98px){ html[data-ht^="h33"] [data-sec="hero"] .v-sky28.v-angel17.hero{--avh:calc(100svh * var(--vwk,1))} } }
/* h33a «Ангел под текстом»: текст на небе сверху, как сейчас; ангел меньше (280 u вместо 344) и встаёт сразу под кнопкой, подол уходит в плотную гряду облаков у днища */
@media (max-width:1023.98px){
html[data-ht="h33a"] [data-sec="hero"] .v-sky28{--aw:280;--ay:336;--fm0:70%;--fm1:76%;--c1w:420;--c1y:680;--c2w:470;--c2x:-235;--c2y:580;--sh:1100}
html[data-ht="h33a"] [data-sec="hero"] .v-sky28.v-angel17.hero{--sh0:calc(var(--exk) + var(--exb))}
/* светлая вуаль неба – за текстом (вверху слева), а не за ангелом */
html[data-ht="h33a"] [data-sec="hero"] .v-sky28:not(.sky28-yar) .sky28::after{background:radial-gradient(90% 34% at 28% 15%, rgba(251,248,241,.72) 0, rgba(251,248,241,.42) 55%, rgba(251,248,241,0) 100%)}
}
/* h33b и h33c – картина-коробка (небо, ангел, облака) и текст на листе страницы. Картина: чёткие края, скруглённые углы; облака у её днища плотные, срезаны кромкой.
Облака – во всю ширину коробки, чтобы срез по днищу шёл по её скруглённым углам. Высота картины --Ph; ангел и облака срезаются по ней (clip-path). */
@media (max-width:1023.98px){
html:is([data-ht="h33b"],[data-ht="h33c"]) [data-sec="hero"] .v-sky28 .sky28{height:var(--Ph)!important;border-radius:var(--box-r);overflow:hidden}
html:is([data-ht="h33b"],[data-ht="h33c"]) [data-sec="hero"] .v-sky28 .sky28 picture{height:calc(var(--sh) * var(--u))}
html:is([data-ht="h33b"],[data-ht="h33c"]) [data-sec="hero"] .v-sky28 .angel{clip-path:inset(0 0 calc(100% - var(--Ph) + var(--ay) * var(--u) + var(--sh0)) 0)}
html:is([data-ht="h33b"],[data-ht="h33c"]) [data-sec="hero"] .v-sky28 .cl-bed:is(.b1,.b2){width:100%!important;left:0!important}
html:is([data-ht="h33b"],[data-ht="h33c"]) [data-sec="hero"] .v-sky28 .cl-bed.b1{clip-path:inset(0 0 calc(100% - var(--Ph) + var(--c1y) * var(--u) + var(--sh0)) 0 round 0 0 var(--box-r) var(--box-r))}
html:is([data-ht="h33b"],[data-ht="h33c"]) [data-sec="hero"] .v-sky28 .cl-bed.b2{clip-path:inset(0 0 calc(100% - var(--Ph) + var(--c2y) * var(--u) + var(--sh0)) 0 round 0 0 var(--box-r) var(--box-r))}
/* на «Яри» текст под картиной – на листе: тушью и лазурью, как у остальных шапок, кнопка – обычная */
html:is([data-ht="h33b"],[data-ht="h33c"]) [data-sec="hero"] .v-sky28.sky28-yar .copy .lede{color:#3b3a36!important;text-shadow:none!important}
html:is([data-ht="h33b"],[data-ht="h33c"]) [data-sec="hero"] .v-sky28.sky28-yar .copy .hero-cta{background:transparent!important;color:var(--azure,#29466f)!important;border-color:var(--azure,#29466f)!important}
html[data-ht="h33b"] [data-sec="hero"] .v-sky28.sky28-yar .copy h1{color:var(--ink,#24262b)!important;text-shadow:none!important}
html[data-ht="h33b"] [data-sec="hero"] .v-sky28.sky28-yar .copy h1 em{color:var(--lang,#29466f)!important}
html[data-ht="h33b"] [data-sec="hero"] .v-sky28.sky28-yar .copy .kick{color:var(--gold-d,#8a6a1f)!important}
}
/* h33b «Ангел сверху»: картина с ангелом наверху (как карточки «Направлений» на телефоне), под ней на листе – надзаголовок, «Решаем языковой вопрос»,
подзаголовок и кнопка. Ангел крупнее (300 u), свиток читается. На низком экране картина короче на рост текста (--exk + --exb). */
@media (max-width:1023.98px){
html[data-ht="h33b"] [data-sec="hero"] .v-sky28{--P:404;--aw:300;--ay:-16;--fm0:70%;--fm1:76%;--c1w:390;--c1y:318;--c2w:430;--c2x:-215;--c2y:256;--sh:600}
html[data-ht="h33b"] [data-sec="hero"] .v-sky28.v-angel17.hero{--Ph:calc(var(--P) * var(--u) - var(--exk) - var(--exb))}
/* текст привязан к днищу шапки: кнопка никогда не срезается кромкой, даже на самом низком экране */
html[data-ht="h33b"] [data-sec="hero"] .v-sky28 .copy{top:auto!important;bottom:calc(14 * var(--u))}
}
/* h33c «Заголовок на небе, кнопка под картиной»: надзаголовок и «Решаем языковой вопрос» на небе, под ними ангел в облаках – одна картина;
подзаголовок и кнопка – под картиной, на листе, у большого пальца. */
@media (max-width:1023.98px){
html[data-ht="h33c"] [data-sec="hero"] .v-sky28{--P:624;--aw:280;--ay:206;--fm0:70%;--fm1:76%;--c1w:420;--c1y:524;--c2w:460;--c2x:-230;--c2y:482;--sh:860}
html[data-ht="h33c"] [data-sec="hero"] .v-sky28.v-angel17.hero{--sh0:var(--exk);--Ph:calc(var(--P) * var(--u) - var(--exb))}
html[data-ht="h33c"] [data-sec="hero"] .v-sky28 .copy{top:calc(18 * var(--u));bottom:calc(14 * var(--u));display:flex;flex-direction:column;pointer-events:none}
html[data-ht="h33c"] [data-sec="hero"] .v-sky28 .copy > *{pointer-events:auto}
html[data-ht="h33c"] [data-sec="hero"] .v-sky28 .lede{margin-top:auto!important}
}
/* очень низкий экран (ангел уже 225 px, Safari с панелями): стих на свитке не помещается – на свитке только ссылка, по середине листа */
@container (max-width:224px){
html[data-ht^="h33"] [data-sec="hero"] .v-sky28 .angel .pv .t{display:none!important}
html[data-ht^="h33"] [data-sec="hero"] .v-sky28 .angel .sheet{align-items:center!important;padding-top:0!important}
html[data-ht^="h33"] [data-sec="hero"] .v-sky28 .angel .pv cite{margin-top:0!important;font-size:max(12px, 6cqw)!important}
}
@media (max-width:389.98px){
/* на 360–389 px надзаголовок «Онлайн-школа английского» не помещался в строку (третья строка) – разрядка чуть меньше */
html[data-ht^="h33"] [data-sec="hero"] .v-sky28 .kick{letter-spacing:.085em!important}
}
@media (max-width:1023.98px){
/* h33c: светлая вуаль неба – за заголовком (вверху слева) */
html[data-ht="h33c"] [data-sec="hero"] .v-sky28:not(.sky28-yar) .sky28::after{background:radial-gradient(95% 30% at 28% 13%, rgba(251,248,241,.72) 0, rgba(251,248,241,.42) 55%, rgba(251,248,241,0) 100%)}
}
/* H33 · пульт: пункт «Шапка на телефоне» на ПК ничего не меняет – виден только на телефоне; «Облака под ангелом» меняет только ПК – виден только на ПК
(строку ищем по кнопке значения: h33b есть только у «Шапки на телефоне»; у облаков – по названию группы) */
@media (min-width:1024px){ #pult .pu-row:has(> .pu-seg > button[data-k="h33b"]){display:none!important} }
@media (max-width:1023.98px){ #pult .pu-row:has(> .pu-seg[aria-label="Шапка: облака под ангелом"]){display:none!important} }
/* S33 · smoke 390: ссылки в мелком тексте («Или сразу в Telegram», «заявка на сайте», «политика конфиденциальности») были 43 px —
цель касания 44 считалась до zoom .9; считаем с запасом под масштаб (строка не растёт: у строчной ссылки отступы на высоту строки не влияют) */
@media (pointer:coarse){ main p a:not([class]), main li a:not([class]), main dd a:not([class]), .q-note a, .z-note a, footer p a:not([class]) { padding-block:max(.7em, calc((48px - 1.25em) / 2)); } }
/* S33 · на 1024–1199 подвал выходил вбок на 17 px (нашёл C: нижняя строка ссылок не помещалась) — строка переносится, документы уходят к правому краю */
@media (min-width:1024px) and (max-width:1199.98px){ .v-ft23b1a .ft-small{flex-wrap:wrap;row-gap:calc(6*var(--u))} .v-ft23b1a .ft-small nav.r{margin-left:auto} }
/* S33 · рецензент 33: при «Тесты = x30k» весы улетали в шапку — position:relative разделу ставит скрипт только тому варианту, у которого при загрузке id
(вариант по умолчанию). Предметы P32 стоят от своего раздела во всех вариантах — раздел с предметом всегда точка отсчёта */
main.wrap > [data-sec] > section:has(> .p32-obj){position:relative}
/* ══ C33: цветные плиты, прогон 33 (дизайнер C, пункт пульта zp) ══════════════════════════════════════════════════════════════════
Роман 02.11: «Отзывы» – «мне нравится… в этом ярьном оформлении – единственное, фон там не в тему – нужны ассоциации с учениками говорящими
и отзывами / свитками»; «Запись» – «пастельный… зелёный мел, бирюзовый мел фон… мне не нравится… попробовать то же, что у отзывов – приятная ярь
с рисунком на фоне… или голубую лазурь… другие цвета из разрешённых»; «Между уроками» – «пастельный серо-буро-поцарапанный… цвет фона не нравится».
Гравюры – куратор 02.11 (cur/PICKS.md): «Отзывы» – Б. Франко «Христос среди учителей» (Рейксмузеум RP-P-OB-36.152, PD): мальчик отвечает учёным с книгами;
«Запись» – Я. ван де Велде «Зерцало письма», 1605, лист росчерков (Мет 28.106.26, CC0): прошение, почерк; три коробки канала – В. Холлар
«Пьяцца в Ковент-Гардене», ок. 1647 (Мет 17.3.1166-383, CC0): гуляющие на площади – «между уроками».
Плит не больше трёх, цвет только ярь #2c5a4e и лазурь #29466f (густые, как «Отзывы»), под краской – гравюра; пастели нет. Значения:
c33a – «Запись» ярью, три коробки лазурью; c33b – «Запись» лазурью, три коробки ярью; c33c – две плиты, обе ярью («Отзывы», «Запись»), три коробки на листе страницы
(порядок такой, чтобы каждый следующий щелчок пульта менял «Запись» – пункт стоит у неё).
«Отзывы» во всех – густая ярь с Франко; yar/az/mix (прежние) тоже получают Франко вместо потолка Бодлианской библиотеки. */
/* (1) «Отзывы»: Франко вместо Бодлианской – при всех плитах */
html:is([data-zp="yar"],[data-zp="az"],[data-zp="mix"]) [data-sec="reviews"] > section::before{background:url(/s0/img33/zp33-franco-2000.webp) 50% 0 / cover no-repeat}
@media (max-width:1023.98px){ html:is([data-zp="yar"],[data-zp="az"],[data-zp="mix"]) [data-sec="reviews"] > section::before{background-size:auto 100%;background-position:30% 0} }
/* (2) новые значения: «Отзывы» – как yar (густая ярь 88 %, текст кость, акцент и номер золото, окошки кость), гравюра Франко */
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]){--zp-deep:rgba(44,90,78,.88);--zp-acc:#e6c77a;--c33-yar:rgba(44,90,78,.88);--c33-az:rgba(41,70,111,.9)}
html[data-zp="c33a"]{--c33-za:var(--c33-yar);--c33-ch:var(--c33-az)}
html[data-zp="c33b"]{--c33-za:var(--c33-az);--c33-ch:var(--c33-yar)}
html[data-zp="c33c"]{--c33-za:var(--c33-yar)}
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="reviews"] > section{position:relative;isolation:isolate}
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="reviews"] > section::before{content:"";position:absolute;z-index:-2;left:calc(-36 * var(--u));right:calc(-36 * var(--u));
top:calc(-84 * var(--u));bottom:calc(-56 * var(--u));background:url(/s0/img33/zp33-franco-2000.webp) 50% 0 / cover no-repeat;pointer-events:none;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="reviews"] > section::after{content:"";position:absolute;z-index:-1;left:0;right:0;top:calc(-84 * var(--u));bottom:calc(-56 * var(--u));
background:var(--zp-deep);box-shadow:0 0 0 calc(100vmax * var(--vwk,1)) var(--zp-deep);clip-path:inset(0 -100vmax);pointer-events:none}
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="reviews"] .rubric h2{color:#fbf8f1!important}
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="reviews"] .rubric h2 em{color:var(--zp-acc)!important}
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="reviews"] .rubric :is(.num,.fol,.fol::before){color:var(--zp-acc)!important}
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="reviews"] .rubric .rubric-sub{color:#fbf8f1!important}
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="reviews"] .rv17-cnt{color:#fbf8f1!important}
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="reviews"] .rv17-ar{color:#fbf8f1!important;border-color:rgba(251,248,241,.7)!important;background:transparent!important}
@media (hover:hover){ html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="reviews"] .rv17-ar:hover:not([aria-disabled="true"]){background:#fbf8f1!important;color:#24262b!important} }
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="reviews"] .rv17-ar:focus-visible{outline-color:#fbf8f1!important}
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="reviews"] .rv17-card{background:#fffdf8!important;box-shadow:0 1px 0 rgba(0,0,0,.06),0 10px 24px rgba(10,24,20,.16)!important}
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="reviews"] .p32-o-quill{display:none!important}
/* роза на верхней кромке плиты «Отзывов» (S32, «бомбезный цветочек») – и при новых значениях */
html[data-rh="p32"]:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) main.wrap > [data-sec="reviews"]{position:relative}
html[data-rh="p32"]:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) main.wrap > [data-sec="reviews"]:not([hidden])::before{
content:"";position:absolute;z-index:4;left:50%;top:calc(-84 * var(--u));width:calc(104 * var(--u));height:calc(104 * var(--u));
margin:calc(-52 * var(--u)) 0 0 calc(-52 * var(--u));background:url(/s0/img32/p32-rose-600.webp) 50% 50%/contain no-repeat;pointer-events:none;
filter:drop-shadow(0 calc(3 * var(--u)) calc(5 * var(--u)) rgba(16,32,26,.28))}
@supports (animation-timeline: view()){ @media (prefers-reduced-motion:no-preference){
html[data-mo="m32"][data-rh="p32"]:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]):not(.still):not([data-theatre="off"]) main.wrap > [data-sec="reviews"]:not([hidden])::before{
--m-spin:90deg;animation:m32-spin linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
} }
@media (max-width:1023.98px){
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="reviews"] > section::before{left:calc(var(--gut) * -1 * var(--u));right:calc(var(--gut) * -1 * var(--u));top:-44px;bottom:-40px;
-webkit-mask-image:none;mask-image:none;background-size:auto 100%;background-position:30% 0}
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="reviews"] > section::after{top:-44px;bottom:-40px}
html[data-rh="p32"]:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) main.wrap > [data-sec="reviews"]:not([hidden])::before{top:-44px;width:64px;height:64px;margin:-32px 0 0 -32px}
}
/* (3) «Запись»: густая плита (c33a/c33c – ярь, c33b – лазурь), под краской росчерки ван де Велде. Заголовок – на плите, текстом кости, как «Отзывы»;
форма и пара – на одном листе кости («прошение»: текст слева, миниатюра справа), лист – событие на плите. Буква «Ч» – киноварь, как выбрано (y32c). */
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="zapis"] > section{position:relative;isolation:isolate}
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="zapis"] > section::before{content:"";position:absolute;z-index:-3;left:calc(-36 * var(--u));right:calc(-36 * var(--u));
top:calc(-48 * var(--u));bottom:calc(-48 * var(--u));background:url(/s0/img33/zp33-velde-2000.webp) 50% 50% / cover no-repeat;pointer-events:none;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="zapis"] > section::after{content:"";position:absolute;z-index:-2;left:0;right:0;top:calc(-48 * var(--u));bottom:calc(-48 * var(--u));
background:var(--c33-za);box-shadow:0 0 0 calc(100vmax * var(--vwk,1)) var(--c33-za);clip-path:inset(0 -100vmax);pointer-events:none}
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="zapis"] .zd1-kick{color:#fbf8f1!important}
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="zapis"] .zd1-kick span{color:var(--zp-acc)!important}
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="zapis"] :is(.zd1-h,.zd1-sub){color:#fbf8f1!important}
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="zapis"] .zd1-h em{color:var(--zp-acc)!important}
/* лист: от верха формы до низа строки, через обе колонки (форма + пара); у формы свой фон и кайма сняты – лист один */
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="zapis"] .v-y30d .y30d-main{position:relative}
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="zapis"] .v-y30d .y30d-form{background:transparent!important;box-shadow:none!important}
@media (min-width:1024px){
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="zapis"] .v-y30d .y30d-main::before{content:"";position:absolute;z-index:-1;left:0;bottom:0;
top:calc(26 * var(--u));right:calc(-456 * var(--u));background:#fffdf8;border-radius:var(--box-r,calc(10 * var(--u)));
box-shadow:0 1px 0 rgba(0,0,0,.06),0 12px 28px rgba(10,20,30,.2);pointer-events:none}
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="zapis"] .v-y30d .y30d-art{margin:0 calc(30 * var(--u)) calc(22 * var(--u)) 0}
}
@media (max-width:1023.98px){
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="zapis"] > section::before{left:calc(var(--gut) * -1 * var(--u));right:calc(var(--gut) * -1 * var(--u));top:-28px;bottom:-28px;
-webkit-mask-image:none;mask-image:none;background-size:cover;background-position:40% 0}
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="zapis"] > section::after{top:-28px;bottom:-28px}
/* телефон: форма и пара – тот же лист, одним куском (форма сверху, пара внизу листа) */
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="zapis"] .v-y30d{row-gap:0!important}
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="zapis"] .v-y30d .y30d-main{margin-top:calc(16 * var(--u))}
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="zapis"] .v-y30d .y30d-form{background:#fffdf8!important;border-radius:var(--box-r) var(--box-r) 0 0!important}
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="zapis"] .v-y30d .y30d-art{width:auto!important;justify-self:stretch!important;margin:0!important;
padding:calc(4 * var(--u)) 0 calc(18 * var(--u));background:#fffdf8;border-radius:0 0 var(--box-r) var(--box-r);display:flex;justify-content:center}
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="zapis"] .v-y30d .y30d-art img{width:calc(250 * var(--u))}
html:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="zapis"] .v-y30d .y30d-art::after{left:calc(50% - 110 * var(--u));right:auto;width:calc(220 * var(--u));bottom:calc(14 * var(--u))}
}
/* (4) три коробки «Между уроками» (второй экран): c33a – густая лазурь, c33b – густая ярь, под краской Холлар; c33c – без плиты, коробки на листе страницы */
html:is([data-zp="c33a"],[data-zp="c33b"]) #channel .z32-tri{isolation:isolate}
html:is([data-zp="c33a"],[data-zp="c33b"]) #channel .z32-tri::before{content:"";position:absolute;z-index:-2;left:calc(-36 * var(--u));right:calc(-36 * var(--u));top:calc(-56 * var(--u));bottom:calc(-56 * var(--u));
background:url(/s0/img33/zp33-covent-2000.webp) 50% 58% / cover no-repeat;pointer-events:none;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
html:is([data-zp="c33a"],[data-zp="c33b"]) #channel .z32-tri::after{content:"";position:absolute;z-index:-1;left:0;right:0;top:calc(-56 * var(--u));bottom:calc(-56 * var(--u));
background:var(--c33-ch);box-shadow:0 0 0 calc(100vmax * var(--vwk,1)) var(--c33-ch);clip-path:inset(0 -100vmax);pointer-events:none}
html:is([data-zp="c33a"],[data-zp="c33b"]) #channel .z32-box{box-shadow:0 1px 0 rgba(0,0,0,.06),0 12px 28px rgba(10,18,36,.22)}
@media (max-width:1023.98px){
html:is([data-zp="c33a"],[data-zp="c33b"]) #channel .z32-tri::before{left:calc(var(--gut) * -1 * var(--u));right:calc(var(--gut) * -1 * var(--u));top:-32px;bottom:-32px;
-webkit-mask-image:none;mask-image:none;background-size:cover;background-position:50% 0}
html:is([data-zp="c33a"],[data-zp="c33b"]) #channel .z32-tri::after{top:-32px;bottom:-32px}
}
/* S33 · рецензент 33: под розой на кромке плиты «Отзывов» стояла статуя в нише (кромка резала её по шею, роза вставала вместо головы) —
гравюра Франко крупнее и сдвинута вправо: под розой колонна, сцена «мальчик и учёные» остаётся над карточками */
@media (min-width:1024px){
html:is([data-zp="yar"],[data-zp="az"],[data-zp="mix"],[data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) [data-sec="reviews"] > section::before{background-size:125% auto;background-position:100% 0}
}
/* S33 · рецензент 33: в h33b/h33c у правого края днища между облаками и кромкой проступала земля — правая гряда (b2, зеркальная) сдвинута вправо
и срезана по кромке картины; плотная часть закрывает угол */
@media (max-width:1023.98px){
html:is([data-ht="h33b"],[data-ht="h33c"]) [data-sec="hero"] .v-sky28 .cl-bed.b2{left:14%!important;clip-path:inset(0 14% calc(100% - var(--Ph) + var(--c2y) * var(--u) + var(--sh0)) 0 round 0 0 var(--box-r) 0)}
}
/* s0/leaf34.css */
/* прогон 34 — слой поверх leaf33 */
/* S34 · Роман 02.11: «в «Вопросах»… строка подчёркивается цветом заглавной буквы… на телефоне она поломанная, нарезанная на куски» —
подчёркивание обходило хвосты букв (skip-ink: у, р, д, ф) и рвалось; теперь одна ровная линия (ПК и телефон) */
.v-owl18 .fq-q .t{text-decoration-skip-ink:none!important}
/* R2 34: ступенька оставалась и после буквицы — у «.ini» свой сдвиг вниз, и кусок подчёркивания уезжал с ней; на телефоне перенос давал обрывки.
Подчёркивание теперь не text-decoration, а одна линия под всем вопросом (с буквицей), растёт слева направо */
.v-owl18 .fq-q .t{--fq-l:var(--ul,var(--ic,var(--gold)));text-decoration-line:none!important;display:inline-block;padding-bottom:.14em;
background:linear-gradient(var(--fq-l),var(--fq-l)) 0 100% / 0 2px no-repeat;transition:background-size .25s ease;
flex:0 1 auto!important;width:fit-content!important;max-width:100%}
.v-owl18 .fq-q[aria-expanded="true"] .t{background-size:100% 2px}
@media (hover:hover) and (min-width:1024px){ .v-owl18 .fq-q:hover:not([aria-expanded="true"]) .t{--fq-l:color-mix(in srgb,var(--ul,var(--ic,var(--gold))) 45%,transparent);background-size:100% 2px} }
@media (prefers-reduced-motion:reduce){ .v-owl18 .fq-q .t{transition:none} }
/* S34 · R2: рамка фокуса 3 px — правило leaf27 тем же весом перебивало leaf32 (при zoom .9 выходил 1 px экрана) */
:root[data-look] :is(a,button,input,select,textarea,[tabindex]):focus-visible{outline-width:3px!important}
/* ══ H34: шапка и ангел (дизайнер H, прогон 34) ═══════════════════════════════════════════════════════════════════════
Роман 02.11 вечер (голос по пульту 33): ПК – «облака подрастянуть… заполнить вот до сюда… чтобы чуть-чуть выходили за пределы коробки» (эксперимент, пункт hc);
телефон – «шапку чуть-чуть прозрачнее… от края до края… облака… выходили за пределы шапки вниз» (эксперимент, пункт ht); нимб «справа внизу недорисованный»;
«душнилы»: «свиток криво стоит… наклон шрифта» (новый пункт hs «Шапка: надпись ангела»).
«Редакция» R1: облака были одним рисунком и его зеркальной копией под CSS-сепией (программная раскраска). Здесь – новая цельная гряда художника
g34-clouds-wide-b (тёплый тон в самом файле, без фильтров), отражена целиком по горизонтали: свет слева, как у ангела и лучей неба. Ангел не двигается. */
/* H34 · (1) ПК, пункт «Шапка: облака под ангелом» (hc): h33 – как сейчас; h34 – новая гряда в коробке (вместо зеркальной пары), закрывает склон справа;
h34w – эксперимент Романа: гряда во всю ширину низа коробки, концами на 3 % за боковые кромки, низ выходит за кромку и тает в лист.
Гряда – слой ::after самой коробки (z 3: над ангелом, под текстом и стрелкой). Высота левого края гряды считается в единицах шапки:
облака не поднимаются выше 710u (стрелка под кнопкой – до 714u), на 1440 и на 1710 одинаково. */
@media (min-width:1024px){
html:is([data-hc="h34"],[data-hc="h34w"]) [data-sec="hero"] .v-sky28 .cl-bed{display:none!important}
html:is([data-hc="h34"],[data-hc="h34w"]) [data-sec="hero"] .v-sky28.v-angel17.hero::after{content:"";position:absolute;z-index:3;pointer-events:none;
aspect-ratio:2064/512;background:url(/s0/img34/h34c-clouds-2064.webp) 0 0/100% 100% no-repeat}
html[data-hc="h34"] [data-sec="hero"] .v-sky28.v-angel17.hero::after{right:calc(-60 * var(--u));width:calc(1000 * var(--u));bottom:calc(-40 * var(--u))}
/* подол уходит в новую гряду раньше: собственные облака картинки ангела (белая дымка под подолом) не выглядывают между клубами */
html:is([data-hc="h34"],[data-hc="h34w"]) [data-sec="hero"] .v-sky28 .angel .fig{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 69%,transparent 75%)!important;mask-image:linear-gradient(180deg,#000 0,#000 69%,transparent 75%)!important}
/* h34w: коробка не режет облака по бокам и снизу (верх режет – над ангелом ничего не видно); небо, гора и туман режутся своей рамкой */
html[data-hc="h34w"] [data-sec="hero"] .v-sky28.v-angel17.hero{overflow:visible!important;clip-path:inset(0 -6% -30% -6%)}
html[data-hc="h34w"] [data-sec="hero"] .v-sky28 :is(.sky28,.land28,.m32-mist){overflow:hidden;overflow:clip;border-radius:inherit}
html[data-hc="h34w"] [data-sec="hero"] .v-sky28.v-angel17.hero::after{left:-4%;width:108%;bottom:0;translate:0 calc(77% - 150 * var(--u));
-webkit-mask-image:linear-gradient(#000 0,#000 calc(23% + 150 * var(--u)),transparent calc(23% + 214 * var(--u)));
mask-image:linear-gradient(#000 0,#000 calc(23% + 150 * var(--u)),transparent calc(23% + 214 * var(--u)))}
/* гора в этом варианте стоит вместе с коробкой (отстаёт только небо): её нижний край теперь открыт облакам, и при отставании она выползала бы из-под коробки,
а сдвиг картинки внутри рамки открывал её верхний срез; гору почти целиком закрывают облака – разницы в движении не видно */
html[data-hc="h34w"] [data-sec="hero"] .v-sky28 .land28{animation:none!important;transform:none!important}
}
/* H34 · (2) телефон, пункт «Шапка на телефоне» (ht), новое значение h34a (эксперимент Романа): раскладка h33a (ангел под текстом, шапка в один экран),
но коробка от края до края экрана (без полос фона по бокам), небо прозрачнее (лист просвечивает), низ неба тает; облака – та же гряда художника
(средняя часть), плотные у подола, выходят за нижнюю кромку шапки на 44 px и тают в лист до книжки-разделителя. Только телефон.
Ниже до «h34a ↓» – правила h33a, повторённые для h34a (селектор h33 их не ловит). */
@media (max-width:1023.98px){
html[data-ht="h34a"] [data-sec="hero"] .v-sky28.v-angel17.hero{--hd:772;--pu:clamp(.8px, calc(calc(100vw * var(--vwk,1)) / 390), 1.35px);--avh:calc(100vh * var(--vwk,1));
--u:max(.66px, min(var(--pu), calc((var(--avh) - 58 * var(--pu) - 12px) / var(--hd))));
--exk:max(0px, 41.6px - 41.6 * var(--u));
--exb:calc(2.6 * max(0px, 16px - 19 * var(--u)) + max(0px, 44px - 52 * var(--u)));
--sh0:0px;--Ph:calc(var(--hd) * var(--u));
height:calc(var(--hd) * var(--u))!important;margin-top:0!important}
html[data-ht="h34a"] [data-sec="hero"] .v-sky28 .copy{left:calc(14 * var(--pu));right:calc(14 * var(--pu));top:calc(18 * var(--u));width:auto!important}
html[data-ht="h34a"] [data-sec="hero"] .v-sky28 h1{font-size:calc(56 * var(--u))!important;line-height:.88;margin:calc(12 * var(--u)) 0 calc(14 * var(--u))!important}
html[data-ht="h34a"] [data-sec="hero"] .v-sky28 .lede{font-size:max(16px, calc(19 * var(--u)))!important;line-height:1.3;max-width:none}
html[data-ht="h34a"] [data-sec="hero"] .v-sky28 .acts{margin-top:calc(18 * var(--u))!important}
html[data-ht="h34a"] [data-sec="hero"] .v-sky28 .acts .btn{min-height:max(44px, calc(52 * var(--u)))!important;font-size:max(16px, calc(18 * var(--u)))}
html[data-ht="h34a"] [data-sec="hero"] .v-sky28 .angel{width:calc(var(--aw) * var(--u))!important;left:calc(50% - var(--aw) * var(--u) / 2)!important;top:calc(var(--ay) * var(--u) + var(--sh0))!important}
html[data-ht="h34a"] [data-sec="hero"] .v-sky28 .angel .fig{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 var(--fm0,74%),transparent var(--fm1,80%))!important;mask-image:linear-gradient(180deg,#000 0,#000 var(--fm0,74%),transparent var(--fm1,80%))!important}
html[data-ht="h34a"] [data-sec="hero"] .v-sky28 .cl-bed{-webkit-mask-image:none!important;mask-image:none!important;opacity:1!important}
html[data-ht="h34a"] [data-sec="hero"] .v-sky28 .cl-bed.b1{width:calc(var(--c1w) * var(--u))!important;left:calc(50% - var(--c1w) * var(--u) / 2)!important;top:calc(var(--c1y) * var(--u) + var(--sh0))!important}
html[data-ht="h34a"] [data-sec="hero"] .v-sky28 .cl-bed.b2{width:calc(var(--c2w) * var(--u))!important;left:calc(50% + var(--c2x) * var(--u))!important;top:calc(var(--c2y) * var(--u) + var(--sh0))!important}
html[data-ht="h34a"] [data-sec="hero"] .v-sky28 .angel .sheet{left:49.8%!important;width:31.6%!important;height:18.6%!important}
html[data-ht="h34a"] [data-sec="hero"] .v-sky28 .angel .pv{font-size:max(11.5px, 4.9cqw)!important;line-height:1.12}
html[data-ht="h34a"] [data-sec="hero"] .v-sky28 .angel .pv .t{display:inline!important}
html[data-ht="h34a"] [data-sec="hero"] .v-sky28 .angel .pv[data-ref="Proverbs 4:7"]{display:none!important}
html[data-ht="h34a"] [data-sec="hero"] .v-sky28 .angel .pv cite{font-size:max(11.5px, 4.3cqw)!important;margin-top:.45em!important;line-height:1.1!important}
html[data-ht="h34a"] [data-sec="hero"] .v-sky28 .m32-chev{display:none!important}
html[data-ht="h34a"] [data-sec="hero"] .v-sky28 .sky28{top:0;bottom:auto;height:calc(var(--sh) * var(--u))}
html[data-ht="h34a"] [data-sec="hero"] .v-sky28:not(.sky28-yar) .sky28 img{object-position:50% 0}
html[data-ht="h34a"] [data-sec="hero"] .v-sky28 .land28{display:none!important}
}
@supports (height:calc(100svh * var(--vwk,1))){ @media (max-width:1023.98px){ html[data-ht="h34a"] [data-sec="hero"] .v-sky28.v-angel17.hero{--avh:calc(100svh * var(--vwk,1))} } }
@media (max-width:1023.98px){
html[data-ht="h34a"] [data-sec="hero"] .v-sky28{--aw:280;--ay:336;--fm0:70%;--fm1:76%;--c1w:420;--c1y:680;--c2w:470;--c2x:-235;--c2y:580;--sh:1100}
html[data-ht="h34a"] [data-sec="hero"] .v-sky28.v-angel17.hero{--sh0:calc(var(--exk) + var(--exb))}
html[data-ht="h34a"] [data-sec="hero"] .v-sky28:not(.sky28-yar) .sky28::after{background:radial-gradient(90% 34% at 28% 15%, rgba(251,248,241,.72) 0, rgba(251,248,241,.42) 55%, rgba(251,248,241,0) 100%)}
}
@media (max-width:389.98px){
html[data-ht="h34a"] [data-sec="hero"] .v-sky28 .kick{letter-spacing:.085em!important}
}
/* h34a ↓ */
@media (max-width:1023.98px){
html[data-ht="h34a"] [data-sec="hero"] .v-sky28.v-angel17.hero{margin-left:calc(50% - calc(50vw * var(--vwk,1)))!important;margin-right:calc(50% - calc(50vw * var(--vwk,1)))!important;width:auto!important;max-width:none!important;
border-radius:0!important;overflow:visible!important;overflow-x:clip!important}
html[data-ht="h34a"] [data-sec="hero"] .v-sky28 .copy{left:calc((14 + var(--gut,16)) * var(--pu))!important;right:calc((14 + var(--gut,16)) * var(--pu))!important}
html[data-ht="h34a"] [data-sec="hero"] .v-sky28 .sky28{height:100%!important;overflow:hidden;overflow:clip;border-radius:0!important;opacity:.8;
-webkit-mask-image:linear-gradient(#000 0,#000 calc(100% - 96 * var(--u)),transparent 100%);mask-image:linear-gradient(#000 0,#000 calc(100% - 96 * var(--u)),transparent 100%)}
html[data-ht="h34a"] [data-sec="hero"] .v-sky28 .sky28 picture{height:calc(var(--sh) * var(--u))}
html[data-ht="h34a"] [data-sec="hero"] .v-sky28 .cl-bed{display:none!important}
html[data-ht="h34a"] [data-sec="hero"] .v-sky28.v-angel17.hero::after{content:"";position:absolute;z-index:3;pointer-events:none;
left:calc(50% - 273 * var(--u));width:calc(495 * var(--u));aspect-ratio:1300/512;top:calc(100% - 134 * var(--u));
background:url(/s0/img34/h34c-clouds-m-1300.webp) 0 0/100% 100% no-repeat;
-webkit-mask-image:linear-gradient(#000 0,#000 calc(134 * var(--u)),transparent calc(134 * var(--u) + 44px));
mask-image:linear-gradient(#000 0,#000 calc(134 * var(--u)),transparent calc(134 * var(--u) + 44px))}
}
/* H34 · (3) нимб (Роман: «справа внизу… недорисованный», скрин 2). Разбор: в самом рисунке нижне-правая четверть нимба (3–5 часов) бледнее – штрих гаснет к кромке
(это заказ художнику), а слой сияния это усиливал: свет за нимбом стоял на треть радиуса выше и левее центра нимба (40,4 % / 13,2 % вместо 42,0 % / 15,7 % картинки;
на телефоне 41 % / 14,8 % вместо 42,0 % / 18,2 %) – низ справа оставался без света. Центр света – по замеру круга нимба (leaf34.js, H34).
R2: нимб «дышал» масштабом – теперь только прозрачностью, как блики (ангел и всё в нём стоит). */
@keyframes h34-breath{from{opacity:.78}to{opacity:1}}
.g25-halo{animation-name:h34-breath}
/* H34 · (4) пункт «Шапка: надпись ангела» (hs): h34s (по умолчанию) – надпись лежит на листе, а не поверх него; as – как было (курсив Vollkorn со скосом −2,4°).
R1: лист нарисован в перспективе (верхний край почти горизонтален, нижний уходит вниз вправо ≈ 6°, левый край наклонён влево), а строки стояли ровно со скосом –
лист и текст в разных плоскостях, отсюда «криво»; курсив плюс скос давали двойной наклон. Теперь поле надписи натянуто на четыре угла листа
(перспектива из углов картинки: ПК 568,712 · 935,718 · 928,1175 · 542,1135 из 1120 px; телефон 352,440 · 590,442 · 580,725 · 325,707 из 700 px) –
строки идут вдоль листа, как написанные на нём. Прямой EB Garamond вместо курсива, поля ≈ 11 %, LORD – капителью, как в Библии короля Якова, ссылка – капителью
с разрядкой, тёмным золотом; чернила #2a1f14 через multiply. Всё в единицах ширины ангела (cqw) – на любом экране одинаково. */
html[data-hs="h34s"] [data-sec="hero"] .v-angel17.hero .angel .sheet{left:0!important;top:0!important;width:33.71cqw!important;height:39.32cqw!important;
transform-origin:0 0!important;transform:translate(50.714cqw,63.571cqw) matrix(.92416,.01511,-.03114,.9204,0,0) perspective(100cqw) rotateY(-11.981deg) rotateX(7.543deg)!important;
padding:3.2cqw 3.1cqw 6.4cqw!important;box-sizing:border-box!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;align-items:center!important;align-content:center!important;justify-items:center}
html[data-hs="h34s"] [data-sec="hero"] .v-angel17.hero .angel .pv{font:normal 500 4.7cqw/1.16 var(--f-head)!important;color:#2a1f14!important;letter-spacing:.005em;text-wrap:balance;hyphens:manual}
html[data-hs="h34s"] [data-sec="hero"] .v-angel17.hero .angel .pv.long{font-size:3.7cqw!important;line-height:1.16!important}
html[data-hs="h34s"] [data-sec="hero"] .v-angel17.hero .angel .pv cite{font:normal 600 2.8cqw/1.15 var(--f-head)!important;letter-spacing:.12em!important;text-transform:uppercase;color:#8a6a1f!important;margin-top:.8em!important}
html[data-hs="h34s"] [data-sec="hero"] .v-angel17.hero .angel .pv .h34-sc{font-size:.78em;letter-spacing:.045em;font-weight:560}
/* телефон: поле – по листу телефонной картинки; на свитке короткое изречение (до 5 слов, точный отрывок того же стиха), кегль от 13 px;
полный стих и перевод остаются в «Переводе свитка» (свиток на телефоне – картинка, для чтения вслух – строка под ним) */
@media (max-width:1023.98px){
html[data-hs="h34s"] [data-sec="hero"] .v-angel17.hero .angel .sheet{width:35.26cqw!important;height:39.4cqw!important;
transform:translate(50.286cqw,62.857cqw) matrix(.92413,.00777,-.06813,.91613,0,0) perspective(100cqw) rotateY(-8.508deg) rotateX(10.157deg)!important;
padding:2.6cqw 2.3cqw 5.6cqw!important}
html[data-hs="h34s"] [data-sec="hero"] .v-angel17.hero .angel :is(.pv,.pv.long){display:block!important;font-size:max(13px, 5.7cqw)!important;line-height:1.1!important}
html[data-hs="h34s"] [data-sec="hero"] .v-angel17.hero .angel .pv .t{display:none!important}
html[data-hs="h34s"] [data-sec="hero"] .v-angel17.hero .angel .pv::before{display:block}
html[data-hs="h34s"] [data-sec="hero"] .v-angel17.hero .angel .pv[data-ref="Proverbs 9:10"]::before{content:"The beginning of wisdom"}
html[data-hs="h34s"] [data-sec="hero"] .v-angel17.hero .angel .pv[data-ref="Proverbs 15:1"]::before{content:"A soft answer"}
html[data-hs="h34s"] [data-sec="hero"] .v-angel17.hero .angel .pv[data-ref="Proverbs 25:11"]::before{content:"A word fitly spoken"}
html[data-hs="h34s"] [data-sec="hero"] .v-angel17.hero .angel .pv[data-ref="Proverbs 18:21"]::before{content:"The power of the tongue"}
html[data-hs="h34s"] [data-sec="hero"] .v-angel17.hero .angel .pv[data-ref="Proverbs 4:7"]::before{content:"Get wisdom"}
html[data-hs="h34s"] [data-sec="hero"] .v-angel17.hero .angel .pv[data-ref="Proverbs 27:17"]::before{content:"Iron sharpeneth iron"}
html[data-hs="h34s"] [data-sec="hero"] .v-angel17.hero .angel .pv[data-ref="Proverbs 16:24"]::before{content:"Pleasant words"}
html[data-hs="h34s"] [data-sec="hero"] .v-angel17.hero .angel .pv cite{font-size:max(11.5px, 3.8cqw)!important;letter-spacing:.05em!important;margin-top:.55em!important}
}
/* H34 · пульт: «Облака под ангелом» – только ПК (как в H33, строка по названию группы); «Шапка на телефоне» – только телефон (по ключу h33b, H33) */
/* A34: пункт пульта «bf · Цвет строки записи» у «С чего начать» (Роман 02.11: «голубая строка ввода… ник или телефон и кнопка записаться…
голубой цвет не нравится, замени… пусть предлагают разные»). Строка записи = плашка формы под оглавлением (все варианты раздела на x32).
as – как сейчас (светлая лазурь); kost – кость с золотой каймой, кнопка лазурью («белый лист с каймой, цвет только в словах», 01.11);
yar – светлая ярь, кнопка ярью; gold – кость с золотой каймой, кнопка золотом (тушь по золоту). Мяты и «старой бумаги» нет – проверено кадром. */
html[data-bf="kost"] [data-sec="board"] .x32 .x32-form{background:#fbf8f1!important;box-shadow:inset 0 0 0 1px rgba(201,168,76,.62)!important}
html[data-bf="kost"] [data-sec="board"] .x32 .x32-in{box-shadow:inset 0 0 0 1px rgba(36,38,43,.2)}
html[data-bf="yar"] [data-sec="board"] .x32 .x32-form{background:color-mix(in srgb,#2c5a4e 9%,#fffdf8)!important;box-shadow:inset 0 0 0 1px rgba(44,90,78,.24)!important}
html[data-bf="yar"] [data-sec="board"] .x32 .x32-in{box-shadow:inset 0 0 0 1px rgba(44,90,78,.32)}
html[data-bf="yar"] [data-sec="board"] .x32 .x32-in:focus{box-shadow:inset 0 0 0 1.5px #2c5a4e}
html[data-bf="yar"] [data-sec="board"] .x32 .x32-btn{--cta-bg:#2c5a4e;--cta-fg:#fff;background:#2c5a4e!important}
html[data-bf="yar"] [data-sec="board"] .x32 .x32-btn::before{background:#2c5a4e!important}
html[data-bf="yar"] [data-sec="board"] .x32 :is(.x32-note a,.x32-chip .b30-arr){color:#2c5a4e}
html[data-bf="gold"] [data-sec="board"] .x32 .x32-form{background:#fbf8f1!important;box-shadow:inset 0 0 0 1px rgba(201,168,76,.62)!important}
html[data-bf="gold"] [data-sec="board"] .x32 .x32-in{box-shadow:inset 0 0 0 1px rgba(36,38,43,.2)}
html[data-bf="gold"] [data-sec="board"] .x32 .x32-in:focus{box-shadow:inset 0 0 0 1.5px #8a6a1f}
html[data-bf="gold"] [data-sec="board"] .x32 .x32-btn{--cta-bg:#c9a84c;--cta-fg:#24262b;background:#c9a84c!important;color:#24262b!important}
html[data-bf="gold"] [data-sec="board"] .x32 .x32-btn::before{background:#b8963d!important}
/* ══ C34 · разделители (дизайнер C, прогон 34; пункт пульта «Разделители», html[data-rd]: p34 – новое, as – как было) ═══════════════
Роман 02.11: глобус «покрупнее»; книга перед «Ценами» «тоже… увеличить в размерах»; колокольчик «чуть ниже его опустить, и чтобы он… шевелился, болтался»;
«секции достаточно близко друг к другу и к разделителю… расстояние чуть-чуть увеличить по умолчанию».
(1) шаг 240u → 280u (телефон 144 → 168); (2) глобус и книга ×1,35 (телефон ×1,2); (3) у плит (низ «Отзывов», верх и низ «Записи») плита съедала
48–56u зазора – виньетка стояла у самой плиты (колокольчик – в 38u под «Записью» и в 86u над «Между уроками»); теперь зазор у плиты больше на её выступ,
виньетка – посередине видимой бумаги, то есть ниже; (4) колокольчик – отдельным слоем (вырезан из того же рисунка художника, под ним лента та же),
подвес – в кольце; качание от прокрутки ±6° (ключевые кадры M32 m32-sway); маятник с затуханием и «звонок» по касанию – место для M. */
html[data-rh="p32"][data-rd="p34"]{--zg:280}
html[data-rh="p32"][data-rd="p34"][data-gb="nb"] [data-sec="how"]{--p-rw:830;--p-rhh:86}
html[data-rh="p32"][data-rd="p34"] [data-sec="prices"]{--p-rw:603;--p-rhh:97}
html[data-rh="p32"][data-rd="p34"] [data-sec="channel"]{--p-rh:url(/s0/img34/p34-rh-g-nobell.webp)}
/* виньетки у плит: зазор больше на выступ плиты (--zo), виньетка в середине видимой бумаги */
html[data-rh="p32"][data-rd="p34"] [data-sec="how"]{--zo:56}
html[data-rh="p32"][data-rd="p34"] [data-sec="zapis"]{--zo-t:48}
html[data-rh="p32"][data-rd="p34"] [data-sec="channel"]{--zo:48}
html[data-rh="p32"][data-rd="p34"][data-zg="even"] main.wrap > [data-sec]:is([data-sec="how"],[data-sec="zapis"],[data-sec="channel"]):not([hidden]) > section:is(#how,#zapis,#channel,[id]){
margin-top:calc((var(--zg) + var(--zo,0) + var(--zo-t,0)) * var(--u))!important}
html[data-rh="p32"][data-rd="p34"]:not([data-zg="as"]) main.wrap > [data-sec]:is([data-sec="how"],[data-sec="zapis"],[data-sec="channel"]):not([hidden])::before{
margin:calc((var(--zo,0) + (var(--zg) - var(--p-rhh)) * .5) * var(--u)) auto calc(((var(--zg) + var(--p-rhh)) * -.5 - var(--zo,0)) * var(--u))}
/* колокольчик отдельным слоем над лентой: место и размер – доли того же рисунка 1200×171 (слой 118×120 от точки 541, 51) */
html[data-rh="p32"][data-rd="p34"] main.wrap > [data-sec="channel"]:not([hidden]){position:relative}
html[data-rh="p32"][data-rd="p34"] main.wrap > [data-sec="channel"]:not([hidden])::after{content:"";position:absolute;z-index:2;pointer-events:none;
left:calc(50% + (var(--p-rw) * (541 / 1200 - .5)) * var(--u));top:calc(var(--p-rhh) * 51 / 171 * var(--u));
width:calc(var(--p-rw) * 118 / 1200 * var(--u));height:calc(var(--p-rhh) * 120 / 171 * var(--u));
background:url(/s0/img34/p34-bell.webp) 0 0 / 100% 100% no-repeat;transform-origin:50% 5%}
@supports (animation-timeline: view()){ @media (prefers-reduced-motion:no-preference){
html[data-mo="m32"][data-rh="p32"][data-rd="p34"]:not(.still):not([data-theatre="off"]) main.wrap > [data-sec="channel"]:not([hidden])::after{
--m-sway:6deg;animation:m32-sway linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
} }
@media (max-width:1023.98px){
html[data-rh="p32"][data-rd="p34"]{--zg:168}
html[data-rh="p32"][data-rd="p34"][data-gb="nb"] [data-sec="how"]{--p-rw:424;--p-rhh:44}
html[data-rh="p32"][data-rd="p34"] [data-sec="prices"]{--p-rw:342;--p-rhh:55}
/* телефон: выступы плит в px (низ «Отзывов» 40, «Запись» 28) — в u при u ≈ 1 px на 390 */
html[data-rh="p32"][data-rd="p34"] [data-sec="how"]{--zo:40}
html[data-rh="p32"][data-rd="p34"] [data-sec="zapis"]{--zo-t:28}
html[data-rh="p32"][data-rd="p34"] [data-sec="channel"]{--zo:28}
}
/* 34 · главная сессия · пункт «Шапка «Фавор»: гора» (hf = wc): акварельная гора (класс t34wc ставит leaf34.js) – полоса выше и шире коробки,
вершина (41,7 % картинки) встаёт под кнопку записи, долина уходит под облака; на телефоне – прежние размеры слоя */
@media (min-width:1024px){
[data-sec="hero"] .v-sky28 .land28.t34wc{height:46%!important}
[data-sec="hero"] .v-sky28 .land28.t34wc img{width:130%!important;max-width:none!important;margin-left:-26%!important;object-position:50% 100%!important}
}
/* 34 · главная сессия: гряда облаков шапки (hc h34/h34w, телефон ht h34a) – вторая версия художника (заказ 2, g34-clouds-wide-c): внутренние обводки сняты,
облака одно от другого отделены густотой штриха, как складки одеяния ангела; наружный контур тонкий. Отражена целиком, как прежняя (свет слева). */
/* ══ E34: «Редакция» – правки по находкам R1 (картинка и рука) и R2 (польза и механики), исполнитель E, прогон 34 ═══════════════════════
Роман 02.11: «у них будет отдельный пункт в пульте, назовём этот пункт Редакция». Пункт html[data-red]: on – «Прогон 34 · правки Редакции» (по умолчанию),
off – как без них. Всё ниже действует только при on. Что уже взяли дизайнеры H/A/B/C и главная сессия, не повторяю (council64/studio/CHAT.md, REPORT-*.md);
движение и пасхалки – у M. Слова и поведение – leaf34.js (E34). */
/* E34 · (1) R2, главное № 1 – «мелко»: под zoom .9 подписи были 14,4 px на экране, рубрики-капитель 14,4, «образование» 13,5, мелкий курсив Garamond 14,4–15,8,
а основной текст стоял в единицах ширины – Cmd+ его не увеличивал. Пол в px (только ПК, телефон и так ≥ 16): основной текст и подзаголовки ≥ 18 px CSS (16,2 на экране,
растёт с Cmd+ и не мельчает на 1280–1366), подписи ≥ 18, капитель-рубрики ≥ 17, надзаголовок шапки 18u (тест «5 секунд»: что это за сайт – говорит только он);
мелкий курсив Garamond (роль преподавателя, счёт «Отзывов», длительности «Обучения», «Сейчас в Москве…») – прямым Brygada 18.
На 1440 и 1710 основной текст не меняется (он там уже 18 и больше), растут подписи и рубрики – все разделы по-прежнему в один экран (≤ 778, проверено fit1). Подвал – как был (см. (7)); телефон не трогаю:
там подписи и так 16–17 px, а надзаголовок шапки в 18 px не встаёт в строку. */
@media (min-width:1024px){
html[data-red="on"]:not([data-tt="as"]) :is(.zd-card .zd-txt > p, .zv-p, .v-x30k .d7-p, .fq-t, .y30a-gift-a > p, .pz-lead, .x30h-bx, .h30-steps .h30-s, .y30a-s){
font-size:max(18px, calc(var(--t-body) * var(--ut)))!important}
html[data-red="on"]:not([data-tt="as"]) .rubric .rubric-sub{font-size:max(18px, calc(var(--t-sub) * var(--ut)))!important}
html[data-red="on"]:not([data-tt="as"]) :is(.rv17-who, .b30-note, .x32-note, .zf-st p > span, .v-x30k .d7-st span, .fq-next a > span, .z-consent, [data-sec="zapis"] .hint,
.y30a-row dt > i, .y30a-opts p > span, .z32-f, .zf-ed .zf-ed-i){
font-size:max(18px, calc(var(--t-cap) * var(--ut)))!important}
html[data-red="on"]:not([data-tt="as"]) :is(.h30-k, .b30-k > span:not(.b30-k2), .y30-k, .y32-k, .zd1-kick, .pz-k, .x32-k, .z32-k, .zf-ed .zf-ed-k, .nw-pill){
font-size:max(17px, calc(var(--t-kick) * var(--ut)))!important}
html[data-red="on"]:not([data-tt="as"]) #hero :is(.t-kicker, .t-kicker .y){font-size:calc(18 * var(--u))!important} /* leaf32 держит кегль через #hero */
html[data-red="on"][data-tt]:not([data-tt="as"]) :is(.zf-role, .rv17-cnt, .h30-m, .zd1-meta){font-family:var(--f-text)!important;font-style:normal!important;letter-spacing:0!important;
font-size:max(18px, calc(var(--t-cap) * var(--ut)))!important}
}
/* E34 · (2) R1 «Типографика»: крупные цифры были в трёх видах (прямые лазурью, курсив лазурью у преподавателей, тушь) → цифры-факты прямые лазурью
(годы и стаж преподавателей, итог в «Отзывах»), цена – тушью (подарочные сертификаты и «Подслушники» были лазурью). Надзаголовки двух цветов
(ярь в «Ценах», золото везде) → все тёмным золотом. */
html[data-red="on"] [data-sec="teachers"] .zf-st b{font-style:normal!important}
html[data-red="on"] [data-sec="reviews"] .rv17-card[data-tone] .rv17-stat{color:#29466f!important}
html[data-red="on"] [data-sec="prices"] .y30a-opts b{color:#24262b!important}
html[data-red="on"] [data-sec="channel"] .z32-num{color:#24262b!important}
html[data-red="on"] [data-sec="prices"] :is(.y30-k,.y32-k){color:#8a6a1f!important}
/* E34 · (3) R1 «Преподаватели» (основной z32c): плашка с именем стояла со сдвигом от фото (+10 и −25 px) – теперь ровно по краям фото, цифры и образование – по тому же краю;
белый угол фото Ярослава сливался с листом – волосяная кайма внутри фото (фото не тронуто). У a34c это сделала A. */
@media (min-width:1024px){
html[data-red="on"] .v-z32c .zf-lb{margin-left:calc(var(--zf-in) + 12 * var(--u))!important;margin-right:calc(var(--zf-in) + 12 * var(--u))!important}
html[data-red="on"] .v-z32c :is(.zf-st,.zf-dip){margin-left:calc(var(--zf-in) + 12 * var(--u))!important}
}
html[data-red="on"] .v-z32c .zf-ph img{outline:1px solid rgba(36,38,43,.14);outline-offset:-1px}
/* E34 · (4) R1 + R2 «Отзывы» (все три варианта): (а) на странице было четыре системы буквиц – здесь квадраты с белой буквой сняты, буквица – цветная буква
на две строки, как «Ч» «Записи» (систем две: висячая буквица и цветная первая буква); цвета по кругу «С чего начать» – лазурь, ярь, золото с тёмным краем,
буквицы по-прежнему разного цвета (слово Романа 31.10); (б) окно цитаты держало семь строк – под короткими отзывами было 90–130 px пустоты,
теперь высота по самому длинному отзыву ряда; (в) строка «Четыре отзыва с нашего сайта» читалась как «их мало» – снята; (г) после стрелок – путь к записи
«Хочешь так же? Первый урок – бесплатно →» (строку ставит leaf34.js; стрелки на месте); (д) кавычки „…“ → «…» (leaf34.js). */
html[data-red="on"] [data-sec="reviews"] .v-sheet17 .rv17-card:nth-child(n) .rv17-cap{display:block!important;width:auto!important;height:auto!important;background:none!important;
border-radius:0!important;box-shadow:none!important;font:500 calc(62 * var(--u))/.74 var(--f-head)!important;margin:calc(7 * var(--u)) calc(9 * var(--u)) 0 calc(-1 * var(--u))!important;
color:#29466f!important;text-shadow:none!important}
html[data-red="on"] [data-sec="reviews"] .v-sheet17 .rv17-card:nth-child(3n+2) .rv17-cap{color:#2c5a4e!important}
html[data-red="on"] [data-sec="reviews"] .v-sheet17 .rv17-card:nth-child(3n) .rv17-cap{color:#c9a84c!important;text-shadow:0 calc(2 * var(--u)) 0 #8a6a1f!important}
html[data-red="on"] [data-sec="reviews"] .v-sheet17 .rv17-card{min-height:0!important}
html[data-red="on"] [data-sec="reviews"] .v-sheet17 .rv17-txt{height:auto!important;max-height:calc(20 * 1.36 * 7 * var(--u))!important}
@media (max-width:1023.98px){
html[data-red="on"] [data-sec="reviews"] .v-sheet17 .rv17-card:nth-child(n) .rv17-cap{font-size:calc(56 * var(--u))!important}
html[data-red="on"] [data-sec="reviews"] .v-sheet17 .rv17-txt{max-height:calc(19 * 1.36 * 8 * var(--u))!important}
}
html[data-red="on"] [data-sec="reviews"] .rubric .rubric-sub{display:none!important}
.e34-rvgo{display:none}
html[data-red="on"] [data-sec="reviews"] .e34-rvgo{display:block;margin:calc(12 * var(--u)) 0 0;text-align:center;
font:italic 400 max(18px, calc(20 * var(--u)))/1.35 var(--f-head);color:#fbf8f1}
html[data-red="on"] [data-sec="reviews"] .e34-rvgo a{display:inline-flex;align-items:center;min-height:44px;font-weight:500;color:#fbf8f1;
text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.24em;text-decoration-color:rgba(251,248,241,.5)}
html[data-red="on"] [data-sec="reviews"] .e34-rvgo a::after{content:"\2192";display:inline-block;margin-left:.3em;text-decoration:none}
@media (hover:hover){ html[data-red="on"] [data-sec="reviews"] .e34-rvgo a:hover{color:#e9cf8e;text-decoration-color:currentColor} }
/* E34 · (5) R2 «Найди ошибку» (все варианты «Совести»): ответ «Верно!» вставал над словами, а глаз – на словах; дальше вела только мелкая «Ещё пример».
Ответ – под фразой, подсказка над фразой остаётся, место под две строки ответа держится (коробка не прыгает); после ответа «Ещё пример» становится
«Следующий пример →» (leaf34.js). Номера 1–6 обведены разными цветами без смысла → тушью: текущий залит, найденный с ✓ (как у B в b34c/d/e – здесь для y32a);
за 6 из 6 – «Шесть из шести – глаз корректора.» (leaf34.js; в b34 – b34.js). */
html[data-red="on"] :is(.v-y32a,.v-y32b) .y32-err{grid-template-areas:"k" "lead" "line" "msg" "nav" "foot"!important}
html[data-red="on"] :is(.v-y32a,.v-y32b) .y30s-hon .y32-err > .err-k.y32-lead{grid-area:lead}
html[data-red="on"] :is(.v-y32a,.v-y32b) .y32-err:has(> .err-say:not(:empty)) > .y32-lead{visibility:visible}
html[data-red="on"] :is(.v-y32a,.v-y32b) .y30s-hon .y32-err > .err-say{grid-area:msg;margin-top:calc(14 * var(--u))!important;min-height:calc(2 * 1.45em)}
html[data-red="on"] section.v-y32a:not(.v-b34) .y30s-hon .err-nav button[aria-label]:nth-child(n){--c:var(--ink);--cf:#fbf8f1;--cb:var(--ink)}
html[data-red="on"] section.v-y32a:not(.v-b34) .y30s-hon .err-nav button[aria-label] i{background:#fffdf8}
html[data-red="on"] section.v-y32a:not(.v-b34) .y30s-hon .err-nav button[aria-pressed="true"] i{background:var(--ink)}
html[data-red="on"] :is(.v-y32a,.v-y32b) .y30s-hon .err-nav .err-more.e34-next{color:var(--azure)!important;font-weight:600!important;text-decoration:underline;
text-decoration-thickness:1px;text-underline-offset:.24em;text-decoration-color:currentColor}
/* E34 · (6) R1 «Вопросы» и канал: осенние ветки – оранжевые (REJ 35, оранжевого в палитре нет) и размером с наклейку («скрапбук», REJ 24) – сняты
(Роман 27.10 «пока осень – осень»: крупная ветка в палитре – заказ куратору/художнику, в отчёте) */
/* главная сессия: правило снятия веточек НЕ взято – Роман 27.10 «пока осень – осень»; вопрос Роману – заменить крупной веткой в палитре? */
/* E34 · (7) R1 «Подвал» + R2: между последней плитой и подвалом стояло ≈ 200 px пустого листа (шаг 280u минус выступ плиты канала). R1: «книжная концовка
или зазор 64 px». Концовку («Explicit» над подвалом) делает M пасхалкой (пункт eg) – при ней зазор не трогаю: колофон стоит в этом зазоре.
Без колофона – видимой бумаги 64u (телефон 48u): шаг = 64u + выступ плиты канала под коробками (c33a/c33b/mix – 56u, yar/az – 44u; телефон 32/28 px;
c33c без плиты – 0). Строки подвала – как были: при 18 px строка ссылок не помещается в ширину на 1280–1440 (проверено). */
html[data-red="on"]{--e34-po:0px}
html[data-red="on"]:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="mix"]){--e34-po:calc(56 * var(--u))}
html[data-red="on"]:is([data-zp="yar"],[data-zp="az"]){--e34-po:calc(44 * var(--u))}
html[data-red="on"][data-zg="even"]:not([data-eg="e34"]) main.wrap > [data-sec="contacts"] > section:is(#contacts,[id]){margin-top:calc(64 * var(--u) + var(--e34-po))!important}
@media (max-width:1023.98px){
html[data-red="on"]:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="mix"]){--e34-po:32px}
html[data-red="on"]:is([data-zp="yar"],[data-zp="az"]){--e34-po:28px}
html[data-red="on"][data-zg="even"]:not([data-eg="e34"]) main.wrap > [data-sec="contacts"] > section:is(#contacts,[id]){margin-top:calc(48 * var(--u) + var(--e34-po))!important}
}
/* E34 · (8) R2 «Шапка»: в «Меню» телефона не было ни записи, ни Telegram – внизу меню залитая «Записаться на бесплатный урок» и «или в Telegram» (leaf34.js) */
.e34-mcta{display:none}
@media (max-width:1023.98px){
html[data-red="on"] header.bar .lf24-nav .e34-mcta{display:grid;justify-items:start;gap:2px;padding:14px 0 2px}
html[data-red="on"] header.bar .lf24-nav .e34-mcta a.e34-mbtn{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;padding:0 16px;
border:0;border-radius:8px;background:#29466f;color:#fbf8f1;font:500 18px/1.2 var(--f-text,Vollkorn,Georgia,serif);text-decoration:none}
html[data-red="on"] header.bar .lf24-nav .e34-mcta a.e34-mtg{display:inline-flex;align-items:center;min-height:44px;border:0;padding:0;
font:italic 500 18px/1.3 var(--f-head,"EB Garamond",Georgia,serif);color:#24262b;text-decoration:underline;text-decoration-thickness:1px;
text-underline-offset:.24em;text-decoration-color:rgba(36,38,43,.35)}
}
/* 34 · главная сессия · пункт «Шапка: что держит ангел» (ho): поле надписи – по чистой поверхности нового предмета (углы – от художника, в px картинки 1120;
1 px = 0,0892857 cqw – ширина ангела, как у H34). Стиль строк – как в пункте «Надпись ангела». ПК и телефон – одна геометрия (верх картинок совпадает). */
html:is([data-ho="sfix"],[data-ho="tab"],[data-ho="book"]) [data-sec="hero"] .v-angel17.hero .angel .sheet{left:0!important;top:0!important;transform-origin:0 0!important;
box-sizing:border-box!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;align-items:center!important;align-content:center!important;justify-items:center}
/* свиток выправлен: поле (580,745)–(925,1125) */
html[data-ho="sfix"] [data-sec="hero"] .v-angel17.hero .angel .sheet{width:30.8cqw!important;height:33.93cqw!important;transform:translate(51.79cqw,66.52cqw)!important;padding:1cqw 1.4cqw 1.6cqw!important}
/* скрижаль: поле 320×329, повёрнуто на 5° по часовой, верхний левый угол (597,782) */
html[data-ho="tab"] [data-sec="hero"] .v-angel17.hero .angel .sheet{width:28.59cqw!important;height:29.4cqw!important;transform:translate(53.3cqw,69.82cqw) rotate(5.02deg)!important;padding:1cqw 1.4cqw!important}
/* книга: левая страница (482,700)–(728,1120) – стих по-английски; правая (778,745)–(1028,1180) – перевод (тот же, что в «Переводе»), курсивом */
html[data-ho="book"] [data-sec="hero"] .v-angel17.hero .angel .sheet{width:21.96cqw!important;height:37.5cqw!important;transform:translate(43.04cqw,62.5cqw)!important;padding:1cqw 1.2cqw!important}
html[data-ho="book"] [data-sec="hero"] .v-angel17.hero .angel .pv{font-size:3.9cqw!important;line-height:1.16!important}
html[data-ho="book"] [data-sec="hero"] .v-angel17.hero .angel .pv.long{font-size:3.1cqw!important}
html[data-ho="book"] [data-sec="hero"] .v-angel17.hero .angel .pv::after{content:attr(data-ru);position:absolute;left:calc(100% + 4.46cqw);top:4.02cqw;width:22.32cqw;height:38.84cqw;
box-sizing:border-box;padding:1cqw 1.4cqw;display:flex;align-items:center;justify-content:center;text-align:center;text-wrap:balance;
font:italic 500 3.4cqw/1.2 var(--f-text);color:#2a1f14;letter-spacing:0}
html[data-ho="book"] [data-sec="hero"] .v-angel17.hero .angel .pv.long::after{font-size:2.8cqw}
@media (max-width:1023.98px){
html[data-ho="book"] [data-sec="hero"] .v-angel17.hero .angel :is(.pv,.pv.long){font-size:max(11px, 4.6cqw)!important}
html[data-ho="book"] [data-sec="hero"] .v-angel17.hero .angel .pv::after{font-size:max(10px, 3.6cqw)}
html[data-ho="book"] [data-sec="hero"] .v-angel17.hero .angel .pv cite{font-size:max(9px, 3.2cqw)!important}
}
/* ══ M34: движение, живые элементы, пасхалки (мастер движения M, прогон 34) ══════════════════════════════════════════════
Пункты пульта: «Движение» (html[data-mo]) – m34 новая система / m32 как сейчас; «Живые элементы» (html[data-lv]) – l34 / as;
«Пасхалки» (html[data-eg]) – e34 / as. Одна система (R2): круглое на шве вращается от прокрутки (роза, чернушка, василёк, роза ветров),
подвесное качается ±5° (колокольчик), живое ползёт (улитка), фон отстаёт; остальное только проявляется. Бесконечная петля – одна на экран
(в шапке – дыхание нимба). Только transform/opacity; reduced-motion и «Остановить движение» (html.still, data-theatre=off) – всё стоит.
Элементы и кнопки-пасхалки вставляет leaf34.js (блок M34) во ВСЕ варианты разделов. Правила движения, завязанные на data-mo="m32",
для m34 повторены здесь (1); дальше писать :is([data-mo="m32"],[data-mo="m34"]). */
/* M34 · (1) m34 наследует всё движение m32: стрелки, проявление разделов, крючки P/M, вход виньеток, роза «Отзывов», колокольчик C34 */
html[data-mo="m34"] [data-sec="faq"] [data-m32-cta] b::after{content:none!important}
html[data-mo="m34"] .m32-chev{display:flex}
html[data-mo="m34"] .m32-arr{display:inline-block}
html[data-mo="m34"].m32-rv-on .m32-rv:not(.m32-in){opacity:0;transform:translate3d(0,calc(var(--m-rise) * var(--u)),0)}
html[data-mo="m34"].m32-rv-on .m32-rv{transition:opacity var(--m-mid) var(--m-ease),transform var(--m-mid) var(--m-ease);transition-delay:calc(var(--m-i,0) * var(--m-step))}
@media (prefers-reduced-motion:no-preference){
html[data-mo="m34"].js:not(.still):not([data-theatre="off"]) .rise:not(.is-in){transform:translate3d(0,calc(var(--m-rise) * var(--u)),0)}
html[data-mo="m34"].js .rise{transition-duration:var(--m-mid);transition-timing-function:var(--m-ease);transition-delay:calc(var(--i,0) * var(--m-step))}
}
@supports (animation-timeline: view()){ @media (prefers-reduced-motion:no-preference){
html[data-mo="m34"]:not(.still):not([data-theatre="off"]) [data-m-spin]{animation:m32-spin linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
html[data-mo="m34"]:not(.still):not([data-theatre="off"]) [data-m-sway]{animation:m32-sway linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
html[data-mo="m34"]:not(.still):not([data-theatre="off"]) [data-m-in]{animation:m32-in linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
html[data-mo="m34"]:is([data-rh="d31a"],[data-rh="d31c"]):not(.still):not([data-theatre="off"]) :is([data-sec="courses"],[data-sec="how"],[data-sec="tests"],[data-sec="prices"],[data-sec="zapis"]):not([hidden])::before,
html[data-mo="m34"][data-rh="p32"]:not(.still):not([data-theatre="off"]) main.wrap > [data-sec]:not([hidden])::before{animation:m32-in linear both;animation-timeline:view();animation-range:entry 10% entry 90%}
html[data-mo="m34"][data-rh="p32"]:is([data-zp="yar"],[data-zp="az"],[data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]):not(.still):not([data-theatre="off"]) main.wrap > [data-sec="reviews"]:not([hidden])::before{
--m-spin:90deg;animation:m32-spin linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
/* колокольчик C34: подвесное по системе – ±5° от прокрутки (у m32 – ±6°) */
html[data-mo="m34"][data-rh="p32"][data-rd="p34"]:not(.still):not([data-theatre="off"]) main.wrap > [data-sec="channel"]:not([hidden])::after{
--m-sway:5deg;animation:m32-sway linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
} }
/* M34 · (2) петли: стрелка под кнопкой шапки – три качания и стоп, снова при наведении на кнопку или стрелку (класс ставит JS);
в кнопке «Вопросов» – три качания, когда кнопка вошла в экран. Блики ангела – один проход при загрузке, снова при наведении на ангела.
Остаётся одна бесконечная петля на первом экране – дыхание нимба (H34, только прозрачность). */
@keyframes m34-bob{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,calc(var(--m-amp,9) * var(--u)),0)}}
html[data-mo="m34"] .m32-arr{animation-iteration-count:3}
html[data-mo="m34"] .m32-arr.m34-again{animation-name:m34-bob}
html[data-mo="m34"] [data-sec="faq"] .m32-arr:not(.m34-seen){animation-play-state:paused}
html[data-mo="m34"] .g25-glint::before,html[data-mo="m34"] .g25-glint::after{animation-iteration-count:1}
@keyframes m34-glint-a{0%,6%{opacity:0}26%{opacity:1}48%,100%{opacity:0}}
@keyframes m34-glint-b{0%,22%{opacity:0}44%{opacity:1}66%,100%{opacity:0}}
html[data-mo="m34"] .g25-glint.m34-again::before{animation:m34-glint-a 3.4s ease-in-out 1}
html[data-mo="m34"] .g25-glint.m34-again::after{animation:m34-glint-b 3.4s ease-in-out 1}
/* M34 · (3) «Вопросы» (S2 п. 7): строка вопроса при наведении отъезжает на 8u, буквица стоит; черта под строкой дотягивается (ПК, мышь) */
@media (hover:hover) and (pointer:fine) and (min-width:1024px) and (prefers-reduced-motion:no-preference){
html[data-mo="m34"]:not(.still):not([data-theatre="off"]) [data-sec="faq"] .fq-q .m34-qt{display:inline-block;transition:transform var(--m-fast) var(--m-ease)}
html[data-mo="m34"]:not(.still):not([data-theatre="off"]) [data-sec="faq"] .fq-q[aria-expanded="false"]:hover .m34-qt{transform:translate3d(calc(8 * var(--u)),0,0)}
html[data-mo="m34"]:not(.still):not([data-theatre="off"]) [data-sec="faq"] .fq-q[aria-expanded="false"]:hover > .t{padding-right:calc(8 * var(--u))}
}
/* M34 · (4) «Какой ты студент» (S2 ★2, слои A34): объём за мышью – площадь стоит, дома-кулисы ±4 px, дальние двое ±5, ближние двое ±10;
против курсора, без петли (только отклик); мышь ушла – всё мягко на место. Площадь не двигаем: у кромки коробки открылась бы полоса.
Только ПК с мышью; телефон и reduced-motion – стоит. */
@media (hover:hover) and (pointer:fine) and (min-width:1024px) and (prefers-reduced-motion:no-preference){
html[data-mo="m34"]:not(.still):not([data-theatre="off"]) [data-sec="tests"] .d7-ty :is(.a34-wing,.d7-fb){transition:translate .6s var(--m-ease)}
html[data-mo="m34"]:not(.still):not([data-theatre="off"]) [data-sec="tests"] .d7-ty .d7-f .d7-fb{translate:calc(var(--m34-mx,0) * -5px) calc(var(--m34-my,0) * -2px)}
html[data-mo="m34"]:not(.still):not([data-theatre="off"]) [data-sec="tests"] .d7-ty .a34-wing{translate:calc(var(--m34-mx,0) * -4px) calc(var(--m34-my,0) * -2px)}
html[data-mo="m34"]:not(.still):not([data-theatre="off"]) [data-sec="tests"] .d7-ty .d7-f.a34-near .d7-fb{translate:calc(var(--m34-mx,0) * -10px) calc(var(--m34-my,0) * -4px)}
}
/* M34 · (5) «Остановить движение» в подвале (R2, WCAG 2.2.2): строка-кнопка под часами ответа; помнит выбор (ce-still, как foot.js) */
.m34-still-ln{display:block}
.m34-still{appearance:none;-webkit-appearance:none;border:0;background:none;margin:0;padding:0;font:inherit;color:inherit;cursor:pointer;
min-height:44px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;font-style:italic}
.m34-still:hover{color:var(--azure,#29466f)}
html:not([data-mo="m34"]) :is(.m34-still,.m34-still-ln){display:none}
/* M34 · (6) живые элементы (пункт «Живые элементы», html[data-lv]): настоящие PD-рисунки – альбом «Historia Naturalis» де Бодта для Рудольфа II
(1596–1610, Рейксмузеум): чернушка, василёк, щегол, улитка; роза ветров (Рейксмузеум, 1598) – одной линией тёмного золота, вторым слоем.
Вырезаны с бумаги начисто (маска по цвету + IS-Net, без перекраски), одна обработка – живая тень бумаги. Первый слой – на кромках коробок
поверх (как роза «Отзывов»), второй – роза ветров за карточками «Направлений». Элемент – кнопка: при включённых пасхалках он – предмет
«Слова на полях». Если элемент ложится на текст, кнопку или картинку раздела – скрипт его прячет (data-m34-hide). */
.m34-lv{position:absolute;z-index:5;display:block;margin:0;padding:0;border:0;background:none;line-height:0;cursor:default;
-webkit-tap-highlight-color:transparent;transform-origin:50% 50%}
.m34-lv img{display:block;width:100%;height:auto;pointer-events:none;user-select:none;-webkit-user-select:none;
filter:drop-shadow(0 calc(3 * var(--u)) calc(4 * var(--u)) rgba(36,38,43,.22)) drop-shadow(0 0 1px rgba(36,38,43,.14))}
.m34-lv[data-m34-hide]{visibility:hidden}
html:not([data-lv="l34"]) .m34-lv{display:none!important}
html[data-eg="e34"] .m34-lv{cursor:pointer}
html:not([data-eg="e34"]) .m34-lv{pointer-events:none}
.m34-lv:focus-visible{outline:3px solid var(--azure,#29466f);outline-offset:4px;border-radius:50%}
/* «Тест уровня» (твоё: «справа вверху… не хватает… крутящихся элементов… или пасхалку»): синий василёк на верхней кромке коробки
над колонкой текста, вращается от прокрутки; виден, пока на экране «Тест уровня» (карусель). Первая пасхалка – out of the blue. */
.m34-lv-corn{right:calc(46 * var(--u));top:calc(-70 * var(--u));width:calc(150 * var(--u));transition:opacity .7s ease,visibility 0s}
.d7-row.car25:has(> .d7-lv:not(.is-on)) > .m34-lv-corn{opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s .5s}
/* «Запись» (твоё: «добавить крутящихся цветочков… пасхалки, фоновые и не фоновые»): голубая чернушка (love-in-a-mist) на шве плиты слева (вращается;
светлая – читается и на бумаге, и на лазури/яри)
и щегол на кромке плиты справа – стоит на ней, как на полке. Шов – верх плиты (скрипт: --m34-seam). Вариантов без плиты нет – нет и их. */
.m34-lv-nigella{left:calc(-36 * var(--u));top:calc(var(--m34-seam,-48px) - 52 * var(--u));width:calc(106 * var(--u))}
.m34-lv-finch{right:calc(120 * var(--u));top:calc(var(--m34-seam,-48px) - 76 * var(--u));width:calc(138 * var(--u));transform-origin:50% 100%}
/* «Обучение»: улитка ползёт по верхней кромке картины справа налево – от прокрутки, на 40u за проход (slow and steady) */
.m34-lv-snail{right:calc(var(--m34-ax,0px) + 150 * var(--u));top:calc(var(--m34-ay,0px) - 56 * var(--u));width:calc(128 * var(--u));transform-origin:90% 100%}
/* «Направления»: роза ветров вторым слоем – за правым верхом карточек, видна над ними справа от заголовка; вращается от прокрутки (±25°) */
.m34-lv-compass{right:calc(-46 * var(--u));top:calc(-196 * var(--u));width:calc(330 * var(--u));z-index:-1}
.m34-lv-compass img{filter:none}
.m34-lvhost{position:relative}
.m34-lvhost--iso{isolation:isolate}
@media (max-width:1023.98px){
.m34-lv-corn{right:10px;top:-30px;width:82px}
.m34-lv-nigella{left:-4px;top:calc(var(--m34-seam,-28px) - 54px);width:62px}
.m34-lv-finch{right:14px;top:calc(var(--m34-seam,-28px) - 50px);width:90px}
.m34-lv-snail{right:calc(var(--m34-ax,0px) + 34px);top:calc(var(--m34-ay,0px) - 34px);width:78px}
.m34-lv-compass{display:none!important}
}
/* движение от прокрутки – общими ключевыми кадрами M32 (m32-spin / m32-sway) и своим «ползёт» */
@keyframes m34-crawl{from{translate:calc(20 * var(--u)) 0}to{translate:calc(-20 * var(--u)) 0}}
@supports (animation-timeline: view()){ @media (prefers-reduced-motion:no-preference){
html:is([data-mo="m32"],[data-mo="m34"]):not(.still):not([data-theatre="off"]) :is(.m34-lv-nigella,.m34-lv-corn) img{--m-spin:90deg;animation:m32-spin linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
html:is([data-mo="m32"],[data-mo="m34"]):not(.still):not([data-theatre="off"]) .m34-lv-compass img{--m-spin:50deg;animation:m32-spin linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
html:is([data-mo="m32"],[data-mo="m34"]):not(.still):not([data-theatre="off"]) .m34-lv-snail img{animation:m34-crawl linear both;animation-timeline:view();animation-range:cover 10% cover 90%}
html:is([data-mo="m32"],[data-mo="m34"]):not(.still):not([data-theatre="off"]) .m34-lv-finch img{animation:m32-in linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
} }
/* M34 · (7) «Слова на полях» – пасхалки одной системой (R2): у предмета по действию (наведение 0,4 с, касание, клавиша) проступает глосса писца –
английское выражение и его русский смысл; одна за раз; Esc / касание вне – закрыть; не ложится на кнопки и форму; счётчик «N из M»;
в конце страницы – колофон «Explicit». Предметы – кнопки с aria-label (живые элементы и прозрачные кнопки над вещами и разделителями). */
.m34-hs{position:absolute;z-index:6;display:block;margin:0;padding:0;border:0;background:none;border-radius:50%;cursor:pointer;-webkit-tap-highlight-color:transparent}
.m34-hs:focus-visible{outline:3px solid var(--azure,#29466f);outline-offset:2px}
html:not([data-eg="e34"]) :is(.m34-hs,.m34-colo){display:none!important}
.m34-gloss{position:fixed;z-index:70;left:0;top:0;box-sizing:border-box;width:max-content;max-width:400px;font-family:inherit;
padding:14px 18px 15px;background:#fffdf8;color:var(--ink,#24262b);border:1px solid rgba(36,38,43,.16);border-radius:8px;
box-shadow:0 1px 0 rgba(36,38,43,.05),0 14px 34px rgba(36,38,43,.18);text-align:left;
opacity:0;transform:translate3d(0,6px,0);transition:opacity .24s ease,transform .24s cubic-bezier(.2,.7,.2,1),visibility 0s .24s;visibility:hidden;pointer-events:none}
.m34-gloss.is-on{opacity:1;transform:none;visibility:visible;pointer-events:auto;transition:opacity .24s ease,transform .24s cubic-bezier(.2,.7,.2,1),visibility 0s}
.m34-gl-k{display:block;font-weight:500;font-size:16px;line-height:1.25;letter-spacing:.06em;text-transform:uppercase;color:#7a5c14}
.m34-gl-en{display:block;margin-top:6px;font:italic 400 30px/1.1 var(--f-head,Georgia,serif);color:var(--azure,#29466f)}
.m34-gl-ru{display:block;margin-top:5px;font-size:19px;line-height:1.32;color:var(--ink,#24262b)}
.m34-gl-n{display:block;margin-top:6px;font-size:16px;line-height:1.38;font-style:italic;color:var(--ink,#24262b)}
.m34-gl-n:empty{display:none}
.m34-gl-all[hidden]{display:none}
.m34-gl-all{display:inline-block;margin-top:8px;font:italic 400 18px/1.3 var(--f-head,Georgia,serif);color:var(--azure,#29466f);text-underline-offset:.18em}
@media (prefers-reduced-motion:reduce){ .m34-gloss,.m34-gloss.is-on{transform:none;transition:opacity .01s,visibility 0s} }
html:is(.still,[data-theatre="off"]) .m34-gloss{transform:none}
/* ответ предмета на действие – короткий, один раз (не петля); при reduced-motion / «Остановить движение» – без движения, только глосса */
@keyframes m34-whirl{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes m34-seek{0%{transform:rotate(0)}55%{transform:rotate(392deg)}75%{transform:rotate(352deg)}90%{transform:rotate(364deg)}100%{transform:rotate(360deg)}}
@keyframes m34-hop{0%,100%{transform:translate3d(0,0,0) rotate(0)}22%{transform:translate3d(0,calc(-12 * var(--u)),0) rotate(-4deg)}44%{transform:translate3d(0,0,0) rotate(0)}62%{transform:translate3d(0,calc(-5 * var(--u)),0) rotate(2deg)}80%{transform:translate3d(0,0,0)}}
@keyframes m34-stretch{0%,100%{transform:scaleX(1)}45%{transform:scaleX(1.07)}70%{transform:scaleX(.98)}}
@keyframes m34-tilt{0%,100%{transform:rotate(0)}30%{transform:rotate(-5deg)}60%{transform:rotate(2.5deg)}80%{transform:rotate(-1deg)}}
@keyframes m34-flip{from{transform:perspective(500px) rotateY(0)}to{transform:perspective(500px) rotateY(720deg)}}
@keyframes m34-lift{0%,100%{transform:translate3d(0,0,0)}40%{transform:translate3d(0,calc(-8 * var(--u)),0) rotate(-2deg)}}
@keyframes m34-ring{0%{transform:rotate(0)}12%{transform:rotate(14deg)}30%{transform:rotate(-10deg)}48%{transform:rotate(7deg)}66%{transform:rotate(-4deg)}82%{transform:rotate(2deg)}100%{transform:rotate(0)}}
@media (prefers-reduced-motion:no-preference){
html:not(.still):not([data-theatre="off"]) :is(.m34-lv-nigella,.m34-lv-corn).m34-wake{animation:m34-whirl 1.1s cubic-bezier(.2,.7,.2,1) 1}
html:not(.still):not([data-theatre="off"]) .m34-lv-compass.m34-wake{animation:m34-seek 2.2s cubic-bezier(.3,.6,.3,1) 1}
html:not(.still):not([data-theatre="off"]) .m34-lv-finch.m34-wake{animation:m34-hop .9s ease-out 1}
html:not(.still):not([data-theatre="off"]) .m34-lv-snail.m34-wake{animation:m34-stretch 2.2s ease-in-out 1}
html:not(.still):not([data-theatre="off"]) .a34-hb.m34-wake img{transform-origin:50% 92%;animation:m34-tilt 1s ease-out 1}
html:not(.still):not([data-theatre="off"]) .b34-coin.m34-wake{animation:m34-flip 1s cubic-bezier(.3,.6,.3,1) 1}
html:not(.still):not([data-theatre="off"]) .b34-spect.m34-wake{animation:m34-lift .8s ease-out 1}
}
/* роза «Отзывов» и колокольчик – псевдоэлементы: к движению от прокрутки добавляется ответ (оборот / звон), свойство transform не спорит с rotate */
@supports (animation-timeline: view()){ @media (prefers-reduced-motion:no-preference){
html:is([data-mo="m32"],[data-mo="m34"])[data-rh="p32"][data-zp]:not(.still):not([data-theatre="off"]) main.wrap > [data-sec="reviews"].m34-whirl:not([hidden])::before{
animation:m32-spin linear both,m34-whirl 1.2s cubic-bezier(.2,.7,.2,1) 1;animation-timeline:view(),auto;animation-range:cover 0% cover 100%,normal}
html:is([data-mo="m32"],[data-mo="m34"])[data-rh="p32"][data-rd="p34"]:not(.still):not([data-theatre="off"]) main.wrap > [data-sec="channel"].m34-ring:not([hidden])::after{
animation:m32-sway linear both,m34-ring 2.4s ease-out 1;animation-timeline:view(),auto;animation-range:cover 0% cover 100%,normal}
} }
/* колофон (R2): «Explicit» в пустоте над подвалом – проявляется, когда дочитал до конца */
.m34-colo{position:absolute;left:0;right:0;bottom:100%;margin:0 auto calc(34 * var(--u));max-width:calc(760 * var(--u));text-align:center;color:var(--ink,#24262b);
opacity:0;transform:translate3d(0,calc(10 * var(--u)),0);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.m34-colo.is-in{opacity:1;transform:none}
.m34-co-x{margin:0;font:italic 400 calc(40 * var(--u))/1 var(--f-head,Georgia,serif);color:#8a6a1f}
.m34-co-x::before,.m34-co-x::after{content:"✛";font-style:normal;font-size:.5em;vertical-align:.32em;margin:0 .5em;color:#c9a84c}
.m34-co-t{margin:calc(10 * var(--u)) 0 0;font-size:max(17px, calc(19 * var(--u)));line-height:1.4}
.m34-co-t a{color:var(--azure,#29466f);font-style:italic;white-space:nowrap}
.m34-co-c{margin:calc(6 * var(--u)) 0 0;font-size:16px;line-height:1.4;font-style:italic}
@media (prefers-reduced-motion:reduce){ .m34-colo{transform:none;transition:opacity .01s} }
html:is(.still,[data-theatre="off"]) .m34-colo{transform:none}
/* телефон: над подвалом места мало – колофон встаёт первой строкой самого подвала (в потоке, не наезжает на «Между уроками»);
зазор над подвалом – как у E34 без колофона (48u + выступ плиты), иначе над колофоном оставалась пустая бумага */
@media (max-width:1023.98px){ .m34-colo{position:static;margin:0 auto;padding:22px 16px 6px} .m34-co-x{font-size:32px}
html[data-red="on"][data-zg="even"][data-eg="e34"] main.wrap > [data-sec="contacts"] > section:is(#contacts,[id]){margin-top:calc(48 * var(--u) + var(--e34-po,0px))!important} }
/* 34 · главная сессия (рецензент): подчёркивание открытого вопроса шло цветом буквицы – у киноварной (ini-1) выходила красная линия под текстом;
исключение Романа – только буквицы, поэтому у них линия золотом. Буквица-предлог («С какого уровня») – после неё неразрывный пробел в разметке (на ПК пробел схлопывался: «Скакого»). */
.v-owl18 .fq-q:has(.ini-1){--ul:var(--gold)}
/* 34 · главная сессия (рецензент): телефон «от края до края» (ht h34a) – на низком окне (393×723, iPhone Романа) полоса облаков кончалась за 9 px
до правого края, внизу шапки была видна полоса листа. Ширина полосы – не меньше, чем до правого края + 8 px (на 390×844 и шире – как было). */
@media (max-width:1023.98px){
html[data-ht="h34a"] [data-sec="hero"] .v-sky28.v-angel17.hero::after{width:max(calc(495 * var(--u)), calc(50% + 273 * var(--u) + 8px))}
}
/* s0/leaf35.css */
/* прогон 35 — слой поверх leaf34 */
/* ══ D35: разделители страниц (дизайнер D, прогон 35; пункт пульта rh: d35a «каждый стык – свой приём», d35b «вещи на шве») ══════════
Роман 03.11: «разделители… однотипные, в одинаковых цветах, одинакового размера»; «новые элементы и предметы поверх секций – огонь».
Общее для d35a и d35b: шаг 280u (телефон 168), у плит зазор больше на выступ плиты (как p34), роза «Отзывов» на кромке плиты – как была.
Вещи – настоящие PD-фото, вырезка начисто (IS-Net), одна обработка: живая тень бумаги, без смены цвета. Вставляет leaf35.js (блок D35) в каждую
секцию раздела (все варианты); место – --x/--y/--w в u от верхнего левого угла секции (минус – в зазоре над ней). */
html:is([data-rh="d35a"],[data-rh="d35b"]){--zg:280}
html:is([data-rh="d35a"],[data-rh="d35b"]) [data-sec="how"]{--zo:56}
html:is([data-rh="d35a"],[data-rh="d35b"]) [data-sec="zapis"]{--zo-t:48}
html:is([data-rh="d35a"],[data-rh="d35b"]) [data-sec="channel"]{--zo:48}
html[data-zg="even"]:is([data-rh="d35a"],[data-rh="d35b"]) main.wrap > [data-sec]:is([data-sec="how"],[data-sec="zapis"],[data-sec="channel"]):not([hidden]) > section:is(#how,#zapis,#channel,[id]){
margin-top:calc((var(--zg) + var(--zo,0) + var(--zo-t,0)) * var(--u))!important}
/* роза на верхней кромке плиты «Отзывов» – та же, что при p32 */
html:is([data-rh="d35a"],[data-rh="d35b"]):is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) main.wrap > [data-sec="reviews"]{position:relative}
html:is([data-rh="d35a"],[data-rh="d35b"]):is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) main.wrap > [data-sec="reviews"]:not([hidden])::before{
content:"";position:absolute;z-index:4;left:50%;top:calc(-84 * var(--u));width:calc(104 * var(--u));height:calc(104 * var(--u));
margin:calc(-52 * var(--u)) 0 0 calc(-52 * var(--u));background:url(/s0/img32/p32-rose-600.webp) 50% 50%/contain no-repeat;pointer-events:none;
filter:drop-shadow(0 calc(3 * var(--u)) calc(5 * var(--u)) rgba(16,32,26,.28))}
/* d35a · виньетки художника – только три и трёх размеров: малая книга с ключом над «Направлениями» (300u), крупный глобус над «Обучением» (830u),
средний колокольчик над «Между уроками» (474u, колокольчик качается). Над «Тестами», «Ценами» и «Записью» виньеток нет – там вещи и кромка плиты. */
html[data-rh="d35a"] [data-sec="courses"]{--p-rh:url(/s0/img32/p32-rh-c.webp);--p-rw:300;--p-rhh:36}
html[data-rh="d35a"] [data-sec="how"]{--p-rh:url(/s0/img33/p32-rh-nb.webp);--p-rw:830;--p-rhh:86}
html[data-rh="d35a"] [data-sec="channel"]{--p-rh:url(/s0/img34/p34-rh-g-nobell.webp);--p-rw:474;--p-rhh:68}
html[data-rh="d35a"] main.wrap > [data-sec]:is([data-sec="courses"],[data-sec="how"],[data-sec="channel"]):not([hidden])::before{
content:"";display:block;width:calc(var(--p-rw) * var(--u));height:calc(var(--p-rhh) * var(--u));max-width:92%;
margin:calc((var(--zo,0) + (var(--zg) - var(--p-rhh)) * .5) * var(--u)) auto calc(((var(--zg) + var(--p-rhh)) * -.5 - var(--zo,0)) * var(--u));
background:var(--p-rh) 50% 50%/contain no-repeat;pointer-events:none}
html[data-rh="d35a"] main.wrap > [data-sec="channel"]:not([hidden]){position:relative}
html[data-rh="d35a"] main.wrap > [data-sec="channel"]:not([hidden])::after{content:"";position:absolute;z-index:2;pointer-events:none;
left:calc(50% + (var(--p-rw) * (541 / 1200 - .5)) * var(--u));top:calc(var(--p-rhh) * 51 / 171 * var(--u)); /* верх обёртки = верх виньетки (её поле схлопывается с обёрткой) */
width:calc(var(--p-rw) * 118 / 1200 * var(--u));height:calc(var(--p-rhh) * 120 / 171 * var(--u));
background:url(/s0/img34/p34-bell.webp) 0 0 / 100% 100% no-repeat;transform-origin:50% 5%}
/* пасхалки: у d35a нет ленты «Записи», у d35b – глобуса, ленты и колокольчика (их места заняли вещи) */
html[data-rh="d35a"] .m34-hs-ribbon,html[data-rh="d35b"] :is(.m34-hs-globe,.m34-hs-ribbon,.m34-hs-bell){display:none!important}
/* вещи на шве (секции без своего position – держат вещь сами; проверено на 1440 и 393: абсолютных потомков, привязанных выше секции, у них нет) */
html:is([data-rh="d35a"],[data-rh="d35b"]) main.wrap > [data-sec] > section:has(> .d35-o){position:relative}
.d35-o{position:absolute;z-index:6;left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));width:calc(var(--w) * var(--u));
pointer-events:none;line-height:0;user-select:none;-webkit-user-select:none;display:none}
.d35-o img{display:block;width:100%;height:auto;rotate:var(--r,0deg);
filter:drop-shadow(0 calc(6 * var(--u)) calc(7 * var(--u)) rgba(36,38,43,.22)) drop-shadow(0 calc(1 * var(--u)) calc(1 * var(--u)) rgba(36,38,43,.20))}
html[data-rh="d35a"] .d35-o.d35-a,html[data-rh="d35b"] .d35-o.d35-b{display:block}
/* место (u от секции); «–» по y – в зазоре над секцией. Порядок по странице: Л · П · Л · П · С · П · Л */
[data-sec="courses"] .d35-o-key {--x:36;--y:-338;--w:300;--r:-7deg} /* ключ лежит через нижнюю кромку шапки – начало */
[data-sec="teachers"] .d35-o-spect {--x:1050;--y:30;--w:240;--r:-5deg} /* очки учителя на верхней кромке третьей карточки */
[data-sec="how"] .d35-o-hours {--x:26;--y:-334;--w:380;--r:-3deg} /* часослов (Благовещение) раскрыт на нижней кромке плиты «Отзывов» */
[data-sec="tests"] .d35-o-lantern{--x:1000;--y:-288;--w:120} /* фонарь висит под картиной «Обучения» – тест освещает уровень */
[data-sec="tests"] .d35-o-lantern img{transform-origin:50% 0;--m-sway:4deg}
[data-sec="prices"] .d35-o-scale {--x:640;--y:-176;--w:278} /* весы стоят на коробке «Цен» – честная плата */
[data-sec="prices"] .d35-o-scale img{transform-origin:50% 100%;--m-sway:2deg}
[data-sec="tests"] .d35-o-candle {--x:990;--y:-44;--w:120} /* d35b: делфтский подсвечник (Рейксмузеум BK-NM-9508) стоит на коробке «Тестов» – тест освещает уровень */
[data-sec="zapis"] .d35-o-clasps {--x:800;--y:-166;--w:150;--r:-4deg} /* d35b: книга с золотыми застёжками и закладкой (BK-15170) на кромке плиты «Записи» – вписать себя */
[data-sec="faq"] .d35-o-putti {--x:564;--y:-206;--w:240} /* d35a: книжная концовка с путти (RP-P-OB-9805), чернилами как есть – «Цены» кончились */
.d35-o-putti img{filter:none}
@media (min-width:1024px){ html[data-rh="d35b"] .d35-o-lantern{display:none!important} }
[data-sec="channel"] .d35-o-quill {--x:30;--y:-330;--w:440;--r:-9deg} /* перо лежит через нижнюю кромку «Записи» – пишем в канал между уроками */
@supports (animation-timeline: view()){ @media (prefers-reduced-motion:no-preference){
html:is([data-mo="m32"],[data-mo="m34"]):is([data-rh="d35a"],[data-rh="d35b"]):is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]):not(.still):not([data-theatre="off"]) main.wrap > [data-sec="reviews"]:not([hidden])::before{
--m-spin:90deg;animation:m32-spin linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
html:is([data-mo="m32"],[data-mo="m34"])[data-rh="d35a"]:not(.still):not([data-theatre="off"]) main.wrap > [data-sec]:is([data-sec="courses"],[data-sec="how"],[data-sec="channel"]):not([hidden])::before{
animation:m32-in linear both;animation-timeline:view();animation-range:entry 10% entry 90%}
html:is([data-mo="m32"],[data-mo="m34"])[data-rh="d35a"]:not(.still):not([data-theatre="off"]) main.wrap > [data-sec="channel"]:not([hidden])::after{
--m-sway:5deg;animation:m32-sway linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
html:is([data-mo="m32"],[data-mo="m34"]):is([data-rh="d35a"],[data-rh="d35b"])[data-zp]:not(.still):not([data-theatre="off"]) main.wrap > [data-sec="reviews"].m34-whirl:not([hidden])::before{
animation:m32-spin linear both,m34-whirl 1.2s cubic-bezier(.2,.7,.2,1) 1;animation-timeline:view(),auto;animation-range:cover 0% cover 100%,normal}
html:is([data-mo="m32"],[data-mo="m34"])[data-rh="d35a"]:not(.still):not([data-theatre="off"]) main.wrap > [data-sec="channel"].m34-ring:not([hidden])::after{
animation:m32-sway linear both,m34-ring 2.4s ease-out 1;animation-timeline:view(),auto;animation-range:cover 0% cover 100%,normal}
} }
@media (max-width:1023.98px){
html:is([data-rh="d35a"],[data-rh="d35b"]){--zg:168}
html:is([data-rh="d35a"],[data-rh="d35b"]) [data-sec="how"]{--zo:40}
html:is([data-rh="d35a"],[data-rh="d35b"]) [data-sec="zapis"]{--zo-t:28}
html:is([data-rh="d35a"],[data-rh="d35b"]) [data-sec="channel"]{--zo:28}
html:is([data-rh="d35a"],[data-rh="d35b"]):is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) main.wrap > [data-sec="reviews"]:not([hidden])::before{top:-44px;width:64px;height:64px;margin:-32px 0 0 -32px}
html[data-rh="d35a"] [data-sec="courses"]{--p-rw:200;--p-rhh:24}
html[data-rh="d35a"] [data-sec="how"]{--p-rw:424;--p-rhh:44}
html[data-rh="d35a"] [data-sec="channel"]{--p-rw:302;--p-rhh:43}
/* телефон (u ≈ 1 px на 390): те же вещи втрое мельче, по краям, мимо текста; размеры 60–200 */
[data-sec="courses"] .d35-o-key {--x:8;--y:-196;--w:150}
[data-sec="teachers"] .d35-o-spect {--x:262;--y:24;--w:80}
[data-sec="how"] .d35-o-hours {--x:4;--y:-200;--w:170}
[data-sec="tests"] .d35-o-lantern{--x:296;--y:-172;--w:58}
[data-sec="prices"] .d35-o-scale {--x:228;--y:-30;--w:124}
[data-sec="zapis"] .d35-o-clasps {--x:116;--y:-104;--w:84}
[data-sec="faq"] .d35-o-putti {--x:105;--y:-128;--w:150}
.d35-o-candle{display:none!important} /* на телефоне у d35b вместо подсвечника – фонарь (у «Обучения» внизу нет коробки, на которую поставить) */
[data-sec="channel"] .d35-o-quill {--x:10;--y:-196;--w:200}
}
/* ══ /D35 */
/* ══ Z35: главная сессия после слияния D и T и по рецензии (прогон 35) ═══════════════════════════════════════════════════════════════
(1) весы – одна вещь на странице: при d35a/d35b они стоят на «Ценах» («честная плата»), поэтому малые весы в «Какой ты студент» (tests a34e) скрыты;
при p32 («как сейчас») всё по-старому. (2) серый фонарь снят в обеих системах (чёрно-белый снимок рядом с цветными вещами – мёртвый; над
«Тестами» и так василёк). (3) концовка с путти снята: рецензент – серый густой картуш читается гербом; в d35a стык «Цены → Вопросы» – воздух.
(4) подсвечник d35b снят – почти дубль свечи у совы в «Вопросах»; на его место, на коробку «Тестов», – книга с застёжками (с плиты «Записи»;
там остаются щегол и цветок). (5) рецензент: «вещи мелкие и стоят на пустом листе» – в d35b на ПК вещи в 1,25–1,5 раза крупнее и сильнее
заходят на кромки коробок. (6) перо d35b заходит на лазурь «Записи» (серебро на бумаге не читалось), текст не задет. */
html:is([data-rh="d35a"],[data-rh="d35b"]) [data-sec="tests"] .a33-scale{display:none!important}
.d35-o-lantern,.d35-o-putti,.d35-o-candle{display:none!important}
[data-sec="channel"] .d35-o-quill{--y:-384}
@media (min-width:1024px){
html[data-rh="d35b"] [data-sec="courses"] .d35-o-key {--x:18;--y:-384;--w:420}
html[data-rh="d35b"] [data-sec="teachers"] .d35-o-spect {--x:1000;--y:-10;--w:300}
html[data-rh="d35b"] [data-sec="how"] .d35-o-hours {--x:18;--y:-394;--w:470}
html[data-rh="d35b"] [data-sec="tests"] .d35-o-clasps{--x:930;--y:-62;--w:220;--r:-6deg}
html[data-rh="d35b"] [data-sec="prices"] .d35-o-scale {--x:609;--y:-234;--w:340}
html[data-rh="d35b"] [data-sec="channel"] .d35-o-quill {--x:24;--y:-388;--w:540}
}
@media (max-width:1023.98px){
[data-sec="channel"] .d35-o-quill{--y:-232}
[data-sec="teachers"] .d35-o-spect{--y:58} /* t35a: очки ложатся на верхний край первой карточки, а не на подзаголовок */
.d35-o-clasps{display:none!important} /* телефон: у «Тестов» заголовок в три строки – книге некуда встать, на этом стыке воздух */
}
/* «Преподаватели» t35a (специфичность выше правила leaf30 – там три :not; рецензент: «вещи стола учителя плавают под карточками, до III ≈ 120 px пустоты»): «С чего начать» ближе на 70u */
html[data-zg="even"][data-v-teachers="t35a"] main.wrap > [data-sec="board"][data-sec="board"]:not([hidden]):not([data-z35]) > section:is(#board,[id]){margin-top:calc((var(--zg) - 70) * var(--u))!important}
@media (max-width:1023.98px){ html[data-zg="even"][data-v-teachers="t35a"] main.wrap > [data-sec="board"][data-sec="board"]:not([hidden]):not([data-z35]) > section:is(#board,[id]){margin-top:calc(var(--zg) * var(--u))!important} }
/* «Учим на совесть» s35a (рецензент: «при смене сцены две фигуры полупрозрачно наслаиваются – призрак»; «одиночная фигура мелкая, болтается»):
уходящая гаснет за 0,22 с, новая проявляется после неё; одиночные фигуры выше (85 → 94 % сцены) */
section.v-s35a .y30s-hon .y30i-fig{transition:opacity .22s ease,translate .3s ease}
section.v-s35a .y30s-hon .y30i-fig.is-on{transition:opacity .42s ease .24s,translate .5s ease .24s}
section.v-s35a .y30s-hon .y30i-fig.y32-fig{height:94%;bottom:calc(3 * var(--u) + .6%)}
/* ══ /Z35 */
/* s0/leaf36.css */
/* прогон 36 — слой поверх leaf35. Задание — council65/TASKS-36.md (голос Романа по пульту 35, 03.11 12:19–12:56). */
/* ══ Q36 · быстрые правки главной сессии (до помощников) ══════════════════════════════════════════════════════════
Сняты без CSS: ключ с кромки шапки (leaf35.js T), серебряный прибор и ларец под карточками «Преподавателей» (teachers/vt35a.html),
колофон «Explicit» (leaf34.js init без coloAdd; счётчик «Слово на полях · N из M» – в карточке глоссы), «можно не писать» → «Имя» (zapis/v*.html). */
/* (1) «Отзывы»: строка под стрелками «Хочешь так же? Первый урок – бесплатно» (Роман: «очень мелкая и читается тяжело» на яри).
Было: курсив 20u (≥ 18 px) костью по яри. Стало: прямой 25u (≥ 20 px), ссылка – кнопкой с каймой (система кнопок сайта: прозрачная
с каймой, краска при наведении), высота 48 px; лёгкая тень под буквами – гравюра под краской не просвечивает в штрих букв. */
html[data-red="on"] [data-sec="reviews"] .e34-rvgo{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:calc(10 * var(--u)) calc(18 * var(--u));
margin:calc(18 * var(--u)) 0 0;font:500 max(20px, calc(25 * var(--u)))/1.3 var(--f-head);font-style:normal;color:#fbf8f1;
text-shadow:0 1px 2px rgba(20,34,30,.55),0 0 calc(10 * var(--u)) rgba(20,34,30,.35)}
html[data-red="on"] [data-sec="reviews"] .e34-rvgo a{min-height:48px;padding:0 calc(22 * var(--u));border:1.5px solid rgba(251,248,241,.9);border-radius:calc(6 * var(--u));
font:500 max(19px, calc(23 * var(--u)))/1.2 var(--f-head);color:#fbf8f1;text-decoration:none;background:rgba(20,34,30,.18);
transition:background-color .25s ease,color .25s ease}
html[data-red="on"] [data-sec="reviews"] .e34-rvgo a:hover,html[data-red="on"] [data-sec="reviews"] .e34-rvgo a:focus-visible{background:#fbf8f1;color:#2c5a4e;text-shadow:none}
@media (max-width:1023.98px){
html[data-red="on"] [data-sec="reviews"] .e34-rvgo{font-size:20px;gap:8px 14px}
html[data-red="on"] [data-sec="reviews"] .e34-rvgo a{font-size:19px;padding:0 18px}
}
/* (2) «Обучение»: улитка ползла по воздуху – рисунок наклонный (подошва идёт вниз вправо на ≈ 11,6°), низ рамки картинки стоял на кромке,
а голова висела на 38u выше. Теперь подошва лежит на верхней кромке картины: картинка повёрнута на −11,6° вокруг хвоста подошвы
(96 % · 96 % рамки), кромка – ровно под ней. Ползёт как раньше: сдвиг от прокрутки по горизонтали (translate идёт до поворота). */
.m34-lv-snail{top:calc(var(--m34-ay,0px) - 53.6 * var(--u))}
.m34-lv-snail img{rotate:-11.6deg;transform-origin:96% 96%}
@media (max-width:1023.98px){ .m34-lv-snail{top:calc(var(--m34-ay,0px) - 32.7px)} }
/* (3) «Тесты»: книга с застёжками перекрывала слово заголовка → мельче и в куче книг под студентом «Теста уровня»: лежит в полосе книг
a33e (куча под лестницей – 46–55 % ширины полосы) за передними книгами правого склона – их корешки закрывают её низ, верх выглядывает;
изредка вздрагивает – пасхалка, находят не сразу. Место – в долях полосы, поэтому на 1440, 1710 и телефоне книга в одной точке кучи. */
html[data-rh="d35b"] [data-sec="tests"] .a33-floor > .d35-o-clasps{display:block!important;z-index:0;top:auto;left:53.4%;bottom:27%;width:5.4%;--r:-8deg}
html[data-rh="d35b"] [data-sec="tests"] .a33-floor > .d35-o-clasps img{filter:drop-shadow(0 calc(2 * var(--u)) calc(3 * var(--u)) rgba(36,38,43,.25));transform-origin:50% 92%}
html[data-rh="d35b"] [data-sec="tests"] .a33-floor > .m34-hs{pointer-events:auto}
@media (max-width:1023.98px){ html[data-rh="d35b"] [data-sec="tests"] .a33-floor > .d35-o-clasps{width:6.2%;bottom:25%} }
@keyframes q36-twitch{0%,86%,100%{transform:none}87.5%{transform:rotate(-6deg) translateY(-3%)}89%{transform:rotate(4deg)}90.5%{transform:rotate(-3deg) translateY(-1.5%)}92%{transform:rotate(1.5deg)}93.5%{transform:none}}
@media (prefers-reduced-motion:no-preference){
html[data-rh="d35b"]:not(.still):not([data-theatre="off"]) [data-sec="tests"] .a33-floor > .d35-o-clasps img{animation:q36-twitch 17s ease-in-out 6s infinite}
}
/* (4) Подвал: колофон «Explicit» снят – зазор над «Контактами» как у страниц без колофона (E34: 64u видимой бумаги + выступ плиты канала). */
html[data-red="on"][data-zg="even"][data-eg="e34"] main.wrap > [data-sec="contacts"] > section:is(#contacts,[id]){margin-top:calc(64 * var(--u) + var(--e34-po))!important}
@media (max-width:1023.98px){
html[data-red="on"][data-zg="even"][data-eg="e34"] main.wrap > [data-sec="contacts"] > section:is(#contacts,[id]){margin-top:calc(48 * var(--u) + var(--e34-po,0px))!important}
}
/* (5) после (1): строка «Хочешь так же?» стала крупнее – часослов d35b на шве «Отзывы → Обучение» заходил на её начало (1440).
Книга чуть меньше (470 → 400u) и левее, низ на прежнем месте; шов целиком переделывает дизайнер стыков. */
@media (min-width:1024px){ html[data-rh="d35b"] [data-sec="how"] .d35-o-hours{--x:-6;--y:-346;--w:400} }
/* ══ E36: читаемость всего сайта (типограф E, прогон 36; пункт пульта tx «Читаемость»: e36 / as) ══════════════════════════════════════
Роман 03.11 (пп. 20–21): «чтобы человеку было всегда легко читать»; «в направлениях… тяжеловато смотреть по размеру».
Замер скриптом (каждый видимый текстовый узел, 1440 / 1710 / 390 / 393×723; кегль на экране = CSS × zoom .9; контраст по худшей точке
под буквами): основной текст 16,2 px в шести местах, рубрики-капитель 15,3, подвал 14,4, «образование» на телефоне 14; белые строки
«Направлений» на картинах 3,2 : 1 в худшей точке (верх строк попадал в светлое: тень гасла прямо от кромки).
Порог: основной ≥ 17 px на экране, подписи ≥ 16, контраст ≥ 4,5 : 1 (крупный ≥ 3 : 1). Шрифты, формула заголовков и тексты – прежние.
Рецепт текста на картине – по разбору Вирджинии (council66/research/SCOUT-36.md, п. 3): буквы костью, под ними ровный тон туши на всю
высоту текста + 24 px, растворение только выше (≈ 25 % карточки), ореол букв мягкий; картины не перекрашены – слой поверх. */
/* (1) «Направления» a33a, ПК: ровный тон туши под всем текстом карточки (высота блока текста + 24 px), выше – растворение на ≈ 25 % карточки
(плавное, пятью ступенями); у широкой «Иммиграции» тон ещё и гаснет вправо сразу за текстом – люди на берегу в свету.
Высоту и ширину блока текста ставит leaf36.js (--e36-th, --e36-tw; без скрипта – запасные значения). Тон по картине (--e36-a) – по замеру:
самая светлая точка под буквами ≤ 40 % яркости, кость к ней ≥ 5 : 1. Картины не тронуты – слой поверх (старая тень карточки снята). */
@media (min-width:1024px){
html[data-tx="e36"] section.v-a33a.v-z30b .zd-card{--e36-a:.64;--e36-th:calc(180 * var(--u));--e36-tw:calc(470 * var(--u));--e36-f:25%}
html[data-tx="e36"] section.v-a33a.v-z30b .zd-card::after{
background:linear-gradient(to top,
rgba(36,38,43,var(--e36-a)) 0,
rgba(36,38,43,var(--e36-a)) calc(var(--e36-th) + 24px),
rgba(36,38,43,calc(var(--e36-a) * .7)) calc(var(--e36-th) + 24px + var(--e36-f) * .3),
rgba(36,38,43,calc(var(--e36-a) * .38)) calc(var(--e36-th) + 24px + var(--e36-f) * .6),
rgba(36,38,43,calc(var(--e36-a) * .12)) calc(var(--e36-th) + 24px + var(--e36-f) * .85),
rgba(36,38,43,0) calc(var(--e36-th) + 24px + var(--e36-f)))!important;
-webkit-mask-image:none;mask-image:none}
html[data-tx="e36"] section.v-a33a.v-z30b .zd-card[data-dir="ege"]{--e36-a:.7} /* светлые рубашки мальчиков у кромки */
html[data-tx="e36"] section.v-a33a.v-z30b .zd-card.a33-wide::after{
-webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(var(--e36-tw) + 24px),rgba(0,0,0,.45) calc(var(--e36-tw) + 24px + 7%),transparent calc(var(--e36-tw) + 24px + 15%));
mask-image:linear-gradient(to right,#000 0,#000 calc(var(--e36-tw) + 24px),rgba(0,0,0,.45) calc(var(--e36-tw) + 24px + 7%),transparent calc(var(--e36-tw) + 24px + 15%))}
html[data-tx="e36"] section.v-a33a.v-z30b .zd-card :is(h3,p,.zd-go,.zd-bot,.zd-long){text-shadow:0 0 18px rgba(36,38,43,.5),0 1px 2px rgba(36,38,43,.6)!important}
/* кегли на экране: название 36 → 39,6 px, описание 16,2 → 19,4 px (вес 500), ссылки 17,1 → 18,5 px */
html[data-tx="e36"] section.v-a33a.v-z30b .zd-card .zd-txt > h3{font-size:calc(44 * var(--u))!important;line-height:1!important;margin-bottom:calc(10 * var(--u))!important}
html[data-tx="e36"] section.v-a33a.v-z30b .zd-card .zd-txt > p{font-size:max(20px, calc(21.5 * var(--u)))!important;font-weight:500!important;line-height:1.36!important;color:#fbf8f1!important}
html[data-tx="e36"] section.v-a33a.v-z30b .zd-card :is(.zd-go,.zd-bot){font-size:max(19px, calc(20.5 * var(--u)))!important}
html[data-tx="e36"] section.v-a33a.v-z30b .zd-card .zd-bot{color:#fbf8f1!important;text-decoration-color:rgba(251,248,241,.55)!important}
html[data-tx="e36"] section.v-a33a.v-z30b .zd-card .zd-go{color:#f0dba4!important}
}
/* (2) Весь сайт, ПК: основной текст 18 px CSS (16,2 на экране) → 19 (17,1); подписи-капитель 17 (15,3) → 18 (16,2);
подвал 16 (14,4) → 18 (16,2); номера вкладок «Тестов» 16 → 18. Только кегль – цвет уже тушь (T32).
Правила E34 (Редакция) стоят с !important и специфичностью (0,4,x) – здесь тройной атрибут, (0,5,x). */
@media (min-width:1024px){
html[data-tx="e36"][data-tx][data-tx] :is(.zv-p, .v-x30k .d7-p, .fq-t, .y30a-gift-a > p, .pz-lead, .x30h-bx, .h30-steps .h30-s, .y30a-s, .y30a-t, .x32-note, .z32-d){font-size:max(19px, calc(19 * var(--ut)))!important}
html[data-tx="e36"][data-tx][data-tx] :is(.h30-k, .b30-k > span:not(.b30-k2), .y30-k, .y32-k, .zd1-kick, .pz-k, .x32-k, .z32-k, .zf-ed .zf-ed-k, .nw-pill){font-size:max(18px, calc(18 * var(--ut)))!important}
html[data-tx="e36"] section.v-ft23b1a :is(.ft-small, .ft-small a, .ft-small .since, .ft-slog, .ft-hours, .ft-hours .st, .m34-still){font-size:18px!important}
html[data-tx="e36"] section.v-ft23b1a :is(.ft-slog, .ft-small .since){white-space:nowrap} /* слоган и «с 2019 года» не рвутся (при 18 px шли в две строки) */
html[data-tx="e36"] section.v-ft23b1a .ft-small nav a{margin-right:calc(14 * var(--u))!important}
html[data-tx="e36"] section.v-ft23b1a .ft-small nav.r a{margin:0 0 0 calc(14 * var(--u))!important}
html[data-tx="e36"] section.v-x30k .x30k-tab i{font-size:max(18px, calc(18 * var(--u)))!important}
}
/* телефон: «образование» у преподавателей было 14 px (правило ≤ 400 px) → 16 */
@media (max-width:1023.98px){
html[data-tx="e36"] section.v-z32c .zf-st .zf-ed .zf-ed-k{font-size:16px!important;letter-spacing:.08em!important}
}
/* (3) «Отзывы»: золотая буквица третьего отзыва была 2,1 : 1 к бумаге (золотом по бумаге текст не пишем) → тёмное золото 4,8 : 1,
позолота – светлой тенью под буквой; лазурь и ярь двух других – как были. */
html[data-tx="e36"][data-red="on"] [data-sec="reviews"] .v-sheet17 .rv17-card:nth-child(3n) .rv17-cap{color:#8a6a1f!important;text-shadow:0 calc(2 * var(--u)) 0 rgba(201,168,76,.5)!important}
/* (4) Ключевые слова: одна фраза в абзаце – тушью, вес 600 (цифра или выгода), четыре места на сайт; цвета внутри абзацев нет.
Обёртку ставит leaf36.js; при tx=as она не видна. */
.e36-kw{font-weight:inherit}
html[data-tx="e36"] .e36-kw{font-weight:600;color:#24262b}
/* (5) «Вопросы»: золотая буквица (4-я) 2,9 : 1 к листу при 36 px (нужно ≥ 3) → тёмное золото #94711f (≈ 4 : 1); киноварь и цвета остальных – как были.
«Тесты», телефон: записка курсивом Garamond 16 px (на глаз мельче Brygada 16) → 17. */
html[data-tx="e36"] section.v-owl18 .ini-4{color:#94711f!important}
@media (max-width:1023.98px){ html[data-tx="e36"] section.v-x30k .d7-note{font-size:17px!important} }
/* ══ V36: лунник (honesty, «Historia Naturalis», лист 11-5) лежит на верхней кромке коробки «Учим на совесть» справа, над листом задания (только v36a–c, leaf36.js).
Стоит на месте коробки (статичное место перед ней) и поднят на 92 % своей высоты – нижние листья касаются кромки; колышется от прокрутки, от касания кивает. */
.m34-lv-honesty{--w:250;right:calc(64 * var(--u));width:calc(var(--w) * var(--u));margin-top:calc(var(--w) * -.512 * var(--u))}
.m34-lv-honesty img{transform-origin:98% 64%}
@media (max-width:1023.98px){ .m34-lv-honesty{right:6px;width:96px;margin-top:-50px} } /* телефон: правее и мельче – не касается второй строки заголовка */
@supports (animation-timeline: view()){ @media (prefers-reduced-motion:no-preference){
html:is([data-mo="m32"],[data-mo="m34"]):not(.still):not([data-theatre="off"]) .m34-lv-honesty img{--m-sway:2.5deg;animation:m32-sway linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
} }
@media (prefers-reduced-motion:no-preference){
html:not(.still):not([data-theatre="off"]) .m34-lv-honesty.m34-wake{transform-origin:96% 64%;animation:m34-tilt 1s ease-out 1}
}
/* ══ A36: ангел шапки – вышивка (пункт hj) слоем художника поверх цветного слоя, под ч/б вуалью; кадр и ширина – как у .tint-color и вуали */
[data-sec="hero"] .angel .tint > .a36-orn{position:absolute;inset:0;display:block;pointer-events:none}
[data-sec="hero"] .angel .tint > .a36-orn img{display:block;width:100%;height:auto;max-width:none}
[data-sec="hero"] .angel .tint:not(.ready) > .a36-orn{visibility:hidden}
/* ══ J36: стыки и переходы (дизайнер J, прогон 36; пункт пульта rh = j36). Роман 03.11: ключ с шапки снять → «2D рисунок… колесо крутящееся»;
«весы – кривой разделитель»; «Цены ↔ Тесты» и «Обучение ↔ Отзывы» – «чуть больше расстояния… аккуратненькие линии… не везде».
j36 = вещи d35b (очки, часослов, книга в куче, перо – как были) + (1) стык шапки: тонкая золотая линия в колонку, в её разрыве – колесо
«роза ветров в шести языках» (Рейксмузеум RP-P-AO-29-18, тёмное золото одной линией), вращается от прокрутки; роза 1598 – справа у заголовка,
колесо – по центру шва, между ними ≈ 500 px; (2) «Отзывы → Обучение»: +44u воздуха, часослов на кромке плиты как был; (3) «Тесты → Цены»: +40u воздуха,
весы стоят ровно (без качания) целиком на верхней кромке листа цен, над колонкой «После пробного» (перенос в лист – leaf36.js J36);
(4) «Цены → Вопросы» (бумага в бумагу): простая тонкая линия посередине паузы. У кромок плит линий нет (ищейка: там граница уже есть). */
html[data-rh="j36"]{--zg:280}
html[data-rh="j36"] [data-sec="how"]{--zo:100}
html[data-rh="j36"] [data-sec="prices"]{--zo:40}
html[data-rh="j36"] [data-sec="zapis"]{--zo-t:48}
html[data-rh="j36"] [data-sec="channel"]{--zo:48}
html[data-zg="even"][data-rh="j36"][data-rh="j36"] main.wrap > [data-sec]:is([data-sec="how"],[data-sec="prices"],[data-sec="zapis"],[data-sec="channel"]):not([hidden]) > section:is(#how,#prices,#zapis,#channel,[id]){
margin-top:calc((var(--zg) + var(--zo,0) + var(--zo-t,0)) * var(--u))!important}
html[data-rh="j36"]:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) main.wrap > [data-sec="reviews"]{position:relative}
html[data-rh="j36"]:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) main.wrap > [data-sec="reviews"]:not([hidden])::before{
content:"";position:absolute;z-index:4;left:50%;top:calc(-84 * var(--u));width:calc(104 * var(--u));height:calc(104 * var(--u));
margin:calc(-52 * var(--u)) 0 0 calc(-52 * var(--u));background:url(/s0/img32/p32-rose-600.webp) 50% 50%/contain no-repeat;pointer-events:none;
filter:drop-shadow(0 calc(3 * var(--u)) calc(5 * var(--u)) rgba(16,32,26,.28))}
html[data-rh="j36"] :is(.m34-hs-globe,.m34-hs-ribbon,.m34-hs-bell){display:none!important}
html[data-rh="j36"] main.wrap > [data-sec] > section:is(:has(> .d35-o),:has(> .j36-seam)){position:relative}
html[data-rh="j36"] .d35-o.d35-b{display:block}
html[data-rh="j36"] [data-sec="tests"] .a33-scale{display:none!important}
@media (min-width:1024px){
html[data-rh="j36"] [data-sec="teachers"] .d35-o-spect {--x:1000;--y:-10;--w:300}
html[data-rh="j36"] [data-sec="how"] .d35-o-hours {--x:-6;--y:-390;--w:400}
html[data-rh="j36"] [data-sec="channel"] .d35-o-quill {--x:24;--y:-388;--w:540}
}
html[data-rh="j36"] [data-sec="tests"] .a33-floor > .d35-o-clasps{display:block!important;z-index:0;top:auto;left:53.4%;bottom:27%;width:5.4%;--r:-8deg}
html[data-rh="j36"] [data-sec="tests"] .a33-floor > .d35-o-clasps img{filter:drop-shadow(0 calc(2 * var(--u)) calc(3 * var(--u)) rgba(36,38,43,.25));transform-origin:50% 92%}
html[data-rh="j36"] [data-sec="tests"] .a33-floor > .m34-hs{pointer-events:auto}
@media (max-width:1023.98px){ html[data-rh="j36"] [data-sec="tests"] .a33-floor > .d35-o-clasps{width:6.2%;bottom:25%} }
@media (prefers-reduced-motion:no-preference){
html[data-rh="j36"]:not(.still):not([data-theatre="off"]) [data-sec="tests"] .a33-floor > .d35-o-clasps img{animation:q36-twitch 17s ease-in-out 6s infinite}
}
/* весы: в листе цен (leaf36.js кладёт .d35-o-scale внутрь .y30a-sheet), низ подставки – на кромке листа, без качания и поворота */
html[data-rh="j36"] [data-sec="prices"] .y30a-sheet{position:relative}
html[data-rh="j36"] [data-sec="prices"] .y30a-sheet > .d35-o-scale{left:auto;right:calc(2% - 10 * var(--u));top:auto;bottom:calc(100% - 6 * var(--u));width:calc(300 * var(--u));z-index:3}
html[data-rh="j36"] [data-sec="prices"] .y30a-sheet > .d35-o-scale img{rotate:0deg!important;animation:none!important;transform:none!important}
/* стык шапки и «Цены → Вопросы»: тонкая линия в колонку (золото 55 %, 1 px, концы гаснут); у шапки в разрыве – колесо */
.j36-seam{display:none;position:absolute;left:0;right:0;height:0;pointer-events:none;z-index:1}
html[data-rh="j36"] .j36-seam{display:block}
.j36-seam::before,.j36-seam::after{content:"";position:absolute;top:0;height:1px;width:calc(50% - var(--j36-gap,0px) / 2)}
.j36-seam::before{left:0;background:linear-gradient(90deg,rgba(201,168,76,0),rgba(201,168,76,.55) 38%)}
.j36-seam::after{right:0;background:linear-gradient(270deg,rgba(201,168,76,0),rgba(201,168,76,.55) 38%)}
.j36-seam-courses{top:calc(-140 * var(--u));--j36-gap:calc(250 * var(--u))}
.j36-seam-faq{top:calc(-140 * var(--u));left:12%;right:12%}
.j36-wheel{position:absolute;left:50%;top:0;width:calc(212 * var(--u));aspect-ratio:1;margin:calc(-106 * var(--u)) 0 0 calc(-106 * var(--u));line-height:0}
.j36-wheel img{display:block;width:100%;height:auto}
@supports (animation-timeline: view()){ @media (prefers-reduced-motion:no-preference){
html:is([data-mo="m32"],[data-mo="m34"])[data-rh="j36"]:not(.still):not([data-theatre="off"]) .j36-wheel img{--m-spin:70deg;animation:m32-spin linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
html:is([data-mo="m32"],[data-mo="m34"])[data-rh="j36"]:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]):not(.still):not([data-theatre="off"]) main.wrap > [data-sec="reviews"]:not([hidden])::before{
--m-spin:90deg;animation:m32-spin linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
} }
@media (max-width:1023.98px){
html[data-rh="j36"]{--zg:168}
html[data-rh="j36"] [data-sec="how"]{--zo:64}
html[data-rh="j36"] [data-sec="prices"]{--zo:24}
html[data-rh="j36"] [data-sec="zapis"]{--zo-t:28}
html[data-rh="j36"] [data-sec="channel"]{--zo:28}
html[data-rh="j36"]:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) main.wrap > [data-sec="reviews"]:not([hidden])::before{top:-44px;width:64px;height:64px;margin:-32px 0 0 -32px}
html[data-rh="j36"] [data-sec="how"] .d35-o-hours{--y:-224}
html[data-rh="j36"] [data-sec="prices"] .y30a-sheet > .d35-o-scale{right:6px;width:118px;bottom:calc(100% - 4px)}
.j36-seam-courses{top:-84px;--j36-gap:132px}
.j36-seam-faq{top:-84px;left:8%;right:8%}
.j36-wheel{width:118px;margin:-59px 0 0 -59px}
}
/* ══ /J36 */
/* ══ P36: «Преподаватели» p36t / p36u – вещи висят с нижней кромки карточек (≈ 60u под листом), поэтому «С чего начать» не на 70u ближе (как у t35a),
а на 80u (вещи закрывают пустоту под карточками, под ними ≈ 90u воздуха). Специфичность – как у правила Z35 в leaf35.css (там три :not и двойной атрибут); слой позже – побеждает. */
html[data-zg="even"]:is([data-v-teachers="p36t"],[data-v-teachers="p36u"]) main.wrap > [data-sec="board"][data-sec="board"]:not([hidden]):not([data-z35]) > section:is(#board,[id]){margin-top:calc((var(--zg) - 80) * var(--u))!important}
@media (max-width:1023.98px){ html[data-zg="even"]:is([data-v-teachers="p36t"],[data-v-teachers="p36u"]) main.wrap > [data-sec="board"][data-sec="board"]:not([hidden]):not([data-z35]) > section:is(#board,[id]){margin-top:calc(var(--zg) * var(--u))!important} }
/* ══ Z36: правки главной сессии по рецензии прогона 36 (council66/review/REVIEW-36.md) ═══════════════════════════════════════════════
(1) «Направления» при tx=e36 (беда 3: «карточки почернели», у «Иммиграции» тёмный прямоугольник с краем посреди неба): тон туши – градиентом
снизу, самый плотный у нижней кромки, под названием уже легче, выше растворяется; по ширине у «Иммиграции» гаснет длинно, без видимого края.
Контраст держат кегль, вес и тёмный ореол букв (E36). */
@media (min-width:1024px){
html[data-tx="e36"] section.v-a33a.v-z30b .zd-card{--e36-a:.6}
html[data-tx="e36"] section.v-a33a.v-z30b .zd-card[data-dir="ege"]{--e36-a:.66}
html[data-tx="e36"] section.v-a33a.v-z30b .zd-card::after{
background:linear-gradient(to top,
rgba(36,38,43,var(--e36-a)) 0,
rgba(36,38,43,calc(var(--e36-a) * .9)) calc(var(--e36-th) * .55),
rgba(36,38,43,calc(var(--e36-a) * .62)) calc(var(--e36-th) + 20px),
rgba(36,38,43,calc(var(--e36-a) * .28)) calc(var(--e36-th) + 20px + var(--e36-f) * .45),
rgba(36,38,43,calc(var(--e36-a) * .08)) calc(var(--e36-th) + 20px + var(--e36-f) * .8),
rgba(36,38,43,0) calc(var(--e36-th) + 20px + var(--e36-f)))!important}
html[data-tx="e36"] section.v-a33a.v-z30b .zd-card.a33-wide::after{
-webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(var(--e36-tw) + 8px),rgba(0,0,0,.7) calc(var(--e36-tw) + 8px + 10%),rgba(0,0,0,.3) calc(var(--e36-tw) + 8px + 24%),transparent calc(var(--e36-tw) + 8px + 40%));
mask-image:linear-gradient(to right,#000 0,#000 calc(var(--e36-tw) + 8px),rgba(0,0,0,.7) calc(var(--e36-tw) + 8px + 10%),rgba(0,0,0,.3) calc(var(--e36-tw) + 8px + 24%),transparent calc(var(--e36-tw) + 8px + 40%))}
}
/* (2) Стыки rh=j36 (беда 2: «два компасных круга на одном экране»): при новых разделителях один круг – колесо ветров у шва под шапкой,
крупнее (212 → 300u) и с разрывом линии шире; роза ветров 1598 у «Направлений» при j36 скрыта (при d35b – стоит, как раньше). */
html[data-rh="j36"] .m34-lv-compass{display:none!important}
.j36-wheel{width:calc(300 * var(--u));margin:calc(-150 * var(--u)) 0 0 calc(-150 * var(--u))}
.j36-seam-courses{top:calc(-160 * var(--u));--j36-gap:calc(340 * var(--u))}
/* (3) «Отзывы → Обучение» (беда 5: «стык не изменился»): ещё 60u воздуха и тонкая линия посередине паузы (не у кромки плиты: часослов лежит
на ней левым краем). */
html[data-rh="j36"] [data-sec="how"]{--zo:160}
.j36-seam-how{top:calc(-150 * var(--u));left:12%;right:12%}
/* (4) «Какой ты студент»: зеркальце было мелким (88u) и висело рядом с цифрами → крупнее, стоит через верхнюю кромку белой коробки справа. */
@media (min-width:1024px){ section.v-t36a .d7-ty .t36-mirror{width:calc(124 * var(--u));right:calc(26 * var(--u));top:calc(-54 * var(--u));z-index:3} }
/* (5) j36k: лимонница на шве была мелкой (128u) → 168u. */
.v-j36k .j36k-fly{width:calc(168 * var(--u))}
/* (6) Телефон: кнопка «Слово на полях: Улитка» 78×34 → 44 px высотой (картинка – у низа кнопки, подошва на прежнем месте). */
@media (max-width:1023.98px){
.m34-lv-snail{display:flex;align-items:flex-end;min-height:44px;top:calc(var(--m34-ay,0px) - 32.7px - 9.8px)}
.j36-wheel{width:150px;margin:-75px 0 0 -75px}
.j36-seam-courses{--j36-gap:172px}
html[data-rh="j36"] [data-sec="how"]{--zo:96}
.j36-seam-how{top:-72px;left:8%;right:8%}
}
/* s0/leaf37.css */
/* прогон 37 — слой поверх leaf36 */
/* ══ Q37: быстрые правки главной сессии (Роман, голос 03.11 по пульту 36) */
/* колесо ветров – пасхалка кликается: шов «pointer-events:none» наследовался кнопке «Слова на полях» */
.j36-seam .m34-hs{pointer-events:auto}
/* колесо ниже: не заходит на облака шапки (Роман: «опусти ее чуть-чуть») – шов «Шапка → Направления» на 64u шире, колесо 264u по центру паузы */
html[data-rh="j36"] [data-sec="courses"]{--zo:64}
html[data-zg="even"][data-rh="j36"][data-rh="j36"] main.wrap > [data-sec="courses"]:not([hidden]) > section:is(#courses,[id]){
margin-top:calc((var(--zg) + var(--zo,0)) * var(--u))!important}
@media (min-width:1024px){
html[data-rh="j36"] .j36-seam-courses{top:calc(-172 * var(--u))}
html[data-rh="j36"] .j36-seam-courses .j36-wheel{width:calc(264 * var(--u));margin:calc(-132 * var(--u)) 0 0 calc(-132 * var(--u))}
}
/* «Направления» на телефоне – снова пропорции z32a (Роман 02.11: «навсегда»; 03.11: «пропорции поменялись»). Причина: с прогона 34 кнопка
розы 1598 (.m34-lv-compass) встаёт последней в сетку карточек – «Иммиграция» перестала быть :last-child и ушла в пол-ширины. */
@media (max-width:1023.98px){
section.v-z30b .zd-mos > .zd-card:last-of-type{grid-column:1 / -1}
section.v-z30b .zd-mos > .zd-card:last-of-type .zd-win{aspect-ratio:16/9}
section.v-z30b .zd-mos > .zd-card:last-of-type .zd-long{display:inline}
}
/* ══ D37: стыки «как у Вирджинии», пропорции вещей и гравюрные вещи вместо фото (дизайнер D, прогон 37; пункт пульта rh = d37, «как сейчас» – j36).
Роман 03.11: «у них между белыми и черными секциями вот такие вот мягкие уголки»; «острые фотопредметы не сильно нравятся… гравюрное».
Ищейка S: у Вирджинии полос во всё окно с прямыми краями нет – цвет всегда коробка со скруглением, белое её обнимает. d37 = всё, что было у j36
(колесо ветров под шапкой, линии, воздух, часослов) + (1) плиты «Отзывов» и «Записи» – коробки на полях 48u от окна, r18 (телефон 12 px, r10):
одна система с коробками сайта, конфликт «плита во всё окно рядом с коробками» (zr=bleed) снят – плиты шире колонки, но не до края;
(2) туман над «Записью» снят (подложка заголовка выходила за плиту); роза со шва «Отзывов» снята (на кромке читалась печатью – ищейка);
(3) новый разделитель «Преподаватели → С чего начать»: тонкая линия, в разрыве – подсолнух анфас, крутится от прокрутки;
(4) «Вопросы»: в разрыве линии – анютины глазки (pensées – «мысли»), качаются от прокрутки; (5) вещи одной руки «Historia Naturalis» вместо фото:
весы → большая синица стоит на кромке листа цен; дощечка с азбукой → лазоревка в полёте; книга с застёжками в куче → крапивница;
перо у «Между уроками» → аквилегия у заголовка. Часослов – как был (Роман: «хорошо»). Вставки – leaf37.js, блок D37. */
html[data-rh="d37"]{--zg:280}
html[data-rh="d37"] [data-sec="how"]{--zo:100}
html[data-rh="d37"] [data-sec="prices"]{--zo:40}
html[data-rh="d37"] [data-sec="zapis"]{--zo-t:48}
html[data-rh="d37"] [data-sec="channel"]{--zo:48}
html[data-zg="even"][data-rh="d37"][data-rh="d37"] main.wrap > [data-sec]:is([data-sec="how"],[data-sec="prices"],[data-sec="zapis"],[data-sec="channel"]):not([hidden]) > section:is(#how,#prices,#zapis,#channel,[id]){
margin-top:calc((var(--zg) + var(--zo,0) + var(--zo-t,0)) * var(--u))!important}
html[data-rh="d37"] :is(.m34-hs-globe,.m34-hs-ribbon,.m34-hs-bell){display:none!important}
html[data-rh="d37"] main.wrap > [data-sec] > section:is(:has(> .d35-o),:has(> .j36-seam)){position:relative}
html[data-rh="d37"] .d35-o.d35-b{display:block}
html[data-rh="d37"] [data-sec="tests"] .a33-scale{display:none!important}
@media (min-width:1024px){
html[data-rh="d37"] [data-sec="teachers"] .d35-o-spect {--x:1000;--y:-10;--w:300}
html[data-rh="d37"] [data-sec="how"] .d35-o-hours {--x:-6;--y:-390;--w:400}
html[data-rh="d37"] [data-sec="channel"] .d35-o-quill {--x:24;--y:-388;--w:540}
}
html[data-rh="d37"] [data-sec="tests"] .a33-floor > .m34-hs{pointer-events:auto}
html[data-rh="d37"] .j36-seam{display:block}
@supports (animation-timeline: view()){ @media (prefers-reduced-motion:no-preference){
html:is([data-mo="m32"],[data-mo="m34"])[data-rh="d37"]:not(.still):not([data-theatre="off"]) .j36-wheel img{--m-spin:70deg;animation:m32-spin linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
} }
@media (max-width:1023.98px){
html[data-rh="d37"]{--zg:168}
html[data-rh="d37"] [data-sec="how"]{--zo:64}
html[data-rh="d37"] [data-sec="prices"]{--zo:24}
html[data-rh="d37"] [data-sec="zapis"]{--zo-t:28}
html[data-rh="d37"] [data-sec="channel"]{--zo:28}
html[data-rh="d37"] [data-sec="how"] .d35-o-hours{--y:-224}
}/* как у j36 (Z36, Q37): роза 1598 у «Направлений» скрыта (один круг – колесо), колесо ниже, шов шапки шире; «Отзывы → Обучение» +60u и линия */
html[data-rh="d37"] .m34-lv-compass{display:none!important}
html[data-rh="d37"] [data-sec="how"]{--zo:160}
html[data-rh="d37"] [data-sec="courses"]{--zo:64}
html[data-zg="even"][data-rh="d37"][data-rh="d37"] main.wrap > [data-sec="courses"]:not([hidden]) > section:is(#courses,[id]){
margin-top:calc((var(--zg) + var(--zo,0)) * var(--u))!important}
@media (min-width:1024px){
html[data-rh="d37"] .j36-seam-courses{top:calc(-172 * var(--u))}
html[data-rh="d37"] .j36-seam-courses .j36-wheel{width:calc(264 * var(--u));margin:calc(-132 * var(--u)) 0 0 calc(-132 * var(--u))}
}
@media (max-width:1023.98px){ html[data-rh="d37"] [data-sec="how"]{--zo:96} }
/* (1) плиты – коробки со скруглением на полях */
html[data-rh="d37"] [data-sec="reviews"] section.v-c34rv .c34-plate,
html[data-rh="d37"] [data-sec="zapis"] section.v-c34:is(.v-c34a,.v-c34c) .c34-plate{
left:calc(50% - calc(50vw * var(--vwk,1)) / var(--c34-z) + 48 * var(--u));right:calc(50% - calc(50vw * var(--vwk,1)) / var(--c34-z) + 48 * var(--u));border-radius:calc(18 * var(--u))}
html[data-rh="d37"] [data-sec="zapis"] section.v-c34a .zd1-head::before{top:calc(-22 * var(--u))}
/* (3) новый шов «Преподаватели → С чего начать»: пауза шире (вещи висят с карточек), линия в колонку, подсолнух в разрыве */
html[data-zg="even"][data-rh="d37"][data-rh="d37"] main.wrap > [data-sec="board"][data-sec="board"]:not([hidden]):not([data-z35]) > section:is(#board,[id]){margin-top:calc((var(--zg) + 120) * var(--u))!important}
.d37-seam-board{display:none;top:calc(-170 * var(--u));left:6%;right:6%;--j36-gap:calc(250 * var(--u))}
html[data-rh="d37"] .d37-seam-board{display:block}
html[data-rh="d37"] main.wrap > [data-sec] > section:has(> .d37-seam-board){position:relative}
.d37-seam .d37-ob,.d37-o{position:absolute;z-index:4;display:block;margin:0;padding:0;border:0;background:none;line-height:0;cursor:default;pointer-events:auto;-webkit-tap-highlight-color:transparent}
html:not([data-rh="d37"]) :is(.d37-seam-board,.d37-o){display:none!important}
.d37-ob img{display:block;width:100%;height:auto;pointer-events:none;user-select:none;-webkit-user-select:none;rotate:var(--r,0deg)}
.d37-shadow img{filter:drop-shadow(0 calc(5 * var(--u)) calc(6 * var(--u)) rgba(36,38,43,.2)) drop-shadow(0 calc(1 * var(--u)) calc(1 * var(--u)) rgba(36,38,43,.16))}
html[data-eg="e34"] .d37-ob{cursor:pointer}
html:not([data-eg="e34"]) .d37-ob{pointer-events:none}
.d37-seam .d37-sun{left:50%;top:0;width:calc(196 * var(--u));margin:calc(-98 * var(--u)) 0 0 calc(-98 * var(--u))}
/* (4) «Вопросы»: разрыв линии шире, анютины глазки стоят в нём (половина над линией, половина под) */
html[data-rh="d37"] .j36-seam-faq{--j36-gap:calc(230 * var(--u))}
.d37-pansy{left:50%;top:0;width:calc(186 * var(--u));margin:calc(-104 * var(--u)) 0 0 calc(-93 * var(--u))}
.d37-pansy img{transform-origin:50% 90%}
/* (5) вещи вместо фото */
html[data-rh="d37"] :is(.d35-o-scale,.d35-o-clasps,.d35-o-quill){display:none!important}
html[data-rh="d37"] [data-sec="board"] .a34-hb{display:none!important}
html[data-rh="d37"] [data-sec="prices"] .y30a-sheet{position:relative}
.d37-greattit{right:calc(4% - 6 * var(--u));bottom:calc(100% - 4 * var(--u));width:calc(230 * var(--u));z-index:3}
.d37-bluetit{left:calc(-120 * var(--u));top:calc(282 * var(--u));width:calc(228 * var(--u));z-index:2}
.d37-bluetit img{transform:scaleX(-1)}
html[data-rh="d37"] [data-sec="tests"] .a33-floor > .d37-tortoise{z-index:2;top:auto;left:57%;bottom:30%;width:5.4%;--r:-10deg}
.d37-tortoise img{transform-origin:50% 90%}
html[data-rh="d37"] main.wrap > [data-sec="channel"] > section:has(> .d37-columbine){position:relative}
.d37-columbine{right:calc(36 * var(--u));top:calc(-112 * var(--u));width:calc(150 * var(--u));z-index:3}
/* очки у заголовка «Преподавателей» при новом варианте d37t – там клевер (при любом rh) */
[data-v-teachers="d37t"] [data-sec="teachers"] .d35-o-spect{display:none!important}
@supports (animation-timeline: view()){ @media (prefers-reduced-motion:no-preference){
html:is([data-mo="m32"],[data-mo="m34"])[data-rh="d37"]:not(.still):not([data-theatre="off"]) .d37-sun img{--m-spin:80deg;animation:m32-spin linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
html:is([data-mo="m32"],[data-mo="m34"])[data-rh="d37"]:not(.still):not([data-theatre="off"]) :is(.d37-pansy,.d37-columbine) img{--m-sway:3deg;animation:m32-sway linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
} }
@media (prefers-reduced-motion:no-preference){
html[data-rh="d37"]:not(.still):not([data-theatre="off"]) .d37-tortoise img{animation:q36-twitch 17s ease-in-out 6s infinite}
html:not(.still):not([data-theatre="off"]) .d37-ob.d37-wake img{transform-origin:50% 90%;animation:m34-tilt 1s ease-out 1}
}
@media (max-width:1023.98px){
html[data-rh="d37"] [data-sec="reviews"] section.v-c34rv .c34-plate,
html[data-rh="d37"] [data-sec="zapis"] section.v-c34:is(.v-c34a,.v-c34c) .c34-plate{left:calc(50% - calc(50vw * var(--vwk,1)) / var(--c34-z) + 12px);right:calc(50% - calc(50vw * var(--vwk,1)) / var(--c34-z) + 12px);border-radius:10px}
/* форма «Записи» на телефоне – «от стенки до стенки» (Роман 02.11) теперь значит до стенок коробки: поля 12 px, углы коробки */
html[data-rh="d37"] [data-sec="zapis"] section.v-c34a.v-y30d :is(.y30d-main,.y30d-art){margin-inline:calc(var(--gut) * -1 * var(--u) + 12px)!important}
html[data-zg="even"][data-rh="d37"][data-rh="d37"] main.wrap > [data-sec="board"][data-sec="board"]:not([hidden]):not([data-z35]) > section:is(#board,[id]){margin-top:calc((var(--zg) + 72) * var(--u))!important}
.d37-seam-board{top:-132px;left:8%;right:8%;--j36-gap:140px}
.d37-seam .d37-sun{width:116px;margin:-58px 0 0 -58px}
html[data-rh="d37"] .j36-seam-faq{--j36-gap:126px}
.d37-pansy{width:100px;margin:-56px 0 0 -50px}
.d37-greattit{right:4px;width:112px;bottom:calc(100% - 2px)}
.d37-bluetit{display:none!important}
.d37-columbine{right:0;top:30px;width:54px}
}
/* ══ /D37 */
/* ══ Q37b: главная сессия после smoke – крапивница на телефоне была 31×26 px: шире до 44 px и поля сверху-снизу, чтобы касание было ≥ 44 */
@media (max-width:1023.98px){
html[data-rh="d37"] [data-sec="tests"] .a33-floor > .d37-tortoise{width:max(5.4%,44px);padding:5px 0;box-sizing:content-box}
}
/* ══ Q37c: главная сессия по рецензии 37 (дозадание дизайнеру D оборвалось ошибкой сервера – правки сделала сама) */
/* «хвост» за коробками: мягкие подложки заголовков «Отзывов» и «Записи» (радиальные градиенты) выходили за плиту на 140–190 px – теперь в пределах коробки */
html[data-rh="d37"] [data-sec="reviews"] .rubric.m32-rv::before,
html[data-rh="d37"] [data-sec="zapis"] .zd1-head.m32-rv::before{left:-60px!important;right:-60px!important;width:auto!important}
/* круглые вещи не на углах коробок (закон: круг на углу читается печатью): чернушка – по верхней кромке «Записи» на четверти ширины,
василёк – по кромке «Теста» левее угла, аквилегия – на бумаге над коробкой канала (не касается её) */
html[data-rh="d37"] .m34-lv-nigella{left:46%}
html[data-rh="d37"] .m34-lv-corn{right:calc(150 * var(--u));top:calc(-96 * var(--u))}
html[data-rh="d37"] .d37-columbine{top:calc(-156 * var(--u))}
/* виноград не на углу: на нижней кромке карточки Романа ближе к середине (яблоко Юлии – на своём углу, как было) */
html section.v-d37t.v-d37t .d37-ob-grapes{left:54%;top:auto;bottom:calc(-170 * var(--u))}
@media (max-width:1023.98px){
html[data-rh="d37"] [data-sec="reviews"] .rubric.m32-rv::before,
html[data-rh="d37"] [data-sec="zapis"] .zd1-head.m32-rv::before{left:-4px!important;right:-4px!important}
html[data-rh="d37"] .m34-lv-nigella{left:12%;top:calc(var(--m34-seam,-28px) - 72px)}
html[data-rh="d37"] .m34-lv-corn{right:8%;top:10px}
html section.v-d37t.v-d37t .d37-ob-grapes{left:auto;right:38%;top:auto;bottom:-52px}
.v-d37t .d37-ob-clover{display:none}
}
/* s0/leaf38.css */
/* прогон 38 — слой поверх leaf37 */
/* ══ Q38: главная сессия · ночь 38 (арт-директор AD-38 п. 1, 5, 8) — всё под общим пунктом ui=u38, кроме починки клевера на телефоне ══ */
/* п. 1 · Преподаватели → «С чего начать»: в паузе одна вещь — шиповник на линии; виноград и яблоко сняты (при ui=as — как в прогоне 37) */
html[data-ui="u38"] section.v-d37t.v-d37t :is(.d37-ob-grapes,.p36-ob-apple){display:none}
/* клевер на ПК — на бумаге над карточкой Ярослава, стебли не касаются кромки */
@media (min-width:1024px){ html[data-ui="u38"] section.v-d37t.v-d37t .d37-ob-clover{bottom:calc(14 * var(--u))} }
/* починка Q37c: на телефоне клевер должен быть снят (правило Q37c проигрывало .css-teachers-d37 .v-d37t .d37-ob) */
@media (max-width:1023.98px){ html section.v-d37t.v-d37t .d37-ob-clover{display:none} }
/* п. 5 · «Два теста»: василёк на ПК — на бумаге у заголовка, не на кромке коробки; на телефоне снят (читался печатью в углу картины) */
@media (min-width:1024px){ html[data-ui="u38"][data-rh="d37"] .m34-lv-corn{top:calc(-178 * var(--u))} }
@media (max-width:1023.98px){ html[data-ui="u38"] .m34-lv-corn{display:none} }
/* п. 8 · «Запись»: чернушка (синее на синем, наклейка) снята, щегол остаётся */
html[data-ui="u38"] .m34-lv-nigella{display:none}
/* ══ /Q38 */
/* ══ U38: UI/UX-доводчик ночи 38 (песочница U). Всё – только при html[data-ui="u38"] (пульт «Доводка ночи 38»; «как сейчас» – ui=as).
Пункты арт-директора AD-38: (1) заголовки «лесенкой», (2) «Совесть» c37b, (4) «Запись» на телефоне, (6) ритм телефона, (7) кнопки записи. */
/* (1) заголовки без «лесенки» (ПК): текст заголовка – с линии своей колонки, золотой номер висит в поле слева. Арт-директор назвал «Обучение»
и «Вопросы»; та же формула у всех разделов на бумаге, иначе номер прыгает от раздела к разделу («Отзывы» на плите и «Запись» – как были) */
@media (min-width:1024px){
html[data-ui="u38"][data-nst="gold"] :is(#courses,#teachers,#how,#tests,#prices,#faq,#channel) > .rubric{padding-left:0!important}
html[data-ui="u38"][data-nst="gold"] :is(#courses,#teachers,#how,#tests,#prices,#channel) > .rubric h2:has(> .fol){margin-left:-2.1em}
html[data-ui="u38"][data-nst="gold"] #faq > .rubric h2:has(> .fol){margin-left:calc(-2.1em + 18 * var(--u))}
html[data-ui="u38"][data-nst="gold"] :is(#courses,#teachers,#how,#tests,#prices,#channel) > .rubric:has(h2 > .fol) .rubric-sub{padding-left:0!important}
html[data-ui="u38"][data-nst="gold"] #faq > .rubric:has(h2 > .fol) .rubric-sub{padding-left:calc(18 * var(--u))!important}
}
/* (2) «Учим на совесть» c37b: выбранный приподнят сильнее, золотая черта шире и плотнее; на телефоне фраза делится на строки поровну */
html[data-ui="u38"] [data-sec="prices"] section.v-c37b .c37-p.is-on{transform:translateY(calc(-6 * var(--u)))}
html[data-ui="u38"] [data-sec="prices"] section.v-c37b .c37-p::after{left:6%;right:6%;height:3px}
html[data-ui="u38"] [data-sec="prices"] section.v-c37b .c37-p0::after{left:14%;right:14%}
@media (max-width:1023.98px){
html[data-ui="u38"] [data-sec="prices"] section.v-c37b .c37-p.is-on{transform:translateY(calc(-6 * var(--u)))}
html[data-ui="u38"] [data-sec="prices"] section.v-c37b .c37-task > .c37-line.err-l{display:block;text-align:center;text-wrap:balance}
html[data-ui="u38"] [data-sec="prices"] section.v-c37b .c37-task > .c37-line .err-w.err-w{display:inline-block;margin:0 calc(3 * var(--u));vertical-align:baseline}
}
/* (4) «Запись» на телефоне: лист формы до краёв экрана (Роман 02.11), синяя коробка – только за шапкой, полосы-«подставки» под листом нет */
@media (max-width:1023.98px){
html[data-ui="u38"][data-ui="u38"] [data-sec="zapis"] section.v-c34a.v-y30d :is(.y30d-main,.y30d-art){margin-inline:calc(var(--gut) * -1 * var(--u))!important}
html[data-ui="u38"][data-ui="u38"] [data-sec="zapis"] section.v-c34a .c34-plate{bottom:0!important}
html[data-ui="u38"][data-ui="u38"] [data-sec="zapis"] section.v-c34a.v-y30d .y30d-art{box-shadow:inset 0 -1px 0 rgba(36,38,43,.16)!important}
}
/* (6) телефон, ритм: где нет разделителя – 104–110 px бумаги вместо 165–200 (колесо, шиповник, часослов, анютины глазки – на своих местах) */
@media (max-width:1023.98px){
html[data-ui="u38"][data-ui="u38"][data-ui="u38"][data-zg="even"] main.wrap > [data-sec]:is([data-sec="teachers"]):not([hidden]):not([data-u38]) > section:is(#teachers,[id]){margin-top:calc(108 * var(--u))!important}
html[data-ui="u38"][data-ui="u38"][data-ui="u38"][data-zg="even"] main.wrap > [data-sec]:is([data-sec="tests"],[data-sec="prices"]):not([hidden]):not([data-u38]) > section:is(#tests,#prices,[id]){margin-top:calc(104 * var(--u))!important}
html[data-ui="u38"][data-ui="u38"][data-ui="u38"][data-zg="even"] main.wrap > [data-sec]:is([data-sec="zapis"]):not([hidden]):not([data-u38]) > section:is(#zapis,[id]){margin-top:calc(131 * var(--u))!important}
html[data-ui="u38"][data-ui="u38"][data-ui="u38"][data-zg="even"] main.wrap > [data-sec]:is([data-sec="channel"]):not([hidden]):not([data-u38]) > section:is(#channel,[id]){margin-top:calc(97 * var(--u))!important}
/* аквилегия над каналом – в середине паузы, не на листе «Записи» */
html[data-ui="u38"][data-rh="d37"] .d37-columbine{top:-92px!important}
}
/* (7) кнопки записи – одна система. «Вопросы»: «Записаться на пробный» – залитая лазурь высотой и кеглем кнопки цен (была кайма 76 px с курсивом) */
html[data-ui="u38"][data-ui="u38"] [data-sec="faq"] section .fq-next a[data-book]{flex-direction:row!important;align-items:center!important;justify-content:center!important;gap:0!important;
min-height:max(44px, calc(var(--btn-h) * var(--u)))!important;padding:0 calc(30 * var(--u))!important;border:0!important;border-radius:calc(var(--r-s) * var(--u))!important;
box-shadow:none!important;background:color-mix(in srgb,var(--azure) 88%,transparent)!important}
html[data-ui="u38"][data-ui="u38"] [data-sec="faq"] section .fq-next a[data-book] > span{display:none!important}
html[data-ui="u38"][data-ui="u38"] [data-sec="faq"] section .fq-next a[data-book] > b{font:600 max(16px, calc(var(--fs-btn) * var(--u)))/1.1 var(--f-head)!important;font-style:normal!important;
letter-spacing:.01em!important;color:var(--bone)!important;text-decoration:none!important;white-space:nowrap!important}
@media (hover:hover){ html[data-ui="u38"][data-ui="u38"] [data-sec="faq"] section .fq-next a[data-book]:hover{background:var(--azure)!important} }
@media (min-width:1024px){ html[data-ui="u38"][data-ui="u38"] [data-sec="faq"] section .fq-next{flex-wrap:nowrap!important;column-gap:calc(22 * var(--u))!important} }
/* (5) «Сколько стоит час» (ПК): сертификат – нижней строкой листа цен, не третьей коробкой: лист и строка сертификата – одна бумага,
между ними тонкая линия; лист сужен до колонки листа, дама с ребёнком стоит на бумаге раздела, низом по низу листа */
@media (min-width:1024px){
html[data-ui="u38"] [data-sec="prices"] section.v-y30a .y30a-stage{row-gap:0}
html[data-ui="u38"] [data-sec="prices"] section.v-y30a .y30a-gift{grid-column:1;grid-row:2;grid-template-columns:calc(300 * var(--u)) minmax(0,1fr);column-gap:calc(36 * var(--u));
padding:calc(18 * var(--u)) calc(44 * var(--u)) calc(22 * var(--u));border-radius:0 0 calc(var(--r) * var(--u)) calc(var(--r) * var(--u));
box-shadow:-1px 0 0 0 rgba(36,38,43,.13),1px 0 0 0 rgba(36,38,43,.13),0 1px 0 0 rgba(36,38,43,.13),0 calc(18 * var(--u)) calc(40 * var(--u)) calc(-30 * var(--u)) rgba(36,38,43,.28)}
html[data-ui="u38"] [data-sec="prices"] section.v-y30a .y30a-gift::before{content:"";position:absolute;top:0;left:calc(44 * var(--u));right:calc(44 * var(--u));height:1px;background:rgba(201,168,76,.55)}
html[data-ui="u38"] [data-sec="prices"] section.v-y30a .y30a-sheet{border-radius:calc(var(--r) * var(--u)) calc(var(--r) * var(--u)) 0 0;
box-shadow:-1px 0 0 0 rgba(36,38,43,.13),1px 0 0 0 rgba(36,38,43,.13),0 -1px 0 0 rgba(36,38,43,.13)}
html[data-ui="u38"] [data-sec="prices"] section.v-y30a .y30a-gift-a h3{font-size:calc(30 * var(--u))!important}
html[data-ui="u38"] [data-sec="prices"] section.v-y30a .y30a-gift-a p{margin-top:calc(6 * var(--u))}
html[data-ui="u38"] [data-sec="prices"] section.v-y30a .y30a-opts{column-gap:calc(28 * var(--u))}
html[data-ui="u38"] [data-sec="prices"] section.v-y30a .y30a-opts .go{min-height:44px!important;display:inline-flex;align-items:center}
html[data-ui="u38"] [data-sec="prices"] section.v-y30a .y30a-opts h4{font-size:max(18px, calc(21 * var(--u)))}
html[data-ui="u38"] [data-sec="prices"] section.v-y30a .y30a-gram{grid-row:1 / span 2;align-self:end;margin-bottom:0}
}
/* (3) «Между уроками» на телефоне: три карточки лентой со свайпом, как посты канала (≤ 2 экранов вместо четырёх); клуб – первым, как был */
@media (max-width:1023.98px){
html[data-ui="u38"] #channel.v-m37a .m37-box{display:grid!important;grid-auto-flow:column;grid-template-rows:auto auto;grid-auto-columns:82%;
grid-template-columns:none!important;column-gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:16px;
padding:6px 16px 12px!important;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
html[data-ui="u38"] #channel.v-m37a .m37-box::-webkit-scrollbar{display:none}
html[data-ui="u38"] #channel.v-m37a .m37-f{grid-row:1;margin:0!important;padding:0!important;align-self:end;scroll-snap-align:start}
html[data-ui="u38"] #channel.v-m37a .m37-f-club{padding-top:0!important;margin-top:0!important}
html[data-ui="u38"] #channel.v-m37a .m37-sqm{display:none!important}
html[data-ui="u38"] #channel.v-m37a .m37-card{grid-row:2;margin:6px 0 0!important;scroll-snap-align:start}
html[data-ui="u38"] #channel.v-m37a .m37-f-club{grid-column:1} html[data-ui="u38"] #channel.v-m37a .m37-c-club{grid-column:1}
html[data-ui="u38"] #channel.v-m37a .m37-f-pil{grid-column:2} html[data-ui="u38"] #channel.v-m37a .m37-c-pil{grid-column:2}
html[data-ui="u38"] #channel.v-m37a .m37-f-yt{grid-column:3} html[data-ui="u38"] #channel.v-m37a .m37-c-yt{grid-column:3}
html[data-ui="u38"] #channel.v-m37a .m37-card .z32-txt{padding:14px 16px 12px!important}
html[data-ui="u38"] #channel.v-m37a .m37-tri{margin-top:12px}
}
/* «Направления» на телефоне: в половинных карточках – «Записаться →» одной строкой, Telegram – только в широких (пропорции z32a не тронуты) */
@media (max-width:1023.98px){
html[data-ui="u38"] [data-sec="courses"] section.v-z32a .zd-mos > .zd-card:not(:first-of-type):not(:last-of-type) :is(.zd-long,.zd-bot){display:none!important}
}
/* ══ /U38 */
/* ══ Q38b: главная сессия · правки по рецензии 38 (всё под ui=u38) ══ */
/* беда 3 · последняя «лесенка»: «Учим на совесть» с линии своей коробки, как остальные заголовки при u38 */
@media (min-width:1024px){ html[data-ui="u38"][data-ui="u38"] [data-sec="prices"] section:is(.v-a38b,.v-c37b) .y30s-rub{padding-left:0!important;margin-left:0!important} }
/* беда 5 · «Запись» на телефоне: синяя шапка до краёв, как лист формы под ней (одна ширина, без скругления) */
@media (max-width:1023.98px){ html[data-ui="u38"][data-ui="u38"][data-rh="d37"] [data-sec="zapis"] section.v-c34:is(.v-c34a,.v-c34c) .c34-plate{left:calc(50% - calc(50vw * var(--vwk,1)) / var(--c34-z));right:calc(50% - calc(50vw * var(--vwk,1)) / var(--c34-z));border-radius:0} }
/* подпись «Найди ошибку» на телефоне 14 → 16 px */
@media (max-width:1023.98px){ html[data-ui="u38"] [data-sec="prices"] section.v-c37a .c37-k{font-size:16px} }
/* ══ /Q38b */
/* s0/leaf39.css */
/* прогон 39 — слой поверх leaf38 */
/* ══ Q39: главная сессия · прогон 39 ══ */
/* (вес) роза над «Отзывами» – только когда раздел в 1200 px от экрана (класс q39-near ставит leaf39.js), иначе 131 КБ грузились сразу */
/* Роман 04.11 (голос): «просто вернуть цветочек и вставить его в этот вариант» – крутящаяся роза над «Отзывами» (как в j36) возвращена в d37:
стоит на бумаге посередине шва над коробкой (не на её углу), крутится от прокрутки; на телефоне меньше. */
html[data-rh="d37"]:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) main.wrap > [data-sec="reviews"]{position:relative}
html[data-rh="d37"]:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) main.wrap > [data-sec="reviews"].q39-near:not([hidden])::before{
content:"";position:absolute;z-index:4;left:50%;top:calc(-106 * var(--u));width:calc(104 * var(--u));height:calc(104 * var(--u));
margin:calc(-52 * var(--u)) 0 0 calc(-52 * var(--u));background:url(/s0/img32/p32-rose-600.webp) 50% 50%/contain no-repeat;pointer-events:none;
filter:drop-shadow(0 calc(3 * var(--u)) calc(5 * var(--u)) rgba(16,32,26,.28))}
@supports (animation-timeline: view()){ @media (prefers-reduced-motion:no-preference){
html:is([data-mo="m32"],[data-mo="m34"])[data-rh="d37"]:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]):not(.still):not([data-theatre="off"]) main.wrap > [data-sec="reviews"].q39-near:not([hidden])::before{
--m-spin:90deg;animation:m32-spin linear both;animation-timeline:view();animation-range:cover 0% cover 100%} } }
@media (max-width:1023.98px){
html[data-rh="d37"]:is([data-zp="c33a"],[data-zp="c33b"],[data-zp="c33c"]) main.wrap > [data-sec="reviews"].q39-near:not([hidden])::before{top:-58px;width:64px;height:64px;margin:-32px 0 0 -32px} }
/* «Контакты» ft23b1a: на 1100–1300 px строка документов не влезала в ряд (страница ехала вбок на 18 px на 1280) – переносится, правый край держит */
@media (min-width:1024px) and (max-width:1399.98px){
html section.v-ft23b1a.v-ft23b1a .ft-small{flex-wrap:wrap;row-gap:calc(6 * var(--u))}
html section.v-ft23b1a.v-ft23b1a .ft-small nav.r{margin-left:auto}
}
/* «Обучение» (выпускающий R): в Safari на телефоне сцена сжималась в 0×0 – высота от ширины через padding (в Chromium то же 358×336) */
@media (max-width:1023.98px){ [data-sec="how"] .h30-scene{width:100%;height:0;padding-bottom:calc(336 / 358 * 100%)} }
/* «Учим на совесть», телефон (рецензия п. 2): стрелки ← → по краям полосы с людьми (вставляет leaf39.js); на ПК фигуры видны все – стрелок нет */
.c39-arr{display:none}
@media (max-width:1023.98px){
[data-sec="prices"] section.v-c37b .c37-walk .c39-arr{display:grid;place-items:center;position:absolute;z-index:4;top:46%;translate:0 -50%;width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
[data-sec="prices"] section.v-c37b .c37-walk .c39-arr i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(255,253,248,.92);
box-shadow:0 0 0 1px rgba(36,38,43,.16),0 2px 6px rgba(36,38,43,.12);color:var(--azure,#29466f);font:normal 400 19px/1 var(--f-head)}
[data-sec="prices"] section.v-c37b .c37-walk .c39-prev{left:2px}
[data-sec="prices"] section.v-c37b .c37-walk .c39-next{right:2px}
[data-sec="prices"] section.v-c37b .c37-walk .c39-arr:focus-visible{outline:none}
[data-sec="prices"] section.v-c37b .c37-walk .c39-arr:focus-visible i{box-shadow:0 0 0 2px var(--azure,#29466f)}
}
/* «Цены», подарочный сертификат (рецензия п. 10): цена, перенесённая на новую строку, стояла с отступом (margin-left у b) */
html [data-sec="prices"] section.v-y30a .y30a-opts p > span{display:inline-flex;flex-wrap:wrap;align-items:baseline;column-gap:.3em}
html [data-sec="prices"] section.v-y30a .y30a-opts p > span > b{margin-left:0}
/* «Отзывы» (рецензия п. 7): цитаты без рваного края */
html [data-sec="reviews"] .rv17-q{text-wrap:pretty}
/* «Обучение» (рецензия п. 8; Роман 03.11 – «острые фотопредметы не сильно нравятся»): часослов-фото → ласточка «Historia Naturalis» (HN 4-56, куратор K),
сидит лапками на тонкой золотой линии шва «Отзывы → Обучение» (линия на −150 u от верха раздела; лапки на 0,93 высоты картинки) */
html[data-rh][data-rh] [data-sec="how"] .d35-o-hours.d35-o-hours{--x:470;--y:-226;--w:260;--r:0deg}
@media (max-width:1023.98px){ html[data-rh][data-rh] [data-sec="how"] .d35-o-hours.d35-o-hours{--x:170;--y:-116;--w:150;--r:0deg} }
/* ══ /Q39 */
/* ══ S39: главная сессия · ищейка (SCOUT-39), общий пункт sc=s39 / как сейчас ══ */
html:not([data-sc="s39"]) .s39-on, html[data-sc="s39"] .s39-off{display:none!important}
/* кнопка «Записаться» в шапке: раньше пряталась, пока рядом другая кнопка (cta-near), – у конкурентов она в шапке всегда */
html[data-sc="s39"].cta-near .bar .btn{visibility:visible}
/* «Отзывы»: строка видеоотзывов под «Хочешь так же?» (вставляет leaf39.js, блок S39) – имена ссылками, касание ≥ 44 px без роста строки */
html[data-sc="s39"] [data-sec="reviews"] .s39-vid{margin:calc(8 * var(--u)) 0 0;text-align:center;font:italic 400 max(16px, calc(18 * var(--u)))/1.45 var(--f-text);color:rgba(251,248,241,.88);text-wrap:balance}
html[data-sc="s39"] [data-sec="reviews"] .s39-vid a{display:inline-block;padding:11px 2px;margin:-11px 0;color:#fbf8f1;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:rgba(251,248,241,.5)}
@media (max-width:1023.98px){ html[data-sc="s39"] [data-sec="reviews"] .rv17-main > :is(.e34-rvgo,.s39-vid){grid-column:1 / -1} }
@media (hover:hover){ html[data-sc="s39"] [data-sec="reviews"] .s39-vid a:hover{color:#e9cf8e;text-decoration-color:currentColor} }
/* «Вопросы» b34f: при sc=s39 восемь вопросов – сетка на 10 рядов, строка ниже (60 → 54 u), лист не растёт (8 × 54 ≤ 6 × 60 + свободный ряд);
при sc=as сетка прежняя (6 рядов), вопросы встают в ряды 1–6 по порядку кнопок – раздел ровно как был */
@media (min-width:1024px){
html[data-sc="s39"] section.v-b34f.v-mix .fm{grid-template-rows:repeat(8,auto) 1fr auto}
html[data-sc="s39"] section.v-b34f.v-mix .fq-a{grid-row:1 / 9}
html[data-sc="s39"] section.v-b34f.v-mix .fq-ask,html[data-sc="s39"] section.v-b34f.v-mix .fm-foot{grid-row:10}
html[data-sc="s39"] section.v-b34f.v-mix .fq-q{min-height:calc(54 * var(--u))}
html:not([data-sc="s39"]) section.v-b34f.v-mix .fq-q:nth-of-type(3){grid-row:2}
html:not([data-sc="s39"]) section.v-b34f.v-mix .fq-q:nth-of-type(5){grid-row:3}
html:not([data-sc="s39"]) section.v-b34f.v-mix .fq-q:nth-of-type(6){grid-row:4}
html:not([data-sc="s39"]) section.v-b34f.v-mix .fq-q:nth-of-type(7){grid-row:5}
html:not([data-sc="s39"]) section.v-b34f.v-mix .fq-q:nth-of-type(8){grid-row:6}
}
/* ══ /S39 */
/* ══ I39: буквицы (Роман 04.11: «цветные буквы заглавные, их чуть ярче сделай… горчичный… попробуй заменить на красный и на жёлтый»).
Общий пункт ini: red – лазурь и ярь светлее (как буквицы «Вопросов»: #3a62a0 6,0 : 1, #357560 5,4 : 1), третья – киноварь #b8432f (та же,
что в «Вопросах», 5,3 : 1); yel – то же, третья – жёлтое золото #b8890f (3,1 : 1, буквица крупная – норма 3 : 1); as – как сейчас.
Где: оглавление «С чего начать» (x32) и буквицы карточек «Отзывов». Красный – только в буквицах (просьба Романа). */
html:is([data-ini="red"],[data-ini="yel"]) [data-sec="board"] .v-x32a .x32-list > li:nth-child(3n+1) .x32-ini{color:#3a62a0}
html:is([data-ini="red"],[data-ini="yel"]) [data-sec="board"] .v-x32a .x32-list > li:nth-child(3n+2) .x32-ini{color:#357560}
html[data-ini="red"] [data-sec="board"] .v-x32a .x32-list > li:nth-child(3n) .x32-ini{color:#b8432f}
html[data-ini="yel"] [data-sec="board"] .v-x32a .x32-list > li:nth-child(3n) .x32-ini{color:#b8890f}
html:is([data-ini="red"],[data-ini="yel"])[data-ini][data-ini] [data-sec="reviews"] .v-sheet17 .rv17-card:nth-child(n) .rv17-cap{color:#3a62a0!important}
html:is([data-ini="red"],[data-ini="yel"])[data-ini][data-ini] [data-sec="reviews"] .v-sheet17 .rv17-card:nth-child(3n+2) .rv17-cap{color:#357560!important}
html[data-ini="red"][data-ini][data-ini] [data-sec="reviews"] .v-sheet17 .rv17-card:nth-child(3n) .rv17-cap{color:#b8432f!important;text-shadow:none!important}
html[data-ini="yel"][data-ini][data-ini] [data-sec="reviews"] .v-sheet17 .rv17-card:nth-child(3n) .rv17-cap{color:#b8890f!important;text-shadow:none!important}
/* главная сессия (вопрос UI п. 4, рецензия п. 6): в «Вопросах» четвёртая буквица тоже горчичная – при red и yel она жёлтое золото (ярче горчичного);
красной её не делаю: киноварь в «Вопросах» уже есть первой буквицей – две красные встали бы рядом («М» и «К») */
html:is([data-ini="red"],[data-ini="yel"])[data-ini] section.v-owl18 .ini-4{color:#b8890f!important}
html:is([data-ini="red"],[data-ini="yel"]) section.v-owl18 .fq-q:has(.ini-4){--ic:#b8890f}
/* ══ /I39 */
/* s0/leaf40.css */
/* прогон 40 — слой поверх leaf39 */
/* ══ Q40: главная сессия · прогон 40 · «Между уроками» – только вариант m40a (m39a – как сейчас) ══ */
/* «Между уроками» (Роман 04.11): стык «коробка канала → площадь» – воздух и тонкая золотая линия, как на других швах; лимонница сидит на линии.
Телефон: было 12 px (u38) – тесно; ПК: 56 u → 110 u. Линию вставляет leaf40.js (span.j36-seam.j36-seam-ch40 первым в .m37-tri). */
html[data-rh] #channel.v-m40a.v-m40a .m37-tri.m37-tri{margin-top:calc(110 * var(--u))}
#channel:not(.v-m40a) .j36-seam-ch40{display:none!important}
#channel.v-m40a .m37-tri > .j36-seam-ch40{top:calc(-55 * var(--u));left:12%;right:12%;--j36-gap:0px}
html[data-rh] #channel.v-m40a.v-m40a .m37-fly.m37-fly{top:calc(-122 * var(--u))}
@media (max-width:1023.98px){
html[data-rh][data-ui] #channel.v-m40a.v-m40a .m37-tri.m37-tri{margin-top:84px}
#channel.v-m40a .m37-tri > .j36-seam-ch40{top:-42px;left:8%;right:8%}
html[data-rh][data-ui] #channel.v-m40a.v-m40a .m37-fly.m37-fly{top:-82px}
}
/* «Между уроками»: персонажи – ссылки, как кнопка своей карточки; три одинаковые кнопки без стрелок, по нижнему краю карточек */
#channel .m37-f .m40-fl{display:block;line-height:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
#channel .m37-f .m40-fl{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
#channel .m37-f .m40-fl:hover{transform:translateY(-3px)}
}
html #channel.v-m40a.v-m40a .m37-card .btn::after{content:none}
html #channel.v-m40a.v-m40a .m37-card .z32-cta{margin-top:auto}
html #channel.v-m40a.v-m40a .m37-card .z32-fx{margin-bottom:calc(16 * var(--u))}
/* ══ /Q40 */
/* ══ C40: цвет выделенных слов (ac) и окошко «Найди ошибку» (fb) – дизайнер UI C, прогон 40.
Роман 04.11: «раскрашенные слова тёмно-синим почти как чёрные – чуть поярче»; «бесплатно – зелёный на бежевом не видно, что зелёный»;
«Найди ошибку – сплошной белый, тяжеловато».
ac=l1 «ясная лазурь»: слова-акценты #2c5fa6 (6,0:1 к кости), «бесплатно» – сочная ярь #2b7048 (5,6:1 к #fdf9f0), зелень видна как зелень.
ac=l2 «ультрамарин рукописи»: акценты и «бесплатно» одним цветом #3651b0 (6,7:1), как синь буквиц в часослове.
Не трогаем: шапку («языковой», надпись свитка), золотые акценты на цветных плитах «Отзывов» и «Записи». */
html[data-ac="l1"]{--c40-ac:#2c5fa6;--c40-free:#2b7048}
html[data-ac="l2"]{--c40-ac:#3651b0;--c40-free:#2b7048} /* рецензент 40: «бесплатно» остаётся зелёным и при l2 – зелёный = бесплатно */
html:is([data-ac="l1"],[data-ac="l2"]) main [data-sec]:not([data-sec="hero"]):not([data-sec="reviews"]):not([data-sec="zapis"]) :is(h2,h3) em{color:var(--c40-ac)}
html:is([data-ac="l1"],[data-ac="l2"]) [data-sec="prices"] section.v-y30a.v-y30a .y30a-free{color:var(--c40-free)}
/* fb=f40: окошко тёплой бумагой вместо белого, кайма тоньше, тень мягче и тёплая; фраза – обычным начертанием, тушью светлее (#3d3f45, 9,6:1). */
html[data-fb="f40"] [data-sec="prices"] section.v-a39b.v-a39b .c37-task{background:#faf5ea;border-color:rgba(201,168,76,.42);
box-shadow:0 calc(4 * var(--u)) calc(18 * var(--u)) rgba(110,84,30,.07)}
html[data-fb="f40"] [data-sec="prices"] section.v-a39b.v-a39b .c37-task::after{background:#faf5ea;border-color:rgba(201,168,76,.42)}
html[data-fb="f40"] [data-sec="prices"] section.v-a39b.v-a39b .c37-task > .c37-line.err-l{font-weight:400;color:#3d3f45;border-bottom-color:rgba(201,168,76,.45)}
html[data-fb="f40"] [data-sec="prices"] section.v-a39b.v-a39b .c37-task > .c37-line .err-w.err-w.is-bad{color:#3d3f45}
/* C40 · дополнение: надзаголовок шапки «Онлайн-школа английского · с 2019 года · 200+ учеников» (арт-директор: золото #8a6a1f на сером небе – 2,6–3,7:1).
l1 – тушью #24262b с той же разрядкой, полужирнее (7,9–11:1 к небу); l2 – тёмное золото #5e470f с ореолом костью (4,6–6,4:1). Сине-зелёное небо sky28-yar не трогаем. */
/* рецензент 40 (п. 6): надзаголовок – своим пунктом kk (ink / gd / как сейчас), чтобы выбор цвета слов его не уносил и пункт вёл к шапке */
html[data-kk="ink"] [data-sec="hero"] section:not(.sky28-yar) .copy .kick.kick{color:#24262b;font-weight:600}
html[data-kk="gd"] [data-sec="hero"] section:not(.sky28-yar) .copy .kick.kick{color:#5e470f;font-weight:600;
text-shadow:0 0 calc(8 * var(--u)) rgba(251,248,241,.98), 0 0 2px rgba(251,248,241,.98)}
/* ══ K40 · «Тесты»: без белых ореолов-«наклеек» вокруг людей (арт-директор AD-40 п. 5, куратор K: картинки чистые, ореол рисовал CSS x30t.css:36–37) – остаётся только живая тень. */
html body section.v-x30j.v-x30j .d7-ty .d7-fb{filter:drop-shadow(0 calc(5 * var(--u)) calc(3 * var(--u)) rgba(36,38,43,.26))!important}
html body section.v-x30j.v-x30j .d7-lv .d7-stud{filter:none}
/* ══ T40: «Преподаватели» d40t – тот же лист, что d37t (клевер у заголовка вместо очков общего слоя, как в leaf37.css для d37t) */
[data-v-teachers="d40t"] [data-sec="teachers"] .d35-o-spect{display:none!important}
/* ══ D40 · общий пункт «Доводка 40» (dv = d40 / as) – предложения арт-директора AD-40, только видимое, без перестройки DOM.
«Запись» на телефоне остаётся от края до края (Роман 02.11: «от стенки до стенки») – п. 1 арт-директора не берём, убираем только плоскую полосу под гравюрой. */
/* (6) «Направления»: во всех шести карточках одна ссылка «Записаться бесплатно →» (телефон – «Записаться →»), Telegram – один раз, строкой под заголовком */
html[data-dv="d40"] [data-sec="courses"] .zd-card .zd-bot{display:none!important}
html[data-dv="d40"] [data-sec="courses"] .zd-card .zd-long{display:inline!important}
html:not([data-dv="d40"]) .dv40-tg{display:none!important}
html[data-dv="d40"] [data-sec="courses"] .dv40-tg a{color:var(--azure,#29466f);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:rgba(41,70,111,.45)}
/* (10) «Как проходит обучение»: шаг 3 – тёплая подсветка тоном кости и тонкая золотая черта слева вместо холодно-серой */
html[data-dv="d40"] [data-sec="how"] .h30-steps .h30-key.h30-key{background:rgba(251,248,241,.92)!important;border-color:transparent!important;box-shadow:inset 2px 0 0 rgba(201,168,76,.95)} /* рецензент 40 (п. 8): без рамки и жёлтой заливки – кость и черта слева */
@media (max-width:1023.98px){
html[data-dv="d40"] [data-sec="courses"] .zd-card .zd-long{display:none!important}
/* (7) шапка на телефоне: «Записаться» и «Меню» одной высоты 44 px и одного радиуса, «Записаться» – заливка лазурью, 15 px */
html[data-dv="d40"] header.bar .btn.btn{min-height:44px!important;height:44px;box-sizing:border-box;display:inline-flex;align-items:center;padding:0 12px!important;font-size:15px!important;line-height:1!important;
background:#29466f!important;color:#fbf8f1!important;border:1px solid #29466f!important;border-radius:8px!important}
html[data-dv="d40"] header.bar .lf24-mb{padding:0 12px;min-width:0}
/* «Запись»: гравюра закрывает всю синюю шапку до листа (высоту ставит leaf40.js – --zp40-h), без плоской полосы цвета плиты */
html[data-dv="d40"] [data-sec="zapis"] section.v-c34a .c34-plate img{max-width:none!important;inset:0 auto auto 0!important;transform:none!important;width:100%!important;height:var(--zp40-h,340px)!important;object-fit:cover!important;object-position:50% 0!important}
/* (11) подвал на телефоне: разделы двумя ровными колонками */
html[data-dv="d40"] #contacts .ft-small > nav:not(.r){display:grid!important;grid-template-columns:1fr 1fr;column-gap:16px;justify-items:start}
}
/* ══ /D40 */
/* s0/leaf41.css */
/* прогон 41 — слой поверх leaf40 */
/* ══ Q41: главная сессия · прогон 41 ══ */
/* «Вопросы», у совы (Роман 04.11 вечер): «Записаться на пробный… раньше была заливаемая, а теперь сплошная» – возвращаем вид прогона 37:
кайма лазурью, курсив лазурью на бумаге, заливка лазурью при наведении (текст – костью), стрелка ↓ прежняя. Размер – как у кнопок (u38 п. 7). */
html[data-ui="u38"][data-ui="u38"][data-ui="u38"] [data-sec="faq"] section .fq-next a[data-book]{background:transparent!important;border:1px solid var(--azure,#29466f)!important;
transition:background-color .25s,border-color .25s,color .25s}
html[data-ui="u38"][data-ui="u38"][data-ui="u38"] [data-sec="faq"] section .fq-next a[data-book] > b{font:italic 500 max(18px, calc(20 * var(--u)))/1.2 var(--f-head)!important;color:var(--azure,#29466f)!important;letter-spacing:0!important}
@media (hover:hover){
html[data-ui="u38"][data-ui="u38"][data-ui="u38"] [data-sec="faq"] section .fq-next a[data-book]:hover{background:var(--azure,#29466f)!important}
html[data-ui="u38"][data-ui="u38"][data-ui="u38"] [data-sec="faq"] section .fq-next a[data-book]:hover > b{color:var(--bone,#fbf8f1)!important}
}
html[data-ui="u38"][data-ui="u38"][data-ui="u38"] [data-sec="faq"] section .fq-next a[data-book]:focus-visible{background:var(--azure,#29466f)!important}
html[data-ui="u38"][data-ui="u38"][data-ui="u38"] [data-sec="faq"] section .fq-next a[data-book]:focus-visible > b{color:var(--bone,#fbf8f1)!important}
/* ══ /Q41 */
/* ══ E41: края широких коробок (дизайнер E, прогон 41; пункт пульта ed). Роман 04.11: «края коробок очень лёгкие… как будто местами сливаются
с фоном. Нам нужны почётче… посмотри на другие секции, там нету такого». Коробки: «Как проходит обучение» (.h30-scene), «Учим на совесть»
(.c37-box с улицей), «Между уроками» (.m37-box с площадью, только ПК – на телефоне там лента карточек без картины).
Замер «нормальных» коробок (1440): «Тесты» – кайма 1px тушью .13, радиус 10; «Кто ведёт уроки» – кайма .14, тень 0 14px 30px -18px .28, радиус 8;
«Вопросы» – кайма .15 по тонированному листу, радиус 10. Их край держит содержимое (облака, фото, тон листа), у широких – картина тает в белое.
Было: кайма .13 (у площади – inset-тень, картина её закрывает слева и справа), ΔL края к бумаге 0,7–8. Картины не трогаем: ни фильтров, ни наложений. */
/* e41a (и e41d художника): рамка, как у остальных коробок. Кайма – настоящая граница: картина живёт внутри неё и обрезана по скруглению,
закрыть кайму не может; тон каймы .2 – на белом крае картины даёт ту же ясность, что .15 на тонированном листе «Вопросов» (ΔL ≈ 12–14);
тень и радиус – карточек «Кто ведёт уроки» / «Тестов». */
html:is([data-ed="e41a"],[data-ed="e41d"]) #how.v-a38a .h30-scene.h30-scene,
html:is([data-ed="e41a"],[data-ed="e41d"]) #prices.v-a39b .c37-box.c37-box{
border:1px solid rgba(36,38,43,.2);border-radius:calc(10 * var(--u));
box-shadow:0 1px 0 rgba(36,38,43,.05),0 14px 30px -18px rgba(36,38,43,.28)}
@media (min-width:1024px){
html:is([data-ed="e41a"],[data-ed="e41d"]) #channel.v-m40a.v-m40a .m37-box.m37-box{
border:1px solid rgba(36,38,43,.2);border-radius:calc(10 * var(--u));
box-shadow:0 1px 0 rgba(36,38,43,.05),0 14px 30px -18px rgba(36,38,43,.28)}
}
/* e41b: паспарту. Между каймой и картиной – поле тоном чуть темнее бумаги (как лист «Вопросов», на ступень глубже), по полю – две тонкие линии:
кайма снаружи и тонкая линия по краю картины (поверх картины, на 1 px). Картина и люди внутри поля – те же доли коробки, ничего не обрезано. */
html[data-ed="e41b"]{--e41m:max(8px, calc(10 * var(--u)));--e41p:#f3ecdc}
html[data-ed="e41b"] #how.v-a38a .h30-scene.h30-scene,
html[data-ed="e41b"] #prices.v-a39b .c37-box.c37-box{
border:var(--e41m) solid var(--e41p);border-radius:calc(14 * var(--u));
box-shadow:0 0 0 1px rgba(36,38,43,.18),0 1px 0 1px rgba(36,38,43,.05),0 14px 30px -18px rgba(36,38,43,.28)}
html[data-ed="e41b"] #how.v-a38a .h30-scene.h30-scene::after,
html[data-ed="e41b"] #prices.v-a39b .c37-box.c37-box::after{content:"";position:absolute;inset:0;z-index:9;pointer-events:none;
border-radius:calc(4 * var(--u));box-shadow:inset 0 0 0 1px rgba(36,38,43,.16)}
@media (min-width:1024px){
html[data-ed="e41b"] #channel.v-m40a.v-m40a .m37-box.m37-box{
border:var(--e41m) solid var(--e41p);border-radius:calc(14 * var(--u));
box-shadow:0 0 0 1px rgba(36,38,43,.18),0 1px 0 1px rgba(36,38,43,.05),0 14px 30px -18px rgba(36,38,43,.28)}
html[data-ed="e41b"] #channel.v-m40a.v-m40a .m37-box.m37-box::after{content:"";position:absolute;inset:0;z-index:9;pointer-events:none;
border-radius:calc(4 * var(--u));box-shadow:inset 0 0 0 1px rgba(36,38,43,.16)}
}
/* ══ E41D: главная сессия · пункт ed = e41d – фоны художника A (прогон 41): тот же рисунок и кадр, тон на ступень глубже, краска до края
(небо лазурью, камень тёплый). Картины подменяет leaf41.js; здесь сняты маски, растворявшие края в бумагу: у улицы – по бокам
(небо сверху по-прежнему тает под окошко «Найди ошибку»), у площади – сверху (низ по-прежнему уходит под карточки). Рама – e41a (блок E41). */
/* улица с дорисованным небом (2356×1180, 2:1; рецензент 41 п. 1): горизонт тот же (881,7 из 1180 → −37,42 % ширины), небо доходит до верха коробки – маски нет;
на телефоне верх картины ниже кромки коробки (за окошком) – там небо по-прежнему тает сверху */
html[data-ed="e41d"] [data-sec="prices"] section.v-a39b.v-a39b .a39-street{margin-top:-37.42%;-webkit-mask-image:none;mask-image:none}
@media (max-width:1023.98px){ html[data-ed="e41d"] [data-sec="prices"] section.v-a39b.v-a39b .a39-street{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%);mask-image:linear-gradient(180deg,transparent 0,#000 14%)} }
@media (min-width:1024px){
html[data-ed="e41d"] #channel.v-m39a.v-m39a.v-m39a .m37-sq{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 72%,transparent 97%);mask-image:linear-gradient(180deg,#000 0,#000 72%,transparent 97%)}
}
/* рецензент 41 (п. 3): при e41d край держит тон самой картины – кайма тоньше, как у остальных коробок (.15, а не .2 рамки e41a) */
html[data-ed="e41d"] #how.v-a38a .h30-scene.h30-scene,
html[data-ed="e41d"] #prices.v-a39b .c37-box.c37-box{border-color:rgba(36,38,43,.15)}
@media (min-width:1024px){ html[data-ed="e41d"] #channel.v-m40a.v-m40a .m37-box.m37-box{border-color:rgba(36,38,43,.15)} }
/* ══ /E41D */
/* s0/leaf42.css */
/* прогон 42 — слой поверх leaf41 */
/* ══ R42: главная сессия · прогон 42 · общий пункт rv «Всплытие разделов» (Роман 04.11: «каждая секция при прокрутке вниз как бы всплывает снизу вверх очень гладко… какие-то элементы просто pop up… надо догнать их»).
Основа – проявление M32 (рубрика и крупные блоки раздела, leaf32.js): здесь дальше подъём и длиннее мягкая кривая; карточки внутри (направления, преподаватели, отзывы, «Между уроками») всплывают по очереди (leaf42.js);
ленивые картинки проявляются по загрузке. Только transform/opacity; при reduced-motion и «Остановить анимацию» – сразу на месте. */
html[data-rv="v42a"]{--r42-rise:46px;--r42-t:.95s;--r42-e:cubic-bezier(.16,1,.3,1);--r42-step:120ms;--r42-c:28px}
html[data-rv="v42b"]{--r42-rise:70px;--r42-t:.75s;--r42-e:cubic-bezier(.22,1.2,.36,1);--r42-step:90ms;--r42-c:40px}
html:is([data-rv="v42a"],[data-rv="v42b"])[data-mo].m32-rv-on .m32-rv:not(.m32-in){opacity:0;transform:translate3d(0,var(--r42-rise),0)}
html:is([data-rv="v42a"],[data-rv="v42b"])[data-mo].m32-rv-on .m32-rv{transition:opacity calc(var(--r42-t) * .8) ease-out,transform var(--r42-t) var(--r42-e);transition-delay:calc(var(--m-i,0) * var(--r42-step))}
html:is([data-rv="v42a"],[data-rv="v42b"]) .r42:not(.r42-in){opacity:0;transform:translate3d(0,var(--r42-c),0) scale(.985)}
html:is([data-rv="v42a"],[data-rv="v42b"]) .r42{transition:opacity calc(var(--r42-t) * .8) ease-out,transform var(--r42-t) var(--r42-e);transition-delay:calc(160ms + var(--r42-i,0) * var(--r42-step));will-change:transform,opacity}
html:is([data-rv="v42a"],[data-rv="v42b"]) img.r42-img:not(.r42-ok){opacity:0}
html:is([data-rv="v42a"],[data-rv="v42b"]) img.r42-img{transition:opacity .7s ease-out}
@media (prefers-reduced-motion:reduce){ .r42,img.r42-img{opacity:1!important;transform:none!important;transition:none!important} }
html:is(.still,[data-theatre="off"]) :is(.r42,img.r42-img){opacity:1!important;transform:none!important;transition:none!important}
@media print{ .r42,img.r42-img{opacity:1!important;transform:none!important} }
/* ══ /R42 */
/* ══ Q42: Роман 04.11 23:09 «фигуры прозрачные – сделай плотными»: фигуры больше не смешиваются с фоном (multiply просвечивал линии фона сквозь светлые места) – плотные, как крестьяне окна канала */
#channel.v-m42a.v-m42a.v-m42a.v-m42a .m37-f.m42-f,
#channel.v-m42a.v-m42a.v-m42a.v-m42a .m37-f.m42-f img,
html section.v-a42b.v-a42b.v-a42b .a42-pi,
html section.v-a42b.v-a42b.v-a42b .a42-one img{mix-blend-mode:normal!important}
/* ══ /Q42 */
/* Q42b (Роман 23:09–23:11): Нюрнберг в цвете – фон на всю коробку «Час…»; деревня в канале – акварель, плотнее */
html section.v-a42b.v-a42b.v-a42b .c37-box{overflow:hidden}
html section.v-a42b.v-a42b.v-a42b .a42-town{left:0;right:0;top:0;bottom:0;opacity:.62;-webkit-mask-image:none;mask-image:none}
html section.v-a42b.v-a42b.v-a42b .a42-town img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
#channel.v-m42a.v-m42a.v-m42a .m42-bg{opacity:.62}
@media (max-width:1023.98px){#channel.v-m42a.v-m42a.v-m42a .m37-f-club.m42-f{overflow:visible}#channel.v-m42a.v-m42a.v-m42a .m42-bgm{opacity:1;mix-blend-mode:normal;inset:0 -90px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0,#000 14%,#000 80%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0,#000 14%,#000 80%,transparent 100%);mask-composite:intersect}} /* 05.11: деревня на телефоне была почти не видна */
/* Q42c (Роман 23:58 «цвета чуть убавь – на 10 процентов»): насыщенность новых фигур −10 % */
#channel.v-m42a .m42-f img,section.v-a42b .a42-pi,section.v-a42b .a42-one img,section.v-a42h .h30-pair,section.v-x42b .x42-dbt,section.v-c42z .c42-tch,section.v-c42z img.y32-pair{filter:saturate(.9)!important}
/* ══ V42c: «как у Вирджинии» (замер 05.11): каждый атом – 50 px, 0,5 с, cubic-bezier(.19,1,.22,1); на телефоне 34 px, 0,45 с. Старое проявление блоков (M32) и R42 при v42c выключены. */
html[data-rv="v42c"]{--vr-d:50px;--vr-t:.5s;--vr-e:cubic-bezier(.19,1,.22,1)}
/* 05.11 моушн: телефон как ПК – 50 px за 0,5 с (34 px читалось как мигание) */
html[data-rv="v42c"].m32-rv-on .m32-rv:not(.m32-in){opacity:1}
html[data-rv="v42c"] .vr-go{transition:opacity var(--vr-t) var(--vr-e),transform var(--vr-t) var(--vr-e),translate var(--vr-t) var(--vr-e)!important;transition-delay:var(--vr-dl,0ms)!important}
html[data-rv="v42c"] .vr-h{opacity:0!important}
html[data-rv="v42c"] .vr-w{will-change:opacity,translate}
html[data-rv="v42c"] .vr-h.vr-t{transform:translate3d(0,var(--vr-d),0)!important}
html[data-rv="v42c"] .vr-h.vr-tl{translate:0 var(--vr-d)!important}
@media (prefers-reduced-motion:reduce){ .vr-h{opacity:1!important;transform:none!important;translate:none!important} }
html:is(.still,[data-theatre="off"]) .vr-h{opacity:1!important;transform:none!important;translate:none!important}
@media print{ .vr-h{opacity:1!important;transform:none!important;translate:none!important} }
/* ══ /V42c */
/* Q42d (Роман 05.11 12:08–12:09): Нюрнберг – чёрно-белая гравюра, как у танцующих крестьян; деревня канала – чёткие края по коробке, без размытия.
Светлота и «умножение» запечены в саму картинку (town-bw, village-k): меньше слоёв смешения – легче прокрутка на телефоне. */
html section.v-a42b.v-a42b.v-a42b .a42-town{opacity:1;mix-blend-mode:normal}
#channel.v-m42a.v-m42a.v-m42a .m42-bg{top:0;bottom:0;height:auto;opacity:1;mix-blend-mode:normal;-webkit-mask-image:none;mask-image:none}
#channel.v-m42a.v-m42a.v-m42a .m42-bg img{object-position:50% 30%}
@media (max-width:1023.98px){#channel.v-m42a.v-m42a.v-m42a.v-m42a .m42-bgm{opacity:1;mix-blend-mode:normal}}
@media (max-width:1023.98px){#channel.v-m42a.v-m42a.v-m42a.v-m42a .m42-bgm{-webkit-mask-image:none;mask-image:none;inset:0 -100px 0 -36px}}
/* Q42e (Роман 05.11 12:12 «в воздухе висят опять»): фон канала – полоса от верха коробки до ног людей, низ картинки (передний план: берег, мостки) – под ногами; ниже – чистое поле коробки, край чёткий */
@media (min-width:1024px){
#channel.v-m42a.v-m42a.v-m42a.v-m42a .m42-bg{top:0;bottom:auto;height:calc(var(--m42-feet,410px) + 26px)}
#channel.v-m42a.v-m42a.v-m42a.v-m42a .m42-bg img{object-position:50% 100%}
}
/* Q42f (Роман 05.11 12:03 «можно» – рецензент: «The beginning of wisdom» без начала стиха меняет смысл): на телефоне на свитке только стихи целиком;
длинные (25:11, 27:17, 16:24) на телефоне не показываются – смена стихов (h13.js) пропускает скрытые */
@media (max-width:1023.98px){
html[data-hs="h34s"] [data-sec="hero"] .v-angel17.hero .angel .pv[data-ref="Proverbs 9:10"]::before{content:"The fear of the LORD is the beginning of wisdom"}
html[data-hs="h34s"] [data-sec="hero"] .v-angel17.hero .angel .pv[data-ref="Proverbs 15:1"]::before{content:"A soft answer turneth away wrath"}
html[data-hs="h34s"] [data-sec="hero"] .v-angel17.hero .angel .pv[data-ref="Proverbs 18:21"]::before{content:"Death and life are in the power of the tongue"}
html[data-hs="h34s"] [data-sec="hero"] .v-angel17.hero .angel .pv[data-ref="Proverbs 4:7"]::before{content:"Wisdom is the principal thing; therefore get wisdom"}
html[data-hs="h34s"] [data-sec="hero"] .v-angel17.hero .angel :is(.pv,.pv.long){font-size:max(11px, 4.3cqw)!important}
html[data-hs="h34s"] [data-sec="hero"] .v-angel17.hero .angel .pv:is([data-ref="Proverbs 25:11"],[data-ref="Proverbs 27:17"],[data-ref="Proverbs 16:24"]){display:none!important}
}
/* V42c-rise (05.11 моушн): большие блоки .rise – та же рука, что атомы: 50 px, 0,5 с, expo-out, без задержки */
html.js[data-rv="v42c"] .rise{transition-timing-function:cubic-bezier(.19,1,.22,1)!important;transition-duration:.5s!important;transition-delay:0s!important}
html.js[data-rv="v42c"] .rise:not(.is-in){transform:translate3d(0,var(--vr-d),0)!important}
/* Q42g (Роман 05.11 13:09 «фон пусть меняется тематически под предложения»): шесть фонов-гравюр под шесть фраз (pr13 ставит .is-on по data-sc); Нюрнберг – у первой */
html section.v-a42b.v-a42b.v-a42b .a42-town img{position:absolute;inset:0;opacity:0;transition:opacity .7s ease}
html section.v-a42b.v-a42b.v-a42b .a42-town img.is-on{opacity:1}
/* V42c-img (05.11 19:11 «картинки прогружаются слоями»): догружаемая картинка не рисуется по частям – появляется целиком, когда раскодирована */
html[data-rv="v42c"] img.vr-ld:not(.vr-ok){opacity:0!important}
html[data-rv="v42c"] img.vr-ld.vr-ok{transition:opacity .45s ease!important}
/* ══ S42: свой выпадающий список формы записи (ПК) – бумага, тушь, ярь; без системного серого окна */
.zs-list{position:absolute;z-index:3000;margin:0;padding:6px;list-style:none;background:#fffdf8;border:1px solid rgba(36,38,43,.14);border-radius:12px;
box-shadow:0 14px 40px -12px rgba(36,38,43,.35),0 2px 6px rgba(36,38,43,.08);max-height:340px;overflow:auto;
font:italic 400 clamp(17px,calc(26 * var(--u)),22px)/1.25 var(--f-body,Georgia,serif);color:#24262b;
opacity:0;transform:translateY(-6px);transition:opacity .18s ease,transform .22s cubic-bezier(.19,1,.22,1);pointer-events:none}
.zs-list.up{transform:translateY(6px)}
.zs-list.is-open{opacity:1;transform:none;pointer-events:auto}
.zs-list li{position:relative;padding:9px 18px 9px 34px;border-radius:8px;cursor:pointer;white-space:nowrap}
.zs-list li:hover,.zs-list li.is-act{background:rgba(44,90,78,.09);color:#2c5a4e}
.zs-list li[aria-selected="true"]{color:#2c5a4e}
.zs-list li[aria-selected="true"]::before{content:"";position:absolute;left:14px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#c9a84c}
@media (prefers-reduced-motion:reduce){ .zs-list{transition:none} }
/* ══ /S42 */
/* ══ S42v: окно видеоотзыва */
.rv42-lb{position:fixed;inset:0;z-index:5000;display:flex;align-items:center;justify-content:center;background:rgba(20,22,26,.86);padding:20px;box-sizing:border-box}
.rv42-lb video{max-width:100%;max-height:100%;border-radius:12px;background:#000;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.rv42-x{position:absolute;top:14px;right:18px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(251,248,241,.95);color:#24262b;font:28px/44px Georgia,serif;cursor:pointer}
/* ══ /S42v */
/* 08.11 – в c42v остался блок фона от c34 (.c34-plate без стилей вне .v-c34rv) – вставал картинкой под карточками отзывов (Роман 21:14) */
.v-c42v .c34-plate{display:none!important}
/* 08.11 – подпись над шагами «С чего начинается обучение» (отзыв Олега: шаги – про начало, не про сам урок) */
#how .h30-k2{margin-top:14px}
@media (max-width:1023.98px){#how.h30 .h30-k2.h30-k2{order:3;margin-top:28px}}