:root {
  --ink: #07111f;
  --ink-soft: #0c1b2f;
  --panel: rgba(13, 31, 53, 0.82);
  --panel-solid: #0d1f35;
  --line: rgba(143, 198, 255, 0.2);
  --line-strong: rgba(108, 202, 255, 0.48);
  --text: #f2f7ff;
  --muted: #adc0d9;
  --cyan: #65e5ff;
  --blue: #2b75ff;
  --amber: #ffc761;
  --good: #7cf0bd;
  --danger: #ff9977;
  --violet: #a7a5ff;
  --teal: #38ddc9;
  --rose: #ff90b3;
  --gold: #e9c15b;
  --body-glow-a: rgba(34, 99, 213, 0.22);
  --body-glow-b: rgba(16, 139, 178, 0.14);
  --grid-line: rgba(115, 177, 255, 0.025);
  --link-hover: #d7fbff;
  --header-bg: rgba(7, 17, 31, 0.46);
  --header-scrolled-bg: rgba(7, 17, 31, 0.88);
  --nav-active-bg: rgba(101, 229, 255, 0.1);
  --control-bg: rgba(13, 31, 53, 0.82);
  --control-hover-bg: rgba(21, 63, 95, 0.92);
  --brand-mark-bg: linear-gradient(135deg, rgba(101, 229, 255, 0.24), rgba(43, 117, 255, 0.16));
  --brand-mark-shadow: inset 0 0 16px rgba(101, 229, 255, 0.1);
  --hero-overlay: linear-gradient(90deg, #07111f 0%, rgba(7, 17, 31, 0.95) 32%, rgba(7, 17, 31, 0.48) 67%, rgba(7, 17, 31, 0.35) 100%);
  --hero-overlay-tablet: linear-gradient(90deg, rgba(7,17,31,0.98), rgba(7,17,31,0.84) 62%, rgba(7,17,31,0.54));
  --hero-overlay-mobile: linear-gradient(180deg, rgba(7,17,31,0.94), rgba(7,17,31,0.72) 75%, rgba(7,17,31,0.94));
  --hero-lead: #d5e3f3;
  --button-bg: rgba(10, 31, 52, 0.88);
  --button-ghost-bg: rgba(7, 17, 31, 0.36);
  --section-band-bg: rgba(9, 24, 42, 0.54);
  --notice-bg: rgba(6, 27, 49, 0.68);
  --notice-text: #d9e8f9;
  --surface-card: rgba(10, 29, 51, 0.84);
  --panel-gradient: linear-gradient(145deg, rgba(20, 47, 77, 0.8), rgba(7, 22, 39, 0.84));
  --panel-decoration: rgba(101, 229, 255, 0.18);
  --surface-subtle: rgba(9, 28, 50, 0.76);
  --surface-download: rgba(10, 30, 53, 0.78);
  --surface-footer: #06101d;
  --footer-bottom: #7892b1;
  --nav-mobile-bg: #09182b;
  --text-soft: #d8e8f7;
  --tag-text: #c4f7ff;
  --tag-amber-text: #ffe3ad;
  --tag-good-text: #caffdf;
  --code-bg: #09182b;
  --copy-bg: rgba(26, 73, 111, 0.54);
  --rs-card-bg: rgba(5, 16, 30, .52);
  --rs-shadow: 0 22px 65px rgba(0,0,0,.22);
  --content: min(1180px, calc(100% - 40px));
  color-scheme: dark;
}

:root[data-theme="light"] {
  --ink: #f5f9fd;
  --ink-soft: #e8f0f8;
  --panel: rgba(255, 255, 255, 0.88);
  --panel-solid: #ffffff;
  --line: rgba(25, 82, 132, 0.19);
  --line-strong: rgba(0, 103, 151, 0.46);
  --text: #0a2139;
  --muted: #47627f;
  --cyan: #006e94;
  --blue: #1758c8;
  --amber: #915800;
  --good: #087a4d;
  --danger: #b9462c;
  --violet: #5f56b6;
  --teal: #00786e;
  --rose: #b03a63;
  --gold: #8a6a00;
  --body-glow-a: rgba(66, 137, 235, 0.16);
  --body-glow-b: rgba(26, 163, 186, 0.11);
  --grid-line: rgba(32, 91, 147, 0.055);
  --link-hover: #004e78;
  --header-bg: rgba(250, 253, 255, 0.76);
  --header-scrolled-bg: rgba(248, 252, 255, 0.94);
  --nav-active-bg: rgba(0, 110, 148, 0.1);
  --control-bg: rgba(255, 255, 255, 0.86);
  --control-hover-bg: #e5f2fb;
  --brand-mark-bg: linear-gradient(135deg, rgba(0, 137, 183, 0.18), rgba(23, 88, 200, 0.12));
  --brand-mark-shadow: inset 0 0 16px rgba(0, 110, 148, 0.08);
  --hero-overlay: linear-gradient(90deg, rgba(248,252,255,.98) 0%, rgba(248,252,255,.92) 39%, rgba(248,252,255,.61) 68%, rgba(248,252,255,.26) 100%);
  --hero-overlay-tablet: linear-gradient(90deg, rgba(248,252,255,.98), rgba(248,252,255,.88) 62%, rgba(248,252,255,.56));
  --hero-overlay-mobile: linear-gradient(180deg, rgba(248,252,255,.96), rgba(248,252,255,.76) 75%, rgba(248,252,255,.94));
  --hero-lead: #28435f;
  --button-bg: rgba(255, 255, 255, 0.9);
  --button-ghost-bg: rgba(248, 252, 255, 0.74);
  --section-band-bg: rgba(226, 239, 249, 0.58);
  --notice-bg: rgba(237, 246, 253, 0.91);
  --notice-text: #1f405e;
  --surface-card: rgba(255, 255, 255, 0.9);
  --panel-gradient: linear-gradient(145deg, rgba(255,255,255,.96), rgba(233,243,251,.92));
  --panel-decoration: rgba(0, 110, 148, 0.2);
  --surface-subtle: rgba(246, 251, 255, 0.92);
  --surface-download: rgba(255, 255, 255, 0.9);
  --surface-footer: #e9f2f9;
  --footer-bottom: #5b7691;
  --nav-mobile-bg: #f8fcff;
  --text-soft: #173650;
  --tag-text: #075f79;
  --tag-amber-text: #7e4a00;
  --tag-good-text: #07653f;
  --code-bg: #0b1d31;
  --copy-bg: rgba(28, 92, 132, 0.86);
  --rs-card-bg: rgba(255, 255, 255, .75);
  --rs-shadow: 0 22px 65px rgba(29, 73, 111, .16);
  color-scheme: light;
}

/* --rs-accent объявлен только на .rs-deck (его задаёт day-01-reconstructed-slides.js).
   Поэтому и производные от него значения объявляются здесь же: в :root подстановка
   var(--rs-accent) не разрешается, всё свойство становится недействительным ещё до
   того, как акцент появится ниже по дереву, и фон полотна слайда просто не рисуется. */
.rs-deck {
  --rs-canvas-bg: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--rs-accent) 16%, transparent), transparent 35%), linear-gradient(135deg, rgba(13,31,53,.98), rgba(7,17,31,.98));
}
:root[data-theme="light"] .rs-deck {
  --rs-canvas-bg: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--rs-accent) 17%, transparent), transparent 35%), linear-gradient(135deg, #ffffff, #e7f2fa);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 85% -10%, var(--body-glow-a), transparent 38rem),
    radial-gradient(circle at 0 40%, var(--body-glow-b), transparent 32rem),
    var(--ink);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
}

body::before {
  position: fixed;
  z-index: -2;
  inset: 0;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 42px 42px;
  content: "";
  pointer-events: none;
}

a { color: var(--cyan); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--link-hover); }

button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

img { display: block; max-width: 100%; }

.skip-link {
  position: fixed;
  z-index: 100;
  top: -4rem;
  left: 1rem;
  padding: 0.65rem 0.85rem;
  background: var(--cyan);
  color: #00111f;
  font-weight: 800;
}

.skip-link:focus { top: 1rem; }

.reading-line {
  position: fixed;
  z-index: 80;
  top: 0;
  left: 0;
  width: var(--read, 0%);
  height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--blue), var(--amber));
}

.site-header {
  position: sticky;
  z-index: 60;
  top: 0;
  border-bottom: 1px solid transparent;
  background: var(--header-bg);
  backdrop-filter: blur(16px);
  transition: border-color 160ms ease, background 160ms ease;
}

.site-header.is-scrolled { border-color: var(--line); background: var(--header-scrolled-bg); }

.header-inner {
  width: min(1500px, calc(100% - 40px));
  min-height: 70px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--text);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-decoration: none;
}

.brand-mark {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--brand-mark-bg);
  color: var(--cyan);
  box-shadow: var(--brand-mark-shadow);
}

.brand small { color: var(--muted); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; }

.nav { order: 2; display: flex; align-items: center; gap: 0.3rem; margin-left: auto; }
.nav a {
  padding: 0.45rem 0.62rem;
  border-radius: 7px;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.nav a:hover, .nav a[aria-current="page"] { background: var(--nav-active-bg); color: var(--text); }

.header-actions { order: 3; display: inline-flex; align-items: center; gap: 0.45rem; margin-left: 0.7rem; }

.theme-toggle {
  min-width: 42px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.45rem 0.62rem;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.theme-toggle:hover { border-color: var(--cyan); background: var(--control-hover-bg); }
.theme-toggle-icon { color: var(--cyan); font-size: 1.05rem; line-height: 1; }

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--text);
}

.content { width: var(--content); margin: 0 auto; }

.hero {
  position: relative;
  isolation: isolate;
  min-height: min(720px, calc(100vh - 70px));
  overflow: hidden;
  display: grid;
  align-items: center;
  padding: 3.8rem 0 4.2rem;
  border-bottom: 1px solid var(--line);
}

.hero-art {
  position: absolute;
  z-index: -2;
  inset: 0;
}

.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: center right; opacity: 0.88; }

.hero::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--hero-overlay);
  content: "";
}

.hero-grid { width: var(--content); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 700px) 1fr; align-items: center; }
.hero-copy { max-width: 700px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 1.1rem;
  color: var(--cyan);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.eyebrow::before { width: 1.8rem; height: 1px; background: currentColor; content: ""; }

h1, h2, h3, p { margin-top: 0; }

h1 {
  max-width: 13ch;
  margin-bottom: 1.2rem;
  font-size: clamp(2.8rem, 6vw, 5.6rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

h1 .accent { color: var(--cyan); }

.hero-lead { max-width: 61ch; margin-bottom: 1.7rem; color: var(--hero-lead); font-size: clamp(1rem, 1.7vw, 1.25rem); }

.hero-actions, .button-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 47px;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--button-bg);
  color: var(--text);
  font-size: 0.91rem;
  font-weight: 800;
  text-decoration: none;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.button:hover { transform: translateY(-2px); border-color: var(--cyan); background: var(--control-hover-bg); color: var(--text); }
.button.primary { border-color: var(--cyan); background: linear-gradient(115deg, #1470f8, #14b9df); box-shadow: 0 10px 35px rgba(24, 159, 242, 0.22); }
.button.primary:hover { background: linear-gradient(115deg, #2e81ff, #1dcaf0); }
.button.ghost { background: var(--button-ghost-bg); }

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.25rem;
  margin-top: 2.2rem;
  color: var(--muted);
  font-size: 0.84rem;
}
.hero-meta span { display: inline-flex; align-items: center; gap: 0.4rem; }
.hero-meta b { color: var(--text); }

.section { padding: clamp(3.7rem, 8vw, 7.2rem) 0; }
.section.tight { padding-top: 2.1rem; padding-bottom: 2.1rem; }
.section-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--section-band-bg); }

.section-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr); gap: 2rem; margin-bottom: 2rem; }
.section-top h2 { margin-bottom: 0; font-size: clamp(2rem, 3.8vw, 3.6rem); line-height: 1.02; letter-spacing: -0.045em; }
.section-top p { align-self: end; margin: 0; color: var(--muted); }

.caption { margin: 0 0 0.65rem; color: var(--cyan); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; }
.muted { color: var(--muted); }
.fine-print { color: var(--muted); font-size: 0.85rem; }

.notice {
  position: relative;
  margin-top: 1.4rem;
  padding: 1rem 1.1rem 1rem 1.25rem;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--cyan);
  border-radius: 9px;
  background: var(--notice-bg);
  color: var(--notice-text);
}
.notice.amber { border-left-color: var(--amber); }
.notice.danger { border-left-color: var(--danger); }
.notice strong { color: var(--text); }

.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--line); }
.stat { min-height: 130px; padding: 1.25rem; background: var(--surface-card); }
.stat b { display: block; color: var(--cyan); font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1; letter-spacing: -0.04em; }
.stat span { display: block; margin-top: 0.6rem; color: var(--muted); font-size: 0.86rem; }

.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.panel {
  position: relative;
  overflow: hidden;
  padding: clamp(1.25rem, 2.8vw, 2rem);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-gradient);
}
.panel::after { position: absolute; right: -22px; bottom: -22px; width: 90px; height: 90px; border: 1px solid var(--panel-decoration); border-radius: 50%; content: ""; }
.panel h3 { max-width: 25ch; margin-bottom: 0.6rem; font-size: 1.22rem; }
.panel p:last-child { margin-bottom: 0; color: var(--muted); }

.timeline { display: grid; gap: 0.7rem; }
.timeline-item { display: grid; grid-template-columns: minmax(78px, 0.36fr) 22px minmax(0, 2fr); gap: 0.8rem; align-items: stretch; }
.timeline-time { padding-top: 0.7rem; color: var(--cyan); font-size: 0.86rem; font-weight: 800; text-align: right; }
.timeline-rail { position: relative; }
.timeline-rail::before { position: absolute; top: 0; bottom: -0.7rem; left: 10px; width: 1px; background: var(--line); content: ""; }
.timeline-item:last-child .timeline-rail::before { bottom: 50%; }
.timeline-dot { position: absolute; top: 0.93rem; left: 5px; width: 11px; height: 11px; border: 2px solid var(--cyan); border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px rgba(101, 229, 255, 0.1); }
.timeline-body { padding: 0.7rem 0 1.4rem; }
.timeline-body h3 { margin-bottom: 0.24rem; font-size: 1.05rem; }
.timeline-body p { margin-bottom: 0; color: var(--muted); font-size: 0.94rem; }

.topic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.85rem; }
.topic {
  min-height: 245px;
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-subtle);
}
.topic-number { margin-bottom: auto; color: var(--cyan); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.09em; }
.topic h3 { margin: 1.35rem 0 0.5rem; font-size: 1.15rem; line-height: 1.15; }
.topic p { margin-bottom: 0; color: var(--muted); font-size: 0.91rem; }
.topic .tag { margin-top: 1rem; }

.tag {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.5rem;
  border: 1px solid rgba(101, 229, 255, 0.28);
  border-radius: 999px;
  color: var(--tag-text);
  font-size: 0.75rem;
  font-weight: 750;
}
.tag.amber { border-color: rgba(255, 199, 97, 0.38); color: var(--tag-amber-text); }
.tag.good { border-color: rgba(124, 240, 189, 0.34); color: var(--tag-good-text); }

.download-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.85rem; }
.download {
  display: flex;
  min-height: 210px;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.15rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-download);
}
.download .file-type { color: var(--amber); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.07em; }
.download h3 { margin: 0.75rem 0 0.45rem; font-size: 1.05rem; line-height: 1.15; }
.download p { margin-bottom: 1.1rem; color: var(--muted); font-size: 0.87rem; }
.download .button { margin-top: auto; min-height: 40px; padding: 0.5rem 0.7rem; font-size: 0.81rem; }

.checklist { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.checklist li { position: relative; display: block; padding: 0.88rem 0 0.88rem calc(27px + 0.7rem); border-bottom: 1px solid var(--line); color: var(--text-soft); }
.checklist li::before { position: absolute; top: 0.88rem; left: 0; content: "✓"; color: var(--good); font-weight: 900; }
.checklist-copy { min-width: 0; }
.report-split { align-items: start; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { padding: 0.88rem; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; }
th { background: rgba(25, 58, 94, 0.62); color: var(--cyan); font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; }
tr:last-child td { border-bottom: 0; }
td { color: var(--text-soft); }
td .muted { display: block; margin-top: 0.2rem; font-size: 0.83rem; }

.code-card { padding: 1px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 12px; background: linear-gradient(135deg, rgba(101, 229, 255, 0.46), rgba(255, 199, 97, 0.2)); }
.code-card-inner { padding: 1.15rem; background: var(--code-bg); }
.code-card-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.78rem; }
pre { margin: 0; overflow-x: auto; color: #d9f8ff; font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace; font-size: 0.84rem; line-height: 1.65; }
code { font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace; }
/* Короткие технические токены не переносятся по дефису: иначе флаг вида
 * --privileged разрывается на «--» и «privileged» и читается как опечатка.
 * В <pre> это правило не действует — там перенос задаётся отдельно. */
:not(pre) > code { white-space: nowrap; overflow-wrap: normal; }
.copy-button { min-height: 32px; padding: 0.35rem 0.55rem; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--copy-bg); color: #f2f7ff; font-size: 0.75rem; font-weight: 750; }

.lab-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; }
.lab-item { padding: 1.1rem; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-subtle); }
.lab-item h3 { margin-bottom: 0.42rem; font-size: 1rem; }
.lab-item p { margin-bottom: 0; color: var(--muted); font-size: 0.88rem; }
.lab-item .tag { margin-bottom: 0.7rem; }

.sources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; }
.source { padding: 1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-subtle); }
.source h3 { margin-bottom: 0.35rem; font-size: 0.97rem; }
.source p { margin-bottom: 0; color: var(--muted); font-size: 0.84rem; }

.compact-hero { min-height: 580px; }

/* Учебные схемы.
 *
 * Схемы рисуются инлайновым SVG без внешних зависимостей: так они остаются
 * текстом (доступным поиску и вспомогательным технологиям), масштабируются без
 * потери качества и печатаются вместе со страницей. Цвет НИКОГДА не задаётся
 * в разметке схемы — только классами ниже, иначе схема пропадёт при
 * переключении темы. Каждая схема обязана иметь <title> внутри <svg> и
 * подпись <figcaption> рядом: подпись несёт смысл, если SVG не отрисовался. */
.figure { display: grid; gap: 0.8rem; min-width: 0; margin: 1.7rem 0 0; padding: clamp(0.9rem, 2.4vw, 1.5rem); border: 1px solid var(--line); border-radius: 16px; background: var(--surface-subtle); }
.figure-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; }
.figure-head h3 { margin: 0; font-size: clamp(1rem, 1.7vw, 1.2rem); letter-spacing: -0.02em; }
.figure-index { color: var(--cyan); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; }
.figure figcaption { color: var(--muted); font-size: 0.85rem; line-height: 1.55; }
.figure figcaption b, .figure figcaption strong { color: var(--text-soft); font-weight: 700; }
.figure-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.figure-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }

.dg { display: block; width: 100%; min-width: 460px; height: auto; font-family: Inter, ui-sans-serif, system-ui, "Segoe UI", sans-serif; }
.dg text { fill: var(--text); font-size: 13px; font-weight: 600; }
.dg .dg-h { font-size: 14.5px; font-weight: 800; }
.dg .dg-s { fill: var(--muted); font-size: 11.5px; font-weight: 500; }
.dg .dg-k { fill: var(--cyan); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; }
.dg .dg-mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11.5px; font-weight: 600; }
.dg .dg-box { fill: var(--surface-card); stroke: var(--line-strong); stroke-width: 1.4; }
.dg .dg-box.is-accent { fill: color-mix(in srgb, var(--cyan) 14%, var(--surface-card)); stroke: var(--cyan); }
.dg .dg-box.is-good { fill: color-mix(in srgb, var(--good) 15%, var(--surface-card)); stroke: var(--good); }
.dg .dg-box.is-warn { fill: color-mix(in srgb, var(--amber) 16%, var(--surface-card)); stroke: var(--amber); }
.dg .dg-box.is-danger { fill: color-mix(in srgb, var(--danger) 15%, var(--surface-card)); stroke: var(--danger); }
.dg .dg-box.is-quiet { fill: color-mix(in srgb, var(--muted) 9%, var(--surface-card)); stroke: var(--line); stroke-dasharray: 4 4; }
.dg .dg-zone { fill: color-mix(in srgb, var(--cyan) 5%, transparent); stroke: var(--line-strong); stroke-width: 1.2; stroke-dasharray: 7 5; }
.dg .dg-zone.is-danger { fill: color-mix(in srgb, var(--danger) 6%, transparent); stroke: var(--danger); }
.dg .dg-zone.is-good { fill: color-mix(in srgb, var(--good) 6%, transparent); stroke: var(--good); }
.dg .dg-flow { fill: none; stroke: var(--cyan); stroke-width: 2; stroke-linecap: round; }
.dg .dg-flow.is-danger { stroke: var(--danger); }
.dg .dg-flow.is-good { stroke: var(--good); }
.dg .dg-flow.is-quiet { stroke: var(--muted); stroke-width: 1.4; stroke-dasharray: 5 4; }
.dg .dg-rule { fill: none; stroke: var(--line); stroke-width: 1; }
.dg .dg-head { fill: var(--cyan); }
.dg .dg-head.is-danger { fill: var(--danger); }
.dg .dg-head.is-good { fill: var(--good); }
.dg .dg-head.is-quiet { fill: var(--muted); }
.dg .dg-fill-accent { fill: var(--cyan); }
.dg .dg-fill-danger { fill: var(--danger); }
.dg .dg-fill-good { fill: var(--good); }
.dg .dg-fill-warn { fill: var(--amber); }
.dg .dg-on-accent { fill: var(--ink); font-weight: 800; }

/* Пояснения на полях: отдельные регистры для слушателя и преподавателя.
 * Слушателю — что понять и что сделать. Преподавателю — как вести и где
 * группа обычно спотыкается. Разделение осознанное: один и тот же материал
 * читают две разные аудитории. */
.callout { display: grid; gap: 0.4rem; min-width: 0; margin: 1.1rem 0 0; padding: 0.85rem 1rem 0.9rem 1.15rem; border: 1px solid var(--line); border-left: 3px solid var(--cyan); border-radius: 0 12px 12px 0; background: var(--notice-bg); }
.callout-label { display: flex; align-items: center; gap: 0.45rem; color: var(--cyan); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; }
.callout p { margin: 0; color: var(--notice-text); font-size: 0.88rem; line-height: 1.6; }
.callout p + p { margin-top: 0.5rem; }
.callout ul, .callout ol { margin: 0; padding-left: 1.15rem; color: var(--notice-text); font-size: 0.88rem; line-height: 1.6; }
.callout li + li { margin-top: 0.32rem; }
.callout code { padding: 0.1rem 0.35rem; border-radius: 5px; background: var(--copy-bg); color: var(--tag-text); font-size: 0.84em; }
.callout.teacher { border-left-color: var(--amber); }
.callout.teacher .callout-label { color: var(--amber); }
.callout.student { border-left-color: var(--good); }
.callout.student .callout-label { color: var(--good); }
.callout.warn { border-left-color: var(--danger); }
.callout.warn .callout-label { color: var(--danger); }
.callout-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.callout-duo .callout { margin-top: 0; }

/* Оглавление длинной страницы: набор якорей одной строкой.
 * Нужно там, где материал перестал помещаться в один экран прокрутки. */
.toc { display: grid; gap: 0.7rem; min-width: 0; margin-top: 1.6rem; padding: 1rem 1.15rem 1.1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-subtle); }
.toc-title { margin: 0; color: var(--cyan); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; }
.toc-list { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.toc-list a { display: inline-flex; align-items: baseline; gap: 0.45rem; padding: 0.45rem 0.78rem; border: 1px solid var(--line); border-radius: 999px; background: var(--control-bg); color: var(--text-soft); font-size: 0.83rem; font-weight: 650; text-decoration: none; }
.toc-list a:hover, .toc-list a:focus-visible { border-color: var(--cyan); background: var(--control-hover-bg); color: var(--text); }
.toc-list b { color: var(--cyan); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.71rem; font-weight: 800; }
.toc-list a.toc-ext { border-style: dashed; color: var(--cyan); }

/* Глоссарий и разбор терминов. */
.glossary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; margin-top: 1.2rem; }
.term { display: grid; gap: 0.3rem; align-content: start; min-width: 0; padding: 0.95rem 1.05rem; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-card); }
.term dt { margin: 0; font-size: 0.98rem; font-weight: 800; letter-spacing: -0.01em; }
.term dt small { display: block; margin-top: 0.15rem; color: var(--cyan); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; }
.term dd { margin: 0; color: var(--muted); font-size: 0.86rem; line-height: 1.55; }
.term dd + dd { margin-top: 0.4rem; color: var(--text-soft); }

.site-footer { border-top: 1px solid var(--line); background: var(--surface-footer); }
.footer-inner { width: var(--content); margin: 0 auto; padding: 2rem 0; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2rem; }
.footer-title { margin: 0 0 0.55rem; font-weight: 800; }
.footer-inner p, .footer-inner li { color: var(--muted); font-size: 0.85rem; }
.footer-inner ul { margin: 0; padding-left: 1rem; }
.footer-bottom { width: var(--content); margin: 0 auto; padding: 0.9rem 0 1.4rem; border-top: 1px solid var(--line); color: var(--footer-bottom); font-size: 0.78rem; }

.reveal { opacity: 1; transform: none; }
.reveal.is-visible { opacity: 1; transform: none; }

:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }

/* Навигация сворачивается раньше остальной вёрстки: в меню десять разделов,
 * и в одну строку они перестают помещаться заметно выше планшетной ширины. */
@media (max-width: 1320px) {
  .nav-toggle { display: inline-grid; place-items: center; }
  .nav { position: absolute; top: calc(100% + 1px); right: 0; left: 0; display: none; flex-direction: column; align-items: stretch; margin-left: 0; padding: 0.75rem max(14px, calc((100vw - 1180px) / 2)); border-bottom: 1px solid var(--line); background: var(--nav-mobile-bg); }
  .nav.is-open { display: flex; }
  .nav a { padding: 0.72rem; }
  .header-actions { margin-left: auto; }
}

@media (max-width: 900px) {
  .hero { min-height: 650px; }
  .hero::after { background: var(--hero-overlay-tablet); }
  .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .download-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .glossary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  :root { --content: min(100% - 28px, 1180px); }
  .header-inner { min-height: 62px; }
  .brand small { display: none; }
  .theme-toggle-text { display: none; }
  .hero { min-height: 650px; padding: 3.4rem 0; }
  .hero-art img { object-position: 66% center; }
  .hero::after { background: var(--hero-overlay-mobile); }
  h1 { max-width: 10ch; font-size: clamp(2.75rem, 14vw, 4rem); }
  .section-top, .split, .sources, .footer-inner { grid-template-columns: 1fr; }
  .section-top { gap: 0.8rem; }
  .topic-grid, .download-grid, .lab-grid { grid-template-columns: 1fr; }
  .figure-duo, .callout-duo, .glossary { grid-template-columns: 1fr; }
  .timeline-item { grid-template-columns: 53px 20px minmax(0, 1fr); gap: 0.5rem; }
  .timeline-time { font-size: 0.76rem; }
  .stat { min-height: 110px; padding: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* Квиз самопроверки (quiz.html) */
.quiz { display: grid; gap: 1.1rem; margin-top: 1.2rem; }
.quiz-q { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: clamp(1rem, 2.4vw, 1.5rem); }
.quiz-q > .quiz-num { margin: 0 0 .5rem; color: var(--cyan); font: 800 .72rem ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
.quiz-q > .quiz-text { margin: 0 0 .9rem; font-size: clamp(1rem, 1.5vw, 1.16rem); line-height: 1.45; font-weight: 600; }
.quiz-opts { display: grid; gap: .5rem; }
.quiz-opt { display: flex; gap: .6rem; align-items: flex-start; padding: .62rem .8rem; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--panel-solid) 60%, transparent); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.quiz-opt:hover { border-color: var(--line-strong); }
.quiz-opt input { margin-top: .18rem; flex: 0 0 auto; accent-color: var(--cyan); }
.quiz-opt .quiz-opt-text { font-size: .92rem; line-height: 1.4; color: var(--text); }
.quiz-q.is-checked .quiz-opt { cursor: default; }
.quiz-q.is-checked .quiz-opt.is-correct { border-color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); }
.quiz-q.is-checked .quiz-opt.is-wrong { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.quiz-mark { margin-left: auto; font-weight: 800; font-size: .95rem; }
.quiz-q.is-checked .quiz-opt.is-correct .quiz-mark::after { content: "✓"; color: var(--good); }
.quiz-q.is-checked .quiz-opt.is-wrong.is-picked .quiz-mark::after { content: "✕"; color: var(--danger); }
.quiz-explain { margin: .85rem 0 0; padding: .8rem .95rem; border-left: 3px solid var(--cyan); border-radius: 0 10px 10px 0; background: var(--notice-bg, rgba(6,27,49,.6)); font-size: .9rem; line-height: 1.5; color: var(--notice-text, #d9e8f9); }
.quiz-explain[hidden] { display: none; }
.quiz-explain .quiz-tag { display: inline-block; margin-bottom: .35rem; padding: .12rem .5rem; border: 1px solid var(--line); border-radius: 999px; font: 700 .68rem ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--muted); }
.quiz-bar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: 1.2rem; padding: .85rem 1rem; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--panel-solid); box-shadow: 0 -6px 22px rgba(0,0,0,.18); }
.quiz-score { margin: 0; font-weight: 800; font-size: 1.02rem; }
.quiz-score b { color: var(--cyan); }
.quiz-hint { margin: 0; color: var(--muted); font-size: .84rem; }
@media (max-width: 620px) { .quiz-bar { flex-direction: column; align-items: stretch; } }