/* ============================================================
   Kaufman Lab — основа обеих таблиц стилей: шрифты и примитивы.
   Сборка (build.py) ставит этот файл первым в site.css и proekt.css,
   отдельно на сайт он не попадает. Единственное место, где живут
   палитра, шрифтовые семейства, шкала размеров и отступы.
   Семантические цвета (--color-*) у страниц и статей свои — в их файлах.
   ============================================================ */

/* --- 0. Шрифты: свои, не Google. Кириллица и латиница отдельными файлами,
   браузер качает только нужный поднабор. font-display:swap — текст виден сразу. */
@font-face{font-family:Onest;font-style:normal;font-weight:700;font-display:swap;
  src:url("/assets/fonts/onest-cyrillic-700-normal.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Onest;font-style:normal;font-weight:700;font-display:swap;
  src:url("/assets/fonts/onest-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Onest;font-style:normal;font-weight:800;font-display:swap;
  src:url("/assets/fonts/onest-cyrillic-800-normal.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Onest;font-style:normal;font-weight:800;font-display:swap;
  src:url("/assets/fonts/onest-latin-800-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/fonts/ibm-plex-mono-cyrillic-400-normal.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("/assets/fonts/ibm-plex-mono-cyrillic-500-normal.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("/assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* --- Примитивы --------------------------------------------- */
:root{
  --paper-100:#F8F7F5; --paper-200:#EDEBE8; --paper-300:#E3E0DC; --paper-400:#D4D0CB;
  --ink-900:#17161A;   --ink-400:#676370;   --ink-200:#A9A5AC;
  --magenta-500:#C40064; --magenta-100:#FBE3EF;
  --green-500:#1C6E4E;

  --f-display:Onest,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --step--1:.78rem;
  --step-0:1rem;
  --step-1:1.12rem;
  --step-2:clamp(1.25rem,3.2vw,1.6rem);
  --step-3:clamp(1.7rem,4.5vw,2.4rem);
  --step-4:clamp(2.1rem,6vw,3.4rem);

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:28px; --sp-7:40px; --sp-8:56px;

  --measure:64ch; --page:1140px;
}

/* Повторы правил с site.css — намеренные. Оба файла собираются поверх osnova.css,
   и порядок правил внутри файла решает спор одинаковой силы: например, .mt6 должен
   стоять после .hero-links, иначе отступ станет 16px вместо 28. Перенос общих правил
   в osnova.css 20.09.2026 это и сломал — откачено, не повторять. */
/* ============================================================
   Kaufman Lab — стиль статей о проектах.
   Один файл на все статьи: правится здесь, меняется везде.
   Шрифты свои, не Google: внешние ресурсы запрещены проверкой.
   ============================================================ */

/* Шрифты и примитивы — в osnova.css, сборка ставит его первым. */
:root{
  /* плашка схем — тёмная в обеих темах */
  --shot-fg:#D8D3DE; --shot-line:#8E8896; --shot-hair:#4A4552;
  --shot-acc:#FF4D9E; --shot-alt:#7FB2F5; --shot-yes:#5FD3A0; --shot-dim:#8E8896;
}
:root{
  --color-bg:var(--paper-200); --color-surface:var(--paper-100); --color-sunk:var(--paper-300);
  --color-text:var(--ink-900); --color-text-muted:var(--ink-400); --color-line:var(--paper-400);
  --color-accent:var(--magenta-500); --color-accent-bg:var(--magenta-100);
  --color-yes:var(--green-500); --color-no:var(--ink-200);
  /* Заливка приглушённой полосы на графике. Раньше её красил --color-no,
     но то имя значит статус «нет» и в site.css несёт цвет текста; как
     текст это значение даёт контраст 2,04 — нечитаемо. Одно имя должно
     означать одну работу, иначе повторяется история --green-500. */
  --bar-dim:var(--ink-200);
  --shot-bg:#1A181D;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --color-bg:#131215; --color-surface:#1B191E; --color-sunk:#0E0D10;
  --color-text:#F2F0EE; --color-text-muted:#9C97A2; --color-line:#302D36;
  --color-accent:#FF4D9E; --color-accent-bg:#3A0F26;
  --color-yes:#5FD3A0; --color-no:#5C5763; --bar-dim:#5C5763; --shot-bg:#0B0A0D;
}}
:root[data-theme="dark"]{
  --color-bg:#131215; --color-surface:#1B191E; --color-sunk:#0E0D10;
  --color-text:#F2F0EE; --color-text-muted:#9C97A2; --color-line:#302D36;
  --color-accent:#FF4D9E; --color-accent-bg:#3A0F26;
  --color-yes:#5FD3A0; --color-no:#5C5763; --bar-dim:#5C5763; --shot-bg:#0B0A0D;
}
*{box-sizing:border-box}
body{
  margin:0; color:var(--color-text); background-color:var(--color-bg);
  background-image:radial-gradient(color-mix(in srgb, var(--color-text) 7%, transparent) 1px, transparent 1.5px);
  background-size:22px 22px;
  font-family:var(--f-body); font-size:1rem; line-height:1.6; -webkit-font-smoothing:antialiased;
}
.page{max-width:var(--page); margin:0 auto; padding:0 var(--sp-5)}
a{color:inherit; text-decoration:none}
.link{border-bottom:1px solid var(--color-accent)}
.muted{color:var(--color-text-muted)}
.mono{font-family:var(--f-mono)}
strong{font-weight:600}
h1,h2,h3{font-family:var(--f-display); margin:0; text-wrap:balance}

/* Шапка статьи — та же, что на главной и в разделах: марка слева, меню
   и кнопка темы справа. Статьи грузят только этот файл, поэтому правила
   повторены здесь один в один с site.css; расходиться им нельзя, иначе
   одна и та же шапка ведёт себя на двух половинах сайта по-разному.
   Так и было: .mark здесь не описан вовсе, марка оставалась неоформленной,
   а .top без flex-wrap на 390 px сминал её в две строки рядом с меню. */
.top{display:flex; align-items:center; gap:var(--sp-5); flex-wrap:wrap;
  padding:var(--sp-6) 0 var(--sp-5)}
.mark{font-family:var(--f-mono); font-weight:500; font-size:0.725rem; letter-spacing:.16em;
  text-transform:uppercase; line-height:1; color:var(--color-text); padding:7px 0}
.mark em{font-style:normal; color:var(--color-accent)}
.mark:hover{color:var(--color-accent)}
.nav{display:flex; gap:var(--sp-5); margin-left:auto; flex-wrap:wrap}
.nav a{font-family:var(--f-mono); font-size:0.725rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--color-text-muted);
  padding:5px 0; border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current]{color:var(--color-text); border-bottom-color:var(--color-accent)}
.nav a.cta{color:var(--color-accent)}
/* Кнопка темы уходит на строку марки, когда меню переносится под неё. */
@media (max-width:620px){
  .top{position:relative; padding-right:34px}
  .theme-btn{position:absolute; top:var(--sp-6); right:0; padding:6px 4px}
  .nav{gap:var(--sp-2) var(--sp-4)}
}

/* Наверх. Те же стили, что на страницах сайта: статьи грузят только этот
   файл, а страница проекта — самая длинная, и возврат к меню ей нужнее всех. */
/* padding:3px 0 — тот же, что у ссылки на главной: без него высота 20 px,
   а тап-таргет меньше 24 px проверку не проходит. */
.totop{display:inline-block; margin-top:var(--sp-5); padding:3px 0; font-family:var(--f-mono);
  font-size:0.788rem; color:var(--color-text-muted); border-bottom:0}
.totop .ar{color:var(--color-accent)}
.totop:hover .wd{color:var(--color-accent)}
.theme-btn{background:none; border:none; color:var(--color-text-muted);
  width:24px; height:24px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center}
.theme-btn:hover{color:var(--color-accent)}
/* половина круга рисуется стилем: глифа ◐ нет в системных шрифтах, вместо него был квадрат */
/* Круг темы: 13 px — это сам круг, рамка снаружи. Без content-box рамка
   съедала бы 3 px внутрь, а без flex:0 0 auto круг сплющивался бы в овал,
   потому что как элемент флекса он имеет право сжиматься. */
.theme-btn::before{content:''; flex:0 0 auto; box-sizing:content-box;
  width:13px; height:13px; border-radius:50%;
  border:1.5px solid currentColor;
  background:linear-gradient(90deg, currentColor 50%, transparent 50%)}

.svezhest{margin-top:var(--sp-3); font-family:var(--f-mono); font-size:0.725rem;
  letter-spacing:.06em; color:var(--color-text-muted)}

.article{max-width:820px; padding:var(--sp-7) 0 var(--sp-5)}
.eyebrow{display:block; font-family:var(--f-mono); font-size:0.725rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--color-accent)}
h1.big{font-size:var(--step-4); font-weight:800; line-height:1.03;
  letter-spacing:-.028em; margin:var(--sp-4) 0 0; max-width:20ch}
/* Лид — первый абзац статьи, а не отдельный жанр. Был на 7% крупнее и серым:
   такая разница не читается как замысел, только как сбой набора. */
.lede{font-size:1rem; line-height:1.7; color:var(--color-text-muted); max-width:62ch; margin:var(--sp-5) 0 0}

section{display:flex; flex-direction:column; gap:var(--sp-5);
  padding:var(--sp-7) 0; border-top:1px solid var(--color-line); margin-top:var(--sp-6)}
.sec-head{display:flex; flex-direction:column; gap:var(--sp-2)}
.kick{font-family:var(--f-mono); font-size:0.725rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--color-accent)}
section h2{font-size:var(--step-2); font-weight:800; letter-spacing:-.02em; line-height:1.15; max-width:26ch}
section h3{font-size:var(--step-1); font-weight:700; letter-spacing:-.01em; margin:var(--sp-3) 0 0; max-width:34ch}
.copy{display:flex; flex-direction:column; gap:var(--sp-4); max-width:64ch}
.copy p{margin:0; line-height:1.7}
.pull{border-left:3px solid var(--color-accent); padding:var(--sp-2) 0 var(--sp-2) var(--sp-5);
  font-family:var(--f-display); font-weight:700; font-size:1.25rem; line-height:1.35; max-width:34ch}

/* ── шапка проекта: объём · себестоимость · по рынку · вердикт ── */
.card{display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--color-line); border:1px solid var(--color-line)}
@media(max-width:640px){.card{grid-template-columns:repeat(2,1fr)}}
.card > div{background:var(--color-surface); padding:var(--sp-4) var(--sp-5);
  display:flex; flex-direction:column; gap:5px}
.card .k{font-family:var(--f-mono); font-size:0.663rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--color-text-muted)}
/* Шапка проекта — не заголовок, а первые строки статьи. Поэтому тем же
   шрифтом, что и текст: тяжёлый Onest на фразе вроде «67 000 ₽/мес —
   SEO-специалист» читается как крик и спорит со статьёй под ним. */
.card .v{font-family:var(--f-body); font-weight:600; font-size:1.06rem;
  line-height:1.35; letter-spacing:0; font-variant-numeric:tabular-nums}

.card .v.acc{color:var(--color-accent)}
.card .v.sm{font-size:0.925rem; line-height:1.35}

/* ── полоса чисел ── */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--color-line); border:1px solid var(--color-line)}
@media(max-width:640px){.stats{grid-template-columns:repeat(2,1fr)}}
.stats > div{background:var(--color-surface); padding:var(--sp-4) var(--sp-5);
  display:flex; flex-direction:column; gap:5px; min-width:0}
.stats .k{font-family:var(--f-mono); font-size:0.613rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--color-accent)}
.stats .n{font-family:var(--f-display); font-weight:800; font-size:1.6rem;
  line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.stats .v{font-size:0.85rem; color:var(--color-text-muted); line-height:1.4; overflow-wrap:anywhere}

/* ── таймлайн этапов: вертикальная лента, стандарт 08.09.2026 ── */
.tl{display:flex; flex-direction:column; border-left:1px solid var(--color-text-muted); margin-left:6px}
.tl > div{display:grid; grid-template-columns:96px auto 1fr; gap:var(--sp-1) var(--sp-4);
  padding:9px 0 9px var(--sp-5); position:relative; align-items:baseline}
.tl > div::before{content:""; position:absolute; left:-5px; top:15px; width:9px; height:9px; background:var(--color-yes)}
.tl .now::before{background:var(--color-accent)}
.tl .next::before{background:var(--color-surface); border:1px solid var(--color-text-muted); width:7px; height:7px}
.tl .s{font-family:var(--f-mono); font-size:0.663rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--color-text-muted); padding-top:3px}
.tl .now .s{color:var(--color-accent)}
.tl .nm{font-family:var(--f-display); font-weight:700; font-size:0.925rem; line-height:1.45}
.tl .nm::after{content:":"}
.tl .d{font-size:0.925rem; line-height:1.45; color:var(--color-text)}
.tl .next .nm, .tl .next .d{color:var(--color-text-muted)}
@media(max-width:600px){
  .tl > div{grid-template-columns:96px 1fr; gap:2px var(--sp-3)}
  .tl .d{grid-column:2}
}

/* ── шаги: номер · имя правила · утверждение · обоснование ── */
.steps{display:flex; flex-direction:column; gap:1px;
  background:var(--color-line); border:1px solid var(--color-line)}
.step{background:var(--color-surface); padding:var(--sp-5) var(--sp-5);
  display:flex; gap:var(--sp-5); align-items:baseline}
.step .n{font-family:var(--f-display); font-weight:800; font-size:1.3rem;
  color:var(--color-accent); flex:0 0 auto; min-width:2ch; font-variant-numeric:tabular-nums}
.step .txt{display:flex; flex-direction:column; gap:6px}
.step .who{font-family:var(--f-mono); font-size:0.663rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--color-accent)}
.step .task{font-size:1rem; line-height:1.5}
.step .why{font-size:0.85rem; color:var(--color-text-muted); line-height:1.5}

/* ── вступительный список «как сделать это у себя» ── */
.spisok{list-style:none; counter-reset:s; max-width:var(--measure); margin:var(--sp-5) 0 0;
  padding:0; display:flex; flex-direction:column; gap:var(--sp-3)}
.spisok li{line-height:1.55; font-size:1rem; counter-increment:s; text-indent:-1.6em; padding-left:1.6em}
.spisok li::before{content:counter(s) ". "; font-family:var(--f-mono); font-weight:600;
  color:var(--color-accent); font-variant-numeric:tabular-nums}
.spisok.prostoy{counter-reset:none}
.spisok.prostoy li::before{content:"— "}
.perehod{color:var(--color-text-muted); font-size:0.925rem; line-height:1.6;
  margin:var(--sp-5) 0 0; max-width:var(--measure)}
.podzag{font-family:var(--f-mono); font-size:0.725rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--color-accent); margin:var(--sp-6) 0 0}

/* ── сетка карточек ── */
.parts{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1px;
  background:var(--color-line); border:1px solid var(--color-line)}
.part{background:var(--color-surface); padding:var(--sp-5); display:flex; flex-direction:column; gap:8px}
.part .u{font-family:var(--f-mono); font-size:0.725rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--color-accent)}
.part .t{font-family:var(--f-display); font-weight:700; font-size:1rem}
.part .w{font-size:0.85rem; color:var(--color-text-muted); line-height:1.5}

/* ── таблицы ── */
.tablewrap{overflow-x:auto; min-width:0; max-width:100%; border:1px solid var(--color-line)}

/* На телефоне таблица «термин → пояснение» не помещается и уезжает вбок.
   Двухколоночные разворачиваем в стопку: термин сверху моноширинным,
   пояснение под ним. Трёхколоночные так разложить нельзя — там смысл несёт
   шапка, без неё ячейка «да» ничего не значит; они остаются с прокруткой. */
@media (max-width:600px){
  table[data-kolonok="2"]{min-width:0}
  table[data-kolonok="2"] thead{display:none}
  table[data-kolonok="2"] tr{display:block; padding:var(--sp-4) var(--sp-5);
    border-bottom:1px solid var(--color-line)}
  table[data-kolonok="2"] tr:last-child{border-bottom:none}
  table[data-kolonok="2"] td{display:block; border:none; padding:0}
  table[data-kolonok="2"] td:first-child{font-family:var(--f-mono); font-size:0.663rem;
    letter-spacing:.13em; text-transform:uppercase; color:var(--color-text-muted);
    margin-bottom:6px; line-height:1.5}
}
table{border-collapse:collapse; width:100%; min-width:540px; background:var(--color-surface)}
th,td{text-align:left; padding:11px 14px; border-bottom:1px solid var(--color-line);
  font-size:0.925rem; vertical-align:top; line-height:1.5}
th{font-family:var(--f-mono); font-size:0.663rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--color-text-muted); font-weight:500}
tbody tr:last-child td{border-bottom:none}
td.m{font-family:var(--f-mono); font-size:0.85rem}
.yes{color:var(--color-yes); font-weight:600}
.no{color:var(--color-text-muted)}
code{font-family:var(--f-mono); font-size:.86em; background:var(--color-sunk); padding:1px 5px}

/* ── схемы на тёмной плашке ── */
figure{margin:0; display:flex; flex-direction:column; gap:10px}
.shot{background:var(--color-surface); border:1px solid var(--color-line);
  padding:var(--sp-5); overflow-x:auto}
.shot svg{display:block; width:100%; max-width:100%; min-width:700px; height:auto}

/* Что блок листается вбок, должно быть видно. Полосу прокрутки на телефоне
   браузер прячет до касания, стилями её там не достать, а псевдоэлемент
   внутри прокрутки уезжает вместе с содержимым. Рамка не уезжает: правый
   край красится акцентом и держится на месте — схема выглядит не обрезанной,
   а продолжающейся. Только на тех ширинах, где блок действительно не влез. */
@media (max-width:740px){
  .shot, .tablewrap{border-right:2px solid var(--color-accent)}
}
/* Где полосу прокрутки показать можно — показываем всегда, а не по касанию.
   На iOS она системная и стилям не поддаётся, там работает метка рамкой. */
.shot, .tablewrap{scrollbar-width:thin; scrollbar-color:var(--color-accent) transparent}
.shot::-webkit-scrollbar, .tablewrap::-webkit-scrollbar{-webkit-appearance:none; height:4px}
.shot::-webkit-scrollbar-thumb, .tablewrap::-webkit-scrollbar-thumb{background:var(--color-accent)}
figcaption{font-size:0.85rem; color:var(--color-text-muted); line-height:1.5; max-width:70ch}
.fig text{font-family:var(--f-body); fill:var(--color-text)}
.fig .ttl{font-family:var(--f-display); font-weight:700; font-size:13.6px; fill:var(--color-text)}
.fig .role{font-family:var(--f-mono); font-size:10.6px; fill:var(--color-text-muted)}
.fig .spec{font-size:11.6px; fill:var(--color-text-muted)}
.fig .mono{font-family:var(--f-mono); font-size:11.6px; fill:var(--color-text)}
.fig .num{font-family:var(--f-mono); font-size:9.8px; letter-spacing:.1em; fill:var(--color-text-muted)}
.fig .box{fill:none; stroke:var(--color-text-muted); stroke-width:1.2}
.fig .box-acc{fill:none; stroke:var(--color-accent); stroke-width:1.8}
.fig .box-sloy{fill:var(--color-sunk); stroke:var(--color-text-muted); stroke-width:1.2}
.fig .box-dash{fill:none; stroke:var(--color-text-muted); stroke-width:1.2; stroke-dasharray:5 4}
.fig .ln{stroke:var(--color-text-muted); stroke-width:1.4; fill:none}
.fig .ln-acc{stroke:var(--color-accent); stroke-width:1.8; fill:none}
.fig .ln-dash{stroke:var(--color-text-muted); stroke-width:1.2; fill:none; stroke-dasharray:4 4}
.fig .hair{stroke:var(--color-line); stroke-width:1}
.fig .t-acc{fill:var(--color-accent)}
.fig .t-yes{fill:var(--color-yes)}
.fig .t-dim{fill:var(--color-text-muted)}
.fig .m-ln{fill:var(--color-text-muted)}
.fig .m-acc{fill:var(--color-accent)}
.fig .m-dim{fill:var(--color-text-muted)}
.fig .legend{font-family:var(--f-mono); font-size:10.6px; fill:var(--color-text-muted)}

/* ── вердикт и «повторить» ── */
.verdict{border-left:3px solid var(--color-accent); background:var(--color-accent-bg);
  padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-3); max-width:64ch}
.verdict b{font-family:var(--f-display); font-weight:800; font-size:var(--step-2); color:var(--color-accent)}
.verdict p{margin:0; font-size:0.925rem; line-height:1.6}
.verify{display:flex; flex-direction:column; gap:var(--sp-4)}
.verify .label{font-family:var(--f-mono); font-size:0.663rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--color-text-muted)}
.verify-rows{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1px;
  background:var(--color-line); border:1px solid var(--color-line)}
.verify-rows > *{background:var(--color-surface); padding:var(--sp-4) var(--sp-5);
  display:flex; flex-direction:column; gap:4px}
.verify-rows span.l{font-size:0.85rem; color:var(--color-text-muted)}
.verify-rows b{font-family:var(--f-mono); font-size:0.85rem; color:var(--color-accent); font-weight:500}
.verify-note{font-size:0.85rem; color:var(--color-text-muted); max-width:64ch; margin:0; line-height:1.6}

/* ── FAQ ── */
/* FAQ — как на сайте: без рамки, тонкая линейка снизу, плюс слева */
.faq{border-top:1px solid var(--color-line); max-width:820px}
.faq details{border-bottom:1px solid var(--color-line); padding:var(--sp-4) 0}
.faq summary{cursor:pointer; font-family:var(--f-display); font-weight:700; font-size:1rem;
  list-style:none; display:flex; gap:var(--sp-3)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+"; color:var(--color-accent); font-family:var(--f-mono)}
.faq details[open] summary::before{content:"−"}
.faq details p{margin-top:var(--sp-3); max-width:var(--measure); color:var(--color-text-muted); font-size:0.925rem}

.foot{border-top:1px solid var(--color-line); padding:var(--sp-6) 0 var(--sp-8);
  font-family:var(--f-mono); font-size:0.725rem; color:var(--color-text-muted);
  display:flex; flex-wrap:wrap; gap:var(--sp-5); justify-content:space-between}
/* палец толще строки: ссылкам шапки и подвала — 24 px по высоте, как требует
   WCAG 2.2. Подчёркивание при этом не отъезжает от текста, поэтому не рамкой */
.nav a, .foot a{display:inline-block; padding-block:5px}
.foot a.link, .nav a.link{border-bottom:0; text-decoration:underline;
  text-decoration-color:var(--color-accent); text-underline-offset:3px}
/* политика — отдельный нижний ряд подвала */
.foot-doc{flex-basis:100%}
.foot-doc a:hover{color:var(--color-accent)}
/* на телефоне меню подвала ложится в несколько строк, и политика читалась
   его пунктом — её отделяет тонкая линейка */
@media (max-width:760px){.foot-doc{padding-top:var(--sp-3); border-top:1px solid var(--color-line)}}

/* Уведомление о cookie (COOKIE_JS в build.py). Тот же блок стоит в site.css:
   страницы разделов этот файл не грузят. Правишь здесь — правь и там. */
.cookie{position:fixed; left:var(--sp-5); bottom:var(--sp-5); z-index:10; max-width:460px;
  display:flex; align-items:center; gap:var(--sp-5); padding:var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5);
  background:var(--color-surface); border:1px solid var(--color-line);
  opacity:0; transform:translateY(8px); transition:opacity .3s, transform .3s; pointer-events:none}
.cookie.on{opacity:1; transform:none; pointer-events:auto}
.cookie p{margin:0; font-family:var(--f-body); font-size:0.85rem; line-height:1.5; color:var(--color-text-muted)}
.cookie p a{color:var(--color-text)}
.cookie button{flex:0 0 auto; padding:10px var(--sp-4); background:none; cursor:pointer;
  border:1px solid var(--color-text); color:var(--color-text);
  font-family:var(--f-mono); font-size:0.725rem; letter-spacing:.16em; text-transform:uppercase}
.cookie button:hover{border-color:var(--color-accent); color:var(--color-accent)}
@media (max-width:560px){
  .cookie{left:var(--sp-3); right:var(--sp-3); bottom:calc(var(--sp-3) + env(safe-area-inset-bottom)); max-width:none}
}
@media (prefers-reduced-motion:reduce){.cookie{transition:none; transform:none}}
:focus-visible{outline:2px solid var(--color-accent); outline-offset:2px}

/* ── графики: тот же словарь токенов ── */
.chart{border:1px solid var(--color-line); background:var(--color-surface); padding:var(--sp-5);
  display:flex; flex-direction:column; gap:var(--sp-4)}
.chart .ct{font-family:var(--f-display); font-weight:700; font-size:1rem; line-height:1.25}
.chart .cn{font-size:0.85rem; color:var(--color-text-muted); line-height:1.5; max-width:70ch}
.bars{display:flex; flex-direction:column; gap:6px}
.bar{display:grid; grid-template-columns:196px 1fr 46px; gap:var(--sp-3);
  align-items:center; font-family:var(--f-mono); font-size:0.725rem; color:var(--color-text-muted)}
.bar > span:first-child{white-space:normal; line-height:1.3; overflow-wrap:anywhere}
.bar .t{height:10px; background:var(--color-sunk); position:relative}
.bar .t i{position:absolute; inset:0 auto 0 0; background:var(--color-accent)}
.bar.dim .t i{background:var(--bar-dim)}
.bar .val{text-align:right; color:var(--color-text); font-variant-numeric:tabular-nums}
.colz{display:flex; gap:var(--sp-4); align-items:stretch}
.colz .c{flex:1; display:flex; flex-direction:column; gap:6px; min-width:0}
.colz .v{font-family:var(--f-mono); font-size:0.725rem; text-align:center;
  color:var(--color-text); font-variant-numeric:tabular-nums}
.colz .tr{height:150px; display:flex; align-items:flex-end; border-bottom:1px solid var(--color-line)}
.colz .tr i{display:block; width:100%; background:var(--color-accent)}
.colz .cp{font-family:var(--f-mono); font-size:0.725rem; color:var(--color-text-muted); text-align:center}
.funnel{display:flex; flex-direction:column; gap:3px; max-width:720px}
.fr{display:grid; grid-template-columns:minmax(150px,auto) 1fr 110px; gap:var(--sp-3);
  align-items:center; font-family:var(--f-mono); font-size:0.725rem; color:var(--color-text-muted)}
.fr > span:first-child{white-space:normal; line-height:1.3; overflow-wrap:anywhere}
.fr > span:nth-child(2){display:flex; justify-content:center}
.fr .fb{height:26px; background:var(--color-accent)}
/* ступени воронки — один тон от светлого к тёмному, как доли целого */
.fr:nth-child(1) .fb{background:#E58BB6} .fr:nth-child(2) .fb{background:#D66A9F}
.fr:nth-child(3) .fb{background:#C4477F} .fr:nth-child(4) .fb{background:#A82167}
.fr:nth-child(5) .fb{background:#7E0A47} .fr:nth-child(n+6) .fb{background:#5C0433}
.fr .val{text-align:right; color:var(--color-text); font-variant-numeric:tabular-nums}
.fr .val s{text-decoration:none; color:var(--color-text-muted); margin-left:6px}
/* воронка стоит на фоне страницы, без плашки: контейнер .chart.bare */
.chart.bare{border:0; background:transparent; padding:0}
.chart.bare .ct{font-family:var(--f-mono); font-weight:400; font-size:0.663rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--color-text-muted)}
@media (max-width:760px){
  .bar{grid-template-columns:118px 1fr 38px; font-size:0.663rem}
  .fr{grid-template-columns:104px 1fr 78px; font-size:0.663rem}
  .colz{gap:var(--sp-2)} .colz .tr{height:110px} .colz .cp{font-size:0.613rem}
}

/* ── призыв написать: сборщик ставит его перед «читайте также» ── */
.svyaz{border-top:1px solid var(--color-text); padding-top:var(--sp-5); max-width:1000px;
  display:grid; grid-template-columns:1fr auto; gap:var(--sp-4) var(--sp-7); align-items:center}
.svyaz h3{margin:0 0 var(--sp-2); font-family:var(--f-display); font-size:var(--step-2); font-weight:800; line-height:1.15}
.svyaz p{margin:0; max-width:52ch; color:var(--color-text-muted)}
.svyaz-btn{display:inline-flex; align-items:center; gap:10px; padding:14px 22px; background:var(--color-accent); color:var(--color-bg);
  font-family:var(--f-mono); font-size:0.788rem; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap}
.svyaz-btn .strelka{transition:transform .14s ease}
.svyaz-btn:hover .strelka{transform:translateX(4px)}
@media (max-width:640px){.svyaz{grid-template-columns:1fr} .svyaz-btn{justify-content:center}}

/* ── блок «читайте также», его дописывает сборщик ── */
.label{
  font-family:var(--f-mono); font-size:0.663rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--color-text-muted);
}
.dalshe{border-top:1px solid var(--color-text); padding-top:var(--sp-4); max-width:1000px}
.dalshe-head{display:block; margin-bottom:var(--sp-4); font-family:var(--f-mono);
  font-size:0.663rem; letter-spacing:.16em; text-transform:uppercase; color:var(--color-text-muted)}
.related h3 .strelka{margin-left:6px; color:var(--color-accent); font-family:var(--f-mono);
  opacity:0; transition:opacity .14s ease, transform .14s ease; display:inline-block; transform:translateX(-4px)}
.related a:hover h3 .strelka{opacity:1; transform:translateX(0)}
.related a:hover h3{color:var(--color-accent)}
.related{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1px; background:var(--color-line); border:1px solid var(--color-line)}
.related a{background:var(--color-surface); padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-2)}
.related a:hover{background:var(--color-bg)}
.related h3{font-size:1rem}
.related span.sub{font-size:0.85rem; color:var(--color-text-muted)}
.related{max-width:1000px}

/* ── утилиты: CSP запрещает style="", проценты живут классами ── */
.w0{width:0%}
.w1{width:1%}
.w2{width:2%}
.w3{width:3%}
.w4{width:4%}
.w5{width:5%}
.w6{width:6%}
.w7{width:7%}
.w8{width:8%}
.w9{width:9%}
.w10{width:10%}
.w11{width:11%}
.w12{width:12%}
.w13{width:13%}
.w14{width:14%}
.w15{width:15%}
.w16{width:16%}
.w17{width:17%}
.w18{width:18%}
.w19{width:19%}
.w20{width:20%}
.w21{width:21%}
.w22{width:22%}
.w23{width:23%}
.w24{width:24%}
.w25{width:25%}
.w26{width:26%}
.w27{width:27%}
.w28{width:28%}
.w29{width:29%}
.w30{width:30%}
.w31{width:31%}
.w32{width:32%}
.w33{width:33%}
.w34{width:34%}
.w35{width:35%}
.w36{width:36%}
.w37{width:37%}
.w38{width:38%}
.w39{width:39%}
.w40{width:40%}
.w41{width:41%}
.w42{width:42%}
.w43{width:43%}
.w44{width:44%}
.w45{width:45%}
.w46{width:46%}
.w47{width:47%}
.w48{width:48%}
.w49{width:49%}
.w50{width:50%}
.w51{width:51%}
.w52{width:52%}
.w53{width:53%}
.w54{width:54%}
.w55{width:55%}
.w56{width:56%}
.w57{width:57%}
.w58{width:58%}
.w59{width:59%}
.w60{width:60%}
.w61{width:61%}
.w62{width:62%}
.w63{width:63%}
.w64{width:64%}
.w65{width:65%}
.w66{width:66%}
.w67{width:67%}
.w68{width:68%}
.w69{width:69%}
.w70{width:70%}
.w71{width:71%}
.w72{width:72%}
.w73{width:73%}
.w74{width:74%}
.w75{width:75%}
.w76{width:76%}
.w77{width:77%}
.w78{width:78%}
.w79{width:79%}
.w80{width:80%}
.w81{width:81%}
.w82{width:82%}
.w83{width:83%}
.w84{width:84%}
.w85{width:85%}
.w86{width:86%}
.w87{width:87%}
.w88{width:88%}
.w89{width:89%}
.w90{width:90%}
.w91{width:91%}
.w92{width:92%}
.w93{width:93%}
.w94{width:94%}
.w95{width:95%}
.w96{width:96%}
.w97{width:97%}
.w98{width:98%}
.w99{width:99%}
.w100{width:100%}
.h0{height:0%}
.h1{height:1%}
.h2{height:2%}
.h3{height:3%}
.h4{height:4%}
.h5{height:5%}
.h6{height:6%}
.h7{height:7%}
.h8{height:8%}
.h9{height:9%}
.h10{height:10%}
.h11{height:11%}
.h12{height:12%}
.h13{height:13%}
.h14{height:14%}
.h15{height:15%}
.h16{height:16%}
.h17{height:17%}
.h18{height:18%}
.h19{height:19%}
.h20{height:20%}
.h21{height:21%}
.h22{height:22%}
.h23{height:23%}
.h24{height:24%}
.h25{height:25%}
.h26{height:26%}
.h27{height:27%}
.h28{height:28%}
.h29{height:29%}
.h30{height:30%}
.h31{height:31%}
.h32{height:32%}
.h33{height:33%}
.h34{height:34%}
.h35{height:35%}
.h36{height:36%}
.h37{height:37%}
.h38{height:38%}
.h39{height:39%}
.h40{height:40%}
.h41{height:41%}
.h42{height:42%}
.h43{height:43%}
.h44{height:44%}
.h45{height:45%}
.h46{height:46%}
.h47{height:47%}
.h48{height:48%}
.h49{height:49%}
.h50{height:50%}
.h51{height:51%}
.h52{height:52%}
.h53{height:53%}
.h54{height:54%}
.h55{height:55%}
.h56{height:56%}
.h57{height:57%}
.h58{height:58%}
.h59{height:59%}
.h60{height:60%}
.h61{height:61%}
.h62{height:62%}
.h63{height:63%}
.h64{height:64%}
.h65{height:65%}
.h66{height:66%}
.h67{height:67%}
.h68{height:68%}
.h69{height:69%}
.h70{height:70%}
.h71{height:71%}
.h72{height:72%}
.h73{height:73%}
.h74{height:74%}
.h75{height:75%}
.h76{height:76%}
.h77{height:77%}
.h78{height:78%}
.h79{height:79%}
.h80{height:80%}
.h81{height:81%}
.h82{height:82%}
.h83{height:83%}
.h84{height:84%}
.h85{height:85%}
.h86{height:86%}
.h87{height:87%}
.h88{height:88%}
.h89{height:89%}
.h90{height:90%}
.h91{height:91%}
.h92{height:92%}
.h93{height:93%}
.h94{height:94%}
.h95{height:95%}
.h96{height:96%}
.h97{height:97%}
.h98{height:98%}
.h99{height:99%}
.h100{height:100%}
.fb{display:block}
.mt6{margin-top:var(--sp-6)}
.mt7{margin-top:var(--sp-7)}

/* ── методологическая основа ── */
/* Третий столбец таблицы «Метод → что взято»: каноническое имя метода и
   источник с годом. Имя обычным шрифтом, источник — моноширинным серым, как
   подписи под числами: это адрес, а не текст. */
td.kanon{font-size:0.85rem; line-height:1.45}
td.kanon .ist{display:block; font-family:var(--f-mono); font-size:0.7rem; letter-spacing:.02em;
  color:var(--color-text-muted); margin-top:4px}
td.kanon .net{color:var(--color-text-muted)}

/* Формула под главным числом. Родной MathML, без библиотек. Розовая левая
   линия рифмуется с вердиктом, но фон светлый — блоки не спорят. */
.formula{background:var(--color-surface); border:1px solid var(--color-line);
  border-left:3px solid var(--color-accent); padding:var(--sp-5); display:flex;
  flex-direction:column; gap:var(--sp-3); max-width:64ch}
.formula .label{font-family:var(--f-mono); font-size:0.663rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--color-text-muted)}
.formula .eq{display:flex; align-items:center; gap:var(--sp-4); margin:var(--sp-1) 0}
.formula math{font-size:1.3rem; flex:1; justify-content:center; overflow-x:auto}
.formula .no{font-family:var(--f-mono); font-size:0.725rem; color:var(--color-text-muted)}
.formula .slova{margin:0; font-size:0.925rem; line-height:1.6}
.formula dl{display:grid; grid-template-columns:auto 1fr; gap:4px 14px; margin:0; font-size:0.85rem; line-height:1.5}
.formula dt{font-family:var(--f-mono); color:var(--color-accent); white-space:nowrap}
.formula dd{margin:0; color:var(--color-text-muted)}
.formula .pop{font-family:var(--f-mono); font-size:0.7rem; line-height:1.6; color:var(--color-text-muted);
  border-top:1px solid var(--color-line); padding-top:var(--sp-3)}

/* Достоверность результата: выборка, разброс, проверки, что не обобщается,
   что не измерено. Стоит до вердикта — вердикт читается как вывод. */
.dost{border:1px solid var(--color-line); background:var(--color-surface); padding:var(--sp-5);
  display:flex; flex-direction:column; gap:var(--sp-3); max-width:64ch}
.dost .label{font-family:var(--f-mono); font-size:0.663rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--color-text-muted)}
.dost dl{display:grid; grid-template-columns:130px 1fr; gap:10px 16px; margin:0}
@media (max-width:600px){.dost dl{grid-template-columns:1fr; gap:4px}}
.dost dt{font-family:var(--f-mono); font-size:0.663rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--color-text-muted); padding-top:4px}
.dost dd{margin:0; font-size:0.925rem; line-height:1.55}

/* Источники после FAQ: серым, чтобы не перетягивать внимание с вопросов. */
.istochniki{display:flex; flex-direction:column; gap:var(--sp-3); max-width:64ch}
.istochniki .label{font-family:var(--f-mono); font-size:0.663rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--color-text-muted)}
.istochniki ol{margin:0; padding-left:22px; font-size:0.85rem; line-height:1.55; color:var(--color-text-muted)}
.istochniki li{margin:0 0 6px}
.istochniki li strong{font-weight:600; color:var(--color-text)}
.istochniki a{color:var(--color-text-muted); text-decoration-color:var(--color-line)}


/* ── грабли: склон «до → после» и строки «отказ → правило», стандарт 08.09.2026 ── */
/* auto-fit, как в .parts и .related: auto-fill оставлял пустые колонки, и в
   них просвечивал фон контейнера — серые клетки справа от последнего склона. */
.slopes{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1px;
  background:var(--color-line); border:1px solid var(--color-line)}
.slopes > div{background:var(--color-surface); padding:var(--sp-4)}
/* потолок ширины: колонки теперь схлопываются, и одинокий склон растягивал
   график на всю полосу — 240×132 при ширине 1058px давали высоту под 600px */
.slopes svg{width:100%; max-width:340px; height:auto; display:block; overflow:visible}
.slopes text{font-family:var(--f-mono); font-size:10px; fill:var(--color-text-muted)}
.slopes text.v{fill:var(--color-text); font-size:12px}
.slopes text.v.hot{fill:var(--color-accent); font-family:var(--f-display); font-weight:800; font-size:16px}
.slopes .ln{stroke:var(--color-accent); stroke-width:2}
.slopes .do{fill:var(--color-text-muted)} .slopes .po{fill:var(--color-accent)}
.slopes .t{font-size:0.85rem; margin:6px 0 0; line-height:1.4; max-width:340px}
.slopes .t small{display:block; color:var(--color-text-muted); font-size:0.788rem}
.grab{display:flex; flex-direction:column; border-top:1px solid var(--color-line); margin-top:var(--sp-4)}
.grab > div{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:var(--sp-5);
  padding:9px 0; border-bottom:1px solid var(--color-line); font-size:0.88rem; line-height:1.45}
.grab > div > span:first-child{color:var(--color-text-muted)}
/* На телефоне колонки схлопываются в стопку, и «отказ» от «правила» отличал
   только цвет. Подписи стоят здесь, а не в тексте статей: на широком экране
   колонки видно и без них. */
@media(max-width:600px){
  .grab > div{grid-template-columns:1fr; gap:var(--sp-3)}
  .grab > div > span::before{display:block; margin-bottom:4px; font-family:var(--f-mono);
    font-size:0.663rem; letter-spacing:.13em; text-transform:uppercase; color:var(--color-text-muted)}
  .grab > div > span:first-child::before{content:"Отказ"}
  .grab > div > span:last-child::before{content:"Правило"}
}

/* ── исследования: капсула ответа, гипотезы, квадрант, матрица, лесенка, гантель, вафля ──
   Страница исследования собирается build.py из JSON-черновика (articles/research.py);
   здесь только оформление. Синий второго ряда — тот же, что у ряда «Яндекс» на панели. */
.article.research .answer{font-family:var(--f-display); font-weight:700; font-size:1.2rem; line-height:1.4; max-width:62ch; margin:var(--sp-5) 0 0}
.article.research .answer b{color:var(--color-accent)}
.ansbox{display:grid; grid-template-columns:104px 1fr; gap:var(--sp-3) var(--sp-5); border-top:1px solid var(--color-line); border-bottom:1px solid var(--color-line); padding:var(--sp-4) 0; margin:var(--sp-5) 0 0}
.ansbox dt{font-family:var(--f-mono); font-size:0.663rem; letter-spacing:.14em; text-transform:uppercase; color:var(--color-text-muted); padding-top:5px}
.ansbox dd{margin:0; font-size:0.925rem; line-height:1.6; max-width:64ch}
.ansbox dd.mono{font-family:var(--f-mono); font-size:0.788rem; color:var(--color-text-muted); line-height:1.7}
@media (max-width:600px){.ansbox{grid-template-columns:1fr; gap:4px} .ansbox dt{padding-top:10px}}
.hyp{display:flex; flex-direction:column; border-top:1px solid var(--color-line)}
.hyp > div{display:grid; grid-template-columns:26px minmax(0,1.3fr) minmax(0,1fr) 128px; gap:var(--sp-4); padding:var(--sp-3) 0; border-bottom:1px solid var(--color-line); font-size:0.925rem; line-height:1.5; align-items:start}
.hyp > div:last-child{border-bottom:0}
.hyp .hd{font-family:var(--f-mono); font-size:0.663rem; letter-spacing:.13em; text-transform:uppercase; color:var(--color-text-muted)}
.hyp .n{font-family:var(--f-mono); font-size:0.725rem; color:var(--color-text-muted); padding-top:3px}
.hyp .th{color:var(--color-text-muted)}
.hyp .res{font-family:var(--f-mono); font-size:0.663rem; letter-spacing:.06em; text-transform:uppercase; padding-top:4px}
.hyp .res.yes{color:var(--color-yes)} .hyp .res.no{color:var(--color-accent)} .hyp .res.mid{color:var(--color-text-muted)}
@media (max-width:700px){.hyp > div{grid-template-columns:26px 1fr} .hyp .th,.hyp .res{grid-column:2} .hyp .hd:nth-child(n+3){display:none}}
.quad svg,.lsn,.dmb{width:100%; height:auto; display:block}
/* На телефоне колонка сжимала эти три графика вместе с подписями: у квадранта
   до 5px, у лесенки и гантели до 6px. Ведём себя как .shot выше — держим
   читаемую ширину и листаем вбок, правый край метим акцентом. Графики,
   собранные из блоков, а не из svg, сжимаются нормально и остаются как были. */
@media (max-width:740px){
  .chart.quad,.chart:has(>.lsn),.chart:has(>.dmb){overflow-x:auto;
    border-right:2px solid var(--color-accent)}
  .quad svg,.lsn,.dmb{min-width:640px}
}
.quad text,.lsn text,.dmb text{font-family:var(--f-mono); font-size:11px; fill:var(--color-text-muted)}
.quad text.nm,.lsn text.nm,.dmb text.nm{fill:var(--color-text); font-size:12px}
.quad .ax{stroke:var(--color-text-muted)} .quad .grid,.lsn .grid,.dmb .grid{stroke:var(--color-line); stroke-dasharray:3 3}
.quad .core{fill:var(--color-accent)} .quad .second{fill:#5189C6} .quad .occ{fill:var(--color-text-muted)}
.quad .hollow{fill:var(--color-surface); stroke-width:1.5} .quad .hollow.occ{stroke:var(--color-text-muted)} .quad .hollow.second{stroke:#5189C6}
.quad .zone{fill:var(--color-accent); opacity:.06}
.quad .ann{fill:none; stroke:var(--color-text-muted); stroke-width:1; stroke-dasharray:2 3}
.lsn .on{fill:var(--color-text-muted)} .lsn .off{fill:var(--color-sunk)} .lsn .acc{fill:var(--color-accent)}
.lsn text.acct,.dmb text.mult{fill:var(--color-accent); font-family:var(--f-display); font-weight:700; font-size:12px}
.dmb text.mult{font-size:18px}
.dmb .ln{stroke:var(--color-accent); stroke-width:3} .dmb .do{fill:var(--color-text-muted)} .dmb .po{fill:var(--color-accent)}
.waffle{display:grid; grid-template-columns:repeat(20,1fr); gap:2px; max-width:560px}
.waffle i{display:block; aspect-ratio:1; background:var(--color-sunk)}
.waffle i.a{background:var(--color-accent)} .waffle i.b{background:#5189C6}
.legend2{display:flex; gap:var(--sp-4); flex-wrap:wrap; font-family:var(--f-mono); font-size:0.725rem; color:var(--color-text-muted)}
.legend2 span{display:flex; gap:7px; align-items:center} .legend2 i{width:10px; height:10px; display:block}
.legend2 .c1 i{background:var(--color-accent)} .legend2 .c2 i{background:#5189C6} .legend2 .c3 i{background:var(--color-text-muted)} .legend2 .c0 i{border:1.5px solid var(--color-text-muted); box-sizing:border-box}
.legend2 .k1 i{background:#FBE3EF} .legend2 .k2 i{background:#F3AFCF} .legend2 .k3 i{background:#E2408F} .legend2 .k4 i{background:#D6006E} .legend2 .k5 i{background:#A3004F}
table.hm{min-width:640px; border-collapse:separate; border-spacing:1px; background:var(--color-line)}
.hm th, .hm td{padding:8px 10px; font-family:var(--f-mono); font-size:0.725rem; text-align:center; border:0; background:var(--color-surface)}
.hm thead th{font-size:0.613rem; letter-spacing:.1em; text-transform:uppercase; color:var(--color-text-muted); font-weight:500; line-height:1.3}
.hm tbody th{text-align:left; font-family:var(--f-body); font-size:0.9rem; font-weight:400; text-transform:none; letter-spacing:0; color:var(--color-text)}
.hm tr.core th{font-weight:600}
.hm td.q1{background:#FBE3EF; color:#17161A} .hm td.q2{background:#F3AFCF; color:#17161A} .hm td.q3{background:#E2408F; color:#17161A} .hm td.q4{background:#D6006E; color:#fff} .hm td.q5{background:#A3004F; color:#fff}
.hm td.nd{color:var(--color-text-muted); background:var(--color-surface) repeating-linear-gradient(135deg, var(--color-surface) 0 4px, var(--color-sunk) 4px 6px)}
.hm td.sum{color:var(--color-text-muted)}
.sr{position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}
.cite{border:1px solid var(--color-line); background:var(--color-surface); padding:var(--sp-4) var(--sp-5); font-family:var(--f-mono); font-size:0.788rem; line-height:1.6; color:var(--color-text-muted)}
.cite b{color:var(--color-text); font-weight:500}
.versii{display:flex; flex-direction:column; border-top:1px solid var(--color-line)}
.versii > div{display:grid; grid-template-columns:96px 1fr; gap:var(--sp-5); padding:var(--sp-3) 0; border-bottom:1px solid var(--color-line); font-size:0.925rem}
.versii > div:last-child{border-bottom:0}
.versii .d{font-family:var(--f-mono); font-size:0.788rem; color:var(--color-text-muted)}
.mt3{margin-top:var(--sp-3)}

/* ── Скругление внешних углов блоков (20.09.2026, решение Романа) ──
   Радиус ставится только контейнеру, внутренности остаются прямыми:
   overflow:hidden подрезает ячейки и строки по этому же радиусу.
   Таблицы и .shot уже имеют overflow-x:auto — они подрезаются сами. */
:root{--ugol:10px}
.card,.stats,.steps,.parts,.related,.verify-rows,.slopes{border-radius:var(--ugol); overflow:hidden}
.tablewrap,.shot,.chart,.formula,.dost,.cite{border-radius:var(--ugol)}