/* Лекция 4. Современный CSS — надстройка над темой ribbon-3 */
/* База общая с лекциями 1–3; ниже, после разделителя, — только то, что нужно этой лекции. */

.shower {
    --accent: #4b86c2;
    --accent-dark: #33648f;
    --warn: #d68910;
    --bad: #c0392b;
    --good: #27884a;
    --ink: #1a1a1a;
    --dim: #7a7c80;
    --line-soft: #e3e5e9;

    /* Тема задаёт эти шрифты напрямую, без переменных, — заводим свои,
       чтобы не дублировать стек в каждом блоке ниже. */
    --font-mono: 'PT Mono', monospace;
    --font-sans: 'PT Sans', sans-serif;
}

/* ---------- Титул и разделители частей ---------- */

.slide.title {
    background: linear-gradient(135deg, #f7f9fc, #e8eef6);
}

.slide.title h2 {
    color: var(--accent-dark);
}

.slide.part {
    background: linear-gradient(135deg, var(--accent-dark), var(--accent));
}

.slide.part .shout,
.slide.part h2 {
    color: #fff;
}

.slide.part .shout small {
    display: block;
    margin-bottom: 0.1em;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.34em;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.slide.part .mins {
    position: absolute;
    right: 60px;
    bottom: 40px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 22px;
}

/* ---------- Крупный год для исторических слайдов ---------- */

.slide .year {
    position: absolute;
    top: 46px;
    left: var(--slide-side);
    color: var(--accent);
    font-size: 130px;
    font-weight: bold;
    line-height: 1;
    letter-spacing: -0.02em;
    opacity: 0.16;
}

.slide.has-year {
    padding-top: 150px;
}

.slide.has-year h2 {
    position: relative;
}

/* ---------- Карточки ---------- */

.cards {
    display: grid;
    grid-template-columns: repeat(var(--n, 3), 1fr);
    gap: 22px;
    margin-top: 26px;
}

.card {
    padding: 20px 22px;
    border-radius: 12px;
    background: #f4f7fa;
    border-left: 6px solid var(--accent);
    font-size: 24px;
    line-height: 1.35;
}

.card b {
    display: block;
    margin-bottom: 6px;
    color: var(--accent-dark);
}

.card i {
    display: block;
    margin-bottom: 10px;
    font-size: 40px;
    font-style: normal;
    line-height: 1;
}

.card.bad { border-left-color: var(--bad); background: #fbf4f4; }
.card.bad b { color: var(--bad); }

.card.good { border-left-color: var(--good); background: #f2f9f5; }
.card.good b { color: var(--good); }

/* ---------- Две колонки: было / стало, плохо / хорошо ---------- */

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-top: 20px;
    align-items: start;
}

.split > div > h3 {
    margin: 0 0 10px;
    font-size: 26px;
    font-weight: normal;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.split .no h3 { color: var(--bad); }
.split .yes h3 { color: var(--good); }

.split pre { margin: 0; }

/* ---------- Определение термина ---------- */

.term {
    margin-top: 30px;
    padding: 24px 30px;
    border-radius: 12px;
    background: #f4f7fa;
    border-left: 8px solid var(--accent);
    font-size: 30px;
    line-height: 1.35;
}

.term b { color: var(--accent-dark); }

/* ---------- Мем «Drake»: одно отвергаем, другое одобряем ---------- */

.drake {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 0 24px;
    margin-top: 18px;
    font-size: 28px;
}

.drake > div {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 18px 24px;
}

.drake .face {
    justify-content: center;
    font-size: 76px;
    line-height: 1;
}

.drake .nope { background: #fbf4f4; border-radius: 12px 12px 0 0; }
.drake .yep  { background: #f2f9f5; border-radius: 0 0 12px 12px; }

.drake .nope + div { background: #fbf4f4; border-radius: 0 12px 0 0; }
.drake .yep  + div { background: #f2f9f5; border-radius: 0 0 12px 0; }

.drake code { font-size: 0.92em; }

/* ---------- Викторина ---------- */

.quiz {
    margin-top: 14px;
    padding: 22px 28px;
    border-radius: 12px;
    background: #fffbf0;
    border: 3px solid #f0d9a8;
}

.quiz pre { margin: 0; }

.answer {
    margin-top: 22px;
    padding: 18px 26px;
    border-radius: 12px;
    background: #f2f9f5;
    border-left: 8px solid var(--good);
    font-size: 26px;
    line-height: 1.35;
}

.answer b { color: var(--good); }

/* ---------- Слайд с обращением к залу ---------- */

.slide.ask {
    background: linear-gradient(135deg, #fffaf0, #fdf1d9);
}

.slide.ask .shout {
    color: #a06a10;
}

.slide.ask .hint {
    position: absolute;
    bottom: 52px;
    left: 0;
    width: 100%;
    color: #b58c48;
    font-size: 24px;
    text-align: center;
}

/* ---------- Рамка вокруг демо ---------- */

.frame {
    border: 3px solid var(--line-soft);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

/* ---------- Мелочи ---------- */

.slide .lead {
    font-size: 30px;
    line-height: 1.4;
}

.slide .muted { color: var(--dim); }

.slide .hl {
    padding: 0 8px;
    border-radius: 4px;
    background: #fdf3d0;
}

.slide s {
    position: relative;
    color: #aaa;
    text-decoration: none;
}

.slide s::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -1%;
    width: 102%;
    height: 0.08em;
    background-color: var(--bad);
    transform: rotate(-2deg);
}

.slide .shout code {
    padding-top: 0.03em;
    padding-bottom: 0.03em;
    font-size: 0.92em;
}

.slide .shout small {
    display: block;
    /* em считается от размера самой подписи, а не заголовка */
    margin-top: 0.9em;
    color: var(--dim);
    font-size: 0.24em;
    line-height: 1.3;
    letter-spacing: 0.04em;
}

.slide pre code {
    font-size: 0.88em;
    line-height: 1.45;
}

.slide .big-list {
    font-size: 32px;
    line-height: 1.7;
}

/* Лента лет внизу слайда */

.tl {
    position: absolute;
    bottom: 34px;
    left: var(--slide-side);
    display: flex;
    gap: 0;
    align-items: center;
    width: calc(100% - var(--slide-side) * 2);
    font-size: 17px;
    color: #b9bec4;
}

.tl span {
    flex: 1;
    padding-top: 12px;
    border-top: 3px solid #e6e9ed;
    text-align: center;
}

.tl span.on {
    border-top-color: var(--accent);
    color: var(--accent);
    font-weight: bold;
}

/* Финальные контакты */

.slide.contacts {
    background: linear-gradient(135deg, var(--accent-dark), var(--accent));
    color: #fff;
}

.slide.contacts h2,
.slide.contacts a { color: #fff; }

.slide.contacts .lead { color: rgba(255, 255, 255, 0.85); }

/* Номер слайда — в правый край, поверх светлого фона */

.slide::after {
    color: #fff;
}

/* Прячем курсор в полноэкранном режиме через JS-класс */

.shower.full.idle { cursor: none; }

/* Плотная сетка карточек — когда их много (например, типы input) */

.cards.dense {
    gap: 16px;
    margin-top: 18px;
}

.cards.dense .card {
    padding: 13px 20px;
    font-size: 22px;
}

/* ---------- Геометрия блоков кода ----------
   Тема ribbon-3 вытаскивает pre code за поля слайда
   (margin-left: -100px + padding-left: 100px), но highlight.js
   перебивает padding своим `pre code.hljs { padding: 1em }`.
   Отрицательный margin остаётся — и код уезжает влево за край,
   а внутри колонок .split разъезжается совсем.
   Отключаем трюк: код выравниваем по своему контейнеру. */

.slide pre code,
.slide pre code.hljs {
    margin-left: 0;
    padding: 0;
    width: auto;
    overflow: visible;
}

/* ---------- QR-ссылка на слайде ---------- */

.slide .qr {
    display: block;
    width: 150px;
    background-image: none; /* тема подчёркивает ссылки градиентом — здесь не нужно */
    color: var(--dim);
    text-align: center;
    text-decoration: none;
    font-size: 17px;
    line-height: 1.25;
}

.slide .qr img {
    display: block;
    width: 130px;
    height: 130px;
    margin: 0 auto 8px;
}

.slide .qr b {
    display: block;
    color: var(--accent-dark);
    font-weight: normal;
}


/* =====================================================================
   Ниже — только для лекции 4
   ===================================================================== */

/* ---------- Живой пример прямо на слайде ----------
   Как в лекции 3, но здесь примеры ещё и двигаются: на слайде нельзя
   показать анимацию скриншотом. */

.live {
    margin-top: 16px;
    padding: 14px;
    border: 3px dashed #cfd6de;
    border-radius: 12px;
    background: #fbfcfd;
}

.live > .b {
    padding: 14px 18px;
    border-radius: 8px;
    background: #dce9f6;
    border: 2px solid var(--accent);
    color: var(--accent-dark);
    font-family: var(--font-mono, monospace);
    font-size: 20px;
}

.live > .b.alt { background: #f7e7d7; border-color: #d68910; color: #8a5a0b; }
.live > .b.dim { background: #eef0f3; border-color: #c4cad1; color: #6d747b; }

.live .cap {
    margin: 12px 0 0;
    color: var(--dim);
    font-size: 19px;
    text-align: center;
}

/* ---------- Сквозная линия: карточка курса ----------
   Плашка из пяти точек копится в углу слайда: каждая часть лекции
   добавляет карточке одно умение. Мелкая и без анонса, как счётчик
   «центрируем div» в лекции 3. */

.slide .kit {
    position: absolute;
    right: 26px;
    bottom: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    border-radius: 20px;
    background: #f1f5f9;
    color: #9aa2ab;
    font-size: 16px;
    letter-spacing: 0.02em;
}

.slide .kit span { margin-right: 4px; }

.slide .kit i {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #d5dbe2;
}

.slide .kit.k1 i:nth-of-type(-n + 1),
.slide .kit.k2 i:nth-of-type(-n + 2),
.slide .kit.k3 i:nth-of-type(-n + 3),
.slide .kit.k4 i:nth-of-type(-n + 4),
.slide .kit.k5 i {
    background: var(--accent);
}

/* последняя, пятая — загорается */
.slide .kit.k5 {
    background: #eaf3ea;
    color: var(--good);
}

.slide .kit.k5 i { background: var(--good); }

/* Последний абзац на слайде с плашкой не доезжает до неё */
.slide:has(.kit) > p:last-of-type {
    max-width: 640px;
}

/* ---------- Намёк на пасхалку с главной ---------- */

.slide .egg {
    position: absolute;
    bottom: 16px;
    left: var(--slide-side);
    margin: 0;
    color: #a3a9b0;
    font-size: 17px;
}

.slide .egg code { font-size: 0.95em; }

/* ---------- Карточка курса — компонент сквозной линии ----------
   Настоящий компонент на переменных и с контейнерным запросом:
   на слайдах он показывает ровно то, о чём рассказывает. */

.ccard {
    --accent-c: var(--accent);
    --pad: 16px;
    --r: 12px;

    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    border: 2px solid color-mix(in srgb, var(--accent-c) 35%, #fff);
    border-radius: var(--r);
    background: #fff;
    font-size: 19px;
    line-height: 1.3;
}

.ccard .pic {
    display: grid;
    place-items: center;
    min-height: 74px;
    background: color-mix(in srgb, var(--accent-c) 18%, #fff);
    font-size: 36px;
}

.ccard .body { padding: var(--pad); }

.ccard .body b {
    display: block;
    margin-bottom: 2px;
    color: var(--accent-c);
    font-size: 15px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ccards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    align-items: start;
}

/* шаг 2: карточка смотрит на ширину своего контейнера, а не окна */
.cq { container-type: inline-size; }

@container (min-width: 380px) {
    .ccard.adapt {
        grid-template-rows: none;
        grid-template-columns: 110px 1fr;
    }
}

/* шаги 3 и 4: приподнимается при наведении — плавно */
.ccard.lift {
    transition: translate 0.25s ease-out, box-shadow 0.25s ease-out;
}

.ccard.lift:hover {
    translate: 0 -10px;
    box-shadow: 0 16px 32px rgba(30, 60, 100, 0.28);
}

.ccard.jump:hover {
    translate: 0 -10px;
    box-shadow: 0 16px 32px rgba(30, 60, 100, 0.28);
}

/* шаг 5: скелетон, пока карточка «грузится» */
.ccard.loading .pic,
.ccard.loading .body b,
.ccard.loading .body span {
    color: transparent;
    background: linear-gradient(90deg, #eceff3 25%, #f7f8fa 50%, #eceff3 75%);
    background-size: 300% 100%;
    border-radius: 6px;
}

.ccard.loading .body span { display: block; height: 1.2em; }

@media (prefers-reduced-motion: no-preference) {
    .ccard.loading .pic,
    .ccard.loading .body b,
    .ccard.loading .body span {
        animation: shimmer 1.4s linear infinite;
    }
}

@keyframes shimmer {
    from { background-position: 100% 0; }
    to   { background-position: 0 0; }
}

/* ---------- Кнопки: с переходом и без ---------- */

.btns {
    display: flex;
    gap: 26px;
    justify-content: center;
}

.btns button {
    padding: 14px 30px;
    border: 0;
    border-radius: 10px;
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-size: 22px;
    cursor: pointer;
}

.btns button:hover { background: var(--bad); }

.btns button.smooth { transition: background-color 0.3s ease-out; }

.btns button.half:hover {
    transition: background-color 0.6s ease-out;
}

.btns small {
    display: block;
    margin-top: 8px;
    color: var(--dim);
    font-size: 17px;
    text-align: center;
}

/* ---------- Четыре функции transform ---------- */

.tfs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.tfs figure {
    margin: 0;
    padding: 20px 10px 12px;
    border-radius: 12px;
    background: #fbfcfd;
    border: 2px solid var(--line-soft);
    text-align: center;
}

.tfs .sq {
    position: relative;
    width: 70px;
    height: 70px;
    margin: 14px auto 20px;
}

/* призрак — где элемент стоит в потоке на самом деле */
.tfs .sq::before,
.tfs .sq i {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 8px;
}

.tfs .sq::before { border: 2px dashed #c4cad1; }

.tfs .sq i {
    background: #dce9f6;
    border: 2px solid var(--accent);
    opacity: 0.92;
}

.tfs figcaption {
    font-family: var(--font-mono, monospace);
    font-size: 16px;
    color: var(--accent-dark);
}

/* Порядок функций: два одинаковых набора, разный результат */

.order {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 16px;
}

.order figure {
    position: relative;
    height: 200px;
    margin: 0;
    border-radius: 12px;
    background: #fbfcfd;
    border: 2px solid var(--line-soft);
    overflow: hidden;
}

.order figcaption {
    position: absolute;
    top: 10px;
    left: 14px;
    font-family: var(--font-mono, monospace);
    font-size: 16px;
    color: var(--accent-dark);
}

.order .sq,
.order .ghost {
    position: absolute;
    top: 80px;
    left: 40px;
    width: 60px;
    height: 60px;
    border-radius: 8px;
}

.order .ghost { border: 2px dashed #c4cad1; }

.order .sq {
    background: #dce9f6;
    border: 2px solid var(--accent);
}

.order .sq.alt { background: #f7e7d7; border-color: var(--warn); }

/* Карточка-перевёртыш: 3D одним слайдом */

.flip {
    width: 260px;
    height: 150px;
    margin: 18px auto 0;
    perspective: 800px;
}

.flip .in {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.7s ease-in-out;
}

.flip:hover .in { transform: rotateY(180deg); }

.flip .face {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 14px;
    backface-visibility: hidden;
    font-size: 24px;
}

.flip .front { background: #dce9f6; border: 3px solid var(--accent); color: var(--accent-dark); }

.flip .back {
    background: #f7e7d7;
    border: 3px solid var(--warn);
    color: #8a5a0b;
    transform: rotateY(180deg);
}

/* ---------- Функции времени: маленькие графики ---------- */

.curves {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-top: 18px;
}

.curves figure {
    margin: 0;
    padding: 10px 10px 8px;
    border-radius: 12px;
    background: #f4f7fa;
    text-align: center;
}

.curves svg { display: block; width: 100%; height: auto; }

.curves path.c { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; }
.curves path.ax { fill: none; stroke: #c4cad1; stroke-width: 2; }

.curves figcaption {
    margin-top: 4px;
    font-family: var(--font-mono, monospace);
    font-size: 15px;
    color: var(--accent-dark);
}

.curves figure span {
    display: block;
    color: var(--dim);
    font-size: 15px;
    line-height: 1.25;
}

/* ---------- Конвейер отрисовки ---------- */

.pipe {
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin-top: 20px;
}

.pipe > div {
    flex: 1;
    padding: 16px 12px;
    border-radius: 12px;
    background: #fbf4f4;
    border-bottom: 6px solid var(--bad);
    font-size: 21px;
    line-height: 1.3;
    text-align: center;
}

.pipe > div b {
    display: block;
    margin-bottom: 4px;
    color: var(--bad);
}

.pipe > div.off {
    background: #f4f5f7;
    border-bottom-color: #d5dbe2;
    color: #b0b6bd;
}

.pipe > div.off b { color: #b0b6bd; }

.pipe > div.gpu {
    background: #f2f9f5;
    border-bottom-color: var(--good);
}

.pipe > div.gpu b { color: var(--good); }

.pipe > i {
    align-self: center;
    color: #c4cad1;
    font-size: 28px;
    font-style: normal;
}

.pipe-label {
    margin: 18px 0 0;
    font-family: var(--font-mono, monospace);
    font-size: 20px;
    color: var(--dim);
}

/* ---------- Живые анимации: спиннер, эфир, скелетон ---------- */

.anims {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 18px;
}

.anims > div {
    display: grid;
    place-items: center;
    height: 120px;
    border-radius: 12px;
    background: #fbfcfd;
    border: 2px solid var(--line-soft);
}

.anims > p {
    margin: 0;
    color: var(--dim);
    font-family: var(--font-mono, monospace);
    font-size: 16px;
    text-align: center;
}

.spinner {
    width: 54px;
    height: 54px;
    border: 6px solid #dce9f6;
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}

@keyframes spin {
    to { rotate: 1turn; }
}

.onair {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--bad);
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 0.08em;
}

.onair i {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bad);
    animation: breathe 1s ease-in-out infinite alternate;
}

@keyframes breathe {
    from { opacity: 1; scale: 1; }
    to   { opacity: 0.3; scale: 0.7; }
}

.skeleton {
    display: grid;
    gap: 10px;
    width: 78%;
}

.skeleton i {
    height: 16px;
    border-radius: 6px;
    background: linear-gradient(90deg, #eceff3 25%, #f7f8fa 50%, #eceff3 75%);
    background-size: 300% 100%;
    animation: shimmer 1.4s linear infinite;
}

.skeleton i:nth-child(2) { width: 80%; }
.skeleton i:nth-child(3) { width: 55%; }

/* Лесенка появления: одно правило, задержка от --i */

.stair {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 18px;
}

.stair i {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    background: #dce9f6;
    border: 2px solid var(--accent);
    animation: rise 2.4s ease-out infinite;
    animation-delay: calc(var(--i) * 120ms);
}

@keyframes rise {
    0%        { opacity: 0; translate: 0 30px; }
    25%, 75%  { opacity: 1; translate: 0 0; }
    100%      { opacity: 0; translate: 0 0; }
}

/* Всё движение на слайдах уважает системную настройку.
   Лекция про prefers-reduced-motion обязана это делать сама. */
@media (prefers-reduced-motion: reduce) {
    .spinner,
    .onair i,
    .skeleton i,
    .stair i {
        animation-duration: 3s;
        animation-iteration-count: 1;
    }
}

/* ---------- Медиазапросы: линейка ширин ---------- */

.bps {
    position: relative;
    height: 96px;
    margin-top: 24px;
}

.bps .line {
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, #dce9f6 0 30%, #bcd4ec 30% 62%, #93b8de 62%);
}

.bps span {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    color: var(--accent-dark);
    font-family: var(--font-mono, monospace);
    font-size: 17px;
    white-space: nowrap;
}

.bps span::after {
    content: '';
    position: absolute;
    top: 30px;
    left: 50%;
    width: 3px;
    height: 26px;
    background: var(--accent-dark);
}

.bps em {
    position: absolute;
    top: 62px;
    transform: translateX(-50%);
    color: var(--dim);
    font-size: 18px;
    font-style: normal;
    white-space: nowrap;
}

/* ---------- Мини-макет: телефон против ноутбука ---------- */

.devices {
    display: flex;
    gap: 34px;
    align-items: flex-end;
    justify-content: center;
    margin-top: 20px;
}

.devices figure { margin: 0; text-align: center; }

.devices .scr {
    display: grid;
    gap: 6px;
    padding: 10px;
    border: 4px solid #3a3f47;
    border-radius: 14px;
    background: #fff;
}

.devices .scr i {
    display: block;
    border-radius: 4px;
    background: #dce9f6;
    min-height: 16px;
}

.devices .scr i.h { background: #93b8de; }

.devices .phone .scr { width: 110px; height: 200px; grid-template-rows: 20px repeat(3, 1fr); }
.devices .tablet .scr { width: 220px; height: 170px; grid-template-columns: 1fr 1fr; grid-template-rows: 20px 1fr 1fr; }
.devices .tablet .scr i.h { grid-column: 1 / -1; }
.devices .laptop .scr {
    width: 320px;
    height: 180px;
    grid-template-columns: 70px 1fr 1fr 1fr;
    grid-template-rows: 20px 1fr;
}
.devices .laptop .scr i.h { grid-column: 1 / -1; }
.devices .laptop .scr i.s { background: #f7e7d7; }

.devices figcaption {
    margin-top: 8px;
    color: var(--dim);
    font-family: var(--font-mono, monospace);
    font-size: 16px;
}

/* ---------- Контейнер против окна ---------- */

.cq-demo {
    display: grid;
    grid-template-columns: 1fr 2.4fr;
    gap: 16px;
    margin-top: 16px;
    padding: 14px;
    border: 3px dashed #cfd6de;
    border-radius: 12px;
    background: #fbfcfd;
}

.cq-demo > div > p {
    margin: 0 0 6px;
    color: var(--dim);
    font-family: var(--font-mono, monospace);
    font-size: 15px;
}

/* ---------- Тёмная тема на переменных — живой пример ---------- */

.themes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 16px;
}

.themes > div {
    --bg: #ffffff;
    --text: #1a1a1a;
    --muted: #6d747b;
    --card: #f4f7fa;
    --link: #2f6fb0;

    padding: 18px 22px;
    border: 2px solid var(--line-soft);
    border-radius: 12px;
    background: var(--bg);
    color: var(--text);
    font-size: 20px;
    line-height: 1.4;
}

.themes > div.dark {
    --bg: #16181d;
    --text: #e6e8eb;
    --muted: #9aa2ab;
    --card: #23262d;
    --link: #8ab8ea;
}

.themes b { display: block; margin-bottom: 6px; font-size: 22px; }
.themes span { color: var(--muted); }
.themes u { color: var(--link); text-decoration: none; }

.themes i {
    display: block;
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--card);
    font-style: normal;
    font-size: 17px;
}

/* ---------- Резиновая типографика: три размера одного заголовка ---------- */

.fluid {
    display: flex;
    gap: 14px;
    align-items: flex-end;
    margin-top: 18px;
}

.fluid > div {
    flex: 1;
    padding: 12px 14px;
    border-radius: 12px;
    background: #f4f7fa;
    text-align: center;
}

.fluid b {
    display: block;
    color: var(--accent-dark);
    line-height: 1.1;
}

.fluid span {
    display: block;
    margin-top: 6px;
    color: var(--dim);
    font-family: var(--font-mono, monospace);
    font-size: 15px;
}

/* ---------- Эпохи: лента лет ---------- */

.eras {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 26px;
}

.eras > div {
    padding: 16px 18px;
    border-radius: 12px;
    background: #f4f7fa;
    border-bottom: 6px solid #c4cad1;
    font-size: 21px;
    line-height: 1.35;
}

.eras b {
    display: block;
    margin-bottom: 6px;
    color: var(--dim);
    font-size: 17px;
    letter-spacing: 0.05em;
}

.eras > div.now {
    background: #f2f9f5;
    border-bottom-color: var(--good);
}

.eras > div.now b { color: var(--good); }

/* ---------- Плотность под 130 слайдов ----------
   Как в лекции 3: единая подтяжка кеглей, чтобы контент помещался
   в 1024×576, а не уезжал за нижний край. */

.slide .lead {
    font-size: 29px;
    line-height: 1.38;
}

.slide .big-list {
    font-size: 30px;
    line-height: 1.55;
}

.slide pre code,
.slide pre code.hljs {
    line-height: 1.4;
}

.cards {
    gap: 18px;
    margin-top: 22px;
}

.card {
    padding: 17px 20px;
    font-size: 23px;
}

.card i {
    margin-bottom: 8px;
    font-size: 36px;
}

.term {
    margin-top: 26px;
    padding: 20px 26px;
    font-size: 28px;
}

.split { gap: 24px; }

.answer {
    margin-top: 18px;
    padding: 16px 22px;
    font-size: 25px;
}

.quiz { padding: 18px 24px; }

.slide.part .shout {
    font-size: 78px;
    line-height: 1.12;
}

.slide.part .shout code { font-size: 0.78em; }

/* Имена свойств в заголовках не рвутся пополам */
.slide h2 code {
    font-size: 0.76em;
    white-space: nowrap;
}

/* Подпись под крупной мыслью. В теме она 0.24em — при заголовке
   в 58–60px это 14px, с задней парты не прочитать. */
.slide:not(.title):not(.part) .shout small {
    font-size: 0.36em;
}

/* =====================================================================
   Мемы лекции 4 — как и в прошлых лекциях, живой вёрсткой, а не картинкой
   ===================================================================== */

/* ---------- Ожидание и реальность: ЛР на телефоне ---------- */

.reality {
    display: flex;
    gap: 70px;
    justify-content: center;
    margin-top: 14px;
}

.reality figure { margin: 0; text-align: center; }

.reality figcaption {
    margin-top: 8px;
    color: var(--dim);
    font-size: 19px;
}

.reality .phone {
    position: relative;
    width: 170px;
    height: 300px;
    padding: 14px 8px;
    overflow: hidden;
    border: 6px solid #2a2e35;
    border-radius: 26px;
    background: #fff;
}

.reality .pg { text-align: left; }

.reality .bar {
    display: block;
    padding: 6px 8px;
    background: var(--accent-dark);
    color: #fff;
    font-size: 15px;
    white-space: nowrap;
}

.reality .ok h4 { margin: 12px 4px 4px; font-size: 26px; }
.reality .ok p { margin: 0 4px 12px; font-size: 16px; line-height: 1.35; }

.reality .btn {
    display: inline-block;
    margin-left: 4px;
    padding: 6px 12px;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    font-size: 15px;
}

/* «компьютерная» страница на 980px, уменьшенная целиком; её исходная
   высота в раскладке не должна распирать телефон */
.reality .bad { height: 100%; overflow: hidden; }

/* «компьютерная» страница на 980px, уменьшенная целиком */
.reality .bad .desk {
    width: 560px;
    transform: scale(0.29);
    transform-origin: 0 0;
}

.reality .bad .bar { font-size: 22px; }
.reality .bad .cols3 { display: flex; gap: 12px; margin: 14px 0; }
.reality .bad .cols3 i { flex: 1; height: 160px; background: #dce9f6; }
.reality .bad p { margin: 0; font-size: 18px; }

.reality .hscroll {
    position: absolute;
    left: 10px;
    right: 60px;
    bottom: 6px;
    height: 5px;
    border-radius: 3px;
    background: #b8bec6;
}

/* ---------- Кружка из лекции 2: сломанная и починенная ---------- */

.mugs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 16px;
}

.mugs figure { margin: 0; }

.mugs figcaption {
    margin-top: 10px;
    color: var(--dim);
    font-size: 18px;
}

/* Как в лекции 2, текст ДОЛЖЕН торчать за рамку — overflow сознательно нет.
   AWESOME при 66px ≈ 300px, а кружка — 200px. */
.awesome {
    width: 200px;
    padding: 10px 14px;
    border: 5px solid var(--ink);
    font-size: 66px;
    font-weight: bold;
    line-height: 1;
    text-transform: uppercase;
}

/* шрифт в процентах от ширины самой кружки — теперь влезает в любую */
.awesome.fixed { container-type: inline-size; }

.awesome.fixed span {
    display: block;
    font-size: 21cqi;
}

/* ---------- Ретро-уголок: 1995 ---------- */

.retro {
    margin-top: 12px;
    padding: 12px 16px;
    border: 3px ridge #c0c0c0;
    background: #fffff0;
    color: #000080;
    font-family: 'Times New Roman', Times, serif;
    font-size: 22px;
}

.retro .uc {
    padding: 6px;
    background: repeating-linear-gradient(-45deg, #ffd400 0 16px, #1a1a1a 16px 32px);
    background-size: 45px 45px;
    color: #fff;
    font-family: Impact, 'Arial Black', sans-serif;
    font-size: 24px;
    letter-spacing: 0.06em;
    text-align: center;
    text-shadow: 2px 2px 0 #000;
    animation: stripes 1s linear infinite;
}

@keyframes stripes {
    to { background-position: 45px 0; }
}

.retro .marq {
    margin: 10px 0 6px;
    overflow: hidden;
    white-space: nowrap;
    color: #c00000;
    font-weight: bold;
}

.retro .marq span {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 9s linear infinite;
}

@keyframes marquee {
    to { translate: -100% 0; }
}

.retro p { margin: 0; }
.retro u { color: #0000ee; }

.retro .blinker {
    color: #ff0000;
    font-weight: bold;
    animation: blink 1s steps(2, start) infinite;
}

@keyframes blink {
    to { visibility: hidden; }
}

/* ---------- Перебор: когда впервые узнал про @keyframes ---------- */

.party {
    display: grid;
    place-items: center;
    height: 330px;
    margin-top: 10px;
    border-radius: 16px;
    animation: disco 2s linear infinite;
}

@keyframes disco {
    0%   { background: #fde2e4; }
    25%  { background: #e2f0cb; }
    50%  { background: #cde4f7; }
    75%  { background: #fff1c1; }
    100% { background: #fde2e4; }
}

.party .pc {
    position: relative;
    width: 420px;
    padding: 24px 28px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    text-align: center;
    animation: swing 1.6s ease-in-out infinite alternate;
}

@keyframes swing {
    from { rotate: -4deg; }
    to   { rotate: 4deg; }
}

.party .wob {
    display: inline-block;
    color: var(--bad);
    letter-spacing: 0.1em;
    animation: shake-x 0.35s linear infinite;
}

@keyframes shake-x {
    0%, 100% { translate: 0 0; }
    25%      { translate: -4px 1px; }
    75%      { translate: 4px -1px; }
}

.party .spinme {
    position: absolute;
    top: -22px;
    right: -18px;
    font-size: 48px;
    animation: spin 1.2s linear infinite;
}

.party h4 { margin: 12px 0 16px; font-size: 38px; }

.party h4 i {
    display: inline-block;
    font-style: normal;
    animation: hop 0.9s ease-in-out infinite;
}

.party h4 i:nth-child(2n) { animation-delay: 0.15s; }
.party h4 i:nth-child(3n) { animation-delay: 0.3s; }

@keyframes hop {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -10px; }
}

.party .pulse-btn {
    display: inline-block;
    padding: 10px 26px;
    border-radius: 999px;
    background: var(--bad);
    color: #fff;
    font-weight: bold;
    animation: breathe 0.5s ease-in-out infinite alternate;
}

/* лекция про reduced motion и сама его соблюдает */
@media (prefers-reduced-motion: reduce) {
    .retro .uc,
    .retro .marq span,
    .retro .blinker,
    .party,
    .party *,
    .party .pc {
        animation: none;
    }
}

/* ---------- Mobile first против desktop first: два направления ----------
   Каждая строка — ось ширины окна, три диапазона. Тёмнее — больше правил
   поверх базы. Во втором ряду слои добавляются, в первом — отменяются. */

.dirs { margin-top: 12px; }

.dirs .lbl {
    margin: 10px 0 6px;
    font-size: 20px;
    font-weight: bold;
}

.dirs .lbl.no { color: var(--bad); }
.dirs .lbl.yes { color: var(--good); }

.dirs .row {
    display: grid;
    grid-template-columns: 28% 30% 42%;
    gap: 4px;
}

.dirs .row span {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 17px;
    line-height: 1.3;
    text-align: center;
}

.dirs .row b { font-family: var(--font-mono, monospace); font-weight: normal; }

.dirs .down span:nth-child(1) { background: #f1c9c3; }
.dirs .down span:nth-child(2) { background: #f7ddd9; }
.dirs .down span:nth-child(3) { background: #fbf0ee; }

.dirs .up span:nth-child(1) { background: #eef7f1; }
.dirs .up span:nth-child(2) { background: #d4ecdc; }
.dirs .up span:nth-child(3) { background: #b7dfc4; }

.dirs .ticks {
    position: relative;
    height: 20px;
    margin-top: 4px;
    color: var(--dim);
    font-family: var(--font-mono, monospace);
    font-size: 14px;
}

.dirs .ticks i { position: absolute; font-style: normal; }
.dirs .ticks i:nth-child(1) { left: 0; }
.dirs .ticks i:nth-child(2) { left: 28%; }
.dirs .ticks i:nth-child(3) { left: 58%; }
.dirs .ticks i:nth-child(4) { right: 0; }

/* Две колонки кода одной задачи — мельче обычного, иначе не влезут */
.twoways pre code,
.twoways pre code.hljs {
    font-size: 14px;
}