/* csstory.net — скин csy. Тёмное редакционное издание о Counter-Strike.
   Ось 1 асимметрия: липкий рельс + колонка. Ось 5: секции разделяются заливкой,
   волосяных линий нет. Токены намеренно не совпадают с именами сети. */

:root{
  /* ⚠ Ступени полотна разведены НАМЕРЕННО широко: на такой темноте отношения
     яркостей сжимаются, и «соседний по палитре» тон даёт 1.08 — то есть блок
     сливается с подложкой (R23). Каждая следующая ступень ≥1.15 к предыдущей. */
  --csy-void:#0e1013;
  --csy-panel:#1f242c;
  --csy-etch:#2b313b;
  --csy-lift:#3a414e;
  --csy-glare:#f2f4f7;
  --csy-mute:#aeb7c3;
  --csy-dim:#98a2b0;
  --csy-flare:#f5a524;
  --csy-flare-deep:#8a5a06;
  --csy-frost:#4ec9b0;
  --csy-gut:clamp(14px,2.2vw,26px);
  --csy-measure:1060px;
  --csy-rail:232px;
  --csy-face-display:"Bitter","Zilla Slab","Noto Serif",serif;
  --csy-face-copy:"Inter","Public Sans","Liberation Sans",sans-serif;
  --csy-face-tag:"JetBrains Mono","IBM Plex Mono",ui-monospace,monospace;
  --csy-step:clamp(28px,4vw,52px);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--csy-void);
  color:var(--csy-glare);
  font-family:var(--csy-face-copy);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--csy-glare);text-decoration:none}
a:hover{color:var(--csy-flare)}

.csy-skip{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:80;
  background:var(--csy-flare);
  color:#0e1013;
  font-weight:600;
  padding:10px 16px;
  border-radius:0 0 5px 0;
}
.csy-skip:focus{left:0;color:#0e1013}

:focus-visible{outline:2px solid var(--csy-flare);outline-offset:2px}

/*[csy:shell]*/
.csy-shell{display:block}

.csy-rail{
  position:fixed;
  inset:0 auto 0 0;
  width:var(--csy-rail);
  background:var(--csy-panel);
  padding:26px 18px 22px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:22px;
  z-index:40;
}
.csy-rail::-webkit-scrollbar{width:6px}
.csy-rail::-webkit-scrollbar-thumb{background:var(--csy-lift)}

.csy-main{
  /* Ровно на ширину рельса — и ещё зазор: рельс здесь ШАПКА сайта, поставленная
     сбоку, а между шапкой и текстом полагается воздух (R6, норма 16–48). Рельс
     position:fixed, поэтому отступ двигает только контент; внутренняя колонка
     .csy-hold центрируется в остатке и визуально смещается вдвое меньше. */
  margin-left:calc(var(--csy-rail) + 24px);
  min-width:0;
}

.csy-hold{
  max-width:var(--csy-measure);
  margin:0 auto;
  padding-left:var(--csy-gut);
  padding-right:var(--csy-gut);
}
/*[/csy:shell]*/

/*[csy:masthead]*/
.csy-brand{display:block}
.csy-brand__mark{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
}
.csy-brand__glyph{width:34px;height:34px;flex:0 0 34px}
.csy-brand__word{
  font-family:var(--csy-face-display);
  font-weight:700;
  font-size:23px;
  line-height:1.05;
  letter-spacing:-.015em;
}
.csy-brand__word b{color:var(--csy-flare);font-weight:700}
.csy-brand__line{
  margin:8px 0 0;
  font-family:var(--csy-face-tag);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--csy-dim);
}
/*[/csy:masthead]*/

/*[csy:railnav]*/
.csy-railnav{display:flex;flex-direction:column;gap:2px}
.csy-railnav__head{
  font-family:var(--csy-face-tag);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--csy-dim);
  margin:0 0 8px;
}
.csy-railnav a{
  display:flex;
  align-items:center;
  gap:10px;
  /* 46, а не ровно 44: N4 меряет по getBoundingClientRect, и норму «≥44»
     нельзя ставить впритык — одна строка длинного пункта округлится вниз. */
  min-height:46px;
  padding:0 10px;
  border-radius:4px;
  font-weight:600;
  font-size:15px;
  color:var(--csy-mute);
}
.csy-railnav a:hover{background:var(--csy-etch);color:var(--csy-glare)}
.csy-railnav a[aria-current="page"]{background:var(--csy-etch);color:var(--csy-glare)}
.csy-railnav a[aria-current="page"] .csy-railnav__dot{background:var(--csy-flare)}
.csy-railnav__dot{
  width:7px;height:7px;flex:0 0 7px;border-radius:50%;
  background:var(--csy-lift);
}
.csy-railnav svg{width:17px;height:17px;flex:0 0 17px;opacity:.85}

.csy-railfoot{margin-top:auto;padding-top:14px}
.csy-railfoot a{
  display:block;
  min-height:32px;
  line-height:32px;
  font-size:13px;
  color:var(--csy-dim);
}
.csy-railfoot a:hover{color:var(--csy-glare)}
.csy-railfoot p{font-size:12px;color:var(--csy-dim);margin:10px 0 0;line-height:1.5}
/*[/csy:railnav]*/

/*[csy:burger]*/
/* Кнопка живёт в рельсе и на десктопе не нужна: там рубрики стоят столбцом
   и видны всегда. `display:none` здесь — это и есть проверка N8. */
.csy-burger{
  display:none;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:46px;height:46px;
  padding:0 14px;
  background:var(--csy-etch);
  border:0;border-radius:5px;
  color:var(--csy-glare);
  font:600 14px/1 var(--csy-face-copy);
  letter-spacing:.02em;
  cursor:pointer;
}
.csy-burger svg{width:22px;height:22px;flex:0 0 22px}
.csy-burger:hover{background:var(--csy-lift)}
/*[/csy:burger]*/

/*[csy:digest]*/
.csy-digest{
  background:var(--csy-panel);
  padding-top:var(--csy-step);
  padding-bottom:var(--csy-step);
}
.csy-digest__head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px 16px;
  margin:0 0 18px;
}
.csy-digest__head h1,
.csy-digest__head h2{
  font-family:var(--csy-face-display);
  font-size:clamp(24px,3.2vw,34px);
  line-height:1.15;
  margin:0;
  letter-spacing:-.02em;
}
.csy-digest__stamp{
  font-family:var(--csy-face-tag);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--csy-frost);
}
.csy-digest__list{list-style:none;margin:0;padding:0}
.csy-digest__list>li{padding:12px 0}
.csy-digest__list>li+li{background:linear-gradient(var(--csy-lift),var(--csy-lift)) top left/100% 1px no-repeat}
.csy-digest__row{
  display:grid;
  grid-template-columns:92px minmax(0,1fr);
  gap:4px 18px;
  align-items:baseline;
}
.csy-digest__kick{
  font-family:var(--csy-face-tag);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--csy-flare);
  min-width:0;
}
.csy-digest__ttl{
  margin:0;
  font-family:var(--csy-face-display);
  font-size:clamp(17px,1.7vw,20px);
  line-height:1.3;
  font-weight:600;
  min-width:0;
}
.csy-digest__sub{
  grid-column:2;
  margin:2px 0 0;
  color:var(--csy-mute);
  font-size:15px;
  line-height:1.5;
}
/*[/csy:digest]*/

/*[csy:band]*/
.csy-band{padding-top:var(--csy-step);padding-bottom:var(--csy-step)}
/* Полоса «пустого» тона ничего не красит: это и есть цвет полотна. Если её
   залить тем же токеном, получается блок со своим фоном ровно цвета подложки
   (R23, 1.00) — формально дефект, визуально ничего. */
.csy-band--void{background:none}
.csy-band--panel{background:var(--csy-panel)}
.csy-band--etch{background:var(--csy-etch)}
.csy-band__head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:8px 18px;
  margin:0 0 20px;
}
.csy-band__head h2{
  margin:0;
  font-family:var(--csy-face-display);
  font-size:clamp(21px,2.6vw,28px);
  line-height:1.2;
  letter-spacing:-.015em;
}
.csy-band__more{
  font-family:var(--csy-face-tag);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--csy-frost);
  min-height:44px;
  display:inline-flex;
  align-items:center;
}
/*[/csy:band]*/

/*[csy:grid]*/
.csy-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-auto-flow:dense;
  gap:var(--csy-gut);
}
.csy-grid>*{min-width:0}
.csy-s4{grid-column:span 4}
.csy-s5{grid-column:span 5}
.csy-s6{grid-column:span 6}
.csy-s7{grid-column:span 7}
.csy-s8{grid-column:span 8}
.csy-s12{grid-column:span 12}
/*[/csy:grid]*/

/*[csy:card]*/
.csy-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  background:var(--csy-etch);
  border:1px solid var(--csy-lift);
  border-radius:6px;
  overflow:hidden;
}
.csy-band--etch .csy-card{background:var(--csy-panel)}
.csy-card__shot{
  aspect-ratio:16/9;
  width:100%;
  object-fit:cover;
  background:var(--csy-lift);
}
.csy-card__body{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-width:0;
  padding:16px 16px 14px;
  gap:8px;
}
.csy-card__kick{
  font-family:var(--csy-face-tag);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--csy-flare);
}
.csy-card__ttl{
  margin:0;
  font-family:var(--csy-face-display);
  font-size:19px;
  line-height:1.3;
  font-weight:600;
}
.csy-card--wide .csy-card__ttl{font-size:clamp(20px,2.2vw,26px)}
.csy-card__dek{margin:0;color:var(--csy-mute);font-size:15px;line-height:1.55}
.csy-card__meta{
  margin-top:auto;
  padding-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:6px 14px;
  font-family:var(--csy-face-tag);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--csy-dim);
}
.csy-card--wide{flex-direction:row}
.csy-card--wide .csy-card__shot{
  aspect-ratio:4/3;
  width:clamp(170px,36%,320px);
  flex:0 0 auto;
  max-width:none;
}
/*[/csy:card]*/

/*[csy:chip]*/
.csy-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 9px;
  border-radius:3px;
  background:var(--csy-lift);
  font-family:var(--csy-face-tag);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--csy-glare);
}
.csy-chip--lang{background:var(--csy-flare-deep);color:#ffe7bd}
/*[/csy:chip]*/

/*[csy:article]*/
.csy-art{padding-top:var(--csy-step);padding-bottom:var(--csy-step)}
.csy-art__crumb{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:0 0 14px;
  padding:0;
  list-style:none;
  font-family:var(--csy-face-tag);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--csy-dim);
}
.csy-art__crumb li+li::before{content:"/";margin-right:6px;color:var(--csy-lift)}
.csy-art__kick{
  font-family:var(--csy-face-tag);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--csy-flare);
  margin:0 0 8px;
}
.csy-art h1{
  font-family:var(--csy-face-display);
  font-size:clamp(28px,4.4vw,46px);
  line-height:1.12;
  letter-spacing:-.025em;
  margin:0 0 14px;
  font-weight:700;
}
.csy-art__dek{
  font-size:clamp(17px,1.9vw,21px);
  line-height:1.5;
  color:var(--csy-mute);
  margin:0 0 18px;
  max-width:62ch;
}
.csy-art__meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  font-family:var(--csy-face-tag);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--csy-dim);
  margin:0 0 24px;
}
.csy-art__upd{color:var(--csy-frost)}

.csy-art__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 268px;
  gap:var(--csy-gut);
  align-items:start;
}
.csy-art__grid>*{min-width:0}
.csy-art__aside{
  position:sticky;
  top:22px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
/*[/csy:article]*/

/*[csy:prose]*/
.csy-prose{max-width:none;display:flow-root}
.csy-prose>*:first-child{margin-top:0}
.csy-prose p{margin:0 0 1.15em;max-width:68ch}
.csy-prose h2{
  font-family:var(--csy-face-display);
  font-size:clamp(22px,2.7vw,30px);
  line-height:1.2;
  letter-spacing:-.018em;
  margin:1.9em 0 .55em;
  clear:both;
}
.csy-prose h3{
  font-family:var(--csy-face-display);
  font-size:clamp(18px,2.1vw,22px);
  line-height:1.25;
  margin:1.5em 0 .45em;
  clear:both;
}
.csy-prose h4{
  font-family:var(--csy-face-copy);
  font-size:16px;
  font-weight:700;
  letter-spacing:.01em;
  margin:1.3em 0 .4em;
  clear:both;
}
.csy-prose ul,.csy-prose ol{margin:0 0 1.15em;padding-left:1.35em;max-width:68ch}
.csy-prose li{margin:0 0 .45em}
.csy-prose li>p{margin:0 0 .4em}
.csy-prose strong{color:#fff}
.csy-prose a{color:var(--csy-frost);text-decoration:underline;text-underline-offset:2px}
.csy-prose a:hover{color:var(--csy-flare)}
.csy-prose blockquote{
  margin:1.6em 0;
  padding:16px 20px;
  background:var(--csy-panel);
  border-radius:5px;
  font-family:var(--csy-face-display);
  font-size:19px;
  line-height:1.45;
  color:var(--csy-glare);
}
.csy-prose blockquote p:last-child{margin:0}
.csy-prose code{
  font-family:var(--csy-face-tag);
  font-size:.88em;
  background:var(--csy-etch);
  padding:1px 5px;
  border-radius:3px;
}
.csy-prose hr{display:none}

.csy-prose__lead{
  float:right;
  width:clamp(170px,32%,300px);
  margin:.3em 0 18px 22px;
  max-width:100%;
}
.csy-prose__lead img{border-radius:5px;width:100%}
.csy-prose__lead figcaption{
  margin-top:7px;
  font-size:12.5px;
  line-height:1.45;
  color:var(--csy-dim);
}
.csy-fig{margin:1.8em 0;clear:both}
.csy-fig img{border-radius:5px;width:100%}
.csy-fig figcaption{
  margin-top:8px;
  font-size:13px;
  line-height:1.45;
  color:var(--csy-dim);
}
/*[/csy:prose]*/

/*[csy:table]*/
.csy-tablewrap{margin:1.7em 0;clear:both}
.csy-tablewrap table{
  width:100%;
  border-collapse:collapse;
  font-size:15px;
  background:var(--csy-panel);
  border-radius:5px;
  overflow:hidden;
}
.csy-tablewrap caption{
  caption-side:top;
  text-align:left;
  font-family:var(--csy-face-tag);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--csy-dim);
  padding:0 0 8px;
}
.csy-tablewrap th,.csy-tablewrap td{
  padding:11px 14px;
  text-align:left;
  vertical-align:top;
}
.csy-tablewrap thead th{
  background:var(--csy-etch);
  font-family:var(--csy-face-tag);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--csy-mute);
  font-weight:500;
}
.csy-tablewrap tbody tr+tr td{box-shadow:inset 0 1px 0 var(--csy-etch)}
.csy-tablewrap td:first-child{font-weight:600}
/*[/csy:table]*/

/*[csy:toc]*/
.csy-toc{
  background:var(--csy-panel);
  border-radius:6px;
  padding:14px 16px;
}
.csy-toc>summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:44px;
  font-family:var(--csy-face-tag);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--csy-mute);
}
.csy-toc>summary::-webkit-details-marker{display:none}
.csy-toc>summary::after{
  content:"";
  width:9px;height:9px;flex:0 0 9px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform .15s;
}
.csy-toc[open]>summary::after{transform:rotate(225deg) translateY(-2px)}
.csy-toc ol{margin:10px 0 2px;padding-left:1.25em;font-size:14.5px;line-height:1.45}
.csy-toc li{margin:0 0 7px}
.csy-toc a{color:var(--csy-mute)}
.csy-toc a:hover{color:var(--csy-flare)}
/*[/csy:toc]*/

/*[csy:faq]*/
.csy-faq{margin:2em 0;clear:both}
.csy-faq__item{
  background:var(--csy-panel);
  border:1px solid var(--csy-lift);
  border-radius:6px;
  padding:14px 18px;
  margin:0 0 10px;
}
.csy-faq__item>summary{
  list-style:none;
  cursor:pointer;
  font-family:var(--csy-face-display);
  font-size:18px;
  line-height:1.35;
  font-weight:600;
  min-height:44px;
  display:flex;
  align-items:center;
}
.csy-faq__item>summary::-webkit-details-marker{display:none}
.csy-faq__item p{margin:8px 0 0;color:var(--csy-mute);max-width:68ch}
/*[/csy:faq]*/

/*[csy:widget]*/
.csy-wg{
  background:var(--csy-panel);
  border:1px solid var(--csy-lift);
  border-radius:6px;
  padding:16px 18px 18px;
}
.csy-band--panel .csy-wg,.csy-art .csy-wg{background:var(--csy-etch)}
.csy-wg__head{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0 0 4px;
}
.csy-wg__head svg{width:18px;height:18px;flex:0 0 18px;color:var(--csy-flare)}
.csy-wg__head h3,.csy-wg__head h2{
  margin:0;
  font-family:var(--csy-face-tag);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--csy-mute);
  font-weight:500;
}
.csy-wg__note{
  margin:10px 0 0;
  font-size:12.5px;
  line-height:1.5;
  color:var(--csy-dim);
}
.csy-wg__rows{list-style:none;margin:10px 0 0;padding:0}
.csy-wg__rows li{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:4px 12px;
  align-items:baseline;
  padding:8px 0;
  min-width:0;
}
.csy-wg__rows li+li{box-shadow:inset 0 1px 0 var(--csy-lift)}
.csy-wg__k{font-size:14.5px;font-weight:600;min-width:0}
.csy-wg__v{
  font-family:var(--csy-face-tag);
  font-size:13px;
  color:var(--csy-frost);
  white-space:nowrap;
}
.csy-wg__sub{
  grid-column:1/-1;
  font-size:12.5px;
  line-height:1.45;
  color:var(--csy-dim);
}
.csy-wg__bar{
  grid-column:1/-1;
  height:5px;
  border-radius:3px;
  background:var(--csy-lift);
  overflow:hidden;
}
.csy-wg__bar span{display:block;height:100%;background:var(--csy-flare)}
/* Плитки виджета (tiles/tile) сняты 29.09: сетка на 88px рассчитывалась на
   короткие пары «имя — число», а все данные виджетов оказались фразами и
   разъезжались. Правило скина без разметки — это C09.31. */
.csy-wg__calc{display:grid;gap:10px;margin:12px 0 0}
.csy-wg__calc label{
  display:grid;
  gap:5px;
  font-family:var(--csy-face-tag);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--csy-dim);
}
.csy-wg__calc input,.csy-wg__calc select{
  width:100%;
  min-height:44px;
  padding:0 11px;
  background:var(--csy-void);
  color:var(--csy-glare);
  border:1px solid var(--csy-lift);
  border-radius:4px;
  font-family:var(--csy-face-tag);
  font-size:15px;
}
.csy-wg__out{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(96px,1fr));
  gap:8px;
  margin:12px 0 0;
}
.csy-wg__out div{background:var(--csy-void);border-radius:4px;padding:9px 10px;min-width:0}
.csy-wg__out b{
  display:block;
  font-family:var(--csy-face-tag);
  font-size:16px;
  color:var(--csy-frost);
  overflow-wrap:anywhere;
}
.csy-wg__out span{
  display:block;
  font-family:var(--csy-face-tag);
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--csy-dim);
  margin-top:3px;
}
.csy-wg__map{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(104px,1fr));
  gap:8px;
  margin:12px 0 0;
}
.csy-wg__map div{
  background:var(--csy-void);
  border-radius:4px;
  padding:9px 11px;
  min-width:0;
}
.csy-wg__map b{display:block;font-size:14px;font-weight:600}
.csy-wg__map span{
  display:block;
  font-family:var(--csy-face-tag);
  font-size:10.5px;
  color:var(--csy-dim);
  margin-top:2px;
}
.csy-wg__ladder{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:7px}
.csy-wg__ladder li{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:10px;
  align-items:center;
  background:var(--csy-void);
  border-radius:4px;
  padding:9px 11px;
  min-width:0;
}
.csy-wg__step{
  width:24px;height:24px;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--csy-lift);
  font-family:var(--csy-face-tag);
  font-size:11px;
}
.csy-wg__ladder b{font-size:14.5px;display:block}
.csy-wg__ladder span{display:block;font-size:12.5px;color:var(--csy-dim);line-height:1.4}
/*[/csy:widget]*/

/*[csy:hub]*/
/* Заливку и поля даёт полоса .csy-band--panel, в которую шапка вложена: свой
   фон того же тона делал блок ровно цвета подложки (R23, 1.00). */
.csy-hubhead{background:none;padding:0}
.csy-hubhead h1{
  font-family:var(--csy-face-display);
  font-size:clamp(28px,4.2vw,44px);
  line-height:1.12;
  letter-spacing:-.025em;
  margin:0 0 12px;
}
.csy-hubhead p{
  margin:0;
  max-width:64ch;
  color:var(--csy-mute);
  font-size:clamp(16px,1.8vw,19px);
  line-height:1.55;
}
.csy-hubhead__tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:16px 0 0;
  padding:0;
  list-style:none;
}
/*[/csy:hub]*/

/*[csy:feed]*/
.csy-feed{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.csy-feed li{
  background:var(--csy-panel);
  border:1px solid var(--csy-lift);
  border-radius:5px;
  padding:14px 16px;
}
.csy-band--panel .csy-feed li{background:var(--csy-etch)}
.csy-feed__row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:4px 16px;
  align-items:baseline;
}
.csy-feed h3{
  margin:0;
  font-family:var(--csy-face-display);
  font-size:18px;
  line-height:1.3;
  font-weight:600;
  min-width:0;
}
.csy-feed time{
  font-family:var(--csy-face-tag);
  font-size:11.5px;
  color:var(--csy-dim);
  white-space:nowrap;
}
.csy-feed p{
  grid-column:1/-1;
  margin:5px 0 0;
  color:var(--csy-mute);
  font-size:14.5px;
  line-height:1.5;
}
/*[/csy:feed]*/

/*[csy:wire]*/
/* Гнездо автопостинга: полоса НАД лентой, куда публикатор кладёт анонс своим
   `<div style="margin-bottom: 20px;"><h4><a>…</a></h4><p>…</p></div>`. Разметку
   приносит робот, поэтому оформление висит на контейнере и на голых тегах.
   Маркер здесь словами не цитируется: он ищется подстрокой по всей сборке, и
   строка в комментарии стала бы ВТОРЫМ маркером на сайте.
   Пустое гнездо не рисуем — но по детям-элементам, а не `:empty`: внутри лежит
   комментарий, и `:empty` на нём уже ложен. `:has` ровно один уровень — вложенный
   `:has` спецификацией запрещён, и браузер выбросил бы правило целиком и молча. */
.csy-wire:not(:has(>div)){display:none}
.csy-wire{display:grid;gap:2px;margin:0 0 2px}
.csy-wire>div{
  background:var(--csy-etch);
  border:1px solid var(--csy-lift);
  border-left:3px solid var(--csy-flare);
  border-radius:5px;
  padding:14px 16px;
  margin-bottom:2px !important;   /* перебивает инлайновый margin-bottom:20px робота */
  overflow-wrap:break-word;
}
.csy-wire h4{
  margin:0;
  font-family:var(--csy-face-display);
  font-size:18px;
  line-height:1.3;
  font-weight:600;
}
.csy-wire h4 a{color:var(--csy-glare);text-decoration:none}
.csy-wire h4 a:hover{color:var(--csy-flare)}
.csy-wire p{
  margin:5px 0 0;
  color:var(--csy-mute);
  font-size:14.5px;
  line-height:1.5;
}
.csy-wire a{overflow-wrap:anywhere}
/*[/csy:wire]*/

/*[csy:robot]*/
/* Статья автопостинга приезжает ГОЛЫМ html: обёрток сборщика — коробки прокрутки
   вокруг таблицы, подписи к кадру, разрезанных списков — у неё не будет никогда.
   Ни один гейт этого не ловит: на своих страницах таких узлов ноль из N. Поэтому
   защита вешается на сам контейнер прозы и только там, где нашей обёртки нет. */
.csy-prose{container-type:inline-size;overflow-wrap:break-word}
.csy-prose a{overflow-wrap:anywhere}
.csy-prose>table{
  display:block;              /* без него прокрутка у table не работает вовсе */
  max-width:100%;
  overflow-x:auto;
  margin:1.7em 0;
  border-collapse:collapse;
  font-size:15px;
  background:var(--csy-panel);
  border-radius:5px;
}
.csy-prose>table caption{
  caption-side:top;
  text-align:left;
  position:sticky;            /* иначе подпись уезжает вместе с прокруткой */
  left:0;
  /* ширина — по ВИДИМОЙ части, а не по прокручиваемой: `min-width:100%` мерился бы
     от полной ширины таблицы и резал подпись, `calc(100vw - поля)` врёт на странице
     с боковой колонкой. `max-width` рядом обязателен: 100cqi — ширина обёртки по
     рамке, видимая часть таблицы — её content box, разница в пару пикселей. */
  width:100cqi;
  max-width:100%;
  font-family:var(--csy-face-tag);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--csy-dim);
  padding:0 0 8px;
}
.csy-prose>table th,.csy-prose>table td{
  padding:11px 14px;
  text-align:left;
  vertical-align:top;
}
.csy-prose>table thead th{
  background:var(--csy-etch);
  font-family:var(--csy-face-tag);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--csy-mute);
  font-weight:500;
}
.csy-prose>table tbody tr+tr td{box-shadow:inset 0 1px 0 var(--csy-etch)}
.csy-prose>pre{
  display:block;
  max-width:100%;
  overflow-x:auto;
  margin:1.6em 0;
  padding:14px 16px;
  background:var(--csy-panel);
  border-radius:5px;
  font-family:var(--csy-face-tag);
  font-size:13.5px;
  line-height:1.5;
}
.csy-prose pre code{background:none;padding:0;font-size:inherit}
.csy-prose img{max-width:100%;height:auto;border-radius:5px}
.csy-prose figure{margin:1.8em 0}
.csy-prose figcaption{
  margin-top:8px;
  font-size:13px;
  line-height:1.45;
  color:var(--csy-dim);
}
.csy-prose cite{font-style:normal;color:var(--csy-dim);font-size:14px}
/* Абзац даты, который публикатор дописывает в тело статьи сразу за её h1. Селектор
   обязан быть с контейнером — голый `.pbn-published-date` перебивается правилом
   `.csy-prose p`, стоящим выше по файлу. */
.csy-prose .pbn-published-date{
  margin:0 0 1.15em;
  font-family:var(--csy-face-tag);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--csy-frost);
}
/*[/csy:robot]*/

/*[csy:foot]*/
.csy-foot{
  background:var(--csy-panel);
  padding-top:var(--csy-step);
  padding-bottom:calc(var(--csy-step) * .8);
  margin-top:0;
}
.csy-foot__cols{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--csy-gut);
  align-items:start;   /* иначе короткая колонка растягивается под самую длинную (R24) */
}
.csy-foot h2{
  margin:0 0 10px;
  font-family:var(--csy-face-tag);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--csy-dim);
  font-weight:500;
}
.csy-foot ul{list-style:none;margin:0;padding:0}
.csy-foot li a{
  display:block;
  min-height:40px;
  line-height:40px;
  font-size:14.5px;
  color:var(--csy-mute);
}
.csy-foot li a:hover{color:var(--csy-glare)}
/* Строка «Last checked …» стоит на каждой странице: её освежает ночной крон
   по своему атрибуту-маркеру, поэтому подпись снаружи тега, а дата внутри.
   Сам маркер здесь не цитируется: перепись «страниц с маркером» идёт грепом
   по сборке, и лист стилей давал бы ей лишнюю единицу. */
.csy-foot__upd{
  margin:24px 0 0;
  font-family:var(--csy-face-tag);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--csy-frost);
}
.csy-foot__legal{
  margin:10px 0 0;
  font-size:12.5px;
  line-height:1.6;
  color:var(--csy-dim);
  max-width:80ch;
}
.csy-foot__legal a{color:var(--csy-mute);text-decoration:underline}
/*[/csy:foot]*/

/*[csy:media]*/
@media (max-width:1180px){
  .csy-art__grid{grid-template-columns:minmax(0,1fr) 240px}
}

@media (max-width:980px){
  .csy-art__grid{grid-template-columns:minmax(0,1fr)}
  .csy-art__aside{position:static;flex-direction:row;flex-wrap:wrap}
  .csy-art__aside>*{flex:1 1 280px;min-width:0}
}

@media (max-width:900px){
  :root{--csy-gut:16px}
  .csy-rail{
    position:static;
    width:auto;
    inset:auto;
    padding:14px var(--csy-gut);
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    overflow:visible;
    min-width:0;
  }
  .csy-rail>*{min-width:0}
  /* На узком рельс распахивается в обычную полосу сверху, и зазор «под шапкой»
     читается по вертикали (норма 12–32). Отступ берётся У КОЛОНКИ, а первому
     блоку внутри ровно на столько же срезается верхняя подушка — суммарный
     воздух над первым заголовком остаётся прежним, меняется только то, кому он
     принадлежит. Без второй строки на мобиле копится 20px пустоты. */
  .csy-main{margin-left:0;margin-top:20px}
  .csy-main>:first-child{padding-top:calc(var(--csy-step) - 20px)}
  .csy-burger{display:inline-flex}
  .csy-brand__line{display:none}
  .csy-railnav{
    display:none;
    position:absolute;
    left:0;right:0;
    top:100%;
    background:var(--csy-panel);
    padding:8px var(--csy-gut) 16px;
    z-index:50;
  }
  .csy-rail{position:relative}
  .csy-rail.is-open .csy-railnav{display:flex}
  .csy-railnav__head{display:none}
  /* ⛔ Проданные размещения донора живут в .csy-railfoot. Спрятать их на узком
     экране нельзя (правило 4 сети, плюс R5 «скрытый текст»): на мобиле подвал
     рельса не гасится, а переезжает в строку под шапку. */
  .csy-railfoot{
    order:3;
    flex:1 1 100%;
    min-width:0;
    margin-top:0;
    padding-top:10px;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:6px 16px;
  }
  .csy-railfoot a{min-height:auto;line-height:1.4;padding:6px 0}
  .csy-railfoot p{margin:0;flex:1 0 100%}
  .csy-s4,.csy-s5{grid-column:span 6}
  .csy-s7,.csy-s8{grid-column:span 12}
}

@media (max-width:760px){
  body{font-size:16.5px}
  .csy-s4,.csy-s5,.csy-s6,.csy-s7,.csy-s8{grid-column:span 12}
  .csy-card--wide{flex-direction:column}
  .csy-card--wide .csy-card__shot{width:100%;aspect-ratio:16/9}
  .csy-digest__row{grid-template-columns:minmax(0,1fr)}
  .csy-digest__sub{grid-column:1}
  .csy-prose__lead{float:none;width:100%;margin:1.4em 0}
}

@media (max-width:640px){
  .csy-tablewrap table,
  .csy-tablewrap thead,
  .csy-tablewrap tbody,
  .csy-tablewrap tr,
  .csy-tablewrap th,
  .csy-tablewrap td{display:block;width:100%}
  .csy-tablewrap thead{display:none}
  .csy-tablewrap tbody tr{
    background:var(--csy-panel);
    border-radius:5px;
    padding:6px 0;
    margin:0 0 10px;
  }
  .csy-tablewrap tbody tr+tr td{box-shadow:none}
  .csy-tablewrap td{padding:8px 14px}
  .csy-tablewrap td::before{
    content:attr(data-label);
    display:block;
    font-family:var(--csy-face-tag);
    font-size:10.5px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--csy-dim);
    margin-bottom:3px;
  }
  .csy-tablewrap td:first-child{font-weight:700}
  .csy-feed__row{grid-template-columns:minmax(0,1fr)}
  .csy-feed time{grid-row:1}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}
/*[/csy:media]*/