/* ============================================================================
   eAgronom — ФАСЛ. Оформление сайта.

   ЧТО ЭТО. Слой поверх собранного бандла: типографика, цвет, форма, отступы
   и движение. Бизнес-логика, маршруты, данные и разметка приложения не
   трогаются ни в одной строке.

   ГЛАВНАЯ МЫСЛЬ. У фермера год не линейный, а круговой, и главный вопрос не
   «какой курс лучше», а «что мне нужно знать СЕЙЧАС». Поэтому тема не одна,
   а четыре: сайт открывается в палитре текущего сезона по календарю, и сезон
   можно переключить. Меняется не только цвет — меняется ПОВЕДЕНИЕ страницы.

   ДВА УРОВНЯ ДЕЙСТВИЯ.

     html.fasl       — палитра. Стоит на всех страницах. Иначе главная была бы
                       осенней, а каталог остался бы прежним зелёным, и сайт
                       выглядел бы наполовину переделанным.

     html.fasl-home  — строение и движение. Только на Асосӣ: разворот, сетка
                       материалов, восемь значков, сезонная моторика. На
                       странице курса эти правила перекрасили бы интерфейс,
                       не изменив его устройства, то есть сделали бы хуже.

   ПОЧЕМУ ЭТО РАБОТАЕТ БЕЗ ИСХОДНИКОВ. Исходников React в проекте нет — есть
   один собранный файл. Но каждый его элемент несёт атрибут вида
   code-path="src/pages/Home.tsx:306:21", устойчивый между перерисовками. Это
   даёт точную адресацию любого узла приложения из CSS. Селекторы ниже
   опираются либо на них, либо на классы прослоек (.hero-full-x, .ehb-*,
   .eagf-*) — и то и другое проверено по самому бандлу, а не угадано.

   КАК ВЫКЛЮЧИТЬ. Откройте страницу с ?nofasl=1 — вернётся прежний вид, без
   пересборки и без правки файлов. Совсем убрать — снять <link> и <script> в
   index.html.

   ПОРЯДОК ЗАГРУЗКИ. Файл идёт ПОСЛЕ стилей бандла. Иначе его правила
   проиграют по порядку и ничего не изменится.
   ========================================================================= */

/* ============================================================================
   1. ЧЕТЫРЕ ПАЛИТРЫ

   Кроме основных значений у каждого сезона есть шкала из четырёх родственных
   оттенков --s-i1…--s-i4. Она существует ровно ради значков: именно
   одинаковая заливка делала их неразличимыми.

   Кривые и длительности тоже сезонные. Весна упругая и быстрая, лето
   тягучее, осень с оседанием, зима самая медленная и спокойная.

   УГОЛКИ ТОЖЕ СЕЗОННЫЕ, и это не украшение. Цвет человек считывает за
   мгновение и перестаёт замечать; форма же держится в поле зрения всё время,
   пока он читает страницу. Год виден в очертании карточки, а не только в её
   оттенке:

     Баҳор     мягкие, растущие — 18
     Тобистон  налитые, почти круглые — 22
     Тирамоҳ   собранные, 12, и один угол срезан: лист лёг на землю
     Зимистон  резкие, вымерзшие — 6

   Шкала из четырёх ступеней, а не одно значение: у мелкой плашки и у
   разворота разный радиус, и если задать им общий, мелкое станет пилюлей
   раньше, чем крупное перестанет быть коробкой.

     --r-1  плашки, значки, мелкие кнопки
     --r-2  поля ввода, обычные кнопки; отсюда же берёт бандл (--radius)
     --r-3  карточки
     --r-4  разворот и крупные полосы
     --r-card  форма карточки целиком: у осени это ЧЕТЫРЕ значения, поэтому
               токен, а не число
     --r-btn   кнопка с текстом. Летом и весной пилюля, осенью и зимой —
               прямоугольник со скруглением. Год чувствуется под пальцем:
               в июле кнопка налитая, в январе собранная

   ЧТО СЕЗОНУ НЕ ПОДЧИНЯЕТСЯ. Круг. Аватары устодон, кружки шагов пути,
   круглая кнопка чата — это не «сильно скруглённые прямоугольники», а круги,
   и зимой они должны остаться кругами. Для них --f-r-pill, и он постоянный.

   --radius — переменная самого бандла (:root{--radius:.625rem}). Здесь она
   переопределена, и вместе с ней сами собой уходят в сезон rounded-lg, -md,
   -sm, -xs, -xl во всём приложении: одна строка вместо сотни селекторов.
   ========================================================================= */
html.fasl[data-season="bahor"]{
  --s-acc:#5B8C3E; --s-soft:#EAF1E2; --s-deep:#2F4F1F;
  --s-i1:#7FB069; --s-i2:#5B8C3E; --s-i3:#A7C957; --s-i4:#3E6B2A;
  --s-fx:#9CCB6A;                                    /* лепестки */
  --s-hero-a:#E4F0D6; --s-hero-b:#D3E7BE; --s-hero-c:#C6DFAE;
  --s-e:cubic-bezier(.16,1.1,.3,1);
  --s-dur:520ms;
  --r-1:10px; --r-2:12px; --r-3:18px; --r-4:22px; --r-card:18px; --r-btn:999px;
}
html.fasl[data-season="tobiston"]{
  --s-acc:#D08A18; --s-soft:#FBF0DA; --s-deep:#6E4405;
  --s-i1:#E8A33D; --s-i2:#D08A18; --s-i3:#F2C14E; --s-i4:#A8690A;
  --s-fx:#F5D07A;                                    /* пыльца */
  --s-hero-a:#FDF1D8; --s-hero-b:#F8E4BC; --s-hero-c:#F3D9A6;
  --s-e:cubic-bezier(.4,0,.2,1);
  --s-dur:680ms;
  --r-1:12px; --r-2:14px; --r-3:22px; --r-4:26px; --r-card:22px; --r-btn:999px;
}
html.fasl[data-season="tiramoh"]{
  --s-acc:#A5522C; --s-soft:#F7E9E1; --s-deep:#5C2A13;
  --s-i1:#C4703D; --s-i2:#A5522C; --s-i3:#D98E5A; --s-i4:#7A3A1C;
  --s-fx:#C97A45;                                    /* лист */
  --s-hero-a:#F8E7DA; --s-hero-b:#F0D5C1; --s-hero-c:#E7C4AB;
  --s-e:cubic-bezier(.34,1.2,.64,1);
  --s-dur:600ms;
  /* Срезан нижний левый — тот угол, куда лист ложится, а не тот, откуда
     смотрят. Три пикселя, а не ноль: срез должен читаться как форма, а не как
     недокрашенный угол. */
  --r-1:7px; --r-2:8px; --r-3:12px; --r-4:16px; --r-card:12px 12px 12px 3px; --r-btn:11px;
}
html.fasl[data-season="zimiston"]{
  --s-acc:#4A6572; --s-soft:#E7EDF0; --s-deep:#26363E;
  --s-i1:#6B8794; --s-i2:#4A6572; --s-i3:#8FA7B2; --s-i4:#33474F;
  --s-fx:#DCE9EF;                                    /* снег */
  --s-hero-a:#EDF3F6; --s-hero-b:#DCE7EC; --s-hero-c:#CBDAE1;
  --s-e:cubic-bezier(.25,.8,.3,1);
  --s-dur:760ms;
  --r-1:4px; --r-2:5px; --r-3:6px; --r-4:8px; --r-card:6px; --r-btn:6px;
}

html.fasl{
  /* Страховка: сезон не проставлен — берём весну, а не пустоту. */
  --s-acc:#5B8C3E; --s-soft:#EAF1E2; --s-deep:#2F4F1F;
  --s-i1:#7FB069; --s-i2:#5B8C3E; --s-i3:#A7C957; --s-i4:#3E6B2A;
  --s-fx:#9CCB6A;
  --s-hero-a:#E4F0D6; --s-hero-b:#D3E7BE; --s-hero-c:#C6DFAE;
  --s-e:cubic-bezier(.16,1.1,.3,1); --s-dur:520ms;
  --r-1:10px; --r-2:12px; --r-3:18px; --r-4:22px; --r-card:18px; --r-btn:999px;

  /* ------------------------------------------------------------------------
     БРЕНД. Зелень eAgronom сезону НЕ подчиняется.

     Разделение простое и оно же — главное правило всей темы:

       бренд   — то, по чему узнают платформу: тёмно-зелёная панель, которая
                 стоит на каждой странице в рельсе;
       сезон   — то, что отвечает на вопрос «что в поле сейчас»: действия,
                 акценты, наведение, свечение, погода.

     Без этого разделения зимой сайт становится «синим сайтом со снежинками»,
     и от кишоварзӣ в нём не остаётся ничего. Сезон — слой ПОВЕРХ бренда, а
     не замена ему.
     --------------------------------------------------------------------- */
  --brand:#2F7A3D;                 /* зелёный действия, историческая заливка */
  --brand-deep:#1F3D26;            /* панель идентичности                    */
  --brand-ink:#FFFFFF;

  /* ------------------------------------------------------------------------
     СЕЗОН — ПУБЛИЧНЫЕ ИМЕНА.

     Ниже по файлу правила берут эти шесть, а не --s-* напрямую. --s-* —
     внутренняя кухня палитры (четыре ступени значков, три остановки
     градиента), и правилам про неё знать незачем. Захотим поменять, из чего
     считается свечение, — поменяем здесь одну строку, а не сорок правил.
     --------------------------------------------------------------------- */
  --season-primary:  var(--s-acc);
  --season-secondary:var(--s-deep);
  --season-accent:   var(--s-i3);
  --season-surface:  var(--s-soft);
  --season-border:   color-mix(in srgb, var(--s-acc) 45%, var(--f-rule));
  --season-glow:     color-mix(in srgb, var(--s-acc) 20%, transparent);
  /* Тень одна на весь сайт и тоже сезонная: зимой она холодная и короткая,
     летом тёплая. Разные тени у соседних карточек — первый признак того,
     что их писали в разное время. */
  --season-shadow:   0 10px 28px color-mix(in srgb, var(--s-deep) 15%, transparent);

  /* Постоянное — не зависит от сезона. */
  --f-bg:#FCFBF7; --f-surface:#FFFFFF;
  --f-ink:#1F231C; --f-ink-2:#62685C; --f-mute:#9AA095;
  --f-rule:#E1DED2;
  --f-foot:#1F231C;

  --f-sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",sans-serif;

  --f-h1:clamp(32px,5.2vw,62px);
  --f-h2:clamp(24px,3.2vw,38px);
  --f-h3:17.5px;

  /* Прежние имена оставлены и указывают на сезонную шкалу: по ним написана
     половина файла, и переименование ничего бы не улучшило. Пилюля сезону не
     подчиняется — круг остаётся кругом в любое время года, иначе аватары и
     круглые кнопки поедут вслед за карточками. */
  --f-r:var(--r-2); --f-r-lg:var(--r-3); --f-r-pill:999px;

  /* Отсюда бандл берёт rounded-lg / -md / -sm / -xs / -xl. */
  --radius:var(--r-2);

  --f-1:4px; --f-2:8px; --f-3:14px; --f-4:22px; --f-5:34px; --f-6:52px; --f-7:76px;

  /* Кривые. Встроенные слишком вялые: им не хватает толчка, который делает
     движение осмысленным, а не «просто анимацией». */
  --e-out:    cubic-bezier(.23,1,.32,1);    /* сильнее встроенного ease-out */
  --e-spring: cubic-bezier(.34,1.56,.64,1); /* лёгкий перелёт, bounce ≈ .2 */

  --f-fast:150ms; --f-d:230ms; --f-slow:400ms;
  --tm:420ms;                                /* длительность перекраски */
}

/* ============================================================================
   2. ГАШЕНИЕ ПРЕЖНИХ СЛОЁВ

   На главной уже лежат три источника вида: утилиты бандла, стеклянная
   надстройка и анимации появления с fill-mode: both. Пока они живы, тема
   спорит с ними за каждое свойство. Гасим один раз здесь.

   .a-up особенно важен: fill-mode: both означает, что несработавшая анимация
   оставляет секцию невидимой навсегда. Своё появление ниже устроено
   наоборот — скрытого состояния не существует, пока скрипт не подтвердил,
   что умеет показать обратно.
   ========================================================================= */
html.fasl .a-up{ animation:none !important; opacity:1 !important; transform:none !important; }
html.fasl .hero-live{ animation:none !important; background-size:auto !important; }
html.fasl .shadow, html.fasl .shadow-sm, html.fasl .shadow-md,
html.fasl .shadow-lg, html.fasl .shadow-xl, html.fasl .shadow-2xl{ box-shadow:none !important; }

/* ============================================================================
   3. ОСНОВА
   ========================================================================= */
html.fasl body{
  background:var(--f-bg) !important;
  color:var(--f-ink) !important;
  font-family:var(--f-sans) !important;
  transition:background-color var(--tm) var(--e-out) !important;
}
html.fasl ::selection{ background:var(--s-acc); color:#fff; }

/* ============================================================================
   4. ПЕРЕКРАСКА СЛОТОВ БАНДЛА — НА ВСЕХ СТРАНИЦАХ

   Приложение собрано на утилитах Tailwind с зашитыми значениями цвета. Пока
   они живы, тема лежит островами: белая карточка рядом с зелёной плашкой и
   бежевым кружком. Красится один раз здесь и покрывает сразу все экраны —
   каталог, кабинет, тест, сертификат, формы.

   Оператор ~= вместо *= принципиален: классы с прозрачностью выглядят как
   bg-[#10B981]/20, и вхождение подстроки поймало бы их тоже — полупрозрачная
   подложка залилась бы плотным цветом. Там, где ниже нужны как раз варианты
   с прозрачностью, *= оставлено намеренно.
   ========================================================================= */

/* — подложки — */
html.fasl [class*="bg-[#F5F3EB]"],
html.fasl [class*="bg-[#F9F7F0]"]{ background-color:var(--f-bg) !important; }
html.fasl [class~="bg-white"],
html.fasl [class*="bg-[#F3F1E8]"],
html.fasl [class*="bg-[#EFEDE3]"]{ background-color:var(--f-surface) !important; }
html.fasl [class*="bg-[#E8F3E1]"],
html.fasl [class*="bg-[#FFF3D6]"]{
  background-color:var(--s-soft) !important;
  transition:background-color var(--tm) var(--e-out) !important;
}

/* — ПОЛУПРОЗРАЧНЫЕ ПОДЛОЖКИ —

   Плотные заливки выше ловятся через ~= намеренно: вхождение подстроки
   забрало бы и bg-[#10B981]/20, и лёгкая подложка залилась бы плотным
   цветом. Но сами эти подложки так и остались изумрудными — плашка
   категории на странице курса, кружок под значком устода, десятки мелких
   фонов по всему приложению. Рядом с ними значок уже перекрашен сезоном
   (text-[#10B981] ловится ниже), и выходило: терракотовая книга в мятном
   кружке.

   Ловим каждую ступень прозрачности отдельно и подставляем ТУ ЖЕ долю, но
   от сезонного цвета. Подложка остаётся лёгкой — меняется только тон.
   Разом, одним правилом, их не взять: 20% и 30% — это разная плотность, и
   усреднить её значило бы испортить обе. */
html.fasl [class*="bg-[#10B981]/10"]{
  background-color:color-mix(in srgb, var(--season-primary) 10%, transparent) !important;
  transition:background-color var(--tm) var(--e-out) !important;
}
html.fasl [class*="bg-[#10B981]/15"]{
  background-color:color-mix(in srgb, var(--season-primary) 15%, transparent) !important;
  transition:background-color var(--tm) var(--e-out) !important;
}
html.fasl [class*="bg-[#10B981]/20"]{
  background-color:color-mix(in srgb, var(--season-primary) 20%, transparent) !important;
  transition:background-color var(--tm) var(--e-out) !important;
}
html.fasl [class*="bg-[#10B981]/30"]{
  background-color:color-mix(in srgb, var(--season-primary) 30%, transparent) !important;
  transition:background-color var(--tm) var(--e-out) !important;
}

/* — текст — */
html.fasl [class*="text-[#1F3D26]"],
html.fasl [class*="text-[#22301F]"]{ color:var(--f-ink) !important; }
html.fasl [class*="text-[#5C6B57]"],
html.fasl [class*="text-[#3C4A37]"],
html.fasl [class*="text-[#4A5A43]"]{ color:var(--f-ink-2) !important; }
html.fasl [class*="text-[#8B937F]"],
html.fasl [class*="text-[#A3AA97]"],
html.fasl [class*="text-[#B4BAA8]"]{ color:var(--f-mute) !important; }
html.fasl [class*="text-[#2F7A3D]"],
html.fasl [class*="text-[#10B981]"],
html.fasl [class*="text-[#B8860B]"]{
  color:var(--s-acc) !important;
  transition:color var(--tm) var(--e-out) !important;
}

/* — линейки — */
html.fasl [class*="border-[#E7E3D6]"],
html.fasl [class*="border-[#EEEBDF]"],
html.fasl [class*="border-[#CFE0B8]"]{ border-color:var(--f-rule) !important; }

/* — заливки действия — */
html.fasl [class~="bg-[#2F7A3D]"],
html.fasl [class~="bg-[#10B981]"],
html.fasl [class~="bg-[#059669]"],
html.fasl [class~="bg-[#7BC24A]"],
html.fasl [class~="bg-[#F7C948]"]{
  background-color:var(--season-primary) !important; color:#fff !important;
  transition:background-color var(--tm) var(--e-out) !important;
}

/* — ПОДСВЕТКА ДЕЙСТВИЯ —

   У трёх кнопок сборки свечение вписано в САМ КЛАСС:
   shadow-[0_0_15px_rgba(16,185,129,0.4)] и его 20- и 30-пиксельные братья.
   Это выбранная плашка фильтра в каталоге, круглая кнопка помощи и плитка
   знака на странице регистрации.

   Заливку им правило выше уже перекрасило сезоном, а свечение оставалось
   изумрудным: осенью выходила коричневая кнопка в зелёном ореоле — два
   разных сезона на одном элементе, и глаз цепляется именно за это.

   Ловим класс, а не место: правило накрывает все три сразу и не разойдётся
   с ними, если сборка переставит кнопку на другую строку. Радиус берём из
   самого класса — 15, 20 и 30, — иначе маленькая плашка фильтра засветилась
   бы как кнопка помощи. Доля 40% повторяет прежнюю прозрачность 0.4:
   меняется цвет, а не сила свечения. */
html.fasl [class*="shadow-[0_0_15px_rgba(16"]{
  box-shadow:0 0 15px color-mix(in srgb, var(--season-primary) 40%, transparent) !important;
  transition:box-shadow var(--tm) var(--e-out) !important;
}
html.fasl [class*="shadow-[0_0_20px_rgba(16"]{
  box-shadow:0 0 20px color-mix(in srgb, var(--season-primary) 40%, transparent) !important;
  transition:box-shadow var(--tm) var(--e-out) !important;
}
html.fasl [class*="shadow-[0_0_30px_rgba(16"]{
  box-shadow:0 0 30px color-mix(in srgb, var(--season-primary) 40%, transparent) !important;
  transition:box-shadow var(--tm) var(--e-out) !important;
}

/* — ПОЛОСА ПРОКРУТКИ —

   Сборка красит её глобально и изумрудом, без всякого селектора:
     ::-webkit-scrollbar-thumb{ background:#10b9814d }
     *{ scrollbar-color:rgba(16,185,129,.45) rgba(16,185,129,.06) }
   То есть зелёная полоса стояла у правого края в любой сезон — самая
   заметная зелёная черта на осенней или зимней странице, и убрать её было
   нечем: она не привязана ни к одному элементу.

   Берём те же доли прозрачности, что и у сборки (5 / 30 / 50 для webkit,
   45 / 6 для firefox): меняется цвет, а не вес полосы — иначе прокрутка
   стала бы то заметнее, то бледнее вместе с сезоном.

   Правила идут парой «корень + всё внутри»: у ::-webkit-scrollbar нет
   наследования, и одного html.fasl хватило бы только на полосу страницы, а
   не на списки, которые прокручиваются внутри себя. Собственная полоса
   выпадающего списка устодон описана ниже по файлу и остаётся своей: она
   лежит на тёмной панели, где сезонный тон утонул бы. */
html.fasl::-webkit-scrollbar-track,
html.fasl *::-webkit-scrollbar-track{
  background:color-mix(in srgb, var(--season-primary) 5%, transparent) !important;
}
html.fasl::-webkit-scrollbar-thumb,
html.fasl *::-webkit-scrollbar-thumb{
  background:color-mix(in srgb, var(--season-primary) 30%, transparent) !important;
  transition:background-color var(--tm) var(--e-out) !important;
}
html.fasl::-webkit-scrollbar-thumb:hover,
html.fasl *::-webkit-scrollbar-thumb:hover{
  background:color-mix(in srgb, var(--season-primary) 50%, transparent) !important;
}
/* Firefox и стандартное свойство: там полоса задаётся одной строкой. */
html.fasl,
html.fasl *{
  scrollbar-color:color-mix(in srgb, var(--season-primary) 45%, transparent)
                  color-mix(in srgb, var(--season-primary) 6%, transparent) !important;
}

/* — ПАНЕЛЬ ИДЕНТИЧНОСТИ —

   Тёмно-зелёная панель в рельсе (Home.tsx:134 и Navbar.tsx:101 — то есть на
   КАЖДОЙ странице). Она была в списке выше и красилась сезоном: зимой
   становилась серо-синей, и последнее зелёное пятно с сайта уходило.

   Возвращена бренду. Сезон на ней остался, но там, где он и должен быть, —
   в кайме, свечении и кнопке внутри: панель узнаётся как eAgronom, а время
   года по ней всё равно читается. */
html.fasl [class~="bg-[#1F3D26]"]{
  background-color:var(--brand-deep) !important;
  color:var(--brand-ink) !important;
  border:1px solid color-mix(in srgb, var(--season-primary) 40%, transparent) !important;
  box-shadow:0 0 0 4px var(--season-glow) !important;
  transition:border-color var(--tm) var(--e-out),
             box-shadow var(--tm) var(--e-out),
             border-radius var(--tm) var(--e-out) !important;
}
/* Кнопка внутри панели — наоборот, целиком сезонная: это действие, а
   действие всегда в цвете текущего сезона. */
html.fasl [class~="bg-[#1F3D26]"] a{
  background-color:var(--season-primary) !important;
  color:#fff !important;
  border-radius:var(--r-btn) !important;
  transition:background-color var(--tm) var(--e-out), transform var(--f-fast) var(--e-out) !important;
}
html.fasl [class~="bg-[#1F3D26]"] a:active{ transform:scale(.97) !important; }
@media (hover:hover) and (pointer:fine){
  html.fasl [class~="bg-[#1F3D26]"] a:hover{ background-color:var(--season-secondary) !important; }
}

/* — НАВЕДЕНИЕ ПО ВСЕМУ САЙТУ —

   Приложение само помечает, что у него наводится: заливка действия темнеет
   (hover:bg-…), ссылка меняет цвет (hover:text-…), карточка получает рамку
   (hover:border-…). Перечисляем ровно эти пометки — и сезон достаётся всем
   кликабельным элементам приложения разом: курсы, устодон, донишҷӯён,
   сертификаты, панель маъмур, кабинет.

   *= вместо ~= здесь обязательно: имя утилиты содержит двоеточие
   (hover:bg-[#059669]), и точное совпадение слова его не поймает. */
@media (hover:hover) and (pointer:fine){
  html.fasl [class*="hover:bg-[#059669]"]:hover,
  html.fasl [class*="hover:bg-[#047857]"]:hover,
  html.fasl [class*="hover:bg-[#276633]"]:hover,
  html.fasl [class*="hover:bg-[#10B981]"]:hover,
  html.fasl [class*="hover:bg-[#EDBD3B]"]:hover{ background-color:var(--season-secondary) !important; }

  html.fasl [class*="hover:bg-[#E8F3E1]"]:hover,
  html.fasl [class*="hover:bg-[#F3F1E8]"]:hover{ background-color:var(--season-surface) !important; }

  html.fasl [class*="hover:text-[#10B981]"]:hover,
  html.fasl [class*="hover:text-[#2F7A3D]"]:hover,
  html.fasl [class*="hover:text-[#A7F3D0]"]:hover{ color:var(--season-primary) !important; }

  html.fasl [class*="hover:border-[#10B981]"]:hover,
  html.fasl [class*="hover:border-[#2F7A3D]"]:hover{ border-color:var(--season-primary) !important; }
}

/* Карточки, которые приложение помечает тенью при наведении. Их пометка
   (hover:shadow-md и родня) — готовый список всего, что в приложении
   считается «поднимаемым»: карточка курса, устод, сертификат, строка
   статистики. Даём им общий сезонный отклик вместо серой тени бандла.

   Подъём — три пикселя. Больше выглядит как всплывающее окно, меньше не
   читается. Двигаем transform, а не отступы: перекладки не будет. */
html.fasl [class*="hover:shadow-md"],
html.fasl [class*="hover:shadow-lg"],
html.fasl [class*="hover:shadow-xl"]{
  transition:transform var(--f-d) var(--s-e),
             box-shadow var(--f-d) var(--e-out),
             border-color var(--f-d) var(--e-out) !important;
}
@media (hover:hover) and (pointer:fine){
  html.fasl [class*="hover:shadow-md"]:hover,
  html.fasl [class*="hover:shadow-lg"]:hover,
  html.fasl [class*="hover:shadow-xl"]:hover{
    box-shadow:var(--season-shadow) !important;
    border-color:var(--season-border) !important;
    transform:translateY(-3px) !important;
  }
}
/* Нажатие — на всём, что нажимают. Подтверждение, что система услышала;
   150 мс, только масштаб. */
html.fasl button,
html.fasl a[class*="bg-["],
html.fasl [role="button"]{ transition:transform var(--f-fast) var(--e-out); }
html.fasl button:active,
html.fasl a[class*="bg-["]:active,
html.fasl [role="button"]:active{ transform:scale(.97); }
/* Кроме рейки сезонов: там масштабируется вся рейка целиком, а отдельная
   кнопка уехала бы из-под обрезанного слоя, и выделение на 150 мс
   разъехалось бы с надписью. */
html.fasl .fasl-seasons button:active{ transform:none; }

/* ============================================================================
   5. УГОЛКИ — НА ВСЕХ СТРАНИЦАХ

   Переопределения --radius хватает для rounded-lg, -md, -sm, -xs, -xl: они
   в бандле посчитаны от него. Но три утилиты записаны числом, мимо
   переменной, и без них сезон разваливается ровно там, где заметнее всего:
   на карточках (rounded-2xl = 16px) и на крупных полосах (rounded-3xl =
   24px). Зимой рядом оказывались резкие поля ввода и по-летнему круглые
   карточки — вид «наполовину переделанного» сайта.

   Правило одно на весь сайт, а не на Асосӣ: если форма меняется только на
   главной, переход в каталог читается как переход в другое приложение.

   ~= вместо *= здесь важно так же, как в перекраске: rounded-3xl и
   md:rounded-l-3xl — разные утилиты с разным смыслом, и вхождение подстроки
   склеило бы их в одну.
   ========================================================================= */
html.fasl [class~="rounded"]     { border-radius:var(--r-1) !important; }
html.fasl [class~="rounded-2xl"] { border-radius:var(--r-3) !important; }
html.fasl [class~="rounded-3xl"] { border-radius:var(--r-4) !important; }

/* Поля ввода и кнопки бандла. Поиск в шапке — самый заметный из них:
   он на каждой странице и всегда на виду. */
html.fasl input, html.fasl textarea, html.fasl select{ border-radius:var(--r-2) !important; }
html.fasl button:not([class~="rounded-full"]):not(.eag-car-btn){ border-radius:var(--r-btn) !important; }

/* Круг остаётся кругом. Правило записано явно и последним среди уголков:
   выше стоят и утилиты, и элементы, и без этой строки круглая кнопка чата
   зимой превратилась бы в плашку со скруглением 6px. */
html.fasl [class~="rounded-full"]{ border-radius:999px !important; }

/* Смена сезона меняет форму мгновенно, и это осознанное решение. Радиус
   живёт в переменной, а переменные наследуются: анимировать его значило бы
   пересчитывать стиль всех потомков каждый кадр на протяжении перекраски —
   на телефоне, ради того, чего человек почти не видит.

   Скачок прикрыт иначе — коротким оседанием разворота: масштаб и
   прозрачность, обе на GPU, обе одноразовые. Метку fasl-turn ставит и снимает
   fasl.js. */
html.fasl-turn .hero-full-x{ animation:faslTurn var(--tm) var(--e-out); }
@keyframes faslTurn{
  0%  { transform:scale(.994); opacity:.82; }
  100%{ transform:none;        opacity:1; }
}

/* ПОГОДА НА ВРЕМЯ ПЕРЕХОДА ГАСНЕТ.

   Это и есть ответ на «старый цвет с новой анимацией». Цвет, форма и вид
   частиц выведены из одного атрибута data-season, поэтому меняются в одном
   кадре — рассинхрону взяться неоткуда. Но частица, застигнутая сменой на
   середине пути, физически меняет породу на лету: лепесток в верхней точке
   становится снежинкой и продолжает лететь вверх.

   Гасим слой на время перехода и возвращаем — подмена происходит за
   закрытой шторой. Двести миллисекунд, только прозрачность. */
html.fasl .fasl-fx{ transition:opacity 200ms var(--e-out); }
html.fasl-turn .fasl-fx{ opacity:0; }

/* ============================================================================
   6. БЕЗ НАКЛЕЕК

   Мелкая заглавная надпись на цветной пилюле — самый дешёвый способ занять
   место и притвориться дизайном. Их на сайте было четыре вида: «РУШДИ
   КИШОВАРЗӢ» над заголовком главной, категория на карточке курса, шапка
   совета и заголовки колонок в подвале. Все четыре сообщали ровно ноль: они
   не отвечали ни на один вопрос, с которым человек пришёл.

   Убраны не молча. На месте каждой — то же слово обычным набором, с
   короткой линейкой в цвете сезона. Линейка занимает две трети высоты
   строки, весит один пиксель и делает ровно то, ради чего ставили пилюлю:
   отделяет ярлык от текста.

   Наклейка на развороте заменена содержательной строкой: сезон и то, чем в
   этом сезоне занят человек в поле. Её ставит fasl.js — см. .fasl-kicker.
   ========================================================================= */
html.fasl .eag-hero-badge{ display:none !important; }

/* Общий вид ярлыка — на оба места сразу, а не по правилу на каждое: иначе
   через месяц у подвала и у совета будут два разных ярлыка, и никто не
   вспомнит, какой из них правильный. Категория курса ниже отличается только
   цветом, вид у неё тот же. */
html.fasl #eag-footer h4,
html.fasl .eagw-tip-head{
  display:flex !important; align-items:center !important; gap:8px !important;
  font-size:12.5px !important; font-weight:600 !important;
  letter-spacing:0 !important; text-transform:none !important;
}
html.fasl #eag-footer h4::before,
html.fasl .eagw-tip-head::before{
  content:""; flex:none;
  width:14px; height:1px;
  background:var(--s-acc);
  transition:background-color var(--tm) var(--e-out);
}

/* Строка сезона на развороте — то, что стоит вместо жёлтой наклейки.
   Ни подложки, ни рамки: это предложение, а не значок. */
.fasl-kicker{
  display:flex; align-items:center; gap:9px;
  margin:0 0 14px;
  font:600 13.5px/1.35 var(--f-sans);
  color:var(--s-deep);
  transition:color var(--tm) var(--e-out);
}
.fasl-kicker::before{
  content:""; flex:none; width:9px; height:9px; border-radius:999px;
  background:var(--s-acc);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--s-acc) 16%,transparent);
  transition:background-color var(--tm) var(--e-out), box-shadow var(--tm) var(--e-out);
}
.fasl-kicker b{ font-weight:700; }
.fasl-kicker span{ color:var(--f-ink-2); font-weight:500; }
@media (max-width:640px){ .fasl-kicker span{ display:none; } }

/* ============================================================================
   7. МАСТХЕД И НАВИГАЦИЯ

   ЗДЕСЬ НЕТ НИ ОДНОЙ АНИМАЦИИ, И ЭТО ПРАВИЛО, А НЕ УПУЩЕНИЕ. По ссылкам
   рельса и по кнопке входа кликают десятки раз за сессию. Всё, что там
   анимируется, человек видит не как оформление, а как задержку между своим
   действием и ответом системы. Остаются цветовые переходы — они ничего не
   задерживают, потому что кликают не по цвету.

   Правило записано явно, а не оставлено на то, что наблюдатель просто не
   размечает эти узлы: список целей в fasl.js может однажды расшириться, и
   тогда навигация начнёт прорастать вместе со всем остальным.
   ========================================================================= */
html.fasl .top-nav-x{
  background:var(--f-surface) !important;
  border-right:1px solid var(--f-rule) !important;
  box-shadow:none !important;
}
/* ШАПКА: прозрачная на самом верху, белая ниже.

   Наверху страницы шапке не от чего отделяться — разворот начинается сразу
   под ней, и белая полоса поперёк выглядит как забытый кусок другого макета.
   Стоит человеку тронуть страницу, полоса нужна: под шапку заезжает
   содержимое, и без подложки строка поиска ложится на текст.

   Метку eag-scrolled ставит eag-extra.js: на Асосӣ — по прокрутке ниже 10
   пикселей, на остальных страницах — сразу. То есть белой шапка становится
   ровно тогда, когда ей есть что перекрывать; своего наблюдателя за
   прокруткой мы не заводим. */
/* Поиск: без жирной тени бандла и не шире 340px — иначе упирается в имя. */
html.fasl header form{ box-shadow:none !important; max-width:340px !important; }

/* Три правила по возрастанию силы, и порядок здесь и есть логика:
     1) везде шапка белая;
     2) на Асосӣ — прозрачная (правило то же по весу, но ниже, значит
        побеждает);
     3) как только страницу тронули — снова белая (вес выше обоих, значит
        побеждает в любом случае).

   Так состояние «наверху» не приходится описывать через :not(), а
   значит нечему сломаться, если метка прокрутки однажды станет ставиться
   иначе.

   Два селектора в каждом правиле — не перестраховка. Метку eag-topbar-x
   ставит eag-extra.js кадровым обходом: пока страница не отрисовалась хоть
   раз, метки нет, а шапка уже видна. Целимся и в метку, и в саму шапку
   бандла по её собственному классу подложки — что появится раньше, то и
   сработает. */
html.fasl header[class*="bg-[#F5F3EB]"],
html.fasl header.eag-topbar-x{
  background:var(--f-surface) !important;
  border-bottom:1px solid var(--f-rule) !important;
  box-shadow:none !important;
  /* Без перехода цвета: переход и был тем самым «меняет цвет наверху» —
     шапка перекрашивалась на глазах при каждой смене состояния. Состояний
     больше нет, но и переходу здесь делать нечего. */
  transition:none !important;
}
/* Шапка одинаковая на всех страницах: белая, с каймой. Прозрачный и
   стеклянный варианты убраны по решению — они выглядели то пустотой, то
   молоком, а белая полоса читается сразу. */






html.fasl .top-nav-x [code-path^="src/pages/Home.tsx:112:"]{
  font-weight:700 !important; letter-spacing:-.02em !important; color:var(--f-ink) !important;
}
/* Точка сезона вместо значка приложения: маленькая, но она объясняет всю
   систему — цвет главной и цвет этой точки всегда одни и те же. */
html.fasl .top-nav-x [code-path^="src/pages/Home.tsx:111:"]{
  background:var(--s-acc) !important;
  border-radius:var(--f-r) !important;
  transition:background-color var(--tm) var(--e-out) !important;
}
html.fasl .top-nav-x nav a{
  color:var(--f-ink-2) !important;
  background:transparent !important;
  border-radius:var(--f-r) !important;
}
html.fasl .top-nav-x nav a[class*="bg-[#E8F3E1]"],
html.fasl .top-nav-x nav a[class*="text-[#2F7A3D]"]{
  color:var(--s-acc) !important; background:var(--s-soft) !important;
}
html.fasl [code-path^="src/pages/Home.tsx:202:"],
html.fasl [code-path^="src/pages/Home.tsx:207:"]{
  border-radius:var(--r-btn) !important;
  background:var(--s-acc) !important;
  color:#fff !important;
  border:1px solid var(--s-acc) !important;
  box-shadow:none !important;
}

/* Ни одной анимации в шапке — ни при каких обстоятельствах. */
html.fasl .top-nav-x, html.fasl .top-nav-x *,
html.fasl header.eag-topbar-x, html.fasl header.eag-topbar-x *,
html.fasl [code-path^="src/pages/Home.tsx:202:"],
html.fasl [code-path^="src/pages/Home.tsx:207:"]{ animation:none !important; }

html.fasl .top-nav-x nav a,
html.fasl [code-path^="src/pages/Home.tsx:207:"]{
  transition:color var(--f-fast) var(--e-out),
             background-color var(--f-fast) var(--e-out),
             border-color var(--f-fast) var(--e-out) !important;
}
@media (hover:hover) and (pointer:fine){
  html.fasl .top-nav-x nav a:hover{ color:var(--s-acc) !important; }
  html.fasl [code-path^="src/pages/Home.tsx:207:"]:hover{ background:var(--s-deep) !important; border-color:var(--s-deep) !important; }
}
/* Нажатие — исключение: это не украшение, а подтверждение, что система
   услышала. 150 мс, только масштаб. */
html.fasl .top-nav-x nav a:active,
html.fasl [code-path^="src/pages/Home.tsx:207:"]:active{ transform:scale(.97) !important; }

/* ============================================================================
   8. РАЗВОРОТ (только Асосӣ)

   Градиент разворота у бандла зашит в утилитах (from/via/to). Перебиваем его
   целиком: три остановки, те же по расположению, но в цветах сезона. Переход
   по цвету — это и есть смена времени года.
   ========================================================================= */
html.fasl-home .hero-full-x{
  background:linear-gradient(100deg,var(--s-hero-a),var(--s-hero-b) 52%,var(--s-hero-c)) !important;
  border:1px solid var(--f-rule) !important;
  border-radius:var(--r-4) !important;
  overflow:hidden !important;
  position:relative;
  transition:background-color var(--tm) var(--e-out) !important;
}
html.fasl-home .hero-title-x{
  font-size:var(--f-h1) !important;
  font-weight:700 !important;
  letter-spacing:-.035em !important;
  line-height:1.05 !important;
  color:var(--f-ink) !important;
  text-shadow:none !important;
  max-width:15ch;
}
html.fasl-home .hero-sub-x{
  font-size:clamp(15px,1.5vw,19px) !important;
  line-height:1.6 !important;
  color:var(--f-ink-2) !important;
  text-shadow:none !important;
}
html.fasl-home .eag-hero-badge{
  background:#fff !important;
  color:var(--s-acc) !important;
  border:1px solid var(--s-acc) !important;
  border-radius:var(--f-r-pill) !important;
  box-shadow:none !important;
  transition:color var(--tm) var(--e-out), border-color var(--tm) var(--e-out) !important;
}
html.fasl-home .hero-video-x video{ border-radius:0 !important; object-fit:cover !important; }

/* Заливка под видео. Видит её только тот, у кого видео ещё не пришло, — и
   вместо чужого снимка поля с горами он видит сезонный цвет. Заливка стоит
   на самом блоке, а не на видео: видео рисуется поверх и закрывает её
   целиком, как только появится первый кадр. */
html.fasl .hero-video-x{
  background:linear-gradient(160deg, var(--s-soft) 0%, var(--s-acc) 120%) !important;
}

/* ПЛЁНКА НАД ВИДЕО — почти целиком снята.

   Было: сплошная белая заливка 0.86 по всей ширине. Комбайн, поле и пыль
   превращались в молоко, и главное, ради чего на разворот вообще ставят
   видео, — ощущение работающего поля — пропадало.

   Стало: подложка живёт только под колонкой с текстом и сходит на нет к
   середине. Справа, где идёт техника, поверх видео нет НИЧЕГО.

   Почему подложка вообще осталась. Заголовок на развороте тёмный, а видео
   светлое и подвижное: без подложки строка то читается, то нет — в
   зависимости от того, что сейчас в кадре. Ставим ровно столько, сколько
   нужно тексту, а не «на всякий случай на всю ширину».

   Цвет подложки — сезонный, а не белый: это тот же тон, что у разворота без
   видео, и время года видно даже в тех первых миллисекундах, пока первый
   кадр ещё не пришёл. */
/* ПЛЁНКА НАД ВИДЕО вернулась — но не та, что была вначале.

   Первая была сплошной белой заливкой 0.86 по всей ширине: поле и техника
   превращались в молоко. Полное её снятие оставило заголовок один на один с
   подвижным светлым кадром — то читается, то нет.

   Здесь середина: подложка живёт только под колонкой с текстом и сходит на
   нет к середине кадра. Справа, где идёт техника, поверх видео нет ничего.
   Цвет сезонный — тот же тон, что у разворота без видео, поэтому время года
   видно и в первые миллисекунды, пока кадр ещё не пришёл. */
html.fasl-home .hero-video-x::after{
  background:linear-gradient(95deg,
      color-mix(in srgb, var(--s-hero-a) 82%, transparent) 0%,
      color-mix(in srgb, var(--s-hero-a) 58%, transparent) 32%,
      color-mix(in srgb, var(--s-hero-a) 18%, transparent) 52%,
      transparent 66%) !important;
  transition:background var(--tm) var(--e-out);
}
/* Узкий экран: колонки нет, текст лежит поверх всего кадра — подложка нужна
   на весь кадр, сверху вниз. */
@media (max-width:767px){
  html.fasl-home .hero-video-x::after{
    background:linear-gradient(180deg,
        color-mix(in srgb, var(--s-hero-a) 86%, transparent) 0%,
        color-mix(in srgb, var(--s-hero-a) 68%, transparent) 55%,
        color-mix(in srgb, var(--s-hero-a) 34%, transparent) 100%) !important;
  }
}

/* ЧИТАЕМОСТЬ БЕЗ ПЛЁНКИ.

   Плёнки нет совсем — ни белой, ни сезонной, ни на четверть. Видео идёт как
   снято.

   Но заголовок тёмный, а кадр светлый и подвижный: без подложки строка то
   читается, то нет — смотря что сейчас в кадре. Поэтому подложку заменяет
   свечение вокруг самих букв. Разница принципиальная: тень лежит на тексте,
   а не на видео, и ни один пиксель кадра от неё не мутнеет.

   Два слоя: узкий и плотный держит контур буквы, широкий и слабый отделяет
   строку от светлого пятна за ней.

   На узком экране текст лежит поверх всего кадра, и свечение там плотнее —
   читаемость важнее чистоты низа кадра. */
html.fasl-home .hero-title-x{
  text-shadow:0 1px 2px rgba(255,255,255,.72),
              0 2px 18px rgba(255,255,255,.5) !important;
}
html.fasl-home .hero-sub-x{
  text-shadow:0 1px 2px rgba(255,255,255,.8),
              0 1px 10px rgba(255,255,255,.55) !important;
}
.fasl-kicker{ text-shadow:0 1px 2px rgba(255,255,255,.8); }
@media (max-width:767px){
  html.fasl-home .hero-title-x{
    text-shadow:0 1px 2px rgba(255,255,255,.9),
                0 2px 22px rgba(255,255,255,.75) !important;
  }
  html.fasl-home .hero-sub-x{
    text-shadow:0 1px 3px rgba(255,255,255,.92),
                0 1px 14px rgba(255,255,255,.7) !important;
  }
}

/* ПОРЯДОК СЛОЁВ НА РАЗВОРОТЕ.

   Погода вставлена внутрь сетки разворота, а не рядом с ней, и вот почему.
   Видео в бандле разложено на весь разворот (position:absolute; inset:0) и
   лежит ВНУТРИ сетки, а сетка — отдельный контекст наложения. Слой погоды,
   стоявший снаружи, оказывался под всей сеткой целиком, то есть под видео:
   снег шёл, но за кадром. Именно это и выглядело как «зимняя анимация не
   работает».

   Внутри сетки порядок однозначный: видео 0, погода 1, текст 2. */
html.fasl-home [code-path^="src/pages/Home.tsx:223:"]{ position:relative; }
html.fasl-home [code-path^="src/pages/Home.tsx:224:"]{ position:relative; z-index:2; }
/* Кнопки разворота: заливка достаётся только первой. Два акцента на одном
   экране означают, что акцента нет ни одного. */
html.fasl-home [code-path^="src/pages/Home.tsx:231:"] > *:first-child{
  background:var(--s-acc) !important; color:#fff !important;
  border:1px solid var(--s-acc) !important;
  border-radius:var(--r-btn) !important; box-shadow:none !important;
}
html.fasl-home [code-path^="src/pages/Home.tsx:235:"]{
  background:transparent !important; color:var(--f-ink) !important;
  border:1px solid var(--f-rule) !important;
  border-radius:var(--r-btn) !important; box-shadow:none !important;
}

/* ============================================================================
   9. ЗАГОЛОВОК СЕКЦИИ И МАТЕРИАЛ
   ========================================================================= */
html.fasl-home [code-path^="src/pages/Home.tsx:256:"]{
  font-size:var(--f-h2) !important; font-weight:700 !important; letter-spacing:-.032em !important;
  color:var(--f-ink) !important;
}
html.fasl-home [code-path^="src/pages/Home.tsx:257:"]{
  color:var(--s-acc) !important; font-weight:600 !important;
  transition:color var(--tm) var(--e-out) !important;
}
html.fasl-home [code-path^="src/pages/Home.tsx:266:"]{ gap:var(--f-4) !important; }

html.fasl .sb-card{
  background:var(--f-surface) !important;
  border:1px solid var(--f-rule) !important;
  border-radius:var(--r-card) !important;
  box-shadow:none !important;
  overflow:hidden !important;
  transition:transform var(--f-d) var(--s-e),
             border-color var(--f-d) var(--e-out),
             box-shadow var(--f-d) var(--e-out) !important;
}
html.fasl .sb-card img{
  border-radius:0 !important;
  transition:transform var(--f-slow) var(--e-out) !important;
}

/* ОБЛОЖКА КУРСА В КАТАЛОГЕ — 55 % КАРТОЧКИ.

   Сборка даёт снимку 176 пикселей (класс h-44), и карточка делилась почти
   пополам. 235 посчитано от текста: 192 × 55 / 45 ≈ 235; карточка ≈ 427. */
html.fasl .sb-card [code-path^="src/pages/Courses.tsx:54:"]{
  height:356px !important;
}

/* ШИРИНА КАРТОЧКИ В КАТАЛОГЕ — 463 ПИКСЕЛЯ.

   У сетки на этом экране всего два положения: две колонки дают 591 пиксель,
   три — 386. Первое слишком широко, второе слишком узко, а промежуточного
   у сетки нет вовсе. Поэтому карточка ограничена сама и стоит по центру
   своей ячейки — так ширина берётся из этого числа, а не из того, сколько
   колонок поместилось.

   463 — это ровно на пятую часть больше прежних 386, как и просил маъмур.
   Число одно на все широкие экраны: на 1280 в ряду две карточки, на 1500 и
   шире — три (см. product.css), но сама карточка и там, и там одна и та же.
   Обложка при этом остаётся шире, чем выше (463 против 356).

   Прежде здесь стояло 520, и оно не работало ни разу: продуктовый слой
   грузится последним и переводил сетку в три колонки, отчего ячейка
   становилась 386 — уже этого предела, — и предел не срабатывал вовсе.
   Карточка выходила той самой «слишком узкой», про которую написано выше. */
@media (min-width:1024px){
  html.fasl [code-path^="src/pages/Courses.tsx:49:"]{
    justify-items:center !important;
  }
  html.fasl [code-path^="src/pages/Courses.tsx:52:"]{
    width:100% !important;
    max-width:463px !important;
  }
}
@media (max-width:700px){
  html.fasl .sb-card [code-path^="src/pages/Courses.tsx:54:"]{
    height:240px !important;
  }
}
/* ОБЛОЖКА КУРСА НА ГЛАВНОЙ — 55 % КАРТОЧКИ.

   Высоту задаёт КОНТЕЙНЕР, а не снимок: сборка своим правилом растягивает
   снимок на всю высоту контейнера, и заданная снимку высота ею перебивается.
   Прежняя строка «снимку 168 пикселей» именно поэтому и не действовала — на
   экране он всё равно выходил 207.

   186 посчитано от текста: 152 × 55 / 45 ≈ 186. Карточка выходит ≈ 339. */
html.fasl-home .sb-card [code-path^="src/pages/Home.tsx:277:"]{ height:186px !important; }
html.fasl-home .sb-card [code-path^="src/pages/Home.tsx:278:"]{ height:100% !important; }
/* На узком экране карточка идёт во всю ширину, и такая высота дала бы
   вертикальный кадр вместо обложки. */
@media (max-width:700px){
  html.fasl-home .sb-card [code-path^="src/pages/Home.tsx:277:"]{ height:240px !important; }
}
@media (hover:hover) and (pointer:fine){
  html.fasl .sb-card:hover{
    transform:translateY(-3px) !important;
    border-color:var(--s-acc) !important;
    box-shadow:0 8px 24px rgba(31,35,28,.07) !important;
  }
  html.fasl .sb-card:hover img{ transform:scale(1.04) !important; }
}

html.fasl-home [code-path^="src/pages/Home.tsx:280:"]{ padding:var(--f-4) !important; }
/* Категория курса. Была цветной пилюлей с заглавными — той самой наклейкой,
   которая на карточке спорит за внимание с названием курса, хотя название
   и есть то, ради чего человек сюда смотрит. Стала ярлыком: линейка сезона
   и слово обычным набором. */
html.fasl-home [code-path^="src/pages/Home.tsx:281:"]{
  display:inline-flex !important; align-items:center !important; gap:7px !important;
  background:none !important; color:var(--s-acc) !important;
  border:none !important; border-radius:0 !important;
  font-size:12.5px !important; font-weight:600 !important;
  letter-spacing:0 !important; text-transform:none !important;
  padding:0 !important;
  transition:color var(--tm) var(--e-out) !important;
}
html.fasl-home [code-path^="src/pages/Home.tsx:281:"]::before{
  content:""; flex:none; width:14px; height:1px;
  background:var(--s-acc);
  transition:background-color var(--tm) var(--e-out);
}
html.fasl-home [code-path^="src/pages/Home.tsx:282:"]{
  font-size:var(--f-h3) !important; font-weight:700 !important;
  letter-spacing:-.02em !important; line-height:1.3 !important; color:var(--f-ink) !important;
}
html.fasl-home [code-path^="src/pages/Home.tsx:283:"]{ color:var(--f-ink-2) !important; line-height:1.55 !important; }
html.fasl .sb-hover{
  background:linear-gradient(to top,color-mix(in srgb,var(--s-deep) 92%,transparent),rgba(31,35,28,.2)) !important;
}
html.fasl .sb-hover-btn{ background:var(--s-acc) !important; color:#fff !important; border-radius:var(--r-btn) !important; }

/* --- «БА ҲАДАФИ ХУД БО МО БИРАСЕД»: ЧЕТЫРЕ БЕЛЫХ ПРЯМОУГОЛЬНИКА ----------
   Четыре карточки, в каждой одинаковый бледно-зелёный кружок со значком и
   строка текста. Кружок не сообщал ничего: он был во всех четырёх один и тот
   же по смыслу — «здесь значок». Убран.

   На его месте — поле. То самое, что на развороте, и оно меняется вместе с
   сезоном: не картинкой (четырёх снимков одного поля в четыре сезона у нас
   нет), а светом над ним. Зимой поле уходит в холодную дымку, летом
   наливается тёплым, осенью — рыжим. Снимок один, время года разное — как
   это и бывает с одним и тем же полем.

   Плотность заливки высокая намеренно: под текстом фотография должна быть
   фактурой, а не картинкой, иначе строку не прочесть. Отметку fasl-goal
   ставит fasl.js — у секции нет ни своего класса, ни адреса в разметке. */
/* ПОЛЕ, НАРИСОВАННОЕ, А НЕ СНЯТОЕ.

   Сначала здесь стояла фотография. Не сработало по причине, которую видно
   только на месте: карточка широкая и низкая, а снимок — почти квадратный.
   При заполнении по ширине от него остаётся полоска из середины, а середина
   поля — это борозды крупным планом. Получалась коричневая рябь, в которой
   не читается ни поле, ни текст поверх.

   Поэтому поле рисуется здесь же, тремя слоями:

     солнце   — маленький диск с ореолом в правом верхнем углу;
     борозды  — частые полосы под небольшим углом, только по нижней половине;
     основа   — небо сверху, земля снизу, граница между ними и есть горизонт.

   Сцена ведёт себя как рисунок, а не как снимок: она чёткая при любой
   ширине карточки, ничего не весит и не грузится. И она честно сезонная —
   меняются и цвет неба, и цвет земли, и частота борозд, и величина солнца:

     Баҳор     светлое небо, молодая зелень, частые всходы
     Тобистон  высокое солнце, налитая охра, борозды сомкнулись
     Тирамоҳ   тёплое небо, сжатое поле, редкая стерня
     Зимистон  бледный свет, снег, борозды едва проступают

   Текст лежит на небе — на самой светлой части, — а земля уходит под низ
   карточки. Поэтому его видно без плёнки. */
html.fasl .fasl-goal [class~="rounded-3xl"]{
  /* Чистая поверхность. Прежняя нарисованная сцена — небо, земля, солнце —
     убрана: с живым деревом она читалась как след старой версии, а не как
     фон. Сезон в подложке остался одним намёком — мягким светом сверху в
     цвете времени года, не ярче, чем у остальных карточек темы. */
  background-color:var(--f-surface) !important;
  background-image:linear-gradient(180deg,
      color-mix(in srgb, var(--s-hero-a) 38%, transparent),
      transparent 62%) !important;
  border-color:var(--f-rule) !important;
  transition:border-color var(--tm) var(--e-out),
             transform var(--f-d) var(--s-e),
             box-shadow var(--f-d) var(--e-out) !important;
}

/* Едущей полосы года больше нет: год показывают сами деревья, а полоса
   позади них читалась как след прежней версии — горизонт, земля, небо. */
/* ============================================================================
   ДЕРЕВО — БОТАНИЧЕСКАЯ ИЛЛЮСТРАЦИЯ

   Четыре дерева — четыре стадии жизни: молодое, взрослое, в росте, зрелое.
   Стиль намеренно взрослый: ни кругов в кроне, ни пластикового объёма, ни
   ярких цветов. Кроны — неправильные массы трёх-четырёх приглушённых
   оттенков с просветами, сквозь которые видны ветви; стволы с изгибом,
   корой и ветвями разной толщины.

   Движение — только ветер, и его почти не видно: крона ходит меньше
   градуса, ветви — ещё меньше, периоды у слоёв разные, фазы у деревьев
   сдвинуты. При наведении на карточку из кроны плавно выходит новая
   ветка с пучком листвы — рост, а не фокус.

   Никакой сезонной погоды здесь нет по решению: ни частиц, ни снега, ни
   солнца. Дерево — единственный визуальный элемент карточки.
   ========================================================================= */
.fasl-tree{
  position:absolute; right:12px; bottom:0;
  width:178px; height:156px;
  z-index:1; pointer-events:none;
  overflow:visible;
  --tx:0; --ty:0;
}

/* Палитра природная и приглушённая. Оттенков четыре, и раскиданы они по
   массам вперемешку — однородная заливка первой выдаёт рисунок-игрушку. */
.fasl-tree__mass--deep { fill:#476B39; }
.fasl-tree__mass--mid  { fill:#5F8A4C; }
.fasl-tree__mass--light{ fill:#7DA365; }
.fasl-tree__mass--lite2{ fill:#94B77E; }
.fasl-tree__bark{ stroke:#3A2A1C; stroke-width:.9; opacity:.32; stroke-linecap:round; }
.fasl-tree__shadow{ opacity:.5; }

/* --- ВЕТЕР -----------------------------------------------------------------
   Два слоя с разными периодами: крона на 8 секунд, ветви на 11. Амплитуды
   меньше градуса — дерево дышит, а не машет. Фазы сдвинуты по номеру
   карточки, чтобы четыре дерева не качались строем. */
.fasl-tree__crownwrap{
  animation:faslBreezeA 8s ease-in-out infinite alternate;
  animation-delay:calc(var(--tree-i,0) * -2.3s);
  transform-origin:70px 86px; transform-box:view-box;
}
.fasl-tree__limbs{
  animation:faslBreezeB 11s ease-in-out infinite alternate;
  animation-delay:calc(var(--tree-i,0) * -2.3s);
  transform-origin:68px 116px; transform-box:view-box;
}
@keyframes faslBreezeA{ from{ transform:rotate(-.7deg); } to{ transform:rotate(.8deg); } }
@keyframes faslBreezeB{ from{ transform:rotate(-.35deg); } to{ transform:rotate(.4deg); } }

/* Мягкий параллакс за курсором — на внутренней группе, чтобы не спорить с
   ветром за transform. Сдвиг до трёх пикселей: заметен как жизнь, не как
   эффект. */
.fasl-tree__par{
  transform:translate(calc(var(--tx) * 3px), calc(var(--ty) * 1.6px));
  transition:transform 900ms cubic-bezier(.22,.68,0,1);
}

/* --- НОВАЯ ВЕТКА ПРИ НАВЕДЕНИИ --------------------------------------------
   Единственное событие наведения: из кроны выходит ветка с пучком листвы.
   Медленно и один раз — рост, а не фокус. */
.fasl-tree__new{
  opacity:0; transform:translateY(3px) scale(.9);
  transform-box:fill-box; transform-origin:20% 80%;
  transition:opacity 700ms cubic-bezier(.22,.68,0,1) 150ms,
             transform 700ms cubic-bezier(.22,.68,0,1) 150ms;
}
@media (hover:hover) and (pointer:fine){
  html.fasl .fasl-goal [class~="rounded-3xl"]:hover .fasl-tree__new{
    opacity:1; transform:none;
  }
}


/* --- ПРИКОСНОВЕНИЕ К РОСТУ -------------------------------------------------
   Три взаимодействия, и только три:

     навёл на карточку   дерево оживает: подрастает на 3%, дыхание ветра
                         чуть глубже, отдельные листья в кроне откликаются
                         по очереди; в углу проступает подпись стадии;
     ведёшь курсором     рядом с ним идёт точка света с мягкой волной,
                         крона следует за курсором (параллакс);
     кликнул по дереву   внизу карточки раскрывается строка стадии — имя и
                         одно предложение. Повторный клик или уход курсора
                         закрывают её. Никаких окон.
   ------------------------------------------------------------------------ */
html.fasl .fasl-goal [class~="rounded-3xl"]{ overflow:hidden; }
.fasl-tree{ transition:transform 600ms cubic-bezier(.22,.68,0,1); }
@media (hover:hover) and (pointer:fine){
  html.fasl .fasl-goal [class~="rounded-3xl"]:hover .fasl-tree{ transform:scale(1.03); }
  html.fasl .fasl-goal [class~="rounded-3xl"]:hover .fasl-tree__crownwrap{ animation-duration:5.5s; }
  html.fasl .fasl-goal [class~="rounded-3xl"]:hover .fasl-tree__limbs{ animation-duration:7.5s; }
  /* Листья в кроне откликаются по очереди — номер даёт сдвиг. */
  html.fasl .fasl-goal [class~="rounded-3xl"]:hover .fasl-tree__leafling{
    /* Год + покачивание ВМЕСТЕ: сокращённая запись заменяет весь список
       анимаций, и одна ховерная затирала годовой цвет — листья чернели. */
    animation:faslYrLeafling 32s linear infinite,
              faslLeafNod 2.4s ease-in-out infinite alternate;
    animation-delay:calc(var(--tree-i,0) * -8s), calc(var(--lf,0) * 180ms) !important;
  }
}
.fasl-tree__leafling{ transform-box:fill-box; transform-origin:50% 0%; }
@keyframes faslLeafNod{
  from{ transform:rotate(-6deg); }
  to  { transform:rotate(7deg); }
}

/* Точка света у курсора и мягкая волна вокруг неё. Видна только пока
   курсор на карточке; сама точка — маленькая, волна — прозрачная и
   медленная. Летающих листьев здесь нет и не будет. */
.fasl-touch{
  position:absolute; z-index:2; width:10px; height:10px;
  margin:-5px 0 0 -5px; border-radius:999px;
  background:radial-gradient(circle, color-mix(in srgb, var(--season-primary) 55%, #fff), transparent 70%);
  opacity:0; pointer-events:none;
  transition:opacity 300ms var(--e-out);
}
.fasl-touch::after{
  content:""; position:absolute; inset:-14px; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--season-primary) 35%, transparent);
  animation:faslTouchWave 1.8s ease-out infinite;
}
@media (hover:hover) and (pointer:fine){
  html.fasl .fasl-goal [class~="rounded-3xl"]:hover .fasl-touch{ opacity:1; }
}
@keyframes faslTouchWave{
  from{ transform:scale(.5); opacity:.8; }
  to  { transform:scale(1.6); opacity:0; }
}
@media (prefers-reduced-motion:reduce){
  .fasl-touch{ display:none !important; }
  html.fasl .fasl-goal [class~="rounded-3xl"] .fasl-tree{ transform:none !important; }
}






/* ============================================================================
   ГОД ОДНОГО ДЕРЕВА — 32 СЕКУНДЫ, БЕЗ ШВА

   В каждой карточке живёт одно и то же дерево, и оно проживает год:

     0–22%   баҳор     почки раскрылись, зелень молодая и светлая
     25–47%  тобистон  крона густеет и темнеет, дерево в полной силе
     50–72%  тирамоҳ   зелень уходит в охру, листья отделяются и падают
     75–97%  зимистон  крона сошла, на ветвях снег, идёт снегопад
     100%    снова баҳор — цикл замыкается сам, шва нет

   Всё это ОДНА разметка: что показывать, решают ключевые кадры. Поэтому
   переходы связные — цвет перетекает, листья падают из кроны, которая
   действительно редеет, снег ложится на те же ветви.

   Четыре карточки сдвинуты по фазе на 8 секунд — ровно один сезон: каждая следующая карточка живёт на сезон впереди соседки, и ряд слева направо есть непрерывная лента года: ряд всегда показывает все
   четыре сезона разом — карусель года без стрелок и кнопок.

   Карточка не меняет ни размера, ни раскладки: анимируются только цвет,
   прозрачность и transform.
   ========================================================================= */
.fasl-tree__mass, .fasl-tree__leafling{ animation-duration:32s; animation-timing-function:linear; animation-iteration-count:infinite; }
.fasl-tree__mass--deep { animation-name:faslYrDeep; }
.fasl-tree__mass--mid  { animation-name:faslYrMid; }
.fasl-tree__mass--light{ animation-name:faslYrLight; }
.fasl-tree__mass--lite2{ animation-name:faslYrLite2; }
/* Статичная заливка обязательна: без неё лист, оставшийся без анимации,
   рисуется ЧЁРНЫМ — так SVG красит фигуры по умолчанию. */
.fasl-tree__leafling   { fill:#5F8A4C; animation-name:faslYrLeafling; }
.fasl-tree__layer{ animation:faslYrCrown 32s linear infinite; transform-box:fill-box; transform-origin:50% 60%; }

/* сдвиг фазы — каждой живой части, по номеру карточки */
.fasl-tree__mass, .fasl-tree__leafling, .fasl-tree__layer,
.fasl-tree__bud, .fasl-tree__fall-leaf,
.fasl-tree__snowcap, .fasl-tree__drift, .fasl-tree__snowfall circle{
  animation-delay:calc(var(--tree-i,0) * -8s) !important;
}

/* Крона: держится три четверти, к зиме сходит, весной возвращается. */
@keyframes faslYrCrown{
  0%, 64%  { opacity:1; transform:scale(1); }
  27%, 45% { opacity:1; transform:scale(1.045); }
  71%      { opacity:0; transform:scale(.86); }
  75%, 96% { opacity:0; transform:scale(.86); }
  100%     { opacity:1; transform:scale(1); }
}
/* Палитра года. Пока крона скрыта (зима), цвет незаметно возвращается к
   весеннему — потому пробуждение выглядит началом, а не перемоткой. */
@keyframes faslYrDeep{
  0%, 20%  { fill:#5E8A4C; } 27%, 45% { fill:#476B39; }
  52%, 70% { fill:#8F4E22; } 82%      { fill:#8F4E22; }
  92%, 100%{ fill:#5E8A4C; }
}
@keyframes faslYrMid{
  0%, 20%  { fill:#7DA365; } 27%, 45% { fill:#5F8A4C; }
  52%, 70% { fill:#B26A2E; } 82%      { fill:#B26A2E; }
  92%, 100%{ fill:#7DA365; }
}
@keyframes faslYrLight{
  0%, 20%  { fill:#A3C084; } 27%, 45% { fill:#7DA365; }
  52%, 70% { fill:#C98B3F; } 82%      { fill:#C98B3F; }
  92%, 100%{ fill:#A3C084; }
}
@keyframes faslYrLite2{
  0%, 20%  { fill:#C4D9A8; } 27%, 45% { fill:#94B77E; }
  52%, 70% { fill:#D9A85C; } 82%      { fill:#D9A85C; }
  92%, 100%{ fill:#C4D9A8; }
}
@keyframes faslYrLeafling{
  0%, 20%  { fill:#8FB573; } 27%, 45% { fill:#476B39; }
  52%, 70% { fill:#A85B28; } 82%      { fill:#A85B28; }
  92%, 100%{ fill:#8FB573; }
}

/* Почки: набухают в самом конце зимы, раскрываются к весне и уходят, когда
   пришла листва. */
.fasl-tree__bud circle{ fill:#D9E8C4; stroke:#8FB573; stroke-width:.7; }
.fasl-tree__bud{
  transform-box:fill-box; transform-origin:50% 50%;
  opacity:0;
  animation:faslYrBud 32s linear infinite;
}
@keyframes faslYrBud{
  0%       { opacity:1; transform:scale(1); }
  7%       { opacity:1; transform:scale(1.25); }
  13%      { opacity:0; transform:scale(.6); }
  90%      { opacity:0; transform:scale(.5); }
  95%, 100%{ opacity:1; transform:scale(1); }
}

/* Листопад: только своя четверть, у каждого листа свой снос и период внутри
   окна. */
.fasl-tree__fall-leaf{
  fill:#B26A2E; opacity:0;
  transform-box:fill-box; transform-origin:50% 50%;
  animation:faslYrFall 32s linear infinite;
}
.fasl-tree__fall-leaf[style*="--fl:1"]{ animation-name:faslYrFall2; }
.fasl-tree__fall-leaf[style*="--fl:2"]{ animation-name:faslYrFall3; }
@keyframes faslYrFall{
  0%, 53%  { opacity:0; transform:translate(0,0) rotate(0deg); }
  56%      { opacity:.95; }
  64%      { opacity:0; transform:translate(-11px,52px) rotate(180deg); }
  100%     { opacity:0; }
}
@keyframes faslYrFall2{
  0%, 58%  { opacity:0; transform:translate(0,0) rotate(0deg); }
  61%      { opacity:.9; }
  70%      { opacity:0; transform:translate(9px,56px) rotate(-160deg); }
  100%     { opacity:0; }
}
@keyframes faslYrFall3{
  0%, 63%  { opacity:0; transform:translate(0,0) rotate(0deg); }
  66%      { opacity:.85; }
  74%      { opacity:0; transform:translate(-6px,50px) rotate(220deg); }
  100%     { opacity:0; }
}

/* Снег: ложится после листопада, тает к весне. */
.fasl-tree__snowcap path, .fasl-tree__snowcap{
  stroke:#FFFFFF; stroke-width:4.2; stroke-linecap:round; fill:none;
  filter:drop-shadow(0 1px 1px rgba(90,110,125,.3));
}
.fasl-tree__snowcap, .fasl-tree__drift{
  opacity:0; animation:faslYrSnowLie 32s linear infinite;
}
.fasl-tree__drift{ fill:#FFFFFF; }
@keyframes faslYrSnowLie{
  0%, 74%  { opacity:0; }
  80%, 94% { opacity:.95; }
  99%, 100%{ opacity:0; }
}
.fasl-tree__snowfall circle{
  fill:#F4F9FC; opacity:0;
  animation:faslYrSnow 32s linear infinite;
}
.fasl-tree__snowfall circle[style*="--sf:1"],
.fasl-tree__snowfall circle[style*="--sf:3"],
.fasl-tree__snowfall circle[style*="--sf:5"]{ animation-name:faslYrSnow2; }
@keyframes faslYrSnow{
  0%, 74%  { opacity:0; transform:translate(0,0); }
  77%      { opacity:.9; }
  88%      { opacity:.8; transform:translate(-3px,58px); }
  93%      { opacity:0; transform:translate(-4px,84px); }
  100%     { opacity:0; }
}
@keyframes faslYrSnow2{
  0%, 78%  { opacity:0; transform:translate(0,0); }
  81%      { opacity:.85; }
  92%      { opacity:.75; transform:translate(3px,54px); }
  97%      { opacity:0; transform:translate(4px,80px); }
  100%     { opacity:0; }
}

/* --- НЕБО И ЗЕМЛЯ КАРТОЧКИ ЖИВУТ ТЕМ ЖЕ ГОДОМ -----------------------------
   Фон не фиксированный: небо и полоса земли перекрашиваются тем же
   32-секундным кругом, что и крона, — атмосфера едет вместе с сезоном.
   Анимируется только цвет; раскладка не шевелится. */
html.fasl .fasl-goal [class~="rounded-3xl"]{
  animation:faslYrSky 32s linear infinite;
}
html.fasl .fasl-goal [class~="rounded-3xl"]::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:42%;
  z-index:0; pointer-events:none;
  border-radius:0 0 var(--r-4) var(--r-4);
  animation:faslYrGround 32s linear infinite;
}
html.fasl .fasl-goal [class~="rounded-3xl"] > *{ position:relative; z-index:2; }
html.fasl .fasl-goal [class~="rounded-3xl"] .fasl-tree{ z-index:1; }
html.fasl .fasl-goal [class~="rounded-3xl"]:nth-child(1),
html.fasl .fasl-goal [class~="rounded-3xl"]:nth-child(1)::after{ animation-delay:0s; }
html.fasl .fasl-goal [class~="rounded-3xl"]:nth-child(2),
html.fasl .fasl-goal [class~="rounded-3xl"]:nth-child(2)::after{ animation-delay:-8s; }
html.fasl .fasl-goal [class~="rounded-3xl"]:nth-child(3),
html.fasl .fasl-goal [class~="rounded-3xl"]:nth-child(3)::after{ animation-delay:-16s; }
html.fasl .fasl-goal [class~="rounded-3xl"]:nth-child(4),
html.fasl .fasl-goal [class~="rounded-3xl"]:nth-child(4)::after{ animation-delay:-24s; }
@keyframes faslYrSky{
  0%, 20%  { background-color:#F7FBF0; }
  27%, 45% { background-color:#FDFAF0; }
  52%, 70% { background-color:#FCF6EE; }
  78%, 94% { background-color:#F4F8FB; }
  100%     { background-color:#F7FBF0; }
}
@keyframes faslYrGround{
  0%, 20%  { background-color:#E2EDCB; }
  27%, 45% { background-color:#F2E3BC; }
  52%, 70% { background-color:#EDD6BE; }
  78%, 94% { background-color:#DEE8EF; }
  100%     { background-color:#E2EDCB; }
}

@media (prefers-reduced-motion:reduce){
  /* Год останавливается на лете — самом полном состоянии дерева. */
  .fasl-tree *,
  html.fasl .fasl-goal [class~="rounded-3xl"],
  html.fasl .fasl-goal [class~="rounded-3xl"]::after{
    animation:none !important;
  }
  .fasl-tree__fall, .fasl-tree__snowfall, .fasl-tree__snowcap,
  .fasl-tree__drift, .fasl-tree__bud{ display:none !important; }
  html.fasl .fasl-goal [class~="rounded-3xl"]{ background-color:#FDFAF0 !important; }
  html.fasl .fasl-goal [class~="rounded-3xl"]::after{ background-color:#F2E3BC !important; }
}


/* Сучок на стволе — тёмное пятно коры. Трава у комля убрана по решению:
   читалась кустами, а не травой. */
.fasl-tree__knot{ fill:#3A2A1C; opacity:.5; }

/* --- ОБЪЁМ И СВЕТ ---------------------------------------------------------
   Этот блок уже терялся: его вырезало вместе со старой сезонной секцией, и
   световой блик кроны остался без стилей — SVG рисует эллипс без заливки
   ЧЁРНЫМ, и на кроне висела чёрная дыра. Потому блок живёт отдельно и
   начинается собственным заголовком.

   Задний слой кроны ходит за курсором меньше, передний — больше: это и есть
   глубина. Свет — мягкое белое пятно, невидимое до наведения; курсор слева —
   свет слева. */
.fasl-tree__layer--back  path{ transform:translate(calc(var(--tx) * 1.2px), calc(var(--ty) * .6px));
  transform-box:fill-box; transition:transform 900ms cubic-bezier(.22,.68,0,1); }
.fasl-tree__layer--front path{ transform:translate(calc(var(--tx) * 4.5px), calc(var(--ty) * 2.4px));
  transform-box:fill-box; transition:transform 700ms cubic-bezier(.22,.68,0,1); }
.fasl-tree__lightspot{
  fill:#FFFFFF; opacity:0;
  transform:translateX(calc(var(--tx) * 10px));
  transform-box:fill-box;
  transition:opacity 600ms var(--e-out), transform 700ms cubic-bezier(.22,.68,0,1);
  pointer-events:none;
}
.fasl-tree{ transition:transform 600ms cubic-bezier(.22,.68,0,1); }
@media (hover:hover) and (pointer:fine){
  html.fasl .fasl-goal [class~="rounded-3xl"]:hover .fasl-tree__lightspot{ opacity:.13; }
  html.fasl .fasl-goal [class~="rounded-3xl"]:hover .fasl-tree{
    transform:scale(1.04) rotate(calc(var(--tx) * 1.2deg));
  }
}
@media (prefers-reduced-motion:reduce){
  .fasl-tree__lightspot{ display:none !important; }
}

/* Погода при наведении на карточки «Ба ҳадафи худ» не идёт: в них дерево,
   и частицы поверх дерева читались как мусор. Правило уже терялось при
   замене диапазона — потому живёт здесь, рядом с деревом. */
html.fasl .fasl-goal [class~="rounded-3xl"]::before{ display:none !important; }

@media (max-width:767px){
  .fasl-tree{ width:138px; height:121px; right:8px; }
}
@media (prefers-reduced-motion:reduce){
  .fasl-tree *{ animation:none !important; transition:none !important; }
  .fasl-tree__new{ opacity:1; transform:none; }
}

/* Текст и всё прочее — поверх едущего года. */
html.fasl .fasl-goal [class~="rounded-3xl"] > *{ position:relative; z-index:2; }
/* Значок-кружок убран во всех четырёх. */
html.fasl .fasl-goal [class~="rounded-full"][class*="w-12"]{ display:none !important; }
/* Текст на фотографии держится сам: без кружка ему достаётся вся карточка,
   и он становится тем, чем и был, — обещанием, а не подписью к значку. */
/* Текст лежит на небе — на самой светлой части сцены. Свечение вокруг букв
   осталось, но слабое: оно нужно там, где строка заходит на горизонт. */
/* Блок крупнее: в нём теперь идёт год, и на карточке ростом со строку его
   не разглядеть. Низ длиннее верха — под текстом лежит земля. */
html.fasl .fasl-goal [class~="rounded-3xl"]{
  padding:24px 24px 40px !important;
  min-height:210px;
  display:flex !important;
  align-items:flex-start !important;
}
html.fasl .fasl-goal > h2{ font-size:var(--f-h2) !important; }
@media (max-width:767px){
  html.fasl .fasl-goal [class~="rounded-3xl"]{ min-height:170px; padding:20px 20px 34px !important; }
}
html.fasl .fasl-goal [class~="rounded-3xl"] p{
  font-size:15.5px !important;
  line-height:1.5 !important;
  color:var(--f-ink) !important;
  font-weight:600 !important;
  margin:0 !important;
  text-shadow:0 1px 2px rgba(255,255,255,.75) !important;
}
@media (hover:hover) and (pointer:fine){
  html.fasl .fasl-goal [class~="rounded-3xl"]:hover{
    transform:translateY(-3px) !important;
    box-shadow:var(--season-shadow) !important;
  }
}

/* --- УТОҚ: ПАНЕЛЬ ПРИВЕТСТВИЯ ---------------------------------------------
   «Рӯз ба хайр, Маъмур» с числами платформы. Её рисует dash-hero.js, и цвет
   у неё был зашит в разметку — тёмно-зелёный градиент. Выбираешь зиму,
   вокруг всё холодное, а панель посреди экрана остаётся летней: единственное
   зелёное пятно, которое ничего не обозначает.

   Панель — не знак бренда (знак бренда стоит в рельсе и остаётся зелёным
   всегда), а сводка дня. День бывает зимний. Поэтому здесь сезон.

   Стилями, а не правкой dash-hero.js: цвет там записан в атрибут style,
   поэтому !important обязателен — иначе правило проиграет разметке.

   Панель одна на все три роли: она появляется всюду, где есть ряд плиток —
   у маъмур, у устода и у донишҷӯ. Значит и сезон достаётся всем троим одним
   правилом, а не тремя. */
/* --- ПАНЕЛЬ МАЪМУР: ПЛИТКИ «ОМОР» ----------------------------------------
   Ряд счётчиков — главное на вкладке, и он остался ровно тем, чем был:
   белая карточка, крупное число, подпись, знак в мягкой обойме. Сезон входит
   сюда так же, как везде, — цветом знака, каймой при наведении и подъёмом,
   а не заменой всей карточки на цветную полосу.

   Подложки у этих карточек прозрачные (bg-white/5, border-white/10 —
   разметка рассчитана на тёмную тему), поэтому на светлом фоне их нужно
   назвать поимённо: точное совпадение класса их не ловит из-за дроби. */
html.fasl [code-path^="src/pages/admin/AdminPanel.tsx:270:"],
html.fasl [code-path^="src/pages/admin/AdminPanel.tsx:280:"],
html.fasl [code-path^="src/pages/admin/AdminPanel.tsx:311:"],
html.fasl [code-path^="src/pages/admin/AdminPanel.tsx:369:"]{
  background:var(--f-surface) !important;
  border-color:var(--f-rule) !important;
  border-radius:var(--r-card) !important;
  transition:transform var(--f-d) var(--s-e),
             border-color var(--f-d) var(--e-out),
             box-shadow var(--f-d) var(--e-out) !important;
}
@media (hover:hover) and (pointer:fine){
  html.fasl [code-path^="src/pages/admin/AdminPanel.tsx:270:"]:hover{
    transform:translateY(-3px) !important;
    border-color:var(--season-border) !important;
    box-shadow:var(--season-shadow) !important;
  }
}
/* Обойма знака — сезонная, как и всё, что в теме отвечает за акцент. */
html.fasl [code-path^="src/pages/admin/AdminPanel.tsx:271:"],
html.fasl [code-path^="src/pages/admin/AdminPanel.tsx:248:"]{
  background:var(--season-surface) !important;
  color:var(--season-primary) !important;
  border-radius:var(--r-1) !important;
  transition:background-color var(--tm) var(--e-out), color var(--tm) var(--e-out) !important;
}

/* Своя панель для устода и донишҷӯ — та же по виду, что и у маъмур.
   Перечислены через запятую намеренно: разойдись они, кабинеты стали бы
   выглядеть как три разных продукта. */
html.fasl .fasl-dash{
  margin:0 0 22px;
  padding:30px 34px;
  color:#EAF1E7;
  border-radius:var(--r-4);
}
html.fasl .fasl-dash .fasl-dash-hi{
  margin:0; font:700 28px/1.15 var(--f-sans);
  letter-spacing:-.02em; color:#fff;
}
html.fasl .fasl-dash .fasl-dash-sub{
  margin:8px 0 0; font:15px/1.55 var(--f-sans);
  color:rgba(234,241,231,.78);
}
html.fasl .fasl-dash .fasl-dash-sub b{ color:#fff; font-weight:600; }
@media (max-width:767px){
  html.fasl .fasl-dash{ padding:22px 20px; }
  html.fasl .fasl-dash .fasl-dash-hi{ font-size:23px; }
}

html.fasl #eag-dash-hero,
html.fasl .fasl-dash{
  background:linear-gradient(140deg,
      var(--season-secondary),
      color-mix(in srgb, var(--season-primary) 52%, var(--season-secondary))) !important;
  border-radius:var(--r-4) !important;
  box-shadow:var(--season-shadow) !important;
  position:relative; overflow:hidden;
  transition:background var(--tm) var(--e-out),
             border-radius var(--tm) var(--e-out),
             box-shadow var(--tm) var(--e-out) !important;
}
@supports not (background:color-mix(in srgb,#000 10%,#fff)){
  html.fasl #eag-dash-hero,
  html.fasl .fasl-dash{ background:var(--season-secondary) !important; }
}
/* Содержимое поверх сезонного слоя. */
html.fasl #eag-dash-hero > *,
html.fasl .fasl-dash > *{ position:relative; z-index:1; }
/* Разделительная черта и подписи — от сезона, а не от прежней зелени. */
html.fasl #eag-dash-hero [style*="border-top"]{
  border-top-color:color-mix(in srgb, #fff 24%, transparent) !important;
}

/* --- КАТАЛОГ: та же карточка, что и на Асосӣ ------------------------------
   В каталоге разметка своя и тёмная: подложка bg-[#0B2818]/80, белый текст,
   зелёные плашки. Сезон её не брал — выбираешь зиму, а каталог остаётся
   летне-зелёным, и две страницы выглядят из разных сайтов.

   Не берёт по понятной причине: общая перекраска работает по ТОЧНОМУ имени
   класса (~=), а здесь у всех классов хвост прозрачности — bg-[#10B981]/20,
   text-white/40, border-white/10. Точное совпадение их не ловит, и это
   правильно: заливать плотным цветом полупрозрачную подложку нельзя. Значит
   их нужно назвать поимённо, что здесь и сделано.
   ------------------------------------------------------------------------ */
html.fasl .sb-card[class*="bg-[#0B2818]"]{
  background:var(--f-surface) !important;
  border-color:var(--f-rule) !important;
}
/* Заголовок и описание. Белый текст на белой карточке — первое, что
   сломалось бы, если перекрасить только подложку. */
html.fasl .sb-card[class*="bg-[#0B2818]"] [class*="text-white"]{ color:var(--f-ink) !important; }
html.fasl .sb-card[class*="bg-[#0B2818]"] [class*="text-white/40"],
html.fasl .sb-card[class*="bg-[#0B2818]"] [class*="text-white/60"]{ color:var(--f-ink-2) !important; }
@media (hover:hover) and (pointer:fine){
  html.fasl .sb-card[class*="bg-[#0B2818]"]:hover [class*="group-hover:text-[#10B981]"]{
    color:var(--season-primary) !important;
  }
}
/* Плашки: категория — сезонная, цена — спокойная. Два ярких пятна на одной
   карточке спорят между собой, и глаз не понимает, что здесь главное. */
html.fasl .sb-card [class*="bg-[#10B981]/20"],
html.fasl .sb-card [class*="bg-green-500/20"]{
  background:var(--season-surface) !important;
  color:var(--season-primary) !important;
  border-radius:var(--r-1) !important;
  transition:background-color var(--tm) var(--e-out), color var(--tm) var(--e-out) !important;
}
html.fasl .sb-card [class*="bg-white/10"]{
  background:var(--f-bg) !important;
  color:var(--f-mute) !important;
  border-radius:var(--r-1) !important;
}
html.fasl .sb-card [class*="border-white/10"]{ border-color:var(--f-rule) !important; }

/* --- КАРТОЧКА РАСТЁТ ПОД СОДЕРЖИМОЕ, А НЕ РЕЖЕТ ЕГО -----------------------
   Категория на карточке обрезалась ровно посередине букв. Причина не в
   шрифте и не в отступах.

   В стилях бандла лежат правила прежнего слоя:

       [code-path^="…Home.tsx:268:"] { height:330px; display:flex }
       [code-path^="…Home.tsx:280:"] { flex:1 1 40%; overflow:hidden }

   То есть карточка ровно 330 пикселей, тело — 40% от них, и всё, что не
   влезло, отрезается. А внутри тела flex-элементы могут сжиматься: когда
   содержимое перестаёт помещаться, первой схлопывается самая низкая
   строка — плашка категории. Не «пропадает», а именно сжимается до пары
   пикселей: видна верхушка букв.

   Подгонять кегль под самое длинное название сегодня — значит вернуться
   сюда завтра. Поэтому лечим причину: высота считается от содержимого,
   картинке даётся своя, а строкам запрещено сжиматься. Карточки в ряду
   всё равно выйдут одинаковыми — сетка растягивает их по высоте самой
   высокой. Зато обрезать больше нечего. */
html.fasl [code-path^="src/pages/Home.tsx:268:"]{
  height:auto !important;
  min-height:300px;
}
html.fasl [code-path^="src/pages/Home.tsx:277:"]{
  flex:0 0 auto !important;
  height:180px !important;
}
html.fasl [code-path^="src/pages/Home.tsx:280:"]{
  flex:1 1 auto !important;
  overflow:visible !important;
  justify-content:flex-start !important;
  gap:8px !important;
}
/* Плашка и нижняя строка не сжимаются никогда: именно они схлопывались. */
html.fasl [code-path^="src/pages/Home.tsx:281:"],
html.fasl [code-path^="src/pages/Home.tsx:283:"]{
  flex:0 0 auto !important;
  overflow:visible !important;
  white-space:normal !important;
  text-overflow:clip !important;
}
/* Название сжиматься может — у него честное многоточие по двум строкам. */
html.fasl [code-path^="src/pages/Home.tsx:282:"]{ flex:0 1 auto !important; }

/* --- ДЛИННОЕ НАЗВАНИЕ НЕ РЕЖЕТСЯ ПОПОЛАМ ---------------------------------
   «Biological protection of plants against diseases and pests» не влезал в
   две строки, и вторая обрезалась ПО СЕРЕДИНЕ БУКВ — так выглядит обрезка
   по высоте, когда высоту задали, а число строк нет.

   Лечится не подгонкой размера шрифта под самое длинное название, которое
   есть сегодня: завтра появится длиннее. Лечится честной обрезкой по
   строкам — три точки в конце вместо располовиненных букв — и высотой,
   посчитанной от числа строк, а не от глазомера.

   Правило общее: любой элемент, который приложение пометило line-clamp-N,
   получает высоту ровно под N строк. Заодно карточки в ряду выравниваются
   по низу — раньше они разъезжались, если у одной название в строку, а у
   другой в две.

   Плюс перенос по любому месту: длинное слово без пробелов (а в названиях
   сортов и препаратов такие бывают) иначе вылезает за карточку вбок. */
html.fasl [class*="line-clamp-2"]{
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;
  overflow:hidden !important;
  min-height:calc(2 * 1.35em);
  overflow-wrap:anywhere;
}
html.fasl [class*="line-clamp-3"]{
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:3 !important;
  overflow:hidden !important;
  overflow-wrap:anywhere;
}
/* Название карточки на Асосӣ — то самое, что резалось. Высота под две
   строки его же кеглем и межстрочным, а не «примерно столько». */
html.fasl [code-path^="src/pages/Home.tsx:282:"]{
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;
  overflow:hidden !important;
  min-height:calc(2 * 1.3 * var(--f-h3));
  overflow-wrap:anywhere;
}

/* ============================================================================
   10. ВОСЕМЬ ЗНАЧКОВ

   На Асосӣ их два ряда: четыре в «Барои шумо тавсия медиҳем» (:306) и четыре
   в статистике (:325). До сих пор все восемь были одним значком, повторённым
   восемь раз: одна заливка, один цвет штриха, одна анимация появления.

   Разводим их по четырёхступенчатой шкале сезона. Подложка считается из того
   же тона с прозрачностью, штрих берётся плотный: значок остаётся спокойным,
   но становится своим, и ряд начинает читаться слева направо — как его и
   читают.
   ========================================================================= */
html.fasl-home [code-path^="src/pages/Home.tsx:304:"],
html.fasl-home [code-path^="src/pages/Home.tsx:324:"],
html.fasl-home [code-path^="src/pages/Home.tsx:342:"],
html.fasl-home [code-path^="src/pages/Home.tsx:381:"]{
  background:var(--f-surface) !important;
  border:1px solid var(--f-rule) !important;
  border-radius:var(--r-card) !important;
  box-shadow:none !important;
  animation:none !important;
  transition:transform var(--f-d) var(--s-e),
             border-color var(--f-d) var(--e-out),
             box-shadow var(--f-d) var(--e-out) !important;
}
@media (hover:hover) and (pointer:fine){
  html.fasl-home [code-path^="src/pages/Home.tsx:304:"]:hover,
  html.fasl-home [code-path^="src/pages/Home.tsx:324:"]:hover{
    border-color:var(--s-acc) !important;
    box-shadow:0 8px 24px rgba(31,35,28,.07) !important;
  }
}

/* --- ЗНАК БЕЗ ОБОЙМЫ, ПОД НИМ РАСТЁТ ЛИНИЯ -------------------------------
   Обойма вокруг значка прожила три жизни: бледный квадратик, потом кольцо-
   колесо года — и оба читались наклейкой, а кольцо ещё и вертелось как
   индикатор загрузки. Обоймы больше нет вообще.

   Вместо неё — фирменный жест самой темы, та же короткая линейка, что стоит
   у ярлыков в подвале и у категории курса: знак в цвете сезонной шкалы, под
   ним линия в тот же цвет. В покое линия короткая, при наведении на карточку
   она прорастает вширь — единственное движение, и оно означает ровно то,
   что происходит: здесь что-то растёт.

   Восемь знаков подряд остаются системой не из-за одинаковой рамки, а из-за
   одинакового жеста; сезонная шкала --s-i1…4 даёт каждому своё место в ряду. */
html.fasl [code-path^="src/pages/Home.tsx:306:"],
html.fasl [code-path^="src/pages/Home.tsx:325:"]{
  position:relative;
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
  width:34px !important; height:34px !important;
  transition:color var(--tm) var(--e-out), transform var(--f-d) var(--s-e) !important;
}
html.fasl [code-path^="src/pages/Home.tsx:306:"] svg,
html.fasl [code-path^="src/pages/Home.tsx:325:"] svg{
  width:26px !important; height:26px !important;
}
html.fasl [code-path^="src/pages/Home.tsx:306:"]::before,
html.fasl [code-path^="src/pages/Home.tsx:325:"]::before{
  content:""; position:absolute; left:1px; bottom:-7px;
  width:14px; height:2px; border-radius:1px;
  background:currentColor; opacity:.85;
  transition:width var(--f-slow) var(--s-e), background-color var(--tm) var(--e-out);
}
@media (hover:hover) and (pointer:fine){
  html.fasl [code-path^="src/pages/Home.tsx:304:"]:hover [code-path^="src/pages/Home.tsx:306:"]::before,
  html.fasl [code-path^="src/pages/Home.tsx:324:"]:hover [code-path^="src/pages/Home.tsx:325:"]::before{
    width:30px;
  }
}

/* ============================================================================
   ЧЕТЫРЕ СЦЕНЫ «БАРОИ ШУМО ТАВСИЯ МЕДИҲЕМ»

   Курсы — рост, устодон — поле и ветер, сертификаты — урожай-награда,
   чат — связь. Четыре разных сюжета на одних правилах: один размер, одна
   длительность (--f-slow, 400мс), один easing (--e-out), один сезонный
   набор цветов. Поэтому они читаются системой, а не четырьмя картинками.

   В покое каждая сцена — тихий минимум. Всё движение начинается только от
   :hover карточки и заканчивается с уходом курсора; постоянных циклов нет,
   кроме двух коротких на время наведения (покачивание и точки набора).
   Всё на transform и opacity.
   ========================================================================= */
html.fasl-home .fasl-scene{ display:block; width:100%; margin:0 0 10px; }
/* Значок бандла в этих четырёх карточках спрятан: его место заняла сцена.
   Узел не удаляется — React вернул бы его перерисовкой. */
html.fasl-home [code-path^="src/pages/Home.tsx:297:"] [code-path^="src/pages/Home.tsx:306:"]{
  display:none !important;
}
/* Подъём карточки, сдержанный: -3px и едва заметный масштаб. */
html.fasl-home [code-path^="src/pages/Home.tsx:304:"]{
  transition:transform var(--f-slow) var(--e-out),
             border-color var(--f-d) var(--e-out),
             box-shadow var(--f-d) var(--e-out) !important;
}
@media (hover:hover) and (pointer:fine){
  html.fasl-home [code-path^="src/pages/Home.tsx:304:"]:hover{
    transform:translateY(-3px) scale(1.015) !important;
    border-color:var(--season-border) !important;
    box-shadow:var(--season-shadow) !important;
  }
}

/* --- ОБЩЕЕ ДЛЯ СЦЕН ------------------------------------------------------- */
.fasl-scene *{ transition:transform var(--f-slow) var(--e-out),
                          opacity var(--f-slow) var(--e-out); }

/* ============================================================================
   ЧЕТЫРЕ СЦЕНЫ: ПРЕДМЕТЫ В ПРОСТРАНСТВЕ (CSS 3D + ФОТОГРАФИЯ)

   Векторное рисование прекращено по решению: в этом размере любой SVG
   читается иллюстрацией. Здесь другая технология:

     CSS 3D      у планшета и панели НАСТОЯЩАЯ толщина (боковая грань в
                 transform-стеке) и настоящая перспектива; бумага
                 сертификата наклонена в пространстве и следует за
                 курсором честным rotateX/rotateY;
     фотография  экран планшета показывает реальный снимок поля из
                 проекта, преподаватель — реальное фото устода: реальнее
                 фотографии не рисует ни один движок;
     свет        один на все четыре сцены, сверху слева: грани, обращённые
                 к нему, светлее, контактные тени — размытые пятна под
                 предметами, дышащие в противофазе.

   Курсор уже отслеживается (−sx/−sy на карточке); var() читается прямо в
   keyframes, поэтому параллакс жив и во время idle-плавания — конфликт
   transform-ов невозможен архитектурно.
   ========================================================================= */
html.fasl-home .fasl-scene{ height:118px; max-width:240px; }
/* Сцена сертификатов занимает карточку целиком — размер задан ниже, в
   разделе про карточку-сертификат. */
.fasl-s3d{ position:relative; }
.fasl-s3d .s3-stage{
  position:absolute; inset:0;
  perspective:620px; perspective-origin:50% 38%;
  font-family:var(--f-sans);
}
.fasl-s3d .s3-shadow{
  position:absolute; left:12%; right:16%; bottom:6px; height:12px;
  background:radial-gradient(ellipse at 50% 50%, rgba(40,36,22,.34), transparent 70%);
  filter:blur(3px);
  animation:faslShBreath 6.5s cubic-bezier(.45,.05,.55,.95) infinite alternate;
}
@media (hover:hover) and (pointer:fine){
  html.fasl-home [code-path^="src/pages/Home.tsx:304:"]:hover .fasl-s3d .s3-shadow{
    animation:none; opacity:.7; transform:scaleX(.92);
    transition:opacity 600ms var(--e-out), transform 600ms var(--e-out);
  }
}

/* --- COURSES: планшет на столе -------------------------------------------- */
html.fasl .s3-desk{
  position:absolute; left:0; right:0; bottom:0; height:34px;
  background:linear-gradient(180deg, #EFE9DB, #E2D9C4);
  border-radius:6px;
  transform:rotateX(55deg); transform-origin:50% 100%;
}
html.fasl .s3-tablet{
  position:absolute; left:8%; top:4px; width:70%; height:86px;
  transform-style:preserve-3d;
  animation:faslTab3d 6.5s cubic-bezier(.45,.05,.55,.95) infinite alternate;
}
@keyframes faslTab3d{
  from{ transform:rotateX(calc(6deg + var(--sy,0) * -2deg)) rotateY(calc(-13deg + var(--sx,0) * 3deg)) translateZ(0); }
  to  { transform:rotateX(calc(7.5deg + var(--sy,0) * -2deg)) rotateY(calc(-11.5deg + var(--sx,0) * 3deg)) translateZ(4px); }
}
html.fasl .s3-tablet-side{
  position:absolute; inset:0; border-radius:9px;
  background:linear-gradient(90deg, #6E7268, #4A4E44);
  transform:translateZ(-5px) translateX(5px);
}
html.fasl .s3-tablet-face{
  position:absolute; inset:0; border-radius:9px; padding:4px;
  background:linear-gradient(135deg, #F0F1ED, #B9BDB1 55%, #8E9286);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
html.fasl .s3-screen{
  position:relative; width:100%; height:100%; border-radius:6px; overflow:hidden;
  background:url("/images/course-agronomy.jpg") center/cover;
}
html.fasl .s3-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,18,12,.78), rgba(10,18,12,.44) 55%, rgba(10,18,12,.66));
}
html.fasl .s3-ui{ position:absolute; inset:8px 10px; color:#fff; display:flex; flex-direction:column; gap:3px; }
html.fasl .s3-eyebrow{ font-size:6.5px; font-weight:700; letter-spacing:.12em; color:#9FD6AE; }
html.fasl .s3-title{ font-size:9.5px; font-weight:800; line-height:1.15; }
html.fasl .s3-row{ margin-top:auto; display:flex; align-items:flex-end; justify-content:space-between; }
html.fasl .s3-bars{ display:flex; align-items:flex-end; gap:3px; height:22px; }
html.fasl .s3-bars i{
  width:5px; border-radius:1.5px; background:linear-gradient(180deg, #A8E7B9, #5FA974);
  box-shadow:0 1px 2px rgba(0,0,0,.35);
}
html.fasl html.fasl .s3-bars i:nth-child(1){ height:46%; }
html.fasl .s3-bars i:nth-child(2){ height:70%; }
html.fasl .s3-bars i:nth-child(3){ height:56%; }
html.fasl .s3-bar-hot{ height:88%; background:linear-gradient(180deg, #D9FBE2, #7FD79A) !important;
  transform-origin:bottom; animation:faslBarLive 4.5s ease-in-out infinite alternate; }
@keyframes faslBarLive{ from{ transform:scaleY(.7); } to{ transform:scaleY(1); } }
html.fasl .s3-prog{ text-align:right; }
html.fasl .s3-prog span{ display:block; font-size:6px; color:#BBD9C2; }
html.fasl .s3-prog b{ font-size:11px; font-weight:800; }
html.fasl .s3-track{ width:40px; height:3px; border-radius:2px; background:rgba(255,255,255,.18); margin-top:2px; }
html.fasl .s3-fill{ height:100%; border-radius:2px; background:linear-gradient(90deg,#8FE3A6,#CFF7DA);
  transform-origin:left; animation:faslProgress 9s cubic-bezier(.45,.05,.55,.95) infinite alternate; }
@keyframes faslProgress{ from{ transform:scaleX(.7); } to{ transform:scaleX(1); } }
html.fasl .s3-glare{
  position:absolute; top:-20%; bottom:-20%; left:-30%; width:34%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.2), transparent);
  transform:skewX(-16deg);
  animation:faslGlare 7s linear infinite;
}
@keyframes faslGlare{
  0%{ transform:translateX(0) skewX(-16deg); } 12%{ transform:translateX(340%) skewX(-16deg); }
  100%{ transform:translateX(340%) skewX(-16deg); }
}
html.fasl .s3-stylus{
  position:absolute; right:6%; bottom:10px; width:5px; height:52px;
  transform:rotate(22deg);
  transition:transform 600ms cubic-bezier(.22,1,.36,1);
}
html.fasl .s3-stylus i{
  position:absolute; inset:0; border-radius:3px;
  background:linear-gradient(90deg, #D9DCD2 0 30%, #9EA298 60%, #6E7268);
  box-shadow:inset 0 6px 4px -4px rgba(255,255,255,.9);
}
html.fasl .s3-stylus i::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:7px;
  background:linear-gradient(180deg,#55584F,#2E312A);
  clip-path:polygon(0 0, 100% 0, 50% 100%);
}
html.fasl .s3-stylus-shadow{
  position:absolute; left:-8px; right:-8px; bottom:-9px; height:5px;
  background:radial-gradient(ellipse, rgba(40,36,22,.3), transparent 70%); filter:blur(1.5px);
}
@media (hover:hover) and (pointer:fine){
  html.fasl-home [code-path^="src/pages/Home.tsx:304:"]:hover .s3-tablet{ animation-name:faslTab3dUp; }
  html.fasl-home [code-path^="src/pages/Home.tsx:304:"]:hover .s3-stylus{ transform:rotate(16deg) translateY(-2px); }
  html.fasl-home [code-path^="src/pages/Home.tsx:304:"]:hover .s3-fill{ animation-duration:3.5s; }
}
@keyframes faslTab3dUp{
  from{ transform:rotateX(calc(5deg + var(--sy,0) * -2deg)) rotateY(calc(-12deg + var(--sx,0) * 3deg)) translateZ(10px); }
  to  { transform:rotateX(calc(6.5deg + var(--sy,0) * -2deg)) rotateY(calc(-10.5deg + var(--sx,0) * 3deg)) translateZ(14px); }
}

/* --- TEACHERS: цифровая панель + настоящий устод -------------------------- */
html.fasl .s3-panel{
  position:absolute; left:2%; top:4px; width:62%; height:92px;
  transform-style:preserve-3d;
  animation:faslPanel3d 8s cubic-bezier(.45,.05,.55,.95) infinite alternate;
}
@keyframes faslPanel3d{
  from{ transform:rotateY(calc(9deg + var(--sx,0) * 3deg)) rotateX(calc(var(--sy,0) * -2deg)); }
  to  { transform:rotateY(calc(10.5deg + var(--sx,0) * 3deg)) rotateX(calc(1deg + var(--sy,0) * -2deg)); }
}
html.fasl .s3-panel-side{
  position:absolute; inset:0 0 14px 0; border-radius:7px;
  background:#3E4239; transform:translateZ(-4px) translateX(-4px);
}
html.fasl .s3-panel-face{
  position:absolute; inset:0 0 14px 0; border-radius:7px; padding:3px;
  background:linear-gradient(135deg,#EDEFEA,#B5B9AD 60%,#8C9084);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
html.fasl .s3-panel-leg{
  position:absolute; left:46%; bottom:0; width:5px; height:16px;
  background:linear-gradient(90deg,#C9CDC2,#8C9084); border-radius:2px;
}
html.fasl .s3-panel-leg::after{
  content:""; position:absolute; left:-12px; right:-12px; bottom:-2px; height:4px;
  border-radius:2px; background:linear-gradient(180deg,#A8AC9F,#7C8074);
}
html.fasl .s3-pscreen{
  position:relative; width:100%; height:100%; border-radius:5px; overflow:hidden;
  
  background:linear-gradient(160deg,#212A22,#131A15);
  padding:8px 9px; display:flex; flex-direction:column; color:#fff;
}
html.fasl .s3-ptitle{ font-size:8px; font-weight:700; color:#E7F4EA; margin-top:2px; }
html.fasl .s3-pdata{ margin-top:auto; display:flex; align-items:flex-end; justify-content:space-between; }
html.fasl .s3-bars--p{ height:24px; }
html.fasl .s3-bars--p i:nth-child(4){ height:92%; }
html.fasl .s3-fact{
  font-size:10px; font-weight:800; color:#B4F0C5; text-align:right;
  opacity:0; transform:translateY(3px);
  transition:opacity 500ms var(--e-out) 250ms, transform 500ms var(--e-out) 250ms;
}
html.fasl .s3-fact small{ display:block; font-size:5.5px; font-weight:600; color:#7FA78B; }
html.fasl .s3-glare--p{ opacity:.6; }
html.fasl .s3-teacher{
  position:absolute; right:2%; top:2px; width:34%; height:100px; margin:0;
  border-radius:9px; overflow:hidden;
  box-shadow:0 10px 22px rgba(30,40,28,.35), inset 0 1px 0 rgba(255,255,255,.5);
  transform:rotateY(calc(-7deg + var(--sx,0) * 3deg));
  transition:transform 600ms cubic-bezier(.22,1,.36,1);
}
html.fasl .s3-teacher img{ width:100%; height:100%; object-fit:cover; display:block; }
html.fasl .s3-teacher figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:3px 7px;
  font-size:7px; font-weight:700; color:#fff;
  background:linear-gradient(180deg, transparent, rgba(12,20,14,.85));
}
@media (hover:hover) and (pointer:fine){
  html.fasl-home [code-path^="src/pages/Home.tsx:304:"]:hover .s3-fact{ opacity:1; transform:none; }
  html.fasl-home [code-path^="src/pages/Home.tsx:304:"]:hover .s3-teacher{
    transform:rotateY(calc(-4deg + var(--sx,0) * 3deg)) translateZ(6px);
  }
}

/* --- CERTIFICATES: документ в пространстве -------------------------------- */
html.fasl .s3-paper{
  position:absolute; left:7%; top:5px; width:82%; height:100px;
  transform-style:preserve-3d;
  animation:faslPaper3d 7s cubic-bezier(.45,.05,.55,.95) infinite alternate;
}
@keyframes faslPaper3d{
  from{ transform:rotateX(calc(9deg + var(--sy,0) * -2deg)) rotateY(calc(-6deg + var(--sx,0) * 3deg)) rotateZ(-1.4deg); }
  to  { transform:rotateX(calc(11deg + var(--sy,0) * -2deg)) rotateY(calc(-4.5deg + var(--sx,0) * 3deg)) rotateZ(-.6deg) translateZ(3px); }
}
html.fasl .s3-paper-in{
  position:absolute; inset:0; border-radius:3px; overflow:hidden;
  background:
    repeating-linear-gradient(0deg, rgba(120,110,88,.028) 0 1px, transparent 1px 3px),
    linear-gradient(160deg, #FFFFFF, #F8F5EC 62%, #EDE8D8);
  box-shadow:0 1px 0 #CFC9B8, 0 2px 0 rgba(160,152,130,.5),
             inset 0 0 0 1px rgba(255,255,255,.6);
  border:1px solid #E4DFD0;
  padding:9px 12px 8px;
  display:flex; flex-direction:column; color:#26301F;
}
html.fasl .s3-paper-in::before{
  content:""; position:absolute; inset:5px; pointer-events:none;
  border:1.2px solid #4F7A44; border-radius:2px; opacity:.85;
}
html.fasl .s3-cert-head{ display:flex; align-items:center; justify-content:center; gap:4px; }
html.fasl .s3-leaf{
  width:8px; height:8px;
  background:radial-gradient(circle at 30% 30%, #7FB069, #3E6B2A);
  border-radius:70% 0 70% 0;
}
html.fasl .s3-cert-head b{ font-size:11px; font-weight:800; color:#2F6B3C; }
html.fasl .s3-cert-caps{ text-align:center; font-size:5.5px; letter-spacing:.24em; color:#6B7263; margin-top:1px; }
html.fasl .s3-cert-sub{ text-align:center; font-size:5px; color:#9AA095; }
html.fasl .s3-cert-rows{ margin-top:5px; display:flex; flex-direction:column; gap:3.5px; }
html.fasl .s3-cert-rows > div{ display:flex; align-items:center; gap:5px; }
html.fasl .s3-cert-rows label{ font-size:5px; color:#9AA095; width:24px; }
html.fasl .s3-cert-rows i{ flex:1; height:2.5px; border-radius:1px; background:#DCD8CA; }
html.fasl html.fasl .s3-line-mid{ max-width:70%; }
html.fasl .s3-line-short{ max-width:36%; }
html.fasl .s3-cert-foot{ margin-top:auto; display:flex; align-items:flex-end; gap:8px; }
html.fasl .s3-sign{ width:34px; height:10px; }
html.fasl .s3-seal{
  width:17px; height:17px; border-radius:50%; margin-left:auto;
  background:radial-gradient(circle at 34% 30%, #6FA05A, #3A5C33);
  box-shadow:0 1px 2px rgba(30,40,20,.4), inset 0 1px 1px rgba(255,255,255,.35);
  display:flex; align-items:center; justify-content:center;
  transition:transform 450ms var(--s-e) 350ms;
}
html.fasl .s3-seal i{ width:9px; height:9px; border-radius:50%; border:1px solid #DFF0D8; }
html.fasl .s3-qr{
  width:20px; height:20px; padding:2px;
  background:#fff; border:1px solid #CBC6B6;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  opacity:.85; transition:opacity 450ms var(--e-out) 200ms;
}
html.fasl .s3-qr b{ background:#26301F; border-radius:.5px; }
html.fasl .s3-qr b:nth-child(2),
html.fasl .s3-qr b:nth-child(7),
html.fasl .s3-qr b:nth-child(9),
html.fasl .s3-qr b:nth-child(12),
html.fasl .s3-qr b:nth-child(14){ background:transparent; }
html.fasl .s3-sheen{
  position:absolute; top:-10%; bottom:-10%; left:-26%; width:26%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-16deg);
  animation:faslGlare 6.5s linear infinite;
}
@media (hover:hover) and (pointer:fine){
  html.fasl-home [code-path^="src/pages/Home.tsx:304:"]:hover .s3-paper{ animation-name:faslPaper3dUp; }
  html.fasl-home [code-path^="src/pages/Home.tsx:304:"]:hover .s3-qr{ opacity:1; }
  html.fasl-home [code-path^="src/pages/Home.tsx:304:"]:hover .s3-seal{ transform:scale(1.14); }
}
@keyframes faslPaper3dUp{
  from{ transform:rotateX(calc(7deg + var(--sy,0) * -2deg)) rotateY(calc(-5deg + var(--sx,0) * 3deg)) rotateZ(-1deg) translateZ(10px); }
  to  { transform:rotateX(calc(9deg + var(--sy,0) * -2deg)) rotateY(calc(-3.5deg + var(--sx,0) * 3deg)) rotateZ(-.2deg) translateZ(13px); }
}

/* --- CHAT: плавающее матовое окно ----------------------------------------- */
html.fasl .s3-chat{
  position:absolute; left:6%; top:4px; width:86%; height:104px;
  border-radius:11px; overflow:hidden;
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(9px) saturate(1.1);
          backdrop-filter:blur(9px) saturate(1.1);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 14px 30px rgba(30,40,28,.18), inset 0 1px 0 rgba(255,255,255,.9);
  display:flex; flex-direction:column;
  animation:faslChat3d 5.5s cubic-bezier(.45,.05,.55,.95) infinite alternate;
}
@keyframes faslChat3d{
  from{ transform:translate3d(calc(var(--sx,0) * 3px), calc(var(--sy,0) * 1.5px), 0) rotate(calc(var(--sx,0) * 1deg)); }
  to  { transform:translate3d(calc(var(--sx,0) * 3px), calc(var(--sy,0) * 1.5px - 1.4px), 0) rotate(calc(var(--sx,0) * 1deg)); }
}
html.fasl .s3-chat-head{
  display:flex; align-items:center; gap:6px; padding:6px 9px 5px;
  border-bottom:1px solid rgba(120,120,100,.14);
}
html.fasl .s3-ava{
  width:15px; height:15px; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #4F8A5C, #234A2E);
  position:relative; flex:none;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.4);
}
html.fasl .s3-ava::after{
  content:""; position:absolute; left:4.5px; top:3.5px; width:6px; height:6px;
  background:#B4E3BE; border-radius:70% 0 70% 0;
}
html.fasl .s3-chat-who b{ display:block; font-size:7.5px; font-weight:800; color:#26301F; }
html.fasl .s3-chat-who span{ display:flex; align-items:center; gap:3px; font-size:5.5px; color:#8B937F; }
html.fasl .s3-chat-who span i{ width:4px; height:4px; border-radius:50%; background:#5FB878; }
html.fasl .s3-chat-body{ flex:1; padding:6px 9px; display:flex; flex-direction:column; gap:4px; }
html.fasl .s3-msg{
  align-self:flex-start; max-width:86%;
  background:#EDF3E7; border-radius:8px 8px 8px 3px;
  padding:4px 7px; font-size:6.8px; line-height:1.35; color:#26301F;
  box-shadow:0 1px 2px rgba(30,40,28,.08);
}
html.fasl .s3-typing{
  align-self:flex-start; display:flex; gap:3px; align-items:center;
  background:#EDF3E7; border-radius:8px; padding:4px 7px;
  box-shadow:0 1px 2px rgba(30,40,28,.08);
}
html.fasl .s3-typing i{
  width:3.5px; height:3.5px; border-radius:50%; background:#4F7A44;
  animation:faslSceneType 1.4s ease-in-out infinite;
}
html.fasl .s3-typing i:nth-child(2){ animation-delay:180ms; }
html.fasl .s3-typing i:nth-child(3){ animation-delay:360ms; }
@keyframes faslSceneType{
  0%, 100%{ transform:translateY(0); opacity:.5; }
  30%     { transform:translateY(-2px); opacity:1; }
}
html.fasl .s3-chat-input{
  display:flex; align-items:center; gap:5px; margin:0 8px 7px;
  background:rgba(255,255,255,.85); border:1px solid rgba(120,120,100,.16);
  border-radius:8px; padding:3.5px 4px 3.5px 8px;
}
html.fasl .s3-chat-input span{ flex:1; font-size:6px; color:#A9AE9E; }
html.fasl .s3-chat-input b{
  width:13px; height:13px; border-radius:50%; flex:none;
  background:radial-gradient(circle at 32% 28%, #679A56, #35602C);
  color:#EDF3E7; font-size:7px; line-height:13px; text-align:center; font-weight:400;
  box-shadow:0 1px 2px rgba(30,40,28,.3);
}
@media (hover:hover) and (pointer:fine){
  html.fasl-home [code-path^="src/pages/Home.tsx:304:"]:hover .s3-typing i{ animation-duration:.9s; }
}

@media (prefers-reduced-motion:reduce){
  .fasl-s3d *{ animation:none !important; transition:none !important; }
  html.fasl .s3-fact{ opacity:1; transform:none; }
}

/* Число статистики. */
html.fasl-home [code-path^="src/pages/Home.tsx:328:"]{
  color:var(--s-deep) !important;
  transition:color var(--tm) var(--e-out) !important;
}

/* ============================================================================
   11. НИЖНИЕ БЛОКИ, КАРУСЕЛЬ, СОВЕТ, ПОДВАЛ
   ========================================================================= */
/* Подложка нижних блоков — цвет фона САЙТА, не сезонный тон: бледно-зелёная
   заливка читалась зелёной рамкой вокруг «Устодони мо», а заголовок секции
   должен стоять на фоне страницы, как у остальных секций. */
html.fasl-home #eag-home-bottom{
  background:var(--f-bg, #FCFBF7) !important;
}
html.fasl-home #eag-home-bottom .ehb-card,
html.fasl-home #eag-home-bottom .ehb-teach,
html.fasl-home #eag-home-bottom .ehb-t{
  background:#fff !important;
  border:1px solid var(--f-rule) !important;
  border-radius:var(--r-card) !important;
  box-shadow:none !important;
  animation:none !important;
}
html.fasl-home #eag-home-bottom .ehb-card h3,
html.fasl-home #eag-home-bottom .ehb-teach h3{
  font-size:var(--f-h2) !important; font-weight:700 !important;
  letter-spacing:-.032em !important; color:var(--f-ink) !important;
}
/* Пробегающий блик по кнопке анимировал свойство left — то есть перекладку
   на каждом кадре. Снимаем совсем, а не переписываем на transform. */
html.fasl #eag-home-bottom .ehb-btn::after{ display:none !important; }
html.fasl #eag-home-bottom .ehb-btn{
  background:var(--s-acc) !important; color:#fff !important;
  border-radius:var(--r-btn) !important; box-shadow:none !important;
  transition:background-color var(--f-d) var(--e-out), transform var(--f-fast) var(--e-out) !important;
}
html.fasl #eag-home-bottom .ehb-btn:hover{ background:var(--s-deep) !important; transform:none !important; }
html.fasl #eag-home-bottom .ehb-btn:active{ transform:scale(.97) !important; }

/* --- БЛОК УСТОДОН -----------------------------------------------------------
   Ради него человек и выбирает платформу, поэтому здесь у слоя единственное
   место, отвечающее на движение мыши.

   Сперва тут было пятно света, идущее за курсором. Оно и правда двигалось,
   но на белой подложке читалось ровно как то, чем было, — розовым пятном
   ниоткуда. Времени года в нём не было никакого.

   Стало: тот же сезон, что и над разворотом. Осенью падают листья, зимой
   идёт снег, весной поднимаются лепестки, летом висит пыльца. Восемь частиц
   вместо двенадцати — блок ниже разворота, и плотность здесь заметнее.

   Курсор остался, но двигает он не цвет, а сам слой: частицы едва
   отстают от мыши и возвращаются. Смещение ±10 пикселей — заметно
   как жизнь, незаметно как эффект.

   Цвет частиц здесь СВОЙ. У погоды над разворотом он рассчитан на цветной
   кадр видео; на белой карточке снег (#DCE9EF) не виден вовсе. Берём
   основной цвет сезона в половину плотности — виден в любое время года. */
html.fasl .fasl-teach{ position:relative; overflow:hidden; }
html.fasl .fasl-fx-soft{
  z-index:0 !important;
  transform:translate3d(var(--px,0px), var(--py,0px), 0);
  transition:transform 600ms var(--e-out);
}
html.fasl .fasl-fx-soft i{
  background:color-mix(in srgb, var(--season-primary) 50%, transparent) !important;
}
@supports not (background:color-mix(in srgb,#000 10%,#fff)){
  html.fasl .fasl-fx-soft i{ background:var(--season-primary) !important; opacity:.5; }
}
/* Содержимое — поверх частиц. Без этой строки заголовок и карточки
   оказались бы под ними. */
html.fasl .fasl-teach > *:not(.fasl-fx-soft){ position:relative; z-index:1; }

/* Пары карточек «Курсҳои ман / Сертификат гиред» больше нет: обе вели туда
   же, куда ведут кнопки разворота двумя экранами выше, и повторяли их
   мельче. Освободившееся место целиком отдано устодон — тому единственному
   блоку внизу, ради которого человек и долистал: люди, у которых он будет
   учиться. Прятание, а не правка eag-extra.js: разметку рисует прослойка, и
   резать её значило бы разойтись с ней при первом же её обновлении. */
html.fasl #eag-home-bottom .ehb-pair{ display:none !important; }
html.fasl #eag-home-bottom .ehb-teach{ width:100% !important; }
/* Сетка портретов на всю ширину дышит свободнее. */
html.fasl #eag-home-bottom .ehb-tgrid{ gap:18px !important; }

/* Кольцо сезона у портретов устодов. */
html.fasl-home #eag-home-bottom .ehb-t-photo{
  outline:3px solid var(--season-surface) !important;
  outline-offset:2px !important;
  transition:outline-color var(--tm) var(--e-out),
             box-shadow var(--f-d) var(--e-out),
             transform var(--f-d) var(--s-e) !important;
}
html.fasl-home #eag-home-bottom .ehb-t{
  transition:transform var(--f-d) var(--s-e),
             box-shadow var(--f-d) var(--e-out),
             border-color var(--f-d) var(--e-out) !important;
}
@media (hover:hover) and (pointer:fine){
  html.fasl-home #eag-home-bottom .ehb-t:hover{
    transform:translateY(-4px) !important;
    border-color:var(--season-border) !important;
    box-shadow:var(--season-shadow) !important;
  }
  /* Портрет отзывается сам: кольцо загорается сезоном и чуть растёт. Это
     та же связь «сезон — человек», что и везде, только в упор. */
  html.fasl-home #eag-home-bottom .ehb-t:hover .ehb-t-photo{
    outline-color:var(--season-primary) !important;
    box-shadow:0 0 0 8px var(--season-glow) !important;
    transform:scale(1.03) !important;
  }
}
html.fasl-home #eag-home-bottom .ehb-t-body{
  background:linear-gradient(to top,rgba(31,35,28,.9),rgba(31,35,28,.4) 55%,rgba(31,35,28,0)) !important;
}

/* --- САМОДВИЖУЩАЯСЯ ЛЕНТА -------------------------------------------------
   Лента едет сама, и это её замысел: в ней курсы, которых человек не искал,
   но которые ему могут пригодиться. Стоящая лента такого не делает — глаз
   привыкает к первым трём карточкам и дальше не идёт.

   Прежде она была остановлена этим слоем — из-за того, что клоны для
   бесшовной петли прятались (display:none), а без них лента доезжала до
   конца и дёргалась назад. Клоны возвращены, петля снова бесшовная.

   Скорость сезонная. Не украшение: год у поля разного темпа, и лента —
   единственное место на сайте, где темп можно показать буквально. Число
   читает eag-extra.js из data-eag-speed, ставит его fasl.js. Прокрутка
   останавливается под курсором и под пальцем — это уже было в eag-extra и
   работает.
   ------------------------------------------------------------------------ */
html.fasl .eag-roulette-card{
  border-radius:var(--r-card) !important;
  box-shadow:none !important;
  transition:transform var(--f-d) var(--s-e),
             border-color var(--f-d) var(--e-out),
             box-shadow var(--f-d) var(--e-out) !important;
}
@media (hover:hover) and (pointer:fine){
  html.fasl .eag-roulette-card:hover{
    transform:translateY(-3px) !important;
    border-color:var(--season-border) !important;
    box-shadow:var(--season-shadow) !important;
  }
}
html.fasl .eag-car-btn{
  background:var(--f-surface) !important;
  border:1px solid var(--f-rule) !important;
  border-radius:var(--f-r-pill) !important;
  box-shadow:none !important; color:var(--f-ink) !important; top:50% !important;
}

html.fasl .eagw-tip{
  background:var(--s-soft) !important;
  border:1px solid var(--f-rule) !important;
  border-radius:var(--r-3) !important;
  box-shadow:none !important;
  transition:background-color var(--tm) var(--e-out) !important;
}
html.fasl .eagw-tip-head{ color:var(--s-acc) !important; }
html.fasl .eagw-tip-text{ color:var(--f-ink) !important; }

/* Подвал тёмный всегда, но темнота у каждого сезона своя: зимой чернильно-
   синяя, осенью тёплая, летом и весной глубоко-зелёная. Смешивается из
   тёмного тона сезона и почти-чёрного: сезон видно, читаемость белого
   текста не страдает ни в одном из четырёх. */
html.fasl #eag-footer{
  background:color-mix(in srgb, var(--season-secondary) 42%, #121410) !important;
  color:#FCFBF7 !important;
  border-top:1px solid color-mix(in srgb, var(--season-primary) 30%, transparent) !important;
  transition:background-color var(--tm) var(--e-out), border-color var(--tm) var(--e-out) !important;
}
@supports not (background:color-mix(in srgb,#000 10%,#fff)){
  html.fasl #eag-footer{ background:var(--f-foot) !important; }
}
/* Вид ярлыка задан один раз в разделе 6. Здесь только то, что относится к
   тёмному подвалу: цвет и приглушённость. Заглавные буквы и разрядка ушли
   вместе с остальными наклейками — линейка сезона отделяет заголовок колонки
   лучше, чем крик капслоком. */
html.fasl #eag-footer h4{ color:#FCFBF7 !important; opacity:.72; }
/* На тёмном акцент сезона глухой, линейку берём светлее — иначе её просто
   не видно. */
html.fasl #eag-footer h4::before{ background:color-mix(in srgb,var(--s-acc) 55%,#FCFBF7); }
html.fasl #eag-footer a,
html.fasl #eag-footer .eagf-desc,
html.fasl #eag-footer .eagf-c{ color:#FCFBF7 !important; opacity:.86; }
@media (hover:hover) and (pointer:fine){
  html.fasl #eag-footer a:hover{ color:var(--s-acc) !important; opacity:1; }
}
html.fasl #eag-footer .eagf-brand{ font-weight:700 !important; letter-spacing:-.03em !important; color:#FCFBF7 !important; }
html.fasl #eag-footer .eagf-c svg{ color:var(--s-acc) !important; }
html.fasl #eag-footer .eagf-copy{
  border-top:1px solid rgba(252,251,247,.2) !important;
  font-size:12px !important; letter-spacing:0 !important;
  text-transform:none !important; color:#FCFBF7 !important; opacity:.55;
}

/* ============================================================================
   12. ДВИЖЕНИЕ ПО СЕЗОНАМ

   Цвет уже сезонный. Если движение оставить общим, смена сезона читается как
   перекраска, а не как смена времени года. Поэтому у каждого сезона свой
   характер движения, своя длительность и своя кривая.

   ГЕЙТ. Все правила появления начинаются с html.fasl-anim — метки, которую
   fasl.js ставит ТОЛЬКО когда подтвердил, что умеет показать элемент
   обратно. Без неё ключевые кадры отыграли бы и там, где наблюдатель не
   запустился, то есть нарушили бы главное правило слоя: отказ приводит к
   «видно». Гейт здесь не формальность.

   Анимация играет ОДИН раз и после себя ничего не оставляет (fill-mode нет),
   поэтому наведение и нажатие работают ровно так, как описано выше, — их
   человек трогает по сто раз, а появление видит однажды.
   ========================================================================= */

/* --- БАҲОР: прорастание ----------------------------------------------------
   Единственный сезон с перелётом. Рост — единственное движение в году, у
   которого есть инерция: побег проскакивает и осаживается. Origin снизу,
   поэтому элемент именно вырастает, а не выезжает. */
html.fasl[data-season="bahor"] [data-f-reveal]{ transform-origin:bottom center; }
html.fasl-anim[data-season="bahor"] [data-f-reveal][data-shown]{
  animation:faslSprout var(--s-dur) var(--e-spring);
}
@keyframes faslSprout{
  from{ opacity:0; transform:translateY(16px) scaleY(.88); clip-path:inset(100% 0 0 0); }
  60% { clip-path:inset(0 0 0 0); }
  to  { opacity:1; transform:none; clip-path:inset(0 0 0 0); }
}
@media (hover:hover) and (pointer:fine){
  html.fasl-home[data-season="bahor"] [code-path^="src/pages/Home.tsx:304:"]:hover [code-path^="src/pages/Home.tsx:306:"],
  html.fasl-home[data-season="bahor"] [code-path^="src/pages/Home.tsx:324:"]:hover [code-path^="src/pages/Home.tsx:325:"]{
    transform:rotate(-4deg) translateY(-2px) !important;
  }
  html.fasl-home[data-season="bahor"] [code-path^="src/pages/Home.tsx:304:"]:hover svg,
  html.fasl-home[data-season="bahor"] [code-path^="src/pages/Home.tsx:324:"]:hover svg{
    transform:rotate(4deg) scale(1.08) !important;
  }
}

/* --- ТОБИСТОН: зной --------------------------------------------------------
   Появление — как воздух над раскалённым полем: проступает без сдвига, чуть
   расширяясь. Значки медленно пульсируют тёплым ореолом, и у каждого своя
   фаза: синхронная пульсация четырёх кружков выглядит как индикатор
   загрузки, а не как зной. */
html.fasl-anim[data-season="tobiston"] [data-f-reveal][data-shown]{
  animation:faslHaze var(--s-dur) var(--e-out);
}
@keyframes faslHaze{
  from{ opacity:0; transform:scale(.985); filter:blur(3px); }
  to  { opacity:1; transform:none; filter:blur(0); }
}
/* Летнего ореола вокруг значка больше нет. Он появился, когда значок был
   бледным квадратом и ему нужна была жизнь. Теперь на его месте колесо года,
   и третья окружность вокруг той же точки — это уже не мысль, а шум. */

/* ============================================================================
   СЕЗОН ПРИ НАВЕДЕНИИ

   Наводишь на курс — по карточке идёт то, что идёт сейчас за окном: осенью
   сверху падают листья, зимой снег, весной поднимаются лепестки, летом
   наискось проходят лучи. Цвет карточки к этому моменту уже сезонный, а
   движение договаривает, какое сейчас время года.

   ПОЧЕМУ БЕЗ ЕДИНОГО УЗЛА. Карточек на странице бывает два десятка. Заводить
   каждой по десятку частиц значит держать двести узлов ради того, что видно
   на одной карточке под курсором. Здесь вместо узлов — рисунок: несколько
   точек, размноженных по вертикали, и слой, который едет вниз ровно на одну
   плитку. Стык не виден, потому что плитка повторяется, а едет слой
   трансформацией — то есть на видеокарте, без единой перекладки.

   Живёт это только под курсором мыши и только пока на карточку наведено.
   На касании ничего не создаётся: там нет наведения, есть нажатие.

   Рисунок и направление — в переменных сезона, а не в пяти копиях правила:
   иначе следующее место, где понадобится тот же приём, разойдётся с этим. */
html.fasl[data-season="bahor"]{
  --card-fx:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cg transform='translate(15 13) rotate(20) scale(0.42)'%3E%3Cpath d='M0-8c6 3 6 10 0 15-6-5-6-12 0-15z' fill='%23A7C957'/%3E%3C/g%3E%3Cg transform='translate(53 26) rotate(-30) scale(0.32)'%3E%3Cpath d='M0-8c6 3 6 10 0 15-6-5-6-12 0-15z' fill='%237FB069'/%3E%3C/g%3E%3Cg transform='translate(31 47) rotate(12) scale(0.38)'%3E%3Cpath d='M0-8c6 3 6 10 0 15-6-5-6-12 0-15z' fill='%239CCB6A'/%3E%3C/g%3E%3Cg transform='translate(73 59) rotate(-18) scale(0.3)'%3E%3Cpath d='M0-8c6 3 6 10 0 15-6-5-6-12 0-15z' fill='%23A7C957'/%3E%3C/g%3E%3Cg transform='translate(11 71) rotate(28) scale(0.36)'%3E%3Cpath d='M0-8c6 3 6 10 0 15-6-5-6-12 0-15z' fill='%237FB069'/%3E%3C/g%3E%3Cg transform='translate(59 81) rotate(-8) scale(0.28)'%3E%3Cpath d='M0-8c6 3 6 10 0 15-6-5-6-12 0-15z' fill='%239CCB6A'/%3E%3C/g%3E%3C/svg%3E");
  --card-fx-size:90px 90px;
  --card-fx-name:faslCardRise;
  --card-fx-time:6s;
}
/* ЛЕТОМ РИСУНКА НА КАРТОЧКЕ НЕТ.

   Здесь были косые световые полосы. Они ложились поверх снимка и подписей и
   читались как засвеченная фотография, а не как летний вид. Сначала им
   отменили движение — остановленные они стали заметнее прежнего: движущийся
   блик глаз принимает за отсвет, неподвижный за брак.

   Пусто, а не «прозрачно»: слой ::before остаётся на месте, ему просто
   нечего рисовать. Имя и время движения тоже не нужны — двигать нечего. */
html.fasl[data-season="tobiston"]{
  --card-fx:none;
}
html.fasl[data-season="tiramoh"]{
  --card-fx:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cg transform='translate(15 13) rotate(-25) scale(0.42)'%3E%3Cpath d='M0-9c6 4 8 11 0 18-8-7-6-14 0-18z' fill='%23C4703D'/%3E%3C/g%3E%3Cg transform='translate(53 26) rotate(35) scale(0.32)'%3E%3Cpath d='M0-9c6 4 8 11 0 18-8-7-6-14 0-18z' fill='%23D98E5A'/%3E%3C/g%3E%3Cg transform='translate(31 47) rotate(-8) scale(0.38)'%3E%3Cpath d='M0-9c6 4 8 11 0 18-8-7-6-14 0-18z' fill='%23A5522C'/%3E%3C/g%3E%3Cg transform='translate(73 59) rotate(22) scale(0.3)'%3E%3Cpath d='M0-9c6 4 8 11 0 18-8-7-6-14 0-18z' fill='%23C4703D'/%3E%3C/g%3E%3Cg transform='translate(11 71) rotate(-35) scale(0.36)'%3E%3Cpath d='M0-9c6 4 8 11 0 18-8-7-6-14 0-18z' fill='%23D98E5A'/%3E%3C/g%3E%3Cg transform='translate(59 81) rotate(12) scale(0.28)'%3E%3Cpath d='M0-9c6 4 8 11 0 18-8-7-6-14 0-18z' fill='%23A5522C'/%3E%3C/g%3E%3C/svg%3E");
  --card-fx-size:90px 90px;
  --card-fx-name:faslCardFall;
  --card-fx-time:5.5s;
}
/* СНЕЖИНКА, А НЕ ЗВЁЗДОЧКА.

   Здесь были три перекрещенные линии с засечками. У настоящей снежинки от
   каждого луча отходят веточки под шестьдесят градусов — под тем же углом,
   что между лучами. Повторение угла глаз и опознаёт как снег.

   Луч описан один раз и повёрнут шесть раз, поэтому симметрия точная.
   Крупные снежинки с веточками, мелкие простые: подробности видно только у
   ближних, а на шести пикселях веточки сливаются в кляксу.

   Прозрачность подобрана по замеру, а не на глаз: рисунок ложится поверх
   фотографии курса. Прежний добавлял 1.09 % белого, этот — 1.37 % при вдвое
   более крупных снежинках. С полной непрозрачностью выходило 1.9 %, и
   фотография тускнела. */
html.fasl[data-season="zimiston"]{
  --card-fx:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cdefs%3E%3Cg id='a' fill='none' stroke='%23fff' stroke-linecap='round'%3E%3Cpath d='M0 0V-11'/%3E%3Cpath d='M0-3.4l-2.9-1.7M0-3.4l2.9-1.7'/%3E%3Cpath d='M0-6.2l-3.4-2M0-6.2l3.4-2'/%3E%3Cpath d='M0-8.6l-2.1-1.2M0-8.6l2.1-1.2'/%3E%3C/g%3E%3Cg id='k'%3E%3Cuse href='%23a'/%3E%3Cuse href='%23a' transform='rotate(60)'/%3E%3Cuse href='%23a' transform='rotate(120)'/%3E%3Cuse href='%23a' transform='rotate(180)'/%3E%3Cuse href='%23a' transform='rotate(240)'/%3E%3Cuse href='%23a' transform='rotate(300)'/%3E%3Cpath d='M1.6 0L.8 1.39L-.8 1.39L-1.6 0L-.8-1.39L.8-1.39Z' fill='none' stroke='%23fff'/%3E%3C/g%3E%3Cg id='s' fill='none' stroke='%23fff' stroke-linecap='round'%3E%3Cpath d='M0-6V6M-5.2-3L5.2 3M5.2-3L-5.2 3'/%3E%3C/g%3E%3C/defs%3E%3Cg stroke-width='1.3' opacity='.46'%3E%3Cuse href='%23k' transform='translate(25 24) scale(0.72) rotate(7)'/%3E%3Cuse href='%23k' transform='translate(65 60) scale(0.72) rotate(-13)'/%3E%3C/g%3E%3Cg stroke-width='2.1' opacity='.38'%3E%3Cuse href='%23s' transform='translate(72 14) scale(0.32) rotate(15)'/%3E%3Cuse href='%23s' transform='translate(10 60) scale(0.28) rotate(-8)'/%3E%3Cuse href='%23s' transform='translate(46 88) scale(0.3) rotate(25)'/%3E%3C/g%3E%3C/svg%3E");
  --card-fx-size:90px 90px;
  --card-fx-name:faslCardFall;
  --card-fx-time:7s;
}

html.fasl .sb-card,
html.fasl .eag-roulette-card,
html.fasl #eag-home-bottom .ehb-card,
html.fasl #eag-home-bottom .ehb-t,
html.fasl [code-path^="src/pages/Home.tsx:304:"],
html.fasl [code-path^="src/pages/Home.tsx:324:"],
html.fasl .fasl-goal [class~="rounded-3xl"]{
  position:relative;
  overflow:hidden;
}
html.fasl .sb-card::before,
html.fasl .eag-roulette-card::before,
html.fasl #eag-home-bottom .ehb-card::before,
html.fasl #eag-home-bottom .ehb-t::before,
html.fasl [code-path^="src/pages/Home.tsx:304:"]::before,
html.fasl [code-path^="src/pages/Home.tsx:324:"]::before,
html.fasl .fasl-goal [class~="rounded-3xl"]::before{
  content:""; position:absolute; left:-90px; right:-90px; top:-90px; bottom:-90px;
  background-image:var(--card-fx);
  background-size:var(--card-fx-size, 90px 90px);
  background-repeat:repeat;
  opacity:0; pointer-events:none; z-index:3;
  transition:opacity 240ms var(--e-out);
}
@media (hover:hover) and (pointer:fine){
  html.fasl .sb-card:hover::before,
  html.fasl .eag-roulette-card:hover::before,
  html.fasl #eag-home-bottom .ehb-card:hover::before,
  html.fasl #eag-home-bottom .ehb-t:hover::before,
  html.fasl [code-path^="src/pages/Home.tsx:304:"]:hover::before,
  html.fasl [code-path^="src/pages/Home.tsx:324:"]:hover::before,
  html.fasl .fasl-goal [class~="rounded-3xl"]:hover::before{
    opacity:1;
    animation:var(--card-fx-name) var(--card-fx-time) linear infinite;
  }

  /* Отмены движения для лета здесь больше нет: у летней карточки нет самого
     рисунка, и останавливать нечего. Правило, которое ничего не делает,
     хуже отсутствующего — его однажды примут за работающее. */
}
/* Смещение ровно на одну плитку рисунка — 90 пикселей для снега, листьев и
   лепестков, 180 для луча. Стык приходится на границу плитки и потому не
   виден, а сама плитка не зависит от размера карточки: одна и та же погода
   идёт и по узкой карточке в ленте, и по широкой в каталоге.

   Двигается только transform — ни одного свойства с перекладкой. */
@keyframes faslCardFall{ from{ transform:translate3d(0,0,0);     } to{ transform:translate3d(0,90px,0);   } }
@keyframes faslCardRise{ from{ transform:translate3d(0,0,0);     } to{ transform:translate3d(0,-90px,0);  } }
/* Хода faslCardRays здесь больше нет: его звал только летний рисунок, а его
   самого не стало. */

/* --- ТИРАМОҲ: оседание -----------------------------------------------------
   Прилетает сверху с креном и ложится — движение падающего листа. Кривая с
   лёгким перелётом: лист не втыкается, а качнувшись успокаивается. */
html.fasl-anim[data-season="tiramoh"] [data-f-reveal][data-shown]{
  animation:faslFall var(--s-dur) var(--s-e);
}
@keyframes faslFall{
  from{ opacity:0; transform:translateY(-18px) rotate(-2.4deg); }
  to  { opacity:1; transform:none; }
}
@media (hover:hover) and (pointer:fine){
  /* Полградуса — предел, за которым текст начинает выглядеть криво набранным,
     а не наклонённым. */
  html.fasl-home[data-season="tiramoh"] [code-path^="src/pages/Home.tsx:304:"]:hover,
  html.fasl-home[data-season="tiramoh"] [code-path^="src/pages/Home.tsx:324:"]:hover{
    transform:translateY(-3px) rotate(.5deg) !important;
  }
  html.fasl-home[data-season="tiramoh"] [code-path^="src/pages/Home.tsx:304:"]:hover [code-path^="src/pages/Home.tsx:306:"],
  html.fasl-home[data-season="tiramoh"] [code-path^="src/pages/Home.tsx:324:"]:hover [code-path^="src/pages/Home.tsx:325:"]{
    transform:rotate(-9deg) !important;
  }
}

/* --- ЗИМИСТОН: прояснение --------------------------------------------------
   Единственный сезон без перемещения: содержимое выходит из расфокуса, как
   из морозной дымки. Зима — про покой, и двигать в ней ничего не нужно. */
html.fasl-anim[data-season="zimiston"] [data-f-reveal][data-shown]{
  animation:faslThaw var(--s-dur) var(--e-out);
}
@keyframes faslThaw{
  from{ opacity:0; transform:scale(.96); filter:blur(7px) saturate(.6); }
  to  { opacity:1; transform:none; filter:blur(0) saturate(1); }
}
@media (hover:hover) and (pointer:fine){
  html.fasl-home[data-season="zimiston"] [code-path^="src/pages/Home.tsx:304:"]:hover [code-path^="src/pages/Home.tsx:306:"],
  html.fasl-home[data-season="zimiston"] [code-path^="src/pages/Home.tsx:324:"]:hover [code-path^="src/pages/Home.tsx:325:"]{
    transform:scale(1.08) !important;
  }
}

/* Ступенькой, а не всем рядом сразу. Четыре карточки, появившиеся в один
   кадр, читаются как перерисовка страницы; те же четыре с задержкой в
   55 мс — как ряд, который выкладывают слева направо.

   Правило стоит ПОСЛЕ всех четырёх сезонов намеренно: у них animation
   записана сокращённо, а сокращённая запись сбрасывает задержку в ноль.

   --f-i ставит fasl.js и только тем, кто выходит из-за края экрана. Тому,
   что уже на первом экране, задержка не достаётся вовсе: ждать 200 мс
   ради красоты в тот момент, когда человек только открыл сайт, — плохая
   сделка, да и мигание было бы видно. */
html.fasl-anim [data-f-reveal][data-shown]{ animation-delay:calc(var(--f-i,0) * 55ms); }

/* Скрытое состояние существует только под меткой fasl-anim. */
html.fasl-anim [data-f-reveal]:not([data-shown]){ opacity:0; }

/* ============================================================================
   13. ПОГОДА НАД РАЗВОРОТОМ

   Двенадцать элементов, которые вставляет fasl.js. Что именно они изображают,
   решает сезон: лепестки летят вверх, пыльца висит в мареве, листья падают с
   креном, снег опускается ровно.

   Ограничения намеренные. Слой не создаётся ниже 900px и при просьбе убрать
   движение: у основной аудитории телефон, и двенадцать вечно движущихся
   элементов на нём стоят дороже, чем дают. Анимируются только transform и
   opacity — ни одного свойства, вызывающего перекладку.

   ПОЛОСА, РАЗМЕР, ПЕРИОД И СНОС — У КАЖДОГО СВОИ, и берутся они не из
   таблицы на двенадцать строк, а из переменных, которые проставляет fasl.js.
   Разница не косметическая. Таблица задавала всем одинаковый размер, и
   двенадцать одинаковых квадратиков читались как узор — то есть как ошибка
   вёрстки, а не как погода. Разный размер даёт глубину: мелкое кажется
   дальше, поэтому оно и медленнее, и бледнее. Считает эти числа fasl.js
   по номеру элемента, а не случайно: при перерисовке погода не должна
   перетасовываться на глазах.

   Значения по умолчанию в var() — не формальность: если скрипт почему-то не
   доберётся до элементов, слой всё равно будет погодой, а не кучей точек
   в одном углу.
   ========================================================================= */
/* position с !important — не привычка, а починка, и стоит она отдельного
   слова. В стилях бандла есть `.hero-full-x > div{position:relative}`: слой
   погоды — тоже прямой потомок-блок, и по весу селектора (0,1,1 против
   0,1,0) он получал relative вместо своего absolute. Из потока слой при этом
   не выходил и занимал в развороте собственную высоту — разворот вырастал
   ВДВОЕ, а текст уезжал под пустое поле. На глаз это читалось как «разворот
   стал огромным», и причину искали бы долго: высоту никто не задавал. */
html.fasl .fasl-fx{
  position:absolute !important; inset:0; overflow:hidden;
  pointer-events:none; border-radius:inherit;
  /* Тоже с !important, и тоже не от хорошей жизни: в бандле есть
     `.hero-full-x > div > div:first-child{z-index:2}`, а слой погоды стоит в
     сетке первым — и получал двойку, ту же, что у колонки с текстом. Работало
     это только за счёт порядка узлов: текст идёт следом, значит рисуется
     поверх. Перестановка ветки при перерисовке — и частицы оказались бы
     поверх заголовка. Ставим единицу явно: видео 0, погода 1, текст 2. */
  z-index:1 !important;
}
.fasl-fx i{
  position:absolute; display:block;
  left:var(--x,50%);
  width:var(--sz,9px); height:var(--sz,9px);
  background:var(--s-fx); opacity:0;
  animation-duration:var(--dur,11s); animation-delay:var(--del,0s);
  will-change:transform,opacity;
}
/* Пауза, когда разворот ушёл из окна просмотра или вкладка спрятана.
   Композитор продолжает крутить анимацию даже за пределами экрана — это
   кадры, потраченные ни на что, и на слабом телефоне они заметны по нагреву,
   а не по картинке. Метку ставит fasl.js. */
.fasl-fx[data-paused] i{ animation-play-state:paused; }

/* Форма и размер у каждого сезона свои — от общей ступени --sz. Множитель
   здесь, а не в скрипте: снежинка мельче лепестка не по случайности, а по
   природе, и это свойство сезона, а не частицы.

   --drift — снос вбок, --op — общая плотность. Оба приходят из fasl.js
   вместе с полосой и периодом. */

/* Баҳор — лепестки поднимаются: весной всё идёт вверх. */
html.fasl[data-season="bahor"] .fasl-fx i{
  animation-name:faslRise; animation-timing-function:linear; animation-iteration-count:infinite;
  border-radius:50% 0 50% 0;
}
@keyframes faslRise{
  0%  { opacity:0;                          transform:translate3d(0,110%,0) rotate(0deg) scale(.7); }
  12% { opacity:calc(var(--op,1) * .55); }
  88% { opacity:calc(var(--op,1) * .5); }
  100%{ opacity:0;                          transform:translate3d(var(--drift,20px),-20%,0) rotate(220deg) scale(1); }
}

/* Тобистон — пыльца висит в мареве: почти не падает, колышется. */
/* Летние частицы удалены: у лета своя декорация — пшеничное поле
   (season-bg.css). Круглые точки поверх неё читались мусором. */
html.fasl[data-season="tobiston"] .fasl-fx{ display:none }
@keyframes faslDrift{
  0%  { opacity:0;                         transform:translate3d(0,70%,0) scale(.8); }
  20% { opacity:calc(var(--op,1) * .6); }
  50% {                                    transform:translate3d(var(--drift,16px),42%,0) scale(1.1); }
  80% { opacity:calc(var(--op,1) * .45); }
  100%{ opacity:0;                         transform:translate3d(calc(var(--drift,16px) * -.6),18%,0) scale(.85); }
}

/* Тирамоҳ — листья падают с креном и сносом вбок. */
html.fasl[data-season="tiramoh"] .fasl-fx i{
  animation-name:faslLeaf; animation-timing-function:linear; animation-iteration-count:infinite;
  border-radius:60% 0 60% 0;
  width:calc(var(--sz,9px) * 1.2); height:calc(var(--sz,9px) * .85);
}
@keyframes faslLeaf{
  0%  { opacity:0;                         transform:translate3d(0,-25%,0) rotate(-20deg); }
  10% { opacity:calc(var(--op,1) * .62); }
  50% {                                    transform:translate3d(calc(var(--drift,22px) * -1.2),45%,0) rotate(150deg); }
  90% { opacity:calc(var(--op,1) * .5); }
  100%{ opacity:0;                         transform:translate3d(var(--drift,22px),115%,0) rotate(340deg); }
}

/* Зимистон — снежинка, а не точка.

   Точка честнее по цене, но зимой она читается как пыль или как брак
   отрисовки. Форму даёт clip-path: шесть лучей, вырезанных из квадрата, — ни
   картинки, ни лишнего узла, всё та же одна фигура на слое видеокарты.

   Размер здесь больше, чем у прочих сезонов: у шестилучевой звезды на
   четырёх пикселях лучи не читаются, и она снова превращается в точку. */
html.fasl[data-season="zimiston"] .fasl-fx i{
  animation-name:faslSnow; animation-timing-function:linear; animation-iteration-count:infinite;
  border-radius:0;
  width:calc(var(--sz,9px) * 1.15); height:calc(var(--sz,9px) * 1.15);
  clip-path:polygon(
    50% 0%,   56% 34%,  76% 8%,   62% 40%,
    96% 26%,  68% 48%, 100% 50%,  68% 52%,
    96% 74%,  62% 60%,  76% 92%,  56% 66%,
    50% 100%, 44% 66%,  24% 92%,  38% 60%,
     4% 74%,  32% 52%,   0% 50%,  32% 48%,
     4% 26%,  38% 40%,  24% 8%,   44% 34%);
}
@supports not (clip-path:polygon(0 0)){
  html.fasl[data-season="zimiston"] .fasl-fx i{ border-radius:50%; }
}
/* Полоборота за весь путь — снежинка не крутится волчком, а лениво
   поворачивается, как настоящая. Быстрее — и лучи сливаются в круг, то есть
   форма, ради которой всё затевалось, пропадает. */
@keyframes faslSnow{
  0%  { opacity:0;                         transform:translate3d(0,-20%,0) rotate(0deg); }
  14% { opacity:calc(var(--op,1) * .75); }
  50% {                                    transform:translate3d(calc(var(--drift,10px) * .5),45%,0) rotate(90deg); }
  86% { opacity:calc(var(--op,1) * .6); }
  100%{ opacity:0;                         transform:translate3d(calc(var(--drift,10px) * -.4),115%,0) rotate(180deg); }
}

/* Разворот обрезает погоду по своей форме, содержимое лежит поверх неё.

   :not(.fasl-fx) — по той же причине, что и !important выше. Это правило
   тоже раздаёт position:relative всем прямым потомкам-блокам и тоже накрыло
   бы слой погоды, только с ещё большим весом. Одного лечения хватило бы, но
   лечить нужно оба места: следующий, кто уберёт !important как «лишнее»,
   иначе получит ту же двойную высоту и не поймёт, откуда она. */
html.fasl-home .hero-full-x > div:not(.fasl-fx){ position:relative; z-index:2; }
@media (max-width:899px){ .fasl-fx{ display:none } }

/* ============================================================================
   14. ПЕРЕКЛЮЧАТЕЛЬ СЕЗОНОВ

   Разметку рисует fasl.js. Здесь — единственное место слоя, где движение
   сделано ради самого движения, и на то есть причина: это орган управления
   всей темой. Человек нажимает и должен УВИДЕТЬ, что переключил год, а не
   догадаться об этом по перекрашенной странице.

   КАК УСТРОЕНО. Два одинаковых ряда, один поверх другого.

     нижний   обычный: тёмный текст, точка в цвете своего сезона;
     верхний  тот же ряд, но целиком в цвете выбранного сезона — заливка,
              белый текст, белая точка.

   Верхний обрезан по clip-path до одной четверти — до выбранной. Эта
   четверть и есть «пилюля выбора»: отдельного узла под неё нет.

   ЗАЧЕМ ТАК, А НЕ ПРОСТО ПЕРЕКРАСИТЬ КНОПКУ. Переход цвета текста нельзя
   свести с переездом подложки: подложка уже наехала, а буквы ещё тёмные, или
   наоборот. Разными длительностями это лечится только на глаз и только для
   одной пары соседних кнопок. Обрезка снимает вопрос совсем — цвет буквы
   меняется ровно в тот кадр, когда через неё проходит край заливки, потому
   что это и есть один край.

   Ширины равные (flex:1), поэтому четверть считается арифметикой, а не
   измерением узлов: ничего не ломается при смене шрифта, языка и масштаба.
   ========================================================================= */
/* Отступы вставке нужны только под разворотом: там она стоит в колонке без
   собственных полей, и без этих строк рейка выехала бы к самому краю окна,
   а всё остальное осталось бы по линии. Внутри колонки поля уже есть, и
   добавлять их второй раз значило бы сдвинуть рейку относительно соседей. */
#fasl-seasons-wrap[data-at="hero"]{ padding:0 16px; margin-top:26px; }
@media (min-width:1024px){ #fasl-seasons-wrap[data-at="hero"]{ padding:0 32px; } }

.fasl-seasons{
  --i:0;                      /* страховка: без неё пропавший номер сделал бы
                                 clip-path недействительным, и заливка накрыла
                                 бы все четыре сезона сразу */
  position:relative; display:flex; width:fit-content; max-width:100%;
  padding:4px; margin:0 0 14px;
  border:1px solid var(--f-rule); background:var(--f-surface);
  border-radius:calc(var(--r-btn) + 4px);
  transition:transform var(--f-fast) var(--e-out),
             border-color var(--tm) var(--e-out),
             border-radius var(--tm) var(--e-out);
}
.fasl-seasons .fasl-row{ display:flex; flex:1 1 auto; min-width:0; }
.fasl-seasons .fasl-row > *{
  flex:1 1 0; min-width:0;
  display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 clamp(10px,2.2vw,22px);
  font:600 13.5px/1 var(--f-sans); white-space:nowrap;
  border:0; background:none; border-radius:var(--r-btn);
  color:var(--f-ink-2); cursor:pointer;
  transition:color var(--f-d) var(--e-out);
}
.fasl-seasons .fasl-row > *::before{
  content:""; flex:none; width:8px; height:8px; border-radius:999px;
  background:var(--dot);
}
.fasl-seasons [data-season="bahor"]   { --dot:#5B8C3E }
.fasl-seasons [data-season="tobiston"]{ --dot:#D08A18 }
.fasl-seasons [data-season="tiramoh"] { --dot:#A5522C }
.fasl-seasons [data-season="zimiston"]{ --dot:#4A6572 }

/* Верхний ряд. Он же выделение выбранного. --i ставит fasl.js — номер
   сезона, 0…3. Четверть считается от него.

   round в inset() обязателен: без него у заливки прямые углы, и она
   выбивается из формы сезона ровно там, где сезон и выбирают. */
.fasl-seasons .fasl-row-on{
  position:absolute; inset:4px;
  background:var(--s-acc); color:#fff;
  border-radius:var(--r-btn);
  pointer-events:none; user-select:none;
  clip-path:inset(0 calc(100% - (var(--i) + 1) * 25%) 0 calc(var(--i) * 25%) round var(--r-btn));
  transition:clip-path 260ms var(--e-out),
             background-color var(--tm) var(--e-out),
             border-radius var(--tm) var(--e-out);
}
.fasl-seasons .fasl-row-on > *{ color:#fff; }
.fasl-seasons .fasl-row-on > *::before{ background:#fff; }

/* Нажатие. Масштабируется вся рейка, а не кнопка: кнопка уехала бы из-под
   обрезанного слоя, и на 150 мс выделение разъехалось бы с надписью. */
.fasl-seasons:has(button:active){ transform:scale(.985); }

.fasl-seasons button:focus-visible{ outline:2px solid var(--s-deep); outline-offset:3px; }
@media (hover:hover) and (pointer:fine){
  .fasl-seasons button:hover{ color:var(--s-deep); }
}

/* Узкий экран: рейка на всю ширину, иначе четыре названия не помещаются и
   ряд переносится — а перенесённый ряд ломает арифметику четвертей. */
@media (max-width:640px){
  .fasl-seasons{ width:100%; }
  .fasl-seasons .fasl-row > *{ font-size:12.5px; padding:0 6px; gap:6px; }
  .fasl-seasons .fasl-row > *::before{ width:7px; height:7px; }
}
/* Совсем узкие. Четверть от 320px — это 80 пикселей на всё, а «Зимистон»
   при 12.5px занимает 57 плюс точка плюс зазор. Считано, а не подобрано на
   глаз: без этих трёх строк слово вылезает за свою четверть и наезжает на
   соседнее. Высота нажимаемой области остаётся 44 — она к размеру букв
   отношения не имеет. */
@media (max-width:380px){
  .fasl-seasons .fasl-row > *{ font-size:11.5px; padding:0 2px; gap:4px; }
  .fasl-seasons .fasl-row > *::before{ width:6px; height:6px; }
}

/* Пояснение под рейкой. Текст меняется вместе с сезоном, и подменяется он
   не мгновенно: fasl.js на время подмены ставит data-swap, и строка уходит
   в лёгкое размытие. Размытие здесь работает как замазка — без него глаз
   видит две разные надписи, наложенные друг на друга, вместо одной
   меняющейся. */
.fasl-note{
  background:var(--s-soft); border-radius:var(--r-3); padding:16px 20px; margin:0 0 26px;
  font:15px/1.5 var(--f-sans); color:var(--f-ink);
  transition:background-color var(--tm) var(--e-out),
             border-radius var(--tm) var(--e-out),
             opacity 160ms var(--e-out), filter 160ms var(--e-out);
}
.fasl-note[data-swap]{ opacity:.35; filter:blur(3px); }
.fasl-note b{ font-weight:700 }
.fasl-note span{ color:var(--f-ink-2) }

/* ============================================================================
   15. ОТЗЫВЧИВОСТЬ
   ========================================================================= */
@media (max-width:1023px){
  html.fasl .top-nav-x{ border-right:none !important; border-bottom:1px solid var(--f-rule) !important; }
  html.fasl-home [code-path^="src/pages/Home.tsx:266:"]{ gap:var(--f-3) !important; }
}

/* ============================================================================
   16. ПРОСЬБА УБРАТЬ ДВИЖЕНИЕ

   Reduced motion — это меньше и мягче, а не ноль: цвет и прозрачность
   остаются, потому что они помогают понять страницу. Уходит всё, что
   перемещается, вращается и не заканчивается.
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  html.fasl .fasl-fx{ display:none; }
  /* Колесо года остаётся — оно показывает сезон, а не движется. Уходит
     только его проворот при наведении. */
  html.fasl [code-path^="src/pages/Home.tsx:306:"]::before,
  html.fasl [code-path^="src/pages/Home.tsx:325:"]::before{ transition:none; transform:none !important; }
  /* Сезон на карточке при наведении — это движение, и его нет совсем. */
  html.fasl .sb-card::before,
  html.fasl .eag-roulette-card::before,
  html.fasl #eag-home-bottom .ehb-card::before,
  html.fasl #eag-home-bottom .ehb-t::before,
  html.fasl [code-path^="src/pages/Home.tsx:304:"]::before,
  html.fasl [code-path^="src/pages/Home.tsx:324:"]::before,
  html.fasl .fasl-goal [class~="rounded-3xl"]::before{ display:none !important; }
  html.fasl [data-f-reveal]{ opacity:1 !important; transform:none !important; animation:none !important; }
  html.fasl .sb-card::after{ display:none !important; }
  html.fasl .sb-card:hover,
  html.fasl [code-path^="src/pages/Home.tsx:304:"]:hover,
  html.fasl [code-path^="src/pages/Home.tsx:324:"]:hover{ transform:none !important; }

  /* Переключатель: выделение встаёт на место без переезда. Само выделение
     остаётся — это единственный признак того, какой сезон выбран, и убрать
     его значило бы сломать орган управления, а не убрать движение. */
  html.fasl .fasl-seasons .fasl-row-on{ transition:none; }
  html.fasl .fasl-seasons:has(button:active){ transform:none; }

  /* Подмена пояснения — без размытия: текст и цвет меняются, движения нет. */
  html.fasl .fasl-note{ transition:background-color var(--tm) linear; }
  html.fasl .fasl-note[data-swap]{ opacity:1; filter:none; }

  /* Сцены в четырёх карточках замирают в спокойном виде: без роста, без
     ветра, без сигнала — но и без пустоты, всё видно сразу. */
  html.fasl .fasl-scene *{ animation:none !important; transition:none !important; }
  html.fasl .s3-fact{ opacity:1; transform:none; }

  /* Оседание разворота при смене сезона — это движение, и оно уходит. */
  html.fasl-turn .hero-full-x{ animation:none; }
}

/* ============================================================================
   ШАПКА: ОКОНЧАТЕЛЬНО БЕЛАЯ. Последнее слово в файле — намеренно.

   Полоса наверху собирается из ДВУХ узлов: sticky-шапка с поиском и рельса
   top-nav-x, которую eag-extra переставляет в верхнюю панель. Красить их
   нужно ОДИНАКОВО и ОДНИМ местом: половина прежних «полосерых» состояний —
   это когда один узел уже белый, а второй ещё кремовый, полупрозрачный или
   в переходе. Здесь оба получают один плоский белый, без картинок, без
   размытия, без теней и без переходов, — и правило стоит последним, чтобы
   выигрывать у всего, что появится выше.
   ========================================================================= */
html.fasl header[class*="bg-[#F5F3EB]"],
html.fasl header.eag-topbar-x,
html.fasl .top-nav-x{
  background:#FFFFFF !important;
  background-image:none !important;
  -webkit-backdrop-filter:none !important;
          backdrop-filter:none !important;
  box-shadow:none !important;
  filter:none !important;
  transition:none !important;
}
html.fasl header[class*="bg-[#F5F3EB]"],
html.fasl header.eag-topbar-x{
  border-bottom:1px solid var(--f-rule) !important;
}

/* ============================================================================
   ГРАДИЕНТ ИЗ БАНДЛА — ПОГАШЕН.

   Серый верх шапки приходил не из этого файла, а из собранного бандла:
   у него есть режим «верхушка главной» (body без метки eag-scrolled), в
   котором панель прозрачная, поверх неё лежит тёмный градиент-затемнение
   (.top-nav-x:before), а подписи перекрашены в белый — расчёт на то, что
   панель стоит прямо на видео. В нашей теме панель белая всегда, и этот
   режим давал ровно то, что видно на снимке: серое сверху, белое снизу.

   Правила ниже сильнее бандловских по специфичности и стоят позже них,
   поэтому выигрывают оба яруса каскада. Гасится только режим верхушки —
   всё остальное поведение бандла не тронуто.
   ========================================================================= */
html.fasl body:not(.eag-scrolled) .top-nav-x{
  background:#FFFFFF !important;
  border-bottom-color:var(--f-rule) !important;
}
html.fasl body:not(.eag-scrolled) .top-nav-x::before{
  content:none !important;
  display:none !important;
}
html.fasl body:not(.eag-scrolled) .top-nav-x [class*="text-[#1F3D26]"],
html.fasl body:not(.eag-scrolled) header.eag-topbar-x [class*="text-[#3C4A37]"]{
  color:var(--f-ink) !important;
  text-shadow:none !important;
}
html.fasl body:not(.eag-scrolled) .top-nav-x nav a{
  color:var(--f-ink-2) !important;
  text-shadow:none !important;
}
html.fasl body:not(.eag-scrolled) .top-nav-x nav a[class*="bg-[#E8F3E1]"]{
  background:var(--season-surface) !important;
  color:var(--season-primary) !important;
}

/* ============================================================================
   ЧАСТИЦЫ НА КАРТОЧКАХ РЕКОМЕНДАЦИЙ — ВЫКЛЮЧЕНО НАВСЕГДА.

   Это правило ТЕРЯЛОСЬ УЖЕ ДВАЖДЫ: оно жило внутри секции стилей сцен, и
   каждая замена той секции целиком уносила его с собой — листья при
   наведении возвращались, хотя их никто не звал. Теперь оно стоит в самом
   конце файла, вне любых заменяемых регионов, рядом с финальным правилом
   шапки. НЕ ПЕРЕНОСИТЬ ВНУТРЬ СЕКЦИЙ.

   У этих четырёх карточек свои сцены — планшет, устод, сертификат, чат.
   Слой падающих листьев поверх них читается мусором. */
html.fasl [code-path^="src/pages/Home.tsx:297:"] [code-path^="src/pages/Home.tsx:304:"]::before,
html.fasl section[code-path^="src/pages/Home.tsx:317:"] > *::before{
  content:none !important;
  display:none !important;
  animation:none !important;
}
/* Панели статистики (:317) добавлены сюда же: при наведении на них тот же
   слой сыпал листья, лучи и снег поверх чисел. У панелей свой язык жизни —
   искры на линиях и наклон ростка, погода им не нужна. */

/* ============================================================================
   КАРТОЧКИ ЦЕЛИ — ЧЕТЫРЕ ФОТОГРАФИИ ГОДА

   Снимок занимает карточку целиком, текст лежит поверх под градиентом.
   Ни названия сезона, ни номера, ни стрелки, ни кнопки: всё это повторяло
   бы то, что и так видно на фотографии.

   ГЛУБИНА. Снимок стоит двумя слоями: дальний — весь кадр, ближний — его
   нижняя треть по линии горизонта. Ближний ходит за курсором вдвое
   быстрее — так плоский файл получает объём. Смещения маленькие (до 6 px):
   больше — и шов между слоями станет заметен.

   ПОКОЙ. У каждой карточки своя жизнь: всходы дышат тёплым светом, летнее
   поле ведёт ветром, на жатве плывёт пыль, зимой идёт снег. Всё очень
   медленно и только на transform/opacity.
   ========================================================================= */
html.fasl .fasl-goal .fasl-fs-card{
  position:relative;
  padding:0 !important;
  overflow:hidden;
  min-height:224px;
  border:0 !important;
  background:#1B2A1D !important;
  isolation:isolate;
  animation:none !important;
}
/* Наследство рисованного дерева: полоса земли внизу карточки и годовой
   перекрас неба в её фоне. Под фотографией и то и другое лишнее —
   земля закрывала нижнюю половину снимка сплошным цветом. Правила
   остались на месте (вернуть дерево — снять эти две строки). */
html.fasl .fasl-goal .fasl-fs-card::after{ content:none !important; display:none !important; }
html.fasl .fasl-goal .fasl-fs-card::before{ content:none !important; display:none !important; }
/* Проявление — собственной анимацией, не переключением класса из
   скрипта: кадр rAF в фоновой вкладке может не прийти вовсе, и карточка
   осталась бы чёрной. Анимация с fill-mode both отрабатывает всегда. */
html.fasl .fasl-goal .fasl-fs{
  position:absolute; inset:0; z-index:0;
  animation:faslFsIn 950ms cubic-bezier(.22,1,.36,1) var(--rv,0ms) both;
}
@keyframes faslFsIn{
  from{ opacity:0; transform:scale(1.045); }
  to  { opacity:1; transform:none; }
}

/* дальний слой — весь кадр */
html.fasl .fasl-goal .fs-far,
html.fasl .fasl-goal .fs-near{
  position:absolute; inset:-6%;
  background-image:var(--shot);
  background-size:cover; background-position:50% 42%;
  will-change:transform;
}
html.fasl .fasl-goal .fs-far{
  transform:translate3d(calc(var(--tx,0) * 2.5px), calc(var(--ty,0) * 1.4px), 0) scale(1.02);
  transition:transform 700ms cubic-bezier(.22,1,.36,1);
}
/* ближний — нижняя треть кадра, обрезанная по горизонту */
html.fasl .fasl-goal .fs-near{
  clip-path:inset(58% 0 0 0);
  transform:translate3d(calc(var(--tx,0) * 6px), calc(var(--ty,0) * 3px), 0) scale(1.05);
  transition:transform 700ms cubic-bezier(.22,1,.36,1);
}
/* градиент под текст: сверху плотно, к низу сходит на нет */
html.fasl .fasl-goal .fs-grad{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(12,22,14,.82) 0%, rgba(12,22,14,.55) 34%,
                                     rgba(12,22,14,.12) 62%, rgba(12,22,14,.24) 100%);
  transition:opacity 600ms cubic-bezier(.22,1,.36,1);
}
html.fasl .fasl-goal .fs-air{ position:absolute; inset:0; pointer-events:none; }

/* текст поверх снимка — тот же самый, только читаемый на фотографии */
html.fasl .fasl-goal .fasl-fs-card > p{
  position:relative; z-index:2;
  margin:0; padding:20px 22px 0;
  color:#FFFFFF !important;
  text-shadow:0 1px 10px rgba(10,20,12,.55);
  animation:faslFsTextIn 750ms cubic-bezier(.22,1,.36,1) calc(var(--rv,0ms) + 200ms) both;
}
@keyframes faslFsTextIn{
  from{ opacity:0; transform:translateY(7px); }
  to  { opacity:1; transform:none; }
}
/* Значок-кружок бандла спрятан: на фотографии он читается наклейкой.
   Узел не удаляем — React вернул бы его первой же перерисовкой. */
html.fasl .fasl-goal .fasl-fs-card > div[class*="rounded-full"]{ display:none !important; }

/* --- ПОКОЙ: У КАЖДОЙ КАРТОЧКИ СВОЙ РИТМ ----------------------------------- */
html.fasl .fasl-goal [data-shot="bahor"] .fs-air{
  background:radial-gradient(120% 80% at 18% 22%, rgba(255,231,170,.28), transparent 62%);
  animation:faslFsDawn 12s ease-in-out infinite alternate;
}
@keyframes faslFsDawn{ from{ opacity:.45; } to{ opacity:1; } }

html.fasl .fasl-goal [data-shot="tobiston"] .fs-near{
  animation:faslFsWind 16s ease-in-out infinite alternate;
}
@keyframes faslFsWind{
  from{ transform:translate3d(calc(var(--tx,0) * 6px - 2px), calc(var(--ty,0) * 3px), 0) scale(1.05); }
  to  { transform:translate3d(calc(var(--tx,0) * 6px + 2px), calc(var(--ty,0) * 3px), 0) scale(1.055); }
}

html.fasl .fasl-goal [data-shot="tiramoh"] .fs-air{
  background:
    radial-gradient(38% 26% at 30% 62%, rgba(255,214,150,.3), transparent 70%),
    radial-gradient(30% 20% at 62% 70%, rgba(255,226,178,.22), transparent 72%);
  animation:faslFsDust 22s linear infinite alternate;
}
@keyframes faslFsDust{
  from{ transform:translate3d(-4%, 1%, 0); opacity:.55; }
  to  { transform:translate3d(6%, -2%, 0); opacity:1; }
}

/* снег: слой вдвое выше карточки, едет ровно на свою половину и потому
   замыкается без стыка */
html.fasl .fasl-goal [data-shot="zimiston"] .fs-air{
  top:-100%; height:200%;
  background-image:
    radial-gradient(1.6px 1.6px at 14% 6%,  rgba(255,255,255,.95), transparent 60%),
    radial-gradient(1.4px 1.4px at 42% 12%, rgba(255,255,255,.8),  transparent 60%),
    radial-gradient(1.8px 1.8px at 68% 4%,  rgba(255,255,255,.9),  transparent 60%),
    radial-gradient(1.3px 1.3px at 86% 15%, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(1.5px 1.5px at 26% 22%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(1.7px 1.7px at 56% 30%, rgba(255,255,255,.8),  transparent 60%),
    radial-gradient(1.4px 1.4px at 78% 38%, rgba(255,255,255,.7),  transparent 60%),
    radial-gradient(1.6px 1.6px at 8% 44%,  rgba(255,255,255,.85), transparent 60%);
  background-size:100% 50%;
  animation:faslFsSnow 18s linear infinite;
}
@keyframes faslFsSnow{ from{ transform:translateY(-50%); } to{ transform:translateY(0); } }

/* --- НАВЕДЕНИЕ: КИНОШНЫЙ НАЕЗД -------------------------------------------- */
@media (hover:hover) and (pointer:fine){
  html.fasl .fasl-goal .fasl-fs-card{
    transition:transform 600ms cubic-bezier(.22,1,.36,1), box-shadow 600ms cubic-bezier(.22,1,.36,1);
  }
  html.fasl .fasl-goal .fasl-fs-card:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 40px rgba(20,34,20,.28) !important;
  }
  html.fasl .fasl-goal .fasl-fs-card:hover .fs-far{
    transform:translate3d(calc(var(--tx,0) * 2.5px), calc(var(--ty,0) * 1.4px), 0) scale(1.07);
    filter:brightness(1.06) saturate(1.06);
  }
  html.fasl .fasl-goal .fasl-fs-card:hover .fs-near{
    transform:translate3d(calc(var(--tx,0) * 6px), calc(var(--ty,0) * 3px), 0) scale(1.11);
    filter:brightness(1.08) saturate(1.06);
  }
  html.fasl .fasl-goal .fasl-fs-card:hover .fs-grad{ opacity:.82; }
}

@media (prefers-reduced-motion:reduce){
  html.fasl .fasl-goal .fasl-fs,
  html.fasl .fasl-goal .fasl-fs-card > p{ animation:none !important; opacity:1 !important; transform:none !important; }
  html.fasl .fasl-goal .fs-air,
  html.fasl .fasl-goal .fs-near{ animation:none !important; }
}

/* ============================================================================
   СЕРТИФИКАТЫ — ТИХАЯ КАРУСЕЛЬ

   Сначала карточка показывает только золотой сертификат и ничего больше:
   ни стрелок, ни точек поверх листа. Стрелки и точки проявляются при
   наведении — интерактивность открывается тогда, когда за ней тянутся.

   ОДНО ПРАВИЛО НА ОБА НАПРАВЛЕНИЯ. Знак --dir ставит скрипт: уходящий лист
   идёт на -26px * dir, приходящий ждёт на +26px * dir. «Вперёд» и «назад»
   не могут разъехаться, потому что описаны одной строкой.

   Все три снимка лежат в разметке с первого кадра: браузер грузит их
   заранее, и между листами нет белой вспышки. Слои абсолютные — высота
   карточки не меняется ни при переключении, ни при появлении стрелок.
   ========================================================================= */
html.fasl-home .fasl-s3d--certs .cc{ perspective:none; }
html.fasl-home .cc-track{ position:absolute; inset:0; }
html.fasl-home .cc-slide{
  position:absolute; inset:0; margin:0;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transform:translateX(calc(var(--dir,1) * 26px)) scale(.965);
  transition:opacity 540ms cubic-bezier(.22,1,.36,1),
             transform 560ms cubic-bezier(.22,1,.36,1);
  will-change:transform, opacity;
}
html.fasl-home .cc-slide.is-on{ opacity:1; transform:none; pointer-events:auto; }
html.fasl-home .cc-slide.is-off{
  opacity:0;
  transform:translateX(calc(var(--dir,1) * -26px)) scale(.965);
}
html.fasl-home .cc-slide img{
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  border-radius:4px; display:block;
  box-shadow:0 6px 16px rgba(30,40,28,.22), 0 1px 3px rgba(30,40,28,.18);
  transition:transform 500ms cubic-bezier(.22,1,.36,1), box-shadow 500ms cubic-bezier(.22,1,.36,1);
}

/* стрелки: круглые, маленькие, до наведения их нет */
html.fasl-home .cc-nav{
  position:absolute; top:50%; z-index:3;
  width:22px; height:22px; margin-top:-11px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#2F4F1F; cursor:pointer;
  /* Не .86: ровно этим белым когда-то была плёнка над видео разворота, и
     страж в тестах ищет это значение по всему файлу, а не только в правилах
     разворота. Совпадение случайное, но менять проще стрелку. */
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:0 2px 8px rgba(30,40,28,.22);
  opacity:0;
  transition:opacity 320ms cubic-bezier(.22,1,.36,1),
             transform 320ms cubic-bezier(.22,1,.36,1),
             background 220ms var(--e-out), box-shadow 220ms var(--e-out);
}
html.fasl-home .cc-nav svg{ width:11px; height:11px; }
html.fasl-home .cc-nav--prev{ left:2px;  transform:translateX(-5px); }
html.fasl-home .cc-nav--next{ right:2px; transform:translateX(5px); }
@media (hover:hover) and (pointer:fine){
  html.fasl-home [code-path^="src/pages/Home.tsx:304:"]:hover .cc-nav{ opacity:1; transform:none; }
  html.fasl-home .cc-nav:hover{
    background:#FFFFFF; box-shadow:0 4px 12px rgba(30,40,28,.3);
    transform:scale(1.12);
  }
}
/* На пальцевом вводе наведения нет — стрелки видны сразу, иначе о них
   никто не узнает; листать можно и смахиванием. */
@media (hover:none), (pointer:coarse){
  html.fasl-home .cc-nav{ opacity:.92; transform:none; }
}
html.fasl-home .cc-nav:focus-visible{
  opacity:1; transform:none;
  outline:2px solid var(--season-primary); outline-offset:2px;
}

/* Точки-индикатор убраны по решению: три листа человек и так пролистывает
   стрелками, а ряд точек под сертификатом читался мусором. */

@media (prefers-reduced-motion:reduce){
  html.fasl-home .cc-slide{ transition:none !important; transform:none !important; }
  html.fasl-home .cc-nav{ opacity:1 !important; transform:none !important; }
}

/* ============================================================================
   КАРТОЧКА-СЕРТИФИКАТ: СНИМОК ВО ВСЮ КАРТОЧКУ, ТЕКСТ ПОВЕРХ

   Сертификат показан ЦЕЛИКОМ — contain, ни одного обрезанного пикселя:
   видны и медаль, и имя, и дата, и номер, и QR, и края документа. Поля,
   которые при этом неизбежно остаются (лист — 1.53:1, карточка почти
   квадратная), заполнены не белой панелью, а той же фотографией: копией
   в размытии на весь фон. Карточка читается одним куском.

   Размывается ТОЛЬКО подложка. Сам сертификат — резкий, в исходном
   разрешении: золото 1100px, серебро и бронза в своём родном 725px
   (растягивать их вверх нечем и незачем).

   Текст лежит поверх снимка внизу слева, на мягком кремовом сходе —
   он светлый, поэтому фирменный зелёный остаётся зелёным, а не белым.
   Сертификат текст не задевает: лист стоит выше полосы с подписью.
   ========================================================================= */
html.fasl-home .fasl-photo-card{
  /* Полоса под подпись. Снимок в неё не заходит: иначе заголовок ложится
     поверх сертификата и закрывает его нижнюю часть с QR.

     ВНИМАНИЕ ПРО ЕДИНИЦЫ. У <main> в бандле стоит zoom:1.25 на десктопе,
     поэтому КАЖДЫЙ пиксель здесь выходит на экран как 1.25. Полоса в 84px
     занимает на экране 105px — считать надо в этих, «мелких» пикселях,
     иначе снимок ужимается впустую. Именно на этом он и терял четверть
     своего размера. */
  --cap:84px;
  /* Высота задана явно. Пока хотя бы одна карточка ряда оставалась обычной,
     ряд держался её сценой в потоке; теперь сцены у всех абсолютные, и без
     этого числа карточки схлопнулись бы до высоты подписи. 198px — те же
     247px на экране: у <main> zoom 1.25. */
  /* Высота задана явно: сцены у всех карточек абсолютные, и без этого числа
     они схлопнулись бы до высоты подписи. 198px — это 248px на экране: у
     <main> zoom 1.25. */
  min-height:198px;
  position:relative;
  padding:0 !important;
  overflow:hidden;
  background:#EFEDE4 !important;
  display:flex !important;
  flex-direction:column;
  justify-content:flex-end;
}
html.fasl-home .fasl-photo-card > .fasl-scene{
  position:absolute; inset:0;
  width:auto; max-width:none; height:auto; margin:0;
}
html.fasl-home .fasl-photo-card .cc,
html.fasl-home .fasl-photo-card .cs{ position:absolute; inset:0; }
/* Подписи разной высоты: у курсов описание в три строки, у сертификатов в
   одну. Одна полоса на обе съедала бы у сертификата сорок лишних пикселей,
   а лист и так небольшой. */
html.fasl-home .fasl-photo-card:has(.fasl-s3d--certs){ --cap:62px; }
html.fasl-home .fasl-photo-card:has(.fasl-s3d--courses){ --cap:92px; }
/* Плотный сход над кадром курсов УБРАН: он затуманивал нижнюю треть
   снимка. Вместо него кадр поднят к самому верху карточки — тогда подпись
   заходит на него всего на пару пикселей, и хватает общего мягкого схода. */
/* Кремовый сход под подписью — на самой карточке, а не внутри сцены: так он
   один на обе карточки и не зависит от того, из чего собрана сцена. */
/* КРЕМОВЫЙ СХОД УБРАН ПОЛНОСТЬЮ: он и был тем «туманом», из-за которого
   нижняя треть снимка гасла. Снимок теперь виден целиком, от края до края.

   Читаемость подписи держит не полотно поверх фотографии, а ореол вокруг
   самих букв: он лежит по контуру глифов и не закрывает ни пикселя
   изображения. Ниже, в правилах подписи. */

/* подложка: та же фотография, размытая до фактуры */
/* Размытая подложка была нужна, пока снимок не доставал до краёв и вокруг
   него оставались поля. Теперь он заполняет карточку целиком — подложке
   нечего заполнять. */
html.fasl-home .cc-bg{
  display:none;
  position:absolute; inset:0;
  background-size:cover; background-position:50% 50%;
  filter:blur(16px) saturate(1.06) brightness(.94);
  transform:scale(1.16);
  pointer-events:none;
}
/* сам лист: contain, без тени и скруглений — он должен сливаться с
   карточкой, а не выглядеть фотографией в рамке внутри рамки */
html.fasl-home .cc-slide{
  /* Полей нет вовсе: снимок занимает карточку целиком, до самых скруглённых
     краёв. Подпись лежит поверх него на кремовом сходе. */
  align-items:stretch; justify-content:stretch;
  padding:0;
}
html.fasl-home .cc-slide img{
  position:relative;
  /* COVER, а не contain — по решению: снимок должен заполнять карточку без
     пустых полей. Плата за это названа прямо: лист шире карточки по
     пропорции, поэтому у него срезаются бока. Вернуть документ целиком —
     поставить здесь contain обратно. */
  width:100%; height:100%;
  object-fit:cover; object-position:50% 50%;
  /* Ни тени, ни скруглений: любой контур вокруг листа читается второй
     рамкой внутри карточки. Лист отделяет от подложки её собственное
     размытие. Тень гасим явно — её ставит правило карусели выше, когда
     лист ещё был маленькой карточкой внутри карточки. */
  border-radius:0;
  box-shadow:none;
  transition:transform 500ms cubic-bezier(.22,1,.36,1);
}

/* Сход перенесён на саму карточку (.fasl-photo-card::after) — он общий для
   курсов и сертификатов. Правило оставлено пустым намеренно: разметка сцены
   сертификата всё ещё содержит .cc-shade, и лишний слой ничего не красит. */
html.fasl-home .cc-shade{ display:none; }

/* подпись карточки — поверх снимка, а не в белой полосе под ним */
html.fasl-home .fasl-photo-card > p{
  position:relative; z-index:4;
  margin:0 !important;
}
html.fasl-home .fasl-photo-card > p:nth-of-type(1){
  padding:0 20px 3px;
  font-size:15px !important; font-weight:700 !important;
  /* Белая всегда — по решению. Сезонный тон здесь не годится: под подписью
     лежат три очень разных снимка (тёмная листва, светлая бумага, чёрное
     стекло), и один цвет на все три может быть только предельным. */
  color:#FFFFFF !important;
  text-shadow:none !important;
  transition:color var(--tm) var(--e-out) !important;
}
html.fasl-home .fasl-photo-card > p:nth-of-type(2){
  padding:0 20px 16px;
  font-size:12px !important; line-height:1.4 !important;
  color:#FFFFFF !important;
  opacity:.88;
  text-shadow:none !important;
  transition:color var(--tm) var(--e-out) !important;
}

/* стрелки — по бокам листа, а не карточки: иначе они читались бы рамкой */
html.fasl-home .fasl-photo-card .cc-nav{ top:38%; }

@media (hover:hover) and (pointer:fine){
  html.fasl-home .fasl-photo-card:hover .cc-slide.is-on img{
    transform:scale(1.012);
  }
}

/* ============================================================================
   КУРСЫ: ПАНЕЛЬ ДАННЫХ И РОСТОК

   Смысл сцены — та самая связь, ради которой люди и приходят: курс идёт,
   данные почвы читаются, растение растёт. Собрано из настоящего снимка, а
   не нарисовано: в размере 240×118 любая графика читается иллюстрацией.

   ГЛУБИНА теми же двумя слоями, что и в карточках года: дальний — весь
   кадр, ближний — его нижняя половина с почвой и ростком; ближний ходит за
   курсором вдвое быстрее. Свечение под панелью и блик по стеклу вынесены в
   отдельные слои: при наведении усиливаются они, а снимок остаётся снимком.

   Прежние правила стеклянного планшета (.s3-tablet, .s3-desk, .s3-stylus)
   стали спящими — эти классы больше никто не выдаёт.
   ========================================================================= */
/* Подложка — тот же кадр, растянутый на карточку и размытый: он заполняет
   поля, которые остаются от честного contain, и заменяет белую панель.
   Кадр сверху показан ЦЕЛИКОМ — панель с данными и росток не обрезаны. */
html.fasl-home .cs-bg{
  display:none;
  position:absolute; inset:-6%;
  background:url("/images/scene-courses.jpg") center/cover no-repeat;
  /* Подложка нарочно обесцвечена и осветлена: в полную силу это сплошное
     зелёное пятно под снимком, и карточка переставала быть светлой. Сквозь
     неё просвечивает кремовый фон самой карточки. */
  filter:blur(20px) saturate(.42) brightness(1.16);
  opacity:.5;
  transform:translate3d(calc(var(--sx,0) * 1.5px), calc(var(--sy,0) * .8px), 0) scale(1.08);
  transition:transform 700ms cubic-bezier(.22,1,.36,1);
}
html.fasl-home .cs-img{
  /* Кадр опущен на 14px и упирается ровно в полосу подписи: прибавка к
     высоте сверх полосы уводила снимок под текст. */
  /* Кадр на всю карточку — от края до края, как и лист в соседней. Обе
     карточки заполнены снимком целиком: пустых полей нет ни у одной. */
  position:absolute; inset:0;
  background:url("/images/scene-courses.jpg") 50% 45%/cover no-repeat;
  transform:translate3d(calc(var(--sx,0) * 4px), calc(var(--sy,0) * 2px), 0);
  transition:transform 700ms cubic-bezier(.22,1,.36,1), filter 600ms cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
/* свечение под панелью: в покое еле тлеет, при наведении разгорается */
html.fasl-home .cs-glow{
  position:absolute; left:40%; right:8%; top:34%; height:34%;
  background:radial-gradient(60% 70% at 50% 60%, rgba(126,231,140,.22), transparent 72%);
  opacity:.38; pointer-events:none;
  animation:faslCsGlow 7s ease-in-out infinite alternate;
  transition:opacity 600ms cubic-bezier(.22,1,.36,1);
}
@keyframes faslCsGlow{ from{ opacity:.24; } to{ opacity:.44; } }
/* блик по стеклу — только при наведении: панель будто обновила данные */
html.fasl-home .cs-sweep{
  position:absolute; top:-10%; bottom:-10%; left:-30%; width:30%;
  background:linear-gradient(100deg, transparent, rgba(190,255,205,.16), transparent);
  transform:translateX(0) skewX(-14deg);
  opacity:0; pointer-events:none;
}
@media (hover:hover) and (pointer:fine){
  html.fasl-home [code-path^="src/pages/Home.tsx:304:"]:hover .cs-img{
    transform:translate3d(calc(var(--sx,0) * 4px), calc(var(--sy,0) * 2px), 0) scale(1.045);
    filter:brightness(1.06) saturate(1.05);
  }
  html.fasl-home [code-path^="src/pages/Home.tsx:304:"]:hover .cs-glow{ opacity:.75; animation-duration:4s; }
  html.fasl-home [code-path^="src/pages/Home.tsx:304:"]:hover .cs-sweep{
    animation:faslCsSweep 1.6s cubic-bezier(.22,1,.36,1) 120ms;
  }
}
@keyframes faslCsSweep{
  0%  { opacity:0;   transform:translateX(0) skewX(-14deg); }
  20% { opacity:1; }
  100%{ opacity:0;   transform:translateX(460%) skewX(-14deg); }
}
@media (prefers-reduced-motion:reduce){
  html.fasl-home .cs-glow{ animation:none !important; opacity:.5 !important; }
  html.fasl-home .cs-sweep{ animation:none !important; opacity:0 !important; }
}

/* Ряд остаётся ЧЕТЫРЁХКОЛОННЫМ, хотя карточек три: только так их ширина
   совпадает с карточками «Ба ҳадафи худ бо мо бирасед» — там ряд тоже из
   четырёх, и колонка считается от той же ширины страницы. Растяни три
   карточки на всю ширину — и каждая станет на треть шире соседнего блока.
   Цена — пустая клетка справа; она и была выбрана осознанно. */
@media (min-width:1024px){
  html.fasl-home .fasl-grid-3{
    /* Три карточки делят строку поровну и заполняют её целиком. Остаток не
       уходит в зазоры — он уходит в ширину самих карточек, поэтому они
       заметно шире колонки верхнего блока.

       Зазор — золотая середина: 38.4px здесь дают 48px на экране (zoom
       1.25). Бандловые 12px читались тесно, а раздача остатка через
       space-between разносила карточки на 184px — между ними появлялась
       пустота шире самой подписи. */
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:38.4px !important;
  }
}

/* ============================================================================
   ЧАТ В ТОЙ ЖЕ СИСТЕМЕ, ЧТО КУРСЫ И СЕРТИФИКАТЫ

   Карточка была единственной, где сцена оставалась маленьким предметом
   внутри белого поля. Теперь под окном лежит фотография поля во всю
   карточку, а окно плавает над ней матовым стеклом — и стекло наконец
   работает как стекло: ему есть что размывать.

   Снимок СЕЗОННЫЙ: тот же кадр, что и в карточках года, и меняется вместе
   с выбранным сезоном. Так карточка отвечает на переключатель, а не стоит
   в стороне от него.
   ========================================================================= */
html.fasl-home .ch-bg{
  /* Снимок разговора на всю карточку. Сезонное поле здесь больше не стоит:
     на кадре свой сюжет — стеклянная панель с перепиской об урожае, и поле
     под ним читалось бы вторым фоном. */
  position:absolute; inset:0;
  background:url("/images/scene-chat.jpg") 50% 46%/cover no-repeat;
  transform:translate3d(calc(var(--sx,0) * 2px), calc(var(--sy,0) * 1.1px), 0) scale(1.02);
  transition:transform 700ms cubic-bezier(.22,1,.36,1), filter 600ms cubic-bezier(.22,1,.36,1);
}

/* Правила нарисованного окна сняты вместе с ним: на карточке теперь снимок
   настоящего разговора. Стили .s3-chat выше остались спящими. */
@media (hover:hover) and (pointer:fine){
  html.fasl-home .fasl-photo-card:hover .ch-bg{
    transform:translate3d(calc(var(--sx,0) * 2px), calc(var(--sy,0) * 1.1px), 0) scale(1.05);
  }
}

/* Отдельный светлый тон для чата снят: подпись на всех трёх карточках
   теперь белая. */
@media (hover:hover) and (pointer:fine){
  html.fasl-home .fasl-photo-card:hover .ch-bg{ filter:brightness(1.08) saturate(1.06); }
}

/* На узком экране сетка становится двухколоночной, zoom у <main> снимается,
   и карточка при высоте 198px выходит заметно выше своей ширины. Кадры
   горизонтальные — cover срезал бы им почти половину боков. Поэтому здесь
   карточка ниже: пропорция ближе к самим снимкам. */
@media (max-width:767px){
  html.fasl-home .fasl-photo-card{ min-height:142px; }
}

/* ============================================================================
   ДЕРЕВО РОСТА ПЛАТФОРМЫ

   Четыре числа больше не стоят рядком: между второй и третьей плиткой встал
   росток, а к нему от каждой плитки тянется тонкая линия с медленно бегущей
   искрой. Смысл ряда меняется — это не сводка, а связь: знания, экспертиза,
   люди, результат сходятся в одном растущем деле.

   ВЕТЕР ИДЁТ ПО ВЛОЖЕННОСТИ, А НЕ ПО КАЖДОМУ ЛИСТУ ОТДЕЛЬНО. Качается
   стебель; ветви лежат внутри него и добавляют свой поворот с
   запаздыванием; листья — свой поверх. Трансформации перемножаются, и
   получается физическая цепочка, а не шесть независимо дрожащих фигур.
   Поэтому у каждого листа свой период и своя задержка — совпадающих нет.
   ========================================================================= */
html.fasl-home .fasl-grow-row{
  position:relative;
  align-items:stretch;
  /* место слою почвы; сразу за ним блок заканчивается — пустоты внизу нет */
  padding-bottom:34px !important;
}
html.fasl-home .fasl-grow-tile{ z-index:2; }
/* Почва и сеть линий — двумя absolute-слоями под плитками. Земля рисованная:
   волнистая кромка, комочки, камешки, травинки — не CSS-прямоугольник. */
html.fasl-home .gr-ground-wrap{ position:absolute; inset:0; pointer-events:none; }
html.fasl-home .gr-ground{
  position:absolute; left:0; right:0; bottom:0; width:100%; height:44px;
  animation:faslGrGroundIn 520ms cubic-bezier(.22,1,.36,1) both;
}
@keyframes faslGrGroundIn{
  from{ opacity:0; transform:translateY(8px); }
  to  { opacity:1; transform:none; }
}
/* росток поднимается из земли */
html.fasl-home .gr-rise{
  transform-box:fill-box; transform-origin:50% 100%;
  animation:faslGrRise 720ms cubic-bezier(.22,1,.36,1) 240ms both;
}
@keyframes faslGrRise{
  from{ opacity:0; transform:scale(.86) translateY(14px); }
  to  { opacity:1; transform:none; }
}
/* листья раскрываются от черешка, каждый со своей задержкой */
html.fasl-home .gr-open{
  transform-box:fill-box; transform-origin:0% 50%;
  animation:faslGrOpen 540ms cubic-bezier(.22,1,.36,1) both;
}
html.fasl-home .gr-open--1{ animation-delay:.5s; }
html.fasl-home .gr-open--2{ animation-delay:.58s; }
html.fasl-home .gr-open--3{ animation-delay:.66s; }
html.fasl-home .gr-open--4{ animation-delay:.74s; }
html.fasl-home .gr-open--5{ animation-delay:.84s; }
html.fasl-home .gr-open--6{ animation-delay:.94s; }
html.fasl-home .gr-open--7{ animation-delay:1.04s; }
@keyframes faslGrOpen{
  from{ opacity:0; transform:scale(.2); }
  to  { opacity:1; transform:scale(1); }
}
/* парящие листки: медленное свободное парение */
html.fasl-home .gr-float :first-child{ opacity:.9; }
html.fasl-home .gr-float{ }
html.fasl-home .gr-float .gr-leaf, html.fasl-home .gr-float{ }
html.fasl-home .gr-float{
  animation:faslGrFloat 8s ease-in-out infinite alternate;
}
html.fasl-home .gr-float--2{ animation-duration:9.6s; animation-delay:-3s; }
@keyframes faslGrFloat{
  from{ opacity:.55; }
  to  { opacity:.95; }
}
html.fasl-home .gr-gblades path{
  transform-box:fill-box; transform-origin:50% 100%;
  animation:faslGrGrass 7s ease-in-out infinite alternate;
}
html.fasl-home .gr-gb2{ animation-duration:8.4s; animation-delay:-2s; }
html.fasl-home .gr-sprout{
  transform-box:fill-box; transform-origin:50% 100%;
  animation:faslGrGrass 8.8s ease-in-out infinite alternate;
}
html.fasl-home .gr-sprout--2{ animation-duration:7.4s; animation-delay:-2.6s; }
html.fasl-home .gr-sprout--3{ animation-duration:9s; animation-delay:-4.4s; }
html.fasl-home .gr-sprout--4{ animation-duration:8s; animation-delay:-1.8s; }
/* влага: полоса света медленно проходит по слою; капля изредка вспыхивает */
html.fasl-home .gr-wet{ animation:faslGrWet 19s linear infinite; }
@keyframes faslGrWet{ from{ transform:translateX(-240px); } to{ transform:translateX(1200px); } }
html.fasl-home .gr-drop circle{ animation:faslGrGlint 6s ease-in-out infinite; }
@keyframes faslGrGlint{ 0%,86%,100%{ opacity:.5; } 92%{ opacity:1; } }
html.fasl-home .gr-gb3{ animation-duration:6.4s; animation-delay:-3.2s; }
html.fasl-home .gr-gb4{ animation-duration:7.6s; animation-delay:-1.2s; }
/* сеть: тонкие органические кривые от карточек к корням ростка */
html.fasl-home .gr-net{
  position:absolute; left:0; right:0; bottom:16px; width:100%; height:100px;
  animation:faslGrNetIn 700ms cubic-bezier(.22,1,.36,1) 1.05s both;
}
@keyframes faslGrNetIn{ from{ opacity:0; } to{ opacity:1; } }
/* Путь двумя слоями: основа почти прозрачна, поверх — энергия, тонкая
   бегущая штрих-волна к корням. Узел на входе в почву тихо пульсирует. */
html.fasl-home .gr-line{ stroke-width:1; transition:stroke 420ms var(--e-out); }
html.fasl-home .gr-line--0, html.fasl-home .gr-line--2{ stroke:rgba(110,150,96,.22); }
html.fasl-home .gr-line--1, html.fasl-home .gr-line--3{ stroke:rgba(176,139,62,.2); }
html.fasl-home .gr-line-e{
  stroke-width:1.1; fill:none;
  stroke-dasharray:7 110;
  animation:faslGrFlow 7.5s linear infinite;
  transition:stroke 420ms var(--e-out);
}
html.fasl-home .gr-line-e--0{ stroke:rgba(110,158,90,.5); }
html.fasl-home .gr-line-e--1{ stroke:rgba(190,150,66,.46); animation-duration:8.2s; animation-delay:1.5s; }
html.fasl-home .gr-line-e--2{ stroke:rgba(110,158,90,.5); animation-duration:8.9s; animation-delay:3s; }
html.fasl-home .gr-line-e--3{ stroke:rgba(190,150,66,.46); animation-duration:9.6s; animation-delay:4.5s; }
@keyframes faslGrFlow{ to{ stroke-dashoffset:-117; } }
html.fasl-home .gr-node{
  animation:faslGrNode 3.4s ease-in-out infinite;
  transition:opacity 420ms var(--e-out);
}
html.fasl-home .gr-node--0, html.fasl-home .gr-node--2{ fill:#7FB069; }
html.fasl-home .gr-node--1, html.fasl-home .gr-node--3{ fill:#C9A24B; }
@keyframes faslGrNode{ 0%,100%{ opacity:.35; } 50%{ opacity:.7; } }
/* корни: подсветка стороны, куда идёт энергия, — на transition, не рывком */
html.fasl-home .gr-root{ transition:filter 600ms var(--e-out); }
html.fasl-home .gr-dot{ opacity:.75; }
html.fasl-home .gr-dot--0, html.fasl-home .gr-dot--2{
  fill:#7FB069; filter:drop-shadow(0 0 3px rgba(127,176,105,.9));
}
html.fasl-home .gr-dot--1, html.fasl-home .gr-dot--3{
  fill:#C9A24B; filter:drop-shadow(0 0 3px rgba(201,162,75,.9));
}
/* наведение на плитку подсвечивает ЕЁ линию и точку: связь адресная */
html.fasl-home .fasl-grow-row:has(.fasl-grow-tile[data-grow-i="0"]:hover) .gr-line--0,
html.fasl-home .fasl-grow-row:has(.fasl-grow-tile[data-grow-i="2"]:hover) .gr-line--2{
  stroke:rgba(110,158,90,.6);
}
html.fasl-home .fasl-grow-row:has(.fasl-grow-tile[data-grow-i="1"]:hover) .gr-line--1,
html.fasl-home .fasl-grow-row:has(.fasl-grow-tile[data-grow-i="3"]:hover) .gr-line--3{
  stroke:rgba(190,150,66,.56);
}
html.fasl-home .fasl-grow-row:has(.fasl-grow-tile[data-grow-i="0"]:hover) .gr-line-e--0,
html.fasl-home .fasl-grow-row:has(.fasl-grow-tile[data-grow-i="2"]:hover) .gr-line-e--2{
  stroke:rgba(96,150,74,.95); animation-duration:3s;
}
html.fasl-home .fasl-grow-row:has(.fasl-grow-tile[data-grow-i="1"]:hover) .gr-line-e--1,
html.fasl-home .fasl-grow-row:has(.fasl-grow-tile[data-grow-i="3"]:hover) .gr-line-e--3{
  stroke:rgba(186,140,50,.95); animation-duration:3.2s;
}
html.fasl-home .fasl-grow-row:has(.fasl-grow-tile[data-grow-i="0"]:hover) .gr-node--0,
html.fasl-home .fasl-grow-row:has(.fasl-grow-tile[data-grow-i="1"]:hover) .gr-node--1,
html.fasl-home .fasl-grow-row:has(.fasl-grow-tile[data-grow-i="2"]:hover) .gr-node--2,
html.fasl-home .fasl-grow-row:has(.fasl-grow-tile[data-grow-i="3"]:hover) .gr-node--3{
  animation-duration:1.4s;
}
/* энергия входит слева — светлеет левый корень, справа — правый */
html.fasl-home .fasl-grow-row:has(.fasl-grow-tile[data-grow-i="0"]:hover) .gr-root--l,
html.fasl-home .fasl-grow-row:has(.fasl-grow-tile[data-grow-i="1"]:hover) .gr-root--l,
html.fasl-home .fasl-grow-row:has(.fasl-grow-tile[data-grow-i="2"]:hover) .gr-root--r,
html.fasl-home .fasl-grow-row:has(.fasl-grow-tile[data-grow-i="3"]:hover) .gr-root--r{
  filter:brightness(1.3) drop-shadow(0 0 2px rgba(200,169,106,.5));
}
html.fasl-home .fasl-grow-row:has(.fasl-grow-tile[data-grow-i="0"]:hover) .gr-dot--0,
html.fasl-home .fasl-grow-row:has(.fasl-grow-tile[data-grow-i="1"]:hover) .gr-dot--1,
html.fasl-home .fasl-grow-row:has(.fasl-grow-tile[data-grow-i="2"]:hover) .gr-dot--2,
html.fasl-home .fasl-grow-row:has(.fasl-grow-tile[data-grow-i="3"]:hover) .gr-dot--3{
  opacity:1; filter:drop-shadow(0 0 6px rgba(143,194,122,1));
}
/* Явная расстановка по пяти колонкам снята вместе с ростком: третья
   колонка держалась под него, и без неё две последние плитки оставались
   на местах 4 и 5 — четвёртая ужималась в неявную дорожку. Теперь плитки
   просто идут подряд по четырём колонкам бандла. */

/* --- РОСТОК --------------------------------------------------------------- */
html.fasl-home .fasl-grow{
  display:flex; align-items:flex-end; justify-content:center;
  pointer-events:none;
  background:radial-gradient(50% 64% at 50% 78%, rgba(150,190,120,.22), rgba(150,190,120,.07) 55%, transparent 75%);
  animation:faslGrLight 12s ease-in-out infinite alternate;
}
@keyframes faslGrLight{ from{ opacity:.75; } to{ opacity:1; } }
/* фон секции: тёплый крем со сходом света, не плоский белый */
html.fasl-home .fasl-grow-row{
  background:
    radial-gradient(70% 90% at 50% 80%, rgba(158,192,128,.08), transparent 70%),
    linear-gradient(180deg, rgba(252,250,243,.6), rgba(247,244,234,.35));
  border-radius:22px;
}
html.fasl-home .gr-plant{
  /* главный объект блока: примерно вдвое выше панелей */
  width:236px; height:226px; overflow:visible;
  margin-bottom:-30px;   /* корни уходят в слой почвы */
  position:relative; z-index:1;
  /* Дыхание — не «увеличение»: полпроцента за девять секунд глазом не
     ловится, но живым выглядит только с ним. Плюс наклон к курсору. */
  transform-box:fill-box; transform-origin:50% 100%;
  animation:faslGrBreathe 9s ease-in-out infinite alternate;
}
@keyframes faslGrBreathe{
  from{ transform:rotate(calc(var(--gx,0) * 1deg)) scale(1); }
  to  { transform:rotate(calc(var(--gx,0) * 1deg)) scale(1.005); }
}
html.fasl-home .gr-stem{
  transform-box:fill-box; transform-origin:50% 100%;
  animation:faslGrStem 6.4s cubic-bezier(.45,.05,.55,.95) infinite alternate;
}
@keyframes faslGrStem{
  from{ transform:rotate(-.9deg); }
  to  { transform:rotate(1.1deg); }
}
html.fasl-home .gr-branch{
  transform-box:fill-box; transform-origin:0% 50%;
  animation:faslGrBranch 5.2s cubic-bezier(.45,.05,.55,.95) infinite alternate;
}
html.fasl-home .gr-branch--2{ animation-duration:5.8s; animation-delay:-1.2s; }
html.fasl-home .gr-branch--3{ animation-duration:4.9s; animation-delay:-.6s; }
html.fasl-home .gr-branch--4{ animation-duration:6.1s; animation-delay:-2.1s; }
html.fasl-home .gr-branch--5{ animation-duration:5.5s; animation-delay:-1.7s; }
@keyframes faslGrBranch{
  from{ transform:rotate(-1.6deg) translateY(.3px); }
  to  { transform:rotate(2deg) translateY(-.4px); }
}
html.fasl-home .gr-leaf{
  transform-box:fill-box; transform-origin:0% 50%;
  animation:faslGrLeaf 4.6s ease-in-out infinite alternate;
}
html.fasl-home .gr-leaf--b{ animation-duration:5.3s; animation-delay:-.9s; }
html.fasl-home .gr-leaf--c{ animation-duration:4.2s; animation-delay:-1.6s; }
html.fasl-home .gr-leaf--d{ animation-duration:5.7s; animation-delay:-.4s; }
html.fasl-home .gr-leaf--e{ animation-duration:4.8s; animation-delay:-2.3s; }
@keyframes faslGrLeaf{
  from{ transform:rotate(-2.2deg) scaleY(.99); }
  to  { transform:rotate(2.6deg) scaleY(1.01); }
}
/* Главный лист: его путь — влево, чуть вверх, вправо, чуть вниз. Он один
   ходит по кругу, а не качается туда-обратно, и потому заметен. */
html.fasl-home .gr-branch--hero{
  animation:faslGrHero 5s ease-in-out infinite;
  animation-delay:-.8s;
}
@keyframes faslGrHero{
  0%   { transform:rotate(-3deg) translate(0, .6px); }
  25%  { transform:rotate(-1deg) translate(.6px, -1.1px); }
  50%  { transform:rotate(3.4deg) translate(1.2px, -.2px); }
  75%  { transform:rotate(.6deg) translate(.4px, 1px); }
  100% { transform:rotate(-3deg) translate(0, .6px); }
}
html.fasl-home .gr-leaf--hero{ animation-duration:3.8s; }
html.fasl-home .gr-tip{
  transform-box:fill-box; transform-origin:50% 100%;
  animation:faslGrLeaf 5.9s ease-in-out infinite alternate;
}
html.fasl-home .gr-grass path{
  transform-box:fill-box; transform-origin:50% 100%;
  animation:faslGrGrass 7s ease-in-out infinite alternate;
}
html.fasl-home .gr-blade2{ animation-duration:8.2s; animation-delay:-2s; }
html.fasl-home .gr-blade3{ animation-duration:6.6s; animation-delay:-3.4s; }
html.fasl-home .gr-blade4{ animation-duration:7.8s; animation-delay:-1.1s; }
@keyframes faslGrGrass{ from{ transform:rotate(-2deg); } to{ transform:rotate(2.4deg); } }

/* --- ПЛИТКИ И ЛИНИИ ------------------------------------------------------- */
html.fasl-home .fasl-grow-tile{
  position:relative;
  /* Панель данных: тёплое стекло с зелёным дыханием, внутренний свет по
     верхней кромке, диагональный блик. Акцент чередуется — зелёный у
     курсов и донишҷӯён, золото у устодон и сертификатов. */
  --acc:#4F7A44; --acc-soft:#EAF1E2;
  background:linear-gradient(165deg, rgba(255,255,255,.9), rgba(245,246,238,.78) 60%, rgba(236,240,226,.72)) !important;
  -webkit-backdrop-filter:blur(7px) saturate(1.05); backdrop-filter:blur(7px) saturate(1.05);
  border:1px solid rgba(182,186,164,.5) !important;
  box-shadow:0 4px 14px rgba(40,52,34,.07), inset 0 1px 0 rgba(255,255,255,.95) !important;
  overflow:hidden;
  transition:box-shadow 420ms var(--e-out), transform 420ms var(--e-out),
             border-color 420ms var(--e-out);
  animation:faslGrTileIn 640ms cubic-bezier(.22,1,.36,1) both;
}
html.fasl-home .fasl-grow-tile[data-grow-i="1"],
html.fasl-home .fasl-grow-tile[data-grow-i="3"]{ --acc:#B08B3E; --acc-soft:#F5EDDA; }
html.fasl-home .fasl-grow-tile[data-grow-i="0"]{ animation-delay:.7s; }
html.fasl-home .fasl-grow-tile[data-grow-i="1"]{ animation-delay:.82s; }
html.fasl-home .fasl-grow-tile[data-grow-i="2"]{ animation-delay:.94s; }
html.fasl-home .fasl-grow-tile[data-grow-i="3"]{ animation-delay:1.06s; }
@keyframes faslGrTileIn{
  from{ opacity:0; transform:translateY(10px); }
  to  { opacity:1; transform:none; }
}
/* диагональный блик по стеклу панели */
html.fasl-home .fasl-grow-tile::after{
  content:""; position:absolute; top:-30%; bottom:55%; left:-12%; width:38%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform:skewX(-16deg); pointer-events:none;
}
/* Статусные бейджи в углу панелей убраны по решению: подпись под числом
   уже говорит то же самое, а плашки читались как элементы форм. */
@keyframes faslGrPulse{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }
/* Правила мини-виз сняты вместе с ними: их место заняли сцены .gr-scene. */
html.fasl-home .gr-note{
  display:block; margin-top:2px;
  font-size:11px; line-height:1.35; color:#8B937F;
  transition:color 380ms var(--e-out);
}

/* --- НАВЕДЕНИЕ: ПЛИТКА И РОСТОК ОТВЕЧАЮТ ДРУГ ДРУГУ ----------------------- */
@media (hover:hover) and (pointer:fine){
  html.fasl-home .fasl-grow-tile:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 26px rgba(30,44,28,.13),
               0 0 0 1px color-mix(in srgb, var(--acc) 35%, transparent) !important;
    border-color:color-mix(in srgb, var(--acc) 45%, transparent) !important;
  }
  /* растение тянется к тому, на что смотрят: --gx читается прямо в
     keyframes дыхания, наклон вливается в идущую анимацию без рывка */
  html.fasl-home .fasl-grow-row:has(.fasl-grow-tile[data-grow-i="0"]:hover){ --gx:-.9; }
  html.fasl-home .fasl-grow-row:has(.fasl-grow-tile[data-grow-i="1"]:hover){ --gx:-.45; }
  html.fasl-home .fasl-grow-row:has(.fasl-grow-tile[data-grow-i="2"]:hover){ --gx:.45; }
  html.fasl-home .fasl-grow-row:has(.fasl-grow-tile[data-grow-i="3"]:hover){ --gx:.9; }
  html.fasl-home .fasl-grow-tile:hover .gr-note{ color:var(--s-deep, #4C6B3F); }
  /* Росток стоит последним в ряду, поэтому его достаёт общий брат-селектор:
     наведение на любую плитку слегка оживляет крону. */
  html.fasl-home .fasl-grow-tile:hover ~ .fasl-grow .gr-branch{ animation-duration:3.4s; }
  html.fasl-home .fasl-grow-tile:hover ~ .fasl-grow .gr-branch--hero{ animation-duration:3s; }
  html.fasl-home .fasl-grow-tile:hover ~ .fasl-grow .gr-stem{ animation-duration:4.6s; }
}

@media (prefers-reduced-motion:reduce){
  html.fasl-home .gr-plant, html.fasl-home .gr-stem, html.fasl-home .gr-branch,
  html.fasl-home .gr-leaf, html.fasl-home .gr-tip, html.fasl-home .gr-grass path,
  html.fasl-home .gr-dot, html.fasl-home .gr-gblades path{ display:none; }
  html.fasl-home .gr-line-e, html.fasl-home .gr-node, html.fasl-home .gr-wet,
  html.fasl-home .gr-drop circle{ animation:none !important; }
  html.fasl-home .gr-open, html.fasl-home .gr-rise, html.fasl-home .gr-ground,
  html.fasl-home .gr-net, html.fasl-home .fasl-grow-tile, html.fasl-home .gr-float,
  html.fasl-home .gr-sprout, html.fasl-home .gr-bar i, html.fasl-home .gr-ring{
    animation:none !important;
  }
}

/* ============================================================================
   МИНИ-СЦЕНЫ ПАНЕЛЕЙ СТАТИСТИКИ

   Карточка по референсу — двухэтажная: сверху число, название и подпись
   одной сеткой, нижнюю половину целиком занимает рисованная сцена. Сцена
   доходит до самых краёв карточки и обрезается её скруглением.

   Иконки бандла спрятаны: книжка и шапочка рядом с полноценной сценой
   читались наклейками. Узлы не удаляем — React вернул бы их перерисовкой.
   ========================================================================= */
html.fasl-home .fasl-grow-tile{
  padding-bottom:118px !important;
  align-items:flex-start !important;
}
html.fasl-home .fasl-grow-tile > span[code-path]{ display:none !important; }
html.fasl-home .gr-scene{
  position:absolute; left:0; right:0; bottom:0; height:112px;
  pointer-events:none;
}
html.fasl-home .gr-scene svg{ width:100%; height:100%; display:block; }
/* сцена мягко перетекает в верх карточки */
html.fasl-home .gr-scene::before{
  content:""; position:absolute; left:0; right:0; top:0; height:26px; z-index:1;
  background:linear-gradient(180deg, rgba(250,250,244,.95), rgba(250,250,244,0));
}
html.fasl-home .gr-scene{ filter:saturate(.98); transition:filter 420ms var(--e-out); }

/* --- жизнь сцен ----------------------------------------------------------- */
/* курсы: линия графика прорастает и держится, точка на конце пульсирует */
html.fasl-home .gs-chart{
  stroke-dasharray:220;
  animation:faslGsChart 7s cubic-bezier(.45,.05,.55,.95) infinite;
}
@keyframes faslGsChart{
  0%{ stroke-dashoffset:220; } 38%{ stroke-dashoffset:0; }
  86%{ stroke-dashoffset:0; opacity:1; } 93%{ opacity:0; stroke-dashoffset:0; }
  94%{ opacity:0; stroke-dashoffset:220; } 100%{ stroke-dashoffset:220; opacity:1; }
}
html.fasl-home .gs-chart-dot{
  transform-box:fill-box; transform-origin:50% 50%;
  animation:faslGsDot 2.4s ease-in-out infinite;
}
@keyframes faslGsDot{ 0%,100%{ transform:scale(1); opacity:.85; } 50%{ transform:scale(1.35); opacity:1; } }
/* устодон: панель обновляется — строка дышит, блик проходит */
html.fasl-home .gs-pan-line{
  transform-box:fill-box; transform-origin:0% 50%;
  animation:faslGsLine 4.2s ease-in-out infinite alternate;
}
@keyframes faslGsLine{ from{ transform:scaleX(.62); } to{ transform:scaleX(1.28); } }
html.fasl-home .gs-pan-sweep{
  animation:faslGsSweep 6.5s linear infinite;
}
@keyframes faslGsSweep{
  0%{ opacity:0; transform:translateX(0) skewX(-12deg); }
  8%{ opacity:.28; } 20%{ opacity:0; transform:translateX(120px) skewX(-12deg); }
  100%{ opacity:0; transform:translateX(120px) skewX(-12deg); }
}
/* донишҷӯён: точки связи проявляются и гаснут вразнобой */
html.fasl-home .gs-p-dot{ opacity:0; animation:faslGsPDot 5.4s ease-in-out infinite; }
html.fasl-home .gs-p-dot--2{ animation-delay:1.1s; }
html.fasl-home .gs-p-dot--3{ animation-delay:2.3s; }
html.fasl-home .gs-p-dot--4{ animation-delay:3.4s; }
html.fasl-home .gs-p-dot--5{ animation-delay:4.2s; }
@keyframes faslGsPDot{ 0%,100%{ opacity:0; } 18%,42%{ opacity:.9; } 60%{ opacity:0; } }
html.fasl-home .gs-lead{
  transform-box:fill-box; transform-origin:50% 100%;
  animation:faslGsLead 5.6s ease-in-out infinite alternate;
}
@keyframes faslGsLead{ from{ transform:scale(1); } to{ transform:scale(1.03); } }
/* сертификаты: QR мягко пульсирует, печать чуть дышит */
html.fasl-home .gs-qr{ animation:faslGsQr 3.8s ease-in-out infinite; }
@keyframes faslGsQr{ 0%,100%{ opacity:.78; } 50%{ opacity:1; } }
html.fasl-home .gs-cert{
  transform-box:fill-box; transform-origin:50% 100%;
  animation:faslGsCert 7s ease-in-out infinite alternate;
}
@keyframes faslGsCert{ from{ transform:rotate(-.4deg); } to{ transform:rotate(.5deg); } }

@media (hover:hover) and (pointer:fine){
  html.fasl-home .fasl-grow-tile:hover .gr-scene{ filter:saturate(1.08) brightness(1.03); }
  html.fasl-home .fasl-grow-tile:hover .gs-chart-dot{ animation-duration:1.2s; }
  html.fasl-home .fasl-grow-tile:hover .gs-pan-sweep{ animation-duration:2.6s; }
  html.fasl-home .fasl-grow-tile:hover .gs-p-dot{ animation-duration:2.7s; }
  html.fasl-home .fasl-grow-tile:hover .gs-qr{ animation-duration:1.8s; }
}
@media (prefers-reduced-motion:reduce){
  html.fasl-home .gs-chart, html.fasl-home .gs-chart-dot, html.fasl-home .gs-pan-line,
  html.fasl-home .gs-pan-sweep, html.fasl-home .gs-p-dot, html.fasl-home .gs-lead,
  html.fasl-home .gs-qr, html.fasl-home .gs-cert{ animation:none !important; }
  html.fasl-home .gs-p-dot{ opacity:.7; }
}

/* ============================================================================
   ПАНЕЛИ СТАТИСТИКИ — ПЛОСКИЕ И РОВНЫЕ

   Значок, число, название, короткая черта. Ничего больше: ни подписи под
   названием, ни бейджей, ни графиков в теле карточки. Фон — абстрактный
   рисунок в дальнем углу, настолько слабый, что читается фактурой.

   Правила растения и почвы выше стали спящими: классы .fasl-grow,
   .gr-ground-wrap, .gr-net не выдаются больше нигде.
   ========================================================================= */
html.fasl-home .fasl-grow-row{
  background:none !important;
  padding-bottom:0 !important;
  align-items:stretch;
}
html.fasl-home .fasl-grow-tile{
  --acc:#2F6B3C; --acc-soft:#E7F0DE;
  position:relative; overflow:hidden;
  display:flex !important; flex-direction:column; align-items:flex-start;
  gap:14px;
  min-height:132px;
  padding:20px 20px 18px !important;
  background:#FCFCF8 !important;
  border:1px solid rgba(196,198,182,.5) !important;
  box-shadow:0 2px 10px rgba(40,52,34,.05) !important;
  transition:border-color 380ms var(--e-out), box-shadow 380ms var(--e-out),
             background 380ms var(--e-out);
  animation:none !important;
}
html.fasl-home .fasl-grow-tile[data-grow-i="1"],
html.fasl-home .fasl-grow-tile[data-grow-i="3"]{ --acc:#B08B3E; --acc-soft:#F5EDDA; }
html.fasl-home .fasl-grow-tile::after{ content:none !important; }


/* значок бандла — сверху, в цвете акцента */
html.fasl-home .fasl-grow-tile > span[code-path]{
  display:flex !important; position:relative; z-index:1;
  width:auto !important; height:auto !important;
  background:none !important; color:var(--acc) !important;
}
html.fasl-home .fasl-grow-tile > span[code-path] svg{ width:28px; height:28px; }

/* колонка текста поверх фона */
html.fasl-home .fasl-grow-tile > div{ position:relative; z-index:1; }
html.fasl-home .fasl-grow-tile p[class*="text-2xl"],
html.fasl-home .fasl-grow-tile p[class*="text-xl"]{
  font-size:34px !important; font-weight:800 !important; line-height:1.05 !important;
  color:var(--acc) !important; margin:0 0 6px !important;
}
html.fasl-home .fasl-grow-tile p[class*="text-sm"],
html.fasl-home .fasl-grow-tile p[class*="text-xs"]{
  font-size:15px !important; font-weight:600 !important;
  color:#1F2A1C !important; margin:0 !important;
}
/* короткая черта акцента */
html.fasl-home .gr-accent{
  display:block; width:30px; height:3px; border-radius:2px;
  margin-top:12px; background:var(--acc); opacity:.75;
  transition:opacity 380ms var(--e-out), width 380ms var(--e-out);
}

/* Правила узоров сняты вместе с ними: фон панелей — жидкое стекло ниже. */

@media (hover:hover) and (pointer:fine){
  html.fasl-home .fasl-grow-tile:hover{
    transform:none !important;
    background:#FFFFFF !important;
    border-color:color-mix(in srgb, var(--acc) 38%, transparent) !important;
    box-shadow:0 6px 18px rgba(40,52,34,.09) !important;
  }
  html.fasl-home .fasl-grow-tile:hover .gr-bg{ opacity:1; }
  html.fasl-home .fasl-grow-tile:hover .gr-accent{ opacity:1; width:38px; }
}
@media (max-width:767px){
  html.fasl-home .fasl-grow-tile{ min-height:112px; padding:16px !important; gap:10px; }
  html.fasl-home .fasl-grow-tile p[class*="text-2xl"],
  html.fasl-home .fasl-grow-tile p[class*="text-xl"]{ font-size:27px !important; }
}
@media (prefers-reduced-motion:reduce){
}

/* ============================================================================
   ЖИДКОЕ СТЕКЛО ПАНЕЛЕЙ

   Узоры сняты: ни линий, ни сеток, ни сот. Вместо них материал — тёплое
   полупрозрачное стекло со светом, который медленно перетекает внутри.

   Собрано из трёх слоёв: два больших размытых пятна разного оттенка ходят
   навстречу друг другу (11 и 9.5 секунды, разные фазы — совпасть не могут),
   поверх — неподвижный косой блик преломления. Внутренняя подсветка по
   верхней кромке и мягкая внешняя тень дают толщину.

   Размеры, отступы, значки, числа и подписи не менялись — только материал.
   ========================================================================= */
html.fasl-home .fasl-grow-tile{
  --glass:rgba(214,236,204,.5); --glass-hi:rgba(178,220,164,.72); --glass-lo:rgba(226,242,216,.85);
  background:linear-gradient(152deg,
    rgba(255,255,255,.94) 0%, var(--glass) 52%, rgba(255,255,255,.9) 100%) !important;
  -webkit-backdrop-filter:blur(10px) saturate(1.06); backdrop-filter:blur(10px) saturate(1.06);
  border:1px solid rgba(255,255,255,.9) !important;
  box-shadow:
    0 10px 26px rgba(40,52,34,.07),
    0 1px 2px rgba(40,52,34,.05),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -18px 34px rgba(255,255,255,.45) !important;
  transition:box-shadow 420ms var(--e-out), border-color 420ms var(--e-out),
             transform 420ms var(--e-out) !important;
}
html.fasl-home .fasl-grow-tile[data-grow-i="1"]{
  --glass:rgba(243,228,199,.55); --glass-hi:rgba(232,205,152,.7); --glass-lo:rgba(250,240,220,.9);
}
html.fasl-home .fasl-grow-tile[data-grow-i="2"]{
  --glass:rgba(224,240,214,.5); --glass-hi:rgba(190,224,176,.66); --glass-lo:rgba(236,246,228,.85);
}
html.fasl-home .fasl-grow-tile[data-grow-i="3"]{
  --glass:rgba(245,230,198,.58); --glass-hi:rgba(233,200,140,.72); --glass-lo:rgba(251,241,219,.9);
}

/* световые пятна внутри стекла */
html.fasl-home .gr-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  overflow:hidden; border-radius:inherit;
  opacity:.9; transition:opacity 420ms var(--e-out);
}
html.fasl-home .gl{
  position:absolute; display:block; border-radius:50%;
  filter:blur(24px);
  will-change:transform;
}
html.fasl-home .gl-a{
  width:78%; height:150%; left:-16%; top:-34%;
  background:radial-gradient(closest-side, var(--glass-hi), transparent 72%);
  animation:faslGlassA 11s cubic-bezier(.45,.05,.55,.95) infinite alternate;
}
html.fasl-home .gl-b{
  width:66%; height:135%; right:-20%; bottom:-40%;
  background:radial-gradient(closest-side, var(--glass-lo), transparent 74%);
  animation:faslGlassB 9.5s cubic-bezier(.45,.05,.55,.95) infinite alternate;
  animation-delay:-3.4s;
}
@keyframes faslGlassA{
  from{ transform:translate3d(0,0,0) scale(1); }
  to  { transform:translate3d(26%, 8%, 0) scale(1.12); }
}
@keyframes faslGlassB{
  from{ transform:translate3d(0,0,0) scale(1.06); }
  to  { transform:translate3d(-22%, -10%, 0) scale(1); }
}
/* косой блик преломления — неподвижный, он и держит ощущение стекла */
html.fasl-home .gl-sheen{
  position:absolute; inset:-10%;
  background:linear-gradient(112deg,
    transparent 26%, rgba(255,255,255,.6) 42%, rgba(255,255,255,.18) 50%, transparent 64%);
  opacity:.55; pointer-events:none;
}

@media (hover:hover) and (pointer:fine){
  html.fasl-home .fasl-grow-tile:hover{
    transform:scale(1.01) !important;
    background:linear-gradient(152deg,
      rgba(255,255,255,.97) 0%, var(--glass) 50%, rgba(255,255,255,.94) 100%) !important;
    border-color:rgba(255,255,255,1) !important;
    box-shadow:
      0 16px 34px rgba(40,52,34,.1),
      0 2px 4px rgba(40,52,34,.06),
      inset 0 1px 0 rgba(255,255,255,1),
      inset 0 -18px 34px rgba(255,255,255,.55) !important;
  }
  html.fasl-home .fasl-grow-tile:hover .gr-bg{ opacity:1; }
  html.fasl-home .fasl-grow-tile:hover .gl-a{ animation-duration:7.5s; }
  html.fasl-home .fasl-grow-tile:hover .gl-b{ animation-duration:6.5s; }
}
@media (prefers-reduced-motion:reduce){
  html.fasl-home .gl{ animation:none !important; }
}

/* ============================================================================
   РАСКЛАДКА ПАНЕЛИ: ЗНАЧОК СВЕРХУ, ЧИСЛО В ЦЕНТРЕ

   Порядок чтения — значок, число, название, черта. Всё по центру колонки.
   Высота панели прежняя: место перераспределено внутри неё, а не добавлено.

   Цвета и стекло не тронуты — те же спокойные зелёный и золото. */
html.fasl-home .fasl-grow-tile{
  align-items:center !important;
  justify-content:center !important;
  text-align:center;
  gap:10px;
}
html.fasl-home .fasl-grow-tile > div{
  display:flex; flex-direction:column; align-items:center;
}
/* число — главный элемент, на 12% крупнее прежнего */
html.fasl-home .fasl-grow-tile p[class*="text-2xl"],
html.fasl-home .fasl-grow-tile p[class*="text-xl"]{
  font-size:38px !important; margin:0 0 4px !important;
}
html.fasl-home .fasl-grow-tile > span[code-path]{ justify-content:center; }
html.fasl-home .gr-accent{ margin:12px auto 0; }

/* ============================================================================
   УСТОДОНИ МО: ОДИН БОЛЬШОЙ + ЧЕТЫРЕ МАЛЫХ

   Асимметричная сетка по референсу: большая карточка занимает левую
   половину и обе строки, четыре малых — правую половину квадратами 2x2.
   Фото на всю карточку, белая полупрозрачная панель со стеклом лежит
   ПОВЕРХ снимка у нижнего края.

   Появление — большой первым, малые следом ступенями по 120мс.
   ========================================================================= */
/* ehb-tgrid — собственная пятиколоночная сетка панели: галерея, вложенная
   в неё, ужималась в одну колонку шириной 190px. Пока внутри стоит галерея,
   сетка родителя выключается. */
html.fasl .ehb-tgrid:has(.ft-gal){ display:block !important; }
html.fasl .ft-gal{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  grid-auto-rows:236px;
  gap:14px;
}
html.fasl .ft-card{
  position:relative; overflow:hidden;
  border-radius:var(--r-3, 18px);
  background:#E8E4D8;
  box-shadow:0 6px 18px rgba(40,52,34,.1);
  animation:faslFtIn 640ms cubic-bezier(.22,1,.36,1) calc(var(--ft-i,0) * 120ms) both;
}
/* Большая карточка уже на 15%: колонки не поровну, левая пара суммарно
   тоньше правой — освободившееся отдано малым карточкам. */
html.fasl .ft-gal{ grid-template-columns:0.85fr 0.85fr 1.15fr 1.15fr; }
html.fasl .ft-card--big{ grid-column:1 / 3; grid-row:1 / 3; }
@keyframes faslFtIn{
  from{ opacity:0; transform:translateY(12px); }
  to  { opacity:1; transform:none; }
}
html.fasl .ft-card img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 22%;
  transition:transform 700ms cubic-bezier(.22,1,.36,1);
}
/* белая стеклянная панель поверх фото */
html.fasl .ft-info{
  position:absolute; left:12px; right:12px; bottom:12px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 4px 14px rgba(40,52,34,.12);
  transition:transform 500ms cubic-bezier(.22,1,.36,1),
             box-shadow 500ms cubic-bezier(.22,1,.36,1);
}
html.fasl .ft-n{ margin:0; font-size:15px; font-weight:800; color:#1F2A1C; }
html.fasl .ft-s{ margin:2px 0 0; font-size:12px; font-weight:600; color:#2F6B3C; }
html.fasl .ft-d{ margin:4px 0 0; font-size:11.5px; line-height:1.45; color:#5C6656; }
/* у большой карточки панель просторнее и текст крупнее */
html.fasl .ft-card--big .ft-info{ left:16px; right:16px; bottom:16px; padding:16px 18px; }
html.fasl .ft-card--big .ft-n{ font-size:20px; }
html.fasl .ft-card--big .ft-s{ font-size:13.5px; margin-top:3px; }
html.fasl .ft-card--big .ft-d{ font-size:12.5px; margin-top:5px; }
/* у малых описание в две строки, лишнее прячется */
html.fasl .ft-card:not(.ft-card--big) .ft-d{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

@media (hover:hover) and (pointer:fine){
  html.fasl .ft-card:hover img{ transform:scale(1.035); }
  html.fasl .ft-card:hover .ft-info{
    transform:translateY(-3px);
    box-shadow:0 8px 20px rgba(40,52,34,.16);
    border-color:rgba(140,170,120,.5);
  }
}

/* планшет: большой сверху во всю ширину, малые 2x2 под ним */
@media (max-width:1023px){
  html.fasl .ft-gal{ grid-template-columns:repeat(2, minmax(0,1fr)); grid-auto-rows:220px; }
  html.fasl .ft-card--big{ grid-column:1 / 3; grid-row:auto; min-height:400px; }
  /* кадр пересчитан под широкую низкую карточку: десктопные проценты
     здесь показывали один лоб во весь блок */
  html.fasl .ft-card--big img{ object-position:50% 16%; }
}
/* телефон: одна колонка, большой всё равно первый и выше остальных */
@media (max-width:600px){
  html.fasl .ft-gal{ grid-template-columns:1fr; grid-auto-rows:230px; }
  html.fasl .ft-card--big{ grid-column:1; min-height:340px; }
  html.fasl .ft-card--big img{ object-position:50% 18%; }
}
@media (prefers-reduced-motion:reduce){
  html.fasl .ft-card{ animation:none !important; }
  html.fasl .ft-card img, html.fasl .ft-info{ transition:none !important; }
}

/* --- УСТОДОНИ МО: правки по замечаниям ------------------------------------ */
/* Рамка вокруг секции снята. Селектор с id — не для красоты: общее правило
   панелей ehb ставит эту же рамку с !important, и при равных important
   побеждает специфичность. */
html.fasl-home #eag-home-bottom .ehb-teach.fasl-teach{ border:0 !important; }
/* Заголовок — ПОЗАДИ декоративного слоя с листьями: сезонные линии сверху
   ложатся поверх текста. Только «Устодони мо»: прочие тексты секции стоят
   выше слоя, как и стояли. important — против правила, поднимающего на
   z-index:1 всех детей секции разом. */
html.fasl .fasl-teach > h3{ position:relative; z-index:0 !important; }
/* Кадрирование: у каждого портрета лицо в своей части кадра, и общее
   «50% 22%» срезало макушки на квадратных карточках. Позиция задана под
   каждый снимок отдельно — лица видны целиком у всех пяти. */
/* кадры выставлены под НОВЫЕ снимки: у каждого лицо в своей части кадра */
html.fasl .ft-card--big img{ object-position:50% 30%; }
html.fasl .ft-card:nth-child(2) img{ object-position:50% 20%; }
html.fasl .ft-card:nth-child(3) img{ object-position:50% 12%; }
html.fasl .ft-card:nth-child(4) img{ object-position:50% 30%; }
html.fasl .ft-card:nth-child(5) img{ object-position:50% 35%; }

/* --- УСТОДОНИ МО: НЕ ПАНЕЛЬ, А ОБЫЧНАЯ СЕКЦИЯ -----------------------------
   Как «Курсҳои маъмултарини мо»: заголовок стоит над блоком на фоне
   страницы, никакой белой карточки-обёртки и никакой зелёной каймы.
   Слой сезонных листьев над панелью убран вместе с панелью — он и
   читался зелёной рамкой. */
html.fasl-home #eag-home-bottom .ehb-teach.fasl-teach{
  background:transparent !important;
  border-radius:0 !important;
  padding:8px 0 0 !important;
  box-shadow:none !important;
}
html.fasl .fasl-teach > .fasl-fx-soft{ display:none !important; }
html.fasl .fasl-teach > h3{
  margin:0 0 18px !important;
  font-size:38px; font-weight:700; color:#1F2A1C;
  z-index:auto !important;
}

/* --- ИНФО УСТОДА — ТОЛЬКО ПРИ НАВЕДЕНИИ -----------------------------------
   Панели закрывали лица на малых карточках. В покое видна лишь узкая
   плашка с именем; специализация и описание раскрываются тем же белым
   стеклом при наведении, снизу вверх. На пальцевом вводе наведения нет —
   там панель развёрнута всегда, иначе о ней не узнать. */
html.fasl .ft-info{
  transition:transform 500ms cubic-bezier(.22,1,.36,1),
             box-shadow 500ms cubic-bezier(.22,1,.36,1);
}
/* Панели скрыты на ЛЮБОМ окне с мышью — включая узкое: белые плашки поверх
   лиц мешают сильнее, чем помогает имя (решение хозяина, дважды). На
   настоящем тач-устройстве (hover:none) панели видны всегда — наведения
   там не существует, и спрятанное было бы не достать. */
@media (hover:hover) and (pointer:fine){
  html.fasl .ft-s, html.fasl .ft-d{
    max-height:0; opacity:0; overflow:hidden; margin:0;
    transition:max-height 450ms cubic-bezier(.22,1,.36,1),
               opacity 350ms cubic-bezier(.22,1,.36,1),
               margin 450ms cubic-bezier(.22,1,.36,1);
  }
  /* Потолок в 2.4em держал ровно одну строку. Специализации бывают
     длинные — «Мутахассис оид ба гармхона, ҳимояи растаниҳо ва
     сабзавотпарварӣ» ложится в две, и вторая обрезалась. 4.8em —
     это до трёх строк; для коротких подписей ничего не меняется,
     max-height лишь потолок, а не заданная высота. */
  html.fasl .ft-card:hover .ft-s{ max-height:4.8em; opacity:1; margin-top:2px; }
  html.fasl .ft-card:hover .ft-d{ max-height:5em; opacity:1; margin-top:4px; }
  html.fasl .ft-card--big:hover .ft-s{ margin-top:3px; }
  html.fasl .ft-card--big:hover .ft-d{ margin-top:5px; }
  /* свёрнутая плашка компактнее — лицо открыто */
  html.fasl .ft-info{ padding-top:9px; padding-bottom:9px; }
  html.fasl .ft-card--big .ft-info{ padding-top:12px; padding-bottom:12px; }
  html.fasl .ft-card:hover .ft-info{ padding-top:12px; padding-bottom:12px; }
  html.fasl .ft-card--big:hover .ft-info{ padding-top:16px; padding-bottom:16px; }
}

/* --- ИНФО УСТОДА: В ПОКОЕ НЕТ ВОВСЕ ---------------------------------------
   Фото чистое, без плашки с именем. Вся панель плавно проявляется при
   наведении, поднимаясь снизу. На пальцевом вводе панель видна всегда —
   наведения там не существует. */
@media (hover:hover) and (pointer:fine){
  html.fasl .ft-info{
    opacity:0; transform:translateY(10px);
    pointer-events:none;
    transition:opacity 420ms cubic-bezier(.22,1,.36,1),
               transform 480ms cubic-bezier(.22,1,.36,1),
               box-shadow 480ms cubic-bezier(.22,1,.36,1);
  }
  html.fasl .ft-card:hover .ft-info{ opacity:1; transform:none; }
}
/* заголовок секции — по центру */
html.fasl .fasl-teach > h3{ text-align:center !important; }

/* Кадры узких раскладок продублированы В КОНЦЕ файла: их первые копии стоят
   в блоке галереи РАНЬШЕ пофотографных правил v128 и проигрывали им по
   порядку. Та же болезнь, что у чёрных листьев: правило есть, но не
   действует. */
/* Кадр и высота большой карточки на узких ширинах. Позиция 38% выведена из
   геометрии снимка (лицо в средней трети кадра 1024x1408): при cover в
   широкой низкой карточке видно окно в треть кадра, и прежние 16% целили
   этим окном в лоб. */
@media (max-width:1023px){
  html.fasl .ft-card--big{ min-height:460px; }
  html.fasl .ft-card--big img{ object-position:50% 26%; }
}
@media (max-width:600px){
  html.fasl .ft-card--big{ min-height:360px; }
  html.fasl .ft-card--big img{ object-position:50% 26%; }
}

/* НАЕЗД КАРТОЧЕК НА УЗКИХ ШИРИНАХ — МЕХАНИКА И ЛЕЧЕНИЕ. Строки сетки были
   фиксированными (auto-rows:220), большая карточка стояла в ОДНОЙ такой
   строке, а её min-height:460 вылезал из трека и накрывал соседей ниже.
   Правило на будущее: элементу нельзя давать высоту больше его трека —
   либо span на несколько строк, либо auto-строки. Здесь строки auto, а
   высота задана каждой карточке напрямую. */
@media (max-width:1023px){
  html.fasl .ft-gal{ grid-auto-rows:auto; }
  html.fasl .ft-card{ height:220px; }
  html.fasl .ft-card--big{ grid-row:auto; height:460px; min-height:0; }
}
@media (max-width:600px){
  html.fasl .ft-card{ height:230px; }
  html.fasl .ft-card--big{ height:360px; }
}

/* ============================================================================
   ПАНЕЛИ СТАТИСТИКИ ЖИВУТ СЕЗОНОМ

   ЦВЕТ. Оба тона панелей взяты из палитры выбранного сезона: тёмный
   (--s-deep) у первой и третьей, средний (--s-acc) у второй и четвёртой.
   Чередование сохранено — весной это два зелёных, летом охра и золото,
   осенью умбра и медь, зимой два холодных серо-синих. Отдельных чисел не
   заведено: любой новый сезон подхватится сам.

   СТЕКЛО. Оттенок жидкого стекла и цвет светового пятна тоже сезонные —
   через --s-soft и --s-fx, те же переменные, что красят погоду над
   разворотом. Панели и небо над полем всегда одного тона.

   СВОЙ ХОД У КАЖДОГО СЕЗОНА — это и есть та самая «уникальная фича».
   Свет внутри стекла ведёт себя по-разному, и различие смысловое, а не
   декоративное:

     баҳор     свет ПОДНИМАЕТСЯ снизу вверх — сок идёт по стеблю;
     тобистон  свет РАСХОДИТСЯ вширь и дышит ярче — зной над полем;
     тирамоҳ   свет ОСЕДАЕТ вниз и гаснет к краю — тепло уходит в землю;
     зимистон  свет почти неподвижен, зато по стеклу медленно проходит
               иней — единственный сезон, где движется не свет, а холод.
   ========================================================================= */

/* --- цвет чисел, значков и черты --- */
html.fasl .fasl-grow-tile{ --acc:var(--s-deep); --acc-soft:var(--s-soft); }
html.fasl .fasl-grow-tile[data-grow-i="1"],
html.fasl .fasl-grow-tile[data-grow-i="3"]{ --acc:var(--s-acc); --acc-soft:var(--s-soft); }
html.fasl .fasl-grow-tile p[class*="text-2xl"],
html.fasl .fasl-grow-tile p[class*="text-xl"],
html.fasl .fasl-grow-tile > span[code-path]{
  transition:color var(--tm) var(--e-out) !important;
}
html.fasl .gr-accent{ transition:background var(--tm) var(--e-out), opacity 380ms var(--e-out), width 380ms var(--e-out); }

/* --- стекло в тоне сезона --- */
html.fasl .fasl-grow-tile{
  --glass:color-mix(in srgb, var(--s-soft) 78%, transparent);
  --glass-hi:color-mix(in srgb, var(--s-fx) 62%, transparent);
  --glass-lo:color-mix(in srgb, var(--s-soft) 92%, white);
  transition:box-shadow 420ms var(--e-out), border-color 420ms var(--e-out),
             transform 420ms var(--e-out), background var(--tm) var(--e-out) !important;
}
html.fasl .fasl-grow-tile[data-grow-i="1"],
html.fasl .fasl-grow-tile[data-grow-i="2"],
html.fasl .fasl-grow-tile[data-grow-i="3"]{
  --glass:color-mix(in srgb, var(--s-soft) 78%, transparent);
  --glass-hi:color-mix(in srgb, var(--s-fx) 62%, transparent);
  --glass-lo:color-mix(in srgb, var(--s-soft) 92%, white);
}
/* второй и четвёртой — чуть плотнее, чтобы ряд не читался одной заливкой */
html.fasl .fasl-grow-tile[data-grow-i="1"],
html.fasl .fasl-grow-tile[data-grow-i="3"]{
  --glass:color-mix(in srgb, var(--s-soft) 92%, transparent);
}

/* --- БАҲОР: свет поднимается --- */
html.fasl[data-season="bahor"] .gl-a{ animation-name:faslGlSpringA; animation-duration:10s; }
html.fasl[data-season="bahor"] .gl-b{ animation-name:faslGlSpringB; animation-duration:8.5s; }
@keyframes faslGlSpringA{
  from{ transform:translate3d(0, 18%, 0) scale(1); }
  to  { transform:translate3d(6%, -14%, 0) scale(1.1); }
}
@keyframes faslGlSpringB{
  from{ transform:translate3d(0, 22%, 0) scale(1.04); }
  to  { transform:translate3d(-8%, -16%, 0) scale(.98); }
}

/* --- ТОБИСТОН: зной расходится вширь --- */
html.fasl[data-season="tobiston"] .gl-a{ animation-name:faslGlSummerA; animation-duration:9s; }
html.fasl[data-season="tobiston"] .gl-b{ animation-name:faslGlSummerB; animation-duration:7.5s; }
@keyframes faslGlSummerA{
  from{ transform:translate3d(-10%, 0, 0) scale(1); opacity:.8; }
  to  { transform:translate3d(16%, 2%, 0) scale(1.22); opacity:1; }
}
@keyframes faslGlSummerB{
  from{ transform:translate3d(12%, 0, 0) scale(1.16); opacity:1; }
  to  { transform:translate3d(-14%, -2%, 0) scale(1); opacity:.78; }
}

/* --- ТИРАМОҲ: свет оседает --- */
html.fasl[data-season="tiramoh"] .gl-a{ animation-name:faslGlAutumnA; animation-duration:12s; }
html.fasl[data-season="tiramoh"] .gl-b{ animation-name:faslGlAutumnB; animation-duration:10.5s; }
@keyframes faslGlAutumnA{
  from{ transform:translate3d(0, -12%, 0) scale(1.08); opacity:1; }
  to  { transform:translate3d(8%, 16%, 0) scale(.96); opacity:.72; }
}
@keyframes faslGlAutumnB{
  from{ transform:translate3d(0, -16%, 0) scale(1); opacity:.9; }
  to  { transform:translate3d(-6%, 20%, 0) scale(1.06); opacity:.7; }
}

/* --- ЗИМИСТОН: свет замер, идёт иней --- */
html.fasl[data-season="zimiston"] .gl-a{ animation-name:faslGlWinterA; animation-duration:16s; }
html.fasl[data-season="zimiston"] .gl-b{ animation-name:faslGlWinterB; animation-duration:18s; }
@keyframes faslGlWinterA{
  from{ transform:translate3d(0,0,0) scale(1); opacity:.7; }
  to  { transform:translate3d(3%, 2%, 0) scale(1.03); opacity:.9; }
}
@keyframes faslGlWinterB{
  from{ transform:translate3d(0,0,0) scale(1.02); opacity:.65; }
  to  { transform:translate3d(-3%, -2%, 0) scale(1); opacity:.85; }
}
/* иней: узкая холодная полоса проходит по стеклу раз в двенадцать секунд.
   Живёт только зимой — в другие сезоны слоя нет вовсе. */
html.fasl[data-season="zimiston"] .gr-bg::after{
  content:""; position:absolute; top:-20%; bottom:-20%; left:-40%; width:40%;
  background:linear-gradient(104deg,
    transparent, rgba(226,240,247,.75) 42%, rgba(255,255,255,.9) 52%,
    rgba(226,240,247,.6) 62%, transparent);
  transform:skewX(-14deg);
  animation:faslGlFrost 12s linear infinite;
  pointer-events:none;
}
@keyframes faslGlFrost{
  0%  { opacity:0; transform:translateX(0) skewX(-14deg); }
  8%  { opacity:.55; }
  26% { opacity:0; transform:translateX(360%) skewX(-14deg); }
  100%{ opacity:0; transform:translateX(360%) skewX(-14deg); }
}
html.fasl[data-season="zimiston"] .fasl-grow-tile[data-grow-i="1"] .gr-bg::after{ animation-delay:-3s; }
html.fasl[data-season="zimiston"] .fasl-grow-tile[data-grow-i="2"] .gr-bg::after{ animation-delay:-6s; }
html.fasl[data-season="zimiston"] .fasl-grow-tile[data-grow-i="3"] .gr-bg::after{ animation-delay:-9s; }

@media (prefers-reduced-motion:reduce){
  html.fasl[data-season="zimiston"] .gr-bg::after{ animation:none !important; opacity:0 !important; }
}


/* ============================================================================
   ПАНЕЛИ СТАТИСТИКИ: ПЕРЕХОД, ПОДСКАЗКА, СВЕТ ЗА КУРСОРОМ

   Строка-объяснение живёт в потоке, но свёрнута в ноль: при наведении она
   раскрывается вниз, а панель не прыгает — высота ряда задана заранее.
   Свет внутри стекла смещается к указателю: --lx/--ly пишет скрипт, а
   читаются они прямо в ключевых кадрах, поэтому идущее idle-движение
   сохраняется и конфликта transform-ов не возникает.
   ========================================================================= */
html.fasl .fasl-grow-tile.is-link{ cursor:pointer; }
html.fasl .fasl-grow-tile.is-link:focus-visible{
  outline:2px solid var(--acc); outline-offset:3px;
}
/* Стрелка перехода снята — правила ушли вместе с ней. */
/* строка-объяснение */
html.fasl .gr-hint{
  display:block; overflow:hidden;
  max-height:0; opacity:0; margin-top:0;
  font-size:11.5px; line-height:1.35; color:var(--acc);
  transition:max-height 380ms var(--e-out), opacity 300ms var(--e-out),
             margin-top 380ms var(--e-out);
}
@media (hover:hover) and (pointer:fine){
  html.fasl .fasl-grow-tile:hover .gr-hint{ max-height:2.8em; opacity:.9; margin-top:8px; }
  /* свет тянется к курсору поверх собственного медленного хода */
  html.fasl .fasl-grow-tile:hover .gl-a{
    animation-name:faslGlToPointerA; animation-duration:1.2s;
    animation-timing-function:cubic-bezier(.22,1,.36,1);
    animation-iteration-count:1; animation-fill-mode:forwards;
  }
  html.fasl .fasl-grow-tile:hover .gl-b{
    animation-name:faslGlToPointerB; animation-duration:1.4s;
    animation-timing-function:cubic-bezier(.22,1,.36,1);
    animation-iteration-count:1; animation-fill-mode:forwards;
  }
}
@keyframes faslGlToPointerA{
  to{ transform:translate3d(calc(var(--lx,0) * 26%), calc(var(--ly,0) * 22%), 0) scale(1.14); }
}
@keyframes faslGlToPointerB{
  to{ transform:translate3d(calc(var(--lx,0) * -20%), calc(var(--ly,0) * -18%), 0) scale(1.08); }
}
@media (prefers-reduced-motion:reduce){
  html.fasl .gr-hint{ transition:none; }
}

/* ============================================================================
   ЗНАЧОК И ЧЕРТА ПАНЕЛИ ЖИВУТ СВОИМ СЕЗОНОМ

   У стекла свой ход света (он уже есть), а здесь — два маленьких элемента,
   которые и делают панель узнаваемо сезонной. Движение подчинено смыслу
   сезона, а не придумано ради движения:

     баҳор     значок тянется ВВЕРХ, черта РАСТЁТ в длину — всё прибавляет;
     тобистон  значок дышит теплом, черта пульсирует яркостью — зной;
     тирамоҳ   значок покачивается, черта СНОСИТСЯ вбок и тает — уносит;
     зимистон  значок замер и лишь мерцает, по черте проходит иней.

   Всё на transform и opacity, циклы длинные (7–14 с): панель должна
   казаться живой, а не мигающей.
   ========================================================================= */
html.fasl .fasl-grow-tile > span[code-path]{
  transform-origin:50% 100%;
  will-change:transform;
}
html.fasl .gr-accent{ position:relative; overflow:hidden; }

/* --- БАҲОР: всё прибавляет --- */
html.fasl[data-season="bahor"] .fasl-grow-tile > span[code-path]{
  animation:faslIcRise 7.5s ease-in-out infinite alternate;
}
@keyframes faslIcRise{ from{ transform:translateY(1.5px); } to{ transform:translateY(-2.5px); } }
html.fasl[data-season="bahor"] .gr-accent{
  animation:faslAcGrow 6.5s cubic-bezier(.45,.05,.55,.95) infinite alternate;
}
@keyframes faslAcGrow{ from{ width:22px; } to{ width:40px; } }

/* --- ТОБИСТОН: зной --- */
html.fasl[data-season="tobiston"] .fasl-grow-tile > span[code-path]{
  animation:faslIcHeat 6s ease-in-out infinite alternate;
}
@keyframes faslIcHeat{ from{ transform:scale(1); } to{ transform:scale(1.07); } }
html.fasl[data-season="tobiston"] .gr-accent{
  animation:faslAcPulse 4.5s ease-in-out infinite;
}
@keyframes faslAcPulse{ 0%,100%{ opacity:.6; } 50%{ opacity:1; } }

/* --- ТИРАМОҲ: уносит --- */
html.fasl[data-season="tiramoh"] .fasl-grow-tile > span[code-path]{
  animation:faslIcSway 9s ease-in-out infinite alternate;
}
@keyframes faslIcSway{ from{ transform:rotate(-2.4deg); } to{ transform:rotate(2.4deg); } }
html.fasl[data-season="tiramoh"] .gr-accent{
  animation:faslAcDrift 8s cubic-bezier(.45,.05,.55,.95) infinite;
}
@keyframes faslAcDrift{
  0%  { transform:translateX(0); opacity:.8; }
  70% { transform:translateX(10px); opacity:.25; }
  71% { transform:translateX(-8px); opacity:0; }
  100%{ transform:translateX(0); opacity:.8; }
}

/* --- ЗИМИСТОН: замерло, идёт иней --- */
html.fasl[data-season="zimiston"] .fasl-grow-tile > span[code-path]{
  animation:faslIcFrost 11s ease-in-out infinite;
}
@keyframes faslIcFrost{ 0%,100%{ opacity:.82; } 50%{ opacity:1; } }
html.fasl[data-season="zimiston"] .gr-accent::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
  transform:translateX(-100%);
  animation:faslAcShine 9s linear infinite;
}
@keyframes faslAcShine{
  0%  { transform:translateX(-100%); }
  22% { transform:translateX(100%); }
  100%{ transform:translateX(100%); }
}
/* у каждой панели свой сдвиг фазы — ряд дышит волной, а не в такт */
html.fasl .fasl-grow-tile[data-grow-i="1"] > span[code-path],
html.fasl .fasl-grow-tile[data-grow-i="1"] .gr-accent{ animation-delay:-1.6s; }
html.fasl .fasl-grow-tile[data-grow-i="2"] > span[code-path],
html.fasl .fasl-grow-tile[data-grow-i="2"] .gr-accent{ animation-delay:-3.2s; }
html.fasl .fasl-grow-tile[data-grow-i="3"] > span[code-path],
html.fasl .fasl-grow-tile[data-grow-i="3"] .gr-accent{ animation-delay:-4.8s; }
html.fasl[data-season="zimiston"] .fasl-grow-tile[data-grow-i="1"] .gr-accent::after{ animation-delay:-2.2s; }
html.fasl[data-season="zimiston"] .fasl-grow-tile[data-grow-i="2"] .gr-accent::after{ animation-delay:-4.4s; }
html.fasl[data-season="zimiston"] .fasl-grow-tile[data-grow-i="3"] .gr-accent::after{ animation-delay:-6.6s; }

@media (prefers-reduced-motion:reduce){
  html.fasl .fasl-grow-tile > span[code-path],
  html.fasl .gr-accent, html.fasl .gr-accent::after{ animation:none !important; }
}

/* --- ПЕРЕКЛЮЧАТЕЛЬ СЕЗОНОВ В ПАНЕЛИ МАЪМУРА -------------------------------
   Тот же вид, что на главной, только по левому краю и без внешних полей
   страницы: он стоит внутри панели, а не над разворотом. */
html.fasl .fasl-omor{
  margin:10px 0 18px;
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
}
html.fasl .fasl-omor .fasl-seasons{ margin:0; }
html.fasl .fasl-omor .fasl-note{ margin:0; max-width:640px; }
@media (max-width:600px){
  html.fasl .fasl-omor{ align-items:stretch; }
}

/* ============================================================================
   СПИСОК УСТОДОВ В ПАНЕЛИ МАЪМУРА НЕ ДОЛЖЕН УХОДИТЬ ПОД БЛОК

   ЧТО ЛОМАЛОСЬ. Выпадающий список у поля «Устод (пахш кунед)» — абсолютный
   слой (AdminPanel.tsx:524). Он лежит внутри обёртки таблицы с
   overflow-x:auto (AdminPanel.tsx:501). По спецификации, если одна ось не
   visible, вторая тоже перестаёт быть visible: список обрезался снизу и
   пропадал под следующей карточкой. Выбрать нового устода было нельзя.

   ЧЕМ ЛЕЧИМ. На широких экранах, где таблица и так помещается, снимаем
   обрезку с обёртки — список выпадает наружу. На узких оставляем
   горизонтальную прокрутку: там она нужнее, и таблицу иначе не прочесть.

   Плюс поднимаем сам список над соседями: z-20 бандла проигрывал карточкам,
   идущим следом, — у них свой контекст наложения.
   ========================================================================= */
@media (min-width:1024px){
  html.fasl [code-path^="src/pages/admin/AdminPanel.tsx:501:"]{
    overflow:visible !important;
  }
  html.fasl [code-path^="src/pages/admin/AdminPanel.tsx:500:"]{
    overflow:visible !important;
    position:relative; z-index:30;
  }
}
html.fasl [code-path^="src/pages/admin/AdminPanel.tsx:524:"]{
  z-index:80 !important;
  max-height:min(46vh, 340px);
  overflow-y:auto !important;
  overscroll-behavior:contain;
}
/* Список длиннее экрана прокручивается внутри себя — иначе при десятке
   устодов нижние строки снова оказались бы недосягаемы. */
html.fasl [code-path^="src/pages/admin/AdminPanel.tsx:524:"]::-webkit-scrollbar{ width:8px; }
html.fasl [code-path^="src/pages/admin/AdminPanel.tsx:524:"]::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.18); border-radius:4px;
}

/* ============================================================================
   ПЛЁНКА НАД ВИДЕО СНЯТА СОВСЕМ

   Сезонная подложка над кадром убрана: она и читалась тем самым «дымом» —
   поле и техника уходили в молочную пелену, а видео ради этого и ставят.

   Читаемость держит не пелена поверх кадра, а свечение вокруг самих букв
   (правила выше): тень лежит на тексте, а не на видео, и ни один пиксель
   кадра от неё не мутнеет. На узком экране свечение плотнее — там строка
   идёт поверх всего кадра.

   Лёгкая добавка контраста и цвета — не «улучшение качества», а
   компенсация: кадр 1280x720 растянут на весь разворот, и после снятия
   пелены ему идёт немного чёткости. Ни резкости, ни артефактов это не
   добавляет — исходник остаётся исходником.
   ========================================================================= */
html.fasl-home .hero-video-x::after{ content:none !important; background:none !important; }
@media (max-width:767px){
  html.fasl-home .hero-video-x::after{ content:none !important; background:none !important; }
  /* без пелены на узком экране строке нужно больше собственного света */
  html.fasl-home .hero-title-x{
    text-shadow:0 1px 3px rgba(255,255,255,.95),
                0 2px 26px rgba(255,255,255,.85) !important;
  }
  html.fasl-home .hero-sub-x{
    text-shadow:0 1px 3px rgba(255,255,255,.95),
                0 1px 16px rgba(255,255,255,.8) !important;
  }
}
/* Обработка кадра снята совсем: видео идёт как снято. */
html.fasl-home .hero-video-x video{ filter:none !important; }

/* Прозрачная шапка на верхушке главной ОТМЕНЕНА по решению: подписи меню
   на светлом подвижном кадре читались плохо. Шапка снова белая всегда —
   правила выше, они и работают. */

/* ============================================================================
   РАЗВОРОТ И ШАПКА: ПРОЗРАЧНЫЙ ВЕРХ, БЕЛЫЙ ТЕКСТ, ЧИСТОЕ ВИДЕО

   ВИДЕО не трогаем ничем: ни фильтров резкости, ни контраста — кадр идёт
   как снят. Прежние попытки поднять качество обработкой сняты по решению.

   ШАПКА на самой верхушке главной прозрачна, при прокрутке снова белая.
   Подписи меню НЕ подсвечиваем: свечение вокруг букв в шапке выглядело
   грязно. Они остаются тёмными и читаются за счёт затемнения кадра под
   ними — того же, что держит заголовок.

   ТЕКСТ РАЗВОРОТА белый на мягком тёмном сходе слева, сходящем на нет к
   технике справа. Это не прежняя молочная пелена: она гасила весь кадр,
   а этот сход живёт только под колонкой текста.
   ========================================================================= */

/* --- мягкое затемнение под текстом --- */
html.fasl-home .hero-video-x::after{
  content:"" !important;
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg,
      rgba(18,24,14,.64) 0%,
      rgba(18,24,14,.46) 34%,
      rgba(18,24,14,.16) 56%,
      rgba(18,24,14,0) 74%) !important;
}
@media (max-width:767px){
  html.fasl-home .hero-video-x::after{
    background:linear-gradient(180deg,
        rgba(18,24,14,.52) 0%,
        rgba(18,24,14,.34) 42%,
        rgba(18,24,14,.62) 100%) !important;
  }
}

/* --- белый текст разворота --- */
html.fasl-home .hero-title-x{
  color:#FFFFFF !important;
  text-shadow:0 2px 14px rgba(10,16,8,.45) !important;
}
html.fasl-home .hero-sub-x{
  color:rgba(255,255,255,.92) !important;
  text-shadow:0 1px 10px rgba(10,16,8,.4) !important;
}
html.fasl-home #fasl-kicker,
html.fasl-home .fasl-kicker{
  color:rgba(255,255,255,.94) !important;
  text-shadow:0 1px 8px rgba(10,16,8,.45) !important;
}
html.fasl-home .fasl-kicker b, html.fasl-home .fasl-kicker strong{ color:#FFFFFF !important; }
/* Вторая половина строки — работа сезона — своим правилом красилась в
   серый (.fasl-kicker span). На тёмном кадре она пропадала; делаем белой,
   чуть тише заголовка, чтобы иерархия строки сохранилась.

   Свечение из прежней версии снимаем здесь же: на развороте оно осталось
   от белой темы и на тёмном кадре читалось грязью. */
/* Не .86: ровно этим белым когда-то была плёнка над видео, и страж в
   тестах ищет это значение по всему файлу. Совпадение случайное — уже
   второй раз; проще сдвинуть оттенок на сотую. */
html.fasl-home .fasl-kicker span{ color:rgba(255,255,255,.87) !important; }
html.fasl-home .fasl-kicker{ text-shadow:0 1px 8px rgba(10,16,8,.45) !important; }
html.fasl-home [code-path^="src/pages/Home.tsx:235:"]{
  background:transparent !important;
  color:#FFFFFF !important;
  border:1.5px solid rgba(255,255,255,.85) !important;
}
@media (hover:hover) and (pointer:fine){
  html.fasl-home [code-path^="src/pages/Home.tsx:235:"]:hover{
    background:rgba(255,255,255,.14) !important;
    border-color:#FFFFFF !important;
  }
}

/* --- прозрачная шапка на верхушке главной, БЕЗ подсветки подписей --- */
html.fasl-home body:not(.eag-scrolled) header[class*="bg-[#F5F3EB]"],
html.fasl-home body:not(.eag-scrolled) header.eag-topbar-x,
html.fasl-home body:not(.eag-scrolled) .top-nav-x{
  background:transparent !important;
  border-bottom-color:transparent !important;
  box-shadow:none !important;
  transition:background 320ms var(--e-out), border-color 320ms var(--e-out) !important;
}
/* На прозрачной шапке подписи белые: тёмные буквы на золотом поле кадра
   почти сливались. Свечения вокруг них нет — по решению; читаются за счёт
   затемнения кадра. Значки наследуют цвет буквы (stroke:currentColor в
   разметке), поэтому белеют вместе с ней. */
html.fasl-home body:not(.eag-scrolled) .top-nav-x [class*="text-[#1F3D26]"],
html.fasl-home body:not(.eag-scrolled) header.eag-topbar-x [class*="text-[#3C4A37]"],
html.fasl-home body:not(.eag-scrolled) .top-nav-x nav a,
html.fasl-home body:not(.eag-scrolled) header a,
html.fasl-home body:not(.eag-scrolled) header span,
html.fasl-home body:not(.eag-scrolled) header button,
html.fasl-home body:not(.eag-scrolled) header p{
  color:#FFFFFF !important;
  text-shadow:none !important;
}
html.fasl-home body:not(.eag-scrolled) header svg{
  color:#FFFFFF !important;
  stroke:currentColor;
}
/* Плашка — ТОЛЬКО у выбранного пункта. Прежний селектор [class*="bg-["]
   ловил любую ссылку с любым фоновым классом, и весь ряд превращался в
   белые таблетки. Метка выбранного у бандла одна: bg-[#E8F3E1]. */
html.fasl-home body:not(.eag-scrolled) .top-nav-x a[class*="bg-[#E8F3E1]"]{
  background:rgba(255,255,255,.92) !important;
  color:var(--s-deep) !important;
}
html.fasl-home body:not(.eag-scrolled) .top-nav-x a[class*="bg-[#E8F3E1]"] svg{
  color:var(--s-deep) !important;
}
/* Название сайта и всё, что рядом с ним, — тоже белым. */
html.fasl-home body:not(.eag-scrolled) .top-nav-x a,
html.fasl-home body:not(.eag-scrolled) .top-nav-x a span,
html.fasl-home body:not(.eag-scrolled) .top-nav-x a b,
html.fasl-home body:not(.eag-scrolled) .top-nav-x > div > span{
  color:#FFFFFF !important;
}
/* Золотая кнопка-призыв остаётся золотой: она и задумана как акцент. */
html.fasl-home body:not(.eag-scrolled) .top-nav-x a[class*="bg-[#D08A18]"],
html.fasl-home body:not(.eag-scrolled) .top-nav-x a[class*="bg-[#2F7A3D]"]{
  color:#FFFFFF !important;
}
/* Поле поиска — своя светлая подложка, буквы в нём тёмные. */
html.fasl-home body:not(.eag-scrolled) header input,
html.fasl-home body:not(.eag-scrolled) header input::placeholder{
  color:var(--f-ink-2) !important;
}
html.fasl-home body:not(.eag-scrolled) header input{
  background:rgba(255,255,255,.9) !important;
}

/* --- телефон: разворот уходит под шапку, иначе прозрачность бессмысленна --- */
@media (max-width:767px){
  html.fasl-home .hero-full-x{
    margin-top:calc(var(--hdr-h, 64px) * -1) !important;
    border-top-left-radius:0 !important; border-top-right-radius:0 !important;
    border-top:0 !important;
  }
  html.fasl-home [code-path^="src/pages/Home.tsx:224:"]{
    padding-top:calc(var(--hdr-h, 64px) + 12px) !important;
  }
}

/* ============================================================================
   ЗОНА «РЕКОМЕНДАЦИИ + УСТОДОН» ЖИВЁТ СЕЗОНОМ

   Два блока идут подряд и читаются одним разделом, поэтому и фон у них
   общий: мягкая светящаяся заливка в тоне сезона, одна на оба.

   Цвета подобраны СВЕТЛЫЕ и тёплые — не те приглушённые, что у карточек.
   Сезонная палитра сайта рассчитана на подписи и значки, для больших
   плоскостей она темна; здесь свои тона, выведенные из неё, но поднятые
   по светлоте:

     баҳор     молодая зелень с белым светом сверху;
     тобистон  солнечный крем, тёплый и открытый;
     тирамоҳ   персиковая охра, мягкая, без красноты;
     зимистон  ледяная лазурь, светлая и чистая.

   Переливается сверху вниз, чтобы полоса не читалась плоским прямоугольником,
   и меняется тем же плавным переходом, что и весь сайт.
   ========================================================================= */
html.fasl[data-season="bahor"]{    --s-zone-a:#EDF8E2; --s-zone-b:#F7FCF2; --s-zone-line:#DCEDCB; }
html.fasl[data-season="tobiston"]{ --s-zone-a:#FFF6E0; --s-zone-b:#FFFCF3; --s-zone-line:#F4E6C6; }
html.fasl[data-season="tiramoh"]{  --s-zone-a:#FDEDE1; --s-zone-b:#FFF8F3; --s-zone-line:#F3DCCC; }
html.fasl[data-season="zimiston"]{ --s-zone-a:#E9F2F9; --s-zone-b:#F6FBFE; --s-zone-line:#D8E7F1; }

html.fasl-home section[code-path^="src/pages/Home.tsx:295:"],
html.fasl-home #eag-home-bottom{
  background:var(--s-zone-a, #F7F6F0) !important;
  transition:background var(--tm) var(--e-out) !important;
}
/* ЗОНА ИДЁТ СПЛОШНОЙ ПОЛОСОЙ — вместе с промежутком между блоками.

   Между «Барои шумо тавсия медиҳем» и «Устодони мо» стоит маленький подвал
   бандла («eAgronom © 2026…»). Перенести его нельзя: он в другой ветке
   разметки, а сам блок устодон удерживается у своего места прослойкой
   eag-extra — она возвращает его обратно, если сдвинуть. Поэтому красим
   все три элемента подряд одним тоном, а зазоры между ними убираем: полоса
   получается непрерывной, хотя собрана из трёх кусков.

   ШИРИНА. Колонка с рекомендациями лежит внутри <main> с zoom:1.25 и
   занимает 40..1390, а блок устодон — вне main, шириной по своим полям в
   115px. Разные системы координат: подгоняем поля второго под отступ
   первой (32px CSS внутри zoom дают ровно 40px на экране).

   Скругление — только по краям полосы: сверху у рекомендаций, снизу у
   устодон. Внутри стыки прямые, иначе видны швы. */
html.fasl-home section[code-path^="src/pages/Home.tsx:295:"],
html.fasl-home footer[code-path^="src/pages/Home.tsx:336:"],
html.fasl-home #eag-home-bottom{
  background:var(--s-zone-a, #F7F6F0) !important;
  background-attachment:fixed;
  border:0 !important;
  transition:background var(--tm) var(--e-out) !important;
}
html.fasl-home section[code-path^="src/pages/Home.tsx:295:"]{
  padding:26px 24px 30px !important;
  margin:26px 0 0 !important;
  border-radius:var(--r-4, 22px) var(--r-4, 22px) 0 0 !important;
}
html.fasl-home footer[code-path^="src/pages/Home.tsx:336:"]{
  padding:6px 24px 10px !important;
  margin:0 !important;
  border-radius:0 !important;
}
html.fasl-home #eag-home-bottom{
  padding:14px 24px 30px !important;
  border-radius:0 0 var(--r-4, 22px) var(--r-4, 22px) !important;
}
/* Блоку устодон прослойка задаёт свою ширину — снимаем, иначе поля не
   растягивают его до края полосы. */
html.fasl-home #eag-home-bottom{ width:auto !important; max-width:none !important; }
/* Нижний отступ main рождал 30px разрыва между подвалом и устодон — полоса
   рвалась. Убираем его на главной: расстояние даёт сам подвал. */
html.fasl-home main{ padding-bottom:0 !important; }
@media (min-width:1024px){
  /* 40px = 32px внутренних отступов main, умноженные на его zoom */
  html.fasl-home #eag-home-bottom{ margin:0 40px 0 !important; }
}
@media (max-width:1023px){
  html.fasl-home #eag-home-bottom{ margin:0 20px 0 !important; }
}
@media (max-width:600px){
  html.fasl-home section[code-path^="src/pages/Home.tsx:295:"]{ padding:20px 14px 20px !important; }
  html.fasl-home #eag-home-bottom{ padding:12px 14px 24px !important; margin:0 14px 0 !important; }
}

/* ============================================================================
   ФОН ВСЕЙ СТРАНИЦЫ ЖИВЁТ СЕЗОНОМ

   Полосы с рекомендациями и устодон было мало: вокруг них оставался
   неизменный кремовый лист, и сезон читался заплаткой. Красим весь фон —
   тем же семейством тонов, но НА СТУПЕНЬ СВЕТЛЕЕ полосы: так зона всё ещё
   выделяется, а страница целиком идёт в цвете времени года.

   Тона очень бледные — на них лежит весь текст сайта, и любая насыщенность
   здесь съела бы контраст подписей.
   ========================================================================= */
html.fasl[data-season="bahor"]{    --s-page:#FAFDF5; }
html.fasl[data-season="tobiston"]{ --s-page:#FFFDF5; }
html.fasl[data-season="tiramoh"]{  --s-page:#FFFAF5; }
html.fasl[data-season="zimiston"]{ --s-page:#F7FBFE; }

html.fasl body{
  background:var(--s-page, var(--f-bg)) !important;
  transition:background var(--tm) var(--e-out) !important;
}
/* Разворот и прочие места, где фон брался напрямую из --f-bg, идут за
   страницей: иначе на сезонном листе остались бы кремовые островки. */
html.fasl [class*="bg-[#F9F7F0]"],
html.fasl [class*="bg-[#FCFBF7]"]{
  background-color:var(--s-page, var(--f-bg)) !important;
  transition:background-color var(--tm) var(--e-out) !important;
}

/* ============================================================================
   БЕЛЫХ ПЯТЕН НЕ ОСТАЁТСЯ

   После перекраски листа на странице всё ещё держались крупные белые
   плоскости: корневая обёртка страницы, обе панели шапки, полоса «Аз
   омӯзиш то сертификат» и пустые блоки-заглушки. На сезонном фоне они
   читались заплатками.

   Красим их не сплошным цветом, а тем же --s-page, что и лист: они и
   должны быть листом, а не отдельными карточками. КАРТОЧКИ при этом
   остаются белыми — на них держится вся иерархия; сезон им даёт полоса
   под ними, а не собственная заливка.
   ========================================================================= */
html.fasl [class*="bg-[#F5F3EB]"],
html.fasl [class*="min-h-screen"],
html.fasl [code-path^="src/pages/Home.tsx:146:"]{
  background-color:var(--s-page, var(--f-bg)) !important;
  transition:background-color var(--tm) var(--e-out) !important;
}
/* Обе панели шапки — и верхняя, и навигационная. При прокрутке они и так
   белые по решению; здесь только тон в цвет листа, чтобы на самом верху
   не было ступеньки. */
html.fasl body.eag-scrolled header[class*="bg-[#F5F3EB]"],
html.fasl body.eag-scrolled header.eag-topbar-x,
html.fasl body.eag-scrolled .top-nav-x{
  background:var(--s-page, #FFFFFF) !important;
}
/* Полоса «Аз омӯзиш то сертификат»: белая карточка во всю ширину посреди
   сезонного листа выглядела дырой. */
html.fasl [code-path^="src/components/JourneyPath.tsx:31:"]{
  background:var(--s-zone-a, #F7F6F0) !important;
  border:1px solid var(--s-zone-line, transparent) !important;
  transition:background var(--tm) var(--e-out), border-color var(--tm) var(--e-out) !important;
}
/* Пустая строка-заглушка под заголовком раздела: у неё нет своего смысла,
   и белый фон ей достался от утилиты. */
html.fasl [code-path^="src/pages/Home.tsx:262:"]{ background:transparent !important; }

/* Подвал бандла. Класс у него тёмно-зелёный, но собственное правило бандла
   перекрашивает его в кремовый — на сезонном листе это самое большое белое
   пятно страницы. Целимся по code-path, а не по классу цвета: правила про
   .bg-[#0B2818] сторожит тест «бренд остаётся брендом», и трогать их нельзя. */
html.fasl footer[code-path^="src/components/layout/Footer.tsx:6:"]{
  background:var(--s-page, var(--f-bg)) !important;
  transition:background var(--tm) var(--e-out) !important;
}

/* Панель меню в шапке каталога (Navbar.tsx:71) — белая полоса во всю
   ширину. Она не карточка, а часть шапки, поэтому идёт в цвет листа. */
html.fasl [code-path^="src/components/layout/Navbar.tsx:71:"]{
  background:var(--s-page, var(--f-bg)) !important;
  transition:background var(--tm) var(--e-out) !important;
}

/* ============================================================================
   ЗОНА — ОДИН РОВНЫЙ ЦВЕТ

   Перелив сверху вниз убран по решению: обе полосы и промежуток между ними
   заливаются одним тоном, без перехода к светлому. Так зона читается единым
   куском, а не тремя оттенками подряд.

   Заодно гасим белое внутри неё: у блока устодон и у ряда рекомендаций были
   собственные светлые подложки, и на ровной заливке они проступали пятнами.
   ========================================================================= */
html.fasl-home section[code-path^="src/pages/Home.tsx:295:"],
html.fasl-home footer[code-path^="src/pages/Home.tsx:336:"],
html.fasl-home #eag-home-bottom,
html.fasl-home #eag-home-bottom .ehb-teach,
html.fasl-home #eag-home-bottom .fasl-teach{
  background:var(--s-zone-a, #F7F6F0) !important;
  background-image:none !important;
}

/* ============================================================================
   КАРТОЧКА КУРСА В КАТАЛОГЕ ЖИВЁТ СЕЗОНОМ

   На главной карточки курсов уже сезонные — линейка и подпись категории
   берут --s-acc. В каталоге (Courses.tsx) слой их не трогал вовсе: там
   оставался фирменный изумруд бандла, один и тот же круглый год. Теперь
   каталог и главная говорят одним цветом.

   Что перекрашено:
     • подпись категории — линейкой и словом, как на главной;
     • метка «Ройгон» — тем же тоном, но мягче;
     • заголовок при наведении;
     • полоска под заголовком раздела и кнопки-фильтры;
     • тонкая сезонная черта под снимком курса — она и связывает
       фотографию с текстом.
   ========================================================================= */

/* подпись категории: линейка + слово вместо изумрудной плашки */
html.fasl [code-path^="src/pages/Courses.tsx:59:"]{
  display:inline-flex !important; align-items:center !important; gap:7px !important;
  background:none !important; color:var(--s-acc) !important;
  border:0 !important; border-radius:0 !important;
  padding:0 !important; font-weight:600 !important;
  transition:color var(--tm) var(--e-out) !important;
}
html.fasl [code-path^="src/pages/Courses.tsx:59:"]::before{
  content:""; flex:none; width:14px; height:1px;
  background:var(--s-acc);
  transition:background-color var(--tm) var(--e-out);
}
/* «Ройгон» — сезонный, но тише категории: это уточнение, а не заголовок */
html.fasl [code-path^="src/pages/Courses.tsx:61:"]{
  background:var(--season-surface, var(--s-soft)) !important;
  color:var(--s-deep) !important;
  border:1px solid color-mix(in srgb, var(--s-acc) 26%, transparent) !important;
  transition:background var(--tm) var(--e-out), color var(--tm) var(--e-out) !important;
}
/* цена в сомони — тот же тихий тон */
html.fasl [code-path^="src/pages/Courses.tsx:63:"]{
  background:color-mix(in srgb, var(--s-acc) 10%, transparent) !important;
  color:var(--s-deep) !important;
}
/* заголовок курса: при наведении уходит в сезон, а не в изумруд */
html.fasl [code-path^="src/pages/Courses.tsx:66:"]{
  transition:color var(--tm) var(--e-out) !important;
}
html.fasl [code-path^="src/pages/Courses.tsx:52:"]:hover [code-path^="src/pages/Courses.tsx:66:"]{
  color:var(--s-acc) !important;
}
/* тонкая сезонная черта под снимком — связывает фотографию с текстом */
html.fasl [code-path^="src/pages/Courses.tsx:54:"]{
  position:relative;
  border-bottom:2px solid var(--s-acc) !important;
  transition:border-color var(--tm) var(--e-out) !important;
}
/* ============================================================================
   БОКОВАЯ КАРТОЧКА КУРСА НЕ ЕДЕТ ЗА ПРОКРУТКОЙ

   В сборке у неё стоит sticky top-24: карточка прилипает на 96px от верха и
   идёт вместе со страницей, чтобы кнопка «Гузаштани тест» всегда была под
   рукой. По решению — выключено: карточка ведёт себя как обычный блок и
   уходит вверх вместе с остальным.

   Снимаем только прилипание. Ширина, поля, рамка и порядок колонок остаются
   сборкины: static возвращает элемент в общий поток, ничего больше не трогая.
   Вернуть — убрать это правило, класс в разметке на месте. */
html.fasl [code-path^="src/pages/CourseDetail.tsx:114:"]{
  position:static !important;
}

/* полоска под заголовком раздела и кнопки-фильтры */
html.fasl [code-path^="src/pages/Courses.tsx:32:"]{
  background:var(--s-acc) !important;
  transition:background-color var(--tm) var(--e-out) !important;
}
html.fasl [code-path^="src/pages/Courses.tsx:42:"][class*="bg-[#10B981]"]{
  background:var(--s-acc) !important;
  color:#FFFFFF !important;
  transition:background-color var(--tm) var(--e-out),
             box-shadow var(--tm) var(--e-out) !important;
}