/* /gx.css — «Справочник» «Чертёж»: нужная часть cx.css (scripts/lib/gx-css.js) + gx.css */
body.cx-page { overflow-x: clip; }
body.cx-page { --cx-w: min(1136px, 100vw - 64px); --cx-nav: 58px; --cx-ease: cubic-bezier(.22, .61, .36, 1); --cx-spring: cubic-bezier(.2, .9, .28, 1.08); }
body.cx-page.id .dp__main { width: var(--cx-w); max-width: none; margin: 0 auto; padding: 8px 0 96px; }
body.cx-page .breadcrumbs { width: var(--cx-w); }
html.cx-navless body.cx-page { --cx-nav: 0px; }
@media (max-width: 720px) { body.cx-page { --cx-w: calc(100vw - 40px); } }
body.cx-page .dp__main :where(h1, h2, h3, p, ul, ol, figure) { margin: 0; }
body.cx-page .dp__main :where(ul, ol) { padding: 0; list-style: none; }
body.cx-page .dp__main :where(a) { color: inherit; text-decoration: none; }
.cx-ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cx-lbl { font-family: var(--id-mono); font-size: 11.5px; font-weight: 500; line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; color: var(--c-t2); }
.cx-lbl b { font-weight: 500; color: var(--c-t1); }
.cx-flag { width: 18px; height: 13px; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px var(--c-edge); object-fit: cover; }
.cx-h1 { font-family: var(--id-sans); font-size: 44px; font-weight: 600; line-height: 1.08; letter-spacing: -.02em; color: var(--c-t1); text-wrap: balance; }
.cx-lead { margin-top: 14px !important; max-width: 34em; font-size: 18px; line-height: 1.5; color: var(--c-t2); text-wrap: pretty; }
@media (max-width: 720px) { .cx-h1 { font-size: 30px; line-height: 1.12; } .cx-lead { font-size: 16px; margin-top: 12px !important; } }
.cx-btn { height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 24px 0 20px; border: 1px solid var(--c-action-edge); border-radius: 13px; background: var(--c-action); color: var(--c-on-action) !important; font-family: var(--id-sans); font-size: 16px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; cursor: pointer; transition: transform .2s var(--cx-spring), box-shadow .2s var(--cx-ease); }
.cx-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(42, 29, 5, .16); }
.cx-btn--line { height: 48px; background: var(--c-surface); border-color: var(--c-edge-2); color: var(--c-t1) !important; font-size: 15.5px; font-weight: 500; }
.cx-btn--line:hover { border-color: var(--c-t1); box-shadow: none; }
.cx-btn--line .cx-lbl { letter-spacing: .02em; }
.cx-btn:focus-visible { outline: 2px solid var(--c-measure); outline-offset: 3px; }
.cx-find { position: relative; align-items: center; max-width: 520px; height: 50px; margin-top: 22px; border: 1px solid var(--c-edge-2); border-radius: 13px; background: var(--c-surface); transition: border-color .2s var(--cx-ease); }
.cx-find:focus-within { border-color: var(--c-t1); }
.cx-find > .cx-ic { position: absolute; left: 15px; color: var(--c-t2); }
.cx-find input { width: 100%; height: 100%; padding: 0 46px; border: 0; border-radius: 13px; background: none; outline: none; font: inherit; font-size: 16px; color: var(--c-t1); }
.cx-find input::placeholder { color: var(--c-t2); opacity: 1; }
.cx-find input::-webkit-search-cancel-button { display: none; }
.cx-find__x { position: absolute; right: 5px; width: 40px; height: 40px; display: none; place-items: center; border: 0; border-radius: 10px; background: none; color: var(--c-t2); cursor: pointer; }
.cx-find.has-q .cx-find__x { display: grid; }
.cx-find__x:hover { color: var(--c-t1); }
.cx-chip { position: relative; z-index: 1; height: 38px; display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; border: 1px solid var(--c-edge-2); border-radius: 999px; background: var(--c-surface); font: inherit; font-size: 14.5px; font-weight: 500; color: var(--c-t1); white-space: nowrap; cursor: pointer; transition: color .25s var(--cx-ease), border-color .2s var(--cx-ease), background-color .2s var(--cx-ease); }
.cx-chip:hover { border-color: var(--c-t1); }
.cx-chip:focus-visible { outline: 2px solid var(--c-measure); outline-offset: 2px; }
.cx-chip__n { font-family: var(--id-mono); font-size: 12px; font-weight: 500; color: var(--c-t2); transition: color .25s var(--cx-ease); }
.cx-chip[aria-pressed="true"] { background: var(--c-t1); border-color: var(--c-t1); color: #fff; transition: color .25s var(--cx-ease), border-color 0s linear .3s, background-color 0s linear .3s; }
.cx-chip[aria-pressed="true"] .cx-chip__n { color: rgba(255, 255, 255, .78); }
.cx-chip--sm { height: 34px; padding: 0 12px 0 10px; font-size: 13.5px; gap: 6px; }
.cx-sz { display: inline-flex; align-items: center; gap: 5px; font-family: var(--id-mono); font-size: 12.5px; font-weight: 500; letter-spacing: .01em; color: var(--c-measure); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cx-sz__f { width: 14px; height: 14px; flex: none; overflow: visible; }
.cx-sz__f rect { fill: var(--c-measure-soft); stroke: var(--c-measure); stroke-width: 1.1; }
.cx-sec { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-top: 14px; margin-bottom: 6px; }
.cx-sec::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1.5px; background: var(--c-t1); transform-origin: 0 50%; }
.cx-sec > :is(h2, h3) { font-family: var(--id-sans); font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -.015em; color: var(--c-t1); }
.cx-sec__n { display: block; margin-bottom: 8px; font-family: var(--id-mono); font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--c-t2); }
.cx-sec .cx-lbl { white-space: nowrap; }
@media (max-width: 720px) { .cx-sec > :is(h2, h3) { font-size: 21px; } }
.cx-kick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13.5px; color: var(--c-t2); }
.cx-kick .cx-lbl { color: var(--c-t2); }
.cx-kick .cx-lbl--news { display: inline-flex; align-items: center; gap: 6px; color: var(--c-t1); }
.cx-kick .cx-lbl--news::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-t1); }
.cx-kick__sep { width: 3px; height: 3px; border-radius: 50%; background: var(--c-t4); }
.cx-kick__c { display: inline-flex; align-items: center; gap: 6px; }
.cx-kick__more { font-family: var(--id-mono); font-size: 12px; }
@media (max-width: 720px) { .cx-kick { font-size: 12.5px; } }
.cx-js [data-rv]:not(.is-in) { opacity: .85; transform: translateY(8px); }
.cx-js [data-rv] { transition: opacity .5s var(--cx-ease), transform .5s var(--cx-ease); transition-delay: var(--d, 0s); }
.cx-js .cx-sec:not(.is-in)::before { transform: scaleX(0); }
.cx-js .cx-sec::before { transition: transform .7s var(--cx-ease); }
.cx-js .cx-dwg:not(.is-in) :is(.fdw__frame, .fdw__dim, .fdw__ext, .fdw__tick) { stroke-dasharray: 1; stroke-dashoffset: 1; }
.cx-js .cx-dwg:not(.is-in) :is(.fdw__lab, .fdw__lab2, .fdw__band, .fdw__ghost-g, .fdw__spec-g) { opacity: 0; }
.cx-js .cx-dwg.is-in .fdw__frame { stroke-dasharray: 1; animation: cx-draw .55s var(--cx-ease) var(--dd, 0s) both; }
.cx-js .cx-dwg.is-in :is(.fdw__dim, .fdw__ext, .fdw__tick) { stroke-dasharray: 1; animation: cx-draw .5s var(--cx-ease) calc(.2s + var(--dd, 0s)) both; }
.cx-js .cx-dwg.is-in :is(.fdw__lab, .fdw__lab2) { animation: cx-fade .35s var(--cx-ease) calc(.55s + var(--dd, 0s)) both; }
.cx-js .cx-dwg.is-in .fdw__band { animation: cx-fade .35s var(--cx-ease) calc(.45s + var(--dd, 0s)) both; }
.cx-js .cx-dwg.is-in :is(.fdw__spec-g, .fdw__ghost-g) { animation: cx-fade .45s var(--cx-ease) calc(.12s + var(--dd, 0s)) both; }
.cx-stamp { position: absolute; width: 104px; height: 104px; color: var(--c-measure); transform: rotate(-12deg); opacity: .9; pointer-events: none; }
.cx-stamp svg { width: 100%; height: 100%; mix-blend-mode: multiply; }
.cx-stamp__shadow, .cx-stamp__ripple { position: absolute; inset: 0; border-radius: 50%; opacity: 0; }
.cx-stamp__shadow { background: radial-gradient(closest-side, rgba(16, 18, 20, .28), transparent); }
.cx-stamp__ripple { box-shadow: 0 0 0 2px var(--c-measure); }
.cx-stamp__ink { position: absolute; inset: 0; }
.cx-js .cx-stamp:not(.is-in) .cx-stamp__ink { opacity: 0; }
.cx-fin { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 36px; margin-top: 72px; padding: 26px 34px 26px 26px; border: 1.5px solid var(--c-t1); background: var(--c-surface); }
.cx-fin__art { position: relative; width: 148px; }
.cx-fin__art .cx-dwg svg { display: block; width: 100%; height: auto; }
.cx-fin__stamp { right: -40px; bottom: -14px; width: 92px; height: 92px; }
.cx-fin h2 { font-family: var(--id-sans); font-size: 28px; font-weight: 600; line-height: 1.15; letter-spacing: -.02em; color: var(--c-t1); text-wrap: balance; }
.cx-fin p { margin-top: 10px !important; max-width: 36em; font-size: 16px; line-height: 1.5; color: var(--c-t2); }
@media (max-width: 860px) { .cx-fin { grid-template-columns: auto minmax(0, 1fr); row-gap: 18px; column-gap: 24px; padding: 22px 20px; } .cx-fin .cx-btn { grid-column: 1 / -1; width: 100%; } }
@media (max-width: 720px) { .cx-fin { grid-template-columns: minmax(0, 1fr); margin-top: 52px; } .cx-fin__art { width: 124px; } .cx-fin__stamp { right: -30px; bottom: -10px; width: 72px; height: 72px; } .cx-fin h2 { font-size: 21px; } .cx-fin p { font-size: 15px; } }
.cx-js .is-flash { animation: cx-flash 1.6s var(--cx-ease); }
.fq-ask { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; margin-top: 56px; padding: 24px 26px; background: var(--c-t1); border-radius: 14px; color: #F5F5F3; }
.fq-ask::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url(/brand/tolpa.svg) 0 0 / 300px auto repeat; filter: invert(1); mix-blend-mode: lighten; opacity: .8; -webkit-mask-image: linear-gradient(100deg, transparent 30%, #000 95%); mask-image: linear-gradient(100deg, transparent 30%, #000 95%); }
.fq-ask__mark { width: 64px; height: 64px; filter: invert(1); }
.fq-ask h2 { font-family: var(--id-sans); font-size: 21px; font-weight: 600; color: #fff; }
.fq-ask p { margin-top: 4px !important; font-size: 15px; line-height: 1.5; color: rgba(245, 245, 243, .82); }
.fq-ask p a { color: #fff; border-bottom: 1px solid rgba(245, 245, 243, .45); }
.fq-ask p a:hover { border-color: #fff; }
.fq-ask__btn { height: 48px; display: inline-flex; align-items: center; gap: 9px; padding: 0 18px; border: 1px solid rgba(245, 245, 243, .4); border-radius: 13px; color: #fff; font-size: 15.5px; font-weight: 600; transition: border-color .2s var(--cx-ease), background-color .2s var(--cx-ease); }
.fq-ask__btn .cx-ic { width: 18px; height: 18px; }
.fq-ask__btn:hover { border-color: #fff; background: rgba(255, 255, 255, .06); }
@media (max-width: 720px) { .fq-ask { grid-template-columns: auto minmax(0, 1fr); padding: 20px; } .fq-ask__btn { grid-column: 1 / -1; justify-content: center; } .fq-ask__mark { width: 52px; height: 52px; } }
body.cx-page .sticky-cta { display: none !important; }
.cx-bar { display: none; }
@media (max-width: 1080px) { .cx-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(245, 245, 243, .96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-top: 1px solid var(--c-edge-2); transform: translateY(110%); transition: transform .35s var(--cx-ease); } .cx-bar.is-on { transform: none; } .cx-bar__t { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--c-t1); } .cx-bar__mk { width: 18px; height: 18px; flex: none; } .cx-bar .cx-btn { height: 44px; padding: 0 16px; font-size: 15px; } }
@keyframes cx-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes cx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cx-flash { 0%, 30% { background: rgba(16, 18, 20, .06); box-shadow: -12px 0 0 rgba(16, 18, 20, .06), 12px 0 0 rgba(16, 18, 20, .06); } 100% { background: transparent; box-shadow: none; } }
/* ══════════════════════════════════════════════════════════════════════
   «Справочник» в «Чертеже» (шаг 8, 02.10.2026) — хаб /{lang}/guides/ и страницы-статьи
   /{lang}/guides/** (статья правил, опорная страница страны, разбор отказа, словарь).
   Утверждённый макет: internal-docs/redesign-concepts-2026-09-23/step8-guides/.
   Разметка — src/content-v2/gx-view.js (хаб собирает guide-pages.js, статьи — кожа
   scripts/lib/guide-skin.js), движение — cx-motion.js (page: 'guide').
   Грузится ПОСЛЕ /cx.css (общие cx-* — кнопки, финал, печать, рамки, чипы, поле поиска).
   Пространство .gx-*. Цвета только --c-*: синь — размеры, прогресс и фокус; янтарь — одна
   кнопка на экран (внизу страницы). Движения — из книги стиля, раздел 12: вычерчивание,
   проявка, печать; один раз и по делу. Состояние «до показа» держит контраст (текст не
   гаснет), при «меньше движения» (нет html.cx-js) всё сразу на месте.
   Каждый селектор получает префикс body.gx-page (специфичность выше сброса cx.css
   `body.cx-page .dp__main :where(h1, h2, p …) { margin: 0 }`).
   ══════════════════════════════════════════════════════════════════════ */

body.gx-page .gx-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
body.gx-page .dp__main { position: relative; isolation: isolate; }
body.gx-page .gx-tlink { border-bottom: 1px solid var(--c-edge-2); transition: border-color .2s var(--cx-ease); }
body.gx-page .gx-tlink:hover { border-color: var(--c-t1); }
body.gx-page .gx-btn { height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 24px 0 20px; border: 1px solid var(--c-t1); border-radius: 13px; background: var(--c-t1); color: #fff; font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; cursor: pointer; transition: transform .2s var(--cx-spring), box-shadow .2s var(--cx-ease); }
body.gx-page .gx-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(16, 18, 20, .22); }
body.gx-page .gx-btn:focus-visible { outline: 2px solid var(--c-measure); outline-offset: 3px; }
body.gx-page .gx-btn .cx-ic { width: 20px; height: 20px; }
body.gx-page .cx-bar .gx-btn { height: 44px; padding: 0 16px; font-size: 15px; }

/* миллиметровка под первым экраном: синяя, едва заметная, растворяется к краям */
body.gx-page .gx-bg { position: absolute; left: 0; right: 0; top: 0; height: 600px; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(45, 91, 216, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(45, 91, 216, .055) 1px, transparent 1px); background-size: 24px 24px; background-position: center top;
  -webkit-mask-image: radial-gradient(48% 70% at 82% 30%, #000 0, transparent 74%); mask-image: radial-gradient(48% 70% at 82% 30%, #000 0, transparent 74%); }
body.gx-page .gx-hub > .gx-bg { height: 640px; -webkit-mask-image: radial-gradient(52% 78% at 78% 34%, #000 0, transparent 74%); mask-image: radial-gradient(52% 78% at 78% 34%, #000 0, transparent 74%); }

/* ── страница-статья: первый экран ── */
body.gx-page .gx-head { display: grid; grid-template-columns: minmax(0, 1fr) 340px; column-gap: 56px; align-items: start; }
body.gx-page .gx-h { padding-top: 6px; }
body.gx-page .gx-topic { display: inline-flex; align-items: center; gap: 6px; color: var(--c-t1); }
body.gx-page .gx-topic::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-t1); }
body.gx-page .gx-h .cx-kick { font-size: 14px; }
body.gx-page .gx-h1 { margin-top: 12px; font-size: 38px; line-height: 1.12; }
body.gx-page .gx-h1-flag { display: inline-block; vertical-align: .06em; margin-right: 10px; }
body.gx-page .gx-lead { margin-top: 16px; max-width: 40em; font-size: 18px; line-height: 1.55; color: var(--c-t1); text-wrap: pretty; }
body.gx-page .gx-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 14px; font-family: var(--id-mono); font-size: 12.5px; color: var(--c-t2); }
body.gx-page .gx-meta time { font-variant-numeric: tabular-nums; }
/* время чтения / число разделов — размерная линия с засечками, как размер на чертеже */
body.gx-page .gx-dim { display: inline-flex; align-items: center; gap: 9px; color: var(--c-measure); font-variant-numeric: tabular-nums; }
body.gx-page .gx-dim i { position: relative; display: block; width: 56px; height: 1px; background: var(--c-measure); transform-origin: 0 50%; }
body.gx-page .gx-dim i::before, body.gx-page .gx-dim i::after { content: ""; position: absolute; top: -4px; width: 1px; height: 9px; background: var(--c-measure); }
body.gx-page .gx-dim i::before { left: 0; }
body.gx-page .gx-dim i::after { right: 0; }
body.gx-page .gx-dim b { font-weight: 500; }
.cx-js body.gx-page .gx-dim i { transform: scaleX(0); transition: transform .7s var(--cx-ease) .35s; }
.cx-js body.gx-page .gx-dim.is-in i { transform: scaleX(1); }
.cx-js body.gx-page .gx-dim:not(.is-in) b { opacity: .85; }
body.gx-page .gx-art { padding-top: 6px; }
body.gx-page .gx-tocm { display: none; }

/* «так / не так» из пиктограмм книги стиля — картинка первого экрана вместо обложки */
body.gx-page .gx-pk { padding: 16px 16px 14px; background: var(--c-surface); border: 1px solid var(--c-edge-2); border-radius: 14px; box-shadow: 0 18px 44px rgba(16, 18, 20, .06); }
body.gx-page .gx-pk__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
body.gx-page .gx-pk__it { position: relative; margin: 0 !important; }
body.gx-page .gx-pk__it img, body.gx-page .gx-pk__wide { display: block; width: 100%; height: auto; border-radius: 9px; box-shadow: 0 0 0 1px var(--c-edge-2); background: #fff; }
body.gx-page .gx-pk__wide { margin-top: 10px; }
body.gx-page .gx-pk__it figcaption { display: flex; align-items: center; gap: 6px; margin-top: 7px; font-size: 13.5px; font-weight: 600; color: var(--c-t1); }
body.gx-page .gx-pk__it figcaption i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-good); }
body.gx-page .gx-pk__it--no figcaption i { background: var(--c-bad); }
.cx-js body.gx-page .gx-pk:not(.is-in) img { filter: grayscale(1) blur(3px) brightness(1.12); opacity: .55; }
.cx-js body.gx-page .gx-pk img { transition: filter 1s var(--cx-ease), opacity 1s var(--cx-ease); }
.cx-js body.gx-page .gx-pk.is-in .gx-pk__it--no img { transition-delay: .15s; }
/* карточка формата: чертёж, размер синим, доля головы; без кнопки — это справка */
body.gx-page .gx-fc { padding: 16px 16px 14px; background: var(--c-surface); border: 1px solid var(--c-edge-2); border-radius: 14px; box-shadow: 0 18px 44px rgba(16, 18, 20, .08); }
body.gx-page .gx-fc__h { display: flex; align-items: center; gap: 8px; margin-top: 2px !important; font-size: 15.5px; font-weight: 600; }
body.gx-page .gx-fc__flag { width: 20px; height: 14px; }
body.gx-page .gx-fc__h .cx-sz { margin-left: auto; font-size: 13px; }
body.gx-page .gx-fc .cx-dwg { margin: 6px -4px 2px; }
body.gx-page .gx-fc .cx-dwg svg { display: block; width: 100%; height: auto; max-height: 240px; }
body.gx-page .gx-fc__row { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--c-edge-2); font-size: 13.5px; color: var(--c-t2); }
body.gx-page .gx-fc__row a { font-weight: 600; color: var(--c-t1); border-bottom: 1px solid var(--c-edge-2); }
body.gx-page .gx-fc__row a:hover { border-color: var(--c-t1); }

/* ── раскладка: текст и колонка справа ── */
body.gx-page .gx-grid { display: grid; grid-template-columns: minmax(0, 720px) 300px; justify-content: space-between; column-gap: 64px; padding-top: 44px; }
body.gx-page .gx-col { min-width: 0; }
body.gx-page .gx-rail { position: relative; }
body.gx-page .gx-rail__in { position: sticky; top: calc(var(--cx-nav) + 30px); display: flex; flex-direction: column; gap: 22px; transition: top .25s cubic-bezier(.32, .72, .18, 1); }
/* оглавление: синяя размерная линия растёт по мере чтения */
body.gx-page .gx-toc { position: relative; padding: 0 0 26px 26px; }
body.gx-page .gx-toc > .cx-lbl { display: block; margin-bottom: 10px; }
body.gx-page .gx-toc ol { display: flex; flex-direction: column; gap: 2px; }
body.gx-page .gx-toc a { display: grid; grid-template-columns: 24px minmax(0, 1fr); padding: 4px 0; font-size: 13.5px; line-height: 1.32; color: var(--c-t2); transition: color .2s var(--cx-ease); }
body.gx-page .gx-toc a span { font-family: var(--id-mono); font-size: 11.5px; padding-top: 1px; }
body.gx-page .gx-toc a:hover, body.gx-page .gx-toc a.is-on { color: var(--c-t1); }
body.gx-page .gx-toc a.is-on { font-weight: 600; }
body.gx-page .gx-toc__line { position: absolute; left: 6px; top: 30px; bottom: 34px; width: 1px; background: rgba(45, 91, 216, .22); }
body.gx-page .gx-toc__line i { position: absolute; left: -.5px; top: 0; width: 2px; height: calc(var(--p, 0) * 100%); background: var(--c-measure); transition: height .15s linear; }
body.gx-page .gx-toc__line::before, body.gx-page .gx-toc__line::after { content: ""; position: absolute; left: -4px; width: 9px; height: 1.3px; background: var(--c-measure); transform: rotate(-45deg); }
body.gx-page .gx-toc__line::before { top: 0; }
body.gx-page .gx-toc__line::after { bottom: 0; }
body.gx-page .gx-toc__pct { position: absolute; left: 0; bottom: 0; font-family: var(--id-mono); font-size: 11px; color: var(--c-measure); font-variant-numeric: tabular-nums; }
/* карточка справа: тихая, но заметная — кнопка цвета туши (янтарь — одна, внизу страницы) */
body.gx-page .gx-rq { padding: 16px; background: var(--c-surface); border: 1px solid var(--c-edge-2); border-radius: 14px; }
body.gx-page .gx-rq p { margin-top: 8px !important; font-size: 14px; line-height: 1.45; color: var(--c-t2); }
body.gx-page .gx-rq__btn { width: 100%; height: 46px; margin-top: 12px; font-size: 15px; }
body.gx-page .gx-rq .gx-rq__free { margin-top: 8px !important; font-size: 12.5px; text-align: center; }

/* ── текст статьи ── */
body.gx-page .gx-prose { font-size: 18px; line-height: 1.65; color: var(--c-t1); }
body.gx-page .gx-prose p { margin: 0 0 18px; text-wrap: pretty; }
body.gx-page .gx-prose h3 { margin: 30px 0 10px; font-family: var(--id-sans); font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--c-t1); }
body.gx-page .gx-prose a { color: var(--c-t1); border-bottom: 1px solid rgba(16, 18, 20, .35); transition: border-color .2s var(--cx-ease); }
body.gx-page .gx-prose a:hover { border-color: var(--c-t1); }
body.gx-page .gx-prose strong { font-weight: 600; }
body.gx-page .gx-prose ul { margin: 0 0 20px; }
body.gx-page .gx-prose ul li { position: relative; padding-left: 24px; margin-bottom: 9px; }
body.gx-page .gx-prose ul li::before { content: ""; position: absolute; left: 2px; top: .8em; width: 11px; height: 1.5px; background: var(--c-t1); }
body.gx-page .gx-prose ol:not(.gx-refs) { counter-reset: gx-ol; margin: 0 0 20px; }
body.gx-page .gx-prose ol:not(.gx-refs) li { counter-increment: gx-ol; position: relative; padding-left: 40px; margin-bottom: 12px; }
body.gx-page .gx-prose ol:not(.gx-refs) li::before { content: counter(gx-ol, decimal-leading-zero); position: absolute; left: 0; top: .2em; font-family: var(--id-mono); font-size: 12.5px; font-weight: 500; color: var(--c-t2); }
body.gx-page .gx-prose .gx-cards a, body.gx-page .gx-prose .gx-rel a, body.gx-page .gx-prose .gx-tlink, body.gx-page .gx-prose .gx-qa a { border-bottom: 0; }
body.gx-page .gx-prose .gx-tlink { border-bottom: 1px solid var(--c-edge-2); }
body.gx-page .gx-prose .gx-qa__a a, body.gx-page .gx-prose .gx-tb a, body.gx-page .gx-prose .gx-tbl a { border-bottom: 1px solid rgba(16, 18, 20, .35); }
body.gx-page .gx-slead { margin: 0 0 18px; font-size: 18px; line-height: 1.6; color: var(--c-t2); text-wrap: pretty; }
body.gx-page .gx-sec { scroll-margin-top: 96px; }
body.gx-page .gx-sec > h2 { margin: 0 0 16px; font-family: var(--id-sans); font-size: 27px; font-weight: 600; line-height: 1.2; letter-spacing: -.018em; color: var(--c-t1); text-wrap: balance; scroll-margin-top: 96px; }
/* номер раздела: цифра и тонкая линия вправо (как «12 — Движение» в книге стиля) */
body.gx-page .gx-n { display: flex; align-items: center; gap: 12px; margin: 58px 0 14px !important; font-family: var(--id-mono); font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--c-t2); }
body.gx-page .gx-n i { flex: 1; height: 1px; background: linear-gradient(90deg, var(--c-edge-2) 0, var(--c-edge) 70%, transparent); transform-origin: 0 50%; }
body.gx-page .gx-answer + .gx-sec .gx-n { margin-top: 50px !important; }
.cx-js body.gx-page .gx-n i { transform: scaleX(0); transition: transform .9s var(--cx-ease) .1s; }
.cx-js body.gx-page .gx-n.is-in i { transform: scaleX(1); }
/* краткий ответ: заметка на полях чертежа, тушевая черта слева вычерчивается сверху вниз */
body.gx-page .gx-answer { position: relative; margin: 0 0 8px; padding: 20px 24px 6px; background: var(--c-surface); border: 1px solid var(--c-edge-2); border-left: 1px solid var(--c-edge-2); }
body.gx-page .gx-answer::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px; background: var(--c-t1); transform-origin: 0 0; }
.cx-js body.gx-page .gx-answer::before { transform: scaleY(0); transition: transform .7s var(--cx-ease) .1s; }
.cx-js body.gx-page .gx-answer.is-in::before { transform: scaleY(1); }
body.gx-page .gx-answer__k { margin-bottom: 8px !important; font-size: 11.5px; line-height: 1.4; }
body.gx-page .gx-answer__h { margin: 0 0 10px; font-family: var(--id-sans); font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -.018em; color: var(--c-t1); text-wrap: balance; }
body.gx-page .gx-answer p:not(.gx-answer__k) { margin: 0 0 14px; font-size: 17.5px; line-height: 1.6; }

/* картинка-схема внутри статьи */
body.gx-page .gx-fig { margin: 8px 0 26px; }
body.gx-page .gx-fig img { display: block; max-width: 100%; height: auto; }
body.gx-page .gx-fig figcaption { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--c-t2); }

/* таблицы: строки под чертой, подписи колонок моно-капсом, размеры синим */
body.gx-page .gx-tbl { margin: 8px 0 26px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
body.gx-page .gx-tbl:focus-visible { outline: 2px solid var(--c-measure); outline-offset: 3px; border-radius: 4px; }
body.gx-page .gx-tbl table { min-width: 560px; } /* вид — общий блок «Чертёжные таблицы» (/style.css) */
body.gx-page .gx-tbl tbody td:first-child { font-weight: 600; }
body.gx-page .gx-tbl tbody tr { transition: background-color .2s var(--cx-ease); }
body.gx-page .gx-sz { font-family: var(--id-mono); font-size: .9em; font-weight: 500; color: var(--c-measure); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* спецификация и маршрут подачи — основная надпись формата (книга стиля) */
body.gx-page .gx-tbw { margin: 8px 0 26px; overflow-x: auto; }
body.gx-page .gx-tb { width: 100%; }
body.gx-page .gx-tb th { width: 128px; }
body.gx-page .gx-tb tbody tr:first-child td strong { font-family: var(--id-mono); font-size: 14px; font-weight: 500; color: var(--c-measure); }
body.gx-page .gx-tb tfoot td { padding: 11px 14px 12px; border-top: 1.5px solid var(--c-t1); font-size: 13.5px; color: var(--c-t2); }
body.gx-page .gx-tb tfoot td > * { vertical-align: middle; }
body.gx-page .gx-tb tfoot b { font-weight: 600; color: var(--c-t1); }
body.gx-page .gx-tb__av { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-right: 10px; border-radius: 50%; background: var(--c-bg, #f5f5f3); box-shadow: 0 0 0 1px var(--c-edge-2); color: var(--c-t1); }
body.gx-page .gx-tb__av svg { width: 20px; height: 20px; }
body.gx-page .gx-cite { font-size: .75em; color: var(--c-measure); border-bottom: 0 !important; }
body.gx-page .gx-ext { overflow-wrap: anywhere; }
/* кнопка действия внутри раздела («Переснять фото →»): спокойная, как cx-btn--line; янтарь — одна кнопка внизу страницы */
body.gx-page .gx-prose a.gx-go { display: inline-flex; align-items: center; min-height: 44px; margin: 4px 0 8px; padding: 0 18px; border: 1px solid var(--c-edge-2); border-radius: 12px; background: var(--c-surface); font-size: 15.5px; font-weight: 600; color: var(--c-t1); transition: border-color .2s var(--cx-ease), transform .2s var(--cx-spring); }
body.gx-page .gx-prose a.gx-go:hover { border-color: var(--c-t1); transform: translateY(-1px); }
/* строки таблиц и надписи появляются по очереди, как будто их вычерчивают (текст не гаснет) */
.cx-js body.gx-page .gx-tbl:not(.is-in) tbody tr, .cx-js body.gx-page .gx-tbw:not(.is-in) tbody tr { opacity: .85; transform: translateY(6px); }
.cx-js body.gx-page .gx-tbl tbody tr, .cx-js body.gx-page .gx-tbw tbody tr { transition: opacity .45s var(--cx-ease) calc(var(--i, 0) * 55ms), transform .45s var(--cx-ease) calc(var(--i, 0) * 55ms), background-color .2s var(--cx-ease); }
.cx-js body.gx-page .gx-tbl:not(.is-in) thead th { border-bottom-color: transparent; }
body.gx-page .gx-tbl thead th { transition: border-color .6s var(--cx-ease); }

/* шаги: цифра в круге заливается тушью, когда шаг доходит до экрана; синяя размерная линия ведёт вниз */
body.gx-page .gx-steps { margin: 6px 0 26px; }
body.gx-page .gx-step { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; padding-bottom: 26px; }
body.gx-page .gx-step::before { content: ""; position: absolute; left: 21.5px; top: 48px; bottom: 4px; width: 1px; background: rgba(45, 91, 216, .28); transform-origin: 0 0; }
body.gx-page .gx-step:last-child { padding-bottom: 6px; }
body.gx-page .gx-step:last-child::before { display: none; }
body.gx-page .gx-step__n { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--c-surface); box-shadow: inset 0 0 0 1.5px var(--c-t1); font-family: var(--id-mono); font-size: 14px; font-weight: 500; color: var(--c-t1); transition: background-color .4s var(--cx-ease), color .4s var(--cx-ease), box-shadow .4s var(--cx-ease); }
body.gx-page .gx-prose .gx-step h3 { margin: 6px 0 6px; font-size: 19px; }
body.gx-page .gx-prose .gx-step p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--c-t2); }
body.gx-page .gx-prose .gx-step p + p { margin-top: 10px; }
body.gx-page .gx-step--flat::before { display: none; }
body.gx-page .gx-step--flat { padding: 18px 0; border-top: 1px solid var(--c-edge-2); }
body.gx-page .gx-step--flat:first-child { border-top: 1.5px solid var(--c-t1); }
body.gx-page .gx-step--flat .gx-step__n { font-size: 13px; }
.cx-js body.gx-page .gx-step:not(.is-in) .gx-step__n { box-shadow: inset 0 0 0 1.5px var(--c-edge-2); color: var(--c-t2); }
.cx-js body.gx-page .gx-step.is-in .gx-step__n { background: var(--c-t1); color: #fff; box-shadow: inset 0 0 0 1.5px var(--c-t1); }
.cx-js body.gx-page .gx-step::before { transform: scaleY(0); transition: transform .6s var(--cx-ease) .15s; }
.cx-js body.gx-page .gx-step.is-in::before { transform: scaleY(1); }

/* вопросы */
body.gx-page .gx-qa { margin: 6px 0 18px; border-top: 1.5px solid var(--c-t1); }
body.gx-page .gx-qa__row { border-bottom: 1px solid var(--c-edge-2); }
body.gx-page .gx-qa__row > summary { position: relative; display: flex; align-items: flex-start; gap: 16px; padding: 18px 44px 18px 0; cursor: pointer; list-style: none; font-size: 17.5px; font-weight: 600; line-height: 1.35; letter-spacing: -.012em; color: var(--c-t1); }
body.gx-page .gx-qa__row > summary::-webkit-details-marker { display: none; }
body.gx-page .gx-qa__row > summary:hover .gx-qa__q { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
body.gx-page .gx-qa__row > summary:focus-visible { outline: 2px solid var(--c-measure); outline-offset: 2px; }
body.gx-page .gx-qa__n { flex: none; min-width: 26px; padding-top: 3px; font-family: var(--id-mono); font-size: 12px; font-weight: 500; color: var(--c-t2); }
body.gx-page .gx-qa__mk { position: absolute; right: 4px; top: 22px; width: 18px; height: 18px; }
body.gx-page .gx-qa__mk::before, body.gx-page .gx-qa__mk::after { content: ""; position: absolute; left: 2px; right: 2px; top: 8.25px; height: 1.5px; background: var(--c-t1); border-radius: 1px; transition: transform .35s var(--cx-ease); }
body.gx-page .gx-qa__mk::after { transform: rotate(90deg); }
body.gx-page .gx-qa__row[open] .gx-qa__mk::after { transform: rotate(0deg); }
body.gx-page .gx-qa__a { padding: 0 44px 22px 42px; font-size: 16.5px; line-height: 1.62; color: var(--c-t2); }
body.gx-page .gx-qa__a p { margin: 0 0 10px; }
.cx-js body.gx-page .gx-qa__row[open] .gx-qa__a { animation: gx-develop .42s var(--cx-ease) both; }
@keyframes gx-develop { from { opacity: 0; transform: translateY(-4px); filter: blur(1.5px); } to { opacity: 1; transform: none; filter: none; } }

/* источники одним нумерованным списком */
body.gx-page .gx-refs { counter-reset: gx-rf; margin: 0 0 8px; border-top: 1.5px solid var(--c-t1); }
body.gx-page .gx-prose .gx-refs li { counter-increment: gx-rf; display: grid; grid-template-columns: 40px minmax(0, 1fr); margin: 0; padding: 13px 0; border-bottom: 1px solid var(--c-edge-2); font-size: 15.5px; line-height: 1.45; color: var(--c-t1); }
body.gx-page .gx-prose .gx-refs li::before { content: "[" counter(gx-rf) "]"; position: static; padding-top: 2px; font-family: var(--id-mono); font-size: 12.5px; color: var(--c-t2); }
body.gx-page .gx-refs a { overflow-wrap: anywhere; }
body.gx-page .gx-refs-note { margin-top: 14px; font-size: 14px; color: var(--c-t2); }

/* связанные: строки со стрелкой */
body.gx-page .gx-rel { margin: 4px 0 24px; border-top: 1.5px solid var(--c-t1); }
body.gx-page .gx-rel a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--c-edge-2); font-size: 16.5px; line-height: 1.4; font-weight: 500; transition: background-color .2s var(--cx-ease); }
body.gx-page .gx-rel a .cx-ic { width: 18px; height: 18px; flex: none; color: var(--c-t2); transition: transform .3s var(--cx-spring), color .2s var(--cx-ease); }
body.gx-page .gx-rel a:hover { background: rgba(255, 255, 255, .6); }
body.gx-page .gx-rel a:hover .cx-ic { transform: translateX(3px); color: var(--c-t1); }

/* карточки-строки: слева пиктограмма или флаг в круге */
body.gx-page .gx-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; margin-top: 12px; }
body.gx-page .gx-prose .gx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; margin-top: 6px; }
body.gx-page .gx-card { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 16px 26px 16px 0; border-top: 1px solid var(--c-edge-2); color: var(--c-t1); }
body.gx-page .gx-card[hidden] { display: none; }
body.gx-page .gx-card__ic { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--c-surface); box-shadow: inset 0 0 0 1px var(--c-edge-2); color: var(--c-t1); overflow: hidden; transition: background-color .25s var(--cx-ease), color .25s var(--cx-ease); }
body.gx-page .gx-card__ic .cx-ic { width: 22px; height: 22px; }
body.gx-page .gx-card__ic--flag { position: relative; background: none; box-shadow: none; }
body.gx-page .gx-card__ic--flag img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; transition: transform .35s var(--cx-spring); }
body.gx-page .gx-card__ic--flag::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--c-edge-2); }
body.gx-page .gx-card__body { min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-top: 1px; }
body.gx-page .gx-card__t { font-size: 16.5px; line-height: 1.3; font-weight: 600; letter-spacing: -.012em; text-wrap: pretty; }
body.gx-page .gx-card__d { font-size: 14.5px; line-height: 1.45; font-weight: 400; color: var(--c-t2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: pretty; }
body.gx-page .gx-card__m { margin-top: 2px; font-family: var(--id-mono); font-size: 12px; font-weight: 400; color: var(--c-t2); }
body.gx-page .gx-card::after { content: ""; position: absolute; right: 2px; top: 26px; width: 16px; height: 16px; opacity: 0; transform: translateX(-4px); transition: opacity .2s var(--cx-ease), transform .3s var(--cx-spring);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101214' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 16px no-repeat; }
body.gx-page .gx-card:focus-visible { outline: 2px solid var(--c-measure); outline-offset: -2px; }
@media (hover: hover) {
  body.gx-page .gx-card:hover .gx-card__t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
  body.gx-page .gx-card:hover .gx-card__ic:not(.gx-card__ic--flag) { background: var(--c-t1); color: #fff; }
  body.gx-page .gx-card:hover .gx-card__ic--flag img { transform: scale(1.08); }
  body.gx-page .gx-card:hover::after { opacity: 1; transform: none; }
}
/* «показать все N» — родной details, ссылки остаются в разметке */
body.gx-page .gx-more { display: flex; flex-direction: column; margin-top: 2px; }
body.gx-page .gx-more > summary { align-self: flex-start; order: 2; display: inline-flex; align-items: center; gap: 8px; height: 40px; margin-top: 10px; padding: 0 14px 0 16px; border: 1px solid var(--c-edge-2); border-radius: 999px; background: var(--c-surface); font-size: 14.5px; font-weight: 500; color: var(--c-t1); cursor: pointer; list-style: none; transition: border-color .2s var(--cx-ease); }
body.gx-page .gx-more > summary::-webkit-details-marker { display: none; }
body.gx-page .gx-more > summary:hover { border-color: var(--c-t1); }
body.gx-page .gx-more > summary:focus-visible { outline: 2px solid var(--c-measure); outline-offset: 2px; }
body.gx-page .gx-more > summary .cx-ic { width: 16px; height: 16px; transition: transform .3s var(--cx-ease); }
body.gx-page .gx-more[open] > summary .cx-ic { transform: rotate(180deg); }
body.gx-page .gx-more__o { display: none; }
body.gx-page .gx-more[open] .gx-more__o { display: inline; }
body.gx-page .gx-more[open] .gx-more__c { display: none; }
body.gx-page .gx-more > .gx-cards { order: 1; margin-top: 0; }
body.gx-page .gx-more[open] > .gx-cards { animation: gx-develop .42s var(--cx-ease) both; }

/* страны: поиск по списку */
body.gx-page .gx-cwrap { margin: 0 0 10px; }
body.gx-page .gx-cfind { max-width: none; height: 46px; margin: 6px 0 4px; }
body.gx-page .gx-cwrap__none { display: none; padding: 16px 0; font-size: 16px; color: var(--c-t2); }
body.gx-page .gx-cwrap.is-none .gx-cwrap__none { display: block; }
body.gx-page .gx-prose .gx-more { margin: 0 0 20px; }

/* читайте дальше */
body.gx-page .gx-next { padding-top: 64px; }
body.gx-page .gx-next .cx-sec { margin-bottom: 0; }
body.gx-page .gx-next__all { border-bottom: 1px solid var(--c-edge-2); }
body.gx-page .gx-next__all:hover { color: var(--c-t1); border-color: var(--c-t1); }
body.gx-page .gx-prose .glossary-az__nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 24px; }
body.gx-page .gx-prose .glossary-az__letter { display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 8px; border: 1px solid var(--c-edge-2); border-radius: 8px; font-family: var(--id-mono); font-size: 13px; color: var(--c-t1); }
body.gx-page .gx-prose .glossary-az__letter:hover { background: var(--c-t1); border-color: var(--c-t1); color: #fff; }

/* ── хаб: первый экран ── */
body.gx-page .gx-hh { display: grid; grid-template-columns: minmax(0, 1fr) 420px; column-gap: 64px; align-items: center; padding-top: 16px; }
body.gx-page .gx-hh__t { padding-bottom: 36px; }
body.gx-page .gx-hh__t .cx-h1 { margin-top: 12px; }
body.gx-page .gx-hh__a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-bottom: 6px; }
body.gx-page .gx-hh__a .cx-dwg { width: 100%; max-width: 420px; }
body.gx-page .gx-hh__a .cx-dwg svg { display: block; width: 100%; height: auto; }
body.gx-page .gx-find { display: flex; position: relative; align-items: center; max-width: 520px; height: 50px; margin-top: 22px; border: 1px solid var(--c-edge-2); border-radius: 13px; background: var(--c-surface); transition: border-color .2s var(--cx-ease); }
body.gx-page .gx-find:focus-within { border-color: var(--c-t1); }
body.gx-page .gx-find > .cx-ic { position: absolute; left: 15px; color: var(--c-t2); }
body.gx-page .gx-find input { width: 100%; height: 100%; padding: 0 18px 0 46px; border: 0; border-radius: 13px; background: none; outline: none; font: inherit; font-size: 16px; color: var(--c-t1); }
body.gx-page .gx-find input::placeholder { color: var(--c-t2); opacity: 1; }
body.gx-page .gx-find input::-webkit-search-cancel-button { display: none; }
body.gx-page .gx-find:focus-within .gx-often { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 18px 0 0; }
body.gx-page .gx-often__row { display: flex; flex-wrap: wrap; gap: 6px; }
body.gx-page .gx-often__row a { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 10px; border: 1px solid var(--c-edge-2); border-radius: 999px; background: var(--c-surface); font-size: 13.5px; font-weight: 500; color: var(--c-t1); white-space: nowrap; transition: background-color .2s var(--cx-ease), color .2s var(--cx-ease), border-color .2s var(--cx-ease); }
@media (hover: hover) { body.gx-page .gx-often__row a:hover { background: var(--c-t1); border-color: var(--c-t1); color: #fff; } }
/* фильтры — свернуты: старый поиск с фасетами остаётся, но не загромождает первый экран */
body.gx-page .gx-facets { margin-top: 14px; }
body.gx-page .gx-facets > summary { display: inline-flex; align-items: center; gap: 6px; font-family: var(--id-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--c-t2); cursor: pointer; list-style: none; }
body.gx-page .gx-facets > summary::-webkit-details-marker { display: none; }
body.gx-page .gx-facets > summary .cx-ic { width: 14px; height: 14px; transition: transform .3s var(--cx-ease); }
body.gx-page .gx-facets[open] > summary .cx-ic { transform: rotate(180deg); }
body.gx-page .gx-facets__row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
body.gx-page .guidesx-facets__label { font-family: var(--id-mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--c-t2); margin-right: 2px; }
body.gx-page .guidesx-facet { appearance: none; cursor: pointer; height: 32px; padding: 0 13px; border: 1px solid var(--c-edge-2); border-radius: 999px; background: var(--c-surface); color: var(--c-t1); font: inherit; font-size: 13.5px; font-weight: 500; transition: background-color .2s var(--cx-ease), color .2s var(--cx-ease), border-color .2s var(--cx-ease); }
body.gx-page .guidesx-facet:hover { border-color: var(--c-t1); }
body.gx-page .guidesx-facet.is-active { background: var(--c-t1); border-color: var(--c-t1); color: #fff; }
/* результаты поиска — на месте полок, пока идёт поиск */
body.gx-page .gx-res { display: none; margin: 18px 0 0; max-width: 680px; }
body.gx-page .gx-hub.is-searching .gx-res { display: block; }
body.gx-page .gx-hub.is-searching :is(.gx-doors, .gx-groups, .gx-rows, .gx-ask, .gx-hh__a) { display: none; }
body.gx-page .gx-hub.is-searching .gx-hh { grid-template-columns: minmax(0, 1fr); }
body.gx-page .guidesx-results__count { margin: 0 0 8px; font-family: var(--id-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--c-t1); }
body.gx-page .guidesx-results__empty { margin: 8px 0; font-size: 16px; color: var(--c-t2); }
body.gx-page .guidesx-result { display: block; padding: 13px 12px; margin: 0 -12px; border-bottom: 1px solid var(--c-edge-2); border-radius: 8px; color: var(--c-t1); }
body.gx-page .guidesx-result__b { display: inline-block; margin: 0 0 4px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--c-edge-2); background: var(--c-surface); font-family: var(--id-mono); font-size: 11px; color: var(--c-t2); }
body.gx-page .guidesx-result__t { display: block; font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; }
body.gx-page .guidesx-result__d { display: block; margin-top: 3px; font-size: 14px; line-height: 1.45; color: var(--c-t2); }
body.gx-page .guidesx-result:hover, body.gx-page .guidesx-result.is-active { background: var(--c-surface); }
body.gx-page .guidesx-result.is-active { box-shadow: inset 0 0 0 2px var(--c-measure); }

/* основная надпись под чертежом: формат, голова, образец — клетки заполняются по очереди */
body.gx-page .gx-tbs { display: grid; grid-template-columns: 1.1fr 1fr 1fr; width: 100%; max-width: 420px; margin-top: 6px; background: var(--c-surface); border: 1.5px solid var(--c-t1); }
body.gx-page .gx-tbs__c { padding: 9px 12px 10px; border-left: 1px solid var(--c-edge-2); }
body.gx-page .gx-tbs__c:first-child { border-left: 0; }
body.gx-page .gx-tbs__c .cx-lbl { display: block; font-size: 10.5px; }
body.gx-page .gx-tbs__c b { display: block; margin-top: 3px; font-family: var(--id-mono); font-size: 15px; font-weight: 500; color: var(--c-measure); white-space: nowrap; }
body.gx-page .gx-tbs__c b.gx-tx { font-family: var(--id-sans); font-size: 14.5px; font-weight: 600; color: var(--c-t1); }
.cx-js body.gx-page .gx-tbs:not(.is-in) .gx-tbs__c { opacity: .85; }
.cx-js body.gx-page .gx-tbs .gx-tbs__c { transition: opacity .45s var(--cx-ease) calc(.35s + var(--c, 0) * 140ms); }

/* «двери» по задаче: метка, пара «так / не так», заголовок */
body.gx-page .gx-doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; padding-top: 6px; }
body.gx-page .gx-door { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 18px 0 6px; color: var(--c-t1); }
body.gx-page .gx-door::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1.5px; background: var(--c-t1); transform-origin: 0 50%; }
.cx-js body.gx-page .gx-door::before { transform: scaleX(0); transition: transform .7s var(--cx-ease) var(--d, 0s); }
.cx-js body.gx-page .gx-door.is-in::before { transform: scaleX(1); }
body.gx-page .gx-door__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
body.gx-page .gx-door__n { font-family: var(--id-mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--c-t2); }
body.gx-page .gx-door__t { display: block; font-family: var(--id-sans); font-size: 23px; font-weight: 600; line-height: 1.18; letter-spacing: -.02em; }
body.gx-page .gx-door p { max-width: 25em; margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--c-t2); text-wrap: pretty; }
body.gx-page .gx-door__meta { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; font-family: var(--id-mono); font-size: 12.5px; color: var(--c-t2); }
body.gx-page .gx-door__go { display: inline-flex; align-items: center; gap: 6px; color: var(--c-t1); font-weight: 500; }
body.gx-page .gx-door__go .cx-ic { width: 18px; height: 18px; transition: transform .3s var(--cx-spring); }
@media (hover: hover) {
  body.gx-page .gx-door:hover .gx-door__t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
  body.gx-page .gx-door:hover .gx-door__go .cx-ic { transform: translateY(3px); }
  body.gx-page .gx-door:hover .gx-pkp img:first-child { transform: translateY(-4px) rotate(-3deg); }
  body.gx-page .gx-door:hover .gx-pkp img:last-child { transform: translateY(-4px) rotate(3deg); }
}
/* пара «так / не так» — маленькая: проявляется из серого, как фото в ванночке */
body.gx-page .gx-pkp { display: inline-flex; gap: 8px; flex: none; }
body.gx-page .gx-pkp img { width: 54px; height: auto; border-radius: 8px; box-shadow: 0 0 0 1px var(--c-edge-2); background: #fff; transition: filter 1s var(--cx-ease), opacity 1s var(--cx-ease), transform .45s var(--cx-spring); }
body.gx-page .gx-pkp--s img { width: 46px; border-radius: 7px; }
.cx-js body.gx-page .gx-pkp:not(.is-in) img { filter: grayscale(1) blur(3px) brightness(1.12); opacity: .55; }
.cx-js body.gx-page .gx-pkp.is-in img:last-child { transition-delay: .12s; }

/* группы и полки */
body.gx-page .gx-grp__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-top: 84px; }
body.gx-page .gx-grp__h h2 { margin: 0; font-family: var(--id-sans); font-size: 34px; font-weight: 600; line-height: 1.1; letter-spacing: -.024em; color: var(--c-t1); }
body.gx-page .gx-grp__h .cx-lbl { white-space: nowrap; }
/* линейка под названием группы: деления каждые 8 px, длинные — каждые 40; вычерчивается слева направо */
body.gx-page .gx-rule { flex: 1 0 100%; display: block; height: 15px; margin-top: 6px; border-bottom: 1px solid rgba(45, 91, 216, .5); overflow: hidden; }
body.gx-page .gx-rule i { display: block; height: 100%; transform-origin: 0 50%; opacity: .5;
  background: repeating-linear-gradient(90deg, var(--c-measure) 0 1px, transparent 1px 8px) left bottom / 100% 6px no-repeat, repeating-linear-gradient(90deg, var(--c-measure) 0 1px, transparent 1px 40px) left bottom / 100% 13px no-repeat; }
.cx-js body.gx-page .gx-rule i { transform: scaleX(0); transition: transform 1.1s var(--cx-ease); }
.cx-js body.gx-page .gx-rule.is-in i { transform: scaleX(1); }
body.gx-page .gx-shelf { padding-top: 52px; scroll-margin-top: 96px; }
body.gx-page .gx-grp__h + .gx-shelf { padding-top: 30px; }
body.gx-page .gx-shelf .cx-sec > h2 { display: flex; align-items: baseline; gap: 12px; }
body.gx-page .gx-shelf__n { font-family: var(--id-mono); font-size: 13px; font-weight: 500; color: var(--c-t2); letter-spacing: .02em; transition: color .3s var(--cx-ease); }
body.gx-page .gx-shelf:target .gx-shelf__n { color: var(--c-measure); }
body.gx-page .gx-shelf:target .cx-sec::before { background: var(--c-measure); }
body.gx-page .gx-shelf__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
body.gx-page .gx-shelf__lead { max-width: 42em; margin: 6px 0 2px; font-size: 16px; line-height: 1.5; color: var(--c-t2); }
body.gx-page .gx-see { margin-top: 14px; font-size: 14.5px; }
/* форматы в одном масштабе */
body.gx-page .gx-same { margin: 18px 0 0; padding: 18px 20px 16px; background: var(--c-surface); border: 1px solid var(--c-edge-2); border-radius: 14px; }
body.gx-page .gx-same__h { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
body.gx-page .gx-same__row { display: flex; align-items: flex-end; justify-content: space-around; gap: 10px; padding-top: 10px; }
body.gx-page .gx-same__it { flex: 0 1 auto; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
body.gx-page .gx-same__it svg { display: block; width: 100%; height: auto; max-width: 190px; }
body.gx-page .gx-same__cap { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0 !important; text-align: center; font-size: 13.5px; color: var(--c-t2); }
body.gx-page .gx-same__cap b { color: var(--c-t1); font-weight: 600; font-size: 14.5px; }
/* нижние строки хаба: по странам, словарь */
body.gx-page .gx-rows { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 28px; }
body.gx-page .gx-rows + .gx-rows { margin-top: 14px; }
body.gx-page .gx-rows a:not(.cx-chip) { border-bottom: 1px solid var(--c-edge-2); font-weight: 500; }
body.gx-page .gx-rows a:not(.cx-chip):hover { border-color: var(--c-t1); }
body.gx-page .gx-ask { margin-top: 44px; }

@media (max-width: 1080px) {
  body.gx-page .gx-head { display: flex; flex-direction: column; align-items: stretch; }
  body.gx-page .gx-h { order: 1; }
  body.gx-page .gx-art { order: 2; margin-top: 22px; padding-top: 0; }
  body.gx-page .gx-tocm { order: 3; }
  body.gx-page .gx-grid { grid-template-columns: minmax(0, 1fr); }
  body.gx-page .gx-rail { display: none; }
  body.gx-page .gx-tocm { display: block; margin-top: 24px; border-top: 1.5px solid var(--c-t1); border-bottom: 1px solid var(--c-edge-2); }
  body.gx-page .gx-tocm summary { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; cursor: pointer; list-style: none; }
  body.gx-page .gx-tocm summary::-webkit-details-marker { display: none; }
  body.gx-page .gx-tocm ol { padding: 0 0 12px; }
  body.gx-page .gx-tocm a { display: grid; grid-template-columns: 30px 1fr; padding: 7px 0; font-size: 15px; color: var(--c-t1); }
  body.gx-page .gx-tocm a span { font-family: var(--id-mono); font-size: 12px; color: var(--c-t2); }
  body.gx-page .gx-hh { grid-template-columns: minmax(0, 1fr) 340px; column-gap: 40px; }
  body.gx-page .gx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.gx-page .gx-doors { column-gap: 24px; }
  body.gx-page .gx-door__t { font-size: 21px; }
}
@media (min-width: 700px) and (max-width: 1080px) {
  body.gx-page .gx-art .gx-fc { display: grid; grid-template-columns: 240px minmax(0, 1fr); column-gap: 32px; padding: 18px 24px; }
  body.gx-page .gx-art .gx-fc > * { grid-column: 2; }
  body.gx-page .gx-art .gx-fc > .cx-dwg { grid-column: 1; grid-row: 1 / span 4; align-self: center; margin: 0; }
}
@media (max-width: 860px) {
  body.gx-page .gx-hh { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  body.gx-page .gx-hh__a { display: none; }
  body.gx-page .gx-doors { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  body.gx-page .gx-door { padding: 16px 0 14px; display: grid; grid-template-columns: 100px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; }
  body.gx-page .gx-door__top { grid-row: 1 / span 3; flex-direction: column; align-items: flex-start; }
  body.gx-page .gx-door__n { display: none; }
  body.gx-page .gx-door .gx-pkp img { width: 44px; }
  body.gx-page .gx-bg { height: 420px; }
}
@media (max-width: 720px) {
  body.gx-page .gx-h1 { font-size: 28px; }
  body.gx-page .gx-lead { font-size: 17px; }
  body.gx-page .gx-slead { font-size: 17px; }
  body.gx-page .gx-prose { font-size: 17px; }
  body.gx-page .gx-prose .gx-step p { font-size: 16px; }
  body.gx-page .gx-step { grid-template-columns: 38px minmax(0, 1fr); column-gap: 14px; }
  body.gx-page .gx-step__n { width: 38px; height: 38px; }
  body.gx-page .gx-step::before { left: 18.5px; top: 42px; }
  body.gx-page .gx-sec > h2 { font-size: 22px; }
  body.gx-page .gx-n { margin-top: 46px !important; }
  body.gx-page .gx-answer { padding: 16px 16px 2px; }
  body.gx-page .gx-answer__h { font-size: 19px; }
  body.gx-page .gx-answer p:not(.gx-answer__k) { font-size: 17px; }
  body.gx-page .gx-qa__row > summary { font-size: 16.5px; padding: 16px 36px 16px 0; gap: 10px; }
  body.gx-page .gx-qa__a { padding: 0 0 20px 36px; font-size: 15.5px; }
  body.gx-page .gx-cards, body.gx-page .gx-prose .gx-cards { grid-template-columns: minmax(0, 1fr); }
  body.gx-page .gx-card { padding-right: 0; }
  body.gx-page .gx-card::after { display: none; }
  body.gx-page .gx-tb th { width: 104px; padding-left: 10px; }
  body.gx-page .gx-grp__h { margin-top: 64px; }
  body.gx-page .gx-grp__h h2 { font-size: 26px; }
  body.gx-page .gx-shelf__top { flex-direction: column; align-items: flex-start; gap: 10px; }
  body.gx-page .gx-pkp img { width: 48px; }
  body.gx-page .gx-hh__a { display: none; }
  body.gx-page .gx-hh__t { padding-bottom: 20px; }
  body.gx-page .gx-often { display: block; margin-top: 14px; }
  body.gx-page .gx-often > .cx-lbl { display: none; }
  body.gx-page .gx-often__row { flex-wrap: nowrap; overflow-x: auto; min-width: 0; margin: 0 -20px; padding: 0 20px 2px; scrollbar-width: none; }
  body.gx-page .gx-often__row a { flex: none; }
  body.gx-page .gx-often__row::-webkit-scrollbar { display: none; }
  body.gx-page .gx-same { padding: 14px 10px; }
  body.gx-page .gx-same__row { gap: 4px; }
  body.gx-page .gx-same__h .cx-lbl + .cx-lbl { display: none; }
  body.gx-page .gx-same__cap b { font-size: 12px; }
  body.gx-page .gx-same__cap span { display: none; }
}