@charset "UTF-8";
/* ==========================================================================
   PROGNOZNADO.RU — Content Typography
   prognoznado-content.css · 2026

   Подключение:
     <link rel="stylesheet" href="/css/prognoznado-content.css">
     <article class="pn-content"> …контент статьи… </article>

   Используется только светлая палитра сайта.
   Переключатели (можно ставить на .pn-content или на любого родителя):
     data-pn-density="compact"         — уплотнённые вертикальные отступы
     data-pn-accent="orange"           — оранжевый акцент вместо синего

   Все токены и классы имеют префикс pn-, поэтому файл безопасно
   подключать поверх существующей вёрстки сайта.
   ========================================================================== */

 

@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400..500&family=Manrope:wght@500..800&display=swap");

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/InterVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/InterVariable-Italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

/* ==========================================================================
   1. ТОКЕНЫ
   ========================================================================== */

  .pn-content {
    /* — фирменная палитра (снята с логотипа) — */
    --pn-blue-50:   oklch(0.972 0.014 247);
    --pn-blue-100:  oklch(0.935 0.035 247);
    --pn-blue-200:  oklch(0.875 0.065 247);
    --pn-blue-400:  oklch(0.720 0.115 247);
    --pn-blue-500:  oklch(0.655 0.128 247);   /* #3B90D2 — основной синий */
    --pn-blue-600:  oklch(0.560 0.135 250);
    --pn-blue-700:  oklch(0.455 0.120 252);

    --pn-orange-100: oklch(0.950 0.045 72);
    --pn-orange-400: oklch(0.810 0.140 68);
    --pn-orange-500: oklch(0.750 0.160 62);   /* #F5921E — основной оранжевый */
    --pn-orange-600: oklch(0.660 0.160 55);

    /* — семантика — */
    --pn-info: var(--pn-blue-500);
    --pn-warn: var(--pn-orange-500);
    --pn-tip:  oklch(0.615 0.155 292);
    --pn-ok:   oklch(0.625 0.135 152);
    --pn-bad:  oklch(0.600 0.170 25);

    --pn-info-ink: oklch(0.475 0.135 249);
    --pn-warn-ink: oklch(0.510 0.135 52);
    --pn-tip-ink:  oklch(0.495 0.155 292);
    --pn-ok-ink:   oklch(0.465 0.115 152);
    --pn-bad-ink:  oklch(0.495 0.160 25);

    /* — поверхности и текст — */
    --pn-page:      oklch(0.988 0.003 250);
    --pn-surface:   oklch(1 0 0);
    --pn-surface-2: oklch(0.980 0.005 250);
    --pn-ink:       #171921;
    --pn-ink-soft:  oklch(0.430 0.022 258);
    --pn-ink-mute:  oklch(0.575 0.020 258);
    --pn-line:      oklch(0.905 0.010 250);
    --pn-line-soft: oklch(0.950 0.006 250);

    --pn-accent:     var(--pn-blue-500);
    --pn-accent-ink: var(--pn-info-ink);
    /* текст на залитых акцентных поверхностях (плашки, бейджи) */
    --pn-accent-solid: oklch(0.545 0.132 251);
    --pn-on-accent:    oklch(0.995 0.004 247);
    --pn-link:       var(--pn-blue-600);
    --pn-link-hover: var(--pn-blue-700);

    /* шапка таблиц — фирменный синий как у нумерных плашек, только мягче */
    --pn-thead-bg:   oklch(0.965 0.021 240);
    --pn-thead-ink:  oklch(0.455 0.100 250);
    --pn-thead-line: oklch(0.905 0.032 243);
    --pn-rowhead-bg: oklch(0.984 0.008 247);

    --pn-shadow-color: oklch(0.45 0.05 258 / 0.16);
    --pn-shadow-sm: 0 1px 2px -1px var(--pn-shadow-color);
    --pn-shadow-md: 0 1px 2px -1px var(--pn-shadow-color),
                    0 14px 32px -18px var(--pn-shadow-color);

    /* — типографика — */
    --pn-font-text: "Inter", Arial, Helvetica, sans-serif;
    --pn-font-head: "Manrope", "Inter", Arial, Helvetica, sans-serif;
    --pn-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

    --pn-size: 15px;
    --pn-lh: 1.6;

    /* — форма и ритм — */
    --pn-radius-sm: 8px;
    --pn-radius: 14px;
    --pn-radius-lg: 20px;
    --pn-d: 1;                          /* множитель плотности */
    --pn-gap: calc(1.15em * var(--pn-d));
    --pn-tint: 10%;                     /* доля акцента в подложках */
    --pn-tint-strong: 16%;
  }

  .pn-content[data-pn-density="compact"],
  [data-pn-density="compact"] .pn-content { --pn-d: 0.7; --pn-lh: 1.62; }

  .pn-content[data-pn-accent="orange"],
  [data-pn-accent="orange"] .pn-content {
    --pn-accent: var(--pn-orange-500);
    --pn-accent-ink: var(--pn-warn-ink);
    --pn-accent-solid: oklch(0.585 0.155 52);
    --pn-thead-bg: oklch(0.968 0.026 74);
    --pn-thead-ink: oklch(0.480 0.115 55);
    --pn-thead-line: oklch(0.912 0.040 72);
    --pn-link: var(--pn-orange-600);
    --pn-link-hover: oklch(0.56 0.15 50);
  }


/* ==========================================================================
   2. БАЗА КОНТЕЙНЕРА
   ========================================================================== */

  .pn-content {
    display: block;                     /* контейнер контента — всегда блок */
    container: pn-content / inline-size;
    min-inline-size: 0;
    max-inline-size: 100%;
    font-family: var(--pn-font-text);
    font-size: var(--pn-size);
    font-weight: 400;
    line-height: var(--pn-lh);
    color: var(--pn-ink);
    font-feature-settings: "ss01" 1;
    font-variant-numeric: proportional-nums;
    text-wrap: pretty;
    hanging-punctuation: first;
    -webkit-font-smoothing: antialiased;
    text-underline-offset: 0.18em;
  }

  /* вертикальный ритм: один общий отступ снизу у блоков */
  .pn-content :is(p, ul, ol, dl, pre, figure, table, blockquote, hr,
                  .pn-callout, .pn-note, .pn-warning, .pn-tip,
                  .pn-success, .pn-danger, .pn-important, .pn-table) {
    margin-block: 0 var(--pn-gap);
  }
  .pn-content > :first-child { margin-block-start: 0; }
  .pn-content > :last-child  { margin-block-end: 0; }

  .pn-content :focus-visible {
    outline: 2px solid var(--pn-accent);
    outline-offset: 3px;
    border-radius: var(--pn-radius-sm);
  }
  .pn-content ::selection {
    background: color-mix(in oklab, var(--pn-blue-400) 28%, transparent);
  }
  .pn-content ::marker { color: var(--pn-accent); }
  .pn-content img, .pn-content svg, .pn-content video, .pn-content iframe { max-inline-size: 100%; }
  .pn-content iframe {
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    block-size: auto;
    border: 0;
    border-radius: var(--pn-radius);
  }


/* ==========================================================================
   3. ЗАГОЛОВКИ h1–h6
   ========================================================================== */

  .pn-content :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--pn-font-head);
    color: var(--pn-ink);
    text-wrap: balance;
    scroll-margin-block-start: 5rem;
    margin-block: calc(2em * var(--pn-d)) calc(0.6em * var(--pn-d));
  }
  .pn-content :is(h1, h2, h3, h4, h5, h6):first-child { margin-block-start: 0; }
  /* заголовок сразу после заголовка — прижимаем */
  .pn-content :is(h1, h2, h3, h4, h5, h6):is(h1 + *, h2 + *, h3 + *, h4 + *, h5 + *, h6 + *) {
    margin-block-start: calc(0.75em * var(--pn-d));
  }

  .pn-content h1 {
    font-size: 36px;
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.032em;
  }
  .pn-content h2 {
    font-size: 26px;
    font-weight: 750;
    line-height: 1.16;
    letter-spacing: -0.026em;
    padding-block-end: 0.42em;
    border-block-end: 1px solid var(--pn-line-soft);
    position: relative;
  }
  /* фирменный акцент под h2 — синий с оранжевым «хвостом», как в логотипе */
  .pn-content h2::after {
    content: "";
    position: absolute;
    inset-block-end: -1px;
    inset-inline-start: 0;
    inline-size: 3.25rem;
    block-size: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--pn-blue-500) 55%, var(--pn-orange-500));
  }
  .pn-content h3 {
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
  }
  .pn-content h4 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.015em;
  }
  .pn-content h5 {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -0.008em;
  }
  .pn-content h6 {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--pn-accent-ink);
  }


/* ==========================================================================
   4. АБЗАЦЫ, ССЫЛКИ, ВЫДЕЛЕНИЯ
   ========================================================================== */

  .pn-content p { max-inline-size: none; }

  /* вводный абзац */
  .pn-content .pn-lead {
    font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
    line-height: 1.55;
    font-weight: 450;
    letter-spacing: -0.012em;
    color: var(--pn-ink-soft);
    max-inline-size: 62ch;
  }

  /* ссылки внутри текста */
  .pn-content a {
    color: var(--pn-link);
    font-weight: 500;
    text-decoration-line: underline;
    text-decoration-thickness: 0.075em;
    text-decoration-color: color-mix(in oklab, currentColor 30%, transparent);
    text-underline-offset: 0.2em;
    border-radius: 3px;
    transition: color 0.16s ease, text-decoration-color 0.16s ease;
  }
  .pn-content a:hover {
    color: var(--pn-link-hover);
    text-decoration-color: currentColor;
  }
  .pn-content a[target="_blank"]::after {
    content: "↗";
    display: inline-block;
    font-size: 0.78em;
    margin-inline-start: 0.22em;
    translate: 0 -0.08em;
    text-decoration: none;
    opacity: 0.7;
  }

  /* акценты */
  .pn-content strong, .pn-content b {
    font-weight: 700;
    color: oklch(0.2 0.025 258);
    letter-spacing: -0.006em;
  }
  .pn-content em, .pn-content i {
    font-style: italic;
    font-synthesis-style: none;
    color: var(--pn-ink-soft);
  }
  .pn-content em strong, .pn-content strong em { color: var(--pn-accent-ink); }

  /* <mark> — фирменная подсветка */
  .pn-content mark {
    background: linear-gradient(
      180deg,
      transparent 8%,
      color-mix(in oklab, var(--pn-orange-400) calc(var(--pn-tint) * 3.2), transparent) 8%
    );
    color: inherit;
    padding-inline: 0.18em;
    border-radius: 4px;
    box-decoration-break: clone;
  }
  .pn-content mark.pn-mark--blue {
    background: linear-gradient(
      180deg,
      transparent 8%,
      color-mix(in oklab, var(--pn-blue-400) calc(var(--pn-tint) * 3), transparent) 8%
    );
  }

  /* важный фрагмент текста — блок без иконки */
  .pn-content .pn-important {
    --pn-c: var(--pn-accent);
    font-size: 1.0625em;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: -0.012em;
    color: var(--pn-ink);
    max-inline-size: none;
    padding: calc(1.1em * var(--pn-d)) 1.25em;
    border: 1px solid color-mix(in oklab, var(--pn-c) 28%, var(--pn-line));
    border-inline-start: 3px solid var(--pn-c);
    border-radius: var(--pn-radius-sm) var(--pn-radius) var(--pn-radius) var(--pn-radius-sm);
    background: color-mix(in oklab, var(--pn-c) var(--pn-tint), var(--pn-surface));
  }


/* ==========================================================================
   5. СПИСКИ: маркированные, нумерованные, вложенные, тезисы
   ========================================================================== */

  .pn-content :is(ul, ol) {
    list-style: none;
    padding-inline-start: 0;
    counter-reset: pn-ol;
  }
  .pn-content li {
    position: relative;
    padding-inline-start: 1.85em;
    margin-block-end: calc(0.5em * var(--pn-d));
  }
  .pn-content li:last-child { margin-block-end: 0; }
  .pn-content li > :is(ul, ol) { margin-block: calc(0.55em * var(--pn-d)) 0; }
  .pn-content li > p { margin-block-end: calc(0.5em * var(--pn-d)); max-inline-size: none; }

  /* — маркированный список: уровень 1 — */
  .pn-content ul > li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0.15em;
    top: 0.62em;
    top: calc(0.5lh - 3.5px);
    inline-size: 7px;
    block-size: 7px;
    border-radius: 50%;
    background: var(--pn-accent);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--pn-accent) 16%, transparent);
  }
  /* уровень 2 — контурный маркер */
  .pn-content li ul > li::before {
    background: transparent;
    border: 2px solid color-mix(in oklab, var(--pn-accent) 65%, var(--pn-ink-mute));
    box-shadow: none;
  }
  /* уровень 3 — тире */
  .pn-content li li ul > li::before {
    inline-size: 9px;
    block-size: 2px;
    border: 0;
    border-radius: 2px;
    background: var(--pn-ink-mute);
    top: calc(0.5lh - 1px);
  }

  /* — нумерованный список: 1 → 1.1 → 1.1.1 — */
  .pn-content ol > li { padding-inline-start: 2.6em; }
  .pn-content ol > li::before {
    counter-increment: pn-ol;
    content: counters(pn-ol, ".");
    position: absolute;
    inset-inline-start: 0;
    top: 0.1em;
    top: calc(0.5lh - 0.95em);
    display: grid;
    place-items: center;
    min-inline-size: 1.9em;
    block-size: 1.9em;
    padding-inline: 0.4em;
    font-family: var(--pn-font-head);
    font-size: 0.8125em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: 0;
    color: var(--pn-on-accent);
    background: var(--pn-accent-solid);
    border-radius: 0.7em;
  }
  /* вложенные уровни — облегчённый бейдж */
  .pn-content li ol > li { padding-inline-start: 3.2em; }
  .pn-content li ol > li::before {
    color: var(--pn-accent-ink);
    background: color-mix(in oklab, var(--pn-accent) var(--pn-tint-strong), var(--pn-surface));
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--pn-accent) 30%, transparent);
  }

  /* — положительные и отрицательные тезисы — */
  .pn-content :is(.pn-pros, .pn-cons) > li { padding-inline-start: 2.15em; }
  .pn-content :is(.pn-pros, .pn-cons) > li::before {
    --pn-c: var(--pn-ok);
    content: "✓";
    display: grid;
    place-items: center;
    inset-inline-start: 0;
    top: calc(0.5lh - 0.7em);
    inline-size: 1.4em;
    block-size: 1.4em;
    font-size: 0.8em;
    font-weight: 700;
    line-height: 1;
    border-radius: 50%;
    background: color-mix(in oklab, var(--pn-c) var(--pn-tint-strong), var(--pn-surface));
    color: var(--pn-c-ink, var(--pn-ok-ink));
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--pn-c) 30%, transparent);
  }
  .pn-content .pn-cons > li::before {
    --pn-c: var(--pn-bad);
    --pn-c-ink: var(--pn-bad-ink);
    content: "✕";
  }

  /* список без маркеров */
  .pn-content .pn-list--plain > li { padding-inline-start: 0; }
  .pn-content .pn-list--plain > li::before { content: none; }


/* ==========================================================================
   6. ТАБЛИЦЫ
   ========================================================================== */

  /* обёртка для горизонтальной прокрутки: <div class="pn-table"><table>…</table></div> */
  .pn-content .pn-table {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-radius);
    background: var(--pn-surface);
    box-shadow: var(--pn-shadow-sm);
    scrollbar-width: thin;
    scrollbar-color: var(--pn-line) transparent;
  }
  .pn-content .pn-table > table { margin: 0; border: 0; border-radius: 0; }

  .pn-content table {
    inline-size: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.9375em;
    line-height: 1.45;
    background: var(--pn-surface);
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-radius);
    overflow: clip;
  }

  .pn-content thead th {
    position: sticky;
    inset-block-start: 0;
    z-index: 1;
    font-family: var(--pn-font-head);
    font-size: 0.8125em;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-align: start;
    white-space: nowrap;
    color: var(--pn-thead-ink);
    background: var(--pn-thead-bg);
    padding: 0.9em 1.1em;
    border-block-end: 1px solid var(--pn-thead-line);
  }
  /* тонкие вертикальные разделители только в шапке */
  .pn-content thead th + th {
    box-shadow: inset 1px 0 0 color-mix(in oklab, var(--pn-thead-line) 80%, transparent);
  }
  /* капслок-вариант шапки, если нужен более «технический» вид */
  .pn-content table.pn-table--caps thead th {
    font-size: 0.72em;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .pn-content :is(td, tbody th) {
    padding: 0.9em 1.1em;
    border-block-start: 1px solid var(--pn-line-soft);
    vertical-align: baseline;
  }
  .pn-content tbody tr:first-child :is(td, th) { border-block-start: 0; }
  .pn-content tbody th {
    text-align: start;
    font-weight: 600;
    color: var(--pn-ink);
    background: var(--pn-rowhead-bg);
  }
  .pn-content tbody tr:nth-child(even) :is(td, th) {
    background: color-mix(in oklab, var(--pn-blue-500) calc(var(--pn-tint) * 0.42), transparent);
  }
  .pn-content tbody tr:nth-child(even) th {
    background: color-mix(in oklab, var(--pn-blue-500) calc(var(--pn-tint) * 0.42), var(--pn-rowhead-bg));
  }
  .pn-content tbody tr { transition: background 0.14s ease; }
  .pn-content tbody tr:hover :is(td, th) {
    background: color-mix(in oklab, var(--pn-accent) calc(var(--pn-tint) * 0.85), var(--pn-surface));
  }
  .pn-content tfoot :is(td, th) {
    font-weight: 700;
    color: var(--pn-thead-ink);
    background: color-mix(in oklab, var(--pn-thead-bg) 88%, var(--pn-blue-500));
    border-block-start: 1px solid var(--pn-thead-line);
  }
  .pn-content caption {
    position: sticky;
    inset-inline-start: 0;
    inline-size: fit-content;
    max-inline-size: 100cqi;
    caption-side: bottom;
    padding: 0.85em 1.1em 0.9em;
    font-size: 0.85em;
    line-height: 1.5;
    color: var(--pn-ink-mute);
    text-align: start;
  }
  /* заголовок над таблицей: <caption class="pn-caption--top"> */
  .pn-content caption.pn-caption--top {
    caption-side: top;
    padding: 0.95em 1.1em 0.75em;
    font-family: var(--pn-font-head);
    font-size: 1.0625em;
    font-weight: 700;
    letter-spacing: -0.012em;
    color: var(--pn-ink);
  }
  /* вторая строка внутри ячейки — пояснение к значению */
  .pn-content .pn-cell-sub {
    display: block;
    margin-block-start: 0.28em;
    font-size: 0.86em;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    color: var(--pn-ink-mute);
  }
  /* положительные и отрицательные значения в ячейках */
  .pn-content :is(.pn-val--pos, .pn-val--neg) {
    --pn-c: var(--pn-ok);
    --pn-c-ink: var(--pn-ok-ink);
    display: inline-block;
    padding: 0.12em 0.45em;
    border-radius: 6px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--pn-c-ink);
    background: color-mix(in oklab, var(--pn-c) var(--pn-tint-strong), transparent);
  }
  .pn-content .pn-val--neg { --pn-c: var(--pn-bad); --pn-c-ink: var(--pn-bad-ink); }
  /* числовые колонки */
  .pn-content :is(td, th).pn-num {
    text-align: end;
    font-variant-numeric: tabular-nums;
  }
  .pn-content td.pn-num { font-weight: 600; }
  /* выделенная строка / компактный режим */
  .pn-content tr.pn-row--hl :is(td, th) {
    background: color-mix(in oklab, var(--pn-accent) var(--pn-tint), transparent);
  }
  .pn-content tr.pn-row--hl > :first-child {
    box-shadow: inset 3px 0 0 var(--pn-accent);
  }
  .pn-content table.pn-table--compact :is(td, th) { padding: 0.6em 0.8em; }


/* ==========================================================================
   7. ЦИТАТЫ
   ========================================================================== */

  .pn-content blockquote {
    position: relative;
    padding: 0 0 0 1.6em;
    font-size: 1.125em;
    font-weight: 450;
    line-height: 1.55;
    letter-spacing: -0.014em;
    color: var(--pn-ink);
    border-inline-start: 2px solid color-mix(in oklab, var(--pn-accent) 45%, var(--pn-line));
  }
  .pn-content blockquote > p { max-inline-size: 60ch; }
  .pn-content blockquote > :last-child { margin-block-end: 0; }
  .pn-content blockquote::before {
    content: "“";
    position: absolute;
    inset-inline-start: 0.35em;
    inset-block-start: -0.32em;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 3.2em;
    line-height: 1;
    color: color-mix(in oklab, var(--pn-accent) 22%, transparent);
    pointer-events: none;
  }
  .pn-content blockquote :is(cite, footer) {
    display: block;
    margin-block-start: 0.9em;
    font-family: var(--pn-font-head);
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--pn-ink-mute);
  }
  .pn-content blockquote :is(cite, footer)::before { content: "— "; }

  /* вариант-карточка */
  .pn-content blockquote.pn-quote--card {
    padding: calc(1.35em * var(--pn-d)) 1.5em;
    border: 1px solid var(--pn-line);
    border-inline-start-width: 1px;
    border-radius: var(--pn-radius-lg);
    background: var(--pn-surface);
    box-shadow: var(--pn-shadow-md);
  }
  .pn-content blockquote.pn-quote--card::before {
    inset-inline-start: auto;
    inset-inline-end: 0.7em;
    inset-block-start: -0.1em;
  }


/* ==========================================================================
   8. ЗАМЕТКИ, ПРЕДУПРЕЖДЕНИЯ, СОВЕТЫ, ПЛЮСЫ И МИНУСЫ
   ========================================================================== */

  .pn-content :is(.pn-callout, .pn-note, .pn-warning, .pn-tip, .pn-success, .pn-danger) {
    --pn-c: var(--pn-info);
    --pn-c-ink: var(--pn-info-ink);
    --pn-ico: "i";
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: start;
    column-gap: 0.85em;
    row-gap: calc(0.55em * var(--pn-d));
    padding: calc(1.1em * var(--pn-d)) 1.2em;
    border: 1px solid color-mix(in oklab, var(--pn-c) 26%, var(--pn-line));
    border-radius: var(--pn-radius);
    background: color-mix(in oklab, var(--pn-c) var(--pn-tint), var(--pn-surface));
    font-size: 0.96em;
    line-height: 1.6;
  }
  .pn-content :is(.pn-callout, .pn-note, .pn-warning, .pn-tip, .pn-success, .pn-danger)::before {
    content: var(--pn-ico);
    grid-row: 1 / -1;
    grid-column: 1;
    display: grid;
    place-items: center;
    inline-size: 1.75em;
    block-size: 1.75em;
    margin-block-start: -0.05em;
    font-family: var(--pn-font-head);
    font-size: 0.95em;
    font-weight: 700;
    line-height: 1;
    color: var(--pn-on-accent);
    background: var(--pn-c);
    border-radius: 0.62em;
  }
  .pn-content :is(.pn-callout, .pn-note, .pn-warning, .pn-tip, .pn-success, .pn-danger) > * {
    grid-column: 2;
    margin-block: 0;
    max-inline-size: 66ch;
  }
  .pn-content :is(.pn-callout, .pn-note, .pn-warning, .pn-tip, .pn-success, .pn-danger)
    :is(.pn-callout__title, h3, h4, h5) {
    font-family: var(--pn-font-head);
    font-size: 1em;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--pn-c-ink);
    margin: 0;
    padding: 0;
    border: 0;
  }
  .pn-content :is(.pn-callout, .pn-note, .pn-warning, .pn-tip, .pn-success, .pn-danger) h2::after,
  .pn-content :is(.pn-callout, .pn-note, .pn-warning, .pn-tip, .pn-success, .pn-danger) *::after {
    content: normal;
  }
  .pn-content :is(.pn-callout, .pn-note, .pn-warning, .pn-tip, .pn-success, .pn-danger) a {
    color: var(--pn-c-ink);
  }
  .pn-content :is(.pn-callout, .pn-note, .pn-warning, .pn-tip, .pn-success, .pn-danger)
    :is(ul, ol) > li { margin-block-end: 0.3em; }

  .pn-content .pn-warning { --pn-c: var(--pn-warn); --pn-c-ink: var(--pn-warn-ink); --pn-ico: "!"; }
  .pn-content .pn-tip     { --pn-c: var(--pn-tip);  --pn-c-ink: var(--pn-tip-ink);  --pn-ico: "✦"; }
  .pn-content .pn-success { --pn-c: var(--pn-ok);   --pn-c-ink: var(--pn-ok-ink);   --pn-ico: "✓"; }
  .pn-content .pn-danger  { --pn-c: var(--pn-bad);  --pn-c-ink: var(--pn-bad-ink);  --pn-ico: "✕"; }


/* ==========================================================================
   9. INLINE-ЭЛЕМЕНТЫ: код, бейджи, клавиши
   ========================================================================== */

  .pn-content :not(pre) > code {
    font-family: var(--pn-font-mono);
    font-size: 0.855em;
    font-variant-ligatures: none;
    padding: 0.18em 0.42em 0.12em;
    border: 1px solid color-mix(in oklab, var(--pn-accent) 18%, var(--pn-line));
    border-radius: var(--pn-radius-sm);
    background: color-mix(in oklab, var(--pn-accent) calc(var(--pn-tint) * 0.8), var(--pn-surface-2));
    color: var(--pn-accent-ink);
    white-space: nowrap;
    box-decoration-break: clone;
  }
  .pn-content a code { color: inherit; }

  .pn-content pre {
    font-family: var(--pn-font-mono);
    font-size: 0.85em;
    line-height: 1.65;
    tab-size: 2;
    overflow-x: auto;
    padding: 1.15em 1.25em;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-radius);
    background: var(--pn-surface-2);
    color: var(--pn-ink);
    scrollbar-width: thin;
  }
  .pn-content pre > code { font: inherit; background: none; border: 0; padding: 0; white-space: pre; }

  /* информационные бейджи внутри текста */
  .pn-content .pn-badge {
    --pn-c: var(--pn-accent);
    --pn-c-ink: var(--pn-accent-ink);
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    vertical-align: 0.06em;
    font-family: var(--pn-font-head);
    font-size: 0.72em;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    padding: 0.42em 0.66em 0.36em;
    border-radius: 999px;
    color: var(--pn-c-ink);
    background: color-mix(in oklab, var(--pn-c) var(--pn-tint-strong), var(--pn-surface));
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--pn-c) 28%, transparent);
  }
  .pn-content .pn-badge--orange { --pn-c: var(--pn-orange-500); --pn-c-ink: var(--pn-warn-ink); }
  .pn-content .pn-badge--green  { --pn-c: var(--pn-ok);  --pn-c-ink: var(--pn-ok-ink); }
  .pn-content .pn-badge--red    { --pn-c: var(--pn-bad); --pn-c-ink: var(--pn-bad-ink); }
  .pn-content .pn-badge--violet { --pn-c: var(--pn-tip); --pn-c-ink: var(--pn-tip-ink); }
  .pn-content .pn-badge--neutral {
    --pn-c: var(--pn-ink-mute);
    --pn-c-ink: var(--pn-ink-soft);
  }
  .pn-content .pn-badge--solid {
    color: var(--pn-on-accent);
    background: color-mix(in oklab, var(--pn-c) 88%, black);
    box-shadow: none;
  }
  .pn-content .pn-badge--dot::before,
  .pn-content .pn-badge--live::before {
    content: "";
    inline-size: 0.45em;
    block-size: 0.45em;
    border-radius: 50%;
    background: currentColor;
  }
  .pn-content .pn-badge--live {
    --pn-c: var(--pn-bad);
    --pn-c-ink: var(--pn-bad-ink);
  }
  .pn-content .pn-badge--live::before { animation: pn-pulse 1.7s ease-in-out infinite; }
  @keyframes pn-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 currentColor; }
    50%      { opacity: 0.75; box-shadow: 0 0 0 0.28em color-mix(in oklab, currentColor 22%, transparent); }
  }
  @media (prefers-reduced-motion: reduce) {
    .pn-content .pn-badge--live::before { animation: none; }
    .pn-content * { transition-duration: 0.01ms !important; }
  }

  .pn-content kbd {
    font-family: var(--pn-font-mono);
    font-size: 0.8em;
    padding: 0.22em 0.45em;
    border: 1px solid var(--pn-line);
    border-block-end-width: 2px;
    border-radius: 6px;
    background: var(--pn-surface);
    color: var(--pn-ink-soft);
  }


/* ==========================================================================
   10. РАЗДЕЛИТЕЛИ
   ========================================================================== */

  .pn-content hr {
    border: 0;
    block-size: 1px;
    margin-block: calc(2.6em * var(--pn-d));
    background: linear-gradient(90deg, transparent, var(--pn-line) 12%,
                                var(--pn-line) 88%, transparent);
  }
  /* три точки по центру */
  .pn-content hr.pn-hr--dots {
    inline-size: 54px;
    block-size: 6px;
    margin-inline: auto;
    background: radial-gradient(circle at 50%,
                color-mix(in oklab, var(--pn-ink-mute) 70%, transparent) 45%, transparent 47%)
                0 0 / 18px 6px repeat-x;
  }
  /* фирменная черта */
  .pn-content hr.pn-hr--brand {
    inline-size: 72px;
    block-size: 3px;
    margin-inline: auto;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--pn-blue-500), var(--pn-orange-500));
  }
  .pn-content hr.pn-hr--tight { margin-block: calc(1.4em * var(--pn-d)); }


/* ==========================================================================
   11. ДОПОЛНИТЕЛЬНО: изображения, сноски, правки
   ========================================================================== */

  .pn-content figure > :is(img, picture, video, .pn-media) {
    display: block;
    inline-size: 100%;
    border-radius: var(--pn-radius-lg);
    border: 1px solid var(--pn-line);
  }
  .pn-content figure.pn-figure {
    max-inline-size: 100%;
  }
  .pn-content .pn-media__zoom {
    display: block;
    inline-size: 100%;
    padding: 0;
    border: 0;
    border-radius: var(--pn-radius-lg);
    background: transparent;
    cursor: zoom-in;
  }
  .pn-content .pn-media__zoom > img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-radius-lg);
    transition: filter 0.18s ease, transform 0.18s ease;
  }
  .pn-content .pn-media__zoom:hover > img {
    filter: brightness(0.96);
    transform: translateY(-1px);
  }
  .pn-content figcaption {
    margin-block-start: 0.75em;
    font-size: 0.85em;
    line-height: 1.5;
    color: var(--pn-ink-mute);
  }
  .pn-content .pn-muted { color: var(--pn-ink-mute); font-size: 0.875em; }
  .pn-content abbr[title] {
    text-decoration: underline dotted
      color-mix(in oklab, var(--pn-accent) 60%, transparent);
    text-underline-offset: 0.25em;
    cursor: help;
  }
  .pn-content del { color: var(--pn-ink-mute); text-decoration-thickness: 0.08em; }
  .pn-content ins {
    text-decoration: none;
    padding-inline: 0.2em;
    border-radius: 4px;
    background: color-mix(in oklab, var(--pn-ok) var(--pn-tint), transparent);
    color: var(--pn-ok-ink);
  }
  .pn-content :is(sub, sup) { font-size: 0.72em; line-height: 0; }
  .pn-content small { font-size: 0.85em; color: var(--pn-ink-mute); }


/* ==========================================================================
   12. АДАПТИВ (container queries — по ширине самого контента)
   ========================================================================== */

  @container pn-content (max-width: 560px) {
    .pn-content { --pn-lh: 1.6; --pn-size: 16px; }
    .pn-content h1 { font-size: 30px; }
    .pn-content h2 { font-size: 22px; }
    .pn-content h3 { font-size: 19px; }
    .pn-content h4 { font-size: 18px; }
    .pn-content h5 { font-size: 16px; }
    .pn-content h6 { font-size: 13px; }
    .pn-content :is(td, tbody th) { padding: 0.7em 0.8em; }
    .pn-content thead th { padding: 0.75em 0.8em; }
    .pn-content caption { padding-inline: 0.85em; }
    .pn-content caption.pn-caption--top { padding: 0.85em 0.85em 0.7em; }
    .pn-content li { padding-inline-start: 1.6em; }
    .pn-content ol > li { padding-inline-start: 2.35em; }
    .pn-content :is(.pn-callout, .pn-note, .pn-warning, .pn-tip, .pn-success, .pn-danger) {
      column-gap: 0.7em;
      padding-inline: 1em;
    }
    .pn-content blockquote { padding-inline-start: 1.2em; font-size: 1.05em; }
  }

  @media (max-width: 767px) {
    .pn-content { --pn-size: 16px; --pn-lh: 1.6; }
  }


/* ==========================================================================
   13. ПЕЧАТЬ
   ========================================================================== */

  @media print {
    .pn-content {
      font-size: 11.5pt;
      line-height: 1.5;
    }
    .pn-content :is(h1, h2, h3, h4, h5, h6) { break-after: avoid; }
    .pn-content :is(table, figure, blockquote, .pn-callout, .pn-note,
                    .pn-warning, .pn-tip, .pn-success, .pn-danger) { break-inside: avoid; }
    .pn-content .pn-table { overflow: visible; box-shadow: none; }
    .pn-content a { color: inherit; }
    .pn-content a[href^="http"]::after {
      content: " (" attr(href) ")";
      font-size: 0.8em;
      color: #555;
      word-break: break-all;
  }
}

/* Полноэкранный просмотр создаётся content-20260829.js только для изображений,
   которым редактор явно добавил переключатель «Увеличивать по клику». */
.pn-lightbox {
  position: fixed;
  z-index: 10050;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(10, 15, 23, 0.88);
}
.pn-lightbox.is-open { display: flex; }
.pn-lightbox__dialog {
  position: relative;
  max-inline-size: min(94vw, 1440px);
  max-block-size: 92vh;
  margin: 0;
}
.pn-lightbox__image {
  display: block;
  max-inline-size: 100%;
  max-block-size: calc(92vh - 54px);
  inline-size: auto;
  block-size: auto;
  margin: auto;
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
}
.pn-lightbox__caption {
  margin-block-start: 10px;
  color: #fff;
  font: 500 14px/1.5 "Inter", Arial, Helvetica, sans-serif;
  text-align: center;
}
.pn-lightbox__close {
  position: absolute;
  inset-block-start: -18px;
  inset-inline-end: -18px;
  display: grid;
  inline-size: 42px;
  block-size: 42px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  color: #fff;
  background: #171921;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  font: 400 28px/1 Arial, sans-serif;
  cursor: pointer;
}
body.pn-lightbox-open { overflow: hidden; }
@media (max-width: 600px) {
  .pn-lightbox { padding: 18px; }
  .pn-lightbox__close { inset-block-start: -14px; inset-inline-end: -10px; }
}

/* Встроенные рекламные и служебные компоненты сохраняют собственную вёрстку.
   data-pn-component-island можно использовать для новых независимых модулей. */
:where(.pn-content .prediction-bonus-embed, .pn-content [data-pn-component-island]),
:where(.pn-content .prediction-bonus-embed, .pn-content [data-pn-component-island]) * {
  all: revert;
}
:where(.pn-content .prediction-bonus-embed, .pn-content [data-pn-component-island]) a::after,
:where(.pn-content .prediction-bonus-embed, .pn-content [data-pn-component-island]) li::before {
  content: none;
}