/* Оформление страниц лекций. Общее для всех шести: одна шкала кегля,
   волосяные линии вместо плашек, янтарь по бюджету. Раньше эти правила
   лежали внутри 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, 21px);
  --t-lead:  15px;
  --t-body:  14px;
  --t-small: 12px;
  --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:1000px; 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}

/* ── стартовый экран ──────────────────────────────────────────────────────
   Одно действие на экран: кнопка «Начать лекцию» единственная янтарная, всё
   остальное — либо текст, либо ссылка, либо спрятано под «подробнее». Правил
   на первом экране ровно три: те, без которых лягух погибнет. Остальное там
   же, но раскрывается по желанию. ─────────────────────────────────────────── */
.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:1000px; 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)}
}
@media (prefers-reduced-motion:reduce){
  #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 .3s 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}
@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; border-top:1px solid var(--line)}
.toc a{display:flex; gap:10px; padding:10px 2px; border-bottom:1px solid var(--line);
  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::before{content:"▸"; position:absolute; left:0; color:var(--amber-dim)}

/* ── тема: утверждение, потом доказательство ─────────────────────────────
   Один принцип на все блоки: в рамке живёт только схема. Раньше каждый блок
   был карточкой с заливкой и рамкой, и страница читалась стопкой плашек —
   глазу было не за что зацепиться, потому что выделено было всё. Теперь
   группировку держат волосяные линии, а акцент — одна янтарная планка слева
   у главного утверждения. Янтарь остался числам, коду и этой планке. */
/* ── слайд ────────────────────────────────────────────────────────────────
   Материал листается вниз, но границы слайдов видны: сверху каждого — полоска
   и номер. Ведущий называет номер голосом, студент листает и сверяется. */
.topic, .recap, .chapter{border-top:1px solid var(--dimmer); padding-top:7px}
.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::before{content:"▸"; position:absolute; left:0; color:var(--amber-dim)}
ul.keys li b{color:var(--white); font-weight:600}

/* сравнение двух вариантов: разделяет одна вертикальная линия */
.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)}
@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::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}

/* врезки: планка слева и всё, тип назван словом */
.note,.warn{font-size:var(--t-small); line-height:1.68; padding:2px 0 2px 14px;
  overflow-wrap:anywhere; max-width:820px; color:var(--muted)}
.note{border-left:2px solid var(--line)}
.warn{border-left:2px solid var(--danger)}
.note b,.warn b{color:var(--white); font-weight:600}
.note::before{content:"на практике"; display:block; font-size:var(--t-small);
  color:var(--dim); margin-bottom:4px}
.warn::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}
figure.pic img{display:block; width:100%; height:auto}
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}
@media (min-width:620px){
  /* Картинка выведена из потока: если оставить её строкой сетки, её высота
     растягивает строку и уводит заголовок вниз. Место под неё освобождает
     правый отступ самого слайда. */
  .topic:has(> figure.pic.side){padding-right:258px}
  .topic > figure.pic.side{position:absolute; right:0; top:30px; width:240px; margin:0}
  .topic > figure.pic.side img{max-height:260px; object-fit:cover; object-position:center}
}

/* «Выглядывает»: несколько поз, чтобы жираф не стоял всё время одинаково. */
.peek{position:absolute; height:auto; opacity:.9; pointer-events:none; user-select: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; max-width:560px}
.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;
  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; border-top:1px solid var(--line)}
.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::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)}

/* ── всплывающие листы ────────────────────────────────────────────────────── */
.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)}
#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)}
.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}
.wear{padding:9px 0; font-size:var(--t-small); color:var(--dim); line-height:1.6;
  border-bottom:1px solid var(--line)}
.wear b{color:var(--amber); font-weight:600}
.nextup{padding:9px 0; font-size:var(--t-small); color:var(--dim); line-height:1.62;
  border-bottom:1px solid var(--line)}
.nextup b{color:var(--white); font-weight:600}
.nextup::before{content:"▸ "; color:var(--amber-dim)}
.ladder{display:grid; border-top:1px solid var(--line)}
.ladder .lr{padding:8px 0; font-size:var(--t-small); color:var(--dimmer);
  border-bottom:1px solid var(--line)}
.ladder .lr .top{display:flex; gap:9px; align-items:baseline}
.ladder .lr .nm{flex:1; min-width:0; font-weight:600}
.ladder .lr .rq{flex:none; font-variant-numeric:tabular-nums}
.ladder .lr .wr{font-size:var(--t-small); color:var(--dimmer); margin-top:3px; opacity:.85}
/* текущая ступень выделена планкой, а не заливкой */
.ladder .lr.on{color:var(--white); border-left:2px solid var(--amber); padding-left:11px}
.ladder .lr.on .nm{color:var(--amber)}
.ladder .lr.on .wr{color:var(--dim); opacity:1}
.ladder .lr.done{color:var(--dim)} .ladder .lr.done .nm{color:var(--frog-lit)}
.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)}}