/* KERNEL·21 — презентации к занятиям.
   Показываются на проекторе. Отсюда правила: крупно, контрастно, одна мысль
   на слайд. Размеры в vw/vh, чтобы слайд одинаково ложился на любой экран. */
:root {
  --canvas: #0A0C14;
  --surface: #131827;
  --ink: #E8EBF5;
  --soft: #A9B0C8;          /* светлее, чем на сайте: проектор съедает полутона */
  --dim: #5A6180;
  --accent: #FF3D8B;
  --on-accent: #0A0C14;
  --line: rgba(232, 235, 245, 0.18);
  --ui: "Unbounded", system-ui, sans-serif;
  --mono: "Martian Mono", ui-monospace, Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--canvas); color: var(--ink); overflow: hidden; }
body { font-family: var(--mono); -webkit-font-smoothing: antialiased; cursor: default; user-select: none; }
p, h1, h2, h3, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }

.deck { position: fixed; inset: 0; }
.slide {
  position: absolute; inset: 0; display: none; flex-direction: column; justify-content: center;
  padding: 8vh 8vw 13vh;
}
.slide.on { display: flex; }

/* пошаговое появление внутри слайда */
[data-step] { visibility: hidden; }
[data-step].shown { visibility: visible; }

.s-kicker { font-size: min(1.5vw, 2.6vh); letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); }
.s-h { margin-top: 2.5vh; font: 700 min(4.6vw, 8.4vh)/1.12 var(--ui); letter-spacing: -0.01em; max-width: 82vw; }
.s-p { margin-top: 4vh; max-width: 74vw; font-size: min(2.5vw, 4.4vh); line-height: 1.5; }
.s-note { margin-top: 3vh; max-width: 74vw; font-size: min(1.9vw, 3.3vh); line-height: 1.5; color: var(--soft); }
.s-acc { color: var(--accent); }
.s-term { margin-top: 1.5vh; font: 800 min(9vw, 16vh)/1 var(--ui); color: var(--accent); letter-spacing: -0.01em; }
.s-year { font: 800 min(10vw, 17vh)/1 var(--ui); color: var(--accent); }

/* командная строка */
.s-cmd {
  margin-top: 4vh; align-self: flex-start; padding: 2.4vh 2.2vw;
  background: var(--surface); border: 2px solid var(--line); border-radius: 1vh;
  font-size: min(2.8vw, 5vh); white-space: nowrap;
}
.s-cmd::before { content: "$ "; color: var(--accent); }

.s-list { margin-top: 4.5vh; display: grid; gap: 2.4vh; font-size: min(2.5vw, 4.4vh); line-height: 1.4; }
.s-list li { display: flex; gap: 1.6vw; align-items: baseline; }
.s-list li::before { content: ""; flex: none; width: min(1vw, 1.7vh); height: min(1vw, 1.7vh); background: var(--accent); border-radius: 2px; transform: translateY(-0.15em); }

/* вопросы с командами: команда слева, вопрос справа */
.s-ask { margin-top: 4.5vh; display: grid; gap: 2.6vh; font-size: min(2.3vw, 4vh); line-height: 1.35; }
.s-ask li { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 3vw; align-items: baseline; }
.s-ask code { font: inherit; color: var(--accent); white-space: nowrap; }
.s-ask code::before { content: "$ "; color: var(--dim); }

/* слои системы */
.s-stack { margin-top: 4.5vh; display: grid; gap: 1.2vh; width: min(64vw, 110vh); }
.s-stack div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 2vw;
  padding: 2.2vh 2vw; border: 2px solid var(--line); border-radius: 1vh;
  font: 600 min(2.4vw, 4.2vh) var(--ui);
}
.s-stack div span { font: 400 min(1.7vw, 3vh) var(--mono); color: var(--soft); }
.s-stack .core { border-color: var(--accent); background: rgba(255, 61, 139, 0.12); color: var(--accent); }
.s-stack .you { border-style: dashed; }

/* формула */
.s-sum { margin-top: 5vh; display: flex; align-items: center; gap: 2.4vw; font: 800 min(5vw, 9vh) var(--ui); }
.s-sum i { font-style: normal; color: var(--dim); }
.s-sum b { color: var(--accent); }

/* правда или байка */
.s-verdict {
  margin-top: 5vh; align-self: flex-start; padding: 1.6vh 2.4vw; border-radius: 1vh;
  font: 800 min(4vw, 7vh)/1 var(--ui); letter-spacing: 0.04em;
}
.s-verdict.yes { background: var(--accent); color: var(--on-accent); }
.s-verdict.no { border: 3px dashed var(--ink); color: var(--ink); }

/* титул */
.boot { font-size: min(1.8vw, 3.2vh); line-height: 1.7; color: var(--soft); }
.boot b { color: var(--accent); font-weight: 600; white-space: pre; }
.slide.on .boot p { opacity: 0; animation: boot-in 0.01s linear forwards; }
.slide.on .boot p:nth-child(1) { animation-delay: 0.3s; }
.slide.on .boot p:nth-child(2) { animation-delay: 0.9s; }
.slide.on .boot p:nth-child(3) { animation-delay: 1.5s; }
.slide.on .boot p:nth-child(4) { animation-delay: 2.3s; }
.slide.on .title-in { opacity: 0; animation: boot-in 0.4s ease-out 2.9s forwards; }
@keyframes boot-in { to { opacity: 1; } }
.title { margin-top: 5vh; font: 800 min(7.2vw, 15vh)/1 var(--ui); letter-spacing: -0.01em; }
.title b { color: var(--accent); }
.tux { position: absolute; right: 7vw; bottom: 11vh; height: 66vh; width: auto; }
/* слайд с пингвином справа: текст не заходит под него */
.with-tux > :not(.tux) { max-width: 58vw; }

.deck-bar {
  position: fixed; left: 8vw; right: 8vw; bottom: 5vh;
  display: flex; align-items: center; justify-content: space-between; pointer-events: none;
}
.deck-dots { display: flex; gap: min(0.5vw, 0.9vh); flex-wrap: wrap; max-width: 70vw; }
.deck-dots i { width: min(0.9vw, 1.5vh); height: min(0.9vw, 1.5vh); border: 1px solid var(--dim); border-radius: 2px; }
.deck-dots i.x { border-style: dashed; }
.deck-dots i.done { background: rgba(255, 61, 139, 0.35); border-color: transparent; }
.deck-dots i.now { background: var(--accent); border-color: var(--accent); }
.deck-num { font-size: min(1.3vw, 2.2vh); letter-spacing: 0.2em; color: var(--dim); }

/* B — чёрный экран, пока дети работают за компьютерами */
.blank .deck, .blank .deck-bar { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .slide.on .boot p, .slide.on .title-in { animation: none; opacity: 1; }
}

/* текст слева, фото справа */
.s-row { margin-top: 1vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 4vw; align-items: center; width: 100%; }
.s-row .s-p, .s-row .s-note { max-width: none; }
.s-row .s-h { font-size: min(3.7vw, 6.8vh); }
.s-row .s-year { font-size: min(7.5vw, 13vh); }
.s-row .s-p { margin-top: 3vh; font-size: min(2.2vw, 3.9vh); }
.s-fig { margin: 0; }
.s-fig img { display: block; width: 100%; max-height: 68vh; object-fit: cover; border-radius: 1vh; border: 2px solid var(--line); }
.s-fig.small img { width: auto; max-width: 100%; height: auto; max-height: 34vh; }
.s-fig.tall img { aspect-ratio: 3 / 4; }
.s-fig figcaption { margin-top: 1.2vh; font-size: min(1vw, 1.8vh); line-height: 1.4; color: var(--dim); }

/* лестница версий на год */
.s-vers { margin-top: 4vh; display: grid; grid-template-columns: 1fr 1fr; gap: 1.6vh 4vw; font-size: min(2.1vw, 3.7vh); line-height: 1.3; }
.s-vers li { display: flex; gap: 1.6vw; align-items: baseline; padding-bottom: 1.4vh; border-bottom: 1px solid var(--line); }
.s-vers b { flex: none; width: 3.2em; color: var(--accent); font-weight: 600; }
.s-vers li.fin { color: var(--accent); }
.s-kicker b { font-weight: 600; color: var(--ink); }

/* фото на белом фоне: подкладка, чтобы не выглядело вырезанным квадратом */
.s-fig.robot img { background: #fff; object-fit: contain; aspect-ratio: 1; padding: 2vh; }

/* список «имя — пояснение» в две колонки: звери зоопарка */
.s-zoo { margin-top: 4vh; display: grid; grid-template-columns: 1fr 1fr; gap: 1.8vh 4vw; font-size: min(2vw, 3.5vh); line-height: 1.3; }
.s-zoo li { display: grid; gap: 0.4vh; padding-bottom: 1.4vh; border-bottom: 1px solid var(--line); color: var(--soft); }
.s-zoo b { font: 700 min(2.4vw, 4.2vh) var(--ui); color: var(--ink); }
.s-zoo li.own b { color: var(--accent); }

/* вопрос и ответ, ответ открывается по шагу */
.s-pairs { margin-top: 4.5vh; display: grid; gap: 2.6vh; font-size: min(2.4vw, 4.2vh); line-height: 1.35; }
.s-pairs li { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 3vw; align-items: baseline; padding-bottom: 1.6vh; border-bottom: 1px solid var(--line); }
.s-pairs b { font: 700 min(2.6vw, 4.6vh) var(--ui); color: var(--accent); }

/* скриншот системы: показываем целиком, без обрезки */
.s-fig.shot img { object-fit: contain; width: 100%; height: auto; max-height: 64vh; background: #000; }
.s-fig.phone img { object-fit: contain; width: auto; max-width: 100%; height: 66vh; margin: 0 auto; background: #000; }

/* две картинки рядом с подписями */
.s-duo { margin-top: 3.5vh; display: grid; grid-template-columns: 1fr 1fr; gap: 3vw; width: 100%; }
.s-duo figure { margin: 0; }
.s-duo img { display: block; width: 100%; max-height: 50vh; object-fit: contain; background: #000; border-radius: 1vh; border: 2px solid var(--line); }
.s-duo figcaption { margin-top: 1.4vh; font: 700 min(2vw, 3.6vh) var(--ui); }
.s-duo figcaption span { display: block; margin-top: 0.6vh; font: 400 min(1.5vw, 2.7vh) var(--mono); color: var(--soft); }

/* доли: подпись, полоса, число */
.s-bars { margin-top: 4.5vh; display: grid; gap: 2.6vh; width: min(80vw, 150vh); font-size: min(2.1vw, 3.7vh); }
.s-bars li { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) 10.5em; gap: 2vw; align-items: center; }
.s-bars i { display: block; height: 3.4vh; border-radius: 0.6vh; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.s-bars i::after { content: ""; display: block; height: 100%; width: var(--v); background: var(--accent); }
.s-bars b { font: 700 min(2.4vw, 4.2vh) var(--ui); color: var(--accent); white-space: nowrap; }
.s-bars li.low i::after { background: var(--soft); }
.s-bars li.low b { color: var(--soft); }

/* экран текстовой системы */
.s-tty {
  margin: 0; padding: 3vh 2.4vw; background: #000; border: 2px solid var(--line); border-radius: 1vh;
  font: 400 min(1.7vw, 3vh)/1.55 var(--mono); color: #C8F7C5; white-space: pre; overflow: hidden;
}

/* семьи дистрибутивов: предок слева, потомки справа */
.s-fam { margin-top: 4vh; display: grid; gap: 1.8vh; font-size: min(2vw, 3.6vh); line-height: 1.3; }
.s-fam li { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 2vw; align-items: baseline; padding-bottom: 1.5vh; border-bottom: 1px solid var(--line); color: var(--soft); }
.s-fam b { font: 700 min(2.4vw, 4.2vh) var(--ui); color: var(--ink); }
.s-fam li.own b, .s-fam .s-acc { color: var(--accent); }

/* слои, когда их пять и больше */
.s-stack.tight { margin-top: 3vh; gap: 0.9vh; width: min(70vw, 124vh); }
.s-stack.tight div { padding: 1.5vh 2vw; font-size: min(2.2vw, 3.8vh); }
.s-stack.tight + .s-note { margin-top: 2.2vh; }

/* заголовок части */
.s-part { font: 800 min(6.4vw, 11.5vh)/1.05 var(--ui); letter-spacing: -0.01em; margin-top: 2vh; max-width: 80vw; }
.s-part b { color: var(--accent); }

/* дерево папок: имена ярче пояснений */
.s-tty.tree { color: var(--soft); font-size: min(1.75vw, 3.1vh); line-height: 1.7; padding: 3vh 2vw; }
.s-tty.tree b { color: var(--accent); font-weight: 600; }
/* путь или адрес в рамке, без значка приглашения */
.s-cmd.nop::before { content: none; }