/* Набор обзорника (kit): общие блоки + три подачи (.b-face-a табло, -b редакция, -c каталог). Цвета и шрифт — переменные
   --k-* из kit/tokens.html (свои у каждой витрины). Всегда светлая. Подключать ПОСЛЕ стилей темы. */
body{background:#fff;color:var(--b-ink);font-family:var(--b-font);font-size:16px;line-height:1.55;font-variant-numeric:tabular-nums}
.b-home,.b-art-wrap{max-width:1240px;width:100%;margin-left:auto;margin-right:auto;padding-top:22px;font-size:16px;line-height:1.55}.b-art-wrap{padding-top:18px}
.b-home h2{font-size:21px;font-weight:700;margin:0;letter-spacing:-.01em;color:var(--b-ink)}
.b-home a,.b-art a{color:var(--b-acc)}
/* первый экран */
.b-intro{display:grid;grid-template-columns:1fr 1.1fr;gap:24px;align-items:start;margin-bottom:18px}
.b-intro h1{font-size:34px;line-height:1.15;font-weight:700;letter-spacing:-.02em;margin:0 0 8px;color:var(--b-ink)}
.b-intro .byline,.b-art .byline{font-size:14px;color:var(--b-mut);margin:0}
.b-intro .lede,.b-art .lede{margin:0;background:var(--b-card);border:1px solid var(--b-line);border-radius:var(--b-r);padding:14px 16px;font-size:15.5px}
.b-intro .lede:before,.b-art .lede:before{content:"Short answer";display:inline-block;background:var(--b-acc);color:#fff;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;border-radius:6px;padding:2px 8px;margin-right:8px}
/* общие куски */
.b-ch{display:flex;align-items:center;gap:10px}.b-ch b{font-size:17px}.b-ch b a{color:var(--b-ink);text-decoration:none}.b-ch b a:hover{color:var(--b-acc)}
.b-ch small{display:block;color:var(--b-mut);font-size:13px}
.b-lg{width:40px;height:40px;border-radius:10px;border:1px solid var(--b-line);object-fit:contain;background:#fff;padding:3px;flex:none}
.b-val{display:flex;align-items:baseline;gap:8px}.b-val b{font-size:26px;font-weight:700;letter-spacing:-.02em}.b-val s{color:var(--b-mut)}.b-val span{font-size:13px;color:var(--b-mut)}
.b-out{display:block;text-align:center;font-size:14px;font-weight:700;border:1.5px solid var(--b-acc);color:var(--b-acc)!important;border-radius:10px;padding:7px 10px;text-decoration:none;transition:.15s;white-space:nowrap}
.b-out:hover{background:var(--b-acc);color:#fff!important}
.b-badge{align-self:flex-start;font-size:13px;font-weight:700;border-radius:7px;padding:3px 8px;background:var(--b-okbg);color:var(--b-ok)}.b-badge.tag{background:var(--b-tag);color:var(--b-acc)}
.b-line{font-size:14px;margin:0}.b-note{font-size:14px;font-weight:600;color:var(--b-ok)}.b-note.no{color:var(--b-mut);font-weight:400}
.b-c[hidden]{display:none!important}.b-c{scroll-margin-top:90px}
/* выбор */
.b-picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:26px}
.b-pick{background:var(--b-card);border:1px solid var(--b-line);border-top:4px solid var(--b-acc);border-radius:var(--b-r);padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.b-pick p{margin:0;font-size:14.5px;flex:1}
.b-axis{align-self:flex-start;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--b-acc);background:var(--b-tag);border-radius:6px;padding:3px 8px}
/* фильтры */
.b-bar,.b-bh{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px;margin-bottom:12px}
.b-chips{display:flex;gap:8px;flex-wrap:wrap}
.b-chips label{display:flex;align-items:center;gap:6px;font-size:14px;border:1px solid var(--b-line);background:#fff;border-radius:99px;padding:5px 12px;cursor:pointer;margin:0}
.b-chips label:has(input:checked){border-color:var(--b-acc);background:var(--b-tag);color:var(--b-acc)}
.b-chips input{accent-color:var(--b-acc);margin:0}.b-chips em{font-style:normal;font-weight:600}.b-chips span{color:var(--b-mut);font-size:13px}
.b-count{margin-left:auto;font-size:14px;color:var(--b-mut)}.b-count b{color:var(--b-ink)}
/* C · каталог */
.b-cards{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.b-cards>.b-c{flex:0 0 calc((100% - 28px)/3);min-width:0;background:var(--b-card);border:1px solid var(--b-line);border-radius:var(--b-r);padding:14px;display:flex;flex-direction:column;gap:8px;transition:.15s}
.b-cards>.b-c:hover{transform:translateY(-2px);box-shadow:0 10px 24px -12px color-mix(in srgb,var(--b-acc) 45%,transparent);border-color:color-mix(in srgb,var(--b-acc) 30%,var(--b-line))}
.b-cards>.b-c.hot{border-color:color-mix(in srgb,var(--b-ok) 35%,white)}.b-cards .b-line{flex:1}
/* A · табло */
.b-board{background:var(--b-card);border:1px solid var(--b-line);border-radius:var(--b-r);overflow:hidden}
.b-board .b-bh{padding:14px 16px;margin:0;border-bottom:1px solid var(--b-line)}
.b-tbl{width:100%;border-collapse:collapse}
.b-tbl th{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--b-mut);text-align:left;padding:10px 14px;background:color-mix(in srgb,var(--b-bg) 60%,white);border-bottom:1px solid var(--b-line)}
.b-tbl td{padding:12px 14px;border-bottom:1px solid var(--b-line);vertical-align:middle}.b-tbl tr:last-child td{border-bottom:0}
.b-tbl tr.hot td{background:color-mix(in srgb,var(--b-okbg) 35%,white)}
.b-tbl .b-lg{width:32px;height:32px;border-radius:8px}.b-tbl .num{font-size:16px;white-space:nowrap}.b-tbl .num b{font-size:17px}
.b-barv{display:flex;align-items:center;gap:8px}.b-barv i{display:block;height:8px;min-width:4px;border-radius:4px;background:var(--b-acc)}.b-barv b{font-size:14px;color:var(--b-acc)}
.b-tbl .o{text-align:right}.b-tbl .b-line{color:var(--b-ink)}
/* B · редакция */
.b-face-b .b-picks{gap:0;border:1px solid var(--b-ink);border-radius:0}
.b-face-b .b-pick{border:0;border-left:1px solid var(--b-line);border-radius:0;background:var(--b-card)}.b-face-b .b-pick:first-child{border-left:0}
.b-face-b .b-axis{background:var(--b-ink);color:#fff;border-radius:0}
.b-face-b .b-out{display:inline-block;align-self:flex-start;border:0;border-bottom:2px solid var(--b-acc);border-radius:0;padding:0 0 1px}.b-face-b .b-out:hover{background:none;color:var(--b-acc-d)!important}
.b-face-b .b-list>.b-bar{border-bottom:2px solid var(--b-ink);padding-bottom:10px}
.b-rows .b-it{display:grid;grid-template-columns:240px minmax(0,1fr) 110px 120px;gap:18px;align-items:center;padding:14px 0;border-bottom:1px solid var(--b-line)}
.b-rows .b-line{font-size:15px}.b-rows .b-note{display:block;font-size:13px;margin-top:2px}.b-rows .b-val{justify-content:flex-end;flex-direction:column;align-items:flex-end;gap:0}.b-rows .b-val b{font-size:21px}.b-rows .b-val s{font-size:13px}
.b-more{text-align:right;font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap}
/* бесплатные, как проверяем, FAQ */
.b-free{margin:26px 0 0;background:var(--b-card);border:1px solid var(--b-line);border-radius:var(--b-r);padding:16px}
.b-free ul{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.b-free li{display:flex;gap:10px;align-items:flex-start}.b-free li img{border-radius:7px;flex:none}.b-free b{display:block}.b-free span{font-size:14px;color:var(--b-mut)}
.b-row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:16px 0 30px}
.b-panel{background:var(--b-card);border:1px solid var(--b-line);border-radius:var(--b-r);padding:16px}.b-panel h2{margin-bottom:10px}
.b-panel p{margin:0 0 10px}.b-panel figure{margin:0}.b-panel img{max-width:100%;max-height:620px;width:auto;border-radius:8px;border:1px solid var(--b-line);display:block}
.b-panel figcaption{font-size:13px;color:var(--b-mut);margin-top:6px}
.b-q{padding:10px 0;border-top:1px solid var(--b-line)}.b-q:first-of-type{border-top:0;padding-top:0}.b-q h3{font-size:16px;font-weight:700;margin:0 0 4px}.b-q p{margin:0;font-size:15px}
.b-face-b .b-free,.b-face-b .b-panel{border-radius:0;border:0;border-top:3px solid var(--b-ink)}
/* шапки блоков: line (по умолчанию), bar (полоса акцента слева у заголовков) */
.b-home.b-head-bar h2{border-left:4px solid var(--b-acc);padding-left:10px}
/* статья */
.b-crumbs{font-size:14px;color:var(--b-mut);margin-bottom:14px}.b-crumbs a{color:var(--b-mut)}.b-crumbs span{margin:0 4px}
.b-art-grid{display:grid;grid-template-columns:minmax(0,1100px) 230px;gap:40px}.b-art{min-width:0}
.b-kicker{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--b-acc);margin:0 0 8px}
.b-art h1{font-size:36px;line-height:1.15;font-weight:700;letter-spacing:-.02em;margin:0 0 8px;color:var(--b-ink)}.b-art .byline{margin-bottom:16px}
.b-art h2{font-size:24px;font-weight:700;letter-spacing:-.01em;margin:40px 0 12px;color:var(--b-ink)}.b-art section{scroll-margin-top:90px}
.b-prose{font-size:16.5px;line-height:1.65}.b-prose p{margin:0 0 14px}.b-prose ul,.b-prose ol{padding-left:1.3rem;margin:0 0 14px}.b-prose li+li{margin-top:5px}
.b-prose a{color:var(--b-ink);text-decoration:underline;text-decoration-color:var(--b-acc);text-underline-offset:2px}.b-prose strong{color:var(--b-ink)}
.b-tbl-wrap{margin-top:24px}.b-axis-line{font-size:14px;font-weight:600;color:var(--b-mut);margin:0 0 8px}
.b-cards-tbl{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--b-line);border-radius:var(--b-r);overflow:hidden;font-size:15px}
.b-cards-tbl th{background:var(--b-tag);color:var(--b-acc);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;text-align:left;padding:10px 14px}
.b-cards-tbl td{padding:11px 14px;border-top:1px solid var(--b-line);vertical-align:top}.b-cards-tbl td.name{font-weight:700}
.b-art figure{margin:18px 0 0}.b-zoom{display:inline-block;max-width:100%;border:1px solid var(--b-line);border-radius:12px;overflow:hidden;background:#fff}.b-zoom img{max-width:100%;max-height:620px;width:auto;display:block}
.b-art figcaption{font-size:14px;color:var(--b-mut);margin-top:6px}
.b-faq{background:#fff;border:1px solid var(--b-line);border-radius:var(--b-r);padding:6px 18px}.b-faq .b-q:first-child{padding-top:10px}
.b-toc{position:sticky;top:90px;align-self:start;font-size:14px}.b-toc p{font-weight:700;margin:0 0 8px}
.b-toc ul{list-style:none;margin:0;padding:0 0 0 14px;border-left:2px solid var(--b-line)}.b-toc li{margin:0 0 8px}.b-toc a{color:var(--b-mut);text-decoration:none}.b-toc a:hover{color:var(--b-acc)}
#zoom-blg{border:0;padding:0;background:transparent;max-width:min(1400px,94vw);overflow:visible}#zoom-blg::backdrop{background:rgb(15 17 20/.78);backdrop-filter:blur(2px)}
#zoom-blg .zw{position:relative}#zoom-blg img{max-width:100%;max-height:88vh;border-radius:10px;box-shadow:0 20px 50px rgba(0,0,0,.4);display:block}
#zoom-blg button{position:absolute;top:-16px;right:-16px;width:38px;height:38px;border-radius:50%;border:0;background:#fff;color:#111;display:grid;place-items:center;box-shadow:0 4px 12px rgba(0,0,0,.3);cursor:pointer}
#zoom-blg button:focus{outline:none}#zoom-blg button:focus-visible{outline:2px solid var(--b-acc);outline-offset:2px}
/* адаптив */
@media(max-width:1200px){.b-cards>.b-c{flex-basis:calc((100% - 14px)/2)}.b-free ul{grid-template-columns:repeat(2,minmax(0,1fr))}
 .b-art-grid{grid-template-columns:minmax(0,1fr)}.b-toc{display:none}.b-rows .b-it{grid-template-columns:200px minmax(0,1fr) 100px}.b-rows .b-more{grid-column:3;text-align:right}}
@media(max-width:900px){.b-intro,.b-row2{grid-template-columns:minmax(0,1fr)}.b-intro h1{font-size:26px}
 .b-picks{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 16px;gap:12px;margin:0 -16px 22px;padding:0 16px 4px}
 .b-face-b .b-picks{border:0;margin:0 -16px 22px}.b-face-b .b-pick{border:1px solid var(--b-ink)!important}
 .b-pick{flex:0 0 78%;scroll-snap-align:start}
 .b-chips{flex-wrap:nowrap;overflow-x:auto;width:100%}.b-chips label{flex:none;white-space:nowrap}.b-count{margin-left:0}
 .b-free ul{grid-template-columns:minmax(0,1fr)}.b-cards>.b-c{flex-basis:100%}
 .b-cards>.b-c{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;padding:12px}
 .b-cards>.b-c>.b-ch{grid-column:1}.b-cards>.b-c>.b-val{grid-column:2;grid-row:1;flex-direction:column;align-items:flex-end;gap:0}
 .b-cards>.b-c>.b-val b{font-size:22px}.b-cards>.b-c>.b-badge,.b-cards>.b-c>.b-line,.b-cards>.b-c>.b-note,.b-cards>.b-c>.b-out{grid-column:1/-1}.b-cards>.b-c>.b-badge{justify-self:start}
 .b-cards .b-lg{width:34px;height:34px}.b-cards .b-ch b{font-size:16px}
 .b-tbl thead{display:none}.b-tbl,.b-tbl tbody,.b-tbl tr,.b-tbl td{display:block}.b-tbl tr{padding:10px 0;border-bottom:1px solid var(--b-line)}.b-tbl td{border:0;padding:4px 16px}
 .b-tbl td[data-l]{display:flex;gap:10px}.b-tbl td[data-l]:before{content:attr(data-l);flex:0 0 100px;font-size:12px;font-weight:700;text-transform:uppercase;color:var(--b-mut);padding-top:2px}
 .b-tbl td.dup{display:none}.b-tbl .o{text-align:left;padding-top:8px}.b-board .b-bh{flex-direction:column;align-items:flex-start;gap:8px}
 .b-rows .b-it{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px}.b-rows .b-line{grid-column:1/-1;grid-row:2}.b-rows .b-val{grid-column:2;grid-row:1}.b-rows .b-more{grid-column:1/-1;text-align:left}}
@media(max-width:767px){.b-art h1{font-size:27px}
 .b-cards-tbl,.b-cards-tbl tbody,.b-cards-tbl tr,.b-cards-tbl td{display:block}.b-cards-tbl{border:0;background:transparent}
 .b-cards-tbl thead{display:none}.b-cards-tbl tr{background:#fff;border:1px solid var(--b-line);border-radius:12px;margin-bottom:10px;padding:6px 0}
 .b-cards-tbl td{border:0;padding:5px 14px}.b-cards-tbl td:before{content:attr(data-label);display:block;font-size:12px;font-weight:700;text-transform:uppercase;color:var(--b-mut)}
 .b-cards-tbl td.rank{display:none}.b-cards-tbl td.name{font-size:17px}.b-cards-tbl td.name:before{content:none}
 .b-cards-tbl td.name[data-rank]:before{content:'#' attr(data-rank) ' ';display:inline;color:var(--b-acc);font-size:17px;text-transform:none}
 #zoom-blg button{top:-48px;right:0}}
/* ── раскладка A: плитки-цифры справа от заголовка ── */
.b-intro-a{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:start;margin-bottom:22px}
.b-intro-a h1{font-size:36px;line-height:1.12;font-weight:700;letter-spacing:-.02em;margin:0 0 14px;color:var(--b-ink)}
.b-intro-a .lede{margin:0 0 10px;padding:0 0 0 14px;border-left:4px solid var(--b-acc);font-size:16.5px}
.b-intro-a .lede:before{content:"Short answer";display:block;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--b-acc);margin-bottom:2px}
.b-intro-a .byline{font-size:14px;color:var(--b-mut);margin:0}
.b-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.b-tile{background:var(--b-card);border:1px solid var(--b-line);border-radius:var(--b-r);padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.b-tile.wide{grid-column:1/-1}
.b-tile .k{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--b-mut)}
.b-tile .v{font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.1;color:var(--b-ink)}.b-tile .v s{font-size:16px;font-weight:500;color:var(--b-mut)}
.b-tile .s{display:flex;align-items:center;gap:7px;font-size:14px;color:var(--b-mut)}.b-tile img{border-radius:4px}
.b-fchips{display:flex;flex-wrap:wrap;gap:8px}.b-fchips span{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;background:var(--b-okbg);color:var(--b-ok);border-radius:99px;padding:3px 10px 3px 4px}
/* ── раскладка B: редакция с правой колонкой ── */
.b-intro-b{border-bottom:3px double var(--b-ink);padding-bottom:18px;margin-bottom:22px}
.b-kick{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--b-acc);margin:0 0 6px}
.b-intro-b h1{font-size:42px;line-height:1.08;font-weight:700;letter-spacing:-.025em;margin:0 0 10px;color:var(--b-ink);max-width:900px}
.b-intro-b .byline{font-size:14px;color:var(--b-mut);margin:0 0 14px}
.b-intro-b .lede{margin:0;max-width:880px;font-size:19px;line-height:1.5;padding-left:18px;border-left:3px solid var(--b-acc)}
.b-cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:32px;align-items:start}
.b-main>section+section{margin-top:30px}.b-face-b .b-main .b-panel{margin-top:30px}
.b-aside{position:sticky;top:20px;display:flex;flex-direction:column;gap:18px}
.b-aside .b-free{margin:0}.b-aside .b-free ul{grid-template-columns:minmax(0,1fr)}
.b-face-b .b-picks{margin-bottom:0}
/* ── формы карточек витрины ── */
.b-cards-shadow .b-pick,.b-cards-shadow .b-cards>.b-c,.b-cards-shadow .b-tile,.b-cards-shadow .b-panel,.b-cards-shadow .b-free,.b-cards-shadow .b-board{border-color:transparent;box-shadow:0 1px 2px rgba(16,24,40,.06),0 6px 18px -8px rgba(16,24,40,.18)}
.b-cards-flat .b-pick,.b-cards-flat .b-cards>.b-c,.b-cards-flat .b-tile,.b-cards-flat .b-panel,.b-cards-flat .b-free,.b-cards-flat .b-board{border:0;background:color-mix(in srgb,var(--b-tag) 55%,white)}
/* ── заголовки блоков ── */
.b-home.b-head-caps h2{font-size:14px;text-transform:uppercase;letter-spacing:.09em;color:var(--b-acc)}
.b-home.b-head-rule h2{padding-bottom:8px;border-bottom:2px solid var(--b-ink)}
@media(max-width:900px){.b-intro-a,.b-cols{grid-template-columns:minmax(0,1fr)}.b-intro-a h1{font-size:27px}.b-intro-b h1{font-size:29px}.b-intro-b .lede{font-size:17px}
 .b-aside{position:static}
 .b-tiles{grid-template-columns:minmax(0,1fr);gap:8px}.b-tile:not(.wide){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;padding:10px 14px}
 .b-tile:not(.wide) .k{grid-column:1}.b-tile:not(.wide) .s{grid-column:1}.b-tile:not(.wide) .v{grid-column:2;grid-row:1/span 2;align-self:center;font-size:24px}}
/* устойчивость к стилям тем (Clarity центрирует картинки и текст) */
.b-home,.b-art-wrap{text-align:left}.b-home img,.b-art-wrap img{margin:0;max-width:100%}
.b-ch>div{flex:1;min-width:0}.b-free li>div{flex:1;min-width:0}
.b-rows .b-val span{font-size:13px;color:var(--b-mut);text-align:right}
/* широкие экраны: сетки растут, текстовые блоки держат длину строки */
.b-home p,.b-home .lede{max-width:78ch}.b-intro .lede{max-width:none}
.b-home .b-line,.b-home .b-q p{color:color-mix(in srgb,var(--b-ink) 82%,white)}
/* Широкий экран (Safari на MacBook — 1470–1728px): не растягиваем вёрстку, а пропорционально увеличиваем её,
   как она выглядит в окне ~1100px. Колонка по центру, по краям ровные поля одного цвета (Даня 30.10: «растянуто»). */
@media(min-width:1380px){.b-home,.b-art-wrap{zoom:1.08}}
@media(min-width:1650px){.b-home,.b-art-wrap{zoom:1.14}}
/* статьи на главной */
.b-guides{margin:28px 0 0}
.b-gcards{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}.b-gcards>.b-g{flex:0 0 calc((100% - 28px)/3);min-width:0}
.b-g{display:flex;flex-direction:column;gap:6px;background:var(--b-card);border:1px solid var(--b-line);border-radius:var(--b-r);padding:16px;text-decoration:none!important;color:var(--b-ink)!important;transition:.15s}
.b-g:hover{border-color:var(--b-acc);transform:translateY(-2px)}
.b-g b{font-size:18px;line-height:1.3}.b-g p{margin:0;font-size:14.5px;color:color-mix(in srgb,var(--b-ink) 80%,white);flex:1}
.b-g .b-kick{margin:0;font-size:12px}.b-g .b-more{color:var(--b-acc);font-weight:700;font-size:14px;text-align:left}
@media(max-width:900px){.b-gcards>.b-g{flex-basis:100%}}
/* окно увеличения — всегда по центру экрана и целиком в нём, что бы ни задавала тема для <dialog> */
#zoom-blg[open]{position:fixed!important;inset:0!important;margin:auto!important;width:fit-content!important;height:fit-content!important;max-width:94vw!important;max-height:92vh!important;padding:0!important;transform:none!important;zoom:1!important}
#zoom-blg img{max-width:94vw!important;max-height:86vh!important;width:auto!important;height:auto!important;margin:0!important}