:root {
  --ink: #172033;
  --ink-soft: #536075;
  --air: #2fc6f6;
  --violet: #6548d8;
  --signal: #cf4525;
  --verified: #217a62;
  --mist: #eef2f6;
  --paper: #ffffff;
  --line: #d9e0e8;
  --shadow: 0 24px 60px rgba(23, 32, 51, .09);
  --radius: 22px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--mist);
  color: var(--ink);
  font-family: "Segoe UI Variable", "Onest", "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  transform: translateY(-140%);
}
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid var(--air); outline-offset: 3px; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding: 10px clamp(20px, 4vw, 64px);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  background: rgba(23, 32, 51, .96);
  color: #fff;
  backdrop-filter: blur(14px);
}
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.brand img { width: 118px; filter: brightness(0) invert(1); }
.brand span { padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .28); color: #cbd4e4; font-size: 13px; letter-spacing: .03em; }
.topbar nav { display: flex; gap: 8px; }
.topbar nav a { padding: 9px 12px; border-radius: 9px; color: #dce4f2; font-size: 14px; text-decoration: none; }
.topbar nav a:hover { background: rgba(255, 255, 255, .09); color: #fff; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(350px, .75fr);
  gap: clamp(34px, 6vw, 88px);
  align-items: end;
  max-width: 1500px;
  min-height: 650px;
  margin: 0 auto;
  padding: clamp(70px, 10vw, 140px) clamp(20px, 5vw, 80px) 86px;
  background-image:
    linear-gradient(90deg, transparent 0 49.85%, rgba(101, 72, 216, .07) 49.85% 50.15%, transparent 50.15%),
    radial-gradient(circle at 84% 16%, rgba(47, 198, 246, .22), transparent 22%);
}
.eyebrow {
  margin: 0 0 18px;
  color: var(--violet);
  font-family: "Cascadia Mono", Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.hero h1 {
  max-width: 920px;
  margin: 0;
  font-size: clamp(44px, 6.4vw, 94px);
  font-weight: 760;
  letter-spacing: -.058em;
  line-height: .97;
}
.hero h1 span { color: var(--violet); }
.hero-lead { max-width: 810px; margin: 30px 0 0; color: #47546a; font-size: clamp(19px, 2vw, 25px); line-height: 1.42; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 19px;
  border: 1px solid #bdc7d4;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-weight: 700;
  text-decoration: none;
}
.button:hover { border-color: var(--violet); }
.button-primary { border-color: var(--violet); background: var(--violet); color: #fff; }
.safe-note { display: flex; gap: 9px; align-items: baseline; margin-top: 28px; color: #5f6d82; font-size: 13px; }
.safe-note span { color: var(--verified); }

.rop-card {
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 3vw, 42px);
  border-radius: 28px 28px 5px 28px;
  background: var(--ink);
  box-shadow: var(--shadow);
  color: #fff;
}
.rop-card::after { content: "РОП"; position: absolute; right: -8px; bottom: -42px; color: rgba(255,255,255,.045); font-size: 145px; font-weight: 900; letter-spacing: -.08em; }
.rop-label { display: inline-block; margin-bottom: 24px; padding: 6px 9px; border: 1px solid rgba(47,198,246,.65); border-radius: 7px; color: #7be0ff; font-family: "Cascadia Mono", Consolas, monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.rop-card blockquote { position: relative; z-index: 1; margin: 0 0 30px; font-size: clamp(20px, 2vw, 27px); font-weight: 650; line-height: 1.35; }
.hero-rules { position: relative; z-index: 1; display: grid; gap: 10px; }
.hero-rules p { display: flex; gap: 13px; margin: 0; color: #dbe3f0; font-size: 14px; }
.hero-rules b { color: #77ddfb; font-family: "Cascadia Mono", Consolas, monospace; }

.progress-shell {
  position: sticky;
  top: 72px;
  z-index: 25;
  display: grid;
  grid-template-columns: 230px minmax(160px, 1fr) auto;
  gap: 22px;
  align-items: center;
  max-width: 1500px;
  margin: 0 auto;
  padding: 12px clamp(20px, 5vw, 80px);
  border: 1px solid var(--line);
  border-right: 0;
  border-left: 0;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(14px);
}
.progress-copy { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.progress-copy span { color: var(--ink-soft); }
.progress-copy strong { font-family: "Cascadia Mono", Consolas, monospace; }
progress { width: 100%; height: 8px; overflow: hidden; border: 0; border-radius: 99px; background: #dfe5ec; }
progress::-webkit-progress-bar { background: #dfe5ec; }
progress::-webkit-progress-value { border-radius: 99px; background: var(--violet); transition: width .35s ease; }
progress::-moz-progress-bar { border-radius: 99px; background: var(--violet); }
.mobile-steps { display: flex; gap: 4px; }
.mobile-steps a { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #667489; font: 700 11px/1 "Cascadia Mono", Consolas, monospace; text-decoration: none; }
.mobile-steps a.is-active, .mobile-steps a.is-complete { background: var(--violet); color: #fff; }

.training-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 48px;
  max-width: 1500px;
  margin: 0 auto;
  padding: 64px clamp(20px, 5vw, 80px) 100px;
}
.route-rail { position: sticky; top: 150px; align-self: start; padding: 4px 0; }
.rail-title { margin: 0 0 20px; color: var(--ink-soft); font-family: "Cascadia Mono", Consolas, monospace; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.route-rail ol { position: relative; display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.route-rail ol::before { content: ""; position: absolute; top: 10px; bottom: 10px; left: 20px; width: 2px; background: #cfd7e1; }
.route-rail li { position: relative; }
.route-rail a { display: grid; grid-template-columns: 42px 1fr; column-gap: 11px; padding: 10px 12px 10px 0; border-radius: 12px; text-decoration: none; }
.route-rail a:hover { background: rgba(255, 255, 255, .68); }
.route-rail a span { position: relative; z-index: 1; display: grid; place-items: center; width: 42px; height: 42px; border: 2px solid #cfd7e1; border-radius: 50%; background: var(--mist); color: #536075; font: 700 11px/1 "Cascadia Mono", Consolas, monospace; }
.route-rail a b { align-self: end; font-size: 14px; }
.route-rail a small { grid-column: 2; color: #5f6d82; font-size: 12px; }
.route-rail a.is-active { background: #fff; box-shadow: 0 8px 25px rgba(23,32,51,.07); }
.route-rail a.is-active span { border-color: var(--violet); background: var(--violet); color: #fff; }
.route-rail a.is-complete span { border-color: var(--verified); background: var(--verified); color: #fff; }
.rail-tip { margin: 24px 0 0 52px; padding: 12px 14px; border-left: 3px solid var(--violet); background: rgba(101,72,216,.07); color: #5a6477; font-size: 12px; }

.lessons { min-width: 0; }
.stage-map { margin: 0 0 30px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.stage-map summary { padding: 17px 20px; cursor: pointer; font-weight: 750; }
.stage-map summary span { margin-right: 10px; color: var(--violet); font: 800 11px/1.2 "Cascadia Mono", Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
.stage-map-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; padding: 4px 22px 22px; border-top: 1px solid var(--line); }
.stage-map-grid ol { margin: 18px 0 0; padding-left: 28px; color: var(--ink-soft); font-size: 12px; }
.stage-map-grid li { margin: 8px 0; padding-left: 3px; }
.stage-map-grid li::marker { color: var(--violet); font: 800 10px/1 "Cascadia Mono", Consolas, monospace; }
.lesson { scroll-margin-top: 154px; margin-bottom: 84px; padding: clamp(24px, 4vw, 54px); border: 1px solid #dbe1e8; border-radius: 30px; background: #fff; box-shadow: var(--shadow); }
.lesson-header > div { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.lesson-number { padding: 5px 8px; border-radius: 6px; background: var(--ink); color: #fff; font: 700 11px/1.2 "Cascadia Mono", Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
.stage-route { margin: 0; color: var(--violet); font: 700 12px/1.4 "Cascadia Mono", Consolas, monospace; }
.lesson-header h2 { max-width: 920px; margin: 18px 0 12px; font-size: clamp(32px, 4vw, 58px); letter-spacing: -.045em; line-height: 1.03; }
.lesson-header > p { max-width: 900px; margin: 0; color: var(--ink-soft); font-size: 18px; }
.rop-voice { position: relative; margin: 34px 0; padding: 22px 24px 22px 60px; border: 0; border-radius: 16px; background: #f0edff; color: #352778; font-size: 18px; font-weight: 650; }
.rop-voice::before { content: "РОП"; position: absolute; top: 22px; left: 16px; color: var(--violet); font: 800 11px/1 "Cascadia Mono", Consolas, monospace; letter-spacing: .08em; }

.lesson-body { display: grid; grid-template-columns: minmax(240px, .65fr) minmax(0, 1.35fr); gap: 22px; align-items: start; }
.action-card { padding: 23px; border: 1px solid var(--line); border-radius: 18px; background: #f8fafc; }
.action-card h3, .finals h3 { margin: 0 0 16px; font-size: 18px; }
.action-card ol { display: grid; gap: 12px; margin: 0; padding-left: 22px; }
.action-card li::marker { color: var(--violet); font-weight: 800; }

.screen-card { overflow: hidden; margin: 0; border: 1px solid #d9e0e8; border-radius: 17px; background: #f5f7fa; }
.screen-card > img { width: 100%; height: auto; }
.screen-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; padding: 8px 12px; border-bottom: 1px solid #d9e0e8; background: var(--ink); color: #fff; }
.screen-toolbar figcaption { font-size: 13px; font-weight: 700; }
.zoom { padding: 6px 9px; border: 1px solid rgba(255,255,255,.28); border-radius: 7px; background: transparent; color: #fff; cursor: pointer; font-size: 11px; }
.zoom:hover { border-color: var(--air); color: #8be6ff; }
.shot { position: relative; }
.shot > img { width: 100%; }
.pin { position: absolute; left: var(--x); top: var(--y); display: grid; place-items: center; width: 30px; height: 30px; transform: translate(-50%, -50%); border: 3px solid #fff; border-radius: 50%; background: var(--signal); box-shadow: 0 4px 12px rgba(23,32,51,.32); color: #fff; cursor: pointer; font: 800 12px/1 "Cascadia Mono", Consolas, monospace; }
.pin:hover, .pin:focus-visible { transform: translate(-50%, -50%) scale(1.14); }
.callout-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 11px 14px 13px; border-top: 1px solid var(--line); background: #fff; list-style: none; font-size: 12px; }
.callout-legend li { display: flex; gap: 7px; align-items: center; }
.callout-legend b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--signal); color: #fff; font: 800 10px/1 "Cascadia Mono", Consolas, monospace; }
.mini-screens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; grid-column: 1 / -1; }
.mini-screens .screen-card img { width: 100%; max-height: 620px; object-fit: contain; object-position: top; background: #fff; }

.lesson-result { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 12px; margin-top: 22px; }
.ready, .lesson-result details { min-width: 0; padding: 18px; border-radius: 14px; }
.ready { border: 1px solid rgba(33,122,98,.3); background: #edf8f4; }
.ready span { color: var(--verified); font: 800 11px/1.2 "Cascadia Mono", Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
.ready p { margin: 8px 0 0; font-weight: 650; }
.lesson-result details { border: 1px solid var(--line); background: #f8fafc; }
.lesson-result details summary { cursor: pointer; font-weight: 750; }
.lesson-result details p { margin: 10px 0 0; color: var(--ink-soft); font-size: 14px; }
.lesson-result details.error { border-color: rgba(217,77,43,.22); background: #fff5f2; }
.lesson-result details.error summary { color: #a33a21; }
.lesson-nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.lesson-nav a { color: var(--violet); font-size: 13px; font-weight: 750; text-decoration: none; }
.lesson-nav a:last-child { justify-self: end; }
.complete { padding: 9px 13px; border: 1px solid #aeb9c7; border-radius: 9px; background: #fff; color: var(--ink); cursor: pointer; font-size: 12px; font-weight: 750; }
.complete.is-complete { border-color: var(--verified); background: var(--verified); color: #fff; }

.finals { padding: 24px; border-radius: 18px; background: var(--ink); color: #fff; }
.finals ol { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: finals; }
.finals li { display: grid; gap: 2px; padding-left: 38px; position: relative; counter-increment: finals; }
.finals li::before { content: counter(finals, decimal-leading-zero); position: absolute; left: 0; top: 1px; color: #7be0ff; font: 800 12px/1 "Cascadia Mono", Consolas, monospace; }
.finals span { color: #bfc9d9; font-size: 13px; }

.daily { scroll-margin-top: 150px; margin: 110px 0 70px; padding: clamp(28px, 5vw, 60px); border-radius: 30px; background: var(--ink); color: #fff; }
.daily-heading h2, .appendix h2 { margin: 0; font-size: clamp(34px, 4vw, 56px); letter-spacing: -.045em; line-height: 1.05; }
.daily-heading > p:last-child { max-width: 760px; color: #c9d3e1; }
.self-check { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 32px; }
.self-check h3 { grid-column: 1 / -1; margin: 0 0 6px; color: #83e4ff; font-size: 18px; }
.self-check details { padding: 16px 18px; border: 1px solid rgba(255,255,255,.16); border-radius: 13px; background: rgba(255,255,255,.04); }
.self-check details:last-child { grid-column: 1 / -1; }
.self-check summary { cursor: pointer; font-weight: 700; }
.self-check p { margin: 11px 0 0; color: #d7dfeb; font-size: 14px; }
.self-check b { color: #83e4ff; }
.check-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 30px; }
.check-columns fieldset { display: grid; gap: 11px; margin: 0; padding: 22px; border: 1px solid rgba(255,255,255,.16); border-radius: 16px; }
.check-columns legend { padding: 0 8px; color: #83e4ff; font-weight: 750; }
.check-columns label { display: flex; gap: 10px; align-items: flex-start; color: #e4e9f2; cursor: pointer; }
.check-columns input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--air); }
.reset-progress { margin-top: 22px; border-color: rgba(255,255,255,.25); background: transparent; color: #fff; }

.appendix { display: grid; grid-template-columns: 1.2fr repeat(2, minmax(220px, .8fr)); gap: 18px; align-items: stretch; padding: 20px 0 40px; }
.appendix > div { padding-right: 20px; }
.appendix > div p:last-child { color: var(--ink-soft); }
.document { display: flex; flex-direction: column; padding: 23px; border: 1px solid var(--line); border-radius: 17px; background: #fff; text-decoration: none; }
.document:hover { border-color: var(--violet); transform: translateY(-2px); }
.document span { color: var(--violet); font: 800 11px/1.2 "Cascadia Mono", Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
.document b { margin: 22px 0 8px; font-size: 20px; }
.document small { color: var(--ink-soft); }

footer { display: flex; justify-content: space-between; gap: 20px; padding: 28px clamp(20px, 5vw, 80px); background: #101726; color: #aab6c8; font-size: 13px; }
footer p { margin: 0; }
footer a { color: #fff; }

.lightbox { width: min(94vw, 1500px); max-height: 94vh; padding: 48px 16px 16px; border: 0; border-radius: 18px; background: #101726; box-shadow: 0 30px 100px rgba(0,0,0,.45); }
.lightbox::backdrop { background: rgba(8, 12, 20, .82); backdrop-filter: blur(5px); }
.lightbox button { position: fixed; top: max(3vh, 16px); right: max(3vw, 16px); padding: 9px 12px; border: 1px solid rgba(255,255,255,.4); border-radius: 9px; background: #172033; color: #fff; cursor: pointer; }
.lightbox img { max-width: 100%; max-height: calc(94vh - 64px); margin: 0 auto; object-fit: contain; }
.callout-toast { position: fixed; right: 20px; bottom: 20px; z-index: 60; width: min(390px, calc(100vw - 40px)); padding: 14px 16px; border-radius: 12px; background: var(--ink); box-shadow: 0 14px 40px rgba(23,32,51,.24); color: #fff; opacity: 0; pointer-events: none; transform: translateY(12px); transition: .2s ease; }
.callout-toast.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1120px) {
  .training-layout { grid-template-columns: 235px minmax(0, 1fr); gap: 26px; }
  .lesson { padding: 30px; }
  .lesson-body { grid-template-columns: 1fr; }
  .lesson-result { grid-template-columns: 1fr 1fr; }
  .lesson-result .ready { grid-column: 1 / -1; }
  .appendix { grid-template-columns: 1fr 1fr; }
  .appendix > div { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .topbar nav { display: none; }
  .brand span { display: none; }
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 72px; }
  .hero h1 { font-size: clamp(44px, 11vw, 72px); }
  .progress-shell { top: 72px; grid-template-columns: 1fr; gap: 7px; }
  .progress-copy { font-size: 11px; }
  .mobile-steps { justify-content: space-between; }
  .training-layout { display: block; padding-top: 36px; }
  .route-rail { display: none; }
  .stage-map-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lesson { scroll-margin-top: 188px; margin-bottom: 48px; border-radius: 20px; }
  .mini-screens, .check-columns { grid-template-columns: 1fr; }
  .self-check { grid-template-columns: 1fr; }
  .self-check details:last-child { grid-column: auto; }
  .lesson-result { grid-template-columns: 1fr; }
  .lesson-result .ready { grid-column: auto; }
  .appendix { grid-template-columns: 1fr; }
  .appendix > div { grid-column: auto; }
}

@media (max-width: 520px) {
  body { font-size: 15px; }
  .topbar { min-height: 64px; }
  .brand img { width: 102px; }
  .hero { padding: 54px 18px 58px; }
  .hero-lead { font-size: 18px; }
  .rop-card { border-radius: 20px 20px 4px 20px; }
  .progress-shell { top: 64px; padding: 9px 14px; }
  .mobile-steps a { width: 24px; height: 24px; }
  .training-layout { padding: 28px 12px 70px; }
  .stage-map summary { padding: 15px 14px; }
  .stage-map-grid { grid-template-columns: 1fr; padding: 0 18px 18px; }
  .lesson { scroll-margin-top: 174px; padding: 22px 14px; }
  .lesson-header h2 { font-size: 34px; }
  .lesson-header > p { font-size: 16px; }
  .rop-voice { padding: 48px 16px 16px; font-size: 16px; }
  .action-card { padding: 18px; }
  .screen-toolbar { min-height: 42px; }
  .screen-card { border-radius: 12px; }
  .screen-wide .shot { overflow-x: auto; overscroll-behavior-inline: contain; }
  .screen-wide .shot > img { width: 760px; max-width: none; }
  .screen-wide .pin { display: none; }
  .pin { width: 27px; height: 27px; }
  .lesson-nav { grid-template-columns: 1fr 1fr; }
  .lesson-nav .complete { grid-column: 1 / -1; grid-row: 1; }
  .lesson-nav a { grid-row: 2; }
  .daily { padding: 28px 18px; border-radius: 20px; }
  .appendix { padding-inline: 6px; }
  footer { flex-direction: column; }
}

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

@media print {
  .topbar, .progress-shell, .route-rail, .lesson-nav, .zoom, .pin, footer { display: none !important; }
  body { background: #fff; }
  .training-layout { display: block; padding: 0; }
  .lesson { break-inside: avoid; box-shadow: none; }
  .lesson-result details[open] p, .lesson-result details p { display: block; }
}