@charset "UTF-8";
/* k3-article.css — скин + слой статьи K3 (единственный <style> эталона article.html).
   Кэшируемый статик вместо инлайна single.php; дословно по эталону; кегли в rem (B8).
   В хвосте — k3-доб single (B10) + чипы тегов. */

/* IBM Plex — свои файлы. Было: 2 блокирующих запроса к
   fonts.googleapis.com + fonts.gstatic.com — удар в LCP и риск РФ-доступности (при
   таймауте gstatic текст висит в FOIT). unicode-range сохранён: браузер тянет только
   нужный сабсет — кириллица Sans 400 это 29 KB, а не все 638 KB. */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/IBMPlexMono-400-cyrillic.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(fonts/IBMPlexMono-400-latin.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(fonts/IBMPlexMono-400-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/IBMPlexMono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/IBMPlexMono-500-cyrillic.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(fonts/IBMPlexMono-500-latin.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(fonts/IBMPlexMono-500-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/IBMPlexMono-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/IBMPlexMono-600-cyrillic.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:600;font-display:swap;src:url(fonts/IBMPlexMono-600-latin.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:600;font-display:swap;src:url(fonts/IBMPlexMono-600-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/IBMPlexMono-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/IBMPlexSans-400-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/IBMPlexSans-400-latin.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 Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/IBMPlexSans-400-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/IBMPlexSans-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/IBMPlexSans-500-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/IBMPlexSans-500-latin.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 Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/IBMPlexSans-500-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/IBMPlexSans-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/IBMPlexSans-600-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/IBMPlexSans-600-latin.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 Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/IBMPlexSans-600-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/IBMPlexSans-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/IBMPlexSans-700-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/IBMPlexSans-700-latin.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 Sans';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/IBMPlexSans-700-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/IBMPlexSans-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
:root{
  --paper:#F4F5EF; --card:#FCFCF9; --ink:#1B1D1F; --ink2:#50544A;
  --line:rgba(27,29,31,.16); --line2:rgba(27,29,31,.3);
  --acc:#007C46; --accB:#00A05A; --org:#C04C00; --orgB:#F0611A;
  --dark:#17191B; --dark2:#1F2224; --dink:#E9EBE3; --dink2:#9AA091;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html{font-size:18px}
@media (max-width:640px){html{font-size:17px}}
@media (min-width:1560px){html{font-size:18.5px}}
@media (min-width:1900px){html{font-size:20px}}
@media (min-width:2200px){html{font-size:21px}}
@media (min-width:2400px){html{font-size:22px}}

body{background:var(--paper);color:var(--ink);font:1rem/1.62 "IBM Plex Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
/* K3-SHARED: k3-base-guard — второй рубеж каскада. Первый рубеж —
   позиция: <link> статиков печатается ПОСЛЕ wp_head (header-k3.php). Этот блок держит
   базу скина и против стилей, напечатанных ПОЗЖЕ наших <link> (поздняя печать плагинов
   в wp_footer): body.k3 (body_class всех K3-шаблонов) специфичнее элементного body{}
   любой темы. Дубль в k3-skin.css и k3-article.css байт-в-байт — сверка по маркеру
   (L-016). */
body.k3{background:var(--paper);color:var(--ink);font:1rem/1.62 "IBM Plex Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
/* /K3-SHARED: k3-base-guard */
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
@media (min-width:1560px){.wrap{max-width:1400px}}
@media (min-width:1900px){.wrap{max-width:1640px}}
@media (min-width:2200px){.wrap{max-width:1840px}}
@media (min-width:2400px){.wrap{max-width:2000px}}

/* ── header ─────────────────────────────── */
/* Статусной строки терминала и мачты-справа нет: шапка = логотип + рубрики. */
.masthead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:24px 0 16px}
.logo{font-size:1.7647rem;font-weight:700;letter-spacing:-.02em;line-height:1}
.logo .cur{display:inline-block;width:.42em;height:.74em;background:var(--accB);margin-left:.1em;vertical-align:-.04em}
.nav{border-top:1px solid var(--line);border-bottom:2px solid var(--ink)}
.nav-in{display:flex;align-items:center;flex-wrap:wrap}
.nav-in a{display:inline-flex;align-items:center;min-height:46px;padding:10px 15px;font-size:0.8529rem;font-weight:500}
.nav-in a:hover{background:rgba(0,160,90,.1)}
.cta{margin-left:auto;background:var(--ink);color:#fff !important;font-weight:600;gap:9px}
.cta .sq{width:8px;height:8px;background:var(--accB);flex:none}
.cta:hover{background:var(--acc) !important}

/* ── шапка статьи ──────────────────────── */
.crumbs{padding:13px 0;border-bottom:1px solid var(--line);font:500 0.6471rem/1.5 "IBM Plex Mono",monospace;letter-spacing:.09em;text-transform:uppercase;color:var(--ink2)}
.crumbs a:hover{color:var(--acc);text-decoration:underline}
.chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.chip{border:1px solid var(--ink);padding:5px 9px;font:600 0.7353rem/1 "IBM Plex Sans",system-ui,sans-serif;letter-spacing:.01em}
.chip.upd{color:var(--org);border-color:var(--org)}
.ahero{padding:26px 0 4px}
.ahero h1{font-size:clamp(28px,3.6vw,40px);line-height:1.1;font-weight:700;letter-spacing:-.02em;margin:14px 0 14px}
/* Моно-капс на фразах запрещён: моно — ДАННЫЕ, сан — РЕЧЬ. «Опубликовано: 17.08.2023 ·
   ≈ 11 мин чтения» — это предложение, а не данные; моно-капсом оно кричит и не читается.
   Правило: моно-капс живёт только на токенах (чип, код, число, ярлык ≤2 слов). */
.a-meta{font-size:0.8235rem;line-height:1.6;color:var(--ink2)}
/* ВЫХОДНЫЕ ДАННЫЕ МАТЕРИАЛА — штамп чертежа: кто сделал / кто проверил. В инженерном
   регистре K3 это родная форма, и она же закрывает требование DESIGN.md «E-E-A-T наружу»:
   не «редакция вообще», а роли и люди. */
.byline{display:grid;grid-template-columns:minmax(0,1fr);border:1px solid var(--line2);background:var(--card);margin:20px 0 6px;max-width:560px}
.by-cell{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;align-items:start;padding:11px 12px 12px}
.by-cell+.by-cell{border-left:1px solid var(--line2)}
.by-role{grid-column:1/-1;font:600 0.7059rem/1 "IBM Plex Sans",system-ui,sans-serif;letter-spacing:.01em;color:var(--ink2);padding-bottom:7px;margin-bottom:2px;border-bottom:1px solid var(--line)}
.by-cell .av{width:34px;height:34px;flex:none;background:var(--dark);color:var(--accB);display:flex;align-items:center;justify-content:center;font:600 0.7059rem/1 "IBM Plex Mono",monospace}
.by-cell .av.ed{background:var(--dark2);color:var(--orgB)}
.by-cell .av.ai{background:#E4E7DE;color:var(--ink2);border:1px solid var(--line2)}
.by-cell .av.ph{background:#EDEFE8;border:1px solid var(--line2);padding:0;overflow:hidden}
.by-cell .av.ph img{width:100%;height:100%;object-fit:cover;display:block}
.by-cell .av.ph:hover{outline:2px solid var(--accB);outline-offset:-1px}
.by-name{font-size:0.7941rem;font-weight:600;line-height:1.3}
.by-name a{text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.by-name a:hover{text-decoration-color:var(--accB);text-decoration-thickness:2px}
.by-note{font-size:0.7059rem;color:var(--ink2);line-height:1.4;margin-top:3px}
.by-line{font-size:0.7647rem;line-height:1.55;color:var(--ink2);margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.by-line a{color:var(--acc)}
.by-chk{display:inline-block;font-size:0.6765rem;font-weight:600;color:var(--acc);margin-top:6px;padding-left:13px;background:linear-gradient(var(--accB),var(--accB)) 0 .42em/7px 7px no-repeat}
.hero-cover{max-width:900px;margin:20px 0 0}
.hero-cover .cov{display:block;border:1px solid var(--line2)}
.hero-cover .cov svg{width:100%;height:auto}
.hero-cover figcaption{font:400 0.6471rem/1.6 "IBM Plex Mono",monospace;letter-spacing:.04em;color:var(--ink2);padding:8px 2px 0}

/* ── раскладка ─────────────────────────── */
/* Содержание встаёт СРАЗУ СПРАВА ОТ ШТАМПА: шапка статьи живёт внутри
   текстовой колонки, геройской обложки нет — статья начинается на первом экране. */
.layout{display:grid;grid-template-columns:minmax(0,780px) 380px;gap:56px;justify-content:center;padding:8px 0 10px}

/* Нумерации разделов (01, 02…) нет — только квадрат-маркер:
   он держит ритм раздела, не притворяясь оглавлением. */
.body{max-width:100%;min-width:0;font-size:1.0294rem;line-height:1.72}
.body p{margin:0 0 20px}
.body h2{font-size:1.5294rem;line-height:1.25;font-weight:700;letter-spacing:-.01em;margin:46px 0 18px;padding-top:24px;border-top:1px solid var(--line2)}
.body h2::before{content:"";display:block;width:11px;height:12px;background:var(--accB);margin-bottom:12px}
.body h2.plain::before{content:none;display:none}
.body h3{font-size:1.1176rem;font-weight:600;margin:30px 0 12px}
.body ul,.body ol{margin:0 0 22px;padding-left:24px}
.body li{margin-bottom:10px}
.body li::marker{color:var(--acc);font-weight:600}
.body a{color:var(--acc);text-decoration:underline;text-underline-offset:3px}
.body a:hover{background:rgba(0,160,90,.12)}
.body figure{margin:26px 0}
.body figure img{border:1px solid var(--line)}
/* Поля форм внутри статьи. Их в корпусе всего два поста, и оба K3 не рендерил ни разу —
   гейт W4 поймал переполнение на 390/360: <textarea> с HTML-атрибутом cols держит свою
   ширину в символах (384px при отступе контейнера 16px = правый край 400 при вьюпорте
   390). box-sizing тут не спасает: он делит внутренности, а не ограничивает внешнее.
   Ограничиваем ВСЕ поля, а не только textarea, — input/select приедут теми же граблями. */
.body input,.body select,.body button{max-width:100%}
.body textarea{max-width:100%;width:100%;display:block}
.body form{max-width:100%}
/* Неразрывные длинные строки в тексте: код и URL, вставленные автором прямо в абзац
   (не в <pre>), держат свою ширину и распирают колонку — на 390 это дало +52px, на 360
   +82px. Правило переносит их; настоящие блоки кода прокручиваются сами, а не ломают
   страницу. Форм в корпусе два поста, а таких абзацев — сотни: правило важнее того,
   ради чего гейт запускался. */
.body{overflow-wrap:break-word}
.body pre{overflow-x:auto;max-width:100%}
.body code{overflow-wrap:break-word}
/* Жёсткие ширины из старой разметки. Пилотный гейт 16.08 на прод-K3 показал, что
   переноса строк мало: таблица 677px и врезка темы 680px распирали колонку на 390 до
   +336px. Масштаб по корпусу: таблицы 928 постов (21,2%), width-атрибут ≥100px —
   1315 постов (30,0%), инлайн-ширина ≥100px — 321 пост (7,3%). Ни один из этих постов
   не мог всплыть на канарейке: там 7 таблиц, и все узкие.
   Таблица получает свою прокрутку — она честнее сжатия: колонки остаются читаемыми. */
.body table{display:block;max-width:100%;overflow-x:auto}
.body iframe,.body video,.body embed,.body object{max-width:100%}
.body [width],.body [style*="width"]{max-width:100%}
.body div,.body section,.body figure,.body blockquote,.body aside,.body ul,.body ol{max-width:100%;min-width:0}

/* entity-ссылки: пунктир + квадратный маркер, выдерживают 10+ на статью */
.body a.e{color:inherit;text-decoration:underline dashed;text-decoration-color:var(--accB);text-decoration-thickness:1.5px;text-underline-offset:3.5px}
.body a.e::after{content:"";display:inline-block;width:5px;height:5px;background:var(--accB);margin:0 1px 7px 3px}
.body a.e:hover{background:rgba(0,160,90,.14);text-decoration-style:solid}

/* статус «обновлено» и плашки «Вывод раздела» (.verdict) */
.updated{display:inline-block;border:1px solid var(--org);color:var(--org);padding:5px 10px;font:600 0.6471rem/1 "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}
.updated em{font-style:normal}
/* «Вывод раздела» — тоже фраза, а не данные: моно снят по тому же закону. Плашек семь,
   поэтому вес сбавлен до светлой врезки с зелёной рейкой — акцент, а не семь чёрных пятен. */
.verdict{background:var(--card);color:var(--ink);border:1px solid var(--line2);border-left:5px solid var(--accB);
  padding:14px 18px;font-size:0.9118rem;line-height:1.6;margin:24px 0}
.verdict em{font-style:normal;font-weight:600;color:var(--acc)}

/* таблицы как инженерные таблицы */
.twrap-o{margin:26px 0;border:1px solid var(--line2);position:relative}
.thint{display:none;font:600 0.6176rem/1 "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);padding:9px 12px;border-bottom:1px solid var(--line)}
.twrap-o::after{content:"";display:none;position:absolute;top:0;right:0;bottom:0;width:38px;pointer-events:none;background:linear-gradient(90deg,rgba(244,245,239,0),#F4F5EF 88%)}
.twrap{overflow-x:auto;margin:0;border:0}
.twrap table{border-collapse:collapse;width:100%;min-width:560px;font-size:0.8529rem;line-height:1.5}
.twrap th{font:600 0.6471rem/1.4 "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase;text-align:left;background:#E9EBE1;color:var(--ink);padding:11px 14px;border-bottom:2px solid var(--ink)}
.twrap td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.twrap td:first-child{font-weight:600}
.twrap tr:last-child td{border-bottom:0}
.twrap td+td,.twrap th+th{border-left:1px solid var(--line)}

/* паспорт устройства */
.spec{background:var(--dark);color:var(--dink);margin:28px 0;border:1px solid #000}
.spec-h{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid rgba(255,255,255,.14);font:600 0.6471rem/1.3 "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--dink2)}
.spec-h .sq{width:9px;height:9px;background:var(--accB);display:inline-block;margin-right:9px;vertical-align:-1px}
.spec dl{display:grid;grid-template-columns:170px 1fr}
/* ПАСПОРТ — читаемость. Ярлыки-шёпот (10.5px с разрядкой .1em на тёмном), значения
   14px и разделители на 8% белого не читались бы. Строка вывода (.vrd) — фраза,
   потому сан, не моно. */
.spec dt{font:500 0.7059rem/1.5 "IBM Plex Mono",monospace;letter-spacing:.04em;text-transform:uppercase;color:var(--dink2);padding:12px 0 12px 18px;border-bottom:1px solid rgba(255,255,255,.16)}
.spec dd{font-size:0.9118rem;line-height:1.55;padding:11px 18px 11px 0;border-bottom:1px solid rgba(255,255,255,.16)}
.spec dt:last-of-type,.spec dd:last-of-type{border-bottom:0}
.spec .vrd{color:var(--accB);font-size:0.9118rem;font-weight:600}
/* оценка редакции: инженерная шкала с рисками */
.spec-score{display:grid;grid-template-columns:150px auto minmax(0,1fr);gap:16px;align-items:center;padding:13px 18px;border-top:1px solid rgba(255,255,255,.14)}
.ss-label{font:500 0.6176rem/1.5 "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--dink2)}
.ss-num{font:600 2.1176rem/1 "IBM Plex Mono",monospace;letter-spacing:-.03em;color:var(--accB)}
.ss-num span{font-size:0.7647rem;font-weight:400;color:var(--dink2);letter-spacing:0}
.ss-bar{position:relative;display:block;height:14px;border:1px solid rgba(255,255,255,.35)}
.ss-fill{display:block;height:100%;background:var(--accB)}
.ss-bar::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(10% - 1px),var(--dark) calc(10% - 1px),var(--dark) 10%)}
/* плюсы / минусы */
.spec-pm{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(255,255,255,.14)}
.pm-col{padding:14px 18px 16px}
.pm-col+.pm-col{border-left:1px solid rgba(255,255,255,.14)}
.pm-h{font:600 0.6176rem/1 "IBM Plex Mono",monospace;letter-spacing:.13em;text-transform:uppercase;color:var(--accB);margin-bottom:10px}
.pm-col.minus .pm-h{color:var(--orgB)}
.pm-col ul{list-style:none;margin:0;padding:0}
.pm-col li{position:relative;font-size:0.7647rem;line-height:1.5;padding:4px 0 4px 16px;margin:0}
.pm-col li::before{content:"";position:absolute;left:0;top:10px;width:7px;height:7px;background:var(--accB)}
.pm-col.minus li::before{background:var(--orgB)}

/* врезка «по теме» */
.inset{border:1px solid var(--ink);border-left:5px solid var(--accB);background:var(--card);padding:16px 20px;margin:28px 0}
/* Моно-капс на фразах запрещён. Оставлен только на токенах: чип, код, число,
   ярлык ≤2 слов. Всё, что читается вслух как фраза, набирается саном. */
.inset .ih{font-size:0.7647rem;font-weight:600;color:var(--ink2);margin-bottom:10px}
.inset ul{list-style:none;margin:0;padding:0}
.inset li{margin:0}
.inset a{display:block;padding:7px 0;font-size:0.8824rem;font-weight:500;color:var(--ink);text-decoration:none}
.inset a:hover{text-decoration:underline;text-decoration-color:var(--accB);text-decoration-thickness:2px}

/* источники */
.sources{border-top:2px solid var(--ink);margin-top:44px;padding-top:20px}
.sources .sh{font-size:0.8824rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:12px}
.sources ol{margin:0;padding-left:22px;font-size:0.8235rem;color:var(--ink2)}
.sources li{margin-bottom:8px}

/* ── TOC ───────────────────────────────── */
.toc-wrap{display:block}
/* Сайдбар выше окна, приклеенный верхом, никогда не покажет свой низ — блок
   «Похожие» был бы физически недоступен, сколько ни мотай. Лечение: ограничение по
   высоте окна и собственная прокрутка; скроллбар НЕ прячем — по закону аффордансов
   это главный сигнал, что тут есть продолжение. overscroll-behavior не даёт колесу
   «залипнуть» внутри блока. */
.side{position:sticky;top:22px;padding-top:30px;max-height:calc(100vh - 44px);
  overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
  scrollbar-color:var(--accB) rgba(27,29,31,.10);padding-right:10px}
.side::-webkit-scrollbar{width:8px}
.side::-webkit-scrollbar-track{background:rgba(27,29,31,.08)}
.side::-webkit-scrollbar-thumb{background:var(--accB)}
/* Короткому сайдбару скролл ни к чему — правило включается только когда он реально выше окна. */
@media (min-height:1100px){.side{max-height:none;overflow:visible}}
.toc{border-top:2px solid var(--ink);padding-top:14px}
.toc .th{font:700 0.7647rem/1 "IBM Plex Sans",system-ui,sans-serif;letter-spacing:.01em;color:var(--ink2);margin-bottom:8px}
.toc ol{list-style:none}
.toc li{border-bottom:1px solid var(--line)}
.toc a{display:block;padding:10px 0;font-size:0.8824rem;line-height:1.42;font-weight:500}
.toc a:hover{color:var(--acc)}
/* активный пункт по мере скролла: зелёная рейка слева + чернила вместо серого */
.toc li{position:relative}
.toc li.on::before{content:"";position:absolute;left:-14px;top:6px;bottom:6px;width:3px;background:var(--accB)}
.toc li.on a{color:var(--ink);font-weight:700}
.toc .tmeta{font-size:0.7353rem;line-height:1.6;color:var(--ink2);padding-top:12px}
.toc-m{display:none;border:1px solid var(--ink);background:var(--card);margin:22px 0 0}
.toc-m summary{cursor:pointer;padding:13px 16px;font:600 0.7059rem/1 "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;list-style:none}
.toc-m summary::before{content:"≡ "}
.toc-m ol{list-style:none;padding:2px 16px 12px}
.toc-m a{display:block;padding:9px 0;font-size:0.8235rem;border-top:1px solid var(--line)}

/* ── ПОХОЖИЕ СТАТЬИ — сайдбар, под содержанием ──
   Намеренно другой регистр, чем у нижнего «Читайте также»: внизу витрина с обложками,
   здесь плотный указатель — его читают боковым зрением, не отрываясь от текста.
   Наполнение — соседи по теме (для Budibase это Retool/Appsmith/Neuton: статья их сама
   сравнивает), а не случайная лента: иначе блок декоративен. */
.simil{border-top:2px solid var(--ink);margin-top:28px;padding-top:14px}
.simil .th{font:600 0.6471rem/1 "IBM Plex Mono",monospace;letter-spacing:.13em;text-transform:uppercase;color:var(--ink2);margin-bottom:8px}
.simil ol{list-style:none}
.simil li{border-bottom:1px solid var(--line)}
.simil a{display:block;padding:11px 0}
.simil a:hover .s-t{text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--accB)}
.s-t{display:block;font-size:0.7941rem;line-height:1.4;font-weight:600}
/* Голый заголовок ничего не обещает. Короткое определение превращает сайдбар
   в мини-глоссарий, полезный сам по себе. */
.s-x{display:block;font-size:0.7059rem;line-height:1.45;color:var(--ink2);margin-top:4px}
.s-all{display:inline-flex;align-items:center;min-height:40px;margin-top:8px;font:600 0.8235rem/1 "IBM Plex Sans",system-ui,sans-serif;letter-spacing:0;color:var(--acc);border-bottom:2px solid var(--accB)}
.s-all:hover{background:rgba(0,160,90,.1)}

/* ── читайте также ─────────────────────── */
.shead{display:flex;align-items:baseline;gap:14px;margin:44px 0 16px}
.shead::before{content:"";width:11px;height:11px;background:var(--accB);align-self:center;flex:none}
.shead h2{font-size:1.1176rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
.shead .cnt{font:500 0.6471rem/1 "IBM Plex Mono",monospace;letter-spacing:.1em;color:var(--ink2);white-space:nowrap}
.shead::after{content:"";flex:1;height:1px;background:var(--line2);align-self:center}
/* 3 конкурента, не 4: сетка под реальное число карточек, иначе
   четвёртая ячейка зияет пустотой. Ховер — общий язык интеракции: зелёная рамка. */
.related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;padding-bottom:10px}
.rel{border:1px solid var(--line2);background:var(--card);display:flex;flex-direction:column}
.rel:hover{outline:2px solid var(--accB);outline-offset:-1px}
.rel .cover{border:0;border-bottom:1px solid var(--line)}
.rel h3{padding:11px 13px 13px}
.rel .cover{display:block;border:1px solid var(--line2);background:#EDEFE8}
.rel .cover:hover{outline:2px solid var(--accB);outline-offset:-1px}
.rel h3{font-size:0.9118rem;line-height:1.4;font-weight:600}
.rel h3 a{display:inline-block;padding:3px 0}
.rel h3 a:hover{text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--accB)}

/* ── футер ─────────────────────────────── */
.footer{background:var(--ink);color:#D6D9CE;margin-top:52px}
.footer-in{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding:44px 0 36px}
.footer .fl{font-size:1.2941rem;font-weight:700;color:#fff;margin-bottom:14px}
.footer .fl .cur{display:inline-block;width:.42em;height:.74em;background:var(--accB);margin-left:.1em;vertical-align:-.04em}
.footer p{font-size:0.8824rem;line-height:1.6;color:#B9BDB0;max-width:420px}
.footer .edu{font-size:0.7941rem;line-height:1.6;color:var(--dink2);margin-top:16px}
.footer .fh{font:600 0.6471rem/1 "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--dink2);margin-bottom:14px}
.footer ul{list-style:none}
.footer ul a{display:inline-block;padding:6px 0;font-size:0.8529rem;color:#D6D9CE}
.footer ul a:hover{color:#fff;text-decoration:underline}
.footer .fcta{display:inline-flex;align-items:center;min-height:46px;padding:10px 18px;background:var(--accB);color:var(--dark);font-weight:600;gap:9px}
.footer .fcta .sq{width:8px;height:8px;background:var(--dark)}
.footer .fcta:hover{background:#fff}
.footbar{border-top:1px solid rgba(255,255,255,.14)}
.footbar-in{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 0;font-size:0.7647rem;line-height:1.5;color:var(--dink2)}

/* ── мобайл ────────────────────────────── */
@media (max-width:980px){
  .layout{grid-template-columns:minmax(0,1fr);gap:0}
  /* Сайдбар НЕ прячем целиком: содержание уезжает в .toc-m (details над текстом),
     а «Похожие» обязаны дожить до мобайла — там 54% трафика (DESIGN.md).
     В одноколоночной раскладке aside падает под текст, ровно куда нужно. */
  .toc-wrap{display:block}
  .side{position:static}
  .toc{display:none}
  .simil{margin-top:36px}
  .toc-m{display:block}
  .related{grid-template-columns:1fr 1fr}
  .footer-in{grid-template-columns:1fr;gap:28px}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  .nav-in a{padding:10px 11px;font-size:0.7941rem}
  .cta{width:100%;justify-content:center;margin:6px 0 10px}
  .byline{grid-template-columns:minmax(0,1fr)}
  .by-cell+.by-cell{border-left:0;border-top:1px solid var(--line2)}
  .body{font-size:0.9706rem}
  .body h2{font-size:1.2941rem}
  .thint{display:block}
  .twrap-o::after{display:block}
  .shead h2{white-space:normal;font-size:0.9706rem}
  .shead .cnt{display:none}
  .related{grid-template-columns:1fr}
  .spec dl{grid-template-columns:1fr}
  .spec dt{padding:10px 18px 0;border-bottom:0}
  .spec dd{padding:4px 18px 10px;border-bottom:1px solid rgba(255,255,255,.08)}
  .spec-score{grid-template-columns:auto minmax(0,1fr);gap:10px 16px}
  .ss-label{grid-column:1 / -1}
  .spec-pm{grid-template-columns:1fr}
  .pm-col+.pm-col{border-left:0;border-top:1px solid rgba(255,255,255,.14)}
}

/* ── ТРИ КОЛОННЫ НА ШИРОКОМ ЭКРАНЕ ────────────────────────────────────────────────
   Двумя колонками экран 2560px не заполнить: текст обязан остаться ~780px, а сайдбару
   800px не нужно — разница станет дырой.
   Разносим то, что уже лежит в сайдбаре: СОДЕРЖАНИЕ влево (навигация по статье),
   ПОХОЖИЕ вправо («что дальше»). Новых сущностей не выдумываем.
   display:contents снимает обёртки aside/.side, чтобы .toc и .simil стали треками грида;
   правило живёт в конце файла — выше его перекрывал бы .toc-wrap{display:block}. */
@media (min-width:1900px){
  .layout{grid-template-columns:300px minmax(0,820px) 380px;gap:48px;justify-content:center}
  .body{grid-column:2;grid-row:1}
  .toc-wrap{display:contents}
  .side-l{grid-column:1;grid-row:1}
  .side-r{grid-column:3;grid-row:1}
  .side-l,.side-r{position:sticky;top:22px;align-self:start;padding-top:30px;
    max-height:calc(100vh - 44px);overflow-y:auto;scrollbar-width:thin;
    scrollbar-color:var(--accB) rgba(27,29,31,.10)}
  .side-l::-webkit-scrollbar,.side-r::-webkit-scrollbar{width:8px}
  .side-l::-webkit-scrollbar-thumb,.side-r::-webkit-scrollbar-thumb{background:var(--accB)}
  .simil{margin-top:0}
}
@media (min-width:2200px){
  .layout{grid-template-columns:340px minmax(0,920px) 420px}
}
@media (min-width:2400px){
  .layout{grid-template-columns:360px minmax(0,980px) 440px}
}

/* ── С1: РЕЛЬСЫ-ПОМОЩНИКИ ───────────────────────────────────────────────────────
   Слева — навигация и доверие (содержание, прогресс, кто проверил), справа — что
   дальше (похожие, короткий паспорт, один CTA). Всё собрано из данных, которые уже
   лежат на странице: новых сущностей не заводим. */
.rprog{height:3px;background:var(--line);margin-top:12px;overflow:hidden}
.rprog i{display:block;height:100%;width:100%;background:var(--accB);transform-origin:0 50%;transform:scaleX(0)}
/* Прогресс без JS: бюджет скриптов на сайте — три штуки, четвёртый заводить не за что.
   Браузеры без scroll-timeline просто покажут пустую полоску — деградация безвредна. */
@supports (animation-timeline: scroll()){
  .rprog i{animation:rprog linear both;animation-timeline:scroll(root block)}
  @keyframes rprog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}
@media (prefers-reduced-motion:reduce){ .rprog{display:none} }
.rcheck,.rspec{border-top:2px solid var(--ink);padding-top:14px;margin-top:26px}
.rc-who{display:flex;gap:11px;align-items:center;margin-bottom:9px}
.rc-who img{width:38px;height:38px;object-fit:cover;border:1px solid var(--line2);flex:none}
.rc-who b{display:block;font-size:0.8824rem;line-height:1.25}
.rc-who span{font-size:0.7647rem;color:var(--ink2)}
.rc-note{font-size:0.7941rem;line-height:1.5;color:var(--ink2);margin-bottom:9px}
.rc-a{display:inline-flex;align-items:center;min-height:34px;font-weight:600;font-size:0.8235rem;
  color:var(--acc);border-bottom:2px solid var(--accB)}
.rc-a:hover{background:rgba(0,160,90,.1)}
.rspec dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 12px;margin-bottom:10px}
.rspec dt{font-size:0.7647rem;color:var(--ink2)}
.rspec dd{font-size:0.8235rem;font-weight:500}
.rcta{border:2px solid var(--ink);background:var(--dark);color:var(--dink);padding:16px 17px;margin-top:26px}
.rcta-h{font-weight:700;font-size:0.9412rem;line-height:1.3;margin-bottom:7px}
.rcta-t{font-size:0.8235rem;line-height:1.5;color:var(--dink2);margin-bottom:11px}
.rcta-a{display:inline-flex;align-items:center;min-height:36px;font-weight:600;font-size:0.8529rem;
  color:var(--accB);border-bottom:2px solid var(--accB)}
.rcta-a:hover{background:rgba(0,160,90,.16)}
/* на широком экране рельсы разъезжаются: левый несёт содержание+проверку, правый — остальное */
@media (max-width:1559px){ .rcheck,.rspec,.rcta{max-width:none} }

.fpol{font-size:0.7647rem;color:inherit;opacity:.75;text-decoration:underline;margin-left:18px}
.fpol:hover{opacity:1}
.dnote a{color:inherit;text-decoration:underline}
/* ── k3-доб (B10): колонки «Читайте также» по факту карточек (UI-GUIDE, грабли сетки №2:
      фиксированные колонки при неполном наборе дают полупустой ряд). Классом, не инлайном
      (грабля №3: инлайн перебивает @media). ── */
@media (min-width:981px){
  .related.k3-n1{grid-template-columns:minmax(0,1fr)}
  .related.k3-n2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:641px) and (max-width:980px){
  .related.k3-n1{grid-template-columns:minmax(0,1fr)}
}
/* ── k3-фикс R-1: при <1900 side-l и side-r — соседи в ОДНОЙ колонке грида, а
      базовый .side{position:sticky;top:22px} (написан под единственный .side)
      липнет ОБОИМ на один offset: side-r наезжает на side-l (TOC поверх «Похожих»),
      а их натуральные места наверху колонки дают пустоту; видно только при скролле
      к низу. На ≥1900 display:contents разводит рельсы по своим колонкам — там свой
      sticky легален (правила @1900 ниже по каскаду не тронуты). Лечение: сайдбар выше
      окна = собственная прокрутка, скроллбар не прячем; липкий и скроллируемый —
      КОНТЕЙНЕР .toc-wrap целиком, дети статичны; правило в хвосте файла, чтобы
      перекрыть базовый .side и его min-height-исключение. ── */
@media (min-width:981px) and (max-width:1899px){
  .toc-wrap{position:sticky;top:22px;align-self:start;max-height:calc(100vh - 44px);
    overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
    scrollbar-color:var(--accB) rgba(27,29,31,.10)}
  .toc-wrap::-webkit-scrollbar{width:8px}
  .toc-wrap::-webkit-scrollbar-track{background:rgba(27,29,31,.08)}
  .toc-wrap::-webkit-scrollbar-thumb{background:var(--accB)}
  .side{position:static;max-height:none;overflow:visible}
}

/* ── k3-доб (B10): пер-пост теги single.php — терминальные чипы по
   анатомии .tchip хаб-слоя (рамка line2 + card, зелёный отклик на ховере); кегли в
   rem (B8). Ярлык «Теги» — моно-токен (ярлык ≤2 слов). ── */
.k3-tags{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;border-top:1px solid var(--line);margin-top:36px;padding-top:16px}
.k3-tags .k3-tl{font:600 0.6471rem/1 "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);margin-right:6px}
.k3-tags a{display:inline-flex;align-items:center;border:1px solid var(--line2);background:var(--card);padding:6px 11px;font-size:0.7647rem;color:var(--ink)}
.k3-tags a:hover{border-color:var(--acc);color:var(--acc)}

/* ── k3-доб (B10): штамп с двумя ячейками
   («Проверка фактов» + «Автор» с архивом автора поста) — две колонки на ≥641;
   эталонная граница .by-cell+.by-cell (border-left / border-top на мобиле) уже в
   базовом слое, здесь только раскладка. На ≤640 эталонный мобайл-каскад стекует. ── */
@media (min-width:641px){
  .byline.k3-by2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:640px}
}

/* ── k3-доб (B10): тег-облако футера — ВИДИМЫЙ сайтвайд-блок
   (прод несёт виджет /tag/* на каждой странице; скрытый дубль не копируем). Полоса
   grid-column:1/-1 под тремя колонками мачты; чипы — анатомия .k3-tags в тёмном
   регистре футера; кегли rem (B8); заголовок — общий .fh. Дублируется в хвосте
   k3-skin.css: цепочка article живёт без скина (single грузит только этот файл). ── */
.k3-ftags{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.14);padding-top:24px}
.k3-ftags .fh{margin-bottom:12px}
.k3-ft-in{display:flex;flex-wrap:wrap;gap:8px}
.k3-ftags a{display:inline-flex;align-items:center;border:1px solid rgba(255,255,255,.18);padding:6px 11px;font-size:0.7647rem;color:#D6D9CE}
.k3-ftags a:hover{border-color:var(--accB);color:#fff}