/*
 * Внешние страницы блога /blog — серверный HTML, без React.
 * Перенос макета sredaupravleniya-docs/biblioteka-2026-10-28/maket/{Main,Article,Mobile}.dc.html
 * (одобрен Кириллом 28.10). Значения — токены канона: блок :root ниже
 * повторяет packages/design/src/tokens.css, расхождение ловит
 * tests/Feature/BlogPublic/BlogAssetsTest.php. Шрифты — свои копии
 * packages/design/src/assets/fonts (там же сверка содержимого).
 * Движение — только transform/opacity; скрытая вкладка ставит всё на паузу
 * (blog.js, класс is-paused), prefers-reduced-motion — всё стоит.
 */
@font-face{font-family:"Inter"/* uikit-ok: имя гарнитуры в @font-face; выбор Inter записан в DESIGN.md 19.08.2026 */;font-weight:400;font-display:swap;size-adjust:97%;src:url("/blog/_/fonts/inter-400-cyrillic.woff2") format("woff2");unicode-range:U+0000-0040,U+005B-0060,U+007B-00BF,U+00D7,U+00F7,U+02BB-02DC,U+0300-0329,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2000-206F,U+2116,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF}
@font-face{font-family:"Inter"/* uikit-ok: имя гарнитуры в @font-face */;font-weight:400;font-display:swap;size-adjust:97%;src:url("/blog/_/fonts/inter-400-latin.woff2") format("woff2");unicode-range:U+0041-005A,U+0061-007A,U+00C0-00D6,U+00D8-00F6,U+00F8-00FF,U+0102-0103,U+0131,U+0152-0153}
@font-face{font-family:"Inter"/* uikit-ok: имя гарнитуры в @font-face */;font-weight:600;font-display:swap;size-adjust:97%;src:url("/blog/_/fonts/inter-600-cyrillic.woff2") format("woff2");unicode-range:U+0000-0040,U+005B-0060,U+007B-00BF,U+00D7,U+00F7,U+02BB-02DC,U+0300-0329,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2000-206F,U+2116,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF}
@font-face{font-family:"Inter"/* uikit-ok: имя гарнитуры в @font-face */;font-weight:600;font-display:swap;size-adjust:97%;src:url("/blog/_/fonts/inter-600-latin.woff2") format("woff2");unicode-range:U+0041-005A,U+0061-007A,U+00C0-00D6,U+00D8-00F6,U+00F8-00FF,U+0102-0103,U+0131,U+0152-0153}
@font-face{font-family:"Onest";font-weight:800;font-display:swap;size-adjust:107%;src:url("/blog/_/fonts/onest-800-cyrillic.woff2") format("woff2");unicode-range:U+0000-0040,U+005B-0060,U+007B-00BF,U+00D7,U+00F7,U+02BB-02DC,U+0300-0329,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2000-206F,U+2116,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF}
@font-face{font-family:"Onest";font-weight:800;font-display:swap;size-adjust:107%;src:url("/blog/_/fonts/onest-800-latin.woff2") format("woff2");unicode-range:U+0041-005A,U+0061-007A,U+00C0-00D6,U+00D8-00F6,U+00F8-00FF,U+0102-0103,U+0131,U+0152-0153}
@font-face{font-family:"JetBrains Mono";font-weight:400;font-display:swap;src:url("/blog/_/fonts/jetbrains-400-cyrillic.woff2") format("woff2");unicode-range:U+0000-0040,U+005B-0060,U+007B-00BF,U+00D7,U+00F7,U+02BB-02DC,U+0300-0329,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2000-206F,U+2116,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF}
@font-face{font-family:"JetBrains Mono";font-weight:400;font-display:swap;src:url("/blog/_/fonts/jetbrains-400-latin.woff2") format("woff2");unicode-range:U+0041-005A,U+0061-007A,U+00C0-00D6,U+00D8-00F6,U+00F8-00FF,U+0102-0103,U+0131,U+0152-0153}

:root{
  --page:#efefed;
  --white:#fff;
  --ink:#0f1113;
  --mute:#63666c;
  --line:#dcdcd8;
  --line-strong:#8a8a85;
  --acc:#ea4e12;
  --acc-ink:#b63505;
  --acc-hover:#ff6a2e;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --display:"Onest","Inter",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --t-fast:120ms;
  --t-base:180ms;
  --t-slow:260ms;
  --t-xslow:380ms;
  --t-orbit:60s;
  --t-beacon:7s;
  --t-breathe:6s;
  --t-float:8s;
  --t-glow:10s;
  --t-drift:24s;
  --t-orbit-quick:26s;
  --t-orbit-mid:40s;
  --t-orbit-slow:70s;
  --t-orbit-ball:120s;
  --spark-core:#ffd2b8;
  --capsule:#3f4145;
  --ink-hover:#282b30;
  --acc-fill:#fdece3;
  --ok-ink:#106845;
  --ok-fill:#e8f5ef;
  --ok-line:#189a63;
  --warn-fill:#faf2e0;
  --warn-line:#c08a0e;
  --gap:#ae3325;
  --gap-line:#c43a2c;
  --kind-regular:#1c7445;
  --kind-strategic:#7a3e9d;
  --ease:cubic-bezier(0.2, 0.8, 0.3, 1);
  --ease-out:cubic-bezier(0.22, 1, 0.36, 1);
  --r-lg:12px;
  --r-xl:14px;
  /* Свои производные блога: тени и подсветки из макета, через токены. */
  --ink2-text:#3a3d42;
  --b-shadow:0 10px 28px rgba(15,17,19,.10);
  --b-glow:rgba(234,78,18,.32);
  /* Капсула лендинга (PillHeader): значения из tokens.css, сторож BlogPillCopyTest. */
  --surface-dark:rgba(32, 34, 38, 0.82);
  --surface-dark-line:rgba(255, 255, 255, 0.11);
  --surface-dark-text:#fff;
  --surface-dark-text-mute:#b4b8be;
  --surface-dark-hover:rgba(255, 255, 255, 0.06);
  --surface-dark-shadow:0 12px 40px -18px rgba(0, 0, 0, 0.6);
  --surface-dark-tint:rgba(255, 242, 230, 0.07);
  --surface-dark-tint-strong:rgba(255, 242, 230, 0.09);
  --z-menu:30;
  --tap:32px;
  --text-00:11px;
  --sp-1:4px;
  --sp-3:12px;
}
@media (pointer: coarse), (max-width: 560px){:root{--tap:44px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}
/* Капсула закреплена сверху (как на лендинге): место под неё. */
main{padding-top:64px}
.sd-pill__brand{text-decoration:none}

/* Правки витрины к капсуле — копия из apps/web/src/pages/Landing.css («Капсула:
   адаптив под 375px», «Мобильное меню витрины», «Витрина под палец»). */
@media (max-width: 960px){.lp-pill-md{display:none}}
@media (max-width: 780px){.lp-brand-full{width:min-content;white-space:normal;line-height:1.1}}
@media (max-width: 540px){.lp-pill-xs{display:none}}
@media (max-width: 480px){.sd-pill{padding-left:14px}.sd-pill__link{padding:8px 10px}}
@media (max-width: 374px){.sd-pill{padding-left:var(--sp-3)}.sd-pill__brand{gap:var(--sp-1);margin-right:var(--sp-1)}.lp-brand-full{font-size:var(--text-00)}.sd-pill__extras{flex:none;margin-left:0}.sd-pill__profile{margin-left:var(--sp-1);padding-inline:var(--sp-3)}}
.lp-burger{flex:none;display:none;width:var(--tap);height:var(--tap);align-items:center;justify-content:center;border:1px solid color-mix(in srgb,var(--white) 14%,transparent);border-radius:999px;background:color-mix(in srgb,var(--white) 8%,transparent);color:var(--white);cursor:pointer}
.lp-burger:hover{background:color-mix(in srgb,var(--white) 16%,transparent)}
@media (max-width: 960px){.lp-burger{display:inline-flex}}
@media (pointer: coarse){.sd-pill__profile{height:var(--tap)}}
body{margin:0;background:var(--page);color:var(--ink);font:400 16px/1.5 var(--sans);overflow-x:hidden}
a{color:var(--acc-ink)}
a:hover{color:var(--acc)}
:focus-visible{outline:2px solid var(--acc-hover);outline-offset:2px;border-radius:6px}
img{max-width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:min(1180px,100% - 32px);margin:0 auto}
/* clip, а не hidden: hidden делает .page окном прокрутки, и колонка статьи
   (position:sticky) прилипала к нему, а не к экрану — ехала вместе с текстом. */
.page{position:relative;overflow:hidden;overflow:clip;isolation:isolate;padding-bottom:72px;min-height:100vh}

/* ——— капсула ——— */
.sheet{position:fixed;inset:0;z-index:20;display:none;background:rgba(15,17,19,.45)}
.sheet.is-open{display:block}
.sheet__in{position:absolute;left:12px;right:12px;top:12px;padding:12px;border-radius:calc(var(--r-xl) + 6px);background:var(--capsule);box-shadow:0 20px 50px rgba(0,0,0,.35);animation:rise var(--t-base) var(--ease-out)}
.sheet__in a{display:flex;align-items:center;min-height:48px;padding:0 14px;border-radius:12px;color:var(--white);text-decoration:none;font:600 16px/1 var(--sans)}
.sheet__in a[aria-current]{background:rgba(255,255,255,.1)}
.sheet__close{display:flex;margin-left:auto;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:var(--white);align-items:center;justify-content:center;cursor:pointer}

/* ——— кнопки и чипы ——— */
.btn{display:inline-flex;align-items:center;gap:10px;justify-content:center;min-height:52px;padding:0 26px;border-radius:999px;background:var(--acc);color:var(--ink);font:600 16px/1 var(--sans);text-decoration:none;white-space:nowrap;transition:background var(--t-fast)}
.btn:hover{background:var(--acc-hover);color:var(--ink)}
.btn svg{transition:transform var(--t-base) var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--white);color:var(--ink);font:600 14px/1 var(--sans);text-decoration:none;white-space:nowrap;transition:border-color var(--t-fast)}
.chip:hover{color:var(--ink);border-color:var(--line-strong)}
.chip--on,.chip--on:hover{background:var(--ink);border-color:var(--ink);color:var(--white)}

/* ——— ядро: сфера, орбиты, искры ——— */
.orb{position:absolute;pointer-events:none}
.orb svg{display:block;width:100%;height:100%;overflow:visible}
.orb circle{fill:none;stroke:rgba(15,17,19,.16);stroke-width:.14}
.orb--acc circle{stroke:rgba(234,78,18,.45);stroke-width:.18}
.orb--light circle{stroke:rgba(255,255,255,.22);stroke-width:.35}
.orb--light.orb--acc circle{stroke:color-mix(in srgb,var(--acc-hover) 60%,transparent);stroke-width:.3}
.spin1{animation:spin var(--t-orbit-mid) linear infinite}
.spin2{animation:spin var(--t-orbit-quick) linear infinite reverse}
.spin3{animation:spin var(--t-orbit-slow) linear infinite}
.spinball{animation:spin var(--t-orbit-ball) linear infinite}
.breathe{animation:breathe var(--t-breathe) ease-in-out infinite alternate}
.spark{position:absolute;left:0;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:radial-gradient(circle closest-side,var(--spark-core) 0 12%,var(--acc-hover) 22%,rgba(234,78,18,.35) 40%,transparent 100%)}
.spark--r{left:auto;right:0;margin:-15px -15px 0 0}
.mote{position:absolute;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle closest-side,var(--spark-core) 0 25%,var(--acc-hover) 45%,transparent);opacity:0;animation:mote var(--t-beacon) ease-in-out infinite}
.float1{animation:float var(--t-breathe) ease-in-out infinite alternate}
.float2{animation:float var(--t-float) ease-in-out infinite alternate-reverse}
.pt{position:absolute;left:50%;top:50%;width:0;height:0}
.pt img,.bigcv img{max-width:none}

/* ——— фон «Ядро» на всю страницу ——— */
.bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.bg__dots{position:absolute;inset:-24px 0 0;background-image:radial-gradient(rgba(15,17,19,.09) 1px,transparent 1.5px);background-size:24px 24px;-webkit-mask-image:linear-gradient(#000,rgba(0,0,0,.35) 40%,#000 75%,rgba(0,0,0,.2));mask-image:linear-gradient(#000,rgba(0,0,0,.35) 40%,#000 75%,rgba(0,0,0,.2));animation:dots var(--t-orbit-mid) linear infinite}
.bg__c{position:absolute;width:0;height:0}
.bg__glow{position:absolute;border-radius:50%;background:radial-gradient(circle closest-side,rgba(234,78,18,.2),rgba(234,78,18,.13) 35%,rgba(234,78,18,.05) 65%,transparent);animation:breathe var(--t-glow) ease-in-out infinite alternate}
.bg__glow--cool{background:radial-gradient(circle closest-side,rgba(15,17,19,.1),rgba(15,17,19,.04) 55%,transparent)}
.bg__o{position:absolute}
.bg__o svg{display:block;width:100%;height:100%;overflow:visible}
.bg__o circle{fill:none;stroke:rgba(15,17,19,.13);stroke-width:.1}
.bg__o--acc circle{stroke:rgba(234,78,18,.24);stroke-width:.08}
.drift{animation:drift var(--t-drift) ease-in-out infinite alternate}

/* ——— появление: только с JS; без него всё видно сразу ——— */
.js .rise{opacity:0}
.js .rise.in{animation:rise var(--t-xslow) var(--ease-out) forwards}

/* ——— обложка «графит» (Covers, вариант А) ——— */
.cv{position:relative;overflow:hidden;aspect-ratio:16/9;border-radius:var(--r-lg);background:var(--ink);color:var(--white);isolation:isolate}
.cv__glow{position:absolute;right:-30%;top:-40%;width:90%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle closest-side,rgba(234,78,18,.55),rgba(234,78,18,.12) 60%,transparent);z-index:-1;animation:breathe var(--t-breathe) ease-in-out infinite alternate}
.cv__orb{position:absolute;right:-18%;top:-34%;width:78%;aspect-ratio:1;z-index:-1;animation:spin var(--t-orbit-mid) linear infinite}
.cv__orb circle{fill:none;stroke:rgba(255,255,255,.22);stroke-width:.5}
.cv__orb circle+circle{stroke:color-mix(in srgb,var(--acc-hover) 60%,transparent)}
.cv__lab{position:absolute;left:18px;top:16px;font:400 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.cv__t{position:absolute;left:18px;right:18px;bottom:16px;font:800 22px/1.08 var(--display);letter-spacing:-.01em;text-wrap:balance;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cv--img{background:var(--ink)}
.cv--img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ——— карточка статьи ——— */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.card{display:flex;flex-direction:column;gap:14px;text-decoration:none;color:var(--ink);background:var(--white);border-radius:var(--r-xl);padding:10px 10px 18px;box-shadow:0 1px 0 rgba(15,17,19,.06);transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease)}
.card:hover{color:var(--ink);transform:translateY(-4px);box-shadow:0 14px 32px rgba(15,17,19,.16)}
.card:hover .cv__orb{animation-duration:var(--t-float)}
.card__b{padding:0 8px;display:flex;flex-direction:column;gap:8px}
.card__t{font:600 17px/1.3 var(--sans);text-wrap:pretty}
.card__t--lg{font-size:18px}
.card__m{font-size:13px;color:var(--mute)}

/* ——— первый экран /blog ——— */
.hero{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:24px;padding:64px 0 40px}
.hero__txt{flex:1 1 520px;min-width:0}
.eyebrow{margin:0 0 18px;font:400 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--acc-ink)}
.hero h1{margin:0;font:800 clamp(2.5rem,1.5rem + 3vw,4.25rem)/1.02 var(--display);letter-spacing:-.03em;text-wrap:balance;max-width:15ch}
.hero__lead{margin:22px 0 0;max-width:44ch;font-size:19px;line-height:1.6;color:var(--ink2-text)}
.search{position:relative;margin-top:32px;display:flex;gap:8px;max-width:560px;background:var(--white);border-radius:999px;padding:6px;box-shadow:var(--b-shadow)}
.search:focus-within{box-shadow:var(--b-shadow),0 0 0 2px var(--acc-hover)}
.search input{flex:1;min-width:0;border:0;outline:0;background:transparent;padding:0 18px;font:400 16px var(--sans);color:var(--ink);-webkit-appearance:none;appearance:none}
.search input::-webkit-search-cancel-button{-webkit-appearance:none}
.search button{min-height:48px;padding:0 22px;border:0;border-radius:999px;background:var(--ink);color:var(--white);font:600 15px var(--sans);cursor:pointer;transition:background var(--t-fast)}
.search button:hover{background:var(--ink-hover)}
.hero__art{flex:0 1 540px;position:relative;height:560px;min-width:320px}
.hero__glow{position:absolute;width:640px;height:640px;margin:-320px 0 0 -320px;border-radius:50%;background:radial-gradient(circle closest-side,var(--b-glow),rgba(234,78,18,.1) 50%,transparent)}
.hero__ball{position:absolute;width:300px;height:300px;margin:-150px 0 0 -150px;filter:drop-shadow(0 30px 40px rgba(15,17,19,.35))}
.fc{position:absolute;box-shadow:0 18px 40px rgba(15,17,19,.28);border-radius:var(--r-lg)}
.fc .cv__t{font-size:16px}

/* ——— бегущая строка ——— */
.tick{overflow:hidden;padding:20px 0;border-block:1px solid var(--line);margin-bottom:56px}
.ticker{display:flex;gap:40px;width:max-content;animation:ticker var(--t-orbit) linear infinite}
.ticker span{display:inline-flex;align-items:center;gap:40px;font:800 44px/1 var(--display);letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.ticker span::after{content:"";width:14px;height:14px;border-radius:50%;background:var(--acc)}
.ticker span:nth-child(even){color:transparent;-webkit-text-stroke:1px var(--ink)}

/* ——— секции ——— */
.sec{padding-bottom:56px}
.sec__h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:20px}
.h2{margin:0;font:800 32px/1.1 var(--display);letter-spacing:-.015em}
.sec__note{font:400 12px var(--mono);color:var(--mute);text-transform:uppercase;letter-spacing:.06em}
.row2{display:flex;flex-wrap:wrap;gap:20px}
.pop{flex:999 1 560px;min-width:0;background:var(--white);border-radius:var(--r-xl);padding:28px 28px 12px}
.pop .h2{margin-bottom:8px}
.pop ol{list-style:none;margin:0;padding:0}
.pop li{border-top:1px solid var(--line)}
.pop a{display:flex;align-items:center;gap:20px;padding:18px 0;color:var(--ink);text-decoration:none}
.pop__n{flex:0 0 52px;font:800 34px/1 var(--display);color:var(--acc)}
.pop__t{flex:1;min-width:0;font:600 17px/1.35 var(--sans)}
.pop__v{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;font:400 13px var(--mono);color:var(--mute)}
.pop .arr{opacity:0;transform:translateX(-8px);transition:opacity var(--t-base),transform var(--t-base) var(--ease)}
.pop a:hover .arr{opacity:1;transform:none}
.dark{position:relative;overflow:hidden;isolation:isolate;background:var(--ink);color:var(--white);border-radius:var(--r-xl)}
.cta{flex:1 1 340px;min-width:0;padding:32px;display:flex;flex-direction:column;justify-content:flex-end;gap:20px;min-height:420px}
.cta__p{margin:0;font:800 26px/1.2 var(--display);letter-spacing:-.01em}
.cta .btn{align-self:flex-start}
.rubs{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;margin-bottom:20px;scrollbar-width:thin}
.pager{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:32px}
/* JS ведёт ленту сам: ссылки листания остаются только для поисковиков и без JS. */
.pager--auto{position:relative;height:48px;margin-top:24px}
.pager--auto>*{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pager--auto.is-loading::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--acc);box-shadow:-16px 0 0 var(--acc),16px 0 0 var(--acc);animation:pager-dot .7s var(--ease) infinite alternate}
@keyframes pager-dot{from{opacity:.3}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.pager--auto.is-loading::after{animation:none}}
.empty{padding:40px 28px;background:var(--white);border-radius:var(--r-xl);font-size:17px;color:var(--ink2-text)}

/* ——— статья ——— */
.prog{position:fixed;left:0;right:0;top:0;height:3px;background:var(--acc);transform-origin:0 50%;transform:scaleX(0);z-index:30}
.crumbs{font-size:14px;color:var(--mute);display:flex;flex-wrap:wrap;gap:8px}
.crumbs a{color:var(--mute)}
.art{padding-top:40px}
.art h1{margin:16px 0 0;max-width:24ch;font:800 clamp(2rem,1.3rem + 2vw,3.25rem)/1.06 var(--display);letter-spacing:-.025em;text-wrap:balance}
.meta{margin:16px 0 0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:15px;color:var(--mute)}
.bigcv{margin-top:32px;height:420px;box-shadow:var(--b-shadow)}
.bigcv__glow{position:absolute;right:-10%;top:-60%;width:900px;height:900px;border-radius:50%;background:radial-gradient(circle closest-side,rgba(234,78,18,.5),rgba(234,78,18,.1) 60%,transparent);z-index:-1}
.bigcv__orbs{position:absolute;right:120px;top:50%;width:0;height:0;z-index:-1}
.bigcv__lab{position:absolute;left:48px;top:40px;font:400 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.bigcv__ball{position:absolute;right:-60px;top:50%;width:360px;height:360px;margin-top:-180px;z-index:-1;filter:drop-shadow(0 30px 40px rgba(0,0,0,.5))}
.bigcv__t{position:absolute;left:48px;right:48px;bottom:44px;max-width:14ch;font:800 64px/1 var(--display);letter-spacing:-.03em;text-wrap:balance}
.bigcv--img{height:auto;aspect-ratio:16/9;max-height:520px}
.bigcv--img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cols{display:flex;flex-wrap:wrap;gap:48px;margin-top:48px}
.prose{flex:999 1 560px;min-width:0;max-width:720px;font-size:18px;line-height:1.65}
.prose p{margin:0 0 20px}
.prose ul,.prose ol{margin:0 0 24px;padding-left:22px}
.prose li{margin-bottom:8px}
.prose li::marker{color:var(--acc)}
.prose h2{margin:40px 0 16px;font:800 28px/1.15 var(--display);letter-spacing:-.015em;scroll-margin-top:24px}
.prose h3{margin:28px 0 8px;font:600 19px/1.3 var(--sans);scroll-margin-top:24px}
.prose .al-center{text-align:center}.prose .al-right{text-align:right}.prose .al-justify{text-align:justify}
.prose blockquote{position:relative;margin:0 0 24px;padding:8px 0 0 44px;font-size:20px}
.prose blockquote::before{content:"«";position:absolute;left:0;top:-6px;font:800 48px/1 var(--display);color:var(--acc)}
.prose blockquote p{margin:0}
.prose cite{display:block;margin-top:8px;font:400 14px var(--sans);font-style:normal;color:var(--mute)}
.prose hr{border:0;height:1px;background:var(--line);margin:32px 0}
.prose .b-img{margin:0 0 24px}
.prose .b-img img{display:block;max-width:100%;height:auto;border-radius:var(--r-lg)}
/* На колонку — только картинки без ширины; у фото автора и мелкого скриншота
   из старого редактора ширина в атрибуте, её и держим. */
.prose .b-img img:not([width]){width:100%}
.prose figcaption{margin-top:8px;font-size:14px;color:var(--mute)}
.prose .b-note{margin:0 0 24px;padding:18px 22px;border-radius:var(--r-xl);background:var(--white);border:1px solid var(--line)}
.prose .b-note--warning{background:var(--warn-fill);border-color:var(--warn-line)}.prose .b-note--success{background:var(--ok-fill);border-color:var(--ok-line)}.prose .b-note--info{background:var(--acc-fill);border-color:var(--acc-hover)}
.prose .b-note p{margin:0}.prose .b-note__t{font-weight:600;margin-bottom:6px!important}
.prose .b-check{list-style:none;padding:0}
.prose .b-check li{display:flex;gap:12px;align-items:flex-start}
.b-check__box{flex:0 0 18px;height:18px;margin-top:5px;border-radius:5px;border:1.5px solid var(--acc)}
.prose .b-steps{list-style:none;padding:0}
.prose .b-steps li{display:flex;gap:18px;margin-bottom:18px}
.b-steps__n{flex:0 0 auto;font:800 26px/1.2 var(--display);color:var(--acc)}
.prose .b-steps p{margin:0}.prose .b-steps__t{font-weight:600}
.prose .b-faq{margin:0 0 24px}
.prose .b-faq dt{font-weight:600;padding-top:14px;border-top:1px solid var(--line)}
.prose .b-faq dd{margin:6px 0 14px}
.prose .b-video a{display:inline-flex;align-items:center;gap:12px;font-weight:600}
.b-video__play{width:40px;height:40px;border-radius:50%;background:var(--acc);position:relative}
.b-video__play::after{/* uikit-ok: треугольник «играть» рамкой, не боковая полоса карточки */content:"";position:absolute;left:15px;top:12px;border:8px solid transparent;border-left:12px solid var(--ink);border-right:0}
.prose .ib-c--red{color:var(--gap)}.prose .ib-c--orange{color:color-mix(in srgb,var(--acc) 80%,var(--ink))}.prose .ib-c--green{color:var(--ok-ink)}.prose .ib-c--blue{color:var(--kind-regular)}.prose .ib-c--purple{color:var(--kind-strategic)}.prose .ib-c--gray{color:var(--mute)}
.prose mark{border-radius:3px;padding:0 2px;background:color-mix(in srgb,var(--warn-line) 34%,var(--white))}
/* Цвета букв и маркера — те же формулы, что InstructionBody.css кабинета. */
.prose .ib-h--green{background:color-mix(in srgb,var(--ok-line) 24%,var(--white))}.prose .ib-h--blue{background:color-mix(in srgb,var(--kind-regular) 24%,var(--white))}.prose .ib-h--red{background:color-mix(in srgb,var(--gap-line) 20%,var(--white))}.prose .ib-h--purple{background:color-mix(in srgb,var(--kind-strategic) 18%,var(--white))}
.side{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;gap:20px}
.side__in{position:sticky;top:84px;max-height:calc(100vh - 104px);display:flex;flex-direction:column;gap:20px}
.side__in .toc{position:relative;min-height:0;overflow:auto;overscroll-behavior:contain}
/* «Все статьи блога» — белая карточка того же ряда, что содержание (Кирилл 29.10). */
.back{display:flex;align-items:center;gap:10px;flex:none;padding:16px 24px;border-radius:var(--r-xl);background:var(--white);color:var(--ink);text-decoration:none;font:600 15px/1.2 var(--sans);transition:color var(--t-fast)}
.back:hover{color:var(--acc-ink)}
.back svg{flex:none;transition:transform var(--t-fast) var(--ease)}
.back:hover svg{transform:translateX(-3px)}
.side__in .mini{flex:none}
.toc{background:var(--white);border-radius:var(--r-xl);padding:20px 24px}
.toc__h{margin:0 0 4px;font:400 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.toc a{display:block;padding:8px 0;color:var(--mute);text-decoration:none;font-size:14px;line-height:1.4;transition:color var(--t-fast)}
.toc a:hover,.toc a.is-on{color:var(--ink)}
.toc a.is-on{font-weight:600}
.mini{padding:24px;display:flex;flex-direction:column;gap:16px}
.mini__glow{position:absolute;right:-50%;top:-50%;width:120%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle closest-side,rgba(234,78,18,.45),transparent);z-index:-1}
.mini__p{margin:0;font:800 20px/1.2 var(--display)}
.mini .btn{white-space:normal;text-align:center;padding:12px 22px}

/* ——— закрытая часть для гостя ——— */
.fade{-webkit-mask-image:linear-gradient(#000 calc(100% - 180px),transparent);mask-image:linear-gradient(#000 calc(100% - 180px),transparent)}
.gate{position:relative;overflow:hidden;isolation:isolate;margin:8px 0 0;padding:28px 28px 24px;border-radius:16px;background:var(--white);box-shadow:var(--b-shadow);max-width:720px}
.gate__orb{position:absolute;right:-90px;top:-90px;width:220px;height:220px;z-index:-1}
.gate__k{margin:0 0 8px;font:400 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--acc-ink)}
.gate__t{margin:0;font:800 24px/1.2 var(--display)}
.gate__s{margin:10px 0 20px;font-size:15px;line-height:1.5;color:var(--mute)}
.gate__in{margin:14px 0 0;font-size:14px}

/* ——— 404 ——— */
.nf{padding:96px 0 40px;max-width:640px}
.nf h1{margin:0;font:800 clamp(2.5rem,1.5rem + 3vw,4rem)/1.02 var(--display);letter-spacing:-.03em}
.nf p{margin:20px 0 28px;font-size:18px;color:var(--ink2-text)}

/* ——— телефон (макет Mobile, 390) ——— */
@media (max-width:820px){
  .hero{padding:32px 0 24px}
  .hero__art{flex-basis:100%;height:340px;min-width:0}
  .hero__art .pt{transform:scale(.6)}
  .fc{display:none}
  .hero__lead{font-size:17px}
  .ticker span{font-size:30px;gap:28px}
  .ticker{gap:28px}
  .tick{margin-bottom:36px}
  .grid{grid-template-columns:1fr}
  .h2{font-size:26px}
  .pop{padding:22px 20px 6px}
  .pop a{gap:14px}
  .pop__n{flex-basis:36px;font-size:26px}
  .pop__t{font-size:15px}
  .pop .arr{display:none}
  .cta{min-height:340px;padding:24px}
  .art{padding-top:24px}
  .art h1{font-size:30px;line-height:1.08}
  .meta{font-size:13px}
  .bigcv{height:200px;margin-top:20px}
  .bigcv__t{left:20px;bottom:18px;font-size:30px;max-width:9ch}
  .bigcv__lab{left:20px;top:18px}
  .bigcv__ball{width:200px;height:200px;margin-top:-100px;right:-50px}
  .bigcv__orbs{right:40px;transform:scale(.5)}
  .cols{gap:28px;margin-top:24px}
  .prose{font-size:17px}
  .side__in{position:static;max-height:none}
  .gate{padding:28px 22px 24px}
  .mini--dup{display:none}
  /* Гостю у закрытой: карточка регистрации сразу за угасающим текстом. */
  .side--locked{display:none}
  /* «Похожие» на телефоне — компактные строки (макет Mobile). */
  .sim .grid{gap:10px}
  .sim .card{flex-direction:row;align-items:center;gap:14px;padding:10px}
  .sim .cv{flex:0 0 96px;height:64px;aspect-ratio:auto;border-radius:10px}
  .sim .cv__lab,.sim .cv__t,.sim .card__m{display:none}
  .sim .card__b{padding:0}
  .sim .card__t{font-size:15px;line-height:1.35}
  .gate .btn{width:100%;white-space:normal}
  .gate__in{text-align:center}
}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe{from{opacity:.7;transform:scale(.94)}to{opacity:1;transform:scale(1.06)}}
@keyframes float{from{transform:translateY(-8px) rotate(var(--r,0deg))}to{transform:translateY(10px) rotate(var(--r,0deg))}}
@keyframes mote{0%{opacity:0;transform:translate(0,0) scale(.6)}25%{opacity:1}100%{opacity:0;transform:translate(var(--dx,40px),var(--dy,-120px)) scale(1)}}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes ticker{to{transform:translateX(-50%)}}
@keyframes dots{to{transform:translateY(24px)}}
@keyframes drift{from{transform:translate(-30px,-20px)}to{transform:translate(30px,25px)}}

/* Скрытая вкладка — всё на паузе (blog.js); сокращённое движение — всё стоит. */
.is-paused *,.is-paused *::before,.is-paused *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rise{opacity:1}
  .mote{display:none}
}