/* =========================================================
   МДК.04.01 · ТЕХНОЛОГИЯ РАЗРАБОТКИ И ЗАЩИТЫ БАЗ ДАННЫХ
   Светлая тема: почти белая бумага, тёмно-синий текст,
   жёсткие рамки и hard-shadow как признак семейства колод.
   От ОП.03 и ОП.04 отличается палитрой, пиксельными
   заголовками и тем, что консоли остаются тёмными.
   ========================================================= */

:root {
  --bg:        #EEF1F7;
  --panel:     #FFFFFF;
  --panel-2:   #E3E9F3;
  --ink:       #16203A;
  --muted:     #5A6683;
  --line:      #16203A;   /* несущие рамки — цветом текста */
  --hair:      #C6D0E2;   /* внутренние разделители */
  --hard:      #16203A;   /* цвет жёсткой тени */

  --amber:  #B45309;
  --violet: #6D28D9;
  --cyan:   #0E7490;
  --coral:  #BE123C;
  --mint:   #15803D;
  --accent: var(--cyan);

  --display: "Handjet", "JetBrains Mono", monospace;  /* заголовки: пиксельный, вариативный */
  --body:    "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono:    "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --pixel:   "Handjet", "JetBrains Mono", monospace;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--bg); }
body { color: var(--ink); font-family: var(--body); -webkit-font-smoothing: antialiased; }
button, a { font: inherit; }
button { color: inherit; }
code { font-family: var(--mono); }

/* ---------- заставка: остаётся тёмной, чтобы колода «включалась» ---------- */
.boot {
  position: fixed; inset: 0; z-index: 200; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 40px;
  background:
    radial-gradient(circle at 22% 18%, rgba(34,211,238,.20), transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(167,139,250,.18), transparent 44%),
    #101728;
}
.boot.is-gone { animation: bootLeave .55s steps(9, end) forwards; pointer-events: none; }
.boot__grid {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(150,185,235,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(150,185,235,.08) 1px, transparent 1px);
  background-size: 34px 34px;
}
.boot-card {
  position: relative; width: min(790px, 93vw); border: 3px solid #22D3EE; background: rgba(16,23,40,.96);
  box-shadow: 0 0 0 4px rgba(34,211,238,.15), 0 0 60px rgba(34,211,238,.3);
}
.boot-card__top {
  display: flex; justify-content: space-between; gap: 14px; padding: 9px 15px;
  background: #22D3EE; color: #101728; font: 600 10px/1 var(--mono); letter-spacing: .08em;
}
.boot-card__title { margin: 0; padding: 26px 30px 12px; color: #F2F5FC; font: 700 clamp(22px, 2.8vw, 38px)/1.16 var(--display); letter-spacing: .01em; }
.boot-card__title em { color: #22D3EE; font-style: normal; }
.boot-card__fields { margin: 0; padding: 0 30px 26px; }
.boot-card__fields > div {
  display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: baseline;
  margin-top: 9px; padding-top: 9px; border-top: 1px dashed rgba(150,185,235,.26); opacity: 0;
}
.boot-card__fields dt { color: #FBBF24; font: 600 11px/1 var(--pixel); letter-spacing: 1px; }
.boot-card__fields dd { margin: 0; color: #C6D2EA; font-size: clamp(13px, 1.1vw, 16px); line-height: 1.4; }
.boot-card__fields > div:nth-child(1) { animation: bootLine .01s .25s forwards; }
.boot-card__fields > div:nth-child(2) { animation: bootLine .01s .48s forwards; }
.boot-card__fields > div:nth-child(3) { animation: bootLine .01s .71s forwards; }
.boot-card__fields > div:nth-child(4) { animation: bootLine .01s .94s forwards; }
.boot__hint { margin: 0; color: #9FB0D4; font: 600 11px/1 var(--pixel); letter-spacing: 1px; opacity: 0; animation: bootLine .01s 1.3s forwards; }
.boot__hint i { color: #22D3EE; font-style: normal; animation: nudge 1.1s steps(2) infinite; }
@keyframes bootLine { to { opacity: 1; } }
@keyframes bootLeave { to { clip-path: inset(0 0 100% 0); opacity: 0; } }
@keyframes nudge { 50% { transform: translateX(5px); } }

/* ---------- каркас ---------- */
.deck { position: relative; width: 100%; height: 100%; min-height: 540px; background: var(--bg); overflow: hidden; isolation: isolate; }
.deck::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(22,32,58,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(22,32,58,.055) 1px, transparent 1px);
  background-size: 36px 36px;
}
.deck::after {
  content: ""; position: absolute; right: -18vw; bottom: -26vw; width: 42vw; height: 42vw; border-radius: 50%;
  background: var(--accent); filter: blur(140px); opacity: .07; transition: background .45s ease; pointer-events: none;
}

.chrome {
  position: absolute; z-index: 20; top: 0; left: 0; right: 0; height: 72px; padding: 14px 26px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 3px solid var(--line); background: rgba(238,241,247,.96);
}
.brand { display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; }
.brand-mark {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 3px solid var(--line);
  background: var(--accent); color: #fff; box-shadow: 3px 3px 0 var(--hard);
  font: 700 16px/1 var(--pixel); white-space: nowrap; transition: background .45s ease;
}
.brand-mark span { opacity: .6; margin: 0 1px; }
.brand-copy { color: var(--muted); font: 600 10px/1.25 var(--pixel); letter-spacing: .08em; text-transform: uppercase; }
.chrome-right { display: flex; align-items: center; gap: 10px; }
.icon-button, .nav-button {
  border: 3px solid var(--line); background: var(--panel); color: var(--ink); box-shadow: 3px 3px 0 var(--hard);
  cursor: pointer; font-family: var(--pixel); transition: transform .08s steps(2), box-shadow .08s steps(2), color .18s;
}
.icon-button { width: 40px; height: 40px; font-weight: 700; }
.icon-button:hover, .nav-button:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--hard); color: var(--accent); }
.counter { min-width: 82px; margin-left: 8px; font: 700 15px/1 var(--mono); letter-spacing: .03em; }
.counter i { margin: 0 6px; color: var(--hair); font-style: normal; }
.counter #currentNumber { color: var(--accent); }

.slides { position: absolute; inset: 72px 0 56px; }
.slide {
  position: absolute; inset: 0; visibility: hidden; opacity: 0; overflow: hidden;
  clip-path: inset(0 0 0 100%);
  transition: clip-path .42s steps(9, end), opacity .16s linear, visibility 0s .42s;
}
.slide.is-active { visibility: visible; opacity: 1; clip-path: inset(0); transition: clip-path .42s steps(9, end), opacity .16s linear; z-index: 2; }
.slide.is-leaving-left { visibility: visible; opacity: 1; clip-path: inset(0 100% 0 0); z-index: 1; }
.slide[data-accent="cyan"]   { --accent: var(--cyan); }
.slide[data-accent="amber"]  { --accent: var(--amber); }
.slide[data-accent="violet"] { --accent: var(--violet); }
.slide[data-accent="coral"]  { --accent: var(--coral); }
.slide[data-accent="mint"]   { --accent: var(--mint); }

.slide--title { background: radial-gradient(circle at 78% 40%, rgba(14,116,144,.10), transparent 40%), var(--bg); }
.slide--map   { background: radial-gradient(circle at 50% 55%, rgba(14,116,144,.06), transparent 60%); }
.slide--final { background: radial-gradient(circle at 24% 30%, rgba(180,83,9,.10), transparent 42%), var(--bg); }

.slide-inner {
  position: relative; width: min(1460px, calc(100% - 7vw)); height: 100%; margin: 0 auto;
  padding: clamp(20px, 3vh, 38px) 0; display: flex; flex-direction: column; justify-content: center;
  overflow-x: hidden; overflow-y: auto; scrollbar-width: thin;
}
.pair-number {
  position: absolute; z-index: 3; right: 0; top: 16px; padding: 6px 10px;
  border: 3px solid var(--line); background: var(--accent); color: #fff;
  box-shadow: 3px 3px 0 var(--hard); font: 700 10px/1 var(--mono); letter-spacing: .04em;
}

/* ---------- типографика ---------- */
/* Заголовки — Handjet: пиксельный, но с настоящими весами и нормальной
   кириллицей, поэтому кегль обычный, а трекинг чуть положительный. */
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: .01em; text-wrap: balance; }
h1 code, h2 code, h3 code { font: inherit; color: var(--accent); }
h1 { margin: 0; font-size: clamp(36px, 4.8vw, 74px); line-height: 1.04; font-weight: 700; }
h2 { margin: 0; font-size: clamp(25px, 2.8vw, 44px); line-height: 1.08; font-weight: 700; }
/* Заголовки карточек — тоже пиксельные. Длинные описания под ними остаются
   наборными: пиксельный шрифт хорош на коротких строках, не на абзацах. */
/* Число внутри пиксельного заголовка — моноширинным: у Handjet ноль перечёркнут. */
.num { font-family: var(--mono); font-weight: 700; letter-spacing: -.03em; }
.works strong, .contours strong, .stages strong {
  font-family: var(--display); font-weight: 600; letter-spacing: .015em;
}
.pg-list b { font-family: var(--body); letter-spacing: -.01em; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 1.8vh;
  color: var(--accent); font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
}
.eyebrow::before { content: ""; flex: none; width: 10px; height: 10px; background: currentColor; }
.lead { max-width: 860px; margin: 2.2vh 0 0; color: #333F5E; font-size: clamp(14px, 1.25vw, 20px); line-height: 1.5; text-wrap: balance; }
.lead strong { color: var(--ink); }
.note { margin: 2vh 0 0; color: var(--muted); font-size: clamp(12px, 1.02vw, 16px); line-height: 1.45; }
.note b { color: var(--ink); }
.callout {
  max-width: 940px; margin-top: 2.4vh; padding: 13px 17px;
  border-left: 6px solid var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--panel));
  color: #333F5E; font-size: clamp(13px, 1.08vw, 17px); line-height: 1.45;
}
.callout b { color: var(--ink); }

.title-meta { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 3.2vh; }
.title-meta span {
  padding: 10px 14px; border: 3px solid var(--line); background: var(--panel);
  color: var(--ink); font: 600 11px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase;
}

/* =========================================================
   ВЕДУЩИЙ ПРИЁМ · КАРТА ПЛАТФОРМЫ
   Схема из семи узлов, по которой едет одно событие.
   Точка движется по CSS offset-path.
   ========================================================= */
.pmap { margin-top: 2.2vh; width: 100%; }
.pmap svg { display: block; width: 100%; height: auto; max-height: 56vh; overflow: visible; }

.pmap .wire { fill: none; stroke: #93A1BF; stroke-width: 3; }
.pmap .wire--dash { stroke-dasharray: 9 7; }
.pmap .node rect { fill: var(--panel); stroke: var(--line); stroke-width: 3; }
.pmap .node .shadow { fill: rgba(22,32,58,.16); stroke: none; }
.pmap .node .kind { font: 600 11px/1 var(--pixel); letter-spacing: .08em; fill: var(--muted); }
.pmap .node .name { font: 600 20px/1 var(--display); fill: var(--ink); letter-spacing: .01em; }
.pmap .node .role { font: 400 12px/1 var(--body); fill: var(--muted); }

.pmap .n-sql   .kind { fill: var(--amber); }   .pmap .n-sql   rect { stroke: var(--amber); }
.pmap .n-mongo .kind { fill: var(--mint); }    .pmap .n-mongo rect { stroke: var(--mint); }
.pmap .n-ch    .kind { fill: var(--violet); }  .pmap .n-ch    rect { stroke: var(--violet); }
.pmap .n-redis .kind { fill: var(--coral); }   .pmap .n-redis rect { stroke: var(--coral); }
.pmap .n-mq    .kind { fill: var(--cyan); }    .pmap .n-mq    rect { stroke: var(--cyan); }

.pmap .pkt { fill: var(--cyan); offset-rotate: 0deg; opacity: 0; stroke: var(--panel); stroke-width: 2.5; }
.pmap .pkt--main  { offset-path: path("M 176 232 H 352 V 366 H 654 C 748 366 766 238 952 238"); }
.pmap .pkt--fan   { offset-path: path("M 654 366 C 762 366 786 380 952 380"); }
.pmap .pkt--cache { offset-path: path("M 96 192 V 104 H 652"); fill: var(--coral); }
.slide.is-active .pmap .pkt--main  { animation: pktRun 4.6s linear .35s infinite; }
.slide.is-active .pmap .pkt--fan   { animation: pktRun 4.6s linear 2.9s infinite; }
.slide.is-active .pmap .pkt--cache { animation: pktRun 4.6s linear 1.5s infinite; }
@keyframes pktRun {
  0%   { offset-distance: 0%;   opacity: 0; }
  8%   { opacity: 1; }
  62%  { offset-distance: 100%; opacity: 1; }
  74%  { offset-distance: 100%; opacity: 0; }
  100% { offset-distance: 100%; opacity: 0; }
}
.pmap .wirelabel { font: 600 11px/1 var(--mono); fill: var(--muted); letter-spacing: .03em; }

/* полоса узлов: карта, свёрнутая до участка раздела */
.pstrip { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 1.8vh; }
.pstrip span {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px;
  border: 2px solid var(--hair); background: var(--panel); color: #93A1BF;
  font: 600 11px/1 var(--mono); letter-spacing: .03em;
}
.pstrip span::before { content: ""; width: 8px; height: 8px; background: currentColor; flex: none; }
.pstrip span.lit { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--panel)); box-shadow: 3px 3px 0 var(--hard); }

/* =========================================================
   ПЯТЬ КОНТУРОВ · сильная сторона против главного риска
   ========================================================= */
.contours { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 2.2vh; }
.contours article {
  display: flex; flex-direction: column; padding: 15px 16px;
  border: 3px solid var(--line); background: var(--panel); box-shadow: 4px 4px 0 var(--hard);
}
.contours b { color: var(--accent); font: 700 13px/1.3 var(--mono); letter-spacing: -.02em; }
.contours strong { margin-top: 9px; font: 600 clamp(15px, 1.32vw, 21px)/1.25 var(--display); }
.contours .plus, .contours .risk { margin: 10px 0 0; padding-left: 15px; position: relative; font-size: clamp(11px, .93vw, 14px); line-height: 1.4; }
.contours .plus  { color: #333F5E; }
.contours .risk  { color: #9F1239; }
.contours .plus::before { content: "+"; position: absolute; left: 0; color: var(--mint); font-weight: 700; }
.contours .risk::before { content: "!"; position: absolute; left: 2px; color: var(--coral); font-weight: 700; }
.contours em {
  display: block; margin-top: auto; padding-top: 11px; color: var(--accent);
  font: 600 10px/1.35 var(--mono); font-style: normal; letter-spacing: .04em; text-transform: uppercase;
}

/* =========================================================
   ПОЛОСА ГОДА · 57 делений, окрашенных по разделам
   ========================================================= */
.semester { margin-top: 2.2vh; display: grid; gap: 14px; }
.semester__row { display: grid; grid-template-columns: 118px 1fr; gap: 14px; align-items: center; }
.semester__tag { font: 600 11px/1.4 var(--pixel); letter-spacing: .06em; color: var(--muted); text-transform: uppercase; }
.semester__tag b { display: block; color: var(--ink); font: 700 14px/1.3 var(--mono); letter-spacing: -.02em; }
.semester__cells { display: flex; gap: 3px; }
.semester__cells i {
  position: relative; flex: 1; height: 42px; border: 2px solid var(--line);
  background: var(--c); font-style: normal; transition: transform .18s;
}
.semester__cells i.solo { background: repeating-linear-gradient(45deg, var(--c) 0 4px, #fff 4px 8px); }
.semester__cells i:hover { transform: translateY(-4px); }
.semester__cells i b { position: absolute; inset: auto 0 3px; text-align: center; color: #fff; font: 700 9px/1 var(--mono); }
.semester__cells i.solo b { color: var(--ink); }
.semester__legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 1.4vh; }
.semester__legend span {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px;
  border: 2px solid var(--hair); background: var(--panel); color: #333F5E; font: 600 10.5px/1 var(--mono);
}
.semester__legend i { width: 10px; height: 10px; background: var(--c); flex: none; }
.semester__legend em { color: var(--muted); font-style: normal; }

/* =========================================================
   РАЗДЕЛ КУРСА · что собираем и чем это проверяется
   ========================================================= */
.block-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.block-head .hours { padding: 6px 10px; border: 2px solid var(--accent); color: var(--accent); font: 600 11px/1 var(--mono); letter-spacing: .05em; }
.works { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 2.2vh; }
.works article {
  display: flex; flex-direction: column; padding: 17px 19px;
  border: 3px solid var(--line); background: var(--panel); box-shadow: 5px 5px 0 var(--hard);
}
.works .idx { color: var(--accent); font: 700 clamp(22px, 2.2vw, 34px)/1 var(--mono); letter-spacing: -.03em; }
.works strong { margin-top: 10px; font: 600 clamp(16px, 1.45vw, 24px)/1.25 var(--display); }
.works p { margin: 10px 0 0; color: #333F5E; font-size: clamp(12px, 1.02vw, 16px); line-height: 1.45; }
.works p code { color: var(--accent); }
.works em { display: block; margin-top: auto; padding-top: 13px; color: var(--muted); font: 600 10px/1.4 var(--mono); font-style: normal; letter-spacing: .05em; text-transform: uppercase; }
.works .out { border-color: var(--accent); }
.works .out em { color: var(--accent); }
.works--duo  { grid-template-columns: repeat(2, 1fr); }
.works--quad { grid-template-columns: repeat(4, 1fr); }
.works--quad article { padding: 14px 15px; }
.works--quad strong { font-size: clamp(14px, 1.2vw, 19px); }
.works--quad p { font-size: clamp(11px, .92vw, 14px); }

/* =========================================================
   ЧАСЫ ЗАНЯТИЯ · 90 минут по секторам
   ========================================================= */
.clock-layout { display: grid; grid-template-columns: minmax(240px, .74fr) 1.26fr; gap: clamp(24px, 3.4vw, 58px); align-items: center; }
.clock { width: 100%; max-width: 320px; justify-self: center; }
.clock svg { display: block; width: 100%; height: auto; }
.clock .track { fill: none; stroke: var(--hair); stroke-width: 26; }
.clock .arc { fill: none; stroke-width: 26; stroke-linecap: butt; }
.clock .arc.fragment { opacity: 0; transition: opacity .3s ease-out; }
.clock .arc.fragment.revealed { opacity: 1; }
.clock .hub { font: 700 32px/1 var(--mono); fill: var(--ink); }
.clock .hub-sub { font: 600 10px/1 var(--pixel); fill: var(--muted); letter-spacing: .12em; }
.slide.is-active .clock .hand { animation: sweep 9s linear infinite; transform-origin: 130px 130px; }
@keyframes sweep { to { transform: rotate(360deg); } }

.stages { display: grid; gap: 8px; }
.stages > div { display: grid; grid-template-columns: 74px 1fr; gap: 15px; align-items: baseline; padding: 11px 14px; border-left: 6px solid var(--c); background: var(--panel); box-shadow: 3px 3px 0 rgba(22,32,58,.12); }
.stages b { color: var(--c); font: 700 12px/1.3 var(--mono); }
.stages strong { display: block; font-size: clamp(14px, 1.16vw, 18px); }
.stages span { display: block; margin-top: 4px; color: var(--muted); font-size: clamp(11px, .93vw, 14px); line-height: 1.4; }

/* =========================================================
   КОНСОЛЬ POSTGRESQL — остаётся тёмной на светлой бумаге
   ========================================================= */
.psql { margin-top: 2vh; border: 3px solid var(--line); background: #101728; box-shadow: 6px 6px 0 var(--hard); overflow: hidden; }
.psql__bar { display: flex; align-items: center; gap: 9px; padding: 9px 14px; background: #1B2540; border-bottom: 3px solid #2E3B5C; color: #93A2C2; font: 600 11px/1 var(--mono); }
.psql__bar i { width: 9px; height: 9px; flex: none; }
.psql__bar i:first-child { background: #FB7185; } .psql__bar i:nth-child(2) { background: #F5A524; } .psql__bar i:nth-child(3) { background: #4ADE80; }
.psql__bar span { margin-left: auto; color: #6B7A9C; }
.psql pre { margin: 0; padding: 18px 20px; font: 500 clamp(11.5px, 1.02vw, 16px)/1.75 var(--mono); color: #D3DDF2; overflow-x: auto; }
.psql .kw  { color: #C4B5FD; font-weight: 700; }
.psql .fn  { color: #67E8F9; }
.psql .str { color: #86EFAC; }
.psql .cm  { color: #6B7A9C; }
.psql .id  { color: #FCD34D; }
.psql .caret { display: inline-block; width: 9px; height: 1.05em; margin-left: 3px; background: #67E8F9; vertical-align: -.2em; }
.slide.is-active .psql .caret { animation: blink 1.05s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.pg-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(18px, 2.4vw, 38px); align-items: start; margin-top: 2vh; }
.pg-list { display: grid; gap: 9px; }
.pg-list > div { padding: 12px 15px; border: 3px solid var(--line); background: var(--panel); box-shadow: 4px 4px 0 var(--hard); }
.pg-list b { display: block; color: var(--accent); font: 700 12px/1.3 var(--mono); }
.pg-list span { display: block; margin-top: 6px; color: #333F5E; font-size: clamp(11.5px, .96vw, 15px); line-height: 1.45; }
.pg-list code { color: var(--amber); }



/* =========================================================
   СТЕК
   ========================================================= */
.stack { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 2.2vh; align-content: flex-start; }
.stack span { padding: 10px 14px; border: 2px solid var(--hair); background: var(--panel); color: #333F5E; font: 600 clamp(12px, 1vw, 16px)/1 var(--mono); }
.stack .lg { font-size: clamp(16px, 1.55vw, 26px); color: var(--ink); border: 3px solid var(--line); }
.stack .xl { font-size: clamp(21px, 2.2vw, 38px); color: #fff; border: 3px solid var(--line); background: var(--accent); box-shadow: 4px 4px 0 var(--hard); }

/* =========================================================
   ОЦЕНИВАНИЕ
   ========================================================= */
.grade { display: grid; gap: 7px; margin: 2.2vh 0 0; padding: 0; max-width: 1120px; }
.grade > li {
  display: grid; grid-template-columns: 66px 1fr auto; gap: 16px; align-items: baseline;
  padding: 11px 14px; border-left: 6px solid var(--accent); background: var(--panel);
  box-shadow: 3px 3px 0 rgba(22,32,58,.12); font-size: clamp(13px, 1.08vw, 17px); list-style: none; color: #333F5E;
}
.grade b { color: var(--accent); font: 700 11px/1.3 var(--mono); letter-spacing: .04em; }
.grade em { color: var(--muted); font-style: normal; font: 600 11px/1.3 var(--mono); white-space: nowrap; }

/* =========================================================
   МЕМ, ПРИКОЛОТЫЙ В УГОЛ ЭКРАНА
   ========================================================= */
.meme-pin {
  position: absolute; right: 0; bottom: 0; z-index: 4; margin: 0;
  width: clamp(108px, 10.5vw, 158px); padding: 6px;
  border: 3px solid var(--line); background: #fff; box-shadow: 6px 6px 0 var(--hard);
  transform: rotate(2.6deg);
}
.meme-pin img { display: block; width: 100%; height: auto; max-height: 23vh; object-fit: contain; }
.meme-pin figcaption { margin-top: 5px; color: var(--muted); font: 600 10px/1.3 var(--pixel); letter-spacing: .06em; text-align: center; }
.slide.is-active .meme-pin { animation: pinIn .5s steps(6, end) .45s both; }
@keyframes pinIn { from { opacity: 0; transform: translateY(16px) rotate(0); } }
/* текст под карточками не заезжает под мем */
.has-pin .note, .has-pin .callout { max-width: calc(100% - clamp(126px, 12vw, 182px)); }

/* =========================================================
   ИТОГ
   ========================================================= */
.final-layout { display: grid; grid-template-columns: 1.1fr .62fr; gap: clamp(24px, 4vw, 66px); align-items: center; }
.final-metrics { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 2.4vh; }
.final-metrics span { padding: 11px 14px; border: 3px solid var(--line); background: var(--panel); color: #333F5E; font-size: 12px; box-shadow: 3px 3px 0 var(--hard); }
.final-metrics strong { margin-right: 6px; color: var(--accent); font: 700 16px/1 var(--mono); }
.source-link {
  margin-top: 2.6vh; padding: 11px 15px; border: 3px solid var(--line); background: var(--accent);
  color: #fff; box-shadow: 4px 4px 0 var(--hard); font: 700 11px/1 var(--pixel); letter-spacing: .06em; cursor: pointer;
  transition: transform .08s steps(2), box-shadow .08s steps(2);
}
.source-link:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--hard); }
.meme-frame { margin: 0; max-width: 100%; border: 3px solid var(--line); background: #fff; padding: 7px; box-shadow: 7px 7px 0 var(--hard); overflow: hidden; }
.meme-frame img { display: block; width: 100%; max-height: 50vh; object-fit: contain; background: #fff; }
.tilt-right { transform: rotate(2.2deg); }
.slide.is-active .meme-frame { animation: pinIn .5s steps(6, end) .3s both; }

/* ---------- низ экрана ---------- */
.controls {
  position: absolute; z-index: 20; left: 0; right: 0; bottom: 0; height: 56px;
  display: flex; align-items: center; gap: 16px; padding: 8px 26px;
  border-top: 3px solid var(--line); background: rgba(238,241,247,.96);
}
.nav-button { width: 40px; height: 40px; }
.nav-button:disabled { opacity: .3; cursor: default; transform: none; }
.progress { flex: 1; height: 8px; border: 2px solid var(--line); background: transparent; }
.progress::before { content: ""; display: block; width: var(--progress, 3%); height: 100%; background: var(--accent); transition: width .3s steps(8, end), background .45s ease; }
.key-hint { color: var(--muted); font: 10px/1 var(--pixel); letter-spacing: .06em; text-transform: uppercase; }

/* ---------- панель источников ---------- */
.sources-panel { position: fixed; z-index: 50; inset: 0; visibility: hidden; opacity: 0; transition: .25s ease; }
.sources-panel.is-open { visibility: visible; opacity: 1; }
.sources-backdrop { position: absolute; inset: 0; background: rgba(22,32,58,.5); backdrop-filter: blur(6px); }
.sources-sheet {
  position: absolute; right: 0; top: 0; bottom: 0; width: min(640px, 93vw); padding: 6vh 4vw;
  background: var(--bg); border-left: 3px solid var(--line); box-shadow: -8px 0 0 rgba(22,32,58,.2);
  transform: translateX(100%); transition: transform .35s cubic-bezier(.2,.8,.2,1); overflow-y: auto;
}
.sources-panel.is-open .sources-sheet { transform: none; }
.sources-close { position: absolute; right: 22px; top: 20px; width: 42px; height: 42px; border: 3px solid var(--line); background: var(--panel); color: var(--ink); box-shadow: 3px 3px 0 var(--hard); font-size: 22px; cursor: pointer; }
.sources-sheet h2 { margin-bottom: 3.2vh; }
.sources-sheet ol { list-style: none; margin: 0; padding: 0; }
.sources-sheet li { border-top: 2px solid var(--line); }
.sources-sheet a { display: grid; grid-template-columns: 148px 1fr; gap: 18px; padding: 16px 0; color: inherit; text-decoration: none; }
.sources-sheet a:hover strong { color: var(--accent); }
.sources-sheet strong { font: 600 13px/1.3 var(--mono); }
.sources-sheet span { color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.sources-note { margin-top: 3.2vh; color: var(--muted); font-size: 11.5px; line-height: 1.55; }

/* ---------- каскадное появление ---------- */
.fragment { opacity: 0; transform: translateY(18px) scale(.99); transition: opacity .26s ease-out, transform .32s cubic-bezier(.2,.8,.3,1); }
.fragment.revealed { opacity: 1; transform: none; }
.slide.is-active .slide-inner > *:not(.fragment) { animation: blockIn .42s cubic-bezier(.2,.8,.3,1) both; }
.slide.is-active .slide-inner > *:nth-child(1) { animation-delay: .04s; }
.slide.is-active .slide-inner > *:nth-child(2) { animation-delay: .12s; }
.slide.is-active .slide-inner > *:nth-child(3) { animation-delay: .2s; }
.slide.is-active .slide-inner > *:nth-child(4) { animation-delay: .28s; }
@keyframes blockIn { from { opacity: 0; transform: translateY(22px); } }

/* ---------- адаптив ---------- */
@media (max-height: 860px) {
  h2 { font-size: clamp(19px, 2.1vw, 32px); }
  .works article { padding: 13px 15px; }
  .works p { margin-top: 8px; }
  .contours article { padding: 12px 13px; }
  .pmap svg { max-height: 50vh; }
  .psql pre { padding: 14px 16px; line-height: 1.6; }
}
@media (max-width: 1100px) {
  .contours { grid-template-columns: repeat(3, 1fr); }
  .works--quad { grid-template-columns: repeat(2, 1fr); }
  .pg-split, .clock-layout, .final-layout { grid-template-columns: 1fr; }
  .brand-copy, .key-hint { display: none; }
}
@media (max-width: 780px), (max-height: 620px) {
  .chrome { height: 60px; padding: 9px 15px; }
  .slides { inset: 60px 0 50px; }
  .controls { height: 50px; padding: 6px 15px; }
  .slide-inner { width: calc(100% - 32px); }
  .contours, .works, .works--duo { grid-template-columns: 1fr; }
  .semester__row { grid-template-columns: 1fr; gap: 6px; }
  .semester__cells i { height: 32px; }
  .semester__cells i b { display: none; }
    .grade > li { grid-template-columns: 1fr; gap: 4px; }
  .meme-pin, .meme-frame { display: none; }
  .has-pin .note, .has-pin .callout { max-width: 100%; }
  .counter { min-width: 62px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .pmap .pkt { opacity: 1; offset-distance: 60%; }
}