/*
 * deck.css — единый стиль «хром»-слайдов дека Книжного клуба.
 * Извлечён из _template/index.html: правка общего стиля = правка этого файла.
 * Маркеров подстановки шаблона здесь быть не должно — только чистый CSS.
 */

/* ===== Базовый каркас дека (viewport, слайды, типографика, тултипы) ===== */

/* ===== Палитра =====
   Тёмная тема — значения по умолчанию, светлая целиком собирается
   переопределением этих же токенов на <html data-theme="light">.
   Правило простое: в самих правилах цветов-литералов быть не должно,
   иначе слайд перестанет переключаться вместе с остальным деком. */
:root {
    color-scheme: dark;

    /* Подложки: от самой глубокой к «поднятой» */
    --bg: #000000;
    --bg-rgb: 10, 10, 10;
    --bg-sunken: #101010;
    --bg-card: #0a0a0a;
    --bg-hover: #171717;
    --bg-active: #27272a;

    /* Рамки: от еле заметной до активной */
    --border-soft: #222222;
    --border: #333333;
    --border-hover: #444444;
    --border-mid: #3f3f46;
    --border-strong: #555555;

    /* Текст: от главного до самого приглушённого */
    --text-main: #ededed;
    --text-soft: #d4d4d8;
    --text-muted: #a1a1aa;
    --text-dim: #71717a;
    --text-faint: #52525b;
    --accent: #ffffff;

    /* Накладки и тени: --tint-rgb подсвечивает поверхность «своим» цветом
       темы, --shadow-k делает тени в светлой теме кратно мягче. */
    --tint-rgb: 255, 255, 255;
    --shadow-rgb: 0, 0, 0;
    --shadow-k: 1;

    /* Подсветка кода и терминов */
    --s-kw: #f87171;
    --s-str: #34d399;
    --s-com: #52525b;
    --s-var: #60a5fa;
    --s-key: #e879f9;

    --font-sans: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

:root[data-theme='light'] {
    color-scheme: light;

    --bg: #ffffff;
    --bg-rgb: 255, 255, 255;
    --bg-sunken: #f4f4f5;
    --bg-card: #fafafa;
    --bg-hover: #f1f1f3;
    --bg-active: #e4e4e7;

    --border-soft: #ededef;
    --border: #e1e1e5;
    --border-hover: #d0d0d6;
    --border-mid: #c9c9d1;
    --border-strong: #b4b4be;

    --text-main: #18181b;
    --text-soft: #3f3f46;
    --text-muted: #52525b;
    --text-dim: #71717a;
    --text-faint: #8f8f99;
    --accent: #09090b;

    --tint-rgb: 24, 24, 27;
    --shadow-rgb: 24, 24, 27;
    --shadow-k: 0.16;

    --s-kw: #c2410c;
    --s-str: #047857;
    --s-com: #8f8f99;
    --s-var: #1d4ed8;
    --s-key: #a21caf;
}

html, body {
    width: 100%; height: 100%; margin: 0; overflow: hidden;
    background: var(--bg); color: var(--text-main); font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
}

.deck-viewport { position: absolute; inset: 0; overflow: hidden; }
.deck-stage {
    position: absolute; left: 0; top: 0; width: 1920px; height: 1080px;
    transform-origin: 0 0; background: var(--bg);
}
.slide {
    position: absolute; inset: 0; display: block; visibility: hidden; opacity: 0;
    pointer-events: none; transition: opacity 0.4s ease;
}
.slide.active { visibility: visible; opacity: 1; pointer-events: auto; z-index: 1; }

h1 { font-size: 88px; font-weight: 700; letter-spacing: -0.04em; margin-bottom: 24px; line-height: 1.1; }
h2 { font-size: 64px; font-weight: 600; letter-spacing: -0.03em; margin-bottom: 32px; }
h3 { font-size: 32px; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 16px; color: var(--accent); }
p { font-size: 26px; line-height: 1.6; color: var(--text-muted); margin-bottom: 24px; }

.gradient-text {
    background: linear-gradient(135deg, var(--accent) 0%, var(--text-dim) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.layout-center {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 100%; text-align: center; padding: 0 100px;
}
.layout-split {
    display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
    height: 100%; padding: 0 100px; align-items: center;
}
.layout-interactive {
    display: grid; grid-template-columns: 55% 45%; gap: 60px;
    height: 100%; padding: 0 80px; align-items: center; align-content: center;
}

.badge {
    display: inline-block; padding: 10px 20px; border-radius: 9999px;
    border: 1px solid var(--border); font-size: 18px; font-weight: 500;
    margin-bottom: 40px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em;
}

.card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 16px; padding: 50px;
}

/* Code Viewer */
.code-panel {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px;
    overflow: hidden; display: flex; flex-direction: column; height: 100%; max-height: 800px;
}
.code-header {
    padding: 20px 30px; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 12px;
    font-family: var(--font-mono); font-size: 14px; color: var(--text-muted);
}
.mac-dots { display: flex; gap: 8px; margin-right: 16px; }
.mac-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--border); }
.code-content {
    padding: 20px; overflow-y: auto; flex-grow: 1; font-family: var(--font-mono);
    font-size: 18px; line-height: 1.6; color: var(--text-muted);
}

/* Custom scrollbar in Vercel style */
.code-content::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.code-content::-webkit-scrollbar-track {
    background: transparent;
}
.code-content::-webkit-scrollbar-thumb {
    background: var(--border-soft);
    border-radius: 4px;
}
.code-content::-webkit-scrollbar-thumb:hover {
    background: var(--border-hover);
}

.code-line {
    padding: 8px 16px; margin: 0 -16px; border-radius: 8px; cursor: pointer;
    transition: all 0.2s; border-left: 3px solid transparent;
}
.code-line:hover { background: var(--bg-hover); color: var(--accent); }
.code-line.active { background: var(--bg-active); color: var(--accent); border-left-color: var(--accent); }

.info-panel {
    background: transparent; border: none;
    padding: 60px; height: 100%; display: flex; flex-direction: column; justify-content: center;
}
.info-panel h3 { font-size: 36px; font-weight: 600; margin-bottom: 24px; }
.info-panel p { font-size: 22px; line-height: 1.8; color: var(--text-muted); }

.interactive-hint {
    position: absolute; bottom: 40px; left: 80px; font-size: 16px; color: var(--text-muted); opacity: 0.5;
    display: flex; align-items: center; gap: 8px; font-family: var(--font-sans);
}
.interactive-hint::before {
    content: 'ℹ'; font-size: 18px;
}

/* Tooltip style */
.tooltip-trigger {
    position: relative;
    color: var(--accent);
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px dashed var(--accent);
    transition: border-color 0.2s;
    display: inline-block;
}
.tooltip-trigger:hover {
    border-bottom-color: var(--text-muted);
}
.tooltip-content {
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 18px 22px;
    width: 480px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-muted);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    box-shadow: 0 10px 30px rgba(var(--shadow-rgb), calc(0.8 * var(--shadow-k)));
    z-index: 1000;
    text-align: left;
    visibility: hidden;
}
/* Keep tooltip open when hovering trigger or the tooltip itself */
.tooltip-trigger:hover .tooltip-content,
.tooltip-content:hover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
/* Bridge to allow smooth hover transition */
.tooltip-content::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 35px;
    background: transparent;
}
/* Style for links inside the tooltip */
.tooltip-content a {
    color: var(--accent);
    text-decoration: underline;
    font-weight: 500;
    transition: color 0.2s ease;
}
.tooltip-content a:hover {
    color: var(--text-muted);
}

/* Syntax */
.s-kw { color: var(--s-kw); } /* keyword */
.s-str { color: var(--s-str); } /* string */
.s-com { color: var(--s-com); } /* comment */
.s-var { color: var(--s-var); } /* variable */
.s-key { color: var(--s-key); } /* yaml key */

.repo-link {
    position: fixed; top: 40px; right: 40px; padding: 14px 28px;
    background: transparent; border: 1px solid var(--border); border-radius: 8px;
    color: var(--text-muted); text-decoration: none; font-size: 16px;
    transition: all 0.2s; z-index: 100; font-weight: 500; font-family: var(--font-sans);
}
.repo-link:hover { border-color: var(--accent); color: var(--accent); }

.progress {
    position: fixed; top: 0; left: 0; height: 2px; background: var(--fx, var(--accent)); z-index: 1000;
    transition: width 0.3s ease;
}

/* Flat Icon Styling */
.flat-icon {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: inline-block;
}

/* Slide 7 Clickable Cards and Tooltips */
.build-service-card {
    cursor: pointer;
    transition: border-color 0.2s, transform 0.2s, background-color 0.2s;
}
.build-service-card:hover {
    border-color: var(--border-strong);
    background-color: var(--bg-sunken);
}
.build-service-card.active-card {
    border-color: var(--accent);
    background-color: var(--bg-hover);
}

.build-controller {
    cursor: pointer;
    transition: border-color 0.2s, transform 0.2s, background-color 0.2s;
}
.build-controller:hover {
    border-color: var(--accent);
    background-color: var(--bg-sunken);
}
.build-controller.active-card {
    border-color: var(--accent);
    background-color: var(--bg-sunken);
}

.build-tooltip {
    position: absolute;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    width: 380px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px) translateX(-50%);
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 100;
    box-shadow: 0 10px 30px rgba(var(--shadow-rgb), calc(0.8 * var(--shadow-k)));
    display: flex;
    flex-direction: column;
    text-align: left;
}
.build-tooltip.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) translateX(-50%);
}

.build-tooltip::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    z-index: 1;
}

.build-tooltip-above {
    bottom: 515px;
}
.build-tooltip-above::after {
    bottom: -6px;
    left: calc(50% - 5px);
    transform: rotate(45deg);
    border-top: none;
    border-left: none;
}

.build-tooltip-below {
    top: 505px;
}
.build-tooltip-below::after {
    top: -6px;
    left: calc(50% - 5px);
    transform: rotate(45deg);
    border-bottom: none;
    border-right: none;
}

.tooltip-tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--border-soft);
    padding-bottom: 8px;
    margin-bottom: 12px;
}
.tooltip-tab {
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}
.tooltip-tab:hover {
    color: var(--accent);
}
.tooltip-tab.active {
    color: var(--accent);
    background: var(--border-soft);
}

.tooltip-header {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--accent);
    border-bottom: 1px solid var(--border-soft);
    padding-bottom: 8px;
    margin-bottom: 12px;
    font-weight: 500;
}

.tooltip-tab-content {
    display: none;
}
.tooltip-tab-content.active {
    display: block;
}
.tooltip-tab-content pre {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-muted);
    overflow-x: auto;
}

/* Left Aspect Diagram for Slides 14 & 15 */
.arch-container-left {
    display: flex;
    flex-direction: column;
    width: 280px;
    gap: 12px;
    margin-left: 0px;
}
.arch-aspect-stack-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.arch-aspect-card-left {
    background: rgba(var(--tint-rgb), 0.02);
    border: 1px solid rgba(var(--tint-rgb), 0.04);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--accent);
    text-align: center;
    opacity: 0.25;
    transition: all 0.3s ease;
}
.arch-aspect-card-left.card-app-left {
    padding: 10px 12px;
    font-size: 15px;
    font-weight: 600;
}
.arch-aspect-card-left.active-highlight {
    opacity: 1;
    background: rgba(var(--tint-rgb), 0.08);
    border-color: rgba(var(--tint-rgb), 0.6);
    color: var(--accent);
    font-weight: 600;
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(var(--tint-rgb), 0.1);
    z-index: 10;
}
.acc-link {
    color: rgba(var(--tint-rgb), 0.85);
    text-decoration: none;
    border-bottom: 1px dashed rgba(var(--tint-rgb), 0.35);
    transition: all 0.2s ease;
    position: relative;
}
.acc-link:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
.acc-link[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: #1a1a2e;
    color: #e4e4e7;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid rgba(var(--tint-rgb), 0.15);
    box-shadow: 0 8px 32px rgba(var(--shadow-rgb), calc(0.5 * var(--shadow-k)));
    white-space: normal;
    width: 280px;
    z-index: 1000;
    pointer-events: none;
    animation: tooltipFadeIn 0.2s ease;
}
.acc-link[data-tooltip]:hover::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(var(--tint-rgb), 0.15);
    z-index: 1001;
    pointer-events: none;
    animation: tooltipFadeIn 0.2s ease;
}
@keyframes tooltipFadeIn {
    from { opacity: 0; transform: translateX(-50%) translateY(4px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* @chrome-timeline-start
   ===== Слайды-таймлайны («Программа вечера», «Что далее») =====
   Этот блок принадлежит шаблону: его целиком обновляет пересборка
   «хром»-слайдов (scripts/rebuild-talk.mjs), поэтому свои стили пишите
   ВНЕ маркеров — иначе они потеряются. */

.timeline-next-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 100px;
}

/* Тем за вечер бывает много (несколько глав, до десятка докладов) — тогда
   таймлайн раскладывается в 2–3 колонки, по колонке на главу. Размеры ведут
   переменные: колонок больше или тем в колонке много — шрифты мельче. */
.timeline-next-columns {
    --tl-rail: 60px;
    --tl-gap: 36px;
    --tl-title: 28px;
    --tl-title-active: 44px;
    --tl-title-done: 32px;
    --tl-avatar: 32px;
    --tl-speaker: 18px;

    display: grid;
    /* Равные доли: граница между треками приходится ровно на середину слайда,
       а содержимое колонок жмётся к ней (см. .timeline-column ниже). Так пустой
       коридор между колонками лежит по центру слайда, даже когда в одной
       колонке названия тем вдвое длиннее, чем в другой. */
    grid-template-columns: repeat(var(--tl-cols, 1), minmax(0, 1fr));
    justify-content: center;
    gap: 56px;
    width: 100%;
    max-width: 850px;
    margin-top: 20px;
    align-items: start;
    box-sizing: border-box;
}
.timeline-next-columns[data-cols='2'] {
    --tl-cols: 2;
    --tl-rail: 48px;
    --tl-gap: 30px;
    --tl-title: 28px;
    --tl-title-active: 38px;
    --tl-title-done: 28px;
    --tl-avatar: 30px;
    --tl-speaker: 17px;
    /* Колонки прижаты друг к другу по содержимому, поэтому промежуток задаёт
       воздух между ними сам — без него две колонки читались бы как одна. */
    gap: 120px;
    max-width: 1540px;
}
.timeline-next-columns[data-cols='3'] {
    --tl-cols: 3;
    --tl-rail: 44px;
    --tl-gap: 24px;
    --tl-title: 22px;
    --tl-title-active: 28px;
    --tl-title-done: 22px;
    --tl-avatar: 26px;
    --tl-speaker: 15px;
    gap: 80px;
    max-width: 1700px;
}
/* Длинная колонка (девять тем и больше) — ещё компактнее, иначе уедет за экран. */
.timeline-next-columns[data-density='tight'] {
    --tl-gap: 18px;
    --tl-title: 19px;
    --tl-title-active: 23px;
    --tl-title-done: 19px;
    --tl-avatar: 22px;
    --tl-speaker: 13px;
}
.timeline-column {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
    /* Колонка шириной по содержимому — и прижата к середине слайда: левая
       правым краем, правая левым, средняя (три колонки) стоит по центру своей
       доли. Растянутые на всю долю колонки уводили коридор между темами
       влево — доля-то одинаковая, а текста в ней разное количество. */
    width: max-content;
    max-width: 100%;
    justify-self: center;
}
.timeline-column:first-child:not(:only-child) {
    justify-self: end;
}
.timeline-column:last-child:not(:only-child) {
    justify-self: start;
}
/* Заголовок колонки — глава, темы которой в ней собраны. Место под две строки
   держим всегда: иначе колонка с длинным названием главы опускала бы свой
   список ниже соседних. */
.timeline-column-label {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
    min-height: 2.5em;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
    padding-left: var(--tl-rail);
    text-align: left;
}
.timeline-next {
    display: flex;
    flex-direction: column;
    gap: var(--tl-gap, 36px);
    position: relative;
    width: 100%;
    max-width: 850px;
    margin-top: 20px;
    padding-left: var(--tl-rail, 60px);
    box-sizing: border-box;
}
.timeline-column .timeline-next {
    margin-top: 0;
    max-width: none;
}
.timeline-next::before {
    content: '';
    position: absolute;
    left: 21px;
    top: 20px;
    bottom: 20px;
    width: 2px;
    background: var(--border-soft);
}
.timeline-next-item {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    position: relative;
}
.timeline-next-marker {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--bg);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: absolute;
    left: calc(-1 * (var(--tl-rail, 60px) - 14px));
    top: 15px;
    z-index: 2;
    box-sizing: border-box;
}
.timeline-next-marker.completed {
    width: 20px;
    height: 20px;
    left: calc(-1 * (var(--tl-rail, 60px) - 11px));
    top: 12px;
    border-color: var(--border-strong);
    background: var(--bg);
    color: var(--text-faint);
}
.timeline-next-marker.active {
    border-color: var(--fx, var(--accent));
    background: var(--fx, var(--accent));
    top: 21px;
}
.timeline-next-marker.upcoming {
    width: 10px;
    height: 10px;
    left: calc(-1 * (var(--tl-rail, 60px) - 16px));
    top: 14px;
    background: var(--border);
    border: none;
}
.timeline-next-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}
.timeline-next-title {
    font-size: var(--tl-title, 28px);
    font-weight: 500;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 16px;
    line-height: 1.25;
}
.timeline-next-item.completed .timeline-next-title {
    color: var(--text-faint);
    font-size: var(--tl-title-done, 32px);
    font-weight: 500;
}
.timeline-next-item.next-large .timeline-next-title {
    font-size: var(--tl-title-active, 44px);
    font-weight: 600;
    color: var(--fx, var(--accent));
}
.timeline-next-speaker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}
.timeline-next-speaker-avatar {
    width: var(--tl-avatar, 32px);
    height: var(--tl-avatar, 32px);
    border-radius: 50%;
    border: 1px solid var(--border-hover);
    object-fit: cover;
    background: var(--bg-sunken);
}
.timeline-next-speaker-name {
    font-size: var(--tl-speaker, 18px);
    font-weight: 500;
    color: var(--text-muted);
}
/* Название темы в программе ведёт на доклад этой темы, но подчёркивания нет:
   на слайде оно только шумело. Цвет наследуется, ссылку выдаёт подсветка
   при наведении — на проекторе это и не нужно, кликают с ноутбука. */
.timeline-next-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}
.timeline-next-title a:hover {
    color: var(--fx, var(--accent));
}
.timeline-badge-completed {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-faint);
    border: 1px solid var(--border);
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    display: inline-block;
}
/* Новый стиль (слайды с классом fx): заголовок слева, как у контентных
   слайдов, и один акцентный цвет книги. Старые доклады без класса fx
   этих правил не видят, а цвета ниже берут --fx с запасным --accent. */
.slide.fx .timeline-next-container {
    position: absolute;
    inset: 110px 150px 132px;
    height: auto;
    padding: 0;
    align-items: stretch;
    justify-content: flex-start;
}
.slide.fx .timeline-next-columns { max-width: none; margin-top: 56px; }
.slide.fx .timeline-next-columns[data-cols='1'] {
    max-width: 1200px;
    /* Одна колонка — места много: темы крупнее, чем в старой раскладке. */
    --tl-gap: 44px;
    --tl-title: 34px;
    --tl-title-active: 54px;
    --tl-title-done: 34px;
    --tl-avatar: 40px;
    --tl-speaker: 21px;
}
.slide.fx .timeline-next-columns[data-cols='1'][data-density='tight'] {
    --tl-gap: 20px;
    --tl-title: 24px;
    --tl-title-active: 32px;
    --tl-title-done: 24px;
    --tl-avatar: 28px;
    --tl-speaker: 16px;
}
.slide.fx .timeline-next-marker.active { top: 26px; }
.slide.fx .timeline-column:only-child { justify-self: start; }
.slide.fx .timeline-next::before { background: var(--border); width: 1px; left: 21px; }
.slide.fx .timeline-next-marker.upcoming { background: var(--border-strong); }
.slide.fx .timeline-column-label { font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.2em; color: var(--fx, var(--text-dim)); }
/* @chrome-timeline-end */

/* ===== Интерактивные блоки контентных слайдов (слайдер, табы, карточки) ===== */
/* Before-After Slider Styles */
.before-after-slider {
    position: relative;
    width: 1400px;
    height: 520px;
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    margin: 20px auto;
    background: var(--bg);
}
.slider-img-container {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    overflow: hidden;
}
.slider-img {
    width: 1400px;
    height: 100%;
    background-size: cover;
    background-position: center;
}
.slider-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--accent);
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.slider-handle-button {
    width: 48px;
    height: 48px;
    background: var(--accent);
    border: 2px solid var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bg);
    font-size: 20px;
    font-weight: bold;
    box-shadow: 0 0 20px rgba(var(--shadow-rgb), calc(0.8 * var(--shadow-k)));
}
.slider-range-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: ew-resize;
    z-index: 4;
    margin: 0;
}
.slider-caption-container {
    display: flex;
    width: 1400px;
    gap: 40px;
    margin-top: 16px;
}
.slider-caption-col {
    flex: 1;
    text-align: left;
}
.slider-caption-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px;
}
.slider-caption-text {
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-muted);
}

/* Slide 5 CSS - Scale Tabs */
.scale-tabs-container {
    display: flex;
    flex-direction: column;
    width: 1400px;
    height: auto;
    margin: 20px auto 0 auto;
    text-align: left;
}
.scale-tabs-nav-horizontal {
    display: flex;
    width: 1400px;
    margin: 0 auto 20px auto;
    position: relative;
    height: 56px;
}
.scale-tab-btn-horiz {
    flex: 1;
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    height: 100%;
    color: var(--text-muted);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    margin-right: -15px;
    outline: none;
    z-index: 1;
}
.scale-tab-btn-horiz.tab-first {
    clip-path: polygon(0% 0%, calc(100% - 15px) 0%, 100% 50%, calc(100% - 15px) 100%, 0% 100%);
    padding-right: 15px;
    z-index: 3;
}
.scale-tab-btn-horiz.tab-mid {
    clip-path: polygon(0% 0%, calc(100% - 15px) 0%, 100% 50%, calc(100% - 15px) 100%, 0% 100%, 15px 50%);
    padding-left: 15px;
    padding-right: 15px;
    z-index: 2;
}
.scale-tab-btn-horiz.tab-last {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 15px 50%);
    padding-left: 15px;
    margin-right: 0;
    z-index: 1;
}
.scale-tab-btn-horiz:hover {
    background: var(--bg-sunken);
    color: var(--accent);
}
.scale-tab-btn-horiz.active {
    background: rgba(0, 223, 216, 0.12);
    color: #00dfd8;
    z-index: 10;
}
.scale-tabs-content {
    width: 1400px;
    height: 700px;
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 32px;
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
    margin: 0 auto;
}
.tab-pane {
    display: none;
    flex-grow: 1;
    flex-direction: column;
    height: calc(100% - 60px);
}
.tab-pane.active {
    display: flex;
}
.pane-step {
    display: none;
    flex-grow: 1;
    flex-direction: column;
    animation: fadeIn 0.4s ease forwards;
}
.pane-step.active {
    display: flex;
}
.pane-step-title {
    font-size: 28px;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 16px;
    color: var(--accent);
}
.pane-grid-2 {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 32px;
    flex-grow: 1;
    align-items: start;
}
.pane-step-desc {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0;
}
.pane-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--tint-rgb), 0.01);
    border: 1px dashed var(--border-soft);
    border-radius: 16px;
    padding: 24px;
    min-height: 460px;
    flex-grow: 1;
    height: 100%;
    box-sizing: border-box;
    flex-direction: column;
}
.vis-container-box {
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 500;
    color: var(--accent);
    min-width: 140px;
}
.vis-container-box.min-box {
    padding: 12px 16px;
    font-size: 13px;
    min-width: 100px;
}
.vis-box-icon {
    font-size: 24px;
}
.vis-box-port {
    font-size: 12px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}
.vis-arrow-right {
    font-size: 20px;
    color: var(--text-faint);
}
.pain-points-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.pain-point-item {
    display: flex;
    gap: 12px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-muted);
}
.pain-icon {
    font-size: 16px;
    margin-top: 2px;
}
.pain-solution-card {
    background: rgba(0,223,216,0.02);
    border: 1px dashed rgba(0,223,216,0.3);
    border-radius: 16px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    box-sizing: border-box;
    text-align: left;
}
.tab-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    border-top: 1px solid var(--border-soft);
    padding-top: 20px;
    height: 40px;
}
.pag-btn {
    background: transparent;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    color: var(--accent);
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}
.pag-btn:hover:not(:disabled) {
    border-color: var(--border-strong);
    background: var(--bg-sunken);
}
.pag-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.pag-dots {
    display: flex;
    gap: 8px;
}
.pag-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-soft);
    cursor: pointer;
    transition: all 0.2s;
}
.pag-dot.active {
    background: #00dfd8;
    box-shadow: 0 0 8px #00dfd8;
}
/* Slide 6 CSS */
.chain-container {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
    width: 100%;
    max-width: 1300px;
    position: relative;
}
.chain-block {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    opacity: 0;
    transform: translateY(20px);
    position: relative;
    transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.chain-block:hover {
    border-color: #00dfd8;
    background: rgba(var(--bg-rgb), 0.6);
    transform: scale(1.03) !important;
    box-shadow: 0 10px 30px rgba(0, 223, 216, 0.15);
    z-index: 10;
}
.chain-hover-commands {
    position: absolute;
    top: calc(100% + 15px);
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    width: max-content;
    min-width: 100%;
    background: none;
    border: none;
    box-shadow: none;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 100;
}
.chain-block:hover .chain-hover-commands {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.command-line {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--accent);
    margin: 6px 0;
    white-space: nowrap;
    line-height: 1.4;
}
.command-line:first-child {
    margin-top: 0;
}
.command-line:last-child {
    margin-bottom: 0;
}
.chain-arrow {
    opacity: 0;
    color: var(--text-faint);
    display: flex;
    align-items: center;
    justify-content: center;
}
.gitops-badge {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    background: linear-gradient(135deg, #0070f3 0%, #00dfd8 100%);
    color: var(--accent);
    padding: 8px 24px;
    border-radius: 9999px;
    font-size: 16px;
    font-weight: 600;
    box-shadow: 0 0 30px rgba(0, 223, 216, 0.3);
}
.slide.active .chain-block-1 { animation: slideInUp 0.5s ease forwards 0.2s; }
.slide.active .chain-arrow-1 { animation: fadeIn 0.5s ease forwards 0.4s; }
.slide.active .chain-block-2 { animation: slideInUp 0.5s ease forwards 0.5s; }
.slide.active .chain-arrow-2 { animation: fadeIn 0.5s ease forwards 0.7s; }
.slide.active .chain-block-3 { animation: slideInUp 0.5s ease forwards 0.8s; }
.slide.active .chain-arrow-3 { animation: fadeIn 0.5s ease forwards 1.0s; }
.slide.active .chain-block-4 { animation: slideInUp 0.5s ease forwards 1.1s; }
.slide.active .gitops-badge { animation: badgeGlow 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards 1.4s; }

@keyframes badgeGlow {
    0% { opacity: 0; transform: translate(-50%, 10px); }
    100% { opacity: 1; transform: translate(-50%, 0); }
}

/* Slide 7 CSS */
.pillars-container {
    display: flex;
    gap: 24px;
    align-items: stretch;
    justify-content: center;
    margin-top: 30px;
    width: 100%;
    max-width: 1400px;
    min-height: 340px;
}
.pillar-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 40px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    opacity: 0;
    transform: translateY(30px);
    cursor: pointer;
    transition: border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                background 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 0.4s ease,
                flex 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}
.pillar-card h3 {
    font-size: 24px;
    font-weight: 600;
    color: var(--accent);
    margin: 0;
    transition: max-height 0.4s ease, opacity 0.4s ease, transform 0.4s ease, margin 0.4s ease;
    max-height: 80px;
    opacity: 1;
}
.pillar-card .pillar-desc {
    max-height: 0;
    opacity: 0;
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
    color: var(--text-muted);
    text-align: center;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 0.4s ease, 
                margin-top 0.4s ease;
}
.pillar-card:not(.collapsed):hover {
    border-color: var(--accent);
    background: rgba(var(--tint-rgb), 0.04);
    transform: scale(1.02) translateY(-4px) !important;
    box-shadow: 0 10px 30px rgba(var(--tint-rgb), 0.05);
    opacity: 1 !important;
}
.pillar-card.dashed-card {
    border-style: dashed;
    border-color: rgba(var(--tint-rgb), 0.2);
    background: rgba(var(--tint-rgb), 0.01);
}
.pillar-card.dashed-card:not(.collapsed):hover {
    border-color: var(--accent);
    background: rgba(var(--tint-rgb), 0.05);
    box-shadow: 0 10px 30px rgba(var(--tint-rgb), 0.1);
}
.pillar-card.expanded {
    flex: 2.2;
    background: rgba(var(--bg-rgb), 0.6);
    border-color: var(--accent);
    opacity: 1 !important;
    box-shadow: 0 10px 40px rgba(var(--tint-rgb), 0.08);
    transform: none !important;
    cursor: default;
}
.pillar-card.expanded .pillar-desc {
    max-height: 220px;
    opacity: 1;
    margin-top: 16px;
}
.pillar-card.expanded.dashed-card {
    background: rgba(var(--tint-rgb), 0.03);
    border-color: var(--accent);
}
.pillar-card.collapsed {
    flex: 0.35;
    opacity: 0.25 !important;
    transform: scale(0.97) !important;
    pointer-events: auto;
}
.pillar-card.collapsed h3 {
    opacity: 0;
    max-height: 0;
    margin: 0;
    overflow: hidden;
    transform: scale(0.8);
}
.slide.active .pillar-1 { animation: slideInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.2s; }
.slide.active .pillar-2 { animation: slideInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.4s; }
.slide.active .pillar-3 { animation: slideInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.6s; }
.slide.active .pillar-4 { animation: slideInUpDashed 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.8s; }

@keyframes slideInUpDashed {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 0.55; transform: translateY(0); }
}

/* NEW badge styles */
.new-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: linear-gradient(135deg, #0070f3 0%, #00dfd8 100%);
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 0 10px rgba(0, 223, 216, 0.4);
    animation: pulseNewBadge 2s infinite ease-in-out;
    transition: opacity 0.3s ease;
}
.pillar-card.collapsed .new-badge {
    opacity: 0;
    pointer-events: none;
}
@keyframes pulseNewBadge {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 10px rgba(0, 223, 216, 0.4);
    }
    50% {
        transform: scale(1.08);
        box-shadow: 0 0 18px rgba(0, 223, 216, 0.8);
    }
}

/* Slide 8 CSS (Главные выводы) */
.peel-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 900px;
    margin-bottom: 24px;
    margin-top: 40px; /* added spacing since slide header is removed */
}
.peel-card-wrapper {
    position: relative;
    height: 64px;
    background: rgba(var(--tint-rgb), 0.01);
    border: 1px dashed rgba(var(--tint-rgb), 0.08);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    perspective: 800px;
    box-shadow: inset 0 2px 6px rgba(var(--shadow-rgb), calc(0.6 * var(--shadow-k)));
}
.peel-card-content-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-left: 24px;
    z-index: 1;
}
.peel-card-text {
    color: var(--accent);
    font-size: 16px;
    font-weight: 500;
}
.peel-cover {
    position: absolute;
    top: -1px;
    left: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    background: linear-gradient(135deg, transparent 23px, var(--bg) 23px);
    border: 1px dashed var(--accent);
    box-sizing: border-box;
    border-radius: 12px;
    z-index: 10;
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    transform-origin: 100% 100%;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}
.peel-cover.peeled {
    transform: rotate3d(1, -1, 0, 115deg) translate(80px, -80px) scale(0.2) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease !important;
}
.peel-fold {
    position: absolute;
    top: -1px;
    left: -1px;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, transparent 50%, #2f2f36 50%);
    border-bottom: 1.5px solid rgba(var(--tint-rgb), 0.4);
    border-right: 1.5px solid rgba(var(--tint-rgb), 0.4);
    box-shadow: 2px 2px 6px rgba(var(--shadow-rgb), calc(0.6 * var(--shadow-k)));
    border-bottom-right-radius: 6px;
    pointer-events: auto;
    cursor: grab;
    z-index: 15;
    transition: transform 0.2s ease;
}
.peel-fold:hover {
    transform: scale(1.08);
    background: linear-gradient(135deg, transparent 50%, var(--border-mid) 50%);
    border-color: rgba(var(--tint-rgb), 0.6);
}
.peel-fold:active {
    cursor: grabbing;
}
.main-takeaway-card {
    width: 100%;
    max-width: 900px;
    padding: 32px 24px;
    background: var(--bg-sunken);
    border: 1px solid rgba(var(--tint-rgb), 0.08);
    border-radius: 16px;
    margin-top: 20px;
    position: relative;
    opacity: 0;
    transform: translateY(20px) scale(0.98);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    text-align: center;
    box-sizing: border-box;
}
.main-takeaway-card.revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
    border-color: rgba(var(--tint-rgb), 0.15);
    box-shadow: 0 15px 35px rgba(var(--shadow-rgb), calc(0.8 * var(--shadow-k)));
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes scaleUp {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes slideInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== Переключатель темы =====
   Живёт вне масштабируемой сцены (.deck-stage), поэтому размеры у него
   в реальных пикселях: и в окне, и на проекторе он одинаково небольшой.
   По умолчанию приглушён до трети яркости и проявляется под курсором —
   во время доклада он не должен спорить со слайдом. */
.theme-toggle {
    position: fixed;
    left: 18px;
    bottom: 14px;
    z-index: 1200;
    box-sizing: border-box;
    width: 64px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 9999px;
    background: var(--bg-card);
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.25s ease, border-color 0.25s ease, background 0.25s ease;
    -webkit-tap-highlight-color: transparent;
}
.theme-toggle:hover,
.theme-toggle:focus-visible {
    opacity: 1;
    border-color: var(--border-strong);
}
.theme-toggle:focus-visible {
    outline: 2px solid var(--border-strong);
    outline-offset: 3px;
}
.theme-toggle-track {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}
/* ===== Содержание (кнопка рядом с переключателем темы, клавиша O) =====
   Список всех слайдов: номер и заголовок, текущий подсвечен цветом книги,
   клик — переход на слайд. Панель собирает deck.js. */
.toc-toggle {
    position: fixed;
    left: 92px;
    bottom: 14px;
    z-index: 1200;
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 9999px;
    background: var(--bg-card);
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.25s ease, border-color 0.25s ease, color 0.25s ease;
    -webkit-tap-highlight-color: transparent;
}
.toc-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.toc-toggle:hover,
.toc-toggle:focus-visible,
.toc-toggle[aria-expanded='true'] { opacity: 1; border-color: var(--border-strong); color: var(--text-main); }
.toc-toggle:focus-visible { outline: 2px solid var(--border-strong); outline-offset: 3px; }
.toc-panel {
    position: fixed;
    left: 18px;
    bottom: 58px;
    z-index: 1200;
    box-sizing: border-box;
    width: min(460px, calc(100vw - 36px));
    max-height: min(72vh, 720px);
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--bg-card);
    box-shadow: 0 24px 60px -20px rgba(var(--shadow-rgb), calc(0.8 * var(--shadow-k)));
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.toc-panel.is-open { opacity: 1; transform: none; pointer-events: auto; }
.toc-head {
    padding: 8px 12px 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-dim);
}
.toc-item {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 10px;
    align-items: baseline;
    width: 100%;
    padding: 8px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}
.toc-item:hover, .toc-item:focus-visible { background: var(--bg-hover); color: var(--text-main); outline: none; }
.toc-item .n { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); }
.toc-item.is-current { color: var(--text-main); background: var(--bg-hover); }
.toc-item.is-current .n { color: var(--fx, var(--accent)); }
.toc-item.is-chrome { color: var(--text-dim); }

/* Кружок ездит под значками: активным выглядит тот, который он подсветил. */
.theme-toggle-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    box-sizing: border-box;
    border: 1px solid var(--border-hover);
    border-radius: 50%;
    background: var(--bg-hover);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease,
        border-color 0.25s ease;
}
:root:not([data-theme='light']) .theme-toggle-knob {
    transform: translateX(30px);
}
.theme-toggle:active .theme-toggle-knob {
    background: var(--bg-active);
}
.theme-ico {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-faint);
    transition: color 0.25s ease;
}
.theme-ico svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
:root[data-theme='light'] .theme-ico-sun,
:root:not([data-theme='light']) .theme-ico-moon {
    color: var(--text-main);
}

/* Плавная смена темы — через View Transitions, где они есть. Дек при этом
   не перерисовывается по кадрам: браузер сам делает кросс-фейд снимков. */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.35s;
}

/* =====================================================================
   Стиль докладов: монохром в палитре дека + один акцент книги (--fx).
   Каркас слайда с классом fx (подпись-кикер, заголовок, HUD-номер),
   титул, авторы и книга, компоненты контентных слайдов, заметки (N).
   Поведение (появление блоков, счётчики, заметки) — в deck.js.
   Без градиентов, свечений и декоративных рамок.
   ===================================================================== */

/* ===== Палитра доклада =====
   Значения по умолчанию; цвет книги переопределяет assets/css/theme.css,
   его пишет генератор (scripts/book-themes.mjs). */
:root {
    --fx: #d4ff3f;
    --fx-rgb: 212, 255, 63;
    --fx2: #e4e4e7;
    --fx2-rgb: 228, 228, 231;
    --hot: #ff6b4a;
    --hot-rgb: 255, 107, 74;
    --glow-k: 0;
    --mask: #000;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

:root[data-theme='light'] {
    --fx: #4d7c0f;
    --fx-rgb: 77, 124, 15;
    --fx2: #3f3f46;
    --fx2-rgb: 63, 63, 70;
    --hot: #c2410c;
    --hot-rgb: 194, 65, 12;
    --glow-k: 0;
}

/* ===== Каркас контентного слайда ===== */

.fx-wrap {
    position: absolute;
    inset: 110px 150px 132px;
    display: flex;
    flex-direction: column;
    z-index: 1;
}
.fx p { margin: 0; }

.fx-kicker {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 26px;
    font-family: var(--font-mono);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--fx);
}
.fx-kicker .n { color: var(--text-dim); }
.fx-kicker .n::after {
    content: '';
    display: inline-block;
    width: 56px;
    height: 1px;
    margin-left: 16px;
    vertical-align: middle;
    background: rgba(var(--tint-rgb), 0.3);
}

.fx-h {
    margin: 0;
    max-width: 1560px;
    font-size: 70px;
    font-weight: 600;
    line-height: 1.07;
    letter-spacing: -0.04em;
    color: var(--text-main);
    text-wrap: balance;
}
.fx-h mark,
.fx mark {
    background: linear-gradient(var(--fx), var(--fx));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.fx-h mark.hot,
.fx mark.hot {
    background: linear-gradient(100deg, var(--hot), var(--hot));
    -webkit-background-clip: text;
    background-clip: text;
}
.fx.is-hero .fx-h { font-size: 92px; max-width: 1500px; }

.fx-lead {
    margin-top: 22px !important;
    max-width: 1260px;
    font-size: 28px;
    line-height: 1.5;
    color: var(--text-muted);
}

.fx-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 36px;
}

.fx-note {
    font-size: 24px;
    line-height: 1.5;
    color: var(--text-dim);
}
.fx-note b { color: var(--text-soft); font-weight: 600; }

.hot { color: var(--hot); }
.acc { color: var(--fx); }

/* HUD-строка внизу слайда (собирает talk.js) */
.fx-hud {
    position: absolute;
    left: 150px;
    right: 150px;
    bottom: 58px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 14px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-faint);
    z-index: 1;
    pointer-events: none;
}
.fx-hud .pg b { color: var(--fx); font-weight: 500; }

/* Ссылки внутри слайдов */
.lnk {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed rgba(var(--fx-rgb), 0.6);
    transition: color 0.2s, border-color 0.2s;
}
.lnk:hover { color: var(--fx); border-bottom-color: var(--fx); }

/* ===== Появление блоков =====
   Анимация привязана к .slide.active и переигрывается при каждом входе.
   Задержки (--d) раздаёт talk.js в порядке чтения; без него всё
   появляется разом. */
@keyframes fxIn { from { opacity: 0; transform: translateY(22px); filter: blur(10px); } }
@keyframes fxLeft { from { opacity: 0; transform: translateX(-30px); filter: blur(8px); } }
@keyframes fxRight { from { opacity: 0; transform: translateX(30px); filter: blur(8px); } }
@keyframes fxPop { from { opacity: 0; transform: scale(0.82); filter: blur(6px); } }
@keyframes fxFade { from { opacity: 0; } }
@keyframes fxGrowX { from { transform: scaleX(0); } }
@keyframes fxGrowY { from { transform: scaleY(0); } }
@keyframes fxDraw { from { stroke-dashoffset: var(--len, 1200); } }
@keyframes fxDim { to { opacity: 0.32; filter: saturate(0.2); } }
@keyframes fxSpin { to { transform: rotate(360deg); } }

.slide.active [data-rv] { animation: fxIn 0.95s var(--ease-out) var(--d, 0ms) backwards; }
.slide.active [data-rv='left'] { animation-name: fxLeft; }
.slide.active [data-rv='right'] { animation-name: fxRight; }
.slide.active [data-rv='pop'] { animation-name: fxPop; }
.slide.active [data-rv='fade'] { animation-name: fxFade; }

/* ===== Карточки ===== */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

.tile {
    position: relative;
    padding: 34px 38px 36px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: rgba(var(--tint-rgb), 0.025);
    overflow: hidden;
}
.tile::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    display: none;
}
.tile.is-hi { border-color: rgba(var(--fx-rgb), 0.45); box-shadow: 0 0 0 1px rgba(var(--fx-rgb), 0.12), 0 30px 80px -40px rgba(var(--fx-rgb), calc(0.5 * var(--glow-k))); }
.tile.is-hot { border-color: rgba(var(--hot-rgb), 0.45); }

.tile-k {
    margin-bottom: 18px;
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-dim);
}
.tile.is-hi .tile-k { color: var(--fx); }
.tile.is-hot .tile-k { color: var(--hot); }
.tile-t {
    margin-bottom: 14px;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text-main);
}
.tile-p { font-size: 24px; line-height: 1.5; color: var(--text-muted); }
.tile-p + .tile-p { margin-top: 12px !important; }
.tile-u {
    display: inline-block;
    margin-top: 18px;
    font-family: var(--font-mono);
    font-size: 16px;
    letter-spacing: 0.06em;
}

/* ===== Большие числа ===== */
.stats { display: flex; gap: 72px; align-items: flex-end; }
.stat { display: flex; flex-direction: column; gap: 10px; }
.stat b {
    font-size: 132px;
    font-weight: 300;
    line-height: 0.95;
    letter-spacing: -0.05em;
    font-variant-numeric: tabular-nums;
    color: var(--text-main);
}
.stat b.grad,
.stat.is-hi b {
    background: linear-gradient(var(--fx), var(--fx));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.stat.is-hot b { color: var(--hot); -webkit-text-fill-color: currentColor; background: none; }
.stat small { font-size: 0.42em; font-weight: 400; letter-spacing: -0.02em; }
.stat > span { max-width: 420px; font-size: 24px; line-height: 1.4; color: var(--text-muted); }
.stat.is-md b { font-size: 96px; }

/* ===== Горизонтальные полосы ===== */
.hb { display: flex; flex-direction: column; gap: 16px; --max: 100; }
.hb.is-dense { gap: 10px; }
.hb.is-dense .hb-l, .hb.is-dense .hb-v { font-size: 23px; }
.hb-row {
    display: grid;
    grid-template-columns: 300px 1fr 150px;
    align-items: center;
    gap: 28px;
}
.hb-l { font-size: 26px; color: var(--text-soft); text-align: right; white-space: nowrap; }
.hb-t {
    position: relative;
    height: 16px;
    border-radius: 999px;
    background: rgba(var(--tint-rgb), 0.06);
}
.hb-t > i {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: calc(var(--v) / var(--max) * 100%);
    min-width: 6px;
    border-radius: 999px;
    background: rgba(var(--tint-rgb), 0.38);
    transform-origin: left center;
}
.hb-v {
    font-family: var(--font-mono);
    font-size: 24px;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}
.hb-row.is-hi .hb-t > i { background: var(--fx); box-shadow: 0 0 24px rgba(var(--fx-rgb), calc(0.45 * var(--glow-k))); }
.hb-row.is-hi .hb-l, .hb-row.is-hi .hb-v { color: var(--text-main); }
.hb-row.is-hot .hb-t > i { background: var(--hot); }
.hb-row.is-hot .hb-v { color: var(--hot); }
.hb-row.is-dim .hb-t > i { background: rgba(var(--tint-rgb), 0.22); }
.hb-row.is-dim .hb-l, .hb-row.is-dim .hb-v { color: var(--text-dim); }
.slide.active .hb-t > i { animation: fxGrowX 1.2s var(--ease-out) calc(var(--d, 0ms) + 200ms) backwards; }
/* опорная линия (например, «случайное угадывание») */
.hb-wrap { position: relative; }
.hb-base {
    position: absolute;
    top: -14px;
    bottom: -14px;
    left: calc(300px + 28px + (100% - 300px - 150px - 56px) * var(--at) / var(--max, 100));
    border-left: 2px dashed rgba(var(--tint-rgb), 0.45);
}
.hb-base span {
    position: absolute;
    top: -30px;
    left: 0;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dim);
}

/* ===== Вертикальные столбцы ===== */
.vb {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 22px;
    height: 100%;
    max-height: 520px;
    --max: 100;
}
.vb-col { display: grid; grid-template-rows: auto 1fr auto; gap: 12px; text-align: center; min-width: 0; }
.vb-v { font-family: var(--font-mono); font-size: 24px; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.vb-bar { position: relative; }
.vb-bar > i {
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: 0;
    height: calc(var(--v) / var(--max) * 100%);
    border-radius: 8px 8px 2px 2px;
    background: rgba(var(--tint-rgb), 0.3);
    transform-origin: bottom center;
}
.vb-col.is-hi .vb-bar > i { background: var(--fx); box-shadow: 0 0 30px rgba(var(--fx-rgb), calc(0.35 * var(--glow-k))); }
.vb-l {
    min-height: 58px;
    font-size: 19px;
    line-height: 1.25;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    padding-top: 12px;
}
.slide.active .vb-bar > i { animation: fxGrowY 1.2s var(--ease-out) calc(var(--d, 0ms) + 150ms) backwards; }

/* ===== Конвейер этапов («рельса») ===== */
.rail {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--n, 4), 1fr);
    column-gap: 36px;
}
.rail-line {
    position: absolute;
    left: calc(100% / var(--n, 4) / 2);
    right: calc(100% / var(--n, 4) / 2);
    top: var(--line-y, 150px);
    height: 2px;
    background: rgba(var(--tint-rgb), 0.35);
    transform-origin: left center;
    opacity: 0.7;
}
.slide.active .rail-line { animation: fxGrowX 1.8s var(--ease-out) 0.25s backwards; }
.rail-node { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.rn-data {
    height: 112px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    font-size: 23px;
    line-height: 1.3;
    color: var(--text-muted);
}
.rn-data b { display: block; margin-bottom: 4px; font-family: var(--font-mono); font-size: 14px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); }
.rn-dot {
    position: relative;
    width: 22px;
    height: 22px;
    margin: 16px 0 26px;
    border-radius: 50%;
    background: var(--bg);
    border: 2px solid var(--fx);
    box-shadow: none;
}
.rail-node.is-end .rn-dot { background: var(--fx); }
.rn-k { font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fx); margin-bottom: 10px; }
.rn-t { font-size: 32px; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; color: var(--text-main); }
.rn-out {
    margin-top: 16px;
    padding: 10px 18px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 22px;
    line-height: 1.3;
    color: var(--text-soft);
}
.rail-node.is-end .rn-out { border-color: rgba(var(--fx-rgb), 0.5); color: var(--text-main); }
.rail-bracket {
    position: absolute;
    top: -8px;
    bottom: -22px;
    border: 1px dashed rgba(var(--fx2-rgb), 0.6);
    border-radius: 26px;
    pointer-events: none;
}
.rail-bracket span {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 14px;
    background: var(--bg);
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.22em;
    color: var(--fx2);
}

/* ===== Токены ===== */
.tk-rows { display: flex; flex-direction: column; gap: 34px; }
.tk-row { display: grid; grid-template-columns: 220px 1fr 170px; align-items: center; gap: 28px; }
.tk-l { font-size: 28px; color: var(--text-soft); text-align: right; }
.cells { display: flex; flex-wrap: wrap; gap: 4px; }
.cells i {
    width: 11px;
    height: 34px;
    border-radius: 3px;
    background: rgba(var(--fx-rgb), 0.55);
}
.tk-row.is-hot .cells i { background: rgba(var(--hot-rgb), 0.75); }
.slide.active .cells i { animation: fxPop 0.35s ease calc(var(--d, 0ms) + 300ms + var(--i, 0) * 20ms) backwards; }
.tk-n { font-family: var(--font-mono); font-size: 26px; color: var(--text-muted); }
.tk-n b { font-size: 44px; font-weight: 500; color: var(--text-main); }
.tk-row.is-hot .tk-n b { color: var(--hot); }

/* ===== Чипы ===== */
.chips { display: flex; flex-wrap: wrap; gap: 14px; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 24px;
    color: var(--text-soft);
    background: rgba(var(--tint-rgb), 0.02);
    text-decoration: none;
}
a.chip:hover { border-color: rgba(var(--fx-rgb), 0.6); color: var(--text-main); }
.chip.is-hot { border-color: rgba(var(--hot-rgb), 0.5); color: var(--hot); }
.chip.is-hi { border-color: rgba(var(--fx-rgb), 0.55); color: var(--text-main); }
.chip .u { font-family: var(--font-mono); font-size: 15px; color: var(--text-dim); }

/* ===== Цитата с фото автора ===== */
.quote {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 34px;
    align-items: center;
    padding: 34px 40px;
    border: 1px solid var(--border);
    border-radius: 24px;
    background: rgba(var(--tint-rgb), 0.025);
}
.quote img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 1px var(--border);
}
.quote blockquote { margin: 0; font-size: 34px; font-weight: 500; line-height: 1.35; letter-spacing: -0.015em; color: var(--text-main); }
.quote cite { display: block; margin-top: 12px; font-style: normal; font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); }

/* ===== Выводы ===== */
.takeaways { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 56px; margin-bottom: 40px; }
.tw { display: grid; grid-template-columns: 54px 1fr; gap: 18px; align-items: baseline; }
.tw .n { font-family: var(--font-mono); font-size: 18px; color: var(--fx); letter-spacing: 0.1em; }
.tw p { font-size: 27px; line-height: 1.42; color: var(--text-soft); }
.tw p b { color: var(--text-main); font-weight: 600; }

/* ===== Автор книги ===== */
.au { display: grid; grid-template-columns: 500px 1fr; gap: 80px; align-items: center; height: 100%; }
.au-id { display: flex; flex-direction: column; align-items: flex-start; }
.au-photo { position: relative; width: 260px; height: 260px; margin: 0 0 34px 20px; }
.au-photo img { position: relative; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; z-index: 1; }
.au-ring {
    display: none;
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    border: 1px dashed rgba(var(--fx-rgb), 0.55);
}
.au-ring.r2 { inset: -38px; border: 1px solid transparent; border-top-color: var(--fx); border-right-color: rgba(var(--fx2-rgb), 0.6); }
.slide.active .au-ring { animation: fxSpin 40s linear infinite; }
.slide.active .au-ring.r2 { animation: fxSpin 9s linear infinite; }
.au-name { font-size: 58px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; color: var(--text-main); }
.au-en { margin-top: 8px; font-family: var(--font-mono); font-size: 18px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); }
.au-role { margin-top: 18px !important; font-size: 24px; line-height: 1.45; color: var(--text-muted); }
.au-links { display: flex; gap: 22px; margin-top: 22px; font-family: var(--font-mono); font-size: 17px; }
.au-rows { display: flex; flex-direction: column; }
.au-row { display: grid; grid-template-columns: 200px 1fr; gap: 28px; padding: 26px 0; border-top: 1px solid var(--border-soft); }
.au-row:last-child { border-bottom: 1px solid var(--border-soft); }
.au-row .k { padding-top: 6px; font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fx); }
.au-row p { font-size: 25px; line-height: 1.5; color: var(--text-soft); }
.au-row p b { color: var(--text-main); font-weight: 600; }
.au-row p + p { margin-top: 8px !important; }

/* ===== Книга ===== */
.bk2 { display: grid; grid-template-columns: 360px 1fr; gap: 90px; align-items: center; height: 100%; }
.bk2-cover { position: relative; }
.bk2-cover img {
    display: block;
    width: 100%;
    border-radius: 6px 14px 14px 6px;
    box-shadow: 0 50px 90px -40px rgba(var(--shadow-rgb), calc(0.9 * var(--shadow-k))), 0 0 0 1px var(--border);
}
.bk2-cover::after {
    content: '';
    position: absolute;
    inset: -60px;
    z-index: -1;
    display: none;
}
.bk2-title { font-size: 64px; font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; color: var(--text-main); }
.bk2-sub { margin-top: 14px !important; font-size: 27px; line-height: 1.4; color: var(--text-muted); }
.bk2-meta { margin-top: 18px !important; font-family: var(--font-mono); font-size: 17px; letter-spacing: 0.08em; color: var(--text-dim); }
.bk2 .stats { margin-top: 44px; gap: 64px; }
.bk2 .stat b { font-size: 84px; }
.bk2 .stat > span { font-size: 21px; }
.chaps { display: grid; grid-template-columns: repeat(10, 1fr); gap: 8px; margin-top: 46px; }
.chap {
    position: relative;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-family: var(--font-mono);
    font-size: 18px;
    color: var(--text-dim);
}
.chap.is-now {
    border-color: var(--fx);
    color: var(--bg);
    background: var(--fx);
    box-shadow: 0 0 30px rgba(var(--fx-rgb), calc(0.5 * var(--glow-k)));
}
.chaps-cap { margin-top: 14px !important; font-family: var(--font-mono); font-size: 16px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
.chaps-cap b { color: var(--fx); font-weight: 500; }

/* ===== Пример «вход → результат» ===== */
.ex-rows { display: flex; flex-direction: column; gap: 26px; }
.ex {
    display: grid;
    grid-template-columns: 1fr 120px 1fr;
    align-items: center;
}
.ex-a, .ex-b {
    padding: 26px 32px;
    border: 1px solid var(--border);
    border-radius: 18px;
    font-size: 28px;
    line-height: 1.35;
    color: var(--text-soft);
}
.ex-a .k, .ex-b .k { display: block; margin-bottom: 8px; font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); }
.ex-b { border-color: rgba(var(--hot-rgb), 0.45); color: var(--text-main); }
.ex-b .k { color: var(--hot); }
.ex-arrow { position: relative; height: 2px; margin: 0 18px; background: rgba(var(--tint-rgb), 0.3); transform-origin: left; }
.ex-arrow::after {
    content: '';
    position: absolute;
    right: -1px;
    top: -5px;
    width: 10px;
    height: 10px;
    border-top: 2px solid rgba(var(--tint-rgb), 0.5);
    border-right: 2px solid rgba(var(--tint-rgb), 0.5);
    transform: rotate(45deg);
}
.slide.active .ex-arrow { animation: fxGrowX 0.8s var(--ease-out) calc(var(--d, 0ms) + 350ms) backwards; }

/* ===== Пересечение двух множеств ===== */
.venn { position: relative; width: 820px; height: 460px; margin: 0 auto; }
.venn-c {
    position: absolute;
    top: 20px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    padding: 0 64px;
    font-size: 28px;
    line-height: 1.3;
}
.venn-c.a { left: 40px; border: 1px solid rgba(var(--tint-rgb), 0.35); background: rgba(var(--tint-rgb), 0.03); color: var(--text-soft); justify-content: flex-start; }
.venn-c.b { right: 40px; border: 1px solid rgba(var(--fx-rgb), 0.6); background: rgba(var(--fx-rgb), 0.06); color: var(--text-main); justify-content: flex-end; text-align: right; }
.venn-c span { max-width: 180px; }
.venn-c.a { padding-left: 52px; }
.venn-c.b { padding-right: 70px; }
.venn-x {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fx);
    text-align: center;
}
@keyframes vennA { from { transform: translateX(-110px); opacity: 0; } }
@keyframes vennB { from { transform: translateX(110px); opacity: 0; } }
.slide.active .venn-c.a { animation: vennA 1.4s var(--ease-out) 0.35s backwards; }
.slide.active .venn-c.b { animation: vennB 1.4s var(--ease-out) 0.35s backwards; }

/* ===== Пузыри размеров моделей ===== */
.bubbles { display: flex; align-items: flex-end; justify-content: center; gap: 40px; height: 100%; }
.bub { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.bub i {
    display: block;
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    border: 1px solid rgba(var(--tint-rgb), 0.25);
    background: rgba(var(--tint-rgb), 0.04);
}
.bub.is-hi i {
    border-color: var(--fx);
    background: var(--fx);
    box-shadow: 0 0 50px rgba(var(--fx-rgb), calc(0.5 * var(--glow-k)));
}
.bub span { font-family: var(--font-mono); font-size: 17px; letter-spacing: 0.1em; color: var(--text-dim); text-align: center; }
.bub.is-hi span { color: var(--fx); }

/* ===== Строки соотношений ===== */
.ratio { display: flex; flex-direction: column; gap: 14px; }
.ratio-head, .ratio-row {
    display: grid;
    grid-template-columns: 200px 150px 330px 1fr 120px;
    align-items: center;
    gap: 26px;
}
.ratio-head { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); }
.ratio-row { padding: 6px 0; }
.ratio-row .l { font-size: 28px; color: var(--text-soft); }
.ratio-row .m { font-family: var(--font-mono); font-size: 24px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ratio-row .bar { position: relative; height: 14px; border-radius: 999px; background: rgba(var(--tint-rgb), 0.05); }
.ratio-row .bar i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v) / 232 * 100%); min-width: 5px; border-radius: 999px; background: var(--hot); transform-origin: left; }
.ratio-row .x { font-family: var(--font-mono); font-size: 30px; font-weight: 500; color: var(--hot); text-align: right; }
.ratio-row.is-ref .bar i { background: var(--fx); }
.ratio-row.is-ref .x { color: var(--fx); }
.ratio-row.is-ref { border-top: 1px dashed var(--border); padding-top: 14px; }
.slide.active .ratio-row .bar i { animation: fxGrowX 1.2s var(--ease-out) calc(var(--d, 0ms) + 250ms) backwards; }

/* ===== Местоимения: много → одно ===== */
.pron { display: grid; grid-template-columns: 1fr 260px 300px; align-items: center; gap: 0; }
.pron-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; }
.pw { padding: 18px 24px; border: 1px solid var(--border); border-radius: 16px; }
.pw b { display: block; font-size: 36px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-main); }
.pw span { font-size: 19px; color: var(--text-dim); }
.pron-svg { width: 100%; height: 340px; overflow: visible; }
.pron-svg path { fill: none; stroke: rgba(var(--fx-rgb), 0.55); stroke-width: 1.5; stroke-dasharray: var(--len, 400); }
.slide.active .pron-svg path { animation: fxDraw 1s var(--ease-out) calc(var(--d, 0ms) + var(--k, 0) * 80ms) backwards; }
.pron-you {
    justify-self: start;
    padding: 34px 48px;
    border: 1px solid var(--fx);
    border-radius: 22px;
    text-align: center;
    box-shadow: 0 0 50px rgba(var(--fx-rgb), calc(0.3 * var(--glow-k)));
}
.pron-you b { display: block; font-size: 64px; font-weight: 600; color: var(--text-main); letter-spacing: -0.02em; }
.pron-you span { font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fx); }

/* ===== Точки-исходы (7 попыток) ===== */
.dots7 { display: flex; flex-direction: column; gap: 30px; }
.d7 { display: grid; grid-template-columns: 380px auto 1fr; align-items: center; gap: 34px; }
.d7 .l { font-size: 28px; color: var(--text-soft); text-align: right; }
.d7 .row { display: flex; gap: 14px; }
.d7 .row i {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid rgba(var(--fx-rgb), 0.7);
    background: transparent;
}
.d7 .row i.bad { border-color: var(--hot); background: rgba(var(--hot-rgb), 0.85); box-shadow: 0 0 22px rgba(var(--hot-rgb), calc(0.45 * var(--glow-k))); }
.slide.active .d7 .row i { animation: fxPop 0.45s var(--ease-out) calc(var(--d, 0ms) + 250ms + var(--i, 0) * 90ms) backwards; }
.d7 .r { font-family: var(--font-mono); font-size: 22px; color: var(--text-muted); }
.d7 .r b { color: var(--hot); font-weight: 500; }
.legend { display: flex; gap: 34px; font-size: 21px; color: var(--text-muted); }
.legend i { display: inline-block; width: 18px; height: 18px; margin-right: 10px; vertical-align: -3px; border-radius: 50%; border: 2px solid rgba(var(--fx-rgb), 0.7); }
.legend i.bad { border-color: var(--hot); background: rgba(var(--hot-rgb), 0.85); }

/* ===== Чат: запрос и варианты продолжения ===== */
.chat { display: flex; flex-direction: column; gap: 22px; }
.bubble {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 32px;
    border: 1px solid rgba(var(--fx-rgb), 0.5);
    border-radius: 22px 22px 22px 6px;
    font-size: 36px;
    font-weight: 500;
    color: var(--text-main);
    background: rgba(var(--fx-rgb), 0.06);
}
.bubble .k { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fx); }
.caret { display: inline-block; width: 3px; height: 38px; margin-left: 2px; background: var(--fx); vertical-align: -6px; }
@keyframes blink { 50% { opacity: 0; } }
.slide.active .caret { animation: blink 1s steps(1) infinite; }
.opt {
    display: grid;
    grid-template-columns: 70px 1fr 220px;
    align-items: center;
    gap: 24px;
    padding: 22px 30px;
    border: 1px solid var(--border);
    border-radius: 18px;
}
.opt .n { font-family: var(--font-mono); font-size: 22px; color: var(--text-dim); }
.opt .t { font-size: 29px; line-height: 1.35; color: var(--text-soft); }
.opt .tag { justify-self: end; font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); }
.opt.is-yes .tag { color: var(--fx); }
.slide.active .opt.is-no { animation: fxIn 0.95s var(--ease-out) var(--d, 0ms) backwards, fxDim 0.7s ease 3.2s forwards; }
@keyframes fxGlow { to { border-color: rgba(var(--fx-rgb), 0.7); box-shadow: 0 0 0 1px rgba(var(--fx-rgb), 0.25), 0 20px 60px -30px rgba(var(--fx-rgb), calc(0.6 * var(--glow-k))); } }
.slide.active .opt.is-yes { animation: fxIn 0.95s var(--ease-out) var(--d, 0ms) backwards, fxGlow 0.7s ease 3.2s forwards; }

/* Пара «запрос — ответ» */
.pair { display: flex; flex-direction: column; gap: 18px; max-width: 1300px; }
.pair .q, .pair .a { padding: 26px 34px; border-radius: 20px; font-size: 28px; line-height: 1.45; }
.pair .q { align-self: flex-start; max-width: 1050px; border: 1px solid var(--border); color: var(--text-soft); }
.pair .a { align-self: flex-end; max-width: 1050px; border: 1px solid rgba(var(--fx-rgb), 0.5); background: rgba(var(--fx-rgb), 0.05); color: var(--text-main); }
.pair .k { display: block; margin-bottom: 8px; font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); }
.pair .a .k { color: var(--fx); }

/* ===== Полоса долей (98 / 2) ===== */
.split { position: relative; display: flex; height: 120px; border-radius: 20px; overflow: hidden; gap: 4px; }
.split > div { position: relative; display: flex; align-items: center; padding: 0 30px; transform-origin: left; }
.split .s1 { flex: 98; background: rgba(var(--tint-rgb), 0.08); border: 1px solid var(--border); border-radius: 20px 6px 6px 20px; }
.split .s2 { flex: 2; padding: 0; background: var(--fx); border-radius: 6px 20px 20px 6px; box-shadow: 0 0 40px rgba(var(--fx-rgb), calc(0.6 * var(--glow-k))); }
.split .s1 span { font-size: 26px; color: var(--text-muted); }
.slide.active .split .s1 { animation: fxGrowX 1.6s var(--ease-out) 0.4s backwards; }
.slide.active .split .s2 { animation: fxPop 0.6s var(--ease-out) 1.8s backwards; }
.split-cap { display: flex; justify-content: space-between; margin-top: 22px; }
.split-cap .stat b { font-size: 110px; }

/* ===== Шкала: от «всё можно» до «всё нельзя» ===== */
.spectrum { position: relative; padding-top: 10px; }
.spec-bar { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--hot), rgba(var(--tint-rgb), 0.25) 50%, var(--hot)); transform-origin: center; }
.slide.active .spec-bar { animation: fxGrowX 1.4s var(--ease-out) 0.3s backwards; }
.spec-ends { display: flex; justify-content: space-between; margin-top: 18px; }
.spec-ends div { max-width: 520px; font-size: 24px; line-height: 1.4; color: var(--text-muted); }
.spec-ends div:last-child { text-align: right; }
.spec-ends b { display: block; margin-bottom: 6px; font-family: var(--font-mono); font-size: 15px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hot); }
.spec-mid { position: absolute; left: 50%; top: -2px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: var(--bg); border: 2px solid var(--fx); box-shadow: none; }

/* ===== Оценка баллом против сравнения ===== */
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.score-row { display: flex; gap: 10px; margin: 18px 0 8px; }
.score-row i {
    flex: 1;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-style: normal;
    font-family: var(--font-mono);
    font-size: 20px;
    color: var(--text-dim);
}
.score-row i.a { border-color: var(--hot); color: var(--hot); background: rgba(var(--hot-rgb), 0.08); }
.score-row i.b { border-color: var(--fx2); color: var(--fx2); background: rgba(var(--fx2-rgb), 0.08); }
.ab { display: flex; gap: 16px; margin: 18px 0 8px; }
.ab span {
    flex: 1;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 14px;
    font-size: 40px;
    font-weight: 600;
    color: var(--text-dim);
}
.ab span.win { border-color: var(--fx); color: var(--text-main); background: rgba(var(--fx-rgb), 0.07); box-shadow: 0 0 40px -10px rgba(var(--fx-rgb), calc(0.6 * var(--glow-k))); }
@keyframes winIn { from { border-color: var(--border); color: var(--text-dim); background: transparent; box-shadow: none; } }
.slide.active .ab span.win { animation: winIn 0.6s ease 2s backwards; }

/* ===== Ранжирование → пары ===== */
.rank { display: grid; grid-template-columns: 340px 260px 380px; justify-content: center; align-items: center; }
.rank-list, .pairs { display: flex; flex-direction: column; gap: 20px; }
.rk {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 30px;
    border: 1px solid var(--border);
    border-radius: 16px;
    font-size: 40px;
    font-weight: 600;
    color: var(--text-main);
}
.rk em { font-style: normal; font-family: var(--font-mono); font-size: 17px; color: var(--text-dim); letter-spacing: 0.1em; }
.rank-arrow { height: 2px; margin: 0 30px; background: rgba(var(--tint-rgb), 0.35); transform-origin: left; }
.slide.active .rank-arrow { animation: fxGrowX 0.8s var(--ease-out) calc(var(--d, 0ms) + 200ms) backwards; }
.pr { display: inline-flex; align-items: center; gap: 16px; padding: 18px 34px; border: 1px solid rgba(var(--fx-rgb), 0.5); border-radius: 999px; font-size: 36px; font-weight: 600; color: var(--text-main); align-self: flex-start; }
.pr .gt { color: var(--fx); }

/* ===== Формула потерь ===== */
.loss { display: grid; grid-template-columns: 1fr 560px; gap: 60px; align-items: center; }
.formula {
    font-family: var(--font-mono);
    font-size: 50px;
    letter-spacing: -0.01em;
    color: var(--text-soft);
    white-space: nowrap;
}
.formula .w { color: var(--fx); }
.formula .l { color: var(--hot); }
.formula .s { color: var(--fx2); }
.fl-legend { display: flex; flex-direction: column; gap: 16px; margin-top: 38px; }
.fl-legend div { display: grid; grid-template-columns: 210px 1fr; gap: 20px; font-size: 24px; color: var(--text-muted); }
.fl-legend code { font-family: var(--font-mono); font-size: 22px; }
.sig { width: 100%; height: auto; overflow: visible; }
.sig .axis { stroke: rgba(var(--tint-rgb), 0.25); stroke-width: 1.5; fill: none; }
.sig .curve { fill: none; stroke: var(--fx); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 900; }
.slide.active .sig .curve { animation: fxDraw 1.6s var(--ease-out) 0.6s backwards; --len: 900; }
.sig text { font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.08em; fill: var(--text-dim); }
.sig .dot { fill: var(--fx); }
.sig .dash { stroke-dasharray: 4 7; }
.sig .ann { font-size: 16px; fill: var(--text-muted); }
.sig .ann.hot { fill: var(--hot); }
.sig .ann.acc { fill: var(--fx); }

/* ===== Цикл обучения с подкреплением ===== */
.loop { display: grid; grid-template-columns: 640px 1fr; gap: 70px; align-items: center; }
.ring { position: relative; width: 600px; height: 600px; margin-left: 20px; }
.ring-track { position: absolute; inset: 70px; border-radius: 50%; border: 2px dashed rgba(var(--fx-rgb), 0.45); }
.ring-orbit { position: absolute; inset: 70px; border-radius: 50%; }
.ring-orbit::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -7px;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    border-radius: 50%;
    background: var(--fx);
}
.slide.active .ring-orbit { animation: fxSpin 6s linear infinite; }
.rnode {
    position: absolute;
    width: 220px;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--bg);
    text-align: center;
    transform: translate(-50%, -50%);
}
.rnode b { display: block; font-size: 25px; font-weight: 600; line-height: 1.2; color: var(--text-main); }
.rnode span { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
.rnode.is-hi { border-color: rgba(var(--fx-rgb), 0.6); }
.rnode.is-hi span { color: var(--fx); }
.rnode.n1 { left: 50%; top: 70px; }
.rnode.n2 { left: 530px; top: 50%; }
.rnode.n3 { left: 50%; top: 530px; }
.rnode.n4 { left: 70px; top: 50%; }
.ring-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; font-family: var(--font-mono); font-size: 16px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fx2); }
.ring-core b { display: block; font-family: var(--font-sans); font-size: 44px; letter-spacing: -0.02em; text-transform: none; color: var(--text-main); }

/* ===== Лучшее из N ===== */
.bon { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; }
.bon-c {
    position: relative;
    padding: 26px 24px 22px;
    border: 1px solid var(--border);
    border-radius: 18px;
    text-align: center;
}
.bon-c .k { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); }
.bon-lines { display: flex; flex-direction: column; gap: 9px; margin: 18px 6px 20px; }
.bon-lines i { height: 8px; border-radius: 4px; background: rgba(var(--tint-rgb), 0.12); }
.bon-lines i:nth-child(2) { width: 82%; }
.bon-lines i:nth-child(3) { width: 64%; }
.bon-c b { display: block; font-family: var(--font-mono); font-size: 44px; font-weight: 500; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.bon-c .rm { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); }
@keyframes bonWin { to { border-color: var(--fx); box-shadow: 0 0 0 1px rgba(var(--fx-rgb), 0.3), 0 30px 70px -30px rgba(var(--fx-rgb), calc(0.7 * var(--glow-k))); transform: translateY(-12px); } }
@keyframes bonWinNum { to { color: var(--fx); } }
@keyframes bonTag { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.slide.active .bon-c.win { animation: fxIn 0.95s var(--ease-out) var(--d, 0ms) backwards, bonWin 0.6s var(--ease-out) 2.6s forwards; }
.slide.active .bon-c.win b { animation: bonWinNum 0.6s ease 2.6s forwards; }
.bon-c .tag {
    position: absolute;
    left: 50%;
    top: -18px;
    padding: 4px 14px;
    border-radius: 999px;
    background: var(--fx);
    color: var(--bg);
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0;
    transform: translate(-50%, 0);
}
.slide.active .bon-c.win .tag { animation: bonTag 0.5s var(--ease-out) 2.9s forwards; }

/* ===== Шоггот: хаос → маска → улыбка ===== */
.shog { display: grid; grid-template-columns: 640px 1fr; gap: 60px; align-items: center; }
.shog-svg { width: 640px; height: 600px; overflow: visible; }
.shog-svg .p { fill: rgba(var(--tint-rgb), 0.5); }
@keyframes drift { 50% { transform: translate(var(--dx, 6px), var(--dy, -6px)); } }
.slide.active .shog-svg .p { animation: fxFade 0.8s ease calc(var(--i, 0) * 12ms) backwards, drift var(--t, 5s) ease-in-out calc(var(--i, 0) * -90ms) infinite; }
.shog-svg .mask { fill: rgba(var(--fx2-rgb), 0.1); stroke: var(--fx2); stroke-width: 2; stroke-dasharray: 900; }
.slide.active .shog-svg .mask { animation: fxDraw 1.4s var(--ease-out) 1.2s backwards; --len: 900; }
.shog-svg .face { fill: rgba(var(--fx-rgb), 0.12); stroke: var(--fx); stroke-width: 2.5; stroke-dasharray: 420; }
.slide.active .shog-svg .face { animation: fxDraw 1s var(--ease-out) 2.3s backwards; --len: 420; }
.shog-svg .smile { fill: none; stroke: var(--fx); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 120; }
.slide.active .shog-svg .smile { animation: fxDraw 0.7s ease 3.1s backwards; --len: 120; }
.shog-svg .eye { fill: var(--fx); transform-box: fill-box; transform-origin: center; }
.slide.active .shog-svg .eye { animation: fxPop 0.4s ease 3s backwards; }
.layers { display: flex; flex-direction: column; gap: 22px; }
.layer { display: grid; grid-template-columns: 26px 1fr; gap: 22px; align-items: start; }
.layer i { width: 18px; height: 18px; margin-top: 10px; border-radius: 50%; }
.layer.l1 i { background: rgba(var(--tint-rgb), 0.5); }
.layer.l2 i { border: 2px solid var(--fx2); background: rgba(var(--fx2-rgb), 0.2); }
.layer.l3 i { border: 2px solid var(--fx); background: rgba(var(--fx-rgb), 0.25); }
.layer b { display: block; font-size: 32px; font-weight: 600; color: var(--text-main); letter-spacing: -0.015em; }
.layer p { font-size: 23px !important; line-height: 1.45; color: var(--text-muted); }

/* ===== Токен за токеном против целого ответа ===== */
.tokline { display: flex; flex-wrap: wrap; gap: 10px; }
.tokline span {
    padding: 10px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-family: var(--font-mono);
    font-size: 26px;
    color: var(--text-soft);
}
.tokline span.next { border-style: solid; border-color: var(--fx); color: var(--fx); }
.slide.active .tokline span { animation: fxPop 0.4s ease calc(var(--d, 0ms) + var(--i, 0) * 110ms) backwards; }
.whole {
    position: relative;
    padding: 28px 34px;
    border: 1px solid rgba(var(--fx2-rgb), 0.6);
    border-radius: 20px;
    font-size: 27px;
    line-height: 1.45;
    color: var(--text-main);
    background: rgba(var(--fx2-rgb), 0.05);
}

/* ===== Пост с голосами (эвристика Reddit) ===== */
.gate { display: grid; grid-template-columns: 1fr 200px 1fr; align-items: center; gap: 0; }
.post {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 24px;
    align-items: center;
    padding: 26px 30px;
    border: 1px solid var(--border);
    border-radius: 20px;
}
.vote { display: flex; flex-direction: column; align-items: center; gap: 2px; font-family: var(--font-mono); }
.vote .up { width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-bottom: 16px solid var(--fx); }
.vote b { font-size: 44px; font-weight: 500; color: var(--text-main); }
.vote span { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
.post-t { font-size: 26px; line-height: 1.35; color: var(--text-soft); }
.post-t .u { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: 16px; color: var(--text-dim); }
.gate-mid { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.gate-mid .line { width: 100%; height: 2px; background: rgba(var(--tint-rgb), 0.35); transform-origin: left; }
.slide.active .gate-mid .line { animation: fxGrowX 0.9s var(--ease-out) calc(var(--d, 0ms) + 300ms) backwards; }
.gate-mid span { font-family: var(--font-mono); font-size: 22px; color: var(--fx); }
.gate-out { padding: 28px 30px; border: 1px solid rgba(var(--fx-rgb), 0.55); border-radius: 20px; font-size: 26px; line-height: 1.4; color: var(--text-main); }
.gate-out .k { display: block; margin-bottom: 8px; font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fx); }

/* ===== Языковые модели по языкам ===== */
.langs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.lang { padding: 28px 30px; border: 1px solid var(--border); border-radius: 20px; }
.lang .k { font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fx); }
.lang ul { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lang li { font-size: 28px; font-weight: 600; color: var(--text-main); }
.lang li a { color: inherit; text-decoration: none; border-bottom: 1px dashed rgba(var(--fx-rgb), 0.5); }
.lang li a:hover { color: var(--fx); }

/* ===== Три пути добыть демонстрации ===== */
.paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.paths .tile-t { font-size: 32px; }
.paths .big { margin: 6px 0 14px; font-size: 64px; font-weight: 300; letter-spacing: -0.04em; line-height: 1; color: var(--text-main); }
.paths .big small { font-size: 0.4em; letter-spacing: 0; color: var(--text-dim); }
.dlg { margin-top: 10px; font-family: var(--font-mono); font-size: 19px; line-height: 1.6; color: var(--text-muted); }
.dlg b { color: var(--fx); font-weight: 500; }

/* ===== Заметки докладчика (клавиша N) ===== */
.notes { display: none; }
.notes-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 46vh;
    overflow-y: auto;
    padding: 22px 40px 26px;
    z-index: 50;
    background: rgba(var(--bg-rgb), 0.94);
    border-top: 1px solid var(--border);
    backdrop-filter: blur(14px);
    transform: translateY(105%);
    transition: transform 0.35s var(--ease-out);
}
.notes-panel.is-open { transform: none; }
.notes-panel-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
.notes-panel-body { max-width: 1400px; font-size: 17px; line-height: 1.65; color: var(--text-soft); }
.notes-panel-body p { margin: 0 0 10px; font-size: inherit; line-height: inherit; color: inherit; }
.notes-panel-body p:last-child { margin-bottom: 0; }
.notes-panel-body b { color: var(--accent); font-weight: 600; }
.notes-panel-body a { color: var(--text-soft); border-bottom: 1px dotted var(--border-strong); text-decoration: none; }
.notes-panel-body em { display: inline-block; font-style: normal; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fx); margin-right: 8px; }

/* ===== Титульный слайд =====
   Слева сверху — клуб и стрим, по центру — глава и тема доклада крупно,
   внизу — кто читает доклад (с контактом) и по какой книге. */
.slide.is-title .fx-wrap { justify-content: center; }
.title-meta {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-dim);
}
.title-meta b { color: var(--fx); font-weight: 500; }
.title-h {
    margin: 0;
    max-width: 1560px;
    font-size: 112px;
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -0.045em;
    color: var(--text-main);
    text-wrap: balance;
}
.title-bar {
    width: 120px;
    height: 6px;
    margin-top: 48px;
    background: var(--fx);
    transform-origin: left center;
}
.slide.active .title-bar { animation: fxGrowX 0.9s var(--ease-out) 0.7s backwards; }
.title-foot {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 60px;
}
.title-speaker {
    display: flex;
    align-items: center;
    gap: 24px;
    color: inherit;
    text-decoration: none;
}
.title-speaker img {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px var(--fx);
}
.title-speaker em,
.title-book em {
    display: block;
    margin-bottom: 8px;
    font-style: normal;
    font-family: var(--font-mono);
    font-size: 14px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fx);
}
.title-speaker b { display: block; font-size: 36px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: var(--text-main); }
.title-speaker i { display: block; margin-top: 6px; font-style: normal; font-family: var(--font-mono); font-size: 18px; color: var(--text-dim); }
a.title-speaker:hover b { color: var(--fx); }
.title-book {
    display: flex;
    align-items: center;
    gap: 22px;
    text-align: right;
    color: inherit;
    text-decoration: none;
}
.title-book img { height: 124px; border-radius: 4px 8px 8px 4px; box-shadow: 0 0 0 1px var(--border); }
.title-book b { display: block; max-width: 460px; font-size: 22px; font-weight: 600; line-height: 1.3; color: var(--text-soft); }
.title-book span { display: block; max-width: 460px; margin-top: 6px; font-size: 18px; line-height: 1.35; color: var(--text-dim); }

/* ===== Открытие стрима (первый слайд первого доклада вечера) =====
   Тот же каркас, что у титула, плюс крупный контурный номер стрима справа
   и ссылки клуба внизу слева. */
.open-num {
    position: absolute;
    right: -12px;
    top: 50%;
    transform: translateY(-58%);
    font-size: 380px;
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.06em;
    font-variant-numeric: tabular-nums;
    color: transparent;
    -webkit-text-stroke: 2px rgba(var(--fx-rgb), 0.45);
    pointer-events: none;
    user-select: none;
}
.slide.active .open-num { animation: fxFade 1.4s ease 0.2s backwards; }
.is-opening .title-h { max-width: 960px; font-size: 96px; }
.open-sub {
    margin-top: 26px !important;
    font-size: 30px;
    line-height: 1.4;
    color: var(--text-muted);
}
.open-sub b { color: var(--text-main); font-weight: 600; }
.open-links em {
    display: block;
    margin-bottom: 12px;
    font-style: normal;
    font-family: var(--font-mono);
    font-size: 14px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fx);
}
.open-speakers em {
    display: block;
    margin-bottom: 14px;
    font-style: normal;
    font-family: var(--font-mono);
    font-size: 14px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fx);
}
.os-row { display: flex; flex-wrap: wrap; gap: 14px 28px; max-width: 760px; }
.os { display: inline-flex; align-items: center; gap: 12px; }
.os img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--border); }
.os b { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-main); }
.open-links .chips { gap: 10px; }
.open-links .chip { padding: 9px 18px 9px 14px; gap: 9px; font-size: 19px; }
.open-links .ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.open-links .chip:hover .ico { stroke: var(--fx); }

/* ===== Авторы (несколько) — карточки в ряд ===== */
.au-grid { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 48px; align-items: start; }
.au-card { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; color: inherit; text-decoration: none; }
.au-card img { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--border); }
.au-card b { font-size: 32px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; color: var(--text-main); }
.au-card span { font-family: var(--font-mono); font-size: 16px; color: var(--text-dim); }
a.au-card:hover b { color: var(--fx); }
.au-books { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.au-books li { font-size: 25px; line-height: 1.4; color: var(--text-soft); }
.au-books li.is-now { color: var(--text-main); }
.au-books li.is-now::after { content: ' · эта книга'; color: var(--fx); }

/* ===== Книга: описание и полоса глав ===== */
.bk2-desc {
    margin-top: 22px !important;
    max-width: 1100px;
    font-size: 23px !important;
    line-height: 1.5 !important;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.chaps { grid-template-columns: repeat(var(--chaps, 10), minmax(0, 1fr)); }

/* ===== Без анимаций — для тех, кто их отключил ===== */
@media (prefers-reduced-motion: reduce) {
    .slide.fx *, .slide.fx::after { animation: none !important; }
    .slide.active .opt.is-no { opacity: 0.32; }
    .bon-c.win .tag { opacity: 1; }
}

/* =====================================================================
   BC-120-AI-2-1: правки спикера 19.10.2026 — ссылки, подсказка,
   выводы под схемами, путь «с нуля / дообучение», сравнение объёма
   и качества, диаграмма «Проекта Эйлера», модели по языкам с иконками.
   ===================================================================== */

/* Подпись над схемой («Пример · …») и строка-источник под заголовком */
.fx-cap {
    margin-bottom: 20px;
    font-family: var(--font-mono);
    font-size: 19px;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.fx-cap.is-under { margin: 14px 0 0 !important; }

/* Подсказка при наведении (NewsGuard) */
.tip {
    position: relative;
    color: var(--text-main);
    border-bottom: 1px dashed rgba(var(--fx-rgb), 0.7);
    cursor: help;
    outline: none;
}
.tip-c {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 16px);
    z-index: 20;
    width: 600px;
    padding: 22px 26px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--bg-card);
    box-shadow: 0 24px 60px -20px rgba(var(--shadow-rgb), calc(0.9 * var(--shadow-k)));
    font-size: 20px;
    line-height: 1.5;
    color: var(--text-muted);
    text-align: left;
    cursor: auto;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 6px);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}
.tip-c::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 20px; }
.tip-c b { color: var(--text-main); font-weight: 600; }
.tip-c a { color: var(--fx); text-decoration: none; border-bottom: 1px dashed rgba(var(--fx-rgb), 0.6); }
.tip:hover .tip-c,
.tip:focus-within .tip-c { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.tile.is-open { overflow: visible; z-index: 2; }

/* Венн с подписями снаружи кругов: внутри им не хватало места */
.venn.is-out { width: 1320px; height: 350px; }
.venn.is-out .venn-c { width: 340px; height: 340px; top: 5px; padding: 0; justify-content: center; }
.venn.is-out .venn-c.a { left: 395px; }
.venn.is-out .venn-c.b { right: 395px; }
.venn.is-out .venn-c span {
    position: absolute;
    top: 50%;
    width: 260px;
    max-width: none;
    transform: translateY(-50%);
}
.venn.is-out .venn-c.a span { right: calc(100% + 34px); text-align: right; }
.venn.is-out .venn-c.b span { left: calc(100% + 34px); text-align: left; }
/* Вывод под Венном: «риск → что делать» */
.verdict { display: grid; grid-template-columns: 1fr 110px 1fr; align-items: stretch; margin-top: 34px; }
.vd {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 24px;
    align-items: center;
    padding: 24px 30px 24px 24px;
    border: 1px solid var(--border);
    border-radius: 20px;
}
.vd .k { display: block; margin-bottom: 6px; font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; }
.vd p { font-size: 24px; line-height: 1.4; color: var(--text-soft); }
.vd p b { color: var(--text-main); font-weight: 600; }
.vd-ico {
    box-sizing: border-box;
    flex: none;
    width: 84px;
    height: 84px;
    padding: 17px;
    border-radius: 18px;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.vd.is-risk { border-color: rgba(var(--hot-rgb), 0.45); background: rgba(var(--hot-rgb), 0.05); }
.vd.is-risk .k { color: var(--hot); }
.vd.is-risk .vd-ico { stroke: var(--hot); background: rgba(var(--hot-rgb), 0.1); }
.vd.is-fix { border-color: rgba(var(--fx-rgb), 0.55); background: rgba(var(--fx-rgb), 0.05); }
.vd.is-fix .k { color: var(--fx); }
.vd.is-fix .vd-ico { stroke: var(--fx); background: rgba(var(--fx-rgb), 0.1); }
.verdict .ex-arrow { align-self: center; margin: 0 20px; }
.verdict.is-one { grid-template-columns: 1fr; margin-top: 30px; }
.verdict.is-pair { grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 26px; }
.verdict.is-compact .vd { gap: 20px; padding: 18px 26px 18px 18px; }
.verdict.is-compact .vd-ico { width: 68px; height: 68px; padding: 14px; border-radius: 16px; }
.verdict.is-compact .vd p { font-size: 22px; }
.vd.is-note { border-color: var(--border-strong); background: rgba(var(--tint-rgb), 0.03); }
.vd.is-note .k { color: var(--text-dim); }
.vd.is-note .vd-ico { stroke: var(--text-soft); background: rgba(var(--tint-rgb), 0.07); }

/* Два пути к своей модели: с нуля и дообучением */
.route { display: flex; flex-direction: column; gap: 30px; }
.route-row {
    display: grid;
    grid-template-columns: 200px 1fr 90px 1fr 90px 1fr;
    align-items: stretch;
    row-gap: 12px;
}
.route-k, .route-row .ex-arrow { align-self: center; }
.route-k { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); }
.route-k b { display: block; margin-bottom: 4px; font-family: var(--font-sans); font-size: 30px; font-weight: 600; letter-spacing: -0.01em; text-transform: none; color: var(--text-soft); }
.route-box {
    display: flex;
    align-items: center;
    padding: 20px 24px;
    border: 1px solid var(--border);
    border-radius: 16px;
    font-size: 23px;
    line-height: 1.35;
    color: var(--text-soft);
}
.route-row .ex-arrow { margin: 0 14px; }
.route-eg { grid-column: 2 / -1; font-size: 20px; color: var(--text-dim); }
.route-row.is-dim .route-box { border-style: dashed; border-color: var(--border-strong); color: var(--text-muted); }
.route-row.is-hi .route-k b { color: var(--fx); }
.route-row.is-hi .route-box.is-end { border-color: var(--fx); color: var(--text-main); font-weight: 600; }

/* Вопрос-заголовок длиннее обычного */
.fx-h.is-q { font-size: 60px; max-width: 1620px; }

/* «Всё подряд» против «мало, но качественно» */
.cmp { display: grid; grid-template-columns: 1fr 90px 1fr; align-items: stretch; }
.cmp-col { padding: 28px 34px 30px; border: 1px solid var(--border); border-radius: 22px; }
.cmp-col.is-hi { border-color: rgba(var(--fx-rgb), 0.5); }
.cmp-vis { height: 150px; display: flex; align-items: flex-end; gap: 14px; margin-bottom: 22px; }
.cmp-vis i {
    display: block;
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    border: 1px solid rgba(var(--tint-rgb), 0.25);
    background: rgba(var(--tint-rgb), 0.04);
}
.cmp-col.is-hi .cmp-vis i { border-color: var(--fx); background: var(--fx); }
.slide.active .cmp-vis i { animation: fxPop 0.6s var(--ease-out) calc(var(--d, 0ms) + 250ms) backwards; }
.cmp-k { margin-bottom: 8px; font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); }
.cmp-col.is-hi .cmp-k { color: var(--fx); }
.cmp-t { margin-bottom: 10px; font-size: 34px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; color: var(--text-main); }
.cmp-p { font-size: 23px; line-height: 1.45; color: var(--text-muted); }
.cmp-links { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 14px; font-family: var(--font-mono); font-size: 16px; color: var(--text-soft); }
.cmp-vs { align-self: center; text-align: center; font-family: var(--font-mono); font-size: 18px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); }

/* Плотная диаграмма на 11 строк и «ноль» с акцентом */
.hb.is-tight { gap: 7px; }
.hb.is-tight .hb-row { grid-template-columns: 240px 1fr 130px; }
.hb.is-tight .hb-l, .hb.is-tight .hb-v { font-size: 22px; }
.hb-row.is-zero .hb-l, .hb-row.is-zero .hb-v { color: var(--hot); font-weight: 600; }
.hb-row.is-zero .hb-t { height: 26px; border: 1px dashed rgba(var(--hot-rgb), 0.7); background: rgba(var(--hot-rgb), 0.06); }
.hb-row.is-zero .hb-t em {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-style: normal;
    font-family: var(--font-mono);
    font-size: 14px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--hot);
}

/* Подпись под схемой местоимений */
.fx .pron-cap { margin-top: 26px; }

/* Цена токенов: условия исследования и кратность */
.tk-meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    margin-bottom: 44px;
    padding: 18px 0;
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
    font-size: 20px;
    line-height: 1.4;
    color: var(--text-muted);
}
.tk-meta .k { display: block; margin-bottom: 6px; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); }
.tk-n i { margin-left: 14px; font-style: normal; font-size: 20px; color: var(--text-dim); }
.tk-row.is-hot .tk-n i { color: var(--hot); }
.tk-row { grid-template-columns: 220px 1fr 230px; }

/* Модели по языкам: без рамок, у каждой модели значок-монограмма */
.langs.is-flat { grid-template-columns: repeat(5, 1fr); gap: 36px; }
.langs.is-flat .lang { padding: 0; border: 0; border-radius: 0; }
.langs.is-flat .lang .k { padding-bottom: 16px; font-size: 17px; border-bottom: 1px solid var(--border-soft); }
.langs.is-flat ul { margin-top: 28px; gap: 26px; }
.langs.is-flat li { display: flex; align-items: center; gap: 16px; font-size: 30px; }
.langs.is-flat li > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.langs.is-flat li em {
    margin-top: 2px;
    font-style: normal;
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--text-dim);
}
.mono {
    flex: none;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(var(--fx-rgb), 0.45);
    border-radius: 14px;
    background: rgba(var(--fx-rgb), 0.07);
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 600;
    color: var(--fx);
}

/* Иконка карточки */
.tile-ico {
    display: block;
    width: 76px;
    height: 76px;
    margin-bottom: 24px;
    fill: none;
    stroke: var(--fx);
    stroke-width: 1.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}