/* Темы оформления слайдов. Три разные темы: «Градиент» (d-soft), «Стекло» (d-glass), «Журнал» (d-mag).
   Цвет акцента (--ac, --ac-2, --ac-soft, --ac-ink) задаётся отдельно классом theme-* и работает в любой теме.
   Размеры украшений заданы в cqw: слайд одинаково выглядит на проекторе, в редакторе и на миниатюре. */

/* ---------- рамка слайда: общая для всех тем ---------- */
.stage-rel { isolation: isolate; }
.stage-rel > .stage { position: relative; z-index: 1; }
.st-deco { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.st-deco i { position: absolute; display: block; }
.st-deco b { display: none; }
.st-head { position: absolute; z-index: 1; top: 2.3cqw; left: 7.75cqw; right: 7.75cqw; display: flex; justify-content: space-between; align-items: baseline; gap: 2em;
  font-size: clamp(9px, 1cqw, 18px); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 50%, transparent); pointer-events: none; }
.st-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-pos { flex: none; font-variant-numeric: tabular-nums; }
.k-join .st-head, .k-cover .st-head { display: none; }
.stage-rel:has(> .timer) .st-pos { visibility: hidden; }
.thumb-view .st-head, .ed-preview .st-head { top: 1.7cqw; left: 6.4cqw; right: 6.4cqw; font-size: 1cqw; }
.thumb-view .stage, .ed-preview .stage { padding-top: 3.5em; }
.stage.dense { padding-top: 3.5em; }
@media (max-width: 700px) { .st-head { left: 5cqw; right: 5cqw; top: 2.6cqw; font-size: clamp(8px, 2.3cqw, 13px); } }

/* Содержимое встаёт по центру свободного места под заголовком, а не прижимается к верху: слайд не выглядит недозаполненным. */
.stage > h1 + :is(.sl-cards, .sl-steps, .sl-numbers, .sl-table, .sl-text, .sl-bars, .sl-scale, .sl-cloud, .sl-feed, .sl-rank, .sl-wait) { margin-top: auto; }
.stage > h1 ~ :last-child { margin-bottom: auto; }

/* Короткий список (до трёх пунктов) раскладывается в ряд крупными карточками на всю ширину. */
.sl-cards.one { max-width: none; gap: 1.3em; }
.sl-cards.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sl-cards.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* цифры и шаги в ряд тоже занимают всю ширину слайда */
.sl-numbers.n1 { grid-template-columns: minmax(0, 24em); }
.sl-numbers.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sl-numbers.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sl-numbers.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6em; }
.sl-steps.row.n1 { grid-template-columns: minmax(0, 24em); }
.sl-steps.row.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sl-steps.row.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sl-steps.row.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* В карточке номер или цифра стоит сразу над своим текстом. Карточку не растягиваем на всю высоту слайда:
   когда номер уезжает вверх, а подпись вниз, связь между ними теряется и слайд читается хуже. Ряд карточек
   встаёт по центру свободного места, высота у карточек одинаковая и задаётся самым длинным текстом. */
.sl-cards.one li { flex-direction: column; justify-content: flex-start; gap: .55em; padding: 1.2em 1.3em 1.35em; font-size: 1.75em; line-height: 1.3; }
.sl-steps.row li { justify-content: flex-start; gap: .6em; font-size: 1.6em; }
.sl-numbers .num-card { display: flex; flex-direction: column; justify-content: flex-start; gap: .5em; }
.sl-numbers .num-lab { margin-top: 0; }
.sl-numbers .num-lab { font-size: 1.7em; line-height: 1.3; }
.stage .sl-table { font-size: 1.7em; }
.stage .sl-table td, .stage .sl-table th { padding-top: .7em; padding-bottom: .7em; }
/* длинный список и длинная цепочка шагов идут в две колонки и занимают ширину слайда */
.sl-cards.two { flex: 0 1 auto; }
.sl-cards.two { gap: .9em 1.1em; }
.sl-cards.two li { font-size: 1.34em; padding: .75em 1.1em; align-items: center; }
.sl-steps.col { display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, auto); column-gap: 3.5em; max-width: none; }
.sl-steps.col:is(.n7, .n8) { grid-template-rows: repeat(4, auto); }
.sl-steps.col li { font-size: 1.6em; padding: .7em 0; }
.sl-cards.one .card-n { font-size: 1.7em; font-weight: 800; padding: 0; line-height: 1; }
.sl-cards.n1 { max-width: 34em; }
.sl-text p { font-size: 2em; line-height: 1.42; max-width: 36em; }
.sl-split .sl-text p { font-size: 1.6em; }
@media (max-width: 700px) { .sl-steps.col[class] { grid-auto-flow: row; grid-template-rows: none; } .sl-cards.one, .sl-numbers[class], .sl-steps.row[class] { grid-template-columns: 1fr; } .sl-cards.one li { flex-direction: row; } }

/* =====================================================================
   Градиент: мягкие переливы цвета, скруглённые карточки
   ===================================================================== */
.stage-rel.d-soft { background:
  radial-gradient(62% 85% at 100% 0%, color-mix(in srgb, var(--ac-2) 30%, transparent) 0%, transparent 62%),
  radial-gradient(48% 70% at 0% 100%, color-mix(in srgb, var(--ac) 13%, transparent) 0%, transparent 62%),
  linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--ac-soft) 55%, #fff) 100%); }
.d-soft .st-deco i:nth-child(1) { width: 40cqw; height: 40cqw; right: -13cqw; bottom: -24cqw; border-radius: 50%; background: linear-gradient(140deg, var(--ac), var(--ac-2)); opacity: .16; }
.d-soft .st-deco i:nth-child(2) { width: 17cqw; height: 17cqw; right: 10cqw; bottom: -11cqw; border-radius: 50%; border: .14cqw solid color-mix(in srgb, var(--ac) 30%, transparent); }
.d-soft .st-deco i:nth-child(3) { left: 7.75cqw; bottom: 3cqw; width: 5.5cqw; height: .34cqw; border-radius: 1cqw; background: linear-gradient(90deg, var(--ac), var(--ac-2)); }
.d-soft.k-cover .st-deco i:nth-child(3), .d-soft.k-join .st-deco i:nth-child(3) { display: none; }
.d-soft .sl-cards li, .d-soft .sl-steps.row li, .d-soft .num-card { background: linear-gradient(165deg, #fff 0%, color-mix(in srgb, var(--ac-soft) 70%, #fff) 100%); box-shadow: 0 .5em 1.6em -1em color-mix(in srgb, var(--ac) 45%, transparent); }
.d-soft .sl-cards.one .card-n { background: linear-gradient(120deg, var(--ac), var(--ac-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* =====================================================================
   Стекло: цветное сияние на фоне, содержимое на матовых стеклянных панелях
   ===================================================================== */
/* у каждого цвета два спутника для сияния фона */
.stage-rel.theme-classic { --ac-3: #7a3cf0; --ac-4: #38c6f4; }
.stage-rel.theme-emerald { --ac-3: #0aa5b5; --ac-4: #9be15d; }
.stage-rel.theme-terracotta { --ac-3: #e8336d; --ac-4: #ffb347; }
.stage-rel.theme-violet { --ac-3: #f0409c; --ac-4: #4d7cff; }
.stage-rel.theme-graphite { --ac-3: #53607a; --ac-4: #a9bbd8; }

.stage-rel.d-glass { --gi: #15151c; --g3: var(--ac-3, var(--ac-2)); --g4: var(--ac-4, var(--ac-2)); background:
  radial-gradient(46% 62% at 10% 14%, color-mix(in srgb, var(--g3) 88%, transparent) 0%, transparent 72%),
  radial-gradient(48% 66% at 92% 8%, color-mix(in srgb, var(--g4) 78%, transparent) 0%, transparent 72%),
  radial-gradient(60% 72% at 82% 96%, color-mix(in srgb, var(--ac) 92%, transparent) 0%, transparent 72%),
  radial-gradient(44% 58% at 14% 92%, color-mix(in srgb, var(--g4) 55%, transparent) 0%, transparent 70%),
  linear-gradient(135deg, color-mix(in srgb, var(--ac) 62%, #0c0c18) 0%, color-mix(in srgb, var(--g3) 58%, #0c0c18) 100%); }
/* украшений на фоне нет: объём дают само сияние и стекло */
.d-glass .st-deco { display: none; }
.d-glass .st-head { z-index: 3; color: rgb(255 255 255 / .92); top: 1.5cqw; left: 5.4cqw; right: 5.4cqw; text-shadow: 0 .1em .4em rgb(0 0 20 / .35); }
/* главная панель: матовое стекло, сквозь которое видно сияние */
.stage-rel.d-glass > .stage { margin: 4.1cqw 3.2cqw 3.4cqw; padding: 2.5em 3.2em 3em; min-height: 0; border-radius: 2.3cqw; border: 1px solid rgb(255 255 255 / .75);
  background: linear-gradient(135deg, rgb(255 255 255 / .82) 0%, rgb(255 255 255 / .62) 100%);
  -webkit-backdrop-filter: blur(2.2cqw) saturate(180%); backdrop-filter: blur(2.2cqw) saturate(180%);
  box-shadow: 0 2.2cqw 4.2cqw -1.8cqw rgb(8 8 30 / .5), inset 0 1px 0 rgb(255 255 255 / .95), inset 0 -1px 0 rgb(255 255 255 / .3); }
.stage-rel.d-glass > .stage.dense { padding-top: 2em; }
.d-glass .stage, .d-glass .stage :is(h1, h2, h3) { color: var(--gi); }
.d-glass .stage h1 { font-weight: 700; letter-spacing: -.035em; }
.d-glass .stage .lead, .d-glass .stage .muted { color: rgb(21 21 28 / .62); }
/* карточки: стекло на стекле */
.d-glass :is(.sl-cards li, .sl-steps.row li, .num-card, .feed-card, .fb-arg) { border-radius: 1.25em; border: 1px solid rgb(255 255 255 / .9);
  background: linear-gradient(160deg, rgb(255 255 255 / .72) 0%, rgb(255 255 255 / .38) 100%);
  box-shadow: 0 .9em 1.8em -1.1em rgb(20 20 70 / .4), inset 0 1px 0 #fff, inset 0 -1px 0 rgb(255 255 255 / .35); }
/* Размытие фона у карточек убрано: они лежат на панели, которая уже размыта, и второе размытие поверх первого почти не видно,
   зато это самое дорогое, что есть на слайде, особенно когда карточек много и они обновляются. */
/* номера: просто цифры цветом темы, без кружков */
.d-glass :is(.card-n, .rank-n), .d-glass .sl-steps .step-n, .d-glass .sl-steps.row .step-n, .d-glass .sl-steps.col .step-n { flex: none; display: block; width: auto; height: auto; min-width: 1.5em; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  color: var(--ac); font-weight: 700; font-size: 1em; letter-spacing: -.02em; font-variant-numeric: tabular-nums; -webkit-background-clip: border-box; background-clip: border-box; }
.d-glass .sl-cards.one .card-n, .d-glass .sl-steps.row .step-n { font-size: 2.3em; font-weight: 600; letter-spacing: -.05em; line-height: 1; }
.d-glass .sl-steps.row li + li::before { height: 1px; background: rgb(21 21 28 / .25); }
.d-glass .num-val { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--gi); font-weight: 700; letter-spacing: -.045em; }
.d-glass :is(.bar-track, .rank-track, .meter) { border-radius: 1em; background: rgb(21 21 40 / .09); box-shadow: inset 0 1px 2px rgb(21 21 40 / .14), 0 1px 0 rgb(255 255 255 / .7); overflow: hidden; }
.d-glass :is(.bar-track, .rank-track, .meter) > i { border-radius: 1em; background: linear-gradient(180deg, rgb(255 255 255 / .45) 0%, rgb(255 255 255 / 0) 50%), linear-gradient(90deg, var(--ac), var(--g3)); }
.d-glass .bar-row.is-correct .bar-track > i { background: linear-gradient(180deg, rgb(255 255 255 / .4) 0%, rgb(255 255 255 / 0) 50%), linear-gradient(90deg, #17794a, #3fbf74); }
.d-glass .hist-bar { border-radius: .7em .7em .2em .2em; border: 1px solid rgb(255 255 255 / .5); background: linear-gradient(90deg, rgb(255 255 255 / .3) 0%, rgb(255 255 255 / 0) 40%), linear-gradient(180deg, var(--g3), var(--ac)); }
.d-glass .sl-table th { border-image: none; border-bottom: 1px solid rgb(21 21 28 / .55); color: rgb(21 21 28 / .7); }
.d-glass .stage td, .d-glass .stage th, .d-glass .sl-rank li, .d-glass .sl-steps li { border-color: rgb(21 21 28 / .12); }
.d-glass .sl-expl { border-radius: 1em; background: rgb(255 255 255 / .55); border: 1px solid rgb(255 255 255 / .9); color: var(--gi); }
.d-glass .qr { border-radius: 1.3em; border: 1px solid #fff; background: #fff; box-shadow: 0 1.4em 2.6em -1.2em rgb(20 20 70 / .5); }
.d-glass .join-chip { border: 1px solid rgb(255 255 255 / .8); background: rgb(255 255 255 / .78); -webkit-backdrop-filter: blur(1cqw) saturate(170%); backdrop-filter: blur(1cqw) saturate(170%); box-shadow: 0 .8em 1.8em -.7em rgb(8 8 30 / .5); }
.d-glass :is(.sl-img, .sl-figure img) { border-radius: 1.2em; box-shadow: 0 1.2em 2.2em -1.2em rgb(8 8 30 / .5); }
.d-glass .sl-wait .big, .d-glass .scale-avg .big, .d-glass .sl-join .code-big { color: var(--ac); }
.d-glass .cloud-w.in { color: var(--gi); }
.d-glass > .timer { z-index: 4; }
/* титул, главная мысль и цитата: текст в широкой стеклянной панели поверх сияния, линзы крупнее */
.stage-rel.d-glass:is(.k-cover, .k-statement, .k-quote) > .stage { margin: 9cqw 7cqw 8cqw; padding: 3em 3.4em; background: linear-gradient(135deg, rgb(255 255 255 / .26) 0%, rgb(255 255 255 / .1) 100%); border-color: rgb(255 255 255 / .5);
  box-shadow: 0 2.6cqw 5cqw -2cqw rgb(8 8 30 / .55), inset 0 1px 0 rgb(255 255 255 / .7), inset 0 0 3cqw rgb(255 255 255 / .12); }
.d-glass:is(.k-cover, .k-statement, .k-quote) .stage, .d-glass:is(.k-cover, .k-statement, .k-quote) .stage :is(h1, blockquote) { color: #fff; text-shadow: 0 .08em .5em rgb(0 0 30 / .3); }
.d-glass:is(.k-cover, .k-statement, .k-quote) .stage :is(.lead, .cap) { color: rgb(255 255 255 / .85); }
.d-glass:is(.k-cover, .k-statement, .k-quote) .sl-statement blockquote { border-left: 0; border-image: none; padding-left: 0; font-weight: 700; letter-spacing: -.035em; }
.d-glass:is(.k-cover, .k-statement, .k-quote) .sl-statement .cap { margin-left: 0; }
.d-glass .sl-cover-block { display: none; }
.d-glass .sl-cover:not(.with-img) { grid-template-columns: minmax(0, 1fr); }
.d-glass :is(.sl-cover, .sl-statement) { min-height: 0; }
:is(.thumb-view, .ed-preview) .d-glass > .stage { padding: 2.4em 3em 2.6em; }
/* в ленте миниатюр размытие отключено: десятки стёкол сразу тормозят прокрутку */
.thumb-view .d-glass > .stage, .thumb-view .d-glass :is(.sl-cards li, .sl-steps.row li, .num-card, .feed-card, .fb-arg) { -webkit-backdrop-filter: none; backdrop-filter: none; }
.thumb-view .d-glass > .stage { background: rgb(255 255 255 / .86); }
@media (max-width: 700px) { .stage-rel.d-glass > .stage { margin: 9cqw 3cqw 4cqw; padding: 1.8em 1.4em 2.2em; border-radius: 4cqw; } .stage-rel.d-glass:is(.k-cover, .k-statement, .k-quote) > .stage { margin: 12cqw 4cqw 8cqw; padding: 2em 1.6em; } .d-glass .st-head { left: 5cqw; right: 14cqw; top: 3cqw; } }

/* =====================================================================
   Журнал: белая полоса, цветная колонка с простыми формами, заголовки курсивом
   ===================================================================== */
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/fonts/playfair-cyrillic-wght-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/fonts/playfair-latin-wght-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 400 900; font-display: swap; src: url(/fonts/playfair-cyrillic-wght-italic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 400 900; font-display: swap; src: url(/fonts/playfair-latin-wght-italic.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Система темы. Шрифты: заголовки курсивом Playfair Display, числа прямым Playfair Display, всё остальное Montserrat.
   Формы: слева цветная колонка с кругом, линией и номером страницы; сверху двойная линейка. На титуле, главной мысли
   и цитате та же колонка шире, в ней композиция из тех же простых форм: круг, полукруг, кольцо, линии. */
.stage-rel.d-mag { --serif: "Playfair Display", Georgia, "Times New Roman", serif; --col: 9.2cqw; --gut: 12.4cqw;
  /* глубокий тон темы (тёмно-синий, тёмно-зелёный, бордовый) и его светлый спутник для форм на тёмном */
  --md: color-mix(in srgb, var(--ac) 62%, #0d0d12); --ma: color-mix(in srgb, var(--ac) 55%, #fff); --mt: color-mix(in srgb, var(--ac) 9%, #fff); --mk: #16161a; --ml: rgb(22 22 26 / .22); --paper: #fcfbf8;
  background: var(--paper); }
.stage-rel.d-mag:is(.k-cover, .k-statement, .k-quote) { --col: 31cqw; --gut: 34.6cqw; }
/* колонка, в ней тонкая вертикальная линия; круг вверху колонки; двойная линейка над содержимым */
.d-mag .st-deco i:nth-child(1) { left: 0; top: 0; bottom: 0; width: var(--col); background: linear-gradient(rgb(255 255 255 / .4), rgb(255 255 255 / .4)) 4.6cqw 8.4cqw / 1px 34% no-repeat, var(--md); }
.d-mag .st-deco i:nth-child(2) { left: var(--gut); right: 5.4cqw; top: 4.5cqw; height: .34cqw; border-top: .14cqw solid var(--mk); border-bottom: 1px solid var(--mk); }
.d-mag .st-deco i:nth-child(3) { left: 2.6cqw; top: 2.6cqw; width: 4cqw; height: 4cqw; border-radius: 50%; background: var(--ma); }
.d-mag .st-deco b { display: block; position: absolute; left: 0; width: 9.2cqw; bottom: 2.6cqw; text-align: center; font: 500 4.4cqw/1 var(--serif); color: #fff; letter-spacing: -.02em; }
.d-mag .st-head, .d-mag.k-join .st-head, .d-mag.k-cover .st-head { display: flex; top: 2.2cqw; left: var(--gut); right: 5.4cqw; color: var(--mk); font-weight: 600; letter-spacing: .24em; }
.d-mag .st-pos { display: none; }
.stage-rel.d-mag > .stage { padding-left: var(--gut); padding-right: 5.4cqw; }
:is(.thumb-view, .ed-preview) .d-mag .st-deco i:nth-child(2) { top: 3.9cqw; }
/* композиция из простых форм для широкой колонки */
.st-art { display: none; }
.d-mag .st-art .bg { fill: var(--md); } .d-mag .st-art .c1 { fill: var(--ma); } .d-mag .st-art .c2 { fill: var(--ac); } .d-mag .st-art .pf { fill: var(--paper); }
.d-mag .st-art .ol { fill: none; stroke: var(--paper); stroke-width: 2; } .d-mag .st-art .ln { fill: none; stroke: var(--paper); stroke-width: 2; opacity: .55; stroke-linecap: round; }
.d-mag:is(.k-cover, .k-statement, .k-quote) .st-art { display: block; position: absolute; left: 0; top: 0; width: var(--col); height: 100%; }
.d-mag:is(.k-cover, .k-statement, .k-quote) .st-deco i:nth-child(1) { background: var(--md); }
.d-mag:is(.k-cover, .k-statement, .k-quote) .st-deco :is(i:nth-child(3), b) { display: none; }

/* шрифты */
.d-mag .stage, .d-mag .stage :is(h2, h3) { color: var(--mk); }
.d-mag .stage h1 { font: italic 500 4em/1.04 var(--serif); letter-spacing: -.015em; color: var(--mk); max-width: 17em; text-wrap: balance; }
.d-mag .stage.dense h1 { font-size: 2.8em; }
.d-mag .sl-join h1 { font-size: 3.4em; }
.d-mag .sl-cover h1 { font-size: 5em; }
.d-mag .stage .lead, .d-mag .stage .muted { color: rgb(22 22 26 / .64); }
.d-mag.k-text .sl-text p:first-child::first-letter { float: left; font: italic 500 3.1em/.82 var(--serif); padding: .06em .12em 0 0; color: var(--md); }
/* числа: прямой Playfair Display, чтобы ноль не читался как буква О */
.d-mag :is(.card-n, .rank-n), .d-mag .sl-steps .step-n, .d-mag .sl-steps.row .step-n, .d-mag .sl-steps.col .step-n { display: block; width: auto; height: auto; min-width: 1.1em; padding: 0; border: 0; border-radius: 0; background: none; color: var(--md); font: 500 1.6em/1 var(--serif); -webkit-background-clip: border-box; background-clip: border-box; }
.d-mag .sl-cards.one .card-n, .d-mag .sl-steps.row .step-n { font-size: 3.2em; }
.d-mag .num-val { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--md); font: 500 5em/1 var(--serif); letter-spacing: -.02em; }
.d-mag .num-lab { color: rgb(22 22 26 / .72); }
.d-mag .stage .big { font: 500 7em/1 var(--serif); color: var(--md); }
.d-mag .sl-join .code-big { color: var(--md); }
/* карточки: тонированная плашка с толстой линейкой сверху */
.d-mag :is(.sl-cards li, .sl-steps.row li, .num-card, .feed-card, .fb-arg) { border-radius: 0; background: var(--mt); border: 0; border-top: .2em solid var(--md); box-shadow: none; }
.d-mag .sl-steps.row li + li::before { display: none; }
.d-mag .sl-steps li { border-top-color: var(--ml); }
.d-mag :is(.bar-track, .rank-track, .meter) { border-radius: 0; background: var(--mt); height: 1.2em; }
.d-mag .rank-track, .d-mag .meter { height: .8em; }
.d-mag :is(.bar-track, .rank-track, .meter) > i { border-radius: 0; background: var(--md); }
.d-mag .bar-row.is-correct .bar-track > i { background: #17794a; }
.d-mag .hist-bar { border-radius: 0; background: var(--md); }
.d-mag .sl-table th { border-image: none; border-bottom: .14em solid var(--mk); color: var(--mk); text-transform: uppercase; letter-spacing: .16em; font-size: .68em; font-weight: 600; }
.d-mag .sl-table td:first-child { font-weight: 600; }
.d-mag .sl-table tbody tr:nth-child(odd) td { background: var(--mt); }
.d-mag .sl-table td, .d-mag .sl-table th { padding-left: .7em; }
.d-mag .sl-table td, .d-mag .stage td, .d-mag .stage th, .d-mag .sl-rank li { border-color: var(--ml); }
.d-mag .qr { border-radius: 0; border: .14cqw solid var(--mk); box-shadow: none; padding: 1.1em; background: #fff; }
.d-mag .join-chip { border-radius: 0; background: #fff; border: .14cqw solid var(--mk); border-right: 0; box-shadow: none; }
.d-mag .sl-expl { border-radius: 0; background: var(--mt); border-left: .2em solid var(--md); color: var(--mk); }
.d-mag .fb-tag, .d-mag .stage .tag { border-radius: 0; }
.d-mag .cloud-w { font: italic 500 1em/1.1 var(--serif); letter-spacing: 0; } .d-mag .cloud-w.ac { color: var(--md); } .d-mag .cloud-w.in { color: var(--mk); } .d-mag .cloud-w.mu { color: rgb(22 22 26 / .45); }
.d-mag :is(.sl-img, .sl-figure img) { border-radius: 0; }
.d-mag .sl-wait .big { color: var(--md); }
/* титул, главная мысль и цитата */
.d-mag .sl-cover:not(.with-img) { grid-template-columns: minmax(0, 1fr); }
.d-mag .sl-cover-block { display: none; }
.d-mag .sl-cover h1::after, .d-mag .sl-statement blockquote::after { content: ""; display: block; width: 1.5em; height: .05em; min-height: 3px; margin-top: .45em; background: var(--md); }
.d-mag .sl-statement { max-width: 36em; }
.d-mag .sl-statement::before { content: "\00AB"; display: block; font: italic 500 8em/.62 var(--serif); color: var(--md); margin: 0 0 .14em -.05em; }
.d-mag .sl-statement blockquote { border: 0; border-image: none; padding: 0; font: italic 500 4.2em/1.12 var(--serif); letter-spacing: -.01em; color: var(--mk); }
.d-mag .sl-statement .cap { margin-left: 0; font: 600 1em/1.4 var(--font-head); letter-spacing: .2em; text-transform: uppercase; color: rgb(22 22 26 / .64); }
@media (max-width: 700px) { .stage-rel.d-mag, .stage-rel.d-mag:is(.k-cover, .k-statement, .k-quote) { --col: 3cqw; --gut: 7cqw; } .d-mag .st-deco :is(i:nth-child(3), b), .d-mag .st-art, .d-mag:is(.k-cover, .k-statement, .k-quote) .st-art { display: none; }
  .d-mag .st-deco i:nth-child(1) { background: var(--md); } .d-mag .sl-statement::before { font-size: 6em; } .d-mag .stage h1 { font-size: 2.6em; } .d-mag .sl-cover h1 { font-size: 3.2em; } }

/* ---------- выбор темы в настройках презентации ---------- */
.design-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.design-card { display: block; text-align: left; padding: 8px 8px 10px; border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; cursor: pointer; font: inherit; color: inherit; transition: border-color .15s ease, box-shadow .15s ease; }
.design-card:hover { border-color: #a1a1aa; }
.design-card.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.design-view { display: block; margin-bottom: 8px; }
.design-view .thumb-view { display: block; }
.design-card > b { display: block; font-size: 14px; font-weight: 600; }
.design-hint { display: block; font-size: 13px; color: var(--mut); line-height: 1.35; margin-top: 2px; }
@media (max-width: 560px) { .design-picker { grid-template-columns: 1fr; } }

/* в редакторе плашка с кодом не показывается: на занятии она сама прячется, а здесь только закрывала бы слайд */
.ed-preview .join-chip { display: none; }

/* =====================================================================
   Автораскладка: размер текста по объёму, переносы, ничего не вылезает из карточек
   ===================================================================== */
/* текст на слайде переносится по слогам, а слишком длинное слово ломается, но за край карточки не выходит */
/* Переносы по слогам включаются только там, где без них не обойтись: в узких ячейках таблиц и в карточках, где слово
   не влезло даже самым мелким размером (класс tx-xl). Иначе браузер рвёт слова и там, где они спокойно помещаются. */
.stage :is(h1, h2, p, li, td, th, blockquote, .num-lab, .num-val, .bar-lab, .rank-lab, .feed-card, .card-t, .step-t, .lead) { overflow-wrap: anywhere; -webkit-hyphens: manual; hyphens: manual; }
.stage :is(td, th, .bar-lab, .rank-lab), .stage .tx-xl :is(.card-t, .step-t, .num-lab) { -webkit-hyphens: auto; hyphens: auto; }
.stage :is(.card-t, .step-t, .num-lab) { display: block; min-width: 0; max-width: 100%; }
.stage :is(.sl-cards li, .sl-steps li, .num-card) { min-width: 0; }
/* проверка «влезает ли слово»: на время замера переносы отключаются */
.tx-probe :is(.card-t, .step-t, .num-lab) { overflow-wrap: normal !important; -webkit-hyphens: manual !important; hyphens: manual !important; }
/* карточки в ряд */
.stage .sl-cards.one.tx-s li { font-size: 1.75em; } .stage .sl-cards.one.tx-m li { font-size: 1.4em; } .stage .sl-cards.one.tx-l li { font-size: 1.16em; } .stage .sl-cards.one.tx-xl li { font-size: .98em; }
/* длинные пункты: строки во всю ширину */
.sl-cards.rows { grid-template-columns: minmax(0, 1fr); max-width: none; gap: .8em; }
.stage .sl-cards.rows li { flex-direction: row; align-items: baseline; gap: 1em; padding: 1em 1.3em; }
.stage .sl-cards.rows.tx-s li { font-size: 1.5em; } .stage .sl-cards.rows.tx-m li { font-size: 1.28em; } .stage .sl-cards.rows.tx-l li { font-size: 1.1em; } .stage .sl-cards.rows.tx-xl li { font-size: .96em; }
.stage .sl-cards.rows .card-n { font-size: 1em; }
/* две колонки */
.stage .sl-cards.two.tx-s li { font-size: 1.62em; padding: .85em 1.2em; } .stage .sl-cards.two.tx-m li { font-size: 1.14em; } .stage .sl-cards.two.tx-l li { font-size: 1em; } .stage .sl-cards.two.tx-xl li { font-size: .9em; }
.stage .sl-cards.two.many li { padding-top: .55em; padding-bottom: .55em; }
/* шаги */
.stage .sl-steps.row.tx-s li { font-size: 1.6em; } .stage .sl-steps.row.tx-m li { font-size: 1.3em; } .stage .sl-steps.row.tx-l li { font-size: 1.1em; } .stage .sl-steps.row.tx-xl li { font-size: .95em; }
.stage .sl-steps.col.tx-s li { font-size: 1.6em; } .stage .sl-steps.col.tx-m li { font-size: 1.3em; } .stage .sl-steps.col.tx-l li { font-size: 1.1em; } .stage .sl-steps.col.tx-xl li { font-size: .98em; }
.sl-steps.col:is(.n1, .n2, .n3, .n4) { grid-auto-flow: row; grid-template-rows: none; max-width: 52em; }
.sl-steps.col li { align-items: baseline; }
/* подписи под цифрами */
.stage .sl-numbers.tx-s .num-lab { font-size: 1.7em; } .stage .sl-numbers.tx-m .num-lab { font-size: 1.35em; } .stage .sl-numbers.tx-l .num-lab { font-size: 1.12em; } .stage .sl-numbers.tx-xl .num-lab { font-size: .98em; }
/* текстовый слайд */
.stage .sl-text.tx-s p { font-size: 2em; } .stage .sl-text.tx-m p { font-size: 1.6em; max-width: 44em; } .stage .sl-text.tx-l p { font-size: 1.3em; max-width: none; }
.stage .sl-text.tx-l { columns: 2; column-gap: 3em; } .stage .sl-text.tx-l p { break-inside: avoid; }
/* таблица: столбцы делят ширину поровну, длинный текст переносится внутри ячейки */
.stage .sl-table { table-layout: fixed; }
/* подписи вариантов в опросе и рейтинге не выталкивают полосу */
.bar-row > *, .sl-rank li > * { min-width: 0; }
.stage .sl-cards.rows .card-t { flex: 1; }

/* главная мысль и цитата: длинная фраза мельче */
.stage .sl-statement.tx-m blockquote { font-size: 2.9em; } .stage .sl-statement.tx-l blockquote { font-size: 2.15em; line-height: 1.22; }
.stage .sl-statement.tx-m, .stage .sl-statement.tx-l { max-width: 44em; }
.stage .sl-statement .cap { font-size: 1.1em; }
/* таблица */
.stage .sl-table.tx-s { font-size: 1.7em; } .stage .sl-table.tx-m { font-size: 1.2em; } .stage .sl-table.tx-l { font-size: .92em; }
.stage .sl-table.tx-m :is(td, th) { padding-top: .5em; padding-bottom: .5em; } .stage .sl-table.tx-l :is(td, th) { padding-top: .32em; padding-bottom: .32em; line-height: 1.25; }
/* опрос, викторина, рейтинг: длинным вариантам больше ширины и мельче шрифт */
.sl-bars.tx-m .bar-row { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 6em; font-size: 1.12em; }
.sl-bars.tx-l .bar-row { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) 5.5em; font-size: .94em; margin: .5em 0; line-height: 1.25; }
.sl-bars.many .bar-row { margin-top: .45em; margin-bottom: .45em; } .sl-bars.many .bar-track { height: 1.1em; }
.sl-rank.tx-m li { grid-template-columns: 2em minmax(0, 1.25fr) minmax(0, 1fr) 3em; font-size: 1.12em; }
.sl-rank.tx-l li { grid-template-columns: 1.8em minmax(0, 2.2fr) minmax(0, 1fr) 2.6em; font-size: .94em; line-height: 1.25; padding: .4em 0; }
.sl-rank.many li { padding-top: .35em; padding-bottom: .35em; }
.stage .sl-expl { overflow-wrap: anywhere; }
/* открытый вопрос: длинный ответ обрезается, лишние карточки сворачиваются в «и ещё N» */
.sl-feed.tx-m .feed-card { font-size: 1em; } .sl-feed.tx-l .feed-card { font-size: .86em; padding: .6em .8em; margin-bottom: .6em; }
.feed-card { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }
.feed-more { break-inside: avoid; padding: .5em .2em; font-size: 1em; font-weight: 600; color: var(--mut); }

/* картинка на обычном слайде: содержимое слева, картинка справа. Размер картинки задан заранее, слайд не прыгает при загрузке. */
.stage > .sl-side { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--pw, 38%)); gap: 3em; align-items: stretch; }
.sl-side-main { min-width: 0; display: flex; flex-direction: column; }
.sl-side-main > h1 + :is(.sl-cards, .sl-steps, .sl-numbers, .sl-table, .sl-text, .sl-bars) { margin-top: auto; }
.sl-side-main > h1 ~ :last-child, .sl-side-main > .sl-statement { margin-bottom: auto; }
.sl-side-main > .sl-statement { margin-top: auto; min-height: 0; }
.sl-side .sl-cards.one, .sl-side .sl-numbers[class], .sl-side .sl-steps.row[class] { grid-template-columns: minmax(0, 1fr); }
.sl-side .sl-cards.two { grid-template-columns: minmax(0, 1fr); }
.sl-side .sl-cards.one li, .sl-side .sl-steps.row li { flex-direction: row; align-items: baseline; gap: .8em; }
.sl-side .sl-steps.row li + li::before { display: none; }
.sl-side .sl-text.tx-l { columns: 1; }
@media (max-width: 700px) { .stage > .sl-side { grid-template-columns: minmax(0, 1fr); gap: 1.4em; } }
.sl-side .sl-statement, .stage .sl-side .sl-statement.tx-m, .stage .sl-side .sl-statement.tx-l { max-width: 100%; min-width: 0; }
.sl-side .sl-statement blockquote { font-size: 2.6em; } .stage .sl-side .sl-statement.tx-m blockquote { font-size: 2.1em; } .stage .sl-side .sl-statement.tx-l blockquote { font-size: 1.6em; }
.d-mag .sl-side .sl-statement blockquote { font-size: 2.8em; }

/* =====================================================================
   Картинка на слайде: целиком или в рамке с выбором видимой части
   ===================================================================== */
.sl-pic { align-self: center; justify-self: center; width: 100%; min-width: 0; }
.sl-pic img { display: block; }
/* целиком: картинка не обрезается, вписывается в отведённую ширину и высоту */
.sl-pic.contain { display: flex; justify-content: center; align-items: center; }
.sl-pic.contain img { width: auto; height: auto; max-width: 100%; max-height: 24em; object-fit: contain; border-radius: var(--r-ctl); }
/* в рамке: рамка 4:3, картинка заполняет её, лишнее скрыто; сдвиг и приближение задаёт автор */
/* высота рамки ограничена в размерах шрифта слайда: если слайд не помещается, рамка уменьшается вместе с текстом */
.sl-pic.cover { aspect-ratio: 4 / 3; max-height: 24em; overflow: hidden; border-radius: var(--r-card); }
.sl-pic.cover img { width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0; }
.sl-cover.with-img, .sl-split:not(.no-img) { grid-template-columns: minmax(0, 1fr) minmax(0, var(--pw, 38%)); }
.sl-split.rev:not(.no-img) { grid-template-columns: minmax(0, var(--pw, 38%)) minmax(0, 1fr); }
.sl-split.rev > .sl-pic { order: -1; } .sl-split.rev > :first-child { order: 0; }
.sl-figure { width: var(--pw, 70%); max-width: 100%; margin: 0 auto; }
.sl-figure .sl-pic.contain img { max-height: 27em; }
.sl-figure .sl-pic.cover { aspect-ratio: 16 / 9; }
.d-glass .sl-pic.cover, .d-glass .sl-pic.contain img { border-radius: 1.2em; box-shadow: 0 1.2em 2.2em -1.2em rgb(8 8 30 / .5); }
.d-mag .sl-pic.cover, .d-mag .sl-pic.contain img { border-radius: 0; }
@media (max-width: 700px) { .sl-cover.with-img, .sl-split:not(.no-img), .sl-split.rev:not(.no-img) { grid-template-columns: minmax(0, 1fr); } .sl-figure { width: 100%; } .sl-pic.contain img { max-height: 16em; } }

/* настройки картинки в редакторе */
.img-tools { display: grid; gap: 10px; margin-top: 10px; }
.seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; border-radius: var(--r-ctl); background: var(--bg-3); }
.seg button { min-height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 13px; font-weight: 500; color: var(--ink-2); cursor: pointer; }
.seg button.on { background: #fff; color: var(--ink); font-weight: 600; box-shadow: var(--shadow-1); }
.img-tools label { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 13px; font-weight: 500; color: var(--ink-2); margin: 0; }
.img-tools input[type=range] { height: 28px; }
.img-pan { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-ctl); background: var(--bg-3); cursor: grab; touch-action: none; user-select: none; }
.img-pan.wide { aspect-ratio: 16 / 9; }
.img-pan:active { cursor: grabbing; }
.img-pan img { display: block; width: 100%; height: 100%; max-height: none; object-fit: cover; margin: 0; border-radius: 0; pointer-events: none; }
.img-field .img-whole { max-width: 100%; max-height: 140px; border-radius: var(--r-bar); display: block; margin-bottom: 8px; }

/* Викторина: условие и таблица к вопросу */
.stage .sl-qtext { font-size: 1.55em; line-height: 1.38; margin: .7em 0 0; max-width: 46em; text-wrap: pretty; }
.stage .sl-qtext.long { font-size: 1.28em; }
.stage .sl-qtable { font-size: 1.3em; margin-top: .8em; width: auto; min-width: 46%; }
.stage .sl-qtable td, .stage .sl-qtable th { padding-top: .38em; padding-bottom: .38em; }
.stage .sl-qno { margin: 0 0 .55em; font-size: 1.1em; font-weight: 700; letter-spacing: .02em; color: var(--ac, #5b3fd0); }
.stage .sl-qwait { margin-top: auto; font-size: 1.5em; color: var(--mu, #52525b); }
.stage .sl-qwait b { font-size: 1.6em; color: var(--ac); margin-right: .2em; }
/* Противоречие в ответах: подсказка направления и карточка рекомендации */
.stage .cr-hint { font-size: 1.15em; line-height: 1.35; padding: .6em .8em; border-radius: .6em; background: rgb(217 154 0 / .12); }
.stage .cr-card { margin-top: .8em; padding: .8em 1em; border-radius: .7em; background: #fff; box-shadow: 0 0 0 .12em var(--ac); font-size: 1.15em; line-height: 1.35; }
.stage .cr-card b { color: var(--ac); }
.stage .cr-card p { margin: .3em 0 0; }

/* Тест блоком */
.stage .sl-wait .big small { font-size: .35em; font-weight: 600; opacity: .6; }
.stage .sl-qsum { display: grid; gap: .5em 2.4em; margin-top: auto; font-size: 1.25em; }
.stage .sl-qsum.two { grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(var(--rows, 10), auto); }
.stage .sl-qsum.dense { font-size: 1.02em; gap: .34em 2.4em; }
.stage .qs-row { display: grid; grid-template-columns: 1.6em 1fr 5em 3em; align-items: center; gap: .6em; min-width: 0; }
.stage .qs-n { font-weight: 700; color: var(--ac); }
.stage .qs-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage .qs-row b { text-align: right; }
.stage .sl-qsum { padding-bottom: .8em; }
/* Решения команд: карточки всех команд, выступающая подсвечена */
.stage .sl-teams { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em; margin-top: 1.2em; }
.stage .sl-teams.n2, .stage .sl-teams.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stage .sl-teams.n1 { grid-template-columns: minmax(0, 1fr); }
.stage .tm-card { padding: .9em 1.1em 1em; border-radius: 1em; background: rgb(255 255 255 / .72); border: 1px solid rgb(24 24 27 / .08); }
.stage .tm-card.on { border-color: var(--ac, #5b3fd0); box-shadow: 0 0 0 2px var(--ac, #5b3fd0); background: #fff; }
.stage .tm-card h3 { margin: 0 0 .15em; font-size: 1.05em; font-weight: 700; }
.stage .tm-k { font-size: .82em; color: var(--mu, #52525b); margin-bottom: .45em; }
.stage .tm-list { list-style: none; margin: 0; padding: 0; }
.stage .tm-list li { display: flex; align-items: baseline; gap: .5em; padding: .28em 0; border-top: 1px solid rgb(24 24 27 / .07); font-size: .92em; line-height: 1.25; }
.stage .tm-list li:first-child { border-top: 0; font-weight: 600; }
.stage .tm-n { flex: none; width: 1.1em; color: var(--ac, #5b3fd0); font-weight: 700; }
.stage .tm-t { flex: 1; min-width: 0; }
.stage .tm-list b { flex: none; font-weight: 600; }
.stage .tm-cr { margin-top: .5em; }
.stage .tm-note { margin-top: 1em; font-size: .95em; }