/* Общие стили страниц курса. Один файл на все уроки: сменить вид курса можно правкой только его.
   Палитра и правила вида: dizayn/DIZAYN.md. Образец: dizayn/germes/urok-germes.css. */

:root {
  --bg: #ffffff;
  --paper: #f6f7f9;
  --ink: #13151c;
  --ink2: #4b4f5e;
  --ink3: #7c8194;
  --line: #e7e9f0;
  --dark: #07080f; --dark-line: #1c2136; --dark-text: #e8ecf6; --dark-muted: #8b95ad;
  --accent: #e9a23b; --accent2: #f0b95a; --accent-deep: #96590a;
  --accent-bg: #fdf6e7; --accent-line: #f1d9a6;
  --red: #c0392b; --red-bg: #fdf1f0; --red-line: #f1c2bd;
  --green: #0f9d6b; --green-bg: #eefaf4; --green-line: #b6e6d2;
  --sans: Inter, -apple-system, "SF Pro Text", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --shadow: 0 1px 2px rgba(19, 21, 28, .04), 0 8px 24px rgba(19, 21, 28, .06);
  --shirina: 1180px;
  --tekst: 760px;
  --t: 160ms;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  color: var(--ink);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
@media (min-width: 960px) { body { font-size: 17px; } }

a { color: var(--accent-deep); text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 3px; word-break: break-word; }
a:hover { text-decoration-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; border-radius: 6px; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: -.02em; font-weight: 800; }
h2 { font-size: clamp(22px, 2.6vw, 28px); }
h3 { font-size: 19px; font-weight: 700; }
p { margin: 0 0 .9em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 .9em; padding-left: 1.35em; }
li { margin: .3em 0; }
strong, b { font-weight: 700; }
code, .mono { font-family: var(--mono); font-size: .9em; }
code { background: #f1f2f6; border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; white-space: nowrap; }
.nw { white-space: nowrap; }
.muted { color: var(--ink3); font-size: .92em; }

/* ---------- Шапка урока: тёмная, невысокая, как в уроках по Гермесу ---------- */
.hero { background: var(--dark); color: var(--dark-text); position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(55% 90% at 82% 0%, rgba(233, 162, 59, .22), transparent 70%),
              radial-gradient(40% 80% at 8% 100%, rgba(233, 162, 59, .10), transparent 70%);
}
.hero-in { position: relative; max-width: var(--shirina); margin: 0 auto; padding: 22px 40px 28px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 36px; align-items: end; }
.hero-in > .brandline, .hero-in > .lnav { grid-column: 1 / -1; }
.hero-tekst { min-width: 0; }
.brandline { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; font-size: 14px; color: var(--dark-muted); }
.brandline .bn { white-space: nowrap; font-weight: 800; font-size: 18px; color: var(--dark-text); letter-spacing: -.01em; text-decoration: none; }
.brandline .bn i { font-style: normal; color: var(--accent); }
.lnav { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.lnav a { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--dark-line); background: rgba(255, 255, 255, .03); border-radius: 30px; padding: 4px 11px 4px 5px; font-size: 13px; line-height: 1.3; color: #c3cbdc; text-decoration: none; }
.lnav a b { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, .09); color: var(--dark-text); font-size: 12px; font-weight: 700; }
.lnav a:hover { border-color: var(--accent); color: var(--dark-text); }
.lnav a.on { border-color: var(--accent); color: var(--dark-text); font-weight: 600; }
.lnav a.on b { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: var(--dark); }
.lnav a.proyden b { background: var(--green); color: #fff; }
.lnav a.all { padding-left: 13px; }
.badge { display: inline-flex; align-items: center; gap: 7px; background: linear-gradient(135deg, var(--accent), var(--accent2)); color: var(--dark); font-weight: 700; font-size: 12.5px; letter-spacing: .02em; padding: 6px 14px; border-radius: 20px; margin-bottom: 14px; }
.hero h1 { font-size: clamp(28px, 3.8vw, 40px); line-height: 1.08; margin: 0 0 8px; letter-spacing: -.03em; font-weight: 800; }
.hero h1 .brandword { color: var(--accent); }
.hero .sub { color: #c3cbdc; font-size: clamp(15px, 1.6vw, 18px); margin: 0; max-width: 640px; }
.facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.facts span { border: 1px solid var(--dark-line); background: rgba(255, 255, 255, .03); border-radius: 12px; padding: 8px 14px; font-size: 13.5px; color: #c3cbdc; }
.facts b { color: var(--accent2); font-weight: 700; }

/* Герой в шапке: робот Гермес и место под второго героя */
.hero-geroi { display: flex; align-items: flex-end; gap: 14px; align-self: end; }
.hero-geroi img { display: block; height: 190px; width: auto; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .45)); }
/* Мусик, второй герой: всегда на белом или на --paper, никогда на янтарном */
.musik-kartochka { background: #fff; border-radius: 18px; padding: 10px 14px 10px; width: 176px; text-align: center; color: var(--ink2); font-size: 13px; line-height: 1.35; box-shadow: 0 10px 24px rgba(0, 0, 0, .35); position: relative; }
.musik-kartochka img { height: 104px; width: auto; display: block; margin: 0 auto 6px; }
.musik-kartochka b { color: var(--ink); display: block; font-size: 12px; margin-bottom: 2px; }
.vopros { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; margin: 18px 0; max-width: var(--tekst); }
.vopros img { width: 64px; height: auto; display: block; }
.vopros .puz { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 11px 16px; font-size: .96em; }
.vopros .puz::before { content: ""; position: absolute; left: -7px; top: 26px; width: 12px; height: 12px; background: var(--paper); border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: rotate(45deg); }
.vopros .kto { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); margin-bottom: 2px; }
.vopros .otvet { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); color: var(--ink2); }
.vopros .otvet .kto { color: var(--accent-deep); }

/* ---------- Сетка страницы: шкала сбоку, рядом колонка урока ---------- */
.layout { max-width: var(--shirina); margin: 0 auto; padding: 30px 40px 70px; display: grid; grid-template-columns: 256px minmax(0, 1fr); gap: 44px; align-items: start; }
.side { position: sticky; top: 18px; }
.page { min-width: 0; }
.page > p, .page > ul, .page > ol, .razdel > p, .razdel > ul, .razdel > ol, .razdel > h2, .razdel > h3, .lead, .slovo, .pometka, .box { max-width: var(--tekst); }
.lead { margin: 0 0 8px; color: var(--ink2); font-size: 1.04em; }
.lead b { color: var(--ink); }

/* ---------- Шкала ---------- */
.shkala { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px 14px; }
.shkala .tt { font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); margin: 0 0 8px; }
.shkala .urok-stroka { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--ink2); }
.tochki { display: inline-flex; align-items: center; gap: 5px; }
.tochka { width: 10px; height: 10px; border-radius: 50%; background: #d9dce6; display: inline-block; }
.tochka.proyden { background: var(--green); }
.tochka.tekushchiy { background: var(--accent); box-shadow: 0 0 0 3px rgba(233, 162, 59, .25); }
.tochka.tekushchiy.proyden { background: var(--green); }
.tochka.nol { width: 8px; height: 8px; border-radius: 2px; margin-right: 3px; }
.shkala .sdelano { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; }
.shkala .sdelano .n { font-family: var(--mono); font-size: 34px; font-weight: 600; color: var(--ink); line-height: 1; }
.shkala .sdelano .iz { font-size: 14px; color: var(--ink2); }
.polosa { height: 8px; background: #e3e5ed; border-radius: 99px; overflow: hidden; margin: 10px 0 8px; }
.polosa > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius: 99px; transition: width 360ms cubic-bezier(.22, 1, .36, 1); }
.polosa.gotovo > i { background: var(--green); }
.shkala .ostalos { font-size: 13.5px; color: var(--ink2); }
.shkala .ostalos .mono { color: var(--ink); font-weight: 600; }
.shkala .pozdrav { display: none; margin-top: 10px; padding: 8px 11px; background: var(--green-bg); border: 1px solid var(--green-line); border-radius: 10px; font-size: 13.5px; color: var(--ink); }
.shkala.vse .pozdrav { display: block; }
.shkala .spisok { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); }
.shkala .spisok li { margin: 0; }
.shkala .spisok button {
  display: flex; align-items: flex-start; gap: 9px; width: 100%; text-align: left;
  background: none; border: 0; border-left: 2px solid transparent; padding: 6px 8px 6px 10px; margin: 0 0 0 -10px;
  border-radius: 0 8px 8px 0; font-size: 13.5px; line-height: 1.35; color: var(--ink2); cursor: pointer;
}
.shkala .spisok button:hover { color: var(--ink); background: #fff; }
.shkala .spisok .krug { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--ink3); font-family: var(--mono); font-size: 11px; display: grid; place-items: center; color: var(--ink3); margin-top: 1px; }
.shkala .spisok li.sdelan .krug { background: var(--green); border-color: var(--green); color: #fff; }
.shkala .spisok li.sdelan button { color: var(--ink3); }
.shkala .spisok li.zdes button { border-left-color: var(--accent); color: var(--ink); font-weight: 600; background: linear-gradient(90deg, var(--accent-bg), transparent); }
.shkala .spisok li.zdes .krug { border-color: var(--accent); color: var(--accent-deep); }
.shkala .spisok li.zdes.sdelan .krug { background: var(--green); border-color: var(--green); color: #fff; }
.shkala .spisok .zdes-podpis { display: none; font-size: 11px; color: var(--accent-deep); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-left: auto; padding-left: 6px; white-space: nowrap; }
.shkala .spisok li.zdes .zdes-podpis { display: inline; }
.shkala .podskazka { font-size: 12.5px; color: var(--ink3); margin: 10px 0 0; line-height: 1.45; }
.shkala .sbros { margin-top: 8px; background: none; border: 0; padding: 0; font-size: 12.5px; color: var(--ink3); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.shkala .sbros:hover { color: var(--ink); }
.shkala .otkryt { display: none; }
.side .help { margin-top: 16px; display: grid; grid-template-columns: 58px 1fr; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; font-size: 13.5px; color: var(--ink2); line-height: 1.45; }
.side .help img { width: 58px; height: auto; display: block; }
.side .help img.robot-malyy { width: 48px; margin: 0 auto; }
.side .help b { display: block; color: var(--ink); margin-bottom: 2px; }

/* ---------- Разделы ---------- */
.razdel { margin-top: 40px; scroll-margin-top: 18px; }
.razdel > h2 { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; }
.razdel > h2 .num { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent2)); color: var(--dark); font-size: 16px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.razdel h3 { margin: 22px 0 8px; }
.vvod { font-size: 1.04em; }

/* Новое слово */
.slovo { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: baseline; margin: 16px 0; padding: 11px 16px; border-left: 3px solid var(--accent); background: var(--accent-bg); border-radius: 0 12px 12px 0; font-size: .95em; }
.slovo dt { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-deep); white-space: nowrap; }
.slovo dd { margin: 0; color: var(--ink2); }
.slovo dd b { color: var(--ink); }
@media (max-width: 480px) { .slovo { grid-template-columns: 1fr; gap: 2px; } }

/* Боксы, как в уроках по Гермесу */
.box { border: 1px solid var(--line); border-left-width: 4px; border-radius: 10px; padding: 12px 16px; margin: 14px 0; }
.box .t { font-weight: 700; margin: 0 0 4px; font-size: 15px; }
.box.warn { background: var(--accent-bg); border-color: var(--accent-line); border-left-color: var(--accent); } .box.warn .t { color: var(--accent-deep); }
.box.ok { background: var(--green-bg); border-color: var(--green-line); border-left-color: var(--green); } .box.ok .t { color: var(--green); }
.box.tip { background: var(--paper); border-left-color: var(--ink); }
.box.danger { background: var(--red-bg); border-color: var(--red-line); border-left-color: var(--red); } .box.danger .t { color: var(--red); }

/* ---------- Схемы-сцены ---------- */
.scena { margin: 24px 0 28px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 24px 20px 14px; }
.scena figcaption { margin-top: 14px; font-size: 14px; color: var(--ink2); text-align: center; }
.scena figcaption b { color: var(--ink); }
.polotno { display: flex; align-items: center; justify-content: center; gap: 16px 14px; }
.polotno.verh { align-items: flex-start; }
.ryad { display: flex; align-items: center; gap: 16px 14px; min-width: 0; }
.stolb { display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; }
.stolb.levo { align-items: stretch; }
.predmet { position: relative; min-width: 0; flex: 0 1 auto; max-width: 250px; font-size: 14px; line-height: 1.4; color: var(--ink); }
.stolb, .svyaz, .robot, .dver, .mysl { flex: 0 0 auto; }
.predmet.shirokiy { max-width: 400px; }
.ramka { flex: 0 1 auto; }
.predmet .nadpis { padding: 14px 16px; }
.predmet .nadpis b { font-weight: 700; }
.predmet .nadpis .t2 { color: var(--ink2); }
.predmet .nadpis .t3 { color: var(--ink3); font-size: 12.5px; }
.predmet .nadpis .fail { font-family: var(--mono); font-size: 12.5px; color: var(--accent-deep); }
.predmet .nadpis > span { display: block; }
.predmet .zag { font-weight: 700; display: block; margin-bottom: 2px; }
.predmet .nadpis ul { margin: 4px 0 0; padding-left: 16px; }
.predmet .nadpis li { margin: 1px 0; }
.podpis { text-align: center; font-size: 13px; color: var(--ink2); margin-top: 8px; line-height: 1.35; }
.podpis b { color: var(--ink); }

/* Робот в сцене: картинка героя */
.robot { text-align: center; flex: 0 0 auto; }
.robot img { display: block; height: 150px; width: auto; margin: 0 auto; filter: drop-shadow(0 8px 16px rgba(19, 21, 28, .18)); }
.robot.malyy img { height: 110px; }
.robot.tusklyy img { opacity: .45; filter: grayscale(1); }

/* Папка */
.papka { background: #fff; border: 1.5px solid var(--accent-line); border-radius: 10px; box-shadow: var(--shadow); margin-top: 12px; min-width: 110px; }
.papka::before { content: ""; position: absolute; top: -11px; left: 12px; width: 42%; max-width: 90px; height: 14px; background: var(--accent2); border-radius: 7px 7px 0 0; }
.papka::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 7px; background: var(--accent); border-radius: 8px 8px 0 0; }
.papka .nadpis { padding-top: 18px; }
.papka.seraya { border-color: #d6d9e3; }
.papka.seraya::before { background: #cfd3de; }
.papka.seraya::after { background: #c3c7d3; }
.papka.zakryta { opacity: .6; }
.papka.zelenaya { border-color: var(--green-line); }
.papka.zelenaya::before { background: var(--green-line); }
.papka.zelenaya::after { background: var(--green); }

/* Лист бумаги */
.list { background: #fff; border: 1.5px solid #d6d9e3; border-radius: 6px 16px 6px 6px; box-shadow: var(--shadow); min-width: 110px; }
.list::before { content: ""; position: absolute; top: -1.5px; right: -1.5px; width: 17px; height: 17px; background: linear-gradient(225deg, var(--paper) 50%, #d6d9e3 50%); border-radius: 0 0 0 5px; }
.list.akcent { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(233, 162, 59, .18), var(--shadow); }
.list.akcent::before { background: linear-gradient(225deg, var(--paper) 50%, var(--accent) 50%); }
.list.pustoy .nadpis { color: var(--ink3); }
.list.zelenyy { border-color: var(--green); }
.list.zelenyy::before { background: linear-gradient(225deg, var(--paper) 50%, var(--green) 50%); }
.predmet .stroki { display: block; margin-top: 6px; }
.predmet .stroki i { display: block; height: 6px; border-radius: 3px; background: #e3e5ed; margin: 5px 0; }
.predmet .stroki i.korotkaya { width: 60%; }
.predmet .stroki i.akcent { background: var(--accent-line); }

/* Окно программы */
.okno { background: #fff; border: 1.5px solid #d6d9e3; border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; min-width: 170px; }
.okno .titul { height: 28px; background: var(--paper); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 6px; padding: 0 12px; font-size: 11.5px; color: var(--ink3); }
.okno .titul i { width: 9px; height: 9px; border-radius: 50%; background: #d6d9e3; display: inline-block; }
.okno .titul i:nth-child(2) { background: var(--accent2); }
.okno .titul span { margin-left: 6px; font-family: var(--mono); }
.okno .replika { margin: 8px 0; padding: 8px 11px; border-radius: 12px; font-size: 13.5px; line-height: 1.4; max-width: 100%; }
.okno .replika.ty { background: var(--accent-bg); border: 1px solid var(--accent-line); border-bottom-right-radius: 3px; margin-left: 24px; }
.okno .replika.agent { background: var(--paper); border: 1px solid var(--line); border-bottom-left-radius: 3px; margin-right: 24px; }
.okno .replika .kto { display: block; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); margin-bottom: 2px; font-family: var(--mono); }
.okno .pole { margin-top: 8px; border: 1.5px dashed #d6d9e3; border-radius: 10px; padding: 7px 11px; font-size: 13px; color: var(--ink3); }

/* Облачко речи и облачко мысли */
.oblako { background: #fff; border: 1.5px solid #d6d9e3; border-radius: 16px; box-shadow: var(--shadow); min-width: 110px; }
.oblako::after { content: ""; position: absolute; left: 22px; bottom: -9px; width: 16px; height: 16px; background: #fff; border-right: 1.5px solid #d6d9e3; border-bottom: 1.5px solid #d6d9e3; transform: rotate(45deg); }
.oblako.sprava::after { left: auto; right: 22px; }
.oblako.akcent { border-color: var(--accent); } .oblako.akcent::after { border-color: var(--accent); }
.mysl { background: #fff; border: 1.5px solid #d6d9e3; border-radius: 50% / 45%; min-width: 140px; }
.mysl .nadpis { padding: 16px 22px; text-align: center; }
.mysl::before { content: ""; position: absolute; left: 18px; bottom: -14px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 1.5px solid #d6d9e3; }
.mysl::after { content: ""; position: absolute; left: 8px; bottom: -26px; width: 7px; height: 7px; border-radius: 50%; background: #fff; border: 1.5px solid #d6d9e3; }
.mysl.pustaya { border-style: dashed; }
.mysl.pustaya .nadpis { color: var(--ink3); }

/* Дверь остального компьютера */
.dver { width: 70px; height: 128px; background: linear-gradient(180deg, #e3e5ed, #cfd3de); border: 2px solid #b9bdc9; border-radius: 10px 10px 3px 3px; flex: 0 0 auto; }
.dver::after { content: ""; position: absolute; right: 10px; top: 60px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.dver .zamok { position: absolute; left: 50%; top: 26px; transform: translateX(-50%); width: 22px; height: 22px; }

/* Стрелка-связь между предметами */
.svyaz { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 0 0 auto; color: var(--ink3); font-size: 12.5px; line-height: 1.3; text-align: center; width: 72px; }
.svyaz svg { width: 46px; height: 22px; display: block; }
.svyaz svg path { fill: none; stroke: var(--ink3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.svyaz.akcent svg path { stroke: var(--accent); }
.svyaz.akcent { color: var(--accent-deep); font-weight: 600; }
.svyaz.net svg path { stroke-dasharray: 4 4; }
.svyaz svg { flex: none; }
.svyaz.vniz svg { width: 22px; height: 46px; transform: none; }
.svyaz.vniz { flex-direction: row; gap: 10px; width: auto; }

/* Групповая рамка внутри сцены: например «твой компьютер» */
.ramka { border: 1.5px dashed #cfd3de; border-radius: 16px; padding: 22px 18px 14px; position: relative; }
.ramka > .ramka-t { position: absolute; top: -10px; left: 14px; background: var(--paper); padding: 0 8px; font-size: 12.5px; color: var(--ink3); font-weight: 600; letter-spacing: .03em; }
.ramka.akcent { border-color: var(--accent); background: var(--accent-bg); }
.ramka.akcent > .ramka-t { color: var(--accent-deep); background: var(--accent-bg); }

@media (max-width: 1100px) {
  .scena { padding: 20px 14px 12px; }
  .polotno, .ryad { flex-direction: column; gap: 14px; }
  .polotno.ostavit-ryad, .ryad.ostavit-ryad { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .svyaz svg { transform: rotate(90deg); }
  .svyaz.vniz svg { transform: none; }
  .svyaz.vniz { flex-direction: column; }
  .robot img { height: 110px; }
  .predmet, .predmet.shirokiy { width: 100%; max-width: 320px; }
  .predmet.robot { width: auto; }
  .predmet.dver { width: 70px; }
  .svyaz { width: auto; }
  .ramka { width: 100%; }
}

/* ---------- Переключатель программы ---------- */
.prog-podpis { display: inline-block; font-size: 14px; color: var(--ink3); margin: 0 10px 4px 0; vertical-align: middle; }
.prog { display: inline-flex; vertical-align: middle; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; margin: 4px 0 12px; }
.prog button { border: 0; background: none; padding: 6px 13px; border-radius: 9px; font-size: 14px; font-weight: 500; color: var(--ink2); cursor: pointer; }
.prog button:hover { color: var(--ink); background: #fff; }
.prog button[aria-pressed="true"] { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: var(--dark); font-weight: 600; }
[data-variant] { display: none; }
html[data-prog="claude"] [data-variant="claude"],
html[data-prog="codex"] [data-variant="codex"],
html[data-prog="opencode"] [data-variant="opencode"],
html[data-prog="deepseek"] [data-variant="deepseek"],
html[data-prog="kimi"] [data-variant="kimi"],
html[data-prog="comet"] [data-variant="comet"],
html[data-prog="chatgpt"] [data-variant="chatgpt"] { display: block; }
.variant { border: 1px solid var(--line); border-radius: 12px; padding: 11px 15px; margin: 8px 0; background: #fff; font-size: .96em; }
.variant .kto { font-family: var(--mono); font-size: 12px; color: var(--accent-deep); margin-bottom: 4px; }
.variant ol:last-child, .variant p:last-child { margin-bottom: 0; }

/* Пометка для скриншота */
.skrin { display: block; font-family: var(--mono); font-size: 12.5px; color: var(--accent-deep); background: var(--accent-bg); border: 1px dashed var(--accent); border-radius: 10px; padding: 7px 12px; margin: 10px 0; }

/* ---------- Шаги ---------- */
.shag { background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 20px 26px 18px; margin: 18px 0; scroll-margin-top: 20px; transition: border-color var(--t), box-shadow var(--t); }
.shag.zdes { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(233, 162, 59, .16), var(--shadow); }
.shag.sdelan { border-color: var(--green-line); }
.shag .shapka-shaga { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.shag .nomer { display: inline-grid; place-items: center; min-width: 34px; height: 30px; padding: 0 10px; border-radius: 9px; font-family: var(--mono); font-size: 13px; font-weight: 600; background: var(--accent-bg); color: var(--accent-deep); border: 1px solid var(--accent-line); }
.shag.sdelan .nomer { background: var(--green-bg); color: var(--green); border-color: var(--green-line); }
.shag .minuty { font-family: var(--mono); font-size: 12.5px; color: var(--ink3); }
.shag .zdes-metka { display: none; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-deep); margin-left: auto; }
.shag.zdes .zdes-metka { display: inline; }
.shag h3 { margin: 0 0 12px; font-size: 21px; }
.shag.sdelan h3 { color: var(--ink2); }
.chast { margin-top: 16px; }
.chast .ch-podpis { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); margin-bottom: 5px; }
.chast .ch-podpis svg { width: 15px; height: 15px; flex: 0 0 auto; }
.chast.chto p { margin-bottom: .4em; }
.chast.zachem { padding-left: 14px; border-left: 2px solid var(--line); color: var(--ink2); font-size: .95em; }
.chast.sdelay { background: var(--accent-bg); border: 1px solid var(--accent-line); border-left: 4px solid var(--accent); border-radius: 12px; padding: 13px 18px 12px; margin-top: 18px; }
.chast.sdelay .ch-podpis { color: var(--accent-deep); }
.chast.sdelay ol { margin-bottom: .4em; }
.chast.sdelay li { margin: .45em 0; }
.chast.sdelay .variant { background: #fff; }
.chast.sdelay .prog { background: #fff; }
.chast.proverka { background: var(--green-bg); border: 1px solid var(--green-line); border-radius: 12px; padding: 13px 18px 12px; }
.chast.proverka .ch-podpis { color: var(--green); }
.chast.proverka ul { margin-bottom: 0; }
.esli { margin-top: 10px; font-size: .95em; color: var(--ink2); }
.esli b { color: var(--accent-deep); }

/* Напиши агенту */
.skazhi { position: relative; background: #fff; border: 1px solid var(--accent-line); border-radius: 12px; padding: 12px 14px; margin: 10px 0 12px; font-size: .97em; line-height: 1.5; color: var(--ink); }
.skazhi .kak { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 6px; padding-right: 110px; }
.skazhi p { margin: 0 0 .5em; white-space: pre-line; }
.skazhi p:last-of-type { margin-bottom: 0; }
.skazhi .kopiya { position: absolute; top: 8px; right: 8px; border: 1px solid var(--accent-line); background: var(--accent-bg); color: var(--accent-deep); font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 8px; cursor: pointer; }
.skazhi .kopiya:hover { background: var(--accent2); color: var(--dark); border-color: var(--accent); }
.skazhi .kopiya.ok { background: var(--green-bg); color: var(--green); border-color: var(--green-line); }

/* Кнопка «Сделал» */
.otmetka { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.otmetka button { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--accent); background: linear-gradient(135deg, var(--accent), var(--accent2)); color: var(--dark); font-weight: 700; font-size: 15px; padding: 10px 18px; border-radius: 12px; cursor: pointer; transition: filter var(--t), transform var(--t); }
.otmetka button:hover { filter: brightness(1.05); transform: translateY(-1px); }
.otmetka button svg { width: 16px; height: 16px; }
.shag.sdelan .otmetka button { border-color: var(--green-line); background: var(--green-bg); color: var(--green); }
.otmetka .dalshe { font-size: 14px; color: var(--ink3); }
.otmetka .dalshe a { color: var(--ink2); }

/* ---------- Итог и попутчик ---------- */
.itog { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }
.itog ul { list-style: none; padding: 0; margin: 0; }
.itog li { position: relative; padding-left: 32px; margin-bottom: .6em; }
.itog li::before { content: ""; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--green-bg); border: 1.5px solid var(--green); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6' fill='none' stroke='%230f9d6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: 12px; background-position: center; background-repeat: no-repeat; }
.itog .geroy img { display: block; height: 190px; width: auto; filter: drop-shadow(0 8px 16px rgba(19, 21, 28, .18)); }
.dalshe-stroka { margin-top: 18px; padding: 13px 18px; border-left: 3px solid var(--accent); background: var(--accent-bg); border-radius: 0 12px 12px 0; color: var(--ink2); max-width: var(--tekst); }
.dalshe-stroka b { color: var(--ink); }
@media (max-width: 680px) { .itog { grid-template-columns: 1fr; } .itog .geroy { text-align: center; } .itog .geroy img { height: 140px; margin: 0 auto; } }

.poputchik { display: grid; grid-template-columns: 72px 1fr; gap: 18px; align-items: start; margin-top: 40px; padding: 18px 22px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; font-size: .96em; max-width: var(--tekst); }
.poputchik img { width: 72px; height: auto; display: block; }
.poputchik h3 { font-size: 17px; margin: 0 0 6px; }
.poputchik .neobyazatelno { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); margin-bottom: 4px; }
.poputchik p { color: var(--ink2); margin-bottom: .5em; }
@media (max-width: 480px) { .poputchik { grid-template-columns: 1fr; gap: 10px; } }

/* ---------- «Теперь на своём»: необязательный блок после песочницы, в шкалу не входит ---------- */
.svoe { margin-top: 40px; border: 1.5px dashed var(--accent); background: var(--accent-bg); border-radius: 18px; padding: 20px 24px 18px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 20px; align-items: start; }
.svoe > * { min-width: 0; grid-column: 1; }
.svoe .neobyazatelno { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 6px; }
.svoe h2 { font-size: clamp(20px, 2.4vw, 24px); margin: 0 0 8px; }
.svoe > p { color: var(--ink2); }
.svoe .kopiya-pravilo { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; background: #fff; border: 1px solid var(--accent-line); border-left: 4px solid var(--accent); border-radius: 12px; padding: 10px 14px; margin: 12px 0 14px; font-size: .95em; color: var(--ink2); }
.svoe .kopiya-pravilo svg { width: 22px; height: 22px; margin-top: 2px; }
.svoe .kopiya-pravilo b { color: var(--ink); }
.svoe .kak-ponyat { margin-top: 12px; background: var(--green-bg); border: 1px solid var(--green-line); border-radius: 12px; padding: 11px 16px 10px; font-size: .95em; }
.svoe .kak-ponyat .ch-podpis { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--green); margin-bottom: 4px; }
.svoe .kak-ponyat ul { margin: 0; }
.svoe .geroy-svoe { grid-column: 2; grid-row: 1 / span 7; align-self: end; }
.svoe .geroy-svoe img { display: block; height: 150px; width: auto; filter: drop-shadow(0 8px 16px rgba(19, 21, 28, .18)); }
.svoe .skazhi { margin: 10px 0 0; }
@media (max-width: 940px) { .svoe { grid-template-columns: 1fr; padding: 18px 16px 16px; } .svoe .geroy-svoe { grid-column: 1; grid-row: auto; justify-self: end; margin-top: 10px; } .svoe .geroy-svoe img { height: 110px; } }

/* Переход к соседним урокам */
.lnext { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 34px 0 0; }
.lnext a { display: block; border: 1px solid var(--line); border-radius: 12px; padding: 13px 18px; text-decoration: none; color: var(--ink); background: var(--paper); }
.lnext a span { display: block; font-size: 12.5px; color: var(--ink3); margin-bottom: 3px; }
.lnext a b { display: block; font-weight: 700; font-size: 15px; line-height: 1.35; }
.lnext a.next { text-align: right; border-color: var(--accent-line); background: var(--accent-bg); }
.lnext a:hover { border-color: var(--accent); }
.lnext a.pusto { visibility: hidden; }
.podval { margin-top: 34px; font-size: 13.5px; color: var(--ink3); border-top: 1px solid var(--line); padding-top: 16px; }

/* ---------- Карта ступени (index.html) ---------- */
.karta { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 12px; }
.karta li { margin: 0; }
.karta a { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; text-decoration: none; color: var(--ink); background: #fff; box-shadow: var(--shadow); }
.karta a:hover { border-color: var(--accent); }
.karta .kn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-weight: 700; font-size: 15px; background: var(--paper); color: var(--ink2); border: 1px solid var(--line); }
.karta li.proyden .kn { background: var(--green); color: #fff; border-color: var(--green); }
.karta li.tekushchiy .kn { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: var(--dark); border-color: var(--accent); }
.karta li.tekushchiy a { border-color: var(--accent); }
.karta li.bonus a { border-style: dashed; border-color: var(--accent-line); background: var(--accent-bg); }
.karta li.bonus .kn { background: #fff; color: var(--accent-deep); border-color: var(--accent-line); }
.karta .kt b { display: block; font-size: 16.5px; }
.karta .kt span { display: block; font-size: 13.5px; color: var(--ink2); margin-top: 2px; }
.karta .ks { font-size: 13px; color: var(--ink3); text-align: right; white-space: nowrap; }
.karta li.proyden .ks { color: var(--green); font-weight: 600; }
.karta li.nol a { background: var(--paper); }
@media (max-width: 560px) { .karta a { grid-template-columns: 40px 1fr; } .karta .ks { grid-column: 2; text-align: left; } }

/* ---------- Памятка «Аккаунты и ключи» ---------- */
.pam .tabl { overflow-x: auto; margin: 6px 0 10px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.pam table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.4; }
.pam th, .pam td { padding: 10px 12px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.pam thead th { border-top: 0; background: var(--paper); font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); font-weight: 600; }
.pam tbody th { font-weight: 700; white-space: nowrap; }
.pam td { color: var(--ink2); }
.pk { background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 18px 24px 16px; margin: 16px 0; scroll-margin-top: 18px; }
.pk h3 { margin: 0 0 10px; font-size: 21px; }
.pk dl { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 8px 18px; margin: 0; }
.pk dt { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-deep); padding-top: 3px; }
.pk dd { margin: 0; color: var(--ink2); font-size: .97em; }
.pk dd .skrin { margin: 8px 0 0; }
.spisok-modeli { padding-left: 1.2em; }
.spisok-modeli li { margin: .45em 0; }
.spisok-modeli b { color: var(--ink); }
.pk dd a { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .pam .tabl { border: 0; background: none; box-shadow: none; overflow: visible; }
  .pam table, .pam tbody, .pam tr, .pam th, .pam td { display: block; width: 100%; }
  .pam thead { display: none; }
  .pam tbody { display: grid; gap: 10px; }
  .pam tr { background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 12px 14px 10px; }
  .pam th, .pam td { border: 0; padding: 0; }
  .pam tbody th { font-size: 16px; margin-bottom: 6px; white-space: normal; }
  .pam td { padding: 3px 0; }
  .pam td::before { content: attr(data-label); display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); }
}
@media (max-width: 680px) { .pk { padding: 16px 16px 14px; } .pk dl { grid-template-columns: minmax(0, 1fr); gap: 2px 0; } .pk dd { margin-bottom: 8px; } }

/* ---------- Телефон и узкий экран ---------- */
@media (max-width: 940px) {
  .hero-in { display: block; padding: 20px 16px 24px; }
  .hero-geroi { margin-top: 18px; justify-content: flex-end; }
  .hero-geroi img { height: 150px; }
  .musik-kartochka { width: 150px; } .musik-kartochka img { height: 84px; }
  .brandline { margin-bottom: 14px; }
  .lnav { margin-bottom: 16px; gap: 6px; }
  .lnav a { padding: 3px; }
  .lnav a span { display: none; }
  .lnav a.all { padding: 3px 12px; }
  .layout { display: block; padding: 0 16px 50px; }
  .side { position: sticky; top: 0; z-index: 30; margin: 0 -16px 18px; }
  .shkala { border-radius: 0 0 16px 16px; border-top: 0; padding: 10px 16px 10px; background: rgba(246, 247, 249, .96); backdrop-filter: blur(8px); }
  .shkala .tt { display: none; }
  .shkala .urok-stroka { font-size: 12.5px; }
  .shkala .verh { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .shkala .sdelano { margin-top: 4px; }
  .shkala .sdelano .n { font-size: 22px; }
  .shkala .sdelano .iz { font-size: 13px; }
  .polosa { margin: 6px 0 4px; height: 6px; }
  .shkala .ostalos { font-size: 12.5px; }
  .shkala .spisok, .shkala .podskazka, .shkala .sbros { display: none; }
  .shkala.raskryta .spisok, .shkala.raskryta .sbros { display: block; }
  .shkala .spisok { max-height: 46vh; overflow: auto; }
  .shkala .otkryt { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; background: none; border: 1px solid var(--line); border-radius: 8px; padding: 3px 9px; font-size: 12.5px; color: var(--ink2); cursor: pointer; }
  .shkala .pozdrav { margin-top: 6px; padding: 5px 9px; font-size: 12.5px; }
  .side .help { display: none; }
  .razdel { margin-top: 36px; }
  .shag { padding: 18px 16px 16px; border-radius: 16px; scroll-margin-top: 120px; }
  .shag h3 { font-size: 19px; }
  .chast.sdelay, .chast.proverka { padding: 12px 14px 10px; }
  .skazhi { padding: 12px 12px; }
  .skazhi .kak { padding-right: 0; }
  .skazhi .kopiya { position: static; display: inline-block; margin-top: 8px; }
  .lnext { grid-template-columns: 1fr; }
  .lnext a.next { text-align: left; }
  .lnext a.pusto { display: none; }
  code { white-space: normal; overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
  .hero { background: #fff; color: var(--ink); } .hero::before, .lnav, .facts, .side, .otmetka, .skazhi .kopiya, .lnext, .prog { display: none !important; }
  .layout { display: block; }
}

/* Снимок экрана программы */
.snimok { display: block; width: 100%; max-width: 820px; height: auto; border: 1px solid var(--line); border-radius: 10px; margin: 10px 0; }

/* Мостик в конце бесплатного урока 0 на сайте: что дальше в курсе, цена, канал */
.mostik { margin-top: 26px; padding: 22px 24px; background: var(--accent-bg); border: 1px solid var(--accent-line); border-radius: 16px; max-width: var(--tekst); }
.mostik h3 { font-size: 19px; margin: 0 0 8px; }
.mostik p { color: var(--ink2); margin-bottom: .6em; }
.mostik .knopki { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.mostik .knopki a { display: inline-block; padding: 11px 20px; border-radius: 12px; font-weight: 700; text-decoration: none; }
.mostik .kupit { background: var(--accent); color: #1a1204; }
.mostik .kanal { background: #fff; color: var(--ink); border: 1px solid var(--accent-line); }
.mostik .knopki a:hover { filter: brightness(1.05); }