/* ==========================================================================
   blog-page.css — блог в стиле «Закат» (018, 08.11.2026): хаб, теги, статья.
   Основа — css/tool-page.css (.tp: токены, кнопки, разделы, финал). Префиксы: bl- (страница), bp- (блоки статьи).
   Разметка — server/blogPage.ts, поведение — js/blog-page.js. На телефоне ничего не прилипает к экрану.
   Заменяет css/blog.css (старый фиолетовый дизайн; удалить через неделю после выката).
   ========================================================================== */
.bl [hidden]{display:none!important}
/* шрифт задаём сами: css/auth.css (грузится отложенно) меняет font-family у body → H1 перестраивался (CLS 0,19) */
.bl{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.bl-bg{height:1100px}
.bl-wrap{padding-bottom:clamp(40px,6vw,80px)}
.bl-crumbs{padding-bottom:10px}

/* --- HERO --- */
.bl-hero{position:relative;padding:clamp(4px,1vw,12px) 0 clamp(18px,2.4vw,28px);max-width:900px}
.bl-hero .tp-hero__tags{justify-content:flex-start;margin-bottom:14px}
.bl-hero__h1{margin:0 0 12px;font-size:clamp(30px,4.6vw,56px);line-height:1.04;letter-spacing:-.04em;font-weight:800;color:var(--text);text-wrap:balance}
.bl-hero--tag .bl-hero__h1{font-size:clamp(28px,4vw,46px)}
.bl-hero__sub{margin:0;max-width:740px;font-size:clamp(15px,1.3vw,17.5px);line-height:1.6;color:var(--text-3);text-wrap:pretty}

/* --- рубрики + поиск --- */
.bl-bar{display:flex;align-items:center;gap:12px;margin:0 0 clamp(20px,2.6vw,30px);flex-wrap:wrap}
.bl-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;flex:1 1 auto;min-width:0;padding:2px;margin:-2px}
.bl-chips::-webkit-scrollbar{display:none}
.bl-chip{flex:none;display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 15px;border-radius:12px;white-space:nowrap;font-size:14px;font-weight:650;color:var(--text-3);background:rgba(255,255,255,.03);border:1px solid var(--line);transition:color .2s,background .2s,border-color .2s}
.bl-chip span{font-size:12.5px;font-weight:700;color:var(--text-4);font-variant-numeric:tabular-nums}
.bl-chip:hover{color:var(--text);border-color:var(--line-2)}
.bl-chip.is-on{color:#fff;background:linear-gradient(120deg,rgba(219,39,119,.34),rgba(234,88,12,.26));border-color:rgba(251,113,133,.55)}
.bl-chip.is-on span{color:#fecdd3}
.bl-search{position:relative;flex:0 1 300px;display:flex;align-items:center;gap:8px;height:42px;padding:0 14px;border-radius:12px;background:#111a2e;border:1px solid var(--line-2);transition:border-color .2s,box-shadow .2s}
.bl-search:focus-within{border-color:rgba(251,113,133,.55);box-shadow:0 0 0 3px rgba(251,113,133,.1)}
.bl-search svg{width:16px;height:16px;flex:none;color:var(--text-4)}
.bl-search input{flex:1;min-width:0;height:100%;border:0;background:none;outline:none;color:var(--text);font:inherit;font-size:14.5px}
.bl-search input::placeholder{color:var(--text-4)}

/* --- мета: рубрика, минуты, дата --- */
.bl-rub{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;font-size:11.5px;font-weight:700;color:#fecdd3;background:rgba(244,114,182,.1);border:1px solid rgba(244,114,182,.3);white-space:nowrap}
.bl-rub--prompts{color:#fde68a;background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.34)}
.bl-rub--remove-bg{color:#bae6fd;background:rgba(56,189,248,.09);border-color:rgba(56,189,248,.3)}
.bl-rub--upscale{color:#a7f3d0;background:rgba(52,211,153,.08);border-color:rgba(52,211,153,.3)}
.bl-meta{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-4);font-variant-numeric:tabular-nums}
.bl-meta svg{width:13px;height:13px}

/* --- карточка статьи (вся — ссылка) --- */
.bl-card{position:relative;border-radius:var(--r-lg);background:var(--panel);border:1px solid var(--line);overflow:hidden;transition:transform .3s,border-color .3s,box-shadow .3s}
.bl-card:hover{transform:translateY(-3px);border-color:rgba(244,114,182,.38);box-shadow:0 24px 50px -24px rgba(236,72,153,.5)}
.bl-card__link{display:flex;flex-direction:column;height:100%}
.bl-card__media{position:relative;display:block;aspect-ratio:16/9;background:var(--bg-3);overflow:hidden}
.bl-card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.bl-card:hover .bl-card__media img{transform:scale(1.04)}
.bl-card__body{display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:16px 18px 18px;flex:1}
.bl-card__title{margin:0;font-size:17px;line-height:1.32;font-weight:750;letter-spacing:-.01em;color:var(--text);text-wrap:balance}
.bl-card__ex{font-size:14px;line-height:1.55;color:var(--text-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bl-card .bl-meta{margin-top:auto}
.bl-card--lg .bl-card__title{font-size:clamp(21px,2.3vw,28px);line-height:1.2}
.bl-card--lg .bl-card__ex{-webkit-line-clamp:3;font-size:15px}
.bl-card--lg .bl-card__body{padding:20px 22px 22px}
.bl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.bl-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}

/* --- главное: большая статья + популярное --- */
.bl-top{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:18px;align-items:stretch}
.bl-pop{padding:18px 18px 10px;border-radius:var(--r-lg)}
.bl-pop__t{margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.bl-row{display:flex;align-items:flex-start;gap:14px;padding:12px 4px;border-top:1px solid var(--line)}
.bl-pop__list li:first-child .bl-row{border-top:0}
.bl-row:hover .bl-row__title{color:#fff}
.bl-row__n{flex:none;width:30px;font:700 15px/1.3 var(--mono);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.bl-row__media{flex:none;width:96px;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:var(--bg-3)}
.bl-row__media img{width:100%;height:100%;object-fit:cover}
.bl-row__body{display:flex;flex-direction:column;gap:5px;min-width:0}
.bl-row__title{font-size:15px;line-height:1.38;font-weight:650;color:var(--text-2);transition:color .2s}

/* --- разделы хаба --- */
.bl-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.bl-head .tp-h2{margin-bottom:0}
.bl-more{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--pink);white-space:nowrap}
.bl-more svg{width:16px;height:16px;transition:transform .2s}
.bl-more:hover svg{transform:translateX(3px)}
.bl-routes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.bl-route{position:relative;padding:22px 22px 18px;border-radius:var(--r-lg)}
.bl-route__n{position:absolute;top:18px;right:20px;font:800 34px/1 var(--mono);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.55}
.bl-route__t{margin:0 0 4px;font-size:18px;font-weight:750;color:var(--text)}
.bl-route__s{margin:0 0 14px;font-size:14px;color:var(--text-3)}
.bl-route__steps{display:grid;gap:2px;counter-reset:rs}
.bl-route__steps li{counter-increment:rs;position:relative;padding:9px 0 9px 34px;border-top:1px solid var(--line);font-size:14.5px;line-height:1.4}
.bl-route__steps li::before{content:counter(rs);position:absolute;left:0;top:9px;display:grid;place-items:center;width:22px;height:22px;border-radius:7px;font:700 11px/1 var(--mono);color:#fff;background:var(--grad-cta)}
.bl-route__steps a{color:var(--text-2);transition:color .2s}
.bl-route__steps a:hover{color:#fff}


/* остальные статьи рубрики — строки со стрелкой (у каждой статьи есть ссылка с хаба) */
.bl-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;margin-top:14px}
.bl-list a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 2px;border-bottom:1px solid var(--line);font-size:15px;font-weight:600;line-height:1.4;color:var(--text-2);transition:color .2s}
.bl-list a:hover{color:#fff}
.bl-list svg{flex:none;width:16px;height:16px;color:var(--pink);transition:transform .2s}
.bl-list a:hover svg{transform:translateX(3px)}
@media (max-width:640px){.bl-list{grid-template-columns:minmax(0,1fr)}}

/* --- полоса «промт → картинка», темы, инструменты --- */
.bl-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}
.bl-strip__item{position:relative;display:block;border-radius:16px;overflow:hidden;aspect-ratio:3/2;background:var(--bg-3);border:1px solid var(--line)}
.bl-strip__item img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.bl-strip__item:hover img{transform:scale(1.05)}
.bl-strip__p{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;font:500 11.5px/1.4 var(--mono);color:#e2e8f0;background:linear-gradient(transparent,rgba(5,8,16,.88));display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bl-tags{display:flex;flex-wrap:wrap;gap:8px}
.bl-tags--col{flex-direction:column;align-items:stretch}
.bl-tags--col .bl-tagpill{width:100%;border-radius:12px;padding:8px 14px;line-height:1.35}
.bl-tagpill{display:inline-flex;align-items:center;justify-content:space-between;gap:10px;min-height:38px;padding:0 14px;border-radius:999px;font-size:14px;font-weight:600;color:var(--text-2);background:rgba(255,255,255,.03);border:1px solid var(--line-2);transition:all .2s}
.bl-tagpill span{font:600 12px var(--mono);color:var(--text-4)}
.bl-tagpill:hover{color:#fff;border-color:rgba(244,114,182,.45);background:rgba(244,114,182,.08)}
.bl-tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.bl-tools__item{position:relative;display:flex;flex-direction:column;gap:4px;min-height:104px;padding:18px 44px 18px 18px;border-radius:var(--r-lg);background:var(--panel);border:1px solid var(--line);transition:transform .3s,border-color .3s}
.bl-tools__item:hover{transform:translateY(-3px);border-color:rgba(244,114,182,.38)}
.bl-tools__name{font-size:16px;font-weight:750;color:var(--text)}
.bl-tools__sub{font-size:13.5px;color:var(--text-3)}
.bl-tools__item svg{position:absolute;right:16px;top:18px;width:18px;height:18px;color:var(--pink)}
.bl-about{max-width:860px;margin:clamp(44px,5vw,64px) auto 0;font-size:14.5px;line-height:1.7;color:var(--text-4);text-align:center}
.bl-tagpage{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
.bl-side{display:grid;gap:16px}
.bl-side__tags{padding:16px;border-radius:var(--r-lg)}

/* --- карточка инструмента --- */
.bl-tool{position:relative;padding:18px;border-radius:var(--r-lg);background:linear-gradient(160deg,rgba(236,72,153,.14),rgba(245,158,11,.06) 60%,transparent),var(--panel-2);border:1px solid rgba(251,113,133,.3);box-shadow:0 0 60px -30px rgba(236,72,153,.6)}
.bl-tool__kicker{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fecdd3}
.bl-tool__kicker svg{width:14px;height:14px}
.bl-tool__name{margin:8px 0 4px;font-size:18px;font-weight:800;letter-spacing:-.01em;color:var(--text)}
.bl-tool__lead{margin:0 0 10px;font-size:14px;line-height:1.5;color:var(--text-3)}
.bl-tool__pts{display:grid;gap:6px;margin:0 0 14px}
.bl-tool__pts li{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;line-height:1.4;color:var(--text-2)}
.bl-tool__pts svg{flex:none;width:15px;height:15px;margin-top:2px;color:var(--green)}
.bl-tool__cta{width:100%}
.bl-tool--inline{display:none;margin:28px 0}

/* --- статья --- */
.bl-wrap--post{max-width:1160px}
.bl-post__head{max-width:820px;margin:0 auto;text-align:left}
.bl-post__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:14px}
.bl-post__h1{margin:0 0 14px;font-size:clamp(28px,4.2vw,48px);line-height:1.08;letter-spacing:-.035em;font-weight:800;color:var(--text);text-wrap:balance}
.bl-post__lead{margin:0 0 20px;font-size:clamp(16px,1.5vw,19px);line-height:1.6;color:var(--text-3);text-wrap:pretty}
.bl-post__cover{margin:0 0 clamp(26px,3.4vw,40px);border-radius:var(--r-xl);overflow:hidden;aspect-ratio:16/9;background:var(--bg-3);border:1px solid var(--line);box-shadow:var(--shadow),0 0 120px -50px rgba(236,72,153,.5)}
.bl-post__cover img{width:100%;height:100%;object-fit:cover}
.bl-post__head .bl-post__cover{margin-left:calc((820px - 1040px) / 2);margin-right:calc((820px - 1040px) / 2)}
.bl-post__grid{display:grid;grid-template-columns:minmax(0,720px) 280px;justify-content:center;gap:clamp(32px,4vw,56px);align-items:start}
.bl-post__side{position:sticky;top:calc(var(--navbar-height,64px) + 20px);display:grid;gap:16px;max-height:calc(100vh - 110px);overflow:auto;scrollbar-width:none;overscroll-behavior:contain}
.bl-post__side::-webkit-scrollbar{display:none}
.bl-toc{padding:16px 6px 10px 16px;border-left:1px solid var(--line-2)}
.bl-toc__t{margin:0 0 10px;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-4)}
.bl-toc__list{display:grid;gap:2px}
.bl-toc__list a{display:block;padding:6px 8px;border-radius:8px;font-size:13.5px;line-height:1.4;color:var(--text-3);transition:color .2s,background .2s}
.bl-toc__list a:hover{color:var(--text)}
.bl-toc__list a.is-on{color:#fff;background:rgba(244,114,182,.1);box-shadow:inset 2px 0 0 var(--pink)}
.bl-toc-m{display:none}
.bl-side__share{padding:0 0 0 16px}
.bl-share{display:flex;gap:8px}
.bl-share__b{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:var(--text-2);background:rgba(255,255,255,.04);border:1px solid var(--line-2);transition:all .2s}
.bl-share__b svg{width:18px;height:18px}
.bl-share__b:hover{color:#fff;border-color:rgba(244,114,182,.5);background:rgba(244,114,182,.1)}
.bl-share__b.is-ok{color:#a7f3d0;border-color:rgba(52,211,153,.5)}
.bl-post__foot{max-width:720px;margin:34px auto 0;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;transform:translateX(calc(-1 * (280px + clamp(32px,4vw,56px)) / 2))}
.bl-post__share-m{display:none}
.bl-final{margin-top:clamp(48px,6vw,80px)}


/* --- текст статьи: обычные теги из posts.json выглядят аккуратно без классов --- */
.bl-prose{font-size:17.5px;line-height:1.78;color:#cdd5e1;min-width:0;overflow-wrap:break-word}
.bl-prose > * + *,.bl-prose li > * + *{margin-top:1.05em}
.bl-prose > p + p{margin-top:.95em}
.bl-prose h2{position:relative;margin:2.1em 0 .7em;font-size:clamp(23px,2.4vw,29px);line-height:1.22;letter-spacing:-.022em;font-weight:800;color:var(--text);scroll-margin-top:calc(var(--navbar-height,64px) + 20px);text-wrap:balance}
.bl-prose > h2:first-child{margin-top:0}
.bl-prose h3{margin:1.7em 0 .5em;font-size:19.5px;line-height:1.3;font-weight:750;color:var(--text);letter-spacing:-.01em;scroll-margin-top:calc(var(--navbar-height,64px) + 20px)}
.bl-prose h2 + h3{margin-top:.8em}
.bl-prose .bl-anchor,.bl-prose .bl-anchor:hover{margin-left:.35em;font-weight:600;color:var(--text-4);opacity:0;transition:opacity .2s;text-decoration:none}
.bl-prose h2:hover .bl-anchor,.bl-prose .bl-anchor:focus-visible{opacity:1}
@media (hover:none){.bl-prose .bl-anchor{display:none}}
.bl-prose a{color:var(--pink);text-decoration:underline;text-decoration-color:rgba(244,114,182,.4);text-underline-offset:3px;transition:color .2s,text-decoration-color .2s}
.bl-prose a:hover{color:var(--orange);text-decoration-color:var(--orange)}
.bl-prose strong,.bl-prose b{color:var(--text);font-weight:700}
.bl-prose em{color:#e2e8f0}
.bl-prose ul,.bl-prose ol{display:grid;gap:.5em;padding:0}
.bl-prose ul > li{position:relative;padding-left:26px}
.bl-prose ul > li::before{content:"";position:absolute;left:6px;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--grad)}
.bl-prose ol{counter-reset:bo}
.bl-prose ol > li{counter-increment:bo;position:relative;padding-left:36px}
.bl-prose ol > li::before{content:counter(bo);position:absolute;left:0;top:.2em;display:grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:8px;font:700 12px/1 var(--mono);color:#fecdd3;background:rgba(244,114,182,.12);border:1px solid rgba(244,114,182,.3)}
.bl-prose li > p{margin:0}
.bl-prose blockquote{margin:1.4em 0;padding:16px 20px;border-radius:14px;border-left:3px solid var(--pink);background:rgba(244,114,182,.06);color:var(--text-2)}
.bl-prose table{width:100%;border-collapse:collapse;font-size:15px;display:block;overflow-x:auto}
.bl-prose th,.bl-prose td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.bl-prose th{color:var(--text);font-weight:700;background:rgba(255,255,255,.03)}
.bl-prose img{border-radius:14px}
.bl-prose code{padding:2px 6px;border-radius:6px;font:500 .88em var(--mono);color:#fde68a;background:rgba(245,158,11,.1)}

/* --- карточка промпта --- */
.bp-prompt{margin:1.3em 0;border-radius:var(--r-lg);overflow:hidden;background:var(--panel-2);border:1px solid var(--line-2)}
.bp-prompt__media{position:relative;margin:0;background:var(--bg-3)}
.bp-prompt__media img{width:100%;height:auto;max-height:420px;object-fit:cover;border-radius:0}
.bp-prompt__media figcaption{position:absolute;left:10px;bottom:10px;padding:4px 9px;border-radius:999px;font:600 11px/1.3 var(--mono);color:#e2e8f0;background:rgba(5,8,16,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.bp-prompt__body{padding:14px 16px 14px}
.bp-prompt__label{margin:0 0 6px!important;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-4)}
.bp-prompt__text{margin:0!important;font:500 14.5px/1.6 var(--mono);color:#e2e8f0;white-space:pre-wrap}
.bp-prompt__text strong{color:#fde68a}
.bp-prompt__bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.bp-prompt__model{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;font-weight:650;color:var(--text-2)}
.bl-prose .bp-prompt__model a{color:var(--text-2);text-decoration:none;border-bottom:1px dashed rgba(203,213,225,.4)}
.bp-prompt__free{padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:700;color:#a7f3d0;background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.35)}
.bp-prompt__price{padding:2px 8px;border-radius:999px;font:600 11.5px var(--mono);color:#fde68a;background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.3)}
.bp-prompt__actions{display:flex;gap:8px}
.bp-btn{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 13px;border-radius:10px;font-size:13.5px;font-weight:700;color:#fff;background:var(--grad-cta);box-shadow:0 8px 20px -10px rgba(236,72,153,.7);transition:transform .2s,box-shadow .2s;white-space:nowrap}
.bl-prose a.bp-btn{color:#fff;text-decoration:none}
.bp-btn svg{width:15px;height:15px}
.bp-btn:hover{transform:translateY(-1px);box-shadow:0 12px 26px -10px rgba(236,72,153,.85)}
.bp-btn--ghost{color:var(--text);background:rgba(255,255,255,.05);border:1px solid var(--line-2);box-shadow:none}
.bp-btn--ghost:hover{border-color:rgba(251,113,133,.5);box-shadow:none}
.bp-btn.is-ok{color:#a7f3d0;border-color:rgba(52,211,153,.5)}
.bp-pair{margin:1.4em 0}
.bp-pair__title{margin:0 0 10px!important;font-size:14px;font-weight:700;color:var(--text-3)}
.bp-pair__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bp-pair__grid .bp-prompt{margin:0}
.bp-pair__grid .bp-prompt:first-child{opacity:.92}
.bp-pair__grid .bp-prompt:last-child{border-color:rgba(52,211,153,.4)}
.bp-pair__grid .bp-prompt__text{font-size:13.5px}
.bp-pair__grid .bp-prompt__actions .bp-btn--ghost{display:none}


/* --- адаптив --- */
@media (max-width:1100px){
  .bl-post__head .bl-post__cover{margin-left:0;margin-right:0}
  .bl-post__grid{grid-template-columns:minmax(0,720px);justify-content:center}
  .bl-post__side{display:none}
  .bl-post__foot{transform:none}
  .bl-post__share-m{display:block}
  .bl-tool--inline{display:block}
  .bl-toc-m{display:block;margin:0 0 20px;border-radius:14px;background:var(--panel);border:1px solid var(--line-2)}
  .bl-toc-m summary{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 16px;cursor:pointer;list-style:none;font-size:14.5px;font-weight:700;color:var(--text)}
  .bl-toc-m summary::-webkit-details-marker{display:none}
  .bl-toc-m summary svg{width:17px;height:17px;color:var(--pink)}
  .bl-toc-m summary span{margin-left:auto;font:600 12px var(--mono);color:var(--text-4)}
  .bl-toc-m__list{display:grid;gap:2px;padding:0 10px 12px;counter-reset:tm}
  .bl-toc-m__list a{display:block;padding:8px 8px;border-radius:8px;font-size:14.5px;line-height:1.4;color:var(--text-3)}
  .bl-tagpage{grid-template-columns:minmax(0,1fr)}
  .bl-side{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bl-tools{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bl-strip{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:900px){
  .bl-top{grid-template-columns:minmax(0,1fr)}
  .bl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bl-routes{grid-template-columns:minmax(0,1fr)}
  .bl-strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(var(--gut) * -1) 18px;padding:0 var(--gut)}
  .bl-strip::-webkit-scrollbar{display:none}
  .bl-strip li{flex:0 0 min(62vw,260px);scroll-snap-align:start}
}
@media (max-width:640px){
  .bl-bar{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
  .bl-chips{margin:0 calc(var(--gut) * -1);padding:2px var(--gut);width:auto}
  .bl-search{width:100%}
  /* статьи списком: картинка 16:10 слева, заголовок справа (как окно выбора модели) */
  .bl-grid,.bl-grid--2{grid-template-columns:minmax(0,1fr);gap:10px}
  .bl-card:not(.bl-card--lg) .bl-card__link{flex-direction:row;align-items:stretch}
  .bl-card:not(.bl-card--lg) .bl-card__media{flex:0 0 38%;aspect-ratio:16/10}
  .bl-card:not(.bl-card--lg) .bl-card__body{padding:10px 12px;gap:6px}
  .bl-card:not(.bl-card--lg) .bl-card__title{font-size:15px;line-height:1.3}
  .bl-card:not(.bl-card--lg) .bl-card__ex{display:none}
  .bl-card:not(.bl-card--lg) .bl-rub{height:20px;font-size:10.5px;padding:0 8px}
  .bl-card:hover{transform:none}
  .bl-tools{grid-template-columns:minmax(0,1fr)}
  .bl-tools__item{min-height:0}
  .bl-side{grid-template-columns:minmax(0,1fr)}
  .bl-prose{font-size:16.5px;line-height:1.72}
  .bl-prose h2{font-size:22px}
  .bl-prose h3{font-size:18px}
  .bl-post__h1{font-size:clamp(26px,7.4vw,34px)}
  .bl-post__lead{font-size:16px;margin-bottom:14px}
  .bl-post__cover{border-radius:var(--r-lg);margin-bottom:22px}
  .bp-prompt__body{padding:12px 13px}
  .bp-prompt__text{font-size:13.5px}
  .bp-prompt__actions{width:100%}
  .bp-prompt__actions .bp-btn{flex:1;justify-content:center}
  .bp-pair__grid{grid-template-columns:minmax(0,1fr)}
  .bl-crumbs{padding-top:14px}
}
@media (prefers-reduced-motion:reduce){
  .bl-card,.bl-card__media img,.bl-strip__item img,.bl-tools__item{transition:none}
}