/* Занятие 2 · собственные компоненты колоды.
   Базовая система (сетка, карточки, таблицы, лайтбокс) остаётся в ../../styles.css.
   Здесь только формы, которых в дисциплине ещё не было. */

/* Карта темы: четыре станции занятия вместо линейного маршрута установки. */
.agenda{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:26px}
.agenda>div{position:relative;padding:18px 16px 16px;border:3px solid var(--line);background:var(--panel);box-shadow:5px 5px 0 var(--line)}
.agenda b{display:block;font:800 10px/1.3 var(--mono);color:var(--accent);letter-spacing:.08em}
.agenda strong{display:block;margin-top:10px;font-size:clamp(15px,1.4vw,21px);line-height:1.2}
.agenda p{margin:8px 0 0;color:var(--muted);font-size:13px;line-height:1.45}
.agenda span{position:absolute;right:12px;top:10px;font:800 11px/1 var(--mono);color:var(--hair)}

/* Слоёная модель машины. Возвращается трижды: как определение, как карта функций
   и как объяснение режимов процессора. data-live="stack" анимирует сборку снизу вверх. */
.stack{display:grid;gap:7px;margin-top:22px}
.stack__layer{position:relative;padding:13px 18px;border:3px solid var(--line);background:var(--panel);box-shadow:4px 4px 0 var(--line);opacity:0;transform:translateY(14px);transition:.45s ease}
.stack.is-live .stack__layer{opacity:1;transform:none}
.stack__layer b{display:block;font:800 10px/1.3 var(--mono);color:var(--accent)}
.stack__layer strong{display:block;margin-top:5px;font-size:clamp(14px,1.25vw,19px)}
.stack__layer p{margin:5px 0 0;color:var(--muted);font-size:13px;line-height:1.42}
.stack__layer--os{border-width:4px;background:color-mix(in srgb,var(--orange) 12%,#fff)}
.stack__layer--hw{background:#241F2F;border-color:#241F2F;color:#fff}
.stack__layer--hw p{color:rgba(255,255,255,.72)}
.stack__layer--hw b{color:#FFC6AE}
.stack__mark{position:absolute;right:14px;top:50%;transform:translateY(-50%);font:800 10px/1.3 var(--mono);color:var(--muted)}
.stack__layer--hw .stack__mark{color:rgba(255,255,255,.6)}

/* Счёт «что придётся написать самому»: строки накапливаются, внизу итог. */
.ledger{margin-top:22px;border:3px solid var(--line);background:var(--panel);box-shadow:6px 6px 0 var(--line)}
.ledger__row{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;padding:11px 18px;border-bottom:2px solid var(--hair);font-size:clamp(13px,1.05vw,16px)}
.ledger__row span{font:700 11px/1 var(--mono);color:var(--muted);white-space:nowrap}
.ledger__sum{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;padding:14px 18px;background:var(--line);color:#fff;font:800 12px/1.4 var(--mono)}
.ledger__sum b{font-size:clamp(13px,1.15vw,17px)}

/* Путь системного вызова. Точка идёт по четырём остановкам: программа — граница —
   ядро — устройство и обратно. Единственная форма в дисциплине, где виден переход режима. */
.syscall{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:26px}
.syscall__stop{padding:16px 14px;border:3px solid var(--line);background:var(--panel);box-shadow:4px 4px 0 var(--line)}
.syscall__stop b{display:block;font:800 10px/1.3 var(--mono);color:var(--accent)}
.syscall__stop strong{display:block;margin-top:8px;font-size:clamp(13px,1.2vw,18px)}
.syscall__stop p{margin:6px 0 0;color:var(--muted);font-size:12.5px;line-height:1.4}
.syscall__stop--user{border-color:var(--blue)}
.syscall__stop--kernel{background:#241F2F;border-color:#241F2F;color:#fff}
.syscall__stop--kernel p{color:rgba(255,255,255,.74)}
.syscall__stop--kernel b{color:#FFC6AE}
.syscall__rail{position:relative;grid-column:1/-1;height:8px;margin-top:4px;background:repeating-linear-gradient(90deg,var(--line) 0 12px,transparent 12px 22px)}
.syscall__dot{position:absolute;top:-9px;left:0;width:26px;height:26px;border:3px solid var(--line);border-radius:50%;background:var(--orange)}
.slide.is-active .syscall__dot{animation:syscall-run 5.2s linear infinite}
@keyframes syscall-run{0%{left:2%}22%{left:26%}25%{left:26%}50%{left:74%}55%{left:98%}75%{left:50%}100%{left:2%}}
.syscall__border{position:absolute;left:calc(50% - 2px);top:-8px;bottom:-8px;width:4px;background:var(--red)}
.syscall__border span{position:absolute;left:50%;top:-26px;transform:translateX(-50%);padding:3px 7px;background:var(--red);color:#fff;font:800 9px/1 var(--mono);white-space:nowrap}

/* Историческая карточка: проблема — что придумали — чем заплатили.
   Один и тот же трёхтактный разбор на всех экранах хроники. */
.era{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,.72fr);gap:20px;align-items:start;margin-top:18px}
.era__beats{display:grid;gap:9px}
.era__beat{padding:12px 15px;border-left:7px solid var(--hair);background:var(--panel);box-shadow:3px 3px 0 rgba(36,31,47,.16)}
.era__beat b{display:block;margin-bottom:4px;font:800 10px/1.3 var(--mono)}
.era__beat p{margin:0;font-size:clamp(12.5px,1.02vw,15.5px);line-height:1.45}
.era__beat--problem{border-left-color:var(--red)}.era__beat--problem b{color:var(--red)}
.era__beat--answer{border-left-color:var(--green)}.era__beat--answer b{color:var(--green)}
.era__beat--price{border-left-color:var(--amber)}.era__beat--price b{color:var(--amber)}
.era__shot{margin:0;border:3px solid var(--line);background:#fff;box-shadow:6px 6px 0 var(--line);overflow:hidden}
.era__shot img{display:block;width:100%;height:auto;max-height:38vh;object-fit:contain;background:#fff}
.era__stack{display:grid;gap:10px}
.era__stack .era__shot img{max-height:19vh}
.era__shot figcaption{padding:7px 11px;border-top:3px solid var(--line);color:var(--muted);font:700 9px/1.4 var(--mono)}
.era__year{display:inline-block;align-self:flex-start;margin-bottom:8px;padding:5px 10px;background:var(--line);color:#fff;font:800 11px/1 var(--mono)}

/* Цитата первоисточника с переводом рядом. */
.quote{display:grid;grid-template-columns:1.3fr .7fr;gap:18px;margin-top:22px;align-items:start}
.quote__ru{margin-top:14px}
.quote blockquote{margin:0;padding:20px;border:3px solid var(--line);background:#17131B;color:#F4F0F4;box-shadow:6px 6px 0 var(--orange);font:500 clamp(13px,1.15vw,17px)/1.6 var(--mono)}
.quote blockquote cite{display:block;margin-top:14px;color:#9C93A6;font:700 10px/1.4 var(--mono);font-style:normal}
.quote__ru{padding:20px;border:3px solid var(--line);background:var(--panel);box-shadow:6px 6px 0 var(--line);font-size:clamp(13px,1.1vw,17px);line-height:1.55}
.quote__ru b{color:var(--aubergine)}

/* Хронолента: засечки с годами, ширина полосы набегает при показе экрана. */
.timeline{position:relative;margin-top:30px;padding-top:34px}
.timeline__rail{position:relative;height:9px;background:var(--hair)}
.timeline__fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--orange);transition:width 1.5s ease}
.slide.is-active .timeline__fill{width:100%}
.timeline__marks{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;margin-top:16px}
.timeline__marks div{position:relative;padding-top:16px;font-size:12px;line-height:1.35}
.timeline__marks div::before{content:"";position:absolute;left:0;top:-22px;width:15px;height:15px;border:3px solid var(--line);background:var(--panel)}
.timeline__marks b{display:block;font:800 13px/1 var(--mono);color:var(--orange)}
.timeline__marks span{display:block;margin-top:6px;color:var(--muted)}

/* Демонстрация планировщика. Три процесса, одно процессорное ядро, кнопка запуска.
   Полосы заполняются в реальном времени, счётчик считает переключения контекста. */
.sched{margin-top:22px;border:3px solid var(--line);background:var(--panel);box-shadow:7px 7px 0 var(--line)}
.sched__head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:12px 16px;border-bottom:3px solid var(--line);background:var(--line);color:#fff;font:800 10px/1.3 var(--mono)}
.sched__head button{margin-left:auto;padding:8px 14px;border:3px solid #fff;background:var(--orange);color:#fff;font:800 10px/1 var(--mono);cursor:pointer}
.sched__head button:hover{transform:translate(2px,2px)}
.sched__body{display:grid;gap:9px;padding:16px}
.sched__lane{display:grid;grid-template-columns:150px 1fr 74px;gap:12px;align-items:center}
.sched__name{font:800 11px/1.3 var(--mono)}
.sched__name span{display:block;margin-top:3px;color:var(--muted);font-weight:600}
.sched__track{position:relative;height:30px;border:2px solid var(--line);background:repeating-linear-gradient(90deg,rgba(36,31,47,.07) 0 1px,transparent 1px 26px);overflow:hidden}
.sched__cell{position:absolute;top:0;bottom:0;background:var(--accent)}
.sched__cell--wait{background:repeating-linear-gradient(45deg,var(--hair) 0 5px,transparent 5px 10px)}
.sched__num{font:800 13px/1 var(--mono);text-align:right}
.sched__foot{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 16px 16px;color:var(--muted);font-size:12.5px;line-height:1.45}
.sched__foot b{display:block;font:800 20px/1.2 var(--mono);color:var(--ink)}

/* Состояния процесса: три узла и токен, который ходит между ними. */
.states{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:24px}
.states__node{position:relative;padding:18px;border:3px solid var(--line);background:var(--panel);box-shadow:5px 5px 0 var(--line);transition:.3s ease}
.states__node.is-hot{background:color-mix(in srgb,var(--orange) 16%,#fff);transform:translateY(-6px)}
.states__node b{display:block;font:800 10px/1.3 var(--mono);color:var(--accent)}
.states__node strong{display:block;margin-top:8px;font-size:clamp(15px,1.4vw,21px)}
.states__node p{margin:7px 0 0;color:var(--muted);font-size:12.5px;line-height:1.42}
.states__edges{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:12px}
.states__edges div{padding:10px 12px;border:2px dashed var(--line);font:700 10.5px/1.4 var(--mono);color:var(--muted)}

/* Полоса памяти: физические страницы и то, как их видит процесс. */
.memory{margin-top:22px}
.memory__label{display:flex;justify-content:space-between;font:800 10px/1.3 var(--mono);color:var(--muted)}
.memory__bar{display:flex;gap:3px;margin-top:8px;padding:8px;border:3px solid var(--line);background:var(--panel);box-shadow:5px 5px 0 var(--line)}
.memory__page{flex:1;height:44px;border:2px solid var(--line);background:var(--hair)}
.memory__page[data-owner="a"]{background:var(--orange)}
.memory__page[data-owner="b"]{background:var(--blue)}
.memory__page[data-owner="c"]{background:var(--green)}
.memory__page[data-owner="k"]{background:var(--line)}
.memory__legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;font:700 10.5px/1.4 var(--mono)}
.memory__legend i{display:inline-block;width:14px;height:14px;margin-right:6px;border:2px solid var(--line);vertical-align:-2px;font-style:normal}

/* Два дерева файловой системы рядом: Linux и Windows одним взглядом. */
.trees{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
.trees pre{margin:0;padding:16px;border:3px solid var(--line);background:var(--panel);box-shadow:5px 5px 0 var(--line);font:600 clamp(11px,.95vw,14px)/1.65 var(--mono);white-space:pre}
.trees h3{margin:0 0 8px;font:800 11px/1.3 var(--mono);color:var(--accent)}

/* Логотипы систем: карточка с картинкой и одной строкой сути. */
.logos{display:grid;gap:14px;margin-top:20px}
.logos--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.logos--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.logo-card{display:flex;flex-direction:column;padding:16px 14px;border:3px solid var(--line);background:var(--panel);box-shadow:5px 5px 0 var(--line)}
.logo-card img{width:auto;height:56px;margin:0 auto 12px;object-fit:contain}
.logo-card b{font:800 13px/1.2 var(--mono)}
.logo-card span{margin-top:6px;font:700 9.5px/1.3 var(--mono);color:var(--accent)}
.logo-card p{margin:9px 0 0;color:var(--muted);font-size:12.5px;line-height:1.45}

/* Три схемы ядра: что внутри защищённого режима, что вынесено наружу. */
.kernels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:22px}
.kernels>div{padding:16px;border:3px solid var(--line);background:var(--panel);box-shadow:5px 5px 0 var(--line)}
.kernels h3{margin:0;font:800 11px/1.3 var(--mono);color:var(--accent)}
.kernels strong{display:block;margin-top:7px;font-size:clamp(14px,1.3vw,19px)}
.kernels__box{margin-top:12px;padding:9px;border:3px solid var(--line);background:#241F2F;color:#fff;font:700 9.5px/1.5 var(--mono)}
.kernels__box i{display:block;font-style:normal;opacity:.75}
.kernels__out{margin-top:8px;padding:9px;border:2px dashed var(--line);font:700 9.5px/1.5 var(--mono);color:var(--muted)}
.kernels p{margin:10px 0 0;color:var(--muted);font-size:12.5px;line-height:1.45}

/* Конструктор паспорта ОС: студент выбирает признак, внизу собирается строка. */
.builder{margin-top:20px;border:3px solid var(--line);background:var(--panel);box-shadow:7px 7px 0 var(--line)}
.builder__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 14px;padding:14px}
.builder__axis b{display:block;margin-bottom:8px;font:800 10px/1.3 var(--mono);color:var(--accent)}
.builder__axis button{display:block;width:100%;margin-bottom:5px;padding:6px 10px;border:2px solid var(--line);background:#fff;color:var(--ink);text-align:left;font:600 12.5px/1.3 var(--body);cursor:pointer}
.builder__axis button.is-picked{background:var(--line);color:#fff;font-weight:700}
.builder__out{padding:14px 16px;border-top:3px solid var(--line);background:#17131B;color:#F4F0F4;font:600 clamp(12px,1.05vw,15px)/1.6 var(--mono);min-height:56px}
.builder__out em{color:#9C93A6;font-style:normal}
.builder__out b{color:#FFB396}

/* Миф и проверка: слева распространённая формулировка, справа как на самом деле. */
.myths{display:grid;gap:12px;margin-top:20px}
.myths>div{display:grid;grid-template-columns:minmax(0,1fr) 34px minmax(0,1.25fr);gap:12px;align-items:center}
.myths__wrong{padding:12px 15px;border:3px solid var(--red);background:#FFF0EE;color:#6B171A;font-size:clamp(12.5px,1.02vw,15.5px);line-height:1.4}
.myths__arrow{display:grid;place-items:center;font:800 20px/1 var(--mono);color:var(--red)}
.myths__right{padding:12px 15px;border:3px solid var(--green);background:#ECFAF2;font-size:clamp(12.5px,1.02vw,15.5px);line-height:1.4}

/* Домашнее задание: карточки, порядок сдачи, мем. */
.hw-cards{counter-reset:hw;display:grid;gap:10px;margin:20px 0 0;padding:0;list-style:none}
.hw-cards li{display:grid;grid-template-columns:34px 1fr;gap:13px;padding:12px 15px;border:3px solid var(--line);background:var(--panel);box-shadow:4px 4px 0 rgba(36,31,47,.18)}
.hw-cards li>b{display:grid;place-items:center;width:30px;height:30px;background:var(--accent);color:#fff;font:800 14px/1 var(--mono)}
.hw-cards div b{display:block;margin-bottom:4px;font-size:clamp(13px,1.08vw,16px)}
.hw-cards p{margin:0;color:var(--muted);font-size:13px;line-height:1.45}
.hw-order{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:20px}
.hw-order>div{padding:15px;border:3px solid var(--line);background:var(--panel);box-shadow:4px 4px 0 var(--line)}
.hw-order b{display:block;font:800 10px/1.3 var(--mono);color:var(--accent)}
.hw-order p{margin:8px 0 0;color:var(--muted);font-size:12.5px;line-height:1.45}
.hw-split{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(230px,.6fr);gap:22px;align-items:start}
.meme-frame{margin:26px 0 0;border:3px solid var(--line);background:#fff;box-shadow:7px 7px 0 var(--orange);transform:rotate(1.4deg);overflow:hidden}
.meme-frame img{display:block;width:100%;height:auto}
.note{margin-top:18px;padding:14px 17px;border:3px solid var(--line);background:#FFF3DD;font-size:clamp(12.5px,1.05vw,16px);line-height:1.5}
.note mark{background:rgba(233,84,32,.28)}
.print-button{margin-top:18px;padding:11px 18px;border:3px solid var(--line);background:var(--aubergine);color:#fff;box-shadow:4px 4px 0 var(--line);font:800 11px/1 var(--mono);cursor:pointer}
.print-button:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--line)}

/* Вопрос на выход. */
.exit-q{margin-top:22px;padding:22px;border:3px dashed var(--line);background:var(--panel)}
.exit-q p{margin:0;font-size:clamp(14px,1.2vw,19px);line-height:1.5}
.exit-q p+p{margin-top:12px;color:var(--muted);font-size:clamp(12.5px,1.02vw,15.5px)}

/* ─────────────────────────────────────────────────────────────────────
   Типографика колоды. Базовая система рассчитана на плотные практикумы;
   лекционной теме нужен более крупный кегль и больше воздуха, поэтому
   размеры текста внутри готовых компонентов подняты здесь.
   ───────────────────────────────────────────────────────────────────── */
.slide-inner{padding-bottom:92px}
.lead{max-width:76ch;line-height:1.58}
.card{padding:22px 24px}
.card b{margin-bottom:11px;font-size:11.5px;letter-spacing:.06em}
.card strong{font-size:clamp(17px,1.5vw,23px);line-height:1.28}
.card p{margin-top:11px;font-size:clamp(13.5px,1.15vw,17.5px);line-height:1.56}
.callout{padding:19px 23px;font-size:clamp(13.5px,1.15vw,18px);line-height:1.58}
.alarm{padding:18px 22px;font-size:clamp(13.5px,1.15vw,18px);line-height:1.55}
.matrix th,.matrix td{padding:13px 16px;font-size:clamp(12.5px,1.05vw,16.5px);line-height:1.5}
.notes li{padding:14px 16px;font-size:clamp(13px,1.1vw,17px);line-height:1.55}
.notes b{margin-bottom:5px;font-size:10.5px}
.choice>div{padding:26px}
.choice p{margin-top:11px;font-size:clamp(14px,1.2vw,18px);line-height:1.58}
.era__beat{padding:15px 18px}
.era__beat p{font-size:clamp(13.5px,1.12vw,17px);line-height:1.55}
.logo-card p{font-size:clamp(13px,1.05vw,16px);line-height:1.55}
.kernels p{font-size:clamp(13px,1.08vw,16.5px);line-height:1.55}
.checklist li{padding:15px 18px}
.checklist b{font-size:clamp(14px,1.2vw,18px);line-height:1.4}

/* Положения темы: одна мысль — одна строка во всю ширину экрана.
   Форма заменяет ряды одинаковых карточек там, где пункты не сопоставляются
   друг с другом, а читаются подряд. */
.points{display:grid;gap:10px;margin:22px 0 0;padding:0;list-style:none;counter-reset:pt}
.points>li{counter-increment:pt;display:grid;grid-template-columns:54px minmax(0,1fr);gap:18px;align-items:baseline;padding:16px 22px;border:3px solid var(--line);background:var(--panel);box-shadow:6px 6px 0 var(--line);color:var(--ink)}
.points>li::before{content:counter(pt,decimal-leading-zero);font:800 22px/1.1 var(--mono);color:var(--accent)}
.points>li>b,.points>li>p{grid-column:2}
.points b{display:block;margin-bottom:6px;font-size:clamp(16px,1.45vw,23px);line-height:1.24}
.points p{margin:0;max-width:88ch;color:#463F52;font-size:clamp(13.5px,1.15vw,17.5px);line-height:1.58}
.points--lettered>li::before{content:counter(pt,upper-latin)}
.points--tight>li{padding:13px 20px}
.points--tight b{margin-bottom:5px}

/* Разворот «изложение — акцент»: слева связный текст в одну колонку,
   справа то, что нужно удержать отдельно. */
.split{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(250px,.6fr);gap:26px;align-items:start;margin-top:24px}
.split__text p{margin:0 0 15px;max-width:72ch;color:#3A3545;font-size:clamp(14.5px,1.28vw,20px);line-height:1.62}
.split__text p:last-child{margin-bottom:0}
.split__text b{color:var(--aubergine)}
.split--dark .split__text p{color:rgba(255,255,255,.85)}
.split--dark .split__text b{color:#FFC6AE}
.split__aside{padding:22px 24px;border:3px solid var(--line);background:color-mix(in srgb,var(--accent) 9%,#fff);box-shadow:6px 6px 0 var(--line);color:var(--ink)}
.split__aside b{display:block;margin-bottom:10px;font:800 10.5px/1.3 var(--mono);color:var(--accent);letter-spacing:.07em}
.split__aside strong{display:block;margin-bottom:9px;font-size:clamp(16px,1.4vw,22px);line-height:1.26}
.split__aside p{margin:0 0 10px;font-size:clamp(13px,1.08vw,16.5px);line-height:1.55}
.split__aside p:last-child{margin-bottom:0}

/* Ключевое положение экрана, набранное крупно. */
.statement{margin-top:22px;padding:20px 25px;border-left:10px solid var(--accent);background:var(--panel);box-shadow:6px 6px 0 rgba(36,31,47,.16);color:var(--ink);font-size:clamp(16px,1.55vw,25px);line-height:1.42}
.statement span{display:block;margin-top:12px;color:var(--muted);font-size:clamp(13px,1.05vw,16.5px);line-height:1.55}
.slide--dark .statement,.slide--blue .statement,.slide--orange .statement{background:rgba(255,255,255,.07);color:#fff;box-shadow:none}
.slide--dark .statement span,.slide--blue .statement span,.slide--orange .statement span{color:rgba(255,255,255,.72)}


/* Светлые панели встречаются и на тёмных экранах, поэтому цвет текста в них задаётся явно:
   иначе белый цвет тёмного слайда наследуется внутрь белой карточки. */
.card,.callout,.matrix,.choice>div,.steps li,.notes li,.agenda>div,.era__beat,.ledger,
.syscall__stop,.sched,.memory__bar,.trees pre,.logo-card,.kernels>div,.builder,
.hw-cards li,.hw-order>div,.note,.quote__ru,.stack__layer{color:var(--ink)}
.syscall__stop--kernel,.stack__layer--hw{color:#fff}
.slide--dark .timeline__marks span,.slide--blue .timeline__marks span,.slide--orange .timeline__marks span{color:rgba(255,255,255,.74)}
.slide--dark .exit-q,.slide--blue .exit-q{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.07)}
.slide--dark .exit-q p+p,.slide--blue .exit-q p+p{color:rgba(255,255,255,.72)}
.slide--dark .era__year,.slide--blue .era__year,.slide--orange .era__year{background:#fff;color:var(--ink)}


/* План занятия в панели источников. */
.plan-list{margin:0;padding-left:22px;line-height:1.55}
.plan-list li{margin-bottom:8px}
.plan-list b{color:var(--aubergine)}
.sources-card h2+ol,.sources-card ul{margin-top:12px}

@media(max-width:900px){
  .agenda,.syscall,.states,.states__edges,.kernels,.builder__grid,.hw-order,.timeline__marks{grid-template-columns:1fr 1fr}
  .era,.quote,.trees,.logos--5,.logos--4,.hw-split,.split{grid-template-columns:1fr}
  .points>li{grid-template-columns:40px minmax(0,1fr);gap:12px}
  .sched__lane{grid-template-columns:110px 1fr 54px}
  .myths>div{grid-template-columns:1fr}
  .myths__arrow{transform:rotate(90deg)}
}
@media(max-height:760px){
  .era__shot img{max-height:30vh}
  .era__stack .era__shot img{max-height:17vh}
  .builder__grid{gap:7px 12px;padding:11px}
  .builder__axis button{margin-bottom:4px;padding:5px 9px;font-size:12px}
  .builder__out{padding:11px 14px;min-height:0}
  .stack__layer{padding:9px 14px}
  .agenda>div,.syscall__stop,.logo-card{padding:12px}
  .points{gap:7px;margin-top:16px}
  .points>li{padding:10px 16px;grid-template-columns:42px minmax(0,1fr);gap:12px}
  .points>li::before{font-size:18px}
  .points b{font-size:15.5px;margin-bottom:4px}
  .points p{font-size:13px;line-height:1.5}
  .lead{font-size:15px;line-height:1.5}
  .split__text p{font-size:15px;line-height:1.5;margin-bottom:10px}
  .split__aside{padding:15px 17px}
  .statement{padding:14px 18px;margin-top:16px;font-size:16px}
  .states__node{padding:12px 14px}
  .states__edges div{padding:7px 10px;font-size:9.5px}
  .trees pre{padding:11px;line-height:1.5}
  .notes li{padding:10px 13px}
  .matrix th,.matrix td{padding:9px 12px}
  .card{padding:15px 17px}
  .stack{gap:5px}
  .grid{gap:10px}
  .callout{padding:11px 15px}
  .era__beat{padding:9px 13px}
  .quote blockquote,.quote__ru{padding:14px}
  .checklist li{padding:8px 12px}
  .timeline{margin-top:22px;padding-top:24px}
  .logo-card img{height:42px}
}

@media print{
  @page{size:A4;margin:15mm 14mm 14mm}
  html,body{background:#fff!important;overflow:visible!important;height:auto!important}
  body>*:not(.hw-sheet){display:none!important}
  .hw-sheet{display:block!important;color:#241F2F;font:10.5pt/1.5 "IBM Plex Sans",system-ui,sans-serif;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .hw-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-bottom:10px;border-bottom:3px solid #241F2F}
  .hw-course{margin:0;font:700 8pt/1.3 "JetBrains Mono",monospace;letter-spacing:.06em;text-transform:uppercase;color:#E95420}
  .hw-head h1{margin:6px 0 3px;font-size:22pt;line-height:1.05;letter-spacing:-.02em}
  .hw-sub{margin:0;font-size:9.5pt;color:#6B6475}
  .hw-mark{flex:0 0 auto;padding:7px 10px;border:2.5px solid #241F2F;background:#F3DFD6;font:700 11pt/1 "JetBrains Mono",monospace}
  .hw-joke{margin:11px 0 0;padding:8px 12px;border-left:5px solid #D69016;background:#FBF1DE;font-size:11pt;font-style:italic}
  .hw-meme{margin:9px 0 0;text-align:center;page-break-inside:avoid}
  .hw-meme img{max-width:58mm;max-height:44mm;border:2.5px solid #241F2F}
  .hw-sheet h2{margin:12px 0 6px;font-size:12.5pt;letter-spacing:-.01em}
  .hw-list{margin:0;padding-left:18px}
  .hw-list li{margin-bottom:5px;page-break-inside:avoid}
  .hw-note{margin:7px 0 0;padding:7px 10px;border:1.5px solid #241F2F;font-size:9pt}
  .hw-table{width:100%;border-collapse:collapse;page-break-inside:avoid}
  .hw-table th,.hw-table td{padding:4.5px 8px;border:1.5px solid #241F2F;font-size:9.5pt;text-align:left;vertical-align:top}
  .hw-table th{width:30mm;background:#F6EFEA}
  .hw-gloss{margin:0;display:grid;grid-template-columns:34mm 1fr;gap:2.5px 9px;font-size:9pt}
  .hw-gloss dt{font-weight:700}
  .hw-gloss dd{margin:0;color:#4F4859}
  .hw-table mark{background:rgba(233,84,32,.3)}
  .hw-foot{margin-top:10px;padding-top:6px;border-top:1.5px solid #D8D0D9;font-size:8.5pt;color:#6B6475}
}
.hw-sheet{display:none}