/* ============================================================
   baji guide — «лента»
   Одна колонка, полосы во всю ширину, едущая витрина обложек.
   ============================================================ */

:root {
  --paper:   #f7f7fb;
  --tint:    #ece9f7;
  --card:    #ffffff;
  --ink:     #0a0c18;
  --ink-2:   #39405a;
  /* Было #6a7190 — 4.49 на бумажном фоне при норме 4.5. Не проходило
     буквально на сотую, но проверка на то и нужна, чтобы не спорить. */
  --ink-3:   #5f6684;
  --line:    rgba(10,12,24,.12);
  --line-2:  rgba(10,12,24,.06);

  --night:   #0a0c18;
  --night-2: #141733;

  --cyan:    #17c9e0;
  --magenta: #ef3d92;
  --violet:  #7b5cf0;
  --lime:    #8fd94a;

  /* Те же акценты, но пригодные для текста на светлом.
     Яркие версии выше живут в градиентах, плашках и подчёркиваниях — там
     они и должны быть яркими. Но как цвет мелкого текста они не проходят
     WCAG: маджента даёт 3.65 на белом при норме 4.5, фиолетовый — 4.24 на
     бумажном фоне. Считано по формуле из фактических цветов, а не на глаз.
     Тёмные варианты: 6.00 и 6.85 на белом, и не ниже 5.0 на тонированной
     полосе. На тёмных полосах текст белый, там вопроса нет. */
  --magenta-t: #b8246b;
  --violet-t:  #5b3fd0;

  --r:       18px;
  --r-2:     12px;
  --r-3:     999px;
  --text:    840px;
  --wrap:    1200px;
  --gap:     clamp(16px, 2.4vw, 28px);
}

* { box-sizing: border-box; }
/* `overflow-x: hidden` здесь больше нет, и это не мелкая уборка.
   Страховку поставили, когда ленту обложек ещё выносило за экран: документ
   отчитывался о ширине больше окна, и замер приёмки это ловил. Но
   `overflow-x` на корне **отменяет `position: sticky`** — прокрутка
   перестаёт принадлежать корневому элементу, и шапке не за что цепляться.
   Шапка на всём сайте не липла ни на одной странице (в Chromium уезжала
   ровно на величину прокрутки), и по коду это было не видно: правило
   стоит в одном месте, а ломается совсем в другом.
   Само переполнение к этому времени уже было вылечено по-настоящему —
   весом правил расстановки и своим `overflow: hidden` у самой ленты.
   Проверено перед снятием: 24 страницы × пять ширин (360, 390, 430, 768,
   1440) × два движка — документ нигде не шире окна, вбок не едет.
   Это ровно тот случай, о котором предупреждает правило зоны: заткнуть
   замер вместо починки — значит получить поломку в другом месте. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* `overflow-x: clip`, а не `hidden` — разница здесь принципиальная.
   Полосы `.bleed` растягиваются на `100vw`, а `100vw` **включает ширину
   полосы прокрутки**, тогда как доступная области окна её не включает. На
   системе с классической (не накладной) полосой каждая такая секция шире
   экрана на её ширину, и внизу появляется горизонтальная прокрутка. В
   headless-браузере полоса накладная, нулевой ширины, поэтому замер этого
   не ловит — поймать можно только на живой машине.
   `hidden` эту прокрутку тоже убирал, но создавал контейнер прокрутки и тем
   отменял `position: sticky` у шапки. `clip` контейнера не создаёт: лишнее
   просто отрезается, а шапка продолжает липнуть. */
body { margin: 0; color: var(--ink);
       background:
         radial-gradient(1100px 560px at 50% -280px, rgba(123,92,240,.10),
                         transparent 68%),
         radial-gradient(760px 420px at 104% 640px, rgba(23,201,224,.08),
                         transparent 70%),
         var(--paper);
       background-repeat: no-repeat;
       font-family: 'Noto Sans Bengali','Nirmala UI','Shonar Bangla','Hind Siliguri',system-ui,'Segoe UI',sans-serif; font-size: clamp(16px, 1.05rem, 18px);
       line-height: 1.72; overflow-x: clip; }

img { max-width: 100%; height: auto; display: block; }
.num, code, kbd, .tbl td.n { font-family: 'Cascadia Mono',Consolas,'DejaVu Sans Mono','Roboto Mono',ui-monospace,monospace;
  font-variant-numeric: tabular-nums; }

a { color: var(--violet-t); text-decoration: underline;
    text-underline-offset: 3px; }
a:hover { color: var(--magenta-t); }

/* Ссылка «к содержимому»: спрятана за краем экрана, выезжает по фокусу.
   Не `display: none` — скрытое так до клавиатуры не доходит. */
.skip { position: absolute; inset-inline-start: -9999px; top: 0; z-index: 60;
        background: var(--night); color: #fff; padding: 12px 18px;
        border-radius: 0 0 var(--r-2) 0; text-decoration: none;
        font-weight: 700; }
.skip:focus { inset-inline-start: 0; color: #fff; }

.wrap { width: min(var(--wrap), 100% - 2*var(--gap)); margin-inline: auto; }

/* Разрядка заголовков — только у латиницы, ради симметрии правила.
   Отрицательная разрядка бенгальской вязи не вредит: буквы сходятся плотнее,
   মাত্রা остаётся сплошной, и снимки это подтверждают. Но правило «трогаем
   межбуквенное расстояние только там, где письмо это допускает» должно
   работать в обе стороны, иначе следующий человек прочитает его как
   «положительную нельзя, отрицательную можно всегда» и однажды ошибётся. */
h1, h2, h3 { line-height: 1.16; margin: 0 0 .5em; }
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3 {
  letter-spacing: -.024em; }
h1 { font-size: clamp(34px, 5.6vw, 62px); font-weight: 800; }
h2 { font-size: clamp(25px, 3.2vw, 38px); font-weight: 800;
     margin: 1.8em 0 .7em; }
h3 { font-size: clamp(18px, 2vw, 22px); font-weight: 700; margin-top: 1.4em; }
p  { margin: 0 0 1.05em; }

/* --- шапка: знак, меню, язык. Кнопки здесь нет — выход живёт в нижней
   полосе, она на экране всегда. ------------------------------------------ */
.top { position: sticky; top: 0; z-index: 40; background: rgba(10,12,24,.9);
       box-shadow: inset 0 -1px 0 0 rgba(255,255,255,.1); }
.top .bar { display: flex; align-items: center; gap: 14px; padding: 11px 0; }
.logo { display: inline-flex; align-items: center; gap: 10px;
        text-decoration: none; color: #fff; font-weight: 800; }
.logo .mk { width: 32px; height: 32px; border-radius: 9px; display: grid;
            place-items: center; color: #06121a; font-family: 'Cascadia Mono',Consolas,'DejaVu Sans Mono','Roboto Mono',ui-monospace,monospace;
            font-size: 16px; font-weight: 700;
            background: linear-gradient(145deg, var(--cyan), var(--lime));
            box-shadow: 0 6px 18px rgba(23,201,224,.4); }
.logo .tx { display: flex; flex-direction: column; line-height: 1.15;
            font-size: 18px; }
.logo .tx em { font-style: normal; font-size: 11px; font-weight: 500;
               color: rgba(255,255,255,.5); }
.lb { text-transform: lowercase !important; }

.nav { display: flex; gap: 2px; margin-inline-start: auto; flex-wrap: wrap; }
.nav a { padding: 8px 12px; border-radius: var(--r-3); font-size: 15px;
         color: rgba(255,255,255,.7); text-decoration: none; }
.nav a:hover { background: rgba(255,255,255,.1); color: #fff; }
.nav a[aria-current] { color: #06121a; font-weight: 700;
                       background: linear-gradient(135deg, var(--cyan),
                                   var(--lime)); }
.lang { font-size: 14px; color: rgba(255,255,255,.78); text-decoration: none;
        padding: 7px 12px; border-radius: var(--r-3);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }

/* --- кнопки ------------------------------------------------------------- */
/* Свечение под кнопкой симметричное и почти без сдвига вниз. Прежние
   `0 10px 30px` уводили ореол на 40 px под кнопку: рядом с прозрачной
   кнопкой, у которой ореола нет, пара читалась как стоящая на разной
   высоте, а подпись под ней попадала внутрь свечения. Коробки всегда были
   одинаковые — расходилась оптика, и чинится она тоже оптикой. */
.btn { display: inline-flex; align-items: center; justify-content: center;
       gap: 9px; padding: 15px 28px; border-radius: var(--r-3);
       font-weight: 800; font-size: 17px; line-height: 1.25;
       text-decoration: none; text-align: center;
       color: #06121a;
       background: linear-gradient(135deg, var(--cyan), var(--lime));
       box-shadow: 0 2px 22px rgba(23,201,224,.34);
       transition: transform .18s ease, box-shadow .18s ease; }
.btn:hover { color: #06121a; transform: translateY(-2px);
             box-shadow: 0 6px 30px rgba(23,201,224,.48); }
.btn.sm { padding: 10px 18px; font-size: 15px; }
/* Прозрачной кнопке даём такой же тихий ореол, только нейтральный: без него
   она выглядит приклеенной к фону, а соседняя — парящей. */
.btn.gh { background: none; color: #fff;
          box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4),
                      0 2px 22px rgba(0,0,0,.35); }
.btn.gh:hover { background: rgba(255,255,255,.12); color: #fff;
                box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6),
                            0 6px 30px rgba(0,0,0,.45); }
@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover, .gcard:hover { transform: none; transition: none; }
  html { scroll-behavior: auto; }
}
.note { font-size: 13px; color: var(--ink-3); margin: 9px 0 0; }
/* В герое подпись отодвинута от кнопок: 9 px оставляли её внутри свечения,
   и строка выглядела приклеенной к кнопке снизу. */
.hero .note { color: rgba(255,255,255,.6); margin-top: 17px; }

/* --- строка фактов над героем: тёмная, чтобы сливалась с ним ------------- */
/* Полоса тёмная во всю ширину, а сама строка едет в ширину контента и
   растушёвана по краям: раньше маска стояла на всей полосе и срезала слова
   вплотную к краю окна, будто текст обрубили. */
.tick { position: relative; background: var(--night); }
.tick .wrap { overflow: hidden;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%,
          #000 93%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 7%,
          #000 93%, transparent); }
.tick ul { display: flex; gap: 34px; margin: 0; padding: 10px 0;
           list-style: none; white-space: nowrap; width: max-content;
           animation: tick 38s linear infinite; }
.tick li { font-size: 14px; color: rgba(255,255,255,.62); }
.tick em { font-style: normal; }
.tick b { color: #fff; font-weight: 700; }
@keyframes tick { from { transform: translateX(0); }
                  to   { transform: translateX(-50%); } }
/* То же, что у ленты обложек: строка фактов тоже выводит набор дважды ради
   петли, и в неподвижном виде показывала каждый факт по два раза. Вторую
   половину прячем. */
@media (prefers-reduced-motion: reduce) {
  .tick .wrap { -webkit-mask-image: none; mask-image: none; }
  .tick ul { animation: none; flex-wrap: wrap; white-space: normal;
             width: auto; gap: 10px 26px; }
  .tick li:nth-child(n+7) { display: none; }
}

/* --- герой --------------------------------------------------------------- */
/* Сцена в фоне первого экрана: колесо рулетки, столбики фишек, разложенные
   карты. Нарисована своими руками (`_src/art.py`, функция `hero`) — у
   страницы не бывает внешних запросов, а сток тянет за собой вопрос прав.
   Лежит самым нижним слоем: поверх идут цветные пятна `::before` и зерно
   `::after`, поэтому сцена читается как тихий намёк, а не как картинка под
   текстом. Контраст заголовка на ней проверен отдельно. */
/* Поверх сцены лежит тёмная вуаль — первым слоем в той же записи фона.
   Без неё белый заголовок держал бы контраст не на всей площади картинки. */
.hero { position: relative; overflow: hidden; color: #fff;
        background:
          linear-gradient(180deg, rgba(10,12,24,.82), rgba(10,12,24,.9)),
          url(../img/hero-bg.jpg) center / cover no-repeat,
          var(--night);
        padding: clamp(30px, 4.6vw, 62px) 0 0; }
.hero > * { position: relative; z-index: 1; }
.hero::before { content: ''; position: absolute; inset: -40% -10% auto -10%;
  height: 170%; pointer-events: none;
  background:
    radial-gradient(40% 44% at 16% 14%, rgba(23,201,224,.42), transparent 70%),
    radial-gradient(44% 46% at 86% 30%, rgba(239,61,146,.42), transparent 72%),
    radial-gradient(34% 40% at 60% 96%, rgba(123,92,240,.34), transparent 72%); }
.hero::after { content: ''; position: absolute; inset: 0; opacity: .22;
  pointer-events: none; mix-blend-mode: overlay; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E"); }
.hero .inner { position: relative; max-width: var(--text); }
.hero h1 { color: #fff; }
.hero .lead { font-size: clamp(17px, 1.75vw, 21px);
              color: rgba(255,255,255,.82); margin-bottom: 1.3em; }
/* align-items: stretch — чтобы кнопки в паре были одной высоты, даже если
   у одной надпись переносится на две строки. */
.hero .acts { display: flex; gap: 12px; flex-wrap: wrap;
              align-items: stretch; }
.kick { display: inline-flex; align-items: center; gap: 9px; font-size: 13px;
        letter-spacing: normal; text-transform: uppercase; font-weight: 700;
        color: #06121a;
        background: linear-gradient(135deg, var(--cyan), var(--lime));
        padding: 7px 15px; border-radius: var(--r-3); margin-bottom: 20px; }

.chips { position: relative; display: flex; flex-wrap: wrap; gap: 9px;
         margin: 26px 0 0; }
/* Зазор внутри чипа один на все стыки. Раньше подпись была голым текстовым
   узлом: к flex-зазору прибавлялся пробел из разметки, и «точка — подпись»
   выходила теснее, чем «подпись — значение». Теперь у каждой части свой
   элемент, пробелов между ними нет, расстояния считает только `gap`. */
.chips span { display: inline-flex; align-items: center; gap: 8px;
              font-size: 14px; color: rgba(255,255,255,.88);
              background: rgba(255,255,255,.08); padding: 9px 15px;
              border-radius: var(--r-3); white-space: nowrap;
              box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.chips em { font-style: normal; color: rgba(255,255,255,.72); }
.chips b { color: #fff; font-weight: 700; }
.chips i { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan);
           box-shadow: 0 0 0 4px rgba(23,201,224,.2); }

/* --- лента обложек: подпись кита ----------------------------------------- */
/* Наклона здесь больше нет, и это исправление, а не смена замысла.
   `rotate(-1.6deg)` поднимал каждую следующую обложку на 6–7 px, а у обложек
   рамки строго горизонтальные — ряд читался не как приём, а как перекос. Тот
   же поворот со `scale(1.05)` выносил растушёвку на краях за пределы экрана,
   и обложки обрезало жёстко по обеим сторонам.
   Лента осталась лентой: она по-прежнему едет сама и по-прежнему отличает
   этот кит от соседской статичной сетки. Ширина теперь по контенту, а края
   растушёваны маской — так владелец просил про бегущие строки отдельно.
   Мерная колонка текста (840) и лента (1200) стоят на одной оси страницы. */
.ribbon { position: relative; margin-top: clamp(26px, 3.4vw, 44px);
          padding: 22px 0 4px; overflow: hidden;
          -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%,
            #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%,
            #000 91%, transparent); }
.rtrack { display: flex; gap: 16px; width: max-content;
          animation: roll 46s linear infinite; }
.rtrack img { width: 210px; border-radius: 14px; flex: none;
              box-shadow: 0 14px 34px rgba(0,0,0,.5),
                          inset 0 0 0 1px rgba(255,255,255,.16); }
@keyframes roll { from { transform: translateX(0); }
                  to { transform: translateX(-50%); } }
/* Когда система просит меньше движения, лента останавливается — и обязана
   стать **ровной сеткой**, а не свалкой.
   Как было: `flex-wrap: wrap` разворачивал всю дорожку, а в ней набор лежит
   дважды (иначе петля не бесшовная). На экране получалось 16 плиток в
   четыре неполных ряда, с дублями и огрызком в последнем ряду — прямое
   нарушение правила о ровном числе плиток. По коду этого было не видно:
   режим включается настройкой системы, а не вёрсткой.
   Теперь второй набор скрыт, колонки заданы явно, и восемь обложек ложатся
   ровно: 4 × 2 на широком экране, 2 × 4 на узком. */
@media (prefers-reduced-motion: reduce) {
  .ribbon { -webkit-mask-image: none; mask-image: none; }
  .rtrack { animation: none; width: auto; display: grid; gap: 14px;
            grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rtrack img { width: 100%; }
  .rtrack img:nth-child(n+9) { display: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 720px) {
  .rtrack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.rcap { display: block; text-align: center; font-size: 13px;
        color: rgba(255,255,255,.66); padding: 12px 0 26px; }

/* --- полосы-секции ------------------------------------------------------- */
/* Расстановка блоков задаётся здесь и только здесь, и селекторы намеренно
   тяжелее блочных правил.
   Почему так. У блоков сплошь сокращённая запись отступов — `margin: 0 0 1em`
   у факт-листа, `margin: 0 0 1.2em` у шагов и чек-листа, `margin: 1.6em 0` у
   полосы перехода. Сокращённая запись обнуляет и `margin-inline: auto`.
   Пока правило расстановки весило столько же, сколько блочное, побеждало то,
   что ниже по файлу, — и страница расходилась по краям:
     * лента шагов уезжала на 180 px левее меры, к самому краю колонки;
     * факт-лист внутри тёмной полосы прижимался к её краю, а заголовок над
       ним стоял на 28 px правее;
     * сама полоса вообще не растягивалась во всю ширину: её `width: 100vw`
       срезал `max-width: var(--text)` из соседнего правила, которое весило
       больше. Полосы во всю ширину — ритм этого кита, и он не работал.
   Лечится не добором `auto` в каждое блочное правило (следующий блок опять
   про это забудет), а весом: расстановка обязана быть сильнее оформления. */
main.sec { padding: clamp(26px, 3.4vw, 50px) 0 0; }
main.sec > :not(.bleed) { max-width: var(--text); margin-inline: auto; }

/* блок во всю ширину экрана — чередование меры и есть ритм кита */
main.sec > .bleed { max-width: none; width: 100vw;
         margin-inline: calc(50% - 50vw);
         padding: clamp(28px, 4vw, 56px) 0;
         margin-block: clamp(28px, 3.6vw, 52px); }
main.sec .bleed > * { width: min(var(--text), 100% - 2*var(--gap));
             max-width: none; margin-inline: auto; }
/* Фоны полос: заливка — это ещё не фон.
   Цвет у полос был разный, но каждая оставалась плоской плашкой, и лента из
   них читалась скучно. Добавлены три слоя: завиток по углам, цветные
   подсветки акцентами кита и диагональный переход вместо ровной заливки.
   Все значения держатся слабыми намеренно: фон под текстом обязан остаться
   в пределах прежнего контраста, и это проверяется замером пикселей под
   буквами, а не доверием к цифре в CSS — сквозь градиент вычисленный стиль
   фона не виден. */
.bleed.tinted {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='%230a0c18' stroke-opacity='.055' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M300 96 A204 204 0 1 1 96 300 A150 150 0 1 0 246 300 A96 96 0 1 1 300 246'/%3E%3Cpath d='M30 468 C140 372 244 556 356 462 S532 372 584 436' stroke-width='1.2'/%3E%3Cpath d='M64 128 C168 56 212 202 330 148' stroke-width='1.2'/%3E%3Ccircle cx='300' cy='300' r='252' stroke-width='.9'/%3E%3C/g%3E%3C/svg%3E") left -120px top -150px / 460px 460px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='%230a0c18' stroke-opacity='.055' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M300 96 A204 204 0 1 1 96 300 A150 150 0 1 0 246 300 A96 96 0 1 1 300 246'/%3E%3Cpath d='M30 468 C140 372 244 556 356 462 S532 372 584 436' stroke-width='1.2'/%3E%3Cpath d='M64 128 C168 56 212 202 330 148' stroke-width='1.2'/%3E%3Ccircle cx='300' cy='300' r='252' stroke-width='.9'/%3E%3C/g%3E%3C/svg%3E") right -160px bottom -190px / 560px 560px no-repeat,
    radial-gradient(760px 420px at 88% -14%, rgba(23,201,224,.16),
                    transparent 70%),
    radial-gradient(680px 460px at -6% 112%, rgba(239,61,146,.10),
                    transparent 72%),
    linear-gradient(152deg, #f5f3fd, var(--tint) 52%, #e6e6f7);
}
.bleed.dark {
  color: #fff;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.075' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M300 96 A204 204 0 1 1 96 300 A150 150 0 1 0 246 300 A96 96 0 1 1 300 246'/%3E%3Cpath d='M30 468 C140 372 244 556 356 462 S532 372 584 436' stroke-width='1.2'/%3E%3Cpath d='M64 128 C168 56 212 202 330 148' stroke-width='1.2'/%3E%3Ccircle cx='300' cy='300' r='252' stroke-width='.9'/%3E%3C/g%3E%3C/svg%3E") left -140px top -170px / 520px 520px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.075' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M300 96 A204 204 0 1 1 96 300 A150 150 0 1 0 246 300 A96 96 0 1 1 300 246'/%3E%3Cpath d='M30 468 C140 372 244 556 356 462 S532 372 584 436' stroke-width='1.2'/%3E%3Cpath d='M64 128 C168 56 212 202 330 148' stroke-width='1.2'/%3E%3Ccircle cx='300' cy='300' r='252' stroke-width='.9'/%3E%3C/g%3E%3C/svg%3E") right -170px bottom -200px / 600px 600px no-repeat,
    radial-gradient(820px 420px at 14% 0%, rgba(23,201,224,.17),
                    transparent 68%),
    radial-gradient(760px 400px at 86% 16%, rgba(239,61,146,.15),
                    transparent 70%),
    radial-gradient(700px 520px at 58% 108%, rgba(123,92,240,.20),
                    transparent 68%),
    linear-gradient(158deg, var(--night-2), var(--night) 48%, #0b1026);
}
.bleed.dark h2, .bleed.dark h3 { color: #fff; }
.bleed.dark p { color: rgba(255,255,255,.8); }
.bleed h2 { margin-top: 0; }

/* заголовок: надзаголовок и толстое подчёркивание вместо номера */
h2 .eb { display: block; font-size: 13px; font-weight: 700;
         letter-spacing: normal; text-transform: uppercase;
         color: var(--magenta-t);
         margin-bottom: 10px; }
.bleed.dark h2 .eb { color: var(--cyan); }
h2 .ul { display: block; width: 72px; height: 6px; border-radius: 6px;
         margin-top: 16px;
         background: linear-gradient(90deg, var(--cyan), var(--magenta)); }

/* Широкая картинка в потоке: живёт внутри полосы .bleed, поэтому ширину
   задаёт полоса, а здесь только скругление и ограничение высоты. */
.figure { border-radius: var(--r); width: 100%; max-height: 260px;
          object-fit: cover; margin: 0;
          box-shadow: 0 22px 52px rgba(10,12,24,.24); }
@media (max-width: 640px) { .figure { max-height: 150px; } }

/* --- карточки ------------------------------------------------------------ */
.cards { display: grid; gap: 16px;
         grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { position: relative; background: var(--card); border-radius: var(--r);
        padding: 22px 20px;
        box-shadow: 0 2px 4px rgba(10,12,24,.04),
                    0 16px 38px rgba(10,12,24,.08); }
.bleed.dark .card { background: rgba(255,255,255,.06);
                    box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.bleed.dark .card p { color: rgba(255,255,255,.76); }
.card h3 { margin-top: 0; font-size: 18px; }
.card p:last-child { margin-bottom: 0; color: var(--ink-2); }
.tile { width: 44px; height: 44px; border-radius: 12px; display: grid;
        place-items: center; margin-bottom: 14px; color: #06121a;
        background: linear-gradient(145deg, var(--cyan), var(--lime)); }
.card:nth-child(3n+2) .tile {
  background: linear-gradient(145deg, var(--magenta), #ff7ab8); color: #fff; }
.card:nth-child(3n) .tile {
  background: linear-gradient(145deg, var(--violet), #a78bfa); color: #fff; }
.tile svg { width: 22px; height: 22px; }

/* --- факт-лист ----------------------------------------------------------- */
.fact { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr);
        gap: 1px; background: var(--line-2); border-radius: var(--r-2);
        overflow: hidden; margin: 0 0 1em; }
.fact dt, .fact dd { margin: 0; padding: 12px 15px; background: var(--card); }
.fact dt { font-size: 13px; color: var(--ink-3); }
.fact dd { font-size: 15px; font-weight: 600; }
.bleed.dark .fact { background: rgba(255,255,255,.14); }
.bleed.dark .fact dt, .bleed.dark .fact dd { background: rgba(10,12,24,.72); }
.bleed.dark .fact dt { color: rgba(255,255,255,.6); }
.bleed.dark .fact dd { color: #fff; }

/* --- таблицы -------------------------------------------------------------- */
.tscroll { overflow-x: auto; margin: 0 0 1.1em; border-radius: var(--r);
           box-shadow: 0 2px 4px rgba(10,12,24,.04),
                       0 16px 38px rgba(10,12,24,.08); }
table.tbl { width: 100%; border-collapse: collapse; background: var(--card);
            font-size: 15px; }
.tbl th, .tbl td { padding: 13px 16px; text-align: start; }
.tbl th { background: var(--night); color: #fff; font-size: 13px;
          font-weight: 700; white-space: nowrap; }
.tbl tbody tr:nth-child(even) { background: var(--paper); }
.tbl td { box-shadow: inset 0 -1px 0 0 var(--line-2); }
.tbl tr:last-child td { box-shadow: none; }
.tbl td.n { white-space: nowrap; font-weight: 700; color: var(--violet-t); }
.tbl td.empty { color: var(--ink-3); font-style: italic; }

/* --- «кому подойдёт / что учесть» ------------------------------------------ */
.two { display: grid; gap: 16px;
       grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 1.2em; }
.box { border-radius: var(--r); padding: 22px 20px; background: var(--card);
       box-shadow: 0 2px 4px rgba(10,12,24,.04),
                   0 16px 38px rgba(10,12,24,.08); }
.box h3 { margin-top: 0; font-size: 17px; }
/* Зелёный и охра затемнены: было 3.54 и 3.79 на белой карточке при норме
   4.5 для текста этого размера. Стало 5.34 и 5.91 — цвет тот же по смыслу,
   читается уверенно. */
.box.ok h3 { color: #0b7a55; }
.box.mind h3 { color: #8a5a10; }
.box ul { margin: 0; padding-inline-start: 1.2em; color: var(--ink-2); }
.box li { margin-bottom: .55em; }
.box li:last-child { margin-bottom: 0; }

/* --- шаги ------------------------------------------------------------------- */
ol.steps { counter-reset: s; list-style: none; margin: 0 0 1.2em; padding: 0; }
ol.steps li { counter-increment: s; position: relative;
              padding: 0 0 26px 74px; }
ol.steps li::before {
  content: counter(s); position: absolute; inset-inline-start: 0; top: -4px;
  width: 52px; height: 52px; border-radius: 16px; display: grid;
  place-items: center; font-family: 'Cascadia Mono',Consolas,'DejaVu Sans Mono','Roboto Mono',ui-monospace,monospace; font-size: 19px;
  font-weight: 700; color: #06121a;
  background: linear-gradient(145deg, var(--cyan), var(--lime)); }
ol.steps li::after { content: ''; position: absolute; inset-inline-start: 25px;
  top: 56px; bottom: 6px; width: 2px; background: var(--line); }
ol.steps li:last-child { padding-bottom: 0; }
ol.steps li:last-child::after { display: none; }
ol.steps li b { display: block; font-size: 18px; margin-bottom: 4px; }
.bleed.dark ol.steps li::after { background: rgba(255,255,255,.2); }

/* --- сравнение «что сверить — чем отвечает lilbet» ---------------------------- */
/* Правая колонка подсвечена: в ней стоят опубликованные данные оператора, и
   вес ей даёт оформление, а не крупные слова в тексте. Блок стоит внизу
   страницы — человек пришёл читать про Baji, а не про нас. */
.vs { display: grid; gap: 1px; background: var(--line);
      border-radius: var(--r); overflow: hidden; margin: 0 auto 1.1em;
      box-shadow: 0 2px 4px rgba(10,12,24,.04),
                  0 16px 38px rgba(10,12,24,.08); }
.vrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
        gap: 1px; background: var(--line); }
.vrow > div { padding: 14px 18px; background: var(--card); }
.vrow .a { background: linear-gradient(135deg,
             rgba(23,201,224,.13), rgba(143,217,74,.13));
           font-weight: 600; position: relative;
           padding-inline-start: 44px; }
.vrow .a::before { content: ''; position: absolute; inset-inline-start: 18px;
  top: 19px; width: 16px; height: 16px; border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), var(--lime));
  box-shadow: 0 0 0 3px rgba(23,201,224,.16); }
/* Капса здесь нет намеренно: в правой подписи стоит бренд, а `uppercase`
   показал бы его заглавными — для правила 1 это такое же нарушение, как
   написать их руками. Заменяющая подстановка `.lb` сюда не дотянется:
   в бенгальской подписи после бренда идёт дефис с падежным окончанием
   («lilbet-এ»), и регулярное выражение бренд в таком виде не берёт. */
.vhead > div { background: var(--night); color: rgba(255,255,255,.62);
               font-size: 13px; font-weight: 700; letter-spacing: normal;
               padding: 11px 18px; }
.vhead > div:last-child { color: #fff; }
.bleed.dark .vs, .bleed.dark .vrow { background: rgba(255,255,255,.14); }
.bleed.dark .vrow > div { background: rgba(10,12,24,.72); color: #fff; }
.bleed.dark .vrow .a { background: linear-gradient(135deg,
                         rgba(23,201,224,.2), rgba(143,217,74,.16)); }
.bleed.dark .vhead > div { background: rgba(255,255,255,.08); }

/* --- чек-лист ---------------------------------------------------------------- */
.check { list-style: none; margin: 0 0 1.2em; padding: 0; display: grid;
         gap: 10px; }
.check li { display: flex; gap: 13px; align-items: flex-start;
            background: var(--card); border-radius: var(--r-2); padding: 15px;
            color: var(--ink-2);
            box-shadow: 0 2px 4px rgba(10,12,24,.04),
                        0 10px 26px rgba(10,12,24,.06); }
.check li::before { content: ''; flex: none; width: 24px; height: 24px;
  border-radius: 8px; margin-top: 1px;
  background: linear-gradient(145deg, var(--cyan), var(--lime));
  clip-path: polygon(16% 46%, 4% 58%, 40% 92%, 96% 24%, 84% 12%, 39% 66%); }
.bleed.dark .check li { background: rgba(255,255,255,.06);
                        color: rgba(255,255,255,.82);
                        box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }

/* --- полосы перехода ---------------------------------------------------------- */
.ctamini { display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
           border-radius: var(--r); padding: 20px 24px; margin: 1.6em 0;
           border: 2px solid transparent;
           background-image: linear-gradient(var(--card), var(--card)),
             linear-gradient(120deg, var(--cyan), var(--magenta));
           background-origin: border-box;
           background-clip: padding-box, border-box;
           box-shadow: 0 16px 38px rgba(10,12,24,.08); }
.ctamini .t { font-weight: 800; font-size: 18px; }
.ctamini .s { color: var(--ink-2); font-size: 15px; }
.ctamini .btn { margin-inline-start: auto; }

.ctabox { position: relative; overflow: hidden; color: #fff;
          background: var(--night); border-radius: var(--r);
          padding: clamp(28px, 3.6vw, 48px); margin: 2.2em 0 0;
          text-align: center; }
.ctabox::before { content: ''; position: absolute; inset: -50% -10% auto -10%;
  height: 200%; pointer-events: none;
  background: radial-gradient(38% 46% at 20% 22%, rgba(23,201,224,.5),
              transparent 70%),
    radial-gradient(38% 46% at 82% 74%, rgba(239,61,146,.5), transparent 70%); }
.ctabox > * { position: relative; }
.ctabox h2 { margin-top: 0; color: #fff; }
.ctabox p { color: rgba(255,255,255,.8); max-width: 58ch; margin-inline: auto; }
.ctabox .acts { display: flex; gap: 12px; justify-content: center;
                flex-wrap: wrap; }
.ctabox .note { color: rgba(255,255,255,.6); }

/* --- вопросы и ответы ----------------------------------------------------------- */
details.q { background: var(--card); border-radius: var(--r-2);
            margin-bottom: 10px;
            box-shadow: 0 2px 4px rgba(10,12,24,.04),
                        0 10px 26px rgba(10,12,24,.06); }
details.q summary { cursor: pointer; padding: 16px 18px; font-weight: 700;
                    list-style: none; display: flex; gap: 12px;
                    align-items: center; }
details.q summary::-webkit-details-marker { display: none; }
details.q summary::after { content: '+'; margin-inline-start: auto;
  font-family: 'Cascadia Mono',Consolas,'DejaVu Sans Mono','Roboto Mono',ui-monospace,monospace; font-size: 19px; color: #06121a; width: 26px;
  height: 26px; border-radius: 8px; display: grid; place-items: center;
  flex: none; background: linear-gradient(145deg, var(--cyan), var(--lime)); }
details.q[open] summary::after { content: '\2212'; }
details.q .a { padding: 0 18px 17px; color: var(--ink-2); }
.bleed.dark details.q { background: rgba(255,255,255,.06);
                        box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.bleed.dark details.q .a { color: rgba(255,255,255,.78); }

/* --- оглавление ----------------------------------------------------------------- */
.toc { background: var(--card); border-radius: var(--r); padding: 18px 22px;
       margin: 0 0 1.6em;
       box-shadow: 0 2px 4px rgba(10,12,24,.04),
                   0 10px 26px rgba(10,12,24,.06); }
.toc h2 { font-size: 13px; margin: 0 0 10px; text-transform: uppercase;
          letter-spacing: normal; color: var(--ink-3); }
.toc ol { margin: 0; padding-inline-start: 1.25em; columns: 2;
          column-gap: 30px; font-size: 15px; }
.toc li { margin-bottom: 5px; }

/* --- разбор формулы -------------------------------------------------------------- */
.calc { background: var(--card); border-radius: var(--r); padding: 22px 20px;
        box-shadow: 0 2px 4px rgba(10,12,24,.04),
                    0 16px 38px rgba(10,12,24,.08); }
.calc .f { font-family: 'Cascadia Mono',Consolas,'DejaVu Sans Mono','Roboto Mono',ui-monospace,monospace; font-size: 15px; color: #fff;
           background: var(--night-2); border-radius: var(--r-2);
           padding: 13px 16px; margin: 0 0 10px; }
.calc .f b { color: var(--cyan); }

/* --- витрина игр: карточки горизонтальные, не плитками --------------------------- */
.games { display: grid; gap: 14px; margin: 0 0 .6em;
         grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gcard { margin: 0; background: var(--card); border-radius: var(--r);
         overflow: hidden; display: grid;
         grid-template-columns: 128px minmax(0, 1fr);
         box-shadow: 0 2px 4px rgba(10,12,24,.05),
                     0 16px 38px rgba(10,12,24,.09);
         transition: transform .18s ease; }
.gcard:hover { transform: translateY(-3px); }
.gcard img { width: 100%; height: 100%; object-fit: cover; }
.gcard figcaption { padding: 14px 16px; display: grid; gap: 4px;
                    align-content: center; }
.gcard b { font-size: 15px; }
.gcard span { font-size: 13px; color: var(--ink-2); }
.gcard em { font-style: normal; font-size: 12px; color: var(--ink-3); }

/* --- соседние страницы -------------------------------------------------------------- */
.near { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr);
        margin-top: 1.2em; }
.near a { display: block; background: var(--card); border-radius: var(--r);
          padding: 18px; text-decoration: none; color: var(--ink);
          box-shadow: 0 2px 4px rgba(10,12,24,.04),
                      0 10px 26px rgba(10,12,24,.06); }
.near a:hover { box-shadow: inset 0 0 0 2px var(--cyan); }
.near .k { font-size: 12px; color: var(--magenta-t); display: block;
           text-transform: uppercase; letter-spacing: normal; font-weight: 700;
           margin-bottom: 4px; }
.near .t { font-weight: 700; }

/* --- подвал --------------------------------------------------------------------------- */
footer { margin-top: 56px; color: #fff; padding: 44px 0 104px;
         background:
           url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.075' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M300 96 A204 204 0 1 1 96 300 A150 150 0 1 0 246 300 A96 96 0 1 1 300 246'/%3E%3Cpath d='M30 468 C140 372 244 556 356 462 S532 372 584 436' stroke-width='1.2'/%3E%3Cpath d='M64 128 C168 56 212 202 330 148' stroke-width='1.2'/%3E%3Ccircle cx='300' cy='300' r='252' stroke-width='.9'/%3E%3C/g%3E%3C/svg%3E") right -150px top -180px / 560px 560px no-repeat,
           radial-gradient(900px 420px at 8% 0%, rgba(123,92,240,.18),
                           transparent 70%),
           radial-gradient(760px 380px at 92% 96%, rgba(23,201,224,.12),
                           transparent 72%),
           linear-gradient(168deg, var(--night-2), var(--night) 56%); }
.fcols { display: grid; gap: 26px;
         grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fcols h2 { font-size: 13px; letter-spacing: normal; margin: 0 0 11px;
            line-height: 1.4;
            color: rgba(255,255,255,.5); }
.fcols ul { list-style: none; margin: 0; padding: 0; }
.fcols li { margin-bottom: 8px; }
.fcols a { color: rgba(255,255,255,.85); font-size: 15px;
           text-decoration: none; }
.fcols a:hover { color: var(--cyan); text-decoration: underline; }
.fine { margin-top: 30px; padding-top: 20px; font-size: 13px;
        color: rgba(255,255,255,.55);
        box-shadow: inset 0 1px 0 0 rgba(255,255,255,.12); }
.age { display: inline-grid; place-items: center; width: 38px; height: 38px;
       border-radius: 50%; font-family: 'Cascadia Mono',Consolas,'DejaVu Sans Mono','Roboto Mono',ui-monospace,monospace; font-weight: 700;
       font-size: 13px; color: #06121a; margin-inline-end: 12px;
       float: inline-start;
       background: linear-gradient(145deg, var(--cyan), var(--lime)); }

/* --- нижняя полоса перехода: видна и на компьютере ------------------------------------- */
.dock { position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
        display: flex; align-items: center; gap: 14px;
        padding: 11px clamp(14px, 4vw, 40px);
        padding-bottom: calc(11px + env(safe-area-inset-bottom));
        color: #fff; background: rgba(10,12,24,.94);
        box-shadow: 0 -10px 30px rgba(0,0,0,.4); }
/* Размытие — украшение, а не условие читаемости.
   Шапка и нижняя полоса и без него залиты почти непрозрачным цветом
   (.9 и .94), поэтому в браузере без `backdrop-filter` текст под ними
   всё равно не просвечивает. Правило вынесено в `@supports`, чтобы это
   было видно из кода, а не держалось в голове у того, кто его писал. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .top, .dock { -webkit-backdrop-filter: saturate(160%) blur(12px);
                backdrop-filter: saturate(160%) blur(12px); }
}

.dock .d1 { font-weight: 800; font-size: 16px; line-height: 1.2; }
.dock .d2 { font-size: 12px; color: rgba(255,255,255,.55); }
.dock .btn { margin-inline-start: auto; }

/* --- узкие экраны ---------------------------------------------------------------------- */
@media (max-width: 980px) {
  .cards, .cards.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fcols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .near { grid-template-columns: minmax(0, 1fr); }
  .games { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .cards, .cards.c2, .cards.c4 { grid-template-columns: minmax(0, 1fr); }
  .two { grid-template-columns: minmax(0, 1fr); }
  /* Сравнение на телефоне идёт парами: сверху пункт, под ним ответ. */
  .vrow { grid-template-columns: minmax(0, 1fr); }
  .vhead { display: none; }
  .vrow .c { font-size: 14px; color: var(--ink-3); padding-bottom: 4px; }
  .bleed.dark .vrow .c { color: rgba(255,255,255,.66); }
  .toc ol { columns: 1; }
  .fact { grid-template-columns: minmax(0, 1fr); }
  .fact dt { padding-bottom: 0; }
  .ctamini .btn { margin-inline-start: 0; width: 100%; }
  ol.steps li { padding-inline-start: 62px; }
  ol.steps li::before { width: 44px; height: 44px; font-size: 17px; }
  ol.steps li::after { inset-inline-start: 21px; top: 48px; }
  .rtrack img { width: 148px; }
  .dock .d2 { display: none; }
  /* Меню на телефоне переносится, а не прокручивается вбок.
     Прокрутка здесь была молчаливой: набор пунктов шире экрана (557 px
     против 358 видимых), полоса прокрутки спрятана, растушёвки у края нет —
     и два пункта из семи просто не существовали для читателя. Один из них
     «Как начать», а это 15 000 запросов в месяц.
     Перенос в две строки показывает все семь сразу; шапка вырастает на
     одну строку, и это дешевле, чем потерянный раздел. */
  .top .bar { flex-wrap: wrap; row-gap: 7px; padding: 8px 0; }
  .nav { order: 3; width: 100%; flex-wrap: wrap; row-gap: 5px;
         margin-inline-start: 0; }
  .nav a { white-space: nowrap; font-size: 14px; padding: 6px 10px; }
  /* Подпись под вордмарком на телефоне убрана: две строки меню уже заняли
     место, а подпись — украшение. Само имя сайта остаётся. */
  .logo .tx em { display: none; }
  .lang { margin-inline-start: auto; }
}
/* --- английский: свой шрифт и разрядка мелких подписей ------------------- */
/* Почему разрядки нет в основных правилах, а есть только здесь.
   В бенгальском письме у слова сверху идёт মাত্রা — сплошная черта, которая
   связывает буквы в слово. Положительный `letter-spacing` разрывает её на
   куски, и слово рассыпается на отдельные знаки: примерно как если в русском
   слове расставить пробелы между буквами. Сравнил отрисовкой тем же шрифтовым
   стеком: при `.09em` и `.1em` черта над «বাংলাদেশ» рвётся отчётливо, при нуле
   идёт сплошной. Латинскому капсу разрядка, наоборот, нужна — поэтому она не
   снята, а отдана английскому.
   Отрицательная разрядка на h1–h3 (`-.024em`) бенгальскому не вредит: буквы
   сходятся плотнее, черта остаётся сплошной. Её не трогаем. */
html[lang="en"] body { font-family: 'Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif; }
html[lang="en"] .kick { letter-spacing: .09em; }
html[lang="en"] h2 .eb { letter-spacing: .1em; }
html[lang="en"] .vhead > div { letter-spacing: .04em; }
html[lang="en"] .toc h2 { letter-spacing: .08em; }
html[lang="en"] .near .k { letter-spacing: .07em; }
html[lang="en"] .fcols h2 { letter-spacing: .06em; }