/* Публичный сайт тренажёра — светлый, лёгкий, без перегруза.

   Витрина читается взрослым и ребёнком днём, с телефона и между делом,
   поэтому она светлая, как сайты образовательных платформ (Умскул,
   Школково, Образавр): белые карточки на почти белом фоне, один
   акцентный цвет для кнопок, крупные чёрные заголовки, цвет предмета —
   пастельной подложкой. Змейка и неоновые картинки приложения остались:
   у них прозрачный фон, и на светлом они читаются даже ярче.

   Структура и классы страниц прежние — сменилось только оформление.
   Сначала телефон. */

@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/golos-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/golos-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
/* Стрелки «→» «←»: в Golos их нет, системные сидят низко и мимо центра.
   Свои — fonts/build_arrows.py, тонкая для текста и толстая для жирного. */
@font-face {
  font-family: "Golos Text"; font-style: normal; font-weight: 400 599; font-display: block;
  src: url("fonts/arrows-400.woff2") format("woff2"); unicode-range: U+2190, U+2192;
}
@font-face {
  font-family: "Golos Text"; font-style: normal; font-weight: 600 900; font-display: block;
  src: url("fonts/arrows-800.woff2") format("woff2"); unicode-range: U+2190, U+2192;
}

:root {
  color-scheme: light;
  --page: #f6f7fb;
  --surface: #ffffff;
  --surface-2: #f2f4f9;
  --ink: #151a2d;
  --ink-2: #3c4258;
  --muted: #5a6079;
  --border: #e3e6ef;
  --border-2: #edeff5;

  /* цвета предметов: насыщенный для акцента, -deep для текста на светлом,
     -soft для подложки */
  --blue: #3d6cf5;   --blue-deep: #2a52cc;   --blue-soft: #eaf0ff;
  --aqua: #18b47f;   --aqua-deep: #0f8a60;   --aqua-soft: #e3f7ef;
  --violet: #7b5cf0; --violet-deep: #5b3fd0; --violet-soft: #f0ebff;
  --yellow: #f2a516; --yellow-deep: #b97a00; --yellow-soft: #fff4dc;
  --red: #e5484d;    --red-deep: #c4343a;    --red-soft: #fdecec;
  --coral: #f2784b;  --coral-deep: #cc5a2f;  --coral-soft: #fff0e9;
  --pink: #e35da8;   --pink-deep: #c03f88;   --pink-soft: #fdeef6;

  --accent: #3d6cf5;
  --accent-hover: #2f5ce0;
  --sub: var(--blue);
  --sub-deep: var(--blue-deep);
  --grad: linear-gradient(120deg, var(--blue), var(--aqua));

  --shadow-s: 0 1px 2px rgba(21, 26, 45, .04), 0 4px 14px -6px rgba(21, 26, 45, .08);
  --shadow: 0 1px 2px rgba(21, 26, 45, .04), 0 12px 32px -16px rgba(21, 26, 45, .14);
  --shadow-h: 0 2px 4px rgba(21, 26, 45, .05), 0 22px 44px -20px rgba(21, 26, 45, .22);

  --r: 22px;
  --r-s: 14px;
  --pill: 999px;
  --font: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font: 16.5px/1.6 var(--font);
  background: var(--page);
  overflow-x: clip;
}
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }
h1, h2, h3 { line-height: 1.12; letter-spacing: -0.02em; color: var(--ink); }
h1 { font-size: clamp(30px, 6vw, 48px); margin: 0 0 14px; font-weight: 800; }
h2 { font-size: clamp(22px, 4vw, 30px); margin: 52px 0 16px; font-weight: 800; }
h3 { font-size: 18px; margin: 24px 0 8px; font-weight: 800; }
p { margin: 0 0 12px; }
ul, ol { margin: 0 0 12px; padding-left: 22px; }
li { margin: 4px 0; }

::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }

/* выделенное в заголовке — одним акцентным цветом, без градиента */
.grad, mark { background: none; color: var(--accent); -webkit-text-fill-color: currentColor; padding: 0; }

.wrap { width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }
/* Пилюля над заголовком — одна на весь сайт: тон и рамка из цвета текста
   (на тёмном фоне и в цвете предмета работает сама), слева звёздочка
   в круге фирменного градиента. */
.kicker, .tr-kicker, .cr-kicker, .fw-kicker, .ps-kicker, .sb-kicker, .pd-kicker, .tt-eyebrow, .tb-kicker {
  display: inline-flex; align-items: center; gap: 8px; width: max-content; max-width: 100%;
  padding: 5px 14px 5px 5px; border-radius: 999px;
  font-size: 12.5px; font-weight: 800; line-height: 1.3; letter-spacing: .07em; text-transform: uppercase;
  color: #1f6bff; background: color-mix(in srgb, currentColor 9%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 20%, transparent);
}
:is(.kicker, .tr-kicker, .cr-kicker, .fw-kicker, .ps-kicker, .sb-kicker, .pd-kicker, .tt-eyebrow, .tb-kicker)::before {
  content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M9 3.6l1.5 3.9L14.4 9l-3.9 1.5L9 14.4l-1.5-3.9L3.6 9l3.9-1.5z' fill='%23fff'/%3E%3C/svg%3E") center / 100% no-repeat, linear-gradient(135deg, #1f7bff, #17bfe0 55%, #2ee59d);
}
.kicker { margin-bottom: 10px; color: var(--accent); }

/* белая карточка на светлом фоне */
.panel, .rules li, .formulas li, .note-box, .see a {
  background: var(--surface);
  border-radius: var(--r);
  box-shadow: 0 0 0 1px var(--border-2), var(--shadow-s);
}

/* --- кнопки: сплошная акцентная и белая с рамкой ------------------------ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 50px; padding: 0 26px; border: 0; border-radius: var(--pill);
  background: var(--accent); color: #fff; cursor: pointer; text-decoration: none;
  font: 700 15.5px/1 var(--font);
  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--accent) 80%, transparent);
  transition: background .15s, transform .08s, box-shadow .15s;
}
.btn:hover { color: #fff; background: var(--accent-hover); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 2px; }
.btn:disabled { opacity: .5; cursor: default; }
.btn-ghost {
  background: var(--surface); color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--border);
}
.btn-ghost:hover { color: var(--ink); background: var(--surface-2); }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: 14.5px; }
.btn-lg { min-height: 56px; padding: 0 30px; font-size: 17px; }
.btn-go { background: linear-gradient(95deg, #1f7bff 0%, #17bfe0 55%, #2ee59d 100%); box-shadow: 0 14px 26px -14px rgba(31, 123, 255, .75); }
.btn-go:hover { background: linear-gradient(95deg, #1a6ef0 0%, #13add0 55%, #24d48e 100%); }
.btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* Шапка, меню «Предметы», крошки и подвал — static/public/pages/chrome.css. */

/* --- первый экран ------------------------------------------------------- */

/* Нейтрально по возрасту и в языке экрана входа: фон — наклонённая
   мозаика обложек глав, слева на светлой вуали обещание и почта для
   регистрации, справа наклонённое окно приложения (parts/app_shot.html).
   Блок во всю ширину окна, лишнее обрезается. Градиент — только в
   заголовке и на главной кнопке. */
.hero {
  position: relative; isolation: isolate; overflow: clip;
  margin: 0 calc(50% - 50vw); padding: clamp(36px, 6vw, 84px) 0 clamp(96px, 12vw, 190px);
  background: var(--page);
}
.hero-mosaic {
  position: absolute; inset: -90px; z-index: -2;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
  transform: rotate(-8deg) scale(1.08);
}
.hero-mosaic img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 18px; box-shadow: 0 10px 24px -14px rgba(30, 30, 90, .5); }
/* Низ первого экрана: мозаика расплывается и тает в фон страницы —
   ::before размывает обложки, нижний слой вуали ::after доводит до фона. */
.hero::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: min(320px, 45%); z-index: -1;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(transparent, #000 70%); mask-image: linear-gradient(transparent, #000 70%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(transparent calc(100% - 260px), var(--page)), rgba(246, 247, 251, .9);
}
@media (min-width: 760px) { .hero-mosaic { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 1100px) {
  .hero::after { background: linear-gradient(transparent calc(100% - 260px), var(--page)), linear-gradient(90deg, rgba(246, 247, 251, .98) 0, rgba(246, 247, 251, .93) 42%, rgba(246, 247, 251, .35) 72%, rgba(246, 247, 251, .15) 100%); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-mosaic { animation: hero-drift 60s linear infinite alternate; }
  @keyframes hero-drift { to { transform: rotate(-8deg) scale(1.08) translateY(-60px); } }
}

/* Почта сразу в регистрацию: поле и кнопка в одной белой пилюле. */
.signup {
  display: flex; gap: 8px; width: min(560px, 100%); margin-top: 30px; padding: 7px;
  border-radius: var(--pill); background: var(--surface);
  box-shadow: 0 0 0 1px var(--border-2), 0 24px 50px -26px rgba(21, 26, 45, .3);
}
/* Поля нет: серая надпись, по нажатию на пилюлю — регистрация (site.js). */
.signup { cursor: pointer; }
.signup-say {
  flex: 1; min-width: 0; align-self: center; padding: 0 18px;
  font: 500 16.5px var(--font); color: #9a9fb3; user-select: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.signup:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent), 0 24px 50px -26px rgba(21, 26, 45, .3); }
@media (max-width: 480px) {
  .signup { flex-direction: column; border-radius: 26px; }
  .signup-say { padding: 12px 18px 6px; text-align: center; }
}

.hero-in {
  display: grid; gap: 40px; align-items: center;
  max-width: 1360px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px);
}
.hero-copy { position: relative; z-index: 1; }
.hero h1 { margin: 22px 0 22px; font-size: clamp(36px, 8.4vw, 60px); line-height: 1.03; font-weight: 800; letter-spacing: -.035em; }
.h-grad { color: transparent; background: linear-gradient(95deg, #1f7bff 0%, #17bfe0 55%, #2ee59d 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero .lead { max-width: 560px; font-size: clamp(18px, 1vw + 13px, 20px); line-height: 1.55; color: var(--ink-2); }
/* Две кнопки первого экрана и финального призыва: регистрация и «посмотреть». */
.hero-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-acts .btn-ghost { box-shadow: inset 0 0 0 1.5px var(--border), 0 18px 40px -26px rgba(21, 26, 45, .35); }
@media (max-width: 480px) { .hero-acts .btn { flex: 1 1 100%; } }
/* Переход по якорю (#try, #kak) — блок не прячется под плавающей шапкой. */
.block[id] { scroll-margin-top: 96px; }
.hero-note { margin: 14px 0 0 4px; font-size: 16px; line-height: 1.45; color: var(--muted); }
.hero-note b { color: var(--ink-2); font-weight: 700; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  padding: 5px 13px 5px 6px; border-radius: var(--pill);
  font-size: 14px; font-weight: 600; color: var(--ink-2);
  background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--border);
}
.chip b { flex: none; padding: 3px 9px; border-radius: var(--pill); font-size: 12.5px; font-weight: 800; color: #fff; background: linear-gradient(95deg, #1f7bff, #17bfe0 55%, #2ee59d); }
.facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 22px 0 0; padding: 0; list-style: none; font-size: 15px; font-weight: 500; color: var(--muted); }
.facts li { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.facts li::before {
  content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: #dcfaee url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.2l2.6 2.6 5.4-5.4' fill='none' stroke='%2314b886' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}
@media (min-width: 1100px) {
  .hero-in { grid-template-columns: minmax(0, 600px) minmax(0, 1fr); gap: 48px; }
  .hero .shot { transform: perspective(1600px) rotateY(-14deg) rotateX(4deg); transform-origin: 0 50%; }
}

/* Окно приложения. Вёрстка в натуральную величину 1280×780 (.ap) и
   уменьшается целиком: --k — масштаб, .shot-scale занимает уже
   уменьшенное место. Шрифт сайта, но плотнее — как у приложения. */
.shot { --k: .5; --sa: #5b8cff; --sb: #a779ff; position: relative; min-width: 0; } /* --sa/--sb — цвета предмета окна, как в тренажёре (shot.js меняет) */
.shot-win {
  width: max-content; padding: 30px 8px 8px; border-radius: 22px; background: #fff;
  box-shadow: 0 50px 90px -40px rgba(25, 30, 80, .42), 0 0 0 1px rgba(25, 30, 80, .06);
  position: relative;
}
.shot-win::before {
  content: ""; position: absolute; left: 16px; top: 11px; width: 48px; height: 9px;
  background: radial-gradient(circle 4.5px at 4.5px 4.5px, #d9dbe7 98%, transparent) 0 0 / 16px 9px repeat-x;
}
.shot-scale { width: calc(1280px * var(--k)); height: calc(780px * var(--k)); overflow: hidden; border-radius: 14px; }
.ap { width: 1280px; height: 780px; transform: scale(var(--k)); transform-origin: 0 0; }
@media (min-width: 640px) { .shot { --k: .56; } }
@media (min-width: 1100px) { .shot { --k: .62; } }
@media (min-width: 1500px) { .shot { --k: .66; } }

.ap {
  display: grid; grid-template-columns: 210px 1fr; overflow: hidden;
  font-family: var(--font); color: #1e1c3d; line-height: 1.3; background: #f6f3fd; text-align: left;
}
.ap img { display: block; }
.ap small, .ap b, .ap span, .ap em, .ap u { font-style: normal; text-decoration: none; }
.ap-side { display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; padding: 16px 10px; background: #fbfaff; border-right: 1px solid #eeeaf8; }
.ap-side > img { width: 168px; height: auto; margin: 4px 8px 6px; }
.ap-pill { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: #fff; box-shadow: 0 6px 16px -12px rgba(40, 30, 110, .4), inset 0 0 0 1px #eeeaf8; }
.ap-pill img { width: 32px; height: 32px; padding: 5px; border-radius: 10px; background: #f3edff; }
.ap-pill small { display: block; font-size: 10px; font-weight: 800; letter-spacing: .04em; color: #8a87a8; }
.ap-pill b { font-size: 13px; font-weight: 800; }
.ap-menu { display: grid; align-content: start; gap: 2px; }
.ap-menu button { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; font-size: 14px; font-weight: 700; color: #3f3c66; }
.ap-menu button::before { content: ""; width: 16px; height: 16px; border-radius: 5px; box-shadow: inset 0 0 0 2px currentColor; opacity: .6; }
.ap-menu .on { color: #fff; background: linear-gradient(95deg, var(--sa), var(--sb)); box-shadow: 0 10px 20px -12px color-mix(in srgb, var(--sa) 90%, transparent); }
.ap-menu .off { color: #b4b1cc; }
.ap-menu hr { width: 100%; margin: 6px 0; border: 0; border-top: 1px solid #eeeaf8; }
.ap-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ap-stats div { display: grid; padding: 10px; border-radius: 14px; font-size: 10.5px; font-weight: 700; }
.ap-stats b { font-size: 18px; font-weight: 800; }
.ap-stats .fl { color: #e8590c; background: #fff0e3; }
.ap-stats .gm { color: #0b8bd1; background: #e3f5ff; }
.ap-main { display: grid; grid-template-columns: 1fr 300px; grid-template-rows: 290px auto 1fr; gap: 14px; padding: 14px 16px; min-width: 0; }
.ap-h { display: block; font-size: 18px; font-weight: 800; }
.ap-h small { margin-left: 8px; font-size: 12px; font-weight: 600; color: #8a87a8; }
.ap-hero { position: relative; display: grid; align-content: center; gap: 12px; padding: 24px 28px; border-radius: 24px; overflow: hidden; isolation: isolate; background: #f3e9ff; box-shadow: 0 20px 40px -26px rgba(120, 70, 200, .45); }
.ap-hero > img { position: absolute; right: 0; top: 0; z-index: -1; width: 62%; height: 100%; object-fit: cover; -webkit-mask: linear-gradient(90deg, transparent 0, #000 40%); mask: linear-gradient(90deg, transparent 0, #000 40%); }
.ap-hero > small { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--sa); }
.ap-hero .ap-h { max-width: 400px; font-size: 32px; line-height: 1.08; letter-spacing: -.02em; }
.ap-hero p { margin: 0; max-width: 380px; font-size: 13.5px; line-height: 1.45; font-weight: 600; color: #5d5a82; }
.ap-chips, .ap-go { display: flex; gap: 6px; }
.ap-chips span { padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(255, 255, 255, .88); }
.ap-go a { display: grid; place-items: center; height: 40px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 800; background: #fff; }
.ap-go a:first-child { color: #fff; background: linear-gradient(95deg, var(--sa), var(--sb)); box-shadow: 0 10px 20px -12px color-mix(in srgb, var(--sa) 90%, transparent); }
.ap-today { grid-row: span 2; display: grid; align-content: start; gap: 10px; padding: 18px; border-radius: 24px; background: #fff; box-shadow: 0 16px 34px -26px rgba(40, 30, 110, .35); }
.ap-today .ap-h { display: flex; justify-content: space-between; align-items: baseline; font-size: 19px; }
.ap-min { font-size: 24px; font-weight: 800; }
.ap-min small { font-size: 12px; color: #8a87a8; }
.ap-line { display: block; height: 8px; border-radius: 9px; background: linear-gradient(90deg, #2ee59d var(--w), #ece9f6 0); }
.ap-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; font-size: 10px; font-weight: 700; color: #8a87a8; }
.ap-week i { display: block; width: 26px; height: 26px; margin: 0 auto 3px; border-radius: 50%; background: #ece9f6; }
.ap-week i.d { background: linear-gradient(135deg, #22c97e, #2ee59d); }
.ap-week i.t { background: #fff; box-shadow: inset 0 0 0 2px var(--sa); }
.ap-mis { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 14px; font-size: 12.5px; font-weight: 800; background: #f7f5fd; }
.ap-mis i { width: 28px; height: 28px; border-radius: 9px; background: var(--c); opacity: .25; }
.ap-mis em { font-size: 11px; color: #e8a10c; }
.ap u { display: block; height: 4px; border-radius: 4px; background: linear-gradient(90deg, #2ee59d var(--w, 0%), #e6e3f2 0); }
.ap-mis u { margin-top: 5px; }
.ap-subs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 12px; border-radius: 22px; background: #fff; }
.ap-sub { display: grid; gap: 8px; padding: 12px; border-radius: 16px; background: linear-gradient(120deg, #fff 30%, var(--t)); box-shadow: inset 0 0 0 1px #eeeaf8; }
.ap-sub.on { box-shadow: inset 0 0 0 2px var(--sb); }
.ap-sub > span { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 800; }
.ap-sub img { width: 28px; height: 28px; padding: 4px; border-radius: 9px; background: #fff; box-shadow: 0 4px 10px -6px rgba(40, 30, 110, .5); }
.ap-sub small { font-size: 10.5px; font-weight: 600; color: #8a87a8; }
.ap-path { grid-column: span 2; display: grid; align-content: start; gap: 10px; padding: 14px; border-radius: 22px; background: #fff; }
.ap-grades { display: flex; gap: 8px; }
.ap-grades > button { display: flex; align-items: center; gap: 6px; padding: 4px 12px 4px 4px; border-radius: 999px; font-size: 10.5px; font-weight: 700; line-height: 1.1; color: #8a87a8; background: #f7f5fd; }
.ap-grades i { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: conic-gradient(#2ee59d calc(var(--p) * 1%), #e6e3f2 0); }
.ap-grades i::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #fff; }
.ap-grades i b { position: relative; font-size: 13px; font-weight: 800; color: #1e1c3d; }
.ap-grades .on { color: #fff; background: linear-gradient(95deg, var(--sa), var(--sb)); }
.ap-grades .on i { background: conic-gradient(#fff calc(var(--p) * 1%), rgba(255, 255, 255, .35) 0); }
.ap-grades .on i::before { background: var(--sa); }
.ap-grades .on i b { color: #fff; }
.ap-chs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.ap-chs > button { display: grid; gap: 4px; padding: 6px 6px 10px; border-radius: 16px; background: #fff; box-shadow: 0 10px 22px -18px rgba(40, 30, 110, .5), inset 0 0 0 1px #eeeaf8; }
.ap-chs > .on { box-shadow: inset 0 0 0 2px var(--sa); }
.ap-chs img { width: 100%; aspect-ratio: 16 / 9.5; object-fit: cover; border-radius: 11px; }
.ap-chs small { padding: 0 4px; font-size: 9.5px; font-weight: 800; letter-spacing: .04em; color: #8a87a8; }
.ap-chs b { padding: 0 4px; font-size: 12px; font-weight: 800; line-height: 1.2; }
.ap-chs u { margin: 2px 4px 0; }

/* Живое окно (shot.js): всё нажимается, шапка главы плавно меняется,
   пункты меню открывают подсказку про полный тренажёр. Клики идут и
   сквозь наклон — у трансформированного окна они попадают куда надо. */
.ap button { font: inherit; color: inherit; text-align: inherit; border: 0; margin: 0; cursor: pointer; }
.ap button:focus-visible, .ap a:focus-visible { outline: 3px solid var(--sa); outline-offset: 2px; }
.ap a { text-decoration: none; color: inherit; }
.ap-menu button { background: none; transition: background-color .2s, color .2s; }
.ap-menu button:hover:not(.on) { background: #f1edfc; }
.ap-go a { transition: transform .2s, box-shadow .2s; }
.ap-go a:hover { transform: translateY(-2px); box-shadow: 0 12px 22px -12px rgba(40, 30, 110, .55); }
.ap-sub { transition: box-shadow .2s, transform .2s; }
.ap-sub:hover { transform: translateY(-2px); }
.ap-sub:hover:not(.on) { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sb) 45%, #fff); }
.ap-grades > button { transition: background-color .2s, transform .2s; }
.ap-grades > button:hover:not(.on) { background: #ece7fb; }
.ap-chs > button { transition: transform .2s, box-shadow .2s; }
.ap-chs > button:hover { transform: translateY(-3px); }
.ap-mis { width: 100%; transition: background-color .2s; }
.ap-mis:hover { background: #efebfb; }
.ap-mis.ok i { opacity: 1; background: linear-gradient(135deg, #22c97e, #2ee59d) no-repeat; }
.ap-mis.ok i::after { content: "✓"; display: grid; place-items: center; height: 100%; font-style: normal; font-weight: 900; color: #fff; }
.ap-mis.ok > span { color: #8a87a8; }
.ap-mis.ok em { color: #22a86b; }
.ap-stats .gm b { transition: transform .3s; }
.ap-stats .gm.up b { transform: scale(1.25); }
.ap-hero > :not(img) { transition: opacity .25s, transform .25s; }
.ap-hero > img { transition: opacity .35s; }
.ap-hero.swap > :not(img) { opacity: 0; transform: translateY(6px); }
.ap-hero.swap > img { opacity: .2; }
.ap-chs.swap > button, .ap-grades.swap > button { opacity: 0; }
.ap-chs > button, .ap-grades > button { transition: opacity .25s, transform .2s, box-shadow .2s, background-color .2s; }
.ap { position: relative; }
.ap-toast {
  position: absolute; left: 226px; bottom: 18px; z-index: 2; display: grid; grid-template-columns: 1fr auto; gap: 4px 18px; align-items: center;
  width: 470px; padding: 18px 20px 18px 24px; border-radius: 20px; color: #fff;
  background: linear-gradient(120deg, #1e1c3d, #3a2a7a); box-shadow: 0 24px 50px -20px rgba(30, 20, 80, .7);
  animation: ap-toast .3s cubic-bezier(.2, .7, .2, 1);
}
.ap-toast[hidden] { display: none; }
.ap-toast b { font-size: 18px; font-weight: 800; }
.ap-toast p { grid-column: 1; margin: 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: rgba(255, 255, 255, .8); }
.ap-toast a { grid-column: 2; grid-row: 1 / span 2; padding: 11px 18px; border-radius: 999px; font-size: 14px; font-weight: 800; color: #fff; background: linear-gradient(95deg, var(--sa), var(--sb)); }
.ap-toast [data-toast-close] { position: absolute; right: 8px; top: 4px; padding: 2px 6px; font-size: 18px; color: rgba(255, 255, 255, .6); background: none; }
@keyframes ap-toast { from { opacity: 0; transform: translateY(14px); } }
.shot-hint {
  position: absolute; left: 80px; top: 7px; margin: 0; font-size: 11.5px; font-weight: 700; line-height: 16px; color: #6a6790;
}
.shot-hint::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #2ee59d; box-shadow: 0 0 0 3px rgba(46, 229, 157, .25); animation: ap-pulse 2s ease-in-out infinite; }
@keyframes ap-pulse { 50% { box-shadow: 0 0 0 6px rgba(46, 229, 157, 0); } }
@media (min-width: 1100px) {
  .hero .shot { transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
  .hero .shot:hover, .hero .shot:focus-within { transform: perspective(1600px) rotateY(-6deg) rotateX(2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ap *, .hero .shot { transition: none !important; animation: none !important; }
}

/* Телефон: окно не уменьшается в 2–3 раза (текст стал бы в 4 px и окно
   вылезало за экран), а перестраивается, как приложение на смартфоне:
   сверху класс и серия, карточка главы с обложкой, предметы и главы —
   лентами, которые листаются пальцем. Блок «Сегодня» на телефоне скрыт.
   Шире 640px — вид ноутбука, масштаб подгоняет shot.js под колонку. */
@media (max-width: 640px) {
  .shot { display: flex; justify-content: center; }
  .shot-win { width: min(100%, 440px); padding: 30px 6px 6px; border-radius: 28px; }
  .shot-scale { position: relative; width: auto; height: auto; border-radius: 22px; }
  .ap { display: flex; flex-direction: column; gap: 10px; width: auto; height: auto; padding: 10px; transform: none; }
  .ap-side { display: flex; align-items: center; gap: 8px; padding: 0; background: none; border: 0; }
  .ap-side > img, .ap-menu { display: none; }
  .ap-pill { flex: 1; min-width: 0; padding: 6px 8px; }
  .ap-pill img { width: 30px; height: 30px; }
  .ap-pill small { font-size: 9.5px; }
  .ap-stats { display: flex; gap: 6px; }
  .ap-stats div { padding: 6px 10px; border-radius: 12px; font-size: 10px; line-height: 1.15; }
  .ap-stats b { font-size: 16px; }
  .ap-main { display: flex; flex-direction: column; gap: 10px; padding: 0; }
  .ap-hero { gap: 8px; padding: 16px; border-radius: 20px; }
  .ap-hero > img { position: static; z-index: auto; order: -1; width: calc(100% + 32px); height: 128px; margin: -16px -16px 4px; -webkit-mask: linear-gradient(#000 55%, transparent); mask: linear-gradient(#000 55%, transparent); }
  .ap-hero .ap-h { font-size: 22px; }
  .ap-hero p { font-size: 13px; }
  .ap-chips span { padding: 5px 9px; font-size: 11px; }
  .ap-go a { flex: 1 1 auto; height: 38px; padding: 0 12px; font-size: 13px; white-space: nowrap; }
  .ap-today { display: none; }
  .ap-subs, .ap-grades, .ap-chs { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .ap-subs::-webkit-scrollbar, .ap-grades::-webkit-scrollbar, .ap-chs::-webkit-scrollbar { display: none; }
  .ap-subs { display: flex; gap: 8px; padding: 8px; border-radius: 18px; }
  .ap-sub { flex: 0 0 44%; padding: 10px; scroll-snap-align: start; }
  .ap-sub:hover { transform: none; }
  .ap-path { gap: 9px; padding: 12px; border-radius: 18px; }
  .ap-path .ap-h { font-size: 16px; }
  .ap-path .ap-h small { display: block; margin: 2px 0 0; }
  .ap-grades > button { flex: none; scroll-snap-align: start; }
  .ap-chs { display: flex; gap: 8px; }
  .ap-chs > button { flex: 0 0 46%; scroll-snap-align: start; }
  .ap-chs > button:hover { transform: none; }
  .ap-toast { left: 10px; right: 10px; bottom: 10px; width: auto; grid-template-columns: 1fr; gap: 6px; padding: 16px 18px; }
  .ap-toast a { grid-column: 1; grid-row: auto; justify-self: start; }
}

/* Телефон, как в приложении сейчас (школа, 31.10): предмет и класс — в
   плашке-бургере сверху, лент предметов и классов нет; в карточке главы —
   обложка, название и одна кнопка; ниже путь класса. Меньше мелочи — окно
   читается с одного взгляда. */
@media (max-width: 640px) {
  .ap-subs, .ap-grades, .ap-hero p, .ap-chips { display: none; }
  .ap-pill { position: relative; padding-left: 40px; }
  .ap-pill::before {
    content: ""; position: absolute; left: 13px; top: 50%; width: 16px; height: 12px; transform: translateY(-50%);
    background: linear-gradient(currentColor 0 0) 0 0 / 100% 2px no-repeat, linear-gradient(currentColor 0 0) 0 50% / 100% 2px no-repeat,
      linear-gradient(currentColor 0 0) 0 100% / 100% 2px no-repeat;
    color: #1e1c3d; opacity: .8;
  }
  .ap-hero { gap: 10px; }
  .ap-go { display: grid; gap: 2px; }
  .ap-go a { height: 42px; justify-content: center; }
  .ap-go a + a { height: 32px; background: none; box-shadow: none; }
  .ap-path { gap: 10px; }
  .ap-chs > button { flex-basis: 62%; }
}

/* --- появление при прокрутке и парение --------------------------------- */

[data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
[data-reveal].in { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(-1.2deg); } }
.float { animation: float 7s ease-in-out infinite; animation-delay: var(--fd, 0s); }
.btn-glow { animation: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .float, .btn-glow, .ribbon-track { animation: none !important; }
}

/* --- страница с текстом ------------------------------------------------ */

.page { max-width: 860px; }
.page-wide, .wide { max-width: none; }
.page section { margin-top: 8px; }
.lead { font-size: 18px; color: var(--ink-2); margin: 0; }

/* шапка страницы: пастельная плашка цвета предмета, картинка справа */

.rules { list-style: none; padding: 0; }
.rules li { padding: 14px 18px; margin: 10px 0; box-shadow: inset 4px 0 0 var(--sub), 0 0 0 1px var(--border-2), var(--shadow-s); }

.formulas { list-style: none; padding: 0; display: grid; gap: 10px; }
.formulas li { margin: 0; padding: 14px 18px; font-size: 17px; }

.see { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.see li { margin: 0; }
.see a { display: inline-block; padding: 9px 16px; border-radius: var(--pill); text-decoration: none; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.see a:hover { color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.steps { counter-reset: s; list-style: none; padding: 0; }
.steps li { counter-increment: s; position: relative; padding-left: 50px; margin: 16px 0; }
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: -3px;
  width: 34px; height: 34px; border-radius: 11px; background: var(--blue-soft);
  font: 800 16px/34px var(--font); text-align: center; color: var(--accent);
}

/* призыв: спокойная акцентная плашка */

/* --- тренажёр ---------------------------------------------------------- */

.trainer { margin-top: 18px; }

.task {
  position: relative; padding: 22px 24px; border-radius: var(--r);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--border-2), var(--shadow-s);
}
.task + .task { margin-top: 12px; }
.task-n { font-size: 12px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.task-q { font-size: 20px; font-weight: 700; margin: 8px 0 16px; line-height: 1.45; }
.task-in { display: flex; align-items: center; gap: 10px; }
.task-in input, .fld input {
  width: 100%; min-height: 50px; padding: 0 16px;
  border: 1.5px solid var(--border); border-radius: var(--r-s); background: var(--surface);
  font: 600 18px var(--font); color: var(--ink);
}
.task-in input { max-width: 280px; }
.task-in input:focus, .fld input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
.task-in input::placeholder, .fld input::placeholder { color: #a6abbd; font-weight: 500; }
.unit { color: var(--ink-2); }
.opts { display: grid; gap: 8px; }
.opt {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-radius: var(--r-s); background: var(--surface); cursor: pointer; font-size: 17px; font-weight: 600;
  box-shadow: inset 0 0 0 1.5px var(--border); text-align: left;
}
.opt:hover { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, var(--border)); }
.opt input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; flex: none; }
.opt:has(input:checked) { background: var(--blue-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }
.task-ft { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 18px; }
.verdict { font-weight: 800; font-size: 16px; }
.task.is-right .verdict { color: var(--aqua-deep); }
.task.is-wrong .verdict { color: var(--red); }
.task.is-right .task-in input { border-color: var(--aqua); box-shadow: 0 0 0 4px color-mix(in srgb, var(--aqua) 16%, transparent); }
.task.is-wrong .task-in input { border-color: var(--red); }
.task.is-right .btn { background: var(--aqua); box-shadow: none; }

/* Формулы из фильтра `math` (тот же разбор, что KIT.math в приложении).
   Дробь в два этажа; черта — по ширине большего этажа. */
.frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; margin: 0 3px; font-size: .9em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.frac i { font-style: normal; padding: 0 3px 1px; border-bottom: 2px solid currentColor; align-self: stretch; text-align: center; }
.frac b { font-weight: inherit; padding: 1px 3px 0; align-self: stretch; text-align: center; }
.frac .frac { font-size: 1em; }
/* степень и индекс не раздвигают строку: x^2, x^(m/n), log_a b, x², a₁ */
sup.m-s, sub.m-s { font-size: .68em; line-height: 0; position: relative; vertical-align: baseline; font-style: inherit; letter-spacing: 0; }
sup.m-s { top: -.5em; }
sub.m-s { bottom: -.25em; }
sup.m-s .frac { font-size: .9em; vertical-align: .2em; }
/* дробь-символ ½, ⁴⁄₃: числитель вверху, косая черта, знаменатель на строке */
.m-vf { white-space: nowrap; }
.m-vf > .m-vf-sl { font-size: .8em; margin: 0 .02em; }
.m-vf > sub.m-s { bottom: 0; }
/* вектор со стрелкой vec(AB): стержень и уголок CSS над буквами
   (символ U+20D7 во многих шрифтах рисуется квадратом) */
.m-vec { position: relative; display: inline; font-style: inherit; white-space: nowrap; }
.m-vec::before, .m-vec::after { content: ""; position: absolute; pointer-events: none; border-top: max(1.4px, .075em) solid currentColor; }
.m-vec::before { left: .04em; right: .06em; top: .06em; }
.m-vec::after { right: .05em; top: -.07em; width: .26em; height: .26em; border-right: max(1.4px, .075em) solid currentColor; transform: rotate(45deg); transform-origin: 70% 30%; }
/* интеграл с пределами ∫_a^b, ∫ₐᵇ: пределы стопкой справа от знака */
.m-int { display: inline-flex; align-items: center; vertical-align: -.36em; white-space: nowrap; margin-right: .08em; }
.m-int-s { font-size: 1.5em; line-height: 1; font-style: normal; font-weight: 400; transform: translateY(-.04em); }
.m-lim { display: inline-flex; flex-direction: column; justify-content: space-between; align-self: stretch; font-size: .66em; line-height: 1.02; margin-left: .06em; text-align: left; }
.m-lim-hi { margin-top: -.1em; }
.m-lim-lo { margin-bottom: -.15em; }
.m-lim .frac { font-size: .9em; margin: 0; vertical-align: 0; }
/* система sys(…; …) и совокупность set(…; …): строки друг под другом, слева фигурная
   или квадратная скобка во всю высоту (рамки CSS — тянутся на любое число строк) */
.m-sys { --m-bw: max(1.3px, .07em); display: inline-flex; align-items: stretch; vertical-align: middle; max-width: 100%; margin: .18em .16em; text-indent: 0; text-align: left; line-height: 1.32; font-style: inherit; }
.m-rows { display: flex; flex-direction: column; justify-content: center; gap: .1em; min-width: 0; padding: .04em 0 .04em .22em; }
.m-row { display: block; white-space: nowrap; }
.m-br { flex: none; display: flex; flex-direction: column; width: .46em; }
.m-br > i { flex: 1 1 0; display: flex; flex-direction: column; min-height: .7em; }
.m-br > i::before, .m-br > i::after { content: ""; display: block; box-sizing: border-box; border: 0 solid currentColor; }
.m-br > i:first-child::before, .m-br > i:last-child::after { flex: 1 1 auto; margin-left: .23em; border-left-width: var(--m-bw); }
.m-br > i:first-child::after, .m-br > i:last-child::before { flex: none; height: .3em; width: calc(.23em + var(--m-bw)); border-right-width: var(--m-bw); }
.m-br > i:first-child::before { border-top-width: var(--m-bw); border-top-left-radius: .23em .3em; }
.m-br > i:first-child::after { border-bottom-width: var(--m-bw); border-bottom-right-radius: .23em .3em; }
.m-br > i:last-child::before { border-top-width: var(--m-bw); border-top-right-radius: .23em .3em; }
.m-br > i:last-child::after { border-bottom-width: var(--m-bw); border-bottom-left-radius: .23em .3em; }
.m-set > .m-br { width: .3em; border: var(--m-bw) solid currentColor; border-right: 0; }
.m-set > .m-br > i { display: none; }
.frac .m-sys, sup .m-sys { margin: .06em .1em; }
/* точка A(1; −2), имя фигуры ABCD, `(2; 3)`: в приложении это чип,
   на сайте — обычный текст, который не рвётся переносом */
.m-pt { white-space: nowrap; }

/* колода первого экрана: белая карточка с живой задачей */
.deck { margin-top: 28px; }
.deck-hd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 14px; }
.deck-hd b { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.deck-grades { display: flex; flex-wrap: wrap; gap: 6px; }
.deck-grades button {
  min-width: 38px; height: 38px; padding: 0 10px; cursor: pointer; border: 0;
  border-radius: 12px; background: rgba(255, 255, 255, .8);
  box-shadow: inset 0 0 0 1px var(--border); color: var(--ink-2); font: 700 15px var(--font);
}
.deck-grades button:hover { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--accent); }
.deck-grades button[aria-pressed="true"] { background: var(--accent); color: #fff; box-shadow: none; }
.deck-sheet {
  position: relative; padding: 24px 24px 20px; border-radius: 24px;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--border-2), 0 24px 50px -28px rgba(21, 26, 45, .25);
}
.deck .task { padding: 0; background: none; box-shadow: none; }
.deck .task-q { font-size: clamp(20px, 3.4vw, 24px); }
.task-topic {
  display: inline-block; margin-bottom: 2px; padding: 4px 11px; border-radius: var(--pill);
  font-size: 12.5px; font-weight: 700; text-decoration: none; color: var(--sub-deep);
  background: color-mix(in srgb, var(--sub) 12%, #fff);
}
.task-topic:hover { color: var(--ink); }
.task-hint { padding: 6px 4px; border: 0; background: none; cursor: pointer; font: 700 14.5px var(--font); color: var(--yellow-deep); }
.task-hint:hover { color: var(--ink); }
.task-hint:disabled { color: var(--muted); cursor: default; }
.task-note {
  margin-top: 16px; padding: 12px 16px 12px 44px; position: relative; border-radius: var(--r-s);
  font-size: 15px; line-height: 1.5; color: var(--ink); text-align: left;
}
.task-note::before { position: absolute; left: 14px; top: 11px; width: 20px; height: 20px; border-radius: 50%; font: 800 12px/20px var(--font); text-align: center; color: #fff; }
.task-note.is-hint { background: var(--yellow-soft); }
.task-note.is-hint::before { content: "?"; background: var(--yellow); }
.task-note.is-right { background: var(--aqua-soft); }
.task-note.is-right::before { content: "✓"; background: var(--aqua); }
.task-note.is-reveal { background: var(--red-soft); }
.task-note.is-reveal::before { content: "!"; background: var(--red); }
.deck-next { margin-top: 14px; padding: 4px 0; border: 0; background: none; cursor: pointer; font: 700 14.5px var(--font); color: var(--accent); }
.deck-next:hover { color: var(--accent-hover); }

/* --- главная: шаги, предметы ------------------------------------------- */

.cols { display: grid; gap: 24px; }
@media (min-width: 900px) { .cols { grid-template-columns: 1fr 1fr; gap: 44px; } }
.note-box { margin-top: 28px; padding: 24px 26px; }
.note-box.yellow { background: var(--yellow-soft); box-shadow: none; }
.note-box.yellow h3 { color: var(--yellow-deep); }
.price { font-size: 36px; font-weight: 800; letter-spacing: -0.02em; }

/* карточка предмета: пастельная подложка цвета предмета, картинка справа */

/* блог — белые карточки */

/* --- «Все предметы» ---------------------------------------------------- */

/* --- списки тем -------------------------------------------------------- */

.wip {
  display: inline-block; vertical-align: middle; margin-left: 8px; padding: 2px 9px;
  border-radius: var(--pill); background: var(--surface-2); color: var(--muted);
  font: 600 12px/1.5 var(--font); font-style: normal; letter-spacing: 0; text-transform: none; white-space: nowrap;
}

/* --- главная: блоки под первым экраном ----------------------------------- */

/* бегущая строка тем: белые чипы */
/* Полка глав: карточки с мини-обложкой; точка — цвет предмета. */
.ribbon { margin-inline: calc(50% - 50vw); margin-top: clamp(8px, 2vw, 24px); overflow-x: clip; }
.ribbon-hd {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
  max-width: 1360px; margin: 0 auto 30px; padding: 0 clamp(16px, 4vw, 48px);
}
.ribbon-hd p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0; }
.ribbon-hd p b { font-size: clamp(26px, 4vw, 34px); font-weight: 800; letter-spacing: -.03em; }
.ribbon-hd p span { font-size: clamp(16px, 2vw, 17px); color: var(--muted); }
/* «Полный список →», «Все предметы →» — ссылка без фона. */
.link-more { font-size: 15.5px; font-weight: 800; color: var(--ink); text-decoration: none; white-space: nowrap; transition: color .15s; }
.link-more:hover { color: var(--accent); }
.ribbon-rows {
  display: grid; gap: 22px; padding: 6px 0 36px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.ribbon-row.rev { margin-left: -180px; }
.s-math { --a: #4d97ff; --b: #33d0ec; }
.s-alg { --a: #5b8cff; --b: #a779ff; }
.s-geo { --a: #22c9a8; --b: #4fd1ff; }
.s-prob { --a: #ffb02e; --b: #ff7a59; }
.s-bio { --a: #3fbf62; --b: #a6e05a; }
.s-phys { --a: #e8613c; --b: #ff9f43; }
.s-chem { --a: #7c4dff; --b: #c06cff; }
.ribbon-row { display: flex; width: max-content; }
.ribbon-track { display: flex; gap: 20px; margin: 0; padding: 0 20px 0 0; list-style: none; animation: ribbon 90s linear infinite; will-change: transform; backface-visibility: hidden; }
.ribbon-row.rev .ribbon-track { animation-direction: reverse; animation-duration: 110s; }
@keyframes ribbon { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-100%, 0, 0); } }
.ribbon li { margin: 0; flex: none; }
.ribbon-track a {
  display: flex; align-items: center; gap: 18px; padding: 9px 28px 9px 9px; border-radius: 26px;
  background: var(--surface); text-decoration: none; color: var(--ink);
  box-shadow: 0 16px 30px -22px rgba(25, 30, 80, .45), inset 0 0 0 1px var(--border-2);
  transition: transform .2s, box-shadow .2s;
}
.ribbon-track a:hover { color: var(--ink); transform: translateY(-3px); box-shadow: 0 20px 34px -20px rgba(25, 30, 80, .5), inset 0 0 0 1.5px var(--a, var(--accent)); }
.ribbon img { flex: none; width: 128px; height: 72px; border-radius: 18px; object-fit: cover; background: var(--surface-2); }
.ribbon-track a span { display: grid; gap: 5px; }
.ribbon b { font-size: 17px; font-weight: 600; line-height: 1.25; white-space: nowrap; }
.ribbon small { display: flex; align-items: center; gap: 7px; font-size: 14px; line-height: 1.25; color: var(--muted); white-space: nowrap; }
.ribbon small::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--a, var(--accent)), var(--b, var(--aqua))); }
@media (max-width: 700px) {
  .ribbon-rows { gap: 14px; }
  .ribbon-track { gap: 12px; padding-right: 12px; }
  .ribbon a { gap: 12px; padding: 7px 18px 7px 7px; border-radius: 20px; }
  .ribbon img { width: 92px; height: 52px; border-radius: 14px; }
  .ribbon b { font-size: 15px; }
  .ribbon small { font-size: 13.5px; }
  .ribbon-row.rev { margin-left: -110px; }
}

.home .block { margin-top: clamp(64px, 8vw, 110px); }
.block-hd { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 28px; }
.block-hd .kicker { margin: 0; }
.block-hd h2 { margin: 0; max-width: 820px; font-size: clamp(26px, 4vw, 42px); }
/* Подпись под заголовком блока: о чём блок, коротко. Пилюль над заголовками нет —
   смысл, который они несли, живёт здесь. */
.block-hd > p { margin: 0; max-width: 680px; font-size: 17px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }


/* Призыв между блоками главной (parts/m_cta.html) — только на телефоне. */
.mcta { display: none; }
@media (max-width: 760px) {
  .mcta {
    display: grid; gap: 12px; margin: 40px 0 0; padding: 20px 18px 18px; border-radius: 24px; text-align: center;
    background: radial-gradient(260px 160px at 100% 0, rgba(23, 191, 224, .14), transparent 70%), radial-gradient(240px 150px at 0 100%, rgba(46, 229, 157, .12), transparent 70%), var(--surface);
    box-shadow: inset 0 0 0 1.5px var(--border-2), 0 24px 44px -30px rgba(21, 26, 45, .35);
  }
  .mcta p { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--ink); text-wrap: balance; }
  .mcta .btn { width: 100%; min-height: 54px; font-size: 16.5px; }
  .mcta small { font-size: 14px; line-height: 1.4; color: var(--muted); }
}