/* Статьи квадрата Пифагора /kvadrat-pifagora/<slug> (выкат 2, 28.10.2026). Один файл стилей страницы:
   1) встроенные стили шаблона гайдов hv (app/views/numerology/articles/_template_guide_hv.html.erb) — статьи квадрата идут
      своим шаблоном, а вид обязан совпадать с живыми гайдами;
   2) объекты статей цифр — kb.css демо окна SEO (knowledge/design/_work/demo/_src_blog) без демо-заплаток: заглушки картинок
      (kb-ph) и прятанье ряда калькуляторов в шапке. Первый экран — обложка партии 3 в свечении (kb-stage), сцены — kb-scene;
   3) тренажёр «Как рассчитать» — kk.css. Порядок правил демо сохранён: каскад тот же, что на сверенном холсте. */

/* ── 1. шаблон гайдов hv ── */
  /* Таблицы гайдов с текстовыми колонками (03.10: «Что даёт / Когда дорого»,
     22 аркана). hv.css на телефоне ставит таблицам nowrap — для долей это
     верно, а текстовая колонка в одну строку растягивала таблицу в 4,4 экрана.
     Здесь текст переносится, колонка не уже 8,5em, первая (номер) как была. */
  @media (max-width:640px){
    .hv-prose > table{ white-space:normal; }
    .hv-prose > table td, .hv-prose > table th{ min-width:8.5em; }
    .hv-prose > table td:first-child, .hv-prose > table th:first-child{ min-width:0; }
  }

  /* Сводная таблица позиций Г0 (Роман 03.10: первый столбец уже, третий шире,
     во всю ширину листа). Лист A4 794px с полями 76px — таблица выходит в поля
     на 52px с каждой стороны. Буква точки — кружок в цветах октограммы
     (DESIGN.md, решение 8): e золото, a/b слива, c/d красный. */
  #tablica-pozicij .hv-prose > table{
    width:calc(100% + 104px); margin:24px -52px 28px; table-layout:fixed;
    border:1px solid var(--hv-line); border-radius:14px; font-size:.92rem;
  }
  #tablica-pozicij .hv-prose > table th:nth-child(1){ width:24%; }
  #tablica-pozicij .hv-prose > table th:nth-child(2){ width:17%; }
  #tablica-pozicij .hv-prose > table th:nth-child(3){ width:43%; }
  #tablica-pozicij .hv-prose > table th:nth-child(4){ width:16%; }
  #tablica-pozicij .hv-prose > table th,
  #tablica-pozicij .hv-prose > table td{ border-right:0; padding:13px 16px; }
  #tablica-pozicij .hv-prose > table th{ padding-top:12px; padding-bottom:10px; }
  #tablica-pozicij .hv-prose > table tbody tr:nth-child(odd) td{ background:transparent; }
  #tablica-pozicij .hv-prose > table tbody tr:nth-child(n+6) td{ background:var(--hv-cream); }
  #tablica-pozicij .hv-prose > table tbody tr:nth-child(6) td{ border-top:2px solid var(--hv-line); }
  #tablica-pozicij .hv-prose > table td:first-child{
    white-space:normal; font-size:1rem; line-height:1.3; color:var(--hv-ink);
  }
  #tablica-pozicij .hv-prose > table td:first-child strong{
    display:inline-flex; align-items:center; justify-content:center;
    width:26px; height:26px; margin:0 8px 0 0; border-radius:50%;
    font-family:var(--hv-serif); font-size:.95rem; font-weight:800; line-height:1;
    color:#fff; background:#4c2168; vertical-align:-2px;
  }
  #tablica-pozicij .hv-prose > table tr:nth-child(1) td:first-child strong{ background:#c9a24b; }
  #tablica-pozicij .hv-prose > table tr:nth-child(4) td:first-child strong,
  #tablica-pozicij .hv-prose > table tr:nth-child(5) td:first-child strong{ background:#b8433a; }
  #tablica-pozicij .hv-prose > table td:nth-child(2){ color:var(--hv-ink3); font-size:.86rem; }
  #tablica-pozicij .hv-prose > table td:nth-child(3){ color:var(--hv-ink); }
  #tablica-pozicij .hv-prose > table td:nth-child(4) a{
    font-size:.86rem; border-bottom:0; white-space:normal;
  }
  #tablica-pozicij .hv-prose > table td:nth-child(4) a::after{ content:" →"; }
  @media (max-width:820px){
    #tablica-pozicij .hv-prose > table{ width:100%; margin:24px 0 28px; }
  }
  /* Таблица 16 центров (зона комфорта, 03.10): миниатюра карты + имя ссылкой. */
  #kakie-znacheniya-byvayut .hv-prose > table{ table-layout:fixed; width:calc(100% + 104px); margin:24px -52px 28px; }
  #kakie-znacheniya-byvayut .hv-prose > table th:nth-child(1){ width:9%; }
  #kakie-znacheniya-byvayut .hv-prose > table th:nth-child(2){ width:18%; }
  #kakie-znacheniya-byvayut .hv-prose > table th:nth-child(3){ width:11%; }
  #kakie-znacheniya-byvayut .hv-prose > table th:nth-child(4),
  #kakie-znacheniya-byvayut .hv-prose > table th:nth-child(5){ width:31%; }
  #kakie-znacheniya-byvayut .hv-prose > table td{ vertical-align:middle; padding:9px 12px; }
  #kakie-znacheniya-byvayut .hv-prose > table td:first-child{ padding:6px 8px; }
  #kakie-znacheniya-byvayut .hv-prose > table td:first-child a{ border:0; display:block; }
  #kakie-znacheniya-byvayut .hv-prose > table td:first-child img{
    width:44px; height:auto; display:block; margin:0 auto; border-radius:4px;
    box-shadow:0 2px 6px rgba(51,22,63,.18);
  }
  #kakie-znacheniya-byvayut .hv-prose > table td:nth-child(2){ white-space:normal; font-family:var(--hv-serif); }
  #kakie-znacheniya-byvayut .hv-prose > table td:nth-child(2) a{ color:var(--hv-plum2); border-bottom:1px solid rgba(76,33,104,.25); }
  #kakie-znacheniya-byvayut .hv-prose > table td:nth-child(3){ white-space:nowrap; font-weight:600; color:var(--hv-ink); }
  @media (max-width:820px){
    #kakie-znacheniya-byvayut .hv-prose > table{ width:100%; margin:24px 0 28px; }
  }
  @media (max-width:640px){
    #kakie-znacheniya-byvayut .hv-prose > table,
    #kakie-znacheniya-byvayut .hv-prose > table tbody,
    #kakie-znacheniya-byvayut .hv-prose > table td{ display:block; width:auto; min-width:0; white-space:normal; }
    #kakie-znacheniya-byvayut .hv-prose > table tr{
      display:grid; grid-template-columns:52px 1fr; column-gap:12px; align-items:start;
      border:1px solid var(--hv-line); border-radius:12px; margin:0 0 10px; padding:10px 12px; background:var(--hv-paper);
    }
    #kakie-znacheniya-byvayut .hv-prose > table{ overflow:visible; border:0; background:transparent; }
    #kakie-znacheniya-byvayut .hv-prose > table thead{ display:none; }
    #kakie-znacheniya-byvayut .hv-prose > table td{ border:0 !important; padding:2px 0; background:transparent !important; grid-column:2; }
    #kakie-znacheniya-byvayut .hv-prose > table td:first-child{ grid-column:1; grid-row:1 / span 4; padding:0; }
    #kakie-znacheniya-byvayut .hv-prose > table td:nth-child(3)::before{ content:"Доля дат: "; font-weight:400; color:var(--hv-ink3); }
  }
  /* 16 карточек центра (центр матрицы, 03.10): миниатюра карты слева, текст справа. */
  #znacheniya-arkanov-v-centre .hv-prose > ul > li{ padding-left:68px; min-height:78px; margin-bottom:16px; }
  #znacheniya-arkanov-v-centre .hv-prose > ul > li::before{ display:none; }
  #znacheniya-arkanov-v-centre .hv-prose > ul > li img{
    position:absolute; left:0; top:2px; width:52px; height:auto; border-radius:5px;
    box-shadow:0 2px 6px rgba(51,22,63,.18);
  }
  /* Телефон: строка — карточка (точка, где на схеме, смысл, ссылка). */
  @media (max-width:640px){
    #tablica-pozicij .hv-prose > table,
    #tablica-pozicij .hv-prose > table tbody,
    #tablica-pozicij .hv-prose > table tr,
    #tablica-pozicij .hv-prose > table td{ display:block; width:auto; min-width:0; white-space:normal; }
    #tablica-pozicij .hv-prose > table{ overflow:visible; border:0; background:transparent; }
    #tablica-pozicij .hv-prose > table thead{ display:none; }
    #tablica-pozicij .hv-prose > table tr{
      border:1px solid var(--hv-line); border-radius:12px; margin:0 0 10px;
      padding:12px 14px; background:var(--hv-paper);
    }
    #tablica-pozicij .hv-prose > table tbody tr:nth-child(n+6){ background:var(--hv-cream); }
    #tablica-pozicij .hv-prose > table td{ border:0 !important; padding:2px 0; background:transparent !important; }
    #tablica-pozicij .hv-prose > table td:first-child{ margin-bottom:2px; }
  }
  /* Таблица с миниатюрами карт (section.layout "arctable", 03.10): во всю ширину
     листа, карта в первой колонке. Телефон — карточка: карта слева, поля справа
     с подписью колонки из data-label (GuideVisualsHelper#guide_table_labels). */
  /* table-layout:fixed — ширины колонок задаём сами: длинная шапка («Как прорабатывать:
     действие на неделю») и колонка чисел иначе раздували таблицу за край листа (03.10). */
  .hv-lay-arctable .hv-prose > table{ width:calc(100% + 104px); margin:24px -52px 28px; font-size:.92rem; table-layout:fixed; }
  .hv-lay-arctable .hv-prose > table th{ white-space:normal; line-height:1.35; }
  .hv-lay-arctable .hv-prose > table th:first-child{ width:66px; }
  .hv-lay-arctable .hv-prose > table th.is-num{ width:68px; }
  .hv-lay-arctable .hv-prose > table th:last-child{ width:36%; }
  .hv-lay-arctable .hv-prose > table td{ vertical-align:middle; padding:9px 12px; white-space:normal; }
  .hv-lay-arctable .hv-prose > table td:first-child{ padding:6px 8px; }
  .hv-lay-arctable .hv-prose > table td:first-child a{ border:0; display:block; }
  .hv-lay-arctable .hv-prose > table td:first-child img{
    width:44px; height:auto; display:block; margin:0 auto; border-radius:4px;
    box-shadow:0 2px 6px rgba(51,22,63,.18);
  }
  .hv-lay-arctable .hv-prose > table td:nth-child(2){ font-family:var(--hv-serif); }
  .hv-lay-arctable .hv-prose > table td:nth-child(2) a{ color:var(--hv-plum2); border-bottom:1px solid rgba(76,33,104,.25); }
  @media (max-width:820px){
    .hv-lay-arctable .hv-prose > table{ width:100%; margin:24px 0 28px; }
  }
  @media (max-width:640px){
    .hv-lay-arctable .hv-prose > table,
    .hv-lay-arctable .hv-prose > table tbody,
    .hv-lay-arctable .hv-prose > table td{ display:block; width:auto; min-width:0; white-space:normal; }
    .hv-lay-arctable .hv-prose > table{ overflow:visible; border:0; background:transparent; }
    .hv-lay-arctable .hv-prose > table thead{ display:none; }
    .hv-lay-arctable .hv-prose > table tr{
      display:grid; grid-template-columns:52px 1fr; column-gap:12px; align-items:start;
      border:1px solid var(--hv-line); border-radius:12px; margin:0 0 10px; padding:10px 12px; background:var(--hv-paper);
    }
    .hv-lay-arctable .hv-prose > table td{ border:0 !important; padding:2px 0; background:transparent !important; grid-column:2; }
    .hv-lay-arctable .hv-prose > table td:first-child{ grid-column:1; grid-row:1 / span 6; padding:0; }
    .hv-lay-arctable .hv-prose > table td:nth-child(2){ font-size:1.05rem; font-weight:700; }
    .hv-lay-arctable .hv-prose > table td:nth-child(n+3)[data-label]::before{
      content:attr(data-label) ": "; color:var(--hv-ink3); font-size:.85em;
    }
  }
  /* График долей дат (section.bars). */
  .hv-bars{ max-width:560px; margin:22px auto 6px; }
  .hv-bars-t{ font-family:var(--hv-serif); font-weight:700; font-size:1rem; color:var(--hv-ink); margin:0 0 10px; }
  .hv-bar{ display:grid; grid-template-columns:2.4em 1fr 4.8em; gap:10px; align-items:center; margin:0 0 5px; font-size:.9rem; }
  .hv-bar-l{ color:var(--hv-ink2); white-space:nowrap; font-variant-numeric:tabular-nums; }
  .hv-bar-t{ height:14px; background:var(--hv-cream); border-radius:7px; overflow:hidden; }
  .hv-bar-t i{ display:block; height:100%; border-radius:7px; opacity:.85; }
  .hv-bar-v{ text-align:right; color:var(--hv-ink); font-variant-numeric:tabular-nums; }
  .hv-bar.is-hot .hv-bar-l, .hv-bar.is-hot .hv-bar-v{ font-weight:700; color:var(--hv-ink); }
  .hv-bars-n{ margin:10px 0 0; font-size:.85rem; line-height:1.45; color:var(--hv-ink3); }
  /* Схема-октограмма в разделе гайда: крупно по центру, легенда под ней.
     Рядом с текстом схема сжималась до 300 px, и числа на лучах не читались. */
  .hv-mdg{margin:20px 0 4px}
  .hv-mdg svg{width:100%;max-width:460px;height:auto;display:block;margin:0 auto}
  .hv-mdg-leg{max-width:560px;margin:10px auto 0;font-size:15px;line-height:1.5;color:var(--hv-ink2)}
  .hv-mdg-leg div{display:flex;gap:9px;align-items:baseline;margin:0 0 8px}
  .hv-mdg-leg i{flex:none;width:11px;height:11px;border-radius:50%;transform:translateY(1px)}
  .hv-mdg-leg b,.hv-mdg-leg strong{color:var(--hv-ink);font-variant-numeric:tabular-nums}
  .hv-mdg-leg a{color:var(--hv-gold);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(168,132,43,.35)}
/* ── 2. объекты статей цифр ── */
/* Объекты статей квадрата в шаблоне блога hv (28.10.2026). Токены hv, цвета цифр — палитра А посадочной квадрата. */
:root{--kb-1:#c35045;--kb-2:#df8623;--kb-3:#297ab6;--kb-4:#3b9555;--kb-5:#8264c8;--kb-6:#008c8d;--kb-7:#c3518d;--kb-8:#4c2168;--kb-9:#b8913a;--kb-9s:#fbf3df}

/* ── мини-калькулятор ── */
.kb-calc-sec{padding-top:6px}
.kb-calc{position:relative;padding:30px 30px 26px;border-radius:22px;background:linear-gradient(180deg,#fdf8ec 0%,#fffdf9 70%);border:1px solid #ead9ad;box-shadow:0 18px 40px -24px rgba(125,96,25,.45)}
.kb-calc-eb{display:inline-block;font:600 12px/1 var(--hv-sans);letter-spacing:.02em;color:var(--hv-gold-deco);padding:6px 10px;border-radius:999px;background:#f6ead0}
.kb-calc-h h2{margin:12px 0 6px;font:700 34px/1.12 var(--hv-serif);color:var(--hv-plum)}.kb-calc-h h2 em{font-style:normal;color:var(--kd,#b8913a)}
.kb-calc-h p{margin:0;max-width:34em;font:400 16px/1.5 var(--hv-sans);color:var(--hv-ink2)}
.kb-calc-f{position:relative;display:flex;gap:10px;margin:18px 0 6px}
.kb-calc-f input,.kb-final-f input{flex:1;min-width:0;height:54px;border:1.5px solid #e2cf9e;border-radius:14px;padding:0 18px;font:600 20px var(--hv-sans);letter-spacing:.04em;color:var(--hv-ink);background:#fff;outline:none}
.kb-calc-f input:focus,.kb-final-f input:focus{border-color:var(--kd,#b8913a);box-shadow:0 0 0 4px #f6ead0}
.kb-calc-f button,.kb-final-f button{height:54px;padding:0 26px;border:0;border-radius:14px;background:var(--hv-plum2);color:#fff;font:600 16px var(--hv-sans);cursor:pointer}
.kb-calc-f button:hover,.kb-final-f button:hover{background:var(--hv-plum3)}
.kb-calc-err{display:block;margin-top:6px;font-size:13px;color:#b5483a}
.kb-calc-r{display:grid;grid-template-columns:232px minmax(0,1fr);gap:26px;align-items:start;margin-top:18px;transition:opacity .2s}
.kb-calc-r.fresh .kb-calc-n{animation:kb-pop .45s ease-out}
@keyframes kb-pop{0%{transform:scale(.7);opacity:0}100%{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.kb-calc-r.fresh .kb-calc-n{animation:none}}
.kb-calc-tag{display:inline-block;font:500 12px var(--hv-sans);color:var(--hv-ink3,#8a7d8f);border:1px dashed #d8c7a0;border-radius:999px;padding:4px 10px}
.kb-calc-tag.mine{color:var(--hv-plum2);border:1px solid #d9c08a;background:#fff}
.kb-calc-n{margin:6px 0 2px;font:800 64px/1 var(--hv-serif);letter-spacing:.04em;color:var(--kd,#b8913a);word-break:break-all}
.kb-calc-n.empty{font-size:44px;color:var(--hv-ink3,#8a7d8f)}
.kb-calc-lt{margin:6px 0 4px;font:700 20px/1.3 var(--hv-serif);color:var(--hv-plum)}
.kb-calc-lx{margin:0 0 14px;font:400 15.5px/1.55 var(--hv-sans);color:var(--hv-ink2)}
.kb-calc-bar{display:flex;gap:3px;height:34px}
.kb-calc-bar i{position:relative;display:block;min-width:6px;border-radius:6px;background:#efe6d3}
.kb-calc-bar i.on{background:var(--kd,#b8913a);box-shadow:0 0 0 3px #f6ead0}
.kb-calc-bar em{position:absolute;left:0;right:0;bottom:-18px;font:500 11px var(--hv-sans);font-style:normal;text-align:center;color:var(--hv-ink3,#8a7d8f);white-space:nowrap;overflow:hidden}
.kb-calc-bar i.on em{color:var(--kd,#b8913a);font-weight:700}
.kb-calc-bc{margin:26px 0 0;font:500 14.5px/1.5 var(--hv-sans);color:var(--hv-ink)}.kb-calc-bc b{color:var(--kd,#b8913a)}
.kb-calc-src{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.kb-calc-src span{font:500 13px var(--hv-sans);padding:6px 10px;border-radius:9px;background:#fff;border:1px solid #ecdcb3;color:var(--hv-ink2)}.kb-calc-src span b{color:var(--kd,#b8913a)}
.kb-calc-cmp{margin-top:22px;padding-top:18px;border-top:1px dashed #e2cf9e}
.kb-calc-cmp-h b{display:block;font:700 18px var(--hv-serif);color:var(--hv-plum)}.kb-calc-cmp-h span{font-size:14px;color:var(--hv-ink2)}
.kb-calc-cmp ol{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.kb-calc-cmp li{display:grid;grid-template-columns:28px 110px 1fr auto;gap:12px;align-items:center;padding:9px 14px;border-radius:12px;background:#fff;border:1px solid #efe3c7;font:500 14px var(--hv-sans);color:var(--hv-ink2)}
.kb-calc-cmp li .p{font:700 15px var(--hv-serif);color:var(--hv-ink3,#8a7d8f)}
.kb-calc-cmp li .n{font:800 22px var(--hv-serif);letter-spacing:.04em;color:var(--kd,#b8913a)}
.kb-calc-cmp li.top{border-color:var(--kd,#b8913a);background:color-mix(in srgb,var(--kd,#b8913a) 6%,#fff)}.kb-calc-cmp li.top .p{color:var(--kd,#b8913a)}
.kb-calc-cmp li .x{border:0;background:none;color:var(--hv-ink3,#8a7d8f);font-size:18px;cursor:pointer}
.kb-calc-go{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:22px;padding:16px 18px;border-radius:16px;background:var(--hv-lilacs,#ece4f6)}
.kb-calc-go>span{flex:1 1 260px;font:500 14.5px/1.45 var(--hv-sans);color:var(--hv-ink)}
.kb-calc-g{display:flex;gap:14px;font:500 14px var(--hv-sans);color:var(--hv-ink2)}.kb-calc-g label{display:flex;gap:6px;align-items:center;cursor:pointer}
.kb-calc-btn{display:inline-flex;align-items:center;height:48px;padding:0 22px;border-radius:13px;background:linear-gradient(135deg,#f3e2b8,#d9b774);color:var(--hv-plum);font:700 15px var(--hv-sans);text-decoration:none;box-shadow:0 10px 22px -10px #b8913a}

/* мини-квадрат */
.kb-sq{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:10px;border-radius:16px;background:#fff;border:1px solid #ecdcb3}
.kb-sq .c{display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:1;border-radius:10px;background:#faf5ec;transition:all .25s}
.kb-sq .c b{font:700 20px/1 var(--hv-serif);letter-spacing:.02em;color:var(--cc);max-width:100%;overflow:hidden;text-overflow:clip;white-space:nowrap}
.kb-sq .c i{margin-top:4px;font:500 9.5px/1.1 var(--hv-sans);font-style:normal;color:var(--hv-ink3,#8a7d8f);text-align:center}
.kb-sq .c.e b{color:#cdbfa8}
.kb-sq .c.on{background:color-mix(in srgb,var(--kd,#b8913a) 12%,#fff);box-shadow:0 0 0 2px var(--kd,#b8913a),0 8px 18px -8px var(--kd,#b8913a)}
.kb-sq .c.on i{color:var(--kd,#b8913a);font-weight:700}
.kb-sq:not(.on9) .c:not(.on){opacity:.72}

/* откуда девятки */
.kb-src2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:22px 0 8px}
.kb-src{margin:0;padding:16px;border-radius:16px;background:var(--hv-paper);border:1px solid var(--hv-line)}
.kb-src figcaption{margin-bottom:12px;font:500 14px var(--hv-sans);color:var(--hv-ink2)}.kb-src figcaption b{color:var(--hv-ink)}.kb-src figcaption strong{font:800 18px var(--hv-serif);color:var(--kd,#b8913a)}
.kb-src-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px;margin-top:8px}
.kb-src-l{flex-basis:100%;font:600 11.5px var(--hv-sans);color:var(--hv-ink3,#8a7d8f)}
.kb-src-c{display:flex;flex-direction:column;align-items:center;min-width:46px;padding:6px 8px;border-radius:10px;background:#faf5ec}
.kb-src-c small{font:500 10.5px var(--hv-sans);color:var(--hv-ink3,#8a7d8f)}
.kb-src-c b{font:700 19px var(--hv-serif);letter-spacing:.03em;color:var(--hv-ink2)}
.kb-src-c em{font-style:normal;color:var(--kd,#b8913a);text-shadow:0 0 12px rgba(184,145,58,.45)}
.kb-src-c.hit{background:color-mix(in srgb,var(--kd,#b8913a) 12%,#fff);box-shadow:inset 0 0 0 1.5px #e7cf95}
.kb-cap{margin:6px 0 0;font:400 13.5px var(--hv-sans);color:var(--hv-ink3,#8a7d8f)}

/* поколения */
.kb-chart{margin:20px 0 18px;padding:18px 20px 16px;border-radius:18px;background:var(--hv-paper);border:1px solid var(--hv-line)}
.kb-ch-key{display:flex;gap:18px;margin-bottom:12px;font:500 13px var(--hv-sans);color:var(--hv-ink2)}
.kb-ch-key span:before{content:"";display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.kb-ch-key .o:before{background:var(--hv-plum2)}.kb-ch-key .y:before{background:var(--kd,#b8913a)}
.kb-ch-r{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:center;padding:6px 8px;border-radius:10px}
.kb-ch-l{font:700 17px var(--hv-serif);letter-spacing:.03em;color:var(--kd,#b8913a);text-align:right}
.kb-ch-bars{display:grid;gap:4px}
.kb-ch-bars i{position:relative;display:block;height:14px;width:var(--w);min-width:4px;border-radius:0 7px 7px 0}
.kb-ch-bars i.o{background:var(--hv-plum2)}.kb-ch-bars i.y{background:var(--kd,#b8913a)}
.kb-ch-bars em{position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);font:600 12.5px var(--hv-sans);font-style:normal;color:var(--hv-ink2);white-space:nowrap}
.kb-ch-r.me{background:color-mix(in srgb,var(--kd,#b8913a) 12%,#fff);box-shadow:inset 0 0 0 1.5px #e7cf95}
.kb-ch-r.me .kb-ch-l:after{content:"ты";display:block;font:700 10px var(--hv-sans);color:var(--hv-plum2)}
.kb-chart figcaption{margin-top:10px;font:400 13px var(--hv-sans);color:var(--hv-ink3,#8a7d8f)}.kb-you-cap{color:var(--hv-plum2);font-weight:600}

/* лестница уровней */
.kb-lad{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.kb-lad li{position:relative;display:grid;grid-template-columns:118px minmax(0,1fr) 112px;gap:18px;align-items:center;padding:16px 18px;border-radius:16px;background:var(--hv-paper);border:1px solid var(--hv-line);transition:all .25s}
.kb-lad-d{display:flex;justify-content:center}
.kb-lad-d b{font:800 30px/1 var(--hv-serif);letter-spacing:.06em;color:var(--kd,#b8913a)}
.kb-lad li:nth-child(5) .kb-lad-d b,.kb-lad li:nth-child(6) .kb-lad-d b{font-size:24px}
.kb-lad-d i{width:44px;height:44px;border-radius:50%;border:2.5px dashed #d8c7a0}
.kb-lad-t h3{margin:0 0 4px;font:700 18px/1.3 var(--hv-serif);color:var(--hv-plum)}
.kb-lad-t p{margin:0;font:400 15px/1.55 var(--hv-sans);color:var(--hv-ink2)}
.kb-lad-s{display:grid;gap:6px;text-align:right}
.kb-lad-s span{font:500 11.5px var(--hv-sans);color:var(--hv-ink3,#8a7d8f)}.kb-lad-s b{display:block;font:700 16px var(--hv-sans);color:var(--hv-ink)}
.kb-lad li.me{border-color:var(--kd,#b8913a);background:color-mix(in srgb,var(--kd,#b8913a) 6%,#fff);box-shadow:0 12px 26px -16px rgba(184,145,58,.8)}
.kb-lad li.me:before{content:"твой уровень";position:absolute;top:-10px;left:18px;font:700 11px var(--hv-sans);color:#fff;background:var(--kd,#b8913a);padding:3px 9px;border-radius:999px}


/* работа и отношения */
.kb-two{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.kb-two>div{padding:20px;border-radius:18px;background:var(--hv-paper);border:1px solid var(--hv-line);border-top:4px solid var(--kd,#b8913a)}
.kb-two>div+div{border-top-color:var(--hv-plum2)}
.kb-two small{display:block;margin-bottom:6px;font:700 12px var(--hv-sans);color:var(--hv-gold-deco)}.kb-two>div+div small{color:var(--hv-plum2)}
.kb-two p{margin:0;font:400 16px/1.6 var(--hv-sans);color:var(--hv-ink)}

/* линии */
.kb-li{display:grid;grid-template-columns:250px minmax(0,1fr);gap:26px;align-items:center;margin-top:12px}
.kb-li-fig{padding:12px;border-radius:18px;background:var(--hv-paper);border:1px solid var(--hv-line)}
.kb-lines{display:block;width:100%;height:auto}
.kb-lines line{stroke-width:10;stroke-linecap:round;opacity:.85}
.kb-lines .l1{stroke:#008c8d}.kb-lines .l2{stroke:#c3518d}.kb-lines .l3{stroke:#8264c8}
.kb-lines .n{fill:#fff;stroke:var(--cc);stroke-width:2.5}.kb-lines .n.nine{fill:#fbf3df;stroke-width:4}
.kb-lines .t{font:700 20px var(--hv-serif,Georgia);text-anchor:middle}
.kb-li ul{list-style:none;padding:0}.kb-li li{position:relative;padding-left:22px}
.kb-li li:before{content:"";position:absolute;left:0;top:.55em;width:12px;height:4px;border-radius:2px;background:#008c8d}
.kb-li li:nth-child(2):before{background:#c3518d}.kb-li li:nth-child(3):before{background:#8264c8}
.kb-li-you{margin-top:12px;padding:12px 16px;border-radius:12px;background:color-mix(in srgb,var(--kd,#b8913a) 12%,#fff);font:500 14.5px var(--hv-sans);color:var(--hv-ink)}

/* шаги */
.kb-steps{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.kb-steps li{padding:18px;border-radius:18px;background:var(--hv-paper);border:1px solid var(--hv-line)}
.kb-steps span{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,var(--kd,#b8913a) 12%,#fff);color:var(--kd,#b8913a);font:800 17px var(--hv-serif);box-shadow:inset 0 0 0 1.5px #e7cf95}
.kb-steps p{margin:10px 0 0;font:400 15px/1.55 var(--hv-sans);color:var(--hv-ink)}

/* финальная полоса */
.kb-final{margin:28px auto 0;max-width:var(--hv-axis,794px);border-radius:22px;background:linear-gradient(180deg,#eaf2f9,#f6f9fc);overflow:hidden;border:1px solid #dbe7f1}
.kb-final-in{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:10px;align-items:end;padding:34px 0 0 40px}
.kb-final h2{margin:12px 0 8px;font:700 30px/1.15 var(--hv-serif);color:var(--hv-plum)}.kb-final h2 em{font-style:normal;color:var(--kd,#b8913a)}
.kb-final p{margin:0 0 16px;font:400 15.5px/1.5 var(--hv-sans);color:var(--hv-ink2)}
.kb-final-f{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding-bottom:34px}
.kb-final-f input{flex:1 1 180px}
.kb-final-g{display:flex;gap:12px;font:500 14px var(--hv-sans);color:var(--hv-ink2)}
.kb-final img{display:block;width:300px;height:auto;margin-bottom:-4px}

@media (max-width:820px){
  .kb-calc{padding:22px 16px 18px}.kb-calc-h h2{font-size:27px}
  .kb-calc-f{flex-wrap:wrap}.kb-calc-f button{flex:1 1 100%}
  .kb-calc-r{grid-template-columns:1fr;gap:16px}.kb-calc-sq{max-width:260px}
  .kb-calc-n{font-size:52px}
  .kb-calc-cmp li{grid-template-columns:24px 92px 1fr auto;gap:8px;padding:8px 10px}
  .kb-src2,.kb-two,.kb-steps{grid-template-columns:1fr}
  .kb-lad li{grid-template-columns:72px minmax(0,1fr);gap:12px;padding:14px}
  .kb-lad-d b{font-size:22px}.kb-lad li:nth-child(5) .kb-lad-d b,.kb-lad li:nth-child(6) .kb-lad-d b{font-size:17px}
  .kb-lad-s{grid-column:1/-1;display:flex;gap:16px;text-align:left}
  .kb-li{grid-template-columns:1fr}.kb-li-fig{max-width:240px}
  .kb-ch-r{grid-template-columns:54px 1fr}.kb-ch-bars i{max-width:calc(100% - 64px)}
  .kb-final-in{grid-template-columns:1fr;padding:24px 16px 0}.kb-final img{width:220px;margin:0 auto}.kb-final-f{padding-bottom:8px}
}
.kb-ch-bars{padding-right:70px}

.kb-calc-h{text-align:center}.kb-calc-h p{margin:0 auto}
.kb-calc-src>span:first-child{border:0;background:none;padding-left:0;color:var(--hv-ink3,#8a7d8f)}
/* первый экран: предмет без фона в тёплом свечении вместо белой карточки */
.hv-art-stage.kb-stage{display:flex;justify-content:center;align-items:center;aspect-ratio:16/8;border-radius:18px;background:radial-gradient(closest-side,#fbf0d4 0%,#f1dcaa 55%,rgba(241,220,170,0) 100%)}
.hv-art-stage.kb-stage img{width:auto!important;height:100%!important;max-height:100%;object-fit:contain;background:none!important;box-shadow:none!important;border-radius:0!important;filter:drop-shadow(0 18px 24px rgba(30,10,40,.35))}

.hvl .hv-section>h2{text-align:left}.hvl .hv-section>.hv-eyebrow{justify-content:flex-start;text-align:left}
.kb-ch-bars i[style*='--w:0.0%']{display:none}
/* переключатель пола: стили сайта растягивают input — возвращаем радио */
.kb-final-g label,.kb-calc-g label{display:inline-flex!important;align-items:center;gap:6px;margin:0;font-weight:500}
.kb-final-g input,.kb-calc-g input{width:auto!important;height:auto!important;margin:0!important;flex:none;accent-color:var(--hv-plum2)}
.kb-final-in{align-items:center}.kb-final img{align-self:end}

/* цвет цифры статьи (28.10): подсветки, свечение первого экрана, легенда линий */
.hv-art-stage.kb-stage{background:radial-gradient(closest-side,color-mix(in srgb,var(--kd,#b8913a) 22%,#fff7e6) 0%,color-mix(in srgb,var(--kd,#b8913a) 38%,#f1dcaa) 55%,rgba(241,220,170,0) 100%)}
.kb-li-leg{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:4px;font:500 13px var(--hv-sans);color:var(--hv-ink2)}
.kb-li-leg li{display:flex;align-items:center;gap:8px}.kb-li-leg li:before{content:"";width:16px;height:5px;border-radius:3px;background:var(--lc)}
.kb-li-leg b{color:var(--hv-ink)}
.kb-li .hv-prose li:before{display:none}.kb-li .hv-prose ul{padding-left:18px;list-style:disc}
.kb-tbl{overflow-x:auto;margin:16px 0}.kb-tbl table{width:100%;border-collapse:collapse;font:400 14.5px/1.45 var(--hv-sans);background:var(--hv-paper);border-radius:14px;overflow:hidden}
.kb-tbl th{text-align:left;font-weight:600;color:var(--hv-ink);background:color-mix(in srgb,var(--kd,#b8913a) 12%,#fff);padding:10px 12px}
.kb-tbl td{padding:9px 12px;border-top:1px solid var(--hv-line);color:var(--hv-ink2)}
/* блок перехода к квадрату (Роман 28.10): текст сверху по центру, ниже кнопка слева и пол справа; кнопка сливовая, как «Посчитать», без золота */
.kb-calc-go{display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px 18px}
.kb-calc-go>span{grid-column:1/-1;text-align:center;flex:none}
.kb-calc-go .kb-calc-btn{grid-column:1;grid-row:2;justify-self:start;background:var(--hv-plum2);color:#fff;box-shadow:0 10px 22px -12px var(--hv-plum2)}
.kb-calc-go .kb-calc-btn:hover{background:var(--hv-plum3)}
.kb-calc-go .kb-calc-g{grid-column:2;grid-row:2;justify-self:end}
@media (max-width:520px){.kb-calc-go{grid-template-columns:1fr}.kb-calc-go .kb-calc-btn,.kb-calc-go .kb-calc-g{grid-column:1;justify-self:center}.kb-calc-go .kb-calc-g{grid-row:2}.kb-calc-go .kb-calc-btn{grid-row:3}}
/* форма финальной полосы (Роман 28.10): белая карточка как на посадочной — дата и кнопка в строку, пол под ними */
.kb-final-f{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 10px;align-items:center;max-width:470px;margin:0 0 34px;padding:14px;border-radius:18px;background:#fff;box-shadow:0 18px 40px -22px rgba(51,22,63,.45);border:1px solid #e3ebf3}
.kb-final-f input{grid-column:1;grid-row:1;height:52px;width:100%}
.kb-final-f button{grid-column:2;grid-row:1;height:52px;white-space:nowrap}
.kb-final-g{grid-column:1/-1;grid-row:2;gap:18px;padding:2px 4px 0}
@media (max-width:520px){.kb-final-f{grid-template-columns:1fr}.kb-final-f button{grid-column:1;grid-row:3;width:100%}}
/* верхний блок перехода (Роман 28.10, по образцу нижней формы): белая карточка, кнопка слева, пол справа переключателем-половинками */
.kb-calc-go{display:block}.kb-calc-go>span{display:block;margin:0 0 12px}
.kb-go-row[hidden]{display:none}
.kb-calc-go>span{text-wrap:balance}
.kb-go-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px;border-radius:18px;background:#fff;border:1px solid #e6dcf1;box-shadow:0 18px 40px -24px rgba(51,22,63,.5)}
.kb-go-row .kb-calc-btn{height:50px;padding:0 24px;border-radius:13px}
.kb-go-row .kb-calc-g{display:inline-flex;gap:0;padding:4px;border-radius:13px;background:#f3ecf8}
.kb-go-row .kb-calc-g label{position:relative;padding:0 16px;height:42px;border-radius:10px;font:600 14px var(--hv-sans);color:var(--hv-ink2);cursor:pointer;transition:background .15s,color .15s}
.kb-go-row .kb-calc-g input{position:absolute;opacity:0;pointer-events:none}
.kb-go-row .kb-calc-g label:has(input:checked){background:#fff;color:var(--hv-plum2);box-shadow:0 2px 8px rgba(51,22,63,.14)}
.kb-go-row .kb-calc-g label:has(input:focus-visible){outline:2px solid var(--hv-plum3);outline-offset:1px}
@media (max-width:560px){.kb-go-row{flex-direction:column-reverse;align-items:stretch}.kb-go-row .kb-calc-g{justify-content:center}.kb-go-row .kb-calc-g label{flex:1;justify-content:center}.kb-go-row .kb-calc-btn{justify-content:center}}
/* ошибка даты — отдельной строкой под полем, поле и кнопка не сжимаются (Роман 28.10) */
.kb-calc-f{flex-wrap:wrap}.kb-calc-f input{flex:1 1 200px}
.kb-calc-f .kb-calc-err{flex-basis:100%;margin:2px 0 0 4px;text-align:left;font:500 13.5px var(--hv-sans)}
.kb-calc-f input[aria-invalid=true]{border-color:#d98a7f;box-shadow:0 0 0 4px #fbe7e3}

/* сцены партии 3 (28.10) */
.kb-scene{margin:18px 0}.kb-scene img{display:block;width:100%;height:auto;border-radius:18px}

/* ── 3. тренажёр ── */
/* «Как рассчитать» (28.10.2026): тренажёр, формулы, раскладка, особые случаи, ошибки, хаб клеток. Токены hv + цвета цифр. */
.kk-demo{display:block;margin:4px auto 0;border:0;background:none;font:600 14px var(--hv-sans);color:var(--hv-plum3);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.kk-run{margin-top:16px}
.kk-dots{list-style:none;display:flex;justify-content:center;gap:8px;margin:0 0 12px;padding:0}
.kk-dots li{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:700 13px var(--hv-sans);color:var(--hv-ink3,#8a7d8f);background:#f3ecdc}
.kk-dots li.on{background:var(--hv-plum2);color:#fff;box-shadow:0 0 0 4px #e9dcf3}.kk-dots li.ok{background:#e7d6a8;color:var(--hv-plum)}
.kk-date{text-align:center;font:500 14px var(--hv-sans);color:var(--hv-ink2);margin-bottom:12px}
.kk-date i,.kk-all i,.kk-strip i{display:inline-flex;align-items:center;justify-content:center;width:26px;height:30px;margin:0 2px;border-radius:7px;background:#fff;border:1px solid #ecdcb3;font:700 16px var(--hv-serif);font-style:normal;color:var(--hv-ink)}
.kk-date i.z,.kk-all i.z,.kk-strip i.z{color:#c9b9a3;text-decoration:line-through;background:#faf5ec}
.kk-card{padding:20px;border-radius:18px;background:#fff;border:1px solid #ecdcb3;min-height:150px}
.kk-card h3{margin:0 0 12px;font:700 19px/1.3 var(--hv-serif);color:var(--hv-plum)}
.kk-ex{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.kk-ex code{font:600 22px/1.3 var(--hv-serif);color:var(--hv-ink);background:none;padding:0}
.kk-ex input{width:92px;height:48px;border:1.5px solid #e2cf9e;border-radius:12px;text-align:center;font:700 22px var(--hv-serif);color:var(--hv-plum);outline:none}
.kk-ex input:focus{border-color:var(--hv-plum3);box-shadow:0 0 0 4px #ece4f6}.kk-ex input:disabled{background:#f6fbf6;border-color:#9fcfb0;color:#2f7a4c}
.kk-ex button,.kk-aux button,.kk-again{height:44px;padding:0 18px;border-radius:12px;border:0;background:var(--hv-plum2);color:#fff;font:600 14.5px var(--hv-sans);cursor:pointer}
.kk-aux{display:flex;gap:10px;margin-top:12px}.kk-aux .kk-hint,.kk-aux .kk-show{background:#f3ecdc;color:var(--hv-plum)}
.kk-note{margin:10px 0 0;font:500 14px/1.45 var(--hv-sans);color:var(--hv-gold)}
.kk-fb{margin:10px 0 0;min-height:1em;font:500 15px/1.45 var(--hv-sans);color:var(--hv-ink2)}.kk-fb.ok{color:#2f7a4c}.kk-fb.no{color:#b5483a}
.kk-nums-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:14px}
.kk-nums-row .l{flex-basis:100%;text-align:center;font:600 12px var(--hv-sans);color:var(--hv-ink3,#8a7d8f)}
.kk-nums-row span:not(.l){display:flex;flex-direction:column;align-items:center;min-width:64px;padding:8px 10px;border-radius:12px;background:#faf5ec;border:1px dashed #dccaa0}
.kk-nums-row span.ok{background:#fff;border:1px solid #d9c08a}.kk-nums-row small{font:500 11px var(--hv-sans);color:var(--hv-ink3,#8a7d8f)}.kk-nums-row b{font:800 22px var(--hv-serif);color:var(--hv-plum)}
.kk-all{display:flex;flex-wrap:wrap;gap:2px;margin:12px 0}
.kk-all i{transition:all .25s}.kk-all i.go{opacity:.25;transform:translateY(-6px) scale(.85)}
.kk-live{max-width:300px}
.kk-sq{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:10px;border-radius:16px;background:#fff;border:1px solid #ecdcb3}
.kk-sq .c{display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:1;border-radius:10px;background:#faf5ec;text-decoration:none;transition:transform .15s,box-shadow .15s}
.kk-sq .c b{font:700 22px/1 var(--hv-serif);letter-spacing:.02em;color:var(--cc);white-space:nowrap}
.kk-sq .c i{margin-top:5px;font:500 10.5px/1.15 var(--hv-sans);font-style:normal;color:var(--hv-ink3,#8a7d8f);text-align:center}
.kk-sq .c.e b{color:#cdbfa8}
.kk-sq a.c:hover{transform:translateY(-2px);box-shadow:0 0 0 2px var(--cc)}
.kk-sq-big{max-width:380px;margin:12px auto}.kk-sq-big .c b{font-size:28px}
.kk-done-h{text-align:center;font:500 15px/1.5 var(--hv-sans);color:var(--hv-ink)}.kk-done-h b{color:#2f7a4c}
.kk-done-n{text-align:center;font:500 13.5px var(--hv-sans);color:var(--hv-ink3,#8a7d8f);margin:0 0 6px}
.kk-again{display:block;margin:14px auto 0;background:#f3ecdc;color:var(--hv-plum)}

/* формулы шагов */
.kk-steps{list-style:none;margin:18px 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kk-steps li{display:grid;grid-template-columns:38px 1fr;gap:12px;padding:18px;border-radius:18px;background:var(--hv-paper);border:1px solid var(--hv-line)}
.kk-no{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--hv-plum2);color:#fff;font:800 17px var(--hv-serif)}
.kk-steps h3{margin:0 0 8px;font:700 16.5px/1.3 var(--hv-serif);color:var(--hv-plum)}
.kk-f{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;padding:10px 12px;border-radius:12px;background:#faf5ec}
.kk-f code{font:600 16px var(--hv-serif);color:var(--hv-ink);background:none;padding:0}.kk-f b{font:800 22px var(--hv-serif);color:var(--hv-plum2)}
.kk-steps p{margin:8px 0 0;font:400 14px/1.5 var(--hv-sans);color:var(--hv-ink2)}.kk-steps p:empty{display:none}
/* раскладка */
.kk-strip{display:flex;flex-wrap:wrap;align-items:center;gap:2px;margin:14px 0;padding:14px;border-radius:16px;background:var(--hv-paper);border:1px solid var(--hv-line)}
.kk-strip .l{flex-basis:100%;font:600 12px var(--hv-sans);color:var(--hv-ink3,#8a7d8f);margin:4px 0}
.kk-sqfig{max-width:360px;margin:18px auto}.kk-sqfig figcaption{margin-top:8px;text-align:center;font:500 13px var(--hv-sans);color:var(--hv-ink3,#8a7d8f)}
/* проверка */
.kk-eq{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin:16px 0}
.kk-eq span{display:flex;flex-direction:column;align-items:center;min-width:120px;padding:14px;border-radius:16px;background:var(--hv-paper);border:1px solid var(--hv-line);font:500 13px var(--hv-sans);color:var(--hv-ink2);text-align:center}
.kk-eq span b{font:800 34px var(--hv-serif);color:var(--hv-plum)}.kk-eq span.ok{border-color:#9fcfb0;background:#f6fbf6}.kk-eq span.ok b{color:#2f7a4c}
.kk-eq em{font:700 26px var(--hv-serif);font-style:normal;color:var(--hv-ink3,#8a7d8f)}
/* особые случаи, ошибки */
.kk-cases{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}
.kk-case{padding:18px;border-radius:18px;background:var(--hv-paper);border:1px solid var(--hv-line);border-top:4px solid var(--hv-gold-deco)}
.kk-case h3,.kk-errs h3{margin:0 0 6px;font:700 16.5px/1.3 var(--hv-serif);color:var(--hv-plum)}
.kk-case p,.kk-errs p{margin:0;font:400 15px/1.55 var(--hv-sans);color:var(--hv-ink)}
.kk-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0}
.kk-nums div{padding:18px;border-radius:18px;background:var(--hv-paper);border:1px solid var(--hv-line);text-align:center}
.kk-nums b{display:block;font:800 40px var(--hv-serif);color:var(--hv-plum2)}.kk-nums span{font:500 13.5px/1.4 var(--hv-sans);color:var(--hv-ink2)}
.kk-errs{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kk-errs li{position:relative;padding:18px 18px 18px 58px;border-radius:18px;background:var(--hv-paper);border:1px solid var(--hv-line)}
.kk-errs li>span{position:absolute;left:16px;top:18px;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#f8e3df;color:#b5483a;font:800 15px var(--hv-serif)}
/* хаб клеток */
.kk-hub{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}
.kk-hub a{display:flex;flex-direction:column;gap:2px;padding:14px 14px 12px;border-radius:16px;background:var(--hv-paper);border:1px solid var(--hv-line);border-top:4px solid var(--cc);text-decoration:none;transition:transform .15s,box-shadow .15s}
.kk-hub a:hover{transform:translateY(-2px);box-shadow:0 12px 24px -16px var(--cc)}
.kk-hub b{font:800 28px/1 var(--hv-serif);color:var(--cc)}.kk-hub strong{font:700 16px var(--hv-serif);color:var(--hv-plum)}
.kk-hub span{font:400 13px/1.4 var(--hv-sans);color:var(--hv-ink2)}.kk-hub em{margin-top:6px;font:600 12.5px var(--hv-sans);font-style:normal;color:var(--cc)}
@media (max-width:820px){
  .kk-steps,.kk-cases,.kk-errs,.kk-nums{grid-template-columns:1fr}
  .kk-hub{grid-template-columns:1fr 1fr}
  .kk-ex code{font-size:18px}
}