/* ============================================================
   Справочная — дизайн-система
   Концепция: диагностическая схема (blueprint).
   Signature: «цепь соединения» из 5 звеньев.
   ============================================================ */

/* --- Шрифты: 3 роли, 3 гарнитуры ------------------------------ */
/* display/heading — Fira Sans Condensed (узкий инженерный гротеск) */
/* body — IBM Plex Sans (нейтральный) */
/* data — IBM Plex Mono (только данные, коды, идентификаторы) */
@font-face{font-family:'Fira Cond';font-weight:600;font-display:swap;src:url(/fonts/fira-cond-600-cyr.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Fira Cond';font-weight:600;font-display:swap;src:url(/fonts/fira-cond-600-lat.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:'Fira Cond';font-weight:700;font-display:swap;src:url(/fonts/fira-cond-700-cyr.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Fira Cond';font-weight:700;font-display:swap;src:url(/fonts/fira-cond-700-lat.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:'Plex Sans';font-weight:400;font-display:swap;src:url(/fonts/plex-sans-400-cyr.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Plex Sans';font-weight:400;font-display:swap;src:url(/fonts/plex-sans-400-lat.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:'Plex Sans';font-weight:500;font-display:swap;src:url(/fonts/plex-sans-500-cyr.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Plex Sans';font-weight:500;font-display:swap;src:url(/fonts/plex-sans-500-lat.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:'Plex Sans';font-weight:600;font-display:swap;src:url(/fonts/plex-sans-600-cyr.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Plex Sans';font-weight:600;font-display:swap;src:url(/fonts/plex-sans-600-lat.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:'Plex Mono';font-weight:400;font-display:swap;src:url(/fonts/plex-mono-400-cyr.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Plex Mono';font-weight:400;font-display:swap;src:url(/fonts/plex-mono-400-lat.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:'Plex Mono';font-weight:500;font-display:swap;src:url(/fonts/plex-mono-500-cyr.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Plex Mono';font-weight:500;font-display:swap;src:url(/fonts/plex-mono-500-lat.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}

/* --- Токены --------------------------------------------------- */
:root{
  /* 6 цветовых токенов */
  --paper:#F1EEE7;      /* фон-основа: тёплая бумага чертежа */
  --surface:#FFFFFF;    /* плоскости контента */
  --ink:#16181D;        /* текст и линии схемы */
  --muted:#6B675E;      /* второстепенный текст */
  --rule:#D7D1C4;       /* линейки, границы */
  --accent:#1B4B8F;     /* чертёжный синий: связи, активное звено */

  /* семантика состояний (не декор — только состояние) */
  --ok:#1C6E44; --warn:#8F6206; --down:#A63620;
  --ok-bg:#E6F0EA; --warn-bg:#F6EEDC; --down-bg:#F6E7E3;

  /* типографика */
  --f-display:'Fira Cond','Fira Sans Condensed',Arial Narrow,system-ui,sans-serif;
  --f-body:'Plex Sans',system-ui,-apple-system,Segoe UI,sans-serif;
  --f-data:'Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* шкала размеров (1.25) */
  --t-11:11px; --t-12:12px; --t-13:13px; --t-15:15px; --t-17:17px;
  --t-20:20px; --t-24:24px; --t-30:30px; --t-38:clamp(28px,4.4vw,38px);
  --t-52:clamp(34px,6.4vw,52px);

  /* сетка отступов (4) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  /* радиусы: чертёж не любит скруглений */
  --r1:2px; --r2:4px;

  /* тени: почти нет, структуру держат линии */
  --sh1:0 1px 2px rgba(22,24,29,.06);
  --sh2:0 2px 0 var(--rule);

  --wrap:1240px; --measure:70ch;
}

@media (prefers-color-scheme:dark){
  :root{
    /* негатив синьки */
    --paper:#0E1420; --surface:#141C2B; --ink:#E7EAF1; --muted:#98A0B2;
    --rule:#2A3550; --accent:#7FA9E8;
    --ok:#5FC48D; --warn:#DDAF4B; --down:#E4816A;
    --ok-bg:#13241C; --warn-bg:#26200F; --down-bg:#2A1815;
    --sh1:none; --sh2:0 2px 0 var(--rule);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 var(--t-17)/1.65 var(--f-body);
  font-feature-settings:"kern" 1;
}
.page{position:relative}

h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;letter-spacing:-.005em;line-height:1.1;margin:0}
a{color:var(--accent);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
a:hover{border-bottom-color:var(--accent)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r1)
}
code,kbd,samp{font-family:var(--f-data);font-size:.92em}
kbd{border:1px solid var(--rule);border-bottom-width:2px;border-radius:var(--r1);padding:1px 5px;background:var(--surface)}
img{max-width:100%;height:auto;display:block}
hr{border:0;border-top:1px solid var(--rule);margin:var(--s6) 0}

/* --- Утилита: моно-метка -------------------------------------- */
.tag{font:500 var(--t-11)/1 var(--f-data);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}

/* --- Шапка ---------------------------------------------------- */
.hdr{position:sticky;top:0;z-index:30;background:var(--paper);border-bottom:1px solid var(--rule)}
.hdr__in{max-width:var(--wrap);margin:0 auto;padding:var(--s3) var(--s5);display:flex;align-items:center;gap:var(--s5)}
.brand{display:flex;align-items:baseline;gap:var(--s2);border:0}
.brand__mark{font:700 var(--t-20)/1 var(--f-display);letter-spacing:-.01em;color:var(--ink)}
.brand__sub{font:500 var(--t-11)/1 var(--f-data);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.hdr__nav{display:flex;gap:var(--s4);margin-left:auto;align-items:center}
.hdr__links{display:flex;gap:var(--s4)}
.hdr__nav a{font:500 var(--t-13)/1 var(--f-body);color:var(--ink);border:0;padding:var(--s2) 0;
  border-bottom:2px solid transparent;letter-spacing:.01em}
.hdr__nav a:hover,.hdr__nav a[aria-current]{border-bottom-color:var(--accent);color:var(--accent)}
.btn{display:inline-flex;align-items:center;gap:var(--s2);font:600 var(--t-13)/1 var(--f-body);
  padding:9px 14px;border:1px solid var(--ink);border-radius:var(--r1);background:var(--ink);color:var(--paper);
  cursor:pointer;transition:transform .08s,background .15s}
.btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn:active{transform:translateY(1px)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn--ghost:hover{background:var(--surface);color:var(--accent);border-color:var(--accent)}
.searchbtn{display:flex;align-items:center;gap:var(--s3);background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--r1);padding:7px 10px;color:var(--muted);font:400 var(--t-13)/1 var(--f-body);cursor:pointer;min-width:190px}
.searchbtn:hover{border-color:var(--accent);color:var(--ink)}
.searchbtn kbd{margin-left:auto;font-size:var(--t-11)}
.burger{display:none;background:transparent;border:1px solid var(--rule);border-radius:var(--r1);
  padding:7px 9px;cursor:pointer;color:var(--ink);font:500 var(--t-13)/1 var(--f-data);white-space:nowrap}
/* мобильное меню разделов */
.mnav{display:none;border-top:1px solid var(--rule)}
.mnav.is-open{display:block}
.mnav ul{list-style:none;margin:0;padding:var(--s2) var(--s5) var(--s4)}
.mnav li{border-bottom:1px solid var(--rule)}
.mnav li:last-child{border-bottom:0}
.mnav a{display:block;padding:11px 0;color:var(--ink);border:0;font-size:var(--t-15)}
.mnav a[aria-current]{color:var(--accent);font-weight:600}
@media (min-width:1025px){.mnav{display:none !important}}

/* ============================================================
   SIGNATURE: цепь соединения
   ============================================================ */
.chain{--cell:var(--surface)}
.chain__list{display:flex;align-items:stretch;list-style:none;margin:0;padding:0;gap:0}
.chain__link{position:relative;flex:1 1 0;min-width:0}
.chain__cell{display:flex;flex-direction:column;gap:var(--s1);height:100%;
  background:var(--cell);border:1px solid var(--rule);border-right:0;padding:var(--s3) var(--s3) var(--s3) var(--s4);
  color:var(--ink);border-bottom-width:1px;transition:background .15s,border-color .15s}
.chain__link:last-child .chain__cell{border-right:1px solid var(--rule)}
a.chain__cell{border-bottom:1px solid var(--rule)}
a.chain__cell:hover{background:color-mix(in srgb,var(--accent) 7%,var(--surface));border-color:var(--accent);z-index:2}
.chain__idx{font:500 var(--t-11)/1 var(--f-data);color:var(--muted);letter-spacing:.08em}
.chain__name{font:700 var(--t-13)/1.15 var(--f-display);letter-spacing:.02em;text-transform:uppercase}
.chain__note{font:400 var(--t-12)/1.35 var(--f-body);color:var(--muted)}
/* активное звено: сплошная заливка + сигнальная верхняя кромка */
.chain__link[data-state="here"] .chain__cell{background:color-mix(in srgb,var(--down) 10%,var(--surface));
  border-color:color-mix(in srgb,var(--down) 45%,var(--rule));box-shadow:inset 0 2px 0 var(--down);z-index:3}
.chain__link[data-state="here"] .chain__idx{color:var(--down)}
.chain__link[data-state="focus"] .chain__cell{background:color-mix(in srgb,var(--accent) 9%,var(--surface));
  border-color:color-mix(in srgb,var(--accent) 45%,var(--rule));box-shadow:inset 0 2px 0 var(--accent);z-index:3}
.chain__link[data-state="focus"] .chain__idx{color:var(--accent)}
/* соединитель между звеньями: линия-мостик + острие, показывает направление трафика */
.chain__link+.chain__link::before{content:'';position:absolute;left:-7px;top:50%;width:14px;height:1px;
  margin-top:-.5px;background:var(--ink);z-index:4}
.chain__link+.chain__link::after{content:'';position:absolute;left:1px;top:50%;width:0;height:0;
  margin-top:-4px;border:4px solid transparent;border-left-color:var(--ink);z-index:4}

/* крупная цепь на главной: с бегущим пакетом */
.chain--hero .chain__cell{padding:var(--s4);gap:var(--s2);min-height:112px}
.chain--hero .chain__name{font-size:var(--t-15)}
.chain--hero .chain__list{position:relative}
.chain--hero .chain__list::after{content:'';position:absolute;left:0;top:-1px;width:34px;height:2px;
  background:var(--accent);animation:packet 7s cubic-bezier(.6,.02,.4,.98) infinite}
@keyframes packet{0%{left:0;opacity:0}6%{opacity:1}94%{opacity:1}100%{left:calc(100% - 34px);opacity:0}}
@media (prefers-reduced-motion:reduce){.chain--hero .chain__list::after{animation:none;opacity:.6}}

/* компактная цепь в статье */
.chain--bar{margin:0 0 var(--s5)}
.chain--bar .chain__cell{padding:var(--s2) var(--s3);gap:2px}
.chain--bar .chain__note{display:none}
.chain--bar .chain__name{font-size:var(--t-12)}
.chain__caption{display:flex;gap:var(--s3);align-items:baseline;margin-bottom:var(--s2)}

@media (max-width:860px){
  .chain__list{flex-wrap:wrap}
  .chain__link{flex:1 1 46%}
  .chain__cell{border-right:1px solid var(--rule);border-bottom:0}
  .chain__link:nth-child(n+3) .chain__cell{border-top:0}
  .chain__link+.chain__link::before,.chain__link+.chain__link::after{display:none}
  .chain--hero .chain__cell{min-height:0}
}

/* --- Каркас страницы ------------------------------------------ */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--s5)}
.layout{display:grid;grid-template-columns:246px minmax(0,1fr);gap:var(--s7);
  max-width:var(--wrap);margin:0 auto;padding:var(--s6) var(--s5) var(--s9)}
.side{position:sticky;top:76px;align-self:start;max-height:calc(100vh - 96px);overflow:auto;
  padding-right:var(--s3);border-right:1px solid var(--rule)}
.side__grp+.side__grp{margin-top:var(--s5)}
.side__ttl{display:block;margin-bottom:var(--s2);font:500 var(--t-11)/1 var(--f-data);letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.side__ttl a{color:inherit;border:0}
.side ul{list-style:none;margin:0;padding:0}
.side li a{display:block;padding:5px var(--s3) 5px var(--s3);font-size:var(--t-13);line-height:1.35;
  color:var(--ink);border:0;border-left:2px solid transparent;margin-left:-1px}
.side li a:hover{border-left-color:var(--rule);color:var(--accent)}
.side li a[aria-current]{border-left-color:var(--accent);color:var(--accent);font-weight:600;
  background:color-mix(in srgb,var(--accent) 6%,transparent)}
@media (max-width:1024px){
  .layout{grid-template-columns:1fr;gap:0;padding-top:var(--s5)}
  .side{display:none;position:static;max-height:none;border-right:0;border-bottom:1px solid var(--rule);
    padding:0 0 var(--s5);margin-bottom:var(--s5)}
  .side.is-open{display:block}
  .burger{display:inline-flex;margin-left:auto}
  .hdr__links{display:none}
  .searchbtn{min-width:0}.searchbtn span:not(:first-child){display:none}
  .hdr__in{gap:var(--s3)}
}

/* --- Крошки + заголовок статьи -------------------------------- */
.crumbs{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin-bottom:var(--s4)}
.crumbs a,.crumbs span{font:400 var(--t-12)/1 var(--f-data);color:var(--muted);border:0}
.crumbs a:hover{color:var(--accent)}
.crumbs i{font-style:normal;color:var(--rule)}
.art{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r2);
  padding:var(--s6) var(--s6) var(--s7);box-shadow:var(--sh1);max-width:none}
@media (max-width:640px){.art{padding:var(--s5) var(--s4) var(--s6);border-left:0;border-right:0;border-radius:0;
  margin:0 calc(-1*var(--s5))}}
.art h1{font-size:var(--t-38);max-width:26ch;margin-bottom:var(--s3)}
.art__meta{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;padding-bottom:var(--s5);
  margin-bottom:var(--s5);border-bottom:1px solid var(--rule)}
.art__lead{font-size:var(--t-20);line-height:1.5;color:var(--ink);max-width:var(--measure);margin:0 0 var(--s6)}
.art h2{font-size:var(--t-24);margin:var(--s7) 0 var(--s3);max-width:32ch;scroll-margin-top:84px}
.art h2:first-of-type{margin-top:var(--s5)}
.art h3{font-size:var(--t-20);font-weight:600;margin:var(--s6) 0 var(--s2)}
.art p,.art li{max-width:var(--measure)}
.art p{margin:0 0 var(--s4)}
.art ol{margin:0 0 var(--s4);padding-left:1.35em}
.art ol>li{margin-bottom:var(--s2)}
/* маркеры — только у контентных списков; служебные (.chain__list, .rows, .kv…) не трогаем */
.art ul{list-style:none;margin:0 0 var(--s4);padding-left:0}
.art ul:not([class])>li{position:relative;padding-left:var(--s5);margin-bottom:var(--s2)}
.art ul:not([class])>li::before{content:'';position:absolute;left:2px;top:.62em;width:8px;height:1px;background:var(--accent)}
.art strong{font-weight:600}

/* --- Шаги диагностики: вертикальная цепь ---------------------- */
.steps{counter-reset:st;margin:var(--s5) 0;padding:0;list-style:none}
.steps>li{position:relative;padding:0 0 var(--s6) var(--s7);margin:0;max-width:none}
.steps>li::before{counter-increment:st;content:counter(st,decimal-leading-zero);
  position:absolute;left:0;top:0;width:32px;height:32px;display:grid;place-items:center;
  font:500 var(--t-12)/1 var(--f-data);color:var(--accent);background:var(--surface);
  border:1px solid var(--accent);border-radius:var(--r1);z-index:1}
.steps>li::after{content:'';position:absolute;left:16px;top:34px;bottom:6px;width:1px;background:var(--rule)}
.steps>li:last-child::after{display:none}
.steps>li>*:first-child{margin-top:5px}
.step__ttl{display:block;font:600 var(--t-20)/1.25 var(--f-display);margin-bottom:var(--s2)}
.steps ul>li::before{top:.62em}

/* --- Врезки --------------------------------------------------- */
.note{border:1px solid var(--rule);border-left:3px solid var(--muted);border-radius:var(--r1);
  padding:var(--s4) var(--s5);margin:var(--s5) 0;background:var(--surface)}
.note>*:last-child{margin-bottom:0}
.note__ttl{display:block;font:600 var(--t-15)/1.3 var(--f-body);margin-bottom:var(--s2)}
.note--info{border-left-color:var(--accent);background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
.note--warn{border-left-color:var(--warn);background:var(--warn-bg)}
.note--ok{border-left-color:var(--ok);background:var(--ok-bg)}
.note--down{border-left-color:var(--down);background:var(--down-bg)}
.note p,.note li{max-width:66ch}

/* --- Таблицы данных ------------------------------------------- */
.tw{overflow-x:auto;margin:var(--s5) 0;border:1px solid var(--rule);border-radius:var(--r1);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:var(--t-15)}
th,td{text-align:left;padding:var(--s3) var(--s4);border-bottom:1px solid var(--rule);vertical-align:top}
th{font:500 var(--t-11)/1.2 var(--f-data);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  background:color-mix(in srgb,var(--rule) 30%,var(--surface));white-space:nowrap}
tr:last-child td{border-bottom:0}
td code{background:color-mix(in srgb,var(--rule) 35%,transparent);padding:1px 4px;border-radius:var(--r1)}
.num{font-family:var(--f-data);font-variant-numeric:tabular-nums;white-space:nowrap}

/* --- Статус-чипы ---------------------------------------------- */
.chip{display:inline-flex;align-items:center;gap:6px;font:500 var(--t-12)/1 var(--f-data);
  letter-spacing:.04em;padding:4px 8px;border:1px solid var(--rule);border-radius:var(--r1);
  background:var(--surface);color:var(--ink);white-space:nowrap}
.chip::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--muted)}
.chip--ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,var(--rule));background:var(--ok-bg)}
.chip--ok::before{background:var(--ok)}
.chip--warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,var(--rule));background:var(--warn-bg)}
.chip--warn::before{background:var(--warn)}
.chip--down{color:var(--down);border-color:color-mix(in srgb,var(--down) 40%,var(--rule));background:var(--down-bg)}
.chip--down::before{background:var(--down)}

/* --- Слот под скриншот ---------------------------------------- */
.shot{margin:var(--s5) 0;border:1px solid var(--rule);border-radius:var(--r1);overflow:hidden;background:var(--surface)}
.shot__frame{position:relative;min-height:132px;display:grid;place-items:center;padding:var(--s5) var(--s4);
  background-image:repeating-linear-gradient(-45deg,transparent 0 7px,color-mix(in srgb,var(--rule) 45%,transparent) 7px 8px)}
.shot__code{font:500 var(--t-12)/1 var(--f-data);letter-spacing:.1em;color:var(--muted);
  background:var(--surface);border:1px solid var(--rule);padding:6px 10px;border-radius:var(--r1)}
.shot__cap{display:flex;gap:var(--s3);padding:var(--s3) var(--s4);border-top:1px solid var(--rule);
  font-size:var(--t-13);color:var(--muted)}
.shot__link{display:block;border:0;background:var(--paper);text-align:center}
.shot__link:hover{background:color-mix(in srgb,var(--accent) 6%,var(--paper))}
.shot>img,.shot__link>img{display:block;width:auto;max-width:100%;max-height:520px;margin:0 auto;background:var(--paper)}
.shot__zoom{display:block;padding:var(--s2) var(--s4);border-top:1px solid var(--rule);background:var(--surface);
  font:500 var(--t-11)/1 var(--f-data);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
/* пара кадров на одно место: два шага одного действия рядом */
.shot__pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
.shot__part{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-width:0;background:var(--paper)}
.shot__part+.shot__part{border-left:1px solid var(--rule)}
.shot__part img{display:block;width:auto;max-width:100%;max-height:400px;height:auto;margin:0 auto}
.shot__mark{position:absolute;top:var(--s2);left:var(--s2);z-index:1;
  font:500 var(--t-11)/1 var(--f-data);text-transform:uppercase;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r1);padding:4px 7px;color:var(--ink)}
.shot__partcap{padding:var(--s2) var(--s3);border-top:1px solid var(--rule);background:var(--surface);
  font-size:var(--t-12);line-height:1.4;color:var(--muted)}
@media (max-width:640px){
  .shot>img,.shot__link>img{max-height:none}
  .shot__part img{max-height:none}
  .shot__pair{grid-template-columns:1fr}
  .shot__part+.shot__part{border-left:0;border-top:1px solid var(--rule)}
}

/* --- CTA ------------------------------------------------------ */
.cta{margin:var(--s6) 0;border:1px solid var(--ink);border-radius:var(--r2);background:var(--surface);
  padding:var(--s5);position:relative}
.cta__tag{position:absolute;top:-9px;left:var(--s4);background:var(--paper);padding:0 var(--s2)}
.cta__ttl{font:700 var(--t-24)/1.15 var(--f-display);margin:var(--s2) 0 var(--s3);max-width:34ch}
.cta p{max-width:62ch;margin-bottom:var(--s4)}
.cta__row{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.cta__fine{font:400 var(--t-12)/1.4 var(--f-data);color:var(--muted)}
.cta--diag{border-color:var(--accent)}
.cta--diag .cta__tag{color:var(--accent)}

/* --- Списки-строки для хабов (вместо ряда одинаковых карточек) - */
.rows{list-style:none;margin:var(--s5) 0;padding:0;border-top:1px solid var(--rule)}
.rows>li{margin:0;max-width:none;border-bottom:1px solid var(--rule)}
.rows>li::before{display:none}
.row{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:var(--s4);align-items:baseline;
  padding:var(--s4) var(--s3);border:0;color:var(--ink);transition:background .12s}
.row:hover{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.row:hover .row__ttl{color:var(--accent)}
.row__idx{font:500 var(--t-12)/1.5 var(--f-data);color:var(--muted)}
.row__ttl{font:600 var(--t-17)/1.3 var(--f-body);display:block;margin-bottom:2px}
.row__sub{font-size:var(--t-13);color:var(--muted);line-height:1.45;display:block;max-width:64ch}
.row__go{font:500 var(--t-13)/1 var(--f-data);color:var(--muted)}
.row:hover .row__go{color:var(--accent)}
@media (max-width:560px){.row{grid-template-columns:30px minmax(0,1fr);gap:var(--s3)}.row__go{display:none}}

/* --- «Смотрите также» ---------------------------------------- */
.also{margin:var(--s7) 0 0;padding-top:var(--s5);border-top:1px solid var(--rule)}
.also__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--s2) var(--s5);
  list-style:none;padding:0;margin:var(--s3) 0 0}
.also__list li{margin:0;padding-left:0}
.also__list li::before{display:none}
.also__list a{font-size:var(--t-15);line-height:1.4}

/* --- Полезно ли -------------------------------------------- */
.helpful{margin-top:var(--s6);padding:var(--s4) var(--s5);border:1px solid var(--rule);border-radius:var(--r1);
  display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;background:var(--surface)}
.helpful__q{font:500 var(--t-15)/1 var(--f-body)}
.helpful__btns{display:flex;gap:var(--s2);margin-left:auto}
.helpful button{font:500 var(--t-13)/1 var(--f-data);padding:7px 16px;border:1px solid var(--rule);
  background:transparent;border-radius:var(--r1);cursor:pointer;color:var(--ink)}
.helpful button:hover{border-color:var(--accent);color:var(--accent)}
.helpful[data-done] .helpful__btns{display:none}
.helpful__thanks{display:none;font-size:var(--t-13);color:var(--muted);margin-left:auto}
.helpful[data-done] .helpful__thanks{display:block}

/* --- Главная -------------------------------------------------- */
/* Сетка-миллиметровка только в зоне схемы: объясняет систему отступов и
   поддерживает чертёжную метафору. Рисуем фоном, без fixed и mask. */
.hero{position:relative;padding:var(--s6) 0 var(--s5);overflow:hidden}
.hero::before{
  content:'';position:absolute;inset:0 0 auto;height:420px;pointer-events:none;
  background-image:
    linear-gradient(180deg,transparent 0,transparent 45%,var(--paper) 100%),
    linear-gradient(color-mix(in srgb,var(--rule) 70%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--rule) 70%,transparent) 1px,transparent 1px);
  background-size:100% 100%,64px 64px,64px 64px;
  background-position:0 0,0 -1px,-1px 0;
}
.hero>*{position:relative}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:var(--s7);align-items:start}
@media (max-width:1000px){.hero__grid{grid-template-columns:1fr;gap:var(--s6)}}
.hero h1{font-size:var(--t-38);max-width:22ch;margin:var(--s3) 0 var(--s4)}
.hero__lead{font-size:var(--t-17);line-height:1.55;color:var(--muted);max-width:54ch;margin:0 0 var(--s5)}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-bottom:var(--s5)}
/* быстрые входы: закрывают частые симптомы сразу с главной */
.quick{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule);max-width:56ch}
.quick li{border-bottom:1px solid var(--rule)}
.quick li:first-child{border-bottom:0;padding:var(--s4) 0 var(--s2)}
.quick a{display:block;padding:10px 0;font-size:var(--t-15);color:var(--ink);border:0}
.quick a::before{content:'→ ';font-family:var(--f-data);color:var(--accent)}
.quick a:hover{color:var(--accent)}

.hero__panel{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r2);box-shadow:var(--sh1)}
.hero__panel h2{font:600 var(--t-15)/1 var(--f-display);letter-spacing:.02em;padding:var(--s4);
  border-bottom:1px solid var(--rule);margin:0;display:flex;justify-content:space-between;align-items:center}
.hero__panel h2 a{font:500 var(--t-11)/1 var(--f-data);letter-spacing:.08em;text-transform:uppercase;border:0}
.statlist{list-style:none;margin:0;padding:0}
.statlist li{display:flex;align-items:center;gap:var(--s3);padding:9px var(--s4);
  border-bottom:1px solid var(--rule);font-size:var(--t-15)}
.statlist li:last-child{border-bottom:0}
.statlist .chip{margin-left:auto}
.statlist__name{font:500 var(--t-15)/1 var(--f-body)}
.statlist__plat{font:400 var(--t-11)/1 var(--f-data);color:var(--muted);letter-spacing:.06em}
.sect{padding:var(--s7) 0;border-top:1px solid var(--rule)}
.sect__hd{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:baseline;margin-bottom:var(--s5)}
.sect__hd h2{font-size:var(--t-30)}
.sect__hd a{margin-left:auto;font:500 var(--t-12)/1 var(--f-data);letter-spacing:.06em;text-transform:uppercase}
.plat{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--s4);list-style:none;padding:0;margin:0}
.plat li{margin:0}
.plat a{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s4);background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--r2);color:var(--ink);transition:border-color .15s,transform .1s}
.plat a:hover{border-color:var(--accent);transform:translateY(-1px)}
.plat__os{font:700 var(--t-20)/1 var(--f-display)}
.plat__app{font:500 var(--t-12)/1 var(--f-data);color:var(--muted);letter-spacing:.05em}
.plat__go{font-size:var(--t-13);color:var(--accent)}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--s7)}

/* --- Поиск ---------------------------------------------------- */
.sdlg{position:fixed;inset:0;z-index:60;display:none;padding:8vh var(--s4) var(--s4)}
.sdlg[open],.sdlg.is-open{display:block}
.sdlg__bd{position:absolute;inset:0;background:color-mix(in srgb,var(--ink) 45%,transparent)}
.sdlg__box{position:relative;max-width:680px;margin:0 auto;background:var(--surface);border:1px solid var(--ink);
  border-radius:var(--r2);box-shadow:0 20px 50px rgba(22,24,29,.22);overflow:hidden}
.sdlg input{width:100%;border:0;border-bottom:1px solid var(--rule);padding:var(--s5);font:400 var(--t-20)/1 var(--f-body);
  background:transparent;color:var(--ink)}
.sdlg input:focus{outline:0;border-bottom-color:var(--accent)}
.sres{list-style:none;margin:0;padding:0;max-height:52vh;overflow:auto}
.sres li{border-bottom:1px solid var(--rule)}
.sres a{display:block;padding:var(--s3) var(--s5);border:0;color:var(--ink)}
.sres a:hover,.sres a.is-sel{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.sres__t{font:500 var(--t-15)/1.3 var(--f-body);display:block}
.sres__p{font:400 var(--t-11)/1 var(--f-data);color:var(--muted);letter-spacing:.06em}
.sdlg__foot{padding:var(--s3) var(--s5);border-top:1px solid var(--rule);font:400 var(--t-12)/1 var(--f-data);color:var(--muted)}

/* --- Где скачать ---------------------------------------------- */
.dl{margin:var(--s5) 0;border:1px solid var(--ink);border-radius:var(--r2);background:var(--surface);overflow:hidden}
.dl__hd{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;padding:var(--s3) var(--s4);
  border-bottom:1px solid var(--rule);background:color-mix(in srgb,var(--rule) 28%,var(--surface))}
.dl__checked{margin-left:auto}
.dl__list{list-style:none;margin:0;padding:0}
.dl__row{display:grid;grid-template-columns:170px minmax(0,1fr) auto;gap:var(--s4);align-items:center;
  padding:var(--s3) var(--s4);border-bottom:1px solid var(--rule);margin:0;max-width:none}
.dl__row:last-child{border-bottom:0}
.dl__row::before{display:none}
.dl__plat{font:600 var(--t-13)/1.3 var(--f-body)}
.dl__what{font-size:var(--t-13);color:var(--muted);line-height:1.4}
.dl__kind{display:inline-block;font:500 var(--t-11)/1 var(--f-data);letter-spacing:.06em;color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 35%,var(--rule));border-radius:var(--r1);
  padding:3px 6px;margin-right:var(--s2);vertical-align:1px}
.dl__go{font:500 var(--t-13)/1 var(--f-data);white-space:nowrap;border-bottom:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.dl__go--none{color:var(--muted);border:0}
.dl__warn,.dl__note,.dl__disc{margin:0;padding:var(--s3) var(--s4);border-top:1px solid var(--rule);
  font-size:var(--t-13);line-height:1.5;max-width:none}
.dl__warn{background:var(--warn-bg);color:var(--ink);border-left:3px solid var(--warn)}
.dl__note{color:var(--muted)}
.dl__disc{font-size:var(--t-12);color:var(--muted);background:color-mix(in srgb,var(--rule) 18%,var(--surface))}
@media (max-width:640px){
  .dl__row{grid-template-columns:1fr;gap:var(--s2)}
  .dl__go{justify-self:start}
  .dl__checked{margin-left:0}
}

/* --- Инструменты ---------------------------------------------- */
.tool{margin:var(--s5) 0;border:1px solid var(--ink);border-radius:var(--r2);background:var(--surface);overflow:hidden}
.tool__hd{padding:var(--s3) var(--s4);border-bottom:1px solid var(--rule);display:flex;gap:var(--s3);align-items:center}
.tool__bd{padding:var(--s4)}
.tool label{display:block;font:500 var(--t-12)/1 var(--f-data);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-bottom:var(--s2)}
.tool textarea,.tool input[type=text]{width:100%;font:400 var(--t-13)/1.5 var(--f-data);padding:var(--s3);
  border:1px solid var(--rule);border-radius:var(--r1);background:var(--paper);color:var(--ink);resize:vertical}
.tool textarea:focus,.tool input:focus{outline:0;border-color:var(--accent)}
.tool__row{display:flex;gap:var(--s3);margin-top:var(--s3);flex-wrap:wrap;align-items:center}
.tool__out{margin-top:var(--s4);border-top:1px solid var(--rule);padding-top:var(--s4)}
.tool__out:empty{display:none}
.kv{list-style:none;margin:0;padding:0}
.kv li{display:grid;grid-template-columns:170px minmax(0,1fr);gap:var(--s4);padding:6px 0;
  border-bottom:1px solid var(--rule);font-size:var(--t-13);margin:0;max-width:none}
.kv li::before{display:none}
.kv b{font:500 var(--t-11)/1.6 var(--f-data);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:500}
.kv span{font-family:var(--f-data);word-break:break-all}
@media (max-width:560px){.kv li{grid-template-columns:1fr;gap:2px}}
pre{margin:var(--s4) 0;padding:var(--s4);background:var(--paper);border:1px solid var(--rule);border-radius:var(--r1);
  overflow-x:auto;font:400 var(--t-13)/1.55 var(--f-data)}

/* --- Футер ---------------------------------------------------- */
.ftr{border-top:1px solid var(--rule);background:var(--surface);margin-top:var(--s9)}
.ftr__in{max-width:var(--wrap);margin:0 auto;padding:var(--s7) var(--s5)}
.ftr__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--s6);margin-bottom:var(--s6)}
.ftr__grid ul{list-style:none;margin:0;padding:0}
.ftr__grid li{margin-bottom:var(--s2)}
.ftr__grid a{font-size:var(--t-13);color:var(--ink);border:0}
.ftr__grid a:hover{color:var(--accent)}
.ftr__bar{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;padding-top:var(--s5);
  border-top:1px solid var(--rule);font:400 var(--t-12)/1.5 var(--f-data);color:var(--muted)}
.ftr__disc{max-width:70ch;font-family:var(--f-body);font-size:var(--t-12);line-height:1.5;color:var(--muted)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s4);top:var(--s4);z-index:99;background:var(--surface);padding:var(--s3);border:1px solid var(--ink)}