/* Общие блоки статей базы знаний (29.10.2026): мид-СТА, окна кода, калькуляторы, скрины кабинетов,
   графики. Язык главной: тёмные окна с точками и моно-подписью, серые плашки #f5f5f7, синий #2d60fa —
   единственный акцент. Двигаем только transform/opacity. Токены --st-* задаёт блок .article-body статьи. */

@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-mono-cyrillic.woff2") format("woff2");font-weight:400 600;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-mono-latin.woff2") format("woff2");font-weight:400 600;font-display:swap;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}

.article-body{--kb-ink:#0b0b0c;--kb-blue:#2d60fa;--kb-blue-d:#1f47c7;--kb-plate:#f5f5f7;--kb-line:#e6e6ec;--kb-muted:#6f6f78;--kb-w:#0e0e10;--kb-w2:#16161a;--kb-wline:rgba(255,255,255,.09);--kb-wtext:#f2f2f5;--kb-wmuted:#8c8c96;--kb-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;--kb-disp:"Golos Text",system-ui,sans-serif;--kb-ease:cubic-bezier(.16,1,.3,1)}

/* ── точки окна ── */
.kb-dots{display:inline-flex;gap:6px;flex:none}
.kb-dots i{width:10px;height:10px;border-radius:50%;background:#3a3a40}
.kb-dots i:nth-child(1){background:#ff5f57}.kb-dots i:nth-child(2){background:#febc2e}.kb-dots i:nth-child(3){background:#28c840}

/* ── мид-СТА: тёмная плашка + окно с цифрами из кейса ── */
.article-body .kb-mid{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:center;margin:2.6rem 0;padding:30px;border-radius:24px;background:var(--kb-ink);color:#fff;overflow:hidden;isolation:isolate}
.article-body .kb-mid::before{content:"";position:absolute;right:-18%;top:-55%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(45,96,250,.55),rgba(45,96,250,0));z-index:-1;pointer-events:none}
.article-body .kb-mid__kick{display:flex;align-items:center;gap:8px;margin:0 0 12px;font:500 12px/1.2 var(--kb-mono);color:#9fb6ff}
.article-body .kb-mid__kick::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--kb-blue);box-shadow:0 0 0 4px rgba(45,96,250,.28)}
.article-body .kb-mid__t{margin:0;font:700 clamp(1.3rem,2.4vw,1.65rem)/1.12 var(--kb-disp);letter-spacing:-.025em;color:#fff;text-transform:none}
.article-body .kb-mid__x{margin:12px 0 0;font-size:.98rem;line-height:1.5;color:#c9c9d2}
.article-body .kb-mid__btn{display:inline-flex;align-items:center;gap:10px;margin-top:20px;padding:14px 22px;border-radius:999px;background:var(--kb-blue);color:#fff!important;font:700 .95rem/1.1 var(--kb-disp);text-decoration:none!important;box-shadow:0 10px 30px -10px rgba(45,96,250,.75);transition:transform .35s var(--kb-ease),background .3s}
.article-body .kb-mid__btn svg{width:15px;height:15px;flex:none;transition:transform .35s var(--kb-ease)}
.article-body .kb-mid__btn:hover,.article-body .kb-mid__btn:focus-visible{background:var(--kb-blue-d);transform:translateY(-2px)}
.article-body .kb-mid__btn:hover svg{transform:translate(2px,-2px)}
.article-body .kb-mid__win{border-radius:16px;background:var(--kb-w2);border:1px solid var(--kb-wline);overflow:hidden}
.article-body .kb-mid__bar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--kb-wline);font:500 11px/1.2 var(--kb-mono);color:var(--kb-wmuted);min-width:0}
.article-body .kb-mid__bar span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.article-body .kb-mid__rows{padding:6px 16px}
.article-body .kb-mid__row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:11px 0;border-bottom:1px solid var(--kb-wline);font-size:.88rem;color:#c9c9d2}
.article-body .kb-mid__row:last-child{border-bottom:0}
.article-body .kb-mid__row b{font:700 1.05rem/1 var(--kb-disp);color:#fff;white-space:nowrap}
.article-body .kb-mid__row s{color:var(--kb-wmuted);text-decoration-thickness:1px}
.article-body .kb-mid__tile{margin:0 10px 10px;padding:14px 16px;border-radius:12px;background:var(--kb-blue);color:#fff}
.article-body .kb-mid__tile small{display:block;margin-bottom:6px;font:500 11px/1.2 var(--kb-mono);color:#fff}
.article-body .kb-mid__tile b{font:700 1.6rem/1 var(--kb-disp);letter-spacing:-.02em}
@media (max-width:760px){.article-body .kb-mid{grid-template-columns:1fr;gap:22px;padding:24px 20px}.article-body .kb-mid__btn{width:100%;justify-content:center;box-sizing:border-box}}

/* ── окно кода: компактное, копирование, раскрытие ── */
.article-body .kb-code{margin:1.8rem 0;border-radius:16px;background:var(--kb-w);border:1px solid #1f1f25;overflow:hidden;box-shadow:0 24px 50px -30px rgba(11,11,12,.55)}
.article-body .kb-code__bar{display:flex;align-items:center;gap:12px;padding:10px 10px 10px 14px;border-bottom:1px solid var(--kb-wline);min-width:0}
.article-body .kb-code__name{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:500 12px/1.2 var(--kb-mono);color:#d9d9e0}
.article-body .kb-code__meta{flex:none;font:400 11px/1.2 var(--kb-mono);color:var(--kb-wmuted)}
.article-body .kb-code__copy{flex:none;margin-left:auto;display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border:1px solid var(--kb-wline);border-radius:999px;background:rgba(255,255,255,.04);color:#e8e8ee;font:600 12px/1 var(--kb-disp);cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.article-body .kb-code__copy svg{width:13px;height:13px}
.article-body .kb-code__copy:hover,.article-body .kb-code__copy:focus-visible{background:var(--kb-blue);border-color:var(--kb-blue);color:#fff}
.article-body .kb-code__copy.is-done{background:rgba(53,208,127,.14);border-color:rgba(53,208,127,.5);color:#7ee2a8}
.article-body .kb-code__body{position:relative;max-height:var(--kb-h,196px);overflow:hidden;transition:max-height .5s var(--kb-ease)}
.article-body .kb-code__body::after{content:"";position:absolute;left:0;right:0;bottom:0;height:72px;background:linear-gradient(rgba(14,14,16,0),var(--kb-w));pointer-events:none;transition:opacity .3s}
.article-body .kb-code.is-open .kb-code__body::after,.article-body .kb-code.is-short .kb-code__body::after{opacity:0}
.article-body .kb-code pre{margin:0;padding:16px 18px 20px;background:none;border:0;border-radius:0;overflow-x:auto;font:400 13px/1.65 var(--kb-mono);color:#d9d9e0;tab-size:2;-webkit-overflow-scrolling:touch}
.article-body .kb-code pre code{font:inherit;background:none;padding:0;color:inherit;border:0;white-space:pre}
.article-body .kb-code .tk-c{color:#6f7480;font-style:italic}
.article-body .kb-code .tk-s{color:#86e0ad}
.article-body .kb-code .tk-t{color:#8fb0ff}
.article-body .kb-code .tk-a{color:#b9c7ff}
.article-body .kb-code .tk-k{color:#fff;font-weight:600}
.article-body .kb-code .tk-n{color:#f5c56b}
.article-body .kb-code__more{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;border:0;border-top:1px solid var(--kb-wline);background:var(--kb-w2);color:#e8e8ee;font:600 13px/1 var(--kb-disp);cursor:pointer;transition:background .25s,color .25s}
.article-body .kb-code__more svg{width:14px;height:14px;transition:transform .4s var(--kb-ease)}
.article-body .kb-code__more:hover,.article-body .kb-code__more:focus-visible{background:#1d1d23;color:#fff}
.article-body .kb-code.is-open .kb-code__more svg{transform:rotate(180deg)}
.article-body .kb-code.is-short .kb-code__more{display:none}
@media (max-width:640px){.article-body .kb-code__meta{display:none}.article-body .kb-code pre{font-size:12px;padding:14px 14px 18px}.article-body .kb-code__copy span{display:none}.article-body .kb-code__copy{padding:8px}}

/* ── скрины кабинетов: подпись-вывод, на телефоне широкий скрин листается вбок ── */
.article-body .kb-shot{margin:1.8rem 0}
.article-body .kb-shot__win{border-radius:14px;overflow:hidden;border:1px solid rgba(0,0,0,.1);background:#fff;box-shadow:0 18px 40px -28px rgba(11,11,12,.45)}
.article-body .kb-shot__bar{display:flex;align-items:center;gap:10px;padding:9px 14px;background:#f0f0f3;border-bottom:1px solid rgba(0,0,0,.07);font:500 11px/1.2 var(--kb-mono);color:#55555d;min-width:0}
.article-body .kb-shot__bar span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.article-body .kb-shot__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.article-body .kb-shot__scroll img{display:block;width:100%;height:auto;margin:0;border-radius:0}
.article-body .kb-shot figcaption{margin:10px 2px 0;font-size:.85rem;line-height:1.5;color:#5f5f66}
.article-body .kb-shot figcaption a{color:inherit}
.article-body .kb-shot__hint{display:none}
@media (max-width:640px){
 .article-body .kb-shot--wide .kb-shot__scroll img{width:auto;max-width:none;height:var(--kb-mh,300px)}
 .article-body .kb-shot--wide .kb-shot__hint{display:flex;align-items:center;gap:6px;margin-left:auto;flex:none;color:var(--kb-blue-d)}
}
.article-body .kb-shots{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:1.8rem 0}
.article-body .kb-shots .kb-shot{margin:0}
@media (max-width:640px){.article-body .kb-shots{grid-template-columns:1fr}}

/* ── калькулятор: тёмное окно, ползунки, итог и полосы сравнения ── */
.article-body .kb-calc{margin:2rem 0;border-radius:22px;background:var(--kb-w);color:var(--kb-wtext);overflow:hidden;box-shadow:0 30px 60px -36px rgba(11,11,12,.6)}
.article-body .kb-calc__bar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--kb-wline);font:500 12px/1.2 var(--kb-mono);color:var(--kb-wmuted);min-width:0}
.article-body .kb-calc__bar span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.article-body .kb-calc__reset{margin-left:auto;flex:none;padding:6px 11px;border:1px solid var(--kb-wline);border-radius:999px;background:none;color:#d9d9e0;font:500 11px/1 var(--kb-mono);cursor:pointer;transition:background .25s,color .25s}
.article-body .kb-calc__reset:hover,.article-body .kb-calc__reset:focus-visible{background:#fff;color:var(--kb-ink)}
.article-body .kb-calc__grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 28px;padding:20px 22px 8px}
.article-body .kb-r{display:block;padding:10px 0 14px;margin:0;cursor:pointer}
.article-body .kb-r__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}
.article-body .kb-r__l{font-size:.86rem;line-height:1.35;color:#b9b9c3}
.article-body .kb-r__v{flex:none;min-width:5.5em;text-align:right;font:700 1rem/1 var(--kb-disp);color:#fff;font-variant-numeric:tabular-nums}
.article-body .kb-r input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:22px;margin:0;background:none;cursor:pointer;--p:50%}
.article-body .kb-r input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--kb-blue) var(--p),#2c2c33 var(--p))}
.article-body .kb-r input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:#2c2c33}
.article-body .kb-r input[type=range]::-moz-range-progress{height:4px;border-radius:4px;background:var(--kb-blue)}
.article-body .kb-r input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-8px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 5px rgba(45,96,250,.3);transition:transform .2s var(--kb-ease)}
.article-body .kb-r input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 5px rgba(45,96,250,.3)}
.article-body .kb-r input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}
.article-body .kb-r input[type=range]:focus-visible{outline:2px solid var(--kb-blue);outline-offset:4px;border-radius:6px}
.article-body .kb-r__hint{display:block;margin-top:8px;font-size:.76rem;line-height:1.4;color:var(--kb-wmuted)}
.article-body .kb-calc__out{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:8px 16px 16px}
.article-body .kb-o{padding:16px;border-radius:14px;background:var(--kb-w2);border:1px solid var(--kb-wline);min-width:0}
.article-body .kb-o small{display:block;margin-bottom:10px;font:500 11px/1.3 var(--kb-mono);color:var(--kb-wmuted)}
.article-body .kb-o b{display:block;font:700 clamp(1.35rem,2.6vw,1.9rem)/1 var(--kb-disp);letter-spacing:-.025em;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.article-body .kb-o em{display:block;margin-top:8px;font-style:normal;font-size:.76rem;line-height:1.35;color:var(--kb-wmuted)}
.article-body .kb-o--main{background:var(--kb-blue);border-color:var(--kb-blue)}
.article-body .kb-o--main small,.article-body .kb-o--main em{color:#fff}
.article-body .kb-calc__cmp{margin:0 16px 16px;padding:16px 18px;border-radius:14px;background:var(--kb-w2);border:1px solid var(--kb-wline)}
.article-body .kb-bar{display:grid;grid-template-columns:minmax(0,9.5rem) 1fr auto;gap:12px;align-items:center;padding:7px 0;font-size:.82rem;color:#b9b9c3}
.article-body .kb-bar__t{height:10px;border-radius:6px;background:#26262c;overflow:hidden}
.article-body .kb-bar__t i{display:block;height:100%;width:100%;border-radius:6px;background:#5b5b66;transform-origin:0 50%;transform:scaleX(var(--w,.5));transition:transform .6s var(--kb-ease)}
.article-body .kb-bar--b .kb-bar__t i{background:var(--kb-blue)}
.article-body .kb-bar b{font:700 .92rem/1 var(--kb-disp);color:#fff;white-space:nowrap;font-variant-numeric:tabular-nums}
.article-body .kb-calc__note{margin:0;padding:14px 22px 18px;border-top:1px solid var(--kb-wline);font-size:.84rem;line-height:1.5;color:#b9b9c3}
.article-body .kb-calc__note b{color:#fff}
.article-body .kb-calc__note code{background:rgba(255,255,255,.06);color:#d9d9e0;border-radius:5px;padding:1px 5px;font-size:.82em}
@media (max-width:700px){
 .article-body .kb-calc__grid{grid-template-columns:1fr;padding:14px 18px 4px}
 .article-body .kb-calc__out{grid-template-columns:1fr;padding:6px 12px 12px}
 .article-body .kb-o{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 12px}
 .article-body .kb-o small{margin:0}
 .article-body .kb-o em{flex-basis:100%;margin-top:2px}
 .article-body .kb-calc__cmp{margin:0 12px 12px}
 .article-body .kb-bar{grid-template-columns:1fr auto;gap:6px 10px}
 .article-body .kb-bar__t{grid-column:1/-1;grid-row:2}
}
.article-body .kb-o b.tick,.article-body .kb-r__v.tick{opacity:.55}
.article-body .kb-o b,.article-body .kb-r__v{transition:opacity .25s}

/* ── график-полосы (данные рынка) ── */
.article-body .kb-chart{margin:1.8rem 0;padding:22px 22px 18px;border-radius:22px;background:var(--kb-plate)}
.article-body .kb-chart__t{margin:0 0 4px;font:700 1.05rem/1.3 var(--kb-disp);color:var(--kb-ink);letter-spacing:-.01em}
.article-body .kb-chart__s{margin:0 0 16px;font-size:.85rem;line-height:1.45;color:var(--kb-muted)}
.article-body .kb-chart__row{display:grid;grid-template-columns:minmax(0,11rem) 1fr 5.2rem;gap:14px;align-items:center;padding:7px 0;font-size:.9rem;color:#3a3a40}
.article-body .kb-chart__row b{font:700 .95rem/1 var(--kb-disp);color:var(--kb-ink);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.article-body .kb-chart__track{height:12px;border-radius:7px;background:#e3e3ea;overflow:hidden}
.article-body .kb-chart__track i{display:block;height:100%;border-radius:7px;background:#8e8e99;transform-origin:0 50%;transform:scaleX(var(--w))}
.article-body .kb-chart__row--b .kb-chart__track i{background:var(--kb-blue)}
.article-body .kb-chart__row--b b{color:var(--kb-blue)}
.article-body .kb-chart__f{margin:14px 0 0;padding-top:12px;border-top:1px solid #e3e3ea;font-size:.8rem;line-height:1.5;color:var(--kb-muted)}
.st1-anim .article-body .kb-chart .kb-chart__track i{transform:scaleX(0);transition:transform 1.1s var(--kb-ease) calc(var(--i,0)*70ms)}
.st1-anim .article-body .kb-chart.in .kb-chart__track i{transform:scaleX(var(--w))}
@media (max-width:640px){.article-body .kb-chart{padding:18px 16px 14px}.article-body .kb-chart__row{grid-template-columns:1fr auto;gap:6px 10px}.article-body .kb-chart__track{grid-column:1/-1;grid-row:2}}

/* ── слайдер-подтверждение формы (демо) ── */
.article-body .kb-slide{margin:1.8rem 0;padding:24px;border-radius:22px;background:var(--kb-plate)}
.article-body .kb-slide__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center}
.article-body .kb-slide__form{padding:18px;border-radius:16px;background:#fff;box-shadow:0 20px 40px -32px rgba(11,11,12,.5)}
.article-body .kb-slide__f{display:block;margin:0 0 10px;padding:12px 14px;border:1px solid var(--kb-line);border-radius:12px;font-size:.92rem;color:#3a3a40;background:#fafafb}
.article-body .kb-track{position:relative;height:54px;margin-top:14px;border-radius:999px;background:var(--kb-ink);overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.article-body .kb-track__fill{position:absolute;inset:0;background:var(--kb-blue);transform-origin:0 50%;transform:scaleX(0)}
.article-body .kb-track__txt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding-left:40px;font:600 .9rem/1 var(--kb-disp);color:#fff;pointer-events:none;transition:opacity .2s}
.article-body .kb-track__knob{position:absolute;left:5px;top:5px;width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:var(--kb-ink);display:flex;align-items:center;justify-content:center;cursor:grab;touch-action:none;box-shadow:0 6px 16px rgba(0,0,0,.35);will-change:transform}
.article-body .kb-track__knob svg{width:18px;height:18px}
.article-body .kb-track__knob:focus-visible{outline:3px solid #9fb6ff;outline-offset:2px}
.article-body .kb-track.is-done .kb-track__knob{cursor:default;color:var(--kb-blue)}
.article-body .kb-slide__send{display:block;width:100%;margin-top:10px;padding:14px;border:0;border-radius:12px;background:#e9e9ee;color:#9a9aa3;font:700 .92rem/1 var(--kb-disp);cursor:not-allowed;transition:background .3s,color .3s}
.article-body .kb-slide__send:not([disabled]){background:var(--kb-blue);color:#fff;cursor:pointer}
.article-body .kb-slide__log{margin:0;padding:16px 18px;border-radius:16px;background:var(--kb-w);font:400 12.5px/1.7 var(--kb-mono);color:#c9c9d2;min-height:9.5em}
.article-body .kb-slide__log p{margin:0}
.article-body .kb-slide__log .ok{color:#86e0ad}
.article-body .kb-slide__log .no{color:#ff8f87}
.article-body .kb-slide__log .mute{color:#8d93a0}
.article-body .kb-slide__bot{margin-top:12px;padding:10px 14px;border:1px dashed #b9b9c3;border-radius:12px;background:none;color:#3a3a40;font:600 .85rem/1 var(--kb-disp);cursor:pointer;transition:border-color .25s,color .25s}
.article-body .kb-slide__bot:hover,.article-body .kb-slide__bot:focus-visible{border-color:var(--kb-ink);color:var(--kb-ink)}
.article-body .kb-slide__cap{margin:14px 0 0;font-size:.85rem;line-height:1.5;color:#5f5f66}
@media (max-width:700px){.article-body .kb-slide{padding:16px}.article-body .kb-slide__in{grid-template-columns:1fr;gap:14px}}

/* ── шаблон письма в поддержку ── */
.article-body .kb-letter{margin:1.6rem 0;border-radius:18px;background:#fff;border:1px solid var(--kb-line);overflow:hidden}
.article-body .kb-letter__bar{display:flex;align-items:center;gap:12px;padding:10px 10px 10px 16px;background:var(--kb-plate);border-bottom:1px solid var(--kb-line);font:500 12px/1.2 var(--kb-mono);color:#6f6f78}
.article-body .kb-letter__bar span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.article-body .kb-letter__copy{margin-left:auto;flex:none;padding:8px 14px;border:0;border-radius:999px;background:var(--kb-ink);color:#fff;font:600 12px/1 var(--kb-disp);cursor:pointer;transition:background .25s}
.article-body .kb-letter__copy:hover,.article-body .kb-letter__copy:focus-visible{background:var(--kb-blue)}
.article-body .kb-letter__copy.is-done{background:#1f8f55}
.article-body .kb-letter__body{padding:18px 20px;font-size:.93rem;line-height:1.6;color:#2a2a30}
.article-body .kb-letter__body p{margin:0 0 .7rem}
.article-body .kb-letter__body p:last-child{margin:0}
.article-body .kb-letter__body mark{background:var(--kb-blue-t,#eef2ff);color:var(--kb-blue);border-radius:4px;padding:0 4px}

@media (prefers-reduced-motion:reduce){.article-body .kb-code__body,.article-body .kb-bar__t i,.article-body .kb-chart__track i,.article-body .kb-mid__btn{transition:none!important}}

/* ── «Что ещё почитать» стоит вне .article-body: токены нужны и здесь, иначе заголовки карточек
   падают на запасной шрифт. Мета карточки — в одну строку, без переноса просмотров. ── */
.related-articles-section{--st-ink:#0b0b0c;--st-ink2:#3a3a40;--st-muted:#6f6f78;--st-blue:#2d60fa;--st-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;--st-disp:"Golos Text",system-ui,sans-serif;--st-ease:cubic-bezier(.16,1,.3,1)}
.related-articles-section .st1-rel__meta{flex-wrap:nowrap;white-space:nowrap;overflow:hidden}
.related-articles-section .st1-rel__views{margin-left:auto}
@media (max-width:900px){.related-articles-section .st1-rel{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.related-articles-section .st1-rel{grid-template-columns:1fr}}


/* ── узкий скрин на ширину колонки: подложка цвета интерфейса Директа ── */
.article-body .kb-pad .mac-window__body{display:flex;justify-content:center;padding:28px 24px;background:#eff3f8}
.article-body .kb-pad .mac-window__body>a{display:block;width:100%;max-width:560px;line-height:0}
.article-body .kb-pad .mac-window__body img{width:100%;height:auto;border-radius:12px;box-shadow:0 14px 34px -18px rgba(28,40,64,.45)}
@media (max-width:640px){.article-body .kb-pad .mac-window__body{padding:14px 12px}}

/* ── скрины увеличиваются по клику ── */
.article-body .kb-zoom{position:relative;cursor:zoom-in}
.article-body .kb-zoom::after{content:"";position:absolute;right:12px;top:12px;width:34px;height:34px;border-radius:50%;background:rgba(11,11,12,.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M20 20l-4.5-4.5M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E") center/18px no-repeat;opacity:0;transform:scale(.85);transition:opacity .25s,transform .35s var(--kb-ease);pointer-events:none}
.article-body .kb-zoom:hover::after,.article-body .kb-zoom:focus-visible::after{opacity:1;transform:none}
@media (hover:none){.article-body .kb-zoom::after{opacity:.85;transform:none;width:30px;height:30px;right:8px;top:8px;background-size:16px}}
.article-body .kb-zoom:focus-visible{outline:2px solid #2d60fa;outline-offset:3px}

.kb-lb{position:fixed;inset:0;z-index:10050;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:64px 28px 28px;box-sizing:border-box;font-family:"Onest",system-ui,sans-serif}
.kb-lb__bg{position:absolute;inset:0;background:rgba(11,11,12,.9);opacity:0;transition:opacity .35s cubic-bezier(.16,1,.3,1)}
.kb-lb.is-open .kb-lb__bg{opacity:1}
.kb-lb__stage{position:relative;display:flex;align-items:center;justify-content:center;max-width:100%;min-height:0;flex:0 1 auto}
.kb-lb__img{display:block;max-width:min(1500px,100%);max-height:calc(100vh - 160px);width:auto;height:auto;border-radius:14px;background:#fff;box-shadow:0 40px 90px -30px rgba(0,0,0,.7);transform-origin:0 0;will-change:transform}
.kb-lb__cap{position:relative;max-width:820px;margin:16px auto 0;text-align:center;font-size:.92rem;line-height:1.5;color:#d9d9e0;opacity:0;transition:opacity .3s .15s}
.kb-lb.is-open .kb-lb__cap{opacity:1}
.kb-lb__close{position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px);right:calc(env(safe-area-inset-right,0px) + 14px);z-index:2;display:grid;place-items:center;width:46px;height:46px;border:0;border-radius:50%;background:#fff;color:#0b0b0c;cursor:pointer;opacity:0;transform:scale(.8);transition:opacity .25s .1s,transform .4s .1s cubic-bezier(.16,1,.3,1),background .25s,color .25s}
.kb-lb.is-open .kb-lb__close{opacity:1;transform:none}
.kb-lb__close:hover,.kb-lb__close:focus-visible{background:#2d60fa;color:#fff}
.kb-lb__close svg{width:20px;height:20px}
.kb-lb__hint{display:none}
.kb-lb.is-pan{justify-content:flex-start;padding:64px 0 20px}
.kb-lb.is-pan .kb-lb__stage{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;padding:0 16px;box-sizing:border-box}
.kb-lb.is-pan .kb-lb__img{max-width:none;max-height:none;height:min(62vh,var(--nh));width:auto}
.kb-lb.is-pan .kb-lb__hint{display:block;margin:12px 0 0;text-align:center;font:500 12px/1.2 "JetBrains Mono",ui-monospace,monospace;color:#9fb6ff}
.kb-lb.is-pan .kb-lb__cap{padding:0 16px}
html.kb-lb-lock{overflow:hidden}
@media (prefers-reduced-motion:reduce){.kb-lb__bg,.kb-lb__cap,.kb-lb__close{transition:none}}