:root {
      --y:#FFE000; --y-ink:#111111;
      --bg:#F4F1EA; --paper:#FFFFFF; --raised:#ECE7DC;
      --ink:#0A0A0A; --muted:#4A4A4A; --faint:#767676;
      --line-soft:#C8C2B2; --grn:#1D8C3E; --red:#E1261C;
      --shadow-hard:4px 4px 0 0 var(--ink); --y-soft:#FFF6C4;
      --band-bg:#0A0A0A; --band-fg:#F4F1EA; --band-accent:var(--y);
      /* Шкала радиусов — та же, что на главной (globals.css кабинета).
         Её тут не было: var(--r-*) не резолвился, и переключатели с
         кнопками рисовались прямыми углами. */
      --r-sm:6px; --r:10px; --r-lg:14px;
      --ease:cubic-bezier(0.22,0.61,0.36,1);
    }
    [data-theme="dark"] {
      --bg:#0E0E0E; --paper:#161616; --raised:#222020;
      --ink:#F2EFE6; --muted:#A8A39A; --faint:#6E6A62;
      --line-soft:#2E2A22; --y-ink:#0E0E0E;
      --shadow-hard:4px 4px 0 0 var(--y); --y-soft:#241F0A;
    }
    * { box-sizing:border-box; margin:0; padding:0; }
    html { scroll-behavior:smooth; }
    html, body { overflow-x:clip; }
    body {
      font-family:"Onest","Onest Fallback",-apple-system,system-ui,sans-serif;
      background:var(--bg); color:var(--ink);
      font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
      transition:background 240ms var(--ease), color 240ms var(--ease);
    }
    a { color:inherit; }
    .display { font-family:"Unbounded","Unbounded Fallback","Onest","Onest Fallback",sans-serif; font-weight:800; letter-spacing:-0.03em; line-height:0.95; }
    .mono { font-family:"JetBrains Mono",ui-monospace,monospace; }
    .wrap { max-width:1120px; margin:0 auto; padding:0 24px; }

    .btn {
      display:inline-flex; align-items:center; justify-content:center; gap:8px;
      padding:13px 24px; font-weight:700; font-size:14px; text-decoration:none;
      border:2px solid var(--ink); border-radius:var(--r); cursor:pointer; background:var(--paper); color:var(--ink);
      transition:transform 110ms var(--ease), box-shadow 110ms var(--ease);
    }
    .btn:active { transform:translate(2px,2px); box-shadow:1px 1px 0 0 var(--ink) !important; }
    .btn-y { background:var(--y); color:var(--y-ink); box-shadow:var(--shadow-hard); }
    .btn-y:hover { box-shadow:6px 6px 0 0 var(--y-ink); transform:translate(-1px,-1px); }
    .btn-ghost { background:transparent; }
    .btn-ghost:hover { background:var(--paper); box-shadow:var(--shadow-hard); }

    .pulse { width:7px; height:7px; background:var(--grn); display:inline-block; animation:pulse-y 1.8s infinite; }
    @keyframes pulse-y { 0%,100% { box-shadow:0 0 0 0 var(--y); } 50% { box-shadow:0 0 0 6px transparent; } }

    .progress { position:fixed; top:0; inset-inline-start:0; height:3px; width:0; background:var(--y); z-index:60; transition:width 80ms linear; }

    .tickerbar { background:var(--band-bg); color:var(--band-fg); overflow:hidden; height:26px; display:flex; align-items:center;
      font-size:11px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; }
    .ticker { display:flex; white-space:nowrap; animation:ticker 50s linear infinite; }
    .ticker:hover { animation-play-state:paused; }
    @keyframes ticker { from { transform:translateX(0); } to { transform:translateX(-50%); } }
    .ticker span { padding:0 18px; border-inline-end:1px solid #555; display:inline-flex; align-items:center; gap:8px; }
    .ticker b { color:var(--band-accent); font-weight:700; }

    header.site { border-bottom:2px solid var(--ink); position:sticky; top:0; background:var(--bg); z-index:30; }
    .nav { display:flex; align-items:center; justify-content:space-between; height:62px; gap:12px; }
    /* Знак: статичная сетка 3×3 (анимированный 3D-кубик — только на главной). */
    .logo { display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); }
    .rk-mark { width:46px; height:46px; flex:none; display:grid; place-items:center;
      perspective:220px; perspective-origin:50% 50%; }
    .rk-cube { width:0; height:0; transform-style:preserve-3d; will-change:transform; }
    .rk-cubie { position:absolute; top:0; left:0; transform-style:preserve-3d; will-change:transform; }
    .rk-face { position:absolute; top:0; left:0; background:#141310; display:grid; place-items:center;
      backface-visibility:hidden; }
    .rk-sticker { position:absolute; inset:3.5%; background:#FFE000; border:1px solid #0A0A0A;
      border-radius:18%; display:grid; place-items:center; color:#0A0A0A; font-weight:900;
      font-family:"Archivo Black","Arial Black","Helvetica Neue",Arial,sans-serif; line-height:1; }
    .rk-glyph { display:inline-block; line-height:1; }
    .logo-text { display:flex; flex-direction:column; line-height:1; }
    .logo-name { font-family:"Unbounded","Unbounded Fallback",sans-serif; font-weight:900; font-size:18px; letter-spacing:-0.02em; }
    .logo-ver { font-family:"JetBrains Mono",monospace; font-size:9.5px; font-weight:700; letter-spacing:.08em;
      text-transform:uppercase; color:var(--faint); margin-top:3px; }
    .nav-left { display:flex; align-items:center; gap:28px; }
    .nav-links { display:flex; gap:8px; align-items:center; }
    .nav-anchors { gap:22px; }
    .nav-links a.anchor { text-decoration:none; font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted); }
    .nav-links a.anchor:hover { color:var(--ink); }
    /* Тумблер темы в духе retroui: жёсткий контур, квадратный бегунок, ноль
       полутонов. Заливка дорожки и бегунка меняются местами — во включённом
       состоянии жёлтой становится дорожка, и это видно боковым зрением. */
    /* ── Тема переключается клавишей выключателя, а не бегунком ──
       Метафора буквальная, как на стене: вверх — свет горит (светлая тема),
       вниз — выключен (тёмная). Отсюда и пропорции: гнездо выше своей ширины,
       клавиша ходит по нему заметным шагом, а нажатие вдавливает всю рамку —
       тем же приёмом, что у соседней кнопки языка, чтобы шапка ощущалась одним
       набором кнопок, а не набором разнородных элементов управления.
       Ход задаём через top: он вертикальный, в арабском зеркалить нечего,
       поэтому логическое свойство здесь не нужно — в отличие от посадки
       клавиши поперёк гнезда. */
    .theme-sw { position:relative; width:28px; height:34px; flex-shrink:0; padding:0;
      background:var(--raised); color:inherit;
      border:2px solid var(--ink); border-radius:var(--r-sm); cursor:pointer;
      box-shadow:2px 2px 0 0 var(--ink);
      transition:box-shadow 110ms var(--ease), transform 110ms var(--ease); }
    .theme-sw:hover { box-shadow:3px 3px 0 0 var(--y); }
    .theme-sw:active { box-shadow:0 0 0 0 var(--ink); transform:translate(2px,2px); }
    .theme-sw:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
    .theme-sw .knob { position:absolute; top:3px; inset-inline-start:3px; width:18px; height:14px;
      background:var(--y); border:2px solid var(--ink); border-radius:3px;
      transition:top 170ms var(--ease), background 170ms var(--ease); }
    /* Свет выключен: клавиша уходит вниз и гаснет. Жёлтой она остаётся только в
       светлой теме — иначе «горит» читалось бы в обоих положениях. */
    [data-theme="dark"] .theme-sw .knob { top:13px; background:var(--line-soft); }
    @media (prefers-reduced-motion: reduce) { .theme-sw .knob { transition:none; } }
    .lang-dd { position:relative; }
    /* Кнопка языка — глиф «перевод» в рамке с жёсткой тенью. Код языка и
       галочку убрали: имя языка написано в списке на нём самом, и это
       понятнее двухбуквенного кода тому, кто пришёл не на своём языке. */
    .lang-btn { display:inline-grid; place-items:center; width:28px; height:34px; padding:0; flex-shrink:0;
      background:var(--paper); color:var(--ink); border:2px solid var(--ink); border-radius:var(--r-sm);
      cursor:pointer; box-shadow:2px 2px 0 0 var(--ink);
      transition:box-shadow 110ms var(--ease), transform 110ms var(--ease); }
    .lang-btn svg { display:block; }
    .lang-btn:hover { box-shadow:3px 3px 0 0 var(--y); }
    /* Нажатие «вдавливает»: тень схлопывается, кнопка едет ей навстречу. */
    .lang-btn:active, .lang-dd.open .lang-btn { box-shadow:0 0 0 0 var(--ink); transform:translate(2px,2px); }
    .lang-list { display:none; position:absolute; inset-inline-end:0; top:calc(100% + 8px); z-index:40;
      min-width:212px; max-height:340px; overflow-y:auto; background:var(--paper); border:2px solid var(--ink);
      border-radius:var(--r-lg); box-shadow:5px 5px 0 0 var(--ink); }
    .lang-dd.open .lang-list { display:block; }
    .lang-opt { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
      padding:9px 14px; background:transparent; color:var(--ink);
      border:none; font:inherit; font-size:13.5px; font-weight:500; text-align:start; cursor:pointer; }
    .lang-opt:hover { background:var(--raised); }
    .lang-opt.active { background:var(--y); color:var(--y-ink); font-weight:700; }
    /* Галочка рисуется псевдоэлементом: она — следствие состояния, а не данные,
       и в разметку языков её тащить незачем. */
    .lang-opt.active::after { content:"\2713"; font-size:13px; font-weight:700; }
    .btn-login { margin-inline-start:8px; padding:10px 20px; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:0.07em;
      background:var(--ink); color:var(--bg); box-shadow:3px 3px 0 0 var(--y); }
    .btn-login:hover { background:var(--ink); color:var(--bg); box-shadow:5px 5px 0 0 var(--y); transform:translate(-2px,-2px); }
    .btn-login:active { box-shadow:1px 1px 0 0 var(--y) !important; }

    /* Кнопка меню — такая же плашка, как выключатель и язык: на телефоне все три
       стоят в один ряд, и разнобой габаритов, радиуса и тени читался как случайность. */
    .burger { display:none; width:28px; height:34px; align-items:center; justify-content:center; background:var(--paper);
      border:2px solid var(--ink); border-radius:var(--r-sm); cursor:pointer; padding:0;
      box-shadow:2px 2px 0 0 var(--ink);
      transition:box-shadow 110ms var(--ease), transform 110ms var(--ease); }
    .burger:hover { box-shadow:3px 3px 0 0 var(--y); }
    .burger:active, .burger.open { box-shadow:0 0 0 0 var(--ink); transform:translate(2px,2px); }
    .burger:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
    .burger span { display:block; width:15px; height:2px; background:var(--ink); position:relative; transition:transform 140ms var(--ease); }
    .burger span::before, .burger span::after { content:""; position:absolute; left:0; width:15px; height:2px; background:var(--ink); transition:transform 140ms var(--ease), top 140ms var(--ease); }
    .burger span::before { top:-5px; } .burger span::after { top:5px; }
    .burger.open span { background:transparent; }
    .burger.open span::before { top:0; transform:rotate(45deg); } .burger.open span::after { top:0; transform:rotate(-45deg); }
    .mobile-menu { display:none; flex-direction:column; border-bottom:2px solid var(--ink); background:var(--bg); }
    .mobile-menu.open { display:flex; }
    .mobile-menu a { padding:15px 24px; text-decoration:none; font-weight:700; border-top:1.5px solid var(--line-soft);
      font-size:14px; display:flex; align-items:center; justify-content:space-between; }
    .mobile-menu a.cta { background:var(--y); color:var(--y-ink); }
    .mobile-menu a .mono { color:var(--faint); font-size:12px; }

    .lang-banner { display:none; background:var(--band-bg); color:var(--band-fg); font-size:13.5px; padding:9px 0; }
    .lang-banner a { color:var(--band-accent); font-weight:700; }
    .lang-banner .wrap { display:flex; gap:12px; align-items:center; justify-content:center; flex-wrap:wrap; }

    /* ── Контент юридических страниц ── */
    .legal-content { max-width:760px; margin:48px auto 80px; padding:0 24px; }
    .legal-content h1 {
      font-family:"Unbounded","Unbounded Fallback",sans-serif; font-size:clamp(24px,3.6vw,38px);
      font-weight:900; letter-spacing:-0.02em; margin-bottom:24px; line-height:1.1;
    }
    .legal-meta {
      font-size:12px; color:var(--faint);
      border-top:2px solid var(--ink); border-bottom:2px solid var(--ink);
      padding:10px 0; margin-bottom:28px; line-height:1.6;
    }
    .legal-content h2 {
      font-size:16px; font-weight:800; margin:32px 0 10px;
      padding-bottom:8px; border-bottom:1.5px solid var(--line-soft);
    }
    .legal-content h3 { font-size:14px; font-weight:700; margin:20px 0 8px; }
    .legal-content p { color:var(--muted); font-size:14px; line-height:1.75; margin-bottom:12px; }
    .legal-content ul, .legal-content ol { padding-inline-start:22px; margin-bottom:12px; }
    .legal-content li { color:var(--muted); font-size:14px; line-height:1.75; margin-bottom:6px; }
    .legal-content a { text-decoration:underline; }
    .legal-content strong { color:var(--ink); font-weight:700; }
    .legal-content .notice {
      background:var(--paper); border:2px solid var(--ink); padding:16px 18px;
      margin:20px 0; font-size:13px; color:var(--muted); line-height:1.6;
    }
    .legal-content table { width:100%; border-collapse:collapse; margin:16px 0; font-size:13px; }
    .legal-content th { background:var(--ink); color:var(--bg); padding:8px 12px; text-align:start; font-weight:700; }
    .legal-content td { padding:8px 12px; border-bottom:1px solid var(--line-soft); color:var(--muted); vertical-align:top; }

    /* ── Двухколоночная раскладка правовых страниц: sticky-оглавление слева ── */
    .legal-layout {
      max-width:1080px; margin:48px auto 80px; padding:0 24px;
      display:grid; grid-template-columns:230px minmax(0,1fr); align-items:start;
    }
    .legal-layout .legal-content, .legal-layout .art-col {
      max-width:none; margin:0; padding:0 0 0 44px;
      border-inline-start:2px solid var(--ink);
      /* min-width у грид-элемента по умолчанию auto: широкий потомок (блок
         кода с длинными строками) не даёт колонке сжаться, и на телефоне она
         распирала сетку до 604px при экране 390. На десктопе это скрывал
         minmax(0,1fr), в мобильном правиле колонка задана как 1fr. */
      min-width:0;
    }
    .legal-toc { position:sticky; top:80px; padding-inline-end:36px; }
    .legal-toc-head {
      font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:700;
      letter-spacing:0.16em; text-transform:uppercase; color:var(--faint); margin-bottom:14px;
    }
    .legal-toc ol { list-style:none; }
    .legal-toc li + li { border-top:1px solid var(--line-soft); }
    .legal-toc a {
      display:flex; gap:12px; align-items:baseline; text-decoration:none;
      padding:9px 0; color:var(--muted); transition:color 120ms var(--ease);
    }
    .legal-toc a .n {
      font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:700;
      color:var(--faint); flex:none; width:18px; transition:color 120ms var(--ease);
    }
    .legal-toc a .t { font-size:13px; font-weight:600; line-height:1.4; }
    .legal-toc a:hover { color:var(--ink); }
    .legal-toc a:hover .n, .legal-toc a.active .n { color:var(--ink); }
    .legal-toc a.active { color:var(--ink); }
    .legal-toc a.active .t { text-decoration:underline; text-underline-offset:3px; }
    /* Клик по якорю/скролл-спай не должны прятать заголовок под sticky-шапкой. */
    .legal-content h2 { scroll-margin-top:84px; }

    @media (max-width:900px) {
      .legal-layout { grid-template-columns:1fr; max-width:760px; }
      .legal-toc { display:none; }
      .legal-layout .legal-content { border-inline-start:none; padding-inline-start:0; }
    }


    /* ── Меню разделов (только у языков, где есть SEO-граф) ──────────────
       Три панели вместо пяти плоских выпадашек. Список ссылок отвечает на
       вопрос «какие есть страницы», но не на вопрос «что тут вообще есть»;
       панель отвечает на второй: слева тема раздела, справа его карта.
       Панель позиционируется от самой шапки, а не от кнопки: иначе широкий
       блок у правого раздела вылезал бы за край окна. */
    .nav-mega { gap:2px; }
    .mega { position:static; }
    .mega-btn { display:inline-flex; align-items:center; gap:6px; border:none; background:transparent;
      color:var(--muted); font:inherit; font-weight:700; font-size:12px; text-transform:uppercase;
      letter-spacing:0.06em; padding:8px 10px; cursor:pointer; border-radius:var(--r-sm); }
    .mega-btn:hover, .mega.open .mega-btn { color:var(--ink); background:var(--raised); }
    .mega-btn:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
    .mega-caret { width:0; height:0; border:4px solid transparent; border-top-color:currentColor;
      margin-top:3px; transition:transform 140ms var(--ease); }
    .mega.open .mega-caret { transform:rotate(180deg); margin-top:-3px; }
    .mega-list { display:none; position:absolute; inset-inline-start:24px; top:calc(100% + 10px);
      z-index:40; width:min(880px, calc(100vw - 48px)); background:var(--paper);
      border:2px solid var(--ink); border-radius:var(--r-lg); box-shadow:6px 6px 0 0 var(--ink);
      padding:24px; grid-template-columns:minmax(180px,0.85fr) minmax(0,2.5fr); gap:28px; }
    .mega.open .mega-list { display:grid; }
    .mega-lead { border-inline-end:1.5px solid var(--line-soft); padding-inline-end:24px; }
    .mega-lead-h { font-family:"Unbounded","Unbounded Fallback",sans-serif; font-weight:800; font-size:19px;
      line-height:1.15; letter-spacing:-.02em; color:var(--ink); margin:0 0 10px; }
    .mega-lead-p { font-size:13px; line-height:1.5; color:var(--muted); margin:0;
      text-transform:none; letter-spacing:0; font-weight:400; }
    .mega-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:20px 24px; }
    .mega-grp-h { font-family:"JetBrains Mono",monospace; font-size:10px; font-weight:800;
      letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin:0 0 9px; }
    .mega-grp a { display:block; padding:4px 0; text-decoration:none; font-size:13.5px;
      font-weight:600; line-height:1.35; color:var(--ink); text-transform:none; letter-spacing:0; }
    .mega-grp a:hover { text-decoration:underline; text-decoration-color:var(--y);
      text-decoration-thickness:2px; text-underline-offset:3px; }
    @media (max-width:1040px) {
      .mega.open .mega-list { grid-template-columns:1fr; }
      .mega-lead { border-inline-end:none; border-bottom:1.5px solid var(--line-soft);
        padding-inline-end:0; padding-bottom:16px; }
    }

    /* ── Подвал как слой обхода ─────────────────────────────────────────
       Светлый и просторный. Заголовок колонки набран тем же шрифтом, что и
       заголовки страниц: подвал должен читаться человеком, иначе он
       превращается в свалку ключевых слов — и это видно. */
    .foot-graph { display:grid; grid-template-columns:minmax(0,1.2fr) repeat(4,minmax(0,1fr));
      gap:32px 40px; padding-top:54px; padding-bottom:34px;
      border-bottom:1.5px solid var(--line-soft); }
    /* Строке копирайта нужен воздух под линией: без него разделитель лежит на
       тексте вплотную, а весь запас пустоты уходит под строку. Правило
       привязано к соседству, а не к самой строке, — на четырнадцати языках без
       графа подвала-сетки нет, и там отступ был бы пустой прибавкой. */
    .foot-graph + .foot { padding-top:30px; }
    .foot-lead { padding-inline-end:28px; }
    .foot-tagline { font-family:"Unbounded","Unbounded Fallback",sans-serif; font-weight:800; font-size:21px;
      line-height:1.25; letter-spacing:-.02em; color:var(--ink); margin:0 0 18px; max-width:22ch; }
    .foot-lead-links { display:flex; flex-wrap:wrap; gap:10px 18px; }
    .foot-h { font-family:"Unbounded","Unbounded Fallback",sans-serif; font-size:20px; font-weight:800;
      letter-spacing:-.02em; text-transform:none; color:var(--ink); margin:0 0 18px; }
    .foot-graph ul { list-style:none; margin:0; padding:0; }
    .foot-graph li + li { margin-top:11px; }
    .foot-graph a { font-size:15px; line-height:1.4; color:var(--ink); text-decoration:none;
      text-transform:none; letter-spacing:0; font-weight:500; }
    .foot-graph a:hover { text-decoration:underline;
      text-decoration-color:var(--y); text-decoration-thickness:2px; text-underline-offset:4px; }
    .foot-all { font-weight:700 !important; }
    @media (max-width:1100px) {
      .foot-graph { grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px; }
      .foot-lead { grid-column:1 / -1; padding-inline-end:0; }
    }
    @media (max-width:600px) {
      .foot-graph { grid-template-columns:1fr; gap:26px; padding-top:38px; padding-bottom:34px; }
      .foot-h { font-size:18px; margin-bottom:14px; }
      .foot-tagline { font-size:19px; }
    }
    @media (prefers-reduced-motion: reduce) { .mega-caret { transition:none; } }

    footer { padding:34px 0; }
    .foot { display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center;
      font-size:11px; color:var(--muted); text-transform:uppercase; font-weight:600; letter-spacing:0.05em; }
    .foot a { text-decoration:none; } .foot a:hover { color:var(--ink); }

    /* ── Cookie consent widget ── */
    /* Баннер прикреплён к низу, и любое изменение его высоты сдвигает его
       верхний край — Lighthouse считал это сдвигом вёрстки на 0,11 (порог
       «хорошо» — 0,10) на каждой странице сайта. Высоту меняла подмена
       веб-шрифтов (display=swap): системный шрифт в баннере убирает
       перерисовку, `contain` не даёт содержимому влиять на соседей. */
    #wh-cookie-banner {
      position:fixed; bottom:0; inset-inline-start:0; inset-inline-end:0;
      background:var(--paper); border-top:2px solid var(--ink); z-index:200;
      padding:18px 0; box-shadow:0 -4px 24px rgba(0,0,0,.08);
      font-family:-apple-system,system-ui,"Segoe UI",Roboto,sans-serif;
      contain:layout paint;
    }
    .wh-cookie-inner { max-width:900px; margin:0 auto; padding:0 24px; }
    .wh-cookie-title { font-family:inherit; font-size:14px; font-weight:800;
      letter-spacing:-.01em; margin-bottom:6px; }
    .wh-cookie-text { color:var(--muted); font-size:13px; margin-bottom:14px; line-height:1.5; }
    .wh-cookie-manage { margin-bottom:14px; border-top:1px solid var(--line-soft); padding-top:12px; }
    .wh-cookie-row { display:flex; justify-content:space-between; align-items:flex-start;
      gap:16px; padding:10px 0; border-bottom:1px solid var(--line-soft); }
    .wh-cookie-row:last-child { border-bottom:none; }
    .wh-cookie-row-label b { display:block; font-size:13px; font-weight:700; margin-bottom:2px; }
    .wh-cookie-row-label span { font-size:12px; color:var(--muted); line-height:1.5; }
    .wh-cookie-toggle { position:relative; width:40px; height:22px; flex-shrink:0; margin-top:2px; }
    .wh-cookie-toggle input { opacity:0; width:0; height:0; position:absolute; }
    .wh-cookie-toggle .slider {
      position:absolute; inset:0; background:var(--line-soft); border-radius:11px;
      cursor:pointer; transition:background .2s;
    }
    .wh-cookie-toggle input:checked + .slider { background:var(--ink); }
    .wh-cookie-toggle input:disabled + .slider { cursor:not-allowed; opacity:.5; }
    .wh-cookie-toggle .slider::after {
      content:""; position:absolute; top:3px; inset-inline-start:3px;
      width:16px; height:16px; background:#fff; border-radius:50%; transition:transform .2s;
    }
    .wh-cookie-toggle input:checked + .slider::after { transform:translateX(18px); }
    .wh-cookie-btns { display:flex; gap:10px; flex-wrap:wrap; }

    @media (max-width:780px) {
      .nav-anchors { display:none; }
      .nav-left { gap:0; }
      .burger { display:inline-flex; }
      .btn-login { display:none; }
    }
    @media (max-width:360px) {
      /* Очень узкие экраны: лого-знак как иконка-домой, чтобы шапка не переполнялась. */
      .logo-text { display:none; }
    }
    @media (max-width:600px) {
      .foot { justify-content:center; text-align:center; }
      .wh-cookie-btns { flex-direction:column; }
      .wh-cookie-btns .btn { width:100%; justify-content:center; }
    }
    @media (prefers-reduced-motion: reduce) {
      .ticker, .pulse { animation:none !important; }
    }
  
    /* ── Статья блога ───────────────────────────────────────────────────────
       Ширина колонки текста ограничена ~68 знаками: длиннее строка — тяжелее
       возврат глаза на следующую. Оглавление липнет сбоку на широком экране и
       уезжает наверх на узком. */
    /* Сетку и колонки даёт .legal-layout — здесь только отступ сверху. */
    .art-wrap { margin-top:34px; }
    .crumbs { display:flex; gap:9px; align-items:center; font-size:12px;
      color:var(--faint); font-family:"JetBrains Mono",monospace; text-transform:uppercase; letter-spacing:.06em; }
    .crumbs a { color:var(--faint); text-decoration:none; }
    .crumbs a:hover { color:var(--ink); }
    .crumbs span:last-child { color:var(--ink); }
    .art-title { font-family:"Unbounded","Unbounded Fallback",sans-serif; font-size:clamp(26px,3.4vw,40px);
      font-weight:900; letter-spacing:-0.03em; line-height:1.1; margin:12px 0 0; }
    .art-lead { margin:16px 0 0; font-size:17px; line-height:1.6; color:var(--muted); }
    .art h2 { font-family:"Unbounded","Unbounded Fallback",sans-serif; font-size:clamp(20px,2.4vw,26px); font-weight:800;
      letter-spacing:-0.02em; line-height:1.2; margin:44px 0 0; scroll-margin-top:88px; }
    .art h3 { font-size:17px; font-weight:800; margin:28px 0 0; letter-spacing:-0.01em; }
    .art p { margin:14px 0 0; font-size:15.5px; line-height:1.68; }
    .art b { font-weight:700; }
    .art ul, .art ol { margin:16px 0 0; padding-inline-start:22px; }
    .art li { margin-top:11px; font-size:15.5px; line-height:1.62; }
    /* Ссылка в тексте статьи: цвет не меняем (в статье он несёт смысл абзаца),
       различает её жёлтое подчёркивание — тот же акцент, что у всей страницы. */
    .art a { color:inherit; text-decoration:underline; text-decoration-color:var(--y);
      text-decoration-thickness:2px; text-underline-offset:3px; }
    .art a:hover { background:var(--y-soft); }
    .art .art-note { font-size:14px; color:var(--muted); border-inline-start:3px solid var(--y);
      padding-inline-start:14px; margin-top:20px; }
    /* ── Мост к продукту ────────────────────────────────────────────────
       Абзац в СЕРЕДИНЕ статьи, где у читателя вопрос «а это обязательно
       руками?» возникает сам. Регистр намеренно тихий: страница существует для
       чтения, и громкий блок посреди разбора — клякса, которая сбивает с текста
       и портит поведенческие. Отличается от обычного абзаца ровно настолько,
       чтобы его заметили, дочитав до него, а не вместо текста.

       Тот же приём, что у .art-note, и это не совпадение: оба — сноска в потоке,
       а не врезка. Разница только в насыщенности подложки. */
    .art-bridge { margin-top:24px; padding:16px 18px; border-radius:var(--r);
      background:var(--y-soft); border-inline-start:3px solid var(--y); }
    .art-bridge a { font-weight:700; }

    /* ── Таблица разбора ────────────────────────────────────────────────
       Обёртка со скроллом обязательна: колонка статьи узкая, а таблица из трёх
       смысловых столбцов иначе распирает грид-ячейку на телефоне (та же
       ловушка min-width:auto, что описана у .art-col). */
    .art-tbl { margin-top:24px; border:2px solid var(--ink); border-radius:var(--r);
      background:var(--paper); overflow-x:auto; }
    .art-tbl table { width:100%; min-width:520px; border-collapse:collapse; }
    .art-tbl th { background:var(--ink); color:var(--bg); padding:9px 13px; text-align:start;
      font-family:"JetBrains Mono",monospace; font-size:9.5px; font-weight:800;
      letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; }
    .art-tbl td { padding:12px 13px; border-top:1.5px solid var(--line-soft); vertical-align:top;
      font-size:14px; line-height:1.55; }
    .art-tbl td:first-child { font-weight:700; }
    .art-tbl code { font-family:"JetBrains Mono",monospace; font-size:12.5px; }
    .callout { margin-top:26px; padding:18px 20px; background:var(--y-soft);
      border:2px solid var(--ink); border-radius:var(--r); }
    .callout-cap { display:block; font-family:"JetBrains Mono",monospace; font-size:10px; font-weight:800;
      letter-spacing:.1em; text-transform:uppercase; }
    .callout p { margin-top:8px; font-size:14.5px; }
    /* ── Разбор «не работает / работает» ── */
    .cmp { margin-top:26px; border:2px solid var(--ink); border-radius:var(--r); overflow:hidden;
      background:var(--paper); }
    .cmp-row { display:grid; grid-template-columns:1fr 1fr; }
    .cmp-side { padding:16px 18px; }
    .cmp-side.bad { border-inline-end:2px solid var(--ink); }
    .cmp-cap { display:block; font-family:"JetBrains Mono",monospace; font-size:9.5px; font-weight:800;
      letter-spacing:.1em; text-transform:uppercase; margin-bottom:8px; }
    .cmp-side.bad .cmp-cap { color:var(--red); }
    .cmp-side.good .cmp-cap { color:var(--grn); }
    .cmp-side p { margin:0; font-size:14.5px; line-height:1.55; }
    .cmp-btn { display:block; width:100%; padding:11px 18px; border:none; border-top:2px solid var(--ink);
      background:var(--raised); color:var(--ink); font:inherit; font-size:11.5px; font-weight:800;
      text-transform:uppercase; letter-spacing:.06em; text-align:start; cursor:pointer; }
    .cmp-btn:hover { background:var(--y); color:var(--y-ink); }
    .cmp-why { padding:16px 18px; border-top:2px solid var(--ink); background:var(--raised); }
    .cmp-why p { margin:0; font-size:14.5px; line-height:1.6; }
    /* ── Кодировщик цитат ── */
    .qc { margin-top:22px; }
    .qc-item { border:2px solid var(--ink); border-radius:var(--r); background:var(--paper);
      padding:13px 15px; margin-bottom:10px; }
    .qc-q { margin:0 0 10px !important; font-size:14.5px !important; line-height:1.55; }
    .qc-who { font-family:"JetBrains Mono",monospace; font-size:9.5px; font-weight:800;
      letter-spacing:.08em; text-transform:uppercase; color:var(--faint); display:block; margin-bottom:6px; }
    .qc-codes { display:flex; flex-wrap:wrap; gap:6px; }
    .qc-codes button { border:1.5px solid var(--ink); border-radius:999px; background:var(--paper);
      color:var(--ink); font:inherit; font-size:11px; font-weight:700; padding:5px 11px; cursor:pointer; }
    .qc-codes button:hover { background:var(--raised); }
    .qc-codes button[aria-pressed="true"] { background:var(--y); color:var(--y-ink); }
    .qc-out { margin-top:16px; padding:15px 16px; border:2px solid var(--ink);
      border-radius:var(--r); background:var(--y-soft); }
    .qc-result { margin-top:8px; font-size:14px; line-height:1.6; }
    .qc-row { display:flex; align-items:baseline; gap:10px; margin-top:7px; }
    .qc-row b { font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:800;
      flex:none; width:26px; text-align:end; }
    .qc-tag { font-weight:700; }
    .qc-note { color:var(--muted); }
    /* Паттерн — код, набравший порог: подчёркиваем, что это уже не единичный случай. */
    .qc-row.pattern .qc-tag { border-bottom:2px solid var(--ink); }
    @media (max-width:560px) {
      /* В строку метка и пояснение не помещаются и ломаются пополам — кладём
         пояснение под метку, счётчик оставляем в одной строке с ней. */
      .qc-row { display:grid; grid-template-columns:34px 1fr; gap:2px 8px; }
      .qc-row b { width:auto; grid-row:1; }
      .qc-tag { grid-column:2; }
      .qc-note { grid-column:2; }
    }

    /* ── Скоркарта интервью ── */
    .sc { margin-top:22px; }
    .sc-table { width:100%; border-collapse:collapse; border:2px solid var(--ink); border-radius:var(--r);
      overflow:hidden; background:var(--paper); }
    .sc-table th { background:var(--ink); color:var(--bg); padding:9px 13px; text-align:start;
      font-family:"JetBrains Mono",monospace; font-size:9.5px; font-weight:800;
      letter-spacing:.1em; text-transform:uppercase; }
    .sc-table td { padding:12px 13px; border-top:1.5px solid var(--line-soft); vertical-align:middle; }
    .sc-table td b { display:block; font-size:14px; font-weight:700; }
    .sc-table td span { display:block; margin-top:3px; font-size:12.5px; color:var(--muted); line-height:1.45; }
    .sc-w { font-family:"JetBrains Mono",monospace; font-size:12px; font-weight:800; white-space:nowrap; }
    .sc-rate { white-space:nowrap; }
    .sc-rate button { width:31px; height:31px; margin-inline-end:5px; border:2px solid var(--ink);
      border-radius:var(--r-sm); background:var(--paper); color:var(--ink); font:inherit;
      font-size:13px; font-weight:800; cursor:pointer; }
    .sc-rate button:hover { background:var(--raised); }
    .sc-rate button[aria-pressed="true"] { background:var(--y); color:var(--y-ink); }
    .sc-out { display:flex; align-items:center; gap:16px; margin-top:14px; padding:14px 16px;
      border:2px solid var(--ink); border-radius:var(--r); background:var(--y-soft); }
    .sc-score { display:flex; align-items:baseline; gap:7px; flex:none; }
    .sc-score b { font-family:"Unbounded","Unbounded Fallback",sans-serif; font-size:28px; font-weight:900;
      letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
    .sc-score span { font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--muted); }
    .sc-verdict { font-size:14px; line-height:1.5; }
    @media (max-width:640px) {
      /* Таблица на телефоне не помещается: строка превращается в карточку. */
      .sc-table, .sc-table tbody, .sc-table tr, .sc-table td { display:block; width:100%; }
      .sc-table thead { display:none; }
      .sc-table tr { border-top:1.5px solid var(--line-soft); }
      .sc-table tr:first-child { border-top:none; }
      .sc-table td { border-top:none; padding:10px 13px 0; }
      .sc-table td.sc-rate { padding-bottom:13px; }
      .sc-w { padding-top:6px !important; color:var(--faint); }
      .sc-out { flex-direction:column; align-items:flex-start; gap:8px; }
    }

    /* ── Демо-оверлей в статье ───────────────────────────────────────────
       Панель повторяет оверлей приложения: тёмный фон, крупный радиус, жёлтый
       акцент. Цвета заданы числами, а не токенами темы: оверлей в продукте
       тёмный всегда, и в светлой теме сайта он должен остаться таким же. */
    .ovd { margin-top:22px; }
    .ovd-panel { background:#0E1014; border:1px solid rgba(255,255,255,.12); border-radius:20px;
      padding:14px 16px 16px; }
    .ovd-bar { display:flex; align-items:center; gap:12px; }
    .ovd-play { border:1.5px solid #E7AE46; border-radius:999px; background:transparent; color:#E7AE46;
      font:inherit; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
      padding:7px 15px; cursor:pointer; flex:none; }
    .ovd-play:hover { background:#E7AE46; color:#0E1014; }
    .ovd-wave { display:inline-flex; align-items:center; gap:3px; height:20px; flex:none; }
    .ovd-wave i { width:3px; height:20%; background:#E7AE46; border-radius:2px; }
    .ovd.on .ovd-wave i { animation:ovdwave 900ms ease-in-out infinite; }
    .ovd.on .ovd-wave i:nth-child(2) { animation-delay:.1s; }
    .ovd.on .ovd-wave i:nth-child(3) { animation-delay:.2s; }
    .ovd.on .ovd-wave i:nth-child(4) { animation-delay:.3s; }
    .ovd.on .ovd-wave i:nth-child(5) { animation-delay:.15s; }
    .ovd.on .ovd-wave i:nth-child(6) { animation-delay:.25s; }
    .ovd.on .ovd-wave i:nth-child(7) { animation-delay:.05s; }
    @keyframes ovdwave { 0%,100% { height:20%; } 50% { height:95%; } }
    .ovd-label { font-family:"JetBrains Mono",monospace; font-size:9.5px; font-weight:700;
      letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.5); }
    .ovd-count { margin-inline-start:auto; font-family:"JetBrains Mono",monospace; font-size:10px;
      font-weight:700; color:#E7AE46; white-space:nowrap; }
    .ovd-body { margin-top:12px; min-height:132px; border-radius:14px; background:rgba(255,255,255,.045);
      padding:13px 15px; color:#F2EFE6; font-size:14.5px; line-height:1.65; }
    .ovd-body p { margin:0 0 8px !important; color:#F2EFE6 !important; font-size:14.5px !important; }
    .ovd-body p:last-child { margin-bottom:0 !important; }
    .ovd-body .f { background:#E7AE46; color:#0E1014; border-radius:4px; padding:0 4px; font-weight:700; }
    .ovd-body .cur { display:inline-block; width:2px; height:1em; background:#E7AE46;
      vertical-align:-2px; animation:ovdcur 900ms steps(1) infinite; }
    @keyframes ovdcur { 0%,50% { opacity:1; } 51%,100% { opacity:0; } }
    @media (prefers-reduced-motion: reduce) {
      .ovd.on .ovd-wave i, .ovd-body .cur { animation:none; }
    }

    /* ── Анализатор речи ── */
    .sa { margin-top:22px; }
    .sa-f { display:flex; flex-direction:column; gap:5px; }
    .sa-f span { font-family:"JetBrains Mono",monospace; font-size:9.5px; font-weight:800;
      letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
    .sa-f textarea { border:2px solid var(--ink); border-radius:var(--r-sm); background:var(--paper);
      color:var(--ink); font:inherit; font-size:14px; line-height:1.6; padding:12px 13px; width:100%; resize:vertical; }
    .sa-f textarea:focus { outline:2px solid var(--y); outline-offset:1px; }
    .sa-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-top:14px; }
    .sa-card { border:2px solid var(--ink); border-radius:var(--r-sm); background:var(--paper);
      padding:12px 10px; text-align:center; }
    .sa-card b { display:block; font-family:"Unbounded","Unbounded Fallback",sans-serif; font-size:21px; font-weight:900;
      letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
    .sa-card span { display:block; margin-top:5px; font-size:10.5px; line-height:1.3; color:var(--muted); }
    /* Тревожные метрики жёлтым: это не ошибка, а то, на что смотреть в первую очередь. */
    .sa-card.warn { background:var(--y-soft); }
    .sa-lists { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
    .sa-cap { display:block; font-family:"JetBrains Mono",monospace; font-size:9.5px; font-weight:800;
      letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin-bottom:6px; }
    .sa-lists p { margin:0 !important; font-size:14px; line-height:1.6; }
    .sa-hint { margin-top:14px !important; font-size:13px; color:var(--muted); }
    @media (max-width:760px) { .sa-grid { grid-template-columns:repeat(3,1fr); } .sa-lists { grid-template-columns:1fr; } }
    @media (max-width:420px) { .sa-grid { grid-template-columns:repeat(2,1fr); } }

    /* ── Вкладки (форматы повестки) ── */
    .tabs { margin-top:22px; }
    .tabs-bar { display:flex; flex-wrap:wrap; gap:8px; }
    .tabs-bar button { border:2px solid var(--ink); border-radius:999px; background:var(--paper);
      color:var(--ink); font:inherit; font-size:11.5px; font-weight:800; text-transform:uppercase;
      letter-spacing:.05em; padding:8px 15px; cursor:pointer; transition:background 120ms var(--ease); }
    .tabs-bar button:hover { background:var(--raised); }
    .tabs-bar button[aria-selected="true"] { background:var(--y); color:var(--y-ink); }
    .tabs-panel { margin-top:16px; }
    .tabs-note { margin:0 0 14px !important; font-size:14px; color:var(--muted); }

    /* ── Блок с кодом шаблона ── */
    .tpl { margin-top:22px; border:2px solid var(--ink); border-radius:var(--r); overflow:hidden; }
    .tpl-bar { display:flex; align-items:center; justify-content:space-between; gap:12px;
      padding:9px 14px; background:var(--ink); color:var(--bg); }
    .tpl-cap { font-family:"JetBrains Mono",monospace; font-size:10px; font-weight:800;
      letter-spacing:.1em; text-transform:uppercase; }
    .tpl-copy { border:1.5px solid var(--bg); border-radius:var(--r-sm); background:transparent;
      color:var(--bg); font:inherit; font-size:10px; font-weight:800; letter-spacing:.06em;
      text-transform:uppercase; padding:5px 11px; cursor:pointer; }
    .tpl-copy:hover { background:var(--y); color:var(--y-ink); border-color:var(--y); }
    .tpl pre, .pb-out pre { margin:0; padding:16px 18px; background:var(--paper); overflow-x:auto;
      font-family:"JetBrains Mono",monospace; font-size:12.5px; line-height:1.65; white-space:pre; }
    /* ── Конструктор ── */
    .pb { margin-top:22px; display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
    .pb-form { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    .pb-f { display:flex; flex-direction:column; gap:5px; }
    .pb-f.pb-wide { grid-column:1 / -1; }
    .pb-f span { font-family:"JetBrains Mono",monospace; font-size:9.5px; font-weight:800;
      letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
    .pb-f input, .pb-f textarea { border:2px solid var(--ink); border-radius:var(--r-sm);
      background:var(--paper); color:var(--ink); font:inherit; font-size:13.5px; padding:9px 11px;
      width:100%; resize:vertical; }
    .pb-f input:focus, .pb-f textarea:focus { outline:2px solid var(--y); outline-offset:1px; }
    .pb-hint { font-style:normal; font-size:11px; color:var(--faint); }
    .pb-out { border:2px solid var(--ink); border-radius:var(--r); overflow:hidden;
      position:sticky; top:88px; }
    /* В выводе конструктора — пользовательский текст: перенос удобнее
       горизонтальной прокрутки. В шаблоне выше перенос НЕ нужен: там
       markdown-таблица, её ломать нельзя. */
    .pb-out pre { min-height:220px; white-space:pre-wrap; overflow-wrap:anywhere; }
    /* ── Чек-лист ── */
    .chk { margin-top:22px; border:2px solid var(--ink); border-radius:var(--r);
      background:var(--paper); padding:18px 20px 20px; position:relative; }
    .chk-bar { height:7px; border:1.5px solid var(--ink); border-radius:999px; overflow:hidden; }
    .chk-bar i { display:block; height:100%; width:0; background:var(--y); transition:width 220ms var(--ease); }
    .chk-count { display:block; margin-top:8px; font-family:"JetBrains Mono",monospace; font-size:10.5px;
      font-weight:700; color:var(--faint); text-transform:uppercase; letter-spacing:.08em; }
    .chk ul { margin:14px 0 0; padding:0; list-style:none; }
    .chk li { margin-top:10px; }
    .chk label { display:flex; gap:11px; align-items:flex-start; cursor:pointer; font-size:14.5px; line-height:1.5; }
    .chk input { appearance:none; width:19px; height:19px; flex:none; margin-top:1px; cursor:pointer;
      border:2px solid var(--ink); border-radius:5px; background:var(--paper); position:relative; }
    .chk input:checked { background:var(--y); }
    .chk input:checked::after { content:"✓"; position:absolute; inset:-2px; display:grid; place-items:center;
      font-size:13px; font-weight:800; color:var(--y-ink); }
    .chk input:checked + span { color:var(--faint); text-decoration:line-through; }
    /* ── Читайте также ── */
    .related { margin-top:44px; padding-top:22px; border-top:2px solid var(--ink); }
    .rel-cap { display:block; font-family:"JetBrains Mono",monospace; font-size:9.5px; font-weight:800;
      letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:12px; }
    .related ul { margin:0; padding:0; list-style:none; display:grid; gap:10px; }
    .related li { margin:0; }
    .related a { display:flex; gap:12px; align-items:baseline; text-decoration:none; color:var(--ink);
      border:2px solid var(--ink); border-radius:var(--r); background:var(--paper);
      padding:13px 15px; font-size:14.5px; line-height:1.4; font-weight:600;
      transition:transform 120ms var(--ease), box-shadow 120ms var(--ease); }
    .related a:hover { transform:translate(-2px,-2px); box-shadow:5px 5px 0 0 var(--ink); }
    .rel-tag { flex:none; font-family:"JetBrains Mono",monospace; font-size:9.5px; font-weight:800;
      letter-spacing:.05em; text-transform:uppercase; padding:4px 9px; border-radius:999px;
      background:var(--y); color:var(--y-ink); }
    @media (max-width:560px) { .related a { flex-direction:column; gap:8px; } }

    /* ── Полоса прочитанного ── */
    .art-progress { position:fixed; top:0; inset-inline-start:0; height:3px; width:0; z-index:60;
      background:var(--y); }
    @media (max-width:900px) {
      .legal-layout .art-col { border-inline-start:none; padding-inline-start:0; }
      .cmp-row { grid-template-columns:1fr; }
      .cmp-side.bad { border-inline-end:none; border-bottom:2px solid var(--ink); }
      .pb { grid-template-columns:1fr; }
      .pb-out { position:static; }
    }
    @media (max-width:560px) { .pb-form { grid-template-columns:1fr; } }

    /* ── Блог: лента карточек ───────────────────────────────────────────────
       Плитки в той же системе, что и сетка сценариев на главной: жёсткая
       рамка, смещённая тень, ощутимый радиус. Обложек-фотографий нет, поэтому
       место снимка занимает геометрический блок на фирменных цветах — карточка
       без него читается как незагрузившаяся. */
    /* main у этого шаблона без контейнера — юридический фрагмент несёт свой
       .legal-content. Ленте нужен более широкий, задаём свой. */
    .blog-wrap { max-width:1120px; margin:48px auto 80px; padding:0 24px; }
    .blog-head { margin:0 0 30px; }
    .blog-head h1 { font-family:"Unbounded","Unbounded Fallback",sans-serif; font-size:clamp(28px,4vw,44px); font-weight:900;
      letter-spacing:-0.03em; line-height:1.06; margin:0; }
    .blog-head p { margin:14px 0 0; font-size:15px; line-height:1.55; color:var(--muted); max-width:620px; }
    /* Шесть колонок — общий знаменатель трети (2), половины (3) и двух третей (4).
       Плитки идут семёркой: 4+2 | 3+3 | 2+2+2, ряды складываются ровно. На
       неполном хвосте (статей не кратно семи) дыру закрывает dense — он
       подтягивает следующую узкую карточку в незанятые колонки. */
    .blog-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:18px;
      grid-auto-flow:row dense; }
    .post { grid-column:span 2; display:flex; flex-direction:column; padding:18px 20px 20px;
      background:var(--paper);
      border:2px solid var(--ink); border-radius:18px; box-shadow:var(--shadow-hard);
      transition:transform 130ms var(--ease), box-shadow 130ms var(--ease); }
    .post:hover { transform:translate(-3px,-3px); box-shadow:7px 7px 0 0 var(--ink); }
    .post .cover { height:132px; border:2px solid var(--ink); border-radius:12px; margin-bottom:16px; }
    .post .date { font-family:"JetBrains Mono",monospace; font-size:10.5px; font-weight:700;
      letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
    .post h2 { font-family:"Unbounded","Unbounded Fallback",sans-serif; font-size:16px; font-weight:800; line-height:1.3;
      letter-spacing:-0.02em; margin:11px 0 0; }
    .post p { margin:9px 0 0; font-size:13.5px; line-height:1.5; color:var(--muted); }
    /* margin-top:auto прижимает подвал карточки вниз — иначе у карточек с
       разной длиной текста метки прыгают по высоте. */
    .post .meta { display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:18px; }
    .post .tag { font-family:"JetBrains Mono",monospace; font-size:10px; font-weight:800; text-transform:uppercase;
      letter-spacing:.05em; padding:5px 10px; border-radius:999px; border:1.5px solid var(--ink);
      background:var(--y); color:var(--y-ink); }
    .post h2 a.post-link { color:inherit; text-decoration:none; }
    .post h2 a.post-link:hover { text-decoration:underline; text-underline-offset:3px; }
    a.cover { display:block; }
    .post .read { margin-inline-start:auto; font-family:"JetBrains Mono",monospace; font-size:10px;
      font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink);
      text-decoration:none; border-bottom:2px solid var(--y); }
    .post .read:hover { border-bottom-color:var(--ink); }
    /* У заглушки нет ссылки — курсор не должен обещать переход. */
    .post.stub { cursor:default; }
    .post .soon { font-family:"JetBrains Mono",monospace; font-size:10.5px; font-weight:700; color:var(--faint); }
    /* Размеры плиток. Первая в семёрке — входная: две трети строки и заливка.
       Дальше пара половинок и три трети; так соседние карточки не совпадают
       по ширине нигде внутри цикла. */
    .post:nth-child(7n+1) { grid-column:span 4; background:var(--y-soft); }
    .post:nth-child(7n+1) h2 { font-size:21px; }
    .post:nth-child(7n+1) .cover { height:178px; }
    .post:nth-child(7n+3), .post:nth-child(7n+4) { grid-column:span 3; }
    .post:nth-child(7n+3) .cover, .post:nth-child(7n+4) .cover { height:150px; }
    /* Обложки закреплены ЗА СТАТЬЁЙ (класс из BLOG_ARTICLES), а не за позицией.
       Позиционный `nth-child` давал два дефекта сразу: мотивов было пять «ровно
       по числу карточек» — и шестая статья повторила первую; а после сортировки
       «свежее сверху» каждая новая статья перекрашивала обложки всем прежним.
       Те же мотивы рисует OG-баннер, поэтому карточка и превью в соцсети
       читаются как один материал. */
    .cover-stripes { background:
      repeating-linear-gradient(45deg, var(--y) 0 14px, var(--ink) 14px 28px); }
    .cover-circles { background:
      radial-gradient(circle at 30% 40%, var(--y) 0 22%, transparent 22%),
      radial-gradient(circle at 72% 68%, var(--ink) 0 26%, transparent 26%), var(--raised); }
    .cover-bars { background:
      linear-gradient(var(--ink) 0 0) 0 0/100% 34% no-repeat,
      linear-gradient(var(--y) 0 0) 0 100%/62% 34% no-repeat, var(--raised); }
    .cover-quarters { background:
      conic-gradient(from 45deg, var(--y) 0 25%, var(--raised) 0 50%, var(--ink) 0 75%, var(--raised) 0); }
    .cover-dashes { background:
      repeating-linear-gradient(90deg, var(--ink) 0 10px, transparent 10px 26px),
      linear-gradient(160deg, var(--y) 0 55%, var(--raised) 55%); }
    .cover-rules { background:
      repeating-linear-gradient(0deg, var(--ink) 0 5px, transparent 5px 21px),
      linear-gradient(115deg, var(--y) 0 44%, var(--raised) 44%); }
    .cover-checker { background:
      radial-gradient(circle at 50% 50%, var(--ink) 0 17%, transparent 17%),
      repeating-linear-gradient(135deg, var(--raised) 0 13px, var(--y) 13px 26px); }
    .cover-fade { background:
      repeating-linear-gradient(90deg, var(--ink) 0 4px, transparent 4px 20px),
      linear-gradient(90deg, var(--y) 0 30%, var(--raised) 92%); }
    .cover-steps { background:
      linear-gradient(var(--ink) 0 0) 0 100%/100% 4px no-repeat,
      linear-gradient(to top right, var(--y) 0 49.5%, transparent 50%),
      repeating-linear-gradient(90deg, transparent 0 26px, var(--ink) 26px 30px), var(--raised); }
    .cover-grid { background:
      repeating-linear-gradient(0deg, var(--ink) 0 3px, transparent 3px 24px),
      repeating-linear-gradient(90deg, var(--ink) 0 3px, transparent 3px 24px),
      linear-gradient(200deg, var(--y) 0 58%, var(--raised) 58%); }
    /* Сравнение: половина сплошная, половина в штриховке — два разных ответа
       на один вопрос, разделённые чертой. */
    .cover-split { background:
      linear-gradient(90deg, transparent 0 calc(50% - 2px), var(--ink) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)),
      repeating-linear-gradient(45deg, var(--ink) 0 4px, transparent 4px 18px),
      linear-gradient(90deg, var(--y) 0 50%, var(--raised) 50%); }
    /* «cluster»: слева россыпь мелких клеток — архив организации, справа один
       цельный блок — контекст одного человека. Тот же мотив, что на OG-картинке.
       Сетка нарезана цветом --raised: на жёлтой половине она видна и дробит её,
       на тёмной ложится сама на себя и исчезает — поэтому блок остаётся цельным. */
    .cover-cluster { background:
      linear-gradient(90deg, transparent 0 70%, var(--y) 70% 92%, transparent 92%),
      repeating-linear-gradient(0deg, var(--raised) 0 4px, transparent 4px 16px),
      repeating-linear-gradient(90deg, var(--raised) 0 4px, transparent 4px 16px),
      linear-gradient(90deg, var(--y) 0 58%, var(--raised) 58%); }
    /* «frame»: штриховка по всей плашке и цельный прямоугольник поверх неё —
       окно, которое есть на экране, но не попадает в захват. Тот же мотив
       рисует OG-баннер статьи. */
    .cover-frame { background:
      linear-gradient(var(--raised) 0 0) 50% 50%/60% 52% no-repeat,
      repeating-linear-gradient(135deg, var(--ink) 0 5px, transparent 5px 18px),
      linear-gradient(var(--y) 0 0); }
    /* «waves»: два ряда одинаковых столбцов, нижний сдвинут на полшага — одна и та
       же речь и её перевод, идущий следом с небольшим отставанием. */
    .cover-waves { background:
      repeating-linear-gradient(90deg, var(--y) 0 8px, transparent 8px 22px) 0 0/100% 44% no-repeat,
      repeating-linear-gradient(90deg, var(--y) 0 8px, transparent 8px 22px) 11px 100%/100% 44% no-repeat,
      var(--raised); }
    /* «bubble»: широкая плашка и маленький «хвост» под ней — облако подсказки,
       которое видит только тот, кто говорит. */
    .cover-bubble { background:
      linear-gradient(var(--y) 0 0) 14% 20%/72% 46% no-repeat,
      linear-gradient(var(--y) 0 0) 26% 78%/14% 16% no-repeat,
      var(--raised); }
    /* «chain»: четыре звена на одной линии — встреча, контекст, решение, задача.
       Линия проходит насквозь: переходы важнее самих звеньев. */
    .cover-chain { background:
      linear-gradient(var(--ink) 0 0) 0 50%/100% 4px no-repeat,
      repeating-linear-gradient(90deg, transparent 0 9px, var(--y) 9px 47px, transparent 47px 56px)
        0 50%/100% 40% no-repeat,
      var(--raised); }
    /* «lines»: поле слева и строки конспекта разной длины — страница тетради,
       где записано не всё подряд, а по делу. */
    .cover-lines { background:
      repeating-linear-gradient(0deg, var(--y) 0 6px, transparent 6px 22px) 22% 0/62% 100% no-repeat,
      linear-gradient(var(--y) 0 0) 0 0/13% 100% no-repeat,
      var(--raised); }
    /* «funnel»: три сужающиеся полосы — разговор, протокол, результат. */
    .cover-funnel { background:
      linear-gradient(var(--y) 0 0) 50% 14%/86% 18% no-repeat,
      linear-gradient(var(--y) 0 0) 50% 50%/54% 18% no-repeat,
      linear-gradient(var(--y) 0 0) 50% 86%/22% 18% no-repeat,
      var(--raised); }
    /* «path»: четыре звена цепочки и последнее — рамкой: обещание, дошедшее
       до доски, где его видно. */
    .cover-path { background:
      linear-gradient(var(--y) 0 0) 6% 50%/12% 26% no-repeat,
      linear-gradient(var(--y) 0 0) 30% 50%/12% 26% no-repeat,
      linear-gradient(var(--y) 0 0) 54% 50%/12% 26% no-repeat,
      linear-gradient(var(--raised) 0 0) 90% 50%/10% 16% no-repeat,
      linear-gradient(var(--y) 0 0) 90% 50%/16% 26% no-repeat,
      var(--raised); }
    /* «hub»: ядро и четыре спутника — опорная статья кластера и её материалы. */
    .cover-hub { background:
      linear-gradient(var(--y) 0 0) 50% 50%/34% 40% no-repeat,
      linear-gradient(var(--y) 0 0) 8% 16%/18% 20% no-repeat,
      linear-gradient(var(--y) 0 0) 92% 16%/18% 20% no-repeat,
      linear-gradient(var(--y) 0 0) 8% 84%/18% 20% no-repeat,
      linear-gradient(var(--y) 0 0) 92% 84%/18% 20% no-repeat,
      var(--raised); }
    /* «pulse»: одинаковые штрихи с одинаковым шагом на узкой полосе — ежедневный
       ритм коротких встреч. Короткие и равные: планёрка тем и отличается от
       совещания, что у неё нет длинных участков. */
    .cover-pulse { background:
      repeating-linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 22px),
      linear-gradient(180deg, var(--raised) 0 30%, var(--y) 30% 70%, var(--raised) 70%); }
    /* «stack»: стопка ровных плашек — пункты повестки, одна выделена: совещание
       имеет смысл, когда из списка вопросов остаётся принятое решение. */
    .cover-stack { background:
      linear-gradient(var(--ink) 0 0) 12% 18%/76% 12% no-repeat,
      linear-gradient(var(--ink) 0 0) 12% 38%/76% 12% no-repeat,
      linear-gradient(var(--y) 0 0) 12% 58%/76% 12% no-repeat,
      linear-gradient(var(--ink) 0 0) 12% 78%/48% 12% no-repeat, var(--raised); }
    /* «blocks»: прямоугольники, связанные линией — компоненты системы и связи
       между ними: то, что рисуют на секции системного дизайна. */
    .cover-blocks { background:
      linear-gradient(var(--ink) 0 0) 0 50%/100% 3px no-repeat,
      linear-gradient(var(--y) 0 0) 8% 26%/24% 26% no-repeat,
      linear-gradient(var(--y) 0 0) 38% 26%/24% 26% no-repeat,
      linear-gradient(var(--y) 0 0) 68% 26%/24% 26% no-repeat,
      linear-gradient(var(--ink) 0 0) 38% 66%/24% 22% no-repeat, var(--raised); }
    /* «shelf»: ряды ячеек разной ширины — хранилище, в котором находят не потому,
       что помнят полку, а потому что ячейка подписана. */
    .cover-shelf { background:
      linear-gradient(var(--ink) 0 0) 0 32%/100% 3px no-repeat,
      linear-gradient(var(--ink) 0 0) 0 68%/100% 3px no-repeat,
      linear-gradient(var(--y) 0 0) 8% 8%/26% 20% no-repeat,
      linear-gradient(var(--y) 0 0) 40% 8%/38% 20% no-repeat,
      linear-gradient(var(--y) 0 0) 8% 44%/44% 20% no-repeat,
      linear-gradient(var(--y) 0 0) 58% 44%/20% 20% no-repeat,
      linear-gradient(var(--y) 0 0) 8% 78%/30% 16% no-repeat, var(--raised); }
    /* «digest»: длинный поток строк слева сжимается в три плотных блока справа —
       разговор, из которого остаётся короткий конспект. */
    .cover-digest { background:
      repeating-linear-gradient(0deg, var(--ink) 0 3px, transparent 3px 13px) 0 0/46% 100% no-repeat,
      linear-gradient(var(--y) 0 0) 58% 22%/34% 14% no-repeat,
      linear-gradient(var(--y) 0 0) 58% 46%/34% 14% no-repeat,
      linear-gradient(var(--y) 0 0) 58% 70%/22% 14% no-repeat, var(--raised); }
    /* На планшете четыре колонки: входная карточка занимает строку целиком,
       остальные встают парами — половинки и трети там уже неразличимы. */
    @media (max-width:960px) {
      .blog-grid { grid-template-columns:repeat(4,1fr); }
      .post, .post:nth-child(7n+3), .post:nth-child(7n+4) { grid-column:span 2; }
      .post:nth-child(7n+1) { grid-column:span 4; }
    }
    @media (max-width:620px) {
      .blog-grid { grid-template-columns:1fr; }
      .post, .post:nth-child(7n+1), .post:nth-child(7n+3), .post:nth-child(7n+4) { grid-column:auto; }
      .post:nth-child(7n+1) .cover, .post:nth-child(7n+3) .cover, .post:nth-child(7n+4) .cover { height:132px; }
    }