/* Оформление страниц лекций. Общее для всех шести: одна шкала кегля,
   волосяные линии вместо плашек, янтарь по бюджету. Раньше эти правила
   лежали внутри html лекции, и каждая новая лекция тащила бы копию. */
/* Оформление взято с лендинга клуба inview (survive/station.css): моноширинный
   шрифт, нулевые скругления, волосяные линии вместо теней, глифы вместо иконок,
   плёнка сканлайнов. Единственный цвет вне палитры клуба — зелёный: он
   принадлежит только лягуху. Материал лекции — не слайды, а один длинный текст. */
:root{
  color-scheme: dark;
  --bg:#0a0a09; --bg2:#111110; --bg3:#16150f; --line:#26251f;
  --white:#f3efe4; --muted:#cec8ba; --dim:#8c877a; --dimmer:#565248;
  --amber:#ffb000; --amber-dim:#c98a05;
  --ok:#7bd88f; --danger:#ff6b57;
  --frog:#6f9e3f; --frog-lit:#8ec255; --frog-belly:#c3d9a0;
  --mono: ui-monospace, "SF Mono", "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace;

  /* Шкала кегля. Шесть размеров на весь сайт — раньше их было двадцать шесть,
     и глазу было не за что зацепиться: каждый блок кричал своим кеглем.
     --t-micro разрешён только в плотной плашке лягуха, в тексте лекции его нет. */
  --t-hero:  clamp(28px, 7vw, 44px);
  --t-h2:    clamp(22px, 3.2vw, 32px);
  --t-h3:    clamp(17px, 2vw, 25px);
  /* Раньше кегль текста лекции был фиксирован в px — под телефон, для которого
     он и задумывался. На большом мониторе те же 14px тонут в пустом поле:
     страница выглядит нетронутой под размер экрана. Нижняя граница clamp
     равна старому фиксированному значению — на телефоне ничего не меняется.
     Первая версия этого исправления всё равно упиралась в потолок слишком
     рано: hero и h2 переставали расти уже при ширине экрана 629–1000px и
     дальше на любом ноутбуке оставались тем же кеглем, что и на маленьком
     планшете — студенты продолжали жаловаться, что мелко. Догоняем их
     отдельно ниже, за брейкпоинтом. У lead/body/small потолок был ниже
     реального ноутбучного экрана, поэтому им хватило просто поднять predел
     и чуть увеличить темп роста — точка излома у них и так далеко. */
  --t-lead:  clamp(15px, 14px + 0.28vw, 19px);
  --t-body:  clamp(14px, 13px + 0.26vw, 18px);
  --t-small: clamp(12px, 11px + 0.22vw, 15px);
  --t-micro: 10.5px;
}
*{box-sizing:border-box; margin:0; padding:0}
body{background:var(--bg); color:var(--white); font-family:var(--mono);
  font-size:var(--t-body); line-height:1.68; -webkit-font-smoothing:antialiased; overflow-x:clip}
body::before{content:""; position:fixed; inset:0; pointer-events:none; z-index:200; opacity:.5;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px)}
button{font:inherit; cursor:pointer; border:0; border-radius:0; color:inherit;
  -webkit-tap-highlight-color:transparent}
a{color:inherit; text-decoration:none}
svg{display:block}
#app{max-width:1080px; margin:0 auto; padding:0 clamp(14px,3.5vw,48px)}
.pad-bottom{height:calc(28px + env(safe-area-inset-bottom))}
.hint{font-size:var(--t-small); color:var(--dimmer); line-height:1.6}
.cmdline{color:var(--dim); font-size:var(--t-small); margin-bottom:14px}
.cmdline .a{color:var(--amber)}
.cursor{display:inline-block; width:8px; height:1em; background:var(--amber);
  translate:0 2px; animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.kicker{font-size:var(--t-small); color:var(--dimmer);}

/* ── главное меню ─────────────────────────────────────────────────────────── */
#menu{padding:26px 0 34px}
#menu h1{font-size:var(--t-hero); margin:9px 0 0; letter-spacing:-.02em;
  line-height:.98; font-weight:600; text-wrap:balance}
#menu h1 .cur{color:var(--amber)}
#menu .slogan{margin-top:13px; font-size:var(--t-lead); color:var(--amber); font-weight:600;}
#menu .lede{color:var(--muted); font-size:var(--t-body); margin-top:13px; line-height:1.7}
#menu .lede b{color:var(--white); font-weight:600}
.rules{font-size:var(--t-body); color:var(--muted); margin-top:22px; line-height:1.7;
  border-left:2px solid var(--amber); padding:2px 0 2px 14px; max-width:min(68ch,100%)}
.rules b{color:var(--white); font-weight:600}
.rules .r{margin-top:9px; position:relative; padding-left:17px; overflow-wrap:anywhere}
/* маркер — декорация, янтарь оставлен планке, числам и кнопке */
.rules .r i{position:absolute; left:0; top:0; color:var(--dim); font-style:normal}
.b-primary{background:var(--amber); color:#0a0a09; padding:13px 20px; font-weight:600;
  font-size:var(--t-body); border:1px solid var(--amber);
  transition:transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .2s}
.b-primary:hover:not(:disabled){transform:translateY(-2px); box-shadow:0 6px 0 -2px var(--amber-dim)}
.b-primary:disabled{opacity:.35; cursor:default; transform:none; box-shadow:none}
.b-ghost{background:transparent; color:var(--dim); border:1px solid var(--line);
  padding:13px 16px; font-size:var(--t-body); transition:.16s}
.b-ghost:hover:not(:disabled){border-color:var(--amber-dim); color:var(--amber)}
/* режимы ускорения пока закрыты: видно, что кнопка есть, но нажать нельзя */
.b-ghost:disabled{opacity:.4; cursor:default}
.row{display:flex; gap:8px; flex-wrap:wrap; margin-top:20px}
.row .grow{flex:1; min-width:150px}
.playrow{display:flex; gap:12px; align-items:center; margin-top:24px; flex-wrap:wrap}
.playrow .b-primary{font-size:var(--t-lead); padding:15px 26px}

/* ── стартовый экран ──────────────────────────────────────────────────────
   Одно действие на экран: кнопка «Начать лекцию» единственная янтарная, всё
   остальное — либо текст, либо ссылка, либо спрятано под «подробнее». Правил
   на первом экране ровно три: те, без которых лягух погибнет. Остальное там
   же, но раскрывается по желанию. ─────────────────────────────────────────── */
body.reading .techwall{display:none}
.techwall{position:fixed; inset:0; z-index:0; pointer-events:none; user-select:none;
  font-size:13px; line-height:2.05; color:rgba(243,239,228,.11); letter-spacing:.06em;
  word-spacing:.5em; padding:18px 0; overflow:hidden; white-space:pre-wrap;
  word-break:break-word;
  /* Маска только по горизонтали: ярче по краям, бледнее в середине, где идёт
     текст. Вертикального гашения нет — стена держится на всю страницу. */
  -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.16) 24%,rgba(0,0,0,.16) 76%,#000 100%);
  mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.16) 24%,rgba(0,0,0,.16) 76%,#000 100%)}
/* Контент поверх фоновой стены. */
#app{position:relative; z-index:1}

/* Заметнее обычной подписи: это единственный элемент управления на экране,
   и он висит поверх фоновой стены. */
.back{display:inline-block; font-size:var(--t-body); color:var(--muted); padding:6px 0;
  border-bottom:1px solid transparent}
.back:hover{color:var(--amber); border-bottom-color:var(--amber-dim)}
#menu .rules{border-left:2px solid var(--amber-dim)}
#menu .rules .r:first-child{margin-top:0}
#menu .playrow .b-primary{flex:1 1 auto; min-width:200px}
.more{margin-top:24px; border-top:1px solid var(--line);
  font-size:var(--t-small); color:var(--muted); line-height:1.7}
.more summary{padding:12px 0; cursor:pointer; color:var(--dim); font-size:var(--t-small);
  list-style:none; display:flex; align-items:center; gap:8px}
.more summary::-webkit-details-marker{display:none}
.more summary::before{content:"+"; color:var(--amber); font-weight:600}
.more[open] summary::before{content:"−"}
.more summary:hover{color:var(--amber)}
.more .r{margin:0 0 10px; position:relative; padding-left:17px; overflow-wrap:anywhere}
.more .r:first-of-type{margin-top:2px}
.more .r i{position:absolute; left:0; top:0; color:var(--amber-dim); font-style:normal}
.more b{color:var(--white); font-weight:600}
.more .subrow{display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 0}
.more .subrow .grow{flex:1; min-width:150px}
.more p.hint{margin:10px 0 14px !important}
@media (max-width:420px){ #menu .playrow{gap:8px} #menu .playrow .hint{flex:1 1 100%} }

/* ── верхняя плашка ───────────────────────────────────────────────────────
   Слева лягух и его статус, справа управление. Всё в одну строку, поэтому
   высоту задаёт только лягух. На узком экране кнопки уходят второй строкой —
   иначе они сжимаются до неразличимого. ─────────────────────────────────── */
#hud{position:sticky; top:0; z-index:60; background:var(--bg); border-bottom:1px solid var(--line)}
#hud .in{max-width:1080px; margin:0 auto; padding:6px clamp(14px,3.5vw,48px) 5px}
.pet{display:flex; align-items:center; gap:12px; width:100%}
.hud-frog{flex:none; width:84px; height:84px; background:var(--bg2);
  border:1px solid var(--line); position:relative; overflow:hidden; padding:0;
  transition:border-color .18s, background .18s}
.hud-frog.crit{border-color:var(--danger)}
.hud-frog.target{border-color:var(--amber); background:var(--bg3)}
.hud-frog svg{width:100%; height:100%}
.hud-frog .exp{position:absolute; right:0; bottom:0; font-size:var(--t-micro); line-height:1;
  color:var(--dimmer); background:var(--bg2); padding:2px 3px 1px;
  border-top:1px solid var(--line); border-left:1px solid var(--line)}
.hud-frog:hover .exp{color:var(--amber)}
.hud-frog.empty{background:repeating-linear-gradient(45deg,#0f0e0b 0 8px,transparent 8px 16px);
  border-style:dashed}
.hud-frog .away{position:absolute; inset:0; display:grid; place-items:center;
  font-size:var(--t-micro); letter-spacing:.1em; text-transform:uppercase; color:var(--amber)}
/* ── Оформление прыжка ────────────────────────────────────────────────────
   Прыжок собран по правилам мультипликации, а не одним переездом:
     · по горизонтали скорость постоянная (linear) — так летит тело в полёте;
     · по вертикали отдельный слой рисует параболу: присед, взлёт, падение;
     · третий слой делает сжатие и растяжение: сжался перед толчком,
       вытянулся в полёте, снова сжался на приземлении;
     · тень на земле уменьшается и светлеет по высоте — даёт глубину;
     · наклон в сторону движения и облачко пыли на отталкивании.
   Три вложенных слоя нужны именно потому, что одним transform это не
   собирается: у горизонтали и вертикали разные функции времени. */
#hopper{position:fixed; left:0; top:0; z-index:95; width:104px; height:104px;
  pointer-events:none; will-change:transform;
  transition:transform var(--hop,760ms) linear}
#hopper .arc{position:absolute; inset:0; will-change:transform}
#hopper .sq{position:absolute; inset:0; transform-origin:50% 92%; will-change:transform}
#hopper svg{width:100%; height:100%}
/* тень отдельно от прыгуна: она остаётся на земле */
#hopper .shadow{position:absolute; left:50%; bottom:-4px; width:52%; height:9px;
  translate:-50% 0; border-radius:50%; background:#000; opacity:.42; will-change:transform,opacity}
#hopper .dust{position:absolute; left:50%; bottom:0; width:6px; height:6px;
  translate:-50% 0; border-radius:50%; background:var(--amber-dim); opacity:0}

#hopper.jump .arc{animation:hop-arc var(--hop,760ms) linear}
#hopper.jump .sq{animation:hop-squash var(--hop,760ms) linear}
#hopper.jump .shadow{animation:hop-shadow var(--hop,760ms) linear}
#hopper.jump .dust{animation:hop-dust calc(var(--hop,760ms) * .45) ease-out}
#hopper.jump .dust.d2{animation-delay:.04s}
#hopper.jump .dust.d3{animation-delay:.08s}

@keyframes hop-arc{
  0%{transform:translateY(0)}
  12%{transform:translateY(5px)}                       /* присед перед толчком */
  18%{transform:translateY(0)}
  52%{transform:translateY(calc(var(--rise,64px) * -1))} /* верхняя точка */
  88%{transform:translateY(0)}
  94%{transform:translateY(4px)}                       /* просадка на приземлении */
  100%{transform:translateY(0)}
}
@keyframes hop-squash{
  0%  {transform:rotate(0deg) scale(1,1)}
  12% {transform:rotate(0deg) scale(1.2,0.78)}         /* сжался */
  24% {transform:rotate(var(--lean,0deg)) scale(0.82,1.24)} /* вытянулся */
  52% {transform:rotate(var(--lean,0deg)) scale(0.94,1.08)}
  84% {transform:rotate(calc(var(--lean,0deg) * .3)) scale(1.06,0.96)}
  92% {transform:rotate(0deg) scale(1.22,0.76)}        /* удар о землю */
  100%{transform:rotate(0deg) scale(1,1)}
}
@keyframes hop-shadow{
  0%  {transform:scale(1,1); opacity:.42}
  18% {transform:scale(1.15,1); opacity:.46}
  52% {transform:scale(0.42,0.6); opacity:.14}         /* лягух высоко — тень мала */
  88% {transform:scale(1.12,1); opacity:.45}
  100%{transform:scale(1,1); opacity:.42}
}
@keyframes hop-dust{
  0%  {opacity:.75; transform:translate(0,0) scale(.5)}
  100%{opacity:0; transform:translate(var(--dx,0), -14px) scale(1.6)}
}
/* приземлился и сидит: лёгкое дыхание, пока ждёт следующего прыжка */
#hopper.rest .sq{animation:hop-breathe 1.1s ease-in-out}
@keyframes hop-breathe{
  0%,100%{transform:scale(1,1)}
  50%{transform:scale(1.03,0.97)}
}
/* Пыльца феи, оставленная в воздухе за прыжком (только control-plane) —
   независимые точки поверх страницы, каждая гаснет и убирает себя сама. */
.pixietrail{position:fixed; z-index:94; width:10px; height:10px; border-radius:50%;
  background:#ffe066; box-shadow:0 0 12px 3px rgba(255,224,102,.85);
  pointer-events:none; animation:pixie-fade 1s ease-out forwards}
@keyframes pixie-fade{
  0%{opacity:1; transform:scale(1) translateY(0)}
  100%{opacity:0; transform:scale(.3) translateY(20px)}
}
@media (prefers-reduced-motion:reduce){
  .pixietrail{animation:none; display:none}
  #hopper{transition:transform .45s linear}
  #hopper.jump .arc,#hopper.jump .sq,#hopper.jump .shadow,#hopper.jump .dust,
  #hopper.rest .sq{animation:none}
}
.hud-mid{flex:1; min-width:0; display:flex; flex-direction:column; gap:5px}

.hud-tags{display:flex; gap:5px; flex-wrap:wrap; align-items:center}
.tag{font-size:var(--t-micro); letter-spacing:.09em; text-transform:uppercase; padding:2px 5px;
  border:1px solid var(--line); color:var(--dim); white-space:nowrap}
.tag.stage{border-color:#3f5a28; color:var(--frog-lit)}
.tag.rank{border-color:var(--amber-dim); color:var(--amber)}
.tag.clock{font-variant-numeric:tabular-nums}
.tag.dead{border-color:var(--danger); color:var(--danger)}
/* код лягуха: студент диктует его в чат, поэтому читаемо и врозь по символам */
.tag.code{border-color:#4a3c14; color:var(--amber); letter-spacing:.16em}

/* Карточка кода. Стоит первой в итоговом листе, потому что её фотографируют:
   на телефоне скриншот берёт верх экрана, и код должен попасть в кадр вместе
   с лягухом, даже если лист длиннее экрана. */
.codecard{margin:16px 0 0; border:1px solid var(--amber-dim); background:var(--bg3);
  padding:14px 16px 15px; text-align:center}
.codecard .lbl{font-size:var(--t-small); color:var(--dim)}
.codecard .val{font-size:clamp(38px,13vw,54px); line-height:1.05; margin-top:6px; color:var(--amber); font-weight:600;
  font-variant-numeric:tabular-nums; word-break:break-all;
  text-shadow:0 0 22px rgba(255,176,0,.18)}
.codecard .cnote{font-size:var(--t-small); color:var(--muted); margin-top:8px; line-height:1.55}
.codecard .cbtn{margin-top:11px; font:inherit; font-size:var(--t-small); color:var(--muted); background:var(--bg2);
  border:1px solid var(--line); padding:8px 14px; cursor:pointer}
.codecard .cbtn:hover{color:var(--amber); border-color:var(--amber-dim)}

/* три шкалы в строку: столбиком плашка вырастала втрое */
.meters{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); max-width:420px}
.mcell{background:var(--bg2); padding:3px 6px 4px; min-width:0}
.mcell .nm{font-size:var(--t-micro); letter-spacing:.08em; text-transform:uppercase; color:var(--dimmer);
  display:flex; justify-content:space-between; gap:4px}
.mcell .nm b{color:var(--dim); font-weight:600; font-variant-numeric:tabular-nums}
.meter{height:4px; background:#1a1914; border:1px solid var(--line); overflow:hidden; margin-top:3px}
.meter i{display:block; height:100%; background:var(--amber-dim); transition:width .8s ease-out, background-color .5s linear}
.meter i.ok{background:var(--ok)} .meter i.warn{background:var(--amber)} .meter i.no{background:var(--danger)}

.hudmsg{font-size:var(--t-micro); line-height:1.4; overflow-wrap:anywhere; color:var(--dim);
  position:relative; padding-left:13px}
.hudmsg b{font-weight:600; font-variant-numeric:tabular-nums}
.hudmsg::before{content:"▸"; position:absolute; left:0; top:0; color:var(--amber-dim)}
.hudmsg.warn{color:var(--amber)} .hudmsg.warn::before{color:var(--amber)}
.hudmsg.no,.hudmsg.crit{color:var(--danger)}
.hudmsg.no::before,.hudmsg.crit::before{color:var(--danger)}
.hudmsg.ok{color:var(--ok)} .hudmsg.ok::before{color:var(--ok)}

/* управление — в правой части плашки */
.acts{flex:none; display:grid; grid-template-columns:repeat(4,66px); gap:1px;
  background:var(--line); border:1px solid var(--line); margin-left:auto}
.act{background:var(--bg2); padding:7px 3px 6px; text-align:center; position:relative;
  transition:background .14s; min-width:0}
.act:hover:not(:disabled){background:var(--bg3)}
.act:disabled{opacity:.32; cursor:default}
.act .g{display:block; font-size:var(--t-body); line-height:1.1; color:var(--amber)}
.act .t{display:block; font-size:var(--t-micro); color:var(--dim); letter-spacing:.04em;
  text-transform:uppercase; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.act.urgent{background:#1a100e} .act.urgent .g,.act.urgent .t{color:var(--danger)}
.act .cd{position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--amber-dim);
  transform-origin:left; transition:transform .2s linear}
.act .badge{position:absolute; top:2px; right:3px; min-width:13px; height:13px; padding:0 3px;
  background:var(--amber); color:#0a0a09; font-size:var(--t-micro); font-weight:600; line-height:13px; text-align:center}
.act .badge.pulse{animation:pulse 1.3s ease-in-out infinite}
/* Счётчик пауз — не тревога, а справка: приглушённый, без пульсации.
   Красная плашка вопроса и спокойная плашка пауз не должны путаться. */
#pauseLeft{background:var(--bg3); color:var(--dim); border:1px solid var(--line)}
.act:disabled #pauseLeft{opacity:.5}
@keyframes pulse{0%,100%{opacity:1} 50%{opacity:.35}}

/* Прогресс лекции — вертикальная нить по левому краю страницы, а не полоса
   внутри плашки лягуха: там она отбирала высоту и мешалась. */
#prog{position:fixed; left:0; top:0; bottom:0; width:3px; background:#1f1e18; z-index:65;
  pointer-events:none}
#prog i{display:block; width:100%; height:0; background:var(--amber); transition:height .18s linear}
@media (max-width:430px){#prog{width:2px}}

/* узкий экран: кнопки второй строкой во всю ширину, лягух мельче */
@media (max-width:720px){
  .pet{gap:9px}
  .hud-frog{width:74px; height:74px}
  .acts{grid-template-columns:repeat(2,52px)}
  .meters{max-width:none}
  .act{padding:5px 2px 4px}
  .act .g{font-size:var(--t-small)}
  .act .t{font-size:var(--t-micro); letter-spacing:0}
  .hudmsg{font-size:var(--t-micro); max-height:2.9em; overflow:hidden}
}
@media (max-width:430px){
  .hud-frog{width:62px; height:62px}
  .mcell .nm b{display:none}
  .mcell{padding:2px 4px 3px}
  .acts{grid-template-columns:repeat(2,46px)}
  .hud-tags .tag.clock{display:none}
}

/* ── еда и вода: появляются где угодно, их надо донести ───────────────────── */
#field{position:fixed; inset:0; z-index:80; pointer-events:none}
.token{position:absolute; width:60px; height:60px; pointer-events:auto;
  background:var(--bg); border:2px solid var(--amber); display:grid; place-items:center;
  cursor:grab; touch-action:none; user-select:none;
  animation:tok .26s cubic-bezier(.2,.8,.2,1)}
.token svg{width:32px; height:32px}
@keyframes tok{from{opacity:0; transform:scale(.7)} to{opacity:1; transform:none}}
.token .tick{position:absolute; width:8px; height:8px; background:var(--amber);
  top:-2px; left:-2px; animation:blink 1s steps(1) infinite}
.token .cap{position:absolute; top:calc(100% + 3px); left:50%; translate:-50% 0;
  font-size:var(--t-micro); letter-spacing:.08em; text-transform:uppercase; color:var(--amber);
  white-space:nowrap; background:var(--bg); padding:2px 5px; border:1px solid var(--amber-dim)}
.token .life{position:absolute; left:-1px; right:-1px; bottom:-1px; height:2px;
  background:var(--amber-dim); transform-origin:left}
.token.drag{cursor:grabbing; border-color:var(--amber); background:var(--bg3);
  animation:none; z-index:140}
.token.drag .cap{display:none}

/* ── документ лекции ──────────────────────────────────────────────────────
   Одна колонка по центру, ширина 1000 — схемы и блоки идут в потоке, а не
   уезжают в боковую колонку. Голого текста минимум: сравнение — парой колонок,
   перечисление — таблицей, процесс — цепочкой, детали — под «подробнее». */
#doc{padding:12px 0 0}
.hero{padding:4px 0 18px; border-bottom:1px solid var(--line)}
.hero h1{font-size:var(--t-hero); letter-spacing:-.02em; font-weight:600;
  text-wrap:balance; line-height:1.02; margin-top:9px}
.hero .slogan{margin-top:12px; font-size:var(--t-lead); color:var(--amber); font-weight:600}
.hero p{margin-top:14px; color:var(--muted); font-size:var(--t-body); line-height:1.75; max-width:min(72ch,100%)}
.hero p b{color:var(--white); font-weight:600}

.toc{margin-top:16px; max-width:620px}
.toc a{display:flex; gap:10px; padding:8px 2px;
  font-size:var(--t-body); color:var(--muted); transition:color .14s}
.toc a:hover{color:var(--amber)}
.toc a .n{color:var(--amber); flex:none; width:56px; font-weight:600;
  font-variant-numeric:tabular-nums}
.toc a .cnt{color:var(--dimmer); font-weight:400}

.chapter{margin:20px 0 0; scroll-margin-top:132px}
.chapter .lbl{font-size:var(--t-small); color:var(--dimmer);}
.chapter .lbl b{color:var(--amber); font-weight:600}
.chapter h2{font-size:var(--t-h2); line-height:1.06; letter-spacing:-.02em;
  font-weight:600; margin-top:6px; text-wrap:balance; max-width:min(26ch,100%)}
/* Разделитель несёт длинную подпись блока — набираем мельче, чтобы она
   укладывалась в одну строку и не ломалась посередине. */
.chapter.divider h2{font-size:var(--t-h3); max-width:100%; text-wrap:nowrap}
.chapter h2 .cur{color:var(--amber)}
.chapter .lede{margin-top:9px; font-size:var(--t-body); color:var(--muted); line-height:1.72; max-width:min(70ch,100%)}
.chapter .in{margin-top:16px; max-width:620px; border-top:1px solid var(--line)}
.chapter .in div{padding:9px 0 9px 20px; font-size:var(--t-body); color:var(--muted);
  position:relative; border-bottom:1px solid var(--line)}
.chapter .in div:last-child{border-bottom:none}
.chapter .in div::before{content:"▸"; position:absolute; left:0; color:var(--amber-dim)}

/* ── тема: утверждение, потом доказательство ─────────────────────────────
   Один принцип на все блоки: в рамке живёт только схема. Раньше каждый блок
   был карточкой с заливкой и рамкой, и страница читалась стопкой плашек —
   глазу было не за что зацепиться, потому что выделено было всё. Теперь
   группировку держат волосяные линии, а акцент — одна янтарная планка слева
   у главного утверждения. Янтарь остался числам, коду и этой планке. */
/* ── слайд ────────────────────────────────────────────────────────────────
   Материал листается вниз, но границы слайдов видны: сверху каждого — полоска
   и номер. Ведущий называет номер голосом, студент листает и сверяется. */
/* Полоска-разделитель — на всю ширину страницы, а не только колонки текста:
   иначе по бокам остаются «дыры» и черта не читается как граница слайда. */
.topic, .recap, .chapter{padding-top:7px; position:relative}
.topic::before, .recap::before, .chapter::before{
  content:""; position:absolute; top:0; left:50%; width:100vw;
  margin-left:-50vw; border-top:1px solid var(--dimmer)}
.topic{margin-top:14px; scroll-margin-top:132px; display:grid; gap:8px;
  grid-template-columns:minmax(0,1fr); position:relative}
.sl{display:flex; align-items:baseline; gap:6px; font-variant-numeric:tabular-nums}
.sl b{font-size:var(--t-lead); font-weight:600; color:var(--amber)}
.sl span{font-size:var(--t-small); color:var(--dimmer)}
.topic h3{font-size:var(--t-h3); line-height:1.14; letter-spacing:-.02em;
  font-weight:600; text-wrap:balance; max-width:min(34ch,100%)}
.tocfoot{font-size:var(--t-small); color:var(--dimmer); padding:10px 0}

/* суть — главное утверждение темы, всегда так выглядит и всегда на этом месте */
.sut{font-size:var(--t-lead); line-height:1.5; color:var(--white); font-weight:600;
  border-left:2px solid var(--amber); padding:2px 0 2px 14px; max-width:min(68ch,100%)}

/* короткие параллельные тезисы */
ul.keys{list-style:none; max-width:820px; border-top:1px solid var(--line)}
ul.keys li{padding:9px 0 9px 20px; position:relative; border-bottom:1px solid var(--line);
  font-size:var(--t-body); line-height:1.6; color:var(--muted); overflow-wrap:anywhere}
ul.keys li:last-child{border-bottom:none}
ul.keys li::before{content:"▸"; position:absolute; left:0; color:var(--amber-dim)}
ul.keys li b{color:var(--white); font-weight:600}

/* Стикер инцидента: один на слайд, разбросаны по всей лекции, там, где
   к месту. Красная рамка и восклицательный знак — чтобы с первого взгляда
   было видно «это не обычный факт, это разбор случившегося». Двойной
   клик/тап раскрывает карточку крупно, тем же слоем, что и картинки;
   одиночный клик специально ничего не делает — не раскрывается при
   пролистывании. */
.incidents{display:flex; justify-content:flex-end; max-width:100%; margin-top:4px}
.incident{display:flex; align-items:center; gap:9px; border:1px solid var(--danger);
  background:rgba(255,107,87,.07); padding:8px 14px; cursor:pointer; max-width:100%;
  transition:.15s}
.incident:hover{background:rgba(255,107,87,.14)}
.incident .warn-ico{font-style:normal; color:var(--danger); font-size:14px; flex:none}
.incident .tag{display:flex; align-items:baseline; gap:7px; white-space:nowrap}
.incident .tag b{font-size:var(--t-body); color:var(--white); font-weight:600}
.incident .tag span{font-size:var(--t-small); color:var(--dimmer)}
.incident .hint{font-size:var(--t-small); color:var(--muted); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}

/* Развёрнутая карточка инцидента: тот же полноэкранный слой, что у картинок
   (#imgLightbox), но вместо img — рамка с уголками, как у «редкой карты»:
   узнаваемо особый момент, а не рядовой абзац. */
.incidentCard{position:relative; max-width:600px; max-height:100%; overflow-y:auto;
  background:var(--bg2); border:1px solid var(--danger); padding:26px 28px 24px}
.incidentCard .cnr{position:absolute; width:16px; height:16px; border:2px solid var(--amber)}
.incidentCard .cnr.tl{top:-1px; left:-1px; border-right:0; border-bottom:0}
.incidentCard .cnr.tr{top:-1px; right:-1px; border-left:0; border-bottom:0}
.incidentCard .cnr.bl{bottom:-1px; left:-1px; border-right:0; border-top:0}
.incidentCard .cnr.br{bottom:-1px; right:-1px; border-left:0; border-top:0}

/* Пасхалка за раскрытые карточки всех инцидентов лекции: просто картинка
   с подписями, без рамки-«редкой карты» — она и так со своей рамкой. */
.easterEgg{max-width:420px; max-height:100%; overflow-y:auto;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px}
.eeTitle{font-size:var(--t-h3); color:var(--amber)}
.eeHero{width:min(80vw, 320px); border:1px solid var(--line)}
.eeCaption{font-size:var(--t-body); line-height:1.6; color:var(--muted); max-width:44ch; font-style:italic}
.icTop{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  border-bottom:1px solid var(--line); padding-bottom:14px; margin-bottom:16px}
.icTag{font-size:var(--t-micro); letter-spacing:.1em; text-transform:uppercase;
  color:var(--danger); border:1px solid var(--danger); padding:2px 8px}
.icName{font-size:var(--t-h3); color:var(--white)}
.icYear{font-size:var(--t-body); color:var(--dimmer)}
/* Ширина по содержимому, а не три равные колонки: «45 минут» и длинное
   описание масштаба не должны занимать одинаковое место — короткое поле
   остаётся коротким, длинное само переносится строками. */
.icStats{display:flex; flex-wrap:wrap; gap:14px 28px; margin-bottom:16px}
.icStat{border-left:2px solid var(--danger); padding:2px 0 2px 10px; flex:0 1 auto; max-width:230px}
/* Масштаб — всегда третье и последнее поле, обычно самое длинное (список
   задетых сервисов и регионов). В свою колонку до 230px оно не помещалось
   и просто переносилось на отдельную строку с пустотой по бокам — отдаём
   ему всю ширину карточки. */
.icStat:last-child{flex-basis:100%; max-width:none}
.icStatL{display:block; font-size:var(--t-micro); letter-spacing:.06em; text-transform:uppercase; color:var(--dimmer)}
.icStatV{display:block; font-size:var(--t-body); color:var(--white); font-weight:600; margin-top:2px}
.icStory{font-size:var(--t-body); line-height:1.68; color:var(--muted)}
.icLink{display:inline-block; margin-top:18px; font-size:var(--t-small);
  color:var(--amber); border-bottom:1px solid var(--amber-dim)}

/* сравнение двух вариантов: разделяет одна вертикальная линия */
.pairs{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 22px;
  max-width:880px; border-top:1px solid var(--line); padding-top:11px}
@media (max-width:560px){.pairs{grid-template-columns:1fr; gap:18px 0}}
.pairs .col{min-width:0}
@media (min-width:561px){.pairs .col+.col{border-left:1px solid var(--line); padding-left:22px;
  margin-left:-22px}}
.pairs .ch b{display:block; font-size:var(--t-body); font-weight:600; color:var(--white)}
/* Подпись столбца несёт смысл («desired state · пишете вы»), поэтому осталась,
   но это обычный мелкий текст, а не разряженная капитель. */
.pairs .ch span{display:block; font-size:var(--t-small); color:var(--dimmer); margin-top:2px}
.pairs .col.am .ch b{color:var(--amber)}
.pairs ul{list-style:none; padding:8px 0 0}
.pairs li{padding:4px 0 4px 14px; position:relative; font-size:var(--t-small);
  line-height:1.55; color:var(--muted); overflow-wrap:anywhere}
.pairs li::before{content:"·"; position:absolute; left:2px; color:var(--dimmer); font-weight:700}

/* «термин → что делает»: определения, а не таблица с заливками */
.defs{max-width:880px; border-top:1px solid var(--line)}
.defs .r{display:grid; grid-template-columns:200px minmax(0,1fr); gap:0 16px;
  padding:9px 0; border-bottom:1px solid var(--line)}
.defs .r:last-child{border-bottom:none}
@media (max-width:620px){.defs .r{grid-template-columns:1fr; gap:3px}}
.defs .t{font-size:var(--t-body); font-weight:600; color:var(--white); overflow-wrap:anywhere}
.defs .d{font-size:var(--t-small); line-height:1.6; color:var(--muted); overflow-wrap:anywhere}
.defs .d b{color:var(--white); font-weight:600}

/* процесс по шагам: номер янтарным префиксом, без залитого квадрата */
.steps{max-width:820px; counter-reset:st; list-style:none; border-top:1px solid var(--line)}
.steps li{counter-increment:st; padding:9px 0 9px 30px; position:relative;
  border-bottom:1px solid var(--line);
  font-size:var(--t-body); line-height:1.6; color:var(--muted); overflow-wrap:anywhere}
.steps li:last-child{border-bottom:none}
.steps li::before{content:counter(st); position:absolute; left:0; top:9px;
  color:var(--amber); font-weight:600; font-variant-numeric:tabular-nums}
.steps li b{color:var(--white); font-weight:600}

/* числа: разделены линиями, без плиток */
.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(104px,1fr));
  max-width:640px; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.facts div{padding:10px 14px 11px 0; min-width:0}
.facts div+div{padding-left:14px; border-left:1px solid var(--line)}
.facts div b{display:block; font-size:var(--t-h3); color:var(--amber); font-weight:600;
  letter-spacing:-.02em}
.facts div span{display:block; font-size:var(--t-small); color:var(--dimmer); margin-top:3px}

/* врезки: планка слева и всё, тип назван словом.
   :not(.hudmsg) везде — иначе эти же правила цепляют плашку статуса лягуха
   наверху: у неё тоже бывает класс warn (просто для цвета), и вместо своей
   стрелки-буллета «▸» она показывала чужой заголовок «где путаются» плюс
   чужую красную планку слева — та самая «каша» из текста и рамки в HUD. */
.note:not(.hudmsg),.warn:not(.hudmsg){font-size:var(--t-small); line-height:1.68; padding:2px 0 2px 14px;
  overflow-wrap:anywhere; max-width:820px; color:var(--muted)}
.note:not(.hudmsg){border-left:2px solid var(--line)}
.warn:not(.hudmsg){border-left:2px solid var(--danger)}
.note:not(.hudmsg) b,.warn:not(.hudmsg) b{color:var(--white); font-weight:600}
.note:not(.hudmsg)::before{content:"на практике"; display:block; font-size:var(--t-small);
  color:var(--dim); margin-bottom:4px}
.warn:not(.hudmsg)::before{content:"где путаются"; display:block; font-size:var(--t-small);
  color:var(--danger); margin-bottom:4px}
.topic code,.chapter code,.sheet code{color:var(--amber); font-size:.94em}

/* картинка в потоке: та же рамка, что у схем. Кликабельна — открывается крупно. */
figure.pic{border:1px solid var(--line); background:var(--bg2); max-width:420px; overflow:hidden;
  position:relative}
figure.pic img{display:block; width:100%; height:auto; cursor:zoom-in}
figure.pic::after{content:'⤢'; position:absolute; top:6px; right:6px; width:22px; height:22px;
  display:flex; align-items:center; justify-content:center; background:rgba(10,10,9,.65);
  color:var(--white); font-size:13px; border:1px solid var(--line); opacity:.85; pointer-events:none}
figure.pic figcaption{font-size:var(--t-small); color:var(--dim); padding:8px 12px;
  border-top:1px solid var(--line); background:var(--bg); line-height:1.55}
/* Картинка сбоку. Слайд — это грид, поэтому float здесь не работает: элемент
   остаётся в общем потоке и прижимается влево. Вместо него вторая колонка,
   в которой картинка стоит от заголовка до низа блока. */
figure.pic.side{max-width:none; width:100%; margin:0}
/* Таблица Severity — широкая и с мелким текстом построчно (S0—S4), в
   обычной рамке 420px читалась плохо. Расширяем только её, а не все
   картинки в лекции. */
figure.pic:has(img[src="img/severity-table-real.jpg"]){max-width:640px}
/* Схема процесса реакции — восемь шагов с подписями, в узкой рамке 420px
   подписи было не разобрать. */
figure.pic:has(img[src="img/incident-process-flow.jpg"]){max-width:760px}

/* Сетка из нескольких картинок в ряд — по одной на вариант, не одна большая. */
.picgrid{display:grid; grid-template-columns:1fr; gap:12px}
@media (min-width:620px){.picgrid{grid-template-columns:1fr 1fr}}
.picgrid figure.pic{margin:0}
@media (min-width:620px){
  /* Картинка выведена из потока: если оставить её строкой сетки, её высота
     растягивает строку и уводит заголовок вниз. Место под неё освобождает
     правый отступ самого слайда. */
  .topic:has(> figure.pic.side), .recap:has(figure.pic.side){padding-right:340px; min-height:370px}
  .topic > figure.pic.side, .recap figure.pic.side{position:absolute; right:0; top:30px; width:320px; margin:0}
  .topic > figure.pic.side img, .recap figure.pic.side img{max-height:340px; object-fit:cover; object-position:center}
  /* Если на слайде рядом с картинкой ещё и карточка инцидента — она
     раньше падала на всю ширину под текстом, отдельно от картинки, хотя
     по смыслу привязана к мему сверху. Ставим её туда же, в правую
     колонку, под низ картинки. */
  .topic:has(> figure.pic.side):has(.incidents){min-height:428px}
  .topic:has(> figure.pic.side):has(.incidents) .incidents,
  .recap:has(figure.pic.side):has(.incidents) .incidents{
    position:absolute; right:0; top:384px; width:320px; margin:0}
}
/* На большом экране те же пропорции, но крупнее — иначе на широком мониторе
   картинка и схема тонут в пустом поле рядом с текстом. */
@media (min-width:900px){
  figure.pic{max-width:520px}
  figure{max-width:640px}
  .topic:has(> figure.pic.side), .recap:has(figure.pic.side){padding-right:420px; min-height:430px}
  .topic > figure.pic.side, .recap figure.pic.side{width:400px}
  .topic > figure.pic.side img, .recap figure.pic.side img{max-height:400px}
  .topic:has(> figure.pic.side):has(.incidents){min-height:488px}
  .topic:has(> figure.pic.side):has(.incidents) .incidents,
  .recap:has(figure.pic.side):has(.incidents) .incidents{top:444px; width:400px}
}
/* Настоящий ноутбучный/монитороный экран, а не просто «не телефон». Шаг на
   900px был рассчитан на маленький ноутбук и сам всё ещё упирался в потолок
   на любом мониторе шире — картинки, схемы и рамка лягуха замирали в том же
   размере, что и на планшете, и тонули в пустом поле. hero/h2 в кегле выше
   упирались в потолок ещё раньше (629px/1000px) — досчитываем их тоже здесь,
   а не в :root, чтобы не трогать телефон и маленький ноутбук вообще. */
@media (min-width:1300px){
  :root{
    --t-hero: clamp(44px, 1.1vw + 36px, 56px);
    --t-h2:   clamp(32px, 1vw + 22px, 40px);
  }
  figure.pic{max-width:600px}
  figure{max-width:740px}
  .topic:has(> figure.pic.side), .recap:has(figure.pic.side){padding-right:480px; min-height:480px}
  .topic > figure.pic.side, .recap figure.pic.side{width:460px}
  .topic > figure.pic.side img, .recap figure.pic.side img{max-height:450px}
  .topic:has(> figure.pic.side):has(.incidents){min-height:538px}
  .topic:has(> figure.pic.side):has(.incidents) .incidents,
  .recap:has(figure.pic.side):has(.incidents) .incidents{top:494px; width:460px}
  .hud-frog{width:96px; height:96px}
}

/* Просмотр картинки крупно: клик открывает поверх всего, клик или Esc — закрывает. */
#imgLightbox{position:fixed; inset:0; z-index:250; background:rgba(6,6,5,.94);
  display:flex; align-items:center; justify-content:center; padding:28px; cursor:zoom-out}
#imgLightbox[hidden]{display:none}
#imgLightbox img{max-width:100%; max-height:calc(100% - 50px); object-fit:contain; border:1px solid var(--line)}
#imgLightbox .lbBar{position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:center; padding:14px}
.lbLike{display:flex; align-items:center; gap:7px; background:var(--bg2); border:1px solid var(--line);
  color:var(--muted); padding:8px 16px; font-size:var(--t-body); cursor:pointer; transition:.15s}
.lbLike .h{color:var(--dimmer); font-size:15px; transition:.15s}
.lbLike:hover{border-color:var(--dim)}
.lbLike.on{color:var(--white); border-color:var(--danger)}
.lbLike.on .h{color:var(--danger)}
.lbLike .n{font-variant-numeric:tabular-nums}

/* «Выглядывает»: несколько поз, чтобы жираф не стоял всё время одинаково. */
/* Жираф специально свешивается за край слайда — но свешиваться он должен
   «под страницу», а не расширять её: иначе на телефоне появляется
   горизонтальная прокрутка на десяток пикселей. clip, а не hidden: hidden
   создал бы контейнер прокрутки и сломал бы прилипающие элементы.
   Раньше clip висел на #doc — и заодно обрезал полосу-разделитель между
   слайдами по границе текстовой колонки, а не по краю экрана (та самая
   «полоса с дырками»). clip на body (см. верх файла) одного он и ловит
   реальную прокрутку, а жирафу больше некуда вылезать за пределы экрана. */
.peek{position:absolute; height:auto; opacity:.9; pointer-events:none; user-select:none}
/* Картинка сбоку теперь занимает изрядную часть слайда — жирафу рядом с ней
   почти негде повиснуть, не наехав ни на неё, ни на текст ни на одной
   ширине экрана. Проще не совмещать: там, где уже есть картинка, жираф не
   нужен — она сама достаточно оживляет слайд. */
.topic:has(> figure.pic.side) .peek, .recap:has(figure.pic.side) .peek{display:none}
.peek.p1{right:-18px; bottom:2px; width:104px}                              /* справа снизу */
.peek.p2{left:-22px; bottom:6px; width:78px; transform:scaleX(-1)}          /* слева, отзеркален */
.peek.p3{right:6px; top:-14px; width:66px; transform:rotate(180deg)}        /* сверху вверх ногами */
.peek.p4{right:-30px; bottom:40%; width:132px; opacity:.75; transform:rotate(-14deg)}
@media (max-width:560px){
  .peek.p1{width:76px; right:-14px} .peek.p2{width:58px; left:-16px}
  .peek.p3{width:50px} .peek.p4{width:92px; right:-22px}
}

/* схема: в потоке, по центру своей рамки */
figure{border:1px solid var(--line); background:var(--bg2); max-width:544px}
figure .fw{overflow-x:auto; padding:16px 14px}
figure svg{width:100%; height:auto; color:var(--muted)}
figcaption{font-size:var(--t-small); color:var(--dim); padding:9px 13px; border-top:1px solid var(--line);
  line-height:1.62; background:var(--bg)}
figcaption b{color:var(--white); font-weight:600}

/* Блок кода тянется во всю ширину слайда: вывод команд иначе обрезается. */
.code{border:1px solid var(--line); background:var(--bg2); overflow-x:auto}
.code pre{padding:13px 14px; font-size:var(--t-small); line-height:1.72; color:var(--muted)}
.code .k{color:var(--dim)} .code .v{color:var(--white)}
.code .hl{color:var(--amber)} .code .c{color:var(--dimmer)}

/* детали для тех, кто хочет глубже — по умолчанию свёрнуты */
details.more{max-width:820px; border-top:1px solid var(--line)}
details.more summary{padding:9px 0; font-size:var(--t-small); color:var(--dim); cursor:pointer;
  list-style:none; display:flex; gap:8px; align-items:center}
details.more summary::-webkit-details-marker{display:none}
details.more summary::before{content:"+"; color:var(--amber); font-weight:600; flex:none; width:9px}
details.more[open] summary::before{content:"–"}
details.more summary:hover{color:var(--amber)}
details.more .body{padding:11px 13px 13px; border-top:1px solid var(--line); display:grid; grid-template-columns:minmax(0,1fr); gap:10px}
details.more p{font-size:var(--t-small); line-height:1.72; color:var(--muted)}
details.more p b{color:var(--white); font-weight:600}

/* Итог блока: выделен планкой слева, как и главное утверждение темы —
   рамка с заливкой делала из него ещё одну карточку. */
.recap{margin-top:18px; max-width:760px; scroll-margin-top:132px; position:relative;
  border-left:2px solid var(--amber); padding-left:14px}
.recap .lbl{font-size:var(--t-small); color:var(--dim); padding-bottom:2px}
.recap ol{list-style:none; counter-reset:r}
.recap li{counter-increment:r; padding:10px 0 10px 26px; position:relative;
  border-bottom:1px solid var(--line); font-size:var(--t-body); line-height:1.68; color:var(--muted)}
.recap li:last-child{border-bottom:none}
.recap li::before{content:counter(r); position:absolute; left:0; top:10px;
  color:var(--amber); font-weight:600; font-variant-numeric:tabular-nums}
.recap li b{color:var(--white); font-weight:600}

.foot{margin-top:48px; padding-top:16px; border-top:1px solid var(--line);
  font-size:var(--t-small); color:var(--dimmer); line-height:1.75}
.foot .k{color:var(--dim)}

/* ── отзыв о лекции ─────────────────────────────────────────────────────────
   Не плашка сбоку, а закрывающий блок во всю ширину колонки — та же логика,
   что у .foot над ним: верхняя линия вместо залитого фона, чтобы не читалось
   отдельной серой карточкой. Звёзды растянуты на всю ширину (flex:1 на
   каждую) — это единственный на странице full-width интерактивный элемент,
   и он должен выглядеть как жест, а не как мелкий виджет в углу. */
.feedback{margin-top:48px; padding:36px 0 4px; border-top:1px solid var(--line); text-align:center}
.feedback h4{font-size:var(--t-lead); font-weight:600; color:var(--white); margin:0 0 20px;
  letter-spacing:.02em}
.fb-stars{display:flex; width:100%; margin:0 0 28px}
.fb-star{flex:1; background:none; border:0; padding:6px 2px; font-size:clamp(30px,6vw,44px); line-height:1;
  color:var(--line); cursor:pointer; transition:color .15s, transform .15s}
.fb-star:hover,.fb-star:focus-visible{transform:scale(1.15)}
.fb-star.on,.fb-star.hover{color:var(--amber)}
.fb-inner{max-width:560px; margin:0 auto}
.feedback textarea{width:100%; min-height:84px; resize:vertical; font:inherit;
  font-size:var(--t-small); color:var(--white); background:var(--bg2);
  border:1px solid var(--line); padding:12px 14px; margin-bottom:14px}
.feedback textarea:focus{outline:none; border-color:var(--amber-dim)}
.feedback textarea::placeholder{color:var(--dimmer)}
.fb-row{display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap}
.fb-note{font-size:var(--t-small); color:var(--dimmer)}
.fb-note.err{color:var(--danger)}
.feedback.sent .fb-stars,.feedback.sent textarea,.feedback.sent .fb-row{display:none}
.fb-thanks{display:none; font-size:var(--t-body); color:var(--amber)}
.feedback.sent .fb-thanks{display:block}

/* ── всплывающие листы ────────────────────────────────────────────────────── */
.veil{position:fixed; inset:0; background:rgba(5,5,4,.9); z-index:120;
  display:flex; align-items:flex-end; justify-content:center; animation:fade .18s ease}
@keyframes fade{from{opacity:0} to{opacity:1}}
@media (min-width:560px){.veil{align-items:center; padding:20px}}
.sheet{width:100%; max-width:560px; background:var(--bg2); border:1px solid var(--line);
  padding:20px 16px calc(20px + env(safe-area-inset-bottom)); position:relative;
  max-height:92vh; overflow-y:auto}
@media (min-width:560px){.sheet{padding:22px; max-height:88vh}}
.sheet::before,.sheet::after{content:""; position:absolute; width:12px; height:12px}
.sheet::before{top:-1px; left:-1px; border-top:1px solid var(--amber); border-left:1px solid var(--amber)}
.sheet::after{bottom:-1px; right:-1px; border-bottom:1px solid var(--amber); border-right:1px solid var(--amber)}
.sheet .tag-l{font-size:var(--t-small); color:var(--amber)}
.sheet h3{font-size:var(--t-h3); margin:9px 0 0; letter-spacing:-.02em; line-height:1.22;
  font-weight:600; text-wrap:balance}
.sheet .q{font-size:var(--t-lead); margin:12px 0 0; line-height:1.55; color:var(--white)}
.sheet p{color:var(--muted); font-size:var(--t-body); margin:11px 0 0; line-height:1.68}
.sheet p b{color:var(--white)}
.sheet.lost h3{color:var(--danger)}
.sheet.lost::before{border-color:var(--danger)} .sheet.lost::after{border-color:var(--danger)}
.opts{display:grid; gap:1px; margin-top:16px; background:var(--line); border:1px solid var(--line)}
.opts button{background:var(--bg2); color:var(--white); padding:13px 12px; text-align:left;
  font-size:var(--t-body); line-height:1.5; display:flex; gap:9px; transition:background .14s}
.opts button .ix{color:var(--amber); flex:none; font-weight:600}
.opts button:hover:not(:disabled){background:var(--bg3)}
.opts button:disabled{cursor:default}
.opts button.good{background:#0f1a12; color:var(--ok)} .opts button.good .ix{color:var(--ok)}
.opts button.bad{background:#1a100e; color:var(--danger)} .opts button.bad .ix{color:var(--danger)}
.opts button.faded{opacity:.4}
.flash{padding:11px 13px; font-size:var(--t-small); margin-top:14px; border:1px solid; line-height:1.68}
.flash.ok{background:#0f1a12; color:var(--ok); border-color:#2f5c3a}
.flash.no{background:#1a100e; color:var(--danger); border-color:#5c2a22}
.flash b{font-weight:600}
.flash .why{color:var(--muted); display:block; margin-top:6px}
.sheet .row{margin-top:18px}
.bigclock{font-size:var(--t-h3); font-weight:600; letter-spacing:-.02em; color:var(--amber);
  font-variant-numeric:tabular-nums; margin-top:10px; line-height:1}
.finstage{margin-top:14px; background:var(--bg); border:1px solid var(--line); position:relative;
  display:flex; align-items:flex-end; justify-content:center; min-height:180px; overflow:hidden}
.finstage svg.big{width:min(100%,250px); height:auto}
.finstage .corner{position:absolute; width:11px; height:11px}
.finstage .corner.tl{top:-1px; left:-1px; border-top:1px solid var(--amber); border-left:1px solid var(--amber)}
.finstage .corner.br{bottom:-1px; right:-1px; border-bottom:1px solid var(--amber); border-right:1px solid var(--amber)}
.finstage .finlbl{position:absolute; left:10px; top:9px; font-size:var(--t-small); color:var(--dimmer);}
.finstage .finlbl b{color:var(--frog-lit); font-weight:600}
.finstage .fincond{position:absolute; right:10px; top:8px; font-size:var(--t-small); padding:2px 6px; border:1px solid var(--line); color:var(--dim)}
.finstage .fincond.ok{border-color:#2f5c3a; color:var(--ok)}
.finstage .fincond.warn{border-color:var(--amber-dim); color:var(--amber)}
.finstage .fincond.no{border-color:var(--danger); color:var(--danger)}
.tomb{display:flex; gap:14px; align-items:center; margin-top:14px}
.tomb svg{width:78px; height:78px; flex:none}
.stat-grid{display:grid; grid-template-columns:1fr 1fr; margin-top:16px;
  border-top:1px solid var(--line)}
.stat-grid .c{padding:10px 12px 11px 0; min-width:0; border-bottom:1px solid var(--line)}
.stat-grid .c:nth-child(even){padding-left:14px; border-left:1px solid var(--line)}
.stat-grid .c b{display:block; font-size:var(--t-lead); color:var(--amber); font-weight:600}
.stat-grid .c span{display:block; font-size:var(--t-small); color:var(--dimmer); margin-top:4px}

/* ── болото ───────────────────────────────────────────────────────────────── */
#pond{display:none}
#pond.open{display:block; position:fixed; inset:0; z-index:100; overflow-y:auto;
  background:var(--bg); padding-bottom:calc(24px + env(safe-area-inset-bottom))}
#pond .in{max-width:860px; margin:0 auto; padding:0 clamp(14px,3.5vw,48px); position:relative}
/* Пасхалка текны: болото на «дождь из символов», как экран в фильмах.
   Канвас — фон во всю высоту болота, контент поверх него своим слоем. */
#pondRain{position:absolute; inset:0; z-index:0; width:100%; height:100%;
  pointer-events:none; display:none}
#pond.matrix #pondRain{display:block}
.pond-content{position:relative; z-index:1}
#pond.matrix .pond-content{font-family:ui-monospace,Menlo,monospace}
#pond.matrix .pond-content, #pond.matrix .pond-content *{
  color:#00ff41 !important; text-shadow:0 0 6px rgba(0,255,65,.55)}
#pond.matrix .pond-content .pond-stage{background:rgba(0,20,8,.55); border-color:#0f5f2e}
#pond.matrix .pond-content .cell{background:rgba(0,20,8,.5)}
#pond .head{display:flex; align-items:center; gap:10px; padding:14px 0 12px;
  border-bottom:1px solid var(--line); margin-bottom:14px}
#pond .head b{flex:1; font-size:var(--t-lead); font-weight:600;}
#pond .head .x{background:transparent; border:1px solid var(--line); color:var(--dim);
  font-size:var(--t-small); padding:7px 11px}
#pond .head .x:hover{border-color:var(--amber-dim); color:var(--amber)}
.pdcode{margin:0 0 14px; padding:9px 12px; background:var(--bg2); border:1px solid var(--line);
  font-size:var(--t-small); color:var(--dim); display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.pdcode b{color:var(--amber); font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:.03em;
  font-size:var(--t-body)}
.pdcode button{font:inherit; font-size:var(--t-micro); color:var(--muted); background:var(--bg3);
  border:1px solid var(--line); padding:4px 9px; cursor:pointer; margin-left:auto}
.pdcode button:hover{color:var(--amber); border-color:var(--amber-dim)}
.pond-stage{background:var(--bg2); border:1px solid var(--line); position:relative;
  display:flex; align-items:flex-end; justify-content:center; min-height:196px; overflow:hidden}
.pond-stage svg.big{width:min(100%,262px); height:auto}
.pond-stage .corner{position:absolute; width:11px; height:11px}
.pond-stage .corner.tl{top:-1px; left:-1px; border-top:1px solid var(--amber-dim); border-left:1px solid var(--amber-dim)}
.pond-stage .corner.br{bottom:-1px; right:-1px; border-bottom:1px solid var(--amber-dim); border-right:1px solid var(--amber-dim)}
.pond-stage .lbl{position:absolute; left:10px; top:9px; font-size:var(--t-small); color:var(--dimmer);}
.pond-stage .lbl b{color:var(--frog-lit); font-weight:600}
.pond-stage .say{position:absolute; right:10px; top:9px; max-width:56%; text-align:right;
  font-size:var(--t-small); color:var(--amber); line-height:1.5}
.two{display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line)}
.two .cell{padding:9px 12px 9px 0; min-width:0; overflow-wrap:anywhere;
  border-bottom:1px solid var(--line)}
.two .cell:nth-child(even){padding-left:12px; border-left:1px solid var(--line)}
.two .cell .k{font-size:var(--t-small); color:var(--dimmer);}
.two .cell .v{font-size:var(--t-body); font-weight:600; margin-top:4px;}
.two .cell .v.am{color:var(--amber)} .two .cell .v.fr{color:var(--frog-lit)}
.two .cell .s{font-size:var(--t-small); color:var(--dim); margin-top:3px; line-height:1.5}
.secline{font-size:var(--t-small); color:var(--dimmer);
  margin:18px 0 8px}

/* ── тост ─────────────────────────────────────────────────────────────────── */
#toast{position:fixed; left:0; right:0; bottom:calc(74px + env(safe-area-inset-bottom));
  z-index:110; display:flex; justify-content:center; padding:0 16px; pointer-events:none}
#toast .t{max-width:588px; width:100%; background:var(--bg3); border:1px solid var(--amber-dim);
  border-left-width:2px; padding:9px 12px; font-size:var(--t-small); color:var(--white); line-height:1.55;
  animation:toastin .22s ease}
#toast .t.no{border-color:var(--danger); background:#1a100e; color:var(--danger)}
#toast .t.ok{border-color:#2f5c3a; background:#0f1a12; color:var(--ok)}
#toast .t b{color:var(--amber); font-weight:600}
#toast .t.ok b{color:var(--ok)} #toast .t.no b{color:var(--danger)}
@keyframes toastin{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}
@media (max-width:360px){#app{padding:0 12px} .act .t{font-size:var(--t-micro)} .fact b{font-size:var(--t-h3)}}

/* ── живой канал лекции ────────────────────────────────────────────────────
   Подсказка «ведущая здесь» у студента и панель счётчика у ведущей. Всё
   поверх материала и ничего не сдвигает: лекция должна читаться так же, как
   без канала. */
/* outline, а не ::before: у .topic/.recap/.chapter уже есть свой ::before —
   разделительная полоска на всю ширину страницы (width:100vw; margin-left:-50vw
   чуть выше). Второе правило на том же ::before не складывается с первым, а
   перекрывает его лишь частично по свойствам, и полоска-разделитель протекала
   в рамку: та расползалась вертикальной чертой по центру вместо периметра. */
.topic.teach-here, .recap.teach-here, .chapter.teach-here{
  outline:2px solid var(--amber); outline-offset:10px;
  box-shadow:0 0 24px 4px rgba(255,176,0,.25)}

#teachpanel{position:fixed; right:14px; top:14px; z-index:130; width:230px;
  background:var(--bg3); border:1px solid var(--amber-dim); padding:10px 12px 12px}
#teachpanel .tp-head{display:flex; justify-content:space-between; align-items:baseline;
  font-size:var(--t-micro); letter-spacing:.08em; text-transform:uppercase; color:var(--dimmer)}
#teachpanel .tp-head b{color:var(--amber); font-weight:600}
#teachpanel .tp-x{font:inherit; font-size:var(--t-micro); color:var(--dim);
  background:none; border:0; cursor:pointer; padding:0}
#teachpanel .tp-x:hover{color:var(--amber)}
#teachpanel .tp-now{margin-top:6px; font-size:var(--t-small); color:var(--dim)}
#teachpanel .tp-now b{font-size:var(--t-h3); color:var(--white); font-weight:600;
  font-variant-numeric:tabular-nums}
#teachpanel .tp-clock b{font-size:var(--t-body)}
#teachpanel .tp-clock span{font-size:var(--t-micro); color:var(--dimmer)}
#teachpanel .tp-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line); border:1px solid var(--line); margin-top:9px}
#teachpanel .tp-grid > div{background:var(--bg2); padding:5px 7px}
#teachpanel .tp-grid b{display:block; font-size:var(--t-body); font-weight:600;
  color:var(--white); font-variant-numeric:tabular-nums}
#teachpanel .tp-grid span{font-size:var(--t-micro); color:var(--dimmer)}
#teachpanel .tp-finish{display:block; width:100%; margin-top:9px;
  font:inherit; font-size:var(--t-micro); letter-spacing:.04em; color:var(--bg);
  background:var(--amber); border:0; padding:8px 10px; cursor:pointer}
#teachpanel .tp-finish:hover{background:#ffc233}

#teachgate{position:fixed; inset:0; z-index:200; background:rgba(10,10,9,.92);
  display:flex; align-items:center; justify-content:center; padding:16px}
#teachgate .tg-box{width:100%; max-width:380px; background:var(--bg2);
  border:1px solid var(--line); border-left:2px solid var(--amber); padding:18px}
#teachgate .tg-k{font-size:var(--t-micro); letter-spacing:.1em; text-transform:uppercase;
  color:var(--dimmer)}
#teachgate h3{font-size:var(--t-h3); margin-top:7px}
#teachgate p{font-size:var(--t-small); color:var(--dim); margin-top:7px; line-height:1.6}
#teachgate .tg-err{margin-top:9px; font-size:var(--t-small); color:var(--danger)}
#teachgate input{width:100%; margin-top:12px; font:inherit; font-size:var(--t-body);
  color:var(--white); background:var(--bg); border:1px solid var(--line); padding:9px 11px}
#teachgate input:focus{outline:none; border-color:var(--amber-dim)}
#teachgate .tg-row{display:flex; gap:8px; margin-top:12px}


/* подсказка под кнопкой «Лекция окончена» у ведущей */
#teachpanel .tp-finish:disabled{opacity:.4; cursor:default}
#teachpanel .tp-hint{font-size:var(--t-micro); color:var(--dim); margin-top:6px; text-align:center}