/* ============================================================
   ХимПодготовка — олимпиадная теория: конспекты-презентации

   Продолжает оформление олимпиадного раздела (css/olympiads.css):
   тёмная доска, гексагоны, моноширинные числа. Своё здесь — сцена
   слайдов, типографика конспекта и интерактивные схемы.

   Цвет раздела химии задаётся одной переменной --area на корне
   конспекта: неорганика — голубой, органика — сиреневый,
   физическая химия — янтарный. Всё остальное от неё наследуется.

   Префикс ot- (olympiad theory), глобально ничего не трогаем.
   ============================================================ */

.olt {
    --olt-ink: #0B1220;
    --olt-panel: #121C30;
    --olt-panel2: #17233A;
    --olt-line: rgba(255, 255, 255, .09);
    --olt-line2: rgba(255, 255, 255, .16);
    --olt-text: #E8EFFA;
    --olt-soft: #C6D5EA;
    --olt-muted: #93A6C2;
    --olt-gold: #FBBF24;
    --olt-rose: #FB7185;
    --olt-green: #34D399;
    --olt-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
    --area: #38BDF8;
    --area-soft: rgba(56, 189, 248, .14);
}
.olt[data-area="inorganic"] { --area: #38BDF8; --area-soft: rgba(56, 189, 248, .14); }
.olt[data-area="organic"] { --area: #A78BFA; --area-soft: rgba(167, 139, 250, .15); }
.olt[data-area="physical"] { --area: #FBBF24; --area-soft: rgba(251, 191, 36, .13); }

/* ——— шапка конспекта ——— */
.olt-hero { margin: -2rem -2rem 0; }
.olt-hero .oly-kicker { color: var(--area); border-color: color-mix(in srgb, var(--area) 45%, transparent); }
.olt-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.3rem; }
.olt-meta span {
    font-family: var(--olt-mono); font-size: .74rem; color: var(--olt-soft);
    border: 1px solid var(--olt-line2); border-radius: 8px; padding: .3rem .6rem;
}
.olt-meta b { color: #fff; font-weight: 700; }

/* ——— сцена: панель управления + слайд + оглавление ——— */
.olt-deck {
    position: relative;
    margin: 0 -2rem 2rem;
    background: var(--olt-ink);
    color: var(--olt-text);
    border-top: 1px solid var(--olt-line);
}
.olt-bar {
    /* Под фиксированным верхним меню сайта (widgets.js), а не под ним. */
    position: sticky; top: calc(var(--hp-bar-h, 62px) + var(--hp-bar-gap, 12px) * 2); z-index: 5;
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    padding: .7rem 1.2rem;
    background: rgba(11, 18, 32, .92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--olt-line);
}
.olt-bar__title {
    flex: 1 1 200px; min-width: 0;
    font-size: .84rem; font-weight: 700; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.olt-count { font-family: var(--olt-mono); font-size: .8rem; color: var(--olt-muted); }
.olt-count b { color: var(--area); }
.olt-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    height: 34px; min-width: 34px; padding: 0 .7rem; border-radius: 9px;
    background: rgba(255, 255, 255, .06); color: var(--olt-soft);
    border: 1px solid var(--olt-line); cursor: pointer;
    font: 600 .78rem/1 inherit; transition: background .15s ease, color .15s ease, transform .15s ease;
}
.olt-btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.olt-btn:active { transform: scale(.96); }
.olt-btn[aria-pressed="true"] { background: var(--area-soft); color: var(--area); border-color: color-mix(in srgb, var(--area) 45%, transparent); }
.olt-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.olt-btn--primary { background: var(--area); color: #0B1220; border-color: transparent; }
.olt-btn--primary:hover { background: var(--area); color: #0B1220; filter: brightness(1.1); }
.olt-btn:disabled { opacity: .35; pointer-events: none; }

.olt-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; }
.olt-progress i { display: block; height: 100%; width: 0; background: var(--area); transition: width .35s ease; }

.olt-layout { display: grid; grid-template-columns: 1fr; }
@media (min-width: 1100px) {
    .olt-layout { grid-template-columns: 250px 1fr; }
}

/* Оглавление: номера слайдов и их заголовки */
.olt-toc {
    display: none;
    border-right: 1px solid var(--olt-line);
    padding: 1rem .6rem;
    max-height: calc(100vh - 60px); overflow: auto;
    position: sticky; top: 52px; align-self: start;
}
@media (min-width: 1100px) { .olt-toc { display: block; } }
.olt-toc ol { list-style: none; margin: 0; padding: 0; }
.olt-toc a {
    display: flex; gap: .55rem; align-items: baseline;
    padding: .42rem .55rem; border-radius: 8px;
    color: var(--olt-muted); text-decoration: none; font-size: .78rem; line-height: 1.35;
}
.olt-toc a:hover { background: rgba(255, 255, 255, .05); color: var(--olt-text); }
.olt-toc a[aria-current="true"] { background: var(--area-soft); color: #fff; }
.olt-toc a em { font-style: normal; font-family: var(--olt-mono); font-size: .7rem; color: var(--area); flex: 0 0 1.4rem; }

/* ——— слайды ———
   Неактивные слайды не display:none, а спрятаны: MathJax меряет
   ширину стрелок в \ce{} и в скрытом блоке ошибается. */
.olt-stage { position: relative; min-width: 0; }
.olt-slide {
    position: absolute; inset: 0 0 auto 0;
    visibility: hidden; opacity: 0; pointer-events: none;
    padding: 2.2rem 2.4rem 2.6rem;
    transform: translateX(14px);
    transition: opacity .28s ease, transform .28s ease, visibility 0s linear .28s;
}
.olt-slide.is-on {
    position: relative; visibility: visible; opacity: 1; pointer-events: auto;
    transform: none;
    transition: opacity .28s ease, transform .28s ease, visibility 0s;
}
.olt-slide.is-back { transform: translateX(-14px); }

/* Режим «читать целиком»: все слайды подряд, как статья */
.olt-deck.is-scroll .olt-slide {
    position: relative; visibility: visible; opacity: 1; pointer-events: auto; transform: none;
    border-bottom: 1px solid var(--olt-line);
}

.olt-slide__n {
    font-family: var(--olt-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--area); margin-bottom: .7rem;
}
.olt-slide h2 {
    margin: 0 0 1.1rem; color: #fff;
    font-size: clamp(1.3rem, 2.6vw, 1.75rem); line-height: 1.2; letter-spacing: -.015em;
    border: 0; padding: 0;
}
.olt-slide h2::before, .olt-slide h2::after { display: none; }
.olt-slide h3 {
    margin: 1.2rem 0 .55rem; color: #fff; font-size: 1rem; letter-spacing: -.005em;
    border: 0; padding: 0;
}
.olt-slide h3::before, .olt-slide h3::after { display: none; }
.olt-slide p, .olt-slide li { color: var(--olt-soft); font-size: .96rem; line-height: 1.7; }
.olt-slide p { margin: 0 0 .8rem; }
.olt-slide ul, .olt-slide ol { margin: 0 0 .9rem; padding-left: 1.25rem; }
.olt-slide li { margin-bottom: .35rem; }
.olt-slide li::marker { color: var(--area); }
.olt-slide b, .olt-slide strong { color: #fff; }
.olt-slide a { color: var(--area); }
.olt-slide code, .olt-mono { font-family: var(--olt-mono) !important; font-size: .9em; color: #fff; }
.olt-slide mjx-container { color: #fff; }

/* Обложка конспекта */
.olt-cover { display: grid; gap: 1.6rem; }
@media (min-width: 900px) { .olt-cover { grid-template-columns: 1.15fr .85fr; align-items: start; } }
.olt-cover__big {
    font-size: clamp(1.8rem, 4vw, 2.7rem); line-height: 1.08; letter-spacing: -.025em;
    color: #fff; font-weight: 800; margin: 0 0 1rem;
}
.olt-cover__big em { font-style: normal; color: var(--area); }

/* Колонки */
.olt-cols { display: grid; gap: 1.2rem; }
@media (min-width: 820px) {
    .olt-cols { grid-template-columns: 1fr 1fr; }
    .olt-cols--3 { grid-template-columns: repeat(3, 1fr); }
    .olt-cols--wide { grid-template-columns: 1.3fr .7fr; }
}

/* ——— смысловые блоки конспекта ——— */
.olt-card {
    background: var(--olt-panel); border: 1px solid var(--olt-line);
    border-radius: 14px; padding: 1rem 1.1rem;
}
.olt-card > :last-child { margin-bottom: 0; }
.olt-card h3:first-child, .olt-card h4:first-child { margin-top: 0; }
.olt-card h4 { margin: 0 0 .45rem; color: #fff; font-size: .9rem; border: 0; padding: 0; }
.olt-card h4::before, .olt-card h4::after { display: none; }

.olt-note {
    position: relative; margin: 1rem 0; padding: .85rem 1rem .85rem 1.1rem;
    border-radius: 12px; background: var(--olt-panel2); border: 1px solid var(--olt-line);
    border-left: 3px solid var(--tone, var(--area));
}
.olt-note > :last-child { margin-bottom: 0; }
.olt-note__h {
    display: flex; align-items: center; gap: .45rem; margin-bottom: .35rem;
    font-family: var(--olt-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--tone, var(--area));
}
.olt-note--def { --tone: var(--area); }
.olt-note--trick { --tone: var(--olt-gold); }
.olt-note--trap { --tone: var(--olt-rose); }
.olt-note--ok { --tone: var(--olt-green); }

/* Выделенная формула */
.olt-eq {
    margin: .9rem 0; padding: .9rem 1rem; border-radius: 12px; text-align: center;
    background: linear-gradient(135deg, var(--area-soft), rgba(255, 255, 255, .02));
    border: 1px solid color-mix(in srgb, var(--area) 30%, transparent);
    color: #fff; font-size: 1.05rem; overflow-x: auto;
}
.olt-eq small { display: block; margin-top: .35rem; font-size: .76rem; color: var(--olt-muted); }

/* Таблицы */
.olt-table { overflow-x: auto; margin: .6rem 0 1rem; border-radius: 12px; border: 1px solid var(--olt-line); }
.olt-table table { width: 100%; border-collapse: collapse; font-size: .86rem; min-width: 460px; }
.olt-table th {
    text-align: left; padding: .6rem .75rem; color: #fff; font-weight: 700;
    background: var(--olt-panel2); border-bottom: 1px solid var(--olt-line2);
}
.olt-table td { padding: .55rem .75rem; color: var(--olt-soft); border-bottom: 1px solid var(--olt-line); vertical-align: top; }
.olt-table tr:last-child td { border-bottom: 0; }
.olt-table td:first-child { color: #fff; font-weight: 600; }

/* Цепочки и ряды — горизонтальная лента чипов */
.olt-row { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .4rem; margin: .5rem 0 1rem; }
.olt-chip {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .28rem .55rem; border-radius: 8px;
    background: rgba(255, 255, 255, .06); border: 1px solid var(--olt-line);
    color: #fff; font-size: .82rem; font-family: var(--olt-mono);
}
.olt-chip--hi { background: var(--area-soft); border-color: color-mix(in srgb, var(--area) 45%, transparent); color: var(--area); }
.olt-gt { color: var(--olt-muted); font-family: var(--olt-mono); font-size: .8rem; }

/* ——— разобранная задача: шаги открываются по одному ——— */
.olt-problem {
    border-radius: 16px; overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--area) 35%, transparent);
    background: var(--olt-panel);
}
.olt-problem__q { padding: 1rem 1.15rem; background: var(--area-soft); }
.olt-problem__q p:last-child { margin-bottom: 0; }
.olt-problem__tag {
    font-family: var(--olt-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--area); margin-bottom: .45rem;
}
.olt-steps { list-style: none; margin: 0; padding: .4rem 1.15rem 1rem; counter-reset: olt-step; }
.olt-steps > li {
    counter-increment: olt-step; position: relative;
    padding: .7rem 0 .2rem 2.1rem; border-top: 1px solid var(--olt-line); margin: 0;
}
.olt-steps > li::before {
    content: counter(olt-step); position: absolute; left: 0; top: .75rem;
    width: 1.45rem; height: 1.45rem; border-radius: 7px; display: grid; place-items: center;
    background: var(--area); color: #0B1220; font: 800 .74rem/1 var(--olt-mono);
}
.olt-steps > li[hidden] { display: none; }
.olt-steps__ctl { display: flex; gap: .5rem; padding: 0 1.15rem 1.1rem; flex-wrap: wrap; }
.olt-answer {
    margin: .4rem 0 .2rem; padding: .6rem .8rem; border-radius: 10px;
    background: rgba(52, 211, 153, .1); border: 1px solid rgba(52, 211, 153, .35); color: #D1FAE5;
}

/* ——— интерактивные схемы ——— */
.olt-viz {
    margin: 1rem 0; border-radius: 16px; overflow: hidden;
    border: 1px solid var(--olt-line2); background: #0E1728;
}
.olt-viz__h {
    display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap;
    padding: .7rem 1rem; border-bottom: 1px solid var(--olt-line); background: rgba(255, 255, 255, .03);
}
.olt-viz__title { font-size: .86rem; font-weight: 800; color: #fff; }
.olt-viz__hint { font-size: .74rem; color: var(--olt-muted); }
.olt-viz__body { padding: 1rem; }
.olt-viz__grid { display: grid; gap: 1rem; }
@media (min-width: 820px) { .olt-viz__grid { grid-template-columns: 1fr 1fr; align-items: start; } }

.olt-seg { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .7rem; }
.olt-seg button {
    padding: .38rem .65rem; border-radius: 8px; cursor: pointer;
    background: rgba(255, 255, 255, .05); border: 1px solid var(--olt-line); color: var(--olt-soft);
    font: 600 .8rem/1.2 var(--olt-mono); transition: background .15s ease, color .15s ease;
}
.olt-seg button:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.olt-seg button[aria-pressed="true"] { background: var(--area); color: #0B1220; border-color: transparent; }

.olt-field { margin-bottom: .8rem; }
.olt-field label { display: flex; justify-content: space-between; gap: .6rem; font-size: .78rem; color: var(--olt-soft); margin-bottom: .3rem; }
.olt-field label b { font-family: var(--olt-mono); color: var(--area); }
.olt-field input[type="range"] { width: 100%; accent-color: var(--area); }

.olt-readout { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .5rem; margin-top: .6rem; }
.olt-readout div { padding: .55rem .7rem; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1px solid var(--olt-line); }
.olt-readout span { display: block; font-size: .68rem; color: var(--olt-muted); }
.olt-readout b { display: block; margin-top: .15rem; font-family: var(--olt-mono); font-size: .98rem; color: #fff; }
.olt-verdict {
    margin-top: .8rem; padding: .7rem .85rem; border-radius: 10px; font-size: .86rem; line-height: 1.55;
    background: var(--area-soft); color: #fff; border: 1px solid color-mix(in srgb, var(--area) 35%, transparent);
}
.olt-svg { width: 100%; height: auto; display: block; }
.olt-svg text { font-family: "Open Sans", system-ui, sans-serif; }

/* Сетка слайдов (обзор) */
.olt-overview {
    display: none; padding: 1.2rem; gap: .7rem;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.olt-deck.is-overview .olt-overview { display: grid; }
.olt-deck.is-overview .olt-layout { display: none; }
.olt-overview a {
    display: flex; flex-direction: column; gap: .4rem; min-height: 92px;
    padding: .8rem .9rem; border-radius: 12px; text-decoration: none;
    background: var(--olt-panel); border: 1px solid var(--olt-line); color: var(--olt-soft);
    font-size: .82rem; line-height: 1.35; transition: border-color .15s ease, transform .15s ease;
}
.olt-overview a:hover { border-color: var(--area); transform: translateY(-2px); color: #fff; }
.olt-overview em { font-style: normal; font-family: var(--olt-mono); font-size: .72rem; color: var(--area); }

/* Полноэкранный режим — сцена на весь экран */
.olt-deck:fullscreen { overflow: auto; margin: 0; }
.olt-deck:fullscreen .olt-slide { padding: 3rem clamp(2rem, 6vw, 6rem); }
.olt-deck:fullscreen .olt-slide p, .olt-deck:fullscreen .olt-slide li { font-size: 1.08rem; }

.olt-keys { padding: .6rem 1.2rem 1rem; font-size: .72rem; color: var(--olt-muted); border-top: 1px solid var(--olt-line); }
.olt-keys kbd {
    font-family: var(--olt-mono); font-size: .7rem; padding: .08rem .35rem; border-radius: 5px;
    border: 1px solid var(--olt-line2); color: var(--olt-soft); background: rgba(255, 255, 255, .04);
}

@media (max-width: 700px) {
    .olt-slide { padding: 1.5rem 1.1rem 2rem; }
    .olt-bar { padding: .6rem .8rem; }
    .olt-bar__title { display: none; }
    .olt-hero, .olt-deck { margin-left: -1rem; margin-right: -1rem; }
}

/* ——— хаб олимпиадной теории /olympiads/theory/ ———
   Тот же язык, что у каталога задач: тёмная доска, моноширинные
   числа, «клетки» таблицы Менделеева. Цвет раздела — --area. */
.olt-hub .oly-stat b small { font-size: .95rem; color: var(--oly-muted); margin-left: .1rem; }
.olt-hub .oly-lede, .olt-hero .oly-lede { text-align: left; hyphens: manual; -webkit-hyphens: manual; }
.olt-hub__cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; }

.olt-pbtn, .olt-gbtn {
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .78rem 1.2rem; border-radius: 12px; text-decoration: none;
    font-size: .9rem; font-weight: 700; line-height: 1.2;
    transition: transform .16s ease, filter .16s ease, background .16s ease, border-color .16s ease;
}
.olt-pbtn { background: #FBBF24; color: #1F1400; }
.olt-pbtn:hover { filter: brightness(1.07); transform: translateY(-1px); color: #1F1400; }
.olt-gbtn { border: 1px solid rgba(255, 255, 255, .22); color: #fff; }
.olt-gbtn:hover { border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .06); color: #fff; }
.olt-pbtn svg, .olt-gbtn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Разделы: три тёмные колонки с конспектами */
.olt-zones { display: grid; gap: 1rem; }
@media (min-width: 1000px) { .olt-zones { grid-template-columns: repeat(3, 1fr); } }
.olt-zone {
    position: relative; overflow: hidden; display: flex; flex-direction: column;
    padding: 1.25rem; border-radius: 20px; color: var(--olt-text);
    border: 1px solid var(--olt-line);
    background:
        radial-gradient(340px 200px at 100% 0%, var(--area-soft), transparent 70%),
        linear-gradient(165deg, #17233A, #0E1728);
}
.olt-zone__h { display: flex; gap: .9rem; align-items: flex-start; }
.olt-zone__sym {
    flex: none; width: 54px; height: 62px; border-radius: 12px; display: grid; place-items: center;
    background: #0B1220; color: var(--area); font: 900 1.3rem/1 var(--olt-mono);
    border: 1px solid color-mix(in srgb, var(--area) 45%, transparent);
    box-shadow: inset 0 -4px 0 var(--area), 0 10px 22px -12px rgba(0, 0, 0, .8);
}
.olt-zone__h small { display: block; font: 600 .66rem/1.3 var(--olt-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--area); }
.olt-zone .olt-zone__h h3 { margin: .25rem 0 .3rem; padding: 0; border: 0; font-size: 1.14rem; line-height: 1.25; color: #fff; }
.olt-zone .olt-zone__h h3::before, .olt-zone .olt-zone__h h3::after { display: none; }
.olt-zone__h p { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--olt-muted); text-align: left; }
.olt-zone__list { display: grid; gap: .6rem; margin-top: 1.1rem; }

.olt-hdeck {
    display: flex; gap: .8rem; align-items: flex-start; padding: .85rem .85rem .9rem;
    border-radius: 14px; text-decoration: none; color: inherit;
    background: rgba(255, 255, 255, .04); border: 1px solid var(--olt-line);
    transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
a.olt-hdeck:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .075); border-color: color-mix(in srgb, var(--area) 60%, transparent); }
.olt-hdeck__cell {
    flex: none; width: 42px; height: 48px; border-radius: 9px; display: grid; place-items: center;
    background: linear-gradient(160deg, #1B2B4B, #0E1830); color: #fff;
    font: 900 .92rem/1 var(--olt-mono); box-shadow: inset 0 -3px 0 var(--area);
}
.olt-hdeck__body { min-width: 0; flex: 1; }
.olt-hdeck__body b { display: block; color: #fff; font-size: .9rem; line-height: 1.3; }
.olt-hdeck__body span { display: block; margin-top: .3rem; font-size: .78rem; line-height: 1.45; color: var(--olt-muted); }
.olt-hdeck__body em { display: block; margin-top: .5rem; font: normal 600 .68rem/1.3 var(--olt-mono); color: var(--area); }
.olt-hdeck__go { flex: none; align-self: center; color: var(--area); transition: transform .16s ease; }
.olt-hdeck__go svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
a.olt-hdeck:hover .olt-hdeck__go { transform: translateX(3px); }
.olt-hdeck.is-soon { border-style: dashed; background: transparent; }
.olt-hdeck.is-soon .olt-hdeck__cell { opacity: .45; }
.olt-hdeck.is-soon b { color: rgba(255, 255, 255, .6); }
.olt-hdeck.is-soon em { color: var(--olt-muted); }

/* Как устроен конспект */
.olt-feats { display: grid; gap: .8rem; }
@media (min-width: 560px) { .olt-feats { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .olt-feats { grid-template-columns: repeat(4, 1fr); } }
.olt-feat { padding: 1.1rem 1.1rem 1.15rem; border-radius: 16px; background: #fff; border: 1px solid #E7EAF0; }
.olt-feat i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: #0B1220; }
.olt-feat i svg { width: 20px; height: 20px; stroke: #FBBF24; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.olt-feat b { display: block; margin: .8rem 0 .3rem; font-size: .95rem; color: #1a2332; }
.olt-feat span { display: block; font-size: .84rem; line-height: 1.55; color: #5b6576; }

/* Маршрут по этапам: полоса сверху темнеет от школьного к заключительному */
.olt-steps4 { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
@media (min-width: 640px) { .olt-steps4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .olt-steps4 { grid-template-columns: repeat(4, 1fr); } }
.olt-step { position: relative; overflow: hidden; margin: 0; padding: 1.25rem 1.1rem 1.1rem; border-radius: 16px; background: #fff; border: 1px solid #E7EAF0; }
.olt-step::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: #34D399; }
.olt-step:nth-child(2)::before { background: #38BDF8; }
.olt-step:nth-child(3)::before { background: #A78BFA; }
.olt-step:nth-child(4)::before { background: #FBBF24; }
.olt-step__n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #0B1220; color: #FBBF24; font: 800 .82rem/1 ui-monospace, Menlo, Consolas, monospace; }
.olt-step b { display: block; margin-top: .7rem; font-size: .98rem; color: #1a2332; }
.olt-step p { margin: .35rem 0 0; font-size: .83rem; line-height: 1.55; color: #5b6576; text-align: left; }
.olt-step__decks { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .8rem; }
.olt-rchip {
    display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .6rem .3rem .45rem; border-radius: 999px;
    background: #0B1220; color: var(--area); text-decoration: none;
    font: 800 .72rem/1.2 ui-monospace, Menlo, Consolas, monospace;
}
.olt-rchip span { font-family: 'Open Sans', system-ui, sans-serif; font-weight: 600; color: #E8EFFA; }
a.olt-rchip:hover { box-shadow: 0 0 0 2px color-mix(in srgb, var(--area) 50%, transparent); }
.olt-rchip.is-soon { opacity: .5; }
.olt-rchip--plain { background: #F1F5F9; color: #1a2332; font-family: 'Open Sans', system-ui, sans-serif; font-weight: 700; padding: .3rem .7rem; }

/* Книжные полки по разделам */
.olt-shelves { display: grid; gap: 1rem; }
@media (min-width: 1000px) { .olt-shelves { grid-template-columns: repeat(3, 1fr); } }
.olt-shelf { display: grid; gap: .55rem; align-content: start; }
.olt-shelf__h { display: flex; align-items: center; gap: .5rem; font: 700 .7rem/1.3 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; color: #5b6576; }
.olt-shelf__h::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--area); }
.olt-book { display: flex; gap: .8rem; padding: .85rem 1rem; border-radius: 14px; background: #fff; border: 1px solid #E7EAF0; }
.olt-book__spine { flex: none; width: 6px; border-radius: 3px; background: var(--area); }
.olt-book b { display: block; font-size: .9rem; color: #1a2332; line-height: 1.35; }
.olt-book i { display: block; font-style: normal; font-size: .78rem; color: #5b6576; margin-top: .15rem; }
.olt-book span { display: block; font-size: .8rem; line-height: 1.5; color: #5b6576; margin-top: .35rem; }
.olt-src { margin-top: 1rem; font-size: .8rem; color: #5b6576; line-height: 1.6; text-align: left; }
.olt-src a { color: #0369A1; }

/* Итоговая полоса со ссылкой на задачи */
.olt-band {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
    margin: 2.6rem 0 .6rem; padding: 1.35rem 1.5rem; border-radius: 18px; color: #E8EFFA;
    background: radial-gradient(420px 160px at 100% 0%, rgba(251, 191, 36, .16), transparent 70%), #0B1220;
}
.olt-band b { display: block; color: #fff; font-size: 1.05rem; }
.olt-band span { display: block; margin-top: .25rem; font-size: .85rem; color: #93A6C2; }

/* Полоса «теория» в каталоге задач */
.olt-strip {
    display: grid; gap: .8rem; margin: 0 0 1.6rem; padding: 1rem; border-radius: 16px;
    background: var(--olt-ink, #0B1220); color: #E8EFFA;
}
@media (min-width: 900px) { .olt-strip { grid-template-columns: 1.1fr 2fr; align-items: center; } }
.olt-strip__t b { display: block; font-size: 1rem; color: #fff; }
.olt-strip__t span { display: block; margin-top: .25rem; font-size: .82rem; color: #93A6C2; line-height: 1.5; }
.olt-strip__t a { display: inline-block; margin-top: .55rem; font-size: .82rem; font-weight: 700; color: #38BDF8; text-decoration: none; }
.olt-strip__d { display: grid; gap: .45rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

/* Соседние конспекты под сценой */
.olt-pager { display: grid; gap: .7rem; margin: 0 0 2.2rem; }
@media (min-width: 760px) { .olt-pager { grid-template-columns: 1fr 1fr; } }
.olt-pager .olt-hdeck { background: #0B1220; align-items: center; }
.olt-pager .olt-hdeck:last-child:not(:first-child) { text-align: right; flex-direction: row-reverse; }
.olt-pager .olt-hdeck__body em { margin: 0 0 .3rem; }

/* Источники в конце конспекта */
.olt-refs { list-style: none; padding: 0; margin: .4rem 0 0; display: grid; gap: .45rem; }
.olt-refs li { padding: .55rem .75rem; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid var(--olt-line); font-size: .86rem; }
.olt-refs li b { color: #fff; }

/* ——— печать: каждый слайд — отдельная страница, светлый фон ——— */
@media print {
    .olt-bar, .olt-toc, .olt-overview, .olt-keys, .olt-steps__ctl, header.site-header, footer, .oly-back { display: none !important; }
    .olt-deck, .olt-hero, .oly-board { margin: 0 !important; background: #fff !important; color: #000 !important; }
    .olt-layout { display: block !important; }
    .olt-slide {
        position: relative !important; visibility: visible !important; opacity: 1 !important; transform: none !important;
        break-after: page; padding: 0 0 1rem !important;
    }
    .olt-slide *, .olt-slide mjx-container { color: #000 !important; }
    .olt-card, .olt-note, .olt-eq, .olt-problem, .olt-viz, .olt-table, .olt-chip { background: #fff !important; border-color: #bbb !important; }
    .olt-steps > li[hidden] { display: block !important; }
    .olt-steps > li::before { background: #000 !important; color: #fff !important; }
}

/* ==================================================================
   Страница конспекта в стиле главной: тёмный первый экран (hom-hero
   из css/landing.css) и плеер слайдов, который наезжает на него снизу,
   как полоса цифр на главной.
   ================================================================== */
.olt-dhero { padding-bottom: clamp(150px, 13vw, 190px); }
.olt-dhero__title { max-width: 900px; font-size: clamp(32px, 4vw, 54px); }
.olt-dhero__lead { max-width: 760px; }
.olt-dmeta { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 0; }
.olt-dmeta li {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 12px;
    font-size: 13.5px; font-weight: 600; color: #B8C3D4;
    background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.olt-dmeta li b { color: #fff; font-weight: 800; }
.olt-dmeta svg { width: 17px; height: 17px; color: var(--area); }

.olt-dplay { position: relative; z-index: 3; margin-top: calc(-1 * clamp(110px, 10vw, 140px)); }
.olt-dplay .hom-wrap { max-width: 1320px; }
.olt-dplay .olt-deck {
    margin: 0; border: 0; border-radius: 26px; overflow: clip;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 60px 120px -50px rgba(7, 14, 26, .95), 0 30px 60px -30px color-mix(in srgb, var(--area) 45%, transparent);
    scroll-margin-top: calc(var(--hp-bar-h, 62px) + var(--hp-bar-gap, 12px) * 2 + 10px);
}
/* Панель — непрозрачная: текст слайда не просвечивает сквозь неё */
.olt-dplay .olt-bar { background: #0D1627; padding: .8rem 1.2rem; gap: .5rem; }
.olt-dplay .olt-bar__title { font-size: .9rem; }
.olt-dplay .olt-btn { height: 36px; border-radius: 10px; }

/* Сцена: высота не прыгает от слайда к слайду */
.olt-dplay .olt-stage { min-height: min(74vh, 760px); background: radial-gradient(900px 420px at 100% 0%, color-mix(in srgb, var(--area) 9%, transparent), transparent 70%); }
.olt-dplay .olt-slide { padding: 2.6rem clamp(1.6rem, 3.4vw, 3.4rem) 3rem; }
.olt-dplay .olt-slide h2 { font-size: clamp(1.45rem, 2.2vw, 1.9rem); letter-spacing: -.025em; }
.olt-dplay .olt-slide p, .olt-dplay .olt-slide li { font-size: 1rem; line-height: 1.7; }
.olt-dplay .olt-toc { top: calc(var(--hp-bar-h, 62px) + var(--hp-bar-gap, 12px) * 2 + 62px); max-height: calc(100vh - 170px); padding: 1.1rem .7rem; background: rgba(255, 255, 255, .015); }
.olt-toc__h { padding: 0 .55rem .6rem; font: 800 .66rem/1 var(--olt-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--olt-muted); }
.olt-dplay .olt-toc a { font-size: .82rem; padding: .5rem .6rem; }

/* Таблицы в колонке не режутся: текст переносится */
.olt-dplay .olt-table table { min-width: 0; }
.olt-dplay .olt-table td, .olt-dplay .olt-table th { white-space: normal; }

/* Навигация под слайдом: назад · счётчик · «Далее: название следующего» */
.olt-dnav {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem;
    padding: 1rem 1.2rem; border-top: 1px solid var(--olt-line); background: #0D1627;
}
.olt-dnav button { font: inherit; cursor: pointer; border: 0; transition: transform .18s ease, background .18s ease, filter .18s ease, opacity .18s ease; }
.olt-dnav button:disabled { opacity: .35; pointer-events: none; }
.olt-dnav__prev {
    display: inline-flex; align-items: center; gap: .5rem; height: 48px; padding: 0 1.1rem; border-radius: 14px;
    color: #E8EEF7; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); font-weight: 700; font-size: .92rem;
}
.olt-dnav__prev:hover { background: rgba(255, 255, 255, .11); }
.olt-dnav__count { justify-self: center; font: 600 .86rem var(--olt-mono); color: var(--olt-muted); }
.olt-dnav__count b { color: var(--area); }
.olt-dnav__next {
    display: inline-flex; align-items: center; gap: .9rem; min-height: 48px; max-width: 420px; padding: .5rem .8rem .5rem 1.2rem; border-radius: 14px; text-align: left;
    color: #0B1220; background: var(--area); box-shadow: 0 16px 30px -16px var(--area);
}
.olt-dnav__next:hover { transform: translateY(-2px); filter: brightness(1.06); }
.olt-dnav__next small { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.olt-dnav__next b { display: block; font-size: .92rem; font-weight: 800; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.olt-dnav svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.olt-dplay .olt-keys { background: #0B1220; }

/* Отмеченная карточка «вы здесь» в списке конспектов */
.ln-deck--here { box-shadow: 0 0 0 2px var(--c), var(--h-sh); }
.ln-deck__n.ln-sym { font-size: 16px; }

/* Во весь экран: панель сверху, прокрутка внутри сцены */
.olt-dplay .olt-deck:fullscreen { border-radius: 0; overflow: auto; }
.olt-dplay .olt-deck:fullscreen .olt-bar { top: 0; }
.olt-dplay .olt-deck:fullscreen .olt-toc { top: 62px; }
.olt-dplay .olt-deck:fullscreen .olt-stage { min-height: calc(100vh - 150px); }

@media (max-width: 1100px) {
    .olt-dplay .olt-stage { min-height: 0; }
}
@media (max-width: 720px) {
    .olt-dplay { margin-top: calc(-1 * 90px); }
    .olt-dhero { padding-bottom: 130px; }
    .olt-dplay .hom-wrap { padding: 0 10px; }
    .olt-dplay .olt-deck { border-radius: 20px; }
    .olt-dplay .olt-slide { padding: 1.6rem 1.1rem 2rem; }
    .olt-dplay .olt-table table { min-width: 460px; }
    .olt-dplay .olt-bar .olt-btn span { display: none; }
    .olt-dnav { grid-template-columns: auto 1fr; }
    .olt-dnav__count { display: none; }
    .olt-dnav__next { justify-self: end; max-width: 100%; }
    .olt-dnav__next b { max-width: 180px; }
    .olt-dmeta li { font-size: 12.5px; padding: 6px 11px 6px 8px; }
}
@media print {
    .olt-dhero, .olt-dnav, .hom-foot, .hom-sec, .hom-final, .hom-skip { display: none !important; }
    .hom-body { background: #fff !important; }
    .olt-dplay { margin: 0 !important; }
    .olt-dplay .olt-deck { box-shadow: none !important; border-radius: 0 !important; }
}